/* ==========================================================================
   THE NEW WAVE — design system
   --------------------------------------------------------------------------
   Base is true black (#000): the product renders are shot on pure black, so
   the watch sits in the page with no visible edge. Accent colour only ever
   comes from the product — lume green after dark, strap colours in the
   configurator. The octagon of the case is the one recurring device: button
   corners, frames, the slider handle, the strap chips.
   ========================================================================== */

/* Self-hosted fonts (no third-party font requests). Licences in assets/fonts/. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/geist-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
}

:root {
  /* colour */
  --black: #000;
  --ink: #0a0b0c;        /* elevated 1 */
  --carbon: #141518;     /* elevated 2 */
  --graphite: #1f2024;   /* elevated 3 */
  --line: rgba(236, 235, 230, 0.12);
  --line-strong: rgba(236, 235, 230, 0.26);
  --steel: #8b8e94;
  --steel-2: #b4b7bc;
  --paper: #ecebe6;
  --white: #fff;
  --lume: #21e6ec;
  --lume-hi: #a6f4fb;
  --tbc: #ffd81a;        /* pending-content marker (from the yellow strap) */

  /* type */
  --f-sans: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-serif: 'Instrument Serif', 'Times New Roman', serif;

  --t-xxl: clamp(2.9rem, 6.8vw, 6.75rem);
  --t-xl: clamp(2.25rem, 4.5vw, 4.5rem);
  --t-lg: clamp(1.9rem, 3.2vw, 3.2rem);
  --t-md: clamp(1.5rem, 2.2vw, 2.1rem);
  --t-sm: 1.25rem;
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;
  --t-label: 0.6875rem; /* tracked uppercase labels; 12px on phones */

  /* space (8px base) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 5rem;
  --s-7: 7rem;
  --gutter: clamp(16px, 4vw, 56px);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --max: 1360px;
  --nav-h: 64px;

  /* depth */
  --z-raised: 10;
  --z-float: 50;
  --z-nav: 100;
  --z-dialog: 200;
  --shadow-float: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 48px -24px rgba(0, 0, 0, 0.9), 0 8px 16px -8px rgba(20, 30, 40, 0.5);
  --shadow-raised: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 24px -16px rgba(0, 0, 0, 0.8);

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* octagon chamfer */
  --cut: 10px;
  --oct: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));

  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* Black behind everything, including the status bar and overscroll. */
  background: var(--black);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Film grain: one fixed layer, painted once. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-dialog) - 1);
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@view-transition { navigation: auto; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, h4, dl, dd, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 500; }
::selection { background: var(--paper); color: var(--black); }

:focus-visible {
  outline: 1.5px solid var(--paper);
  outline-offset: 4px;
  border-radius: 2px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: var(--z-dialog);
  padding: var(--s-1) var(--s-2);
  background: var(--paper);
  color: var(--black);
  font-size: var(--t-small);
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------ typography */

.h-xxl, .h-xl, .h-lg, .h-md, .h-sm {
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.h-xxl { font-size: var(--t-xxl); letter-spacing: -0.05em; line-height: 0.98; }
.h-xl { font-size: var(--t-xl); }
.h-lg { font-size: var(--t-lg); letter-spacing: -0.035em; line-height: 1.05; }
.h-md { font-size: var(--t-md); letter-spacing: -0.028em; line-height: 1.12; }
.h-sm { font-size: var(--t-sm); letter-spacing: -0.015em; line-height: 1.3; }

/* Register label: the section names from the brief ("THE CASE", …). */
.kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em 0.9em;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--steel);
}
.kicker-oct { width: 9px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.2; flex: none; }
.kicker-sub { color: var(--paper); }
.kicker-sub::before {
  content: '';
  display: inline-block;
  width: 2.2em;
  height: 1px;
  margin-right: 0.9em;
  vertical-align: middle;
  background: var(--line-strong);
}

.sh { display: grid; gap: var(--s-3); }

.lede-serif {
  font-family: var(--f-serif);
  font-size: clamp(1.4rem, 1.9vw, 1.85rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--paper);
  max-width: 24ch;
}

.qual {
  font-size: 0.72em;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--steel);
}

.fig-cap {
  margin-top: var(--s-2);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--steel);
}

/* Pending content — deliberately visible. */
.tbc {
  display: inline-block;
  padding: 0.1em 0.45em;
  border: 1px dashed rgba(255, 216, 26, 0.55);
  color: var(--tbc);
  font-size: max(0.62em, 0.7rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.35;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  font-variant-numeric: normal;
}

/* ---------------------------------------------------------------- buttons */
/* Conventional rounded rectangles (client direction, 2026-10-08), drawn on
   pseudo-elements so hover layers stay inside the shape. */

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 6px;
  transition: transform 0.5s var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.btn::before,
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
}
.btn-label { position: relative; transition: transform 0.5s var(--ease-spring); }

.btn--solid { color: var(--black); }
.btn--solid::before { background: var(--paper); }
.btn--solid::after { background: var(--white); opacity: 0; transition: opacity 0.35s var(--ease-out); }
.btn--solid:hover::after { opacity: 1; }

.btn--ghost { color: var(--paper); }
.btn--ghost::before { box-shadow: inset 0 0 0 1px var(--line-strong); transition: opacity 0.35s var(--ease-out); }
.btn--ghost::after { box-shadow: inset 0 0 0 1px var(--paper); background: rgba(236, 235, 230, 0.06); opacity: 0; transition: opacity 0.35s var(--ease-out); }
.btn--ghost:hover::after { opacity: 1; }

.btn:hover .btn-label { transform: translateX(2px); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline-offset: 5px; }

.btn--sm { min-height: 36px; padding: 0 1rem; font-size: 0.6875rem; --cut: 7px; }
.btn--lg { min-height: 54px; padding: 0 2rem; font-size: 0.8125rem; --cut: 11px; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }
.btn--block { width: 100%; }

/* ---------------------------------------------------------------- reveals */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Line mask for the reveal. The padding keeps descenders inside the mask. */
.line { display: block; overflow: hidden; padding-block: 0.04em 0.16em; margin-block: -0.04em -0.16em; }
.line > span { display: block; }
.js [data-reveal='lines'] { opacity: 1; transform: none; }
.js [data-reveal='lines'] .line > span { transform: translate3d(0, 105%, 0); transition: transform 1.2s var(--ease-out); }
.js [data-reveal='lines'] .line:nth-child(2) > span { transition-delay: 0.08s; }
.js [data-reveal='lines'] .line:nth-child(3) > span { transition-delay: 0.16s; }
.js [data-reveal='lines'].is-in .line > span { transform: none; }

/* ---------------------------------------------------------- placeholders */

.ph {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 160px;
  background:
    radial-gradient(60% 50% at 50% 42%, rgba(160, 170, 185, 0.08), transparent 70%),
    var(--ink);
  overflow: hidden;
}
.ph svg { width: 78%; height: 78%; max-width: 100%; min-width: 0; }
.ph .ph-line { fill: none; stroke: var(--steel); stroke-width: 2; opacity: 0.7; vector-effect: non-scaling-stroke; }
.ph .ph-thin { stroke-width: 1; opacity: 0.5; }
.ph .ph-dash { stroke-dasharray: 4 6; }
.ph .ph-sketch { stroke-dasharray: 60 3 30 4; }
.ph .ph-soft { fill: rgba(236, 235, 230, 0.05); stroke: none; }
.ph .ph-dot { fill: var(--steel); }
.ph .ph-grid line { stroke: rgba(120, 150, 190, 0.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ph-note {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}
.ph-note::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 8px;
  vertical-align: 1px;
  border: 1px solid var(--tbc);
  transform: rotate(45deg);
}

/* Octagonal image frame in the case's elongated proportion. */
.oct-frame {
  --c: 14%;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% calc(var(--c) * 0.75), 100% calc(100% - var(--c) * 0.75), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c) * 0.75), 0 calc(var(--c) * 0.75));
  background: var(--ink);
  overflow: hidden;
}

/* ===================================================================== NAV */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  /* Below the status bar when the page runs under it (viewport-fit=cover,
     e.g. saved to the home screen); 0 in a normal browser tab. */
  padding-top: env(safe-area-inset-top, 0px);
}
/* Covers the status-bar strip so page content never shows above the nav
   (iOS Safari also takes its status-bar colour from this). */
.topcap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--z-nav) + 1);
  height: max(2px, env(safe-area-inset-top, 0px));
  background: #000;
  pointer-events: none;
}
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 8, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.nav.is-scrolled::before,
.nav.is-open::before { opacity: 1; }
/* Phones: once scrolled, the bar is solid and painted on the nav element
   itself. iOS Safari extends a fixed bar's solid colour into the status-bar
   area, so the page no longer shows above the nav. */
@media (max-width: 900px) {
  .nav { transition: transform 0.5s var(--ease-out), background-color 0.4s var(--ease-out); }
  .nav.is-scrolled,
  .nav.is-open { background-color: #060708; }
  .nav.is-scrolled::before,
  .nav.is-open::before { background: #060708; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wordmark { transition: opacity 0.3s; }
.wordmark:hover { opacity: 0.7; }
.wordmark:active { opacity: 0.5; }

.nav-links { display: flex; align-items: center; gap: 2.25rem; }
.nav-links ul { display: flex; gap: 2rem; }
.nav-links ul a {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-2);
  transition: opacity 0.3s;
}
.nav-links ul a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}
.nav-links ul a:hover { color: var(--paper); }
.nav-links ul a:hover::after,
.nav-links ul a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav-links ul a:active { opacity: 0.6; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 4px 0 12px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav-toggle-icon { position: relative; width: 22px; height: 10px; }
.nav-toggle-icon i {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.5s var(--ease-spring);
}
.nav-toggle-icon i:first-child { top: 0; }
.nav-toggle-icon i:last-child { bottom: 0; }
.nav.is-open .nav-toggle-icon i:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav.is-open .nav-toggle-icon i:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.nav-toggle:active { opacity: 0.6; }

.mnav {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-4) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom));
  background: var(--black);
  overflow-y: auto;
}
.mnav[hidden] { display: none; }
.mnav-links li { border-bottom: 1px solid var(--line); overflow: hidden; }
.mnav-links a {
  display: block;
  padding: 0.35em 0;
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.2;
  transform: translate3d(0, 100%, 0);
  transition: transform 0.8s var(--ease-out);
}
.mnav-links a:active { opacity: 0.6; }
.nav.is-open .mnav-links a { transform: none; }
.nav.is-open .mnav-links li:nth-child(2) a { transition-delay: 0.05s; }
.nav.is-open .mnav-links li:nth-child(3) a { transition-delay: 0.1s; }
.nav.is-open .mnav-links li:nth-child(4) a { transition-delay: 0.15s; }
.nav.is-open .mnav-links li:nth-child(5) a { transition-delay: 0.2s; }
.mnav-foot { display: grid; gap: var(--s-3); padding-top: var(--s-4); }
.mnav-social { font-size: var(--t-small); color: var(--steel-2); justify-self: start; padding: 8px 0; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ==================================================================== HERO */

.hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: var(--black);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 46% at 50% 48%, rgba(150, 160, 178, 0.13), transparent 70%),
    radial-gradient(30% 40% at 18% 20%, rgba(120, 130, 150, 0.06), transparent 70%),
    radial-gradient(60% 40% at 50% 110%, rgba(33, 230, 236, 0.05), transparent 70%);
}

.hero-word {
  position: absolute;
  inset: 38% 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-inline: calc(var(--gutter) * 0.6);
  transform: translateY(-50%);
  /* Sized so "Project" (3.01em wide) always ends before the watch case,
     whose left edge sits 24.75svh left of centre (116svh-tall render, case
     64% of its width). The "2" mirrors it on the right. */
  font-size: clamp(4.5rem, calc((50vw - 24.75svh - 0.6 * var(--gutter) - 2.5vw) / 3.01), 15.5rem);
  font-weight: 600;
  letter-spacing: -0.065em;
  line-height: 0.8;
  pointer-events: none;
  user-select: none;
}
.hero-word > span { display: block; will-change: transform; }
.hero-word > span > span {
  display: block;
  background: linear-gradient(180deg, #2b2d31 0%, #121316 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-watch {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  height: 116svh;
  aspect-ratio: 2 / 3;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
}
.hero-watch-inner {
  position: relative;
  width: 100%;
  height: 100%;
  will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, transparent 6%, #000 24%, #000 76%, transparent 94%);
  mask-image: linear-gradient(180deg, transparent 6%, #000 24%, #000 76%, transparent 94%);
}
.hero-img,
.hero-video { width: 100%; height: 100%; object-fit: contain; }

/* Light sweep: the sheen is masked by the watch image itself, so only the
   lit product catches it. */
.hero-sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: var(--mask) center / contain no-repeat;
  mask: var(--mask) center / contain no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
  mix-blend-mode: screen;
}
.hero-sheen::before {
  content: '';
  position: absolute;
  inset: -10% -60%;
  background: linear-gradient(100deg, transparent 38%, rgba(220, 230, 245, 0.26) 48%, rgba(255, 255, 255, 0.4) 50%, rgba(220, 230, 245, 0.26) 52%, transparent 62%);
  transform: translate3d(-60%, 0, 0);
  animation: sweep 9s var(--ease-io) 1.6s infinite;
}
@keyframes sweep {
  0% { transform: translate3d(-60%, 0, 0); }
  45%, 100% { transform: translate3d(60%, 0, 0); }
}

.hero-copy {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: min(100%, 34rem);
  padding: 0 var(--gutter) clamp(1.75rem, 5svh, 3.5rem);
}
.hero-brand {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin-bottom: var(--s-3);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-2);
}
.hero-brand-sep { width: 2.2em; height: 1px; background: var(--line-strong); }
.hero-title {
  font-size: clamp(1.75rem, 2.5vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}
/* "We think so." in the standard face (client direction, 2026-10-08). */
.hero-aside {
  margin-top: var(--s-2);
  font-size: clamp(1.05rem, 1.25vw, 1.35rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--steel-2);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-4); }

.hero-meta {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: grid;
  gap: var(--s-2);
  padding: 0 var(--gutter) clamp(1.75rem, 5svh, 3.5rem);
  text-align: right;
}
.hero-meta dt { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }
.hero-meta dd { font-size: var(--t-small); color: var(--paper); line-height: 1.4; }

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 3;
  width: 44px;
  height: 44px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
}
.hero-scroll span {
  position: relative;
  width: 1px;
  height: 28px;
  background: var(--line);
  overflow: hidden;
}
.hero-scroll span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: translateY(-100%);
  animation: drip 2.4s var(--ease-io) infinite;
}
.hero-scroll:hover span::after { animation-duration: 1.2s; }
.hero-scroll:active { opacity: 0.6; }
@keyframes drip { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

.hero-ctas .hero-cta-make { grid-column: 1 / -1; }

/* Load sequence: follows the opening sequence (hero.js adds .is-ready). */
.js .hero-watch-inner { opacity: 0; transform: scale(1.06) translate3d(0, 2%, 0); }
.js .hero-word > span > span { opacity: 0; transform: translate3d(0, 12%, 0); }
.js .hero-title .line > span { transform: translate3d(0, 105%, 0); }
.js .hero-brand,
.js .hero-aside,
.js .hero-ctas,
.js .hero-meta,
.js .hero-scroll { opacity: 0; }

.is-ready .hero-watch-inner { opacity: 1; transform: none; transition: opacity 2s var(--ease-out), transform 2.4s var(--ease-out); }
.is-ready .hero-word > span > span { opacity: 1; transform: none; transition: opacity 1.6s var(--ease-out) 0.35s, transform 1.8s var(--ease-out) 0.35s; }
.is-ready .hero-word-b > span { transition-delay: 0.5s !important; }
.is-ready .hero-title .line > span { transform: none; transition: transform 1.3s var(--ease-out) 0.7s; }
.is-ready .hero-title .line:nth-child(2) > span { transition-delay: 0.8s; }
.is-ready .hero-brand,
.is-ready .hero-aside,
.is-ready .hero-ctas,
.is-ready .hero-meta,
.is-ready .hero-scroll { opacity: 1; transition: opacity 1.2s var(--ease-out) 1.1s; }

/* Mobile: a stacked composition instead of overlaying copy on the watch —
   wordmark, then the watch (tucked under the lettering), then the copy. */
@media (max-width: 760px) {
  .hero {
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--nav-h) + var(--bar-h) + 2svh);
  }
  .hero-word {
    position: relative;
    inset: auto;
    transform: none;
    font-size: 21vw;
    justify-content: center;
    gap: 0.22em;
    padding-inline: var(--gutter);
  }
  .hero-watch {
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;
    align-self: center;
    height: clamp(340px, calc(100svh - 270px), 132vw);
    margin-top: -12vw;
    margin-bottom: -9svh;
    transform: none;
  }
  .hero-watch-inner {
    -webkit-mask-image: linear-gradient(180deg, transparent 6%, #000 20%, #000 72%, transparent 90%);
    mask-image: linear-gradient(180deg, transparent 6%, #000 20%, #000 72%, transparent 90%);
  }
  .hero-copy {
    position: relative;
    z-index: 3;
    width: 100%;
    margin-top: auto;
    padding: var(--s-2) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  }
  .hero-brand { margin-bottom: 12px; }
  .hero-title { font-size: clamp(1.45rem, 6.4vw, 1.9rem); line-height: 1.08; }
  .hero-aside { font-size: 1rem; margin-top: 8px; }
  .hero-ctas { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s-3); }
  .hero-ctas .btn { padding: 0 0.75rem; font-size: 0.6875rem; }
  .hero-meta, .hero-scroll { display: none; }
}

/* =================================================================== STORY */

.story { padding-block: var(--section) var(--s-6); position: relative; }
.story-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
  row-gap: var(--s-4);
  align-items: center;
}
.story-copy { grid-column: 1 / span 6; display: grid; gap: var(--s-3); justify-items: start; }
/* Client copy, set as written: "the new wave watch company" stays lower case. */
.story-kicker { font-size: var(--t-small); letter-spacing: 0.01em; text-transform: none; color: var(--steel-2); }
.story-title { max-width: 19ch; }
.story-lede { max-width: 26ch; }
.story-p { font-size: var(--t-body); color: var(--steel-2); max-width: 52ch; }
.story-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }
.story-figure { grid-column: 8 / span 4; }
.story-frame {
  aspect-ratio: 4 / 5;
  max-height: 64svh;
  margin-inline: auto;
  background: radial-gradient(52% 46% at 50% 50%, rgba(255, 107, 18, 0.14), transparent 72%);
}
.story-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 14%, #000 86%, transparent 98%);
  mask-image: linear-gradient(180deg, transparent 2%, #000 14%, #000 86%, transparent 98%);
}
.story-figure .fig-cap { text-align: center; }

.pillars-sec { padding-block: var(--s-6) var(--s-5); }
.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.pillar { padding: var(--s-3) var(--s-3) 0 0; display: grid; gap: 8px; align-content: start; }
.pillar + .pillar { padding-left: var(--s-3); border-left: 1px solid var(--line); }
.pillar-title { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }
.pillar-fact { font-size: clamp(1.25rem, 1.7vw, 1.6rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.2; }
.pillar-body { font-size: 0.9375rem; line-height: 1.6; color: var(--steel-2); max-width: 30ch; }

@media (max-width: 900px) {
  .story-copy { grid-column: 1 / -1; }
  .story-figure { grid-column: 3 / span 8; grid-row: 1; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar:nth-child(3) { padding-left: 0; border-left: 0; }
  .pillar:nth-child(n + 3) { margin-top: var(--s-3); border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .story-figure { grid-column: 2 / span 10; }
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { padding: var(--s-3) 0 var(--s-1); border-left: 0; }
  .pillar + .pillar { border-top: 1px solid var(--line); }
  .pillar:nth-child(n + 3) { margin-top: 0; }
}

/* =================================================================== STATS */

.stats { padding-block: var(--s-6); }
.stats-title { margin-bottom: var(--s-3); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.stat {
  display: grid;
  gap: var(--s-3);
  align-content: space-between;
  padding: var(--s-2) var(--s-3) 0 0;
}
.stat + .stat { padding-left: var(--s-3); border-left: 1px solid var(--line); }
.stat-label {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}
.stat-value {
  display: flex;
  align-items: baseline;
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-unit { font-size: 0.36em; font-weight: 400; letter-spacing: 0; color: var(--steel); margin-left: 0.14em; }
.stat-pre { color: var(--steel-2); }

@media (max-width: 760px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n + 3) { margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--line); }
  .stat-value { font-size: clamp(2.3rem, 11vw, 3.25rem); }
}

/* ==================================================================== CASE */

/* Two modes, chosen by assets/js/case.js:
   .is-pinned  the composition fits the window: it pins while a tall track
               scrolls past, and scroll drives --p.
   otherwise   it scrolls normally (short or narrow windows) and --p follows
               the section's position in the viewport. Same animation either way. */
.case { position: relative; --p: 0; }
.case-sticky {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: var(--section);
}
/* Two states (client direction, 2026-10-08): two swipes, then out. */
.case.is-pinned .case-track { height: 200vh; }
.case.is-pinned .case-sticky {
  position: sticky;
  top: var(--nav-h);
  min-height: calc(100svh - var(--nav-h));
  padding-block: var(--s-3);
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
  align-items: center;
}
.case-stage {
  grid-column: 1 / span 6;
  position: relative;
  height: min(84svh, 680px, 70vw);
  aspect-ratio: 2 / 3;
  justify-self: center;
  perspective: 1600px;
}
.case.is-pinned .case-stage { height: min(calc(100svh - var(--nav-h) - 1rem), 1100px); }
.case-watch {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(calc((var(--p) - 0.5) * -34deg)) rotateX(calc((var(--p) - 0.5) * 6deg)) scale(calc(0.94 + var(--p) * 0.08));
  -webkit-mask-image: linear-gradient(180deg, transparent 6%, #000 22%, #000 78%, transparent 94%);
  mask-image: linear-gradient(180deg, transparent 6%, #000 22%, #000 78%, transparent 94%);
}
.case-img { width: 100%; height: 100%; object-fit: contain; }
.case-trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.case-trace path {
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: var(--trace, 1);
  transition: stroke-dashoffset 1.1s var(--ease-out);
  opacity: 0.7;
}
.case-notes { position: absolute; inset: 0; pointer-events: none; }
.cn {
  position: absolute;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-2);
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.cn::before { content: ''; display: inline-block; width: 24px; height: 1px; margin-right: 10px; vertical-align: middle; background: var(--line-strong); }
.cn-1 { left: 82%; top: 30%; }
.cn-2 { left: 82%; top: 70%; }
.cn-3 { right: 84%; top: 50%; }
.cn-3::before { display: none; }
.cn-3::after { content: ''; display: inline-block; width: 24px; height: 1px; margin-left: 10px; vertical-align: middle; background: var(--line-strong); }
.case.n1 .cn-1, .case.n2 .cn-2, .case.n3 .cn-3 { opacity: 1; transform: none; }
/* The trace: half the octagon, then all of it. */
.case.s1 { --trace: 0.5; }
.case.s2 { --trace: 0; }
/* Narrower desktops: the left-hand note would run off the edge. */
@media (max-width: 1200px) { .cn-3 { display: none; } }

.case-copy { grid-column: 8 / -1; display: grid; gap: var(--s-4); }
.case-copy .h-xl { font-size: clamp(2.25rem, 4.2vw, 4.25rem); }
.case-ideas { display: grid; gap: var(--s-3); }
.idea {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  opacity: 0.28;
  transition: opacity 0.8s var(--ease-out);
}
.idea.is-on { opacity: 1; }
.idea-glyph { width: 48px; height: 48px; fill: none; stroke: var(--paper); stroke-width: 1.4; }
.idea-glyph .g-thin { stroke: var(--steel); stroke-width: 0.8; }
.idea-title { font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 6px; }
.idea-body { font-size: 0.9375rem; color: var(--steel-2); line-height: 1.65; max-width: 40ch; }

/* Without JS the ideas are simply visible. */
html:not(.js) .idea { opacity: 1; }
html:not(.js) .case-trace path { stroke-dashoffset: 0; }

@media (max-width: 900px) {
  .case-sticky { display: block; }
  .case-grid { display: block; }
  .case-stage { height: auto; width: min(100%, 420px); margin: 0 auto var(--s-4); }
  .cn { display: none; }
}

/* =============================================================== TECHNICAL */

.tech {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.tech-visual { position: absolute; inset: 0; z-index: -1; }
.tech-copy { position: relative; padding-block: var(--section); }
.tech-title { margin-top: var(--s-3); }
.tech-body { margin-top: var(--s-4); display: grid; gap: 0.35rem; max-width: 30ch; }
.tech-body p { font-size: 1.0625rem; line-height: 1.6; color: var(--steel-2); }
.callouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-strong);
  max-width: 44rem;
}
.callout dt { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); margin-bottom: 4px; }
.callout dd { font-size: var(--t-small); color: var(--paper); line-height: 1.5; }

@media (max-width: 700px) {
  .callouts { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
}

/* material */
.tech--material { min-height: 92svh; }
.carbon-field {
  position: absolute;
  inset: -12% 0;
  will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 22%, #000 78%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent 4%, #000 22%, #000 78%, transparent 96%);
}
.carbon-img { width: 100%; height: 100%; object-fit: cover; }
.carbon-light {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 60% at 20% 55%, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.55) 55%, transparent 80%),
    linear-gradient(180deg, #000 0%, transparent 18%, transparent 82%, #000 100%);
}
.carbon-inset {
  position: absolute;
  right: calc(var(--gutter) + 4vw);
  top: 16%;
  width: clamp(140px, 16vw, 230px);
  z-index: 1;
}
.carbon-inset .oct-frame { aspect-ratio: 220 / 298; box-shadow: var(--shadow-float); outline: 1px solid var(--line-strong); }
.carbon-inset-img { width: 100%; height: 100%; object-fit: cover; }
.carbon-inset figcaption { margin-top: 12px; font-size: var(--t-label); line-height: 1.5; letter-spacing: 0.04em; color: var(--steel-2); }

@media (min-width: 761px) {
  .tech--material .tech-copy { padding-right: calc(var(--gutter) + clamp(140px, 16vw, 230px) + 4vw + 2.5rem); }
}
@media (max-width: 760px) {
  .tech--material { align-items: flex-end; }
  .carbon-light { background: linear-gradient(180deg, #000 0%, transparent 20%, rgba(0, 0, 0, 0.5) 50%, #000 88%); }
  .carbon-inset { top: 10%; right: var(--gutter); width: 110px; }
}

/* mechanical */
.tech--mechanical { min-height: 100svh; }
.mech-zoom {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.mech-img {
  position: absolute;
  left: 64%;
  top: 50%;
  width: auto;
  height: 150svh;
  max-width: none;
  transform: translate3d(-50%, -48%, 0) scale(var(--mz, 1));
  will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, transparent 16%, #000 30%, #000 70%, transparent 84%);
  mask-image: linear-gradient(180deg, transparent 16%, #000 30%, #000 70%, transparent 84%);
}
.tech--mechanical::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, #000 12%, rgba(0, 0, 0, 0.7) 34%, transparent 56%),
    linear-gradient(180deg, #000 0%, transparent 14%, transparent 86%, #000 100%);
  pointer-events: none;
}
.mech-marks {
  position: absolute;
  left: 64%;
  top: 50%;
  width: 56svh;
  height: 56svh;
  transform: translate(-50%, -50%);
  opacity: 0.18;
}
.mech-marks line { stroke: var(--paper); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 8; }

@media (max-width: 760px) {
  .tech--mechanical { align-items: flex-end; min-height: 120svh; }
  .mech-img { left: 50%; top: 32%; height: 120svh; }
  .mech-marks { left: 50%; top: 34%; width: 80vw; height: 80vw; }
  .tech--mechanical::after { background: linear-gradient(180deg, #000 0%, transparent 10%, transparent 45%, #000 70%); }
}

/* Mobile: the movement becomes its own image block above the copy, rather
   than a background the text sits on. */
@media (max-width: 760px) {
  .tech--mechanical { display: block; min-height: 0; }
  .tech--mechanical .tech-visual { position: relative; inset: auto; height: 118vw; }
  .tech--mechanical::after { display: none; }
  .mech-zoom {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 74%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 74%, transparent 100%);
  }
  .mech-img { left: 50%; top: 50%; height: 205vw; -webkit-mask-image: none; mask-image: none; }
  .mech-marks { display: none; }
  .tech--mechanical .tech-copy { padding-top: 0; margin-top: -6vw; }
}

/* Mobile: the case photo sits in its own space above the copy. */
@media (max-width: 760px) {
  .tech--material { display: block; min-height: 0; }
  .carbon-inset { top: var(--s-5); right: var(--gutter); width: 104px; transform: none !important; }
  .carbon-inset figcaption { display: none; }
  .tech--material .tech-copy { padding-top: calc(var(--s-5) + 141px + var(--s-4)); }
}

/* =============================================================== DAY/NIGHT */

.dn {
  --pos: 50;
  position: relative;
  padding-block: var(--section) var(--s-5);
  overflow: hidden;
  isolation: isolate;
}
.dn-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 50% 62%, rgba(33, 230, 236, 0.22), transparent 70%),
    radial-gradient(80% 60% at 50% 100%, rgba(33, 230, 236, 0.08), transparent 70%);
  opacity: calc(1 - var(--pos) / 100);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 75%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 75%, transparent);
}
.dn-head { text-align: center; display: grid; justify-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.dn-head .kicker { justify-content: center; }

.dn-stage {
  position: relative;
  width: min(100% - 2 * var(--gutter), calc(min(74svh, 840px) * 2 / 3));
  aspect-ratio: 2 / 3;
  margin-inline: auto;
  container-type: inline-size;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.dn-layer { position: absolute; inset: 0; }
.dn-layer img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.dn-day, .dn-night {
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 20%, #000 80%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent 4%, #000 20%, #000 80%, transparent 96%);
}
.dn-night { clip-path: inset(0 0 0 calc(var(--pos) * 1%)); }

.dn-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  transform: translate3d(calc(var(--pos) * 1cqw), 0, 0);
  outline: none;
}
.dn-rule {
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: -0.5px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(236, 235, 230, 0.7) 20%, rgba(236, 235, 230, 0.7) 80%, transparent);
}
.dn-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 44px;
  height: 52px;
  transform: translate(-50%, -50%);
  transition: transform 0.5s var(--ease-spring);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6));
}
.dn-knob svg { width: 100%; height: 100%; }
.dn-knob path:first-child { fill: rgba(10, 11, 12, 0.72); stroke: var(--paper); stroke-width: 1.2; }
.dn-chev { fill: none; stroke: var(--paper); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dn-stage:hover .dn-knob,
.dn-handle:focus-visible .dn-knob { transform: translate(-50%, -50%) scale(1.1); }
.dn.is-dragging .dn-knob { transform: translate(-50%, -50%) scale(0.94); }
.dn-handle:focus-visible .dn-knob path:first-child { stroke: var(--lume-hi); }
.dn-handle:focus-visible .dn-rule { background: var(--lume-hi); }

.dn-end {
  position: absolute;
  bottom: 2%;
  min-height: 44px;
  padding: 0 6px;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-2);
  transition: opacity 0.3s;
}
.dn-end:hover { color: var(--paper); }
.dn-end:active { opacity: 0.6; }
.dn-end--day { left: 0; }
.dn-end--night { right: 0; color: var(--lume); }
.dn-end--night:hover { color: var(--lume-hi); }

/* ================================================================ PROPORTION */

.prop { padding-block: var(--section); }
.prop-lede { margin-top: var(--s-3); max-width: 36ch; font-size: 1.0625rem; line-height: 1.55; color: var(--steel-2); }
.prop-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
  row-gap: var(--s-4);
  margin-top: var(--s-5);
  align-items: end;
}
.prop-front { grid-column: 1 / span 5; }
.prop-side { grid-column: 6 / span 4; }
.prop-figures { grid-column: 10 / -1; display: grid; gap: var(--s-4); align-self: stretch; align-content: space-between; }

.prop-drawing { position: relative; aspect-ratio: 2 / 3; }
.prop-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 97%);
}
.dims { position: absolute; inset: 0; width: 100%; height: 100%; }
.dim path { fill: none; stroke: var(--paper); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.75; }
.dim-label {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -135%);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--paper);
  white-space: nowrap;
}


.pf { padding-top: var(--s-2); border-top: 1px solid var(--line); }
.pf dt { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); margin-bottom: var(--s-1); }
.pf dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.1em; line-height: 0.9; }
.pf-num { font-size: clamp(2.5rem, 3.6vw, 3.5rem); font-weight: 300; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.pf-unit { font-size: 1.1rem; color: var(--steel); margin-left: 0.15em; }
.pf-note { margin-top: var(--s-1); font-size: var(--t-small); color: var(--steel); }
.pf-note::first-letter { text-transform: uppercase; }

@media (max-width: 900px) {
  .prop-front { grid-column: 1 / span 7; }
  .prop-side { grid-column: 8 / -1; }
  .prop-figures { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .prop-front { grid-column: 1 / -1; }
  .prop-side { grid-column: 1 / -1; }
  .prop-figures { grid-template-columns: 1fr; }
}

/* ================================================================ CAROUSEL */

.carousel { padding-block: var(--section) var(--s-6); border-top: 1px solid var(--line); overflow: hidden; }
.carousel-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-2) var(--s-4);
}
.carousel-head .kicker { grid-column: 1 / -1; }
.carousel-arrows { display: flex; gap: 8px; }
.arrow-btn {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  --cut: 12px;
  transition: transform 0.4s var(--ease-spring), opacity 0.3s;
}
.arrow-btn { border-radius: 8px; }
.arrow-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--line-strong);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  padding: 1px;
}
.arrow-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--paper);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.arrow-btn svg { position: relative; z-index: 1; width: 20px; height: 20px; fill: none; stroke: var(--paper); stroke-width: 1.5; transition: stroke 0.3s; }
.arrow-btn:hover::after { opacity: 1; }
.arrow-btn:hover svg { stroke: var(--black); }
.arrow-btn:active { transform: scale(0.92); }
.arrow-btn[disabled] { opacity: 0.3; pointer-events: none; }

/* First-visit drag hint (assets/js/carousel.js): the track nudges twice
   and an arrow beside the centred watch points on to the next one. */
