/* ============================================================
   TEIMOOR JAAFAR — Rare Timepieces, Dubai
   Light editorial + Tiffany Blue accent (tiffany.ae colour book).
   White-dominant, near-black type, Tiffany Blue used sparingly.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* SANDS-style — pure white ground, grey product panels, near-black ink, tan accent */
  --ink:      #FFFFFF;   /* white base + text-on-dark elements */
  --ink-2:    #F7F6F4;   /* alt section (soft greige) */
  --ink-3:    #F1F0EE;   /* input wells */
  --ink-card: #F1F0EE;   /* product panels: light warm grey (SANDS card grey) */

  /* type */
  --bone:     #16171A;   /* cool near-black primary text + dark UI */
  --bone-2:   #43454A;   /* secondary text */
  --muted:    #696B70;   /* muted labels (AA: 4.9:1 on --ink-2, 4.7:1 on --ink-3) */
  --muted-2:  #A5A7AB;   /* faint text */

  /* neutral greys (rules, separators) */
  --tiffany:      #8A8C90;  /* grey (rules, dividers) */
  --tiffany-deep: #4A4C50;  /* dark grey labels */
  --tiffany-soft: #D8D9DB;  /* light grey (on the dark sections) */
  --tiffany-pale: #F1F0EE;  /* faint grey tint (menu, selection) */

  /* Tiffany is the house colour: it carries every accent, emphasis word and
     interactive state. Still only hairlines, dots, single words and hovers,
     never a large fill, so it reads as a signature rather than a wash. */
  --accent:      #0ABAB5;
  --accent-deep: #0A7E7A;  /* text-safe on white */
  --tiff:        #0ABAB5;  /* aliases, for rules that name it explicitly */
  --tiff-deep:   #0A7E7A;

  /* champagne stays as the scarce warm metal: prices, badges, seals */
  --tan:      #B39A62;
  --tan-deep: #8F7A48;

  /* platinum: the working metal. Generic interaction states, underlines,
     focus and selection all wear platinum so Tiffany stays a brand mark. */
  --plat:      #E5E4E2;
  --plat-deep: #6E747C;
  --tiffany-box: #F1F0EE;  /* former colour blocks now quiet panel grey */
  --ink-blue:    #16171A;  /* type on those panels */
  --gold:        #B39A62;  /* champagne, kept for prices and seals */

  --line:      rgba(20, 21, 24, 0.14);
  --line-soft: rgba(20, 21, 24, 0.07);

  --serif: "Hanken Grotesk", "Hanken Grotesk Fallback", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --brand: "Cinzel", "Times New Roman", Georgia, serif; /* the boutique's own wordmark face */
  --sans:  "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw: 1320px;
  --gutter: clamp(24px, 5vw, 88px);

  /* vertical rhythm: one scale for the whole site, generous at every width.
     The mobile minimums are deliberately high, a premium page should breathe
     on a phone too. */
  --space-xs: clamp(26px, 4vw, 44px);
  --space-sm: clamp(44px, 6vw, 76px);
  --space-md: clamp(72px, 9vw, 124px);   /* standard section */
  --space-lg: clamp(96px, 12vw, 176px);  /* feature moments */
  --space-xl: clamp(120px, 15vw, 224px); /* statement sections */

  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:   0.6s;

  --z-canvas: 0;
  --z-content: 2;
  --z-nav: 40;
  --z-menu: 60;
  --z-cursor: 90;
  --z-loader: 100;
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.js.lenis, html.js.lenis body { height: auto; }

body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--bone);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
::selection { background: var(--tiffany-pale); color: var(--bone); }

/* Hide native cursor only when custom cursor active (desktop) */
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor [data-cursor] { cursor: none; }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  background: var(--bone); color: var(--ink);
  padding: 10px 16px; border-radius: 4px;
  transform: translateY(-200%); transition: transform .3s var(--ease);
  font-size: 13px; letter-spacing: .04em;
}
.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: 2px solid var(--plat-deep); outline-offset: 3px; border-radius: 2px; }

/* ---------- 3. TYPOGRAPHY UTILITIES ---------- */
.eyebrow, .hero__eyebrow {
  font-size: clamp(11px, 1vw, 12.5px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow { color: var(--accent-deep); }
/* a short champagne rule precedes every section eyebrow */
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--gold); flex: 0 0 auto;
}
.hero__eyebrow .dot, .eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 5px rgba(10,168,159,.10);
}

h1, h2, h3, blockquote { font-family: var(--serif); font-weight: 600; line-height: 1.06; letter-spacing: -0.015em; color: var(--bone); }

/* split-line masking (padding gives descenders room inside the clip) */
.line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.line__inner { display: block; will-change: transform; }
/* the splitter's .word spans are inline-block (so they can be transformed);
   without vertical-align:top their baseline participates in line-box sizing,
   and Firefox (different font-metric tables) grows every split headline line
   by ~26px vs Chrome/Safari. Top-aligning pins the line box to one
   line-height in every engine. All words share one font, so nothing moves. */
.is-split .word { vertical-align: top; }

/* one rationed emphasis clause per statement — tan, no italic (SANDS voice) */
.word--em { font-style: normal; color: var(--accent-deep); }
.dubai .word--em { color: var(--accent); }

/* buttons */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 30px;
  font-family: var(--sans);
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
  border-radius: 100px;
  overflow: hidden;
  transition: color .5s var(--ease), border-color .5s var(--ease);
  isolation: isolate;
}
.btn span { position: relative; z-index: 2; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  transform: scaleX(0); transform-origin: left; border-radius: inherit;
  transition: transform .6s var(--ease);
}
.btn:hover::before { transform: scaleX(1); }

/* primary: black pill, fills tan on hover (SANDS CTA) */
.btn--gold { background: var(--bone); color: var(--ink); }
.btn--gold::before { background: var(--plat); }
.btn--gold:hover { color: var(--bone); }

/* secondary: hairline outline, fills black on hover */
.btn--ghost { border: 1px solid rgba(18,30,28,.24); color: var(--bone); }
.btn--ghost::before { background: var(--bone); transform-origin: left; }
.btn--ghost:hover { color: var(--ink); border-color: var(--bone); }

/* generic section rhythm */
section { position: relative; z-index: var(--z-content); }
.eyebrow { margin-bottom: clamp(24px, 3vw, 40px); }

/* ---------- 4. LOADER (white screen, Tiffany accents) ---------- */
.loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  background: #fff;
  display: grid; place-items: center;
}
.loader__inner { width: min(86vw, 640px); text-align: center; }
.loader__mark {
  font-family: var(--brand);
  font-size: clamp(34px, 8.5vw, 92px);
  line-height: 0.96; letter-spacing: 0.02em; color: var(--bone);
}
.loader__word { display: block; overflow: hidden; }
.loader__word i { display: inline-block; font-style: normal; transform: translateY(110%); }
.loader__word--two { color: var(--accent-deep); font-style: normal; }
.loader__word--two i { font-style: normal; }

.loader__meta {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: clamp(28px, 4vw, 48px); margin-bottom: 16px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-2);
}
.loader__count { font-variant-numeric: tabular-nums; color: var(--bone); }
.loader__count em { font-style: normal; color: var(--muted); margin-left: 1px; }
.loader__rail { height: 1px; width: 100%; background: var(--line); overflow: hidden; }
.loader__rail-fill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); transform: scaleX(0); transform-origin: left; }

/* ---------- 5. CUSTOM CURSOR ---------- */
.cursor { position: fixed; inset: 0; z-index: var(--z-cursor); pointer-events: none; display: none; }
html.has-cursor .cursor { display: block; }
.cursor__dot, .cursor__ring {
  position: fixed; top: 0; left: 0; border-radius: 50%;
  transform: translate3d(-50%, -50%, 0); will-change: transform;
}
.cursor__dot { width: 6px; height: 6px; background: var(--bone); }
.cursor__ring {
  width: 46px; height: 46px; border: 1px solid rgba(21,25,28,.4);
  display: grid; place-items: center;
  transition: width .4s var(--ease), height .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease);
}
.cursor__label {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  opacity: 0; transition: opacity .3s var(--ease); font-weight: 600;
}
.cursor.is-hover .cursor__ring { width: 74px; height: 74px; background: rgba(21,25,28,.05); border-color: rgba(21,25,28,.32); }
.cursor.is-label .cursor__ring { width: 84px; height: 84px; background: var(--bone); border-color: var(--bone); }
.cursor.is-label .cursor__label { opacity: 1; }
.cursor.is-hover .cursor__dot, .cursor.is-label .cursor__dot { opacity: 0; }
.cursor.is-hidden .cursor__dot, .cursor.is-hidden .cursor__ring { opacity: 0; }

/* ---------- 6. NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: var(--z-nav);
  transition: background-color .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(16px, 2vw, 26px) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  position: relative; /* anchors the centred wordmark */
}
/* the wordmark IS the mark now: no monogram, absolutely centred so it
   stays optically dead-centre regardless of how wide the side groups are */
.nav__brand {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center;
  white-space: nowrap;
}
.nav__wordmark { font-family: var(--brand); font-size: clamp(15px, 1.5vw, 20px); letter-spacing: 0.24em; text-transform: uppercase; color: var(--bone); font-weight: 400; transition: color .4s var(--ease); }
.nav__brand:hover .nav__wordmark { color: var(--tiffany-deep); }

/* SANDS pattern: the hamburger carries navigation at every width */
.nav__links { display: none; }
.nav__links a {
  position: relative; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone-2); font-weight: 500; padding: 4px 0; transition: color .4s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--plat-deep); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.nav__links a:hover { color: var(--bone); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__cta { margin-left: auto; padding: 11px 24px; border: 1px solid var(--line); border-radius: 100px; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone); transition: border-color .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease); }
.nav__cta:hover { border-color: var(--plat-deep); color: var(--bone); }

.nav__burger { display: block; width: 44px; height: 44px; position: relative; }
.nav__burger span { position: absolute; left: 11px; width: 22px; height: 1.5px; background: var(--bone); transition: transform .4s var(--ease), opacity .3s var(--ease); }
.nav__burger span:nth-child(1) { top: 18px; } .nav__burger span:nth-child(2) { top: 25px; }

