/* ================================================================
   TractionForge · Lead Generation
   Static multi-page site. One stylesheet for every page.
   ================================================================ */
:root{
  --bg:      #ffffff;
  --bg-2:    #f7f8f6;
  --line:    #e6e7e3;
  --text:    #16181d;
  --mute:    #5b6068;
  --green:   #0c7a45;
  --green-2: #095c34;
  --green-t: #ecf6f0;
  --amber:   #b45309;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --max: 1120px;
  --pad: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:80px }
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--green); text-decoration:none }
a:hover{ text-decoration:underline }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:2px }

.skip-link{ position:absolute; left:-9999px; top:0; background:var(--green); color:#fff; padding:8px 16px; z-index:200; font-weight:600 }
.skip-link:focus{ left:8px; top:8px }

/* ---- shared voice ---- */
.eyebrow{ font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green) }
.u-green{ color:var(--green) }
h1,h2,h3{ font-weight:800; line-height:1.08; letter-spacing:-.02em; overflow-wrap:break-word }
h1 em, h2 em{ font-style:normal; color:var(--green) }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad) }
.section-head{ max-width:var(--max); margin:0 auto; padding:0 var(--pad) }
.section-head h2{ font-size:clamp(28px, 4.4vw, 46px); margin-top:14px; max-width:22ch }
.section-head .lede{ color:var(--mute); margin-top:16px; max-width:58ch }
section{ padding:clamp(64px, 9vw, 110px) 0; border-top:1px solid var(--line) }
.prose p{ color:var(--mute); max-width:66ch; margin-bottom:16px }
.prose h3{ font-size:clamp(20px,2.4vw,26px); margin:34px 0 12px }
.prose ul{ list-style:none; margin:0 0 18px }
.prose li{ color:var(--mute); max-width:66ch; margin-bottom:10px; padding-left:16px; position:relative }
.prose li::before{ content:""; position:absolute; left:0; top:.65em; width:5px; height:5px; border-radius:50%; background:var(--green) }
.prose strong{ color:var(--text); font-weight:600 }

/* ---- buttons ---- */
.btn{ display:inline-block; font-size:15.5px; font-weight:600; padding:14px 26px; border-radius:8px;
  transition:transform .15s ease, background .15s ease, border-color .15s ease }
.btn-green{ background:var(--green); color:#fff }
.btn-green:hover{ background:var(--green-2); text-decoration:none; transform:translateY(-1px) }
.btn-ghost{ border:1.5px solid var(--line); color:var(--text); background:#fff }
.btn-ghost:hover{ border-color:var(--green); text-decoration:none }
.btn-lg{ padding:17px 32px; font-size:16.5px }
.btn-sm{ padding:10px 18px; font-size:14.5px }

/* ================= NAV ================= */
.nav{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:0 var(--pad); height:66px;
  display:flex; align-items:center; gap:28px;
}
.nav-logo{ font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--text) }
.nav-logo:hover{ text-decoration:none }
.nav-logo span{ color:var(--green) }
.nav-links{ display:flex; align-items:center; gap:24px; margin-left:auto; list-style:none }
.nav-links a{ font-size:14.5px; font-weight:500; color:var(--text) }
.nav-links a:hover{ color:var(--green); text-decoration:none }
.nav-links a[aria-current="page"]{ color:var(--green); font-weight:600 }
.nav-toggle{ display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:7px; padding:8px 12px; font:inherit; font-size:14px; font-weight:600; cursor:pointer }
/* dropdown */
.nav-drop{ position:relative }
.nav-drop > button{
  background:none; border:none; font:inherit; font-size:14.5px; font-weight:500;
  color:var(--text); cursor:pointer; padding:0; display:flex; align-items:center; gap:5px;
}
.nav-drop > button:hover{ color:var(--green) }
.nav-drop-menu{
  position:absolute; top:calc(100% - 4px); left:-16px; min-width:280px; background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:8px; list-style:none;
  box-shadow:0 12px 40px rgba(0,0,0,.10); display:none;
}
.nav-drop[open] .nav-drop-menu,
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.open .nav-drop-menu{ display:block }
.nav-drop-menu a{ display:block; padding:10px 12px; border-radius:8px; font-size:14.5px }
.nav-drop-menu a:hover{ background:var(--bg-2); text-decoration:none }
.nav-drop-menu .nd-sub{ display:block; font-size:12.5px; color:var(--mute); font-weight:400; margin-top:2px }

/* ================= HOME HERO + FORM ================= */
.hero{ padding:clamp(44px,6vw,72px) 0 clamp(48px,7vw,76px) }
.hero-grid{
  max-width:var(--max); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:start;
}
.hero h1{ font-size:clamp(34px, 4.8vw, 58px); margin:16px 0 20px; max-width:16ch }
.hero-sub{ font-size:clamp(16.5px,1.9vw,20px); color:var(--mute); max-width:52ch }
.hero-points{ list-style:none; margin:26px 0 0 }
.hero-points li{ font-size:15.5px; font-weight:500; margin-bottom:10px; padding-left:26px; position:relative }
.hero-points li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--green); font-weight:700;
}
.hero-note{ margin-top:24px; font-size:13.5px; color:var(--mute); max-width:44ch }