.carousel-stage { position: relative; --slide: clamp(200px, 21vw, 330px); }
.carousel.is-nudging .carousel-track { animation: track-nudge 1.7s var(--ease-io) 2; }
@keyframes track-nudge {
  0%, 100% { transform: none; }
  45%, 70% { transform: translate3d(-64px, 0, 0); }
}
.drag-hint {
  position: absolute;
  top: 50%;
  /* In the gap between the centred watch and the next one. */
  left: calc(50% + var(--slide, 260px) * 0.5 - 10px);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, -50%, 0);
  transition: opacity 0.5s var(--ease-out);
}
.carousel.is-hinting .drag-hint { opacity: 1; }
.drag-arrow {
  width: clamp(44px, 5vw, 72px);
  height: auto;
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.carousel.is-hinting .drag-arrow { animation: arrow-point 1.4s var(--ease-io) infinite; }
@keyframes arrow-point {
  0% { transform: translate3d(-8px, 0, 0); opacity: 0; }
  30% { opacity: 1; }
  70% { transform: translate3d(14px, 0, 0); opacity: 1; }
  100% { transform: translate3d(18px, 0, 0); opacity: 0; }
}
@media (max-width: 760px) {
  .drag-hint { left: auto; right: calc(var(--gutter) - 4px); }
}

.carousel-track {
  --slide: clamp(200px, 21vw, 330px);
  display: flex;
  gap: clamp(0px, 1vw, 16px);
  margin-top: var(--s-4);
  padding-inline: calc(50% - var(--slide) / 2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  outline-offset: -2px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.carousel-track.is-gliding { scroll-snap-type: none; }
/* Mouse/trackpad: no native snap; carousel.js settles softly instead.
   Touch keeps native snap and momentum. */
@media (hover: hover) and (pointer: fine) {
  .carousel-track { scroll-snap-type: none; }
}
/* Scroll-linked sizing (carousel.js) drives these per frame; no CSS lag. */
.carousel.is-live .wc-media { transition: none; will-change: transform, opacity; }
.carousel-track.is-dragging * { pointer-events: none; }
.wc {
  flex: 0 0 var(--slide);
  scroll-snap-align: center;
}
.wc-link { display: block; -webkit-user-drag: none; }
.wc-media {
  aspect-ratio: 2 / 3;
  transform: scale(0.64);
  opacity: 0.35;
  transition: transform 0.9s var(--ease-spring), opacity 0.7s var(--ease-out);
  -webkit-mask-image: linear-gradient(180deg, transparent 3%, #000 20%, #000 80%, transparent 97%);
  mask-image: linear-gradient(180deg, transparent 3%, #000 20%, #000 80%, transparent 97%);
}
.wc.is-near .wc-media { transform: scale(0.74); opacity: 0.5; }
.wc.is-active .wc-media { transform: scale(1); opacity: 1; }
.wc-img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.wc .ph { background: transparent; }
.wc .ph svg { width: 66%; }
.wc:not(.is-active) .wc-link { cursor: pointer; }

.carousel-info { display: grid; justify-items: center; text-align: center; }
.ci { display: grid; justify-items: center; gap: 10px; animation: ci-in 0.7s var(--ease-out); }
.ci[hidden] { display: none; }
@keyframes ci-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.ci-name { font-size: clamp(1.6rem, 2.4vw, 2.25rem); letter-spacing: -0.035em; line-height: 1.1; }
.ci-price { font-size: 1.125rem; color: var(--paper); }
.ci-desc { max-width: 44ch; font-size: var(--t-small); color: var(--steel-2); }

@media (max-width: 760px) {
  .carousel-track { --slide: 68vw; gap: 0; }
  .carousel-arrows { display: none; }
  .carousel-info { margin-top: 0; }
}

/* ============================================================ PRODUCT PAGE */

.pdp { padding-top: calc(var(--nav-h) + var(--bar-h) + 2rem); padding-bottom: var(--section); }
.pdp-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-4);
  row-gap: var(--s-3);
}
.crumbs { grid-column: 1 / -1; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0; font-size: var(--t-micro); letter-spacing: 0.08em; color: var(--steel); }
.crumbs li + li::before { content: '/'; margin: 0 0.75em; color: var(--line-strong); }
.crumbs a { display: inline-block; padding: 8px 0; transition: opacity 0.3s; }
.crumbs a:hover { color: var(--paper); }
.crumbs a:active { opacity: 0.6; }
.crumbs [aria-current] { color: var(--paper); padding: 8px 0; }

.gal { min-width: 0; }
.gal-main { position: relative; aspect-ratio: 4 / 5; background: var(--black); overflow: hidden; }
.gal-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s var(--ease-out); }
.gal-slide.is-active { opacity: 1; }
.gal-img { width: 100%; height: 100%; object-fit: contain; }
.gal-slide .ph { background: radial-gradient(50% 45% at 50% 45%, rgba(160, 170, 185, 0.06), transparent 70%); }
.gal-rail { display: flex; gap: 8px; margin-top: var(--s-2); overflow-x: auto; scrollbar-width: none; }
.gal-thumb {
  position: relative;
  flex: 0 0 72px;
  height: 90px;
  background: var(--ink);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: opacity 0.3s, transform 0.4s var(--ease-spring);
  opacity: 0.55;
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); }
.gal-thumb .ph { min-height: 0; }
.gal-thumb .ph-note { display: none; }
.gal-thumb:hover { opacity: 0.9; }
.gal-thumb:active { transform: scale(0.95); }
.gal-thumb[aria-current='true'] { opacity: 1; border-color: var(--paper); }

.pdp-info { grid-column: 9 / -1; min-width: 0; }
@media (max-width: 1200px) and (min-width: 901px) {
  .pdp-info { grid-column: 7 / -1; }
}
.pdp-sticky { position: sticky; top: calc(var(--nav-h) + 2rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.pdp-title { font-size: clamp(2.2rem, 3.6vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.02; }
.pdp-tagline { font-family: var(--f-serif); font-style: italic; font-size: 1.3rem; line-height: 1.25; color: var(--steel-2); }
.pdp-price { font-size: 1.5rem; letter-spacing: -0.02em; }
.pdp-desc { color: var(--steel-2); font-size: 0.9875rem; }
.pdp-status { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); padding-block: var(--s-2); border-block: 1px solid var(--line); }
.pdp-status dt { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); margin-bottom: 4px; }
.pdp-status dd { font-size: var(--t-small); }

.acc details { border-bottom: 1px solid var(--line); }
.acc details:first-child { border-top: 1px solid var(--line); }
.acc summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  list-style: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: opacity 0.3s;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font-size: 1.25rem; font-weight: 300; transition: transform 0.4s var(--ease-spring); }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc summary:hover { opacity: 0.7; }
.acc summary:active { opacity: 0.5; }
.acc details > :not(summary) { margin-bottom: var(--s-3); }
.acc details p { font-size: var(--t-small); color: var(--steel-2); }

@media (max-width: 900px) {
  .pdp { padding-top: calc(var(--nav-h) + var(--bar-h) + 1.25rem); }
  .pdp-info { grid-column: 1 / -1; }
  .pdp-sticky { position: static; }
  .gal-main {
    display: flex;
    aspect-ratio: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
  }
  .gal-main::-webkit-scrollbar { display: none; }
  .gal-slide { position: relative; flex: 0 0 100%; aspect-ratio: 4 / 5; opacity: 1; scroll-snap-align: center; }
}


/* ================================================================ SHARED */

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  transition: opacity 0.3s;
}
.text-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 1px;
  background: var(--line-strong);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.text-link:hover::after { background: var(--paper); }
.text-link:active { opacity: 0.6; }
p .text-link { min-height: 0; font-size: inherit; letter-spacing: 0.02em; text-transform: none; }
p .text-link::after { bottom: -2px; }

/* Specification sheet (specs page, product pages). */
.sheet { border-top: 1px solid var(--line-strong); }
.sheet-row {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--s-3);
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.sheet--numbered .sheet-row { grid-template-columns: 2.5rem minmax(8rem, 12rem) 1fr; }
.sheet-ref { font-size: var(--t-label); color: var(--steel); font-variant-numeric: tabular-nums; }
.sheet dt { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }
.sheet dd { font-size: 1rem; line-height: 1.5; }
.sheet--compact .sheet-row { grid-template-columns: 9rem 1fr; padding: 0.75rem 0; }
.sheet--compact dd { font-size: 0.9375rem; }
@media (max-width: 560px) {
  .sheet-row, .sheet--compact .sheet-row { grid-template-columns: 1fr; gap: 4px; }
  .sheet--numbered .sheet-row { grid-template-columns: 2rem 1fr; }
  .sheet--numbered dd { grid-column: 2; }
}

/* ================================================================ CAROUSEL+ */

.carousel-head > div:first-child { display: grid; gap: var(--s-2); }
.carousel-head .kicker { grid-column: auto; }
.carousel-foot { display: grid; justify-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.carousel-pager { display: flex; align-items: center; gap: 2px; }
.pager-dot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
}
.pager-dot span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--line-strong);
  transform-origin: center;
  transition: transform 0.5s var(--ease-out), opacity 0.3s;
}
.pager-dot:hover span { background: var(--steel-2); }
.pager-dot[aria-current='true'] span { background: var(--paper); transform: scaleX(1.6); }
.pager-dot:active span { opacity: 0.6; }
.pager-count { margin-left: var(--s-2); font-size: var(--t-micro); color: var(--steel); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.pager-count span { color: var(--paper); }
.ci { gap: 8px; }
.ci-price { font-size: 1rem; }
.ci-cur { font-size: 0.75rem; color: var(--steel); letter-spacing: 0.08em; }
.ci-pending .tbc { font-size: 0.625rem; }
.ci-actions { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-1); }

/* ============================================================= SPECS PAGE */

.sph {
  position: relative;
  padding: calc(var(--nav-h) + var(--bar-h) + var(--s-4)) 0 var(--s-5);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.sph-light {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(34% 50% at 74% 46%, rgba(160, 170, 188, 0.13), transparent 70%);
}
.sph-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
  row-gap: var(--s-4);
  align-items: center;
}
.sph-copy { grid-column: 1 / span 6; display: grid; gap: var(--s-3); justify-items: start; }
.sph-copy .crumbs { margin-bottom: var(--s-2); }
.sph-title { margin-top: calc(var(--s-2) * -1); }
.sph-intro { max-width: 46ch; color: var(--steel-2); }
.sph-watch {
  grid-column: 8 / span 4;
  grid-row: 1 / span 2;
  aspect-ratio: 2 / 3;
  max-height: 72svh;
  justify-self: center;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 20%, #000 80%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent 4%, #000 20%, #000 80%, transparent 96%);
}
.sph-img { width: 100%; height: 100%; object-fit: contain; }
.sph-figures {
  grid-column: 1 / span 6;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.sph-figures > div { padding: var(--s-2) var(--s-2) 0 0; }
.sph-figures > div + div { padding-left: var(--s-2); border-left: 1px solid var(--line); }
.sph-figures dt { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); margin-bottom: 6px; }
.sph-figures dd { font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.15; }
.sph-figures .qual { display: block; font-size: 0.75rem; letter-spacing: 0.04em; margin-top: 2px; }

@media (max-width: 900px) {
  .sph-copy, .sph-figures { grid-column: 1 / -1; }
  .sph-watch { grid-column: 3 / span 8; grid-row: auto; max-height: 60svh; }
}
@media (max-width: 560px) {
  .sph-figures { grid-template-columns: 1fr 1fr; }
  .sph-figures > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .sph-figures > div:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: var(--s-2); }
}

/* Spec feature: one subject, visual + figures. */
.sf { padding-block: var(--s-6); border-bottom: 1px solid var(--line); }
.sf-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
  row-gap: var(--s-4);
  align-items: center;
}
.sf-visual {
  grid-column: 1 / span 5;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background:
    radial-gradient(55% 50% at 50% 48%, rgba(160, 170, 188, 0.1), transparent 70%),
    var(--ink);
  border: 1px solid var(--line);
}
.sf-copy { grid-column: 7 / -1; display: grid; gap: var(--s-2); }
.sf--flip .sf-visual { grid-column: 8 / -1; grid-row: 1; }
.sf--flip .sf-copy { grid-column: 1 / span 6; grid-row: 1; }
.sf-body { color: var(--steel-2); max-width: 42ch; }
.sf-rows { margin-top: var(--s-2); border-top: 1px solid var(--line-strong); }
.sf-rows > div {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr;
  gap: var(--s-2);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.sf-rows dt { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }
.sf-rows dd { font-size: 1rem; line-height: 1.5; }

.sf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sf-visual--case .sf-img,
.sf-visual--lume .sf-img { transform: scale(1.3); }
.sf-visual--strap .sf-img { object-fit: cover; object-position: 50% 20%; transform: scale(1.5); transform-origin: 50% 14%; }
.sf-visual--detail .sf-img { object-fit: cover; }
/* A photograph with its own background: the frame takes the photo's exact
   proportions and the photo fills it edge to edge (no bands at the sides). */
.sf-visual.sf-visual--photo { aspect-ratio: 1152 / 1365; background: none; }
.sf-visual--photo .sf-img { object-fit: cover; transform: none; }
.sf-visual--lume { background: radial-gradient(50% 45% at 50% 50%, rgba(33, 230, 236, 0.14), transparent 70%), var(--ink); }
.sf-trace { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1.3); pointer-events: none; }
.sf-trace path { fill: none; stroke: var(--paper); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.55; }

@media (max-width: 900px) {
  .sf-visual, .sf--flip .sf-visual { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 5 / 4; }
  .sf-copy, .sf--flip .sf-copy { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) {
  .sf-rows > div { grid-template-columns: 1fr; gap: 2px; }
}

.sheet-sec { padding-block: var(--section); border-top: 1px solid var(--line); }
.sheet-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
  row-gap: var(--s-4);
}
.sheet-side { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--nav-h) + 2rem); display: grid; gap: var(--s-2); }
.sheet-meta { font-size: var(--t-small); color: var(--steel); max-width: 28ch; }
.sheet-grid > .sheet { grid-column: 6 / -1; }
@media (max-width: 900px) {
  .sheet-side { grid-column: 1 / -1; position: static; }
  .sheet-grid > .sheet { grid-column: 1 / -1; }
}

.specs-cta { border-top: 1px solid var(--line); padding-block: var(--s-5); }
.specs-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.specs-cta-meta { margin-top: 6px; color: var(--steel-2); font-size: 0.9375rem; }

/* =============================================================== BRAND MARKS */

.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.wordmark-img { height: 17px; width: auto; }
@media (max-width: 760px) { .wordmark-img { height: 15px; } }

/* ============================================================ OPENING / INTRO */
/* Markup: src/components/Intro.js. Timing: inline script in <head>. */

.intro { display: none; }
html[data-intro='full'] .intro,
html[data-intro='light'] .intro,
html[data-intro='short'] .intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: #000;
  transition: opacity 0.6s var(--ease-io);
}
.intro-gone .intro { display: none !important; }
.intro-out .intro { opacity: 0; pointer-events: none; }
html[data-intro]:not([data-intro='none']):not(.intro-gone) body { overflow: hidden; }

.intro-mark { display: grid; justify-items: center; gap: 18px; width: clamp(130px, 14vw, 172px); }
.intro-logo { width: 100%; height: auto; opacity: 0; animation: intro-fade 0.6s var(--ease-out) 0.05s forwards; }
/* Two hairlines, each half the logo's width, growing from its outer edges to
   meet in the middle. They cover ~88% during --intro-travel, then close. */
.intro-lines { position: relative; width: 100%; height: 1px; display: flex; }
.intro-line { flex: 1; height: 1px; background: var(--paper); transform: scaleX(0); }
.intro-line--l { transform-origin: left center; }
.intro-line--r { transform-origin: right center; }
html:not([data-intro='none']) .intro-line { animation: intro-travel var(--intro-travel, 1300ms) var(--ease-io) forwards; }
.intro-meet .intro-line { animation: intro-close 0.3s var(--ease-out) forwards; }
.intro-meet .intro-lines::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--white);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.5);
  animation: intro-spark 0.5s var(--ease-out) forwards;
}
.intro-out .intro-mark { transform: scale(0.98); transition: transform 0.6s var(--ease-io); }
@keyframes intro-travel { to { transform: scaleX(0.88); } }
@keyframes intro-close { from { transform: scaleX(0.88); } to { transform: scaleX(1); } }
@keyframes intro-fade { to { opacity: 1; } }
@keyframes intro-spark { from { opacity: 1; } to { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } }

/* ===================================================== TECHNICAL: MECHANICAL */

.tech-strong { color: var(--paper) !important; font-size: 1.125rem !important; }
.tech--mechanical .tech-copy { max-width: var(--max); }
.tech--mechanical .tech-body { max-width: 34ch; }

.instruments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--s-5);
  max-width: 40rem;
  background: var(--line);
  border: 1px solid var(--line);
}
.inst {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 4px;
  padding: var(--s-2);
  background: rgba(4, 5, 6, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.inst-art {
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-1);
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.4;
  stroke-linecap: round;
  overflow: visible;
}
.inst-art line { stroke: var(--steel-2); stroke-width: 1.2; }
.inst-art .i-dim { stroke: rgba(236, 235, 230, 0.2); stroke-width: 1; fill: none; }
.inst-art .i-draw { stroke: var(--paper); stroke-width: 1.8; stroke-dasharray: 1; stroke-dashoffset: 0; }
.inst-art .i-fill { fill: rgba(236, 235, 230, 0.14); stroke: none; }
.inst-art .i-needle { stroke: var(--paper); stroke-width: 2; }
.inst-art .i-dot { fill: var(--paper); stroke: none; }
.inst-art .i-jewel { fill: #c8354a; stroke: none; }
.inst-value { font-size: 1.5rem; font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.inst-value--word { font-size: 1.1rem; font-weight: 400; letter-spacing: -0.01em; }
.inst-unit { margin-left: 0.15em; font-size: 0.55em; letter-spacing: 0.02em; color: var(--steel); }
.inst-label { font-size: 0.75rem; line-height: 1.4; color: var(--steel-2); }

/* Draw-in when the group reveals. */
.js .instruments:not(.is-in) .i-draw { stroke-dashoffset: 1; }
.js .instruments .i-draw { transition: stroke-dashoffset 1.6s var(--ease-io) 0.2s; }
.js .instruments:not(.is-in) .i-jewel { opacity: 0; }
.js .instruments .i-jewel { transition: opacity 0.4s var(--ease-out); transition-delay: calc(0.3s + var(--i) * 40ms); }
.js .instruments:not(.is-in) .i-grow { transform: scaleX(0); }
.js .instruments .i-grow { transform-origin: 16px 50px; transition: transform 1.2s var(--ease-out) 0.3s; }
.js .instruments:not(.is-in) .i-needle { transform: rotate(-270deg); }
.js .instruments .i-needle { transform-origin: 50px 50px; transition: transform 1.6s var(--ease-out) 0.3s; }

@media (max-width: 760px) {
  .instruments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inst-art { width: 46px; height: 46px; }
}

/* ============================================================== CASE: MORPH */


/* ================================================================ SPECS PAGE */

.sph-mark { margin: 0; }
.sph-p2 { height: 22px; width: auto; }
.sph-figures { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-column: 1 / span 7; }
.sph-unit { font-size: 0.5em; margin-left: 0.12em; color: var(--steel); letter-spacing: 0; }

.smv { padding-block: var(--s-6); border-bottom: 1px solid var(--line); }
.smv-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
  row-gap: var(--s-2);
  align-items: end;
  margin-bottom: var(--s-5);
}
.smv-head > div { grid-column: 1 / span 6; display: grid; gap: var(--s-2); }
.smv-body { grid-column: 8 / -1; color: var(--steel-2); max-width: 44ch; }
.smv-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
  row-gap: var(--s-4);
  align-items: start;
}
.smv-visual { grid-column: 1 / span 5; }
.smv-img { width: 100%; aspect-ratio: 454 / 570; object-fit: cover; border: 1px solid var(--line); }
.instruments--specs { grid-column: 7 / -1; margin-top: 0; max-width: none; }
.instruments--specs .inst { background: var(--ink); padding: var(--s-3); }
.instruments--specs .inst-art { width: 72px; height: 72px; }
.instruments--specs .inst-value { font-size: 2rem; }

@media (max-width: 900px) {
  .smv-head > div, .smv-body, .smv-visual, .instruments--specs { grid-column: 1 / -1; }
  .smv-visual { max-width: 420px; }
}

/* Owner's technical drawings, shown as supplied on a paper plate. */
.drawings { padding-block: var(--s-6); border-bottom: 1px solid var(--line); }
.drawings-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
  row-gap: var(--s-4);
  align-items: center;
}
.drawings-copy { grid-column: 1 / span 5; display: grid; gap: var(--s-2); }
.drawings-body { color: var(--steel-2); max-width: 40ch; }
/* Photo plates (side and case back): the photographs are shot on black,
   so the frame is black too — a hairline edge and a caption beneath. */
.sheet-plate {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--s-2);
  padding: 0 0 var(--s-2);
  background: var(--black);
  color: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}
.sheet-plate figcaption { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }
.sheet-plate--side { grid-column: 7 / span 3; }
.sheet-plate--back { grid-column: 10 / -1; }
.drawing-img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }

@media (max-width: 900px) {
  .drawings-copy { grid-column: 1 / -1; }
  .sheet-plate--side { grid-column: 1 / span 6; }
  .sheet-plate--back { grid-column: 7 / -1; }
}

/* Proportion: side-view plate with the thickness dimension. */
.prop-side-img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.dim-label--below { transform: translate(-50%, 35%); }

/* Grouped full specification sheet. */
.sheet-groups { grid-column: 5 / -1; display: grid; gap: var(--s-5); }
.sheet-group-title { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); margin-bottom: var(--s-2); }
@media (max-width: 900px) { .sheet-groups { grid-column: 1 / -1; } }

@media (max-width: 900px) {
  .sph-figures { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sph-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sph-figures > div:nth-child(3) { padding-left: var(--s-2); border-left: 1px solid var(--line); }
  .sph-figures > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .sph-figures > div:nth-child(n + 3) { border-top: 0; margin-top: 0; }
  .sph-figures > div:nth-child(n + 4) { border-top: 1px solid var(--line); margin-top: var(--s-2); }
}

/* ============================================================ PRODUCT + BUY */

.pdp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.45em; }
.pdp-cur, .pdp-tax { font-size: 0.75rem; letter-spacing: 0.06em; color: var(--steel); }

/* ================================================================== FOOTER */

.foot { border-top: 1px solid var(--line); padding-block: var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom)); }
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: var(--s-4);
  align-items: start;
}
.foot-id { display: grid; gap: var(--s-2); justify-items: start; }
.foot-logo { display: inline-block; transition: opacity 0.3s; }
.foot-logo:hover { opacity: 0.75; }
.foot-logo:active { opacity: 0.55; }
.foot-lockup { height: 34px; width: auto; }
.foot-tag { font-family: var(--f-serif); font-style: italic; font-size: 1.2rem; color: var(--steel-2); }
.foot-links { display: grid; gap: 2px; }
.foot-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  min-height: 40px;
  padding-top: 10px;
  font-size: 0.875rem;
  color: var(--paper);
  transition: opacity 0.3s;
}
.foot-links a:hover { opacity: 0.65; }
.foot-links a:active { opacity: 0.45; }
.foot-k { min-width: 6.5em; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }
.foot-end { display: grid; justify-items: end; gap: var(--s-2); }
.foot-tnw { height: 14px; width: auto; opacity: 0.55; }
.foot-copy { font-size: var(--t-micro); color: var(--steel); letter-spacing: 0.06em; }

@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .foot-end { justify-items: start; grid-auto-flow: column; align-items: center; justify-content: space-between; }
}

/* ============================================================ FOOTER: LEGAL */

.foot-legal { margin-top: var(--s-4); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.foot-legal-list { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); }
.foot-legal-list a,
.foot-legal-list button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--steel-2);
  transition: color 0.3s;
}
.foot-legal-list a:hover,
.foot-legal-list button:hover { color: var(--paper); }
.foot-legal-list a:active,
.foot-legal-list button:active { opacity: 0.6; }

/* ============================================================ COOKIE CONSENT */
/* Behaviour: assets/js/consent.js. Accept and Reject share one style. */

.cc {
  position: fixed;
  left: var(--gutter);
  bottom: calc(var(--gutter) * 0.75 + env(safe-area-inset-bottom));
  z-index: var(--z-dialog);
  width: min(420px, calc(100% - 2 * var(--gutter)));
  display: grid;
  gap: 12px;
  padding: var(--s-3);
  background: rgba(14, 15, 17, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-float);
  animation: cc-in 0.6s var(--ease-out);
}
.cc[hidden] { display: none; }
@keyframes cc-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
.cc-title { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); }
.cc-text { font-size: 0.875rem; line-height: 1.6; color: var(--steel-2); }
.cc-link { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.cc-link:hover { text-decoration-color: var(--paper); }
.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.cc-btn {
  min-height: 42px;
  padding: 0 12px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  transition: border-color 0.3s, background-color 0.3s;
}
.cc-btn:hover { border-color: var(--paper); background: rgba(236, 235, 230, 0.06); }
.cc-btn:active { background: rgba(236, 235, 230, 0.12); }
.cc-btn--solid { background: var(--paper); color: var(--black); border-color: var(--paper); }
.cc-btn--solid:hover { background: var(--white); }
.cc-manage {
  grid-column: 1 / -1;
  justify-self: center;
  min-height: 36px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--steel-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}
.cc-manage:hover { color: var(--paper); }

@media (max-width: 560px) {
  .cc { left: 0; right: 0; bottom: 0; width: 100%; border-width: 1px 0 0; padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom)); }
}

.ccp {
  width: min(520px, calc(100% - 2 * var(--gutter)));
  max-height: calc(100svh - 2 * var(--gutter));
  padding: 0;
  border: 1px solid var(--line-strong);
  background: var(--carbon);
  color: var(--paper);
  box-shadow: var(--shadow-float);
  overflow: auto;
}
.ccp::backdrop { background: rgba(0, 0, 0, 0.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ccp[open] { animation: cc-in 0.5s var(--ease-out); }
.ccp-inner { display: grid; gap: var(--s-2); padding: var(--s-3); }
.ccp-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.ccp-title { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; }
.ccp-close { width: 40px; height: 40px; display: grid; place-items: center; margin-right: -10px; border-radius: 2px; transition: background-color 0.3s; }
.ccp-close:hover { background: rgba(236, 235, 230, 0.08); }
.ccp-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ccp-intro { font-size: 0.875rem; line-height: 1.6; color: var(--steel-2); }
.ccp-cats { display: grid; border-top: 1px solid var(--line); }
.ccp-cat { display: grid; gap: 6px; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.ccp-cat-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.ccp-cat-name { font-size: 0.9375rem; font-weight: 500; }
.ccp-cat-desc { font-size: 0.8125rem; line-height: 1.6; color: var(--steel-2); }
.ccp-always { font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); }
.ccp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.ccp-actions .cc-btn--solid { grid-column: 1 / -1; }

.switch { position: relative; display: inline-flex; width: 44px; height: 26px; flex: none; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch-track {
  width: 100%;
  height: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: transparent;
  transition: background-color 0.3s, border-color 0.3s;
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--steel-2);
  transition: transform 0.35s var(--ease-spring), background-color 0.3s;
}
.switch input:checked + .switch-track { background: var(--paper); border-color: var(--paper); }
.switch input:checked + .switch-track::after { transform: translateX(18px); background: var(--black); }
.switch input:focus-visible + .switch-track { outline: 1.5px solid var(--paper); outline-offset: 3px; }

/* ============================================================== LEGAL PAGES */

.lg-head { padding: calc(var(--nav-h) + var(--bar-h) + var(--s-4)) 0 var(--s-5); border-bottom: 1px solid var(--line); }
.lg-head-inner { display: grid; gap: var(--s-2); justify-items: start; }
.lg-head .crumbs { margin-bottom: var(--s-2); }
.lg-intro { max-width: 58ch; color: var(--steel-2); }
.lg-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); }
.lg-meta dt { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); margin-bottom: 4px; }
.lg-meta dd { font-size: 0.875rem; }

.lg-grid {
  display: grid;
  grid-template-columns: minmax(200px, 3fr) minmax(0, 8fr);
  column-gap: var(--s-5);
  padding-block: var(--s-5) var(--section);
  align-items: start;
}
.lg-side { position: sticky; top: calc(var(--nav-h) + var(--s-3)); }
.lg-toc-label { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); margin-bottom: var(--s-2); }
.lg-toc-list { display: grid; gap: 2px; }
.lg-toc-list a {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--steel-2);
  transition: color 0.3s;
}
.lg-toc-list a:hover { color: var(--paper); }
.lg-toc-list a:active { opacity: 0.6; }
.lg-toc-list a.is-current { color: var(--paper); }
.lg-num { flex: none; min-width: 1.6em; font-size: var(--t-label); color: var(--steel); font-variant-numeric: tabular-nums; padding-top: 0.15em; }
.lg-tnw { width: 38px; height: auto; margin-top: var(--s-4); opacity: 0.35; }
.lg-toc-m { display: none; }

.lg-body { display: grid; gap: var(--s-5); min-width: 0; }
.lg-sec { scroll-margin-top: calc(var(--nav-h) + var(--s-3)); }
.lg-h {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.lg-prose { max-width: 68ch; display: grid; gap: var(--s-2); color: var(--steel-2); font-size: 0.9875rem; line-height: 1.75; }
.lg-prose strong { color: var(--paper); font-weight: 500; }
.lg-prose h3 { margin-top: var(--s-2); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); }
.lg-prose ul { display: grid; gap: 8px; padding-left: 1.1em; list-style: none; }
.lg-prose ul li { position: relative; }
.lg-prose ul li::before { content: ''; position: absolute; left: -1.1em; top: 0.8em; width: 6px; height: 1px; background: var(--steel); }
.lg-a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); transition: text-decoration-color 0.3s; overflow-wrap: anywhere; }
.lg-a:hover { text-decoration-color: var(--paper); }
.lg-note { font-size: 0.875rem; }
.lg-steps { display: grid; gap: 10px; padding-left: 1.4em; list-style: decimal; }
.lg-steps li::marker { color: var(--steel); font-size: 0.8em; }
.lg-prose .tbc { font-size: var(--t-label); }
.lg-dl { display: grid; border-top: 1px solid var(--line); }
.lg-dl > div { display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr; gap: var(--s-2); padding: 12px 0; border-bottom: 1px solid var(--line); }
.lg-dl dt { color: var(--paper); font-weight: 500; font-size: 0.9375rem; }
.lg-dl dd { font-size: 0.9375rem; }

.lg-table-wrap { border: 1px solid var(--line); overflow-x: auto; }
.lg-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; line-height: 1.55; }
.lg-table th, .lg-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.lg-table thead th { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); background: var(--ink); }
.lg-table tbody tr:last-child > * { border-bottom: 0; }
.lg-table tbody th { font-weight: 400; color: var(--paper); min-width: 11rem; }
.lg-table code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 0.8125rem; color: var(--paper); }
.lg-type { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--steel); }

@media (max-width: 900px) {
  .lg-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-3); padding-top: var(--s-3); }
  .lg-side { position: static; }
  .lg-toc { display: none; }
  .lg-toc-m { display: block; border: 1px solid var(--line); }
  .lg-toc-m summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    list-style: none;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .lg-toc-m summary::-webkit-details-marker { display: none; }
  .lg-toc-m summary::after { content: '+'; font-size: 1.1rem; font-weight: 300; transition: transform 0.35s var(--ease-spring); }
  .lg-toc-m[open] summary::after { transform: rotate(45deg); }
  .lg-toc-m .lg-toc-list { padding: 0 14px 12px; }
}
@media (max-width: 640px) {
  .lg-dl > div { grid-template-columns: 1fr; gap: 4px; }
  /* Table becomes stacked cards. */
  .lg-table-wrap { border: 0; overflow: visible; }
  .lg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lg-table, .lg-table tbody, .lg-table tr, .lg-table th, .lg-table td { display: block; width: 100%; }
  .lg-table tr { border: 1px solid var(--line); margin-bottom: 10px; }
  .lg-table tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
  .lg-table tbody tr > *:last-child { border-bottom: 0 !important; }
  .lg-table td::before { content: attr(data-label); display: block; font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); margin-bottom: 2px; }
}

/* ===================================================================== 404 */

.nf {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + var(--bar-h) + var(--s-4)) 0 var(--s-5);
  overflow: hidden;
  isolation: isolate;
}
.nf-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(236, 235, 230, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 235, 230, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent);
}
.nf-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s-5);
  align-items: center;
}
.nf-visual { position: relative; width: min(100%, 420px); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.nf-dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nf-ring { fill: none; stroke: var(--line-strong); stroke-width: 0.6; }
.nf-ticks line { stroke: rgba(236, 235, 230, 0.26); stroke-width: 0.7; }
.nf-ticks line.major { stroke: rgba(236, 235, 230, 0.6); stroke-width: 1.3; }
.nf-hour, .nf-min { stroke: var(--paper); stroke-linecap: round; }
.nf-hour { stroke-width: 3.2; }
.nf-min { stroke-width: 2; }
.nf-sec line { stroke: #c8354a; stroke-width: 0.9; stroke-linecap: round; }
.nf-hub { fill: var(--paper); }
/* 8 beats a second — the 28,800 vph of Project 2. */
.nf-sec { transform-origin: 100px 100px; animation: nf-seconds 60s steps(480) infinite; }
@keyframes nf-seconds { to { transform: rotate(360deg); } }
.nf-tnw { position: relative; width: 22%; height: auto; margin-top: 44%; opacity: 0.5; }

.nf-copy { display: grid; gap: var(--s-2); justify-items: start; }
.nf-code {
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 300;
  letter-spacing: -0.06em;
  line-height: 0.95;
  color: transparent;
  -webkit-text-stroke: 1px rgba(236, 235, 230, 0.4);
  font-variant-numeric: tabular-nums;
}
.nf-title { margin-top: calc(var(--s-1) * -1); }
.nf-text { max-width: 44ch; color: var(--steel-2); }
.nf-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-2); }
.nf-tag { margin-top: var(--s-3); font-family: var(--f-serif); font-style: italic; font-size: 1.1rem; color: var(--steel); }

@media (max-width: 900px) {
  .nf-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .nf-visual { width: min(62vw, 300px); }
}
@media (max-width: 560px) {
  .nf-ctas { display: grid; grid-template-columns: 1fr; width: 100%; }
}

/* ========================================================== REDUCED MOTION */

/* =============================================================== TRUST BAR */
/* Sits above the nav inside the fixed header; the whole header slides up by
   the bar's height once the page scrolls, so the nav keeps its place. */

:root { --bar-h: 0px; }
.has-bar { --bar-h: 34px; }
.has-bar.bar-closed { --bar-h: 0px; }

.tbar { height: var(--bar-h); overflow: hidden; position: relative; background: var(--black); border-bottom: 1px solid var(--line); }
.bar-closed .tbar { display: none; }
.tbar-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: calc(var(--gutter) + 36px);
}
.tbar-text { display: flex; align-items: center; gap: 0.9rem; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-2); white-space: nowrap; min-width: 0; }
.tbar-claim { overflow: hidden; text-overflow: ellipsis; }
.tbar-link { position: relative; color: var(--paper); padding: 8px 0; transition: opacity 0.3s; }
.tbar-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--line-strong); transition: background 0.3s; }
.tbar-link:hover::after { background: var(--paper); }
.tbar-link:active { opacity: 0.6; }
.tbar-close {
  position: absolute;
  right: calc(var(--gutter) - 10px);
  top: 50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  color: var(--steel);
  transition: color 0.3s, transform 0.4s var(--ease-spring);
}
.tbar-close svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.tbar-close:hover { color: var(--paper); }
.tbar-close:active { transform: scale(0.88); }

