/* =========================================================
   Piets Technology Solutions — main stylesheet
   Dark glowing hero/bands + airy white content sections.
   Palette (Oct 9 2026, the owner picked "B"): navy #011F5D / deep #010E30 / navy-purple #1B0B55,
   cyan #02D7F5, blue #016FD6, PURPLE accent #7A3DFF. Gradient cyan -> blue -> purple.
   ========================================================= */
:root{
  --ink:#010E30; --ink-2:#011F5D; --navy-cover:#010E30; --cover-glow:#005690; --navy:#011F5D; --navy-deep:#011442;
  --cyan:#02D7F5; --cyan-2:#00E1FF; --cyan-light:#9FE9F7; --cyan-wash:#CDEAF7; --blue:#016FD6; --blue-deep:#016FD6; --indigo:#7A3DFF; --purple:#7A3DFF; --purple-deep:#5B2EE6; --purple-wash:#E9DDFF; --purple-glow:rgba(122,61,255,.55); --navy-purple:#1B0B55; --teal:#3ECFD6; --green:#16A765; --green-bright:#2EE59D;
  --paper:#FFFFFF; --mist:#F4F8FD; --line:#D3DFEE; --pill-wash:#DBE8FF; --text:#26354D; --muted:#4B5B74; --muted-dark:#8EA3C9;
  --grad:linear-gradient(100deg,#02D7F5 0%,#016FD6 55%,#7A3DFF 100%);
  --r-sm:12px; --r:20px; --r-lg:28px;
  --shadow:0 1px 2px rgba(11,21,48,.06),0 8px 24px rgba(11,21,48,.06);
  --shadow-lg:0 24px 60px rgba(11,21,48,.14);
  --glow:0 0 0 1px rgba(2,215,245,.35),0 10px 40px rgba(2,215,245,.25);
  --font-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --font-body:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --header-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
/* ---------- FONT_STANDARD.md rule 1 — the last eight rules in the artifact ----------
   Oct 12 2026. Every rule in this file that names a font-family now also names a
   font-weight. A family with no weight inherits whatever the element happens to
   default to — 400 on a div or span, 700 on a heading, and the keyword `bolder` on a
   <b> or <strong>, whose computed value is decided by its PARENT: 700 under a 400
   parent and 900 under a 700 one, and no family on this site has a 900. That is rule 2
   of FONT_STANDARD.md waiting to happen, and it is how the site once ended up asking
   Google for faces it never loaded. Eight rules here carried a family and no weight.
   Each weight below is the value the page ALREADY computed, measured on the live DOM
   of all 34 shared-header pages at 1440 and 360 before it was written in, so nothing
   moves:

     body                  400  Inter. 68 of 68 page-widths measured Inter 400.
     h1,h2,h3,h4           700  Bricolage Grotesque. h1 (800), h2 (800) and h3 (700)
                                each have their own rule on the three lines below this
                                one, so this value reaches h4 alone — and 700 is exactly
                                what every live h4 computes today: 272 footer headings
                                and 52 in-page ones take the UA's `bold`, and the one
                                that does not (.fhq h4 on portal.html, 800) sets its own
                                weight in a later sheet and still wins. Not a rule
                                before today — which is why it had to be pinned.
     .brand__text strong   700  Bricolage Grotesque. The PIETS wordmark in the header
                                and the footer, 136 elements across the 34 pages, every
                                one measured 700 — the UA's `bolder` resolving against a
                                400 parent, not a rule. Pinning it also closes the rule-2
                                route: a later rule that set .brand__text to 700 would
                                have sent the wordmark to 900 silently.
     .site-footer h4       700  JetBrains Mono. The four footer column headings on every
                                page, 272 elements, all measured 700.

   The remaining four rules MATCH NOTHING on any of the 34 pages — the class strings
   appear in no HTML file and in no script, and QA asserts
   document.querySelectorAll(sel).length === 0 for each of them on every page. They are
   left-overs from the pre-v3 home page. There was no computed value to pin, so each
   takes the house value from FONT_STANDARD.md — mono labels 500, display names 800:

     .works-with__label    500   .marquee__run span  500
     .stat__label          500   .nfp__card h3       800

   DELIBERATELY NOT CHANGED: nothing is RAISED to a house value where a live element
   would move. .site-footer h4 is a mono label, whose house value is 500, and it stays
   at the 700 it renders today on all 34 pages; .brand__text strong and the h4s stay at
   700 rather than the display house 800. Those are a look change on every page of the
   site, and this item is rule 1, not a redesign — they are the owner's to say yes to, and
   they are logged with the same open question theme-ncp.css, money.css, crm-demo.css,
   apps.css, pietbox.css and studio.css left. No bolder/lighter anywhere in this file;
   the five `font:` shorthands all carry a weight or are `font:inherit` on a form
   control, which is correct. */
body{margin:0;font-family:var(--font-body);font-weight:400;font-size:17px;line-height:1.6;color:var(--text);background:var(--paper);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:var(--blue-deep);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance;color:inherit}
h1{font-size:clamp(2.4rem,5vw,4.3rem);font-weight:800}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--paper);padding:10px 14px;border-radius:8px}
.skip:focus{left:12px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.wrap--narrow{max-width:860px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid transparent;font-weight:600;font-size:.98rem;line-height:1;cursor:pointer;text-decoration:none!important;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn svg{flex:none}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 28px rgba(96,86,255,.38)}
.btn-primary:hover{box-shadow:0 12px 36px rgba(0,229,255,.45)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep)}
.btn-outline{background:transparent;color:var(--navy);border-color:rgba(1,31,93,.25)}
.btn-outline:hover{border-color:var(--navy)}
.btn-light{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.btn-sm{min-height:40px;padding:0 16px;font-size:.92rem}
.btn-lg{min-height:56px;padding:0 28px;font-size:1.04rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-row--center{justify-content:center}
.card-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--blue-deep)}
.card-link svg{transition:transform .2s}
a:hover .card-link svg,.card-link:hover svg{transform:translateX(3px)}