/* ---- the qualifying form ---- */
.form-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
  padding:clamp(22px,3vw,30px); position:sticky; top:86px;
  scroll-margin-top:88px;
}
.form-step-label{ font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--green) }
.form-card h2{ font-size:clamp(22px,2.4vw,27px); margin:8px 0 6px }
.form-card .form-sub{ font-size:14px; color:var(--mute); margin-bottom:20px }
.fld{ margin-bottom:16px }
.fld label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:7px }
.lbl-opt{ font-weight:500; font-size:12px; color:var(--mute); text-transform:lowercase }
.fld input, .fld select{
  width:100%; font:inherit; font-size:15px; padding:12px 13px; border-radius:9px;
  border:1.5px solid var(--line); background:#fff; color:var(--text);
}
.fld input:focus, .fld select:focus{ border-color:var(--green); outline:none }
.fld-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.fld-sub{ margin-top:12px; margin-bottom:0; padding-left:12px; border-left:2px solid var(--line) }
/* Only hidden when JS can reveal it again - no-JS visitors get a plain optional field. */
.js .fld-sub{ display:none }
.js .fld-sub.on{ display:block }
.pill-group{ display:flex; gap:8px; flex-wrap:wrap }
.pill-group input{ position:absolute; opacity:0; width:0; height:0 }
.pill-group label{
  margin:0; padding:9px 15px; border:1.5px solid var(--line); border-radius:999px;
  background:#fff; font-size:14px; font-weight:500; cursor:pointer; transition:.15s;
}
.pill-eg{ display:block; font-size:11.5px; font-weight:500; color:var(--mute); letter-spacing:0; margin-top:1px }
.pill-group input:checked + label{ border-color:var(--green); background:var(--green-t); color:var(--green); font-weight:600 }
.pill-group input:checked + label .pill-eg{ color:var(--green); opacity:.75 }
.pill-group input:focus-visible + label{ outline:2px solid var(--green); outline-offset:2px }
.form-actions{ margin-top:22px; display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.form-back{ background:none; border:none; font:inherit; font-size:14px; font-weight:600; color:var(--mute); cursor:pointer }
.form-back:hover{ color:var(--green) }
.form-fine{ margin-top:14px; font-size:12.5px; color:var(--mute) }
.form-step[hidden]{ display:none }
.form-err{ color:var(--amber); font-size:13px; font-weight:600; margin-top:10px }
.form-done{ text-align:center; padding:34px 10px }
.form-done h2{ margin-bottom:12px }
.form-done p{ color:var(--mute); font-size:15px; max-width:38ch; margin:0 auto }
.form-done .done-next{ margin-top:14px; font-size:13.5px; font-weight:600; color:var(--green) }
.done-tick{
  width:52px; height:52px; margin:0 auto 18px; border-radius:50%;
  background:var(--green); color:#fff; font-size:26px; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
  animation:tickPop .45s cubic-bezier(.2,.9,.3,1.3) both;
}
@keyframes tickPop{ from{ transform:scale(.5); opacity:0 } to{ transform:scale(1); opacity:1 } }
@media (prefers-reduced-motion: reduce){ .done-tick{ animation:none } }
.hp{ position:absolute; left:-9999px }

/* ---- sector strip (in place of a logo wall) ---- */
.sectors{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); padding:28px 0 30px }
.sectors-inner{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); text-align:center }
.sectors-label{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--mute) }
.sectors-list{ margin-top:12px; display:flex; gap:10px 30px; justify-content:center; flex-wrap:wrap;
  font-size:15.5px; font-weight:700; letter-spacing:-.01em }
