/* ============================================================
   RESELL ON THE WRIST — design tokens + components
   Built from the reusable site framework. Dark showroom theme:
   near-black background, warm off-white type, soft silver accent.
   Layout cues borrowed from Timepiece Trading (
   centered-logo header, style hero slider), simplified for a
   catalog-only site.
   Display: Cormorant Garamond · UI/body: Manrope
   ============================================================ */

:root{
  --bg:          #0a0a09;   /* page background */
  --bg-deep:     #050505;   /* utility bar / footer */
  --surface:     #131311;   /* product plates, cards */
  --surface-2:   #1b1a17;   /* hover / pressed panels */
  --line:        rgba(245,242,235,.09);   /* hairline borders */
  --line-strong: rgba(245,242,235,.22);   /* emphasized borders */
  --muted:       #85817a;   /* tertiary text */
  --ink-2:       #b8b3a9;   /* secondary / body text */
  --ink:         #f5f2eb;   /* primary text / button fill */
  --accent:      #c9ccd1;   /* soft silver */
  --radius:      14px;
  --display:     'Cormorant Garamond', 'Didot', Georgia, serif;
  --sans:        'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --header-h:    84px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
::selection{ background:var(--accent); color:var(--bg); }
a{ color:inherit; }
h1,h2,h3{ margin:0; text-wrap:balance; color:var(--ink); }
button{ font:inherit; color:inherit; }
svg{ flex-shrink:0; }

/* subtle film grain — remove body::before to drop it */
body::before{
  content:""; position:fixed; inset:0; z-index:400; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ max-width:1280px; margin:0 auto; padding-inline:clamp(1rem,4vw,3rem); }

.eyebrow{
  margin:0;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
}
.eyebrow .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:.7em; vertical-align:middle; box-shadow:0 0 12px var(--accent); }

em{ font-family:var(--display); font-style:italic; font-weight:500; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans);
  font-weight:700;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.1em 2em;
  border:1px solid var(--ink);
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.btn:hover{ background:transparent; color:var(--ink); transform:translateY(-2px); }
.btn .arrow{ transition:transform .3s ease; }
.btn:hover .arrow{ transform:translateX(4px); }
.btn svg{ width:16px; height:16px; }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-outline:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.btn-gold{ background:var(--accent); border-color:var(--accent); color:#0a0a09; }
.btn-gold:hover{ background:transparent; color:var(--accent); }
.btn-row{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.link-arrow{
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; display:inline-flex; gap:.6em; align-items:center;
  border-bottom:1px solid var(--line-strong); padding-bottom:.4rem;
  transition:border-color .3s ease, color .3s ease;
}
.link-arrow:hover{ border-color:var(--accent); color:var(--accent); }
.link-arrow span{ transition:transform .3s ease; }
.link-arrow:hover span{ transform:translateX(4px); }

/* ---------- utility bar (TPT-style icon shortcuts) ---------- */
.utility{ background:var(--bg-deep); border-bottom:1px solid var(--line); }
.utility .wrap{ display:flex; justify-content:space-between; align-items:stretch; min-height:56px; }
.util-left{ display:flex; align-items:stretch; }
.util-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  min-width:68px; padding:.4rem .8rem;
  border-right:1px solid var(--line);
  text-decoration:none; color:var(--ink-2);
  font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  transition:color .25s ease, background .25s ease;
}
.util-btn:first-child{ border-left:1px solid var(--line); }
.util-btn svg{ width:17px; height:17px; }
.util-btn:hover{ color:var(--ink); background:var(--surface); }
.util-contact{ display:flex; align-items:center; padding-inline:1.1rem; font-size:.74rem; font-weight:700; letter-spacing:.06em; color:var(--ink); text-decoration:none; }
.util-contact:hover{ color:var(--accent); }
.util-right{ display:flex; align-items:center; gap:.6rem; font-size:.74rem; font-weight:700; letter-spacing:.06em; color:var(--ink); }
.util-right svg{ width:17px; height:17px; color:var(--accent); }
@media (max-width:760px){
  .util-right, .util-contact{ display:none; }
  .utility .wrap{ justify-content:center; }
  .util-btn{ min-width:0; flex:1; }
  .util-left{ width:100%; }
}

/* ---------- header (hamburger left · logo center · icons right) ---------- */
header.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(10,10,9,.82);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:background .4s ease;
}
header.nav.scrolled{ background:rgba(6,6,5,.94); }
.nav-inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  min-height:var(--header-h); gap:1rem;
  transition:min-height .4s ease;
}
.nav-side{ display:flex; align-items:center; gap:.4rem; }
.nav-side.right{ justify-content:flex-end; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  height:44px; min-width:44px; padding:0 .6rem;
  background:none; border:0; border-radius:999px; cursor:pointer;
  color:var(--ink); text-decoration:none;
  font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  transition:background .25s ease, color .25s ease;
}
.icon-btn:hover, .icon-btn[aria-current="page"]{ background:var(--surface-2); }
.icon-btn svg{ width:21px; height:21px; }
.icon-btn .lbl{ display:none; }
@media (min-width:900px){ .icon-btn .lbl{ display:inline; } }
.nav-mark{ display:flex; align-items:center; text-decoration:none; }
.nav-mark img{ height:52px; width:auto; transition:height .4s ease; }
@media (max-width:520px){ .nav-mark img{ height:40px; } .nav-side.right .hide-xs{ display:none; } }

