/* =========================================================
   Tech Pundits — design tokens
   ========================================================= */
:root {
  /* Colour */
  --black: #1f1e1d;
  --black-2: #171615;
  --black-3: #111;
  --charcoal: #2b2a2c;
  --line-dark: #3a3937;
  --grey-1: #464646;
  --grey-2: #626262;   /* 5.9:1 on white */
  --grey-3: #a3a19e;   /* 6.6:1 on --black */
  --grey-4: #c9c7c3;
  --line: #e4e2df;
  --white: #fff;
  --off-white: #f7f6f3;
  --bg-word: #f0efec;
  --accent: #f84525;        /* fills, large type, decoration */
  --accent-ink: #c8361a;    /* accent as small text on light: 5.1:1 */

  /* Type */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", system-ui, sans-serif;

  /* Motion */
  --ease-1: cubic-bezier(0.475, 0.425, 0, 0.995);
  --ease-2: cubic-bezier(0.835, -0.005, 0.06, 1);
  --ease-3: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-4: cubic-bezier(0.63, 0.03, 0.21, 1);
  --ease-bounce: cubic-bezier(0.34, 1.7, 0.64, 1);
  --t-xs: 0.45s;
  --t-sm: 0.85s;
  --t-md: 1.25s;
  --t-lg: 1.55s;

  /* Layout */
  --container: 1200px;
  --gutter: 40px;
  --section-pad: clamp(104px, 12vw, 180px);
  --header-h: 92px;
}
@media (max-width: 1440px) { :root { --container: 1080px; } }
@media (max-width: 1280px) { :root { --container: 960px; } }
@media (max-width: 768px)  { :root { --gutter: 20px; --header-h: 68px; } }

/* =========================================================
   Base + browser surfaces
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #8a8885 var(--black); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: #6d6b68; border-radius: 10px; border: 2px solid var(--black); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::selection { background: var(--accent); color: var(--white); }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  caret-color: var(--accent);
}
body.is-loading, body.menu-open { overflow: hidden; }
@media (max-width: 768px) { body { font-size: 16px; line-height: 1.65; } }

img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
[data-feature-off] { display: none !important; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 500; background: var(--black); color: var(--white); padding: 8px 16px; }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

.theme-dark     { background: var(--black); color: var(--white); }
.theme-red      { background: var(--accent); color: var(--white); }
.theme-light    { background: var(--white); color: var(--black); }
.theme-offwhite { background: var(--off-white); color: var(--black); }

/* =========================================================
   Type
   ========================================================= */
.type-hero {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(44px, 6.2vw, 96px); line-height: 1.02; letter-spacing: -0.035em;
  margin: 0 0 36px;
}
.type-h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(36px, 4.2vw, 64px); line-height: 1.06; letter-spacing: -0.03em;
  margin-bottom: 32px;
}
.type-h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 2vw, 30px); line-height: 1.2; letter-spacing: -0.015em;
}
.type-statement {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 44px); line-height: 1.32; letter-spacing: -0.02em;
  margin: 0; max-width: 24ch;
}
.type-svc {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 2.8vw, 44px); line-height: 1.08; letter-spacing: -0.025em;
  margin-bottom: 18px;
}

/* Text link with swipe underline */
.text-link {
  position: relative; display: inline-block; text-decoration: none;
  font-weight: 600; font-size: 15px; letter-spacing: 0.02em;
  padding: 4px 0;
}
.text-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
}
.text-link:hover::after { animation: swipe-line var(--t-md) var(--ease-1); }
.text-link--light { color: var(--grey-4); }
.text-link--light:hover { color: var(--white); }
@keyframes swipe-line {
  0%   { transform: scaleX(1); transform-origin: right; }
  45%  { transform: scaleX(0); transform-origin: right; }
  46%  { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* Letter-by-letter bounce on hover (letters are wrapped in .ch by JS) */
.ch { display: inline-block; white-space: pre; }
.split-hover:hover .ch, .split-hover.is-hot .ch, .split-hover:focus-visible .ch {
  animation: ch-bounce 0.7s var(--ease-3) both;
  animation-delay: calc(var(--i) * 28ms);
}
@keyframes ch-bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-34%); }
  58%  { transform: translateY(8%); }
  78%  { transform: translateY(-3%); }
  100% { transform: translateY(0); }
}

/* =========================================================
   Buttons — a resting dot that springs open into a full pill
   ========================================================= */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 16px;
  height: 52px; padding: 0 24px 0 22px;
  border: 0; background: none; cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--black);
  transition: color var(--t-xs) var(--ease-1);
}
.btn::before {
  content: ""; position: absolute; inset: 2px auto 2px 0; width: 48px; border-radius: 26px;
  background: var(--accent); z-index: -1;
  transition: width 0.6s var(--ease-bounce), background var(--t-xs) var(--ease-1);
}
.btn:hover, .btn:focus-visible { color: var(--white); }
.btn:hover::before, .btn:focus-visible::before { width: 100%; background: var(--black); }
.btn--light { color: var(--white); }
.btn--light:hover, .btn--light:focus-visible { color: var(--black); }
.btn--light:hover::before, .btn--light:focus-visible::before { background: var(--white); }
.btn--solid { color: var(--white); padding: 0 28px; }
.btn--solid::before { width: 100%; background: var(--black); inset: 0; }
.btn--solid:hover::before { background: var(--black-3); transform: scale(1.04); transition: transform 0.5s var(--ease-bounce); }
.btn[disabled] { opacity: 0.55; cursor: progress; }

.btn__plus { position: relative; width: 12px; height: 12px; flex: none; transition: transform 0.6s var(--ease-bounce); }
.btn__plus::before, .btn__plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: currentColor; border-radius: 1px; }
.btn__plus::after { transform: rotate(90deg); }
.btn:hover .btn__plus, a:hover > .btn__plus, .model:hover .btn__plus { transform: rotate(90deg); }

/* =========================================================
   Reveal on enter
   ========================================================= */
.js [data-reveal="up"] {
  opacity: 0; transform: translate3d(0, 40px, 0);
  transition: opacity var(--t-sm) var(--ease-1) var(--d, 0s), transform var(--t-md) var(--ease-1) var(--d, 0s);
}
.js [data-reveal="clip"] { clip-path: inset(100% 0 0 0); transition: clip-path var(--t-lg) var(--ease-1) var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.w > span { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform var(--t-md) var(--ease-1); transition-delay: calc(var(--i) * 0.022s); }
.is-in .w > span { transform: none; }

/* =========================================================
   Preloader
   ========================================================= */
.preloader {
  position: fixed; inset: 0; z-index: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--black-3); color: var(--white);
  clip-path: inset(0 0 0 0); transition: clip-path var(--t-md) var(--ease-4);
}
.preloader__word { display: flex; overflow: hidden; font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 8vw, 110px); line-height: 1; letter-spacing: -0.02em; }
.preloader__word span { display: inline-block; transform: translateY(110%); animation: pl-up var(--t-md) var(--ease-1) forwards; }
.preloader__word span:nth-child(2) { animation-delay: .05s; } .preloader__word span:nth-child(3) { animation-delay: .1s; }
.preloader__word span:nth-child(4) { animation-delay: .15s; } .preloader__word span:nth-child(5) { animation-delay: .2s; }
.preloader__word span:nth-child(6) { animation-delay: .25s; } .preloader__word span:nth-child(7) { animation-delay: .3s; }
.preloader__word--accent span { color: var(--accent); }
.preloader__bar { width: 160px; height: 2px; margin-top: 30px; background: rgba(255,255,255,.14); overflow: hidden; border-radius: 2px; }
.preloader__bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: pl-bar 1.3s var(--ease-4) forwards; }
.preloader.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.no-preloader .preloader { display: none; }
@keyframes pl-up { to { transform: none; } }
@keyframes pl-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =========================================================
   Custom cursor — dot, trailing ring, and a halo that blooms over links
   ========================================================= */
.cursor { display: none; }
.has-cursor .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 450; pointer-events: none; }
.cursor > * { position: fixed; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent); transition: opacity .3s; }
.cursor__ring {
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 1px solid rgba(150, 148, 145, .55);
  transition: opacity .35s var(--ease-1), width .5s var(--ease-bounce), height .5s var(--ease-bounce), margin .5s var(--ease-bounce);
}
.cursor__halo {
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  display: grid; place-items: center;
}
.cursor__halo::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(160, 158, 154, .2);
  transform: scale(0);
  transition: transform .6s var(--ease-bounce), background .35s var(--ease-1);
}
.cursor__label {
  position: relative; font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--white); white-space: nowrap; opacity: 0; transform: scale(.6);
  transition: opacity .3s var(--ease-1), transform .5s var(--ease-bounce);
}
.cursor.is-hover .cursor__halo::before { transform: scale(1); }
.cursor.is-hover .cursor__ring { opacity: 0; }
.cursor.is-label .cursor__halo::before { transform: scale(1.45); background: var(--black-3); }
.cursor.is-label .cursor__label { opacity: 1; transform: none; }
.cursor.is-label .cursor__ring, .cursor.is-label .cursor__dot { opacity: 0; }
.cursor.is-hidden > * { opacity: 0 !important; }
.cursor.is-down .cursor__ring { width: 28px; height: 28px; margin: -14px 0 0 -14px; }

/* =========================================================
   Header
   ========================================================= */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--header-h); padding: 0 var(--gutter);
  color: var(--white); transition: color var(--t-xs) var(--ease-1);
  pointer-events: none;
  --hdr-bg: var(--black);
}
.header > * { pointer-events: auto; }
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--hdr-bg);
  opacity: 0; transform: translateY(-100%);
  transition: opacity var(--t-xs) var(--ease-1), transform var(--t-sm) var(--ease-3), background var(--t-xs) var(--ease-1);
}
.header.is-compact::before { opacity: 1; transform: none; }
body[data-header-theme="light"] .header { color: var(--black); --hdr-bg: var(--white); }
body[data-header-theme="red"] .header { --hdr-bg: var(--accent); }
body.menu-open .header { color: var(--white); }
body.menu-open .header::before { opacity: 0; }

.logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.logo__mark {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--black-3);
  font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -0.01em;
  transition: background var(--t-xs) var(--ease-1), color var(--t-xs) var(--ease-1);
}
body[data-header-theme="red"]:not(.menu-open) .header .logo__mark { background: var(--black); color: var(--white); }
.logo__mark--lg { width: 72px; height: 72px; font-size: 23px; }
.logo__word {
  font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; white-space: nowrap;
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--t-sm) var(--ease-1), opacity var(--t-sm) var(--ease-1), transform var(--t-sm) var(--ease-1);
}
.header.is-compact .logo__word { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateX(-10px); }
body.menu-open .header .logo__word { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }
@media (max-width: 480px) { .logo__word { display: none; } }

.header__nav { display: flex; gap: 36px; margin-left: auto; }
.header__nav a { position: relative; text-decoration: none; font-weight: 500; font-size: 15px; letter-spacing: 0.01em; opacity: .82; transition: opacity var(--t-xs); }
.header__nav a:hover, .header__nav a.is-current { opacity: 1; }
.header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--t-sm) var(--ease-3); }
.header__nav a:hover::after, .header__nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
body.menu-open .header__nav { opacity: 0; pointer-events: none; }
@media (max-width: 1180px) { .header__nav { display: none; } }

