/* ==========================================================================
   BurkyFlow — landing page system

   Palette is the brand kit, verbatim:
     #1B72F3 logo blue      #FF5027 logo orange     #333333 wordmark ink
     #4170B6 muted blue     #F16B4D coral           #F5B5A3 peach
     #686868 grey           #F2F2F2 / #FEFEFE neutrals

   The logo stacks orange over blue, so the two audience paths inherit those
   two colours: agencies are blue, service businesses are orange. Every
   component reads --accent, which each path re-declares once.
   ========================================================================== */

@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-var.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* brand */
  --blue:#1B72F3;
  --blue-dark:#0E56C4;
  --blue-wash:#EAF2FE;
  --blue-muted:#4170B6;
  --orange:#FF5027;
  --orange-dark:#DB3810;
  --orange-wash:#FFF0EC;
  --coral:#F16B4D;
  --peach:#F5B5A3;

  /* neutrals */
  --ink:#1A1A1A;
  --ink-2:#333333;
  --body:#5E5E5E;
  --grey:#686868;
  --faint:#8E8E8E;
  --line:#E6E6E6;
  --line-2:#D6D6D6;
  --surface:#FEFEFE;
  --surface-2:#F2F2F2;
  --deep:#161616;

  /* default accent — each path overrides */
  --accent:var(--blue);
  --accent-dark:var(--blue-dark);
  --accent-wash:var(--blue-wash);

  --radius:12px;
  --radius-lg:18px;
  --radius-xl:24px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 2px 8px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 24px 60px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.04);

  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap:1140px;
  --narrow:760px;
  --bar:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
/* Slide-in reveals translate full-width blocks sideways before they enter;
   clip (not hidden) stops that painting a horizontal scrollbar without
   turning the page into a scroll container, so position:sticky survives. */
html,body{overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

body{
  margin:0;
  font-family:var(--sans);
  font-optical-sizing:auto;
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.005em;
  color:var(--body);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit; color:inherit}
::selection{background:var(--accent); color:#fff}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:5px}

/* --------------------------------------------------------------- type
   Three sizes plus emphasis, not a size for every occasion. Tracking
   tightens as the type grows, the way optical sizing expects. */
h1,h2,h3,h4{color:var(--ink); margin:0 0 .44em; font-weight:640}
h1{font-size:clamp(2.4rem,1.5rem + 3.9vw,4.15rem); line-height:1.04; letter-spacing:-.035em; font-weight:660}
h2{font-size:clamp(1.75rem,1.3rem + 2vw,2.7rem); line-height:1.1; letter-spacing:-.028em}
h3{font-size:1.125rem; line-height:1.35; letter-spacing:-.015em; font-weight:620}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{color:var(--ink); font-weight:600}

.lead{font-size:clamp(1.06rem,1rem + .3vw,1.2rem); line-height:1.55; color:var(--body); letter-spacing:-.01em}
.small{font-size:.925rem; line-height:1.5}
.micro{font-size:.85rem; line-height:1.45; color:var(--faint); letter-spacing:0}

.eyebrow{
  display:inline-block; font-size:.75rem; font-weight:620; letter-spacing:.02em;
  color:var(--accent); margin:0 0 14px;
}
.eyebrow--chip{
  background:var(--accent-wash); padding:6px 12px; border-radius:999px; letter-spacing:.01em;
}
.eyebrow--grey{color:var(--faint)}

/* ------------------------------------------------------------- layout */
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}
.wrap--narrow{max-width:var(--narrow)}
.section{padding:clamp(56px,7.5vw,110px) 0}
.section--grey{background:var(--surface-2)}
.section--tight{padding-top:clamp(36px,4.5vw,60px); padding-bottom:clamp(36px,4.5vw,60px)}
/* The block is wide; the headline and the lead each get their own measure,
   so a long headline wraps at display width instead of in a narrow column. */
.head{max-width:840px; margin-bottom:clamp(32px,4vw,52px)}
.head h2{max-width:22ch}
.head .lead{max-width:56ch}
.head--wide h2{max-width:30ch}
.head--center{margin-left:auto; margin-right:auto; text-align:center}
.head--center h2,.head--center .lead{margin-left:auto; margin-right:auto}

/* ------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 26px; border-radius:999px; border:1px solid transparent;
  font-size:1.02rem; font-weight:580; letter-spacing:-.012em; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:background .16s ease, transform .12s ease, box-shadow .16s ease, border-color .16s ease;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--accent); color:#fff}
.btn--primary:hover{background:var(--accent-dark); transform:translateY(-1px)}
.btn--primary:active{transform:translateY(0)}
.btn--quiet{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn--quiet:hover{border-color:var(--ink); background:var(--surface)}
.btn--onDark{background:#fff; color:var(--ink)}
.btn--onDark:hover{background:#fff; transform:translateY(-1px)}
.btn--lg{padding:17px 32px; font-size:1.06rem}
.btn--sm{padding:10px 18px; font-size:.92rem}
.btn--block{width:100%}
.btn-note{font-size:.9rem; color:var(--faint); margin-top:13px; letter-spacing:0}

.cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.cta-row--center{justify-content:center}

/* ================================================================ HERO */
.hero{
  min-height:100svh; display:flex; flex-direction:column;
  padding:clamp(24px,3.4vw,36px) 0 clamp(40px,5vw,64px);
  background:
    radial-gradient(760px 420px at 18% -6%, rgba(255,80,39,.07), transparent 62%),
    radial-gradient(820px 460px at 84% 4%, rgba(27,114,243,.08), transparent 64%),
    var(--surface);
}
.hero-top{display:flex; justify-content:center}
.logo{height:30px; width:auto}
.hero-inner{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center; padding:clamp(28px,4vw,48px) 0 0;
}
.hero h1{max-width:15ch; text-wrap:balance; color:var(--ink)}
.hero-sub{
  font-size:clamp(1.1rem,1rem + .5vw,1.3rem); line-height:1.5; color:var(--body);
  max-width:46ch; margin:0 auto 22px; letter-spacing:-.012em; text-wrap:pretty;
}
.hero-proof{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0;
  margin:0 0 clamp(32px,4vw,46px); padding:0; list-style:none;
  font-size:.94rem; color:var(--grey); letter-spacing:-.005em;
}
.hero-proof li{display:flex; align-items:center}
.hero-proof li + li::before{
  content:""; width:3px; height:3px; border-radius:50%; background:var(--line-2); margin:0 12px;
}
.hero-proof b{color:var(--ink); font-weight:600}

/* the split */
.split{
  display:grid; gap:14px; grid-template-columns:1fr; width:100%;
  max-width:820px; margin:0 auto;
}
@media (min-width:760px){ .split{grid-template-columns:1fr 1fr; gap:18px} }

.split-btn{
  --accent:var(--blue); --accent-wash:var(--blue-wash);
  position:relative; display:block; width:100%; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-xl);
  padding:26px 24px 24px; overflow:hidden;
  transition:border-color .18s ease, box-shadow .2s ease, transform .18s ease;
}
.split-btn::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent);
}
.split-btn--business{--accent:var(--orange); --accent-wash:var(--orange-wash)}
.split-btn:hover,.split-btn:focus-visible{
  border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-lg);
}
.split-icon{
  width:38px; height:38px; border-radius:11px; background:var(--accent-wash);
  display:grid; place-items:center; margin-bottom:16px;
}
.split-icon svg{width:19px; height:19px; fill:none; stroke:var(--accent); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.split-btn h2{font-size:1.32rem; letter-spacing:-.024em; margin:0 0 5px; font-weight:640}
.split-btn p{font-size:.985rem; color:var(--body); margin:0; letter-spacing:-.006em}
.split-go{
  display:flex; align-items:center; gap:7px; margin-top:18px;
  font-size:.92rem; font-weight:580; color:var(--accent); letter-spacing:-.008em;
}
.split-go svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease}
.split-btn:hover .split-go svg{transform:translateX(3px)}
.hero-foot{margin-top:24px; font-size:.9rem; color:var(--faint); letter-spacing:0}