.sectors-list span{ white-space:nowrap }
.sectors-list span::before{ content:"· "; color:var(--green) }

/* ---- stat band ---- */
.statband{
  max-width:var(--max); margin:0 auto; padding:clamp(44px,6vw,64px) var(--pad) 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(24px,5vw,56px);
}
.stat-num{ display:block; font-weight:800; font-variant-numeric:tabular-nums;
  font-size:clamp(30px, 4.2vw, 50px); color:var(--green); line-height:1; letter-spacing:-.02em }
.stat-label{ display:block; margin-top:10px; font-size:12.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--mute); max-width:24ch }

/* ================= PROBLEM AGITATION ================= */
.problems{ background:var(--bg-2) }
.problem-grid{
  max-width:var(--max); margin:clamp(40px,6vw,60px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px;
}
.problem{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:26px }
.problem h3{ font-size:19px; margin-bottom:10px; letter-spacing:-.01em }
.problem p{ font-size:14.5px; color:var(--mute) }
.problem-turn{
  max-width:var(--max); margin:clamp(40px,6vw,56px) auto 0; padding:0 var(--pad);
  font-size:clamp(19px,2.4vw,26px); font-weight:700; line-height:1.4; max-width:46ch;
}
.problem-turn span{ color:var(--green) }

/* ================= PROOF ================= */
.flagship{ max-width:var(--max); margin:clamp(48px,7vw,80px) auto 0; padding:0 var(--pad) }
.case-kicker{ font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-bottom:14px }
.flagship-num{ font-weight:800; font-variant-numeric:tabular-nums;
  font-size:clamp(32px, 5.6vw, 66px); line-height:1.05; letter-spacing:-.03em }
.flagship-num .to{ color:var(--green) }
.flag-in{ font-size:.4em; color:var(--mute); font-weight:600; letter-spacing:0 }
.flagship-sub{ color:var(--mute); margin-top:14px; max-width:56ch }

.metric-strip{
  margin-top:36px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:12px; padding:clamp(22px,3.5vw,34px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;
}
.metric-num{ display:block; font-weight:800; font-variant-numeric:tabular-nums;
  font-size:clamp(24px,3.2vw,38px); color:var(--green); line-height:1.05; letter-spacing:-.02em }
.metric-label{ display:block; margin-top:8px; font-size:12.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--mute) }
.source-tag{ font-size:12.5px; font-weight:500; color:var(--mute); margin-top:14px; text-align:right }

.proof-shot{ display:block; margin-top:20px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; cursor:zoom-in }
.proof-shot img{ width:100% }
.shot-cap{ display:block; padding:12px 16px; font-size:13px; font-weight:500; color:var(--mute); border-top:1px solid var(--line) }

.case-detail{ margin-top:24px; border-top:1px solid var(--line) }
.case-detail summary{ cursor:pointer; padding:16px 0; font-weight:600; font-size:15px; color:var(--green); list-style:none }
.case-detail summary::-webkit-details-marker{ display:none }
.case-detail summary::after{ content:" +"; color:var(--mute) }
.case-detail[open] summary::after{ content:" −" }
.snar p{ margin-bottom:12px; color:var(--mute); max-width:66ch }
.snar strong{ color:var(--text); font-weight:700 }

.case-grid{
  max-width:var(--max); margin:clamp(40px,6vw,56px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
}
.case-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  padding:26px; display:flex; flex-direction:column; min-width:0 }
.case-num{ font-variant-numeric:tabular-nums; font-size:clamp(22px,2.6vw,30px); margin:4px 0 12px }
.case-line{ color:var(--mute); font-size:15px }
.case-grid.case-grid-wide{ grid-template-columns:1fr }
.case-card.todo{ border-style:dashed; background:#fff }
.case-card.todo .case-num{ color:var(--mute) }

/* ================= CREATIVE WALL ================= */
.creative-wall{
  max-width:var(--max); margin:clamp(40px,6vw,56px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px;
}
.creative{
  aspect-ratio:4/5; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--bg-2);
}
.creative img{ width:100%; height:100%; object-fit:cover }
.creative.slot{
  border-style:dashed; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:14px; font-size:12.5px; font-weight:600; color:var(--mute); line-height:1.4;
}

/* ================= SERVICES / PILLARS ================= */
.pillars{
  max-width:var(--max); margin:clamp(40px,6vw,64px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
}
.pillar{ background:var(--bg); border:1px solid var(--line); border-radius:12px;
  padding:clamp(24px,3.5vw,34px); display:flex; flex-direction:column; min-width:0 }
.pillar:hover{ border-color:var(--green) }
.pillar-name{ font-weight:800; font-size:clamp(19px,2.1vw,24px); letter-spacing:-.01em; margin-bottom:10px }
.pillar-line{ color:var(--mute); font-size:15px }
.pillar-link{ margin-top:auto; padding-top:20px; font-size:14.5px; font-weight:600; color:var(--green) }

/* ================= PROCESS ================= */
.process{ background:var(--bg-2) }
.timeline{
  max-width:var(--max); margin:clamp(40px,6vw,64px) auto 0; padding:0 var(--pad);
  list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px;
}
.tl-item{ border-top:2px solid var(--line); padding-top:20px; position:relative; min-width:0 }
.tl-item::before{ content:""; position:absolute; top:-5px; left:0; width:8px; height:8px; background:var(--green); border-radius:50% }
.tl-year{ font-weight:800; font-size:20px; color:var(--green); font-variant-numeric:tabular-nums }
.tl-head{ font-weight:700; font-size:17.5px; margin:10px 0 8px; letter-spacing:-.01em }
.tl-body{ color:var(--mute); font-size:14.5px }
.process-note{ margin:clamp(40px,6vw,60px) auto 0; padding:0 var(--pad); max-width:calc(62ch + 2 * var(--pad));
  font-size:clamp(17px,2vw,22px); font-weight:600; line-height:1.45 }
.process-note span{ color:var(--green) }

/* ================= FAQ ================= */
.qa{ max-width:820px; margin:clamp(36px,5vw,56px) auto 0; padding:0 var(--pad) }
.qa-item{ border-top:1px solid var(--line); padding:26px 0 }
.qa-item dt{ font-weight:700; font-size:clamp(18px,2.1vw,22px); letter-spacing:-.01em; margin-bottom:10px }
.qa-item dd{ color:var(--mute); max-width:64ch }

/* ================= PAGE HERO (sub-pages) ================= */
.page-hero{ padding:clamp(48px,6vw,80px) 0 clamp(36px,5vw,56px); border-bottom:1px solid var(--line) }
.page-hero h1{ font-size:clamp(32px,4.6vw,54px); margin:14px 0 18px; max-width:18ch }
.page-hero .lede{ font-size:clamp(16.5px,1.9vw,20px); color:var(--mute); max-width:58ch }
.page-hero .btn{ margin-top:28px }
.crumb{ font-size:13px; font-weight:500; color:var(--mute) }
.crumb a{ color:var(--mute) }
.crumb a:hover{ color:var(--green) }

/* ================= CLOSE / CTA ================= */
.close{ text-align:center; padding-left:var(--pad); padding-right:var(--pad); background:var(--green-t) }
.close-title{ font-size:clamp(30px,4.6vw,54px); max-width:20ch; margin:0 auto }
.close-offer{ color:var(--mute); max-width:56ch; margin:22px auto 0 }
.close-offer strong{ color:var(--text) }
.close-actions{ margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap }

/* ---- footer ---- */
.footer{ border-top:1px solid var(--line); background:var(--bg-2); padding:clamp(44px,6vw,64px) 0 32px }
.footer-grid{ max-width:var(--max); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px }
.footer-brand .nav-logo{ font-size:19px }
.footer-blurb{ margin-top:12px; font-size:14px; color:var(--mute); max-width:34ch }
.footer-contact{ margin-top:16px; font-size:14.5px; font-weight:500 }
.footer h4{ font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-bottom:14px }
.footer ul{ list-style:none }
.footer li{ margin-bottom:9px }
.footer li a{ font-size:14.5px; color:var(--text) }
.footer li a:hover{ color:var(--green); text-decoration:none }
.footer-fine{ max-width:var(--max); margin:36px auto 0; padding:20px var(--pad) 0;
  border-top:1px solid var(--line); font-size:13px; color:var(--mute); display:flex;
  justify-content:space-between; gap:14px; flex-wrap:wrap }

/* ---- floating CTA ---- */
.float-cta{
  position:fixed; right:16px; bottom:16px; z-index:90; background:#fff;
  border:1.5px solid var(--green); color:var(--text); font-size:14px; font-weight:600;
  padding:11px 18px; border-radius:999px; display:flex; align-items:center; gap:9px;
  box-shadow:0 6px 24px rgba(0,0,0,.12);
  transform:translateY(90px); opacity:0; transition:transform .35s ease, opacity .35s ease;
}
.float-cta.on{ transform:none; opacity:1 }
.float-cta:hover{ text-decoration:none; background:var(--green-t) }
.float-dot{ width:8px; height:8px; border-radius:50%; background:var(--green) }

/* ---- reveals ---- */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease }
.js .reveal.d1{ transition-delay:.1s } .js .reveal.d2{ transition-delay:.2s } .js .reveal.d3{ transition-delay:.3s }
.js .reveal.in{ opacity:1; transform:none }

/* ---- responsive ---- */
@media (max-width: 1000px){
  .hero-grid{ grid-template-columns:1fr; gap:40px }
  .form-card{ position:static }
  .problem-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .creative-wall{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .case-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px }
}
@media (max-width: 860px){
  .nav-links{
    display:none; position:absolute; top:66px; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
    gap:0; padding:8px var(--pad) 18px;
  }
  .nav-links.open{ display:flex }
  .nav-links > li{ border-top:1px solid var(--line) }
  .nav-links > li > a, .nav-drop > button{ display:block; width:100%; padding:13px 0; font-size:16px }
  .nav-links .btn{ margin-top:14px; text-align:center }
  .nav-toggle{ display:block; min-height:42px }
  /* mobile: full-height sheet, scrollable, accordion groups */
  .nav-links{ max-height:calc(100dvh - 66px); overflow-y:auto; -webkit-overflow-scrolling:touch;
    box-shadow:0 18px 40px rgba(0,0,0,.10) }
  body.nav-open{ overflow:hidden }
  .nav-drop > button{ display:flex; width:100%; justify-content:space-between; align-items:center; min-height:48px; padding:13px 0; font-size:16px }
  .nav-drop > button span[aria-hidden]{ transition:transform .18s ease }
  .nav-drop.mob-open > button span[aria-hidden]{ transform:rotate(180deg) }
  .nav-drop-menu{ position:static; display:none; border:none; box-shadow:none;
    padding:2px 0 12px 2px; min-width:0 }
  .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu, .nav-drop.open .nav-drop-menu{ display:none }
  .nav-drop.mob-open .nav-drop-menu{ display:block }
  .nav-drop-menu a{ padding:12px 12px; min-height:48px; background:var(--bg-2); margin-bottom:6px }
  .nav-links > li > a{ min-height:48px; display:flex; align-items:center }
  .nav-links .btn{ min-height:50px; display:flex; align-items:center; justify-content:center }
  .timeline{ grid-template-columns:1fr; gap:0 }
  .tl-item{ border-top:none; border-left:2px solid var(--line); padding:0 0 32px 22px }
  .tl-item:last-child{ padding-bottom:6px }
  .tl-item::before{ top:6px; left:-5px }
  .pillars{ grid-template-columns:1fr }
  .statband{ gap:14px }
  .stat-label{ font-size:10.5px }
  .metric-strip{ grid-template-columns:1fr; gap:20px }
}
@media (max-width: 560px){
  .statband{ grid-template-columns:1fr; gap:24px }
  .stat-label{ font-size:12.5px }
  .problem-grid, .case-grid{ grid-template-columns:1fr }
  .creative-wall{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .footer-grid{ grid-template-columns:1fr }
  .fld-row{ grid-template-columns:1fr }
  .close-actions .btn{ width:100% }
  .float-cta{ right:12px; bottom:12px }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .js .reveal{ opacity:1; transform:none; transition:none }
  .float-cta{ transition:none }
}

/* ---- dropdown hover bridge: keeps the menu open while the cursor travels to it ---- */
@media (min-width: 861px){
  .nav-drop{ padding:16px 0; margin:-16px 0 }
  .nav-drop-menu::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px }
}

/* ---- comparison table: typical agency vs us ---- */
.vs-wrap{ max-width:var(--max); margin:44px auto 0; padding:0 var(--pad) }
.vs-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden }
.vs-table th, .vs-table td{ padding:16px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:15.5px; vertical-align:top }
.vs-table tr:last-child th, .vs-table tr:last-child td{ border-bottom:0 }
.vs-table thead th{ font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); background:var(--bg-2) }
.vs-table thead th.vs-us{ color:var(--green) }
.vs-table tbody th{ font-weight:600; color:var(--text); width:30% }
.vs-table td.vs-them{ color:var(--mute); width:33% }
.vs-table td.vs-us{ color:var(--text); font-weight:600; width:37%; background:var(--green-t) }
.vs-note{ max-width:var(--max); margin:20px auto 0; padding:0 var(--pad); color:var(--mute); font-size:15.5px }
@media (max-width: 860px){
  /* Three columns cannot survive a phone. Each row becomes a card with its own
     generated labels, so the header row is dropped entirely. */
  .vs-table{ border:0; background:none; border-radius:0 }
  .vs-table thead{ display:none }
  .vs-table tbody{ display:block }
  .vs-table tr{ display:block; background:#fff; border:1px solid var(--line);
    border-radius:12px; padding:16px 16px 14px; margin-bottom:12px }
  .vs-table tr:last-child{ margin-bottom:0 }
  .vs-table tbody th{ display:block; width:auto; border:0; text-align:left;
    padding:0 0 12px; font-size:16px; font-weight:700; line-height:1.3; color:var(--text) }
  .vs-table td{ display:block; width:auto; border:0; padding:0; text-align:left }
  .vs-table td::before{ display:block; font-size:11px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; margin-bottom:3px }
  .vs-table td.vs-them{ color:var(--mute); font-size:14.5px; padding:0 0 12px }
  .vs-table td.vs-them::before{ content:"Typical agency"; color:var(--mute) }
  .vs-table td.vs-us{ background:var(--green-t); border-radius:8px; padding:11px 13px;
    font-size:14.5px; font-weight:600; color:var(--text) }
  .vs-table td.vs-us::before{ content:"Us"; color:var(--green) }
}