/* mobile menu overlay */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--ink-card);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--gutter);
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  transition: clip-path .8s var(--ease);
}
.menu.is-open { clip-path: inset(0 0 0% 0); pointer-events: auto; }
.menu__close {
  position: absolute; top: clamp(14px, 2.4vw, 26px); right: var(--gutter);
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--bone);
  display: grid; place-items: center;
  transition: transform .4s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.menu__close::before, .menu__close::after {
  content: ""; position: absolute; width: 20px; height: 1.5px; background: currentColor;
}
.menu__close::before { transform: rotate(45deg); }
.menu__close::after { transform: rotate(-45deg); }
.menu__close:hover { transform: rotate(90deg); border-color: var(--tiffany); background: #fff; }
.menu__links { display: flex; flex-direction: column; gap: 4px; }
.menu__links a {
  font-family: var(--serif); font-size: clamp(38px, 12vw, 72px); color: var(--bone);
  line-height: 1.1; opacity: 0; transform: translateY(30px); transition: color .3s var(--ease);
}
.menu.is-open .menu__links a { opacity: 1; transform: translateY(0); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.menu.is-open .menu__links a:nth-child(1) { transition-delay: .12s; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: .2s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: .28s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: .36s; }
.menu__links a:active { color: var(--tiffany-deep); }
.menu__foot { margin-top: 48px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.menu__foot a { color: var(--tiffany-deep); }

/* ---------- 7. HERO (watch-store split) ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: clamp(104px, 14vh, 156px) 0 clamp(48px, 7vh, 80px); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 100% at 78% 44%, #FBF9F4, transparent 60%),
    var(--ink);
}

/* top meta bar — quiet trust, no badges */
.hero__meta {
  position: relative; z-index: var(--z-content);
  max-width: var(--maxw); width: 100%; margin: 0 auto clamp(28px, 5vh, 64px);
  padding: 0 var(--gutter); display: flex; align-items: center; gap: 16px;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
}
.hero__meta-line { height: 1px; width: clamp(28px, 6vw, 90px); background: var(--accent); flex: 0 0 auto; transform-origin: left; }
.hero__meta-r { margin-left: auto; color: var(--muted-2); }

.hero__grid {
  position: relative; z-index: var(--z-content);
  max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(24px, 5vw, 80px); align-items: center;
}
.hero__copy { max-width: 620px; }
.hero__title { font-size: clamp(42px, 6vw, 92px); line-height: 1.0; letter-spacing: -0.03em; }
.hero__title .line__inner { padding-bottom: 0.06em; }
.hero__sub { margin-top: clamp(22px, 2.6vw, 34px); max-width: 42ch; color: var(--bone-2); font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.7; }
.hero__actions { margin-top: clamp(30px, 3.4vw, 44px); display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
.hero__link { position: relative; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone); padding: 4px 0; }
.hero__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.hero__link:hover::after { transform: scaleX(1); transform-origin: left; }

.hero__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; }
.hero__ghost {
  position: absolute; z-index: 0; top: 46%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--serif); font-weight: 600; font-size: clamp(90px, 17vw, 260px);
  color: var(--bone); opacity: 0.05; letter-spacing: -0.03em; white-space: nowrap; pointer-events: none; user-select: none;
}
.hero__watch { position: relative; z-index: 2; height: min(66vh, 600px); aspect-ratio: 600 / 920; will-change: transform; animation: heroFloat 6.5s ease-in-out infinite; }
.hero__watch-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 40px 44px rgba(26,20,10,.30)); opacity: 0; transition: opacity 1.1s var(--ease); }
.hero__watch-img.is-active { opacity: 1; }
@keyframes heroFloat { 0%, 100% { transform: translateY(-9px); } 50% { transform: translateY(9px); } }
.hero__dots { position: absolute; z-index: 4; right: clamp(-6px, 0.4vw, 6px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0; }
/* the visible dot lives on ::before so the button itself can offer a
   24x24 touch target (WCAG 2.5.8) without changing the design */
.hero__dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.hero__dot::before { content: ""; position: absolute; top: 50%; left: 50%; margin: -4.5px 0 0 -4.5px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--muted-2); background: transparent; transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease); }
.hero__dot:hover::before { border-color: var(--plat); }
.hero__dot.is-active::before { background: var(--plat); border-color: var(--plat); transform: scale(1.25); }
.hero__shadow { position: absolute; z-index: 1; bottom: 4%; left: 50%; transform: translateX(-50%); width: 46%; height: 26px; border-radius: 50%; background: radial-gradient(ellipse, rgba(26,20,10,.28), transparent 70%); filter: blur(7px); animation: heroShadow 6.5s ease-in-out infinite; }
@keyframes heroShadow { 0%, 100% { transform: translateX(-50%) scale(0.92); opacity: .7; } 50% { transform: translateX(-50%) scale(1.06); opacity: .95; } }
.hero__featured {
  position: absolute; z-index: 3; left: 50%; bottom: -6px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 3px; min-width: 250px;
  background: rgba(251,249,244,.82); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  border: 1px solid var(--line); border-radius: 4px; padding: 13px 18px;
  box-shadow: 0 22px 50px -26px rgba(26,20,10,.4);
}
.hero__featured-k { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.hero__featured-model { font-family: var(--serif); font-size: 16px; color: var(--bone); }
.hero__featured-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 3px; }
.hero__featured-ref { font-size: 12px; letter-spacing: 0.03em; color: var(--muted); font-variant-numeric: tabular-nums; }
.hero__featured-cta { position: relative; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.hero__featured-cta::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.hero__featured-cta:hover::after { transform: scaleX(1); transform-origin: left; }

.hero__cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: var(--z-content);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted);
}
.hero__cue-line { width: 1px; height: 44px; background: linear-gradient(to bottom, transparent, var(--accent)); position: relative; overflow: hidden; }
.hero__cue-line::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--accent); animation: cueflow 2.6s var(--ease) infinite; }
@keyframes cueflow { 0% { transform: translateY(-100%); } 65%, 100% { transform: translateY(320%); } }

/* brand quick-nav strip */
.brands { background: var(--ink-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.brands__inner { max-width: var(--maxw); margin: 0 auto; padding: var(--space-sm) var(--gutter); display: flex; align-items: center; gap: clamp(14px, 2.5vw, 36px); flex-wrap: wrap; }
.brands__label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); flex: 0 0 auto; }
.brands__row { display: flex; gap: 12px; flex-wrap: wrap; }
.brand-chip { font-size: 13px; letter-spacing: 0.01em; color: var(--bone-2); border: 1px solid var(--line); border-radius: 100px; padding: 8px 18px; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.brand-chip:hover { background: var(--bone); color: #fff; border-color: var(--bone); }

/* ---------- 8. MARQUEE ---------- */
.marquee { padding: clamp(26px, 3vw, 40px) 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); overflow: hidden; background: var(--ink-2); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; gap: clamp(28px, 4vw, 60px); padding-right: clamp(28px, 4vw, 60px); }
.marquee__group span { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 3vw, 38px); color: var(--bone); white-space: nowrap; }
.marquee__group i { color: var(--tiffany); font-style: normal; font-size: 12px; }

/* ---------- 9. APPROACH ---------- */
.approach { max-width: var(--maxw); margin: 0 auto; padding: var(--space-xl) var(--gutter) var(--space-lg); }
.approach__head { max-width: 1000px; }
.approach__statement { font-size: clamp(28px, 4.4vw, 64px); line-height: 1.12; color: var(--bone); letter-spacing: -0.015em; }
.approach__statement em, .approach__statement i { font-style: italic; color: var(--tiffany-deep); }
.approach__body { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(44px, 6vw, 100px); margin-top: var(--space-md); align-items: start; }
.approach__media { position: relative; }
.approach__media-inner { overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 5; }
.approach__media img { width: 100%; height: 120%; object-fit: cover; filter: grayscale(.12) contrast(1.02); }
.approach__cap { margin-top: 14px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

.journey { list-style: none; padding: 0; }
.journey__step { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 2.4vw, 36px); padding: clamp(26px, 3vw, 40px) 0; border-top: 1px solid var(--line); }
.journey__step:last-child { border-bottom: 1px solid var(--line); }
.journey__no { font-family: var(--serif); font-size: 14px; color: var(--tiffany-deep); padding-top: 6px; font-variant-numeric: tabular-nums; }
.journey__step h3 { font-size: clamp(20px, 2.2vw, 28px); color: var(--bone); margin-bottom: 8px; font-weight: 500; }
.journey__step p { color: var(--muted); font-size: 15px; max-width: 52ch; }

/* ---------- 10. COLLECTION ---------- */
.collection { padding: var(--space-xl) 0 var(--space-lg); background: var(--ink-2); border-top: 1px solid var(--line-soft); }
.collection__intro { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(48px, 6vw, 84px); }
.collection__title { font-size: clamp(34px, 6vw, 88px); color: var(--bone); margin: 6px 0 18px; }
.collection__note { color: var(--muted); max-width: 44ch; font-size: 15px; }

