/* ── SHARED BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
:root {
  --ivory:#F4F3EF; --charcoal:#181714; --forest:#1C3328; --brick:#9B4A34;
  --ink:#4A4840; --ink-light:#5C5A54;
  --rule:rgba(24,23,20,0.09);
  --serif:'Cormorant Garamond',Georgia,serif;
  --display:'Fraunces',Georgia,serif;
  --mono:'DM Sans',Arial,sans-serif;
  --sans:'DM Sans',Arial,sans-serif;
  --pad:clamp(24px,5.5vw,80px);
  /* Fixed nav bar height — the mobile menu hangs from it and is capped to what's left of the viewport. */
  --nav-height:84px;
  /* Shared desktop content axis — the left-edge inset of every page's opening
     content (Index Hero, Curator, System preface, Palette intro), measured
     from the viewport edge rather than accumulated from a centred
     container's margin + gutter + padding. 64–160px, capped at 160px so
     content never drifts toward the centre on very wide viewports. Only
     meaningful at ≥901px (mobile sections use --pad). Widened at ≥1440px;
     see the Hero's ≥1440px block. */
  --content-axis: clamp(64px, 8vw, 160px);
}
/* Mobile side margin — the shared horizontal axis (nav, hero, curator
   panels, newsletter, footer). Desktop (>900px) uses the clamp() above. */
@media (max-width: 900px) {
  :root { --pad: 24px; }
}
@media (max-width: 480px) {
  :root { --pad: 20px; }
}
body { background:var(--ivory); color:var(--charcoal); font-family:var(--mono); font-weight:300; font-size:13px; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
html.scroll-locked, body.scroll-locked { overflow:hidden; }
@keyframes fu { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes fi { from { opacity:0; } to { opacity:1; } }

/* ── SHARED SECTION EYEBROW — single source of truth for every top-of-section
   label (Nutritional System, The Palette, Curator Invitation, About Coti,
   etc). Only the color may vary, via the --inverse modifier for dark
   (forest) backgrounds. ── */
.section-eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(28, 51, 40, 0.88);
}
.section-eyebrow--inverse {
  color: rgba(244, 243, 239, 0.92);
}

/* ── NAV ── */
nav#nav { position:fixed; top:0; left:0; right:0; z-index:500; height:var(--nav-height); display:flex; align-items:center; padding:0 var(--pad); transition:background .4s,border-color .4s,top .35s cubic-bezier(.4,0,.2,1); border-bottom:1px solid transparent; }
nav#nav.on { background:rgba(244,243,239,0.92); backdrop-filter:blur(12px); border-color:transparent; box-shadow:0 1px 8px rgba(0,0,0,0.04); }
nav#nav.hidden { top:calc(-1 * var(--nav-height)); }
.n-logo { text-decoration:none; display:flex; align-items:center; line-height:1; flex-shrink:0; }
.n-logo svg { height:28px; width:70px; display:block; overflow:visible; flex-shrink:0; }
.n-nav-group { margin-left:auto; display:flex; align-items:center; gap:80px; }
.n-center { display:flex; align-items:center; }
.n-links { display:flex; gap:52px; list-style:none; align-items:center; white-space:nowrap; }
.n-links li { position:relative; }
.n-links a { font-family:var(--mono); font-size:16px; letter-spacing:.13em; line-height:1.2; text-transform:uppercase; color:var(--forest); font-weight:600; text-decoration:none; transition:color .22s; white-space:nowrap; }
.n-links a:hover { color:var(--forest); }
.n-links li[data-module] > a { color:var(--forest); }

/* ── COTI ORBIT CART ── */
.coti-cart-btn { background:none; border:none; cursor:pointer; padding:0; margin:0; display:inline-flex; align-items:center; justify-content:center; gap:12px; line-height:1; color:var(--forest); }
.coti-cart-btn svg { overflow:visible; transition:transform .35s cubic-bezier(.34,1.56,.64,1); flex-shrink:0; }
.n-cart-icon-wrap { position:relative; display:inline-flex; align-items:center; }
.n-cart-count { display:none; position:absolute; top:-7px; right:-8px; background:#1C3328; color:#fff; font-family:var(--mono); font-size:9px; font-weight:400; line-height:1; min-width:16px; height:16px; border-radius:8px; padding:0 4px; align-items:center; justify-content:center; letter-spacing:0; }
.coti-cart-btn:hover svg { transform:scale(1.08); }
.n-palette-label { font-family:var(--mono); font-size:16px; letter-spacing:.13em; text-transform:uppercase; color:var(--forest); font-weight:600; line-height:1; transition:color .22s; }
.coti-cart-btn:hover .n-palette-label { color:var(--forest); }

/* ══════════════════════════════════════════════════════════════════════
   HERO
   Layout contract
   • Desktop (≥901px): .hero-inner is a two-column grid whose rows are
       1 eyebrow · 2 headline · 3 copy · 4 "Discover the System".
     .hero-left, .hero-right and .hero-tablet-group are SUBGRIDS of those
     rows, so both columns share one set of row tracks and the cross-column
     relationships are structural — no JavaScript measurement, no offsets:
       – the tablet is a zero-height item centred in row 2 and carries the
         headline's own vertical margins, so its centre is the centre of the
         three equal headline lines: the middle line, "we organize";
       – the caption is a zero-height item bottom-aligned in row 4, whose
         bottom edge is the bottom of "Discover the System"; the caption's
         last child, "View RED-01", is the same link component, so the two
         line up.
     Zero-height items contribute nothing to a row, so neither can change the
     left column's spacing, and the (absolutely positioned) ingredient list
     cannot move the tablet or the headline. Without subgrid support the
     right column falls back to a plain stack: tablet, then caption.
   • Mobile (≤900px): one flex column. Tablet, ingredient list and caption
     stack in normal flow, so opening the list moves the caption down; the
     tablet itself never moves.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Section + grid container ── */
#hero { padding-top:98px; position:relative; display:flex; flex-direction:column; justify-content:center; }
.hero-inner { width:100%; max-width:1360px; margin:0 auto; }

/* ── Left column ── */
.hero-left { width:100%; max-width:620px; min-width:0; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2; }
.hero-eyebrow { margin-top:-20px; margin-bottom:48px; font-size:19px; font-weight:500; color:rgba(28, 51, 40, 0.86); opacity:0; animation:fu .9s ease .1s forwards; }
.hero-h1 { max-width:600px; font-family:var(--display); font-size:clamp(62.4px,5.28vw,81.6px); font-weight:350; line-height:0.95; letter-spacing:-0.034em; color:var(--forest); margin-bottom:22px; opacity:0; animation:fu 1s ease .3s forwards; }
.hero-h1 > span { display:block; white-space:nowrap; }
.hero-copy { width:100%; max-width:600px; font-family:var(--sans); font-size:clamp(20px,1.5vw,23px); font-weight:400; line-height:1.62; letter-spacing:0; color:rgba(28,51,40,0.82); margin:0; opacity:0; animation:fu 1s ease .55s forwards; }
.hero-copy > span { display:block; }

/* ── Link CTA — "Discover the System", "View RED-01" and the Palette link.
   Quiet DM Sans link with an underline rule; inside #hero it takes the
   forest colour and a slightly larger size. ── */
.hero-product-cta {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  margin-top:40px;
  padding-bottom:5px;
  font-family:var(--mono);
  font-size:13.5px;
  font-weight:700;
  line-height:1;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--forest);
  text-decoration:none;
}
#hero .hero-product-cta { color:var(--forest); }
.hero-product-cta::after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:currentColor;
  opacity:0.55;
  transform:scaleX(1);
  transform-origin:left center;
  transition:transform 300ms cubic-bezier(.22,1,.36,1), opacity 300ms ease;
}
.hero-product-cta:focus-visible { outline:1.5px solid var(--forest); outline-offset:4px; }
.hero-product-cta span:last-child { transition:transform 300ms cubic-bezier(.22,1,.36,1); }
@media (hover:hover) and (pointer:fine) {
  .hero-product-cta:hover span:last-child { transform:translateX(4px); }
  .hero-product-cta:hover::after { opacity:0.85; }
}
/* Must follow .hero-product-cta (same specificity) to override its margin-top. */
.hero-system-cta { margin-top:36px; opacity:0; animation:fu 1s ease .75s forwards; }