/* ---- specs: scannable label + one-line answer, replaces walls of prose ---- */
.specs{ max-width:var(--max); margin:36px auto 0; padding:0 var(--pad); list-style:none }
.specs > li{ display:grid; grid-template-columns:minmax(0,7.5rem) minmax(0,1fr); gap:clamp(16px,4vw,44px);
  padding:22px 0; border-top:1px solid var(--line) }
.specs > li:last-child{ border-bottom:1px solid var(--line) }
.spec-k{ font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); padding-top:3px }
.spec-v h3{ font-size:clamp(17px,2vw,20px); font-weight:700; letter-spacing:-.01em }
.spec-v p{ color:var(--mute); margin-top:7px; max-width:60ch }
.spec-v p strong{ color:var(--text); font-weight:600 }
@media (max-width: 860px){
  .specs > li{ grid-template-columns:1fr; gap:6px; padding:18px 0 }
  .spec-k{ padding-top:0 }
}

/* ---- named client chips ---- */
.clients{ max-width:var(--max); margin:34px auto 0; padding:0 var(--pad) }
.clients-label{ font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-bottom:14px }
.clients-list{ display:flex; flex-wrap:wrap; gap:9px; list-style:none }
.clients-list li{ border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:14.5px; font-weight:500; background:#fff }

/* ---- named stack list (channel pages) ---- */
.stack{ max-width:var(--max); margin:32px auto 0; padding:0 var(--pad);
  display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)) }