body.lock{ overflow:hidden; }

/* ---------- search overlay ---------- */
.search-panel{
  position:fixed; inset:0 0 auto 0; z-index:270;
  background:var(--bg-deep); border-bottom:1px solid var(--line);
  padding-block:clamp(1.4rem,4vw,2.4rem);
  transform:translateY(-102%); transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
body.search-open .search-panel{ transform:none; }
body.search-open .drawer-scrim{ opacity:1; pointer-events:auto; }
.drawer-scrim{ position:fixed; inset:0; z-index:250; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .35s ease; }
.search-row{ display:flex; gap:1rem; align-items:center; border-bottom:1px solid var(--line-strong); }
.search-row svg{ width:24px; height:24px; color:var(--muted); }
.search-row input{
  flex:1; min-width:0; background:none; border:0; outline:none; color:var(--ink);
  font-family:var(--display); font-size:clamp(1.6rem,4vw,2.6rem); padding:.6rem 0;
}
.search-row input::placeholder{ color:var(--muted); }
.search-row input::-webkit-search-cancel-button{ display:none; }
.search-results{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.2rem; }
.search-results a{ display:flex; justify-content:space-between; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink-2); font-size:.9rem; }
.search-results a:hover{ color:var(--ink); }
.search-results b{ color:var(--ink); font-weight:600; }
.search-hint{ margin:1rem 0 0; font-size:.78rem; color:var(--muted); }