/* ================================================================ PATH */
.path{display:none}
.path.is-active{display:block; animation:rise .3s cubic-bezier(.22,.9,.3,1) both}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

#path-agency{--accent:var(--blue); --accent-dark:var(--blue-dark); --accent-wash:var(--blue-wash)}
#path-business{--accent:var(--orange); --accent-dark:var(--orange-dark); --accent-wash:var(--orange-wash)}

/* Nearly opaque on purpose: .path carries a fill-mode animation, which creates
   a containing block that can defeat backdrop-filter — content was reading
   through the bar on mobile. The blur is a bonus where it works, not the plan. */
.bar{
  position:sticky; top:0; z-index:50; background:rgba(254,254,254,.97);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.bar-inner{display:flex; align-items:center; gap:14px; height:var(--bar)}
.bar .logo{height:22px}
.bar-tag{
  font-size:.78rem; font-weight:590; color:var(--accent); background:var(--accent-wash);
  padding:5px 10px; border-radius:6px; letter-spacing:-.005em; display:none;
}
@media (min-width:640px){ .bar-tag{display:inline-block} }
.bar-spacer{flex:1}
.bar-switch{
  background:none; border:0; padding:8px 0; cursor:pointer; color:var(--grey);
  font-size:.9rem; font-weight:520; letter-spacing:-.008em;
}
.bar-switch:hover{color:var(--ink)}
.bar .btn{display:none}
@media (min-width:860px){ .bar .btn{display:inline-flex} }

/* path hero */
.phero{padding:clamp(44px,5.5vw,86px) 0 clamp(40px,5vw,72px)}
.phero-grid{display:grid; gap:clamp(32px,4vw,56px); grid-template-columns:1fr; align-items:center}
@media (min-width:940px){ .phero-grid{grid-template-columns:1.15fr .85fr} }
.phero h1{font-size:clamp(2.05rem,1.4rem + 2.9vw,3.4rem); max-width:16ch; text-wrap:balance; letter-spacing:-.032em}
.phero .lead{max-width:48ch; margin-bottom:0}
.phero .cta-row{margin-top:28px}

/* the proof panel that sits beside the path headline */
.pcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-xl);
  padding:28px 26px; box-shadow:var(--shadow);
}
.pcard-label{font-size:.76rem; font-weight:620; color:var(--faint); letter-spacing:.03em; text-transform:uppercase; margin:0 0 18px}
.pcard-row{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:13px 0; border-top:1px solid var(--line)}
.pcard-row:first-of-type{border-top:0; padding-top:0}
.pcard-row dt{font-size:.94rem; color:var(--body); letter-spacing:-.006em}
.pcard-row dd{margin:0; font-size:1.32rem; font-weight:640; color:var(--ink); letter-spacing:-.028em; font-variant-numeric:tabular-nums}
.pcard-foot{margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line); font-size:.87rem; color:var(--faint); letter-spacing:0}

/* ====================================================== PRODUCT DEMOS
   The page has to show the thing, not just describe it. Two surfaces:
   an AI call taking place (Path B) and a live automation canvas (Path A).
   Both are real markup, not screenshots, so they stay sharp and weightless. */

.demo{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:20px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 14px 34px -10px rgba(0,0,0,.10),
             0 44px 90px -40px rgba(0,0,0,.20);
}
.demo::after{
  content:""; position:absolute; inset:-30% -10% auto; height:56%; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
}
.demo-bar{
  display:flex; align-items:center; gap:10px; padding:14px 18px;
  border-bottom:1px solid var(--line); background:var(--surface); position:relative; z-index:1;
}
.demo-dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation:ping 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent)}
  70%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.demo-title{font-size:.85rem; font-weight:590; color:var(--ink); letter-spacing:-.008em}
.demo-meta{margin-left:auto; font-size:.79rem; color:var(--faint); letter-spacing:0; font-variant-numeric:tabular-nums}
.demo-body{padding:20px 18px; position:relative; z-index:1}

/* ---- waveform ---- */
.wave{display:flex; align-items:center; justify-content:space-between; gap:4px; height:34px; margin-bottom:18px}
.wave i{
  width:3px; flex:none; border-radius:2px; transform-origin:center;
  background:color-mix(in srgb, var(--accent) 34%, transparent);
}
/* a static profile, so it still reads as audio when the call is not running */
.wave i:nth-child(5n+1){height:26%}
.wave i:nth-child(5n+2){height:58%}
.wave i:nth-child(5n+3){height:88%}
.wave i:nth-child(5n+4){height:44%}
.wave i:nth-child(5n+5){height:70%}
.is-live .wave i{animation:bar .95s ease-in-out infinite}
.wave i:nth-child(2n){animation-delay:.13s}
.wave i:nth-child(3n){animation-delay:.27s}
.wave i:nth-child(5n){animation-delay:.4s}
@keyframes bar{0%,100%{height:18%} 50%{height:92%}}

