/* Korkunova — Vanilla Dream. Palette: docs/korkunova/PALETTE.md; fonts: docs/korkunova/FONTS.md.
   Desktop geometry is authored in mockup pixels (000.png, 2048 wide) times --u = 100cqw / 2048:
   the composition SCALES WITH THE PAGE WIDTH at every desktop size (user checkpoint 2026-10-04:
   "not full width on desktop" superseded the capped-content answer). cqw resolves against body,
   a size container, so the scrollbar is excluded - 100vw would overflow by its width. */

:root {
  --wall: #F0EBE6;
  --wall-2: #E2DAD3;
  --wall-edge: #D7CEC7;
  --band: #EBE4DF;
  --rule: #D5CDC6;
  --button: #444443;
  --ink: #3D3C3B;
  --ink-soft: #4E4B4A;
  --rose: #C78684;
  --gold: #C6A988;
  --gold-label: #E3C9A4;
  --divider: #928F8E;

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Century Gothic", Arial, sans-serif;

  --u: calc(100cqw / 2048);
  /* Mockup units trimmed off the top of the header (user, 2026-10-05: "a little extra room above the
     header"). The header, stage and plate all rise by this much; the hero below the rule is unchanged. */
  --hdr-trim: 26;
}

*, *::before, *::after { box-sizing: border-box; }
/* html carries the wall colour: body is a size container, and containment stops body's
   background propagating to the canvas (the area below a short page painted white). */
html { overflow-y: auto; -webkit-text-size-adjust: 100%; background: var(--wall); }
body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--serif);
  /* No overflow-x clip on body: .stage and the narrow .hero clip their own bleeding art, so a real
     overflow shows up as a scrollbar (and fails no-horizontal-overflow) instead of being cut silently. */
  container-type: inline-size;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
