/* Red Star Standard — v2 design layer: civic editorial.
   Printed-paper surfaces, serif headlines, ruled grids and numbered sections, with
   information-style motion (rules that draw, bars that fill, steps that sequence, figures that count).
   Loaded after styles.css on every public page; content and markup are unchanged.
   All motion is off under prefers-reduced-motion and the site's "Pause animations" switch (html.a11y-motion). */
:root{
  --paper:#F7F3EA; --paper-2:#EFE9DB; --ink:#14213D; --rule:rgba(20,33,61,.9);
  --bg:var(--paper); --soft:var(--paper-2); --sky:var(--paper-2); --line:#D6CFBE;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Charter,Georgia,serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --r:2px; --r-lg:3px;
  --sh-1:none; --sh-2:0 14px 30px -18px rgba(20,33,61,.4); --sh-3:8px 8px 0 var(--navy);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
body{background:var(--paper);color:var(--ink)}
::selection{background:var(--accent);color:#fff}
input,select,textarea{border-radius:2px}

/* ---------- headline type ---------- */
.display,.h1,.h2,.h3,.stat b,.plan-price .price,.cta-card .h2{font-family:var(--serif)}
.display,.h1,.h2{font-weight:700;letter-spacing:-.015em;line-height:1.12;color:var(--ink)}
.hero .display{font-size:clamp(1.65rem,6.6vw,3.1rem);line-height:1.1}
@media (min-width:1025px){.hero .display{font-size:clamp(2.3rem,3.6vw,3.15rem)}}
.lead{color:#4A5468}
.h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}

/* section labels: running head with a section number */
body{counter-reset:sec}
.sec{counter-increment:sec}
.eyebrow{background:none;border:0;padding:0;border-radius:0;align-items:center;gap:10px;font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.16em;color:var(--accent)}
.eyebrow::before{margin-top:0;width:8px;height:8px;border-radius:0;background:var(--accent);box-shadow:none}
.sec .sec-head .eyebrow::before{content:counter(sec,decimal-leading-zero);width:auto;height:auto;background:none;color:var(--ink);padding-right:10px;border-right:1px solid var(--rule);line-height:1.1}
.sec.navy .eyebrow,.eyebrow.light{background:none;border:0;color:#FF8A99}
.sec.navy .sec-head .eyebrow::before,.sec.navy .eyebrow::before{color:#fff;border-color:rgba(255,255,255,.5)}
.tldr .eyebrow::before{display:none}

/* section heads sit under a heavy rule that draws in */
.sec-head{position:relative;padding-top:22px}
.sec-head::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ink);transform-origin:0 50%;transition:transform 1.1s var(--ease-out)}
.sec-head::after{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--ink);transform-origin:0 50%;transition:transform 1.1s .12s var(--ease-out)}
.js .sec-head.reveal:not(.in)::before,.js .sec-head.reveal:not(.in)::after{transform:scaleX(0)}
.sec.navy .sec-head::before,.sec.navy .sec-head::after{background:rgba(255,255,255,.85)}
.sec-head.row{align-items:flex-end}
.sec-head .h2{margin-top:6px}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.sec-head.in .h2{animation:wipe 1.1s .15s var(--ease-out) backwards}

/* ---------- top bars & nav ---------- */
.topbar{background:var(--ink)}
.nav{background:rgba(247,243,234,.94);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--rule)}
.nav.solid{border-color:var(--rule);box-shadow:none}
.v2-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:200;transform:scaleX(0);transform-origin:0 50%;background:var(--accent);pointer-events:none}
.mega{background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--ink);box-shadow:var(--sh-2)}
.drawer{background:var(--paper)}