/* ---- transcript ---- */
.turns{display:grid; gap:12px; min-height:196px; align-content:start}
.turn{
  opacity:0; transform:translateY(8px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,.9,.3,1);
}
.turn.is-in{opacity:1; transform:none}
.turn-who{
  display:flex; align-items:baseline; gap:8px; margin-bottom:4px;
  font-size:.74rem; font-weight:620; letter-spacing:.02em; text-transform:uppercase;
}
.turn-who b{font-weight:620}
.turn-who span{font-size:.72rem; color:var(--faint); letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums}
.turn-ai .turn-who b{color:var(--accent)}
.turn-caller .turn-who b{color:var(--grey)}
.turn p{
  margin:0; font-size:.97rem; line-height:1.45; color:var(--ink); letter-spacing:-.008em;
  background:var(--surface-2); border-radius:12px; padding:10px 13px;
}
.turn-ai p{background:var(--accent-wash); color:var(--ink)}
/* the speaker label is a <p> too — keep the bubble off it */
.turn p.turn-who{background:none; padding:0; margin-bottom:5px}

/* ---- the booking that drops in ---- */
.booked{
  display:flex; align-items:center; gap:12px; margin:16px -18px -20px; padding:16px 18px;
  border-top:1px solid var(--line); background:var(--surface-2);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.9,.3,1);
}
.booked.is-in{opacity:1; transform:none}
.booked-tick{
  flex:none; width:30px; height:30px; border-radius:50%; background:var(--accent);
  display:grid; place-items:center;
}
.booked-tick svg{width:15px; height:15px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.booked-txt b{display:block; font-size:.94rem; font-weight:600; color:var(--ink); letter-spacing:-.012em}
.booked-txt span{display:block; font-size:.83rem; color:var(--grey); letter-spacing:0}
.booked-when{margin-left:auto; text-align:right}
.booked-when b{display:block; font-size:.92rem; font-weight:620; color:var(--ink); letter-spacing:-.01em}
.booked-when span{display:block; font-size:.78rem; color:var(--faint)}

/* ---- automation canvas (Path A) ---- */
.flow{padding:22px 20px 20px; position:relative; z-index:1}
.flow-svg{width:100%; height:auto; display:block; overflow:visible}
.flow-node rect{fill:var(--surface); stroke:var(--line-2); stroke-width:1}
.flow-node--accent rect{fill:var(--accent-wash); stroke:color-mix(in srgb, var(--accent) 40%, transparent)}
.flow-node text{font-family:var(--sans); font-size:11px; font-weight:560; fill:var(--ink); letter-spacing:-.2px}
.flow-node--accent text{fill:var(--accent)}
.flow-node tspan.sub{font-size:9.5px; font-weight:450; fill:var(--faint)}
.flow-link{stroke:var(--line-2); stroke-width:1.5; fill:none}
.flow-pulse{fill:var(--accent)}
@media (prefers-reduced-motion:reduce){ .flow-pulse{display:none} }
.flow-foot{
  display:flex; align-items:center; gap:9px; margin:16px 0 0; padding-top:14px;
  border-top:1px solid var(--line); font-size:.82rem; color:var(--grey);
  letter-spacing:0; line-height:1.35;
}
.flow-foot b{color:var(--ink); font-weight:620; font-variant-numeric:tabular-nums}
.flow-foot .demo-dot{margin-top:1px}

/* ---- floating stat chip on a demo ---- */
.demo-wrap{position:relative}
.chip{
  position:absolute; z-index:3; background:var(--surface); border:1px solid var(--line);
  border-radius:13px; padding:11px 15px; box-shadow:0 10px 28px -8px rgba(0,0,0,.18);
  display:none;
}
@media (min-width:1080px){ .chip{display:block} }
.chip b{display:block; font-size:1.12rem; font-weight:660; color:var(--ink); letter-spacing:-.03em; line-height:1.1}
.chip span{display:block; margin-top:2px; font-size:.74rem; color:var(--faint); letter-spacing:0}
.chip--br{bottom:-22px; right:-30px}

/* --------------------------------------------------- scroll reveals
   Applied by JS only, so if JS never runs nothing is left invisible. */
.reveal{opacity:0; transform:translateY(16px)}
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .55s cubic-bezier(.22,.9,.3,1), transform .55s cubic-bezier(.22,.9,.3,1);
}
@media (prefers-reduced-motion:reduce){ .reveal,.reveal.is-in{opacity:1; transform:none} }