.header__right { display: flex; align-items: center; gap: 30px; }
.header__talk {
  position: relative; text-decoration: none; display: inline-block; padding: 6px 0; white-space: nowrap; flex-shrink: 0;
  font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
}
.header__talk::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
.header__talk:hover::after { animation: swipe-line var(--t-md) var(--ease-1); }

/* Menu button: a background disc that springs open on hover */
.menu-btn {
  position: relative; width: 56px; height: 56px; border-radius: 50%; padding: 0;
  border: 1px solid currentColor; background: none; cursor: pointer; color: inherit;
  transition: border-color var(--t-xs) var(--ease-1);
}
.menu-btn__fill {
  position: absolute; inset: -1px; border-radius: 50%; background: var(--white);
  transform: scale(0); transition: transform 0.55s var(--ease-bounce), background var(--t-xs) var(--ease-1);
}
body[data-header-theme="light"] .menu-btn__fill { background: var(--black); }
.menu-btn:hover .menu-btn__fill, .menu-btn:focus-visible .menu-btn__fill { transform: scale(1.12); }
.menu-btn__lines { position: absolute; inset: 0; color: currentColor; transition: color .3s var(--ease-1); }
.menu-btn:hover .menu-btn__lines, .menu-btn:focus-visible .menu-btn__lines { color: var(--black); }
body[data-header-theme="light"] .menu-btn:hover .menu-btn__lines { color: var(--white); }
.menu-btn__lines i { position: absolute; left: 18px; width: 20px; height: 2px; background: currentColor; border-radius: 1px; transition: transform var(--t-sm) var(--ease-3), top var(--t-sm) var(--ease-3); }
.menu-btn__lines i:first-child { top: 23px; }
.menu-btn__lines i:last-child { top: 31px; }
body.menu-open .menu-btn { border-color: var(--accent); }
body.menu-open .menu-btn__fill { background: var(--accent); transform: scale(1); }
body.menu-open .menu-btn__lines { color: var(--black-3) !important; }
body.menu-open .menu-btn__lines i:first-child { top: 27px; transform: rotate(45deg); }
body.menu-open .menu-btn__lines i:last-child { top: 27px; transform: rotate(-45deg); }
@media (max-width: 768px) {
  .header__right { gap: 18px; }
  .header__talk { font-size: 12px; letter-spacing: .1em; padding: 4px 0; }
  .menu-btn { width: 48px; height: 48px; }
  .menu-btn__lines i { left: 14px; }
  .menu-btn__lines i:first-child { top: 19px; } .menu-btn__lines i:last-child { top: 27px; }
  body.menu-open .menu-btn__lines i:first-child, body.menu-open .menu-btn__lines i:last-child { top: 23px; }
}

/* =========================================================
   Menu — circular wipe from the button
   ========================================================= */
.menu { position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none; transition: visibility 0s 1.1s; }
body.menu-open .menu { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.menu__circle {
  position: fixed; left: var(--cx, 90%); top: var(--cy, 46px);
  width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: var(--black-3); transform: scale(0); transition: transform 1.1s var(--ease-4);
}
body.menu-open .menu__circle { transform: scale(var(--menu-scale, 60)); }
.menu__inner {
  position: relative; height: 100%;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px;
  max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: var(--header-h) var(--gutter) 40px;
  color: var(--white);
}
/* Menu items: each word has a dim twin behind it and a number. Hovering one slides it right and shows its
   number; the others wipe away to their dim twins (classes set in main.js). Items enter slanted from the left. */
.menu__links { position: relative; padding-left: 64px; }
.menu__links::before {
  content: "Menu"; position: absolute; left: 0; top: 0;
  font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--grey-3);
  transform: rotate(-90deg) translate(-100%, 0); transform-origin: left top;
  opacity: 0; transition: opacity var(--t-xs) var(--ease-1);
}
body.menu-open .menu__links::before { opacity: 1; transition: opacity var(--t-sm) var(--ease-1) .5s; }
.menu__item {
  position: relative;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5.6vw, 84px); line-height: 1.14; letter-spacing: -0.035em;
  opacity: 0; transform: translateX(-100px) skewX(5deg);
  transition: opacity var(--t-xs) var(--ease-1), transform var(--t-xs) var(--ease-1);
}
body.menu-open .menu__item { opacity: 1; transform: none; transition: opacity var(--t-sm) var(--ease-1), transform var(--t-md) var(--ease-4); }
body.menu-open .menu__item:nth-child(1) { transition-delay: .4s; }
body.menu-open .menu__item:nth-child(2) { transition-delay: .46s; }
body.menu-open .menu__item:nth-child(3) { transition-delay: .52s; }
body.menu-open .menu__item:nth-child(4) { transition-delay: .58s; }
body.menu-open .menu__item:nth-child(5) { transition-delay: .64s; }
body.menu-open .menu__item:nth-child(6) { transition-delay: .7s; }
body.menu-open .menu__item:nth-child(7) { transition-delay: .76s; }
.menu__word {
  position: relative; z-index: 2; display: inline-block; text-decoration: none; color: var(--white);
  clip-path: inset(0 0 0 0);
  transition: clip-path .75s var(--ease-4), transform .75s var(--ease-4);
}
.menu__ghost {
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; color: #3a3937;
  opacity: 0; transition: transform .75s var(--ease-4), opacity .2s linear;
}
.menu__num {
  position: absolute; left: 0; top: .62em; z-index: 1; pointer-events: none;
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1; color: var(--accent);
  opacity: 0; transform: translateX(20px); transition: opacity .85s var(--ease-4), transform .85s var(--ease-4);
}
.menu__links.has-focus .menu__ghost { opacity: 1; }
.menu__item.is-out .menu__word { clip-path: inset(0 100% 0 0); }
.menu__item.is-focused .menu__word, .menu__item.is-focused .menu__ghost { transform: translateX(40px); }
.menu__item.is-focused .menu__num { opacity: 1; transform: none; }
.menu__word:focus-visible { outline-offset: 6px; }
@media (max-width: 768px) {
  .menu__links { padding-left: 0; }
  .menu__links::before { display: none; }
  .menu__item.is-focused .menu__word, .menu__item.is-focused .menu__ghost { transform: none; }
}
/* Same treatment as the contact section: small caps labels, red-underlined links */
.menu__aside { display: grid; gap: 36px; align-content: center; opacity: 0; transition: opacity var(--t-xs) var(--ease-1); }
.menu__aside-title { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-3); margin: 0 0 10px; }
.menu__aside a, .menu__aside address { font-size: 18px; line-height: 1.6; color: var(--white); }
.menu__aside a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color var(--t-xs) var(--ease-1); }
.menu__aside a:hover { color: var(--accent); }
@media (max-width: 768px) {
  .menu__aside { gap: 18px; }
  .menu__aside-title { font-size: 12px; margin-bottom: 4px; }
  .menu__aside a, .menu__aside address { font-size: 16px; line-height: 1.5; }
}
body.menu-open .menu__aside { opacity: 1; transition: opacity var(--t-sm) var(--ease-1) .8s; }
@media (max-width: 768px) { .menu__inner { grid-template-columns: 1fr; align-content: center; } }

/* =========================================================
   Scroll indicator + mobile CTA
   ========================================================= */
.scroll-indicator {
  position: fixed; right: calc(var(--gutter) - 4px); bottom: 40px; z-index: 80;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  color: var(--white); transition: color var(--t-xs) var(--ease-1), opacity var(--t-sm) var(--ease-1);
}
body[data-header-theme="light"] .scroll-indicator { color: var(--black); }
body.menu-open .scroll-indicator, body.is-loading .scroll-indicator { opacity: 0; }
.scroll-indicator__label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.scroll-indicator__track { position: relative; width: 1px; height: 64px; background: color-mix(in srgb, currentColor 25%, transparent); }
.scroll-indicator__track i { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(var(--p, 0)); }
@media (max-width: 1024px) { .scroll-indicator { display: none; } }

/* Side label: the section in view, read bottom-to-top on the right edge */
.section-label {
  position: fixed; right: calc(var(--gutter) - 6px); top: 50%; z-index: 80;
  transform: translateY(-50%); pointer-events: none;
  color: var(--white); transition: color var(--t-xs) var(--ease-1), opacity var(--t-sm) var(--ease-1);
}
.section-label[data-on="light"] { color: var(--black); }
.section-label__text {
  display: block; writing-mode: vertical-rl; transform: rotate(180deg) translateY(-24px); opacity: 0;
  font-size: 12px; font-weight: 600; letter-spacing: .4em; text-transform: uppercase; white-space: nowrap;
  transition: opacity .25s var(--ease-1), transform .25s var(--ease-1);
}
.section-label.is-shown .section-label__text { opacity: 1; transform: rotate(180deg); transition-duration: var(--t-sm), var(--t-md); }
body.menu-open .section-label, body.is-loading .section-label { opacity: 0; }
@media (max-width: 768px) { .section-label { right: 3px; } .section-label__text { font-size: 10px; letter-spacing: .32em; } }

.mobile-cta {
  position: fixed; left: 50%; bottom: 16px; z-index: 85;
  display: none; align-items: center; gap: 14px;
  height: 52px; padding: 0 24px; border-radius: 26px;
  background: var(--black-3); color: var(--white); text-decoration: none;
  font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.45);
  transform: translate(-50%, 140%); transition: transform .6s var(--ease-bounce);
}
@media (max-width: 768px) { .mobile-cta { display: inline-flex; } }
body.show-mobile-cta:not(.menu-open) .mobile-cta { transform: translate(-50%, 0); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; gap: 72px;
  padding: calc(var(--header-h) + 48px) 0 64px;
}
.hero__bgword {
  position: absolute; right: 3.5vw; top: 50%;
  display: flex; flex-direction: column; align-items: center;
  transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(80px, 12.5vh, 140px); line-height: .88;
  color: #292827; pointer-events: none; user-select: none;
}
.hero__bgword span { display: block; opacity: 0; transform: translateY(60px); transition: opacity var(--t-md) var(--ease-1), transform var(--t-lg) var(--ease-1); }
.is-ready .hero__bgword span { opacity: 1; transform: none; }
.is-ready .hero__bgword span:nth-child(2) { transition-delay: .06s; } .is-ready .hero__bgword span:nth-child(3) { transition-delay: .12s; }
.is-ready .hero__bgword span:nth-child(4) { transition-delay: .18s; } .is-ready .hero__bgword span:nth-child(5) { transition-delay: .24s; }
.is-ready .hero__bgword span:nth-child(6) { transition-delay: .3s; }  .is-ready .hero__bgword span:nth-child(7) { transition-delay: .36s; }

