/* ============================================================
   Growth Motive, Homepage
   Motive Navy #101820 · Scale Cobalt #316BFF · Momentum Lime #88F23D
   ============================================================ */

/* Fonts, self-hosted (latin, variable): no trip to Google before the first paint. Preloaded in each page's <head> */
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/fonts/manrope-latin.woff2") format("woff2"); font-weight: 200 300; font-style: normal; font-display: swap; }

:root {
  --navy: #101820;
  --navy-2: #17222c;
  --cobalt: #316BFF;
  --cobalt-deep: #1F4FD6;
  --lime: #88F23D;
  --paper: #EEEEE9;
  --white: #FFFFFF;

  --f-head: "Manrope", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;

  --pad: clamp(16px, 1.6vw, 28px);
  --hdr-h: 64px;
  --ease: cubic-bezier(.65, .05, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --line: rgba(255, 255, 255, .22);
  --line-dark: rgba(16, 24, 32, .18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--navy);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* clip, not hidden: hidden would make body a scroll container and break position: sticky */
}
body.is-loading { overflow: hidden; }
html.menu-open { overflow: hidden; } /* the page stays put behind the open menu */
[data-copy].is-copied { color: var(--lime); }
.menu [data-copy].is-copied { color: var(--cobalt); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--lime); color: var(--navy); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Duotone: greyscale photo multiplied over cobalt, navy lifted into the shadows.
   Pure CSS blend modes, cheaper than SVG filters and composited on the GPU. */
.duo { position: relative; isolation: isolate; background-color: var(--cobalt); }
.duo > img { position: relative; z-index: 0; filter: grayscale(1) contrast(1.08); mix-blend-mode: multiply; }
.duo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--navy); mix-blend-mode: lighten; pointer-events: none; }
/* every duotone image matches the hero: softer contrast, under a navy shade (the hero sets its own shade) */
.duo:not(.hero__media) > img { filter: grayscale(1) contrast(.94) brightness(1.04); }
.duo:not(.hero__media)::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(16,24,32,.3) 0%, rgba(16,24,32,.12) 40%, rgba(16,24,32,.5) 100%); }

/* ---------- Type primitives ---------- */
.label {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
}
/* balanced headline wrapping (no orphans), nicer paragraph rag */
.beat__title, .trust__statement, .assess__title, .founder__quote, .book__title, .fcard__tag { text-wrap: balance; }
/* no ghost words: headings balance their lines, running text avoids a lone last word */
h1, h2, h3, .thesis__title, .team__title, .works__title, .bxs__title, .gi__title, .faqs__title, .partners__title, .feat__client, .tcard h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
/* short lines balance instead, so a two-line one never strands its last word */
.bx__outcome, .bx__problem, .hm__say, .hm__text, .phero__lede, .tcard p, .wcard__what, .feat__pairs dd, .tm__bio, .tm__focus p, .gi__lede, .book__lede, .faq__a p { text-wrap: balance; }
p { text-wrap: pretty; }
.ln { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.ln > span { display: block; }

/* rolling text on hover */
.roll { display: inline-flex; overflow: hidden; position: relative; vertical-align: top; }
.roll > span { display: inline-block; position: relative; transition: transform .6s var(--ease); }
.roll > span::after {
  content: attr(data-t);
  position: absolute; left: 0; top: 100%;
  white-space: nowrap;
}
a:hover .roll > span, .roll:hover > span, button:hover .roll > span { transform: translateY(-100%); }

/* ---------- Vertical hairlines (signature grid) ---------- */
.vlines { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.vlines i {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--line);
  transform-origin: top;
}
.vlines i:nth-child(1) { left: 25%; }
.vlines i:nth-child(2) { left: 50%; }
.vlines i:nth-child(3) { left: 75%; }
[data-theme="paper"] .vlines i, [data-theme="lime"] .vlines i { background: var(--line-dark); }
[data-theme="navy"] .vlines i { background: rgba(255,255,255,.09); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--lime); --fg: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  height: 56px; padding: 0 26px;
  background: var(--bg); color: var(--fg);
  font-family: var(--f-body); font-size: 13px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  position: relative; isolation: isolate; overflow: hidden;
  transition: color .5s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--navy);
  transform: translateY(101%);
  transition: transform .6s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: var(--lime); }
.btn__b { display: inline-block; transition: transform .6s var(--ease); font-weight: 300; }
.btn:hover .btn__b:first-child { transform: translateX(-6px); }
.btn:hover .btn__b:last-child { transform: translateX(6px); }
.btn__arrow { transition: transform .6s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(6px); }
.btn--block { width: 100%; }

.btn--ghost { --bg: transparent; --fg: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.btn--ghost::before { background: var(--white); }
.btn--ghost:hover { color: var(--navy); }

.btn--navy { --bg: var(--navy); --fg: var(--lime); }
/* Find my Box: Motive's own button on navy (outline, white text, the orb in its true colours), apart from the lime calls to book */
.btn--ask { --bg: var(--navy); --fg: var(--white); gap: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.btn--ask .orb { --o: 6px; }
.btn--ask::before { background: var(--cobalt); }
.btn--ask:hover { color: var(--white); box-shadow: inset 0 0 0 1px var(--cobalt); }
/* Motive's own button: navy with the moving orb */
.btn--motive { --bg: var(--navy); --fg: var(--white); gap: 14px; }
.btn--motive .orb { --o: 6px; }
.btn--motive::before { background: var(--cobalt); }
.btn--motive:hover { color: var(--white); }
.btn--navy::before { background: var(--cobalt); }
.btn--navy:hover { color: var(--white); }

.btn--cobalt { --bg: var(--cobalt); --fg: var(--white); height: 72px; }
.btn--cobalt::before { background: var(--navy); }
.btn--cobalt:hover { color: var(--lime); }

.btn--outline-light { --bg: transparent; --fg: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.btn--outline-light::before { background: var(--lime); }
.btn--outline-light:hover { color: var(--navy); }

.link-b {
  display: inline-flex; gap: .5em; align-items: center;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cobalt);
}
.link-b span { transition: transform .5s var(--ease); display: inline-block; }
.link-b:hover span:first-child { transform: translateX(-5px); }
.link-b:hover span:last-child { transform: translateX(5px); }
.link-b--lg { font-size: 13px; }
/* touch: a 44px tap area without moving anything (the padding is cancelled by the margin) */
@media (pointer: coarse) { .link-b { padding: 13px 0; margin: -13px 0; } }

.u-link { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease); }
.u-link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ============================================================
   Header, theme follows the section underneath
   ============================================================ */
.hdr {
  --hdr-fg: var(--white);
  --burger-bg: var(--paper); --burger-fg: var(--navy);
  position: fixed; z-index: 50; top: var(--pad); left: var(--pad); right: var(--pad);
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  pointer-events: none;
}
.hdr > * { pointer-events: auto; }
.hdr[data-theme="paper"] { --hdr-fg: var(--navy); --burger-bg: var(--navy); --burger-fg: var(--white); }
.hdr[data-theme="lime"] { --hdr-fg: var(--navy); --burger-bg: var(--navy); --burger-fg: var(--lime); }

/* logo: original colours, not sticky (scrolls away with the hero) */
.site-logo { position: absolute; z-index: 40; top: var(--pad); left: var(--pad); display: flex; align-items: center; height: 48px; color: var(--white); }
.site-logo svg { width: 172px; height: 28px; --logo-accent: var(--cobalt); }
/* the top bar: the links and Ask Motive, also not sticky. They sit at the top of the page and scroll away with it;
   only Book a call and the menu button (in the fixed header) stay. --hdr-right (set in js) keeps room for them. */
.topnav { --hdr-fg: var(--white); position: absolute; z-index: 44; top: var(--pad); left: var(--pad); right: var(--pad); height: 48px; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
.topnav > * { pointer-events: auto; }
[data-page="contact"] .topnav, [data-page="article"] .topnav, [data-page="legal"] .topnav { --hdr-fg: var(--navy); }

.hdr__nav {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; height: 48px; align-items: center; gap: 34px;
  color: var(--hdr-fg);
  font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  transition: opacity .5s var(--ease), transform .7s var(--ease), visibility 0s;
}
.hdr__nav a { position: relative; }
.hdr__nav a::before {
  content: ""; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  background: var(--lime); transform: scale(0); transition: transform .4s var(--ease);
}
.hdr__nav a:hover::before { transform: scale(1); }

.hdr__right { display: flex; }
/* Contact: top right and fixed. On the hero it's an outline in the header's colour; once you scroll past the hero
   (.is-compact, js/main.js: nav) it fills in as the primary lime button. Over lime sections it turns navy */
.hdr__cta {
  display: inline-flex; align-items: center; height: 48px; padding: 0 22px;
  background: var(--lime); color: var(--navy);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease), opacity .4s var(--ease), visibility .4s;
}
.hdr__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); transform: translateY(101%); transition: transform .6s var(--ease); }
.hdr__cta:hover::before { transform: none; }
.hdr__cta:hover { color: var(--lime); }
.hdr[data-theme="lime"] .hdr__cta { background: var(--navy); color: var(--lime); }
.hdr[data-theme="lime"] .hdr__cta::before { background: var(--cobalt); }
.hdr[data-theme="lime"] .hdr__cta:hover { color: var(--white); }
.menu-open .hdr__cta { opacity: 0; visibility: hidden; pointer-events: none; } /* the menu has its own Contact */
.hdr:not(.is-compact) .hdr__cta { background: transparent; color: var(--hdr-fg); box-shadow: inset 0 0 0 1px currentColor; }
.hdr:not(.is-compact) .hdr__cta::before { background: var(--lime); }
.hdr:not(.is-compact) .hdr__cta:hover { color: var(--navy); box-shadow: inset 0 0 0 1px var(--lime); }

/* Burger: hidden on the hero (desktop), slides out once you scroll past it */
.hdr__menu {
  display: inline-flex; align-items: center; gap: 14px;
  height: 48px; overflow: hidden; white-space: nowrap;
  max-width: 0; padding: 0; margin-left: 0; opacity: 0;
  background: var(--burger-bg); color: var(--burger-fg);
  transition: max-width .7s var(--ease), padding .7s var(--ease), margin .7s var(--ease), opacity .4s, background .5s var(--ease), color .5s var(--ease);
}
.hdr.is-compact .hdr__menu, .menu-open .hdr__menu { max-width: 60px; padding: 0 14px; margin-left: 6px; opacity: 1; } /* icon only: a 48px square */
.menu-open .hdr__menu { background: var(--navy); color: var(--white); }
.hdr__burger { width: 20px; height: 8px; position: relative; display: block; flex-shrink: 0; }
.hdr__burger::before, .hdr__burger::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.hdr__burger::before { top: 0; }
.hdr__burger::after { bottom: 0; }
.hdr__burger i { display: none; }
/* the hover nudge only where there's a real pointer: on touch, a tap leaves :hover stuck and it used to block the X */
@media (hover: hover) {
  .hdr__menu:hover .hdr__burger::before { transform: translateX(4px); }
  .hdr__menu:hover .hdr__burger::after { transform: translateX(-4px); }
}
/* open: the lines cross into an X (scoped to the button so it always outranks the hover nudge) */
.menu-open .hdr__menu .hdr__burger::before { transform: translateY(3.25px) rotate(45deg); }
.menu-open .hdr__menu .hdr__burger::after { transform: translateY(-3.25px) rotate(-45deg); }

/* Menu overlay */
.menu { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.menu__scrim { position: absolute; inset: 0; background: rgba(16,24,32,.5); opacity: 0; transition: opacity .6s var(--ease); }
.menu__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%);
  background: var(--paper); color: var(--navy);
  padding: calc(var(--pad) + 48px + 40px) var(--pad) var(--pad);
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease);
}
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  font-family: var(--f-head); font-weight: 200; font-size: clamp(44px, 7vw, 72px);
  letter-spacing: -.04em; line-height: 1.02; color: var(--cobalt);
  transform: translateY(30px); opacity: 0;
  transition: transform .8s var(--ease-out), opacity .6s, color .3s;
}
.menu__links a:hover { color: var(--navy); }
.menu__meta .btn--motive { margin-top: 6px; }
.menu__meta .btn--motive + .btn { margin-top: -6px; } /* the two buttons sit as a pair */
.menu__meta { display: grid; gap: 14px; border-top: 1px solid var(--line-dark); padding-top: 18px; }
.menu__row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.menu-open .menu { pointer-events: auto; }
.menu-open .menu__scrim { opacity: 1; }
.menu-open .menu__panel { clip-path: inset(0 0 0 0); }
.menu-open .menu__links a { transform: none; opacity: 1; }
.menu-open .menu__links a:nth-child(2) { transition-delay: .05s; }
.menu-open .menu__links a:nth-child(3) { transition-delay: .1s; }
.menu-open .menu__links a:nth-child(4) { transition-delay: .15s; }
.menu-open .menu__links a:nth-child(5) { transition-delay: .2s; }

/* ============================================================
   01 Hero
   ============================================================ */
section { position: relative; }
.hero {
  height: 100vh; height: 100svh; min-height: 620px;
  background: var(--navy); color: var(--white);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; background: var(--navy); } /* the duotone is baked into the image files */
/* anchored to the top so the Burj's tip meets the top edge, and the bottom edge lands on buildings.
   The parallax moves the image down, so no extra height is needed */
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; will-change: transform; }
.hero__media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(16,24,32,.44) 0%, rgba(16,24,32,0) 35%, rgba(16,24,32,.7) 100%); }
/* hero: the site duotone; the clear-sky photo and a softer top shade make it a touch lighter */
/* hidden until the intro runs; CSS fallback reveals them if scripts are slow or blocked */
.is-loading .hdr, .is-loading .site-logo, .is-loading .topnav, .is-loading .hero__media img, .is-loading .hero__title, .is-loading .hero__aside, .is-loading .hero__cta, .is-loading .hero__motive, .is-loading .vlines--hero { opacity: 0; animation: gm-show 0s 2.5s forwards; }
@keyframes gm-show { to { opacity: 1; } }
.vlines--hero i:nth-child(1) { left: 50%; bottom: 52%; }
.vlines--hero i:nth-child(2) { left: 75%; bottom: 52%; }
.vlines--hero i { background: rgba(255,255,255,.55); }
.hero__lead { min-width: 0; }
.hero__aside { margin-top: clamp(18px, 2vw, 30px); max-width: 40ch; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.4; font-weight: 300; }
.hero__cta { margin-top: clamp(20px, 2.2vw, 32px); }
.hero__bottom {
  position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + 6px); z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.hero__title {
  font-family: var(--f-head); font-weight: 200;
  font-size: clamp(72px, 10.5vw, 190px);
  line-height: .86; letter-spacing: -.055em;
  margin-left: -.04em;
}
/* Motive panel: the hero's focal point */
.hero__motive {
  width: min(600px, 46vw); flex-shrink: 0; margin-bottom: .6vw;
  display: flex; flex-direction: column; gap: 16px; padding: 22px;
  background: rgba(16,24,32,.8); /* solid tint, no backdrop blur: the hero image moves under it on every scroll frame */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 40px 80px -40px rgba(0,0,0,.6);
}
.hm__bar { display: flex; align-items: center; gap: 12px; }
.hm__name { font-family: var(--f-head); font-weight: 300; font-size: 20px; letter-spacing: -.02em; }
.hm__status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.6); }
.hm__say { font-family: var(--f-head); font-weight: 300; font-size: clamp(24px, 2.2vw, 36px); line-height: 1.15; letter-spacing: -.03em; min-height: 2.3em; }
.hm__shortcuts { display: flex; flex-wrap: wrap; gap: 8px; }
.hm__text .tch { visibility: hidden; }
.hm__text .tch.on { visibility: visible; }
.hm__say { position: relative; }
.hm__caret { position: absolute; left: 0; top: 0; width: .42em; background: var(--lime); animation: caret 1s steps(1) infinite; pointer-events: none; }
.composer--hero { background: rgba(255,255,255,.08); }
/* the compact Motive in the green section shares the hero panel's anatomy */
.assess__motive {
  position: relative; width: 100%;
  display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 3vw, 48px);
  background: var(--navy); color: var(--white);
  box-shadow: 0 40px 80px -40px rgba(16,24,32,.5);
}
.assess__motive .hm__say { font-size: clamp(28px, 3vw, 48px); min-height: 0; }
.assess__motive .composer { height: 68px; }
/* one exchange in place, then the way into the full experience */
.mini.is-replied .composer, .mini.is-replied .hm__shortcuts { display: none; }
.mini.is-replied .hm__say { font-size: clamp(20px, 1.6vw, 26px); line-height: 1.32; min-height: 0; }
.mini__you { display: block; width: fit-content; max-width: 85%; margin: 0 0 14px auto; padding: 10px 14px; background: var(--lime); color: var(--navy); font-family: var(--f-body); font-size: 15px; font-weight: 400; line-height: 1.4; letter-spacing: 0; }
.mini__line { display: block; }
.mini__next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mini__next .btn { height: 52px; font-size: 12px; }
.mini__again { margin-left: auto; color: rgba(255,255,255,.6); transition: color .3s; }
.mini__again:hover { color: var(--lime); }
/* the wipe into the full Motive experience (and out of it, on that page) */
.wipe { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none; visibility: hidden; }
.wipe i { background: var(--cobalt); transform: translateY(101%); margin-right: -1px; }
/* page transitions (js/transition.js): on while leaving; on arrival the page starts covered (the <head> flag adds .pt-in) */
.wipe.is-on, .pt-in .wipe { visibility: visible; pointer-events: auto; }
.pt-in .wipe i { transform: none; }
.pt-in .wipe { animation: wipe-safety 0s 5s forwards; } /* fail-safe if scripts never run */
/* the message that travels from the hero into the conversation */
.flying { position: fixed; z-index: 60; pointer-events: none; background: var(--lime); color: var(--navy); padding: 12px 18px; font-size: 16px; line-height: 1.45; max-width: 420px; }

/* ============================================================
   02 Trust
   ============================================================ */
.trust {
  background: var(--cobalt); color: var(--white);
  padding: clamp(80px, 10vw, 160px) 0 calc(clamp(90px, 14vw, 220px) + clamp(40px, 5vw, 80px));
}
.trust__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 0 var(--pad);
}
.trust__years { grid-column: 1 / 2; display: flex; flex-direction: column; gap: 8px; }
.trust__num {
  font-family: var(--f-head); font-weight: 200;
  font-size: clamp(110px, 15vw, 260px); line-height: .8; letter-spacing: -.07em;
  display: flex; align-items: flex-start; margin-left: -.05em;
}
.trust__num sup { font-size: .14em; letter-spacing: .02em; margin: .3em 0 0 .3em; font-weight: 300; color: var(--lime); }
.trust__statement {
  grid-column: 2 / 5; padding-left: 14px;
  font-family: var(--f-head); font-weight: 200;
  font-size: clamp(38px, 5.2vw, 92px); line-height: 1; letter-spacing: -.045em;
  align-self: end;
}
.words .w { display: inline-block; opacity: .18; transition: none; }