p, h1 { margin: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* The 2048u-wide frame every desktop coordinate is measured in (= the page width). */
.wrap {
  position: relative;
  width: calc(2048 * var(--u));
  margin-inline: auto;
}

/* ---------- Stage: plate behind header + hero ---------- */
.stage {
  position: relative;
  height: calc((1067 - var(--hdr-trim)) * var(--u));
  background: var(--wall);
  overflow: hidden;
}
.plate {
  position: absolute;
  top: calc(-1 * var(--hdr-trim) * var(--u));
  /* A01 v2 is registered to mockup coordinates (identity fit; pupils within 2 px). */
  left: calc(50% - 1024 * var(--u));
  width: calc(2048 * var(--u));
  height: calc(1152 * var(--u));
  background: url("../assets/opt/hero-plate-1200.webp") center top / 100% 100% no-repeat;
}

/* ---------- S1 Header ---------- */
.site-header {
  position: relative;
  z-index: 3;
  height: calc((129 - var(--hdr-trim)) * var(--u));
  border-bottom: 1px solid var(--rule);
}
.header-inner { height: 100%; }
.logo {
  position: absolute;
  left: calc(106 * var(--u));
  top: calc((40 - var(--hdr-trim)) * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.logo-name {
  font-weight: 500;
  font-size: calc(47.6 * var(--u));
  letter-spacing: 0.045em;
}
.logo-sub {
  margin-top: calc(10 * var(--u));
  font-weight: 500;
  font-size: calc(17.5 * var(--u));
  letter-spacing: 0.62em;
  margin-right: -0.62em;
  color: var(--ink-soft);
}
.nav ul { display: flex; }
.nav {
  position: absolute;
  left: calc(800 * var(--u));
  top: calc((68 - var(--hdr-trim)) * var(--u));
}
.nav li { position: absolute; top: 0; white-space: nowrap; }
.nav li:nth-child(1) { left: 0; }
.nav li:nth-child(2) { left: calc(203 * var(--u)); }
.nav li:nth-child(3) { left: calc(408 * var(--u)); }
.nav li:nth-child(4) { left: calc(590 * var(--u)); }
/* Home: OUR STORY and CONTACT sit over the model's hair, so the mockup sets them light (bright-5% #C6BEB9).
   Every other page has no hero plate behind the header and keeps all nav links ink. */
@media (min-width: 1100px) { .page-home .nav li:nth-child(n+3) a { color: #C9C0BA; } }
.page-story .site-header { background: var(--wall); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }
.nav a {
  font-family: var(--sans);
  font-size: calc(18.6 * var(--u));
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.4;
}
.utils {
  position: absolute;
  right: calc(70 * var(--u));
  top: calc((62 - var(--hdr-trim)) * var(--u));
  display: flex;
  align-items: center;
}
.menu-toggle { display: none; }

/* ---------- S2 Hero ---------- */
.hero { position: absolute; inset: calc((129 - var(--hdr-trim)) * var(--u)) 0 0 0; z-index: 2; }
.hero-inner { height: 100%; }
/* Hero children are positioned against mockup y, so offset by the header height. */
.hero-inner > *, .copy > * { position: absolute; }
.copy { position: absolute; inset: 0; }

.florals { left: 0; top: calc((361 - 129) * var(--u)); width: calc(216 * var(--u)); }
/* A03 drawn so its ink (385x241 of the 400x256 file) lands on mockup x700-767, y862-903. */
.petal { width: calc(69.6 * var(--u)); }
.petal-1 { left: calc(698.6 * var(--u)); top: calc((860.6 - 129) * var(--u)); }
/* Left-edge petal, mockup x0-36 y998-1034; the bottom-left petal ships inside A02. */
.petal-2 { left: calc(-24 * var(--u)); top: calc((996 - 129) * var(--u)); width: calc(62 * var(--u)); transform: rotate(-24deg) scaleX(-1); }

.eyebrow {
  left: calc(108 * var(--u));
  top: calc((238 - 129) * var(--u));
  width: calc(680 * var(--u));
  height: calc(42 * var(--u));
  font-family: var(--sans);
  font-size: calc(24.3 * var(--u));
  letter-spacing: 0.133em;
  text-transform: uppercase;
  color: var(--rose);
  line-height: 1.2;
}
.eyebrow span { position: absolute; left: calc(5 * var(--u)); top: 0; white-space: nowrap; }
/* Hairline under the eyebrow (left) and the gold leader after the doodle (right). */
.eyebrow::before, .eyebrow::after { content: ""; position: absolute; height: 1px; }
.eyebrow::before { left: 0; width: calc(515 * var(--u)); top: calc(41 * var(--u)); background: linear-gradient(90deg, var(--rule), var(--gold)); }
.eyebrow::after { left: calc(582 * var(--u)); width: calc(95 * var(--u)); top: calc(20 * var(--u)); background: var(--gold); }
/* A05 ink lands on mockup x623-680, y245-288 (eyebrow box origin 108,238). */
.doodle { position: absolute; left: calc(514.3 * var(--u)); top: calc(6.3 * var(--u)); width: calc(59.5 * var(--u)); }

.headline {
  left: calc(112 * var(--u));
  top: calc((285 - 129) * var(--u));
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
}
/* Headline geometry is in em of the VANILLA size (157 mockup px) so the flourish stays locked to
   DREAM at every layout size: DREAM 168/157, its offsets -25/168 and 22/168. */
.headline { font-size: calc(157 * var(--u)); }
.headline span { display: block; white-space: nowrap; }
.hl-1 { font-size: 1em; letter-spacing: 0; color: var(--ink); }
.hl-2 { font-size: 1.0701em; letter-spacing: 0; color: var(--rose); margin-top: -0.1488em; margin-left: 0.131em; }
/* A04 placement from B2's template match: 539x163 at mockup (304,449), i.e. (192,164) from the
   headline box at (112,285), expressed in em of the 157-px headline. */
.flourish { position: absolute; left: 1.2229em; top: 1.0446em; width: 3.4331em; max-width: none; pointer-events: none; }

.tagline {
  left: calc(219 * var(--u));
  top: calc((625 - 129) * var(--u));
  font-style: italic;
  font-weight: 500;
  font-size: calc(41.3 * var(--u));
  line-height: calc(47 * var(--u));
}
.tagline span { display: block; white-space: nowrap; }
.tl-2 { color: var(--rose); font-size: calc(45.8 * var(--u)); }

.body {
  left: calc(221 * var(--u));
  top: calc((738 - 129) * var(--u));
  width: calc(470 * var(--u));
  font-weight: 500;
  font-size: calc(26.7 * var(--u));
  line-height: calc(36 * var(--u));
  color: var(--ink);
}

.cta {
  left: calc(218 * var(--u));
  top: calc((837 - 129) * var(--u));
  width: calc(353 * var(--u));
  height: calc(66 * var(--u));
  display: flex;
  align-items: center;
  padding-left: calc(60 * var(--u));
  background: var(--button);
  border-radius: calc(3 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(60, 50, 45, 0.18);
  font-family: var(--sans);
  font-size: calc(21.4 * var(--u));
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-label);
}
.cta svg {
  position: absolute;
  right: calc(30 * var(--u));
  top: 50%;
  width: calc(36 * var(--u));
  transform: translateY(-50%);
  fill: none;
  stroke: var(--gold-label);
  stroke-width: 1.6;
}
.cta:hover { background: #2f2e2d; }

.features { inset: 0; pointer-events: none; }
.features li {
  position: absolute;
  top: calc((955 - 129) * var(--u));
  height: calc(62 * var(--u));
  font-family: var(--sans);
  font-size: calc(14.3 * var(--u));
  letter-spacing: 0.05em;
  line-height: calc(20 * var(--u));
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* max-width: none - the li holds only absolute children, so it is 0 wide and the global
   img{max-width:100%} would collapse every icon to 0 (Kivios lesson). */
.features img { position: absolute; max-width: none; }
.features span { position: absolute; top: calc(18 * var(--u)); white-space: nowrap; }
.features li:nth-child(1) { left: calc(136 * var(--u)); }
/* Icon placements map each file's alpha>64 bbox onto B3's native ink box (li origin = mockup x, y955). */
.features li:nth-child(1) img { left: calc(-1.6 * var(--u)); top: calc(-2.6 * var(--u)); width: calc(38.2 * var(--u)); }
.features li:nth-child(1) span { left: calc(59 * var(--u)); }
.features li:nth-child(2) { left: calc(436 * var(--u)); }
.features li:nth-child(2) img { left: calc(-1.6 * var(--u)); top: calc(12.4 * var(--u)); width: calc(44.2 * var(--u)); }
.features li:nth-child(2) span { left: calc(68 * var(--u)); }
.features li:nth-child(3) { left: calc(675 * var(--u)); }
.features li:nth-child(3) img { left: calc(-1.8 * var(--u)); top: calc(15.2 * var(--u)); width: calc(45.6 * var(--u)); }
.features li:nth-child(3) span { left: calc(63 * var(--u)); }
/* Hairline dividers at mockup x 390 and 629, y 963-1014. */
.features li + li::before {
  content: ""; position: absolute; top: calc(8 * var(--u)); width: 1px; height: calc(51 * var(--u));
  background: var(--divider);
}
.features li:nth-child(2)::before { left: calc(-46 * var(--u)); }
.features li:nth-child(3)::before { left: calc(-46 * var(--u)); }

/* Right rail: rotated horizontal text (not writing-mode - it rotates the apostrophe). */
.rail { inset: 0; pointer-events: none; }
.rail-text {
  position: absolute;
  left: calc(1973 * var(--u));
  top: calc((725 - 129) * var(--u));
  transform-origin: 0 0;
  transform: rotate(-90deg);
  font-family: var(--sans);
  font-size: calc(17 * var(--u));
  letter-spacing: 0.257em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  line-height: 1;
}
.rail-line {
  position: absolute;
  left: calc(1984 * var(--u));
  top: calc((760 - 129) * var(--u));
  width: 1px;
  height: calc(195 * var(--u));
  background: var(--divider);
}
.rail-index {
  position: absolute;
  left: calc(1912 * var(--u));
  top: calc((972 - 129) * var(--u));
  font-family: var(--serif);
  font-size: calc(25 * var(--u));
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}
.rail-index b { font-weight: 300; font-size: calc(35 * var(--u)); }

/* ---------- S3 Band ---------- */
.band {
  background: var(--band);
  border-top: 1px solid var(--rule);
}
.band-inner { height: calc(85 * var(--u)); }
.band li {
  position: absolute;
  top: calc(30 * var(--u));
  font-family: var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1.4;
}
.band li:nth-child(1) { left: calc(548 * var(--u)); font-size: calc(17.1 * var(--u)); letter-spacing: 0.149em; }
.band li:nth-child(2) { left: calc(1028 * var(--u)); font-size: calc(17.1 * var(--u)); letter-spacing: 0.134em; }
/* Separator at mockup x 977. */
.band li:nth-child(2)::before {
  content: ""; position: absolute; left: calc(-51 * var(--u)); top: calc(-4 * var(--u));
  width: 1px; height: calc(32 * var(--u)); background: var(--divider);
}

/* ================= Below 1100: stacked layout =================
   Under ~1100 the scaled composition drops the nav to ~10px and the feature captions to ~8px, so
   the page re-flows: header with menu, the photo cropped to the woman and bottle, then the copy
   centred (the magnolia bleeds off the left edge in the side margin). */
@media (max-width: 1099.98px) {
  .wrap { width: auto; }
  .stage { height: auto; overflow: visible; display: flex; flex-direction: column; }

  .site-header { order: 0; height: auto; background: var(--wall); }
  .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 20px; }
  .logo { position: static; }
  .logo-name { font-size: clamp(22px, 4.2vw, 30px); }
  .logo-sub { margin-top: 4px; font-size: clamp(9px, 1.6vw, 11px); }
  .utils { position: static; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  }
  .menu-bars, .menu-bars::before, .menu-bars::after {
    display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .2s;
  }
  .menu-bars { position: relative; }
  .menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
  .menu-bars::before { top: -7px; }
  .menu-bars::after { top: 7px; }
  .menu-toggle[aria-expanded="true"] .menu-bars { background: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-bars::before { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-bars::after { transform: translateY(-7px) rotate(-45deg); }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 10; display: none;
    background: var(--wall); border-bottom: 1px solid var(--rule); box-shadow: 0 12px 24px rgba(60, 50, 45, 0.08);
  }
  .nav-open .nav { display: block; }
  .nav ul { flex-direction: column; padding: 4px 20px 12px; }
  .nav li { position: static; }
  .nav li + li { border-top: 1px solid var(--rule); }
  .nav a { display: flex; align-items: center; min-height: 48px; font-size: 14px; letter-spacing: 0.17em; }

  .plate {
    order: 1; position: relative; left: auto; top: auto; transform: none;
    width: 100%; height: auto; aspect-ratio: 1248 / 1152; max-height: 72svh;
    /* Cover from the right edge shows mockup x ~800-2048: the woman and bottle, not the wall. */
    background-size: cover; background-position: 100% 25%;
  }

  .hero { order: 2; position: relative; inset: auto; overflow: hidden; }
  .hero-inner { padding: 28px 20px 36px; }
  .hero-inner > *, .copy > * { position: relative; left: auto; top: auto; }
  .copy { position: relative; inset: auto; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }

  .florals { position: absolute; left: -26px; top: 64px; width: clamp(80px, 13vw, 130px); z-index: 0; pointer-events: none; }
  .petal-1 { display: none; }
  .petal-2 { position: absolute; left: -14px; top: auto; bottom: 24px; width: 46px; }
  .rail { display: none; }

  .eyebrow {
    width: auto; height: auto; display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px; border-bottom: 1px solid var(--rule);
    font-size: clamp(11px, 2.9vw, 14px); letter-spacing: 0.16em; line-height: 1.3;
  }
  .eyebrow span { position: static; white-space: normal; }
  .eyebrow::before, .eyebrow::after { display: none; }
  .doodle { position: static; width: clamp(28px, 6vw, 40px); flex: none; }

  .headline { margin-top: 18px; font-size: clamp(52px, 15vw, 118px); text-align: left; }

  .tagline { margin-top: 26px; font-size: clamp(20px, 5.2vw, 30px); line-height: 1.25; }
  .tl-2 { font-size: 1.109em; }
  .body { width: auto; max-width: 28em; margin-top: 12px; font-size: clamp(16px, 4.2vw, 19px); line-height: 1.5; text-wrap: balance; }

  .cta {
    width: min(100%, 320px); height: 54px; margin-top: 26px; padding: 0 0 0 0.36em;
    justify-content: center; border-radius: 3px; box-shadow: 0 4px 10px rgba(60, 50, 45, 0.18);
    font-size: 14px;
  }
  .cta svg { position: static; width: 30px; margin-left: 16px; transform: none; }

  .features { inset: auto; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 560px; margin-top: 32px; }
  .features li {
    position: static; height: auto; display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 0 6px; font-size: clamp(10px, 2.6vw, 12px); letter-spacing: 0.08em; line-height: 1.5; text-align: center;
  }
  .features li + li { border-left: 1px solid var(--divider); }
  .features li + li::before { display: none; }
  .features li:nth-child(n) img { position: static; width: auto; height: 34px; }
  .features li:nth-child(n) span { position: static; white-space: normal; }

  .band-inner { height: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px; }
  .band li, .band li:nth-child(n) { position: static; font-size: 11px; letter-spacing: 0.14em; line-height: 1.5; white-space: normal; text-align: center; }
  .band li:nth-child(2)::before { display: none; }
}
@media (max-width: 479.98px) {
  .features li { padding: 0 3px; font-size: 10px; letter-spacing: 0.03em; }
}

/* ================= Screen 2: Crafted with intention (tmph0ew9unz.png) =================
   Palette: docs/korkunova2/PALETTE.md; fonts: docs/korkunova2/FONTS.md. Same unit as screen 1: desktop
   geometry is mockup px x --u, positioned against each section's mockup origin (header y0-94 excluded:
   S1 starts at y95, S2 at y510, S3 at y937, S4 at y1078). The base rules are a plain stacked fallback;
   the composition lives in the min-width: 1100px block. Text runs are fitted to the mockup's ink boxes
   (pipeline/work/kk2-build/fit.py), each noted with its native ink box. */

:root {
  --s2-head: #373638;
  --s2-title: #2A2929;
  --s2-caption: #5A5856;
  --s2-tag: #3E3B3A;
  --s2-label: #1E1D1D;
  --s2-numeral: #575656;
  --s2-dots: #615F5D;
  --s2-hair: #B4B0AC;
  --s2-hair-strong: #9C9A96;
  --s2-hair-light: #C3BEBA;

  --book: "EB Garamond", Garamond, "Times New Roman", serif;
  --sans-body: "Urbanist", "Jost", "Century Gothic", Arial, sans-serif;
}

.s2-intro, .s2-cards, .s2-guarantees, .s2-tagline { position: relative; background: var(--wall); }
.s2-intro h1, .s2-intro h2, .s2-cards h2, .s2-cards h3, .s2-guarantees h2, .s2-cards dl, .s2-cards dd { margin: 0; font-weight: inherit; }
.s2-headline span { display: block; }
.s2-flag { display: block; }

/* ---------- Base rules (stacked); the < 1100 layout refines them below, the desktop block overrides them ---------- */
.s2-intro-inner, .s2-cards-inner, .s2-guarantees-inner, .s2-tagline-inner { padding: 32px 20px; }
.s2-photo { width: calc(100% + 40px); max-width: none; height: auto; margin: -32px -20px 24px; }
.s2-headline { font: 300 clamp(34px, 8vw, 56px) / 1.05 var(--serif); color: var(--s2-head); }
.s2-intro-body { margin-top: 14px; font: 400 16px / 1.6 var(--sans-body); letter-spacing: 0.04em; color: var(--ink); }
.s2-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px; margin-top: 24px; }
.s2-features li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  font: 400 11px / 1.6 var(--sans); letter-spacing: 0.08em; color: var(--s2-caption); }
.s2-features img { height: 44px; width: auto; }
.s2-cards { border-top: 1px solid var(--s2-hair); }
.s2-card { padding: 28px 0; text-align: center; }
.s2-card + .s2-card { border-top: 1px solid var(--s2-hair-light); }
.s2-card-title { font: 400 24px / 1.3 var(--serif); letter-spacing: 0.1em; color: var(--s2-title); }
.s2-sub { margin-top: 6px; font: italic 400 18px / 1.4 var(--book); color: var(--ink); }
.s2-notes, .s2-free, .s2-origins p, .s2-entries dd, .s2-guarantees p { font: 400 17px / 1.45 var(--book); color: var(--ink); font-variant-numeric: lining-nums; }
.s2-notes { margin-top: 10px; }
.s2-dot { font-size: 0.7em; vertical-align: 0.15em; }
.s2-flatlay { width: min(100%, 480px); height: auto; margin: 16px auto 0; }
.s2-entries { max-width: 26em; margin: 16px auto 0; text-align: left; }
.s2-entries div { padding: 10px 0; }
.s2-entries div + div { border-top: 1px solid var(--s2-hair); }
.s2-entries dt { font: 500 19px / 1.3 var(--book); color: var(--s2-title); }
.s2-c3-body { margin-top: 12px; font: 400 15px / 1.6 var(--sans-body); letter-spacing: 0.03em; color: var(--ink); }
.s2-dots { display: block; width: min(100%, 320px); margin: 18px auto 0; border-top: 2px dotted var(--s2-dots); }
.s2-c3 .s2-sub { margin-top: 14px; }
.s2-leaf { width: 64px; height: auto; margin: 12px auto 0; }
.s2-origins { display: grid; gap: 18px; max-width: 22em; margin: 18px auto 0; text-align: left; }
.s2-origins li { display: grid; grid-template-columns: 80px 1fr; column-gap: 20px; align-items: start; }
.s2-origins .s2-flag { grid-row: span 2; width: 80px; height: auto; aspect-ratio: 83 / 58; }
.s2-origin-nz .s2-flag { width: 76px; aspect-ratio: 79 / 58; }
.s2-origins h3 { font: 400 18px / 1.3 var(--serif); letter-spacing: 0.06em; color: var(--s2-title); }
.s2-globe { width: 120px; height: auto; margin: 18px auto 0; }
.s2-guarantees { border-top: 1px solid var(--s2-hair-strong); }
.s2-guarantees-inner { display: grid; gap: 22px; }
.s2-guarantees li { display: grid; grid-template-columns: 76px 1fr; column-gap: 18px; align-items: center; }
.s2-guarantees li > img, .s2-ring { grid-row: span 2; justify-self: center; }
.s2-guarantees li > img { width: 64px; height: auto; }
.s2-ring { position: relative; display: block; width: 64px; }
.s2-ring img { width: 100%; height: auto; }
.s2-ring-num { position: absolute; inset: 0; display: grid; place-items: center; font: 400 22px / 1 var(--book); color: var(--ink); font-variant-numeric: lining-nums; }
.s2-guarantees h2 { font: 400 19px / 1.3 var(--serif); letter-spacing: 0.08em; color: var(--s2-title); font-variant-numeric: lining-nums; }
.s2-tagline { border-top: 1px solid var(--s2-hair); }
.s2-tagline-inner { margin: 0; font: 400 12px / 1.8 var(--sans); letter-spacing: 0.3em; text-align: center; color: var(--s2-tag); }

/* ---------- Below 1100: responsive layout ----------
   Reads as screen 1's stacked layout: 20px gutters, centred copy, hairlines between stacked blocks.
   < 768: one column, features 2x2, cards and guarantees stacked. 768-1099: features 4-across, cards 2x2. */
@media (max-width: 1099.98px) {
  .s2-intro-inner { padding: 0 20px 36px; text-align: center; }
  /* K01 is a 2.77:1 band. The block is never wider than that, so cover always shows the full height and
     crops only the sides; anchored at 10% it keeps the gloved hand, the hero bottle and its label (source
     x ~350-1490 of 2880) in frame at every width (kk2-photo-crop-keeps-hand-and-label-narrow). */
  .s2-photo {
    width: calc(100% + 40px); height: clamp(260px, 44vw, 460px); margin: 0 -20px 28px;
    object-fit: cover; object-position: 10% 50%;
  }
  .s2-headline { font-size: clamp(36px, 9vw, 56px); }
  .s2-intro-body { max-width: 30em; margin: 16px auto 0; font-size: clamp(15px, 4vw, 17px); }
  .s2-features { gap: 26px 0; max-width: 460px; margin: 30px auto 0; }
  .s2-features li { padding: 2px 8px; }
  .s2-features li:nth-child(even) { border-left: 1px solid var(--s2-hair); }

  .s2-cards-inner { padding: 0 20px; }
  .s2-card { padding: 36px 0 40px; }
  .s2-c1 .s2-flatlay { width: min(100%, 440px); margin-top: 20px; }
  .s2-entries { max-width: 24em; text-align: center; }
  .s2-entries div { padding: 12px 0; }
  .s2-origins { width: fit-content; max-width: 100%; }

  /* Guarantees stack centred below 768 (768-1099: three across, below): at 390 the icon-left grid left ~250px for the
     text and broke "MADE TO BE / MEMORABLE" and "Unmistakably / you."; centred, every line keeps the
     mockup break and the cards above use the same axis. */
  .s2-guarantees-inner { display: block; max-width: 560px; margin-inline: auto; padding: 4px 20px; }
  .s2-guarantees li { display: flex; flex-direction: column; align-items: center; padding: 28px 0; text-align: center; }
  .s2-guarantees li + li { border-top: 1px solid var(--s2-hair); }
  .s2-guarantees li > img, .s2-ring { margin-bottom: 12px; }
  .s2-guarantees .s2-g1 > img { width: 76px; }
  .s2-guarantees .s2-g3 > img { width: 60px; }
  .s2-guarantees h2 { margin-bottom: 4px; }

  /* One phrase per line: words inside a phrase are joined by no-break spaces (desktop renders identically), and
     a measure of 20em is wider than any phrase (~16em) and narrower than any two (~29em). The extra 0.24em of
     left padding offsets the trailing letter-space each line ends with, so the lines centre. */
  .s2-tagline-inner { padding: 26px 20px 26px calc(20px + 0.24em); font-size: 12px; letter-spacing: 0.24em; line-height: 2; }
  .s2-tagline-inner span { display: block; max-width: 20em; margin-inline: auto; }
}
@media (min-width: 768px) and (max-width: 1099.98px) {
  /* Guarantees three across (user request 2026-10-04). Measured at 768: the widest body line is 15.64em
     ("Sophisticated. Subtle. Unmistakably you.") and the widest title 13.5em at 0.08em tracking, against a
     ~222px column, so both scale with the width: body 14px at 768 up to 16px, title 15px up to 18px.
     A fixed 64px icon row keeps the three titles on one baseline. */
  .s2-guarantees-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: none; }
  .s2-guarantees li { display: grid; grid-template-columns: 1fr; grid-template-rows: 64px auto auto; justify-items: center; align-content: start; padding: 28px 10px; }
  .s2-guarantees li > img, .s2-ring { grid-row: auto; align-self: center; margin-bottom: 0; }
  .s2-guarantees h2 { margin: 14px 0 4px; font-size: clamp(15px, calc(1.75cqw + 1.6px), 18px); }
  .s2-guarantees p { font-size: clamp(14px, calc(1.75cqw + 0.6px), 16px); }
  .s2-guarantees li + li { border-top: 0; border-left: 1px solid var(--s2-hair); }

  .s2-intro-inner { padding-bottom: 40px; }
  .s2-features { grid-template-columns: repeat(4, 1fr); max-width: 860px; }
  .s2-features li { font-size: 12px; }
  .s2-features li + li { border-left: 1px solid var(--s2-hair); }

  .s2-cards-inner { display: grid; grid-template-columns: 1fr 1fr; }
  .s2-card { padding: 40px 28px 44px; }
  .s2-cards .s2-c2 { border-top: 0; }
  .s2-cards .s2-c2, .s2-cards .s2-c4 { border-left: 1px solid var(--s2-hair-light); }

  .s2-tagline-inner { padding-left: calc(20px + 0.3em); font-size: 13px; letter-spacing: 0.3em; }
  .s2-tagline-inner span { max-width: none; }
}

/* ---------- Desktop composition (>= 1100) ---------- */
@media (min-width: 1100px) {
  .s2-intro-inner, .s2-cards-inner, .s2-guarantees-inner, .s2-tagline-inner { padding: 0; }
  .s2-cards, .s2-guarantees, .s2-tagline { border-top: 0; }
  /* Full-width hairlines on each section's top edge (mockup y510, y937, y1078), drawn over the card
     surfaces. 1 CSS px carries the measured two-row darkness of each mockup rule. */
  .s2-cards::before, .s2-guarantees::before, .s2-tagline::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 1px;
  }
  .s2-cards::before { background: #BAB8B2; }
  .s2-guarantees::before { background: var(--s2-hair-strong); }
  .s2-tagline::before { background: #ACA8A3; }

  /* ---- S1 intro (y95-510): cream fading in from a lighter left edge; photo right ---- */
  .s2-intro {
    overflow: hidden;
    background: linear-gradient(90deg, #F9F5F2 0, #F6F1ED 5.9%, #F3EEEA 11.7%, #F2EDE8 19.5%, #F0EBE6 29.3%);
  }
  .s2-intro-inner { height: calc(415 * var(--u)); }
  .s2-intro-inner > *, .s2-features img, .s2-features li > span, .s2-features li::before { position: absolute; }
  .s2-intro-inner p, .s2-features span { white-space: nowrap; }
  /* K01 is registered to the mockup: identity fit to [896,95,1152,416]; its last row sits under the y510 rule. */
  .s2-photo { left: calc(896 * var(--u)); top: 0; width: calc(1152 * var(--u)); height: calc(416 * var(--u)); margin: 0; }
  .s2-headline { color: var(--s2-head); }
  .s2-intro-body { margin: 0; color: var(--ink); }
  /* Static, so the list does not lie over the photo as a transparent hit-test layer; its icons and
     captions position against the frame. */
  .s2-intro-inner > .s2-features { position: static; display: block; margin: 0; }
  .s2-features li { display: block; }
  .s2-features span { color: var(--s2-caption); }
  /* Icon placements map each file's alpha>64 bbox onto the mockup ink box (scan threshold bg-25). */
  .s2-features img { max-width: none; height: auto; }
  .s2-features li:nth-child(1) img { left: calc(161.4 * var(--u)); top: calc(300.4 * var(--u)); width: calc(33.6 * var(--u)); }
  .s2-features li:nth-child(2) img { left: calc(354.6 * var(--u)); top: calc(301.1 * var(--u)); width: calc(39 * var(--u)); }
  .s2-features li:nth-child(3) img { left: calc(532.4 * var(--u)); top: calc(296.4 * var(--u)); width: calc(25.7 * var(--u)); }
  .s2-features li:nth-child(4) img { left: calc(692 * var(--u)); top: calc(300.5 * var(--u)); width: calc(53.9 * var(--u)); }
  /* Dividers at mockup x281.1, 461.7, 629.3, y413-472. */
  .s2-features li + li::before { content: ""; top: calc(318 * var(--u)); width: 1px; height: calc(59 * var(--u)); background: var(--s2-hair); }
  .s2-features li:nth-child(2)::before { left: calc(280.6 * var(--u)); }
  .s2-features li:nth-child(3)::before { left: calc(461.2 * var(--u)); }
  .s2-features li:nth-child(4)::before { left: calc(628.8 * var(--u)); }

  /* ---- S2 cards (y510-937), split at mockup x530.7, 1023.5, 1492.8 ---- */
  .s2-cards-inner { height: calc(427 * var(--u)); }
  .s2-card { position: absolute; top: 0; height: 100%; padding: 0; text-align: left; border: 0; }
  .s2-card + .s2-card { border-top: 0; }
  .s2-card + .s2-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; width: 1px; }
  .s2-card > *, .s2-entries dt, .s2-entries dd, .s2-entries div + div::before,
  .s2-origins .s2-flag, .s2-origins h3, .s2-origins p { position: absolute; margin: 0; }
  .s2-card p, .s2-card h2, .s2-card h3, .s2-entries dt, .s2-entries dd { white-space: nowrap; }
  .s2-card-title { color: var(--s2-title); }
  .s2-sub { color: var(--ink); }
  .s2-notes, .s2-free, .s2-origins p, .s2-entries dd { color: var(--ink); }

  /* C1: the surface brightens toward the right and darkens into the bottom-left corner. */
  .s2-c1 {
    left: 0; width: calc(530.2 * var(--u)); overflow: hidden;
    background:
      radial-gradient(farthest-side at 0 100%, rgba(150, 120, 95, 0.09), rgba(150, 120, 95, 0)),
      linear-gradient(90deg, #EEE8E2 0, #F2ECE6 30%, #F5EFE9 60%, #F8F2ED 85%, #FCF8F4 100%);
  }
  .s2-dot { vertical-align: 0; }
  /* K02 placement from B1: top-left (4.4, 664.2), 479.1 x 287.6 mockup px; the card clips its foot. */
  .s2-flatlay { left: calc(4.4 * var(--u)); top: calc(154.2 * var(--u)); width: calc(479.1 * var(--u)); max-width: none; height: auto; margin: 0; }

  .s2-c2 { left: calc(530.2 * var(--u)); width: calc(492.8 * var(--u)); background: linear-gradient(180deg, #F1ECE7 0, #F3EEEA 35%, #F4F0EC 70%); }
  .s2-c2::before { background: #B0ACAA; }
  .s2-entries { inset: 0; max-width: none; text-align: left; }
  .s2-entries div { padding: 0; }
  .s2-entries div + div { border-top: 0; }
  .s2-entries dt { color: var(--s2-title); }
  /* Entry hairlines: the darker of each mockup rule's two rows, y721 and y812; x602-907. */
  .s2-entries div + div::before { content: ""; left: calc(71.8 * var(--u)); width: calc(305 * var(--u)); height: 1px; background: var(--s2-hair); }
  .s2-entries div:nth-child(2)::before { top: calc(211 * var(--u)); }
  .s2-entries div:nth-child(3)::before { top: calc(302 * var(--u)); }

  .s2-c3 { left: calc(1023 * var(--u)); width: calc(469.3 * var(--u)); background: linear-gradient(180deg, #F0EBE6 0, #F2EDE8 100%); }
  .s2-c3::before { background: var(--s2-hair-light); }
  /* Dotted rule: 59 square 2px dots at a 5.38px pitch, mockup x1107-1421, y741-742. */
  .s2-c3-body { color: var(--ink); }
  .s2-dots { margin: 0; border: 0; }
  .s2-c3 .s2-sub { margin: 0; }
  .s2-c3 .s2-dots { left: calc(84 * var(--u)); top: calc(231 * var(--u)); width: calc(314 * var(--u)); height: calc(2 * var(--u));
    background: linear-gradient(90deg, var(--s2-dots) 0 calc(2 * var(--u)), transparent 0) 0 0 / calc(5.38 * var(--u)) 100% repeat-x; }
  .s2-leaf { left: calc(303.8 * var(--u)); top: calc(268.8 * var(--u)); width: calc(80.1 * var(--u)); max-width: none; height: auto; margin: 0; }

  .s2-c4 { left: calc(1492.3 * var(--u)); width: calc(555.7 * var(--u)); background: linear-gradient(180deg, #F0EBE6 0, #F2EDE8 100%); }
  .s2-c4::before { background: var(--s2-hair-light); }
  .s2-origins { inset: 0; display: block; max-width: none; margin: 0; }
  .s2-origins li { display: block; }
  .s2-origins h3 { color: var(--s2-label); }
  /* Flags fill their mockup ink boxes: US [1544,645,1627,703], NZ [1545,758,1624,816]. */
  .s2-origin-us .s2-flag { left: calc(51.7 * var(--u)); top: calc(135 * var(--u)); width: calc(83 * var(--u)); height: calc(58 * var(--u)); }
  .s2-origin-nz .s2-flag { left: calc(52.7 * var(--u)); top: calc(248 * var(--u)); width: calc(79 * var(--u)); height: calc(58 * var(--u)); }
  .s2-globe { left: calc(373.5 * var(--u)); top: calc(211.2 * var(--u)); width: calc(153.9 * var(--u)); max-width: none; height: auto; margin: 0; }

  /* ---- S3 guarantees (y937-1078): dividers at mockup x670.8 and 1296.3, y972-1043 ---- */
  .s2-guarantees-inner { display: block; height: calc(141 * var(--u)); }
  .s2-guarantees li { display: block; }
  .s2-guarantees li > *, .s2-ring > *, .s2-guarantees li + li::before { position: absolute; margin: 0; }
  .s2-guarantees h2, .s2-guarantees p { white-space: nowrap; }
  .s2-guarantees h2 { color: var(--s2-title); }
  .s2-guarantees p { color: var(--ink); }
  .s2-guarantees li + li::before { content: ""; top: calc(35 * var(--u)); width: 1px; height: calc(71 * var(--u)); background: var(--s2-hair); }
  .s2-g2::before { left: calc(670.3 * var(--u)); }
  .s2-g3::before { left: calc(1295.8 * var(--u)); }
  .s2-guarantees li > img, .s2-ring img { max-width: none; height: auto; }
  .s2-guarantees .s2-g1 > img { left: calc(135 * var(--u)); top: calc(44 * var(--u)); width: calc(89.4 * var(--u)); }
  .s2-guarantees .s2-ring { position: static; width: auto; }
  .s2-ring img { left: calc(778.5 * var(--u)); top: calc(34.7 * var(--u)); width: calc(75.4 * var(--u)); }
  .s2-ring-num { inset: auto; display: block; color: var(--s2-numeral); }
  .s2-guarantees .s2-g3 > img { left: calc(1373.7 * var(--u)); top: calc(39.9 * var(--u)); width: calc(70.6 * var(--u)); }

  /* ---- S4 tagline strip (y1078-1152) ---- */
  .s2-tagline-inner { height: calc(74 * var(--u)); text-align: left; }
  .s2-tagline-inner span { position: absolute; white-space: nowrap; }
}

/* Per-line tracking where one line of a run sets wider/narrower than the run's first line in the mockup
   (line ink widths from lines.py; first lines are fitted below). letter-spacing does not add up through
   nesting, so each value is the run's fitted tracking plus the line's measured delta. */
@media (min-width: 1100px) {
  .s2-intro-body .s2-l2 { letter-spacing: 0.092em; }
  .s2-intro-body .s2-l3 { letter-spacing: 0.0928em; }
  .s2-features .s2-l2 { letter-spacing: 0.1247em; }
  .s2-notes .s2-l1 { letter-spacing: 0.054em; }
  .s2-notes .s2-dot { margin: 0 calc(2.5 * var(--u)); font-size: 0.8em; }
  .s2-c3 .s2-l2 { letter-spacing: 0.0722em; }
  .s2-free .s2-l2 { letter-spacing: 0.0675em; }
}

/* ---------- Fitted text runs (desktop) ---------- */
@media (min-width: 1100px) {
/* hl: ink [124, 136, 606, 181] */
.s2-headline {
  left: calc(120.63 * var(--u));
  top: calc(32.02 * var(--u));
  font: 300 calc(66.22 * var(--u)) / calc(63 * var(--u)) var(--serif);
  letter-spacing: 0.0019em;
}
/* ibody: ink [124, 267, 524, 286] */
.s2-intro-body {
  left: calc(123.77 * var(--u));
  top: calc(165 * var(--u));
  width: calc(560 * var(--u));
  font: 400 calc(17.52 * var(--u)) / calc(29.3 * var(--u)) var(--sans-body);
  letter-spacing: 0.0998em;
}
/* f1: ink [119, 461, 239, 470]. Captions + C3 body floored at 10px (user decision 2026-10-04,
   contrast/size adjudication): the floor bites below ~1707px (captions) / ~1352px (C3 body). */
.s2-features li:nth-child(1) > span {
  left: calc(78.86 * var(--u));
  top: calc(361.2 * var(--u));
  width: calc(200 * var(--u));
  text-align: center;
  font: 400 max(10px, calc(11.91 * var(--u))) / max(calc(19 * var(--u)), 1.35em) var(--sans);
  letter-spacing: 0.0837em;
}
/* f2: ink [330, 461, 418, 470] */
.s2-features li:nth-child(2) > span {
  left: calc(274.01 * var(--u));
  top: calc(361.59 * var(--u));
  width: calc(200 * var(--u));
  text-align: center;
  font: 400 max(10px, calc(12.09 * var(--u))) / max(calc(19 * var(--u)), 1.35em) var(--sans);
  letter-spacing: 0.0536em;
}
/* f3: ink [497, 461, 598, 470] */
.s2-features li:nth-child(3) > span {
  left: calc(447.74 * var(--u));
  top: calc(361.07 * var(--u));
  width: calc(200 * var(--u));
  text-align: center;
  font: 400 max(10px, calc(11.99 * var(--u))) / max(calc(19 * var(--u)), 1.35em) var(--sans);
  letter-spacing: 0.0982em;
}
/* f4: ink [667, 461, 775, 470] */
.s2-features li:nth-child(4) > span {
  left: calc(621.5 * var(--u));
  top: calc(361.05 * var(--u));
  width: calc(200 * var(--u));
  text-align: center;
  font: 400 max(10px, calc(12.01 * var(--u))) / max(calc(19 * var(--u)), 1.35em) var(--sans);
  letter-spacing: 0.0900em;
}
/* c1t: ink [122, 556, 396, 577] */
.s2-c1 .s2-card-title {
  left: calc(40.07 * var(--u));
  top: calc(36.12 * var(--u));
  width: calc(440 * var(--u));
  text-align: center;
  font: 400 calc(32.73 * var(--u)) / 1.2 var(--serif);
  letter-spacing: 0.0489em;
}
/* c1s: ink [219, 595, 303, 615] */
.s2-c1 .s2-sub {
  left: calc(111.03 * var(--u));
  top: calc(79 * var(--u));
  width: calc(300 * var(--u));
  text-align: center;
  font: italic 400 calc(20.5 * var(--u)) / 1.2 var(--book);
  letter-spacing: 0.0430em;
}
/* c1n: ink [216, 653, 321, 667] */
.s2-notes {
  left: calc(68.79 * var(--u));
  top: calc(117.54 * var(--u));
  width: calc(400 * var(--u));
  text-align: center;
  font: 400 calc(17.7 * var(--u)) / calc(21 * var(--u)) var(--book);
  letter-spacing: 0.0421em;
}
/* c2t: ink [597, 557, 955, 579] */
.s2-c2 .s2-card-title {
  left: calc(15.93 * var(--u));
  top: calc(38.01 * var(--u));
  width: calc(460 * var(--u));
  text-align: center;
  font: 400 calc(32.21 * var(--u)) / 1.2 var(--serif);
  letter-spacing: 0.0147em;
}
/* c2s: ink [670, 595, 876, 615] */
.s2-c2 .s2-sub {
  left: calc(43.25 * var(--u));
  top: calc(81.05 * var(--u));
  width: calc(400 * var(--u));
  text-align: center;
  font: italic 400 calc(19.31 * var(--u)) / 1.2 var(--book);
  letter-spacing: -0.0007em;
}
/* dt1: ink [612, 641, 736, 657] */
.s2-entries div:nth-child(1) dt {
  left: calc(82.2 * var(--u));
  top: calc(126.45 * var(--u));
  font: 500 calc(21.45 * var(--u)) / 1.2 var(--book);
  letter-spacing: 0.0179em;
}
/* dd1: ink [613, 667, 828, 685] */
.s2-entries div:nth-child(1) dd {
  left: calc(83.07 * var(--u));
  top: calc(152.52 * var(--u));
  font: 400 calc(16.46 * var(--u)) / calc(21 * var(--u)) var(--book);
  letter-spacing: 0.0385em;
}
/* dt2: ink [612, 733, 724, 749] */
.s2-entries div:nth-child(2) dt {
  left: calc(82.56 * var(--u));
  top: calc(217.73 * var(--u));
  font: 500 calc(22.22 * var(--u)) / 1.2 var(--book);
  letter-spacing: 0.0051em;
}
/* dd2: ink [613, 760, 860, 777] */
.s2-entries div:nth-child(2) dd {
  left: calc(82.73 * var(--u));
  top: calc(245.83 * var(--u));
  font: 400 calc(16.65 * var(--u)) / calc(21 * var(--u)) var(--book);
  letter-spacing: 0.0250em;
}
/* dt3: ink [613, 826, 740, 848] */
.s2-entries div:nth-child(3) dt {
  left: calc(82.34 * var(--u));
  top: calc(310.46 * var(--u));
  font: 500 calc(21.21 * var(--u)) / 1.2 var(--book);
  letter-spacing: 0.0110em;
}
/* dd3: ink [613, 855, 849, 873] */
.s2-entries div:nth-child(3) dd {
  left: calc(82.53 * var(--u));
  top: calc(339.44 * var(--u));
  font: 400 calc(16.74 * var(--u)) / calc(25 * var(--u)) var(--book);
  letter-spacing: 0.0304em;
}
/* c3t: ink [1103, 557, 1344, 579] */
.s2-c3 .s2-card-title {
  left: calc(1.04 * var(--u));
  top: calc(39.69 * var(--u));
  width: calc(400 * var(--u));
  text-align: center;
  font: 400 calc(32.6 * var(--u)) / calc(36 * var(--u)) var(--serif);
  letter-spacing: 0.0457em;
}
/* c3b: ink [1107, 648, 1347, 665] */
.s2-c3-body {
  left: calc(83.5 * var(--u));
  top: calc(132.96 * var(--u));
  font: 400 max(10px, calc(15.15 * var(--u))) / max(calc(25 * var(--u)), 1.65em) var(--sans-body);
  letter-spacing: 0.0844em;
}
/* c3s: ink [1107, 801, 1182, 815] */
.s2-c3 .s2-sub {
  left: calc(84.25 * var(--u));
  top: calc(285.12 * var(--u));
  font: italic 400 calc(20.2 * var(--u)) / 1.2 var(--book);
  letter-spacing: -0.0113em;
}
/* c3f: ink [1108, 828, 1251, 843] */
.s2-free {
  left: calc(84.15 * var(--u));
  top: calc(311.86 * var(--u));
  font: 400 calc(16.72 * var(--u)) / calc(23 * var(--u)) var(--book);
  letter-spacing: 0.0307em;
}
/* c4t: ink [1547, 556, 1937, 579] */
.s2-c4 .s2-card-title {
  left: calc(1.22 * var(--u));
  top: calc(37.53 * var(--u));
  width: calc(500 * var(--u));
  text-align: center;
  font: 400 calc(32.68 * var(--u)) / 1.2 var(--serif);
  letter-spacing: 0.1148em;
}
/* us: ink [1671, 656, 1707, 671] */
.s2-origin-us h3 {
  left: calc(177.22 * var(--u));
  top: calc(141.11 * var(--u));
  font: 400 calc(20.71 * var(--u)) / 1.2 var(--serif);
  letter-spacing: -0.0347em;
}
/* usd: ink [1672, 683, 1827, 695] */
.s2-origin-us p {
  left: calc(179.03 * var(--u));
  top: calc(169.03 * var(--u));
  font: 400 calc(16.66 * var(--u)) / calc(20 * var(--u)) var(--book);
  letter-spacing: 0.0143em;
}
/* nz: ink [1672, 776, 1819, 791] */
.s2-origin-nz h3 {
  left: calc(178.48 * var(--u));
  top: calc(261.23 * var(--u));
  font: 400 calc(21.03 * var(--u)) / 1.2 var(--serif);
  letter-spacing: 0.0164em;
}
/* nzd: ink [1672, 805, 1763, 818] */
.s2-origin-nz p {
  left: calc(179.04 * var(--u));
  top: calc(290.73 * var(--u));
  font: 400 calc(17.96 * var(--u)) / calc(21 * var(--u)) var(--book);
  letter-spacing: 0.0355em;
}
/* g1t: ink [253, 974, 455, 992] */
.s2-g1 h2 {
  left: calc(251.69 * var(--u));
  top: calc(30.14 * var(--u));
  font: 400 calc(26.54 * var(--u)) / 1.2 var(--serif);
  letter-spacing: 0.0637em;
}
/* g1b: ink [253, 1009, 422, 1024] */
.s2-g1 p {
  left: calc(252.04 * var(--u));
  top: calc(66.35 * var(--u));
  font: 400 calc(18.81 * var(--u)) / calc(25 * var(--u)) var(--book);
  letter-spacing: 0.0339em;
  font-variant-numeric: lining-nums;
}
/* n90: ink [803, 999, 832, 1020] */
.s2-ring-num {
  left: calc(801.38 * var(--u));
  top: calc(52.18 * var(--u));
  font: 400 calc(31.18 * var(--u)) / 1.2 var(--book);
  letter-spacing: 0;
  font-variant-numeric: lining-nums;
}
/* g2t: ink [895, 974, 1166, 993] */
.s2-g2 h2 {
  left: calc(894.54 * var(--u));
  top: calc(30.91 * var(--u));
  font: 400 calc(26.02 * var(--u)) / 1.2 var(--serif);
  letter-spacing: 0.0729em;
  font-variant-numeric: lining-nums;
}
/* g2b: ink [896, 1009, 1060, 1023] */
.s2-g2 p {
  left: calc(895.85 * var(--u));
  top: calc(66.95 * var(--u));
  font: 400 calc(20.3 * var(--u)) / calc(24 * var(--u)) var(--book);
  letter-spacing: 0.0424em;
  font-variant-numeric: lining-nums;
}
/* g3t: ink [1491, 974, 1830, 992] */
.s2-g3 h2 {
  left: calc(1490.25 * var(--u));
  top: calc(31.3 * var(--u));
  font: 400 calc(26.06 * var(--u)) / 1.2 var(--serif);
  letter-spacing: 0.0596em;
}
/* g3b: ink [1492, 1009, 1812, 1028] */
.s2-g3 p {
  left: calc(1491.59 * var(--u));
  top: calc(65.92 * var(--u));
  font: 400 calc(18.83 * var(--u)) / calc(25 * var(--u)) var(--book);
  letter-spacing: 0.0361em;
  font-variant-numeric: lining-nums;
}
/* tag: ink [599, 1109, 1463, 1121] */
.s2-tagline-inner span {
  left: calc(598.53 * var(--u));
  top: calc(27.16 * var(--u));
  font: 400 calc(16.41 * var(--u)) / 1.2 var(--sans);
  letter-spacing: 0.4285em;
}
}

/* 10px caption floor, narrow desktops: floored captions are up to 1.55x the mockup size at 1100, so
   the mockup tracking would push SMALL BATCHES into its dividers and line 2 onto the S2 rule.
   Tighten tracking and leading only where the floor makes them collide (user decision 2026-10-04). */
@media (min-width: 1100px) and (max-width: 1249.98px) {
  /* Even 205u columns over the 40-860u text column (mockup spacing is ~175u, too narrow for 10px caps). */
  /* .s2-intro prefix: must outrank the per-caption .s2-features li:nth-child(n) > span fits. */
  .s2-intro .s2-features li > span, .s2-intro .s2-features li > span .s2-l2 { letter-spacing: 0.035em; line-height: 1.25em; }
  .s2-features li:nth-child(1) > span { left: calc(42.5 * var(--u)); top: calc(359 * var(--u)); }
  .s2-features li:nth-child(1) img { left: calc(125.7 * var(--u)); }
  .s2-features li:nth-child(2) > span { left: calc(247.5 * var(--u)); top: calc(359 * var(--u)); }
  .s2-features li:nth-child(2) img { left: calc(328.0 * var(--u)); }
  .s2-features li:nth-child(3) > span { left: calc(452.5 * var(--u)); top: calc(359 * var(--u)); }
  .s2-features li:nth-child(3) img { left: calc(539.6 * var(--u)); }
  .s2-features li:nth-child(4) > span { left: calc(657.5 * var(--u)); top: calc(359 * var(--u)); }
  .s2-features li:nth-child(4) img { left: calc(730.5 * var(--u)); }
  .s2-features li:nth-child(2)::before { left: calc(245 * var(--u)); }
  .s2-features li:nth-child(3)::before { left: calc(450 * var(--u)); }
  .s2-features li:nth-child(4)::before { left: calc(655 * var(--u)); }
}

/* ---------- Responsive plate (pipeline/apply-responsive-images-site.py) ----------
   .plate is 100vw wide at every width: one band per WebP variant, 1x = the variant covering the band's widest
   viewport, 2x = the smallest variant at least twice that. The shorthand URL above is the fallback for
   browsers without unprefixed image-set(). */
.plate { background-image: image-set(url("../assets/opt/hero-plate-320.webp") 1x, url("../assets/opt/hero-plate-640.webp") 2x); }
@media (min-width: 321px) { .plate { background-image: image-set(url("../assets/opt/hero-plate-400.webp") 1x, url("../assets/opt/hero-plate-800.webp") 2x); } }
@media (min-width: 401px) { .plate { background-image: image-set(url("../assets/opt/hero-plate-480.webp") 1x, url("../assets/opt/hero-plate-960.webp") 2x); } }
@media (min-width: 481px) { .plate { background-image: image-set(url("../assets/opt/hero-plate-640.webp") 1x, url("../assets/opt/hero-plate-1600.webp") 2x); } }
@media (min-width: 641px) { .plate { background-image: image-set(url("../assets/opt/hero-plate-800.webp") 1x, url("../assets/opt/hero-plate-1600.webp") 2x); } }
@media (min-width: 801px) { .plate { background-image: image-set(url("../assets/opt/hero-plate-960.webp") 1x, url("../assets/opt/hero-plate-2240.webp") 2x); } }
@media (min-width: 961px) { .plate { background-image: image-set(url("../assets/opt/hero-plate-1200.webp") 1x, url("../assets/opt/hero-plate-2944.webp") 2x); } }
@media (min-width: 1201px) { .plate { background-image: image-set(url("../assets/opt/hero-plate-1600.webp") 1x, url("../assets/opt/hero-plate-2944.webp") 2x); } }
@media (min-width: 1601px) { .plate { background-image: image-set(url("../assets/opt/hero-plate-2240.webp") 1x, url("../assets/opt/hero-plate-2944.webp") 2x); } }
@media (min-width: 2241px) { .plate { background-image: image-set(url("../assets/opt/hero-plate-2944.webp") 1x, url("../assets/opt/hero-plate-2944.webp") 2x); } }