/* ===== tokens ===== */
/* WiseUp v3 tokens. Built from the reference analysis (reference/image (3).png, image (4).png):
   pure black ground, near-black cards, Inter, one accent. Accent = WiseUp teal #2A9D8F. */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-300_700-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-200_500-normal.woff2') format('woff2');
  font-weight: 200 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Night (default). --bg is pure #000 (was #050506) per explicit request ("in dark mode make
     every section bg black") — every section that reads var(--bg) (html/body in base.css, .hero,
     and now .seq below) goes pure black together, not just near-black. */
  --bg: #000000;
  --card: #0e0e10;
  --card-2: #16161a;
  --card-3: #1d1d22;
  --edge: rgb(255 255 255 / 0.06);
  --edge-2: rgb(255 255 255 / 0.12);
  --ink: #f4f4f5;
  --ink-2: #c8c8cd;
  --mute: #8b8b92;
  --head-a: #ffffff;
  --head-b: #cfcfd4;
  --sub-a: #a3a3a9;
  --sub-b: #6f6f76;

  /* Accent: WiseUp's primary brand color is lime #BEDA52 (2026-10-23 rebrand — was teal #2A9D8F).
     Kept under the --teal* token names rather than renaming every consumer across the codebase
     (buttons, focus rings, nav dots, hover states, ...); "teal" here now means "primary accent". */
  --teal: #beda52;
  --teal-hi: #d8ec8a;
  --teal-lo: #8fa838;
  --on-teal: #11150a;

  /* Hover gradient (hero title, #hero-title .seq__a/b/c in site.css): a light-to-deep sweep
     anchored on the brand teal at its midpoint. */
  --mint: #a8f0dc;
  --teal-green: #2a9d8f;
  --teal-deep: #0b4a42;

  /* Lime: WiseUp's primary brand colour, #BEDA52 (as of the 2026-10-23 rebrand, this is also what
     --teal/--teal-hi/--teal-lo above now resolve to). Kept as its own named token too, for any
     spot that wants lime specifically rather than "whatever --teal currently means". --on-lime is
     near-black: lime is too light for white text to sit on. */
  --lime: #beda52;
  --lime-hi: #d8ec8a;
  --lime-lo: #8fa838;
  --on-lime: #11150a;

  /* Ember: the About/Contact mark-and-seal concept's transient accent — the colour of the burn
     itself, used only in the press/sear reveal (see .mark-in in site.css), never at rest. Keeps
     teal as the one resting accent site-wide; ember only appears mid-motion, then settles to ink. */
  --ember: #e8743c;
  --ember-hi: #ffb27a;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mark: 'Outfit', 'Inter', system-ui, sans-serif;

  --maxw: 1288px;
  --gx: clamp(20px, 3vw, 40px);
  --sec: clamp(96px, 12vw, 180px);
  --r-card: 24px;
  --r-inner: 14px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --head-h: 88px;
}

/* Day: the white mood, applied per section — and, with :root[data-theme='light'], the whole
   page at once (the header's light/dark toggle, see Header.astro + engine/theme.ts).
   [data-mood='day'] (About, Clients, FAQ) is scoped to :root[data-theme='light'] here, not
   unconditional — explicit request, 2026-10-23: "in dark mode make every section bg black".
   Previously these sections stayed permanently white regardless of the toggle; now they only do
   that while the global theme is light (which is the default, so nothing changes there) and fall
   back to :root's own dark tokens once the visitor toggles to dark, same as every other section. */
:root[data-theme='light'] [data-mood='day'], :root[data-theme='light'] {
  --bg: #ffffff;
  --card: #f4f4f6;
  --card-2: #ebebee;
  --card-3: #e2e2e6;
  --edge: rgb(5 5 6 / 0.06);
  --edge-2: rgb(5 5 6 / 0.14);
  --ink: #0b0b0d;
  --ink-2: #2e2e33;
  --mute: #5e5e66;
  --head-a: #050506;
  --head-b: #2d2d33;
  --sub-a: #6d6d74;
  --sub-b: #9a9aa1;
  --teal-hi: #8fa838;
}

/* `.home-lime` (the homepage's experimental per-page teal->lime override) is retired as of the
   2026-10-23 rebrand above — lime is now the --teal* value everywhere, site-wide, so a per-page
   swap is redundant. The class is still applied on the homepage's <Base mainClass="home-lime">
   for now (harmless no-op); remove it there whenever convenient. */

/* ===== base (scoped to .wiseup-home) ===== */
/* Reset + the few rules the motion engine relies on. */
:where(.wiseup-home), :where(.wiseup-home) *, :where(.wiseup-home) *::before, :where(.wiseup-home) *::after { box-sizing: border-box; }
:where(.wiseup-home), :where(.wiseup-home) * { margin: 0; }
/* Zeroes border/background/box-shadow on every element up front so a theme's own generic button/
   list/accordion styling (border colors, fills) can never bleed onto our markup by default; our own
   component rules in site.css declare these explicitly and, coming later in source order, win back
   over this reset wherever we actually want a border, background or shadow. */
:where(.wiseup-home), :where(.wiseup-home) *, :where(.wiseup-home) *::before, :where(.wiseup-home) *::after { border: 0; background: none; box-shadow: none; }
:where(html:has(> body.wiseup-home)) { -webkit-text-size-adjust: none; text-size-adjust: none; background: var(--bg); color: var(--ink); scroll-padding-top: 100px; }
body:where(.wiseup-home) { min-height: 100dvh; font-family: var(--font); font-size: 16px; line-height: 1.6; background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01'; overflow-x: clip; }
:where(.wiseup-home) img, :where(.wiseup-home) svg, :where(.wiseup-home) video { display: block; max-width: 100%; }
:where(.wiseup-home) img { height: auto; }
/* font-family/size/weight set explicitly from our own tokens, not "inherit": inherit resolves
   against whatever the nearest ancestor's computed font happens to be, which on a WordPress
   install can be a theme-set value on some wrapper outside our control. Pulling directly from
   var(--font) means these always match our own design regardless of what sits around them. */
:where(.wiseup-home) input, :where(.wiseup-home) button, :where(.wiseup-home) textarea, :where(.wiseup-home) select { font-family: var(--font); font-size: 1em; color: inherit; }
:where(.wiseup-home) button { background: none; border: 0; cursor: pointer; padding: 0; }
:where(.wiseup-home) a { color: inherit; text-decoration: none; }
:where(.wiseup-home) ul, :where(.wiseup-home) ol { list-style: none; padding: 0; }
:where(.wiseup-home) h1, :where(.wiseup-home) h2, :where(.wiseup-home) h3, :where(.wiseup-home) h4 { font-family: var(--font); font-weight: 400; font-size: 1rem; text-wrap: balance; }
:where(.wiseup-home) p { text-wrap: pretty; }
::selection { background: var(--teal); color: var(--on-teal); }

:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 3px; }
#main:focus { outline: none; }
.skip { position: fixed; left: 16px; top: 12px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--bg);
  font-size: 14px; font-weight: 500; transform: translateY(calc(-100% - 24px)); }
.skip:focus-visible { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

#main { position: relative; z-index: 1; }

/* Engine reveals: hidden only when motion runs; visible without JS and under reduced motion */
.motion [data-split], .motion [data-reveal] { visibility: hidden; }
.split-line { padding-bottom: 0.1em; margin-bottom: -0.1em; }

#cursor { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ===== components ===== */
/* WiseUp v3 homepage. Every component follows the reference (Lunar-style dark studio page):
   black ground, near-black cards with a lit rim, pill eyebrows, product UI as decoration. */

.wrap { width: min(100% - 2 * var(--gx), var(--maxw)); margin-inline: auto; }
.sec { position: relative; padding-block: calc(var(--sec) * 0.6); background: var(--bg); color: var(--ink); }
.card { position: relative; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 0 0 1px var(--edge); }

/* ---------- Buttons: fill sweeps in from the left, arrow slides through ---------- */
.b { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border-radius: var(--r-pill); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
  transition: color 0.45s var(--ease), box-shadow 0.45s var(--ease), scale 0.2s; }
.b::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right center; transition: transform 0.6s var(--ease); }
.b:active { scale: 0.97; }
.b__ico { display: grid; overflow: hidden; }
.b__ico .ico { grid-area: 1 / 1; transition: translate 0.55s var(--ease); }
.b__ico .ico + .ico { translate: -140% 0; }
.b--night { background: linear-gradient(180deg, #17171a, #0b0b0d); color: #f4f4f5; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.09), 0 0 0 1px rgb(255 255 255 / 0.1); }
.b--night::before { background: var(--teal); }
.b--teal { background: var(--teal); color: var(--on-teal); }
.b--teal::before { background: #ffffff; }
.b--block { width: 100%; }
.b--small { min-height: 46px; padding: 0 22px; font-size: 14px; }
/* .b--outline and .b--night.b--glow (one hero rebuild's one-off secondary/glow looks) removed
   2026-10-23 — "use our design systems buttons everywhere" reverted that page back to the two
   standard looks above, so there's nothing left to style here. */
.b:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.b:focus-visible .b__ico .ico:first-child { translate: 140% 0; }
.b:focus-visible .b__ico .ico + .ico { translate: 0 0; }
.b--night:focus-visible { color: var(--on-teal); }
@media (hover: hover) {
  .b:hover::before { transform: scaleX(1); transform-origin: left center; }
  .b:hover .b__ico .ico:first-child { translate: 140% 0; }
  .b:hover .b__ico .ico + .ico { translate: 0 0; }
  .b--night:hover { color: var(--on-teal); }
  .b--teal:hover { color: #050506; }
}

/* ---------- Header ---------- */
/* width/margin/padding match .wrap exactly (not a separate hardcoded max-width) so the header's
   content edges line up with every section's content edges at every viewport width. */
.hd { position: fixed; inset: 18px 0 auto; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  width: min(100% - 2 * var(--gx), var(--maxw)); margin-inline: auto; pointer-events: none; transition: translate 0.55s var(--ease); }
.hd > * { pointer-events: auto; }
.hd.is-hidden { translate: 0 calc(-100% - 90px); } /* clears the docked bar, its extruded edge and shadow */
.hd__logo { justify-self: start; display: grid; place-items: center; }
.hd__logo img { display: block; width: auto; height: clamp(40px, 3.6vw, 54px); transition: rotate 0.5s var(--ease), scale 0.5s var(--ease); }
@media (hover: hover) { .hd__logo:hover img { rotate: -4deg; scale: 1.04; } }
.hd__nav { display: flex; gap: 2px; padding: 6px; border-radius: var(--r-pill); background: rgb(14 14 16 / 0.94);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.08); }
.hd__link { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 17px; border-radius: var(--r-pill); font-size: 14px; color: #c9c9ce;
  transition: background 0.3s, color 0.3s; }
.hd__dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; transition: background 0.3s, scale 0.4s var(--ease); }
.hd__link.is-current { color: #fff; background: rgb(255 255 255 / 0.06); }
.hd__link.is-current .hd__dot { background: var(--teal); scale: 1.5; }
.hd__link:focus-visible { color: #fff; }
.hd__link:focus-visible .hd__dot { scale: 1.6; }
@media (hover: hover) { .hd__link:hover { color: #fff; background: rgb(255 255 255 / 0.06); } .hd__link:hover .hd__dot { scale: 1.6; } }
/* CTA: a black pill with a lit rim, matching the reference nav-button. A teal glow sits in the
   ring at rest; hover swaps it for a white glow that slides in from the right, 0.5s in / 0.8s out. */
.hd__actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.hd__theme { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: rgb(14 14 16 / 0.94); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.08);
  transition: background 0.4s, color 0.4s; }
.hd__theme-ico { display: grid; overflow: hidden; width: 18px; height: 18px; }
.hd__theme-ico .ico { grid-area: 1 / 1; transition: translate 0.5s var(--ease), rotate 0.5s var(--ease), opacity 0.3s; }
.hd__theme-ico .ico--moon { translate: 0 0; rotate: 0deg; opacity: 1; }
.hd__theme-ico .ico--sun { translate: 0 140%; rotate: -90deg; opacity: 0; }
[data-theme='light'] .hd__theme-ico .ico--moon { translate: 0 -140%; rotate: 90deg; opacity: 0; }
[data-theme='light'] .hd__theme-ico .ico--sun { translate: 0 0; rotate: 0deg; opacity: 1; }
[data-theme='light'] .hd__theme { color: #f4b63e; }
.hd__theme:focus-visible { outline-offset: 2px; }
@media (hover: hover) { .hd__theme:hover { background: rgb(26 26 30 / 0.94); } }
.hd__cta { position: relative; display: inline-flex; width: 158px; height: 58px;
  border-radius: var(--r-pill); overflow: hidden; color: #fff; font-size: 15px; font-weight: 500; }
.hd__cta-glow { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: inherit; }
.hd__cta-glow::before { content: ''; width: 60%; height: 70%; margin-left: 60%; filter: blur(5px);
  background-image: radial-gradient(circle at 25%, var(--teal), #fff); opacity: 1; transition: opacity 0.8s var(--ease); }
/* The dim 92% of the ring used a fixed rgb(255 255 255 / 0.06) — a near-invisible white-on-white
   tint that only ever read against the old permanently-dark page behind it. Now that the page
   background is themed (light by default), that same value is literally white-on-white in light
   theme — the ring vanished except for the brief bright sweep passing through, which is exactly
   what was reported ("animation around this not visible on light mode"). First fix tried
   var(--edge-2) (the token built for "a faint rim, visible in either theme") — still too subtle at
   only a 2px-wide ring (--edge-2's 0.14 light-theme opacity is tuned for card borders, a much
   bigger visible area). Switched to a dedicated, always-opaque colour instead of a
   theme/backdrop-dependent transparency, so the rim reads the same regardless of what's behind the
   button: a muted dark-teal-grey that's visibly part of the button's own "dark island" styling. */
.hd__cta-border { position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background: conic-gradient(from var(--cta-angle), #2b3330 0deg, #2b3330 270deg, var(--teal) 315deg, #fff 330deg, #2b3330 345deg);
  animation: cta-sweep 3.5s linear infinite; }
.hd__cta-shine { position: absolute; inset: 0; z-index: 2; border-radius: inherit;
  background-image: radial-gradient(circle, #fff, rgb(255 255 255 / 0)); translate: 100% 0; transition: translate 0.8s var(--ease); }
.hd__cta-inner { position: absolute; inset: 2px; z-index: 3; display: flex; align-items: center; justify-content: center;
  border-radius: inherit; background: #000; }
.hd__cta-label { position: relative; }
.hd__cta:focus-visible .hd__cta-glow::before { opacity: 0; transition-duration: 0.5s; }
.hd__cta:focus-visible .hd__cta-shine { translate: 0 0; transition-duration: 0.5s; }
@media (hover: hover) {
  .hd__cta:hover .hd__cta-glow::before { opacity: 0; transition-duration: 0.5s; }
  .hd__cta:hover .hd__cta-shine { translate: 0 0; transition-duration: 0.5s; }
  .hd__cta:hover .hd__cta-border { animation-play-state: paused; }
}
@property --cta-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes cta-sweep { to { --cta-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .hd__cta-border { animation: none; }
}
.hd__menu { display: none; justify-self: end; align-items: center; gap: 8px; height: 50px; padding: 0 20px; border-radius: var(--r-pill); background: #0e0e10; color: #fff;
  font-size: 14px; font-weight: 500; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.1); }
.menu { position: absolute; top: 66px; right: var(--gx); width: min(320px, calc(100vw - 2 * var(--gx))); display: grid; gap: 2px; padding: 10px; border-radius: 22px;
  background: #0e0e10; color: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 30px 60px rgb(0 0 0 / 0.6); }
.menu[hidden] { display: none; }
.menu > a:not(.b) { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; font-size: 17px; }
.menu > a:not(.b):focus-visible { background: #1d1d22; }
.menu .b { margin-top: 8px; }

/* ---------- Eyebrow + section head ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 18px; border-radius: var(--r-pill); background: var(--card);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 0 0 1px var(--edge); font-size: 14px; font-weight: 500; color: var(--ink); }
.eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px rgb(190 218 82 / 0.8); }
.sh { display: grid; justify-items: start; gap: 24px; margin-bottom: clamp(40px, 5vw, 68px); }
/* One heading size for every section heading on the home page (section heads, the About statement, the #voice line). */
:root { --h-sec: clamp(2.25rem, 1.35rem + 3.2vw, 4.25rem); }
.sh__h { font-size: var(--h-sec); font-weight: 450; letter-spacing: -0.042em; line-height: 1.06; max-width: 24ch; }
.sh__a, .sh__b { display: block; }
.sh__a { color: var(--head-a); }
.sh__b { color: var(--sub-a); }

/* ---------- Hero ---------- */
/* Follows the theme (light by default as of 2026-10-23), not hardcoded dark — the hero used to be
   a deliberate permanently-dark opening moment regardless of the toggle, but that's been retired:
   "make everything white including hero" (explicit user request). heroAqua()'s fluid canvas and
   heroType()'s letter-face colour both also switch to match, see their own comments. */
/* height (hard cap), not min-height (a floor only) — "fit hero section inside 100vh" explicit
   request: at min-height, content taller than one screen just grew the section past it (measured
   ~68px of overflow at 1440x800). Capped here, with every element inside also made to respond to
   viewport *height*, not just width (see .hero__art, .hero__title, .hero__foot below), so content
   actually shrinks to fit a short screen instead of merely being clipped by this cap. */
.hero { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100svh; min-height: 560px; padding-top: var(--head-h); padding-bottom: clamp(24px, 5vh, 64px); overflow: clip; background: var(--bg); }
/* Fades to #000 (the .seq section's own hardcoded background below), not var(--bg): both .hero and
   .seq are permanently dark regardless of the light/dark toggle, but --bg flips to white in light
   mode — using it here created a visible white/grey seam between two sections that are supposed to
   blend into one continuous dark passage. */
/* Fades to #fff (the .seq section's own hardcoded-white background, see .seq below), not #000 —
   .seq is no longer dark (video/shade removed, pure-white background, explicit user request), so
   fading the strip to black right before a white section created a new hard seam of its own. */
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 14%; pointer-events: none; background: linear-gradient(transparent, var(--bg)); }
/* Subpage intro (About/Contact): same top clearance formula as .hero, for a section that opens
   directly under the fixed header instead of behind the full wordmark hero. */
.page-head { padding-top: calc(var(--head-h) + clamp(40px, 7vh, 100px)); }
.page-head__lede { max-width: 48ch; margin-top: 18px; font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem); color: var(--ink-2); }
/* 404 */
.err__dim { color: var(--mute); }
.err__actions, .page-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }

/* ---------- About/Contact: the mark-and-seal concept ---------- *
 * "A brand is a mark": content is pressed in with a hard wipe (data-reveal="sear" in the engine),
 * not faded up. --ember is the colour of the press itself, used only as a transient/structural
 * accent here (dividers, the seal rings, the process "scorch line") — never as a resting fill, so
 * teal stays the one accent the rest of the site uses. */
.abt-hero { padding-bottom: clamp(32px, 4vw, 56px); }
.abt-hero__h { display: grid; gap: 2px; margin-top: 18px; }
.abt-hero__line { font-size: clamp(2.5rem, 1.7rem + 3.6vw, 5rem); font-weight: 450; letter-spacing: -0.04em; line-height: 1.04; color: var(--ink); }
.abt-hero__line--dim { color: var(--mute); }
.abt-hero__row { display: flex; align-items: flex-start; gap: 20px; margin-top: clamp(24px, 3vw, 40px); }
.abt-hero__seal { flex: none; color: var(--ember); margin-top: 4px; }
.abt-hero__lede { max-width: 54ch; font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem); color: var(--ink-2); }

/* ---------- Contact page: simple layout ---------- *
 * Heading, intro, contact details + form, and a map. Namespaced cx-* so the homepage's own
 * .contact keeps its layout. Everything form-related is styled by class, never by bare tag,
 * because the WordPress build scopes the base reset to zero specificity and a theme's own
 * input/fieldset styles would otherwise win. */
.cx-hero { padding-bottom: clamp(32px, 4vw, 56px); }
.cx-sec { padding-top: clamp(8px, 1.4vw, 20px); }
.cx-hero__h { display: grid; gap: 2px; margin-top: 18px; font-size: clamp(2.5rem, 1.7rem + 3.6vw, 5rem); font-weight: 450; letter-spacing: -0.04em; line-height: 1.04; }
.cx-hero__a { display: block; color: var(--head-a); }
.cx-hero__b { display: block; color: var(--mute); }
.cx-hero__lede { max-width: 58ch; margin-top: clamp(20px, 3vw, 32px); font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem); color: var(--ink-2); }

.cx-h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 2rem); font-weight: 450; letter-spacing: -0.03em; line-height: 1.15; color: var(--head-a); margin-bottom: clamp(18px, 2vw, 28px); }
.cx-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.cx-details .lines { margin-top: 0; }
.cx-details .socials { margin-top: 28px; }
.line--static { cursor: default; background-size: 0 1px; }
@media (hover: hover) { .line--static:hover { background-size: 0 1px; color: var(--ink-2); } }

.cx-map-sec { padding-bottom: var(--sec); }
.cx-map { overflow: hidden; border-radius: var(--r-card); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 0 0 1px var(--edge); }
.cx-map__frame { display: block; width: 100%; height: clamp(320px, 44vw, 480px); border: 0; }

/* Soft diagonal light streaks, light theme only — the reference's background texture. A radial
   wash plus two blurred rotated bands, not a photo, so it costs nothing and never clashes with a
   theme colour change. */
.hero__glow { position: absolute; inset: -10% 0 auto; height: 90vh; pointer-events: none; background: none; }
:root[data-theme='light'] .hero__glow {
  inset: -8% -6% -8% -6%; height: auto;
  background: radial-gradient(60% 55% at 50% 48%, rgb(255 255 255 / 0.9), transparent 70%);
}
:root[data-theme='light'] .hero__glow::before,
:root[data-theme='light'] .hero__glow::after {
  content: ''; position: absolute; width: 140%; height: 38%; filter: blur(60px);
  background: linear-gradient(90deg, transparent, rgb(150 190 90 / 0.34), transparent); transform: rotate(-38deg);
}
:root[data-theme='light'] .hero__glow::before { left: -70%; top: 35%; }
:root[data-theme='light'] .hero__glow::after { right: -75%; top: 5%; opacity: 0.8; }
/* gap mixes in vh (was vw-only) so it compresses on a short screen, not just a narrow one. */
/* Figtree (loaded in index.astro's head slot, see its comment) for the rebuilt hero's own text —
   the reference's font, applied once here so .hero__cat/.hero__headline/.hero__lede2/.hero__ctas'
   button labels all inherit it rather than repeating the declaration on each. Scoped to just this
   hero content, not the site's --font (Inter) used everywhere else. */
.hero__title { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(6px, 1.2vh, 16px); text-align: center; font-family: 'Figtree', var(--font); }
/* Category line (reference: "STRATEGY • DESIGN • DIGITAL GROWTH") above the wordmark. */
.hero__cat { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.6vw, 18px);
  font-size: clamp(11px, 0.6rem + 0.2vw, 13px); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); }
.hero__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: none; }
.hero__dot--inline { display: inline-block; margin-left: 10px; vertical-align: middle; }
/* Headline + lede below the wordmark (reference copy, see index.astro's comment on the hero rebuild).
   font-size/margin now also scale down on a short viewport (vh terms added alongside the vw ones). */
/* font-family set directly here, not just inherited from .hero__title: base.css's
   `h1, h2, h3, h4 { font-family: var(--font) }` targets this <h2> element itself, and a rule
   matching the element always wins over an inherited value regardless of the ancestor's
   specificity — found when the headline alone came back plain Inter despite .hero__title's rule
   computing correctly. */
.hero__headline { max-width: 19ch; font-size: clamp(1.25rem, 0.85rem + 1.4vw + 1.1vh, 2.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--head-a); margin-top: clamp(2px, 1vh, 14px); font-family: 'Figtree', var(--font); }
/* The reference image's own green (#wiseup-3d.webp's baked-in edge colour, ~#3ecb3e) — sampled to
   match this specific asset, not the site's lime (#BEDA52) used everywhere else; the image can't
   be recoloured, so the nearest text next to it borrows its tone instead for visual harmony. */
.hero__accent { color: #2fae2f; }
:root:not([data-theme='light']) .hero__accent { color: var(--teal); }
.hero__lede2 { max-width: 46ch; margin-top: clamp(4px, 1vh, 10px); font-size: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem); color: var(--sub-a); line-height: 1.5; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(10px, 2.2vh, 28px); }
/* Bottom-corner labels, pinned to the hero's own bottom edge (the reference's "Independent
   creative studio" / "Scroll" row). */
.hero__foot { position: absolute; left: 0; right: 0; bottom: clamp(20px, 3.5vw, 40px); z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; padding-inline: var(--gx); pointer-events: none; font-family: 'Figtree', var(--font); }
.hero__tag { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.hero__scroll { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sub-a); }
.hero__scroll-line { width: 1px; height: 28px; background: var(--edge-2); }
@media (max-width: 760px) { .hero__foot { flex-direction: column; align-items: flex-start; gap: 16px; } .hero__scroll { flex-direction: row; } .hero__scroll-line { width: 28px; height: 1px; } }
/* Capped width (was full-bleed 100vw): in the rebuilt hero (reference layout) the wordmark shares
   the viewport with a category line, headline, lede and two CTAs above/below it, so it can no
   longer claim the section's full width — at 100vw its aspect-ratio-driven height alone exceeded
   one screen, pushing everything else below the fold. */
/* Width capped three ways: by viewport width (60vw), by a hard max (760px), and — the one that
   matters for "fit inside 100vh" — by viewport *height* too, via a width-equivalent of a ~24vh-tall
   image (24vh * the box's own aspect-ratio 1620/736 ≈ 52vh of width). First attempt at this used
   150vh, worked out from the wrong end of the ratio (too permissive — at a 650px-tall viewport it
   still rendered the full 60vw-wide image, overlapping the header above and the CTAs below);
   re-derived correctly and verified at 650/700/800px heights this time, not just computed. */
.hero__art { position: relative; width: min(78vw, 1060px, 80vh); margin-inline: auto; aspect-ratio: 1620 / 736; }
/* .hero__art-photo/.hero__art-dynamic per-theme toggle removed (2026-10-23): the flat image
   wordmark they switched between is gone, heroType()'s dynamic letters now run in both themes —
   see index.astro's comment and .hero-face-ink below. */
/* text-shadow removed per explicit user request — it was tuned for the old permanently-dark hero
   (legibility over busy art) and just reads as an odd dark halo now that the hero is white. */
.hero__title .hero__sub { margin-top: calc(-1 * clamp(40px, 9vw, 150px)); position: relative; z-index: 2; }
/* Plain-text hero heading (.hero__art--text) sits in normal flow, not the old SVG's bled/reflection
   art, so it doesn't need the negative pull-up above — that was overlapping the eyebrow text. */
.hero__title:has(.hero__art--text) .hero__sub { margin-top: 0; }
.hero__word { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; margin: 0; line-height: 0; }
/* Fills .hero__art's own (now capped, see above) width — was an independent vw-based cap that
   could exceed .hero__art's bounds and defeat its new cap. */
.hero__word .hero__logo { width: 100%; height: auto; margin-top: 1%; }
.hero__word svg { width: 100%; height: auto; display: block; }
/* Glowing Dot Typography (heroDots() in motion/hero-dots.ts): the canvas fills .hero__word's own
   box (which .hero__art already sizes/reserves via its aspect-ratio) — the build() step in that
   script measures this element and sets the canvas's pixel + CSS size to match, so no extra width
   constraint is needed here, just block display to avoid the usual inline-canvas baseline gap. */
.hero__word--dots canvas { display: block; }
.hero__logo { display: block; overflow: visible; width: 100%; height: auto; }
/* Hero heading, plain-text version: a normal bold sans, no SVG/3D rig. .hero__art normally carries a
   fixed aspect-ratio sized for the brush-script artwork — not wanted here, so the text variant drops
   it and sizes to the line itself. */
.hero__art--text { width: auto; margin-inline: 0; aspect-ratio: auto; display: grid; place-items: center; padding-top: calc(var(--head-h) + clamp(24px, 6vh, 72px)); }
.hero__word--text {
  position: static; display: block; line-height: 1; font-weight: 800;
  font-size: clamp(3.5rem, 1.6rem + 7.5vw, 9rem); letter-spacing: -0.03em; color: #ffffff;
  transition: color 0.45s var(--ease);
}
.hero__word--text:hover { color: var(--lime, #beda52); }
/* var(--head-a) again, not hardcoded white: the hero now follows the theme like everything else
   (see .hero's own comment, 2026-10-23), so this should track it the normal way. It was briefly
   hardcoded white while the hero was still permanently dark — no longer true. */
.hero__sub { font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.625rem); font-weight: 500; color: var(--head-a); letter-spacing: -0.015em; }
/* Wordmark art (scripts/make-hero-wordmark.mjs): every letter is a dark glyph holding blurred smoke
   blobs and tiny colour balls (palette from the brand swatch strip), clipped to the glyph. Their drift
   is driven by per-element custom properties baked into the SVG (--dx --dy --s --dur --del). */
.wm-blob { animation: wm-smoke var(--dur) ease-in-out var(--del) infinite alternate; }
.wm-ball { animation: wm-ball var(--dur) ease-in-out var(--del) infinite alternate; }
@keyframes wm-smoke { from { transform: translate(0, 0) scale(1); } to { transform: translate(var(--dx), var(--dy)) scale(var(--s)); } }
@keyframes wm-ball { from { transform: translate(0, 0); opacity: 0.35; } to { transform: translate(var(--dx), var(--dy)); opacity: 1; } }
/* The boy on the "i" dot: legs swing, head nods, eyes blink. transform-box: fill-box makes the
   rotate/scale origins relative to each shape instead of the whole SVG. */
.wm-boy * { transform-box: fill-box; }
.wm-shin { transform-origin: 50% 8%; animation: wm-swing 1.6s ease-in-out infinite alternate; }
.wm-leg--r .wm-shin { animation-delay: -0.8s; }
.wm-head { transform-origin: 50% 90%; animation: wm-nod 3.4s ease-in-out infinite; }
.wm-eyes { transform-origin: 50% 50%; animation: wm-blink 4.2s infinite; }
@keyframes wm-swing { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes wm-nod { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(13deg) translateY(0.6px); } }
@keyframes wm-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
/* The header logo is white brush-script art on a transparent ground (see CLAUDE.md) — it has no
   background chip behind it like the nav pill or CTA, so it needs to invert for light mode. Used
   to exempt "still over the hero" (.hd--over-hero, tracked in header() in motion/main.ts) because
   the hero was permanently dark regardless of theme — that's no longer true (2026-10-23, hero now
   follows the theme like everything else), so the exemption is gone and this applies everywhere,
   hero included. `.hd--over-hero` itself is still tracked/toggled (unused by any CSS right now)
   rather than ripped out, in case a future section needs that same "am I over the hero" signal. */
:root[data-theme='light'] .hd__logo img { filter: invert(1); }
/* the podcast's full-colour mark: no invert in either theme, a touch taller (its "Podcast" line sits under the script) */
:root[data-theme='light'] .hd__logo--podcast img, .hd__logo--podcast img { filter: none; height: clamp(44px, 4.2vw, 62px); }
/* .hd__logo--dark (forced-invert for /about) retired 2026-10-23: About's "day mood" white
   background is now scoped to light theme only (see [data-mood='day'] in tokens.css), so it's
   white exactly when the rule above already inverts the logo — a separate always-on rule would
   now incorrectly invert the logo to black while About is legitimately dark (toggled). The class
   is still applied by Header.astro (harmless, unused) rather than touching that file too. */

/* Hero wordmark entrance (heroWordmark() in motion/main.ts): each letter clips/blurs up into
   place, tightly staggered, then one soft diagonal sheen sweeps across the settled glyphs once.
   .motion [data-wordmark] hides the raw SVG pre-JS, same convention as [data-reveal]/[data-split]
   (base.css) — gsap.set(..., visibility:'visible') un-hides it right before the timeline starts. */
.motion [data-wordmark] { visibility: hidden; }
.hero-logo__ch { transform-box: fill-box; transform-origin: 50% 100%; }
.hero-logo__sheen { mix-blend-mode: screen; opacity: 0; pointer-events: none; }

/* Hero strip: one straight row of covers laid on a plane that is skewed and turned so it rises to
   the upper right and bleeds off the bottom of the hero. The plane holds the static 3D/skew transform;
   heroStrip() only ever moves the inner track along the plane's own x axis, so movement follows the
   diagonal. --cw/--gap size the cards; the hero's own height clips the strip at the bottom. */
.hero__orbit, .hero__orb { display: none; }
.hero__orbit { position: absolute; z-index: -1; left: 50%; top: 50%; width: min(66vw, 1320px); aspect-ratio: 1; pointer-events: none;
  margin: calc(min(66vw, 1320px) / -2) 0 0 calc(min(66vw, 1320px) / -2); border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0.012) 78%, transparent 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.035); }
.hero__orb { position: absolute; left: 92%; top: 22%; width: 12px; height: 12px; border-radius: 50%; background: var(--teal-hi);
  box-shadow: 0 0 14px 4px rgb(190 218 82 / 0.45), 0 0 46px 12px rgb(190 218 82 / 0.22); }
/* Wraps .strip now that it's its own section (moved out of .hero — see index.astro's comment on
   the hero rebuild), reached by scrolling past the hero instead of poking into view at the bottom
   of it. */
.strip-sec { position: relative; overflow: clip; padding-block: clamp(48px, 8vw, 110px); background: var(--bg); }
.strip { --cw: clamp(150px, 20vw, 420px); --gap: clamp(18px, 3.4vw, 72px);
  position: relative; z-index: 1; min-height: clamp(260px, 34vw, 560px); pointer-events: none; }
.strip__plane { position: absolute; left: 50%; top: 0; transform-origin: 50% 0;
  transform: translateX(-50%) perspective(1800px) rotateY(-10deg) rotate(-10deg) skewX(21deg); }
.strip__track { display: flex; gap: var(--gap); width: max-content; padding-right: var(--gap); will-change: transform; }
.strip__card { flex: none; width: var(--cw); aspect-ratio: 4 / 5; margin: 0; border-radius: calc(var(--cw) * 0.12); overflow: hidden;
  background: var(--card); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.strip__card { position: relative; }
.strip__card img, .strip__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* The video fades in over its poster only while it is actually playing; on any failure it simply stays hidden. */
.strip__video { opacity: 0; transition: opacity 0.6s ease; background: transparent; }
.strip__card.is-playing .strip__video { opacity: 1; }
.strip__card.is-failed .strip__video { display: none; }
/* Loading state: a soft light sweep across the poster while a video buffers. */
.strip__load { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.1) 50%, transparent 70%); background-size: 250% 100%; }
.strip__card.is-loading .strip__load { opacity: 1; animation: strip-load 1.4s linear infinite; }
/* Portfolio cover cards interleaved into the strip ("add portfolio images also") — a plain image,
   no video/dwell behaviour, linking out to the case study. */
.strip__card--proj a { position: absolute; inset: 0; display: block; }
.strip__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px 12px; font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(0deg, rgb(0 0 0 / 0.65), transparent); }
@keyframes strip-load { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .strip__card.is-loading .strip__load { animation: none; } }
@keyframes slide { to { transform: translateX(-50%); } }

/* Image sequence section: video/canvas removed per explicit user request ("remove video.. make
   background pure white"). Now follows the theme (var(--bg)) rather than a hardcoded #fff — a
   later request ("in dark mode make every section bg black") means this needs to go pure black
   in dark theme too; var(--bg) is #fff in light / #000 in dark, satisfying both asks at once.
   Text below follows suit (themed tokens, not the hardcoded dark values from the white-only pass). */
.seq { position: relative; background: var(--bg); }
.seq__pin { position: relative; display: grid; align-items: end; min-height: 0; padding-top: clamp(40px, 6vw, 88px); }
.seq__copy { position: relative; z-index: 2; padding-bottom: 0; }
/* Sized against both width and height so the three lines never crowd a short laptop screen: ~36px on phones, ~64px at
   1440, capped at 84px; never more than 9.5vh. Tracking eases off as the size drops (tight tracking only suits big type). */
.seq__line { max-width: none; font-size: var(--h-sec); font-weight: 450; letter-spacing: -0.042em; line-height: 1.06; color: var(--head-a); text-wrap: balance; }
@media (max-width: 600px) { .seq__line { letter-spacing: -0.03em; line-height: 1.1; } }
.seq__line > span { display: block; }
.seq__b { color: var(--sub-a); }
.seq__c { color: var(--teal); }
/* Hero title hover: the three lines sweep to one gradient together, instead of keeping their
   separate near-black/grey/lime tones. background-clip:text + a matching -webkit-text-fill-color
   lets the swap transition smoothly like a color change, rather than needing to crossfade elements. */
.seq__a, .seq__b, .seq__c { background-image: linear-gradient(100deg, var(--lime-lo) 0%, var(--teal) 55%, var(--lime-hi) 100%);
  -webkit-background-clip: text; background-clip: text; transition: -webkit-text-fill-color 0.45s var(--ease), color 0.45s var(--ease); }
.seq__a { -webkit-text-fill-color: var(--head-a); }
.seq__b { -webkit-text-fill-color: var(--sub-a); }
.seq__c { -webkit-text-fill-color: var(--teal); }
@media (hover: hover) {
  #hero-title:hover .seq__a, #hero-title:hover .seq__b, #hero-title:hover .seq__c { -webkit-text-fill-color: transparent; color: transparent; }
}
.seq__after { padding-block: clamp(24px, 3vw, 40px) calc(var(--sec) * 0.45); }
.seq__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; }
/* Back to themed tokens: .seq now follows var(--bg) (see .seq above), so text here should too. */
.seq__lede { max-width: 52ch; color: var(--ink-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.55; }
.seq__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--edge-2); }
.stats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 26px 20px 0 0; }
.stats dd { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); font-weight: 400; letter-spacing: -0.045em; line-height: 1; color: var(--ink); }
.stats dt { font-size: 14px; color: var(--mute); }