.stack-item{ border:1px solid var(--line); border-radius:12px; padding:20px 22px; background:#fff }
.stack-item h3{ font-size:16.5px; font-weight:700; letter-spacing:-.01em }
.stack-item p{ color:var(--mute); font-size:15px; margin-top:8px }
.stack-item code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13.5px; color:var(--green-2); background:var(--green-t); padding:1px 6px; border-radius:4px }

/* ---- mobile polish: no horizontal overflow, comfortable tap targets ---- */
@media (max-width: 860px){
  .clients-list li{ font-size:13.5px; padding:7px 13px }
  .sectors-list span{ font-size:13.5px }
  .stack{ grid-template-columns:1fr }
  .metric-strip{ padding:20px }
  .btn{ min-height:46px; display:inline-flex; align-items:center; justify-content:center }
  .close-actions{ flex-direction:column; align-items:stretch }
  .close-actions .btn{ width:100% }
  .proof-shot img{ border-radius:8px }
  table{ max-width:100% }
  pre, code{ overflow-wrap:anywhere }
}
@media (max-width: 420px){
  .specs > li{ padding:16px 0 }
  .spec-v h3{ font-size:16.5px }
}
/* nothing may push the page sideways */
html, body{ max-width:100%; overflow-x:hidden }
img, table, iframe{ max-width:100% }