/* ── Right column: tablet + ingredient list + caption ── */
.hero-right { display:flex; align-items:center; justify-content:flex-start; min-width:0; min-height:1px; }
.hero-tablet-group {
  display:flex; flex-direction:column; align-items:center; gap:20px; min-width:0;
  opacity:0; animation:heroTabletIn .9s ease .25s forwards; position:relative; isolation:isolate;
}
/* Entrance gate (class set by the inline script in <head>): hold the tablet
   until its image is decoded, then play the entrance. Back/Forward loads skip
   the entrance entirely. Without the script the default animation above runs. */
html.tablet-gate .hero-tablet-group { animation:none; opacity:0; }
html.tablet-gate.tablet-ready .hero-tablet-group { animation:heroTabletIn .9s ease .1s forwards; }
html.tablet-instant .hero-tablet-group { animation:none; opacity:1; transform:none; }
@keyframes heroTabletIn {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
.hero-tablet-visual { position:relative; }
.hero-tablet-stage { position:relative; display:block; }
.hero-tablet-spinner {
  display:block;
  border:none;
  background:none;
  padding:0;
  margin:0;
  border-radius:50%;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hero-tablet-spinner:focus-visible { outline:2px solid var(--forest); outline-offset:6px; }
.hero-tablet-spinner[aria-disabled="true"] { cursor:default; }
/* --red01-tablet-d is the tablet's diameter, set per breakpoint on
   .hero-tablet-group; the shadow blurs below scale with it. */
.hero-tablet-media {
  position:relative;
  display:block;
  width:var(--red01-tablet-d);
  max-width:100%;
  aspect-ratio:1 / 1;
  isolation:isolate;
  overflow:visible;
}
/* Resting shadow — two layers in a warm gray-brown so the tablet reads as
   sitting on a surface. Both are anchored to the sphere's real bottom edge,
   not the image box: the PNG has transparent padding, and its visible sphere
   spans x 44–1009 / y 48–1015 of 1056px, which (through the
   .hero-tablet-img offset and 98.24% scale below) puts the lowest point at
   92.6% of the box height, centred at 50% (sphere width ≈ 89.8% of the box).
   Everything is a percentage of the box and the blurs scale with
   --red01-tablet-d, so it holds at every breakpoint.
   ::after — contact: narrow, slightly darker, centred on the bottom edge
   (the image sits above and hides its upper half, so there is no gap).
   ::before — ambient: wider and softer, fading into the ivory. */
.hero-tablet-media::before,
.hero-tablet-media::after {
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  pointer-events:none;
}
.hero-tablet-media::before {
  z-index:0;
  top:calc(93.4% - 6.5%);
  width:88%;
  height:13%;
  background:radial-gradient(
    ellipse at center,
    rgba(96,76,62,.15) 0%,
    rgba(96,76,62,.09) 40%,
    rgba(96,76,62,.03) 72%,
    rgba(96,76,62,0) 100%
  );
  filter:blur(calc(var(--red01-tablet-d, 240px) * 0.03));
}
.hero-tablet-media::after {
  z-index:1;
  top:calc(92.3% - 2.1%);
  width:42%;
  height:4.2%;
  background:radial-gradient(
    ellipse at center,
    rgba(70,52,40,.42) 0%,
    rgba(70,52,40,.28) 55%,
    rgba(70,52,40,0) 100%
  );
  filter:blur(calc(var(--red01-tablet-d, 240px) * 0.011));
}
/* The tablet art (assets/home/red-01-tablet-side-noshadow.png, 1056×1056) has
   no baked-in shadow, so nothing has to be dragged along if it is ever animated;
   the resting shadow is the CSS above. The sphere fills x 0.051–0.948 and
   y 0.024–0.927 of the box once the image is scaled to 98.24% and offset
   (left 1.03%, top -1.83%). transform-origin is the sphere's own centre in
   this image, so any scale/rotate transform pivots on the sphere itself. */
.hero-tablet-img {
  position:absolute;
  z-index:2;
  left:1.03%;
  top:-1.83%;
  display:block;
  width:98.24%;
  height:98.24%;
  transform-origin:49.81% 50.29%;
  object-fit:contain;
  transition:
    opacity 420ms ease,
    transform 380ms cubic-bezier(0.22,1,0.36,1);
  filter:none;
}
.hero-tablet-spinner:hover .hero-tablet-img {
  transform:scale(1.025);
}
.hero-tablet-spinner:active .hero-tablet-img {
  transform:scale(0.985);
  transition-duration:100ms;
}

/* Module caption — "The First Module" rides the same metadata row as RED-01
   instead of a separate eyebrow: smaller and lighter than RED-01, lower
   contrast than the CTA. Shrinks to its widest line; every line is flush
   left inside that box. */
.hero-tablet-caption { display:flex; flex-direction:column; align-items:flex-start; width:max-content; min-width:0; }
.hero-tablet-caption-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:24px; margin-top:15px; }
.hero-tablet-caption-code { font-family:var(--sans); font-size:18px; font-weight:500; letter-spacing:0.13em; color:var(--forest); line-height:1.5; }
.hero-tablet-caption-eyebrow {
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(28,51,40,0.82);
}
.hero-tablet-caption-desc { font-family:var(--sans); font-size:16.5px; font-weight:400; color:rgba(28,51,40,0.82); line-height:1.55; margin-top:21px; max-width:300px; }

/* ── RED-01 ingredient list — clicking the tablet reveals only the eleven
   ingredient names as an additional layer of information (no heading,
   numbers, role labels, box, border or background). The tablet itself never
   resizes, rotates or moves.
   Desktop: .ing-reveal is position:absolute off the tablet's box, so it
   can never affect grid sizing; the list expands to the right behind a thin
   leader line (see the ≥901px block).
   Mobile: .ing-reveal sits in normal flow under the tablet; only its height
   changes (0fr → 1fr), so the centred tablet never shifts sideways and the
   caption moves down (see the ≤900px block). ── */
.ing-reveal { opacity:0; transition:opacity 400ms ease; }
.hero-tablet-group.is-open .ing-reveal { opacity:1; }

.ing-leader { position:relative; display:block; flex:0 0 auto; background:rgba(28,51,40,0.22); }
.ing-leader-dot { position:absolute; width:4px; height:4px; border-radius:50%; background:rgba(28,51,40,0.34); }

.ing-panel-wrap { flex:0 0 auto; }
.ing-panel { overflow:hidden; }

.ing-columns { display:flex; margin:0; padding:0; }
.ing-col { list-style:none; display:flex; flex-direction:column; margin:0; padding:0; }
.ing-row { min-width:0; }
.ing-name {
  display:block;
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.01em;
  color:rgba(28,51,40,0.82);
  /* A name wraps only when a cramped viewport leaves it no other room;
     overflow-wrap breaks even a single long word ("Strawberry") rather than
     letting it overflow the panel's clipped edge. */
  white-space:normal;
  overflow-wrap:anywhere;
}
.ing-row.is-featured .ing-name { color:var(--brick); }

/* ── Hero: desktop (≥901px) ── */
@media (min-width:901px) {
  #hero { min-height:100svh; padding-top:110px; overflow:hidden; }

  .hero-inner {
    --hero-h1-mt:20px;   /* shared by the headline and the tablet row so the */
    --hero-h1-mb:58px;   /* tablet centres on the headline, not on its margins */
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(300px,0.92fr);
    column-gap:clamp(56px,6vw,96px);
    align-items:start;
    padding-right:clamp(44px,4.5vw,72px);
    transform:translateY(-48px);
  }

  /* Left edge: cancel .hero-inner's own centring offset
     (max(0px, (100vw - 1360px) / 2)) and replace it with --content-axis,
     measured from the viewport edge. It goes negative past ~1620px, which is
     what caps the axis instead of letting it drift outward with the box. */
  .hero-left { margin-left:calc(var(--content-axis) - max(0px, (100vw - 1360px) / 2)); }

  .hero-eyebrow { margin-top:0; margin-bottom:74px; }
  .hero-h1 { margin-top:var(--hero-h1-mt); margin-bottom:var(--hero-h1-mb); }
  .hero-copy { max-width:610px; }
  .hero-product-cta { font-size:14.5px; letter-spacing:0.13em; }
  #hero .hero-product-cta { font-size:15.5px; }

  /* Right column: sits --content-axis-relative on the right, with a gutter
     that scales with the viewport. */
  .hero-right {
    flex-direction:column;
    align-items:flex-end;
    padding-right:calc(max(0px, 25vw - 340px) + clamp(22px, 2.25vw, 36px) + 25px);
  }
  .hero-tablet-group { width:min(100%,290px); --red01-tablet-d:clamp(225px, 17.2vw, 257px); }

  .hero-tablet-caption { max-width:280px; }
  .hero-tablet-caption-desc { margin-top:22px; font-size:20px; line-height:1.5; }

  /* Ingredient list: expands to the right of the stationary tablet behind a
     single thin leader line. position:absolute takes it out of flow, so it
     cannot influence the grid no matter how wide it gets. --ing-max-w is
     kept current by index.js (the free space between the tablet and the
     viewport edge) before the interaction fires, so the panel is capped
     rather than ever clipped. */
  .ing-reveal {
    position:absolute;
    left:100%;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    pointer-events:none;
    z-index:5;
  }
  .hero-tablet-group.is-open .ing-reveal { pointer-events:auto; }
  .ing-leader { width:0; height:1px; transition:width 400ms cubic-bezier(.22,1,.36,1); }
  .hero-tablet-group.is-open .ing-leader { width:26px; }
  .ing-leader-dot { top:50%; right:-2px; transform:translate(50%,-50%); }
  .ing-panel {
    max-width:0;
    transition:max-width 400ms cubic-bezier(.22,1,.36,1);
  }
  .hero-tablet-group.is-open .ing-panel { max-width:min(240px, var(--ing-max-w, 240px)); }
  /* The columns are fixed to the panel's open width, so their layout (word
     wrapping included) is settled once; .ing-panel's overflow:hidden then
     wipes a growing/shrinking window over it instead of re-wrapping text on
     every animation frame. flex:1 1 0 + min-width:0 let the two columns share
     the space evenly when --ing-max-w caps the panel below their natural
     width (the tightest desktop widths); mobile imposes no cap.
     When the capped width cannot hold both columns side by side (only
     ~90–120px is free right of the tablet at 901–1440px), the second column
     wraps beneath the first, so the names read as one list whose entries
     break only at spaces ("Tart / Cherry") instead of mid-word. The 16px
     lead-in shrinks only when even one column would not fit (≈901px). */
  .ing-columns {
    width:min(240px, var(--ing-max-w, 240px));
    flex-wrap:wrap;
    column-gap:22px;
    row-gap:8px;
    padding-left:min(16px, max(8px, calc(var(--ing-max-w, 240px) - 80px)));
  }
  .ing-col { flex:1 1 auto; min-width:max-content; gap:8px; }
}

/* Narrow desktop (901–1199px): the two columns are tighter, so the headline,
   tablet and its dependent geometry are smaller. */
@media (min-width:901px) and (max-width:1199px) {
  .hero-h1 { max-width:500px; font-size:clamp(45.6px,4.8vw,57.6px); }
  .hero-tablet-group { --red01-tablet-d:202px; }
}

/* ≥1440px: --content-axis widens and the whole composition (left column AND
   tablet column) moves together — .hero-inner itself is pinned at the axis.
   max-width is the smaller of 1360px and the space right of the axis, so the
   box shrinks to fit between ~1440 and ~1511px instead of overflowing. */
@media (min-width:1440px) {
  :root { --content-axis:clamp(88px, 10.5vw, 220px); }
  .hero-left { margin-left:0; }
  .hero-inner {
    margin-left:var(--content-axis);
    max-width:min(1360px, calc(100vw - var(--content-axis)));
  }
}

/* Short desktop viewports (≤960px tall): tighten the eyebrow gap so the
   centred block still leaves clear space above the footer. */
@media (min-width:901px) and (max-height:960px) {
  .hero-eyebrow { margin-bottom:20px; }
}

/* Subgrid alignment (see the layout contract above). */
@supports (grid-template-rows: subgrid) {
  @media (min-width:901px) {
    .hero-inner {
      grid-template-rows:repeat(4, auto) minmax(0,1fr);
      min-height:520px;  /* keeps the composition's height — and so its vertical centring in #hero — constant */
    }
    .hero-left,
    .hero-right,
    .hero-tablet-group {
      display:grid;
      grid-row:1 / span 4;
      grid-template-rows:subgrid;
      grid-template-columns:minmax(0,1fr);
      gap:0;
    }
    .hero-right { justify-items:end; }

    /* Zero-height, centred on the headline row (same margins as the h1). */
    .hero-tablet-visual {
      grid-row:2;
      align-self:center;
      justify-self:center;
      margin-block:var(--hero-h1-mt) var(--hero-h1-mb);
      width:max-content;
      height:0;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .hero-tablet-stage { flex:none; }

    /* Zero-height, bottom-aligned with "Discover the System"; its content
       overflows upward from that line. */
    .hero-tablet-caption {
      grid-row:4;
      align-self:end;
      justify-self:center;
      height:0;
      justify-content:flex-end;
    }
    .hero-tablet-caption > * { flex:none; }
  }
}

/* ── Hero: tablet / mobile (≤900px) ── */
@media (max-width:900px) {
  #hero { min-height:auto; overflow-x:clip; } /* safety net: the tablet's entrance transform must never be able to cause horizontal scroll */
  .hero-inner { display:flex; flex-direction:column; align-items:stretch; padding-inline:var(--pad); }
  .hero-left { padding:40px 0 24px; order:1; }
  .hero-right { width:100%; order:2; }
  /* width:auto (not the base 100%) so the left indent comes out of the box
     rather than being added to it: the box is the parent's width minus the
     margin, capped at 35ch. With width:100% the used width plus the margin
     exceeded the parent whenever 35ch was wider than the column (≤~500px). */
  .hero-copy {
    width:auto;
    max-width:35ch;
    margin-left:24px;
    font-size:20px;
    line-height:1.58;
  }
  .hero-copy > span:first-child { display:block; }
  .hero-copy > span:not(:first-child):not(:last-child) { display:inline; }
  .hero-copy > span:not(:first-child):not(:last-child)::after { content:" "; }
  .hero-copy > span:last-child { display:block; }

  .hero-tablet-group {
    width:100%; margin:44px 0 24px; gap:10px; animation:fi 1s ease .9s forwards;
    --red01-tablet-d:clamp(145px, 40vw, 170px);
  }
  .hero-tablet-visual { display:flex; flex-direction:column; align-items:center; }
  .hero-tablet-caption { max-width:310px; }
  .hero-tablet-caption-desc { font-size:19px; }

  /* Ingredient list: in flow under the tablet. Only .ing-panel-wrap's height
     animates (0fr → 1fr); .ing-reveal's width is the same open or closed. */
  .ing-reveal { display:flex; flex-direction:column; align-items:center; }
  .ing-leader { width:1px; height:0; transition:height 400ms cubic-bezier(.22,1,.36,1); }
  .hero-tablet-group.is-open .ing-leader { height:20px; }
  .ing-leader-dot { left:50%; bottom:-2px; transform:translate(-50%,50%); }
  .ing-panel-wrap {
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows 400ms cubic-bezier(.22,1,.36,1);
  }
  .hero-tablet-group.is-open .ing-panel-wrap { grid-template-rows:1fr; }
  /* The 16px lead-in sits on .ing-columns, not .ing-panel: padding on the
     0fr grid item cannot collapse, so it reserved 16px even when closed. */
  .ing-panel { min-height:0; }
  .ing-columns { justify-content:center; gap:26px; padding-top:16px; }
  .ing-col { gap:7px; }

  /* The link's own box is ~17.5px tall; this invisible extender makes the
     tap target 44px without changing anything visible. */
  .hero-product-cta::before {
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
    height:44px;
  }
}

/* ── Hero: phone (≤768px) ── */
@media (max-width:768px) {
  .hero-left { padding:28px 0 24px; }
  .hero-eyebrow { font-size:16px; letter-spacing:.14em; margin-bottom:40px; }
  .hero-h1 {
    width:100%;
    max-width:none;
    font-size:clamp(32px,10.56vw,47.2px); /* one continuous scale: no separate small-phone override (it stepped 41.4→47.7px at 360→361px) */
    line-height:1;
    letter-spacing:-0.03em;
    margin-bottom:24px;
  }
  .hero-copy { margin-left:0; } /* shares the eyebrow's and headline's left edge (the --pad gutter) */
  .hero-tablet-group { margin-bottom:28px; }
  /* Centred as a group; its three lines share one left edge inside it. */
  .hero-tablet-caption { width:fit-content; max-width:min(100%,310px); margin-inline:auto; align-items:flex-start; }
  .hero-tablet-caption-code { font-size:17px; }
  .hero-tablet-caption-desc { max-width:30ch; }
  .hero-product-cta { margin-top:22px; }
  #hero .hero-product-cta { font-size:14.5px; }
  /* Mobile hierarchy is RED-01 first; the system link stays reachable via
     the nav and Palette. It is the last child of .hero-left, so removing it
     leaves no trailing gap. */
  .hero-system-cta { display:none; }
}

/* ── Hero body on the narrowest phones (≤480px). Its longest line,
   "Whole foods work better together." (316.5px at 20px), needs a 317px box;
   the box is 100vw − 40px (gutters) wide. Below ~357px that is narrower, so
   the copy would break into 5–6 lines with orphans. Scale it only as far as
   keeps the three intended lines — exactly 20px from ~357px up. The formula
   keeps its original 56px constant, a small safety margin. ── */
@media (max-width:480px) {
  .hero-copy { font-size:min(20px, calc((100vw - 56px) * 0.0628)); }
}

/* ── Hero: reduced motion. Removes the entrance animations, the tablet's
   hover/press easing and the ingredient list's open/close transitions. ── */
@media (prefers-reduced-motion:reduce) {
  .hero-eyebrow, .hero-h1, .hero-copy, .hero-system-cta { animation:none !important; opacity:1 !important; transform:none !important; }
  .hero-tablet-group { animation:none !important; opacity:1 !important; }
  .hero-tablet-spinner, .hero-tablet-img { transition-duration:0.01ms !important; }
  .hero-tablet-spinner:hover .hero-tablet-img,
  .hero-tablet-spinner:active .hero-tablet-img { transform:none !important; }
  .ing-reveal, .ing-leader, .ing-panel-wrap, .ing-panel { transition-duration:1ms !important; transition-delay:0ms !important; }
}

/* ── HAMBURGER ── */
.n-hamburger { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:36px; height:36px; background:none; border:none; cursor:pointer; padding:4px; }
.n-hamburger span { display:block; width:20px; height:1.5px; background:var(--charcoal); transition:transform .3s ease, opacity .2s ease; }
.n-hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.n-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.n-hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ── MOBILE MENU ── */

/* ── NAV: tablet / mobile (≤900px) — links collapse into the hamburger menu;
   the cart button keeps a 44px touch target and drops its label. ── */
@media (max-width:900px) {
  .n-nav-group { gap:4px; }
  .n-center { display:none; }
  .coti-cart-btn { min-width:44px; min-height:44px; }
  .n-hamburger { display:flex; min-width:44px; min-height:44px; }
  .n-palette-label { display:none; }
}
/* Smallest phones: tighter nav padding (the bar stays 84px tall, like every page). */
@media (max-width:480px) {
  nav#nav { padding:0 16px 0 20px; }
}


/* ── FOCUS-VISIBLE STATES — keyboard-focus outlines for nav, hamburger,
   mobile menu, and cart controls. ── */
.n-logo:focus-visible {
  outline: 1.5px solid var(--forest);
  outline-offset: 4px;
}
.n-links a:focus-visible,
.n-mobile-menu a:focus-visible {
  outline: 1.5px solid var(--forest);
  outline-offset: 4px;
}
.coti-cart-btn:focus-visible,
.n-hamburger:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: 2px;
}
.cart-close:focus-visible,
.cart-qty-btn:focus-visible,
.cart-remove:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
  border-radius: 2px;
}
.checkout-btn:focus-visible,
.continue-btn:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}