/* ---------- Logos ---------- */
/* Full-bleed client stripe with a staggered drop-in motion. */
.logos { padding-block: 0; background: var(--bg); }
.logos__marquee { position: relative; display: block; width: 100%; min-width: 0; overflow: hidden; background: linear-gradient(110deg, rgb(255 255 255 / .035), transparent 34%, transparent 66%, rgb(255 255 255 / .025)); box-shadow: 0 0 28px rgb(255 255 255 / .035), inset 0 0 28px rgb(255 255 255 / .025); }
.logos__marquee::before { content: ""; position: absolute; z-index: 1; top: 0; left: -22%; width: 22%; height: 1px; background: linear-gradient(90deg, transparent, #d9dedc, transparent); box-shadow: 0 0 10px rgb(220 225 224 / .65); animation: logos-scan 7s ease-in-out infinite; pointer-events: none; }
.logos__row { width: 100%; min-width: 0; overflow: hidden; }
.logos__track { display: flex; width: max-content; animation: logos-brands-run 42s linear infinite; }
.logos__row:hover .logos__track { animation-play-state: paused; }
.logos__track ul { display: flex; margin: 0; padding: 0; list-style: none; }
.logos__track li { display: grid; place-items: center; flex: 0 0 160px; height: 100px; padding: 12px; }
.logos__track img { display: block; width: 82%; height: 68px; object-fit: contain; opacity: .9; filter: grayscale(1) invert(1); animation: logos-drop .8s cubic-bezier(.18,.8,.25,1) both; animation-delay: var(--drop-delay, 0ms); }
.logos__track img.logo--original { filter: none; }
:root[data-theme='light'] .logos__track li.is-tile img { filter: grayscale(1); }
:root[data-theme='light'] .logos__track li.is-tile img.logo--original { filter: none; }
@keyframes logos-brands-run { to { transform: translateX(-50%); } }
@keyframes logos-scan { 50% { left: 100%; } to { left: -22%; } }
@keyframes logos-drop { 0% { opacity: 0; transform: translateY(-34px) rotate(-5deg); } 72% { opacity: .9; transform: translateY(4px) rotate(1deg); } 100% { opacity: .9; transform: translateY(0) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .logos__track, .logos__marquee::before { animation: none; } .logos__row { overflow-x: auto; } .logos__track img { animation: none; } }
/* ---------- About (day) ---------- */
/* Statement (full width, its own line) -> body + photo (2 col) -> proof pairs (strip). */
.about-sec .sh__h { max-width: none; }
.about-sec .sh__a, .about-sec .sh__b { display: block; }
.about-sec .sh__h { width: 100%; font-size: var(--h-sec); text-wrap: pretty; }
@media (min-width: 1280px) { .about-sec .sh__a, .about-sec .sh__b { white-space: nowrap; } }
/* Below the photo: statement left, body copy right, sharing one top line. */
.about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 6vw, 96px); align-items: start; margin-top: clamp(36px, 5vw, 72px); }
.about > * { min-width: 0; }
.about__l { display: grid; align-content: start; }
.about__l .contrast__rows { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: clamp(20px, 2.2vw, 28px); margin-top: clamp(24px, 2.8vw, 36px); padding-top: clamp(24px, 2.8vw, 36px); border-top: 1px solid var(--edge-2); }
.about__body { font-size: clamp(1.125rem, 1rem + 0.45vw, 1.4rem); line-height: 1.55; letter-spacing: -0.012em; color: var(--ink-2); max-width: 52ch; padding-top: 0.4em; }
/* The photo: centred, wide frame; the image inside is taller than the frame and is moved against the scroll
   by data-parallax (reveal.ts). The frame itself is clipped to rounded corners. */
.about__g { position: relative; width: min(100%, 1240px); margin: 0 auto; aspect-ratio: 21 / 9; border-radius: clamp(18px, 2.4vw, 32px); overflow: hidden; background: var(--card);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.35), 0 0 0 1px var(--edge); will-change: transform; }
.about__g img { position: absolute; left: 0; width: 100%; height: 124%; top: -12%; max-width: none; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .about { grid-template-columns: minmax(0, 1fr); }
  .about__g { aspect-ratio: 16 / 9; }
  .about__g img { top: 0; height: 100%; object-position: center 56%; }
}

/* Contrast statement: the fit/not-fit distinction as an editorial before/after, not a checklist.
   The big "Posts fade. Brands last." line gets the same scale as the section heading, as its own
   standout line; the proof pairs run underneath the body+photo row as a clean 2-col strip,
   struck-through dim line stacked over a bold teal line in each. */
/* "Posts fade. / Brands last.": two lines at one size and one tight line-height; the first is quiet, the second is the point. */
.contrast__statement { display: grid; gap: 0; max-width: 16ch; font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem); font-weight: 450; letter-spacing: -0.04em; line-height: 1.06; }
.contrast__statement .contrast__bold { font-size: 1em; font-weight: 450; letter-spacing: inherit; line-height: inherit; color: var(--teal-hi); }
.contrast__rows { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: clamp(20px, 2.2vw, 28px); margin-top: clamp(24px, 2.8vw, 36px); padding-top: clamp(24px, 2.8vw, 36px); border-top: 1px solid var(--edge-2); }
.contrast__row { display: grid; gap: 4px; max-width: 46ch; padding-left: 18px; border-left: 2px solid var(--teal); }
.contrast__dim { color: var(--mute); }
.contrast__row .contrast__dim { font-size: 14.5px; line-height: 1.35; letter-spacing: 0; }
.contrast__arrow { display: none; }
.contrast__bold { font-size: clamp(1.1875rem, 1.1rem + 0.45vw, 1.5rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.28; color: var(--teal-hi); }
.ticks { display: grid; gap: 15px; margin-top: 28px; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-2); font-size: 16px; line-height: 1.45; }
.ticks .ico { flex: none; margin-top: 1px; color: var(--teal-hi); }
.ticks .ticks__no, .ticks .ticks__no .ico { color: var(--mute); }
.ticks--sm { gap: 13px; margin-top: 26px; }
.ticks--sm li { font-size: 15px; }

/* ---------- Process (product UI as decoration) ---------- */
/* Horizontal gallery: stacked by default (no JS, reduced motion, phones); a pinned sideways track on desktop. */
.hgal { overflow: clip; }
.hgal__track { display: grid; gap: clamp(32px, 4vw, 48px); width: min(100% - 2 * var(--gx), var(--maxw)); margin-inline: auto; }
.hgal__intro .sh { margin-bottom: 0; }
.hgal__hint { display: none; align-items: center; gap: 10px; font-size: 14px; color: var(--mute); }
.hgal__hint .ico { color: var(--teal-hi); }
.hgal__list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (min-width: 900px) {
  .motion .hgal { padding-block: 0; }
  .motion .hgal__view { display: flex; align-items: center; height: 100svh; }
  .motion .hgal__track { display: flex; align-items: stretch; gap: 24px; width: max-content; margin: 0; padding-inline: max(var(--gx), calc((100vw - var(--maxw)) / 2)); }
  .motion .hgal__intro { flex: none; display: flex; flex-direction: column; justify-content: space-between; width: min(500px, 40vw); padding: 12px 40px 12px 0; }
  .motion .hgal__hint { display: inline-flex; }
  .motion .hgal__list { display: flex; gap: 24px; }
  .motion .proc__card { flex: none; width: clamp(380px, 36vw, 540px); }
}
.proc__card { display: flex; flex-direction: column; overflow: hidden; }
/* height (not just min-height): the card is a flex item stretched to match its tallest sibling
   (different step text lengths), and with no fixed height here that extra space was landing on
   the stage itself rather than the meta block below it, making the three images uneven. A fixed
   height keeps every stage identical regardless of how tall the overall card gets stretched. */
.proc__stage { position: relative; flex: none; display: grid; place-items: center; height: clamp(260px, 24vw, 330px); overflow: hidden; background: var(--card-2); }
/* Prompted abstract backdrop behind each mock. Dimmed and desaturated so it reads as atmosphere,
   not a distracting photo, and a dark scrim keeps the UI mock on top legible either way. */
.proc__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) brightness(0.55); }
.proc__stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, transparent, var(--card-2) 85%); }
.proc__stage > :not(.proc__bg) { position: relative; z-index: 1; }
.proc__meta { padding: clamp(20px, 2.4vw, 28px) clamp(24px, 2.6vw, 34px) clamp(28px, 2.8vw, 36px); }
.proc__h { display: flex; align-items: baseline; gap: 10px; font-size: 18px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.proc__n { font-size: 13px; color: var(--teal-hi); font-variant-numeric: tabular-nums; }
.proc__meta p { margin-top: 8px; max-width: 46ch; font-size: 15px; color: var(--mute); }

/* Placeholder content shot: a real case-study photo filling the stage edge to edge, standing in
   for a per-step illustration until one is decided. */
.proc__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Services ---------- */
.svc { display: grid; gap: 14px; }
.svc__item { border-radius: 22px; background: var(--card); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 0 0 1px var(--edge); transition: background 0.4s; }
.svc__btn { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 2vw, 24px);
  padding: clamp(22px, 2.3vw, 32px) clamp(22px, 3vw, 42px); border-radius: 22px; text-align: left; }
.svc__ico { color: #b4b4ba; transition: color 0.4s; }
.svc__t { font-size: clamp(1.25rem, 1rem + 1vw, 2rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); transition: translate 0.55s var(--ease); }
.svc__dot, .faq__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #d4d4d8; transition: scale 0.5s var(--ease), background 0.35s; }
.svc__item.is-open .svc__dot, .faq__item[open] .faq__dot { background: var(--teal-hi); scale: 1.6; }
.svc__item.is-open .svc__ico { color: var(--teal-hi); }
.svc__btn:focus-visible { outline-offset: -2px; }
.svc__btn:focus-visible .svc__t { translate: 8px 0; }
@media (hover: hover) {
  .svc__item:hover, .faq__item:hover { background: var(--card-2); }
  .svc__btn:hover .svc__t { translate: 8px 0; }
  .svc__btn:hover .svc__ico { color: var(--teal-hi); }
  .svc__btn:hover .svc__dot, .faq__q:hover .faq__dot { scale: 1.6; }
}
.svc__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.55s var(--ease); }
.js .svc__panel { grid-template-rows: 0fr; }
.js .svc__item.is-open .svc__panel { grid-template-rows: 1fr; }
.svc__inner { overflow: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 clamp(22px, 3vw, 42px) clamp(24px, 2.4vw, 32px) calc(clamp(22px, 3vw, 42px) + 26px + clamp(16px, 2vw, 24px)); }
.chips li { padding: 9px 16px; border-radius: var(--r-pill); background: var(--card-3); font-size: 14px; color: var(--ink-2); box-shadow: 0 0 0 1px var(--edge); }

/* Rolling text: channel names on a drum that turns with scroll */
.svc-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 32px; margin-bottom: clamp(40px, 5vw, 68px); }
.svc-head .sh { margin-bottom: 0; }
.svc__n { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.svc__btn { grid-template-columns: auto auto 1fr auto; }
/* perspective-origin sits at the same edge the words are anchored to (right:0 below). Perspective
   projection scales a point's offset from the vanishing point as it moves along Z — with the
   default centered origin, every right-anchored word drifted further right as it rotated toward
   the camera, past the mask's edge. Aligning the origin with the anchor keeps that drift small. */
.drum { position: relative; height: 3.3em; font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4.5rem); perspective: 10em; perspective-origin: 100% 50%; --lh: 1.15em; --r: calc(var(--lh) * 1.98);
  -webkit-mask: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent); mask: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent); }
.drum__ring { position: absolute; inset: 0; transform-style: preserve-3d; }
/* width: max-content so the word is only ever as wide as its own text, anchored to the right edge
   (left on mobile, see breakpoint below). .drum has a mask, which clips overflowing children to its
   box like overflow:hidden would — forcing the word's box to 100% width (the old inset: 50% 0 auto)
   let long words like "Packaging"/"Websites" render wider than that box and get cut off. */
.drum__word { position: absolute; top: 50%; right: 0; width: max-content; max-width: 94%; height: var(--lh); margin-top: calc(var(--lh) / -2);
  line-height: var(--lh); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 450; letter-spacing: -0.045em; color: var(--drum-c, var(--teal-hi)); backface-visibility: hidden;
  transform: rotateX(calc(var(--i) * -30deg)) translateZ(var(--r)); }

/* ---------- Clients: infinite looped panels ---------- */
.loop-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(40px, 5vw, 68px); }
.loop-head .sh { margin-bottom: 0; }
.loop-nav { display: flex; gap: 10px; }
html:not(.js) .loop-nav { display: none; }
/* At 1100px+ the carousel shows 4 panels at once (loopedPanels()), so with 4 or fewer segments
   there is nothing to page through: no arrows, no grab cursor. */
@media (min-width: 1100px) {
  .loop-nav--fits-wide { display: none; }
  .js .loop-head:has(.loop-nav--fits-wide) + .loop { cursor: auto; }
}
.loop-btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--card); color: var(--ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px var(--edge-2); transition: background 0.3s, color 0.3s, scale 0.2s; }
.loop-btn svg { transition: translate 0.3s var(--ease); }
.loop-btn:active { scale: 0.92; }
.loop-btn:focus-visible { background: var(--teal); color: var(--on-teal); scale: 1.08; }
.loop-btn:focus-visible svg { translate: -2px 0; }
[data-loop-next]:focus-visible svg { translate: 2px 0; }
/* Primary targets answer in motion, not a color swap alone: a scale-up plus the chevron nudging
   in the direction it points, matching the nudge/translate treatment used on every other primary
   hover target on the site (buttons, nav links, service rows). */
@media (hover: hover) {
  .loop-btn:hover { background: var(--teal); color: var(--on-teal); scale: 1.08; }
  [data-loop-prev]:hover svg { translate: -2px 0; }
  [data-loop-next]:hover svg { translate: 2px 0; }
}
.loop__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.js .loop { overflow: hidden; padding: 2px; margin: -2px; touch-action: pan-y; cursor: grab; }
.js .loop.is-dragging { cursor: grabbing; }
.js .loop__track { grid-template-columns: none; }
/* height: 100% stretches each panel to the grid cell's own height, which CSS Grid sizes to the
   tallest panel sharing the cell (all panels sit in area 1/1, moved apart by JS via translateX) —
   otherwise each panel's height came from its own content and shorter cards (e.g. "Startups")
   ended visibly shorter than the featured one with its extra eyebrow line. */
.js .loop__panel { grid-area: 1 / 1; width: var(--pw, 100%); height: 100%; will-change: transform; user-select: none; }
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.tier { display: flex; flex-direction: column; gap: 10px; padding: clamp(26px, 2.4vw, 34px) clamp(22px, 2vw, 30px);
  /* Same editorial-numbered-card language as Process/Services, instead of a plain checklist card. */
  background: radial-gradient(130% 60% at 100% 0%, rgb(255 255 255 / 0.05), transparent 70%), var(--card); }
.tier__n { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.tier__k { font-size: 14px; color: var(--mute); }
.tier__h { font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem); font-weight: 450; letter-spacing: -0.035em; line-height: 1.12; color: var(--ink); }
.tier__p { min-height: 4.8em; margin-bottom: 14px; font-size: 15px; color: var(--mute); }
.tier--feat { background: radial-gradient(120% 70% at 50% 0%, rgb(190 218 82 / 0.16), transparent 70%), var(--card);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(190 218 82 / 0.45); }
.tier--feat .tier__n, .tier--feat .tier__k { color: var(--teal-hi); }

/* ---------- Work: two drifting rows of square covers (workRows() in motion/main.ts) ---------- */
/* Matches the Lunar reference: 500px rounded squares at 1440, 24px gaps, the second row offset by
   half a tile so columns never line up. The tracks carry no CSS transform; driftTrack() owns x. */
.rows { --tile: clamp(240px, 34.7vw, 500px); --row-gap: clamp(14px, 1.7vw, 24px);
  display: grid; gap: var(--row-gap); margin-top: clamp(40px, 3.9vw, 56px); overflow: hidden; }
.rows__track { display: flex; gap: var(--row-gap); width: max-content; padding-right: var(--row-gap); will-change: transform; }
.rows__row + .rows__row .rows__track { margin-left: calc(var(--tile) / -2); }
.rows__tile { flex: none; width: var(--tile); aspect-ratio: 1; }
.rows__link { display: block; height: 100%; border-radius: clamp(16px, 1.7vw, 24px); overflow: hidden; background: var(--card); }
.rows__link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 0.8s var(--ease); }
.rows__link:focus-visible { outline-offset: -4px; }
.rows__link:focus-visible img { scale: 1.05; }
@media (hover: hover) { .rows__link:hover img { scale: 1.05; } }
.work-more { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 4vw, 48px); }

/* ---------- CodeAce (testimonial-card layout) ---------- */
.roots-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; margin-bottom: clamp(40px, 5vw, 68px); }
.roots-head > div { display: grid; justify-items: start; gap: 28px; }
.roots-head .sh { margin-bottom: 0; }
/* Dynamic morphing: CodeAce mark -> WiseUp mark -> flame */
.morph { display: grid; justify-items: center; gap: 16px; width: clamp(170px, 20vw, 280px); margin: 0; }
.morph svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 36px rgb(190 218 82 / 0.35)); }
.morph__label { padding: 8px 18px; border-radius: var(--r-pill); font-size: 14px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--edge-2); }
.roots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.root { display: flex; flex-direction: column; gap: 26px; min-height: 330px; padding: clamp(26px, 2.4vw, 34px); }
.root__who { display: flex; align-items: center; gap: 16px; }
.root__who strong { display: block; font-size: 16px; font-weight: 500; color: var(--ink); }
.root__who span span { font-size: 15px; color: var(--mute); }
.root__av { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-size: 24px; font-weight: 600; }
.root__av--0 { background: #e9e9ec; color: #050506; }
.root__av--1 { background: var(--teal); color: var(--on-teal); }
.root__av--2 { background: #1d1d22; color: var(--teal-hi); box-shadow: inset 0 0 0 1px var(--edge-2); }
.root__text { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.root__mark { margin-top: auto; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; color: #85858c; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 14px; }
.faq__item { border-radius: 22px; background: var(--card); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 0 0 1px var(--edge); transition: background 0.4s; }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px clamp(22px, 3vw, 42px); border-radius: 22px; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); font-weight: 400; letter-spacing: -0.012em; color: var(--ink); }
.faq__q:focus-visible { outline-offset: -2px; }
.faq__a { max-width: 72ch; padding: 0 clamp(22px, 3vw, 42px) 30px; color: var(--mute); }
.faq__item::details-content { block-size: 0; overflow: clip; transition: block-size 0.55s var(--ease), content-visibility 0.55s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
:root { interpolate-size: allow-keywords; }

/* ---------- Contact ---------- */
.sec#contact { padding-bottom: var(--sec); }
.contact { display: grid; gap: clamp(32px, 4.5vw, 56px); }
.contact--page { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
/* Home contact: a header row (heading left, lede right, sharing one baseline), then two equal-height
   columns whose top and bottom edges line up: the contact rows stretch to the form's height. */
.contact__head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 6vw, 80px); align-items: end; }
.contact__head .sh { margin-bottom: 0; }
.contact__head .contact__p { margin-bottom: 4px; max-width: 44ch; justify-self: start; }
.contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 6vw, 80px); align-items: stretch; }
.contact__l { display: grid; }
.contact__l .contact__rows { display: grid; grid-auto-rows: 1fr; margin-bottom: 0; height: 100%; }
.contact__l .contact__rows li { display: grid; }
.contact__l .cta-row { height: 100%; }
.contact__grid .bform { display: flex; flex-direction: column; height: 100%; }
.contact__grid .bform .bfield--area { flex: 1; display: flex; }
.contact__grid .bform .bfield--area textarea { flex: 1; height: 100%; min-height: 150px; resize: none; }
.contact > .socials { padding-top: clamp(4px, 1vw, 12px); }
@media (max-width: 860px) {
  .contact__head, .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .contact__head { align-items: start; }
  .contact__l .contact__rows { height: auto; }
}
.contact .sh { margin-bottom: 24px; }
.contact__p { max-width: 40ch; margin-bottom: 30px; font-size: 17px; color: var(--mute); }
.socials { display: flex; flex-wrap: wrap; gap: 12px; }
.social { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: var(--r-pill); font-size: 15px; box-shadow: inset 0 0 0 1px var(--edge-2);
  transition: background 0.35s, color 0.35s, translate 0.45s var(--ease); }
.social:focus-visible { background: #fff; color: #050506; }
@media (hover: hover) { .social:hover { background: #fff; color: #050506; translate: 0 -3px; } }
.contact__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 8px; }

/* Homepage contact rows: spacing between the description, the detail rows, and the social links. */
.contact__rows { margin-bottom: 28px; }

/* Channel rows: the homepage closing CTA's three direct contacts, in the same full-width-row
   language as .svc__item (icon, big label, hover slide) instead of a second boxed form — the
   form itself lives only on /contact (.cx-* namespace, untouched by this). */
.cta-rows { display: grid; gap: 10px; }
.cta-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 2vw, 22px);
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px); border-radius: 20px; background: var(--card); color: var(--ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 0 0 1px var(--edge); transition: background 0.4s; }
.cta-row__ico { color: var(--teal-hi); }
.cta-row__body { display: grid; gap: 2px; transition: translate 0.55s var(--ease); }
.cta-row__t { font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.375rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
.cta-row__v { font-size: 14px; color: var(--mute); }
.cta-row__go { color: var(--mute); transition: translate 0.4s var(--ease), color 0.4s; }
.cta-row--static { pointer-events: none; }
.cta-row:focus-visible { outline-offset: -2px; }
.cta-row:focus-visible .cta-row__body { translate: 8px 0; }
.cta-row:focus-visible .cta-row__go { translate: 4px 0; color: var(--teal-hi); }
@media (hover: hover) {
  .cta-row:hover { background: var(--card-2); }
  .cta-row:hover .cta-row__body { translate: 8px 0; }
  .cta-row:hover .cta-row__go { translate: 4px 0; color: var(--teal-hi); }
}
.lines { display: grid; gap: 6px; margin-top: 36px; }
.line { display: inline-flex; align-items: center; gap: 12px; padding-block: 8px; font-size: 17px; color: var(--ink-2);
  background: linear-gradient(currentColor, currentColor) 30px 100% / 0 1px no-repeat; transition: background-size 0.45s var(--ease), color 0.3s; }
.line .ico { color: var(--teal-hi); }
.line:focus-visible { color: var(--ink); background-size: calc(100% - 30px) 1px; }
@media (hover: hover) { .line:hover { color: var(--ink); background-size: calc(100% - 30px) 1px; } }
.form { display: grid; gap: clamp(22px, 2.6vw, 30px); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 2.6vw, 30px); }
.field { position: relative; }
.field span { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--mute); transition: color 0.3s; }
.field input, .field select, .field textarea { width: 100%; padding: 4px 2px 14px; border: 0; border-bottom: 1.5px solid var(--edge-2); border-radius: 0;
  background: transparent; color: var(--ink); font-size: 17px; outline: none; transition: border-color 0.4s var(--ease); }
.field textarea { min-height: 150px; padding-top: 2px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--mute); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--teal); }
.field:focus-within span { color: var(--teal-hi); }
.field--select select { appearance: none; padding-right: 26px; cursor: pointer; }
.field--select select:invalid { color: var(--mute); }
.field--select select option { color: var(--ink); background: var(--bg); }
.field__chev { position: absolute; right: 2px; bottom: 16px; pointer-events: none; color: var(--mute); transition: translate 0.3s var(--ease), color 0.3s; }
.field--select:focus-within .field__chev { translate: 0 2px; color: var(--teal-hi); }
.form .b { min-height: 64px; margin-top: 10px; border-radius: 12px; }
.form__note { font-size: 13px; color: var(--mute); }

/* Homepage brief form: filled dark rounded fields, placeholder doubling as the label (a visually-
   hidden <span> keeps a real label for screen readers) — the plain boxed-input look, no separate
   label row, matching the reference's contact split. */
.bform { display: grid; gap: 14px; }
.bfield { position: relative; }
.bfield span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bfield input, .bfield select, .bfield textarea { width: 100%; padding: 20px 22px; border: 0; border-radius: 14px;
  background: var(--card); color: var(--ink); font-size: 16px; font-family: inherit; outline: none;
  box-shadow: inset 0 0 0 1px var(--edge); transition: box-shadow 0.3s, background 0.3s; }
.bfield textarea { min-height: 150px; resize: vertical; }
.bfield input::placeholder, .bfield textarea::placeholder { color: var(--mute); }
.bfield input:focus-visible, .bfield select:focus-visible, .bfield textarea:focus-visible { box-shadow: inset 0 0 0 1.5px var(--teal-hi); background: var(--card-2); }
.bfield--select select { appearance: none; padding-right: 48px; cursor: pointer; }
.bfield--select select:invalid { color: var(--mute); }
.bfield--select select option { color: var(--ink); background: var(--card); }
.bfield__chev { position: absolute; right: 22px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--mute); }
.bform .b { min-height: 64px; margin-top: 4px; border-radius: 12px; }
/* Honeypot (see the form markup comment): off-screen for everyone, not just visually — real
   keyboard/AT users can never reach or perceive it, only a bot filling every field blindly can. */
.bform__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form__note[data-state='sending'] { color: var(--mute); }
.form__note[data-state='ok'] { color: var(--teal-hi); }
.form__note[data-state='error'] { color: #ff8a7a; }
.form__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Footer: tagline + podcast channel card + socials, three link columns, giant dotted wordmark ---------- */
.ft { overflow: hidden; padding-top: clamp(28px, 3.5vw, 48px); background: var(--bg); color: var(--ink); box-shadow: inset 0 1px 0 var(--edge); }
.ft__top { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 36px); }
.ft__pillars { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); letter-spacing: 0.02em; color: var(--sub-a); }
.ft__pillars span { color: var(--teal); opacity: 0.6; }
.ft__tag { max-width: 34ch; margin-bottom: 12px; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.5; color: var(--head-a); }
.ft__follow .ft__social { display: flex; flex-wrap: nowrap; gap: clamp(3px, 0.4vw, 6px); margin-top: 10px; }
/* Podcast footer: logo above the description, icon row under it, arrow on external links */
.ft__logo { display: block; width: clamp(96px, 8vw, 120px); height: auto; margin-bottom: 12px; }
.ft__tag--sm { font-size: 14px; line-height: 1.55; }
.ft__intro .ft__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ft__ext { display: inline-block; margin-left: 4px; font-size: 0.8em; color: var(--mute); }
/* Original brand logos in their own colours (Footer.astro); hover lifts the button and rings it in the brand colour */
.ft__soc { display: grid; place-items: center; width: clamp(24px, 2.5vw, 38px); height: clamp(24px, 2.5vw, 38px); flex: none; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--edge-2);
  transition: translate 0.3s var(--ease), box-shadow 0.3s; }
