/* ==========================================================================
   ToplineX - site styles
   White pages alternating with ink-black bands. Inter Tight for headlines,
   Geist for everything else. The brand blue is held back for accents: the
   eyebrow dots, key figures, the active pillar, play buttons, the logo.
   ========================================================================== */

/* ---------- 1. FONTS (self-hosted) ---------- */
@font-face{font-family:"Inter Tight";src:url("assets/fonts/InterTight-var.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Geist";src:url("assets/fonts/geist-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url("assets/fonts/geist-500.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Geist";src:url("assets/fonts/geist-600.ttf") format("truetype");font-weight:600;font-display:swap}

/* ---------- 2. TOKENS ---------- */
:root{
  --bg:#ffffff;
  --tint:#f5f7fa;
  --ink:#0b0c0e;
  --ink-2:#2a2f37;
  --ink-3:#5b6472;
  --ink-4:#8a919c;
  --line:#e6e9ee;
  --line-2:#d9dee5;

  --band:#0b0c0e;
  --band-2:#16181c;
  --band-line:#2a2d33;
  --on-band:#f2f4f7;
  --on-band-2:#a2a9b3;

  --blue:#1d84fb;
  --blue-ink:#0f6fe0;
  --blue-soft:#7db7ff;     /* blue on black */
  --blue-tint:rgba(29,132,251,.09);
  --green:#16a34a;
  --red:#dc4c4c;
  --amber:#c58a12;

  --display:"Inter Tight","Geist",-apple-system,sans-serif;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --radius:8px;
  --radius-lg:14px;
  --maxw:1200px;
  --gutter:32px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 3. BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:88px}
body{font-family:var(--sans);font-size:17px;line-height:1.65;letter-spacing:-.015em;color:var(--ink-2);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit}
::selection{background:var(--ink);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

.js-rev .rev{opacity:0;transform:translateY(16px)}
.js-rev .rev.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ---------- 4. LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:880px}
.section{padding:clamp(5rem,8vw,7.5rem) 0}
.section--tight{padding-top:clamp(1.5rem,3vw,2.5rem)}
/* White straight after white: no rule and a smaller gap, so it reads as one
   flow. The full gap stays where a black band meets white. */
.section:not(.band) + .section:not(.band){padding-top:clamp(1rem,2vw,1.5rem)}
.band{background:var(--band);color:var(--on-band)}
.center{text-align:center}
.nw{white-space:nowrap}

/* ---------- 5. TYPE ---------- */
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.035em;color:var(--ink)}
h1{font-size:clamp(2.5rem,4.7vw,4rem);line-height:1.05;text-wrap:balance}
h2{font-size:clamp(2rem,3.6vw,3.05rem);line-height:1.08;text-wrap:balance}
h3{font-size:clamp(1.2rem,1.55vw,1.4rem);line-height:1.2;letter-spacing:-.025em}
.band h1,.band h2,.band h3{color:#fff}

/* The one highlighted phrase in a headline: blue, not italic (a sans has no
   italic worth showing at this size). */
em.accent{font-style:normal;color:var(--blue-ink)}
.band em.accent{color:var(--blue-soft)}

.lede{font-size:clamp(1.05rem,1.3vw,1.15rem);color:var(--ink-3);max-width:62ch;line-height:1.65}
.center .lede{margin-left:auto;margin-right:auto}
.band .lede{color:var(--on-band-2)}

.eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:18px;
  font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}
.band .eyebrow{color:var(--on-band)}

.shead{margin-bottom:clamp(2.75rem,5vw,4rem)}
.shead h2{max-width:30ch}
.shead.center h2{margin-left:auto;margin-right:auto}
.shead .lede{margin-top:1.1rem}

/* ---------- 6. BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-size:.95rem;font-weight:600;
  letter-spacing:-.01em;padding:14px 26px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{background:#000}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink)}
.band .btn--primary,.cta .btn--primary{background:#fff;color:var(--ink)}
.band .btn--primary:hover,.cta .btn--primary:hover{background:#eef1f5}
.btn .arw{transition:transform .2s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.center .btn-row{justify-content:center}
.cta-row{margin-top:clamp(2.5rem,4vw,3.5rem);display:flex;justify-content:center}

/* ---------- 7. NAV ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
.nav__brand{display:flex;align-items:center;padding:.5rem 0}
.nav__brand img{height:30px;width:auto}
.nav__links{display:flex;align-items:center;gap:34px}
.nav__links a:not(.nav__cta){font-size:.95rem;font-weight:500;color:var(--ink);padding:.45rem 0;position:relative}
.nav__links a:not(.nav__cta)::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav__links a:not(.nav__cta):hover::after{transform:scaleX(1)}
.nav__cta{padding:11px 20px;font-size:.9rem}
.nav__burger{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--ink)}

/* ---------- 8. HERO ---------- */
.hero{padding:clamp(76px,9vw,120px) 0 clamp(56px,6vw,76px);text-align:center;position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 10%,transparent 70%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 10%,transparent 70%);opacity:.7}
.hero__kicker{display:inline-flex;align-items:center;gap:.9rem;margin-bottom:28px;font-size:.88rem;font-weight:500;color:var(--ink-2);
  padding:7px 16px;border:1px solid var(--line-2);border-radius:999px;background:#fff}
.hero__kicker span{color:var(--line-2)}
.hero__kicker i{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--blue-tint)}
.hero h1{max-width:30ch;margin:0 auto}
.hero .lede{margin:24px auto 0;max-width:54ch}
.hero .btn-row{margin-top:34px;justify-content:center}

.proof{margin:clamp(40px,5vw,52px) auto 0;max-width:78ch}
.stars{display:flex;justify-content:center;gap:3px;color:var(--blue);margin-bottom:10px}
.proof blockquote{font-size:1rem;color:var(--ink-3)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);max-width:920px;margin:clamp(36px,4vw,48px) auto 0;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff}
.stat{padding:26px 16px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat__fig{font-family:var(--display);font-weight:600;font-size:clamp(2rem,3.2vw,2.7rem);line-height:1;color:var(--ink);letter-spacing:-.04em}
.stat__lab{margin-top:10px;font-size:.92rem;color:var(--ink-3)}

.logos{display:flex;align-items:center;gap:clamp(24px,4vw,48px);margin-top:clamp(40px,4vw,56px)}
.logos__label{flex:none;max-width:12ch;text-align:left;font-size:.9rem;line-height:1.4;color:var(--ink-3)}
.marquee{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;align-items:center;gap:56px;width:max-content;animation:drift 48s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee img{height:30px;width:auto;opacity:.6;filter:grayscale(1) brightness(.6);transition:opacity .2s var(--ease)}
.marquee img:hover{opacity:1}
.marquee img.tall{height:40px}
@keyframes drift{to{transform:translateX(-50%)}}

/* ---------- 9. WHO WE HELP: three columns divided by hairlines ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.trio__item{position:relative;padding:2.4rem 2.4rem .4rem}
.trio__item:first-child{padding-left:0}
.trio__item:last-child{padding-right:0}
.trio__item + .trio__item{border-left:1px solid var(--line)}
.trio__icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--blue-tint);color:var(--blue-ink);margin-bottom:1.5rem}
.trio__num{position:absolute;top:2.4rem;right:2.4rem;font-size:.78rem;font-weight:600;color:var(--ink-4)}
.trio__item:last-child .trio__num{right:0}
.trio h3{margin-bottom:.7rem}
.trio p{color:var(--ink-3);font-size:.98rem}

/* ---------- 10. WHAT WE DO ----------
   Six rows on the black band, one per pillar: the text on the left, its own
   graphic on the right. Lines run across both columns between rows (no line
   down the middle), so each row reads as one band.
   On desktop only the row in the middle of the screen is lit (app.js).
   Phones: the graphic sits under its pillar in a bordered card. */
.wwd{border-top:1px solid var(--band-line);border-bottom:1px solid var(--band-line)}
.wtab{position:relative;padding:2.2rem 0 2.2rem 3.4rem;border-bottom:1px solid var(--band-line)}
.wtab:last-child{border-bottom:0}
.wtab__head{display:block}
.wtab__num{position:absolute;left:0;top:2.2rem;font-family:var(--display);font-weight:600;font-size:1.9rem;line-height:1;
  letter-spacing:-.04em;color:var(--blue-soft)}
.wtab__title{font-size:clamp(1.45rem,2vw,1.75rem);line-height:1.15}
.wtab__name{font-family:var(--display);font-weight:600;letter-spacing:-.03em;color:#fff}
.wtab__inner > p{color:var(--on-band-2);font-size:1.02rem;line-height:1.7;max-width:52ch;margin-top:.9rem}
.wtab__inner ul{display:grid;gap:.6rem;margin-top:1.2rem}
.wtab__inner li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:.97rem;color:var(--on-band)}
.wtab__inner li svg{margin-top:6px;color:var(--blue-soft)}

/* the graphics: drawn straight onto the black */
.wtab__vis{--s-bg:#16181c;--s-card:#202329;--s-line:#2c3036;--s-ink:#f2f4f7;--s-mute:#8a919c;
  margin:1.6rem 0 0 -3.4rem;padding:20px;border:1px solid var(--band-line);border-radius:var(--radius-lg);color:var(--s-ink)}

@media (min-width:1025px){
  .wtab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr auto auto 1fr;
    min-height:330px;padding:2.6rem 0}
  .wtab__title{grid-column:1;grid-row:2;position:relative;padding:0 3.5rem 0 4.6rem}
  .wtab__num{top:-.12em;font-size:2.3rem}
  .wtab__body{grid-column:1;grid-row:3;padding:0 3.5rem 0 4.6rem}
  .wtab__vis{grid-column:2;grid-row:1 / 5;display:flex;align-items:center;margin:0;padding:0 0 0 3.5rem;border:0;border-radius:0}

  /* one focus point: the lit row's text and graphic; everything else recedes */
  .js-wwd .wtab__title,.js-wwd .wtab__body{opacity:.3;transition:opacity .5s var(--ease)}
  .js-wwd .wtab__vis{opacity:.07;transform:scale(.97);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .js-wwd .wtab.is-on .wtab__title,.js-wwd .wtab.is-on .wtab__body,.js-wwd .wtab.is-on .wtab__vis{opacity:1;transform:none}
}

.pv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.pv.is-on{opacity:1;visibility:visible}
.wtab__vis .pv{position:relative;opacity:1;visibility:visible;width:100%;height:auto}
.wtab__vis .signals{height:240px}

.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:9px;background:var(--s-bg);border:1px solid var(--s-line);
  font-size:.8rem;font-weight:500;color:var(--s-ink);white-space:nowrap}
.chip img{width:18px;height:18px;border-radius:4px;background:#fff;padding:1px}
.chip--out{border-color:var(--blue);color:var(--blue-soft);background:rgba(29,132,251,.12);font-weight:600}
.card-row{background:var(--s-bg);border:1px solid var(--s-line);border-radius:10px;padding:10px 12px}
.card-row b{display:block;font-size:.84rem;line-height:1.35;color:var(--s-ink);font-weight:600}
.card-row small{display:block;font-size:.72rem;line-height:1.35;color:var(--s-mute)}

/* Converging flows. Rows are equal-height grid tracks with no gap, so row
   centres sit at exactly 1/6, 3/6 and 5/6 of the height: the SVG paths start
   from those points and meet at 3/6, where the outcome chip is centred. */
.flow{display:grid;grid-template-columns:minmax(0,1fr) 48px 160px;align-items:stretch;width:100%;height:216px}
.flow__rows{display:grid;grid-template-rows:repeat(3,1fr)}
.flow__rows > *{align-self:center;margin:0}
.flow svg{width:100%;height:100%;overflow:visible}
.flow .chip--out{align-self:center;justify-content:center}
.flow > svg path,.hub > svg path{fill:none;stroke:var(--blue);stroke-width:1.5;stroke-dasharray:5 6;vector-effect:non-scaling-stroke;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-22}}

/* 01 offer angles */
.angles{display:grid;gap:10px;width:100%}
.ang{display:grid;grid-template-columns:140px minmax(0,1fr) 92px;gap:14px;align-items:center}
.ang__bar{height:10px;border-radius:99px;background:var(--s-card);border:1px solid var(--s-line);overflow:hidden}
.ang__bar i{display:block;height:100%;width:0;background:#4a505a;border-radius:99px;transition:width 1.4s var(--ease)}
.ang--win .ang__bar i{background:var(--blue)}
.is-on .ang__bar i{width:var(--w)}
.ang em{font-style:normal;font-size:.78rem;color:var(--s-mute);text-align:right}
.ang--win em{color:var(--blue-soft);font-weight:600}
.ang--win .card-row{border-color:var(--blue)}
.angles .chip--out{justify-self:end;margin-top:6px;opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease) 1.3s,transform .5s var(--ease) 1.3s}
.is-on .angles .chip--out{opacity:1;transform:none}

/* 02 market mapping: eight sources feed one market, four from each side */
.hub{display:grid;grid-template-columns:auto 36px minmax(0,1fr) 36px auto;align-items:stretch;width:100%;height:232px}
.hub__col{display:grid;grid-template-rows:repeat(4,1fr)}
.hub__col .chip{align-self:center;opacity:.25;transition:opacity .4s var(--ease)}
.is-on .hub__col .chip{opacity:1}
.hub__col .chip:nth-child(2){transition-delay:.1s}.hub__col .chip:nth-child(3){transition-delay:.2s}.hub__col .chip:nth-child(4){transition-delay:.3s}
.hub__col--r .chip{justify-self:start}
.hub__col--l .chip{justify-self:end}
.hub svg{width:100%;height:100%;overflow:visible}
.tam{align-self:center;border:1px solid var(--blue);border-radius:12px;padding:14px;background:rgba(29,132,251,.1);text-align:center}
.tam b{display:block;font-size:.84rem;font-weight:600;color:var(--s-ink);line-height:1.3}
.tam span{display:block;font-size:.72rem;color:var(--s-mute);margin-top:4px}
.tam__bar{height:6px;border-radius:99px;background:var(--s-line);overflow:hidden;margin-top:10px}
.tam__bar i{display:block;height:100%;width:0;background:var(--blue);transition:width 1.6s var(--ease) .6s}
.is-on .tam__bar i{width:100%}

/* 03 signals */
.signals{position:relative;width:100%;height:100%}
.signals .dot{position:absolute;width:5px;height:5px;border-radius:50%;background:#3a3f47}
.pulse{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--s-ink)}
.pulse::before,.pulse::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(255,255,255,.3);animation:ring 2.4s var(--ease) infinite}
.pulse::after{animation-delay:1.2s}
.pulse--hot{background:var(--blue)}
.pulse--hot::before,.pulse--hot::after{border-color:var(--blue)}
@keyframes ring{from{transform:scale(.4);opacity:1}to{transform:scale(2.4);opacity:0}}
.signals__tag{position:absolute;left:50%;top:60%;transform:translateX(-50%);height:32px;width:250px}
.signals__tag span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:99px;background:var(--blue);
  color:#fff;font-size:.78rem;font-weight:500;opacity:0;animation:cycle 7.5s infinite}