.nav { transition: transform 0.5s var(--ease-out), background-color 0.4s var(--ease-out); }
.has-bar:not(.bar-closed) .nav.is-scrolled:not(.is-open) { transform: translate3d(0, calc(-1 * var(--bar-h)), 0); }
/* The mobile menu sits under the nav in either state (a transformed header
   becomes the menu's containing block, which this top value accounts for). */
.mnav { top: calc(var(--nav-h) + var(--bar-h) + env(safe-area-inset-top, 0px)); height: calc(100svh - var(--nav-h) - var(--bar-h) - env(safe-area-inset-top, 0px)); }

@media (max-width: 560px) {
  .tbar-claim { display: none; }
}

/* Stars (Trustpilot, only when configured) */
.stars { position: relative; display: inline-flex; flex: none; }
.stars > span { display: inline-flex; gap: 2px; }
.stars svg { width: 12px; height: 12px; }
.stars-off svg { fill: var(--graphite); }
.stars-on { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--fill)) 0 0); }
.stars-on svg { fill: var(--paper); }
.tp { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--paper); transition: opacity 0.3s; }
.tp:hover { opacity: 0.8; }
.tp:active { opacity: 0.6; }
.tp-score { font-variant-numeric: tabular-nums; }
.tp-count { color: var(--steel); }

/* ================================================================== ABOUT */

.ab-hero { padding: calc(var(--nav-h) + var(--bar-h) + var(--s-5)) 0 var(--s-6); border-bottom: 1px solid var(--line); }
.ab-hero .crumbs { margin-bottom: var(--s-5); }
.ab-hero-kicker { margin-bottom: var(--s-3); }
.ab-hero-title { max-width: 14ch; }

.ab-split { padding-block: var(--section); }
.ab-split + .ab-split { padding-top: 0; }
.ab-split-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
  row-gap: var(--s-5);
  align-items: center;
}
.ab-copy { grid-column: 1 / span 5; display: grid; gap: var(--s-3); align-content: start; }
.ab-split--flip .ab-copy { grid-column: 8 / span 5; grid-row: 1; }
.ab-title { max-width: 16ch; }
.ab-body { display: grid; gap: var(--s-2); max-width: 48ch; }
.ab-lead { font-family: var(--f-serif); font-size: clamp(1.35rem, 1.8vw, 1.7rem); line-height: 1.25; letter-spacing: -0.005em; color: var(--paper); }
.ab-p { color: var(--steel-2); }
.ab-p--strong { color: var(--paper); }

.ab-figure--macro { grid-column: 7 / -1; }
/* A close crop of the supplied render: the movement fills the frame. */
.ab-macro { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--black); }
.ab-macro-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210%;
  max-width: none;
  transform: translate(-50%, -49%);
}
.ab-macro::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 80px 30px var(--black); pointer-events: none; }

.ab-plates { grid-column: 1 / span 6; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); align-items: start; }
.ab-plates-cap { grid-column: 1 / -1; margin-top: 0; }

/* Behind the watch */
.ab-people { padding-block: var(--section); border-top: 1px solid var(--line); }
.ab-people-head { display: grid; gap: var(--s-2); max-width: 40rem; margin-bottom: var(--s-5); }
.ab-people-grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 64rem; }
.ab-people-fig { overflow: hidden; background: var(--ink); }
.ab-people-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Philosophy: the three black cards */

/* The experience: the page turns to the packaging's own studio grey. */

/* Testimonials */
.ab-says { padding-block: var(--section); }
.ab-says-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-3); margin-bottom: var(--s-5); }
.ab-says-head > div:first-child { display: grid; gap: var(--s-2); }
.ab-says-meta { display: grid; gap: var(--s-1); justify-items: end; text-align: right; }
.ab-says-note { font-size: var(--t-small); color: var(--steel); max-width: 34ch; }

.ab-quote-lead { padding: var(--s-4) 0 var(--s-5); border-top: 1px solid var(--line-strong); }
.ab-quote-lead blockquote, .ab-q blockquote { margin: 0; }
.ab-quote-lead p { font-family: var(--f-serif); font-size: clamp(1.7rem, 3.3vw, 3rem); line-height: 1.14; letter-spacing: -0.012em; max-width: 30ch; text-wrap: pretty; }
.ab-quote-lead p::before, .ab-q p::before { content: '\201C'; }
.ab-quote-lead p::after, .ab-q p::after { content: '\201D'; }
.ab-quote-lead figcaption, .ab-q figcaption { margin-top: var(--s-2); font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }

/* One horizontal row of messages at every size. It drifts on a loop
   (assets/js/reviews.js) until the visitor clicks, taps or drags it; from
   then on it is an ordinary swipe/scroll row with snapping. */
.ab-quotes {
  display: flex;
  gap: var(--s-3);
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--s-3) var(--gutter) var(--s-2);
  overflow-x: auto;
  /* Sideways only: the row never scrolls up or down inside itself. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.ab-quotes::-webkit-scrollbar { display: none; }
/* Soft edges so messages drift in and out rather than being cut off. */
.ab-quotes {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
.ab-quotes { user-select: none; -webkit-user-select: none; cursor: grab; }
.ab-quotes.is-auto { scroll-snap-type: none; cursor: grab; }
.ab-quotes.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.ab-q {
  flex: 0 0 clamp(18rem, 28vw, 26rem);
  scroll-snap-align: center;
  display: flex;
  margin: 0;
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-top: 1px solid var(--line-strong);
}
.ab-q figure { display: flex; flex-direction: column; gap: var(--s-2); }
.ab-q p { font-size: 1.0625rem; line-height: 1.5; color: var(--paper); }
.ab-q figcaption { margin-top: var(--s-1); }

.ab-originals { margin-top: var(--s-4); border-top: 1px solid var(--line); }
.ab-originals summary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: opacity 0.3s;
}
.ab-originals summary::-webkit-details-marker { display: none; }
.ab-originals summary::after { content: ''; width: 8px; height: 8px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.4s var(--ease-spring); }
.ab-originals[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.ab-originals summary:hover { opacity: 0.75; }
.ab-originals summary:active { opacity: 0.55; }
.ab-originals-note { font-size: var(--t-small); color: var(--steel); margin-bottom: var(--s-3); }
.ab-dms { columns: 3 16rem; column-gap: var(--s-2); }
.ab-dms li { break-inside: avoid; margin-bottom: var(--s-2); background: #fff; padding: 6px; }
.ab-dm { width: 100%; }

/* Closing statement */
.ab-end { padding-block: var(--section) calc(var(--section) * 1.1); border-top: 1px solid var(--line); }
.ab-end-line { font-size: var(--t-xl); font-weight: 500; letter-spacing: -0.045em; line-height: 1.02; max-width: 17ch; text-wrap: balance; }

@media (max-width: 900px) {
  .ab-copy, .ab-split--flip .ab-copy { grid-column: 1 / -1; grid-row: auto; }
  .ab-figure--macro, .ab-plates { grid-column: 1 / -1; grid-row: auto; }
  .ab-says-meta { justify-items: start; text-align: left; }
}
@media (max-width: 560px) {
  .ab-people-grid { grid-template-columns: 1fr; }
}

/* ============================================================== 360 VIEW */

.v3 { position: relative; isolation: isolate; padding-top: calc(var(--nav-h) + var(--bar-h) + var(--s-3)); overflow: hidden; }
.v3-bg, .v3-bg > div { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.v3-bg-day {
  background:
    radial-gradient(46% 40% at 50% 56%, rgba(236, 235, 230, 0.13), transparent 70%),
    radial-gradient(80% 60% at 50% 110%, rgba(139, 142, 148, 0.16), transparent 70%),
    var(--black);
}
.v3-bg-night {
  opacity: 0;
  transition: opacity 1.4s var(--ease-io);
  background:
    radial-gradient(38% 34% at 50% 56%, rgba(33, 230, 236, 0.1), transparent 72%),
    radial-gradient(90% 70% at 50% 0%, rgba(30, 50, 90, 0.28), transparent 70%),
    #000;
}
.v3[data-mode='night'] .v3-bg-night { opacity: 1; }

.v3-head { display: grid; justify-items: center; text-align: center; gap: 0.35rem; }
.v3-title { font-size: clamp(2.25rem, 4vw, 3.9rem); }
.v3-sub { font-family: var(--f-serif); font-size: clamp(1.3rem, 1.8vw, 1.7rem); color: var(--steel-2); }

.v3-stage { position: relative; height: clamp(420px, calc(100svh - var(--nav-h) - var(--bar-h) - 13.5rem), 900px); margin-top: var(--s-1); }
.v3-host { position: absolute; inset: 0; outline: none; }
.v3-host:focus-visible { outline: 1.5px solid var(--line-strong); outline-offset: -12px; }
.v3-canvas { display: block; width: 100%; height: 100%; cursor: grab; opacity: 0; transition: opacity 1.1s var(--ease-out); }
.v3-canvas:active { cursor: grabbing; }
.v3[data-state='ready'] .v3-canvas { opacity: 1; }

/* Loader: the opening sequence's two hairlines, driven by real progress. */
.v3-load { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 0.7s var(--ease-out); }
.v3[data-state='ready'] .v3-load { opacity: 0; pointer-events: none; }
:is(.v3[data-state='still'], html:not(.js) .v3) .v3-load { display: none; }
.v3-load-mark { display: grid; justify-items: center; gap: 0.5rem; width: min(260px, 70vw); text-align: center; }
.v3-load-brand { font-size: var(--t-label); letter-spacing: 0.22em; color: var(--steel); }
.v3-load-name { font-size: var(--t-md); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.v3-load-lines { position: relative; width: 100%; height: 1px; margin-top: 0.9rem; }
.v3-load-line { position: absolute; top: 0; width: 50%; height: 1px; background: var(--paper); transform: scaleX(0.04); transition: transform 0.45s var(--ease-out); }
.v3-load-line--l { left: 0; transform-origin: left; }
.v3-load-line--r { right: 0; transform-origin: right; }
.v3-load-note { margin-top: 0.4rem; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }
.v3-load-pct { font-variant-numeric: tabular-nums; color: var(--paper); }
.v3-load-go { margin-top: var(--s-2); }

.v3-hint {
  position: absolute;
  left: 50%;
  bottom: 88px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-2);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, 6px, 0);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.v3-hint svg { width: 34px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.v3.show-hint:not(.is-touched) .v3-hint { opacity: 1; transform: translate3d(-50%, 0, 0); }

/* Still presentation (no model yet / no WebGL / load failed) */
.v3-still { display: none; }
:is(.v3[data-state='still'], html:not(.js) .v3) .v3-host { display: none; }
:is(.v3[data-state='still'], html:not(.js) .v3) .v3-still {
  position: absolute;
  inset: 0 var(--gutter) 84px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: var(--s-4);
  align-items: center;
  max-width: var(--max);
  margin-inline: auto;
}
.v3-still-main { grid-column: 2; grid-row: 1; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; }
.v3-still-pair { position: relative; height: 100%; aspect-ratio: 2 / 3; max-width: 38vw; }
.v3-still-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 1.4s var(--ease-io); }
.v3-still-night { opacity: 0; }
.v3[data-mode='night'] .v3-still-night { opacity: 1; }
.v3[data-mode='night'] .v3-still-day { opacity: 0; }
.v3-still-main .fig-cap { margin-top: 0.5rem; }
.v3-still-plate { width: min(18vw, 240px); }
.v3-still-plate--side { grid-column: 1; grid-row: 1; justify-self: end; }
.v3-still-plate--back { grid-column: 3; grid-row: 1; justify-self: start; }
.v3-still-note { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: var(--s-2); max-width: 46ch; text-align: center; font-size: var(--t-small); color: var(--steel); }

/* Controls */
.v3-controls { position: absolute; left: 0; right: 0; bottom: var(--s-3); display: flex; justify-content: center; align-items: center; gap: var(--s-2); pointer-events: none; }
.v3-controls > * { pointer-events: auto; }
.v3-mode { --cut: 9px; position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; background: rgba(20, 21, 24, 0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); clip-path: var(--oct); }
.v3-mode-btn {
  position: relative;
  z-index: 1;
  min-width: 84px;
  min-height: 40px;
  padding: 0 1.1rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-2);
  transition: color 0.5s var(--ease-out), transform 0.3s var(--ease-spring);
}
.v3-mode-btn[aria-pressed='true'] { color: var(--black); }
.v3-mode-btn:hover:not([aria-pressed='true']) { color: var(--paper); }
.v3-mode-btn:active { transform: scale(0.96); }
.v3-mode-btn:focus-visible { outline-offset: -4px; }
.v3-mode-thumb { --cut: 7px; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--paper); clip-path: var(--oct); transition: transform 0.6s var(--ease-spring); }
.v3-mode-thumb::after { content: ''; position: absolute; inset: 0; background: var(--lume-hi); opacity: 0; transition: opacity 0.6s var(--ease-out); }
.v3[data-mode='night'] .v3-mode-thumb { transform: translate3d(100%, 0, 0); }
.v3[data-mode='night'] .v3-mode-thumb::after { opacity: 1; }
.v3-zoom { display: inline-flex; gap: 2px; }
:is(.v3[data-state='still'], html:not(.js) .v3) [data-viewer-3d-only], .v3[data-state='loading'] [data-viewer-3d-only], .v3[data-state='idle'] [data-viewer-3d-only] { display: none; }
.v3-icon { display: grid; place-items: center; width: 40px; height: 40px; background: rgba(20, 21, 24, 0.72); color: var(--steel-2); transition: color 0.3s, transform 0.4s var(--ease-spring); }
.v3-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.v3-icon:hover { color: var(--paper); }
.v3-icon:active { transform: scale(0.9); }
.v3-icon:focus-visible { outline-offset: -3px; }


@media (max-width: 760px) {
  .v3-stage { height: 68svh; min-height: 400px; }
  .v3-hint { bottom: 76px; }
  .v3-controls { bottom: var(--s-2); }
  :is(.v3[data-state='still'], html:not(.js) .v3) .v3-stage { height: auto; min-height: 0; }
  :is(.v3[data-state='still'], html:not(.js) .v3) .v3-still { position: relative; inset: auto; padding: 0 var(--gutter) 76px; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; column-gap: var(--s-2); row-gap: var(--s-2); }
  .v3-still-main { grid-column: 1 / -1; height: auto; }
  .v3-still-pair { height: auto; width: min(78vw, 360px); max-width: none; }
  .v3-still-day { position: relative; }
  .v3-still-plate--side { grid-column: 1; grid-row: 2; justify-self: stretch; }
  .v3-still-plate--back { grid-column: 2; grid-row: 2; justify-self: stretch; }
  .v3-still-plate { width: auto; }
  .v3-still-note { grid-row: 3; margin-top: 0; }
}

/* ================================================================ SHOP */
/* Product selection, quantity, cart drawer, cart and checkout pages.
   One quiet register: small tracked labels, hairline dividers, the watch
   carries the colour. */

/* ---- product page */
.pdp-media { grid-column: 1 / span 7; min-width: 0; }
.pdp-variant[hidden] { display: none; }
.pdp-variant .gal { grid-column: auto; }
@media (max-width: 1200px) and (min-width: 901px) { .pdp-media { grid-column: 1 / span 6; } }

.pdp-sticky { gap: var(--s-2); }
.pdp-title { font-size: clamp(2rem, 3vw, 2.75rem); letter-spacing: -0.04em; line-height: 1; }
.pdp-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.pdp-colour { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.0625rem; }
.pdp-swatch, .cart-line-dot { display: inline-block; width: 10px; height: 12px; background: var(--c); clip-path: polygon(25% 0, 75% 0, 100% 20%, 100% 80%, 75% 100%, 25% 100%, 0 80%, 0 20%); flex: none; }
.pdp-price { font-size: 1.0625rem; letter-spacing: -0.01em; }
.pdp-desc { font-size: 0.9375rem; line-height: 1.65; color: var(--steel-2); max-width: 46ch; }
.pdp-tax { font-size: 0.8125rem; color: var(--steel); }

.pdp-buy { display: grid; gap: var(--s-3); padding-top: var(--s-1); }
.pdp-field { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.75rem; }
.pdp-label { padding: 0; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }
.pdp-label-value { margin-left: 0.6em; color: var(--paper); letter-spacing: 0.1em; }

.swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.swatch {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  background: var(--ink);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.35s var(--ease-spring);
}
.swatch-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); opacity: 0.7; transition: opacity 0.3s; }
.swatch:hover .swatch-img { opacity: 1; }
.swatch:active { transform: scale(0.95); }
.swatch[aria-current='true'] { border-color: var(--paper); }
.swatch[aria-current='true'] .swatch-img { opacity: 1; }
.swatch:focus-visible { outline-offset: 2px; }

.qty { display: inline-flex; align-items: stretch; width: max-content; border: 1px solid var(--line-strong); }
.qty-btn { display: grid; place-items: center; width: 44px; height: 44px; color: var(--paper); transition: background-color 0.3s, opacity 0.3s; }
.qty-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.qty-btn:hover { background: rgba(236, 235, 230, 0.06); }
.qty-btn:active { background: rgba(236, 235, 230, 0.12); }
.qty-btn:disabled { opacity: 0.3; pointer-events: none; }
.qty-btn:focus-visible { outline-offset: -3px; }
.qty-input {
  width: 3.25rem;
  border: 0;
  border-inline: 1px solid var(--line);
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus-visible { outline: 1.5px solid var(--paper); outline-offset: -2px; }
.qty--sm .qty-btn { width: 40px; height: 40px; }
.qty--sm .qty-input { width: 2.75rem; font-size: 0.875rem; }

.pdp-add { min-height: 56px; }
.pdp-note { min-height: 1.2em; font-size: 0.8125rem; color: var(--steel-2); }
.pdp-note:empty { display: none; }
.pdp .acc { margin-top: var(--s-1); }

/* Gallery position dots (phones, where the gallery is swiped). */
.gal-dots { display: none; }

@media (max-width: 900px) {
  /* Mobile order: name, image, colour + price, description, colour,
     quantity, ADD TO CART, details. */
  .pdp-info, .pdp-sticky { display: contents; }
  .pdp-media { grid-column: 1 / -1; order: 2; }
  .pdp-title { order: 1; font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .pdp-meta { order: 3; }
  .pdp-desc { order: 4; }
  .pdp-buy { order: 5; }
  .pdp-tax { order: 6; }
  .pdp .acc { order: 7; }
  .pdp-grid { row-gap: var(--s-2); }
  .gal-rail { display: none; }
  .gal-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
  .gal-dots span { width: 14px; height: 2px; background: var(--line-strong); transition: background-color 0.3s; }
  .gal-dots span.is-on { background: var(--paper); }
  .swatches { gap: 6px; }
}
@media (max-width: 560px) {
  .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .swatch { aspect-ratio: 4 / 5; }
}

/* ---- nav cart link */
.cartl {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-2);
  transition: color 0.3s;
}
.cartl:hover { color: var(--paper); }
.cartl:active { opacity: 0.6; }
.cartl-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: 0.6875rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--black);
  background: var(--paper);
  clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
}
.cartl-count[hidden] { display: none; }
/* Mobile: Cart is a row in the menu, with the count beside it. */
.mnav-cart > span { display: inline-flex; align-items: center; gap: 0.4em; }
.mnav-cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.3em;
  font-size: 0.5em;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--black);
  background: var(--paper);
  clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
}
.mnav-cart-count[hidden] { display: none; }

/* ---- cart lines (drawer + cart page) */
.cart-lines { display: grid; }
.cart-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  grid-template-areas: 'media info total' 'media qty qty';
  gap: 0.5rem var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}
.cart-line:first-child { border-top: 1px solid var(--line); }
.cart-line-media { grid-area: media; display: block; background: var(--black); }
.cart-line-media img { width: 72px; height: 108px; object-fit: cover; object-position: 50% 45%; }
.cart-line-info { grid-area: info; display: grid; gap: 2px; align-content: start; }
.cart-line-name { font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; }
.cart-line-name a:hover { opacity: 0.75; }
.cart-line-colour { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--steel-2); }
.cart-line-unit { font-size: 0.8125rem; color: var(--steel); }
.cart-line-total { grid-area: total; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.cart-line-qty { grid-area: qty; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); align-self: end; }
.cart-line-remove {
  min-height: 44px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--steel);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: color 0.3s;
}
.cart-line-remove:hover { color: var(--paper); }
.cart-line-remove:active { opacity: 0.6; }

.cart-totals > div { display: flex; justify-content: space-between; align-items: baseline; padding-block: var(--s-2) 0.5rem; }
.cart-totals dt { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }
.cart-totals dd { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.cart-fine { font-size: 0.8125rem; color: var(--steel); margin-bottom: var(--s-2); }
.cart-empty { display: grid; gap: var(--s-2); justify-items: start; padding-block: var(--s-3); }
.cart-empty[hidden] { display: none; }
.cart-empty-title { font-size: 1.125rem; }
.cart-empty-body { font-size: 0.9375rem; color: var(--steel-2); }

/* ---- cart drawer */
.cartd {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100%);
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line-strong);
  background: var(--carbon);
  color: var(--paper);
}
.cartd::backdrop { background: rgba(0, 0, 0, 0.6); }
.cartd[open] { animation: cartd-in 0.5s var(--ease-out); }
@keyframes cartd-in { from { transform: translate3d(24px, 0, 0); opacity: 0; } to { transform: none; opacity: 1; } }
.cartd-inner { display: flex; flex-direction: column; height: 100%; padding: var(--s-3) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom)); overflow-y: auto; }
.cartd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-1); }
.cartd-title:focus { outline: none; }
.cartd-title { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; }
.cartd-count { color: var(--steel); font-weight: 400; }
.cartd-close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; transition: opacity 0.3s; }
.cartd-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cartd-close:hover { opacity: 0.7; }
.cartd-added { font-size: 0.875rem; color: var(--steel-2); margin-bottom: var(--s-2); }
.cartd-added:empty { display: none; }
.cartd .cart-lines { flex: 1 1 auto; align-content: start; }
.cartd-foot { margin-top: var(--s-2); }
.cartd-foot[hidden] { display: none; }
.cartd-links { display: flex; justify-content: space-between; margin-top: var(--s-1); }
.cartd-links .text-link::after { bottom: 12px; }
.cart-open { overflow: hidden; }

/* ---- cart page */
.cartp { padding: calc(var(--nav-h) + var(--bar-h) + var(--s-4)) 0 var(--section); min-height: 70svh; }
.cartp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); row-gap: var(--s-3); align-items: start; }
.cartp-head { grid-column: 1 / -1; display: grid; gap: var(--s-2); }
.cartp-title { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.cartp-title:focus { outline: none; }
.cartp-lines { grid-column: 1 / span 7; }
.cartp-summary { grid-column: 9 / -1; position: sticky; top: calc(var(--nav-h) + var(--s-3)); display: grid; }
.cartp-summary[hidden] { display: none; }
.cart-continue { justify-self: center; margin-top: var(--s-1); }
.cartp .cart-line { grid-template-columns: 96px minmax(0, 1fr) auto; }
.cartp .cart-line-media img { width: 96px; height: 144px; }
@media (max-width: 900px) {
  .cartp-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .cartp-lines, .cartp-summary { grid-column: 1 / -1; position: static; }
}

/* ---- checkout (not open yet) */
.cop { padding: calc(var(--nav-h) + var(--bar-h) + var(--s-4)) 0 var(--section); min-height: 70svh; }
.cop-inner { display: grid; gap: var(--s-2); justify-items: start; max-width: 44rem; }
.cop-title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; margin-bottom: var(--s-1); }
.cop-body { color: var(--steel-2); max-width: 54ch; }
.cop-cart { width: 100%; margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); display: grid; gap: var(--s-1); }
.cop-cart[hidden] { display: none; }
.cop-lines li { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.cop-total { display: flex; justify-content: space-between; width: 100%; font-size: 0.9375rem; color: var(--steel-2); }
.cop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }

@media (min-width: 901px) {
  .pdp-media .gal-main {
    aspect-ratio: auto;
    height: clamp(420px, calc(100svh - var(--nav-h) - var(--bar-h) - 13rem), 720px);
  }
  .pdp-media .gal-img,
  .pdp-media .gal-slide--native .gal-img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
  }
  .pdp-media .gal-slide--native { display: block; }
}

/* ================================================================ STACK */
/* Each section holds while the next slides up over it (assets/js/stack.js).
   The covering section has a rounded top edge and a soft shadow; the one
   being covered dims and steps back a little. */
.stack.is-stacking > section {
  position: sticky;
  top: var(--stick, 0px);
  background: var(--black);
  transform-origin: 50% 0;
}
.stack.is-stacking > section + section {
  border-top-left-radius: clamp(18px, 2.4vw, 32px);
  border-top-right-radius: clamp(18px, 2.4vw, 32px);
  box-shadow: 0 -1px 0 var(--line-strong), 0 -30px 60px -20px rgba(0, 0, 0, 0.9);
}
.stack.is-stacking > section {
  scale: calc(1 - var(--cover, 0) * 0.04);
  filter: brightness(calc(1 - var(--cover, 0) * 0.55));
}
.stack.is-stacking > .sph { border-bottom: 0; }
/* Owner's direction: the opening (hero → Case) and the close (full
   specification → Project 2 / Preorder) scroll normally; only the middle
   chapters stack. */
.stack.is-stacking > .sph,
.stack.is-stacking > .specs-cta { position: relative; top: auto; scale: none; filter: none; border-radius: 0; box-shadow: none; }
.stack.is-stacking > #spec-case { border-radius: 0; box-shadow: none; }
.stack.is-stacking > .sheet-sec { position: relative; top: auto; scale: none; filter: none; }
/* Every stacked chapter fills at least the whole screen (as on Volaso), so
   the next one visibly rises over it at any window size — full-screen
   desktops included. Content is centred in the screen. */
.stack.is-stacking > .sf,
.stack.is-stacking > .story,
.stack.is-stacking > .tt,
.stack.is-stacking > .straps,
.stack.is-stacking > .drawings,
.stack.is-stacking > .prop {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stack.is-stacking > .tech--mechanical:not(.is-scene) { min-height: 100svh; }
.stack.is-stacking > .sf { border-bottom: 0; }
/* The 360 view keeps its centred column inside the stack. */
.stack.is-stacking > .tt { border-top: 0; align-items: center; }
.stack.is-stacking > .tt > * { width: 100%; }
.stack.is-stacking > .tt > .tt-controls { width: min(100% - 2 * var(--gutter), 760px); }

/* Spec features: smaller images (they were taller than the screen). */
@media (min-width: 901px) {
  .sf-visual { grid-column: 1 / span 4; aspect-ratio: 1 / 1; max-height: 64svh; }
  .sf--flip .sf-visual { grid-column: 9 / -1; }
  .sf-copy { grid-column: 6 / -1; }
  .sf--flip .sf-copy { grid-column: 1 / span 7; }
}
@media (min-width: 901px) {
  .prop-drawing { max-height: 62svh; margin-inline: auto; }
  .prop-side-img { max-height: 62svh; object-fit: cover; }
}
.sf-p { display: block; }
.sf-p + .sf-p { margin-top: var(--s-2); }

/* ================================================================ 360 VIEW */
/* Homepage: stage (dotted ring, photographs inside), strap arrows, night
   toggle, view track — one centred column. Behaviour: assets/js/view360.js. */

.tt {
  --stage-h: clamp(340px, calc(100svh - var(--nav-h) - 17rem), 640px);
  position: relative;
  display: grid;
  justify-items: center;
  padding: var(--section) 0;
  background: var(--black);
  isolation: isolate;
  border-top: 1px solid var(--line);
}
.tt-head { width: 100%; display: grid; justify-items: center; gap: var(--s-2); text-align: center; margin-bottom: var(--s-3); }
.v360-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-out);
  pointer-events: none;
}
.v360-frame.is-in { opacity: 1; transform: none; }
.v360-img { height: 100%; max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
/* Photographs (side, back) carry their own studio background: feathered
   into the stage. */
.v360-frame--photo .v360-img {
  height: 92%;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
}
.v360-cap { font-size: var(--t-small); color: var(--steel-2); text-align: center; min-height: 1.6em; }
.tt-step:disabled { opacity: 0.25; pointer-events: none; }

.tt-stage {
  position: relative;
  width: 100%;
  height: var(--stage-h);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.tt-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(236, 235, 230, 0.05), transparent 75%);
  transition: opacity 1.2s var(--ease-io);
}
.tt-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(80vw, calc(var(--stage-h) * 0.82));
  height: auto;
  transform: translate(-50%, -50%);
  fill: var(--paper);
  opacity: 0.6;
  transition: fill 1.2s var(--ease-io), opacity 1.2s var(--ease-io);
}
.tt-media { position: absolute; inset: 0; }

/* Night: the stage cools and the ring takes the lume colour. */
.tt[data-mode='night'] .tt-ring { fill: var(--lume); opacity: 0.5; }
.tt[data-mode='night'] .tt-glow { background: radial-gradient(closest-side, rgba(33, 230, 236, 0.07), transparent 75%); }

.tt-controls {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  width: min(100% - 2 * var(--gutter), 760px);
  margin-top: var(--s-2);
}

/* Night toggle centred; strap arrows at the right of the same row. */
.tt-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}
.tt-night {
  grid-column: 2;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: var(--paper);
  transition: border-color 0.3s, transform 0.4s var(--ease-spring);
}
.tt-night svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tt-sun { display: none; }
.tt-night[aria-pressed='true'] .tt-moon { display: none; }
.tt-night[aria-pressed='true'] .tt-sun { display: block; }
.tt-night:hover { border-color: var(--paper); }
.tt-night:active { transform: scale(0.94); }
.tt-night:focus-visible { outline-offset: 4px; }

.tt-colour { grid-column: 3; justify-self: end; display: flex; align-items: center; }
.tt-step { display: grid; place-items: center; width: 44px; height: 44px; color: var(--paper); transition: opacity 0.3s, transform 0.3s var(--ease-spring); }
.tt-step svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tt-step:hover { opacity: 0.7; }
.tt-step:active { transform: scale(0.88); }
/* The strap, drawn: an upright rounded outline filled with its colour. */
.tt-strap {
  width: 20px;
  height: 38px;
  border: 2px solid var(--paper);
  border-radius: 10px;
  background: color-mix(in srgb, var(--strap) 70%, transparent);
  transition: background-color 0.5s var(--ease-out);
}

/* View track: four labels over a line with an oval marker each. */
.tt-views {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  width: 100%;
}
.tt-track {
  position: absolute;
  left: calc(100% / var(--n) / 2);
  right: calc(100% / var(--n) / 2);
  bottom: 21px;
  height: 1px;
  background: var(--line-strong);
}
.tt-view {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding-top: 6px;
  min-height: 44px;
  color: var(--steel);
  transition: color 0.4s var(--ease-out);
}
.tt-view-label { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.tt-view-mark {
  width: 28px;
  height: 16px;
  margin-bottom: 13px;
  border: 1.5px solid var(--steel);
  border-radius: 50%;
  background: var(--black);
  transition: border-color 0.4s var(--ease-out), border-width 0.3s;
}
.tt-view:hover { color: var(--paper); }
.tt-view[aria-pressed='true'] { color: var(--paper); }
.tt-view[aria-pressed='true'] .tt-view-mark { border-color: var(--paper); border-width: 3.5px; }
.tt-view:focus-visible { outline-offset: 2px; }


@media (max-width: 760px) {
  .tt { --stage-h: clamp(300px, 112vw, 480px); }
  /* Strap arrows on their own line at the right, the night toggle under them. */
  .tt-row { grid-template-columns: 1fr; row-gap: var(--s-1); }
  .tt-colour { grid-column: 1; grid-row: 1; justify-self: end; margin-right: -10px; }
  .tt-night { grid-column: 1; grid-row: 2; justify-self: center; width: 52px; height: 52px; }
  .tt-view-label { font-size: 0.6875rem; letter-spacing: 0.12em; }
}
@media (max-width: 360px) {
  .tt-view-label { font-size: 0.625rem; letter-spacing: 0.08em; }
}

/* ================================================================== STRAPS */
/* The seven straps on the carbon case, a horizontal row that runs to the
   page edge; the name sits on a short rule in the strap's colour. */

.straps { padding-block: var(--section) var(--s-6); border-top: 1px solid var(--line); overflow: hidden; }
.straps-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
  row-gap: var(--s-3);
  align-items: end;
}
.straps-head > div { grid-column: 1 / span 6; display: grid; gap: var(--s-3); }
.straps-body { grid-column: 8 / -1; color: var(--steel-2); max-width: 40ch; }
.straps-row {
  display: flex;
  gap: clamp(8px, 1.4vw, 20px);
  margin-top: var(--s-5);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.straps-row::-webkit-scrollbar { display: none; }
.straps-row:focus-visible { outline-offset: -4px; }
.straps-item { flex: 0 0 clamp(150px, 13.2vw, 220px); scroll-snap-align: start; }
.straps-media {
  aspect-ratio: 2 / 3;
  -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 16%, #000 84%, transparent 98%);
  mask-image: linear-gradient(180deg, transparent 2%, #000 16%, #000 84%, transparent 98%);
}
.straps-img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.18); transition: transform 0.8s var(--ease-out); }
.straps-link { display: block; -webkit-tap-highlight-color: transparent; }
.straps-link:hover .straps-img, .straps-link:focus-visible .straps-img { transform: scale(1.24); }
.straps-link:hover .straps-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--c); }
.straps-link:active .straps-img { transform: scale(1.14); }
.straps-link:focus-visible { outline-offset: 4px; }
/* Wide screens: all seven straps in one row, inside the page margins. */
@media (min-width: 901px) {
  .straps-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    max-width: var(--max);
    margin-inline: auto;
    overflow: visible;
    scroll-snap-type: none;
  }
  .straps-item { min-width: 0; }
}
.straps-item figcaption {
  display: grid;
  gap: 2px;
  margin-top: var(--s-2);
  padding-top: 12px;
  border-top: 2px solid var(--c);
}
.straps-name { font-size: 1rem; letter-spacing: -0.01em; }
.straps-colour { font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }
.straps-foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-3);
  row-gap: var(--s-3);
  align-items: end;
  margin-top: var(--s-5);
}
.straps-spec { grid-column: 1 / span 7; margin-top: 0; }
.straps-foot .text-link { grid-column: 9 / -1; justify-self: start; }
@media (max-width: 900px) {
  .straps-head > div, .straps-body, .straps-spec, .straps-foot .text-link { grid-column: 1 / -1; }
}
.straps-stage { position: relative; }
.straps-hint { display: none; }
@media (max-width: 760px) {
  .straps-item { flex-basis: 42vw; }
  /* Swipe hint: an arrow at the right edge, pointing on. */
  .straps-hint {
    display: block;
    position: absolute;
    right: calc(var(--gutter) - 4px);
    top: 34%;
    z-index: 2;
    pointer-events: none;
    padding: 10px 6px;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent);
    transition: opacity 0.5s var(--ease-out);
  }
  .straps-hint .drag-arrow { width: 48px; animation: arrow-point 1.4s var(--ease-io) infinite; }
  .straps-hint.is-done { opacity: 0; }
  .straps-row { margin-top: var(--s-4); }
}

