/* Open Sans, self-hosted. One variable file per subset covers 400-800, and the
   urls are relative to this stylesheet so they follow it wherever it is written. */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/open-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/open-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --sx-version:"v8.8-2026-08-29";
  --ink:#0a0a0c;
  --ink-950:#060608;
  --ink-900:#121216;
  --ink-850:#16161b;
  --ink-800:#1c1c22;
  --slate:#2a2a32;
  --grey:#a0a0a0;
  --grey-dim:#767679;
  --white:#ffffff;
  --purple:#bc87fb;
  --purple-600:#a866f4;
  --purple-hover:#cda0ff;
  --purple-wash:rgba(188,135,251,.12);
  --purple-line:rgba(188,135,251,.3);
  --hair:rgba(255,255,255,.09);
  --hair-2:rgba(255,255,255,.05);
  --hover:rgba(255,255,255,.05);
  --nav-bg:rgba(14,14,18,.62);
  --nav-bg-scroll:rgba(8,8,11,.9);
  --elev:0 30px 70px -34px rgba(0,0,0,.9);
  --shadow-card:0 50px 100px -50px rgba(0,0,0,.95);
  --track:#2a2a32;
  --scrim:linear-gradient(90deg,var(--ink) 4%,rgba(10,10,12,.92) 30%,rgba(10,10,12,.35) 62%,rgba(10,10,12,.55) 100%);
  --scrim-v:linear-gradient(0deg,var(--ink) 1%,rgba(10,10,12,0) 40%);
  --r:25px;
  --r-lg:28px;
  --r-xl:34px;
  --maxw:1440px;
  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.16,1,.3,1);
  --font:"Open Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --ink:#f4f4f7;
  --ink-950:#ffffff;
  --ink-900:#ffffff;
  --ink-850:#ffffff;
  --ink-800:#eeeef3;
  --slate:#e7e7ee;
  --grey:#53535d;
  --grey-dim:#8a8a94;
  --white:#141418;
  --purple:#7b3fd4;
  --purple-600:#6a2fc0;
  --purple-hover:#8b52e2;
  --purple-wash:rgba(122,52,224,.1);
  --purple-line:rgba(122,52,224,.26);
  --hair:rgba(20,20,25,.11);
  --hair-2:rgba(20,20,25,.06);
  --hover:rgba(20,20,25,.05);
  --nav-bg:rgba(255,255,255,.66);
  --nav-bg-scroll:rgba(255,255,255,.9);
  --elev:0 30px 70px -40px rgba(30,25,50,.32);
  --shadow-card:0 44px 90px -50px rgba(30,25,50,.3);
  --track:#e0e0e8;
  --scrim:linear-gradient(90deg,var(--ink) 6%,rgba(244,244,247,.94) 34%,rgba(244,244,247,.6) 70%,rgba(244,244,247,.75) 100%);
  --scrim-v:linear-gradient(0deg,var(--ink) 1%,rgba(244,244,247,0) 40%);
  color-scheme:light;
}
*{box-sizing:border-box}
/* clip, not hidden: clip does not make the root a scroll container, so a fixed header
   stops being sized by a containing block that grew, without changing page scrolling. */
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--grey);font-family:var(--font);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{color:var(--white);font-weight:800;line-height:1.02;letter-spacing:-.035em;margin:0}
h2{font-weight:700;letter-spacing:-.03em}
h3{font-weight:600;letter-spacing:-.015em}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--purple)!important;color:var(--ink)!important}
::-moz-selection{background:var(--purple)!important;color:var(--ink)!important}
:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:8px}
/* No host stylesheet, tap flash or UA highlight may paint a non-brand colour on our controls. */
a,button,summary,[role=button]{-webkit-tap-highlight-color:transparent}
button{background-color:transparent}
button:hover,button:active,button:focus{background-color:transparent}
@media (forced-colors:active){
  .faq-q,.faq-q:hover,.faq-q:focus{forced-color-adjust:none;background:var(--ink-900);color:var(--white)}
}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--purple)}
.eyebrow.c::before{display:none}

/* buttons */
/* min-height 44px = brand v3 minimum tap target */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font);font-size:15px;font-weight:700;border-radius:var(--r);border:1px solid transparent;cursor:pointer;padding:16px 28px;min-height:44px;line-height:1;transition:background .3s,border-color .3s,color .3s,transform .45s var(--ease),box-shadow .45s var(--ease)}
.btn svg{width:17px;height:17px;transition:transform .45s var(--ease)}
.btn .ic-rocket{width:19px;height:19px;margin-right:-1px}
.btn-primary:hover .ic-rocket{transform:translate(2px,-3px)}
.btn-primary{background:var(--purple);color:#141414}
:root[data-theme="light"] .btn-primary{color:#fff}
.btn-primary:hover{background:var(--purple-hover)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--white);border-color:var(--hair);backdrop-filter:blur(8px)}
:root[data-theme="light"] .btn-ghost{background:rgba(255,255,255,.6)}
.btn-ghost:hover{border-color:var(--purple-line);background:var(--hover)}
.btn-sm{padding:10px 18px;font-size:13.5px}
.link-inline{color:var(--purple);font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:gap .4s var(--ease)}
.link-inline svg{width:15px;height:15px}
.link-inline:hover{gap:12px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;max-width:100vw;z-index:90;padding-top:16px;transition:transform .5s var(--ease)}
.nav.hide{transform:translateY(-130%)}
.nav-in{position:relative;display:flex;align-items:center;gap:12px;height:64px;padding:0 8px 0 20px;background:var(--nav-bg);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border:1px solid var(--hair);border-radius:22px;box-shadow:var(--elev);transition:background .4s,border-color .4s}
.nav.scrolled .nav-in{background:var(--nav-bg-scroll)}
/* Wordmark per Brand Guidelines v3: Open Sans Bold 700, the X is the only accented element. */
.brand{display:inline-flex;align-items:center;font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--white);flex:0 0 auto;transition:opacity .2s ease}
.brand:hover{opacity:.82}
.brand .x{color:var(--purple)}
/* Two lockups from the same artwork: the supplied white version on the dark canvas,
   and an inverse (dark text, accent shifted to #7B3FD4) for light mode. */
.brand-img{height:27px;width:auto;display:block}
.foot-brand .brand-img{height:30px}
.brand-light{display:none}
:root[data-theme="light"] .brand-dark{display:none}
:root[data-theme="light"] .brand-light{display:block}
.nav-links{display:flex;align-items:center;gap:2px;margin:0 auto;flex-shrink:0;white-space:nowrap}
/* nowrap above keeps the nav row from compressing, but must NOT inherit into
   the panels - their descriptions need to wrap or they get clipped. */
.mega,.dd,.mega *,.dd *{white-space:normal}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item.has-mega{position:static}
.nav-link,.nav-trigger{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-size:14.5px;font-weight:600;color:var(--grey);padding:9px 13px;border-radius:12px;background:transparent;border:0;cursor:pointer;white-space:nowrap;transition:color .25s,background .25s}
.nav-link:hover,.nav-trigger:hover,.nav-item:hover .nav-trigger,.nav-item.open .nav-trigger{color:var(--white);background:var(--hover)}
.chev{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.nav-item:hover .chev,.nav-item.open .chev{transform:rotate(180deg)}
.nav-badge{font-size:8.5px;font-weight:800;letter-spacing:.06em;color:var(--purple);border:1px solid var(--purple-line);border-radius:6px;padding:2px 5px;margin-left:5px;line-height:1}
.nav-item::after{content:"";position:absolute;left:-14px;right:-14px;top:100%;height:22px}
.mega,.dd{position:absolute;top:calc(100% + 18px);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;z-index:95}
.dd{left:50%;transform:translateX(-50%) translateY(10px);min-width:296px;background:var(--ink-900);border:1px solid var(--hair);border-radius:var(--r-lg);padding:12px;box-shadow:var(--elev)}
.nav-item:hover>.dd,.nav-item.open>.dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:13px;color:var(--grey);font-size:14px;font-weight:600;transition:background .22s,color .22s}
.dd a:hover{background:var(--hover);color:var(--white)}
.dd-ic{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--purple-wash);display:flex;align-items:center;justify-content:center}
.dd-ic svg{width:17px;height:17px;stroke:var(--purple);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mega{left:50%;transform:translateX(-50%) translateY(10px);width:min(1060px,calc(100vw - 32px));background:var(--ink-900);border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--elev);overflow:hidden}
.nav-item:hover>.mega,.nav-item.open>.mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) minmax(0,1fr)}
.mega-col{padding:20px}
.mega-services{background:var(--ink-850);border-right:1px solid var(--hair)}
.mega-pages{border-right:1px solid var(--hair)}
.mega-eyebrow{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dim);margin-bottom:12px;padding:0 12px}
.mega-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:13px;cursor:pointer;width:100%;text-align:left;background:transparent;border:0;font-family:var(--font);transition:background .2s}
.mega-item:hover{background:var(--hover)}
.mega-item.active{background:var(--purple-wash)}
.mi-ic{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--slate);display:flex;align-items:center;justify-content:center;transition:background .2s}
.mega-item.active .mi-ic{background:var(--purple-wash)}
.mi-ic svg{width:17px;height:17px;stroke:var(--purple);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mega-item>span:last-child{display:block;min-width:0}
.mi-name{display:block;font-size:14px;font-weight:700;color:var(--white);line-height:1.2}
.mi-tag{display:block;font-size:12px;color:var(--grey-dim);margin-top:2px;overflow-wrap:break-word}
.mega-page{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:13px;transition:background .2s}
.mega-page:hover{background:var(--hover)}
.mp-ic{width:34px;height:34px;flex:0 0 auto;border-radius:9px;background:var(--purple-wash);display:flex;align-items:center;justify-content:center}
.mp-ic svg{width:17px;height:17px;stroke:var(--purple);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mp-txt{flex:1;min-width:0}
.mp-name{display:block;font-size:14px;font-weight:700;color:var(--purple)}
.mp-desc{display:block;font-size:12.5px;color:var(--grey);margin-top:2px;overflow-wrap:break-word}
.mp-go{width:16px;height:16px;flex:0 0 auto;stroke:var(--purple);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transition:opacity .25s,transform .35s var(--ease)}
.mega-page:hover .mp-go{opacity:1;transform:translateX(3px)}
.mega-feature{background:var(--ink-850);display:flex;flex-direction:column}
.mega-feat-ic{width:46px;height:46px;border-radius:13px;background:var(--purple-wash);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.mega-feat-ic svg{width:23px;height:23px;stroke:var(--purple);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mega-feature h4{font-size:17px;margin-bottom:9px}
.mega-feature p{font-size:12.5px;line-height:1.55;color:var(--grey);margin-bottom:14px;overflow-wrap:break-word}
.mega-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-top:1px solid var(--hair);background:var(--ink-850)}
.mega-foot span{font-size:13px;color:var(--grey)}
.mega-foot b{color:var(--white)}
.nav-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav-cta .btn{padding:12px 20px;font-size:13.5px}
.theme-toggle{width:44px;height:44px;border:1px solid var(--hair);border-radius:13px;background:transparent;color:var(--white);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s,transform .5s var(--ease)}
.theme-toggle:hover{border-color:var(--purple-line);background:var(--hover);transform:rotate(-25deg)}
.theme-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .icon-sun{display:none}
:root[data-theme="light"] .theme-toggle .icon-moon{display:none}
:root[data-theme="light"] .theme-toggle .icon-sun{display:block}
.burger{display:none;width:44px;height:44px;border:1px solid var(--hair);border-radius:13px;background:transparent;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:2px;background:var(--white);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:2px;background:var(--white);transition:transform .35s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{transform:translateY(6px) rotate(45deg)}
.nav.open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:fixed;top:88px;left:var(--pad);right:var(--pad);z-index:89;display:none;flex-direction:column;padding:10px 12px 16px;border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--ink-900);box-shadow:var(--elev);max-height:calc(100vh - 110px);overflow-y:auto}
.nav.open ~ .mobile-menu{display:flex}
.m-link,.m-acc-btn{display:flex;align-items:center;justify-content:space-between;padding:13px 8px;font-size:16px;font-weight:600;color:var(--white);border:0;border-bottom:1px solid var(--hair-2);background:transparent;width:100%;text-align:left;font-family:var(--font);cursor:pointer}
.m-acc-btn .chev{stroke:var(--grey);width:16px;height:16px}
.m-acc.open .m-acc-btn .chev{transform:rotate(180deg)}
.m-acc-panel{display:none;flex-direction:column;padding:2px 6px 10px}
.m-acc.open .m-acc-panel{display:flex}
.m-acc-panel a{display:flex;align-items:center;gap:11px;padding:11px 12px;font-size:14.5px;color:var(--grey);border-radius:10px;min-height:44px}
.m-acc-panel a svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--purple);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.m-acc-panel a:hover{background:var(--hover);color:var(--white)}
.m-actions{margin-top:16px}
.m-actions .btn{width:100%}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:150px 0 90px;overflow:hidden}
.hero-bg{position:absolute;inset:-8% 0 0;z-index:0;pointer-events:none;will-change:transform}
.hero-bg>img{width:100%;height:116%;object-fit:cover;object-position:70% 40%}
:root[data-theme="light"] .hero-bg>img{opacity:.16;filter:saturate(1.2)}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--scrim)}
.hero-scrim::after{content:"";position:absolute;inset:0;background:var(--scrim-v)}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center;width:100%}
.hero h1{font-size:clamp(2.8rem,6vw,6.1rem);margin:26px 0 26px;max-width:14ch}
.hero h1 .hl{color:var(--purple);display:inline-block}
.hero-sub{font-size:clamp(1.03rem,1.35vw,1.19rem);line-height:1.62;max-width:40ch;margin-bottom:38px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:9px;font-size:9.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--grey-dim)}
.scroll-cue .rail{width:1px;height:44px;background:linear-gradient(var(--purple),transparent);position:relative;overflow:hidden}
.scroll-cue .rail::after{content:"";position:absolute;top:-50%;left:0;width:1px;height:50%;background:var(--white);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{top:-50%}60%,100%{top:100%}}

