/* ---- base.css ---- */
:root{
  --black:#000;
  --graphite:#161618;
  --ink:#1d1d1f;
  --paper:#fff;
  --mist:#f5f5f7;
  --muted:#6e6e73;           /* secondary text on light */
  --muted-d:#a1a1a6;         /* secondary text on dark */
  --line-d:rgba(255,255,255,.12);
  --blue:#0072bc;            /* brand blue: white text 5.1:1 */
  --blue-hover:#005a9c;
  --link:#0066b0;            /* links on light */
  --link-d:#3cc8ff;          /* links on dark */
  --brand-cyan:#00a8e4;
  --brand-navy:#2e2a64;
  --grad:linear-gradient(90deg,#3cc8ff 0%,#00a8e4 35%,#4c8dff 68%,#8e8cf0 100%);   /* brand, lifted for dark grounds */
  --grad-l:linear-gradient(90deg,#0090d0 0%,#0068b0 40%,#1b4a8a 72%,#2e2a64 100%); /* brand, for light grounds */
  --conic:conic-gradient(from 180deg,#00a8e4,#0072bc,#2e2a64,#3cc8ff,#00a8e4);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.8,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px;-webkit-text-size-adjust:100%}
body{background:var(--black);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.5;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:#0072bc;color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:10px;z-index:200;background:#fff;color:#000;padding:10px 16px;border-radius:10px}
.skip:focus{left:16px}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #0072bc;outline-offset:3px;border-radius:8px}
/* pill buttons keep their pill shape while focused (the 8px radius above would square them off) */
.btn:focus-visible{border-radius:980px}
.dark :focus-visible,.hero :focus-visible,.page-hero :focus-visible,.nav :focus-visible,footer .x:focus-visible{outline-color:#3cc8ff}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.dark{background:var(--black);color:#f5f5f7}
.light{background:var(--mist);color:var(--ink)}
.white{background:var(--paper);color:var(--ink)}
section{position:relative;padding:140px 0}

.eyebrow{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:14px;color:var(--muted)}
.dark .eyebrow{color:var(--muted-d)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.16em;margin-bottom:-.16em}   /* room for descenders (y, g, p) when the span is a block */
.light .grad-text,.white .grad-text{background-image:var(--grad-l)}
h2{font-size:clamp(38px,5.6vw,72px);font-weight:700;letter-spacing:-.045em;line-height:1.04}
.lede{font-size:clamp(19px,1.9vw,24px);line-height:1.38;font-weight:500;letter-spacing:-.02em;color:var(--muted);max-width:720px;margin-top:22px}
.dark .lede{color:var(--muted-d)}
.lede strong{color:var(--ink);font-weight:600}
.dark .lede strong,.hero .lede strong{color:#f5f5f7}
.hero .lede{color:var(--muted-d)}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
h1,h2,h3,.hero-kicker{text-wrap:balance}
p,li,dd,summary{text-wrap:pretty}
.nw{white-space:nowrap}

/* reveal */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.d1{transition-delay:.06s!important}.d2{transition-delay:.12s!important}.d3{transition-delay:.18s!important}

/* buttons & links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:17px;font-weight:500;letter-spacing:-.01em;padding:12px 24px;border-radius:980px;text-decoration:none;border:none;cursor:pointer;transition:background .25s,transform .25s var(--ease),box-shadow .25s}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-hover)}
.btn-glass{background:rgba(255,255,255,.1);color:#f5f5f7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.16)}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.btn-line:hover{background:rgba(0,0,0,.04)}
.btn-sm{font-size:12.5px;padding:6px 14px;font-weight:500}
.btn[disabled]{opacity:.6;cursor:progress}
.link{font-size:17px;font-weight:500;color:var(--link);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.dark .link{color:var(--link-d)}
.link:hover{text-decoration:underline}
/* invisible 40px+ tap area around the 25px text link; layout unchanged */
a.link{position:relative}
a.link::after{content:"";position:absolute;inset:-9px -2px}
.link .chev{transition:transform .25s var(--ease)}
.link:hover .chev{transform:translateX(3px)}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid rgba(255,255,255,.08)}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.nav-in{max-width:1120px;margin:0 auto;padding:0 24px;height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:inline-flex;align-items:center;gap:9px;color:#f5f5f7;text-decoration:none;font-weight:600;font-size:17px;letter-spacing:-.02em}
.logo img{height:18px;width:auto}
footer .logo img{height:22px}
footer .logo{padding-block:6px}
.logo-mark{width:22px;height:22px;border-radius:6px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);display:grid;place-items:center;font-size:13px;font-weight:700;line-height:1}
.logo-mark b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:12.5px;color:rgba(245,245,247,.8);text-decoration:none;letter-spacing:0;transition:color .2s}
.nav-links a:hover{color:#fff}
.nav-links a,.nav .logo{padding-block:14px}
.nav-links a{display:inline-block;min-width:24px;text-align:center}
.nav-right{display:flex;align-items:center;gap:10px}
/* the small nav pill keeps its look; its tap area grows to 41px inside the 52px bar */
.nav-right .btn-sm{position:relative}
.nav-right .btn-sm::after{content:"";position:absolute;inset:-5px -2px}
.menu-btn{display:none;width:36px;height:36px;border:none;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn i{display:block;width:17px;height:1.5px;background:#f5f5f7;border-radius:2px;transition:transform .3s var(--ease),opacity .3s}
.menu-open .menu-btn i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-open .menu-btn i:nth-child(2){opacity:0}
.menu-open .menu-btn i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* hero */
.hero{position:relative;padding:116px 0 0;overflow:hidden;text-align:center;background:var(--black);color:#f5f5f7}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 20%,transparent 70%);pointer-events:none}
.hero-in{position:relative;z-index:2}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--muted-d);padding:7px 16px 7px 8px;border-radius:980px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);margin-bottom:28px}
.hero-kicker{text-align:left;max-width:100%}
.kick-short{display:none}
.hero-kicker .dot{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--conic);position:relative}
.hero-kicker .dot::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#000}
.hero h1{font-size:clamp(52px,9.4vw,120px);font-weight:700;letter-spacing:-.055em;line-height:.98}
.hero h1 .l{display:block}
.hero .lede{margin:28px auto 0;max-width:680px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.hero-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin-top:28px;list-style:none;font-size:14px;color:var(--muted-d)}
.hero-meta li{display:flex;align-items:center;gap:8px}
.hero-meta li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad)}
.stage{position:relative;margin:86px auto 0;max-width:980px;padding:0 24px}
.aura{position:absolute;left:50%;top:48%;width:min(900px,120vw);aspect-ratio:1.6;transform:translate(-50%,-50%);border-radius:50%;background:var(--conic);filter:blur(100px);opacity:.42;pointer-events:none;animation:spin 22s linear infinite;will-change:transform}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.device{container-type:inline-size;position:relative;--p:1;--tx:0deg;--ty:0deg;transform:perspective(1800px) rotateX(calc((1 - var(--p)) * 24deg + var(--tx))) rotateY(var(--ty)) scale(calc(.9 + var(--p) * .1));transform-origin:50% 100%;transition:transform .25s ease-out;will-change:transform}
.laptop-screen{position:relative;background:#050506;border-radius:22px 22px 0 0;padding:12px 12px 16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 120px rgba(0,0,0,.6)}
.laptop-screen::before{content:"";position:absolute;top:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#1f1f22}
.laptop-screen img{width:100%;aspect-ratio:1200/689;object-fit:cover;object-position:top;border-radius:8px}
.laptop-screen::after{content:"";position:absolute;inset:12px 12px 16px;border-radius:8px;background:linear-gradient(115deg,rgba(255,255,255,.1),transparent 35%);pointer-events:none}
.laptop-base{height:18px;margin:0 max(-5%,calc(50% - 50vw));background:linear-gradient(180deg,#48484c,#1c1c1f 60%,#0c0c0e);border-radius:0 0 18px 18px;position:relative}
.laptop-base::before{content:"";position:absolute;top:0;left:50%;width:15%;height:7px;transform:translateX(-50%);background:#0d0d0f;border-radius:0 0 10px 10px}
.iphone{--pw:clamp(86px,17cqw,168px);position:absolute;right:-1%;bottom:-8%;width:var(--pw);padding:calc(var(--pw) * .03);border-radius:calc(var(--pw) * .17);background:#1c1c1e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 30px 60px rgba(0,0,0,.55)}
.iphone img{width:100%;aspect-ratio:300/635;object-fit:cover;object-position:top;border-radius:25px}
.iphone::before{content:"";position:absolute;top:calc(var(--pw) * .065);left:50%;width:28%;height:calc(var(--pw) * .052);transform:translateX(-50%);border-radius:99px;background:#000;z-index:1}
.stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);margin:120px auto 0;max-width:1120px;padding:0 24px 110px;list-style:none}
.stat{padding:0 18px;border-left:1px solid var(--line-d);text-align:left}
.stat:first-child{border-left:none;padding-left:0}
.stat b{display:block;font-size:clamp(40px,5vw,64px);font-weight:700;letter-spacing:-.05em;line-height:1}
.stat span{display:block;margin-top:10px;font-size:14px;color:var(--muted-d);max-width:180px}
/* a span nested in a stat label (e.g. <span class="nw">) stays inline text */
.stat span span{display:inline;margin:0;max-width:none}

/* hero build demo */
.screen{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#0b0b0d;container-type:inline-size}
.bbar{position:relative;z-index:2;height:4.6cqw;display:flex;align-items:center;gap:.8cqw;padding:0 1.6cqw;background:#1c1c1e}
.bbar > i{width:1cqw;height:1cqw;border-radius:50%;background:rgba(255,255,255,.22)}
.url{flex:1;max-width:40cqw;margin:0 auto;height:2.8cqw;border-radius:1cqw;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;gap:.6cqw;font-size:1.45cqw;color:#a1a1a6}
.lock{width:.9cqw;height:.8cqw;border-radius:.2cqw;background:currentColor;position:relative;top:.15cqw}
.lock::before{content:"";position:absolute;left:.15cqw;right:.15cqw;top:-.55cqw;height:.7cqw;border:.18cqw solid currentColor;border-bottom:none;border-radius:.5cqw .5cqw 0 0}
.url-txt{display:grid}
.url-txt > span{grid-area:1/1;transition:opacity .5s}
.url-live{opacity:0;color:#f5f5f7}
.s4 .url-staging{opacity:0}.s4 .url-live{opacity:1}
/* scoped to the demo browser bar: a stray "live" class elsewhere (e.g. location cards) must not be hidden */
.bbar .live{display:flex;align-items:center;gap:.5cqw;font-size:1.35cqw;font-weight:600;color:#30d158;opacity:0;transition:opacity .5s .3s}
.bbar .live b{width:.8cqw;height:.8cqw;border-radius:50%;background:#30d158;box-shadow:0 0 0 0 rgba(48,209,88,.6);animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 .8cqw rgba(48,209,88,0)}100%{box-shadow:0 0 0 0 rgba(48,209,88,0)}}
.s4 .bbar .live{opacity:1}
.ms{position:absolute;top:4.6cqw;left:0;right:0;bottom:0;padding:2cqw 4cqw;background:transparent;color:#0f172a;transition:background .8s var(--ease)}
.s2 .ms{background:#fff}
.blk{opacity:0;transform:translateY(1cqw);border:1px dashed rgba(255,255,255,.38);border-radius:.8cqw;color:transparent;transition:opacity .5s var(--ease) calc(var(--i) * .12s),transform .5s var(--ease) calc(var(--i) * .12s),background-color .6s calc(var(--i) * .08s),border-color .6s calc(var(--i) * .08s),color .6s calc(var(--i) * .08s),box-shadow .6s}
.s1 .blk{opacity:1;transform:none}
.s2 .blk{border-color:transparent;color:inherit}
.ms-nav{height:5cqw;display:flex;align-items:center;justify-content:space-between;padding:0 1cqw}
.ms-logo{display:flex;align-items:center;gap:.6cqw;font-size:1.9cqw;font-weight:700;letter-spacing:-.02em}
.ms-logo em{width:2.2cqw;height:2.2cqw;border-radius:.6cqw;background:rgba(255,255,255,.18);transition:background .6s}
.s2 .ms-logo em{background:linear-gradient(135deg,#fb923c,#c2410c)}
.ms-links{display:flex;gap:2cqw}
.ms-links i{width:5cqw;height:1cqw;border-radius:1cqw;background:rgba(255,255,255,.18);transition:background .6s}
.s2 .ms-links i{background:#cbd5e1}
.ms-btn{font-size:1.45cqw;font-weight:600;padding:1cqw 1.8cqw;border-radius:5cqw;transition:background .6s,color .6s}
.s2 .ms-btn{background:#ea580c;color:#fff}
.ms-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:3cqw;align-items:center;margin-top:2.4cqw}
.ms-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.4cqw}
.ms-kick{font-size:1.4cqw;font-weight:600;padding:.5cqw 1.2cqw;border-radius:5cqw}
.s2 .ms-kick{background:#fff1e6;color:#c2410c}
.ms-h{font-size:4.3cqw;font-weight:800;line-height:1.02;letter-spacing:-.045em;padding:.3cqw .6cqw .3cqw 0}
.ms-p{display:grid;gap:.8cqw;width:82%;padding:.4cqw 0}
.ms-p i{height:1.1cqw;border-radius:1cqw;background:rgba(255,255,255,.18);transition:background .6s}
.ms-p i:last-child{width:70%}
.s2 .ms-p i{background:#e2e8f0}
.ms-cta{display:flex;gap:1cqw}
.ms-cta > span{font-size:1.5cqw;font-weight:600;padding:1.1cqw 2cqw;border-radius:5cqw;transition:background .6s,box-shadow .6s,color .6s}
.s2 .ms-cta .pa{background:#0f172a;color:#fff}
.s2 .ms-cta .pb{box-shadow:inset 0 0 0 1px #cbd5e1}
.ms-img{position:relative;aspect-ratio:4/3;border-radius:1.6cqw;overflow:hidden}
.photo{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease) .5s}
.s2 .photo{clip-path:inset(0)}
.ms-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;margin-top:2.4cqw}
.ms-card{display:flex;flex-direction:column;gap:.8cqw;padding:1.3cqw;border-radius:1.2cqw}
.s2 .ms-card{background:#f8fafc;box-shadow:inset 0 0 0 1px #e2e8f0}
.ms-card em{width:2.6cqw;height:2.6cqw;border-radius:.7cqw;background:rgba(255,255,255,.18);transition:background .6s}
.s2 .ms-card em{background:#ffedd5}
.ms-card b{font-size:1.5cqw;font-weight:700}
.ms-card i{height:1cqw;width:80%;border-radius:1cqw;background:rgba(255,255,255,.18);transition:background .6s}
.s2 .ms-card i{background:#e2e8f0}
.ms-foot{position:absolute;left:4cqw;right:4cqw;bottom:1.4cqw;display:grid;justify-items:end;font-size:1.3cqw;color:#94a3b8;opacity:0;transition:opacity .5s .9s}
.s2 .ms-foot{opacity:1}
.cr{grid-area:1/1;transition:opacity .6s,filter .6s}
.cr-ag{opacity:0}
.s3 .cr-sv{opacity:0;filter:blur(.4cqw)}.s3 .cr-ag{opacity:1;transition-delay:.5s}
.code{position:absolute;z-index:3;left:3cqw;top:9cqw;width:47cqw;border-radius:1.4cqw;background:rgba(13,13,16,.93);box-shadow:0 2cqw 5cqw rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.12);opacity:0;transform:translateY(2cqw) scale(.97);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.s2 .code{opacity:1;transform:none}
.s3 .code{opacity:0;transform:translateY(-2cqw) scale(.97)}
.code-bar{height:3.4cqw;display:flex;align-items:center;gap:.7cqw;padding:0 1.4cqw;border-bottom:1px solid rgba(255,255,255,.08)}
.code-bar i{width:.9cqw;height:.9cqw;border-radius:50%;background:#ff5f57}
.code-bar i:nth-child(2){background:#febc2e}.code-bar i:nth-child(3){background:#28c840}
.code-bar span{margin-left:1cqw;font-size:1.3cqw;color:#a1a1a6}
.code pre{margin:0;padding:1.6cqw 1.8cqw;font:500 1.42cqw/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;color:#f5f5f7;white-space:pre;overflow:hidden}
.ln{display:block;clip-path:inset(0 100% 0 0);transition:clip-path .5s steps(18,end) calc(var(--d) * .3s + .3s)}
.s2 .ln{clip-path:inset(0)}
.code .t{color:#ff7ab2}.code .a{color:#d9c97c}.code .s{color:#fc8f6a}.code .k{color:#5dd8ff}.code .c{color:#7f8c98}
.scan{position:absolute;z-index:4;inset:0;background:linear-gradient(90deg,transparent 35%,rgba(0,168,228,.25) 45%,rgba(60,200,255,.5) 50%,rgba(76,141,255,.25) 55%,transparent 65%);transform:translateX(-100%);pointer-events:none}
.s3 .scan{animation:scan 1.3s var(--ease) forwards}
@keyframes scan{to{transform:translateX(100%)}}
.iphone .ph-screen{position:relative;aspect-ratio:9/19.5;border-radius:calc(var(--pw) * .14);overflow:hidden;background:#0b0b0d;container-type:inline-size;transition:background .8s var(--ease)}
.s2 .ph-screen{background:#fff;color:#0f172a}
.ph-status{display:flex;justify-content:space-between;align-items:center;padding:6cqw 9cqw 0;font-size:6.5cqw;color:#f5f5f7;transition:color .6s}
.ph-status i{width:9cqw;height:4cqw;border-radius:1.2cqw;background:currentColor}
.s2 .ph-status{color:#0f172a}
.ph-nav{display:flex;justify-content:space-between;align-items:center;margin:6cqw 6cqw 0;padding:3cqw;border-radius:4cqw}
.ph-nav .ms-logo{font-size:7cqw;gap:2.5cqw;color:inherit}
.ph-nav .ms-logo em{width:7cqw;height:7cqw;border-radius:2cqw}
.ph-burger{display:grid;gap:2cqw}
.ph-burger i{width:8cqw;height:1.3cqw;border-radius:1cqw;background:rgba(255,255,255,.3);transition:background .6s}
.s2 .ph-burger i{background:#0f172a}
.ph-img{position:relative;margin:4cqw 6cqw 0;aspect-ratio:1/.8;border-radius:6cqw;overflow:hidden}
.ph-h{display:block;margin:5cqw 6cqw 0;font-size:10cqw;font-weight:800;line-height:1.02;letter-spacing:-.045em;border-radius:3cqw}
.ph-cta{display:block;margin:5cqw 6cqw 0;padding:4.5cqw;border-radius:20cqw;text-align:center;font-size:6.5cqw;font-weight:600}
.s2 .ph-cta{background:#ea580c;color:#fff}
.toast{position:absolute;left:4cqw;right:4cqw;top:15cqw;z-index:2;display:flex;align-items:center;gap:4cqw;padding:4cqw;border-radius:9cqw;background:rgba(30,30,32,.92);color:#fff;box-shadow:0 6cqw 14cqw rgba(0,0,0,.35);opacity:0;transform:translateY(-140%);transition:opacity .6s var(--ease) .9s,transform .7s var(--ease) .9s}
.toast em{flex-shrink:0;width:11cqw;height:11cqw;border-radius:3cqw;background:linear-gradient(#30d158,#1f9e45)}
.toast b{display:block;font-size:6.5cqw}
.toast span{display:block;font-size:5.2cqw;color:#a1a1a6}
.s4 .toast{opacity:1;transform:none}
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:18px;background:rgba(28,28,30,.72);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 20px 50px rgba(0,0,0,.45);color:#f5f5f7;text-align:left;opacity:0;transform:translateY(14px) scale(.94);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.chip b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.chip span{display:block;font-size:12px;color:var(--muted-d)}
.chip svg{width:44px;height:44px;transform:rotate(-90deg)}
.g-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:4}
.g-fg{fill:none;stroke:#30d158;stroke-width:4;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset 1.4s var(--ease) .25s}
.chip-gauge b{font-size:22px;font-weight:700;letter-spacing:-.03em}
.chip-gauge{top:-9%;right:3%}
.chip-launch{top:-9%;left:3%}
.chip-launch em{width:30px;height:30px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:14px;color:#fff}
.chip-credit{bottom:-9%;left:3%;flex-direction:column;align-items:flex-start;gap:1px;padding:11px 18px;min-width:150px}
.chip-credit b{font-size:18px;font-weight:700;letter-spacing:-.02em}
.chip-credit.swapped b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.s2 .chip-credit{opacity:1;transform:none}
.s4 .chip-gauge{opacity:1;transform:none;transition-delay:.1s}
.s4 .g-fg{stroke-dashoffset:2.3}
.s4 .chip-launch{opacity:1;transform:none;transition-delay:.4s}
.demo.fade .screen > :not(.bbar),.demo.fade .ph-screen > *,.demo.fade .chip,.demo.fade .bbar .live,.demo.fade .url-live{opacity:0!important;transition:opacity .6s!important}
.demo-steps{position:relative;z-index:2;max-width:560px;margin:80px auto 0;padding:0 24px}
.demo-bar{height:2px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.demo-bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .9s var(--ease)}
.demo-steps ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px}
.demo-steps li{font-size:13px;font-weight:500;color:#86868b;transition:color .4s}
.demo-steps li.on{color:#f5f5f7}
@media(max-width:833px){
  .chip-launch{display:none}
  .chip-gauge{right:0;top:-11%}
}
@media(max-width:640px){
  .chip{padding:7px 11px 7px 7px;border-radius:14px;gap:7px}
  .chip b{font-size:12px}.chip span{font-size:10px}
  .chip svg{width:32px;height:32px}
  .chip-gauge b{font-size:16px}
  .chip-gauge{top:-15%;right:0}
  .chip-credit{left:0;bottom:-14%;min-width:0;padding:7px 12px}
  .chip-credit b{font-size:13px}
  .demo-steps{margin-top:56px}
  .demo-steps li{font-size:12px;letter-spacing:-.01em}
}

/* how it works */
.flow{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:70px}
.flow-card{position:relative;background:var(--paper);border-radius:28px;padding:34px 30px 36px;min-height:300px;display:flex;flex-direction:column}
.flow-num{font-size:14px;font-weight:600;color:var(--muted)}
.flow-who{margin-top:auto;padding-top:40px;font-size:14px;font-weight:500;color:var(--muted)}
.flow-card h3{font-size:34px;font-weight:700;letter-spacing:-.04em;line-height:1.1;margin:14px 0 12px}
.flow-card p{color:var(--muted);font-size:17px;line-height:1.47}
.flow-card.us{background:var(--black);color:#f5f5f7;overflow:hidden;isolation:isolate}
.flow-card.us::before{content:"";position:absolute;inset:-40%;background:var(--conic);filter:blur(60px);opacity:.28;z-index:-1;animation:spin2 16s linear infinite}
@keyframes spin2{to{transform:rotate(360deg)}}
.flow-card.us p,.flow-card.us .flow-num{color:var(--muted-d)}
.flow-card.us .flow-who{color:#f5f5f7}
.keep{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.keep-card{background:var(--paper);border-radius:28px;padding:30px}
.keep-card h3{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-bottom:14px}
.keep-card ul{list-style:none;display:grid;gap:10px}
.keep-card li{display:flex;gap:12px;align-items:center;font-size:17px}
.keep-card li::before{content:"";flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}

/* services bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:70px}
.tile{position:relative;border-radius:30px;padding:40px;overflow:hidden;background:var(--mist);isolation:isolate}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(0,168,228,.1),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:-1}
.tile:hover::after{opacity:1}
.tile-tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.tile h3{font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:-.045em;line-height:1.08}
.tile > p{font-size:17px;color:var(--muted);margin-top:14px;max-width:520px;line-height:1.47}
.tile ul{list-style:none;margin-top:28px;display:grid;gap:12px}
.tile li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.4}
.tile li::before{content:"";flex-shrink:0;margin-top:1px;width:20px;height:20px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.tile-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.tile-meta span{font-size:13px;font-weight:500;padding:6px 12px;border-radius:980px;background:rgba(0,0,0,.05);color:var(--ink)}
.t-web{grid-column:span 7;grid-row:span 2;background:var(--black);color:#f5f5f7;min-height:560px;display:flex;flex-direction:column}
.t-web::before{content:"";position:absolute;right:-30%;bottom:-40%;width:90%;aspect-ratio:1;border-radius:50%;background:var(--conic);filter:blur(90px);opacity:.38;z-index:-1;animation:spin2 24s linear infinite}
.t-web .tile-tag{color:var(--muted-d)}
.t-web h3{font-size:clamp(34px,4vw,52px)}
.t-web > p{color:var(--muted-d)}
.t-web ul{grid-template-columns:1fr 1fr;gap:14px 24px}
.t-web li::before{background-color:#f5f5f7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.t-web .tile-meta{margin-top:auto;padding-top:34px}
.t-web .tile-meta span{background:rgba(255,255,255,.1);color:#f5f5f7}
.t-web::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.07),transparent 60%)}
.t-shop{grid-column:span 5;grid-row:span 2;display:flex;flex-direction:column}
.t-shop .tile-meta{margin-top:auto;padding-top:30px}
.t-seo{grid-column:span 6}
.t-fact{grid-column:span 3;display:flex;flex-direction:column;justify-content:space-between;min-height:220px}
.t-fact b{font-size:clamp(44px,5vw,64px);font-weight:700;letter-spacing:-.055em;line-height:1}
.t-fact p{font-size:17px;color:var(--muted);line-height:1.4;margin-top:16px}
.t-fact.g b{background:var(--grad-l);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc-foot{margin-top:40px;text-align:center;font-size:17px;color:var(--muted)}

/* work carousel */
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.rail-ctrl{display:flex;gap:12px;flex-shrink:0}
.rail-btn{width:52px;height:52px;padding:0;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.22);color:#fff;font-size:0;line-height:0;display:grid;place-items:center;transition:background .2s,color .2s}
.rail-btn svg{display:block;width:28px;height:28px}
.rail-btn:hover{background:rgba(255,255,255,.32)}
.rail-btn[disabled]{background:rgba(255,255,255,.08);color:#6e6e73;cursor:default}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(84vw,500px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:60px;padding:4px max(24px,calc((100vw - 1072px) / 2)) 30px;scroll-padding-inline:max(24px,calc((100vw - 1072px) / 2));scrollbar-width:none;overscroll-behavior-x:contain;list-style:none}
.rail::-webkit-scrollbar{display:none}
.work-card{scroll-snap-align:start;background:var(--graphite);border-radius:30px;overflow:hidden;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .5s var(--ease)}
.work-card:hover{transform:translateY(-6px)}
.work-media{position:relative;padding:30px 30px 0;background:radial-gradient(120% 90% at 50% 0%,#2a2a2e,#161618 70%)}
.browser{border-radius:12px 12px 0 0;overflow:hidden;background:#0c0c0e;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.browser-bar{display:flex;align-items:center;gap:6px;padding:9px 12px}
.browser-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
.browser-bar span{margin-left:8px;flex:1;font-size:11px;color:var(--muted-d);background:rgba(255,255,255,.07);border-radius:6px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser img{width:100%;aspect-ratio:720/413;object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.work-card:hover .browser img{transform:scale(1.03)}
.phone-mini{position:absolute;right:18px;bottom:-22px;width:22%;max-width:100px;padding:3px;border-radius:18px;background:#2c2c2e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 20px 40px rgba(0,0,0,.6)}
.phone-mini img{width:100%;aspect-ratio:300/635;object-fit:cover;object-position:top;border-radius:15px}
.work-body{padding:40px 30px 30px;display:flex;flex-direction:column;flex:1}
.work-kicker{font-size:13px;font-weight:600;color:var(--muted-d)}
.work-kicker .intl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.work-body h3{font-size:26px;font-weight:700;letter-spacing:-.035em;line-height:1.15;margin:8px 0 10px}
.work-body p{font-size:15px;color:var(--muted-d);line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 22px;list-style:none}
.chips li{font-size:12px;font-weight:500;color:#f5f5f7;background:rgba(255,255,255,.08);border-radius:980px;padding:5px 11px}
.work-body .link{margin-top:auto}
/* NDA card: link sits on the same footer line as the other cards' links, 22px minimum gap above */
.nda-card .work-body .link{margin-top:auto;padding-top:22px}
.nda-card{background:var(--black);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);position:relative;isolation:isolate}
.nda-card::before{content:"";position:absolute;inset:-50% -50% auto auto;width:120%;aspect-ratio:1;border-radius:50%;background:var(--conic);filter:blur(80px);opacity:.25;z-index:-1}
.nda-media{padding:30px 30px 0}
.nda-screen{position:relative;border-radius:12px 12px 0 0;background:#0c0c0e;box-shadow:0 0 0 1px rgba(255,255,255,.1);aspect-ratio:720/450;overflow:hidden}
.nda-lines{position:absolute;inset:48px 22px 0;display:grid;gap:12px;align-content:start;filter:blur(1.5px)}
.nda-lines i{display:block;height:12px;border-radius:6px;background:rgba(255,255,255,.08)}
.nda-lines i:nth-child(1){width:60%;height:22px}.nda-lines i:nth-child(2){width:85%}.nda-lines i:nth-child(3){width:70%}.nda-lines i:nth-child(4){width:40%;height:30px;background:rgba(0,168,228,.25)}.nda-lines i:nth-child(5){width:90%}
.stamp{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%) rotate(-6deg);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:10px 18px;border-radius:10px;color:#fff;background:rgba(0,0,0,.6);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);backdrop-filter:blur(6px);white-space:nowrap}

/* process */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:70px}
.step{background:var(--paper);border-radius:28px;padding:32px 28px}
.step-num{display:block;font-size:56px;font-weight:700;letter-spacing:-.06em;line-height:1;background:var(--grad-l);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:26px}
.step h3{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.step p{font-size:16px;color:var(--muted);line-height:1.47}
.promise{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.promise-card{border-radius:28px;padding:34px 32px;background:var(--black);color:#f5f5f7;position:relative;overflow:hidden;isolation:isolate}
.promise-card::before{content:"";position:absolute;right:-20%;top:-60%;width:70%;aspect-ratio:1;border-radius:50%;background:var(--conic);filter:blur(70px);opacity:.3;z-index:-1}
.promise-card b{display:block;font-size:clamp(26px,2.8vw,34px);font-weight:700;letter-spacing:-.04em;line-height:1.1}
.promise-card span{display:block;margin-top:10px;font-size:17px;color:var(--muted-d)}

/* about + compare */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:end}
.about-copy p{font-size:19px;color:var(--muted);line-height:1.5;margin-top:18px}
.about-copy p strong{color:var(--ink);font-weight:600}
.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:90px;list-style:none}
.cmp{border-radius:30px;padding:34px 30px;background:var(--mist)}
.cmp h3{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:22px}
.cmp dl{display:grid;gap:18px}
.cmp dt{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.cmp dd{font-size:17px;line-height:1.35;margin-top:3px;color:var(--ink)}
.cmp.us{background:var(--black);color:#f5f5f7;position:relative;isolation:isolate}
.cmp.us::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.cmp.us h3{font-size:24px;font-weight:700;letter-spacing:-.03em;color:#f5f5f7;margin-bottom:18px}
.cmp.us dt{color:var(--muted-d)}
.cmp.us dd{color:#f5f5f7;font-weight:500}

/* faq */
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.faq-side{position:sticky;top:110px}
.faq-side p{font-size:19px;color:var(--muted);margin:20px 0 26px}
.faq-side .eyebrow{font-size:17px;margin:0 0 14px}
.faq-list{border-top:1px solid rgba(0,0,0,.14)}
.faq-list details{border-bottom:1px solid rgba(0,0,0,.14)}
.faq-list summary{list-style:none;cursor:pointer;padding:24px 50px 24px 0;font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.3;position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--ink),var(--ink)) center/14px 1.8px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.8px 14px no-repeat;transition:transform .35s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details > div{padding:0 40px 26px 0;font-size:17px;color:var(--muted);line-height:1.55}

/* contact */
.contact{overflow:hidden}
.contact .aura{top:30%;opacity:.3;width:min(1100px,140vw)}
.contact-head{position:relative;text-align:center}
.contact-head h2{font-size:clamp(40px,6.4vw,84px)}
.contact-head .lede{margin-left:auto;margin-right:auto}
.contact-grid{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;margin-top:70px}
.glass{border-radius:30px;padding:40px;background:rgba(28,28,30,.72);backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.glass h3{font-size:28px;font-weight:700;letter-spacing:-.035em;line-height:1.15}
.glass .sub{font-size:17px;color:var(--muted-d);margin-top:10px}
.call-card{display:flex;flex-direction:column}
.call-list{list-style:none;display:grid;gap:14px;margin:28px 0 34px}
.call-list li{display:flex;gap:12px;align-items:center;font-size:17px}
.call-list li::before{content:"";flex-shrink:0;width:22px;height:22px;border-radius:50%;background:#f5f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}
.call-card .btn{align-self:flex-start}
.call-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1)}
/* stretched call card: facts + email form one footer pinned to the card bottom (level with the form's
   submit row); the spare height sits under the CTA, which keeps a 34px minimum gap */
.call-card > .btn:has(+ .call-facts){margin-bottom:34px}
.call-card > .call-facts{margin-top:auto}
.call-facts dt{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted-d)}
.call-facts dd{font-size:16px;line-height:1.35;color:#f5f5f7;margin-top:4px}
.call-alt{margin-top:auto;padding-top:34px;font-size:15px;color:var(--muted-d)}
.call-facts + .call-alt{margin-top:0;padding-top:22px}
.call-alt a{color:var(--link-d);text-decoration:none}
.call-alt a:hover{text-decoration:underline}
.form-card{color-scheme:dark}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:500;color:var(--muted-d)}
.field .opt{color:#86868b}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:#f5f5f7;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:13px 15px;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}
.field select option{background:#1c1c1e;color:#f5f5f7}
/* custom select: same height, inset and chevron spacing as the text inputs; the empty
   "Choose one" prompt reads as a placeholder until a real option is picked */
.field select{-webkit-appearance:none;appearance:none;line-height:24px;padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23a1a1a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px}
.field select:has(option[value=""]:checked){color:#86868b}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#86868b}
/* a required field still missing or wrong after a submit attempt (:user-invalid, or aria-invalid set by the form JS)
   is outlined in the form's error colour (the .form-status text); the focused field keeps its blue ring (focus rule below wins) */
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{border-color:#ff9f97}
.field [aria-invalid="true"]{border-color:#ff9f97}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#3cc8ff;box-shadow:0 0 0 4px rgba(0,168,228,.22);background-color:rgba(255,255,255,.09)}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px}
.form-note{font-size:13px;color:var(--muted-d);max-width:300px;line-height:1.45}
/* note beside the submit button when they fit (no wrapped button under a 300px column);
   when the row wraps, the note spans the full width */
.form-foot .form-note{flex:1 1 220px;max-width:none}
.form-foot .btn{margin-left:auto}
.form-status{margin-top:16px;font-size:15px;border-radius:14px;padding:12px 16px;background:rgba(255,69,58,.14);color:#ff9f97;box-shadow:inset 0 0 0 1px rgba(255,69,58,.35)}
.form-done{text-align:center;padding:50px 10px}
.form-done .ok{width:56px;height:56px;border-radius:50%;margin:0 auto 22px;background:var(--conic);position:relative}
.form-done .ok::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#1c1c1e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/34px no-repeat}
.form-done p{color:var(--muted-d);margin-top:10px}
.contact-meta{position:relative;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin-top:44px;list-style:none;font-size:14px;color:var(--muted-d)}
.contact-meta li{display:flex;align-items:center;gap:8px}
.contact-meta li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad)}

/* footer */
footer{background:var(--mist);color:var(--muted);font-size:12.5px;padding:44px 0 30px}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;padding-bottom:30px;border-bottom:1px solid rgba(0,0,0,.12)}
.foot-brand .logo{color:var(--ink)}
.foot-brand .logo-mark{box-shadow:none}
.foot-brand p{margin-top:12px;max-width:300px;line-height:1.5}
.foot-col h3{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:10px}
.foot-col ul{list-style:none;display:grid;gap:2px}
.foot-col a{display:inline-block;min-width:24px;padding:4px 0;color:var(--muted);text-decoration:none}
.foot-col a:hover{color:var(--ink);text-decoration:underline}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:18px}

/* responsive */
@media(max-width:1068px){
  section{padding:110px 0}
  .t-web,.t-shop{grid-column:span 12;grid-row:auto;min-height:0}
  /* stacked full width: the SEO tile matches the web tile above it (heading size, 2-col list) */
  .t-shop h3{font-size:clamp(34px,4vw,52px)}
  .t-shop ul{grid-template-columns:1fr 1fr;gap:14px 24px}
  .t-seo{grid-column:span 12}
  .t-fact{grid-column:span 6}
  .steps{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr;gap:10px}
}
@media(max-width:833px){
  .menu-btn{display:inline-flex;width:44px;height:44px;margin-right:-4px}
  .nav-links{position:fixed;top:52px;left:0;right:0;bottom:0;flex-direction:column;align-items:stretch;gap:0;padding:18px 40px;background:rgba(0,0,0,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
  .menu-open .nav-links{opacity:1;visibility:visible;transform:none}
  .nav-links a{font-size:28px;font-weight:600;letter-spacing:-.03em;color:#f5f5f7;padding:10px 0;text-align:left}
  .flow,.keep,.promise,.compare,.faq-grid,.contact-grid{grid-template-columns:1fr}
  .flow-card{min-height:0}
  .flow-who{padding-top:26px}
  .cmp.us{order:-1}
  .faq-grid{gap:30px}
  .faq-side{position:static}
  .stats{grid-template-columns:1fr 1fr;row-gap:40px;margin-top:90px}
  .stat:nth-child(3){border-left:none;padding-left:0}
  .work-head{flex-direction:column;align-items:flex-start}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  body{font-size:16px}
  .logo img{height:16px}
  section{padding:88px 0}
  .hero{padding-top:108px}
  .hero-kicker{font-size:12.5px}
  .kick-long{display:none}
  .kick-short{display:inline}
  .hero-cta{flex-direction:column;align-items:stretch;padding:0 12px}
  .stage{margin-top:64px;padding:0 16px}
  .laptop-screen{padding:7px 7px 10px;border-radius:14px 14px 0 0}
  .laptop-base{height:11px}
  .tile{padding:30px 26px;border-radius:26px}
  .t-web ul,.t-shop ul{grid-template-columns:1fr}
  .t-fact{grid-column:span 12;min-height:0}
  .steps{grid-template-columns:1fr}
  .glass{padding:30px 22px;border-radius:26px}
  .form-grid{grid-template-columns:1fr}
  .form-foot .btn{width:100%}
  .rail-ctrl{display:none}
  .work-media{padding:22px 22px 0}
  .work-body{padding:36px 22px 26px}
  .phone-mini{width:18%;right:12px;bottom:-14px;border-radius:14px}
  .phone-mini img{border-radius:11px}
  .faq-list summary{font-size:19px}
  .contact-head h2 br{display:none}
  /* homepage contact title: the gradient sentence starts its own line, as on desktop (no "client." left dangling) */
  .hero ~ .contact .contact-head h2 .grad-text{display:block}
  .foot-top{grid-template-columns:1fr}
  /* phone tap targets: footer links become 40px rows */
  .foot-col ul{gap:0}
  .foot-col a{display:flex;align-items:center;min-height:40px;padding:0}
  /* trust bullets: one centered block, dots aligned in a column */
  .contact-meta,.hero .hero-meta,.page-hero .hero-meta{display:grid;justify-content:center;justify-items:start}
  /* stacked contact cards: both primary CTAs full width */
  .call-card .btn{align-self:stretch}
}
@media(max-width:420px){
  /* keeps "Nobody knows." on one line (3-line H1, no orphan) */
  .hero h1{font-size:min(52px,12.4vw)}
}
@media(max-width:360px){
  .hero-kicker{font-size:12px;gap:8px;padding:6px 12px 6px 6px;letter-spacing:-.01em}
  .hero-kicker .dot{width:18px;height:18px}
  .hero-kicker .dot::after{inset:5px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
  .device{transform:none}
}


/* ---- components.css ---- */
/* ==========================================================================
   ServeVision component library
   Extends base.css (the servevisiondigital.com homepage design) with the
   patterns the inner pages need. Same tokens, same type scale, same radii.
   ========================================================================== */

/* ---------- nav: dropdown panels + active state ---------- */
.nav-item{position:relative;display:flex;align-items:center}
.nav-drop-btn{font:inherit;font-size:12.5px;letter-spacing:0;color:rgba(245,245,247,.8);background:none;border:0;padding:14px 0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.nav-drop-btn:hover,.nav-item.open .nav-drop-btn{color:#fff}
.nav-drop-btn::after{content:"";width:5px;height:5px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
.nav-item.open .nav-drop-btn::after{transform:translateY(1px) rotate(-135deg)}
.nav-links a[aria-current="page"],.nav-drop-btn[data-current]{color:#fff}
.drop{position:fixed;left:0;right:0;top:52px;background:rgba(0,0,0,.9);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.08);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.nav-item.open .drop{opacity:1;visibility:visible;transform:none}
.drop-in{max-width:1120px;margin:0 auto;padding:34px 24px 36px;display:grid;grid-template-columns:1fr 1fr;gap:20px 60px}
.drop-title{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted-d);margin-bottom:10px}
.drop-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px 28px}
.nav-links .drop a{display:block;text-align:left;min-width:0;padding:8px 0;font-size:15px;font-weight:600;letter-spacing:-.015em;color:#f5f5f7}
.nav-links .drop a small{display:block;margin-top:2px;font-size:12.5px;font-weight:400;letter-spacing:0;color:var(--muted-d)}
.nav-links .drop a:hover small{color:#d2d2d7}
.drop-states{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:0 20px}
.nav-links .drop-states a{font-size:13px;font-weight:500;padding:5px 0;color:rgba(245,245,247,.85)}
.nav-links .drop-states a:hover{color:#fff}
.drop-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:18px;margin-top:6px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:var(--muted-d)}
.nav-links .drop-foot a{display:inline-flex;padding:0;font-size:13px;font-weight:500;color:var(--link-d)}
.drop-in.one{grid-template-columns:1fr}

/* ---------- inner-page hero ---------- */
.page-hero{position:relative;background:var(--black);color:#f5f5f7;padding:116px 0 120px;overflow:hidden;text-align:center;isolation:isolate}
.page-hero .aura{top:30%;opacity:.26;width:min(1000px,130vw);z-index:-1}
.page-hero .hero-in{position:relative;z-index:2}
.page-hero h1{font-size:clamp(44px,7.2vw,92px);font-weight:700;letter-spacing:-.052em;line-height:1}
.page-hero .lede{color:var(--muted-d);margin:26px auto 0;max-width:740px}
.page-hero .lede strong{color:#f5f5f7}
.page-hero .stats{margin-top:90px;padding-bottom:0}
.page-hero.left{text-align:left}
.page-hero.left .lede{margin-left:0}
.page-hero.left .hero-cta,.page-hero.left .hero-meta,.page-hero.left .crumbs{justify-content:flex-start}
.page-hero.compact{padding:116px 0 90px}
.page-hero.compact h1{font-size:clamp(40px,6vw,72px)}
/* labels with a phone version: <span class="lbl-d">full label</span><span class="lbl-m">short label</span>
   (used only where the full label would wrap on a phone; .lbl-d alone hides an element, e.g. a <br>, on phones).
   The full label shows from 641px */
.lbl-m{display:none}
@media(max-width:640px){.lbl-d{display:none}.lbl-m{display:inline}}

.crumbs{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;list-style:none;font-size:13px;color:var(--muted-d);margin-bottom:26px}
.crumbs li{display:flex;align-items:center;gap:6px}
.crumbs li+li::before{content:"/";opacity:.45}
.crumbs a{color:var(--muted-d);text-decoration:none}
/* 40px tap area around the 20px crumb text; negative margins keep the layout where it was */
.crumbs a{display:inline-block;padding:10px 6px;margin:-10px -6px}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs [aria-current]{color:#f5f5f7}

/* ---------- section helpers ---------- */
.sec-head{max-width:780px}
.sec-head.center,.center .sec-head{margin-left:auto;margin-right:auto}
.h2-sm{font-size:clamp(32px,4.4vw,56px)}
.tight{padding:100px 0}
/* tight stays tighter than the default section padding (110px / 88px) at every width */
@media(max-width:1068px){.tight{padding:88px 0}}
@media(max-width:640px){.tight{padding:64px 0}}
.flush-top{padding-top:0}
.mt-xl{margin-top:90px}.mt-l{margin-top:70px}.mt-m{margin-top:40px}.mt-s{margin-top:20px}
.narrow{max-width:780px}
.muted{color:var(--muted)}
.dark .muted{color:var(--muted-d)}
.small{font-size:14px}
.note{margin-top:30px;font-size:14px;line-height:1.5;color:var(--muted);max-width:760px}
.dark .note{color:var(--muted-d)}
.center .note{margin-left:auto;margin-right:auto}
.dark .link,.ink .link{color:var(--link-d)}
.row-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:34px}
.center .row-cta,.row-cta.center{justify-content:center}
.btn-white{background:#f5f5f7;color:#000}
.btn-white:hover{background:#fff}
.dark .btn-line,.ink .btn-line{color:#f5f5f7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.dark .btn-line:hover,.ink .btn-line:hover{background:rgba(255,255,255,.08)}

/* ---------- cards ---------- */
.cards{display:grid;gap:20px;margin-top:70px;list-style:none}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;background:var(--paper);border-radius:28px;padding:34px 30px 36px;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.white .card{background:var(--mist)}
.dark .card{background:var(--graphite);color:#f5f5f7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.card.ink{background:var(--black);color:#f5f5f7}
.card.ink::before{content:"";position:absolute;inset:-40%;background:var(--conic);filter:blur(60px);opacity:.26;z-index:-1;animation:spin2 18s linear infinite}
.card-tag{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.dark .card-tag,.ink .card-tag{color:var(--muted-d)}
.card h3{font-size:clamp(22px,2.1vw,26px);font-weight:700;letter-spacing:-.035em;line-height:1.15;margin-bottom:10px}
.card h3.big{font-size:clamp(28px,3vw,36px);letter-spacing:-.045em}
.card p{font-size:17px;line-height:1.47;color:var(--muted)}
.card p+p{margin-top:12px}
.dark .card p,.ink p{color:var(--muted-d)}
.card-num{display:block;font-size:48px;font-weight:700;letter-spacing:-.06em;line-height:1;background:var(--grad-l);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:22px}
.dark .card-num,.ink .card-num{background-image:var(--grad)}
.card-foot{margin-top:auto;padding-top:28px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);display:flex;gap:8px}
.card-foot::before{content:"→";color:var(--blue)}
.dark .card-foot,.ink .card-foot{color:#f5f5f7}
.dark .card-foot::before,.ink .card-foot::before{color:var(--link-d)}
.card > .link{margin-top:auto;padding-top:26px}
a.card{text-decoration:none;color:inherit;transition:transform .45s var(--ease)}
a.card:hover{transform:translateY(-4px)}

/* ---------- tick lists ---------- */
.ticks{list-style:none;display:grid;gap:12px;margin-top:24px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.4}
.ticks li::before{content:"";flex-shrink:0;margin-top:1px;width:20px;height:20px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.dark .ticks li::before,.ink .ticks li::before,.glass .ticks li::before{background-color:#f5f5f7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ticks.cols{grid-template-columns:1fr 1fr;gap:14px 24px}
.ticks.cross li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7l6 6M13 7l-6 6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-color:#86868b}

/* ---------- pills / chips ---------- */
.pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:24px}
.pills > *{font-size:13px;font-weight:500;padding:6px 12px;border-radius:980px;background:rgba(0,0,0,.05);color:var(--ink);text-decoration:none;line-height:1.3}
.light .pills > *{background:rgba(0,0,0,.06)}
.dark .pills > *,.ink .pills > *{background:rgba(255,255,255,.1);color:#f5f5f7}


.pills.lg > *{font-size:15px;padding:9px 16px}
.pills.center{justify-content:center}

/* ---------- metric pairs ---------- */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(0,0,0,.1)}
.dark .metrics,.ink .metrics{border-top-color:rgba(255,255,255,.12)}
.metrics b{display:block;font-size:clamp(28px,3vw,36px);font-weight:700;letter-spacing:-.05em;line-height:1;background:var(--grad-l);-webkit-background-clip:text;background-clip:text;color:transparent}
.dark .metrics b,.ink .metrics b{background-image:var(--grad)}
.metrics span{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.dark .metrics span,.ink .metrics span{color:var(--muted-d)}

/* ---------- stats on light grounds ---------- */
.stats.inline{margin:70px 0 0;padding:0;max-width:none;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.light .stat,.white .stat{border-left-color:rgba(0,0,0,.12)}
.light .stat span,.white .stat span{color:var(--muted)}
.light .stat b.g,.white .stat b.g{background:var(--grad-l);-webkit-background-clip:text;background-clip:text;color:transparent}
/* in-section stat rows: numbers sized to their columns (the hero keeps the 64px size) */
.stats.inline .stat b{font-size:clamp(34px,4.2vw,56px);white-space:nowrap}
@media(min-width:641px) and (max-width:833px){
  /* one row of 3-4 stats here (not the 2x2 grid), so the third stat keeps its divider */
  .stats.inline .stat:nth-child(3){border-left-style:solid;border-left-width:1px;padding-left:18px}
}
@media(max-width:640px){
  /* 2x2 grid: right-column numbers get the full cell (gradient text clips glyphs past the box) */
  .stats.inline .stat{padding-right:0}
  .stats.inline .stat b{font-size:min(40px,10.2vw)}
}

/* ---------- case studies ---------- */
.case{background:var(--paper);border-radius:30px;overflow:hidden;display:flex;flex-direction:column}
.white .case{background:var(--mist)}
.dark .case{background:var(--graphite);color:#f5f5f7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.case-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#111}
.case-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.case:hover .case-media img{transform:scale(1.03)}
.case-media .badge{position:absolute;left:14px;top:14px;font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:980px;background:rgba(0,0,0,.62);color:#f5f5f7;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.case-body{padding:30px 30px 32px;display:flex;flex-direction:column;flex:1}
.case-body h3{font-size:24px;font-weight:700;letter-spacing:-.035em;line-height:1.15;margin-bottom:10px}
.case-body p{font-size:16px;line-height:1.5;color:var(--muted)}
.dark .case-body p{color:var(--muted-d)}
.case-body .pills{margin-top:18px}
.case-body .metrics{margin-top:auto}
.case-body .pills + .metrics{margin-top:24px}

/* ---------- layer diagram ---------- */
.layers{display:grid;gap:14px;margin-top:70px}
.layer{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:center;background:var(--paper);border-radius:28px;padding:28px 32px}
.white .layer{background:var(--mist)}
.layer h3{font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.layer .card-tag{margin:0 0 8px}
.layer .pills{margin-top:0}
.layer.ink{background:var(--black);color:#f5f5f7;position:relative;overflow:hidden;isolation:isolate}
.layer.ink::before{content:"";position:absolute;right:-10%;top:-120%;width:60%;aspect-ratio:1;border-radius:50%;background:var(--conic);filter:blur(70px);opacity:.3;z-index:-1}
.layer.ink .pills > *{filter:blur(.6px)}
.layer-line{display:flex;align-items:center;gap:16px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 4px}
.layer-line::before,.layer-line::after{content:"";flex:1;height:1.5px;background:var(--grad-l);opacity:.55}

/* ---------- data tables ---------- */
.table-wrap{margin-top:70px;border-radius:28px;background:var(--paper);overflow-x:auto;-webkit-overflow-scrolling:touch}
.white .table-wrap{background:var(--mist)}
.dt{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45;min-width:640px}
.dt th,.dt td{padding:20px 24px;text-align:left;vertical-align:top}
.dt thead th{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);padding-top:24px;padding-bottom:16px}
.dt tbody tr{border-top:1px solid rgba(0,0,0,.08)}
.dt tbody th{font-weight:600;color:var(--ink);letter-spacing:-.01em}
.dt td{color:var(--muted)}
.dt .hl{color:var(--ink);font-weight:600;background:rgba(0,114,188,.06)}
.dt thead .hl{color:var(--blue);background:rgba(0,114,188,.06)}
.dt .yes::before,.dt .no::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:10px;vertical-align:middle;position:relative;top:-1px}
.dt .yes::before{background:#30d158}
.dt .no::before{background:#ff453a}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:70px;list-style:none}
.quote{background:var(--graphite);color:#f5f5f7;border-radius:28px;padding:34px 30px;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.light .quote,.white .quote{background:var(--paper);color:var(--ink);box-shadow:none}
.white .quote{background:var(--mist)}
.stars{font-size:15px;letter-spacing:.18em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:20px}
.light .stars,.white .stars{background-image:var(--grad-l)}
.quote blockquote p{font-size:19px;line-height:1.45;font-weight:500;letter-spacing:-.015em}
.quote figcaption{margin-top:auto;padding-top:30px;display:flex;align-items:center;gap:12px}
.avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--conic);position:relative;display:grid;place-items:center;font-size:14px;font-weight:700}
.avatar::before{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--graphite)}
.light .avatar::before{background:var(--paper)}
.white .avatar::before{background:var(--mist)}
.avatar span{position:relative}
.quote figcaption b{display:block;font-size:15px;font-weight:600}
.quote figcaption small{display:block;font-size:13px;color:var(--muted-d)}
.light .quote figcaption small,.white .quote figcaption small{color:var(--muted)}

/* ---------- split: copy + media ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split.top{align-items:start}
.dark .split > .copy > p{color:var(--muted-d)}
.split > .copy > p strong{color:var(--ink);font-weight:600}
.dark .split > .copy > p strong{color:#f5f5f7}
.media{border-radius:30px;overflow:hidden;background:#111}
.media img{width:100%;aspect-ratio:4/3;object-fit:cover}
figure.media-fig figcaption{margin-top:14px;font-size:14px;color:var(--muted);line-height:1.45}
.dark figure.media-fig figcaption{color:var(--muted-d)}

/* ---------- CTA bar ---------- */
.cta-bar{margin-top:20px;border-radius:28px;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:20px 30px;flex-wrap:wrap;background:var(--black);color:#f5f5f7;position:relative;overflow:hidden;isolation:isolate}
.cta-bar::before{content:"";position:absolute;right:-10%;top:-150%;width:50%;aspect-ratio:1;border-radius:50%;background:var(--conic);filter:blur(70px);opacity:.3;z-index:-1}
.cta-bar h3{font-size:22px;font-weight:700;letter-spacing:-.03em}
/* heading leading like the card titles (not the body's 1.5), so a wrapped title reads as one block; the .15em
   padding makes up the difference, so a one-line title keeps its 33px box and its place beside the icon */
.cta-bar h3{line-height:1.2;padding-block:.15em}
.cta-bar p{font-size:16px;color:var(--muted-d);margin-top:4px;max-width:620px}
.dark .cta-bar{background:var(--graphite);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* ---------- platform strip ---------- */
.logo-strip{padding:64px 0;background:var(--paper);border-top:1px solid rgba(0,0,0,.06)}
.logo-strip .eyebrow{font-size:13px;text-align:center;letter-spacing:.02em;text-transform:uppercase;margin-bottom:26px}
.logo-row{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:18px 44px}
.logo-row li{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--muted)}
.logo-row img{width:22px;height:22px;opacity:.75}
.logo-strip .note{text-align:center;margin:26px auto 0}

/* ---------- region / A–Z lists ---------- */
.region h3{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.region h3 small{font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted)}
.az-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:40px}
.az-tabs button{font:inherit;font-size:14px;font-weight:600;min-width:40px;height:40px;padding:0 12px;border-radius:980px;border:0;cursor:pointer;background:rgba(0,0,0,.06);color:var(--ink);transition:background .2s,color .2s}
.az-tabs button:hover{background:rgba(0,0,0,.1)}
.az-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.az-tabs button small{font-size:11px;font-weight:500;opacity:.6;margin-left:4px}
.az-panel{margin-top:26px;columns:4 180px;column-gap:28px;list-style:none}
.az-panel li{break-inside:avoid;padding:5px 0}
.az-panel a{font-size:15px;color:var(--ink);text-decoration:none}
.az-panel a:hover{color:var(--link);text-decoration:underline}
.az-letter{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);margin:24px 0 4px}

/* ---------- long-form / legal ---------- */
.doc{display:grid;grid-template-columns:230px 1fr;gap:80px;align-items:start}
.toc{position:sticky;top:90px}
.toc p{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc ol{list-style:none;display:grid;gap:2px}
.toc a{display:block;padding:5px 0;font-size:14px;color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--ink)}
.prose{max-width:760px}
.prose h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.035em;line-height:1.15;margin:64px 0 14px;scroll-margin-top:80px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;font-weight:600;letter-spacing:-.02em;margin:30px 0 8px}
.prose p,.prose li{font-size:17px;line-height:1.62;color:#424245}
.prose p+p{margin-top:14px}
.prose ul,.prose ol{padding-left:22px;margin:14px 0;display:grid;gap:8px}
.prose a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--ink)}
.callout{margin:26px 0;border-radius:22px;padding:22px 26px;background:var(--mist);font-size:16px;line-height:1.55;color:var(--ink)}
.white .callout{background:var(--mist)}
.light .callout{background:var(--paper)}

/* ---------- contact aside variants ---------- */
.glass .ticks{margin:26px 0 30px}
.glass .ticks li{font-size:16px}
.aside-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);list-style:none}
/* stretched call card: the facts row is the card footer, level with the form's submit button */
.call-card > .btn:has(+ .aside-facts){margin-bottom:30px}
.call-card > .aside-facts{margin-top:auto}
.aside-facts b{display:block;font-size:24px;font-weight:700;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.aside-facts span{display:block;font-size:13px;color:var(--muted-d);margin-top:2px;line-height:1.35;text-wrap:balance}

/* ---------- responsive ---------- */
@media(max-width:1068px){
  .cards.c4{grid-template-columns:repeat(2,1fr)}
  .drop-states{grid-template-columns:repeat(4,1fr)}
  .split{gap:50px}
  .doc{grid-template-columns:1fr;gap:30px}
  .toc{position:static}
}
@media(max-width:833px){
  .nav-links{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:60px}
  .nav-item{display:block}
  .nav-drop-btn{width:100%;justify-content:space-between;font-size:28px;font-weight:600;letter-spacing:-.03em;color:#f5f5f7;padding:10px 0}
  .nav-drop-btn::after{width:9px;height:9px;border-width:2px}
  .drop{position:static;opacity:1;visibility:visible;transform:none;display:none;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0}
  .nav-item.open .drop{display:block}
  .drop-in{padding:4px 0 16px;grid-template-columns:1fr;gap:18px}
  .drop-list{grid-template-columns:1fr}
  .drop-states{grid-template-columns:repeat(2,1fr)}
  .nav-links .drop a{font-size:17px;padding:7px 0}
  .nav-links .drop a small{display:none}
  .nav-links .drop-states a{font-size:15px}
  .cards.c2,.cards.c3,.quotes{grid-template-columns:1fr}
  .layer{grid-template-columns:1fr;gap:14px}
  .split{grid-template-columns:1fr;gap:40px}
  .split.rev > .media,.split.rev > figure{order:-1}
  .ticks.cols{grid-template-columns:1fr}
  .page-hero,.page-hero.compact{padding:112px 0 90px}
}
@media(max-width:640px){
  .cards.c4{grid-template-columns:1fr}
  .card{padding:30px 24px;border-radius:26px}
  .case-body{padding:26px 22px 28px}
  .layer{padding:24px 22px;border-radius:24px}
  .cta-bar{padding:26px 22px}
  .cta-bar .btn{width:100%}
  .page-hero,.page-hero.compact{padding:108px 0 80px}
  .page-hero .hero-cta{padding:0}
  .page-hero.left .hero-cta{align-items:stretch}
  .row-cta{flex-direction:column;align-items:stretch}
  .aside-facts{grid-template-columns:1fr 1fr 1fr;gap:10px}
  .aside-facts b{font-size:20px}
  .dt th,.dt td{padding:16px 18px}
  .az-panel{columns:2 140px}
}

/* ---------- footer: five columns, form note links ---------- */
.foot-top.five{grid-template-columns:1.5fr repeat(4,1fr)}
.form-note a{color:var(--link-d);text-decoration:none}
.form-note a:hover{text-decoration:underline}
@media(max-width:1068px){
  .foot-top.five{grid-template-columns:repeat(4,1fr)}
  .foot-top.five .foot-brand{grid-column:1/-1}
}
@media(max-width:833px){.foot-top.five{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.foot-top.five{grid-template-columns:1fr 1fr}}

/* ---------- misc layout helpers ---------- */
.steps.five{grid-template-columns:repeat(5,1fr)}
.steps.five .step{padding:30px 24px}
.steps.five .step-num{font-size:48px;margin-bottom:22px}
.tile-link{margin-top:26px}
/* same gap under the chips in both tiles, so the two chip rows line up side by side */
.t-web .tile-link,.t-shop .tile-link{margin-top:22px}
/* web/SEO tiles are flex columns of equal height: with no .tile-meta row above it (that row is
   already pinned), the link is pinned to the tile foot so both links line up side by side */
.t-web > .tile-link:where(:not(.tile-meta + *)),.t-shop > .tile-link:where(:not(.tile-meta + *)){margin-top:auto;padding-top:26px}
.h3-lg{font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:-.045em;line-height:1.08}
.cards.stack{grid-template-columns:1fr;margin-top:0}
.cards.stack .card{padding:28px 30px}
@media(max-width:1068px){.steps.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:833px){.steps.five{grid-template-columns:1fr 1fr}}
/* 2 + 2 + 1: the fifth step sits centred at the same width instead of stranded on the left (same treatment as .work-grid) */
@media(min-width:641px) and (max-width:833px){.steps.five > li:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 10px)}}
@media(max-width:640px){.steps.five{grid-template-columns:1fr}}

/* ---------- fixes from visual QA ---------- */
.work-head > .link,.work-head > .rail-ctrl{flex-shrink:0;white-space:nowrap}
.pills > li:has(> a){padding:0}
.pills > li > a{display:block;padding:6px 12px;border-radius:980px;color:inherit;text-decoration:none;transition:background .2s}
.pills.lg > li > a{padding:9px 16px}
.pills > li > a:hover{background:rgba(0,0,0,.07)}
.dark .pills > li > a:hover,.ink .pills > li > a:hover{background:rgba(255,255,255,.12)}

/* ---------- tables become stacked cards on phones ---------- */
@media(max-width:640px){
  .table-wrap{background:none;border-radius:0;overflow:visible}
  .white .table-wrap{background:none}
  .dt{min-width:0;display:block}
  .dt thead{display:none}
  .dt tbody{display:grid;gap:12px}
  .dt tbody tr{display:block;border:0;border-radius:22px;padding:20px 20px 14px;background:var(--paper)}
  .white .dt tbody tr{background:var(--mist)}
  .dt tbody th{display:block;padding:0 0 10px;font-size:18px;letter-spacing:-.02em}
  .dt td{display:block;padding:8px 0;border-top:1px solid rgba(0,0,0,.07);background:none}
  .dt td.hl{background:none}
  .dt td[data-label]::before{content:attr(data-label);display:block;margin-bottom:3px;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
  .dt td.hl[data-label]::before{color:var(--blue)}
  .dt .yes::before,.dt .no::before{display:none}
  .dt td.yes[data-label]::before,.dt td.no[data-label]::before{display:block;width:auto;height:auto;border-radius:0;background:none;margin-right:0;top:0}
}

/* ---------- shared requests from page builds ---------- */
.prose a,.faq-list a,.card p a,.copy p a,.lede a,.note a,.step p a,.case-body p a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.dark .faq-list a,.dark .card p a,.ink p a,.dark .copy p a,.dark .lede a,.page-hero .lede a,.dark .note a,.dark .case-body p a{color:var(--link-d)}
.page-hero .lede + .lede{margin-top:14px}
.page-hero .wrap > .stats{padding-left:0;padding-right:0}
.white .step{background:var(--mist)}
.dark .step{background:var(--graphite);color:#f5f5f7}
.dark .step p{color:var(--muted-d)}
.t-web .link,.flow-card.us .link,.cta-bar .link{color:var(--link-d)}
.page-hero .pills > *{background:rgba(255,255,255,.1);color:#f5f5f7}
.page-hero .pills > li > a:hover{background:rgba(255,255,255,.16)}
.page-hero .center .pills,.page-hero:not(.left) .pills{justify-content:center}
.soon{cursor:default;opacity:.5}
.nav-links .drop-states .soon{display:block;padding:5px 0;font-size:13px;font-weight:500;color:rgba(245,245,247,.85)}
.foot-col .soon{display:inline-block;padding:4px 0}
.pills > li > .soon{display:block;padding:6px 12px}
.pills.lg > li > .soon{padding:9px 16px}
.split > .copy > p{font-size:19px;line-height:1.5;color:var(--muted);margin-top:18px}

/* ==========================================================================
   Icons (Lucide, inlined by build.py as {{icon:name}}) + icon-led components
   ========================================================================== */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.2em;height:1.2em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.icon{display:inline-grid;place-items:center;flex-shrink:0;width:52px;height:52px;border-radius:16px;margin-bottom:24px;background:linear-gradient(160deg,#fff 0%,#eef5fc 100%);box-shadow:inset 0 0 0 1px rgba(0,114,188,.14),0 1px 2px rgba(0,0,0,.04)}
.icon .ic{width:26px;height:26px;stroke:url(#ig-l)}
.dark .icon,.ink .icon,.t-web .icon,.cmp.us .icon,.promise-card .icon,.cta-bar .icon{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.dark .icon .ic,.ink .icon .ic,.t-web .icon .ic,.cmp.us .icon .ic,.promise-card .icon .ic,.cta-bar .icon .ic{stroke:url(#ig-d)}
.icon.sm{width:40px;height:40px;border-radius:12px;margin-bottom:0}
.icon.sm .ic{width:20px;height:20px}

/* card header: icon left, index right */
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}
.card-head .icon{margin-bottom:0}
.idx{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--muted);font-variant-numeric:tabular-nums}
.dark .idx,.ink .idx{color:var(--muted-d)}

/* "the fix" footer row inside a card */
.fix{margin-top:auto;padding-top:26px}
.fix > div{display:flex;gap:10px;align-items:flex-start;padding-top:18px;border-top:1px solid rgba(0,0,0,.08);font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.4;color:var(--ink)}
.fix .ic{width:20px;height:20px;color:var(--blue);margin-top:0}
.dark .fix > div,.ink .fix > div{border-top-color:rgba(255,255,255,.12);color:#f5f5f7}
.dark .fix .ic,.ink .fix .ic{color:var(--link-d)}

/* horizontal card: icon beside text */
.card.hz{flex-direction:row;gap:18px;align-items:flex-start}
.card.hz h3{font-size:20px;letter-spacing:-.025em;margin-bottom:6px}
.card.hz p{font-size:16px}

/* problem / solution rows (leak cards) */
.kv{margin-top:14px}
.kv-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.kv-label .ic{width:15px;height:15px}
.kv.bad .kv-label .ic{color:#d70015}
.kv p{font-size:16px;line-height:1.45}
.card .kv.good{margin-top:auto;padding-top:18px}
.kv.good > div{padding:16px 18px;border-radius:18px;background:rgba(0,114,188,.07)}
.kv.good .kv-label{color:#005f9e}
.kv.good p{color:var(--ink);font-weight:500}
.card.leak h3{margin-bottom:4px}
.card.leak .kv.bad{margin-bottom:22px}

/* steps with icons */
.step-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:22px}
.step-top .step-num{margin-bottom:0}
.steps.five .step-top .step-num{margin-bottom:0}

/* layer rows with icons */
.layer{grid-template-columns:minmax(260px,320px) 1fr}
.layer-head{display:flex;align-items:center;gap:16px}
.layer-head .card-tag{margin:0 0 4px}
.layer-line span{display:inline-flex;align-items:center;gap:8px}
.layer-line .ic{width:15px;height:15px}

/* region / group headers with a small icon */
.head-row{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.head-row h3{margin:0;flex:1}
.region .head-row h3{display:flex;justify-content:space-between;align-items:baseline;gap:10px}

/* pills with icons; unlinked pills stay full strength */
.pills .ic{width:14px;height:14px;margin-right:5px;vertical-align:-2px;color:var(--muted)}
.dark .pills .ic,.ink .pills .ic{color:var(--muted-d)}
.pills > li > .soon{opacity:1;cursor:default}

/* platform chips */
.platforms{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.platforms li{display:flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:16px;background:var(--mist);font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.platforms img{width:22px;height:22px}

/* testimonial header */
.quote-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.quote-top .stars{margin:0}

/* compare card header */
.cmp-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.cmp-head h3{margin:0}
.cmp.us .cmp-head h3{margin:0}

/* bento tile header */
.tile-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.tile-top .icon{margin:0}
.tile-top .tile-tag{margin:0}

@media(max-width:833px){
  .layer{grid-template-columns:1fr}
}
@media(max-width:640px){
  .icon{width:46px;height:46px;border-radius:14px;margin-bottom:20px}
  .icon .ic{width:23px;height:23px}
  .card.hz,.cards.stack .card.hz{padding:24px 22px}
  .platforms li{padding:10px 14px 10px 12px;font-size:14px}
}

/* ---------- homepage v2 helpers ---------- */
.metro-row{margin-top:56px}
.metro-link{margin-top:26px}
.split.spin{margin-top:100px}
.cmp .cmp-head h3{font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.cmp.us .cmp-head h3{color:#f5f5f7;font-size:24px}
.cta-bar .head-row{margin:0;align-items:flex-start;flex:1;min-width:280px}
.cta-bar .head-row h3{font-size:22px}
.svc-foot .link{font-size:17px}
@media(max-width:640px){.split.spin{margin-top:70px}.cta-bar .head-row{min-width:0}}

/* ---------- pills: one padding source, whatever the inner element ---------- */
.pills.pills > li:has(> a),.pills.pills > li:has(> .soon){padding:0;background:none}
.pills > li > a,.pills > li > .soon{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:980px;background:rgba(0,0,0,.05);color:var(--ink);text-decoration:none;line-height:1.3}
.light .pills > li > a,.light .pills > li > .soon{background:rgba(0,0,0,.06)}
.card .pills > li > a,.card .pills > li > .soon{background:var(--mist)}
.white .card .pills > li > a,.white .card .pills > li > .soon{background:#fff}
.pills > li > a:hover{background:rgba(0,114,188,.1);color:var(--link)}
.dark .pills > li > a,.dark .pills > li > .soon,.ink .pills > li > a,.ink .pills > li > .soon{background:rgba(255,255,255,.1);color:#f5f5f7}
.pills .ic{margin-right:0}

/* region cards */
.region-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.region-head h3{margin:0;font-size:22px;letter-spacing:-.03em;line-height:1.1}
.region-head small{display:block;margin-top:3px;font-size:13px;font-weight:500;color:var(--muted);text-wrap:pretty}
.region .pills{margin-top:0;gap:8px}
.region .pills > li > a,.region .pills > li > .soon{font-size:14px}

/* metro card */
.metro-card{margin-top:20px;padding:30px 30px 32px}
.metro-card .region-head{margin-bottom:20px}
.metro-card .pills{margin-top:0;gap:8px}
.metro-card .pills > li > a,.metro-card .pills > li > .soon{font-size:14px;padding:8px 14px}
.metro-card .foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid rgba(0,0,0,.08);font-size:14px;color:var(--muted)}
.platforms{gap:10px}
.platforms li{padding:10px 16px 10px 12px;font-size:14px;gap:9px}
.platforms img{width:20px;height:20px}

/* links inside bento/tick lists read as list items, not blue links */
.tile li a,.ticks li a{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s var(--ease)}
.tile li a:hover,.ticks li a:hover{background-size:100% 1px}
/* testimonials: equal-height cards, caption pinned to the bottom */
.quotes > li{display:flex}
.quotes > li > .quote{flex:1}

/* three-stat rows: stacked label rows on phones instead of a 2+1 grid */
@media(max-width:640px){
  .stats.inline:has(> li:nth-child(3):last-child){grid-template-columns:1fr;row-gap:0}
  .stats.inline:has(> li:nth-child(3):last-child) .stat{display:grid;grid-template-columns:minmax(128px,auto) 1fr;align-items:center;gap:18px;padding:18px 0;border-left:none;border-top:1px solid rgba(0,0,0,.1)}
  .dark .stats.inline:has(> li:nth-child(3):last-child) .stat{border-top-color:var(--line-d)}
  .stats.inline:has(> li:nth-child(3):last-child) .stat:last-child{border-bottom:1px solid rgba(0,0,0,.1)}
  .stats.inline:has(> li:nth-child(3):last-child) .stat b{font-size:44px}
  .stats.inline:has(> li:nth-child(3):last-child) .stat span{margin-top:0;max-width:none}
}

/* ---------- QA round 3: shared chips, pills and tap targets ---------- */
/* pill links: invisible hit area reaches 40px+ (rows sit 8px apart, so areas never overlap) */
.pills > li > a{position:relative}
.pills > li > a::after{content:"";position:absolute;inset:-4px 0}
/* bento/tick list links: tap area covers the row gap */
.tile li a,.ticks li a{position:relative}
.tile li a::after,.ticks li a::after{content:"";position:absolute;inset:-6px 0}
/* bento chips: one size in both tiles; the three SEO chips fit one row beside the web chips */
.tile-meta{gap:6px}
.tile-meta span{font-size:12px;padding:6px 10px}
/* side-by-side tiles: if the SEO chips ever wrap (1069-1105px), the rows fill instead of leaving one chip alone */
@media(min-width:1069px){.t-shop .tile-meta span{flex:1 1 auto;text-align:center}}
@media(max-width:640px){
  /* list links become 40px rows: 18px row gap, hit area fills it */
  .tile ul:has(> li > a),.ticks:has(> li > a){row-gap:18px}
  .tile li a::after,.ticks li a::after{inset:-9px 0}
  /* chips: 3 + 2 in the web tile; rows that cannot take 3 fill the width instead of leaving one chip alone */
  .tile-meta span{padding:6px 9px}
  .t-shop .tile-meta span,.layer .pills > *,.platforms li{flex:1 1 auto;justify-content:center;text-align:center}
  /* state and metro pills: tighter pills so rows pair up (no single pill stranded on a row) */
  .region .pills{gap:8px 6px}
  .region .pills > li > a,.region .pills > li > .soon{padding:7px 11px}
  .metro-card .pills{gap:8px 6px}
  .metro-card .pills > li > a,.metro-card .pills > li > .soon{font-size:13px;padding:8px 11px;gap:5px}
  /* inner-page hero with three stats: stacked label rows, not a 2 + 1 grid */
  .page-hero .stats.n3{grid-template-columns:1fr;row-gap:0}
  .page-hero .stats.n3 .stat{display:grid;grid-template-columns:158px 1fr;align-items:center;gap:18px;padding:18px 0;border-left:none;border-top:1px solid var(--line-d)}
  .page-hero .stats.n3 .stat:last-child{border-bottom:1px solid var(--line-d)}
  .page-hero .stats.n3 .stat > span{margin-top:0;max-width:none}
}

/* even two-column pill grid: no pill ever alone on the last row (region cards) */
.pills.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pills.grid2 > li > a,.pills.grid2 > li > .soon{display:flex;width:100%;justify-content:flex-start}
/* how-it-works cards: icon header keeps the same 24px rhythm to the title as other cards */
.flow-card .card-head + h3{margin-top:0}

/* ---------- portfolio cards in a grid (e.g. White-label SEO page) ---------- */
.work-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:70px}
.work-grid .work-card{scroll-snap-align:none}
@media(max-width:1068px){.work-grid{grid-template-columns:1fr 1fr}.work-grid > li:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - 10px);justify-self:center}}
@media(max-width:833px){.work-grid{grid-template-columns:1fr}.work-grid > li:last-child:nth-child(odd){max-width:none}}

/* ---------- nav: Services / Locations label links to the main page, the arrow opens the menu ---------- */
.nav-links .nav-top{padding-right:2px}
.nav-drop-btn{padding:14px 6px 14px 4px}
/* desktop: the 16px arrow button gets a 24px-wide tap area (touch tablets/laptops in landscape have no hover); look unchanged */
@media(min-width:834px){.nav-drop-btn{position:relative}.nav-drop-btn::before{content:"";position:absolute;inset:0 -6px 0 -2px}}
.nav-item:hover .nav-top,.nav-item.open .nav-top,.nav-item[data-current] .nav-top,.nav-item[data-current] .nav-drop-btn{color:#fff}
@media(max-width:833px){
  .nav-item{display:flex;flex-wrap:wrap;align-items:center}
  .nav-links .nav-item .nav-top{flex:1;text-align:left}
  .nav-item .nav-drop-btn{flex:0 0 48px;width:48px;height:48px;justify-content:center;padding:0}
  .nav-item .drop{flex-basis:100%}
}


/* ---- about.css ---- */
/* About page (/about.html) */
.pg-about .page-hero .lede + .lede{margin-top:16px}
/* phones: the two intro paragraphs (13-14 lines) read left-aligned, at the 17px/1.47 phone copy size, so the
   hero buttons come up into the first screen (Book a call at 390x844: y 797-846 before, about 727-777 after) */
@media(max-width:640px){
  .pg-about .page-hero .lede{text-align:left;font-size:17px;line-height:1.47}
}

/* hero stat: the no-wrap hours span stays inline (".stat span" would turn it into a spaced block) */
.pg-about .stat span span{display:inline;margin:0;max-width:none}

/* hero meta: long items wrap as centered lines with the dot inline (no stray bullet on the left);
   display:flex keeps this layout, not the dots-in-a-column grid the other heroes use on phones (base.css) */
@media(max-width:640px){
  .pg-about .hero-meta{display:flex;flex-direction:column;align-items:center;gap:10px}
  .pg-about .hero-meta li{display:block;max-width:300px;text-align:center;line-height:1.45}
  .pg-about .hero-meta li::before{display:inline-block;vertical-align:middle;margin:-2px 8px 0 0}
}

/* story copy: the intro grid is one column up to 1068px; hold the paragraph to the 720px lede measure (~80 characters a line) */
.pg-about #story .about-copy p{max-width:720px}
/* story traits: four icon cards; 21px titles so "not subcontractors" fits the 4-up column at 1440 */
.pg-about .traits h3{font-size:21px}
/* multi-column rows: icon, title and text share row tracks, so a two-line title never steps the text below it */
@media(min-width:641px){
  .pg-about .traits .card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
}

/* principles: one row per commitment (icon | number + title | explanation) instead of tall empty cards */
.pg-about .principles{grid-template-columns:1fr;gap:14px}
.pg-about .principles h3{font-size:clamp(21px,1.9vw,24px)}
@media(min-width:641px){
  .pg-about .principles .card{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"icon idx" "icon title" "icon text";column-gap:24px;align-items:start;padding:30px 32px}
  .pg-about .principles .card-head{display:contents}
  .pg-about .principles .icon{grid-area:icon}
  .pg-about .principles .idx{grid-area:idx;margin-bottom:6px}
  .pg-about .principles h3{grid-area:title;margin-bottom:8px}
  .pg-about .principles p{grid-area:text}
}
@media(min-width:834px){
  .pg-about .principles .card{grid-template-columns:52px minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"icon idx text" "icon title text";column-gap:34px;align-items:center;padding:32px 36px}
  .pg-about .principles .idx{align-self:end;margin-bottom:4px}
  .pg-about .principles h3{align-self:start;margin:0}
}

/* how we are set up: two-by-two icon rows, then the compare cards under a visible title */
.pg-about .setup .card.hz h3{font-size:21px}
.pg-about .cmp-intro{display:flex;align-items:center;gap:14px;margin-top:90px}
.pg-about .cmp-intro h3{font-size:clamp(21px,2.2vw,26px);font-weight:700;letter-spacing:-.03em;line-height:1.2}
.pg-about .cmp-intro + .compare{margin-top:28px}
.pg-about .cmp dd a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.pg-about .cmp.us dd a{color:var(--link-d)}
.pg-about .cmp-head h3{line-height:1.15}
/* row labels: icon + label with a real gap, icon in the accent color */
.pg-about .cmp dt{display:flex;align-items:center;gap:7px}
.pg-about .cmp dt .ic{width:15px;height:15px;color:var(--blue)}
.pg-about .cmp.us dt .ic{color:var(--link-d)}
@media(min-width:834px){
  /* the same row lines up across all three cards, whatever wraps */
  .pg-about .compare .cmp{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:18px;align-content:start}
  .pg-about .compare .cmp dl{display:contents}
  .pg-about .compare .cmp-head{margin-bottom:4px}
}
/* narrow three-up cards and phones: icon above the name so "Freelance marketplace" stays on one line */
@media(min-width:834px) and (max-width:1068px),(max-width:640px){
  .pg-about .cmp-head{flex-direction:column;align-items:flex-start;gap:14px}
}
/* tablet: full-width cards read as two columns of rows */
@media(min-width:641px) and (max-width:833px){
  .pg-about .compare .cmp dl{grid-template-columns:1fr 1fr;gap:18px 26px}
  .pg-about .compare .cmp dl > div:last-child:nth-child(odd){grid-column:1/-1}
}

/* what we turn down: the declined mark sits where an index would */
.pg-about .no-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(215,0,21,.07);color:#d70015}
.pg-about .no-mark .ic{width:18px;height:18px}
.pg-about .declines .card-head{align-items:center}
@media(min-width:641px) and (max-width:833px){
  .pg-about .declines{grid-template-columns:1fr 1fr}
}

@media(max-width:833px){
  .pg-about .cmp-intro{margin-top:70px;align-items:flex-start}
}
@media(max-width:640px){
  .pg-about .cmp-intro{margin-top:60px}
  .pg-about .setup .card.hz h3{font-size:20px}
  /* the hours phrase may wrap in the narrow text column instead of leaving a half-width first line */
  .pg-about .setup .nw{white-space:normal}
}


/* ---- contact.css ---- */
/* Contact page. The compact hero flows straight into the lead form (both dark), so the form
   section header is kept smaller than a normal h2. A fading hairline opens the form section so
   the hero and the form head read as two steps, not two stacked headlines in one band. */
.pg-contact .contact-head h2{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.045em}
.pg-contact .contact-head .lede{font-size:clamp(17px,1.6vw,21px);margin-top:16px}
.pg-contact .contact-grid{margin-top:54px}

/* both glass cards open the same way: icon badge on its own line, then the title */
.pg-contact .call-card > .icon,
.pg-contact .form-card h3 > .icon{display:grid;margin-bottom:22px}

/* call card: ticks, then icon rows (hours / proposal / email), then the button pinned to the
   bottom so it lines up with the form's submit button. When the card is stretched to the form's
   height, the spare height is split between the two auto margins (above the rows and above the
   button) so it reads as even rhythm rather than one empty band under the checklist. */
.pg-contact .call-card .call-list{margin:28px 0 34px}
.pg-contact .call-rows{list-style:none;display:grid;gap:16px;margin-top:auto;padding-top:28px;border-top:1px solid rgba(255,255,255,.1)}
.pg-contact .call-rows li > div,
.pg-contact .call-rows .row-link{display:flex;align-items:center;gap:14px}
.pg-contact .call-rows .row-link{text-decoration:none;color:inherit;border-radius:14px}
.pg-contact .call-rows b{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted-d)}
.pg-contact .call-rows .val{display:block;margin-top:3px;font-size:16px;line-height:1.35;color:#f5f5f7}
.pg-contact .call-rows .row-link .val{color:var(--link-d);word-break:break-word}
.pg-contact .call-rows .row-link:hover .val{text-decoration:underline}
.pg-contact .call-act{margin-top:auto;padding-top:30px}

/* three ways in: action cards + a facts strip. The strip uses the cards' grid (same 20px
   gutters, same 30px left inset) so its columns sit under the cards; dividers run down the gutter centres */
.pg-contact .ways .card-head{align-items:center}
.pg-contact .ways .card-head .card-tag{margin:0}
.pg-contact .way-act{margin-top:auto;padding-top:28px}
.pg-contact .way-facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);column-gap:20px;margin-top:20px;background:var(--paper);border-radius:28px}
.pg-contact .way-facts li{position:relative;padding:30px 24px 32px 30px}
.pg-contact .way-facts li + li::before{content:"";position:absolute;left:-10px;top:0;bottom:0;width:1px;background:rgba(0,0,0,.08)}
.pg-contact .way-facts .head-row{margin-bottom:14px}
.pg-contact .way-facts h3{font-size:19px;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.pg-contact .way-facts p{font-size:16px;line-height:1.47;color:var(--muted)}

/* what happens next */
.pg-contact .sec-more{max-width:720px;margin:20px auto 0;font-size:17px;line-height:1.5;color:var(--muted)}
.pg-contact .sec-more a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.pg-contact .step h3{line-height:1.22}

/* what to put in the brief: copy + CTA left (sticky), icon checklist panel right */
.pg-contact .brief-grid{display:grid;grid-template-columns:.9fr 1.1fr;column-gap:70px;align-items:start}
.pg-contact .brief-side{position:sticky;top:100px}
.pg-contact .brief-lede{font-size:19px;line-height:1.5;color:var(--muted);margin-top:18px}
.pg-contact .brief-side .cta-bar{margin-top:36px}
.pg-contact .brief-list{list-style:none;background:var(--paper);border-radius:28px;padding:6px 0}
.pg-contact .brief-list li{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"icon text idx";column-gap:18px;align-items:start;margin:0 30px;padding:26px 0}
.pg-contact .brief-list li + li{border-top:1px solid rgba(0,0,0,.08)}
.pg-contact .brief-list li > .icon{grid-area:icon}
.pg-contact .brief-list li > div{grid-area:text;padding-top:8px}
.pg-contact .brief-list li > .idx{grid-area:idx;padding-top:10px}
.pg-contact .brief-list h3{font-size:20px;font-weight:700;letter-spacing:-.025em;line-height:1.22;margin-bottom:6px}
.pg-contact .brief-list p{font-size:16px;line-height:1.47;color:var(--muted)}
.pg-contact .brief-list p a{color:var(--link);text-decoration:underline;text-underline-offset:2px}

/* FAQ side heading sized for its narrow column */
.pg-contact .faq-side h2{font-size:clamp(32px,4vw,50px)}

/* side-by-side cards: a little more air in the checklist and the icon rows */
@media(min-width:834px){
  .pg-contact .call-card .call-list{gap:18px}
  .pg-contact .call-rows{gap:20px}
}
@media(max-width:1068px){
  .pg-contact .brief-grid{column-gap:50px}
  .pg-contact .way-facts li{padding:26px 24px 28px 30px}
  .pg-contact .way-facts h3{font-size:18px}
}
@media(max-width:833px){
  /* stacked cards: the form comes first, straight under the section head, so every
     "Request my free audit" / "Go to the form" jump to #contact lands on the form */
  .pg-contact .contact-grid .form-card{order:-1}
  .pg-contact .way-facts{grid-template-columns:1fr;column-gap:0}
  .pg-contact .way-facts li + li::before{content:none}
  .pg-contact .way-facts li + li{box-shadow:inset 0 1px 0 rgba(0,0,0,.08)}
  .pg-contact .brief-grid{grid-template-columns:1fr}
  .pg-contact .brief-side{position:static}
  .pg-contact .brief-list{margin-top:44px}
}
/* 834-919px: three ~250px columns are too narrow for the action buttons ("Open the calendar" wraps,
   the email button runs into the card padding) and the facts headings leave a single word on the last line, so this band
   keeps the tablet layout: stacked horizontal cards and a one-column facts strip */
@media(min-width:834px) and (max-width:919px){
  .pg-contact .cards.ways{grid-template-columns:1fr}
  .pg-contact .way-facts{grid-template-columns:1fr;column-gap:0}
  .pg-contact .way-facts li + li::before{content:none}
  .pg-contact .way-facts li + li{box-shadow:inset 0 1px 0 rgba(0,0,0,.08)}
}
/* tablet: the stacked action cards turn horizontal (icon left, tag + copy + action right) */
@media(min-width:641px) and (max-width:919px){
  .pg-contact .ways .card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr auto;column-gap:24px;align-items:start}
  .pg-contact .ways .card-head{display:contents}
  .pg-contact .ways .card-head .icon{grid-column:1;grid-row:1 / span 4}
  .pg-contact .ways .card-head .card-tag{grid-column:2;grid-row:1;margin:4px 0 8px}
  .pg-contact .ways .card > h3{grid-column:2;grid-row:2}
  .pg-contact .ways .card > p{grid-column:2;grid-row:3}
  .pg-contact .ways .way-act{grid-column:2;grid-row:4;padding-top:22px}
  .pg-contact .way-facts li{padding-left:30px;padding-right:30px}
  .pg-contact .way-facts .head-row{margin-bottom:8px}
  .pg-contact .way-facts p{padding-left:54px}
}
@media(max-width:640px){
  .pg-contact .contact-head h2{font-size:30px}
  .pg-contact .contact-head h2 br{display:inline}
  .pg-contact .contact-grid{margin-top:40px}
  .pg-contact .call-act .btn{width:100%}
  .pg-contact .way-act .btn{width:100%}
  .pg-contact .way-facts li{padding:26px 24px 28px}
  .pg-contact .brief-list{margin-top:36px;border-radius:26px}
  .pg-contact .brief-list li{grid-template-columns:auto 1fr;grid-template-areas:"icon idx" "text text";row-gap:16px;margin:0 22px;padding:24px 0}
  .pg-contact .brief-list li > div{padding-top:0}
  .pg-contact .brief-list li > .idx{justify-self:end;align-self:center;padding-top:0}
}


/* ---- locations.css ---- */
/* Location pages (/locations.html, /states/<state>.html, /locations/<name>.html). Body class: pg-loc */

/* hero stats with 2 or 3 items: keep them centered instead of leaving an empty 4th column */
@media(min-width:834px){
  .pg-loc .page-hero .stats.n2{grid-template-columns:repeat(2,1fr);max-width:640px}
  .pg-loc .page-hero .stats.n3{grid-template-columns:repeat(3,1fr);max-width:920px}
}
/* tablets: three stats stay on one row (not 2 + 1); phones get the stacked rows from components.css */
@media(min-width:641px) and (max-width:833px){
  .pg-loc .page-hero .stats.n3{grid-template-columns:repeat(3,1fr)}
  .pg-loc .page-hero .stats.n3 .stat:nth-child(3){border-left:1px solid var(--line-d);padding-left:18px}
}

/* hero CTA with a long place name ("Free audit for a Picatinny Arsenal client"): when the label wraps
   (phones), it splits into even lines, never "client" alone on the second line */
.pg-loc .page-hero .hero-cta .btn{text-wrap:balance}

/* linked cards inside a card grid fill the cell */
.pg-loc .cards > li > a.card{height:100%}

/* ---------- location pills ----------
   one padding source (the inner a/span); three looks at the same size:
   a      = page live (blue, map-pin)
   .soon  = page coming soon (outline; the build also turns links to unbuilt pages into .soon)
   .area  = an area we cover (plain, map-pin) */
.pg-loc .pills.loc-pills{gap:8px;margin-top:0}
.pg-loc .pills.loc-pills > li{padding:0;background:none}
.pg-loc .pills.loc-pills > li > a,
.pg-loc .pills.loc-pills > li > span{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:980px;font-size:14px;font-weight:500;line-height:1.3;text-decoration:none;white-space:nowrap;opacity:1}
.pg-loc .pills.loc-pills > li > a{background:rgba(0,114,188,.08);color:var(--link);font-weight:600;box-shadow:inset 0 0 0 1px rgba(0,114,188,.24)}
.pg-loc .pills.loc-pills > li > a:hover{background:rgba(0,114,188,.15);color:var(--link)}
.pg-loc .pills.loc-pills > li > a .ic{color:var(--link)}
.pg-loc .pills.loc-pills > li > .soon{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.pg-loc .pills.loc-pills > li > .area{background:var(--mist);color:var(--ink)}
.pg-loc .white .card .pills.loc-pills > li > .area{background:#fff}
.pg-loc .pills.loc-pills .ic{width:14px;height:14px;margin:0}
/* balanced rows: locations.py pill_grid() sets --pc (from 1069px) and --pc-m (834-1068px) on
   `.loc-pills.bal`, plus --pc-t (641-833px) on `.bal-t` lists, so a list splits into even rows and never
   leaves one pill alone. Columns size to their widest pill; pills in a column share that width.
   Below that they wrap freely (the index lists get a two-column grid on phones, see the 640px block). */
@media(min-width:834px){
  .pg-loc .pills.loc-pills.bal{display:grid;grid-template-columns:repeat(var(--pc-m),max-content);justify-content:start}
  .pg-loc .pills.loc-pills.bal > li{display:flex}
  .pg-loc .pills.loc-pills.bal > li > a,
  .pg-loc .pills.loc-pills.bal > li > span{flex:1;justify-content:center}
}
@media(min-width:1069px){
  .pg-loc .pills.loc-pills.bal{grid-template-columns:repeat(var(--pc),max-content)}
}
@media(min-width:641px) and (max-width:833px){
  .pg-loc .pills.loc-pills.bal-t{display:grid;grid-template-columns:repeat(var(--pc-t),max-content);justify-content:start}
  .pg-loc .pills.loc-pills.bal-t > li{display:flex}
  .pg-loc .pills.loc-pills.bal-t > li > a,
  .pg-loc .pills.loc-pills.bal-t > li > span{flex:1;justify-content:center}
}

/* key above the state list */
.pg-loc .loc-key{display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap;margin-top:44px;padding:16px 20px;border-radius:22px;background:var(--mist)}
.pg-loc .key-chips{display:flex;gap:8px;list-style:none;flex-shrink:0}
.pg-loc .key-chips span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:980px;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap}
.pg-loc .key-live{background:rgba(0,114,188,.08);color:var(--link);box-shadow:inset 0 0 0 1px rgba(0,114,188,.24)}
.pg-loc .key-live .ic{width:14px;height:14px}
.pg-loc .key-soon{background:#fff;color:var(--muted);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.pg-loc .loc-key p{flex:1;min-width:min(100%,300px);font-size:15px;line-height:1.5;color:var(--muted)}
.pg-loc .loc-key p a{color:var(--link);text-decoration:underline;text-underline-offset:2px}

/* region rows (index): head on the left, every state as a pill on the right.
   70px under the section head, like every card grid (.cards) */
.pg-loc .loc-regions{list-style:none;display:grid;gap:14px;margin-top:70px}
/* state pills: balanced lines (no pill alone on the last row, at any width); phones: two even columns */
@media(min-width:641px){
  .pg-loc .loc-region .pills.loc-pills{display:block;text-wrap:balance;margin-bottom:-8px}
  .pg-loc .loc-region .pills.loc-pills > li{display:inline-block;margin:0 8px 8px 0;vertical-align:top}
}
.pg-loc .loc-region{display:grid;grid-template-columns:220px 1fr;gap:18px 28px;align-items:center;padding:26px 30px}
.pg-loc .loc-region .region-head{margin:0}
.pg-loc .loc-metro-card{margin-top:20px}
.pg-loc .metro-card .foot a:not(.link){color:var(--link);text-decoration:underline;text-underline-offset:2px}

/* index: largest markets of every state, one tab per Census region (A–Z tab styles from the state page) */
.pg-loc .az-card.mk-card{margin-top:70px}
.pg-loc .mk-tabs button{height:62px}
.pg-loc .mk-state + .mk-state{margin-top:34px}
.pg-loc .mk-state .az-panel-head b{min-width:64px}
.pg-loc .mk-state .az-panel-head span a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(0,0,0,.2);text-underline-offset:3px}
.pg-loc .mk-state .az-panel-head span a:hover{color:var(--link);text-decoration-color:currentColor}
.pg-loc .mk-state .az-list{columns:4 170px}
/* 10 or 13 markets in four columns balance to 3+3+3+1 / 4+4+4+1: break them 4+4+2 / 5+5+3 instead, so no
   market sits alone in the last column (from 834px, where these lists always have at least three columns) */
@media(min-width:834px){
  .pg-loc .mk-state .az-list:has(> li:nth-child(10):last-child) > li:nth-child(4n),
  .pg-loc .mk-state .az-list:has(> li:nth-child(13):last-child) > li:nth-child(5n){break-after:column}
}

/* ---------- state page ---------- */
/* audit: coverage line + CTA as one bar under the cards */
.pg-loc .audit-foot{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:18px 18px 18px 22px;border-radius:28px;background:var(--paper)}
.pg-loc .audit-cover{flex:1 1 480px;display:flex;align-items:center;gap:14px;font-size:17px;font-weight:500;line-height:1.4;color:var(--ink)}

/* "content written by the team" row under the expertise cards */
.pg-loc .sv-byline{margin-top:20px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px 22px;padding:24px 28px;border-radius:28px;background:var(--paper)}
.pg-loc .white .sv-byline{background:var(--mist)}
.pg-loc .sv-byline p{font-size:16px;line-height:1.5;color:var(--muted)}
.pg-loc .sv-byline strong{color:var(--ink);font-weight:600}
.pg-loc .sv-byline .link{white-space:nowrap}

/* largest metros: ranked tiles, status line pinned to the foot */
.pg-loc .loc-metro{width:100%;padding:26px 24px 20px}
.pg-loc .loc-metro .card-head{margin-bottom:18px}
.pg-loc .loc-metro h3{font-size:22px;margin-bottom:4px}
.pg-loc .loc-metro p{font-size:15px;margin-bottom:18px}
.pg-loc .loc-status{margin-top:auto;padding-top:14px;border-top:1px solid rgba(0,0,0,.08);display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;line-height:1.35;color:var(--muted)}
.pg-loc .loc-status .ic{width:16px;height:16px}
.pg-loc a.loc-metro{box-shadow:inset 0 0 0 1.5px rgba(0,114,188,.35)}
.pg-loc a.loc-metro .loc-status{color:var(--link)}
.pg-loc a.loc-metro:hover h3{color:var(--link)}
/* head, name, count and status share row tracks across a grid row, so a status line that wraps to more
   lines ("See the / Corpus Christi / page") never pushes its divider out of line with its neighbours */
.pg-loc .loc-metros > li,
.pg-loc .loc-metros > li > a.loc-metro{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
.pg-loc .loc-metros .loc-status{margin-top:0}
/* a single market (DC): the card fills the row, as it does on tablets, instead of sitting alone in a 3-column grid */
.pg-loc .cards.loc-metros:has(> li:only-child){grid-template-columns:1fr}
/* c3 metro grid with 3n+1 cards (Illinois: 13): the #1 metro spans two columns so the last row holds two cards, not one */
@media(min-width:834px){.pg-loc .cards.c3.loc-metros > li:first-child:nth-last-child(3n+4){grid-column:span 2}}

/* every location A–Z */
.pg-loc .az-block{margin-top:100px}
.pg-loc .az-head{max-width:800px}
.pg-loc .az-counts{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-top:20px}
.pg-loc .az-counts li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;border-radius:14px;background:var(--mist);font-size:15px;color:var(--muted)}
.pg-loc .az-counts b{color:var(--ink);font-weight:600}
.pg-loc .az-counts .ic{width:18px;height:18px;stroke:url(#ig-l)}
.pg-loc .az-intro{margin-top:18px;font-size:17px;line-height:1.5;color:var(--muted)}
.pg-loc .az-card{margin-top:34px;padding:26px 28px 30px}
.pg-loc .az-card .az-tabs{display:grid;grid-template-columns:repeat(var(--az-cols,13),1fr);gap:6px;margin:0}
.pg-loc .az-card .az-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;height:54px;padding:0;border-radius:14px;background:#fff;font-size:16px;font-weight:700;line-height:1.05}
.pg-loc .az-card .az-tabs button small{margin:0;font-size:12px;font-weight:500;opacity:.72}
.pg-loc .az-card .az-tabs button:hover{background:rgba(0,114,188,.1)}
.pg-loc .az-card .az-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.pg-loc .az-card .az-tabs button[aria-selected="true"] small{opacity:.75}
.pg-loc .az-panel{margin-top:28px;columns:auto}
.pg-loc .az-panel[hidden]{display:none}
.pg-loc .az-panel-head{display:flex;align-items:baseline;gap:14px;padding-bottom:14px;border-bottom:1px solid rgba(0,0,0,.1)}
.pg-loc .az-panel-head b{font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:1;background:var(--grad-l);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-loc .az-panel-head span{font-size:15px;font-weight:500;color:var(--muted)}
.pg-loc .az-list{list-style:none;columns:5 160px;column-gap:28px;margin-top:6px}
.pg-loc .az-list li{break-inside:avoid;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:15px;line-height:1.35;color:var(--ink)}
.pg-loc .az-list a{color:var(--link);font-weight:600;text-decoration:none}
.pg-loc .az-list a::after{content:" →"}
.pg-loc .az-list a:hover{text-decoration:underline}
/* whole row is the link from 834px too (same 37px row as before; narrower screens get it in the 833px block) */
@media(min-width:834px){
  .pg-loc .az-list li:has(> a){padding:0}
  .pg-loc .az-list li > a{display:block;padding:8px 0}
}

/* related pages: icon tiles */
.pg-loc .cards.loc-links{margin-top:40px}
.pg-loc .loc-links > li{display:flex}
.pg-loc .loc-tile{flex:1;align-items:center;gap:14px;padding:18px 20px;border-radius:24px}
.pg-loc .loc-tile h3{flex:1;margin:0;font-size:18px;letter-spacing:-.02em}
.pg-loc .loc-tile > .ic{width:20px;height:20px;color:var(--link);transition:transform .25s var(--ease)}
.pg-loc .loc-tile:hover > .ic{transform:translateX(3px)}
.pg-loc #more .metro-card{margin-top:20px}

/* centered ledes (hero, process, contact): even lines instead of one to three words stranded on the last line
   ("to run.", "or not."). From 641px only: long phone ledes run past six lines, where balance leaves a lone word */
@media(min-width:641px){
  .pg-loc .page-hero .lede,.pg-loc #how .lede,.pg-loc .contact-head .lede{text-wrap:balance}
}

/* ---------- city page ---------- */
.pg-loc .loc-brand{display:flex;align-items:center;gap:10px}
.pg-loc .loc-brand .ic{width:18px;height:18px;color:var(--blue)}
.pg-loc .dark .loc-brand .ic{color:var(--link-d)}
/* a card straight under a section header sits at the same 70px as every card grid (.cards) */
.pg-loc .sec-head + .metro-card{margin-top:70px}

/* hero line for a name that exists in several states: "105 ZIP codes in Texas · Also in seven other states" */
.pg-loc .hero-meta.loc-also{margin-top:26px}
.pg-loc .hero-meta.loc-also a{display:inline-flex;align-items:center;min-height:40px;color:var(--link-d);text-decoration:underline;text-underline-offset:3px}
.pg-loc .hero-meta.loc-also a:hover{color:#fff}
.pg-loc .hero-meta.loc-also + .stats{margin-top:40px}

/* the same name in other states: one card per state, primary first */
.pg-loc .loc-states > .card{padding:26px 24px 26px}
.pg-loc .loc-states .card-head{margin-bottom:18px;align-items:center}
.pg-loc .loc-states .idx{font-size:13px;letter-spacing:.04em}
.pg-loc .loc-states h3{font-size:21px;letter-spacing:-.03em;margin-bottom:4px}
.pg-loc .loc-states h3 a{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat}
.pg-loc .loc-states h3 a:hover{color:var(--link)}
.pg-loc .loc-states .card > p{font-size:15px;line-height:1.4}
.pg-loc .loc-states .loc-pills{margin-top:16px;gap:6px}
.pg-loc .loc-states .loc-pills > li > span,
.pg-loc .loc-states .loc-pills > li > a{padding:6px 9px;font-size:13px;font-variant-numeric:tabular-nums}
.pg-loc .loc-state.primary{box-shadow:inset 0 0 0 1.5px rgba(0,114,188,.35)}
.pg-loc .loc-state.primary .idx{color:var(--link)}
.pg-loc .loc-states .loc-prim{display:block;margin-top:2px;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--link)}
.pg-loc .pills.loc-pills > li > .zip{background:var(--mist);color:var(--ink);font-variant-numeric:tabular-nums}
.pg-loc .loc-states .zx-m{display:none}

/* compact state cards (a name in 9+ states): the ZIP count links to that state's row in the ZIP list */
.pg-loc .loc-states .card > p > a{display:inline-block;padding:11px 0;margin:-11px 0;text-underline-offset:3px}
/* the state name above keeps its own tap area: positioned, so it stays on top where the ZIP link's padded hit box
   reaches up into it, and its hit area extends 12px up into the empty gap under the card head (24px+ at every width).
   No visual change. */
.pg-loc .loc-states h3 a{position:relative}
.pg-loc .loc-states h3 a::before{content:"";position:absolute;left:0;right:0;top:-12px;bottom:0}
@media(min-width:1069px){.pg-loc .loc-states > li.wide{grid-column:span 2}}

/* nearest-ZIP pills: place name, then its closest ZIP code in muted figures */
.pg-loc .near-pills .pz{margin-left:2px;font-size:12.5px;font-weight:500;color:#424245;font-variant-numeric:tabular-nums}   /* #424245 (the system's secondary prose grey): var(--muted) is 4.18:1 on the tinted pill */
/* nearby pills (generic location pages): pin + name in one span */
.pg-loc #nearby .pn{display:inline-flex;align-items:center;gap:6px}

/* ZIP section of pages without a detail file: head, the ZIP card, then the three method cards */
.pg-loc .zip-card + .cards{margin-top:20px}

/* ZIP block */
.pg-loc .zip-count{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.pg-loc .zip-count .ic{width:17px;height:17px;color:var(--blue)}
.pg-loc .zip-block .zip-intro{margin-top:14px;max-width:760px;font-size:19px;line-height:1.5;color:var(--muted)}
.pg-loc .zip-card{margin-top:70px;padding:30px 30px 26px}
.pg-loc .zip-card.mt-m{margin-top:40px}   /* under the state cards (several states; location.html adds mt-m): the template's 40px, not the 70px used straight under a section head */
.pg-loc .zip-groups{display:grid;gap:22px}
.pg-loc .zip-group{display:grid;grid-template-columns:120px 1fr;gap:12px 22px;align-items:start}
.pg-loc .zip-group + .zip-group{padding-top:22px;border-top:1px solid rgba(0,0,0,.08)}
.pg-loc .zip-pre{display:flex;flex-direction:column;gap:4px;padding-top:2px}
.pg-loc .zip-pre b{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;background:var(--grad-l);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-loc .zip-pre b span{color:var(--muted);-webkit-text-fill-color:var(--muted)}
.pg-loc .zip-pre small{font-size:13px;font-weight:500;color:var(--muted)}
.pg-loc .zip-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.pg-loc .zip-grid li{padding:8px 0;text-align:center;border-radius:12px;background:#fff;font-size:14px;font-weight:500;line-height:1.3;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.pg-loc .zip-card .foot{margin-top:24px;padding-top:18px;border-top:1px solid rgba(0,0,0,.08)}
/* several states: the primary state's list (prefix groups when long), then one row per other state */
.pg-loc .zip-states{display:grid;gap:40px}
.pg-loc .zip-state-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid rgba(0,0,0,.1)}
.pg-loc .zip-state-head b{font-size:20px;font-weight:700;letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
.pg-loc .zip-state-head span{font-size:14px;font-weight:500;color:var(--muted)}
.pg-loc .zip-st .zip-pre small:first-of-type{color:var(--ink);font-weight:600}
/* other states (1-2 ZIP codes each): side by side in --zc columns (locations.py), not one sparse row each */
@media(min-width:834px){
  .pg-loc .zip-sts{grid-template-columns:repeat(var(--zc,3),minmax(0,1fr));gap:26px 22px}
  .pg-loc .zip-sts > .zip-st{grid-template-columns:1fr;gap:12px;align-content:start}   /* chips right under the label, whatever the row height */
  .pg-loc .zip-sts > .zip-st + .zip-st{padding-top:0;border-top:0}
  .pg-loc .zip-sts .zip-pre{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding-top:0}
  .pg-loc .zip-sts .zip-pre small + small::before{content:"· "}
  /* five across (13 or 25 other states): code, name and count stacked, so every cell has the same label
     height and the ZIP chips line up across a row */
  .pg-loc .zip-sts.zc-wide .zip-pre{flex-direction:column;align-items:flex-start;gap:4px}
  .pg-loc .zip-sts.zc-wide .zip-pre small + small::before{content:none}
}
@media(min-width:834px) and (max-width:1068px){
  /* four across on tablets: the one-line label wraps in some cells only, so stack it in every cell */
  .pg-loc .zip-sts.zc-stack .zip-pre{flex-direction:column;align-items:flex-start;gap:4px}
  .pg-loc .zip-sts.zc-stack .zip-pre small + small::before{content:none}
}

/* card grids with a head, title and text: titles and text line up across a row, whatever the title length */
@media(min-width:641px){
  .pg-loc #audit .cards > li.card,
  .pg-loc #industries .cards > li.card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
}
@media(min-width:1069px){
  .pg-loc #audit .cards.c4 > li.card h3{font-size:22px}
}

/* evidence cards: icon, figure, claim, source pinned to the foot (same treatment as /services.html) */
.pg-loc .ev .card-num{margin-bottom:14px}
.pg-loc .ev > p:not(.src){margin-bottom:24px}
.pg-loc .ev .src{display:flex;align-items:flex-start;gap:8px;margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;line-height:1.4;color:var(--muted-d)}
.pg-loc .ev .src .ic,.pg-loc .ai-note .src .ic{width:15px;height:15px;margin-top:1px;color:var(--link-d)}
.pg-loc .ai-note{margin-top:20px}
.pg-loc .ai-note .head-row{min-width:0}
.pg-loc .ai-note p{max-width:820px}
.pg-loc .ai-note .src{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:13px}
.pg-loc .cta-bar h3 a,.pg-loc .cta-bar p a{color:var(--link-d);text-decoration:underline;text-underline-offset:3px}

/* notes with an inline link */
.pg-loc .note a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.pg-loc .dark .note a{color:var(--link-d)}

/* ---------- responsive ---------- */
@media(max-width:1068px){
  .pg-loc .az-list{columns:4 150px}
  /* state cards in two columns: an odd count lets the primary state span the row, so no card is left alone */
  .pg-loc .cards.c4.loc-states:has(> li:last-child:nth-child(odd)) > li:first-child{grid-column:1/-1}
  /* two-column state cards: a long ZIP list shows two chips and "+N more" (locations.py class zx),
     so the card stays one chip row tall like its neighbours */
  .pg-loc .loc-states .loc-pills > li.zx,
  .pg-loc .loc-states .zx-d{display:none}
  .pg-loc .loc-states .zx-m{display:inline}
}
@media(max-width:833px){
  /* nearby cards, phones and tablets: two even columns (odd count: the first pill spans), so no pill is left alone */
  .pg-loc #nearby .metro-card .pills.loc-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-loc #nearby .metro-card .pills.loc-pills > li{display:flex;min-width:0}
  .pg-loc #nearby .metro-card .pills.loc-pills > li > a{flex:1;min-width:0;min-height:40px;justify-content:center;flex-wrap:wrap;column-gap:5px;row-gap:0;white-space:normal;text-align:center}
  .pg-loc #nearby .metro-card .pills.loc-pills:has(> li:last-child:nth-child(odd)) > li:first-child{grid-column:1/-1}
  .pg-loc #nearby .near-pills .pz{margin:0}
  /* name (with its pin) over the ZIP code, centered; a long name wraps beside the pin */
  .pg-loc #nearby .metro-card .pills.loc-pills > li > a:has(> .pn){flex-direction:column;justify-content:center;padding:8px 10px}
  .pg-loc #nearby .pn{display:block;text-align:center}
  .pg-loc #nearby .pn .ic{display:inline-block;vertical-align:-2px;margin-right:5px}
  .pg-loc .loc-region{grid-template-columns:1fr}
  .pg-loc .sv-byline{grid-template-columns:auto 1fr}
  .pg-loc .sv-byline .link{grid-column:2}
  .pg-loc .az-list{columns:3 140px}
  /* whole row is the tap target (40px+) */
  .pg-loc .az-list li:has(> a){padding:0}
  .pg-loc .az-list li > a{display:block;padding:11px 0}
  .pg-loc .zip-group{grid-template-columns:1fr}
  .pg-loc .zip-pre{flex-direction:row;align-items:baseline;gap:12px}
  .pg-loc .zip-st .zip-pre small + small::before{content:"· "}
  /* other states: one compact row each, label left and ZIP chips right */
  .pg-loc .zip-sts{gap:0}
  .pg-loc .zip-sts > .zip-st{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;padding:12px 0}
  .pg-loc .zip-sts > .zip-st:first-child{padding-top:0}
  .pg-loc .zip-sts > .zip-st:last-child{padding-bottom:0}
  .pg-loc .zip-sts > .zip-st + .zip-st{padding-top:12px}
  .pg-loc .zip-sts .zip-pre{padding-top:0}
  .pg-loc .zip-sts .zip-pre b{min-width:56px}
  .pg-loc .zip-sts .zip-grid{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .pg-loc .zip-sts .zip-grid li{width:64px}
  .pg-loc .cards.loc-states{grid-template-columns:repeat(2,1fr)}
  .pg-loc .cards.loc-states:has(> li:last-child:nth-child(odd)) > li:first-child{grid-column:1/-1}
}
@media(max-width:640px){
  .pg-loc .loc-key{padding:16px}
  .pg-loc .loc-region{padding:24px 20px}
  /* metro/area cards line up with the region cards above them */
  .pg-loc .metro-card{padding:24px 20px}
  /* index: state pills in two even columns (odd count: the last one spans), 40px tap targets */
  .pg-loc #states .pills.loc-pills > li > a{padding:11px 12px}
  .pg-loc .loc-region .pills.loc-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-loc .loc-region .pills.loc-pills > li{display:flex;min-width:0}
  .pg-loc .loc-region .pills.loc-pills > li > a{flex:1;min-width:0;justify-content:center;padding:11px 10px}
  .pg-loc .loc-region .pills.loc-pills > li:last-child:nth-child(odd){grid-column:1/-1}
  /* "District of Columbia" is wider than a half-width pill (it ran past the pill edges below ~415px):
     it goes last, after the 16 states ("16 states and DC"), across the full row */
  .pg-loc .loc-region .pills.loc-pills > li:has(> a[href$="district-of-columbia.html"]){order:1;grid-column:1/-1}
  .pg-loc .loc-region .pills.loc-pills:has(> li > a[href$="district-of-columbia.html"]) > li:last-child:nth-child(odd){grid-column:auto}
  /* metro pills: two to a row, stretched to fill it */
  .pg-loc .loc-metro-card .pills.loc-pills > li{display:flex;flex:1 1 auto}
  .pg-loc .loc-metro-card .pills.loc-pills > li > a{flex:1;justify-content:center}
  /* areas: two even columns; an odd count lets the first (plain) area span the top row */
  .pg-loc .area-card .pills.loc-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-loc .area-card .pills.loc-pills > li{display:flex;min-width:0}
  .pg-loc .area-card .pills.loc-pills > li > *{flex:1;min-width:0;min-height:40px;justify-content:center;white-space:normal;text-align:center}
  /* detail pages: "More <state> markets" pills in the related-pages band: two even columns like the area and
     nearby cards above (odd count: the first pill spans), 40px tap targets */
  .pg-loc #more .metro-card .pills.loc-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-loc #more .metro-card .pills.loc-pills > li{display:flex;min-width:0}
  .pg-loc #more .metro-card .pills.loc-pills > li > *{flex:1;min-width:0;min-height:40px;padding:8px;justify-content:center;white-space:normal;text-align:center}
  .pg-loc #more .metro-card .pills.loc-pills:has(> li:last-child:nth-child(odd)) > li:first-child{grid-column:1/-1}
  .pg-loc .area-card .pills.loc-pills:has(> li:last-child:nth-child(odd)) > li:first-child{grid-column:1/-1}
  /* "Ask about a ZIP not listed": a 40px tap target */
  .pg-loc .zip-card .foot .link{display:inline-flex;align-items:center;min-height:40px}
  .pg-loc .audit-foot{padding:20px}
  .pg-loc .audit-foot .btn{width:100%}
  /* full-width CTAs: 14px side padding (the btn-sm value) keeps long state names on one line from 390px */
  .pg-loc .audit-foot .btn,.pg-loc .page-hero .hero-cta .btn{padding-left:14px;padding-right:14px}
  /* audit bar: the pin icon lines up with the first line of the wrapped text, as in the CTA bar */
  .pg-loc .audit-cover{align-items:flex-start}
  /* byline under the expertise cards: same padding, badge and text size as those cards */
  .pg-loc .sv-byline{grid-template-columns:1fr;padding:30px 24px;border-radius:26px}
  .pg-loc .sv-byline p{font-size:17px;line-height:1.47}
  .pg-loc .sv-byline .icon.sm{width:46px;height:46px;border-radius:14px}
  .pg-loc .sv-byline .icon.sm .ic{width:23px;height:23px}
  .pg-loc .sv-byline .link{grid-column:auto}
  .pg-loc .cards.c4.loc-metros{grid-template-columns:1fr 1fr;gap:12px}
  .pg-loc .loc-metro{padding:20px 16px 16px;border-radius:22px}
  .pg-loc .loc-metro .card-head{margin-bottom:14px}
  .pg-loc .loc-metro h3{font-size:19px}
  .pg-loc .loc-metro p{font-size:14px;margin-bottom:14px}
  /* "→ See the" beside the arrow, then "<name> page" unbroken on a full-width second line */
  .pg-loc .loc-status{display:block;font-size:13px}
  .pg-loc .loc-status .ic{float:left;margin:1px 8px 0 0}
  .pg-loc .az-card{padding:20px 16px 24px}
  .pg-loc .az-card .az-tabs{grid-template-columns:repeat(var(--az-cols-m,5),1fr)}
  .pg-loc .az-card .az-tabs button{height:50px}
  .pg-loc .az-panel-head b{font-size:36px}
  .pg-loc .az-list,.pg-loc .mk-state .az-list{columns:2;column-gap:18px}
  .pg-loc .mk-tabs button{height:54px}
  /* index markets: the region tabs stay under the nav while a long region list (2,500-4,400px) scrolls past.
     overflow:clip, not the card's hidden, so the card is not a scroll box and the tabs can stick; the white band
     (margins cancel its padding, so nothing moves) keeps the list from showing between the buttons */
  .pg-loc .mk-card{overflow:clip}
  .pg-loc .mk-card .mk-tabs{position:sticky;top:52px;z-index:2;margin:-8px -16px -10px;padding:8px 16px 10px;background:var(--paper)}
  .pg-loc .mk-state .az-panel-head b{min-width:52px}
  .pg-loc .az-list li{font-size:14px;padding:7px 0}
  .pg-loc .zip-card{padding:24px 16px 20px}
  .pg-loc .cards.loc-states{gap:12px}
  .pg-loc .loc-states > .card{padding:20px 16px 20px;border-radius:22px}
  .pg-loc .loc-states .card-head{margin-bottom:14px}
  .pg-loc .loc-states h3{font-size:18px}
  .pg-loc .loc-states .card > p{font-size:14px}
  /* ZIP chips in even columns (two in a half-width card), never one per line */
  .pg-loc .loc-states .loc-pills{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}
  .pg-loc .loc-states .loc-pills > li{display:flex;min-width:0}
  .pg-loc .loc-states .loc-pills > li > span{flex:1;justify-content:center;padding:6px 4px;font-size:12.5px}
  /* the two chips fill a half-width card: "+N more" becomes a text link on its own line, not a lone chip */
  .pg-loc .loc-states .loc-pills > li:has(> a){grid-column:1/-1}
  .pg-loc .loc-states .loc-pills > li > a{min-height:40px;padding:0;background:none;box-shadow:none;border-radius:0;font-size:13px;text-decoration:underline;text-underline-offset:3px}
  .pg-loc .loc-states .loc-pills > li > a:hover{background:none}
  .pg-loc .zip-states{gap:32px}
  .pg-loc .zip-state-head{margin-bottom:16px}
  .pg-loc .zip-state-head b{font-size:18px}
  .pg-loc .zip-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:6px}
  .pg-loc .zip-grid li{font-size:13px;padding:7px 0;border-radius:10px}
  /* other states with 3-4 ZIP codes: chips two to a row, so they never cover the state name and count */
  .pg-loc .zip-sts .zip-grid{max-width:134px}
  /* other states: code | name over count | chips */
  .pg-loc .zip-sts .zip-pre{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:2px 10px}
  .pg-loc .zip-sts .zip-pre b{grid-row:1/3;min-width:0;font-size:26px}
  .pg-loc .zip-sts .zip-pre small + small::before{content:none}
  .pg-loc .loc-tile{padding:16px 18px}
  /* FAQ questions: even lines, so the place name never sits alone on the last line */
  .pg-loc #faq .faq-list summary{text-wrap:balance}
  /* closing CTA title: the gradient second sentence moves to its own line as one unit ("Ohio client. / See how we work."),
     never "client. See / how we work."; the padding (cancelled by the margin) keeps the gradient under descenders such as the y in "either way." */
  .pg-loc .contact-head h2 .grad-text{display:inline-block;padding-bottom:.1em;margin-bottom:-.1em}
  /* long place names leave the closing title on phones ("Send one client."), so it keeps to four lines */
  .pg-loc .contact-head h2 .cn-long{display:none}
}
@media(max-width:389px){
  /* small phones: metro pills stay two to a row ("Corpus Christi, TX" + "Amarillo, TX"), still 40px tall */
  .pg-loc #states .loc-metro-card .pills.loc-pills > li > a{padding:12px 8px;font-size:13px}
  .pg-loc .area-card .pills.loc-pills > li > *{padding:8px 8px}
}
@media(max-width:374px){
  .pg-loc .loc-status{font-size:12px}
  .pg-loc .loc-metro-card .pills.loc-pills{column-gap:6px}
  .pg-loc #states .loc-metro-card .pills.loc-pills > li > a{padding:12px 7px;gap:4px}
  .pg-loc .loc-metro-card .pills.loc-pills .ic{width:12px;height:12px}
}

/* very long names (38 characters: University of California-Santa Barbara; body class loc-xl from locations.py):
   smaller headings, so each keeps to three lines at 1440 and five at 390 */
.pg-loc.loc-xl .page-hero h1{font-size:clamp(38px,5.4vw,70px)}
.pg-loc.loc-xl section h2:not(.h2-sm){font-size:clamp(32px,4.2vw,56px)}

/* a single unbroken word of 12+ letters (Connoquenessing, Montgomeryville; body class loc-lw from locations.py):
   on phones the headings shrink with the screen, so that word stays inside the column instead of being cut off */
@media(max-width:640px){
  .pg-loc.loc-lw .page-hero h1{font-size:min(44px,10vw)}
  .pg-loc.loc-lw section:not(.contact) h2:not(.h2-sm){font-size:min(38px,9.9vw)}
  .pg-loc.loc-lw .contact-head h2{font-size:min(40px,10.4vw)}
}

/* FAQ side heading: "Name, ST:" always fits its column, so the code never sits alone on a line. --fq is that
   unit's width in em (locations.py faq_unit_em); the heading only shrinks where the unit is wider than the column */
.pg-loc #faq .faq-grid{container-type:inline-size}      /* measured on the grid, so the columns still size as before */
@media(min-width:834px){       /* side column: its .85fr share of the grid (.85fr / 1.15fr, 80px gap, base.css) */
  .pg-loc #faq .faq-side h2[style*="--fq"]{font-size:min(clamp(32px,4.4vw,56px),calc((100cqi - 80px) * .4125 / var(--fq)))}
}
@media(max-width:833px){
  .pg-loc #faq .faq-side h2[style*="--fq"]{font-size:min(clamp(32px,4.4vw,56px),calc(97cqi / var(--fq)))}
}

/* 320px phones: "audit, unbranded" is wider than the line there, so it may wrap */
@media(max-width:359px){.pg-loc #audit h2 .nw{white-space:normal}}


/* ---- privacy.css ---- */
/* ==========================================================================
   Privacy policy (/privacy-policy.html): body class .pg-privacy
   Hero icon facts + commitment chips, "at a glance" cards, icon TOC,
   icon-led section headings and structured blocks inside the prose.
   ========================================================================== */

/* ---------- hero: dates/scope facts (icon + label + value, hairline dividers) ---------- */
.pg-privacy .pv-meta{display:flex;flex-wrap:nowrap;margin-top:34px;list-style:none}
.pg-privacy .pv-meta li{display:flex;align-items:center;gap:12px;padding:0 28px;border-left:1px solid rgba(255,255,255,.14)}
.pg-privacy .pv-meta li:first-child{padding-left:0;border-left:0}
.pg-privacy .pv-meta li:last-child{padding-right:0}
.pg-privacy .pv-meta .ic{width:20px;height:20px;stroke:url(#ig-d)}
.pg-privacy .pv-meta span{font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:#f5f5f7;white-space:nowrap}
.pg-privacy .pv-meta small{display:block;margin-bottom:3px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-d)}

/* ---------- hero: commitment chips (one padding source: .pv-chip) ---------- */
.pg-privacy .pv-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;list-style:none}
.pg-privacy .pv-chips > li{display:flex}
.pg-privacy .pv-chip{display:inline-flex;align-items:center;gap:10px;width:100%;padding:7px 16px 7px 7px;border-radius:980px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:14px;font-weight:500;line-height:1.3;color:#f5f5f7;text-decoration:none;transition:background .2s}
.pg-privacy a.pv-chip{color:var(--link-d)}
.pg-privacy a.pv-chip:hover{background:rgba(255,255,255,.12)}
.pg-privacy .pv-ci{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pg-privacy .pv-ci .ic{width:15px;height:15px;stroke:url(#ig-d)}

/* ---------- at a glance ---------- */
.pg-privacy .pv-glance{margin-top:50px}
.pg-privacy .pv-glance h3{font-size:22px}
.pg-privacy .pv-glance p{font-size:16px;line-height:1.5}
.pg-privacy .pv-glance .pv-mail{gap:8px}  /* match the chevron gap of the sr-only-labelled links */

/* ---------- document layout + icon TOC ---------- */
.pg-privacy .doc{grid-template-columns:250px 1fr;gap:64px}
.pg-privacy .toc{top:84px;background:var(--mist);border-radius:24px;padding:24px 18px 18px 22px}
.pg-privacy .toc p{margin-bottom:8px}
.pg-privacy .toc ol{gap:0}
.pg-privacy .toc a{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14px;line-height:1.3;color:var(--muted)}
.pg-privacy .toc a .ic{width:16px;height:16px;stroke:url(#ig-l)}
.pg-privacy .toc a:hover{color:var(--ink)}
.pg-privacy .toc a:hover span{text-decoration:underline;text-underline-offset:2px}

/* ---------- prose: icon-led section headings with hairline dividers ---------- */
.pg-privacy .prose h2{display:flex;align-items:center;gap:14px;margin:56px 0 18px;padding-top:52px;border-top:1px solid rgba(0,0,0,.08);scroll-margin-top:36px}
.pg-privacy .prose h2:first-child{margin-top:0;padding-top:0;border-top:0;scroll-margin-top:90px}
.pg-privacy .prose h2 .icon{margin:0}

/* information we collect: horizontal icon cards */
.pg-privacy .prose ul.pv-items{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.pg-privacy .pv-items .card{padding:24px 26px;border-radius:24px}
.pg-privacy .prose .card h3{margin:0 0 6px;font-size:19px;font-weight:700;letter-spacing:-.025em;line-height:1.25;color:var(--ink)}
.pg-privacy .prose .card p{font-size:16px;line-height:1.55;color:#424245}

/* who we share it with: icon rows in one card */
.pg-privacy .prose ul.pv-rows{list-style:none;display:block;padding:6px 24px;margin:22px 0;background:var(--mist);border-radius:24px}
.pg-privacy .pv-rows li{display:flex;align-items:center;gap:16px;padding:14px 0;font-size:16px;font-weight:500;line-height:1.4;color:var(--ink)}
.pg-privacy .pv-rows li + li{border-top:1px solid rgba(0,0,0,.07)}
.pg-privacy .pv-rows .icon.sm{width:36px;height:36px;border-radius:11px}
.pg-privacy .pv-rows .icon.sm .ic{width:18px;height:18px}

/* how long we keep it: four retention cards */
.pg-privacy .prose ul.pv-keep{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pg-privacy .pv-keep li{display:flex;flex-direction:column;padding:22px 24px 24px;border-radius:24px;background:var(--mist)}
.pg-privacy .pv-keep-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.pg-privacy .pv-keep b{font-size:28px;font-weight:700;letter-spacing:-.045em;line-height:1;background:var(--grad-l);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-privacy .pv-keep p{font-size:16px;line-height:1.5}

/* your rights: how to exercise them */
.pg-privacy .pv-note{display:flex;align-items:center;gap:16px;margin:24px 0 0;padding:20px 24px;border-radius:22px;background:rgba(0,114,188,.06);box-shadow:inset 0 0 0 1px rgba(0,114,188,.12)}
.pg-privacy .pv-note p{font-size:16px;line-height:1.5;color:var(--ink)}

/* contact buttons: the shared ".prose a" link style must not repaint pill buttons */
.pg-privacy .prose .btn{text-decoration:none}
.pg-privacy .prose .btn-blue{color:#fff}
.pg-privacy .prose .btn-line{color:var(--ink)}
.pg-privacy .prose .btn .ic{width:18px;height:18px}

/* ---------- responsive ---------- */
@media(min-width:1069px) and (max-width:1180px){
  /* four cards would be ~240px wide here: keep the 2 x 2 grid a little longer */
  .pg-privacy .pv-glance{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1068px){
  .pg-privacy .pv-chips{display:grid;grid-template-columns:repeat(2,max-content)}
}
@media(min-width:900px) and (max-width:1068px){
  .pg-privacy .doc{grid-template-columns:230px 1fr;gap:44px}
  .pg-privacy .toc{position:sticky}
}
@media(max-width:899px){
  .pg-privacy .doc{grid-template-columns:1fr;gap:48px}
  .pg-privacy .toc ol{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:20px}
  .pg-privacy .toc a{min-height:40px;padding:4px 0}
}
@media(max-width:720px){
  /* facts become label/value rows */
  .pg-privacy .pv-meta{flex-direction:column;gap:10px;margin-top:28px}
  .pg-privacy .pv-meta li{padding:0;border-left:0;gap:10px}
  .pg-privacy .pv-meta .ic{width:18px;height:18px}
  .pg-privacy .pv-meta span{display:flex;align-items:baseline;gap:8px;font-size:14px}
  .pg-privacy .pv-meta small{display:inline-block;flex-shrink:0;width:92px;margin:0;font-size:12px}
}
@media(max-width:339px){
  /* phones under 340px: let the no-wrap phrases break instead of eating the card padding / gutter */
  .pg-privacy .pv-items h3 .nw{white-space:normal}
  .pg-privacy .pv-meta small{width:80px}
}
@media(max-width:640px){
  .pg-privacy .pv-chips{grid-template-columns:1fr;gap:0;padding:4px 16px;border-radius:22px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
  .pg-privacy .pv-chips > li + li{border-top:1px solid rgba(255,255,255,.08)}
  .pg-privacy .pv-chip{padding:10px 0;border-radius:0;background:none;box-shadow:none}
  .pg-privacy a.pv-chip:hover{background:none;text-decoration:underline}

  /* glance cards: icon + title on one row, copy and link full width */
  .pg-privacy .pv-glance{margin-top:40px;gap:14px}
  .pg-privacy .pv-glance .card{display:grid;grid-template-columns:46px 1fr;column-gap:16px;align-items:center;padding:24px 22px 26px}
  .pg-privacy .pv-glance .icon{margin:0}
  .pg-privacy .pv-glance h3{margin:0;font-size:21px}
  .pg-privacy .pv-glance p,.pg-privacy .pv-glance .link{grid-column:1/-1}
  .pg-privacy .pv-glance p{margin-top:16px}
  .pg-privacy .pv-glance .card > .link{justify-self:start;padding-top:16px}

  /* TOC: one clean column of tap-sized rows */
  .pg-privacy .toc{padding:22px 18px 12px}
  .pg-privacy .toc ol{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
  .pg-privacy .toc li + li{border-top:1px solid rgba(0,0,0,.06)}
  .pg-privacy .toc a{min-height:44px;padding:6px 0;font-size:15px}

  .pg-privacy .prose h2{gap:12px;margin-top:44px;padding-top:40px}

  /* collect cards: icon + title row, paragraph full width */
  .pg-privacy .pv-items .card.hz{display:grid;grid-template-columns:40px 1fr;column-gap:14px;row-gap:14px;align-items:center;padding:22px 20px 24px}
  .pg-privacy .pv-items .card.hz > div{display:contents}
  .pg-privacy .prose .pv-items .card h3{margin:0;font-size:18px}
  .pg-privacy .pv-items .card.hz p{grid-column:1/-1}

  .pg-privacy .prose ul.pv-rows{padding:4px 18px}
  .pg-privacy .pv-rows li{gap:14px;font-size:15px}  /* matches the TOC rows; keeps short labels on one line */
  .pg-privacy .prose ul.pv-keep{grid-template-columns:1fr}
  .pg-privacy .pv-note{align-items:flex-start;padding:18px 18px}
}


/* ---- service-seo.css ---- */
/* White-label SEO service page (/white-label-seo.html). Every selector is scoped to .pg-seo. */

/* ---------- hero: on-this-page chips + three stats ---------- */
.pg-seo .page-hero .jump{margin-top:30px}
.pg-seo .page-hero .jump .pills{margin-top:0}
@media(min-width:641px) and (max-width:699px){.pg-seo .page-hero .jump li:last-child{display:none}} /* 5 chips wrap 4+1 here; "Get an audit" repeats the primary CTA */
.pg-seo .page-hero .pills > li > a{background:rgba(255,255,255,.08);color:#d2d2d7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pg-seo .page-hero .pills > li > a:hover{background:rgba(255,255,255,.16);color:#fff}
@media(min-width:641px){
  .pg-seo .page-hero .stats{grid-template-columns:repeat(3,1fr);max-width:900px}
  .pg-seo .page-hero .stat:nth-child(3){border-left:1px solid var(--line-d);padding-left:18px}
}
@media(max-width:640px){
  .pg-seo .page-hero .pills > li > a{min-height:40px;padding:0 16px;font-size:14px}
  .pg-seo .page-hero .jump li:last-child{display:none} /* "Get an audit" repeats the primary CTA; keeps chips 2/2 */
  .pg-seo .page-hero .stats{grid-template-columns:1fr;row-gap:0;max-width:340px;margin-top:64px}
  .pg-seo .page-hero .stat{display:flex;align-items:center;gap:18px;padding:16px 0;border-left:0;border-top:1px solid var(--line-d)}
  .pg-seo .page-hero .stat:first-child{border-top:0;padding-top:0}
  .pg-seo .page-hero .stat:nth-child(3){padding-left:0}
  .pg-seo .page-hero .stat b{font-size:34px;min-width:124px}
  .pg-seo .page-hero .stat span{margin-top:0}
}

/* ---------- icon + text notes ---------- */
.pg-seo .note.ic-note{display:flex;gap:10px;align-items:flex-start;justify-content:center;margin-left:auto;margin-right:auto;text-align:left}
.pg-seo .note.ic-note .ic{width:18px;height:18px;margin-top:0;color:var(--blue)}

/* ---------- ramp: month cards with a filling progress bar ---------- */
.pg-seo .ramp-bar{margin-top:auto;padding-top:28px}
.pg-seo .ramp-bar::before{content:"";display:block;height:4px;border-radius:4px;background:rgba(0,0,0,.07)}
.pg-seo .ramp-bar i{display:block;height:4px;margin-top:-4px;border-radius:4px;background:var(--grad-l);width:34%}
.pg-seo .ramp li:nth-child(2) .ramp-bar i{width:67%}
.pg-seo .ramp li:nth-child(3) .ramp-bar i{width:100%}

/* ---------- disciplines: service links pinned to the card foot ---------- */
.pg-seo .card-links{margin-top:auto;padding-top:26px}
.pg-seo .card-links > div{display:flex;flex-wrap:wrap;gap:6px 22px;padding-top:18px;border-top:1px solid rgba(0,0,0,.08)}
.pg-seo .card-links .link{font-size:15px;font-weight:600;letter-spacing:-.01em}
@media(min-width:641px) and (max-width:833px){
  .pg-seo .disciplines{grid-template-columns:1fr 1fr}
}

/* ---------- cards / steps sitting beside copy in a split ---------- */
.pg-seo .split > .cards,.pg-seo .split > .steps{margin-top:0}
@media(min-width:834px){
  .pg-seo #deliverables .split{grid-template-columns:1.2fr .8fr} /* “ongoing optimization.” stays on one line */
  .pg-seo #process .split{grid-template-columns:.88fr 1.12fr} /* wider step cards; “a monthly report.” still fits */
}
@media(min-width:834px) and (max-width:1068px){.pg-seo #process .split{grid-template-columns:.8fr 1.2fr}}
.pg-seo .dark .cards.stack .card{padding:24px 26px}
.pg-seo .dark .card.hz h3{margin-bottom:4px}

/* ---------- tier cards (deliverables) + option cards (alternatives) ---------- */
.pg-seo .compare{margin-top:70px}
.pg-seo .light .cmp:not(.us){background:var(--paper)}
.pg-seo .cmp dd{display:flex;align-items:flex-start;gap:8px}
.pg-seo .cmp dd .ic{width:18px;height:18px;margin-top:1px;stroke-width:2.2}
.pg-seo .cmp dd.yes .ic{color:#248a3d}
.pg-seo .cmp dd.no .ic{color:#d70015}
.pg-seo .cmp.us dd.yes .ic{color:#30d158}
.pg-seo .tiers .cmp.us{order:0}
.pg-seo .tier-lead{display:flex;align-items:center;gap:14px;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid rgba(0,0,0,.08)}
.pg-seo .tier-lead b{font-size:64px;font-weight:700;letter-spacing:-.06em;line-height:.9;background:var(--grad-l);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-seo .tier-lead span{font-size:15px;font-weight:500;line-height:1.3;color:var(--muted);max-width:130px}
.pg-seo .cmp.us .tier-lead{border-bottom-color:rgba(255,255,255,.14)}
.pg-seo .cmp.us .tier-lead b{background-image:var(--grad)}
.pg-seo .cmp.us .tier-lead span{color:var(--muted-d)}
.pg-seo .tiers dt{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;letter-spacing:-.005em;text-transform:none}
.pg-seo .tiers dt .ic{width:15px;height:15px;color:var(--blue)}
.pg-seo .tiers .cmp.us dt .ic{color:var(--link-d)}
.pg-seo .tiers dd{font-size:18px;font-weight:600;letter-spacing:-.02em}
@media(min-width:641px) and (max-width:833px){
  .pg-seo .compare .cmp dl{grid-template-columns:1fr 1fr;gap:18px 26px}
}

/* ---------- process: who does each step ---------- */
.pg-seo .steps.two{grid-template-columns:1fr 1fr}
.pg-seo .step{display:flex;flex-direction:column}
.pg-seo .step .who{align-self:flex-start;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:980px;margin-bottom:12px;background:rgba(0,0,0,.05);color:var(--muted)}
.pg-seo .step.you{box-shadow:inset 0 0 0 1.5px rgba(0,114,188,.35)}
.pg-seo .step.you .who{background:rgba(0,114,188,.1);color:var(--blue)}
@media(min-width:834px){.pg-seo .process-copy{position:sticky;top:110px}}
@media(max-width:640px){.pg-seo .steps.two{grid-template-columns:1fr}}
@media(min-width:834px) and (max-width:999px){.pg-seo #process .split{grid-template-columns:1fr;gap:40px}.pg-seo .process-copy{position:static}} /* steps were 155-205px of text beside the copy: stack as at tablet width */

/* ---------- results: work-type label under the photo ---------- */
.pg-seo .case-top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.pg-seo .case-top .card-tag{margin:0}
.pg-seo .case-top a.card-tag{text-decoration:none}
.pg-seo .case-top a.card-tag:hover{color:#f5f5f7;text-decoration:underline;text-underline-offset:3px}
/* results: a chip that links to its service page works like the /work.html rail chips
   (the whole pill is the link, one padding source, hover fill, 40px invisible hit area around the 28px chip) */
.pg-seo #results .chips > li:has(> a){padding:0}
.pg-seo #results .chips > li > a{position:relative;display:block;padding:5px 11px;border-radius:980px;color:inherit;text-decoration:none;transition:background .2s}
.pg-seo #results .chips > li > a:hover{background:rgba(255,255,255,.16)}
.pg-seo #results .chips > li > a::after{content:"";position:absolute;inset:-6px 0}
@media(max-width:640px){
  /* three chips share one row on phones (375px up) instead of leaving the last one alone, as on the Work page */
  .pg-seo #results .chips{gap:5px}
  .pg-seo #results .chips > li,.pg-seo #results .chips > li > a{padding:5px 6px}
  .pg-seo #results .chips > li:has(> a){padding:0}
}

/* ---------- media caption link ---------- */
.pg-seo figure.media-fig figcaption a{color:var(--link);text-decoration:underline;text-underline-offset:2px}

/* ---------- needs: 4-up cards, titles and body text level across the row ---------- */
@media(min-width:1069px){
  .pg-seo #needs .cards.c4 .card h3{font-size:22px}
  .pg-seo #needs .cards.c4 > .card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
}

/* ---------- fit cards ---------- */
.pg-seo .fit .region-head{margin-bottom:4px}

/* ---------- states: four region cards ---------- */
.pg-seo .regions .pills > li > a,.pg-seo .regions .pills > li > .soon{font-size:14px;padding:8px 14px}
.pg-seo .regions .pills > li.duo{display:flex;gap:8px} /* last two chips wrap together: no lone chip on the last row */
.pg-seo .states-foot{margin-top:34px;text-align:center}
@media(max-width:640px){
  .pg-seo .regions .pills > li > a,.pg-seo .regions .pills > li > .soon{min-height:40px;padding:0 11px;font-size:13px}
}

/* ---------- pairings: icon link cards ---------- */
.pg-seo .pair{list-style:none;display:grid;grid-template-columns:repeat(4,auto);gap:14px;margin-top:40px}
.pg-seo .pair a{display:flex;align-items:center;gap:14px;height:100%;padding:18px 20px 18px 18px;border-radius:22px;background:var(--paper);color:var(--ink);text-decoration:none;text-align:left;font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.25;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pg-seo .pair a:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.07)}
.pg-seo .pair .chev{margin-left:auto;font-size:22px;line-height:1;color:var(--blue)}
@media(min-width:1200px){.pg-seo .pair-t{white-space:nowrap}}
@media(max-width:1199px){.pg-seo .pair{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.pg-seo .pair{grid-template-columns:1fr;gap:10px;margin-top:30px}.pg-seo .pair a{padding:14px 18px 14px 14px}}


/* ---- service.css ---- */
/* Service pages generated by src/services.py (/<service-slug>.html). Body class: "pg-seo pg-service", so the
   approved service-seo.css styles them unchanged. Only rules for things the approved page does not have go
   here, every selector prefixed .pg-service. */

/* ---------- deliverables, "list" layout: detail text instead of short tier values ---------- */
.pg-service .tiers.dlv-list dd{font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.35}


/* ---- services.css ---- */
/* Services index (/services.html) */

/* hero: "On this page" jump pills, icon-led; the link is the only padding source */
.pg-services .page-hero .jump .pills{margin-top:32px;gap:8px}
.pg-services .page-hero .jump .pills > li{padding:0;background:none}
.pg-services .page-hero .jump .pills > li > a{min-height:40px;padding:0 16px 0 13px;gap:7px;font-size:14px;background:rgba(255,255,255,.1);color:#f5f5f7}
.pg-services .page-hero .jump .pills > li > a:hover{background:rgba(255,255,255,.18);color:#fff}
.pg-services .page-hero .jump .pills .ic{width:16px;height:16px;color:var(--link-d)}
@media(max-width:700px){
  /* compact jump pills: 3 + 2 on phones, one row of five from 641px; never 4 + a lone "Questions" */
  .pg-services .page-hero .jump .pills{gap:6px}
  .pg-services .page-hero .jump .pills > li > a{padding:0 12px 0 10px;gap:6px;font-size:13px}
  .pg-services .page-hero .jump .pills .ic{width:15px;height:15px}
}

/* two-family bento: icon header, linked service chips, link pinned to the foot */
.pg-services .fam .t-web{min-height:0}
.pg-services .fam .tile{display:flex;flex-direction:column}
.pg-services .fam .tile h3{margin-top:4px}
/* chips sit in a 2 x 2 grid (never 3 + a lone one); one row of four where the tile is full width */
.pg-services .fam .tile-meta{margin-top:auto;padding-top:30px;display:grid;grid-template-columns:repeat(2,max-content);gap:8px}
.pg-services .fam .tile-meta a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 15px 0 12px;border-radius:980px;font-size:14px;font-weight:500;line-height:1.2;text-decoration:none;background:#fff;color:var(--ink);transition:background .2s,color .2s}
.pg-services .fam .tile-meta a .ic{width:16px;height:16px;color:var(--muted);transition:color .2s}
.pg-services .fam .tile-meta a:hover{background:rgba(0,114,188,.1);color:var(--link)}
.pg-services .fam .tile-meta a:hover .ic{color:var(--link)}
.pg-services .fam .t-web .tile-meta a{background:rgba(255,255,255,.1);color:#f5f5f7}
.pg-services .fam .t-web .tile-meta a .ic{color:var(--muted-d)}
.pg-services .fam .t-web .tile-meta a:hover{background:rgba(255,255,255,.18);color:#fff}
.pg-services .fam .t-web .tile-meta a:hover .ic{color:var(--link-d)}
.pg-services .fam .tile-link{margin-top:24px}
.pg-services .t-web .link{color:var(--link-d)}
@media(min-width:834px) and (max-width:1068px){
  .pg-services .fam .t-web,.pg-services .fam .t-shop{grid-column:span 6}
}
@media(min-width:641px) and (max-width:833px){
  .pg-services .fam .tile-meta{grid-template-columns:repeat(4,max-content)}
}
/* families heading stays on one line on phones ("Two service families") */
@media(max-width:640px){.pg-services #families h2{font-size:min(38px,9.2vw)}}

/* service cards: icon + arrow header; the whole card is the link (stretched from the h3) */
:is(.pg-services,.pg-loc) .svc .card-head{margin-bottom:26px}
:is(.pg-services,.pg-loc) .svc h3{font-size:22px;letter-spacing:-.03em;transition:color .2s}
:is(.pg-services,.pg-loc) .svc h3 a{color:inherit;text-decoration:none}
:is(.pg-services,.pg-loc) .svc h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
:is(.pg-services,.pg-loc) .svc h3 a:focus-visible{outline:none}
:is(.pg-services,.pg-loc) .svc:has(h3 a:focus-visible){outline:2px solid var(--link);outline-offset:3px}
:is(.pg-services,.pg-loc) .dark .svc:has(h3 a:focus-visible){outline-color:var(--link-d)}
:is(.pg-services,.pg-loc) .svc p{font-size:16px}
:is(.pg-services,.pg-loc) .svc .go{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;color:var(--muted);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:background .25s,color .25s,box-shadow .25s,transform .3s var(--ease)}
:is(.pg-services,.pg-loc) .svc .go .ic{width:17px;height:17px}
:is(.pg-services,.pg-loc) .dark .svc .go{color:var(--muted-d);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
:is(.pg-services,.pg-loc) .svc:hover h3{color:var(--link)}
:is(.pg-services,.pg-loc) .dark .svc:hover h3{color:var(--link-d)}
:is(.pg-services,.pg-loc) .svc:hover .go{background:var(--blue);color:#fff;box-shadow:none;transform:translate(2px,-2px)}
:is(.pg-services,.pg-loc) .dark .svc:hover .go{background:var(--link-d);color:#000}
@media(min-width:834px){
  :is(.pg-services,.pg-loc) .svc.wide{grid-column:span 2}
  /* wide cards take their height from 1-col neighbours: bottom-anchor the text (bento style) so the spare height sits under the icon, not under the copy */
  :is(.pg-services,.pg-loc) .svc.wide .card-head{margin-bottom:auto;padding-bottom:26px}
}
@media(min-width:641px) and (max-width:833px){
  :is(.pg-services,.pg-loc) .svc-grid{grid-template-columns:repeat(2,1fr)}
  :is(.pg-services,.pg-loc) .svc-grid .span-md{grid-column:1/-1}
}
@media(max-width:640px){
  /* compact rows on phones: icon + title + arrow on one line, text below */
  :is(.pg-services,.pg-loc) .svc{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:14px;padding:24px 22px 26px}
  :is(.pg-services,.pg-loc) .svc .card-head{display:contents}
  :is(.pg-services,.pg-loc) .svc .icon{grid-column:1;grid-row:1;margin:0}
  :is(.pg-services,.pg-loc) .svc h3{grid-column:2;grid-row:1;margin:0;font-size:19px;line-height:1.2}
  :is(.pg-services,.pg-loc) .svc .go{grid-column:3;grid-row:1;width:32px;height:32px}
  :is(.pg-services,.pg-loc) .svc .go .ic{width:15px;height:15px}
  :is(.pg-services,.pg-loc) .svc p{grid-column:1/-1;margin-top:14px}
}

/* same team: icon badge above the heading */
.pg-services #same-team .copy > .icon{margin-bottom:22px}

/* process: six steps, 3 x 2; who-does-it tag */
:is(.pg-services,.pg-loc) .steps.six{grid-template-columns:repeat(3,1fr)}
:is(.pg-services,.pg-loc) .steps.six .step{display:flex;flex-direction:column}
:is(.pg-services,.pg-loc) .steps.six .step-num{font-size:48px}
/* step titles at heading leading (1.22, as on /contact.html), so a two-line title holds together; the .14em padding
   makes up the difference, so a one-line title keeps its 31.5px box and the text below it stays where it was */
:is(.pg-services,.pg-loc) .steps.six .step h3{line-height:1.22;padding-block:.14em}
:is(.pg-services,.pg-loc) .who{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;line-height:1;padding:6px 11px;border-radius:980px;background:var(--mist);color:var(--muted);margin-bottom:14px}
:is(.pg-services,.pg-loc) .who.us{background:rgba(0,114,188,.09);color:var(--link)}
/* steps in a row share row tracks (number, tag, title, text), so a two-line title never pushes its text
   below its neighbours' */
@media(min-width:641px){
  :is(.pg-services,.pg-loc) .steps.six > .step{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
  :is(.pg-services,.pg-loc) .steps.six .who{justify-self:start}
}
@media(max-width:833px){:is(.pg-services,.pg-loc) .steps.six{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){:is(.pg-services,.pg-loc) .steps.six{grid-template-columns:1fr}}

/* which to take: scenario cards end in a matching-service link row */
.pg-services .scn > p{margin-bottom:26px}
.pg-services .match{margin-top:auto;display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 18px 12px 12px;border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;position:relative;z-index:1;transition:box-shadow .25s}
.pg-services .match .icon{margin:0}
.pg-services .match-txt{flex:1;min-width:0}
.pg-services .match small{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.pg-services .match b{display:block;margin-top:2px;font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--link)}
.pg-services .match > .ic{width:20px;height:20px;color:var(--link);transition:transform .25s var(--ease)}
.pg-services .match:hover{box-shadow:inset 0 0 0 1.5px rgba(0,114,188,.4)}
.pg-services .match:hover > .ic{transform:translateX(3px)}

/* sourced figures: icon, figure, claim, attribution pinned to the card foot */
.pg-services .ev .card-num{margin-bottom:14px}
.pg-services .ev > p:not(.src){margin-bottom:24px}
.pg-services .ev .src{display:flex;align-items:flex-start;gap:8px;margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;line-height:1.4}
/* three in a row (834px+): every footer reserves two lines so the divider rules line up across the row
   (three lines at 834-845px, where the longest source wraps to three) */
@media(min-width:834px){.pg-services .ev .src{min-height:calc(2.8em + 17px)}}
@media(min-width:834px) and (max-width:845px){.pg-services .ev .src{min-height:calc(4.2em + 17px)}}
.pg-services .ev .src .ic{width:15px;height:15px;margin-top:1px;color:var(--link-d)}
.pg-services .ev-note{display:flex;align-items:flex-start;gap:16px;margin-top:20px;padding:24px 28px;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.pg-services .ev-note p{font-size:15px;line-height:1.55;color:var(--muted-d);max-width:620px;margin-top:9px}   /* 620px (the .cta-bar p measure): about 95 characters a line, not 130 */
@media(max-width:640px){.pg-services .ev-note{flex-direction:column;gap:14px;padding:22px}.pg-services .ev-note p{margin-top:0}}

/* expertise: "will not do" list sits between title and closing line */
.pg-services .xp-grid .ticks{margin:6px 0 16px}

/* single-paragraph CTA bar with icon */
.pg-services .cta-bar p{margin-top:0}
.pg-services .cta-bar p strong{color:#f5f5f7;font-weight:600}
.pg-services .cta-bar .head-row .icon{margin-top:2px}


/* ---- work.css ---- */
/* Work page (/work.html) */

/* keep the last words of a heading together at every width (no orphans) */
.pg-work h1 .nobr,.pg-work h2 .nobr{white-space:nowrap}
/* hero stat labels break evenly instead of leaving one word on the last line */
.pg-work .page-hero .stat > span{text-wrap:balance}

/* six anonymous builds: sector icon badge straddles the image edge.
   The stock imagery is only sector mood, so it runs as a short banner and the icon card leads. */
.pg-work .builds .case-media{aspect-ratio:2/1}
.pg-work .builds .case-body{padding-top:0}
.pg-work .case-head{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:-26px 0 22px}
.pg-work .case-head .icon{margin:0;box-shadow:inset 0 0 0 1px rgba(0,114,188,.14),0 0 0 6px var(--paper),0 12px 26px rgba(0,0,0,.14)}
/* number sits level with the icon's bottom edge, clear of the photo at every width (the phone icon is smaller) */
.pg-work .case-head .idx{line-height:1;padding-bottom:0;margin-bottom:-2px}
.pg-work .builds .case-body .pills{margin-top:auto;padding-top:22px;gap:6px}
/* service tags sized like the portfolio chips, so three always share one row */
.pg-work .builds .case-body .pills{gap:5px}
.pg-work .builds .pills > li > a{padding:6px 9px;font-size:12px;font-weight:500}
/* tags stay 28px visually; the invisible hit area reaches 40px (tags sit in one row, so areas never overlap) */
.pg-work .builds .pills > li > a::after{inset:-6px 0}
@media(min-width:641px){
  .pg-work .builds .case-body{padding-left:26px;padding-right:26px}
}
/* one column below 760px and two across until 1099px, so every card keeps its three tags on one row */
@media(min-width:760px) and (max-width:1099px){
  .pg-work .builds{grid-template-columns:1fr 1fr}
}

/* NDA note under the builds: icon + text, centered block */
.pg-work .work-note{display:flex;gap:12px;align-items:flex-start;max-width:780px;margin:44px auto 0}
.pg-work .work-note .ic{width:20px;height:20px;margin-top:0;color:var(--blue)}

/* what ships: copy stays in view beside the tall card stack */
.pg-work .ships > .copy .copy-link{margin-top:26px}
.pg-work .ships > .copy .copy-link a{color:var(--link);text-decoration:none}
.pg-work .ships > .copy .copy-link a:hover{text-decoration:underline}
@media(min-width:834px){
  .pg-work .ships > .copy{position:sticky;top:110px}
}

/* hero meta: four items wrap 2 + 2 (never 3 + 1) until they fit on one row */
@media(max-width:1180px){
  .pg-work .page-hero .hero-meta{max-width:620px;margin-left:auto;margin-right:auto}
}

/* hero: three stats share one centered row from tablet up (no empty 4th column, no lone third stat);
   phones get the stacked rows of .stats.n3 (components.css), as on the other three-stat heroes */
@media(min-width:641px){
  .pg-work .page-hero .stats{grid-template-columns:repeat(3,1fr);max-width:900px}
  .pg-work .page-hero .stat:nth-child(3){border-left:1px solid var(--line-d);padding-left:18px}
}

/* sectors: compact icon tiles 4 across on desktop; below 1069px, 2-up icon rows (4 across got
   too narrow and names broke onto three lines). 19px + 22px sides keeps every name on two lines. */
.pg-work .sectors{grid-auto-rows:1fr}
.pg-work .sectors .card{padding:28px 22px 30px}
.pg-work .sector .icon{margin-bottom:22px}
.pg-work .sector h3{margin:0;font-size:19px;letter-spacing:-.025em;line-height:1.2}
@media(max-width:1068px){
  .pg-work .sectors{gap:12px}
  .pg-work .sectors .card{flex-direction:row;align-items:center;gap:16px;padding:18px 20px}
  .pg-work .sector .icon{width:40px;height:40px;border-radius:12px;margin:0}
  .pg-work .sector .icon .ic{width:20px;height:20px}
  .pg-work .sector h3{font-size:18px}
}
.pg-work .cta-bar p strong{color:#f5f5f7;font-weight:600}

/* FAQ as icon cards (same details/summary markup, so FAQPage schema is unchanged) */
.pg-work #faq .faq-list{border-top:0;display:grid;gap:12px}
.pg-work #faq .faq-list details{border-bottom:0;border-radius:24px;padding:0 26px;background:var(--paper);transition:box-shadow .3s var(--ease)}
.pg-work #faq .faq-list details[open]{box-shadow:inset 0 0 0 1px rgba(0,114,188,.2)}
.pg-work #faq .faq-list summary{display:flex;align-items:center;gap:16px;padding:18px 40px 18px 0;font-size:19px}
.pg-work #faq .faq-list summary .icon{margin:0}
.pg-work #faq .faq-list details > div{padding:0 12px 24px 56px}
@media(max-width:640px){
  .pg-work #faq .faq-list details{padding:0 18px;border-radius:22px}
  .pg-work #faq .faq-list summary{gap:14px;padding:16px 32px 16px 0;font-size:17px}
  .pg-work #faq .faq-list details > div{padding:0 0 22px;font-size:16px}
}

/* portfolio rail: service chips link to their pages (one padding source: the link) */
.pg-work .rail .chips > li:has(> a){padding:0}
.pg-work .rail .chips > li > a{display:block;padding:5px 11px;border-radius:980px;color:inherit;text-decoration:none;transition:background .2s}
.pg-work .rail .chips > li > a:hover{background:rgba(255,255,255,.16)}
/* chip links: 40px invisible hit area around the 28px chip */
.pg-work .rail .chips > li > a{position:relative}
.pg-work .rail .chips > li > a::after{content:"";position:absolute;inset:-6px 0}
.pg-work .rail .work-body p a{color:var(--link-d);text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){
  /* phones: arrows stay visible under the heading and the next card peeks ~32px, so the rail reads as scrollable */
  .pg-work #portfolio .rail-ctrl{display:flex;margin-top:0}
  .pg-work #portfolio .rail-btn{width:44px;height:44px}
  .pg-work #portfolio .rail-btn svg{width:24px;height:24px}
  /* three chips still share one row on phones instead of leaving the last one alone:
     the card never drops below 312px, so the widest chip row (274px) fits from 360px up */
  .pg-work .rail{grid-auto-columns:min(max(82vw,312px),500px);gap:12px;margin-top:28px}
  .pg-work .rail .work-media,.pg-work .rail .nda-media{padding-left:18px;padding-right:18px}
  .pg-work .rail .work-body{padding-left:18px;padding-right:18px}
  .pg-work .rail .chips{gap:5px}
  .pg-work .rail .chips > li,.pg-work .rail .chips > li > a{padding:5px 6px}
  .pg-work .rail .chips > li:has(> a){padding:0}
  /* four chips: two rows of two, never three plus one */
  .pg-work .rail .chips:has(> li:nth-child(4)){display:grid;grid-template-columns:repeat(2,max-content);justify-items:start;row-gap:12px}
}

/* what ships, phones: icon beside the title, description full width underneath */
@media(max-width:640px){
  .pg-work .ships .card.hz{display:grid;grid-template-columns:40px 1fr;column-gap:14px;row-gap:12px;align-items:center;padding:24px 22px}
  .pg-work .ships .card.hz > div{display:contents}
  .pg-work .ships .card.hz h3{margin:0;font-size:19px}
  .pg-work .ships .card.hz p{grid-column:1/-1}
}

/* the portfolio follows the dark hero directly: one continuous dark showcase with a hairline */
.pg-work .page-hero + #portfolio{padding-top:40px}
.pg-work .page-hero + #portfolio::before{content:"";position:absolute;top:0;left:50%;width:min(1072px,calc(100% - 48px));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.16),rgba(255,255,255,0))}
@media(max-width:640px){.pg-work .page-hero + #portfolio{padding-top:28px}}