.trust__names { position: relative; z-index: 1; margin-top: clamp(80px, 9vw, 150px); }
.trust__names-head { display: flex; justify-content: space-between; padding: 0 var(--pad) 16px; }
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: clamp(26px, 3vw, 44px) 0; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__list { display: flex; flex-shrink: 0; }
.marquee__list li {
  font-family: var(--f-head); font-weight: 200; white-space: nowrap;
  font-size: clamp(34px, 4.4vw, 76px); letter-spacing: -.04em; line-height: 1;
  display: flex; align-items: center;
  transition: color .4s;
}
.marquee__list li em { font-style: normal; opacity: .45; padding: 0 .12em; }
/* client logos, all white; one height, nudged per shape so a stacked mark and a long wordmark carry the same weight */
.marquee__logo { display: block; height: clamp(42px, 5vw, 86px); width: auto; flex-shrink: 0; }
.marquee__logo--tall { height: clamp(56px, 6.8vw, 116px); }
.marquee__logo--wide { height: clamp(32px, 3.9vw, 66px); }
/* About and Work: the same logos, laid out so every one is always in view. Hairline cells, like the rest of the site;
   7 across on desktop, 4 on tablets, 2 on phones (the last logo takes a full row where it would sit alone) */
.logos {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--line); overflow: hidden;
}
.logos li {
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(120px, 11vw, 180px); padding: 24px clamp(14px, 1.6vw, 28px);
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}
.logos__img { display: block; width: auto; max-width: 100%; height: clamp(40px, 3.6vw, 62px); object-fit: contain; }
.logos__img--tall { height: clamp(54px, 4.8vw, 84px); }
.logos__img--wide { height: clamp(28px, 2.5vw, 44px); }
@media (max-width: 1100px) {
  .logos { grid-template-columns: repeat(4, 1fr); }
  .logos li:last-child { grid-column: span 2; }
  .logos__img { height: clamp(40px, 5.4vw, 58px); }
  .logos__img--tall { height: clamp(54px, 7.4vw, 80px); }
  .logos__img--wide { height: clamp(28px, 3.8vw, 42px); }
}
@media (max-width: 600px) {
  .logos { grid-template-columns: repeat(2, 1fr); }
  .logos li { min-height: 112px; padding: 20px 16px; }
  .logos__img { height: 40px; }
  .logos__img--tall { height: 56px; }
  .logos__img--wide { height: 28px; }
}

.marquee__list li::after {
  content: ""; width: .16em; height: .16em; background: var(--lime);
  margin: 0 .9em; flex-shrink: 0; transform: rotate(45deg);
}

/* Staircase transition (trust → story only) */
.steps {
  position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none;
  display: grid; grid-template-columns: repeat(8, 1fr);
  height: clamp(90px, 14vw, 220px);
}
.steps i { display: block; transform-origin: bottom; margin-right: -1px; }
.steps i:last-child { margin-right: 0; }
.steps--to-navy { bottom: 0; }
.steps--to-navy i { background: var(--navy); }

/* Registration: one more ruled row of the strip, under the names. Stays on the blue, hairlines only */
.reg {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(14px, 1.6vw, 24px);
  padding: clamp(18px, 1.8vw, 26px) var(--pad);
  border-bottom: 1px solid var(--line);
  color: var(--white);
}
.reg__badge { width: 36px; height: 36px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); color: var(--lime); }
.reg__badge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.reg__copy { display: flex; flex-direction: column; gap: 6px; }
.reg__copy .label { color: rgba(255,255,255,.7); }
.reg__t { font-size: clamp(15px, 1.1vw, 18px); font-weight: 400; line-height: 1.3; }
.reg__no { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--line); }
.reg__no .label { color: rgba(255,255,255,.7); }
.reg__no b { font-family: var(--f-head); font-weight: 300; font-size: clamp(20px, 1.6vw, 28px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* WhatsApp: fixed bottom right, a 48px square like the menu button. Slides in once the header goes compact;
   on hover the label opens out of the square and rolls, like Book a call */
.wa {
  position: fixed; z-index: 44; right: var(--pad); bottom: var(--pad);
  display: inline-flex; align-items: center; height: 48px;
  background: var(--navy); color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transform: translateY(calc(100% + var(--pad) + 8px));
  transition: transform .8s var(--ease), box-shadow .4s var(--ease), background .5s var(--ease);
}
.hdr.is-compact ~ .wa { transform: none; }
.menu-open .wa { transform: translateY(calc(100% + var(--pad) + 8px)); } /* the menu has its own ways to reach us */
.wa__ic { width: 48px; height: 48px; display: grid; place-items: center; flex-shrink: 0; color: var(--lime); }
.wa__ic svg { width: 18px; height: 18px; fill: currentColor; }
.wa__t { display: inline-flex; max-width: 0; overflow: hidden; transition: max-width .7s var(--ease), padding .7s var(--ease); }
/* the label slides out on hover with a mouse only: on a touch screen a tap just opens WhatsApp */
.wa:focus-visible { box-shadow: inset 0 0 0 1px var(--lime); }
.wa:focus-visible .wa__t { max-width: 300px; padding-right: 20px; }
@media (hover: hover) and (pointer: fine) {
  .wa:hover { box-shadow: inset 0 0 0 1px var(--lime); }
  .wa:hover .wa__t { max-width: 300px; padding-right: 20px; }
}
.wa:focus-visible { outline: none; }

/* ============================================================
   03 Story: native scroll. The beats scroll past; the visual stays alongside (CSS sticky)
   and plays each beat's animation as its text reaches the middle of the screen.
   ============================================================ */
.story { background: var(--navy); color: var(--white); }
.story__pin {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 0 var(--pad);
}
.story__top {
  position: relative; z-index: 2; width: min(100%, calc(66vh * 1.2)); margin-left: auto;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
}
.story__count { text-align: right; }
.story__count b { color: var(--lime); font-weight: 600; }
.story__progress { height: 1px; background: rgba(255,255,255,.14); position: relative; }
.story__progress i { position: absolute; inset: 0; background: var(--lime); transform-origin: left; transform: scaleX(0); will-change: transform; } /* set every scroll frame (js) */

.story__text { grid-column: 1 / 3; position: relative; z-index: 2; }
.beat {
  min-height: 100vh; min-height: 100svh; padding-right: 4vw;
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
  opacity: .18; transition: opacity .7s var(--ease-out);
}
.beat.is-active { opacity: 1; }
.beat__title {
  font-family: var(--f-head); font-weight: 200;
  font-size: clamp(40px, min(5.6vw, 10vh), 104px); line-height: .96; letter-spacing: -.05em;
}
.beat__body { font-size: clamp(16px, 1.25vw, 20px); color: rgba(255,255,255,.66); max-width: 30ch; }

.story__stage {
  grid-column: 3 / 5; position: sticky; top: 0; z-index: 1; align-self: start;
  height: 100vh; height: 100svh; padding-left: 14px;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
}

/* ---------- Story visual: stepped blocks, thin numerals, hairline grid, the Box ---------- */
.viz {
  --g: 6%; /* inner gutter */
  position: relative; overflow: hidden;
  width: min(100%, calc(66vh * 1.2)); aspect-ratio: 6 / 5; margin-left: auto;
  container-type: inline-size;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--white);
}
.viz__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 10% 12%; }
.viz .label { font-size: max(9px, 1.6cqw); }

.viz__head { position: absolute; left: var(--g); top: var(--g); }
.viz__big { display: flex; align-items: flex-start; font-family: var(--f-head); font-weight: 200; line-height: .8; letter-spacing: -.07em; }
.viz__num { font-size: 21cqw; font-variant-numeric: tabular-nums; }
.viz__unit { font-size: 7cqw; color: var(--lime); margin: .3em 0 0 .15em; letter-spacing: 0; }
.viz__cap { display: block; margin-top: 2.4cqw; color: rgba(255,255,255,.6); }
.viz__word { position: absolute; left: var(--g); top: var(--g); font-family: var(--f-head); font-weight: 200; font-size: 15cqw; line-height: .9; letter-spacing: -.06em; }
.viz__word i { font-style: normal; color: var(--lime); }

/* stepped bars: same shape as the staircase section transitions */
.viz__bars { position: absolute; left: var(--g); right: var(--g); top: 40%; bottom: 12%; display: grid; grid-template-columns: repeat(10, 1fr); gap: 1.2cqw; }
.viz__bars i { position: relative; }
.viz__bars b { position: absolute; inset: 0; background: var(--cobalt); transform-origin: 50% 100%; }
.viz__flat { position: absolute; right: var(--g); width: calc((100% - 2 * var(--g)) * .3); bottom: calc(12% + 48% * .74); border-top: 1.5px solid var(--lime); transform-origin: 0 50%; }
.viz__flat .label { position: absolute; right: 0; bottom: 2.2cqw; white-space: nowrap; color: var(--lime); }
.viz__flat i { position: absolute; right: -5px; top: -5.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); }
.viz__flat i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--lime); animation: vizpulse 1.6s var(--ease-out) infinite; }
@keyframes vizpulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.story:not(.is-inview) .viz__flat i::after { animation-play-state: paused; }

/* beat 2: symptom slab over the real causes */
.viz__slab { position: absolute; left: var(--g); right: var(--g); top: var(--g); height: 24%; background: var(--cobalt); padding: 2.6cqw 3cqw; display: flex; flex-direction: column; justify-content: space-between; }
.viz__slab .label { color: rgba(255,255,255,.7); }
.viz__slab b { font-family: var(--f-head); font-weight: 200; font-size: 7.4cqw; letter-spacing: -.04em; line-height: 1; }
.viz__water { position: absolute; left: 0; right: 0; top: 37%; border-top: 1px dashed rgba(255,255,255,.45); transform-origin: 0 50%; }
.viz__water .label { position: absolute; left: var(--g); top: 1.4cqw; color: rgba(255,255,255,.55); }
.viz__causes { position: absolute; left: var(--g); right: var(--g); top: 46%; bottom: var(--g); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; align-items: end; }
.viz__cause { position: relative; height: var(--h); border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.03); padding: 2cqw; color: var(--white); }
.viz__cause b { font-family: var(--f-head); font-weight: 300; font-size: max(13px, 3.4cqw); letter-spacing: -.02em; }
.viz__realtag { position: absolute; left: 2cqw; bottom: 2cqw; color: var(--navy); }

/* beat 3: eleven drivers, scored */
.viz__tiles { position: absolute; inset: var(--g); display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1.2cqw; perspective: 900px; }
.viz__tile { position: relative; border: 1px solid rgba(255,255,255,.16); padding: 1.8cqw; display: flex; flex-direction: column; justify-content: space-between; color: var(--white); }
.viz__tl { font-size: max(10px, 1.9cqw); font-weight: 400; line-height: 1.2; opacity: .8; }
.viz__tile b { font-family: var(--f-head); font-weight: 200; font-size: 7cqw; line-height: .9; letter-spacing: -.05em; }
.viz__tile b small { font-size: .38em; letter-spacing: 0; opacity: .6; margin-left: .1em; }
.viz__rank { position: absolute; right: 1.6cqw; bottom: 1.6cqw; font-style: normal; font-family: var(--f-head); font-weight: 300; font-size: max(13px, 3.2cqw); letter-spacing: -.03em; }
.viz__tile--score { background: var(--cobalt); border-color: var(--cobalt); }
.viz__scan { position: absolute; top: -2%; bottom: -2%; left: 0; width: 2px; background: var(--lime); box-shadow: 0 0 18px 2px rgba(136,242,61,.55); z-index: 2; }

/* beat 4: the Box, growth resumes */
.viz__cubewrap { position: absolute; left: 62%; right: 0; top: 0; height: 42%; }
.viz .cube-scene { left: 50%; top: 56%; }
.viz .cube { --s: 15cqw; }
.viz__tags { position: absolute; left: var(--g); right: var(--g); bottom: 3.2%; display: flex; justify-content: space-between; color: var(--lime); }

/* ============================================================
   03b Assessment (lime)
   ============================================================ */
.assess {
  background: var(--lime); color: var(--navy);
  padding: clamp(120px, 12vw, 200px) var(--pad) clamp(80px, 8vw, 140px);
  z-index: 2;
}
.assess__head { position: relative; display: flex; justify-content: space-between; margin-bottom: clamp(40px, 5vw, 80px); }
.assess__intro { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; margin-bottom: clamp(36px, 4vw, 64px); }
.assess__title { grid-column: 1 / 4; font-family: var(--f-head); font-weight: 200; font-size: clamp(56px, 8vw, 150px); line-height: .9; letter-spacing: -.055em; margin-left: -.04em; }
.assess__lede { grid-column: 4 / 5; padding-left: 14px; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.45; max-width: 30ch; }

/* ============================================================
   Motive: Growth Motive's conversational assistant
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the orb: four blocks (the Box motif). Breathes when idle, turns while thinking */
.orb { --o: 7px; display: inline-grid; grid-template-columns: repeat(2, var(--o)); gap: calc(var(--o) * .42); flex-shrink: 0; }
.orb i { width: var(--o); height: var(--o); background: var(--lime); animation: orb 2.6s var(--ease) infinite; }
.orb i:nth-child(2) { background: var(--white); animation-delay: .3s; }
.orb i:nth-child(3) { background: var(--white); animation-delay: .9s; }
.orb i:nth-child(4) { animation-delay: .6s; }
.orb--xl { --o: 22px; }
@keyframes orb { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.4); opacity: .4; } }
/* inside the conversation the mark is static; the typing dots show Motive is thinking */
.motive .orb i { animation: none; }

.motive {
  position: relative; margin-top: clamp(28px, 3vw, 48px);
  background: var(--navy); color: var(--white);
  display: flex; flex-direction: column; height: clamp(640px, 84vh, 820px);
  box-shadow: 0 50px 90px -50px rgba(16,24,32,.55);
}
.motive__bar { display: flex; align-items: center; gap: 18px; padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.motive__brand { display: flex; align-items: center; gap: 12px; }
.motive__name { font-family: var(--f-head); font-weight: 300; font-size: 22px; letter-spacing: -.02em; }
.motive__by { color: rgba(255,255,255,.45); }
.motive__status { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: rgba(255,255,255,.6); }
.motive__status i, .hm__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(136,242,61,.2); }
.motive__new { color: var(--lime); }
.motive__main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.motive__chat { min-width: 0; min-height: 0; display: flex; flex-direction: column; } /* min-width 0: the scrolling shortcut row must not widen the column */

/* empty state: a greeting, like an AI product home screen */
.motive__hello { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 32px 24px 8px; text-align: center; }
.motive__q { font-family: var(--f-head); font-weight: 200; font-size: clamp(44px, 5.6vw, 96px); line-height: .95; letter-spacing: -.055em; max-width: 12ch; text-wrap: balance; }
.motive__intro { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; color: rgba(255,255,255,.7); max-width: 40ch; }
.motive__thread { position: relative; /* clips its absolutely placed children (sr-only labels), which would otherwise stretch the page */ display: none; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 30px 0 8px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.motive.is-live .motive__hello { display: none; }
.motive.is-live .motive__thread { display: block; }
.motive__thread > *, .motive__dock { width: min(780px, calc(100% - 48px)); margin-left: auto; margin-right: auto; }
.motive__dock { padding: 10px 0 14px; display: flex; flex-direction: column; gap: 10px; }
.motive__shortcuts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.motive.is-live .motive__shortcuts { justify-content: flex-start; }
.motive__shortcuts:empty { display: none; }
.shortcut { height: 38px; padding: 0 14px; font-size: 13.5px; color: rgba(255,255,255,.88); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transition: color .3s, box-shadow .3s; }
.sc__s { display: none; }
.shortcut:hover, .shortcut:focus-visible { color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); outline: 0; }
.composer { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 8px 0 20px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); transition: box-shadow .35s var(--ease), background .35s, opacity .35s; }
.composer:focus-within { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--lime), 0 0 0 4px rgba(136,242,61,.14); }
.composer__input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--white); font: inherit; font-size: 16px; }
.composer__input::placeholder { color: rgba(255,255,255,.5); }
.composer__send { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; background: var(--lime); color: var(--navy); font-size: 19px; }
.composer__send span { transition: transform .4s var(--ease); }
.composer__send:hover span { transform: translateX(3px); }
.motive.is-busy .composer { opacity: .55; }
.motive.is-busy .composer__send { pointer-events: none; }
.motive__fine { font-size: 12px; color: rgba(255,255,255,.4); text-align: center; }