/* ---------- hero: big centered type over moving brushed-steel light ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:calc(100vh - var(--header-h) - 52px);
  display:flex; flex-direction:column;
  background:#070707;
  border-bottom:1px solid var(--line);
}
/* fine brushed-metal grain */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000, transparent 75%);
}
/* vignette to keep the edges deep black */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 75% 70% at 50% 45%, transparent 40%, rgba(7,7,7,.92) 100%);
}
.sheen{ position:absolute; inset:0; z-index:-2; pointer-events:none; }
.sheen span{
  position:absolute; top:-20%; bottom:-20%; left:0; width:24vw;
  background:linear-gradient(90deg, transparent, rgba(214,218,224,.05) 38%, rgba(255,255,255,.11) 50%, rgba(214,218,224,.05) 62%, transparent);
  filter:blur(22px);
  animation:sweep 16s cubic-bezier(.45,0,.3,1) infinite;
}
.sheen span:nth-child(2){ width:9vw;  animation-duration:21s; animation-delay:-7s;  opacity:.8; filter:blur(10px); }
.sheen span:nth-child(3){ width:38vw; animation-duration:29s; animation-delay:-15s; opacity:.55; }
.sheen span:nth-child(4){ width:4vw;  animation-duration:12s; animation-delay:-4s;  opacity:.7; filter:blur(4px); }
.sheen span:nth-child(5){ width:16vw; animation-duration:24s; animation-delay:-19s; opacity:.6; }
@keyframes sweep{
  from{ transform:translateX(-45vw) skewX(-24deg); }
  to{ transform:translateX(145vw) skewX(-24deg); }
}
.hero-center{
  flex:1; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding-block:clamp(4rem,9vw,7rem) clamp(3rem,6vw,4.5rem);
}
.hero h1{
  margin-top:1.6rem;
  font-family:var(--sans); font-weight:300; text-transform:uppercase;
  font-size:clamp(3rem,9vw,8.2rem); line-height:.92; letter-spacing:.02em; color:var(--ink);
}
.hero h1 strong{
  display:block; font-weight:800;
  background:linear-gradient(100deg, #9b9ea4 0%, #f5f2eb 22%, #a6a9af 40%, #fbfaf7 55%, #8e9197 75%, #e9ebee 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:metal 9s ease-in-out infinite alternate;
}
@keyframes metal{ from{ background-position:0% 50%; } to{ background-position:100% 50%; } }
.hero-sub{ margin:1.4rem 0 2.4rem; font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(1.3rem,2.4vw,1.9rem); color:var(--ink-2); }
.hero .btn-row{ justify-content:center; }
.hero-center > *{ opacity:0; transform:translateY(18px); animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-center > :nth-child(2){ animation-delay:.1s; }
.hero-center > :nth-child(3){ animation-delay:.2s; }
.hero-center > :nth-child(4){ animation-delay:.3s; }
@keyframes rise{ to{ opacity:1; transform:none; } }
.hero-center > h1{ animation:rise 1s cubic-bezier(.2,.7,.2,1) .1s forwards; }

@media (max-width:700px){ .hero{ min-height:auto; } }
@media (prefers-reduced-motion:reduce){
  .sheen span, .hero h1 strong{ animation:none; }
  .hero-center > *{ animation:none; opacity:1; transform:none; }
}
/* ---------- marquee strip ---------- */
.marquee{ border-bottom:1px solid var(--line); overflow:hidden; background:var(--bg-deep); }
.marquee-track{ display:flex; width:max-content; animation:marquee 38s linear infinite; }
.marquee span{
  display:flex; align-items:center; gap:2.4rem; padding:1.1rem 1.2rem;
  font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap;
}
.marquee span::after{ content:"\2726"; color:var(--accent); font-size:.7rem; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

/* ---------- sections ---------- */
.section{ padding-block:clamp(4.5rem,9vw,7rem); }
.section.alt{ background:var(--bg-deep); border-block:1px solid var(--line); }
.title-center{ text-align:center; margin:0 auto clamp(2.4rem,5vw,3.4rem); max-width:40rem; }
.title-center h2{
  font-family:var(--sans); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:.14em;
}
.title-center p{ margin:.9rem 0 0; color:var(--ink-2); font-size:.98rem; line-height:1.65; }
.title-center .rule{ display:block; width:44px; height:1px; background:var(--accent); margin:1.1rem auto 0; }
.section-foot{ text-align:center; margin-top:clamp(2.4rem,5vw,3.4rem); }

/* ---------- style tiles ---------- */
.style-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(.8rem,2vw,1.2rem); }
.style-tile{
  position:relative; aspect-ratio:4/5;
  border-radius:var(--radius);
  background:radial-gradient(ellipse 90% 70% at 50% 30%, var(--surface-2), var(--surface) 70%);
  border:1px solid var(--line);
  text-decoration:none; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center; text-align:center;
  padding:clamp(1.2rem,2.4vw,1.8rem);
  transition:border-color .4s ease, transform .4s ease;
}
.style-tile .watch{ position:absolute; top:12%; left:50%; width:62%; transform:translateX(-50%); opacity:.9; transition:transform .8s cubic-bezier(.2,.7,.2,1); filter:drop-shadow(0 20px 26px rgba(0,0,0,.55)); }
.style-tile:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
.style-tile:hover .watch{ transform:translateX(-50%) scale(1.06) rotate(-4deg); }
.style-name{ font-family:var(--sans); font-weight:600; font-size:1rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); position:relative; }
.style-count{ margin-top:.5rem; font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); position:relative; }