/* ---------- buttons: flat, ruled, tactile ---------- */
.btn{border-radius:2px;font-weight:700;letter-spacing:.01em;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--accent);box-shadow:3px 3px 0 var(--ink);border:1.5px solid var(--ink)}
.btn-primary:hover{background:var(--accent-h);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn-primary:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.btn-outline,.btn-soft{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn-outline:hover,.btn-soft:hover{background:var(--ink);color:#fff;transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--accent)}
.btn-ghost{border-radius:2px}
.btn-white{border-radius:2px}

/* ---------- HOME HERO: front page ---------- */
.hero{background:var(--paper);border-bottom:3px double var(--ink)}
.hero #net{opacity:.3}
.hero>.skyline{display:none}
.hero-in{padding-top:48px;padding-bottom:64px;gap:56px}
.hero-copy{position:relative}
.hero-copy::before{content:"";position:absolute;left:-18px;top:6px;bottom:6px;width:1px;background:var(--line);display:none}
.pill-lead{background:transparent;border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0;box-shadow:none;padding:7px 2px;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.pill-lead .dot{border-radius:0;background:var(--accent);box-shadow:none;width:8px;height:8px;animation:blinkbox 2s steps(2,start) infinite}
@keyframes blinkbox{50%{opacity:.25}}
.hero .scribble{color:var(--accent)}
.hero-svc{gap:0;border:1px solid var(--rule);background:#fff}
.hero-svc a{background:transparent;border:0;border-radius:0;box-shadow:none;padding:14px 16px;position:relative}
.hero-svc a:nth-child(odd){border-right:1px solid var(--rule)}
.hero-svc a:nth-child(-n+2){border-bottom:1px solid var(--rule)}
.hero-svc a::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease-out)}
.hero-svc a:hover{background:#FFFDF6;transform:none;box-shadow:none;border-color:var(--rule)}
.hero-svc a:hover::after{transform:scaleX(1)}
.hero-svc .ico{background:transparent;border:1.5px solid var(--ink);color:var(--ink);border-radius:0}
.hero-svc b{color:var(--ink)}
.hero-proof{font-family:var(--mono);font-size:.8rem;letter-spacing:.02em}

/* hero figure: a printed exhibit with a hard shadow */
.ha-card{border-radius:2px;border:1.5px solid var(--ink);box-shadow:var(--sh-3);background:#fff}
.ha-top{background:var(--paper-2);border-bottom:1.5px solid var(--ink);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.ha-top i{border-radius:0;width:10px;height:10px;background:var(--ink)!important;box-shadow:none}
.ha-top i:nth-child(1){background:var(--accent)!important}
.st{border-radius:0}.st .n{border-radius:0;background:#fff;border:1.5px solid var(--ink)}
.st.done .n{background:var(--navy);border-color:var(--navy)}.st.goal .n{background:var(--accent);border-color:var(--accent)}
.st.now{background:var(--accent-50)}.st.now .n{border-color:var(--accent)}
.st em{border-radius:0;background:transparent;border:1px solid var(--ink);color:var(--ink);font-family:var(--mono)}
.st.now em{background:#fff;color:var(--accent);border-color:var(--accent)}
.ha-chip{border-radius:2px;border:1.5px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink)}
.ha-chart{background:
  linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 25%,
  linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/12.5% 100%}
.ha-line{stroke:var(--accent)}

/* the journey is read step by step, like a timetable */
@media (prefers-reduced-motion:no-preference){
  html:not(.a11y-motion) .hero .display .ln{animation:wipe 1.1s var(--ease-out) backwards;white-space:nowrap}
  html:not(.a11y-motion) .hero .display .ln:nth-child(1){animation-delay:.1s}
  html:not(.a11y-motion) .hero .display .ln:nth-child(2){animation-delay:.35s}
  html:not(.a11y-motion) .pill-lead,html:not(.a11y-motion) .hero .lead,html:not(.a11y-motion) .hero-svc,html:not(.a11y-motion) .hero .btn-row,html:not(.a11y-motion) .hero-proof{animation:slidein .8s var(--ease-out) backwards}
  html:not(.a11y-motion) .hero .lead{animation-delay:.5s}
  html:not(.a11y-motion) .hero-svc{animation-delay:.62s}
  html:not(.a11y-motion) .hero .btn-row{animation-delay:.74s}
  html:not(.a11y-motion) .hero-proof{animation-delay:.86s}
  html:not(.a11y-motion) .ha-card{animation:cardin 1s .3s var(--ease-out) backwards}
  html:not(.a11y-motion) .ha-path .st{animation:slidein .6s var(--ease-out) backwards}
  html:not(.a11y-motion) .ha-path .st:nth-child(1){animation-delay:.8s}
  html:not(.a11y-motion) .ha-path .st:nth-child(2){animation-delay:1.05s}
  html:not(.a11y-motion) .ha-path .st:nth-child(3){animation-delay:1.3s}
  html:not(.a11y-motion) .ha-path .st:nth-child(4){animation-delay:1.55s}
  html:not(.a11y-motion) .ha-chip{animation:slidein .7s var(--ease-out) backwards}
  html:not(.a11y-motion) .c1{animation-delay:1.4s}html:not(.a11y-motion) .c2{animation-delay:1.6s}html:not(.a11y-motion) .c3{animation-delay:1.8s}
  html:not(.a11y-motion) body{animation:pagein .6s ease-out}
}
@keyframes slidein{from{opacity:0;transform:translateX(-18px)}}
@keyframes cardin{from{opacity:0;transform:translate(14px,14px)}}
@keyframes pagein{from{opacity:0}}

/* ---------- reveal on scroll: quick, restrained ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* ---------- proof figures ---------- */
.clients-home{background:var(--paper)}
.logo-marquee{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0;background:#fff}
.stats-in{gap:0;border-top:3px solid var(--ink);border-bottom:1px solid var(--rule)}
.stats-in>li+li{border-left:1px solid var(--line)}
.stat{border:0;border-radius:0;background:transparent;position:relative;padding:22px 12px 20px;text-align:left}
.stat b{font-family:var(--serif);color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.stat:hover,.stat:focus-visible{transform:none;box-shadow:none;background:#FFFDF6}
.stat::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s .25s var(--ease-out)}
.stats-in .in .stat::after,.no-js .stat::after{transform:scaleX(1)}
.mini-quote{border-left:3px solid var(--accent);border-radius:0;font-family:var(--serif)}

/* ---------- sections ---------- */
.sec{padding:clamp(56px,7vw,92px) 0}
.sec.soft{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sec.navy{background:#0F1C3A;background-image:none;color:#E9EEF9;border-top:3px solid var(--accent)}
.sec.navy .h2{color:#fff}.sec.navy .lead{color:#BAC4DE}
.dev{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.28);border-radius:2px;position:relative}
.dev::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease-out)}
.dev:hover{background:rgba(255,255,255,.09);border-color:#fff;transform:none}
.dev:hover::after{transform:scaleX(1)}

/* ---------- cards: index cards with a printed edge ---------- */
.pillar,.card-link,.ind,.why-card,.plan,.work,.prod,.faq-item,.outcome,.dl,.fact,.post-card,.ov-card,.case,.side-card,.quick,.form,.tech,.note,.sample,.answer,.cross-link,.callout,.gl-item{
  border-radius:2px;border:1px solid var(--rule);box-shadow:none;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .2s,background-color .2s}
.pillar{border-top:4px solid var(--ink)}
.pillar::after{display:none}
.pillar,.card-link,.ind,.why-card,.work,.prod,.outcome,.dl,.post-card,.ov-card,.case{background:#fff}
.pillar:hover,.card-link:hover,.ind:hover,.why-card:hover,.plan:hover,.work:hover,.prod:hover,.outcome:hover,.dl:hover,.post-card:hover,.ov-card:hover,.case:hover{
  transform:translate(-3px,-3px);border-color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.pillar-ico,.cl-ico,.ind-ico,.step-ico,.plan-ico,.wc-ico,.dev-ico,.ph-ico,.fact-ico,.order-ico{border-radius:0}
.pillar-ico,.cl-ico,.ind-ico,.wc-ico{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.cl-more,.pillar-more{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}
.tags span,.badge,.pill,.pill.sm{border-radius:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.plan.featured{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--accent)}
.plan-tag{border-radius:0;font-family:var(--mono);letter-spacing:.1em}
.faq-item[open]{border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.growth-strip{border-radius:2px;border:1px solid var(--rule);background:#fff}
.growth-strip:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}

/* process / delivery steps: the connecting rule draws in */
.process::before{transform-origin:0 50%;transform:scaleX(0);transition:transform 1.6s var(--ease-out)}
.process.in::before,.no-js .process::before,.process:not(.reveal)::before{transform:scaleX(1)}
.step-ico{border:1.5px solid var(--ink);background:#fff}

/* tables read like printed data */
table{border-collapse:collapse}
.tbl th,.tbl thead th{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;background:var(--paper-2);border-bottom:2px solid var(--ink)}
.tbl td{border-bottom:1px solid var(--line)}

/* ---------- inner pages: masthead ---------- */
.crumbs{background:var(--paper-2);border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:.76rem;letter-spacing:.04em}
.page-hero{background:var(--paper);border-bottom:3px double var(--ink);padding:48px 0 56px}
.page-hero .h1,.page-hero h1{font-size:clamp(2rem,4.6vw,3.3rem)}
.ph-art .blob{border-radius:0;background:var(--paper-2);border:1.5px solid var(--ink);box-shadow:10px 10px 0 var(--ink);clip-path:none;animation:none}
.ph-ico{border-radius:0;background:#fff;border:1.5px solid var(--ink);color:var(--ink)}
.subnav{background:var(--paper);border-bottom:1px solid var(--rule)}
.subnav a{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}
.answer,.tldr{background:#fff;border-left:4px solid var(--accent)}
.answer-tag{border-radius:0;font-family:var(--mono);letter-spacing:.1em}
/* long-form copy: editorial reading measure */
.post .prose,.prose,article p{max-width:68ch}

/* forms (book / contact, order, idea generator) */
.fl input,.fl select,.fl textarea,.sub input{background:#fff;border:1.5px solid var(--ink);border-radius:2px}
.fl label,.fl .lab{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.form-steps span{border-radius:0;border:1.5px solid var(--ink)}
.form-steps .on{background:var(--ink);color:#fff}

/* ---------- call to action: a boxed notice ---------- */
.cta-card{background:var(--ink);background-image:none;border-radius:2px;border:1.5px solid var(--ink);box-shadow:10px 10px 0 var(--accent)}
.cta-card::before{opacity:.07}
.cta-card .h2{color:#fff}
.cta-card .btn-primary{border-color:#fff;box-shadow:3px 3px 0 #fff}
.cta-card .btn-primary:hover{box-shadow:5px 5px 0 #fff}

/* ---------- footer: colophon ---------- */
.foot{background:var(--ink);color:#C9D1E8;border-top:3px solid var(--accent)}
.foot::before{display:none}
.foot-h{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.4)}
.foot-tag{font-family:var(--serif)}
.foot-trust .badge{border-radius:0}
.to-top{border-radius:2px;border:1.5px solid var(--ink)}

/* ---------- accessibility / motion off ---------- */
html.a11y-motion .v2-progress{display:none}
html.a11y-motion .sec-head::before,html.a11y-motion .sec-head::after,html.a11y-motion .stat::after,html.a11y-motion .process::before{transform:none!important}
@media (prefers-reduced-motion:reduce){
  .v2-progress{display:none}.pill-lead .dot{animation:none}
  .sec-head::before,.sec-head::after,.stat::after,.process::before{transform:none!important}
  .reveal{transform:none}
}
@media (max-width:820px){
  .stats-in{grid-template-columns:1fr 1fr}.stats-in>li:nth-child(odd){border-left:0}
  .hero-svc{grid-template-columns:1fr}.hero-svc a:nth-child(odd){border-right:0}.hero-svc a:nth-child(-n+3){border-bottom:1px solid var(--rule)}
  .hero-in{padding-top:32px;padding-bottom:48px}
  .ha-card{box-shadow:5px 5px 0 var(--navy)}
}
@media (hover:none){.pillar:hover,.card-link:hover,.ind:hover,.why-card:hover,.plan:hover,.work:hover,.prod:hover,.outcome:hover,.dl:hover,.post-card:hover,.ov-card:hover,.case:hover,.growth-strip:hover{transform:none;box-shadow:none}}
@media (forced-colors:active){.sec-head::before,.sec-head::after,.stat::after{background:CanvasText}}

/* hero headline: leave room for the hand-drawn loop; keep the grid from being stretched by nowrap children */
.hero .display .ln:nth-child(2){margin-top:.14em}
.hero-copy,.hero-art{min-width:0}
@media (max-width:1024px){.hero-in{grid-template-columns:minmax(0,1fr)}.hero-proof{flex-wrap:wrap}}

/* =====================================================================
   INFOGRAPHIC SYSTEM
   Numbered cards, circular icon badges, lettered lists, a stat banner,
   dotted halftone corners and a faint chart-paper grid. Brand navy,
   red and paper only; no new copy is added (numbers and letters come from CSS counters).
   ===================================================================== */
:root{--navy-ink:#0F1C3A;--dot:radial-gradient(circle,var(--accent) 1.6px,transparent 2.2px)}
body{background-image:linear-gradient(rgba(20,33,61,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,33,61,.045) 1px,transparent 1px);background-size:44px 44px}

/* halftone corners on heroes */
.hero::after,.page-hero::after{content:"";position:absolute;right:0;top:0;width:min(380px,40%);height:260px;z-index:-1;pointer-events:none;
  background:var(--dot) 0 0/14px 14px;opacity:.28;
  -webkit-mask-image:radial-gradient(circle at 100% 0,#000 0,transparent 72%);mask-image:radial-gradient(circle at 100% 0,#000 0,transparent 72%)}
.hero::before{content:"";position:absolute;left:0;bottom:0;width:min(300px,30%);height:200px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,var(--brand) 1.6px,transparent 2.2px) 0 0/14px 14px;opacity:.16;
  -webkit-mask-image:radial-gradient(circle at 0 100%,#000 0,transparent 72%);mask-image:radial-gradient(circle at 0 100%,#000 0,transparent 72%)}

/* circular icon badges everywhere */
.pillar-ico,.cl-ico,.ind-ico,.wc-ico,.step-ico,.hero-svc .ico,.dev-ico,.ph-ico,.fact-ico,.order-ico{border-radius:50%}

/* ---- four pillars: numbered dark cards with a floating badge ---- */
.pillars{counter-reset:pil;padding-top:30px;gap:22px}
.pillar{counter-increment:pil;--c:var(--accent);background:var(--navy-ink);border:0;border-radius:22px;padding:30px 26px 24px;overflow:visible;color:#fff;gap:12px}
.pillar::before{content:counter(pil,decimal-leading-zero);font-family:var(--serif);font-weight:800;font-size:3.6rem;line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);margin-bottom:4px}
.pillar-ico{position:absolute;top:-26px;right:20px;width:56px;height:56px;background:var(--c);color:#fff;border:3px solid var(--paper);box-shadow:0 8px 18px -8px rgba(20,33,61,.6);transition:transform .6s var(--ease-out)}
.p-navy{--c:var(--brand)}.p-blue{--c:#0A4AB0}.p-slate{--c:#3B4C70}.p-red{--c:var(--accent)}
.pillar b{color:#fff;font-family:var(--serif);font-size:1.3rem;font-weight:700}
.pillar p{color:#B8C2DE}
.pillar ul{counter-reset:li;color:#fff;gap:8px;margin:8px 0 6px;padding-left:12px;border-left:2px dashed rgba(255,255,255,.28)}
.pillar li{counter-increment:li}
.pillar li::before{content:counter(li,lower-alpha) ".";color:#FF8A99;font-family:var(--mono);font-weight:700;margin-right:8px}
.pillar-more{color:#FF8A99;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;padding-top:10px;border-top:1px dashed rgba(255,255,255,.28)}
.pillar:hover{transform:translate(-3px,-3px);border:0;box-shadow:7px 7px 0 var(--accent)}
.pillar:hover .pillar-ico{transform:rotate(360deg) scale(1.08)}

/* ---- proof numbers: a banner like a printed infographic strip ---- */
.stats-in{background:var(--navy-ink);border:0;border-radius:26px;padding:10px 8px;position:relative;overflow:hidden;border-bottom:6px solid var(--accent)}
.stats-in::before{content:"";position:absolute;right:-20px;top:-20px;width:260px;height:160px;background:radial-gradient(circle,rgba(255,255,255,.5) 1.4px,transparent 2px) 0 0/13px 13px;opacity:.18;-webkit-mask-image:radial-gradient(circle at 100% 0,#000,transparent 70%);mask-image:radial-gradient(circle at 100% 0,#000,transparent 70%);pointer-events:none}
.stats-in>li+li{border-left:1px dashed rgba(255,255,255,.3)}
.stat{padding:24px 18px 22px;text-align:center}
.stat b{color:#fff;font-size:clamp(2.2rem,4.4vw,3.2rem)}
.stat span{color:#B8C2DE}
.stat:hover,.stat:focus-visible{background:rgba(255,255,255,.06)}
.stat::after{left:50%;right:auto;width:44px;margin-left:-22px;bottom:10px;height:4px;border-radius:2px}

/* ---- process: a route of numbered circles on a dashed line ---- */
.process::before{height:0;border-top:3px dashed var(--accent);background:none;opacity:.55;top:31px}
.step-ico{width:64px;height:64px;background:var(--navy-ink);border:3px solid var(--paper);color:#fff;box-shadow:0 10px 22px -10px rgba(20,33,61,.7),0 0 0 2px var(--navy-ink)}
.step-ico em{width:28px;height:28px;font-family:var(--serif);font-size:.9rem;border:2px solid var(--paper);top:-10px;right:-10px}
.step b{font-family:var(--serif);font-size:1.12rem}
.step:hover .step-ico{transform:scale(1.08) rotate(-6deg)}

/* ---- deliverables: big outlined numerals ---- */
.deliver{counter-reset:dlv;gap:20px}
.dl{counter-increment:dlv;border-radius:20px;border:1.5px dashed var(--ink);background:#fff;padding:22px 22px 24px}
.dl-n{background:none;border-radius:0;padding:0;font-family:var(--serif);font-size:2.8rem;line-height:.9;font-weight:800;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--accent)}
.dl:hover{border-style:solid}

/* ---- dark tile grids: numbered tiles ---- */
.dev-grid{counter-reset:dv;gap:14px}
.dev{counter-increment:dv;border-radius:18px}
.dev::before{content:counter(dv,decimal-leading-zero);font-family:var(--serif);font-weight:800;font-size:1.7rem;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5);min-width:2.3ch}

/* ---- cards that read as infographic panels ---- */
.card-link,.ind,.why-card,.outcome,.growth-strip,.work{border-radius:18px}
.cl-ico,.ind-ico,.wc-ico{background:var(--navy-ink);color:#fff;border:0}
.card-link:hover .cl-ico,.ind:hover .ind-ico,.why-card:hover .wc-ico{background:var(--accent)}
.hero-svc{border-radius:18px;overflow:hidden}
.ha-card{border-radius:20px}
.ha-chip{border-radius:999px}

@media (max-width:1024px){.pillars{grid-template-columns:1fr 1fr;row-gap:44px}}
@media (max-width:640px){.pillars{grid-template-columns:1fr}.stats-in>li+li{border-left:0}.stats-in>li:nth-child(n+3){border-top:1px dashed rgba(255,255,255,.3)}}
html.a11y-motion .pillar-ico{transition:none}
@media (forced-colors:active){.pillar::before,.dl-n,.dev::before{-webkit-text-stroke:0;color:CanvasText}}

/* ---- pillars: dashed route linking the four cards (grows in as the row enters view) ---- */
@media (min-width:1025px){
  .pillars{column-gap:46px}
  .pillar:not(:last-child)::after{display:block;content:"";position:absolute;left:100%;top:31px;width:46px;height:3px;border:0;inset:auto;
    background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 14px);transform-origin:0 50%;transition:transform .9s .4s var(--ease-out)}
  .pillar:not(:last-child)::after{inset:auto auto auto 100%}
  .js .pillars:not(.in) .pillar::after{transform:scaleX(0)}
}

/* ---- process: step cards hang from the route, badge riding the dashed line ---- */
@media (min-width:901px){
  .process{padding-bottom:6px}
  .step{margin-top:32px;padding:0 14px 20px;background:#fff;border:1.5px dashed var(--ink);border-radius:18px}
  .step-ico{margin-top:-32px}
  .step b{margin-top:8px}
  .step:hover{border-style:solid}
}
@media (max-width:900px){
  .process{gap:26px;padding-left:34px}
  .process::before{display:block;left:25px;right:auto;top:8px;bottom:8px;width:0;height:auto;border-top:0;border-left:3px dashed var(--accent);background:none;opacity:.5;transform:none!important}
  .step{flex-direction:row;text-align:left;align-items:center;gap:14px;flex-wrap:wrap}
  .step-ico{flex:none;margin-left:-62px;margin-right:0}
  .step b,.step>span:last-child{margin-top:0;max-width:none;flex:1 1 calc(100% - 40px)}
}
@media (max-width:900px){
  .process,.process.n3,.process.n4{grid-template-columns:1fr!important;gap:22px;padding-left:0}
  .process::before{left:31px}
  .step{display:block;text-align:left;min-height:64px;padding:0 0 0 84px;margin-top:0;background:none;border:0}
  .step-ico{position:absolute;left:0;top:0;margin:0}
  .step b{display:block;margin:4px 0 2px}
  .step>span:last-child{display:block;max-width:none}
}