/* conversation */
.turn { display: flex; gap: 14px; margin-bottom: 24px; }
.turn--user { justify-content: flex-end; }
.turn--motive > .orb { margin-top: 9px; align-self: flex-start; }
.turn--motive.is-cont { padding-left: 31px; margin-top: -10px; } /* lines up under the first reply's text */
.turn__body { flex: 1; min-width: 0; }
.bubble { max-width: 80%; background: var(--lime); color: var(--navy); padding: 12px 18px; font-size: 16px; line-height: 1.45; }
.say { font-family: var(--f-head); font-weight: 300; font-size: clamp(19px, 1.45vw, 23px); line-height: 1.38; letter-spacing: -.012em; }
.say + .say { margin-top: 10px; }
.kicker { display: block; margin-bottom: 8px; color: var(--lime); }
.aside { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.6); }
.caret { display: inline-block; width: .45em; height: .95em; margin-left: 3px; vertical-align: -.1em; background: var(--lime); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.thinking { display: flex; gap: 5px; padding: 12px 0; }
.thinking i { width: 8px; height: 8px; background: var(--lime); animation: think 1s var(--ease) infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; } .thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes think { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }
/* inline answer pickers */
.picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.picker button {
  min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 9px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); font-size: 14px; text-align: left;
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s;
}
.picker button b { font-family: var(--f-head); font-weight: 300; font-size: 18px; color: var(--lime); transition: color .3s; }
.picker button:hover, .picker button:focus-visible, .picker button[aria-pressed="true"] { background: var(--lime); color: var(--navy); box-shadow: none; outline: 0; }
.picker button:hover b, .picker button:focus-visible b, .picker button[aria-pressed="true"] b { color: var(--navy); }
.picker .picker__done { background: var(--white); color: var(--navy); box-shadow: none; }
.picker.is-done button { pointer-events: none; opacity: .3; }
.picker.is-done button.is-picked, .picker.is-done button[aria-pressed="true"] { opacity: 1; }
/* rich cards */
.mcard { margin-top: 16px; padding: 22px 22px 20px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); }
.mcard__head { display: flex; justify-content: space-between; gap: 12px; color: rgba(255,255,255,.55); margin-bottom: 12px; }
.mcard__big { font-family: var(--f-head); font-weight: 200; font-size: clamp(64px, 6vw, 96px); line-height: .9; letter-spacing: -.06em; }
.mcard__big small { font-size: .3em; letter-spacing: 0; color: rgba(255,255,255,.55); }
.mcard__lede { margin: 10px 0 6px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.85); }
.drow { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 15px; }
.drow em { font-style: normal; font-family: var(--f-head); font-weight: 300; color: var(--lime); }
.drow small { grid-column: 2 / -1; margin-top: -4px; font-size: 13.5px; color: rgba(255,255,255,.55); }
.drow .meter i.on, .engine .meter i.on { background: var(--lime); box-shadow: none; }
.prog { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.prog > div { padding: 16px; background: rgba(255,255,255,.05); }
.prog .label { display: block; margin-bottom: 8px; color: var(--lime); }
.prog p { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.82); }
.mcard__hyp { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px; margin-top: 12px; padding: 16px; background: var(--lime); color: var(--navy); }
.mcard__hyp .label { grid-column: 1 / -1; color: rgba(16,24,32,.65); }
.mcard__hyp b { font-family: var(--f-head); font-weight: 300; font-size: 24px; letter-spacing: -.02em; }
.mcard__price { font-family: var(--f-head); font-weight: 300; font-size: 20px; letter-spacing: -.02em; }
.mcard__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mcard__actions .btn { height: 50px; font-size: 12px; }

/* live diagnosis panel */
.engine { border-left: 1px solid rgba(255,255,255,.1); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.engine__top { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
.engine__count b { color: var(--lime); font-weight: 600; }
.engine__list { list-style: none; }
.engine__note { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.55); }
.engine__list li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 14px; color: rgba(255,255,255,.62); transition: color .4s var(--ease); }
.engine__list li.is-scored { color: rgba(255,255,255,.9); }
.engine__list li.is-testing { color: var(--white); }
.engine__list li.is-testing span::before { content: "→ "; color: var(--lime); }
.engine__list li.is-drag { color: var(--lime); }
.meter { display: flex; gap: 3px; }
.meter i { width: 12px; height: 7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); transition: background .4s var(--ease), box-shadow .4s; }
.engine__list li:not(.is-drag) .meter i.on { background: var(--white); }


/* ============================================================
   04 Services
   ============================================================ */
.services { background: var(--paper); padding: clamp(120px, 12vw, 200px) 0 clamp(100px, 10vw, 160px); }
.vlines--svc i:nth-child(1) { left: 33.333%; bottom: auto; height: clamp(200px, 22vw, 380px); }
.vlines--svc i:nth-child(2) { left: 50%; }
.vlines--svc i:nth-child(3) { left: 66.666%; bottom: auto; height: clamp(200px, 22vw, 380px); }
.services__title {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  font-family: var(--f-head); font-weight: 200; color: var(--cobalt);
  font-size: clamp(56px, 9.4vw, 172px); line-height: .9; letter-spacing: -.06em;
  padding: 0 var(--pad);
}
.services__title .ln--r { padding-left: 14px; }
.services__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(60px, 7vw, 120px); }
.services__visual { padding: 0 var(--pad); }
.boxviz {
  position: sticky; top: calc(var(--pad) + 48px + 24px);
  aspect-ratio: 1 / 1; max-height: calc(100vh - 140px); width: min(100%, calc(100vh - 140px));
  margin: 0 auto;
  background: var(--cobalt); color: var(--white); overflow: hidden;
}
.boxviz__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 12.5% 12.5%; }
.boxviz__tl { position: absolute; left: 18px; top: 18px; }
.boxviz__tr { position: absolute; right: 18px; top: 18px; }
.boxviz__tr b { color: var(--lime); }
.boxviz__name {
  position: absolute; left: 18px; right: 18px; bottom: 10px; overflow: hidden;
  font-family: var(--f-head); font-weight: 200; font-size: clamp(40px, 5.4vw, 96px); letter-spacing: -.05em; line-height: 1.1;
  height: 1.12em; /* fixed slot: names swap inside it, never stack */
}
.boxviz__name span { position: absolute; left: 0; bottom: 0; white-space: nowrap; }
.cube-scene { position: absolute; left: 50%; top: 44%; width: 0; height: 0; perspective: 1400px; }
.cube {
  --s: clamp(120px, 14vw, 230px);
  position: absolute; width: var(--s); height: var(--s); left: calc(var(--s) / -2); top: calc(var(--s) / -2);
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(38deg);
}
.cube .f { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.85); background: rgba(16,24,32,.06); }
.cube .f--front { transform: translateZ(calc(var(--s) / 2)); }
.cube .f--back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cube .f--right { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cube .f--left { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cube .f--top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: rgba(136,242,61,.9); border-color: var(--lime); }
.cube .f--bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.cube-shadow { position: absolute; width: clamp(160px, 18vw, 300px); height: 30px; left: 50%; top: calc(clamp(120px, 14vw, 230px) * .9); transform: translateX(-50%); background: radial-gradient(closest-side, rgba(16,24,32,.45), transparent); filter: blur(4px); }

/* ---------- Box animations: each Box acts out what it offers ---------- */
.boxviz .cube__body, .cube__stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.boxviz .cube .f { display: grid; place-items: center; }
.f__y { font-style: normal; font-family: var(--f-head); font-weight: 200; font-size: calc(var(--s) * .26); letter-spacing: -.05em; color: var(--navy); opacity: 0; }
/* 3D extras live inside the body so they share its orientation */
.cuboid { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.cuboid i { position: absolute; border: 1px solid rgba(255,255,255,.85); background: rgba(16,24,32,.08); }
.cuboid i.t { background: var(--lime); border-color: var(--lime); }
.cuboid--lime i { background: rgba(136,242,61,.22); border-color: var(--lime); }
.cuboid--plate i { background: var(--lime); border-color: rgba(16,24,32,.55); } /* dark edges so each tier reads */
.ripple { position: absolute; left: 50%; top: 50%; border: 1.5px solid var(--lime); }
/* BusinessBox: each year face fills like a bar */
.f__fill { position: absolute; inset: 0; background: var(--lime); transform-origin: 50% 100%; transform: scaleY(0); }
.f__y { position: relative; z-index: 1; align-self: start; margin-top: 8%; color: var(--white); }
/* 2D overlay, centred on the cube */
.boxfx { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; z-index: 1; }
.fx-dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: var(--lime); }
.fx-dot:nth-child(3n) { background: var(--white); }
.fx-loop { position: absolute; border: 1px dashed rgba(255,255,255,.55); border-radius: 50%; }
.fx-count { position: absolute; left: 0; top: 0; font-family: var(--f-head); font-weight: 200; font-size: clamp(28px, 3.4vw, 56px); letter-spacing: -.04em; color: var(--lime); white-space: nowrap; }

.services__list { padding: 0 var(--pad) 0 14px; display: flex; flex-direction: column; min-width: 0; } /* min-width: a wide row inside (the Services tabs) scrolls, never widens the page */
.services__intro { font-size: clamp(16px, 1.25vw, 20px); max-width: 32ch; margin-bottom: 40px; color: rgba(16,24,32,.7); }
.acc { border-top: 1px solid var(--cobalt); margin-bottom: 32px; }
.acc__item { border-bottom: 1px solid var(--cobalt); }
.acc__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; text-align: left; color: var(--cobalt);
}
.acc__t {
  font-family: var(--f-head); font-weight: 300; font-size: clamp(28px, 2.6vw, 44px); letter-spacing: -.035em; line-height: 1;
  transition: transform .6s var(--ease);
}
.acc__head:hover .acc__t { transform: translateX(14px); }
.acc__x { width: 18px; height: 18px; position: relative; flex-shrink: 0; transition: transform .6s var(--ease); }
.acc__x::before, .acc__x::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; }
.acc__x::before { width: 18px; height: 1.5px; margin: -.75px 0 0 -9px; }
.acc__x::after { width: 1.5px; height: 18px; margin: -9px 0 0 -.75px; }
.acc__item.is-open .acc__x { transform: rotate(135deg); }
.acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.acc__item.is-open .acc__body { grid-template-rows: 1fr; }
.acc__inner {
  overflow: hidden; min-height: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px;
}
.acc__inner > div { padding-bottom: 20px; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .7s var(--ease-out); }
.acc__inner > div .label { color: rgba(16,24,32,.5); }
.acc__inner p { font-size: 17px; line-height: 1.4; max-width: 26ch; }
.acc__inner .link-b { grid-column: 2 / 3; padding-bottom: 28px; opacity: 0; transition: opacity .5s; }
.acc__item.is-open .acc__inner > div, .acc__item.is-open .acc__inner .link-b { opacity: 1; transform: none; transition-delay: .15s; }

/* ============================================================
   05 Proof
   ============================================================ */
.proof { background: var(--navy); color: var(--white); padding: clamp(120px, 12vw, 200px) 0 clamp(100px, 10vw, 160px); }
.vlines--proof i:nth-child(1) { left: 33.333%; }
.vlines--proof i:nth-child(2) { left: 66.666%; }
.proof__head { position: relative; z-index: 1; display: flex; justify-content: space-between; padding: 0 var(--pad); }
.proof__title {
  position: relative; z-index: 1; text-align: center;
  font-family: var(--f-head); font-weight: 200;
  font-size: clamp(60px, 10vw, 188px); line-height: .9; letter-spacing: -.06em;
  margin: clamp(60px, 7vw, 120px) auto clamp(80px, 9vw, 160px);
  max-width: 9ch; padding: 0 var(--pad);
}
.proof__title .ln:last-child > span { color: var(--lime); }
.proof__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.12); }
.case { padding: 14px var(--pad) 0; display: flex; flex-direction: column; }
.case + .case { padding-left: 14px; }
.case:nth-child(2) { margin-top: clamp(40px, 6vw, 100px); }
.case:nth-child(3) { margin-top: clamp(16px, 2vw, 40px); }
.case__meta { display: flex; justify-content: space-between; color: rgba(255,255,255,.55); }
.case__client {
  font-family: var(--f-head); font-weight: 300; font-size: clamp(26px, 2.3vw, 40px); letter-spacing: -.035em; line-height: 1.05;
  margin: clamp(40px, 5vw, 80px) 0 20px; min-height: 2.1em;
}
.case__client em { font-style: normal; opacity: .4; }
.case__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy-2); }
.case__zoom { position: absolute; inset: 0; transition: transform 1.2s var(--ease-out), background-color .6s var(--ease); }
.case__zoom img { width: 100%; height: 100%; object-fit: cover; }
.case:hover .case__zoom { transform: scale(1.06); background-color: var(--lime); }

.case__stat {
  position: absolute; left: 18px; bottom: 6px; z-index: 2;
  font-family: var(--f-head); font-weight: 200; font-size: clamp(80px, 9vw, 168px); letter-spacing: -.07em; line-height: 1;
  display: flex; align-items: baseline; color: var(--white);
  transition: color .6s var(--ease);
}
.case__stat small { font-size: .3em; letter-spacing: 0; margin-left: .1em; }
.case__result { margin-top: 18px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.case__what { margin-top: 8px; color: rgba(255,255,255,.6); max-width: 30ch; }
.proof__cta { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: clamp(80px, 8vw, 140px); }

/* ============================================================
   06 Founder
   ============================================================ */
.founder { background: var(--paper); padding: clamp(120px, 12vw, 200px) 0 clamp(100px, 10vw, 180px); }
.founder__head { position: relative; z-index: 1; display: flex; justify-content: space-between; padding: 0 var(--pad); margin-bottom: clamp(48px, 6vw, 100px); }
.founder__intro { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; margin-bottom: clamp(64px, 8vw, 140px); }
.founder__quote {
  grid-column: 1 / 4; padding: 0 var(--pad);
  font-family: var(--f-head); font-weight: 200; color: var(--cobalt);
  font-size: clamp(48px, 6.4vw, 120px); line-height: .96; letter-spacing: -.05em;
  max-width: 12ch;
}
.founder__aside { grid-column: 4 / 5; padding: 0 var(--pad) 0 14px; display: flex; flex-direction: column; gap: 20px; }
.founder__aside p { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.4; max-width: 24ch; }

.founder__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; }
.fcard { display: grid; grid-template-columns: 1fr 1fr; padding: 0 var(--pad); gap: 0; }
.fcard + .fcard { padding-left: 14px; margin-top: clamp(40px, 6vw, 110px); }
.fcard__photo { padding-right: 14px; }
.fcard__copy { padding: 0 14px 0 14px; display: flex; flex-direction: column; gap: 14px; }
.fcard__copy .label { color: rgba(16,24,32,.55); }
.fcard__name { font-family: var(--f-head); font-weight: 300; font-size: clamp(28px, 2.4vw, 42px); letter-spacing: -.035em; line-height: 1.05; margin-top: 6px; }
.fcard__tag { font-family: var(--f-head); font-weight: 200; font-size: clamp(20px, 1.6vw, 28px); letter-spacing: -.02em; line-height: 1.2; color: var(--cobalt); margin-bottom: 10px; }
.fcard__body { font-size: 16px; line-height: 1.5; color: rgba(16,24,32,.78); max-width: 30ch; }
.portrait {
  position: relative; aspect-ratio: 4 / 5; background: var(--cobalt); overflow: hidden;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 12.5%);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait__mono {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--f-head); font-weight: 200; font-size: clamp(64px, 7vw, 140px); letter-spacing: -.08em; color: var(--white); line-height: 1;
}
.crop { position: absolute; width: 18px; height: 18px; border-color: var(--lime); border-style: solid; border-width: 0; }
.crop--tl { left: 14px; top: 14px; border-left-width: 1.5px; border-top-width: 1.5px; }
.crop--tr { right: 14px; top: 14px; border-right-width: 1.5px; border-top-width: 1.5px; }
.crop--bl { left: 14px; bottom: 14px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.crop--br { right: 14px; bottom: 14px; border-right-width: 1.5px; border-bottom-width: 1.5px; }

/* ============================================================
   07 Book
   ============================================================ */
.book { background: var(--cobalt); color: var(--white); padding: clamp(120px, 12vw, 200px) 0 clamp(100px, 10vw, 160px); }
.book__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); }
.book__copy { grid-column: 1 / 3; padding: 0 var(--pad); display: flex; flex-direction: column; gap: 28px; }
.book__copy .label { color: var(--lime); }
.book__title {
  font-family: var(--f-head); font-weight: 200;
  font-size: clamp(54px, 7vw, 128px); line-height: .92; letter-spacing: -.055em;
  max-width: 10ch;
}
.book__lede { font-size: clamp(16px, 1.25vw, 20px); max-width: 34ch; color: rgba(255,255,255,.82); }
.book__usp { max-width: 34ch; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.25); font-family: var(--f-head); font-weight: 300; font-size: clamp(19px, 1.5vw, 24px); line-height: 1.35; letter-spacing: -.01em; color: var(--white); }
.book__usp b { font-weight: 300; color: var(--lime); }
/* Seton himself, small: a square crop beside the line that says you talk to him */
.book__usp { display: flex; align-items: center; gap: 16px; }
.book__face { width: 56px; height: 56px; flex-shrink: 0; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.book__alt { font-size: 15px; color: rgba(255,255,255,.7); }
.book__alt a { color: var(--white); }

/* Seton's Calendly sits straight on the cobalt: its own card is the frame */
.cal { grid-column: 3 / 5; margin: 0 var(--pad) 0 14px; display: flex; flex-direction: column; gap: 10px; }
.cal__head { display: flex; justify-content: space-between; gap: 12px; color: rgba(255,255,255,.7); }
.cal__head .label:first-child { color: var(--lime); }

/* the embedded Calendly (js/booking.js): sized to its content, with a quiet placeholder while it loads */
.gm-cal { position: relative; height: 700px; max-width: 640px; transition: height .35s var(--ease-out); } /* js sets the height from Calendly's own reports */
/* Above ~650px Calendly floats its own card (inset, with a gap above); below it, it draws flush, edge to edge from the
   top. Keeping it just under that width means it always lines up with the column, and the row above it matches. */
.cal__head { max-width: 640px; }
.gm-cal iframe { display: block; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .6s var(--ease-out); }
.gm-cal.is-ready iframe { opacity: 1; }
.gm-cal.is-warm iframe { position: fixed; left: 0; top: 0; width: var(--cal-w, 100%); height: 700px; opacity: .01; pointer-events: none; z-index: -1; transition: none; } /* loading, out of sight but on screen (js/booking.js) */
/* the placeholder: the calendar's own shape, quiet, until Calendly has drawn it; then it fades out under it */
.gm-cal__wait { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 22px; padding: clamp(20px, 3vw, 40px) 0; color: currentColor; transition: opacity .45s var(--ease-out); pointer-events: none; }
.gm-cal.is-ready .gm-cal__wait { opacity: 0; }
.gm-cal__wait .label { opacity: .55; }
.gm-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; max-width: 520px; }
.gm-cal__grid i { aspect-ratio: 1; border: 1px solid currentColor; opacity: .12; animation: gm-cal-pulse 1.6s ease-in-out infinite; }
.gm-cal__grid i:nth-child(7n+2) { animation-delay: .1s; } .gm-cal__grid i:nth-child(7n+3) { animation-delay: .2s; } .gm-cal__grid i:nth-child(7n+4) { animation-delay: .3s; }
.gm-cal__grid i:nth-child(7n+5) { animation-delay: .4s; } .gm-cal__grid i:nth-child(7n+6) { animation-delay: .5s; } .gm-cal__grid i:nth-child(7n) { animation-delay: .6s; }
@keyframes gm-cal-pulse { 0%, 100% { opacity: .1; } 50% { opacity: .28; } }
@media (prefers-reduced-motion: reduce) { .gm-cal__grid i { animation: none; } }
.gm-cal .calendly-inline-widget, .gm-cal > div { min-width: 0 !important; }
/* the calendar couldn't load: a short line and a primary button to Seton's calendar, in the calendar's place */
.gm-cal__fail { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; height: 100%; min-height: 240px; padding: 24px 0; }
.gm-cal__fail p { font-size: 16px; opacity: .75; }
.gm-cal:has(.gm-cal__fail) { height: auto !important; }
/* after booking (js/booking.js: confirm): the calendar's place, in the colours of whatever it sits on */
.gm-cal.is-booked { height: auto !important; }
.gm-booked { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.4vw, 36px) 0; outline: none; }
.gm-booked__who { display: flex; align-items: center; gap: 14px; }
.gm-booked__who img { width: 56px; height: 56px; object-fit: cover; flex-shrink: 0; }
.gm-booked__who > span { display: flex; flex-direction: column; gap: 4px; }
.gm-booked__who .label { color: var(--cobalt); }
.gm-booked__who b { font-weight: 500; font-size: 15px; }
.gm-booked__t { margin-top: 10px; font-family: var(--f-head); font-weight: 200; font-size: clamp(40px, 4vw, 64px); line-height: .95; letter-spacing: -.045em; }
.gm-booked__inv { max-width: 40ch; font-size: 16px; line-height: 1.5; opacity: .8; }
.gm-booked__prep { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 16px 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; border-color: rgba(127,127,127,.3); }
.gm-booked__prep .label { opacity: .6; }
.gm-booked__prep p { font-size: 16px; line-height: 1.45; max-width: 44ch; }
.gm-booked__wa { align-self: flex-start; margin-top: 4px; }
/* on the blue (Book a call sections) and the navy (Motive), the cobalt accents switch to lime */
.book .gm-booked__who .label, .mbook .gm-booked__who .label, .motive .gm-booked__who .label, .book .gm-booked__wa, .mbook .gm-booked__wa, .motive .gm-booked__wa { color: var(--lime); }