.hero__content { position: relative; }
.hero .type-hero { max-width: 15ch; }
.hero__accent { color: var(--accent); }
.hero .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero .line > span { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform var(--t-md) var(--ease-1); }
.is-ready .hero .line > span { transform: none; }
.is-ready .hero .line:nth-child(2) > span { transition-delay: .08s; }
.is-ready .hero .line:nth-child(3) > span { transition-delay: .16s; }
.hero__lede { max-width: 52ch; color: #d9d7d3; margin-bottom: 40px; font-size: clamp(17px, 1.3vw, 20px); }
.hero__actions { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }

/* Pilot track */
.track {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding-top: 28px; counter-reset: t;
}
.track::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-dark); }
.track::after {
  content: ""; position: absolute; z-index: 1; top: -6px; left: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent);
  transition: left 2.6s var(--ease-4) 0.6s;
}
.track.is-in::after { left: calc(75% + 18px); box-shadow: 0 0 0 6px rgba(248, 69, 37, .22); }
.track li:last-child::before, .track.is-in li:last-child::before { background: var(--accent); border-color: var(--accent); }
.track li { position: relative; }
.track li::before {
  content: ""; position: absolute; top: -34px; left: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--black); border: 2px solid var(--grey-3);
  transition: background var(--t-xs) var(--ease-1) var(--lit, 0s), border-color var(--t-xs) var(--ease-1) var(--lit, 0s);
}
/* each stop lights up as the red marker passes it */
.track.is-in li::before { background: var(--white); border-color: var(--white); }
.track li:nth-child(1) { --lit: .6s; }
.track li:nth-child(2) { --lit: 1.5s; }
.track li:nth-child(3) { --lit: 2.2s; }
.track li:nth-child(4) { --lit: 2.9s; }
.track b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.01em; line-height: 1.3; }
.track span { display: block; font-size: 15px; line-height: 1.5; color: var(--grey-3); }
.track__facts { margin: 22px 0 0; font-size: 15px; color: var(--grey-3); }
.track__facts strong { color: var(--white); font-weight: 600; }
@media (max-width: 768px) {
  .hero { gap: 72px; padding-top: calc(var(--header-h) + 88px); padding-bottom: 88px; }
  /* One huge word set on its side and cropped by the edge, read bottom-to-top */
  .hero__bgword {
    right: -0.14em; flex-direction: row; writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
    font-size: min(46vw, 230px); line-height: .8; color: #2a2927;
  }
  .hero .type-hero { margin-bottom: 28px; line-height: 1.04; }
  .hero__lede { line-height: 1.7; margin-bottom: 44px; }
  .hero__actions { gap: 24px; }
  /* Steps as a vertical timeline. Each stop draws its own segment down to the next one in red,
     so the line always ends exactly on the last dot (a travelling marker never lands precisely). */
  .track { grid-template-columns: 1fr; row-gap: 26px; padding: 0 0 0 36px; }
  .track::before, .track::after { display: none; }
  .track li::before { top: 6px; left: -36px; z-index: 1; }
  .track li:not(:last-child)::after {
    content: ""; position: absolute; left: -30px; top: 19px; width: 1px; height: calc(100% + 13px);
    background: linear-gradient(var(--accent), var(--accent)) top / 1px 0 no-repeat, var(--line-dark);
    transition: background-size .7s var(--ease-4) var(--lit, 0s);
  }
  .track.is-in li:not(:last-child)::after { background-size: 1px 100%; }
  .track b { font-size: 19px; }
}

/* =========================================================
   Statement (red band)
   ========================================================= */
.statement { padding: var(--section-pad) 0; }

/* =========================================================
   Background words
   ========================================================= */
.bgword {
  position: absolute; z-index: 0;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(120px, 17vw, 260px); line-height: 1; letter-spacing: -0.04em;
  color: var(--bg-word); white-space: nowrap; pointer-events: none; user-select: none;
}
.theme-offwhite .bgword { color: #ecebe7; }
.bgword--pilot { left: -0.03em; bottom: -0.2em; } /* anchored bottom-left, under the intro column, fully in view */
.bgword--about { top: 40px; left: -1vw; }
/* On phones these words either crop mid-word or leave a blank band below the content */
@media (max-width: 640px) { .bgword { display: none; } }

/* =========================================================
   Pilot
   ========================================================= */
.pilot { position: relative; overflow: hidden; padding: var(--section-pad) 0; }
.pilot__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.05fr; gap: 96px; align-items: start; }
.pilot__intro p { color: var(--grey-1); max-width: 46ch; margin-bottom: 40px; }
.pilot__list { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 48px; padding-top: 12px; }
.pilot__list li { border-top: 2px solid var(--black); padding-top: 24px; }
.pilot__list svg { width: 30px; height: 30px; fill: none; stroke: var(--accent-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
.pilot__list h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 10px; }
.pilot__list p { font-size: 16px; line-height: 1.6; color: var(--grey-2); margin: 0; }
@media (max-width: 1024px) { .pilot__grid { grid-template-columns: 1fr; gap: 64px; } }
@media (max-width: 640px) { .pilot__list { grid-template-columns: 1fr; gap: 40px; } }

/* =========================================================
   Services — pinned stage with three slides
   ========================================================= */
.services { position: relative; }
.services__stage { position: relative; height: 100vh; min-height: 700px; overflow: hidden; }
.services__top { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + 8px); z-index: 3; }
.services__title { font-size: clamp(28px, 2.4vw, 38px); margin: 0; }
.services__slides { position: absolute; inset: 0; }
.svc { position: absolute; inset: 0; pointer-events: none; }
.svc.is-active { pointer-events: auto; }

.svc__bgword {
  position: absolute; left: 50%; top: 54%; z-index: 0;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(130px, 16vw, 270px); line-height: 1; letter-spacing: -0.045em;
  color: var(--bg-word); white-space: nowrap;
  transform: translate(-50%, -50%) translateY(80px); opacity: 0;
  transition: opacity var(--t-xs) var(--ease-1), transform var(--t-md) var(--ease-1);
}
.svc.is-active .svc__bgword { opacity: 1; transform: translate(-50%, -50%); transition-duration: var(--t-sm), var(--t-md); }

/* Working drawings: frameless figures drawn straight onto the page.
   They draw in when their slide is "on" (.is-on, set in main.js). */
.svc__fig {
  position: absolute; z-index: 1; top: 54%;
  left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  width: min(480px, 36vw); margin: 0;
  transform: translateY(-50%);
  opacity: 0; transition: opacity var(--t-xs) var(--ease-1);
}
.svc.is-on .svc__fig { opacity: 1; transition-duration: .2s; }
.fig { color: var(--black); }
.fig::before {
  /* registration corners, like the crop marks on a drawing sheet */
  content: ""; position: absolute; inset: -44px -36px -28px; pointer-events: none;
  border: 1px solid var(--grey-4);
  -webkit-mask: conic-gradient(at 16px 16px, #0000 75%, #000 0) 0 0 / calc(100% - 16px) calc(100% - 16px);
          mask: conic-gradient(at 16px 16px, #0000 75%, #000 0) 0 0 / calc(100% - 16px) calc(100% - 16px);
  opacity: 0; transform: scale(1.06);
  transition: opacity var(--t-xs) var(--ease-1), transform var(--t-md) var(--ease-3);
}
.svc.is-on .fig::before { opacity: 1; transform: none; }
.fig figcaption {
  margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--grey-2);
  opacity: 0; transition: opacity var(--t-sm) var(--ease-1);
}
.svc.is-on .fig figcaption { opacity: 1; transition-delay: 1.1s; }

/* Fig: value / effort matrix */
.matrix {
  position: relative; aspect-ratio: 1 / .78;
  background:
    linear-gradient(var(--line), var(--line)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat;
}
.matrix::before, .matrix::after { content: ""; position: absolute; left: 0; bottom: 0; background: var(--black); transition: transform var(--t-md) var(--ease-3); }
.matrix::before { width: 1px; height: 100%; transform-origin: bottom; transform: scaleY(0); }
.matrix::after { height: 1px; width: 100%; transform-origin: left; transform: scaleX(0); }
.svc.is-on .matrix::before { transform: none; }
.svc.is-on .matrix::after { transform: none; transition-delay: .1s; }
.matrix__axis { position: absolute; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--black); }
.matrix__axis::after { content: ""; position: absolute; width: 6px; height: 6px; border: solid var(--black); border-width: 1px 1px 0 0; }
.matrix__axis--y { left: 0; top: 0; transform: translate(-50%, -100%) translateY(-14px); }
.matrix__axis--y::after { left: 50%; bottom: -12px; transform: translateX(-50%) rotate(-45deg); }
.matrix__axis--x { right: 0; bottom: 0; transform: translate(100%, 50%) translateX(16px); }
.matrix__axis--x::after { left: -14px; top: 50%; transform: translateY(-50%) rotate(45deg); }
.matrix__zone {
  position: absolute; left: 14px; top: 12px; font-size: 12px; color: var(--grey-2);
  opacity: 0; transition: opacity var(--t-sm) var(--ease-1) .5s;
}
.svc.is-on .matrix__zone { opacity: 1; }
.matrix__pts { list-style: none; margin: 0; padding: 0; }
.matrix__pts li {
  position: absolute; left: var(--x); top: var(--y);
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  font-size: 14px; color: var(--grey-1);
  opacity: 0; transform: translate(var(--tx, 0), -50%) translateY(14px);
  transition: opacity var(--t-xs) var(--ease-1), transform .7s var(--ease-bounce);
}
.matrix__pts li::before { content: ""; flex: none; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--black); }
.svc.is-on .matrix__pts li { opacity: 1; transform: translate(var(--tx, 0), -50%); transition-delay: calc(.45s + var(--d) * .12s); }
.matrix__pts li.is-left { --tx: -100%; flex-direction: row-reverse; }
.matrix__pts li.is-left::before { margin: 0 -4.5px 0 0; }
.matrix__pts li.is-pick { color: var(--black); font-weight: 600; }
.matrix__pts li.is-pick::before { width: 15px; height: 15px; margin-left: -7.5px; background: var(--accent); box-shadow: 0 0 0 7px rgba(248, 69, 37, .14); }
.matrix__note {
  position: absolute; left: 14%; top: 20%; margin: 0;
  transform: translate(-50%, 10px); padding-top: 28px;
  font-size: 12px; font-weight: 600; color: var(--accent-ink); white-space: nowrap;
  opacity: 0; transition: opacity var(--t-xs) var(--ease-1);
}
.matrix__note::before { content: ""; position: absolute; left: 50%; top: 4px; width: 1px; height: 20px; background: var(--accent); transform-origin: top; transform: scaleY(0); transition: transform .6s var(--ease-3); }
.svc.is-on .matrix__note { opacity: 1; transition-delay: 1s; }
.svc.is-on .matrix__note::before { transform: none; transition-delay: .9s; }

/* Fig: answer with its source */
.answer__q, .answer__a { margin: 0; opacity: 0; transform: translateY(18px); transition: opacity var(--t-xs) var(--ease-1), transform var(--t-md) var(--ease-3); }
.answer__q { font-size: 17px; color: var(--grey-2); padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--grey-4); }
.answer__a {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 2.5vw, 38px);
  line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance;
}
.svc.is-on .answer__q { opacity: 1; transform: none; }
.svc.is-on .answer__a { opacity: 1; transform: none; transition-delay: .3s; }
.answer__a mark {
  color: inherit; background: linear-gradient(var(--accent), var(--accent)) 0 92% / 0 4px no-repeat;
  transition: background-size .8s var(--ease-3);
}
.svc.is-on .answer__a mark { background-size: 100% 4px; transition-delay: .9s; }
.answer__src { display: flex; align-items: center; margin-top: 34px; }
.answer__file { flex: none; font-size: 13px; font-weight: 600; padding-right: 12px; opacity: 0; transition: opacity var(--t-xs) var(--ease-1); }
.svc.is-on .answer__file { opacity: 1; transition-delay: 1s; }
.answer__lead { flex: 1; height: 1px; background: var(--accent); position: relative; transform-origin: left; transform: scaleX(0); transition: transform .7s var(--ease-3); }
.answer__lead::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.svc.is-on .answer__lead { transform: none; transition-delay: 1.1s; }
.doc {
  flex: none; display: grid; align-content: center; gap: 7px; width: 96px; height: 124px; padding: 14px 12px;
  border: 1px solid var(--grey-4); background: var(--white);
  clip-path: inset(0 0 100% 0); transition: clip-path var(--t-sm) var(--ease-2) .6s;
}
.svc.is-on .doc { clip-path: inset(0); }
.doc i { display: block; height: 4px; border-radius: 2px; background: var(--line); }
.doc i:nth-child(odd) { width: 78%; }
.doc i.is-hl { background: var(--accent); width: 100%; }