/* shoppable product grid */
.shop {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(26px, 3vw, 52px) clamp(14px, 2vw, 32px);
}
/* SANDS card anatomy: grey square panel, heart, meta below on white */
.piece { display: flex; flex-direction: column; position: relative; }
.piece__media { display: block; overflow: hidden; position: relative; aspect-ratio: 1 / 1; border-radius: 6px; background: var(--ink-card); border: 0; box-shadow: none; }
.piece__media img { width: 100%; height: 100%; object-fit: contain; padding: clamp(14px, 2.4vw, 34px); mix-blend-mode: multiply; transition: transform .9s var(--ease); }
.piece:hover .piece__media img { transform: scale(1.04); }
.piece__badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--plat); color: var(--bone-2);
  padding: 5px 10px; border-radius: 3px;
}
.piece__meta { padding: 13px 2px 0; display: flex; flex-direction: column; flex: 1; }
.piece__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.piece__maison { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.piece__model { font-size: clamp(14.5px, 1.2vw, 16.5px); color: var(--bone); margin: 6px 0 3px; font-weight: 500; line-height: 1.35; }
.piece__ref { font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted); display: block; }
.piece__buy { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.piece__price { font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--bone); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.piece__cta {
  flex: 0 0 auto; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone);
  border: 1px solid var(--line); padding: 8px 16px; border-radius: 100px;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.piece__cta:hover { background: var(--bone); color: #fff; border-color: var(--bone); }

.shop__more { max-width: var(--maxw); margin: clamp(40px, 5vw, 68px) auto 0; padding: 0 var(--gutter); display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 18px; }
@media (min-width: 700px) { .shop { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .shop { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 12. DUBAI (dark cinematic photo interlude) ---------- */
.dubai { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; background: #08090C; }
.dubai__media { position: absolute; inset: 0; z-index: 0; }
.dubai__media img { width: 100%; height: 116%; object-fit: cover; }
.dubai__media-grade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8,9,12,.88) 4%, rgba(8,9,12,.28) 52%, rgba(8,9,12,.34) 100%),
    radial-gradient(80% 55% at 25% 90%, rgba(8,9,12,.5), transparent);
}
.dubai__content { position: relative; z-index: var(--z-content); max-width: var(--maxw); width: 100%; margin: 0 auto; padding: clamp(60px, 9vw, 130px) var(--gutter); }
.dubai .eyebrow { color: var(--tiffany-soft); }
.dubai__title { font-size: clamp(34px, 6vw, 84px); color: #fff; max-width: 16ch; }
.dubai__body { margin-top: 28px; max-width: 50ch; color: rgba(255,255,255,.82); font-size: clamp(15px,1.3vw,18px); line-height: 1.7; }
.dubai__address { margin-top: 20px; font-family: var(--serif); font-style: italic; font-size: clamp(18px,1.8vw,24px); color: var(--tiffany-soft); }

/* ---------- 13. REVIEW (white, customer testimonial) ---------- */
.quote { background: #fff; padding: var(--space-lg) var(--gutter); text-align: center; }
.quote__stars { color: var(--gold); font-size: 17px; letter-spacing: 0.32em; margin-bottom: 26px; }
.quote__text { font-size: clamp(24px, 3.8vw, 48px); line-height: 1.22; color: var(--bone); font-style: italic; letter-spacing: -0.01em; max-width: 820px; margin: 0 auto; }
.quote__by { margin-top: 30px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: inline-block; }
.quote__by::after { content: ""; display: block; margin: 14px auto 0; width: 46px; height: 1px; background: var(--muted-2); opacity: .8; }

/* ---------- 14. ENQUIRE ---------- */
.enquire { background: var(--ink-2); border-top: 1px solid var(--line-soft); padding: var(--space-lg) 0 var(--space-sm); }
.enquire__grid { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(52px, 7vw, 120px); align-items: start; }
.enquire__title { font-size: clamp(34px, 5.2vw, 76px); color: var(--bone); margin: 6px 0 24px; }
.enquire__sub { color: var(--bone-2); max-width: 42ch; font-size: clamp(15px,1.2vw,17px); line-height: 1.7; }
.enquire__contacts { list-style: none; padding: 0; margin-top: clamp(40px, 5vw, 64px); }
.enquire__contacts li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); align-items: baseline; }
.enquire__k { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.enquire__contacts a { color: var(--tiffany-deep); border-bottom: 1px solid transparent; transition: border-color .4s var(--ease); }
.enquire__contacts a:hover { border-color: var(--tiffany); }

/* form */
.form { padding-top: 8px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.2vw, 32px); }
.field { display: block; margin-bottom: clamp(20px, 2.4vw, 30px); }
.field span { display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.field input, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 10px 0; color: var(--bone); font-size: 16px; resize: none;
  transition: border-color .4s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--plat-deep); }
.form__submit { margin-top: 12px; width: 100%; }
.form__status { margin-top: 18px; font-size: 13px; color: var(--tiffany-deep); letter-spacing: .04em; min-height: 1.2em; }

/* ---------- 15. FOOTER ---------- */
.footer { position: relative; background: var(--ink-2); padding: var(--space-md) var(--gutter) clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); overflow: hidden; }
.footer__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(34px, 4.4vw, 60px) clamp(30px, 4vw, 64px);
  padding: clamp(38px, 5vw, 64px) 0 clamp(30px, 4vw, 52px);
}

/* the footer used to be a sticky "curtain reveal" (main slides up to uncover
   it), but that trick only shows footer content up to one viewport-height
   tall: it pins the footer's BOTTOM edge to the viewport bottom, so once the
   footer (now several sections deep) grows taller than the screen, its top
   rows become permanently unreachable, clipped off above the viewport on
   every ordinary laptop screen. Removed for that reason; the footer now sits
   in normal flow so every row is always reachable by scrolling. */
/* 2026 refresh: the brand block is a full-width signature row. The large
   Cinzel wordmark replaces the retired TJ roundel; tagline and Instagram
   chip sit against it on the same baseline band, hairline underneath. */
.footer__brand {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 22px clamp(28px, 4vw, 56px);
  padding-bottom: clamp(26px, 3.4vw, 40px);
  border-bottom: 1px solid var(--line-soft);
}
.footer__logo { display: block; }
.footer__name {
  font-family: var(--brand);
  font-size: clamp(24px, 3.4vw, 44px);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bone); line-height: 1.1;
  transition: color .4s var(--ease);
}
.footer__logo:hover .footer__name { color: var(--tiffany-deep); }
.footer__tagline { color: var(--muted); font-size: 14px; max-width: 34ch; margin: 0; }
.footer__chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 100px;
  background: transparent; border: 1px solid var(--line);
  color: var(--bone); font-size: 13px; letter-spacing: 0.04em;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.footer__chip:hover { background: var(--bone); border-color: var(--bone); color: #fff; }
.footer__copy { color: var(--muted); font-size: 12.5px; letter-spacing: 0.02em; margin-top: auto; padding-top: 8px; }

.footer__col { display: flex; flex-direction: column; }
.footer__col h3 { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.footer__col a { color: var(--muted); font-size: 15px; padding: 9px 0; width: fit-content; transition: color .35s var(--ease); }
.footer__col a:hover { color: var(--tiffany-deep); }

/* the Explore column is the footer's destination moment: oversized serif
   links with an underline that draws in (the line moves, never the glyphs) */
.footer__col[aria-label="Explore"] a,
.footer__col[aria-label="استكشف"] a,
.footer__col[aria-label="Keşfet"] a {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.25; color: var(--bone); padding: 6px 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 94%;
  transition: background-size .5s var(--ease), color .35s var(--ease);
}
.footer__col[aria-label="Explore"] a:hover,
.footer__col[aria-label="استكشف"] a:hover,
.footer__col[aria-label="Keşfet"] a:hover { color: var(--plat-deep); background-size: 100% 1px; }

/* ---- footer CTA band + address of record ---- */
.footer__top {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(30px, 5vw, 90px); align-items: end;
  padding-bottom: clamp(38px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}
.footer__headline {
  font-size: clamp(30px, 4.2vw, 56px); line-height: 1.06;
  letter-spacing: -0.025em; max-width: 15ch;
}
.footer__cta-sub { margin-top: 16px; color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 42ch; }
.footer__cta-actions { margin-top: clamp(22px, 2.6vw, 32px); display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; }
.footer__maplink {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  color: var(--bone); padding-bottom: 5px; border-bottom: 1px solid var(--bone);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer__maplink:hover { color: var(--plat-deep); border-color: var(--plat-deep); }

.footer__address {
  font-style: normal;
  display: grid; grid-template-columns: auto; gap: 4px;
  align-content: end;
}
.footer__addr-k {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted-2); margin-top: 16px;
}
.footer__addr-k:first-child { margin-top: 0; }
.footer__addr-lines { font-size: 15px; line-height: 1.65; color: var(--bone); }
.footer__addr-hours { font-size: 15px; color: var(--bone); }
.footer__addr-tel {
  font-size: 15px; color: var(--bone); width: fit-content;
  border-bottom: 1px solid var(--line);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer__addr-tel:hover { color: var(--plat-deep); border-color: var(--plat-deep); }

/* ---- bottom bar ---- */
.footer__bar {
  flex: 1 1 100%;
  margin-top: clamp(18px, 2.4vw, 28px); padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 28px; flex-wrap: wrap;
}
.footer__policies { display: flex; gap: 24px; }
.footer__policies a {
  font-size: 12.5px; color: var(--muted);
  transition: color .3s var(--ease);
}
.footer__policies a:hover { color: var(--plat-deep); }
.footer__top-link {
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer__top-link:hover { color: var(--plat-deep); border-color: var(--plat-deep); }

/* build credit */
.footer__made {
  margin-top: clamp(14px, 1.8vw, 20px);
  font-size: 11.5px; letter-spacing: 0.02em; color: var(--muted);
}
.footer__made a {
  color: var(--muted); border-bottom: 1px solid var(--line);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer__made a:hover { color: var(--plat-deep); border-color: var(--plat-deep); }

@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr; gap: 30px; align-items: start; }
  .footer__bar { justify-content: flex-start; }
  /* the oversized Explore links are a desktop moment; keep the mobile footer compact */
  .footer__col[aria-label="Explore"] a,
  .footer__col[aria-label="استكشف"] a,
  .footer__col[aria-label="Keşfet"] a { font-family: var(--sans); font-size: 15px; padding: 9px 0; }
  .footer__col h3 { margin-bottom: 14px; }
  .footer__col a { padding: 7px 0; }
}

.status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  flex: 0 0 auto; display: inline-block;
  animation: statusPulse 3s var(--ease) infinite;
}
@keyframes statusPulse { 50% { box-shadow: 0 0 0 5px rgba(10, 186, 181, 0.14); } }

/* non-affiliation disclaimer + back to top */
.footer__legal {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(22px,2.6vw,34px) 0 0; border-top: 1px solid var(--line-soft);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap;
}
.footer__legal p { color: var(--muted); font-size: 11.5px; line-height: 1.65; max-width: 92ch; letter-spacing: 0.01em; }

/* ============================================================
   15b. TIFFANY LUXURY UPGRADE — colour blocks, motifs, craft
   ============================================================ */

/* ---- sparkle motif (retired in the SANDS retheme) ---- */
.sparkle { display: none; position: absolute; width: 16px; height: 16px; pointer-events: none; color: var(--tiffany); opacity: 0; z-index: var(--z-content); }
.sparkle svg { width: 100%; height: 100%; display: block; fill: currentColor; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.35) rotate(0deg); } 45%, 55% { opacity: .85; transform: scale(1) rotate(45deg); } }
.sparkle.is-on { animation: twinkle 5s var(--ease) infinite; }

/* ---- PRIMARY feature band (after the manifesto) — white, framed, Tiffany accents ---- */
.feature { position: relative; background: #fff; color: var(--bone); overflow: hidden; padding: var(--space-xl) 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.feature__inner { position: relative; z-index: var(--z-content); max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.feature__statement { font-size: clamp(32px, 5.4vw, 82px); line-height: 1.06; max-width: 17ch; color: var(--bone); letter-spacing: -0.025em; }
.feature__pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(34px, 4vw, 64px); margin-top: var(--space-md); border-top: 1px solid var(--line); padding-top: clamp(40px, 4.5vw, 60px); }
.feature__pillar h3 { font-family: var(--sans); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone); margin-bottom: 12px; font-weight: 600; }
.feature__pillar p { color: var(--muted); font-size: 15px; max-width: 30ch; line-height: 1.6; }