/* scorecard */
.card-score{position:relative;background:var(--ink-900);border:1px solid var(--hair);border-radius:var(--r-xl);padding:30px 30px 26px;box-shadow:var(--shadow-card);backdrop-filter:blur(10px)}
:root[data-theme="light"] .card-score{background:rgba(255,255,255,.86)}
.sc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.sc-label{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.sc-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--grey-dim);text-transform:uppercase}
.sc-live .dot{width:7px;height:7px;border-radius:50%;background:var(--purple);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(188,135,251,.5)}70%{box-shadow:0 0 0 9px rgba(188,135,251,0)}100%{box-shadow:0 0 0 0 rgba(188,135,251,0)}}
.sc-gauge{display:flex;align-items:center;gap:22px;margin-bottom:26px}
.gauge{position:relative;width:126px;height:126px;flex:0 0 auto}
.gauge svg{transform:rotate(-90deg)}
.g-track{stroke:var(--track)}
#gaugeArc{stroke:var(--purple)}
.sx-anim #gaugeArc{stroke-dashoffset:345.6}
.g-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.g-num{font-size:39px;font-weight:800;color:var(--white);letter-spacing:-.04em;line-height:1}
.g-of{font-size:10.5px;font-weight:700;color:var(--grey-dim);letter-spacing:.12em;margin-top:3px}
.sc-note{font-size:13.5px;line-height:1.5;color:var(--grey)}
.sc-note b{color:var(--white);font-weight:700}
.sc-bars{display:flex;flex-direction:column;gap:13px;margin-bottom:24px}
.bar-row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.b-label{font-size:13px;font-weight:600;color:var(--grey)}
.b-num{font-size:13px;font-weight:700;color:var(--white);font-variant-numeric:tabular-nums}
.bar-track{display:block;grid-column:1/-1;height:5px;border-radius:99px;background:var(--track);overflow:hidden}
.bar-fill{display:block;width:100%;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--purple-600),var(--purple));transform-origin:left;transform:scaleX(var(--fill,1));transition:transform 1.2s var(--ease)}
.sx-anim .bar-fill{transform:scaleX(0)}
.sc-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:20px;border-top:1px solid var(--hair)}
.sc-cta .fine{font-size:12px;color:var(--grey-dim);max-width:15ch;line-height:1.4}

/* ---------- strip ---------- */
/* Stats band. Was left-aligned cells divided by hard borders, which fought the centred
   hero above it and read as a plain table. Now: centred cells, a purple tick setting up
   each figure, bigger numerals, and rules that fade out top and bottom instead of boxing
   every cell in. The purple wash bleeds down out of the hero so the two sections join up. */
.strip{position:relative;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:var(--ink-950);overflow:hidden}
.strip::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 150% at 50% 0%,rgba(124,58,237,.15) 0%,rgba(124,58,237,0) 68%)}
.strip-in{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
.strip-cell{position:relative;padding:42px 22px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px}
/* a rule that fades at both ends, rather than a border boxing the cell */
.strip-cell+.strip-cell::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;
  background:linear-gradient(180deg,transparent,var(--hair) 20%,var(--hair) 80%,transparent)}
.strip-cell::after{content:"";order:1;width:18px;height:2px;border-radius:2px;
  background:var(--purple);opacity:.75}
.s-num{order:2;font-size:clamp(2.1rem,3.4vw,3.1rem);font-weight:800;color:var(--white);
  letter-spacing:-.045em;line-height:1}
.s-num .st{color:var(--purple)}
.s-lab{order:3;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey-dim)}
.strip .wrap{padding:0}

/* ---------- instant quote capture form (Forminator 784) ---------- */
/* Forminator generates style-784.css with id+class selectors, so these have to match its
   specificity and mark the overlapping declarations important - otherwise the generated
   sheet wins and the form renders in Forminator's default blue. */
/* the form is a separate Elementor widget, so it never sat inside the page file's .wrap -
   it was centred while every heading around it was left-aligned. Break the widget out the
   same way the page files break out, then give it the same column, and the form's left
   edge lands on the copy's left edge. */
/* !important because Elementor sizes widgets with .e-con.e-con>.e-con-inner>.elementor-widget,
   which is four classes and outranks this rule. */
.elementor-widget-shortcode:has(.forminator-custom-form-784){width:calc(100vw - var(--sbw,0px))!important;max-width:calc(100vw - var(--sbw,0px))!important;margin-left:calc(50% - 50vw + var(--sbw,0px)/2)!important}
.elementor-widget-shortcode:has(.forminator-custom-form-784)>.elementor-shortcode{box-sizing:border-box;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.forminator-ui#forminator-module-784.forminator-design--default{max-width:720px;margin:0}

/* its grid uses row{margin:0 -15px} + col{padding:0 15px}, which overflows any container
   that does not carry the matching side padding. Zero both, use a gap. */
.forminator-ui#forminator-module-784.forminator-design--default .forminator-row{margin:0 0 18px!important;display:flex;flex-wrap:wrap;gap:18px}
.forminator-ui#forminator-module-784.forminator-design--default .forminator-row:last-of-type{margin-bottom:0!important}
.forminator-ui#forminator-module-784.forminator-design--default .forminator-col{padding:0!important;flex:1 1 260px;min-width:0}
.forminator-ui#forminator-module-784.forminator-design--default .forminator-field{margin:0}

.forminator-ui#forminator-module-784.forminator-design--default .forminator-label{
  display:block;margin:0 0 7px!important;font-family:var(--font);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey-dim)!important}

.forminator-ui#forminator-module-784.forminator-design--default .forminator-input,
.forminator-ui#forminator-module-784.forminator-design--default .forminator-textarea{
  width:100%;box-sizing:border-box;font-family:var(--font)!important;font-size:15px!important;
  color:var(--white)!important;background:var(--ink)!important;
  border:1px solid var(--hair)!important;border-radius:12px!important;
  padding:13px 15px!important;min-height:50px;
  transition:border-color .25s,background .25s}
.forminator-ui#forminator-module-784.forminator-design--default .forminator-input:hover{border-color:var(--hair-2)!important}
.forminator-ui#forminator-module-784.forminator-design--default .forminator-input:focus{
  outline:none!important;border-color:var(--purple)!important;background:var(--ink-900)!important}
.forminator-ui#forminator-module-784.forminator-design--default ::placeholder{color:var(--grey-dim)!important;opacity:1}

.forminator-ui#forminator-module-784.forminator-design--default .forminator-button-submit{
  font-family:var(--font)!important;font-size:15px!important;font-weight:700!important;
  cursor:pointer;color:var(--ink)!important;
  background:var(--purple)!important;border:1px solid var(--purple)!important;
  border-radius:99px!important;padding:14px 30px!important;min-height:52px;
  transition:background .25s,border-color .25s,transform .45s var(--ease)}
.forminator-ui#forminator-module-784.forminator-design--default .forminator-button-submit:hover{
  background:var(--purple-hover)!important;border-color:var(--purple-hover)!important;
  color:var(--ink)!important;transform:translateY(-2px)}

.forminator-ui#forminator-module-784.forminator-design--default .forminator-response-message{
  margin:0 0 16px!important;padding:13px 16px!important;border-radius:12px!important;
  font-size:14.5px;line-height:1.6;
  border:1px solid var(--hair)!important;background:var(--ink-900)!important;color:var(--grey)!important}
.forminator-ui#forminator-module-784.forminator-design--default .forminator-error-message{color:#ff9a9a!important;font-size:13px;margin-top:6px}
.forminator-ui#forminator-module-784.forminator-design--default .forminator-has_error .forminator-input{border-color:#ff9a9a!important}

@media(max-width:560px){
  .forminator-ui#forminator-module-784.forminator-design--default .forminator-col{flex:1 1 100%}
  .forminator-ui#forminator-module-784.forminator-design--default .forminator-button-submit{width:100%}
}

/* ---------- blog filter chips + search ---------- */
/* chips take their own full-width row - all seven fit - and the search sits below, right
   aligned, instead of being stranded beside a single wrapped chip. */
.bf-chips{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%}
.blog-filter{align-items:flex-start;gap:14px;margin:0 0 34px}


.blog-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 30px}
.blog-filter .bf{display:inline-flex;align-items:center;min-height:44px;padding:11px 18px;
  border:1px solid var(--hair);border-radius:99px;background:var(--ink-900);
  font-family:var(--font);font-size:13.5px;font-weight:700;color:var(--grey);
  text-decoration:none;white-space:nowrap;
  transition:color .25s,border-color .25s,background .25s}
.blog-filter .bf:hover{border-color:var(--hair-2);color:var(--white)}
.blog-filter .bf .n{margin-left:8px;font-weight:600;color:var(--grey-dim)}
.blog-filter .bf.on{background:var(--purple);border-color:var(--purple);color:var(--ink)}
.blog-filter .bf.on .n{color:var(--ink);opacity:.7}

.blog-search{display:flex;align-items:center;gap:8px;margin-left:auto}
.blog-search input{width:220px;min-height:44px;box-sizing:border-box;padding:11px 18px;
  border:1px solid var(--hair);border-radius:99px;background:var(--ink-900);
  font-family:var(--font);font-size:13.5px;color:var(--white);
  transition:border-color .25s,background .25s}
.blog-search input::placeholder{color:var(--grey-dim);opacity:1}
.blog-search input:hover{border-color:var(--hair-2)}
.blog-search input:focus{outline:none;border-color:var(--purple);background:var(--ink-950)}
.blog-search button{min-height:44px;padding:11px 20px;cursor:pointer;
  border:1px solid var(--purple);border-radius:99px;background:var(--purple);
  font-family:var(--font);font-size:13.5px;font-weight:700;color:var(--ink);
  transition:background .25s,border-color .25s}
.blog-search button:hover{background:var(--purple-hover);border-color:var(--purple-hover);color:var(--ink)}

.blog-empty{margin:8px 0 0;font-size:1.02rem;color:var(--grey)}

@media(max-width:900px){
  .blog-search{margin-left:0;width:100%}
  .blog-search input{flex:1;width:auto}
}