/* Fig: weekly health chart */
.health { display: block; width: 100%; height: auto; overflow: visible; }
.health path { fill: none; }
.health path:not(.health__line) { vector-effect: non-scaling-stroke; }
.health__grid { stroke: var(--line); stroke-width: 1; }
.health__base { stroke: var(--black); stroke-width: 1; }
.health__budget { stroke: var(--grey-2); stroke-width: 1; stroke-dasharray: 4 5; }
.health__tune { stroke: var(--grey-4); stroke-width: 1; stroke-dasharray: 2 4; }
.health text { font-family: var(--font-body); font-size: 11.5px; fill: var(--grey-2); }
.health .health__lbl--tune { fill: var(--black); font-weight: 600; }
.health__line { stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-4); }
.health__line--q { stroke: var(--accent); }
.health__line--c { stroke: var(--black); }
.svc.is-on .health__line { stroke-dashoffset: 0; transition-delay: .3s; }
.svc.is-on .health__line--c { transition-delay: .45s; }
.health .health__end { font-weight: 600; opacity: 0; transition: opacity var(--t-xs) var(--ease-1); }
.health .health__end--q { fill: var(--accent-ink); }
.health .health__end--c { fill: var(--black); }
.svc.is-on .health .health__end { opacity: 1; transition-delay: 1.6s; }

.svc__text { position: absolute; z-index: 2; top: 54%; left: 54%; width: min(470px, 38vw); transform: translateY(-50%); }
.svc__text > * { opacity: 0; transform: translateY(30px); transition: opacity var(--t-xs) var(--ease-1), transform var(--t-xs) var(--ease-1); }
.svc.is-active .svc__text > * { opacity: 1; transform: none; transition: opacity var(--t-sm) var(--ease-1), transform var(--t-md) var(--ease-1); }
.svc.is-active .svc__text > :nth-child(1) { transition-delay: .12s; }
.svc.is-active .svc__text > :nth-child(2) { transition-delay: .2s; }
.svc.is-active .svc__text > :nth-child(3) { transition-delay: .28s; }
.svc.is-active .svc__text > :nth-child(4) { transition-delay: .36s; }
.svc__text p { color: var(--grey-1); font-size: 18px; line-height: 1.65; }

.svc__detail { margin: 4px 0 30px; }
.svc__detail summary {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 600; color: var(--grey-1);
}
.svc__detail summary::-webkit-details-marker { display: none; }
.svc__detail summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--grey-4); border-radius: 50%; font-size: 14px; line-height: 1; transition: transform .5s var(--ease-bounce); }
.svc__detail[open] summary::before { transform: rotate(45deg); }
.svc__detail summary:hover { color: var(--black); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tags li { font-size: 14px; line-height: 20px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--grey-1); background: var(--white); }

.services__dots { position: absolute; right: calc(var(--gutter) + 6px); top: 50%; transform: translateY(-50%); z-index: 3; display: grid; gap: 14px; }
.services__dots li { width: 8px; height: 8px; border-radius: 50%; background: var(--grey-4); transition: background var(--t-xs) var(--ease-1), transform .5s var(--ease-bounce); }
.services__dots li.is-active { background: var(--accent); transform: scale(1.5); }

@media (max-width: 1024px) {
  /* Pilot above is also white and already ends in a full section pad, so don't double it */
  .services { padding: 0 0 24px; }
  .services__stage { height: auto; min-height: 0; overflow: visible; }
  .services__top { position: static; margin-bottom: 8px; }
  .services__title { font-size: clamp(36px, 6vw, 48px); }
  .services__slides { position: static; }
  .services__dots { display: none; }
  .svc { position: relative; inset: auto; pointer-events: auto; padding: 0 var(--gutter) 88px; overflow: hidden; }
  /* Stacked, the ghost word would sit on top of the drawing, so it's dropped */
  .svc__bgword { display: none; }
  .svc__fig { position: relative; left: auto; top: auto; width: min(100%, 460px); margin: 72px auto 64px; transform: none; }
  .fig::before { inset: -32px -16px -18px; }
  .matrix { margin: 0 52px 0 14px; }
  .matrix__pts li { font-size: 13px; }
  .svc__text { position: relative; left: auto; top: auto; width: 100%; max-width: 640px; margin: 0 auto; transform: none; }
  .svc .svc__text > * { opacity: 1; transform: none; }
}

/* =========================================================
   About + team + values
   ========================================================= */
.about { position: relative; overflow: hidden; padding: var(--section-pad) 0; }
.about > .container { position: relative; z-index: 1; }
.about__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: start; padding-top: 80px; }
.about__copy { color: var(--grey-1); padding-top: 10px; max-width: 54ch; }

.team { margin-top: 120px; }
.team__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 48px 40px; margin-top: 40px; }
.person__photo { aspect-ratio: 4 / 5; background: var(--line); overflow: hidden; margin-bottom: 20px; border-radius: 4px; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter var(--t-sm) var(--ease-1), transform var(--t-md) var(--ease-1); }
.person:hover .person__photo img { filter: none; transform: scale(1.04); }
.person__photo--empty { display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 56px; color: var(--grey-4); }
.person h4 { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; }
.person__role { font-size: 15px; color: var(--accent-ink); font-weight: 600; margin: 2px 0 10px; }
.person__bio { font-size: 16px; line-height: 1.6; color: var(--grey-1); margin: 0 0 10px; }
.person a { font-size: 15px; font-weight: 600; }

.values { margin-top: 120px; }
.values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 40px; margin-top: 40px; }
.values__grid li { border-top: 2px solid var(--black); padding-top: 24px; }
.values__grid h4 { font-family: var(--font-display); font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 10px; }
.values__grid p { font-size: 16px; line-height: 1.6; color: var(--grey-2); margin: 0; }
@media (max-width: 1024px) {
  .about__intro { grid-template-columns: 1fr; gap: 0; padding-top: 40px; }
  .values__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .values__grid { grid-template-columns: 1fr; gap: 36px; } .team, .values { margin-top: 88px; } .about__intro { padding-top: 0; } }

/* =========================================================
   Proof
   ========================================================= */
.proof { padding: var(--section-pad) 0; }
.proof__cases { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 48px; margin-top: 24px; }
.case { display: block; text-decoration: none; border-top: 2px solid var(--black); padding-top: 24px; }
.case__client { font-size: 15px; font-weight: 600; color: var(--accent-ink); }
.case h3 { font-family: var(--font-display); font-size: 28px; line-height: 1.2; letter-spacing: -0.015em; margin: 6px 0 12px; }
.case p { color: var(--grey-1); font-size: 17px; }
.case__result { font-weight: 600; color: var(--black) !important; }
.proof__quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 96px; }
.quote blockquote { margin: 0 0 18px; font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2vw, 28px); line-height: 1.35; letter-spacing: -0.01em; }
.quote figcaption { font-size: 15px; color: var(--grey-2); }
.quote figcaption b { color: var(--black); font-weight: 600; }
@media (max-width: 768px) { .proof__cases, .proof__quotes { grid-template-columns: 1fr; } }

/* =========================================================
   Approach
   ========================================================= */
.approach { padding: var(--section-pad) 0; }
.approach__lede { max-width: 52ch; color: var(--grey-3); }
.models { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; margin-top: 64px; }
.models__side { display: grid; gap: 20px; }
.model {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 36px 36px 32px; min-height: 230px; border-radius: 6px;
  background: var(--charcoal); color: var(--white); text-decoration: none;
  transition: background var(--t-xs) var(--ease-1), transform .6s var(--ease-bounce);
}
.model:hover { background: #363537; transform: translateY(-4px); }
.model h3 { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 12px; }
.model p { font-size: 16px; line-height: 1.6; color: var(--grey-3); margin: 0 0 24px; max-width: 46ch; }
.model__cta { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.model--lead { background: var(--white); color: var(--black); min-height: 480px; padding: 44px; }
.model--lead:hover { background: var(--white); }
.model--lead h3 { font-size: clamp(44px, 4.6vw, 72px); letter-spacing: -0.04em; }
.model--lead p { color: var(--grey-1); font-size: 18px; }
.model--lead .model__cta { color: var(--accent-ink); }
.model__tag { position: absolute; top: 36px; left: 44px; font-size: 14px; font-weight: 600; color: var(--accent-ink); }
.model__facts { display: flex; gap: 40px; margin: 0 0 28px; }
.model__facts dt { font-size: 13px; color: var(--grey-2); }
.model__facts dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; }

.steps__title { margin-top: 120px; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; margin-top: 40px; }
.steps li { position: relative; padding-top: 28px; border-top: 1px solid var(--line-dark); }
.steps__num { position: absolute; top: -14px; left: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--black); border: 1px solid var(--accent); color: var(--white); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.steps h4, .steps h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.4; letter-spacing: -0.01em; margin: 10px 0 8px; }
.steps p { font-size: 16px; line-height: 1.6; color: var(--grey-3); margin: 0; }
@media (max-width: 1024px) {
  .models { grid-template-columns: 1fr; }
  .model--lead { min-height: 400px; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 52px; }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
  .model, .model--lead { padding: 28px 24px; }
  .model__tag { top: 26px; left: 24px; }
  .steps__title { margin-top: 88px; }
}

/* =========================================================
   Insights (feature-flagged)
   ========================================================= */
.insights { padding: var(--section-pad) 0; }
.insights__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px 64px; margin-top: 24px; }
.insights__grid > :nth-child(even) { position: relative; top: 160px; }
.insights__grid.has-offset { padding-bottom: 160px; }
.post { display: block; text-decoration: none; }
.post__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--black); margin-bottom: 24px; border-radius: 4px; }
.post__img::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--x, 30%) var(--y, 40%), rgba(248,69,37,.7), transparent 38%); transition: transform var(--t-md) var(--ease-1); }
.post:hover .post__img::before { transform: scale(1.08); }
.post__meta { font-size: 14px; font-weight: 600; color: var(--accent-ink); }
.post__meta span { color: var(--grey-2); font-weight: 400; margin-left: 12px; }
.post__title { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.3; letter-spacing: -0.015em; margin-top: 6px; }
.post:hover .post__title { text-decoration: underline; text-decoration-thickness: 1px; }
.insights__empty { grid-column: 1 / -1; padding: 56px; border: 1px dashed var(--grey-4); color: var(--grey-2); border-radius: 6px; }
.insights__empty strong { display: block; font-family: var(--font-display); font-size: 26px; color: var(--black); margin-bottom: 6px; }
@media (max-width: 768px) {
  .insights__grid { grid-template-columns: 1fr; gap: 56px; }
  .insights__grid > :nth-child(even) { top: 0; }
  .insights__grid.has-offset { padding-bottom: 0; }
  .insights__empty { padding: 32px 20px; }
}