/* ---------- Eyebrows / section heads ---------- */
.eyebrow{font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:14px}
.eyebrow--light{color:var(--cyan)}
.section{padding:96px 0}
.section--tight{padding:48px 0}
.section--mist,.section-soft{background:var(--mist)}
.section-navy{background:var(--ink);color:#fff}
.section-head{max-width:720px;margin-bottom:44px}
.section-head p{color:var(--muted);font-size:1.08rem}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}
.note,.areas-note{margin-top:22px;color:var(--muted);font-style:italic}
.pill{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:999px;background:rgba(122,61,255,.18);border:1px solid rgba(167,139,250,.6);color:#E9DDFF;font-family:var(--font-mono);font-weight:500;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.pill__dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(0,229,255,.6);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(0,229,255,.6)}80%,100%{box-shadow:0 0 0 10px rgba(0,229,255,0)}}

/* ---------- Announcement bar ---------- */
.announcement{position:relative;height:38px;display:flex;align-items:center;overflow:hidden;background:var(--ink);color:#DDE6F5;font-size:.84rem;border-bottom:1px solid rgba(255,255,255,.06)}
.announcement__track{display:flex;width:max-content;animation:marquee 105s linear infinite}
.announcement:hover .announcement__track{animation-play-state:paused}
.announcement__run{display:flex;align-items:center;white-space:nowrap}
.announcement__run span{padding:0 18px}
.announcement__run i,.marquee__run i{width:6px;height:6px;border-radius:50%;background:var(--cyan);opacity:.7;flex:none}
.announcement__close{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer;box-shadow:-14px 0 14px var(--ink)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.07);color:#fff}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(5,10,31,.88);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px)}
.site-header__inner{height:var(--header-h);display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none!important;flex:none}
.brand img{width:36px;height:36px}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__text strong{font-family:var(--font-display);font-weight:700;font-size:1.22rem;letter-spacing:.06em}
.brand__text small{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-2);margin-top:3px}
.site-nav{flex:1}
.site-nav__links{list-style:none;display:flex;gap:4px;align-items:center;justify-content:center}
.site-nav__links a{display:block;white-space:nowrap;padding:8px 11px;border-radius:999px;color:#C9D4E8;font-size:.93rem;font-weight:500;text-decoration:none!important;transition:color .2s,background .2s}
.site-nav__links a:hover,.site-nav__links a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.08)}
.site-nav__mobile-only{display:none}
.site-header__actions{display:flex;align-items:center;gap:10px;flex:none}
.header-phone{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:600;font-size:.92rem;padding:0 6px;text-decoration:none!important}
.header-phone svg{color:var(--cyan)}
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav-toggle span{width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1240px){.header-phone{display:none}}
@media (max-width:1020px){
  .site-header__actions{display:none}
  .nav-toggle{display:flex}
  .site-nav{position:fixed;inset:calc(var(--header-h) + 0px) 0 0 0;background:var(--ink);padding:24px 20px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;overflow:auto}
  .site-nav:has(.open){opacity:1;visibility:visible;transform:none}
  .site-nav__links{flex-direction:column;align-items:stretch;gap:2px}
  .site-nav__links a{font-size:1.25rem;padding:14px 12px;color:#fff;border-radius:12px}
  .site-nav__mobile-only{display:block}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#011F5D 0%,#1B0B55 100%);color:#fff;padding:72px 0 88px}
.hero__bg{position:absolute;inset:0;background:
  radial-gradient(60% 50% at 62% 45%,rgba(122,61,255,.55),transparent 70%),
  radial-gradient(40% 40% at 15% 20%,rgba(2,215,245,.25),transparent 70%),
  radial-gradient(600px 420px at 78% 38%,rgba(2,215,245,.14),transparent 70%),
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/44px 44px,
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/44px 44px;
  mask-image:linear-gradient(to bottom,#000 70%,transparent)}
.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center}
.hero h1{margin:22px 0 18px;color:#fff}
.hero__lead{font-size:1.15rem;color:#C2CDE2;max-width:600px}
.hero .btn-row{margin:28px 0 22px}
.hero__promises{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;color:#DCE5F5;font-size:.95rem}
.hero__promises li{display:flex;align-items:center;gap:7px}
.hero__promises svg{color:var(--cyan)}
.hero__visual{display:flex;justify-content:center}
.smartbox{margin-top:32px;padding:18px;border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.14);box-shadow:0 0 0 1px rgba(0,229,255,.08),0 20px 60px rgba(0,0,0,.35),0 0 60px rgba(0,229,255,.12)}
.smartbox__label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;color:#fff;margin-bottom:10px}
.smartbox__label svg{color:var(--cyan)}
.smartbox textarea{width:100%;min-height:64px;resize:vertical;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(5,10,31,.55);color:#fff;font-size:1rem;line-height:1.5}
.smartbox textarea::placeholder{color:#8C9BB8}
.smartbox textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.25)}
.smartbox__row{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.smartbox__row>.btn{align-self:flex-end}
.smartbox__chips{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.example-chip{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#DCE5F5;border-radius:999px;padding:6px 12px;font-size:.82rem;cursor:pointer;transition:background .2s,border-color .2s}
.example-chip:hover{background:rgba(0,229,255,.12);border-color:rgba(0,229,255,.5);color:#fff}
.hero-reco:empty{display:none}
.hero-reco{margin-top:16px}
.reco-card{background:#fff;color:var(--text);border-radius:16px;padding:20px;box-shadow:var(--shadow-lg);animation:rise .35s ease}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reco-card h3,.reco-card h4{margin:0 0 8px;color:var(--navy)}
.reco-card-header{margin-bottom:10px}
.reco-card>div[style]{display:inline-block;margin:2px 6px 2px 0!important}
.reco-chip{display:inline-flex;margin:3px 6px 3px 0;padding:5px 11px;border-radius:999px;background:rgba(1,162,232,.1);color:var(--blue-deep);font-size:.83rem;font-weight:600}
.reco-steps{display:grid;gap:8px;margin:14px 0}
.reco-step{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.reco-step-number{flex:none;width:24px;height:24px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.78rem;font-weight:700}
.reco-step-content h4,.reco-step-content strong{font-size:.95rem}
.reco-step-content p{margin:0;color:var(--muted)}
.reco-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* Hub diagram */
.hub{width:100%;max-width:520px;height:auto;aspect-ratio:1;overflow:visible}
.hub__orbit{fill:none;stroke:rgba(255,255,255,.08);stroke-dasharray:4 8}
.hub__orbit--inner{stroke:rgba(0,229,255,.14)}
.hub__line{stroke:rgba(0,229,255,.45);stroke-width:1.5;fill:none}
.hub__pulse{fill:var(--cyan);filter:drop-shadow(0 0 6px #02D7F5)}
.hub__node{color:var(--cyan);cursor:default;animation:float 6s ease-in-out infinite;animation-delay:var(--d);transform-box:fill-box;outline:none}
.hub__ring{fill:var(--ink-2);stroke:rgba(0,229,255,.55);stroke-width:1.5;transition:stroke .2s,fill .2s}
.hub__node:hover .hub__ring,.hub__node:focus .hub__ring{fill:#0E2050;stroke:var(--cyan)}
.hub__label{fill:#DCE5F5;font:600 13px var(--font-body)}
.hub__core{outline:none}
.hub__core-ring{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.5;animation:pulse 3s ease-in-out infinite;transform-origin:200px 200px}
.hub__core-label{fill:#fff;font:600 8.5px var(--font-mono);letter-spacing:.12em}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.18);opacity:0}}

/* ---------- Works-with marquee ---------- */
.works-with{display:flex;align-items:center;gap:18px;background:var(--ink-2);color:#BFCBE0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:0 0 0 20px;overflow:hidden}
.works-with__label{flex:none;font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.marquee{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 50s linear infinite}
.marquee__run{display:flex;align-items:center;white-space:nowrap;padding:16px 0}
.marquee__run span{padding:0 22px;font-family:var(--font-mono);font-weight:500;font-size:.86rem}

/* ---------- Stats ---------- */
.stats{background:var(--ink);color:#fff;padding:56px 0;position:relative}
.stats__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.stat{display:flex;flex-direction:column;gap:6px;padding:4px 20px;border-left:1px solid rgba(255,255,255,.12)}
.stat:first-child{border-left:0}
.stat__value{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__label{font-family:var(--font-mono);font-weight:500;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark)}

/* ---------- Cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(1,162,232,.35)}
.card h3{margin:16px 0 8px}
.card p{color:var(--muted);font-size:.98rem}
.icon-tile{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(1,162,232,.3)}
.icon-tile--lg{width:60px;height:60px;border-radius:18px;margin-bottom:18px}
.service-card{display:flex;flex-direction:column}
.service-card p{flex:1}

/* ---------- Industry tabs ---------- */
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.tab-btn{border:1px solid var(--line);background:#fff;color:var(--text);padding:10px 18px;border-radius:999px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s}
.tab-btn:hover{border-color:var(--blue)}
.tab-btn.active,.tab-btn[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 8px 20px rgba(1,31,93,.25)}
.tab-panel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:40px;box-shadow:var(--shadow);animation:rise .3s ease}
.tab-panel h3{font-size:1.6rem}
.tab-panel p{color:var(--muted);font-size:1.05rem}
.tab-panel__chips{list-style:none;display:grid;gap:10px}
.tab-panel__chips li{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--mist);font-weight:600}
.tab-panel__chips svg{color:var(--blue)}

/* ---------- Dark band ---------- */
.band{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--ink),var(--navy-purple));color:#fff;padding:80px 0}
.band__glow,.final-cta__glow{position:absolute;inset:0;background:radial-gradient(500px 300px at 85% 50%,rgba(0,229,255,.25),transparent 70%),radial-gradient(600px 400px at 10% 100%,rgba(122,61,255,.3),transparent 70%)}
.band__inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:40px}
.band h2{color:#fff;max-width:640px}
.band p{color:#C2CDE2;font-size:1.08rem;max-width:560px;margin:0}

/* ---------- Compare ---------- */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1000px;margin:0 auto}
.compare__col{border-radius:var(--r-lg);padding:36px}
.compare__col h3{font-size:1.4rem;margin-bottom:20px}
.compare__col ul{list-style:none;display:grid;gap:14px}
.compare__col li{display:flex;gap:12px;align-items:flex-start}
.compare__col li svg{flex:none;margin-top:3px}
.compare__col--bad{background:var(--mist);color:var(--muted);border:1px solid var(--line)}
.compare__col--bad svg{color:#9AA6BB}
.compare__col--good{background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;border:2px solid transparent;box-shadow:var(--shadow-lg)}
.compare__col--good svg{color:var(--blue)}
.compare__col--good li{font-weight:600}

/* ---------- How it works ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;top:50px;left:12%;right:12%;height:2px;background:linear-gradient(90deg,transparent,rgba(1,162,232,.4),transparent)}
.steps .step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.step__num{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.15rem;margin-bottom:16px;box-shadow:0 0 0 6px #fff,0 8px 20px rgba(1,162,232,.35)}
.steps .step p{color:var(--muted);margin:0;font-size:.97rem}

/* ---------- Feature panel (coverage teaser) ---------- */
.feature-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;background:linear-gradient(135deg,var(--ink),var(--navy-purple));color:#fff;border-radius:var(--r-lg);padding:56px;position:relative;overflow:hidden}
.feature-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 360px at 80% 40%,rgba(0,229,255,.22),transparent 70%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/36px 36px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/36px 36px}
.feature-panel>*{position:relative}
.feature-panel h2{color:#fff}
.feature-panel p{color:#C2CDE2;font-size:1.06rem}
.feature-panel__visual{position:relative}
.mini-plan{width:100%;height:auto;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);border-radius:18px}
.mini-plan__wall{fill:none;stroke:#7E8DAA;stroke-width:3}
.mini-plan__door{stroke:var(--cyan);stroke-width:4}
.mini-plan__cone{fill:rgba(0,229,255,.22);stroke:rgba(0,229,255,.6);stroke-width:1;transform-origin:center;animation:cone 4s ease-in-out infinite}
.mini-plan__cone.c2{animation-delay:.6s}.mini-plan__cone.c3{animation-delay:1.2s}.mini-plan__cone.c4{animation-delay:1.8s}
.mini-plan__cam{fill:#fff;stroke:var(--cyan);stroke-width:3}
.mini-plan__badge{position:absolute;right:16px;bottom:16px;background:#fff;color:var(--navy);border-radius:12px;padding:8px 14px;font-size:.9rem;box-shadow:var(--shadow-lg)}
@keyframes cone{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- Plans ---------- */
.plans,.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.plan,.plan-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow)}
.plan h3,.plan-card h3{font-size:1.5rem;margin:0 0 4px}
.plan__price,.plan-tag{color:var(--muted);font-family:var(--font-mono);font-weight:500;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px}
.plan ul,.plan-features{list-style:none;display:grid;gap:12px;margin-bottom:28px;flex:1}
.plan li,.plan-features li{display:flex;gap:10px;align-items:flex-start;font-size:.97rem}
.plan li svg{flex:none;color:var(--blue);margin-top:4px}
.plan-features li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--grad);margin-top:9px}
.plan .btn,.plan-cta .btn{width:100%}
.plan-body{flex:1}
.plan--popular,.plan-card.popular{background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;border:2px solid transparent;box-shadow:var(--shadow-lg);transform:translateY(-8px)}
.plan__badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:999px;white-space:nowrap}

/* ---------- Brochure gate ---------- */
.gate{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;background:linear-gradient(135deg,#EAF7FD,#F3F6FB 60%,#EEF1FF);border:1px solid var(--line);border-radius:var(--r-lg);padding:48px}
.gate__copy p{color:var(--muted);font-size:1.06rem}
.gate__form{background:#fff;border-radius:var(--r);padding:28px;box-shadow:var(--shadow-lg)}
.gate__download{margin-top:12px}

/* ---------- References + areas ---------- */
.refs{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:28px 32px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
.refs>div:first-child{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--mist);color:var(--blue-deep)}
.refs h2{font-size:1.5rem;margin:0 0 4px}
.refs p{margin:0;color:var(--muted)}
.areas,.areas-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.area,.area-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;color:var(--text);text-decoration:none!important;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
.area:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(1,162,232,.35)}
.area h3,.area-card h3{margin:0 0 6px}
.area p,.area-card p{color:var(--muted);font-size:.95rem;flex:1}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;font-weight:600;font-size:1.03rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--mist);transition:transform .25s,background .25s}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--navy);transform:translate(-50%,-50%)}
.faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item[open] .faq-icon{transform:rotate(45deg);background:rgba(0,229,255,.15)}
.faq-body{padding:0 22px 20px;color:var(--muted)}
.faq-body p{margin:0}

/* ---------- Final CTA ---------- */
.final-cta{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--ink),var(--navy-purple));color:#fff;padding:96px 0;text-align:center}
.final-cta__inner{position:relative}
.final-cta h2{color:#fff;font-size:clamp(2.2rem,4.6vw,3.6rem);max-width:820px;margin:0 auto 14px}
.final-cta p{color:#C2CDE2;font-size:1.12rem;margin-bottom:30px}

/* ---------- Forms ---------- */
.form{display:grid;gap:14px}
.form h3{margin:0}
.field{display:grid;gap:6px}
.field label,.form label{font-weight:600;font-size:.92rem}
input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid #CFD8E6;border-radius:12px;background:#fff;font-size:1rem;transition:border-color .2s,box-shadow .2s}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,162,232,.2)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hp,.hp-input{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.fine,.consent{font-size:.84rem;color:var(--muted)}
.form-msg{font-size:.95rem;font-weight:600}
.form-msg:empty{display:none}
.form-msg.ok{color:#0F7A4A}
.form-msg.err,.error-message{color:#C0262D;font-size:.9rem;font-weight:600}
.error input,.error select,input.error,select.error{border-color:#C0262D}
.quote-section{background:var(--mist)}
.quote-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.quote-side p{color:var(--muted)}
.contact-lines{list-style:none;display:grid;gap:8px;margin:18px 0}
.quote-layout .form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow-lg)}

/* ---------- Project planner ---------- */
.planner-container{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:36px;box-shadow:var(--shadow-lg);max-width:860px;margin:0 auto}
section>.wrap>.planner-container,main>.planner-container{margin:56px auto}
.planner-header h2{text-align:center;font-size:clamp(1.6rem,3vw,2.2rem)}
.planner-progress{position:relative;margin:22px auto 30px;max-width:420px}
.progress-bar{position:absolute;left:18px;right:18px;top:17px;height:3px;background:var(--line);border-radius:3px}
.progress-fill{height:100%;background:var(--grad);border-radius:3px;transition:width .3s}
.progress-steps{position:relative;display:flex;justify-content:space-between}
.progress-steps .step{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--line);font-weight:700;color:var(--muted);transition:all .2s}
.progress-steps .step.current{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(1,162,232,.35)}
.progress-steps .step.done{background:var(--navy);border-color:var(--navy);color:#fff}
.planner-step h3{font-size:1.35rem}
.planner-step>p{color:var(--muted)}
.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:16px 0}
.service-option{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border:1.5px solid var(--line);border-radius:14px;text-align:center;cursor:pointer;transition:all .2s;background:#fff}
.service-option:hover{border-color:var(--blue)}
.service-option input{position:absolute;opacity:0;pointer-events:none}
.service-option .service-icon{font-family:var(--font-mono);font-size:.78rem;font-weight:700;letter-spacing:.06em;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--mist);color:var(--navy)}
.service-option .service-label{font-size:.86rem;font-weight:600;line-height:1.3}
.service-option:has(input:checked){border-color:var(--blue);background:rgba(1,162,232,.06);box-shadow:0 0 0 3px rgba(1,162,232,.15)}
.service-option:has(input:checked) .service-icon{background:var(--grad);color:#fff}
.service-option:has(input:focus-visible){outline:3px solid var(--cyan);outline-offset:2px}
.planner-step .field{margin-bottom:14px}
.planner-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.planner-nav .planner-next,.planner-nav .planner-submit{margin-left:auto}
.planner-success{text-align:center;padding:20px 0}
.planner-success .btn-row{justify-content:center}

/* ---------- Inner page header ---------- */
.page-head{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:64px 0 56px}
.page-head::before{content:"";position:absolute;inset:0;background:radial-gradient(520px 320px at 85% 20%,rgba(0,229,255,.22),transparent 70%),radial-gradient(600px 400px at 0% 100%,rgba(122,61,255,.25),transparent 70%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/44px 44px}
.page-head .wrap{position:relative}
.page-head h1{color:#fff;font-size:clamp(2.2rem,4.4vw,3.6rem);max-width:900px}
.page-head p{color:#C2CDE2;font-size:1.12rem;max-width:720px}
.page-head__eyebrow{font-family:var(--font-mono);font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.86rem;color:var(--muted-dark);margin-bottom:18px}
.crumbs a{color:#C9D4E8}
.crumbs strong{color:#fff;font-weight:600}
.page-head .trust,.page-head + .trust{margin-top:12px}
.trust{display:flex;flex-wrap:wrap;gap:10px 18px;color:var(--muted);font-weight:600;font-size:.95rem}
.page-head .trust{color:#DCE5F5}

/* ---------- Services page ---------- */
.subnav{position:sticky;top:var(--header-h);z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;gap:6px;overflow-x:auto;padding:10px 20px;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:none;padding:7px 14px;border-radius:999px;background:var(--mist);color:var(--navy);font-size:.88rem;font-weight:600;text-decoration:none!important}
.subnav a:hover{background:var(--navy);color:#fff}
.service{padding:56px 0;border-bottom:1px solid var(--line);scroll-margin-top:140px}
.service:nth-of-type(even){background:var(--mist)}
.service-content{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:28px;align-items:start}
.service-content>.service-icon{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;background:var(--grad);color:#fff;font-family:var(--font-mono);font-weight:700;font-size:.9rem;box-shadow:0 10px 24px rgba(1,162,232,.3)}
.service-info h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.service-info>p{color:var(--muted);font-size:1.06rem;max-width:760px}
.check-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin:18px 0 22px}
.check-list li{position:relative;padding-left:28px}
.check-list li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--grad);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.4 14.2-4.3-4.3 1.4-1.4 2.9 2.9 6.1-6.1 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.4 14.2-4.3-4.3 1.4-1.4 2.9 2.9 6.1-6.1 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.service-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Commercial / remote / about / locations ---------- */
.who-we-serve-grid,.scope-grid,.grid,.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.serve-card,.scope-item,.support-card,.grid .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.serve-card h3,.scope-item h3,.support-card h3{margin-top:0}
.serve-card p,.scope-item p,.support-card p{color:var(--muted);margin:0}
.scope-icon,.grid .card .icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--grad);color:#fff;margin-bottom:14px;font-family:var(--font-mono);font-size:.72rem;font-weight:700}
.flow-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:40px}
.flow-step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.flow-step .step-number{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-weight:800;margin-bottom:12px}
.flow-step h3{font-size:1.02rem}
.flow-step p{font-size:.92rem;color:var(--muted);margin:0}
.section .steps:not(:has(.step__num)){counter-reset:rs;grid-template-columns:repeat(3,minmax(0,1fr))}
.section .steps:not(:has(.step__num))::before{display:none}
.section .steps:not(:has(.step__num))>li{counter-increment:rs;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 28px 28px 80px;box-shadow:var(--shadow)}
.section .steps:not(:has(.step__num))>li::before{content:counter(rs);position:absolute;left:24px;top:26px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-weight:800}
.security-note{background:#FFF7E6;border:1px solid #F5D9A0;border-radius:14px;padding:16px 18px;color:#6B4A00}
.grid .card .more{display:inline-flex;margin-top:12px;font-weight:600}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips li,.chips a{padding:6px 12px;border-radius:999px;background:var(--mist);border:1px solid var(--line);font-size:.86rem;color:var(--navy)}

/* ---------- Coverage planner page ---------- */
.coverage-container{max-width:1200px;margin:48px auto 80px;padding:0 20px;display:grid;gap:22px}
.coverage-template-section,.coverage-controls,.coverage-form-container{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.template-options,.template-buttons,.action-buttons,.coverage-actions{display:flex;flex-wrap:wrap;gap:10px}
.coverage-floorplan{background:var(--ink);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-lg);overflow:hidden}
.coverage-floorplan svg,.coverage-floorplan canvas{width:100%;height:auto;display:block;border-radius:14px;touch-action:none}
.coverage-stats{display:flex;flex-wrap:wrap;gap:16px}
.coverage-stats .stat{border:0;padding:14px 18px;background:var(--mist);border-radius:14px;flex:1;min-width:140px}
.coverage-stats .stat-value{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--navy)}
.coverage-stats .stat-label{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.coverage-note{color:var(--muted);font-size:.92rem}
.template-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- Blog ---------- */
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;color:var(--text);text-decoration:none!important;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.post-card h2,.post-card h3{font-size:1.25rem;margin:8px 0}
.post-card p{color:var(--muted)}
.article{max-width:760px;margin:0 auto;padding:56px 20px 80px;font-size:1.08rem}
.article h2{font-size:1.8rem;margin-top:1.6em}
.article h3{font-size:1.3rem;margin-top:1.4em}
.article ul,.article ol{padding-left:1.3em;margin:0 0 1em}
.article li{margin-bottom:.4em}
.article img{border-radius:var(--r)}
.meta{color:var(--muted);font-size:.92rem;margin-bottom:24px}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0}
.tags a,.tags li{padding:5px 12px;border-radius:999px;background:var(--mist);font-size:.85rem}
.cta-box{margin:40px 0;padding:32px;border-radius:var(--r-lg);background:linear-gradient(180deg,#011F5D,#1B0B55);color:#fff;position:relative;overflow:hidden}
.cta-box h2,.cta-box h3{color:#fff;margin-top:0}
.cta-box p{color:#C2CDE2}
.author{display:flex;gap:14px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:var(--r);margin-top:32px;color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{background:linear-gradient(180deg,#011F5D,#1B0B55);color:#AFBBD2;padding:72px 0 28px;font-size:.95rem}
.site-footer a{color:#D5DEEE}
.site-footer a:hover{color:#fff}
.site-footer__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.site-footer__brand .brand{margin-bottom:18px}
.site-footer__brand p{margin-bottom:16px}
.site-footer__247{margin-top:14px;color:#fff;font-weight:600}
.site-footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.site-footer h4{font-family:var(--font-mono);font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:0 0 14px}
.site-footer h4:not(:first-child){margin-top:26px}
.site-footer ul{list-style:none;display:grid;gap:8px}
/* Long addresses must wrap, not widen the page. The three footer columns are
   minmax(0,1fr) tracks, but a grid ITEM keeps min-width:auto, so the <ul> could
   not shrink below the width of the email address and the page picked up about
   11px of horizontal overflow between 1021px and 1079px -- the band where the
   footer is still three across and the page is at its narrowest. Fixed Oct 10
   2026. No font-family is set here, so the font standard is untouched. */
.site-footer__cols>*,.site-footer ul,.site-footer li{min-width:0}
.site-footer a,.site-footer__ai,.site-footer__legal p{overflow-wrap:anywhere}
.site-footer__legal{padding-top:22px;font-size:.84rem;display:grid;gap:6px}
.site-footer__legal p{margin:0}
.site-footer__ai{color:#7F8CA6;font-size:.78rem}

/* ---------- Mobile quick bar ---------- */
.mobile-bar{display:none}

/* ---------- Reveal on scroll (content stays visible without JS) ---------- */
.js .section-head,.js .card,.js .steps .step,.js .plan,.js .area,.js .compare__col{transition:opacity .6s ease,transform .6s ease}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .hero__visual{order:-1;max-width:420px;margin:0 auto}
  .card-grid,.who-we-serve-grid,.scope-grid,.grid,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps::before{display:none}
  .plans,.plans-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .plan--popular,.plan-card.popular{transform:none}
  .areas,.areas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-panel,.gate,.quote-layout,.tab-panel{grid-template-columns:1fr}
  .band__inner{flex-direction:column;align-items:flex-start}
  .site-footer__top{grid-template-columns:1fr}
  .flow-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section .steps:not(:has(.step__num)){grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:16px;padding-bottom:68px}
  .section{padding:64px 0}
  .hero{padding:44px 0 56px}
  .hero__visual{max-width:330px}
  .smartbox__row{flex-direction:column;align-items:stretch}
  .smartbox__row .btn{width:100%}
  .stats__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
  .stat{border-left:0;padding:0}
  .card-grid,.who-we-serve-grid,.scope-grid,.grid,.grid-3,.steps,.compare,.areas,.areas-grid,.flow-steps,.check-list,.two{grid-template-columns:1fr}
  .tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:0 -20px 22px;padding:2px 20px 6px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab-btn{flex:none}
  .tab-panel,.feature-panel,.gate,.compare__col,.planner-container,.quote-layout .form{padding:24px}
  .refs{grid-template-columns:1fr;text-align:left}
  .service-content{grid-template-columns:1fr}
  .site-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .works-with{padding-left:0}
  .works-with__label{display:none}
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(5,10,31,.95);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1)}
  .mobile-bar a{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:600;text-decoration:none!important}
  .mobile-bar .mobile-bar__quote{background:var(--grad);border-color:transparent}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .announcement__track,.marquee__track{transform:none}
}

/* ---------- Fixes: sub-nav, trust lists, coverage tool ---------- */
.subnav{display:block;padding:10px 0}
.subnav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav li{flex:none}
.subnav a{display:inline-block}
.trust ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.trust li{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;background:#fff;border:1px solid var(--line);border-radius:999px;font-weight:600;font-size:.92rem;color:var(--navy);box-shadow:0 4px 14px rgba(5,10,31,.05)}
.trust li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--grad);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.4 14.2-4.3-4.3 1.4-1.4 2.9 2.9 6.1-6.1 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.4 14.2-4.3-4.3 1.4-1.4 2.9 2.9 6.1-6.1 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.section .trust{margin:8px 0 26px}
.section .trust>.wrap{padding:0;max-width:none}
main>.trust{background:var(--mist);border-bottom:1px solid var(--line);padding:16px 0}
.service-content>.service-icon svg,.scope-icon svg{width:30px;height:30px}
.scope-icon svg{width:24px;height:24px}

.coverage-container{margin-top:40px}
.coverage-toolbar{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:flex-end;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;box-shadow:var(--shadow)}
.coverage-group{display:grid;gap:8px}
.coverage-group__label{font-family:var(--font-mono);font-weight:500;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--mist);border:1px solid var(--line);border-radius:999px}
.seg__btn{border:0;background:transparent;padding:9px 16px;border-radius:999px;font:inherit;font-size:.92rem;font-weight:600;color:var(--navy);cursor:pointer;transition:background .2s,color .2s}
.seg__btn:hover{background:#fff}
.seg__btn.active{background:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(5,10,31,.2)}
.seg__btn:focus-visible{outline:3px solid var(--cyan,#2AD6FF);outline-offset:2px}
.coverage-floorplan{padding:10px}
.coverage-floorplan svg{cursor:crosshair;background:#070D26}
.cov-cam:focus{outline:none}
.cov-cam:focus circle:last-of-type{stroke:#FFD54A}
.coverage-help{margin:-8px 0 0;color:var(--muted);font-size:.92rem}
.coverage-controls{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.coverage-stats{flex:1 1 480px}
.coverage-stats .stat{display:grid;gap:4px}
.coverage-stats .stat-value--sm{font-size:1.15rem;line-height:1.3;padding-top:8px}
.coverage-actions{justify-content:flex-end}
.coverage-form-container[hidden]{display:none}
.coverage-form-container{max-width:760px;width:100%;justify-self:center}
.coverage-form h2{margin-top:0}
@media (max-width:760px){
  .coverage-container{margin-top:24px;padding:0 16px}
  .coverage-toolbar{padding:16px}
  .seg__btn{padding:8px 12px;font-size:.86rem}
  .coverage-actions{justify-content:stretch}
  .coverage-actions .btn{flex:1 1 auto}
  .coverage-stats .stat{min-width:0;flex:1 1 30%;padding:12px}
  .coverage-stats .stat-value{font-size:1.5rem}
  .coverage-stats .stat-value--sm{font-size:.95rem}
}

/* ---------- Bigger header logo ---------- */
:root{--header-h:82px}
.site-header .brand img{width:50px;height:50px;border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 24px rgba(1,162,232,.25)}
.site-header .brand{gap:12px}
.site-header .brand__text strong{font-size:1.65rem;letter-spacing:.08em}
.site-header .brand__text small{font-size:.7rem;letter-spacing:.22em;margin-top:5px}
.site-footer .brand img{width:46px;height:46px}
.site-footer .brand__text strong{font-size:1.45rem}
@media (max-width:1240px) and (min-width:1021px){.site-header .brand__text small{display:none}.site-header .brand__text strong{font-size:1.45rem}}
@media (max-width:760px){:root{--header-h:70px}.site-header .brand img{width:42px;height:42px}.site-header .brand__text strong{font-size:1.4rem}.site-header .brand__text small{font-size:.62rem}}
.site-header__inner{max-width:1400px;padding:0 28px}
.site-nav{flex:1 1 auto;min-width:0}
@media (max-width:1440px){.header-phone{display:none}}
/* The six top-level nav items are a mix of <a> (Design Studio, Plans) and <summary>
   (Services, Payments, Products, More). Both have to shrink together or the two kinds
   stop sharing a baseline — which is what "More and Plans do not align" was. */
@media (max-width:1320px) and (min-width:1021px){.site-header .brand__text small{display:none}.site-header .brand__text strong{font-size:1.45rem}.site-nav__links a,.site-nav__links .nav-more>summary{padding:8px 9px}}
@media (max-width:1100px) and (min-width:1021px){.site-nav__links a,.site-nav__links .nav-more>summary{font-size:.88rem;padding:8px 7px}.site-header__actions .btn{padding-left:14px;padding-right:14px}}
.page-head--404{padding:120px 0 140px}
.page-head--404 .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- Round 3 polish ---------- */
@media (min-width:1101px){.who-we-serve-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.service-option .service-icon svg{width:22px;height:22px}
.grid .card .icon svg{width:24px;height:24px}
/* blog post tables */
.post-body table,.prose table,article table{width:100%;border-collapse:collapse;margin:22px 0;font-size:.95rem}
.post-body th,.post-body td,.prose th,.prose td,article th,article td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.post-body thead th,.prose thead th,article thead th{background:var(--mist);color:var(--navy);font-weight:700}
/* mobile menu sits below the header; hide floating buttons while it's open */
body.menu-open #assistant-button,body.menu-open .mobile-bar,body.menu-open #assistant-greeting{display:none!important}
body.menu-open{overflow:hidden}
/* mobile/tablet hero: headline and buttons first, hub graphic after */
@media (max-width:1020px){
  .hero__grid{display:flex;flex-direction:column}
  .hero__copy{order:1}
  .hero__visual{order:2;max-width:320px;margin:8px auto 0}
}

/* New from Piets band (Oct 2026) */
.nfp{background:linear-gradient(180deg,#011F5D,#1B0B55);color:#eef5ff;position:relative;overflow:hidden}
.nfp:before{content:"";position:absolute;inset:0;background:radial-gradient(800px 380px at 80% 0,rgba(2,215,245,.18),transparent 70%);pointer-events:none}
.nfp .wrap{position:relative}
.nfp .section-head h2{color:#fff}.nfp .section-head p{color:#b9c9e2}.nfp .eyebrow{color:#02D7F5}
.nfp__grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.nfp__card{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);text-decoration:none;color:inherit;transition:transform .2s,border-color .2s,background .2s;min-width:0}
.nfp__card:hover{transform:translateY(-2px);border-color:rgba(0,229,255,.55);background:rgba(255,255,255,.08)}
.nfp__ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(100deg,#02D7F5,#016FD6 55%,#7A3DFF);color:#021033}
.nfp__tag{font:600 .7rem "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#02D7F5}
.nfp__card h3{margin:0;font-family:"Bricolage Grotesque",Inter,sans-serif;font-weight:800;font-size:1.45rem;color:#fff;line-height:1.1}
.nfp__card p{margin:0;color:#b9c9e2;flex:1}
.nfp__go{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#7ff3ff}
@media(prefers-reduced-motion:reduce){.nfp__card{transition:none}}

/* White & Purple look — 2026-10-09: cyan->blue stripe like the Services Guide */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#02D7F5,#016FD6 55%,#7A3DFF);z-index:2147483000;pointer-events:none}

/* ---------- Hero stage: hub + 3D phone + particle network (Oct 9 2026) ---------- */
.hero__fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}
.hero>.wrap{position:relative;z-index:1}
.hero__stage{position:relative;width:100%;aspect-ratio:1/1.12;max-width:560px;margin:0 auto}
.hero__stage .hub{position:absolute;left:-6%;top:2%;width:66%;max-width:none;height:auto;filter:drop-shadow(0 0 30px rgba(2,215,245,.18))}
.phone{position:absolute;right:-3%;bottom:2%;width:46%;max-width:280px;aspect-ratio:9/19.4;transform-style:preserve-3d;transform:perspective(1600px) rotateY(-18deg) rotateX(6deg) rotateZ(-2deg);animation:phoneFloat 7s ease-in-out infinite;z-index:2}
.phone::before{content:"";position:absolute;inset:-14%;border-radius:24%;background:conic-gradient(from 0deg,#02D7F5,#7A3DFF,#016FD6,#7A3DFF,#02D7F5);filter:blur(30px);opacity:.42;animation:spinGlow 14s linear infinite;z-index:-1}
.phone__frame{position:absolute;inset:0;border-radius:13%/6%;background:linear-gradient(160deg,#1b2340,#070b1b);box-shadow:0 0 0 1.5px rgba(159,180,224,.35),0 0 0 7px #0a0f22,0 0 0 8px rgba(122,61,255,.35),0 50px 90px -20px rgba(0,0,0,.75),0 0 80px rgba(122,61,255,.28)}
.phone__screen{position:absolute;inset:3.2%;border-radius:11%/5%;overflow:hidden;background:#050A1F}
.phone__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transform:scale(1.03);transition:opacity .9s ease,transform 5s linear}
.phone__screen img.is-on{opacity:1;transform:scale(1)}
.phone__cap{position:absolute;left:0;right:0;bottom:0;padding:34px 10px 24px;background:linear-gradient(180deg,rgba(5,10,31,0),rgba(5,10,31,.92) 55%);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.82rem;line-height:1.2;text-align:center;z-index:2;transition:opacity .4s}
.phone__cap small{display:block;margin-top:3px;font-family:var(--font-mono);font-weight:500;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#02D7F5}
.phone__island{position:absolute;top:2.6%;left:50%;width:34%;height:3.2%;transform:translateX(-50%);background:#02050f;border-radius:999px;z-index:3}
.phone__glare{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 60%,rgba(2,215,245,.08) 100%);pointer-events:none;z-index:4}
.phone__dots{position:absolute;bottom:2.4%;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:4}
.phone__dots i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.35);transition:all .4s}
.phone__dots i.is-on{background:#02D7F5;width:16px}
.hero__tag{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(5,10,31,.74);border:1px solid rgba(2,215,245,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#EAF2FF;font-family:var(--font-mono);font-size:.76rem;font-weight:600;letter-spacing:.04em;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:tagFloat 6s ease-in-out infinite;z-index:3}
.hero__tag i{width:8px;height:8px;border-radius:50%;background:#2EE59D;box-shadow:0 0 0 0 rgba(46,229,157,.7);animation:ping 2s infinite}
.hero__tag--1{left:-2%;bottom:14%;animation-delay:-2s}
.hero__tag--2{right:-6%;top:1%;animation-delay:-4s;border-color:rgba(167,139,250,.6)}
.hero__tag--2 i{background:#B08CFF;box-shadow:0 0 0 0 rgba(176,140,255,.7)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(46,229,157,.6)}70%{box-shadow:0 0 0 9px rgba(46,229,157,0)}100%{box-shadow:0 0 0 0 rgba(46,229,157,0)}}
@keyframes phoneFloat{0%,100%{transform:perspective(1600px) rotateY(-18deg) rotateX(6deg) rotateZ(-2deg) translateY(0)}50%{transform:perspective(1600px) rotateY(-14deg) rotateX(4deg) rotateZ(-1deg) translateY(-14px)}}
@keyframes tagFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes spinGlow{to{transform:rotate(360deg)}}
.hero h1 .grad-text{background:linear-gradient(100deg,#02D7F5 0%,#016FD6 35%,#7A3DFF 55%,#02D7F5 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sweep 7s linear infinite}
@keyframes sweep{to{background-position:220% center}}
@media (prefers-reduced-motion:reduce){.phone,.phone::before,.hero__tag,.hero__tag i,.hero h1 .grad-text,.phone__dots i{animation:none;transition:none}}
@media (max-width:1020px){.hero__visual{width:100%;max-width:460px;margin:8px auto 0}.hero__stage{max-width:460px}}
@media (max-width:760px){.hero__visual{max-width:340px}.hero__stage{max-width:340px}.hero__tag{font-size:.66rem;padding:6px 10px}.hero__tag--2{right:0;top:0}.hero__tag--1{left:0}.phone__cap{font-size:.7rem;padding:26px 8px 18px}.phone__cap small{font-size:.54rem}}