/* ---------- blog listing ([synthx_blog] on /blogs/) ---------- */
.elementor-widget-shortcode:has(.blog-grid){width:calc(100vw - var(--sbw,0px))!important;max-width:calc(100vw - var(--sbw,0px))!important;margin-left:calc(50% - 50vw + var(--sbw,0px)/2)!important}
.elementor-widget-shortcode:has(.blog-grid)>.elementor-shortcode{box-sizing:border-box;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
#latest{padding-bottom:0}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bpost{display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden;
  border:1px solid var(--hair);border-radius:var(--r);background:var(--ink-900);
  transition:transform .5s var(--ease),border-color .35s}
.bpost:hover{transform:translateY(-4px);border-color:var(--hair-2)}
.bpost-art{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ink-950)}
.bpost-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.bpost:hover .bpost-art img{transform:scale(1.045)}
.bpost-meta{display:flex;align-items:center;gap:10px;padding:20px 22px 0;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.bpost-cat{color:var(--purple)}
.bpost-date{color:var(--grey-dim)}
.bpost-title{padding:10px 22px 0;font-size:1.12rem;font-weight:700;line-height:1.32;color:var(--white)}
.bpost-ex{padding:10px 22px 24px;font-size:.95rem;line-height:1.6;color:var(--grey)}

.blog-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:34px}
.blog-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 14px;border:1px solid var(--hair);border-radius:99px;
  color:var(--grey);font-size:14px;font-weight:600;text-decoration:none;
  transition:border-color .25s,color .25s,background .25s}
.blog-pager .page-numbers:hover{border-color:var(--purple);color:var(--white)}
.blog-pager .page-numbers.current{background:var(--purple);border-color:var(--purple);color:var(--ink)}
.blog-pager .dots{border-color:transparent}

@media(max-width:1024px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}}

/* the theme's post header is a wider block than the article column, so the title sat 160px
   to the left of the text and hard under the fixed nav. Same column, real breathing room. */
body.single-post .page-header{max-width:820px;margin:0 auto;padding:clamp(130px,15vh,200px) 0 0}
body.single-post .page-header .entry-title{font-size:clamp(2rem,4vw,3.05rem);line-height:1.14;color:var(--white);margin:0 0 10px;letter-spacing:-.01em}
body.single-post .page-header .entry-sub-title,
body.single-post .page-header .post-meta{color:var(--grey-dim)}
body.single-post .page-content{padding-top:26px}

/* ---------- imported posts were authored for a light site ---------- */
/* Inline styles win over any stylesheet, so these are attribute-matched and forced. Kept to
   the specific values found in the content: some posts use dark inline backgrounds already. */
body.single-post .page-content [style*="#f0f0f0"],body.single-post .page-content [style*="#f5f5ff"],body.single-post .page-content [style*="#f4f4f8"],body.single-post .page-content [style*="#fff"]{
  background:var(--ink-900)!important;border-color:var(--hair)!important}
body.single-post .page-content [style*="#f9f9f9"],body.single-post .page-content [style*="#f9f9fb"],body.single-post .page-content [style*="#f9f9ff"],
body.single-post .page-content [style*="#f9fafb"],body.single-post .page-content [style*="#fafafa"],body.single-post .page-content [style*="#f4f4ff"],
body.single-post .page-content [style*="#f4f4f4"],body.single-post .page-content [style*="#f3f4f6"],body.single-post .page-content [style*="#ffffff"],
body.single-post .page-content [style*="background: #fff"],body.single-post .page-content [style*="background:#fff"],
body.single-post .page-content [style*="background: white"],body.single-post .page-content [style*="background:white"]{
  background:var(--ink-900)!important;border-color:var(--hair)!important}

/* dark body text written for a white page */
body.single-post .page-content [style*="color: #666"],body.single-post .page-content [style*="color:#666"],
body.single-post .page-content [style*="color: #333"],body.single-post .page-content [style*="color:#333"],
body.single-post .page-content [style*="color: #444"],body.single-post .page-content [style*="color:#444"],
body.single-post .page-content [style*="color: #141414"],body.single-post .page-content [style*="color:#141414"],
body.single-post .page-content [style*="color: #111827"],body.single-post .page-content [style*="color:#111827"]{color:var(--grey)!important}

/* the old site's indigo accent, remapped to the brand purple */
body.single-post .page-content [style*="#4f46e5"],body.single-post .page-content [style*="#667eea"],body.single-post .page-content [style*="#764ba2"]{color:var(--purple)!important}

/* ...except where it was a fill, which becomes a dark table header */
body.single-post .page-content [style*="background: #667eea"],body.single-post .page-content [style*="background:#667eea"],
body.single-post .page-content [style*="background: #764ba2"],body.single-post .page-content [style*="background:#764ba2"]{
  background:var(--ink-850)!important;color:var(--white)!important}
body.single-post .page-content thead tr{background:var(--ink-850)!important}
body.single-post .page-content thead th{color:var(--white)!important}

/* pale hairlines */
body.single-post .page-content [style*="#eee"],body.single-post .page-content [style*="#ddd"],body.single-post .page-content [style*="#e5e7eb"],
body.single-post .page-content [style*="#e5e5e5"],body.single-post .page-content [style*="#f3f4f6"]{border-color:var(--hair)!important}

/* zebra striping, in the dark palette */
body.single-post .page-content table tbody tr:nth-child(even){background:var(--ink-950)!important}

/* ---------- blog post body (imported posts have no classes of their own) ---------- */
body.single-post .page-content{max-width:820px;margin-left:auto;margin-right:auto;padding-bottom:80px;
  font-size:1.06rem;line-height:1.78;color:var(--grey)}
body.single-post .page-content > *:first-child{margin-top:0}

body.single-post .page-content p{margin:0 0 1.3em;font-size:1.06rem;line-height:1.78}
body.single-post .page-content h2,
body.single-post .page-content h3,
body.single-post .page-content h4{color:var(--white);scroll-margin-top:120px}
body.single-post .page-content h2{font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.22;margin:2.4em 0 .6em}
body.single-post .page-content h3{font-size:clamp(1.25rem,1.9vw,1.5rem);line-height:1.3;margin:1.9em 0 .5em}
body.single-post .page-content h4{font-size:1.12rem;margin:1.6em 0 .45em}
body.single-post .page-content strong,
body.single-post .page-content b{color:var(--white);font-weight:700}

body.single-post .page-content ul,
body.single-post .page-content ol{margin:0 0 1.3em;padding-left:1.35em}
body.single-post .page-content li{margin:0 0 .5em;line-height:1.72}
body.single-post .page-content li::marker{color:var(--purple)}

body.single-post .page-content a{color:var(--purple);text-decoration:none;border-bottom:1px solid var(--purple-line);transition:color .2s,border-color .2s}
body.single-post .page-content a:hover{color:var(--white);border-color:var(--white)}

body.single-post .page-content img{display:block;height:auto;border-radius:var(--r);border:1px solid var(--hair);margin:2em auto}
body.single-post .page-content figure{margin:2em 0}
body.single-post .page-content figcaption{margin-top:10px;font-size:.86rem;color:var(--grey-dim);text-align:center}

body.single-post .page-content blockquote{margin:2em 0;padding:4px 0 4px 22px;border-left:3px solid var(--purple);
  color:var(--white);font-size:1.12rem;line-height:1.65}
body.single-post .page-content blockquote p:last-child{margin-bottom:0}

/* imported posts carry data tables; they must scroll rather than widen the page */
body.single-post .page-content table{display:block;overflow-x:auto;width:100%;border-collapse:collapse;margin:2em 0;font-size:.95rem}
body.single-post .page-content th,
body.single-post .page-content td{padding:12px 16px;border:1px solid var(--hair);text-align:left;vertical-align:top}
body.single-post .page-content th{background:var(--ink-900);color:var(--white);font-weight:700;white-space:nowrap}

body.single-post .page-content hr{border:0;border-top:1px solid var(--hair);margin:2.6em 0}
body.single-post .page-content code{background:var(--ink-900);border:1px solid var(--hair);border-radius:6px;padding:2px 6px;font-size:.9em}

/* ---------- table of contents ---------- */
.post-toc{margin:0 0 2.4em;border:1px solid var(--hair);border-radius:var(--r);background:var(--ink-900);overflow:hidden}
.post-toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;font-family:var(--font);font-size:1.02rem;font-weight:700;color:var(--white)}
.post-toc summary::-webkit-details-marker{display:none}
.post-toc summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--grey);border-bottom:2px solid var(--grey);
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.post-toc[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.post-toc ol{margin:0;padding:0 22px 20px 42px;border-top:1px solid var(--hair);padding-top:16px}
.post-toc li{margin:0 0 .55em;line-height:1.5}
.post-toc li::marker{color:var(--grey-dim);font-size:.85em}
body.single-post .page-content .post-toc a{color:var(--grey);border-bottom:0;font-size:.98rem}
body.single-post .page-content .post-toc a:hover{color:var(--purple)}

@media(max-width:640px){
  body.single-post .page-content{font-size:1.02rem}
  .post-toc ol{padding-left:36px}
}

/* ---------- quote form (Forminator 768) ---------- */
/* The form's own custom CSS from the old site hides every label and leans on placeholders
   alone. Across 35 fields and four sections that costs completions: a placeholder vanishes
   the moment someone types, and by the third section nobody remembers what a box was for.
   Labels back on, in the same treatment as the Instant Quote capture form. */
.forminator-ui#forminator-module-768.forminator-design--default .forminator-label{display:block!important;margin:0 0 7px!important;
  font-family:var(--font)!important;font-size:11px!important;font-weight:700!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--grey-dim)!important}
.forminator-ui#forminator-module-768.forminator-design--default .forminator-required{color:var(--purple)!important;margin-left:3px}
/* Two field types keep their labels hidden. The html fields' labels duplicate the question
   already in their body copy, and the two checkbox groups were never named - their label is
   literally "Checkbox". Both only became visible when labels were switched back on. */
.forminator-ui#forminator-module-768.forminator-design--default .forminator-field-html .forminator-label,
.forminator-ui#forminator-module-768.forminator-design--default .forminator-field-checkbox .forminator-label{display:none!important}

/* checkbox and radio option text stays sentence case - it is content, not a field label */
.forminator-ui#forminator-module-768.forminator-design--default .forminator-checkbox,.forminator-ui#forminator-module-768.forminator-design--default .forminator-radio{text-transform:none!important;letter-spacing:normal!important;
  font-size:.95rem!important;font-weight:400!important;color:var(--grey)!important}


/* The form is its own Elementor widget, outside the page file's .wrap, so it gets the same
   break-out and column as the Instant Quote capture form. !important because Elementor sizes
   widgets with .e-con.e-con>.e-con-inner>.elementor-widget, which outranks this.
   The form carries its own dark colour settings from the old site, so only layout is set
   here - colours are left to the form's own configuration. */
