@charset "utf-8";
/* ==========================================================================
   Ylemos Inc — Design System
   Paper-and-ink editorial system for an independent iOS studio.
   Accent discipline: ONE accent (gold) on a cream paper ground with deep
   forest ink. See README-DESIGN.md for the locked values.
   ========================================================================== */

@import url("../fonts/fonts.css");

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surface — warm paper stack (locked, no section flips) */
  --paper:      #FAF6EC;
  --paper-2:    #F4EDDD;
  --paper-3:    #ECE2CE;
  --card:       #FFFCF5;

  /* Ink — deep forest, not neutral black */
  --ink:        #12241A;
  --ink-soft:   #2C4234;
  --muted:      #5E6F62;

  /* Brand */
  --forest:     #1B5E20;
  --forest-deep:#0B2C13;
  --gold:       #B98A32;
  --gold-soft:  #E0C48F;

  /* Deliberate colour block (Ryndix panel only) */
  --navy:       #101E2B;
  --navy-2:     #17293A;

  --line:       rgba(18, 36, 26, 0.14);
  --line-soft:  rgba(18, 36, 26, 0.07);

  /* Shape lock: cards 20px · buttons pill · media 26px · chips 10px */
  --r-card: 20px;
  --r-media: 26px;
  --r-chip: 10px;
  --r-pill: 999px;

  /* Elevation — tinted to the paper hue, never neutral black */
  --shadow-sm: 0 2px 6px rgba(18, 36, 26, 0.05), 0 8px 20px rgba(18, 36, 26, 0.05);
  --shadow-md: 0 6px 16px rgba(18, 36, 26, 0.07), 0 22px 48px rgba(18, 36, 26, 0.09);
  --shadow-lg: 0 10px 24px rgba(11, 44, 19, 0.09), 0 40px 90px rgba(11, 44, 19, 0.16);

  /* Type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(2.9rem, 6.6vw, 6rem);
  --fs-h2:      clamp(2rem, 3.9vw, 3.35rem);
  --fs-h3:      clamp(1.45rem, 2.1vw, 2rem);
  --fs-h4:      clamp(1.06rem, 1.3vw, 1.2rem);
  --fs-lede:    clamp(1.05rem, 1.35vw, 1.28rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.075rem);
  --fs-small:   0.9375rem;
  --fs-micro:   0.8125rem;

  /* Space */
  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 52px);
  --section-y: clamp(84px, 11vw, 168px);
  --nav-h: 66px;

  /* Z-index scale (systemic only) */
  --z-stack: 1;
  --z-nav: 100;
  --z-skip: 200;
  --z-grain: 300;

  /* Motion */
  /* Values taken from the animate skill, not invented. Its hard rule 2 is
     explicit: no approximated curve because one "looks familiar". */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);   /* entering / exiting UI */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* movement on screen */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* sheet / drawer */
  --ease:        ease;                             /* hover / colour change */

  color-scheme: light;
}

/* Dark scheme maps the same tokens — one theme, two colour schemes. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #0E1A13;
    --paper-2:    #12211A;
    --paper-3:    #172922;
    --card:       #16261D;
    --ink:        #F2EEE2;
    --ink-soft:   #D9D4C5;
    --muted:      #9AA99C;
    --forest:     #7FC98A;
    --forest-deep:#0A1710;
    --gold:       #DDB877;
    --gold-soft:  #6E5A31;
    --line:       rgba(242, 238, 226, 0.16);
    --line-soft:  rgba(242, 238, 226, 0.08);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.34), 0 22px 48px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.4), 0 40px 90px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

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

::selection { background: var(--gold-soft); color: var(--forest-deep); }

/* Paper grain — fixed, pointer-events-none, never on a scrolling container. */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.34'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  .grain { mix-blend-mode: screen; opacity: 0.32; }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-skip);
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: 0 0 var(--r-chip) 0;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}
.rule--gold { background: linear-gradient(90deg, var(--gold) 0%, var(--line) 34%, transparent 100%); }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.032em;
  text-wrap: balance;
  font-variation-settings: "opsz" 96, "wdth" 96;
  padding-bottom: 0.06em; /* descender clearance */
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 350;
  line-height: 1.04;
  letter-spacing: -0.026em;
  text-wrap: balance;
  font-variation-settings: "opsz" 72, "wdth" 96;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
}

h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
  text-wrap: pretty;
}

.body { color: var(--ink-soft); max-width: 66ch; text-wrap: pretty; }
.muted { color: var(--muted); }

/* Index labels — mono, sentence case. Deliberately NOT uppercase eyebrows. */
.index {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.index b {
  color: var(--gold);
  font-weight: 500;
}

/* Eyebrow — budgeted: max 1 per 3 sections page-wide. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   5. NAV
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  /* The hairline belongs to .nav::after so it can fade with the material.
     A border here stacked a second 1px line on top of it. */
  transition: background 0.3s var(--ease-out);
}

.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 32px);
  white-space: nowrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.015em;
  flex: 0 0 auto;
}
/* The Ylemos monogram is taller than it is wide (100 x 118.7), so it is sized
   from height and allowed to take its own width. A square box would squash it. */