/* ========================================================== HOME REVIEWS */
.ab-says--home { border-top: 0; }
.ab-says-meta .text-link { margin-top: var(--s-1); }
/* Homepage: the sliding row on its own. */

/* =============================================================== CONFIGURE */
/* The configurator (client reference, 2026-10-08): a black stage, the watch
   large in the centre, the seven straps as colour dots on a curved path
   beside it, the chosen strap's name as the title, then price and BUY NOW.
   Dot positions are trigonometry on --i (0–6) around the stage centre. */

.cfg { position: relative; padding-bottom: var(--s-6); }
.cfg-noscript { padding-block: calc(var(--nav-h) + var(--bar-h) + var(--s-3)) var(--s-3); color: var(--steel-2); }
.cfg-step { scroll-margin-top: calc(var(--nav-h) + var(--s-2)); }

.cfx {
  --stage-h: clamp(300px, calc(100svh - var(--nav-h) - var(--bar-h) - 24rem), 680px);
  --r: calc(var(--stage-h) * 0.47);
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 100svh;
  padding: calc(var(--nav-h) + var(--bar-h) + var(--s-3)) var(--gutter) var(--s-4);
  background: #000;
  isolation: isolate;
  overflow: hidden;
}

.cfx-head { display: grid; justify-items: center; gap: 10px; text-align: center; }
.cfx-title { font-size: clamp(1.75rem, 2.6vw, 2.6rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; }
.cfx-sub { font-size: var(--t-body); color: var(--steel-2); }
/* The chosen strap, named under the watch. */
.cfx-pick { display: grid; justify-items: center; gap: 8px; margin-top: var(--s-2); text-align: center; }
.cfx-detail { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4em 0.9em; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel-2); }
.cfx-detail-sep { width: 18px; height: 1px; background: var(--line-strong); }
.cfx-detail [data-cfx-strap] { display: inline-block; color: var(--paper); }
.cfx-detail [data-cfx-strap].is-changing, .cfx-name.is-changing span { animation: cfx-name 0.7s var(--ease-out); }
.cfx-name {
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  min-height: 1em;
}
.cfx-name span { display: inline-block; }
.cfx-name span.is-changing { animation: cfx-name 0.7s var(--ease-out); }
@keyframes cfx-name {
  from { opacity: 0; transform: translate3d(0, 0.35em, 0); }
  to { opacity: 1; transform: none; }
}

/* The stage: the watch, and the strap dots under it. */
.cfx-stage { position: relative; display: grid; grid-template-rows: var(--stage-h) auto; width: 100%; margin-top: var(--s-1); }
.cfx-watch { position: relative; height: var(--stage-h); }
/* Lighting: an overhead spotlight falling on the watch, a halo behind it
   tinted by the chosen strap, a soft pool of light on the "floor" and fine
   grain, so the stage reads as a lit studio rather than a flat black. */
@property --glow { syntax: '<color>'; inherits: true; initial-value: #1b1b1c; }
.cfx { transition: --glow 0.9s var(--ease-out); }
.cfx::before,
.cfx::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.cfx::before {
  background:
    radial-gradient(ellipse 22% 62% at 50% -6%, rgba(236, 238, 245, 0.11), transparent 72%),
    radial-gradient(ellipse 46% 58% at 50% 56%, rgba(110, 120, 140, 0.13), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.85) 100%);
}
.cfx::after {
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cfx-watch::before,
.cfx-watch::after {
  content: '';
  position: absolute;
  left: 50%;
  pointer-events: none;
}
.cfx-watch::before {
  top: 50%;
  width: calc(var(--stage-h) * 1.05);
  height: calc(var(--stage-h) * 1.05);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(205, 212, 226, 0.16), transparent 62%),
    radial-gradient(closest-side, color-mix(in srgb, var(--glow) 30%, transparent), transparent 100%);
}
.cfx-watch::after {
  bottom: -2%;
  width: calc(var(--stage-h) * 0.62);
  height: calc(var(--stage-h) * 0.09);
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(225, 230, 240, 0.13), transparent);
}
.cfg-shot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-out);
}
.cfg-shot.is-in { opacity: 1; transform: none; }
.cfg-shot-img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(180deg, transparent 1%, #000 14%, #000 86%, transparent 99%);
  mask-image: linear-gradient(180deg, transparent 1%, #000 14%, #000 86%, transparent 99%);
}

/* Case finishes (owner's brief, 2026-10-09): real swatches of the eight
   cases on a curved column to the left of the watch — the counterpart of the
   strap row. The chosen one slides to the middle and is the largest; the
   others follow the curve towards the watch (--k = distance from it). */
.cfx-cases {
  --sp: clamp(40px, calc(var(--stage-h) / 9), 56px);
  --D: 26px;
  position: absolute;
  top: 0;
  left: calc(50% - var(--stage-h) * 0.36 - 40px);
  width: 64px;
  height: var(--stage-h);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  z-index: 2;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}
.cfx-case {
  --k: calc(var(--i) - var(--sel));
  --ak: max(var(--k), calc(var(--k) * -1));
  position: absolute;
  left: 10px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  transform: translate3d(calc(var(--D) * var(--k) * var(--k) / 16), calc(var(--k) * var(--sp)), 0);
  transition: transform 0.75s var(--ease-out);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cfx-case input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cfx-case-mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(236, 235, 230, 0.3);
  transform: scale(calc(1 - var(--ak) * 0.06));
  transition: transform 0.6s var(--ease-spring), box-shadow 0.4s var(--ease-out);
}
.cfx-case-mark img { width: 100%; height: 100%; object-fit: cover; }
.cfx-case-n {
  position: absolute;
  right: calc(100% + 4px);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--steel);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.cfx-case:hover .cfx-case-mark { transform: scale(1.15); }
.cfx-case:active .cfx-case-mark { transform: scale(0.92); }
.cfx-case:has(input:checked) .cfx-case-mark { transform: scale(1.5); box-shadow: 0 0 0 1.5px #000, 0 0 0 2.5px var(--paper); }
.cfx-case:has(input:checked) .cfx-case-n { opacity: 1; right: calc(100% + 12px); }
.cfx-case:has(input:focus-visible) { outline: 2px solid var(--paper); outline-offset: 2px; border-radius: 50%; }

/* Strap dots (client direction, 2026-10-08): a curved row under the watch.
   The chosen strap slides to the centre, directly under the watch, and is the
   largest; the others sit along the curve either side (--k = distance from
   the chosen one, set through --sel by configurator.js). */
.cfx-dots {
  --sp: clamp(30px, calc((50vw - 14px) / 6), 56px);
  --D: 64px;
  position: relative;
  width: 100%;
  height: calc(var(--D) + 40px);
  margin: calc(var(--D) * -0.6) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.cfx-arc {
  position: absolute;
  left: 50%;
  top: 12px;
  width: calc(var(--sp) * 12);
  height: var(--D);
  overflow: visible;
  transform: translateX(-50%);
  fill: none;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}
.cfx-arc path { stroke: rgba(236, 235, 230, 0.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cfx-dot {
  --k: calc(var(--i) - var(--sel));
  --ak: max(var(--k), calc(var(--k) * -1));
  position: absolute;
  left: 50%;
  top: calc(12px + var(--D));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  transform: translate3d(calc(var(--k) * var(--sp)), calc(var(--D) * var(--k) * var(--k) / -36), 0);
  transition: transform 0.75s var(--ease-out);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cfx-dot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cfx-dot-mark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1px rgba(236, 235, 230, 0.28);
  transform: scale(calc(1 - var(--ak) * 0.05));
  transition: transform 0.6s var(--ease-spring), box-shadow 0.4s var(--ease-out);
}
.cfx-dot:hover .cfx-dot-mark { transform: scale(1.2); }
.cfx-dot:active .cfx-dot-mark { transform: scale(0.9); }
.cfx-dot:has(input:checked) .cfx-dot-mark {
  transform: scale(1.9);
  box-shadow: 0 0 0 1.5px #000, 0 0 0 2.5px var(--paper), 0 0 16px 2px color-mix(in srgb, var(--c) 35%, transparent);
}
.cfx-dot:has(input:focus-visible) { outline: 2px solid var(--paper); outline-offset: 2px; border-radius: 50%; }

/* Price, ADD TO CART (white box) and VIEW CART (underlined text). */
.cfx-buy { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-3); }
.cfx-actions { display: flex; align-items: center; gap: var(--s-3); }
.cfx-viewcart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  padding-inline: 2px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: opacity 0.3s var(--ease-out);
}
.cfx-viewcart:hover { opacity: 0.72; }
.cfx-viewcart:active { opacity: 0.5; }
.cfx-viewcart:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; border-radius: 4px; }
.cfx-viewcart-n { color: var(--steel-2); }
.cfg-add .btn-label { min-width: 7.5em; text-align: center; }
.cfg-add.is-added .btn-label { transform: none; }
/* "Watch 2 added to your cart: …" — in place, so the next P2 can follow. */
/* The details of what was added, for screen readers (the toast and the
   button's "Added" show it on screen). */
.cfx-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cfx-status.is-in { animation: cfx-status 0.6s var(--ease-out); }
@keyframes cfx-status {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: none; }
}

/* TRY ON: top left of the strap stage, where tools conventionally sit. */
.cfx-tools { position: absolute; top: calc(var(--nav-h) + var(--bar-h) + var(--s-3)); left: 0; right: 0; z-index: 2; pointer-events: none; }
.cfx-tryon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 1rem 0 0.8rem;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  background: rgba(10, 11, 12, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  pointer-events: auto;
  transition: transform 0.5s var(--ease-spring), box-shadow 0.3s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.cfx-tryon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.cfx-tryon:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--paper); }
.cfx-tryon:active { transform: scale(0.97); }
.cfx-tryon:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.cfx-price { display: flex; align-items: baseline; gap: 0.4em; font-size: clamp(1.6rem, 2.2vw, 2.1rem); font-weight: 400; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cfx-price span { font-size: var(--t-label); letter-spacing: 0.14em; color: var(--steel); }
.cfg-add { flex: none; min-width: 11rem; }
.cfx-links { display: flex; gap: var(--s-3); margin-top: var(--s-1); }
.cfx-links .text-link { color: var(--steel-2); }
.cfx-links .text-link:hover { color: var(--paper); }

/* The strap, drawn: an upright rounded band in its colour (used on /compare/). */
.cfg-swatch-chip {
  width: 34px;
  height: 64px;
  border-radius: 17px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 35%, transparent 65%, rgba(0, 0, 0, 0.22)),
    var(--c);
  box-shadow: 0 0 0 1px rgba(236, 235, 230, 0.14) inset, 0 10px 20px -12px rgba(0, 0, 0, 0.9);
  transition: transform 0.5s var(--ease-spring);
}

/* Phones: the dots on a gentle curve under the watch ("∪"), the price and
   BUY NOW side by side, everything in one screen. */
@media (max-width: 760px) {
  .cfx {
    --stage-h: clamp(230px, calc(100svh - var(--nav-h) - var(--bar-h) - 27.5rem), 460px);
    --R: 150vw;
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + var(--bar-h) + var(--s-2) + 52px);
    padding-bottom: var(--s-3);
  }
  .cfx-title { font-size: clamp(1.7rem, 8.4vw, 2.3rem); }
  .cfx-sub { font-size: 0.8125rem; }
  .cfx-head { gap: 6px; }
  .cfx-pick { margin-top: 0; gap: 6px; }
  .cfx-name { font-size: clamp(1.4rem, 7vw, 1.9rem); }
  .cfx-tools { top: calc(var(--nav-h) + var(--bar-h) + var(--s-2)); }
  .cfx-tryon { min-height: 40px; padding: 0 0.8rem 0 0.65rem; }
  .cfx-dots { --D: 52px; }
  .cfx-dot-mark { width: 15px; height: 15px; }
  .cfx-buy { width: 100%; flex-direction: column; gap: 10px; margin-top: var(--s-2); }
  .cfx-actions { width: 100%; gap: var(--s-2); }
  .cfg-add { flex: 1; min-width: 0; min-height: 52px; }
  .cfx-status { margin-top: 10px; }
  .cfx-links { margin-top: 4px; }
}



/* Cart lines: watch number and the case's atmosphere behind its image. */
.cart-line-n { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }
.cart-line--watch .cart-line-qty { justify-content: flex-end; }
.cart-line--strap .cart-line-media img { object-position: 50% 15%; }
.cart-line--watch .cart-line-qty { gap: var(--s-3); }
.cart-line-edit { min-height: 44px; display: inline-flex; align-items: center; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--steel); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: color 0.3s; }
.cart-line-edit:hover { color: var(--paper); }
.cart-line-edit:active { opacity: 0.6; }
.cart-line-edit:focus-visible, .cart-line-remove:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* ============================================================ MOBILE LAYER */
/* Phones are composed here rather than squeezed from desktop. Everything in
   this block sits inside a max-width query, so desktop is untouched.

   Breakpoints (shared with the rest of the file):
     ≤ 900px   tablet / large phone landscape: single-column page layouts
     ≤ 760px   phones: mobile composition, rhythm and touch targets
     ≤ 380px   small phones (320–375): tighter display type

   Tokens: --section (vertical rhythm) and --t-label (tracked uppercase
   labels, 11px → 12px) are redefined for phones; components read them. */

@media (max-width: 900px) {
  /* Product page: the 12-column grid's 40px gutters alone need 440px, which
     pushed the page wider than a phone. One column below tablet width. */
  .pdp-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
}

@media (max-width: 760px) {
  :root {
    --section: clamp(3.75rem, 17vw, 5rem);
    --t-label: 0.75rem;
  }

  /* ---------------------------------------------------------- touch targets */
  /* 44×44 minimum. Where the visual must stay small (hairline links in the
     trust bar), the hit area grows invisibly instead. */
  .tbar { overflow: visible; }
  .tbar-link { padding: 0; }
  .tbar-link::before { content: ''; position: absolute; inset: -6px -10px; }
  .tbar-close { width: 44px; height: 44px; margin-top: -22px; right: calc(var(--gutter) - 14px); z-index: 1; }
  .crumbs a, .crumbs [aria-current] { padding: 13px 0; }
  .btn--sm { min-height: 44px; padding: 0 1.25rem; font-size: 0.75rem; }
  .text-link { min-height: 44px; }
  .mnav-social { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .gal-thumb { min-width: 56px; min-height: 56px; }
  .qty-btn { width: 44px; height: 44px; }
  /* iOS zooms into any field under 16px when it is focused. */
  .qty-input { font-size: 1rem; }
  .lg-toc-m .lg-toc-list a { min-height: 44px; display: flex; align-items: center; }

  /* ----------------------------------------------------------- navigation */
  .nav-toggle { height: 48px; padding: 0 12px; margin-right: -12px; gap: 14px; }
  .nav-toggle-icon { width: 24px; }
  .mnav {
    opacity: 0;
    transition: opacity 0.45s var(--ease-out);
    padding-top: var(--s-3);
  }
  .nav.is-open .mnav { opacity: 1; }
  .mnav-links li { border-bottom-color: var(--line); }
  .mnav-links li:first-child { border-top: 1px solid var(--line); }
  .mnav-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0.3em 0;
    font-size: clamp(2rem, 10.5vw, 2.75rem);
    line-height: 1.1;
  }
  /* The case's octagon, as the row marker: drawn, not an icon font. */
  .mnav-links a::after {
    content: '';
    flex: none;
    width: 10px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2.7.5h4.6L9.5 2.7v6.6L7.3 11.5H2.7L.5 9.3V2.7z' fill='none' stroke='%238b8e94'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .mnav-links a[aria-current]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2.7.5h4.6L9.5 2.7v6.6L7.3 11.5H2.7L.5 9.3V2.7z' fill='%23ecebe6' stroke='%23ecebe6'/%3E%3C/svg%3E"); }
  .mnav-links a[aria-current] { color: var(--paper); }
  .mnav-links a:not([aria-current]) { color: var(--steel-2); }
  .mnav-links a:focus-visible { outline-offset: -2px; }
  .mnav-foot .btn { min-height: 54px; }

  /* ------------------------------------------------------------------ hero */
  /* Stacked: wordmark, the watch tucked under the lettering, then the copy.
     The wordmark is lit here (on desktop the watch carries the light). */
  .hero-word > span > span {
    background: linear-gradient(180deg, #f2f1ec 0%, #a9acb2 58%, #4b4e54 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .hero-word { font-size: 21vw; }
  .hero-watch { height: clamp(330px, calc(100svh - 300px), 128vw); margin-top: -10vw; }
  .hero-copy { padding-top: var(--s-1); }
  .hero-title { font-size: clamp(1.4rem, 6.2vw, 1.95rem); }
  .hero-ctas { gap: 10px; }
  .hero-ctas .btn { min-height: 50px; font-size: 0.72rem; }

  /* ----------------------------------------------------------------- story */
  .story { padding-block: var(--section) var(--s-4); }
  .story-grid { row-gap: var(--s-3); }
  /* Copy first: the hero has just shown the watch. */
  .story-figure { grid-row: auto; grid-column: 2 / span 10; }
  .story-frame { max-height: 50svh; }
  .story-links { gap: 0 var(--s-3); }
  .pillars-sec { padding-block: var(--s-5) var(--s-4); }

  /* ----------------------------------------------------------------- stats */
  .stats { padding-block: var(--s-4) var(--s-5); }
  .stats-title { margin-bottom: var(--s-2); }

  /* ------------------------------------------------------------------ case */
  .case-sticky { padding-block: var(--s-5) var(--section); }
  .case-stage { width: min(82%, 380px); margin-bottom: var(--s-3); }
  .case-copy { gap: var(--s-3); }
  .case-copy .h-xl { font-size: clamp(2rem, 9.5vw, 2.6rem); }
  .idea { grid-template-columns: 40px 1fr; gap: var(--s-2); }
  .idea-glyph { width: 40px; height: 40px; }
  .idea-title { font-size: 1.25rem; }

  /* -------------------------------------------------------------- material */
  .tech--material .tech-copy { padding-bottom: var(--s-5); }
  .tech-body { max-width: 34ch; }

  /* ------------------------------------------------------------- day/night */
  .dn { padding-block: var(--s-5) var(--s-4); }
  .dn-head { gap: var(--s-2); margin-bottom: var(--s-2); }
  .dn-head .h-xl { font-size: clamp(1.8rem, 8.4vw, 2.4rem); }
  .dn-stage { width: min(100% - 2 * var(--gutter), calc((100svh - 220px) * 2 / 3), 440px); }
  /* The two ends become a clear labelled switch under the watch rather than
     small words in its corners, so the control never sits on the product. */
  .dn-end {
    top: 100%;
    bottom: auto;
    min-width: 44px;
    min-height: 44px;
    margin-top: 4px;
    padding: 0 4px;
    font-size: var(--t-label);
  }
  .dn-end--day { left: 0; }
  .dn-end--night { right: 0; }
  .dn-stage { margin-bottom: 52px; }

  /* ------------------------------------------------------------ mechanical */
  .tech--mechanical .tech-copy { padding-bottom: var(--s-5); }

  /* ------------------------------------------------------------ collection */
  .carousel { padding-block: var(--section) var(--s-5); }
  .carousel-head { grid-template-columns: 1fr auto; align-items: end; }
  /* Swipe is primary; the arrows stay reachable beside the heading, never
     over a watch. Dots give way to a counter: eight 44px targets don't fit. */
  .carousel-arrows { display: flex; gap: 4px; margin-right: -4px; }
  .arrow-btn { width: 44px; height: 44px; --cut: 10px; }
  .arrow-btn svg { width: 18px; height: 18px; }
  .carousel-track { margin-top: var(--s-3); }
  .pager-dot { display: none; }
  .pager-count { margin-left: 0; font-size: 0.8125rem; }
  .carousel-foot { gap: var(--s-2); }
  .ci-name { font-size: 1.75rem; }
  .ci-actions .btn--sm { min-width: 128px; }

  /* ---------------------------------------------------------- product page */
  .gal-main { margin-inline: calc(var(--gutter) * -1); }
  .pdp-sticky { gap: var(--s-2); }
  .pdp-title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .pdp .btn--block { min-height: 56px; }

  /* Specification lists: label and value side by side, half the height. */
  .sheet-row,
  .sheet--compact .sheet-row { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-2); padding: 0.8rem 0; }
  .sheet--numbered .sheet-row { grid-template-columns: 2rem minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .sheet--numbered dd { grid-column: auto; }
  .sheet dt { line-height: 1.5; }
  .sheet dd, .sheet--compact dd { font-size: 0.9375rem; }

  /* ------------------------------------------------------------ specs page */
  .sph { padding-bottom: var(--s-4); }
  .sph-watch { grid-column: 1 / -1; width: min(62%, 280px); max-height: 46svh; }
  .sph-grid { row-gap: var(--s-3); }
  .sf { padding-block: var(--s-5); }
  .sf-grid { row-gap: var(--s-3); }
  .sf-visual, .sf--flip .sf-visual { aspect-ratio: 1 / 1; }
  /* Figures as a two-up register instead of a one-per-line list. */
  .sf-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-2); }
  .sf-rows > div { grid-template-columns: 1fr; gap: 4px; padding: 0.8rem 0; }
  .sf-rows dd { font-size: 0.9375rem; }
  .instruments--specs .inst { padding: var(--s-2); }
  .instruments--specs .inst-value { font-size: clamp(1.5rem, 7.5vw, 2rem); }
  .instruments--specs .inst-value--word { font-size: clamp(1.1rem, 5.4vw, 1.4rem); }
  .drawings { padding-block: var(--s-5); }
  .drawings-grid { align-items: stretch; }
  .sheet-plate--side, .sheet-plate--back { align-self: start; }
  .sheet-sec { padding-block: var(--s-5); }
  .specs-cta { padding-block: var(--s-4); }
  .specs-cta .btn { min-height: 52px; }

  /* -------------------------------------------------------------- 360 view */
  .v3-mode-btn { min-height: 44px; min-width: 96px; }
  .v3-icon { width: 44px; height: 44px; }
  .v3-controls { gap: var(--s-1); padding-inline: var(--gutter); }

  /* ----------------------------------------------------------------- about */
  .ab-hero { padding-block: calc(var(--nav-h) + var(--bar-h) + var(--s-3)) var(--s-5); }
  .ab-hero .crumbs { margin-bottom: var(--s-4); }
  .ab-hero-title { font-size: clamp(2.1rem, 10vw, 3.4rem); max-width: none; }
  .ab-split { padding-block: var(--s-5); }
  .ab-split-grid { row-gap: var(--s-4); }
  .ab-title { font-size: clamp(2rem, 9.6vw, 2.8rem); }
  .ab-body { max-width: 36ch; }
  /* Mission: image leads into the copy; the rules section keeps copy first,
     then the drawings as evidence. */
  .ab-figure--macro { order: -1; }
  .ab-macro { aspect-ratio: 4 / 3; margin-inline: calc(var(--gutter) * -1); }
  .ab-figure--macro .fig-cap { margin-top: 0.75rem; }
  .ab-people { padding-block: var(--s-5); }
  .ab-people-head { margin-bottom: var(--s-4); }
  .ab-says { padding-block: var(--s-5); }
  .ab-says-head { margin-bottom: var(--s-3); }

  /* Testimonials: one message at a time, swiped, with the next peeking in —
     twelve stacked quotes were a long scroll on a phone. */
  .ab-dms {
    display: flex;
    columns: auto;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding: var(--s-3) var(--gutter) var(--s-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .ab-dms::-webkit-scrollbar { display: none; }
  .ab-quotes { gap: 12px; }
  .ab-q { flex-basis: 84%; }
  .ab-q p { font-size: 1.125rem; line-height: 1.45; }
  .ab-quote-lead { padding: var(--s-3) 0 var(--s-2); }
  .ab-quote-lead p { font-size: clamp(1.6rem, 7.4vw, 2.1rem); line-height: 1.16; }
  .ab-dms li { flex: 0 0 88%; scroll-snap-align: start; margin: 0; }
  .ab-originals summary { min-height: 52px; }

  /* The closing statement: the page's one large editorial line. */
  .ab-end { padding-block: var(--s-6) calc(var(--s-6) + var(--s-2)); }
  .ab-end-line { font-size: clamp(2.6rem, 13.4vw, 3.9rem); letter-spacing: -0.05em; line-height: 0.98; max-width: none; }

  /* ---------------------------------------------------------------- footer */
  .foot { padding-block: var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); }
  .foot-grid { gap: var(--s-3); }
  .foot-id { grid-auto-flow: column; justify-content: space-between; align-items: center; }
  .foot-logo { display: flex; align-items: center; min-height: 48px; }
  .foot-links { gap: 0; border-top: 1px solid var(--line); }
  .foot-links a { display: flex; align-items: center; min-height: 52px; padding: 0; border-bottom: 1px solid var(--line); }
  .foot-end { grid-auto-flow: column; justify-content: space-between; }
  .foot-legal { margin-top: var(--s-2); padding-top: var(--s-1); }
  .foot-legal-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-2); }
  .foot-legal-list a, .foot-legal-list button { min-height: 44px; font-size: 0.8125rem; text-align: left; }

  /* --------------------------------------------------------- cookie banner */
  /* Stacked, full-width, equal-weight choices — never squeezed to two lines. */
  .cc { gap: 10px; padding: var(--s-3) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom)); }
  .cc-text { font-size: 0.875rem; line-height: 1.55; }
  .cc-actions { grid-template-columns: 1fr; gap: 8px; }
  .cc-btn { min-height: 48px; font-size: 0.75rem; }
  .cc-manage { min-height: 44px; }
  .ccp-actions { grid-template-columns: 1fr; }
  .ccp-close { width: 44px; height: 44px; }
  .ccp .cc-btn--solid { grid-column: auto; }

  /* ----------------------------------------------------------------- legal */
  .lg-head { padding-bottom: var(--s-4); }
  .lg-prose { max-width: 38em; }
  .lg-table thead th, .lg-table td::before { font-size: var(--t-label); }
}

/* Small phones (320–375): keep display type dramatic without breaking words. */
@media (max-width: 380px) {
  :root { --gutter: 18px; }
  .hero-ctas .btn { padding: 0 0.5rem; font-size: 0.6875rem; letter-spacing: 0.1em; }
  .hero-title { font-size: 1.45rem; }
  .ci-actions { gap: var(--s-2); }
  .ab-q { flex-basis: 88%; }
  .instruments--specs .inst-value--word { font-size: 1.05rem; }
  .v3-mode-btn { min-width: 82px; padding: 0 0.8rem; }
}

/* Touch devices: nothing depends on hover. Hover-only emphasis on the
   day/night knob is shown permanently so the control reads as draggable. */
@media (hover: none) {
  .dn-knob { transform: translate(-50%, -50%) scale(1.06); }
}

/* ========================================================= IMAGE LIBRARY */
/* Supplied product photographs (src/data/media.js → library). They are
   small files, so they are shown at no more than their own width. */

img[data-native] { max-width: min(100%, var(--native-w)); }

.gal-slide--native { display: grid; place-items: center; }
.gal-slide--native .gal-img { width: auto; height: auto; max-height: 92%; max-width: min(92%, var(--native-w)); outline: 1px solid var(--line); }




/* ============================================================ PHONE SCENES */
/* Choreography for assets/js/scenes.js (see MOTION.md). Each block applies
   only while its scene is live (.is-scene: phones, motion allowed), so
   desktop, tablet and reduced motion keep the normal layout. Every effect
   is opacity / transform / clip on a sticky element, keyed to --p. */


.hero-stage { display: contents; }
.hero-facts,
.material-watch { display: none; }

@media (max-width: 760px) {
  /* ---- 1. Hero → the case. The hero holds; the watch moves forward into
     its case, the words step back, three case facts arrive, the frame
     darkens into the story. */
  .hero.is-scene { height: 190svh; min-height: 0; display: block; padding-top: 0; overflow: clip; }
  .hero.is-scene .hero-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--nav-h) + var(--bar-h) + 2svh);
    overflow: hidden;
  }
  .hero.is-scene .hero-watch {
    transform: translate3d(0, calc(var(--p, 0) * -15svh), 0) scale(calc(1 + var(--p, 0) * 0.6));
    transform-origin: 50% 46%;
  }
  .hero.is-scene .hero-word { opacity: calc(1 - var(--p, 0) * 2.4); transform: translate3d(0, calc(var(--p, 0) * -7svh), 0); }
  .hero.is-scene .hero-copy { opacity: calc(1 - var(--p, 0) * 3.2); transform: translate3d(0, calc(var(--p, 0) * 5svh), 0); }
  .hero.is-scene .hero-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.82) 78%, #000 100%);
    opacity: clamp(0, (var(--p, 0) - 0.3) * 2.2, 1);
  }
  .hero.is-scene .hero-facts {
    display: grid;
    gap: 0.25rem;
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(2.5rem + env(safe-area-inset-bottom));
    z-index: 4;
    pointer-events: none;
  }
  .hero-facts li {
    font-size: clamp(1.55rem, 7.6vw, 2.2rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.12;
    --in: clamp(0, (var(--p, 0) - var(--at)) * 7, 1);
    opacity: var(--in);
    transform: translate3d(0, calc((1 - var(--in)) * 14px), 0);
  }
  .hero-facts li:nth-child(1) { --at: 0.42; }
  .hero-facts li:nth-child(2) { --at: 0.54; color: var(--steel-2); }
  .hero-facts li:nth-child(3) { --at: 0.66; color: var(--steel-2); }

  /* ---- 2. The case. Pinned (assets/js/case.js, .is-pinned-m): the watch
     turns and the octagon traces; one idea at a time; the last third scrubs
     Heaven & Earth from the square of Earth to the circle of Heaven. */
  .case.is-pinned-m .case-track { height: 200svh; }
  .case.is-pinned-m .case-sticky {
    position: sticky;
    top: var(--nav-h);
    height: calc(100svh - var(--nav-h));
    padding-block: var(--s-2) var(--s-3);
    display: flex;
  }
  .case.is-pinned-m .case-grid { display: flex; flex-direction: column; width: 100%; height: 100%; }
  .case.is-pinned-m .case-copy { display: contents; }
  .case.is-pinned-m .case-copy .sh { order: 0; gap: var(--s-1); }
  .case.is-pinned-m .case-copy .h-xl { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .case.is-pinned-m .case-stage { order: 1; flex: 1 1 0; min-height: 0; width: auto; height: auto; max-width: 100%; aspect-ratio: 2 / 3; margin: var(--s-1) auto; }
  .case.is-pinned-m .case-ideas { order: 2; display: grid; min-height: 8.5rem; }
  .case.is-pinned-m .idea {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out);
  }
  .case.is-pinned-m .idea.is-on:not(.is-current) { transform: translate3d(0, -18px, 0); }
  .case.is-pinned-m .idea.is-current { opacity: 1; transform: none; }
  .case.is-pinned-m .case-ideas::after {
    content: '';
    grid-area: 1 / 1;
    align-self: start;
    height: 1px;
    background: var(--paper);
    transform-origin: left;
    transform: scaleX(var(--p, 0));
  }

  /* ---- 3. Material. The whole watch, then the view moves into the case
     corner until the real carbon fills the screen; the copy rises over it. */
  .tech--material.is-scene { display: block; min-height: 0; overflow: clip; }
  .tech--material.is-scene .tech-visual { inset: auto; position: sticky; top: 0; height: 100svh; z-index: 0; overflow: hidden; }
  .tech--material.is-scene .material-watch {
    display: grid;
    place-items: center;
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: clamp(0, (0.6 - var(--p, 0)) * 5, 1);
  }
  /* Zoom into the case's top-left corner (canvas point 28% / 31%), pulling
     that point to the centre of the screen, then hand over to the close
     crop of the same corner (.carbon-field). Image box: 82svh × 54.67svh. */
  .tech--material.is-scene .material-watch-img {
    --k: clamp(0, var(--p, 0) / 0.55, 1);
    height: 82svh;
    width: auto;
    max-width: none;
    transform: translate3d(calc(var(--k) * 0.22 * 54.67svh), calc(var(--k) * 0.19 * 82svh), 0) scale(calc(1 + var(--k) * 2.6));
    transform-origin: 28% 31%;
  }
  .tech--material.is-scene .carbon-field { opacity: clamp(0, (var(--p, 0) - 0.3) * 4, 1); inset: 0; }
  .tech--material.is-scene .carbon-img { object-position: 30% 40%; filter: brightness(1.35); transform: scale(calc(1.25 - var(--p, 0) * 0.25)); }
  .tech--material.is-scene .carbon-light { background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.85) 75%, #000 100%); opacity: clamp(0, (var(--p, 0) - 0.5) * 3, 1); }
  .tech--material.is-scene .carbon-inset { display: none; }
  .tech--material.is-scene .tech-copy { position: relative; z-index: 1; margin-top: -100svh; padding-top: 150svh; padding-bottom: var(--s-5); }

  /* ---- 4. Mechanical. The watch, then the movement expands until it is
     the frame; the technical copy and instruments scroll over it. */
  .tech--mechanical.is-scene { overflow: clip; }
  .tech--mechanical.is-scene .tech-visual { position: sticky; top: 0; height: 100svh; z-index: 0; }
  .tech--mechanical.is-scene .mech-img { transform: translate3d(-50%, -48%, 0) scale(calc(0.5 + var(--p, 0) * 1.1)); }
  .tech--mechanical.is-scene .mech-zoom { -webkit-mask-image: none; mask-image: none; }
  .tech--mechanical.is-scene .tech-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.62) 40%, rgba(0, 0, 0, 0.94) 72%);
    opacity: clamp(0, (var(--p, 0) - 0.3) * 3, 1);
    pointer-events: none;
  }
  .tech--mechanical.is-scene .tech-copy { position: relative; z-index: 1; margin-top: -100svh; padding-top: 150svh; }

  /* ---- 6. About: the image settles as it arrives; the closing line
     resolves as it is read. */
  .ab-figure--macro[data-scrub] .ab-macro-img { transform: translate(-50%, -49%) scale(calc(1.16 - var(--p, 1) * 0.16)); }

  .ab-end[data-scrub] .ab-end-line {
    opacity: clamp(0.14, (var(--p, 1) - 0.08) * 3.2, 1);
    transform: translate3d(0, calc((1 - clamp(0, var(--p, 1) * 2.4, 1)) * 40px), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-reveal],
  .js [data-reveal='lines'] .line > span,
  .js .hero-watch-inner,
  .js .hero-word > span > span,
  .js .hero-title .line > span,
  .js .hero-brand, .js .hero-aside, .js .hero-ctas, .js .hero-meta, .js .hero-scroll { opacity: 1; transform: none; }
  .hero-sheen { display: none; }
  .nf-sec { animation: none; }
  .js .instruments .i-draw { stroke-dashoffset: 0; }
  .js .instruments .i-jewel { opacity: 1; }
  .js .instruments .i-grow, .js .instruments .i-needle { transform: none; }
  .js .hero-price { opacity: 1; }
  .case-track { height: auto; }
  .case-sticky { position: relative; height: auto; padding-block: var(--section); }
  .case-watch { transform: none; }
  .case-trace path { stroke-dashoffset: 0; }
  .idea, .cn { opacity: 1; transform: none; }
  .nav { transition: none; }
  .v3-hint { display: none; }
}

