/* ==========================================================================
   KIM NGÂN — Trang sức & Đồng hồ · Phong cách DARK PREMIUM (cao cấp, phổ thông)
   Nền đen than #121212 / #1A1A1A, chữ trắng ngà #F2EDE4, vàng nhạt #C8A96A (brand),
   vàng đậm #9A7B3E, xám #8A8580. Font tiêu đề "Playfair Display" (Didone, có Vietnamese — thay Bodoni Moda vì Google Fonts không có subset Vietnamese),
   thân "Be Vietnam Pro" 300/400.
   ĐIỂM NHẬN DIỆN RIÊNG:
   (1) Chi tiết kim loại: đường viền vàng KÉP 1px (double line) dưới tiêu đề mục
       (.sec-head::after) và quanh thẻ sản phẩm khi hover (border + outline lệch 4px).
   (2) Số La Mã (I, II, III…) đánh số bộ sưu tập và các bước dịch vụ (.roman).
   (3) Ảnh sản phẩm trên nền tối, viền mảnh 1px xám, đổi viền vàng khi hover.
   Layout: header đen trong suốt đè lên hero, logo serif ở giữa, nav chia 2 bên;
   hero full-width ảnh tối + overlay + chữ căn giữa + nút viền vàng; section rộng,
   ít nội dung mỗi màn. Không hiệu ứng nặng.
   Breakpoints: 1100 / 980 / 640px.
   ========================================================================== */
:root{
  --bg:#121212; --bg-2:#1A1A1A; --bg-3:#222222;
  --ink:#F2EDE4; --ink-2:#CFC8BC; --muted:#8A8580;
  --gold:#C8A96A; --gold-d:#9A7B3E; --gold-l:#E3CD9A;
  --line:#2E2C29; --line-2:#3C3934;
  --ph:linear-gradient(135deg,#2A2621,#161412);
  --ff-d:'Playfair Display',Georgia,'Times New Roman',serif;
  --ff-b:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;
  --container:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:300 16px/1.7 var(--ff-b);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--ff-d);font-weight:400;line-height:1.15;letter-spacing:.01em}
h1{font-size:clamp(40px,6vw,76px)}
h2{font-size:clamp(30px,4vw,46px)}
h3{font-size:22px}
p{color:var(--ink-2)}
strong{font-weight:500;color:var(--ink)}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#121212;padding:8px 14px;z-index:99}
.skip:focus{left:8px}
.ph{background:var(--img,var(--ph)) center/cover no-repeat}
.roman{font-family:var(--ff-d);color:var(--gold);letter-spacing:.06em}
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:400}
.muted{color:var(--muted)}