/* ============================================================
   Footer
   ============================================================ */
.ftr { position: relative; background: var(--navy); color: var(--white); padding: clamp(80px, 8vw, 140px) 0 var(--pad); overflow: hidden; }
.vlines--ftr i:nth-child(1) { left: 50%; }
.vlines--ftr i:nth-child(2) { left: 75%; }
.ftr__grid, .ftr__mid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); }
.ftr__mark { grid-column: 1 / 3; padding: 0 var(--pad); }
.ftr__mark { display: flex; flex-direction: column; gap: 36px; align-items: flex-start; }
.ftr__logo { width: min(100%, 220px); aspect-ratio: 230 / 114; color: var(--white); --logo-accent: var(--cobalt); display: block; }
.link-b--lime { color: var(--lime); }
.ftr__col { padding: 0 var(--pad) 0 14px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; align-items: flex-start; }
.ftr__col .label { color: rgba(255,255,255,.5); margin-bottom: 10px; }
.ftr__col--news { gap: 14px; }
.ftr__news-t { color: rgba(255,255,255,.75); max-width: 28ch; }
.news { display: flex; width: 100%; border-bottom: 1px solid rgba(255,255,255,.4); transition: border-color .4s; }
.news:focus-within { border-color: var(--lime); }
.news input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--white); font: inherit; font-size: 16px; padding: 14px 0; }
.news input::placeholder { color: rgba(255,255,255,.45); }
.news button { width: 44px; font-size: 20px; transition: transform .4s var(--ease), color .3s; }
.news button:hover { transform: translateX(4px); color: var(--lime); }
.news__msg { color: var(--lime); min-height: 16px; }
.ftr__mid { margin-top: clamp(60px, 6vw, 100px); }
.ftr__mid .ftr__col:first-child { grid-column: 3 / 4; }
.ftr__muted { color: rgba(255,255,255,.55); font-size: 14px; }
.ftr__muted b { font-weight: 500; color: var(--white); font-variant-numeric: tabular-nums; }
.ftr__base {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 24px var(--pad) 0; margin-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.5);
}
.ftr__base a:hover { color: var(--lime); }
.totop { white-space: nowrap; }

/* ============================================================
   Responsive
   Tiers: ≤1080 tablet · ≤900 portrait tablet · ≤600 phone · ≤374 small phone
   plus short landscape screens (phones on their side)
   ============================================================ */

/* ---------- Tablet (iPad landscape, iPad Pro portrait) ---------- */
@media (max-width: 1080px) {
  .hdr__nav { display: none; }
  .hdr .hdr__menu { max-width: 60px; padding: 0 14px; margin-left: 6px; opacity: 1; }

  .services__title { grid-template-columns: 1fr; }
  .services__title .ln--r { padding-left: 0; text-align: right; }
  .vlines--svc i:nth-child(1), .vlines--svc i:nth-child(3) { display: none; }
  .services__grid { grid-template-columns: 1fr; }
  .services__visual { margin-bottom: 48px; }
  .boxviz { position: relative; top: 0; width: 100%; max-height: none; aspect-ratio: 16 / 9; }
  .services__list { padding: 0 var(--pad); }


  .motive__main { grid-template-columns: minmax(0, 1fr); }
  .assess__title { grid-column: 1 / -1; }
  .assess__lede { grid-column: 1 / 3; padding-left: 0; margin-top: 20px; }
  .assess__intro { align-items: start; }
  .engine { display: none; } /* progress lives in the chat on smaller screens */
  .founder__quote { grid-column: 1 / -1; max-width: 14ch; }
  .founder__aside { grid-column: 1 / -1; padding: 0 var(--pad); margin-top: 32px; flex-direction: row; align-items: center; justify-content: space-between; }
  .founder__grid { grid-template-columns: 1fr; gap: 72px; }
  .fcard, .fcard + .fcard { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); padding: 0 var(--pad); margin-top: 0; }
  .fcard__photo { padding: 0; }
  .fcard__copy { padding: 0 0 0 clamp(24px, 4vw, 48px); align-self: center; }
  .fcard__body { max-width: 44ch; }

}

/* ---------- Portrait tablet (iPad, iPad Air, iPad mini) ---------- */
@media (max-width: 900px) {

  /* proof: one row per case, image beside the story */
  .vlines--proof { display: none; }
  .proof__grid { grid-template-columns: 1fr; gap: 72px; border-top: 0; }
  .case, .case + .case {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 28px;
    padding: 0 var(--pad); margin-top: 0 !important;
  }
  .case__media { grid-column: 1; grid-row: 1 / span 4; }
  .case__meta, .case__client, .case__result, .case__what { grid-column: 2; }
  .case__client { min-height: 0; margin: 28px 0 0; }
  .case__stat { font-size: clamp(72px, 12vw, 120px); }

  .book__copy { grid-column: 1 / -1; }
  .cal { grid-column: 1 / -1; margin: 56px var(--pad) 0; max-width: 680px; }

  .ftr__grid { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .ftr__mark { grid-column: 1 / -1; }
  .ftr__grid .ftr__col { padding: 0 var(--pad); }
  .ftr__mid { grid-template-columns: 1fr 1fr; }
  .ftr__mid .ftr__col { grid-column: auto !important; padding: 0 var(--pad); }
  .vlines--ftr { display: none; }
}

@media (max-width: 900px) and (min-width: 601px) {
  .hero__bottom { flex-direction: column; align-items: stretch; gap: 28px; }
  .hero__motive { width: 100%; }
}

/* Story stacks (text over chart) on any portrait screen up to tablet size */
@media (max-width: 1080px) and (orientation: portrait) {
  /* the visual sticks under the header; the beats scroll up beneath it */
  .story__pin { display: flex; flex-direction: column; }
  .story__stage {
    order: -1; align-self: stretch; height: auto; padding: calc(var(--hdr-h) + 12px) 0 20px; justify-content: flex-start;
    background: var(--navy); z-index: 3;
  }
  .story__top, .viz { width: min(100%, calc(42vh * 1.2)); margin: 0 auto; }
  .beat { min-height: 52vh; min-height: 52svh; padding: 0 0 12vh; justify-content: flex-start; gap: 18px; }
  .beat:last-child { min-height: 0; padding-bottom: 96px; }
  .beat__title { font-size: clamp(36px, 8.4vw, 84px); max-width: 15ch; }
  .beat__body { max-width: 36ch; }
}

/* ---------- Phone ---------- */
@media (max-width: 600px) {
  :root { --pad: 20px; }
  .label { font-size: 10px; }

  .site-logo { height: 44px; }
  .site-logo svg { width: 132px; height: 22px; }
  .hdr .hdr__menu { height: 44px; padding: 0 12px; } /* 44px square */
  .hdr__cta { display: none; } /* phones: Contact lives in the menu */
  .menu__panel { padding-top: calc(var(--pad) + 44px + 40px); }

  /* hero: content flows from the bottom, so nothing collides on short screens */
  .hero { display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; padding: calc(var(--hdr-h) + 24px) var(--pad) calc(var(--pad) + 4px); height: auto; min-height: max(560px, 100svh); } /* at least a screen tall, taller when it must be: the headline never slides under the logo on short phones */
  /* order on phones: headline, then copy, then buttons */
  .hero__bottom { display: contents; }
  /* with the wrapper flattened, its children need their own layer above the photo and its shade (which also took the taps) */
  .hero__lead, .hero__motive { position: relative; z-index: 2; }
  .hero__title { order: 1; font-size: clamp(56px, 20.5vw, 112px); }
  .hero__lead { order: 1; }
  .hero__aside { margin-top: 16px; max-width: 34ch; font-size: 15px; }
  .hero__motive { order: 3; width: 100%; margin: 6px 0 0; padding: 16px; gap: 12px; }
  .hm__say { font-size: 22px; min-height: 0; }
  /* prompts wrap onto two short rows, with shorter labels (the full sentence is still what gets sent) */
  .hm__shortcuts { flex-wrap: wrap; gap: 8px; }
  .hm__shortcuts .shortcut { height: 36px; padding: 0 12px; }
  .hm__shortcuts .sc__l { display: none; }
  .hm__shortcuts .sc__s { display: inline; }
  .btn { padding: 0 18px; font-size: 12px; letter-spacing: .1em; white-space: nowrap; }
  .vlines--hero i:nth-child(1) { display: none; }
  .vlines--hero i:nth-child(2) { left: 72%; bottom: 64%; }

  .vlines:not(.vlines--hero) { display: none; }

  .trust__grid { grid-template-columns: 1fr; gap: 44px; }
  .trust__years, .trust__statement { grid-column: auto; padding: 0; }
  .trust__num { font-size: clamp(96px, 34vw, 160px); }
  .trust__statement { font-size: clamp(32px, 9.4vw, 48px); line-height: 1.04; }
  .marquee__list li { font-size: clamp(30px, 9vw, 44px); }
  .reg { grid-template-columns: auto 1fr; gap: 14px; }
  .reg__badge { align-self: start; }
  .reg__no { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .wa, .wa__ic { height: 44px; }
  .wa__ic { width: 44px; }

  .beat__title { font-size: clamp(34px, 10.4vw, 52px); max-width: none; }
  .beat__body { font-size: 16px; }
  .story__top, .viz { width: min(100%, 42vh); }
  .viz { aspect-ratio: 1 / 1; }
  .viz__bars { top: 44%; }
  .viz__flat { bottom: calc(12% + 44% * .74); }

  .assess__head { flex-direction: column; gap: 6px; }
  .assess__intro { grid-template-columns: 1fr; gap: 18px; }
  .assess__title, .assess__lede { grid-column: auto; padding-left: 0; }
  .assess__title { font-size: clamp(48px, 14vw, 80px); }
  .motive { height: min(760px, 88svh); margin: 22px calc(var(--pad) * -1) 0; }
  .motive__bar { padding: 14px 16px; gap: 12px; }
  .motive__by { display: none; }
  .motive__thread > *, .motive__dock { width: calc(100% - 32px); }
  .motive__q { font-size: clamp(40px, 12vw, 60px); }
  .turn { gap: 10px; }
  .turn--motive.is-cont { padding-left: 27px; }
  .bubble { max-width: 88%; font-size: 15px; }
  .say { font-size: 18px; }
  .prog { grid-template-columns: 1fr; }
  .picker button { min-height: 42px; padding: 0 12px; }
  .motive__shortcuts { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .shortcut { flex-shrink: 0; }

  .services__title { font-size: clamp(48px, 15vw, 84px); }
  .boxviz { aspect-ratio: 1 / 1; }
  .acc__t { font-size: 30px; }
  .acc__inner { grid-template-columns: 1fr; }
  .acc__inner .link-b { grid-column: auto; }

  .proof__title { font-size: clamp(52px, 17vw, 96px); }
  .proof__grid { gap: 64px; }
  .case, .case + .case { display: flex; flex-direction: column; }
  .case__client { margin: 18px 0 16px; }
  .case__media { aspect-ratio: 4 / 3; }

  .founder__aside { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 24px; }
  .founder__quote { font-size: clamp(44px, 13vw, 72px); }
  .founder__grid { gap: 56px; }
  /* compact founder card: small portrait beside name, bio below */
  .fcard, .fcard + .fcard { grid-template-columns: 112px 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 18px; }
  .fcard__copy { display: contents; }
  .fcard__photo { grid-column: 1; grid-row: 1 / 5; }
  .fcard__copy .label, .fcard__name, .fcard__tag { grid-column: 2; }
  .fcard__name { font-size: 26px; margin-top: 8px; }
  .fcard__tag { font-size: 18px; margin: 6px 0 0; }
  .fcard__body { grid-column: 1 / -1; margin-top: 12px; }
  .fcard__tag + .fcard__body { margin-top: 20px; }
  .portrait__mono { font-size: 44px; }
  .crop { width: 10px; height: 10px; }
  .crop--tl, .crop--bl { left: 8px; } .crop--tr, .crop--br { right: 8px; }
  .crop--tl, .crop--tr { top: 8px; } .crop--bl, .crop--br { bottom: 8px; }

  .book__title { font-size: clamp(46px, 13.5vw, 72px); }

  /* footer: one flowing grid, ordered for thumbs */
  .ftr { display: grid; grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .ftr__grid, .ftr__mid { display: contents; }
  .ftr__mark { grid-column: 1 / -1; order: 1; padding: 0 var(--pad); }
  .ftr__logo { width: 140px; }
  .ftr__col--news { grid-column: 1 / -1; order: 2; }
  .ftr__grid .ftr__col:not(.ftr__col--news) { order: 3; }
  .ftr__mid .ftr__col:last-child { order: 4; }
  .ftr__mid .ftr__col:first-child { grid-column: 1 / -1 !important; order: 5; }
  .ftr__col { padding: 0 var(--pad); }
  .ftr__col a { padding: 3px 0; }
  .ftr__base { grid-column: 1 / -1; order: 6; margin-top: 0; flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Small phone (iPhone SE 1st gen, compact Androids) ---------- */
@media (max-width: 374px) {
  :root { --pad: 16px; }
  .site-logo svg { width: 116px; height: 20px; }
  .hdr .hdr__menu { padding: 0 12px; }
  .hero__title { font-size: 19.5vw; }
  .btn { font-size: 11px; letter-spacing: .08em; padding: 0 14px; }
  .fcard, .fcard + .fcard { grid-template-columns: 96px 1fr; }
}

/* ---------- Short landscape screens (phones on their side) ---------- */
@media (orientation: landscape) and (max-height: 540px) {
  /* the hero grows instead of clipping: headline, copy and Motive stack below the header and the page scrolls */
  .hero { height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--hdr-h) + 24px) var(--pad) calc(var(--pad) + 6px); }
  .hero__bottom { position: relative; left: auto; right: auto; bottom: auto; flex-direction: column; align-items: stretch; gap: 24px; }
  .hero__motive { width: 100%; margin-bottom: 0; }
  .hero__title { font-size: clamp(56px, 22vh, 140px); }
  .btn { height: 48px; }
  .beat { gap: 12px; }
  .beat__title { font-size: clamp(28px, 9vh, 52px); }
  .beat__body { font-size: 15px; }
  .viz { width: min(100%, calc(64vh * 1.2)); }
}

/* Touch screens: no sticky hover states */
@media (hover: none) {
  .case:hover .case__zoom { transform: none; background-color: var(--cobalt); }
  .acc__head:hover .acc__t { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* ============================================================
   Motive: the full experience (assessment.html)
   One column, one conversation. Type scale, smallest to largest:
   11 labels · 13 options · 14 your messages · 16 Motive · 22 the line to answer · 64 the headline
   ============================================================ */
.page-motive { background: var(--navy); }
/* the full Motive page is one screen that never scrolls itself: only the conversation inside it does */
html:has(.page-motive), .page-motive { height: 100%; overflow: hidden; overflow: clip; overscroll-behavior: none; }
@keyframes wipe-safety { to { visibility: hidden; } }

.motive--page { --col: 640px; margin: 0; height: 100vh; height: 100dvh; box-shadow: none; }
.motive--page .orb { --o: 5px; }

/* bar: the Motive mark, a way out, a progress hairline */
.motive--page .motive__bar { position: relative; gap: 20px; padding: 0 var(--pad); height: 60px; border-bottom: 0; }
.motive__home { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--white); }
.motive__home .motive__name { font-size: 18px; }
/* the logo mark breathes; marks inside the conversation stay still */
.motive--page .motive__home .orb { --o: 6px; }
.motive--page .motive__home .orb i { animation: orb 2.6s var(--ease) infinite; }
.motive--page .motive__home .orb i:nth-child(2) { animation-delay: .3s; }
.motive--page .motive__home .orb i:nth-child(3) { animation-delay: .9s; }
.motive--page .motive__home .orb i:nth-child(4) { animation-delay: .6s; }
.motive__new { padding: 8px 0; white-space: nowrap; color: rgba(255,255,255,.6); transition: color .3s var(--ease); }
.motive__new:hover { color: var(--lime); }
.motive__exit { width: 36px; height: 36px; display: grid; place-items: center; margin-right: -8px; font-size: 22px; font-weight: 300; line-height: 1; color: rgba(255,255,255,.6); transition: color .3s, transform .5s var(--ease); }
.motive__exit:hover { color: var(--lime); transform: rotate(90deg); }
/* the journey: four segments (one per stop) under the bar, and the current stop's name in the middle */
.motive__progress { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; opacity: 0; transition: opacity .5s; }
.motive__progress.is-on { opacity: 1; }
.motive__progress i { --p: 0; position: relative; height: 2px; background: rgba(255,255,255,.1); }
.motive__progress i::after { content: ""; position: absolute; inset: 0; background: var(--lime); transform: scaleX(var(--p)); transform-origin: left; transition: transform .8s var(--ease); }
.motive__stop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; color: rgba(255,255,255,.55); }
.motive__stop b { color: var(--lime); font-weight: 500; }
.motive__stop .is-short { display: none; }
@media (max-width: 600px) { .motive__stop .is-short { display: inline; } }

.motive--page .motive__main { grid-template-columns: minmax(0, 1fr); }
.motive--page .motive__thread > *, .motive--page .motive__dock { width: min(var(--col), calc(100% - 48px)); }

/* empty state: headline, input and prompts sit together in the middle; once live, the dock drops to the bottom */
.motive--page:not(.is-live) .motive__chat { justify-content: center; justify-content: safe center; padding-bottom: 6vh; } /* safe: never pushed up under the bar when it doesn't fit */
.motive--page:not(.is-live) .motive__hello { flex: none; padding: 0 24px 36px; }
.motive--page:not(.is-live) .composer { order: 1; }
.motive--page:not(.is-live) .motive__shortcuts { order: 2; }
.motive--page .motive__hello { gap: 14px; }
.motive--page .motive__q { font-size: clamp(40px, 4.4vw, 64px); line-height: 1; letter-spacing: -.05em; max-width: 13ch; }
.motive--page .motive__intro { max-width: 50ch; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.6); text-wrap: balance; }
.motive--page .motive__free { color: rgba(136,242,61,.85); text-wrap: balance; max-width: 34ch; }
.motive--page .motive__shortcuts { justify-content: center; }
.motive.is-live .motive__shortcuts { justify-content: flex-start; }
.motive--page:not(.is-live) .motive__fine { order: 3; }
.motive__facts { display: block; margin-bottom: 4px; color: var(--white); }
.motive__fine { margin-top: 6px; text-align: center; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.42); text-wrap: balance; }
.motive.is-live .motive__fine { display: none; }

/* the Motive cube: the 2×2 mark as eight Boxes, turning slowly above the headline (js/motive-cube.js) */
.mcube { position: relative; height: calc(var(--cs, 30px) * 2 + 64px); width: 100%; margin-bottom: clamp(4px, 2vh, 20px); perspective: 900px; }
.mcube__rig { --c: var(--cs, 30px); position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(38deg); }
.mc { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.mc__b { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.mc i {
  position: absolute; width: var(--c); height: var(--c); left: calc(var(--c) / -2); top: calc(var(--c) / -2);
  border: 1px solid rgba(255,255,255,.2); background: rgba(49,107,255,.22); backface-visibility: hidden;
  transition: background-color .9s var(--ease), border-color .9s var(--ease);
}
.mc i:nth-child(1) { transform: translateZ(calc(var(--c) / 2)); }
.mc i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--c) / 2)); }
.mc i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--c) / 2)); background: rgba(31,73,212,.1); }
.mc i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--c) / 2)); background: rgba(31,73,212,.1); }
.mc i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--c) / 2)); background: rgba(90,136,255,.22); }
.mc i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--c) / 2)); }
.mc.is-lit i { background: rgba(136,242,61,.78); border-color: rgba(16,24,32,.18); }
.mc.is-lit i:nth-child(3), .mc.is-lit i:nth-child(4) { background: rgba(111,209,42,.7); }
@media (max-height: 700px) { .mcube { --cs: 20px; height: calc(var(--cs) * 2 + 40px); margin-bottom: 0; } .motive--page:not(.is-live) .motive__chat { padding-bottom: 2vh; } .motive--page:not(.is-live) .motive__hello { padding-bottom: 24px; } }
@media (max-height: 600px) { .mcube { display: none; } }
@media (max-width: 600px) {
  .mcube { --cs: 24px; }
  .motive--page:not(.is-live) .motive__shortcuts { flex-wrap: wrap; justify-content: center; overflow: visible; margin-right: 0; padding-right: 0; }
}
@media (max-width: 600px) and (max-height: 700px) { .mcube { --cs: 19px; } }