/* ---- results table: sector rows ---- */
.res-table tbody th{ width:30% }
.res-table td:first-of-type{ width:16%; color:var(--mute); white-space:nowrap }

@media (max-width: 860px){
  .res-table{ border:0; background:none; border-radius:0 }
  .res-table thead{ display:none }
  .res-table tbody{ display:block }
  .res-table tr{ display:block; background:#fff; border:1px solid var(--line);
    border-radius:12px; padding:18px 18px 15px; margin-bottom:12px }
  .res-table tr:last-child{ margin-bottom:0 }
  .res-table tbody th{ display:block; width:auto; border:0; text-align:left;
    padding:0 0 6px; font-size:16.5px; font-weight:700; line-height:1.25 }
  .res-table td{ display:block; width:auto; border:0; padding:0; text-align:left }
  .res-table td:first-of-type{ font-size:11px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--green); margin-bottom:9px; white-space:normal }
  .res-table td:last-of-type{ font-size:14.5px; color:var(--mute); line-height:1.6 }
}

/* ---- client marquee ---- */
.marquee{ margin-top:14px; overflow:hidden; position:relative;
  -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; width:max-content; animation:marquee 30s linear infinite }
.marquee-set{ display:flex; align-items:center; flex:0 0 auto }
.mq-item{ display:inline-flex; align-items:center; white-space:nowrap;
  padding:0 clamp(18px,3vw,34px); font-size:15.5px; font-weight:700; letter-spacing:-.01em;
  color:var(--text) }