/* ---------- nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 30px;border:1px solid var(--gold);color:var(--gold);background:transparent;font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;cursor:pointer;transition:.25s;min-height:48px;text-align:center}
.btn:hover{background:var(--gold);color:#121212}
.btn--solid{background:var(--gold);color:#121212}
.btn--solid:hover{background:var(--gold-l);border-color:var(--gold-l)}
.btn--ghost{border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.btn--sm{padding:10px 18px;min-height:40px;font-size:12px}
.btn--block{width:100%}

/* ---------- header ---------- */
.site-header{position:absolute;top:0;left:0;right:0;z-index:50;background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,0));border-bottom:1px solid rgba(200,169,106,.16)}
.site-header .container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:88px;gap:20px}
.topnav{display:flex;gap:30px;align-items:center;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase}
.topnav--l{justify-content:flex-start}
.topnav--r{justify-content:flex-end}
.topnav a{padding:6px 0;border-bottom:1px solid transparent;color:var(--ink);opacity:.85;transition:.2s}
.topnav a:hover,.topnav a.is-active{color:var(--gold);opacity:1;border-bottom-color:var(--gold)}
.logo{text-align:center;font-family:var(--ff-d);font-size:30px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);line-height:1}
.logo small{display:block;font-family:var(--ff-b);font-size:9px;letter-spacing:.42em;color:var(--gold);margin-top:6px;font-weight:400}
.icons{display:flex;gap:14px;align-items:center;margin-left:14px;padding-left:20px;border-left:1px solid rgba(255,255,255,.18)}
.icons a,.icons button{background:none;border:0;color:var(--ink);opacity:.85;cursor:pointer;display:inline-flex;position:relative}
.icons svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}
.icons a:hover,.icons button:hover{color:var(--gold);opacity:1}
.cart-n{position:absolute;top:-7px;right:-9px;background:var(--gold);color:#121212;font-size:10px;font-weight:500;min-width:16px;height:16px;border-radius:8px;display:grid;place-items:center;padding:0 4px}
.burger{display:none;background:none;border:1px solid var(--line-2);width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:20px;height:1px;background:var(--ink)}
#nav{display:contents}
.topnav--l{order:1}.site-header .logo{order:2}.topnav--r{order:3}.burger{order:4}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(560px,85vh,820px);display:grid;place-items:center;text-align:center;overflow:hidden;padding:140px 24px 90px}
.hero .ph{position:absolute;inset:0;z-index:0}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,10,.55),rgba(18,18,18,.78) 70%,#121212);z-index:1}
.hero__in{position:relative;z-index:2;max-width:760px}
.hero__in .eyebrow{margin-bottom:22px;display:block}
.hero__in h1{margin-bottom:18px;color:var(--ink)}
.hero__in p{font-size:18px;max-width:560px;margin:0 auto 34px}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero--page{min-height:clamp(380px,52vh,520px);padding:150px 24px 70px}
.hero--page h1{font-size:clamp(36px,5vw,60px)}
.crumbs{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.crumbs a:hover{color:var(--gold)}

/* ---------- section & tiêu đề đường viền kép ---------- */
.section{padding:96px 0}
.section--tight{padding:64px 0}
.section--alt{background:var(--bg-2)}
.section--pd{padding-top:130px}
.sec-head{text-align:center;max-width:680px;margin:0 auto 56px}
.sec-head .eyebrow{display:block;margin-bottom:14px}
.sec-head p{margin-top:16px}
.sec-head::after{content:"";display:block;width:110px;height:6px;margin:22px auto 0;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.sec-head--left{text-align:left;margin-left:0}
.sec-head--left::after{margin-left:0}

/* ---------- bộ sưu tập I/II/III ---------- */
.collections{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.coll{position:relative;display:block;border:1px solid var(--line);background:var(--bg-2);transition:.3s;outline:1px solid transparent;outline-offset:4px}
.coll .ph{aspect-ratio:4/5;filter:saturate(.85) brightness(.9);transition:.4s}
.coll:hover .ph{filter:saturate(1) brightness(1)}
.coll__num{position:absolute;top:18px;left:18px;font-size:40px;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.coll__body{padding:24px 22px 26px;border-top:1px solid var(--line)}
.coll__body h3{margin-bottom:6px}
.coll__body p{font-size:14.5px;color:var(--muted)}
.coll__link{display:inline-block;margin-top:14px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--gold-d);padding-bottom:2px}
.coll:hover{border-color:var(--gold);outline-color:var(--gold)}

/* ---------- thẻ sản phẩm ---------- */
.grid{display:grid;gap:26px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;display:block;background:var(--bg-2);border:1px solid var(--line);transition:.3s;outline:1px solid transparent;outline-offset:4px}
.card:hover{border-color:var(--gold);outline-color:var(--gold)}
.card__img{position:relative;aspect-ratio:1;overflow:hidden;background:#161616;border-bottom:1px solid var(--line)}
.card__img .ph{position:absolute;inset:14px;border:1px solid var(--line-2);transition:.4s}
.card:hover .card__img .ph{border-color:var(--gold-d)}
.tag{position:absolute;top:14px;left:14px;z-index:2;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:5px 10px;background:var(--gold);color:#121212;font-weight:500}
.tag--hot{background:#F2EDE4}
.card__body{padding:18px 18px 20px}
.card__cat{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.card__body h3{font-size:19px;margin-bottom:8px;color:var(--ink)}
.price{font-family:var(--ff-d);font-size:20px;color:var(--gold);letter-spacing:.02em}
.price s{color:var(--muted);font-size:14px;margin-left:8px;font-family:var(--ff-b)}
.card__actions{display:flex;gap:8px;margin-top:14px}
.card__actions .btn{flex:1;padding:9px 6px;font-size:11px;letter-spacing:.14em}

/* ---------- dịch vụ ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line)}
.service{padding:44px 36px;border-right:1px solid var(--line);background:var(--bg)}
.service:last-child{border-right:0}
.service .roman{font-size:44px;display:block;margin-bottom:14px}
.service h3{margin-bottom:10px}
.service p{font-size:15px;color:var(--muted)}

/* ---------- câu chuyện ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.story__img{position:relative;padding:14px;border:1px solid var(--line-2)}
.story__img .ph{aspect-ratio:4/5;filter:brightness(.92)}
.story__img::before{content:"";position:absolute;inset:6px;border:1px solid var(--gold-d);pointer-events:none}
.story__txt h2{margin:12px 0 20px}
.story__txt p+p{margin-top:14px}
.stats{display:flex;gap:36px;margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.stat b{display:block;font-family:var(--ff-d);font-size:36px;font-weight:400;color:var(--gold);line-height:1}
.stat span{font-size:12.5px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}

/* ---------- CTA showroom ---------- */
.cta{position:relative;text-align:center;padding:100px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.cta::before,.cta::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--gold-d);opacity:.6}
.cta::before{top:5px}.cta::after{bottom:5px}
.cta h2{margin:12px auto 16px;max-width:700px}
.cta p{max-width:520px;margin:0 auto 30px}

/* ---------- bộ lọc (bo-suu-tap) ---------- */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:36px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{border:1px solid var(--line-2);background:transparent;color:var(--ink-2);padding:9px 18px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--gold);color:var(--gold)}
.chip.is-on{background:var(--gold);color:#121212;border-color:var(--gold)}
.sortbox{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.field{width:100%;background:var(--bg-3);border:1px solid var(--line-2);color:var(--ink);padding:12px 14px;min-height:46px;outline:0;transition:.2s}
.field:focus{border-color:var(--gold)}
.field::placeholder{color:#6B6660}
select.field{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:38px;cursor:pointer}
select.field option{background:#222;color:#F2EDE4}
.sortbox select{width:auto;min-width:200px}
.count{font-size:13px;color:var(--muted);margin-bottom:18px}
.empty{display:none;text-align:center;padding:60px 0;color:var(--muted)}

/* ---------- chi tiết sản phẩm ---------- */
.pd{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:start}
.gallery__main{position:relative;aspect-ratio:1;border:1px solid var(--line-2);background:#161616;overflow:hidden}
.gallery__main .ph{position:absolute;inset:16px;border:1px solid var(--line)}
.engrave{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);font-family:var(--ff-d);font-style:italic;letter-spacing:.3em;color:var(--gold-l);text-shadow:0 0 8px rgba(0,0,0,.9),0 1px 0 #000;font-size:15px;white-space:nowrap;padding:4px 14px;border:1px solid rgba(200,169,106,.5);background:rgba(0,0,0,.45);opacity:0;transition:.25s;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.engrave.is-show{opacity:1}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.thumb{aspect-ratio:1;border:1px solid var(--line-2);background:#161616;padding:6px;cursor:pointer;transition:.2s;outline:1px solid transparent;outline-offset:3px}
.thumb .ph{width:100%;height:100%}
.thumb:hover,.thumb.is-on{border-color:var(--gold);outline-color:var(--gold)}
.pd__info .eyebrow{display:block;margin-bottom:10px}
.pd__info h1{font-size:clamp(32px,4vw,48px);margin-bottom:10px}
.pd__price{font-size:30px;margin:10px 0 6px}
.pd__meta{font-size:13px;color:var(--muted);margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.opt{margin-bottom:24px}
.opt__lbl{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.opt__lbl span{color:var(--gold);letter-spacing:.04em;text-transform:none;font-family:var(--ff-d);font-size:15px}
.sizes{display:flex;gap:8px;flex-wrap:wrap}
.sizes button{width:44px;height:44px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);cursor:pointer;transition:.2s}
.sizes button:hover{border-color:var(--gold);color:var(--gold)}
.sizes button.is-on{background:var(--gold);color:#121212;border-color:var(--gold)}
.mats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mat{border:1px solid var(--line-2);padding:12px 12px;cursor:pointer;text-align:left;background:transparent;transition:.2s;display:flex;gap:10px;align-items:center}
.mat i{width:22px;height:22px;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,.25)}
.mat b{display:block;font-weight:400;font-size:14px;color:var(--ink)}
.mat small{display:block;font-size:12px;color:var(--muted)}
.mat:hover{border-color:var(--gold)}
.mat.is-on{border-color:var(--gold);outline:1px solid var(--gold);outline-offset:3px}
.help{font-size:12.5px;color:var(--muted);margin-top:8px}
.pd__cta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:30px 0 22px}
.assure{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px}
.assure b{display:block;color:var(--gold);font-weight:400;font-family:var(--ff-d);font-size:17px}
.tabs{margin-top:80px;border-top:1px solid var(--line)}
.tabs__nav{display:flex;gap:0;border-bottom:1px solid var(--line)}
.tabs__nav button{background:none;border:0;border-bottom:2px solid transparent;padding:18px 26px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);cursor:pointer;margin-bottom:-1px}
.tabs__nav button.is-on{color:var(--gold);border-bottom-color:var(--gold)}
.tab{display:none;padding:34px 0;max-width:820px}
.tab.is-on{display:block}
.tab p+p{margin-top:12px}
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th,.spec td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec th{color:var(--muted);font-weight:400;width:36%;letter-spacing:.04em}
.spec td{color:var(--ink)}
.spec--cmp th,.spec--cmp td{text-align:center}
.spec--cmp th:first-child,.spec--cmp td:first-child{text-align:left}
.spec--cmp thead th{color:var(--gold);font-family:var(--ff-d);font-size:20px;letter-spacing:.02em;border-bottom:1px solid var(--gold-d);width:auto}
.spec--cmp .ok{color:var(--gold)}
.tab ul{padding-left:20px;color:var(--ink-2)}
.tab li+li{margin-top:6px}

/* ---------- đồng hồ ---------- */
.watches{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.watch{border:1px solid var(--line);background:var(--bg-2);outline:1px solid transparent;outline-offset:4px;transition:.3s}
.watch:hover{border-color:var(--gold);outline-color:var(--gold)}
.watch .ph{aspect-ratio:4/5}
.watch__body{padding:22px}
.watch__body .roman{font-size:30px;display:block;margin-bottom:6px}
.watch__body h3{margin-bottom:6px}
.watch__body p{font-size:14.5px;color:var(--muted);margin-bottom:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split .ph{aspect-ratio:4/3;border:1px solid var(--line-2)}
.split h2{margin:10px 0 16px}
.feat{list-style:none;margin-top:20px;display:grid;gap:12px}
.feat li{display:flex;gap:14px;align-items:baseline;font-size:15px;color:var(--ink-2)}
.feat .roman{font-size:18px;min-width:32px}
.table-wrap{overflow-x:auto;border:1px solid var(--line)}
.table-wrap .spec{min-width:640px}

/* ---------- showroom ---------- */
.rooms{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.room{border:1px solid var(--line);background:var(--bg-2)}
.room__img{aspect-ratio:16/9;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 120%,rgba(200,169,106,.25),transparent 60%),linear-gradient(135deg,#262320,#151413);border-bottom:1px solid var(--line);overflow:hidden}
.room__img::before{content:"";position:absolute;inset:12px;border:1px solid var(--gold-d);opacity:.6}
.room__img span{font-family:var(--ff-d);font-size:92px;color:var(--gold);letter-spacing:.1em;line-height:1}
.room__img small{position:absolute;bottom:22px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.room__body{padding:26px 26px 28px}
.room__body h3{font-size:26px;margin-bottom:12px}
.info{list-style:none;display:grid;gap:8px;font-size:15px;color:var(--ink-2)}
.info li{display:grid;grid-template-columns:96px 1fr;gap:10px}
.info li b{font-weight:400;color:var(--muted);font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding-top:4px}
.room__body .btn{margin-top:20px}

/* ---------- form ---------- */
.form-wrap{max-width:820px;margin:0 auto;border:1px solid var(--line);background:var(--bg-2);padding:44px;position:relative}
.form-wrap::before{content:"";position:absolute;inset:6px;border:1px solid var(--line);pointer-events:none}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.f-full{grid-column:1/-1}
label.lbl{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
label.lbl em{color:var(--gold);font-style:normal}
textarea.field{min-height:120px;resize:vertical}
.form-note{font-size:13px;color:var(--muted);margin-top:14px}
.form-ok{display:none;margin-top:18px;padding:14px 18px;border:1px solid var(--gold);color:var(--gold-l);font-size:14.5px}
.form-ok.is-show{display:block}
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.contact .form-wrap{max-width:none;margin:0}
.contact .form-grid{grid-template-columns:1fr}
.contact-info{display:grid;gap:22px;margin-top:28px}
.contact-info div{padding-left:18px;border-left:1px solid var(--gold-d)}
.contact-info b{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:4px}
.contact-info p{font-size:15px}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--ff-d);font-size:21px;color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--gold);font-size:26px;line-height:1;font-family:var(--ff-b);font-weight:300}
.acc details[open] summary::after{content:"−"}
.acc details[open] summary{color:var(--gold)}
.acc .acc__body{padding:0 0 22px;font-size:15px;color:var(--ink-2)}
.acc .acc__body ul{padding-left:20px;margin-top:8px}

/* ---------- footer ---------- */
.site-footer{background:#0D0D0D;border-top:1px solid var(--line);padding:72px 0 28px;font-size:14.5px}
.site-footer .logo{text-align:left;font-size:26px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line)}
.foot p{color:var(--muted);font-size:14px;margin-top:16px;max-width:320px}
.foot h4{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-family:var(--ff-b);font-weight:400;margin-bottom:18px}
.foot ul{list-style:none;display:grid;gap:9px;color:var(--ink-2)}
.foot a:hover{color:var(--gold)}
.foot address{font-style:normal;color:var(--ink-2);display:grid;gap:8px}
.copy{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;color:var(--muted);font-size:13px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .topnav{gap:18px;font-size:12px}
  .grid--4{grid-template-columns:repeat(3,1fr)}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .site-header{position:sticky;top:0;background:#121212;border-bottom:1px solid var(--line)}
  .site-header .container{display:flex;justify-content:space-between;height:70px}
  .logo{font-size:24px;text-align:left}
  .burger{display:flex}
  #nav{display:none;position:absolute;left:0;right:0;top:70px;background:#161616;border-bottom:1px solid var(--gold-d);padding:12px 24px 20px;flex-direction:column;gap:0}
  #nav.is-open{display:flex}
  .topnav{flex-direction:column;align-items:stretch;gap:0}
  .topnav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .icons{border:0;padding:16px 0 0;margin:0}
  .hero{min-height:clamp(520px,70vh,680px);padding:90px 24px 70px}
  .hero--page{min-height:auto;padding:70px 24px 56px}
  .section--pd{padding-top:36px}
  .collections,.watches,.services,.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .service{border-bottom:1px solid var(--line)}
  .service:nth-child(2){border-right:0}
  .service:last-child{grid-column:1/-1}
  .story,.split,.contact,.pd{grid-template-columns:1fr;gap:40px}
  .section{padding:72px 0}
}
@media (max-width:640px){
  .container{padding:0 18px}
  .collections,.watches,.services,.grid--3,.grid--4,.rooms,.form-grid,.pd__cta,.mats{grid-template-columns:1fr}
  .service{border-right:0}
  .services{border:1px solid var(--line)}
  .stats{gap:22px;flex-wrap:wrap}
  .section{padding:56px 0}
  .form-wrap{padding:26px 18px}
  .foot{grid-template-columns:1fr;gap:28px}
  .tabs__nav{overflow-x:auto}
  .tabs__nav button{padding:14px 16px;white-space:nowrap}
  .assure{grid-template-columns:1fr;gap:10px}
  .toolbar{flex-direction:column;align-items:stretch}
  .sortbox select{width:100%}
  .info li{grid-template-columns:1fr}
  .thumbs{gap:8px}
  .hero__in p{font-size:16px}
}