.signals__tag span:nth-child(2){animation-delay:2.5s}.signals__tag span:nth-child(3){animation-delay:5s}
@keyframes cycle{0%{opacity:0;transform:translateY(6px)}6%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-6px)}}
.signals .chip--out{position:absolute;right:0;bottom:4%}
.signals__label{position:absolute;left:0;top:10px;font-size:.74rem;color:var(--s-mute)}

/* 04 / 05 rows */
.dom,.tier{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.dom small i{font-style:normal;color:#4ade80}
.dom small i.warm{color:#fbbf24}
.dom__prov{font-size:.72rem;color:var(--s-mute);text-align:right}
.tier__ch{display:flex;gap:6px}
.tier__ch span{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;background:var(--blue);color:#fff}
.tier__ch span svg{width:15px;height:15px}

/* 06 speed-to-lead */
.thread{width:100%;display:grid;gap:6px}
.msg{max-width:88%;padding:9px 13px;border-radius:14px;font-size:.84rem;line-height:1.4;opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.msg--in{background:var(--s-card);border:1px solid var(--s-line);color:var(--s-ink);border-bottom-left-radius:4px}
.msg--out{justify-self:end;background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.msg__t{font-size:.72rem;color:var(--s-mute);opacity:0;transition:opacity .45s var(--ease)}
.msg__t--r{justify-self:end}
.msg__t b,.call b{color:var(--blue-soft);font-weight:600}
.call{justify-self:center;font-size:.76rem;color:var(--s-mute);padding:6px 12px;border:1px solid var(--s-line);border-radius:99px;opacity:0;transition:opacity .45s var(--ease)}
.thread .chip--out{justify-self:center;opacity:0;transition:opacity .45s var(--ease)}
.is-on .msg,.is-on .msg__t,.is-on .call,.is-on .thread .chip--out{opacity:1;transform:none}

/* ---------- 11. SUCCESS STORIES (home) ---------- */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:center;
  padding:clamp(2.25rem,4vw,3rem) 0;border-top:1px solid var(--line)}
.story:first-child{border-top:0;padding-top:0}
.story--flip .story__media{order:2}
.story h3{font-size:clamp(1.2rem,1.6vw,1.4rem);line-height:1.32;margin-bottom:1.4rem}
.ba{display:grid;gap:1rem;margin-bottom:1.6rem}
.ba dt{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:.25rem}
.ba dd{color:var(--ink-3);font-size:.96rem}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600;color:var(--ink);padding:.5rem 0 .4rem;
  border-bottom:1px solid var(--ink);transition:gap .2s var(--ease)}
.link-arrow:hover{gap:12px}

/* Wistia's own player, as on the original site. Until its script arrives the
   element shows our still of the same video, so nothing jumps. */
.video{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--band)}
.video img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.video wistia-player{display:block}
.video wistia-player:not(:defined){aspect-ratio:16/9;background:center/cover no-repeat var(--wistia-still)}

/* ---------- 12. HOW IT WORKS (black band, sticky heading) ---------- */
.process{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.process__head{position:sticky;top:8rem}
.process__head h2{max-width:12ch;margin-bottom:1.3rem}
.process__head .lede{max-width:32ch;font-size:1.05rem}
.process__head .btn{margin-top:2rem}
.step{display:grid;grid-template-columns:3.6rem minmax(0,1fr);gap:clamp(1rem,2vw,1.6rem);padding:2.4rem 0;border-top:1px solid var(--band-line)}
.step:last-child{border-bottom:1px solid var(--band-line)}
.step__num{font-family:var(--display);font-weight:600;font-size:2.3rem;line-height:1;color:var(--blue-soft);letter-spacing:-.04em}
.step__top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:.9rem}
.step h3{font-size:clamp(1.35rem,1.8vw,1.6rem)}
.when{font-size:.74rem;font-weight:600;letter-spacing:.04em;color:var(--on-band);background:rgba(255,255,255,.07);border:1px solid var(--band-line);border-radius:99px;padding:3px 11px}
.step p{color:var(--on-band-2);font-size:1rem;line-height:1.7}

/* ---------- 13. HOW WE THINK: dividing lines only, no outer border ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr)}
.tile{padding:2.2rem 2.4rem;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.tile:nth-child(3n+1){border-left:0;padding-left:0}
.tile:nth-child(3n){padding-right:0}
.tile:nth-child(-n+3){border-top:0}
.tile__icon{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:var(--tint);border:1px solid var(--line);color:var(--ink-2);margin-bottom:1.3rem}
.tile h3{font-size:1.2rem;margin-bottom:.55rem}
.tile p{color:var(--ink-3);font-size:.97rem}

/* ---------- 14. RESULTS: screenshots from our sending platform ---------- */
.dashes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.dash{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;overflow:hidden;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.dash:hover{border-color:var(--line-2);box-shadow:0 22px 44px -30px rgba(11,12,14,.3)}
.dash__head{padding:1.4rem 1.5rem 1.2rem;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:start}
.dash__days{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:.75rem;font-weight:600;color:var(--ink-2);border:1px solid var(--line-2);border-radius:99px;padding:3px 10px}
.dash h3{font-family:var(--sans);font-size:1.12rem;font-weight:600;letter-spacing:-.02em}
.dash__lead{color:var(--ink-3);font-size:.95rem}
.dash__lead b{font-family:var(--display);font-weight:600;font-size:1.35rem;color:var(--blue-ink);letter-spacing:-.03em}
.dash__shot{padding:12px}
.dash__shot img{width:100%;height:auto}

/* ---------- 15. TESTIMONIALS (black band) ---------- */
.big-quote{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.12;letter-spacing:-.035em;color:#fff;max-width:28ch;margin:0 auto}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.q{background:var(--band-2);border:1px solid var(--band-line);border-radius:var(--radius-lg);padding:1.8rem;display:flex;flex-direction:column;gap:1.4rem}
.q__mark{color:var(--blue)}
.q blockquote{color:var(--on-band);font-size:.98rem;line-height:1.6;flex:1}
.q figcaption{display:flex;align-items:center;gap:12px}
.q figcaption img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.q figcaption b{display:block;font-weight:600;font-size:.95rem;color:#fff}
.q figcaption span{display:block;font-size:.84rem;color:var(--on-band-2)}

/* ---------- 16. FIT TABLE ---------- */
.fit{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.fit__col + .fit__col{border-left:1px solid var(--line)}
.fit__h{display:flex;align-items:center;gap:12px;padding:1.1rem 1.5rem;background:var(--tint);font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.fit li{display:flex;align-items:center;gap:12px;padding:1rem 1.5rem;border-top:1px solid var(--line);color:var(--ink-2)}
.fit svg{flex:none}
.fit .yes{color:var(--green)}
.fit .no{color:var(--red)}

/* ---------- 17. FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;list-style:none;
  font-family:var(--sans);font-size:1.08rem;color:var(--ink);font-weight:500;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.sign{flex:0 0 auto;position:relative;width:14px;height:14px;margin-top:6px}
.sign::before,.sign::after{content:"";position:absolute;background:var(--ink);transition:transform .25s var(--ease)}
.sign::before{top:6px;left:0;width:14px;height:2px}
.sign::after{top:0;left:6px;width:2px;height:14px}
.faq details[open] .sign::after{transform:rotate(90deg)}
.faq__a{padding:0 0 26px;max-width:72ch;color:var(--ink-3)}

/* ---------- 18. CTA BAND ---------- */
.cta{padding:clamp(4.5rem,8vw,6.5rem) 0;text-align:center;position:relative;overflow:hidden;background:var(--band);color:#fff}
.cta h2{color:#fff}
.cta .lede{margin:1.1rem auto 2rem;max-width:56ch;color:rgba(255,255,255,.72)}
.cta::before{content:"";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;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 50% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 80% at 50% 50%,#000,transparent 75%)}
.cta .wrap{position:relative}

/* ---------- 19. TEAM ---------- */
.team{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.team__photo{width:100%;height:auto;border-radius:var(--radius-lg);background:var(--tint)}
.team__name{font-family:var(--display);font-weight:600;font-size:1.75rem;color:var(--ink);letter-spacing:-.03em;line-height:1.1}
.team__role{font-size:.92rem;color:var(--blue-ink);font-weight:500;margin:.35rem 0 1.4rem}
.team__copy p:not(.team__role):not(.team__name){color:var(--ink-2);max-width:62ch}
.team__copy p + p{margin-top:1rem}
.hire{margin-top:clamp(2.5rem,4vw,3.5rem);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:1.5rem 1.75rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff}
.hire__top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:.4rem}
.hire h3{font-family:var(--sans);font-size:1.05rem;font-weight:600;letter-spacing:-.02em;margin-right:6px}
.hire__role{font-size:.76rem;font-weight:500;color:var(--ink-2);background:var(--tint);border:1px solid var(--line);border-radius:99px;padding:3px 10px}
.hire p{font-size:.92rem;color:var(--ink-3)}

/* ---------- 20. FOOTER ---------- */
.foot{background:var(--band);color:var(--on-band-2);padding:64px 0 32px;text-align:center;font-size:.9rem;border-top:1px solid var(--band-line)}
.foot__home{display:inline-block;margin-bottom:22px}
.foot__brand{height:44px;width:auto}
.foot__nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 26px}
.foot__nav a{padding:.4rem 0;transition:color .18s}
.foot__nav a:hover,.foot__legal a:hover{color:#fff}
.foot__icons{display:flex;justify-content:center;gap:12px;margin:24px 0 40px}
.foot__icons a{width:40px;height:40px;border-radius:50%;border:1px solid var(--band-line);display:grid;place-items:center;color:var(--on-band);transition:border-color .2s}
.foot__icons a:hover{border-color:var(--on-band-2)}
.foot__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;padding-top:24px;border-top:1px solid var(--band-line);font-size:.82rem}
.foot__legal{display:flex;gap:22px}

/* ---------- 21. CASE STUDY CARDS ---------- */
.cardx{display:flex;flex-direction:column;border:1px solid var(--band-line);border-radius:var(--radius-lg);overflow:hidden;background:var(--band-2);
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.cardx:hover{border-color:var(--on-band-2);transform:translateY(-2px)}
.cardx__img{position:relative;aspect-ratio:16/9;background:var(--band)}
.cardx__img img{width:100%;height:100%;object-fit:cover}
.tag{display:inline-block;font-size:.74rem;font-weight:600;color:var(--ink-2);background:var(--tint);border:1px solid var(--line);border-radius:99px;padding:3px 10px}
.cardx__img .tag{position:absolute;top:16px;right:16px;background:#fff}
.cardx__body{padding:1.5rem 1.6rem 1.6rem;display:flex;flex-direction:column;flex:1}
.cardx h3{font-size:1.15rem;margin-bottom:.5rem;color:#fff}
.cardx p{color:var(--on-band-2);font-size:.95rem;flex:1}
.cardx__go{margin-top:1.2rem;align-self:flex-end;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;transition:transform .2s var(--ease),background .2s,color .2s}
.cardx:hover .cardx__go{transform:translateX(3px);background:var(--blue);color:#fff}

/* ---------- 22. CASE STUDY PAGES ---------- */
.cs-hero{padding:clamp(40px,5vw,64px) 0 clamp(2rem,4vw,3rem)}
.cs-top{display:flex;justify-content:space-between;align-items:center}
.cs-back,.cs-next{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;color:var(--ink-2);padding:.5rem 0;transition:color .18s}
.cs-back:hover,.cs-next:hover{color:var(--blue-ink)}
/* Title on the left; the client's card is a small tile on the right, so the
   logo reads as a signature rather than a banner. */
.cs-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:clamp(1.5rem,3vw,2.5rem)}
.cs-intro .tag{margin-bottom:1rem}
.cs-intro h1{font-size:clamp(2.4rem,4.8vw,3.8rem)}
.cs-intro .lede{margin-top:1rem;max-width:58ch}
.cs-logo{border-radius:var(--radius-lg);overflow:hidden;background:var(--band);aspect-ratio:16/9}
.cs-logo img{width:100%;height:100%;object-fit:cover}
.cs-block{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);padding:clamp(2.5rem,5vw,3.75rem) 0;border-top:1px solid var(--line)}
.cs-block:first-child{border-top:0}
.cs-block__label{font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-ink);padding-top:.55rem}
.cs-block h2{font-size:clamp(1.45rem,2.1vw,1.85rem);line-height:1.25;letter-spacing:-.03em;margin-bottom:1.4rem;text-wrap:pretty}
.cs-block p{color:var(--ink-2);font-size:1.03rem;line-height:1.75;max-width:76ch}
.cs-block p + p{margin-top:1.1rem}
.cs-quote{margin:2rem 0 0;padding:1.6rem 1.8rem;border-radius:var(--radius-lg);background:var(--band);color:#fff}
.cs-quote blockquote{font-size:1.08rem;line-height:1.6;color:#fff}
.cs-quote figcaption{margin-top:1rem;font-size:.92rem;font-weight:600;color:var(--on-band-2)}
.cs-figs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
.cs-fig{border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.4rem 1.5rem}
.cs-fig b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(2rem,3.2vw,2.6rem);line-height:1;color:var(--blue-ink);letter-spacing:-.04em}
.cs-fig span{display:block;margin-top:.5rem;color:var(--ink-3);font-size:.95rem}
.cs-more{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

/* ---------- 23. PLAIN PAGES ---------- */
.prose{max-width:72ch}
.prose h1{margin-bottom:2rem}
.prose p{color:var(--ink-2);margin-top:1.1rem}
.prose a{border-bottom:1px solid var(--line-2)}

/* ---------- 24. RESPONSIVE ---------- */
@media (max-width:1024px){
  .process{grid-template-columns:1fr}
  .process__head{position:static}
  .trio{grid-template-columns:1fr}
  .trio__item,.trio__item:first-child,.trio__item:last-child{padding:2rem 0 1.6rem}
  .trio__item + .trio__item{border-left:0;border-top:1px solid var(--line)}
  .trio__num,.trio__item:last-child .trio__num{right:0;top:2rem}
  .tiles,.quotes{grid-template-columns:1fr 1fr}
  .tile,.tile:nth-child(n){border-left:0;border-top:1px solid var(--line);padding:2rem 1.5rem 2rem 0}
  .tile:nth-child(2n){border-left:1px solid var(--line);padding-left:1.5rem;padding-right:0}
  .tile:nth-child(-n+2){border-top:0}
  .team{grid-template-columns:1fr}
  .team__photo{max-width:300px}
  .logos{flex-direction:column;gap:18px}
  .logos__label{max-width:none;text-align:center}
  .marquee{width:100%}
  .cs-intro{grid-template-columns:1fr}
  .cs-logo{max-width:360px}
}
@media (max-width:760px){
  :root{--gutter:20px}
  body{font-size:16px}
  .section{padding:4.25rem 0}
  /* no blur on phones: it would trap the fixed menu inside the 70px bar */
  .nav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav__inner{height:70px}
  .nav__brand img{height:25px}
  .nav__burger{display:block}
  .nav__links{position:fixed;inset:70px 0 0;background:#fff;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:20px var(--gutter);overflow-y:auto;
    /* closed: clipped away in place rather than pushed off-screen, so it can't widen the page */
    clip-path:inset(0 0 0 100%);visibility:hidden;transition:clip-path .32s var(--ease),visibility .32s}
  .nav__links[data-open="true"]{clip-path:inset(0);visibility:visible}
  .nav__links a:not(.nav__cta){font-size:1.3rem;padding:14px 0;border-bottom:1px solid var(--line)}
  .nav__links a:not(.nav__cta)::after{display:none}
  .nav__cta{margin-top:22px;align-self:flex-start}
  .stats{grid-template-columns:1fr}
  .stat{border-left:0;border-top:1px solid var(--line)}
  .stat:first-child{border-top:0}
  .story,.story--flip{grid-template-columns:1fr}
  .story--flip .story__media{order:0}
  .ang{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
  .ang__bar{grid-column:1 / -1;grid-row:2}
  .hub .chip span{display:none}
  .flow{grid-template-columns:minmax(0,1fr) 34px 96px}
  .flow .chip--out{white-space:normal;text-align:center;line-height:1.3}
  .hub{grid-template-columns:auto 30px minmax(0,1fr) 30px auto}
  .step{grid-template-columns:2.6rem minmax(0,1fr)}
  .step__num{font-size:1.9rem}
  .tiles,.quotes,.dashes{grid-template-columns:1fr}
  .tile,.tile:nth-child(n),.tile:nth-child(2n){border-left:0;border-top:1px solid var(--line);padding:1.8rem 0}
  .tile:first-child{border-top:0}
  .fit{grid-template-columns:1fr}
  .fit__col + .fit__col{border-left:0;border-top:1px solid var(--line)}
  .hire{flex-direction:column;align-items:flex-start}
  .cs-more{grid-template-columns:1fr}
  .cs-block{grid-template-columns:1fr;gap:.8rem}
  .btn-row .btn{flex:1 1 auto}
  .foot__bottom{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .marquee__track{transform:none}
  .signals__tag span:first-child{opacity:1}
}