.ft__soc svg { width: 56%; height: 56%; }
.ft__soc--wa { --c: #25d366; } .ft__soc--ig { --c: #d6249f; } .ft__soc--in { --c: #0a66c2; } .ft__soc--be { --c: #1769ff; } .ft__soc--yt { --c: #f00; } .ft__soc--mail { --c: #ea4335; } .ft__soc--pin { --c: #e60023; }
@media (hover: hover) { .ft__soc:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1.5px var(--c); } }
.ft__soc:focus-visible { box-shadow: inset 0 0 0 1.5px var(--c); }
.ft__h { margin-bottom: 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--head-a); }
.ft__col ul { display: grid; gap: 4px; }
.ft__col p { max-width: 24ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ft__link { display: inline-block; padding-block: 3px; font-size: 15px; color: var(--ink-2);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 1px) / 0 1px no-repeat; transition: background-size 0.45s var(--ease), color 0.3s; }
.ft__link:focus-visible { background-size: 100% 1px; color: var(--head-a); }
@media (hover: hover) { .ft__link:hover { background-size: 100% 1px; color: var(--head-a); } }
/* Footer wordmark: an interactive particle "wiseup" on a canvas (motion/footer-wordmark.ts: the dots fly in, scatter
   from the pointer and settle back). The invisible text below only sets the box size and the font the canvas samples. */
.ft__word { position: relative; margin: clamp(12px, 2vw, 28px) 0 0; user-select: none; }
.ft__canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.ft__word-text { display: block; visibility: hidden; padding-bottom: 0.1em; text-align: center;
  font-family: var(--font-mark); font-weight: 500; font-size: clamp(3rem, 1rem + 10vw, 9rem); line-height: 0.9; letter-spacing: -0.02em; }
/* padding-right keeps the credit clear of the fixed lead-popup button (.lead-fab, about 84px in from the screen's right
   edge at most) once the page is scrolled to the bottom; zero on wide screens where the button sits in the gutter */
.ft__base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 8px 0 12px;
  padding-right: max(0px, calc(94px - max(var(--gx), (100vw - var(--maxw)) / 2)));
  font-size: 13px; color: var(--mute); }