/* ── CURATOR SECTION — BASE (shared, mobile-first) ── */
#curator {
  display:flex;
  min-height: calc(90svh - 200px); /* shorter than full-screen — content is short enough that a full-screen minimum left a large empty gap below it */
  scroll-margin-top: 12px;
}
.curator-panel {
  display:flex; align-items:flex-start; min-width:0;
  padding-top: clamp(112px, 13vh, 132px);
}
.curator-panel--meaning {
  background: var(--forest);
  padding-left: clamp(48px,6vw,96px);
  padding-right: clamp(42px,5vw,78px);
  padding-bottom: clamp(64px,7vw,110px);
}
.curator-panel--invite {
  background: #EEEBE5; /* warm stone — flat, solid */
  padding-left: clamp(64px,7vw,108px);
  padding-right: clamp(48px,6vw,96px);
  padding-bottom: clamp(64px,7vw,110px);
}
.curator-meaning-inner, .curator-invite-inner { max-width:500px; width:100%; }

/* Eyebrows — "The Curator" / "The Palette" match the hero eyebrow's size
   (19px, 16px on phones); weight, tracking and colour come from
   .section-eyebrow. */
.curator-eyebrow, .curator-invite-eyebrow {
  font-size: 19px;
  margin-bottom: 38px;
}