.elementor-widget-shortcode:has(.forminator-custom-form-768){width:calc(100vw - var(--sbw,0px))!important;max-width:calc(100vw - var(--sbw,0px))!important;margin-left:calc(50% - 50vw + var(--sbw,0px)/2)!important}
.elementor-widget-shortcode:has(.forminator-custom-form-768)>.elementor-shortcode{box-sizing:border-box;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
#form{padding-bottom:0}
.forminator-ui#forminator-module-768.forminator-design--default{max-width:880px;margin:0}
.forminator-ui#forminator-module-768.forminator-design--default .forminator-row{margin:0 0 18px!important;display:flex;flex-wrap:wrap;gap:18px}
.forminator-ui#forminator-module-768.forminator-design--default .forminator-row:last-of-type{margin-bottom:0!important}
.forminator-ui#forminator-module-768.forminator-design--default .forminator-col{padding:0!important;flex:1 1 260px;min-width:0}
.forminator-ui#forminator-module-768.forminator-design--default .forminator-col-12{flex:1 1 100%}
.forminator-ui#forminator-module-768.forminator-design--default .forminator-field{margin:0}
.forminator-ui#forminator-module-768.forminator-design--default .forminator-field-section{margin:38px 0 4px;padding-top:28px;border-top:1px solid var(--hair)}
.forminator-ui#forminator-module-768.forminator-design--default .forminator-row:first-of-type .forminator-field-section{margin-top:0;padding-top:0;border-top:0}
.forminator-ui#forminator-module-768.forminator-design--default .forminator-title{font-family:var(--font)!important;font-size:1.28rem!important;font-weight:700!important;color:var(--white)!important;margin:0 0 4px!important}
.forminator-ui#forminator-module-768.forminator-design--default .forminator-description{color:var(--grey-dim)!important;font-size:.95rem}
@media(max-width:560px){.forminator-ui#forminator-module-768.forminator-design--default .forminator-col{flex:1 1 100%}}


/* ---------- contact form (Forminator 769) ---------- */
/* Same column, break-out and field rules as the quote form. Colours come from the
   form's own configuration, as with 768. */
/* The form's own custom CSS from the old site hides every label and leans on placeholders
   alone. Across 35 fields and four sections that costs completions: a placeholder vanishes
   the moment someone types, and by the third section nobody remembers what a box was for.
   Labels back on, in the same treatment as the Instant Quote capture form. */
.forminator-ui#forminator-module-769.forminator-design--default .forminator-label{display:block!important;margin:0 0 7px!important;
  font-family:var(--font)!important;font-size:11px!important;font-weight:700!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--grey-dim)!important}

/* checkbox and radio option text stays sentence case - it is content, not a field label */
.forminator-ui#forminator-module-769.forminator-design--default .forminator-checkbox,.forminator-ui#forminator-module-769.forminator-design--default .forminator-radio{text-transform:none!important;letter-spacing:normal!important;
  font-size:.95rem!important;font-weight:400!important;color:var(--grey)!important}


/* The form is its own Elementor widget, outside the page file's .wrap, so it gets the same
   break-out and column as the Instant Quote capture form. !important because Elementor sizes
   widgets with .e-con.e-con>.e-con-inner>.elementor-widget, which outranks this.
   The form carries its own dark colour settings from the old site, so only layout is set
   here - colours are left to the form's own configuration. */
.elementor-widget-shortcode:has(.forminator-custom-form-769){width:calc(100vw - var(--sbw,0px))!important;max-width:calc(100vw - var(--sbw,0px))!important;margin-left:calc(50% - 50vw + var(--sbw,0px)/2)!important}
.elementor-widget-shortcode:has(.forminator-custom-form-769)>.elementor-shortcode{box-sizing:border-box;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.forminator-ui#forminator-module-769.forminator-design--default{max-width:880px;margin:0}
.forminator-ui#forminator-module-769.forminator-design--default .forminator-row{margin:0 0 18px!important;display:flex;flex-wrap:wrap;gap:18px}
.forminator-ui#forminator-module-769.forminator-design--default .forminator-row:last-of-type{margin-bottom:0!important}
.forminator-ui#forminator-module-769.forminator-design--default .forminator-col{padding:0!important;flex:1 1 260px;min-width:0}
.forminator-ui#forminator-module-769.forminator-design--default .forminator-col-12{flex:1 1 100%}
.forminator-ui#forminator-module-769.forminator-design--default .forminator-field{margin:0}
.forminator-ui#forminator-module-769.forminator-design--default .forminator-field-section{margin:38px 0 4px;padding-top:28px;border-top:1px solid var(--hair)}
.forminator-ui#forminator-module-769.forminator-design--default .forminator-row:first-of-type .forminator-field-section{margin-top:0;padding-top:0;border-top:0}
.forminator-ui#forminator-module-769.forminator-design--default .forminator-title{font-family:var(--font)!important;font-size:1.28rem!important;font-weight:700!important;color:var(--white)!important;margin:0 0 4px!important}
.forminator-ui#forminator-module-769.forminator-design--default .forminator-description{color:var(--grey-dim)!important;font-size:.95rem}
@media(max-width:560px){.forminator-ui#forminator-module-769.forminator-design--default .forminator-col{flex:1 1 100%}}

/* ---------- free audit form (Forminator 770) ---------- */
/* Same column, break-out and field rules as the quote form. Colours come from the
   form's own configuration, as with 768. */
/* The form's own custom CSS from the old site hides every label and leans on placeholders
   alone. Across 35 fields and four sections that costs completions: a placeholder vanishes
   the moment someone types, and by the third section nobody remembers what a box was for.
   Labels back on, in the same treatment as the Instant Quote capture form. */
.forminator-ui#forminator-module-770 .forminator-label{display:block!important;margin:0 0 7px!important;
  font-family:var(--font)!important;font-size:11px!important;font-weight:700!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--grey-dim)!important}

/* checkbox and radio option text stays sentence case - it is content, not a field label */
.forminator-ui#forminator-module-770 .forminator-checkbox,.forminator-ui#forminator-module-770 .forminator-radio{text-transform:none!important;letter-spacing:normal!important;
  font-size:.95rem!important;font-weight:400!important;color:var(--grey)!important}


/* The form is its own Elementor widget, outside the page file's .wrap, so it gets the same
   break-out and column as the Instant Quote capture form. !important because Elementor sizes
   widgets with .e-con.e-con>.e-con-inner>.elementor-widget, which outranks this.
   The form carries its own dark colour settings from the old site, so only layout is set
   here - colours are left to the form's own configuration. */
.elementor-widget-shortcode:has(.forminator-custom-form-770){width:calc(100vw - var(--sbw,0px))!important;max-width:calc(100vw - var(--sbw,0px))!important;margin-left:calc(50% - 50vw + var(--sbw,0px)/2)!important}
.elementor-widget-shortcode:has(.forminator-custom-form-770)>.elementor-shortcode{box-sizing:border-box;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.forminator-ui#forminator-module-770{max-width:880px;margin:0}
.forminator-ui#forminator-module-770 .forminator-row{margin:0 0 18px!important;display:flex;flex-wrap:wrap;gap:18px}
.forminator-ui#forminator-module-770 .forminator-row:last-of-type{margin-bottom:0!important}
.forminator-ui#forminator-module-770 .forminator-col{padding:0!important;flex:1 1 260px;min-width:0}
.forminator-ui#forminator-module-770 .forminator-col-12{flex:1 1 100%}
.forminator-ui#forminator-module-770 .forminator-field{margin:0}
.forminator-ui#forminator-module-770 .forminator-field-section{margin:38px 0 4px;padding-top:28px;border-top:1px solid var(--hair)}
.forminator-ui#forminator-module-770 .forminator-row:first-of-type .forminator-field-section{margin-top:0;padding-top:0;border-top:0}
.forminator-ui#forminator-module-770 .forminator-title{font-family:var(--font)!important;font-size:1.28rem!important;font-weight:700!important;color:var(--white)!important;margin:0 0 4px!important}
.forminator-ui#forminator-module-770 .forminator-description{color:var(--grey-dim)!important;font-size:.95rem}
@media(max-width:560px){.forminator-ui#forminator-module-770 .forminator-col{flex:1 1 100%}}

/* ---------- sections ---------- */
.sec{padding:clamp(76px,10vw,142px) 0;position:relative}
.sec-head{max-width:660px;margin-bottom:clamp(42px,5vw,66px)}
.sec-head.w{max-width:780px}
.sec-head .eyebrow{margin-bottom:22px}
.sec-head h2{font-size:clamp(2rem,4.1vw,3.7rem);margin-bottom:20px}
.sec-head p{font-size:clamp(1rem,1.35vw,1.13rem);line-height:1.62}
.sec-head.flex{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.sec-head.flex .txt{max-width:640px}

/* services */
.svc-grid{border:1px solid var(--hair);border-radius:var(--r-xl);overflow:hidden;background:var(--ink-900)}
.svc-row{display:grid;grid-template-columns:repeat(4,1fr)}
.svc-row.c3{grid-template-columns:repeat(3,1fr)}
.svc-row.c2{grid-template-columns:repeat(2,1fr)}
.svc{position:relative;padding:34px 28px 32px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);transition:background .45s var(--ease);overflow:hidden}
.svc-row:last-child .svc{border-bottom:none}
.svc:nth-child(4n){border-right:none}
.svc::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--purple);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.svc:hover{background:var(--ink-800)}
.svc:hover::before{transform:scaleX(1)}
/* the industry cells on the hub carry a photograph instead of an icon, bled to the cell
   edges: the negative margins match .svc's own padding. The ratio is pinned so a row of
   four stays level whatever each image is. */
.svc .ind-art{position:relative;margin:-34px -28px 24px;aspect-ratio:16/9;overflow:hidden;background:var(--ink-950)}
.svc .ind-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.svc:hover .ind-art img{transform:scale(1.045)}
.svc .ind-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,0) 45%,rgba(10,10,12,.6));pointer-events:none}
.svc-ic{width:44px;height:44px;border-radius:13px;background:var(--purple-wash);display:flex;align-items:center;justify-content:center;margin-bottom:22px;transition:transform .5s var(--ease)}
.svc:hover .svc-ic{transform:translateY(-3px) scale(1.05)}
.svc-ic svg{width:21px;height:21px;stroke:var(--purple);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc h3{font-size:17.5px;margin-bottom:10px}
.svc p{font-size:13.5px;line-height:1.55;margin-bottom:16px}
/* Reveal-on-hover applies only to a card's own CTA link. Links inside body copy
   must stay visible - hiding them made words disappear mid-sentence. */
.svc > .link-inline{font-size:13px;opacity:0;transform:translateY(5px);transition:opacity .4s var(--ease),transform .4s var(--ease),gap .4s var(--ease)}
.svc:hover > .link-inline{opacity:1;transform:none}
.svc p .link-inline{font-size:inherit;opacity:1;transform:none}

/* object feature band */
.obj-band{position:relative;overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--ink-950)}
.obj-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
/* Coded data panel — real client figures, no raster, theme-aware */
.obj-art{position:relative;border-radius:var(--r-xl);background:var(--ink-900);border:1px solid var(--hair);padding:26px 26px 22px;box-shadow:var(--shadow-card)}
.chart-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.chart-lab{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-dim)}
.chart-title{font-size:15px;font-weight:700;color:var(--white);margin-top:6px}
.chart-delta{text-align:right;flex:0 0 auto}
.chart-delta .d-num{font-size:26px;font-weight:800;color:var(--purple);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.chart-delta .d-lab{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-dim);margin-top:6px}
.chart-wrap{position:relative}
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.chart-grid line{stroke:var(--hair-2);stroke-width:1}
.chart-area{fill:url(#chartFill)}
.chart-line{fill:none;stroke:var(--purple);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset 1.8s var(--ease)}
.sx-anim .chart-line{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.obj-art.drawn .chart-line{stroke-dashoffset:0}
.chart-area{transition:opacity 1s var(--ease) .5s}
.sx-anim .chart-area{opacity:0}
.obj-art.drawn .chart-area{opacity:1}
.chart-dot{fill:var(--purple);transition:opacity .5s var(--ease) 1.5s}
.sx-anim .chart-dot{opacity:0}
.obj-art.drawn .chart-dot{opacity:1}
.chart-x{display:flex;justify-content:space-between;margin-top:12px;font-size:10.5px;font-weight:600;color:var(--grey-dim);letter-spacing:.04em}
.chart-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);font-size:12.5px;line-height:1.55;color:var(--grey)}
.chart-foot b{color:var(--white);font-weight:700}
.obj-copy h2{font-size:clamp(1.9rem,3.5vw,3.2rem);margin-bottom:20px}
.obj-copy p{font-size:1.04rem;line-height:1.65;margin-bottom:22px}
.obj-list{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.obj-li{display:flex;gap:13px;align-items:flex-start;padding-top:14px;border-top:1px solid var(--hair-2)}
.obj-li svg{width:17px;height:17px;stroke:var(--purple);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;margin-top:3px}
.obj-li b{color:var(--white);font-weight:700;display:block;font-size:14.5px;margin-bottom:3px}
.obj-li span{font-size:13.5px;line-height:1.55}

/* results */
.results{position:relative;overflow:hidden}
.results-bg{position:absolute;inset:0;z-index:0}
.results-bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
:root[data-theme="light"] .results-bg img{opacity:.1}
.results-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink),rgba(10,10,12,.65) 30%,rgba(10,10,12,.65) 70%,var(--ink))}
:root[data-theme="light"] .results-bg::after{background:linear-gradient(180deg,var(--ink),rgba(244,244,247,.7) 30%,rgba(244,244,247,.7) 70%,var(--ink))}
.results .wrap{position:relative;z-index:1}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.res-metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-xl);overflow:hidden}
.metric{background:var(--ink-900);padding:30px 26px;transition:background .4s}
.metric:hover{background:var(--ink-800)}
.m-num{font-size:clamp(2.2rem,4vw,3rem);font-weight:800;color:var(--white);letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.m-lab{margin-top:11px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
.m-sub{margin-top:11px;font-size:13px;line-height:1.5}
.res-fine{font-size:12.5px;color:var(--grey-dim);line-height:1.5;border-left:1px solid var(--hair);padding-left:16px;margin-top:24px}

/* process */
.proc{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.proc-line{position:absolute;top:38px;left:0;right:0;height:1px;background:var(--hair)}
.phase{position:relative;padding-right:26px}
.p-dot{position:relative;width:76px;height:76px;border-radius:50%;background:var(--ink-900);border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--purple);margin-bottom:28px;z-index:1;transition:border-color .4s,transform .55s var(--ease)}
.phase:hover .p-dot{border-color:var(--purple-line);transform:translateY(-4px)}
.p-tag{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-dim);margin-bottom:11px}
.phase h3{font-size:19px;margin-bottom:12px}
.phase p{font-size:14px;line-height:1.58}

/* industries */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hair);border-radius:var(--r-xl);overflow:hidden;background:var(--ink-900)}
.ind{padding:28px 24px 30px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);transition:background .4s;min-height:180px;display:flex;flex-direction:column}
.ind:nth-child(4n){border-right:none}
.ind:nth-last-child(-n+4){border-bottom:none}
.ind:hover{background:var(--ink-800)}
.i-ic{width:21px;height:21px;stroke:var(--purple);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:20px}
.ind h3{font-size:15.5px;margin-bottom:9px}
.ind p{font-size:12.5px;line-height:1.5}
.ind.cta-cell{background:var(--purple-wash)}
.ind.cta-cell:hover{background:rgba(188,135,251,.17)}
.ind.cta-cell .link-inline{margin-top:auto;font-size:13px}
.ind-note{margin-top:24px;font-size:14.5px;color:var(--grey);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ind-note b{color:var(--white);font-weight:700}

/* approach */
.appr{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.principle{border-top:2px solid var(--slate);padding-top:24px;transition:border-color .45s}
.principle:hover{border-top-color:var(--purple)}
.a-num{font-size:13px;font-weight:800;color:var(--purple);margin-bottom:18px}
.principle h3{font-size:18px;margin-bottom:12px}
.principle p{font-size:14px;line-height:1.58;margin-bottom:16px}
.a-out{font-size:13px;font-weight:600;color:var(--white);padding-top:14px;border-top:1px solid var(--hair-2)}

/* case studies */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cases.c2{grid-template-columns:repeat(2,1fr)}
.case{position:relative;border:1px solid var(--hair);border-radius:var(--r-xl);overflow:hidden;background:var(--ink-900);display:flex;flex-direction:column;transition:transform .6s var(--ease),border-color .4s,box-shadow .6s var(--ease)}
.case:hover{transform:translateY(-7px);border-color:var(--purple-line);box-shadow:var(--shadow-card)}
.case-art{position:relative;aspect-ratio:16/11;overflow:hidden;background:#060608}
.case-art img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.case:hover .case-art img{transform:scale(1.07)}
.case-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,6,8,.9))}
.case-stat{position:absolute;left:22px;bottom:18px;z-index:2}
.c-num{font-size:clamp(2rem,3.4vw,2.7rem);font-weight:800;color:#fff;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.c-numlab{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--purple);margin-top:7px}
.case-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.c-tag{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-dim);margin-bottom:14px}
.case h3{font-size:20px;margin-bottom:11px}
.case p{font-size:13.5px;line-height:1.6;margin-bottom:22px}
.case .link-inline{margin-top:auto;font-size:13.5px}

