/* ============================================================
   tangolab — shared design system
   One source of truth for every page. Change here, change all.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #ffffff;
  --grey:       #eeede7;
  --ink:        #14140F;
  --ink-mid:    #4f4f44;
  --ink-faint:  #847f74;
  --rule:       rgba(20,20,15,.12);
  --accent:     #D7EC17;
  --accent-dk:  #5e6a00;
  --navy:       #0E1050;
  --navy-deep:  #09093E;
  --blue:       #5263F0;
  --lavender:   #E4DEFF;
  --pink-soft:  #F7A6F2;
  --serif:      'Instrument Serif', Georgia, serif;
  --sans:       'Instrument Sans', system-ui, sans-serif;

  --gutter:     clamp(24px, 5vw, 80px);
  --radius:     16px;
  --sec-pad:    clamp(80px, 13vh, 170px);

  /* one type scale, used everywhere */
  --fs-hero:    clamp(52px, 9vw, 128px);
  --fs-xl:      clamp(38px, 6.2vw, 92px);
  --fs-lg:      clamp(30px, 4.2vw, 56px);
  --fs-md:      clamp(21px, 2.3vw, 30px);
  --fs-sm:      clamp(17px, 1.25vw, 20px);
  --fs-base:    16px;
  --fs-xs:      13px;
}

html { scroll-behavior: smooth; font-size: 16px; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 300; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: var(--ink); }

.it { font-family: var(--serif); font-style: italic; }
.mark {
  font-family: var(--serif); font-style: italic; color: var(--ink);
  background: linear-gradient(transparent 28%, var(--accent) 28%, var(--accent) 92%, transparent 92%);
  padding: 0 .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Animated Shiny Text (Magic UI) */
.shiny {
  background: linear-gradient(110deg, var(--c, currentColor) 40%, #ffffff 50%, var(--c, currentColor) 60%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; animation: shiny 3.2s linear infinite;
}
@keyframes shiny { from { background-position: 150% 0; } to { background-position: -150% 0; } }

/* Highlighter (Magic UI) */
.hl { position: relative; display: inline-block; }
.hl > span { position: relative; z-index: 1; }
.hl::before {
  content: ''; position: absolute; left: -.06em; right: -.06em; top: .16em; bottom: .08em;
  background: var(--hl, var(--accent)); z-index: 0; border-radius: 3px;
  transform: scaleX(0) rotate(-.4deg); transform-origin: left center;
}
.hl.is-hit::before { transform: scaleX(1) rotate(-.4deg); transition: transform .8s cubic-bezier(.22,1,.36,1); }
.hl--lav { --hl: var(--lavender); }
.hl--blue { --hl: #c8ceff; }
.hl--pink { --hl: var(--pink-soft); }
.hl--lime { --hl: var(--accent); }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--gutter); height: 66px;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(1.1) blur(10px); -webkit-backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .3s ease;
}
nav.scrolled { border-bottom-color: var(--rule); }
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo-img { height: 32px; width: auto; filter: brightness(0); opacity: .9; transition: opacity .35s ease; }
/* during the intro the nav logo stays hidden; the flown wordmark lands and hands off to it */
html.tl-intro .nav-logo-img { opacity: 0; }
.nav-links { display: flex; gap: 8px; list-style: none; align-items: center; }
.nav-links > li > a { font-size: 13px; color: var(--ink-mid); text-decoration: none; font-weight: 400; transition: color 0.2s ease, background 0.2s ease; }
.nav-links > li > a:not(.nav-cta) { padding: 8px 15px; border-radius: 100px; background: var(--grey); }
.nav-links > li > a:hover, .nav-links > li > a.active { color: var(--ink); }
.nav-links > li > a:not(.nav-cta):hover, .nav-links > li > a.active:not(.nav-cta) { background: #e4e1d7; }
.nav-dropdown { position: relative; }
.nav-dropdown > a { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.nav-dropdown > a::after { content: '▾'; font-size: 9px; opacity: .55; margin-top: 1px; }
.dropdown-menu {
  position: absolute; top: calc(100% + 14px); left: -16px; background: #fff; border: 1px solid var(--rule);
  border-radius: 12px; padding: 8px 0; list-style: none; min-width: 190px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; box-shadow: 0 16px 48px rgba(20,20,15,.1);
}
.nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu li a { display: block; padding: 11px 20px; font-size: 13px; color: var(--ink-mid); white-space: nowrap; text-decoration: none; transition: color .2s ease, background .2s ease; }
.dropdown-menu li a:hover { color: var(--ink); background: rgba(13,13,85,.04); }
.nav-cta { background: var(--ink); padding: 10px 22px; border-radius: 100px; font-size: 13px; font-weight: 500; transition: transform .2s ease; }
.nav-links > li > a.nav-cta { color: #fff; }
.nav-cta:hover { transform: translateY(-1px); }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; width: 30px; height: 30px; flex-direction: column; justify-content: center; gap: 6px; padding: 0; }
.nav-burger span { display: block; height: 2px; width: 24px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
nav.open .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
nav.open .nav-burger span:nth-child(2) { opacity: 0; }
nav.open .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── HERO ── */
.hero-stage { margin-top: 66px; }
.hero {
  background: #ffffff; min-height: calc(100vh - 66px);
  display: grid; align-content: center; justify-items: center; text-align: center;
  padding: clamp(56px, 10vh, 130px) var(--gutter); position: relative; overflow: hidden;
}
/* soft lime + lavender gradient field, rising from the bottom of the hero */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(44% 56% at 72% 84%, rgba(217,238,13,.9), rgba(217,238,13,0) 68%),
    radial-gradient(42% 54% at 26% 96%, rgba(196,198,255,.82), rgba(196,198,255,0) 70%);
  filter: blur(6px) saturate(1.05);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
}
/* very light grain, only over the gradient field at the bottom; the header stays clean */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .12; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20.4%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
}
/* vertical light bands over the colour field, like light through fluted glass */
.hero-glass {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,0) 0px,
    rgba(255,255,255,.30) 15px,
    rgba(255,255,255,.04) 40px,
    rgba(255,255,255,0) 64px);
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 58%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 58%, #000 100%);
}
.hero--sub { min-height: 68vh; }
#heroGl { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity 1.1s ease; }
#heroGl.is-ready { opacity: 1; }
.hero-content { position: relative; z-index: 1; max-width: 1040px; }
.hero-eyebrow { font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dk); margin-bottom: 20px; }
.hero-headline { font-family: var(--serif); font-weight: 400; color: var(--navy); font-size: var(--fs-hero); line-height: 0.96; letter-spacing: -.015em; }
.hero-headline.is-lg { font-size: var(--fs-xl); }
.hero-headline .w { display: inline-block; }
.hero-headline .tango { position: relative; display: inline-block; font-family: var(--serif); font-style: italic; }
.hero-headline .tango-ink { position: relative; z-index: 1; }
.hero-headline .tango::before {
  content: ''; position: absolute; left: -.04em; right: -.04em; top: .34em; bottom: .04em; background: var(--accent);
  z-index: 0; border-radius: 3px; transform: scaleX(0); transform-origin: left center;
}
.hero-headline .tango.draw::before { transform: scaleX(1); transition: transform .6s cubic-bezier(.22,1,.36,1); }
.hero-sub { font-family: var(--sans); font-weight: 300; color: var(--ink-mid); font-size: var(--fs-sm); line-height: 1.45; max-width: 52ch; margin: clamp(24px, 3vw, 34px) auto 0; }
/* breadcrumb (dark pages) */
.crumbs { position: absolute; top: clamp(24px,5vh,52px); left: var(--gutter); z-index: 2;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0;
  font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0; }
.crumbs a { color: rgba(255,255,255,.45); text-decoration: none; transition: color .3s ease; }
.crumbs a:hover { color: #fff; }
.crumbs .crumb-sep { color: rgba(255,255,255,.28); }
.crumbs .crumb-cur { color: rgba(255,255,255,.6); }
.ipill { display: inline-block; padding: 1px 13px; border-radius: 999px; font-size: .9em; font-weight: 600; line-height: 1.5; white-space: nowrap; color: var(--ink); }
.ipill--data { background: var(--accent); }
.ipill--people { background: var(--blue); color: #fff; }
.hero-cta, .btn {
  display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: var(--ink);
  font-family: var(--sans); font-size: 16px; font-weight: 500; padding: 16px 32px; border-radius: 100px;
  text-decoration: none; cursor: pointer; transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.hero-cta { margin-top: clamp(30px, 3.6vw, 42px); }
.hero-cta:hover, .btn:hover { transform: translateY(-3px); }
.hero-cta span, .btn span { transition: transform .25s ease; }
.hero-cta:hover span, .btn:hover span { transform: translateX(5px); }
.btn--ink { background: var(--ink); color: #fff; }

/* ── section shell ── */
.sec { padding: var(--sec-pad) var(--gutter); position: relative; }
.divider { border-top: 1px solid rgba(20,20,15,.07); }
.h-lg { font-family: var(--serif); font-weight: 400; font-size: var(--fs-lg); line-height: 1.02; letter-spacing: -.02em; color: var(--ink); }
.lead { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-mid); font-weight: 300; }

/* ── THESIS / big statement ── */
.thesis-big { font-family: var(--serif); font-weight: 400; font-size: var(--fs-xl); line-height: 1.06; letter-spacing: -.02em; color: var(--ink); max-width: 24ch; }
.thesis-sub { margin-top: clamp(28px,3vw,40px); font-size: var(--fs-sm); color: var(--ink-mid); font-weight: 300; max-width: 34ch; line-height: 1.45; }

/* ── intro grid (two column text) ── */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: start; }
.intro-grid .h-lg { max-width: 16ch; }
.intro-grid p { font-size: var(--fs-sm); color: var(--ink-mid); line-height: 1.4; font-weight: 300; }
.intro-grid p + p { margin-top: 16px; }

/* ── WHAT WE DO / beams ── */
.work-top { display: grid; grid-template-columns: 0.55fr 1.45fr; gap: clamp(28px,3.5vw,56px); align-items: center; }
.work-copy .h-lg { max-width: 14ch; }
.work-copy .lead { margin-top: 22px; max-width: 34ch; }
.beams { width: 100%; }
.beams svg { width: 100%; height: auto; display: block; overflow: visible; }
.beam-base { fill: none; stroke: rgba(20,20,15,.12); stroke-width: 1.5; }
.beam-live { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 14 120; stroke-dashoffset: 134; animation: beamFlow 2.6s linear infinite; }
.beam-live.b2 { animation-delay: .35s; } .beam-live.b3 { animation-delay: .7s; } .beam-live.b4 { animation-delay: 1.05s; } .beam-live.b5 { animation-delay: 1.4s; } .beam-live.b6 { animation-delay: .5s; }
@keyframes beamFlow { from { stroke-dashoffset: 134; } to { stroke-dashoffset: 0; } }
.bchip { fill: #fff; stroke: rgba(20,20,15,.14); stroke-width: 1.5; }
.bchip--lav  { fill: var(--lavender); stroke: none; }
.bchip--blue { fill: #c8ceff; stroke: none; }
.bchip--lime { fill: var(--accent); stroke: none; }
.bchip--pink { fill: var(--pink-soft); stroke: none; }
.bchip--grey { fill: var(--grey); stroke: none; }
.bchip-t { font-family: var(--sans); font-size: 20px; fill: var(--ink); }
.bcore-glow { fill: var(--accent); filter: blur(12px); animation: coreGlow 3s ease-in-out infinite; }
@keyframes coreGlow { 0%, 100% { opacity: .25; } 50% { opacity: .55; } }
.bcore { fill: var(--accent); }
.bcore-t { font-family: var(--serif); font-style: italic; font-size: 30px; fill: var(--ink); }
.bboard { fill: var(--navy); }
.bboard-t { font-family: var(--sans); font-size: 20px; fill: #fff; }

/* beams: readable vertical stack on mobile (SVG hidden below) */
.beams-m { display: none; }
.bm-chip, .bm-core, .bm-board { display: block; text-align: center; border-radius: 100px; }
.bm-chip { padding: 13px 18px; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); background: #fff; border: 1.5px solid rgba(20,20,15,.14); }
.bm--lav { background: var(--lavender); border-color: transparent; }
.bm--blue { background: #c8ceff; border-color: transparent; }
.bm--lime { background: var(--accent); border-color: transparent; }
.bm--pink { background: var(--pink-soft); border-color: transparent; }
.bm--grey { background: var(--grey); border-color: transparent; }
.bm-core { padding: 15px 30px; background: var(--accent); color: var(--ink); font-family: var(--serif); font-style: italic; font-size: 24px; }
.bm-board { padding: 13px 26px; background: var(--navy); color: #fff; font-family: var(--sans); font-size: 16px; font-weight: 500; }
.bm-arrow { display: block; text-align: center; font-size: 22px; line-height: 1; color: var(--ink-faint); }
@media (max-width: 600px) {
  .beams svg { display: none; }
  .beams-m { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 320px; margin: 4px auto 0; }
}

/* ── measurement: scroll-scrubbed flow diagram ── */
.measure { position: relative; }
.measure-sticky { padding: var(--sec-pad) var(--gutter); }
.measure-grid { width: 100%; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 0.72fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.measure-copy .h-lg { max-width: 14ch; }
.measure-copy .lead { margin-top: 22px; max-width: 34ch; }
/* pinned scrub mode (desktop, motion on): added by JS */
.measure.is-scrub { height: 340vh; }
.measure.is-scrub .measure-sticky { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }

.measure-diagram { position: relative; width: 100%; }
.ms-stage { position: relative; width: 100%; aspect-ratio: 700 / 470; }
.ms-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ms-path { fill: none; stroke: rgba(14,16,80,.2); stroke-width: 1.25; }
.ms-outpath { fill: none; stroke: var(--navy); stroke-width: 1.5; }
.ms-dot { fill: var(--navy); }
.ms-odot { fill: var(--accent); stroke: var(--navy); stroke-width: 1.25; }

.ms-pill { position: absolute; left: 0; width: 27%; margin-top: -23px; height: 46px; padding: 0 clamp(10px, 1.4vw, 18px);
  display: flex; align-items: center; border-radius: 100px; background: #f5f5f3; border: 1px solid rgba(20,20,15,.14);
  font-family: var(--sans); font-size: clamp(12px, 1.1vw, 16px); font-weight: 400; color: var(--navy); white-space: nowrap;
  cursor: default; will-change: transform; transition: border-color .25s ease, background-color .25s ease; }
.ms-pill:hover { background: #fff; border-color: var(--navy); }

.ms-hub { position: absolute; left: 61.43%; top: 53.19%; width: 17.7%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.ms-glow { position: absolute; inset: -45%; border-radius: 50%; background: radial-gradient(circle, rgba(215,236,23,.55), rgba(215,236,23,0) 62%); }
.ms-ring { position: absolute; inset: -14%; border-radius: 50%; border: 1px dashed rgba(14,16,80,.3); }
.ms-core { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: clamp(18px, 2vw, 30px); letter-spacing: -.01em; color: var(--navy); }

.ms-board { position: absolute; right: 0; top: 53.19%; width: 16%; margin-top: -32px; height: 64px; border-radius: 16px;
  background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: clamp(12px, 1.1vw, 16px); white-space: nowrap; }

.ms-caption { position: absolute; left: 0; right: 0; bottom: -44px; height: 16px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(14,16,80,.55); }
.ms-cap { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }
.ms-cap.is-on { opacity: 1; }
.ms-track { position: absolute; right: 0; top: 7px; width: 120px; height: 1px; background: rgba(14,16,80,.12); }
.ms-progress { display: block; height: 100%; background: var(--navy); transform-origin: left center; transform: scaleX(0); }

/* measurement: readable vertical stack on phones (horizontal stage hidden below) */
.ms-flow-m { display: none; }
@media (max-width: 600px) {
  .ms-stage { display: none; }
  .ms-flow-m { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 300px; margin: 4px auto 0; }
  .msm-pill, .msm-core, .msm-board { display: block; text-align: center; border-radius: 100px; }
  .msm-pill { padding: 13px 18px; font-family: var(--sans); font-size: 15px; font-weight: 400; color: var(--navy); background: #f5f5f3; border: 1px solid rgba(20,20,15,.14); }
  .msm-core { padding: 15px 30px; background: var(--accent); color: var(--navy); font-family: var(--serif); font-size: 24px; }
  .msm-board { padding: 13px 26px; background: var(--navy); color: #fff; font-family: var(--sans); font-size: 16px; font-weight: 400; }
  .msm-arrow { display: block; text-align: center; font-size: 22px; line-height: 1; color: var(--ink-faint); }
}

/* ── accordion (principles / Q&A) ── */
.pr-list { border-top: 1px solid var(--rule); max-width: 940px; counter-reset: pr; }
.pr-list.is-wide { max-width: none; }
.pr-row { border-bottom: 1px solid var(--rule); transition: background .25s ease; }
.pr-row:hover { background: rgba(20,20,15,.015); }
.pr-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: transparent; border: 0; cursor: pointer; padding: 24px 6px 24px 20px; text-align: left; transition: padding-left .25s ease; }
.pr-row:hover .pr-head { padding-left: 28px; }
.pr-label { font-family: var(--serif); font-size: var(--fs-md); line-height: 1.1; font-weight: 400; color: var(--ink); transition: color .2s ease; max-width: 46ch; }
.pr-row.is-open .pr-label { font-style: italic; }
.pr-label::before { counter-increment: pr; content: counter(pr, decimal-leading-zero); font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-faint); letter-spacing: .04em; margin-right: 16px; vertical-align: .2em; }
.pr-row.is-open { box-shadow: inset 3px 0 0 var(--navy); }
.pr-row.is-open .pr-label::before { color: var(--navy); }
.pr-icon { position: relative; width: 22px; height: 22px; flex: 0 0 auto; }
.pr-icon::before, .pr-icon::after { content: ''; position: absolute; background: var(--ink); border-radius: 2px; transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .32s ease; }
.pr-icon::before { top: 10px; left: 2px; width: 18px; height: 2px; }
.pr-icon::after { top: 2px; left: 10px; width: 2px; height: 18px; }
.pr-row.is-open .pr-icon::after { transform: rotate(90deg); opacity: 0; }
.pr-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.4,0,.2,1); }
.pr-row.is-open .pr-body { grid-template-rows: 1fr; }
.pr-body-in { overflow: hidden; min-height: 0; }
.pr-body-in p { font-size: 16px; line-height: 1.4; color: var(--ink-mid); font-weight: 300; max-width: 70ch; padding: 0 6px 26px 20px; }
.principles { margin-top: clamp(44px, 5vw, 76px); max-width: 940px; }
.principles-lead { font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-mid); font-weight: 300; max-width: 56ch; margin-bottom: 34px; }

/* ── steps (how we work) ── */
.steps { display: grid; gap: 0; max-width: 1040px; margin-top: clamp(36px,5vw,56px); }
.step { display: grid; grid-template-columns: 0.42fr 1fr; gap: clamp(20px,3vw,56px); align-items: start; padding: clamp(28px,3vw,44px) 0; border-top: 1px solid var(--rule); }
.step-k { font-family: var(--serif); font-style: italic; font-size: var(--fs-lg); color: var(--ink); line-height: 1; }
.step-d { font-size: var(--fs-sm); color: var(--ink-mid); line-height: 1.45; font-weight: 300; max-width: 48ch; }
.step-tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.step-tags span { font-size: var(--fs-xs); color: var(--ink-mid); border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; }

/* ── cards ── */
.compare-head { max-width: 16ch; margin-bottom: clamp(40px,5vw,64px); }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.card { border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(22px,2vw,30px) clamp(20px,1.8vw,26px); display: flex; flex-direction: column; }
.card-role { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-faint); }
.card-claim { font-family: var(--sans); font-size: var(--fs-md); font-weight: 400; color: var(--ink); letter-spacing: -.01em; margin-top: 14px; line-height: 1.1; }
.card-desc { font-size: var(--fs-xs); color: var(--ink-mid); line-height: 1.45; margin-top: 14px; }
.card-list { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.cl { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--ink-faint); }
.cl-mark { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; border: 1.5px solid var(--rule); }
.card--tango { background: var(--navy); border-color: var(--navy); }
.card--tango .card-role { color: rgba(255,255,255,.55); }
.card--tango .card-claim { color: #fff; }
.card--tango .card-desc { color: rgba(255,255,255,.72); }
.card--tango .cl { color: rgba(255,255,255,.9); font-weight: 400; }
.card--tango .cl-mark { border: none; background: var(--accent); position: relative; }
.card--tango .cl-mark::after { content: ''; position: absolute; top: 3px; left: 5.5px; width: 4px; height: 8px; border: solid var(--navy); border-width: 0 1.7px 1.7px 0; transform: rotate(45deg); }
/* ── What we do page: symptoms, DDD matrix, translation, don't-do ── */
.symptoms { max-width: 940px; margin-top: clamp(28px,4vw,44px); }
.symptom { font-family: var(--serif); font-size: var(--fs-md); line-height: 1.22; color: var(--ink); padding: clamp(16px,2.2vw,24px) 0; border-top: 1px solid var(--rule); }
.symptom:last-child { border-bottom: 1px solid var(--rule); }

.ddd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(32px,4vw,52px); }
.ddd-col { border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(24px,2vw,32px); display: flex; flex-direction: column; }
.ddd-n { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--ink-faint); }
.ddd-k { font-family: var(--serif); font-style: italic; font-size: var(--fs-lg); color: var(--ink); line-height: 1; margin: 6px 0 clamp(16px,2vw,24px); }
.ddd-row { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--rule); }
.ddd-row:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.ddd-l { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-faint); margin-bottom: 6px; }
.ddd-t { font-size: 16px; line-height: 1.45; color: var(--ink-mid); font-weight: 300; }

.xlate { margin-top: clamp(32px,4vw,52px); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; max-width: 1040px; }
.xlate-row { display: grid; grid-template-columns: 1fr 1fr 1.1fr; }
.xlate-row + .xlate-row { border-top: 1px solid var(--rule); }
.xlate-cell { padding: clamp(18px,2vw,26px) clamp(16px,1.8vw,24px); }
.xlate-cell + .xlate-cell { border-left: 1px solid var(--rule); }
.xlate-lbl { display: none; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--ink-faint); margin-bottom: 8px; }
.xlate-head .xlate-cell { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-faint); background: rgba(20,20,15,.02); }
.xlate-say { font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink); line-height: 1.35; }
.xlate-hear { font-family: var(--serif); font-style: italic; font-size: var(--fs-sm); color: var(--ink-mid); line-height: 1.3; }
.xlate-into { font-size: var(--fs-sm); color: var(--ink-mid); font-weight: 300; line-height: 1.4; }