/* =========================================================
   Talk band — off-white floods in from where the cursor enters
   ========================================================= */
.talk-band {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  padding: clamp(80px, 13vw, 180px) var(--gutter);
  background: var(--black-3); color: var(--white); text-decoration: none;
}
.talk-band__fill {
  position: absolute; inset: 0; z-index: -1; background: var(--off-white);
  clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
  transition: clip-path 0.95s var(--ease-1);
}
.talk-band.is-open .talk-band__fill { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); transition-duration: 1.1s; }
.talk-band__word {
  display: block; max-width: var(--container); margin: 0 auto;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(72px, 15vw, 250px); line-height: .92; letter-spacing: -0.05em;
  transition: color 0.5s var(--ease-1);
}
.talk-band.is-open .talk-band__word { color: var(--black); }
.talk-band__arrow {
  display: inline-block; margin-left: 0.12em; color: var(--accent); font-weight: 500;
  transition: transform .7s var(--ease-bounce);
}
.talk-band.is-open .talk-band__arrow { transform: translateY(0.12em) rotate(-45deg); }
.talk-band:focus-visible { outline-offset: -8px; }

/* =========================================================
   Contact
   ========================================================= */
.contact { position: relative; padding: var(--section-pad) 0; }
.contact__grid { display: grid; grid-template-columns: 1fr 320px; gap: 112px; align-items: start; }
.contact__lede { color: var(--grey-1); margin-bottom: 48px; max-width: 56ch; }
.contact__aside { display: grid; gap: 44px; padding-top: 24px; }
.contact__aside h3 { font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-2); margin-bottom: 10px; }
.contact__aside a, .contact__aside address { font-size: 18px; line-height: 1.6; }
.contact__aside a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.next { counter-reset: n; display: grid; gap: 14px; }
/* "What happens next", placed between the intro and the form so reassurance comes before the commitment */
.contact__next { margin: -12px 0 48px; padding: 24px 0; border-top: 1px solid var(--grey-4); border-bottom: 1px solid var(--grey-4); }
.contact__next h3 { font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-2); margin-bottom: 16px; }
.next--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.next--row li { font-size: 16px; }
@media (max-width: 768px) { .next--row { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.field__count { margin: 8px 0 0; font-size: 14px; color: var(--grey-2); text-align: right; }
.field__count.is-limit { color: var(--accent-ink); font-weight: 600; }
.next li { counter-increment: n; position: relative; padding-left: 40px; font-size: 17px; line-height: 1.5; }
.next li::before { content: counter(n); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--black); color: var(--white); font-size: 13px; font-weight: 700; }

.form { display: grid; gap: 30px; }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.field { position: relative; display: block; }
.field input, .field textarea, .field select {
  width: 100%; padding: 28px 0 10px; border: 0; border-bottom: 1px solid #a9a7a3; border-radius: 0;
  background: transparent; color: var(--black); font: 400 18px/1.5 var(--font-body);
  outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color var(--t-xs) var(--ease-1), box-shadow var(--t-xs) var(--ease-1);
}
.field textarea { resize: vertical; min-height: 120px; }
.field label {
  position: absolute; left: 0; top: 28px; font-size: 18px; line-height: 1.5; color: var(--grey-2);
  pointer-events: none; transform-origin: left top;
  transition: transform var(--t-xs) var(--ease-3), color var(--t-xs) var(--ease-1);
}
.field label em { font-style: normal; color: var(--grey-2); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--black); box-shadow: 0 1px 0 0 var(--black); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field--select label { transform: translateY(-24px) scale(.78); color: var(--black); font-weight: 600; }
.field--select select { cursor: pointer; padding-right: 28px; }
.field--select::after { content: ""; position: absolute; right: 4px; top: 40px; width: 8px; height: 8px; border-right: 2px solid var(--black); border-bottom: 2px solid var(--black); transform: rotate(45deg); pointer-events: none; }
.field__error { display: none; margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--accent-ink); }
.field__error::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--accent-ink); color: var(--white); font-size: 12px; font-weight: 800; vertical-align: 1px; }
.field.is-invalid .field__error { display: block; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--accent-ink); box-shadow: 0 1px 0 0 var(--accent-ink); }

.chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips legend { width: 100%; margin-bottom: 12px; font-size: 16px; font-weight: 600; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span {
  display: inline-block; padding: 9px 18px; border: 1px solid #a9a7a3; border-radius: 999px; font-size: 15px; line-height: 22px; cursor: pointer;
  transition: background var(--t-xs) var(--ease-1), color var(--t-xs) var(--ease-1), border-color var(--t-xs) var(--ease-1), transform .5s var(--ease-bounce);
}
.chips span:hover { border-color: var(--black); }
.chips input:checked + span { background: var(--black); border-color: var(--black); color: var(--white); }
.chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.chips span.is-pulse { animation: chip-pulse .7s var(--ease-bounce); }
@keyframes chip-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

.form__foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 6px; }
.form__note { margin: 0; font-size: 15px; color: var(--grey-2); }
.form__status { margin: 0; font-size: 17px; font-weight: 600; outline: none; }
.form__status:empty { display: none; }
.form__status.is-error { color: var(--accent-ink); }
.form__status.is-ok { color: var(--black); }

/* Sent: replaces the form */
.form-sent { border-top: 2px solid var(--black); padding-top: 40px; max-width: 560px; outline: none; scroll-margin-top: calc(var(--header-h) + 32px); }
.form-sent > * { opacity: 0; transform: translateY(16px); transition: opacity var(--t-sm) var(--ease-1), transform var(--t-md) var(--ease-1); }
.form-sent.is-in > * { opacity: 1; transform: none; }
.form-sent.is-in > :nth-child(2) { transition-delay: .1s; } .form-sent.is-in > :nth-child(3) { transition-delay: .18s; }
.form-sent.is-in > :nth-child(4) { transition-delay: .26s; } .form-sent.is-in > :nth-child(5) { transition-delay: .34s; }
.form-sent__check { width: 64px; height: 64px; margin-bottom: 28px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.form-sent__check circle { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; transition: stroke-dashoffset 1s var(--ease-4) .2s; }
.form-sent__check path { stroke: var(--black); stroke-width: 3; stroke-dasharray: 34; stroke-dashoffset: 34; transition: stroke-dashoffset .5s var(--ease-4) 1s; }
.form-sent.is-in .form-sent__check circle, .form-sent.is-in .form-sent__check path { stroke-dashoffset: 0; }
.form-sent__eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.form-sent__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 18px; }
.form-sent__body { margin: 0 0 32px; font-size: 17px; line-height: 1.7; color: var(--grey-1); }
.form-sent__again { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: inherit; }
.form__privacy { margin: 0; font-size: 14px; color: var(--grey-2); }

@media (max-width: 1024px) {
  .contact__grid { grid-template-columns: 1fr; gap: 72px; }
  .contact__aside { padding-top: 0; grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 768px) {
  .form__row { grid-template-columns: 1fr; gap: 30px; }
  .contact__aside { grid-template-columns: 1fr; }
}

/* =========================================================
   Footer
   ========================================================= */
.footer { padding: 112px 0 40px; }
.footer__title { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--white); margin-bottom: 22px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 48px; }
.footer__brand p { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.25; letter-spacing: -0.02em; margin-top: 28px; }
.footer a { text-decoration: none; transition: color var(--t-xs) var(--ease-1); }
.footer a:hover { color: var(--accent); }
/* Email and phone read as the primary way in: red, underlined. The address sits quieter below. */
.footer a[data-contact] {
  display: table; margin-bottom: 14px; font-size: 15px; color: var(--accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.footer a[data-contact]:hover { color: var(--white); }
.footer address { margin-top: 26px; font-size: 15px; line-height: 1.6; color: var(--grey-3); }
.footer address a:hover { color: var(--white); }
/* Page links match the address: same size, same grey, white on hover */
.footer__nav li { font-size: 15px; line-height: 1.6; padding: 4px 0; }
.footer__nav a { color: var(--grey-3); }
.footer__nav a:hover { color: var(--white); }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 96px; padding-top: 28px; border-top: 1px solid var(--line-dark); font-size: 14px; color: var(--grey-3); }
@media (max-width: 1024px) { .footer__grid { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px)  { .footer__grid { grid-template-columns: 1fr; } .footer { padding: 80px 0 96px; } }

/* =========================================================
   Homepage: service links inside the pinned slides
   ========================================================= */
.services__top { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }

/* Service name list: a quiet typographic list, each name paired with a small red plus */
.slist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 6vw, 112px); }
.slist--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slist a {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 11px 0; text-decoration: none; color: inherit;
  font-size: 19px; line-height: 1.45;
}
.slist__name { position: relative; }
.slist__name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--t-sm) var(--ease-3);
}
.slist a:hover .slist__name::after, .slist a:focus-visible .slist__name::after { transform: scaleX(1); transform-origin: left; }
.slist__plus { position: relative; flex: none; width: 9px; height: 9px; color: var(--accent); transition: transform .6s var(--ease-bounce); }
.slist__plus::before, .slist__plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -.75px; background: currentColor; }
.slist__plus::after { transform: rotate(90deg); }
.slist a:hover .slist__plus, .slist a:focus-visible .slist__plus { transform: rotate(90deg) scale(1.3); }
.slist a:focus-visible { outline-offset: 2px; }
/* inside the homepage's narrow slide column */
.svc__text .slist { column-gap: 36px; margin: 0 0 30px; }
.svc__text .slist a { font-size: 16px; padding: 7px 0; color: var(--black); }
@media (max-width: 768px) {
  .slist, .slist--3 { grid-template-columns: minmax(0, 1fr); }
  .slist a { font-size: 17px; padding: 10px 0; }
}

/* Index block: heading on the left, the list set in from the right (hub, related, homepage) */
.sindex__head { max-width: 15ch; margin-bottom: 72px; }
.sindex .slist { margin-left: auto; width: min(100%, 780px); }
.sindex .slist--3 { width: 100%; }
.related .sindex__head { max-width: none; margin-bottom: 24px; }
@media (max-width: 1024px) { .sindex .slist { width: 100%; } .sindex__head { margin-bottom: 40px; } }

/* =========================================================
   Services page — Baunfire-style layout
   ========================================================= */
.blabel { display: block; margin-bottom: 36px; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .34em; text-transform: uppercase; color: var(--accent-ink); }
.blabel--light { color: var(--black-3); } /* small text on the red band: dark ink passes 4.5:1, white does not */

.bhero { min-height: 0; justify-content: flex-start; gap: 0; padding: calc(var(--header-h) + 104px) 0 128px; }
.bhero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(820px, 64vw); aspect-ratio: 1; left: 18%; top: -36%;
  border: 1px solid var(--line); border-radius: 50%;
}
.bhero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 80px; align-items: end; }
.bhero .type-hero { max-width: 14ch; margin: 0 0 0 clamp(0px, 4vw, 56px); font-size: clamp(42px, 5vw, 80px); }
.bhero__aside p { margin: 0 0 22px; max-width: 28ch; font-size: 16px; line-height: 1.65; color: var(--grey-1); }
.bhero__dash { display: block; width: 14px; height: 1px; background: var(--grey-2); }