/* ---- PROVENANCE / ATELIER editorial split ---- */
.provenance { max-width: var(--maxw); margin: 0 auto; padding: var(--space-xl) var(--gutter); display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(44px, 7vw, 120px); align-items: center; }
.provenance__media { position: relative; }
.provenance__frame { overflow: hidden; aspect-ratio: 5 / 7; border-radius: 2px; }
.provenance__frame img { width: 100%; height: 114%; object-fit: cover; filter: grayscale(.12) contrast(1.02); }
.provenance__media::after { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(255,255,255,.5); pointer-events: none; }
.provenance__cap { margin-top: 14px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.provenance__body h2 { font-size: clamp(28px, 4.2vw, 60px); color: var(--bone); margin-bottom: 24px; line-height: 1.08; }
.provenance__body p { color: var(--muted); font-size: clamp(15px,1.2vw,17px); line-height: 1.75; max-width: 46ch; }
.provenance__body p + p { margin-top: 18px; }

/* ---- collection: hover frame retired in the SANDS retheme ---- */
.piece__tag { display: inline-block; margin-top: 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tiffany-deep); }

.piece--cta .piece__panel {
  width: 100%; aspect-ratio: 4 / 5; border-radius: 2px;
  background: #14171A; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(26px, 2vw, 40px);
}
.piece--cta .piece__panel h3 { font-size: clamp(26px, 2.2vw, 38px); color: #fff; line-height: 1.06; max-width: 12ch; }
.piece--cta .piece__panel .piece__go span { width: 34px; height: 1px; background: rgba(255,255,255,.7); transition: width .4s var(--ease); }
.piece--cta:hover .piece__panel .piece__go span { width: 54px; }

.collection__act { position: relative; }
.collection__num { position: absolute; top: 50%; right: 4%; transform: translateY(-50%); font-family: var(--serif); font-weight: 600; font-size: clamp(140px, 24vw, 360px); line-height: 1; color: rgba(10,186,181,.06); pointer-events: none; z-index: 0; font-variant-numeric: tabular-nums; }

/* ---- slim tiffany CTA band (before enquire) ---- */
.ctaband { background: var(--tiffany-box); color: var(--ink-blue); }
.ctaband__inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(46px, 6vw, 80px) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.ctaband__text { font-family: var(--serif); font-size: clamp(24px, 3.4vw, 46px); color: var(--ink-blue); max-width: 20ch; line-height: 1.1; }
.btn--onblue { background: var(--ink-blue); color: #fff; }
.btn--onblue::before { background: #fff; }
.btn--onblue:hover { color: var(--ink-blue); }

/* ---- nav top scroll-progress hairline ---- */
.nav__progress { position: absolute; top: 0; left: 0; height: 2px; width: 100%; background: var(--plat-deep); transform: scaleX(0); transform-origin: left; }
/* progressive enhancement: compositor-driven where supported (JS updater
   stands down, see initNav) */
@supports (animation-timeline: scroll()) {
  .nav__progress { animation: navProgress linear both; animation-timeline: scroll(root); }
  @keyframes navProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---- film grain atmosphere (static, CSS-only) ---- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 96; pointer-events: none;
  background: url("../assets/img/teimoor-jaafar-grain-texture.png") repeat;
  background-size: 220px;
  opacity: 0.05; mix-blend-mode: multiply;
}
@media (max-width: 768px) {
  body::after { mix-blend-mode: normal; opacity: 0.035; }
}

/* ---- dubai: coordinate label (ken-burns scale added via JS) ---- */
.dubai__coord { margin-top: 26px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tiffany-soft); }

/* ============================================================
   15b1. SANDS HOME — cover hero, category tiles, product shelves
   ============================================================ */

/* full-bleed lifestyle cover hero */
.hero--cover { display: block; padding: 0; min-height: 92svh; }
.hero--cover::before { content: none; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,9,12,.58) 0%, rgba(8,9,12,.16) 46%, rgba(8,9,12,.32) 100%);
}
.hero__center {
  position: relative; z-index: 2; min-height: 92svh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center; padding: 0 var(--gutter) clamp(56px, 9vh, 112px);
}
.hero__kicker { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 18px; }
.hero--cover .hero__title { color: #fff; font-size: clamp(38px, 5.6vw, 84px); max-width: 18ch; }
.hero--cover .hero__title .word--em { color: var(--accent); }
.hero--cover .hero__sub { color: rgba(255,255,255,.85); margin: 16px auto 28px; max-width: 52ch; font-size: clamp(14.5px, 1.15vw, 17px); line-height: 1.7; }
.hero__shopnow {
  display: inline-block; color: #fff;
  font-size: 12.5px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500;
  padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.9);
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.hero__shopnow:hover { color: var(--plat); border-color: var(--plat); }

/* split hero: copy left, shoppable watch showcase right */
.hero--split { display: block; min-height: auto; overflow: visible; padding: clamp(116px, 15vh, 172px) 0 clamp(20px, 3vw, 40px); }
.hero--split::before { content: none; }
.hero__grid2 {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(28px, 5vw, 84px); align-items: center;
}
.hero--split .hero__kicker { color: var(--muted); margin-bottom: 16px; }
.hero--split .hero__title { font-size: clamp(38px, 5vw, 76px); max-width: 13ch; }
.hero--split .hero__sub { margin: 18px 0 30px; max-width: 44ch; color: var(--bone-2); font-size: clamp(14.5px, 1.15vw, 17px); line-height: 1.7; }
.hero--split .hero__actions { display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; }
.hero__shopnow--dark {
  color: var(--bone); border-bottom-color: var(--bone);
}
.hero__shopnow--dark:hover { color: var(--plat-deep); border-color: var(--plat-deep); }

.hero__showcase { position: relative; min-width: 0; }
.hero__panel {
  position: relative; width: 100%; height: clamp(340px, 58vh, 560px);
  border-radius: 8px; background: var(--ink-card); overflow: hidden;
}
.hero--split .hero__watch-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: clamp(26px, 4.5vw, 60px);
  mix-blend-mode: normal;
  filter: drop-shadow(0 30px 34px rgba(45, 38, 24, 0.28));
}

/* vitrine treatment: warm lit backdrop, grain, glass hairline, floating stage */
.hero__panel--vitrine {
  background:
    radial-gradient(120% 90% at 50% 6%, #FBFAF8 0%, #F1EFEA 44%, #E6E2D9 100%);
}
.hero__panel--vitrine::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url(../assets/img/teimoor-jaafar-grain-texture.png) repeat; background-size: 280px;
  opacity: 0.05; mix-blend-mode: multiply; pointer-events: none;
}
.hero__panel--vitrine::after {
  content: ""; position: absolute; inset: 12px; z-index: 2;
  border: 1px solid rgba(20, 21, 24, 0.08); border-radius: 5px;
  pointer-events: none;
}
.hero__stage {
  position: absolute; inset: 0; z-index: 1;
  animation: vitrineFloat 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes vitrineFloat {
  0%, 100% { transform: translateY(-7px); }
  50%      { transform: translateY(7px); }
}
.hero__plinth {
  position: absolute; z-index: 0; left: 50%; bottom: 9%;
  transform: translateX(-50%);
  width: 52%; height: 22px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(45, 38, 24, 0.30), transparent 68%);
  filter: blur(7px);
  animation: plinthBreathe 7s ease-in-out infinite;
}
@keyframes plinthBreathe {
  0%, 100% { transform: translateX(-50%) scale(0.94); opacity: 0.72; }
  50%      { transform: translateX(-50%) scale(1.05); opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__stage, .hero__plinth { animation: none; }
}
.hero__dots--h {
  position: absolute; left: 50%; bottom: 16px; top: auto; right: auto;
  transform: translateX(-50%);
  display: flex; flex-direction: row; gap: 2px; z-index: 3;
}
.hero__caption {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 14px 4px 0;
}
.hero__cap-maison { display: block; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.hero__cap-link {
  font-size: clamp(15px, 1.3vw, 17.5px); font-weight: 500; color: var(--bone);
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), color .3s var(--ease);
}
.hero__cap-link:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
.hero__cap-price { font-size: 13.5px; font-weight: 500; color: var(--bone); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

@media (max-width: 860px) {
  .hero--split { padding-top: clamp(104px, 14vh, 132px); }
  .hero__grid2 { grid-template-columns: 1fr; gap: 30px; }
  .hero__panel { height: clamp(300px, 44vh, 420px); }
}

/* ---- FULL-SCREEN CINEMATIC HERO (SANDS editorial photo + glass card) ---- */
.hero--full { display: block; min-height: 100svh; padding: 0; overflow: hidden; }
.hero--full::before { content: none; }
.hero--full .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero--full .hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 46%;
  transform-origin: 42% 62%; /* anchor the drift on the watches, not the ceiling */
  will-change: transform;
}
/* the mobile source is a portrait crop already framed on the watch, so it wants
   a neutral position and a drift anchored low, where the dial sits */
@media (max-width: 860px) {
  .hero--full .hero__bg img { object-position: center center; transform-origin: 50% 64%; }
}

/* pronounced Ken Burns: a long, slow push that never quite settles */
html.js .hero--full .hero__bg img { animation: heroKenBurns 28s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate both; }
@keyframes heroKenBurns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.22) translate3d(-2.5%, -2%, 0); }
}
/* on a phone the frame is narrow, so a 22% push would re-crop the watch back
   out of shot. Keep the drift, shrink its travel. */