/* ---------------------------------------------------------- stat band */
.stats{background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.stats-grid{display:grid; grid-template-columns:repeat(2,1fr)}
@media (min-width:820px){ .stats-grid{grid-template-columns:repeat(4,1fr)} }
.stat{padding:clamp(26px,3vw,38px) 20px; text-align:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.stat:nth-child(2n){border-right:0}
.stat:nth-last-child(-n+2){border-bottom:0}
@media (min-width:820px){
  .stat{border-bottom:0}
  .stat:nth-child(2n){border-right:1px solid var(--line)}
  .stat:last-child{border-right:0}
}
.stat b{display:block; font-size:clamp(1.7rem,1.3rem + 1.5vw,2.4rem); font-weight:640; color:var(--ink); letter-spacing:-.038em; line-height:1}
.stat span{display:block; margin-top:9px; font-size:.88rem; color:var(--grey); line-height:1.4; letter-spacing:-.004em}

/* -------------------------------------------------------------- cards */
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media (min-width:700px){ .grid-2,.grid-4{grid-template-columns:1fr 1fr} }
@media (min-width:940px){ .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 26px;
}
.card h3{margin-bottom:.42em}
.card p{font-size:.975rem; margin:0; letter-spacing:-.006em}
.card-i{
  width:36px; height:36px; border-radius:10px; background:var(--accent-wash);
  display:grid; place-items:center; margin-bottom:16px;
}
.card-i svg{width:18px; height:18px; fill:none; stroke:var(--accent); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.card-n{
  font-size:.78rem; font-weight:620; color:var(--accent); letter-spacing:.02em;
  display:block; margin-bottom:12px; font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------- comparison */
.compare{display:grid; gap:16px; grid-template-columns:1fr; align-items:stretch}
@media (min-width:900px){ .compare{grid-template-columns:1fr 1fr; gap:20px} }
.col{border-radius:var(--radius-xl); padding:clamp(26px,3vw,36px)}
.col--them{background:var(--surface-2); border:1px solid var(--line)}
.col--us{background:var(--accent); color:rgba(255,255,255,.86)}
.col--us h3{color:#fff}
.col-kicker{font-size:.76rem; font-weight:620; letter-spacing:.03em; text-transform:uppercase; color:var(--faint); margin:0 0 8px}
.col--us .col-kicker{color:rgba(255,255,255,.7)}
.col h3{font-size:1.28rem; letter-spacing:-.024em; margin-bottom:0}
.col-list{list-style:none; margin:22px 0 0; padding:0}
.col-list li{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:.97rem; letter-spacing:-.006em}
.col--us .col-list li{border-bottom-color:rgba(255,255,255,.22)}
.col-list li:last-child{border-bottom:0}
.col-list b{font-weight:590; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.col--us .col-list b{color:#fff}
.col-total{margin-top:22px; padding-top:20px; border-top:2px solid var(--ink)}
.col--us .col-total{border-top-color:rgba(255,255,255,.4)}
.col-total span{display:block; font-size:.86rem; color:var(--grey); letter-spacing:-.004em}
.col--us .col-total span{color:rgba(255,255,255,.75)}
.col-total b{display:block; margin-top:6px; font-size:clamp(1.9rem,1.4rem + 1.8vw,2.6rem); font-weight:660; color:var(--ink); letter-spacing:-.04em; line-height:1.08}
.col--us .col-total b{color:#fff}
.col-foot{margin:16px 0 0; font-size:.9rem; color:var(--grey); letter-spacing:-.004em}
.col--us .col-foot{color:rgba(255,255,255,.75)}
.verdict{
  margin-top:20px; padding:22px 26px; border-radius:var(--radius-lg);
  background:var(--peach); color:#5B2312; font-size:1.02rem; letter-spacing:-.01em;
}
.verdict b{color:#3D150A; font-weight:620}

/* ------------------------------------------------------------ pricing */
.tiers{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:700px){ .tiers{grid-template-columns:1fr 1fr} }
@media (min-width:1040px){ .tiers{grid-template-columns:repeat(4,1fr)} }
.tier{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px 24px; display:flex; flex-direction:column;
}
.tier--feature{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.tier-badge{
  position:absolute; top:-10px; left:24px; font-size:.7rem; font-weight:620; letter-spacing:.01em;
  background:var(--accent); color:#fff; padding:4px 10px; border-radius:5px;
}
.tier--start{border-color:var(--line-2)}
.tier--start .tier-badge{background:var(--ink)}
.tier .t-name{margin:0; font-size:.94rem; font-weight:590; color:var(--grey); letter-spacing:-.005em}
.tier .t-price{margin:10px 0 2px; font-size:2rem; font-weight:660; color:var(--ink); letter-spacing:-.045em; line-height:1.05}
.tier .t-price small{font-size:.9rem; font-weight:500; color:var(--grey); letter-spacing:-.01em}
.tier .t-unit{margin:0 0 18px; font-size:.85rem; color:var(--faint); letter-spacing:0}
.tier p{font-size:.94rem; margin:0; letter-spacing:-.006em}
.tier hr{border:0; border-top:1px solid var(--line); margin:0 0 18px}
.price-note{margin:24px 0 0; text-align:center; font-size:.9rem; color:var(--faint); letter-spacing:0}

/* -------------------------------------------------------------- steps */
.steps{border-top:1px solid var(--line)}
.step{display:grid; gap:4px; padding:26px 0; border-bottom:1px solid var(--line)}
@media (min-width:820px){
  .step{grid-template-columns:64px 1fr 130px; gap:8px 32px; align-items:baseline; padding:30px 0}
}
.step-n{font-size:.86rem; font-weight:620; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:.01em}
.step h3{margin:0}
.step p{margin:6px 0 0; font-size:.975rem; letter-spacing:-.006em}
.step-when{font-size:.85rem; color:var(--faint); letter-spacing:0; white-space:nowrap}
@media (min-width:820px){ .step-when{justify-self:end} }

/* ---------------------------------------------------------- fit lists */
.fit{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:860px){ .fit{grid-template-columns:1.3fr .9fr; gap:20px} }
.fit-list{list-style:none; margin:0; padding:0}
.fit-list li{display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); font-size:1.01rem; color:var(--ink); letter-spacing:-.01em}
.fit-list li:last-child{border-bottom:0}
.fit-list svg{flex:none; width:19px; height:19px; margin-top:3px; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.fit-yes svg{stroke:var(--accent)}
.fit-no{background:var(--surface-2); border-radius:var(--radius-lg); padding:26px 24px}
.fit-no h3{font-size:1rem; margin-bottom:.5em}
.fit-no .fit-list li{font-size:.95rem; color:var(--body); border-bottom-color:var(--line-2)}
.fit-no svg{stroke:var(--grey)}

/* -------------------------------------------------------- proof cards */
.proof{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 26px; display:flex; flex-direction:column;
}
.proof-k{font-size:.76rem; font-weight:620; color:var(--faint); letter-spacing:.03em; text-transform:uppercase; margin:0 0 16px}
.proof-big{font-size:clamp(2.1rem,1.7rem + 1.5vw,2.75rem); font-weight:660; color:var(--accent); letter-spacing:-.045em; line-height:1; margin:0}
.proof-cap{margin:7px 0 14px; font-size:.95rem; font-weight:560; color:var(--ink); letter-spacing:-.012em}
.proof p{font-size:.95rem; margin:0 0 18px; letter-spacing:-.006em}
.proof dl{margin:auto 0 0; padding-top:16px; border-top:1px solid var(--line); display:grid; gap:9px}
.proof dl div{display:flex; justify-content:space-between; gap:14px; font-size:.9rem}
.proof dt{color:var(--faint); letter-spacing:0}
.proof dd{margin:0; color:var(--ink); font-weight:590; font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ callout */
.callout{
  background:var(--deep); color:rgba(255,255,255,.76); border-radius:var(--radius-xl);
  padding:clamp(32px,4.2vw,60px);
}
.callout h2{color:#fff; max-width:20ch; text-wrap:balance}
.callout p{font-size:1.04rem; max-width:60ch; letter-spacing:-.01em}
.callout .seal,.spiral .seal{
  display:inline-block; font-size:.76rem; font-weight:620; letter-spacing:.03em; text-transform:uppercase;
  color:var(--accent); background:rgba(255,255,255,.09); padding:6px 12px; border-radius:6px; margin-bottom:18px;
}

/* -------------------------------------------------------- pull quote */
.quote{
  margin:0; padding:clamp(30px,3.6vw,48px); border-radius:var(--radius-xl);
  background:var(--accent-wash); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  display:grid; gap:clamp(20px,2.4vw,32px); grid-template-columns:1fr;
}
@media (min-width:880px){ .quote{grid-template-columns:1.5fr .85fr; align-items:center} }
.quote blockquote{margin:0; position:relative; padding-left:clamp(24px,2.4vw,34px)}
.quote blockquote::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:3px;
  border-radius:2px; background:var(--accent);
}
.quote blockquote p{
  margin:0; font-size:clamp(1.15rem,1rem + .8vw,1.5rem); line-height:1.42;
  color:var(--ink); font-weight:520; letter-spacing:-.022em; text-wrap:pretty;
}
.quote figcaption{display:flex; flex-direction:column; gap:8px}
.quote-who{font-size:1rem; font-weight:620; color:var(--ink); letter-spacing:-.014em}
.quote-who::before{content:"— "; color:var(--accent)}
.quote-note{font-size:.94rem; color:var(--body); letter-spacing:-.006em}

/* --------------------------------------------------------- calculator */
.calc{border:1px solid var(--line); border-radius:var(--radius-xl); overflow:hidden; background:var(--surface)}
.calc-grid{display:grid; grid-template-columns:1fr}
@media (min-width:860px){ .calc-grid{grid-template-columns:1fr 1.05fr} }
.calc-in{padding:clamp(26px,3vw,38px); display:flex; flex-direction:column; justify-content:center}
.calc-out{
  background:var(--deep); color:rgba(255,255,255,.72); padding:clamp(26px,3vw,38px);
  display:flex; flex-direction:column; justify-content:center;
}
.calc-out-k{font-size:.78rem; font-weight:620; letter-spacing:.03em; text-transform:uppercase; color:var(--accent); margin:0 0 10px}
.calc-out-n{
  font-size:clamp(2.6rem,1.9rem + 3vw,4rem); font-weight:660; color:#fff;
  letter-spacing:-.05em; line-height:1; margin:0; font-variant-numeric:tabular-nums;
}
.calc-out-s{margin:16px 0 0; font-size:.99rem; letter-spacing:-.008em}
.calc-out-s b{color:#fff; font-weight:590}
.calc-split{margin-top:24px; padding-top:22px; border-top:1px solid rgba(255,255,255,.18); display:flex; gap:32px; flex-wrap:wrap}
.calc-split span{display:block; font-size:.79rem; color:rgba(255,255,255,.6); letter-spacing:.02em; text-transform:uppercase; font-weight:590}
.calc-split b{display:block; margin-top:4px; font-size:1.28rem; font-weight:620; color:#fff; letter-spacing:-.028em}
.calc-note{margin:20px 0 0; font-size:.9rem; color:var(--faint); letter-spacing:0; max-width:72ch}

/* --------------------------------------------------------------- form */
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.field label{display:block; font-size:.92rem; font-weight:560; color:var(--ink); margin-bottom:7px; letter-spacing:-.008em}
.hint{display:block; font-size:.85rem; font-weight:400; color:var(--faint); margin-top:2px; letter-spacing:0}
.input,.select,.textarea{
  width:100%; padding:13px 15px; font-size:1rem; font-family:inherit; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:10px;
  letter-spacing:-.008em; transition:border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder{color:var(--faint)}
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.textarea{min-height:92px; resize:vertical; line-height:1.5}
.select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),linear-gradient(135deg,var(--grey) 50%,transparent 50%);
  background-position:calc(100% - 20px) 51%, calc(100% - 15px) 51%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:44px;
}
.money{position:relative}
.money span{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--grey)}
.money .input{padding-left:29px}

.form-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-xl);
  padding:clamp(26px,3.2vw,44px); box-shadow:var(--shadow-lg); max-width:640px; margin:0 auto;
  text-align:left;
}
.form-row{display:grid; grid-template-columns:1fr}
@media (min-width:600px){ .form-row{grid-template-columns:1fr 1fr; column-gap:16px} }
.form-leg{
  display:block; font-size:.76rem; font-weight:620; letter-spacing:.03em; text-transform:uppercase;
  color:var(--faint); margin:26px 0 16px; padding-top:22px; border-top:1px solid var(--line);
}
.form-leg--first{margin-top:0; padding-top:0; border-top:0}
.req{color:var(--orange)}
.err{display:none; margin-top:6px; font-size:.86rem; font-weight:520; color:var(--orange-dark); letter-spacing:0}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:var(--orange)}
.field.has-error .err{display:block}
.form-submit{margin-top:24px}
.form-foot{margin:14px 0 0; text-align:center; font-size:.87rem; color:var(--faint); letter-spacing:0}
.form-fail{
  display:none; margin-top:14px; padding:13px 16px; border-radius:10px;
  background:var(--orange-wash); color:var(--orange-dark); font-size:.92rem; letter-spacing:-.005em;
}
.form-fail.is-visible{display:block}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.btn[aria-busy="true"]{opacity:.65; pointer-events:none}

/* ---------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-size:1.05rem; font-weight:560; color:var(--ink); letter-spacing:-.016em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after,.faq summary::before{
  content:""; position:absolute; right:10px; top:50%; background:var(--accent); border-radius:1px;
  transition:transform .2s ease, opacity .2s ease;
}
.faq summary::after{width:13px; height:1.6px; transform:translateY(-50%)}
.faq summary::before{width:1.6px; height:13px; transform:translate(6px,-50%)}
.faq details[open] summary::before{opacity:0; transform:translate(6px,-50%) rotate(90deg)}
.faq summary:hover{color:var(--accent)}
.faq-a{padding:0 52px 24px 0; font-size:1rem; color:var(--body); letter-spacing:-.008em}
.faq-a p{margin-bottom:.75em}

/* ----------------------------------------------------------- close cta */
.close{background:var(--surface-2)}
.close .head{margin-bottom:clamp(28px,3.4vw,40px)}

/* -------------------------------------------------------------- footer */
.footer{border-top:1px solid var(--line); padding:30px 0; background:var(--surface)}
.footer-in{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between; font-size:.87rem; color:var(--faint); letter-spacing:0}
.footer .logo{height:18px; opacity:.72}
.footer a{color:var(--grey)}

/* --------------------------------------------------------- sticky cta */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:rgba(254,254,254,.94); backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--line); transform:translateY(120%);
  transition:transform .26s cubic-bezier(.22,.9,.3,1);
}
.sticky.is-visible{transform:none}
@media (min-width:860px){ .sticky{display:none} }

/* ---------------------------------------------------------- thank you */
/* app.js stamps data-path on <body>, so the confirmation page keeps the
   colour the visitor arrived on. */
body[data-path="agency"]{--accent:var(--blue); --accent-dark:var(--blue-dark); --accent-wash:var(--blue-wash)}
body[data-path="business"]{--accent:var(--orange); --accent-dark:var(--orange-dark); --accent-wash:var(--orange-wash)}
.ty{min-height:100svh; display:flex; flex-direction:column; background:var(--surface-2)}
.ty-head{background:var(--surface); border-bottom:1px solid var(--line); padding:clamp(26px,3.4vw,40px) 0 clamp(52px,6vw,80px); text-align:center}
.ty-head .logo{height:26px; margin:0 auto clamp(28px,3.4vw,44px)}
.ty-head h1{font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem); max-width:16ch; margin:0 auto .4em; text-wrap:balance}
.ty-head .lead{max-width:48ch; margin:0 auto}
.ty-badge{
  display:inline-flex; align-items:center; gap:8px; background:var(--accent-wash); color:var(--accent);
  font-size:.79rem; font-weight:620; letter-spacing:.01em; padding:6px 13px; border-radius:999px; margin-bottom:20px;
}
.ty-body{flex:1; padding-bottom:clamp(40px,6vw,72px)}
.cal{
  margin-top:clamp(-58px,-5vw,-40px); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); overflow:hidden; position:relative; z-index:2;
}
.cal-head{padding:20px 26px; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; justify-content:space-between}
.cal-head h2{font-size:1.14rem; margin:0; letter-spacing:-.02em}
.cal-head span{font-size:.88rem; color:var(--faint); letter-spacing:0}
.cal-frame{width:100%; min-height:760px; border:0; display:block; background:var(--surface)}
.cal-fb{padding:clamp(32px,4vw,56px); text-align:center}
.cal-fb code{background:var(--surface-2); padding:2px 7px; border-radius:5px; font-family:var(--mono); font-size:.86em; color:var(--ink)}
.next{margin-top:clamp(36px,4.5vw,56px)}
.next h2{font-size:1.5rem; text-align:center; letter-spacing:-.026em}
.next-list{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px}
@media (min-width:860px){ .next-list{grid-template-columns:repeat(3,1fr)} }
.next-list li{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; font-size:.96rem; letter-spacing:-.006em}
.next-list b{display:block; color:var(--ink); margin-bottom:6px; font-size:1rem; font-weight:600; letter-spacing:-.014em}

/* ------------------------------------------------------------- mobile */
@media (max-width:600px){
  body{font-size:16px}
  .hero{padding-bottom:36px}
  .hero-inner{padding-top:26px}
  .hero h1{font-size:clamp(2.05rem,1.2rem + 4vw,2.5rem)}
  .hero-sub{font-size:1.05rem; margin-bottom:18px}
  .hero-proof{margin-bottom:26px; font-size:.88rem}
  .hero-proof li + li::before{margin:0 9px}
  .split-btn{padding:22px 20px 20px}
  .split-icon{width:34px; height:34px; margin-bottom:13px}
  .split-btn h2{font-size:1.2rem}
  .split-go{margin-top:14px}
  .hero-foot{margin-top:18px; font-size:.85rem}
  .faq summary{font-size:1rem; padding-right:38px}
  .faq-a{padding-right:28px}
}

/* anchored jumps clear the sticky bar */
#book-agency,#book-business,#cost{scroll-margin-top:calc(var(--bar) + 12px)}

.center{text-align:center}
.hide{display:none !important}
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}


/* ======================================================================
   PART 2 — the Starboys-shaped layer
   Big centred headlines with a gradient accent, a pill badge above them,
   marquees, dense service grids with tick bullets, counters and case
   cards. Same brand tokens, considerably more energy.
   ====================================================================== */

/* ---------------------------------------------------------------- nav */
.nav{
  position:sticky; top:0; z-index:60; background:rgba(254,254,254,.97);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; gap:18px; height:70px}
.nav .logo{height:26px}
.nav-links{display:none; gap:26px; margin-left:auto}
@media (min-width:1000px){ .nav-links{display:flex} }
.nav-links a{
  font-size:.95rem; font-weight:520; color:var(--ink-2); letter-spacing:-.01em;
  text-decoration:none; transition:color .15s ease;
}
.nav-links a:hover{color:var(--accent); text-decoration:none}
.nav-cta{margin-left:auto}
@media (min-width:1000px){ .nav-cta{margin-left:26px} }

/* -------------------------------------------------------------- badge */
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  background:var(--surface); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size:.86rem; font-weight:560; color:var(--accent); letter-spacing:-.008em; margin-bottom:22px;
  box-shadow:0 2px 10px -4px color-mix(in srgb, var(--accent) 40%, transparent);
}
.badge svg{width:15px; height:15px; fill:currentColor}
.badge b{font-weight:680}

/* ------------------------------------------------------ gradient text
   Orange and blue are complementary, so blending them across a headline
   lands on muddy purple in the middle. Each context ramps within its own
   hue family instead, and returns to the start colour so the animation
   loops without a seam. */
:root{ --grad-1:var(--orange); --grad-2:#FF9A2E; }
#path-agency{ --grad-1:var(--blue); --grad-2:#3FBDFF; }
#path-business{ --grad-1:var(--orange); --grad-2:#FF9A2E; }

.grad{
  background:linear-gradient(100deg, var(--grad-1) 0%, var(--grad-2) 50%, var(--grad-1) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% 100%; animation:grad 7s ease-in-out infinite;
}
@keyframes grad{0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){ .grad{animation:none} }

/* ------------------------------------------------------------ big hero */
.bighero{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(52px,7vw,104px) 0 clamp(48px,6vw,84px);
  background:
    radial-gradient(900px 460px at 22% -8%, rgba(255,80,39,.09), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(27,114,243,.11), transparent 62%),
    linear-gradient(180deg, #F4F7FE 0%, var(--surface) 72%);
}
.bighero h1{
  font-size:clamp(2.4rem,1.4rem + 4.4vw,4.4rem); line-height:1.02; letter-spacing:-.04em;
  font-weight:680; max-width:17ch; margin:0 auto .5em; text-wrap:balance;
}
.bighero .lead{max-width:60ch; margin:0 auto 32px; font-size:clamp(1.06rem,1rem + .4vw,1.24rem)}
.bighero .cta-row{justify-content:center}

/* ------------------------------------------------------------ marquee */
.marquee{
  overflow:hidden; padding:22px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{display:flex; width:max-content; align-items:center; animation:marq 44s linear infinite}
@keyframes marq{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
.marquee:hover .marquee-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none} }
.marquee-item{
  display:flex; align-items:center; gap:10px; padding:0 30px; white-space:nowrap;
  font-size:1.02rem; font-weight:590; color:var(--grey); letter-spacing:-.015em;
}
.marquee-item i{width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none}
.marquee-label{
  text-align:center; font-size:.78rem; font-weight:620; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint); margin:clamp(30px,4vw,52px) 0 4px;
}

/* ----------------------------------------------------------- counters */
.counters{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line)}
@media (min-width:900px){ .counters{grid-template-columns:repeat(4,1fr)} }
.counter{background:var(--surface); padding:clamp(28px,3.4vw,44px) 20px; text-align:center}
.counter b{
  display:block; font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem); font-weight:680; color:var(--ink);
  letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums;
}
.counter span{display:block; margin-top:10px; font-size:.9rem; color:var(--grey); letter-spacing:-.005em}

/* ------------------------------------------------------ service cards */
.svc{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:620px){ .svc{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .svc{grid-template-columns:repeat(4,1fr)} }
.svc-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:24px 22px; display:flex; flex-direction:column;
  transition:transform .2s cubic-bezier(.22,.9,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.svc-card:hover{
  transform:translateY(-4px); box-shadow:0 18px 40px -16px rgba(0,0,0,.22);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
}
.svc-i{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  margin-bottom:15px; background:var(--accent-wash);
}
.svc-i svg{width:19px; height:19px; fill:none; stroke:var(--accent); stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round}
.svc-card h3{font-size:1.03rem; margin:0 0 .35em; letter-spacing:-.018em}
.svc-card p{font-size:.92rem; margin:0 0 14px; color:var(--body); letter-spacing:-.005em; line-height:1.5}
.svc-ticks{list-style:none; margin:auto 0 0; padding:12px 0 0; border-top:1px solid var(--line); display:grid; gap:7px}
.svc-ticks li{display:flex; gap:8px; align-items:flex-start; font-size:.85rem; color:var(--grey); letter-spacing:-.004em}
.svc-ticks svg{flex:none; width:14px; height:14px; margin-top:3px; fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}

/* ------------------------------------------------------- case studies */
.cases{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:700px){ .cases{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .cases{grid-template-columns:repeat(3,1fr)} }
.case{
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px 24px;
  display:flex; flex-direction:column;
  transition:transform .2s cubic-bezier(.22,.9,.3,1), box-shadow .2s ease;
}
.case:hover{transform:translateY(-4px); box-shadow:0 20px 46px -18px rgba(0,0,0,.24)}
.case-tag{
  display:inline-block; font-size:.7rem; font-weight:620; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-wash); padding:5px 9px; border-radius:5px; margin-bottom:16px;
}
.case h3{font-size:1.06rem; margin:0 0 4px; letter-spacing:-.02em}
.case-who{font-size:.85rem; color:var(--faint); margin:0 0 16px; letter-spacing:0}
.case-metrics{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:11px}
.case-metrics li{display:flex; align-items:baseline; gap:11px; font-size:.9rem; color:var(--body); line-height:1.4}
.case-metrics b{
  font-size:1.22rem; font-weight:680; color:var(--accent); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1; flex:none;
}
.case > p{font-size:.89rem; margin:auto 0 0; padding-top:14px; border-top:1px solid var(--line); color:var(--grey)}

/* --------------------------------------------------------- industries */
.inds{display:grid; gap:0 44px; grid-template-columns:1fr}
@media (min-width:820px){ .inds{grid-template-columns:1fr 1fr} }
.ind{
  display:flex; align-items:center; gap:14px; padding:20px 4px;
  border-bottom:1px solid var(--line); transition:padding-left .2s ease;
}
.ind:hover{padding-left:12px}
.ind svg{flex:none; width:22px; height:22px; fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.ind b{font-size:1.06rem; font-weight:590; color:var(--ink); letter-spacing:-.018em}
.ind span{margin-left:auto; font-size:.85rem; color:var(--faint); letter-spacing:0; text-align:right}

/* ------------------------------------------------------- pricing hero */
.pricehero{text-align:center}
.pricehero .kicker{
  font-size:.8rem; font-weight:680; letter-spacing:.09em; text-transform:uppercase;
  color:var(--orange); margin:0 0 12px;
}
.pricehero h2{max-width:22ch; margin:0 auto .35em}
.pricehero .was{
  font-size:1.3rem; color:var(--faint); text-decoration:line-through;
  text-decoration-color:var(--orange); text-decoration-thickness:2px; margin:0 0 14px;
}

/* ------------------------------------------------------------- spiral
   The acquisition death-spiral. Each step indents further and the rail
   warms toward the brand orange, so the list reads as a descent rather
   than a bullet list. */
.spiral{
  background:var(--deep); color:rgba(255,255,255,.72);
  border-radius:var(--radius-xl); padding:clamp(30px,4.2vw,62px);
  position:relative; overflow:hidden;
}
.spiral::after{
  content:""; position:absolute; inset:auto -10% -40% auto; width:70%; height:70%;
  pointer-events:none;
  background:radial-gradient(60% 60% at 70% 80%, rgba(255,80,39,.16), transparent 70%);
}
.spiral > *{position:relative; z-index:1}
.spiral h2{color:#fff; max-width:24ch; text-wrap:balance}
.spiral .lead{color:rgba(255,255,255,.66); max-width:56ch}

.spiral-steps{list-style:none; counter-reset:s; margin:clamp(26px,3.2vw,42px) 0 0; padding:0}
.spiral-steps li{
  counter-increment:s; position:relative; padding:12px 0 12px 44px;
  border-left:2px solid rgba(255,255,255,.13);
  font-size:clamp(.97rem,.93rem + .22vw,1.09rem); line-height:1.45;
  color:rgba(255,255,255,.76); letter-spacing:-.008em;
}
.spiral-steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:16px; top:14px;
  font-size:.74rem; font-weight:620; color:var(--orange); font-variant-numeric:tabular-nums;
}
@media (min-width:760px){
  .spiral-steps li:nth-child(n+2){margin-left:16px}
  .spiral-steps li:nth-child(n+4){margin-left:32px}
  .spiral-steps li:nth-child(n+6){margin-left:48px}
  .spiral-steps li:nth-child(n+8){margin-left:64px}
}
.spiral-steps li:nth-child(n+5){border-left-color:rgba(255,80,39,.35)}
.spiral-steps li:nth-child(n+8){border-left-color:rgba(255,80,39,.6)}
.spiral-steps li:last-child{
  color:#fff; font-weight:560; border-left-color:var(--orange);
}

.spiral-turn{
  margin:clamp(30px,3.4vw,46px) 0 0; padding-top:clamp(24px,3vw,36px);
  border-top:1px solid rgba(255,255,255,.16);
  font-size:clamp(1.3rem,1.02rem + 1.2vw,2rem); font-weight:620; color:#fff;
  letter-spacing:-.03em; line-height:1.24; max-width:24ch; text-wrap:balance;
}
.spiral-foot{
  margin:16px 0 0; font-size:1rem; color:rgba(255,255,255,.6);
  max-width:52ch; letter-spacing:-.008em;
}
.spiral-cite{
  margin:22px 0 0; font-size:.83rem; color:rgba(255,255,255,.42); letter-spacing:0;
}

/* ============================================ ALTERNATING SERVICE ROWS
   Numbered blocks that flip sides — odd is text-left, even is text-right.
   Dark ground so the section reads as its own chapter of the page. */
.section--dark{background:var(--deep); color:rgba(255,255,255,.72)}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark .lead{color:rgba(255,255,255,.62)}
.section--dark .eyebrow--grey{color:rgba(255,255,255,.45)}

.slist{display:grid; gap:clamp(56px,7vw,112px)}
.srow{display:grid; gap:clamp(32px,4vw,56px); grid-template-columns:1fr; align-items:center}
@media (min-width:960px){
  .srow{grid-template-columns:1fr 1fr; gap:clamp(48px,5.5vw,96px)}
  .srow:nth-child(even) .srow-text{order:2}
  .srow:nth-child(even) .srow-vis{order:1}
}

.snum{
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:1.12rem; font-weight:680;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-bottom:22px;
  box-shadow:0 8px 24px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.srow-text h3{
  font-size:clamp(1.75rem,1.25rem + 2vw,2.7rem); line-height:1.08; letter-spacing:-.032em;
  font-weight:680; margin:0 0 22px; max-width:16ch; text-wrap:balance;
}
.srow-text h3 em{font-style:normal; color:var(--accent)}
.sticks{list-style:none; margin:0 0 28px; padding:0; display:grid; gap:13px}
.sticks li{
  display:flex; gap:12px; align-items:flex-start; font-size:1.02rem; line-height:1.45;
  color:rgba(255,255,255,.8); letter-spacing:-.008em;
}
.sticks svg{
  flex:none; width:17px; height:17px; margin-top:4px; fill:none; stroke:var(--accent);
  stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round;
}

/* the layered frame from the reference: rotated block behind, outline offset */
.frame{position:relative; padding:22px}
.frame::before,.frame::after{content:""; position:absolute; pointer-events:none}
.frame::before{
  inset:0 8% 12% 0; background:var(--accent); opacity:.9; border-radius:6px;
  transform:rotate(-3.5deg);
}
.frame::after{
  inset:12% 0 0 8%; border:1.5px solid rgba(255,255,255,.35); border-radius:6px;
}
.frame-in{
  position:relative; z-index:2; background:var(--surface); border-radius:12px; overflow:hidden;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.6);
}
.frame-bar{
  display:flex; align-items:center; gap:7px; padding:11px 14px;
  border-bottom:1px solid var(--line); background:var(--surface-2);
}
.frame-bar i{width:8px; height:8px; border-radius:50%; background:var(--line-2); flex:none}
.frame-bar i:first-child{background:var(--accent)}
.frame-bar span{margin-left:6px; font-size:.76rem; font-weight:560; color:var(--grey); letter-spacing:0}
.frame-body{padding:16px 16px 18px}

/* ---- mini surfaces that sit inside the frame ---- */
.mini-rows{display:grid; gap:8px}
.mini-rows div{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px;
  background:var(--surface-2); font-size:.83rem; color:var(--ink); letter-spacing:-.004em;
}
.mini-rows b{margin-left:auto; font-size:.72rem; font-weight:620; color:var(--accent)}
.mini-rows svg{flex:none; width:14px; height:14px; fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}

.mini-chat{display:grid; gap:9px}
.mini-chat p{
  margin:0; font-size:.82rem; line-height:1.4; padding:9px 12px; border-radius:11px;
  max-width:88%; letter-spacing:-.004em;
}
.mini-chat .them{background:var(--surface-2); color:var(--ink)}
.mini-chat .us{background:var(--accent); color:#fff; margin-left:auto}

.mini-code{
  font-family:var(--mono); font-size:.74rem; line-height:1.7; color:var(--ink-2);
  background:var(--surface-2); border-radius:8px; padding:12px 13px; overflow:hidden;
}
.mini-code span{color:var(--accent)}
.mini-code em{font-style:normal; color:var(--faint)}

.mini-bars{display:flex; align-items:flex-end; gap:9px; height:104px; padding-top:6px}
/* full-height track, so the percentage fills have something to measure against */
.mini-bars i{flex:1; height:100%; background:var(--accent-wash); border-radius:4px 4px 0 0; position:relative; overflow:hidden}
.mini-bars i::after{content:""; position:absolute; inset:auto 0 0 0; background:var(--accent); border-radius:4px 4px 0 0}
.mini-bars i:nth-child(1)::after{height:34%} .mini-bars i:nth-child(2)::after{height:52%}
.mini-bars i:nth-child(3)::after{height:44%} .mini-bars i:nth-child(4)::after{height:71%}
.mini-bars i:nth-child(5)::after{height:63%} .mini-bars i:nth-child(6)::after{height:88%}
.mini-bars i:nth-child(7)::after{height:100%}
.mini-cap{margin:12px 0 0; font-size:.76rem; color:var(--faint); letter-spacing:0; display:flex; justify-content:space-between}

.mini-wire{display:grid; gap:8px}
.mini-wire i{display:block; background:var(--surface-2); border-radius:5px; height:11px}
.mini-wire i.tall{height:44px; background:var(--accent-wash)}
.mini-wire i.w60{width:60%} .mini-wire i.w40{width:40%} .mini-wire i.w80{width:80%}
.mini-wire i.pill{height:22px; width:44%; background:var(--accent); border-radius:999px}

/* ---------------------------------------------------------- quote wall
   The client-facing menu as small readable cards, flowing in columns so
   they sit to the sides of each other rather than in strict rows. */
.qwall{columns:1; column-gap:16px}
@media (min-width:620px){ .qwall{columns:2} }
@media (min-width:1020px){ .qwall{columns:4} }
.qcard{
  break-inside:avoid; margin:0 0 16px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  transition:transform .18s cubic-bezier(.22,.9,.3,1), box-shadow .18s ease;
}
.qcard:hover{transform:translateY(-3px); box-shadow:0 14px 32px -14px rgba(0,0,0,.18)}
.qcard b{
  display:inline-block; font-size:.68rem; font-weight:640; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-wash);
  padding:3px 8px; border-radius:5px; margin-bottom:9px;
}
.qcard p{
  margin:0; font-size:.94rem; line-height:1.45; color:var(--ink); letter-spacing:-.008em;
}
.qcard p::before{content:"\201C"; color:var(--accent); font-weight:700; margin-right:1px}
.qcard p::after{content:"\201D"; color:var(--accent); font-weight:700; margin-left:1px}

/* ---------------------------------------------------------- slide-ins */
.slide-l{opacity:0; transform:translateX(-26px)}
.slide-r{opacity:0; transform:translateX(26px)}
.slide-l.is-in,.slide-r.is-in{
  opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.22,.9,.3,1), transform .6s cubic-bezier(.22,.9,.3,1);
}
@media (prefers-reduced-motion:reduce){
  .slide-l,.slide-r,.slide-l.is-in,.slide-r.is-in{opacity:1; transform:none}
}