/* =====================================================================
   THE MARKETING AGENCY — Build 2030.2
   Editorial serif for the voice. Quiet grotesk for the work.
   Warm ink and bone that trade places as you move through the page,
   one ember accent, and motion you can hold in your hands.
   ===================================================================== */

/* Tone tokens. Every section carries its own set, so its ink never changes.
   The page colour behind the sections slides between night and day with the
   scroll (see tone in app.js). The tokens are registered so the fixed chrome
   (nav, toast, menu), which uses the page-level set, can ease between them. */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #0e0e0c; }
@property --fg { syntax: '<color>'; inherits: true; initial-value: #ece7de; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: rgba(236, 231, 222, .62); }
@property --faint { syntax: '<color>'; inherits: true; initial-value: rgba(236, 231, 222, .4); }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgba(236, 231, 222, .11); }
@property --line-2 { syntax: '<color>'; inherits: true; initial-value: rgba(236, 231, 222, .2); }
@property --card { syntax: '<color>'; inherits: true; initial-value: rgba(236, 231, 222, .035); }
@property --card-2 { syntax: '<color>'; inherits: true; initial-value: rgba(236, 231, 222, .07); }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #ec6a3e; }

:root {
  --bg: #0e0e0c;
  --fg: #ece7de;
  --muted: rgba(236, 231, 222, .62);
  --faint: rgba(236, 231, 222, .4);
  --line: rgba(236, 231, 222, .11);
  --line-2: rgba(236, 231, 222, .2);
  --card: rgba(236, 231, 222, .035);
  --card-2: rgba(236, 231, 222, .07);
  --accent: #ec6a3e;

  --sky-a: #6a5acd;
  --sky-b: #e8a27c;

  --serif: "Newsreader", "Iowan Old Style", "Times New Roman", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --r: 18px;
  --r-lg: 28px;
  --gutter: clamp(18px, 4vw, 64px);
  --maxw: 1520px;
  --sec: clamp(120px, 15vw, 230px);
  color-scheme: dark;
  transition: --bg 1s var(--ease), --fg 1s var(--ease), --muted 1s var(--ease), --faint 1s var(--ease), --line 1s var(--ease), --line-2 1s var(--ease), --card 1s var(--ease), --card-2 1s var(--ease), --accent 1s var(--ease);
}
[data-tone="dark"] {
  --bg: #0e0e0c;
  --fg: #ece7de;
  --muted: rgba(236, 231, 222, .62);
  --faint: rgba(236, 231, 222, .4);
  --line: rgba(236, 231, 222, .11);
  --line-2: rgba(236, 231, 222, .2);
  --card: rgba(236, 231, 222, .035);
  --card-2: rgba(236, 231, 222, .07);
  --accent: #ec6a3e;
  color-scheme: dark;
}
[data-tone="light"] {
  --bg: #ece7de;
  --fg: #151513;
  --muted: rgba(21, 21, 19, .64);
  --faint: rgba(21, 21, 19, .42);
  --line: rgba(21, 21, 19, .1);
  --line-2: rgba(21, 21, 19, .2);
  --card: rgba(21, 21, 19, .03);
  --card-2: rgba(21, 21, 19, .06);
  --accent: #cf4a1f;
  color-scheme: light;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
kbd { font-family: var(--mono); font-size: .86em; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- base ---------- */
html { background: var(--bg); }   /* replaced by the scroll-driven page colour once the script runs */
body { color: var(--fg); }
section[data-tone], footer[data-tone] { color: var(--fg); }
html:not(.js) section[data-tone="light"] { background: var(--bg); }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.is-booting body { overflow: hidden; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
em { font-family: var(--serif); font-style: italic; font-weight: inherit; letter-spacing: -.01em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--fg); color: var(--bg); padding: 10px 14px; border-radius: 10px; font-weight: 500; transition: top .3s; }
.skip:focus { top: 16px; }

.eyebrow { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 30px; }
.eyebrow b { font-family: var(--mono); font-weight: 400; letter-spacing: .02em; color: var(--fg); }
.eyebrow b::after { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--line-2); vertical-align: middle; margin-left: 14px; }

.h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 72;
  font-size: clamp(50px, 7.4vw, 128px);
  line-height: .94;
  letter-spacing: -.035em;
}
.h2 em { font-weight: 300; color: var(--accent); }
.h2--sm { font-size: clamp(44px, 5.6vw, 96px); }
.lede { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--muted); max-width: 44ch; text-wrap: pretty; }
.lede em { color: var(--fg); font-size: 1.12em; }

.split-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 96px); align-items: end; }
section, footer { position: relative; }

/* ---------- split-text reveal ---------- */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding: .24em .3em .3em .14em; margin: -.24em -.3em -.3em -.14em; }   /* room for capitals, ascenders, descenders and italic overhangs, so a word rising (and tilting) is never sliced */
.sw.is-open, html[data-motion="reduced"] .sw { overflow: visible; }   /* once a word has landed its mask comes off, so a late font swap can't leave it clipped */
.sw__i { display: inline-block; }
.js [data-split] .sw__i { transform: translate3d(0, 112%, 0) rotate(5deg); transform-origin: 0 100%; transition: transform 1.3s var(--ease); transition-delay: calc(var(--i, 0) * 55ms + var(--d0, 0ms)); }
.js [data-split].in .sw__i { transform: none; }

/* ---------- buttons, chips ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 22px; border-radius: 999px; overflow: hidden; isolation: isolate;
  font-size: 14.5px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap;
  transition: transform .6s var(--ease), color .4s var(--ease), border-color .4s, background-color .4s;
}
.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); border-radius: inherit; transform: translateY(102%); transition: transform .6s var(--ease); }
.btn--solid:hover { color: #fff; }
.btn--solid:hover::before { transform: none; }
.btn--line { border: 1px solid var(--line-2); color: var(--fg); background: transparent; }
.btn--line:hover { border-color: var(--fg); }
.btn svg { width: 16px; height: 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 9px 15px; font-size: 14px; line-height: 1.2; color: var(--muted);
  transition: color .3s, border-color .3s, background-color .3s, transform .5s var(--ease);
}
.chip:hover { color: var(--fg); border-color: var(--fg); }
.chip:active { transform: scale(.97); }
.chips--stack { flex-direction: column; align-items: flex-start; }
.linkish { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; text-align: left; transition: color .3s; }
.linkish:hover { color: var(--fg); text-decoration-color: var(--accent); }

.round { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: border-color .3s, background-color .3s, transform .5s var(--ease); }
.round:hover { border-color: var(--fg); }
.round:active { transform: scale(.94); }

/* ---------- reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* =====================================================================
   OPENING
   ===================================================================== */
.boot { display: none; }
.is-booting .boot {
  display: grid; position: fixed; inset: 0; z-index: 120; background: #0e0e0c; color: #ece7de;
  place-content: center; text-align: center; padding: var(--gutter);
  clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease-io);
}
.boot.is-out { clip-path: inset(0 0 100% 0); }
.boot__line { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 7vw, 112px); line-height: 1; letter-spacing: -.035em; white-space: nowrap; }
.boot__br { display: none; }
/* on a phone the line is too long for one row at any size worth reading, so it breaks after "We know" and the longer row
   ("online marketing.") is sized to fit between the margins: about 38px at 320 wide, 52px at 430 */
@media (max-width: 560px) {
  .boot__br { display: inline; }
  .boot__line { font-size: min(52px, calc((100vw - 2 * var(--gutter)) / 7.6)); line-height: 1.06; }
}
.bw { display: inline-block; opacity: 0; transform: translateY(40%); filter: blur(6px); transition: opacity 1s var(--ease), transform 1.2s var(--ease), filter 1s var(--ease); transition-delay: calc(var(--i) * 90ms); }
.boot.go .bw { opacity: 1; transform: none; filter: none; }
.boot__online { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; white-space: nowrap; transition: max-width .9s var(--ease-io), opacity .6s; }
.boot__online::after { content: ""; position: absolute; left: 0; right: .3em; top: 56%; height: 1.5px; background: #ec6a3e; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-io); }
.boot__online.is-struck::after { transform: scaleX(1); }
.boot__online.is-struck .bw { color: rgba(236, 231, 222, .4); transition: color .5s; }
.boot__note { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1.6vw, 22px); color: rgba(236, 231, 222, .6); margin-top: 22px; opacity: 0; transform: translateY(8px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.boot__note.in { opacity: 1; transform: none; }
.boot__count { position: absolute; right: var(--gutter); bottom: var(--gutter); font: 300 clamp(48px, 6vw, 88px)/1 var(--serif); letter-spacing: -.03em; color: rgba(236, 231, 222, .3); font-variant-numeric: tabular-nums; }

/* =====================================================================
   NAV
   ===================================================================== */
/* The header never becomes a bar. At the top it's the logo, the links and the tools, floating on the hero. Once you
   scroll, each part becomes its own island of glass tinted by the page beneath: the logo folds down to its four bars
   (point at them and the name comes back), the links ride in a capsule with a pill that follows the section you're in,
   and a hairline in that capsule fills as you read down the page. */
.nav {
  --glass: color-mix(in srgb, var(--page, var(--bg)) 58%, transparent);
  --glass-line: color-mix(in srgb, var(--fg) 12%, transparent);
  position: fixed; top: 14px; left: var(--gutter); right: var(--gutter); z-index: 60;
  height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  pointer-events: none;
  transition: transform .8s var(--ease), opacity .6s;
}
.nav > * { pointer-events: auto; }
.nav.is-hidden { transform: translateY(-140%); }
.is-booting .nav { opacity: 0; transform: translateY(-20px); }
.nav > .brand, .nav__links, .nav__tools {
  border: 1px solid transparent; border-radius: 999px;
  transition: background-color .6s, border-color .6s, box-shadow .6s, padding .7s var(--ease), gap .7s var(--ease);
}
.nav.is-scrolled > .brand, .nav.is-scrolled .nav__links, .nav.is-scrolled .nav__tools {
  background: var(--glass); border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent), 0 14px 34px -18px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
}

/* the logo: its bars are vectors measured off the master, its name the master's own lettering */
.brand { --lh: 42px; display: flex; align-items: center; gap: calc(var(--lh) * 5 / 93); flex-shrink: 0; height: 52px; padding: 0 8px 0 2px; color: var(--fg); }
.brand__mark { display: block; height: var(--lh); width: calc(var(--lh) * 136 / 93); fill: currentColor; overflow: visible; }
.brand__mark rect { transform-box: fill-box; transform-origin: 50% 100%; }
.brand:hover .brand__mark rect { animation: barBreath .8s var(--ease) infinite alternate; }
.brand:hover .brand__mark rect:nth-child(2) { animation-delay: -.2s; } .brand:hover .brand__mark rect:nth-child(3) { animation-delay: -.4s; } .brand:hover .brand__mark rect:nth-child(4) { animation-delay: -.6s; }
@keyframes barBreath { to { transform: scaleY(.62); } }
.brand__word {
  display: block; height: var(--lh); width: calc(var(--lh) * 256 / 93); flex: none; background: currentColor;
  -webkit-mask: url(../img/logo/tma-wordmark.png) 0 0 / auto 100% no-repeat; mask: url(../img/logo/tma-wordmark.png) 0 0 / auto 100% no-repeat;
  transition: width .7s var(--ease), opacity .5s;
}
.nav.is-scrolled > .brand { padding: 0 16px; gap: 0; }
.nav.is-scrolled .brand__word { width: 0; opacity: 0; }
.nav.is-scrolled > .brand:hover, .nav.is-scrolled > .brand:focus-visible { gap: calc(var(--lh) * 5 / 93); }
.nav.is-scrolled > .brand:hover .brand__word, .nav.is-scrolled > .brand:focus-visible .brand__word { width: calc(var(--lh) * 256 / 93); opacity: 1; }

.nav__links { position: relative; display: flex; align-items: center; gap: 0; padding: 4px; }
.nav__links a { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 42px; padding: 0 15px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: color .3s; }
.nav__links a:hover, .nav__links a.is-active { color: var(--fg); }
/* the pill: on the section you're in, and on whichever link you point at */
.nav__pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--pw, 0); translate: var(--px, 0) 0; border-radius: 999px; background: color-mix(in srgb, var(--fg) 10%, transparent); opacity: 0; transition: translate .55s var(--ease), width .55s var(--ease), opacity .35s; pointer-events: none; }
.nav__links.has-pill .nav__pill { opacity: 1; }
/* reading progress, a hairline along the capsule's foot */
.nav__links::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 1px; border-radius: 1px; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; opacity: 0; transition: opacity .6s; }
.nav.is-scrolled .nav__links::after { opacity: .85; }