/* ================================================================= COMPARE */
/* Two slots side by side: "Add a watch" → choose a strap → the watch. */
.cmp { padding: calc(var(--nav-h) + var(--bar-h) + var(--s-5)) 0 var(--section); }
.cmp-reset { font: inherit; letter-spacing: inherit; color: inherit; transition: opacity 0.3s; }
.cmp-reset:hover { opacity: 0.75; }
.cmp-reset:active { opacity: 0.55; }
.cmp-reset:focus-visible { outline-offset: 6px; }
.cmp-noscript { margin-top: var(--s-3); color: var(--steel-2); }
.cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); }
.cmp-slot {
  --cut: 22px;
  position: relative;
  display: grid;
  min-height: clamp(420px, 64svh, 700px);
  padding: var(--s-4) var(--s-3);
  background: radial-gradient(50% 45% at 50% 45%, rgba(150, 160, 178, 0.1), transparent 75%), var(--ink);
  clip-path: var(--oct);
}
.cmp-empty, .cmp-pick, .cmp-shown { grid-area: 1 / 1; }
.cmp-empty { display: grid; place-items: center; }
.cmp-empty[hidden], .cmp-pick[hidden], .cmp-shown[hidden] { display: none; }
.cmp-add {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding: var(--s-4);
  color: var(--paper);
  -webkit-tap-highlight-color: transparent;
}
.cmp-add-icon {
  --cut: 14px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  clip-path: var(--oct);
  background: var(--paper);
  color: var(--black);
  transition: transform 0.5s var(--ease-spring);
}
.cmp-add-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.cmp-add-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.cmp-add:hover .cmp-add-icon { transform: scale(1.06); }
.cmp-add:active .cmp-add-icon { transform: scale(0.95); }
.cmp-add:focus-visible { outline-offset: 4px; }

.cmp-pick { border: 0; margin: 0; padding: 0; min-width: 0; align-self: center; display: grid; justify-items: center; gap: var(--s-3); }
.cmp-pick-title { padding: 0; margin-bottom: var(--s-2); font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); text-align: center; width: 100%; }
.cmp-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px var(--s-1); width: 100%; max-width: 30rem; }
.cmp-swatch { min-width: 0; display: grid; justify-items: center; gap: 8px; padding: 10px 4px; color: var(--paper); transition: background-color 0.3s; }
.cmp-swatch .cfg-swatch-chip { width: 28px; height: 52px; }
.cmp-swatch-name { font-size: 0.875rem; }
.cmp-swatch:hover .cfg-swatch-chip { transform: translateY(-3px); }
.cmp-swatch:active .cfg-swatch-chip { transform: scale(0.95); }
.cmp-swatch[aria-pressed='true'] { background: rgba(236, 235, 230, 0.06); }
.cmp-swatch:focus-visible { outline-offset: -2px; }
.cmp-cancel { justify-self: center; }
/* Step 1: the three cases, as round swatches of the real finish. */
.cmp-step { display: block; margin-bottom: 6px; font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--steel-2); }
.cmp-pick-case { display: block; margin-top: 6px; font-size: 0.8125rem; letter-spacing: 0; text-transform: none; color: var(--paper); }
.cmp-cases { display: flex; justify-content: center; gap: var(--s-2); width: 100%; max-width: 30rem; }
.cmp-case { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 10px; padding: 12px 4px; border-radius: 12px; color: var(--paper); transition: background-color 0.3s var(--ease-out); }
.cmp-case-mark { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(236, 235, 230, 0.25); transition: transform 0.5s var(--ease-spring), box-shadow 0.3s var(--ease-out); }
.cmp-case-mark img { width: 100%; height: 100%; object-fit: cover; }
.cmp-case:hover { background-color: rgba(236, 235, 230, 0.05); }
.cmp-case:hover .cmp-case-mark { transform: scale(1.06); }
.cmp-case:active .cmp-case-mark { transform: scale(0.94); }
.cmp-case[aria-pressed='true'] .cmp-case-mark { box-shadow: 0 0 0 2px #000, 0 0 0 3.5px var(--paper); }
.cmp-case:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; }

.cmp-shown { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: var(--s-2); }
.cmp-media { position: relative; width: 100%; min-height: 0; }
.cmp-shot { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; animation: cmp-in 0.6s var(--ease-out); }
.cmp-shot[hidden] { display: none; }
@keyframes cmp-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.cmp-img {
  height: 115%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 16%, #000 84%, transparent 98%);
  mask-image: linear-gradient(180deg, transparent 2%, #000 16%, #000 84%, transparent 98%);
}
.cmp-name { font-size: 0.9375rem; letter-spacing: -0.01em; text-align: center; }
.cmp-actions .text-link { font-size: 0.625rem; }
.cmp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px var(--s-2); }

@media (max-width: 760px) {
  .cmp { padding-top: calc(var(--nav-h) + var(--bar-h) + var(--s-3)); }
  .cmp-grid { gap: 10px; margin-top: var(--s-3); }
  .cmp-slot { --cut: 14px; min-height: clamp(360px, 62svh, 560px); padding: var(--s-3) 8px; }
  .cmp-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-swatch .cfg-swatch-chip { width: 22px; height: 40px; }
  .cmp-swatch-name { font-size: 0.6875rem; overflow-wrap: anywhere; }
  .cmp-swatch { padding: 8px 2px; }
  .cmp-name { font-size: 0.8125rem; }
  .cmp-media { overflow: hidden; }
  .cmp-img { transform: scale(1.35); }
  .cmp-actions { flex-direction: column; align-items: center; gap: 0; }
}

/* Compare: zoom. */
.cmp-zoom-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.cmp-zoom-btn:focus-visible { outline-offset: -4px; }
.zoom {
  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.94);
  color: var(--paper);
}
.zoom::backdrop { background: rgba(0, 0, 0, 0.7); }
.zoom[open] { display: grid; grid-template-rows: 1fr auto; animation: cartd-fade 0.35s var(--ease-out); }
@keyframes cartd-fade { from { opacity: 0; } to { opacity: 1; } }
.zoom-stage { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 0; touch-action: none; }
.zoom-img {
  height: 100%;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.45s var(--ease-out);
  user-select: none;
  -webkit-user-drag: none;
}
.zoom.is-zoomed .zoom-img { cursor: zoom-out; transition: transform 0.2s var(--ease-out), transform-origin 0.12s linear; }
.zoom-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(20, 21, 24, 0.85);
  color: var(--paper);
  transition: background-color 0.3s;
}
.zoom-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.zoom-close:hover { background: #2a2b30; }
.zoom-close:active { transform: scale(0.94); }
.zoom-hint { padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom)); text-align: center; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }

/* ============================================================ FIT TO SCREEN */
/* Desktop and laptop windows: each of these sections fits one screen below
   the nav, so nothing is cut off at the bottom of the view. */
@media (min-width: 901px) {
  :root { --fit-h: calc(100svh - var(--nav-h)); }

  /* Proportion: heading, the two images and the figures in one screen. */
  .stack.is-stacking > .prop,
  .prop { padding-block: var(--s-4); }
  .prop-lede { margin-top: var(--s-2); }
  .prop-grid { margin-top: var(--s-3); align-items: center; }
  .prop-drawing { height: clamp(220px, calc(var(--fit-h) - 19rem), 560px); max-height: none; width: auto; margin-inline: auto; }
  .prop-side .sheet-plate { height: clamp(220px, calc(var(--fit-h) - 19rem), 560px); }
  .prop-side-img { height: 100%; width: auto; max-height: none; margin-inline: auto; }
  .prop-figures { gap: var(--s-2); align-content: center; }
  .pf { padding-top: var(--s-1); }
  .pf dt { margin-bottom: 4px; }
  .pf-num { font-size: clamp(2rem, 6svh, 3.5rem); }
}
@media (min-width: 901px) and (max-height: 640px) {
  .pf-note { display: none; }
}

/* ============================================ ABOUT: THE MAN BEHIND THE WATCH */
.ab-founder { display: grid; gap: var(--s-2); margin-top: var(--s-1); }
.ab-founder-quote { margin: 0; }
.ab-founder-quote p { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.35; letter-spacing: -0.02em; color: var(--paper); max-width: 34ch; }
.ab-founder-by { display: grid; gap: 4px; }
.ab-founder-name { font-size: 1rem; font-weight: 500; color: var(--paper); }
.ab-founder-role { font-size: var(--t-small); color: var(--steel); }
.ab-letter-open { justify-self: start; margin-top: var(--s-2); }

/* Charles's letter: a paper sheet over the dimmed page. */
.lt {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #141414;
  overflow: hidden;
}
.lt::backdrop { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lt[open] { display: grid; place-items: center; }
html.letter-open, html.tryon-open { overflow: hidden; }
.lt-sheet {
  position: relative;
  width: min(100% - 2 * var(--gutter), 42rem);
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 4.5rem);
  background: var(--paper);
  border-radius: 8px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: lt-in 0.7s var(--ease-out);
}
@keyframes lt-in {
  from { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.lt-body { display: grid; gap: 1.1em; font-size: 1.0625rem; line-height: 1.7; }
.lt-p { max-width: 60ch; }
.lt-p--lines { font-weight: 500; }
.lt-sign { margin-top: 0.6em; font-family: var(--f-serif); font-size: 2.4rem; line-height: 1; letter-spacing: -0.01em; }
.lt-close {
  position: sticky;
  top: 0;
  float: right;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: calc(clamp(2.5rem, 6vw, 4.5rem) * -0.6) calc(clamp(1.5rem, 6vw, 4.5rem) * -0.6) 0 0;
  border-radius: 6px;
  background: rgba(20, 20, 20, 0.06);
  transition: transform 0.4s var(--ease-spring), opacity 0.3s;
}
.lt-close svg { width: 14px; height: 14px; fill: none; stroke: #141414; stroke-width: 1.5; }
.lt-close:hover { transform: scale(1.06); }
.lt-close:active { transform: scale(0.94); }
.lt-close:focus-visible { outline: 2px solid #141414; outline-offset: 2px; }
@media (max-width: 760px) {
  .lt[open] { place-items: end center; }
  .lt-sheet { width: 100%; max-height: calc(100dvh - var(--s-4)); border-radius: 12px 12px 0 0; padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
  .lt-body { font-size: 1rem; }
  @keyframes lt-in {
    from { transform: translate3d(0, 100%, 0); }
    to { transform: none; }
  }
}

/* ======================================================= CONFIGURE: TRY ON */
/* A full-screen portrait camera stage (client references, 2026-10-09/10):
   round back / close at the top with the watch's name between them, the
   status in a dark translucent panel under them, a thin arm guide, and the
   photo count, wrist choice, shutter and Auto at the bottom. Then a results
   screen with the three photos. */
.to {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  color: #fff;
  overflow: hidden;
}
.to::backdrop { background: #000; }
.to[open] { animation: to-in 0.4s var(--ease-out); }
@keyframes to-in { from { opacity: 0; } to { opacity: 1; } }
/* Portrait stage: the whole screen on a phone; a centred portrait frame on
   wider screens. */
.to-stage { position: absolute; inset: 0; margin: auto; width: min(100%, calc(100dvh * 0.75)); height: 100%; overflow: hidden; background: #000; }
.to-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.4s var(--ease-out); }
.to-canvas[data-fit='cover'] { object-fit: cover; }
.to[data-state='live'] .to-canvas, .to[data-state='results'] .to-canvas { opacity: 1; }
.to[data-state='results'] { background: #fff; }
.to-video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.to-flash { position: absolute; inset: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; }
.to-flash.is-on { animation: to-flash 0.45s var(--ease-out); }
@keyframes to-flash { from { opacity: 0.7; } to { opacity: 0; } }

/* The guide: thin white lines; the watch spot fades once a hand is tracked. */
.to-guide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease-out); }
.to[data-state='live'] .to-guide { opacity: 1; }
.to-g-line { fill: none; stroke: rgba(255, 255, 255, 0.86); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.to-g-short { stroke-width: 3; }
.to-g-strap, .to-g-case { fill: #353535; stroke: none; transition: opacity 0.4s var(--ease-out); }
.to.has-hand .to-g-strap, .to.has-hand .to-g-case { opacity: 0; }
.to.is-aligned .to-g-line { stroke: #fff; stroke-width: 3; }

/* Top: back · the watch · close. */
.to-top { position: absolute; top: calc(env(safe-area-inset-top) + 12px); left: 14px; right: 14px; z-index: 5; display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 10px; }
.to-round {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  transition: transform 0.3s var(--ease-spring), opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.to-round svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.to-close { background: rgba(255, 255, 255, 0.85); }
.to-round:hover { transform: scale(1.05); }
.to-round:active { transform: scale(0.92); }
.to-round:focus-visible, .to-shutter:focus-visible, .to-auto:focus-visible, .to-hand:focus-visible, .to-pill:focus-visible, .to-link:focus-visible, .to-act:focus-visible, .to-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.to-label { display: grid; justify-items: center; gap: 1px; min-width: 0; text-align: center; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.to-label-brand { font-family: var(--font-display, inherit); font-size: 0.6875rem; font-weight: 600; letter-spacing: -0.01em; opacity: 0.85; }
.to-label-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.9); }
.to[data-state='intro'] .to-label { visibility: hidden; }

/* The status, in a dark translucent panel. */
.to-head { position: absolute; top: calc(env(safe-area-inset-top) + 72px); left: 16px; right: 16px; z-index: 3; display: flex; justify-content: center; pointer-events: none; }
.to-panel { max-width: 30rem; padding: 10px 18px 11px; border-radius: 16px; background: rgba(10, 10, 12, 0.62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-align: center; }
.to[data-state='intro'] .to-panel { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.to-status { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.35; }
.to-sub { margin-top: 3px; font-size: 0.8125rem; line-height: 1.4; color: rgba(255, 255, 255, 0.78); }
.to-sub:empty { display: none; }
.to.is-aligned .to-panel { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); }

/* Before the camera. */
.to-intro { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 120px 28px calc(env(safe-area-inset-bottom) + 36px); text-align: center; }
.to:not([data-state='intro']) .to-intro { display: none; }
.to-preview { height: clamp(160px, 34dvh, 320px); width: auto; -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 20%, #000 80%, transparent 98%); mask-image: linear-gradient(180deg, transparent 2%, #000 20%, #000 80%, transparent 98%); }
.to-intro-name { font-size: 1rem; font-weight: 500; letter-spacing: 0.04em; }
.to-intro-text { max-width: 32ch; font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.7); }
.to-start { display: grid; justify-items: center; gap: 10px; margin-top: 10px; }
.to-start [hidden] { display: none; }
.to-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 1.8rem;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: transform 0.3s var(--ease-spring);
}
.to-pill--sm { min-height: 40px; padding: 0 1.2rem; }
.to-pill:hover { transform: translateY(-1px); }
.to-pill:active { transform: scale(0.97); }
.to-link { position: relative; min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; font-size: 0.875rem; color: #fff; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; transition: opacity 0.2s; }
.to-link:hover { opacity: 0.75; }
.to-link:active { opacity: 0.55; }
.to-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.to-file:focus-within { outline: 2px solid #fff; outline-offset: 3px; }

/* Bottom (live): wrist choice above the shutter; Auto at the lower right. */
.to-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: calc(env(safe-area-inset-bottom) + 200px); display: none; background: linear-gradient(0deg, rgba(0, 0, 0, 0.45), transparent); pointer-events: none; }
.to-bottom > * { pointer-events: auto; }
.to[data-state='live'] .to-bottom, .to[data-state='loading'] .to-bottom { display: block; }
.to-hands { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 132px); display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); transform: translateX(-50%); }
.to-hand { display: grid; place-items: center; width: 44px; height: 38px; border-radius: 999px; color: #fff; transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out); }
.to-hand svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.to-hand--right svg { transform: scaleX(-1); }
.to-hand[aria-checked='true'] { background: #fff; color: #000; }
.to-hand[aria-checked='true'] svg { fill: currentColor; }
.to-hand:hover { background-color: rgba(255, 255, 255, 0.15); }
.to-hand[aria-checked='true']:hover { background-color: #fff; }
.to-hand:active { transform: scale(0.94); }
.to-shutter { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 26px); display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #fff; transform: translateX(-50%); transition: opacity 0.3s; }
.to-shutter span { width: 68px; height: 68px; border-radius: 50%; border: 3px solid #000; background: #fff; transition: transform 0.25s var(--ease-spring), background-color 0.3s; }
.to-shutter:not([disabled]):hover span { transform: scale(0.95); }
.to-shutter:not([disabled]):active span { transform: scale(0.88); }
.to[data-auto='off'] .to-shutter[disabled] { opacity: 0.45; }
/* Auto on: the shutter is an indicator — it fills as the wrist lines up. */
.to[data-auto='on'] .to-shutter { cursor: default; }
.to[data-auto='on'].is-aligned .to-shutter span { background: #d9d9d9; transform: scale(0.9); }
.to-auto { position: absolute; right: 18px; bottom: calc(env(safe-area-inset-bottom) + 26px); display: grid; justify-items: center; gap: 8px; color: #fff; font-size: 0.8125rem; }
.to-auto-dot { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #fff; transition: background-color 0.25s var(--ease-out), transform 0.3s var(--ease-spring); }
.to[data-auto='off'] .to-auto-dot { background: transparent; }
.to-auto:hover .to-auto-dot { transform: scale(1.05); }
.to-auto:active .to-auto-dot { transform: scale(0.92); }

/* Results (client reference, 2026-10-10): the photo above, and a white
   sheet below — three square thumbnails (the chosen one framed in black with
   a bin), a rule, then the watch's brand, name and price with ADD TO CART. */
.to { --peek: calc(env(safe-area-inset-bottom) + 64px); }
/* The photo fills the screen above the peeking sheet. */
.to[data-state='results'] .to-canvas { bottom: var(--peek); height: auto; }
.to[data-state='results'] .to-head { display: none; }
.to-results { position: absolute; inset: 0; z-index: 3; display: none; pointer-events: none; }
.to[data-state='results'] .to-results { display: block; }
.to-results [hidden] { display: none !important; }
.to-results > * { pointer-events: auto; }
.to-photo-acts { position: absolute; right: 14px; top: calc(env(safe-area-inset-top) + 76px); z-index: 3; display: flex; gap: 10px; }
.to-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.3s var(--ease-spring), background-color 0.25s var(--ease-out); }
.to-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.to-icon:hover { background-color: rgba(0, 0, 0, 0.75); }
.to-icon:active { transform: scale(0.92); }
.to-icon:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* The sheet scrolls: lowered, only its top peeks up; raised, all of it shows. */
.to-scroll { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.to-scroll::-webkit-scrollbar { display: none; }
.to-spacer { height: calc(100% - var(--peek)); scroll-snap-align: start; pointer-events: none; }
.to-sheet { position: relative; display: grid; align-content: start; padding-bottom: env(safe-area-inset-bottom); border-radius: 16px 16px 0 0; background: #fff; color: #111; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, 0.5); scroll-snap-align: end; }
.to-handle { display: grid; place-items: center; width: 100%; height: 28px; border-radius: 16px 16px 0 0; }
.to-handle span { width: 40px; height: 5px; border-radius: 3px; background: #c9c9c9; transition: background-color 0.25s var(--ease-out), transform 0.3s var(--ease-spring); }
.to-handle:hover span { background: #9a9a9a; }
.to-handle:active span { transform: scaleX(0.85); }
.to-handle:focus-visible { outline: 2px solid #111; outline-offset: -4px; }
.to-thumbs { display: flex; gap: 5%; padding: 8px 4% 24px; border-bottom: 1px solid #e3e3e3; box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.18); }
.to-thumb { position: relative; flex: 0 0 19.5%; aspect-ratio: 1; }
.to-thumb-btn { display: block; width: 100%; height: 100%; padding: 0; background: #ddd; overflow: hidden; transition: transform 0.3s var(--ease-spring); }
.to-thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.to-thumb-btn:hover { transform: scale(1.03); }
.to-thumb-btn:active { transform: scale(0.97); }
.to-thumb-btn:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.to-thumb.is-active .to-thumb-btn { box-shadow: 0 0 0 4px #000; transform: none; }
.to-thumb-del { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; color: #fff; transition: transform 0.3s var(--ease-spring); }
.to-thumb-del svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.to-thumb-del:hover { transform: scale(1.08); }
.to-thumb-del:active { transform: scale(0.92); }
.to-thumb-del:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 8px; }
.to-confirm { position: absolute; left: 4%; right: 4%; top: 18px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding: 14px; background: #fff; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.35), inset 0 0 0 1px #e3e3e3; font-size: 0.9375rem; }
.to-confirm-yes, .to-confirm-no { min-height: 44px; padding: 0 1.2rem; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; transition: background-color 0.25s var(--ease-out), transform 0.3s var(--ease-spring); }
.to-confirm-yes { background: #111; color: #fff; }
.to-confirm-no { color: #111; box-shadow: inset 0 0 0 1px #111; }
.to-confirm-yes:active, .to-confirm-no:active { transform: scale(0.96); }
.to-confirm-yes:focus-visible, .to-confirm-no:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

.to-buy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 4%; padding: 22px 4% 26px; }
.to-buy-info { min-width: 0; display: grid; gap: 4px; }
.to-buy-brand, .to-buy-name, .to-buy-price { font-size: 1.125rem; line-height: 1.25; color: #111; }
.to-buy-brand { text-transform: uppercase; letter-spacing: 0.02em; }
.to-buy-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.to-buy-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.to-buy-btn { min-height: 60px; padding: 0 12px; background: #d5b97b; box-shadow: inset 0 0 0 2px #ab955f; color: #1a1a1a; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; transition: background-color 0.25s var(--ease-out), transform 0.3s var(--ease-spring); }
.to-buy-btn:hover { background-color: #ceb06c; }
.to-buy-btn:active { transform: scale(0.98); }
.to-buy-btn:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.to-buy-btn.is-added { background-color: #c9ad6c; }
.to.is-shooting .to-guide { opacity: 0; }
@media (max-width: 420px) {
  .to-round { width: 44px; height: 44px; }
  .to-top { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .to-status { font-size: 1rem; }
}


/* ============================================= ADDED TO CART CONFIRMATION */
.toast {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 14px);
  left: 50%;
  z-index: calc(var(--z-nav) + 5);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: rgba(20, 21, 24, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(236, 235, 230, 0.12), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--paper);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -140%, 0);
  transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); transition: opacity 0.3s var(--ease-out), transform 0.55s var(--ease-spring); }
.toast-check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #22a05a; }
.toast-check svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================ CONFIGURE: COMPOSITION (2026-10-10) */
/* After the owner's references (a car configurator; the P2 mobile mock-up
   and "Your selection"): identity top left, the watch large on its own
   stage with Try On at its top left, the options grouped in panels
   underneath (Case finish · Strap · Extra strap), and a bar
   that stays at the bottom of the screen while the configurator is in view. */
.cfp {
  /* Desktop: short enough that the option panels start on the first screen. */
  --stage-h: clamp(320px, calc(100svh - var(--nav-h) - var(--bar-h) - 25rem), 640px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "id" "stage" "panels" "bar";
  align-content: start;
  max-width: 1320px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--bar-h) + var(--s-3)) var(--gutter) 0;
}
.cfp::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  z-index: -1;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 22% 42% at 50% 6%, rgba(236, 238, 245, 0.1), transparent 72%),
    radial-gradient(ellipse 40% 30% at 50% 30%, rgba(110, 120, 140, 0.12), transparent 70%),
    #000;
  pointer-events: none;
}

/* Identity */
.cfp-id { grid-area: id; text-align: center; }
.cfp-eyebrow { font-size: var(--t-small); color: var(--steel-2); }
.cfp-title { margin-top: 6px; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.cfp-model { margin-top: 8px; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }
.cfp-editing { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 6px 8px 6px 14px; border-radius: 999px; background: rgba(236, 235, 230, 0.08); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 0.8125rem; }
.cfp-editing[hidden] { display: none; }
.cfp-link { min-height: 32px; padding: 0 6px; font-size: 0.8125rem; color: var(--paper); text-decoration: underline; text-underline-offset: 4px; border-radius: 6px; transition: opacity 0.2s var(--ease-out); }
.cfp-link:hover { opacity: 0.75; }
.cfp-link:active { opacity: 0.55; }
.cfp-link:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* The stage (its halo is wider than a phone: clipped to the page). */
.cfg { overflow-x: clip; }
.cfp-stage { grid-area: stage; position: relative; height: var(--stage-h); margin-top: var(--s-1); }
.cfp-stage .cfx-watch { position: absolute; inset: 0 0 4%; height: auto; }
/* Desktop: the watch larger than its stage; the strap ends fade into the
   title above and the floor below. */
@media (min-width: 901px) {
  .cfp-stage .cfx-watch { inset: -13% 0 -13%; }
  .cfp-stage .cfx-watch::before { width: calc(var(--stage-h) * 1.3); height: calc(var(--stage-h) * 1.3); }
  .cfp-id { position: relative; z-index: 1; }
}
.cfp-floor {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: min(72%, calc(var(--stage-h) * 1.2));
  height: calc(var(--stage-h) * 0.15);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(236, 235, 230, 0.13);
  background: radial-gradient(closest-side, rgba(225, 230, 240, 0.07), transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

/* The option panels */
.cfp-panels { grid-area: panels; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-2); }
.cfp-panel { min-width: 0; margin: 0; padding: 16px 16px 14px; border: 0; border-radius: 14px; background: rgba(14, 15, 17, 0.88); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -24px rgba(90, 100, 120, 0.25); container-type: inline-size; }
.cfp-panel-title { float: left; width: 100%; padding: 0; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); }

/* Case finish: three round swatches with their names. */
.cfp-cases { display: flex; justify-content: space-around; gap: 8px; margin-top: 14px; }
.cfp-swatch { position: relative; display: grid; justify-items: center; gap: 10px; padding: 4px; cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.cfp-swatch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cfp-swatch-mark { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(236, 235, 230, 0.22), 0 10px 22px -10px rgba(0, 0, 0, 0.8); transition: transform 0.5s var(--ease-spring), box-shadow 0.3s var(--ease-out); }
.cfp-swatch-mark img { width: 100%; height: 100%; object-fit: cover; }
.cfp-swatch:hover .cfp-swatch-mark { transform: scale(1.06); }
.cfp-swatch:active .cfp-swatch-mark { transform: scale(0.94); }
.cfp-swatch:has(input:checked) .cfp-swatch-mark { transform: scale(1.12); box-shadow: 0 0 0 2px #000, 0 0 0 3.5px var(--paper), 0 0 22px 2px rgba(236, 235, 230, 0.16); }
.cfp-swatch:has(input:focus-visible) { outline: 2px solid var(--paper); outline-offset: 0; }

/* The name and "Included" hang under the dot without widening its target. */
.cfx-dot-name { font-size: 0.75rem; white-space: nowrap; color: var(--paper); opacity: 0; transition: opacity 0.35s var(--ease-out); }
/* Seven straps: only the chosen one is named under the row. */
.cfx-dot:has(input:checked) .cfx-dot-name { opacity: 1; }
.cfx-dot-note { font-size: 0.625rem; letter-spacing: 0.06em; color: var(--steel); }


/* The bar: stays at the bottom of the screen while the configurator is in view.
   Controls scrolled into view (keyboard focus, links) stop above it. */
html:has(.cfp-bar) { scroll-padding-bottom: 150px; }
.cfp-bar { grid-area: bar; position: sticky; bottom: 0; z-index: 5; margin: var(--s-3) calc(var(--gutter) * -1) 0; padding: 10px var(--gutter) calc(env(safe-area-inset-bottom) + 12px); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.92) 18px); }
.cfp-bar-row { display: flex; align-items: center; gap: var(--s-3); padding: 12px 14px 12px 22px; border-radius: 18px; background: rgba(12, 13, 15, 0.94); box-shadow: inset 0 0 0 1px var(--line), 0 -10px 40px -20px rgba(0, 0, 0, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.cfp-bar-label { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); }
.cfp-bar-amount { margin-top: 2px; font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cfp-bar-cur { font-size: var(--t-label); letter-spacing: 0.14em; color: var(--steel); }
.cfp-bar-note { font-size: 0.6875rem; color: var(--steel-2); }
.cfp-bar-cart { padding-left: var(--s-3); border-left: 1px solid var(--line); }
.cfp-bar-row .cfp-bar-price { padding-right: var(--s-3); border-right: 1px solid var(--line); }
.cfp-bar-cart[hidden] { display: none; }
.cfp-bar-cart .cfp-bar-amount { font-size: 1.125rem; }
.cfp-bar-row .cfp-cta { margin-left: auto; }
/* ADD TO CART (client reference, 2026-10-11): a slim white pill with an
   arrow — smaller and quieter than a block button. */
.cfp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 12.5rem;
  min-height: 46px;
  padding: 0 1.6rem 0 1.9rem;
  border-radius: 999px;
  background: var(--paper);
  color: #0b0b0c;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 10px 28px -14px rgba(236, 235, 230, 0.45);
  transition: background-color 0.25s var(--ease-out), transform 0.35s var(--ease-spring), box-shadow 0.3s var(--ease-out);
}
.cfp-cta-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--ease-spring); }
.cfp-cta:hover { background-color: #fff; box-shadow: 0 12px 32px -12px rgba(236, 235, 230, 0.6); }
.cfp-cta:hover .cfp-cta-arrow { transform: translateX(3px); }
.cfp-cta:active { transform: scale(0.97); }
.cfp-cta:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.cfp-cta.is-added .cfp-cta-arrow { opacity: 0; }
/* Small outlined pill (additional straps). */
.cfp-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 1.1rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--paper);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), transform 0.3s var(--ease-spring);
}
.cfp-chip:hover { background-color: rgba(236, 235, 230, 0.07); box-shadow: inset 0 0 0 1px var(--paper); }
.cfp-chip:active { transform: scale(0.96); }
.cfp-chip:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* Your selection (above the bar once the cart holds watches). */
.cfp-sel { margin-bottom: 8px; padding: 10px 14px 10px 22px; border-radius: 18px; background: rgba(12, 13, 15, 0.94); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.cfp-sel[hidden] { display: none; }
.cfp-sel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cfp-sel-title { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel); }
.cfp-sel-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); border-radius: 8px; }
.cfp-sel-toggle span { text-decoration: underline; text-underline-offset: 4px; }
.cfp-sel-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); transition: transform 0.4s var(--ease-spring); }
.cfp-sel.is-open .cfp-sel-toggle svg { transform: none; }
.cfp-sel-toggle:hover { opacity: 0.8; }
.cfp-sel-toggle:active { opacity: 0.6; }
.cfp-sel-toggle:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.cfp-sel-list { display: grid; gap: 6px; max-height: min(40svh, 320px); margin-top: 6px; overflow-y: auto; overscroll-behavior: contain; }
.cfp-sel-list[hidden] { display: none; }
.cfp-sel-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 6px 4px 6px 8px; border-radius: 12px; background: rgba(236, 235, 230, 0.035); }
.cfp-sel-item.is-editing { box-shadow: inset 0 0 0 1px var(--paper); }
.cfp-sel-item img { width: 40px; height: 60px; object-fit: contain; }
.cfp-sel-name { font-size: 0.9375rem; }
.cfp-sel-sub { margin-top: 2px; font-size: 0.75rem; color: var(--steel-2); }
.cfp-sel-price { font-size: 0.9375rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.cfp-sel-acts { display: flex; gap: 2px; }
.cfp-sel-acts .cfp-link + .cfp-link { border-left: 1px solid var(--line); border-radius: 0; padding-left: 10px; margin-left: 4px; }

/* Additional straps: four cards, each adds at once. */

@media (max-width: 900px) {
  .cfp {
    --stage-h: clamp(280px, 52svh, 470px);
    padding-top: calc(var(--nav-h) + var(--bar-h) + var(--s-2));
  }
  .cfp-title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .cfp-panels { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: var(--s-2); }
}
@media (max-width: 640px) {
  /* Phone (owner's mock-up): price on the left, the button on the right. */
  .cfp-bar { padding-bottom: calc(env(safe-area-inset-bottom) + 8px); }
  .cfp-bar-row { gap: 12px; padding: 10px 10px 10px 16px; }
  .cfp-bar-cart { display: none; }
  .cfp-bar-amount { font-size: 1.375rem; }
  .cfp-bar-row .cfp-bar-price { padding-right: 12px; }
  .cfp-bar-row .cfp-cta { flex: 1; min-width: 0; min-height: 46px; padding: 0 1.1rem; gap: 10px; }
  .cfp-sel { padding: 8px 10px 8px 14px; }
  .cfp-sel-item { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; }
  .cfp-sel-item img { width: 34px; height: 51px; }
  .cfp-sel-acts { grid-column: 2 / -1; justify-content: flex-start; margin-top: -4px; }
  .cfp-sel-name { font-size: 0.875rem; }
}

/* ================================================ HOMEPAGE (2026-10-11) */
/* Client brief: hero · meet project 2 · finishes · design · engineering ·
   every angle · after dark (unchanged) · the brand · FAQ.
   src/components/Home.js, assets/js/home.js. */

/* Shared: numbered section label, section titles, the line button. */
.hk { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel); }
.hk-n { color: var(--paper); margin-right: 0.35em; }
.meet-title, .dsg-title, .eng-title, .tt-title, .brand-title, .faq-title {
  margin-top: 14px;
  font-size: clamp(1.9rem, 4vw, 3.3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 48px;
  padding: 0 1.6rem;
  border: 1px solid rgba(236, 235, 230, 0.5);
  border-radius: 6px;
  color: var(--paper);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.35s var(--ease-spring);
}
.btn-line-arrow, .btn-line-plus { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--ease-spring); }
.btn-line:hover { background: var(--paper); border-color: var(--paper); color: #0a0a0b; }
.btn-line:hover .btn-line-arrow { transform: translateX(3px); }
.btn-line:active { transform: scale(0.97); }
.btn-line:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.btn-line[aria-expanded='true'] .btn-line-plus { transform: rotate(45deg); }

/* ---------------------------------------------------------------- 01 HERO */
.hh {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + var(--bar-h) + var(--s-3)) var(--gutter) var(--s-5);
  overflow: hidden;
  text-align: center;
  background: #000;
}
.hh-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 45% at 50% 52%, rgba(120, 128, 145, 0.1), transparent 70%), #000; }
.hh-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.6)); }
.hh-video { width: 100%; height: 100%; object-fit: cover; }
.hh-inner { display: grid; justify-items: center; width: 100%; max-width: 56rem; }
.hh-sig { display: flex; align-items: center; gap: 1.1em; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.32em; color: var(--steel-2); font-variant-numeric: tabular-nums; }
.hh-sep { color: var(--line-strong); letter-spacing: 0; }
.hh-cta { margin-top: clamp(1.8rem, 5vh, 3rem); }
.hh-scroll { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 18px); display: grid; place-items: center; width: 44px; height: 44px; transform: translateX(-50%); }
.hh-scroll span { width: 1px; height: 28px; background: linear-gradient(180deg, transparent, var(--steel)); }
.hh-scroll:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
/* Entrance: quick and quiet (hero.js adds .is-ready within 1.6s). */
.js .hh-title, .js .hh-sig, .js .hh-cta, .js .hh-scroll { opacity: 0; }
.is-ready .hh-title { opacity: 1; transition: opacity 1.2s var(--ease-out) 0.3s; }
.is-ready .hh-sig, .is-ready .hh-cta, .is-ready .hh-scroll { opacity: 1; transition: opacity 1s var(--ease-out) 0.7s; }

/* ------------------------------------------------------ 02 MEET PROJECT 2 */
.meet { position: relative; background: #000; padding-block: var(--section) var(--s-5); }
.meet-head { text-align: center; }
.meet-visual { position: relative; height: clamp(360px, 62vh, 680px); margin-top: var(--s-3); }
.meet-mark {
  position: absolute;
  left: 50%;
  top: 2%;
  width: min(84vw, calc(var(--mh, 62vh) * 1.18));
  height: auto;
  transform: translateX(-50%);
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, rgba(0, 0, 0, 0.35) 95%);
  mask-image: linear-gradient(180deg, #000 20%, rgba(0, 0, 0, 0.35) 95%);
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
}
.meet-watch { position: absolute; inset: 9% 0 0; display: flex; justify-content: center; transition: transform 1.1s var(--ease-out); transform-origin: 50% 52%; }
.meet-img { height: 100%; width: auto; max-width: none; object-fit: contain; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.8)); }
.meet-points { display: grid; gap: var(--s-3); max-width: 40rem; margin: var(--s-4) auto 0; padding: 0 var(--gutter); text-align: center; }
.meet-point-title { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.meet-point-body { margin-top: 8px; font-size: var(--t-small); line-height: 1.6; color: var(--steel-2); }
.meet-nav { display: none; }
/* Pinned (scenes.js, motion allowed): three states, one statement at a time. */
.meet.is-scene { height: 300svh; padding: 0; }
.meet.is-scene .meet-stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(var(--nav-h) + var(--bar-h) + var(--s-3)) 0 var(--s-4); overflow: hidden; }
.meet.is-scene .meet-visual { height: auto; margin-top: var(--s-2); --mh: 60svh; }
.meet.is-scene .meet-points { position: relative; display: block; width: 100%; height: 6.6rem; margin-top: var(--s-2); }
.meet.is-scene .meet-point { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out); pointer-events: none; }
.meet.is-scene[data-step='0'] [data-meet-point='0'],
.meet.is-scene[data-step='1'] [data-meet-point='1'],
.meet.is-scene[data-step='2'] [data-meet-point='2'] { opacity: 1; transform: none; transition-delay: 0.15s; }
.meet.is-scene .meet-head { transition: opacity 0.6s var(--ease-out); }
.meet.is-scene:not([data-step='0']) .meet-head { opacity: 0; }
.meet.is-scene .meet-watch { transform: scale(1.22); }
.meet.is-scene[data-step='1'] .meet-watch { transform: translate3d(0, 4%, 0) scale(2.4); }
.meet.is-scene[data-step='1'] .meet-mark { opacity: 0; transform: translateX(-50%) translate3d(0, -12%, 0); }
.meet.is-scene[data-step='2'] .meet-watch { transform: scale(1.12); }
.meet.is-scene[data-step='2'] .meet-mark { opacity: 0.45; }
.meet.is-scene .meet-nav { position: absolute; right: var(--gutter); top: 50%; display: grid; gap: 6px; transform: translateY(-50%); z-index: 2; }
.meet-dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; color: var(--steel); transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out); }
.meet-dot span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow 0.3s var(--ease-out), transform 0.35s var(--ease-spring); }
.meet-dot[aria-pressed='true'] { color: var(--paper); }
.meet-dot[aria-pressed='true'] span { box-shadow: inset 0 0 0 1px var(--paper); transform: scale(1.08); }
.meet-dot:hover { color: var(--paper); }
.meet-dot:active span { transform: scale(0.92); }
.meet-dot:focus-visible { outline: 2px solid var(--paper); outline-offset: -4px; }

/* ----------------------------------------------------------- 03 FINISHES */
.fin { padding-block: var(--s-5) var(--section); background: #000; }
.fin-head { text-align: center; }
.fin-title { margin-top: 14px; }
.fin-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); }
.fin-link { display: grid; justify-items: center; gap: 6px; padding-bottom: var(--s-2); border-radius: 10px; text-align: center; transition: background-color 0.3s var(--ease-out); }
.fin-media { position: relative; width: 100%; height: clamp(300px, 34vw, 470px); }
.fin-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform 0.8s var(--ease-out); }
.fin-name { margin-top: var(--s-2); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; }
.fin-note { font-size: var(--t-small); color: var(--steel-2); }
.fin-link:hover .fin-img { transform: translate3d(0, -6px, 0) scale(1.02); }
.fin-link:active .fin-img { transform: scale(0.99); }
.fin-link:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.fin-cta { display: flex; justify-content: center; margin-top: var(--s-4); }

/* ------------------------------------------------------------ 04 DESIGN */
.dsg { padding-block: var(--section); border-top: 1px solid var(--line); background: #000; }
.dsg-grid { display: grid; grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr); gap: var(--s-5); }
.dsg-rail-inner { position: sticky; top: calc(var(--nav-h) + var(--s-4)); }
.dsg-steps { position: relative; display: grid; gap: 22px; margin-top: var(--s-4); padding-left: 30px; }
.dsg-line { position: absolute; left: 10px; top: 6px; bottom: 6px; width: 1px; background: var(--line-strong); }
.dsg-line-fill { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--paper); transform-origin: 0 0; transform: scaleY(calc(var(--active, 0) / 2)); transition: transform 0.7s var(--ease-out); }
.dsg-step { position: relative; }
.dsg-step::before { content: ''; position: absolute; left: -24px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-spring); }
.dsg-step.is-past::before { background: var(--paper); box-shadow: none; }
.dsg-step.is-active::before { background: var(--paper); box-shadow: 0 0 0 4px rgba(236, 235, 230, 0.15); transform: scale(1.2); }
.dsg-step-link { display: inline-flex; align-items: baseline; gap: 14px; min-height: 32px; color: var(--steel); transition: color 0.35s var(--ease-out); border-radius: 4px; }
.dsg-step.is-active .dsg-step-link { color: var(--paper); }
.dsg-step-link:hover { color: var(--paper); }
.dsg-step-link:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.dsg-num { font-size: 0.75rem; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.dsg-step-name { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.22em; }
.dsg-points { display: grid; gap: var(--s-6); }
.dsg-point { display: grid; gap: var(--s-3); opacity: 0.35; transition: opacity 0.7s var(--ease-out); }
.dsg-point.is-active { opacity: 1; }
.dsg-fig { position: relative; margin: 0; aspect-ratio: 5 / 4; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse 60% 60% at 50% 50%, #17181b, #070708); }
.dsg-fig--contain .dsg-img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; }
.dsg-fig--cover .dsg-img { width: 100%; height: 100%; object-fit: cover; }
.dsg-img { transition: transform 1.2s var(--ease-out); transform: scale(1.03); }
.dsg-point.is-active .dsg-img { transform: none; }
.dsg-copy { display: grid; gap: 10px; max-width: 46rem; justify-items: start; }
.dsg-copy-title { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.22em; }
.dsg-copy-text { font-size: 1.0625rem; line-height: 1.65; color: var(--steel-2); }

/* -------------------------------------------------------- 05 ENGINEERING */
.eng { padding-block: var(--section); border-top: 1px solid var(--line); background: #000; }
.eng-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-3); }
.eng-head .hk { grid-column: 1 / -1; }
.eng-title { margin-top: 0; }
.eng-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.eng-tab { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 1rem; border-radius: 7px; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out); }
.eng-tab:hover { color: var(--paper); }
.eng-tab[aria-selected='true'] { background: var(--paper); color: #0a0a0b; }
.eng-tab:active { transform: scale(0.97); }
.eng-tab:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.eng-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-5); align-items: center; margin-top: var(--s-4); }
.eng-panel[hidden] { display: none; }
.eng-panel.is-in .eng-visual { animation: eng-in 0.8s var(--ease-out); }
.eng-panel.is-in .eng-copy { animation: eng-in 0.8s var(--ease-out) 0.08s both; }
@keyframes eng-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
.eng-panel:focus-visible { outline: 2px solid var(--paper); outline-offset: 6px; border-radius: 8px; }
.eng-fig { margin: 0; border-radius: 14px; overflow: hidden; background: #0b0b0c; }
.eng-fig--cover, .eng-fig--case { aspect-ratio: 4 / 3; }
.eng-fig--case { position: relative; background: radial-gradient(ellipse 60% 60% at 50% 50%, #17181b, #070708); }
.eng-fig--case .eng-img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.eng-fig--cover .eng-img { width: 100%; height: 100%; object-fit: cover; }
.eng-fig--movement { aspect-ratio: 4 / 3; }
.eng-fig--movement .eng-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; transform: scale(1.9); }
.eng-pair { display: grid; grid-template-columns: 0.55fr 1fr; gap: var(--s-2); align-items: end; }
.eng-fig--photo { display: grid; gap: 8px; background: none; }
.eng-fig--photo .eng-img { width: 100%; height: auto; border-radius: 12px; }
.eng-fig--photo figcaption { font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); }
.eng-lead { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -0.03em; }
.eng-facts { margin-top: var(--s-3); border-top: 1px solid var(--line); }
.eng-fact { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--s-2); padding: 14px 0; border-bottom: 1px solid var(--line); }
.eng-fact dt { font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); padding-top: 3px; }
.eng-fact dd { font-size: var(--t-small); line-height: 1.6; color: var(--paper); }
.eng-copy .instruments { margin-top: var(--s-3); }
.eng-specs { display: grid; justify-items: center; margin-top: var(--s-5); }
.eng-sheet { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--s-4); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.eng-sheet[hidden] { display: none; }
.eng-sheet.is-in { animation: eng-in 0.6s var(--ease-out); }
.eng-group-title { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel); }
.eng-rows { margin-top: 12px; }
.eng-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.eng-row dt { color: var(--steel-2); }