/* ---------- watch grid / product cards ---------- */
.watch-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,2.8vw,2.2rem) clamp(1rem,2vw,1.5rem); }
.watch-grid.four{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1080px){ .watch-grid.four{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:960px){ .watch-grid, .watch-grid.four{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .watch-grid, .watch-grid.four{ grid-template-columns:1fr; } }
.watch-card{ display:flex; flex-direction:column; justify-content:flex-start; align-self:start; text-align:left; background:none; border:0; padding:0; cursor:pointer; color:inherit; width:100%; }
.watch-plate{
  position:relative; aspect-ratio:1/1;
  border-radius:var(--radius);
  background:radial-gradient(ellipse 80% 70% at 50% 40%, var(--surface-2), var(--surface) 75%);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .4s ease;
}
.watch-plate img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.watch-plate .watch{ width:58%; transition:transform .8s cubic-bezier(.2,.7,.2,1); filter:drop-shadow(0 18px 24px rgba(0,0,0,.6)); }
.watch-card:hover .watch-plate{ border-color:var(--line-strong); }
.watch-card:hover .watch-plate img, .watch-card:hover .watch-plate .watch{ transform:scale(1.06); }
.badge{
  position:absolute; top:.9rem; left:.9rem; z-index:2;
  font-size:.6rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  background:var(--ink); color:var(--bg); padding:.5em .85em; border-radius:999px;
}
.badge.hold{ background:var(--accent); color:#0a0a09; }
.badge.sold{ background:transparent; color:var(--ink-2); border:1px solid var(--line-strong); }
.badge.sample{ left:auto; right:.9rem; background:transparent; border:1px dashed var(--line-strong); color:var(--muted); }
.watch-view{
  position:absolute; left:.9rem; right:.9rem; bottom:.9rem; z-index:2;
  background:var(--ink); color:var(--bg); border-radius:999px; text-align:center;
  padding:.85rem; font-size:.64rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease;
}
.watch-card:hover .watch-view, .watch-card:focus-visible .watch-view{ opacity:1; transform:none; }
@media (hover:none){ .watch-view{ display:none; } }
.watch-card.is-sold .watch-plate > :not(.badge){ opacity:.45; }
.watch-info{ padding:1.05rem .2rem 0; }
.watch-style{ font-size:.62rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.watch-model{ display:block; margin-top:.4rem; font-family:var(--display); font-size:1.5rem; font-weight:500; line-height:1.12; color:var(--ink); }
.watch-meta{ display:flex; justify-content:space-between; gap:1rem; margin-top:.55rem; font-size:.82rem; color:var(--muted); }
.watch-meta .price{ color:var(--ink); font-weight:700; white-space:nowrap; }

.empty-state{
  grid-column:1/-1; text-align:center; padding:4rem 1rem;
  border:1px dashed var(--line-strong); border-radius:var(--radius); color:var(--ink-2);
}
.empty-state h3{ font-family:var(--display); font-weight:500; font-size:2rem; }
.empty-state p{ margin:.6rem 0 1.6rem; }

/* ---------- editorial split (logo art + how we sell) ---------- */
.split{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.5rem,7vw,6rem); align-items:center; }
.split-art{
  position:relative; aspect-ratio:1/1; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%, rgba(201,204,209,.10), transparent 62%);
}
.split-art::before, .split-art::after{ content:""; position:absolute; border-radius:50%; border:1px solid var(--line); }
.split-art::before{ inset:4%; }
.split-art::after{ inset:12%; border-style:dashed; animation:spin 120s linear infinite; }
.split-art img{ width:66%; position:relative; z-index:1; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .split-art::after{ animation:none; } }
.split-copy h2{ margin-top:1rem; font-family:var(--display); font-weight:500; font-size:clamp(2.4rem,5vw,3.8rem); line-height:1.02; }
.split-copy h2 em{ color:var(--accent); }
.split-copy > p{ margin:1.3rem 0 2rem; max-width:44ch; font-size:1rem; line-height:1.75; }
.split-copy .btn-row{ margin-top:2rem; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } .split-art{ max-width:360px; width:100%; margin:0 auto; } }

/* key/value spec list */
.specs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.specs li{ display:flex; justify-content:space-between; gap:1rem; padding-block:.95rem; border-bottom:1px solid var(--line); font-size:.9rem; }
.specs .k{ color:var(--muted); text-transform:uppercase; letter-spacing:.16em; font-weight:700; font-size:.64rem; padding-top:.2rem; }
.specs .v{ color:var(--ink); text-align:right; }
.specs .v a{ text-decoration:none; }
.specs .v a:hover{ color:var(--accent); }

/* ---------- numbered steps ---------- */
.steps-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,1.4rem); }
.step{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.8rem,4vw,2.4rem) clamp(1.4rem,3vw,1.9rem);
  transition:border-color .3s ease, transform .3s ease;
}
.step:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
.step-index{ font-family:var(--display); font-style:italic; font-size:2.8rem; color:var(--accent); line-height:1; }
.step h3{ margin-top:1.2rem; font-size:.95rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.step p{ margin:.8rem 0 0; font-size:.9rem; line-height:1.7; color:var(--ink-2); }
@media (max-width:760px){ .steps-3{ grid-template-columns:1fr; } }

/* ---------- closing CTA band ---------- */
.follow{
  text-align:center; position:relative; overflow:hidden;
  padding-block:clamp(6rem,13vw,10rem) clamp(4rem,8vw,6rem);
  /* starts as the catalog's black and melts into the footer's deeper black */
  background:
    radial-gradient(ellipse 55% 60% at 50% 58%, rgba(201,204,209,.09), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 70%, var(--bg-deep) 100%);
}
.follow h2{
  font-family:var(--display); font-weight:500;
  font-size:clamp(2.4rem,6vw,4.4rem);
  max-width:18ch; margin:1rem auto 2.4rem; line-height:1.02;
}
.follow h2 em{ color:var(--accent); }
.follow .btn-row{ justify-content:center; }

/* ---------- page hero (inner pages) ---------- */
.page-hero{
  padding-block:clamp(3.5rem,8vw,5.5rem) clamp(2rem,5vw,3rem);
  text-align:center;
  background:radial-gradient(ellipse 60% 90% at 50% 0%, rgba(201,204,209,.09), transparent 70%);
}
.page-hero h1{
  margin-top:1.2rem;
  font-family:var(--sans); font-weight:300; text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(2.2rem,5.6vw,4.2rem); line-height:1;
}
.page-hero h1 strong{ font-weight:700; }
.page-hero p.sub{ margin:1.1rem auto 0; max-width:46ch; font-family:var(--display); font-style:italic; font-size:clamp(1.2rem,2vw,1.5rem); color:var(--ink-2); }

/* ---------- catalog toolbar ---------- */
.toolbar{
  position:sticky; top:var(--header-h); z-index:50;
  background:rgba(10,10,9,.92); backdrop-filter:blur(12px);
  padding-block:.9rem; margin-bottom:clamp(1.5rem,4vw,2.2rem);
  border-block:1px solid var(--line);
}
.toolbar-row{ display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.chips{ display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; padding-block:2px; max-width:100%; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  white-space:nowrap; cursor:pointer;
  border:1px solid var(--line-strong); background:transparent; border-radius:999px;
  padding:.62em 1.15em; font-size:.74rem; font-weight:700; letter-spacing:.06em; color:var(--ink-2);
  transition:all .25s ease;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.chip .n{ opacity:.55; margin-left:.4em; font-weight:600; }
.tools-right{ display:flex; gap:.6rem; align-items:center; }
.field{
  border:1px solid var(--line-strong); background:var(--surface); border-radius:999px;
  padding:.68em 1.15em; font-size:.82rem; font-family:var(--sans); color:var(--ink); min-width:0;
}
.field:focus{ outline:none; border-color:var(--accent); }
select.field option{ background:var(--surface); }
input.field{ width:220px; }
.result-count{ font-size:.78rem; letter-spacing:.06em; color:var(--muted); margin:0 0 1.4rem; }
@media (max-width:620px){ .tools-right{ width:100%; } input.field{ flex:1; width:auto; } }

/* ---------- watch detail modal ---------- */
.modal{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(0rem,3vw,2rem);
  background:rgba(0,0,0,.7); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.modal.open{ opacity:1; pointer-events:auto; }
.modal-panel{
  position:relative;
  background:var(--bg); border:1px solid var(--line);
  width:min(1080px,100%); max-height:100%; overflow:auto;
  border-radius:calc(var(--radius) + 4px);
  display:grid; grid-template-columns:1.05fr 1fr;
  transform:translateY(18px) scale(.985); transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.modal.open .modal-panel{ transform:none; }
.modal-close{
  position:absolute; top:1rem; right:1rem; z-index:2;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong); background:var(--bg); cursor:pointer;
  font-size:1.3rem; line-height:1; color:var(--ink);
}
.modal-close:hover{ background:var(--ink); color:var(--bg); }
.modal-media{ background:var(--bg-deep); padding:clamp(1rem,2.5vw,1.6rem); display:flex; flex-direction:column; gap:.8rem; }
.modal-main{
  aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 80% 70% at 50% 40%, var(--surface-2), var(--surface) 75%);
}
.modal-main img{ width:100%; height:100%; object-fit:cover; }
.modal-main .watch{ width:60%; filter:drop-shadow(0 26px 32px rgba(0,0,0,.6)); }
.thumbs{ display:flex; gap:.6rem; overflow-x:auto; }
.thumbs button{ width:68px; height:68px; flex-shrink:0; border-radius:10px; overflow:hidden; border:1px solid transparent; padding:0; cursor:pointer; background:var(--surface); }
.thumbs button[aria-current="true"]{ border-color:var(--accent); }
.thumbs img{ width:100%; height:100%; object-fit:cover; }
.modal-body{ padding:clamp(1.5rem,4vw,2.8rem); display:flex; flex-direction:column; }
.modal-body .eyebrow{ color:var(--accent); padding-right:3rem; line-height:1.6; }
.modal-body h2{ font-family:var(--display); font-weight:500; font-size:clamp(2.1rem,4vw,3rem); line-height:1.02; margin-top:.7rem; }
.modal-ref{ margin-top:.6rem; color:var(--muted); font-size:.86rem; letter-spacing:.04em; }
.modal-price{ margin-top:1.4rem; font-size:1.2rem; font-weight:700; color:var(--ink); }
.modal-desc{ margin:1rem 0 0; line-height:1.7; font-size:.95rem; }
.modal-body .specs{ margin-top:1.6rem; }
.modal-actions{ margin-top:auto; padding-top:1.8rem; display:grid; gap:.6rem; }
.modal-actions .btn{ width:100%; }
.modal-note{ font-size:.74rem; color:var(--muted); text-align:center; margin:.5rem 0 0; letter-spacing:.04em; }
@media (max-width:780px){
  .modal{ padding:0; align-items:flex-end; }
  .modal-panel{ grid-template-columns:1fr; border-radius:20px 20px 0 0; max-height:94vh; }
}

/* ---------- faq ---------- */
.faq-list{ border-top:1px solid var(--line); max-width:840px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding-block:1.5rem;
  font-family:var(--display); font-weight:500; font-size:1.45rem; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:var(--sans); font-weight:300; font-size:1.5rem; color:var(--accent); transition:transform .3s ease; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin:0 0 1.6rem; max-width:62ch; color:var(--ink-2); font-size:.95rem; line-height:1.75; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.contact-tile{
  display:flex; flex-direction:column; gap:.5rem; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.6rem,3.4vw,2.2rem);
  transition:border-color .3s ease, transform .3s ease;
}
.contact-tile:hover{ border-color:var(--accent); transform:translateY(-4px); }
.contact-tile svg{ width:26px; height:26px; color:var(--accent); margin-bottom:1rem; }
.contact-tile .k{ font-size:.64rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.contact-tile .v{ font-family:var(--display); font-size:1.6rem; color:var(--ink); word-break:break-word; }
.contact-tile .go{ margin-top:auto; padding-top:1rem; font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); }
.todo{ color:var(--accent); font-style:italic; }

/* ---------- legal pages ---------- */
.legal{ padding-block:clamp(3.5rem,8vw,5.5rem) clamp(5rem,9vw,7rem); }
.legal-head{ max-width:70ch; margin-bottom:clamp(2.5rem,6vw,3.5rem); }
.legal-head h1{ font-family:var(--display); font-weight:500; font-size:clamp(2.6rem,5vw,3.6rem); }
.legal-head p{ margin-top:.9rem; color:var(--muted); font-size:.82rem; }
.legal-body{ max-width:70ch; }
.legal-body h2{ font-family:var(--display); font-weight:600; font-size:1.55rem; margin-top:2.6rem; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ margin:.9rem 0 0; color:var(--ink-2); font-size:.95rem; line-height:1.8; }
.legal-body ul{ margin:.9rem 0 0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.legal-body li{ color:var(--ink-2); font-size:.95rem; line-height:1.7; }
.legal-body a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:.2em; }
.legal-body a:hover{ text-decoration-color:var(--accent); }
.legal-note{
  margin-top:2.6rem; padding:1.2rem 1.4rem; border:1px solid var(--line); border-radius:var(--radius);
  font-size:.82rem; line-height:1.6; color:var(--muted); background:var(--surface);
}

/* ---------- footer ---------- */
footer{ background:var(--bg-deep); padding-block:clamp(1rem,3vw,2rem) 2rem; overflow:hidden; }
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr;
  gap:clamp(2rem,5vw,3.5rem);
  padding-block:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.footer-brand img{ height:44px; width:auto; margin-bottom:1.2rem; }
.footer-brand p{ font-size:.9rem; line-height:1.7; color:var(--ink-2); max-width:34ch; margin:0; }
.footer-social{ display:flex; gap:.5rem; margin-top:1.6rem; }
.social-btn{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); color:var(--ink-2); transition:all .25s ease;
}
.social-btn svg{ width:18px; height:18px; }
.social-btn:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); transform:translateY(-2px); }
.footer-col h4{ font-size:.64rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:0 0 1.2rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.8rem; }
.footer-col a, .footer-link{
  background:none; border:0; padding:0; cursor:pointer; font:inherit; text-align:left;
  text-decoration:none; font-size:.9rem; color:var(--ink-2); transition:color .2s ease, padding .25s ease;
}
.footer-col a:hover, .footer-link:hover{ color:var(--ink); padding-left:.3rem; }
.footer-col ul a .n{ color:var(--muted); font-size:.74rem; margin-left:.35rem; }
.footer-steps li{ display:flex; gap:.8rem; align-items:baseline; font-size:.9rem; color:var(--ink-2); }
.footer-steps span{ font-family:var(--display); font-style:italic; font-size:1.1rem; color:var(--accent); min-width:1.4rem; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:1rem 2rem; flex-wrap:wrap;
  padding-top:1.6rem;
  font-size:.74rem; color:var(--muted);
}
.footer-legal{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer-bottom a{ text-decoration:none; color:var(--muted); transition:color .2s ease; }
.footer-bottom a:hover{ color:var(--ink); }
.to-top{ display:inline-flex; gap:.5rem; align-items:center; font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.66rem; }
.to-top span{ transition:transform .3s ease; }
.to-top:hover span{ transform:translateY(-3px); }
@media (max-width:960px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1/-1; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem 1.2rem; } .footer-col:last-child{ grid-column:1/-1; } .footer-bottom{ flex-direction:column; align-items:flex-start; } }
/* ---------- nav: Place order button ---------- */
.nav-order{ padding:.8em 1.5em; font-size:.66rem; letter-spacing:.18em; margin-left:.4rem; white-space:nowrap; }
@media (max-width:520px){ .nav-order{ padding:.7em .95em; font-size:.58rem; letter-spacing:.1em; margin-left:0; } .nav-side .icon-btn .lbl{ display:none; } }