/* dock */
.motive--page .motive__dock { gap: 12px; padding: 12px 0 max(24px, env(safe-area-inset-bottom)); }
.motive--page .shortcut { height: 34px; padding: 0 12px; font-size: 13px; color: rgba(255,255,255,.75); }
.motive--page .shortcut--primary { background: var(--lime); color: var(--navy); box-shadow: none; font-weight: 500; }
.motive--page .shortcut--primary:hover, .motive--page .shortcut--primary:focus-visible { background: var(--white); color: var(--navy); box-shadow: none; }
.motive--page .composer { height: 52px; padding: 0 6px 0 18px; }
.motive--page .composer__input { font-size: 15px; }
.motive--page .composer__send { width: 40px; height: 40px; font-size: 16px; }

/* the conversation */
.motive--page .motive__thread { padding: 48px 0 16px; }
.motive--page .turn { gap: 14px; margin-bottom: 32px; }
.motive--page .turn--user { margin-bottom: 32px; }
.motive--page .turn--motive > .orb { margin-top: 8px; }
.motive--page .turn--motive.is-cont { padding-left: 26px; margin-top: -16px; }
.motive--page .bubble { max-width: 75%; padding: 9px 14px; font-size: 14px; line-height: 1.45; background: rgba(255,255,255,.08); color: var(--white); }
.motive--page .say { font-family: var(--f-body); font-weight: 400; font-size: 16px; line-height: 1.6; letter-spacing: 0; color: rgba(255,255,255,.78); }
.motive--page .say + .say { margin-top: 6px; }
.motive--page .say--lead { font-family: var(--f-head); font-weight: 300; font-size: 22px; line-height: 1.35; letter-spacing: -.015em; color: var(--white); text-wrap: pretty; }
.motive--page .say + .say--lead { margin-top: 14px; }
.motive--page .kicker { margin-bottom: 10px; font-size: 10.5px; color: rgba(136,242,61,.85); }
.motive--page .aside { margin-top: 6px; font-size: 13.5px; color: rgba(255,255,255,.5); }
.motive--page .caret { width: .4em; }

/* answer options */
.motive--page .picker { gap: 6px; margin-top: 18px; }
.motive--page .picker button { min-height: 36px; padding: 0 12px; gap: 7px; font-size: 13px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.motive--page .picker button b { font-family: var(--f-body); font-weight: 500; font-size: 13px; }
.motive--page .picker--scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.motive--page .picker--scale button { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 58px; padding: 8px 12px; font-size: 12.5px; line-height: 1.25; }
.motive--page .picker--scale button b { font-family: var(--f-head); font-weight: 300; font-size: 18px; line-height: 1; }
.picker--multi .picker__done { min-width: 120px; justify-content: center; }
/* answers in plain words: a column of replies, like choosing what to say next */
.motive--page .picker--answers { flex-direction: column; align-items: stretch; gap: 6px; max-width: 440px; }
.motive--page .picker--answers button { justify-content: flex-start; min-height: 44px; padding: 10px 16px; font-size: 14px; line-height: 1.35; }

/* once answered, the options fold away: their reply bubble already says what they chose */
.motive--page .picker--answers.is-done, .motive--page .picker--multi.is-done { display: none; }

/* the route: the four stops, shown once at the start */
.route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 18px 0 10px; }
.route span { padding-top: 10px; border-top: 2px solid rgba(255,255,255,.14); font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,.55); }
.route span.is-on { border-color: var(--lime); color: var(--white); }
.route em { display: block; margin-bottom: 2px; font-style: normal; font-size: 11px; color: rgba(255,255,255,.4); }
.route span.is-on em { color: var(--lime); }

/* end of a stop: what it showed, and the lead */
.stop { margin-top: 14px; padding: 6px 16px 14px; background: rgba(255,255,255,.04); max-width: 440px; }
.stop__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 14px; color: rgba(255,255,255,.75); }
.stop__row .meter i.on { background: rgba(255,255,255,.75); box-shadow: none; }
.stop__row.is-low { color: var(--white); }
.stop__row.is-low .meter i.on { background: var(--lime); }
.stop__lead { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; }
.stop__lead .label { color: rgba(255,255,255,.45); }
.stop__lead b { font-family: var(--f-head); font-weight: 300; font-size: 17px; letter-spacing: -.01em; color: var(--lime); }

/* the build-up before the reveal */
.analysis { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.analysis li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,.45); transition: color .4s; }
.analysis li::before { content: ""; width: 14px; height: 14px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.analysis li.is-done { color: var(--white); }
.analysis li.is-done::before { background: var(--lime); box-shadow: none; }
.picker--multi .picker__done:disabled { opacity: .35; pointer-events: none; }

/* the result */
.mcard--result { margin-top: 18px; padding: 0; border: 0; background: none; display: flex; flex-direction: column; gap: 8px; }
.mcard--result > * { padding: 20px; background: rgba(255,255,255,.04); }
.mcard--result > .mcard__hyp { background: var(--lime); margin-top: 0; }
/* the booking block: the result's real call to action */
.mcard--result > .mbook { background: var(--cobalt); color: var(--white); padding: 22px; }
.mbook .label { color: rgba(255,255,255,.7); }
.mbook__title { display: block; margin: 6px 0 14px; font-family: var(--f-head); font-weight: 300; font-size: 22px; line-height: 1.25; letter-spacing: -.015em; }
.mbook__agenda { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: ag; display: flex; flex-direction: column; gap: 8px; }
.mbook__agenda li { counter-increment: ag; display: grid; grid-template-columns: 24px 1fr; font-size: 14px; line-height: 1.5; }
.mbook__agenda li::before { content: "0" counter(ag); font-size: 12px; line-height: 1.75; color: var(--lime); }
.mbook__who { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.85); }
.mbook__who b { font-weight: 500; color: var(--white); }
.mbook__mono { width: 44px; height: 44px; flex-shrink: 0; display: block; object-fit: cover; background: var(--navy); }
.mbook__pick { display: block; margin-top: 16px; }
/* the calendar in the conversation: Calendly's own card, themed navy, sits on the cobalt */
.mbook__cal { margin: 10px -8px 0; color: var(--white); }
.turn__body > .mbook__cal { margin-top: 16px; }
.mcard--result > .mcard__actions { margin: 0; padding: 10px 0 0; background: none; }
/* Email me my results: secondary to the review above, so quiet: a label, a line and Motive's own composer */
.mmail { display: flex; flex-direction: column; gap: 6px; }
.mmail__title { font-family: var(--f-head); font-weight: 300; font-size: 22px; letter-spacing: -.02em; }
.mmail__form { margin-top: 8px; height: 52px; }
.mmail__note { min-height: 1.4em; font-size: 14px; color: rgba(255,255,255,.7); }
.mmail__note b { color: var(--lime); font-weight: 500; }
.mmail.is-sent .mmail__note { color: var(--white); }
.mcard--result .mcard__actions .btn { height: 46px; padding: 0 20px; font-size: 11.5px; }
.mscore { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.mcard--result .mcard__big { font-size: 56px; }
.mscore p { font-size: 14px; line-height: 1.45; max-width: 22ch; text-align: right; color: var(--lime); }
.mcard--result .label { display: block; margin-bottom: 8px; font-size: 10.5px; color: rgba(255,255,255,.5); }
.tension p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.78); }
.tension b { font-weight: 500; color: var(--white); }
.mcard--result .mcard__hyp { gap: 2px 16px; }
.mcard--result .mcard__hyp .label { margin-bottom: 6px; color: rgba(16,24,32,.6); }
.mcard--result .mcard__hyp b { font-size: 20px; }
.mcard--result .mcard__price { font-size: 16px; }
.mcard__hyp p { grid-column: 1 / -1; margin-top: 6px; font-size: 14px; line-height: 1.55; }
.mcard__hyp .mcard__why { margin-top: 2px; font-size: 13px; color: rgba(16,24,32,.65); }
.signals > .label { margin-bottom: 4px; }
.signal { border-top: 1px solid rgba(255,255,255,.08); }
.signal summary { display: grid; grid-template-columns: 1fr 32px 12px; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; font-size: 14.5px; }
.signal summary::-webkit-details-marker { display: none; }
.signal summary em { font-style: normal; font-size: 12px; color: var(--lime); }
.signal summary::after { content: "+"; justify-self: end; color: rgba(255,255,255,.5); }
.signal[open] summary::after { content: "-"; }
.signal summary > span:last-of-type { justify-self: end; font-size: 13px; color: rgba(255,255,255,.6); }
.signal .prog { margin: 0 0 14px; gap: 8px; }
.mcard--result .prog > div { padding: 14px; }
.mcard--result .prog .label { color: var(--lime); }
.mcard--result .prog p { font-size: 13.5px; }

@media (max-width: 600px) {
  .motive--page .motive__bar { padding: 0 16px; height: 56px; gap: 16px; }
  .motive__stop .is-long { display: none; } /* phones: just "4 of 11" */
  .cal__head .label + .label { display: none; }
  .mbook__title { font-size: 20px; }
  .route span { font-size: 11px; }
  .motive--page .motive__thread > *, .motive--page .motive__dock { width: calc(100% - 32px); }
  .motive--page .motive__thread { padding-top: 28px; }
  .motive--page .motive__q { font-size: clamp(36px, 11vw, 48px); }
  .motive--page .say { font-size: 15px; }
  .motive--page .say--lead { font-size: 19px; }
  .motive--page .turn { gap: 10px; margin-bottom: 28px; }
  .motive--page .turn--motive.is-cont { padding-left: 22px; }
  .motive--page .bubble { max-width: 85%; }
  .motive--page .picker--scale { grid-template-columns: 1fr; gap: 4px; }
  .motive--page .picker--scale button { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 42px; padding: 0 14px; font-size: 13.5px; }
  .motive--page .picker--scale button b { font-size: 16px; }
  .mcard--result > * { padding: 16px; }
  .mscore { flex-direction: column; align-items: start; gap: 6px; }
  .mscore p { text-align: left; }
}

/* ============================================================
   Services page (services.html)
   ============================================================ */
.link-b--light { color: var(--white); }
.book__about { color: var(--white) !important; opacity: .8; margin-top: -18px; }

/* 01 hero: one line of promise, bottom left; eight Boxes as one cube on the right */
.phero { position: relative; background: var(--navy); color: var(--white); min-height: 100vh; min-height: 100svh; padding: calc(var(--hdr-h) + 40px) var(--pad) clamp(40px, 5vw, 72px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; }
.phero__cubes { position: absolute; left: 50%; right: 0; top: 0; bottom: 0; pointer-events: none; }
.phero__rig { --c: clamp(60px, 7.6vw, 140px); position: absolute; left: 56%; top: 44%; width: 0; height: 0; transform-style: preserve-3d; }
.phero__cubes { perspective: 1600px; }
.phero__rig { --g: 0; --d: calc(var(--c) / 2 * (1 + var(--g))); } /* --g: the gap between the Boxes, as a share of one Box */
.pcube { --p: 0; position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transform: translate3d(calc(var(--x) * var(--d) * (1 + var(--p))), calc(var(--y) * var(--d) * (1 + var(--p))), calc(var(--z) * var(--d) * (1 + var(--p)))); } /* --p: the chosen Box steps out of the cluster */
.pcube i { position: absolute; width: var(--c); height: var(--c); left: calc(var(--c) / -2); top: calc(var(--c) / -2); border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.025); }
.pcube i:nth-child(1) { transform: translateZ(calc(var(--c) / 2)); }
.pcube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--c) / 2)); }
.pcube i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--c) / 2)); }
.pcube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--c) / 2)); }
.pcube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--c) / 2)); }
.pcube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--c) / 2)); }
.pcube.is-on i { background: rgba(49,107,255,.92); border-color: rgba(255,255,255,.95); } /* the chosen Box: solid cobalt, crisp edges */
.pcube i { transition: background .45s var(--ease), border-color .45s var(--ease); }
.phero__copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 26px; }
.phero__kicker { color: var(--lime); }
.phero__title .ln { text-wrap: balance; }
.phero__title { font-family: var(--f-head); font-weight: 200; font-size: clamp(56px, min(7.4vw, 14vh), 140px); line-height: .92; letter-spacing: -.055em; margin-left: -.04em; }
.phero__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16); margin-top: 10px; }
.phero__lede { font-size: clamp(17px, 1.4vw, 22px); color: rgba(255,255,255,.8); }
/* ============================================================
   404 (404.html): "Page, not found." beside a staircase of Boxes. The top Box drops in and falls through (js/lost.js)
   ============================================================ */
.lost__stage {
  position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--pad);
  padding: calc(var(--hdr-h) + 40px) var(--pad) var(--pad);
  background: var(--navy); color: var(--white);
}
.lost__copy { position: relative; z-index: 2; }
.lost__kicker { color: var(--lime); }
.lost__title { margin-top: 18px; font-family: var(--f-head); font-weight: 200; font-size: clamp(64px, 8.4vw, 164px); line-height: .9; letter-spacing: -.06em; margin-left: -.05em; }
.lost__title .ln > span { animation: lost-rise 1.3s var(--ease-out) both; }
.lost__title .ln:nth-child(2) > span { animation-delay: .1s; }
.lost__lede { margin-top: 26px; max-width: 32ch; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.45; color: rgba(255,255,255,.72); animation: lost-fade 1s var(--ease-out) .35s both; }
.lost__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; animation: lost-fade 1s var(--ease-out) .45s both; }
@keyframes lost-rise { from { transform: translateY(110%); } }
@keyframes lost-fade { from { opacity: 0; } to { opacity: 1; } }
/* the scene: one rig, turned to the Boxes' usual three-quarter view; it sways a little and follows the pointer */
.lost__scene { position: relative; height: min(70vh, 640px); perspective: 1600px; }
.lost__rig { --c: clamp(56px, 6.4vw, 108px); position: absolute; left: 50%; top: 58%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(-36deg); }
.lost__floor { position: absolute; left: 12%; right: 12%; top: calc(58% + clamp(56px, 6.4vw, 108px) * 2.2); height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }
.lcube { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transform: translate3d(calc((var(--x) - 1.5) * var(--c)), calc((1.5 - var(--y)) * var(--c)), 0); }
.lcube__b { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.lcube i { position: absolute; width: var(--c); height: var(--c); left: calc(var(--c) / -2); top: calc(var(--c) / -2); border: 1px solid rgba(255,255,255,.85); background: var(--cobalt); backface-visibility: hidden; }
.lcube i:nth-child(1) { transform: translateZ(calc(var(--c) / 2)); }
.lcube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--c) / 2)); }
.lcube i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--c) / 2)); background: var(--cobalt-deep); }
.lcube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--c) / 2)); background: var(--cobalt-deep); }
.lcube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--c) / 2)); background: #5a88ff; }
.lcube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--c) / 2)); }
/* this page: the lime Box, with its number on the front */
.lcube--lost i { background: var(--lime) !important; border-color: rgba(16,24,32,.35); display: grid; place-items: center; }
.lcube--lost i:nth-child(3), .lcube--lost i:nth-child(4) { background: #6fd12a !important; }
.lcube--lost i b { font-family: var(--f-head); font-weight: 300; font-size: calc(var(--c) * .34); letter-spacing: -.04em; color: var(--navy); }
/* the gap it leaves: a dashed lime outline where it should sit */
.lcube--ghost i { background: transparent !important; border: 1.5px dashed rgba(136,242,61,.85); }
@media (max-width: 900px) {
  .lost__stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; }
  .lost__scene { order: -1; height: 42vh; min-height: 260px; }
  .lost__rig { --c: clamp(44px, 10vw, 72px); }
  .lost__floor { top: calc(58% + clamp(44px, 10vw, 72px) * 2.2); }
}
@media (max-width: 600px) {
  .lost__scene { height: 34vh; min-height: 220px; }
  .lost__ctas .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .lost__stage * { animation: none !important; } }