@media (max-width: 860px) {
  @keyframes heroKenBurnsMobile {
    from { transform: scale(1.01) translate3d(0, 0, 0); }
    to   { transform: scale(1.09) translate3d(-1%, -1.5%, 0); }
  }
  html.js .hero--full .hero__bg img { animation-name: heroKenBurnsMobile; }
}

/* grade tuned for a dark, low-key photograph: hold the corners, keep the
   middle open so the watches stay visible under the type */
.hero__grade {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(8, 9, 11, 0.80) 0%, rgba(8, 9, 11, 0.34) 30%, rgba(8, 9, 11, 0.06) 55%, rgba(8, 9, 11, 0.30) 100%),
    radial-gradient(120% 90% at 22% 82%, rgba(8, 9, 11, 0.52), transparent 62%);
}
.hero__frame {
  position: relative; z-index: 2; min-height: 100svh;
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(96px, 12vh, 148px) var(--gutter) clamp(60px, 9vh, 100px);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(24px, 4vw, 72px);
}
.hero--full .hero__kicker { color: rgba(255,255,255,0.85); margin-bottom: 16px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; }
.hero--full .hero__title { color: #fff; font-size: clamp(40px, 5.6vw, 88px); max-width: 13ch; }
.hero--full .hero__title .word--em { color: var(--accent); }
.hero--full .hero__sub { color: rgba(255,255,255,0.85); margin: 16px 0 30px; max-width: 44ch; font-size: clamp(14.5px, 1.15vw, 17px); line-height: 1.7; }
.hero--full .hero__actions { display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; }

/* white pill for dark photography */
.btn--white { background: #fff; color: var(--bone); }
.btn--white::before { background: var(--plat); }
.btn--white:hover { color: #16171A; }

/* nav inverts to white while resting on the full-screen photo */
html:has(.hero--full) .nav:not(.is-scrolled) .nav__wordmark { color: #fff; }
html:has(.hero--full) .nav:not(.is-scrolled) .nav__cta { color: #fff; border-color: rgba(255,255,255,0.55); }
html:has(.hero--full) .nav:not(.is-scrolled) .nav__cta:hover { color: var(--plat); border-color: var(--plat); }
html:has(.hero--full) .nav:not(.is-scrolled) .nav__burger span { background: #fff; }

/* frosted featured-piece card */
.hero__card {
  flex: 0 0 auto; width: clamp(280px, 27vw, 392px);
  position: relative; /* containing block for the stretched card link */
  border-radius: 14px; padding: 22px 22px 20px;
  background: rgba(16, 17, 20, 0.36);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 34px 80px -32px rgba(0, 0, 0, 0.55);
}
.hero__card-stage { position: relative; height: clamp(220px, 28vh, 320px); }
/* soft spotlight behind the piece: dark cases (carbon, black ceramic) read as
   a void against the frosted-dark card without it, especially at small sizes */
.hero__card-stage::before {
  content: ""; position: absolute; inset: 6%; z-index: 0; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.07) 46%, transparent 74%);
}
/* the hero card holds still: no float, no breathing shadow */
.hero__card .hero__stage { position: absolute; inset: 0; z-index: 1; animation: none; will-change: auto; }
.hero__card .hero__plinth { animation: none; }
.hero__card .hero__watch-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 14px 14px 20px;
  /* bottom-anchored: every cut-out stands on the same baseline above the
     plinth instead of centre-floating by its own aspect ratio */
  object-position: 50% 100%;
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.45));
}
.hero__card .hero__plinth {
  bottom: 1%; width: 56%; height: 14px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 68%);
}
.hero__card-meta { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.hero__card .hero__cap-maison { display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.hero__card .hero__cap-link {
  display: block; margin: 5px 0 4px;
  font-size: 17.5px; font-weight: 500; color: #fff; border-bottom: 0;
  /* two lines are always reserved, so long and short model names produce
     the exact same card height while the type size never changes */
  line-height: 1.3; min-height: 2.6em;
  transition: color .3s var(--ease);
}
.hero__card .hero__cap-link:hover { color: var(--plat); }
/* stretched link: the whole card is the click target for the current piece */
.hero__card .hero__cap-link::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 14px;
}
.hero__card .hero__cap-link:focus-visible { outline: none; }
.hero__card .hero__cap-link:focus-visible::after {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.hero__card .hero__cap-price { display: block; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums; }
.hero__card .hero__dots--h { position: relative; z-index: 3; left: auto; bottom: auto; transform: none; margin-top: 12px; justify-content: flex-start; } /* dots stay clickable above the stretched link */
.hero__card .hero__dot::before { border-color: rgba(255, 255, 255, 0.45); }
.hero__card .hero__dot:hover::before { border-color: var(--plat); }
.hero__card .hero__dot.is-active::before { background: var(--plat); border-color: var(--plat); }

/* scroll cue */
.hero__cueline {
  position: absolute; z-index: 2; bottom: 0; left: 50%;
  width: 1px; height: clamp(44px, 7vh, 72px);
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.85));
}

@media (max-width: 860px) {
  .hero__frame { flex-direction: column; align-items: stretch; justify-content: flex-end; padding-bottom: clamp(40px, 6vh, 64px); }
  /* the piece gets a real showcase moment on mobile, not a thumbnail: a tall
     stage up top, caption below, same card the desktop rotator uses */
  .hero__card { width: 100%; padding: 20px 20px 18px; }
  .hero__card-stage { width: 100%; height: clamp(200px, 46vw, 300px); }
  .hero__cueline { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .hero--full .hero__bg img { animation: none; transform: scale(1.04); }
  .hero__card .hero__stage { animation: none; }
}

/* category tiles (dark-overlay labels) */
.cats {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-md) var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 26px);
}
.cat { position: relative; display: block; overflow: hidden; border-radius: 6px; aspect-ratio: 4 / 3; }
.cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.cat:hover img { transform: scale(1.05); }
.cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,9,12,.6), rgba(8,9,12,.08) 55%); }
/* (legacy single-label rule removed: tiles now use .cat__no / .cat__meta) */
@media (max-width: 700px) { .cats { grid-template-columns: 1fr; } .cat { aspect-ratio: 16 / 9; } }

/* product shelves */
.shelf { padding: var(--space-lg) 0 0; }
.shelf:last-of-type { padding-bottom: var(--space-lg); }
.shelf__grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 3vw, 46px) clamp(20px, 2.4vw, 34px);
}
@media (max-width: 900px) { .shelf__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .shelf__grid { grid-template-columns: 1fr; } }

/* ============================================================
   15b2. SANDS SIGNATURES — chat pill, shelf headers, pill toggles
   ============================================================ */