.brand svg { height: 23px; width: auto; color: var(--forest); flex: 0 0 auto; }
.brand:hover svg { color: var(--gold); }
.brand svg { transition: color 0.25s var(--ease-out); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  overflow: hidden;
}
.nav__links a {
  position: relative;
  padding-block: 6px;
  transition: color 0.2s var(--ease-out);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   6. BUTTONS & LINKS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.22s var(--ease-out), box-shadow 0.28s var(--ease-out),
              background 0.25s var(--ease-out), color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.985); }

.btn--primary {
  --btn-bg: var(--forest);
  --btn-fg: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { --btn-bg: var(--forest-deep); box-shadow: var(--shadow-md); }

.btn--ghost {
  border-color: var(--line);
  --btn-fg: var(--ink);
}
.btn--ghost:hover { border-color: var(--ink); background: var(--paper-2); }

.btn__icon { width: 15px; height: 15px; flex: 0 0 auto; }

/* Store button — dark pill on paper */
.btn--store {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  padding: 12px 22px;
}
.btn--store:hover { --btn-bg: var(--forest-deep); }

@media (prefers-color-scheme: dark) {
  .btn--primary { --btn-bg: #2E7D36; --btn-fg: #FFFFFF; }
  .btn--primary:hover { --btn-bg: #3B9444; }
  .btn--store { --btn-bg: #F2EEE2; --btn-fg: #12241A; }
  .btn--store:hover { --btn-bg: #FFFFFF; }
}

/* Inline arrow link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out), gap 0.25s var(--ease-out);
}
.link-arrow svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease-out); }
.link-arrow:hover { border-bottom-color: var(--gold); color: var(--gold); gap: 12px; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  padding-top: clamp(48px, 7vw, 92px);
  padding-bottom: clamp(56px, 8vw, 104px);
  position: relative;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}

/* The flagship screens stay fully visible instead of hiding behind a phone fan. */
.hero.hero--hedah { padding-block: 24px; }
.hero--hedah .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.hero--hedah .hero__copy { max-width: 720px; margin-inline: auto; text-align: center; }
.hero--hedah .hero__copy .display { font-size: 48px; letter-spacing: 0; margin-bottom: 8px; }
.hero__promise { font-size: 22px; margin-bottom: 8px; }
.hero--hedah .hero__copy .lede { font-size: 16px; max-width: 60ch; margin: 0 auto 16px; }
.hero--hedah .hero__actions { justify-content: center; }
.hero__family { display: flex; justify-content: center; align-items: flex-end; gap: 20px; min-width: 0; }
.hero__family .shot {
  /* No frame. The screenshots are the content; a card, a border, a radius and a
     shadow around each one was what made the product row read as a sticker
     sheet. Ryndix keeps its card via .shot--card. */
  position: relative;
}
.shot img, .flagship__shot img { width: 100%; height: auto; display: block; }

.hero__stack .shot { position: absolute; }
/* No aspect-ratio here: the three sources were trimmed to different ratios and
   the right-hand one (Hedah) is 2.399, not the 2.163 the old box assumed. The
   image defines its own height, as everywhere else.
   Widths and offsets are chosen so each phone keeps its own headline readable -
   the previous fan covered 40% of the back phone and cut its title mid-word. */
.hero__stack .shot--back  { --rot: -5.4deg; --px: 34px; --py: 30px; width: 38%; left: 0;   top: 11%; transform: rotate(var(--rot)); z-index: 1; }
.hero__stack .shot--front { --px: 62px; --py: 54px; width: 46%; left: 29%; top: 0;   z-index: 3; }
.hero__stack .shot--right { --rot: 4.8deg; --px: 44px; --py: 38px; width: 38%; right: 0; top: 16%; transform: rotate(var(--rot)); z-index: 2; }

.hero__stack .shot--back  { box-shadow: 0 18px 50px rgba(11, 44, 19, 0.13); }
.hero__stack .shot--right { box-shadow: 0 18px 50px rgba(11, 44, 19, 0.13); }

/* --------------------------------------------------------------------------
   8. TICKER
   -------------------------------------------------------------------------- */
.ticker {
  border-block: 1px solid var(--line-soft);
  padding-block: 18px;
  overflow: hidden;
  background: var(--paper-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(26px, 3.4vw, 52px);
  animation: ticker-scroll 46s linear infinite;
}
.ticker span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ticker i {
  color: var(--gold);
  font-style: normal;
  font-size: 0.5rem;
  line-height: 1;
}
@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   9. STUDIO STATEMENT
   -------------------------------------------------------------------------- */
.studio { padding-block: clamp(96px, 13vw, 190px); position: relative; overflow: clip; }

.studio__inner { position: relative; z-index: 2; }

.statement {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.15vw, 2.85rem);
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: -0.024em;
  max-width: 26ch;
  text-wrap: pretty;
  font-variation-settings: "opsz" 60;
}
.statement em {
  font-style: italic;
  font-weight: 300;
  color: var(--forest);
}
.statement strong { font-weight: 600; }

.studio__meta {
  margin-top: clamp(36px, 4.4vw, 60px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 3vw, 36px);
}
.studio__meta div { max-width: 30ch; }
.studio__meta h4 { margin-bottom: 8px; }
.studio__meta p { font-size: var(--fs-small); color: var(--muted); line-height: 1.55; }

/* Oversized ghost word that parallaxes behind the statement */
.studio__ghost {
  position: absolute;
  right: -0.08em;
  top: 42%;
  font-family: var(--font-display);
  font-size: clamp(9rem, 26vw, 25rem);
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--ink);
  opacity: 0.032;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   10. COLLECTION — pinned stack
   One section, six panels. Internal composition varies per panel (icon-led,
   split, offset, colour block) so the sequence never reads as six identical rows.
   -------------------------------------------------------------------------- */
.collection { position: relative; }

.collection__intro {
  padding-block: clamp(20px, 3vw, 40px) clamp(46px, 6vw, 84px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.collection__intro h2 { max-width: 18ch; }
.collection__intro .body { max-width: 44ch; }

.stack { position: relative; }

.panel {
  position: sticky;
  top: calc(var(--nav-h) - 1px);
  min-height: min(92svh, 826px);
  display: grid;
  align-items: center;
  padding-block: clamp(32px, 4vw, 56px);
  background: var(--panel-bg, var(--paper));
  border-top: 1px solid var(--line-soft);
  overflow-x: clip;
}
/* Each panel owns its own ground so it cleanly covers the one beneath. */
.panel--odd  { --panel-bg: var(--paper); }
.panel--even { --panel-bg: var(--paper-2); }
.panel--dark {
  --panel-bg: var(--navy);
  /* Re-resolve the inherited colour: children inherit a COMPUTED colour, so
     overriding --ink alone would leave headings painted in the light-theme ink. */
  color: var(--ink);
  --ink: #EEF3F7;
  --ink-soft: #C3D0DA;
  --muted: #8DA0AF;
  --line: rgba(238, 243, 247, 0.2);
  --line-soft: rgba(238, 243, 247, 0.1);
  --card: #17293A;
  --forest: #7FC98A;
  --gold: #E2B96F;
}

.panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 4.6vw, 72px);
  align-items: center;
  width: 100%;
}
.panel--flip .panel__grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
.panel--flip .panel__copy { order: 2; }
.panel--flip .panel__media { order: 1; }

.panel__copy { max-width: 33rem; }
.panel__copy h3 {
  margin-block: 16px 16px;
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  font-weight: 350;
  line-height: 1.08;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.panel__copy > p { color: var(--ink-soft); max-width: 46ch; text-wrap: pretty; }

.panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.panel__icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
}

.features {
  list-style: none;
  padding: 0;
  margin-top: clamp(22px, 2.6vw, 32px);
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: clamp(20px, 2.4vw, 28px);
}
.features li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted);
}
.features svg { width: 16px; height: 16px; margin-top: 4px; color: var(--gold); flex: 0 0 auto; }
.features b { color: var(--ink); font-weight: 600; }

.panel__actions { margin-top: clamp(24px, 3vw, 34px); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* --- Panel media compositions ---
   Sized from HEIGHT, not width. A pinned panel has a known vertical budget, so
   screenshots are driven by that budget and derive their width from the source
   aspect ratio. Nothing can overflow the pin. */
.panel__media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 30px);
}
.panel__media .shot { width: auto; }



/* Hedah's App Store frames are cropped to the device screen, which is a hair
   taller than the raw 1320x2868 capture. */

/* Ryndix decision cards cropped from the App Store frames — a wider ratio. */




/* Duo — one lead screen with a supporting screen stepped down.
   Width-driven so the pair can never overflow its column. */
.media-duo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(12px, 1.8vw, 26px);
  width: 100%;
}
.media-duo .shot { width: 42%; }
.media-duo .shot:first-child { width: 32%; }

/* Duo, mirrored — lead screen on the right. */
.media-duo--mirror { flex-direction: row-reverse; }

/* Single — one screen carrying the whole panel. */
.media-single {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.media-single .shot { width: 46%; }

/* Filmstrip — a stepped trio. Used exactly once, on the closing panel, so the
   sequence never settles into a repeating rhythm. */
.media-spread {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 22px);
  width: 100%;
}
.media-spread .shot { width: 34%; }
.media-spread .shot:nth-child(2) { width: 27%; }
.media-spread .shot:nth-child(3) { width: 31%; }

/* Media footnote. Sits below the screens rather than floating over them, so a
   caption can never cover the interface it is describing. */
.media-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--muted);
  max-width: 30rem;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  width: 100%;
}
.media-note svg { width: 14px; height: 14px; color: var(--gold); margin-top: 3px; flex: 0 0 auto; }
.media-note b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   11. PRINCIPLES
   -------------------------------------------------------------------------- */