/* Shared headline system — same family, weight, scale, line-height and
   tracking on both panels; only text color differs per background. */
.curator-heading,
.curator-invite-heading {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(37px, 3.24vw, 43.7px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 38px;
}
.curator-heading { color: var(--ivory); }
.curator-invite-heading { color: var(--forest); }
/* Intentional secondary voice — Cormorant Garamond Italic, reserved for
   this one emotional/personal emphasis, not a general headline font. */
.curator-heading em,
.curator-invite-heading em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: normal;
}
.curator-heading em { color: rgba(244, 243, 239, 0.95); }
.curator-invite-heading em { color: rgba(28, 51, 40, 0.92); }

/* Shared body-copy typography — one system for both panels, only text
   color differs per background. */
.curator-body-copy {
  font-family: var(--sans);
  font-size: clamp(20px, 1.4vw, 21px);
  font-weight: 300;
  line-height: 1.66;
  letter-spacing: 0;
  margin: 0;
}
.curator-body-copy > span { display:block; }
.curator-body-copy--meaning {
  color: rgba(244,243,239,0.90);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  max-width: 390px;
}
.curator-body-copy--meaning > .curator-meaning-closing {
  margin-top: 18px;
}
/* Left-panel CTA: same type as the Palette link, in the panel's ivory. */
.curator-meaning-cta { color: var(--ivory); }
.curator-meaning-cta:focus-visible { outline-color: var(--ivory); }
.curator-body-copy--invite {
  color: rgba(28,51,40,0.93);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  max-width: 430px;
  margin-top: 12px;
  margin-bottom: 40px;
}