.bmedia {
  position: relative; margin: 0; width: calc(100% - max(var(--gutter), 6vw));
  height: clamp(460px, 52vw, 760px); overflow: hidden;
  display: grid; place-items: center;
}
.bmedia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bmedia.has-photo .bmedia__fallback { display: none; }
.bmedia__fallback { width: min(640px, calc(100% - 2 * var(--gutter))); }
.bmedia::after { /* faint registration grid, so the panel reads as a drawing sheet */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.5px) 0 0 / 28px 28px;
  -webkit-mask: linear-gradient(90deg, #000 0, transparent 40%, transparent 60%, #000 100%);
          mask: linear-gradient(90deg, #000 0, transparent 40%, transparent 60%, #000 100%);
}
.bmedia.has-photo::after { display: none; }

.bprocess { padding: var(--section-pad) 0; position: relative; overflow: hidden; }
.bprocess__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; align-items: start; }
.bprocess__lead { position: sticky; top: calc(var(--header-h) + 64px); }
.bprocess__title { margin: 0; }
/* An orbit under the title: hairline circle, dashed inner ring, and a red dot that travels it */
.bprocess__orbit { position: relative; width: min(360px, 80%); aspect-ratio: 1; margin-top: 72px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); }
.bprocess__orbit::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .14); }
.bprocess__orbit::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); opacity: .9; }
.bprocess__orbit i { position: absolute; inset: 0; animation: orbit 24s linear infinite; }
.bprocess__orbit i::after { content: ""; position: absolute; top: -7px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 6px rgba(255, 255, 255, .12); }
@keyframes orbit { to { transform: rotate(360deg); } }
.bstep { position: relative; max-width: 460px; }
.bstep + .bstep { margin-top: 128px; }
.bstep__mark { display: block; width: 64px; height: 64px; margin-bottom: 18px; overflow: visible; transform: rotate(calc(var(--r, 0deg) + var(--spin, 0deg))); }
.bstep__ring { fill: none; stroke: #4a4845; stroke-width: 1; stroke-dasharray: 2 4; }
.bstep__dot { fill: var(--accent); }
.bstep__line { stroke: var(--grey-3); stroke-width: 1; }
/* Step marks: the line draws and the dot lands on reveal, then the ring turns and the dot drifts inside it.
   Scrolling adds --spin (set from main.js) so each mark also rotates as it passes. */
.bstep__ring, .bstep__dot { transform-box: fill-box; transform-origin: center; }
.js .bstep .bstep__line { stroke-dasharray: 66; stroke-dashoffset: 66; transition: stroke-dashoffset 1.1s var(--ease-3) .15s; }
.js .bstep .bstep__dot { transform: scale(0); transition: transform .9s var(--ease-bounce) .35s; }
.bstep.is-in .bstep__line { stroke-dashoffset: 0; }
.bstep.is-in .bstep__dot { transform: none; }
.bstep.is-in .bstep__ring { animation: orbit 16s linear infinite; }
.bstep.is-in:nth-child(even) .bstep__ring { animation-direction: reverse; }
.bstep.is-in .bstep__dot { animation: step-drift 7s ease-in-out 1.3s infinite; }
.bstep.is-in:nth-child(2) .bstep__dot { animation-delay: 2.2s; }
.bstep.is-in:nth-child(3) .bstep__dot { animation-delay: 3.1s; }
.bstep.is-in:nth-child(4) .bstep__dot { animation-delay: 1.8s; }
.bstep.is-in:nth-child(5) .bstep__dot { animation-delay: 2.7s; }
@keyframes step-drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-4px, 3px); }
  50% { transform: translate(-7px, -5px) scale(.92); }
  75% { transform: translate(-2px, -6px); }
}
/* The large mark beside "Here's how we can work together" turns slowly too. */
.bpartner__mark .bstep__ring { transform-box: fill-box; transform-origin: center; }
.bpartner__mark.is-in .bstep__ring { animation: orbit 40s linear infinite; }
.bpartner__mark.is-in .bstep__dot { transform-box: fill-box; transform-origin: center; animation: step-drift 9s ease-in-out infinite; }
.bstep h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2vw, 30px); letter-spacing: -0.015em; margin-bottom: 14px; }
.bstep p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--grey-3); }

/* Section drawings, in the same language as the hero and red band:
   a large hairline circle with a dashed inner orbit, and a patch of dots */
.bdeco { position: absolute; z-index: 0; pointer-events: none; }
.bdeco--ring { width: clamp(420px, 52vw, 780px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); right: -22vw; bottom: -12%; }
.bdeco--ring::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .1); }
.bdeco--ring::before { /* the red dot riding the orbit */
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--accent);
  top: 14%; right: 26%; box-shadow: 0 0 0 7px rgba(248, 69, 37, .18);
}
.bdeco--dots { width: 240px; height: 180px; right: 5vw; top: 96px;
  background: radial-gradient(circle, rgba(248, 69, 37, .6) 1.4px, transparent 1.9px) 0 0 / 16px 16px;
  -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); mask: radial-gradient(closest-side, #000 40%, transparent); }
.bprocess > .container { position: relative; z-index: 1; }

.bpartner { padding: var(--section-pad) 0; position: relative; overflow: hidden; }
.bpartner > .container { position: relative; z-index: 1; }
.bpartner .bdeco--ring { width: 520px; border-color: var(--line); right: -300px; left: auto; top: -220px; bottom: auto; }
.bpartner .bdeco--ring::after { border-color: var(--grey-4); opacity: .6; }
.bpartner .bdeco--ring::before { display: none; }
.bpartner .bdeco--dots { left: max(var(--gutter), calc((100vw - var(--container)) / 2)); right: auto; top: auto; bottom: 64px;
  background-image: radial-gradient(circle, rgba(31, 30, 29, .22) 1.4px, transparent 1.9px); }
/* Under the heading, until a real photo fills that slot: the step mark, drawn large */
.bpartner__mark { display: block; width: min(300px, 70%); margin-top: 72px; overflow: visible; }
.bpartner__photo:not([hidden]) ~ .bpartner__mark { display: none; }
.bpartner__mark .bstep__ring { stroke: var(--grey-4); stroke-width: .5; }
.bpartner__mark .bstep__line { stroke: var(--grey-2); stroke-width: .5; }
.bpartner__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; align-items: start; }
.bpartner .type-h2 { max-width: 12ch; }
.bpartner__photo { margin: 48px 0 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; }
.bpartner__photo img { width: 100%; height: 100%; object-fit: cover; }
.bpartner__list { padding-top: 160px; }
.bpartner__list li { max-width: 420px; }
.bpartner__list li + li { margin-top: 88px; }
.bpartner__list h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2vw, 30px); letter-spacing: -0.015em; margin-bottom: 14px; }
.bpartner__list p { font-size: 17px; line-height: 1.7; color: var(--grey-1); margin-bottom: 18px; }

.bcta { position: relative; overflow: hidden; padding: clamp(96px, 11vw, 160px) 0; }
.bcta::before {
  content: ""; position: absolute; pointer-events: none; width: 900px; aspect-ratio: 1; left: 22%; top: -60%;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
}
.bcta .container { position: relative; }
.bcta__title { max-width: 17ch; margin: 0 0 40px clamp(0px, 2vw, 24px); }
/* On the red band: dark label, white dot; the pill fills white on hover */
.btn--onred { color: var(--black-3); }
.btn--onred::before { background: var(--white); }
.btn--onred:hover, .btn--onred:focus-visible { color: var(--black-3); }
.btn--onred:hover::before, .btn--onred:focus-visible::before { background: var(--white); }

@media (max-width: 1024px) {
  .bhero__grid, .bprocess__grid, .bpartner__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .bhero .type-hero { margin-left: 0; }
  .bprocess__lead { position: static; }
  .bprocess__orbit { width: 200px; margin-top: 40px; }
  .bstep + .bstep { margin-top: 72px; }
  .bpartner__list { padding-top: 0; }
  .bpartner__mark { display: none; }
  .bdeco--dots { width: 160px; height: 120px; }
  .bprocess .bdeco--dots { top: auto; bottom: 48px; }
  .bpartner__list li + li { margin-top: 56px; }
}
@media (max-width: 768px) {
  .bhero { padding: calc(var(--header-h) + 64px) 0 72px; }
  .bmedia { width: 100%; height: auto; padding: 64px 0; }
  .bhero::before { width: 120vw; left: 10%; top: -20%; }
}

/* =========================================================
   Service detail pages — Baunfire-style layout
   ========================================================= */
.shero { min-height: min(100svh, 920px); justify-content: center; gap: 0; padding: calc(var(--header-h) + 64px) 0 96px; }
.shero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(760px, 60vw); aspect-ratio: 1; left: 12%; top: -30%;
  border: 1px solid var(--line); border-radius: 50%;
}
.shero__text { position: relative; z-index: 2; }
.shero .type-hero { max-width: 9.5ch; margin: 0 0 0 clamp(0px, 2vw, 24px); font-size: clamp(44px, 5.2vw, 84px); }
.shero__media {
  position: absolute; z-index: 1; margin: 0; top: var(--header-h); right: 0; bottom: 0; width: 55vw;
  display: grid; place-items: center; overflow: hidden;
}
.shero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shero__media.has-photo .bmedia__fallback { display: none; }
.shero__media .bmedia__fallback { width: min(540px, calc(100% - 2 * var(--gutter))); }

.sintro { padding: 120px 0 24px; }
.sintro__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 88px; }
.sintro__title { margin: 0 0 24px; max-width: 24ch; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.sintro__lede { margin: 0; max-width: 54ch; font-size: 18px; color: var(--grey-1); }

.sbody { padding: 88px 0 var(--section-pad); }
.sbody__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 88px; align-items: start; }
.sbody__side { position: sticky; top: calc(var(--header-h) + 40px); }
.sdots a { display: flex; align-items: center; gap: 14px; padding: 6px 0; font-size: 17px; line-height: 1.4; color: var(--black); text-decoration: none; transition: color var(--t-xs) var(--ease-1), transform .5s var(--ease-3); }
.sdots a::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); transition: transform .5s var(--ease-bounce); }
.sdots a:hover, .sdots a:focus-visible { color: var(--accent-ink); }
.sdots a:hover::before { transform: scale(1.8); }
.sbody__label { margin: 64px 0 14px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-2); }
.srel a { display: inline-block; padding: 3px 0; font-size: 15px; color: var(--grey-1); text-decoration: underline; text-decoration-color: var(--grey-4); text-underline-offset: .25em; transition: color var(--t-xs), text-decoration-color var(--t-xs); }
.srel a:hover { color: var(--black); text-decoration-color: var(--accent); }