.nots-statement { font-family: var(--serif); font-weight: 400; font-size: var(--fs-xl); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); max-width: 20ch; margin-top: clamp(20px,3vw,30px); }
.ways-more { margin-top: clamp(26px,3vw,36px); font-size: var(--fs-sm); color: var(--ink-mid); }
.ways-more a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .ddd { grid-template-columns: 1fr; }
  .xlate-row { grid-template-columns: 1fr; }
  .xlate-head { display: none; }
  .xlate-cell + .xlate-cell { border-left: 0; border-top: 1px solid var(--rule); }
  .xlate-lbl { display: block; }
}

/* feature card (title + desc) */
.fcard { border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(24px,2.4vw,34px); }
.fcard-k { font-family: var(--serif); font-style: italic; font-size: var(--fs-md); color: var(--ink); line-height: 1.1; }
.fcard-d { margin-top: 14px; font-size: var(--fs-sm); color: var(--ink-mid); line-height: 1.45; font-weight: 300; }

/* ── our purpose / driver list ── */
.purpose-lead { font-family: var(--serif); font-size: var(--fs-xl); line-height: 1.08; letter-spacing: -.02em; color: var(--ink); max-width: 20ch; margin: 28px 0 clamp(52px,6vw,80px); }
#purpose .h-lg { font-size: clamp(23px, 2.9vw, 36px); }
#purpose .p-k { font-size: clamp(21px, 2.5vw, 31px); }
.purpose-list { display: grid; gap: 0; max-width: 1040px; }
.p-item { display: grid; grid-template-columns: 0.4fr 1fr; gap: clamp(20px,3vw,56px); align-items: baseline; padding: clamp(26px,2.6vw,40px) 0; border-top: 1px solid var(--rule); }
.p-k { font-family: var(--serif); font-style: italic; font-size: var(--fs-lg); font-weight: 400; color: var(--ink-mid); line-height: 1; }
.p-d { font-size: var(--fs-sm); font-weight: 300; line-height: 1.4; color: var(--ink-mid); max-width: 36ch; }

/* ── manifesto ── */
.manifesto-lead { font-family: var(--serif); font-size: var(--fs-xl); line-height: 1.08; letter-spacing: -.02em; color: var(--ink); max-width: 20ch; }
.manifesto-body { margin-top: clamp(32px,4vw,52px); max-width: 60ch; }
.manifesto-body p { font-size: var(--fs-sm); color: var(--ink-mid); line-height: 1.4; font-weight: 300; }
.manifesto-body p + p { margin-top: 20px; }
.manifesto-body strong { color: var(--ink); font-weight: 400; }