/* reviews */
.reviews{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rev-track{display:flex;gap:0;width:max-content;animation:marquee 52s linear infinite}
.rev-track>.review{margin-right:20px}
.reviews:hover .rev-track,.reviews:focus-within .rev-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.review{width:366px;flex:0 0 auto;background:var(--ink-900);border:1px solid var(--hair);border-radius:var(--r);padding:26px}
.r-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.r-stars{color:var(--purple);font-size:14px;letter-spacing:2px}
.r-src{display:inline-flex;align-items:center;opacity:.92}
.r-src svg{width:17px;height:17px}
.review p{font-size:14px;line-height:1.6;margin-bottom:20px}
.r-who{display:flex;align-items:center;gap:12px}
.r-av{width:38px;height:38px;border-radius:50%;background:var(--slate);color:var(--white);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.r-name{font-size:14px;font-weight:700;color:var(--white)}
.r-role{font-size:12px;color:var(--grey-dim)}

/* tools */
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tool{background:var(--ink-900);border:1px solid var(--hair);border-radius:var(--r-lg);padding:28px 24px;display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .4s,background .4s}
.tool:hover{transform:translateY(-5px);border-color:var(--purple-line);background:var(--ink-800)}
.t-ic{width:42px;height:42px;border-radius:12px;background:var(--purple-wash);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.t-ic svg{width:20px;height:20px;stroke:var(--purple);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tool h3{font-size:16px;margin-bottom:9px}
.tool p{font-size:13px;line-height:1.55;margin-bottom:18px}
.tool .link-inline{margin-top:auto;font-size:13px}

/* final cta */
.final-card{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,60px);align-items:center;border:1px solid var(--hair);border-radius:var(--r-xl);padding:clamp(40px,5vw,68px);overflow:hidden;background:var(--ink-950)}
/* whisper of accent light behind the object, not behind the copy */
.final-card::before{content:"";position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:58%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(188,135,251,.15),transparent 66%);pointer-events:none;z-index:0}
.final-card>*{position:relative;z-index:1}
.final-card .eyebrow{margin-bottom:22px}
.final-card h2{font-size:clamp(2rem,3.9vw,3.5rem);margin-bottom:18px;max-width:15ch}
.final-card p{font-size:1.05rem;line-height:1.62;max-width:46ch;margin-bottom:34px}
.final-actions{display:flex;gap:14px;flex-wrap:wrap}
/* Deliverable panel — states what the free audit actually produces */
.final-art{border-radius:var(--r-lg);background:var(--ink-900);border:1px solid var(--hair);padding:26px 26px 22px;text-align:left}
.deliv-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--hair)}
.deliv-lab{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.deliv-badge{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);border:1px solid var(--purple-line);border-radius:99px;padding:5px 11px;white-space:nowrap}
.deliv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.deliv-list li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--grey)}
.deliv-list svg{width:17px;height:17px;stroke:var(--purple);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;margin-top:2px}
.deliv-list b{color:var(--white);font-weight:700;display:block;margin-bottom:2px}
.deliv-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);font-size:12.5px;line-height:1.5;color:var(--grey-dim)}