.mq-item::after{ content:"·"; margin-left:clamp(18px,3vw,34px); color:var(--green); font-weight:700 }
img.mq-item{ height:clamp(24px,3.2vw,34px); width:auto; padding:0; margin:0 clamp(18px,3vw,34px);
  filter:grayscale(1); opacity:.7 }
img.mq-item::after{ content:none }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.sectors:hover .marquee-track{ animation-play-state:paused }
/* Motion off: fall back to a static wrapped list, second copy hidden. */
@media (prefers-reduced-motion: reduce){
  .marquee{ -webkit-mask-image:none; mask-image:none }
  .marquee-track{ animation:none; width:auto; justify-content:center }
  .marquee-set[aria-hidden="true"]{ display:none }
  .marquee-set{ flex-wrap:wrap; justify-content:center }
}

/* ================= MOBILE ALIGNMENT & OVERFLOW PASS =================
   Rule of thumb used throughout:
   - anything you READ is left-aligned (body copy, tables, lists, cards)
   - centre is reserved for short standalone blocks (hero CTA, close section,
     the client strip label) where a centred line reads as deliberate
   - nothing is justified: it opens rivers of white space at phone widths  */
@media (max-width: 760px){
  .source-tag{ text-align:left }                 /* right-aligned micro-copy reads as a stray on a phone */
  .close-title{ font-size:clamp(26px,7vw,34px) } /* stops long headlines breaking mid-word */
  .flagship-num{ font-size:clamp(28px,8vw,40px) }
  .flag-in{ display:block; font-size:15px; margin-top:6px }  /* was inline at .4em - unreadable small */
  .section-head h2{ max-width:100% }
  .section-head .lede{ max-width:100% }
  .problem-turn, .process-note, .vs-note{ max-width:100%; font-size:17px }
  .qa-item dt{ font-size:17.5px }
  .qa-item dd{ max-width:100% }
  .snar p, .prose p, .prose li{ max-width:100% }
  .spec-v p{ max-width:100% }
  .shot-cap{ font-size:12.5px; padding:10px 12px }
  .footer-fine{ flex-direction:column; gap:6px }
  .statband{ padding-top:36px }
  .crumb{ font-size:12.5px }
}
@media (max-width: 420px){
  .flagship-num{ font-size:clamp(26px,9vw,34px) }
  .pf-num, .stat-num{ letter-spacing:-.02em }
  .mq-item{ font-size:14.5px }
}
/* Long unbroken strings (domains, emails) must never widen the page */
.footer-contact a, .qa-item dd, .spec-v p, .prose p{ overflow-wrap:anywhere }