/* ── FOUNDER (navy) ── */
.founder { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.founder::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 64px 64px; }
.founder-aura { position: absolute; top: -140px; right: -120px; width: 640px; height: 640px; pointer-events: none; filter: blur(55px); opacity: .55; background: radial-gradient(42% 42% at 60% 40%, var(--blue), transparent 70%), radial-gradient(30% 30% at 82% 22%, var(--accent), transparent 60%); }
.founder-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(36px,5vw,80px); align-items: center; }
.founder-hi { font-family: var(--serif); font-size: var(--fs-lg); line-height: 1.04; letter-spacing: -.02em; font-weight: 400; color: #fff; max-width: 15ch; }
.founder-green { color: var(--accent); }
.founder-say { margin-top: 24px; font-size: var(--fs-sm); color: rgba(255,255,255,.82); line-height: 1.45; font-weight: 300; max-width: 52ch; }
.founder-say + .founder-say { margin-top: 16px; }
.founder-facts { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; max-width: 520px; }
.fact-k { font-family: var(--sans); font-size: var(--fs-xs); color: var(--accent); font-weight: 500; }
.fact-v { margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.45; }
.founder-photo { position: relative; max-width: 330px; }
.founder-photo::before { content: ''; position: absolute; inset: 0; transform: translate(16px, 16px); border: 2px solid var(--accent); border-radius: 18px; z-index: 0; }
.founder-photo img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: 18px; display: block; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.founder-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 46px 22px 20px; background: linear-gradient(transparent, rgba(9,9,52,.9)); border-radius: 0 0 18px 18px; display: flex; flex-direction: column; gap: 3px; }
.founder-names { font-family: var(--serif); font-style: italic; font-size: 22px; color: #fff; }
.founder-role { font-size: 12px; letter-spacing: .04em; color: var(--accent); font-weight: 500; }
.founder-names.typing::after { content: ''; display: inline-block; width: 2px; height: .95em; background: #fff; margin-left: 3px; vertical-align: -.1em; animation: caret .9s step-end infinite; }
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ── APPROACH / closing CTA ── */
.approach, .cta { text-align: center; }
.approach-statement, .cta-headline { font-family: var(--serif); font-weight: 400; font-size: var(--fs-xl); line-height: 1.08; letter-spacing: -.02em; color: var(--ink); max-width: 22ch; margin: 0 auto; }
.approach { overflow: hidden; }
.approach::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(rgba(14,16,80,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14,16,80,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(130% 92% at 50% 50%, #000 42%, transparent 86%);
  mask-image: radial-gradient(130% 92% at 50% 50%, #000 42%, transparent 86%);
}
.approach > * { position: relative; z-index: 1; }
.approach .approach-statement { font-size: clamp(32px, 4.6vw, 66px); line-height: 1.14; max-width: 26ch; }
.cta-sub { margin-top: 20px; font-size: var(--fs-sm); color: var(--ink-mid); max-width: 42ch; margin-left: auto; margin-right: auto; line-height: 1.45; }
.approach .btn, .cta .btn { margin-top: clamp(30px,4vw,44px); }

/* ── CONTACT ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); align-items: start; }
.contact-intro { font-size: var(--fs-sm); color: var(--ink-mid); line-height: 1.45; max-width: 40ch; margin-top: 22px; }
.contact-details { display: grid; gap: 22px; margin-top: 36px; }
.cd-k { font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--ink-faint); font-weight: 500; }
.cd-v { margin-top: 5px; font-size: var(--fs-sm); color: var(--ink); }
.cd-v a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent-dk); }
.contact-form { display: grid; gap: 18px; }
.field label { display: block; font-size: var(--fs-xs); color: var(--ink-faint); margin-bottom: 8px; letter-spacing: .02em; }
.field input, .field textarea { width: 100%; font-family: var(--sans); font-size: 16px; font-weight: 300; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; transition: border-color .2s ease; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-dk); }
.field textarea { min-height: 120px; resize: vertical; }
.contact-form .btn { justify-self: start; border: 0; }
.form-note { font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.4; }

/* ── FOOTER ── */
footer { background: var(--grey); color: var(--ink); padding: clamp(60px,8vh,100px) var(--gutter) 40px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(32px,4vw,56px); }
.foot-news-t { font-family: var(--serif); font-size: var(--fs-md); line-height: 1.2; max-width: 20ch; color: var(--ink); }
.foot-news a { display: inline-block; margin-top: 20px; color: var(--ink); font-weight: 500; text-decoration: none; border-bottom: 2px solid var(--accent-dk); padding-bottom: 3px; transition: opacity .2s ease; }
.foot-news a:hover { opacity: .7; }
.foot-col h4 { font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--ink-faint); font-weight: 500; margin-bottom: 14px; }
.foot-col a { display: block; color: var(--ink-mid); text-decoration: none; padding: 7px 0; font-size: 15px; transition: color .2s ease; }
.foot-col a:hover { color: var(--ink); }
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: clamp(48px,7vw,80px); padding-top: 24px; border-top: 1px solid var(--rule); }
.foot-base-logo { height: 24px; width: auto; filter: brightness(0); opacity: .8; }
.foot-city { font-size: var(--fs-xs); color: var(--ink-faint); }

/* ── MOTION ── */
.anim-up { opacity: 0; transform: translateY(26px); }
.no-js .anim-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .anim-up { opacity: 1 !important; transform: none !important; }
  .shiny { animation: none; -webkit-text-fill-color: var(--c); color: var(--c); }
  .beam-live { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: .5; }
  .hl::before { transform: scaleX(1) rotate(-.4deg); }
  .hero-headline .tango::before { transform: scaleX(1); }
  .hero-scroll-sq path { animation: none; stroke-dashoffset: 0; }
}

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
  .work-top { grid-template-columns: 1fr; gap: 40px; }
  .work-copy .h-lg, .work-copy .lead { max-width: none; }
  .measure-grid { grid-template-columns: 1fr; gap: clamp(36px, 6vw, 56px); }
  .measure-copy .h-lg, .measure-copy .lead { max-width: none; }
  .founder-grid { grid-template-columns: 1fr; gap: 40px; }
  .founder-photo { max-width: 340px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 900px) {
  nav { padding: 0 24px; }
  .nav-burger { display: flex; }
  .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: fixed; top: 66px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--rule); padding: 4px 24px 22px; transform: translateY(-135%); transition: transform .3s ease; box-shadow: 0 24px 40px rgba(20,20,15,.07); }
  nav.open .nav-links { transform: translateY(0); }
  .nav-links li { width: 100%; border-bottom: 1px solid var(--rule); }
  .nav-links li:last-child { border-bottom: 0; }
  .nav-links > li > a { display: block; padding: 18px 0; font-size: 17px; color: var(--ink); }
  .nav-links > li > a:not(.nav-cta) { background: none; padding: 18px 0; border-radius: 0; }
  .nav-links a.nav-cta { display: block; text-align: center; margin-top: 16px; padding: 16px; font-size: 16px; border-radius: 100px; }
  .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; border: none; padding: 0 0 10px 16px; box-shadow: none; }
  .dropdown-menu li a { padding: 9px 0; font-size: 15px; color: var(--ink-mid); }
  .nav-dropdown > a::after { display: none; }
}
@media (max-width: 860px) {
  .intro-grid, .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .cards--3 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 10px; }
  .step-d { max-width: none; }
}
@media (max-width: 680px) {
  .p-item { grid-template-columns: 1fr; gap: 10px; }
  .p-d { max-width: none; }
  .cards { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .founder-facts { grid-template-columns: 1fr 1fr; }
}

/* ── DARK THEME (body.dark) ── */
body.dark { background: var(--navy); color: #fff; }
body.dark nav { background: rgba(10,11,52,.72); }
body.dark nav.scrolled { border-bottom-color: rgba(255,255,255,.12); }
body.dark .nav-logo-img { filter: none; opacity: 1; }
body.dark .nav-links > li > a { color: rgba(255,255,255,.7); }
body.dark .nav-links > li > a:hover, body.dark .nav-links > li > a.active { color: #fff; }
body.dark .nav-cta { background: var(--accent); }
body.dark .nav-links > li > a.nav-cta { color: var(--ink); }
body.dark .nav-burger span { background: #fff; }
@media (min-width: 901px) {
  body.dark .nav-links > li > a:not(.nav-cta) { background: rgba(255,255,255,.1); }
  body.dark .nav-links > li > a:not(.nav-cta):hover, body.dark .nav-links > li > a.active:not(.nav-cta) { background: rgba(255,255,255,.18); }
}
body.dark .dropdown-menu { background: var(--navy-deep); border-color: rgba(255,255,255,.14); box-shadow: 0 16px 48px rgba(0,0,0,.4); }
body.dark .dropdown-menu li a { color: rgba(255,255,255,.72); }
body.dark .dropdown-menu li a:hover { color: #fff; background: rgba(255,255,255,.06); }
body.dark .hero { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); }
body.dark .hero::before, body.dark .hero::after { display: none; }
body.dark .hero-headline, body.dark .h-lg { color: #fff; }
body.dark .lead { color: rgba(255,255,255,.82); }
body.dark .divider { border-top-color: rgba(255,255,255,.1); }
body.dark footer { background: var(--navy-deep); color: #fff; }
body.dark .foot-news-t { color: #fff; }
body.dark .foot-news a { color: #fff; border-bottom-color: var(--accent); }
body.dark .foot-col h4 { color: rgba(255,255,255,.5); }
body.dark .foot-col a { color: rgba(255,255,255,.62); }
body.dark .foot-col a:hover { color: #fff; }
body.dark .foot-base { border-top-color: rgba(255,255,255,.12); }
body.dark .foot-base-logo { filter: none; opacity: .85; }
body.dark .foot-city { color: rgba(255,255,255,.4); }
body.dark .fcard { border-color: rgba(255,255,255,.12); }
body.dark .fcard-k, body.dark .p-k, body.dark .card-claim { color: #fff; }
body.dark .fcard-d, body.dark .p-d, body.dark .card-desc { color: rgba(255,255,255,.8); }
body.dark .card, body.dark .p-item, body.dark .pr-list, body.dark .pr-row { border-color: rgba(255,255,255,.12); }
body.dark .card-role { color: rgba(255,255,255,.5); }
body.dark .cta-sub { color: rgba(255,255,255,.82); }
body.dark .pr-label { color: #fff; }
body.dark .pr-icon::before, body.dark .pr-icon::after { background: #fff; }
.hero-headline .blue { color: var(--blue); }
.hero-belief { color: var(--ink); font-weight: 500; }
.hero-grad { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: radial-gradient(70% 75% at 80% 88%, #D7EC17, transparent 55%), radial-gradient(65% 75% at 18% 22%, #5263F0, transparent 55%), linear-gradient(140deg, #0E1050, #09093E); }

/* ── homepage intro loader: the tangolab wordmark builds letter by letter on a
   navy screen, then the screen clears to reveal the page. A small JS driver
   staggers the letters; shown on first visit and whenever the logo is clicked
   (the head gate adds html.tl-intro when motion is allowed). ── */
.tl-loader { position: fixed; inset: 0; z-index: 5000; display: none; }
html.tl-intro .tl-loader { display: block; }
html.tl-intro, html.tl-intro body { overflow: hidden; }
.tl-loader-bg { position: absolute; inset: 0; background: radial-gradient(130% 130% at 50% 40%, var(--navy) 0%, var(--navy-deep) 100%); opacity: 1; transition: opacity .6s ease; will-change: opacity; }
.tl-loader.is-out .tl-loader-bg { opacity: 0; }
.tl-loader-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: clamp(160px, 38vw, 290px); opacity: 1; filter: brightness(1); will-change: transform, filter; transition: opacity .45s ease, transform .6s cubic-bezier(.76,0,.24,1); }
/* the mark flies into the nav logo spot via an inline transform set by the driver; only the final fade is CSS */
.tl-loader.is-gone .tl-loader-mark { opacity: 0; transition: opacity .4s ease; }
.tl-wordmark { width: 100%; height: auto; display: block; overflow: visible; }
/* each letter starts hidden; the driver reveals them one by one */
.tl-wordmark g[fill="#ffffff"] { opacity: 0; }
/* hold the hero back under the loader, reveal it as the screen clears */
html.tl-intro .hero-content { opacity: 0; transform: translateY(20px); }
html.tl-hero-in .hero-content { opacity: 1; transform: none; transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1); }
html.tl-hero-in .hero-content .anim-up { opacity: 1 !important; transform: none !important; }
html.tl-intro .hero-scroll { opacity: 0; }
html.tl-hero-in .hero-scroll { opacity: 1; transition: opacity .6s ease .2s; }
/* hold the end state once the intro finishes or is skipped */
html.tl-intro-done .hero-content, html.tl-intro-done .hero-content .anim-up, html.tl-intro-done .hero-scroll { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tl-loader { display: none !important; }
  html.tl-intro, html.tl-intro body { overflow: auto; }
  html.tl-intro .hero-content, html.tl-intro .hero-scroll { opacity: 1; transform: none; }
}

/* ── page transition veil ── */
.pageveil { position: fixed; inset: 0; z-index: 9999; pointer-events: none; visibility: hidden; }
.pageveil-fill { position: absolute; left: -5%; width: 110%; bottom: 0; height: 128%; background: var(--navy); transform: translateY(100%); border-radius: 46% 46% 0 0 / 15% 15% 0 0; will-change: transform; }
html.pv-cover .pageveil { visibility: visible; }
html.pv-cover .pageveil-fill { transform: translateY(0); }
.pv-intrologo { position: fixed; z-index: 10001; pointer-events: none; display: block; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .pageveil { display: none !important; } }

/* ── squiggle underline highlight (site-wide motif) ── */
.squig { position: relative; white-space: nowrap; }
.squig-svg { position: absolute; left: -.05em; bottom: -.06em; width: calc(100% + .1em); height: .4em; overflow: visible; pointer-events: none; }
.squig-svg path { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

/* ── hand-drawn marker highlight (site-wide motif) ── */
.mark { position: relative; white-space: nowrap; }
.mark-i { position: relative; z-index: 1; }
.mark-bg { position: absolute; z-index: 0; left: -.12em; right: -.12em; top: .15em; bottom: .04em; background: var(--accent); border-radius: 7px 16px 9px 18px / 14px 9px 16px 11px; pointer-events: none; }
@media (max-width: 900px) {
  body.dark .nav-links { background: var(--navy-deep); border-bottom-color: rgba(255,255,255,.12); }
  body.dark .nav-links li { border-bottom-color: rgba(255,255,255,.1); }
  body.dark .nav-links > li > a { color: #fff; }
}

/* ============================================================
   MOBILE REFINEMENT LAYER  (≤600px)
   Desktop is untouched: everything here lives inside the query.
   Tokens are redefined once so the correction cascades site-wide.
   ============================================================ */
@media (max-width: 600px) {
  :root {
    /* tighter vertical rhythm — was clamp(80px,13vh,170px) ≈ 105px on a phone */
    --sec-pad: clamp(50px, 9vh, 72px);
    /* type re-floored for a 375px screen (was stuck at desktop mins) */
    --fs-hero: clamp(38px, 11.5vw, 56px);
    --fs-xl:   clamp(30px, 8.4vw, 42px);
    --fs-lg:   clamp(25px, 6.8vw, 34px);
    --fs-md:   clamp(19px, 5vw, 23px);
    --fs-sm:   clamp(17px, 4.6vw, 18px);
  }

  /* heroes: real (small) viewport height kills the "100vh too tall under the
     browser toolbar" gap; trim the dead air above/below the centred content */
  .hero { min-height: calc(100svh - 66px); padding-top: clamp(36px, 7vh, 64px); padding-bottom: clamp(56px, 11vh, 88px); }
  .hero--sub { min-height: auto; }
  .hero-sub { margin-top: 20px; }
  .hero-cta, .btn { padding: 15px 28px; }

  /* big editorial statements: rein in the max so they don't swallow the screen */
  .thesis-big, .purpose-lead, .manifesto-lead,
  .approach-statement, .cta-headline { max-width: 18ch; }
  .approach .approach-statement { font-size: clamp(30px, 8.2vw, 40px); line-height: 1.1; }

  /* founder: photo full width, facts keep two columns but breathe less */
  .founder-photo { max-width: 100%; margin: 0 auto; }
  .founder-photo::before { transform: translate(10px, 10px); }

  /* footer base: logo + line stack rather than cramming onto one row */
  .foot-base { gap: 14px; margin-top: 44px; }
}

/* ── Page header (inner pages): breadcrumb, lime-marked headline, optional line ── */
.phead {
  position: relative; overflow: hidden;
  min-height: min(820px, 92vh);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(66px + clamp(32px,5vw,72px)) var(--gutter) clamp(64px,8vw,112px);
  background-color: var(--bg);
  background-image:
    radial-gradient(55% 50% at 85% 108%, rgba(217,238,13,.40), transparent 70%),
    radial-gradient(60% 55% at 15% 108%, rgba(176,176,255,.42), transparent 70%);
}
.phead-in { position: relative; z-index: 1; width: 100%; }
.phead-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-family: var(--sans); font-size: 14px; color: rgba(14,16,80,.5);
  margin-bottom: clamp(28px,3.5vw,44px); }
.phead-crumb a { color: inherit; text-decoration: none; transition: color .25s ease; }
.phead-crumb a:hover { color: var(--blue); }
.phead-crumb .sep { opacity: .7; }
.phead-crumb .cur { color: var(--navy); }
.phead-h { margin: 0; max-width: 15ch; font-family: var(--serif); font-weight: 400;
  font-size: clamp(52px,7vw,116px); line-height: .98; letter-spacing: -.03em;
  color: var(--navy); text-wrap: balance; }
.phead-sub { margin: clamp(24px,2.6vw,36px) 0 0; max-width: 600px;
  font-family: var(--sans); font-weight: 300; font-size: clamp(17px,1.4vw,21px);
  line-height: 1.4; color: #4a4b6a; text-wrap: pretty; }
/* lime-marked phrase: full glyph-height block, text always navy */
.phead-h .hl { white-space: nowrap; }
.phead-h .hl > span { color: var(--navy); }
.phead-h .hl::before { left: -.08em; right: -.08em; top: .1em; bottom: -.04em;
  border-radius: 6px; transform: scaleX(0); }
.phead-h .hl.is-hit::before { transform: scaleX(1); transition: transform .8s cubic-bezier(.22,1,.36,1) .4s; }
.no-js .phead-h .hl::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .phead-h .hl::before { transform: scaleX(1); } }
/* dark (audience) pages */
body.dark .phead {
  background-color: var(--navy);
  background-image:
    radial-gradient(55% 50% at 85% 108%, rgba(217,238,13,.14), transparent 70%),
    radial-gradient(60% 55% at 15% 108%, rgba(82,99,240,.50), transparent 70%);
}
body.dark .phead-crumb { color: rgba(255,255,255,.5); }
body.dark .phead-crumb .cur { color: #fff; }
body.dark .phead-h { color: #fff; }
body.dark .phead-h .hl > span { color: var(--navy); }
body.dark .phead-sub { color: rgba(255,255,255,.74); }
@media (max-width: 600px) {
  .phead { min-height: min(680px, 86vh); padding-top: calc(66px + clamp(24px,8vw,44px)); }
  .phead-h { font-size: clamp(40px,11vw,62px); }
}

/* ════════════════════════════════════════════════════════════════════
   WHAT WE DO page (redesign) — self-contained, namespaced .wd-*
   Palette: navy #0E1050 · lime #D7EC17 · off-white #F6F5F1 · blue #5263F0
            lavender #E4DEFF · pink #F7A6F2 · body grey #4a4b6a
   ════════════════════════════════════════════════════════════════════ */
.wd {
  --wd-navy: #0E1050; --wd-lime: #D7EC17; --wd-off: #F6F5F1; --wd-blue: #5263F0;
  --wd-lav: #E4DEFF; --wd-pink: #F7A6F2; --wd-grey: #4a4b6a;
  --wd-line: rgba(14,16,80,.12);
  --wd-mono: ui-monospace, "SFMono-Regular", Menlo, "Roboto Mono", monospace;
  overflow-x: clip;
}
.wd-sec { padding: clamp(80px,11vw,160px) clamp(20px,5vw,80px); border-top: 1px solid rgba(14,16,80,.08); }
.wd-sec--navy { border-top: 0; background: var(--wd-navy); color: #fff; }
.wd-in { max-width: 1240px; margin: 0 auto; }
.wd-in--col { display: flex; flex-direction: column; gap: clamp(24px,3vw,36px); }

/* shared heading + lead */
.wd-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,360px),1fr)); gap: clamp(20px,5vw,80px); align-items: end; }
.wd-head--start { align-items: start; }
.wd-head--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%,400px),1fr)); align-items: start; }
.wd-head-c { display: flex; flex-direction: column; gap: 18px; }
.wd-h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(38px,4.6vw,68px); line-height: 1; letter-spacing: -.025em; color: var(--wd-navy); text-wrap: balance; }
.wd-sec--navy .wd-h2 { color: #fff; }
.wd-lead { margin: 0; max-width: 46ch; font-size: clamp(17px,1.3vw,20px); line-height: 1.45; color: var(--wd-grey); text-wrap: pretty; }
.wd-sec--navy .wd-lead { color: rgba(255,255,255,.75); }

/* lime marker (sweeps in) */
.wd-mk { position: relative; display: inline-block; white-space: nowrap; }
.wd-mk-t { position: relative; }
.wd-mk-bar { position: absolute; left: -.08em; right: -.08em; top: .1em; bottom: -.04em; background: var(--wd-lime); border-radius: 6px; transform-origin: left center; transform: scaleX(0); }
body.no-js .wd-mk-bar { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .wd-mk-bar { transform: scaleX(1); } }

/* 2 — Sound familiar? */
.wd-sym-list { border-top: 1px solid var(--wd-line); }
.wd-sym { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: baseline; padding: clamp(18px,2.2vw,26px) 0; border-bottom: 1px solid var(--wd-line); transition: padding .3s ease; }
.wd-sym:hover { padding-left: 10px; }
.wd-sym-n { font-family: var(--wd-mono); font-size: 12px; color: rgba(14,16,80,.4); }
.wd-sym-t { margin: 0; font-family: var(--serif); font-size: clamp(22px,2.3vw,32px); line-height: 1.2; color: var(--wd-navy); text-wrap: pretty; }

/* 3 — Our place in the mix */
.wd-place-copy { display: flex; flex-direction: column; gap: 18px; padding-top: .4em; }
.wd-place-copy p { margin: 0; line-height: 1.45; text-wrap: pretty; }
.wd-place-copy .p1 { font-size: clamp(18px,1.5vw,22px); color: var(--wd-navy); }
.wd-place-copy .p2 { font-size: clamp(17px,1.3vw,20px); color: var(--wd-grey); }
.wd-hub { margin-top: clamp(48px,6vw,80px); display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.9fr) minmax(0,1fr); gap: 0; align-items: center; }
.wd-hub-col { display: flex; flex-direction: column; gap: 14px; }
.wd-chip { display: flex; align-items: center; }
.wd-chip--r { flex-direction: row; }
.wd-chip--rr { flex-direction: row-reverse; }
.wd-pill { flex: 1; min-width: 0; padding: 16px 20px; border-radius: 100px; background: var(--wd-off); border: 1px solid var(--wd-line); font-size: clamp(15px,1.2vw,17px); color: var(--wd-navy); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-stub { flex: 0 0 clamp(16px,3vw,48px); height: 1px; background: rgba(14,16,80,.3); }
.wd-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 260px; padding: 32px; border-radius: 24px; background: var(--wd-lime); overflow: hidden; text-align: center; }
.wd-card-glow { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(215,236,23,.3), rgba(215,236,23,0) 60%); }
.wd-card-k { position: relative; font-family: var(--serif); font-size: clamp(34px,3vw,46px); line-height: 1; color: var(--wd-navy); }
.wd-card-d { position: relative; max-width: 22ch; font-size: 15px; line-height: 1.4; color: var(--wd-navy); }

/* 4 — How we work (navy, tabs + panel) */
.wd-how-body { margin-top: clamp(48px,6vw,80px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,320px),1fr)); gap: clamp(28px,5vw,72px); align-items: start; }
.wd-tabs { display: flex; flex-direction: column; }
.wd-tab { position: relative; display: flex; align-items: baseline; gap: 18px; padding: clamp(18px,2vw,26px) 0; background: none; border: 0; border-top: 1px solid rgba(255,255,255,.14); cursor: pointer; text-align: left; font: inherit; color: rgba(255,255,255,.32); transition: color .4s ease; }
.wd-tab.is-active { color: #fff; }
.wd-tab-n { font-family: var(--wd-mono); font-size: 12px; min-width: 22px; }
.wd-tab-k { font-family: var(--serif); font-size: clamp(44px,5.4vw,84px); line-height: .95; letter-spacing: -.025em; }
.wd-tab-track { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: rgba(255,255,255,0); }
.wd-tab-bar { display: block; height: 100%; background: var(--wd-lime); transform-origin: left center; transform: scaleX(0); }
.wd-panels { position: relative; }
.wd-panel { display: none; flex-direction: column; gap: clamp(24px,3vw,36px); padding: clamp(28px,3vw,44px); border-radius: 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); min-height: 420px; }
.wd-panel.is-active { display: flex; }
body.no-js .wd-panel { display: flex; }
body.no-js .wd-tab-track { display: none; }
.wd-panel-top { display: flex; flex-direction: column; gap: 14px; }
.wd-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--wd-lime); }
.wd-panel-change { margin: 0; font-family: var(--serif); font-size: clamp(30px,3vw,46px); line-height: 1.08; letter-spacing: -.015em; color: #fff; text-wrap: balance; }
.wd-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,200px),1fr)); gap: 24px; padding-top: clamp(20px,2.4vw,28px); border-top: 1px solid rgba(255,255,255,.14); margin-top: auto; }
.wd-panel-cell { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.wd-panel-lbl { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.wd-panel-txt { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.85); }
.wd-panel-tag { padding: 7px 14px; border-radius: 100px; background: var(--wd-lime); color: var(--wd-navy); font-size: 14px; font-weight: 500; }

/* 5 — Problems behind the numbers */
.wd-prows { margin-top: clamp(40px,5vw,64px); display: flex; flex-direction: column; gap: 12px; }
.wd-prow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr)); border: 1px solid var(--wd-line); border-radius: 20px; overflow: hidden; }
.wd-pcell { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.wd-pcell--cost { background: var(--wd-lav); }
.wd-pcell--help { background: var(--wd-navy); }
.wd-pcap { font-family: var(--wd-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(14,16,80,.5); }
.wd-pcell--cost .wd-pcap { color: rgba(14,16,80,.6); }
.wd-pcell--help .wd-pcap { color: var(--wd-lime); }
.wd-ptxt { margin: 0; font-size: clamp(17px,1.3vw,20px); line-height: 1.35; color: var(--wd-navy); }
.wd-pcost { margin: 0; font-family: var(--serif); font-size: clamp(20px,1.6vw,24px); line-height: 1.25; color: var(--wd-navy); }
.wd-phelp { margin: 0; font-size: clamp(17px,1.3vw,20px); line-height: 1.4; color: #fff; }

/* 6 — Ways to work with us */
.wd-ways-grid { margin-top: clamp(40px,5vw,64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); gap: 16px; }
.wd-way { display: flex; flex-direction: column; gap: 16px; min-height: 280px; padding: clamp(24px,2.2vw,34px); border: 1px solid var(--wd-line); border-radius: 20px; background-image: radial-gradient(380px circle at var(--mx,-600px) var(--my,-600px), rgba(228,222,255,.9), transparent 62%); transition: border-color .3s ease; }
.wd-way:hover { border-color: var(--wd-navy); }
.wd-way-pill { align-self: flex-start; padding: 5px 12px; border-radius: 100px; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--wd-navy); }
.wd-way-pill--lime { background: var(--wd-lime); }
.wd-way-pill--lav { background: var(--wd-lav); }
.wd-way-pill--pink { background: var(--wd-pink); }
.wd-way-claim { margin: auto 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px,2.4vw,36px); line-height: 1.05; letter-spacing: -.015em; color: var(--wd-navy); }
.wd-way-desc { margin: 0; font-size: 16px; line-height: 1.45; color: var(--wd-grey); }
.wd-routers { margin-top: clamp(40px,5vw,64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,360px),1fr)); gap: 16px; }
.wd-router { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; min-height: 200px; padding: clamp(26px,2.6vw,38px); border-radius: 24px; text-decoration: none; transition: transform .3s ease; }
.wd-router:hover { transform: translateY(-4px); }
.wd-router--navy { background: var(--wd-navy); color: #fff; }
.wd-router--lav { background: var(--wd-lav); color: var(--wd-navy); }
.wd-router-txt { display: flex; flex-direction: column; gap: 12px; }
.wd-router-small { font-size: 15px; }
.wd-router--navy .wd-router-small { color: rgba(255,255,255,.65); }
.wd-router--lav .wd-router-small { color: rgba(14,16,80,.65); }
.wd-router-k { font-family: var(--serif); font-size: clamp(30px,2.8vw,42px); line-height: 1.05; letter-spacing: -.015em; }
.wd-router-arrow { align-self: flex-end; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.wd-router--navy .wd-router-arrow { background: var(--wd-lime); color: var(--wd-navy); }
.wd-router--lav .wd-router-arrow { background: var(--wd-navy); color: #fff; }

/* 7 — What we don't do */
.wd-nots { margin: 0; max-width: 24ch; font-family: var(--serif); font-weight: 400; font-size: clamp(36px,5.6vw,88px); line-height: 1.08; letter-spacing: -.025em; color: rgba(14,16,80,.38); text-wrap: balance; }
.wd-strike { text-decoration-line: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--wd-navy); }
.wd-nots .wd-mk { color: var(--wd-navy); }

/* 8 — FAQ */
.wd-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,360px),1fr)); gap: clamp(32px,5vw,80px); align-items: start; }
.wd-acc { border-top: 1px solid var(--wd-line); }
.wd-acc-row { border-bottom: 1px solid var(--wd-line); }
.wd-acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--wd-navy); }
.wd-acc-q { font-family: var(--serif); font-size: clamp(21px,1.9vw,27px); line-height: 1.15; }
.wd-acc-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(14,16,80,.06); color: var(--wd-navy); font-size: 20px; line-height: 1; transition: transform .35s ease, background .3s ease; }
.wd-acc-row.is-open .wd-acc-icon { transform: rotate(45deg); background: var(--wd-lime); }
.wd-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.4,0,.2,1); }
.wd-acc-row.is-open .wd-acc-body { grid-template-rows: 1fr; }
body.no-js .wd-acc-body { grid-template-rows: 1fr; }
.wd-acc-body-in { overflow: hidden; min-height: 0; }
.wd-acc-a { margin: 0; padding: 0 56px 26px 0; font-size: 17px; line-height: 1.5; color: var(--wd-grey); }

/* 9 — Case studies (navy) */
.wd-cases-h2 { margin: 0 0 clamp(40px,5vw,64px); }
.wd-case { display: none; }
.wd-case.is-active { display: block; }
body.no-js .wd-case { display: block; }
body.no-js .wd-case + .wd-case { margin-top: clamp(48px,6vw,80px); }
.wd-case-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,360px),1fr)); gap: clamp(20px,5vw,80px); align-items: end; }
.wd-case-head-c { display: flex; flex-direction: column; gap: 16px; }
.wd-case-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-case-tab { padding: 8px 16px; border-radius: 100px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .3s ease, color .3s ease, border-color .3s ease; }
.wd-case-tab.is-active { background: var(--wd-lav); color: var(--wd-navy); border-color: var(--wd-lav); }
.wd-case-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px,3.8vw,56px); line-height: 1.02; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.wd-case-intro { margin: 0; max-width: 46ch; font-size: clamp(17px,1.3vw,20px); line-height: 1.45; color: rgba(255,255,255,.75); text-wrap: pretty; }
.wd-tlwrap { position: relative; margin-top: clamp(40px,5vw,64px); }
.wd-tl-track { position: relative; height: 120px; margin-bottom: 28px; }
.wd-tl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wd-tl-dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--wd-navy); border: 2.5px solid var(--wd-lime); }
.wd-case-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.wd-case-step { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 20px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.wd-cs-labels { display: flex; flex-direction: column; gap: 4px; }
.wd-cs-label { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: var(--wd-lime); }
.wd-cs-label--muted { color: rgba(255,255,255,.55); }
.wd-cs-when { font-size: 13px; color: rgba(255,255,255,.5); white-space: nowrap; }
.wd-cs-stat { font-family: var(--serif); font-size: clamp(30px,2.6vw,40px); line-height: 1; letter-spacing: -.015em; color: #fff; white-space: nowrap; }
.wd-cs-text { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.75); }
.wd-results { margin-top: 16px; padding: clamp(28px,3vw,44px); border-radius: 24px; background: var(--wd-lime); color: var(--wd-navy); }
.wd-results-cap { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.wd-results-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr)); gap: clamp(20px,3vw,40px); }
.wd-result { display: flex; flex-direction: column; gap: 8px; }
.wd-result-n { font-family: var(--serif); font-size: clamp(56px,6vw,96px); line-height: .9; letter-spacing: -.03em; white-space: nowrap; }
.wd-result-l { font-size: 16px; line-height: 1.4; }

