/*! social-pinks — shared base (all pages)
    Generated from the static build. Edit the source HTML and re-run
    tools/build-theme.py, or edit here directly once you stop regenerating. */
:root{
    --bg:#ffffff; --ink:#0a221f; --ink-2:#5b5677; --ink-3:#928da8;
    --line:#eae7f4; --line-2:#e0dcee;
    /* vivid multi-color system */
    --pink:#e6007e; --pink-d:#c1006a;
    --purple:#6c4df2; --blue:#2d8eff; --green:#00c875; --yellow:#ffcb05; --teal:#12c2c2; --orange:#fb6340;
    /* deep green surface + mint accent (from brand footer) */
    --forest:#0a221f; --forest-2:#12332c; --spring:#75d49d; --spring-hi:#9fe6bd;
    /* soft tints */
    --lilac:#f6f6f9; --mint:#e9fbf3; --peach:#fff3ec; --sky:#eaf3ff; --lemon:#fff9e0; --rose:#ffeaf5;
    --shadow-sm:0 2px 8px rgba(10,34,31,.06);
    --shadow:0 18px 44px -22px rgba(10,34,31,.28);
    --shadow-lg:0 40px 90px -34px rgba(10,34,31,.36);
    --r:16px; --r-lg:24px; --r-xl:32px; --maxw:1200px;
    --sans:"Inter",-apple-system,sans-serif; --disp:"Poppins",var(--sans);
    /* shared rhythm — keep heroes, bands and button rows in step */
    --space-btn:16px;
    --space-hero-y:clamp(36px,4.2vw,48px);
    --space-hero-b:clamp(44px,5.2vw,64px);
    --space-section:clamp(48px,5.8vw,72px);
  }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
/* Inline text links inside body copy (paragraphs, list items, FAQ answers, table
   cells) must read as links on their own, not only on hover or via cursor.
   Scoped to .band, the wrapper every content section on every page template
   uses, so the header nav bar, the mega menu, the mobile menu and the
   breadcrumb trail (none of which live inside a .band) keep their own
   existing link styling untouched. Buttons and pills are excluded too. */