/* floating personal-shopper pill (injected by main.js on every page) */
.chatpill {
  position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 26px); z-index: 80;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bone); color: #fff;
  border-radius: 100px; padding: 13px 20px;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
  box-shadow: 0 14px 34px -14px rgba(20,21,24,.45);
  transition: transform .45s var(--ease), background-color .35s var(--ease), opacity .35s var(--ease);
}
.chatpill:hover { transform: translateY(-2px); background: #2A2B2E; }
.chatpill.is-tucked { opacity: 0; transform: translateY(14px) scale(0.96); pointer-events: none; }
.chatpill svg { width: 17px; height: 17px; flex: 0 0 auto; }
@media (max-width: 700px) {
  .chatpill { padding: 14px; }
  .chatpill span { display: none; }
}

/* shelf header: bold left title + underlined "See more" right */
.shelf__head {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  margin-bottom: clamp(26px, 3.2vw, 44px);
}
.shelf__title { font-size: clamp(20px, 2.4vw, 30px); font-weight: 600; letter-spacing: 0.01em; color: var(--bone); }
.shelf__title--caps { text-transform: uppercase; letter-spacing: 0.06em; }
.shelf__more {
  font-size: 12.5px; color: var(--bone); font-weight: 500;
  border-bottom: 1px solid var(--bone); padding-bottom: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.shelf__more:hover { color: var(--plat-deep); border-color: var(--plat-deep); }

/* pill toggle group (SANDS "Women / Men" style) */
.pills { display: inline-flex; background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: 100px; padding: 4px; gap: 2px; }
.pill {
  border-radius: 100px; padding: 8px 18px;
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.pill:hover { color: var(--bone); }
.pill.is-active { background: var(--bone); color: #fff; }

/* ============================================================
   15c. MULTI-PAGE SHARED — transition wipe, subpage hero, crumbs
   ============================================================ */

/* full-screen ivory wipe used between internal pages (positioned by GSAP) */
.wipe {
  position: fixed; inset: 0; z-index: 120;
  background: var(--ink);
  display: grid; place-items: center;
  pointer-events: none;
  border-top: 1px solid var(--line-soft);
}
.wipe__mark {
  font-family: var(--brand); font-size: clamp(18px, 2.2vw, 26px); letter-spacing: 0.18em;
  letter-spacing: 0.02em; color: var(--bone); opacity: 0;
}

/* ============================================================
   PAGE HERO — copy beside a lineup of real pieces (per page)
   ============================================================ */
.phero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #FBFAF8 0%, var(--ink-2) 68%, var(--ink) 100%);
  border-bottom: 1px solid var(--line-soft);
}
.phero__inner {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(136px, 17vh, 200px) var(--gutter) var(--space-lg);
  display: grid; grid-template-columns: 1fr 1.28fr;
  gap: clamp(24px, 3.4vw, 56px); align-items: center;
}
.phero__title { font-size: clamp(34px, 4.2vw, 66px); letter-spacing: -0.03em; line-height: 1.04; max-width: 15ch; }
.phero__sub {
  margin-top: clamp(16px, 2vw, 24px); color: var(--bone-2);
  max-width: 46ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.72;
}
.phero__actions { margin-top: clamp(24px, 3vw, 34px); display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap; }
.phero__note { margin-top: clamp(20px, 2.4vw, 28px); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* the lineup: several pieces on one lit stage */
.lineup { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(2px, 0.6vw, 10px); min-height: clamp(230px, 34vh, 360px); }
.lineup__piece { position: relative; display: block; flex: 0 0 auto; }
.lineup__piece img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(45, 38, 24, 0.26));
}
.lineup__piece::after {
  content: ""; position: absolute; left: 50%; bottom: -6%;
  transform: translateX(-50%); width: 62%; height: 14px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(45, 38, 24, 0.26), transparent 70%);
  filter: blur(6px);
}
html.js .lineup__piece { animation: vitrineFloat 7.5s ease-in-out infinite; will-change: transform; }
.lineup__piece:nth-child(1) { width: 17%; animation-delay: -0.2s; }
.lineup__piece:nth-child(2) { width: 21%; animation-delay: -1.5s; }
.lineup__piece:nth-child(3) { width: 25%; animation-delay: -3.0s; }
.lineup__piece:nth-child(4) { width: 21%; animation-delay: -4.4s; }
.lineup__piece:nth-child(5) { width: 17%; animation-delay: -5.8s; }
/* the centre piece stands tallest, the flanks step down: a shop-window arc */
.lineup__piece:nth-child(1), .lineup__piece:nth-child(5) { margin-bottom: clamp(10px, 3vh, 34px); }
.lineup__piece:nth-child(2), .lineup__piece:nth-child(4) { margin-bottom: clamp(4px, 1.4vh, 16px); }

/* three-piece variant: a valuation tray rather than a shop window */
.lineup--three { gap: clamp(8px, 1.6vw, 26px); }
.lineup--three .lineup__piece:nth-child(1) { width: 27%; margin-bottom: clamp(6px, 2vh, 22px); }
.lineup--three .lineup__piece:nth-child(2) { width: 32%; margin-bottom: 0; }
.lineup--three .lineup__piece:nth-child(3) { width: 27%; margin-bottom: clamp(6px, 2vh, 22px); }

/* about: editorial triptych instead of products */
.triptych { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: repeat(2, 1fr); gap: clamp(8px, 1.2vw, 16px); height: clamp(300px, 42vh, 440px); }
.triptych__pane { margin: 0; overflow: hidden; border-radius: 6px; background: var(--ink-card); }
.triptych__pane img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.triptych__pane--tall { grid-row: 1 / span 2; }
.triptych:hover .triptych__pane img { transform: scale(1.03); }
@media (max-width: 860px) { .triptych { height: clamp(220px, 34vh, 300px); } }

/* soft light pooling behind the stage */
.phero__glow {
  position: absolute; z-index: 0; right: -6%; top: 46%; transform: translateY(-50%);
  width: min(62%, 760px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 66%);
  pointer-events: none;
}

@media (max-width: 860px) {
  .phero__inner { grid-template-columns: 1fr; gap: 30px; padding-top: clamp(106px, 14vh, 132px); }
  .lineup { min-height: 0; gap: 6px; }
  .lineup__piece:nth-child(1), .lineup__piece:nth-child(5) { display: none; }
  .lineup__piece:nth-child(2), .lineup__piece:nth-child(4) { width: 29%; }
  .lineup__piece:nth-child(3) { width: 34%; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .lineup__piece { animation: none; }
}

/* subpage hero: quiet editorial opener under the fixed nav */
.page-hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(136px, 17vh, 208px) var(--gutter) clamp(40px, 6vw, 76px);
}
.page-hero__title { font-size: clamp(40px, 6.4vw, 96px); letter-spacing: -0.03em; line-height: 1.0; }
.page-hero__sub {
  margin-top: clamp(16px, 2vw, 24px); color: var(--bone-2); max-width: 52ch;
  font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.7;
}

/* breadcrumbs */
.crumbs {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: clamp(20px, 3vw, 34px);
}
.crumbs a { color: var(--muted); transition: color .3s var(--ease); }
.crumbs a:hover { color: var(--plat-deep); }
.crumbs i { font-style: normal; color: var(--muted-2); }
.crumbs [aria-current] { color: var(--bone); }

/* ============================================================
   16. JS-DRIVEN INITIAL ANIMATION STATES (only when .js)
   ============================================================ */
html.js [data-split] { opacity: 0; }
html.js [data-split].is-split { opacity: 1; }
html.js .fade { opacity: 0; transform: translateY(26px); }
html.js [data-step] { opacity: 0; transform: translateY(40px); }
html.js .piece { opacity: 0; transform: translateY(50px); }
html.js .approach__media-inner,
html.js .provenance__frame { clip-path: inset(0% 0% 103% 0%); }

/* ============================================================
   17. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .approach__body { grid-template-columns: 1fr; }
  .approach__media { max-width: 460px; }
  .enquire__grid { grid-template-columns: 1fr; }
  .provenance { grid-template-columns: 1fr; gap: clamp(36px,6vw,60px); }
  .provenance__media { max-width: 460px; }
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .hero { min-height: auto; padding: clamp(112px, 22vw, 140px) 0 52px; }
  .hero__grid { grid-template-columns: 1fr; gap: clamp(30px, 9vw, 56px); }
  .hero__copy { max-width: 640px; }
  .hero__visual { order: 2; min-height: 300px; }
  .hero__watch { height: 46vh; }
  .hero__dots { display: none; }
  .hero__cue { display: none; }
}

@media (max-width: 768px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav__wordmark { font-size: 10.5px; letter-spacing: 0.16em; }

  .hero__meta { flex-wrap: wrap; gap: 8px 14px; margin-bottom: clamp(24px, 8vw, 40px); }
  .hero__meta-r { margin-left: 0; flex-basis: 100%; }
  .hero__title { font-size: clamp(34px, 9.5vw, 54px); }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero__actions .btn { width: 100%; }

  .form__row { grid-template-columns: 1fr; }
  .enquire__contacts li { grid-template-columns: 1fr; gap: 4px; }
  .dubai { min-height: 80vh; }
  .feature__pillars { grid-template-columns: 1fr; gap: 26px; }
  .ctaband__inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .collection__num { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
}

@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   18. REDUCED MOTION / NO-JS — show everything, kill motion
   ============================================================ */
html.no-js [data-split],
html.no-js .fade,
html.no-js [data-step],
html.no-js .piece { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-split],
  html.js [data-split].is-split,
  html.js .fade,
  html.js [data-step],
  html.js .piece { opacity: 1 !important; transform: none !important; }
  html.js .approach__media-inner,
  html.js .provenance__frame { clip-path: none !important; }
  .hero__cue-line::after { animation: none; }
  .hero__watch img, .hero__shadow { animation: none !important; }
  .loader__word i { transform: none !important; }
  .sparkle.is-on { animation: none; opacity: .5; }
  .status-dot { animation: none; }
  .nav__progress { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   19. TIFFANY ACCENT — rationed, one small touch per section
   ============================================================ */

/* section eyebrows: the short rule reads Tiffany, the label stays quiet */
.eyebrow::before { background: var(--tiff); }

/* home feature pillars: a small Tiffany tick before each promise */
.feature__pillar h3 { position: relative; padding-left: 16px; }
.feature__pillar h3::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--tiff);
}

/* product page: the assurance list gets Tiffany bullets */
.pdp__assure li::marker { color: var(--tiff); }
.pdp__assure li { color: var(--bone-2); }

/* certificate seal on the spec sheet */
.cert__seal { border-color: var(--tiff) !important; color: var(--tiff-deep) !important; }

/* shop: numbered assurances */
.assure__no { color: var(--tiff-deep); }

/* footer: the boutique labels and the "open" state */
.footer__addr-k { color: var(--tiff-deep); }
.footer__addr-closed { color: var(--muted); }

/* text selection across the site */
::selection { background: rgba(110, 116, 124, 0.16); color: var(--bone); }

/* keyboard focus ring */
:focus-visible { outline-color: var(--plat-deep); }

/* ============================================================
   20. HERO LEGIBILITY — hold the type off the photograph
   ============================================================ */
.hero--full .hero__copy { position: relative; }
/* a soft pool of shade sized to the copy, so the words never fight the image */
.hero--full .hero__copy::before {
  content: ""; position: absolute; z-index: -1;
  left: -6%; right: -14%; top: -10%; bottom: -14%;
  background: radial-gradient(80% 100% at 26% 60%, rgba(8, 9, 11, 0.62) 0%, rgba(8, 9, 11, 0.34) 46%, transparent 76%);
  pointer-events: none;
}
.hero--full .hero__kicker {
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px; letter-spacing: 0.2em; font-weight: 500;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.hero--full .hero__title { text-shadow: 0 2px 26px rgba(0, 0, 0, 0.42); }
.hero--full .hero__sub {
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(15.5px, 1.25vw, 18.5px); line-height: 1.65;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
  max-width: 40ch;
}
.hero--full .hero__shopnow { color: #fff; border-bottom-color: rgba(255,255,255,0.9); text-shadow: 0 1px 12px rgba(0,0,0,0.5); }

/* ============================================================
   21. TIFFANY DETAILING — quiet brand signatures
   ============================================================ */

/* (tile underline now lives on .cat__name via background-size) */

/* the featured card wears a fine Tiffany edge, like a boutique ribbon */
.hero__card { border-top: 1px solid rgba(10, 186, 181, 0.55); }

/* product cards: the model name underlines in Tiffany on hover */
.piece__model a { position: relative; }
.piece__model a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: var(--plat-deep); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .5s var(--ease);
}
.piece:hover .piece__model a::after,
.piece__model a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* brand chips: a Tiffany outline rather than a heavy black fill */
.brand-chip:hover {
  background: var(--plat);
  color: var(--bone);
  border-color: var(--plat-deep);
}

/* shop filter chips: Tiffany on hover, black when chosen */
.chip:hover { border-color: var(--plat-deep); color: var(--bone); }

/* enquire form: the field you are typing in glows Tiffany */
.field input:focus, .field textarea:focus, .field select:focus {
  border-bottom-color: var(--plat-deep);
  box-shadow: 0 1px 0 0 var(--plat-deep);
}

/* section eyebrows: a Tiffany dot closes the rule */
.eyebrow::before { background: linear-gradient(90deg, var(--tiff), rgba(10,186,181,0.25)); }

/* lineup pieces: lift toward the hand on hover (image only, text never moves) */
.lineup__piece img { transition: transform .55s var(--ease), filter .55s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .lineup__piece:hover img {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 30px 32px rgba(45, 38, 24, 0.32));
  }
}

/* ============================================================
   22. HOME SECTION REDESIGNS — cats, maison index, shelves
   ============================================================ */