/* Form */
.curator-form-stage {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 620px;
  min-height: 116px;
}
.curator-form-state,
.curator-success {
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
}
.curator-success { align-self: center; }
.curator-form { width:100%; }
.curator-form-row {
  display:flex; align-items:flex-end; gap:24px;
  border-bottom:1px solid rgba(28,51,40,0.45);
  padding-bottom:14px;
  transition:border-color .25s ease;
}
.curator-form-row:focus-within { border-color: var(--forest); }
.curator-field { flex:1 1 65%; min-width:0; display:flex; flex-direction:column; }
.curator-label {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.curator-input {
  width:100%; background:transparent; border:none; outline:none;
  font-family: var(--sans); font-size:16px; font-weight:400;
  color: var(--forest); padding:6px 0; min-height:22px;
}
.curator-input::placeholder { color:rgba(28,51,40,0.62); font-weight:400; }
.curator-submit {
  position:relative; isolation:isolate;
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  background:none; border:none; cursor:pointer; padding:8px 2px;
  font-family: var(--mono); font-size:13.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color: var(--forest);
  white-space:nowrap; min-height:44px;
}
.curator-submit-arrow { transition:transform .3s cubic-bezier(.22,1,.36,1); }
.curator-submit:hover .curator-submit-arrow,
.curator-submit:focus-visible .curator-submit-arrow { transform:translateX(4px); }
.curator-submit:focus-visible { outline:1.5px solid var(--forest); outline-offset:4px; }
.curator-submit:disabled { cursor:default; opacity:0.55; }
.curator-submit:disabled .curator-submit-arrow { transform:none; }

/* Soft sage response behind the button on activation. */
.curator-submit::before {
  content:""; position:absolute; z-index:-1; inset:2px -10px; border-radius:999px;
  background:radial-gradient(closest-side, rgba(227,233,222,0.95) 55%, rgba(227,233,222,0));
  opacity:0; transform:scale(.6); pointer-events:none;
}
.curator-submit.is-pressed::before { animation:curatorSagePress .55s cubic-bezier(.22,1,.36,1); }
@keyframes curatorSagePress {
  0%   { opacity:0; transform:scale(.6); }
  30%  { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(1.15); }
}


.curator-form-msg {
  min-height:16px; margin-top:8px;
  font-family: var(--mono); font-size:12px; font-weight:400;
  letter-spacing:.02em; color: rgba(24,23,20,0.55);
}
/* Only when a message is actually showing (validation error, notice) —
   otherwise this sits flush against .curator-legal below it with 0px gap. */
.curator-form-msg:not(:empty) { margin-bottom: 7px; }
.curator-form-row.is-invalid { border-color: rgba(163,58,46,0.65); }
.curator-form-msg[data-tone="invalid"] { color:#A33A2E; }
.curator-form-msg[data-tone="notice"] { color: rgba(28,51,40,0.68); }

.curator-form-state {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s linear;
}
.curator-form-stage.is-success { min-height: 0; }
.curator-form-stage.is-success .curator-form-state {
  position: absolute; inset: 0 auto auto 0; /* out of flow so the confirmation sets the height */
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s linear 180ms;
}

.curator-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding-top: 16px; /* with the description's 24px margin: 40px to the message group */
  text-align: center;
  color: var(--forest);
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 420ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 420ms;
}
.curator-success[hidden] { display:none; } /* author display:flex above otherwise beats the UA [hidden] rule and the box keeps reserving layout height while invisible */
.curator-success.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 420ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1),
    visibility 0s;
}
/* Programmatic focus() after submit (JS) moves keyboard focus here for
   a11y, but the browser's default focus ring is unwanted on this
   non-interactive success message — suppress it without touching the
   focus() call itself or any other :focus-visible styling. */