/* 10 — Closing CTA */
.wd-cta { position: relative; padding: clamp(96px,13vw,180px) clamp(20px,5vw,80px); text-align: center; background-color: #fff; background-image: radial-gradient(50% 60% at 80% 110%, rgba(215,236,23,.35), transparent 70%), radial-gradient(55% 60% at 20% 110%, rgba(82,99,240,.18), transparent 70%); border-top: 1px solid rgba(14,16,80,.08); }
.wd-cta-h2 { margin: 0 auto; max-width: 16ch; font-family: var(--serif); font-weight: 400; font-size: clamp(44px,6vw,96px); line-height: 1; letter-spacing: -.03em; color: var(--wd-navy); text-wrap: balance; }
.wd-cta-sub { margin: 22px 0 0; font-size: clamp(17px,1.4vw,21px); color: var(--wd-grey); }
.wd-cta-btnwrap { margin-top: clamp(30px,4vw,44px); display: flex; justify-content: center; }
.wd-magnet { position: relative; overflow: hidden; display: flex; gap: 10px; align-items: center; padding: 18px 34px; border-radius: 100px; background: var(--wd-navy); color: #fff; font-size: 16px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.wd-magnet > span { position: relative; }
.wd-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: translateX(-120%); }

/* responsive */
@media (max-width: 720px) {
  .wd-hub { grid-template-columns: 1fr; gap: 14px; }
  .wd-stub { display: none; }
  .wd-case-steps { grid-template-columns: 1fr; }
  .wd-tl-track { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   ABOUT page (redesign) — self-contained, namespaced .au-*
   Palette: navy #0E1050 · lime #D7EC17 · off-white #F6F5F1 · blue #5263F0
            lavender #E4DEFF · pink #F7A6F2 · body grey #4a4b6a
   ════════════════════════════════════════════════════════════════════ */
.au, .au-modal {
  --au-navy: #0E1050; --au-lime: #D7EC17; --au-off: #F6F5F1; --au-blue: #5263F0;
  --au-lav: #E4DEFF; --au-pink: #F7A6F2; --au-grey: #4a4b6a;
  --au-muted: rgba(14,16,80,.55); --au-rule: rgba(14,16,80,.16);
}
.au {
  overflow-x: clip; color: var(--au-navy); background: #fff;
}
.au-top { background: var(--au-off); }

/* shared lime marker */
.au-mk { position: relative; display: inline-block; white-space: nowrap; }
.au-mk-t { position: relative; }
.au-mk-bar { position: absolute; left: -.08em; right: -.08em; top: .1em; bottom: -.04em; background: var(--au-lime); border-radius: 6px; transform-origin: left center; transform: scaleX(0); }
.au-mk--hero .au-mk-bar { top: .12em; bottom: -.02em; border-radius: 8px; }
body.no-js .au-mk-bar { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .au-mk-bar { transform: scaleX(1); } }

/* 1 — Hero */
.au-hero { padding: calc(66px + clamp(56px,8vw,120px)) clamp(20px,5vw,80px) clamp(64px,8vw,112px); }
.au-hero-in { max-width: 1320px; margin: 0 auto; }
.au-crumb { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--au-muted); margin-bottom: clamp(28px,3.5vw,48px); }
.au-crumb a { color: var(--au-muted); text-decoration: none; transition: color .25s ease; }
.au-crumb a:hover { color: var(--au-blue); }
.au-crumb .cur { color: var(--au-navy); }
.au-h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(54px,8.6vw,150px); line-height: .94; letter-spacing: -.035em; color: var(--au-navy); }
.au-hw-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.au-hw-mask--mk { padding: 0 .1em .06em; margin: 0 -.1em; }
.au-hw { display: inline-block; }
.au-hero-sub { margin: clamp(28px,3vw,40px) 0 0; max-width: 620px; font-size: clamp(18px,1.5vw,22px); line-height: 1.45; color: var(--au-navy); text-wrap: pretty; }
.au-hero-sub--muted { margin: 14px 0 0; color: var(--au-muted); }

/* 2 — Essence + signal */
.au-ess { position: relative; padding: 0 clamp(20px,5vw,80px) clamp(40px,5vw,72px); }
.au-ess-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,380px),1fr)); gap: clamp(32px,6vw,96px); align-items: start; padding-top: clamp(40px,5vw,64px); border-top: 1px solid var(--au-rule); }
.au-ess-lead { margin: 0; max-width: 22ch; font-size: clamp(20px,1.7vw,26px); line-height: 1.4; color: var(--au-navy); text-wrap: pretty; }
.au-pill-data { padding: 1px 10px 3px; border-radius: 100px; background: var(--au-lime); font-weight: 600; }
.au-pill-people { padding: 1px 10px 3px; border-radius: 100px; background: var(--au-blue); color: #fff; font-weight: 600; }
.au-ess-col { display: flex; flex-direction: column; gap: clamp(22px,2.6vw,36px); }
.au-ess-p { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px,3.2vw,50px); line-height: 1.12; letter-spacing: -.015em; color: var(--au-navy); text-wrap: pretty; }
.au-ess-p--muted { color: var(--au-muted); }
.au-signal { position: relative; height: clamp(160px,18vw,260px); max-width: 1320px; margin: clamp(40px,5vw,72px) auto 0; }
.au-signal-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.au-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--au-navy); }
.au-oneread { position: absolute; right: 0; top: 15%; transform: translate(0,-130%); padding: 6px 14px; border-radius: 100px; background: var(--au-lime); color: var(--au-navy); font-size: 14px; font-weight: 500; white-space: nowrap; }

/* 3 — Why choose us */
.au-why { padding: clamp(80px,10vw,150px) clamp(20px,5vw,80px); background: #fff; }
.au-why-in { max-width: 1320px; margin: 0 auto; }
.au-why-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,380px),1fr)); gap: clamp(20px,5vw,80px); align-items: end; margin-bottom: clamp(40px,5vw,64px); }
.au-why-h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(44px,5.6vw,92px); line-height: .98; letter-spacing: -.03em; color: var(--au-navy); }
.au-why-sub { margin: 0; max-width: 30ch; font-family: var(--serif); font-size: clamp(24px,2.2vw,34px); line-height: 1.2; color: var(--au-navy); text-wrap: balance; }
.au-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); gap: 14px; }
.au-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: clamp(300px,28vw,400px); padding: clamp(24px,2.4vw,34px); border-radius: 24px; overflow: hidden; will-change: transform; }
.au-tile--navy { background: var(--au-navy); color: #fff; }
.au-tile--lime { background: var(--au-lime); color: var(--au-navy); }
.au-tile--pink { background: var(--au-pink); color: var(--au-navy); }
.au-tile--blue { background: var(--au-blue); color: #fff; }
.au-tile-n { font-family: var(--serif); font-size: clamp(84px,8vw,128px); line-height: .8; letter-spacing: -.04em; opacity: .9; }
.au-tile-foot { display: flex; flex-direction: column; gap: 12px; }
.au-tile-k { margin: 0; min-height: 2.04em; display: flex; align-items: flex-end; font-family: var(--serif); font-weight: 400; font-size: clamp(28px,2.4vw,38px); line-height: 1.02; letter-spacing: -.015em; }
.au-tile-d { margin: 0; min-height: 4.35em; font-size: 16px; line-height: 1.45; opacity: .85; }
.au-why-foot { display: none; }
.au-why-dots { display: flex; gap: 6px; }
.au-dot-pg { display: block; height: 8px; width: 8px; border-radius: 100px; background: rgba(14,16,80,.2); transition: width .3s ease, background .3s ease; }
.au-dot-pg.is-active { width: 26px; background: var(--au-navy); }
.au-swipe-note { font-size: 14px; color: var(--au-grey); }
@media (max-width: 759px) {
  .au-tiles { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * clamp(20px,5vw,80px)); padding: 4px clamp(20px,5vw,80px) 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .au-tiles::-webkit-scrollbar { display: none; }
  .au-tile { flex: 0 0 82%; scroll-snap-align: center; min-height: 360px; gap: 40px; }
  .au-tile:active { transform: scale(.97); }
  .au-tile-k { min-height: 0; }
  .au-tile-d { min-height: 0; }
  .au-why-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
}

/* 4 — Our experience */
.au-exp { padding: clamp(80px,10vw,150px) 0; background: var(--au-navy); color: #fff; overflow: hidden; }
.au-exp-in { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px,5vw,80px); }
.au-exp-h2 { margin: 0 0 clamp(48px,6vw,80px); font-family: var(--serif); font-weight: 400; font-size: clamp(44px,5.6vw,92px); line-height: .98; letter-spacing: -.03em; color: #fff; }
.au-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); gap: clamp(40px,5vw,72px); }
.au-stat { display: flex; flex-direction: column; gap: 18px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.2); }
.au-stat-n { font-family: var(--serif); font-size: clamp(96px,12vw,180px); line-height: .82; letter-spacing: -.035em; color: #fff; }
.au-stat-n--lime { color: var(--au-lime); }
.au-stat-l { margin: 0; max-width: 26ch; font-size: clamp(17px,1.3vw,20px); line-height: 1.45; color: rgba(255,255,255,.8); }
.au-sides { display: flex; flex-wrap: wrap; gap: 8px; }
.au-side { padding: 6px 14px; border-radius: 100px; color: var(--au-navy); font-size: 14px; font-weight: 500; }
.au-side--lime { background: var(--au-lime); }
.au-side--lav { background: var(--au-lav); }
.au-side--pink { background: var(--au-pink); }
.au-exp-line { margin: clamp(64px,8vw,112px) 0 24px; font-size: clamp(17px,1.3vw,20px); color: rgba(255,255,255,.75); }
.au-marquee { display: flex; gap: 14px; width: max-content; will-change: transform; }
.au-mq { flex: 0 0 auto; padding: clamp(14px,1.6vw,22px) clamp(26px,3vw,44px); border-radius: 100px; color: var(--au-navy); font-family: var(--serif); font-size: clamp(30px,3.4vw,56px); line-height: 1; white-space: nowrap; }

/* 5 — Founder */
.au-founder { padding: clamp(96px,12vw,170px) clamp(20px,5vw,80px); background: var(--au-off); }
.au-founder-in { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,380px),1fr)); gap: clamp(48px,7vw,112px); align-items: start; }
.au-fcol-photo { display: flex; flex-direction: column; gap: 20px; max-width: 520px; width: 100%; position: relative; top: 0; }
@media (min-width: 900px) { .au-fcol-photo { position: sticky; top: 100px; } }
.au-photo { position: relative; height: 0; padding-bottom: 125%; }
.au-photo-frame { position: absolute; inset: 0; transform: translate(18px,18px); border-radius: 28px; background: var(--au-blue); }
.au-photo-clip { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: var(--au-lav); }
.au-photo-par { position: absolute; left: 0; right: 0; top: -40px; bottom: -40px; }
.au-photo-par img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.au-photo-cap { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.au-photo-cap .nm { font-family: var(--serif); font-size: 28px; color: var(--au-navy); }
.au-photo-cap .rl { padding: 4px 12px; border-radius: 100px; background: var(--au-lime); font-size: 13px; font-weight: 500; color: var(--au-navy); }
.au-fcol-copy { display: flex; flex-direction: column; gap: 22px; padding-top: clamp(0px,2vw,24px); }
.au-f-h2 { margin: 0 0 12px; max-width: 14ch; font-family: var(--serif); font-weight: 400; font-size: clamp(44px,5.4vw,84px); line-height: .98; letter-spacing: -.028em; color: var(--au-navy); text-wrap: balance; }
.au-f-p { margin: 0; max-width: 54ch; font-size: clamp(18px,1.4vw,21px); line-height: 1.6; color: var(--au-grey); text-wrap: pretty; }
.au-f-quote { margin: 12px 0; padding-left: clamp(18px,2vw,28px); border-left: 3px solid var(--au-blue); max-width: 24ch; font-family: var(--serif); font-size: clamp(30px,3vw,46px); line-height: 1.12; letter-spacing: -.015em; color: var(--au-navy); text-wrap: balance; }
.au-f-close { margin: 20px 0 0; padding-top: 28px; border-top: 1px solid rgba(14,16,80,.14); font-family: var(--serif); font-size: clamp(32px,3.2vw,50px); line-height: 1.1; letter-spacing: -.015em; color: var(--au-navy); }
.au-f-more { align-self: flex-start; display: none; gap: 10px; align-items: center; padding: 14px 22px; border: 1px solid var(--au-navy); border-radius: 100px; background: transparent; color: var(--au-navy); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.au-f-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 12px; }
.au-f-cta-note { font-size: clamp(18px,1.4vw,21px); color: var(--au-grey); }
@media (max-width: 759px) {
  .au-photo-frame { transform: translate(10px,10px); }
  .au-f-rest { display: none; }
  .au-founder.is-story-open .au-f-rest { display: block; }
  .au-f-more { display: flex; }
  .au-founder.is-story-open .au-f-more { display: none; }
}

/* magnetic button (shared) */
.au-magnet { position: relative; overflow: hidden; display: flex; gap: 10px; align-items: center; padding: 18px 34px; border: 0; border-radius: 100px; background: var(--au-navy); color: #fff; font: inherit; font-size: 16px; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none; }
.au-magnet > span { position: relative; }
.au-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: translateX(-120%); }

/* contact form modal */
.au-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(14,16,80,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.au-modal[hidden] { display: none; }
.au-card { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow: auto; padding: clamp(28px,3vw,40px); border-radius: 28px; background: #fff; box-shadow: 0 40px 100px -30px rgba(14,16,80,.5); }
.au-card-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--au-off); color: var(--au-navy); font-size: 20px; cursor: pointer; }
.au-form { display: flex; flex-direction: column; gap: 14px; }
.au-form h3 { margin: 0 40px 6px 0; font-family: var(--serif); font-weight: 400; font-size: clamp(32px,3vw,44px); line-height: 1; letter-spacing: -.02em; color: var(--au-navy); }
.au-form-sub { margin: 0 0 8px; font-size: 16px; line-height: 1.45; color: var(--au-grey); }
.au-input, .au-textarea { padding: 15px 18px; border: 1px solid rgba(14,16,80,.18); border-radius: 14px; font: inherit; font-size: 16px; color: var(--au-navy); background: #fff; }
.au-textarea { resize: vertical; }
.au-send { margin-top: 6px; display: flex; justify-content: center; gap: 10px; padding: 18px 28px; border: 0; border-radius: 100px; background: var(--au-navy); color: #fff; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.au-sent { display: none; flex-direction: column; gap: 14px; padding: 20px 0; }
.au-card.is-sent .au-form { display: none; }
.au-card.is-sent .au-sent { display: flex; }
.au-sent-pill { align-self: flex-start; padding: 6px 14px; border-radius: 100px; background: var(--au-lime); font-size: 14px; font-weight: 500; color: var(--au-navy); }
.au-sent h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(32px,3vw,44px); line-height: 1.05; letter-spacing: -.02em; color: var(--au-navy); }
.au-sent p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--au-grey); }
.au-sent a { color: var(--au-blue); }

/* mobile sticky contact bar */
.au-bar { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 55; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 100px; background: var(--au-navy); box-shadow: 0 20px 50px -16px rgba(14,16,80,.55); transform: translateY(160%); transition: transform .4s cubic-bezier(.22,1,.36,1); }
.au-bar.is-vis { transform: translateY(0); }
.au-bar-note { font-size: 15px; color: #fff; white-space: nowrap; }
.au-bar-btn { padding: 14px 20px; border: 0; border-radius: 100px; background: var(--au-lime); color: var(--au-navy); font: inherit; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; }
@media (min-width: 760px) { .au-bar { display: none; } }

/* ════════════════════════════════════════════════════════════════════
   MARKETING TEAMS page (redesign) — self-contained, namespaced .mt-*
   DARK page: navy base, some sections switch to white / off-white.
   Palette: navy #0E1050 · lime #D7EC17 · off-white #F6F5F1 · white #fff
            blue #5263F0 · lavender #E4DEFF · pink #F7A6F2 · body grey #4a4b6a
   ════════════════════════════════════════════════════════════════════ */
.mt, .mt-modal, .mt-bar {
  --mt-navy: #0E1050; --mt-navy-deep: #09093E; --mt-lime: #D7EC17; --mt-off: #F6F5F1;
  --mt-blue: #5263F0; --mt-lav: #E4DEFF; --mt-pink: #F7A6F2; --mt-grey: #4a4b6a;
  --mt-line: rgba(255,255,255,.14); --mt-line-dk: rgba(14,16,80,.14);
  --mt-mono: ui-monospace, "SFMono-Regular", Menlo, "Roboto Mono", monospace;
}
.mt { overflow-x: clip; background: var(--mt-navy); color: #fff; }
.mt-in { max-width: 1240px; margin: 0 auto; }

.mt-sec { position: relative; padding: clamp(80px,11vw,160px) clamp(20px,5vw,80px); }
.mt-sec--navy { background: var(--mt-navy); color: #fff; }
.mt-sec--deep { background: var(--mt-navy-deep); color: #fff; }
.mt-sec--white { background: #fff; color: var(--mt-navy); }
.mt-sec--off { background: var(--mt-off); color: var(--mt-navy); }
.mt-sec--rule { border-top: 1px solid rgba(255,255,255,.1); }

/* shared heading + lead */
.mt-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,380px),1fr)); gap: clamp(20px,5vw,80px); align-items: end; }
.mt-head--start { align-items: start; }
.mt-head-c { display: flex; flex-direction: column; gap: 18px; }
.mt-h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(38px,5vw,76px); line-height: 1; letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.mt-sec--white .mt-h2, .mt-sec--off .mt-h2 { color: var(--mt-navy); }
.mt-lead { margin: 0; max-width: 48ch; font-size: clamp(17px,1.3vw,20px); line-height: 1.45; color: rgba(255,255,255,.8); text-wrap: pretty; }
.mt-sec--white .mt-lead, .mt-sec--off .mt-lead { color: var(--mt-grey); }

/* lime marker (sweeps in from left; text always navy) */
.mt-mk { position: relative; display: inline-block; white-space: nowrap; }
.mt-mk-t { position: relative; z-index: 1; color: var(--mt-navy); }
.mt-mk-bar { position: absolute; z-index: 0; left: -.08em; right: -.08em; top: .1em; bottom: -.04em; background: var(--mt-lime); border-radius: 7px; transform-origin: left center; transform: scaleX(0); }
body.no-js .mt-mk-bar { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .mt-mk-bar { transform: scaleX(1); } }

/* ── 1 · HERO ── */
.mt-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden;
  padding: calc(66px + clamp(40px,7vw,96px)) clamp(20px,5vw,80px) clamp(64px,8vw,112px);
  background-color: var(--mt-navy);
  background-image:
    radial-gradient(55% 50% at 86% 110%, rgba(217,238,13,.16), transparent 70%),
    radial-gradient(60% 55% at 12% 108%, rgba(82,99,240,.5), transparent 70%); }