/* ---------- search suggestions ---------- */
.search-results li[role="option"]{
  display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:1rem;
  padding:.65rem .8rem; border-radius:12px; cursor:pointer;
  border:1px solid transparent; transition:background .15s ease, border-color .15s ease;
}
.search-results li[role="option"][aria-selected="true"]{ background:var(--surface-2); border-color:var(--line); }
.search-head{ padding:.9rem .8rem .4rem; font-size:.62rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); list-style:none; }
.sugg-thumb{ width:52px; height:52px; border-radius:10px; overflow:hidden; background:var(--surface); display:flex; align-items:center; justify-content:center; }
.sugg-thumb img{ width:100%; height:100%; object-fit:cover; }
.sugg-thumb .watch{ width:78%; }
.sugg-text{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.sugg-text b{ font-family:var(--display); font-weight:500; font-size:1.25rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sugg-text b mark{ background:none; color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:.18em; }
.sugg-text small{ font-size:.76rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sugg-status{ font-size:.6rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.sugg-status.sold{ color:var(--muted); }
.search-results{ max-height:min(60vh,460px); overflow-y:auto; }
@media (max-width:520px){ .sugg-status{ display:none; } .search-results li[role="option"]{ grid-template-columns:44px 1fr; } .sugg-thumb{ width:44px; height:44px; } .search-hint{ display:none; } }

/* ---------- one-page catalog: sidebar + grid ---------- */
.catalog-layout{ display:grid; grid-template-columns:230px 1fr; gap:clamp(1.8rem,4vw,3.2rem); align-items:start; }
.cat-side{
  position:sticky; top:calc(var(--header-h) + 24px);
  display:flex; flex-direction:column; gap:1.8rem;
}
.cat-group h4{ margin:0 0 .7rem; font-size:.62rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.cat-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.15rem; }
.cat-btn{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:none; border:0; border-radius:10px; cursor:pointer; text-align:left;
  padding:.62rem .8rem; color:var(--ink-2); font-size:.86rem; font-weight:500;
  transition:background .2s ease, color .2s ease;
}
.cat-btn .n{ font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.cat-btn:hover{ background:var(--surface); color:var(--ink); }
.cat-btn[aria-pressed="true"]{ background:var(--surface-2); color:var(--ink); box-shadow:inset 2px 0 0 var(--accent); }
.cat-sort .field{ width:100%; }
.cat-search{
  display:flex; align-items:center; gap:.7rem; width:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; cursor:pointer;
  padding:.8rem .9rem; color:var(--ink-2); font-size:.82rem;
  transition:border-color .2s ease, color .2s ease;
}
.cat-search:hover{ border-color:var(--line-strong); color:var(--ink); }
.cat-search svg{ width:17px; height:17px; }
.cat-search kbd{ margin-left:auto; font-family:var(--sans); font-size:.7rem; border:1px solid var(--line-strong); border-radius:5px; padding:.05rem .4rem; color:var(--muted); }
.cat-main .result-count{ margin:0 0 1.2rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.cat-main .result-count b{ color:var(--ink); font-weight:700; }
.cat-main .watch-grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1100px){ .cat-main .watch-grid{ grid-template-columns:repeat(2,1fr); } }
/* mobile-only pieces are hidden on desktop */
.cat-mobilebar, .sheet-head, .sheet-apply{ display:none; }
/* phones/tablets: sticky Search + "Filter & sort" bar; the sidebar becomes a bottom sheet */
@media (max-width:860px){
  .catalog-layout{ grid-template-columns:1fr; gap:1rem; }
  .cat-mobilebar{
    display:flex; gap:.5rem;
    position:sticky; top:var(--header-h); z-index:40;
    margin:0 calc(clamp(1rem,4vw,3rem) * -1) .4rem; padding:.7rem clamp(1rem,4vw,3rem);
    background:rgba(10,10,9,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-block:1px solid var(--line);
  }
  .mb-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:.55rem;
    height:46px; border-radius:999px; cursor:pointer;
    background:var(--surface); border:1px solid var(--line-strong); color:var(--ink);
    font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  }
  .mb-btn svg{ width:17px; height:17px; }
  .mb-filter{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
  .mb-badge{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--bg); color:var(--ink); font-size:.66rem; letter-spacing:0; display:inline-flex; align-items:center; justify-content:center; }
  .mb-badge[hidden]{ display:none; }

  .cat-side{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:280;
    max-height:min(82vh,640px); overflow-y:auto; overscroll-behavior:contain;
    flex-direction:column; gap:1.5rem;
    padding:.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    background:var(--bg-deep); border-top:1px solid var(--line-strong);
    border-radius:22px 22px 0 0;
    box-shadow:0 -24px 60px rgba(0,0,0,.6);
    transform:translateY(105%); visibility:hidden;
    transition:transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .45s;
  }
  body.sheet-open .cat-side{ transform:none; visibility:visible; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
  body.sheet-open .drawer-scrim{ opacity:1; pointer-events:auto; z-index:270; }
  .sheet-head{
    display:grid; grid-template-columns:44px 1fr 44px; align-items:center;
    position:sticky; top:-.5rem; z-index:1; margin:0 -1.25rem; padding:.9rem 1.25rem .4rem;
    background:var(--bg-deep);
  }
  .sheet-grip{ position:absolute; top:.45rem; left:50%; transform:translateX(-50%); width:40px; height:4px; border-radius:2px; background:var(--line-strong); }
  .sheet-head h3{ grid-column:2; text-align:center; font-size:.78rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
  .sheet-head .icon-btn{ grid-column:3; }
  .cat-group h4{ margin-bottom:.6rem; }
  .cat-list{ flex-direction:row; flex-wrap:wrap; gap:.45rem; }
  .cat-btn{ width:auto; border:1px solid var(--line-strong); border-radius:999px; padding:.6rem 1rem; font-size:.84rem; gap:.6rem; }
  .cat-btn[aria-pressed="true"]{ background:var(--ink); color:var(--bg); box-shadow:none; border-color:var(--ink); }
  .cat-btn[aria-pressed="true"] .n{ color:var(--bg); opacity:.6; }
  .cat-sort .field{ height:46px; }
  .cat-search{ display:none; }
  .sheet-apply{ display:flex; width:100%; height:52px; margin-top:.2rem; }
}@media (max-width:540px){ .cat-main .watch-grid{ grid-template-columns:1fr 1fr; gap:1.2rem .8rem; } .cat-main .watch-model{ font-size:1.2rem; } .cat-main .watch-meta{ flex-direction:column; gap:.2rem; } }
html{ scroll-padding-top:calc(var(--header-h) + 8px); }
@media (max-width:540px){ .cat-main .badge{ top:.55rem; left:.55rem; font-size:.5rem; padding:.4em .65em; letter-spacing:.12em; } .cat-main .badge.sample{ left:auto; right:.55rem; } }

/* catalog fades straight into the closing section (no hard edge) */
.section.catalog{ padding-bottom:clamp(2rem,4vw,3rem); }

@media (max-width:540px){ .cat-main .watch-model{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.3em; } }