.curator-success:focus,
.curator-success:focus-visible {
  outline: none;
}
/* Confirmation — serif medium heading over two DM Sans lines, centred. */
.curator-success-heading {
  margin: 0;
  font-family: var(--display);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--forest);
}
.curator-success-copy {
  margin: 0;
  font-family: var(--sans);
  font-size: 17.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--forest);
}
.curator-success-copy span { display: block; text-wrap: balance; }
.curator-success-copy { margin-top: -2px; } /* heading→text gap = flex gap 14px − 2px = 12px */

.curator-legal {
  font-family: var(--sans); font-size:12px; font-weight:400;
  line-height:1.5; color: rgba(28,51,40,0.9); max-width:480px;
}
.curator-legal a { color: rgba(28,51,40,0.9); text-decoration-color:rgba(28,51,40,0.45); }
.curator-legal a:hover, .curator-legal a:focus-visible { color: var(--forest); }

/* Reveal on scroll (Curator, Palette, Newsletter). Content is visible by
   default. index.js adds .reveal-armed — only after its IntersectionObserver
   is set up — to elements still below the fold; they stay hidden until the
   observer adds .in. Arming is instant (the hidden state sets transition:none)
   and the reveal itself uses the transition below. With JS off or failing,
   nothing is ever armed and the content just stays visible. */
.curator-reveal {
  transition:opacity 750ms cubic-bezier(.22,1,.36,1), transform 750ms cubic-bezier(.22,1,.36,1);
}
.curator-reveal.reveal-armed:not(.in) { opacity:0; transform:translateY(12px); transition:none; }
.curator-panel--invite .curator-reveal { transition-delay:130ms; }

/* ── CURATOR DESKTOP (≥901px): a true 50/50 grid, sharing the Hero's 901px
   breakpoint so the section never sits in two narrow columns below it. Each
   panel's content block (eyebrow + headline + body + CTA) is left-aligned
   internally. Panels are top-aligned with one shared padding-top (from
   .curator-panel above) rather than vertically centred: the invite side is a
   CTA line taller, and centring each side independently would put "The
   Curator" and "The Palette" eyebrows at different heights. ── */
@media (min-width:901px) {
  #curator { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .curator-panel { align-items:flex-start; justify-content:center; min-width:0; padding-left:0; padding-right:0; }
  .curator-invite-inner {
    width: min(calc(100% - 2 * clamp(48px, 5vw, 80px)), 500px);
    max-width: 500px;
    margin: 0;
    text-align: left;
  }
  /* Meaning panel: content is pinned to the shared --content-axis (the Hero
     headline's left edge) instead of centred like the Palette panel. Its
     width reserves one clamp-width margin (toward the divider), not two:
     the left edge is already fixed by padding-left. */
  .curator-meaning-inner {
    width: min(calc(100% - clamp(48px, 5vw, 80px)), 500px);
    max-width: 500px;
    margin: 0;
    text-align: left;
  }
  .curator-panel--meaning {
    justify-content: flex-start;
    padding-left: var(--content-axis);
  }
  .curator-body-copy--invite { margin-bottom: 14px; }
  /* Both CTAs share one top edge: the longer left body (4 lines + 18px gap)
     sets the height, the right body is padded to match. */
  .curator-body-copy--meaning, .curator-body-copy--invite { min-height: 133.2px; }
  .curator-meaning-cta { margin-top: 54px; }
  /* Newsletter submit CTA — same size and tracking as .hero-product-cta. */
  .curator-submit { font-size:14.5px; letter-spacing:0.13em; }
}