.phero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }

/* 02 the Boxes: the Box sticks on the left and acts out whichever Box is in reading position */
.bxs { position: relative; background: var(--paper); color: var(--navy); padding: clamp(110px, 11vw, 180px) 0 clamp(60px, 6vw, 100px); }
.bxs__intro { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: end; padding: 0 var(--pad); margin-bottom: clamp(48px, 5vw, 80px); }
/* the line sits to the right of the title, over the list column, as on the homepage */
.bxs__intro .bxs__lede { grid-column: 2; margin-top: 0; padding-left: 14px; padding-bottom: .4em; }
@media (max-width: 1080px) { .bxs__intro { grid-template-columns: 1fr; } .bxs__intro .bxs__lede { grid-column: 1; padding-left: 0; margin-top: 18px; } }
.bxs__title { font-family: var(--f-head); font-weight: 200; font-size: clamp(52px, 7vw, 128px); line-height: .92; letter-spacing: -.05em; color: var(--cobalt); }
.bxs__lede { margin-top: clamp(18px, 2vw, 28px); max-width: 40ch; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.45; color: rgba(16,24,32,.7); }
.bxs .services__grid { margin-top: 0; }
.bxs .boxviz { top: calc(var(--hdr-h) + 24px); }
@media (max-width: 1080px) { .bxs .boxviz { top: 0; } } /* stacked: the Box sits in the flow, no sticky offset */
/* filters: the problem a visitor feels, as tabs like the contact page's: a word each, the chosen one underlined in cobalt.
   They scroll sideways if the column is too narrow for all four */
.bxf__row { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.bxf__tabs { display: flex; gap: clamp(18px, 2vw, 32px); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line-dark); }
.bxf__tabs::-webkit-scrollbar { display: none; }
.bxf { position: relative; flex-shrink: 0; padding: 0 0 14px; font-family: var(--f-head); font-weight: 300; font-size: clamp(18px, 1.5vw, 24px); letter-spacing: -.02em; white-space: nowrap; color: rgba(16,24,32,.42); transition: color .3s var(--ease); }
.bxf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cobalt); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.bxf:hover, .bxf[aria-selected="true"] { color: var(--navy); }
.bxf[aria-selected="true"]::after { transform: scaleX(1); }
.bxf:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; }
.acc__item[hidden] { display: none; }
/* Services: fewer lines. No rule under the tabs (only the chosen tab's underline), none above the list,
   and the rows split by a faint hairline instead of cobalt */
.bxs .bxf__tabs { border-bottom: 0; margin-bottom: 18px; }
.bxs .acc { border-top: 0; }
.bxs .acc__item { border-bottom-color: rgba(16,24,32,.1); }
.bxs .acc__item:last-child { border-bottom: 0; }
/* the way out when nothing fits: a plain link to the growth check */
.bxs__unsure { align-self: flex-start; }

/* AI services (services.html): four cards on the blue, ruled like the trust strip. Each mark is a small staircase
   (the growth motif) that plays its own move on hover, or once as the card scrolls in (.is-in, js/services.js) */
.ai { position: relative; background: var(--cobalt); color: var(--white); padding: clamp(100px, 10vw, 170px) 0 clamp(80px, 8vw, 130px); }
.ai__head { position: relative; z-index: 1; display: flex; justify-content: space-between; padding: 0 var(--pad); }
.ai__intro { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; padding: 0 var(--pad); margin: clamp(28px, 3vw, 48px) 0 clamp(56px, 6vw, 96px); }
.ai__title { grid-column: 1 / 3; font-family: var(--f-head); font-weight: 200; font-size: clamp(48px, 6.6vw, 124px); line-height: .94; letter-spacing: -.05em; }
.ai__lede { grid-column: 3 / 5; padding-left: 14px; max-width: 34ch; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.4; }
.ai__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; margin: 0; padding: 0; }
.aic { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2vw, 32px) var(--pad) clamp(32px, 3vw, 48px); border-left: 1px solid var(--line); }
.aic:first-child { border-left: 0; }
.aic__top { display: flex; justify-content: flex-end; align-items: flex-start; margin-bottom: clamp(36px, 4vw, 72px); }
.aic__name { font-family: var(--f-head); font-weight: 200; font-size: clamp(32px, 2.8vw, 52px); line-height: 1; letter-spacing: -.04em; }
.aic__name small { display: block; margin-bottom: 6px; font-family: var(--f-body); font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--lime); }
.aic__what { font-size: clamp(16px, 1.15vw, 19px); line-height: 1.4; max-width: 26ch; }
.aic__how { display: flex; gap: 10px; margin-top: auto; padding-top: 8px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.72); max-width: 30ch; }
.aic__how i { font-style: normal; color: var(--lime); }
/* the Box scenes: small 3D Boxes, faint hairlines on the blue, lime for what the AI finds, builds or runs.
   Built and animated in js/services.js (aiBoxes); each loops only while its card is on screen */
.aibox { position: relative; width: clamp(150px, 13vw, 200px); height: clamp(112px, 9.4vw, 140px); perspective: 900px; }
.aibox__rig { --c: clamp(18px, 1.6vw, 25px); position: absolute; left: 50%; top: 62%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-26deg) rotateY(-38deg); }
.acube { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.acube i { position: absolute; width: var(--c); height: var(--c); left: calc(var(--c) / -2); top: calc(var(--c) / -2); border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.06); transition: background .6s var(--ease), border-color .6s var(--ease); }
.acube i:nth-child(1) { transform: translateZ(calc(var(--c) / 2)); }
.acube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--c) / 2)); }
.acube i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--c) / 2)); }
.acube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--c) / 2)); }
.acube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--c) / 2)); }
.acube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--c) / 2)); }
/* lit: lime edges and a lime top, the sides only tinted, so a lit Box reads clearly without shouting */
.acube.is-lit i { background: rgba(136,242,61,.16); border-color: rgba(136,242,61,.6); }
.acube.is-lit i:nth-child(5) { background: var(--lime); }
.acube.is-ghost i { background: rgba(136,242,61,.06); border: 1px dashed rgba(136,242,61,.6); }
/* Intelligence: the scan, a lime sheet that passes through the field of customers */
.aiscan { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.aiscan b { position: absolute; display: block; width: calc(var(--c) * 4.4); height: calc(var(--c) * 1.8); left: calc(var(--c) * -2.2); top: calc(var(--c) * -1.4); transform: rotateY(90deg); background: linear-gradient(90deg, rgba(136,242,61,0), rgba(136,242,61,.35), rgba(136,242,61,0)); border-left: 1px solid rgba(136,242,61,.0); box-shadow: inset 0 1px 0 var(--lime); }
.ai__foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 32px; padding: clamp(24px, 2.4vw, 36px) var(--pad) 0; }
.ai__foot p { font-size: clamp(16px, 1.15vw, 19px); }
@media (max-width: 1080px) {
  .ai__intro { grid-template-columns: 1fr; gap: 24px; }
  .ai__title, .ai__lede { grid-column: auto; padding-left: 0; }
  .ai__grid { grid-template-columns: repeat(2, 1fr); }
  .aic:nth-child(3) { border-left: 0; }
  .aic:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .ai__grid { grid-template-columns: 1fr; }
  .aic { border-left: 0; }
  .aic:nth-child(n+2) { border-top: 1px solid var(--line); }
  /* the Box scenes, larger and centred: a single column gives them the room */
  .aic__top { justify-content: center; margin: 8px 0 24px; }
  .aibox { width: min(100%, 280px); height: 200px; }
  .aibox__rig { --c: 31px; }
  .ai__foot { flex-direction: column; align-items: flex-start; }
}

/* 03 how it works: reuses the story arc's layout; the visual is a staircase the Box climbs */
.flow .story__pin { padding-top: clamp(40px, 6vw, 100px); }
.flow__intro { min-height: 60vh; min-height: 60svh; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-right: 4vw; }
.flow__intro .label { color: var(--lime); }
.flow__lede { font-family: var(--f-head); font-weight: 200; font-size: clamp(32px, min(3.4vw, 6vh), 60px); line-height: 1.05; letter-spacing: -.04em; max-width: 14ch; }
.flow .beat { min-height: 72vh; min-height: 72svh; }
.flowviz { --g: 6%; }
.flowviz__out { position: absolute; left: var(--g); top: var(--g); right: var(--g); display: flex; flex-direction: column; gap: 1.4cqw; }
.flowviz__out .label { color: rgba(255,255,255,.55); }
.flowviz__outs { position: relative; height: 1.2em; font-family: var(--f-head); font-weight: 200; font-size: 6cqw; letter-spacing: -.045em; line-height: 1.1; color: var(--lime); overflow: hidden; }
.flowviz__outs span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.flowviz__steps { position: absolute; left: var(--g); right: var(--g); bottom: var(--g); height: 60%; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; }
.flowviz__steps i { position: relative; display: block; border: 1px dashed rgba(255,255,255,.22); margin-right: -1px; }
.flowviz__steps i:nth-child(1) { height: 16%; } .flowviz__steps i:nth-child(2) { height: 30%; } .flowviz__steps i:nth-child(3) { height: 44%; }
.flowviz__steps i:nth-child(4) { height: 58%; } .flowviz__steps i:nth-child(5) { height: 72%; } .flowviz__steps i:nth-child(6) { height: 86%; }
.flowviz__steps b { position: absolute; inset: -1px; background: var(--cobalt); transform-origin: bottom; transform: scaleY(0); }
.flowviz__steps em { position: absolute; left: 1.2cqw; bottom: 1cqw; font-style: normal; font-size: max(9px, 1.5cqw); font-weight: 500; letter-spacing: .14em; color: rgba(255,255,255,.4); transition: color .4s; }
.flowviz__steps i.is-done em { color: rgba(255,255,255,.85); }
.flowviz__steps i.is-now em { color: var(--navy); }
.flowviz__box { position: absolute; width: 0; height: 0; left: 0; top: 0; }
.flowviz .cube-scene { left: 0; top: -4.3cqw; } /* the cube rests on the step instead of sinking into it */
.flowviz .cube { --s: 6.4cqw; }

/* 05 FAQs */
.faqs { position: relative; background: var(--paper); color: var(--navy); padding: clamp(110px, 11vw, 180px) 0 clamp(90px, 9vw, 150px); }
.faqs__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); }
.faqs__side { padding: 0 var(--pad); display: flex; flex-direction: column; gap: 22px; }
.faqs__side .label { color: rgba(16,24,32,.55); }
.faqs__title { font-family: var(--f-head); font-weight: 200; font-size: clamp(44px, 4.6vw, 84px); line-height: .95; letter-spacing: -.05em; color: var(--cobalt); }
.faqs__lede { font-size: 16px; line-height: 1.5; color: rgba(16,24,32,.72); }
.faq { grid-column: 2 / 5; padding: 0 var(--pad) 0 14px; border-top: 1px solid var(--line-dark); }
.faq__item { border-bottom: 1px solid var(--line-dark); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; cursor: pointer; list-style: none; font-family: var(--f-head); font-weight: 300; font-size: clamp(21px, 1.8vw, 30px); letter-spacing: -.02em; line-height: 1.2; transition: color .3s var(--ease); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--cobalt); }
.faq__item summary i { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq__item summary i::before, .faq__item summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .45s var(--ease); }
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: rotate(0deg); }
.faq__a { padding: 0 0 28px; max-width: 62ch; }
.faq__a p, .faq__a li { font-size: 17px; line-height: 1.6; color: rgba(16,24,32,.78); }
.faq__a ul { list-style: none; padding: 0; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.faq__a li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line-dark); }
.faq__a li b { font-weight: 500; color: var(--navy); }

@media (max-width: 1080px) {
  .phero__cubes { left: 0; bottom: 45%; }
  .phero__rig { left: 50%; top: 52%; }
  .flow__intro { min-height: 0; padding: 40px 0 12vh; }
  .faqs__grid { grid-template-columns: 1fr; }
  .faq { grid-column: 1; padding: 0 var(--pad); margin-top: 44px; }
}
@media (max-width: 1080px) and (orientation: portrait) {
  .flow .beat { min-height: 52vh; min-height: 52svh; }
}
@media (max-width: 600px) {
  .phero { padding-bottom: 32px; }
  .phero__rig { --c: clamp(40px, min(18vw, 8vh), 84px); } /* by width, and by height so short phones keep clear of the title */
  .phero__title { font-size: clamp(44px, 13vw, 68px); }
  .phero__row { flex-direction: column; align-items: flex-start; }
  .bxs__title { font-size: clamp(44px, 13vw, 68px); }
  .faq__a li { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   Contact page (contact.html)
   ============================================================ */
[data-page="contact"] .site-logo { color: var(--navy); } /* the page opens on paper, not navy */
.contact { position: relative; background: var(--paper); color: var(--navy); min-height: 100vh; min-height: 100svh; padding: calc(var(--hdr-h) + clamp(48px, 5vw, 88px)) 0 clamp(80px, 8vw, 140px); }
/* two halves: who and how to reach us on the left, the calendar (or the form) on the right, in view from the start */
.contact__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.contact__side { grid-column: 1 / 3; padding: 0 var(--pad); display: flex; flex-direction: column; gap: clamp(40px, 4.4vw, 72px); }
.contact__head { display: flex; flex-direction: column; gap: 20px; }
.contact__head .label { color: rgba(16,24,32,.55); }
.contact__title { font-family: var(--f-head); font-weight: 200; font-size: clamp(60px, 7.6vw, 140px); line-height: .9; letter-spacing: -.055em; color: var(--cobalt); margin-left: -.04em; }
.contact__lede { font-size: clamp(17px, 1.4vw, 22px); color: rgba(16,24,32,.7); }
.contact__main { grid-column: 3 / 5; padding: 0 var(--pad) 0 14px; min-width: 0; }
.contact__info { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 28px; padding-top: 28px; border-top: 1px solid var(--line-dark); }
.cinfo { display: flex; flex-direction: column; gap: 8px; }
.cinfo .label { color: rgba(16,24,32,.5); }
.cinfo p { font-size: 16px; line-height: 1.55; color: rgba(16,24,32,.8); max-width: 34ch; }
.cinfo__mail { font-family: var(--f-head); font-weight: 300; font-size: clamp(20px, 1.6vw, 26px); letter-spacing: -.02em; color: var(--cobalt); overflow-wrap: anywhere; }
.cinfo__mail:hover { color: var(--navy); }
.cinfo__wa { display: inline-flex; align-items: center; gap: 12px; }
.cinfo__wa svg { width: .8em; height: .8em; fill: currentColor; flex-shrink: 0; }
.cinfo .link-b { align-self: flex-start; color: var(--navy); margin-top: 2px; }
.cinfo--seton { flex-direction: row; align-items: flex-start; gap: 14px; }
.cinfo--seton img { width: 52px; height: 52px; flex-shrink: 0; object-fit: cover; background: var(--navy); }
.cinfo--seton b { font-weight: 600; color: var(--navy); }

.ctabs { display: flex; gap: clamp(24px, 2.6vw, 40px); border-bottom: 1px solid var(--line-dark); margin-bottom: 30px; }
.ctabs button { position: relative; padding: 0 0 14px; font-family: var(--f-head); font-weight: 300; font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -.02em; color: rgba(16,24,32,.42); transition: color .3s var(--ease); }
.ctabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cobalt); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.ctabs button:hover { color: var(--navy); }
.ctabs button[aria-selected="true"] { color: var(--navy); }
.ctabs button[aria-selected="true"]::after { transform: scaleX(1); }
.ctabs button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; }
.contact .cal__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: rgba(16,24,32,.55); }
.contact .cal__head .label:first-child { color: var(--cobalt); }
.contact__about { color: var(--navy); margin-bottom: 10px; }