/* ---------------------------------------------------- 06 EVERY ANGLE (tt) */
.tt-head { text-align: center; }
.tt-sub { margin-top: 12px; font-size: var(--t-body); color: var(--steel-2); }
.tt-stage { touch-action: pan-y; cursor: default; }
.tt-stage:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.tt-media { transition: transform 0.25s var(--ease-out); }
.v360-hint { margin-top: 6px; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }

/* ------------------------------------------------------------- 08 BRAND */
.brand { padding-block: var(--section); border-top: 1px solid var(--line); background: #000; }
.brand-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.brand-fig { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.brand-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.brand-quote { margin: var(--s-3) 0 0; }
.brand-quote p { font-family: var(--f-serif); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--paper); }
.brand-by { margin-top: var(--s-2); font-size: var(--t-small); color: var(--steel-2); }
.brand-by span { color: var(--paper); margin-right: 0.4em; }
.brand-cta { margin-top: var(--s-4); }
.brand .ab-says { margin-top: var(--s-5); }

/* --------------------------------------------------------------- 09 FAQ */
.faq { padding-block: var(--section); border-top: 1px solid var(--line); background: #000; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-5); }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 64px; padding: 14px 0; font-size: 1.0625rem; font-weight: 500; cursor: pointer; list-style: none; transition: color 0.25s var(--ease-out); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: #fff; }
.faq-q:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; border-radius: 4px; }
.faq-icon { position: relative; flex: none; width: 14px; height: 14px; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px; margin-top: -0.75px; background: currentColor; transition: transform 0.35s var(--ease-out); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-a { padding: 0 0 22px; max-width: 60ch; font-size: var(--t-small); line-height: 1.7; color: var(--steel-2); }
.faq-item[open] .faq-a { animation: eng-in 0.45s var(--ease-out); }

@media (max-width: 900px) {
  .dsg-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .dsg-rail-inner { position: static; }
  .dsg-steps { display: none; }
  .dsg-points { gap: var(--s-5); }
  .dsg-point { opacity: 1; }
  .dsg-fig { aspect-ratio: 1; }
  .eng-head { grid-template-columns: minmax(0, 1fr); }
  .eng-tabs { justify-self: start; width: 100%; }
  .eng-tab { flex: 1; min-width: 0; justify-content: center; padding: 0 0.4rem; letter-spacing: 0.1em; }
  .eng-tabs { max-width: 100%; }
  .eng-panel { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .eng-fact { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .eng-sheet { grid-template-columns: minmax(0, 1fr); }
  .brand-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}
@media (max-width: 760px) {
  .hh-sig { gap: 0.8em; letter-spacing: 0.24em; }
  .meet.is-scene .meet-nav { right: 6px; }
  .meet.is-scene .meet-visual { --mh: 52svh; }
  .meet-mark { top: 4%; }
  .fin-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68vw; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .fin-row::-webkit-scrollbar { display: none; }
  .fin-item { scroll-snap-align: center; }
  .fin-media { max-height: 380px; }
}
@media (max-width: 380px) {
  .eng-tab { letter-spacing: 0.04em; font-size: 0.625rem; }
  .eng-row { grid-template-columns: 7rem minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .meet-watch, .meet-mark, .dsg-img, .dsg-line-fill, .dsg-point { transition: none; }
}

/* ====================================== CONFIGURE: REFINEMENT (2026-10-11) */
/* Client brief: the watch dominant, options compact and grouped, everything
   on one screen, no cards. Desktop: the watch on the left, the options in a
   slim column on the right. Phones: the watch, then the options separated by
   hairlines (the owner's reference), the bar at the bottom. */
.cfp-panel { padding: 16px 0 14px; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--line); }
.cfp-panel-title { float: left; width: 100%; margin: 0; line-height: 1.3; letter-spacing: 0.22em; }
.cfp-cases, .cfp-extras { clear: both; }

/* Case finish: three small round swatches with their names. */
.cfp-cases { justify-content: flex-start; gap: 18px; margin-top: 12px; }
.cfp-swatch { gap: 7px; padding: 2px; }
.cfp-swatch-mark { width: 44px; height: 44px; }
.cfp-swatch:has(input:checked) .cfp-swatch-mark { transform: scale(1.06); box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--paper); }



@media (min-width: 1000px) {
  .cfp {
    --stage-h: clamp(420px, calc(100svh - var(--nav-h) - var(--bar-h) - 13.5rem), 780px);
    grid-template-columns: minmax(0, 1fr) minmax(400px, 500px);
    grid-template-areas: "id panels" "stage panels" "bar bar";
    column-gap: var(--s-5);
    align-items: start;
  }
  .cfp-id { text-align: left; }
  .cfp-title { font-size: clamp(1.8rem, 2.6vw, 2.5rem); }
  .cfp-stage { margin-top: var(--s-1); }
  .cfp-panels { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; align-self: center; }
  .cfp-panel--case { border-top: 0; padding-top: 0; }
}
@media (max-width: 999px) {
  .cfp { --stage-h: clamp(240px, 34svh, 460px); padding-top: calc(var(--nav-h) + var(--bar-h) + 8px); }
  .cfp-panel { padding: 12px 0 10px; }
  .cfp-cases { margin-top: 8px; }
  .cfp-panels { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--s-1); }
  .cfp-model { display: none; }
  .cfp-eyebrow { font-size: 0.75rem; }
  .cfp-title { margin-top: 2px; font-size: 1.5rem; }
  .cfp-stage { margin-top: 4px; }
}

/* ======================= HOMEPAGE: MEET PROJECT 2 (owner's reference, 2026-10-11) */
/* The P2 mark across the top, the watch in front of it, the headline under
   it. Scrolling: the mark fades away and the watch grows a step with each
   statement under it (data-step 0 → 3 from scenes.js). */
.meet { padding: var(--s-5) var(--gutter); }
.meet-stage { display: flex; flex-direction: column; align-items: center; }
.meet-visual { position: relative; width: 100%; height: clamp(420px, 72vh, 820px); margin: 0; }
.meet-mark {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(88vw, 760px, 48vw + 200px);
  height: auto;
  transform: translateX(-50%);
  opacity: 0.92;
  -webkit-mask-image: linear-gradient(160deg, #000 25%, rgba(0, 0, 0, 0.5) 85%);
  mask-image: linear-gradient(160deg, #000 25%, rgba(0, 0, 0, 0.5) 85%);
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
}
.meet-watch { position: absolute; left: 0; right: 0; top: calc(min(88vw, 760px, 48vw + 200px) / 3.6 * 0.5); bottom: 0; display: flex; justify-content: center; transform-origin: 50% 42%; transition: transform 1.2s var(--ease-out); }
.meet-img { height: 100%; width: auto; max-width: none; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.85)); }
.meet-text { position: relative; z-index: 2; width: 100%; max-width: 46rem; text-align: center; }
.meet-intro { display: grid; justify-items: center; }
.meet-intro-title { display: grid; justify-items: center; font-size: clamp(1.5rem, 6.6vw, 2.75rem); font-weight: 300; letter-spacing: -0.015em; line-height: 1.16; color: #e6e6e4; }
.meet-intro-cta { margin-top: 22px; }
.meet-intro .btn-line { min-width: min(78vw, 300px); min-height: 42px; padding: 0 2rem; border-color: rgba(236, 235, 230, 0.38); border-radius: 3px; font-size: 0.625rem; letter-spacing: 0.24em; }
.meet-points { display: grid; gap: var(--s-4); max-width: none; margin: var(--s-5) 0 0; padding: 0; }
.meet-point-title { font-size: clamp(1.7rem, 3.4vw, 3rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.meet-point-body { margin-top: 10px; font-size: var(--t-small); line-height: 1.6; color: var(--steel-2); }

/* Pinned with motion allowed: one line at a time under the watch. */
.meet.is-scene { height: 380svh; padding: 0; }
.meet.is-scene .meet-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; padding: calc(var(--nav-h) + var(--bar-h) + 10px) var(--gutter) calc(env(safe-area-inset-bottom) + 28px); overflow: hidden; }
.meet.is-scene .meet-visual { flex: 1 1 auto; height: auto; min-height: 280px; overflow: visible; }
.meet.is-scene .meet-text { flex: none; height: 11.5rem; }
.meet.is-scene .meet-text::before { content: ''; position: absolute; left: 50%; bottom: -40px; width: 100vw; height: calc(100% + 120px); transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85) 45%, #000); pointer-events: none; z-index: -1; }
.meet.is-scene .meet-points { position: static; display: block; height: auto; margin: 0; }
.meet.is-scene .meet-intro,
.meet.is-scene .meet-point { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out); pointer-events: none; }
.meet.is-scene .meet-point { bottom: 1.5rem; }
.meet.is-scene[data-step='0'] [data-meet-point='0'],
.meet.is-scene[data-step='1'] [data-meet-point='1'],
.meet.is-scene[data-step='2'] [data-meet-point='2'],
.meet.is-scene[data-step='3'] [data-meet-point='3'] { opacity: 1; transform: none; transition-delay: 0.15s; pointer-events: auto; }
/* The mark fades away; the watch grows with each statement. */
.meet.is-scene .meet-mark { opacity: 0.92; transform: translateX(-50%); }
.meet.is-scene:not([data-step='0']) .meet-mark { opacity: 0; transform: translateX(-50%) translate3d(0, -14px, 0) scale(0.97); }
.meet.is-scene .meet-watch { transform: none; }
.meet.is-scene[data-step='1'] .meet-watch { transform: translate3d(0, -4%, 0) scale(1.28); }
.meet.is-scene[data-step='2'] .meet-watch { transform: translate3d(0, -6%, 0) scale(1.55); }
.meet.is-scene[data-step='3'] .meet-watch { transform: translate3d(0, -8%, 0) scale(1.82); }

@media (min-width: 900px) {
  .meet-mark { width: min(760px, 48vw, calc((100svh - var(--nav-h)) * 0.9)); }
  .meet-watch { top: calc(min(760px, 48vw, calc((100svh - var(--nav-h)) * 0.9)) / 3.6 * 0.42); }
  .meet-intro-title { font-size: clamp(2rem, 2.9vw, 2.9rem); }
  .meet-intro-cta { margin-top: 26px; }
  .meet-intro .btn-line { min-width: 320px; min-height: 46px; font-size: 0.6875rem; }
  .meet.is-scene .meet-text { height: 13rem; }
  /* Desktop: the watch wide and prominent from the start (owner), overlapping
     the mark and running down behind the headline; it still grows per step. */
  .meet.is-scene .meet-watch { top: calc(min(760px, 48vw, calc((100svh - var(--nav-h)) * 0.9)) / 3.6 * 0.3); bottom: -18%; transform-origin: 50% 30%; transform: scale(1.12); }
  .meet.is-scene[data-step='1'] .meet-watch { transform: translate3d(0, -2%, 0) scale(1.35); }
  .meet.is-scene[data-step='2'] .meet-watch { transform: translate3d(0, -3%, 0) scale(1.6); }
  .meet.is-scene[data-step='3'] .meet-watch { transform: translate3d(0, -4%, 0) scale(1.85); }
}
@media (prefers-reduced-motion: reduce) {
  .meet-mark, .meet-watch { transition: none; }
}

/* ========================================================= HOMEPAGE: DESIGN STACK */
/* The Design: the old specs page's stacking — each point holds under the nav
   while the next slides up over it (assets/js/stack.js, data-stack-top). */
.dsg-points.is-stacking { gap: var(--s-5); }
.dsg-points.is-stacking > .dsg-point {
  position: sticky;
  top: var(--stick, 0px);
  opacity: 1;
  padding: var(--s-3);
  border-radius: clamp(18px, 2.4vw, 28px);
  background: #000;
  transform-origin: 50% 0;
  scale: calc(1 - var(--cover, 0) * 0.04);
  filter: brightness(calc(1 - var(--cover, 0) * 0.55));
}
.dsg-points.is-stacking > .dsg-point + .dsg-point {
  background: #050506;
  box-shadow: 0 -1px 0 var(--line-strong), 0 -30px 60px -20px rgba(0, 0, 0, 0.9);
}
@media (min-width: 901px) {
  .dsg-points.is-stacking .dsg-fig { aspect-ratio: auto; height: clamp(260px, calc(100svh - var(--nav-h) - 22rem), 620px); }
}
/* The Design and The Proportions photographs carry their own dark backdrop;
   their edges fade into the panel so no rectangle shows (owner). */
.dsg-fig--contain .dsg-img {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}
/* The element hugs the photograph itself, so the fade reaches its edges. */
.dsg-fig--contain .dsg-img { inset: 4% 0; width: auto; height: 92%; max-width: 92%; margin: auto; }

/* ======================================= OWNER'S FIXES (2026-10-11, evening) */
/* After Dark: the strap runs full length, no fade at its ends. */
.dn-day, .dn-night { -webkit-mask-image: none; mask-image: none; }

/* Homepage: CONFIGURE YOUR P2 between the founder and the FAQ, the page's
   own outlined button, a touch larger (owner). */
.cfg-band { display: flex; justify-content: center; padding: var(--s-5) var(--gutter); border-top: 1px solid var(--line); background: #000; }
.cfg-band .btn-line { min-width: min(100%, 320px); min-height: 52px; }

/* Configurator bar: an underlined View cart before ADD TO CART. */
.cfp-viewcart {
  margin-left: auto;
  padding: 10px 4px;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
  transition: opacity 0.2s var(--ease-out);
}
.cfp-viewcart:hover { opacity: 0.7; }
.cfp-viewcart:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 3px; }
.cfp-viewcart:active { opacity: 0.5; }
.cfp-viewcart + .cfp-cta { margin-left: 0; }

/* Mobile nav: the bag icon and the two-line toggle, no MENU word. */
.nav-bag { display: none; position: relative; align-items: center; justify-content: center; width: 44px; height: 48px; color: var(--paper); transition: opacity 0.2s var(--ease-out); }
.nav-bag svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.nav-bag:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; border-radius: 6px; }
.nav-bag:active { opacity: 0.6; }
.nav-bag-count { position: absolute; top: 8px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--paper); color: #000; font-size: 0.625rem; font-weight: 600; line-height: 16px; text-align: center; }
.nav-bag-count[hidden] { display: none; }
@media (max-width: 900px) {
  .nav-bag { display: inline-flex; margin-left: auto; }
  .nav-toggle { margin-left: 4px; }
}

/* Engineering, Materials (owner, 2026-10-11): the case larger, the photo's
   black backdrop faded into the panel so no corners show. */
.eng-fig--case .eng-img {
  inset: 0;
  width: auto;
  height: 100%;
  max-width: 100%;
  margin: auto;
  transform: scale(1.32);
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
@media (max-width: 900px) {
  .cfp-bar-row .cfp-viewcart { padding: 10px 0; font-size: 0.625rem; letter-spacing: 0.14em; text-underline-offset: 4px; }
  .cfp-bar-row .cfp-cta { flex: 0 1 auto; white-space: nowrap; padding: 0 1rem; letter-spacing: 0.14em; }
  .cfp-bar-row .cfp-cta .cfp-cta-arrow { display: none; }
}
@media (max-width: 400px) {
  .cfp-bar-row { gap: 10px; }
  .cfp-bar-row .cfp-bar-price { padding-right: 10px; white-space: nowrap; }
  .cfp-bar-row .cfp-bar-label { letter-spacing: 0.14em; }
  .cfp-bar-row .cfp-bar-cur { display: none; }
  .cfp-bar-row .cfp-viewcart { letter-spacing: 0.08em; }
  .cfp-bar-row .cfp-cta { padding: 0 0.85rem; letter-spacing: 0.1em; }
}
@media (max-width: 365px) {
  .cfp-bar-row { gap: 8px; padding-left: 12px; }
  .cfp-bar-row .cfp-bar-price { padding-right: 8px; }
  .cfp-bar-row .cfp-viewcart { font-size: 0.5625rem; letter-spacing: 0.04em; }
  .cfp-bar-row .cfp-cta { padding: 0 0.7rem; font-size: 0.625rem; letter-spacing: 0.06em; }
}

/* The Philosophy: the three-finishes photograph shown whole, as supplied —
   no crop, no zoom (owner). */
.dsg-fig--whole { display: flex; justify-content: center; background: none; aspect-ratio: auto; }
.dsg-fig--whole .dsg-img { display: block; width: auto; height: 100%; max-width: 100%; border-radius: 14px; object-fit: contain; transform: none; }
.dsg-point.is-active .dsg-fig--whole .dsg-img { transform: none; }
@media (max-width: 900px) { .dsg-fig--whole { aspect-ratio: auto; } .dsg-fig--whole .dsg-img { width: 100%; height: auto; } }
/* Owner: full width. The photograph keeps all three watches whole; only the
   plain backdrop above the straps and the reflections below are trimmed. */
.dsg-fig--whole,
.dsg-points.is-stacking .dsg-fig--whole { display: block; aspect-ratio: 3 / 2; height: auto; border-radius: 14px; }
.dsg-fig--whole .dsg-img { width: 100%; height: 100%; max-width: none; border-radius: 0; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 900px) { .dsg-fig--whole .dsg-img { height: 100%; } }

/* Configurator (owner, 2026-10-11): the watch larger, phone and desktop. It
   overflows its stage into the title above and the floor below, so the page
   still fits one screen. */
.cfp-stage .cfx-watch { inset: -10% 0 -6%; }
@media (min-width: 901px) { .cfp-stage .cfx-watch { inset: -22% 0 -20%; } }
@media (max-width: 999px) { .cfp { --stage-h: clamp(270px, 40svh, 500px); } }
/* The bar never squeezes ADD TO CART: the price note wraps instead (extra
   straps make it long). */
.cfp-bar-row .cfp-cta, .cfp-bar-row .cfp-viewcart { flex: none; }
.cfp-bar-row .cfp-bar-price, .cfp-bar-row .cfp-bar-cart { flex: 1 1 auto; min-width: 0; }
@media (max-width: 900px) {
  .cfp-bar-row .cfp-bar-price { white-space: normal; }
  .cfp-bar-row .cfp-bar-amount { white-space: nowrap; }
  .cfp-bar-row .cfp-bar-note { font-size: 0.625rem; line-height: 1.35; }
}

/* ======================================== PHONE HEADER: A SOLID SHEET (2026-10-11) */
/* Phones: the header is opaque from the first paint, not only once scrolled.
   It used to be transparent until 24px of scroll and then fade in over 0.4s,
   so text and images showed through it at the top of the page and while it
   faded. Now page content passes underneath and disappears. The nav itself
   carries the colour (iOS Safari tints the status bar from it). Its upward
   shadow also covers the strip above it while the trust bar slides away and
   during iOS overscroll. Only transform is animated. */
@media (max-width: 900px) {
  .nav,
  .nav.is-scrolled,
  .nav.is-open {
    background-color: #060708;
    box-shadow: 0 -120px 0 0 #060708;
    transition: transform 0.5s var(--ease-out);
  }
  .nav::before,
  .nav.is-scrolled::before,
  .nav.is-open::before {
    opacity: 1;
    background: #060708;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none;
  }
}

/* Engineering → Movement: the supplied film of the movement running, filling
   the panel; silent, looping (assets/js/video.js). */
.eng-fig--film { position: relative; background: #000; }
.eng-fig--film .eng-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Engineering → Construction: the side and the case-back photographs at the
   same height (owner); each fills its frame. */
.eng-pair { align-items: stretch; }
.eng-pair .eng-fig--photo { grid-template-rows: clamp(300px, 34vw, 540px) auto; }
.eng-pair .eng-fig--photo .eng-img { height: 100%; object-fit: cover; }
.eng-pair .eng-fig--photo picture { display: block; height: 100%; min-height: 0; }
@media (max-width: 900px) { .eng-pair .eng-fig--photo { grid-template-rows: clamp(220px, 68vw, 400px) auto; } }
/* Owner: this one white — the same outlined button, filled; on hover it
   turns to the outline (the reverse of the others). */
.cfg-band .btn-line { background: var(--paper); border-color: var(--paper); color: #0a0a0b; }
.cfg-band .btn-line:hover { background: transparent; border-color: rgba(236, 235, 230, 0.5); color: var(--paper); }

/* Full specification (owner: it looked messy): three columns, each a stack of
   groups with even spacing; labels in one fixed column, values aligned. */
.eng-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-5); align-items: start; }
.eng-col { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.eng-group-title { padding-bottom: 10px; border-bottom: 1px solid var(--line-strong); }
.eng-rows { margin-top: 0; }
.eng-row { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 16px; padding: 12px 0; line-height: 1.5; }
.eng-row dd { color: var(--paper); }
@media (max-width: 1100px) { .eng-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-4); } .eng-col:last-child { grid-column: 1 / -1; } }
@media (max-width: 900px) { .eng-sheet { grid-template-columns: minmax(0, 1fr); } .eng-col:last-child { grid-column: auto; } .eng-row { grid-template-columns: 8rem minmax(0, 1fr); } }

/* ===================================== CONFIGURE: HEADER STAYS AT THE TOP */
/* (assets/js/nav.js followFrom) In the configurator the header sits at the
   top of the page and scrolls away; from the additional straps it drops in
   and follows; leaving them upwards it slides away. Open menu: always fixed. */
html.nav-local .nav[data-nav]:not(.is-following):not(.is-open) { position: absolute; transform: none; }
html.nav-local .nav[data-nav].is-following:not(.is-leaving) { animation: nav-drop 0.45s var(--ease-out); }
html.nav-local .nav[data-nav].is-following.is-leaving:not(.is-open) { transform: translate3d(0, -110%, 0); transition: transform 0.3s var(--ease-out); }
@keyframes nav-drop { from { transform: translate3d(0, -110%, 0); } }
@media (prefers-reduced-motion: reduce) {
  html.nav-local .nav[data-nav].is-following:not(.is-leaving) { animation: none; }
  html.nav-local .nav[data-nav].is-following.is-leaving:not(.is-open) { transition: none; }
}

/* ================================================ CLIENT ROUND (2026-10-12) */

/* Header: the official wordmark in the exact centre. Equal outer columns, so
   the logo is centred on the header whatever sits either side. */
.nav-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); justify-content: initial; }
.nav-side { display: flex; align-items: center; min-width: 0; }
.nav-side--end { justify-content: flex-end; }
.wordmark { justify-self: center; }
@media (max-width: 900px) {
  .nav-cart { display: none; }
  .nav-toggle { margin: 0 0 0 -12px; padding: 0 12px; }
  .nav-bag { display: inline-flex; margin: 0 -10px 0 0; }
}

/* Homepage hero: nothing over the film but the three figures and
   CONFIGURE P2, low in the frame, so the film has the screen. */
.hh { place-items: end center; padding-bottom: calc(env(safe-area-inset-bottom) + 84px); }
.hh-cta { margin-top: var(--s-3); }

/* Meet the Project 2: the section's heading, in the page's title style. */
.meet-intro-title { display: block; font-size: clamp(1.9rem, 7.4vw, 3.4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; white-space: nowrap; color: var(--paper); }
.meet-intro-cta { margin-top: var(--s-3); }

/* Founder quote: the site's sans, upright (client: not the italic serif),
   as on /about. */
.brand-quote p { font-family: var(--f-sans); font-style: normal; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.35; letter-spacing: -0.02em; }

/* The Design: the first point rises into view as the ones after it do. */
.js .dsg-point[data-reveal] { transform: translate3d(0, 14vh, 0); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); }
.js .dsg-point[data-reveal].is-in { transform: none; }

/* The Design on phones: one connected sequence (client reference) — a
   continuous line down the left with a node at each point's number and
   title; the line starts at the first node and ends at the last. Each card
   still slides over the one before. */