.principles { padding-block: var(--section-y); border-top: 1px solid var(--line); }

.principles__head { max-width: 40ch; margin-bottom: clamp(44px, 5.6vw, 76px); }
.principles__head h2 { margin-top: 14px; }

.principles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.principle {
  padding: clamp(26px, 3.2vw, 42px) clamp(20px, 2.6vw, 38px) clamp(30px, 3.6vw, 48px) 0;
  border-right: 1px solid var(--line);
}
.principle:last-child { border-right: 0; padding-right: 0; }
.principle:not(:first-child) { padding-left: clamp(20px, 2.6vw, 38px); }
.principle svg { width: 22px; height: 22px; color: var(--forest); margin-bottom: 20px; }
.principle h3 { font-size: 1.2rem; margin-bottom: 10px; font-weight: 500; letter-spacing: -0.015em; }
.principle p { font-size: var(--fs-small); color: var(--muted); line-height: 1.58; max-width: 34ch; }

/* --------------------------------------------------------------------------
   12. CONTACT BAND
   -------------------------------------------------------------------------- */
.contact {
  background: var(--forest-deep);
  color: #F0EEE3;
  padding-block: clamp(72px, 9vw, 130px);
  position: relative;
  overflow: clip;
}
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}
.contact h2 {
  color: #FBF8EE;
  max-width: 22ch;
}
.contact p { color: #B9C6B6; margin-top: 16px; max-width: 46ch; }
.contact .btn--primary { --btn-bg: var(--gold); --btn-fg: #17240F; }
.contact .btn--primary:hover { --btn-bg: #D8AC63; }
.contact__mail {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: #B9C6B6;
  margin-top: 18px;
}
.contact__mail a { border-bottom: 1px solid rgba(185, 198, 182, 0.4); }
.contact__mail a:hover { color: #FBF8EE; border-bottom-color: var(--gold); }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 72px) 34px;
  font-size: var(--fs-small);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(34px, 4vw, 52px);
}
.footer__brand p { color: var(--muted); max-width: 34ch; margin-top: 14px; font-size: var(--fs-micro); line-height: 1.6; }
.footer h4 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.footer ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.footer ul a { color: var(--ink-soft); }
.footer ul a:hover { color: var(--forest); }
.footer__legal {
  border-top: 1px solid var(--line-soft);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  color: var(--muted);
  font-size: var(--fs-micro);
}

/* --------------------------------------------------------------------------
   14. DOCUMENT PAGES (privacy · terms · support)
   -------------------------------------------------------------------------- */
.doc-hero { padding-top: clamp(44px, 6vw, 84px); padding-bottom: clamp(30px, 4vw, 52px); }
.doc-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.6vw, 3.9rem);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin-top: 16px;
  text-wrap: balance;
}
.doc-hero .lede { margin-top: 20px; max-width: 58ch; }
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 26px;
}
.doc-meta span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 13px;
}