.mt-hero-in { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; width: 100%; }
.mt-crumb { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,.5); margin-bottom: clamp(28px,3.5vw,48px); }
.mt-crumb a { color: inherit; text-decoration: none; transition: color .25s ease; }
.mt-crumb a:hover { color: #fff; }
.mt-crumb .cur { color: #fff; }
.mt-h1 { margin: 0; max-width: 16ch; font-family: var(--serif); font-weight: 400;
  font-size: clamp(42px,7.2vw,124px); line-height: .98; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.mt-hero-mk .mt-mk-bar { top: .12em; bottom: -.02em; border-radius: 8px; }

/* ── 2 · PROBLEM (Sound familiar?) ── */
.mt-prob-head { margin: 0 0 clamp(40px,5vw,64px); }
.mt-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; }
.mt-quote { position: relative; display: flex; align-items: flex-start; min-height: clamp(180px,16vw,220px);
  padding: clamp(24px,2.4vw,34px); border-radius: 20px; border: 1px solid var(--mt-line); background: rgba(255,255,255,.04); }
.mt-quote::before { content: '\201C'; position: absolute; top: 2px; left: 18px; font-family: var(--serif); font-size: 72px; line-height: 1; color: var(--mt-pink); }
.mt-quote-t { margin: 28px 0 0; font-family: var(--serif); font-size: clamp(21px,1.9vw,27px); line-height: 1.2; color: #fff; text-wrap: pretty; }

/* translation-problem moment (pinned, scrubbed) */
.mt-trans { position: relative; }
.mt-trans-sticky { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(24px,3vw,40px); text-align: center; padding: clamp(60px,8vw,120px) clamp(20px,5vw,80px); }
.mt-trans-line { margin: 0; max-width: 18ch; font-family: var(--serif); font-weight: 400; font-size: clamp(34px,5.4vw,92px); line-height: 1.04; letter-spacing: -.025em; color: #fff; }
.mt-trans-line .mt-w { color: rgba(255,255,255,.15); transition: color .3s ease; }
.mt-trans-line .mt-w.is-on { color: #fff; }
/* the marker word ("translation problem.") follows its own dim→white reveal instead of
   sitting bright white from the start; JS turns it navy once the lime bar sweeps under it */
.mt-trans-line .mt-mk-t { color: inherit; }
body.no-js .mt-trans-line .mt-w { color: #fff; }
.mt-trans-solve { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(24px,3vw,46px); line-height: 1.1; color: var(--mt-lime); opacity: 0; transform: translateY(28px); }
body.no-js .mt-trans-solve { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mt-trans-line .mt-w { color: #fff; } .mt-trans-solve { opacity: 1; transform: none; } }

/* ── 3 · HOW WE WORK (white) ── */
.mt-how-body { margin-top: clamp(48px,6vw,84px); }
.mt-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px,3vw,40px); }
.mt-steps-track { position: absolute; left: 0; right: 0; top: 48px; height: 2px; background: var(--mt-line-dk); z-index: 0; }
.mt-steps-fill { display: block; height: 100%; width: 100%; background: var(--mt-navy); transform-origin: left center; transform: scaleX(0); }
body.no-js .mt-steps-fill { transform: scaleX(1); }
.mt-step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; }
.mt-step-ring { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--mt-line-dk); font-family: var(--serif); font-size: 30px; color: var(--mt-navy);
  transition: background .5s ease, border-color .5s ease; }
.mt-step.is-lit .mt-step-ring { border-color: transparent; }
.mt-step.is-lit.c-lav .mt-step-ring { background: var(--mt-lav); }
.mt-step.is-lit.c-blue .mt-step-ring { background: var(--mt-blue); color: #fff; }
.mt-step.is-lit.c-lime .mt-step-ring { background: var(--mt-lime); }
.mt-step-k { margin: 0; font-family: var(--serif); font-size: clamp(26px,2.4vw,36px); line-height: 1; color: var(--mt-navy); }
.mt-step-d { margin: 0; max-width: 34ch; font-size: clamp(16px,1.2vw,18px); line-height: 1.5; color: var(--mt-grey); transition: opacity .4s ease; }
.mt-steps.is-scrub .mt-step-d { opacity: .35; }
.mt-steps.is-scrub .mt-step.is-lit .mt-step-d { opacity: 1; }
/* each step stays dimmed and slightly lowered until its scroll mark is crossed, then
   "opens" in on a transition — so diagnose, design and default arrive one at a time */
.mt-steps.is-scrub .mt-step { opacity: .45; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.mt-steps.is-scrub .mt-step.is-lit { opacity: 1; transform: none; }

/* ── 4 · LEVELS (navy) ── */
.mt-lvl-body { margin-top: clamp(48px,6vw,84px); }
.mt-outcome { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 100px; background: var(--mt-lime); color: var(--mt-navy); font-size: clamp(15px,1.2vw,18px); font-weight: 500; }
.mt-lvl-table { position: relative; margin-top: clamp(28px,3vw,40px); padding-left: clamp(16px,2.4vw,34px); }
.mt-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
.mt-spine-fill { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: var(--mt-lime); transform-origin: bottom center; transform: scaleY(0); }
body.no-js .mt-spine-fill { transform: scaleY(1); }
.mt-lvl-row { display: grid; grid-template-columns: 0.9fr 1.3fr 1.4fr 0.9fr; gap: clamp(16px,2vw,32px); align-items: center;
  padding: clamp(22px,2.4vw,32px) 0; border-top: 1px solid var(--mt-line); }
.mt-lvl-row:first-child { border-top: 0; }
.mt-lvl-head { padding-bottom: 14px; }
.mt-lvl-head .mt-lvl-cap { font-family: var(--mt-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.mt-lvl-name { font-family: var(--serif); font-size: clamp(24px,2.4vw,34px); line-height: 1; }
.mt-lvl-name.c-white { color: #fff; } .mt-lvl-name.c-lav { color: var(--mt-lav); } .mt-lvl-name.c-pink { color: var(--mt-pink); }
.mt-lvl-txt { margin: 0; font-size: clamp(15px,1.15vw,17px); line-height: 1.4; color: rgba(255,255,255,.85); }
.mt-lvl-txt--muted { color: rgba(255,255,255,.6); }
.mt-lvl-speed { display: flex; flex-direction: column; gap: 10px; }
.mt-lvl-speed-l { font-size: 14px; font-weight: 500; color: #fff; }
.mt-speedbar { position: relative; height: 4px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.mt-speedbar span { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; border-radius: 4px; background: var(--mt-lime);
  animation: mtSpeed var(--mt-dur,3s) linear infinite; }
@keyframes mtSpeed { 0% { transform: translateX(-120%); } 100% { transform: translateX(380%); } }
@media (prefers-reduced-motion: reduce) { .mt-speedbar span { animation: none; width: 100%; } }
.mt-lvl-do { margin-top: clamp(40px,5vw,64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px),1fr)); gap: 16px; }
.mt-do { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid var(--mt-line); }
.mt-do-n { flex: 0 0 auto; padding: 4px 11px; border-radius: 100px; background: var(--mt-lime); color: var(--mt-navy); font-size: 13px; font-weight: 600; }
.mt-do-t { margin: 0; font-size: clamp(15px,1.15vw,17px); line-height: 1.4; color: rgba(255,255,255,.85); }

/* ── 5 · POSITION (off-white) ── */
.mt-pos-body { margin-top: clamp(48px,6vw,84px); }
.mt-quad-wrap { display: grid; grid-template-columns: 24px 1fr; gap: 14px; }
.mt-quad-y { display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  font-family: var(--mt-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(14,16,80,.5); }
.mt-quad-y span { writing-mode: vertical-rl; white-space: nowrap; }
.mt-quad { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--mt-line-dk); border-radius: 20px; overflow: hidden;
  background:
    linear-gradient(to right, transparent calc(50% - .5px), rgba(14,16,80,.1) calc(50% - .5px), rgba(14,16,80,.1) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), rgba(14,16,80,.1) calc(50% - .5px), rgba(14,16,80,.1) calc(50% + .5px), transparent calc(50% + .5px)); }
.mt-quad-seat { position: absolute; left: 50%; top: 0; right: 0; bottom: 50%; background: rgba(215,236,23,.18); }
.mt-node { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; gap: 4px; max-width: 42%; }
.mt-node-cap { font-family: var(--mt-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(14,16,80,.5); }
.mt-node-name { font-family: var(--serif); font-size: clamp(17px,1.5vw,22px); line-height: 1.05; color: var(--mt-navy); }
.mt-node-lbl { font-size: 13px; line-height: 1.35; color: var(--mt-grey); }
.mt-node--tango { align-items: center; text-align: center; max-width: none; }
.mt-tango-dot { width: clamp(96px,11vw,140px); height: clamp(96px,11vw,140px); border-radius: 50%; background: var(--mt-navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px; }
.mt-tango-dot .nm { font-family: var(--serif); font-size: clamp(18px,1.6vw,24px); color: var(--mt-lime); }
.mt-tango-dot .sm { font-size: 11px; color: rgba(255,255,255,.7); }
.mt-tango-say { margin: 10px auto 0; max-width: 20ch; font-family: var(--serif); font-size: clamp(16px,1.3vw,19px); line-height: 1.2; color: var(--mt-navy); }
.mt-quad-x { margin-top: 10px; padding-left: 38px; display: flex; justify-content: space-between;
  font-family: var(--mt-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(14,16,80,.5); }
/* mobile stacked list (hidden on desktop) */
.mt-pos-list { display: none; }
.mt-pos-item { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px; border-radius: 18px; border: 1px solid var(--mt-line-dk); }
.mt-pos-item + .mt-pos-item { margin-top: 12px; }
.mt-pos-item--tango { flex-direction: column; align-items: flex-start; gap: 10px; background: var(--mt-lime); border-color: transparent; }
.mt-pos-item .k { font-family: var(--serif); font-size: 22px; color: var(--mt-navy); }
.mt-pos-item .cap { font-family: var(--mt-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(14,16,80,.55); }
.mt-pos-item .lbl { font-size: 14px; color: var(--mt-grey); text-align: right; max-width: 48%; }
.mt-pos-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-pos-chip { padding: 5px 12px; border-radius: 100px; background: var(--mt-navy); color: #fff; font-size: 12px; font-weight: 500; }

/* ── 6 · ALIGNMENT (navy) ── */
.mt-align-body { margin-top: clamp(40px,5vw,64px); }
.mt-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: clamp(32px,4vw,52px); }
.mt-leg { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.8); }
.mt-leg i { width: 11px; height: 11px; border-radius: 50%; }
.mt-align-row { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center;
  padding: clamp(20px,2.2vw,30px) 0; border-top: 1px solid var(--mt-line); }
.mt-align-row:first-of-type { border-top: 0; }
.mt-align-lbl { font-family: var(--serif); font-size: clamp(19px,1.6vw,24px); color: #fff; }
.mt-track { position: relative; height: 34px; }
.mt-guide { position: absolute; top: 50%; width: 3px; height: 28px; margin-top: -14px; border-radius: 3px; background: var(--mt-lime); opacity: .9; }
.mt-adot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; }
.mt-align-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: clamp(32px,4vw,52px);
  font-size: clamp(16px,1.3vw,20px); color: rgba(255,255,255,.7); }
.mt-align-pill { padding: 7px 16px; border-radius: 100px; background: var(--mt-lime); color: var(--mt-navy); font-weight: 500; opacity: .25; }
body.no-js .mt-align-pill { opacity: 1; }
.mt-agreed { position: absolute; top: 50%; right: 0; transform: translateY(-50%) scale(.6); opacity: 0;
  padding: 5px 13px; border-radius: 100px; background: var(--mt-lime); color: var(--mt-navy); font-size: 13px; font-weight: 600; }
body.no-js .mt-agreed { opacity: 1; transform: translateY(-50%); }

/* ── 7 · BENEFITS (off-white) ── */
.mt-ben-grid { margin-top: clamp(48px,6vw,84px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px) clamp(32px,5vw,80px); }
.mt-ben-col--b { margin-top: clamp(0px,8vw,140px); }
.mt-ben { padding-left: clamp(20px,2vw,28px); border-left: 3px solid var(--mt-lime); }
.mt-ben + .mt-ben { margin-top: clamp(40px,5vw,72px); }
.mt-ben-tag { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mt-blue); }
.mt-ben-k { margin: 14px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px,3vw,46px); line-height: 1.08; letter-spacing: -.015em; color: var(--mt-navy); text-wrap: balance; }
.mt-ben-k .it { font-family: var(--serif); font-style: italic; }

/* contact form modal (scoped .mt-modal) */
.mt-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(14,16,80,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mt-modal[hidden] { display: none; }
.mt-card { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow: auto; padding: clamp(28px,3vw,40px); border-radius: 28px; background: #fff; box-shadow: 0 40px 100px -30px rgba(14,16,80,.5); }
.mt-card-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--mt-off); color: var(--mt-navy); font-size: 20px; cursor: pointer; }
.mt-form { display: flex; flex-direction: column; gap: 14px; }
.mt-form h3 { margin: 0 40px 6px 0; font-family: var(--serif); font-weight: 400; font-size: clamp(32px,3vw,44px); line-height: 1; letter-spacing: -.02em; color: var(--mt-navy); }
.mt-form-sub { margin: 0 0 8px; font-size: 16px; line-height: 1.45; color: var(--mt-grey); }
.mt-input, .mt-textarea { padding: 15px 18px; border: 1px solid rgba(14,16,80,.18); border-radius: 14px; font: inherit; font-size: 16px; color: var(--mt-navy); background: #fff; }
.mt-textarea { resize: vertical; }
.mt-send { margin-top: 6px; display: flex; justify-content: center; gap: 10px; padding: 18px 28px; border: 0; border-radius: 100px; background: var(--mt-navy); color: #fff; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.mt-sent { display: none; flex-direction: column; gap: 14px; padding: 20px 0; }
.mt-card.is-sent .mt-form { display: none; }
.mt-card.is-sent .mt-sent { display: flex; }
.mt-sent-pill { align-self: flex-start; padding: 6px 14px; border-radius: 100px; background: var(--mt-lime); font-size: 14px; font-weight: 500; color: var(--mt-navy); }
.mt-sent h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(32px,3vw,44px); line-height: 1.05; letter-spacing: -.02em; color: var(--mt-navy); }
.mt-sent p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--mt-grey); }
.mt-sent a { color: var(--mt-blue); }

/* mobile sticky contact bar */
.mt-bar { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 55; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 100px; background: var(--mt-lime); box-shadow: 0 20px 50px -16px rgba(14,16,80,.55); transform: translateY(160%); transition: transform .4s cubic-bezier(.22,1,.36,1); }
.mt-bar.is-vis { transform: translateY(0); }
.mt-bar-note { font-size: 15px; font-weight: 500; color: var(--mt-navy); white-space: nowrap; }
.mt-bar-btn { padding: 14px 20px; border: 0; border-radius: 100px; background: var(--mt-navy); color: #fff; font: inherit; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; }
@media (min-width: 760px) { .mt-bar { display: none; } }

/* ── MARKETING TEAMS responsive (< 760px) ── */
@media (max-width: 759px) {
  .mt-steps { grid-template-columns: 1fr; gap: 0; }
  .mt-steps-track { left: 47px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .mt-steps-fill { width: 100%; height: 100%; transform-origin: top center; transform: scaleY(0); }
  body.no-js .mt-steps-fill { transform: scaleY(1); }
  .mt-step { flex-direction: row; gap: 18px; padding: 22px 0; }
  .mt-step-ring { width: 56px; height: 56px; font-size: 22px; flex: 0 0 auto; }
  .mt-step-body { display: flex; flex-direction: column; gap: 10px; }

  .mt-lvl-table { padding-left: 16px; }
  .mt-lvl-head { display: none; }
  .mt-lvl-row { grid-template-columns: 1fr; gap: 12px; border-top: 0; margin-bottom: 12px;
    border: 1px solid var(--mt-line); border-radius: 18px; padding: 22px; background: rgba(255,255,255,.04); }
  .mt-lvl-row .mt-lvl-name { font-size: 24px; }

  .mt-quad-wrap, .mt-quad-x { display: none; }
  .mt-pos-list { display: block; }

  .mt-align-row { grid-template-columns: 1fr; gap: 10px; }
  .mt-align-lbl { font-size: 17px; }

  .mt-ben-grid { grid-template-columns: 1fr; gap: 0; }
  .mt-ben-col--b { margin-top: 0; }
  .mt-ben-col--b .mt-ben:first-child { margin-top: clamp(40px,5vw,72px); }
}

/* ════════════════════════════════════════════════════════════════════
   AGENCIES page (redesign) — self-contained, namespaced .ag-*
   DARK page: navy base, light sections in between. Matches .mt-* system.
   Palette: navy #0E1050 · lime #D7EC17 · off-white #F6F5F1 · white #fff
            blue #5263F0 · lavender #E4DEFF · body grey #4a4b6a
   ════════════════════════════════════════════════════════════════════ */
.ag, .ag-modal, .ag-bar {
  --ag-navy: #0E1050; --ag-navy-deep: #09093E; --ag-lime: #D7EC17; --ag-off: #F6F5F1;
  --ag-blue: #5263F0; --ag-lav: #E4DEFF; --ag-grey: #4a4b6a;
  --ag-line: rgba(255,255,255,.14); --ag-line-dk: rgba(14,16,80,.14);
  --ag-mono: ui-monospace, "SFMono-Regular", Menlo, "Roboto Mono", monospace;
}
.ag { overflow-x: clip; background: var(--ag-navy); color: #fff; }
.ag-in { max-width: 1240px; margin: 0 auto; }

.ag-sec { position: relative; padding: clamp(80px,11vw,160px) clamp(20px,5vw,80px); }
.ag-sec--navy { background: var(--ag-navy); color: #fff; }
.ag-sec--white { background: #fff; color: var(--ag-navy); }
.ag-sec--off { background: var(--ag-off); color: var(--ag-navy); }
.ag-sec--rule { border-top: 1px solid rgba(255,255,255,.1); }

.ag-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,380px),1fr)); gap: clamp(20px,5vw,80px); align-items: end; }
.ag-head--start { align-items: start; }
.ag-head-c { display: flex; flex-direction: column; gap: 18px; }
.ag-h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(38px,5vw,76px); line-height: 1; letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.ag-sec--white .ag-h2, .ag-sec--off .ag-h2 { color: var(--ag-navy); }
.ag-lead { margin: 0; max-width: 48ch; font-size: clamp(17px,1.3vw,20px); line-height: 1.45; color: rgba(255,255,255,.8); text-wrap: pretty; }
.ag-sec--white .ag-lead, .ag-sec--off .ag-lead { color: var(--ag-grey); }
.ag-lead .em { color: var(--ag-navy); font-weight: 500; }
.ag-sec--navy .ag-lead .em { color: #fff; }

/* lime marker (upright, no italic) */
.ag-mk { position: relative; display: inline-block; white-space: nowrap; }
.ag-mk-t { position: relative; z-index: 1; color: var(--ag-navy); }
.ag-mk-bar { position: absolute; z-index: 0; left: -.08em; right: -.08em; top: .1em; bottom: -.04em; background: var(--ag-lime); border-radius: 7px; transform-origin: left center; transform: scaleX(0); }
body.no-js .ag-mk-bar { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .ag-mk-bar { transform: scaleX(1); } }

/* 1 · HERO */
.ag-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden;
  padding: calc(66px + clamp(40px,7vw,96px)) clamp(20px,5vw,80px) clamp(64px,8vw,112px);
  background-color: var(--ag-navy);
  background-image:
    radial-gradient(55% 50% at 86% 110%, rgba(217,238,13,.16), transparent 70%),
    radial-gradient(60% 55% at 12% 108%, rgba(82,99,240,.5), transparent 70%); }
.ag-hero-in { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; width: 100%; }
.ag-crumb { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,.5); margin-bottom: clamp(28px,3.5vw,48px); }
.ag-crumb a { color: inherit; text-decoration: none; transition: color .25s ease; }
.ag-crumb a:hover { color: #fff; }
.ag-crumb .cur { color: #fff; }
.ag-h1 { margin: 0; max-width: 17ch; font-family: var(--serif); font-weight: 400;
  font-size: clamp(42px,7.2vw,124px); line-height: .98; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.ag-h1 .ag-mk { margin: 0 .04em; }
.ag-hero-mk .ag-mk-bar { top: .12em; bottom: -.02em; border-radius: 8px; }

/* 2 · AROUND THE CLIENT (venn) */
.ag-venn-wrap { margin-top: clamp(48px,6vw,84px); display: flex; justify-content: center; }
.ag-venn { position: relative; width: 100%; max-width: 880px; }
.ag-venn-m { display: none; }
.ag-venn svg { width: 100%; height: auto; display: block; overflow: visible; }
.ag-vc-base { fill: none; }
.ag-vc-agency { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2; }
.ag-vc-tango { fill: rgba(82,99,240,.9); }
.ag-vc-overlap { fill: var(--ag-lime); opacity: .55; }
.ag-venn-lbl { position: absolute; transform: translate(-50%,-50%); width: 26%; text-align: center; }
.ag-venn-lbl .nm { font-family: var(--serif); font-size: clamp(16px,1.5vw,22px); line-height: 1.05; color: #fff; }
.ag-venn-lbl .dc { margin-top: 8px; font-size: clamp(12px,1vw,14px); line-height: 1.35; color: rgba(255,255,255,.8); }
.ag-venn-lbl--tango .nm, .ag-venn-lbl--tango .dc { color: #fff; }
.ag-venn-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.6); opacity: 0;
  padding: 7px 16px; border-radius: 100px; background: var(--ag-lime); color: var(--ag-navy); font-size: clamp(13px,1.1vw,15px); font-weight: 600; white-space: nowrap; z-index: 2; }
body.no-js .ag-venn-pill { opacity: 1; transform: translate(-50%,-50%); }

/* 3 · WHY INDEPENDENT (cards desktop / accordion mobile) */
.ag-ind { margin-top: clamp(48px,6vw,84px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); gap: 16px; }
.ag-ind-item { border: 1px solid var(--ag-line-dk); border-radius: 20px; background: var(--ag-off); transition: transform .3s ease, box-shadow .3s ease; overflow: hidden; }
.ag-ind-head { width: 100%; display: flex; align-items: center; gap: 14px; padding: clamp(24px,2.2vw,32px); background: none; border: 0; text-align: left; font: inherit; cursor: default; }
.ag-ind-n { font-family: var(--ag-mono); font-size: 12px; color: var(--ag-blue); }
.ag-ind-k { flex: 1; font-family: var(--serif); font-size: clamp(22px,1.9vw,28px); line-height: 1.05; color: var(--ag-navy); }
.ag-ind-ic { display: none; flex: 0 0 auto; width: 32px; height: 32px; position: relative; border-radius: 50%; background: rgba(14,16,80,.06); }
.ag-ind-ic::before, .ag-ind-ic::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--ag-navy); transition: transform .3s ease, opacity .3s ease; }
.ag-ind-ic::before { width: 13px; height: 2px; transform: translate(-50%,-50%); }
.ag-ind-ic::after { width: 2px; height: 13px; transform: translate(-50%,-50%); }
.ag-ind-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s cubic-bezier(.4,0,.2,1); }
.ag-ind-body-in { overflow: hidden; min-height: 0; }
.ag-ind-d { margin: 0; padding: 0 clamp(24px,2.2vw,32px) clamp(24px,2.2vw,32px); font-size: 16px; line-height: 1.5; color: var(--ag-grey); }
@media (min-width: 760px) { .ag-ind-item:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -30px rgba(14,16,80,.4); } }

/* 4 · COMMERCIAL BRIDGE */
.ag-bridge { margin-top: clamp(48px,6vw,84px); display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
.ag-bcard { display: flex; flex-direction: column; gap: 8px; padding: clamp(26px,2.4vw,36px); border-radius: 24px; }
.ag-bcard--media { background: rgba(255,255,255,.05); border: 1px solid var(--ag-line); }
.ag-bcard--comm { background: #fff; border: 1px solid var(--ag-line-dk); }
.ag-bcap { font-family: var(--ag-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ag-bcard--media .ag-bcap { color: rgba(255,255,255,.55); }
.ag-bcard--comm .ag-bcap { color: rgba(14,16,80,.5); }
.ag-bcard-sub { margin: 2px 0 14px; font-size: 14px; }
.ag-bcard--media .ag-bcard-sub { color: rgba(255,255,255,.6); }
.ag-bcard--comm .ag-bcard-sub { color: var(--ag-grey); }
.ag-bitem { padding: 13px 0; font-size: clamp(15px,1.2vw,17px); line-height: 1.3; border-top: 1px solid var(--ag-line); }
.ag-bcard--comm .ag-bitem { border-top-color: var(--ag-line-dk); color: var(--ag-navy); }
.ag-bcard--media .ag-bitem { color: #fff; }
.ag-bitem:first-of-type { border-top: 0; }
.ag-bconn { position: relative; display: flex; align-items: center; justify-content: center; width: clamp(24px,4vw,64px); }
.ag-bconn-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.ag-bconn-dot { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ag-lime); }
.ag-bpill-wrap { display: flex; align-items: center; justify-content: center; padding: 0 clamp(8px,1vw,14px); }
.ag-bpill { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 22px; border-radius: 18px; background: var(--ag-lime); color: var(--ag-navy); text-align: center; transform: scale(.6); opacity: 0; }
body.no-js .ag-bpill { transform: none; opacity: 1; }
.ag-bpill .k { font-family: var(--serif); font-size: clamp(18px,1.6vw,24px); line-height: 1; }
.ag-bpill .s { font-size: 12px; font-weight: 500; }

/* 5 · THREE WAYS */
.ag-ways { margin-top: clamp(48px,6vw,84px); display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.ag-way { display: flex; flex-direction: column; gap: 16px; min-height: clamp(260px,24vw,340px); padding: clamp(26px,2.4vw,36px); border-radius: 24px; transition: transform .3s ease; }
@media (min-width: 760px) { .ag-way:hover { transform: translateY(-5px); } }
.ag-way--navy { background: var(--ag-navy); color: #fff; border: 1px solid var(--ag-line); }
.ag-way--lav { background: var(--ag-lav); color: var(--ag-navy); }
.ag-way--blue { background: var(--ag-blue); color: #fff; }
.ag-way-badge { align-self: flex-start; padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.ag-badge--lime { background: var(--ag-lime); color: var(--ag-navy); }
.ag-badge--navy { background: var(--ag-navy); color: #fff; }
.ag-badge--white { background: #fff; color: var(--ag-navy); }
.ag-way-k { margin: auto 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px,2.6vw,40px); line-height: 1.02; letter-spacing: -.015em; }
.ag-way-d { margin: 0; font-size: 16px; line-height: 1.5; }
.ag-way--navy .ag-way-d { color: rgba(255,255,255,.82); }
.ag-way--lav .ag-way-d { color: rgba(14,16,80,.75); }
.ag-way--blue .ag-way-d { color: rgba(255,255,255,.85); }
.ag-ways-foot { display: none; }

/* 6 · MOMENTS */
.ag-moments { margin-top: clamp(48px,6vw,84px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr)); gap: 16px; }
.ag-moment { padding-top: 20px; border-top: 2px solid rgba(255,255,255,.18); }
.ag-moment-n { font-family: var(--ag-mono); font-size: 13px; color: var(--ag-lime); }
.ag-moment-k { margin: 14px 0 10px; font-family: var(--serif); font-size: clamp(24px,2vw,30px); line-height: 1.05; color: #fff; }
.ag-moment-d { margin: 0; font-size: clamp(15px,1.15vw,17px); line-height: 1.45; color: rgba(255,255,255,.78); }

/* 7 · EACH SIDE */
.ag-sides-tabs { display: none; }
.ag-sides { margin-top: clamp(48px,6vw,84px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ag-side { padding: clamp(28px,2.6vw,40px); border-radius: 24px; }
.ag-side--client { background: #fff; border: 1px solid var(--ag-line-dk); }
.ag-side--agency { background: var(--ag-navy); border: 1px solid var(--ag-line); }
.ag-side-h { margin: 0 0 clamp(20px,2vw,28px); font-family: var(--serif); font-weight: 400; font-size: clamp(24px,2.2vw,32px); line-height: 1.05; }
.ag-side--client .ag-side-h { color: var(--ag-navy); }
.ag-side--agency .ag-side-h { color: #fff; }
.ag-side-pt { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; font-size: clamp(16px,1.3vw,19px); line-height: 1.4; border-top: 1px solid var(--ag-line-dk); }
.ag-side--agency .ag-side-pt { border-top-color: var(--ag-line); color: rgba(255,255,255,.88); }
.ag-side--client .ag-side-pt { color: var(--ag-navy); }
.ag-side-pt:first-of-type { border-top: 0; }
.ag-side-dot { flex: 0 0 auto; width: 10px; height: 10px; margin-top: .45em; border-radius: 50%; }
.ag-side--client .ag-side-dot { background: var(--ag-blue); }
.ag-side--agency .ag-side-dot { background: var(--ag-lime); }

/* contact form modal (scoped .ag-modal) */
.ag-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(14,16,80,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ag-modal[hidden] { display: none; }
.ag-card { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow: auto; padding: clamp(28px,3vw,40px); border-radius: 28px; background: #fff; box-shadow: 0 40px 100px -30px rgba(14,16,80,.5); }
.ag-card-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ag-off); color: var(--ag-navy); font-size: 20px; cursor: pointer; }
.ag-form { display: flex; flex-direction: column; gap: 14px; }
.ag-form h3 { margin: 0 40px 6px 0; font-family: var(--serif); font-weight: 400; font-size: clamp(32px,3vw,44px); line-height: 1; letter-spacing: -.02em; color: var(--ag-navy); }
.ag-form-sub { margin: 0 0 8px; font-size: 16px; line-height: 1.45; color: var(--ag-grey); }
.ag-input, .ag-textarea { padding: 15px 18px; border: 1px solid rgba(14,16,80,.18); border-radius: 14px; font: inherit; font-size: 16px; color: var(--ag-navy); background: #fff; }
.ag-textarea { resize: vertical; }
.ag-send { margin-top: 6px; display: flex; justify-content: center; gap: 10px; padding: 18px 28px; border: 0; border-radius: 100px; background: var(--ag-navy); color: #fff; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.ag-sent { display: none; flex-direction: column; gap: 14px; padding: 20px 0; }
.ag-card.is-sent .ag-form { display: none; }
.ag-card.is-sent .ag-sent { display: flex; }
.ag-sent-pill { align-self: flex-start; padding: 6px 14px; border-radius: 100px; background: var(--ag-lime); font-size: 14px; font-weight: 500; color: var(--ag-navy); }
.ag-sent h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(32px,3vw,44px); line-height: 1.05; letter-spacing: -.02em; color: var(--ag-navy); }
.ag-sent p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ag-grey); }
.ag-sent a { color: var(--ag-blue); }

/* mobile sticky contact bar */
.ag-bar { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 55; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 100px; background: var(--ag-lime); box-shadow: 0 20px 50px -16px rgba(14,16,80,.55); transform: translateY(160%); transition: transform .4s cubic-bezier(.22,1,.36,1); }
.ag-bar.is-vis { transform: translateY(0); }
.ag-bar-note { font-size: 15px; font-weight: 500; color: var(--ag-navy); white-space: nowrap; }
.ag-bar-btn { padding: 14px 20px; border: 0; border-radius: 100px; background: var(--ag-navy); color: #fff; font: inherit; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; }
@media (min-width: 760px) { .ag-bar { display: none; } }

/* ── AGENCIES responsive (< 760px) ── */
@media (max-width: 759px) {
  /* venn: swap to the vertical stage */
  .ag-venn-d { display: none; }
  .ag-venn-m { display: block; max-width: 320px; }
  .ag-venn-m .ag-venn-lbl { width: 54%; }

  /* why independent: accordion */
  .ag-ind { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ag-line-dk); }
  .ag-ind-item { border: 0; border-bottom: 1px solid var(--ag-line-dk); border-radius: 0; background: transparent; }
  .ag-ind-head { cursor: pointer; padding: 22px 2px; }
  .ag-ind-ic { display: block; }
  .ag-ind-item.is-open .ag-ind-ic::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
  .ag-ind-body { grid-template-rows: 0fr; }
  .ag-ind-item.is-open .ag-ind-body { grid-template-rows: 1fr; }
  .ag-ind-d { padding: 0 2px 22px; }

  /* bridge: stack */
  .ag-bridge { grid-template-columns: 1fr; }
  .ag-bconn { width: 100%; height: clamp(32px,8vw,48px); }
  .ag-bconn-line { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .ag-bpill-wrap { padding: 0; flex-direction: column; }

  /* three ways: swipe carousel */
  .ag-ways { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: clamp(40px,6vw,64px) calc(-1 * clamp(20px,5vw,80px)) 0; padding: 4px clamp(20px,5vw,80px) 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ag-ways::-webkit-scrollbar { display: none; }
  .ag-way { flex: 0 0 82%; scroll-snap-align: center; min-height: 300px; }
  .ag-ways-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
  .ag-ways-dots { display: flex; gap: 6px; }
  .ag-dot-pg { display: block; height: 8px; width: 8px; border-radius: 100px; background: rgba(14,16,80,.2); transition: width .3s ease, background .3s ease; }
  .ag-dot-pg.is-active { width: 26px; background: var(--ag-navy); }
  .ag-swipe-note { font-size: 14px; color: var(--ag-grey); }

  /* moments: 2x2 */
  .ag-moments { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .ag-moment-k { font-size: 26px; }
  .ag-moment-d { font-size: 15px; }

  /* each side: tab switch */
  .ag-sides-tabs { display: flex; gap: 8px; margin-top: clamp(40px,6vw,64px); }
  .ag-sides-tab { flex: 1; padding: 13px; border: 1px solid var(--ag-line-dk); border-radius: 100px; background: transparent; color: var(--ag-navy); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; }
  .ag-sides-tab.is-active { background: var(--ag-navy); color: #fff; border-color: var(--ag-navy); }
  .ag-sides { margin-top: 20px; grid-template-columns: 1fr; gap: 0; }
  .ag-side { display: none; padding: 0; border: 0 !important; background: transparent !important; border-radius: 0; }
  .ag-side.is-active { display: block; }
  .ag-side-h { display: none; }
  .ag-side-pt { font-family: var(--serif); font-size: 24px; color: var(--ag-navy) !important; border-top-color: var(--ag-line-dk) !important; }
  .ag-side--agency .ag-side-dot { background: var(--ag-blue); }
}

/* ============================================================================
   HOMEPAGE (.hp-*) — self-contained rebuild to the homepage handoff.
   Navy entry animation, frosted nav, hero glass field, Measurement v2 story,
   and every scrubbed section. Pins are desktop only (handled in the page JS).
   ========================================================================== */
/* homepage palette lives on :root so the shared nav can use it on every
   page, not only pages that carry the .hp body class */
:root {
  --hp-navy: #0E1050; --hp-navy-deep: #070934; --hp-lime: #D7EC17;
  --hp-blue: #5263F0; --hp-blue-lt: #8C98FF; --hp-lav: #E4DEFF; --hp-pink: #F7A6F2;
  --hp-off: #F6F5F1; --hp-herobg: #f3f2ee; --hp-footbg: #EFEEEA; --hp-grey: #4a4b6a;
  --hp-serif: 'Instrument Serif', Georgia, serif;
}
.hp {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  color: var(--hp-navy); background: #fff; overflow-x: clip; -webkit-font-smoothing: antialiased;
}
.hp ::selection { background: var(--hp-lime); color: var(--hp-navy); }
.hp a { color: inherit; text-decoration: none; }
/* these links need a color that differs from the inherited section colour; the
   `.hp a { color: inherit }` reset (0,1,1) outranks a class-only rule, so scope them */
.hp-nav-links .hp-navcta { color: #fff; }
.hp-nav-links .hp-navcta:hover { color: var(--hp-navy); }
.hp-fork-grid .hp-forkcard--lime { color: var(--hp-navy); }
.hp-fork-grid .hp-forkcard--blue { color: #fff; }
.hp-founder-copy .hp-founder-cta { color: var(--hp-navy); }
.hp-menu-panel .hp-menu-l { color: var(--hp-navy); }
.hp-menu-panel .hp-menu-sub { color: var(--hp-grey); }
.hp-footer .hp-foot-news-a { color: var(--hp-navy); }
html.tl-intro { background: var(--hp-navy); overflow: hidden; }
html.tl-intro body.hp { background: var(--hp-navy); }
html.tl-intro .hp-hero-in { opacity: 0; }
html.tl-intro .hp-nav-logo img { opacity: 0; }
html.hp-menu-on { overflow: hidden; }
.hp-desk-only {}
.hp-mob-only { display: none; }

/* ---- entry loader ---- */
.hp-loader { display: none; position: fixed; inset: 0; z-index: 5000; cursor: pointer; font-family: 'Instrument Sans', sans-serif; }
html.tl-intro .hp-loader { display: block; }
.hp-loader-bg { position: absolute; inset: 0; overflow: hidden; background: var(--hp-navy); }
.hp-loader-grid { position: absolute; inset: 0; opacity: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 64px 64px; background-position: center center; }
.hp-loader-chart { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hp-loader-pill { position: absolute; left: 0; top: 0; padding: 7px 18px 8px; border-radius: 100px; font-size: clamp(17px,1.4vw,20px); font-weight: 600; opacity: 0; white-space: nowrap; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
.hp-loader-pill--data { background: var(--hp-lime); color: var(--hp-navy); }
.hp-loader-pill--people { background: var(--hp-blue); color: #fff; }
.hp-loader-count { position: absolute; right: clamp(20px,4vw,56px); bottom: clamp(16px,3vw,40px); font-family: var(--hp-serif); font-size: clamp(64px,8vw,128px); line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; opacity: 0; }
.hp-loader-pct { font-size: .45em; vertical-align: .9em; margin-left: 4px; }
.hp-loader-word { position: absolute; left: 50%; top: 50%; width: clamp(220px,42vw,380px); line-height: 0; }

/* ---- nav ---- */
.hp-nav { position: fixed; top: 12px; left: clamp(14px,3vw,40px); right: clamp(14px,3vw,40px); z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 8px 0 clamp(14px,1.8vw,22px); border-radius: 100px; background: rgba(255,255,255,.72); border: 1px solid rgba(14,16,80,.08); box-shadow: 0 12px 40px -18px rgba(14,16,80,.25); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); transition: transform .45s cubic-bezier(.22,1,.36,1); }
.hp-nav-logo { display: flex; align-items: center; }
.hp-nav-logo img { height: 24px; width: auto; display: block; }
.hp-nav-links { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
.hp-navlink { padding: 8px clamp(11px,1.2vw,16px); border-radius: 100px; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--hp-navy); background: rgba(14,16,80,.06); border: 1px solid rgba(14,16,80,.08); transition: background .25s, border-color .25s; }
.hp-navlink:hover { background: #fff; border-color: rgba(14,16,80,.25); }
.hp-navcta { display: flex; align-items: center; gap: 8px; margin-left: 6px; padding: 10px 20px; border-radius: 100px; font-size: 14px; font-weight: 500; white-space: nowrap; background: var(--hp-navy); color: #fff; cursor: pointer; transition: background .25s, color .25s; }
.hp-navcta:hover { background: var(--hp-lime); color: var(--hp-navy); }
.hp-menu-btn { display: none; align-items: center; gap: 10px; min-height: 40px; padding: 9px 16px; border: 0; border-radius: 100px; background: var(--hp-navy); color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.hp-menu-ic { display: flex; flex-direction: column; gap: 4px; }
.hp-menu-ic span { display: block; width: 14px; height: 1.5px; background: #fff; }
.hp-menu-panel { position: fixed; left: 12px; right: 12px; top: 76px; z-index: 99; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 24px; background: #fff; border: 1px solid rgba(14,16,80,.08); box-shadow: 0 30px 80px -20px rgba(14,16,80,.4); }
.hp-menu-panel[hidden] { display: none; }
.hp-menu-l { padding: 16px 18px; border-radius: 16px; font-family: var(--hp-serif); font-size: 30px; line-height: 1; color: var(--hp-navy); }
.hp-menu-sub { padding: 8px 18px 8px 34px; font-size: 16px; color: var(--hp-grey); }
.hp-menu-cta { margin-top: 8px; padding: 18px; border: 0; border-radius: 100px; background: var(--hp-navy); color: #fff; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.hp-nav-spacer { height: 80px; flex: 0 0 auto; }

/* shared nav on content pages has no .hp wrapper, so reset link decoration here */
.hp-nav a, .hp-nav-logo, .hp-menu-panel a { text-decoration: none; }
.hp-menu-cta { display: block; text-align: center; text-decoration: none; }

/* "Who we work with" desktop dropdown (hover / focus reveal) */
.hp-navitem { position: relative; display: flex; align-items: center; }
.hp-navlink--has { display: inline-flex; align-items: center; gap: 7px; }
.hp-navlink--has::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: .55; transition: transform .25s ease, margin-top .25s ease; }
.hp-navitem:hover .hp-navlink--has::after, .hp-navitem:focus-within .hp-navlink--has::after { transform: rotate(-135deg); margin-top: 1px; }
.hp-navdrop { position: absolute; top: calc(100% + 12px); left: 0; min-width: 212px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 18px; background: rgba(255,255,255,.95); border: 1px solid rgba(14,16,80,.08); box-shadow: 0 22px 54px -20px rgba(14,16,80,.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .22s ease, transform .22s ease, visibility .22s; }
.hp-navdrop::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.hp-navitem:hover .hp-navdrop, .hp-navitem:focus-within .hp-navdrop { opacity: 1; visibility: visible; transform: translateY(0); }
.hp-navdrop a { padding: 12px 16px; border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--hp-navy); white-space: nowrap; transition: background .2s ease; }
.hp-navdrop a:hover { background: rgba(14,16,80,.06); }

/* dark-page variant: navy translucent nav with a white logo + white links,
   so the nav stays readable over the navy heroes on the fork pages */
body.dark .hp-nav { background: rgba(14,16,80,.88); border-color: rgba(255,255,255,.14); box-shadow: 0 12px 40px -18px rgba(0,0,0,.6); }
body.dark .hp-nav-logo img { filter: brightness(0) invert(1); }
body.dark .hp-navlink { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
body.dark .hp-navlink:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.32); }
body.dark .hp-nav-links .hp-navcta { background: var(--hp-lime); color: var(--hp-navy); }
body.dark .hp-nav-links .hp-navcta:hover { background: #fff; color: var(--hp-navy); }
body.dark .hp-menu-btn { background: #fff; color: var(--hp-navy); }
body.dark .hp-menu-ic span { background: var(--hp-navy); }
body.dark .hp-navdrop { background: rgba(14,16,80,.96); border-color: rgba(255,255,255,.14); }
body.dark .hp-navdrop a { color: #fff; }
body.dark .hp-navdrop a:hover { background: rgba(255,255,255,.1); }

/* ---- hero ---- */
.hp-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; background: var(--hp-herobg); overflow: hidden; }
.hp-hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(14,16,80,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(14,16,80,.045) 1px, transparent 1px); background-size: 64px 64px; background-position: center top; -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%); }
.hp-hero-field { position: absolute; inset: 0; pointer-events: none; display: flex; filter: blur(6px) saturate(1.05); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%); }
.hp-strip { flex: 1 1 0; height: 100%; background-repeat: no-repeat; background-size: 100vw 100vh; }
.hp-hero-in { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px clamp(20px,5vw,80px) clamp(90px,10vw,140px); }
.hp-h1 { margin: 0; font-family: var(--hp-serif); font-weight: 400; font-size: clamp(64px,10.5vw,184px); line-height: .94; letter-spacing: -.03em; color: var(--hp-navy); }
.hp-hw-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .22em; margin-bottom: -.16em; }
.hp-hw-mask--tango { padding: 0 .1em .22em; margin: 0 -.1em -.16em; }
.hp-hw { display: inline-block; }
.hp-tango { position: relative; display: inline-block; font-style: italic; }
.hp-tango-bar { position: absolute; left: -.04em; right: -.04em; top: .34em; bottom: .04em; background: var(--hp-lime); border-radius: 4px; transform-origin: left center; transform: scaleX(0); }
.hp-tango-t { position: relative; }
.hp-hsub { margin: clamp(28px,3vw,40px) 0 0; max-width: 46ch; font-size: clamp(18px,1.5vw,22px); line-height: 1.5; color: var(--hp-grey); text-wrap: pretty; }
.hp-belief { font-weight: 500; color: var(--hp-navy); }
.hp-ipill { display: inline-block; padding: 1px 12px; border-radius: 100px; font-weight: 600; }
.hp-ipill--data { background: var(--hp-lime); }
.hp-ipill--people { background: var(--hp-blue); color: #fff; }

/* ---- thesis ---- */
.hp-thesis { padding: clamp(110px,14vw,200px) clamp(20px,5vw,80px); background: var(--hp-navy); color: #fff; }
.hp-thesis-in { max-width: 1320px; margin: 0 auto; }
.hp-thesis-big { margin: 0; max-width: 20ch; font-family: var(--hp-serif); font-size: clamp(44px,6.2vw,108px); line-height: 1; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.hp-thesis-big [data-tw] { display: inline-block; opacity: .15; }
.hp-tmk { position: relative; display: inline-block; }
.hp-tmk-bar { position: absolute; left: -.08em; right: -.08em; top: .1em; bottom: -.04em; background: var(--hp-lime); border-radius: 8px; transform-origin: left center; transform: scaleX(0); }
.hp-tmk-t { position: relative; }
.hp-thesis-sub { margin: clamp(32px,4vw,56px) 0 0; max-width: 40ch; font-size: clamp(18px,1.5vw,22px); line-height: 1.5; color: rgba(255,255,255,.75); }

/* ---- measurement (desktop v2) ---- */
.hp-ms { position: relative; height: 340vh; background: #fff; border-top: .5px solid rgba(14,16,80,.1); font-family: 'Questrial', sans-serif; }
.hp-ms-inner { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: clamp(48px,6vw,96px) clamp(20px,5vw,80px); overflow: hidden; }
.hp-ms-grid { width: 100%; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,440px),1fr)); gap: clamp(48px,6vw,96px); align-items: center; }
.hp-ms-copy { max-width: 560px; }
.hp-ms-h2 { margin: 0; font-family: var(--hp-serif); font-weight: 400; font-size: clamp(48px,5.6vw,92px); line-height: .98; letter-spacing: -.03em; color: var(--hp-navy); display: flex; flex-wrap: wrap; column-gap: .22em; }
.hp-msw-mask { display: inline-block; overflow: hidden; padding-bottom: .08em; }
.hp-msw { display: inline-block; }
.hp-ms-mk { position: relative; white-space: nowrap; }
.hp-ms-mk-bar { position: absolute; left: -.04em; right: -.04em; top: .36em; bottom: .04em; background: var(--hp-lime); transform-origin: left center; transform: scaleX(0); }
.hp-ms-mk-t { position: relative; }
.hp-ms-body { margin: 32px 0 0; font-size: clamp(17px,1.4vw,21px); line-height: 1.4; color: #5e5e58; max-width: 460px; text-wrap: pretty; }
.hp-ms-diagram { position: relative; width: 100%; aspect-ratio: 700 / 470; }
.hp-ms-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.hp-ms-pill { position: absolute; left: 0; width: 27%; margin-top: -23px; height: 46px; padding: 0 18px; display: flex; align-items: center; border-radius: 100px; background: #f6f6f8; border: .5px solid rgba(14,16,80,.14); font-size: clamp(13px,1.1vw,16px); color: var(--hp-navy); white-space: nowrap; cursor: default; will-change: transform; }
.hp-ms-hubwrap { position: absolute; left: 61.43%; top: 53.19%; width: 17.7%; aspect-ratio: 1; transform: translate(-50%,-50%); }
.hp-ms-hub { position: absolute; inset: 0; }
.hp-ms-glow { position: absolute; inset: -45%; border-radius: 50%; background: radial-gradient(circle, rgba(217,238,13,.5), rgba(217,238,13,0) 62%); }
.hp-ms-ring { position: absolute; inset: -14%; border-radius: 50%; border: 1px dashed rgba(14,16,80,.3); }
.hp-ms-core { position: absolute; inset: 0; border-radius: 50%; background: var(--hp-lime); display: flex; align-items: center; justify-content: center; font-family: var(--hp-serif); font-size: clamp(20px,2vw,30px); letter-spacing: -.01em; color: var(--hp-navy); }
.hp-ms-board { position: absolute; right: 0; width: 16%; top: 53.19%; margin-top: -32px; height: 64px; border-radius: 16px; background: var(--hp-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: clamp(13px,1.1vw,16px); white-space: nowrap; }
.hp-ms-caps { position: absolute; left: 0; right: 0; bottom: -44px; height: 16px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(14,16,80,.55); }
.hp-ms-cap { white-space: nowrap; position: absolute; left: 0; top: 0; }
.hp-ms-track { position: absolute; right: 0; top: 7px; width: 120px; height: 1px; background: rgba(14,16,80,.12); }
.hp-ms-progress { height: 100%; background: var(--hp-navy); transform-origin: left center; transform: scaleX(0); }

/* ---- measurement (mobile flow) ---- */
.hp-msm { padding: 96px 20px; background: #fff; color: var(--hp-navy); }
.hp-msm-h2 { margin: 0; font-family: var(--hp-serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -.03em; color: var(--hp-navy); }
.hp-msm-mk { position: relative; display: inline-block; white-space: nowrap; }
.hp-msm-mk-bar { position: absolute; left: -.06em; right: -.06em; top: .36em; bottom: .04em; background: var(--hp-lime); transform-origin: left center; }
.hp-msm-mk-t { position: relative; }
.hp-msm-body { margin: 20px 0 0; font-size: 17px; line-height: 1.45; color: var(--hp-grey); }
.hp-msm-flow { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 40px; }
.hp-msm-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hp-msm-pill { padding: 10px 16px; border-radius: 100px; background: #f6f6f8; border: 1px solid rgba(14,16,80,.14); font-size: 15px; color: var(--hp-navy); white-space: nowrap; }
.hp-msm-arrow { font-size: 22px; color: rgba(14,16,80,.4); }
.hp-msm-hub { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: var(--hp-lime); font-family: var(--hp-serif); font-size: 24px; color: var(--hp-navy); box-shadow: 0 0 0 10px rgba(215,236,23,.25); }
.hp-msm-board { padding: 16px 28px; border-radius: 16px; background: var(--hp-navy); color: #fff; font-size: 16px; }

/* ---- principles ---- */
.hp-principles { padding: clamp(90px,11vw,160px) clamp(20px,5vw,80px); background: linear-gradient(180deg, var(--hp-navy) 0%, var(--hp-navy-deep) 100%); color: #fff; }
.hp-principles-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,420px),1fr)); gap: clamp(40px,6vw,96px); align-items: start; }
.hp-principles-h2 { margin: 0; max-width: 10ch; font-family: var(--hp-serif); font-weight: 400; font-size: clamp(38px,5.6vw,92px); line-height: .98; letter-spacing: -.03em; color: #fff; }
.hp-pmk { position: relative; display: inline-block; white-space: nowrap; }
.hp-pmk-bar { position: absolute; left: -.08em; right: -.08em; top: .1em; bottom: -.04em; background: var(--hp-lime); border-radius: 6px; transform-origin: left center; transform: scaleX(0); }
.hp-pmk-t { position: relative; color: var(--hp-navy); }
.hp-acc { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.18); }
.hp-acc-row { border-bottom: 1px solid rgba(255,255,255,.18); }
.hp-acc-head { display: flex; align-items: center; gap: 20px; width: 100%; padding: clamp(20px,2vw,28px) 0; border: 0; background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.hp-acc-n { font-family: var(--hp-serif); font-size: 20px; color: rgba(255,255,255,.5); transition: color .3s; }
.hp-acc-k { flex: 1; font-family: var(--hp-serif); font-size: clamp(26px,2.4vw,38px); line-height: 1.05; letter-spacing: -.01em; }
.hp-acc-ic { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 20px; transition: background .3s, color .3s; }
.hp-acc-row.is-open .hp-acc-n { color: var(--hp-lime); }
.hp-acc-row.is-open .hp-acc-ic { background: var(--hp-lime); color: var(--hp-navy); }
.hp-acc-body { overflow: hidden; max-height: 0; opacity: 0; padding: 0 56px 0 40px; transition: max-height .45s ease, opacity .3s ease, padding .45s ease; }
.hp-acc-body p { margin: 0; max-width: 58ch; font-size: clamp(16px,1.25vw,19px); line-height: 1.55; color: rgba(255,255,255,.78); }
.hp-acc-row.is-open .hp-acc-body { max-height: 340px; opacity: 1; padding: 0 56px clamp(22px,2.4vw,30px) 40px; }

/* ---- effectiveness partners ---- */
.hp-partners { padding: clamp(90px,11vw,160px) clamp(20px,5vw,80px); background: var(--hp-off); color: var(--hp-navy); }
.hp-partners-in { max-width: 1320px; margin: 0 auto; }
.hp-partners-h2 { margin: 0; font-family: var(--hp-serif); font-weight: 400; font-size: clamp(38px,5.6vw,92px); line-height: .98; letter-spacing: -.03em; color: var(--hp-navy); }
.hp-pmk--light .hp-pmk-t { color: var(--hp-navy); }
.hp-part-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,250px),1fr)); gap: 12px; margin-top: clamp(48px,6vw,80px); }
.hp-pcard { display: flex; flex-direction: column; gap: 12px; min-height: clamp(250px,22vw,300px); padding: clamp(24px,2.2vw,30px); border-radius: 22px; background: #fff; color: var(--hp-navy); }
.hp-pcard--tango { background: var(--hp-navy); color: #fff; }
.hp-pcard-role { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(14,16,80,.5); }
.hp-pcard--tango .hp-pcard-role { color: var(--hp-lime); }
.hp-pcard-k { margin: 0; font-family: var(--hp-serif); font-weight: 400; font-size: clamp(28px,2.4vw,36px); line-height: 1.02; letter-spacing: -.015em; }
.hp-pcard-checks { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 20px; }
.hp-pcheck { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(14,16,80,.45); }
.hp-pcard--tango .hp-pcheck { color: #fff; }
.hp-pcheck-m { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(14,16,80,.2); background: transparent; color: var(--hp-navy); font-size: 11px; font-weight: 700; line-height: 1; }
.hp-pcheck-m--on { border: 0; background: var(--hp-lime); }
.hp-part-mob { margin-top: 0; }
.hp-part-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 32px -20px 0; padding: 4px 20px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hp-part-track::-webkit-scrollbar { display: none; }
.hp-mcard { flex: 0 0 84%; scroll-snap-align: center; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; min-height: 340px; padding: 26px; border-radius: 24px; background: #fff; color: var(--hp-navy); }
.hp-mcard--tango { background: var(--hp-navy); color: #fff; }
.hp-mcard-top { display: flex; flex-direction: column; gap: 10px; }
.hp-mcard-role { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(14,16,80,.5); }
.hp-mcard--tango .hp-mcard-role { color: var(--hp-lime); }
.hp-mcard-k { font-family: var(--hp-serif); font-size: 36px; line-height: 1; letter-spacing: -.02em; }
.hp-mcard-checks { display: flex; flex-direction: column; gap: 14px; }
.hp-mcheck { display: flex; align-items: center; gap: 12px; font-size: 18px; color: rgba(14,16,80,.45); }
.hp-mcard--tango .hp-mcheck { color: #fff; }
.hp-mcheck-m { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: transparent; border: 1.5px solid rgba(14,16,80,.2); color: var(--hp-navy); font-size: 14px; font-weight: 700; }
.hp-mcheck-m--on { background: var(--hp-lime); border: 0; }
.hp-part-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.hp-part-dots { display: flex; gap: 6px; }
.hp-part-dots span { display: block; height: 8px; width: 8px; border-radius: 100px; background: rgba(14,16,80,.2); transition: width .3s, background .3s; }
.hp-part-dots span.is-on { width: 26px; background: var(--hp-navy); }
.hp-part-swipe { font-size: 14px; color: var(--hp-grey); }

/* ---- purpose ---- */
.hp-purpose { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(90px,12vw,170px) clamp(20px,5vw,80px); background: #fff; color: var(--hp-navy); }
.hp-purpose-in { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(24px,3vw,36px); }
.hp-purpose-chip { display: inline-block; padding: 6px 16px; border-radius: 100px; background: rgba(14,16,80,.06); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hp-navy); }
.hp-purpose-stmt { margin: 0; max-width: 22ch; font-family: var(--hp-serif); font-weight: 400; font-size: clamp(40px,4.8vw,78px); line-height: 1.04; letter-spacing: -.02em; color: var(--hp-navy); text-wrap: balance; }
.hp-purpose-stmt [data-pw] { display: inline-block; opacity: .15; }
.hp-pumk { position: relative; display: inline-block; white-space: nowrap; }
.hp-pumk-bar { position: absolute; left: -.06em; right: -.06em; top: .12em; bottom: -.02em; background: var(--hp-lime); border-radius: 6px; transform-origin: left center; transform: scaleX(0); }
.hp-pumk-t { position: relative; color: var(--hp-navy); }

/* ---- fork ---- */
.hp-fork { padding: clamp(70px,9vw,120px) clamp(20px,5vw,80px) clamp(110px,13vw,190px); background: #fff; color: var(--hp-navy); }
.hp-fork-in { max-width: 1320px; margin: 0 auto; }
.hp-fork-h { margin: 0 0 clamp(24px,3vw,36px); font-family: var(--hp-serif); font-weight: 400; font-size: clamp(30px,3vw,46px); line-height: 1; letter-spacing: -.02em; color: var(--hp-navy); }
.hp-fork-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,380px),1fr)); gap: 14px; }
.hp-forkcard { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 56px; min-height: clamp(260px,24vw,320px); padding: clamp(26px,2.8vw,40px); border-radius: 28px; overflow: hidden; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.hp-forkcard:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(14,16,80,.4); }
.hp-forkcard--lime { background: var(--hp-lime); color: var(--hp-navy); }
.hp-forkcard--blue { background: var(--hp-blue); color: #fff; }
.hp-fork-tag { align-self: flex-start; padding: 6px 14px; border-radius: 100px; font-size: 13px; font-weight: 600; }
.hp-forkcard--lime .hp-fork-tag { background: var(--hp-navy); color: #fff; }
.hp-forkcard--blue .hp-fork-tag { background: #fff; color: var(--hp-navy); }
.hp-fork-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.hp-fork-txt { display: flex; flex-direction: column; gap: 12px; }
.hp-fork-k { font-family: var(--hp-serif); font-size: clamp(44px,4.4vw,72px); line-height: .95; letter-spacing: -.025em; }
.hp-fork-d { max-width: 30ch; font-size: clamp(16px,1.3vw,19px); line-height: 1.4; opacity: .85; }
.hp-fork-arrow { flex: 0 0 auto; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-size: 24px; }
.hp-forkcard--lime .hp-fork-arrow { background: var(--hp-navy); color: var(--hp-lime); }
.hp-forkcard--blue .hp-fork-arrow { background: #fff; color: var(--hp-navy); }

/* ---- founder ---- */
.hp-founder { position: relative; overflow: hidden; padding: clamp(90px,11vw,160px) clamp(20px,5vw,80px); background: linear-gradient(180deg, var(--hp-navy) 0%, var(--hp-navy-deep) 100%); color: #fff; }
.hp-founder-grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 56px 56px; }
.hp-founder-grid { position: relative; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,400px),1fr)); gap: clamp(48px,7vw,112px); align-items: center; }
.hp-founder-copy { display: flex; flex-direction: column; gap: 22px; }
.hp-founder-hi { margin: 0 0 8px; max-width: 13ch; font-family: var(--hp-serif); font-weight: 400; font-size: clamp(38px,5.4vw,84px); line-height: .98; letter-spacing: -.028em; color: #fff; text-wrap: balance; }
.hp-fmk { position: relative; display: inline-block; white-space: nowrap; }
.hp-fmk-bar { position: absolute; left: -.08em; right: -.08em; top: .1em; bottom: -.04em; background: var(--hp-lime); border-radius: 6px; transform-origin: left center; transform: scaleX(0); }
.hp-fmk-t { position: relative; color: var(--hp-navy); }
.hp-founder-say { margin: 0; max-width: 46ch; font-size: clamp(17px,1.35vw,20px); line-height: 1.6; color: rgba(255,255,255,.88); text-wrap: pretty; }
.hp-founder-cta { align-self: flex-start; display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 8px 8px 8px 26px; border-radius: 100px; background: var(--hp-lime); font-size: 16px; font-weight: 600; color: var(--hp-navy); box-shadow: 0 14px 40px -12px rgba(215,236,23,.55); transition: transform .3s, box-shadow .3s; }
.hp-founder-cta:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 20px 50px -12px rgba(215,236,23,.8); }
.hp-founder-cta-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--hp-navy); color: var(--hp-lime); font-size: 18px; }
.hp-founder-photo { position: relative; justify-self: center; width: 100%; max-width: 480px; }
.hp-founder-frame { position: relative; height: 0; padding-bottom: 120%; }
.hp-founder-offset { position: absolute; inset: 0; transform: translate(18px,18px); border-radius: 28px; border: 2px solid var(--hp-lime); }
.hp-founder-img { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: var(--hp-lav); }
.hp-founder-img img { position: absolute; left: 0; top: -30px; width: 100%; height: calc(100% + 60px); object-fit: cover; display: block; }
.hp-founder-cap { display: flex; align-items: baseline; gap: 12px; margin-top: 30px; }
.hp-founder-name { font-family: var(--hp-serif); font-size: 28px; color: #fff; white-space: nowrap; }
.hp-founder-caret { display: inline-block; width: 2px; height: .9em; margin-left: 3px; vertical-align: -.08em; background: var(--hp-lime); opacity: 0; }
.hp-founder-pill { padding: 4px 12px; border-radius: 100px; background: var(--hp-lime); font-size: 13px; font-weight: 500; color: var(--hp-navy); }

/* ---- approach ---- */
.hp-approach { position: relative; overflow: hidden; padding: clamp(110px,13vw,190px) clamp(20px,5vw,80px); background: #fff; color: var(--hp-navy); text-align: center; }
.hp-approach-grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(14,16,80,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(14,16,80,.06) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(130% 92% at 50% 50%, #000 42%, transparent 86%); mask-image: radial-gradient(130% 92% at 50% 50%, #000 42%, transparent 86%); }
.hp-approach-in { position: relative; max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hp-approach-stmt { margin: 0; max-width: 26ch; font-family: var(--hp-serif); font-size: clamp(40px,4.6vw,70px); line-height: 1.02; text-align: center; letter-spacing: -.02em; color: var(--hp-navy); text-wrap: pretty; }
.hp-approach-stmt [data-aw] { display: inline-block; opacity: .15; }
.hp-ahl { padding: 0 .1em; border-radius: 6px; background-repeat: no-repeat; background-size: 100% 100%; color: var(--hp-navy); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hp-ahl--lime { background-image: linear-gradient(180deg, transparent 30%, var(--hp-lime) 30%, var(--hp-lime) 96%, transparent 96%); }
.hp-ahl--blue { background-image: linear-gradient(180deg, transparent 30%, rgba(82,99,240,.55) 30%, rgba(82,99,240,.55) 96%, transparent 96%); }
.hp-ahl--pink { background-image: linear-gradient(180deg, transparent 30%, var(--hp-pink) 30%, var(--hp-pink) 96%, transparent 96%); }
.hp-ahl--it { font-style: italic; }
.hp-cta { display: flex; gap: 18px; align-items: center; margin-top: clamp(44px,5vw,72px); padding: 10px 10px 10px clamp(28px,2.6vw,36px); border: 0; border-radius: 100px; background: var(--hp-navy); color: #fff; font: inherit; font-size: clamp(18px,1.5vw,21px); font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .3s; }
.hp-cta:hover { background: #1a1d6b; }
.hp-cta-arrow { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--hp-lime); color: var(--hp-navy); font-size: 22px; }

/* ---- footer ---- */
.hp-footer { background: var(--hp-footbg); padding: clamp(60px,8vw,100px) clamp(20px,5vw,80px) 40px; color: var(--hp-navy); }
.hp-footer-in { max-width: 1320px; margin: 0 auto; }
.hp-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,180px),1fr)); gap: clamp(32px,4vw,56px); }
.hp-foot-news { display: flex; flex-direction: column; gap: 20px; }
.hp-foot-news-t { margin: 0; max-width: 20ch; font-family: var(--hp-serif); font-size: clamp(22px,2vw,28px); line-height: 1.2; color: var(--hp-navy); }
.hp-foot-news-a { align-self: flex-start; font-weight: 500; color: var(--hp-navy); border-bottom: 2px solid var(--hp-lime); padding-bottom: 3px; }
.hp-foot-col { display: flex; flex-direction: column; gap: 12px; }
.hp-foot-h { font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: rgba(14,16,80,.5); }
.hp-foot-col a { font-size: 15px; color: var(--hp-grey); }
.hp-foot-base { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: clamp(48px,7vw,80px); padding-top: 24px; border-top: 1px solid rgba(14,16,80,.12); }
.hp-foot-logo { height: 24px; width: auto; display: block; }
.hp-foot-city { font-size: 13px; color: rgba(14,16,80,.55); }

/* ---- mobile sticky bar ---- */
.hp-bar { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 100px; background: var(--hp-navy); box-shadow: 0 20px 50px -16px rgba(14,16,80,.55); transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .3s; }
.hp-bar.is-vis { transform: translateY(0); opacity: 1; pointer-events: auto; }
.hp-bar-t { font-size: 15px; color: #fff; white-space: nowrap; }
.hp-bar-cta { min-height: 44px; padding: 12px 20px; border: 0; border-radius: 100px; background: var(--hp-lime); color: var(--hp-navy); font: inherit; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; }

/* ---- contact modal ---- */
.hp-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(14,16,80,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hp-modal[hidden] { display: none; }
.hp-modal-card { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow: auto; padding: clamp(28px,3vw,40px); border-radius: 28px; background: #fff; color: var(--hp-navy); box-shadow: 0 40px 100px -30px rgba(14,16,80,.5); }
.hp-modal-x { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--hp-off); color: var(--hp-navy); font-size: 20px; cursor: pointer; }
.hp-form { display: flex; flex-direction: column; gap: 14px; }
.hp-form[hidden], .hp-form-done[hidden] { display: none; }
.hp-form-h { margin: 0 40px 6px 0; font-family: var(--hp-serif); font-weight: 400; font-size: clamp(32px,3vw,44px); line-height: 1; letter-spacing: -.02em; color: var(--hp-navy); }
.hp-form-p { margin: 0 0 8px; font-size: 16px; line-height: 1.45; color: var(--hp-grey); }
.hp-form input, .hp-form textarea { padding: 15px 18px; border: 1px solid rgba(14,16,80,.18); border-radius: 14px; font: inherit; font-size: 16px; color: var(--hp-navy); background: #fff; }
.hp-form textarea { resize: vertical; }
.hp-form-send { margin-top: 6px; display: flex; justify-content: center; gap: 10px; padding: 18px 28px; border: 0; border-radius: 100px; background: var(--hp-navy); color: #fff; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.hp-form-done { display: flex; flex-direction: column; gap: 14px; padding: 20px 0; }
.hp-form-sent { align-self: flex-start; padding: 6px 14px; border-radius: 100px; background: var(--hp-lime); font-size: 14px; font-weight: 500; color: var(--hp-navy); }

/* ---- responsive toggles ---- */
@media (max-width: 759px) {
  .hp-desk-only { display: none !important; }
  .hp-mob-only { display: block; }
  .hp-nav-links { display: none; }
  .hp-menu-btn { display: flex; }
  .hp-nav-logo img { height: 22px; }
  .hp-approach { text-align: left; }
  .hp-approach-in { align-items: flex-start; }
  .hp-approach-stmt { text-align: left; font-size: clamp(32px,8vw,46px); }
  .hp-purpose { min-height: 0; }
}
@media (min-width: 760px) {
  .hp-bar { display: none; }
}

/* ---- reduced motion: show final states ---- */
@media (prefers-reduced-motion: reduce) {
  html.tl-intro { background: #fff; overflow: auto; }
  .hp-loader { display: none !important; }
  .hp-hero-in, html.tl-intro .hp-hero-in { opacity: 1 !important; }
  html.tl-intro .hp-nav-logo img { opacity: 1; }
  .hp-hero-field { opacity: 1; }
  [data-tw], [data-aw], [data-pw], [data-hsub] { opacity: 1 !important; }
  [data-tango], [data-tmark], [data-marker], [data-msmarker], [data-pmark], [data-pumk] .hp-pumk-bar { transform: scaleX(1) !important; }
  .hp-tango-bar, .hp-pumk-bar { transform: scaleX(1) !important; }
  .hp-ahl { background-size: 100% 100% !important; }
  [data-tword] { color: var(--hp-navy) !important; }
}


/* ============================================================
   Who we work with (.ww-*) — fork page, built to the handoff
   ============================================================ */
.ww { font-family: 'Instrument Sans', system-ui, sans-serif; color: #fff; background: var(--hp-navy); overflow-x: clip; }

/* hero */
.ww-hero { position: relative; background: var(--hp-navy); padding: clamp(56px,8vw,120px) clamp(20px,5vw,80px) clamp(80px,10vw,140px); }
.ww-hero-in { max-width: 1320px; margin: 0 auto; }
.ww-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: clamp(28px,3.5vw,48px); }
.ww-crumb a { color: rgba(255,255,255,.6); text-decoration: none; }
.ww-crumb a:hover { color: var(--hp-lime); }
.ww-crumb .cur { color: #fff; }
.ww-h1 { margin: 0; max-width: 14ch; font-family: var(--hp-serif); font-weight: 400; font-size: clamp(42px,7.2vw,124px); line-height: .96; letter-spacing: -.033em; color: #fff; }
.ww-wmask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.ww-wmask--hi { padding: 0 .1em .06em; margin: 0 -.1em; }
.ww-w { display: inline-block; }
.ww-wmask--hi .ww-w { position: relative; }
.ww-h1 .ww-mt { position: relative; color: var(--hp-navy); }
.ww-mark { position: absolute; left: -.08em; right: -.08em; top: .12em; bottom: -.02em; background: var(--hp-lime); border-radius: 8px; transform-origin: left center; }
.ww-sub { margin: clamp(28px,3vw,40px) 0 0; max-width: 46ch; font-size: clamp(18px,1.5vw,22px); line-height: 1.5; color: rgba(255,255,255,.8); text-wrap: pretty; }

/* routes */
.ww-routes { background: var(--hp-off); color: var(--hp-navy); padding: clamp(90px,11vw,160px) clamp(20px,5vw,80px) clamp(100px,12vw,180px); }
.ww-routes-in { max-width: 1320px; margin: 0 auto; }
.ww-rhead { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr)); gap: clamp(20px,5vw,80px); align-items: end; }
.ww-h2 { margin: 0; max-width: 13ch; font-family: var(--hp-serif); font-weight: 400; font-size: clamp(38px,5.6vw,92px); line-height: .98; letter-spacing: -.03em; color: var(--hp-navy); }
.ww-rhead-p { margin: 0; max-width: 48ch; font-size: clamp(17px,1.35vw,20px); line-height: 1.55; color: var(--hp-grey); text-wrap: pretty; }
.ww-hl { position: relative; display: inline-block; white-space: nowrap; }
.ww-hl-bar { position: absolute; left: -.08em; right: -.08em; top: .1em; bottom: -.04em; background: var(--hp-lime); border-radius: 6px; transform-origin: left center; }
.ww-hl-t { position: relative; }

.ww-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 14px; margin-top: clamp(48px,6vw,88px); }
.ww-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; min-height: clamp(340px,32vw,440px); padding: clamp(24px,3vw,44px); border-radius: 28px; overflow: hidden; text-decoration: none; transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease; }
.ww-card:hover { transform: translateY(-8px); box-shadow: 0 36px 80px -30px rgba(0,0,0,.6); }
.ww-card-tag { align-self: flex-start; padding: 12px 24px 13px; border-radius: 100px; font-size: clamp(18px,1.6vw,22px); font-weight: 600; letter-spacing: -.005em; }
.ww-card-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.ww-card-copy { display: flex; flex-direction: column; gap: 14px; }
.ww-card-k { margin: 0; font-family: var(--hp-serif); font-weight: 400; font-size: clamp(40px,4.6vw,76px); line-height: .95; letter-spacing: -.025em; }
.ww-card-d { margin: 0; max-width: 32ch; font-size: clamp(16px,1.3vw,19px); line-height: 1.45; opacity: .88; }
.ww-card-go { flex: 0 0 auto; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-size: 24px; }
.ww-card--mkt { background: var(--hp-lime); color: var(--hp-navy); }
.ww-card--mkt .ww-card-tag { background: var(--hp-navy); color: #fff; }
.ww-card--mkt .ww-card-go { background: var(--hp-navy); color: var(--hp-lime); }
.ww-card--agc { background: var(--hp-blue); color: #fff; }
.ww-card--agc .ww-card-tag { background: #fff; color: var(--hp-navy); }
.ww-card--agc .ww-card-go { background: #fff; color: var(--hp-navy); }

.ww-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: clamp(56px,7vw,96px); padding-top: clamp(32px,4vw,48px); border-top: 1px solid rgba(14,16,80,.14); }
.ww-close-p { margin: 0; font-family: var(--hp-serif); font-size: clamp(28px,3vw,44px); line-height: 1.05; letter-spacing: -.015em; color: var(--hp-navy); }
.ww-close-cta { display: flex; gap: 14px; align-items: center; justify-content: space-between; min-height: 60px; padding: 8px 8px 8px 26px; border: 0; border-radius: 100px; background: var(--hp-navy); color: #fff; font: inherit; font-size: 17px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .3s ease; }
.ww-close-cta:hover { background: #1a1d6b; }
.ww-close-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hp-lime); color: var(--hp-navy); font-size: 18px; }

/* mobile sticky bar */
.ww-bar { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 55; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 100px; background: var(--hp-lime); box-shadow: 0 20px 50px -16px rgba(14,16,80,.55); transform: translateY(160%); transition: transform .4s cubic-bezier(.22,1,.36,1); }
.ww-bar.is-vis { transform: translateY(0); }
.ww-bar-note { font-size: 15px; font-weight: 500; color: var(--hp-navy); white-space: nowrap; }
.ww-bar-btn { padding: 14px 20px; border: 0; border-radius: 100px; background: var(--hp-navy); color: #fff; font: inherit; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; }
@media (min-width: 760px) { .ww-bar { display: none; } }

/* contact modal */
.ww-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(14,16,80,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ww-modal[hidden] { display: none; }
.ww-card-form { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow: auto; padding: clamp(28px,3vw,40px); border-radius: 28px; background: #fff; color: var(--hp-navy); box-shadow: 0 40px 100px -30px rgba(14,16,80,.5); }
.ww-close-x { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--hp-off); color: var(--hp-navy); font-size: 20px; cursor: pointer; }
.ww-form { display: flex; flex-direction: column; gap: 14px; }
.ww-form h3 { margin: 0 40px 6px 0; font-family: var(--hp-serif); font-weight: 400; font-size: clamp(32px,3vw,44px); line-height: 1; letter-spacing: -.02em; color: var(--hp-navy); }
.ww-form-sub { margin: 0 0 8px; font-size: 16px; line-height: 1.45; color: var(--hp-grey); }
.ww-input, .ww-textarea { padding: 15px 18px; border: 1px solid rgba(14,16,80,.18); border-radius: 14px; font: inherit; font-size: 16px; color: var(--hp-navy); background: #fff; }
.ww-textarea { resize: vertical; }
.ww-send { margin-top: 6px; display: flex; justify-content: center; gap: 10px; padding: 18px 28px; border: 0; border-radius: 100px; background: var(--hp-navy); color: #fff; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.ww-sent { display: none; flex-direction: column; gap: 14px; padding: 20px 0; }
.ww-card-form.is-sent .ww-form { display: none; }
.ww-card-form.is-sent .ww-sent { display: flex; }
.ww-sent-pill { align-self: flex-start; padding: 6px 14px; border-radius: 100px; background: var(--hp-lime); font-size: 14px; font-weight: 500; color: var(--hp-navy); }
.ww-sent h3 { margin: 0; font-family: var(--hp-serif); font-weight: 400; font-size: clamp(32px,3vw,44px); line-height: 1.05; letter-spacing: -.02em; color: var(--hp-navy); }
.ww-sent p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--hp-grey); }
.ww-sent a { color: var(--hp-blue); }

@media (max-width: 759px) {
  .ww-card { min-height: 300px; gap: 40px; }
  .ww-close-cta { width: 100%; }
}