/* Grand Studio — static export of BUILD · Grand Studio site v2 (OFFICIAL).
   Geometry, colour and type are read directly from the Figma nodes.

   DISPLAY TYPE: Tobias, by Displaay Type Foundry, the face the Figma file
   specifies. Licensed 2026-10-12 for self hosting via @font-face (Displaay licence
   v2.0.8). The licence covers ONE style, SemiBold, and forbids two things: making
   one style artificially from another, and altering, renaming or converting the
   file. So Tobias-SemiBold.woff2 ships exactly as Displaay delivered it, and body
   sets font-synthesis:none below. The classes that ask for Regular (.s7, .s54) or
   italic (.s56, .s88, .s92) therefore render SemiBold upright. Buying those cuts
   needs only their @font-face blocks here; no class changes.
   (Fraunces, OFL, stood in from 2026-09-16 to 2026-10-13.)

   BODY TYPE: Hind, SIL Open Font License 1.1, cleared for self hosting. */

@font-face {
  font-family: 'Tobias';
  src: url(../fonts/Tobias-SemiBold.woff2) format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* hind-latin-ext-400-normal */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/hind-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* hind-latin-400-normal */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/hind-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* hind-latin-ext-500-normal */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/hind-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* hind-latin-500-normal */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/hind-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* hind-latin-ext-600-normal */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/hind-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* hind-latin-600-normal */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/hind-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* hind-latin-ext-700-normal */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/hind-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* hind-latin-700-normal */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/hind-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --font-display: 'Tobias', Georgia, 'Times New Roman', serif;
  --font-body: 'Hind', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --navy: #1b2a33;
  --lime: #c3f53c;
  --cream: #eceae0;
  --cream-green: #f1f6d9;
}

*,*::before,*::after { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--navy); }
body {
  font-family: var(--font-body);
  /* Tobias is licensed in SemiBold only and its licence forbids faking another
     style from it (see the head of this file). Hind ships every weight the site
     uses and no text asks it for italic, so this changes nothing for Hind. */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.page { position:relative; margin:0 auto; overflow:hidden; }
.sec  { position:absolute; left:0; }
/* margin:0 because the headline nodes are <h1>/<h2> since 2026-09-16 (a page of
   absolutely-positioned divs gave search engines no structure). The .sN class
   carries font and size, so the only thing a heading element would change is the
   browser's default margin, which this kills. */
.n    { position:absolute; margin:0; }
.n picture { position:absolute; inset:0; display:block; }
.n picture img { width:100%; height:100%; display:block; }
.n svg { display:block; overflow:visible; }
.n a { color:inherit; text-decoration:none; }
.n a:hover { text-decoration:underline; }

/* Index hero glow: the soft lime light behind the hero graphic. The graphic is
   the client's own SVG (assets/img/hero-funnel.svg, master _source/hero-funnel.svg,
   700x438.3 shown at 660x413.25; since 2026-10-13, in place of the transparent
   PNG hero-flow of the same composition), and has no glow of its own, so the
   glow that the mockup (_source/hero-mockup.jpg) had baked in is rebuilt here. It is a
   Gaussian of lime (#c3f53c) fitted to 2,189 samples of the mockup's background
   where the graphic does not reach: peak 14.6%, centre 1167/647, sigma 193 x
   146px, rms error about one level (2026-09-27). The ellipse spans 3 sigma and
   the stops trace the curve every quarter sigma. .s12 paints it between its
   grain and its gradient; the full-bleed block carries it into the right margin. */
.s12 {
  --glow-stops: rgb(195 245 60 / .1464) 0%, rgb(195 245 60 / .1419) 8.33%, rgb(195 245 60 / .1292) 16.67%,
    rgb(195 245 60 / .1105) 25%, rgb(195 245 60 / .0888) 33.33%, rgb(195 245 60 / .067) 41.67%,
    rgb(195 245 60 / .0475) 50%, rgb(195 245 60 / .0317) 58.33%, rgb(195 245 60 / .0198) 66.67%,
    rgb(195 245 60 / .0116) 75%, rgb(195 245 60 / .0064) 83.33%, rgb(195 245 60 / .0033) 91.67%,
    rgb(195 245 60 / 0) 100%;
  --hero-glow: radial-gradient(579px 437px at 1167px 647px, var(--glow-stops));
}

/* Full-bleed backgrounds (since 2026-09-27). The canvas stays a fixed 1440px
   column, but on a wider window every band tagged .bleed (each section's
   background node, plus the full-width coloured bands and rules inside one)
   copies its own background into the side margins, ::before on the left and
   ::after on the right, so no strip of the body's navy shows. The margin width
   is (body width - 1440px) / 2 in cqw against body, which leaves out the
   scrollbar and so never adds sideways scroll; at 1440px or narrower it is 0
   and the page renders exactly as before. A band gives up its sideways clip so
   the copies can show, and keeps the vertical one. Nothing inside a band
   reaches past the canvas; index S3's overhanging line pattern has its own
   .s1 clip frame for that reason. isolation keeps a nested band's margins
   painted over its parent's. A browser without overflow:clip or container
   units keeps the old letterboxed page. */
@supports (overflow: clip) and (width: 1cqw) {
  body { container-type: inline-size; }
  .page { overflow: visible; }
  .n.bleed { overflow-x: visible; overflow-y: clip; isolation: isolate; }
  .n.bleed::before,
  .n.bleed::after {
    content: ""; position: absolute; top: 0; bottom: 0;
    width: max(0px, (100cqw - 1440px) / 2);
    background: inherit; z-index: -1;
  }
  .n.bleed::before { right: 100%; }
  .n.bleed::after { left: 100%; }
  /* The index hero's glow (see .s12 above) is positioned on the canvas, so
     inherit would repeat it in each margin. The left margin gets grain and
     gradient only; the right one gets the same Gaussian moved 1440px left, so it
     carries on across the canvas's right edge and fades out about 300px later. */
  .n.s12.bleed::before { background: var(--grain), var(--hero-gradient); }
  .n.s12.bleed::after {
    background:
      var(--grain),
      radial-gradient(579px 437px at -273px 647px, var(--glow-stops)),
      var(--hero-gradient);
  }
}

/* Header wordmark -> home. The anchor sits INSIDE the .n node and fills it, so
   the node's Figma geometry is untouched and it stays the containing block for
   `.n picture`. Only transform and opacity animate. The focus ring is drawn as
   an inset bar because the 162x39 `.s1` wrapper is overflow:hidden and would
   clip an outline; the navy hairline keeps it legible on the cream-green 404
   header as well as the navy ones. */
.n a.wordmark-link { position:absolute; inset:0; display:block;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s cubic-bezier(.22,1,.36,1); }
.n a.wordmark-link:hover { text-decoration:none; transform:translateY(-2px); opacity:0.86; }
.n a.wordmark-link:active { transform:translateY(0); opacity:0.7; }
.n a.wordmark-link:focus-visible { outline:none; }
.n a.wordmark-link:focus-visible::after { content:""; position:absolute;
  left:0; right:0; bottom:-2px; height:2px;
  background:var(--lime); box-shadow:0 0 0 1px rgba(27,42,51,0.85); }
@media (prefers-reduced-motion: reduce) { .n a.wordmark-link { transition:none; } }
/* 404's header is cream-green, where the white wordmark all but vanished
   (client's call, 2026-09-28: darken it in CSS). The picture paints navy
   through the wordmark's own alpha as a mask, so the shape is exact and the
   colour is the page's ink; the img stays, transparent, for its alt text. The
   mask sits on the picture, not the link, so the focus bar still shows. */
.sec[data-section="PAGE · 404"] .wordmark-link picture {
  background:var(--navy);
  -webkit-mask:url(../img/wordmark.png) center / contain no-repeat;
          mask:url(../img/wordmark.png) center / contain no-repeat;
}
.sec[data-section="PAGE · 404"] .wordmark-link img { opacity:0; }

/* CTA pills. The pill's background and radius live on the .sN box while the link
   sat inside a child text node, so only the words were clickable. The anchor now
   fills the pill box (inset:0, therefore dimensionally the same box) and wraps the
   text node, which keeps every Figma geometry value and data-h untouched and gives
   the link a real accessible name from its own text. Only transform and opacity
   animate. The wash is a ::before so it paints UNDER the anchor, behind the text
   rather than over it; the pill's existing overflow:hidden clips it to the radius. */
.n a.cta { position:absolute; inset:0; display:block; border-radius:inherit; }
.n a.cta:hover { text-decoration:none; }
.n a.cta:focus-visible { outline:none; box-shadow:inset 0 0 0 2px var(--navy); }
.n.cta-dark  a.cta:focus-visible,
.n.cta-ghost a.cta:focus-visible { box-shadow:inset 0 0 0 2px var(--lime); }

.n.cta-pill { transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1); }
.n.cta-pill::before { content:""; position:absolute; inset:0; opacity:0;
  background:#fff; pointer-events:none;
  transition: opacity .28s cubic-bezier(.22,1,.36,1); }