.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  padding-bottom: clamp(70px, 9vw, 130px);
  align-items: start;
}

.toc { position: sticky; top: calc(var(--nav-h) + 28px); }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; counter-reset: toc; }
.toc a {
  display: block;
  padding: 7px 0;
  font-size: var(--fs-micro);
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 14px;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.toc a:hover { color: var(--ink); border-left-color: var(--gold); }

.content { min-width: 0; }
.content > section { padding-block: 0 clamp(34px, 4vw, 52px); scroll-margin-top: calc(var(--nav-h) + 24px); }
.content > section + section { border-top: 1px solid var(--line-soft); padding-top: clamp(34px, 4vw, 52px); }
.content h2 {
  font-size: clamp(1.3rem, 1.9vw, 1.72rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin-bottom: 14px;
}
.content h3 { font-size: 1.06rem; font-weight: 600; margin-block: 22px 8px; letter-spacing: -0.01em; }
.content p { color: var(--ink-soft); max-width: 68ch; margin-bottom: 14px; text-wrap: pretty; }
.content p:last-child { margin-bottom: 0; }
.content ul, .content ol { color: var(--ink-soft); max-width: 68ch; padding-left: 1.15em; margin-bottom: 14px; }
.content li { margin-bottom: 7px; }
.content li::marker { color: var(--gold); }
.content a { color: var(--forest); border-bottom: 1px solid var(--line); }
.content a:hover { border-bottom-color: var(--forest); }
.content strong { font-weight: 600; color: var(--ink); }

.notice {
  border-left: 2px solid var(--gold);
  background: var(--paper-2);
  border-radius: 0 var(--r-chip) var(--r-chip) 0;
  padding: 16px 20px;
  margin-block: 18px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 68ch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 18px;
  font-size: var(--fs-small);
  display: block;
  overflow-x: auto;
  white-space: normal;
}
.data-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 16px 12px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}
.data-table td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--ink-soft);
  line-height: 1.52;
}
.data-table td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.data-table tr:last-child td { border-bottom: 0; }

/* Support page card grid */
.support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin-block: clamp(26px, 3vw, 38px);
}
.support-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.support-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.support-card h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.012em; }
/* Card kickers are micro-labels, not section eyebrows — no uppercase tracking,
   so the page keeps its one-eyebrow budget. */
.support-card .eyebrow { text-transform: none; letter-spacing: 0.005em; font-size: 0.75rem; margin-bottom: 8px; }
.support-card p { font-size: var(--fs-small); color: var(--muted); margin-bottom: 12px; max-width: none; }
.support-card .link-arrow { font-size: var(--fs-micro); }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 34px 20px 0;
  font-weight: 500;
  font-size: 1.02rem;
  position: relative;
  letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding-bottom: 20px; color: var(--muted); font-size: var(--fs-small); max-width: 68ch; }

/* --------------------------------------------------------------------------
   15. PRODUCT PAGES
   -------------------------------------------------------------------------- */