.nav__tools { display: flex; align-items: center; gap: 6px; padding: 4px; }
/* Services: a button among the links, with a caret that turns when its menu is open */
.nav__more { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: color .3s; }
.nav__more i { width: 7px; height: 7px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate .4s var(--ease), translate .4s var(--ease); }
.nav__more:hover, .nav__more.is-active, .nav__more[aria-expanded="true"] { color: var(--fg); }
.nav__more[aria-expanded="true"] i { rotate: 225deg; translate: 0 2px; }
/* the menu itself: a sheet of glass under the header, the groups on the left, the pages of the one you point at on the right */
.nav__mega { position: absolute; left: 50%; top: calc(100% + 10px); width: min(1120px, calc(100vw - var(--gutter) * 2)); translate: -50% -8px; opacity: 0; transition: opacity .28s, translate .45s var(--ease); pointer-events: none; }
.nav__mega.is-open { opacity: 1; translate: -50% 0; pointer-events: auto; }
.nav__mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* a bridge, so the pointer can travel from the button to the menu */
.mega { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 6px; padding: 8px; border-radius: 28px; border: 1px solid var(--glass-line); background: color-mix(in srgb, var(--page, var(--bg)) 82%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent), 0 40px 90px -40px rgba(0, 0, 0, .6); color: var(--fg); }
.mega__groups { display: grid; align-content: start; gap: 2px; padding: 6px; }
.mega__g { display: grid; gap: 4px; padding: 13px 16px; border-radius: 18px; text-align: left; transition: background-color .25s; }
.mega__g b { font: 300 20px/1.15 var(--serif); letter-spacing: -.01em; }
.mega__g small { font-size: 12.5px; color: var(--faint); }
.mega__g[aria-selected="true"] { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.mega__g[aria-selected="true"] b { color: var(--accent); }
.mega__six { margin: 10px 16px 6px; font-size: 13px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.mega__six:hover { color: var(--fg); }
.mega__panes { padding: 18px 22px 22px; border-radius: 22px; background: color-mix(in srgb, var(--fg) 4%, transparent); }
.mega__head { display: inline-flex; align-items: center; gap: 10px; font: 300 clamp(26px, 2.2vw, 34px)/1.1 var(--serif); letter-spacing: -.02em; transition: color .3s; }
.mega__head:hover { color: var(--accent); }
.mega__head i { display: inline-flex; transition: transform .5s var(--ease); }
.mega__head:hover i { transform: translateX(4px); }
.mega__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 22px 26px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.mega__k { margin-bottom: 10px; font: 400 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.mega__col ul { display: grid; gap: 2px; }
.mega__col a { display: inline-block; padding: 4px 0; font-size: 14px; color: var(--muted); transition: color .2s; }
.mega__col a:hover { color: var(--fg); }
.mega__col .mega__all { margin-top: 8px; font-size: 13px; color: var(--accent); }
@media (max-width: 1200px) { .nav__mega { display: none; } }
/* wide enough: the links sit dead centre, so the logo can open out without nudging them */
@media (min-width: 1300px) { .nav__links { position: absolute; left: 50%; translate: -50% 0; } }
.tool { height: 44px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; transition: color .3s, background-color .3s; }
.tool:hover { color: var(--fg); background: var(--card-2); }
.tool kbd { font-size: 11px; padding: 3px 6px; border: 1px solid var(--line-2); border-radius: 6px; }
.tool--icon { width: 44px; padding: 0; justify-content: center; }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.eq i { width: 2px; background: currentColor; border-radius: 1px; height: 30%; }
.eq i:nth-child(2) { height: 55%; } .eq i:nth-child(3) { height: 80%; } .eq i:nth-child(4) { height: 45%; }
#soundToggle[aria-pressed="true"] { color: var(--accent); }
#soundToggle[aria-pressed="true"] .eq i { animation: eq .9s var(--ease) infinite alternate; }
#soundToggle[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: -.3s; } #soundToggle[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: -.6s; } #soundToggle[aria-pressed="true"] .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { from { height: 15%; } to { height: 100%; } }
.nav__cta { height: 44px; }
.nav.is-scrolled .tool, .nav.is-scrolled .nav__cta { height: 42px; }

/* =====================================================================
   HERO — fluid
   ===================================================================== */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; color: #ece7de; background: #0e0e0c; }
.hero__fluid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; touch-action: pan-y; }
/* As the page slides toward day, the foot of the ink melts into it, so the hero never ends on a hard edge. */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--page, transparent)); opacity: var(--seam, 0); }
.hero__fallback {
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(50% 45% at 30% 75%, color-mix(in srgb, var(--sky-a) 35%, transparent), transparent 70%), radial-gradient(45% 40% at 75% 60%, color-mix(in srgb, var(--sky-b) 30%, transparent), transparent 70%), #0e0e0c;
}
.hero__inner { flex: 1; display: flex; flex-direction: column; padding-top: clamp(96px, 14vh, 120px); padding-bottom: 34px; pointer-events: none; }
.hero__inner > * { pointer-events: auto; }
.hero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: 13.5px; color: rgba(236, 231, 222, .64); align-self: flex-start; }
.hero__meta .sep { color: rgba(236, 231, 222, .25); }
/* the site's own signals: the line, then each number with its month-over-month change (the source is in the footer) */
.signals { min-height: 24px; opacity: 0; transition: opacity .8s var(--ease); }
.signals.is-ready { opacity: 1; }
.signals.is-empty { visibility: hidden; }
.signals__say { color: #ece7de; font-weight: 500; letter-spacing: -.005em; }
.signals__list { display: contents; }
.sig { position: relative; display: inline-flex; padding: 3px 0; }
.sig__in { display: inline-flex; align-items: baseline; gap: 8px; }
.sig__k { color: rgba(236, 231, 222, .64); transition: color .3s; }
.sig__v { color: #ece7de; font-weight: 500; font-variant-numeric: tabular-nums; }
.sig__v .odo { display: inline-flex; }
.sig__d { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/1 var(--mono); letter-spacing: .02em; color: #7fd1a3; opacity: 0; translate: 0 4px; transition: opacity .6s var(--ease), translate .6s var(--ease); }
.sig__d i { width: 7px; height: 6px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sig__d.is-down { color: #f0a37c; }
.sig__d.is-down i { rotate: 180deg; }
.is-rolled .sig__d { opacity: 1; translate: 0 0; }
.live { width: 7px; height: 7px; border-radius: 50%; background: #ec6a3e; animation: livePulse 2.4s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(236, 106, 62, .55); } 100% { box-shadow: 0 0 0 12px rgba(236, 106, 62, 0); } }

.hero__title {
  margin-top: clamp(18px, 5vh, 72px);
  font-family: var(--serif); font-weight: 300; font-variation-settings: "opsz" 72;
  font-size: clamp(56px, min(11.4vw, 19vh), 210px); line-height: .86; letter-spacing: -.045em;
  mix-blend-mode: difference; color: #ece7de;
  pointer-events: none !important; user-select: none; align-self: flex-start;
}
.hero__title em { font-weight: 300; }
.hero__splash {
  margin-top: clamp(12px, 2.2vh, 30px);
  font-family: var(--serif); font-style: italic; font-weight: 300; font-variation-settings: "opsz" 72;
  font-size: clamp(30px, min(4.4vw, 7.4vh), 78px); line-height: 1; letter-spacing: -.03em; color: rgba(236, 231, 222, .92);
  pointer-events: none !important; user-select: none; align-self: flex-start;
}
.hero__splash em { color: var(--accent); }
.hero__ripple, .hero__ring { position: absolute; z-index: 2; pointer-events: none; }
.hero__ripple { width: min(1200px, 92vw); height: 1px; background: linear-gradient(90deg, transparent, rgba(236, 231, 222, .9), transparent); }
.hero__ring { width: 380px; height: 56px; border-radius: 50%; border: 1px solid rgba(236, 231, 222, .7); }

.hero__bottom { margin-top: auto; padding-top: clamp(20px, 4.5vh, 40px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px); gap: clamp(24px, 4vw, 72px); align-items: end; pointer-events: none; }
.hero__bottom > * { pointer-events: auto; }
.hero__lede { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: rgba(236, 231, 222, .78); max-width: 32ch; text-wrap: pretty; }
.hero__lede em { color: #ece7de; font-size: 1.12em; }

.hero__hint { position: absolute; right: var(--gutter); top: calc(clamp(96px, 14vh, 120px) + 4px); display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(236, 231, 222, .62); white-space: nowrap; pointer-events: none; transition: opacity 1s var(--ease), transform 1s var(--ease); }
.hero__hint.is-gone { opacity: 0; transform: translateY(-8px); }
.hint__ico { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; flex-shrink: 0; }
.hint__ico i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: hintDot 2.2s var(--ease) infinite; }
@keyframes hintDot { 0% { transform: translate(-5px, 0); } 50% { transform: translate(5px, -2px); } 100% { transform: translate(-5px, 0); } }

/* Ask bar */
.ask { display: flex; flex-direction: column; gap: 12px; }
.ask__label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }
.ask--hero .ask__label { color: rgba(236, 231, 222, .64); }
.ask__hint kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 4px; border: 1px solid currentColor; border-radius: 6px; opacity: .8; }
.ask__row {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 22px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--card);
  transition: border-color .4s, box-shadow .6s var(--ease), background-color .4s;
}
.ask--hero .ask__row { border-color: rgba(236, 231, 222, .22); background: rgba(14, 14, 12, .42); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); }
.ask__row:focus-within { border-color: var(--fg); box-shadow: 0 24px 70px -30px rgba(0, 0, 0, .5); }
.ask--hero .ask__row:focus-within { border-color: rgba(236, 231, 222, .7); }
.ask__row input { flex: 1; min-width: 0; height: 54px; background: transparent; border: 0; outline: none; font-size: clamp(16px, 1.3vw, 19px); color: inherit; }
.ask__row input::placeholder { color: var(--faint); }
.ask--hero .ask__row input::placeholder { color: rgba(236, 231, 222, .45); }
.ask__go { flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--bg); transition: transform .6s var(--ease), background-color .4s, color .4s; }
.ask--hero .ask__go { background: #ece7de; color: #0e0e0c; }
.ask__go:hover, .ask--hero .ask__go:hover { background: var(--accent); color: #fff; }
.ask__go:active { transform: scale(.94); }
.ask--hero .chip { color: rgba(236, 231, 222, .7); border-color: rgba(236, 231, 222, .2); background: rgba(14, 14, 12, .25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ask--hero .chip:hover { color: #ece7de; border-color: rgba(236, 231, 222, .6); }

/* Ticker */
.ticker { border-top: 1px solid rgba(236, 231, 222, .1); overflow: hidden; color: rgba(236, 231, 222, .55); font-size: 14px; position: relative; z-index: 1; }
.ticker__track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.ticker ul { display: flex; flex-shrink: 0; }
.ticker li { padding: 18px 34px; white-space: nowrap; display: flex; align-items: baseline; gap: 10px; }
.ticker li::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgba(236, 231, 222, .25); margin-left: 34px; align-self: center; }
.ticker b { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 19px; color: #ece7de; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =====================================================================
   01 SHIFT
   ===================================================================== */
.shift { padding-block: var(--sec); }
.shift__text {
  font-family: var(--serif); font-weight: 300; font-variation-settings: "opsz" 60;
  font-size: clamp(34px, 4.7vw, 80px); line-height: 1.08; letter-spacing: -.03em;
  max-width: 21ch; text-wrap: pretty;
}
.shift__text .w { opacity: .14; transition: opacity .25s linear; }
.shift__text em { color: var(--accent); }

/* =====================================================================
   02 WHO WE GROW — three markets, six services, wired to what's breaking
   ===================================================================== */
.svc { padding-block: var(--sec); }
@keyframes svcPop { from { opacity: 0; transform: scale(.6); } }
@keyframes svcFlow { to { stroke-dashoffset: -47; } }

/* the three markets */
.svc__who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: clamp(44px, 5.5vw, 80px); }
.svc__who button { display: grid; align-content: start; gap: 10px; min-width: 0; padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 28px); text-align: left; border: 1px solid var(--line-2); border-radius: var(--r-lg); transition: background-color .5s var(--ease), color .4s, border-color .4s; }
.svc__who button:hover { border-color: var(--fg); }
.svc__who b { font: 300 clamp(34px, 3.4vw, 54px)/1 var(--serif); letter-spacing: -.035em; }
.svc__who span { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.svc__who i { font: 400 11px/1.2 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.svc__who [aria-checked="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.svc__who [aria-checked="true"] b { font-style: italic; }
.svc__who [aria-checked="true"] span { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.svc__who [aria-checked="true"] i { color: var(--accent); }

/* the board: what's breaking on the left, what fixes it on the right, wires between */
.svc__board { position: relative; display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); column-gap: clamp(80px, 9vw, 150px); margin-top: 10px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.svc__pains, .svc__list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.svc__k { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 400 11.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.svc__k small { font: 400 12.5px/1.2 var(--sans); letter-spacing: 0; text-transform: none; }
.svc__n { font: 400 11px/1 var(--mono); letter-spacing: .04em; color: var(--accent); }

/* every market's list shares one cell, so the board never changes height */
.svc__stack { flex: 1; display: grid; }
.svc__set { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .6s var(--ease), visibility 0s .45s; }
.svc__set.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity .45s, transform .6s var(--ease); }
.svc__pain { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; row-gap: 7px; padding: 18px 22px 18px 18px; text-align: left; border: 1px solid var(--line-2); border-radius: var(--r); transition: background-color .4s, color .4s, border-color .4s, transform .5s var(--ease); }
.svc__pain:hover { border-color: var(--fg); }
.svc__pain:active { transform: scale(.985); }
.svc__pain .svc__n { grid-row: 1 / 3; padding-top: 7px; }
.svc__pain b { font: 300 clamp(20px, 1.6vw, 25px)/1.15 var(--serif); letter-spacing: -.015em; }
.svc__pain small { grid-column: 2; font: 400 10.5px/1.25 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.svc__pain[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.svc__pain[aria-pressed="true"] small { color: color-mix(in srgb, var(--bg) 60%, transparent); }
/* the jacks the wires plug into */
.svc__pain::after, .svc__mod::before { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--line-2); transition: background-color .4s, border-color .4s; }
.svc__pain::after { right: -5px; }
.svc__pain[aria-pressed="true"]::after { background: var(--accent); border-color: var(--accent); }

.svc__mods { display: grid; gap: 8px; }
.svc__mod { position: relative; display: grid; grid-template-columns: 30px minmax(160px, .75fr) minmax(0, 1.6fr) 70px 36px; grid-template-areas: "n mh do fix more"; align-items: center; column-gap: 16px; padding: 16px 18px 16px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); opacity: .55; transition: opacity .5s, border-color .5s, background-color .5s; }
.svc__mod::before { left: -5px; }
.svc__mod.is-on { opacity: 1; border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.svc__mod.is-on::before { background: var(--accent); border-color: var(--accent); }
.svc__mod.is-hover { border-color: var(--accent); }
.svc__mod > .svc__n { grid-area: n; }
.svc__mh { grid-area: mh; min-width: 0; }
.svc__mh b { display: block; font: 300 clamp(22px, 1.8vw, 28px)/1.05 var(--serif); letter-spacing: -.02em; }
.svc__mh small { display: block; margin-top: 7px; font: 400 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.svc__do { grid-area: do; display: grid; min-width: 0; }
.svc__do p { grid-area: 1 / 1; font-size: 15px; line-height: 1.5; color: var(--muted); visibility: hidden; opacity: 0; transition: opacity .45s, visibility 0s .45s; text-wrap: pretty; }
.svc__do p.is-on { visibility: visible; opacity: 1; transition: opacity .45s; }
.svc__mod.is-on .svc__do p.is-on { color: var(--fg); }
.svc__do small { grid-row: 2; margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: var(--faint); }
.svc__fix { grid-area: fix; display: flex; justify-content: flex-end; }
.svc__fix i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--bg); font: 400 10px/1 var(--mono); font-style: normal; animation: svcPop .45s var(--ease) both; }
.svc__fix i + i { margin-left: -3px; }
.svc__more { grid-area: more; width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: color .3s, border-color .3s, transform .5s var(--ease); }
.svc__more:hover { color: var(--fg); border-color: var(--fg); transform: rotate(45deg); }

.svc__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; transition: opacity .5s; }
.svc__wires.is-wait { opacity: 0; }
.wire { transition: opacity .3s; }
.wire.is-dim { opacity: .14; }
.wire__l { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.wire__s { fill: none; stroke: #fff; stroke-opacity: .85; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1.5 22; animation: svcFlow 1.4s linear infinite; }
.wire circle { fill: var(--accent); }

/* the read-out, and the step from browsing to a conversation */
.svc__out { margin-top: 10px; }
.svc__out .plan__sum { min-height: 2lh; }
.svc__out .plan__sum em { color: inherit; }
.svc__fine { grid-column: 1; font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--bg) 62%, transparent); }
.svc__out .btn--solid:disabled { opacity: .4; cursor: not-allowed; }
.svc__out .btn--solid:disabled:hover { color: var(--fg); }
.svc__out .btn--solid:disabled::before { display: none; }

@media (max-width: 1100px) {
  .svc__board { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); column-gap: 72px; }
  .svc__mod { grid-template-columns: 26px minmax(0, 1fr) 70px 36px; grid-template-areas: "n mh fix more" ". do do do"; row-gap: 8px; }
}
@media (max-width: 900px) {
  .svc__board { grid-template-columns: 1fr; row-gap: 34px; }
  .svc__wires, .svc__pain::after, .svc__mod::before { display: none; }
  .svc__set { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 8px; }
}
@media (max-width: 680px) {
  .svc__who { grid-template-columns: 1fr; gap: 6px; }
  .svc__who button { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 14px 18px; }
  .svc__who b { font-size: 28px; }
  .svc__who span { display: none; }
  .svc__board { padding: 18px; }
  .svc__set { grid-template-columns: 1fr; }
  .svc__pain { padding: 14px 16px; }
  .svc__pain b { font-size: 19px; }
  .svc__mod { column-gap: 10px; padding: 14px; }
  .svc__do small { display: none; }
}

/* =====================================================================
   03 KEYWORD ANALYZER — one search, read the way engines and assistants read it
   ===================================================================== */
.kwa { padding-block: calc(var(--sec) * .6) var(--sec); }
.kwa__k { font: 400 11.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
@keyframes kwIn { from { opacity: 0; transform: translateY(10px); } }

/* the search bar: the one thing to do here */
.kwa__ask { margin-top: clamp(44px, 5.5vw, 80px); }
.kwa__ask .ask__row { gap: 14px; padding-left: clamp(18px, 2vw, 28px); background: color-mix(in srgb, var(--bg) 70%, #fff); box-shadow: 0 30px 80px -56px rgba(21, 21, 19, .55); }
.kwa__ask .ask__row input { height: clamp(60px, 5.4vw, 78px); font: 300 clamp(22px, 2.3vw, 36px)/1 var(--serif); letter-spacing: -.02em; }
.kwa__ask .ask__go { width: clamp(54px, 4.6vw, 68px); height: clamp(54px, 4.6vw, 68px); }
.kwa__glass { width: 22px; height: 22px; flex-shrink: 0; color: var(--faint); }
.kwa__live { display: inline-flex; align-items: center; gap: 8px; }
.kwa__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: kwPulse 1.8s ease-in-out infinite; }
@keyframes kwPulse { 50% { opacity: .25; } }
.kwa__try { align-self: center; margin-right: 4px; font-size: 13px; color: var(--faint); }

.kwa__board { display: grid; gap: 18px; margin-top: clamp(28px, 3.4vw, 48px); }
.kwr { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); min-width: 0; transition: opacity .5s; }
.kwa.is-empty .kwr { opacity: .38; }

/* the reading: every word, and the part it plays */
.kwr { padding: clamp(24px, 3vw, 44px); }
.kwr__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px clamp(32px, 5vw, 96px); align-items: center; }
.kwr__tokens { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px clamp(14px, 1.4vw, 22px); margin-top: 24px; min-height: 108px; }
.kwt { display: inline-flex; flex-direction: column; gap: 10px; min-width: 0; animation: kwIn .7s var(--ease) both; animation-delay: calc(var(--n, 0) * 70ms); }
.kwt b, .kwt--f { font: 300 clamp(36px, 4.3vw, 70px)/1.02 var(--serif); letter-spacing: -.035em; overflow-wrap: anywhere; }
.kwt b { padding-bottom: 10px; border-bottom: 2px solid currentColor; }
/* the label never widens its word: under a short word it wraps instead, so the spacing between words stays even */
.kwt small { contain: inline-size; font: 400 10.5px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kwt--service b { color: var(--accent); font-style: italic; }
.kwt--service small { color: var(--accent); }
.kwt--question b, .kwt--compare b, .kwt--act b, .kwt--when b { border-bottom-style: dashed; }
.kwt--detail b { border-bottom: 2px dotted var(--faint); }
.kwt--f { color: var(--faint); }
.kwa.is-live .kwt { animation: none; }
.kwr__add { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 7px 18px 7px 7px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14.5px; font-weight: 500; transition: border-color .3s, color .3s; }
.kwr__add i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--bg); font-style: normal; font-size: 16px; line-height: 1; transition: background-color .3s, color .3s; }
.kwr__add:hover { border-color: var(--fg); }
.kwr__add[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.kwr__add[aria-pressed="true"] i { background: var(--accent); color: #fff; }
.kwr__verdict { margin-top: 26px; max-width: 62ch; min-height: 3lh; font: 300 clamp(19px, 1.65vw, 25px)/1.42 var(--serif); letter-spacing: -.01em; text-wrap: pretty; }

/* the score: one ring, drawn to the number */
.kwo { --ring: clamp(150px, 12.5vw, 196px); position: relative; display: grid; justify-items: center; gap: 16px; }
.kwo__ring { width: var(--ring); height: var(--ring); transform: rotate(-90deg); overflow: visible; }
.kwo__ring circle { fill: none; stroke-width: 4.5; }
.kwo__track { stroke: var(--line-2); }
.kwo__fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100px 100px; stroke-dashoffset: calc((100 - var(--opp, 0)) * 1px); transition: stroke-dashoffset 1.2s var(--ease); }
.kwo__in { position: absolute; top: 0; left: 50%; width: var(--ring); height: var(--ring); margin-left: calc(var(--ring) / -2); display: grid; place-content: center; text-align: center; }
.kwo__in b { font: 300 clamp(54px, 4.8vw, 76px)/1 var(--serif); letter-spacing: -.045em; font-variant-numeric: lining-nums tabular-nums; }
.kwo__in span { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.kwo__band { max-width: 19ch; font: italic 300 19px/1.25 var(--serif); text-align: center; }

.kwr__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(30px, 3.2vw, 46px); border-top: 1px solid var(--line); }
.kwr__cell { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 28px clamp(18px, 2.4vw, 38px) 0; border-left: 1px solid var(--line); }
.kwr__cell:first-child { padding-left: 0; border-left: 0; }
.kwr__cell:last-child { padding-right: 0; }

/* where they are: four steps toward a decision */
.kwst { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 28px; font-size: 13px; line-height: 1.25; color: var(--faint); }
.kwst::before { content: ""; position: absolute; top: 7px; left: 12.5%; right: 12.5%; height: 1px; background: var(--line-2); }
.kwst::after { content: ""; position: absolute; top: 0; left: calc((var(--stage, 0) + .5) * 25%); width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); transition: left .9s var(--ease); }
.kwst li { position: relative; text-align: center; padding-inline: 2px; transition: color .4s; }
.kwst li::before { content: ""; position: absolute; top: -24.5px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); transition: background-color .4s, border-color .4s; }
.kwst li.is-past { color: var(--muted); }
.kwst li.is-past::before { background: var(--fg); border-color: var(--fg); }
.kwst li.is-on { color: var(--fg); font-weight: 500; }
.kwst__t { min-height: 3lh; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* the odds, and where the answer shows up */
.kwm { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; }
.kwm span { font-size: 14px; color: var(--muted); }
.kwm b { font: 300 30px/1 var(--serif); letter-spacing: -.03em; }
.kwm i, .kww i { position: relative; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.kwm i { grid-column: 1 / -1; }
.kwm i::after, .kww i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--fg); transform-origin: 0 50%; transform: scaleX(calc(var(--v, 0) / 100)); transition: transform 1.1s var(--ease), background-color .4s; }
.kwm--c i::after { background: repeating-linear-gradient(-45deg, var(--fg) 0 3px, color-mix(in srgb, var(--fg) 45%, transparent) 3px 6px); }
.kww { display: grid; gap: 15px; }
.kww li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 50px; align-items: center; gap: 12px; font-size: 14px; }
.kww span { color: var(--muted); white-space: nowrap; }
.kww b { justify-self: end; font-size: 13px; font-weight: 500; }
.kww li.is-strong i::after { background: var(--accent); }
.kww li.is-strong b { color: var(--accent); }
.kww__go { align-self: flex-start; font-size: 14px; }
.kwr__note { margin-top: clamp(28px, 3vw, 40px); padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--faint); }


/* the plan: from reading to the real numbers, one band under the reading */
.kwp { display: grid; grid-template-columns: minmax(min-content, .5fr) minmax(0, 1.5fr) auto; grid-template-areas: "head list acts" "head fine acts"; align-items: center; gap: 12px clamp(24px, 3vw, 48px); padding: clamp(24px, 2.6vw, 34px) clamp(24px, 3vw, 44px); border-radius: var(--r-lg); background: var(--fg); color: var(--bg); }
.kwp__head { grid-area: head; display: grid; gap: 10px; }
.kwp__list { grid-area: list; }
.kwp__fine { grid-area: fine; }
.kwp__k { font: 400 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 55%, transparent); }
.kwp__n { font: 300 clamp(34px, 3vw, 46px)/1.02 var(--serif); letter-spacing: -.03em; white-space: nowrap; }
.kwp.is-empty .kwp__n { font-style: italic; color: color-mix(in srgb, var(--bg) 62%, transparent); }
.kwp__list { display: flex; flex-wrap: wrap; gap: 8px; }
.kwp__list li { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 5px 5px 5px 13px; border: 1px solid color-mix(in srgb, var(--bg) 24%, transparent); border-radius: 999px; font-size: 13.5px; animation: kwIn .5s var(--ease) both; }
.kwp__list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kwp__list li button { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: color-mix(in srgb, var(--bg) 60%, transparent); transition: background-color .3s, color .3s; }
.kwp__list li button:hover { background: color-mix(in srgb, var(--bg) 14%, transparent); color: var(--bg); }
.kwp__list .kwp__hint { padding: 0; border: 0; font-size: 14.5px; line-height: 1.5; color: color-mix(in srgb, var(--bg) 62%, transparent); animation: none; }
.kwp__acts { grid-area: acts; display: flex; flex-direction: column; gap: 14px; }
.kwp .btn--solid { width: 100%; height: 54px; padding: 0 24px; background: var(--bg); color: var(--fg); font-size: 15px; }
.kwp .btn--solid:hover { color: #fff; }
.kwp .btn--solid:disabled { opacity: .4; cursor: not-allowed; }
.kwp .btn--solid:disabled:hover { color: var(--fg); }
.kwp .btn--solid:disabled::before { display: none; }
.kwp .linkish { align-self: center; font-size: 14.5px; color: color-mix(in srgb, var(--bg) 70%, transparent); }
.kwp .linkish:hover { color: var(--bg); }
.kwp .linkish:disabled { opacity: .4; cursor: not-allowed; }
.kwp__fine { max-width: 60ch; font-size: 13px; line-height: 1.55; color: color-mix(in srgb, var(--bg) 58%, transparent); }

/* =====================================================================
   04 ONE ANSWER, EVERY SURFACE — one question, four surfaces, one switch
   ===================================================================== */
.answer { padding-block: var(--sec); }
/* shared controls: pill switchers and sliders, used across the page */
.seg { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); gap: 2px; }
.seg button { padding: 9px 18px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: color .3s, background-color .5s var(--ease); }
.seg button:hover { color: var(--fg); }
.seg button[aria-selected="true"], .seg button[aria-checked="true"] { background: var(--fg); color: var(--bg); }
.seg--full { display: flex; width: 100%; }
.seg--full button { flex: 1; white-space: nowrap; padding-inline: 8px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; --p: 50%; touch-action: pan-y; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--fg) var(--p), var(--line-2) var(--p)); }
input[type="range"]::-moz-range-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--fg) var(--p), var(--line-2) var(--p)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--fg); transition: transform .4s var(--ease), background-color .3s; }
input[type="range"]::-moz-range-thumb { width: 19px; height: 19px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--fg); }
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.3); background: var(--accent); border-color: var(--accent); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }

.surf { margin: clamp(44px, 6vw, 84px) clamp(10px, 2.2vw, 36px) 0; }
.surf__bar { display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; padding: 0 clamp(4px, 1.4vw, 26px) 18px; }
.surf__tabs button { padding: 11px 20px; font-size: 15px; }

/* the switch: the whole idea in one control */
.flip { display: inline-flex; align-items: center; gap: 14px; font-size: 15px; color: var(--muted); }
.flip__l, .flip__r { transition: color .4s; }
.flip[aria-checked="false"] .flip__l, .flip[aria-checked="true"] .flip__r { color: var(--fg); }
.flip__track { position: relative; width: 76px; height: 40px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card-2); transition: background-color .5s, border-color .5s; }
.flip__track i { position: absolute; top: 5px; left: 5px; width: 28px; height: 28px; border-radius: 50%; background: var(--fg); transition: transform .6s var(--ease), background-color .5s; }
.flip:hover .flip__track { border-color: var(--fg); }
.flip[aria-checked="true"] .flip__track { background: var(--accent); border-color: var(--accent); }
.flip[aria-checked="true"] .flip__track i { transform: translateX(36px); background: #fff; }

/* the screen: light, like the device the customer is holding */
.surf__screen {
  --s-bg: #f4efe6; --s-ink: #151513; --s-mute: rgba(21, 21, 19, .6); --s-faint: rgba(21, 21, 19, .4); --s-line: rgba(21, 21, 19, .11); --s-card: #fffaf3; --s-chip: #e7e0d3; --s-you: #cf4a1f; --s-link: #2a3f75;
  /* sized so the tabs, the screen and the outcome all fit in one window */
  position: relative; height: clamp(520px, calc(100vh - 280px), 820px); height: clamp(520px, calc(100svh - 280px), 820px); overflow: hidden;
  border-radius: clamp(20px, 2vw, 32px); background: var(--s-bg); color: var(--s-ink);
  box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .75);
}
/* whatever runs past the bottom of the screen fades out, like more results below the fold */
.surf__screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 64px; background: linear-gradient(rgba(244, 239, 230, 0), var(--s-bg) 85%); pointer-events: none; }
.scr { height: 100%; display: flex; flex-direction: column; gap: clamp(16px, 2vw, 28px); padding: clamp(18px, 2.4vw, 38px) clamp(18px, 3.2vw, 56px); }
.scr__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: clamp(20px, 3vw, 60px); align-items: start; }