.band p a:not(.btn):not([class*="btn"]),
.band li a:not(.btn):not([class*="btn"]),
.band .a a:not(.btn):not([class*="btn"]),
.band td a:not(.btn):not([class*="btn"]){color:var(--pink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.band p a:not(.btn):not([class*="btn"]):hover,
.band li a:not(.btn):not([class*="btn"]):hover,
.band .a a:not(.btn):not([class*="btn"]):hover,
.band td a:not(.btn):not([class*="btn"]):hover{color:var(--pink-d)}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:700;line-height:1.1;letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.rev{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rev.in{opacity:1;transform:none}
.kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-size:.76rem;font-weight:700;letter-spacing:.02em;color:var(--pink);background:var(--lilac);border:1px solid var(--line-2);padding:7px 14px;border-radius:999px}
.kick .d{width:7px;height:7px;border-radius:50%;background:var(--pink)}
/* pill buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:600;font-size:.96rem;padding:13px 24px;border-radius:999px;cursor:pointer;border:2px solid transparent;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:0 14px 30px -14px rgba(10,34,31,.6)}
.btn-ink:hover{background:var(--ink)}
.btn-purple{background:var(--pink);color:#fff;box-shadow:0 14px 30px -14px rgba(230,0,126,.6)}
.btn-purple:hover{background:var(--pink)}
.btn-green{background:var(--green);color:#04231a;box-shadow:0 14px 30px -14px rgba(0,200,117,.55)}
.btn-green:hover{background:var(--green)}
.btn-pink{background:var(--pink);color:#fff;box-shadow:0 14px 30px -14px rgba(230,0,126,.55)}
.btn-pink:hover{background:var(--pink)}
.btn-out{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn-out:hover{background:#f2f2f6}
.btn-white{background:#fff;color:var(--ink)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:#fff;background:#fff;color:var(--ink)}
.cta-row{display:flex;gap:var(--space-btn);flex-wrap:wrap;align-items:center}
.tlink{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:600;font-size:.92rem;color:var(--pink)}
.tlink:hover{gap:11px}
/* progress */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--pink);z-index:120;transition:width .1s linear}
/* topbar */
.topbar{background:var(--ink);color:#fff}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:14px;height:40px;font-size:.8rem}
.topbar .l,.topbar .r{display:flex;align-items:center;gap:16px}
.topbar .rc{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.86)}
.topbar .rc b{color:#fff}
.topbar .star{color:var(--yellow);letter-spacing:1px}
.topbar .promo{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.topbar .promo .tag{background:var(--pink);color:#fff;font-weight:700;font-size:.66rem;padding:3px 9px;border-radius:999px}
.topbar .r a{color:rgba(255,255,255,.86);font-weight:600}
.topbar .r a:hover{color:#fff}
.topbar .soc{display:flex;gap:7px}
.topbar .soc a{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff}
.topbar .soc a:hover{background:var(--pink)}
.topbar .soc svg{width:13px;height:13px}
@media(max-width:860px){.topbar .l .rc,.topbar .soc{display:none}}
@media(max-width:560px){.topbar{display:none}}
/* nav */
.nav-in{display:flex;align-items:center;gap:12px;height:72px}
.logo-img{height:30px}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:8px;padding:0;list-style:none}
.nav-links>li{position:relative}
.nav-links>li>a{display:inline-flex;align-items:center;gap:5px;font-family:var(--disp);font-size:.9rem;font-weight:600;color:var(--ink-2);padding:9px 11px;border-radius:11px;cursor:pointer;white-space:nowrap}
.nav-links>li>a:hover,.nav-links>li.open>a{color:var(--ink);background:var(--lilac)}
.nav-links .caret{width:11px;height:11px;transition:transform .2s;opacity:.7}
.nav-links>li.open .caret{transform:rotate(180deg)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-quote{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:600;font-size:.88rem;color:var(--ink);padding:10px 15px;border-radius:999px;border:2px solid var(--line-2);background:#fff;white-space:nowrap}
.nav-quote:hover{border-color:var(--ink)}
@media(max-width:1180px){.nav-quote{display:none}}
.mega{position:absolute;top:calc(100% + 10px);left:0;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s;z-index:95;overflow:hidden}
.nav-links>li.open .mega{opacity:1;visibility:visible;transform:none}
/* Flipped by site.js when the panel would otherwise overflow the right
   edge of the viewport (Industries/Locations/Blog sit mid-to-right in the
   nav, so their fixed-width panels can spill past the header and overlap
   the phone/CTA button on common desktop widths — see project notes). */
.mega.edge-r{left:auto;right:0}
.mega.svc{width:840px}
.mega.ind{width:600px}
.mega.loc{width:540px;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px}
.megacols{display:grid;gap:4px 30px;padding:22px 26px}
.mega.svc .megacols{grid-template-columns:repeat(3,1fr)}
.mega.ind .megacols{grid-template-columns:repeat(2,1fr)}
.mgroup{padding:6px 0}
.mgh{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:.92rem;font-weight:700;color:var(--ink);margin-bottom:8px;text-decoration:none;transition:color .15s}
.mgh:hover{color:var(--pink)}
.mgh .dot{width:9px;height:9px;border-radius:3px;flex:none}
.mgh .flag{font-family:var(--disp);font-size:.56rem;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--pink);padding:3px 8px;border-radius:999px;text-transform:uppercase}
.ml{display:block;font-size:.85rem;color:var(--ink-2);padding:5px 0;transition:color .14s,transform .14s;width:max-content}
.ml:hover{color:var(--pink);transform:translateX(3px)}
.megafoot{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding:14px 26px;background:var(--lilac);width:100%;box-sizing:border-box}
.megafoot span{font-size:.86rem;color:var(--ink-2);flex:1 1 auto;min-width:0}
.megafoot .btn{padding:10px 18px;font-size:.85rem;flex:none;white-space:nowrap}
/* Industries dropdown: whatever is squeezing this footer's row narrow also
   wraps the button's text and, via its 999px border-radius, rounds it into
   a circle. Until that width issue is tracked down, stack the copy above
   the button instead of fighting for space in one row — reads cleanly at
   any width. Scoped to .mega.ind only; the Services dropdown's footer has
   the width to stay a single row and is left as-is. */
.mega.ind .megafoot{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px}
.mega.ind .megafoot span{flex:none}
.mega .mtitle{font-family:var(--disp);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:4px 10px 8px}
.mega .promo{background:var(--ink);border-radius:16px;padding:18px;color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.mega .promo h4{color:#fff;font-size:1.05rem}
.mega .promo p{font-size:.8rem;color:rgba(255,255,255,.8);margin-top:6px}
.mega .citywrap{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.mega .citywrap span,.mega .citywrap a{font-size:.78rem;color:var(--ink-2);background:var(--lilac);border:1px solid var(--line);border-radius:999px;padding:6px 12px;text-decoration:none}
.mega .citywrap a:hover{color:var(--pink);border-color:var(--pink);background:#fff}
.navburger{display:none;width:44px;height:44px;border:2px solid var(--line-2);border-radius:12px;background:#fff;cursor:pointer;place-items:center}
.navburger svg{width:20px;height:20px}
@media(max-width:1000px){.nav-links{display:none}.navburger{display:grid}}
/* mobile slide-down menu */
.mmenu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;background:#fff;padding:0 22px 28px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex-direction:column;gap:4px}
.mmenu.open{display:flex}
/* sticky so the close button stays reachable now the drawer is long */
.mmenu .mm-top{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;padding:18px 0 14px;background:#fff;z-index:2}
.mmenu .mm-top img{height:28px}
.mmenu .mm-x{width:44px;height:44px;border:2px solid var(--line-2);border-radius:12px;background:#fff;display:grid;place-items:center;cursor:pointer}
.mmenu .mm-x svg{width:20px;height:20px}
/* ---- mobile drawer: two-level accordion (2026-09-23) ----------------------
   Every top-level page AND its sub-pages are reachable here, mirroring the
   desktop .mega panels. A row is a link plus an optional caret button; the
   caret toggles .open on its own .mm-item only, so nested groups
   (Services -> SEO -> Local SEO) collapse independently. Markup contract
   lives in template-parts/chrome/mmenu.php; the toggle binder is in site.js.
   -------------------------------------------------------------------- */
.mmenu .mm-nav{display:flex;flex-direction:column}
.mmenu .mm-item{border-bottom:1px solid var(--line)}
.mmenu .mm-row{display:flex;align-items:center;gap:8px}
.mmenu a.mm-link{flex:1 1 auto;min-width:0;font-family:var(--disp);font-weight:600;font-size:1.12rem;color:var(--ink);padding:14px 8px}
.mmenu a.mm-link:hover{color:var(--pink)}
.mmenu .mm-tog{flex:none;width:46px;height:46px;border:1px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:transform .22s ease,color .18s,border-color .18s,background .18s}
.mmenu .mm-tog svg{width:19px;height:19px}
.mmenu .mm-tog.sm{width:40px;height:40px;border-radius:10px}
.mmenu .mm-tog.sm svg{width:17px;height:17px}
.mmenu .mm-item.open>.mm-row>.mm-tog{transform:rotate(180deg);color:var(--pink);border-color:var(--pink);background:var(--lilac)}
.mmenu .mm-sub{display:none;padding:0 0 12px}
.mmenu .mm-item.open>.mm-sub{display:block;animation:mmIn .22s ease both}
@keyframes mmIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mmenu .mm-item.open>.mm-sub{animation:none}.mmenu .mm-tog{transition:none}}
.mmenu .mm-sub .mm-item{border-bottom:0}
.mmenu .mm-sub .mm-item>.mm-row{border-top:1px dashed var(--line)}
.mmenu a.mm-gh{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:.95rem;color:var(--ink);padding:12px 8px}
.mmenu a.mm-gh:hover{color:var(--pink)}
.mmenu .mm-gt{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:14px 8px 6px}
.mmenu .mm-gh .dot,.mmenu .mm-gt .dot{width:9px;height:9px;border-radius:3px;flex:none}
.mmenu .mm-slist{display:flex;flex-direction:column;padding-bottom:6px}
.mmenu a.mm-sl{display:flex;align-items:center;min-height:44px;font-size:.92rem;color:var(--ink-2);padding:8px 10px 8px 26px;border-radius:10px}
.mmenu a.mm-sl:hover{color:var(--pink);background:var(--lilac)}
.mmenu .mm-chips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 8px 12px}
.mmenu .mm-chips a{font-size:.84rem;font-weight:600;color:var(--ink-2);background:var(--lilac);border:1px solid var(--line);border-radius:999px;padding:9px 14px;text-decoration:none}
.mmenu .mm-chips a:hover{color:var(--pink);border-color:var(--pink);background:#fff}
.mmenu a.mm-all{display:inline-flex;align-items:center;min-height:44px;font-family:var(--disp);font-weight:700;font-size:.88rem;color:var(--pink);padding:8px}
/* legacy flat category row — kept so any template still printing .mm-cats
   keeps its styling */
.mmenu .mm-cats{display:flex;flex-wrap:wrap;gap:8px;padding:10px 8px 16px;border-bottom:1px solid var(--line)}
.mmenu .mm-cats a{font-size:.8rem;font-weight:600;color:var(--ink-2);background:var(--lilac);border:1px solid var(--line);border-radius:999px;padding:7px 13px;text-decoration:none}
.mmenu .mm-cats a:hover{color:var(--pink);border-color:var(--pink)}
.mmenu .mm-cta{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.mmenu .mm-cta .btn{justify-content:center;width:100%;font-size:1rem}
/* sticky mobile conversion bar */
.mobilecta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line-2);box-shadow:0 -8px 24px -16px rgba(10,34,31,.4)}
.mobilecta .btn{flex:1;justify-content:center;padding:13px 10px;font-size:.92rem}
.mobilecta .btn svg{width:16px;height:16px}
/* The bar measures 69-74.5px depending on viewport width, and its own
   padding includes env(safe-area-inset-bottom) while this reserve did not.
   84px + the inset leaves the footer's last line clear of it; see the
   footer block at the end of overrides.css for the other half. */
@media(max-width:720px){.mobilecta{display:flex}body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}}
/* ===== HERO ===== */
.hero{position:relative;padding:var(--space-hero-y) 0 var(--space-hero-b);overflow:hidden;background:radial-gradient(120% 120% at 80% -10%,var(--lilac),#fff 60%)}
.hero .blob{display:none}
.hero::before{content:"";position:absolute;top:-140px;right:-100px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,var(--pink),transparent 70%);opacity:.14;z-index:0;pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-160px;left:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,var(--pink),transparent 72%);opacity:.07;z-index:0;pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero .kick{margin-bottom:18px}
.hero h1{font-size:clamp(2rem,3.8vw,3rem);font-weight:800;letter-spacing:-.03em;margin:12px 0 0}
.hero h1 .hl{position:relative;color:var(--ink)}
.hero h1 .hl2{position:relative;color:var(--pink)}
.hero .sub{margin:16px 0 22px;font-size:1.05rem;color:var(--ink-2);max-width:46ch}
.hero .cta-row{display:flex;gap:var(--space-btn);flex-wrap:wrap;align-items:center}
.hero.fold{min-height:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
.capture{display:flex;gap:8px;max-width:520px;margin:26px auto 0;background:#fff;border:2px solid var(--line-2);border-radius:999px;padding:6px 6px 6px 20px;box-shadow:var(--shadow-sm)}
.capture input{flex:1;border:none;outline:none;font-family:inherit;font-size:.98rem;color:var(--ink);background:transparent}
.capture input::placeholder{color:var(--ink-3)}
.capture button{white-space:nowrap}
.hero .micro{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.85rem;color:var(--ink-3);align-items:center}
.hero .micro b{color:var(--ink)}
.hero .micro .star{color:var(--yellow)}
/* board */
.board-wrap{position:relative;margin-top:32px}
.board{max-width:960px;margin:0 auto;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden;text-align:left}
.board-top{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom:1px solid var(--line);background:var(--lilac)}
.board-top .dots{display:flex;gap:6px}
.board-top .dots i{width:11px;height:11px;border-radius:50%}
.board-top .ttl{font-family:var(--disp);font-weight:700;font-size:.95rem;margin-left:6px}
.board-top .ttl span{color:var(--pink)}
.board-top .avs{margin-left:auto;display:flex}
.board-top .avs i{width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-left:-8px;font-size:.62rem;color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--disp)}
.board-body{padding:10px 10px 16px}
.brow{display:grid;grid-template-columns:1.7fr 1fr 1.1fr 1fr;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;font-size:.92rem}
.brow.h{color:var(--ink-3);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:8px 16px}
.brow:not(.h):hover{background:var(--lilac)}
.brow .ch{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:600}
.brow .ch .sq{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:none}
.brow .ch .sq svg{width:16px;height:16px}
.pill{display:inline-block;color:#fff;font-family:var(--disp);font-weight:700;font-size:.74rem;padding:6px 13px;border-radius:999px;text-align:center}
.bar{height:9px;border-radius:999px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px}
.brow .mtr{font-family:var(--disp);font-weight:800}
.chip{position:absolute;background:#fff;border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow);padding:12px 16px;display:flex;align-items:center;gap:11px;z-index:2}
.chip .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none}
.chip .ic svg{width:18px;height:18px}
.chip b{font-family:var(--disp);font-weight:800;font-size:1.05rem;display:block}
.chip small{font-size:.7rem;color:var(--ink-3)}
.chip.c1{top:-24px;right:3%;animation:fl 6s ease-in-out infinite}
.chip.c2{bottom:26px;left:2%;animation:fl 7s ease-in-out infinite .7s}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.chip{animation:none}}
@media(max-width:740px){.brow{grid-template-columns:1.5fr 1fr}.brow .c3,.brow .c4,.board-top .avs{display:none}.chip{display:none}}
/* ===== section shell ===== */
.band{padding:var(--space-section) 0}
.band.lilac{background:var(--lilac)}
.band.mint{background:var(--mint)}
.band.peach{background:var(--peach)}
.band.sky{background:var(--sky)}
.band.ink{background:var(--ink);color:#fff}
.head{max-width:680px;margin:0 auto 30px;text-align:center}
.head h2{font-size:clamp(1.7rem,3vw,2.2rem);margin-top:12px;font-weight:800;letter-spacing:-.03em}
.head p{margin-top:11px;color:var(--ink-2);font-size:1.02rem}
.band.ink .head p{color:rgba(255,255,255,.75)}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.shead h2{font-size:clamp(1.8rem,3.2vw,2.35rem);letter-spacing:-.03em;max-width:16ch;margin-top:14px}
/* trust strip */
.strip{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .lab{text-align:center;font-family:var(--disp);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 28px}
.blogo{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:600;color:var(--ink-2);font-size:.94rem}
.blogo svg{width:20px;height:20px;flex:none}
.grev{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:8px 13px;box-shadow:var(--shadow-sm)}
.grev svg{width:19px;height:19px}
.grev b{font-family:var(--disp);font-weight:700}
.grev .st{color:var(--yellow);font-size:.8rem}
.grev small{display:block;color:var(--ink-3);font-size:.68rem}
/* hero grid (board + form) */
.herostats{display:flex;gap:26px;margin:22px 0 6px;flex-wrap:wrap}
.herostats b{font-family:var(--disp);font-size:1.6rem;font-weight:800;display:block;line-height:1;color:var(--ink)}
.herostats b.ac{color:var(--pink)}
.herostats b.gold{color:#ffcb05}
.herostats span{font-size:.76rem;color:var(--ink-3);margin-top:3px;display:block}
.herostats .stat-suffix{display:inline;font-size:.85rem;color:inherit;margin-left:4px;letter-spacing:1px}
.mediacard{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow-lg);position:relative}
.mediacard img{width:100%;height:440px;object-fit:cover;display:block}
.mediacard::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(10,34,31,.32),transparent 46%)}
@media(max-width:640px){.hero-media .chip{display:none}}
.hero.hero2::before,.hero.hero2::after{display:none}
/* services — calm white cards, contained color */
.svc-grid{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:16px}
.svc-grid>.svc,.svc-grid>a.svc{flex:0 1 calc((100% - 32px)/3);max-width:calc((100% - 32px)/3)}
@media(max-width:900px){.svc-grid>.svc,.svc-grid>a.svc{flex:0 1 calc((100% - 16px)/2);max-width:calc((100% - 16px)/2)}}
@media(max-width:600px){.svc-grid>.svc,.svc-grid>a.svc{flex:0 1 100%;max-width:100%}}
.svc{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;transition:transform .16s,box-shadow .2s,border-color .2s;display:block}
.svc-grid .svc{display:flex;flex-direction:column;justify-content:center}
a.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--pink)}
.svc.big{grid-column:span 1}
.svc .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px}
.svc .ic svg{width:24px;height:24px;color:#fff}
.ic-pink{background:#e6007e}
.ic-blue{background:#3b82f6}
.ic-amber{background:#f59e0b}
.ic-teal{background:#14b8a6}
.ic-green{background:#10b981}
.ic-violet{background:#8b5cf6}
.svc h3{font-family:var(--disp);font-size:1.15rem;font-weight:700;margin-bottom:7px;color:var(--ink)} /* .svc cards always have a white background (see .svc above), so the heading must stay ink-dark even inside a .band.ink section, which otherwise sets color:#fff on everything it contains and made this heading invisible on the white card. */
.svc.big h3{font-size:1.15rem}
.svc p{color:var(--ink-2);font-size:.92rem}
.svc .chips{margin-top:13px;display:flex;flex-wrap:wrap;gap:6px}
.svc .chips span{font-size:.72rem;color:var(--ink-2);background:var(--lilac);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.svc .go{margin-top:14px;display:inline-flex;gap:6px;font-family:var(--disp);font-weight:700;font-size:.84rem;color:var(--pink)}
/* services — tabbed carousel + sub-cards */
.svctabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:22px}
.svctab{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:600;font-size:.88rem;color:var(--ink-2);background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:8px 16px 8px 9px;cursor:pointer;transition:transform .15s,background .18s,color .18s,border-color .18s}
.svctab .ti{display:inline-grid;place-items:center;flex:none}
.svctab .ti svg{width:19px;height:19px}
.svctab:hover{transform:translateY(-2px);border-color:var(--ink);background:var(--lilac)}
.svctab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.svctab.on .ti{color:#fff!important}
.svcstage{position:relative}
.svcpanel{display:none}
.svcpanel.on{display:block;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow);animation:fadeUp .4s ease}
.svcptop{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:820px){.svcpanel.on{padding:20px}.svcptop{grid-template-columns:1fr;gap:20px}}
/* editable content region inside each service */
.svccontent{margin-top:14px;border:1.5px dashed var(--line-2);background:var(--lilac);border-radius:16px;padding:16px 20px}
.svccontent .cl{font-family:var(--disp);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);display:inline-flex;align-items:center;gap:7px;margin-bottom:9px}
.svccontent .cl::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--pink)}
.svccontent p{color:var(--ink-2);font-size:.9rem;margin:0 0 8px;line-height:1.55}
.svccontent ul{margin:0;padding-left:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
@media(max-width:640px){.svccontent ul{grid-template-columns:1fr}}
.svccontent li{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;color:var(--ink)}
.svccontent li svg{width:17px;height:17px;color:var(--green);flex:none;margin-top:2px}
.svcintro .bic{display:inline-grid;place-items:center;margin-bottom:12px}
.svcintro .bic svg{width:44px;height:44px}
.svcintro h3{font-family:var(--disp);font-size:1.5rem;font-weight:800;margin-bottom:8px}
.svcintro p{color:var(--ink-2);font-size:.94rem;margin-bottom:16px}
.svcintro .go{display:inline-flex;gap:7px;font-family:var(--disp);font-weight:700;font-size:.88rem;color:var(--pink)}
.svcintro .go:hover{gap:11px}
.subcards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.subcards{grid-template-columns:1fr}}
.subcard{background:var(--lilac);border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:transform .15s,box-shadow .2s,background .2s}
.subcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);background:#fff;border-color:var(--pink)}
.subcard .sh{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.subcard .sh .d{width:9px;height:9px;border-radius:3px;flex:none}
.subcard b{font-family:var(--disp);font-size:.9rem;font-weight:700}
.subcard p{font-size:.8rem;color:var(--ink-2);margin:0;line-height:1.45}
.kwarea{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-2);display:flex;gap:12px 16px;align-items:baseline;flex-wrap:wrap}
.kwlabel{font-family:var(--disp);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px;flex:none}
.kwlabel::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink)}
.kwchips{display:flex;flex-wrap:wrap;gap:7px}
.kwchips span{font-size:.76rem;color:var(--ink-2);background:var(--lilac);border:1px solid var(--line);border-radius:999px;padding:5px 12px;transition:color .15s,border-color .15s,background .15s}
.kwchips span:hover{color:var(--pink);border-color:var(--pink);background:#fff}
/* seo flagship */
.seowrap{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
@media(max-width:900px){.seowrap{grid-template-columns:1fr;gap:32px}}
.seowrap h2{font-size:clamp(2rem,3.8vw,2.9rem);font-weight:800;letter-spacing:-.03em;color:#fff;max-width:15ch}
.seowrap .lead{margin:18px 0 22px;color:rgba(255,255,255,.8);font-size:1.05rem;max-width:48ch}
.seostats{display:flex;gap:30px;margin-bottom:24px;flex-wrap:wrap}
.seostats b{font-family:var(--disp);font-size:2.3rem;font-weight:800;display:block;line-height:1;color:#fff}
.seostats b .pk{color:#ff62b0;font-size:inherit}
.seostats span{font-size:.78rem;color:rgba(255,255,255,.6);margin-top:5px;display:block}
.seocards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.seocards{grid-template-columns:1fr}}
.seocard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:18px 20px;transition:background .16s,transform .16s;display:block}
a.seocard:hover{background:var(--forest-2);border-color:var(--pink);transform:translateY(-3px)}
.seocard .t{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.seocard .t .i{display:inline-grid;place-items:center;flex:none}
.seocard .t .i svg{width:23px;height:23px}
.seocard .t b{font-family:var(--disp);font-size:1rem;font-weight:700;color:#fff}
.seocard p{color:rgba(255,255,255,.72);font-size:.84rem;line-height:1.5}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;position:relative}
.step .n{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-family:var(--disp);font-weight:800;color:#fff;font-size:1.1rem;margin-bottom:16px}
.step h4{font-family:var(--disp);font-size:1.2rem;font-weight:700;margin-bottom:7px}
.step p{color:var(--ink-2);font-size:.94rem}
/* industries */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.ind-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ind-grid{grid-template-columns:1fr}}
.ind{display:flex;gap:13px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;transition:transform .16s,box-shadow .2s}
.ind:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ind .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none}
.ind .ic svg{width:22px;height:22px;color:#fff}
.ind b{font-family:var(--disp);font-size:1rem;font-weight:600}
.ind span{display:block;font-size:.8rem;color:var(--ink-3)}
.ind .go{margin-left:auto;color:var(--ink-3);font-size:1.2rem;transition:transform .15s,color .15s}
.ind:hover .go{color:var(--pink);transform:translateX(3px)}
/* industries — compact pill row */
.indpills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:920px;margin:0 auto}
.indpill{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:8px 20px 8px 9px;cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .2s,background .2s}
.indpill .pic{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;color:var(--c);background:var(--t);flex:none;transition:background .2s,color .2s}
.indpill .pic svg{width:18px;height:18px}
.indpill b{font-family:var(--disp);font-size:.92rem;font-weight:600;color:var(--ink);transition:color .2s}
.indpill:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--c);background:var(--c)}
.indpill:hover .pic{background:#fff;color:var(--c)}
.indpill:hover b{color:#fff}
/* industries editable content area */
.indcontent{max-width:920px;margin:26px auto 0;border:1.5px dashed var(--line-2);background:#fff;border-radius:18px;padding:22px 24px}
.indcontent .cl{font-family:var(--disp);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);display:inline-flex;align-items:center;gap:7px;margin-bottom:9px}
.indcontent .cl::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--pink)}
.indcontent p{color:var(--ink-2);font-size:.94rem;line-height:1.6;margin:0}
.indcontent .ictags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.indcontent .ictags span{font-size:.8rem;font-weight:600;color:var(--ink-2);background:var(--lilac);border:1px solid var(--line);border-radius:999px;padding:6px 13px}
/* local */
.loc{display:grid;grid-template-columns:1fr 1.25fr;gap:30px;align-items:center}
@media(max-width:860px){.loc{grid-template-columns:1fr}}
.locf{border-radius:var(--r-lg);padding:32px;background:var(--ink);color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}
.locf .pin{font-family:var(--disp);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.locf h3{font-family:var(--disp);font-size:2rem;margin:8px 0 10px;color:#fff}
.locf p{color:rgba(255,255,255,.85);font-size:.94rem}
.locf .lb{margin-top:18px;display:inline-flex;background:var(--pink);color:#fff;font-family:var(--disp);font-weight:700;padding:11px 20px;border-radius:999px}
.locmeta{display:flex;gap:20px;margin-top:20px}
.locmeta b{font-family:var(--disp);font-size:1.5rem;display:block;color:#fff}
.locmeta span{font-size:.72rem;color:rgba(255,255,255,.7)}
.loctitle{font-family:var(--disp);font-weight:700;margin-bottom:6px;font-size:1.1rem}
.locsub{color:var(--ink-2);font-size:.9rem;margin-bottom:16px}
.metros{display:flex;flex-direction:column;gap:12px}
.metro b{font-family:var(--disp);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);display:block;margin-bottom:6px}
.cities{display:flex;flex-wrap:wrap;gap:8px}
.cities span{font-size:.84rem;font-weight:500;color:var(--ink-2);background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;transition:all .15s}
.cities span:hover{border-color:var(--pink);color:var(--pink)}
.cities span.more{background:var(--lilac);border-color:var(--line-2);color:var(--pink);font-weight:600}
/* comparison board */
.cmp-toggle{display:flex;justify-content:center;gap:0;margin:0 auto 34px;background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:5px;width:max-content;box-shadow:var(--shadow-sm)}
.cmp-toggle button{border:none;background:transparent;font-family:var(--disp);font-weight:600;font-size:.88rem;color:var(--ink-2);padding:9px 18px;border-radius:999px;cursor:pointer;transition:all .18s}
.cmp-toggle button.on{background:var(--ink);color:#fff}
.approach{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
@media(max-width:820px){.approach{grid-template-columns:1fr}}
.apanel{border-radius:var(--r-lg);padding:28px}
.apanel.them{background:#fff;border:1px solid var(--line-2)}
.apanel.us{background:var(--ink);color:#fff;box-shadow:var(--shadow)}
.apanel .ptag{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;font-size:.78rem;padding:6px 14px;border-radius:999px;margin-bottom:16px}
.apanel.them .ptag{background:var(--lilac);color:var(--ink-2)}
.apanel.us .ptag{background:rgba(255,255,255,.15);color:#fff}
.apanel h3{font-family:var(--disp);font-size:1.3rem;font-weight:700;margin-bottom:16px}
.apanel.us h3{color:#fff}
.arow{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)}
.apanel.us .arow{border-top-color:rgba(255,255,255,.12)}
.arow:first-of-type{border-top:none}
.arow .mk{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;margin-top:1px}
.arow .mk svg{width:13px;height:13px}
.apanel.them .mk{background:var(--lilac);color:var(--ink-3)}
.apanel.us .mk{background:var(--green);color:#04231a}
.arow b{font-family:var(--disp);font-size:.94rem;font-weight:600;display:block}
.arow span{font-size:.82rem;color:var(--ink-2)}
.apanel.us .arow span{color:rgba(255,255,255,.7)}
.cmp{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.cmp th,.cmp td{padding:15px 16px;text-align:center;border-bottom:1px solid var(--line);font-size:.92rem}
.cmp th:first-child,.cmp td:first-child{text-align:left}
.cmp thead th{background:var(--lilac);font-family:var(--disp);font-weight:700}
.cmp thead th.us{color:#fff;background:var(--pink)}
.cmp td.us{background:var(--lilac)}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp .rl b{display:block;font-family:var(--disp)}
.cmp .rl span{font-size:.78rem;color:var(--ink-2)}
.cmp .y{color:#04231a;background:var(--green);width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-weight:700;font-size:.8rem}
.cmp .n{color:var(--ink-3);font-size:1.05rem}
.incl{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:700px){.incl{grid-template-columns:1fr}}
.incl .it{display:flex;gap:11px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.incl .it svg{width:20px;height:20px;color:var(--green);flex:none}
.incl .it b{font-family:var(--disp);font-size:.9rem;font-weight:600}
.incl .it span{display:block;font-size:.8rem;color:var(--ink-3)}
.cmp-panels>div[hidden]{display:none}
/* case studies */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.work-grid{grid-template-columns:1fr}}
.work{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:#fff;transition:transform .18s,box-shadow .2s}
.work:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.work .thumb{height:130px;display:grid;place-items:center;color:#fff}
.work .thumb .metric{font-family:var(--disp);font-size:2rem;font-weight:800;text-align:center}
.work .thumb .metric small{display:block;font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;opacity:.9;margin-bottom:4px}
.work .body{padding:18px 20px}
.work .body .tags{font-family:var(--disp);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pink)}
.work .body h4{font-family:var(--disp);font-size:1.05rem;margin:5px 0 6px}
.work .body p{color:var(--ink-2);font-size:.88rem}
.work .body .rd{margin-top:12px;font-family:var(--disp);font-weight:600;font-size:.8rem;color:var(--ink);display:inline-flex;gap:6px}
/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;position:relative}
.plan.feat{border:2px solid var(--pink);box-shadow:0 26px 60px -32px rgba(230,0,126,.5)}
.plan .rib{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--pink);color:#fff;font-family:var(--disp);font-weight:700;font-size:.66rem;padding:5px 14px;border-radius:999px;white-space:nowrap}
.plan .pname{font-family:var(--disp);font-weight:800;font-size:1.15rem}
.plan .pdesc{color:var(--ink-2);font-size:.86rem;margin:6px 0 16px;min-height:38px}
.plan .price{font-family:var(--disp);font-weight:800;font-size:1.7rem}
.plan .price small{font-size:.8rem;color:var(--ink-3);font-weight:500}
.plan ul{list-style:none;padding:0;margin:18px 0 22px;flex:1}
.plan ul li{display:flex;gap:9px;align-items:flex-start;font-size:.9rem;margin-bottom:10px;color:var(--ink)}
.plan ul li svg{width:17px;height:17px;color:var(--green);flex:none;margin-top:2px}
.plan .btn{justify-content:center;width:100%}
.price-note{text-align:center;color:var(--ink-3);font-size:.82rem;margin-top:22px}
/* testimonials */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.tgrid{grid-template-columns:1fr}}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm)}
.tcard .st{color:var(--yellow);letter-spacing:2px;margin-bottom:10px}
.tcard p{font-size:.95rem}
.tcard .res{font-family:var(--disp);font-weight:700;font-size:.8rem;color:var(--pink);margin-top:14px}
.tcard .who{display:flex;align-items:center;gap:11px;margin-top:13px}
.tcard .who .a{width:42px;height:42px;border-radius:12px;color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:.82rem}
.tcard .who b{display:block;font-size:.9rem}
.tcard .who span{font-size:.76rem;color:var(--ink-3)}
/* blog */
.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.bloggrid{grid-template-columns:1fr}}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .16s,box-shadow .2s;display:block}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post .ph{height:110px;display:flex;align-items:center;justify-content:center;color:#fff}
.post .ph svg{width:34px;height:34px;opacity:.92}
.post .body{padding:18px 20px}
.post .cat{font-family:var(--disp);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.post h4{font-family:var(--disp);font-size:1.02rem;margin:6px 0 6px;line-height:1.25}
.post p{color:var(--ink-2);font-size:.86rem}
.post .meta{margin-top:12px;font-size:.76rem;color:var(--ink-3);display:flex;gap:10px}
/* blog — featured + list */
.blogfeat{display:grid;grid-template-columns:1.12fr .88fr;gap:22px;align-items:stretch}
@media(max-width:900px){.blogfeat{grid-template-columns:1fr}}
.fpost{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .16s,box-shadow .2s}
.fpost:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
/* 2026-09-23: these three img rules existed only in page-blog.css, so on any
   OTHER page using this component (the home page feed above all) a real
   featured image rendered at its intrinsic height inside a fixed-height box
   -- global `img{max-width:100%}` caps the width but never the height -- and
   spilled out of the card. They belong with the component, not with one
   page's bundle. */
.fpost .fph{height:200px;display:flex;align-items:flex-end;padding:20px;color:#fff;position:relative;overflow:hidden}
.fpost .fph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fpost .fph .ft{position:relative;z-index:2}
.fpost .fph svg{width:38px;height:38px;opacity:.95;position:absolute;top:20px;left:22px}
.fpost .fph .ft{font-family:var(--disp);font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.22);padding:5px 12px;border-radius:999px}
.fpost .fbody{padding:22px 24px;flex:1}
.fpost .fbody h3{font-family:var(--disp);font-size:1.4rem;line-height:1.18;margin-bottom:9px;letter-spacing:-.01em}
.fpost .fbody p{color:var(--ink-2);font-size:.94rem}
.fpost .fbody .fmeta{margin-top:16px;font-size:.78rem;color:var(--ink-3);display:flex;gap:10px;align-items:center}
.fpost .fbody .fmeta .rd{margin-left:auto;font-family:var(--disp);font-weight:700;color:var(--pink);display:inline-flex;gap:6px}
.bloglist{display:flex;flex-direction:column;gap:12px}
.lrow{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px 15px;transition:transform .15s,box-shadow .2s,border-color .2s}
.lrow:hover{transform:translateX(3px);box-shadow:var(--shadow-sm);border-color:var(--pink)}
.lrow .lic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none;overflow:hidden;position:relative}
/* absolutely positioned, NOT width/height:100% — .lic is a grid container
   whose single row is auto-sized, so a percentage height on the item is
   indefinite and falls back to auto, letting a portrait thumbnail grow the
   row past the box. inset:0 against the positioned parent is definite. */
.lrow .lic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.lrow .lic svg{width:21px;height:21px}
.lrow .lc{flex:1;min-width:0}
.lrow .cat{font-family:var(--disp);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.lrow h4{font-family:var(--disp);font-size:.95rem;line-height:1.25;margin:2px 0 4px}
.lrow .meta{font-size:.72rem;color:var(--ink-3);display:flex;gap:8px}
/* audit form section */
.auditband{background:linear-gradient(150deg,var(--ink),var(--forest-2));border-radius:var(--r-xl);padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;color:#fff;position:relative;overflow:hidden}
@media(max-width:860px){.auditband{grid-template-columns:1fr;padding:30px}}
.auditband::after{content:"";position:absolute;right:-8%;top:-60%;width:44%;height:220%;background:radial-gradient(circle,var(--pink),transparent 66%);opacity:.5}
.auditband .at{position:relative;z-index:1}
.auditband h2{font-size:clamp(1.8rem,3.4vw,2.6rem);color:#fff;font-weight:800;letter-spacing:-.02em}
.auditband p{color:rgba(255,255,255,.8);margin-top:14px;font-size:1.02rem;max-width:40ch}
.auditband .ticks{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.auditband .ticks div{display:flex;align-items:center;gap:10px;font-size:.92rem;color:rgba(255,255,255,.9)}
.auditband .ticks svg{width:18px;height:18px;color:var(--green);flex:none}
.audit{background:#fff;border-radius:20px;padding:24px;position:relative;z-index:1;box-shadow:var(--shadow-lg)}
.audit .badge{display:inline-flex;align-items:center;gap:6px;background:var(--mint);color:#04231a;font-family:var(--disp);font-weight:700;font-size:.7rem;padding:5px 12px;border-radius:999px}
.audit .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.audit h3{font-family:var(--disp);font-size:1.3rem;margin:12px 0 4px;font-weight:800;color:var(--ink)}
.audit .subf{color:var(--ink-2);font-size:.86rem;margin-bottom:15px}
.field{margin-bottom:10px}
.field label{display:block;font-size:.76rem;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.field input,.field select{width:100%;padding:12px 13px;border:2px solid var(--line-2);border-radius:12px;font-family:inherit;font-size:.92rem;color:var(--ink);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(230,0,126,.12)}
.audit .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){.audit .two{grid-template-columns:1fr}}
.audit button{width:100%;justify-content:center;margin-top:5px;font-size:1rem}
.audit .note{font-size:.75rem;color:var(--ink-3);margin-top:11px;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
.audit .note svg{width:13px;height:13px;color:var(--green);flex:none}
/* compact hero form on mobile */
@media(max-width:940px){
    .audit{padding:18px}
    .audit h3{font-size:1.15rem}
    .audit .subf{font-size:.82rem;margin-bottom:11px}
    .field{margin-bottom:8px}
    .field label{font-size:.72rem;margin-bottom:3px}
    .field input,.field select{padding:10px 12px;font-size:.88rem}
    .audit button{font-size:.94rem;padding:12px 20px}
    .audit .note{margin-top:9px}
  }
.form-ok{text-align:center;padding:22px 6px}
.form-ok .ic{width:56px;height:56px;border-radius:50%;background:var(--mint);color:var(--green);display:grid;place-items:center;margin:0 auto 14px}
.form-ok h3{font-family:var(--disp);font-size:1.25rem;font-weight:800;color:var(--ink)}
.form-ok p{color:var(--ink-2);font-size:.9rem;margin-top:8px}
/* counters */
.cband{background:var(--ink);border-radius:var(--r-xl);padding:34px;color:#fff}
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:640px){.counters{grid-template-columns:1fr 1fr}}
.counter{text-align:center}
.counter b{display:block;font-family:var(--disp);font-size:2.6rem;font-weight:800;line-height:1;color:#fff}
.counter b .ac{color:#ff62b0}
.counter small{display:block;margin-top:8px;color:rgba(255,255,255,.65);font-size:.82rem}
/* mid cta band */
.ctamid{background:var(--ink);border-radius:var(--r-xl);padding:34px 40px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.ctamid h3{font-family:var(--disp);font-size:clamp(1.5rem,3vw,2.1rem);color:#fff;max-width:20ch;position:relative;z-index:1;font-weight:800}
.ctamid p{color:rgba(255,255,255,.8);margin-top:8px;max-width:44ch;position:relative;z-index:1}
.ctamid .btns{display:flex;gap:var(--space-btn);flex-wrap:wrap;position:relative;z-index:1}
/* faq */
.faqwrap{max-width:820px;margin:0 auto}
.faq{border:1px solid var(--line);border-radius:16px;margin-bottom:12px;background:#fff;overflow:hidden}
.faq summary{cursor:pointer;padding:19px 22px;font-family:var(--disp);font-weight:600;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--pink);font-size:1.5rem;line-height:1}
.faq[open] summary::after{content:"–"}
.faq .a{padding:0 22px 20px;color:var(--ink-2);font-size:.95rem}
.faq .a b{color:var(--ink)}
/* final cta */
.finale{text-align:center;padding:24px 0 60px}
.cta-box{background:var(--ink);border-radius:var(--r-xl);padding:44px 40px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.cta-box h2{font-family:var(--disp);font-size:clamp(2rem,4vw,3rem);color:#fff;font-weight:800;position:relative;z-index:1;max-width:20ch;margin:0 auto;letter-spacing:-.03em}
.cta-box p{color:rgba(255,255,255,.9);margin:14px auto 26px;max-width:48ch;position:relative;z-index:1;font-size:1.06rem}
.cta-box .btns{display:flex;gap:var(--space-btn);justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.cta-box .note{margin-top:16px;font-size:.84rem;color:rgba(255,255,255,.8);position:relative;z-index:1}
/* footer */
footer.ft{background:var(--ink);color:#fff;padding:42px 0 22px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.2fr;gap:28px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr;gap:30px}}
footer.ft .logo-img{filter:brightness(0) invert(1)}
footer.ft .tag{color:rgba(255,255,255,.6);font-size:.9rem;margin-top:14px;max-width:30ch}
footer.ft h5{font-family:var(--disp);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 14px;font-weight:700}
footer.ft a.fl{display:block;color:rgba(255,255,255,.72);font-size:.9rem;margin-bottom:9px}
footer.ft a.fl:hover{color:var(--pink)}
.fbottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:rgba(255,255,255,.5);font-size:.82rem}

/* breadcrumbs — shared by the service templates, the generic service
   template and the blog */
.crumbs{background:var(--lilac);border-bottom:1px solid var(--line)}
.crumbs ol{max-width:var(--maxw);margin:0 auto;padding:11px 24px;list-style:none;display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:.82rem;color:var(--ink-3)}
.crumbs li{display:inline-flex;align-items:center;gap:7px}
.crumbs a{color:var(--ink-2);font-weight:500}
.crumbs a:hover{color:var(--pink)}
.crumbs li[aria-current]{color:var(--pink);font-weight:700}
.crumbs .sep{opacity:.5}

/* ============================================================
   SEO silo additions: unique-element tables, the connected
   system band, the pricing line and the byline accountability
   line. Added for the SEO silo build sheets; safe sitewide.
   ============================================================ */
.ptable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-2);border-radius:16px;background:#fff}
.ptable{width:100%;border-collapse:collapse;min-width:640px;font-size:.92rem}
.ptable caption{text-align:left;padding:14px 18px 0;color:var(--ink-3);font-size:.8rem}
.ptable th,.ptable td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.ptable thead th{font-family:var(--disp);font-weight:800;font-size:.78rem;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-3);background:var(--lilac);border-bottom:1px solid var(--line-2)}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable tbody th{font-family:var(--disp);font-weight:800;color:var(--ink);white-space:nowrap}
.ptable td{color:var(--ink-2);line-height:1.55}
.ptable .yes{color:#0a7a4e;font-weight:800}
.ptable .no{color:var(--ink-3);font-weight:800}
.ptable .num{font-family:var(--disp);font-weight:800;color:var(--pink);width:44px}
.ptable-note{margin-top:16px;color:var(--ink-2);font-size:.95rem;max-width:760px}
.ptable-src{margin-top:8px;font-size:.82rem;color:var(--ink-3)}
.ptable-actions{margin-top:18px}

.connected{display:grid;gap:12px;margin-top:8px}
.crow{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.crow .cdot{width:10px;height:10px;border-radius:50%;flex:none;margin-top:7px}
.crow p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.55}
.crow p a{font-weight:700}
.connected-all{margin-top:16px;display:flex;justify-content:center}

.priceline{max-width:760px;margin:0 auto;text-align:center}
.priceline h2{font-size:clamp(1.35rem,2.2vw,1.7rem);font-weight:800;letter-spacing:-.02em}
.priceline p{margin-top:12px;color:var(--ink-2);line-height:1.6}
.priceline a{font-weight:700}

.byrole{margin-top:8px;font-size:.76rem;color:var(--ink-3);line-height:1.5}
.byrole b{color:var(--ink-2);font-weight:700}