.product-hero {
  padding-top: clamp(44px, 6vw, 88px);
  padding-bottom: clamp(48px, 6vw, 84px);
}
.product-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.product-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.3rem);
  font-weight: 300;
  line-height: 1.01;
  letter-spacing: -0.032em;
  margin-block: 18px 22px;
  text-wrap: balance;
  padding-bottom: 0.05em;
}
.product-hero .lede { max-width: 44ch; margin-bottom: 28px; }
.product-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.product-hero__media { display: flex; justify-content: center; gap: clamp(12px, 1.6vw, 20px); align-items: flex-end; }
.product-hero__media .shot { width: min(46%, 260px); aspect-ratio: 1320/2868; }
.product-hero__media .shot:nth-child(2) { margin-bottom: clamp(20px, 3vw, 40px); }

/* Three-beat section index (Kindling) — uses the product's own labels. */
.steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
.steps li { display: flex; align-items: center; font-family: var(--font-mono); font-size: 0.75rem; }
.steps li + li::before { content: "\2192"; color: var(--gold); margin: 0 13px; }
.steps a { color: var(--muted); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .2s var(--ease-out), border-color .2s var(--ease-out); }
.steps a:hover { color: var(--ink); border-bottom-color: var(--gold); }

.pill-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.pill {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  white-space: nowrap;
}

.feature-band { padding-block: var(--section-y); border-top: 1px solid var(--line); }
.feature-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4.6vw, 80px);
  align-items: center;
}
.feature-band--flip .feature-band__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.feature-band--flip .feature-band__copy { order: 2; }
.feature-band--flip .feature-band__media { order: 1; }
.feature-band__copy h2 { margin-bottom: 16px; max-width: 20ch; }
.feature-band__copy p { color: var(--ink-soft); max-width: 48ch; }
.feature-band__media { display: flex; justify-content: center; }
.feature-band__media .shot { width: min(64%, 320px); aspect-ratio: 1320/2868; }

.callout {
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 38px);
  max-width: 760px;
}
.callout h2 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); margin-bottom: 14px; }
.callout p { color: var(--ink-soft); }
.callout p + p { margin-top: 12px; }