/* footer */
.footer{border-top:1px solid var(--hair);padding:clamp(60px,7vw,86px) 0 30px;background:var(--ink-950)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px;border-bottom:1px solid var(--hair)}
.foot-brand .brand{margin-bottom:18px}
.nb{white-space:nowrap}
.foot-brand p{font-size:14px;line-height:1.65;max-width:34ch;margin-bottom:20px}
.foot-eyebrow{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dim);margin-bottom:14px}
.foot-social{display:flex;gap:9px;margin-bottom:22px;flex-wrap:wrap}
.foot-social a{width:44px;height:44px;border:1px solid var(--hair);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--grey);transition:border-color .3s,background .3s,color .3s,transform .45s var(--ease)}
.foot-social a:hover{border-color:var(--purple-line);background:var(--hover);color:var(--purple);transform:translateY(-3px)}
/* Official brand glyphs are solid marks, not outlines */
.foot-social svg{width:17px;height:17px;fill:currentColor;stroke:none}
.foot-contact{display:flex;flex-direction:column;gap:10px;font-size:14px}
.foot-contact a{color:var(--grey);font-weight:600;display:inline-flex;align-items:center;gap:9px;transition:color .3s}
.foot-contact a:hover{color:var(--purple)}
.foot-contact svg{width:15px;height:15px;stroke:var(--purple);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.foot-col h4{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dim);margin-bottom:16px}
.foot-col a{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--grey);padding:6px 0;transition:color .3s,gap .3s}
.foot-col a:hover{color:var(--white);gap:12px}
.foot-col a svg{width:15px;height:15px;stroke:var(--grey-dim);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;transition:stroke .3s}
.foot-col a:hover svg{stroke:var(--purple)}
.foot-google{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:24px 0;border-bottom:1px solid var(--hair)}
.foot-google .foot-eyebrow{margin-bottom:0;margin-right:4px}
.gbtn{display:inline-flex;align-items:center;gap:9px;padding:12px 19px;border:1px solid var(--hair);border-radius:var(--r);font-size:13.5px;font-weight:600;color:var(--white);transition:border-color .3s,background .3s,transform .45s var(--ease)}
.gbtn:hover{border-color:var(--purple-line);background:var(--hover);transform:translateY(-2px)}
.gbtn>svg:first-child{width:16px;height:16px;stroke:var(--purple);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* full-colour Google mark keeps its own fills, no stroke */
.gbtn-google>svg:first-child{stroke:none;fill:none;width:17px;height:17px}
.gbtn .ext{width:13px;height:13px;stroke:var(--grey-dim);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.foot-legal{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;flex-wrap:wrap;font-size:12.5px;color:var(--grey-dim)}
.foot-legal .links{display:flex;gap:18px;flex-wrap:wrap}
.foot-legal a:hover{color:var(--purple)}

/* reveal */
.sx-anim .reveal{opacity:0;transform:translateY(26px);filter:blur(8px)}
.reveal.in{opacity:1;transform:none;filter:none;transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* responsive */
/* Nav has its own breakpoints — the full menu fits down to ~1000px,
   so tablet landscape (1024) keeps the real nav instead of a burger. */
@media(min-width:1800px){:root{--maxw:1560px}}
@media(min-width:2400px){:root{--maxw:1680px}}

@media(max-width:1100px){
  .nav-cta .btn-primary{display:none}
  .nav-link,.nav-trigger{padding:9px 9px;font-size:14px}
  .nav-links{gap:0}
}
@media(max-width:1000px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .burger{display:flex}
}

@media(max-width:1040px){
  .hero{min-height:auto;padding:130px 0 80px}
  .hero-in{grid-template-columns:1fr;gap:46px}
  .card-score{max-width:540px}
  .scroll-cue{display:none}
  .svc-row,.svc-row.c3,.svc-row.c2{grid-template-columns:repeat(2,1fr)}
  .svc:nth-child(4n){border-right:1px solid var(--hair)}
  .svc:nth-child(2n){border-right:none}
  .obj-in{grid-template-columns:1fr;gap:40px}
  .obj-art{max-width:460px}
  .res-grid{grid-template-columns:1fr;gap:40px}
  .proc{grid-template-columns:repeat(2,1fr);gap:42px 24px}
  .proc-line{display:none}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .ind:nth-child(4n){border-right:1px solid var(--hair)}
  .ind:nth-child(2n){border-right:none}
  .ind:nth-last-child(-n+4){border-bottom:1px solid var(--hair)}
  .ind:nth-last-child(-n+2){border-bottom:none}
  .appr{grid-template-columns:repeat(2,1fr);gap:34px}
  .cases,.cases.c2{grid-template-columns:1fr}
  .case-art{aspect-ratio:16/8}
  .final-card{grid-template-columns:1fr;gap:38px}
  .final-art{max-width:400px;order:-1}
  .tools-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-brand{grid-column:1/-1}
  .strip-in{grid-template-columns:repeat(2,1fr)}
  .strip-cell:nth-child(2n+1)::before{display:none}
  .strip-cell:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .strip-cell{padding:32px 18px}
}
@media(max-width:580px){
  :root{--pad:20px}
  .svc-row,.svc-row.c3,.svc-row.c2{grid-template-columns:1fr}
  .svc{border-right:none!important}
  .res-metrics{grid-template-columns:1fr 1fr}
  .proc{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:1fr}
  .ind{border-right:none!important;min-height:0}
  .appr{grid-template-columns:1fr}
  .tools-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .sec-head.flex{flex-direction:column;align-items:flex-start}
  .sc-gauge{flex-direction:column;align-items:flex-start;gap:18px}
  .strip-in{grid-template-columns:1fr 1fr}
  .review{width:290px}
}



/* Answer block - a short, self-contained reply directly under a question heading.
   Written to be quotable by search engines and AI answer engines. */
.answer{max-width:70ch;font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.6;color:var(--grey);
  border-left:2px solid var(--purple);padding-left:20px;margin:0 0 26px}
.answer b,.answer strong{color:var(--white);font-weight:700}
.keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;margin-top:34px}
.keyfact{background:var(--ink-900);padding:20px 22px}
.keyfact dt{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-dim);margin-bottom:8px}
.keyfact dd{margin:0;font-size:15px;font-weight:700;color:var(--white);line-height:1.35}
/* Copy buttons on the client-guide settings cards. The server address and ports get
   typed by hand into a phone or into Outlook, and a typo there is the single most common
   reason a mailbox will not connect. One tap removes that failure mode. */
.kf-copy{margin-left:8px;padding:2px 9px;border:1px solid var(--hair);border-radius:999px;background:transparent;
  color:var(--grey-dim);font-family:var(--font);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.7;vertical-align:middle;cursor:pointer;
  transition:color .15s ease,border-color .15s ease}
/* hover only where a real pointer exists - on a phone :hover sticks after a tap and
   would leave the button highlighted until you touch something else */
@media(hover:hover){.kf-copy:hover{color:var(--white);border-color:var(--purple)}}
.kf-copy:focus-visible{color:var(--white);border-color:var(--purple)}
/* pressing changes the word, not the colour - the button holds its resting look */
.kf-copy.is-done{color:var(--grey-dim);border-color:var(--hair)}
@media(prefers-reduced-motion:reduce){.kf-copy{transition:none}}


/* ========== SERVICE PAGE COMPONENTS (pricing + FAQ) ========== */
.price-switch{display:inline-flex;align-items:center;gap:4px;padding:5px;border:1px solid var(--hair);border-radius:99px;background:var(--ink-900);margin-bottom:38px}
.price-switch button{font-family:var(--font);font-size:13.5px;font-weight:700;color:var(--grey);background:transparent;border:0;border-radius:99px;padding:11px 20px;cursor:pointer;min-height:44px;transition:background .25s,color .25s}
.price-switch button.on{background:var(--purple);color:#141414}
:root[data-theme="light"] .price-switch button.on{color:#fff}
/* Locks: a host/theme rule with higher specificity must not repaint our controls. */
html body .price-switch button,html body .price-switch button:hover,html body .price-switch button:focus,html body .price-switch button:active{background:transparent!important;box-shadow:none!important}
html body .price-switch button:hover{color:var(--purple)!important}
html body .price-switch button.on,html body .price-switch button.on:hover,html body .price-switch button.on:focus,html body .price-switch button.on:active{background:var(--purple)!important;color:#141414!important}
html[data-theme="light"] body .price-switch button.on,html[data-theme="light"] body .price-switch button.on:hover,html[data-theme="light"] body .price-switch button.on:focus,html[data-theme="light"] body .price-switch button.on:active{color:#fff!important}
html body a.btn-primary,html body button.btn-primary,html body a.btn-primary:focus,html body button.btn-primary:focus{background:var(--purple)!important}
html body a.btn-primary:hover,html body button.btn-primary:hover,html body a.btn-primary:active,html body button.btn-primary:active{background:var(--purple-hover)!important}
html body a.btn-ghost,html body button.btn-ghost,html body a.btn-ghost:focus,html body button.btn-ghost:focus{background:transparent!important}
html body a.btn-ghost:hover,html body button.btn-ghost:hover,html body a.btn-ghost:active,html body button.btn-ghost:active{background:var(--hover)!important}
/* Text colour needs the same lock as the background: a theme link colour was
   repainting ghost-button labels dark purple on dark. */
html body a.btn-ghost,html body button.btn-ghost,html body a.btn-ghost:hover,html body button.btn-ghost:hover,html body a.btn-ghost:focus,html body a.btn-ghost:active{color:var(--white)!important}
html body a.btn-primary,html body button.btn-primary,html body a.btn-primary:hover,html body button.btn-primary:hover,html body a.btn-primary:focus,html body a.btn-primary:active{color:#141414!important}
html[data-theme="light"] body a.btn-primary,html[data-theme="light"] body button.btn-primary,html[data-theme="light"] body a.btn-primary:hover,html[data-theme="light"] body a.btn-primary:focus{color:#fff!important}
html body a.btn svg,html body button.btn svg{stroke:currentColor!important}
html body .faq-q,html body .faq-q:hover,html body .faq-q:focus,html body .faq-q:active,html body .faq-item.open .faq-q{background:transparent!important;box-shadow:none!important}
.price-note{font-size:12.5px;color:var(--grey-dim);margin-left:12px}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.price-grid.c3{grid-template-columns:repeat(3,1fr)}
.tier{position:relative;background:var(--ink-900);border:1px solid var(--hair);border-radius:var(--r-lg);padding:28px 24px;display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .4s}
.tier:hover{transform:translateY(-4px);border-color:var(--purple-line)}
.tier.featured{border-color:var(--purple-line)}
.tier-flag{position:absolute;top:-11px;left:24px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#141414;background:var(--purple);border-radius:99px;padding:5px 12px}
:root[data-theme="light"] .tier-flag{color:#fff}
.tier-ic{width:38px;height:38px;border-radius:11px;background:var(--purple-wash);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.tier-ic svg{width:19px;height:19px;stroke:var(--purple);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tier h3{font-size:19px;margin-bottom:8px}
.tier .tier-for{font-size:13px;line-height:1.5;color:var(--grey);margin-bottom:20px;min-height:40px}
.tier-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;border-top:1px solid var(--hair);padding-top:20px;margin-bottom:22px}
.tier-amt{font-size:clamp(1.8rem,2.6vw,2.2rem);font-weight:800;color:var(--white);letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.tier-per{font-size:12.5px;color:var(--grey-dim)}
/* Terms banner: only shown for the monthly option, revealed by the switch. */
.price-terms{display:none;align-items:flex-start;gap:11px;border:1px solid var(--purple-line);background:var(--purple-wash);border-radius:var(--r-md);padding:15px 18px;margin-bottom:26px;font-size:13.5px;line-height:1.55;color:var(--grey)}
.price-terms.show{display:flex}
.price-terms svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px;stroke:var(--purple);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.price-terms b{color:var(--white)}
.tier ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.tier li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--grey)}
.tier li svg{width:15px;height:15px;stroke:var(--purple);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;margin-top:3px}
.tier li.head{color:var(--white);font-weight:700}
.tier li.only{display:none}
.mode-annually .tier li.only{display:flex}
.tier li.excl{color:var(--grey-dim)}
.tier li.excl svg{stroke:var(--grey-dim);stroke-width:2}
.tier .btn{width:100%}

.faq-list{max-width:820px;border-top:1px solid var(--hair)}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;background:transparent;border:0;cursor:pointer;font-family:var(--font);font-size:clamp(1rem,1.5vw,1.12rem);font-weight:700;color:var(--white);text-align:left;letter-spacing:-.01em;min-height:44px}
.faq-q,.faq-q:hover,.faq-q:focus,.faq-q:active,.faq-item.open .faq-q{background:transparent!important;box-shadow:none!important}
.faq-q:hover{color:var(--purple)}
.faq-q svg{width:20px;height:20px;stroke:var(--purple);fill:none;stroke-width:2;stroke-linecap:round;flex:0 0 auto;transition:transform .4s var(--ease)}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{font-size:15px;line-height:1.65;color:var(--grey);padding:0 4px 24px;max-width:68ch}
@media(max-width:1040px){.price-grid,.price-grid.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.price-grid,.price-grid.c3{grid-template-columns:1fr}.tier .tier-for{min-height:0}}

/* Escape a boxed builder container (Elementor default content width is 1140px).
   Without this the hero background and every section band are letterboxed. */
/* body-only page files sit in Elementor HTML widgets, which are boxed at 1140px - the
   file's own <main> breaks back out. Keyed to the widget, not to an id, so a page split
   across two widgets does not leave the second half inset. */
main#top,.elementor-widget-html>main{width:calc(100vw - var(--sbw,0px));max-width:calc(100vw - var(--sbw,0px));margin-left:calc(50% - 50vw + var(--sbw,0px)/2)}
main#top .wrap{margin-left:auto;margin-right:auto}

/* ---------- builder compatibility ----------
   Elementor/themes ship `.elementor img{height:auto;max-width:100%}` which outranks our
   single-class rules. These re-assert the sizing our layout depends on. ---------- */
.brand .brand-img{height:27px!important;width:auto!important;max-width:none!important}
.foot-brand .brand .brand-img{height:30px!important}
.hero .hero-bg>img{width:100%!important;height:116%!important;max-width:none!important;object-fit:cover!important}
.results .results-bg img{width:100%!important;height:100%!important;object-fit:cover!important}
.case .case-art img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important}
.foot-social a svg,.r-src svg,.gbtn svg,.btn svg{max-width:none!important;height:auto}
.obj-art figcaption,.obj-art{margin:0}
.deliv-list{list-style:none!important;margin:0!important;padding:0!important}
.nav-links,.dd,.mega{list-style:none}
.hero h1,.sec-head h2,.final-card h2{margin-top:0}
/* Balance heading line lengths so a short last word cannot strand on its own line.
   Ignored by browsers without support, which simply wrap as before. */
main h2,main h3,.sec-head h2,.final-card h2{text-wrap:balance}

/* A long unbreakable word (e.g. "WooCommerce.") must not stretch the hero grid track.
   min-width:0 stops the auto-minimum expanding; the smaller floor keeps it fitting. */
.hero-in>*{min-width:0}
.hero h1{overflow-wrap:break-word}
@media(max-width:430px){
  .hero h1{font-size:2.5rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none;filter:none}
  .rev-track{animation:none}
  .hero-bg{transform:none!important}
}
/* work filter + project grid (v7.5) */
.work-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.work-filter button{font-family:var(--font);font-size:13.5px;font-weight:700;color:var(--grey);background:var(--ink-900);border:1px solid var(--hair);border-radius:99px;padding:11px 18px;min-height:44px;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.work-filter button .n{color:var(--grey-dim);margin-left:7px;font-weight:600}
.work-filter button.on{background:var(--purple);color:#141414;border-color:var(--purple)}
.work-filter button.on .n{color:#141414;opacity:.72}
html body .work-filter button,html body .work-filter button:hover,html body .work-filter button:focus,html body .work-filter button:focus-visible,html body .work-filter button:active,html body .work-filter button:focus-within{background:var(--ink-900)!important;border-color:var(--hair)!important;color:var(--grey)!important;box-shadow:none!important;text-shadow:none!important}
html body .work-filter button:hover{color:var(--purple)!important;border-color:var(--purple)!important}
html body .work-filter button.on,html body .work-filter button.on:hover,html body .work-filter button.on:focus,html body .work-filter button.on:focus-visible,html body .work-filter button.on:active,html body .work-filter button.on:focus-within{background:var(--purple)!important;color:#141414!important;border-color:var(--purple)!important}
html body .work-filter button .n{color:var(--grey-dim)!important}
html body .work-filter button.on .n{color:#141414!important;opacity:.72}
html body .work-filter button:focus-visible{outline:2px solid var(--purple)!important;outline-offset:2px}
html[data-theme="light"] body .work-filter button.on,html[data-theme="light"] body .work-filter button.on:hover{color:#fff!important}
html[data-theme="light"] body .work-filter button.on .n{color:#fff!important}
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.proj{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px;min-width:0;border:1px solid var(--hair);border-radius:var(--r);background:var(--ink-900);transition:transform .5s var(--ease),border-color .35s}
.proj:hover{transform:translateY(-4px);border-color:var(--purple)}
a.proj{text-decoration:none;color:inherit}
a.proj:hover .pj-name{color:var(--purple)}
.pj-shot{display:block;position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#08080a;border:1px solid var(--hair)}
.pj-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 1s var(--ease)}
.proj:hover .pj-shot img{transform:scale(1.05)}
.pj-shot.logo{display:grid;place-items:center;padding:16px}
.pj-shot.logo img{width:auto;max-width:78%;height:auto;max-height:62%;object-fit:contain}
.pj-shot.broken{display:none}
.pj-visit{margin-left:auto;display:inline-flex;align-items:center;height:30px;line-height:1;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--purple);border:1px solid rgba(188,135,251,.42);border-radius:99px;padding:0 12px;white-space:nowrap}
.proj[hidden]{display:none}
.pj-mono{width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;border-radius:14px;background:linear-gradient(140deg,rgba(188,135,251,.22),rgba(188,135,251,.06));border:1px solid var(--hair);font-size:16px;font-weight:800;color:var(--purple)}
.pj-name{display:block;transition:color .3s;font-size:1rem;font-weight:700;line-height:1.32;overflow-wrap:break-word}
.pj-meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:7px}
.pj-tag{display:inline-flex;align-items:center;height:30px;line-height:1;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grey-dim);border:1px solid var(--hair);border-radius:99px;padding:0 12px}
.pj-tag.store{color:var(--purple);border-color:rgba(188,135,251,.42)}
@media(max-width:1080px){.work-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.work-grid{grid-template-columns:1fr}}
@media(max-width:520px){.work-filter{gap:7px;margin-bottom:26px}.work-filter button{font-size:12.5px;padding:11px 14px}.work-filter button .n{margin-left:5px}}
/* site scorecard tool (v7.7) */
.sc-tool{border:1px solid var(--hair);border-radius:var(--r-xl);background:var(--ink-900);padding:clamp(22px,3.4vw,40px);min-width:0}
.sc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.sc-count{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-dim)}
.sc-count b{color:var(--purple)}
.sc-rail{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-bottom:30px}
.sc-fill{display:block;height:100%;width:100%;border-radius:99px;background:var(--purple);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.sc-qs{list-style:none;margin:0;padding:0}
.sc-q{display:none}
.sc-q.on{display:block}
.sc-q h3{font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.28;margin-bottom:8px;outline:none}
.sc-q .sc-hint{font-size:14px;color:var(--grey);margin-bottom:20px;max-width:58ch}
.sc-opts{display:grid;gap:10px}
.sc-opts button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font-family:var(--font);font-size:15px;font-weight:600;color:var(--white);background:var(--ink);border:1px solid var(--hair);border-radius:14px;padding:15px 18px;min-height:56px;cursor:pointer;transition:border-color .25s,transform .25s var(--ease)}
.sc-opts button:hover{border-color:var(--purple);transform:translateX(3px)}
.sc-opts button .sc-key{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--grey-dim);border:1px solid var(--hair);transition:color .25s,border-color .25s}
.sc-opts button:hover .sc-key{color:var(--purple);border-color:var(--purple)}
.sc-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.sc-back{font-family:var(--font);font-size:13px;font-weight:700;color:var(--grey);background:none;border:0;padding:10px 2px;min-height:44px;cursor:pointer}
.sc-back:hover{color:var(--purple)}
.sc-back[hidden]{display:none}
.sc-note{font-size:12.5px;color:var(--grey-dim);margin-left:auto;text-align:right}
.sc-result{display:none}
.sc-result.on{display:block}
.sc-total{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.sc-big{font-size:clamp(3rem,8vw,4.6rem);font-weight:800;line-height:1;color:var(--purple);letter-spacing:-.02em}
.sc-outof{font-size:15px;font-weight:700;color:var(--grey-dim)}
.sc-band{font-size:clamp(1.15rem,2.2vw,1.45rem);font-weight:800;margin-bottom:10px;outline:none}
.sc-verdict{color:var(--grey);margin-bottom:26px;max-width:60ch}
.sc-bars{display:grid;gap:15px;margin-bottom:26px}
.sc-dim{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 14px;align-items:center}
.sc-dim-name{font-size:14px;font-weight:700}
.sc-dim-pct{font-size:13px;font-weight:800;color:var(--grey-dim)}
.sc-dim-rail{grid-column:1/-1;height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.sc-dim-fill{display:block;height:100%;width:100%;border-radius:99px;background:var(--purple);transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--ease)}
.sc-dim.weak .sc-dim-fill{background:#ff8f6b}
.sc-dim.weak .sc-dim-pct{color:#ff8f6b}
.sc-weak{border:1px solid var(--hair);border-radius:16px;padding:20px 22px;margin-bottom:26px;background:var(--ink)}
.sc-weak[hidden]{display:none}
.sc-weak h4{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--grey-dim);margin-bottom:11px}
.sc-weak ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sc-weak li{display:flex;gap:11px;font-size:14.5px;line-height:1.5}
.sc-weak li svg{flex:0 0 auto;width:18px;height:18px;margin-top:3px;fill:none;stroke:#ff8f6b;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sc-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.sc-again{font-family:var(--font);font-size:13px;font-weight:700;color:var(--grey);background:none;border:0;padding:10px 2px;min-height:44px;cursor:pointer}
.sc-again:hover{color:var(--purple)}
.sc-fine{font-size:12.5px;color:var(--grey-dim);margin-top:22px;max-width:62ch}
html body .sc-opts button,html body .sc-opts button:hover,html body .sc-opts button:focus,html body .sc-opts button:focus-visible,html body .sc-opts button:active{background:var(--ink)!important;color:var(--white)!important;box-shadow:none!important}
html body .sc-opts button:hover,html body .sc-opts button:focus-visible{border-color:var(--purple)!important}
html body .sc-back,html body .sc-again,html body .sc-back:hover,html body .sc-again:hover,html body .sc-back:focus,html body .sc-again:focus,html body .sc-back:active,html body .sc-again:active{background:transparent!important;box-shadow:none!important;border:0!important}
.sc-opts button:focus-visible{outline:2px solid var(--purple)!important;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.sc-fill,.sc-dim-fill{transition:none}.sc-opts button:hover{transform:none}}
@media(max-width:560px){.sc-opts button{font-size:14.5px;padding:14px 15px}.sc-note{margin-left:0;text-align:left;width:100%}}
/* calculators (v7.8) */
.calc{border:1px solid var(--hair);border-radius:var(--r-xl);background:var(--ink-900);padding:clamp(22px,3.4vw,40px);min-width:0}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.calc-f label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-dim);margin-bottom:7px}
.calc-in{position:relative;display:flex;align-items:center}
.calc-in .pre,.calc-in .suf{position:absolute;font-size:14px;font-weight:700;color:var(--grey-dim);pointer-events:none}
.calc-in .pre{left:15px}
.calc-in .suf{right:15px}
.calc-in input{width:100%;font-family:var(--font);font-size:16px;font-weight:700;color:var(--white);background:var(--ink);border:1px solid var(--hair);border-radius:12px;padding:14px 15px;min-height:52px;-moz-appearance:textfield}
.calc-in.has-pre input{padding-left:32px}
.calc-in.has-suf input{padding-right:42px}
.calc-in input::-webkit-outer-spin-button,.calc-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-in input:focus{outline:2px solid var(--purple);outline-offset:1px;border-color:var(--purple)}
.calc-hint{font-size:12.5px;color:var(--grey-dim);margin-top:7px}
.calc-hint a{color:var(--purple)}
.calc-adv{margin-top:22px;border-top:1px solid var(--hair);padding-top:20px}
.calc-adv summary{font-size:13px;font-weight:700;color:var(--grey);cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;gap:8px}
.calc-adv summary::-webkit-details-marker{display:none}
.calc-adv summary::before{content:"+";color:var(--purple);font-weight:800;font-size:16px}
.calc-adv[open] summary::before{content:"\2212"}
.calc-adv summary:hover{color:var(--purple)}
.calc-out{margin-top:28px;border-top:1px solid var(--hair);padding-top:28px}
.calc-headline{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.calc-big{font-size:clamp(2.4rem,7vw,4rem);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--purple)}
.calc-big.loss{color:#ff8f6b}
.calc-per{font-size:15px;font-weight:700;color:var(--grey-dim)}
.calc-verdict{color:var(--grey);max-width:60ch;margin-bottom:24px}
.calc-rows{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:14px;overflow:hidden;margin-bottom:22px}
.calc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--ink-900);padding:14px 18px;font-size:14.5px}
.calc-row span{color:var(--grey)}
.calc-row b{font-weight:800;white-space:nowrap}
.calc-row.total b{color:var(--purple)}
.calc-working{font-size:13px;color:var(--grey-dim);line-height:1.65;border:1px solid var(--hair);border-radius:14px;padding:16px 18px;background:var(--ink)}
.calc-working b{color:var(--grey)}
.calc-note{font-size:12.5px;color:var(--grey-dim);margin-top:18px;max-width:64ch}
html body .calc-in input,html body .calc-in input:hover,html body .calc-in input:focus{background:var(--ink)!important;color:var(--white)!important;box-shadow:none!important}
@media(max-width:560px){.calc-row{flex-direction:column;align-items:flex-start;gap:4px}}
.calc-row.warn b{color:#ff8f6b}
.calc-row.good b{color:#6bd39a}
.calc-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:14px;overflow:hidden;margin-bottom:22px}
.calc-cell{background:var(--ink-900);padding:18px}
.calc-cell .cl{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--grey-dim);margin-bottom:6px}
.calc-cell .cv{font-size:clamp(1.3rem,3.4vw,1.75rem);font-weight:800;letter-spacing:-.01em}
.calc-cell .cn{font-size:12.5px;color:var(--grey-dim);margin-top:4px}
.calc-cell.bad .cv{color:#ff8f6b}
.calc-cell.ok .cv{color:#6bd39a}
@media(max-width:560px){.calc-split{grid-template-columns:1fr}}
/* instant quote quiz (v8.0) */
.qq-row{padding:18px 0;border-bottom:1px solid var(--hair)}
.qq-row:last-of-type{border-bottom:0}
.qq-row.hide{display:none}
.qq-q{font-size:15px;font-weight:700;margin-bottom:4px}
.qq-note{font-size:12.5px;color:var(--grey-dim);margin-bottom:12px}
.qq-opts{display:flex;flex-wrap:wrap;gap:8px}
.qq-opts button{font-family:var(--font);font-size:13.5px;font-weight:700;color:var(--grey);background:var(--ink);border:1px solid var(--hair);border-radius:99px;padding:11px 16px;min-height:44px;cursor:pointer;transition:color .2s,border-color .2s}
.qq-opts button .qp{display:block;font-size:11px;font-weight:700;color:var(--grey-dim);margin-top:1px}
.qq-opts button.on{background:var(--purple);color:#141414;border-color:var(--purple)}
.qq-opts button.on .qp{color:#141414;opacity:.72}
html body .qq-opts button,html body .qq-opts button:hover,html body .qq-opts button:focus,html body .qq-opts button:focus-visible,html body .qq-opts button:active{background:var(--ink)!important;color:var(--grey)!important;box-shadow:none!important}
html body .qq-opts button:hover{color:var(--purple)!important;border-color:var(--purple)!important}
html body .qq-opts button.on,html body .qq-opts button.on:hover,html body .qq-opts button.on:focus,html body .qq-opts button.on:focus-visible,html body .qq-opts button.on:active{background:var(--purple)!important;color:#141414!important;border-color:var(--purple)!important}
html body .qq-opts button.on .qp{color:#141414!important}
.qq-opts button:focus-visible{outline:2px solid var(--purple)!important;outline-offset:2px}
.qq-totals{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:14px;overflow:hidden;margin-bottom:22px}
@media(max-width:560px){.qq-totals{grid-template-columns:1fr}}
/* jump-to chips (v8.1) */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.jump a{display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--hair);background:var(--ink-900);color:var(--grey);font-size:13.5px;font-weight:700;text-decoration:none;transition:color .2s,border-color .2s}
.jump a:hover,.jump a:focus-visible{color:var(--purple);border-color:var(--purple)}
html body .jump a,html body .jump a:hover,html body .jump a:focus,html body .jump a:visited{background:var(--ink-900)!important;box-shadow:none!important}
html body .jump a:hover,html body .jump a:focus-visible{color:var(--purple)!important;border-color:var(--purple)!important}
.faq-sec{scroll-margin-top:96px}

/* Long-form legal prose (v8.2) - privacy policy, terms. A reading column rather
   than cards: the wording is a legal document and must stay plain and scannable.
   Link and marker colours are hardened the same way .jump is, because the theme
   restyles bare <a> inside post content. */
.legal{max-width:76ch;color:var(--grey);font-size:clamp(.98rem,1.2vw,1.05rem);line-height:1.75}
.legal>*:first-child{margin-top:0}
.legal h2{font-size:clamp(1.3rem,2.3vw,1.85rem);color:var(--white);line-height:1.18;margin:58px 0 16px;scroll-margin-top:96px}
.legal h3{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--white);line-height:1.3;margin:34px 0 12px}
.legal h2+p,.legal h2+ul,.legal h2+ol,.legal h3+p,.legal h3+ul,.legal h3+ol{margin-top:0}
.legal p{margin:0 0 16px}
.legal ul,.legal ol{margin:0 0 18px;padding-left:24px}
.legal li{margin:0 0 9px}
.legal li::marker{color:var(--purple)}
.legal strong,.legal b{color:var(--white);font-weight:700}
.legal hr{border:0;border-top:1px solid var(--hair);margin:46px 0}
html body .legal a,html body .legal a:visited{color:var(--purple)!important;text-decoration:underline;text-underline-offset:3px;background:none!important}
html body .legal a:hover,html body .legal a:focus-visible{color:var(--white)!important}
.legal-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:30px;font-size:13.5px;color:var(--grey-dim)}
.legal-meta b{color:var(--white);font-weight:700}

/* Before / after compare slider (v8.5) - case studies.
   The drag handle is a real <input type="range"> laid over the image at zero
   opacity, so pointer, touch and keyboard all work with no custom drag code.
   The reveal is a clip-path driven by one custom property, --ba. */
.ba-wrap{margin:0}
/* The two screenshots are rarely the same height - a long old page against a
   short new one. A fixed ratio plus object-fit:cover anchored to the top shows
   the same slice of both, which is the only fair comparison. */
.ba{position:relative;--ba:50%;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hair);background:var(--ink-900);line-height:0;touch-action:pan-y}
.ba>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.ba-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--ba)) 0 0)}
.ba-top img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.ba-tag{position:absolute;top:14px;z-index:3;height:28px;display:inline-flex;align-items:center;padding:0 12px;border-radius:99px;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1;background:rgba(8,8,10,.82);color:var(--white);border:1px solid var(--hair);pointer-events:none}
.ba-tag.l{left:14px}
.ba-tag.r{right:14px}
.ba-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:100%}
.ba-range::-moz-range-thumb{width:56px;height:100%;border:0;border-radius:0}
.ba-line{position:absolute;top:0;bottom:0;left:var(--ba);z-index:2;width:2px;margin-left:-1px;background:var(--purple);pointer-events:none}
.ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--purple);display:grid;place-items:center;box-shadow:0 8px 26px rgba(0,0,0,.5)}
.ba-grip svg{width:22px;height:22px;stroke:#141414;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html body .ba-range:focus-visible~.ba-line .ba-grip{outline:3px solid var(--white);outline-offset:3px}
.ba-cap{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--grey-dim);text-align:center}
@media(max-width:640px){
  .ba-grip{width:38px;height:38px}
  .ba-tag{top:10px;font-size:10px}
  .ba-tag.l{left:10px}
  .ba-tag.r{right:10px}
}

/* before / after as numbers, where the proof is data rather than a screenshot */
.baN{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:18px}
.baN-col{background:var(--ink-900);border:1px solid var(--hair);border-radius:var(--r-lg);padding:26px}
.baN-col.after{border-color:var(--purple)}
.baN-lab{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dim);margin-bottom:16px}
.baN-col.after .baN-lab{color:var(--purple)}
.baN-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--hair)}
.baN-row:last-child{border-bottom:0;padding-bottom:0}
.baN-v{font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:800;color:var(--white);letter-spacing:-.02em}
.baN-col.after .baN-v{color:var(--purple)}
.baN-k{font-size:12.5px;color:var(--grey-dim);text-align:right}
.baN-arrow{display:grid;place-items:center;color:var(--grey-dim)}
.baN-arrow svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Hero tunnel (v8.8) - client sites flying past in perspective behind the hero.
   Decorative: the container is aria-hidden and the panels carry empty alt text.
   Panels render at most ~480px wide, so the images only need to be ~900px.
   The radial fade keeps the middle readable and has to follow the theme, hence
   --tunnel-rgb rather than a hard-coded dark value. */
:root{--tunnel-rgb:10,10,12}
[data-theme="light"]{--tunnel-rgb:244,244,247}

/* Hero tunnel. Client sites fly past the camera in real perspective - they stay
   sharp and legible, which is the whole point of the effect. That needs the middle
   of the stage clear, so the hero is single-column and carries no card. */
/* No overflow here. overflow other than visible forces transform-style:preserve-3d
   to be USED as flat, which drops depth sorting - panels then composite in DOM
   order, so whichever is last in the markup always painted on top no matter how
   far away it was. .hero already clips, so nothing needs clipping twice. */
.sx-tunnel{position:absolute;inset:0;z-index:0;perspective:1200px;perspective-origin:50% 50%;
  transform-style:preserve-3d;pointer-events:none}
/* Soft pool behind the copy only - the outer thirds stay clear so the panels read. */
/* No second scrim here. Stacking one over .hero-scrim crushed the panels to
   near-black; the hero scrim alone is enough, and the headline has its own shadow. */
.sx-panel{position:absolute;top:50%;width:clamp(400px,36vw,680px);aspect-ratio:1400/793;
  transform-style:preserve-3d;backface-visibility:hidden;
  border:1px solid rgba(255,255,255,.10);border-radius:12px;
  background:var(--ink-850);box-shadow:0 40px 90px rgba(0,0,0,.65);opacity:0}
/* The image is rounded here rather than clipped by overflow on the panel: overflow
   makes the panel a flattened layer, and Chrome then paints those in DOM order, which
   let the last panel in a lane draw over nearer ones. */
.sx-panel img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;border-radius:11px}
.sx-panel.sx-l{left:-13%;animation:sx-fly-l 26s linear infinite}
.sx-panel.sx-r{right:-13%;animation:sx-fly-r 26s linear infinite}
/* How many panels sit on screen at once is (visible fraction x panels per side),
   not the duration - a longer cycle just moves the same crowd more slowly. Six a side
   visible for two thirds of their run put four on screen and they stacked. Each panel
   now shows across the middle third only, which is ~2 a side, over a longer z-run so
   the visible stretch still reads as flying past. */