.sprose { max-width: 66ch; }
.sprose p { font-size: 18px; line-height: 1.75; color: var(--grey-1); }
.sprose .sprose__lead { font-size: 20px; color: var(--black); }
.sprose h2 { margin: 72px 0 20px; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2vw, 30px); line-height: 1.2; letter-spacing: -0.015em; }
.sitem { scroll-margin-top: calc(var(--header-h) + 32px); }
.sitem + .sitem { margin-top: 28px; }
.sitem h3 { margin-bottom: 6px; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.sitem p { margin: 0; }
.sprose__list { counter-reset: sp; }
.sprose__list li { position: relative; padding-left: 24px; font-size: 18px; line-height: 1.7; color: var(--grey-1); }
.sprose__list li + li { margin-top: 12px; }
.sprose__list li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.sprose__list--num li { padding-left: 34px; counter-increment: sp; }
.sprose__list--num li::before { content: counter(sp, decimal-leading-zero); width: auto; height: auto; top: .32em; border-radius: 0; background: none; font-size: 13px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.sprose__list strong { color: var(--black); font-weight: 600; }
.snote { margin: 72px 0 48px; }
.snote p { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.3; letter-spacing: -0.02em; color: var(--black); text-wrap: pretty; }
.snote p::before { content: "\201C"; margin-left: -.5em; color: var(--accent); }

@media (max-width: 1024px) {
  .shero { min-height: 0; padding-bottom: 0; }
  .shero::before { width: 110vw; left: 20%; top: -20%; }
  .shero__media { position: relative; top: auto; width: 100%; margin-top: 56px; padding: 56px 0; }
  .sintro { padding-top: 80px; }
  .sintro__grid, .sbody__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sintro__grid > div:first-child { display: none; }
  .sbody { padding-top: 40px; }
  .sbody__side { position: static; }
  .sbody__label { margin-top: 40px; }
}
@media (max-width: 768px) {
  .sprose p, .sprose__list li { font-size: 16px; }
  .sprose .sprose__lead { font-size: 18px; }
  .sprose h2 { margin-top: 56px; }
}

/* Client logo wall */
.clients { padding: var(--section-pad) 0; }
.clients__title { text-align: left; max-width: 15ch; margin: 0 0 clamp(56px, 7vw, 96px); color: var(--grey-2); }
/* Interior hairlines only: each cell draws its right and bottom edge, and the grid's negative
   margin pushes the outer column and final row edges into the clipped wrapper, so lines never double. */
.clients__wall { overflow: hidden; border-top: 1px solid var(--line); }
.clients__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 -1px -1px 0; }
.clients__item {
  display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 12%;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--black);
}
.clients__item img, .clients__item svg, .clients__name {
  opacity: .45; filter: grayscale(1);
  transition: opacity var(--t-xs) var(--ease-1), filter var(--t-xs) var(--ease-1);
}
/* --s (config `size`) lets one logo be optically matched to the rest */
.clients__item img { max-width: min(calc(170px * var(--s, 1)), 100%); max-height: calc(48px * var(--s, 1)); width: auto; height: auto; object-fit: contain; }
.clients__item svg { width: min(150px, 100%); height: auto; }
.clients__item:hover img, .clients__item:hover svg, .clients__item:hover .clients__name,
a.clients__item:focus-visible img, a.clients__item:focus-visible .clients__name { opacity: 1; filter: none; }
@media (hover: none) { .clients__item img, .clients__item svg, .clients__name { opacity: .7; } }
.clients__name { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--black); text-align: center; }
.clients__note { margin: 40px 0 0; font-size: 14px; color: var(--grey-2); }
@media (max-width: 1024px) { .clients__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .clients__item { padding: 16% 14%; } .clients__item img { max-height: calc(34px * var(--s, 1)); } .clients__name { font-size: 18px; } }

/* -------------------------------------------------------
   Pipeline: projects being built now (cards from js/config.js)
   ------------------------------------------------------- */
.pipeline { padding: var(--section-pad) 0; }
.pipeline__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: start; margin-bottom: 120px; }
.pipeline__intro .type-h2 { margin: 0; }
.pipeline__copy { color: var(--grey-1); padding-top: 10px; max-width: 54ch; }
.pipeline__head { display: flex; align-items: center; gap: 28px; margin-bottom: 40px; }
.pipeline__title { margin: 0; white-space: nowrap; }
.pipeline__title span { color: var(--grey-2); font-weight: 500; }
.pipeline__rule { flex: 1; height: 2px; background: var(--black); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease-3) .2s; }
.pipeline__head.is-in .pipeline__rule, html:not(.js) .pipeline__rule { transform: none; }
.pipeline__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pcard {
  --c: var(--accent-ink);
  position: relative; display: flex; flex-direction: column; padding: 32px 28px 28px;
  background: var(--white); border: 1px solid var(--black);
  transition: background-color .45s var(--ease-3), color .45s var(--ease-3), transform .45s var(--ease-3), box-shadow .45s var(--ease-3);
}
.pcard[data-sector="government"] { --c: #2f5d9e; }
.pcard[data-sector="education"] { --c: #8a6508; }
.pcard[data-sector="public"] { --c: var(--accent-ink); }
.pcard[data-sector="health"] { --c: #17806b; }
.pcard__bar { display: block; width: 22px; height: 7px; margin-bottom: 18px; background: var(--c); transition: width .6s var(--ease-3), background-color .45s; }
.pcard__name { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
.pcard__meta { margin: 0 0 16px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-2); }
.pcard__what { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--grey-2); }
.pcard__client { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--grey-2); }
.pcard__link { margin-top: 12px; font-size: 13px; color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.pcard__meta, .pcard__what, .pcard__client { transition: color .45s var(--ease-3), border-color .45s; }
@media (hover: hover) {
  .pcard:hover { background: var(--c); color: var(--white); transform: translateY(-6px); box-shadow: 0 18px 40px -22px rgba(31, 30, 29, .55); }
  .pcard:hover .pcard__bar { width: 44px; background: var(--white); }
  .pcard:hover .pcard__meta, .pcard:hover .pcard__what, .pcard:hover .pcard__client { color: rgba(255, 255, 255, .88); }
  .pcard:hover .pcard__client { border-color: rgba(255, 255, 255, .3); }
}
@media (max-width: 1024px) {
  .pipeline__intro { grid-template-columns: 1fr; gap: 0; margin-bottom: 88px; }
  .pipeline__intro .type-h2 { margin-bottom: 32px; }
  .pipeline__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pipeline__head { flex-wrap: wrap; gap: 18px; }
  .pipeline__rule { flex-basis: 100%; }
  .pipeline__title { white-space: normal; }
  .pipeline__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* =========================================================
   Service pages — hero
   ========================================================= */
.hero--page {
  min-height: min(100svh, 1000px); gap: 0; justify-content: center;
  padding: calc(var(--header-h) + 40px) 0 112px;
}
.phero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); gap: 72px; align-items: center; }
.phero--solo { grid-template-columns: minmax(0, 1fr); }
.hero--page .type-hero { font-size: clamp(38px, 4.1vw, 66px); margin-bottom: 28px; }
.phero--solo .type-hero { max-width: 16ch; }
.hero--page .hero__lede { margin-bottom: 36px; }
.page-bgword {
  position: absolute; left: -0.04em; bottom: -0.16em; z-index: 0;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(110px, 18vw, 300px); line-height: 1; letter-spacing: -0.05em;
  color: #262524; white-space: nowrap; pointer-events: none; user-select: none;
  opacity: 0; transform: translateY(60px); transition: opacity var(--t-md) var(--ease-1), transform var(--t-lg) var(--ease-1);
}
.is-ready .page-bgword { opacity: 1; transform: none; }

.crumbs { margin-bottom: 36px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; line-height: 1.4; color: var(--grey-3); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--grey-1); }
.crumbs a { color: var(--grey-4); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.crumbs [aria-current] { color: var(--white); }

/* Working drawings on dark: example output, drawn in when the page is ready */
.pfig { position: relative; margin: 0; padding: 30px 30px 22px; color: var(--white); }
.pfig::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid #4a4845;
  -webkit-mask: conic-gradient(at 16px 16px, #0000 75%, #000 0) 0 0 / calc(100% - 16px) calc(100% - 16px);
          mask: conic-gradient(at 16px 16px, #0000 75%, #000 0) 0 0 / calc(100% - 16px) calc(100% - 16px);
  opacity: 0; transform: scale(1.04);
  transition: opacity var(--t-sm) var(--ease-1) .3s, transform var(--t-md) var(--ease-3) .3s;
}
.is-ready .pfig::before { opacity: 1; transform: none; }
.pfig figcaption { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line-dark); font-size: 13px; line-height: 1.5; color: var(--grey-3); }
.js .pfig [data-step] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease-1), transform .9s var(--ease-3);
  transition-delay: calc(.55s + var(--s, 0) * .2s);
}
.is-ready .pfig [data-step] { opacity: 1; transform: none; }

.pf-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line-dark); font-size: 14px; font-weight: 600; line-height: 1.4; }
.pf-muted { color: var(--grey-3); font-weight: 400; font-size: 13px; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 3px 10px; border: 1px solid #4a4845; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; white-space: nowrap; color: var(--grey-4);
}
.pf-chip--accent { background: var(--accent); border-color: var(--accent); color: var(--black-3); }
.pf-chip--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.pf-ico { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid #5a5855; color: var(--white); }
.pf-ico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-ico--hold { background: var(--accent); border-color: var(--accent); color: var(--black-3); }

.pf-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; padding: 13px 0; border-bottom: 1px dashed var(--line-dark); font-size: 15px; line-height: 1.45; color: var(--grey-4); }
.pf-list li small { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--accent); }
.pf-actions { display: flex; gap: 10px; margin-top: 18px; }
.pf-btn { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.4; }
.pf-btn--solid { background: var(--white); color: var(--black); }
.pf-btn--ghost { border: 1px solid #5a5855; color: var(--grey-4); }

/* Service map (hub) */
.pf-map__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px dashed var(--line-dark); }
.pf-map__stage { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.4; letter-spacing: -0.01em; }
.pf-map__items { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-map + .pf-sys { margin-top: 16px; }

/* Scorecard */
.pf-score li { display: grid; grid-template-columns: minmax(0, 1fr) 92px 82px; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px dashed var(--line-dark); font-size: 15px; line-height: 1.4; color: var(--grey-4); }
.pf-score li:first-child { color: var(--white); font-weight: 600; }
.pf-score .pf-chip { justify-self: end; }
.pf-bars { display: grid; gap: 5px; }
.pf-bars i { display: block; height: 5px; border-radius: 3px; background: var(--accent); transform-origin: left; transform: scaleX(var(--v)); }
.pf-bars i.is-effort { background: var(--grey-3); }
.js .pfig .pf-bars i { transform: scaleX(0); transition: transform 1.1s var(--ease-3) calc(.85s + var(--s, 0) * .2s); }
.is-ready .pfig .pf-bars i { transform: scaleX(var(--v)); }
.pf-legend { display: flex; gap: 20px; margin-top: 14px; font-size: 12px; color: var(--grey-3); }
.pf-legend i { display: inline-block; width: 14px; height: 5px; margin-right: 7px; border-radius: 3px; background: var(--accent); vertical-align: 2px; }
.pf-legend i.is-effort { background: var(--grey-3); }

/* Conversation */
.pf-chat { display: grid; gap: 12px; padding-top: 20px; }
.pf-msg { max-width: 84%; margin: 0; padding: 11px 16px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.pf-msg--user { justify-self: end; background: var(--charcoal); color: var(--white); border-bottom-right-radius: 4px; }
.pf-msg--bot { justify-self: start; border: 1px solid #4a4845; color: var(--grey-4); border-bottom-left-radius: 4px; }
.pf-sys { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 13px; color: var(--grey-3); }
.pf-sys .pf-ico { width: 20px; height: 20px; }

/* Document to fields */
.pf-docrow { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 26px; padding-top: 20px; }
.pf-doc { display: grid; align-content: start; gap: 7px; height: 116px; padding: 14px 11px; border: 1px solid #4a4845; }
.pf-doc i { display: block; height: 4px; border-radius: 2px; background: var(--line-dark); }
.pf-doc i:nth-child(odd) { width: 74%; }
.pf-doc i.is-hl { background: var(--accent); width: 100%; }
.pf-doc__name { margin-top: 10px; font-size: 11px; line-height: 1.3; color: var(--grey-3); overflow-wrap: anywhere; }
.pf-fields { margin: 0; }
.pf-fields > div { display: grid; grid-template-columns: 100px minmax(0, 1fr) 22px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--line-dark); }
.pf-fields dt { font-size: 13px; color: var(--grey-3); }
.pf-fields dd { margin: 0; font-size: 15px; line-height: 1.4; color: var(--white); }
.pf-fields dd small { display: block; font-size: 12px; font-weight: 600; color: var(--accent); }

/* Draft */
.pf-brief { margin-top: 20px; padding: 13px 16px; border-radius: 6px; background: var(--charcoal); font-size: 14px; line-height: 1.5; color: var(--grey-4); }
.pf-brief b { color: var(--white); font-weight: 600; margin-right: 8px; }
.pf-draft { margin: 22px 0 8px; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.3; letter-spacing: -0.015em; color: var(--white); text-wrap: pretty; }

/* Answer with sources */
.pf-q { margin: 0; padding: 18px 0 14px; border-bottom: 1px dashed var(--line-dark); font-size: 16px; color: var(--grey-3); }
.pf-a { margin: 18px 0 20px; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.2; letter-spacing: -0.02em; color: var(--white); text-wrap: balance; }
.pf-a mark { color: inherit; background: linear-gradient(var(--accent), var(--accent)) 0 92% / 0 4px no-repeat; transition: background-size .8s var(--ease-3) 1.4s; }
.is-ready .pf-a mark, html:not(.js) .pf-a mark { background-size: 100% 4px; }
.pf-srcs li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; color: var(--grey-4); }
.pf-srcs svg, .pf-note svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pf-note { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-dark); font-size: 13px; color: var(--grey-3); }
.pf-note svg { stroke: var(--grey-3); }

/* Forecast chart */
.pf-chart { display: block; width: 100%; height: auto; margin-top: 16px; overflow: visible; }
.pf-chart path { fill: none; }
.pf-chart .c-grid { stroke: var(--line-dark); stroke-width: 1; }
.pf-chart .c-today { stroke: var(--grey-1); stroke-width: 1; stroke-dasharray: 3 4; }
.pf-chart .c-band { fill: rgba(248, 69, 37, .16); stroke: none; }
.pf-chart .c-line { stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pf-chart .c-actual { stroke: var(--white); }
.pf-chart .c-fcst { stroke: var(--accent); }
.pf-chart text { font-family: var(--font-body); font-size: 11.5px; fill: var(--grey-3); }
.pf-chart .c-lbl { font-weight: 600; fill: var(--white); }
.pf-chart .c-lbl--f { fill: var(--accent); }
.js .pf-chart .c-line { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-4) .7s; }
.js .pf-chart .c-fcst { transition-delay: 1.9s; transition-duration: 1.1s; }
.js .pf-chart .c-band, .js .pf-chart text { opacity: 0; transition: opacity .8s var(--ease-1) 2.3s; }
.is-ready .pf-chart .c-line { stroke-dashoffset: 0; }
.is-ready .pf-chart .c-band, .is-ready .pf-chart text { opacity: 1; }
.pf-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }

@media (max-width: 1024px) {
  .phero { grid-template-columns: minmax(0, 1fr); gap: 72px; }
  .pfig { max-width: 560px; }
}
@media (max-width: 768px) {
  .hero--page { min-height: 0; padding-bottom: 88px; }
  .page-bgword { font-size: 30vw; }
  .crumbs { margin-bottom: 28px; }
  .pfig { padding: 24px 18px 18px; }
  .pf-score li { grid-template-columns: minmax(0, 1fr) 64px; }
  .pf-score .pf-chip { grid-column: 1 / -1; justify-self: start; margin-top: -4px; }
  .pf-docrow { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
  .pf-fields > div { grid-template-columns: 82px minmax(0, 1fr) 22px; gap: 10px; }
  .pf-chart text { font-size: 15px; }
}

/* =========================================================
   Service pages — content sections
   ========================================================= */
.psec { position: relative; padding: var(--section-pad) 0; }
.psec__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; align-items: end; margin-bottom: 80px; }
.psec__head .type-h2 { margin: 0; }
.psec__head p { margin: 0; color: var(--grey-1); max-width: 52ch; }

.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 48px; }
.offers--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; }
.offers li { border-top: 2px solid var(--black); padding-top: 24px; }
/* An odd final item spans the leftover cells, so the grid never ends on a gap */
.offers:not(.offers--2) > li:last-child:nth-child(3n+2) { grid-column: span 2; }
.offers:not(.offers--2) > li:last-child:nth-child(3n+2) p { max-width: 56ch; }
.offers h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 10px; }
.offers p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--grey-2); }

.uses { border-bottom: 1px solid var(--grey-4); }
.uses li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: baseline; padding: 30px 0; border-top: 1px solid var(--grey-4); }
.uses h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.15; letter-spacing: -0.02em; }
.uses p { margin: 0; max-width: 52ch; font-size: 18px; color: var(--grey-1); }

.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 72px; }

.managed__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 88px; align-items: start; }
.managed__intro p { color: var(--grey-1); max-width: 46ch; }
.managed__intro .btn { margin-top: 16px; }
.managed__note { margin: 18px 0 0; font-size: 15px; color: var(--grey-2); }
.managed__start { margin-top: 72px; }
.managed__start h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; margin-bottom: 20px; }

.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 88px; align-items: start; }
.faq__intro { position: sticky; top: calc(var(--header-h) + 32px); }
.faq__intro p { color: var(--grey-1); max-width: 34ch; }
.faq__list { border-bottom: 1px solid var(--grey-4); }
.faq__item { border-top: 1px solid var(--grey-4); }
.faq__item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 32px;
  padding: 26px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.3; letter-spacing: -0.01em;
  transition: color var(--t-xs) var(--ease-1);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent-ink); }
.faq__icon { position: relative; flex: none; width: 16px; height: 16px; margin-top: .4em; transition: transform .6s var(--ease-bounce); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: currentColor; border-radius: 1px; }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { transform: rotate(135deg); }
.faq__item p { margin: -6px 0 30px; max-width: 62ch; font-size: 18px; color: var(--grey-1); }

.related { margin-top: 128px; }

@media (max-width: 1024px) {
  .psec__head, .managed__grid, .faq__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .psec__head { margin-bottom: 56px; }
  .managed__grid { gap: 64px; }
  .faq__intro { position: static; }
  .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offers:not(.offers--2) > li:last-child:nth-child(3n+2) { grid-column: auto; }
  .offers:not(.offers--2) > li:last-child:nth-child(odd) { grid-column: span 2; }
  .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 52px; }
}
@media (max-width: 768px) {
  .offers, .offers--2 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .offers:not(.offers--2) > li:last-child:nth-child(odd) { grid-column: auto; }
  .uses li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 0; }
  .uses p { font-size: 16px; }
  .steps--4 { grid-template-columns: minmax(0, 1fr); }
  .faq__item summary { gap: 20px; padding: 22px 0; }
  .faq__item p { font-size: 16px; }
}


/* -------------------------------------------------------
   Industries page
   ------------------------------------------------------- */
.xind { position: relative; overflow: hidden; padding: var(--section-pad) 0; }
.xind > .container { position: relative; z-index: 1; }
.xind__head { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: end; margin-bottom: clamp(56px, 7vw, 96px); }
.xind__head .type-h2 { margin: 0; }
.xind__lede { margin: 0; max-width: 46ch; color: var(--grey-3); }
.xind__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.xcard {
  position: relative; display: flex; flex-direction: column; padding: 40px 32px 34px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .02);
  transition: transform .5s var(--ease-3), border-color .5s var(--ease-3), background-color .5s var(--ease-3);
}
.xcard--feature { background: var(--accent); border-color: var(--accent); }
.xcard__mark { position: relative; display: block; width: 44px; height: 44px; margin-bottom: 32px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .45); }
.xcard__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--accent); }
.xcard--feature .xcard__mark::after { background: var(--white); }
.xcard__mark i { position: absolute; inset: 0; animation: orbit 9s linear infinite; }
.xcard__mark i::after { content: ""; position: absolute; top: -3px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--white); }
.xcard:nth-child(2) .xcard__mark i { animation-duration: 12s; animation-direction: reverse; }
.xcard:nth-child(3) .xcard__mark i { animation-duration: 15s; }
.xcard__name { margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -0.015em; }
.xcard__desc { margin: 0 0 24px; font-size: 16px; line-height: 1.65; color: var(--grey-3); }
.xcard--feature .xcard__desc { color: rgba(255, 255, 255, .92); }
.xcard__areas { margin: 0 0 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); display: grid; gap: 8px; }
.xcard--feature .xcard__areas { border-color: rgba(255, 255, 255, .4); }
.xcard__areas li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; }
.xcard__areas li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: currentColor; opacity: .7; }
.xcard__link { margin-top: auto; display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.xcard--feature .xcard__link { text-decoration-color: var(--white); }
.xcard__link .slist__plus { position: relative; width: 12px; height: 12px; }
@media (hover: hover) {
  .xcard:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .5); }
  .xcard--feature:hover { border-color: var(--accent); }
}

.inds { padding: var(--section-pad) 0; }
.inds__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: start; margin-bottom: clamp(64px, 8vw, 112px); }
.inds__intro .type-h2 { margin: 0; }
.inds__copy { color: var(--grey-1); padding-top: 10px; max-width: 54ch; }
.inds__list { border-top: 2px solid var(--black); }
.irow {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.35fr); gap: 0 40px;
  padding: 44px 0 46px; border-bottom: 1px solid var(--line);
}
.irow::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-3); }
.irow__num { padding-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--accent-ink); transition: transform .6s var(--ease-3); }
.irow__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.15; letter-spacing: -0.02em; transition: color .4s var(--ease-3); }
.irow__desc { margin: 0 0 18px; font-size: 17px; line-height: 1.65; color: var(--grey-1); }
.irow__areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.irow__areas li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; line-height: 1.3; color: var(--grey-2); background: var(--white); }
.irow__proof { margin: 0; font-size: 14px; line-height: 1.6; color: var(--grey-2); }
.irow__proof b { margin-right: 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--black); }
@media (hover: hover) {
  .irow:hover::before { transform: scaleX(1); }
  .irow:hover .irow__num { transform: translateX(8px); }
  .irow:hover .irow__name { color: var(--accent-ink); }
}
@media (max-width: 1024px) {
  .xind__head, .inds__intro { grid-template-columns: 1fr; gap: 24px; }
  .xind__grid { grid-template-columns: minmax(0, 1fr); }
  .xcard__areas { grid-template-columns: 1fr 1fr; }
  .irow { grid-template-columns: 56px minmax(0, 1fr); gap: 18px 16px; }
  .irow__body { grid-column: 2; }
}
@media (max-width: 640px) {
  .xcard { padding: 32px 24px 28px; }
  .xcard__areas { grid-template-columns: 1fr; }
  .irow { grid-template-columns: minmax(0, 1fr); padding: 32px 0 34px; gap: 10px; }
  .irow__num { padding-top: 0; }
  .irow__body { grid-column: 1; margin-top: 8px; }
  .irow__desc { font-size: 16px; }
}
/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) *, html:not(.force-motion) *::before, html:not(.force-motion) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}