/* ============================================================================
   WidgetClock — landing styles
   0. tokens   1. base   2. atoms   3. chrome   4. home   5. seo/gallery
   6. widget faces   7. responsive
   ========================================================================== */

/* ── 0. tokens ───────────────────────────────────────────────────────── */
:root {
  --ground: #0b0c0f;
  --ground-2: #101116;
  --panel: #14161c;
  --panel-2: #191c23;
  --ink: #ece7dc;
  --ink-dim: #9b978f;
  --ink-faint: #6a6862;
  --brass: #c6a15b;
  --brass-hi: #e7ce93;
  --brass-deep: #8a6f38;
  --steel: #7c8a97;
  --hair: rgba(236, 231, 220, 0.09);
  --hair-2: rgba(236, 231, 220, 0.16);

  --serif: 'Playfair Display', 'Hoefler Text', Baskerville, Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gut: clamp(20px, 5vw, 64px);
  --max: 1240px;
  --r: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

/* ── 1. base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.06; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--brass); color: #0b0c0f; }
:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--brass); color: #000; padding: 10px 18px; border-radius: 8px; font-weight: 600;
}
.skip:focus { left: 8px; }

.grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: 0.035;
  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.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.spot {
  position: fixed; top: 0; left: 0; width: 620px; height: 620px; margin: -310px 0 0 -310px;
  z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s;
  background: radial-gradient(circle, rgba(198,161,91,0.09) 0%, rgba(198,161,91,0.03) 34%, transparent 66%);
}
.spot.is-on { opacity: 1; }

main { position: relative; z-index: 2; }
section { position: relative; }

/* reveal */
.reveal { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 0.55s var(--ease) var(--rd, 0ms), transform 0.55s var(--ease) var(--rd, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
  }

/* ── 2. atoms ────────────────────────────────────────────────────────── */
.kicker {
  margin: 0 0 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--brass); display: flex; align-items: center; gap: 12px;
}
.kicker::before { content: ''; width: 26px; height: 1px; background: var(--brass); opacity: 0.7; flex: none; }
.shead--center .kicker { justify-content: center; }
.kicker--hero { font-size: 11.5px; }

.mark {
  width: 28px; height: 28px; border-radius: 9px; flex: none; position: relative;
  background: linear-gradient(150deg, var(--brass-hi), var(--brass) 55%, var(--brass-deep));
  box-shadow: 0 4px 16px rgba(198,161,91,0.32);
}
.mark::after {
  content: ''; position: absolute; inset: 0; border-radius: 9px;
  background: conic-gradient(from -62deg, transparent 0 62%, rgba(11,12,15,0.92) 62% 64.5%, transparent 64.5%);
}
.mark::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; margin: -1px 0 0 -1px;
  border-radius: 50%; background: rgba(11,12,15,0.9);
}
.mark--lg { width: 40px; height: 40px; border-radius: 13px; }

.btn {
  display: inline-flex; align-items: center; gap: 11px; border: 0; cursor: pointer;
  padding: 13px 22px; border-radius: 12px; font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  letter-spacing: -0.01em; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s, color 0.3s;
  text-align: left; position: relative; overflow: hidden;
}
.btn--primary {
  background: linear-gradient(160deg, var(--brass-hi), var(--brass) 58%, var(--brass-deep));
  color: #14100a; box-shadow: 0 10px 34px -14px rgba(198,161,91,0.85), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn--primary::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.5) 50%, transparent 75%);
  transform: translateX(-120%); transition: transform 0.9s var(--ease);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); }
.btn--ghost {
  background: rgba(236,231,220,0.03); color: var(--ink); border: 1px solid var(--hair-2);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: rgba(236,231,220,0.07); border-color: var(--brass); color: var(--brass-hi); }
.btn--sm { padding: 9px 16px; font-size: 13px; background: rgba(236,231,220,0.05); border: 1px solid var(--hair-2); color: var(--ink); }
.btn--sm:hover { border-color: var(--brass); color: var(--brass-hi); }
.btn--block { display: flex; justify-content: center; width: 100%; margin-top: 10px; }
.btn__glyph { width: 22px; height: 22px; flex: none; }
.btn__stack { display: flex; flex-direction: column; line-height: 1.12; }
.btn__stack small { font-size: 10px; font-weight: 500; opacity: 0.72; letter-spacing: 0.06em; text-transform: uppercase; }
.btn__stack b { font-size: 15.5px; font-weight: 700; letter-spacing: -0.015em; }

.cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 30px 0 0; }
.cta-row__note { flex-basis: 100%; margin: 4px 0 0; font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.02em; }
.shead--center + .cta-row, .endcta .cta-row { justify-content: center; }

.tlink {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
  color: var(--brass-hi); border-bottom: 1px solid rgba(231,206,147,0.3); padding-bottom: 3px;
  transition: gap 0.35s var(--ease), border-color 0.35s;
}
.tlink:hover { gap: 14px; border-color: var(--brass-hi); }

.shead { max-width: 720px; margin: 0 0 46px; }
.shead--center { margin-left: auto; margin-right: auto; text-align: center; }
.shead__title { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 54px); font-weight: 400; }
.shead__title em { font-style: italic; color: var(--brass-hi); }
.shead__sub { margin: 18px 0 0; color: var(--ink-dim); font-size: clamp(15px, 1.4vw, 17px); max-width: 60ch; }
.shead--center .shead__sub { margin-left: auto; margin-right: auto; }

.rule { height: 1px; background: currentColor; opacity: 0.24; }
.rule--thin { opacity: 0.13; }

/* widget card */
.wgrid {
  display: grid; gap: clamp(14px, 1.6vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-flow: row dense; /* wide cards span 2 — dense back-fills the holes */
  align-items: start;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gut);
}
.wcard { margin: 0; }
.wcard__frame {
  position: relative; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: #0e0f13; container-type: inline-size;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 18px 40px -22px rgba(0,0,0,0.9), 0 0 0 1px rgba(236,231,220,0.07);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
  aspect-ratio: 1 / 1;
}
.wcard[data-ratio='wide'] .wcard__frame { aspect-ratio: 2.13 / 1; border-radius: 22px; }
.wcard:hover .wcard__frame { transform: translateY(-6px) scale(1.014); box-shadow: 0 1px 0 rgba(255,255,255,0.09) inset, 0 34px 60px -26px rgba(0,0,0,1), 0 0 0 1px rgba(198,161,91,0.34); }
.wgrid .wcard[data-ratio='wide'] { grid-column: span 2; }
.wface { position: absolute; inset: 0; container-type: inline-size; }
.wcard__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 3px 0; }
.wcard__name { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.wcard__tags { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }

.ticks li {
  position: relative; padding-left: 24px; margin-bottom: 11px; color: var(--ink-dim); font-size: 15px;
}
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brass); box-shadow: 0 0 12px rgba(198,161,91,0.7);
}

/* ── 3. chrome ───────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 26px;
  padding: 16px var(--gut); transition: transform 0.5s var(--ease), background 0.4s, border-color 0.4s, padding 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck { background: rgba(11,12,15,0.72); backdrop-filter: blur(18px) saturate(1.3); border-color: var(--hair); padding-top: 11px; padding-bottom: 11px; }
.nav.is-hidden { transform: translateY(-105%); }
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__word { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.nav__word em { font-style: normal; color: var(--brass-hi); }
.nav__links { display: flex; gap: 26px; margin-left: 14px; }
.nav__links a { font-size: 13.5px; color: var(--ink-dim); transition: color 0.3s; position: relative; }
.nav__links a::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: var(--brass); transition: width 0.4s var(--ease); }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current]::after { width: 100%; }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav__clock { font-family: var(--mono); font-size: 12.5px; color: var(--brass); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.nav__burger { display: none; margin-left: auto; width: 38px; height: 34px; background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; }
.nav__burger span { display: block; height: 1.5px; background: var(--ink); transition: transform 0.4s var(--ease); }
.nav__burger[aria-expanded='true'] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__burger[aria-expanded='true'] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.navdrawer {
  position: fixed; inset: 62px 0 0; z-index: 49; background: rgba(11,12,15,0.97); backdrop-filter: blur(20px);
  padding: 26px var(--gut); overflow-y: auto;
}
.navdrawer nav { display: flex; flex-direction: column; gap: 4px; }
.navdrawer a { font-family: var(--serif); font-size: 26px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.navdrawer .btn { font-family: var(--sans); font-size: 15px; border: 0; }

.foot { position: relative; z-index: 2; border-top: 1px solid var(--hair); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.5)); padding: clamp(48px, 7vw, 86px) var(--gut) 26px; }
.foot__top { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(260px, 1fr) 2.1fr; gap: clamp(32px, 5vw, 72px); }
.foot__tag { font-family: var(--serif); font-size: 22px; margin: 16px 0 8px; }
.foot__blurb { color: var(--ink-faint); font-size: 13.5px; max-width: 36ch; margin-bottom: 22px; }
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.foot__col h3 { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--brass); margin-bottom: 16px; font-weight: 600; }
.foot__col li { margin-bottom: 9px; }
.foot__col a { font-size: 13.5px; color: var(--ink-dim); transition: color 0.25s; }
.foot__col a:hover { color: var(--brass-hi); }
.foot__bar { max-width: var(--max); margin: 52px auto 0; padding-top: 22px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.foot__bar p { margin: 0; font-size: 12px; color: var(--ink-faint); }
.foot__bar-right { display: flex; gap: 20px; }
.foot__bar-right a:hover { color: var(--brass-hi); }

/* ── 4. home ─────────────────────────────────────────────────────────── */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 116px var(--gut) 64px; overflow: hidden; }
.hero__glow {
  position: absolute; top: -30%; left: 50%; width: 130vw; height: 110vh; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 45%, rgba(198,161,91,0.13), rgba(198,161,91,0.03) 42%, transparent 70%);
  pointer-events: none;
}
.hero__rule { position: absolute; left: var(--gut); right: var(--gut); bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--hair-2) 30%, var(--hair-2) 70%, transparent); }
.hero__inner { position: relative; max-width: var(--max); margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.hero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 7.4vw, 96px); line-height: 0.95; letter-spacing: -0.035em; margin: 4px 0 0; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > * , .hero__title em { display: inline-block; }
.hero__title em { font-style: italic; color: var(--brass-hi); }
.hero__lede { margin: 22px 0 0; font-size: clamp(15px, 1.25vw, 17px); color: var(--ink-dim); max-width: 44ch; }
.hero .cta-row { margin-top: 26px; }
.hero__stats { display: flex; gap: clamp(24px, 3.4vw, 52px); margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--hair); }
.hero__stats div { display: flex; flex-direction: column; }
.hero__stats dt { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); color: var(--brass-hi); line-height: 1; }
.hero__stats dd { margin: 8px 0 0; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }

.hero__scene { position: relative; height: clamp(430px, 56vw, 640px); perspective: 1400px; transform-style: preserve-3d; }
.scene__halo { position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(198,161,91,0.16), transparent 62%); filter: blur(30px); }
/* `translate` (not `transform`) keeps the centring when JS writes a transform. */
.scene__device { position: absolute; left: 50%; top: 50%; width: min(286px, 58%); translate: -50% -50%; will-change: transform; }
.scene__float { position: absolute; width: 40%; max-width: 214px; will-change: transform; }
.scene__float--a { left: -10%; top: 10%; width: 44%; }
.scene__float--b { right: 0; top: 20%; width: 26%; }
.scene__float--c { right: -6%; bottom: 14%; width: 42%; }
.scene__float--d { left: -14%; bottom: 2%; width: 38%; }
.scene__float .wcard__frame { box-shadow: 0 30px 70px -28px rgba(0,0,0,1), 0 0 0 1px rgba(236,231,220,0.09); }

.device { position: relative; border-radius: 42px; padding: 9px; background: linear-gradient(150deg, #3a3d45, #14161a 40%, #26282e); box-shadow: 0 50px 90px -40px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,0.07); }
.device__screen { position: relative; border-radius: 34px; overflow: hidden; background: #08090c; aspect-ratio: 9 / 19.5; container-type: inline-size; }
.device__notch { position: absolute; left: 50%; top: 2.6cqw; transform: translateX(-50%); width: 26%; height: 7.4cqw; border-radius: 4cqw; background: #05060a; z-index: 4; }
.device__wall {
  position: absolute; inset: 0;
  background:
    radial-gradient(72% 42% at 50% 4%, rgba(198,161,91,0.2), transparent 62%),
    radial-gradient(80% 50% at 18% 96%, rgba(88,72,132,0.28), transparent 64%),
    linear-gradient(168deg, #191c26 0%, #0d0f15 46%, #07080b 100%);
}
.device--lg .device__screen { display: grid; place-items: center; }

/* ── iOS Home Screen ─────────────────────────────────────────────── */
.ios { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 3.4cqw 5.5cqw 3cqw; z-index: 2; }
.ios__status { display: flex; align-items: center; justify-content: space-between; padding: 1.2cqw 1.6cqw 0; height: 9cqw; color: #fff; }
.ios__time { font-size: 4.4cqw; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ios__sys svg { width: 17cqw; height: auto; fill: #fff; color: #fff; }

/* Apple's grid: the screen is 4 icons wide; a medium widget is 4×2, small 2×2. */
.ios__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5.2cqw; margin-top: 3.4cqw; }
.ios__slot {
  position: relative; overflow: hidden; container-type: inline-size;
  border-radius: 22%/22%; background: #0e0f13;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.9), 0 0 0 0.5px rgba(255,255,255,0.06);
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}
.ios__slot--s { aspect-ratio: 1 / 1; }
.ios__slot--m { grid-column: span 2; aspect-ratio: 2.13 / 1; border-radius: 9.5%/20%; }
.ios__slot.is-swapping { opacity: 0; transform: scale(0.9); }
.ios__slot .wface { position: absolute; inset: 0; }

.ios__dots { display: flex; gap: 1.6cqw; justify-content: center; margin: auto 0 3.4cqw; padding-top: 4cqw; }
.ios__dots i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: rgba(255,255,255,0.28); }
.ios__dots i.is-on { background: #fff; }

.ios__dock {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4.4cqw;
  padding: 3.4cqw; border-radius: 9cqw;
  background: rgba(236,231,220,0.11); backdrop-filter: blur(14px);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.18);
}
.ios__app { display: block; aspect-ratio: 1/1; border-radius: 24%/24%; box-shadow: 0 3px 8px -3px rgba(0,0,0,0.8); position: relative; }
.ios__app--brand { background: linear-gradient(150deg, var(--brass-hi), var(--brass) 55%, var(--brass-deep)); }
.ios__app--brand::before, .ios__app--brand::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: #0b0c0f; border-radius: 1px; transform-origin: 0 50%;
}
.ios__app--brand::before { width: 30%; height: 8%; margin-top: -4%; transform: rotate(-90deg); }
.ios__app--brand::after { width: 40%; height: 7%; margin-top: -3.5%; transform: rotate(28deg); }
.ios__app--a { background: linear-gradient(150deg, #3d4c63, #1d2431); }
.ios__app--b { background: linear-gradient(150deg, #4a3b52, #221b28); }
.ios__app--c { background: linear-gradient(150deg, #354a44, #16211e); }

.hero__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-faint); }
.hero__scroll span { width: 1px; height: 40px; background: linear-gradient(var(--brass), transparent); animation: scrolldot 2.4s var(--ease) infinite; }
@keyframes scrolldot { 0% { transform: scaleY(0); transform-origin: top } 45% { transform: scaleY(1); transform-origin: top } 55% { transform: scaleY(1); transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }

.marquee-sec { padding: clamp(40px, 6vw, 84px) 0; overflow: hidden; }
.marquee { overflow: hidden; margin-bottom: 16px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 16px; width: max-content; will-change: transform; }
.marquee__track .wcard { width: 172px; flex: none; }
.marquee__track .wcard[data-ratio='wide'] { width: 340px; }
.marquee__note { text-align: center; max-width: 56ch; margin: 30px auto 0; padding: 0 var(--gut); font-size: 13px; color: var(--ink-faint); }

.stage { padding: clamp(50px, 8vw, 120px) var(--gut); }
.stage__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 0.95fr 1fr; gap: clamp(28px, 5vw, 76px); align-items: start; }
.stage__sticky { position: sticky; top: 96px; height: min(78vh, 660px); display: grid; place-items: center; }
.stage__device { width: min(300px, 84%); transform-style: preserve-3d; will-change: transform; }
.stage__face { position: relative; width: 78%; aspect-ratio: 1/1; border-radius: 22px; overflow: hidden; container-type: inline-size; box-shadow: 0 26px 60px -26px rgba(0,0,0,1), 0 0 0 1px rgba(236,231,220,0.08); transition: opacity 0.2s, transform 0.35s var(--ease); }
.stage__face.is-swapping { opacity: 0; transform: scale(0.94) rotateX(10deg); }
.stage__label { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brass); }
.stage__reflect { position: absolute; left: 8%; right: 8%; bottom: -8%; height: 60px; background: radial-gradient(ellipse at center, rgba(198,161,91,0.18), transparent 70%); filter: blur(14px); }
.stage__steps { padding: clamp(16px, 4vw, 56px) 0; }
.step { padding: 20px 0 20px 26px; border-left: 1px solid var(--hair); cursor: pointer; transition: border-color 0.5s, opacity 0.5s; opacity: 0.4; }
.step.is-on { opacity: 1; border-color: var(--brass); }
.step__t { font-family: var(--serif); font-size: clamp(24px, 2.8vw, 34px); display: flex; align-items: baseline; gap: 16px; }
.step__n { font-family: var(--mono); font-size: 11px; color: var(--brass); letter-spacing: 0.1em; }
.step__b { margin: 10px 0 0; color: var(--ink-dim); font-size: 15px; max-width: 42ch; }
.stage__all { display: inline-flex; gap: 10px; margin-left: 26px; margin-top: 22px; font-size: 14px; font-weight: 600; color: var(--brass-hi); transition: gap 0.35s var(--ease); }
.stage__all:hover { gap: 16px; }

.surfaces { padding: clamp(50px, 8vw, 110px) var(--gut); }
.surfaces__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 34px); }
.surface { border-radius: 24px; overflow: hidden; background: linear-gradient(170deg, var(--panel), var(--ground-2)); border: 1px solid var(--hair); transition: border-color 0.5s, transform 0.6s var(--ease); }
.surface:hover { border-color: rgba(198,161,91,0.34); }
.surface__shot { overflow: hidden; background: #08090c; aspect-ratio: 2.17 / 1; }
.surface__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.surface:hover .surface__shot img { transform: scale(1.04); }
.surface__body { padding: clamp(22px, 2.6vw, 34px); }
.surface__body h3 { font-family: var(--serif); font-size: clamp(21px, 2vw, 27px); margin-bottom: 12px; }
.surface__body p { color: var(--ink-dim); font-size: 14.5px; }

.world-sec { padding: clamp(50px, 8vw, 110px) var(--gut); }
.world-sec__inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.world-sec__cards { display: flex; flex-direction: column; gap: 16px; }
.world-sec__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.world-sec .ticks { margin: 6px 0 26px; }

.craft { padding: clamp(50px, 8vw, 110px) var(--gut); }
.craft__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.craftcard { padding: clamp(26px, 3vw, 40px); border-radius: 22px; border: 1px solid var(--hair); background: linear-gradient(170deg, rgba(236,231,220,0.028), transparent); position: relative; overflow: hidden; }
.craftcard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(198,161,91,0.6), transparent); }
.craftcard__n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--brass); }
.craftcard h3 { font-family: var(--serif); font-size: clamp(20px, 1.9vw, 25px); margin: 16px 0 12px; }
.craftcard p { color: var(--ink-dim); font-size: 14.5px; margin: 0; }

/* ── in the wild: the real object, and the face it became ─────────── */
.wild { padding: clamp(50px, 8vw, 110px) var(--gut); }
.wild--single { padding-top: 0; }
.wild__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 34px); }
.wild__grid--one { grid-template-columns: 1fr; max-width: 900px; }
.wildcard { border-radius: 24px; overflow: hidden; border: 1px solid var(--hair); background: linear-gradient(170deg, var(--panel), var(--ground-2)); transition: border-color 0.5s; }
.wildcard:hover { border-color: rgba(198,161,91,0.34); }
.wildcard__shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #06070a; }
.wildcard__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.wildcard:hover .wildcard__shot img { transform: scale(1.04); }
.wildcard__shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6,7,10,0.86)); }
/* the live face, sitting on the photograph */
/* the widget sits low and to one side, so the object itself stays readable */
.wildcard__widget {
  position: absolute; right: 6%; bottom: 6%; width: 62%; z-index: 2;
  aspect-ratio: 2.13 / 1; border-radius: 14px; overflow: hidden; container-type: inline-size;
  box-shadow: 0 22px 44px -18px rgba(0,0,0,1), 0 0 0 1px rgba(236,231,220,0.14);
}
.wildcard__widget[data-ratio='square'] { width: 38%; aspect-ratio: 1/1; }
.wildcard__widget .wface { position: absolute; inset: 0; }
.wildcard__phone {
  position: absolute; right: 8%; bottom: -4%; z-index: 2; width: 27%;
  border-radius: 16px; padding: 4px; background: linear-gradient(150deg, #3a3d45, #14161a 45%, #26282e);
  box-shadow: 0 26px 50px -18px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,0.08);
}
.wildcard__phonescreen { position: relative; aspect-ratio: 9 / 19.5; border-radius: 13px; overflow: hidden; container-type: inline-size; background: #07080b; }
.wildcard__phonescreen .wface { position: absolute; inset: 0; }
.wildcard__body { padding: clamp(20px, 2.4vw, 30px); }
.wildcard__body h3 { font-family: var(--serif); font-size: clamp(20px, 1.9vw, 26px); margin-bottom: 11px; }
.wildcard__body p { color: var(--ink-dim); font-size: 14.5px; }
.wild__grid--one .wildcard { display: grid; grid-template-columns: 1.4fr 1fr; align-items: stretch; }
.wild__grid--one .wildcard__shot { height: 100%; aspect-ratio: auto; min-height: clamp(300px, 34vw, 440px); }
.wild__grid--one .wildcard__widget { left: 16%; right: 16%; bottom: 9%; }
.wild__grid--one .wildcard__phone { right: 10%; bottom: -6%; width: 22%; }
.wild__grid--one .wildcard__body { padding: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center; }

/* ── Lock Screen accessory widgets ─────────────────────────────────── */
/* iOS tints the whole accessory one colour, so everything here is monochrome
   and leans on weight and spacing instead. */
.f.f-acc { color: #fff; align-items: center; justify-content: center; background: none; line-height: 1.05; }
.f.f-acc--circ { border-radius: 50%; background: rgba(255,255,255,0.14); backdrop-filter: blur(4px); }
.f.f-acc--rect { flex-direction: row; gap: 4cqi; padding: 0 5cqi; border-radius: 11cqi; background: rgba(255,255,255,0.14); backdrop-filter: blur(4px); }
.lw-dial { position: absolute; inset: 6%; width: 88%; height: 88%; }
.f-acc--rect .lw-dial--sm { position: relative; inset: auto; flex: 0 0 auto; width: 36cqi; height: 36cqi; }
.lw-ring { fill: none; stroke: rgba(255,255,255,0.3); stroke-width: 2; }
.lw-t { fill: rgba(255,255,255,0.35); }
.lw-t--b { fill: rgba(255,255,255,0.85); }
.lw-hand rect { fill: #fff; }
.lw-pin { fill: #fff; }
.lw-day { fill: none; stroke: rgba(255,255,255,0.6); stroke-width: 3.4; stroke-linecap: round; }
.lw-prog { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; }
.lw-mark { fill: #fff; }
.lw-c { position: relative; text-align: center; line-height: 1.05; }
.lw-c .lw-code { display: block; font-size: 12cqi; letter-spacing: 0.1em; opacity: 0.7; text-transform: uppercase; }
.lw-c b { display: block; font-size: 22cqi; line-height: 1; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lw-l { display: flex; flex-direction: column; line-height: 1.1; }
.lw-l .lw-code { font-size: 7.6cqi; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.lw-l b { font-size: 16cqi; line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lw-l .lw-sub { font-size: 6.4cqi; opacity: 0.6; }
.lw-big { font-size: 26cqi; line-height: 1; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.f.f-acc--grid { padding: 5cqi 6cqi; }
.lw-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.6cqi; width: 100%; text-align: center; }
.lw-grid span { font-size: 5.6cqi; line-height: 1.45; border-radius: 50%; color: rgba(255,255,255,0.62); font-variant-numeric: tabular-nums; }
.lw-grid .is-today { background: #fff; color: #14161a; font-weight: 700; }

/* ── MacBook desktop ──────────────────────────────────────────────── */
.macsec { padding: 0 var(--gut) clamp(30px, 5vw, 60px); }
.macsec__inner { max-width: 940px; margin: 0 auto; }
.macsec__note { margin: 20px auto 0; max-width: 60ch; text-align: center; font-size: 13px; color: var(--ink-faint); }
.mb { display: flex; flex-direction: column; align-items: center; }
.mb__lid { width: 100%; border-radius: 14px 14px 4px 4px; padding: 9px 9px 13px; background: linear-gradient(150deg, #4a4d55, #1b1e24 45%, #303339); box-shadow: 0 40px 80px -34px rgba(0,0,0,1); }
.mb__screen { position: relative; aspect-ratio: 16 / 10; border-radius: 5px; overflow: hidden; container-type: inline-size; background: #0a0c12; }
.mb__wall { position: absolute; inset: 0; background: radial-gradient(70% 50% at 76% 14%, rgba(198,161,91,0.3), transparent 60%), radial-gradient(60% 60% at 12% 96%, rgba(86,74,132,0.34), transparent 62%), linear-gradient(165deg, #232839, #12141d 52%, #080a10); }
.mb__bar { position: absolute; top: 0; left: 0; right: 0; height: 3.4cqw; display: flex; align-items: center; gap: 2cqw; padding: 0 1.6cqw; font-size: 1.5cqw; color: rgba(255,255,255,0.82); background: rgba(10,12,18,0.5); backdrop-filter: blur(8px); }
.mb__bar b { font-weight: 700; }
.mb__apple { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: rgba(255,255,255,0.85); }
.mb__barright { margin-left: auto; font-variant-numeric: tabular-nums; }
.mb__win { position: absolute; border-radius: 1.4cqw; background: rgba(236,231,220,0.07); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(6px); box-shadow: 0 3cqw 6cqw -2cqw rgba(0,0,0,0.8); }
.mb__win--a { left: 6%; top: 18%; width: 42%; height: 52%; }
.mb__win--b { left: 14%; top: 30%; width: 42%; height: 52%; }
.mb__widgets { position: absolute; right: 3.4%; top: 8%; display: flex; flex-direction: column; gap: 2cqw; width: 17%; }
.mb__w { position: relative; aspect-ratio: 1/1; border-radius: 18%; overflow: hidden; container-type: inline-size; box-shadow: 0 2cqw 4cqw -1.4cqw rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.08); }
.mb__w .wface { position: absolute; inset: 0; }
.mb__dock { position: absolute; left: 50%; bottom: 1.6cqw; transform: translateX(-50%); display: flex; gap: 1.2cqw; padding: 1cqw; border-radius: 2.4cqw; background: rgba(236,231,220,0.12); backdrop-filter: blur(10px); }
.mb__app { display: block; width: 3.4cqw; aspect-ratio: 1/1; border-radius: 26%; background: linear-gradient(150deg, rgba(236,231,220,0.35), rgba(236,231,220,0.12)); }
.mb__app--brand { background: linear-gradient(150deg, var(--brass-hi), var(--brass) 55%, var(--brass-deep)); }
.mb__base { width: 112%; height: 10px; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, #4a4d55, #1b1e24); box-shadow: 0 12px 22px -8px rgba(0,0,0,0.95); }
.mb__base::after { content: ''; display: block; width: 12%; height: 4px; margin: 0 auto; border-radius: 0 0 5px 5px; background: rgba(0,0,0,0.55); }

/* the accessory designs shown at a readable size */
.acc-sec { padding: clamp(46px, 7vw, 100px) var(--gut); }
.acc-sec__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 38px); }
/* stacked, not side by side — the rectangular slot needs the full width to be
   legible at this size */
.acccard__stage {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 26px 22px; border-radius: 20px;
  background: linear-gradient(160deg, #2c3242, #14161f 60%, #0b0d13);
  border: 1px solid var(--hair);
}
.acccard__slot { position: relative; container-type: inline-size; }
.acccard__slot--circ { width: 38%; aspect-ratio: 1/1; }
.acccard__slot--rect { width: 100%; aspect-ratio: 2.1/1; }
.acccard__slot .wface { position: absolute; inset: 0; }
.acccard h3 { font-family: var(--serif); font-size: clamp(19px, 1.8vw, 24px); margin: 22px 0 8px; }
.acccard__inline { font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); margin-bottom: 10px; }
.acccard__inline span { display: inline-block; margin-right: 8px; padding: 2px 7px; border-radius: 5px; font-family: var(--sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); border: 1px solid rgba(198,161,91,0.35); }
.acccard p { color: var(--ink-dim); font-size: 14.5px; margin: 0; }

/* the Lock Screen itself — its own container, so cqw resolves against the
   screen rather than escaping to the viewport (the frame can't carry
   container-type: it sizes itself from aspect-ratio) */
.ls { position: absolute; inset: 0; container-type: inline-size; display: flex; flex-direction: column; align-items: center; color: #fff; overflow: hidden; }
.ls__wall { position: absolute; inset: 0; background: linear-gradient(165deg, #2c3242 0%, #171a24 42%, #0a0c12 100%); }
.ls__wall::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 34% at 50% 12%, rgba(198,161,91,0.28), transparent 62%); }
.ls__inline { position: relative; margin-top: 15%; font-size: 4.4cqw; letter-spacing: 0.02em; opacity: 0.9; display: flex; gap: 1.4cqw; align-items: center; }
.ls__time { position: relative; font-size: 27cqw; font-weight: 300; letter-spacing: -0.05em; line-height: 0.98; font-variant-numeric: tabular-nums; margin-top: 0.5%; }
.ls__row { position: relative; display: flex; align-items: center; justify-content: center; gap: 3cqw; margin-top: 4%; width: 82%; }
.ls__slot { position: relative; container-type: inline-size; }
.ls__slot--circ { width: 21%; aspect-ratio: 1/1; }
.ls__slot--rect { width: 45%; aspect-ratio: 2.1/1; }
.ls__slot .wface { position: absolute; inset: 0; }
.ls--ipad { flex-direction: row; align-items: center; justify-content: center; gap: 6%; }
.ls--ipad .ls__left { position: relative; display: flex; flex-direction: column; align-items: center; }
.ls--ipad .ls__inline { margin-top: 0; font-size: 2.4cqw; }
.ls--ipad .ls__time { font-size: 15cqw; }
.ls--ipad .ls__row { margin-top: 0; width: 34%; flex-wrap: wrap; }
.ls--ipad .ls__slot--rect { width: 100%; }
.ls--ipad .ls__slot--circ { width: 40%; }

/* ── shown on: iPhone · iPad · Mac ─────────────────────────────────── */
.devices { padding: clamp(46px, 7vw, 100px) var(--gut); }
.devices__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
/* one stage height for all three, so the headings line up */
.devcard__stage { height: clamp(200px, 22vw, 260px); display: grid; place-items: center; }
.devcard h3 { font-family: var(--serif); font-size: clamp(19px, 1.8vw, 24px); margin: 24px 0 10px; }
.devcard p { color: var(--ink-dim); font-size: 14.5px; margin: 0; }

.dev { position: relative; }
/* sized from the stage height — width follows from the aspect ratio, so no
   container-type may sit on these boxes */
.dev__screen { position: relative; overflow: hidden; background: #08090c; height: 100%; width: auto; }
.dev__desk { position: absolute; inset: 0; background: radial-gradient(84% 58% at 50% 4%, rgba(198,161,91,0.26), transparent 60%), linear-gradient(170deg, #1d212c, #08090d); }
.dev__pin { position: absolute; container-type: inline-size; overflow: hidden; box-shadow: 0 10px 24px -10px rgba(0,0,0,0.95), 0 0 0 1px rgba(236,231,220,0.1); }
.dev__pin .wface { position: absolute; inset: 0; }

.dev--iphone { height: 100%; }
.dev--iphone .dev__screen { aspect-ratio: 9 / 19.5; border-radius: 14%/6.5%; border: 4px solid #2c2f37; box-shadow: 0 20px 44px -18px rgba(0,0,0,1); }
.dev__notch { position: absolute; left: 50%; top: 2.4%; transform: translateX(-50%); width: 34%; height: 3%; border-radius: 99px; background: #05060a; z-index: 3; }
.dev__pin--iphone { left: 13%; right: 13%; top: 28%; aspect-ratio: 1/1; border-radius: 18%; }

.dev--ipad { height: 78%; }
.dev--ipad .dev__screen { aspect-ratio: 4 / 3; border-radius: 4%/5.4%; border: 6px solid #2c2f37; box-shadow: 0 20px 44px -18px rgba(0,0,0,1); }
.dev__pin--ipad { left: 9%; top: 16%; width: 30%; aspect-ratio: 1/1; border-radius: 13%; }

.dev--mac { height: 74%; display: flex; flex-direction: column; align-items: center; }
.dev--mac .dev__mac-lid { flex: 1; min-height: 0; border-radius: 9px 9px 3px 3px; padding: 5px 5px 7px; background: linear-gradient(150deg, #45484f, #1b1e24 45%, #2e3138); box-shadow: 0 18px 40px -18px rgba(0,0,0,1); }
.dev--mac .dev__screen { aspect-ratio: 16 / 10; border-radius: 3px; }
.dev__pin--mac { right: 5%; top: 10%; width: 26%; aspect-ratio: 1/1; border-radius: 15%; }
.dev__mac-base { width: 118%; height: 7px; border-radius: 0 0 9px 9px; background: linear-gradient(180deg, #45484f, #1b1e24); box-shadow: 0 8px 16px -6px rgba(0,0,0,0.95); }
.dev__mac-base::after { content: ''; display: block; width: 14%; height: 3px; margin: 0 auto; border-radius: 0 0 4px 4px; background: rgba(0,0,0,0.55); }

/* ── cross-promo: the sibling app ─────────────────────────────────── */
.promo { padding: clamp(30px, 5vw, 60px) var(--gut); }
.promo__card {
  max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(20px, 3vw, 40px); align-items: center; overflow: hidden;
  padding: clamp(22px, 2.6vw, 34px); border-radius: 24px;
  border: 1px solid var(--hair); background: linear-gradient(150deg, rgba(198,161,91,0.09), rgba(236,231,220,0.02) 45%, transparent);
  transition: border-color 0.45s, transform 0.5s var(--ease);
}
.promo__card:hover { border-color: rgba(198,161,91,0.42); transform: translateY(-4px); }
.promo__art { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--hair); background: #08090c; }
.promo__art img { width: 100%; display: block; transition: transform 1.1s var(--ease); }
.promo__card:hover .promo__art img { transform: scale(1.03); }
.promo__body h2 { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); margin-bottom: 12px; }
.promo__body h2 em { font-style: italic; color: var(--brass-hi); }
.promo__body p { color: var(--ink-dim); font-size: 14.5px; }
.promo__card:hover .tlink { gap: 14px; }

/* a single wide still with a caption under it */
.still { padding: 0 var(--gut) clamp(30px, 5vw, 60px); }
.still__fig { max-width: 980px; margin: 0 auto; }
.still__fig img { width: 100%; border-radius: 20px; border: 1px solid var(--hair); box-shadow: 0 40px 80px -34px rgba(0,0,0,1); }
.still__fig figcaption { margin: 16px auto 0; max-width: 62ch; text-align: center; font-size: 13px; color: var(--ink-faint); }

/* ── CarPlay dashboard mock ───────────────────────────────────────── */
.cp-sec { padding: 0 var(--gut) clamp(30px, 5vw, 60px); }
.cp-sec__inner { max-width: 940px; margin: 0 auto; }
.cp-sec__note { margin: 18px auto 0; max-width: 62ch; text-align: center; font-size: 13px; color: var(--ink-faint); }
/* A dashboard display is wide and shallow — three square slots set the height. */
.cp {
  display: flex; gap: 2%; padding: 1.6%; border-radius: 18px; container-type: inline-size;
  background: linear-gradient(165deg, #15171d, #08090c); border: 1px solid var(--hair-2);
  box-shadow: 0 40px 80px -34px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,0.06);
  aspect-ratio: 2.8 / 1;
}
/* the sidebar carries the clock, the app icons and the signal — as CarPlay does */
.cp__rail {
  display: flex; flex-direction: column; align-items: center; gap: 2.6cqw;
  width: 8.5%; padding: 1.4cqw 0; border-radius: 2.4cqw; background: rgba(236,231,220,0.04);
}
.cp__railtime { font-size: 1.9cqw; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cp__dot { display: block; width: 74%; aspect-ratio: 1/1; border-radius: 30%; background: rgba(236,231,220,0.09); }
.cp__dot--brand { background: linear-gradient(150deg, var(--brass-hi), var(--brass) 55%, var(--brass-deep)); }
.cp__body { flex: 1; display: flex; flex-direction: column; }
.cp__sig { display: flex; align-items: flex-end; gap: 0.4cqw; margin-top: auto; }
.cp__sig i { width: 0.6cqw; background: var(--ink-faint); border-radius: 0.4cqw; }
.cp__sig i:nth-child(1) { height: 0.9cqw } .cp__sig i:nth-child(2) { height: 1.5cqw } .cp__sig i:nth-child(3) { height: 2.1cqw }
/* CarPlay offers one slot shape only: the square. Every tile obeys it. */
.cp__tiles { flex: 1; display: flex; align-items: center; justify-content: center; gap: 1.6cqw; }
/* The slot CarPlay gives is wider than the square the design was drawn for, so
   the face is centred at its Home Screen shape instead of stretched to fit.
   No container-type on the sized boxes — it would contain the inline size and
   defeat the aspect-ratio that has to derive width from height. */
.cp__slot {
  flex: 0 0 auto; height: 86%; aspect-ratio: 1.28 / 1;
  display: grid; place-items: center; border-radius: 3cqw;
  border: 1px solid rgba(236,231,220,0.07); background: rgba(236,231,220,0.025);
}
.cp__tile { position: relative; height: 88%; aspect-ratio: 1 / 1; border-radius: 3.2cqw; overflow: hidden; }
.cp__tile .wface { position: absolute; inset: 0; }

.teaser { padding: clamp(50px, 8vw, 110px) 0; }
.teaser__cta, .pgallery__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 46px; padding: 0 var(--gut); }

.quotes { padding: clamp(40px, 6vw, 90px) var(--gut); }
.quotes__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.quote { margin: 0; padding: 28px; border-radius: 20px; border: 1px solid var(--hair); background: rgba(236,231,220,0.022); }
.quote p { font-family: var(--serif); font-size: 17px; line-height: 1.5; font-style: italic; }
.quote footer { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; }
.quote b { font-size: 13.5px; }
.quote span { font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.06em; }

.faq { padding: clamp(50px, 8vw, 110px) var(--gut); }
.faq__list { max-width: 820px; margin: 0 auto; }
.qa { border-bottom: 1px solid var(--hair); }
.qa summary { list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative; font-size: clamp(16px, 1.5vw, 19px); font-weight: 500; letter-spacing: -0.01em; transition: color 0.3s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--brass-hi); }
.qa__mark { position: absolute; right: 4px; top: 50%; width: 13px; height: 13px; margin-top: -6px; }
.qa__mark::before, .qa__mark::after { content: ''; position: absolute; background: var(--brass); transition: transform 0.4s var(--ease); }
.qa__mark::before { left: 0; top: 6px; width: 13px; height: 1.5px; }
.qa__mark::after { left: 6px; top: 0; width: 1.5px; height: 13px; }
.qa[open] .qa__mark::after { transform: rotate(90deg); }
.qa__a { padding: 0 60px 26px 0; color: var(--ink-dim); font-size: 15px; animation: qain 0.45s var(--ease); }
.qa__a p { margin: 0; }
@keyframes qain { from { opacity: 0; transform: translateY(-8px) } }

.endcta { padding: clamp(66px, 10vw, 140px) var(--gut); text-align: center; position: relative; overflow: hidden; }
.endcta::before { content: ''; position: absolute; left: 50%; top: 0; width: 120vw; height: 100%; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 40%, rgba(198,161,91,0.11), transparent 68%); }
/* A movement, barely there, behind the last thing you read. */
.endcta::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('/assets/art/movement.jpg') center/cover no-repeat;
  opacity: 0.16; mix-blend-mode: screen;
  mask-image: radial-gradient(58% 70% at 50% 50%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(58% 70% at 50% 50%, #000 0%, transparent 72%);
}
.endcta > * { position: relative; }
.endcta__clock { font-family: var(--serif); font-size: clamp(60px, 13vw, 158px); line-height: 1; color: rgba(236,231,220,0.06); letter-spacing: -0.04em; margin-bottom: -0.32em; font-variant-numeric: tabular-nums; }
.endcta__clock i { font-style: normal; opacity: 0.55; }
.endcta__clock small { font-size: 0.28em; vertical-align: super; color: rgba(198,161,91,0.28); margin-left: 0.1em; }
.endcta__title { font-family: var(--serif); font-size: clamp(32px, 5.2vw, 66px); font-weight: 400; }
.endcta__title em { font-style: italic; color: var(--brass-hi); }
.endcta__sub { margin: 22px auto 30px; color: var(--ink-dim); font-size: 15px; }
.endcta__row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.endcta--slim { padding-top: clamp(40px, 6vw, 80px); }

/* ── 5. seo pages + gallery ──────────────────────────────────────────── */
.crumbs { max-width: var(--max); margin: 0 auto 26px; padding: 0 var(--gut); display: flex; gap: 10px; font-size: 12px; color: var(--ink-faint); letter-spacing: 0.04em; }
.crumbs a:hover { color: var(--brass-hi); }

.phero { padding: 128px 0 clamp(40px, 6vw, 76px); overflow: hidden; }
.phero__glow { position: absolute; top: -20%; left: 50%; width: 120vw; height: 90vh; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 40%, rgba(198,161,91,0.1), transparent 66%); pointer-events: none; }
/* Horology pages get the movement macro washing in from the right. */
.page-luxury .phero__glow::after {
  content: ''; position: absolute; inset: 0;
  background: url('/assets/art/movement.jpg') 70% 40%/cover no-repeat;
  opacity: 0.2; mix-blend-mode: screen;
  mask-image: linear-gradient(90deg, transparent 34%, #000 92%);
  -webkit-mask-image: linear-gradient(90deg, transparent 34%, #000 92%);
}
.phero__inner { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(28px, 5vw, 66px); align-items: center; }
.phero__inner--center { grid-template-columns: 1fr; text-align: center; place-items: center; }
.phero__inner--center .kicker { justify-content: center; }
.phero__inner--center .phero__lede { margin-left: auto; margin-right: auto; }
.phero--doc .phero__copy { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.phero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 6.2vw, 78px); line-height: 0.98; letter-spacing: -0.03em; }
.phero__title em { font-style: italic; color: var(--brass-hi); }
.phero__title--doc { font-size: clamp(34px, 5vw, 62px); }
.phero__lede { margin: 26px 0 0; color: var(--ink-dim); font-size: clamp(15.5px, 1.35vw, 17.5px); max-width: 52ch; }
.phero__cards { position: relative; display: grid; gap: 16px; perspective: 1200px; }
.phero__card { will-change: transform; }
.phero__card:nth-child(2) { margin-left: 14%; }
.phero__card:nth-child(3) { margin-right: 12%; }
.phero__stats { position: relative; max-width: var(--max); margin: clamp(40px, 6vw, 72px) auto 0; padding: 26px var(--gut) 0; display: flex; gap: clamp(26px, 4vw, 64px); flex-wrap: wrap; }
.phero__stats::before { content: ''; position: absolute; left: var(--gut); right: var(--gut); top: 0; height: 1px; background: var(--hair); }
.phero__stats dt { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); color: var(--brass-hi); line-height: 1; }
.phero__stats dd { margin: 8px 0 0; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }

.pfeat { padding: clamp(46px, 7vw, 100px) var(--gut); }
.pfeat__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 46px); }
.pfeat__item { position: relative; padding-top: 30px; border-top: 1px solid var(--hair); }
.pfeat__n { position: absolute; top: -11px; left: 0; font-family: var(--mono); font-size: 11px; color: var(--brass); background: var(--ground); padding-right: 12px; letter-spacing: 0.12em; }
.pfeat__item h2 { font-family: var(--serif); font-size: clamp(21px, 2vw, 27px); margin-bottom: 13px; }
.pfeat__item p { color: var(--ink-dim); font-size: 14.5px; margin: 0; }

.pgallery { padding: clamp(46px, 7vw, 100px) 0; }
.prose-sec { padding: clamp(40px, 6vw, 90px) var(--gut); }
.prose { max-width: 700px; margin: 0 auto; }
.prose h2 { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 26px; }
.prose p { color: var(--ink-dim); font-size: clamp(15.5px, 1.4vw, 17px); line-height: 1.78; }
.prose--doc h2 { font-size: clamp(20px, 2.2vw, 26px); margin: 44px 0 14px; }
.prose--doc h2:first-child { margin-top: 0; }
.prose--doc a { color: var(--brass-hi); border-bottom: 1px solid rgba(231,206,147,0.3); }
.prose--doc ul li { color: var(--ink-dim); padding-left: 20px; position: relative; margin-bottom: 8px; }
.prose--doc ul li::before { content: '·'; position: absolute; left: 6px; color: var(--brass); }
.prose__stamp { margin-top: 46px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--ink-faint); }

.steps-sec { padding: clamp(46px, 7vw, 100px) var(--gut); }
.howto { max-width: 760px; margin: 0 auto; counter-reset: s; }
.howto__i { display: flex; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--hair); }
.howto__n { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--brass-hi); border: 1px solid rgba(198,161,91,0.4); background: rgba(198,161,91,0.06); }
.howto__i h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; }
.howto__i p { margin: 0; color: var(--ink-dim); font-size: 14.5px; }

.related { padding: clamp(46px, 7vw, 100px) var(--gut); }
.related__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.relcard { position: relative; padding: 26px; border-radius: 20px; border: 1px solid var(--hair); background: rgba(236,231,220,0.022); transition: border-color 0.45s, transform 0.5s var(--ease), background 0.45s; }
.relcard:hover { border-color: rgba(198,161,91,0.4); transform: translateY(-5px); background: rgba(198,161,91,0.045); }
.relcard h3 { font-family: var(--serif); font-size: 20px; margin-bottom: 10px; }
.relcard__d { color: var(--ink-faint); font-size: 13px; margin: 0; }
.relcard__go { position: absolute; right: 22px; bottom: 22px; color: var(--brass); opacity: 0; transform: translateX(-6px); transition: all 0.45s var(--ease); }
.relcard:hover .relcard__go { opacity: 1; transform: none; }

.gal { padding: 20px 0 clamp(46px, 7vw, 90px); }
.gal__bar { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 900px; margin: 0 auto 40px; padding: 0 var(--gut); }
.chip { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; padding: 8px 15px; border-radius: 100px; border: 1px solid var(--hair-2); background: transparent; color: var(--ink-dim); cursor: pointer; transition: all 0.3s; }
.chip:hover { color: var(--ink); border-color: var(--brass); }
.chip.is-on { background: var(--brass); border-color: var(--brass); color: #14100a; font-weight: 600; }
.wgrid--gal { display: grid; }
.galcell { transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.galcell:has(.wcard[data-ratio='wide']) { grid-column: span 2; }
.galcell.is-out { display: none; }
.gal__empty { text-align: center; color: var(--ink-faint); padding: 40px var(--gut); }

/* ══ 6. widget faces ═════════════════════════════════════════════════ */
.f { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; }

/* editorial */
.f-editorial { background: linear-gradient(170deg, #f6f1e6, #e8e1d2); color: #1a1712; padding: 8cqi 8cqi 6cqi; justify-content: space-between; font-family: var(--serif); }
.f-editorial__mast { font-size: 4.4cqi; letter-spacing: 0.34em; text-transform: uppercase; font-family: var(--sans); font-weight: 600; text-align: center; }
.f-editorial .rule { background: #1a1712; margin: 2.6cqi 0; }
.f-editorial__t { font-size: 25cqi; line-height: 0.9; text-align: center; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.f-editorial__d { font-size: 4.6cqi; font-style: italic; text-align: center; margin-top: 1.4cqi; }
.f-editorial__foot { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 3.2cqi; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; }

/* dials */
.dial { width: 100%; height: 100%; }
.dial__bezel { fill: #1b1e22; stroke: rgba(255,255,255,0.14); stroke-width: 0.5; }
.dial__face { fill: #0d0f12; }
.dial__tick { fill: rgba(236,231,220,0.4); }
.dial__tick--h { fill: rgba(236,231,220,0.92); }
.dial__bt { fill: rgba(236,231,220,0.55); }
.dial__pip { fill: #d7ffe6; }
.dial__lume { fill: #cfe9d8; opacity: 0.9; }
.dial__num { fill: #ece7dc; font-family: var(--sans); font-size: 9px; font-weight: 600; text-anchor: middle; }
.dial__label { fill: rgba(236,231,220,0.62); font-family: var(--sans); font-size: 4.6px; letter-spacing: 1.2px; text-anchor: middle; }
.dial__sub { fill: rgba(236,231,220,0.4); font-family: var(--sans); font-size: 4px; letter-spacing: 0.8px; text-anchor: middle; }
.dial__datew { fill: #f2ede2; stroke: rgba(0,0,0,0.35); stroke-width: 0.4; }
.dial__date { fill: #14161a; font-family: var(--sans); font-size: 6px; font-weight: 600; text-anchor: middle; }
.dial__pin { fill: #e8e2d6; }
.hand rect { fill: #f0ebe0; }
.hand--s rect, .hand--s circle { fill: #d8534a; }
.dial--dive .dial__bezel { fill: #10281c; stroke: rgba(160,220,180,0.22); }
.dial--dive .dial__face { fill: #0a1b13; }
.dial--dive .dial__bt { fill: rgba(207,233,216,0.7); }
.dial--gold .dial__bezel { fill: #c9a24a; }
.dial--gold .dial__flute { fill: rgba(255,255,255,0.22); }
.dial--gold .dial__face { fill: #e9dcb6; }
.dial--gold .dial__tick { fill: rgba(40,32,12,0.4); }
.dial--gold .dial__tick--h { fill: #3a2f12; }
.dial--gold .dial__label, .dial--gold .dial__sub { fill: rgba(40,32,12,0.6); }
.dial--gold .hand rect { fill: #4a3a12; }
.dial--gold .dial__pin { fill: #4a3a12; }
.dial--explorer .dial__face { fill: #08090b; }
.dial--moon .dial__face { fill: #0c1220; }
.dial__moonbg { fill: #060b16; }
.dial__moon { fill: #f0e6c8; }
.dial__moonmask { fill: #060b16; }
.dial__moonring { fill: none; stroke: rgba(198,161,91,0.5); stroke-width: 0.6; }
.dial--moon .hand rect { fill: #e7ce93; }

/* seven-segment shared */
.segs { width: 100%; height: auto; }
.sg { opacity: 0.055; transition: opacity 0.12s; }
.sg.is-on { opacity: 1; }
.f-digital { background: radial-gradient(120% 90% at 50% 0%, #12171a, #05070a); padding: 7cqi 7cqi 6cqi; justify-content: space-between; }
.f-digital .sg { fill: #5ff07a; }
.f-digital .sg.is-on { filter: drop-shadow(0 0 1.4px rgba(95,240,122,0.9)); }
.f-digital .sc circle { fill: #5ff07a; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.12 } }
.f-digital__top, .f-digital__foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 3.6cqi; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(95,240,122,0.5); }
.f-digital .segs { padding: 3cqi 0; }

.f-lcd { background: #b9bda6; padding: 5cqi; }
.f-lcd__panel { flex: 1; border-radius: 2cqi; background: linear-gradient(170deg, #c7cbb2, #a8ad95); padding: 4cqi; display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 0 0 0 0.6cqi rgba(0,0,0,0.13); }
.f-lcd .sg { fill: #1c2418; opacity: 0.075; }
.f-lcd .sg.is-on { opacity: 0.92; }
.f-lcd .sc circle { fill: #1c2418; }
.f-lcd__row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 3.4cqi; letter-spacing: 0.12em; color: rgba(28,36,24,0.62); text-transform: uppercase; }
.f-lcd .segs { padding: 2cqi 0; }

/* flip */
.f-flip { background: linear-gradient(170deg, #17191f, #0a0b0e); align-items: center; justify-content: center; gap: 4cqi; padding: 6cqi; }
.f-flip__row { display: flex; align-items: center; gap: 3cqi; }
.f-flip__sep { width: 1.6cqi; height: 1.6cqi; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 0 rgba(198,161,91,0.5); animation: blink 1s steps(1) infinite; }
.flip {
  --fh: 27cqi; /* full card height — the two halves and both leaf faces share it */
  position: relative; width: 21cqi; height: var(--fh); perspective: 50cqi;
  font-family: var(--sans); font-weight: 700; font-size: 17cqi; font-variant-numeric: tabular-nums; letter-spacing: -0.04em;
}
.flip__card, .flip__leaf-f, .flip__leaf-b { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; color: #f2ece1; }
.flip__card--top, .flip__leaf-f { top: 0; border-radius: 1.6cqi 1.6cqi 0 0; background: linear-gradient(180deg, #31353f, #23272f); }
.flip__card--bot, .flip__leaf-b { bottom: 0; border-radius: 0 0 1.6cqi 1.6cqi; background: linear-gradient(180deg, #1b1e25, #12151a); }
/* the glyph is laid out against the FULL card height, then clipped by each half */
.flip span { position: absolute; left: 0; right: 0; height: var(--fh); line-height: var(--fh); text-align: center; }
.flip__card--top span, .flip__leaf-f span { top: 0; }
.flip__card--bot span, .flip__leaf-b span { bottom: 0; }
.flip__hinge { position: absolute; top: 50%; left: 0; right: 0; height: 0.5cqi; margin-top: -0.25cqi; background: rgba(0,0,0,0.7); z-index: 3; }
.flip__leaf { position: absolute; top: 0; left: 0; right: 0; height: 50%; transform-style: preserve-3d; transform-origin: bottom; z-index: 2; }
.flip__leaf-f, .flip__leaf-b { backface-visibility: hidden; height: 100%; }
/* The leaf's own rotateX(180) and the parent's fall cancel out, so the back
   face needs the bottom half laid out normally — no extra mirroring. */
.flip__leaf-b { transform: rotateX(180deg); top: 0; bottom: auto; }
.flip__leaf.is-flip .flip__leaf-f { box-shadow: inset 0 0 0 0 rgba(0,0,0,0); animation: leafshade 0.42s linear forwards; }
@keyframes leafshade { to { filter: brightness(0.55) } }
.flip__leaf.is-flip { animation: flipfall 0.42s cubic-bezier(0.4, 0, 0.35, 1) forwards; }
@keyframes flipfall { 0% { transform: rotateX(0) } 100% { transform: rotateX(-180deg) } }
.f-flip__foot { font-family: var(--sans); font-size: 3.4cqi; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); }

/* word */
.f-word { background: radial-gradient(120% 100% at 50% 0%, #16181e, #08090c); padding: 7cqi; align-items: center; justify-content: center; }
.f-word__grid { display: grid; grid-template-columns: repeat(11, 1fr); gap: 0.6cqi 0.2cqi; width: 100%; }
.f-word__grid span { font-family: var(--sans); font-size: 5.2cqi; font-weight: 600; text-align: center; color: rgba(236,231,220,0.09); transition: color 0.6s, text-shadow 0.6s; }
.f-word__grid span.is-on { color: #f2ece1; text-shadow: 0 0 2cqi rgba(231,206,147,0.55); }

/* dot matrix / pixel */
.dots { width: 100%; height: auto; }
.dot { fill: currentColor; opacity: 0.07; transition: opacity 0.15s; }
.dot.is-on { opacity: 1; }
.f-dotmatrix { background: #08090b; color: #ffb648; padding: 6cqi; justify-content: center; gap: 4cqi; }
.f-dotmatrix__bar { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 3.2cqi; letter-spacing: 0.2em; color: rgba(255,182,72,0.5); }
.f-dotmatrix .dot.is-on { filter: drop-shadow(0 0 0.5px rgba(255,182,72,0.9)); }
.f-pixel { background: #0a0d0b; color: #7cf58c; padding: 7cqi; justify-content: center; gap: 4cqi; }
.f-pixel .dot { shape-rendering: crispEdges; }
.f-pixel .dot.is-on { filter: drop-shadow(0 0 1px rgba(124,245,140,0.85)); }
.f-pixel__scan { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0,0,0,0.4) 0 1px, transparent 1px 3px); pointer-events: none; opacity: 0.55; }
.f-pixel__foot { font-family: var(--mono); font-size: 3.2cqi; letter-spacing: 0.18em; color: rgba(124,245,140,0.55); text-align: center; }

/* nixie — all ten numerals live in the tube, only one of them is lit */
.f-nixie { background: radial-gradient(120% 100% at 50% 120%, #1d140c, #06050a 62%); justify-content: center; padding: 5cqi; }
.f-nixie__row { display: flex; align-items: flex-end; justify-content: center; gap: 1.4cqi; }
.nx {
  position: relative; width: 11cqi; height: 20cqi; border-radius: 5.5cqi 5.5cqi 1.4cqi 1.4cqi;
  background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.4));
  box-shadow: inset 0 0 2cqi rgba(255,180,90,0.18), inset 0 -1cqi 2cqi rgba(0,0,0,0.6), 0 0 4cqi rgba(255,150,60,0.22);
  overflow: hidden; display: grid; place-items: center;
}
.nx__mesh {
  position: absolute; inset: 12% 14% 18%;
  background-image: repeating-linear-gradient(0deg, rgba(255,190,120,0.16) 0 0.5px, transparent 0.5px 2px),
    repeating-linear-gradient(90deg, rgba(255,190,120,0.16) 0 0.5px, transparent 0.5px 2px);
}
.nx__glass {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,0.24) 0 8%, transparent 22% 78%, rgba(255,255,255,0.09) 92%);
  box-shadow: inset 0 0 0 0.4cqi rgba(255,255,255,0.07);
}
.nx b { position: absolute; font-family: var(--sans); font-weight: 500; font-size: 12cqi; line-height: 1; font-variant-numeric: tabular-nums; }
.nx__ghost { color: rgba(255,170,90,0.09); }
.nx__ghost--1 { transform: translate(-0.6cqi, -0.5cqi) scale(0.94); }
.nx__ghost--2 { transform: translate(0.7cqi, 0.6cqi) scale(0.9); }
.nx__on {
  color: #ffb257;
  text-shadow: 0 0 0.6cqi #fff0d0, 0 0 2cqi #ff8a1e, 0 0 5cqi rgba(255,120,20,0.85), 0 0 10cqi rgba(255,90,10,0.45);
  animation: nixflicker 6s steps(1) infinite;
}
@keyframes nixflicker { 0%, 96% { opacity: 1 } 97% { opacity: 0.88 } 98% { opacity: 1 } 99% { opacity: 0.93 } }
.nx-sep { display: flex; flex-direction: column; justify-content: center; gap: 3.4cqi; padding: 0 0.6cqi 3cqi; }
.nx-sep i { width: 1.1cqi; height: 1.1cqi; border-radius: 50%; background: #ffb257; box-shadow: 0 0 1.6cqi #ff8a1e; animation: blink 1s steps(1) infinite; }
.f-nixie__base { height: 2.4cqi; margin: 1.6cqi 6cqi 0; border-radius: 1cqi; background: linear-gradient(180deg, #5a4526, #241a0d); box-shadow: 0 1cqi 3cqi rgba(0,0,0,0.7); }

/* terminal */
.f-terminal { background: #05080a; padding: 6cqi; justify-content: center; gap: 1cqi; font-family: var(--mono); color: #4ef08a; }
.f-terminal__l { font-size: 3.9cqi; letter-spacing: 0.02em; }
.f-terminal__l--dim { color: rgba(78,240,138,0.42); }
.f-terminal__big { font-size: 15cqi; font-weight: 700; letter-spacing: -0.02em; margin: 1cqi 0; text-shadow: 0 0 3cqi rgba(78,240,138,0.35); font-variant-numeric: tabular-nums; }
.caret { display: inline-block; width: 2cqi; height: 4cqi; background: #4ef08a; vertical-align: -0.6cqi; animation: blink 1.1s steps(1) infinite; }

/* neon */
.f-neon { background: radial-gradient(120% 100% at 50% 120%, #1a0f22, #07060a); align-items: center; justify-content: center; gap: 3cqi; }
.f-neon__tube { font-family: var(--serif); font-style: italic; font-size: 24cqi; color: #fff0fb; letter-spacing: -0.02em;
  text-shadow: 0 0 1cqi #fff, 0 0 3cqi #ff5ecb, 0 0 7cqi rgba(255,94,203,0.75), 0 0 14cqi rgba(255,94,203,0.4); animation: hum 4s ease-in-out infinite; }
@keyframes hum { 48% { opacity: 1 } 50% { opacity: 0.82 } 52% { opacity: 1 } }
.f-neon__sub { font-family: var(--sans); font-size: 3.6cqi; letter-spacing: 0.34em; text-transform: uppercase; color: #9be6ff; text-shadow: 0 0 2cqi rgba(155,230,255,0.8); }

/* aura */
.f-aura { background: #0a0a12; justify-content: flex-end; padding: 7cqi; }
.f-aura .blob { position: absolute; border-radius: 50%; filter: blur(9cqi); opacity: 0.85; }
.blob--1 { width: 70%; height: 90%; left: -14%; top: -20%; background: #7a3cff; animation: drift1 15s ease-in-out infinite alternate; }
.blob--2 { width: 66%; height: 80%; right: -12%; top: 8%; background: #ff4d8d; animation: drift2 19s ease-in-out infinite alternate; }
.blob--3 { width: 60%; height: 70%; left: 22%; bottom: -22%; background: #2ad2ff; animation: drift1 23s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate3d(14%, 10%, 0) scale(1.16) } }
@keyframes drift2 { to { transform: translate3d(-12%, 14%, 0) scale(1.1) } }
.f-aura__d { position: relative; font-size: 3.6cqi; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
.f-aura__t { position: relative; font-size: 22cqi; font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }

/* bold */
.f-bold { background: linear-gradient(165deg, #16181d, #08090b); justify-content: center; padding: 7cqi; }
.f-bold__t { font-size: 30cqi; font-weight: 700; letter-spacing: -0.055em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.f-bold__c { color: var(--brass); }
.f-bold__d { display: flex; align-items: center; gap: 2cqi; margin-top: 2cqi; font-size: 3.6cqi; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.f-bold__d i { width: 6cqi; height: 1px; background: var(--brass); }

/* e-ink */
.f-eink { background: #eae7e0; color: #16150f; padding: 8cqi; justify-content: space-between; }
.f-eink__grain { position: absolute; inset: 0; opacity: 0.5; background-image: radial-gradient(rgba(0,0,0,0.16) 0.5px, transparent 0.6px); background-size: 3px 3px; }
.f-eink__top, .f-eink__b { position: relative; font-size: 3.8cqi; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.6; }
.f-eink__b { text-align: right; }
.f-eink__t { position: relative; font-family: var(--serif); font-size: 30cqi; line-height: 0.86; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

/* rings */
.f-rings { background: radial-gradient(100% 100% at 50% 0%, #14161d, #08090c); display: grid; place-items: center; }
.f-rings svg { position: absolute; inset: 8%; width: 84%; height: 84%; transform: rotate(-90deg); }
.rt { fill: none; stroke: rgba(236,231,220,0.07); stroke-width: 3.4; }
.rp { fill: none; stroke-width: 3.4; stroke-linecap: round; }
.rp--h { stroke: var(--brass-hi); }
.rp--m { stroke: #7c8a97; }
.rp--s { stroke: #d8534a; }
.f-rings__c { position: relative; text-align: center; }
.f-rings__c b { display: block; font-size: 13cqi; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.f-rings__c i { font-style: normal; font-family: var(--mono); font-size: 4cqi; color: var(--brass); letter-spacing: 0.2em; }

/* world */
.f-world { background: linear-gradient(170deg, #0d1220, #06070c); padding: 6cqi 5cqi; justify-content: center; gap: 3cqi; }
.wmap { width: 100%; height: auto; }
.wdot { fill: #7fd4ff; opacity: 0.62; transition: opacity 0.8s, fill 0.8s; }
.wdot.is-night { fill: #4a5a86; opacity: 0.3; }
.wpin__halo { fill: rgba(231,206,147,0.22); animation: pulse 3s ease-in-out infinite; }
.wpin__dot { fill: var(--brass-hi); }
@keyframes pulse { 50% { r: 2.2; opacity: 0.4 } }
.f-world__cities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqi 2cqi; }
.wcity { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.wcity b { font-size: 2.9cqi; letter-spacing: 0.14em; color: rgba(236,231,220,0.5); font-weight: 500; }
.wcity i { font-style: normal; font-family: var(--mono); font-size: 3.6cqi; color: var(--brass-hi); font-variant-numeric: tabular-nums; }

/* sun arc */
.f-sunarc { background: linear-gradient(175deg, #cfe4f2 0%, #f3e2cc 62%, #f7d9b4 100%); color: #2b2418; padding: 5cqi 6cqi; justify-content: space-between; }
.f-sunarc__top { display: flex; justify-content: space-between; align-items: baseline; }
.f-sunarc__city { font-size: 3.2cqi; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; }
.f-sunarc__top b { font-size: 8cqi; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.f-sunarc svg { width: 100%; height: auto; }
.sa-h { stroke: rgba(43,36,24,0.28); stroke-width: 0.7; stroke-dasharray: 2 3; }
.sa-arc { fill: none; stroke: rgba(43,36,24,0.2); stroke-width: 1.6; }
.sa-done { fill: none; stroke: url(#sag); stroke-width: 2.4; stroke-linecap: round; }
.sa-sun { fill: #ffb648; stroke: #fff3d8; stroke-width: 1.6; filter: drop-shadow(0 0 3px rgba(255,182,72,0.8)); }
.sa-sun.is-down { fill: #8ea4c0; }
.f-sunarc__foot { display: flex; justify-content: space-between; font-size: 3.1cqi; opacity: 0.72; letter-spacing: 0.04em; }
.f-sunarc__foot b { font-variant-numeric: tabular-nums; }

/* vapor */
.f-vapor { background: linear-gradient(180deg, #1a0b34 0%, #4d1b5e 52%, #10041f 53%, #10041f 100%); align-items: center; justify-content: center; }
.f-vapor__sun { position: absolute; top: 14%; left: 50%; width: 42%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: linear-gradient(180deg, #ffe36b, #ff5f9e); mask-image: repeating-linear-gradient(180deg, #000 0 6px, transparent 6px 8px); }
.f-vapor__grid { position: absolute; left: -50%; right: -50%; bottom: 0; height: 47%;
  background-image: repeating-linear-gradient(90deg, rgba(255,60,180,0.5) 0 1px, transparent 1px 34px), repeating-linear-gradient(0deg, rgba(255,60,180,0.5) 0 1px, transparent 1px 22px);
  transform: perspective(30cqi) rotateX(64deg); transform-origin: bottom; }
.f-vapor__t { position: relative; font-size: 21cqi; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 12%, #b6e6ff 38%, #6a4bff 52%, #ff5f9e 70%, #ffe36b 92%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0.6cqi 0 rgba(0,0,0,0.35)); }
.f-vapor__s { position: relative; font-size: 3.4cqi; letter-spacing: 0.4em; text-transform: uppercase; color: #ffd9f2; }

/* bento */
.f-bento { background: #0b0d11; display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1.4fr 1fr; gap: 2.2cqi; padding: 5cqi; }
.bcell { border-radius: 3cqi; background: linear-gradient(160deg, rgba(236,231,220,0.06), rgba(236,231,220,0.02)); border: 1px solid rgba(236,231,220,0.07); padding: 3cqi; display: flex; flex-direction: column; justify-content: center; }
.bcell--t { grid-column: 1 / -1; align-items: flex-start; }
.bcell--t b { font-size: 21cqi; font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.bcell--t i { font-style: normal; font-family: var(--mono); font-size: 3.4cqi; color: var(--brass); letter-spacing: 0.2em; }
.bcell--d { align-items: center; text-align: center; background: linear-gradient(160deg, rgba(198,161,91,0.2), rgba(198,161,91,0.05)); }
.bcell--d span { font-size: 2.8cqi; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-hi); }
.bcell--d b { font-size: 8cqi; font-weight: 600; line-height: 1.05; }
.bcell--z { align-items: center; text-align: center; gap: 0.4cqi; }
.bcell--z .bz-k, .bcell--z .bz-m { font-size: 3cqi; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); }
.bcell--z .bz-k:empty { display: none; }
.bcell--z b { font-size: 5.4cqi; font-weight: 500; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

/* ticket */
.f-ticket { background: #f4efe4; color: #1c1810; flex-direction: row; padding: 0; }
.f-ticket__l { flex: 1.6; padding: 5cqi; display: flex; flex-direction: column; justify-content: center; gap: 1cqi; }
.f-ticket__r { flex: 1; padding: 5cqi; display: flex; flex-direction: column; justify-content: center; gap: 1cqi; align-items: center; text-align: center; }
.f-ticket__k { font-size: 2.8cqi; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.55; }
.f-ticket__l b { font-size: 16cqi; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.f-ticket__r b { font-size: 12cqi; font-weight: 700; line-height: 1; }
.f-ticket__perf { width: 0; border-left: 0.5cqi dashed rgba(28,24,16,0.3); margin: 3cqi 0; }
.f-ticket__bar { width: 80%; height: 6cqi; margin-top: 1cqi; background-image: repeating-linear-gradient(90deg, #1c1810 0 1.2px, transparent 1.2px 2.4px, #1c1810 2.4px 3px, transparent 3px 5px); }

/* chrome */
.f-chrome { background: linear-gradient(170deg, #14161c, #05060a); align-items: center; justify-content: center; gap: 2cqi; }
.f-chrome__t { font-size: 24cqi; font-weight: 700; letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
  background: linear-gradient(178deg, #fdfbf5 4%, #a9b0bd 26%, #4b5261 44%, #ffffff 52%, #c9a15b 62%, #6d5a2c 80%, #efe3c4 96%);
  background-size: 100% 300%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 7s ease-in-out infinite alternate; }
@keyframes sheen { to { background-position: 0 100% } }
.f-chrome__s { font-size: 3.2cqi; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-faint); }

/* glass */
.f-glass { background: linear-gradient(150deg, #1b2432, #0a0d13); padding: 6cqi; justify-content: center; }
.f-glass__leak { position: absolute; top: -30%; left: -10%; width: 70%; height: 90%; background: radial-gradient(circle, rgba(120,190,255,0.45), transparent 62%); filter: blur(8cqi); }
.f-glass__pane { position: relative; border-radius: 4cqi; padding: 5cqi; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -14cqi 18cqi -12cqi rgba(0,0,0,0.5); }
.f-glass__t { font-size: 19cqi; font-weight: 300; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.f-glass__d { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.6cqi; font-size: 3.2cqi; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.f-glass__d i { font-style: normal; font-family: var(--mono); color: #9be6ff; }

/* calendar */
.f-calendar { background: #f7f4ec; color: #1a1712; padding: 6cqi; gap: 2cqi; }
.f-calendar__h { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--serif); }
.f-calendar__h b { font-size: 7.5cqi; font-weight: 500; }
.f-calendar__h span { font-size: 4cqi; opacity: 0.5; }
.f-calendar__w, .f-calendar__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.6cqi; text-align: center; }
.f-calendar__w span { font-size: 2.8cqi; letter-spacing: 0.06em; opacity: 0.42; font-weight: 600; }
.f-calendar__g span { font-size: 3.6cqi; padding: 0.7cqi 0; border-radius: 50%; font-variant-numeric: tabular-nums; }
.f-calendar__g .is-today { background: #1a1712; color: #f7f4ec; font-weight: 600; }

/* calendar, noir — the dark twin, for screens you read at night */
.f-calnoir { background: linear-gradient(165deg, #16181f, #0a0b0e); color: var(--ink); padding: 6cqi; gap: 2cqi; }
.f-calnoir__h { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--serif); }
.f-calnoir__h b { font-size: 7.5cqi; font-weight: 500; color: var(--brass-hi); }
.f-calnoir__h span { font-size: 4cqi; color: var(--ink-faint); }
.f-calnoir__w, .f-calnoir__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.6cqi; text-align: center; }
.f-calnoir__w span { font-size: 2.8cqi; letter-spacing: 0.06em; color: var(--ink-faint); font-weight: 600; }
.f-calnoir__g span { font-size: 3.6cqi; padding: 0.7cqi 0; border-radius: 50%; color: rgba(236,231,220,0.62); font-variant-numeric: tabular-nums; }
.f-calnoir__g .is-today { background: linear-gradient(150deg, var(--brass-hi), var(--brass)); color: #14100a; font-weight: 700; }

/* agenda */
.f-agenda { background: linear-gradient(160deg, #14161d, #08090c); flex-direction: row; align-items: center; padding: 6cqi; gap: 4cqi; }
.f-agenda__big { font-family: var(--serif); font-size: 22cqi; line-height: 0.85; color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.f-agenda__c { flex: 1; }
.f-agenda__c b { display: block; font-size: 5cqi; font-weight: 600; letter-spacing: -0.01em; }
.f-agenda__c span { font-size: 3.2cqi; color: var(--ink-faint); letter-spacing: 0.14em; text-transform: uppercase; }
.f-agenda__bar { display: flex; gap: 1cqi; margin-top: 2.4cqi; }
.f-agenda__bar i { flex: 1; height: 1cqi; border-radius: 1cqi; background: rgba(236,231,220,0.12); }
.f-agenda__bar i.past { background: rgba(198,161,91,0.4); }
.f-agenda__bar i.now { background: var(--brass-hi); }
.f-agenda__t { font-family: var(--mono); font-size: 4.6cqi; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

/* pomodoro */
.f-pomo { background: radial-gradient(100% 100% at 50% 0%, #171219, #08070a); display: grid; place-items: center; }
.f-pomo svg { position: absolute; inset: 9%; width: 82%; height: 82%; transform: rotate(-90deg); }
.pt { fill: none; stroke: rgba(236,231,220,0.07); stroke-width: 4; }
.pp { fill: none; stroke: var(--brass-hi); stroke-width: 4; stroke-linecap: round; transition: stroke 0.6s; }
.f-pomo.is-break .pp { stroke: #6fd3a0; }
.f-pomo__c { position: relative; text-align: center; }
.f-pomo__k { font-family: var(--mono); font-size: 3.2cqi; letter-spacing: 0.34em; color: var(--brass); }
.f-pomo__c b { display: block; font-size: 16cqi; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.f-pomo__c i { font-style: normal; font-size: 3cqi; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }

/* echo */
.f-echo { background: linear-gradient(160deg, #101219, #07080b); align-items: center; justify-content: center; }
.f-echo__g { position: absolute; font-size: 21cqi; font-weight: 300; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.f-echo__g--0 { color: #f2ece1; }
.f-echo__g--1 { color: rgba(242,236,225,0.28); transform: translateY(-6cqi) scale(0.86); }
.f-echo__g--2 { color: rgba(242,236,225,0.13); transform: translateY(-11cqi) scale(0.74); }
.f-echo__g--3 { color: rgba(242,236,225,0.06); transform: translateY(-15cqi) scale(0.64); }
.f-echo__s { position: absolute; bottom: 7cqi; font-family: var(--mono); font-size: 3.4cqi; letter-spacing: 0.3em; color: var(--brass); }

/* ── 7. responsive ───────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .wild__grid { grid-template-columns: repeat(2, 1fr); }
  .wild__grid--one .wildcard { grid-template-columns: 1fr; }
  .wild__grid--one .wildcard__shot { min-height: 0; aspect-ratio: 4 / 3; }
  .wild__grid--one .wildcard__phone { right: 7%; bottom: -5%; width: 26%; }
  .promo__card { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
  .quotes__grid, .related__grid { grid-template-columns: repeat(2, 1fr); }
  .pfeat__grid, .craft__grid { grid-template-columns: 1fr; }
  .stage__grid { grid-template-columns: 1fr; }
  .stage__sticky { position: relative; top: 0; height: auto; padding: 20px 0 40px; }
  .stage__device { width: min(260px, 70%); }
}
@media (max-width: 900px) {
  .nav__links, .nav__right { display: none; }
  .nav__burger { display: flex; }
  /* Copy first on a phone — the headline has to be the first thing you read. */
  .hero { min-height: auto; padding-top: 104px; }
  .hero__inner, .phero__inner, .world-sec__inner { grid-template-columns: 1fr; }
  .hero__scene { height: clamp(340px, 72vw, 460px); order: 1; margin-top: 26px; }
  .hero__scroll { display: none; }
  .kicker--hero { letter-spacing: 0.24em; font-size: 10.5px; }
  .surfaces__grid { grid-template-columns: 1fr; }
  .phero__cards { grid-template-columns: repeat(2, 1fr); }
  .phero__cards .phero__card:nth-child(n) { margin: 0; }
  .phero__cards .phero__card:nth-child(3) { display: none; }
  .foot__top { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* three photo cards side by side on a phone leave one word per line */
  .wild__grid { grid-template-columns: 1fr; }
  .wild { padding-left: var(--gut); padding-right: var(--gut); }
  .cp { aspect-ratio: 2.2 / 1; }
  .cp__rail { width: 12%; gap: 1.6cqw; }
  .cp__railtime { font-size: 2.6cqw; }
}
@media (max-width: 640px) {
  .wgrid { grid-template-columns: repeat(2, 1fr); }
  .wgrid .wcard[data-ratio='wide'], .galcell:has(.wcard[data-ratio='wide']) { grid-column: span 2; }
  .quotes__grid, .related__grid { grid-template-columns: 1fr; }
  .hero__stats { gap: 20px; flex-wrap: wrap; }
  .hero__title { font-size: clamp(46px, 15vw, 74px); }
  .marquee__track .wcard { width: 132px; }
  .marquee__track .wcard[data-ratio='wide'] { width: 262px; }
  .f-world__cities { grid-template-columns: repeat(4, 1fr); }
  .scene__float--b, .scene__float--d { display: none; }
  .scene__float--a { left: 0; top: 4%; width: 42%; }
  .scene__float--c { right: 0; bottom: 6%; width: 42%; }
  .scene__device { width: 54%; }
  .hero__stats dt { font-size: 22px; }
  .hero__stats dd { font-size: 10px; letter-spacing: 0.12em; }
}

@media (max-width: 900px) {
  .devices__grid { grid-template-columns: 1fr; gap: 34px; }
  .devcard__stage { height: 220px; }
}

@media (max-width: 900px) {
  .acc-sec__grid { grid-template-columns: 1fr; }
}