@media (max-width: 900px) {
  .dsg-points, .dsg-points.is-stacking { gap: 0; }
  /* Relative without the stack; sticky (the slide-up) with it. Either way the
     card anchors its line and node. */
  .dsg-points > .dsg-point { position: relative; }
  .dsg-points > .dsg-point,
  .dsg-points.is-stacking > .dsg-point { padding: var(--s-2) 0 var(--s-4) 34px; border-radius: 0; }
  .dsg-points.is-stacking > .dsg-point + .dsg-point { box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, 0.9); }
  /* Covered cards dim but keep their size, so the line stays continuous. */
  .dsg-points.is-stacking > .dsg-point { scale: none; }
  .dsg-point .dsg-copy { order: -1; }
  .dsg-point::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
  .dsg-point:first-child::before { top: calc(var(--s-2) + 10px); }
  .dsg-point:last-child::before { bottom: auto; height: calc(var(--s-2) + 10px); }
  .dsg-point::after { content: ''; position: absolute; left: 6px; top: calc(var(--s-2) + 6px); width: 9px; height: 9px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1px var(--steel); transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
  .dsg-point.is-active::after { background: var(--paper); box-shadow: 0 0 0 4px rgba(236, 235, 230, 0.15); }
  .dsg-copy { align-content: start; }
}

/* Configurator: Extra strap — one optional row of colours, added to the cart
   with the watch ($99 each). */
.cfp-panel-price { margin-left: 8px; font-weight: 400; letter-spacing: 0.06em; text-transform: none; color: var(--steel); }
.cfp-extras { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.cfp-extra { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.cfp-extra input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cfp-extra-mark { width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); transition: transform 0.35s var(--ease-spring); pointer-events: none; }
.cfp-extra::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--paper); opacity: 0; transform: scale(0.85); transition: opacity 0.25s var(--ease-out), transform 0.35s var(--ease-spring); pointer-events: none; }
.cfp-extra:has(input:checked)::after { opacity: 1; transform: none; }
.cfp-extra:hover .cfp-extra-mark { transform: scale(1.08); }
.cfp-extra:active .cfp-extra-mark { transform: scale(0.92); }
.cfp-extra:has(input:focus-visible) { outline: 2px solid var(--paper); outline-offset: 1px; }

/* Configurator bar: ADD TO CART · View cart, then CHECKOUT · Add to cart. */
.cfp-cta[hidden], .cfp-viewcart[hidden] { display: none; }
.cfp-addmore.is-added span::before { content: '✓ '; }
.cfp-bar-row { position: relative; }
.cfp-checkout-status { position: absolute; left: 16px; right: 16px; bottom: calc(100% + 8px); margin: 0; padding: 8px 12px; border-radius: 10px; background: #111214; font-size: 0.8125rem; color: var(--paper); }
.cfp-checkout-status:empty { display: none; }

/* /configure/: the full specification follows straight on from the configurator. */
.cfg + .sheet-sec { padding-top: var(--s-5); }

/* Configurator (client, 2026-10-12): the case swatches the size of the strap
   colours, with the same selected ring; the watch larger on phones (it
   overflows its stage into the title and floor, so nothing below moves). */
.cfp-swatch-mark { width: 28px; height: 28px; box-shadow: 0 0 0 1px rgba(236, 235, 230, 0.28), 0 6px 14px -8px rgba(0, 0, 0, 0.9); }
.cfp-swatch:has(input:checked) .cfp-swatch-mark { transform: scale(1.12); box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--paper); }
.cfp-swatch { gap: 6px; }
@media (max-width: 900px) {
  .cfp { --stage-h: clamp(290px, 43svh, 520px); }
  .cfp-stage .cfx-watch { inset: -12% 0 -22%; } /* same size, a little lower: clear of the title */
  .cfp-id { position: relative; z-index: 2; }
}
/* The panels have no names under their titles now (client, 2026-10-12):
   the space below the floated title carries the gap to the circles. */
.cfp-panel-title { padding-bottom: 12px; }

/* Finishes on phones: a sideways row only — never pulled up and down. */
@media (max-width: 900px) {
  .fin-row { overflow-y: hidden; overscroll-behavior-x: contain; }
}

/* The Design on phones (client, 2026-10-12): the first point's node is the
   mark. Every card stops at the same place, so each later node slides up and
   sits exactly on it, and lights up; nothing (node or line) goes above it.
   Each card fits the screen (so none is pushed higher), its node sits at its
   very top, and the line runs only from a node downwards, ending at the last. */
@media (max-width: 900px) {
  .dsg-points > .dsg-point,
  .dsg-points.is-stacking > .dsg-point { padding-top: 0; }
  .dsg-point::after { top: 4px; }
  .dsg-point::before,
  .dsg-point:first-child::before { top: 8px; bottom: 0; height: auto; }
  .dsg-point:last-child::before { display: none; }
  .dsg-points .dsg-fig,
  .dsg-points.is-stacking .dsg-fig,
  .dsg-points .dsg-fig--whole { aspect-ratio: auto; height: clamp(150px, 30svh, 300px); }
}

/* Short phones: a little less picture and tighter text, so every Design card
   fits under the header and lands on the mark. */
@media (max-width: 900px) and (max-height: 760px) {
  .dsg-points .dsg-fig, .dsg-points.is-stacking .dsg-fig, .dsg-points .dsg-fig--whole { height: clamp(130px, 24svh, 240px); }
}
@media (max-width: 380px) {
  .dsg-copy-text { font-size: 1rem; line-height: 1.55; }
}
/* …and every card is the same height (the screen under the header), so the
   stack holds and leaves together: no earlier node shows above the mark. */
@media (max-width: 900px) {
  .dsg-points.is-stacking > .dsg-point { min-height: calc(100svh - var(--nav-h) - 24px); align-content: start; }
}
/* …and the finished stack holds for a moment before the section moves on, so
   the last point rests on the mark too. */
@media (max-width: 900px) {
  .dsg-points.is-stacking::after { content: ''; height: 35svh; }
}

/* Compare on phones: all three cases fit their card (Grey was cut off). */
@media (max-width: 760px) {
  .cmp-cases { gap: 2px; }
  .cmp-case { padding: 8px 0; gap: 6px; }
  .cmp-case-mark { width: 38px; height: 38px; }
  .cmp-case .cmp-swatch-name { font-size: 0.6875rem; line-height: 1.25; }
}

/* ================================================ CLIENT ROUND (2026-10-13) */

/* Hero: the headline over the three figures, one composition, low in the
   frame so the film keeps the screen. */
.hh-title { display: grid; justify-items: center; gap: 10px; margin-bottom: var(--s-3); font-size: clamp(1.35rem, 2.6vw, 2.15rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; color: var(--paper); }
.hh-line { display: block; max-width: 22ch; text-wrap: balance; }
.hh-aside { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--steel); }

/* Meet the Project 2: the hero's type (regular weight, tight tracking), with
   a quieter line under it, as one heading group. */
.meet-intro-head { display: grid; justify-items: center; gap: 10px; margin: 0; }
.meet-intro-title { font-weight: 400; letter-spacing: -0.02em; }
.meet-intro-sub { font-size: clamp(0.9375rem, 1.3vw, 1.125rem); font-weight: 400; letter-spacing: -0.005em; line-height: 1.4; color: var(--steel-2); }

/* The Design: heading "01 — THE PHILOSOPHY", the introduction, then READ MORE
   opens the rest in place (assets/js/home.js). Without JavaScript all of it
   shows. */
.js .dsg-more { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.55s var(--ease-out), visibility 0s linear 0.55s; }
.js .dsg-more.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.55s var(--ease-out), visibility 0s; }
.dsg-more-inner { display: grid; gap: 10px; min-height: 0; overflow: hidden; }
.dsg-more-btn { display: none; }
.js .dsg-more-btn { display: inline-flex; align-items: center; min-height: 36px; margin-top: 2px; padding: 0; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel-2); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; transition: color 0.25s var(--ease-out), opacity 0.2s var(--ease-out); }
.dsg-more-btn:hover { color: var(--paper); }
.dsg-more-btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; border-radius: 2px; }
.dsg-more-btn:active { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .js .dsg-more, .js .dsg-more.is-open { transition: none; } }

/* The Design on phones: the text sits a little lower in each card (breathing
   room from its top edge); the node and line move with it, so the mark is the
   same for every card. */
@media (max-width: 900px) {
  .dsg-points > .dsg-point,
  .dsg-points.is-stacking > .dsg-point { padding-top: var(--s-3); }
  .dsg-point::after { top: calc(var(--s-3) + 4px); }
  .dsg-point::before,
  .dsg-point:first-child::before { top: calc(var(--s-3) + 8px); }
}

/* After Dark: the client's description under the heading. */
.dn-lead { max-width: 38rem; margin: 0 auto; text-align: center; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.6; color: var(--steel-2); text-wrap: pretty; }

/* Configurator on phones (client reference, 2026-10-13): one screen — the
   watch, then two one-line rows (Case; Extra strap, the only strap choice),
   then the bar. The title stays for screen readers; the extra-strap circles
   keep their size. */
@media (max-width: 999px) {
  .cfp { --stage-h: clamp(210px, calc(100svh - var(--nav-h) - var(--bar-h) - 17rem), 540px); }
  .cfp-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cfp-panel { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 6px; padding: 8px 0; }
  /* Still floated, so it is laid out as a row item, not drawn on the border. */
  .cfp-panel-title { float: left; width: auto; flex: none; min-width: 5.75rem; padding: 0; line-height: 1.35; }
  .cfp-panel--extra .cfp-panel-price { display: block; margin: 2px 0 0; }
  .cfp-cases, .cfp-extras { clear: none; margin: 0; flex-wrap: nowrap; }
  .cfp-cases { gap: 10px; }
}
@media (max-width: 999px) {
  .cfp-panel-title { min-width: 4.5rem; font-size: 0.625rem; letter-spacing: 0.14em; }
  .cfp-cases { gap: 4px; }
  .cfp-extras { gap: 0; }
}
@media (max-width: 999px) {
  .cfp-panel { column-gap: 10px; }
}
/* Very narrow phones: the colours sit under their label; the watch makes room. */
@media (max-width: 365px) {
  .cfp { --stage-h: clamp(180px, calc(100svh - var(--nav-h) - var(--bar-h) - 19rem), 540px); }
}

/* Extra strap row (client, 2026-10-13): the strap on show is on the watch.
   A paid extra has the full ring; the included colour, when shown, a lighter
   one (it is never ticked or charged). Seven colours fit one line on phones. */
.cfp-extra.is-shown:not(:has(input:checked))::after { opacity: 0.55; transform: none; box-shadow: 0 0 0 1px var(--paper); }
@media (max-width: 999px) {
  .cfp-extra { width: 36px; }
}

/* ================================================ CLIENT ROUND (2026-10-14) */

/* Configurator: the watch framed whole inside its circle, the same margin all
   round, whatever the case, strap or screen size. The circle is the stage's
   height (or its width, if narrower); the picture is that tall, and the
   watch in it reaches 42% of the way out from the centre. */
.cfp-stage { container-type: size; }
.cfp-stage::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100cqw, 100cqh);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(205, 212, 226, 0.13), transparent 70%),
    radial-gradient(closest-side, color-mix(in srgb, var(--glow, #888) 22%, transparent), transparent 100%);
  box-shadow: inset 0 0 0 1px rgba(236, 235, 230, 0.13), 0 30px 80px -40px rgba(120, 130, 150, 0.35);
  pointer-events: none;
}
.cfp-stage .cfx-watch { inset: 0; }
.cfp-stage .cfx-watch::before,
.cfp-stage .cfx-watch::after,
.cfp-floor { display: none; }
.cfp-stage .cfg-shot-img { height: min(100cqw, 100cqh); width: auto; max-width: none; }

/* The options (client reference, 2026-10-14): one line per option — its
   label on the left, its colours beside it — on every screen. The labels
   share one column, so every row's colours start on the same line, and case
   and strap colours are the same size. */
.cfp-panel {
  --lab: 10rem;
  display: grid;
  grid-template-columns: var(--lab) minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  padding: 10px 0;
}
/* Floated, so it is laid out as a grid item, not drawn on the border. */
.cfp-panel-title { float: left; width: auto; min-width: 0; margin: 0; padding: 0; line-height: 1.35; white-space: nowrap; }
.cfp-panel--extra .cfp-panel-price { display: inline; margin: 0 0 0 6px; }
.cfp-cases, .cfp-extras { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 4px; margin: 0; clear: none; }

/* One size of colour for both: a 40px target (36px on phones), a 26px circle. */
.cfp-swatch,
.cfp-extra { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer; }
.cfp-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cfp-swatch-mark,
.cfp-extra-mark { width: 26px; height: 26px; }
.cfp-swatch-mark { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); pointer-events: none; transition: transform 0.35s var(--ease-spring); }
.cfp-swatch:hover .cfp-swatch-mark { transform: scale(1.08); }
.cfp-swatch:active .cfp-swatch-mark { transform: scale(0.92); }
.cfp-swatch:has(input:checked) .cfp-swatch-mark { transform: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
/* The selected ring: the same for a case and a strap. */
.cfp-swatch::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--paper); opacity: 0; transform: scale(0.85); transition: opacity 0.25s var(--ease-out), transform 0.35s var(--ease-spring); pointer-events: none; }
.cfp-swatch:has(input:checked)::after { opacity: 1; transform: none; }
.cfp-swatch:has(input:focus-visible) { outline: 2px solid var(--paper); outline-offset: 1px; }

@media (max-width: 999px) {
  .cfp-panel { --lab: 4.75rem; column-gap: 8px; padding: 6px 0; }
  .cfp-panel-title { white-space: normal; }
  .cfp-panel--extra .cfp-panel-price { display: block; margin: 2px 0 0; }
  .cfp-swatch, .cfp-extra { width: 36px; height: 36px; }
  .cfp-cases, .cfp-extras { gap: 0; }
  .cfp { --stage-h: clamp(210px, calc(100svh - var(--nav-h) - var(--bar-h) - 17rem), 540px); }
}
@media (max-width: 365px) {
  .cfp { --stage-h: clamp(180px, calc(100svh - var(--nav-h) - var(--bar-h) - 19rem), 540px); }
  .cfp-panel { --lab: 4rem; column-gap: 6px; }
  .cfp-swatch, .cfp-extra { width: 30px; }
  .cfp-swatch-mark, .cfp-extra-mark { width: 24px; height: 24px; }
}
/* Desktop: the whole circle clear of the bar. */
@media (min-width: 1000px) {
  .cfp { --stage-h: clamp(360px, calc(100svh - var(--nav-h) - var(--bar-h) - 16rem), 760px); }
}

/* /shipping: the two-column delivery table stays a table on phones. */
.lg-table--two tbody th { min-width: 0; }
@media (max-width: 760px) {
  .lg-table-wrap:has(.lg-table--two) { border: 1px solid var(--line); }
  .lg-table--two { display: table; }
  .lg-table--two thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .lg-table--two tbody { display: table-row-group; }
  .lg-table--two tr { display: table-row; width: auto; }
  .lg-table--two th, .lg-table--two td { display: table-cell; width: auto; padding: 10px 12px; }
  .lg-table--two td::before { content: none; }
}

/* Header (client, 2026-10-14): a floating bar over the page, not a
   full-width strip. The wordmark stays in the exact centre (equal outer
   columns); the bar is always tinted and blurred, so its controls read over
   dark and light sections alike. It keeps the header's height, so nothing
   under it moves. The trust bar above it is unchanged. */
.nav { --float-x: clamp(10px, 1.6vw, 24px); --float-top: 10px; }
.nav::before,
.nav.is-scrolled::before,
.nav.is-open::before { display: none; }
.nav-inner {
  width: calc(100% - 2 * var(--float-x));
  max-width: calc(var(--max) - 2 * var(--gutter) + 2 * clamp(16px, 2vw, 28px));
  height: calc(var(--nav-h) - var(--float-top));
  margin: var(--float-top) auto 0;
  padding-inline: clamp(16px, 2vw, 28px);
  border-radius: 14px;
  background: rgba(10, 11, 13, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px rgba(236, 235, 230, 0.1),
    0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
    0 12px 32px -14px rgba(0, 0, 0, 0.75),
    0 2px 8px -2px rgba(0, 0, 0, 0.45);
}
@media (max-width: 900px) {
  /* Phones: no full-width sheet behind it; the bar itself is solid (no text
     shows through its controls), floating in from the edges. */
  .nav { --float-x: 8px; --float-top: 8px; }
  .nav,
  .nav.is-scrolled,
  .nav.is-open { background-color: transparent; box-shadow: none; }
  .nav-inner { padding-inline: 14px; border-radius: 12px; background: rgba(9, 10, 12, 0.94); }
  .nav-toggle { margin-left: -8px; }
  .nav-bag { margin-right: -8px; }
  /* The open menu: the whole screen, the bar floating at its top. */
  .nav.is-open { background-color: var(--black); }
}
@media (prefers-reduced-transparency: reduce) {
  .nav-inner { background: #0a0b0d; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Meet the Project 2 (client, 2026-10-14): the heading in the hero title's
   type, and the line under it in "We think so."'s — the same rules. */
.meet-intro-title,
.hh-title { font-size: clamp(1.35rem, 2.6vw, 2.15rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; color: var(--paper); }
.meet-intro-title { display: block; max-width: 22ch; text-transform: none; white-space: normal; text-wrap: balance; }
.meet-intro-sub,
.hh-aside { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.32em; line-height: 1.6; text-transform: uppercase; color: var(--steel); }
.meet-intro-sub { max-width: none; text-wrap: balance; }

/* The large P2 (client, 2026-10-14): lit by scrolling, as /about's closing
   line is read — dark as the section arrives, full as the visitor scrolls
   on (the scene's --p, scenes.js), then one sweep of light crosses the
   letters. Scrolling back reverses it. Opacity and transform only; with
   reduced motion, or no scene, it is simply lit. */
.meet-mark-img { display: block; width: 100%; height: auto; }
.meet-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: url('/images/brand/p2@2x.png') center / 100% 100% no-repeat;
  mask: url('/images/brand/p2@2x.png') center / 100% 100% no-repeat;
  pointer-events: none;
}
.meet-shine::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 34%;
  background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, 0.85) 50%, transparent 90%);
  transform: translate3d(-110%, 0, 0);
}
.meet.is-scene[data-step='0'] .meet-mark {
  --lit: clamp(0, var(--p, 1) * 7, 1);
  opacity: calc(0.14 + 0.78 * var(--lit));
  transition: opacity 0.12s linear, transform 1.1s var(--ease-out);
}
.meet.is-scene[data-step='0'] .meet-shine::before {
  --s: clamp(0, (var(--p, 1) - 0.145) * 10, 1);
  transform: translate3d(calc((-1.1 + 4.2 * var(--s)) * 100%), 0, 0);
}

/* Customer testimonial (client, 2026-10-14): the site's own sans, upright —
   not the decorative serif — on the homepage and /about (Reviews.js). */
.ab-quote-lead p { font-family: var(--f-sans); font-style: normal; font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.35; letter-spacing: -0.02em; max-width: 36ch; }
@media (max-width: 640px) {
  .ab-quote-lead p { font-size: 1.3rem; line-height: 1.4; }
}

/* Phones (client, 2026-10-14): smaller colours — a 20px circle in a 32px
   target, the selected ring drawn just outside it. Case and strap alike. */
@media (max-width: 999px) {
  .cfp-swatch, .cfp-extra { width: 32px; height: 32px; }
  .cfp-swatch-mark, .cfp-extra-mark { width: 20px; height: 20px; }
  .cfp-swatch::after, .cfp-extra::after { inset: 4px; }
  .cfp-cases, .cfp-extras { gap: 2px; }
}
@media (max-width: 365px) {
  .cfp-swatch, .cfp-extra { width: 29px; height: 32px; }
  .cfp-swatch-mark, .cfp-extra-mark { width: 18px; height: 18px; }
  .cfp-swatch::after, .cfp-extra::after { inset: 4px 3px; }
  .cfp-cases, .cfp-extras { gap: 0; }
}

/* Configurator (client, 2026-10-14): the strap colours sit half a step to
   the right of the case colours, each between two above it — not in a
   straight column under them. Sizes unchanged. */
.cfp-extras { margin-left: 22px; }                    /* (40px + 4px) / 2 */
@media (max-width: 999px) { .cfp-extras { margin-left: 17px; } }   /* (32px + 2px) / 2 */
@media (max-width: 365px) {
  .cfp-panel { --lab: 3.4rem; column-gap: 4px; }
  .cfp-extras { margin-left: 14.5px; }                /* 29px / 2 */
}

/* The option rows (client reference, 2026-10-14): the label on the left, a
   hairline, then the colours — on one line, on every browser. The row is a
   div inside the fieldset: Safari will not lay out a fieldset's own children
   side by side, so the label was falling above the colours on iPhones. */
.cfp-panel { display: block; }
.cfp-row { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: center; column-gap: 14px; }
.cfp-row .cfp-panel-title { display: block; float: none; align-self: center; padding: 6px 12px 6px 0; border-right: 1px solid var(--line); }
.cfp-panels .cfp-panel:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 999px) {
  .cfp-row { column-gap: 10px; }
  .cfp-row .cfp-panel-title { padding-right: 8px; }
}
@media (max-width: 365px) {
  .cfp-row { column-gap: 6px; }
  .cfp-row .cfp-panel-title { padding-right: 4px; }
}

/* The option rows, final (client, 2026-10-14): the label flat on one line,
   its middle on the middle of the circles. A flex row (no grid, no fieldset
   layout), the same in every browser. On phones the price hangs just under
   "Extra strap", so the words themselves stay on the circles' line; the
   circles keep their size (20px), in a slightly narrower 30px target. */
.cfp-row { display: flex; align-items: center; gap: 14px; }
.cfp-row .cfp-panel-title { position: relative; flex: 0 0 var(--lab); box-sizing: border-box; white-space: nowrap; line-height: 1.2; }
.cfp-row .cfp-cases, .cfp-row .cfp-extras { flex: 0 1 auto; min-width: 0; }
@media (max-width: 999px) {
  .cfp-panel { --lab: 6.6rem; padding: 10px 0; }
  .cfp-row { gap: 8px; }
  .cfp-row .cfp-panel-title { padding: 4px 8px 4px 0; font-size: 0.625rem; letter-spacing: 0.12em; }
  .cfp-panel--extra .cfp-panel-price { position: absolute; left: 0; top: 100%; margin: 0; font-size: 0.625rem; letter-spacing: 0.06em; }
  .cfp-panel--extra { padding-bottom: 14px; }
  .cfp-swatch, .cfp-extra { width: 30px; }
  .cfp-swatch::after, .cfp-extra::after { inset: 5px 4px; }
  .cfp-extras { margin-left: 16px; }                    /* (30px + 2px) / 2 */
}
@media (max-width: 365px) {
  .cfp-panel { --lab: 5.9rem; }
  .cfp-row { gap: 5px; }
  .cfp-row .cfp-panel-title { padding-right: 5px; letter-spacing: 0.06em; }
  .cfp-swatch, .cfp-extra { width: 27px; }
  .cfp-swatch::after, .cfp-extra::after { inset: 5px 2.5px; }
  .cfp-extras { margin-left: 13.5px; }
}
@media (max-width: 389px) {
  .cfp-panel { --lab: 6rem; }
  .cfp-row { gap: 6px; }
  .cfp-row .cfp-panel-title { letter-spacing: 0.08em; }
  .cfp-swatch, .cfp-extra { width: 29px; }
  .cfp-swatch::after, .cfp-extra::after { inset: 5px 3.5px; }
  .cfp-extras { margin-left: 15.5px; }
}
@media (max-width: 340px) {
  .cfp-panel { --lab: 5.25rem; }
  .cfp-row { gap: 4px; }
  .cfp-row .cfp-panel-title { padding-right: 4px; letter-spacing: 0.04em; }
  .cfp-swatch, .cfp-extra { width: 26px; }
  .cfp-swatch::after, .cfp-extra::after { inset: 5px 2px; }
  .cfp-extras { margin-left: 13px; }
}
/* Half a step exactly where the colours sit edge to edge (≤365px: no gap). */
@media (max-width: 365px) { .cfp-extras { margin-left: 14.5px; } }
@media (max-width: 340px) { .cfp-extras { margin-left: 13px; } }

/* About (client, 2026-10-15): the opening sentence of Our mission and
   Challenging the Old Rules in the site's sans, not the condensed serif —
   the same face as the paragraphs under it, a step larger and in white, as
   a lead. */
.ab-lead { font-family: var(--f-sans); font-style: normal; font-weight: 400; font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.4; letter-spacing: -0.015em; color: var(--paper); }

/* Your selection: extra straps listed under the watches (client, 2026-10-15). */
.cfp-sel-item--strap { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
.cfp-sel-dot { justify-self: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
@media (max-width: 640px) { .cfp-sel-item--strap { grid-template-columns: 34px minmax(0, 1fr) auto; } }

/* ============================================ STOCK + WAITLIST (2026-10-15) */
/* JOIN WAITLIST takes ADD TO CART's place when Shopify can't sell the chosen
   finish (configurator.js). The form opens above the bar, in the bar's own
   surface: a line, a sentence, the email, NOTIFY ME (client reference). */
.cfp-notify[hidden], .cfp-wait[hidden], .cfp-wait-form[hidden] { display: none; }
.cfp-wait {
  position: relative;
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
  padding: 20px 22px 16px;
  border-radius: 18px;
  background: rgba(12, 13, 15, 0.97);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 -18px 50px -24px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: center;
}
.cfp-wait-title { padding-inline: 32px; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; color: var(--paper); }
.cfp-wait-text { font-size: 0.875rem; line-height: 1.5; color: var(--steel-2); text-wrap: balance; }
.cfp-wait-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 4px; }
.cfp-wait-email {
  min-width: 0;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(236, 235, 230, 0.32);
  border-radius: 12px;
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: 1rem; /* 16px: no zoom on iOS */
  transition: border-color 0.2s var(--ease-out);
}
.cfp-wait-email::placeholder { color: var(--steel); }
.cfp-wait-email:hover { border-color: rgba(236, 235, 230, 0.55); }
.cfp-wait-email:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; border-color: var(--paper); }
.cfp-wait-email[aria-invalid='true'] { border-color: #e0786a; }
.cfp-wait-submit { min-width: 9rem; border-radius: 12px; }
.cfp-wait-submit:disabled { opacity: 0.6; cursor: progress; }
.cfp-wait-status { font-size: 0.875rem; line-height: 1.5; color: var(--paper); }
.cfp-wait-status:empty { display: none; }
.cfp-wait-status[data-state='error'] { color: #f0a497; }
.cfp-wait-note { font-size: 0.75rem; color: var(--steel); }
.cfp-wait-note .cfp-link { min-height: 0; padding: 0; font-size: inherit; color: var(--steel-2); }
.cfp-wait-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--steel-2); transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.cfp-wait-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.cfp-wait-close:hover { background-color: rgba(236, 235, 230, 0.08); color: var(--paper); }
.cfp-wait-close:active { transform: scale(0.94); }
.cfp-wait-close:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
/* The honeypot: off screen, out of the tab order, for bots only. */
.cfp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 640px) {
  .cfp-wait { padding: 18px 14px 14px; }
  .cfp-wait-form { grid-template-columns: minmax(0, 1fr); }
  .cfp-wait-submit { width: 100%; }
}

/* A strap colour Shopify can't sell: dimmed and struck through, not tickable. */
.cfp-extra.is-soldout { cursor: not-allowed; }
.cfp-extra.is-soldout .cfp-extra-mark { opacity: 0.32; }
.cfp-extra.is-soldout::before { content: ''; position: absolute; left: 50%; top: 50%; width: 70%; height: 1.5px; background: var(--steel-2); transform: translate(-50%, -50%) rotate(-45deg); pointer-events: none; }
.cfp-extra.is-soldout input { cursor: not-allowed; }
.cfp-extra.is-soldout:hover .cfp-extra-mark { transform: none; }

/* ======================================== CLIENT ROUND (2026-10-16) */

/* Header: genuinely floating (client references: AP, Richard Mille). No bar,
   no box: the logo, links and cart sit straight over the page. Once the page
   moves under them, a soft shade fades in behind — a gradient, never a strip
   with an edge — so they stay legible over light and dark sections. */
.nav-inner,
.nav.is-scrolled .nav-inner {
  width: auto;
  max-width: var(--max);
  height: var(--nav-h);
  margin: 0 auto;
  padding-inline: var(--gutter);
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 48px);
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.72) 55%, transparent 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}
.nav.is-scrolled::after { opacity: 1; }
@media (max-width: 900px) {
  .nav,
  .nav.is-scrolled { background-color: transparent; box-shadow: none; }
  .nav-inner, .nav.is-scrolled .nav-inner { padding-inline: var(--gutter); background: none; }
  .nav.is-open { background-color: var(--black); }
  .nav.is-open::after { opacity: 0; }
}
/* The approved names: the full lockup on wider screens, tnw on phones. */
.wordmark-img--full { height: 31px; }
.wordmark-img--short { display: none; height: 18px; }
@media (max-width: 760px) {
  .wordmark-img--full { display: none; }
  .wordmark-img--short { display: block; }
}

/* Hero actions (client, 2026-10-16): CONFIGURE P2 outlined and JOIN WAITLIST
   filled white, side by side — the same height, radius and type. */