/* ── CURATOR TABLET / MOBILE (≤900px): shares the Hero/nav breakpoint —
   stacks the dark Curator panel above the ivory Palette panel. ── */
@media (max-width:900px) {
  #curator { flex-direction:column; min-height:auto; }
  .curator-meaning-inner, .curator-invite-inner { max-width:none; }
  /* Eyebrow + headline sit on the primary left edge; body copy (and the
     Palette CTA) sit on a secondary 24px indent so they read as subordinate
     to the headline. The phone band narrows the indent (see below). */
  .curator-body-copy {
    max-width: 30ch;
    margin-left: 24px;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.65;
  }
  .curator-body-copy--meaning { color: rgba(244,243,239,0.93); font-size: 17px; line-height: 1.65; }
  .curator-body-copy--invite { color: rgba(28,51,40,0.97); font-size: 17px; line-height: 1.65; }

  /* Compact dark green Curator statement. */
  .curator-panel--meaning {
    flex: 1 1 auto;
    padding: 56px var(--pad);
    border-radius: 0;
  }
  .curator-eyebrow { margin-bottom:24px; }
  .curator-heading { font-size:clamp(22.5px,6.08vw,27.5px); line-height:1.1; margin-bottom:20px; }
  .curator-body-copy--meaning > .curator-meaning-closing { margin-top:0; }

  /* Palette panel */
  .curator-panel--invite {
    flex: 1 1 auto;
    padding: 56px var(--pad) 40px;
  }
  .curator-invite-eyebrow { margin-bottom:24px; }
  .curator-invite-heading { font-size:clamp(27px,7.29vw,33.2px); line-height:1.05; margin-bottom:28px; }
  .curator-body-copy--invite { margin-bottom:28px; }
  .curator-invite-content .hero-product-cta, .curator-meaning-cta { margin-left: 24px; }
  .curator-meaning-cta { margin-top: 50px; } /* matches the Palette body→CTA gap */
  /* Newsletter form: input and button keep sharing one underline, as on
     desktop, rather than stacking (≤350px stacks — see below). */
  .curator-form-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:14px; }
  .curator-input { min-height:44px; }
  .curator-submit { justify-content:flex-start; padding:10px 2px; }
  .curator-form-stage { min-height:110px; }
  /* Placeholder and legal text get more contrast at phone size. */
  .curator-legal { max-width:none; color:rgba(28,51,40,0.92); font-size:13px; }
  .curator-input::placeholder { color:rgba(28,51,40,0.68); }
}

/* Very narrow phones (≤350px): side by side, the email field would be left
   under ~90px next to the button, so stack them (field above, button below),
   each at least 44px tall. */
@media (max-width:350px) {
  .curator-form-row { grid-template-columns:minmax(0,1fr); row-gap:4px; }
  .curator-submit { min-height:44px; }
}

/* ── CURATOR REDUCED MOTION ── */
@media (prefers-reduced-motion:reduce) {
  .curator-submit.is-pressed::before { animation:none; }
  .curator-reveal { transition:none !important; opacity:1 !important; transform:none !important; }
  .curator-form-state,
  .curator-success {
    transition: none !important;
    transform: none !important;
  }
}

/* ── CURATOR / PALETTE PHONE BAND (≤768px) — the phone eyebrow size (matching
   the hero eyebrow), and body copy and CTA flush with the eyebrow and heading
   on the shared --pad gutter, like the Hero. ── */
@media (max-width:768px) {
  .curator-eyebrow, .curator-invite-eyebrow { font-size:16px; letter-spacing:.14em; }
  .curator-body-copy { margin-left: 0; }
  .curator-body-copy--meaning { margin-left: 0; }
  .curator-invite-content .hero-product-cta, .curator-meaning-cta { margin-left: 0; }
}

/* ── NEWSLETTER — "Palette Notes". Standalone invitation, separate from
   Curator + Palette: ivory background, a restrained centred column.
   Spacing rhythm (desktop and mobile): heading → description 16px,
   description → form 24px, form → consent text via the form's own message
   line. The consent-to-footer distance is the section's bottom padding
   (.curator-legal sits inside .curator-form-stage). ── */
.newsletter-section {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  background: var(--ivory);
  padding: 72px var(--pad);
}
.newsletter-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  text-align: center;
}

.newsletter-heading {
  font-family: var(--display); font-weight:300; font-size:clamp(24px,2.4vw,33px);
  text-transform: uppercase; line-height:1.25; letter-spacing:-0.025em;
  color: var(--forest); margin-bottom:16px;
}
.newsletter-heading-break { display: inline; }
@media (min-width:769px) {
  .curator-success { padding-top: 24px; gap: 14px; }
  .curator-success-heading { font-size: 31px; }
  .curator-success-copy { font-size: 18px; }
}
.newsletter-body-copy {
  color: rgba(28,51,40,0.82);
  font-weight: 400;
  margin: 0 auto 24px;
}
.newsletter-inner .curator-form-stage { max-width:520px; margin:0 auto; }
.newsletter-inner .curator-legal { margin-left:auto; margin-right:auto; }

/* Tablet / mobile (≤900px): a tinted rounded card; the heading breaks onto
   two balanced lines; the description, form and legal copy are each
   centred as their own block (max-width + auto margins). */
@media (max-width:900px) {
  .newsletter-heading { text-wrap:balance; }
  .newsletter-heading-break { display:block; }
  .newsletter-body-copy { max-width:300px; }
  .newsletter-inner .curator-form-stage { max-width:380px; }
  .newsletter-inner .curator-legal { max-width:360px; }
}

/* Phone (≤768px) */
@media (max-width:768px) {
  .newsletter-section { padding-top:48px; padding-bottom:48px; }
  .newsletter-heading { font-size:clamp(19px,5.4vw,24px); }
}

/* ── DESKTOP SCROLL SNAP — restrained, proximity-based; only the hero and
   curator chapters snap, newsletter/footer stay free-scrolling. ── */