.n.cta-ghost::before { background:var(--lime); }

/* Hover and keyboard focus lift the pill 3px onto a soft shadow; pressing sets it
   back down onto a tight one, quickly, so the click lands. The shadow is a black
   alpha rather than a palette colour because most pills sit on navy or on the
   near-black footer, where a navy shadow disappears. The outlined nav pill has no
   fill for a shadow to sit under, so it lifts on its lime wash alone. */
.n.cta-pill:has(a.cta:hover),
.n.cta-pill:has(a.cta:focus-visible) { transform:translateY(-3px); }
.n.cta-pill:not(.cta-ghost):has(a.cta:hover),
.n.cta-pill:not(.cta-ghost):has(a.cta:focus-visible) { box-shadow:0 12px 22px -10px rgba(0,0,0,.38); }
.n.cta-pill:has(a.cta:hover)::before  { opacity:.14; }
.n.cta-ghost:has(a.cta:hover)::before { opacity:.16; }
.n.cta-pill:has(a.cta:active) { transform:translateY(0); transition-duration:.08s; }
.n.cta-pill:not(.cta-ghost):has(a.cta:active) { box-shadow:0 3px 8px -4px rgba(0,0,0,.38); }
.n.cta-pill:has(a.cta:active)::before  { opacity:.2; }
.n.cta-ghost:has(a.cta:active)::before { opacity:.24; }
/* White over the near-black .s86 fill turns grey fast (.14 read as #373737), so the
   dark pills keep a faint wash and let the lift and shadow carry the hover. */
.n.cta-dark:has(a.cta:hover)::before  { opacity:.06; }
.n.cta-dark:has(a.cta:active)::before { opacity:.1; }

/* Eleven pills sit in a Figma row wrapper exactly as tall as the pill: the nav
   row on every page, plus index's hero row. The wrapper's .s1
   overflow:hidden would cut off the lift and the shadow, so those rows, and the
   nav's outer row around them, let overflow show. Nothing else in them overflows
   (npm run measure reports no clipped text), so at rest the page is unchanged. */
.n.s1:has(> .n.cta-pill),
.n.s1:has(> .n.s1 > .n.cta-pill) { overflow:visible; }

/* Plain text links: nav, footer and the mailto lines. The pills opt out via
   .cta and the header wordmark via .wordmark-link, since both draw their own
   states. The underline already existed on hover; it is only given a real
   thickness and offset here so it reads as typography rather than a default.

   Focus is a 2px underline in currentColor. currentColor because these links
   run across navy, cream and cream-green surfaces, and a link's own colour is
   by definition legible on the surface it sits on, so one rule covers every
   background without inventing a colour per context. An underline rather than
   an outline because these anchors sit inside overflow:hidden layout boxes
   that clip an outline at the leftmost node, which is the same reason the
   wordmark above draws an inset bar. */