.qb { display: flex; align-items: center; gap: 12px; flex-shrink: 0; width: min(780px, 100%); height: 56px; padding: 0 22px; border-radius: 999px; background: var(--s-card); border: 1px solid var(--s-line); box-shadow: 0 10px 26px -18px rgba(21, 21, 19, .45); font-size: 17px; }
.qb__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb__i { position: relative; flex-shrink: 0; width: 16px; height: 16px; border: 2px solid var(--s-mute); border-radius: 50%; }
.qb__i--search::after { content: ""; position: absolute; right: -6px; bottom: -6px; width: 7px; height: 2px; background: var(--s-mute); transform: rotate(45deg); }
.qb__i--pin { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.qb__caret { display: none; width: 1.5px; height: 20px; background: var(--s-you); animation: sCaret 1s steps(1) infinite; }
.is-typing .qb__caret { display: block; }
@keyframes sCaret { 50% { opacity: 0; } }

/* arriving: the question types itself, then the answers come in */
.surf__screen.is-fresh:not(.is-ready) [data-k], .surf__screen.is-fresh:not(.is-ready) .kp, .surf__screen.is-fresh:not(.is-ready) .side__h { opacity: 0; }
.surf__screen.is-fresh.is-ready [data-k], .surf__screen.is-fresh.is-ready .kp-wrap, .surf__screen.is-fresh.is-ready .side__h { animation: sIn .7s var(--ease) both; animation-delay: calc(var(--n, 0) * 70ms); }
@keyframes sIn { from { opacity: 0; translate: 0 12px; } }
.surf__screen.is-fresh.is-ready .pin { animation-name: sFade; }   /* pins are placed with translate, so they only fade */
@keyframes sFade { from { opacity: 0; } }
.say .w { display: inline-block; animation: wIn .5s var(--ease) both; animation-delay: calc(var(--i) * 24ms); }
.say.is-still .w { animation: none; }
.say .cite.w { display: inline-grid; }   /* a citation keeps its number centred while it writes in */
@keyframes wIn { from { opacity: 0; translate: 0 6px; } }
.is-off { display: none !important; }

/* what we did to get you there, shown where it took effect */
.why { position: absolute; z-index: 3; top: -11px; right: 16px; padding: 5px 9px; border-radius: 999px; background: var(--s-you); color: #fff; font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; scale: .7; transition: opacity .3s, scale .45s var(--ease); }
.surf[data-state="with"] .why { opacity: 1; scale: 1; transition-delay: .7s; }
.stars { color: #c98a14; letter-spacing: .04em; }
.ok { color: #2d7a4c; font-weight: 600; }
.no { color: #b3261e; font-weight: 600; }

/* web search */
.rl { display: grid; gap: 4px; align-content: start; }
.r { position: relative; padding: 14px 18px; border-radius: 16px; transition: background-color .5s, box-shadow .5s; }
.r__url { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--s-mute); }
.r__tag { font-weight: 600; color: var(--s-ink); }
.r__t { margin-top: 3px; font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--s-link); }
.r__s { margin-top: 4px; max-width: 62ch; font-size: 14.5px; color: var(--s-mute); }
.r__rich { margin-top: 6px; font-size: 13.5px; color: var(--s-mute); }
.r__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.r__links li { font-size: 14px; color: var(--s-link); }
.r__buried { display: none; font: 400 12.5px/1.4 var(--mono); color: var(--s-faint); }
.surf[data-state="without"] .r--you { padding-block: 10px; }
.surf[data-state="without"] .r--you > :not(.r__buried) { display: none; }
.surf[data-state="without"] .r--you .r__buried { display: block; }
.surf[data-state="with"] .r--you { background: var(--s-card); box-shadow: 0 0 0 1.5px var(--s-you), 0 26px 50px -30px rgba(207, 74, 31, .6); }
.kp-wrap { display: grid; }
.kp { position: relative; grid-area: 1 / 1; border: 1px solid var(--s-line); border-radius: 20px; background: var(--s-card); transition: opacity .6s var(--ease), translate .6s var(--ease), box-shadow .5s; }
.surf[data-state="with"] .kp--o, .surf[data-state="without"] .kp--w { opacity: 0; translate: 0 12px; visibility: hidden; transition: opacity .4s, translate .4s, visibility 0s .4s; }
.surf[data-state="with"] .kp--w { box-shadow: 0 0 0 1.5px var(--s-you); }
.kp__map { position: relative; height: 130px; border-radius: 20px 20px 0 0; background: linear-gradient(90deg, transparent 47%, #fbf8f1 47% 50%, transparent 50%), linear-gradient(0deg, transparent 58%, #fbf8f1 58% 62%, transparent 62%), #e3dccd; }
.kp__map i { position: absolute; left: 48%; top: 30%; width: 20px; height: 20px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #8a857c; }
.kp--w .kp__map i { background: var(--s-you); }
.kp__body { padding: 16px 20px 20px; font-size: 14px; color: var(--s-mute); display: grid; gap: 4px; }
.kp__body h4 { font-size: 23px; font-weight: 500; letter-spacing: -.015em; color: var(--s-ink); }
.kp__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kp__btns span { padding: 7px 14px; border: 1px solid var(--s-line); border-radius: 999px; font-size: 13px; color: var(--s-link); }
.kp__rev { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--s-line); font-style: italic; }

/* AI chat */
.chat { display: flex; flex-direction: column; gap: 18px; height: 100%; max-width: 820px; min-width: 0; }
.bub { overflow-wrap: break-word; }
.bub--u .qb__t { white-space: normal; overflow: visible; text-overflow: clip; }   /* a question in a chat wraps, as it would in the app, instead of pushing the chat off a phone screen */
.bub { border-radius: 22px; padding: 14px 20px; font-size: 17px; line-height: 1.5; }
.bub--u { align-self: flex-end; max-width: 82%; min-height: 54px; border-bottom-right-radius: 6px; background: var(--s-ink); color: var(--s-bg); }
.bub--a { position: relative; align-self: flex-start; max-width: 94%; border-bottom-left-radius: 6px; border: 1px solid var(--s-line); background: var(--s-card); font-size: clamp(18px, 1.5vw, 21px); transition: box-shadow .5s; }
.surf[data-state="with"] .bub--a { box-shadow: 0 0 0 1.5px var(--s-you); }
.bub__who { display: block; margin-bottom: 8px; font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--s-faint); }
.say b.you { color: var(--s-you); font-weight: 600; }
.say b.comp { font-weight: 600; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.acts span { padding: 8px 15px; border-radius: 999px; background: var(--s-ink); color: var(--s-bg); font-size: 13.5px; }
.acts span + span { background: transparent; color: var(--s-ink); border: 1px solid var(--s-line); }
.surf[data-state="without"] .acts { display: none; }
.chat__in { margin-top: auto; height: 54px; display: flex; align-items: center; padding: 0 22px; border-radius: 999px; border: 1px solid var(--s-line); color: var(--s-faint); }
.side { position: relative; }
.side__h { margin-bottom: 12px; font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--s-faint); }
.src { display: grid; gap: 10px; }
.src li, .ovs li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--s-line); background: var(--s-card); transition: box-shadow .5s; }
.src li span, .ovs li span { display: grid; min-width: 0; }
.src b, .ovs b { font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src small, .ovs small { font-size: 12.5px; color: var(--s-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src__i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--s-chip); font-weight: 600; }
.surf[data-state="with"] .src [data-k="you"], .surf[data-state="with"] .ovs [data-k="you"] { box-shadow: 0 0 0 1.5px var(--s-you); }
.surf[data-state="with"] .src [data-k="you"] .src__i { background: var(--s-you); color: #fff; }

/* AI overview */
.ov { position: relative; flex-shrink: 0; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, 1fr); gap: clamp(18px, 2.6vw, 44px); padding: clamp(18px, 2vw, 30px); border-radius: 24px; border: 1px solid var(--s-line); background: var(--s-card); transition: box-shadow .5s; }
.surf[data-state="with"] .ov { box-shadow: 0 0 0 1.5px var(--s-you); }
.ov__main { position: relative; }
.ov__h { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; }
.ov__h i { width: 16px; height: 16px; background: linear-gradient(135deg, var(--s-you), #8a6bd6); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.ov__t { margin-top: 12px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; }
.cite { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 3px; border-radius: 9px; background: var(--s-chip); font: 500 10.5px/1 var(--mono); vertical-align: .3em; }
.ovs { display: grid; gap: 10px; align-content: start; }
.ovs li { background: var(--s-bg); }
.ovs__th { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #e2d9c9, #cfc3ad); }
.ovs [data-k="you"] .ovs__th { background: linear-gradient(135deg, #f2a17f, var(--s-you)); }
.rl--mute { opacity: .4; }

/* maps */
.scr--maps .scr__grid { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); align-items: stretch; }
.map { position: relative; overflow: hidden; border-radius: 22px; background: #e9e3d6; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin { position: absolute; display: grid; justify-items: center; gap: 6px; translate: -50% -100%; }
.pin i { width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #6f6b63; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5); transition: background-color .5s, scale .7s var(--ease); }
.pin b { padding: 4px 10px; border-radius: 9px; background: var(--s-card); font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .45); transition: opacity .5s, background-color .5s, color .5s; }
.pin--x i { width: 12px; height: 12px; background: #a8a296; }
.pin .why { top: -26px; right: 50%; translate: 50% 0; }
.pin--you i { background: #aaa49a; scale: .75; }
.pin--you b { opacity: 0; }
.surf[data-state="with"] .pin--you i { background: var(--s-you); scale: 1.6; }
.surf[data-state="with"] .pin--you b { opacity: 1; background: var(--s-you); color: #fff; }
.surf[data-state="with"] .pin--you::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 60px; height: 22px; margin-left: -30px; border-radius: 50%; border: 2px solid var(--s-you); animation: pinRing 2s var(--ease) infinite; }
@keyframes pinRing { from { opacity: .8; scale: .3; } to { opacity: 0; scale: 1.6; } }
.surf[data-state="with"] .pin:not(.pin--you) b { opacity: .55; }
.lp { display: grid; gap: 10px; align-content: start; }
.lp li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--s-line); background: var(--s-card); transition: box-shadow .5s; }
.lp li span { display: grid; gap: 2px; min-width: 0; }
.lp__n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--s-chip); font: 500 12px/1 var(--mono); }
.lp__t { font-size: 16.5px; font-weight: 500; }
.lp small { font-size: 13px; color: var(--s-mute); }
.surf[data-state="with"] .lp [data-k="you"] { box-shadow: 0 0 0 1.5px var(--s-you); }
.surf[data-state="with"] .lp [data-k="you"] .lp__n { background: var(--s-you); color: #fff; }

/* the outcome, and making it yours */
.surf__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 48px; flex-wrap: wrap; padding: 20px clamp(4px, 1.4vw, 26px) 0; }
.verdict { display: flex; flex-wrap: wrap; gap: 18px clamp(32px, 6vw, 110px); }
.verdict span { display: block; font-size: 13.5px; color: var(--muted); }
.verdict b { display: block; margin-top: 6px; font: 300 clamp(32px, 3.2vw, 54px)/1 var(--serif); letter-spacing: -.035em; transition: opacity .6s var(--ease), color .6s var(--ease); }
.surf[data-state="with"] .verdict__o b, .surf[data-state="without"] .verdict__w b { opacity: .28; }
.surf[data-state="with"] .verdict__w b { color: var(--accent); font-style: italic; }
.surf__you { display: grid; gap: 8px; width: min(380px, 100%); }
.surf__you span { font-size: 13.5px; color: var(--muted); }
.surf__you input { height: 50px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--fg); font-size: 15px; outline: none; transition: border-color .3s; }
.surf__you input:focus { border-color: var(--fg); }
.surf__you small { font-size: 12.5px; color: var(--faint); }

@media (max-width: 1100px) {
  .scr__grid, .scr--maps .scr__grid, .ov { grid-template-columns: minmax(0, 1.35fr) minmax(240px, 1fr); }
}
@media (max-width: 900px) {
  .surf__screen { height: auto; }
  .surf__screen::after { display: none; }
  .scr { height: auto; }
  .scr__grid, .scr--maps .scr__grid, .ov { grid-template-columns: minmax(0, 1fr); }   /* minmax, so nothing inside can stretch the screen past the phone */
  .map { height: 320px; }
  .chat__in { display: none; }
}
@media (max-width: 680px) {
  .surf { margin-inline: 8px; }
  .surf__tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 22px; }
  .surf__tabs button { padding: 10px 8px; font-size: 14px; }
  .flip { width: 100%; justify-content: center; }
  .qb { height: 50px; font-size: 15.5px; padding: 0 18px; }
  .r { padding: 12px 12px; }
  .r__t { font-size: 17px; }
  .bub--a, .ov__t { font-size: 17px; }
  .verdict b { font-size: 34px; }
}

/* =====================================================================
   05 SYSTEMS — the engine: one search, six systems, one loop
   ===================================================================== */
.systems { padding-top: var(--sec); }
/* the moment itself, as the customer would see it */
.jui { margin-top: 20px; max-width: 400px; border: 1px solid var(--line-2); border-radius: 18px; background: color-mix(in srgb, #fff 55%, transparent); padding: 14px 16px; font-size: 14px; line-height: 1.45; box-shadow: 0 24px 50px -34px rgba(21, 21, 19, .5); }
.jui b { font-weight: 600; color: var(--fg); }
.jui--chat { display: grid; gap: 10px; }
.jui__q { justify-self: end; max-width: 86%; padding: 8px 13px; border-radius: 16px 16px 4px 16px; background: var(--fg); color: var(--bg); }
.jui__a { color: var(--muted); }
.jui__a b { color: var(--accent); }
.jui__src { justify-self: start; padding: 5px 9px; border: 1px solid var(--line-2); border-radius: 999px; font: 400 11px/1 var(--mono); color: var(--muted); }
.jui--result { padding: 0; overflow: hidden; }
.jui__vis { position: relative; height: 74px; }
.jui--map .jui__vis {
  background:
    linear-gradient(90deg, transparent 44%, rgba(255, 255, 255, .85) 44% 47%, transparent 47%),
    linear-gradient(0deg, transparent 56%, rgba(255, 255, 255, .85) 56% 60%, transparent 60%),
    linear-gradient(32deg, transparent 72%, rgba(255, 255, 255, .6) 72% 74%, transparent 74%),
    #ddd5c6;
}
.jui--map .jui__vis i { position: absolute; left: 45%; top: 16%; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; background: var(--accent); transform: rotate(-45deg); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.jui--shop .jui__vis { background: radial-gradient(circle at 70% 30%, #f6ede1, #e6d4be 62%, #d8c0a3); }
.jui--shop .jui__vis i { position: absolute; left: 22px; top: 14px; width: 36px; height: 46px; border-radius: 8px 8px 11px 11px; background: linear-gradient(#fffaf3, #efe2cf); border: 1px solid rgba(21, 21, 19, .12); box-shadow: 0 -7px 0 -2px #cf4a1f inset; }
.jui--web .jui__vis { display: none; }
.jui__row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.jui__rank { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font: 500 12px/1 var(--mono); }
.jui__name { font-weight: 600; }
.jui__meta { color: var(--muted); font-size: 13px; }
.jui--ad { display: grid; gap: 8px; }
.jui__tag { font: 400 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.jui__head { font-family: var(--serif); font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
.jui__cta { justify-self: start; padding: 7px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 500; }
.jui__slots { display: flex; flex-wrap: wrap; gap: 8px; }
.jui__slots span { padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 13px; color: var(--muted); }
.jui__slots .is-on { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.jui__slots .is-on::after { content: " ✓"; }
.jui__foot { margin-top: 10px; font: 400 11.5px/1.3 var(--mono); color: var(--muted); }
.jui__from { font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.jui__subj { margin-top: 6px; font-weight: 600; }
.jui__rev { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); }
.jui__rev span { color: var(--accent); letter-spacing: .1em; }
.jui--log { display: grid; gap: 8px; font: 400 12.5px/1.35 var(--mono); }
.jui--log p { display: flex; align-items: baseline; gap: 9px; }
.jui--log i { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }

/* the engine: seven panels slide past one thread, and a token rides it through every system */
.eng { position: relative; height: 580vh; }
.eng__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; padding-top: 96px; overflow: hidden; }
.eng__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; position: relative; z-index: 5; }
.eng__from { font-size: 14px; color: var(--muted); }
.eng__from b { color: var(--fg); font-weight: 500; }
.eng__view { position: relative; flex: 1; min-height: 0; }
.eng__track { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--pw, 100vw) * 7); display: flex; flex-direction: column; will-change: transform; }
.eng__panels { flex: 1; min-height: 0; display: flex; transition: opacity .25s var(--ease); }
.eng.is-swap .eng__panels { opacity: 0; }
.eng__panel { position: relative; flex: 0 0 var(--pw, 100vw); height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; column-gap: clamp(32px, 5vw, 96px); padding: 0 max(var(--gutter), calc((var(--pw, 100vw) - var(--maxw)) / 2 + var(--gutter))); }
.eng__num { position: absolute; right: max(var(--gutter), calc((var(--pw, 100vw) - var(--maxw)) / 2)); top: 50%; z-index: 0; font: 300 min(50vh, 30vw)/.8 var(--serif); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--line-2); transform: translate(calc(var(--d, 0) * 22vw), -50%); pointer-events: none; user-select: none; }
.eng__copy { position: relative; z-index: 1; min-width: 0; opacity: calc(1 - var(--a, 0) * .85); transform: translateX(calc(var(--d, 0) * 7vw)); }
.eng__scene { position: relative; z-index: 1; justify-self: center; width: min(100%, 540px); opacity: calc(1 - var(--a, 0) * .55); transform: translateX(calc(var(--d, 0) * 16vw)) rotate(calc(var(--d, 0) * 4deg)) scale(calc(1 - var(--a, 0) * .12)); }

.eng__k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font: 400 12px/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.eng__k b { font-weight: 400; color: var(--accent); }
.eng__mine { padding: 5px 10px; border-radius: 999px; background: var(--accent); color: #fff; font: 500 11px/1 var(--sans); font-style: normal; letter-spacing: .02em; }
.eng__sys { margin-top: 16px; font: 300 clamp(54px, 7.4vw, 128px)/.92 var(--serif); letter-spacing: -.045em; }
.eng__panel--loop .eng__sys { font-style: italic; color: var(--accent); }
.eng__h { margin-top: 22px; max-width: 22ch; font: 300 clamp(23px, 2.1vw, 32px)/1.16 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.eng__r { margin-top: 12px; max-width: 44ch; font-size: 16.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.eng__does { margin-top: 18px; max-width: 46ch; padding-left: 14px; border-left: 2px solid var(--accent); font-size: 15px; line-height: 1.5; }
.eng__does span { display: block; margin-bottom: 5px; font: 400 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.eng__more { display: inline-flex; gap: 6px; margin-top: 16px; padding-bottom: 2px; border-bottom: 1px solid var(--line-2); font-size: 14px; font-weight: 500; transition: color .3s, border-color .3s; }
.eng__more:hover { color: var(--accent); border-color: var(--accent); }
.eng__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.eng__ask { display: inline-block; margin-top: 18px; font-size: 14.5px; }

/* the customer's moment, larger than life */
.eng .jui { margin-top: 0; max-width: none; padding: 18px 20px; font-size: 16px; border-radius: 22px; background: color-mix(in srgb, #fff 92%, var(--bg)); box-shadow: 0 46px 90px -46px rgba(21, 21, 19, .6); }
.eng .jui__head { font-size: 26px; }
.eng .jui__name { font-size: 17px; }
.eng .jui__vis { height: 96px; }
.eng__state { display: none; margin-top: 14px; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 13px; font-weight: 500; }
.eng__state i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.eng__loop { position: relative; width: min(230px, 62%); margin: 0 auto 18px; }
.eng__ring { display: block; width: 100%; height: auto; overflow: visible; }
.eng__ring-t { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 9; animation: engDash 3s linear infinite; }
@keyframes engDash { to { stroke-dashoffset: -48; } }
.eng__bead { fill: var(--accent); }
.eng__count { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; }
.eng__count b { font: 300 64px/1 var(--serif); letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; }
.eng__count span { max-width: 12ch; font-size: 13px; line-height: 1.3; color: var(--muted); }

/* the thread, and the token riding it */
.eng__thread { flex: none; display: block; width: calc(var(--pw, 100vw) * 7); height: 140px; overflow: visible; }
.eng__road { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.eng__trail { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.eng__node { cursor: pointer; }
.eng__dot { fill: var(--bg); stroke: var(--line-2); stroke-width: 1.5; transition: fill .4s, stroke .4s; }
.eng__node.is-hit .eng__dot { fill: var(--accent); stroke: var(--accent); }
.eng__node:hover .eng__dot { stroke: var(--accent); }
.eng__halo { fill: var(--accent); opacity: 0; transform-box: fill-box; transform-origin: center; }
.eng__node.is-fire .eng__halo { animation: engFire .9s var(--ease); }
@keyframes engFire { from { opacity: .4; transform: scale(.4); } to { opacity: 0; transform: scale(2.4); } }
.eng__nl { font: 500 13px var(--sans); fill: var(--muted); paint-order: stroke; stroke: var(--bg); stroke-width: 6px; stroke-linejoin: round; transition: fill .4s; }
.eng__nn { font-family: var(--mono); font-size: 11px; font-weight: 400; fill: var(--accent); }
.eng__node.is-hit .eng__nl, .eng__node.is-here .eng__nl { fill: var(--fg); }
.eng__token { position: absolute; left: 50%; top: calc(100% - 140px); z-index: 4; display: inline-flex; align-items: center; gap: 10px; max-width: 92vw; padding: 10px 18px 10px 13px; border: 1.5px solid var(--fg); border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 14.5px; font-weight: 500; white-space: nowrap; box-shadow: 0 20px 44px -20px rgba(21, 21, 19, .6); transform: translate(-50%, calc(var(--ty, 56px) - 50%)); pointer-events: none; transition: background-color .4s, color .4s; }
.eng__token i { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 26%, transparent); }
.eng__token span { overflow: hidden; text-overflow: ellipsis; }
.eng__token.is-search { background: var(--bg); color: var(--fg); }
.eng__token.is-pop span { animation: engPop .5s var(--ease); }
@keyframes engPop { from { opacity: 0; transform: translateY(8px); } }

/* phones and reduced motion: every system in turn, top to bottom */
.eng.is-static { height: auto; padding-bottom: var(--sec); }
.eng.is-static .eng__pin { position: relative; height: auto; overflow: visible; padding-top: clamp(28px, 4vw, 56px); }
.eng.is-static .eng__view { flex: none; }
.eng.is-static .eng__track { position: relative; width: auto; transform: none !important; }
.eng.is-static .eng__panels { display: block; }
.eng.is-static .eng__panel { height: auto; padding-block: 64px; border-top: 1px solid var(--line); }
.eng.is-static .eng__panel:first-child { margin-top: 28px; }
.eng.is-static .eng__thread, .eng.is-static .eng__token { display: none; }
.eng.is-static .eng__state { display: inline-flex; }
.eng.is-static .eng__num { top: 40px; font-size: min(30vw, 240px); transform: none; }
.eng.is-static .eng__copy, .eng.is-static .eng__scene { opacity: 1; transform: none; }
@media (min-width: 901px) and (max-height: 820px) {
  .eng__pin { padding-top: 84px; }
  .eng__sys { font-size: clamp(48px, 6vw, 96px); }
  .eng__h { margin-top: 14px; font-size: clamp(20px, 1.8vw, 26px); }
  .eng__does { display: none; }
  .eng .jui { padding: 14px 16px; font-size: 15px; }
}
@media (max-width: 900px) {
  .eng__bar { flex-direction: column; align-items: stretch; }
  .eng__who { display: flex; width: 100%; }
  .eng__who button { flex: 1; white-space: nowrap; }
  .eng.is-static .eng__panel { grid-template-columns: 1fr; row-gap: 26px; padding-block: 44px; }
  .eng.is-static .eng__num { top: 26px; right: var(--gutter); font-size: 36vw; }
  .eng__sys { font-size: clamp(44px, 13vw, 72px); }
  .eng .jui { padding: 14px 16px; font-size: 14.5px; }
  .eng .jui__head { font-size: 21px; }
  .eng__scene { width: 100%; }
}

/* =====================================================================
   06 PROOF — the ledger, the results reel, the reviews
   ===================================================================== */
.work { padding-top: var(--sec); }

/* mechanical counters: each digit is a strip that rolls */
.odo { display: inline-flex; align-items: flex-start; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }   /* even heights and widths, so a rolling strip shows exactly one digit */
/* each digit is a 1.15em window onto its strip (ODO_CELL in app.js); the margins give the extra height back to the layout */
.odo__d { display: inline-block; height: 1.15em; line-height: 1.15; overflow: hidden; margin: -.075em -.05em -.075em 0; padding-right: .05em; }
.odo__s { display: block; will-change: transform; transition: transform .38s cubic-bezier(.2, .8, .2, 1); }
.odo__s i { display: block; height: 1.15em; line-height: 1.15; font-style: inherit; text-align: center; }
.odo__c { line-height: 1; }
.odo__d, .odo__p { transition: opacity .4s; }
.odo .is-lead { opacity: .18; }

.stats { container-type: inline-size; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 96px); border-top: 1px solid var(--line-2); }
.stat { min-width: 0; padding: 26px 18px 6px 0; border-right: 1px solid var(--line); }
.stat + .stat { padding-left: 22px; }
.stat:last-child { border-right: 0; }
/* sized from the row, so all five match and the widest ($50M+) still fits its column */
.stat b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 7.2cqi, 118px); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
@media (max-width: 1200px) { .stat b { font-size: clamp(40px, 11cqi, 118px); } }
@media (max-width: 680px) { .stat b { font-size: clamp(36px, 18cqi, 90px); } }
.stat .odo__c:not(.odo__p) { font-size: .6em; margin-top: .1em; letter-spacing: 0; }
.stat:nth-child(4) b { color: var(--accent); font-style: italic; }
.stat > span { display: block; color: var(--muted); margin-top: 14px; font-size: 14.5px; }

/* the live site's logo files are square white canvases with the logo small inside: each is cropped to its own
   artwork, then sized by area rather than width, so a long wordmark and a square badge carry the same weight */
.cl__logo { position: relative; flex: none; overflow: hidden; aspect-ratio: var(--ar); width: min(66cqw, calc(46cqh * var(--ar)), calc(42cqh * var(--s))); }
.cl__logo img { position: absolute; max-width: none; height: auto; width: calc(187.5 / var(--w) * 100%); left: calc(var(--x) / var(--w) * -100%); top: calc(var(--y) / var(--h) * -100%); }
.clients__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* a brand's logo beside its name, sized to the type around it, the white knocked out and the artwork set in the
   section's own ink, so it reads on night or day */
.mark { position: relative; top: -.05em; display: inline-flex; flex: none; vertical-align: middle; margin-right: .3em; }
.mark .cl__logo { width: calc(var(--mk, .62em) * var(--s)); }
.mark img { filter: url(#clInkNight); }
section[data-tone="light"] .mark img { filter: url(#clInkDay); }
.mark--you { width: .5em; height: .5em; border: 1.5px dashed var(--accent); border-radius: 28%; }

/* the case files: one case at a time, played the way it ran */
.reel { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 80px); align-items: start; margin-top: clamp(90px, 11vw, 160px); }
.reel__nav { position: sticky; top: 110px; display: grid; }
.reel__tab { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; gap: 6px 10px; padding: 16px 0 18px; border-top: 1px solid var(--line); text-align: left; color: var(--muted); transition: color .3s; }
.reel__tab:last-child { border-bottom: 1px solid var(--line); }
.reel__tab:hover, .reel__tab[aria-selected="true"] { color: var(--fg); }
.reel__n { font: 400 12px/1 var(--mono); color: var(--accent); }
.reel__name { display: flex; align-items: center; flex-wrap: wrap; font-family: var(--serif); font-weight: 300; font-size: 25px; line-height: 1.1; letter-spacing: -.02em; }
.reel__name .mark { --mk: 1.1em; top: 0; margin-right: .42em; opacity: .9; }
/* a case named by its logo alone, larger */
.reel__name.is-logo { min-height: 1.6em; }
.reel__name.is-logo .mark { --mk: 1.95em; margin-right: 0; opacity: .82; transition: opacity .3s; }
.reel__tab:hover .reel__name.is-logo .mark, .reel__tab[aria-selected="true"] .reel__name.is-logo .mark { opacity: 1; }
.reel__name .mark--you { width: .7em; height: .7em; }
.reel__dur { grid-column: 2; font-size: 12.5px; color: var(--faint); }
.reel__bar { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.reel__stage { min-width: 0; }
.reel__num { font-family: var(--serif); font-weight: 300; font-size: clamp(76px, 9vw, 160px); line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.reel__num .odo__c:not(.odo__p) { font-size: .62em; margin-top: .08em; letter-spacing: 0; }
.reel__cta { margin-top: 26px; }
.reel__note { margin-top: 22px; font-size: 12.5px; color: var(--faint); max-width: 74ch; }

.case__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: 13.5px; color: var(--muted); }
.case__tag { font: 400 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.case__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px clamp(28px, 4vw, 72px); margin-top: 22px; }
.case__client { font: 300 clamp(60px, 7.6vw, 128px)/.95 var(--serif); letter-spacing: -.045em; overflow-wrap: anywhere; }
.case__client em { color: var(--accent); }
.case__client .mark { --mk: .5em; margin-right: .22em; top: -.07em; }
.case__client.is-logo { display: flex; align-items: center; min-height: 1em; }
.case__client.is-logo .mark { --mk: 1.05em; top: 0; margin: 0; }
.case__title { margin-top: 16px; max-width: 30ch; font: 300 clamp(21px, 1.8vw, 28px)/1.22 var(--serif); letter-spacing: -.015em; color: var(--muted); text-wrap: balance; }
.case__result { min-width: 0; max-width: 30ch; text-align: right; transition: opacity .6s var(--ease); }
.reel.is-pending .case__result { opacity: .3; }
.case__lbl { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.case__lbl em { color: var(--fg); }
.case__sub { margin-top: 6px; font-size: 13.5px; color: var(--faint); }
.case__sub b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.case__what { font: 400 11.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.case__deliv { margin-top: 12px; font: italic 300 clamp(30px, 3.2vw, 50px)/1.04 var(--serif); letter-spacing: -.02em; color: var(--accent); text-wrap: balance; }

/* the story, step by step; every step is laid out from the start and lights in turn */
.case__story { margin-top: clamp(30px, 3.6vw, 52px); border-top: 1px solid var(--line-2); }
.case__story > li { position: relative; display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 8px 28px; padding: 18px 0 19px; border-bottom: 1px solid var(--line); cursor: pointer; opacity: .38; transition: opacity .6s var(--ease); }
.case__story > li:hover { opacity: .9; }
.case__story > li.is-done { opacity: .72; }
.case__story > li.is-on { opacity: 1; }
.case__k { font: 400 11.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.case__k b { font-weight: 400; color: var(--accent); margin-right: 12px; }
.case__t { font-size: 16px; line-height: 1.55; max-width: 64ch; text-wrap: pretty; }
.case__t ul { display: grid; gap: 6px; }
.case__t li { position: relative; padding-left: 18px; }
.case__t li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.case__bar { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.case__story > li:last-child .case__t { font-family: var(--serif); font-size: clamp(19px, 1.5vw, 23px); line-height: 1.35; letter-spacing: -.01em; }

/* reviews, set large */
.quotes { overflow: hidden; border-block: 1px solid var(--line); margin-top: clamp(80px, 10vw, 140px); padding: 54px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.quotes__track { display: flex; width: max-content; animation: marquee 95s linear infinite; }
.quotes:hover .quotes__track { animation-play-state: paused; }
.quote { flex-shrink: 0; display: grid; gap: 14px; padding-right: clamp(60px, 7vw, 110px); }
.quote blockquote { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(30px, 3.8vw, 60px); line-height: 1.04; letter-spacing: -.025em; white-space: nowrap; }
.quote figcaption { font-size: 13px; color: var(--faint); }
.quote__stars { font-size: 13px; letter-spacing: .22em; color: var(--accent); }

@media (max-width: 900px) {
  .reel { grid-template-columns: 1fr; gap: 26px; }
  .reel__nav { position: relative; top: 0; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .reel__tab { grid-template-columns: 28px minmax(0, 1fr); padding: 13px 0 14px; }
  .reel__tab:last-child { border-bottom: 0; }
  .reel__name { font-size: 18px; }
  .reel__dur { grid-column: 2; }
  .reel__num { font-size: clamp(72px, 22vw, 150px); }
  .case__head { grid-template-columns: 1fr; align-items: start; }
  .case__result { text-align: left; max-width: none; }
  .case__story > li { grid-template-columns: 1fr; gap: 6px; }
}

/* =====================================================================
   07 SIMULATOR
   ===================================================================== */
.sim { padding-block: var(--sec) calc(var(--sec) * .6); }   /* its plan leads straight into Contact below, so the two sit close */
.sim__grid { display: grid; grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); margin-top: clamp(48px, 6vw, 88px); align-items: stretch; }
.sim__controls { display: flex; flex-direction: column; gap: 34px; padding: clamp(22px, 2.6vw, 34px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.ctl label, .ctl__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--muted); font-size: 14.5px; margin-bottom: 14px; }
.ctl output { font: 300 38px/1 var(--serif); letter-spacing: -.035em; color: var(--fg); font-variant-numeric: tabular-nums; }
.sim__note { color: var(--faint); font-size: 13px; line-height: 1.6; }
.sim__how { margin-top: auto; border-top: 1px solid var(--line); padding-top: 18px; font-size: 13.5px; color: var(--muted); }
.sim__how summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--fg); font-weight: 500; }
.sim__how summary::-webkit-details-marker { display: none; }
.sim__how summary::after { content: "+"; font: 300 22px/1 var(--sans); transition: transform .4s var(--ease); }
.sim__how[open] summary::after { transform: rotate(45deg); }
.sim__how ul { display: grid; gap: 8px; margin-top: 14px; }
.sim__how li { position: relative; padding-left: 16px; line-height: 1.5; }
.sim__how li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* the result, read back as a plan: the step from playing with numbers to starting a conversation */
.plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 48px; margin-top: 18px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: var(--fg); color: var(--bg); }
.plan__k { grid-column: 1 / -1; font: 400 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 55%, transparent); }
.plan__sum { max-width: 64ch; font: 300 clamp(21px, 1.9vw, 28px)/1.38 var(--serif); letter-spacing: -.012em; text-wrap: pretty; }
.plan__sum b { font-weight: 400; font-style: italic; color: var(--accent); }
.plan__acts { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.plan .btn--solid { background: var(--bg); color: var(--fg); height: 56px; padding: 0 28px; font-size: 15.5px; }
.plan .btn--solid:hover { color: #fff; }
.plan .linkish { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.plan .linkish:hover { color: var(--bg); }
.sim__out { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kpi { border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; background: var(--card); min-width: 0; }
.kpi span { color: var(--muted); display: block; font-size: 13.5px; }
/* room for the tallest glyphs ($, digits): nothing here is ever clipped */
.kpi b { display: block; margin-top: 12px; padding-top: .04em; font: 300 clamp(40px, 4.2vw, 66px)/1.02 var(--serif); letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.kpi b small { font: italic 300 .42em/1 var(--serif); letter-spacing: -.01em; margin-right: .18em; opacity: .7; }
.kpi > small { display: block; margin-top: 10px; font-size: 12.5px; color: color-mix(in srgb, currentColor 60%, transparent); }
.kpi--inv { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.kpi--inv span { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.kpi--inv b { font-style: italic; }
.chart { position: relative; flex: 1; min-height: 360px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); overflow: hidden; }
.chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart__legend { position: absolute; top: 20px; right: 22px; display: flex; gap: 18px; font-size: 13px; color: var(--muted); }
.chart__legend span::before { content: ""; display: inline-block; width: 16px; height: 0; border-top: 1.5px solid var(--fg); margin-right: 8px; vertical-align: middle; }
.chart__legend .l2::before { border-top: 1.5px dashed var(--faint); }
.chart__tip { position: absolute; pointer-events: none; background: var(--fg); color: var(--bg); padding: 8px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.5; transform: translate(-50%, calc(-100% - 16px)); white-space: nowrap; }
.chart__tip b { font-weight: 600; }

/* =====================================================================
   08 TALK
   ===================================================================== */
.talk { padding-block: calc(var(--sec) * .6) var(--sec); }   /* it follows the simulator in the same light, so it starts closer, the way 02 follows 01 */
.talk__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.talk .lede { margin-top: 28px; }
.direct { margin: 40px 0; border-top: 1px solid var(--line); }
.direct li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.direct li > span:first-child { color: var(--faint); }
.direct a { transition: color .3s; }
.direct a:hover { color: var(--accent); }
.talk__small { color: var(--faint); margin-bottom: 12px; font-size: 13.5px; }

.flow { position: relative; min-height: 580px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--card); padding: clamp(24px, 3.2vw, 44px); display: flex; flex-direction: column; overflow: hidden; }
.flow__top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); gap: 20px; font-size: 13.5px; }
.flow__bar { flex: 1; max-width: 260px; height: 1px; background: var(--line-2); overflow: hidden; }
.flow__bar i { display: block; height: 100%; background: var(--fg); transition: width .9s var(--ease); }
.flow__step { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 30px 0 10px; animation: stepIn .8s var(--ease) both; }
.flow__step.is-leaving { animation: stepOut .35s var(--ease-io) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } }
@keyframes stepOut { to { opacity: 0; transform: translateY(-14px); filter: blur(4px); } }
.flow__q { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 3.4vw, 54px); line-height: 1.04; letter-spacing: -.035em; max-width: 20ch; }
.flow__q em { color: var(--accent); }
.flow__fields { display: grid; gap: 14px; margin-top: 32px; }
.flow__fields.two { grid-template-columns: 1fr 1fr; }
.field { display: block; }
.field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); padding: 14px 0; font-size: clamp(20px, 1.9vw, 27px); color: var(--fg); outline: none; border-radius: 0; transition: border-color .4s; }
.field textarea { resize: none; min-height: 112px; line-height: 1.4; font-size: clamp(18px, 1.5vw, 22px); }
.field input:focus, .field textarea:focus { border-color: var(--fg); }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field small { display: block; color: var(--accent); font-size: 12.5px; margin-top: 8px; min-height: 12px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; }
.choice { text-align: left; border: 1px solid var(--line-2); border-radius: 16px; padding: 18px 20px; font-size: 17px; transition: border-color .3s, background-color .4s, color .4s; }
.choice:hover { border-color: var(--fg); }
.choice[aria-checked="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.slots__day { display: flex; flex-direction: column; gap: 8px; }
.slots__day > span { color: var(--muted); padding-bottom: 6px; font-size: 14px; }
.slot { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px; font-size: 15px; transition: .3s; }
.slot:hover { border-color: var(--fg); }
.slot[aria-checked="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.flow__tz { color: var(--faint); margin-top: 16px; font-size: 13.5px; }
.flow__nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.flow__nav .linkish { font-size: 14.5px; }
.flow__hint { color: var(--faint); font-size: 13px; }
.flow__done h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(56px, 6.4vw, 104px); line-height: .9; letter-spacing: -.045em; }
.flow__done h3 em { color: var(--accent); }
.flow__done p { color: var(--muted); margin-top: 18px; max-width: 46ch; }
.flow__summary { margin-top: 26px; border-top: 1px solid var(--line); }
.flow__summary li { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.flow__summary li span { color: var(--faint); }
.flow__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot { padding-top: var(--sec); overflow: hidden; }
.foot__big { display: inline-block; font-family: var(--serif); font-weight: 300; font-size: clamp(60px, 9vw, 168px); line-height: .9; letter-spacing: -.045em; transition: color .5s; }
.foot__big em { color: var(--accent); }
.foot__big:hover { color: var(--accent); }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: clamp(70px, 9vw, 130px); padding-top: 34px; border-top: 1px solid var(--line); }
.foot__cols > div { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.foot__h { color: var(--faint); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.foot__cols a { color: var(--muted); font-size: 15px; transition: color .3s; }
.foot__cols a:hover { color: var(--fg); }
.meta { width: 100%; }
.meta li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 13px; }
.meta b { color: var(--fg); font-weight: 500; text-align: right; }
/* the footer's signals: the same numbers as above the home headline */
.foot__sig .foot__h { margin-bottom: 0; }
.foot__when { letter-spacing: .08em; }
.foot__say { font: 300 22px/1.2 var(--serif); letter-spacing: -.015em; color: var(--fg); }
.foot__say.is-down { color: var(--accent); }
.foot__sig .meta b { display: inline-flex; align-items: center; gap: 9px; }
.foot__sig .sig__d { opacity: 1; translate: none; font-size: 11.5px; }
.foot__src { font-size: 12px; line-height: 1.45; color: var(--faint); }
.foot__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 26px 0 32px; color: var(--faint); border-top: 1px solid var(--line); margin-top: clamp(56px, 7vw, 96px); font-size: 13px; }

/* =====================================================================
   PALETTE, TOAST, CURSOR, GRAIN
   ===================================================================== */
.palette { position: fixed; inset: 0; z-index: 150; display: flex; justify-content: center; align-items: flex-start; padding: 13vh 16px 16px; }
.palette__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fade .35s both; }
@keyframes fade { from { opacity: 0; } }
.palette__box { position: relative; width: min(660px, 100%); border-radius: 24px; border: 1px solid var(--line-2); background: var(--bg); box-shadow: 0 60px 120px -30px rgba(0, 0, 0, .55); overflow: hidden; animation: palIn .5s var(--ease) both; }
@keyframes palIn { from { opacity: 0; transform: translateY(-12px) scale(.98); } }
.palette__in { display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--line); color: var(--muted); }
.palette__in input { flex: 1; min-width: 0; height: 64px; background: transparent; border: 0; outline: none; font-size: 18px; color: var(--fg); }
.palette__in kbd { font-size: 11px; border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 7px; }
.palette__list { max-height: min(56vh, 470px); overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
.palette__list li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; cursor: pointer; color: var(--muted); }
.palette__list li .ic { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); font: 400 11px/1 var(--mono); color: var(--fg); }
.palette__list li .lb { flex: 1; color: var(--fg); font-size: 15.5px; }
.palette__list li .lb small { display: block; color: var(--faint); font-size: 13px; margin-top: 2px; }
.palette__list li[aria-selected="true"] { background: var(--card-2); }
.palette__list li[aria-selected="true"] .ic { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.palette__list .grp { padding: 12px 14px 6px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); cursor: default; }
.palette__foot { display: flex; gap: 18px; padding: 13px 20px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px; }
.palette__tip { margin-left: auto; }

.toast {
  position: fixed; left: var(--gutter); bottom: 22px; z-index: 90; width: min(420px, calc(100% - 32px));
  border: 1px solid var(--line-2); border-radius: 22px; background: var(--bg);
  padding: 18px 20px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55);
  animation: toastIn .8s var(--ease) both;
}
.toast.is-out { animation: toastOut .4s var(--ease-io) both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(16px); } }
.toast p { font-size: 15px; color: var(--muted); }
.toast p .k { display: block; font-family: var(--serif); font-size: 23px; letter-spacing: -.02em; margin-bottom: 4px; color: var(--fg); }
.toast__actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.toast__actions .btn { height: 38px; padding: 0 16px; font-size: 13.5px; }

.cursor { display: none; }
/* The wrapper must not form its own stacking context, or the dot's difference blend would only see an empty layer
   and render as a flat bone dot that vanishes on the light sections. display: contents lets each part blend with the page. */
.has-cursor .cursor { display: contents; }
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor input:not([type="range"]), .has-cursor textarea { cursor: text !important; }
.cursor__dot { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; mix-blend-mode: difference; transition: width .5s var(--ease), height .5s var(--ease), margin .5s var(--ease), opacity .3s; }
.cursor__label { position: fixed; left: 0; top: 0; z-index: 301; pointer-events: none; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font: 500 13px/1 var(--sans); font-style: normal; transform: scale(0); opacity: 0; transition: transform .6s var(--ease), opacity .3s; }
.cursor.is-hover .cursor__dot { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.cursor.is-label .cursor__dot { opacity: 0; }
.cursor.is-label .cursor__label { opacity: 1; transform: scale(var(--ls, 1)); }
.cursor.is-text .cursor__dot { opacity: 0; }
.cursor.is-down .cursor__dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
.cursor.is-down { --ls: .86; }
.cursor.is-hidden .cursor__dot, .cursor.is-hidden .cursor__label { opacity: 0; }

.grain {
  position: fixed; inset: -50%; z-index: 250; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.4s steps(5) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
.noscript { position: fixed; bottom: 0; left: 0; right: 0; padding: 12px; background: var(--fg); color: var(--bg); text-align: center; z-index: 400; }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
html[data-motion="reduced"] { transition: none; }
html[data-motion="reduced"] [data-reveal] { opacity: 1; transform: none; }
html[data-motion="reduced"] .cl__enter { opacity: 1; transform: none; }
html[data-motion="reduced"] [data-split] .sw__i { transform: none; }
html[data-motion="reduced"] .shift__text .w { opacity: 1 !important; }
html[data-motion="reduced"] .ticker__track, html[data-motion="reduced"] .quotes__track { animation: none; }
html[data-motion="reduced"] .quotes { overflow-x: auto; }
html[data-motion="reduced"] .hero__hint { display: none; }
html[data-motion="reduced"] .grain { animation: none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1200px) {
  .nav__links { display: none; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-right: 0; }
  .stat:nth-child(4) { padding-left: 0; }
  .stat:nth-child(n+4) { border-top: 1px solid var(--line); margin-top: 20px; }
}

/* short laptop screens: keep the whole hero, ticker included, above the fold */
@media (min-width: 901px) and (max-height: 780px) {
  .hero__inner { padding-top: 92px; padding-bottom: 24px; }
  .hero__title { font-size: clamp(56px, min(11.4vw, 18vh), 210px); }
  .ticker li { padding-block: 13px; }
  .hero__hint { top: 96px; }
}

@media (max-width: 900px) {
  .split-head { grid-template-columns: 1fr; align-items: start; }
  .hero__bottom { grid-template-columns: 1fr; }
  .sim__grid, .talk__grid { grid-template-columns: 1fr; }
  .kwp { grid-template-columns: 1fr; grid-template-areas: "head" "list" "acts" "fine"; }
  .kwr__grid { grid-template-columns: 1fr; }
  .kwr__cell, .kwr__cell:first-child, .kwr__cell:last-child { padding: 26px 0; border-left: 0; border-top: 1px solid var(--line); }
  .kwr__cell:first-child { border-top: 0; }
  .kwr__cell:last-child { padding-bottom: 0; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .hero__hint { display: none; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .nav { height: 54px; top: 10px; left: 10px; right: 10px; }
  .brand { --lh: 34px; height: 48px; padding-left: 4px; }
  .nav.is-scrolled > .brand { padding: 0 13px; }
  .nav__cta { display: none; }
  .tool kbd { display: none; }
  .hero__inner { padding-top: 96px; }
  .hero__meta { font-size: 12.5px; gap: 6px 10px; }
  .hero__meta { gap: 6px 10px; }
  .signals { gap: 6px 14px; }
  .signals .sep { display: none; }
  /* one line on a phone: the lead number above the headline, the rest in the footer */
  .sig:not(.is-lead) { display: none; }
  .hero__title { font-size: clamp(46px, 15vw, 120px); margin-top: clamp(14px, 3vh, 40px); }
  .ask__row { padding-left: 16px; }
  .ask__row input { height: 50px; }
  .ask__go { width: 50px; height: 50px; }
  .ask__hint { display: none; }
  .seg { justify-content: space-between; }
  .seg button { padding: 9px 14px; flex: 1; }
  .kwa__live { display: none; }
  #kwChips .chip:nth-of-type(n+4) { display: none; }
  .kwa__ask .ask__row { gap: 10px; }
  .kwa__ask .ask__row input { font-size: 21px; }
  .kwa__glass { display: none; }
  .kwr__top { grid-template-columns: 1fr; }
  .kwr__tokens { min-height: 0; gap: 12px 12px; }
  .kwt b, .kwt--f { font-size: clamp(30px, 9vw, 40px); }
  .kwr__verdict { min-height: 6lh; font-size: 19px; }
  .kwo { --ring: 108px; grid-template-columns: var(--ring) minmax(0, 1fr); justify-items: start; align-items: center; gap: 22px; }
  .kwo__in { left: 0; margin-left: 0; }
  .kwo__in b { font-size: 40px; }
  .kwo__in span { font-size: 11px; }
  .kwo__band { max-width: none; text-align: left; font-size: 22px; }
  .kwst__t { min-height: 4lh; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat, .stat + .stat { padding: 22px 12px 6px 0; border-right: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 12px; }
  .stat:last-child { grid-column: 1 / -1; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi--inv { grid-column: 1 / -1; }
  .plan { grid-template-columns: 1fr; }
  .plan__acts { align-items: stretch; }
  .plan .btn--solid { width: 100%; }
  .plan .linkish { align-self: center; }
  .chart { min-height: 290px; }
  .chart__legend { top: 14px; right: 14px; gap: 12px; }
  .flow { min-height: 540px; }
  .flow__fields.two, .choices, .slots { grid-template-columns: 1fr; }
  .slots__day { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .slots__day > span { width: 100%; }
  .slot { flex: 1; }
  .foot__cols { grid-template-columns: 1fr; }
  .palette { padding-top: 8vh; }
  .palette__tip { display: none; }
}

/* =====================================================================
   THE BRANDS BEHIND THE NUMBERS — 21 of 200+, named as large as the headlines
   ===================================================================== */
.brands { position: relative; padding-block: calc(var(--sec) * .8); overflow: hidden; }
.brands__side { display: grid; gap: 26px; justify-items: start; }
.brands__seg button { white-space: nowrap; }
.brands__seg button i { margin-left: 3px; font: 400 11px/1 var(--mono); font-style: normal; opacity: .55; }
.brands__rows { display: grid; gap: clamp(2px, .5vw, 10px); margin-top: clamp(48px, 6vw, 96px); padding-block: clamp(16px, 1.8vw, 28px); border-block: 1px solid var(--line); touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab; }
.brands.is-dragging .brands__rows { cursor: grabbing; }
.brands__track { display: flex; width: max-content; will-change: transform; }
.brands__track li { flex: none; }
.bn { display: inline-flex; align-items: center; padding: .02em .36em; font-family: var(--serif); font-weight: 300; font-variation-settings: "opsz" 72; font-size: clamp(46px, 7vw, 128px); line-height: 1.04; letter-spacing: -.045em; white-space: nowrap; color: var(--fg); cursor: inherit; }
.bn .mark { --mk: .58em; top: 0; margin-right: .26em; transition: opacity .5s var(--ease); }
.bn__t { position: relative; -webkit-text-stroke: 1px transparent; transition: color .5s var(--ease), -webkit-text-stroke-color .5s; }
.bn[data-case] .bn__t::after { content: ""; position: absolute; top: .2em; right: -.2em; width: .09em; height: .09em; min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--accent); }
.bn:hover .bn__t, .bn:focus-visible .bn__t { color: var(--accent); font-style: italic; }
.bn:focus-visible { outline: none; }
.bn:focus-visible .bn__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
/* a market picked: the brands like yours step forward, the rest fall back to outlines */
.brands.is-filtered .bn:not(.is-match) .bn__t { color: transparent; -webkit-text-stroke-color: var(--line-2); }
.brands.is-filtered .bn:not(.is-match) .mark { opacity: .14; }
.brands.is-filtered .bn:not(.is-match):hover .bn__t { color: transparent; -webkit-text-stroke-color: var(--accent); }
.brands__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 30px; margin-top: 26px; }
.brands__say { font: 300 clamp(20px, 1.7vw, 27px)/1.3 var(--serif); letter-spacing: -.012em; }
.brands__hint { display: flex; flex-wrap: wrap; gap: 8px 24px; font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.brands__hint i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.brands__plain { margin-top: 40px; font: 300 clamp(28px, 3vw, 44px)/1.25 var(--serif); letter-spacing: -.02em; }
/* the brand in its own colours, on paper, beside the pointer */
.brands__peek { position: absolute; left: 0; top: 0; z-index: 5; display: grid; justify-items: start; gap: 9px; width: max-content; max-width: min(320px, calc(100% - 24px)); padding: 16px 18px; border-radius: 18px; background: #fbf8f2; color: #151513; box-shadow: 0 34px 80px -34px rgba(0, 0, 0, .7); pointer-events: none; opacity: 0; scale: .9; transform-origin: 0 100%; transition: opacity .25s, scale .4s var(--ease); }
.brands__peek.is-on { opacity: 1; scale: 1; }
.brands__peek .mark { --mk: 66px; top: 0; margin: 0 0 4px; }
.brands__peek .mark img { filter: none; mix-blend-mode: multiply; }
.brands__peek b { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.brands__peek small { font-size: 13px; line-height: 1.45; color: rgba(21, 21, 19, .62); }
.brands__peek small em { font-style: normal; color: #cf4a1f; }
.brands__peek i { font: 400 10.5px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #cf4a1f; }
@media (max-width: 900px) {
  .bn { font-size: clamp(40px, 10.5vw, 76px); }
  .brands__peek { max-width: min(280px, calc(100% - 24px)); }
}
html[data-motion="reduced"] .brands__rows { cursor: default; }
html[data-motion="reduced"] .brands__track { flex-wrap: wrap; justify-content: center; width: auto; transform: none !important; }
html[data-motion="reduced"] .brands__track li[aria-hidden] { display: none; }
html[data-motion="reduced"] .brands__drag { display: none; }

/* =====================================================================
   THE KIT ON THE HOME PAGE — below "Who we grow", the service pages' panels, labels and read-outs
   ===================================================================== */
/* 03 the reading is an instrument, with its live label */
.kwr.panel { padding: clamp(22px, 2.6vw, 38px); }
.kwr__bar { margin-bottom: 4px; }
/* where the numbers come from, said plainly, and the market for live numbers */
.kwr__src { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; }
.kwr__status { display: inline-flex; align-items: center; gap: 9px; transition: color .3s; }
.kwa.is-real .kwr__status { color: var(--fg); }
.kwr__spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-2); border-top-color: var(--accent); animation: kwSpin .8s linear infinite; }
@keyframes kwSpin { to { rotate: 360deg; } }
.kwr__dot { width: 7px; height: 7px; border-radius: 50%; background: #2f9e62; box-shadow: 0 0 0 4px color-mix(in srgb, #2f9e62 22%, transparent); }
.kwr__loc button { padding: 6px 12px; font-size: 12.5px; }
/* while the live numbers are on their way: the odds scan, the ring breathes */
.kwa.is-fetching .kwm b, .kwa.is-fetching .kwo__in b, .kwa.is-fetching .kww b { opacity: .35; transition: opacity .3s; }
.kwa.is-fetching .kwm i::before, .kwa.is-fetching .kww i::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: kwScan 1.1s var(--ease-io) infinite; }
@keyframes kwScan { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.kwa.is-fetching .kwo__fill { animation: kwBreath 1.2s ease-in-out infinite alternate; }
@keyframes kwBreath { to { opacity: .35; } }
html[data-motion="reduced"] .kwa.is-fetching .kwm i::before, html[data-motion="reduced"] .kwa.is-fetching .kww i::before, html[data-motion="reduced"] .kwa.is-fetching .kwo__fill, html[data-motion="reduced"] .kwr__spin { animation: none; }
/* the last twelve months, and a click's cost */
.kwtr { display: flex; align-items: flex-end; gap: 3px; height: 0; margin-top: 0; opacity: 0; transition: height .5s var(--ease), margin .5s var(--ease), opacity .4s; }
.kwtr.is-on { height: 34px; margin-top: 18px; opacity: 1; }
.kwtr i { flex: 1; height: calc(max(var(--h), .04) * 100%); border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--fg) 26%, transparent); transition: height .6s var(--ease); }
.kwtr i:last-child { background: var(--accent); }
.kwx { margin-top: 12px; font-size: 13px; color: var(--muted); }
.kwx:empty { display: none; }
.kwr__tokens { margin-top: 16px; }
.kwr__grid { gap: 1px; border-top: 0; border-radius: var(--r); overflow: hidden; background: var(--line); }
.kwr__cell, .kwr__cell:first-child, .kwr__cell:last-child { padding: 22px clamp(16px, 1.8vw, 26px) 24px; border-left: 0; background: color-mix(in srgb, var(--bg) 90%, var(--fg)); }
.kwr__note.ins__note { margin-top: 18px; padding-top: 0; border-top: 0; }

/* 04 the four surfaces sit in one panel, inside the page's margins */
.surf.panel { margin: clamp(44px, 6vw, 84px) 0 0; padding: clamp(14px, 1.6vw, 22px); }
.surf__bar { padding: 4px 4px 16px; }
.surf__bar .ins__k { margin-right: auto; }
.surf__foot { padding: 18px 4px 4px; }
.verdict { gap: 1px; border-radius: var(--r); overflow: hidden; background: var(--line); }
.verdict p { min-width: 170px; padding: 14px 20px 16px; background: color-mix(in srgb, var(--bg) 88%, var(--fg)); }

/* 06 the case is a panel too, labelled live */
.reel__stage { padding: clamp(22px, 2.6vw, 38px); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: color-mix(in srgb, var(--fg) 4%, transparent); box-shadow: 0 40px 120px -60px rgba(0, 0, 0, .7); }
.case__tag { display: inline-flex; align-items: center; gap: 10px; }
.case__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); animation: insLive 2.4s var(--ease) infinite; }

/* 07 the simulator: its myth, then the model, the chart and the read-outs in one panel */
.sim { padding-block: var(--sec); }
.sim__myth { margin-top: clamp(56px, 7vw, 110px); }
.sim__grid.panel { margin-top: clamp(40px, 5vw, 72px); padding: clamp(16px, 2vw, 28px); gap: clamp(18px, 2.4vw, 34px); }
.sim__top { grid-column: 1 / -1; margin-bottom: 0; }
.sim__controls { padding: 4px clamp(14px, 2vw, 30px) 4px 4px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.kpis { gap: 1px; border-radius: var(--r); overflow: hidden; background: var(--line); }
.kpi { border: 0; border-radius: 0; background: color-mix(in srgb, var(--bg) 90%, var(--fg)); }
.kpi--inv { background: var(--fg); }
.chart { border: 0; background: color-mix(in srgb, var(--bg) 93%, var(--fg)); }

/* 08 questions, then 09 contact after them */
.faq__lede { margin-top: 28px; }
.talk { padding-block: var(--sec); }

[data-tone="light"] .panel, section[data-tone="light"] .panel { box-shadow: 0 40px 100px -70px rgba(21, 21, 19, .5); }
@media (max-width: 900px) {
  .sim__controls { padding: 4px 4px clamp(18px, 3vw, 26px); border-right: 0; border-bottom: 1px solid var(--line); }
  .verdict p { min-width: 0; flex: 1; }
}
/* on a phone the screen is the panel: it runs nearly edge to edge so the results stay legible, and the outcome stacks so
   its height never changes as the answer plays out */
@media (max-width: 680px) {
  .surf.panel { margin-inline: calc(8px - var(--gutter)); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .surf__bar { padding: 0 0 14px; }
  .surf__foot { padding: 16px 0 0; }
  .verdict { display: grid; grid-template-columns: 1fr; width: 100%; }
  .verdict b { white-space: nowrap; }
}
html[data-motion="reduced"] .case__tag::before { animation: none; }

/* on the home page the questions follow the simulator closely, the way Contact used to */
#faq { padding-top: calc(var(--sec) * .7); }