/* --------------------------------------------------------------------------
   16. MOTION — scroll-driven, GPU-only, no scroll listeners
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 1; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js [data-reveal] {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 34%;
    }
    @keyframes reveal-in {
      from { opacity: 0; transform: translate3d(0, 22px, 0); }
      to   { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    /* Parallax A — free-flowing elements (hero, studio, principles).
       Drift is proportionate to the element's own travel through the viewport. */
    html.js [data-parallax] {
      animation: parallax-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes parallax-drift {
      from { transform: translate3d(0, calc(var(--py, 40px) * -1), 0) rotate(var(--rot, 0deg)); }
      to   { transform: translate3d(0, var(--py, 40px), 0) rotate(var(--rot, 0deg)); }
    }

    /* Parallax B — elements inside a pinned panel. A sticky box keeps a constant
       view() progress while it is pinned, so drift is scoped to the ENTRY phase:
       the media and the copy separate as the panel rises into place, then settle.
       That separation is the depth cue; holding it after the pin would be static. */
    html.js [data-panel-parallax] {
      animation: panel-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 92%;
    }
    @keyframes panel-drift {
      from { transform: translate3d(0, calc(var(--py, 56px) * -1), 0) scale(var(--pz, 1)); }
      to   { transform: translate3d(0, 0, 0) scale(1); }
    }

    /* An oversized ghost word drifts against the page as the studio section passes. */
    html.js [data-hero-drift] {
      animation: hero-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes hero-drift {
      from { transform: translate3d(0, -6%, 0); }
      to   { transform: translate3d(0, 8%, 0); }
    }
    html.js .studio__ghost[data-hero-drift] {
      animation-name: ghost-drift;
    }
    @keyframes ghost-drift {
      from { transform: translate3d(0, 14%, 0) rotate(var(--rot, -2.5deg)); }
      to   { transform: translate3d(0, -14%, 0) rotate(var(--rot, -2.5deg)); }
    }
  }
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: clamp(36px, 6vw, 56px); }
  .hero__copy { max-width: 34rem; }
  .hero__stack { aspect-ratio: 1 / 0.72; min-height: 300px; max-width: 620px; }

  .collection__intro { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .panel { position: relative; top: auto; min-height: 0; padding-block: clamp(46px, 8vw, 72px); }
  .panel__grid,
  .panel--flip .panel__grid { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
  .panel--flip .panel__copy { order: 0; }
  .panel--flip .panel__media { order: 0; }
  .panel__copy { max-width: 36rem; }
  /* Unpinned below this breakpoint, so media goes back to width-driven sizing. */
  .panel__media { align-items: flex-start; }
  .media-duo, .media-single, .media-spread { justify-content: flex-start; }
  .media-duo .shot { width: 44%; }
  .media-duo .shot:first-child { width: 34%; }
  .media-single .shot { width: min(52%, 280px); }
  .media-spread .shot { width: 32%; }
  .media-spread .shot:nth-child(2) { width: 26%; }
  .media-spread .shot:nth-child(3) { width: 29%; }
  .media-note { max-width: none; }

  .principles__grid { grid-template-columns: 1fr; }
  .principle { border-right: 0; border-bottom: 1px solid var(--line); padding: clamp(24px, 4vw, 34px) 0; }
  .principle:last-child { border-bottom: 0; }
  .principle:not(:first-child) { padding-left: 0; }

  .doc-layout { grid-template-columns: 1fr; gap: 28px; }
  .toc { position: static; }
  .toc ol { display: flex; flex-wrap: wrap; gap: 8px; }
  .toc a { border-left: 0; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 13px; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --nav-h: 60px; }

  .display { font-size: clamp(2.35rem, 10.5vw, 3.1rem); }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__stack { aspect-ratio: 1 / 0.86; }
  .hero__stack .shot--back  { width: 44%; top: 14%; }
  .hero__stack .shot--front { width: 52%; left: 22%; }
  .hero__stack .shot--right { width: 44%; }

  .studio__meta { grid-template-columns: 1fr; gap: 22px; }
  .studio__ghost { display: none; }

  .contact__inner { grid-template-columns: 1fr; align-items: start; }
  .contact__actions { display: flex; }

  .support-grid { grid-template-columns: 1fr; }
  .product-hero__grid { grid-template-columns: 1fr; }
  .product-hero__media { justify-content: flex-start; }
  .product-hero__media .shot { width: min(48%, 200px); }
  .feature-band__grid,
  .feature-band--flip .feature-band__grid { grid-template-columns: 1fr; }
  .feature-band--flip .feature-band__copy { order: 0; }
  .feature-band--flip .feature-band__media { order: 0; }

  .data-table { display: block; }
  .data-table thead { display: none; }
  .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { border-bottom: 1px solid var(--line-soft); padding-block: 14px; }
  .data-table td { border: 0; padding: 4px 0; }
  .data-table td:first-child { white-space: normal; }

  .footer__grid { grid-template-columns: 1fr; }
  .media-chip--tl, .media-chip--br { display: none; }
}

/* --------------------------------------------------------------------------
   18. GSAP MOTION LAYER SCAFFOLDING
   Active only while motion.js is in charge (html.motion-gsap), so the page
   renders and behaves identically if the vendor scripts never load.
   -------------------------------------------------------------------------- */

/* Word-level masks for the split headline reveal. The mask needs descender
   room (y g p q) or it shears the letters; the negative margin keeps the
   baseline exactly where the layout expects it. */
html.motion-gsap .mw {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  vertical-align: baseline;
}
html.motion-gsap .mw__in { display: inline-block; }

/* The CSS scroll-driven layer must not fight GSAP.
   Only the ANIMATION is disabled. An earlier version of this rule also forced
   `transform: none !important` and `opacity: 1 !important`, which nuked every
   inline transform GSAP writes — the hero shots carry data-parallax, so the
   hero scrub silently did nothing while the panel stack (whose data-parallax
   sits on children) worked fine. Never use !important on a property the
   animation layer also owns. */
html.motion-gsap [data-reveal],
html.motion-gsap [data-parallax],
html.motion-gsap [data-panel-parallax],
html.motion-gsap [data-hero-drift] {
  animation: none !important;
}
html.motion-gsap .ticker__track { animation: none !important; }

/* will-change on exactly the three things that animate, and nothing else.
   gsap-performance: do not set it on every element "just in case". */
html.motion-gsap .hero__stack .shot,
html.motion-gsap .product-hero__media .shot,
html.motion-gsap .feature-band__media .shot,
html.motion-gsap .panel__grid,
html.motion-gsap .mw__in { will-change: transform, opacity; }
html.motion-gsap .ticker__track { will-change: transform; }


/* --------------------------------------------------------------------------
   20. LIQUID GLASS CHROME
   Apple: translucent materials are a floating functional layer that brings
   structure without stealing focus. Two rules drive everything here:

     1. Glass is only visible when something is behind it. On flat cream it is
        indistinguishable from a slightly dirty tint, so the material is only
        applied where content actually travels underneath.
     2. Materialize, don't fade — animate the blur radius, not just opacity.

   @property registration is REQUIRED: backdrop-filter: blur(var(--x)) will not
   interpolate unless --x has a registered syntax. Swapping the whole
   backdrop-filter value between two states just cuts.
   -------------------------------------------------------------------------- */
@property --nav-blur { syntax: "<length>"; inherits: false; initial-value: 0px; }
/* inherits:true, NOT false. The hairline is drawn by .nav::after, and a
   pseudo-element does not inherit a non-inheriting registered property — it
   falls back to initial-value, so the line stayed invisible at every scroll
   position while the blur (used on .nav itself) worked fine. */
@property --nav-tint { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --nav-paper: 250, 246, 236;
}
@media (prefers-color-scheme: dark) {
  :root { --nav-paper: 14, 26, 19; }
}

.nav {
  position: sticky;
  background: rgba(var(--nav-paper), var(--nav-tint));
  -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(180%);
  backdrop-filter: blur(var(--nav-blur)) saturate(180%);
  border-bottom-color: transparent;
  transition:
    --nav-blur 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    --nav-tint 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s var(--ease-out);
}

/* The hairline is a separate layer so it can fade with the material instead of
   being switched on by a class. */
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
  opacity: var(--nav-tint);
  pointer-events: none;
}

/* Fallback path when the GSAP layer is absent: the sentinel in site.js flips
   one class and the registered properties ramp themselves. */