.hh-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.6rem;
  border: 1px solid var(--paper);
  border-radius: 6px;
  background: var(--paper);
  color: #0a0a0b;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.35s var(--ease-spring);
}
.btn-fill:hover { background: #fff; border-color: #fff; }
.btn-fill:active { transform: scale(0.97); }
.btn-fill:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.hh-cta .btn-line, .hh-cta .btn-fill { min-width: 13rem; }
@media (max-width: 480px) {
  /* Phones: still side by side, each half the width. */
  .hh-cta { flex-wrap: nowrap; width: 100%; max-width: 360px; margin-inline: auto; gap: 10px; }
  .hh-cta .btn-line, .hh-cta .btn-fill { flex: 1 1 0; min-width: 0; padding: 0 0.6rem; gap: 8px; font-size: 0.625rem; letter-spacing: 0.16em; white-space: nowrap; }
}
@media (max-width: 340px) {
  .hh-cta { flex-wrap: wrap; }
  .hh-cta .btn-line, .hh-cta .btn-fill { flex-basis: 100%; }
}

/* The launch notification (Launch.js): a card in the middle of the screen. */
.launch {
  width: min(100% - 32px, 460px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper);
  overflow: visible;
}
.launch::backdrop { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.launch[open] .launch-card { animation: launch-in 0.45s var(--ease-out); }
@keyframes launch-in { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.98); } }
.launch-card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 36px 28px 24px;
  border-radius: 20px;
  background: #0b0c0e;
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  text-align: center;
}
.launch-title { padding-inline: 24px; font-size: clamp(1.35rem, 4.6vw, 1.6rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.launch-text { font-size: 0.9375rem; line-height: 1.55; color: var(--steel-2); text-wrap: balance; }
.launch-form { display: grid; gap: 12px; margin-top: 6px; }
.launch-form[hidden] { display: none; }
.launch-email {
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(236, 235, 230, 0.32);
  border-radius: 12px;
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.2s var(--ease-out);
}
.launch-email::placeholder { color: var(--steel); }
.launch-email:hover { border-color: rgba(236, 235, 230, 0.55); }
.launch-email:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; border-color: var(--paper); }
.launch-email[aria-invalid='true'] { border-color: #e0786a; }
.launch-submit {
  min-height: 52px;
  border-radius: 12px;
  background: var(--paper);
  color: #0a0a0b;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), transform 0.35s var(--ease-spring);
}
.launch-submit:hover { background: #fff; }
.launch-submit:active { transform: scale(0.98); }
.launch-submit:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.launch-submit:disabled { opacity: 0.6; cursor: progress; }
.launch-status { font-size: 0.9375rem; line-height: 1.5; }
.launch-status:empty { display: none; }
.launch-status[data-state='error'] { color: #f0a497; }
.launch-note { font-size: 0.75rem; line-height: 1.5; color: var(--steel); }
.launch-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--steel-2); transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.launch-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.launch-close:hover { background: rgba(236, 235, 230, 0.08); color: var(--paper); }
.launch-close:active { transform: scale(0.94); }
.launch-close:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .launch[open] .launch-card { animation: none; } }

/* Your selection: the count never splits over two lines. */
.cfp-sel-toggle span { white-space: nowrap; }
@media (max-width: 400px) { .cfp-sel-title { letter-spacing: 0.14em; } .cfp-sel-toggle { letter-spacing: 0.1em; } }

/* ======================================== CLIENT ROUND (2026-10-17) */

/* Cart offers: extra straps, and the P2 Collectors Edition. Two quiet cards
   between the lines and the subtotal; nothing is added without a press. */
.offers { display: grid; gap: 10px; margin-top: var(--s-3); }
.offers[hidden] { display: none; }
.offers--drawer { margin: 14px 0 6px; }
.offer { display: grid; gap: 8px; padding: 16px 16px 14px; border-radius: 14px; background: rgba(236, 235, 230, 0.035); box-shadow: inset 0 0 0 1px var(--line); }
.offer--collectors { background: linear-gradient(160deg, rgba(0, 113, 227, 0.12), rgba(236, 235, 230, 0.03) 60%); box-shadow: inset 0 0 0 1px rgba(80, 150, 230, 0.35); }
.offer-kicker { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); }
.offer--collectors .offer-kicker { color: #6fb1ff; }
.offer-title { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; color: var(--paper); }
.offer-text { font-size: 0.875rem; line-height: 1.5; color: var(--steel-2); }
.offer-fine { font-size: 0.75rem; line-height: 1.5; color: var(--steel); }
.offer-straps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 2px; }
.offer-strap { display: grid; justify-items: center; gap: 4px; min-height: 44px; padding: 10px 6px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--paper); font-size: 0.8125rem; transition: background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.3s var(--ease-spring); }
.offer-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.offer-strap-price { font-size: 0.75rem; color: var(--steel-2); }
.offer-strap:hover { background: rgba(236, 235, 230, 0.06); box-shadow: inset 0 0 0 1px var(--paper); }
.offer-strap:active { transform: scale(0.97); }
.offer-strap:focus-visible, .offer-cta:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.offer-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1rem; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(236, 235, 230, 0.5); color: var(--paper); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.3s var(--ease-spring); }
.offer-cta:hover { background: var(--paper); color: #0a0a0b; }
.offer-cta:active { transform: scale(0.98); }
.offer-cta--strong { background: var(--blue); box-shadow: none; color: #fff; }
.offer-cta--strong:hover { background: var(--blue-hover); color: #fff; }
.cart-line-parts { margin: 4px 0 2px; padding: 0; list-style: none; font-size: 0.8125rem; line-height: 1.45; color: var(--steel-2); }
.cart-line--bundle .cart-line-name { font-weight: 500; }

/* Join Waitlist (client, 2026-10-17): a bright, confident blue — the one
   action that stands out. White text passes contrast (4.6:1). */
:root { --blue: #0071e3; --blue-hover: #0077ed; --blue-active: #0062c4; }
.btn-fill { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-fill:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.btn-fill:active { background: var(--blue-active); border-color: var(--blue-active); }
.btn-fill:focus-visible { outline: 2px solid #6fb1ff; outline-offset: 3px; }
.btn-fill:disabled { background: #2a3a4d; border-color: #2a3a4d; color: rgba(255, 255, 255, 0.6); cursor: not-allowed; }
.launch-submit { background: var(--blue); color: #fff; }
.launch-submit:hover { background: var(--blue-hover); }
.launch-submit:active { background: var(--blue-active); }
.launch-submit:focus-visible { outline-color: #6fb1ff; }

/* Homepage header: JOIN WAITLIST in place of the cart (client, 2026-10-17),
   always there while scrolling; the cart stays in the menu and on /cart/. */
.nav-wait { min-height: 34px; padding: 0 0.95rem; font-size: 0.625rem; letter-spacing: 0.18em; border-radius: 6px; }
@media (max-width: 900px) { .nav-wait { min-height: 32px; padding: 0 0.7rem; letter-spacing: 0.12em; } }

/* Configurator strap row (client, 2026-10-17): the included strap first,
   marked; the three extras after it are a preview only. */
.cfp-extra-tag { font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); white-space: nowrap; }
.cfp-strap-note { margin-top: 4px; font-size: 0.75rem; color: var(--steel); }
.cfp-extra[hidden] { display: none; }
.cfp-extras-rule { flex: none; align-self: center; width: 1px; height: 20px; margin: 0 8px; background: var(--line-strong); }
.cfp-panel--extra .cfp-panel-price { display: block; margin: 3px 0 0; font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: none; white-space: nowrap; }
.cfp-strap-note { margin: 8px 0 0; font-size: 0.75rem; line-height: 1.4; color: var(--steel); }
@media (max-width: 999px) {
  .cfp-panel--extra .cfp-panel-price { font-size: 0.625rem; letter-spacing: 0.02em; }
  .cfp-extras-rule { margin: 0 4px; }
  .cfp-strap-note { margin-top: 10px; font-size: 0.6875rem; }
}
.nav-side--end:has(.nav-wait) { gap: 20px; }

/* Cart: the bag icon on every screen (client, 2026-10-17); on the homepage's
   phones JOIN WAITLIST takes its place (Cart stays in the menu). */
.nav-bag { display: inline-flex; margin-right: -10px; }
.nav-bag:hover { opacity: 0.75; }
@media (max-width: 900px) { .nav-bag--wide { display: none; } }

/* Hero film (client, 2026-10-20): fills the whole first screen on every
   device (client: full screen on desktop and mobile), cropped to cover.
   The poster holds the frame before play, so nothing shifts; reduced
   motion keeps the poster (video.js). */
.hh-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hh-bg::after { z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.32) 16%, transparent 30%, transparent 42%, rgba(0, 0, 0, 0.62) 64%, rgba(0, 0, 0, 0.88)); }
/* The film has bright studio frames: a soft shadow keeps the white type legible. */
.hh-title, .hh-sig { text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.35); }

/* Meet the Project 2 (client shots, 2026-10-23): front, side and back share one
   canvas and sit on top of each other; the scroll step chooses which one shows
   (front: intro and the design; side: the 8mm; back: the edition). Opacity
   only, so the watch holds still while the picture changes. */
.meet-watch .meet-img { position: absolute; top: 0; left: 50%; height: 100%; width: auto; transform: translateX(-50%); }
.meet-watch .meet-img--1, .meet-watch .meet-img--2 { display: none; }
.meet.is-scene .meet-watch .meet-img--1, .meet.is-scene .meet-watch .meet-img--2 { display: block; opacity: 0; transition: opacity 0.7s var(--ease-out); }
.meet.is-scene .meet-watch .meet-img--0 { transition: opacity 0.7s var(--ease-out); }
.meet.is-scene[data-step='2'] .meet-img--0, .meet.is-scene[data-step='3'] .meet-img--0 { opacity: 0; }
.meet.is-scene[data-step='2'] .meet-img--1, .meet.is-scene[data-step='3'] .meet-img--2 { opacity: 1; }
/* The side and back are whole watches, not details: smaller steps than the old zoom. */
.meet.is-scene[data-step='2'] .meet-watch { transform: translate3d(0, -4%, 0) scale(1.18); }
.meet.is-scene[data-step='3'] .meet-watch { transform: translate3d(0, -4%, 0) scale(1.12); }
@media (min-width: 900px) {
  .meet.is-scene[data-step='2'] .meet-watch { transform: translate3d(0, -2%, 0) scale(1.24); }
  .meet.is-scene[data-step='3'] .meet-watch { transform: translate3d(0, -2%, 0) scale(1.16); }
}
/* Without the pinned scene (short screens, reduced motion): each point shows its own shot. */
.meet-point-shot { width: min(60vw, 280px); margin: var(--s-2) auto 0; aspect-ratio: 1320 / 2056; overflow: hidden; }
.meet-point-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.meet.is-scene .meet-point-shot { display: none; }
@media (prefers-reduced-motion: reduce) {
  .meet.is-scene .meet-watch .meet-img--0, .meet.is-scene .meet-watch .meet-img--1, .meet.is-scene .meet-watch .meet-img--2 { transition: none; }
}

/* Hero: full screen again (client, 2026-10-24: "the hero was set up for full
   screen"). The film covers the whole first screen edge to edge; svh is the
   visible screen with the browser bars showing, so the buttons are never
   under them (vh first for browsers without svh). Phones frame the portrait
   clip on its centre. */
.hh { height: auto; min-height: 100vh; min-height: 100svh; max-height: none; }
@media (max-width: 760px) {
  .hh-video { object-position: 50% 50%; }
}
/* One action in the hero (client, 2026-10-24): PREORDER YOUR P2. */
.hh-cta { justify-content: center; }
.hh-cta .hh-preorder { flex: 0 1 18rem; min-width: 0; text-decoration: none; }

/* Meet the Project 2 on phones (client, 2026-10-24: "the text can be not
   overlapping the picture so much, or the sub text move down, or the pictures
   a bit bigger"). The copy drops into the empty space under it and the watch
   rises a little, so the heading meets only the very end of the strap. */
@media (max-width: 899px) {
  .meet.is-scene .meet-stage { padding-bottom: calc(env(safe-area-inset-bottom) + 14px); }
  .meet.is-scene .meet-text { height: 8.5rem; }
  .meet.is-scene .meet-point { bottom: 0.25rem; }
  .meet.is-scene .meet-watch { transform: translate3d(0, -3%, 0); }
  .meet.is-scene[data-step='1'] .meet-watch { transform: translate3d(0, -6%, 0) scale(1.22); }
  .meet.is-scene[data-step='2'] .meet-watch { transform: translate3d(0, -6%, 0) scale(1.14); }
  .meet.is-scene[data-step='3'] .meet-watch { transform: translate3d(0, -6%, 0) scale(1.1); }
}

/* Charles's letter (client, 2026-10-24: "more beautiful"). Read like a letter:
   a comfortable measure, one turning point in the serif, the short lines as a
   quiet list, and a sign-off set apart with his name. */
.lt-sheet { width: min(100% - 2 * var(--gutter), 44rem); padding: clamp(2.75rem, 7vw, 5rem) clamp(1.5rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem); }
.lt-body { gap: 1.15em; font-size: 1.0625rem; line-height: 1.75; color: #1d1d1b; }
.lt-p { max-width: 34em; }
.lt-p--open { font-family: var(--f-serif); font-size: 1.6em; line-height: 1.25; letter-spacing: -0.01em; color: #141414; margin-bottom: 0.3em; }
.lt-p--lines { padding-left: 1.2em; border-left: 1px solid rgba(20, 20, 20, 0.18); font-family: var(--f-serif); font-size: 1.25em; font-weight: 400; line-height: 1.45; font-style: italic; }
.lt-turn { margin: 0.9em 0 0.4em; font-family: var(--f-serif); font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; color: #141414; }
.lt-close-lines { margin-top: 1.6em; padding-top: 1.6em; border-top: 1px solid rgba(20, 20, 20, 0.14); }
.lt-close-lines > p:first-child { line-height: 1.9; }
.lt-close-lines .lt-sign { margin-top: 1.1em; font-size: clamp(2.4rem, 7vw, 3.1rem); }
.lt-role { margin-top: 0.5em; font-size: 0.8125rem; letter-spacing: 0.02em; color: #6b6b66; }
@media (min-width: 900px) { .lt-body { font-size: 1.125rem; } }
/* THE DESIGN close-up (client, 2026-10-24) fills its frame, kept on the case edge. */
.dsg-fig--fill .dsg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 45%; }
/* After Dark (client renders, 2026-10-24): the straps run off the renders'
   edges, so the ends fade into the black instead of stopping in a line. */
.dn-layer img { -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 22%, #000 80%, transparent 97%); mask-image: linear-gradient(180deg, transparent 2%, #000 22%, #000 80%, transparent 97%); }
/* Day and Night are labels now (drag only, client 2026-10-24). */
.dn-end { display: inline-flex; align-items: center; pointer-events: none; }

/* The client list in the configurator (client, 2026-10-24), under the straps:
   quiet, secondary to buying. */
.cl { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.cl-title { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper); }
.cl-text { margin-top: 8px; max-width: 40rem; font-size: var(--t-small); line-height: 1.6; color: var(--steel-2); }
.cl-form { display: flex; gap: 8px; margin-top: 14px; max-width: 30rem; }
.cl-email { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: var(--paper); font: inherit; font-size: 0.9375rem; }
.cl-email::placeholder { color: var(--steel); }
.cl-email:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.cl-email[aria-invalid='true'] { border-color: #e0605a; }
.cl-submit { flex: none; min-height: 46px; padding: 0 1.2rem; border: 1px solid var(--paper); border-radius: 6px; background: transparent; color: var(--paper); font: inherit; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.35s var(--ease-spring); }
.cl-submit:hover { background: var(--paper); color: #0a0a0b; }
.cl-submit:active { transform: scale(0.97); }
.cl-submit:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.cl-submit:disabled { opacity: 0.6; cursor: default; }
.cl-status { min-height: 1.2em; margin-top: 8px; font-size: var(--t-small); color: var(--steel-2); }
.cl-status[data-state='error'] { color: #e0605a; }
.cl-status[data-state='ok'] { color: var(--paper); }
.cl-note { font-size: 0.75rem; line-height: 1.5; color: var(--steel); }

/* ============================================ CLIENT ROUND 2026-10-25 */
/* PREORDER, the one primary action: blue, rounded, the same everywhere. */
.btn-preorder { min-width: min(18rem, 100%); min-height: 50px; text-decoration: none; }
.hh-sig { gap: 0.9em; letter-spacing: 0.26em; text-transform: uppercase; }
@media (max-width: 420px) { .hh-sig { gap: 0.6em; font-size: 0.6875rem; letter-spacing: 0.18em; } }
/* Header PREORDER beside the bag, every scroll state, phones too. */
.nav-preorder { min-height: 34px; padding: 0 1rem; font-size: 0.625rem; letter-spacing: 0.18em; border-radius: 6px; text-decoration: none; }
.nav-side--end:has(.nav-preorder) { gap: 16px; }
@media (max-width: 900px) {
  .nav-preorder { min-height: 32px; padding: 0 0.75rem; letter-spacing: 0.14em; }
  .nav-side--end:has(.nav-preorder) { gap: 12px; }
  .nav-side--end:has(.nav-preorder) .nav-bag { margin: 0 -10px 0 0; }
}
/* Configurator: three finishes, centred, larger, named; the chosen one glows
   in its own colour (white, grey, or a quiet neutral for black). */
.cfp-row--finishes { display: flex; justify-content: center; }
.cfp-row--finishes .cfp-cases { justify-content: center; gap: clamp(22px, 7vw, 44px); margin-top: 0; }
.cfp-row--finishes .cfp-swatch { gap: 10px; }
.cfp-row--finishes .cfp-swatch-mark { width: 56px; height: 56px; }
.cfp-row--finishes .cfp-swatch:has(input:checked) .cfp-swatch-mark { transform: scale(1.1); box-shadow: 0 0 0 2px #000, 0 0 0 3.5px var(--paper), 0 0 26px 6px var(--glow); }
.cfp-swatch-name { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel); transition: color 0.3s var(--ease-out); }
.cfp-swatch:has(input:checked) .cfp-swatch-name { color: var(--paper); }
.cfp-finish-note { margin-top: 14px; text-align: center; font-size: var(--t-small); color: var(--steel-2); }
.cfp-panel--case { border: 0; }
/* THE MOVEMENT: the close-up edge to edge (no card, no padding), then the figures. */
.eng-bleed { margin: var(--s-4) 0 0; width: 100%; aspect-ratio: 16 / 9; max-height: 88svh; overflow: hidden; }
.eng-bleed-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
@media (max-width: 760px) { .eng-bleed { aspect-ratio: 4 / 5; } }
.eng-panel--solo { grid-template-columns: minmax(0, 1fr); max-width: 64rem; }
/* The configurator's PREORDER: the same blue as every primary action. */
.cfp-cta.cfg-add { background: var(--blue); border-color: var(--blue); color: #fff; }
.cfp-cta.cfg-add:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
.cfp-cta.cfg-add:active { background: var(--blue-active); border-color: var(--blue-active); }
.cfp-cta.cfg-add:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
/* The finish row (2026-10-25) overrides the old fixed-width swatch rules. */
.cfp-row--finishes .cfp-cases { display: flex; flex-wrap: nowrap; gap: clamp(24px, 8vw, 48px); margin: 0; }
.cfp-row--finishes .cfp-swatch { display: flex; flex-direction: column; align-items: center; width: auto; height: auto; gap: 10px; padding: 6px 4px; }
.cfp-row--finishes .cfp-swatch::after { display: none; }
.cfp-row--finishes .cfp-swatch-mark { flex: none; width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(236, 235, 230, 0.22); }
.cfp-row--finishes .cfp-swatch input { inset: 0; width: 100%; height: 100%; }
.cfp-panel--case .cfp-finish-note { position: static; display: block; clear: both; margin-top: 12px; }
@media (max-width: 380px) { .cfp-row--finishes .cfp-swatch-mark { width: 46px; height: 46px; } }

/* ============================================ CLIENT ROUND 2026-10-26 */
/* Configurator: arrows and dots for the views of the chosen finish. */
.cfp-stage { position: relative; touch-action: pan-y; }
.cfx-nav { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: var(--paper); cursor: pointer; transition: background-color 0.3s var(--ease-out), transform 0.35s var(--ease-spring); }
.cfx-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cfx-nav:hover { background: rgba(255, 255, 255, 0.14); }
.cfx-nav:active { transform: scale(0.92); }
.cfx-nav:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.cfx-nav--prev { left: 2%; }
.cfx-nav--next { right: 2%; }
.cfx-dots { position: absolute; left: 0; right: 0; bottom: 2%; z-index: 3; display: flex; justify-content: center; gap: 7px; pointer-events: none; }
.cfx-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(236, 235, 230, 0.3); transition: background-color 0.3s var(--ease-out); }
.cfx-dot.is-on { background: var(--paper); }
/* Phones: the watch larger, the finish circles smaller (client, 2026-10-26). */
@media (max-width: 760px) {
  .cfp-stage .cfg-shot-img { height: min(118cqw, 118cqh); }
  .cfp-row--finishes .cfp-cases { gap: 22px; }
  .cfp-row--finishes .cfp-swatch { gap: 6px; padding: 4px 2px; }
  .cfp-row--finishes .cfp-swatch-mark { width: 36px; height: 36px; }
  .cfp-row--finishes .cfp-swatch:has(input:checked) .cfp-swatch-mark { box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--paper), 0 0 18px 4px var(--glow); }
  .cfp-swatch-name { font-size: 0.5625rem; letter-spacing: 0.16em; }
  .cfp-finish-note { margin-top: 8px; font-size: 0.75rem; }
}
.cl-note { margin-top: 4px; }
/* THE FINISH: the diagonal back larger, phone and desktop. */
.dsg-fig--big { aspect-ratio: 1125 / 1082; }
.dsg-fig--big .dsg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dsg-points .dsg-fig--big, .dsg-points.is-stacking .dsg-fig--big { height: auto; aspect-ratio: 1125 / 1082; max-height: 70svh; }
/* THE MOVEMENT: smaller, and fading into the black at its edges. */
.eng-bleed { width: min(100%, 1100px); margin: var(--s-4) auto 0; aspect-ratio: 16 / 9; max-height: 60svh; -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 55%, transparent 100%); }
@media (max-width: 760px) { .eng-bleed { aspect-ratio: 1 / 1; max-height: 70svh; -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 50%, transparent 100%); } }
.cfx-nav[hidden] { display: none; }
/* THE MOVEMENT fades out on every side. */
.eng-bleed, .eng-bleed { -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 55%, transparent 100%); }
@media (max-width: 760px) { .eng-bleed { -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 55%, transparent 100%); } }
/* Movement: a gentler fade (mostly the image, soft edges), a wider frame on phones. */
.eng-bleed { -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 72%, transparent 100%); mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 72%, transparent 100%); }
@media (max-width: 760px) { .eng-bleed { aspect-ratio: 4 / 3; -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 72%, transparent 100%); mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 72%, transparent 100%); } }

/* Cart sidebar: CHECKOUT in blue (client, 2026-10-26). */
.cartd-checkout { display: flex; width: 100%; min-height: 52px; text-decoration: none; }
/* Configurator: Add extra coloured straps, a quiet text button under the finishes. */
.cfp-straps-link { display: block; margin: 10px auto 0; padding: 8px 4px; border: 0; background: none; color: var(--paper); font: inherit; font-size: 0.75rem; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(236, 235, 230, 0.4); cursor: pointer; transition: text-decoration-color 0.3s var(--ease-out), transform 0.35s var(--ease-spring); }
.cfp-straps-link:hover { text-decoration-color: var(--paper); }
.cfp-straps-link:active { transform: scale(0.97); }
.cfp-straps-link:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; border-radius: 4px; }

/* ===================================================== CLIENT ROUND 2026-10-26 (b) */

/* 03 THE FINISHES: the three watches a step larger. */
.fin-row { gap: var(--s-2); }
.fin-media { height: clamp(340px, 40vw, 580px); }
@media (max-width: 760px) {
  .fin-row { grid-auto-columns: 80vw; }
  .fin-media { height: min(124vw, 500px); max-height: none; }
}

/* PREORDER after After Dark: the blue button on the section's own black. */
.cfg-band--after-dark { border-top: 0; padding-block: var(--s-3) var(--s-6); }

/* 06 THE DESIGN: the photographs shown whole ('photo'), at their own
   proportions, never cropped. Transparent cut-outs work the same on black. */
.dsg-fig.dsg-fig--photo,
.dsg-points .dsg-fig.dsg-fig--photo,
.dsg-points.is-stacking .dsg-fig.dsg-fig--photo {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: auto;
  width: 100%;
  max-width: none;
  height: clamp(300px, calc(100svh - var(--nav-h) - 18rem), 660px);
  margin: 0;
  border-radius: 0;
  overflow: visible;
  background: none;
}
.dsg-fig--photo .dsg-img,
.dsg-point.is-active .dsg-fig--photo .dsg-img {
  position: static;
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 10px;
  transform: none;
}
@media (max-width: 900px) {
  .dsg-fig.dsg-fig--photo,
  .dsg-points .dsg-fig.dsg-fig--photo,
  .dsg-points.is-stacking .dsg-fig.dsg-fig--photo { height: auto; justify-content: flex-start; }
  .dsg-fig--photo .dsg-img,
  .dsg-point.is-active .dsg-fig--photo .dsg-img { width: auto; height: auto; max-width: 100%; max-height: clamp(180px, calc(100svh - 30rem), 420px); }
}

/* The founder's quote, homepage and /about: editorial text, a step above the
   body copy rather than a headline. */
.brand-quote p,
.ab-founder-quote p {
  font-family: var(--f-sans);
  font-style: normal;
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.005em;
  max-width: 34em;
  color: var(--paper);
}

/* Join the client list, at the foot of the homepage: the approved form,
   centred on the page's black, under a hairline. */
.hcl { padding-block: var(--s-6); border-top: 1px solid var(--line); background: #000; }
.hcl .cl { max-width: 36rem; margin: 0 auto; padding: 0; border: 0; text-align: center; }
.hcl .cl-title { font-size: 0.8125rem; }
.hcl .cl-text { margin-inline: auto; font-size: 0.9375rem; }
.hcl .cl-form { margin: var(--s-3) auto 0; }
@media (max-width: 480px) {
  .hcl { padding-block: var(--s-5); }
  .hcl .cl-form { flex-direction: column; }
  .hcl .cl-submit { min-height: 48px; }
}

/* FOOTER: smaller and aligned on one grid. Top row: lockup | links; bottom
   row: legal | copyright. */
.foot { padding-block: var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); }
.foot-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.foot-logo { display: inline-flex; align-items: center; min-height: 44px; }
.foot-lockup { height: 22px; width: auto; }
.foot-links { display: flex; gap: var(--s-4); }
.foot-links a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; font-size: 0.8125rem; color: var(--paper); transition: opacity 0.3s var(--ease-out); }
.foot-links a:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 3px; }
.foot-k { min-width: 0; font-size: 0.625rem; letter-spacing: 0.16em; }
.foot-legal { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-3); flex-wrap: wrap; margin-top: var(--s-2); padding-top: var(--s-1); }
.foot-legal-list { gap: 0 var(--s-3); }
.foot-legal-list a, .foot-legal-list button { min-height: 36px; font-size: 0.6875rem; }
.foot-legal-list a:focus-visible, .foot-legal-list button:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; border-radius: 3px; }
.foot-copy { display: inline-flex; align-items: center; gap: 10px; font-size: 0.6875rem; }
.foot-tnw { height: 10px; }
@media (max-width: 760px) {
  .foot { padding-block: var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom)); }
  .foot-top { flex-direction: column; align-items: stretch; gap: var(--s-1); }
  .foot-links { flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
  .foot-links a { display: flex; justify-content: space-between; min-height: 48px; border-bottom: 1px solid var(--line); }
  .foot-legal { display: grid; gap: var(--s-1); margin-top: var(--s-1); padding-top: 0; border-top: 0; }
  .foot-legal-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-2); }
  .foot-legal-list a, .foot-legal-list button { min-height: 44px; font-size: 0.75rem; text-align: left; }
}

/* THE LETTER (client, 2026-10-26): brand correspondence on black, the logo
   at its head, small white type at a close measure. The dialog is the scroll
   container (no sheet scrolling inside a sheet), the page behind keeps its
   scrollbar space, and the opening is one short fade. */
html.letter-open { overflow: hidden; scrollbar-gutter: stable; }
.lt,
.lt[open] {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(3.5rem, 8vh, 6rem) var(--gutter);
  border: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(0, 0, 0, 0.86);
  color: var(--paper);
}
.lt[open] { display: block; }
.lt::backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lt-sheet {
  position: relative;
  width: min(100%, 38rem);
  max-height: none;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 3.75rem) clamp(1.5rem, 6vw, 4rem) clamp(2.5rem, 6vw, 4rem);
  overflow: visible;
  background: #000;
  border: 1px solid rgba(236, 235, 230, 0.14);
  border-radius: 3px;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.9);
  animation: lt-open 0.45s var(--ease-out) both;
}
@keyframes lt-open {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}
.lt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid rgba(236, 235, 230, 0.18); }
.lt-logo { display: block; width: auto; height: 26px; }
.lt-from { font-size: 0.6875rem; line-height: 1.7; letter-spacing: 0.02em; text-align: right; color: var(--steel-2); }
.lt-from a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease-out); }
.lt-from a:hover { color: var(--paper); }
.lt-from a:active { opacity: 0.6; }
.lt-from a:focus-visible { outline: 1px solid var(--paper); outline-offset: 2px; }
.lt-body { display: block; margin-top: var(--s-4); font-size: 0.9375rem; line-height: 1.65; color: rgba(236, 235, 230, 0.84); }
.lt-body > * + * { margin-top: 0.85em; }
.lt-p { max-width: none; }
.lt-p--open { font-family: var(--f-sans); font-size: 1em; line-height: inherit; letter-spacing: 0; color: var(--paper); margin-bottom: 0; }
.lt-p--lines { padding-left: 1em; border-left: 1px solid rgba(236, 235, 230, 0.24); font-family: var(--f-sans); font-size: 1em; font-style: normal; font-weight: 400; line-height: 1.75; color: var(--paper); }
.lt-body > .lt-turn { margin: 1.4em 0 0.2em; font-family: var(--f-serif); font-size: 1.6rem; font-style: italic; line-height: 1.2; letter-spacing: -0.01em; color: var(--paper); }
.lt-body > .lt-close-lines { margin-top: 2em; padding-top: 1.4em; border-top: 1px solid rgba(236, 235, 230, 0.14); }
.lt-close-lines > p:first-child { line-height: 1.75; color: var(--paper); }
.lt-sign,
.lt-close-lines .lt-sign { margin-top: 1.1em; font-family: var(--f-serif); font-style: italic; font-size: 2.25rem; line-height: 1; letter-spacing: -0.01em; color: var(--paper); }
.lt-role { margin-top: 0.6em; font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--steel); }
.lt-close {
  position: fixed;
  z-index: 1;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  float: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1px solid rgba(236, 235, 230, 0.2);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  transition: transform 0.35s var(--ease-spring), border-color 0.3s var(--ease-out);
}
.lt-close svg { stroke: var(--paper); }
.lt-close:hover { transform: scale(1.06); border-color: rgba(236, 235, 230, 0.5); }
.lt-close:active { transform: scale(0.94); }
.lt-close:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
@media (min-width: 900px) { .lt-body { font-size: 1rem; } }
@media (max-width: 760px) {
  .lt, .lt[open] { padding: 64px 12px calc(24px + env(safe-area-inset-bottom)); }
  .lt-sheet { width: 100%; padding: 28px 22px 36px; }
  .lt-logo { height: 20px; }
  .lt-body { margin-top: var(--s-3); }
}
@media (prefers-reduced-motion: reduce) { .lt-sheet { animation: none; } }
/* The legal row's hairline spans the content, not the page gutters. */
.foot-legal { border-top: 0; background: linear-gradient(var(--line), var(--line)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
@media (max-width: 760px) { .foot-legal { background: none; } }
@media (max-width: 760px) { .foot-k, .foot-copy { font-size: 0.75rem; } }
/* The renders carry wide margins on their canvas: the watch itself, larger. */
.fin-img { scale: 1.18; }
@media (max-width: 760px) { .fin-media { height: min(112vw, 460px); } .fin-img { scale: 1.24; } }

/* Client, 2026-10-26 (c): on phones the Design photographs run the full width, at their own length. */
@media (max-width: 900px) {
  .dsg-fig--photo .dsg-img,
  .dsg-point.is-active .dsg-fig--photo .dsg-img { width: 100%; height: auto; max-width: none; max-height: none; }
}
/* The letter's writing a size smaller (client, 2026-10-26). */
.lt-body, .lt-body.lt-body { font-size: 0.875rem; line-height: 1.6; }
.lt-body > .lt-turn { font-size: 1.35rem; }
.lt-sign, .lt-close-lines .lt-sign { font-size: 1.9rem; }
@media (min-width: 900px) { .lt-body.lt-body { font-size: 0.875rem; } }
@media (max-width: 760px) { .lt-body.lt-body { font-size: 0.8125rem; } .lt-from { font-size: 0.625rem; } }

/* The price and ADD TO CART bar floats at the foot of the screen the whole time
   on /configure, down through the specification too, on every screen (client,
   2026-10-27); the page keeps its height free at the end (configurator.js
   sets --cfp-bar-h). */
.cfp-bar { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); z-index: var(--z-float); }
html:has(.cfp-bar) body { padding-bottom: var(--cfp-bar-h, 150px); }
html:has(.cfp-bar) { scroll-padding-bottom: calc(var(--cfp-bar-h, 150px) + 16px); }
@media (max-width: 760px) { .cfp-bar { padding-inline: var(--gutter); } }

/* The chosen finish glows around the watch itself (client, 2026-10-27): white,
   grey or a cool grey for black (--glow, configurator.js). A tight glow on the
   cut-out's own edge, and a soft round halo behind it; a wide drop-shadow drew
   as a box on some screens (client: "the glow looks like a box"). */
.cfg-shot-img { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--glow) 60%, transparent)); }
.cfp-stage .cfx-watch::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 42%, transparent), color-mix(in srgb, var(--glow) 12%, transparent) 55%, transparent 100%); }

/* About (client, 2026-10-27): the Black Carbon close-up beside the mission (after
   it on phones), and the side lying flat in place of the two plates. Whole
   photographs, nothing cropped or animated. */
.ab-figure--detail { grid-column: 8 / -1; align-self: center; }
.ab-detail-img { display: block; width: 100%; height: auto; max-width: 30rem; margin-left: auto; border-radius: 10px; }
.ab-figure--detail .fig-cap { max-width: 30rem; margin-left: auto; }
.ab-figure--side { grid-column: 1 / span 6; grid-row: 1; align-self: center; }
.ab-side-img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .ab-figure--detail, .ab-figure--side { grid-column: 1 / -1; grid-row: auto; }
  .ab-detail-img, .ab-figure--detail .fig-cap { max-width: none; margin-left: 0; }
  .ab-figure--side { margin-inline: calc(var(--gutter) * -1); }
  .ab-figure--side .fig-cap { padding-inline: var(--gutter); }
}

/* The configurator's backdrop (client, 2026-10-27: "the glow looks like a box"):
   the narrow spotlight from the top read as a hard-edged column on narrower
   screens. One wide, soft light instead; the watch carries its own glow. */
.cfp::before {
  background:
    radial-gradient(ellipse 75% 55% at 50% 30%, rgba(170, 176, 190, 0.09), transparent 75%),
    #000;
}

/* Meet the Project 2, calmer (client, 2026-10-28: the swipe "still feels
   slightly disconcerting"). The watch no longer jumps to a new size at each
   step on a timer of its own: it grows a little, continuously, with the
   scroll (--p from scenes.js), so it moves only as fast as the visitor does
   and reverses exactly. The P2 mark fades over the first stretch the same
   way. The statements and photographs still change per step, as crossfades.
   A thin line under the copy fills with the progress through the section. */
.meet.is-scene .meet-watch,
.meet.is-scene[data-step] .meet-watch {
  transform: translate3d(0, calc(-3% - var(--p, 0) * 3%), 0) scale(calc(1 + var(--p, 0) * 0.14));
  transition: transform 0.25s linear;
}
/* The mark lights and its shine crosses during the first step (above); then
   it fades out with the next stretch of scroll instead of all at once. */
.meet.is-scene:not([data-step='0']) .meet-mark {
  opacity: clamp(0, calc(0.92 - (var(--p, 0) - 0.25) * 11), 0.92);
  transform: translateX(-50%) translate3d(0, calc(clamp(0, (var(--p, 0) - 0.25) * 11, 1) * -14px), 0);
  transition: opacity 0.25s linear, transform 0.25s linear;
}
@media (min-width: 900px) {
  .meet.is-scene .meet-watch,
  .meet.is-scene[data-step] .meet-watch {
    transform: translate3d(0, calc(var(--p, 0) * -3%), 0) scale(calc(1.12 + var(--p, 0) * 0.12));
  }
}
.meet.is-scene .meet-intro,
.meet.is-scene .meet-point { transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }

/* Three bars above the watch, one per statement (client, 2026-10-29): the
   current statement's bar lit, the other two dim. They come in with the first
   statement (the P2 mark holds that place during the opening). */
.meet-steps { display: none; }
.meet.is-scene .meet-steps {
  display: flex;
  gap: clamp(16px, 6vw, 40px);
  position: absolute;
  top: calc(var(--nav-h) + var(--bar-h, 0px) + 18px);
  left: 50%;
  width: min(100% - 2 * var(--gutter), 520px);
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}
/* Client, 2026-10-29: only once the P2 mark has gone (its fade ends at
   --p ≈ 0.334, above), then in over the next stretch of scroll. */
.meet.is-scene:not([data-step='0']) .meet-steps { opacity: clamp(0, calc((var(--p, 0) - 0.335) * 15), 1); transition: opacity 0.25s linear; }
.meet-steps-bar {
  flex: 1 1 0;
  height: 2px;
  border-radius: 2px;
  background: var(--paper);
  opacity: 0.22;
  transition: opacity 0.5s var(--ease-out);
}
.meet.is-scene[data-step='1'] [data-meet-bar='1'],
.meet.is-scene[data-step='2'] [data-meet-bar='2'],
.meet.is-scene[data-step='3'] [data-meet-bar='3'] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .meet-steps, .meet-steps-bar { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .meet.is-scene .meet-watch, .meet.is-scene .meet-mark { transition: none; }
}

/* Configurator (client, 2026-10-28: "don't think we need this bar here"): under
   "Add extra coloured straps" the finish panel's hairline and the specification's
   hairline framed 80px of empty space (kept for the price bar before it was
   fixed to the screen). One divider now, the specification's own. */
.cfp-panels .cfp-panel--case:last-child { border-bottom: 0; }
.cfg { padding-bottom: var(--s-4); }

/* Meet the P2 bars (client, 2026-10-30: "feels quite delayed and glitchy, the
   bar feels slow to respond"): the lit bar changes at once with the statement
   (no half-second fade), the bars' own appearance follows the scroll directly,
   and the statements swap without the extra delay. */
.meet.is-scene:not([data-step='0']) .meet-steps { transition: none; }
.meet-steps-bar { transition: opacity 0.12s linear; }
.meet.is-scene .meet-intro,
.meet.is-scene .meet-point { transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out); }
.meet.is-scene[data-step='0'] [data-meet-point='0'],
.meet.is-scene[data-step='1'] [data-meet-point='1'],
.meet.is-scene[data-step='2'] [data-meet-point='2'],
.meet.is-scene[data-step='3'] [data-meet-point='3'] { transition-delay: 0s; }
/* Configurator (client, 2026-10-31: "remove the glare around the watch"): no
   halo behind the watch and no tinted outline around the photograph. The glow
   on the chosen finish's swatch stays. */
.cfx-watch::before,
.cfp-stage .cfx-watch::before { content: none; }
.cfg-shot-img { filter: none; }

/* SOLD OUT (client, 2026-10-31): the PREORDER button's shape, grey with black
   type, in place of ADD TO CART in the configurator once
   that finish's 500 are sold. Not a link or an action, so no hover. */
.cfp-cta.cfp-soldout { background: #9b9c9f; border-color: #9b9c9f; color: #000; box-shadow: none; cursor: default; }
.cfp-cta.cfp-soldout:hover, .cfp-cta.cfp-soldout:active { background: #9b9c9f; border-color: #9b9c9f; color: #000; transform: none; box-shadow: none; }
.cfp-cta.cfp-soldout { border: 1px solid #9b9c9f; }
.cfp-soldout[hidden] { display: none; }