.cform { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; max-width: 760px; }
.cfield { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cfield--full { grid-column: 1 / -1; }
.cfield__l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(16,24,32,.65); }
.cfield__l small { font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: none; color: rgba(16,24,32,.45); }
.cfield input, .cfield textarea {
  width: 100%; padding: 10px 0 12px; border: 0; border-bottom: 1px solid rgba(16,24,32,.3); border-radius: 0;
  background: transparent; font: inherit; font-size: 18px; color: var(--navy); outline: none;
  transition: border-color .3s var(--ease);
}
.cfield textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.cfield input:focus, .cfield textarea:focus { border-color: var(--cobalt); box-shadow: 0 1px 0 var(--cobalt); }
.cfield.is-invalid input, .cfield.is-invalid textarea { border-color: #b42318; }
.cfield__err { font-size: 13px; color: #b42318; }
.cfield__err:empty { display: none; }
.cform__trap { display: none; }
.cform__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 4px; }
.cform__note { font-size: 14px; color: rgba(16,24,32,.6); }
.cform__done { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 46ch; padding: 8px 0 40px; outline: none; }
.cform__done[hidden], .cform[hidden] { display: none; }
.cform__done .label { color: var(--cobalt); }
.cform__done-t { font-family: var(--f-head); font-weight: 300; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.2; letter-spacing: -.02em; }

@media (max-width: 1080px) {
  /* stacked: heading, then the calendar, then the details */
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .contact__side { display: contents; }
  .contact__head { order: 1; padding: 0 var(--pad); margin-bottom: 36px; }
  .contact__main { order: 2; grid-column: 1; padding: 0 var(--pad); }
  .contact__info { order: 3; margin: 56px var(--pad) 0; }
}
@media (max-width: 600px) {
  .contact__title { font-size: clamp(52px, 17vw, 84px); }
  .contact .cal__head .label + .label { display: none; }
  .cform { grid-template-columns: 1fr; gap: 24px; }
  .contact__info { grid-template-columns: 1fr; }
}

/* ============================================================
   Work page (work.html)
   ============================================================ */
/* 01 hero: the services hero's layout; beside it, Boxes stack into a staircase and the result lands on top */
.whero__stage { position: absolute; left: 50%; right: 0; top: 0; bottom: 0; perspective: 1600px; pointer-events: none; }
.whero__rig { --c: clamp(44px, 4.8vw, 88px); position: absolute; left: 50%; top: 56%; width: 0; height: 0; transform-style: preserve-3d; }

/* 02 the clients: the homepage marquee on a cobalt band */
.wclients { position: relative; background: var(--cobalt); color: var(--white); padding: clamp(40px, 4vw, 64px) 0; }
.wclients .logos { --line: rgba(255,255,255,.28); }
.feat__client em, .wcard__client em { font-style: normal; opacity: .4; }

/* 03 featured case */
.feat { position: relative; background: var(--paper); color: var(--navy); padding: clamp(110px, 11vw, 180px) 0; }
.feat__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; }
.feat__media { grid-column: 1 / 3; margin: 0 14px 0 var(--pad); aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy); }
.feat__media img { width: 100%; height: 100%; object-fit: cover; }
.feat__copy { grid-column: 3 / 5; padding: 0 var(--pad) 0 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.feat__kicker { color: rgba(16,24,32,.55); }
.feat__client { font-family: var(--f-head); font-weight: 200; font-size: clamp(44px, 4.6vw, 84px); line-height: .95; letter-spacing: -.05em; color: var(--cobalt); }
.feat__stat { font-family: var(--f-head); font-weight: 200; font-size: clamp(120px, 14vw, 260px); line-height: .82; letter-spacing: -.06em; margin-top: 8px; }
.feat__result { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); }
.feat__pairs { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.feat__pairs dd { margin: 0; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.45; color: rgba(16,24,32,.8); }
.feat__pairs .label { display: block; color: rgba(16,24,32,.5); margin-bottom: 8px; }

/* 04 case studies: a picture, the number it moved, the client */
.works { position: relative; background: var(--navy); color: var(--white); padding: clamp(110px, 11vw, 180px) 0; }
.works__title, .gi__title { font-family: var(--f-head); font-weight: 200; font-size: clamp(52px, 7vw, 128px); line-height: .92; letter-spacing: -.05em; }
.works__title { position: relative; z-index: 1; padding: 0 var(--pad); margin-bottom: clamp(48px, 5vw, 80px); }
.wgrid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(48px, 5vw, 80px); }
.wcard { position: relative; display: flex; flex-direction: column; padding: 0 14px; scroll-margin-top: 90px; }
.wcard__hit { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.wcard__hit:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.wcard__link { margin-top: 14px; color: var(--lime); transition: transform .5s var(--ease); }
.wcard:hover .wcard__link { transform: translateX(6px); }
.wcard:nth-child(3n+1) { padding-left: var(--pad); }
.wcard:nth-child(3n) { padding-right: var(--pad); }
.wcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy-2); }
.wcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.wcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,24,32,0) 45%, rgba(16,24,32,.55) 100%); }
.wcard:hover .wcard__media img { transform: scale(1.05); }
.wcard__stat { position: absolute; left: 18px; bottom: 8px; z-index: 1; font-family: var(--f-head); font-weight: 200; font-size: clamp(64px, 6vw, 112px); line-height: .9; letter-spacing: -.05em; color: var(--lime); }
.wcard__stat small { font-size: .3em; letter-spacing: 0; margin-left: .1em; }
.wcard__client { margin-top: 18px; font-family: var(--f-head); font-weight: 300; font-size: clamp(24px, 2vw, 34px); line-height: 1.1; letter-spacing: -.03em; }
.wcard__result { margin-top: 6px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* the case panel: slides in from the right, like the menu */
.case-open { overflow: hidden; scrollbar-gutter: stable; } /* the page doesn't shift when its scrollbar goes */
.cdrawer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--navy); overflow: hidden; }
.cdrawer::backdrop { background: transparent; }
.cdrawer__scrim { position: absolute; inset: 0; background: rgba(16,24,32,.55); opacity: 0; } /* faded in by js/work.js */
.cdrawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 100%); overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); padding: calc(var(--pad) + 64px) var(--pad) var(--pad);
  will-change: transform; /* moved by js/work.js */
}
.cdrawer__close { position: absolute; z-index: 1; top: var(--pad); right: var(--pad); width: 48px; height: 48px; background: var(--navy); color: var(--white); transition: background .3s; } /* outside the scrolling panel, so it stays put */
.cdrawer__close i, .cdrawer__close::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.cdrawer__close::before { transform: rotate(-45deg); }
.cdrawer__close:hover { background: var(--cobalt); }
.cdrawer__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); margin-bottom: 26px; }
.cdrawer__media img { width: 100%; height: 100%; object-fit: cover; }
.cdrawer__meta { display: flex; justify-content: space-between; gap: 12px; color: rgba(16,24,32,.55); }
.cdrawer__meta span:last-child { color: var(--cobalt); }
.cdrawer__client { margin-top: 14px; font-family: var(--f-head); font-weight: 200; font-size: clamp(38px, 3.6vw, 60px); line-height: 1; letter-spacing: -.045em; color: var(--cobalt); }
.cdrawer__client em { font-style: normal; opacity: .4; }
.cdrawer__stat { margin-top: 22px; font-family: var(--f-head); font-weight: 200; font-size: clamp(88px, 9vw, 150px); line-height: .85; letter-spacing: -.06em; }
.cdrawer__stat small { font-size: .3em; letter-spacing: 0; margin-left: .1em; }
.cdrawer__result { margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); }
.cdrawer__sec { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line-dark); display: flex; flex-direction: column; gap: 12px; }
.cdrawer__sec .label { color: rgba(16,24,32,.5); }
.cdrawer__sec ul { list-style: none; margin: 0; padding: 0; }
.cdrawer__sec li { padding: 10px 0; border-bottom: 1px solid var(--line-dark); font-size: 17px; line-height: 1.45; }
.cdrawer__sec li:last-child { border-bottom: 0; }
.cdrawer__sec p { font-size: 17px; line-height: 1.5; color: rgba(16,24,32,.85); }
.cdrawer__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 34px; }

/* 06 The Growth Imperative: its own mark in the site's language, the way Motive has its orb.
   The mark is the growth staircase in miniature (three steps, the last lime), stepping up on a loop. */
.gi { position: relative; background: var(--navy); color: var(--white); padding: clamp(100px, 10vw, 170px) 0; }
.gi__head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 var(--pad); margin-bottom: clamp(40px, 4.4vw, 72px); }
.gi__head > .label { color: rgba(255,255,255,.55); }
.gi__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; }
.gi__copy { grid-column: 1 / 3; padding: 0 var(--pad); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.gi__title { font-family: var(--f-head); font-weight: 200; font-size: clamp(52px, 7vw, 128px); line-height: .92; letter-spacing: -.05em; }
.gi__lede { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.45; color: rgba(255,255,255,.72); max-width: 34ch; }
.gi__copy .btn { margin-top: 10px; }
/* The Growth Imperative's label, on the Insights hero and the article sidebars */
.gi__lockup { display: inline-flex; align-items: center; gap: 12px; }
.gi__lockup .label { color: var(--white); }
.ihero .phero__copy > .gi__lockup { align-self: flex-start; }
.art__aside .gi__lockup .label { color: var(--navy); }
/* the topics panel: one scene per topic, the line underneath, a counter and a progress bar */
.giv {
  grid-column: 3 / 5; justify-self: center; position: relative; overflow: hidden;
  width: min(100% - 2 * var(--pad), 560px); aspect-ratio: 1 / 1; margin: 0 var(--pad) 0 14px;
  display: flex; flex-direction: column; gap: 10px; overflow: visible;
  color: var(--white); container-type: inline-size; /* no panel: the Boxes sit straight on the section */
}
/* the Boxes: built in js, white wireframes; the one that matters turns lime */
.giv__stage { position: relative; flex: 1; perspective: 1100px; }
.giv__rig { --c: 15cqw; position: absolute; left: 50%; top: 56%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(-36deg); }
.giv__group { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.giv .pcube i { border-color: rgba(255,255,255,.85); background: rgba(255,255,255,.05); }
.giv .pcube.is-lime i { background: rgba(136,242,61,.92); border-color: var(--lime); }
/* the topic line, rolling */
.giv__lines { position: relative; height: 2.6em; margin-top: 4px; overflow: hidden; color: rgba(255,255,255,.85); font-family: var(--f-head); font-weight: 300; font-size: clamp(20px, 6cqw, 28px); line-height: 1.25; letter-spacing: -.02em; }
.giv__lines p { position: absolute; left: 0; right: 0; top: 0; }

@media (max-width: 1080px) {
  .whero__stage { left: 0; bottom: 48%; }
  .whero__rig { left: 50%; top: 60%; --c: clamp(30px, 6vw, 56px); }

  .feat__grid { grid-template-columns: minmax(0, 1fr); }
  .feat__media { grid-column: 1; margin: 0 var(--pad) 40px; aspect-ratio: 16 / 10; }
  .feat__copy { grid-column: 1; padding: 0 var(--pad); }
  .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wcard, .wcard:nth-child(3n+1), .wcard:nth-child(3n) { padding: 0 14px; }
  .wcard:nth-child(2n+1) { padding-left: var(--pad); }
  .wcard:nth-child(2n) { padding-right: var(--pad); }
  .gi__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .gi__copy { grid-column: 1; }
  .giv { grid-column: 1; justify-self: start; margin: 0 var(--pad); width: calc(100% - 2 * var(--pad)); max-width: 480px; }
}
@media (max-width: 600px) {
  .works__title { font-size: clamp(44px, 13vw, 68px); }
  .gi__title { font-size: clamp(44px, 13vw, 68px); }
  .gi__head > .label { display: none; }
  .feat__stat { font-size: 120px; }
  .feat__pairs { grid-template-columns: 1fr; }
  .wgrid { grid-template-columns: minmax(0, 1fr); }
  .wcard, .wcard:nth-child(n) { padding: 0 var(--pad); }
}

/* ============================================================
   About page (about.html): reuses the work hero, the homepage founder cards and trust strip
   ============================================================ */
/* 03 the team: four people, one level */
.team { position: relative; background: var(--paper); color: var(--navy); padding: clamp(110px, 11vw, 180px) 0; }
.team__intro { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 24px; padding: 0 var(--pad); margin-bottom: clamp(48px, 5vw, 80px); }
.team__title { font-family: var(--f-head); font-weight: 200; font-size: clamp(48px, 6vw, 112px); line-height: .94; letter-spacing: -.05em; color: var(--cobalt); max-width: 9em; }
.team__lede { padding-left: 14px; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.45; color: rgba(16,24,32,.7); max-width: 34ch; }
.team__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 28px; padding: 0 var(--pad); }
.tm { display: flex; flex-direction: column; gap: 10px; }
.tm__photo { margin: 0 0 14px; }
.tm__photo .portrait { aspect-ratio: 4 / 5; }
.tm__photo .portrait img { width: 100%; height: 100%; object-fit: cover; }
.tm__area { color: var(--cobalt); }
.tm__name { font-family: var(--f-head); font-weight: 300; font-size: clamp(24px, 2vw, 34px); line-height: 1.1; letter-spacing: -.03em; }
.tm__bio { font-size: 15px; line-height: 1.5; color: rgba(16,24,32,.78); max-width: 34ch; }
.tm__focus { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line-dark); display: flex; flex-direction: column; gap: 6px; }
.tm__focus .label { color: rgba(16,24,32,.5); }
.tm__focus p { font-size: 14px; line-height: 1.5; color: rgba(16,24,32,.65); }

/* 01 hero: fewer, bigger Boxes than the work staircase */
.ahero .whero__rig { --c: clamp(64px, 7.4vw, 136px); top: 46%; }

/* 03 track record: the homepage strip without the staircase below it */
.atrack { padding-bottom: clamp(80px, 9vw, 140px); }

/* 02 our thesis: lime, the line big, three cards with their own Box scene */
.thesis { position: relative; background: var(--lime); color: var(--navy); padding: clamp(110px, 11vw, 180px) 0; }
.thesis__head { position: relative; z-index: 1; padding: 0 var(--pad); margin-bottom: clamp(28px, 3vw, 48px); }
.thesis__head .label { color: rgba(16,24,32,.6); }
.thesis__title { position: relative; z-index: 1; padding: 0 var(--pad); max-width: calc(9.5em + 2 * var(--pad)); font-family: var(--f-head); font-weight: 200; font-size: clamp(48px, 6.6vw, 124px); line-height: .94; letter-spacing: -.05em; }
.thesis__cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 0 var(--pad); margin-top: clamp(64px, 7vw, 120px); }
.tcard { display: flex; flex-direction: column; gap: 10px; }
.tcard__stage { position: relative; aspect-ratio: 4 / 3; margin-bottom: 14px; overflow: hidden; background: var(--navy); perspective: 1000px; container-type: inline-size; }
.tcard__rig { --c: 11cqw; position: absolute; left: 50%; top: 56%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(-36deg); }
.tcard em { font-style: normal; font-size: 12px; font-weight: 500; letter-spacing: .14em; color: rgba(16,24,32,.6); }
.tcard h3 { font-family: var(--f-head); font-weight: 300; font-size: clamp(24px, 2.1vw, 34px); line-height: 1.1; letter-spacing: -.03em; }
.tcard p { font-size: 16px; line-height: 1.45; color: rgba(16,24,32,.72); max-width: 32ch; }

@media (max-width: 1080px) {
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .team__intro { grid-template-columns: 1fr; }
  .team__lede { padding-left: 0; }
  .thesis__cards { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .tcard__stage { max-width: 560px; }
  .ahero .whero__rig { --c: clamp(44px, 9vw, 80px); top: 58%; }
}
@media (max-width: 600px) {
  .team__grid { grid-template-columns: minmax(0, 1fr); }
  /* the whole 4:5 portrait, never a square crop through the forehead; at full width it was all face */
  .tm__photo { width: min(78%, 320px); }
}

/* ============================================================
   Insights (insights.html) and edition pages (insight-*.html)
   ============================================================ */
[data-page="article"] .site-logo, [data-page="legal"] .site-logo { color: var(--navy); }
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.filter__chip { height: 40px; padding: 0 16px; font-size: 14px; color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s; }
.filter__chip:hover { box-shadow: inset 0 0 0 1px var(--white); }
.filter__chip[aria-pressed="true"] { background: var(--lime); color: var(--navy); box-shadow: none; }

/* 01 hero: the newsletter's lockup, its line, Subscribe; its mark as Boxes beside it */
.ihero .whero__rig { --c: clamp(56px, 6.4vw, 118px); top: 52%; }

/* an edition's picture: the homepage treatment (navy and cobalt, baked into the file), a slow zoom on hover */
.ed__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy); }
.ed__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ed__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,24,32,0) 55%, rgba(16,24,32,.35) 100%); pointer-events: none; }
.ed:hover .ed__media img, .latest__grid:hover .ed__media img { transform: scale(1.05); }
.ed__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* 02 latest edition */
.latest { position: relative; background: var(--paper); color: var(--navy); padding: clamp(110px, 11vw, 180px) 0; }
.latest__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; }
.latest__grid > .ed__media { grid-column: 1 / 3; margin: 0 14px 0 var(--pad); }
.latest__copy { grid-column: 3 / 5; padding: 0 var(--pad) 0 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.latest__kicker { color: var(--cobalt); }
.latest .ed__meta { color: rgba(16,24,32,.55); }
.latest__title { font-family: var(--f-head); font-weight: 200; font-size: clamp(32px, 3.4vw, 60px); line-height: 1.02; letter-spacing: -.045em; color: var(--cobalt); transition: color .4s var(--ease); }
.latest__sum { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.45; color: rgba(16,24,32,.72); max-width: 40ch; }
.latest__grid:hover .latest__title { color: var(--navy); }
.latest__more { margin-top: clamp(64px, 7vw, 120px); }
/* the FAQs follow on the same paper: no second full gap */
.latest + .faqs { padding-top: clamp(24px, 3vw, 56px); }
.latest:has(+ .faqs) { padding-bottom: clamp(40px, 4vw, 72px); }
.latest .ed { color: var(--navy); }
.latest .ed .ed__meta { color: rgba(16,24,32,.55); }
.latest .ed__sum { color: rgba(16,24,32,.7); }
.latest .ed:hover .ed__title { color: var(--cobalt); }

/* 03 every edition */
.eds { position: relative; background: var(--navy); color: var(--white); padding: clamp(110px, 11vw, 180px) 0; }
.eds__intro { position: relative; z-index: 1; padding: 0 var(--pad); display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); margin-bottom: clamp(44px, 5vw, 72px); }
.eds__title { font-family: var(--f-head); font-weight: 200; font-size: clamp(52px, 7vw, 128px); line-height: .92; letter-spacing: -.05em; }
.eds__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; padding: 0 var(--pad); }
.ed { display: flex; flex-direction: column; gap: 12px; color: var(--white); }
.ed .ed__media { margin-bottom: 6px; }
.ed .ed__meta { color: rgba(255,255,255,.55); }
.ed__title { font-family: var(--f-head); font-weight: 300; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.15; letter-spacing: -.025em; transition: color .3s var(--ease); }
.ed__sum { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.65); }
.ed:hover .ed__title { color: var(--lime); }
.ed[hidden] { display: none; }
/* Every edition on white */
.eds--light { background: var(--paper); color: var(--navy); padding-top: clamp(20px, 3vw, 56px); } /* follows the latest edition on the same paper */
.eds--light .eds__title { color: var(--cobalt); }
.eds--light .ed { color: var(--navy); }
.eds--light .ed .ed__meta { color: rgba(16,24,32,.55); }
.eds--light .ed__sum { color: rgba(16,24,32,.7); }
.eds--light .ed:hover .ed__title { color: var(--cobalt); }