/* z-index rides the same keyframes as the depth. Chrome does not reliably sort these
   panels by their 3D z inside this perspective context - measured across a full cycle,
   20 of 96 overlaps painted the far panel over the near one. Since z travels
   monotonically from -1400 to 900, a z-index rising over the same keyframes encodes the
   depth order exactly, and the browser has nothing left to get wrong. */
@keyframes sx-fly-l{0%{transform:translate3d(0,-50%,-1400px) rotateY(27deg);opacity:0;z-index:1}33%{opacity:0}39%{opacity:1}61%{opacity:1}67%{opacity:0}100%{transform:translate3d(0,-50%,900px) rotateY(27deg);opacity:0;z-index:120}}
@keyframes sx-fly-r{0%{transform:translate3d(0,-50%,-1400px) rotateY(-27deg);opacity:0;z-index:1}33%{opacity:0}39%{opacity:1}61%{opacity:1}67%{opacity:0}100%{transform:translate3d(0,-50%,900px) rotateY(-27deg);opacity:0;z-index:120}}

/* Centred hero. The panels need symmetrical room either side of the copy. */
.hero-centred .hero-in{grid-template-columns:1fr;justify-items:center;text-align:center;max-width:1180px;margin:0 auto}
.hero-centred .hero-copy{display:flex;flex-direction:column;align-items:center}
/* The eyebrow is a flex row: a 24px rule, then the text. Centred, the text wraps to
   two lines on narrow phones and align-items:center then parks the rule against the
   middle of the whole block - it floated below the first line instead of sitting next
   to "Digital". Pin it to the first line instead; on one line this is identical. */