html:not(.motion-gsap) .nav.is-stuck { --nav-blur: 22px; --nav-tint: 0.72; }

/* With GSAP driving the ramp frame by frame, a CSS transition on the same
   properties would smooth an already-smooth signal and add lag. */
html.motion-gsap .nav { transition: background 0.3s var(--ease-out); }

@media (prefers-reduced-transparency: reduce) {
  .nav {
    --nav-blur: 0px !important;
    --nav-tint: 0 !important;
    background: rgb(var(--nav-paper)) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .nav::after { opacity: 1; }
}

/* --------------------------------------------------------------------------
   21. COLLECTION RAIL
   The first attempt was a floating glass pill. It was wrong, and it broke the
   rule it depends on: glass is only legible when something worth blurring sits
   behind it. The left gutter is flat cream for most panels, so an 18px blur had
   nothing to bite on and rendered as a grey lozenge. When a label expanded, the
   999px radius turned the growing box into a smeared oval. Apple's guidance is
   also explicit that a SMALL surface takes a WEAKER material — 18px was sized
   for a panel, not a 40px chip.

   Replaced with what the rest of this site is actually built from: a hairline
   and a mono label. No material to mis-render, and it reads as part of the
   editorial system rather than a widget dropped on top of it.
   -------------------------------------------------------------------------- */
.rail {
  position: fixed;
  left: max(16px, calc((100vw - var(--shell)) / 2 - 62px));
  top: 50%;
  z-index: 90;
  display: none;
  flex-direction: column;
  padding: 10px 0;
  opacity: 0;
  transform: translateY(-50%) translateX(-6px);
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
@media (min-width: 1280px) { .rail { display: flex; } }
.rail.is-visible { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; }

.rail__item {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 9px;
  height: 30px;
  color: var(--muted);
  text-align: left;
  transition: color 0.25s var(--ease-out);
}

/* The tick: a hairline that lengthens and turns gold for the active panel. */
.rail__dot {
  height: 1px;
  width: 14px;
  background: var(--line);
  justify-self: end;
  transition: width 0.4s var(--ease-out), background 0.35s var(--ease-out);
}
.rail__item:hover .rail__dot { width: 22px; background: var(--ink-soft); }
.rail__item.is-active .rail__dot { width: 30px; background: var(--gold); }

.rail__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.35s var(--ease-out), transform 0.4s var(--ease-out);
}
.rail__item.is-active .rail__label { opacity: 1; transform: none; color: var(--ink); }
.rail:hover .rail__label { opacity: 0.75; transform: none; }
.rail:hover .rail__item.is-active .rail__label { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rail, .rail__dot, .rail__label { transition-duration: 0.001ms; }
}

/* --------------------------------------------------------------------------
   22. GLASS ON INTERACTIVE SURFACES
   Only the ghost button and the pills sit over content. The primary button
   stays solid: a translucent call to action loses its job.
   -------------------------------------------------------------------------- */
.btn--ghost {
  background: rgba(var(--nav-paper), 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 8px rgba(12, 26, 18, 0.06);
}
.btn--ghost:hover {
  background: rgba(var(--nav-paper), 0.62);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 6px 18px rgba(12, 26, 18, 0.10);
}

@media (prefers-reduced-transparency: reduce) {
  .btn--ghost, .rail {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgb(var(--nav-paper));
  }
}

/* --------------------------------------------------------------------------
   24. FLAGSHIP — Hedah
   The product we lead with, and the only one whose story is two devices rather
   than one. The iPad is the family screen on the wall; the iPhone is what each
   person carries. Showing them together is the whole argument, so this section
   is a stage rather than another list row.
   -------------------------------------------------------------------------- */
.flagship {
  padding-block: clamp(72px, 9vw, 132px);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  overflow-x: clip;
}
.flagship__head { max-width: 46ch; margin-bottom: clamp(38px, 5vw, 62px); }
.flagship__head h2 { margin-bottom: 18px; }
.flagship__head .lede { max-width: 52ch; }

.flagship__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

/* The stage: iPad large, iPhone overlapping its lower-left corner. */
.flagship__stage {
  position: relative;
  /* The tablet is inset so the phone can sit beside it rather than on top of it.
     At 26% width the phone comes out the same height as the 84%-wide tablet, so
     the two read as one pair instead of one device burying the other. */
  /* No overlap. A 4% overlap was enough to cover the tablet's "Calendar" heading,
     and a half-hidden word reads as a rendering fault rather than as depth. The
     two devices sit side by side with a small gutter instead. */
  padding-left: 27%;
  padding-bottom: 6%;
}
.flagship__ipad {
  /* position:relative is load-bearing. .flagship__shot is absolutely positioned
     with inset:0; without this it resolved against .flagship__stage instead, so
     BOTH screenshots were laid out at full stage size with object-fit:cover and
     each device frame showed only a centre crop. The tablet's month-calendar
     column was being cut off entirely. */
  position: relative;
  width: 68%;
  aspect-ratio: 1500 / 1124;
}
.flagship__phone {
  /* absolute for placement in the stage, relative-equivalent for its own child */
  /* Static, not absolute: each image is a finished marketing composition with its
     own caption band, so overlapping one with the other hides a caption. */
  position: static;
  width: 30%;
  aspect-ratio: 760 / 1651;
  align-self: flex-end;
}
.flagship__shot { position: absolute; inset: 0; }
.flagship__shot img { width: 100%; height: 100%; object-fit: contain; display: block; }

.flagship__copy .features { margin-top: 0; border-top: 0; padding-top: 0; }
.flagship__copy .features li { font-size: var(--fs-small); }
.flagship__actions { margin-top: clamp(24px, 3vw, 34px); }

@media (max-width: 1024px) {
  .flagship__grid { grid-template-columns: 1fr; gap: clamp(30px, 5vw, 46px); }
  .flagship__stage { padding-left: 12%; padding-bottom: 15%; }
  .flagship__phone { width: 27%; }
}
@media (max-width: 760px) {
  .flagship__stage { padding-left: 0; padding-bottom: 0; }
  .flagship__phone { display: none; }
}

/* --------------------------------------------------------------------------
   25. SCREENSHOT INSPECTOR
   The real problem this solves: at panel scale a 706px-wide phone screenshot is
   rendered about 150px wide, so the UI inside it is unreadable. Apple's product
   pages do not solve that with motion — they solve it by letting you look at the
   product properly.

   So: a subtle hover lift (restrained, no bounce), and a click that opens the
   screenshot at full readable size on the glass material — blur resolving to
   sharp, the same "materialize" rule the nav uses. That is the one strong
   interaction on the page; everything else stays quiet.
   -------------------------------------------------------------------------- */
/* Hover float. The screenshot lifts and grows a little and its shadow deepens,
   so the card reads as sitting above the page rather than printed on it.
   Scale only — NO 3D rotation. A rotate would tilt the image under the lens
   while the magnifier maps the pointer through an axis-aligned rect, and the
   magnified region would drift off the cursor. */
.shot,
.flagship__ipad,
.flagship__phone {
  cursor: pointer;
  /* 160ms with the sanctioned hover easing. Hover is a "tens of times a day"
     interaction, which the skill caps at near-imperceptible - the previous
     550ms / 7px / 3.5% was neither fast nor subtle. */
  transition: transform 0.16s var(--ease), box-shadow 0.24s var(--ease);
}
/* Gated to real pointers. Ungated, the lift fired on tap on iPhone and competed
   with the lightbox the same tap opens. */
@media (hover: hover) and (pointer: fine) {
.shot:hover,
.flagship__ipad:hover,
.flagship__phone:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow:
    0 6px 14px rgba(11, 44, 19, 0.08),
    0 34px 74px rgba(11, 44, 19, 0.24);
  z-index: 3;
}
}


.shot:focus-visible, .flagship__ipad:focus-visible, .flagship__phone:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 4px;
}