@media (min-width: 901px) {
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: 84px;
  }

  #hero,
  #curator {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}

/* Footer styles live in footer.css (shared). */

/* Homepage-only DM Sans overrides for shared partials (cart, cookie
   notice, skip link). index.css loads on the homepage only, so other pages
   keep their own typography. */
body .cart-title,
body .cart-item-variant,
body .cart-line-total,
body .cart-qty-btn,
body .cart-qty-value,
body .cart-subtotal-label,
body .cart-subtotal-amount,
body .cart-shipping-note,
body .checkout-btn,
body .continue-btn,
body .cookie-notice p,
body .cookie-actions button,
body .skip-link { font-family:'DM Sans',Arial,sans-serif; }
:root { --n-nav-weight:600; }


/* ══ HERO — single centred column (scoped to #hero.hero-c; the rules above
   for the retired two-column hero no longer match any element) ══ */
#hero.hero-c { min-height:0; padding:var(--nav-height) 0 0; overflow:visible; overflow-x:clip; display:flex; flex-direction:column; justify-content:flex-start; }
.hero-c-inner { width:100%; max-width:760px; margin:0 auto; padding:clamp(24px,5vh,48px) 16px clamp(56px,7vh,72px); display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero-c-eyebrow { font-size:19px; font-weight:500; color:rgba(28,51,40,0.86); opacity:0; animation:fu .9s ease .1s forwards; }
.hero-c-h1 { margin-top:28px; font-family:var(--display); font-size:clamp(40px,4.44vw,62px); font-weight:350; line-height:1.1; letter-spacing:-0.03em; color:var(--forest); opacity:0; animation:fu 1s ease .3s forwards; }
.hero-c-h1 > span { display:block; white-space:nowrap; }
.hero-c-copy { margin-top:24px; max-width:520px; font-family:var(--sans); font-size:clamp(17px,1.3vw,19px); font-weight:400; line-height:1.55; color:rgba(28,51,40,0.82); opacity:0; animation:fu 1s ease .5s forwards; }
/* --tab-d is the visible tablet's diameter. The art (red-01-tablet-soft.webp, 1322×1190,
   red-01-tablet.webp with its baked-in shadow softened) has transparent padding, so the
   wrapper is sized to the tablet itself (x 446–877, y 367–803 in the image) and the image
   is positioned around it by percentages: no crop, no stretch, no CSS shadow. */
.hero-c-inner { --tab-d:clamp(60px,5.3vw,74px); }
.hero-c-tablet { display:block; cursor:pointer; position:relative; margin-top:52px; width:var(--tab-d); aspect-ratio:1; opacity:0; animation:fu 1s ease .65s forwards; }
.hero-c-tablet:focus-visible { outline:1.5px solid var(--forest); outline-offset:6px; border-radius:50%; }
.hero-c-tablet-img { position:absolute; display:block; width:306%; height:auto; max-width:none; left:-103.2%; top:-85%; pointer-events:none; }
.hero-c-caption { position:relative; z-index:1; margin-top:56px; display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:16px; opacity:0; animation:fu 1s ease .8s forwards; }
.hero-c-caption-code { font-family:var(--sans); font-size:16px; font-weight:500; letter-spacing:0.13em; color:var(--forest); line-height:1.5; }
.hero-c-caption-eyebrow { font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(28,51,40,0.82); }
.hero-product-cta.hero-c-cta { position:relative; z-index:1; margin-top:22px; font-size:14.5px; letter-spacing:0.13em; opacity:0; animation:fu 1s ease .95s forwards; }
/* Desktop/tablet: the hero fills the first viewport. Three groups share the height: the
   introduction up top, the tablet centred in the open space beneath it (auto margins),
   and the label + shop link anchored low. The padding and margins set the minimum gaps,
   so short viewports simply grow taller and scroll. */
@media (min-width:768px) {
  #hero.hero-c { min-height:100svh; }
  .hero-c-inner { flex:1 0 auto; padding:clamp(32px,7vh,88px) 16px clamp(56px,9vh,104px); }
  .hero-c-copy { margin-bottom:clamp(40px,6vh,72px); }
  .hero-c-tablet { margin-top:auto; margin-bottom:auto; }
  .hero-c-caption { margin-top:clamp(40px,6vh,72px); }
}
/* Phones: the hero height follows its content (no viewport-height rules). Fixed gaps keep
   the tablet, its label and the shop link reading as one group; the next section may
   peek in on tall screens. */
@media (max-width:767px) {
  /* Text keeps its natural height on top; the tablet is centred in all remaining hero space
     (Shop link bottom -> hero bottom). The nav is the hero's padding-top (counted once), and the
     minimum height stops ~32px short of the visible area so the next section's background peeks in.
     It is a flexible minimum: larger content grows the hero and the page scrolls. */
  #hero.hero-c { --peek:32px; min-height:calc(100vh - var(--peek)); min-height:calc(100svh - var(--peek)); }
  .hero-c-inner {
    --tab-d:clamp(49px,13.7vw,56px);
    flex:1 0 auto; display:grid; justify-items:center; align-content:start;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:repeat(5,auto) minmax(0,1fr);
    padding:clamp(24px,4svh,40px) 16px env(safe-area-inset-bottom,0px);
  }
  .hero-c-h1 { font-size:clamp(28px,8.6vw,44px); margin-top:clamp(24px,3.4svh,32px); }
  .hero-c-copy { max-width:90%; margin-top:clamp(24px,3.4svh,32px); margin-bottom:0; }
  .hero-c-eyebrow { font-size:16px; letter-spacing:.14em; }
  /* visual order: label, shop link, tablet (DOM order: tablet, label, link) */
  .hero-c-caption { order:1; margin-top:clamp(32px,4.5svh,40px); }
  .hero-product-cta.hero-c-cta { order:2; margin-top:clamp(16px,2.2svh,20px); }
  /* the tablet box is the visible disc (the oversized image is offset around it), so
     centring the box centres the visible tablet; no extra margins or offsets */
  .hero-c-tablet { order:3; align-self:center; margin:clamp(40px,7svh,64px) 0; } /* symmetric minimum breathing room */
}
@media (prefers-reduced-motion:reduce) {
  .hero-c-eyebrow,.hero-c-h1,.hero-c-copy,.hero-c-tablet,.hero-c-caption,.hero-product-cta.hero-c-cta { animation:none; opacity:1; }
}