.hero-centred .eyebrow{justify-content:center;align-items:flex-start}
.hero-centred .eyebrow::before{margin-top:8px}
.hero-centred h1{max-width:23ch;text-shadow:0 6px 40px rgba(10,10,12,.98),0 2px 12px rgba(10,10,12,.95)}
.hero-centred .hero-sub{max-width:58ch;text-shadow:0 2px 22px rgba(10,10,12,.99),0 1px 6px rgba(10,10,12,.95)}
.hero-centred .hero-actions{justify-content:center}
/* The default --scrim is a 90deg gradient built for left-aligned text: nearly opaque
   on the left, .35 on the right. Centred, that lit one wall of the tunnel and greyed
   out the other, so the centred hero gets its own symmetric scrim. */
.hero-centred .hero-scrim{background:radial-gradient(42% 62% at 50% 52%,rgba(var(--tunnel-rgb),.88) 0%,rgba(var(--tunnel-rgb),.66) 46%,rgba(var(--tunnel-rgb),.20) 80%,rgba(var(--tunnel-rgb),0) 100%)}
.hero-centred .hero-scrim::after{background:linear-gradient(0deg,rgba(var(--tunnel-rgb),1) 1%,rgba(var(--tunnel-rgb),0) 30%)}
:root[data-theme="light"] .hero-centred h1,
:root[data-theme="light"] .hero-centred .hero-sub{text-shadow:none}

/* Freezing every animation at 0% would leave the panels at opacity:0 and the hero
   empty, so hold them mid-flight instead. */
@media(prefers-reduced-motion:reduce){
  .sx-panel{animation:none!important;opacity:1}
  .sx-panel.sx-l{transform:translate3d(0,-50%,-280px) rotateY(27deg)}
  .sx-panel.sx-r{transform:translate3d(0,-50%,-280px) rotateY(-27deg)}
}
/* Tablet and phone. The previous version dimmed the whole tunnel to .5 and laid a
   heavy scrim over it, which did keep the copy readable but left the panels a flat grey
   smear - the effect stopped reading as websites at all. Protect the words instead:
   panels stay at full strength, the scrim only pools behind the centre, and the
   headline and sub-copy carry their own shadow. */
@media(max-width:900px){
  .sx-panel{width:clamp(240px,40vw,360px)}
  .sx-panel.sx-l{left:-16%}
  .sx-panel.sx-r{right:-16%}
  .hero-centred .hero-scrim{background:radial-gradient(64% 46% at 50% 50%,rgba(var(--tunnel-rgb),.90) 0%,rgba(var(--tunnel-rgb),.62) 55%,rgba(var(--tunnel-rgb),.15) 100%)}
  .hero-centred h1{text-shadow:0 3px 26px rgba(var(--tunnel-rgb),1),0 1px 6px rgba(var(--tunnel-rgb),1)}
  .hero-centred .hero-sub{text-shadow:0 2px 14px rgba(var(--tunnel-rgb),1),0 1px 4px rgba(var(--tunnel-rgb),1)}
}
:root[data-theme="light"] .hero-centred h1,
:root[data-theme="light"] .hero-centred .hero-sub{text-shadow:none}
@media(max-width:760px){
  .baN{grid-template-columns:1fr;gap:12px}
  .baN-arrow{transform:rotate(90deg);padding:2px 0}
}