@property --lb-blur { syntax: "<length>"; inherits: false; initial-value: 0px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}
.lightbox.is-open { display: flex; }

.lightbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 14, 0.62);
  -webkit-backdrop-filter: blur(var(--lb-blur)) saturate(140%);
  backdrop-filter: blur(var(--lb-blur)) saturate(140%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out), --lb-blur 0.5s var(--ease-out);
}
.lightbox.is-in .lightbox__scrim { opacity: 1; --lb-blur: 16px; }

.lightbox__frame {
  position: relative;
  /* Sized to the screenshot's own width, not to the viewport height. A phone
     capture is 720x1564; constraining its HEIGHT to 88vh squeezed it to 366px
     and still left the UI unreadable. At 1:1 it is legible, and the frame
     scrolls internally for the rest of the screen. */
  max-width: min(94vw, 780px);
  max-height: 86vh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border-radius: 22px;
  background: var(--card);
  border: 0.5px solid rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 40px 100px rgba(0, 0, 0, 0.5);
  opacity: 0;
  filter: blur(18px);
  transform: scale(0.94);
  transition: opacity 0.45s var(--ease-out), filter 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.lightbox.is-in .lightbox__frame { opacity: 1; filter: blur(0); transform: none; }
.lightbox__frame.is-wide { max-width: min(94vw, 1180px); overflow-y: hidden; }
.lightbox__frame img { display: block; width: 100%; height: auto; }

/* Fixed to the viewport so it stays reachable while the screenshot scrolls. */
.lightbox__close {
  position: fixed;
  top: 22px; right: 22px;
  z-index: 2;
  width: 34px; height: 34px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.lightbox__close:hover { background: #fff; transform: scale(1.06); }

.lightbox__cap {
  position: sticky;
  left: 0; right: 0; bottom: 0;
  padding: 34px 18px 14px;
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: #F2EEE2;
  background: linear-gradient(to top, rgba(8, 16, 11, 0.88), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .shot { transform: none; }
  .lightbox__scrim, .lightbox__frame { transition-duration: 0.001ms; filter: none; }
  .lightbox__frame { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   23. REDUCED MOTION & FALLBACKS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ticker__track { animation: none; transform: none; }
  [data-reveal], [data-parallax], [data-hero-drift] { opacity: 1 !important; transform: none !important; }
  .studio__ghost { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .grain { display: none; }
}

@media print {
  .nav, .grain, .ticker, .contact, .hero__stack, .panel__media { display: none !important; }
  body { background: #fff; color: #000; }
  .panel { position: static; min-height: 0; page-break-inside: avoid; }
}