/* an edition's own page: title and byline, a wide picture, then a reading column beside a slim aside */
.art { position: relative; background: var(--paper); color: var(--navy); padding: calc(var(--hdr-h) + clamp(48px, 5vw, 96px)) 0 clamp(90px, 9vw, 150px); }
.art > *:not(.vlines) { position: relative; z-index: 1; }
.art__top { display: flex; justify-content: flex-start; gap: 12px 28px; flex-wrap: wrap; padding: 0 var(--pad); margin-bottom: clamp(24px, 2.6vw, 40px); }
.art__meta { color: rgba(16,24,32,.55); }
/* back to the list: the site's tertiary link, left of the date */
.art__top { align-items: center; }
.art__back { padding: 10px 0; } /* a taller tap target without looking bigger */
.art__title { padding: 0 var(--pad); max-width: calc(22ch + 2 * var(--pad)); font-family: var(--f-head); font-weight: 200; font-size: clamp(36px, 4.2vw, 76px); line-height: 1; letter-spacing: -.05em; color: var(--cobalt); }
.art__byline { display: flex; align-items: center; gap: 14px; padding: 0 var(--pad); margin: clamp(22px, 2.4vw, 36px) 0 clamp(32px, 3.4vw, 56px); }
.art__byline img { width: 48px; height: 48px; object-fit: cover; }
.art__byline > span { display: flex; flex-direction: column; gap: 4px; }
.art__byline b { font-weight: 500; font-size: 16px; }
.art__byline .label { color: rgba(16,24,32,.55); }
.art__media { margin: 0 var(--pad); aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); }
.art__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.art__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 6vw, 100px); }
.art__aside { grid-column: 1; align-self: start; position: sticky; top: calc(var(--hdr-h) + 40px); padding: 0 14px 0 var(--pad); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.art__aside p { font-size: 15px; line-height: 1.5; color: rgba(16,24,32,.7); max-width: 26ch; }
.art__body { grid-column: 2 / 4; padding: 0 14px; display: flex; flex-direction: column; gap: 24px; max-width: 720px; }
.art__lead { font-family: var(--f-head); font-weight: 300; font-size: clamp(24px, 2.2vw, 36px); line-height: 1.3; letter-spacing: -.02em; }
.art__h { color: var(--cobalt); margin-top: 16px; }
.art__points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark); }
.art__points li { display: block; padding: 22px 0; border-bottom: 1px solid var(--line-dark); }
.art__points em { font-style: normal; font-family: var(--f-head); font-weight: 200; font-size: 28px; line-height: 1; letter-spacing: -.03em; color: var(--cobalt); }
.art__points p { font-size: 18px; line-height: 1.55; }
/* Legal pages (privacy.html, terms.html): the article layout, with contents in the sticky column */
.legal__lede { padding: 0 var(--pad); margin-top: clamp(20px, 2vw, 32px); max-width: calc(52ch + 2 * var(--pad)); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: rgba(16,24,32,.72); }
.legal .art__grid { margin-top: clamp(48px, 5vw, 88px); }
.legal__toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.legal__toc a { color: rgba(16,24,32,.72); transition: color .3s var(--ease); }
.legal__toc a:hover { color: var(--cobalt); }
.legal__body { gap: 0; }
.legal__sec { padding: 28px 0 32px; border-top: 1px solid var(--line-dark); scroll-margin-top: calc(var(--hdr-h) + 24px); }
.legal__sec:first-child { border-top: 0; padding-top: 0; }
.legal__h { font-family: var(--f-head); font-weight: 300; font-size: clamp(24px, 2vw, 32px); line-height: 1.15; letter-spacing: -.03em; color: var(--cobalt); margin-bottom: 14px; }
.legal__sec p, .legal__sec li { font-size: 17px; line-height: 1.6; color: rgba(16,24,32,.82); }
.legal__sec p + p, .legal__sec ul + p, .legal__sec p + ul { margin-top: 12px; }
.legal__sec ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.legal__sec li { position: relative; padding-left: 20px; }
.legal__sec li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--cobalt); }
.legal__sec b { font-weight: 600; color: var(--navy); }
.legal__sec a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal__sec a:hover { color: var(--navy); }
@media (max-width: 900px) { .legal__toc { display: none; } .legal .art__body { grid-column: 1 / -1; padding: 0 var(--pad); } }
/* footer: the legal links beside the licence line */
.ftr__legal { display: inline-flex; gap: 20px; }
.ftr__base .ftr__copy { display: inline-flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; }
/* privacy notes beside the forms */
.cform__privacy, .mmail__privacy { font-size: 13px; line-height: 1.5; }
.cform__privacy { color: rgba(16,24,32,.55); margin-top: 14px; }
.mmail__privacy { color: rgba(255,255,255,.45); }
.cform__privacy a, .mmail__privacy a, .motive__fine a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cform__privacy a:hover { color: var(--cobalt); }
.mmail__privacy a:hover, .motive__fine a:hover { color: var(--lime); }

.art__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 16px; padding: 26px 28px; background: var(--navy); color: var(--white); }
.art__more p { font-family: var(--f-head); font-weight: 300; font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -.02em; }
.eds--more { border-top: 1px solid var(--line-dark); padding-top: clamp(90px, 9vw, 150px); }
.eds__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1080px) {
  .latest__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .latest__grid > .ed__media, .latest__copy { grid-column: 1; margin: 0; padding: 0 var(--pad); }
  .latest__grid > .ed__media { margin: 0 var(--pad); padding: 0; }
  .eds__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ihero .whero__rig { --c: clamp(40px, 8vw, 72px); top: 60%; }
  .art__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .art__body { grid-column: 1; padding: 0 var(--pad); order: -1; }
  .art__aside { grid-column: 1; position: static; padding: 0 var(--pad); }
  .art__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
  .eds__title { font-size: clamp(44px, 13vw, 68px); }
  /* the two sentences flow together on phones, so neither strands a word on its own line */
  .ihero .phero__title .ln, .ihero .phero__title .ln > span { display: inline; }
  .ihero .phero__title .ln + .ln::before { content: " "; }
  .eds__grid, .eds__grid--2 { grid-template-columns: minmax(0, 1fr); }
  .art__more { padding: 22px 20px; }
  .filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--pad) * -1); padding-right: var(--pad); }
  .filter::-webkit-scrollbar { display: none; }
  .filter__chip { flex-shrink: 0; }
}

/* Phones: the inner-page hero Boxes fill the space above the title (they sat at about a third of the width),
   sized by width and capped by height so short phones keep clear of the title.
   Last in the file, so they win over the tablet sizes set with each page's styles above */
@media (max-width: 600px) {
  .whero__rig { --c: clamp(34px, min(13.5vw, 6.6vh), 62px); }
  .ahero .whero__rig { --c: clamp(40px, min(18vw, 8.2vh), 84px); }
  .ihero .whero__rig { --c: clamp(36px, min(16.5vw, 7vh), 78px); top: 52%; }
}

/* ============================================================
   Testimonials (about.html): one sideways row of quotes. Native scroll with snap (swipe on touch, arrows on desktop),
   so it holds any number; js/main.js keeps the arrows and progress line in step
   ============================================================ */
.tst { position: relative; background: var(--paper); color: var(--navy); padding: clamp(100px, 10vw, 170px) 0 clamp(80px, 8vw, 130px); overflow: hidden; }
/* right after the team, on the same paper: the team's own bottom space is enough */
.team + .tst { padding-top: clamp(8px, 1vw, 20px); }
.tst__head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 var(--pad); margin-bottom: clamp(36px, 4vw, 64px); }
.tst__head .label { color: rgba(16,24,32,.55); }
.tst__title { margin-top: 14px; font-family: var(--f-head); font-weight: 200; font-size: clamp(48px, 6vw, 112px); line-height: .94; letter-spacing: -.05em; color: var(--cobalt); }
.tst__nav { display: flex; align-items: center; gap: 8px; }
.tst__more { margin-right: 18px; color: var(--navy); }
.tst__btn { width: 48px; height: 48px; display: grid; place-items: center; font-size: 18px; color: var(--navy); box-shadow: inset 0 0 0 1px rgba(16,24,32,.3); transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), opacity .3s; }
.tst__btn:hover:not(:disabled) { background: var(--navy); color: var(--lime); box-shadow: inset 0 0 0 1px var(--navy); }
.tst__btn:disabled { opacity: .3; cursor: default; }
.tst__track { position: relative; z-index: 1; display: flex; gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); padding: 0 var(--pad) 4px; margin: 0; list-style: none; scrollbar-width: none; overscroll-behavior-x: contain; }
.tst__track::-webkit-scrollbar { display: none; }
.tst__track:focus-visible { outline: 1px solid var(--cobalt); outline-offset: 6px; }
.tq { flex: 0 0 min(64vw, 820px); scroll-snap-align: start; }
.tq__fig { height: 100%; display: flex; flex-direction: column; gap: 26px; margin: 0; padding: clamp(26px, 2.6vw, 44px); background: var(--white); box-shadow: inset 0 0 0 1px rgba(16,24,32,.08); }
.tq__mark { font-family: var(--f-head); font-weight: 200; font-size: 96px; line-height: .6; height: 40px; color: var(--cobalt); }
.tq__quote { margin: 0; }
.tq__quote p { font-family: var(--f-head); font-weight: 300; font-size: clamp(22px, 2.2vw, 36px); line-height: 1.22; letter-spacing: -.025em; text-wrap: pretty; }
.tq__quote em { font-style: normal; color: var(--cobalt); }
.tq__who { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.tq__who img { width: 56px; height: 56px; flex-shrink: 0; object-fit: cover; background: var(--paper); }
.tq__who > span { display: flex; flex-direction: column; gap: 3px; }
.tq__who b { font-weight: 500; font-size: 16px; }
.tq__who span span { font-size: 14px; line-height: 1.4; color: rgba(16,24,32,.6); }
.tq__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-top: 18px; border-top: 1px solid rgba(16,24,32,.12); }
.tq__foot .label { color: rgba(16,24,32,.55); }
.tq__foot .tq__tag { color: var(--cobalt); }
.tst__bar { position: relative; z-index: 1; height: 1px; margin: clamp(28px, 3vw, 44px) var(--pad) 0; background: rgba(16,24,32,.14); }
.tst__bar i { position: absolute; left: 0; top: -1px; height: 3px; width: var(--w, 33%); transform: translateX(var(--x, 0)); background: var(--cobalt); transition: transform .4s var(--ease-out), width .4s var(--ease-out); }
@media (max-width: 1080px) { .tq { flex-basis: min(78vw, 680px); } }
@media (max-width: 600px) {
  .tst__head { flex-direction: column; align-items: flex-start; }
  .tst__nav { width: 100%; justify-content: flex-end; }
  .tst__more { margin-right: auto; }
  .tq { flex-basis: 86vw; }
  .tq__fig { gap: 20px; }
  .tq__mark { font-size: 72px; height: 28px; }
}

/* ============================================================
   Registration (about.html): mainland Dubai, said with weight. A lime check, the line, and the facts in one ruled row
   ============================================================ */
.lic { position: relative; background: var(--paper); color: var(--navy); padding: clamp(100px, 10vw, 170px) 0 clamp(80px, 8vw, 130px); }
.lic__top { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 48px); align-items: start; padding: 0 var(--pad); }
.lic__badge { width: clamp(64px, 7vw, 112px); aspect-ratio: 1; display: grid; place-items: center; background: var(--lime); color: var(--navy); }
.lic__badge svg { width: 46%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.lic__copy .label { color: rgba(16,24,32,.55); }
.lic__title { margin-top: 14px; font-family: var(--f-head); font-weight: 200; font-size: clamp(48px, 6.6vw, 124px); line-height: .94; letter-spacing: -.05em; color: var(--cobalt); max-width: 11em; }
.lic__lede { margin-top: clamp(20px, 2vw, 30px); max-width: 44ch; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.45; color: rgba(16,24,32,.78); }
.lic__facts { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(48px, 5vw, 88px) 0 0; border-top: 1px solid rgba(16,24,32,.16); border-bottom: 1px solid rgba(16,24,32,.16); }
.lic__facts > div { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2vw, 30px) var(--pad); }
.lic__facts > div + div { border-left: 1px solid rgba(16,24,32,.12); }
.lic__facts dt { color: rgba(16,24,32,.55); }
.lic__facts dd { margin: 0; font-family: var(--f-head); font-weight: 300; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.15; letter-spacing: -.02em; }
.lic__no { font-variant-numeric: tabular-nums; color: var(--cobalt); }
@media (max-width: 1080px) {
  .lic__facts { grid-template-columns: 1fr 1fr; }
  .lic__facts > div:nth-child(3) { border-left: 0; }
  .lic__facts > div:nth-child(n+3) { border-top: 1px solid rgba(16,24,32,.12); }
}
@media (max-width: 600px) {
  .lic__top { grid-template-columns: 1fr; }
  .lic__facts { grid-template-columns: 1fr; }
  .lic__facts > div + div { border-left: 0; border-top: 1px solid rgba(16,24,32,.12); }
}

/* ============================================================
   Pull quotes (homepage): a quiet tail to the work, on the same navy. One quote at a time, large and centred;
   they share one cell and cross-fade (js/main.js: pullQuotes). Any number: each gets a dot
   ============================================================ */
.pqs { position: relative; background: var(--navy); color: var(--white); padding: 0 var(--pad) clamp(70px, 7vw, 120px); }
.pqs__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: clamp(26px, 2.4vw, 36px); border-top: 1px solid rgba(255,255,255,.14); }
.pqs__head .label { color: rgba(255,255,255,.55); }
.pqs__stage { display: grid; margin: clamp(40px, 5vw, 80px) auto 0; max-width: 980px; text-align: center; }
.pq { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 2.4vw, 34px); margin: 0; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out), visibility 0s .8s; }
.pq.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .8s var(--ease-out) .15s, transform .9s var(--ease-out) .15s, visibility 0s; }
.pq blockquote { margin: 0; }
.pq p { font-family: var(--f-head); font-weight: 200; font-size: clamp(30px, 3.8vw, 64px); line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.pq figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.6); text-align: left; }
.pq figcaption b { font-weight: 500; color: var(--white); }
.pq img { width: 40px; height: 40px; flex-shrink: 0; object-fit: cover; }
.pqs__dots { display: flex; justify-content: center; gap: 4px; margin-top: clamp(30px, 3vw, 48px); }
.pqs__dots button { width: 28px; height: 28px; display: grid; place-items: center; }
.pqs__dots button::before { content: ""; width: 8px; height: 8px; background: rgba(255,255,255,.3); transition: background .4s, transform .4s var(--ease); }
.pqs__dots button[aria-pressed="true"]::before { background: var(--lime); transform: scale(1.25); }
.pqs__dots button:hover::before { background: rgba(255,255,255,.7); }
@media (max-width: 600px) {
  .pqs__head { flex-direction: column; align-items: flex-start; }
  .pq figcaption { flex-direction: column; text-align: center; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .pq, .pq.is-on { transition: none; transform: none; } }

/* Motive: the leave check, the booking line under the title, the optional name, the top three in their own words */
.mleave { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(16,24,32,.72); backdrop-filter: blur(4px); }
.mleave[hidden] { display: none; }
.mleave__box { width: min(100%, 420px); display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--navy-2); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.mleave__box b { font-family: var(--f-head); font-weight: 300; font-size: 28px; letter-spacing: -.03em; line-height: 1.05; }
.mleave__box p { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.7); }
.mleave__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.mleave__btns .btn { height: 48px; }
.mbook__sub { font-size: 15px; line-height: 1.45; opacity: .8; max-width: 44ch; }
.mmail__form { flex-wrap: nowrap; }
.mmail__name { flex: 0 1 38%; border-right: 1px solid rgba(255,255,255,.14); margin-right: 12px; }
/* phones: name on its own row, email and send below it, all inside the one box. .motive--page in front so it
   outranks the page composer's fixed 52px height, which otherwise left the email row spilling out of the box */
@media (max-width: 600px) {
  .motive--page .mmail__form, .mmail__form { height: auto; flex-wrap: wrap; align-items: center; row-gap: 0; padding: 4px 6px 6px 16px; }
  .mmail__name { flex: 1 1 100%; height: 46px; margin: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .mmail__form input[type="email"] { flex: 1 1 0; min-width: 0; height: 50px; }
  .mmail__form .composer__send { flex-shrink: 0; }
  .mmail__privacy { margin-top: 4px; }
}
.signal summary small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.55); font-weight: 300; letter-spacing: 0; text-transform: none; }

/* ============================================================
   Pricing strip (services.html): the three fee bands, up front. Ruled columns like the trust strip, on paper
   ============================================================ */
.tiers { position: relative; background: var(--paper); color: var(--navy); padding: clamp(56px, 6vw, 96px) var(--pad) 0; }
.tiers__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.tiers__head .label { margin: 0; color: rgba(16,24,32,.55); }
.tiers__head h2.label { color: var(--navy); }
.tiers__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(16,24,32,.12); }
.tier { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: clamp(22px, 2.2vw, 32px) clamp(16px, 2vw, 32px) clamp(24px, 2.4vw, 34px) 0; }
.tier + .tier { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid rgba(16,24,32,.1); }
.tier__name { font-family: var(--f-head); font-weight: 300; font-size: clamp(24px, 2vw, 32px); line-height: 1.1; letter-spacing: -.03em; color: var(--navy); }
.tier p { max-width: 30ch; font-size: 15px; line-height: 1.5; color: rgba(16,24,32,.65); }
/* the fee: the one thing in colour, clear without shouting; the weeks sit quietly beside it */
.tier__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-top: auto; padding-top: 14px; }
.tier__price b { font-family: var(--f-head); font-weight: 300; font-size: clamp(28px, 2.5vw, 42px); line-height: 1; letter-spacing: -.035em; color: var(--cobalt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tier__price small { font-size: .5em; letter-spacing: .02em; margin-right: .1em; vertical-align: .35em; }
.tier__price > span { font-size: 14px; color: rgba(16,24,32,.55); }
.tiers__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 18px 0 0; border-top: 1px solid rgba(16,24,32,.1); font-size: 15px; color: rgba(16,24,32,.7); }
.tiers + .bxs { padding-top: clamp(70px, 7vw, 120px); }
/* each Box's usual band, inside its open panel */
.acc__tier { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding-bottom: 18px; opacity: 0; transition: opacity .5s; }
.acc__item.is-open .acc__tier { opacity: 1; transition-delay: .15s; }
.acc__tier .label { color: rgba(16,24,32,.5); }
.acc__tier p { font-size: 15px; }
.acc__tier b { font-weight: 600; color: var(--cobalt); }
@media (max-width: 600px) {
  .tiers__head { flex-direction: column; gap: 6px; }
  .tiers__grid { grid-template-columns: 1fr; }
  .tier, .tier + .tier { padding: 18px 0 20px; border-left: 0; }
  .tier + .tier { border-top: 1px solid rgba(16,24,32,.1); }
}