.n a:not(.cta):not(.wordmark-link) {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.n a:not(.cta):not(.wordmark-link):focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* Links inside running prose (the privacy policy's .s174 paragraphs, since
   2026-10-13) sit mid-sentence, where colour alone cannot mark them, so they
   carry a faint underline at rest that darkens on hover. Nav and footer links
   stand alone and keep the hover-only underline above. */
.n.s174 a:not(.cta) { text-decoration:underline; text-decoration-color:rgba(27,42,51,0.35); }
.n.s174 a:not(.cta):hover { text-decoration-color:currentColor; }

/* Footer social icons. Facebook and Instagram link out since 2026-09-16; LinkedIn,
   YouTube and TikTok have no URL yet, so they stay inert and get no state. The
   anchor fills the 30px icon node the way the wordmark link does, so the icon's
   Figma geometry is untouched. The row is a 198x30 box with overflow:hidden, so
   nothing may move or draw outside the circle: hover fills the disc lime and
   turns the glyph navy instead of lifting, and focus adds a navy inner ring so a
   keyboard user can tell focus from hover. Only the glyph paths (inside .s1)
   recolour; the ring path is lime already and simply joins the fill. */
.n a.social-link { position:absolute; inset:0; display:block; border-radius:50%;
  transition: background-color .2s cubic-bezier(.22,1,.36,1); }
.n a.social-link .n.s1 path { transition: fill .2s cubic-bezier(.22,1,.36,1); }
.n a.social-link:hover,
.n a.social-link:focus-visible { background-color:var(--lime); }
.n a.social-link:hover .n.s1 path,
.n a.social-link:focus-visible .n.s1 path { fill:var(--navy); }
.n a.social-link:focus-visible { outline:none; box-shadow:inset 0 0 0 2px var(--navy); }
.n a.social-link:active { opacity:.8; }
@media (prefers-reduced-motion: reduce) {
  .n a.social-link, .n a.social-link .n.s1 path { transition:none; }
}

/* Photo cards: on hover the picture zooms into its frame and drifts against the
   pointer, like a print moving behind a window. These are NOT links: no cursor
   change, no lift, no shadow, because a stronger cue would promise navigation
   that does not exist. The card is already overflow:hidden around one picture
   node, so the motion is clipped and no sibling geometry moves.

   assets/js/parallax.js only reports where the pointer is, as --img-x and --img-y
   from -1 to 1 across the card; the zoom, the distance and the easing live here.
   Without the script, or on touch, the card still zooms and simply does not
   drift. At scale 1.1 every card keeps at least 10.8px of picture beyond each
   side and 15.2px above and below (index's third mirror card is the tightest),
   so 10px and 14px of drift never uncover the card behind it. The transition is
   what smooths the pointer: each move re-aims it from wherever the picture is. */
.n.img-zoom > .n { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.n.img-zoom:hover > .n {
  transform: translate(calc(var(--img-x, 0) * -10px), calc(var(--img-y, 0) * -14px)) scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .n.cta-pill, .n.cta-pill::before, .n.img-zoom > .n { transition:none; }
  .n.img-zoom:hover > .n { transform:none; }
}

.s1{overflow:hidden}
.s2{font-family:var(--font-body);font-weight:400;font-size:15.5px;color:#9ea8ad}
.s3{font-family:var(--font-body);font-weight:600;font-size:15px;color:#c3f53c}
.s4{border:1px solid #c3f53c;border-radius:40px;overflow:hidden}
.s5{font-family:var(--font-body);font-weight:700;font-size:13px;color:#9ea8ad;letter-spacing:0.14em}
.s6{font-family:var(--font-display);font-weight:600;font-size:96px;color:#eceae0;letter-spacing:-0.02em}
.s7{font-family:var(--font-display);font-weight:400;font-size:44px}
.s8{font-family:var(--font-body);font-weight:400;font-size:20px;color:#eceae0}
.s9{font-family:var(--font-body);font-weight:600;font-size:16px;color:#1b2a33}
.s10{background:#c3f53c;border-radius:34px;overflow:hidden}
.s11{font-family:var(--font-body);font-weight:600;font-size:16px;color:#eceae0}
.s12{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .15 0 0 0 -.075'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");--hero-gradient:linear-gradient(180deg, #1b2a33 0%, #121e26 100%);background:var(--grain),var(--hero-glow),var(--hero-gradient);overflow:hidden}
.s13{font-family:var(--font-body);font-weight:700;font-size:46px;color:#1a1a1a;letter-spacing:-0.01em}
.s14{background:#35521f;overflow:hidden}
.s15{border-radius:3px;overflow:hidden}
.s16{font-family:var(--font-body);font-weight:400;font-size:17px;color:#1a1a1a}
.s17{font-family:var(--font-display);font-weight:600;font-size:46px;color:#1b2a33}
.s18{background:#c3f53c;overflow:hidden}
.s19{font-family:var(--font-body);font-weight:400;font-size:19px;color:#1a1a1a}
.s20{background:#e5ecc6}
.s21{font-family:var(--font-body);font-weight:700;font-size:46px;color:#eceae0;letter-spacing:-0.01em}
.s22{background:rgba(236,234,224,0.4);overflow:hidden}
.s23{background:#ffffff;border-radius:6px;overflow:hidden}
.s24{font-family:var(--font-display);font-weight:600;font-size:46px;color:#1a1a1a}
.s25{background:#c3f53c;border-radius:3px;overflow:hidden}
.s26{font-family:var(--font-display);font-weight:600;font-size:46px;color:#eceae0}
.s27{font-family:var(--font-body);font-weight:400;font-size:17px;color:#b8c2c4}
.s28{font-family:var(--font-body);font-weight:700;font-size:17px;color:#eceae0}
.s29{background:#1b2a33;overflow:hidden}
.s30{font-family:var(--font-display);font-weight:600;font-size:46px;color:#1b2a33}
.s31{font-family:var(--font-body);font-weight:400;font-size:18px;color:#c2c9cc}
.s32{font-family:var(--font-display);font-weight:600;font-size:58px;color:#c3f53c}
.s33{font-family:var(--font-body);font-weight:600;font-size:24px;color:#eceae0}
.s34{font-family:var(--font-body);font-weight:400;font-size:15.5px;color:#c2c9cc}
.s35{border-top:1px solid #4d473d;overflow:hidden}
.s36{border-top:1px solid rgba(195,245,60,0.9);overflow:hidden}
.s37{font-family:var(--font-body);font-weight:700;font-size:19px;color:#eceae0}
.s38{background:#c3f53c}
.s39{background:#131e25;overflow:hidden}
.s40{font-family:var(--font-body);font-weight:700;font-size:13px;color:#eceae0;letter-spacing:0.08em}
.s41{background:#1b2a33;border-radius:2px;overflow:hidden}
.s42{font-family:var(--font-body);font-weight:600;font-size:16px;color:rgba(27,42,51,0.8)}
.s43{font-family:var(--font-body);font-weight:700;font-size:39px;color:#1a1a1a;letter-spacing:-0.01em}
.s44{font-family:var(--font-display);font-weight:600;font-size:44px}
.s45{border-radius:4px;overflow:hidden}
.s46{font-family:var(--font-body);font-weight:400;font-size:17px;color:#1a1a1a}
.s47{background:#ffffff;border:1px solid rgba(27,42,51,0.12);border-radius:6px;overflow:hidden}
.s48{background:rgba(27,42,51,0.2)}
.s49{font-family:var(--font-display);font-weight:600;font-size:96px;color:#35521f}
.s50{font-family:var(--font-body);font-weight:400;font-size:15px;color:#6b6b6b}
.s51{background:rgba(27,42,51,0.18)}
.s52{background:rgba(27,42,51,0.15)}
.s53{font-family:var(--font-display);font-weight:600;font-size:140px;color:#2e5229}
.s54{font-family:var(--font-display);font-weight:400;font-size:36px;color:#1b2a33}
.s55{font-family:var(--font-body);font-weight:600;font-size:14px;color:rgba(27,42,51,0.7);letter-spacing:0.06em}
.s56{font-family:var(--font-display);font-weight:500;font-style:italic;font-size:32px;color:#1a1a1a}
.s57{background:#f1f6d9;overflow:hidden}
.s58{font-family:var(--font-display);font-weight:600;font-size:46px}
.s59{font-family:var(--font-body);font-weight:400;font-size:17px;color:#c2c9cc}
.s60{font-family:var(--font-body);font-weight:700;font-size:19px;color:#eceae0;letter-spacing:0.08em}
.s61{font-family:var(--font-body);font-weight:600;font-size:16px}
.s62{font-family:var(--font-body);font-weight:700;font-size:19px;color:#1a1a1a}
.s63{background:#faf7f2;border:1px solid rgba(27,42,51,0.12);border-radius:4px;overflow:hidden}
.s64{font-family:var(--font-display);font-weight:600;font-size:27px;color:#1a1a1a}
.s65{font-family:var(--font-body);font-weight:700;font-size:15px;color:#1b2a33}
.s66{background:#c3f53c;border-radius:2px;overflow:hidden}
.s67{font-family:var(--font-body);font-weight:700;font-size:17px;color:#1a1a1a}
.s68{border-style:solid;border-color:rgba(27,42,51,0.25);border-width:1px 0px 0px 0px;overflow:hidden}
.s69{font-family:var(--font-body);font-weight:700;font-size:46px;color:#1b2a33;letter-spacing:-0.01em}
.s70{background:rgba(27,42,51,0.5)}
.s71{font-family:var(--font-display);font-weight:600;font-size:25px;color:#1b2a33}
.s72{font-family:var(--font-body);font-weight:400;font-size:17px;color:rgba(27,42,51,0.88)}
.s73{font-family:var(--font-body);font-weight:700;font-size:17px;color:#1b2a33}
.s74{font-family:var(--font-display);font-weight:600;font-size:25px;color:#eceae0}
.s75{font-family:var(--font-body);font-weight:400;font-size:17px;color:#d1dbc7}
.s76{font-family:var(--font-body);font-weight:700;font-size:17px;color:#eceae0}
.s77{background:#17301a;border-radius:4px;overflow:hidden}
.s78{background:#e5ecc6;overflow:hidden}
.s79{font-family:var(--font-body);font-weight:700;font-size:40px;color:#1a1a1a;letter-spacing:-0.01em}
.s80{font-family:var(--font-display);font-weight:600;font-size:26px;color:#eceae0}
.s81{font-family:var(--font-display);font-weight:600;font-size:62px;color:#c3f53c}
.s82{background:#1b2a33;border:1px solid rgba(27,42,51,0.28);border-radius:6px;overflow:hidden}
.s83{font-family:var(--font-body);font-weight:700;font-size:12.5px;color:#35521f;letter-spacing:0.14em}
.s84{font-family:var(--font-display);font-weight:600;font-size:26px;color:#1a1a1a}
.s85{font-family:var(--font-body);font-weight:400;font-size:17px;color:#6b6b6b}
.s86{background:#1a1a1a;border-radius:34px;overflow:hidden}
.s87{background:#f1f6d9;border:1.5px solid #1a1a1a;border-radius:12px;overflow:hidden}
.s88{font-family:var(--font-display);font-weight:500;font-style:italic;font-size:20px;color:#1a1a1a}
.s89{font-family:var(--font-body);font-weight:600;font-size:16px;color:#f1f6d9}
.s90{font-family:var(--font-body);font-weight:600;font-size:16px;color:#35521f}
.s91{font-family:var(--font-body);font-weight:700;font-size:13px;color:#c3f53c;letter-spacing:0.16em}
.s92{font-family:var(--font-display);font-weight:600;font-style:italic;font-size:52px;color:#eceae0}
.s93{font-family:var(--font-body);font-weight:400;font-size:18px;color:#9ea8ad}
.s94{background:#29363d;overflow:hidden}
.s95{font-family:var(--font-body);font-weight:700;font-size:15px;color:#c3f53c}
.s96{font-family:var(--font-body);font-weight:400;font-size:16px;color:#eceae0}
.s97{font-family:var(--font-body);font-weight:400;font-size:13.5px;color:#9ea8ad}
.s98{font-family:var(--font-body);font-weight:600;font-size:13px;color:#c2c9cc;letter-spacing:0.08em}
.s99{font-family:var(--font-display);font-weight:600;font-size:68px;color:#eceae0}
.s100{font-family:var(--font-body);font-weight:400;font-size:19px;color:#c2c9cc}
.s101{font-family:var(--font-body);font-weight:600;font-size:12px;color:#1b2a33;letter-spacing:0.08em;opacity:0.55}
.s102{font-family:var(--font-display);font-weight:600;font-size:40px;color:#1b2a33}
.s103{font-family:var(--font-body);font-weight:400;font-size:17px;color:#1b2a33}
.s104{font-family:var(--font-body);font-weight:600;font-size:17px;color:#1b2a33}
.s105{font-family:var(--font-display);font-weight:600;font-size:62px;color:#1b2a33}
.s106{font-family:var(--font-body);font-weight:400;font-size:16px;color:#1b2a33}
.s107{font-family:var(--font-body);font-weight:400;font-size:15px;color:#1b2a33;opacity:0.7}
.s108{font-family:var(--font-body);font-weight:400;font-size:16px;color:#1b2a33}
.s109{background:#ffffff;border:1px solid rgba(27,42,51,0.14);border-radius:6px;overflow:hidden}
.s110{font-family:var(--font-body);font-weight:600;font-size:12px;color:#c2c9cc;letter-spacing:0.08em}
.s111{font-family:var(--font-display);font-weight:600;font-size:40px;color:#eceae0}
.s112{font-family:var(--font-body);font-weight:400;font-size:17px;color:#c2c9cc}
.s113{font-family:var(--font-body);font-weight:600;font-size:17px;color:#c2c9cc}
.s114{font-family:var(--font-display);font-weight:600;font-size:62px;color:#c3f53c}
.s115{font-family:var(--font-body);font-weight:400;font-size:16px;color:#c2c9cc}
.s116{font-family:var(--font-body);font-weight:400;font-size:15px;color:#c2c9cc}
.s117{background:rgba(236,234,224,0.25)}
.s118{font-family:var(--font-body);font-weight:400;font-size:16px;color:#dbe0e3}
.s119{background:#1b2a33;border-radius:6px;overflow:hidden}
.s120{font-family:var(--font-body);font-weight:700;font-size:19px;color:#1b2a33}
.s121{font-family:var(--font-display);font-weight:600;font-size:24px;color:#1b2a33}
.s122{border-style:solid;border-color:rgba(27,42,51,0.15);border-width:1px 0px 0px 0px;overflow:hidden}
.s123{font-family:var(--font-display);font-weight:600;font-size:28px;color:#1b2a33}
.s124{border:1px solid rgba(27,42,51,0.35);border-radius:6px;overflow:hidden}
.s125{font-family:var(--font-display);font-weight:600;font-size:48px;color:#eceae0}
.s126{font-family:var(--font-body);font-weight:700;font-size:17px;color:#1b2a33}
.s127{background:#c3f53c;border-radius:100px;overflow:hidden}
.s128{font-family:var(--font-body);font-weight:700;font-size:13px;color:#1b2a33;letter-spacing:0.08em}
.s129{font-family:var(--font-body);font-weight:600;font-size:16px;color:#c2c9cc}
.s130{font-family:var(--font-display);font-weight:600;font-size:54px;color:#eceae0}
.s131{font-family:var(--font-body);font-weight:600;font-size:11px;color:#c2c9cc;letter-spacing:0.08em}
.s132{font-family:var(--font-body);font-weight:400;font-size:16px;color:#eceae0}
.s133{font-family:var(--font-body);font-weight:700;font-size:30px;color:#1b2a33;letter-spacing:-0.01em}
.s134{font-family:var(--font-body);font-weight:400;font-size:18px;color:#1b2a33}
.s135{font-family:var(--font-body);font-weight:700;font-size:40px;color:#1b2a33;letter-spacing:-0.01em}
.s136{font-family:var(--font-body);font-weight:400;font-size:19px;color:#1b2a33}
.s137{font-family:var(--font-body);font-weight:600;font-size:13px;color:#c3f53c;letter-spacing:0.08em}
.s138{font-family:var(--font-display);font-weight:600;font-size:62px;color:#eceae0}
.s139{background:rgba(236,234,224,0.4)}
.s140{font-family:var(--font-display);font-weight:600;font-size:30px;color:#eceae0}
.s141{font-family:var(--font-display);font-weight:600;font-size:34px;color:#c3f53c}
.s142{font-family:var(--font-body);font-weight:700;font-size:18px;color:#eceae0}
.s143{font-family:var(--font-body);font-weight:400;font-size:16px;color:#c2c9cc}
.s144{border-style:solid;border-color:rgba(236,234,224,0.25);border-width:1px 0px 0px 0px;overflow:hidden}
.s145{font-family:var(--font-body);font-weight:400;font-size:15.5px;color:#1b2a33}
.s146{font-family:var(--font-body);font-weight:600;font-size:15px;color:#1b2a33}
.s147{font-family:var(--font-display);font-weight:600;font-size:120px;color:#1b2a33}
.s148{font-family:var(--font-display);font-weight:600;font-size:32px;color:#eceae0}
.s149{font-family:var(--font-display);font-weight:600;font-size:32px;color:#1b2a33}
.s150{font-family:var(--font-body);font-weight:700;font-size:17px;color:#2e5229}
.s151{border-style:solid;border-color:rgba(27,42,51,0.18);border-width:1px 0px 0px 0px;overflow:hidden}
.s152{font-family:var(--font-body);font-weight:600;font-size:11px;color:#1b2a33;letter-spacing:0.08em;opacity:0.55}
.s153{font-family:var(--font-display);font-weight:600;font-size:44px;color:#35521f}
.s154{font-family:var(--font-body);font-weight:400;font-size:15.5px;color:#1b2a33}
.s155{font-family:var(--font-display);font-weight:600;font-size:27px;color:#eceae0}
.s156{font-family:var(--font-body);font-weight:600;font-size:24px;color:#1b2a33}
.s157{font-family:var(--font-display);font-weight:600;font-size:27px;color:#1b2a33}
.s158{font-family:var(--font-body);font-weight:400;font-size:15.5px;color:#9ea8ad}
.s159{font-family:var(--font-body);font-weight:600;font-size:16px;color:#c3f53c}
.s160{font-family:var(--font-body);font-weight:600;font-size:12px;color:#1b2a33;letter-spacing:0.08em}
.s161{background:rgba(27,42,51,0.15);overflow:hidden}
.s162{font-family:var(--font-body);font-weight:400;font-size:17px;color:#1b2a33}
.s163{font-family:var(--font-body);font-weight:700;font-size:17px;color:#35521f}
.s164{font-family:var(--font-display);font-weight:600;font-size:40px;color:#c3f53c}
.s165{background:rgba(236,234,224,0.25);overflow:hidden}
.s166{font-family:var(--font-body);font-weight:400;font-size:17px;color:#eceae0}
.s167{font-family:var(--font-body);font-weight:700;font-size:17px;color:#c3f53c}
.s168{background:#1b2a33;border:1px solid rgba(27,42,51,0.14);border-radius:6px;overflow:hidden}
.s169{font-family:var(--font-display);font-weight:600;font-size:56px;color:#eceae0}
.s170{font-family:var(--font-body);font-weight:700;font-size:13px;color:#8c590d;letter-spacing:0.06em}
.s171{font-family:var(--font-body);font-weight:400;font-size:16px;color:#734d0d}
.s172{background:#fff5d9;border:1px solid #cc8c26;border-radius:4px;overflow:hidden}
.s173{font-family:var(--font-display);font-weight:600;font-size:26px;color:#1b2a33}
.s174{font-family:var(--font-body);font-weight:400;font-size:17px;color:#1b2a33}
.s175{padding-left:20px}

/* Phone layout (since 2026-09-28; index.html is the pilot). A page opts in with
   two changes: <meta name="viewport" content="width=device-width"> instead of
   width=1440, and <body class="fluid">. With no initial-scale, a touch screen
   of 1024px or wider still shrinks the fixed canvas to fit, exactly as before,
   and nothing below matches there; the 1440px render is untouched.

   The body class keeps a page that has not been checked yet out of this
   block: a desktop browser ignores the viewport tag, so a narrow desktop
   window would otherwise reflow every page. @scope adds no specificity, and a
   browser without it keeps the shrunk-to-fit canvas of before.

   Below 1024px every .n leaves its absolute Figma box and joins normal flow.
   The inline left/top/width/height/line-height are overridden with !important
   (only that beats an inline style); groups become flex columns; empty .s1
   spacers disappear, so all rhythm comes from the scales below. Copy, colour,
   faces and images are the desktop's; only composition and type size change.

   Type, 1.25 steps: 13 15 17 21 26 33 41 52 (the hero headline fits the width).
     Answers (Tobias, lime highlight) at 33 outrank questions (Hind bold) at 26.
   Space, 8px grid: section padding 64 / between blocks 24 / paragraphs 16 /
     title to rule 16 / rule to content 32 / above a button 32 / a section's next part 48.
   Column: 24px gutters, at most 560px wide, so body lines stay under ~75 characters.

   Hooks: .m-statement marks an answer; .m-keep marks a box that keeps its
   desktop drawing (the footer's social row); .m-menu is the header's menu
   button, which exists only here. */
.m-menu { display:none; }
@media (max-width: 1023px) {
@scope (body.fluid) {
  :scope { --m-gutter:24px; --m-col:560px; --m-answer:clamp(30px, 8.5vw, 44px); }
  .page { width:auto !important; height:auto !important; overflow-x:clip; }
  .sec  { position:relative; top:auto !important; width:auto !important; height:auto !important; }

  /* Resets, in :where() so they weigh no more than .n and every rule after
     them wins; without that the first attempt came out inside out. */
  .n:where(:not(.m-keep .n)) {
    position:relative; left:auto !important; top:auto !important;
    line-height:1.6 !important; white-space:normal !important;
    min-width:0; max-width:100%; overflow-wrap:break-word; text-wrap:pretty;
  }
  .n:where(:not(:empty, .m-keep, .m-keep .n)) { width:auto !important; height:auto !important; }
  .n.s1:empty { display:none; }
  /* Groups: 24 between blocks; a group of text alone sets paragraphs 16 apart. */
  .n:where(:has(> .n):not(.m-keep, .m-keep .n)) { display:flex; flex-direction:column; gap:24px; }
  .n:where(:has(> .n):not(:has(> .n > .n, > .n > a > .n, > .n.s0), .m-keep, .m-keep .n)) { gap:16px; }

  /* The column. On index each section's background node is one. The other
     pages have a single PAGE section whose background node stacks full-width
     bands (the header, then each coloured or plain band); there each band is
     a column, and the rules below reach both through :is(.sec > .n.bleed, .sec[data-section^="PAGE"] > .n.bleed > .n). */
  .sec > .n.bleed { padding:64px max(var(--m-gutter), (100% - var(--m-col)) / 2); }
  .sec[data-section^="PAGE"] > .n.bleed { padding:0; gap:0; }
  .sec[data-section^="PAGE"] > .n.bleed > .n { padding:64px max(var(--m-gutter), (100% - var(--m-col)) / 2); }
  .sec[data-section^="PAGE"] > .n.bleed > .n:first-child { padding-top:16px; }
  .page .n.bleed:empty { position:absolute; top:0 !important; left:0 !important; width:100% !important; }
  /* Section title: the question, its short rule 16 below, the content 32 below that. */
  :is(.sec > .n.bleed, .sec[data-section^="PAGE"] > .n.bleed > .n) > :is(.s14, .s18, .s22, .s70):empty { margin:-8px 0 8px; }
  /* Full-width hairlines inside a section sit 32 from what they divide. */
  :is(.sec > .n.bleed, .sec[data-section^="PAGE"] > .n.bleed > .n) > :is(.s48, .s52, .s94):empty { margin-block:8px; }

  /* Pictures show at their own proportions (each matches its desktop frame
     within 1%); photo cards keep their desktop frame and crop. */
  .page .n.s0 > picture { position:relative; }
  .page .n.s0 > picture img { height:auto; }
  .page .n.img-zoom { flex:none; }
  .page .n.img-zoom > .n.s0 { position:absolute; top:0 !important; left:0 !important; width:100% !important; height:100% !important; }
  .page .n.img-zoom > .n.s0 > picture { position:absolute; }
  .page .n.img-zoom > .n.s0 > picture img { height:100%; }
  .page .n.img-zoom:hover > .n { transform:none; }
  /* reel-conversation: 1.15x and top-anchored, so its burned-in subtitle stays out of frame. */
  .page .n.img-zoom > .n.s0:has(img[src*="reel-conversation"]) { left:-7.7% !important; width:115.4% !important; height:115.4% !important; max-width:none; }
  /* Decoration (alt="") has no room here. */
  .page .n.s1:has(> .n.s0 img[alt=""]) { display:none; }

  /* Pills size themselves from their label; 32 above each. */
  .page .n.cta-pill { width:fit-content !important; height:auto !important; align-self:flex-start; flex:none; }
  .n.cta-pill > a.cta { position:relative; padding:18px 32px; }
  .n.cta-pill > a.cta > .n { white-space:nowrap !important; line-height:1.5 !important; }
  /* :where() keeps the exclusions weightless, so the header panel's column rule still wins. */
  .page .n:where(:not(.bleed, .sec[data-section^="PAGE"] > .n.bleed > .n)):has(> .n.cta-pill) { flex-direction:row; flex-wrap:wrap; align-items:center; gap:16px 24px; }
  :is(.sec > .n.bleed, .sec[data-section^="PAGE"] > .n.bleed > .n) > .n.cta-pill,
  :is(.sec > .n.bleed, .sec[data-section^="PAGE"] > .n.bleed > .n) > .n:has(> .n.cta-pill) { margin-top:8px; }

  /* Header: the wordmark and a menu button on one row; the links fold into a
     panel under them, opened by the button (assets/js/menu.js). The button
     ships hidden, so without the script the panel simply stays open. The
     outlined pill is left out: the hero's own button repeats it just below. */
  .page .n.s1:has(> .n > .n.s0 > .wordmark-link) {
    flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:center;
    gap:0; margin-bottom:24px; overflow:visible;
  }
  .page .n.s1:has(> .n.s0 > .wordmark-link) { width:clamp(120px, 34vw, 150px) !important; height:44px !important; }
  .page .n.s0:has(> .wordmark-link) { position:absolute; top:0 !important; left:0 !important; width:100% !important; height:100% !important; }
  .m-menu:not([hidden]) {
    display:grid; place-items:center; width:44px; height:44px; margin-right:-11px;
    padding:0; border:0; border-radius:8px; background:none; color:var(--cream); cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .m-menu:hover { color:var(--lime); }
  .m-menu:focus-visible { outline:2px solid var(--lime); outline-offset:0; }
  .m-menu:active { opacity:.7; }
  /* Three bars that turn into a cross while the panel is open. */
  .m-menu-bars, .m-menu-bars::before, .m-menu-bars::after {
    display:block; width:22px; height:2px; border-radius:1px; background:currentColor;
  }
  .m-menu-bars { position:relative; transition:background-color .2s cubic-bezier(.22,1,.36,1); }
  .m-menu-bars::before, .m-menu-bars::after {
    content:""; position:absolute; left:0; transition:transform .3s cubic-bezier(.22,1,.36,1);
  }
  .m-menu-bars::before { transform:translateY(-7px); }
  .m-menu-bars::after  { transform:translateY(7px); }
  .m-menu[aria-expanded="true"] .m-menu-bars { background-color:transparent; }
  .m-menu[aria-expanded="true"] .m-menu-bars::before { transform:rotate(45deg); }
  .m-menu[aria-expanded="true"] .m-menu-bars::after  { transform:rotate(-45deg); }
  @media (prefers-reduced-motion: reduce) {
    .m-menu-bars, .m-menu-bars::before, .m-menu-bars::after { transition:none; }
  }
  /* The panel: the five links, Client login included, one to a row. */
  .page .n.s1:has(> .n.cta-ghost) {
    flex-basis:100%; flex-direction:column; align-items:stretch; gap:0; margin-top:16px;
    border-bottom:1px solid #29363d; overflow:visible;
  }
  .page .n[data-menu="closed"] > .n.s1:has(> .n.cta-ghost) { display:none; }
  .page .n.s1:has(> .n.cta-ghost) > .n:not(.cta-pill) {
    font-size:21px; color:var(--cream); white-space:nowrap !important; border-top:1px solid #29363d;
  }
  .page .n.s1:has(> .n.cta-ghost) > .n:not(.cta-pill) > a { display:block; padding-block:10px; }
  /* 404's header sits on cream-green, so its bars, links and rules go navy. */
  .sec[data-section="PAGE · 404"] .m-menu { color:var(--navy); }
  .sec[data-section="PAGE · 404"] .m-menu:hover { color:#35521f; }
  .sec[data-section="PAGE · 404"] .m-menu:focus-visible { outline-color:var(--navy); }
  .sec[data-section="PAGE · 404"] .n.s1:has(> .n.cta-ghost),
  .sec[data-section="PAGE · 404"] .n.s1:has(> .n.cta-ghost) > .n:not(.cta-pill) { color:var(--navy); border-color:rgba(27,42,51,.15); }
  .page .n.cta-ghost { display:none; }

  /* Answers. Each desktop line stays a line; its phrases wrap as whole units,
     so a lime box never splits and every line sits on one 1.2 pitch. */
  .page .m-statement, .page .m-statement .n.s1 { display:block; font-size:0; }
  .page .m-statement .n:not(.s1) {
    display:inline-block; vertical-align:baseline; margin-right:.25em;
    font-size:var(--m-answer); line-height:1.2 !important; text-wrap:balance;
  }
  .page .m-statement .n:not(.s1) > .n { margin-right:0; }
  .page .m-statement :is(.s18, .s25) { padding:0 .2em; }

  /* Index hero. */
  .s12 { --hero-glow: radial-gradient(75% 17% at 80% 87%, var(--glow-stops)); }
  .sec > .n.s12 { padding-top:16px; padding-bottom:24px; }
  /* The eyebrow breaks after "OWNER-LED" at every width from 390 up (balancing
     it breaks at the hyphen instead). */
  .s12 > .n.s5 { max-width:27em; }
  .s12 > .n.s0 { order:9; margin-top:8px; }
  #t12 { display:none; } /* "See how it works": inert text, stranded under the pill */

  /* Index S2: the four symptoms as a list, woodcut beside its caption; the
     answer after it starts the section's next part. */
  .page .n.s1:has(> .n.s1 > .n.s15.img-zoom) { gap:20px; }
  .page .n.s1:has(> .n.s15.img-zoom) { display:grid; grid-template-columns:96px 1fr; align-items:center; gap:0 20px; }
  .page .n.s15.img-zoom { aspect-ratio:260 / 392; }
  .page .n:has(> .n > .n.s15.img-zoom) ~ .m-statement { margin-top:24px; }

  /* Numbered steps (index S4, booked, how-it-works): the numeral and the
     step's name share a line, the text runs under both. */
  .page .n:has(> .n:has(> .n:is(.s32, .s141, .s153):first-child)) { gap:32px; margin-top:24px; }
  .page .n:has(> .n:is(.s32, .s141, .s153):first-child) {
    flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:8px 16px; padding-top:20px;
  }
  .page .n:has(> .n:is(.s32, .s141, .s153):first-child) > .n:nth-child(n+3) { flex-basis:100%; }

  /* A row that opens with a top rule keeps 20 of air under it. */
  .page :is(.n.s35, .n.s36, .n.s68, .n.s122, .n.s144, .n.s151) { padding-top:20px; }

  /* Chips hug their label instead of stretching across the column. */
  .page :is(.n.s41, .n.s66, .n.s127:not(.cta-pill)) { align-self:flex-start; }
  .page .n.s127:not(.cta-pill) { padding:4px 12px; }
  /* Framed cards and notices take the padding their children's offsets gave. */
  .page :is(.n.s109, .n.s119, .n.s124, .n.s168) { padding:28px 24px; gap:16px; }
  .page .n.s172 { padding:16px 20px; gap:8px; }
  /* A price: currency, figure and "a month and up" on one baseline. */
  .page .n.s1:has(> .n:is(.s81, .s105, .s114)) { flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
  /* Label over value: the pair sits tight; case study's four facts go two-up. */
  .page .n.s1:has(> .n:is(.s131, .s152):first-child) { gap:4px; }
  .page .n.s1:has(> .n.s1 > .n.s131:first-child) { display:grid; grid-template-columns:1fr 1fr; gap:20px 16px; }

  /* Index S5. The case-study label over its meta line; the article's four
     paragraphs as one run; the reels swipe sideways, as they play on a phone;
     the stats an aligned table between the hairlines; the mark over the quote. */
  .page .n.s1:has(> .n.s41) { gap:8px; align-items:flex-start; }
  .page .n.s41 { padding:5px 10px; }
  .page .n.s1:has(> .n.s1 > .n.s46):not(:has(> .n:not(.s1))) { gap:16px; }
  .page .n.s1:has(> .n.s47.img-zoom) {
    flex-direction:row; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  .page .n.s1:has(> .n.s47.img-zoom)::-webkit-scrollbar { display:none; }
  .page .n.s47.img-zoom { flex:0 0 clamp(176px, 50vw, 220px); aspect-ratio:260 / 473; scroll-snap-align:start; }
  @media (max-width: 599px) {
    .page .n.s1:has(> .n.s47.img-zoom) {
      margin-inline:calc(-1 * var(--m-gutter)); padding-inline:var(--m-gutter); scroll-padding-inline:var(--m-gutter);
      max-width:none; /* the reset's 100% would cap the strip at the column */
    }
  }
  .page .n.s1:has(> .n.s51) { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:16px 20px; }
  .page .n.s1:has(> .n.s49) { display:contents; }
  .page .n.s51 { display:none; }
  .page .n.s1:has(> .n.s53) { gap:0; }
  :is(.sec > .n.bleed, .sec[data-section^="PAGE"] > .n.bleed > .n) > .n.s56 { margin-top:24px; }

  /* Index S6: the lime bar sits 24 under the story. */
  .page .n.s38:not(.bleed) { margin-top:8px; }

  /* A title with its lime chip (index S7, how-it-works): title and chip on
     one line, the sentence under both. */
  .page .n:has(> .n:first-child + .n.s66) { flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 12px; padding-top:20px; }
  .page .n:has(> .n:first-child + .n.s66) > .n:nth-child(n+3) { flex-basis:100%; }
  .page .n.s66 { padding:3px 10px; }

  /* Framed panels take the padding their children's offsets used to give. */
  .page .n.s77 { padding:28px 24px; }
  .page .n.s82 { flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:28px 24px; }
  .page .n.s82 > .n.s59 { flex-basis:100%; margin-top:8px; }
  .page .n.s87 { padding:24px; gap:24px; }

  /* Footer. */
  .sec:last-child > .n.bleed { padding-top:56px; padding-bottom:40px; }
  :is(.sec > .n.bleed, .sec[data-section^="PAGE"] > .n.bleed > .n) > .n.s92 { margin-top:-16px; }
  :is(.sec > .n.bleed, .sec[data-section^="PAGE"] > .n.bleed > .n) > .n.s94:empty { margin-block:16px 8px; }
  .page .n.s1:has(> .n.s1 > .n.s95) { display:grid; grid-template-columns:1fr 1fr; gap:32px 20px; }
  .page .n.s1:has(> .n.s1 > .n.s95) > .n:nth-child(3) { grid-column:1 / -1; }
  .page .n.s1:has(> .n.s95) { gap:10px; }
  .page .n.s1:has(> .n.s0 img[alt="Grand Pipeline"]):not(:has(.wordmark-link)) { width:160px !important; }
  .page .n.s1:has(> .n.m-keep) { gap:24px; }
  .page .n.m-keep { order:-1; zoom:1.3; } /* the desktop drawing, at a thumb-sized 39px */
  .page .n.s1:has(> .n.s97) { flex-direction:row; flex-wrap:wrap; gap:4px 20px; }
  .page .n.s1:has(> .n.s97) > .n.s97:first-child { flex-basis:100%; }

  /* Type: every class of 18px and up is mapped here, so none keeps its
     desktop size. Heroes, then answers 33, questions 26, subheads 21, body 17,
     meta 15, caps 13. Page heroes come in two sizes, as on desktop: short
     headlines (68, 62) and long ones (56, 54). */
  .s6  { font-size:clamp(42px, 12.3vw, 72px); line-height:1.2 !important; }
  .s99, .s138 { font-size:clamp(40px, 11vw, 60px); line-height:1.15 !important; text-wrap:balance; }
  .s130, .s169 { font-size:clamp(34px, 9.2vw, 50px); line-height:1.2 !important; text-wrap:balance; }
  .s147 { font-size:clamp(88px, 26vw, 120px); line-height:1 !important; }
  .s7  { font-size:26px; line-height:1.2 !important; }
  .s17, .s24, .s26, .s30, .s44, .s58, .s102, .s111, .s125, .s164 { font-size:var(--m-answer); line-height:1.2 !important; text-wrap:balance; }
  .s13, .s21, .s69, .s79, .s135 { font-size:clamp(26px, 6.7vw, 34px); line-height:1.15 !important; text-wrap:balance; }
  .s123, .s140, .s148, .s149 { font-size:26px; line-height:1.2 !important; text-wrap:balance; }
  .s33, .s43, .s64, .s71, .s74, .s80, .s84, .s121, .s133, .s155, .s156, .s157, .s173 { font-size:21px; line-height:1.25 !important; text-wrap:balance; }
  .s32, .s141, .s153 { font-size:41px; line-height:1 !important; }
  .s49, .s81, .s105, .s114 { font-size:52px; line-height:1 !important; }
  .s53 { font-size:64px; line-height:.75 !important; }
  .s54, .s56 { font-size:26px; line-height:1.3 !important; text-wrap:balance; }
  .s88 { font-size:21px; line-height:1.4 !important; }
  .s92 { font-size:41px; line-height:1.1 !important; }
  .s8, .s19, .s31, .s34, .s37, .s61, .s62, .s93, .s96, .s100, .s120, .s134, .s136, .s142 { font-size:17px; }
  .s2, .s42, .s60 { font-size:15px; }
  .s55, .s83, .s97 { font-size:13px; }
  .s5, .s40, .s42, .s50, .s55, .s60, .s83, .s91, .s97, .s98, .s101, .s107, .s110, .s116, .s128, .s131, .s137, .s152, .s160, .s170 { line-height:1.45 !important; }
}
}

/* Fit pass: tracking corrections that restore Figma's line breaks. */
#t35{letter-spacing:-0.2px}
#t38{letter-spacing:-0.2px}
#t41{letter-spacing:-0.2px}