.ft__credit { font-weight: 600; color: var(--head-a); }
@media (max-width: 991px) {
  .ft__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft__intro { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .ft__top { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  /* phones: the Follow Us heading and text are hidden, its social icons stay as a full-width row */
  .ft__follow { grid-column: 1 / -1; }
  .ft__follow > .ft__h, .ft__follow > p { display: none; }
  .ft__follow .ft__social { margin-top: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .hd { padding-inline: 24px; }
}
@media (max-width: 479px) {
  .hd { padding-inline: 16px; }
}
@media (max-width: 1100px) {
  .tiers, .loop__track { grid-template-columns: repeat(2, 1fr); }
  .about { grid-template-columns: 1fr; }
  .roots { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --head-h: 76px; }
  .hd { grid-template-columns: 1fr auto; inset-block-start: 14px; }
  .hd__nav, .hd__cta { display: none; }
  .hd__menu { display: inline-flex; }
  .contact, .roots { grid-template-columns: 1fr; }
  /* Contact: channel rows + socials stack above the form, one column. */
  .cx-grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .svc-head { grid-template-columns: 1fr; }
  .drum { perspective-origin: 0% 50%; }
  .drum__word { right: auto; left: 0; text-align: left; }
}
@media (max-width: 640px) {
  .tiers, .hgal__list, .loop__track { grid-template-columns: 1fr; }
  .rows { --tile: 72vw; }
  .tier__p { min-height: 0; }
  .contrast__rows { grid-template-columns: 1fr; }
  .hero { padding-top: calc(var(--head-h) * 0.6); }
  .strip { --cw: 62vw; --gap: 16px; margin-top: 64px; }
  .hero__orbit { width: 120vw; margin: -60vw 0 0 -60vw; }
  .stats__item { padding-right: 10px; }
  .stats dt { font-size: 13px; }
  .roots-head { grid-template-columns: 1fr; }
  .morph { justify-self: center; }
  .root { min-height: 0; }
  .cx-hero__foot { grid-template-columns: 1fr; }
  .cx-hero__cta { justify-content: flex-start; }
  .cx-chip__t { font-size: 14px; padding-inline: 12px 16px; }
  .cx-send__b { width: 100%; }
  .cx-msg__body { min-height: 0; padding-inline: 16px; }
  .cx-row { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: 'l go' 'v go'; gap: 6px 14px; padding-inline: 4px; }
  .cx-row__l { grid-area: l; }
  .cx-row__v { grid-area: v; }
  .cx-row__go { grid-area: go; width: 44px; height: 44px; }
  .cx-row--follow { grid-template-areas: 'l l' 'f f'; }
  .cx-follow { grid-area: f; grid-column: auto; }
}

/* Stale rules removed (2026-10-23): this whole block was tuned for the old full-bleed (100vw)
   hero artwork, before .hero__art was capped to min(60vw, 760px) for the rebuilt hero — the
   min-height: 70vw override alone was forcing a ~273px-tall empty box on mobile (the new capped
   image only renders ~104px tall at that width), leaving a large dead gap before the headline.
   .hero__word .hero__logo and .hero__title .hero__sub both target elements that no longer exist
   (the old full-bleed logo markup and the removed .hero__sub paragraph) — confirmed dead, not
   just unused-for-now, so removed rather than left stale. */


/* ---------- Hero digital aquarium (heroAqua() in motion/hero-aqua.ts) ---------- */
.aqua { position: absolute; inset: 0 0 auto; height: 100svh; min-height: 560px; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.aqua__fluid { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Pure white hero background on light theme, no gradient wash: the fluid canvas still paints
   itself every frame (see heroAqua() in motion/hero-aqua.ts) but is hidden here rather than made
   to draw nothing, so toggling back to dark needs no extra JS state. Floating icons stay — they're
   not a "shadow", just decoration — only the tinted gradient/vignette layer goes. */
:root[data-theme='light'] .aqua__fluid { display: none; }
.aqua__icons { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 40%; }
/* One icon: stacked layers in preserve-3d give the tile real thickness; the front face is glass. */
.aqua-ico { position: absolute; top: 100%; width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2);
  filter: blur(var(--blur, 0)) brightness(var(--dim, 1)); will-change: transform, opacity; opacity: 0; }
.aqua-ico__3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.aqua-ico__l, .aqua-ico__face { position: absolute; inset: 0; border-radius: 28%; }
.aqua-ico__l { background: linear-gradient(145deg, #aebdc3, #5f737b); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
.aqua-ico__face { display: grid; place-items: center; overflow: hidden; transform: translateZ(0.5px);
  background: linear-gradient(150deg, #f1f6f8, #e1eaee 55%, #c3d2d8);
  box-shadow: inset 0 1px 0 #fff, inset 0 -8px 16px rgb(70 100 112 / 0.28), inset 0 0 0 1px rgb(255 255 255 / 0.8), 0 12px 30px rgb(0 0 0 / 0.5); }
.aqua-ico__face svg { width: 56%; height: 56%; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.18)); }
/* soft reflection: a diagonal sheen that crosses the glass now and then */
.aqua-ico__shine { position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 0.7) 50%, transparent 62%); transform: translateX(-70%); animation: aqua-shine 9s ease-in-out infinite; }
@keyframes aqua-shine { 0%, 62% { transform: translateX(-70%); } 82%, 100% { transform: translateX(70%); } }
@media (prefers-reduced-motion: reduce) { .aqua-ico__shine { animation: none; } }

/* Hero letters: each letter is its own <svg>; they stack over one another in the same coordinate box
   (all depth layers first, then all white faces). The original inline svg only supplies the outlines. */
.hero-logo--src { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; }
/* 52vh cap added ("fit hero section inside 100vh", 2026-10-23): unlike .hero__art-photo, this
   JS-built stack (heroType() in motion/hero-type.ts) has its own independent width rule and
   doesn't reserve height via an aspect-ratio box the way the static image does, so on a short
   viewport it kept rendering at its full 46vw/600px width regardless of the now-shrunk .hero__art
   around it — overlapping the headline below it in dark theme (the only theme that still uses
   this dynamic wordmark). Same vh value as .hero__art-photo's cap, tuned there, reused here. */
.hero-letters { position: relative; grid-area: 1 / 1; width: 100%; }
/* drop-shadow removed from light theme per explicit request ("in light version remove shadows") —
   it was added two entries up to match the reference render's own soft shadow, but read as an
   unwanted dark blob under the letters against a white page. Kept in dark theme (not flagged
   there, and a dark shadow barely shows against an already-dark background anyway). */
:root:not([data-theme='light']) .hero-letters { filter: drop-shadow(0 14px 22px rgb(0 0 0 / 0.18)); }
.hero-l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-l--face use[data-ch] { pointer-events: visiblePainted; }
/* The visible letter face: always white (was var(--ink), flipping to near-black in light theme) —
   matched to a user-supplied 3D render reference (glossy white letters, green glow), explicit
   request ("remove this image and make it similar fonts with this 3d effects") to drop the flat
   image wordmark and make the dynamic letters look like it instead, in both themes now. */
.hero-face-ink { fill: #ffffff; }
/* Light theme: a rich green face (gradient defined in hero-type.ts) so the word is solid against the white page;
   the lime extruded rim stays. White faces on a white page only showed as an outline. */
:root[data-theme='light'] .hero-face-ink { fill: url(#hero-face-green); }
@media (max-width: 700px) { .hero__art { width: 90vw; } .hero-letters { margin-top: 2%; } }

/* ---------- Hero heading as real text (heroMark() in motion/hero-mark.ts) ---------- */
@font-face { font-family: 'Lobster'; src: url('../fonts/lobster-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
.hero__art--mark { width: auto; aspect-ratio: auto; margin-inline: auto; display: grid; place-items: center; perspective: 1100px; }
.hero__mark { --dx: 0.62; --dy: 0.78; margin: 0; display: flex; justify-content: center; align-items: baseline; font-family: 'Lobster', 'Figtree', cursive; font-weight: 400;
  font-size: clamp(4rem, min(27vw, 26vh), 16rem); line-height: 1.05; letter-spacing: -0.012em; transform-style: preserve-3d; will-change: transform; }
@media (min-width: 701px) { .hero__mark { font-size: clamp(5rem, min(14.5vw, 25vh), 17rem); } }
.hero__mark { padding-bottom: 0.2em; }
.mk__l { position: relative; display: inline-block; cursor: pointer; will-change: transform; }
.mk__in { position: relative; display: inline-block; }
.mk__d, .mk__f, .mk__h, .mk__s { display: block; font-style: normal; font-weight: 400; text-decoration: none; white-space: pre; }
.mk__f, .mk__h, .mk__s { position: absolute; inset: 0; }
/* depth: the extruded side wall, one text-shadow per step, shaded lime at the face down to near-black (the light follows the pointer via --dx/--dy) */
.mk__d { color: #062e0e; text-shadow:
    calc(var(--dx, 0.62) * 0.0062em) calc(var(--dy, 0.78) * 0.0062em) 0 #9ad84a,
    calc(var(--dx, 0.62) * 0.0124em) calc(var(--dy, 0.78) * 0.0124em) 0 #7dc142,
    calc(var(--dx, 0.62) * 0.0186em) calc(var(--dy, 0.78) * 0.0186em) 0 #60ab3a,
    calc(var(--dx, 0.62) * 0.0248em) calc(var(--dy, 0.78) * 0.0248em) 0 #439533,
    calc(var(--dx, 0.62) * 0.0310em) calc(var(--dy, 0.78) * 0.0310em) 0 #267f2b,
    calc(var(--dx, 0.62) * 0.0372em) calc(var(--dy, 0.78) * 0.0372em) 0 #1d7528,
    calc(var(--dx, 0.62) * 0.0434em) calc(var(--dy, 0.78) * 0.0434em) 0 #1b6f26,
    calc(var(--dx, 0.62) * 0.0496em) calc(var(--dy, 0.78) * 0.0496em) 0 #196923,
    calc(var(--dx, 0.62) * 0.0558em) calc(var(--dy, 0.78) * 0.0558em) 0 #176321,
    calc(var(--dx, 0.62) * 0.0620em) calc(var(--dy, 0.78) * 0.0620em) 0 #155d1f,
    calc(var(--dx, 0.62) * 0.0682em) calc(var(--dy, 0.78) * 0.0682em) 0 #13571d,
    calc(var(--dx, 0.62) * 0.0744em) calc(var(--dy, 0.78) * 0.0744em) 0 #11511b,
    calc(var(--dx, 0.62) * 0.0806em) calc(var(--dy, 0.78) * 0.0806em) 0 #0f4b18,
    calc(var(--dx, 0.62) * 0.0868em) calc(var(--dy, 0.78) * 0.0868em) 0 #0d4516,
    calc(var(--dx, 0.62) * 0.0930em) calc(var(--dy, 0.78) * 0.0930em) 0 #0b3f14,
    calc(var(--dx, 0.62) * 0.0992em) calc(var(--dy, 0.78) * 0.0992em) 0 #093912,
    calc(var(--dx, 0.62) * 0.1054em) calc(var(--dy, 0.78) * 0.1054em) 0 #073310,
    calc(var(--dx, 0.62) * 0.1116em) calc(var(--dy, 0.78) * 0.1116em) 0 #062e0e; }
.mk__f { background: linear-gradient(155deg, #3fb24a 0%, #1b7a28 45%, #0c4d18 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* hover colour: a flowing lime gradient that fades in per letter (opacity driven by the wave) */
.mk__h { opacity: 0; background: linear-gradient(110deg, #9be22f, #d8f05a 35%, #7fd130 65%, #b6ea3a); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: mk-flow 2.4s linear infinite; }
@keyframes mk-flow { to { background-position: -220% 0; } }
/* glossy sweep: a white band travelling across the face (position driven per letter) */
.mk__s { background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.85) 50%, transparent 62%); background-size: 300% 100%; background-position: 160% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; pointer-events: none; }
.hero__art--mark::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -4%; height: 14%; background: radial-gradient(closest-side, rgb(10 60 20 / 0.28), transparent); filter: blur(10px); z-index: -1; }
@media (prefers-reduced-motion: reduce) { .mk__h { animation: none; } }

/* ---------- Hero, light theme: soft aurora + dotted grid ---------- */
.hero__grid { display: none; }
:root[data-theme='light'] .hero__grid { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgb(20 100 30 / 0.16) 1.1px, transparent 1.4px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 42%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 55% 50% at 50% 42%, #000 15%, transparent 72%); }
:root[data-theme='light'] .hero__glow {
  background:
    radial-gradient(34% 40% at 16% 28%, rgb(190 226 80 / 0.42), transparent 72%),
    radial-gradient(32% 38% at 86% 24%, rgb(110 200 130 / 0.32), transparent 72%),
    radial-gradient(40% 36% at 72% 92%, rgb(216 238 150 / 0.5), transparent 72%),
    radial-gradient(60% 55% at 50% 48%, rgb(255 255 255 / 0.9), transparent 70%);
  animation: hero-aurora 22s ease-in-out infinite alternate; }
@keyframes hero-aurora { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { :root[data-theme='light'] .hero__glow { animation: none; } }

/* ---------- Hero, Lunar-template layout (heroLunar() in motion/hero-lunar.ts) ----------
   Values measured from lunarpro-agency.webflow.io (CSS px): navbar 112 tall in flow, hero section padding-top 120, content
   column max 874 with a 48.31px gap, subtitle Inter 26/500, 150px to the slider, slider = 480x550 cards (radius 40, 24 gap,
   10% black mask) on matrix3d below, a 793px mint glow at 5% opacity (blur 175) centred at the top, and a cursor dot. */
.hero--lunar { --nav: 112px; justify-content: flex-start; height: calc(var(--nav) + 1250px); min-height: 0; padding-top: calc(var(--nav) + 120px); overflow: hidden; background: var(--bg); }
@media (min-width: 1280px) { .hero--lunar { height: calc(var(--nav) + 1210px); } }
@media (min-width: 1440px) { .hero--lunar { height: calc(var(--nav) + 1230px); } }
@media (min-width: 1920px) { .hero--lunar { height: calc(var(--nav) + 1320px); } }
@media (max-width: 991px) { .hero--lunar { --nav: 96px; height: calc(var(--nav) + 1100px); padding-top: calc(var(--nav) + 64px); } }
@media (max-width: 767px) { .hero--lunar { height: calc(var(--nav) + 900px); } }
@media (max-width: 479px) { .hero--lunar { height: calc(var(--nav) + 880px); } }
.hero--lunar::after { display: none; }
.hero--lunar::before { content: ''; position: absolute; left: 0; right: 0; top: -85px; z-index: 0; width: 793px; height: 717px; margin-inline: auto; border-radius: 793px; pointer-events: none;
  background-image: linear-gradient(#e2f2a4, #beda52); filter: blur(175px); opacity: 0.05; }
.lunar { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; row-gap: 48.31px; width: 100%; padding-inline: 40px; text-align: center; }
/* The wordmark SVG is Syne 470 at the reference's size: 1 svg unit = 1px, cap height 225 (the Lunar logo is 874 units wide
   for 5 letters; "wiseup" is 961). The negative margins trim the i-dot above the cap line and the p descender below the
   reference box, so the cap top and the subtitle sit exactly where the Lunar logo's do. */
.lunar__mark { --w: min(961px, 100%); margin: 0; line-height: 0; width: var(--w); }
.lunar__img { display: block; width: 100%; height: auto; margin-top: calc(var(--w) * -0.023614); margin-bottom: calc(var(--w) * -0.062816); }
/* Wordmark details (inline SVG, motion in hero-lunar.ts): per-letter paths sharing one gradient, a glowing mint i-dot
   that breathes, and a glossy light sweep (::after masked by the same SVG) crossing the word every few seconds. */
.lunar__img svg { display: block; width: 100%; height: auto; overflow: visible; }
.lunar__img { position: relative; }
.wm__l { transform-box: fill-box; transform-origin: 50% 100%; }
.wm__dot { transform-box: fill-box; transform-origin: 50% 50%; filter: drop-shadow(0 0 10px rgb(190 218 82 / 0.75)) drop-shadow(0 0 28px rgb(190 218 82 / 0.35)); animation: wm-breathe 3.2s ease-in-out infinite; }
@keyframes wm-breathe { 50% { filter: drop-shadow(0 0 16px rgb(190 218 82 / 0.95)) drop-shadow(0 0 44px rgb(190 218 82 / 0.5)); } }
.lunar__img::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url('../brand/hero-wiseup-lunar-logo-big.svg') center / 100% 100% no-repeat; mask: url('../brand/hero-wiseup-lunar-logo-big.svg') center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 0.75) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 150% 0;
  animation: wm-sheen 7s ease-in-out 2.4s infinite; }
@keyframes wm-sheen { 0% { background-position: 150% 0; } 30%, 100% { background-position: -60% 0; } }
:root[data-theme='light'] .wm__s0 { stop-color: #0a0a0b; }
:root[data-theme='light'] .wm__s1 { stop-color: #6c6c72; }
:root[data-theme='light'] .wm__d0 { stop-color: #e2f2a4; }
:root[data-theme='light'] .wm__d1 { stop-color: #beda52; }
:root[data-theme='light'] .wm__dot { filter: drop-shadow(0 0 10px rgb(190 218 82 / 0.7)); animation-name: wm-breathe-l; }
@keyframes wm-breathe-l { 50% { filter: drop-shadow(0 0 18px rgb(190 218 82 / 0.95)); } }
@media (prefers-reduced-motion: reduce) { .wm__dot, .lunar__img::after { animation: none; } }
.lunar__sub { margin: 0; font-family: 'Inter', var(--font); font-size: 26px; font-weight: 500; letter-spacing: -0.262px; line-height: 1.2em; color: var(--head-a); }
:root:not([data-theme='light']) .lunar__sub { color: #fff; }
@media (max-width: 991px) { .lunar { padding-inline: 24px; } }
@media (max-width: 767px) {
  .lunar { row-gap: 24px; padding-inline: 16px; }
  .lunar__mark { --w: min(347px, 100%); }
  .lunar__sub { font-size: 20px; font-weight: 400; }
}
.hero--lunar .hero__orbit { display: none; }
/* slider */
.hero--lunar .strip { --cw: 480px; --gap: 24px; flex: none; position: relative; z-index: 1; width: 100%; height: 550px; min-height: 0; margin-top: 150px; pointer-events: none; }
.hero--lunar .strip__plane { position: relative; left: auto; top: auto; width: 100%; height: 550px; display: flex; justify-content: center; align-items: center; perspective: 2000px;
  transform: matrix3d(0.861948, -0.151932, -0.521293, 0, 0.588289, 0.815538, 0.0925517, 0, 0.422618, -0.397299, 0.814584, 0, -300, 0, 0, 1); transform-origin: 50% 50%; }
.hero--lunar .strip__track { flex: none; gap: 24px; padding-right: 24px; }
.hero--lunar .strip__card { width: 480px; height: 550px; aspect-ratio: auto; border-radius: 40px; box-shadow: none; }
.hero--lunar .strip__card::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 40px; background: #000; opacity: 0.1; pointer-events: none; }
.hero__edge { display: none; position: absolute; top: 0; bottom: 0; z-index: 3; pointer-events: none; }
@media (min-width: 1920px) { .hero__edge { display: block; } }
.hero__edge--l { left: 0; width: 291px; background: linear-gradient(270deg, rgb(1 1 1 / 0), #000); }
.hero__edge--r { right: 0; width: 270px; background: linear-gradient(270deg, #000, rgb(0 0 0 / 0)); }
:root[data-theme='light'] .hero__edge--l { background: linear-gradient(270deg, rgb(255 255 255 / 0), #fff); }
:root[data-theme='light'] .hero__edge--r { background: linear-gradient(270deg, #fff, rgb(255 255 255 / 0)); }
/* cursor dot (cursorDot() in hero-lunar.ts): 14px mint, blurred, trails the pointer; hidden below 992px like the reference */
.cursor-dot { position: fixed; left: 0; top: 0; z-index: 1000; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 100%; background: #beda52; filter: blur(5px); pointer-events: none; }
@media (max-width: 991px), (hover: none) { .cursor-dot { display: none; } }

/* ---------- Header, Lunar-template metrics (nav pill 64 tall: 8px padding, 1px #2c2c2c border, #0d0d0f; links 14/500 #999, 6px dots) ---------- */
.hd { inset: 24px 0 auto; width: min(100% - 80px, 1360px); }
.hd__nav { gap: 4px; padding: 8px; border: 1px solid #2c2c2c; border-radius: 200px; background: #0d0d0f; box-shadow: none; }
.hd__link { gap: 8px; min-height: 0; padding: 10px 18px; border: 1px solid transparent; border-radius: 67px; font-size: 14px; font-weight: 500; line-height: 1.71em; color: #999; }
.hd__dot { width: 6px; height: 6px; background: #999; }
@media (max-width: 991px) { .hd { width: calc(100% - 48px); } }
@media (max-width: 767px) { .hd { width: calc(100% - 32px); } }

/* ---------- Process cards, creative pass ----------
   The photo sits in an inset rounded frame with a giant outlined step number over it, a case-study tag and an arrow chip;
   a pointer-following spotlight lights the card and its rim (cardSpot() in main.ts sets --mx/--my), the photo zooms and
   the number fills in on hover, and a lime progress bar under the text runs across. */
.proc__card { --mx: 50%; --my: 0%; isolation: isolate; transition: translate 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.proc__card::before { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity 0.5s;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgb(190 218 82 / 0.95), rgb(190 218 82 / 0.35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.proc__card::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.5s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgb(190 218 82 / 0.1), transparent 65%); }
.proc__stage { margin: 12px 12px 0; border-radius: calc(var(--r-card) - 10px); height: clamp(250px, 23vw, 320px); }
.proc__stage::before { z-index: 2; background: linear-gradient(180deg, rgb(0 0 0 / 0.05) 35%, rgb(0 0 0 / 0.72)); }
.proc__shot { transition: scale 1.1s var(--ease), filter 1.1s var(--ease); filter: saturate(0.85); }
.proc__num { position: absolute !important; z-index: 3 !important; left: 18px; bottom: -0.16em; font-size: clamp(6rem, 9vw, 9rem); font-weight: 700; line-height: 1; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / 0.75); transition: color 0.6s var(--ease), -webkit-text-stroke-color 0.6s var(--ease), translate 0.8s var(--ease); }
.proc__tag { position: absolute !important; z-index: 3 !important; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; color: #fff; background: rgb(10 10 12 / 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); }
.proc__tag-dot { width: 6px; height: 6px; border-radius: 50%; background: #beda52; box-shadow: 0 0 10px #beda52; }
.proc__go { position: absolute !important; z-index: 3 !important; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: #fff; background: rgb(10 10 12 / 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  transition: rotate 0.6s var(--ease), background 0.4s, color 0.4s; }
.proc__meta { position: relative; z-index: 1; padding-top: clamp(20px, 2.2vw, 26px); }
.proc__step { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #beda52; }
.proc__step span { color: var(--sub-b); }
.proc__h { margin-top: 10px; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.proc__p { margin-top: 10px; max-width: 42ch; font-size: 15px; line-height: 1.55; color: var(--mute); }
.proc__bar { display: block; height: 2px; margin-top: 22px; border-radius: 2px; background: var(--edge-2); overflow: hidden; }
.proc__bar span { display: block; height: 100%; width: 22%; border-radius: inherit; background: linear-gradient(90deg, #beda52, #d8ec8a); transition: width 0.9s var(--ease); }
@media (hover: hover) {
  .proc__card:hover { translate: 0 -6px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 0 0 1px var(--edge), 0 30px 60px -30px rgb(0 0 0 / 0.6); }
  .proc__card:hover::before, .proc__card:hover::after { opacity: 1; }
  .proc__card:hover .proc__shot { scale: 1.07; filter: saturate(1.1); }
  .proc__card:hover .proc__num { color: #beda52; -webkit-text-stroke-color: #beda52; translate: 0 -6px; }
  .proc__card:hover .proc__go { rotate: 45deg; background: #beda52; color: #0a0a0b; }
  .proc__card:hover .proc__bar span { width: 100%; }
}
:root[data-theme='light'] .proc__step, :root[data-theme='light'] .proc__card:hover .proc__num { color: #5e8a14; }
:root[data-theme='light'] .proc__card:hover .proc__num { -webkit-text-stroke-color: #5e8a14; }

/* ---------- Brand lime, playful layer ----------
   Bright #BEDA52 is used as a highlight and for shapes (never as text on white: it is ~1.6:1 there); large accent words
   are ink with a lime marker or a hand-drawn lime underline, and the olive (--teal-hi) stays only on small text/icons. */
:root[data-theme='light'] { --drum-c: #5e8a14; }
.drum__word { font-weight: 700; }
/* lifted 50px above the heading row's baseline, only while heading and drum sit side by side;
   stacked (<=900px) the lift would push the words up over the heading */
@media (min-width: 901px) { .drum { top: -50px; } }
.marker { background: linear-gradient(transparent 58%, #beda52 58%, #beda52 92%, transparent 92%); padding-inline: 0.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:root[data-theme='light'] .seq__c { color: #5e8a14; -webkit-text-fill-color: #5e8a14; }
:root[data-theme='light'] .contrast__statement .contrast__bold { color: #5e8a14; }
:root:not([data-theme='light']) .marker { background: none; }
/* hand-drawn underline: an inline SVG squiggle, drawn on when it scrolls in (.is-drawn set by scribbles() in main.ts) */
.scribble { position: relative; white-space: nowrap; }
.scribble::after { content: ''; position: absolute; left: -2%; right: -2%; bottom: -0.12em; height: 0.32em; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C 40 6, 80 20, 120 12 S 200 4, 240 13 S 285 18, 297 9' fill='none' stroke='%23beda52' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.6,.1,.2,1) 0.2s; }
.scribble.is-drawn::after, html:not(.motion) .scribble::after { clip-path: inset(0 0 0 0); }
.sh__h { position: relative; z-index: 0; }
/* lime tag chips */
.eyebrow { background: #11150a; color: #fff; box-shadow: none; transition: translate 0.5s var(--ease); }
.eyebrow__dot { background: #beda52; box-shadow: 0 0 8px rgb(190 218 82 / .7); }
/* pills contrast with the lime buttons: black pill on light pages, white pill on dark ones */
:root:not([data-theme='light']) .eyebrow { background: #fff; color: #11150a; }
:root:not([data-theme='light']) .eyebrow__dot { background: #5e8a14; box-shadow: none; }
@media (hover: hover) { .eyebrow:hover { translate: 0 -2px; } }
/* rotating "Since 2018 · Kerala" sticker beside the hero wordmark */
.lunar { position: relative; }
.sticker { position: absolute; z-index: 3; top: -34px; left: calc(50% + min(470px, 44vw) - 70px); width: 118px; height: 118px; rotate: 12deg; pointer-events: auto; transition: scale 0.5s var(--ease); }
.sticker svg { width: 100%; height: 100%; display: block; animation: sticker-spin 16s linear infinite; filter: drop-shadow(0 10px 20px rgb(17 21 10 / 0.18)); }
.sticker text { font: 700 11.5px/1 'Inter', var(--font); letter-spacing: 0.22em; fill: #11150a; }
.sticker__star { transform-origin: 60px 60px; animation: sticker-spin 16s linear infinite reverse; }
@keyframes sticker-spin { to { rotate: 360deg; } }
@media (hover: hover) { .sticker:hover { scale: 1.08; } }
@media (max-width: 767px) { .sticker { width: 78px; height: 78px; top: -52px; left: auto; right: 6px; } }
/* lime blobs: soft organic shapes peeking in from the edges, slowly turning */
section:has(> .blob) { position: relative; overflow: clip; }
section:has(> .blob) > :not(.blob) { position: relative; z-index: 1; }
.blob { position: absolute; z-index: 0; width: clamp(180px, 22vw, 340px); height: auto; opacity: 0.9; pointer-events: none; animation: blob-turn 28s linear infinite; }
.blob--a { top: 34%; right: -8%; }
.blob--b { top: 18%; left: -9%; width: clamp(140px, 16vw, 260px); animation-direction: reverse; }
.blob--c { bottom: -6%; right: -6%; width: clamp(160px, 18vw, 300px); }
/* stacked layouts: text runs edge to edge on the left, so blobs keep to the right edge and shrink */
@media (max-width: 900px) {
  .blob { width: clamp(120px, 26vw, 200px); }
  .blob--b { top: 6%; left: auto; right: -14%; }
  .root { min-height: 0; }
}
@keyframes blob-turn { 50% { rotate: 180deg; scale: 1.08; } to { rotate: 360deg; } }
:root:not([data-theme='light']) .blob { opacity: 0.14; }
@media (prefers-reduced-motion: reduce) { .sticker svg, .sticker__star, .blob { animation: none; } .scribble::after { transition: none; clip-path: none; } }

/* ---------- Brand hover for list items (services, FAQ, contact rows) ----------
   Hover fills the row with brand lime #BEDA52; text, numbers, icons and dots go near-black on it. An open service or
   FAQ keeps a soft lime tint with a lime dot. */
.svc__item, .faq__item, .cta-row { transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), translate 0.5s var(--ease); }
.svc__t, .svc__n, .svc__ico, .svc__dot, .faq__q h3, .faq__dot, .cta-row__t, .cta-row__v, .cta-row__ico, .cta-row__go { transition: color 0.35s, background 0.35s, scale 0.5s var(--ease), translate 0.55s var(--ease); }
.svc__item.is-open, .faq__item[open] { background: rgb(190 218 82 / 0.16); box-shadow: inset 0 0 0 1px rgb(190 218 82 / 0.55); }
.svc__item.is-open .svc__dot, .faq__item[open] .faq__dot { background: #beda52; }
@media (hover: hover) {
  .svc__item:hover, .faq__item:hover, .cta-row:hover { background: #beda52; box-shadow: 0 14px 30px -18px rgb(95 120 20 / 0.6); translate: 0 -2px; }
  .svc__item:hover .svc__t, .svc__item:hover .svc__n, .svc__item:hover .svc__ico, .faq__item:hover .faq__q h3,
  .cta-row:hover .cta-row__t, .cta-row:hover .cta-row__v, .cta-row:hover .cta-row__ico, .cta-row:hover .cta-row__go { color: #11150a; }
  .svc__item:hover .svc__dot, .faq__item:hover .faq__dot { background: #11150a; }
  .svc__item:hover .svc__panel, .faq__item:hover .faq__a { color: #2a3110; }
}

/* /podcast header: YouTube subscribe pill in place of the plan CTA (dark pill, red mark, divider + count) */
.hd__sub { display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 22px 0 18px; border-radius: 200px; background: #0d0d0f; border: 1px solid #2c2c2c; color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; transition: border-color .3s, background .3s, translate .4s var(--ease); }
.hd__sub-yt { width: 26px; height: auto; flex: none; transition: scale .4s var(--ease); }
.hd__sub-count { padding-left: 14px; border-left: 1px solid #3a3a3d; color: #a9a9ae; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.hd__sub:focus-visible { outline: 2px solid #beda52; outline-offset: 3px; }
@media (hover: hover) { .hd__sub:hover { border-color: #f00; background: #141416; } .hd__sub:hover .hd__sub-yt { scale: 1.12; } }
@media (max-width: 900px) { .hd__sub { height: 44px; padding: 0 14px; gap: 9px; font-size: 14px; } .hd__sub-yt { width: 22px; } .hd__sub-count { display: none; } }
@media (max-width: 420px) { .hd__sub-label { display: none; } .hd__sub { padding: 0 12px; } }

/* Header dock: at the very top the header floats free; once the page scrolls (.is-docked, header() in main.ts) the
   whole header (logo, nav pill and actions) sits on one dark frosted bar that hugs the header's own width, not the
   viewport, on a plain dark bar, so nothing floats bare over content when it returns on scroll-up. */
.hd { isolation: isolate; }
.hd::before { content: ''; position: absolute; inset: -9px -12px; border-radius: 200px; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease), inset .5s var(--ease); }
.hd::before { z-index: -1; background: #0d0d0f; }
.hd.is-docked::before { opacity: 1; }
.hd .hd__logo { padding-left: 10px; transition: padding .5s var(--ease); }
.hd .hd__logo img { transition: height .5s var(--ease), rotate .5s var(--ease), scale .5s var(--ease); }
.hd.is-docked .hd__logo img { height: clamp(34px, 3vw, 46px); }
.hd.is-docked .hd__logo--podcast img { height: clamp(36px, 3.3vw, 48px); }
/* on the dark bar the white WiseUp mark stays white, and the inner nav/CTA pills drop their own borders into it */
:root[data-theme='light'] .hd.is-docked .hd__logo:not(.hd__logo--podcast) img { filter: none; }
.hd.is-docked .hd__nav { border-color: transparent; background: rgb(255 255 255 / .04); }
@media (max-width: 900px) { .hd::before { inset: -7px -9px; } }

/* theme switcher sized to the header's buttons: CTA/subscribe height on desktop, the Menu button's below 900px */
.hd__theme { width: 58px; height: 58px; }
.hd__theme-ico { width: 22px; height: 22px; }
.hd__theme-ico .ico { width: 22px; height: 22px; }
@media (max-width: 900px) { .hd__theme { width: 50px; height: 50px; } .hd__theme-ico, .hd__theme-ico .ico { width: 20px; height: 20px; } }
@media (max-width: 900px) { .hd__sub { height: 50px; } }

/* ---------- Process cards, illustrated (step-N.webp) ----------
   Wide cards so each 3:2 illustration shows whole: the stage takes the image's own ratio, a lighter bottom fade keeps
   the floating UI in the art readable, keyword chips under the copy light up lime on hover. */
@media (min-width: 900px) { .motion .proc__card { width: clamp(500px, 44vw, 700px); } }
.proc__stage { height: auto; aspect-ratio: 3 / 2; background: #0b0d09; }
.proc__stage::before { background: linear-gradient(180deg, rgb(0 0 0 / 0) 58%, rgb(0 0 0 / .55)); }
.proc__shot { object-position: 50% 45%; filter: saturate(1); }
.proc__num { font-size: clamp(4.5rem, 7vw, 7rem); }
.proc__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.proc__chips li { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--edge); transition: background .4s var(--ease), color .4s, box-shadow .4s; }
@media (hover: hover) {
  .proc__card:hover .proc__chips li { background: rgb(190 218 82 / .16); box-shadow: inset 0 0 0 1px rgb(190 218 82 / .5); }
  .proc__card:hover .proc__chips li:nth-child(2) { transition-delay: .05s; }
  .proc__card:hover .proc__chips li:nth-child(3) { transition-delay: .1s; }
  .proc__card:hover .proc__chips li:nth-child(4) { transition-delay: .15s; }
  .proc__card:hover .proc__shot { scale: 1.05; filter: saturate(1.15) brightness(1.05); }
}

/* ---------- Phones only: paired buttons share a row, buttons and pills a step more compact ---------- */
@media (max-width: 599px) {
  .b { min-height: 46px; padding: 0 18px; gap: 8px; font-size: 14px; }
  .b--small { min-height: 42px; padding: 0 16px; font-size: 13px; }
  .b__ico, .b__ico .ico { width: 14px; height: 14px; }
  :is(.seq__ctas, .work-more, .pc-hero__row, .pc-feat__row) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  :is(.seq__ctas, .work-more, .pc-hero__row, .pc-feat__row) > .b { flex: 1 1 0; min-width: 0; width: auto; padding: 0 12px; font-size: 13px; white-space: nowrap; }
  :is(.seq__ctas, .work-more, .pc-hero__row, .pc-feat__row) > .b .b__ico { display: none; }
  .seq__ctas { width: 100%; justify-self: stretch; align-self: stretch; }
  .eyebrow { padding: 7px 14px 7px 12px; gap: 8px; font-size: 12.5px; }
  .eyebrow__dot { width: 6px; height: 6px; }
}
@media (max-width: 379px) {
  :is(.seq__ctas, .work-more, .pc-hero__row, .pc-feat__row) > .b { padding: 0 9px; font-size: 12.5px; letter-spacing: -0.01em; }
}

/* ---------- Hero strip, video reels: every card keeps its video's shape (--ar = w/h) at one shared height, so
   portrait testimonials and landscape AI/CGI films show whole; cards take the pointer (hover plays, heroStrip()). */
.hero--lunar .strip__card { --h: 480px; height: var(--h); width: calc(var(--h) * var(--ar, .5625)); aspect-ratio: auto; pointer-events: auto; cursor: pointer; background: #0b0c0a; }
.hero--lunar .strip__card img, .hero--lunar .strip__video { object-fit: cover; }
.hero--lunar .strip__card::after { transition: opacity .4s; }
.hero--lunar .strip__card.is-playing::after { opacity: 0; }
.strip__tag { position: absolute; left: 18px; bottom: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 36px); padding: 7px 14px 7px 8px; border-radius: 999px;
  background: rgb(10 10 12 / .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .35s; }
.strip__tag span { padding: 3px 9px; border-radius: 999px; background: #beda52; color: #11150a; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.strip__card.is-playing .strip__tag { opacity: 0; }
@media (max-width: 991px) { .hero--lunar .strip__card { --h: 460px; } }
@media (max-width: 767px) { .hero--lunar .strip__card { --h: 380px; border-radius: 26px; } .hero--lunar .strip__card::after { border-radius: 26px; } .strip__tag { left: 12px; bottom: 12px; font-size: 12px; } }

/* Process cards, simplified: shorter 16:9 image, title + one line, nothing else */
@media (min-width: 900px) { .motion .proc__card { width: clamp(420px, 34vw, 540px); } }
.proc__stage { aspect-ratio: 16 / 9; }
.proc__stage::before { display: none; }
.proc__meta { padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2vw, 28px) clamp(22px, 2.2vw, 28px); }
.proc__h { margin-top: 0; }
.proc__card::before, .proc__card::after { display: none; }

/* ---------- About: fit test (redesign) ----------
   Statement left, body right; below, two cards: a quiet "Not our fit" card with crosses and a lime "Built for you"
   card with ticks. "Posts fade." gets a lime strike that draws in as it scrolls into view. */
.about { align-items: end; }
.contrast__statement { max-width: none; font-size: clamp(2.25rem, 1.35rem + 3.2vw, 4.25rem); font-weight: 500; }
.contrast__strike { position: relative; justify-self: start; }
.contrast__strike::after { content: ''; position: absolute; left: -2%; right: -2%; top: 54%; height: .09em; border-radius: 99px; background: #beda52; transform-origin: left; }
@supports (animation-timeline: view()) {
  .contrast__strike::after { animation: strike-in linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
}
@keyframes strike-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(36px, 4.5vw, 64px); }
.fit__card { border-radius: var(--r-card); padding: clamp(24px, 2.6vw, 36px); }
.fit__card--no { background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); color: var(--mute); }
.fit__card--yes { background: #beda52; color: #11150a; }
.fit__h { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(16px, 2vw, 24px); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.fit__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; }
.fit__ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fit__card--no .fit__ico { background: var(--card-2); box-shadow: inset 0 0 0 1px var(--edge); }
.fit__card--yes .fit__ico { background: #11150a; color: #beda52; }
.fit__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.4vw, 18px); }
.fit__list li { font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.4rem); line-height: 1.3; letter-spacing: -0.015em; }
.fit__card--no .fit__list li { color: var(--mute); }
.fit__card--yes .fit__list li { font-weight: 500; }
@media (max-width: 767px) { .fit { grid-template-columns: 1fr; } }

/* ---------- Responsive pass (all pages) ----------
   1. One gutter system: content edges line up with the header's edges at every width (the header uses the Lunar
      metrics: 1360px max, 40px gutters; 24px below 992px; 16px below 768px).
   2. One section rhythm on phones (44px top and bottom), so every page breathes the same.
   3. Small phones: the header keeps the logo readable (icon-only Menu, slightly smaller round buttons). */
:root { --maxw: 1360px; --gx: 40px; }
@media (max-width: 991px) { :root { --gx: 24px; } }
@media (max-width: 767px) { :root { --gx: 16px; } }
@media (max-width: 767px) { .sec { padding-block: 44px; } .sec.page-head { padding-top: calc(var(--head-h) + 40px); } }
.hd__logo { flex: none; min-width: max-content; min-height: 44px; }
@media (max-width: 379px) {
  .hd__actions { gap: 8px; }
  .hd__theme, .hd__sub { width: 44px; height: 44px; }
  .hd__sub { padding: 0; justify-content: center; }
  .hd__menu { height: 44px; padding: 0 14px; }
  .hd__menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hd__logo img { height: 34px; }
  .hd__logo--podcast img { height: 38px; }
}
@media (max-width: 899px) { .hd__actions > * { flex: none; } }
@media (max-width: 379px) { .hd__sub { width: 44px; min-width: 44px; } .hd__sub-label, .hd__sub-count { display: none; } }

/* ---------- Hero strip: flat + pinned state (heroStrip() in main.ts) ----------
   Play buttons appear only while the strip is flat; a played card shows a live video with controls above it. */
.strip__play { position: absolute; left: 50%; top: 50%; z-index: 4; display: grid; place-items: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; border: 0; border-radius: 50%; cursor: pointer;
  background: #beda52; color: #11150a; box-shadow: 0 0 0 10px rgb(190 218 82 / .25), 0 14px 30px -10px rgb(0 0 0 / .5); opacity: 0; scale: .6; pointer-events: none; transition: opacity .35s, scale .45s cubic-bezier(.2,.8,.2,1); }
.strip__play svg { width: 26px; height: 26px; fill: currentColor; translate: 2px 0; }
.strip.is-flat .strip__play { opacity: 1; scale: 1; pointer-events: auto; }
.strip.is-flat .strip__play:hover { scale: 1.08; }
.strip__card.is-live .strip__play, .strip__card.is-live .strip__tag { opacity: 0; pointer-events: none; }
.strip__live { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; object-fit: contain; background: #000; }
.hero--lunar .strip.is-flat { pointer-events: auto; }
@media (max-width: 767px) { .strip__play { width: 56px; height: 56px; margin: -28px 0 0 -28px; } .strip__play svg { width: 20px; height: 20px; } }
/* Contact on phones: the page's sections are one flow (head, channels + form, map), so keep the tight joins the
   44px rhythm overrode: ~40px between blocks, 64px before the footer */
@media (max-width: 767px) {
  .sec.page-head.cx-hero { padding-bottom: 28px; }
  .sec.cx-sec { padding-top: 12px; padding-bottom: 28px; }
  .sec.cx-sec.cx-map-sec { padding-bottom: 64px; }
}
/* Phones (footer): the social icons are bigger and centred; the wiseup wordmark is hidden and the copyright
   and credit line sits centred. */
@media (max-width: 599px) {
  .ft__follow .ft__social { justify-content: center; flex-wrap: nowrap; gap: 10px; }
  .ft__soc { width: 46px; height: 46px; }
  .ft__soc svg { width: 24px; height: 24px; }
  .ft__word { display: none; }
  .ft__base { justify-content: center; text-align: center; }
}

/* ===== lead popup (Base.astro, every page) ===== */
/* Lead popup (components/LeadModal.astro, motion/lead.ts). White frame, dark card fading to deep olive, notched
   outline fields, footer row with the blob mascot, a 3D lime send button and a red close button. Bottom sheet on
   phones, centred modal from 700px up. */

/* ---- mascot: flat lime chat bubble with a face (svg in LeadModal.astro) ---- */
.lead-bot { --s: 56px; display: block; flex: none; width: var(--s); height: var(--s); animation: lb-bob 3.2s ease-in-out infinite; }
.lead-bot--sm { --s: 38px; }
.lead-bot--lg { --s: 96px; }
.lead-bot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lb__body { fill: #beda52; }
.lb__eyes rect, .lb__dots circle { fill: #11150a; }
.lb__smile, .lb__joy path { fill: none; stroke: #11150a; stroke-width: 2.4; stroke-linecap: round; }
.lb__eyes { transform-box: fill-box; transform-origin: center; animation: lb-blink 4.5s infinite, lb-look 9s ease-in-out infinite; }
.lb__face { animation: lb-face 9s steps(1) infinite; }
.lb__dots { opacity: 0; animation: lb-typing 9s steps(1) infinite; }
.lb__dots circle { transform-box: fill-box; transform-origin: center; animation: lb-dot 1s ease-in-out infinite; }
.lb__dots circle:nth-child(2) { animation-delay: .15s; }
.lb__dots circle:nth-child(3) { animation-delay: .3s; }
.lb__joy { display: none; }
.lead-bot--happy .lb__eyes, .lead-bot--happy .lb__dots { display: none; }
.lead-bot--happy .lb__joy { display: inline; }
.lead-bot--happy .lb__face { animation: none; }
/* while the visitor types, the mascot glances toward the form */
.lead.is-typing .lead__foot .lb__eyes { animation: none; translate: 1.5px -1px; transition: translate .25s; }
@keyframes lb-bob { 50% { translate: 0 -3px; } }
@keyframes lb-blink { 0%, 46%, 50%, 100% { scale: 1 1; } 48% { scale: 1 .12; } }
@keyframes lb-look { 0%, 30%, 100% { translate: 0 0; } 35%, 45% { translate: -2px 0; } 50%, 60% { translate: 2px 0; } 65% { translate: 0 0; } }
/* every 9s: about 2s of "typing" (face hidden, dots bouncing) */
@keyframes lb-face { 0%, 74% { opacity: 1; } 75%, 97% { opacity: 0; } 98% { opacity: 1; } }
@keyframes lb-typing { 0%, 74% { opacity: 0; } 75%, 97% { opacity: 1; } 98% { opacity: 0; } }
@keyframes lb-dot { 0%, 100% { translate: 0 0; } 40% { translate: 0 -2.5px; } }

/* ---- floating launcher ---- */
.lead-fab { position: fixed; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); z-index: 60; display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 18px 7px 7px; border: 0; border-radius: 999px; background: #11150a; color: #fff; font: 600 14px/1 var(--font, Inter, system-ui, sans-serif); cursor: pointer;
  box-shadow: 0 10px 28px -12px rgb(0 0 0 / .45);
  translate: 0 0; transition: translate .45s cubic-bezier(.2,.8,.2,1), opacity .3s, box-shadow .3s; }
.lead-fab.is-away { translate: 0 calc(100% + 40px); opacity: 0; pointer-events: none; }
.lead-fab:focus-visible { outline: 2px solid #beda52; outline-offset: 3px; }
@media (hover: hover) { .lead-fab:hover { translate: 0 -2px; box-shadow: 0 14px 32px -12px rgb(0 0 0 / .5); } }
@media (max-width: 599px) { .lead-fab__label { display: none; } .lead-fab { padding: 6px; } }

/* ---- dialog ---- */
.lead { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
.lead[open] { display: grid; place-items: end center; }
.lead::backdrop { background: rgb(5 6 3 / .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: lead-fade .4s ease both; }
.lead.is-closing::backdrop { animation: lead-fade .3s ease reverse both; }
.lead__frame { position: relative; width: min(100%, 620px); max-height: calc(100dvh - 12px); display: flex; flex-direction: column; padding: 12px 12px 0;
  border-radius: 34px 34px 0 0; background: #fff; box-shadow: 0 -20px 60px -20px rgb(0 0 0 / .5); animation: lead-up .55s cubic-bezier(.16,1,.3,1) both; }
.lead.is-closing .lead__frame { animation: lead-down .32s cubic-bezier(.7,0,.84,0) both; }
:root:not([data-theme='light']) .lead__frame { background: #1a1b17; }
@media (min-width: 700px) {
  .lead[open] { place-items: center; }
  .lead__frame { border-radius: 38px; padding: 12px; max-height: calc(100dvh - 40px); animation-name: lead-pop; }
  .lead.is-closing .lead__frame { animation-name: lead-drop; }
}

.lead__card { position: relative; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: 26px; padding: clamp(22px, 4vw, 34px) clamp(18px, 4vw, 34px) clamp(18px, 3vw, 26px);
  background: radial-gradient(120% 70% at 100% 100%, #3c5a12 0%, rgb(60 90 18 / 0) 60%), radial-gradient(60% 40% at 0% 0%, rgb(190 218 82 / .08), transparent 70%), linear-gradient(170deg, #0b0c09 0%, #121509 55%, #1d2a0b 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); }
.lead__card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.lead__head { position: relative; margin-bottom: 22px; }
.lead__kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 12px; border-radius: 99px; background: rgb(190 218 82 / .12); color: #d5ec7c; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.lead__live { width: 7px; height: 7px; border-radius: 50%; background: #beda52; box-shadow: 0 0 0 0 rgb(190 218 82 / .7); animation: lead-live 1.8s ease-out infinite; }
.lead__title { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; color: #fff; }
.lead__title span:last-child { color: #beda52; }
.lead__sub { margin: 10px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.55; color: rgb(255 255 255 / .62); }

/* ---- notched outline fields ---- */
.lead__form { position: relative; display: grid; gap: 14px; }
.lead__row { display: grid; gap: 14px; }
@media (min-width: 560px) { .lead__row { grid-template-columns: 1fr 1fr; } }
.lf { position: relative; min-width: 0; margin: 0; padding: 0 20px 2px; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; transition: border-color .3s, box-shadow .3s, background .3s; }
.lf legend { padding: 0 8px; margin-left: 10px; font-size: 13px; font-weight: 700; color: #fff; line-height: 1; }
.lf legend em { font-style: normal; color: #ff5a4e; margin-left: 2px; }
.lf input, .lf select, .lf textarea { display: block; width: 100%; padding: 6px 4px 14px; border: 0; background: transparent; color: #fff; font: 400 15px/1.4 inherit; font-family: inherit; outline: none; }
.lf input::placeholder, .lf textarea::placeholder { color: rgb(255 255 255 / .38); }
.lf select { appearance: none; cursor: pointer; padding-right: 28px; }
.lf select:invalid { color: rgb(255 255 255 / .38); }
.lf select option { color: #11150a; }
.lf__chev { position: absolute; right: 20px; top: 50%; width: 18px; height: 18px; margin-top: -6px; color: rgb(255 255 255 / .7); pointer-events: none; }
.lf--area { border-radius: 26px; }
.lf textarea { resize: none; min-height: 72px; }
.lf:focus-within { border-color: #beda52; background: rgb(190 218 82 / .05); box-shadow: 0 0 0 4px rgb(190 218 82 / .12); }
.lf:focus-within legend { color: #beda52; }
.lf.is-bad { border-color: #ff5a4e; box-shadow: 0 0 0 4px rgb(255 90 78 / .12); animation: lead-shake .4s; }
.lf.is-good { border-color: rgb(190 218 82 / .55); }
.lead__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead__note { margin: 0; min-height: 1em; font-size: 13px; color: rgb(255 255 255 / .6); }
.lead__note[data-state='error'] { color: #ff8a80; }
.lead__note a { color: #beda52; text-decoration: underline; }

/* ---- success panel ---- */
.lead__done { display: grid; justify-items: center; gap: 10px; padding: 36px 10px 26px; text-align: center; }
.lead__done[hidden] { display: none; }
.lead__done h3 { margin: 10px 0 0; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; }
.lead__done p { margin: 0; max-width: 34ch; color: rgb(255 255 255 / .65); }
.lead.is-done .lead__head, .lead.is-done .lead__form { display: none; }

/* ---- footer row: mascot, send, close ---- */
.lead__foot { display: flex; align-items: center; gap: 12px; padding: 14px 6px calc(14px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { .lead__foot { padding: 14px 4px 4px; } }
.lead__trust { margin-right: auto; font-size: 13px; line-height: 1.25; color: #5d6052; }
.lead__trust b { display: block; font-size: 16px; color: #11150a; }
:root:not([data-theme='light']) .lead__trust { color: rgb(255 255 255 / .55); }
:root:not([data-theme='light']) .lead__trust b { color: #fff; }
@media (max-width: 480px) { .lead__trust { display: none; } .lead__foot .lead-bot { --s: 48px; margin-right: auto; } }
.lead__send { display: inline-flex; align-items: center; gap: 10px; flex: none; height: 52px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: 600 15px/1 inherit; font-family: inherit; color: #11150a; background: #beda52; transition: background .25s, translate .25s; }
.lead__send svg { width: 18px; height: 18px; transition: translate .3s cubic-bezier(.2,.8,.2,1); }
.lead__send:focus-visible, .lead__close:focus-visible { outline: 2px solid #11150a; outline-offset: 3px; }
.lead__send[disabled] { opacity: .6; cursor: progress; }
@media (hover: hover) { .lead__send:hover { background: #cfe86a; } .lead__send:hover svg { translate: 3px 0; } .lead__close:hover { background: #e6e6e1; color: #11150a; } }
.lead.is-done .lead__send { display: none; }
.lead__close { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 1px solid #e3e3de; border-radius: 50%; cursor: pointer; color: #3b3d35; background: #f4f4f0; transition: background .25s, color .25s; }
:root:not([data-theme='light']) .lead__close { background: #24251f; border-color: #33352d; color: #e8e8e3; }
@media (hover: hover) { :root:not([data-theme='light']) .lead__close:hover { background: #2e3028; color: #fff; } }
@media (max-width: 420px) { .lead__send { height: 48px; padding: 0 18px; font-size: 14px; } .lead__close { width: 48px; height: 48px; } }

/* field entrance stagger */
.lead[open] .lead__head, .lead[open] .lf { animation: lead-in .5s cubic-bezier(.16,1,.3,1) both; }
.lead[open] .lf:nth-of-type(1) { animation-delay: .08s; }
.lead[open] .lead__row .lf:nth-child(1) { animation-delay: .13s; }
.lead[open] .lead__row .lf:nth-child(2) { animation-delay: .18s; }
.lead[open] .lf--select { animation-delay: .23s; }
.lead[open] .lf--area { animation-delay: .28s; }

@keyframes lead-fade { from { opacity: 0; } }
@keyframes lead-up { from { translate: 0 100%; } }
@keyframes lead-down { to { translate: 0 100%; } }
@keyframes lead-pop { from { opacity: 0; translate: 0 40px; scale: .96; } }
@keyframes lead-drop { to { opacity: 0; translate: 0 30px; scale: .97; } }
@keyframes lead-in { from { opacity: 0; translate: 0 12px; } }
@keyframes lead-live { 70% { box-shadow: 0 0 0 7px rgb(190 218 82 / 0); } 100% { box-shadow: 0 0 0 0 rgb(190 218 82 / 0); } }
@keyframes lead-shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
@media (prefers-reduced-motion: reduce) {
  .lead-bot, .lb__eyes, .lb__face, .lb__dots, .lb__dots circle, .lead__live, .lead__frame, .lead::backdrop, .lead[open] .lead__head, .lead[open] .lf, .lf.is-bad { animation: none !important; }
}

/* ---- fit on screen, no scrollbar ----
   Wide screens: a wider modal with the heading left and the form right, so it is about half as tall.
   Short screens: tighter spacing, a smaller heading and a shorter description box. The card can still scroll
   on very small phones, but never shows a scrollbar. */
.lead__card { scrollbar-width: none; }
.lead__card::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .lead__frame { width: min(100% - 48px, 960px); }
  .lead__card { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); column-gap: clamp(28px, 3.4vw, 48px); align-items: center; }
  .lead__head { margin: 0; }
  .lead__title { font-size: clamp(1.9rem, 1.2rem + 1.4vw, 2.5rem); }
  .lead__done { grid-column: 1 / -1; }
}
@media (max-height: 820px) {
  .lead__card { padding-block: 22px 18px; }
  .lead__head { margin-bottom: 16px; }
  .lead__kicker { margin-bottom: 10px; }
  .lead__form, .lead__row { gap: 10px; }
  .lf input, .lf select, .lf textarea { padding-bottom: 10px; }
  .lf textarea { min-height: 52px; }
  .lead__foot { padding-top: 10px; }
}
@media (max-height: 700px) {
  .lead__title { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 1.9rem); }
  .lead__sub { display: none; }
  .lead__kicker { display: none; }
  .lf textarea { min-height: 40px; }
  .lead-bot { --s: 44px; }
  .lead__send, .lead__close { height: 46px; }
  .lead__close { width: 46px; }
}

/* launcher: icon only (the label stays for screen readers) */
.lead-fab { padding: 9px; gap: 0; }
.lead-fab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lead-fab .lead-bot { --s: 40px; }

/* left column content: perks + WhatsApp line (wide screens only; phones keep the short version) */
.lead__perks, .lead__or { display: none; }
@media (min-width: 900px) {
  .lead__perks { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgb(255 255 255 / .1); display: grid; gap: 12px; }
  .lead__perks li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgb(255 255 255 / .85); }
  .lead__perks svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgb(190 218 82 / .16); fill: none; stroke: #beda52; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .lead__or { display: block; margin: 20px 0 0; font-size: 13.5px; color: rgb(255 255 255 / .55); }
  .lead__or a { color: #beda52; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  /* roomier form */
  .lead__card { padding: clamp(28px, 3.2vw, 40px); align-items: center; }
  .lead__form, .lead__row { gap: 16px; }
  .lead__frame { width: min(100% - 48px, 1020px); }
}
/* short but wide screens: keep the left column, trim the form a little instead */
@media (min-width: 900px) and (max-height: 700px) {
  .lead__kicker { display: inline-flex; }
  .lead__sub { display: block; }
  .lead__card { padding: 24px 32px; }
  .lead__form, .lead__row { gap: 13px; }
  .lead__perks { margin-top: 16px; padding-top: 14px; gap: 9px; }
  .lead__or { margin-top: 14px; }
  .lf textarea { min-height: 44px; }
}
@media (min-width: 900px) and (max-height: 600px) { .lead__perks li:nth-child(3), .lead__or, .lead__sub { display: none; } }

/* Hero strip carousel arrows: visible only while the strip is flat (.is-flat, set by the pin). */
.strip-nav { position: absolute; right: clamp(20px, 4vw, 56px); bottom: -64px; z-index: 3; display: flex; gap: 10px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .4s, transform .4s; }
.strip.is-flat .strip-nav { opacity: 1; transform: none; pointer-events: auto; }
.strip-nav__btn { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: #beda52; color: #11150a; cursor: pointer; transition: background-color .3s, transform .3s; }
.strip-nav__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .strip-nav__btn:hover { background: #d8ec8a; transform: translateY(-2px); } }
.strip-nav__btn:focus-visible { outline: 2px solid #beda52; outline-offset: 3px; }
/* Phones and tablets: the hero clips below the cards, so the arrows sit over the cards' bottom-right corner. */
@media (max-width: 991px) {
  .strip-nav { right: 16px; bottom: 64px; gap: 8px; }
  .strip-nav__btn { width: 44px; height: 44px; box-shadow: 0 4px 14px rgb(0 0 0 / .35); }
  .strip-nav__btn svg { width: 20px; height: 20px; }
}
/* Phones: in the gap under the cards. Tablets: the cards reach the hero's bottom edge, so above the caption pill. */
@media (max-width: 767px) { .strip-nav { bottom: 28px; } }
@media (min-width: 768px) and (max-width: 991px) { .strip-nav { bottom: 6px; } }

/* GROWING (#growing): a rising growth line with real counters, then the four core powers. Hidden states only apply
   with JS on (.js), so without JS everything shows; reduced motion adds .is-in at once and skips the transitions. */
.grow__chart { --gp: clamp(20px, 4vw, 56px); position: relative; overflow: hidden; margin-top: clamp(8px, 2vw, 24px); padding: clamp(28px, 4vw, 56px) var(--gp) 0; border-radius: clamp(20px, 2.4vw, 32px); background: var(--card); box-shadow: inset 0 0 0 1px var(--edge-2); }
/* the line has its own band under the numbers, edge to edge, so it never runs through a label */
.grow__chart { display: flex; flex-direction: column; }
.grow__svg { order: 2; display: block; flex: none; width: calc(100% + 2 * var(--gp)); max-width: none; height: clamp(120px, 15vw, 220px); margin: clamp(20px, 3vw, 36px) calc(-1 * var(--gp)) 0; }
.grow__line { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1.5 1.5; stroke-dashoffset: 0; }
.grow__stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.grow__stats b { display: block; font-family: var(--font-mark, inherit); font-size: clamp(2.2rem, 1.2rem + 3vw, 4.4rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--head-a); font-variant-numeric: tabular-nums; }
.grow__stats li > span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--mute); }
.grow__h { margin: clamp(40px, 6vw, 72px) 0 clamp(16px, 2vw, 24px); font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; color: var(--head-a); }
.grow__power { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.pw { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 32px); border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--edge-2); transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; }
.pw__n { font-family: var(--font-mark, inherit); font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem); font-weight: 600; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--mute); transition: color .4s, -webkit-text-stroke-color .4s; }
.pw__t { margin: 18px 0 12px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--head-a); }
.pw ul { display: grid; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.pw__bar { display: block; height: 4px; margin-top: auto; border-radius: 4px; background: var(--edge-2); overflow: hidden; }
.pw__bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8fa838, var(--teal)); transform-origin: left; }
@media (hover: hover) {
  .pw:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--teal), 0 18px 40px -24px rgb(190 218 82 / .5); }
  .pw:hover .pw__n { color: var(--teal); -webkit-text-stroke-color: var(--teal); }
}
:root[data-theme='light'] .grow__line { stroke: #8fa838; }
:root[data-theme='light'] .pw:hover { box-shadow: inset 0 0 0 1px #8fa838; }
:root[data-theme='light'] .pw:hover .pw__n { color: #8fa838; -webkit-text-stroke-color: #8fa838; }
/* the reveal: the line draws up, the area fades in, counters and cards rise in turn, the power bars charge */
.js .grow .grow__line { stroke-dashoffset: 1.5; transition: stroke-dashoffset 1.8s cubic-bezier(.65, 0, .35, 1); }
.js .grow .grow__area { opacity: 0; transition: opacity .9s ease 1.1s; }
.js .grow .grow__stats li, .js .grow .pw { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 110ms + .2s); }
.js .grow .pw { transition-delay: calc(var(--i) * 120ms + .6s); }
.js .grow .pw__bar i { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(var(--i) * 120ms + 1s); }
.js .grow.is-in .grow__line { stroke-dashoffset: 0; }
.js .grow.is-in .grow__area { opacity: 1; }
.js .grow.is-in .grow__stats li, .js .grow.is-in .pw { opacity: 1; transform: none; }
.js .grow.is-in .pw__bar i { transform: scaleX(1); }
/* after the reveal, hover runs at its own speed again */
.js .grow.is-in .pw { transition: opacity .8s ease, transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; }
@media (max-width: 991px) {
  .grow__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .grow__power { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grow__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grow__power { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .js .grow .grow__line, .js .grow .grow__area, .js .grow .grow__stats li, .js .grow .pw, .js .grow .pw__bar i { transition: none; }
}
/* proof band: slim stats with real icons and the press deck in one card, growth line as its floor */
.grow__chart { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(20px, 3vw, 48px); padding: clamp(26px, 2.6vw, 36px) clamp(22px, 3vw, 44px); background: var(--card); }
.grow__chart::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 90% at 100% 0%, rgb(190 218 82 / .10), transparent 70%), radial-gradient(40% 70% at 0% 100%, rgb(190 218 82 / .06), transparent 70%); }
.grow__svg { position: absolute; left: 0; right: 0; bottom: 0; order: 0; width: 100%; max-width: none; height: 34%; margin: 0; opacity: .55; }
.grow__stats { position: relative; z-index: 1; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.grow__stats li { position: relative; display: grid; align-content: start; gap: 4px; padding: 4px clamp(10px, 1.4vw, 22px); }
.grow__stats li + li::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(180deg, transparent, var(--edge-2) 30%, var(--edge-2) 70%, transparent); }
.grow__stats li:first-child { padding-left: 0; }
.gi { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 8px; border-radius: 13px; color: var(--teal); background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px var(--edge-2); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s, background .5s; }
.gi svg { display: block; width: 22px; height: 22px; max-width: none; }
.gi svg.gi__brand { width: 24px; height: 24px; }
.grow__stats li:hover .gi { transform: translateY(-3px) rotate(-6deg); background: rgb(190 218 82 / .12); box-shadow: inset 0 0 0 1px var(--teal), 0 10px 24px -10px rgb(190 218 82 / .6); }
.grow__stats b { font-size: clamp(1.9rem, 1rem + 1.7vw, 2.9rem); }
.grow__stats li > span { margin-top: 2px; font-size: 13px; line-height: 1.35; }

/* press deck, now inside the card */
.deck { position: relative; z-index: 1; top: auto; right: auto; width: clamp(250px, 21vw, 300px); margin-top: 28px; padding-right: 56px; box-sizing: border-box; cursor: pointer; }
.deck__stack { position: relative; aspect-ratio: 4 / 3; margin: 0; padding: 0; list-style: none; }
.deck__c { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--edge-2), 0 22px 44px -22px rgb(0 0 0 / .7);
  transform-origin: 20% 100%; transform: translate(calc(var(--p) * 13px), calc(var(--p) * -8px)) rotate(calc(var(--p) * 2.2deg)) scale(calc(1 - var(--p) * .04));
  opacity: calc(1 - var(--p) * .17); transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .7s; }
.deck__c img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top left; }
.deck__c p { position: absolute; inset: auto 0 0; margin: 0; padding: 30px 12px 10px; font-size: 12px; line-height: 1.3; color: #fff; background: linear-gradient(0deg, rgb(0 0 0 / .86), rgb(0 0 0 / 0)); }
.deck__c b { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #beda52; }
.deck__label { display: none; margin: 18px 0 0 2px; font-size: 12px; line-height: 1.5; color: var(--mute); }
.deck__label b { font-weight: 600; color: var(--ink-2); }
.deck__dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--teal); vertical-align: middle; }
@media (hover: hover) { .deck:hover .deck__c[style*='--p:0'] { transform: translate(-6px, -6px) rotate(-1.5deg); } }
.js .grow .deck { opacity: 0; transform: translateY(24px); transition: opacity .9s ease .6s, transform .9s cubic-bezier(.2, .8, .2, 1) .6s; }
.js .grow.is-in .deck { opacity: 1; transform: none; }
:root[data-theme='light'] .gi { background: rgb(0 0 0 / .04); }
@media (max-width: 1100px) { .grow__chart { grid-template-columns: 1fr; row-gap: 22px; } .grow__stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } .deck { margin: 4px 0 0 auto; width: min(300px, 80%); } .deck__label { display: block; } }
@media (max-width: 760px) { .grow__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; } .grow__stats li { padding-left: 0; } .grow__stats li + li::before { display: none; } .grow__stats li:last-child { grid-column: 1 / -1; } .grow__svg { height: 40%; } }
@media (prefers-reduced-motion: reduce) { .deck__c, .js .grow .deck, .gi { transition: none; } }

/* growing band lives inside the Our roots section now: one-line heading, then the proof band */
.grow { margin-top: clamp(48px, 6vw, 88px); }
.grow__title { margin: 0 0 clamp(16px, 2vw, 26px); font-size: clamp(1.7rem, 0.9rem + 2.5vw, 3.1rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; color: var(--head-a); white-space: nowrap; }
.grow__title span { color: var(--sub-a, var(--mute)); }

/* bigger press deck that breaks out of the band: it rises above the card's top edge into the heading row */
.grow__chart { overflow: visible; }
.grow__chart::before { border-radius: inherit; }
.grow__svg { border-radius: 0 0 clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px); }
.grow .deck { width: clamp(400px, 34vw, 500px); margin: clamp(-120px, -8vw, -80px) -8px -30px 0; padding-right: 92px; align-self: start; }
.grow .deck::before { content: ''; position: absolute; z-index: -1; left: 6%; right: 18%; top: 14%; bottom: -6%; background: radial-gradient(closest-side, rgb(190 218 82 / .28), transparent); filter: blur(34px); pointer-events: none; }
.grow .deck__c { border-radius: 18px; box-shadow: 0 0 0 1px var(--edge-2), 0 34px 60px -26px rgb(0 0 0 / .85); transform: translate(calc(var(--p) * 17px), calc(var(--p) * -12px)) rotate(calc(var(--p) * 2.4deg)) scale(calc(1 - var(--p) * .045)); }
.grow .deck__c p { padding: 44px 18px 15px; font-size: 14px; }
.grow .deck__c b { font-size: 11px; }
@media (hover: hover) { .grow .deck:hover .deck__c[style*='--p:0'] { transform: translate(-8px, -10px) rotate(-1.8deg); } }
@media (max-width: 1100px) { .grow .deck { width: min(380px, 86%); margin: 6px 0 0 auto; padding-right: 60px; } }

/* roomier stats: three across, two on the second row, beside the deck (desktop) */
@media (min-width: 1101px) {
  .grow__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(28px, 3vw, 40px); }
  .grow__stats li { padding-inline: clamp(18px, 2.2vw, 36px); }
  .grow__stats li:nth-child(3n + 1) { padding-left: 0; }
  .grow__stats li:nth-child(3n + 1)::before { display: none; }
  .grow__stats li > span { font-size: 14px; max-width: 22ch; }
  .grow__chart { padding-block: clamp(34px, 3.4vw, 50px); }
}
@media (min-width: 1101px) { .grow .deck { align-self: center; margin-top: -40px; margin-bottom: 0; } }

/* growing band: four stats (Projects delivered removed) */
@media (min-width: 1101px) {
  .grow__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grow__stats li:nth-child(3n + 1) { padding-left: clamp(18px, 2vw, 30px); }
  .grow__stats li:nth-child(3n + 1)::before { display: block; }
  .grow__stats li:nth-child(2n + 1) { padding-left: 0; }
  .grow__stats li:nth-child(2n + 1)::before { display: none; }
}
@media (max-width: 1100px) { .grow__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grow__stats li:last-child { grid-column: auto; } }
@media (max-width: 760px) { .grow__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; } }

/* growth vector: rising bars behind the stats that build up one by one when the band scrolls in */
.grow__bars { position: absolute; inset: 0; z-index: 0; display: flex; align-items: flex-end; gap: clamp(4px, .6vw, 9px); padding: 0 clamp(14px, 1.6vw, 26px); overflow: hidden; border-radius: inherit; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 55%); mask-image: linear-gradient(90deg, transparent 0, #000 55%); }
.grow__bars i { flex: 1 1 0; height: calc(var(--h) * 1%); min-width: 0; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, rgba(190, 218, 82, .34), rgba(190, 218, 82, .02)); box-shadow: inset 0 1px 0 rgba(190, 218, 82, .55); transform-origin: 50% 100%; }
.js .grow .grow__bars i { transform: scaleY(0); opacity: 0; transition: transform .9s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 45ms), opacity .5s ease calc(var(--i) * 45ms); }
.js .grow.is-in .grow__bars i { transform: scaleY(1); opacity: 1; }
.grow.is-in .grow__bars i:nth-last-child(-n + 3) { animation: grow-pulse 2.6s ease-in-out 2.2s infinite; }
@keyframes grow-pulse { 0%, 100% { filter: none; } 50% { filter: brightness(1.6) drop-shadow(0 0 8px rgba(190, 218, 82, .5)); } }
:root[data-theme='light'] .grow__bars i { background: linear-gradient(180deg, rgba(143, 168, 56, .4), rgba(143, 168, 56, .03)); }
@media (prefers-reduced-motion: reduce) { .js .grow .grow__bars i { transition: none; } .grow.is-in .grow__bars i { animation: none; } }
@media (max-width: 1100px) { .grow__bars { top: auto; height: 46%; -webkit-mask-image: none; mask-image: none; } .grow__bars i { opacity: .8; } }

/* simpler stats: just the number and its label, no icon tiles or dividers */
.grow__stats .gi { display: none; }
.grow__stats li::before, .grow__stats li + li::before { display: none !important; }
.grow__stats li { padding-inline: 0 !important; }
.grow__stats li > span:last-child { font-size: 15px; max-width: none; }
.grow__stats li b { font-size: clamp(2.6rem, 1.6rem + 3vw, 4rem); letter-spacing: -0.04em; line-height: 1; }
@media (min-width: 1101px) { .grow__stats { row-gap: clamp(36px, 4vw, 56px); column-gap: clamp(24px, 3vw, 48px); } }

/* slim band (desktop): four stats in one row, shorter card; the press deck keeps its size and rises above the card */
@media (min-width: 1101px) {
  .grow__chart { padding-block: clamp(26px, 2.4vw, 34px); }
  .grow__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; column-gap: clamp(16px, 2vw, 32px); }
  .grow__stats li b { font-size: clamp(2.2rem, 1.3rem + 2.4vw, 3.4rem); }
  .grow__stats li > span:last-child { font-size: 14px; margin-top: 6px; }
  .grow .deck { align-self: center; margin-top: calc(150px - 0.64 * clamp(400px, 34vw, 500px)); margin-bottom: 0; }
}

/* header: Resources dropdown, About / Contact, compact on small laptops, menu button below 1200px */
.hd__item { position: relative; display: flex; }
.hd__link--parent { cursor: pointer; background: none; font-family: inherit; }
.hd__chev { flex: none; transition: rotate .3s var(--ease); }
.hd__drop { position: absolute; top: 100%; left: 50%; min-width: 210px; padding-top: 14px; translate: -50% 6px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, translate .3s var(--ease), visibility 0s linear .25s; z-index: 5; }
.hd__drop::before { content: ''; position: absolute; inset: 14px 0 0; border-radius: 22px; background: #0d0d0f; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 24px 50px rgb(0 0 0 / .6); }
.hd__drop a { position: relative; display: block; margin: 6px; padding: 12px 16px; border-radius: 14px; font-size: 14px; font-weight: 500; color: #c9c9ce; white-space: nowrap; }
.hd__drop a:first-child { margin-top: 12px; } .hd__drop a:last-child { margin-bottom: 12px; }
.hd__drop a:hover, .hd__drop a:focus-visible { color: #fff; background: rgb(255 255 255 / .07); }
.hd__item:hover .hd__drop, .hd__item:focus-within .hd__drop { opacity: 1; visibility: visible; pointer-events: auto; translate: -50% 0; transition: opacity .25s ease, translate .3s var(--ease), visibility 0s; }
.hd__item:hover .hd__chev, .hd__item:focus-within .hd__chev { rotate: 180deg; }
.hd__item:hover .hd__link--parent, .hd__item:focus-within .hd__link--parent { color: #fff; background: rgb(255 255 255 / .06); }
.menu__label { padding: 14px 14px 4px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a8a92; }
.menu > a.menu__sub:not(.b) { padding-left: 34px; font-size: 16px; color: #d6d6db; }
.menu { max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 1439px) {
  .hd__nav { gap: 0; padding: 6px; }
  .hd__link { padding: 9px 12px; font-size: 13.5px; gap: 7px; }
  .hd__dot { display: none; }
  .hd__cta { width: 142px; }
}
@media (max-width: 1199px) {
  .hd { grid-template-columns: 1fr auto; }
  .hd__nav { display: none; }
  .hd__menu { display: inline-flex; }
}

/* phone menu: Resources is a collapsible group; the dots stay in the phone menu (only the pill nav hides them) */
.menu__group summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; font-size: 17px; cursor: pointer; color: #fff; }
.menu__group summary::-webkit-details-marker { display: none; }
.menu__group summary:focus-visible { background: #1d1d22; outline: none; }
.menu__group .hd__chev { margin-left: auto; transition: rotate .3s var(--ease); }
.menu__group[open] .hd__chev { rotate: 180deg; }
.menu__group[open] > summary { color: var(--teal); }
.menu__group a.menu__sub { display: block; padding: 12px 14px 12px 38px; border-radius: 12px; font-size: 16px; color: #d6d6db; }
.menu__group a.menu__sub:focus-visible { background: #1d1d22; }
@media (max-width: 1439px) { .menu .hd__dot { display: block; } }

/* header nav: never wrap a label, and let the nav take the room between the logo and the buttons */
.hd { grid-template-columns: auto minmax(0, 1fr) auto; }
.hd__nav { justify-self: center; max-width: 100%; }
.hd__link { white-space: nowrap; }
@media (min-width: 1440px) { .hd__link { padding: 10px 14px; gap: 8px; } }
@media (max-width: 1199px) { .hd { grid-template-columns: 1fr auto; } }
@media (max-width: 900px) { .hd { grid-template-columns: 1fr auto; } }

/* press deck as aesthetic book pages: bound on the left, page edges peeking out on the right, the top page turns */
.grow .deck__stack { perspective: 1600px; }
.grow .deck__c { border-radius: 3px 16px 16px 3px; transform-origin: 0 50%; background: #fbfaf6;
  transform: translate(calc(var(--p) * 8px), calc(var(--p) * -2.5px)); opacity: 1; filter: brightness(calc(1 - var(--p) * .075));
  box-shadow: 1px 0 0 rgb(255 255 255 / .55), 3px 1px 0 -1px rgb(0 0 0 / .35), 0 26px 50px -26px rgb(0 0 0 / .85);
  transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .8s; }
/* spine: a soft crease down the left edge */
.grow .deck__c::before { content: ''; position: absolute; z-index: 2; inset: 0 auto 0 0; width: 9%; pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / .42), rgb(0 0 0 / .1) 38%, rgb(255 255 255 / .16) 46%, transparent 62%); }
/* page corner curl, bottom right */
.grow .deck__c::after { content: ''; position: absolute; z-index: 2; right: 0; bottom: 0; width: 34px; height: 34px; pointer-events: none;
  background: linear-gradient(135deg, transparent 50%, rgb(0 0 0 / .3) 50%, #ece8dc 60%, #fff 100%); border-top-left-radius: 12px; box-shadow: -3px -3px 8px -3px rgb(0 0 0 / .35); }
@media (hover: hover) { .grow .deck:hover .deck__c[style*='--p:0'] { transform: perspective(1500px) rotateY(-9deg); } }
@media (prefers-reduced-motion: reduce) { .grow .deck__c { transition: none; } }

/* the stat band as a table: the press "books" stand on a tabletop along the bottom, the numbers sit above it */
.grow__chart { --tbl: 46px; --cr: clamp(20px, 2.4vw, 32px); }
.grow__chart::after { content: ''; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: var(--tbl); border-radius: 0 0 var(--cr) var(--cr); pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgb(255 255 255 / .05) calc(12.5% - 1px) 12.5%), linear-gradient(180deg, #23250f 0%, #15160a 38%, #0b0b06 100%);
  box-shadow: inset 0 1px 0 rgb(190 218 82 / .45), inset 0 14px 18px -14px rgb(190 218 82 / .22); }
:root[data-theme='light'] .grow__chart::after { background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgb(0 0 0 / .06) calc(12.5% - 1px) 12.5%), linear-gradient(180deg, #e9e6d6, #d9d6c4); box-shadow: inset 0 1px 0 rgb(0 0 0 / .14); }
/* the books rest on the table, with a contact shadow */
.grow .deck::after { content: ''; position: absolute; z-index: -1; left: 2%; right: 20%; bottom: -6px; height: 22px; background: radial-gradient(closest-side, rgb(0 0 0 / .7), transparent); filter: blur(7px); pointer-events: none; }
@media (min-width: 1101px) {
  .grow .deck { align-self: end; margin-bottom: -2px; margin-top: calc(152px - 0.64 * clamp(400px, 34vw, 500px)); }
}
@media (max-width: 1100px) {
  .grow__chart { --tbl: 34px; padding-bottom: 20px; }
}
@media (min-width: 1101px) {
  .grow__chart { padding-bottom: 54px; }
  .grow .deck { margin-bottom: -22px; margin-top: calc(174px - 0.64 * clamp(400px, 34vw, 500px)); }
}
@media (max-width: 1100px) {
  .grow .deck { display: flex; flex-direction: column; }
  .grow .deck__label { order: -1; margin: 0 0 16px 2px; }
}


/* the book */
.book { position: relative; z-index: 1; min-width: 0; container-type: inline-size; }
.book__desk { position: relative; }
.book__cover { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; padding: 2.6cqi 1.4cqi; border-radius: 1.6cqi;
  background: radial-gradient(90% 70% at 30% 20%, rgb(255 200 150 / .12), transparent 60%), radial-gradient(70% 60% at 80% 90%, rgb(0 0 0 / .35), transparent 70%), linear-gradient(135deg, #6a3c26, #4a2818 55%, #3a1e12);
  box-shadow: 0 2px 0 rgb(255 210 170 / .1) inset, 0 0 0 1px rgb(0 0 0 / .45), inset 0 0 26px rgb(0 0 0 / .5), 0 34px 50px -22px rgb(0 0 0 / .9), 0 10px 18px -8px rgb(0 0 0 / .6); }
.book__edge { display: block; width: 1.3cqi; margin-block: .4cqi .9cqi; background: repeating-linear-gradient(90deg, #e6d6b0 0 1px, #a99268 1px 2px); box-shadow: 0 .6cqi 0 -.1cqi #8f7a55; }
.book__edge--l { border-radius: .6cqi 0 0 .6cqi; }
.book__edge--r { border-radius: 0 .6cqi .6cqi 0; }
.book__spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 1.66; perspective: 2400px; cursor: pointer; }
.book__spread::after { content: ''; position: absolute; z-index: 5; top: 0; bottom: 0; left: 50%; width: 7cqi; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(70 45 20 / .28) 38%, rgb(40 24 10 / .55) 50%, rgb(70 45 20 / .28) 62%, transparent); }
.book__page { position: relative; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 3.4cqi 3.8cqi; color: #2b2015; }
.book__page--l { background: radial-gradient(80% 60% at 35% 30%, rgb(255 255 255 / .35), transparent 70%), linear-gradient(90deg, #e9dbb8, #f5ecd5 30%, #f2e7cd 78%, #d6c49c 96%, #b8a179); border-radius: .5cqi 0 0 .5cqi; }
.book__page--r { background: radial-gradient(80% 60% at 65% 30%, rgb(255 255 255 / .35), transparent 70%), linear-gradient(270deg, #e9dbb8, #f5ecd5 30%, #f2e7cd 78%, #d6c49c 96%, #b8a179); border-radius: 0 .5cqi .5cqi 0; padding-left: 5cqi; padding-bottom: 6.4cqi; }
.book__clip { position: relative; margin: 0; padding: .8cqi .8cqi 1.6cqi; background: #fff; transform: rotate(var(--tilt, -1.4deg)); box-shadow: 0 .8cqi 1.8cqi -.6cqi rgb(60 40 20 / .55), 0 0 0 1px rgb(60 40 20 / .08); }
.book__clip::before { content: ''; position: absolute; z-index: 1; top: -1.2cqi; left: 50%; width: 9cqi; height: 2.6cqi; transform: translateX(-50%) rotate(-3deg); background: rgb(235 228 200 / .72); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.book__clip img { display: block; width: 100%; max-width: none; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: top left; filter: sepia(.12) saturate(.92); }
.book__page--r p { margin: 0; }
.book__kick { font-size: max(10px, 1.45cqi); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #6f8120; }
.book__pub { margin-top: 1.4cqi !important; font-family: Georgia, 'Times New Roman', serif; font-size: max(11px, 1.8cqi); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b4f30; }
.book__head { margin-top: 1cqi !important; padding-bottom: 1.8cqi; border-bottom: 1px solid rgb(90 60 30 / .22); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(13px, 3.4cqi, 26px); font-weight: 700; line-height: 1.22; letter-spacing: -.01em; color: #24190f; text-wrap: balance; }
.book__no { margin-top: 1.4cqi !important; font-family: Georgia, serif; font-style: italic; font-size: max(11px, 1.5cqi); color: #7a6247; font-variant-numeric: tabular-nums; }
.book__corner { position: absolute; z-index: 6; width: 5.2cqi; height: 5.2cqi; pointer-events: none;
  background: linear-gradient(135deg, #f3dc95, #c49a3e 45%, #8a6420 80%, #d9b765);
  clip-path: polygon(0 0, 100% 0, 100% 34%, 34% 34%, 34% 100%, 0 100%); filter: drop-shadow(0 1px 1px rgb(0 0 0 / .5)); }
.book__corner--tl { top: .5cqi; left: .5cqi; }
.book__corner--tr { top: .5cqi; right: .5cqi; transform: scaleX(-1); }
.book__corner--bl { bottom: .5cqi; left: .5cqi; transform: scaleY(-1); }
.book__corner--br { bottom: .5cqi; right: .5cqi; transform: scale(-1); }
.book__next { position: absolute; z-index: 7; right: 5.4cqi; bottom: 4.6cqi; display: inline-flex; align-items: center; gap: .3em; min-height: 30px; padding: 0 1.1em; border: 1px solid rgb(90 60 30 / .35); border-radius: 99px; background: rgb(255 250 238 / .7); color: #4a3520; font: 600 max(11px, 1.45cqi)/1 var(--font, system-ui); cursor: pointer; transition: background .3s, color .3s, transform .3s; }
.book__next:hover { background: #24190f; color: #f5ecd5; transform: translateX(2px); }
.book__next:focus-visible { outline: 2px solid #beda52; outline-offset: 3px; }
.book__label { margin: 16px 0 0 4px; font-size: 13px; line-height: 1.5; color: rgb(255 238 214 / .6); }
.book__label b { font-weight: 600; color: rgb(255 246 228 / .88); }
.book__dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #beda52; vertical-align: middle; }

/* the turning leaf */
.book__leaf { position: absolute; z-index: 4; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: 0 50%; transform-style: preserve-3d; pointer-events: none; }
.book__face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.book__face--b { transform: rotateY(180deg); }
.book__shade { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; background: linear-gradient(90deg, rgb(40 24 10 / .55), rgb(40 24 10 / .12)); }
.book__face--b .book__shade { background: linear-gradient(270deg, rgb(40 24 10 / .55), rgb(40 24 10 / .12)); }

@container (max-width: 470px) { .book__kick { display: none; } .book__pub { margin-top: 0 !important; } .book__no { display: none; } .book__next { bottom: 3.6cqi; } }
@media (hover: hover) { .book__desk:hover .book__cover { transform: translateY(-3px); } }
.book__cover { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.book__label { color: var(--mute); }
.book__label b { color: var(--ink-2); }

/* ---- Growing band v5.2: a more real book, pages turn with scroll (2026-11-03) ---- */
/* leather with grain and a stitched border */
.book__cover { padding: 2.8cqi 1.6cqi 3.6cqi;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"),
    radial-gradient(90% 70% at 28% 18%, rgb(255 205 160 / .16), transparent 60%),
    radial-gradient(70% 60% at 82% 92%, rgb(0 0 0 / .4), transparent 70%),
    linear-gradient(135deg, #6c3d26, #4a2818 55%, #331a0f); }
.book__cover::after { content: ''; position: absolute; z-index: 0; inset: 1cqi; border: 1px dashed rgb(240 200 150 / .3); border-radius: 1cqi; pointer-events: none; }
.book__edge, .book__spread { position: relative; z-index: 1; }

/* the block of pages under the spread, and the page edges on the sides */
.book__spread { box-shadow: 0 .3cqi 0 -.02cqi #eadcb8, 0 .6cqi 0 -.06cqi #d9c8a0, 0 .9cqi 0 -.1cqi #c9b68b, 0 1.2cqi 0 -.14cqi #b5a079, 0 1.6cqi 1.2cqi -.4cqi rgb(0 0 0 / .5); border-radius: .5cqi; cursor: default; }
.book__edge { background: repeating-linear-gradient(90deg, #ece0c0 0 1px, #b8a37b 1px 2px, #ddd0ad 2px 3px); }

/* paper: fibre noise, rise from the spine, soft light from the top left */
.book__page { --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
.book__page--l { background: var(--paper), radial-gradient(120% 90% at 0% 0%, rgb(255 255 255 / .4), transparent 55%), radial-gradient(60% 40% at 50% 100%, rgb(120 90 50 / .12), transparent 70%),
  linear-gradient(90deg, #d9c8a0 0, #efe2c3 2.5%, #f6edd7 30%, #f3e8cf 70%, #e4d4ae 88%, #c9b385 96%, #a58e64 100%); }
.book__page--r { background: var(--paper), radial-gradient(120% 90% at 100% 0%, rgb(255 255 255 / .32), transparent 55%), radial-gradient(60% 40% at 50% 100%, rgb(120 90 50 / .12), transparent 70%),
  linear-gradient(270deg, #d9c8a0 0, #efe2c3 2.5%, #f6edd7 30%, #f3e8cf 70%, #e4d4ae 88%, #c9b385 96%, #a58e64 100%);
  justify-content: center; padding-bottom: 5cqi; }
.book__spread::after { width: 9cqi; background: linear-gradient(90deg, transparent, rgb(80 55 25 / .18) 30%, rgb(50 30 12 / .55) 49%, rgb(30 18 6 / .7) 50%, rgb(50 30 12 / .55) 51%, rgb(80 55 25 / .18) 70%, transparent); }

/* running heads, folios, the old "kick" line is not used any more */
.book__run { position: absolute; top: 2.2cqi; left: 0; right: 0; text-align: center; font-family: Georgia, serif; font-style: italic; font-size: max(10px, 1.3cqi); letter-spacing: .06em; color: #9a8262; }
.book__run::after { content: ''; display: block; width: 6cqi; height: 1px; margin: .8cqi auto 0; background: rgb(110 80 45 / .3); }
.book__folio { position: absolute; bottom: 2cqi; font-family: Georgia, serif; font-size: max(10px, 1.3cqi); color: #8a7254; font-variant-numeric: oldstyle-nums; }
.book__page--l .book__folio { left: 3.6cqi; }
.book__page--r .book__folio { right: 3.6cqi; }
.book__kick { display: none; }
.book__page--r .book__pub { margin-top: 0 !important; }
.book__head::first-letter { float: left; margin: .06em .08em 0 0; font-size: 2.35em; line-height: .82; color: #6f8a1f; }

/* clipping: pasted in with two strips of tape, paper slightly yellowed */
.book__clip { background: #fbf8ef; }
.book__clip::before { left: 12%; transform: rotate(-8deg); width: 8cqi; background: rgb(236 230 205 / .75); }
.book__clip::after { content: ''; position: absolute; z-index: 1; top: -1cqi; right: 10%; width: 8cqi; height: 2.4cqi; transform: rotate(7deg); background: rgb(236 230 205 / .75); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.book__clip img { filter: sepia(.22) saturate(.85) contrast(.96); mix-blend-mode: multiply; }

/* silk ribbon marker lying across the right page and out of the book */
.book__ribbon { position: absolute; z-index: 3; top: -1.6cqi; left: calc(50% + 7cqi); width: 2cqi; height: calc(100% + 7.6cqi); pointer-events: none;
  background: linear-gradient(90deg, #5d7016, #a9c53a 45%, #c6dd6a 55%, #6f8a1f);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 93%, 0 100%); filter: drop-shadow(.3cqi .4cqi .3cqi rgb(0 0 0 / .35)); transform: rotate(2.5deg); transform-origin: 50% 0; }

/* the turning leaf throws a shadow across the spread */
.book__cast { position: absolute; z-index: 3; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(40% 90% at 50% 50%, rgb(30 18 6 / .35), transparent 70%); }
.book__leaf { z-index: 4; display: none; }
.book__face { box-shadow: 0 0 1.4cqi rgb(40 24 10 / .25); }
.book__next, .book__label { display: none; }
.book__desk:hover .book__cover { transform: none; }

@container (max-width: 470px) { .book__run { top: 1.6cqi; } .book__run::after { display: none; } .book__folio { bottom: 1.4cqi; } .book__ribbon { width: 2.4cqi; } }
.book__ribbon { z-index: 6; left: calc(50% + .9cqi); width: 1.7cqi; transform: rotate(1.2deg); }

/* ---- Growing band v5.3: dark cover, no ribbon (2026-11-03) ---- */
.book__ribbon { display: none; }
.book__cover { background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"),
    radial-gradient(90% 70% at 28% 18%, rgb(255 255 255 / .07), transparent 60%),
    radial-gradient(70% 60% at 82% 92%, rgb(0 0 0 / .5), transparent 70%),
    linear-gradient(135deg, #24221f, #161513 55%, #0c0b0a);
  box-shadow: 0 1px 0 rgb(255 255 255 / .08) inset, 0 0 0 1px rgb(255 255 255 / .06), inset 0 0 26px rgb(0 0 0 / .7), 0 34px 50px -22px rgb(0 0 0 / .9), 0 10px 18px -8px rgb(0 0 0 / .6); }
.book__cover::after { border-color: rgb(255 255 255 / .16); }

/* ---- Growing band v5.4: hand-made textures, cut clippings, pencil line (2026-11-03) ---- */
.book__desk { transform: rotate(-.6deg); }
.book__cover { background: radial-gradient(80% 60% at 26% 14%, rgb(255 255 255 / .05), transparent 60%), url(../press/tex/leather.webp) center / cover, #191715; }
.book__cover::after { border-color: rgb(255 240 220 / .1); inset: 1.1cqi 1cqi 1.2cqi 1.05cqi; }
.book__corner { background: url(../press/tex/brass.webp) center / cover; }
.book__corner--tr { filter: drop-shadow(0 1px 1px rgb(0 0 0 / .5)) brightness(.9); }
.book__corner--bl { filter: drop-shadow(0 1px 1px rgb(0 0 0 / .5)) brightness(.8) saturate(.85); }
.book__edge { background: repeating-linear-gradient(90deg, #e8dbb9 0 1px, #b39e74 1px 2px, #ddd0ab 2px 4px, #a8936a 4px 5px, #e3d5b1 5px 6px); }
.book__edge--l { margin-block: .6cqi 1cqi; }
.book__edge--r { margin-block: .3cqi .7cqi; }

/* pages: scanned-looking paper, only the spine shading stays in CSS */
.book__page--l { background: linear-gradient(90deg, transparent 58%, rgb(255 250 235 / .14) 74%, transparent 84%, rgb(120 88 48 / .16) 93%, rgb(70 45 20 / .42) 100%), url(../press/tex/paper-l.webp) center / cover, #efe3c4; }
.book__page--r { background: linear-gradient(270deg, transparent 58%, rgb(255 250 235 / .1) 74%, transparent 84%, rgb(120 88 48 / .16) 93%, rgb(70 45 20 / .42) 100%), url(../press/tex/paper-r.webp) center / cover, #efe3c4; }

/* clipping: cut out with scissors, pasted down, two strips of torn tape */
.book__clipw { position: relative; transform: rotate(var(--tilt, -1.4deg)); filter: drop-shadow(0 .45cqi .6cqi rgb(70 48 22 / .38)) drop-shadow(0 0 .08cqi rgb(70 48 22 / .4)); }
.book__clip { transform: none; box-shadow: none; padding: 1cqi 1cqi 1.9cqi; background: url(../press/tex/paper-l.webp) 30% 40% / 300% auto, #f6efdc; }
.book__clip::before, .book__clip::after { display: none; }
.book__clip img { filter: sepia(.28) saturate(.8) contrast(.94) brightness(.98); }
.book__clipw::before, .book__clipw::after { content: ''; position: absolute; z-index: 2; top: -1.3cqi; width: 8.5cqi; height: 2.7cqi; pointer-events: none;
  background: linear-gradient(180deg, rgb(244 238 214 / .6), rgb(226 216 186 / .52)); box-shadow: inset 0 0 .4cqi rgb(255 255 255 / .25);
  clip-path: polygon(2% 8%, 9% 0, 18% 6%, 30% 1%, 44% 5%, 58% 0, 71% 4%, 84% 1%, 95% 7%, 100% 14%, 97% 30%, 100% 47%, 96% 66%, 100% 84%, 93% 100%, 80% 93%, 66% 99%, 51% 94%, 37% 100%, 22% 95%, 10% 100%, 3% 90%, 0 72%, 4% 52%, 0 33%); }
.book__clipw::before { left: 9%; transform: rotate(-9deg); }
.book__clipw::after { right: 7%; transform: rotate(6deg); width: 7cqi; }

/* headline: printed ink, no drop cap, a pencil line drawn by hand under it */
.book__head { border-bottom: 0; padding-bottom: 2.6cqi; color: #2a1f15; text-shadow: 0 0 .5px rgb(42 31 21 / .55);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M3 8.6c18-1.6 37-.4 56-1.3 22-1 41 .9 63-.4 25-1.5 47 .8 70-.6 16-.9 30 .3 45-.9' fill='none' stroke='%23463c33' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M6 10.2c21-1.2 44-.1 66-.9 26-.9 52 .6 78-.5 24-1 47 .5 69-.6' fill='none' stroke='%23463c33' stroke-opacity='.28' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 72% 1.3cqi no-repeat; }
.book__head::first-letter { float: none; margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.book__pub { color: #6b4f30; opacity: .9; }
.book__run { color: #8e7656; }
.book__cut--0 { clip-path: polygon(0.00% 0.44%, 7.14% 0.26%, 14.29% 0.56%, 21.43% 0.24%, 28.57% 0.55%, 35.71% 0.72%, 42.86% 0.54%, 50.00% 0.41%, 57.14% 0.84%, 64.29% 0.39%, 71.43% 0.24%, 78.57% 0.43%, 85.71% 0.59%, 92.86% 0.13%, 99.88% 0.00%, 99.81% 10.00%, 99.62% 20.00%, 99.58% 30.00%, 99.42% 40.00%, 99.75% 50.00%, 99.15% 60.00%, 99.89% 70.00%, 99.45% 80.00%, 99.72% 90.00%, 100.00% 99.66%, 90.91% 99.80%, 81.82% 99.62%, 72.73% 99.79%, 63.64% 99.76%, 54.55% 99.62%, 45.45% 99.23%, 36.36% 99.53%, 27.27% 99.87%, 18.18% 98.90%, 9.09% 99.52%, 0.13% 100.00%, 1.34% 88.89%, 0.44% 77.78%, 0.21% 66.67%, 0.54% 55.56%, 0.15% 44.44%, 0.19% 33.33%, 0.73% 22.22%, 0.59% 11.11%); }
.book__cut--1 { clip-path: polygon(0.00% 0.82%, 7.69% 0.14%, 15.38% 0.14%, 23.08% 0.32%, 30.77% 0.09%, 38.46% 0.33%, 46.15% 0.37%, 53.85% 0.71%, 61.54% 0.10%, 69.23% 0.24%, 76.92% 0.58%, 84.62% 0.26%, 92.31% 0.20%, 99.83% 0.00%, 99.79% 8.33%, 99.09% 16.67%, 99.80% 25.00%, 99.88% 33.33%, 99.33% 41.67%, 99.96% 50.00%, 99.20% 58.33%, 99.75% 66.67%, 99.46% 75.00%, 99.13% 83.33%, 99.72% 91.67%, 100.00% 99.85%, 92.86% 99.08%, 85.71% 99.57%, 78.57% 99.76%, 71.43% 99.82%, 64.29% 99.30%, 57.14% 99.50%, 50.00% 99.14%, 42.86% 99.62%, 35.71% 99.79%, 28.57% 99.02%, 21.43% 99.68%, 14.29% 99.43%, 7.14% 99.88%, 0.57% 100.00%, 0.38% 92.86%, 0.22% 85.71%, 1.02% 78.57%, 0.72% 71.43%, 0.18% 64.29%, 0.63% 57.14%, 0.44% 50.00%, 0.57% 42.86%, 0.21% 35.71%, 0.66% 28.57%, 0.30% 21.43%, 1.20% 14.29%, 0.29% 7.14%); }
.book__cut--2 { clip-path: polygon(0.00% 0.79%, 9.09% 0.25%, 18.18% 0.76%, 27.27% 0.67%, 36.36% 0.25%, 45.45% 0.40%, 54.55% 0.20%, 63.64% 0.26%, 72.73% 0.21%, 81.82% 0.46%, 90.91% 0.48%, 99.58% 0.00%, 99.88% 7.69%, 99.76% 15.38%, 99.54% 23.08%, 99.76% 30.77%, 99.49% 38.46%, 99.79% 46.15%, 99.53% 53.85%, 99.86% 61.54%, 99.56% 69.23%, 99.64% 76.92%, 99.60% 84.62%, 99.77% 92.31%, 100.00% 99.85%, 90.00% 99.49%, 80.00% 99.58%, 70.00% 99.81%, 60.00% 99.67%, 50.00% 99.78%, 40.00% 98.91%, 30.00% 99.56%, 20.00% 99.88%, 10.00% 99.67%, 0.56% 100.00%, 0.14% 91.67%, 0.40% 83.33%, 0.08% 75.00%, 0.89% 66.67%, 0.38% 58.33%, 0.25% 50.00%, 0.72% 41.67%, 0.42% 33.33%, 1.12% 25.00%, 0.37% 16.67%, 0.38% 8.33%); }
.book__cut--3 { clip-path: polygon(0.00% 0.32%, 8.33% 0.87%, 16.67% 0.45%, 25.00% 0.68%, 33.33% 0.23%, 41.67% 0.41%, 50.00% 0.28%, 58.33% 0.25%, 66.67% 0.45%, 75.00% 0.69%, 83.33% 0.55%, 91.67% 0.48%, 99.81% 0.00%, 99.58% 10.00%, 99.79% 20.00%, 99.72% 30.00%, 99.25% 40.00%, 98.96% 50.00%, 99.56% 60.00%, 99.59% 70.00%, 99.82% 80.00%, 99.76% 90.00%, 100.00% 99.77%, 90.00% 99.56%, 80.00% 99.32%, 70.00% 99.45%, 60.00% 99.04%, 50.00% 99.88%, 40.00% 99.79%, 30.00% 99.69%, 20.00% 99.35%, 10.00% 99.92%, 0.35% 100.00%, 0.30% 90.00%, 1.13% 80.00%, 0.30% 70.00%, 0.65% 60.00%, 0.56% 50.00%, 0.45% 40.00%, 1.14% 30.00%, 0.61% 20.00%, 0.33% 10.00%); }
.book__cut--4 { clip-path: polygon(0.00% 0.53%, 10.00% 0.61%, 20.00% 0.24%, 30.00% 0.32%, 40.00% 0.52%, 50.00% 0.26%, 60.00% 0.23%, 70.00% 1.03%, 80.00% 0.34%, 90.00% 0.40%, 99.75% 0.00%, 99.38% 7.69%, 99.25% 15.38%, 99.48% 23.08%, 99.76% 30.77%, 99.85% 38.46%, 99.60% 46.15%, 99.74% 53.85%, 99.37% 61.54%, 99.54% 69.23%, 99.87% 76.92%, 99.59% 84.62%, 99.29% 92.31%, 100.00% 99.37%, 90.91% 99.90%, 81.82% 99.62%, 72.73% 99.07%, 63.64% 99.42%, 54.55% 99.25%, 45.45% 99.20%, 36.36% 99.48%, 27.27% 99.68%, 18.18% 99.02%, 9.09% 99.13%, 0.35% 100.00%, 0.74% 90.00%, 0.49% 80.00%, 0.35% 70.00%, 0.29% 60.00%, 0.51% 50.00%, 0.27% 40.00%, 0.13% 30.00%, 0.15% 20.00%, 0.57% 10.00%); }
.book__cut--5 { clip-path: polygon(0.00% 0.40%, 9.09% 0.58%, 18.18% 0.62%, 27.27% 0.50%, 36.36% 0.66%, 45.45% 0.68%, 54.55% 0.30%, 63.64% 0.36%, 72.73% 0.43%, 81.82% 0.45%, 90.91% 0.69%, 99.38% 0.00%, 99.83% 7.14%, 99.60% 14.29%, 99.21% 21.43%, 99.68% 28.57%, 99.42% 35.71%, 99.86% 42.86%, 99.65% 50.00%, 99.89% 57.14%, 99.19% 64.29%, 99.03% 71.43%, 99.81% 78.57%, 99.76% 85.71%, 99.31% 92.86%, 100.00% 99.54%, 92.86% 99.96%, 85.71% 99.02%, 78.57% 99.85%, 71.43% 99.67%, 64.29% 99.75%, 57.14% 99.52%, 50.00% 99.66%, 42.86% 99.20%, 35.71% 99.70%, 28.57% 99.91%, 21.43% 99.69%, 14.29% 99.56%, 7.14% 99.90%, 0.42% 100.00%, 0.82% 92.86%, 1.66% 85.71%, 0.69% 78.57%, 0.55% 71.43%, 0.50% 64.29%, 0.12% 57.14%, 0.25% 50.00%, 0.24% 42.86%, 0.75% 35.71%, 0.70% 28.57%, 0.17% 21.43%, 0.35% 14.29%, 0.40% 7.14%); }
.book__glow { position: absolute; z-index: -1; left: 8%; right: 4%; top: -12%; height: 80%; pointer-events: none; background: radial-gradient(48% 42% at 58% 40%, rgb(255 196 120 / .3), rgb(255 170 80 / .08) 55%, transparent 75%); filter: blur(18px); }
.book__stand { position: absolute; z-index: -1; left: -4%; right: -8%; bottom: 0; height: 17%; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 196 128 / .4) 0, rgb(255 196 128 / .08) 7%, transparent 24%), linear-gradient(180deg, transparent 40%, rgb(0 0 0 / .65)), url(../press/tex/stone.webp) center / cover, #151311;
  clip-path: polygon(3% 22%, 11% 12%, 24% 9%, 40% 6%, 58% 4%, 74% 6%, 88% 9%, 97% 14%, 100% 34%, 98% 70%, 100% 100%, 0 100%, 1% 70%, 0 44%);
  filter: drop-shadow(0 -1px 0 rgb(255 200 140 / .25)); }

/* cover: dark leather, gilt trim, thick block of gilded pages */
.book__cover { border-radius: 1.4cqi; background: radial-gradient(70% 60% at 30% 10%, rgb(255 255 255 / .05), transparent 60%), url(../press/tex/leather.webp) center / cover, #121110;
  box-shadow: inset 0 0 0 .25cqi rgb(214 170 84 / .55), inset 0 0 0 .45cqi rgb(0 0 0 / .5), 0 .5cqi 0 #0b0a09, 0 .8cqi 0 #090807, 0 .95cqi 0 rgb(214 170 84 / .55), 0 4cqi 5cqi -1.5cqi rgb(0 0 0 / .9); }
.book__cover::after { display: none; }
.book__corner { width: 6cqi; height: 6cqi; background: linear-gradient(135deg, rgb(255 230 160 / .55), transparent 55%), url(../press/tex/brass.webp) center / cover; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .6)) brightness(1.25) saturate(1.1); }
.book__corner--tr, .book__corner--bl, .book__corner--br { filter: drop-shadow(0 1px 1px rgb(0 0 0 / .6)) brightness(1.15) saturate(1.1); }
.book__edge { width: 1.6cqi; background: linear-gradient(180deg, rgb(255 236 180 / .5), transparent 30%, rgb(120 80 20 / .4)), repeating-linear-gradient(90deg, #e9d29a 0 1px, #b8913f 1px 2px, #dcc27f 2px 3px); }
.book__spread { box-shadow: 0 .35cqi 0 -.02cqi #ece2c9, 0 .7cqi 0 -.06cqi #ddcfaf, 0 1.05cqi 0 -.1cqi #cdbb92, 0 1.4cqi 0 -.14cqi #c9a556, 0 1.7cqi 0 -.16cqi #a9852f, 0 2.2cqi 1.4cqi -.4cqi rgb(0 0 0 / .6); }

/* clean cream pages */
.book__page--l { background: linear-gradient(90deg, rgb(255 255 255 / .1) 0, transparent 30%, transparent 78%, rgb(150 115 70 / .14) 90%, rgb(80 55 25 / .4) 100%), linear-gradient(180deg, rgb(255 252 242 / .5), transparent 40%), linear-gradient(rgb(243 236 220 / .8), rgb(240 231 211 / .8)), url(../press/tex/paper-l.webp) center / cover; }
.book__page--r { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23705c44' stroke-width='.5' stroke-dasharray='.6 1.4' stroke-linecap='round'%3E%3Ccircle cx='50' cy='50' r='48'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='16'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='34'/%3E%3Cpath d='M2 50h96'/%3E%3Cellipse cx='50' cy='50' rx='16' ry='48'/%3E%3Cellipse cx='50' cy='50' rx='34' ry='48'/%3E%3Cpath d='M50 2v96'/%3E%3C/g%3E%3C/svg%3E") 108% 112% / 46% auto no-repeat,
  linear-gradient(270deg, rgb(255 255 255 / .1) 0, transparent 30%, transparent 78%, rgb(150 115 70 / .14) 90%, rgb(80 55 25 / .4) 100%), linear-gradient(180deg, rgb(255 252 242 / .5), transparent 40%), linear-gradient(rgb(243 236 220 / .8), rgb(240 231 211 / .8)), url(../press/tex/paper-r.webp) center / cover; }
.book__page--r { opacity: 1; }
.book__run { display: flex; align-items: center; justify-content: center; gap: 1.6cqi; top: 2.4cqi; left: 3cqi; right: 3cqi; color: #6d5a43; }
.book__run::before, .book__run::after { content: ''; display: block; flex: 1; width: auto; height: 1px; margin: 0; background: rgb(90 70 45 / .35); }
.book__folio { display: flex; align-items: center; gap: 1.2cqi; color: #6d5a43; }
.book__page--l .book__folio::after, .book__page--r .book__folio::before { content: ''; width: 4cqi; height: 1px; background: rgb(90 70 45 / .35); }
.book__head { background: none; text-shadow: none; color: #1f1710; font-size: clamp(14px, 4.1cqi, 32px); line-height: 1.12; padding-bottom: 2.2cqi; border-bottom: 1px solid rgb(40 30 20 / .55); }
.book__pub { color: #4b3a28; }
.book__no { color: #5e4b36; }

/* clipping: clean print, slight tilt, soft shadow, no tape */
.book__clipw::before, .book__clipw::after { display: none; }
.book__clipw { filter: drop-shadow(0 .6cqi .9cqi rgb(60 42 20 / .32)); }
.book__clip { clip-path: none !important; padding: .9cqi .9cqi 1.6cqi; background: #fbf9f3; }
.book__clip img { filter: saturate(.9) contrast(.98); mix-blend-mode: normal; }

/* short ribbon hanging out of the bottom of the spine */
.book__ribbon { display: block; z-index: 6; top: auto; bottom: -5.6cqi; left: calc(50% - 1.2cqi); width: 2.6cqi; height: 6.4cqi; transform: rotate(-8deg); transform-origin: 50% 0;
  background: linear-gradient(90deg, #6f8a1f, #b9d34a 45%, #d6ea7a 55%, #7d9a26); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); filter: drop-shadow(0 .3cqi .3cqi rgb(0 0 0 / .4)); }
.book__stand { left: 0; right: -2%; }
.book__stand { left: -2%; right: 1%; bottom: 0; height: 24%; }
.book__stand { -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%); }

/* ---- Book v6.1: images fill both pages, real page-edge texture, no ribbon (2026-11-03) ---- */
.book__ribbon { display: none !important; }
.book__spread { aspect-ratio: 2.05; }
.book__page { padding: 0; }
.book__img { position: absolute; inset: 0; margin: 0; }
.book__img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 30% 0; }
/* spine shading and a little paper sheen over the picture so it still reads as a printed page */
.book__page--l .book__img::after, .book__page--r .book__img::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.book__page--l .book__img::after { background: linear-gradient(90deg, rgb(255 250 235 / .08), transparent 25%, transparent 80%, rgb(60 40 15 / .25) 93%, rgb(30 18 6 / .6) 100%), linear-gradient(180deg, rgb(255 248 230 / .12), transparent 30%); }
.book__page--r .book__img::after { background: linear-gradient(270deg, rgb(255 250 235 / .08), transparent 25%, transparent 80%, rgb(60 40 15 / .25) 93%, rgb(30 18 6 / .6) 100%), linear-gradient(180deg, rgb(255 248 230 / .12), transparent 30%); }
.book__cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0; padding: 6cqi 3.4cqi 2.4cqi; color: #fff; font-size: max(10px, 1.55cqi); line-height: 1.3;
  background: linear-gradient(0deg, rgb(0 0 0 / .82), rgb(0 0 0 / .45) 55%, transparent); }
.book__cap b { display: block; margin-bottom: .4cqi; font-size: max(9px, 1.15cqi); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #beda52; }
.book__page--l .book__cap { padding-right: 5cqi; }
.book__page--r .book__cap { padding-left: 5cqi; }
.book__folio { z-index: 3; bottom: 1.2cqi; color: rgb(255 255 255 / .6); }
.book__page--l .book__folio::after, .book__page--r .book__folio::before { background: rgb(255 255 255 / .35); }
.book__cap { padding-bottom: 4cqi; }
.book__blank { position: absolute; inset: 0; background: linear-gradient(rgb(243 236 220 / .85), rgb(240 231 211 / .85)), url(../press/tex/paper-r.webp) center / cover; }
.book__page--r { background: #efe6d2; }

/* real page edges: side stacks and the block under the pages */
.book__edge { background: linear-gradient(180deg, rgb(255 240 200 / .25), transparent 25%, transparent 75%, rgb(60 40 15 / .3)), url(../press/tex/edge-v.webp) center / 100% 100%; box-shadow: none; }
.book__edge--l { box-shadow: inset -.3cqi 0 .4cqi rgb(0 0 0 / .25); }
.book__edge--r { box-shadow: inset .3cqi 0 .4cqi rgb(0 0 0 / .25); }
.book__spread { box-shadow: 0 2.4cqi 1.6cqi -.6cqi rgb(0 0 0 / .55); }
.book__spread::before { content: ''; position: absolute; z-index: 0; left: -.2cqi; right: -.2cqi; top: calc(100% - .1cqi); height: 1.7cqi; pointer-events: none;
  background: linear-gradient(90deg, rgb(40 25 10 / .35), transparent 6%, transparent 44%, rgb(40 25 10 / .5) 50%, transparent 56%, transparent 94%, rgb(40 25 10 / .35)), url(../press/tex/edge-h.webp) center / 100% 100%;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 75% 88%, 52% 100%, 48% 100%, 25% 88%, 0 72%); }
.book__spread { aspect-ratio: 1.85; } .book__img img { object-position: 0 0; } .book__spread::before { height: 2.4cqi; } .book__edge { width: 1.9cqi; }

/* ---- Growing: press gallery replaces the book (2026-11-03) ---- */
.press { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-width: 0; }
.press__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(118px, 11vw, 168px); gap: clamp(10px, 1vw, 14px); margin: 0; padding: 0; list-style: none; }
.press__item--0 { grid-column: span 2; grid-row: span 2; }
.press__item figure { position: relative; height: 100%; margin: 0; overflow: hidden; border-radius: 14px; background: #f4f1ea; box-shadow: inset 0 0 0 1px var(--edge-2); }
.press__item img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0 0; }
.press__item figcaption { position: absolute; inset: auto 0 0; display: grid; gap: 3px; padding: 34px 14px 12px; color: #fff; font-size: 13px; line-height: 1.3;
  background: linear-gradient(0deg, rgb(0 0 0 / .88), rgb(0 0 0 / .55) 60%, transparent); }
.press__item figcaption b { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #beda52; }
.press__item figcaption span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.press__item--0 figcaption { padding: 60px 22px 18px; font-size: clamp(15px, .9rem + .4vw, 19px); }
.press__item--0 figcaption b { font-size: 11px; }
@media (max-width: 1100px) { .press { grid-column: 1; grid-row: 3; margin-top: 32px; } }
@media (max-width: 760px) {
  .press__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; }
  .press__item--0 { grid-column: span 2; grid-row: span 2; }
  .press__item figcaption { padding: 28px 10px 9px; font-size: 12px; }
}
@media (max-width: 760px) { .press__item--5 { grid-column: span 2; } }
.sec.grow-sec { padding-bottom: 0; }

/* ---- Growing: the CodeAce family tree replaces the stat cards (2026-11-03) ---- */
@property --eco-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.eco { --wire: var(--edge-2); --lime: #beda52; --tick: 30px; grid-column: 1; grid-row: 2; position: relative; min-width: 0; }
:root[data-theme='light'] .eco { --lime: #6f8a1f; }
.eco p { margin: 0; }
.eco__id { display: grid; gap: 2px; min-width: 0; }
.eco__kick { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.eco__name { font-size: clamp(18px, 1rem + .5vw, 22px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--head-a); }
.eco__name i { font-style: normal; color: var(--mute); margin: 0 .2em; }
.eco__stat { display: grid; justify-items: end; text-align: right; flex: none; }
.eco__stat b { font-family: var(--font-mark, inherit); font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--head-a); font-variant-numeric: tabular-nums; }
.eco__stat b em { font-style: normal; color: var(--lime); }
.eco__stat > span { margin-top: 4px; font-size: 12px; color: var(--mute); }
.eco__tag { flex: none; font-size: 12px; color: var(--mute); }

/* root: CodeAce, with a slowly turning lime ring */
.eco__root { position: relative; isolation: isolate; display: flex; align-items: center; gap: 16px; padding: 18px 22px 18px 18px; border-radius: 18px; background: #0c0d0a; }
:root[data-theme='light'] .eco__root { background: #fff; }
.eco__ring { position: absolute; z-index: -1; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--eco-a), rgb(190 218 82 / .12) 0 62%, #beda52 76%, #e9f6b7 80%, rgb(190 218 82 / .12) 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: eco-turn 6s linear infinite; }
.eco__root::after { content: ''; position: absolute; z-index: -2; inset: 10% 20%; border-radius: inherit; background: rgb(190 218 82 / .16); filter: blur(30px); pointer-events: none; }
.eco__mark { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(140deg, #d8ec8a, #beda52 45%, #7d9a26); color: #11150a; font-family: var(--font-mark, inherit); font-size: 26px; font-weight: 700; box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 10px 24px -10px rgb(190 218 82 / .7); }
.eco__root .eco__id { flex: 1; }
.eco__root .eco__name { font-size: clamp(22px, 1.1rem + .9vw, 28px); }
@keyframes eco-turn { to { --eco-a: 360deg; } }

/* tree wiring: a trunk from the C, a tick to every node, light pulses running down the wires */
.eco__tree, .eco__sub { position: relative; margin: 0; padding: 0; list-style: none; }
.eco__tree { margin-left: 44px; }
.eco__tree > li, .eco__sub > li { position: relative; padding-left: calc(var(--tick) + 8px); }
.eco__tree > li { padding-top: 14px; }
.eco__tree > li::before, .eco__sub > li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--lime) 50%, transparent) 0 -60px / 100% 60px no-repeat, var(--wire); transform-origin: 50% 0; animation: eco-pulse 3.2s cubic-bezier(.5, 0, .5, 1) infinite; }
.eco__tree > li:nth-child(2)::before { animation-delay: .9s; }
.eco__tree > li:nth-child(3)::before { animation-delay: 1.6s; }
.eco__tree > li:last-child::before { bottom: auto; height: calc(14px + 34px); }
.eco__tree > li::after, .eco__sub > li::after { content: ''; position: absolute; left: 0; top: calc(14px + 33px); width: var(--tick); height: 2px; background: var(--wire); }
.eco__card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 12px 20px; border: 1px solid var(--edge-2); border-radius: 14px;
  background: linear-gradient(180deg, rgb(255 255 255 / .045), rgb(255 255 255 / .012)); }
:root[data-theme='light'] .eco__card { background: linear-gradient(180deg, rgb(0 0 0 / .025), rgb(0 0 0 / .008)); }
.eco__card::before, .eco__chip::before { content: ''; position: absolute; left: calc(-9px - 3px); top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgb(190 218 82 / .16), 0 0 12px rgb(190 218 82 / .7); }
@keyframes eco-pulse { 0% { background-position: 0 -60px, 0 0; } 70%, 100% { background-position: 0 calc(100% + 60px), 0 0; } }

/* WiseUp's own branches */
.eco__sub { margin: 0 0 0 26px; --tick: 22px; }
.eco__sub > li { padding-top: 10px; }
.eco__sub > li::before { animation-duration: 2.4s; animation-delay: .4s; }
.eco__sub > li:nth-child(2)::before { animation-delay: .9s; }
.eco__sub > li:nth-child(3)::before { animation-delay: 1.4s; }
.eco__sub > li:last-child::before { bottom: auto; height: calc(10px + 19px); }
.eco__sub > li::after { top: calc(10px + 18px); }
.eco__chip { position: relative; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-height: 38px; padding: 9px 16px; border: 1px solid var(--edge-2); border-radius: 99px; font-size: 15px; font-weight: 500; color: var(--ink-2); background: rgb(255 255 255 / .02); }
.eco__chip::before { width: 6px; height: 6px; margin-top: -3px; left: calc(-7px - 3px); box-shadow: 0 0 8px rgb(190 218 82 / .6); }
.eco__chip small { font-size: 12px; font-weight: 400; color: var(--mute); }
.eco__chip small span { color: var(--head-a); font-weight: 600; }
.eco__chip--hot { border-color: rgb(190 218 82 / .4); background: rgb(190 218 82 / .06); color: var(--head-a); }

@media (max-width: 760px) {
  .eco__tree { margin-left: 30px; }
  .eco { --tick: 18px; }
  .eco__card { padding: 12px 14px; gap: 10px; }
  .eco__sub { margin-left: 14px; --tick: 14px; }
  .eco__root { padding: 14px; gap: 12px; }
  .eco__mark { width: 44px; height: 44px; font-size: 22px; }
  .eco__tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eco__ring, .eco__tree > li::before, .eco__sub > li::before { animation: none; }
}

/* ---- Growing: Global reach photo strip under the tree and gallery (2026-11-03) ---- */
.reach { grid-column: 1 / -1; grid-row: 3; min-width: 0; margin-top: clamp(48px, 5vw, 80px); }
.reach__h { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.reach__h::after { content: ''; flex: 1; height: 1px; background: var(--edge-2); }
.reach__dot { width: 8px; height: 8px; border-radius: 50%; background: #beda52; box-shadow: 0 0 10px rgb(190 218 82 / .7); }
.reach__view { overflow: hidden; margin-inline: calc(-1 * var(--gx, 20px)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reach__track { display: flex; gap: clamp(10px, 1vw, 14px); width: max-content; margin: 0; padding: 0; list-style: none; animation: reach-drift 70s linear infinite; }
.reach__track li { flex: none; }
.reach__track figure { position: relative; height: clamp(190px, 19vw, 270px); margin: 0; overflow: hidden; border-radius: 14px; background: #111; box-shadow: inset 0 0 0 1px var(--edge-2); }
.reach__track img { display: block; width: auto; height: 100%; max-width: none; }
.reach__track figcaption { position: absolute; inset: auto 0 0; padding: 30px 14px 11px; font-size: 13px; line-height: 1.3; color: #fff; background: linear-gradient(0deg, rgb(0 0 0 / .8), transparent); }
@keyframes reach-drift { to { transform: translateX(calc(-50% - clamp(5px, .5vw, 7px))); } }
@media (max-width: 1100px) { .reach { grid-column: 1; grid-row: 4; } }
@media (prefers-reduced-motion: reduce) {
  .reach__track { animation: none; }
  .reach__view { overflow-x: auto; }
  .reach__track li[aria-hidden='true'] { display: none; }
}

/* ---- Press: scattered clippings collage (2026-11-03) ---- */
.press { position: relative; }
.press__grid { position: relative; display: block; aspect-ratio: 1.42; }
.press__item { position: absolute; width: var(--w); left: var(--x); top: var(--y); z-index: var(--z); }
.press__item--0 { --x: 0%; --y: 8%; --w: 50%; --r: -3.5deg; --z: 3; grid-column: auto; grid-row: auto; }
.press__item--1 { --x: 47%; --y: 0%; --w: 33%; --r: 4deg; --z: 2; }
.press__item--2 { --x: 66%; --y: 22%; --w: 34%; --r: -2deg; --z: 4; }
.press__item--3 { --x: 4%; --y: 57%; --w: 35%; --r: 2.5deg; --z: 4; }
.press__item--4 { --x: 37%; --y: 47%; --w: 33%; --r: -4.5deg; --z: 5; }
.press__item--5 { --x: 68%; --y: 60%; --w: 31%; --r: 5deg; --z: 3; }
.press__item figure { height: auto; padding: 7px 7px 0; border-radius: 4px; overflow: visible; background: #fbfaf5; transform: rotate(var(--r));
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 2px 3px rgb(0 0 0 / .25), 0 24px 40px -18px rgb(0 0 0 / .75); }
.press__item img { height: auto; aspect-ratio: 4 / 3; border-radius: 2px; }
.press__item figcaption, .press__item--0 figcaption { position: static; display: grid; gap: 3px; padding: 9px 4px 11px; background: none; color: #1d1914; font-size: 12px; line-height: 1.3; }
.press__item figcaption b, .press__item--0 figcaption b { font-size: 9.5px; letter-spacing: .16em; color: #6f8a1f; }
.press__item figcaption span { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; -webkit-line-clamp: 2; }
.press__item--0 figcaption { padding: 12px 6px 14px; font-size: clamp(14px, .8rem + .35vw, 17px); }
.press__item--0 figcaption b { font-size: 10.5px; }
:root[data-theme='light'] .press__item figure { box-shadow: 0 2px 3px rgb(0 0 0 / .12), 0 22px 40px -20px rgb(0 0 0 / .4), 0 0 0 1px rgb(0 0 0 / .05); }

/* turning badge */
.press::before { content: ''; position: absolute; z-index: 6; left: 43%; top: -3%; width: clamp(84px, 7.6vw, 108px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpath id='c' d='M50 50m-37 0a37 37 0 1 1 74 0a37 37 0 1 1-74 0'/%3E%3C/defs%3E%3Ctext font-family='Arial,Helvetica,sans-serif' font-size='10.6' font-weight='700' letter-spacing='2.4' fill='%2311150a'%3E%3CtextPath href='%23c'%3EIN THE PRESS %E2%80%A2 6 FEATURES %E2%80%A2 %3C/textPath%3E%3C/text%3E%3Ccircle cx='50' cy='50' r='6' fill='%2311150a'/%3E%3C/svg%3E") center / 100% 100% no-repeat, radial-gradient(circle, #d8ec8a, #beda52 60%, #a6c23c);
  box-shadow: 0 14px 30px -12px rgb(190 218 82 / .6), inset 0 1px 0 rgb(255 255 255 / .5); animation: press-spin 18s linear infinite; }
@keyframes press-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .press__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; aspect-ratio: auto; grid-auto-rows: auto; }
  .press__item, .press__item--0, .press__item--5 { position: static; width: auto; grid-column: auto; grid-row: auto; }
  .press__item--0 { grid-column: span 2; }
  .press__item--5 { grid-column: span 2; justify-self: center; width: 60%; }
  .press__item { --r: 1.6deg; }
  .press__item:nth-child(even) { --r: -1.8deg; }
  .press__item--0 { --r: -1.2deg; }
  .press__item figcaption { font-size: 11.5px; }
  .press::before { left: auto; right: -4px; top: -26px; width: 80px; }
}
@media (prefers-reduced-motion: reduce) { .press::before { animation: none; } }
@media (min-width: 761px) {
  .press__grid { aspect-ratio: 1.2; }
  .press__item--0 { --x: 0%; --y: 2%; --w: 48%; --r: -3deg; --z: 6; }
  .press__item--1 { --x: 51%; --y: 0%; --w: 26%; --r: 4deg; --z: 5; }
  .press__item--2 { --x: 76%; --y: 9%; --w: 24%; --r: -2.5deg; --z: 6; }
  .press__item--3 { --x: 3%; --y: 59%; --w: 30%; --r: 2.5deg; --z: 3; }
  .press__item--4 { --x: 35%; --y: 57%; --w: 32%; --r: -3.5deg; --z: 4; }
  .press__item--5 { --x: 69%; --y: 49%; --w: 30%; --r: 4.5deg; --z: 3; }
  .press::before { left: 44%; top: -4%; }
}

/* ---- Press: newspaper masthead and a news ticker (2026-11-03) ---- */
.press__mast { margin: 0 0 14px; padding-top: 10px; border-top: 3px solid var(--head-a); text-align: center; }
.press__mast::before { content: ''; display: block; height: 1px; margin: -6px 0 12px; background: var(--head-a); opacity: .7; }
.press__title { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.6rem); font-weight: 700; font-style: italic; line-height: 1; letter-spacing: -.02em; color: var(--head-a); }
.press__meta { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 0; padding: 7px 2px; border-block: 1px solid var(--edge-2); font-family: Georgia, serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.press__meta span:nth-child(2) { color: #beda52; }
:root[data-theme='light'] .press__meta span:nth-child(2) { color: #6f8a1f; }

.press__ticker { display: flex; align-items: stretch; height: 34px; margin: 0 0 clamp(26px, 3vw, 40px); overflow: hidden; border-radius: 4px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px var(--edge-2); }
:root[data-theme='light'] .press__ticker { background: rgb(0 0 0 / .03); }
.press__live { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #beda52; color: #11150a; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.press__live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #11150a; animation: press-blink 1.4s ease-in-out infinite; }
.press__live::after { content: ''; position: absolute; right: -10px; top: 0; bottom: 0; width: 10px; background: #beda52; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.press__tv { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent); }
.press__tt { display: flex; width: max-content; height: 100%; margin: 0; white-space: nowrap; animation: press-tick 60s linear infinite; }
.press__tt span { display: flex; align-items: center; gap: 10px; padding: 0 22px 0 26px; font-size: 13px; color: var(--ink-2); }
.press__tt span::after { content: ''; width: 6px; height: 6px; margin-left: 22px; background: #beda52; transform: rotate(45deg); }
.press__tt b { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--head-a); }
@keyframes press-tick { to { transform: translateX(-50%); } }
@keyframes press-blink { 50% { opacity: .25; } }

/* the turning badge now sits on the pile, not over the masthead */
.press::before { content: none; }
.press__grid::after { content: ''; position: absolute; z-index: 7; left: 44%; top: -5%; width: clamp(84px, 7.6vw, 108px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpath id='c' d='M50 50m-37 0a37 37 0 1 1 74 0a37 37 0 1 1-74 0'/%3E%3C/defs%3E%3Ctext font-family='Arial,Helvetica,sans-serif' font-size='10.6' font-weight='700' letter-spacing='2.4' fill='%2311150a'%3E%3CtextPath href='%23c'%3EIN THE PRESS %E2%80%A2 6 FEATURES %E2%80%A2 %3C/textPath%3E%3C/text%3E%3Ccircle cx='50' cy='50' r='6' fill='%2311150a'/%3E%3C/svg%3E") center / 100% 100% no-repeat, radial-gradient(circle, #d8ec8a, #beda52 60%, #a6c23c);
  box-shadow: 0 14px 30px -12px rgb(190 218 82 / .6), inset 0 1px 0 rgb(255 255 255 / .5); animation: press-spin 18s linear infinite; }
@media (max-width: 760px) {
  .press__grid::after { left: auto; right: -4px; top: -30px; width: 76px; }
  .press__meta { font-size: 10px; letter-spacing: .14em; }
  .press__tt span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .press__tt, .press__live::before, .press__grid::after { animation: none; } .press__tv { overflow-x: auto; } }

/* ---- Press reader: one clipping on show, an index of all six (2026-11-03) ---- */
.press { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(22px, 2.6vw, 40px); align-items: center; }
.press::before { content: none; }
.press__stage { position: relative; aspect-ratio: .92; border-radius: 18px; overflow: visible; }
.press__stage::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #f6f3ea; box-shadow: 0 0 0 1px var(--edge-2), 0 40px 70px -34px rgb(0 0 0 / .9); }
.press__shot { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: 18px; opacity: 0; transition: opacity .9s ease; }
.press__shot img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0 0; transform: scale(1.06); transform-origin: 0 0; transition: transform 6s ease-out; }
.press__shot.is-on { opacity: 1; }
.press__shot.is-on img { transform: scale(1); }
.press__shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / .45), transparent 30%); pointer-events: none; }
.press__count { position: absolute; z-index: 2; left: 18px; bottom: 16px; padding: 6px 12px; border-radius: 99px; background: rgb(0 0 0 / .62); color: rgb(255 255 255 / .7); font-size: 12px; letter-spacing: .12em; font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.press__count b { color: #beda52; font-weight: 700; }
.press__stage::after { content: ''; position: absolute; z-index: 3; right: -26px; top: -30px; width: clamp(84px, 7.4vw, 104px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpath id='c' d='M50 50m-37 0a37 37 0 1 1 74 0a37 37 0 1 1-74 0'/%3E%3C/defs%3E%3Ctext font-family='Arial,Helvetica,sans-serif' font-size='10.6' font-weight='700' letter-spacing='2.4' fill='%2311150a'%3E%3CtextPath href='%23c'%3EIN THE PRESS %E2%80%A2 6 FEATURES %E2%80%A2 %3C/textPath%3E%3C/text%3E%3Ccircle cx='50' cy='50' r='6' fill='%2311150a'/%3E%3C/svg%3E") center / 100% 100% no-repeat, radial-gradient(circle, #d8ec8a, #beda52 60%, #a6c23c);
  box-shadow: 0 14px 30px -12px rgb(190 218 82 / .6), inset 0 1px 0 rgb(255 255 255 / .5); animation: press-spin 18s linear infinite; }

.press__list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.press__pick { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; width: 100%; padding: 14px 0 15px; border: 0; border-top: 1px solid var(--edge-2); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.press__list li:last-child .press__pick { border-bottom: 1px solid var(--edge-2); }
.press__n { padding-top: 2px; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--mute); font-variant-numeric: tabular-nums; transition: color .4s; }
.press__txt { display: grid; gap: 4px; }
.press__txt b { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); transition: color .4s; }
.press__txt span { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(15px, .85rem + .3vw, 18px); font-weight: 700; line-height: 1.28; color: var(--mute); opacity: .75; transition: color .4s, opacity .4s; }
.press__pick.is-on .press__n, .press__pick.is-on .press__txt b { color: #beda52; }
.press__pick.is-on .press__txt span { color: var(--head-a); opacity: 1; }
:root[data-theme='light'] .press__pick.is-on .press__n, :root[data-theme='light'] .press__pick.is-on .press__txt b { color: #6f8a1f; }
.press__pick:focus-visible { outline: 2px solid #beda52; outline-offset: 4px; border-radius: 4px; }
.press__bar { position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: #beda52; }
.press.is-playing .press__pick.is-on .press__bar { animation: press-fill 5s linear forwards; }
.press:not(.is-playing) .press__pick.is-on .press__bar { width: 36px; }
@keyframes press-fill { to { width: 100%; } }
@media (max-width: 1100px) { .press { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 760px) {
  .press { grid-template-columns: 1fr; gap: 22px; }
  .press__stage { aspect-ratio: 4 / 3; }
  .press__stage::after { right: -6px; top: -26px; width: 76px; }
}
@media (prefers-reduced-motion: reduce) { .press__shot, .press__shot img { transition: none; } .press__stage::after { animation: none; } }

/* ---- Press wall: three columns of clippings drifting in opposite directions (2026-11-03) ---- */
.press { display: block; position: relative; }
.press__wall { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); height: clamp(480px, 40vw, 600px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.press__col { min-width: 0; }
.press__run { display: flex; flex-direction: column; animation: press-up 46s linear infinite; }
.press__col--1 .press__run, .press__col--3 .press__run { animation-name: press-down; }
.press__col--1 .press__run { animation-duration: 52s; }
.press__col--3 .press__run { animation-duration: 40s; }
@keyframes press-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes press-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.press__card { margin: 0 0 clamp(12px, 1.2vw, 18px); padding: 6px 6px 0; border-radius: 10px; background: #fbfaf5; box-shadow: 0 1px 2px rgb(0 0 0 / .2), 0 18px 34px -20px rgb(0 0 0 / .7); }
.press__col--2 .press__card:nth-child(odd) { transform: rotate(-1deg); }
.press__col--1 .press__card:nth-child(even), .press__col--3 .press__card:nth-child(3n) { transform: rotate(1.2deg); }
.press__card img { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 4 / 3; object-fit: cover; object-position: 0 0; border-radius: 6px; }
.press__card figcaption { display: grid; gap: 3px; padding: 9px 5px 11px; color: #1d1914; }
.press__card figcaption b { font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #6f8a1f; }
.press__card figcaption span { font-family: Georgia, 'Times New Roman', serif; font-size: 13px; font-weight: 700; line-height: 1.28; }
:root[data-theme='light'] .press__card { box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 18px 34px -22px rgb(0 0 0 / .35); }
.press::after { content: ''; position: absolute; z-index: 3; right: -18px; top: -26px; width: clamp(84px, 7.4vw, 104px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpath id='c' d='M50 50m-37 0a37 37 0 1 1 74 0a37 37 0 1 1-74 0'/%3E%3C/defs%3E%3Ctext font-family='Arial,Helvetica,sans-serif' font-size='10.6' font-weight='700' letter-spacing='2.4' fill='%2311150a'%3E%3CtextPath href='%23c'%3EIN THE PRESS %E2%80%A2 6 FEATURES %E2%80%A2 %3C/textPath%3E%3C/text%3E%3Ccircle cx='50' cy='50' r='6' fill='%2311150a'/%3E%3C/svg%3E") center / 100% 100% no-repeat, radial-gradient(circle, #d8ec8a, #beda52 60%, #a6c23c);
  box-shadow: 0 14px 30px -12px rgb(190 218 82 / .6), inset 0 1px 0 rgb(255 255 255 / .5); animation: press-spin 18s linear infinite; }
@media (max-width: 760px) {
  .press__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 520px; }
  .press__col--3 { display: none; }
  .press::after { right: -6px; top: -26px; width: 76px; }
  .press__card figcaption span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .press__run, .press::after { animation: none; } }

/* the turning "In the press" badge is removed (2026-11-03) */
.press::before, .press::after, .press__grid::after, .press__stage::after { content: none !important; display: none !important; }

/* press wall scroll effects: 3D tilt-in driven by --in (set by script; 1 = flat) */
.press { perspective: 1500px; perspective-origin: 50% 100%; }
.press__wall { transform: rotateX(calc((1 - var(--in, 1)) * 34deg)) scale(calc(.86 + var(--in, 1) * .14)); transform-origin: 50% 100%; opacity: calc(.25 + var(--in, 1) * .75); will-change: transform; }
.press__col { will-change: transform; }

/* tilt out as the wall leaves the top of the screen (--out, origin flips to the top edge) */
.press__wall { transform: rotateX(calc((1 - var(--in, 1)) * 34deg - var(--out, 0) * 34deg)) scale(calc(.86 + var(--in, 1) * .14 - var(--out, 0) * .14)); transform-origin: 50% var(--org, 100%); opacity: calc(.25 + var(--in, 1) * .75 - var(--out, 0) * .75); }

/* ---- Header phone button and footer contact + services (2026-11-03) ---- */
.hd__call { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; color: #beda52;
  background: rgb(14 14 16 / 0.94); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.08); transition: background .4s; }
.hd__call svg { width: 18px; height: 18px; }
.hd__call:focus-visible { outline-offset: 2px; }
@media (hover: hover) { .hd__call:hover { background: rgb(26 26 30 / 0.94); } }
.menu__call { display: flex !important; align-items: center; gap: 10px; }
.menu__call svg { width: 18px; height: 18px; color: #beda52; flex: none; }

.ft__contact { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.ft__contact a { display: inline-flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: 15px; line-height: 1.5; transition: color .3s; }
.ft__contact svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--teal); }
.ft__contact address { max-width: 30ch; font-style: normal; }
@media (hover: hover) { .ft__contact a:hover { color: var(--head-a); } }
.ft__top:has(.ft__services) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199px) { .ft__top:has(.ft__services) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ft__top:has(.ft__services) .ft__intro { grid-column: 1 / -1; } }
@media (max-width: 767px) { .ft__top:has(.ft__services) { grid-template-columns: 1fr 1fr; } }
.ft__top:has(.ft__services) .ft__follow .ft__social { flex-wrap: wrap; gap: 8px; }
.ft__top:has(.ft__services) .ft__follow .ft__soc { width: 36px; height: 36px; }
.ft__top:has(.ft__services) .ft__pillars { font-size: clamp(1rem, .9rem + .35vw, 1.2rem); }

/* contact button: same size as the theme toggle at every width, filled handset icon */
.hd__call { width: 58px; height: 58px; }
.hd__call svg, .hd__call .ico-call { width: 22px; height: 22px; }
.menu__call .ico-call { width: 18px; height: 18px; color: #beda52; }
@media (max-width: 900px) { .hd__call { width: 50px; height: 50px; } .hd__call svg { width: 20px; height: 20px; } }
@media (max-width: 379px) { .hd__call { width: 44px; height: 44px; } }

/* footer: Quick + Useful merged, contact moved into Follow Us above the icons (2026-11-03) */
.ft__top:has(.ft__services) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, .85fr) minmax(0, 1.3fr); }
.ft__follow .ft__contact { margin: 14px 0 6px; gap: 10px; }
.ft__follow .ft__contact a { font-size: 14.5px; }
@media (max-width: 1199px) { .ft__top:has(.ft__services) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ft__top:has(.ft__services) { grid-template-columns: 1fr 1fr; } .ft__top:has(.ft__services) .ft__follow { grid-column: 1 / -1; } }
@media (max-width: 599px) { .ft__follow .ft__contact { margin: 0 0 12px; } }

/* contact page: the full address wraps nicely in the Visit us row */
.cta-row__v--addr { white-space: normal; line-height: 1.45; }

/* ---- Footer alignment pass (2026-11-03): one grid, equal gaps, one vertical rhythm ---- */
.ft__top:has(.ft__services) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.15fr); column-gap: clamp(32px, 4vw, 64px); row-gap: 40px; align-items: start; }
.ft__top:has(.ft__services) > * { min-width: 0; }
/* headings and the tagline share one top line; every column starts on it */
.ft__top:has(.ft__services) .ft__h { margin: 0 0 18px; font-size: 18px; line-height: 26px; }
.ft__top:has(.ft__services) .ft__tag { margin: 0; max-width: 30ch; font-size: clamp(1.05rem, .95rem + .35vw, 1.2rem); line-height: 1.55; }
.ft__top:has(.ft__services) .ft__pillars { margin: 22px 0 0; gap: 12px; font-size: 15px; letter-spacing: .04em; }
/* one 34px rhythm for links, text lines and contact rows */
.ft__top:has(.ft__services) .ft__col ul { gap: 0; }
.ft__top:has(.ft__services) .ft__link { display: inline-block; padding-block: 5px; font-size: 15px; line-height: 24px; }
.ft__top:has(.ft__services) .ft__follow > p { max-width: 34ch; margin: 0; font-size: 15px; line-height: 24px; }
.ft__top:has(.ft__services) .ft__follow .ft__contact { margin: 16px 0 0; gap: 10px; }
.ft__top:has(.ft__services) .ft__follow .ft__contact a { gap: 12px; font-size: 15px; line-height: 24px; }
.ft__top:has(.ft__services) .ft__follow .ft__contact svg { margin-top: 3px; }
.ft__top:has(.ft__services) .ft__follow .ft__social { margin-top: 20px; gap: 10px; }
@media (max-width: 1199px) { .ft__top:has(.ft__services) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ft__top:has(.ft__services) .ft__intro { grid-column: 1 / -1; } }
@media (max-width: 767px) { .ft__top:has(.ft__services) { grid-template-columns: 1fr 1fr; column-gap: 24px; } }

/* ---- Footer: filled contact icons in tiles; big living wordmark (2026-11-03) ---- */
.ft__contact a { align-items: center; }
.ft__ci { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #beda52;
  background: radial-gradient(120% 120% at 30% 20%, rgb(190 218 82 / .2), rgb(190 218 82 / .06)); box-shadow: inset 0 0 0 1px rgb(190 218 82 / .22); }
.ft__ci svg { width: 18px; height: 18px; }
.ft__top:has(.ft__services) .ft__follow .ft__contact svg { margin-top: 0; }
.ft__contact li:last-child a { align-items: flex-start; }
.ft__contact li:last-child .ft__ci { margin-top: 2px; }
:root[data-theme='light'] .ft__ci { color: #5e7518; background: rgb(143 168 56 / .12); box-shadow: inset 0 0 0 1px rgb(143 168 56 / .3); }
.ft__word-text { font-size: clamp(5rem, .5rem + 24vw, 25rem); font-weight: 600; letter-spacing: -0.035em; }
.ft__word { margin-top: clamp(28px, 4vw, 64px); }
.ft__word-text { font-weight: 500; }

/* footer: WiseUp Branding logo at the top of the first column (white art; inverted in the light theme like the header logo) */
.ft__brand { display: inline-block; margin-bottom: 18px; }
.ft__brand img { display: block; width: clamp(120px, 10vw, 150px); height: auto; }
:root[data-theme="light"] .ft__brand img { filter: invert(1); }
/* the logo now heads column 1, so the other columns start their headings level with it */
.ft__top:has(.ft__services) .ft__tag { font-size: clamp(1rem, .92rem + .3vw, 1.12rem); }
.ft__sep { margin: 0 6px; opacity: .6; }
a.ft__credit { color: var(--head-a); font-weight: 600; }
@media (hover: hover) { a.ft__credit:hover { color: #beda52; } }

/* ---- Footer bottom row: CodeAce badge between the copyright and the Axilume credit (2026-11-03) ---- */
.ft__base { align-items: center; }
.ft__ca { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 7px 16px 7px 7px; border-radius: 99px; color: var(--ink-2); text-decoration: none;
  background: linear-gradient(135deg, rgb(190 218 82 / .13), rgb(190 218 82 / .03)); box-shadow: inset 0 0 0 1px rgb(190 218 82 / .32);
  transition: box-shadow .35s, background .35s, transform .35s; }
.ft__ca-mark { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: linear-gradient(140deg, #d8ec8a, #beda52 45%, #7d9a26); color: #11150a;
  font-family: var(--font-mark, inherit); font-size: 17px; font-weight: 700; box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 6px 16px -8px rgb(190 218 82 / .8); }
.ft__ca-txt { display: grid; gap: 1px; line-height: 1.2; text-align: left; }
.ft__ca-txt small { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #beda52; }
.ft__ca-txt span { font-size: 13px; color: var(--ink-2); }
.ft__ca-txt b { font-weight: 700; color: var(--head-a); }
.ft__ca-go { width: 16px; height: 16px; flex: none; color: #beda52; transition: transform .35s; }
@media (hover: hover) { .ft__ca:hover { background: linear-gradient(135deg, rgb(190 218 82 / .2), rgb(190 218 82 / .06)); box-shadow: inset 0 0 0 1px rgb(190 218 82 / .6); }
  .ft__ca:hover .ft__ca-go { transform: translate(2px, -2px); } }
.ft__ca:focus-visible { outline: 2px solid #beda52; outline-offset: 3px; }
:root[data-theme='light'] .ft__ca { background: rgb(143 168 56 / .08); box-shadow: inset 0 0 0 1px rgb(143 168 56 / .35); }
:root[data-theme='light'] .ft__ca-txt small, :root[data-theme='light'] .ft__ca-go { color: #5e7518; }
@media (min-width: 761px) { .ft__base { display: grid; grid-template-columns: 1fr auto 1fr; } .ft__base > :last-child { justify-self: end; } }
@media (max-width: 760px) { .ft__base { flex-direction: column; align-items: flex-start; gap: 12px; } .ft__ca { order: -1; } }
.ft__ca { z-index: 3; background: linear-gradient(135deg, rgb(190 218 82 / .16), rgb(190 218 82 / .04)), #0a0c07; }
:root[data-theme="light"] .ft__ca { background: linear-gradient(135deg, rgb(143 168 56 / .12), rgb(143 168 56 / .04)), #fff; }
.ft__base > p { position: relative; z-index: 3; }
.ft__ca-txt small, .ft__ca-txt span { white-space: nowrap; }

/* CodeAce badge v2: the real CodeAce mark, one short line (2026-11-03) */
img.ft__ca-mark { display: block; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #000; box-shadow: 0 0 0 1.5px rgb(190 218 82 / .55); }
.ft__ca { gap: 10px; padding: 6px 16px 6px 6px; }
.ft__ca-txt { display: block; font-size: 14px; white-space: nowrap; color: var(--ink-2); }
.ft__ca-txt b { color: var(--head-a); font-weight: 700; }

/* CodeAce badge appears only while the pointer is over the wordmark (or on the badge itself / keyboard focus); always shown on touch screens */
@media (hover: hover) {
  .ft__ca { opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, background .35s; }
  .ft__word:hover ~ .ft__base .ft__ca, .ft__ca:hover, .ft__ca:focus-visible { opacity: 1; transform: none; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) { .ft__ca { transform: none; transition: opacity .2s; } }

/* Footer background: pure black in the dark theme (owner, 2026-11-03; the water layers were removed). */
:root:not([data-theme='light']) .ft { background: #000; }

/* CodeAce badge: smaller, with space between it and the wordmark above (2026-11-03) */
.ft__ca { gap: 8px; padding: 4px 13px 4px 4px; margin-top: 18px; }
img.ft__ca-mark { width: 26px; height: 26px; }
.ft__ca-txt { font-size: 12.5px; }
.ft__ca-go { width: 14px; height: 14px; }
@media (min-width: 761px) { .ft__base { padding-top: 14px; } }

/* social media page: back-to-top sits above the chat button instead of on top of it (2026-11-03) */
#wu-smm #wu-smm-totop { right: calc(clamp(14px, 2vw, 26px) + 3px) !important; bottom: calc(clamp(14px, 2vw, 26px) + 70px) !important; }

/* CodeAce badge: black neumorphic, no green (2026-11-03) */
.ft__ca { background: linear-gradient(145deg, #1a1a1a, #0b0b0b) !important;
  box-shadow: -4px -4px 10px rgb(255 255 255 / .05), 5px 6px 14px rgb(0 0 0 / .9), inset 0 1px 0 rgb(255 255 255 / .07), inset 0 0 0 1px rgb(255 255 255 / .04) !important; }
img.ft__ca-mark { box-shadow: 0 0 0 1.5px rgb(255 255 255 / .18), 2px 2px 5px rgb(0 0 0 / .8) !important; }
.ft__ca-txt { color: #9a9a9e; } .ft__ca-txt b { color: #fff; }
.ft__ca-go { color: #b8b8bc !important; }
@media (hover: hover) { .ft__ca:hover { background: linear-gradient(145deg, #0d0d0d, #161616) !important;
  box-shadow: inset 3px 3px 7px rgb(0 0 0 / .85), inset -3px -3px 7px rgb(255 255 255 / .05) !important; } .ft__ca:hover .ft__ca-go { color: #fff !important; } }
.ft__ca:focus-visible { outline-color: #fff; }
:root[data-theme="light"] .ft__ca { background: linear-gradient(145deg, #ffffff, #e6e6e6) !important; box-shadow: -4px -4px 10px #fff, 5px 6px 14px rgb(0 0 0 / .14) !important; }
:root[data-theme="light"] .ft__ca-txt { color: #6b6b70; } :root[data-theme="light"] .ft__ca-txt b { color: #111; } :root[data-theme="light"] .ft__ca-go { color: #555 !important; }

/* press wall: scroll animation removed (2026-11-03); flat, columns keep their slow drift */
.press__wall { transform: none !important; opacity: 1 !important; }
.press__col { transform: none !important; }

/* ---- Process cards v2 (2026-11-03): full-bleed photo, floating glass caption, step chip. CSS only; same text and images. ---- */
.hgal__list { counter-reset: proc; }
.hgal__list .proc__card { counter-increment: proc; position: relative; display: block; min-height: clamp(440px, 36vw, 540px); padding: 0; border-radius: 28px; overflow: hidden; background: #0b0b0c;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 40px 70px -40px rgb(0 0 0 / .9); }
.hgal__list .proc__stage { position: absolute; inset: 0; z-index: 0; height: auto; margin: 0; border-radius: inherit; }
.hgal__list .proc__stage::before { z-index: 2; background: linear-gradient(180deg, rgb(0 0 0 / .35) 0%, transparent 22%, transparent 45%, rgb(0 0 0 / .55) 72%, rgb(0 0 0 / .9) 100%); }
.hgal__list .proc__shot { object-position: 50% 35%; }
/* step chip, top left */
.hgal__list .proc__card > .proc__meta::before { content: '0' counter(proc); position: absolute; left: 0; top: calc(-1 * (clamp(440px, 36vw, 540px) - 100%)); }
.hgal__list .proc__stage::after { content: '0' counter(proc); position: absolute; z-index: 3; left: 18px; top: 18px; display: grid; place-items: center; min-width: 44px; height: 30px; padding: 0 12px; border-radius: 99px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; color: #fff; background: rgb(12 12 12 / .45); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* floating glass caption */
.hgal__list .proc__meta { position: absolute; z-index: 4; left: 14px; right: 14px; bottom: 14px; padding: 22px 24px 24px; border-radius: 20px;
  background: linear-gradient(160deg, rgb(28 28 30 / .62), rgb(10 10 11 / .72)); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 0 0 1px rgb(255 255 255 / .07), 0 20px 40px -20px rgb(0 0 0 / .8); }
.hgal__list .proc__meta::after { content: ''; position: absolute; left: 24px; top: 0; width: 46px; height: 2px; border-radius: 2px; background: #beda52; box-shadow: 0 0 12px rgb(190 218 82 / .7); }
.hgal__list .proc__card > .proc__meta::before { content: none; }
.hgal__list .proc__h { margin: 0; font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); color: #fff; }
.hgal__list .proc__p { margin-top: 8px; max-width: 44ch; font-size: 15px; line-height: 1.55; color: rgb(255 255 255 / .72); }
/* corner arrow, top right */
.hgal__list .proc__card::after { content: ''; opacity: 1 !important; inset: auto; right: 18px; top: 18px; z-index: 5; width: 40px; height: 40px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / 16px no-repeat, rgb(12 12 12 / .45);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .5s cubic-bezier(.2, .8, .2, 1), background-color .4s; }
@media (hover: hover) { .hgal__list .proc__card:hover::after { transform: rotate(45deg); background-color: #beda52; } }
:root[data-theme='light'] .hgal__list .proc__card { box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 30px 60px -36px rgb(0 0 0 / .45); }
@media (max-width: 899px) { .hgal__list .proc__card { min-height: 420px; } .hgal__list .proc__meta { padding: 18px 18px 20px; } }
.hgal__list .proc__stage { aspect-ratio: auto; }
.hgal__list .proc__card::after { display: block; position: absolute; pointer-events: none; }
.hgal__list .proc__card { min-height: clamp(380px, 28vw, 430px); } .hgal__list .proc__shot { object-position: 40% 40%; }

/* ---- Footer, phones (2026-11-03): every block full width on one left edge; link lists as tidy 2-column grids ---- */
@media (max-width: 767px) {
  .ft__top:has(.ft__services) { grid-template-columns: 1fr; row-gap: 30px; }
  .ft__top:has(.ft__services) > * { grid-column: 1 / -1 !important; }
  .ft__top:has(.ft__services) .ft__h { margin-bottom: 10px; font-size: 16px; }
  .ft__top:has(.ft__services) .ft__col ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .ft__top:has(.ft__services) .ft__link { padding-block: 6px; font-size: 14.5px; line-height: 20px; }
  .ft__top:has(.ft__services) .ft__pillars { margin-top: 16px; }
  .ft__top:has(.ft__services) .ft__follow { padding-top: 24px; border-top: 1px solid var(--edge-2); }
  .ft__top:has(.ft__services) .ft__follow .ft__contact { margin-top: 0; }
  .ft__follow .ft__social { justify-content: flex-start !important; margin-top: 18px; gap: 10px; }
  .ft__follow .ft__soc { width: 42px !important; height: 42px !important; }
  .ft__ca { opacity: 1 !important; transform: none !important; }
  .ft__base { padding-top: 22px; padding-bottom: 18px; gap: 10px; }
}
@media (max-width: 767px) {
  .ft__top:has(.ft__services) .ft__follow .ft__contact { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .ft__top:has(.ft__services) .ft__follow .ft__social { display: flex; grid-template-columns: none; flex-wrap: wrap; }
}

/* ---- Hero (live): letters dance and the dot pulses while the i's dot is hovered; electricity canvas (2026-11-03) ---- */
.wm-volt { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100vh; pointer-events: none; }
.lunar__mark .wm__l, .lunar__mark .wm__dot { transform-box: fill-box; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.lunar__mark .wm__l { transform-origin: 50% 100%; }
.lunar__mark .wm__dot { transform-origin: 50% 50%; }
.lunar__mark .wm { transition: filter .5s; }
.lunar__mark.is-party .wm { filter: drop-shadow(0 0 22px rgb(190 218 82 / .35)); }
.lunar__mark.is-party .wm__l { animation: wm-dance .52s cubic-bezier(.45, 0, .55, 1) infinite alternate; animation-delay: calc(var(--i, 0) * -.1s); }
.lunar__mark.is-party .wm__dot { animation: wm-pulse .34s ease-in-out infinite alternate; filter: drop-shadow(0 0 14px #beda52); }
@keyframes wm-dance {
  0%   { transform: translateY(0) rotate(-5deg) scale(1, 1); }
  45%  { transform: translateY(-16%) rotate(4deg) scale(.96, 1.08); }
  100% { transform: translateY(3%) rotate(-2deg) scale(1.05, .94); }
}
@keyframes wm-pulse { from { transform: scale(1); } to { transform: scale(1.32); } }
@media (prefers-reduced-motion: reduce) { .lunar__mark.is-party .wm__l, .lunar__mark.is-party .wm__dot { animation: none; } }

/* ---- Process cards: no hover effects (owner, 2026-11-03) ---- */
.hgal__list .proc__card:hover { translate: none !important; box-shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 40px 70px -40px rgb(0 0 0 / .9) !important; }
.hgal__list .proc__card:hover::before { opacity: 0 !important; }
.hgal__list .proc__card:hover .proc__shot { scale: 1 !important; filter: none !important; }
.hgal__list .proc__card:hover::after { transform: none !important; background-color: rgb(12 12 12 / .45) !important; }
.hgal__list .proc__card { cursor: default; }

/* ---- Hero dot hover v2 (2026-11-03): gentle sway, letters drift through soft colours, no glows or shadows ---- */
.lunar__mark.is-party .wm { filter: none !important; }
.lunar__mark.is-party .wm__l { animation: wm-sway 1.3s ease-in-out infinite alternate, wm-hue 3.6s linear infinite; animation-delay: calc(var(--i, 0) * -.22s), calc(var(--i, 0) * -.6s); }
.lunar__mark.is-party .wm__dot { animation: wm-breathe .9s ease-in-out infinite alternate, wm-hue 3.6s linear infinite; filter: none !important; }
@keyframes wm-sway { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-4%) rotate(1.5deg); } }
@keyframes wm-breathe { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes wm-hue { 0% { fill: #beda52; } 20% { fill: #e9f6b7; } 40% { fill: #8fdcc4; } 60% { fill: #f6d36b; } 80% { fill: #ffffff; } 100% { fill: #beda52; } }

/* ---- Footer last column: "Branding With Wiseup" block (2026-11-03) ---- */
.ft__follow .ft__lead { margin: 0; max-width: 32ch; font-size: 15px; line-height: 24px; color: var(--ink-2); }
.ft__follow .ft__kick { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--head-a); }
.ft__follow .ft__kick .ft__ci { width: 30px; height: 30px; border-radius: 9px; }
.ft__follow .ft__kick .ft__ci svg { width: 16px; height: 16px; }
.ft__follow .ft__kick i { margin: 0 6px; font-style: normal; color: #beda52; opacity: .7; }
:root[data-theme='light'] .ft__follow .ft__kick i { color: #6f8a1f; }
.ft__top:has(.ft__services) .ft__follow .ft__contact { margin-top: 16px; }
.ft__top:has(.ft__services) .ft__follow .ft__contact a { word-break: break-word; }
@media (max-width: 599px) {
  .ft__follow > .ft__h, .ft__follow > p { display: block !important; }
  .ft__follow > p.ft__kick { display: flex !important; }
}

/* footer last column: tagline styled, same 15px size (2026-11-03) */
.ft__follow .ft__lead { font-size: 15px; }
.ft__lead-a { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: 1.06em; letter-spacing: .01em; color: #beda52; }
.ft__lead-b { position: relative; display: inline-block; font-weight: 600; color: var(--head-a); padding-bottom: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.2c10-3 20 2.4 30-.4s20-3.2 30 .2 20 2.8 30-.2 18-2.6 26 .4' fill='none' stroke='%23beda52' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 6px no-repeat; }
:root[data-theme='light'] .ft__lead-a { color: #5e7518; }
:root[data-theme='light'] .ft__lead-b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.2c10-3 20 2.4 30-.4s20-3.2 30 .2 20 2.8 30-.2 18-2.6 26 .4' fill='none' stroke='%236f8a1f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* homepage services: "Explore service" button inside a row's panel (Social Media Marketing), 2026-11-03 */
.svc__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; min-height: 42px; padding: 0 18px; border-radius: 99px;
  background: #beda52; color: #11150a; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .3s; }
.svc__more:hover, .svc__more:focus-visible { background: #d8ec8a; }
.svc__more:focus-visible { outline: 2px solid #beda52; outline-offset: 3px; }
.svc__more-ico { transition: transform .3s; }
.svc__more:hover .svc__more-ico { transform: translate(2px, -2px); }
.svc__inner:has(.svc__more) { display: flex; flex-direction: column; align-items: flex-start; }

/* Explore button lines up with the chips (same left indent), space below; footer tagline underline removed (2026-11-03) */
.svc__inner:has(.svc__more) .chips { padding-bottom: 0; }
.svc__more { margin: 18px 0 clamp(24px, 2.4vw, 32px) calc(clamp(22px, 3vw, 42px) + 26px + clamp(16px, 2vw, 24px)); }
.ft__lead-b, :root[data-theme="light"] .ft__lead-b { background: none !important; padding-bottom: 0; }
.svc__more, .svc__more:hover, .svc__more:focus-visible { color: #11150a !important; }
.svc__more svg { color: #11150a !important; stroke: currentColor; }

/* ---- Header: Services mega menu (2026-11-03). Opens on hover / keyboard focus like the Resources dropdown; the panel
   is centred under the header (the item is position: static so the fixed header is the containing block). ---- */
.hd__item--mega { position: static; }
.hd__nav:has(.hd__item--mega) { position: static; }
.hd__mega { position: absolute; z-index: 60; top: 100%; left: 50%; width: min(1080px, calc(100vw - 32px)); padding-top: 14px;
  translate: -50% 10px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, translate .45s cubic-bezier(.2, .8, .2, 1), visibility 0s .45s; }
.hd__item--mega:hover .hd__mega, .hd__item--mega:focus-within .hd__mega { opacity: 1; visibility: visible; pointer-events: auto; translate: -50% 0;
  transition: opacity .3s ease, translate .45s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.hd__item--mega:hover .hd__chev, .hd__item--mega:focus-within .hd__chev { rotate: 180deg; }
.hd__item--mega:hover .hd__link--parent, .hd__item--mega:focus-within .hd__link--parent { color: #fff; background: rgb(255 255 255 / .06); }

.mega { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; padding: 14px; overflow: hidden; border-radius: 28px;
  background: radial-gradient(60% 80% at 100% 0%, rgb(190 218 82 / .14), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgb(143 220 196 / .06), transparent 70%), #0c0c0e;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .09), 0 40px 80px -30px rgb(0 0 0 / .85); }
.mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mega__tile { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 14px; border-radius: 18px; color: #fff; text-decoration: none;
  transition: background .3s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.mega__ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #beda52;
  background: rgb(190 218 82 / .08); box-shadow: inset 0 0 0 1px rgb(190 218 82 / .2); transition: background .3s, color .3s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.mega__txt { display: grid; gap: 3px; min-width: 0; }
.mega__txt b { font-size: 14.5px; font-weight: 600; line-height: 1.2; color: #f2f2f2; }
.mega__txt small { overflow: hidden; font-size: 12px; line-height: 1.3; color: #8c8c92; white-space: nowrap; text-overflow: ellipsis; }
.mega__n { position: absolute; top: 10px; right: 14px; font-size: 10px; font-weight: 600; letter-spacing: .12em; color: rgb(255 255 255 / .18); transition: opacity .3s; }
.mega__tile .mega__go { position: absolute; right: 14px; bottom: 14px; opacity: 0; color: #beda52; transform: translate(-4px, 4px); transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.mega__tile:hover, .mega__tile:focus-visible { background: rgb(255 255 255 / .05); }
.mega__tile:hover .mega__ico, .mega__tile:focus-visible .mega__ico { color: #11150a; background: #beda52; transform: rotate(-8deg) scale(1.05); }
.mega__tile:hover .mega__go, .mega__tile:focus-visible .mega__go { opacity: 1; transform: none; }
.mega__tile:hover .mega__n { opacity: 0; }
.mega__tile:focus-visible { outline: 2px solid #beda52; outline-offset: -2px; }

/* feature card */
.mega__feat { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(160deg, #1b1f12, #101208 60%, #0c0d09); box-shadow: inset 0 0 0 1px rgb(190 218 82 / .18); }
.mega__feat::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; border-radius: 50%; border: 1px dashed rgb(190 218 82 / .25); animation: mega-spin 30s linear infinite; pointer-events: none; }
.mega__kick { align-self: flex-start; padding: 5px 10px; border-radius: 99px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #11150a; background: #beda52; }
.mega__h { margin: 4px 0 0; font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.mega__h span { color: #8c8c92; }
.mega__p { margin: 0; font-size: 13px; line-height: 1.5; color: #a4a4aa; }
.mega__all { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 13.5px; font-weight: 600; color: #beda52; text-decoration: none; }
.mega__all:hover .mega__go { transform: translate(2px, -2px); }
.mega__all .mega__go { position: static; opacity: 1; transform: none; transition: transform .3s; }
.mega__plan { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; border: 0; border-radius: 99px; font: inherit; font-size: 14px; font-weight: 600;
  color: #11150a; background: #beda52; cursor: pointer; text-decoration: none; transition: background .3s; }
.mega__plan:hover, .mega__plan:focus-visible { background: #d8ec8a; }
@keyframes mega-spin { to { rotate: 360deg; } }

/* tiles cascade in when the panel opens */
.hd__mega .mega__tile, .hd__mega .mega__feat { opacity: 0; transform: translateY(8px); }
.hd__item--mega:hover .mega__tile, .hd__item--mega:focus-within .mega__tile, .hd__item--mega:hover .mega__feat, .hd__item--mega:focus-within .mega__feat {
  opacity: 1; transform: none; transition: opacity .4s ease calc(var(--d, 0) * 35ms + 60ms), transform .5s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0) * 35ms + 60ms), background .3s; }
.hd__item--mega:hover .mega__tile:hover { transition-delay: 0s; }
@media (max-width: 1280px) { .mega { grid-template-columns: minmax(0, 1fr) 240px; } .mega__txt small { display: none; } }
@media (prefers-reduced-motion: reduce) { .hd__mega, .hd__mega * { transition: none !important; animation: none !important; } .hd__mega .mega__tile, .hd__mega .mega__feat { opacity: 1; transform: none; } }

/* ---- Mega menu inside: neumorphic (2026-11-03) ---- */
.mega { background: #141416 !important; gap: 16px; padding: 18px; }
.mega__grid { gap: 12px; }
.mega__tile { background: linear-gradient(145deg, #18181b, #111113);
  box-shadow: -5px -5px 12px rgb(255 255 255 / .035), 6px 7px 14px rgb(0 0 0 / .65), inset 0 1px 0 rgb(255 255 255 / .04);
  transition: box-shadow .35s, background .35s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.mega__tile:hover, .mega__tile:focus-visible { background: linear-gradient(145deg, #121214, #17171a);
  box-shadow: inset 4px 4px 10px rgb(0 0 0 / .7), inset -4px -4px 10px rgb(255 255 255 / .035); }
.mega__ico { background: linear-gradient(145deg, #1c1c20, #121215); box-shadow: -3px -3px 7px rgb(255 255 255 / .04), 3px 4px 8px rgb(0 0 0 / .7); }
.mega__tile:hover .mega__ico, .mega__tile:focus-visible .mega__ico { color: #beda52; background: linear-gradient(145deg, #111113, #18181b);
  box-shadow: inset 3px 3px 7px rgb(0 0 0 / .75), inset -3px -3px 7px rgb(255 255 255 / .04); transform: none; }
.mega__feat { background: linear-gradient(145deg, #19191c, #111113);
  box-shadow: -6px -6px 14px rgb(255 255 255 / .035), 8px 8px 18px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .05); }
.mega__feat::after { border-color: rgb(255 255 255 / .08); }
.mega__plan { box-shadow: -3px -3px 8px rgb(255 255 255 / .05), 4px 5px 10px rgb(0 0 0 / .6); }
.mega__plan:hover, .mega__plan:focus-visible { box-shadow: inset 3px 3px 6px rgb(0 0 0 / .25), inset -2px -2px 5px rgb(255 255 255 / .35); }

/* ---- Mega menu hanging on two rope cords (2026-11-03): the panel hangs lower so the ropes show; jute rope with a braided twist and brass rings ---- */
.hd__mega { padding-top: 58px; }
.mega__ropes { position: absolute; top: 0; left: 0; z-index: 2; overflow: visible; pointer-events: none; }
.mega__rope { fill: none; stroke: #9a7b4f; stroke-width: 4; stroke-linecap: round; }
.mega__rope-twist { fill: none; stroke: #d9bf8c; stroke-width: 2.2; stroke-linecap: butt; stroke-dasharray: 3.2 3.4; opacity: .85; }
.mega__ring { fill: none; stroke: #c9a24e; stroke-width: 2.4; }
.mega { will-change: transform; }
:root[data-theme='light'] .mega__rope { stroke: #8a6a3d; }

/* ---- Mega menu tiles: names only (numbers and detail lines removed); feel-good hover (2026-11-03) ---- */
.mega__tile { min-height: 76px; }
.mega__txt b { font-size: 15px; transition: color .35s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.mega__ico { position: relative; overflow: visible; }
.mega__ico::before, .mega__ico::after { content: ''; position: absolute; inset: -2px; border-radius: 15px; border: 2px solid #8fdcc4; opacity: 0; pointer-events: none; }
.mega__ico::after { border-color: #beda52; }
.mega__tile:hover .mega__ico::before, .mega__tile:focus-visible .mega__ico::before { animation: mega-ripple 1.1s cubic-bezier(.2, .8, .2, 1) infinite; }
.mega__tile:hover .mega__ico::after, .mega__tile:focus-visible .mega__ico::after { animation: mega-ripple 1.1s cubic-bezier(.2, .8, .2, 1) .35s infinite; }
.mega__tile:hover .mega__ico svg, .mega__tile:focus-visible .mega__ico svg { animation: mega-happy .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.mega__tile:hover .mega__txt b, .mega__tile:focus-visible .mega__txt b { color: #d8ec8a; transform: translateX(3px); }
@keyframes mega-ripple { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes mega-happy { 0% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-5px) rotate(-12deg) scale(1.15); } 55% { transform: translateY(1px) rotate(8deg) scale(.95); } 80% { transform: translateY(-1px) rotate(-3deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mega__ico::before, .mega__ico::after, .mega__ico svg { animation: none !important; } }

/* ---- Mega menu tiles: no hover effects; a bigger, always-visible arrow button per tile (2026-11-03) ---- */
.mega__tile { padding-right: 56px; }
.mega__tile:hover, .mega__tile:focus-visible { background: linear-gradient(145deg, #18181b, #111113) !important;
  box-shadow: -5px -5px 12px rgb(255 255 255 / .035), 6px 7px 14px rgb(0 0 0 / .65), inset 0 1px 0 rgb(255 255 255 / .04) !important; transform: none !important; }
.mega__tile:hover .mega__ico, .mega__tile:focus-visible .mega__ico { color: #beda52 !important; background: linear-gradient(145deg, #1c1c20, #121215) !important;
  box-shadow: -3px -3px 7px rgb(255 255 255 / .04), 3px 4px 8px rgb(0 0 0 / .7) !important; transform: none !important; }
.mega__tile:hover .mega__ico::before, .mega__tile:hover .mega__ico::after, .mega__tile:focus-visible .mega__ico::before, .mega__tile:focus-visible .mega__ico::after { animation: none !important; opacity: 0 !important; }
.mega__tile:hover .mega__ico svg, .mega__tile:focus-visible .mega__ico svg { animation: none !important; }
.mega__tile:hover .mega__txt b, .mega__tile:focus-visible .mega__txt b { color: #f2f2f2 !important; transform: none !important; }
.mega__arrow { position: absolute; right: 14px; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; color: #beda52;
  background: linear-gradient(145deg, #1d1d21, #121215); box-shadow: -3px -3px 7px rgb(255 255 255 / .04), 3px 4px 8px rgb(0 0 0 / .7), inset 0 0 0 1px rgb(190 218 82 / .18); }
.mega__arrow svg { width: 16px; height: 16px; }
.mega__tile:focus-visible { outline: 2px solid #beda52; outline-offset: -2px; }

/* mega tiles: a lime border and a lime arrow button on hover (2026-11-03) */
.mega__tile { outline: 1.5px solid transparent; outline-offset: -1.5px; transition: outline-color .3s; }
.mega__arrow { transition: background .3s, color .3s, box-shadow .3s; }
@media (hover: hover) {
  .mega__tile:hover { outline-color: rgb(190 218 82 / .7); }
  .mega__tile:hover .mega__arrow { background: #beda52; color: #11150a; box-shadow: 0 0 0 1px #beda52; }
}

/* mega feature card: "360 Marketing Services" heading; Get our plan text forced dark (2026-11-03) */
.mega__h { font-size: 26px; line-height: 1.1; }
.mega__360 { display: block; font-size: 1.9em; font-weight: 700; letter-spacing: -.04em; line-height: .95; color: #beda52; }
.mega__plan, .mega__plan:hover, .mega__plan:focus-visible, a.mega__plan, button.mega__plan { color: #11150a !important; }
.mega__h .mega__360 { color: #beda52; }
.mega__feat .mega__plan { margin-top: auto; }

/* ---- Performance (2026-11-04): the moving image blocks get their own GPU layer, repaint only inside themselves,
   and pause their drift while off screen (.is-off is toggled by a small observer in the page). ---- */
.press__run, .reach__track { will-change: transform; backface-visibility: hidden; }
.press__wall, .reach__view { contain: layout paint; }
.press__wall.is-off .press__run, .reach__view.is-off .reach__track { animation-play-state: paused; }
.press__card img, .reach__track img { backface-visibility: hidden; }

/* Press wall: each clipping once, no repeats (owner, 2026-11-04: "images are repeated in this section, dont repeat"). Still grid, 3x2 / 2x3. */
.press__wall { height: auto !important; overflow: visible !important; display: block !important; -webkit-mask-image: none !important; mask-image: none !important; }
.press__wall::before, .press__wall::after { content: none !important; }
.press__once { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); align-items: start; }
.press__once .press__card { margin: 0; transform: none; }
.press__once .press__card:nth-child(3n+1) { transform: rotate(-1deg); }
.press__once .press__card:nth-child(3n) { transform: rotate(1.1deg); }
@media (max-width: 767px) {
  .press__once { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .press__once .press__card { transform: none !important; }
}

/* WP Rocket "Automatic Lazy Rendering" puts content-visibility:auto on sections (data-wpr-lazyrender). Those sections
   then count as ~0px tall until scrolled near, so the pinned process gallery measured its start ~1000px too early and
   showed over the growing band (2026-11-04). Render them normally. */
html body [data-wpr-lazyrender] { content-visibility: visible !important; contain-intrinsic-size: none !important; }

/* Homepage work rows: second row restored, its tiles show the case-study results on hover (owner, 2026-11-04).
   Figures are the same as the social media page's Results section. */
.rows__link { position: relative; }
.rows__stats { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: clamp(16px, 1.6vw, 24px);
  color: #fff; background: linear-gradient(180deg, rgb(8 9 6 / .25), rgb(8 9 6 / .82) 45%, rgb(8 9 6 / .94)); opacity: 0; transition: opacity .45s var(--ease, ease); pointer-events: none; }
.rows__big { display: grid; gap: 4px; translate: 0 14px; transition: translate .55s var(--ease, ease); }
.rows__big b { font-size: clamp(34px, 3.4vw, 54px); font-weight: 700; line-height: .95; letter-spacing: -.04em; color: #c2f760; }
.rows__big span { max-width: 22ch; font-size: 14px; line-height: 1.35; color: rgb(255 255 255 / .8); }
.rows__mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; translate: 0 18px; opacity: 0; transition: translate .6s var(--ease, ease) .06s, opacity .45s .06s; }
.rows__mini > span { display: grid; gap: 2px; padding: 10px 11px; border-radius: 12px; font-size: 11.5px; line-height: 1.3; color: rgb(255 255 255 / .66); background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.rows__mini b { font-size: clamp(16px, 1.3vw, 20px); font-weight: 700; letter-spacing: -.02em; color: #fff; }
.rows__link:focus-visible .rows__stats, .rows__link:focus-visible .rows__mini { opacity: 1; }
.rows__link:focus-visible .rows__big, .rows__link:focus-visible .rows__mini { translate: 0 0; }
@media (hover: hover) {
  .rows__link:hover .rows__stats, .rows__link:hover .rows__mini { opacity: 1; }
  .rows__link:hover .rows__big, .rows__link:hover .rows__mini { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .rows__stats, .rows__big, .rows__mini { transition: none; translate: none; } }

/* Work rows: drag to scroll (owner, 2026-11-04) */
.rows__row { cursor: grab; touch-action: pan-y; }
.rows__row.is-drag { cursor: grabbing; }
.rows__row.is-drag .rows__link { pointer-events: none; }
.rows__row img { -webkit-user-drag: none; user-select: none; }

/* Press clippings straight, no tilt (owner, 2026-11-04: "make it straight no tilt pls") */
.press__wall, .press__once, .press__once .press__card { transform: none !important; rotate: none !important; }

/* Press cards equal height (owner, 2026-11-04): every card in the grid as tall as the tallest */
.press__once { align-items: stretch; grid-auto-rows: 1fr; }
.press__once .press__card { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.press__once .press__card figcaption { flex: 1; align-content: start; }

/* Press cards: entrance (rise + fade, staggered) and scroll parallax (columns drift at different rates). No tilt.
   Uses the separate `translate` property because `transform` is forced to none on these cards. (owner, 2026-11-04) */
@property --ey { syntax: '<length>'; inherits: false; initial-value: 0px; }
.press__once .press__card { --py: var(--pa, 0px); translate: 0 calc(var(--ey) + var(--py)); }
.press__once .press__card:nth-child(3n+2) { --py: var(--pb, 0px); }
.press__once .press__card:nth-child(3n) { --py: var(--pc, 0px); }
@media (max-width: 767px) {
  .press__once .press__card:nth-child(odd) { --py: var(--pa, 0px); }
  .press__once .press__card:nth-child(even) { --py: var(--pb, 0px); }
}
.press__once.wu-anim .press__card { --ey: 56px; opacity: 0; transition: --ey 1s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms), opacity .8s ease var(--d, 0ms); }
.press__once.wu-anim.is-in .press__card { --ey: 0px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .press__once .press__card { translate: none; opacity: 1; transition: none; } }

/* Press cards, standard version (owner, 2026-11-05: "make it more standard spacing and effects"): no scroll parallax,
   one even gap, staggered fade-up on view, a small lift + shadow on hover. */
@property --hy { syntax: '<length>'; inherits: false; initial-value: 0px; }
.press__once { gap: 24px; align-items: stretch; }
.press__once .press__card, .press__once .press__card:nth-child(n) { --py: 0px; translate: 0 calc(var(--ey) + var(--hy)); }
.press__once .press__card { transition: --ey .8s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms), opacity .6s ease var(--d, 0ms), --hy .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
.press__once.wu-anim .press__card { --ey: 32px; }
.press__once.wu-anim.is-in .press__card { --ey: 0px; }
@media (hover: hover) {
  .press__once .press__card:hover { --hy: -6px; box-shadow: 0 1px 2px rgb(0 0 0 / .2), 0 26px 44px -18px rgb(0 0 0 / .75); }
  :root[data-theme='light'] .press__once .press__card:hover { box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 26px 44px -22px rgb(0 0 0 / .4); }
}
@media (max-width: 767px) { .press__once { gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .press__once .press__card { translate: none !important; transition: none; } }

/* Process slider restored (owner, 2026-11-05: "its slider mode changed, pls restore"). In the pinned sideways mode the
   cards now fill most of the screen height instead of sitting 430px tall in a 100vh frame. */
@media (min-width: 900px) {
  .motion #process .hgal__list .proc__card { min-height: min(72svh, 620px); width: clamp(420px, 40vw, 640px); }
  .motion #process .hgal__intro { justify-content: center; gap: 28px; }
}

/* Phone hero: less space between the subtitle and the card strip (owner, 2026-11-05: "remove spacing"). The strip was
   550px tall with 380px cards centred in it (85px empty above and below) plus a 56px margin. */
@media (max-width: 767px) {
  .wiseup-page-home .hero--lunar .strip, .hero--lunar .strip { margin-top: 44px !important; height: 440px; }
  .hero--lunar .strip__plane { height: 440px; align-items: flex-start; }
  .hero--lunar .strip-nav { bottom: 0 !important; }
}

/* Header menu fits its pill with the longer "WiseUp Studio" label (owner, 2026-11-05: "fix menu first"): the links
   spilled up to 30px (1440+) / 51px (1200) past the pill into the call button. Tighter link padding, same type. */
@media (min-width: 1440px) { .hd__nav { gap: 2px; } .hd__link { padding: 10px 11px; } }
@media (min-width: 1200px) and (max-width: 1439px) { .hd__link { padding: 9px 8px; } }

/* Process slider on desktop: each card has the photos' own shape (1920x1246) so the whole photo shows, not a square
   crop (owner, 2026-11-05: "in desktop images not fully visible"). */
@media (min-width: 900px) {
  .motion #process .hgal__list .proc__card { --ph: min(62svh, 560px); height: var(--ph); min-height: 0; width: calc(var(--ph) * 1920 / 1246); }
  .motion #process .hgal__list .proc__shot { object-position: 50% 50%; }
}

/* restored stats + press stack band: the heading's first line stays white (the h2 now wraps both lines in spans) */
.grow__title .grow__l1 { color: var(--head-a, #fff); }
/* growing band is its own section now: drop the old in-section top margin (owner, 2026-11-06: "reduce its margin top") */
.sec.grow-sec .grow { margin-top: 0; }

/* ===== press stack as real newspapers (2026-11-06, owner: "make it like a real newspapper deck") =====
   Each clipping is a folded newsprint front: serif masthead between rules, the headline in ink, the clipping printed in
   grey ink beside two columns of type, a vertical fold crease, paper grain and slightly darker edges; the sheets lie
   askew so the edges of the ones underneath show. The page-turn script is unchanged. */
.grow .deck__stack { aspect-ratio: 4 / 3.15; }
.grow .deck__c.np {
  display: flex; flex-direction: column; gap: 0; padding: 4.2% 5% 4.6%; border-radius: 2px;
  color: #1c1a16; background-color: #f1ece0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(130% 120% at 50% 40%, transparent 55%, rgb(120 98 60 / .22));
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 0 0 1px rgb(60 48 30 / .18), 0 26px 50px -24px rgb(0 0 0 / .85), 0 6px 14px -8px rgb(0 0 0 / .5);
  transform: translate(calc(var(--p) * 9px), calc(var(--p) * -7px)) rotate(calc(-2deg + var(--p) * 1.7deg));
  font-family: Georgia, 'Times New Roman', serif;
}
.grow .deck__c.np:nth-child(even) { background-color: #ece6d6; }
.grow .deck__c.np::before { content: ''; position: absolute; inset: 0 auto 0 50%; width: 22px; translate: -50% 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, transparent, rgb(90 72 40 / .1) 42%, rgb(255 255 255 / .35) 52%, rgb(90 72 40 / .06) 60%, transparent); }
.grow .deck__c.np::after { content: ''; position: absolute; inset: 0; right: auto; bottom: auto; width: 100%; height: 100%; z-index: 3; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / .18), transparent 40%, rgb(0 0 0 / .05)); border-radius: 0; }
.grow .np__mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 3px double rgb(28 26 22 / .8); }
.grow .np__mast span { font: 600 clamp(7px, .55vw, 9px)/1.2 'Inter', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgb(28 26 22 / .6); }
.grow .np__mast span:last-child { text-align: right; }
.grow .deck__c.np .np__mast b { display: block; margin: 0; font: 900 clamp(17px, 1.65vw, 25px)/1 Georgia, 'Times New Roman', serif; letter-spacing: -.01em; text-transform: none; color: #15130f; white-space: nowrap; }
.grow .deck__c.np .np__h { position: static; inset: auto; margin: 8px 0 8px; padding: 0 0 7px; border-bottom: 1px solid rgb(28 26 22 / .35); background: none; font: 700 clamp(13px, 1.15vw, 17px)/1.18 Georgia, 'Times New Roman', serif; color: #15130f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.grow .np__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.55fr 1fr; gap: 8px; }
.grow .np__fig { position: relative; margin: 0; overflow: hidden; background: #d9d2c0; }
.grow .deck__c.np .np__fig img { width: 100%; height: 100%; object-fit: cover; object-position: top left; filter: grayscale(1) contrast(1.15) brightness(1.04) sepia(.18); mix-blend-mode: multiply; }
.grow .np__cols { background:
  repeating-linear-gradient(180deg, rgb(28 26 22 / .32) 0 2px, transparent 2px 6px) 0 0 / 46% 100% no-repeat,
  repeating-linear-gradient(180deg, rgb(28 26 22 / .32) 0 2px, transparent 2px 6px) 100% 0 / 46% 100% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
@media (hover: hover) { .grow .deck:hover .deck__c.np[style*='--p:0'] { transform: translate(-6px, -8px) rotate(-3deg); } }
@media (max-width: 767px) {
  .grow .deck__c.np { padding: 4% 4.6% 4.4%; }
  .grow .np__mast { gap: 6px; }
  .grow .np__mast span { font-size: 6.5px; }
  .grow .deck__c.np .np__mast b { font-size: 15px; }
  .grow .deck__c.np .np__h { font-size: 12.5px; margin: 6px 0; padding-bottom: 5px; }
}
@media (max-width: 1100px) { .grow .deck__label { margin-bottom: 34px; } }

/* newspaper deck: only the clipping image on each sheet (owner, 2026-11-06: "use that image only in the decks") */
.grow .deck__c.np { padding: 3.2%; }
.grow .deck__c.np :is(.np__mast, .np__h, .np__cols) { display: none; }
.grow .deck__c.np .np__body { display: block; height: 100%; }
.grow .deck__c.np .np__fig { height: 100%; background: #fff; box-shadow: 0 0 0 1px rgb(60 48 30 / .15); }
.grow .deck__c.np .np__fig img { filter: none; mix-blend-mode: normal; }
.grow .deck__c.np::before { opacity: .55; }

/* ===== growing band, one vibe with the newspaper deck (2026-11-06, owner: "stats and news deck design not matching make it one vibe") =====
   The stats card becomes an editorial "front page" in the dark: newsprint-toned serif figures, small-caps labels,
   column rules between the stats, a double rule along the top; the green growth bars / line / table glow are hidden. */
.grow .grow__bars, .grow .grow__svg { display: none !important; }
.grow .grow__chart {
  background-color: #0e0d0b !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .92 0 0 0 0 .86 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(120% 140% at 0% 0%, rgb(241 236 224 / .06), transparent 60%) !important;
  box-shadow: inset 0 0 0 1px rgb(241 236 224 / .12) !important;
}
.grow .grow__chart::before, .grow .grow__chart::after { display: none !important; }
.grow .grow__stats { position: relative; padding-top: 18px; border-top: 3px double rgb(241 236 224 / .35); }
.grow .grow__stats::before { content: 'CodeAce \2014 in numbers'; position: absolute; left: 0; top: -11px; padding-right: 12px; font: 600 10px/1 'Inter', system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: rgb(241 236 224 / .55); background: #0e0d0b; }
.grow .grow__stats li { position: relative; }
.grow .grow__stats li + li { border-left: 1px solid rgb(241 236 224 / .14); padding-left: clamp(14px, 1.6vw, 26px); }
.grow .grow__stats li b { font-family: Georgia, 'Times New Roman', serif !important; font-weight: 400 !important; letter-spacing: -.03em !important; color: #f1ece0 !important; }
.grow .grow__stats li b em { font-style: italic; color: #beda52; }
.grow .grow__stats li > span:last-child { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .16em !important; text-transform: uppercase; color: rgb(241 236 224 / .5) !important; line-height: 1.5; }
.grow__title .grow__l2 { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.grow .deck::before { background: radial-gradient(closest-side, rgb(241 236 224 / .12), transparent) !important; }
@media (max-width: 1100px) {
  .grow .grow__stats li + li { border-left: 0; padding-left: 0; }
  .grow .grow__stats li:nth-child(even) { border-left: 1px solid rgb(241 236 224 / .14); padding-left: 16px; }
  .grow .grow__stats::before { font-size: 9px; }
}
/* one-vibe fixes: kicker as its own line above the double rule, no leftover stat boxes or glow dot */
.grow .grow__stats { padding-top: 0; border-top: 0; }
.grow .grow__stats::before { content: 'CodeAce \2014  in numbers'; position: static; grid-column: 1 / -1; display: block; margin: 0 0 18px; padding: 0 0 12px; border-bottom: 3px double rgb(241 236 224 / .3); background: none; }
.grow .grow__stats li { background: none !important; box-shadow: none !important; border-radius: 0 !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; }
.grow .grow__stats li::after, .grow .grow__stats li::before { display: none !important; }
.grow .grow__chart > :not(.grow__stats):not(.deck)::after, .grow .grow__chart .grow__dot { display: none !important; }
@media (max-width: 1100px) {
  .grow .grow__stats li:nth-child(n+3) { border-top: 1px solid rgb(241 236 224 / .14) !important; padding-top: 16px; }
  .grow .grow__stats li:nth-child(-n+2) { padding-bottom: 16px; }
}

/* stats: breathing room after each column rule (owner, 2026-11-06: "align correct") */
@media (min-width: 1101px) { .grow .grow__chart .grow__stats li + li { padding-left: clamp(16px, 1.8vw, 28px) !important; } }
@media (max-width: 1100px) { .grow .grow__chart .grow__stats li:nth-child(even) { padding-left: 16px !important; } }

/* press stack shuffle: transform-only motion with a soft spring */
.grow .deck__stack { perspective: none; }
.grow .deck__c.np { transition: transform .7s cubic-bezier(.22, 1.2, .36, 1), box-shadow .5s ease; will-change: transform; backface-visibility: hidden; }
.grow .deck__c.np.is-out { transform: translate(78%, -10%) rotate(11deg) !important; box-shadow: 0 0 0 1px rgb(60 48 30 / .18), 0 40px 70px -24px rgb(0 0 0 / .9); transition: transform .52s cubic-bezier(.55, 0, .3, 1), box-shadow .4s ease; }
@media (max-width: 767px) { .grow .deck__c.np.is-out { transform: translate(55%, -8%) rotate(9deg) !important; } }