/* --- category tiles: numbered plates with kicker / name / sub --- */
.cat { aspect-ratio: 16 / 11; }
.cat::after { background: linear-gradient(to top, rgba(8,9,12,.72), rgba(8,9,12,.12) 58%, rgba(8,9,12,.18)); }
.cat__no {
  position: absolute; top: 14px; left: 16px; z-index: 2;
  font-size: 11px; letter-spacing: 0.18em; color: rgba(255,255,255,0.66);
  font-variant-numeric: tabular-nums;
}
.cat__meta { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: block; }
.cat__kicker {
  display: block; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.62); margin-bottom: 6px;
}
.cat__name {
  display: inline-block; font-family: var(--serif); font-weight: 600;
  font-size: clamp(20px, 2vw, 26px); color: #fff; line-height: 1.1;
  padding-bottom: 4px;
  background-image: linear-gradient(var(--plat), var(--plat));
  background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%;
  transition: background-size .55s var(--ease);
}
.cat:hover .cat__name { background-size: 100% 1px; }
.cat__sub { display: block; margin-top: 5px; font-size: 12px; color: rgba(255,255,255,0.75); }

/* --- maison index: five houses, counts, hairline plates --- */
.maisons { background: var(--ink-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.maisons__inner { max-width: var(--maxw); margin: 0 auto; padding: var(--space-md) var(--gutter); }
.maisons__inner .eyebrow { margin-bottom: clamp(20px, 2.6vw, 30px); }
.maisons__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(18px, 2.4vw, 36px); }
@media (max-width: 1080px) { .maisons__grid { grid-template-columns: repeat(3, 1fr); } }
.maison { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); transition: border-color .35s var(--ease); }
.maison:hover { border-top-color: var(--bone); }
.maison__name { font-family: var(--serif); font-weight: 600; font-size: clamp(15px, 1.3vw, 18px); color: var(--bone); line-height: 1.2; }
.maison__count { font-size: 11.5px; letter-spacing: 0.06em; color: var(--plat-deep); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .maisons__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

/* --- shelves: subtitles + feature card + flags --- */
.shelf__sub { margin-top: 8px; font-size: 13.5px; color: var(--muted); }


/* language switcher: three quiet text marks with a drawn hairline, the same
   underline-on-hover / underline-when-active language as .shelf--ruled
   .shelf__more and .piece__model, rather than a boxed app-style pill. The
   underline uses currentColor, so it tracks the light/dark-hero states for
   free with no duplicated colour rules. */
.nav__lang {
  display: inline-flex; align-items: center;
  /* visually first (left in LTR, right in RTL) to balance the CTA and
     burger on the other side of the centred wordmark; DOM order, and so
     tab order, is unchanged */
  order: -1;
  margin-inline-start: 0; margin-inline-end: auto;
}
.nav__lang a {
  position: relative;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.13em;
  color: var(--muted); line-height: 1;
  padding: 9px 10px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 50% 100%; background-size: 0% 1px;
  transition: color .3s var(--ease), background-size .45s var(--ease);
}
.nav__lang a:not(:first-child) { border-inline-start: 1px solid var(--line); }
.nav__lang a:hover { color: var(--bone-2); background-size: 100% 1px; }
.nav__lang a.is-current { color: var(--bone); font-weight: 600; background-size: 100% 1px; }
html:has(.hero--full) .nav:not(.is-scrolled) .nav__lang a { color: rgba(255,255,255,0.62); }
html:has(.hero--full) .nav:not(.is-scrolled) .nav__lang a:not(:first-child) { border-inline-start-color: rgba(255,255,255,0.22); }
html:has(.hero--full) .nav:not(.is-scrolled) .nav__lang a:hover { color: rgba(255,255,255,0.88); }
html:has(.hero--full) .nav:not(.is-scrolled) .nav__lang a.is-current { color: #fff; }
.nav__cta { margin-left: 0; }
@media (max-width: 480px) {
  .nav__lang { margin-inline-end: 10px; }
  .nav__lang a { padding: 9px 8px; font-size: 10px; min-width: 24px; text-align: center; } /* >=24px touch target, incl. the single-glyph "ع" label */
  .nav__wordmark-w { display: none; } /* centred mark shortens to "Teimoor Jaafar" so it clears the side groups */
}
@media (prefers-reduced-motion: reduce) { .nav__lang a { transition: none; } }

/* ============================================================
   NEW ARRIVALS - "THREE BAYS"   (homepage feature shelf)

   SCOPE
   Every selector is scoped to .shelf--ruled or .shelf--arrivals.
   Both modifiers exist nowhere else in the repo, so the 23 files
   that share .piece, .piece__media, .piece__meta, .piece__model,
   .piece__ref, .piece__price and .piece__maison render exactly as
   they do today. No base class is modified.

   .shelf--ruled   = the head system (hairline, title, sub, link).
                     Add this class to the other two homepage
                     shelves to unify the page. Costs no new CSS.
   .shelf--arrivals = the grid and card system. New Arrivals only.

   DELETE FROM css/style.css WHEN THIS LANDS
   (all four are homepage-only, grep-verified against the repo):
     1) the whole @media (min-width: 901px) { .shelf__grid--feature
        ... } block  (currently lines 1418-1430)
     2) .piece__flag   (lines 1402-1407)  the flag is removed
     3) .piece__line   (line 1408)        now unused
     4) .piece__go     (lines 1409-1413)  now unused
        NB .piece--cta .piece__panel .piece__go at lines 700-702 is
        already dead CSS (no .piece--cta markup exists anywhere), so
        deleting .piece__go is safe.

   ALSO DELETE (or add to .vercelignore): _proto-dirC.html and
   _proto-dirC.css. They are stale prototypes that load
   css/style.css and use .shelf__grid--feature and .piece__flag,
   and they are NOT currently ignored, so they deploy.

   Paste this block at the END of css/style.css.
   ============================================================ */


/* ---------- 1. HEAD SYSTEM (.shelf--ruled) ---------- */

.shelf--ruled .shelf__head {
  position: relative;
  align-items: flex-end;
  padding-top: clamp(20px, 2.4vw, 30px);
  margin-bottom: clamp(34px, 4vw, 56px);
  gap: clamp(20px, 4vw, 60px);
}

/* A hairline across exactly the grid measure. It must be a
   pseudo-element, not a border-top: .shelf__head is border-box with
   the gutter as padding, so a border would overshoot into the
   gutters. inset-inline is symmetric, so it needs no RTL mirror. */
.shelf--ruled .shelf__head::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: var(--gutter);
  height: 1px;
  background: var(--line-soft);
}

/* Larger and quieter at the same time: weight drops 600 -> 500 while
   size rises. .shelf__title--caps keeps the uppercase; this rule is
   0,2,0 so its letter-spacing wins over that class's 0,1,0. */
.shelf--ruled .shelf__title {
  font-size: clamp(23px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: 0.075em;
  line-height: 1.05;
}

.shelf--ruled .shelf__sub {
  margin-top: 13px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 34ch;
}

/* The underline is painted, not moved: only background-size animates,
   so the label never shifts.
   border-bottom-color is restated on :hover ON PURPOSE. The base
   .shelf__more:hover (0,1,1) sets border-color: var(--plat-deep) and
   the base transition covers it; without this line the resting
   hairline snaps from var(--line) to #6E747C the instant you hover. */
.shelf--ruled .shelf__more {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
  background-image: linear-gradient(var(--bone), var(--bone));
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0% 1px;
  transition: background-size .55s var(--ease),
              border-color .45s var(--ease),
              color .45s var(--ease);
}
.shelf--ruled .shelf__more:hover,
.shelf--ruled .shelf__more:focus-visible {
  color: var(--bone);
  border-bottom-color: var(--line);
  background-position: 0 100%;
  background-size: 100% 1px;
}


/* ---------- 2. THE ROW: three equal bays ---------- */

/* Five parent rows (media, maison, model, ref, ledger). Each .piece
   spans all five and adopts them with subgrid, so every row sizes to
   the tallest content ACROSS the three cards. That is what puts the
   ref lines and the price baselines on one line no matter how the
   names wrap, with no reserved empty space when nothing wraps.
   row-gap must be 0: the parent's row gap would otherwise be
   inherited into every card as four gaps between the meta rows. */
.shelf--arrivals .shelf__grid--feature {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto auto;
  column-gap: clamp(18px, 2.2vw, 30px);
  row-gap: 0;
  align-items: stretch;
}
.shelf--arrivals .piece {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  row-gap: 0;
}
.shelf--arrivals .piece__meta { display: contents; }


/* ---------- 3. THE BAY: no panel, an object on a shelf ---------- */

/* No fill, no radius, no border box. The only structure is one
   hairline at the foot, which is the shelf the watch stands on and
   the divider above the caption. overflow must be visible so the
   cast shadow can fall past that line. */
.shelf--arrivals .piece__media {
  --bay-pt: clamp(28px, 3.4vw, 48px);
  --bay-px: clamp(14px, 1.8vw, 24px);
  --bay-pb: clamp(2px, 0.5vw, 6px);
  grid-row: span 1;
  aspect-ratio: 4 / 5;
  /* explicit width: the img inside is absolutely positioned (see below),
     so the box has no in-flow content, and WebKit would otherwise
     shrink-to-content a grid item whose width is auto (collapsed to bare
     padding on the mobile one-column layout). */
  width: 100%;
  position: relative;
  background: none;
  border-radius: 0;
  overflow: visible;
  padding: var(--bay-pt) var(--bay-px) var(--bay-pb);
  border-bottom: 1px solid var(--line-soft);
  transition: border-color .5s var(--ease);
}

/* The src is the existing transparent cut-out, so mix-blend-mode is
   cancelled and the watch carries a real two-stop shadow instead.
   The content box is always wider in aspect (0.79 to 0.80) than the
   widest cut-out (0.706), so object-fit: contain always fits by
   HEIGHT: all three watches render at exactly the same pixel height
   at every breakpoint. Measured at 1440: 376px, 376px, 376px.
   Both shadows have zero horizontal offset, so they need no RTL rule.
   transform-origin keeps the object planted on the shelf line as it
   scales. */
/* Absolutely positioned (box re-derived from the --bay-* padding vars)
   so the image cannot contribute intrinsic size to the subgrid track:
   WebKit otherwise sizes the auto row from the img's natural 600x920
   ratio instead of the container's 4/5 aspect-ratio, and every card
   renders ~330px too tall in Safari. Chrome/Firefox are unaffected. */
.shelf--arrivals .piece__media img {
  position: absolute;
  top: var(--bay-pt);
  left: var(--bay-px);
  width: calc(100% - var(--bay-px) * 2);
  height: calc(100% - var(--bay-pt) - var(--bay-pb));
  object-fit: contain;
  object-position: 50% 100%;
  padding: 0;
  mix-blend-mode: normal;
  transform-origin: 50% 100%;
  filter:
    drop-shadow(0 clamp(8px, 1vw, 14px) clamp(12px, 1.6vw, 22px) rgba(20,21,24,0.22))
    drop-shadow(0 1px 2px rgba(20,21,24,0.16));
  transition: transform 1.1s var(--ease);
}
.shelf--arrivals .piece:hover .piece__media { border-bottom-color: var(--line); }
.shelf--arrivals .piece:hover .piece__media img { transform: scale(1.03); }

/* Operational fallback. Only six transparent cut-outs exist in
   assets/img/collection/cut/. If a new arrival is rotated in before
   its cut-out is made, put .piece--photo on that <article> and point
   the src at the .jpg. The card degrades to today's panel treatment
   instead of showing a baked grey rectangle on the white page. */
.shelf--arrivals .piece--photo .piece__media {
  background: var(--ink-card);
  border-bottom-color: transparent;
  padding: clamp(14px, 2.4vw, 34px);
}
.shelf--arrivals .piece--photo .piece__media img {
  object-position: 50% 50%;
  mix-blend-mode: multiply;
  filter: none;
}


/* ---------- 4. THE LEDGER: name promoted, price last ---------- */

.shelf--arrivals .piece__maison {
  margin-top: clamp(15px, 1.6vw, 20px);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--muted);
}

.shelf--arrivals .piece__model {
  margin: 10px 0 0;
  font-size: clamp(15px, 1.35vw, 18.5px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.002em;
}

/* var(--muted) #75777C, not the base var(--muted-2) #A5A7AB. The ref
   line now carries four real facts, and --muted-2 on white measures
   about 2.4:1, which fails WCAG AA outright at 11.5px. --muted is
   4.63:1. overflow-wrap handles the full AP reference. */
.shelf--arrivals .piece__ref {
  margin: 7px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* align-self: stretch keeps the rule spanning the full card width in
   the grid rows AND in the flex fallback below. */
.shelf--arrivals .piece__ledger {
  align-self: stretch;
  margin-top: clamp(14px, 1.5vw, 19px);
  padding-top: clamp(11px, 1.2vw, 15px);
  border-top: 1px solid var(--line-soft);
}
.shelf--arrivals .piece__price {
  font-size: 15px;
  font-weight: 500;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.shelf--arrivals .piece__cur {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-inline-end: 8px;
}

/* The base .piece__model a::after is position:absolute; left:0;
   width:100% on a relatively positioned INLINE anchor, so on a
   wrapped name it resolves 100% against the whole h3 box and paints
   under the last line only. A background gradient with
   box-decoration-break: clone underlines every line fragment
   correctly. Only background-size transitions, so no glyph moves. */
.shelf--arrivals .piece__model a {
  background-image: linear-gradient(var(--plat-deep), var(--plat-deep));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 2px;
  transition: background-size .55s var(--ease);
}
.shelf--arrivals .piece__model a::after { display: none; }
.shelf--arrivals .piece:hover .piece__model a,
.shelf--arrivals .piece__model a:focus-visible { background-size: 100% 1px; }


/* ---------- 5. NO-SUBGRID FALLBACK (desktop only) ---------- */

/* Subgrid is baseline-available, but it is newer than anything else
   this codebase relies on, so the alignment degrades rather than
   breaks: margin-top:auto still flattens the price baseline and
   min-height reserves a second model line. Below 901px there is one
   card per row and nothing to align to, so no fallback is needed. */
@media (min-width: 901px) {
  @supports not (grid-template-rows: subgrid) {
    .shelf--arrivals .shelf__grid--feature {
      grid-template-rows: none;
      row-gap: clamp(30px, 3vw, 44px);
    }
    .shelf--arrivals .piece { display: flex; flex-direction: column; }
    .shelf--arrivals .piece__meta {
      display: flex; flex-direction: column; flex: 1; padding: 0;
    }
    .shelf--arrivals .piece__model { min-height: 2.6em; }
    .shelf--arrivals .piece__ledger { margin-top: auto; }
  }
}


/* ---------- 6. TABLET 561-900: one bay per row ---------- */

/* 900px is the site's existing shelf breakpoint, so New Arrivals and
   the two shelves below it change at the same width. Holding three
   columns down to 561px would give 158px cards with 8.5px labels;
   a horizontal row keeps the object at a boutique size and can never
   orphan. grid-template-areas is not needed: column order mirrors in
   RTL on its own. */
@media (max-width: 900px) {
  .shelf--arrivals .shelf__grid--feature {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: clamp(34px, 5vw, 48px);
  }
  .shelf--arrivals .piece {
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
    column-gap: clamp(22px, 3.6vw, 40px);
    align-items: center;
  }
  .shelf--arrivals .piece__media { aspect-ratio: 4 / 5; }
  .shelf--arrivals .piece__meta {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .shelf--arrivals .piece__maison { margin-top: 0; }
  .shelf--arrivals .piece__ledger { margin-top: clamp(16px, 2.4vw, 24px); }
}


/* ---------- 7. MOBILE <=560: one piece per screen ---------- */

/* align-items must be reset to stretch here: the tablet block's
   `center` would otherwise make the media box shrink-to-fit in a
   single-column context and blow the image out of its frame. */
@media (max-width: 560px) {
  .shelf--ruled .shelf__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .shelf--ruled .shelf__title { font-size: clamp(21px, 6.4vw, 27px); }
  .shelf--ruled .shelf__sub { max-width: 40ch; }

  .shelf--arrivals .shelf__grid--feature { row-gap: clamp(38px, 9vw, 50px); }
  .shelf--arrivals .piece {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    align-items: stretch;
    column-gap: 0;
  }
  .shelf--arrivals .piece__media {
    aspect-ratio: 1 / 1;
    --bay-pt: clamp(14px, 4vw, 22px);
    --bay-px: clamp(14px, 4vw, 22px);
    --bay-pb: clamp(12px, 3.4vw, 18px);
  }
  .shelf--arrivals .piece__maison { margin-top: clamp(15px, 4vw, 20px); }
  .shelf--arrivals .piece__model { font-size: 16px; }
  .shelf--arrivals .piece__ledger { margin-top: clamp(14px, 4vw, 18px); }
}


/* ---------- 8. REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
  .shelf--arrivals .piece__media,
  .shelf--arrivals .piece__media img,
  .shelf--arrivals .piece__model a,
  .shelf--ruled .shelf__more { transition: none !important; }
  .shelf--arrivals .piece:hover .piece__media img { transform: none !important; }
}

/* ============================================================
   NO PRICES, FOR NOW
   Every price display on the site, hidden in one place so it is
   trivial to bring back later: delete this block. Underlying data
   (js/watches.js price field, data-price attributes) is untouched,
   so re-enabling is purely visual. Covers: shop/maison grid cards,
   the New Arrivals ledger, the homepage hero rotator, the PDP price
   block and its "price is an estimate" note (orphaned without a
   price shown), the certificate spec-sheet price row, and the
   mobile sticky enquire bar. The shop's price-based sort control
   was removed outright (markup + JS), not just hidden here, since
   its only other option was "Featured" — a single-option dropdown
   left behind CSS would just be dead UI.
   ============================================================ */
.piece__price,
.piece__ledger,
.hero__cap-price,
.pdp__pricing,
.pdp__estimate,
.buybar__price,
.cert__row--price,
.zoomview__price { display: none !important; }

/* ============================================================
   LEGAL PAGES  (privacy.html / terms.html, all locales)
   ============================================================ */
.legal { padding: 0 var(--gutter) var(--space-lg); }
.legal__inner { max-width: 68ch; margin: 0 auto; }
.legal__inner h1 {
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.legal__updated {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: clamp(32px, 5vw, 52px);
  padding-bottom: clamp(18px, 3vw, 28px);
  border-bottom: 1px solid var(--line);
}
.legal__inner h2 {
  font-size: clamp(17px, 1.6vw, 21px);
  margin: clamp(30px, 4vw, 42px) 0 10px;
}
.legal__inner p { color: var(--bone-2); font-size: 15.5px; line-height: 1.75; }

/* ============================================================
   MOBILE LEGIBILITY  (Lighthouse best-practices: >=12px on phones)
   ============================================================ */
@media (max-width: 560px) {
  .footer__legal p { font-size: 12px; }
  .piece__ref { font-size: 12px; }
  .piece__maison { font-size: 12px; }
  .eyebrow, .hero__eyebrow { font-size: 12px; }
  .phero__note { font-size: 12px; }
}

/* ============================================================
   FOOTER WATERMARK  (2026 refresh)
   A giant hairline-outlined wordmark ghosting up from the very
   bottom edge: pure CSS, presentational only (empty alt via the
   content alternative-text syntax keeps it out of the a11y tree).
   ============================================================ */
.footer::after {
  content: "TEIMOOR JAAFAR" / "";
  position: absolute;
  left: 50%; bottom: clamp(10px, 1.6vw, 26px);
  /* fully visible: the wordmark used to duck 42% under the bottom edge,
     but it earns its place shown whole */
  transform: translate(-50%, 0);
  font-family: var(--brand);
  font-size: clamp(30px, 10.1vw, 220px); /* spans ~96vw at every width: full-bleed but never cropped */
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(20, 21, 24, 0.16);
  pointer-events: none;
  user-select: none;
}
@supports not (-webkit-text-stroke: 1px black) {
  .footer::after { color: rgba(20, 21, 24, 0.07); -webkit-text-stroke: 0; }
}
/* the legal bar needs to clear the watermark's visible upper half */
.footer__legal { position: relative; z-index: 1; }
.footer { padding-bottom: clamp(120px, 15vw, 230px); }

/* ============================================================
   WEBGL TOUCHES  (js/gl.js)
   ============================================================ */
/* wordmark sheen canvas sits exactly over the (kept, transparent)
   DOM text; the text remains real for a11y, SEO and selection */
.nav__brand { position: absolute; }
.nav__brand .wordmark-gl {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.nav__brand.has-gl .nav__wordmark { color: transparent !important; }

/* hero veil: between the grade (z1) and the copy (z2) */
.hero__gl {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}