/* ==========================================================================
   Allite Enterprises Ltd — Stockport
   Navy #061F45 · blue #025EBE · green #8CB646 on warm paper.
   Typeface: DM Sans throughout — 800 for headings, 400-500 for body.
   Tokens live in :root here; the REFINEMENT LAYER at the foot of this file
   overrides them and is the current source of truth.
   ========================================================================== */

:root{
  --ink:#061F45;
  --ink-2:#0B2E5E;
  --ink-3:#014E9E;
  --paper:#F7F9FC;
  --sand:#EAF0F7;
  --sand-2:#DCE6F2;
  --line:#D7E1EE;
  --green:#025EBE;
  --green-br:#4C97E4;
  --marigold:#8CB646;
  --white:#fff;
  --muted:#55677F;

  --wrap:1220px;
  --gut:24px;
  --r-s:4px;
  --r-m:10px;
  --r-l:26px;

  --f-display:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-xs:0.78rem;
  --t-s:0.9rem;
  --t-b:1rem;
  --t-lead:clamp(1.01rem,.97rem + .22vw,1.12rem);
  --h4:clamp(1rem,.97rem + .18vw,1.1rem);
  --h3:clamp(1.12rem,1.06rem + .3vw,1.3rem);
  --h2:clamp(1.45rem,1.26rem + .9vw,2.05rem);
  --h1:clamp(2.3rem,1.7rem + 2.7vw,3.85rem);

  --sp:clamp(52px,5.2vw,88px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:var(--t-b);font-weight:400;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:800;line-height:1.16;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:var(--h1);line-height:1.1;letter-spacing:-.028em}
h2{font-size:var(--h2);line-height:1.14;letter-spacing:-.025em}
h3{font-size:var(--h3)}
h4{font-size:var(--h4);font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.1em;max-width:68ch}
ul,ol{margin:0 0 1.1em;padding-left:1.15em}
:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:999}
.skip:focus{left:8px;top:8px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sp)}
.sec--tight{padding-block:clamp(34px,3.2vw,52px)}
.sand{background:var(--sand)}
.tint-g{background:#F1F7E8}
.tint-g .bcell,.tint-g .cap,.tint-g .area,.tint-g .ptag{background:#F1F7E8}
.tint-g .ptag{background:#fff}
.tint-g .media-stack .m2{border-color:#F1F7E8}
.sec--rule{border-top:1px solid var(--line)}
.dark{background:var(--ink);color:#E8EFF8}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark p{color:#C3D3E6}
.lead{font-size:var(--t-lead);color:var(--muted);line-height:1.58;max-width:60ch}
.dark .lead{color:#B3C6DD}
.center{text-align:center}
.center p{margin-inline:auto}

/* --- the fibre rule: repeating tuft motif used as a section marker ------- */
.fibre{height:8px;width:104px;
  background:repeating-linear-gradient(90deg,var(--green) 0 3px,transparent 3px 8px);
  border-radius:1px;margin-bottom:16px}
.dark .fibre{background:repeating-linear-gradient(90deg,var(--marigold) 0 3px,transparent 3px 8px)}
.fibre--c{margin-inline:auto}

.kicker{font-family:var(--f-display);font-weight:600;font-size:var(--t-s);
  color:var(--green);margin:0 0 10px;letter-spacing:.01em}
.dark .kicker{color:var(--marigold)}

/* --- buttons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-display);font-weight:600;font-size:.98rem;line-height:1;
  padding:16px 26px;border-radius:100px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;}
.btn svg{width:15px;height:15px;flex:none}
.btn--primary{background:var(--green);color:#fff}
.btn--primary:hover{background:var(--ink-3)}
.btn--gold{background:var(--marigold);color:var(--ink)}
.btn--gold:hover{background:#9ac653}
.btn--ghost{border-color:currentColor;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.dark .btn--ghost,.hero .btn--ghost,.phero .btn--ghost,.band .btn--ghost,.card--ink .btn--ghost{color:#fff}
.dark .btn--ghost:hover,.hero .btn--ghost:hover,.phero .btn--ghost:hover,.band .btn--ghost:hover,.card--ink .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--sm{padding:12px 20px;font-size:.9rem}
.btn:active{transform:translateY(1px)}
.btns{display:flex;flex-wrap:wrap;gap:14px}

.txtlink{font-family:var(--f-display);font-weight:600;color:var(--green);
  text-decoration:none;border-bottom:2px solid rgba(2,94,190,.28);padding-bottom:2px}
.txtlink:hover{border-bottom-color:var(--green)}

/* --- header ------------------------------------------------------------- */
.utility{background:var(--ink);color:#B3C6DD;font-size:var(--t-xs)}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:42px;flex-wrap:wrap}
.utility ul{display:flex;gap:22px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.utility li{display:flex;align-items:center;gap:7px}
.utility b{color:#fff;font-weight:600}
.utility a{text-decoration:none}
.utility a:hover{color:#fff}
.utility li svg{width:14px;height:14px;stroke:var(--marigold);flex:none}
.utility a{display:flex;align-items:center;gap:7px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--marigold);flex:none}

.hdr{position:sticky;top:0;z-index:70;background:rgba(250,248,244,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:14px;min-height:78px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand-rule{width:1px;height:34px;background:var(--line);flex:none;margin:0 2px}
.ftr .brand-rule{background:rgba(255,255,255,.22);height:38px}
.brand-badge{width:auto;height:42px!important;flex:none}
.ftr .brand-badge{height:48px!important}
@media (max-width:1180px){.brand-rule,.brand-badge{display:none}}
@media (max-width:920px){.brand-rule,.brand-badge{display:block}}
@media (max-width:420px){.brand-txt{display:none}}
.brand-pair{display:flex;align-items:center;gap:14px;flex:none}
.brand-rule{width:1px;height:34px;background:var(--line);flex:none}
.ftr .brand-rule{background:rgba(255,255,255,.22);height:40px}
.brand-badge{height:42px!important;width:auto;flex:none}
.ftr .brand-badge{height:54px!important}
@media (max-width:520px){
  .brand-badge{height:34px!important}
  .brand-rule{height:26px}
  .brand-pair{gap:9px}
  .brand{gap:9px}
}
.ftr .brand-mark{height:52px!important}
.ftr .brand-pair{margin-bottom:18px}
.brand-mark{width:auto;height:40px!important;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--f-display);font-weight:800;font-size:1.12rem;letter-spacing:-.02em;color:var(--ink)}
.brand-sub{font-size:.56rem;letter-spacing:.2em;color:var(--green);font-weight:700;margin-top:5px}

.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav>ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.m-cta{display:none}
.nav a{display:block;padding:9px 9px;white-space:nowrap;text-decoration:none;font-weight:500;
  font-size:.9rem;color:var(--ink);border-radius:6px}
.nav a:hover{color:var(--green);background:rgba(2,94,190,.07)}
.nav .is-current>a{color:var(--green)}
.nav>ul>li.is-current>a{position:relative}
.nav>ul>li.is-current>a::before{content:"";position:absolute;left:9px;right:9px;bottom:3px;height:2px;background:var(--green);border-radius:2px}
.has-sub{position:relative}
.has-sub>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px)}
.sub{position:absolute;top:calc(100% + 8px);left:0;min-width:262px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-m);padding:8px;list-style:none;margin:0;
  box-shadow:0 22px 44px -20px rgba(6,31,69,.35);opacity:0;visibility:hidden;
  transform:translateY(8px);}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{padding:11px 14px;font-size:.92rem;border-radius:7px}
.sub a:hover{background:var(--sand)}
.hdr-cta{display:flex;align-items:center;gap:12px;margin-left:10px;flex:none}
.callbox{display:flex;align-items:center;gap:10px;text-decoration:none}
.callbox .ic{width:38px;height:38px;border-radius:50%;background:var(--green);
  display:grid;place-items:center;flex:none}
.callbox .ic svg{width:17px;height:17px;stroke:#fff}
.callbox small{display:block;font-size:.68rem;color:var(--muted);line-height:1}
.callbox strong{font-family:var(--f-display);font-size:1.05rem;letter-spacing:-.02em}

.burger{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--line);
  background:#fff;border-radius:10px;cursor:pointer;padding:0;place-items:center}
.burger span,.burger span::before,.burger span::after{content:"";display:block;
  width:19px;height:2px;background:var(--ink);border-radius:2px;}
.burger span::before{transform:translateY(-6px)}
.burger span::after{transform:translateY(4px)}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:rotate(-45deg) translateY(-2px)}

@media (max-width:1460px){
  .hdr-cta .btn{display:none}
}
@media (max-width:1200px){
  .callbox small{display:none}
  .nav a{padding:9px 8px;font-size:.88rem}
}
@media (max-width:920px){
  .burger{display:grid}
  .hdr-cta{display:none}
  .nav{position:fixed;inset:78px 0 0;background:var(--paper);margin:0;padding:18px var(--gut) 60px;
    display:none;overflow-y:auto;border-top:1px solid var(--line);z-index:75}
  .nav.open{display:block;}
  
  .nav>ul{display:block}
  .nav>ul>li{border-bottom:1px solid var(--line)}
  .nav a{padding:15px 2px;font-size:1.05rem}
  .has-sub>a::after{float:right;margin-top:8px}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--green);border-radius:0;margin:0 0 12px 4px;padding:0 0 0 12px}
  .nav .m-cta{display:flex !important;gap:12px;margin-top:22px;flex-wrap:wrap}
  .nav .m-cta .btn{flex:1 1 auto}
}

/* --- hero (photo-led) --------------------------------------------------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%!important;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(6,31,69,.96) 0%,rgba(6,31,69,.86) 40%,rgba(6,31,69,.42) 72%,rgba(6,31,69,.55) 100%)}
.hero>.wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(28px,3.4vw,56px);align-items:center;
  padding-top:clamp(44px,4.6vw,68px);padding-bottom:clamp(38px,4vw,58px)}
.hero-tag{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:6px 15px 6px 9px;
  font-size:var(--t-xs);font-weight:500;margin-bottom:16px}
.hero h1{margin-bottom:16px}
.hero h1 em{font-style:normal;color:var(--marigold)}
.hero>.wrap>div>p{color:#C8D8EA;font-size:var(--t-lead);max-width:48ch;margin-bottom:20px}
.hero-usp{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.hero-usp li{display:flex;align-items:center;gap:8px;font-size:.82rem;color:#D9E6F4;font-weight:500;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:100px;padding:6px 14px}
.hero-usp svg{width:15px;height:15px;stroke:var(--green-br);flex:none}
.hero-rating{display:flex;align-items:center;gap:11px;margin-top:20px;font-size:.84rem;color:#B3C6DD}
.hero-rating .stars svg{width:14px;height:14px;fill:var(--marigold)}
.hero-rating .stars{margin:0}

.hero-card{background:#fff;color:var(--ink);border-radius:20px;padding:24px 24px 22px;
  box-shadow:0 34px 70px -28px rgba(0,0,0,.6)}
.hero-card h2{font-size:1.22rem;margin-bottom:4px}
.hero-card>p{font-size:.86rem;color:var(--muted);margin-bottom:16px}
.hcl{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid var(--line)}
.hcl a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);text-decoration:none;font-size:.92rem;font-weight:500}
.hcl a:hover{color:var(--green)}
.hcl b{font-family:var(--f-display);color:var(--green);white-space:nowrap;font-size:.95rem}
.hero-card .btn{width:100%}
.hero-card small{display:block;text-align:center;margin-top:11px;font-size:.72rem;color:var(--muted)}

.hero-strip{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.22)}
.hero-strip ul{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.hero-strip li{padding:15px 22px;display:flex;align-items:center;gap:12px;
  border-left:1px solid rgba(255,255,255,.14);font-size:.78rem;color:#B3C6DD;line-height:1.35}
.hero-strip li:first-child{border-left:0}
.hero-strip svg{width:18px;height:18px;stroke:var(--marigold);flex:none}
.hero-strip b{display:block;color:#fff;font-weight:700;font-size:.86rem;line-height:1.3;white-space:nowrap;margin-bottom:1px}
.hero-strip li span{min-width:0}

@media (max-width:980px){
  .hero>.wrap{grid-template-columns:1fr}
  .hero-strip ul{grid-template-columns:repeat(2,1fr)}
  .hero-strip li:nth-child(3){border-left:0}
  .hero-strip li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.13)}
}
@media (max-width:520px){
  .hero-strip ul{grid-template-columns:1fr}
  .hero-strip li{border-left:0;border-top:1px solid rgba(255,255,255,.13)}
  .hero-strip li:first-child{border-top:0}
}

/* before/after comparison ------------------------------------------------ */
.ba{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3.1;
  box-shadow:0 30px 60px -30px rgba(6,31,69,.55);touch-action:none;background:#1a1a1a}
.ba img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover}
.ba-top{clip-path:inset(0 50% 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;
  transform:translateX(-50%);z-index:3;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:50px;height:50px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(0,0,0,.35);color:var(--ink)}
.ba-grip svg{width:21px;height:21px}
.ba-lbl{position:absolute;top:15px;z-index:4;font-family:var(--f-display);font-weight:600;
  font-size:.72rem;padding:6px 13px;border-radius:100px;background:rgba(6,31,69,.85);color:#fff}
.ba-lbl.l{left:15px}
.ba-lbl.r{right:15px;background:rgba(140,182,70,.95);color:#fff}
.ba-range{position:absolute;inset:0;z-index:5;opacity:0;width:100%;height:100%;cursor:ew-resize;margin:0}
.ba-cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:40px 18px 14px;
  background:linear-gradient(transparent,rgba(0,0,0,.7));font-size:.8rem;color:#E8EFF8}

/* --- trust strip -------------------------------------------------------- */
.trust{border-bottom:1px solid var(--line);background:var(--paper)}
.trust ul{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;margin:0;padding:0}
.trust li{padding:26px 20px;text-align:center;border-left:1px solid var(--line)}
.trust li:first-child{border-left:0}
.trust b{display:block;font-family:var(--f-display);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.3rem);
  letter-spacing:-.04em;color:var(--ink);line-height:1}
.trust span{font-size:var(--t-xs);color:var(--muted)}
@media (max-width:720px){
  .trust ul{grid-template-columns:repeat(2,1fr)}
  .trust li:nth-child(3){border-left:0}
  .trust li:nth-child(n+3){border-top:1px solid var(--line)}
}

/* --- section head ------------------------------------------------------- */
.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:18px 52px;
  align-items:end;margin-bottom:clamp(26px,3vw,44px)}
.shead h2{margin-bottom:0}
.shead p{margin-bottom:0}
.shead--c{display:block;text-align:center;max-width:720px;margin-inline:auto}
@media (max-width:820px){.shead{grid-template-columns:1fr;align-items:start}}

/* --- service index (asymmetric list, not cards) ------------------------- */
.svc-index{border-top:1px solid var(--line)}
.svc-row{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) auto;
  gap:16px 36px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--line);
  text-decoration:none;}
.svc-row:hover,.svc-row:focus-visible{background:rgba(2,94,190,.045);padding-left:18px;padding-right:18px}
.svc-name{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.35rem,1.05rem + 1.1vw,2rem);line-height:1.08;display:flex;align-items:center;gap:16px}
.svc-ic{width:44px;height:44px;border-radius:12px;background:var(--sand);display:grid;place-items:center;flex:none}
.svc-row:hover .svc-ic{background:var(--green)}
.svc-ic svg{width:22px;height:22px;stroke:var(--ink-3);}
.svc-row:hover .svc-ic svg{stroke:#fff}
.svc-thumb{width:92px;height:68px!important;border-radius:11px;object-fit:cover;flex:none;
  filter:saturate(.92);}
.svc-row:hover .svc-thumb{filter:saturate(1.08)}
@media (max-width:520px){.svc-thumb{width:64px;height:52px!important}}
.svc-desc{color:var(--muted);font-size:.98rem;margin:0}
.svc-go{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;flex:none;}
.svc-go svg{width:16px;height:16px;stroke:var(--ink)}
.svc-row:hover .svc-go{background:var(--ink);border-color:var(--ink)}
.svc-row:hover .svc-go svg{stroke:#fff}
.svc-price{font-family:var(--f-display);font-weight:600;color:var(--green);font-size:.88rem;display:block;margin-top:6px}
@media (max-width:760px){
  .svc-row{grid-template-columns:1fr auto;padding:24px 2px}
  .svc-desc{grid-column:1/-1}
}

/* --- split feature ------------------------------------------------------ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,72px);align-items:center}
.split--rev .split-media{order:2}
@media (max-width:880px){.split{grid-template-columns:1fr}.split--rev .split-media{order:0}}
.media-stack{position:relative}
.media-stack img{border-radius:var(--r-l);width:100%}
.media-stack .m2{display:none}
.sand .media-stack .m2{border-color:var(--sand)}
.stat-chip{position:absolute;left:18px;bottom:18px;right:18px;background:rgba(6,31,69,.9);
  backdrop-filter:blur(6px);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:14px;
  text-align:left;color:#fff}
.stat-chip b{font-family:var(--f-display);font-size:1.7rem;font-weight:800;letter-spacing:-.03em;color:var(--marigold);line-height:1;flex:none}
.stat-chip span{font-size:.78rem;color:#C1D2E6;line-height:1.3}
@media (max-width:560px){.stat-chip{left:12px;right:12px;bottom:12px;padding:11px 14px}.stat-chip b{font-size:1.35rem}}

.ticks{list-style:none;padding:0;margin:0 0 28px}
.ticks li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.98rem}
.ticks li:last-child{border-bottom:0}
.ticks svg{width:19px;height:19px;stroke:var(--green);flex:none;margin-top:3px}
.dark .ticks li{border-color:rgba(255,255,255,.14)}
.dark .ticks svg{stroke:var(--marigold)}

/* --- process (a real sequence, so numbers earn their place) ------------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative;list-style:none;padding:0;margin:0}
.steps--4{grid-template-columns:repeat(4,1fr)}
.steps::before{content:"";position:absolute;top:38px;left:10%;right:10%;height:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 8px,transparent 8px 16px)}
.step{position:relative;text-align:center}
.step-n{width:76px;height:76px;margin:0 auto 18px;border-radius:50%;background:var(--ink-2);
  border:2px solid rgba(255,255,255,.2);display:grid;place-items:center;position:relative}
.step-n svg{width:30px;height:30px;stroke:var(--marigold)}
.step-n b{position:absolute;right:-4px;bottom:-4px;width:28px;height:28px;border-radius:50%;
  background:var(--marigold);color:var(--ink);font-family:var(--f-display);font-size:.85rem;
  display:grid;place-items:center;border:3px solid var(--ink)}
.step h3{font-size:1.05rem;margin-bottom:6px}
.step p{font-size:.86rem;margin:0;color:#B4C7DE}
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr);gap:34px 20px}
  .steps--4{grid-template-columns:repeat(4,1fr)}
.steps::before{display:none}
}
@media (max-width:420px){.steps{grid-template-columns:1fr}}

/* --- price list (a list with rules, not a card grid) -------------------- */
.plist{border-top:2px solid var(--ink)}
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 34px;align-items:baseline;
  padding:24px 0;border-bottom:1px solid var(--line)}
.prow h3{margin:0 0 6px;font-size:1.3rem}
.prow p{margin:0;color:var(--muted);font-size:.94rem;max-width:62ch}
.prow .amt{font-family:var(--f-display);font-weight:700;font-size:1.9rem;letter-spacing:-.04em;
  color:var(--green);white-space:nowrap;text-align:right;line-height:1}
.prow .amt small{display:block;font-size:.68rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:5px}
.ptags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.ptag{font-size:.74rem;background:var(--sand);border-radius:100px;padding:4px 11px;color:var(--ink-2)}
.sand .ptag{background:#fff}

/* --- reviews ------------------------------------------------------------ */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rgrid--2{grid-template-columns:1fr 1fr}
@media (max-width:900px){.rgrid,.rgrid--2{grid-template-columns:1fr}}
.review{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px}
.review--big{background:var(--ink);color:#fff;border-color:var(--ink)}
.review--big p{color:#D3E1F1}
.stars{display:flex;gap:3px;margin-bottom:14px}
.stars svg{width:16px;height:16px;fill:var(--marigold)}
.review p{font-size:1rem;margin-bottom:20px}
.review--big p{font-size:1.2rem;line-height:1.5}
.rby{display:flex;align-items:center;gap:12px;font-size:.86rem}
.rav{width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:700;flex:none}
.rby b{display:block;font-weight:600}
.rby span{color:var(--muted);font-size:.78rem}
.review--big .rby span{color:#9BB0C9}

/* --- offer panel -------------------------------------------------------- */
.offer{background:var(--ink);color:#fff;border-radius:var(--r-l);padding:clamp(28px,3.6vw,44px);position:relative;overflow:hidden}
.offer::before{content:"";position:absolute;width:280px;height:280px;right:-90px;top:-110px;border-radius:50%;
  background:radial-gradient(circle,rgba(140,182,70,.28),transparent 70%)}
.offer>*{position:relative}
.offer .amt{font-family:var(--f-display);font-size:clamp(2.2rem,1.6rem + 2.4vw,3.2rem);
  letter-spacing:-.045em;color:var(--marigold);line-height:1;margin:6px 0 4px}
.code{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:2px dashed rgba(255,255,255,.34);border-radius:12px;padding:13px 18px;margin:20px 0 16px;
  font-family:var(--f-display);font-weight:600}
.code button{background:none;border:0;color:var(--marigold);font:inherit;cursor:pointer;text-decoration:underline}

/* --- benefits w/ icons -------------------------------------------------- */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.bcell{background:var(--paper);padding:30px 26px}
.sand .bcell{background:var(--sand)}
.bcell svg{width:30px;height:30px;stroke:var(--green);margin-bottom:16px}
.bcell h3{font-size:1.08rem;margin-bottom:8px}
.bcell p{font-size:.92rem;color:var(--muted);margin:0}
@media (max-width:880px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.bgrid{grid-template-columns:1fr}}

/* --- FAQ ---------------------------------------------------------------- */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(26px,3.6vw,64px);align-items:start}
@media (max-width:900px){.faq-wrap{grid-template-columns:1fr}}
.faq-intro{position:sticky;top:104px}
.faq-intro h2{margin-bottom:12px}
.faq-intro p{margin-bottom:20px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq details[open] summary{color:var(--green)}
.faq summary{list-style:none;cursor:pointer;padding:18px 44px 18px 0;position:relative;
  font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:-.012em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:10px;top:25px;width:10px;height:10px;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(45deg);}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 40px 20px 0;color:var(--muted);font-size:.94rem}
.faq .ans p:last-child{margin-bottom:0}

/* --- areas -------------------------------------------------------------- */
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:1px}
.area{background:var(--paper);padding:16px 18px;display:flex;align-items:center;gap:10px;
  font-size:.94rem;text-decoration:none;box-shadow:0 0 0 1px var(--line)}
.sand .area{background:var(--sand)}
.area:hover{background:var(--ink);color:#fff}
.area::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.area:hover::before{background:var(--marigold)}

/* --- page hero ---------------------------------------------------------- */
.phero{background:var(--ink);color:#fff;padding-block:clamp(48px,6vw,84px);position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;width:640px;height:640px;right:-180px;top:-320px;border-radius:50%;
  background:radial-gradient(circle,rgba(76,151,228,.26),transparent 68%)}
.phero .wrap{position:relative}
.phero h1{max-width:22ch;margin-bottom:14px}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4vw,60px);align-items:end}
@media (max-width:900px){.phero-grid{grid-template-columns:1fr}}
.phero-facts{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:rgba(255,255,255,.16);border-radius:16px;overflow:hidden}
.phero-facts li{background:#0B2E5E;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:.9rem;color:#C1D2E6}
.phero-facts b{font-family:var(--f-display);color:#fff;font-size:1rem;text-align:right}
.phero p{color:#C1D2E6;font-size:var(--t-lead);max-width:60ch;margin-bottom:0}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:var(--t-xs);color:#8FA5C0;margin-bottom:20px;list-style:none;padding:0}
.crumb a{text-decoration:none;color:#B3C6DD}
.crumb a:hover{color:#fff}
.crumb li+li::before{content:"/";margin-right:8px;color:#5A7593}
.phero-cta{margin-top:28px}

/* --- content prose ------------------------------------------------------ */
.prose h2{margin-top:1.6em;font-size:clamp(1.45rem,1.2rem + 1vw,2rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.5em;font-size:1.22rem}
.prose ul li{margin-bottom:8px}
.prose blockquote{margin:32px 0;padding:22px 26px;background:var(--sand);border-left:4px solid var(--green);
  border-radius:0 12px 12px 0;font-size:1.05rem}
.prose blockquote p:last-child{margin-bottom:0}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(34px,4vw,64px);align-items:start}
@media (max-width:960px){.layout{grid-template-columns:1fr}}
.aside{position:sticky;top:104px;display:grid;gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}
.card h3{font-size:1.12rem}
.card--ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.card--ink p{color:#C1D2E6}
.slist{list-style:none;padding:0;margin:0}
.slist a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--line);text-decoration:none;font-weight:500;font-size:.95rem}
.slist li:last-child a{border-bottom:0}
.slist a:hover{color:var(--green)}
.slist svg{width:14px;height:14px;stroke:currentColor;flex:none}

/* --- forms -------------------------------------------------------------- */
.form{display:grid;gap:16px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.frow{grid-template-columns:1fr}}
.field label{display:block;font-size:.84rem;font-weight:600;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border:1px solid var(--line);
  border-radius:10px;font:inherit;font-size:.96rem;background:#fff;color:var(--ink)}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);outline:none;
  box-shadow:0 0 0 3px rgba(2,94,190,.16)}
.dark .field label{color:#D9E6F4}
.form-note{font-size:var(--t-xs);color:var(--muted)}

/* --- contact tiles ------------------------------------------------------ */
.ctiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:900px){.ctiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ctiles{grid-template-columns:1fr}}
.ctile{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.ctile svg{width:24px;height:24px;stroke:var(--green);margin-bottom:14px}
.ctile h3{font-size:1rem;margin-bottom:6px}
.ctile a,.ctile p{font-size:.95rem;color:var(--muted);text-decoration:none;margin:0}
.ctile a:hover{color:var(--green)}
.map-embed{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);min-height:340px;
  background:var(--sand);display:grid;place-items:center}
.map-embed iframe{width:100%;height:100%;min-height:340px;border:0;display:block}

/* --- blog --------------------------------------------------------------- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px}
.post{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--line);
  border-radius:20px;overflow:hidden}
.post:hover{border-color:var(--ink-3)}
.post img{aspect-ratio:16/10;object-fit:cover;width:100%}
.post-body{padding:24px}
.post .meta{font-size:var(--t-xs);color:var(--green);font-weight:600;margin-bottom:9px}
.post h3{font-size:1.14rem;margin-bottom:9px}
.post p{font-size:.92rem;color:var(--muted);margin:0}
.post--lead{grid-column:1/-1;flex-direction:row}
.post--lead img{width:46%;aspect-ratio:auto}
.post--lead .post-body{padding:clamp(24px,3vw,40px);align-self:center}
.post--lead h3{font-size:clamp(1.3rem,1.05rem + 1vw,1.8rem)}
@media (max-width:760px){.post--lead{flex-direction:column}.post--lead img{width:100%;aspect-ratio:16/10}}

/* --- CTA band ----------------------------------------------------------- */
.band{background:var(--ink-2);color:#fff;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 12px)}
.band .wrap{position:relative;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  padding-block:clamp(38px,4.4vw,60px)}
.band h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);margin-bottom:8px}
.band p{margin:0;color:#BDD4CE;font-size:.98rem}
@media (max-width:820px){.band .wrap{grid-template-columns:1fr}}

/* --- footer ------------------------------------------------------------- */
.ftr{background:var(--ink);color:#A8BCD3;font-size:.89rem}
.ftr-top{display:grid;grid-template-columns:1.45fr .92fr 1.05fr .82fr 1.25fr;
  gap:34px 30px;padding-block:clamp(40px,4.4vw,60px);align-items:start}
@media (max-width:1120px){.ftr-top{grid-template-columns:1.3fr 1fr 1fr;gap:32px 28px}
 .ftr-top>div:first-child{grid-column:1/-1}}
@media (max-width:760px){.ftr-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr-top{grid-template-columns:1fr;gap:32px}}
.ftr h4{color:#fff;font-size:.85rem;font-weight:700;margin-bottom:14px;letter-spacing:.02em}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ftr a{text-decoration:none}
.ftr a:hover{color:var(--marigold)}
.ftr .brand-name{color:#fff}
.ftr p{font-size:.88rem;color:#9BB0C9;max-width:52ch;line-height:1.6}
.fcontact li{display:flex;gap:11px;align-items:flex-start}
.fcontact svg{width:16px;height:16px;stroke:var(--marigold);flex:none;margin-top:4px}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center}
.socials svg{width:16px;height:16px;fill:currentColor}
.socials a:hover{background:var(--marigold);border-color:var(--marigold);color:var(--ink)}
.nl{display:flex;gap:8px;margin-top:14px}
.nl input{flex:1;padding:13px 15px;border-radius:10px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:.9rem;min-width:0}
.nl input::placeholder{color:#8397B0}
.nl button{background:var(--marigold);border:0;border-radius:10px;padding:0 20px;
  font-family:var(--f-display);font-weight:600;color:var(--ink);cursor:pointer}
.ftr-btm{border-top:1px solid rgba(255,255,255,.13);padding-block:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem}
.ftr-btm ul{display:flex;gap:20px}

/* --- sticky mobile call bar --------------------------------------------- */
.mobar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--line);box-shadow:0 -8px 24px rgba(6,31,69,.16)}
.mobar a{padding:15px 8px;text-decoration:none;font-family:var(--f-display);
  font-weight:600;font-size:.92rem;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:8px}
.mobar a svg{width:16px;height:16px;stroke:currentColor;flex:none}
.mobar a+a{background:var(--marigold);color:var(--ink)}
@media (max-width:720px){.mobar{display:grid}body{padding-bottom:54px}}


/* --- small-screen refinements ------------------------------------------- */
@media (max-width:820px){
  .utility .wrap ul:first-child li:nth-child(n+2){display:none}
}
@media (max-width:600px){
  .utility{display:none}
  .badge-float{position:static;max-width:none;margin-top:14px;box-shadow:none;
    border:1px solid var(--line);background:#fff}
  .ba-cap{padding-top:34px;font-size:.76rem}
  .hero-usp{gap:8px 20px}
  .prow{grid-template-columns:1fr}
  .prow .amt{text-align:left;font-size:1.6rem}
  .prow .amt small{display:inline;margin-left:8px}
  .band .btns .btn{flex:1 1 100%}
  .ftr-btm{flex-direction:column;gap:10px}
  .ftr-btm ul{flex-wrap:wrap;gap:14px}
  .svc-name{font-size:1.15rem;gap:12px}
  .svc-ic{width:38px;height:38px}
}
@media (max-width:400px){
  .brand-sub{letter-spacing:.16em}
}


/* --- mega dropdown ------------------------------------------------------ */
.sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px}
.sub-col h4{font-size:.7rem;letter-spacing:.12em;color:var(--green);margin:6px 0 6px 12px;
  font-family:var(--f-body);font-weight:700;text-transform:uppercase}
.sub-col ul{list-style:none;margin:0;padding:0}
.sub a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 12px;border-radius:8px;font-size:.9rem;white-space:nowrap}
.sub a em{font-style:normal;font-size:.76rem;color:var(--muted);font-weight:500}
.sub a:hover{background:var(--sand)}
.sub a:hover em{color:var(--ink-3)}
.sub-all{display:flex !important;justify-content:flex-start !important;gap:8px !important;
  margin-top:6px;border-top:1px solid var(--line);padding-top:12px !important;
  color:var(--green) !important;font-weight:600}
.sub-all svg{width:13px;height:13px;stroke:currentColor}
.sub-all:hover{background:transparent !important}

/* --- gallery ------------------------------------------------------------ */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery figure{margin:0;overflow:hidden;border-radius:12px;position:relative;background:var(--ink)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  }
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;
  background:linear-gradient(transparent,rgba(6,31,69,.85));color:#fff;font-size:.74rem;
  font-weight:600;letter-spacing:.01em}
@media (max-width:860px){.gallery{grid-template-columns:repeat(2,1fr);gap:10px}}

/* --- division cards ----------------------------------------------------- */
.divisions{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:880px){.divisions{grid-template-columns:1fr}}
.division{position:relative;border-radius:18px;overflow:hidden;background:#fff;
  border:1px solid var(--line);display:flex;flex-direction:column;text-decoration:none;
  }
.division:hover{border-color:var(--green);transform:translateY(-3px);
  box-shadow:0 24px 48px -28px rgba(6,31,69,.5)}
.division-media{position:relative;display:block;overflow:hidden}
.division img{width:100%;aspect-ratio:16/7.5;object-fit:cover;}
.division:hover img{transform:scale(1.05)}
.division-eyebrow{position:absolute;left:16px;top:16px;z-index:2;display:inline-flex;
  align-items:center;gap:8px;background:rgba(6,31,69,.9);color:#fff;font-size:.71rem;
  font-weight:700;letter-spacing:.03em;padding:7px 14px;border-radius:100px}
.division-eyebrow svg{width:13px;height:13px;stroke:var(--marigold)}
.division-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.division h3{font-size:clamp(1.18rem,1.04rem + .55vw,1.45rem);margin-bottom:8px;color:var(--ink)}
.division p{color:var(--muted);font-size:.92rem;margin:0 0 16px}
.division .chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.division .chips span{font-size:.75rem;background:var(--sand);color:var(--ink-2);
  padding:5px 12px;border-radius:100px;font-weight:500}
.tint-g .division .chips span{background:#EDF4E2}
.division .go{margin-top:auto;font-weight:700;color:var(--green);font-size:.9rem;
  display:inline-flex;align-items:center;gap:8px}
.division .go svg{width:14px;height:14px;stroke:currentColor}
.division:hover .go{gap:12px}

/* --- capability list (trading page) ------------------------------------- */
.caps{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
@media (max-width:760px){.caps{grid-template-columns:1fr}}
.cap{background:#fff;padding:26px}
.sand .cap{background:var(--sand)}
.cap-h{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.cap-h svg{width:22px;height:22px;stroke:var(--green);flex:none}
.cap h3{font-size:1.05rem;margin:0}
.cap p{font-size:.92rem;color:var(--muted);margin:0 0 12px}
.cap ul{margin:0;padding-left:18px;font-size:.89rem;color:var(--muted)}
.cap li{margin-bottom:5px}

/* --- inline quote form on dark ------------------------------------------ */
.quote-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,3.4vw,56px);align-items:center}
@media (max-width:880px){.quote-panel{grid-template-columns:1fr}}
.dark .field input,.dark .field select,.dark .field textarea{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
.dark .field input::placeholder,.dark .field textarea::placeholder{color:#8397B0}
.dark .form-note{color:#9BB0C9}

/* --- Allite Cleaning badge lockup --------------------------------------- */
.badge-logo{width:clamp(96px,11vw,138px);height:auto;flex:none;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.35))}
.phero-lockup{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.phero-lockup b{display:block;font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.phero-lockup span{font-size:.8rem;color:#A8BCD3}
@media (max-width:560px){.phero-lockup{gap:14px}.badge-logo{width:82px}}


/* --- review slider ------------------------------------------------------- */
.rslider{position:relative}
.rtrack{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 44px)/3);
  gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:6px;scrollbar-width:none}
.rtrack::-webkit-scrollbar{display:none}
.rtrack>*{scroll-snap-align:start}
@media (max-width:980px){.rtrack{grid-auto-columns:calc((100% - 22px)/2)}}
@media (max-width:660px){.rtrack{grid-auto-columns:88%}}
.rnav{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;align-items:center}
.rnav .count{margin-right:auto;font-size:.85rem;color:var(--muted)}
.rbtn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.rbtn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.rbtn svg{width:16px;height:16px;stroke:currentColor}
.rbtn[disabled]{opacity:.35;cursor:default}
.rbtn[disabled]:hover{background:#fff;border-color:var(--line);color:var(--ink)}
.review{height:100%}
.rslider .review{background:#fff;border:1px solid var(--line)}
.rslider .review--big{background:var(--ink);border-color:var(--ink)}

/* --- section eyebrow band ----------------------------------------------- */
.accent-top{border-top:3px solid var(--marigold)}

/* --- stat row under a feature image ------------------------------------- */
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:14px}
.statrow div{background:#fff;padding:15px 12px;text-align:center}
.statrow b{display:block;font-weight:800;font-size:1.45rem;color:var(--green);
  letter-spacing:-.03em;line-height:1.1}
.statrow span{font-size:.73rem;color:var(--muted);display:block;margin-top:3px}
.split-media>img{border-radius:18px;box-shadow:0 22px 46px -30px rgba(6,31,69,.55)}

/* --- photo cards -------------------------------------------------------- */
.pcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pcards--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.pcards,.pcards--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pcards,.pcards--3{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;text-decoration:none;
  }
.pcard:hover{border-color:var(--green);transform:translateY(-3px);
  box-shadow:0 20px 40px -26px rgba(6,31,69,.45)}
.pcard-media{position:relative;display:block;overflow:hidden}
.pcard img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  }
.pcard:hover img{transform:scale(1.05)}
.pcard .tag{position:absolute;left:12px;bottom:12px;background:rgba(6,31,69,.92);color:#fff;
  font-weight:700;font-size:.75rem;padding:5px 12px;border-radius:100px}
.pcard-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.pcard h3{font-size:1.02rem;margin-bottom:7px}
.pcard p{font-size:.87rem;color:var(--muted);margin:0 0 14px}
.pcard .go{margin-top:auto;font-weight:700;font-size:.85rem;color:var(--green);
  display:flex;align-items:center;gap:7px}
.pcard .go svg{width:13px;height:13px;stroke:currentColor}

/* --- paired feature images (replaces the overlapping stack) -------------- */
.media-pair{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;
  gap:12px}
.media-pair img{border-radius:16px;width:100%;object-fit:cover}
.media-pair img:first-child{grid-row:1/3;aspect-ratio:3/4}
.media-pair img:nth-child(2){aspect-ratio:4/3}
.media-pair .note{background:var(--ink);color:#fff;border-radius:16px;padding:18px 20px;
  display:flex;flex-direction:column;justify-content:center}
.media-pair .note b{display:block;font-weight:800;font-size:1.35rem;color:var(--marigold);
  line-height:1.1;margin-bottom:4px}
.media-pair .note span{font-size:.8rem;color:#C1D2E6;line-height:1.45}
@media (max-width:560px){.media-pair{grid-template-columns:1fr 1fr}
  .media-pair img:first-child{grid-row:auto;aspect-ratio:4/3}}

@media (max-width:520px){
  .brand-badge{height:34px!important}
  .brand-rule{height:26px}
  .brand-name{font-size:1rem}
}

/* =========================================================================
   v3 — richer colour, modern service / price / feature blocks
   ========================================================================= */

/* the review avatar letter was being greyed out by `.rby span` */
.rby .rav{color:#fff}

/* --- coloured section variants ------------------------------------------ */
.grad{background:linear-gradient(135deg,#025EBE 0%,#0B2E5E 55%,#061F45 100%);color:#E8EFF8}
.grad h2,.grad h3,.grad h4{color:#fff}
.grad p{color:#C1D2E6}
.grad .fibre{background:repeating-linear-gradient(90deg,var(--marigold) 0 3px,transparent 3px 8px)}
.grad .kicker{color:var(--marigold)}

/* --- specialist service cards (overlay, asymmetric) --------------------- */
.scards{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media (max-width:900px){.scards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.scards{grid-template-columns:1fr}}
.scard{grid-column:span 2;position:relative;display:flex;align-items:flex-end;
  min-height:250px;border-radius:16px;overflow:hidden;text-decoration:none;color:#fff;
  isolation:isolate;}
.scard--lead{grid-column:span 3;min-height:300px}
@media (max-width:900px){.scard,.scard--lead{grid-column:span 1;min-height:230px}}
.scard img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;
  z-index:-2;}
.scard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,31,69,.15) 0%,rgba(6,31,69,.55) 45%,rgba(6,31,69,.94) 100%)}
.scard:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(0,0,0,.7)}
.scard:hover img{transform:scale(1.06)}
.scard-body{padding:20px 22px 22px;width:100%}
.scard .price{display:inline-block;background:var(--marigold);color:#08213f;font-weight:800;
  font-size:.76rem;padding:5px 12px;border-radius:100px;margin-bottom:10px}
.scard h3{color:#fff;font-size:clamp(1.1rem,1rem + .5vw,1.4rem);margin-bottom:6px}
.scard p{color:#D3E1F1;font-size:.86rem;margin:0 0 12px}
.scard .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.84rem;
  color:var(--marigold)}
.scard .go svg{width:13px;height:13px;stroke:currentColor}
.scard:hover .go{gap:12px}

/* --- feature block: image + floating stat bar + benefit grid ------------- */
.feature{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,4vw,66px);align-items:center}
@media (max-width:940px){.feature{grid-template-columns:1fr}}
.feature-media{position:relative;padding-bottom:46px}
.feature-media>img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:20px;
  box-shadow:0 26px 54px -30px rgba(6,31,69,.6)}
.feature-media .statbar{position:absolute;left:18px;right:18px;bottom:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-radius:14px;overflow:hidden;box-shadow:0 18px 36px -20px rgba(6,31,69,.5)}
.feature-media .statbar div{background:#fff;padding:14px 8px;text-align:center}
.feature-media .statbar b{display:block;font-weight:800;font-size:1.35rem;color:var(--green);
  line-height:1.1;letter-spacing:-.03em}
.feature-media .statbar span{font-size:.7rem;color:var(--muted)}
.tickgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 24px}
@media (max-width:620px){.tickgrid{grid-template-columns:1fr}}
.tickgrid li{list-style:none;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:16px 17px}
.tickgrid .ic{width:32px;height:32px;border-radius:9px;background:var(--sand);
  display:grid;place-items:center;margin-bottom:10px}
.tickgrid .ic svg{width:16px;height:16px;stroke:var(--green)}
.tickgrid b{display:block;font-weight:800;font-size:.93rem;margin-bottom:4px}
.tickgrid p{margin:0;font-size:.84rem;color:var(--muted)}

/* --- price cards --------------------------------------------------------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.pgrid{grid-template-columns:1fr}}
.pc{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  text-decoration:none;color:var(--ink);
  padding:24px 22px 22px;overflow:hidden;display:flex;flex-direction:column;
  }
.pc:hover{transform:translateY(-3px);border-color:var(--green);
  box-shadow:0 22px 44px -28px rgba(6,31,69,.45)}
.pc::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--green)}
.pc:nth-child(3n+2)::before{background:var(--marigold)}
.pc:nth-child(3n+3)::before{background:var(--ink)}
.pc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:8px}
.pc h3{font-size:1.05rem;margin:0}
.pc .amt{font-weight:800;font-size:1.65rem;color:var(--green);letter-spacing:-.035em;
  line-height:1;text-align:right;white-space:nowrap}
.pc .amt small{display:block;font-size:.66rem;font-weight:500;color:var(--muted);
  letter-spacing:0;margin-top:4px}
.pc>p{font-size:.86rem;color:var(--muted);margin:0 0 14px}
.pc ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:7px}
.pc li{display:flex;gap:8px;align-items:flex-start;font-size:.83rem;color:var(--ink-2)}
.pc li svg{width:14px;height:14px;stroke:var(--green);flex:none;margin-top:3px}
.pc .go{margin-top:auto;font-weight:700;font-size:.84rem;color:var(--green);
  display:inline-flex;align-items:center;gap:7px}
.pc .go svg{width:13px;height:13px;stroke:currentColor}

.pc,.pc *{text-decoration:none}
.scard,.scard *{text-decoration:none}

/* review avatar — `.rby span` was overriding both its colour and its size */
.rby .rav,.review .rav{color:#fff!important;font-size:1rem!important;font-weight:800!important;
  background:linear-gradient(140deg,var(--green),var(--ink-3))}
.review--big .rav{background:linear-gradient(140deg,var(--marigold),#6f9a34);color:#0a2447!important}

/* Light cards sitting on a dark or gradient section must keep their own
   text colours — the section-level heading colour was bleeding into them
   and rendering card titles white-on-white. */
.grad .pc,.dark .pc,.grad .pcard,.dark .pcard,.grad .card,.grad .pitem,
.grad .bcell,.dark .bcell,.grad .cap,.dark .cap,.grad .review,.dark .review{color:var(--ink)}
.grad .pc h3,.dark .pc h3,.grad .pcard h3,.dark .pcard h3,.grad .card h3,
.grad .bcell h3,.dark .bcell h3,.grad .cap h3,.dark .cap h3,
.grad .pitem h3,.grad .review h3,.dark .review h3{color:var(--ink)}
.grad .pc p,.dark .pc p,.grad .pcard p,.dark .pcard p,.grad .bcell p,.dark .bcell p,
.grad .cap p,.dark .cap p,.grad .pitem>p,.grad .review p,.dark .review p{color:var(--muted)}
.dark .review--big,.grad .review--big{color:#fff}
.dark .review--big p,.grad .review--big p{color:#D3E1F1}
.dark .review--big h3,.grad .review--big h3{color:#fff}

/* Outline buttons need to invert on the gradient too */
.grad .btn--ghost{color:#fff}
.grad .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* --- accessible-only text ------------------------------------------------ */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- form states --------------------------------------------------------- */
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.field input.is-invalid,.field select.is-invalid,.field textarea.is-invalid{
  border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.14)}
.form-status{min-height:1.2em;font-size:.92rem;font-weight:600;margin:4px 0 0}
.form-status.is-pending{color:var(--muted)}
.form-status.is-success{color:var(--green)}
.form-status.is-error{color:#C0392B}
.form button[type="submit"][disabled]{opacity:.65;cursor:progress}

/* =========================================================================
   IMAGE ROUNDING
   Most photos already sit inside a rounded, clipping card. These are the
   ones that were still rendering with square corners.
   ========================================================================= */
.phero-media img{border-radius:20px;box-shadow:0 26px 54px -32px rgba(6,31,69,.7)}
.prose img,.card img,.aside img{border-radius:16px}
.post img{border-radius:14px}
.statrow img{border-radius:10px}

/* =========================================================================
   MOTION
   Entrance animations are opt-in: the html element only gets .allite-anim
   when JavaScript runs AND the visitor hasn't asked for reduced motion.
   Without that class nothing is hidden, so content can never be trapped
   invisible if a script fails.
   ========================================================================= */
html.allite-anim [data-reveal]{
  opacity:0;
  transform:translateY(20px);
}
html.allite-anim [data-reveal="left"]{transform:translateX(-24px)}
html.allite-anim [data-reveal="right"]{transform:translateX(24px)}
html.allite-anim [data-reveal="zoom"]{transform:scale(.965)}
html.allite-anim [data-reveal].is-in{opacity:1;transform:none}

/* hero copy lifts in on first paint */
html.allite-anim .hero>.wrap>div>*{
  }
html.allite-anim .hero>.wrap>div>*:nth-child(2){}
html.allite-anim .hero>.wrap>div>*:nth-child(3){}
html.allite-anim .hero>.wrap>div>*:nth-child(4){}
html.allite-anim .hero>.wrap>div>*:nth-child(5){}
html.allite-anim .hero-card{}


/* --- hover polish -------------------------------------------------------- */
.bcell,.ctile,.cap,.review,.statrow div{
  }
.bcell:hover,.ctile:hover,.cap:hover{
  transform:translateY(-3px);box-shadow:0 18px 38px -26px rgba(6,31,69,.45)}
.rslider .review:hover{transform:translateY(-3px);
  box-shadow:0 20px 42px -28px rgba(6,31,69,.45)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.statrow div:hover{background:var(--sand)}
.area{}
.area:hover{transform:translateX(3px)}
.slist a{}
.slist a:hover{padding-left:5px}
.fcontact a,.ftr ul a{}
.ftr ul a:hover{padding-left:4px}

/* answers ease open instead of snapping */
.faq details[open] .ans{}


/* the section rule above each heading draws itself in */
html.allite-anim [data-reveal].is-in .fibre{}


@media (prefers-reduced-motion:reduce){
  html.allite-anim [data-reveal]{opacity:1!important;transform:none!important}
  html.allite-anim .hero>.wrap>div>*,html.allite-anim .hero-card{}
}

/* printing must never come out blank */
@media print{
  html.allite-anim [data-reveal]{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   REFINEMENT LAYER
   A pass to take the edge off the "template" look:
     · a display serif that echoes the A/E monogram, instead of one sans
       doing every job
     · a warm paper + navy palette with far fewer competing tinted bands
     · smaller radii and neutral shadows in place of coloured glows
     · restrained micro-typography — balanced headings, tabular figures,
       properly letterspaced labels
   Everything here overrides earlier rules, so it can be deleted wholesale
   to return to the previous look.
   ========================================================================== */

:root{
  /* warm paper reads more considered than the cool blue-grey it replaces */
  --paper:#FAF9F6;
  --sand:#F1EFE9;
  --sand-2:#E7E3DA;
  --line:#E2DED5;
  --muted:#5A6675;

  --wrap:1280px;
  --gut:28px;

  --r-s:3px;
  --r-m:6px;
  --r-l:12px;

  --f-display:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --h2:clamp(1.55rem,1.3rem + 1.1vw,2.35rem);
  --h1:clamp(2.2rem,1.6rem + 2.5vw,3.6rem);

  --shadow-sm:0 1px 2px rgba(6,31,69,.04),0 8px 24px -16px rgba(6,31,69,.18);
  --shadow-md:0 1px 3px rgba(6,31,69,.05),0 18px 44px -26px rgba(6,31,69,.28);
}

/* --- typography ---------------------------------------------------------- */
h1,h2{font-family:var(--f-display);font-weight:800;letter-spacing:-.028em;
  line-height:1.12;text-wrap:balance}
h1{line-height:1.05;letter-spacing:-.035em}
h2{letter-spacing:-.03em}
h3,h4,h5{font-family:var(--f-body);font-weight:700;letter-spacing:-.008em;text-wrap:balance}
p{text-wrap:pretty}
.lead{max-width:58ch;line-height:1.62}
.prose p{max-width:66ch}

/* small labels earn their keep with real letterspacing */
.kicker,.division-eyebrow,.pcard .tag,.scard .tag,.ptag,.hero-tag,
.phero-facts li span:first-child{
  text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;font-weight:600}
.ptag{text-transform:none;letter-spacing:.01em;font-size:.72rem}

/* figures line up in columns */
.amt,.statrow b,.trust b,.pc .amt,.prow .amt,.pitem .amt,.hcl b,.panel-stats b,
.phero-facts b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.statrow b,.trust b,.panel-stats b{font-weight:800;letter-spacing:-.03em}

/* --- the dashed motif becomes a single hairline -------------------------- */
.fibre{height:1px;width:44px;background:var(--green);border-radius:0;
  margin-bottom:20px;opacity:.9}
.dark .fibre,.grad .fibre{background:var(--marigold)}
.fibre--c{margin-inline:auto}

/* --- surfaces: fewer, quieter bands -------------------------------------- */
.tint-g{background:var(--sand)}              /* the green band was one tint too many */
.grad{background:var(--ink)}                 /* flat navy instead of a gradient panel */
.grad h2,.grad h3,.grad h4{color:#fff}
.sand{background:var(--sand)}

/* --- shadows and radii --------------------------------------------------- */
.pcard,.scard,.division,.bcell,.cap,.ctile,.review,.card,.pc,.pitem,
.offer,.map-embed,.hero-card,.statrow,.areas,.bgrid{border-radius:var(--r-l)}
.pcard,.division,.ctile,.review,.card,.pc{box-shadow:var(--shadow-sm)}
.pcard:hover,.division:hover,.ctile:hover,.bcell:hover,.cap:hover{
  transform:translateY(-2px);box-shadow:var(--shadow-md)}
.split-media>img,.media-pair img,.feature-media>img,.phero-media img,
.gallery img,.gallery figure,.post img{border-radius:var(--r-l)}
.split-media>img,.phero-media img{box-shadow:var(--shadow-md)}
.media-stack img{border-radius:var(--r-l)}

/* --- buttons: no coloured glow ------------------------------------------- */
.btn{font-family:var(--f-body);font-weight:600;letter-spacing:.005em;
  box-shadow:none}
.btn--primary{background:var(--green);border-color:var(--green)}
.btn--primary:hover{background:var(--ink-3);border-color:var(--ink-3)}
.btn--gold{background:var(--marigold);color:#0C2410;border-color:var(--marigold)}
.btn--gold:hover{background:#7CA23B;border-color:#7CA23B;color:#fff}
.btn--quote{box-shadow:none}
.btn:hover{transform:translateY(-1px)}

/* --- hairline dividers instead of heavy blocks --------------------------- */
.svc-index,.plist{border-top:1px solid var(--line)}
.prow,.svc-row{border-bottom:1px solid var(--line)}
.areas{gap:1px;background:var(--line)}
.area{box-shadow:none}

/* --- header sits lighter ------------------------------------------------- */
.hdr{border-bottom:1px solid var(--line);background:rgba(250,249,246,.92)}
.utility{background:var(--ink)}

/* --- footer -------------------------------------------------------------- */
.ftr{background:var(--ink)}
.ftr-btm{border-top:1px solid rgba(255,255,255,.10)}

/* price card headers: long names were pushing the amount out of the card */
.pc-top{flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.pc-top h3{flex:1 1 auto;min-width:0;font-size:1rem;line-height:1.25}
.pc .amt{flex:0 0 auto;margin-left:auto;font-weight:800;
  font-size:1.55rem;letter-spacing:-.035em}

@media (max-width:1100px){
  .pc-top h3{flex:1 1 100%}
  .pc .amt{margin-left:0}
}

/* --- richer motion ------------------------------------------------------- */
html.allite-anim [data-reveal="zoom"]{transform:scale(.97) translateY(14px)}
html.allite-anim [data-reveal="left"]{transform:translateX(-26px)}
html.allite-anim [data-reveal="right"]{transform:translateX(26px)}
html.allite-anim [data-reveal].is-in{transform:none}

/* arrows lead the eye on hover */
.btn svg,.go svg,.svc-go svg,.slist svg,.txtlink svg{}
.btn:hover svg,.pcard:hover .go svg,.division:hover .go svg,.scard:hover .go svg,
.pc:hover .go svg,.slist a:hover svg{transform:translateX(4px)}
.svc-row:hover .svc-go{transform:translateX(3px)}

/* nav underline sweeps rather than snapping */
.nav>ul>li>a{position:relative}
.nav>ul>li>a::after{content:"";position:absolute;left:9px;right:9px;bottom:3px;height:2px;
  background:var(--green);border-radius:2px;transform:scaleX(0);transform-origin:left;
  }
.nav>ul>li>a:hover::after{transform:scaleX(1)}
.nav>ul>li.is-current>a::after{transform:scaleX(1)}
.nav>ul>li.is-current>a::before{display:none}

/* images breathe inside their frames */
.split-media>img,.phero-media img,.media-pair img,.feature-media>img{
  }
.split-media:hover>img,.media-pair:hover img,.feature-media:hover>img{transform:scale(1.015)}

/* headings settle in with their rule */
html.allite-anim [data-reveal].is-in>.fibre,
html.allite-anim [data-reveal].is-in .shead .fibre{}

/* footer + CTA band lift on entry */
.band .btn{}
.socials a{}
.socials a:hover{transform:translateY(-3px)}


/* ==========================================================================
   HERO — the approved mockup design, brought into the site
   ========================================================================== */
/* ---- only change these if a floating header overlaps the hero ---- */
.allite-mockup-hero{
  --allite-hero-offset: -104px;          /* desktop   e.g. -108px */
  --allite-hero-offset-tablet: -86px;   /* <= 980px  e.g. -88px  */
  --allite-hero-offset-mobile: -76px;   /* <= 640px  e.g. -77px  */
}

.allite-mockup-hero,
.allite-mockup-hero *,
.allite-mockup-hero *::before,
.allite-mockup-hero *::after{box-sizing:border-box}
.allite-mockup-hero{
  --allite-navy:#061F45;
  --allite-blue:#025EBE;
  --allite-green:#8CB646;
  position:relative;width:100%;min-height:760px;
  margin-top:var(--allite-hero-offset,0px);
  padding:168px 30px 90px;
  overflow:hidden;background:#061F45;
  font-family:var(--f-body);
  isolation:isolate;
}
.allite-mockup-hero__background{position:absolute;inset:0;z-index:-5;overflow:hidden}
.allite-mockup-hero__background-image{position:absolute;inset:0;width:100%;height:100%!important;
  object-fit:cover;object-position:center center;opacity:.62;
  filter:saturate(.82) contrast(1.05);transform:scale(1.035)}
.allite-mockup-hero__background-overlay{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,31,69,.98) 0%,rgba(6,31,69,.92) 34%,
    rgba(6,31,69,.79) 58%,rgba(6,31,69,.68) 100%),
   linear-gradient(180deg,rgba(2,94,190,.19) 0%,rgba(6,31,69,.48) 100%)}
.allite-mockup-hero__background-blue{position:absolute;width:700px;height:700px;top:-440px;left:30%;
  border-radius:50%;background:rgba(2,94,190,.57);filter:blur(115px)}
.allite-mockup-hero__dots{position:absolute;inset:0;opacity:.12;
  background-image:radial-gradient(rgba(255,255,255,.8) .65px,transparent .65px);
  background-size:27px 27px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.75) 45%,transparent 90%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.75) 45%,transparent 90%)}
.allite-mockup-hero__inner{position:relative;z-index:5;width:min(1540px,100%);margin:0 auto}
.allite-mockup-hero__grid{display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(560px,.96fr);
  align-items:center;gap:55px}
.allite-mockup-hero__content{position:relative;z-index:10;max-width:690px}
.allite-mockup-hero__eyebrow{display:inline-flex;align-items:center;gap:11px;margin-bottom:27px;
  padding:10px 17px;border:1px solid rgba(255,255,255,.23);border-radius:999px;
  background:rgba(255,255,255,.075);backdrop-filter:blur(12px);color:rgba(255,255,255,.86);
  font-size:11px;line-height:1;font-weight:800;letter-spacing:1.3px;
  }
.allite-mockup-hero__eyebrow-circle{width:20px;height:20px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;background:rgba(140,182,70,.18);flex:none}
.allite-mockup-hero__eyebrow-circle span{width:9px;height:9px;display:block;border-radius:50%;
  background:var(--allite-green);box-shadow:0 0 14px rgba(140,182,70,.75)}
.allite-mockup-hero__title{margin:0;max-width:680px;font-size:clamp(62px,4.6vw,78px);
  line-height:1.03;letter-spacing:-4px;font-weight:800;
  }
.allite-mockup-hero__title-white,.allite-mockup-hero__title-blue{display:block;
  padding-bottom:.09em;margin-bottom:-.06em}
.allite-mockup-hero__title-white{color:#fff}
.allite-mockup-hero__title-blue{margin-top:9px;color:#66B8FF;
  background:linear-gradient(90deg,#5BC3FF 0%,#6BB9FF 52%,#90CBFF 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.allite-mockup-hero__description{max-width:620px;margin:27px 0 0;color:rgba(255,255,255,.82);
  font-size:19px;line-height:1.65;font-weight:500;
  }
.allite-mockup-hero__buttons{display:flex;align-items:center;flex-wrap:wrap;gap:17px;margin-top:31px;
  }
.allite-mockup-hero__primary,.allite-mockup-hero__secondary{min-height:62px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:999px;font-size:16px;font-weight:800;
  text-decoration:none;
  }
.allite-mockup-hero__primary{padding:0 8px 0 26px;gap:17px;color:#fff;background:var(--allite-green);
  box-shadow:0 15px 36px rgba(140,182,70,.24)}
.allite-mockup-hero__primary-icon{width:46px;height:46px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;background:var(--allite-blue);color:#fff;
flex:none}
.allite-mockup-hero__primary-icon svg{width:20px;height:20px;stroke:currentColor}
.allite-mockup-hero__primary:hover{background:var(--allite-blue);transform:translateY(-3px)}
.allite-mockup-hero__primary:hover .allite-mockup-hero__primary-icon{background:#fff;
  color:var(--allite-blue);transform:translateX(3px)}
.allite-mockup-hero__secondary{gap:17px;padding:0 27px;color:#fff;
  border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.035);backdrop-filter:blur(10px)}
.allite-mockup-hero__secondary svg{width:19px;height:19px;stroke:currentColor}
.allite-mockup-hero__secondary:hover{background:#fff;color:var(--allite-navy);border-color:#fff;
  transform:translateY(-3px)}
.allite-mockup-hero__trust{display:grid;grid-template-columns:1fr auto 1.12fr auto .92fr;
  align-items:center;gap:21px;margin-top:31px;padding-top:31px;
  border-top:1px solid rgba(255,255,255,.25);
  }
.allite-mockup-hero__trust-item{min-width:0;display:flex;align-items:center;gap:14px}
.allite-mockup-hero__trust-icon{width:50px;height:50px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;border:1px solid rgba(255,255,255,.24);border-radius:50%;
  background:rgba(255,255,255,.06);color:#A9D66D}
.allite-mockup-hero__trust-icon svg{width:20px;height:20px;stroke:currentColor;stroke-width:3}
.allite-mockup-hero__trust-copy strong{display:block;margin-bottom:4px;color:#fff;font-size:15px;
  line-height:1.2;font-weight:800;white-space:nowrap}
.allite-mockup-hero__trust-copy small{display:block;color:rgba(255,255,255,.62);font-size:12px;
  line-height:1.35}
.allite-mockup-hero__trust-divider{width:1px;height:48px;background:rgba(255,255,255,.23)}
.allite-mockup-hero__visual{position:relative;z-index:6;min-height:590px;
  }
.allite-mockup-hero__offset-shape{position:absolute;z-index:0;width:83%;height:84%;top:11%;right:-1%;
  border-radius:42px 42px 50px 145px;
  background:linear-gradient(145deg,rgba(2,94,190,.93),rgba(2,94,190,.34));transform:rotate(4deg)}
.allite-mockup-hero__image-card{position:absolute;z-index:3;width:84%;height:565px;top:0;right:3%;
  overflow:hidden;border:1px solid rgba(255,255,255,.36);
  border-radius:40px 40px 42px 135px;background:#E9EDF1;box-shadow:0 35px 90px rgba(0,0,0,.28)}
.allite-mockup-hero__main-image{position:absolute;inset:0;width:100%;height:100%!important;display:block;
  object-fit:cover;object-position:50% center;transform:scale(1.005);
  }
.allite-mockup-hero__image-card:hover .allite-mockup-hero__main-image{transform:scale(1.035)}
.allite-mockup-hero__image-overlay{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,31,69,.02) 0%,rgba(6,31,69,.01) 64%,rgba(6,31,69,.10) 100%)}
.allite-mockup-card{position:absolute;z-index:12;display:grid;grid-template-columns:60px 1fr;
  align-items:center;gap:13px;min-width:260px;padding:14px 17px;border-radius:18px;
  box-shadow:0 18px 46px rgba(0,0,0,.23)}
.allite-mockup-card--sofa{top:45px;left:-27px;border:1px solid rgba(255,255,255,.18);
  background:rgba(6,31,69,.94);backdrop-filter:blur(18px);
  }
.allite-mockup-card--carpet{left:-33px;bottom:65px;min-width:260px;background:rgba(255,255,255,.98);
  }
.allite-mockup-card__icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center;
  border-radius:15px;color:#fff}
.allite-mockup-card__icon svg{width:25px;height:25px;stroke:currentColor}
.allite-mockup-card__icon--blue{background:#0571D6}
.allite-mockup-card__icon--green{background:var(--allite-green)}
.allite-mockup-card__copy small{display:block;margin-bottom:5px;color:rgba(255,255,255,.57);
  font-size:10px;font-weight:800;letter-spacing:1px}
.allite-mockup-card__copy strong{display:block;color:#fff;font-size:16px;line-height:1.22;font-weight:800}
.allite-mockup-card__copy--dark small{color:#66768D}
.allite-mockup-card__copy--dark strong{color:var(--allite-navy)}
.allite-mockup-quality{position:absolute;z-index:15;top:-22px;right:0;display:flex;align-items:center;
  gap:11px;padding:12px 16px;border-radius:17px;background:var(--allite-green);
  box-shadow:0 15px 35px rgba(140,182,70,.32)}
.allite-mockup-quality__check{width:38px;height:38px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;background:#fff;color:var(--allite-green);flex:none}
.allite-mockup-quality__check svg{width:19px;height:19px;stroke:currentColor;stroke-width:3.2}
.allite-mockup-quality small{display:block;margin-bottom:3px;color:rgba(255,255,255,.8);font-size:8px;
  font-weight:800;letter-spacing:.8px}
.allite-mockup-quality strong{display:block;color:#fff;font-size:14px;line-height:1.15;font-weight:800}
.allite-mockup-hero__wave{position:absolute;z-index:25;left:0;right:0;bottom:-1px;width:100%;
  height:72px;pointer-events:none}
.allite-mockup-hero__wave svg{width:100%;height:100%;display:block}





@media (max-width:1350px) {
  .allite-mockup-hero{padding-left:23px;padding-right:23px}
  .allite-mockup-hero__grid{grid-template-columns:minmax(0,.92fr) minmax(530px,1.08fr);gap:40px}
  .allite-mockup-hero__title{font-size:clamp(52px,5vw,70px)}
  .allite-mockup-hero__description{font-size:17px}
  .allite-mockup-hero__image-card{height:530px}
  .allite-mockup-hero__visual{min-height:555px}
  .allite-mockup-hero__trust{gap:15px}
  .allite-mockup-hero__trust-copy strong{font-size:13px}
}
@media (max-width:980px) {
  .allite-mockup-hero{min-height:auto;margin-top:var(--allite-hero-offset-tablet,0px);padding:125px 18px 105px}
  .allite-mockup-hero__grid{grid-template-columns:1fr;gap:50px}
  .allite-mockup-hero__content{max-width:760px}
  .allite-mockup-hero__title{max-width:760px;font-size:clamp(54px,8.6vw,78px)}
  .allite-mockup-hero__description{max-width:650px}
  .allite-mockup-hero__visual{width:100%;max-width:780px;min-height:610px;margin:0 auto}
  .allite-mockup-hero__image-card{width:82%;height:555px;right:7%}
  .allite-mockup-hero__trust{max-width:700px}
}
@media (max-width:640px) {
  .allite-mockup-hero{margin-top:var(--allite-hero-offset-mobile,0px);padding:108px 13px 92px}
  .allite-mockup-hero__eyebrow{max-width:100%;margin-bottom:20px;padding:8px 10px;font-size:8px;
    letter-spacing:.7px}
  .allite-mockup-hero__eyebrow-circle{width:17px;height:17px}
  .allite-mockup-hero__title{font-size:clamp(44px,13.2vw,58px);line-height:1.06;letter-spacing:-2.3px}
  .allite-mockup-hero__title-blue{margin-top:7px}
  .allite-mockup-hero__description{margin-top:22px;font-size:15.5px;line-height:1.6}
  .allite-mockup-hero__buttons{display:grid;grid-template-columns:1fr;gap:11px;margin-top:26px}
  .allite-mockup-hero__primary,.allite-mockup-hero__secondary{width:100%;min-height:57px}
  .allite-mockup-hero__trust{grid-template-columns:1fr;gap:14px;margin-top:26px;padding-top:22px}
  .allite-mockup-hero__trust-divider{display:none}
  .allite-mockup-hero__trust-icon{width:43px;height:43px}
  .allite-mockup-hero__trust-copy strong{font-size:14px}
  .allite-mockup-hero__trust-copy small{font-size:11px}
  .allite-mockup-hero__visual{min-height:510px}
  .allite-mockup-hero__image-card{width:calc(100% - 10px);height:450px;right:0;
    border-radius:27px 27px 29px 72px}
  .allite-mockup-hero__main-image{object-position:51% center}
  .allite-mockup-card{min-width:185px;grid-template-columns:43px 1fr;gap:9px;padding:9px 11px;
    border-radius:14px}
  .allite-mockup-card__icon{width:43px;height:43px;border-radius:11px}
  .allite-mockup-card__icon svg{width:20px;height:20px}
  .allite-mockup-card__copy small{font-size:7px}
  .allite-mockup-card__copy strong{font-size:11px}
  .allite-mockup-card--sofa{top:58px;left:-2px}
  .allite-mockup-card--carpet{left:3px;bottom:37px}
  .allite-mockup-quality{top:-15px;right:0;padding:8px 10px}
  .allite-mockup-quality__check{width:30px;height:30px}
  .allite-mockup-quality small{font-size:6px}
  .allite-mockup-quality strong{font-size:10px}
  .allite-mockup-hero__wave{height:45px}
}
@media (max-width:390px) {
  .allite-mockup-hero__title{font-size:43px}
  .allite-mockup-hero__visual{min-height:475px}
  .allite-mockup-hero__image-card{height:415px}
  .allite-mockup-card--carpet{display:none}
}
@media (prefers-reduced-motion:reduce) {
  .allite-mockup-hero *,.allite-mockup-hero *::before,.allite-mockup-hero *::after{
}
}
@media (min-width:981px) and (max-width:1520px) {
  .allite-mockup-hero__grid{grid-template-columns:minmax(0,1.06fr) minmax(510px,.94fr);gap:40px}
  .allite-mockup-hero__title{font-size:clamp(54px,5vw,76px);letter-spacing:-3px;line-height:1.03}
}
.allite-mockup-hero__trust{grid-template-columns:auto auto auto auto auto;
  justify-content:space-between}
.allite-mockup-hero__trust-copy small{white-space:nowrap}
@media (min-width:981px) and (max-width:1520px) {
  .allite-mockup-hero__trust{gap:16px}
  .allite-mockup-hero__trust-icon{width:44px;height:44px}
  .allite-mockup-hero__trust-copy strong{font-size:13.5px}
  .allite-mockup-hero__trust-copy small{font-size:11.5px}
}
@media (max-width:640px) {
  .allite-mockup-hero__trust{grid-template-columns:1fr;justify-content:stretch}
}
.allite-mockup-hero .allite-mockup-hero__primary,
.allite-mockup-hero .allite-mockup-hero__primary:link,
.allite-mockup-hero .allite-mockup-hero__primary:visited,
.allite-mockup-hero .allite-mockup-hero__primary:hover,
.allite-mockup-hero .allite-mockup-hero__primary:focus,
.allite-mockup-hero .allite-mockup-hero__primary:active{color:#fff!important;
  text-decoration:none!important}
.allite-mockup-hero .allite-mockup-hero__primary>span:not(.allite-mockup-hero__primary-icon){
  color:inherit!important}
.allite-mockup-hero .allite-mockup-hero__primary .allite-mockup-hero__primary-icon{
  color:#fff!important}
.allite-mockup-hero .allite-mockup-hero__primary:hover .allite-mockup-hero__primary-icon,
.allite-mockup-hero .allite-mockup-hero__primary:focus .allite-mockup-hero__primary-icon{
  background:#fff;color:var(--allite-blue)!important}
.allite-mockup-hero .allite-mockup-hero__secondary,
.allite-mockup-hero .allite-mockup-hero__secondary:link,
.allite-mockup-hero .allite-mockup-hero__secondary:visited{color:#fff!important;
  text-decoration:none!important}
.allite-mockup-hero .allite-mockup-hero__secondary:hover,
.allite-mockup-hero .allite-mockup-hero__secondary:focus,
.allite-mockup-hero .allite-mockup-hero__secondary:active{color:var(--allite-navy)!important}
.allite-mockup-hero .allite-mockup-hero__secondary>span{color:inherit!important}
.allite-mockup-hero__primary:focus-visible,
.allite-mockup-hero__secondary:focus-visible{outline:3px solid #A9D66D;outline-offset:3px}
.allite-mockup-assure{position:absolute;z-index:16;right:-14px;bottom:34px;
  display:flex;align-items:center;gap:13px;max-width:300px;padding:15px 20px 15px 16px;
  border:1px solid rgba(255,255,255,.75);border-radius:18px;background:rgba(255,255,255,.97);
  box-shadow:0 23px 55px rgba(6,31,69,.23);
  }
.allite-mockup-assure__icon{width:44px;height:44px;flex:none;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--allite-blue),#0a3f86);color:#fff}
.allite-mockup-assure__icon svg{width:22px;height:22px;stroke:currentColor}
.allite-mockup-assure__copy strong{display:block;color:var(--allite-navy);font-size:14.5px;
  line-height:1.25;font-weight:800;margin-bottom:3px}
.allite-mockup-assure__copy small{display:block;color:#71829A;font-size:11.5px;line-height:1.4}
@media (min-width:981px) and (max-width:1200px) {
  .allite-mockup-hero__grid{gap:34px}
  .allite-mockup-hero__title{font-size:clamp(48px,4.7vw,62px);letter-spacing:-2.4px;line-height:1.04}
  .allite-mockup-hero__description{font-size:16px;margin-top:22px}
  .allite-mockup-hero__image-card{height:470px}
  .allite-mockup-hero__visual{min-height:500px}
  .allite-mockup-card{min-width:220px;grid-template-columns:48px 1fr;padding:11px 14px}
  .allite-mockup-card__icon{width:48px;height:48px;border-radius:13px}
  .allite-mockup-card__copy strong{font-size:14px}
  .allite-mockup-assure{max-width:250px;padding:12px 16px 12px 13px}
  .allite-mockup-assure__copy strong{font-size:13px}
}
@media (max-width:980px) {
  .allite-mockup-assure{right:0;bottom:24px}
}
@media (max-width:860px) {
  .allite-mockup-hero__visual{min-height:520px}
  .allite-mockup-hero__image-card{height:470px}
}
@media (max-width:640px) {
  .allite-mockup-assure{position:absolute;left:0;right:0;bottom:0;max-width:none;width:auto;
    margin:0;border-radius:16px}
  .allite-mockup-hero__visual{min-height:0;padding-bottom:96px}
  .allite-mockup-card--carpet{bottom:114px}
  .allite-mockup-hero__image-card{position:relative;width:100%;height:390px;right:auto;
    border-radius:24px 24px 26px 64px}
  .allite-mockup-hero__offset-shape{width:88%;height:78%;top:9%;right:-4%}
}
@media (max-width:390px) {
  .allite-mockup-hero__image-card{height:340px}
  .allite-mockup-card--carpet{display:grid;left:0}
}

/* ==========================================================================
   ABOUT BLOCK — the approved about design
   ========================================================================== */
.allite-about,
.allite-about *,
.allite-about *::before,
.allite-about *::after{box-sizing:border-box}

.allite-about{
  --allite-navy:#061F45;
  --allite-blue:#025EBE;
  --allite-blue-bright:#1C7BE8;
  --allite-green:#8CB646;
  --allite-muted:#5C6E85;
  --allite-tint:#EAF2FD;
  position:relative;width:100%;
  padding:clamp(56px,6vw,96px) 30px;
  background:#F7F9FC;
  font-family:var(--f-body);
  overflow:hidden;
}
.allite-about__inner{width:min(1480px,100%);margin:0 auto}
.allite-about__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  align-items:center;gap:clamp(40px,5vw,86px)}

/* =========================================================
   LEFT — VISUAL
========================================================= */
.allite-about__visual{position:relative;isolation:isolate;
  padding:58px 62px 96px 44px}

.allite-about__blob{position:absolute;z-index:0;width:300px;height:300px;border-radius:50%;
  top:-10px;left:-46px;background:var(--allite-tint)}
.allite-about__blob--low{width:260px;height:260px;top:auto;bottom:6px;left:-58px;
  background:#EDF4FE}

.allite-about__shape{position:absolute;z-index:1;left:78px;right:0;top:20px;bottom:96px;
  border-radius:34px 34px 34px 34px;
  background:linear-gradient(150deg,#0B3FA8 0%,#0B3FA8 45%,#1E63D8 100%);
  transform:rotate(2.4deg)}
.allite-about__shape--light{left:auto;right:6px;top:150px;bottom:120px;width:70px;
  border-radius:0 30px 30px 0;
  background:linear-gradient(180deg,#2E7BEA,#1E63D8);transform:rotate(2.4deg)}

.allite-about__dots{position:absolute;z-index:1;left:150px;bottom:8px;width:190px;height:96px;
  background-image:radial-gradient(#9CC3F2 2.1px,transparent 2.1px);
  background-size:19px 19px}

.allite-about__image{position:relative;z-index:2;border-radius:30px;overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(6,31,69,.55)}
.allite-about__image img{display:block;width:100%;height:auto;aspect-ratio:7/6;object-fit:cover}

/* ---- floating cards ---- */
.allite-about-card{position:absolute;z-index:4;display:flex;align-items:center;gap:14px;
  padding:16px 22px 16px 16px;border-radius:18px}
.allite-about-card__icon{width:52px;height:52px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff}
.allite-about-card__icon svg{width:24px;height:24px}
.allite-about-card__icon--green{background:var(--allite-green)}
.allite-about-card__icon--blue{background:var(--allite-blue-bright)}
.allite-about-card__copy strong{display:block;font-size:16px;line-height:1.28;font-weight:800;
  letter-spacing:-.01em}
.allite-about-card__copy small{display:block;margin-top:3px;font-size:13.5px;line-height:1.35}

.allite-about-card--eco{top:14px;left:0;background:#fff;
  box-shadow:0 22px 46px -24px rgba(6,31,69,.35)}
.allite-about-card--eco .allite-about-card__copy strong{color:var(--allite-navy)}
.allite-about-card--eco .allite-about-card__copy small{color:var(--allite-muted)}

.allite-about-card--local{left:-8px;bottom:74px;background:var(--allite-navy);
  box-shadow:0 24px 50px -22px rgba(6,31,69,.6)}
.allite-about-card--local .allite-about-card__copy strong{color:#fff}
.allite-about-card--local .allite-about-card__copy small{color:#A9BDD6}

.allite-about-stat{position:absolute;z-index:5;right:56px;bottom:34px;
  padding:20px 34px 22px;border-radius:18px;background:#fff;text-align:center;
  box-shadow:0 24px 50px -24px rgba(6,31,69,.42)}
.allite-about-stat strong{display:block;color:var(--allite-navy);font-size:38px;line-height:1;
  font-weight:800;letter-spacing:-.03em}
.allite-about-stat span{display:block;margin-top:6px;color:var(--allite-navy);font-size:15px;
  font-weight:500}
.allite-about-stat i{display:block;width:56px;height:4px;margin:14px auto 0;border-radius:100px;
  background:var(--allite-green)}

/* =========================================================
   RIGHT — CONTENT
========================================================= */
.allite-about__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:18px;
  color:#5F7286;font-size:13px;font-weight:700;letter-spacing:1.6px}
.allite-about__eyebrow-line{width:52px;height:3px;border-radius:100px;background:var(--allite-green)}

.allite-about__title{margin:0 0 22px;font-size:clamp(29px,2.85vw,45px);line-height:1.16;
  letter-spacing:-1.1px;font-weight:800}
.allite-about__title-dark{color:var(--allite-navy)}
.allite-about__title-blue{color:var(--allite-blue-bright)}

.allite-about__text{margin:0 0 14px;max-width:60ch;color:var(--allite-muted);
  font-size:clamp(15.5px,1.05vw,17.5px);line-height:1.65;font-weight:400}

.allite-about__features{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:22px}
.allite-about__features li{display:flex;align-items:flex-start;gap:18px}
.allite-about__feature-icon{width:56px;height:56px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.allite-about__feature-icon svg{width:25px;height:25px}
.allite-about__feature-icon--blue{background:#E6F0FD;color:var(--allite-blue-bright)}
.allite-about__feature-icon--green{background:#EDF5E1;color:var(--allite-green)}
.allite-about__feature-copy strong{display:block;margin-bottom:4px;color:var(--allite-navy);
  font-size:17.5px;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.allite-about__feature-copy small{display:block;color:var(--allite-muted);font-size:15.5px;
  line-height:1.5}

.allite-about__actions{display:flex;align-items:center;flex-wrap:wrap;gap:26px;margin-top:36px}

.allite-about__cta{min-height:62px;display:inline-flex;align-items:center;gap:16px;
  padding:0 8px 0 28px;border-radius:999px;background:var(--allite-green);
  color:#fff!important;text-decoration:none!important;font-size:17px;font-weight:800;
  box-shadow:0 14px 32px -12px rgba(140,182,70,.6);
  }
.allite-about__cta:link,.allite-about__cta:visited,.allite-about__cta:hover,
.allite-about__cta:focus,.allite-about__cta:active{color:#fff!important}
.allite-about__cta>span:first-child{color:inherit!important}
.allite-about__cta-icon{width:46px;height:46px;flex:none;border-radius:50%;
  background:var(--allite-blue);color:#fff!important;
  display:flex;align-items:center;justify-content:center;}
.allite-about__cta-icon svg{width:20px;height:20px}
.allite-about__cta:hover{background:var(--allite-blue);transform:translateY(-3px);
  box-shadow:0 18px 38px -14px rgba(2,94,190,.6)}
.allite-about__cta:hover .allite-about__cta-icon{background:#fff;
  color:var(--allite-blue)!important;transform:translateX(3px)}
.allite-about__cta:focus-visible{outline:3px solid var(--allite-blue);outline-offset:3px}

.allite-about__divider{width:1px;height:54px;background:rgba(6,31,69,.14)}

.allite-about__phone{display:inline-flex;align-items:center;gap:15px;text-decoration:none!important}
.allite-about__phone-icon{width:52px;height:52px;flex:none;border-radius:50%;background:#E6F0FD;
  color:var(--allite-blue-bright);display:flex;align-items:center;justify-content:center;
  }
.allite-about__phone-icon svg{width:22px;height:22px}
.allite-about__phone:hover .allite-about__phone-icon{background:var(--allite-blue-bright);color:#fff}
.allite-about__phone-copy small{display:block;color:var(--allite-muted);font-size:14.5px;
  line-height:1.3;margin-bottom:2px}
.allite-about__phone-copy strong{display:block;color:var(--allite-navy);font-size:21px;
  line-height:1.2;font-weight:800;letter-spacing:-.01em}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1200px){
  .allite-about__grid{gap:40px}
  .allite-about__visual{padding:48px 48px 84px 34px}
  .allite-about__title{font-size:clamp(27px,3vw,38px);letter-spacing:-.9px}
  .allite-about-card{padding:13px 18px 13px 13px;gap:12px}
  .allite-about-card__icon{width:46px;height:46px}
  .allite-about-card__copy strong{font-size:14.5px}
  .allite-about-card__copy small{font-size:12.5px}
  .allite-about-stat{right:34px;padding:16px 26px 18px}
  .allite-about-stat strong{font-size:32px}
  .allite-about-stat span{font-size:13.5px}
  .allite-about__feature-icon{width:50px;height:50px}
  .allite-about__feature-copy strong{font-size:16px}
  .allite-about__feature-copy small{font-size:14.5px}
}
@media (max-width:980px){
  .allite-about__grid{grid-template-columns:1fr;gap:52px}
  .allite-about__visual{max-width:680px;margin:0 auto;width:100%}
  .allite-about__content{max-width:760px;margin:0 auto}
  .allite-about__text{max-width:none}
}
@media (max-width:760px){
  .allite-about{padding-left:20px;padding-right:20px}
  .allite-about__visual{padding:44px 40px 78px 26px}
  .allite-about__blob{width:210px;height:210px;left:-30px}
  .allite-about__blob--low{width:180px;height:180px;left:-40px}
  .allite-about__dots{left:100px;width:150px;height:76px}
}
@media (max-width:640px){
  .allite-about__visual{padding:38px 0 0}
  /* the visual now grows to fit the stacked cards, so the offset shape must be
     sized from the image's own ratio instead of stretching to the bottom */
  .allite-about__shape{left:24px;right:-10px;top:16px;bottom:auto;
    aspect-ratio:7/6;height:auto}
  .allite-about__shape--light{display:none}
  .allite-about__dots{display:none}
  .allite-about__image{border-radius:22px}
  /* position:relative so the cards' z-index still applies once they leave
     absolute positioning — otherwise the shape paints over them */
  .allite-about-card{position:relative;z-index:4;width:100%;margin-top:12px;
    /* clear the absolute offsets, or they shift the cards on top of each other */
    top:auto;right:auto;bottom:auto;left:auto;
    background:#fff;box-shadow:0 14px 34px -20px rgba(6,31,69,.4)}
  .allite-about-card--local{background:var(--allite-navy)}
  .allite-about-stat{position:relative;z-index:4;width:100%;margin-top:12px;padding:18px;
    top:auto;right:auto;bottom:auto;left:auto;
    display:flex;align-items:center;gap:14px;text-align:left}
  .allite-about-stat strong{font-size:30px}
  .allite-about-stat i{margin:0 0 0 auto;width:44px}
  .allite-about__actions{gap:18px}
  .allite-about__divider{display:none}
  .allite-about__cta{width:100%;justify-content:space-between}
}
@media (max-width:420px){
  .allite-about__title{letter-spacing:-.6px}
  .allite-about__features li{gap:14px}
  .allite-about__feature-icon{width:46px;height:46px}
  .allite-about__feature-icon svg{width:21px;height:21px}
}
@media (prefers-reduced-motion:reduce){
  .allite-about *,.allite-about *::before,.allite-about *::after{
}
}

/* homepage header floats over the hero */
body.home .utility{display:none}
body.home .hdr{background:transparent;border-bottom:0;box-shadow:none!important;
  backdrop-filter:none}
body.home .hdr>.wrap{background:#fff;border-radius:18px;margin-top:14px;padding-inline:22px;
  max-width:min(1540px,calc(100% - 26px));box-shadow:0 18px 44px -26px rgba(6,31,69,.5)}
@media (min-width:1100px){body.home .hdr-cta .btn{display:inline-flex}}
body.home .callbox small{color:var(--muted)}

/* Service cards had no solid base — white text sat directly on the photo, so a
   bright image would have made it unreadable. Navy underneath guarantees it. */
.scard{background:var(--ink)}
.scard::after{background:linear-gradient(transparent 8%,rgba(6,31,69,.62) 52%,
  rgba(6,31,69,.94) 100%)}
.scard h3,.scard p,.scard .go{position:relative;z-index:1}

/* Between 920 and 1100 the homepage header still showed the phone block while
   the nav was at full width, pushing past the viewport edge. */
@media (max-width:1100px){
  body.home .hdr-cta{display:none}
}

/* Homepage header: show the phone block and the quote button only when there's
   genuinely room for both, otherwise one, otherwise the burger. */
@media (min-width:1101px){body.home .hdr-cta .btn{display:inline-flex}}
@media (max-width:1360px){body.home .callbox{display:none}}
@media (max-width:1100px){body.home .hdr-cta{display:none}}

/* ==========================================================================
   SITE-WIDE: the hero / about language applied everywhere
   ========================================================================== */
:root{--blue-bright:#1C7BE8}

/* --- section heads: eyebrow rule + label, two-tone heading --------------- */
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:16px;
  color:#5F7286;font-size:12.5px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;min-height:16px}
.eyebrow-rule{width:52px;height:3px;border-radius:100px;background:var(--marigold);flex:none}
.dark .eyebrow,.grad .eyebrow{color:#A8BCD3}
.shead--c .eyebrow{justify-content:center}

.shead h2,.faq-intro h2{font-size:clamp(1.75rem,1.35rem + 1.7vw,2.85rem);
  line-height:1.14;letter-spacing:-.032em;font-weight:800}
.h-dark{color:var(--ink)}
.h-blue{color:var(--blue-bright)}
.dark .h-dark,.grad .h-dark{color:#fff}
.dark .h-blue,.grad .h-blue{color:#7FC0FF}

/* --- primary CTAs match the hero button --------------------------------- */
.btn--gold,.btn--primary{min-height:58px;padding:0 8px 0 26px;gap:14px;
  color:#fff!important;font-weight:700}
.btn--gold{background:var(--marigold)}
.btn--gold:hover{background:var(--blue-bright)}
.btn--primary{background:var(--green)}
.btn--primary:hover{background:var(--blue-bright)}
.btn--gold>svg,.btn--primary>svg{width:42px;height:42px;padding:12px;border-radius:50%;
  background:var(--blue-bright);stroke:#fff;flex:none;
  }
.btn--primary>svg{background:var(--ink-3)}
.btn--gold:hover>svg,.btn--primary:hover>svg{background:#fff;stroke:var(--blue-bright);
  transform:translateX(3px)}

/* --- benefit / capability icons become tinted discs ---------------------- */
.bcell>svg,.cap-h>svg,.ctile>svg{width:56px;height:56px;padding:15px;border-radius:50%;
  background:#E6F0FD;stroke:var(--blue-bright);box-sizing:border-box}
.bcell:nth-child(3n+2)>svg,.ctile:nth-child(3n+2)>svg{background:#EDF5E1;stroke:var(--marigold)}
.dark .bcell>svg,.grad .bcell>svg{background:rgba(255,255,255,.09);stroke:#7FC0FF}
.bcell h3,.cap h3,.ctile h3{font-size:1.08rem;letter-spacing:-.015em}

/* --- cards pick up the about block's softness --------------------------- */
.bcell,.cap,.ctile{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 24px}
.bgrid{background:transparent;border:0;gap:16px}
.caps{gap:16px}
.sand .bcell,.tint-g .bcell,.sand .cap,.sand .ctile{background:#fff}

/* --- page heroes get the same eyebrow ----------------------------------- */
.phero h1{font-size:clamp(2rem,1.5rem + 2.2vw,3.3rem);letter-spacing:-.035em;line-height:1.08}
.phero .crumb{margin-bottom:26px}

/* --- feature rows, as on the about block -------------------------------- */
.ticks li{border-bottom:0;padding:0 0 14px}
.ticks svg{width:44px;height:44px;padding:12px;border-radius:50%;background:#E6F0FD;
  stroke:var(--blue-bright);box-sizing:border-box;margin-top:0}
.dark .ticks svg{background:rgba(255,255,255,.09);stroke:#9BD25F}

/* the eyebrow rule replaced .fibre, so the draw-in animation follows it */
html.allite-anim [data-reveal].is-in .eyebrow-rule{}

/* Between 920 and 1100 the nav was still full width while the phone block was
   showing, pushing the header past the viewport on every inner page. */
@media (max-width:1100px){.hdr-cta{display:none}}

/* ==========================================================================
   MOBILE POLISH
   Measured at 360px: the hero's floating cards were rendering label text at
   6-8px, and navigation-style links were well under a 44px tap target.
   ========================================================================== */
@media (max-width:640px){
  .allite-mockup-card__copy small{font-size:10px;letter-spacing:.6px}
  .allite-mockup-card__copy strong{font-size:13px}
  .allite-mockup-quality small{font-size:10px;letter-spacing:.5px}
  .allite-mockup-quality strong{font-size:12.5px}
  .allite-mockup-quality__check{width:34px;height:34px}
  .allite-mockup-assure__copy strong{font-size:14px}
  .allite-mockup-assure__copy small{font-size:11.5px}
  .allite-mockup-hero__eyebrow{font-size:10px;letter-spacing:.9px;padding:9px 13px}
  .brand-sub{font-size:10px}
  .pcard .tag,.scard .tag{font-size:11.5px}

  /* comfortable tap targets on anything that behaves like navigation */
  .ftr ul a,.slist a,.area,.crumb a,.nav a,.sub a,.socials a,
  .fcontact a,.ftr-btm a{min-height:44px;display:flex;align-items:center}
  .socials a{justify-content:center}
  .areas{grid-template-columns:repeat(2,1fr)}

  /* buttons go full width so they're never a narrow target */
  .btns{gap:10px}
  .btns .btn{width:100%;justify-content:space-between}
  .sec .btns .btn--ghost{justify-content:center}
}

/* the honeypot was still being measured as a real field; park it off-screen */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;
  overflow:hidden}

/* ==========================================================================
   SMOOTH SCROLLING & SCROLL FURNITURE
   ========================================================================== */
html{scroll-behavior:smooth}
/* anchors land below the sticky header instead of behind it */
html{scroll-padding-top:104px}
@media (max-width:920px){html{scroll-padding-top:88px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* reading-progress bar */
.scroll-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:200;
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,var(--blue-bright),var(--marigold))}

/* back to top */
.to-top{position:fixed;right:22px;bottom:22px;z-index:90;width:48px;height:48px;
  border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer;
  display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(12px);
  box-shadow:0 14px 32px -14px rgba(6,31,69,.7);
  }
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--blue-bright)}
.to-top svg{width:18px;height:18px;stroke:currentColor;transform:rotate(-90deg)}
@media (max-width:720px){.to-top{right:14px;bottom:68px;width:44px;height:44px}}

/* FAQ answers slide rather than snap */
.faq details .ans{overflow:hidden}
.faq details[open] .ans{}

.faq summary{}

/* hero background drifts very slightly as you scroll */
.allite-mockup-hero__background-image{will-change:transform}

/* ==========================================================================
   ONE HEADER, ONE BUTTON SYSTEM, ALTERNATING SURFACES
   ========================================================================== */

/* --- the floating pill header now runs on every page, not just home ------ */
.utility{display:none}
.hdr{background:transparent;border-bottom:0;backdrop-filter:none;box-shadow:none!important}
.hdr>.wrap{background:#fff;border-radius:18px;margin-top:14px;padding-inline:22px;
  max-width:min(1540px,calc(100% - 26px));box-shadow:0 18px 44px -26px rgba(6,31,69,.5)}
@media (max-width:920px){.hdr>.wrap{border-radius:14px;margin-top:10px}}

/* inner-page heroes tuck under it, exactly like the homepage hero */
.phero{margin-top:-104px;padding-top:150px}
@media (max-width:920px){.phero{margin-top:-88px;padding-top:126px}}
@media (max-width:640px){.phero{margin-top:-78px;padding-top:112px}}

/* header quote button: same green pill and blue circle arrow, just smaller */
.btn--head{min-height:50px;padding:0 6px 0 20px;gap:11px;font-size:.92rem}
.btn--head>svg{width:36px;height:36px;padding:10px}

/* --- surfaces actually alternate again ----------------------------------- */
/* sand and tint-g had ended up the same colour, so neighbouring sections
   merged into one flat band. tint-g goes back to a cool tint. */
.tint-g{background:#EDF3FB}
.tint-g .bcell,.tint-g .cap,.tint-g .ctile,.tint-g .review,.tint-g .pc,
.tint-g .statrow div{background:#fff}
.tint-g .ptag{background:#fff}

/* --- one button system --------------------------------------------------- */
.btn{min-height:58px;border-radius:999px;font-weight:700;font-size:1rem}
.btn--ghost{padding:0 26px;gap:12px;border-width:2px}
.btn--ghost>svg{width:18px;height:18px;padding:0;background:none;border-radius:0}
.btns{align-items:center}
.btns .btn{flex:0 0 auto}

/* the header CTA rules were scoped to the homepage, so inner pages lost the
   quote button; they now step down identically on every page */
@media (min-width:1101px){.hdr-cta .btn{display:inline-flex}}
@media (max-width:1360px){.callbox{display:none}}
@media (max-width:1100px){.hdr-cta{display:none}}

/* The underline sweep and the dropdown caret were both using ::after, so on a
   current page WITH a dropdown the caret was replaced by the underline bar.
   Underline moves to ::before; ::after stays the caret. */
.nav>ul>li>a::after{content:none}
.nav>ul>li>a{position:relative}
.nav>ul>li>a::before{content:"";position:absolute;left:9px;right:9px;bottom:3px;height:2px;
  background:var(--green);border-radius:2px;transform:scaleX(0);transform-origin:left;
  }
.nav>ul>li>a:hover::before,.nav>ul>li.is-current>a::before{transform:scaleX(1)}
.nav .has-sub>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);position:static;background:none}

/* Underline via box-shadow rather than a pseudo-element — ::before and ::after
   are both already spoken for on these links (caret, and earlier rules), and
   the collisions kept resurfacing. */
.nav>ul>li>a::before{content:none}
.nav>ul>li>a{box-shadow:inset 0 -2px 0 0 transparent;}
.nav>ul>li>a:hover,.nav>ul>li.is-current>a{box-shadow:inset 0 -2px 0 0 var(--green)}

/* box-shadow followed the link's rounded corners, so the underline curved up at
   the ends. A background gradient gives a straight rule that sweeps in. */
.nav>ul>li>a{box-shadow:none}
.nav>ul>li>a:hover,.nav>ul>li.is-current>a{box-shadow:none}
.nav>ul>li>a{background-image:linear-gradient(var(--marigold),var(--marigold));
  background-repeat:no-repeat;background-position:9px calc(100% - 6px);
  background-size:0% 2px;}
.nav>ul>li>a:hover,.nav>ul>li.is-current>a{background-size:calc(100% - 18px) 2px}
.nav>ul>li>a:hover{background-color:transparent}

/* ==========================================================================
   MOBILE CORRECTIONS
   ========================================================================== */

/* The FAQ intro kept position:sticky once the grid collapsed to one column, so
   it scrolled down over the questions and the phone button landed on top of
   them. It only makes sense as a sticky column beside the list. */
@media (max-width:900px){
  .faq-intro{position:static;top:auto;margin-bottom:8px}
}

/* Breadcrumbs were wrapping mid-trail and indenting the second line */
.crumb{flex-wrap:wrap;row-gap:2px;align-items:center;font-size:12.5px}
.crumb li{display:flex;align-items:center;white-space:nowrap}
@media (max-width:560px){.crumb{font-size:12px;gap:6px}.crumb li+li::before{margin-right:6px}}

/* Outline buttons centre their content; only the arrow buttons push apart */
@media (max-width:640px){
  .btns .btn--ghost{justify-content:center;gap:10px}
}

/* --- mobile menu -------------------------------------------------------- */
@media (max-width:920px){
  /* the desktop sweeping underline was drawing a full-width green bar under
     every item in the drawer */
  .nav>ul>li>a{background-image:none;box-shadow:none}
  .nav>ul>li{border-bottom:1px solid var(--line)}
  .nav>ul>li>a{padding:16px 4px;font-size:1.05rem;font-weight:700;border-radius:0}
  .nav>ul>li.is-current>a{color:var(--green);
    box-shadow:inset 3px 0 0 0 var(--marigold);padding-left:14px}
  .nav a:active{background:rgba(2,94,190,.06)}

  /* submenu reads as a grouped panel rather than loose links */
  .sub{background:var(--sand);border-radius:12px;padding:6px 10px;margin:2px 0 12px;
    border-left:0}
  .sub a{padding:13px 8px;font-size:.95rem;font-weight:600;
    border-bottom:1px solid rgba(6,31,69,.07)}
  .sub li:last-child a{border-bottom:0}
  .sub a em{font-style:normal;font-weight:700;color:var(--green)}
  .sub-all a{color:var(--green)}
}

/* explicit states so a visited link never inherits the browser's purple */
.nav a,.nav a:link,.nav a:visited{color:var(--ink)}
.nav a:hover,.nav a:focus{color:var(--green)}
.nav .is-current>a,.nav .is-current>a:visited{color:var(--green)}
.sub a,.sub a:link,.sub a:visited{color:var(--ink)}
.sub a:hover{color:var(--green);background:rgba(2,94,190,.06)}
.ftr a:link,.ftr a:visited{color:inherit}

/* ==========================================================================
   HEADER OVERLAY — measured, not guessed
   The hero was pulled up by a fixed -104/-88/-76px while the real header
   height varies with the breakpoint, so a strip of page background showed
   above it. --hdr-h is set from the header's actual height by main.js.
   ========================================================================== */
.allite-mockup-hero{margin-top:calc(-1 * var(--hdr-h, 0px))}
.allite-mockup-hero{padding-top:calc(var(--hdr-h, 0px) + 74px)}
.phero{margin-top:calc(-1 * var(--hdr-h, 0px));
  padding-top:calc(var(--hdr-h, 0px) + 44px)}
@media (max-width:980px){
  .allite-mockup-hero{margin-top:calc(-1 * var(--hdr-h, 0px));
    padding-top:calc(var(--hdr-h, 0px) + 40px)}
}
@media (max-width:640px){
  .allite-mockup-hero{padding-top:calc(var(--hdr-h, 0px) + 28px)}
  .phero{padding-top:calc(var(--hdr-h, 0px) + 30px)}
}

/* CTA content stays together and centred on small screens instead of the text
   and the arrow being flung to opposite edges */
@media (max-width:640px){
  .btns .btn,.btns .btn--gold,.btns .btn--primary{justify-content:center;gap:14px}
}

/* margin-top on the pill was collapsing out through .hdr and pushing the whole
   header down the page, leaving a strip of background above it */
.hdr{padding-top:14px}
.hdr>.wrap{margin-top:0}
@media (max-width:920px){.hdr{padding-top:10px}}

/* The header pill was inset 13px while page content sits at the --gut of 28px,
   so nothing lined up. The pill now shares the page gutter and max width, and
   carries its own inner padding. */
.hdr{padding-inline:var(--gut)}
.hdr>.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
@media (max-width:640px){
  .hdr>.wrap{padding-inline:14px}
}

/* An earlier body.home rule outranked the global one, so the pill kept its own
   width. Both are set here, sized to line up with the content column exactly. */
.hdr>.wrap,body.home .hdr>.wrap{
  max-width:calc(var(--wrap) - 2 * var(--gut));
  margin-inline:auto;padding-inline:20px}
@media (max-width:640px){
  .hdr>.wrap,body.home .hdr>.wrap{padding-inline:14px}
}

/* The pill is narrower now that it aligns to the content column, so the phone
   block and quote button need to drop out earlier than before. */
.callbox{display:none}
@media (min-width:1500px){.callbox{display:flex}}
.hdr-cta .btn{display:none}
@media (min-width:1200px){.hdr-cta .btn{display:inline-flex}}
@media (max-width:1199px){.hdr-cta{display:none}}

/* ==========================================================================
   ONE SPACING SYSTEM — everything on the same 5% gutter
     desktop : 5% left/right, 5% top/bottom
     mobile  : 5% left/right, 12% top/bottom
   Every container below resolves to the same left and right edge, so the
   header pill, hero, every section, the CTA band and the footer line up.
   ========================================================================== */
:root{--pad-x:5%;--pad-y:5%}
@media (max-width:768px){:root{--pad-y:12%}}

/* every content container shares the gutter, none of them cap their width */
.wrap,
.hdr>.wrap,
body.home .hdr>.wrap,
.allite-mockup-hero__inner,
.allite-about__inner{
  width:100%;max-width:100%;margin-inline:0;
  padding-inline:var(--pad-x);
}

/* outer shells carry no side padding of their own — the inner container owns it */
.hdr,
.allite-mockup-hero,
.allite-about{padding-inline:0}

/* vertical rhythm */
.sec{padding-block:var(--pad-y)}
.sec--tight{padding-block:calc(var(--pad-y) * .62)}
.allite-about{padding-block:var(--pad-y)}
.band .wrap{padding-block:calc(var(--pad-y) * .7)}
.phero{padding-bottom:calc(var(--pad-y) * .9)}

/* the header pill sits on the gutter and keeps a small inner inset */
.hdr>.wrap,body.home .hdr>.wrap{padding-inline:calc(var(--pad-x) + 14px)}
.hdr{padding-top:12px;padding-bottom:0}
.hdr .wrap{min-height:70px}
.hdr>.wrap{border-radius:16px}
@media (max-width:920px){.hdr{padding-top:8px}.hdr .wrap{min-height:62px}}

/* a tighter header and footer, as asked */
.brand-mark{height:34px!important}
.ftr .brand-mark{height:38px!important}
.brand-badge{height:36px!important}
.ftr .brand-badge{height:40px!important}
.brand-name{font-size:1.02rem}
.ftr-top{padding-block:calc(var(--pad-y) * .8);gap:26px 28px}
.ftr-btm{padding-block:16px}
.ftr{font-size:.86rem}

/* the hero's own padding follows the same rhythm */
.allite-mockup-hero{padding-top:calc(var(--hdr-h,0px) + var(--pad-y));
  padding-bottom:calc(var(--pad-y) + 20px)}
@media (max-width:768px){
  .allite-mockup-hero{padding-top:calc(var(--hdr-h,0px) + 6%);
    padding-bottom:calc(var(--pad-y) * .8)}
}
.phero{padding-top:calc(var(--hdr-h,0px) + var(--pad-y))}

/* the pill's own edge sits on the 5% gutter; its inner inset is card padding */
.hdr{padding-inline:var(--pad-x)}
.hdr>.wrap,body.home .hdr>.wrap{padding-inline:16px}
@media (max-width:640px){.hdr>.wrap,body.home .hdr>.wrap{padding-inline:12px}}

/* Grid and flex children default to min-width:auto, so a wide image can push
   its column past the container. */
.split>*,.layout>*,.faq-wrap>*,.divisions>*,.media-pair>*,
.pcards>*,.scards>*,.bgrid>*,.caps>*,.pgrid>*{min-width:0}
.split-media,.split-media img,.media-pair img,.feature-media img{max-width:100%}

/* On narrow screens the columns are full width, so a sideways reveal pushes the
   element past the viewport before it animates in. Below 980px they lift
   instead of sliding. */
@media (max-width:980px){
  html.allite-anim [data-reveal="left"],
  html.allite-anim [data-reveal="right"]{transform:translateY(20px)}
}

/* ==========================================================================
   MOBILE BUTTON ALIGNMENT
   Buttons that carry a circled arrow push the label left and the circle to the
   right edge — matching the about block's CTA. Buttons with a leading icon
   (phone) or a plain inline arrow stay centred.
   ========================================================================== */
@media (max-width:640px){
  .btns .btn--gold,
  .btns .btn--primary,
  .allite-mockup-hero__primary,
  .allite-about__cta{
    width:100%;
    justify-content:space-between;
    padding-left:22px;
    padding-right:8px;
    gap:12px;
  }
  /* keep the circle hard against the right inset, never floating mid-button */
  .btns .btn--gold>svg,
  .btns .btn--primary>svg,
  .allite-mockup-hero__primary-icon,
  .allite-about__cta-icon{margin-left:auto;flex:none}

  .btns .btn--ghost,
  .allite-mockup-hero__secondary{justify-content:center;gap:10px;padding-inline:22px}
}

/* Phone buttons carry a LEADING icon, not a trailing arrow, so space-between
   was throwing the icon to one edge and the number to the other. They centre,
   and their icon stays a plain glyph rather than a circled arrow. */
a.btn[href^="tel:"]{justify-content:center;gap:10px;padding-inline:24px}
a.btn[href^="tel:"]>svg{width:18px;height:18px;padding:0;background:none;
  border-radius:0;stroke:currentColor;flex:none}
a.btn--primary[href^="tel:"]{background:var(--green);color:#fff!important}
a.btn--primary[href^="tel:"]:hover{background:var(--blue-bright)}


/* === Homepage overall-business content polish (client revision) === */
.home .home-divisions{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.home .home-divisions .division{height:100%;display:flex;flex-direction:column}
.home .home-divisions .division-media{min-height:220px}
.home .home-divisions .division img{aspect-ratio:16/10;height:100%;object-fit:cover}
.home .home-divisions .division-body{height:100%}
.gallery figcaption{display:none!important}
@media(max-width:980px){.home .home-divisions{grid-template-columns:repeat(2,minmax(0,1fr))}.home .home-divisions .division:last-child{grid-column:1/-1;max-width:620px;width:100%;justify-self:center}}
@media(max-width:640px){.home .home-divisions{grid-template-columns:1fr}.home .home-divisions .division:last-child{grid-column:auto;max-width:none}.home .home-divisions .division-media{min-height:190px}}


/* === FINAL LIVE GRID FIX: homepage three business cards === */
@media (min-width:981px){
  body.home #what-we-do .home-divisions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important;align-items:stretch!important}
  body.home #what-we-do .home-divisions>.division{grid-column:auto!important;grid-row:auto!important;width:100%!important;max-width:none!important;min-width:0!important;justify-self:stretch!important;height:100%!important}
}
@media (min-width:641px) and (max-width:980px){
  body.home #what-we-do .home-divisions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.home #what-we-do .home-divisions>.division:last-child{grid-column:1/-1!important;max-width:620px!important;justify-self:center!important}
}
@media (max-width:640px){
  body.home #what-we-do .home-divisions{grid-template-columns:1fr!important}
  body.home #what-we-do .home-divisions>.division:last-child{grid-column:auto!important;max-width:none!important}
}

/* ========================================================================
   ALLITE MOBILE NAV — PREMIUM ACCORDION DRAWER (2026-09-06c)
   Mobile only. Desktop/tablet-above-920 styling is intentionally untouched.
   ======================================================================== */
@media (max-width:920px){
  /* polished animated hamburger */
  .burger{
    display:grid!important;
    width:48px;height:48px;
    margin-left:auto;
    padding:0;
    place-items:center;
    border:1px solid rgba(2,94,190,.18);
    border-radius:14px;
    background:linear-gradient(145deg,#061F45 0%,#025EBE 100%);
    box-shadow:0 10px 24px rgba(6,31,69,.17),inset 0 1px 0 rgba(255,255,255,.15);
}
  .burger:active{transform:scale(.94)}
  .burger[aria-expanded="true"]{
    background:linear-gradient(145deg,#025EBE 0%,#061F45 100%);
    box-shadow:0 12px 28px rgba(2,94,190,.24),inset 0 1px 0 rgba(255,255,255,.17);
  }
  .burger span,.burger span::before,.burger span::after{
    width:21px;height:2px;
    background:#fff;
    border-radius:999px;
}
  .burger span{position:relative;display:block}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;top:0;display:block}
  .burger span::before{transform:translateY(-7px)}
  .burger span::after{transform:translateY(7px)}
  .burger[aria-expanded="true"] span{background:transparent}
  .burger[aria-expanded="true"] span::before{transform:rotate(45deg)}
  .burger[aria-expanded="true"] span::after{transform:rotate(-45deg)}

  /* full-height drawer — hidden with opacity/visibility, never left in flow */
  .nav{
    position:fixed!important;
    inset:var(--hdr-h,78px) 0 0!important;
    z-index:75!important;
    display:block!important;
    margin:0!important;
    padding:18px clamp(14px,4.5vw,24px) 110px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    border-top:1px solid rgba(6,31,69,.07)!important;
    background:
      radial-gradient(circle at 90% 8%,rgba(2,94,190,.13),transparent 30%),
      radial-gradient(circle at 8% 88%,rgba(140,182,70,.12),transparent 30%),
      linear-gradient(180deg,#F8FBFF 0%,#F5F3EC 100%)!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-12px);
}
  .nav.open{
    display:block!important;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}
  .nav::before,.nav::after{
    content:"";
    position:fixed;
    pointer-events:none;
    border-radius:999px;
    filter:blur(30px);
    opacity:.55;
    z-index:0;
  }
  .nav::before{width:150px;height:150px;right:-70px;top:calc(var(--hdr-h,78px) + 34px);background:rgba(2,94,190,.15)}
  .nav::after{width:170px;height:170px;left:-90px;bottom:30px;background:rgba(140,182,70,.13)}

  .nav>ul,.nav .m-cta{position:relative;z-index:1;width:min(100%,560px);margin-left:auto!important;margin-right:auto!important}
  .nav>ul{
    display:grid!important;
    align-items:stretch!important;
    gap:10px!important;
    padding:0!important;
    list-style:none!important;
  }
  .nav>ul>li{
    position:relative;
    width:100%;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:17px;
  }

  /* equal top-level rows; remove ALL desktop underline rules */
  .nav>ul>li>a,
  .nav>ul>li>a:link,
  .nav>ul>li>a:visited{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:58px!important;
    margin:0!important;
    padding:15px 18px!important;
    border:1px solid rgba(6,31,69,.08)!important;
    border-radius:17px!important;
    background:#fff!important;
    background-image:none!important;
    box-shadow:0 8px 24px rgba(6,31,69,.055)!important;
    color:var(--ink)!important;
    font-size:1rem!important;
    line-height:1.25!important;
    font-weight:800!important;
    letter-spacing:-.01em!important;
    text-decoration:none!important;
    white-space:normal!important;
}
  .nav>ul>li>a::before,.nav>ul>li>a::after{content:none!important;display:none!important}
  .nav>ul>li>a:active{transform:scale(.985)}

  /* top-level active state: unmistakable, elegant and high contrast */
  .nav>ul>li.is-current>a,
  .nav>ul>li.is-current>a:link,
  .nav>ul>li.is-current>a:visited,
  .nav>ul>li>a[aria-current="page"]{
    border-color:transparent!important;
    background:linear-gradient(135deg,#061F45 0%,#025EBE 100%)!important;
    color:#fff!important;
    box-shadow:0 12px 28px rgba(2,94,190,.20)!important;
  }
  .nav>ul>li:not(.is-current)>a:hover,.nav>ul>li:not(.is-current)>a:focus-visible{
    border-color:rgba(2,94,190,.22)!important;
    background:#F1F7FF!important;
    color:var(--blue)!important;
    box-shadow:0 10px 26px rgba(2,94,190,.09)!important;
  }

  /* submenu toggle inserted by JS — separate from the parent page link */
  .nav .sub-toggle{
    position:absolute;
    z-index:4;
    right:10px;
    top:10px;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:12px;
    background:#EDF5FF;
    color:var(--blue);
    cursor:pointer;
    box-shadow:inset 0 0 0 1px rgba(2,94,190,.08);
}
  .nav .has-sub>a{padding-right:62px!important}
  .nav .sub-toggle::before{
    content:"";
    width:8px;height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-1px,-1px);
}
  .nav .sub-toggle:hover,.nav .sub-toggle:focus-visible{background:#DCEEFF;box-shadow:inset 0 0 0 1px rgba(2,94,190,.16)}
  .nav .has-sub.is-current>.sub-toggle{
    background:rgba(255,255,255,.15);
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  }
  .nav .has-sub.sub-open>.sub-toggle::before{transform:rotate(225deg) translate(-1px,-1px)}
  .nav .has-sub.sub-open>.sub-toggle{transform:rotate(0deg)}

  /* accordion submenu: no double divider lines, no permanently-open blocks */
  .nav .sub{
    position:static!important;
    display:block!important;
    width:auto!important;
    min-width:0!important;
    max-height:0!important;
    margin:0 6px!important;
    padding:0 8px!important;
    overflow:hidden!important;
    border:1px solid transparent!important;
    border-left:1px solid transparent!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.82)!important;
    box-shadow:none!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:translateY(-6px)!important;
    transform-origin:top center;
}
  .nav .has-sub:not(.sub-open)>.sub{opacity:0!important;visibility:hidden!important;transform:translateY(-6px)!important}
  .nav .has-sub.sub-open>.sub{
    max-height:520px!important;
    margin:8px 6px 2px!important;
    padding:8px!important;
    border-color:rgba(6,31,69,.075)!important;
    opacity:1!important;
    visibility:visible!important;
    transform:translateY(0)!important;
    box-shadow:0 10px 28px rgba(6,31,69,.05)!important;
  }
  .nav .sub>li{margin:0!important;padding:0!important;border:0!important;list-style:none!important}
  .nav .sub a,
  .nav .sub a:link,
  .nav .sub a:visited{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:10px!important;
    min-height:48px!important;
    margin:2px 0!important;
    padding:11px 12px!important;
    border:0!important;
    border-radius:12px!important;
    background:transparent!important;
    color:var(--ink)!important;
    box-shadow:none!important;
    font-size:.93rem!important;
    line-height:1.25!important;
    font-weight:700!important;
    white-space:normal!important;
}
  .nav .sub a:hover,.nav .sub a:focus-visible{background:#EEF6FF!important;color:var(--blue)!important;transform:translateX(2px)}
  .nav .sub a em{
    justify-self:end;
    margin:0!important;
    padding:5px 8px!important;
    border-radius:999px;
    background:#EDF5FF;
    color:var(--blue)!important;
    font-size:.72rem!important;
    line-height:1!important;
    font-style:normal!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }
  .nav .sub a[aria-current="page"]{
    background:linear-gradient(90deg,rgba(2,94,190,.12),rgba(140,182,70,.10))!important;
    color:var(--blue)!important;
    box-shadow:inset 3px 0 0 var(--green)!important;
  }
  .nav .sub a[aria-current="page"] em{background:var(--blue)!important;color:#fff!important}

  /* All services is a deliberate CTA, not another divider-row */
  .nav .sub .sub-all{margin-top:6px!important;padding-top:0!important;border:0!important}
  .nav .sub .sub-all a,
  .nav .sub .sub-all a:link,
  .nav .sub .sub-all a:visited{
    display:flex!important;
    justify-content:space-between!important;
    min-height:49px!important;
    padding:12px 14px!important;
    border-radius:12px!important;
    background:#061F45!important;
    color:#fff!important;
  }
  .nav .sub .sub-all a:hover{background:#025EBE!important;color:#fff!important;transform:none}
  .nav .sub .sub-all svg{width:17px!important;height:17px!important;flex:none!important}

  /* drawer CTAs: balanced widths and equal internal spacing */
  .nav .m-cta{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin-top:16px!important;
    padding:14px!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:19px!important;
    background:linear-gradient(135deg,#061F45,#0A3568)!important;
    box-shadow:0 15px 34px rgba(6,31,69,.15)!important;
  }
  .nav .m-cta .btn{
    width:100%!important;
    min-height:50px!important;
    margin:0!important;
    padding:12px 14px!important;
    justify-content:center!important;
    border-radius:13px!important;
    font-size:.9rem!important;
    line-height:1.2!important;
    white-space:normal!important;
    text-align:center!important;
  }
  .nav .m-cta .btn--primary{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important}
  .nav .m-cta .btn--ghost{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.22)!important}

  /* stagger top-level cards on open */
  .nav.open>ul>li{}
  .nav.open>ul>li:nth-child(1){}
  .nav.open>ul>li:nth-child(2){}
  .nav.open>ul>li:nth-child(3){}
  .nav.open>ul>li:nth-child(4){}
  .nav.open>ul>li:nth-child(5){}
  .nav.open>ul>li:nth-child(6){}
  .nav.open>ul>li:nth-child(7){}
  .nav.open .m-cta{}
  

  .nav .has-sub.sub-open>.sub>li{}
  .nav .has-sub.sub-open>.sub>li:nth-child(1){}
  .nav .has-sub.sub-open>.sub>li:nth-child(2){}
  .nav .has-sub.sub-open>.sub>li:nth-child(3){}
  .nav .has-sub.sub-open>.sub>li:nth-child(4){}
  .nav .has-sub.sub-open>.sub>li:nth-child(5){}
  .nav .has-sub.sub-open>.sub>li:nth-child(6){}
  
}

@media (max-width:430px){
  .nav{padding-left:12px!important;padding-right:12px!important}
  .nav>ul{gap:9px!important}
  .nav>ul>li>a{min-height:56px!important;padding:14px 16px!important;font-size:.97rem!important}
  .nav .has-sub>a{padding-right:59px!important}
  .nav .sub-toggle{right:9px;top:9px;width:38px;height:38px}
  .nav .m-cta{grid-template-columns:1fr!important;padding:12px!important}
  .nav .sub a{font-size:.89rem!important;padding:10px 11px!important}
  .nav .sub a em{font-size:.68rem!important;padding:5px 7px!important}
}

@media (prefers-reduced-motion:reduce) and (max-width:920px){
  .nav,.nav *, .burger,.burger *{}
}

/* ========================================================================
   DESKTOP NAV SAFEGUARD — RESTORE ORIGINAL DESKTOP HEADER EXACTLY
   The premium accordion controls exist only for mobile. On desktop they are
   completely removed from layout/painting so the original nav is untouched.
   ======================================================================== */
@media (min-width:921px){
  #primary-nav .sub-toggle{
    display:none!important;
    position:absolute!important;
    width:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}


/* ==========================================================================
   FOOTER "GET IN TOUCH" — MOBILE ICON ALIGNMENT
   Cause: the 44px tap-target rule (.ftr ul a / .fcontact a) turned each
   link into a flex box with its text vertically centred, while the icon
   stayed pinned to the top of the row (align-items:flex-start +
   margin-top:4px). So the icon floated above its label — and the two
   <span> rows (location, hours) never got the 44px box at all, so they
   sat differently again.
   Fix: the tap target now comes from padding on the row content, so the
   icon and the first line of text share one box and line up exactly.
   ========================================================================== */
@media (max-width:640px){
  .ftr .fcontact{
    --fc-pad:12px;      /* vertical padding -> 45px tap target */
    --fc-line:21px;     /* fixed line box keeps the maths exact */
    --fc-icon:17px;
    gap:0;              /* row spacing now comes from the padding */
  }
  .ftr .fcontact li{
    display:flex;
    align-items:flex-start;
    gap:12px;
  }
  .ftr .fcontact li a,
  .ftr .fcontact li span{
    display:block;
    min-height:0;
    padding:var(--fc-pad) 0;
    line-height:var(--fc-line);
    font-size:.9rem;
  }
  .ftr .fcontact li svg{
    width:var(--fc-icon);
    height:var(--fc-icon);
    flex:none;
    /* centre the icon on the FIRST line of text, so wrapped rows
       (e.g. the UK coverage line) still align correctly */
    margin-top:calc(var(--fc-pad) + (var(--fc-line) - var(--fc-icon)) / 2);
  }
}

/* ==========================================================================
   PERFORMANCE MODE — 2026-09-11
   Removes decorative motion and scroll animation work while preserving layout
   and core interaction states.
   ========================================================================== */
html{scroll-behavior:auto!important}
*,*::before,*::after{


}
html.allite-anim [data-reveal],
html.allite-anim [data-reveal="left"],
html.allite-anim [data-reveal="right"],
html.allite-anim [data-reveal="zoom"],
html.allite-anim [data-reveal].is-in{
  opacity:1!important;
  transform:none!important;
}
.allite-mockup-hero__background-image{will-change:auto!important}
.allite-mockup-card--sofa,
.allite-mockup-card--carpet,
.allite-mockup-review,
.allite-mockup-hero__eyebrow,
.allite-mockup-hero__title,
.allite-mockup-hero__description,
.allite-mockup-hero__buttons,
.allite-mockup-hero__trust,
.allite-mockup-hero__visual{
}
.bcell:hover,.ctile:hover,.cap:hover,.rslider .review:hover,
.btn:hover,.btn:active,.area:hover,
.allite-mockup-hero__primary:hover,
.allite-mockup-hero__secondary:hover,
.allite-mockup-hero__primary:hover .allite-mockup-hero__primary-icon,
.allite-mockup-hero__image-card:hover .allite-mockup-hero__main-image{
  transform:none!important;
}
.slist a:hover,.ftr ul a:hover{padding-left:0!important}
.scroll-progress,.to-top{display:none!important}


\n\n/* ==========================================================================
   NO-MOTION MODE — 2026-09-12
   Content is visible immediately. No scroll, entrance, fade, slide, float,
   stagger or delayed reveal motion on desktop or mobile.
   ========================================================================== */
html{scroll-behavior:auto!important}
html.allite-anim [data-reveal],
html.allite-anim [data-reveal="left"],
html.allite-anim [data-reveal="right"],
html.allite-anim [data-reveal="zoom"],
html.allite-anim [data-reveal].is-in,
.allite-light-reveal,
.allite-light-reveal.allite-light-in{
  opacity:1!important;
  transform:none!important;
  visibility:visible!important;
  will-change:auto!important;
}
.scroll-progress,.to-top{display:none!important}

/* ==========================================================================
   FINAL UX PATCH — 2026-09-12
   Smooth native anchor scrolling, consistent CTA sizing, and layout safeguards.
   Keeps entrance/reveal animations disabled for performance.
   ========================================================================== */

/* Native smooth scrolling with sticky-header offset. */
html{
  scroll-behavior:smooth!important;
  scroll-padding-top:112px;
}
[id]{scroll-margin-top:112px}
@media (max-width:920px){
  html{scroll-padding-top:92px}
  [id]{scroll-margin-top:92px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
}

/* One dependable button system across page CTAs.
   Header and mobile-drawer controls keep their intentionally compact sizing. */
.btn:not(.btn--head){
  min-height:56px!important;
  height:56px;
  min-width:214px;
  padding:0 22px!important;
  border-radius:999px!important;
  display:inline-flex;
  align-items:center;
  justify-content:center!important;
  gap:10px!important;
  line-height:1.15!important;
  text-align:center;
  white-space:nowrap;
  box-sizing:border-box;
}
.btn:not(.btn--head)>svg{
  width:18px!important;
  height:18px!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  flex:0 0 18px!important;
  transform:none!important;
}
.btns .btn:not(.btn--head){
  width:214px;
  flex:0 0 214px!important;
}
form[data-quote] .btn[type="submit"]{min-width:214px}

/* Header CTA remains compact and visually balanced. */
.btn--head{
  min-width:0!important;
  width:auto!important;
  height:50px!important;
  min-height:50px!important;
  padding:0 7px 0 20px!important;
}
.btn--head>svg{
  width:36px!important;
  height:36px!important;
  padding:10px!important;
  border-radius:50%!important;
  background:var(--blue-bright)!important;
}

/* Prevent long button copy from causing overflow on narrow screens. */
@media (max-width:640px){
  .btns .btn:not(.btn--head),
  form[data-quote] .btn[type="submit"],
  .sec .btn:not(.btn--head),
  .band .btn:not(.btn--head),
  .phero .btn:not(.btn--head),
  .hero .btn:not(.btn--head){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    flex:1 1 100%!important;
  }
  .btn:not(.btn--head){
    white-space:normal;
    padding-inline:20px!important;
  }
}

/* Never let button rows force horizontal page overflow. */
.btns{max-width:100%}
.btns>*{max-width:100%}

/* Mobile drawer buttons must fit their two-column grid without min-width overflow. */
@media (max-width:920px){
  .nav .m-cta .btn{
    min-width:0!important;
    width:100%!important;
    height:50px!important;
    min-height:50px!important;
    padding:0 14px!important;
    white-space:normal!important;
  }
}


/* ==========================================================================
   LENIS + FINAL BUTTON FIX — 2026-09-12
   ========================================================================== */

/* Lenis owns vertical smoothing. Native smooth-scroll is deliberately disabled
   while Lenis is active so the two systems never fight each other. */
html{scroll-behavior:auto!important}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* One dependable CTA system. The explicit link/visited/hover/focus states stop
   inherited section colours from making button text disappear on hover. */
.btn,
.btn:link,
.btn:visited{
  min-height:58px;
  height:58px;
  padding:0 24px;
  border:2px solid transparent;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex:0 0 auto;
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1;
  font-weight:700;
  text-decoration:none!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible;
  transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform .22s ease!important;
}
.btn:hover,.btn:focus-visible{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{flex:none;stroke:currentColor;transition:background-color .22s ease,color .22s ease,stroke .22s ease,transform .22s ease!important}

/* Green quote CTA -> blue hover. Text always remains white. */
.btn--gold,
.btn--gold:link,
.btn--gold:visited{
  background:#8CB646!important;
  border-color:#8CB646!important;
  color:#fff!important;
}
.btn--gold:hover,
.btn--gold:focus-visible,
.btn--gold:active{
  background:#025EBE!important;
  border-color:#025EBE!important;
  color:#fff!important;
}

/* Blue CTA -> navy hover. */
.btn--primary,
.btn--primary:link,
.btn--primary:visited{
  background:#025EBE!important;
  border-color:#025EBE!important;
  color:#fff!important;
}
.btn--primary:hover,
.btn--primary:focus-visible,
.btn--primary:active{
  background:#061F45!important;
  border-color:#061F45!important;
  color:#fff!important;
}

/* Arrow-disc buttons: same visible icon on every background. */
.btn--gold>svg,.btn--primary>svg{
  width:40px!important;
  height:40px!important;
  padding:11px!important;
  margin-right:-16px;
  border-radius:50%!important;
  background:#061F45!important;
  color:#fff!important;
  stroke:currentColor!important;
}
.btn--gold:hover>svg,.btn--gold:focus-visible>svg,
.btn--primary:hover>svg,.btn--primary:focus-visible>svg{
  background:#fff!important;
  color:#025EBE!important;
  stroke:currentColor!important;
  transform:translateX(2px)!important;
}

/* Outline CTA on light sections. */
.btn--ghost,
.btn--ghost:link,
.btn--ghost:visited{
  background:transparent!important;
  border-color:#061F45!important;
  color:#061F45!important;
}
.btn--ghost:hover,
.btn--ghost:focus-visible,
.btn--ghost:active{
  background:#061F45!important;
  border-color:#061F45!important;
  color:#fff!important;
}
.btn--ghost>svg{width:18px!important;height:18px!important;padding:0!important;margin:0!important;background:transparent!important;color:currentColor!important;stroke:currentColor!important}

/* Outline CTA on dark/gradient/hero surfaces: white -> white fill / navy text. */
.dark .btn--ghost,.dark .btn--ghost:link,.dark .btn--ghost:visited,
.hero .btn--ghost,.hero .btn--ghost:link,.hero .btn--ghost:visited,
.phero .btn--ghost,.phero .btn--ghost:link,.phero .btn--ghost:visited,
.band .btn--ghost,.band .btn--ghost:link,.band .btn--ghost:visited,
.grad .btn--ghost,.grad .btn--ghost:link,.grad .btn--ghost:visited,
.card--ink .btn--ghost,.card--ink .btn--ghost:link,.card--ink .btn--ghost:visited{
  background:transparent!important;
  border-color:#fff!important;
  color:#fff!important;
}
.dark .btn--ghost:hover,.dark .btn--ghost:focus-visible,
.hero .btn--ghost:hover,.hero .btn--ghost:focus-visible,
.phero .btn--ghost:hover,.phero .btn--ghost:focus-visible,
.band .btn--ghost:hover,.band .btn--ghost:focus-visible,
.grad .btn--ghost:hover,.grad .btn--ghost:focus-visible,
.card--ink .btn--ghost:hover,.card--ink .btn--ghost:focus-visible{
  background:#fff!important;
  border-color:#fff!important;
  color:#061F45!important;
}

/* Keep paired CTAs visually equal in height and substantial in width. */
.btns{align-items:center}
.btns .btn{min-width:190px}
.btn--head,.btn--head:link,.btn--head:visited{
  min-height:50px!important;
  height:50px!important;
  min-width:0!important;
  padding:0 20px!important;
  font-size:.92rem!important;
}
.btn--head>svg{width:34px!important;height:34px!important;padding:9px!important;margin-right:-14px!important}

/* Homepage custom CTAs use the same safe contrast rules. */
.allite-mockup-hero__primary,
.allite-mockup-hero__primary:link,
.allite-mockup-hero__primary:visited,
.allite-about__cta,
.allite-about__cta:link,
.allite-about__cta:visited{
  min-height:58px!important;
  height:58px!important;
  background:#8CB646!important;
  border:2px solid #8CB646!important;
  color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
  transition:background-color .22s ease,border-color .22s ease,color .22s ease,transform .22s ease!important;
}
.allite-mockup-hero__primary:hover,
.allite-mockup-hero__primary:focus-visible,
.allite-about__cta:hover,
.allite-about__cta:focus-visible{
  background:#025EBE!important;
  border-color:#025EBE!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
}
.allite-mockup-hero__primary-icon,.allite-about__cta-icon{
  background:#061F45!important;
  color:#fff!important;
}
.allite-mockup-hero__primary:hover .allite-mockup-hero__primary-icon,
.allite-mockup-hero__primary:focus-visible .allite-mockup-hero__primary-icon,
.allite-about__cta:hover .allite-about__cta-icon,
.allite-about__cta:focus-visible .allite-about__cta-icon{
  background:#fff!important;
  color:#025EBE!important;
}

.allite-mockup-hero__secondary,
.allite-mockup-hero__secondary:link,
.allite-mockup-hero__secondary:visited{
  min-height:58px!important;
  height:58px!important;
  border:2px solid rgba(255,255,255,.82)!important;
  background:transparent!important;
  color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
  transition:background-color .22s ease,border-color .22s ease,color .22s ease,transform .22s ease!important;
}
.allite-mockup-hero__secondary:hover,
.allite-mockup-hero__secondary:focus-visible{
  background:#fff!important;
  border-color:#fff!important;
  color:#061F45!important;
  transform:translateY(-1px)!important;
}

@media (max-width:640px){
  .btns .btn{width:100%;min-width:0}
  .btn,.btn:link,.btn:visited{min-height:56px;height:56px}
  .allite-mockup-hero__primary,.allite-mockup-hero__secondary,.allite-about__cta{
    width:100%;min-height:56px!important;height:56px!important;justify-content:center
  }
}

@media (prefers-reduced-motion:reduce){
  .btn,.allite-mockup-hero__primary,.allite-mockup-hero__secondary,.allite-about__cta{transition:none!important}
}

/* ========================================================================== 
   FINAL BUTTON CLEANUP — 2026-09-12
   One clean button language everywhere. No giant pills, no boxed/circled
   glyphs, no disappearing text on hover.
   ========================================================================== */
:root{
  --btn-h:52px;
  --btn-r:11px;
}

/* shared geometry */
a.btn,.btn,
.allite-mockup-hero__primary,
.allite-mockup-hero__secondary,
.allite-about__cta{
  min-height:var(--btn-h)!important;
  height:auto!important;
  border-radius:var(--btn-r)!important;
  padding:0 20px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  font-size:.95rem!important;
  font-weight:750!important;
  line-height:1.15!important;
  letter-spacing:0!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  transform:none!important;
}

/* plain, properly sized icons — no circles/squares inside buttons */
a.btn>svg,.btn>svg,
a.btn[href^="tel:"]>svg,
.btn--gold>svg,.btn--primary>svg,
.allite-mockup-hero__primary svg,
.allite-mockup-hero__secondary svg,
.allite-about__cta svg{
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  stroke:currentColor!important;
  box-shadow:none!important;
  flex:0 0 17px!important;
}

/* remove the old circular arrow wrappers on custom CTAs */
.allite-mockup-hero__primary-icon,
.allite-about__cta-icon{
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-shadow:none!important;
  flex:0 0 17px!important;
}

/* solid CTAs */
.btn--primary,
a.btn--primary:link,
a.btn--primary:visited{
  background:#025EBE!important;
  border:2px solid #025EBE!important;
  color:#fff!important;
}
.btn--primary:hover,
.btn--primary:focus-visible{
  background:#061F45!important;
  border-color:#061F45!important;
  color:#fff!important;
}

.btn--gold,
a.btn--gold:link,
a.btn--gold:visited{
  background:#8CB646!important;
  border:2px solid #8CB646!important;
  color:#fff!important;
}
.btn--gold:hover,
.btn--gold:focus-visible{
  background:#025EBE!important;
  border-color:#025EBE!important;
  color:#fff!important;
}

/* outline CTAs */
.btn--ghost,
a.btn--ghost:link,
a.btn--ghost:visited{
  background:transparent!important;
  border:2px solid #061F45!important;
  color:#061F45!important;
}
.btn--ghost:hover,
.btn--ghost:focus-visible{
  background:#061F45!important;
  border-color:#061F45!important;
  color:#fff!important;
}
.dark .btn--ghost,
.hero .btn--ghost,
.phero .btn--ghost,
.band .btn--ghost,
.card--ink .btn--ghost{
  background:transparent!important;
  border-color:rgba(255,255,255,.72)!important;
  color:#fff!important;
}
.dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.phero .btn--ghost:hover,
.band .btn--ghost:hover,
.card--ink .btn--ghost:hover{
  background:#fff!important;
  border-color:#fff!important;
  color:#061F45!important;
}

/* phone buttons: keep handset + number clean and centred */
a.btn[href^="tel:"]{
  justify-content:center!important;
  gap:9px!important;
  padding-inline:20px!important;
}
a.btn[href^="tel:"]>svg{
  color:inherit!important;
  stroke:currentColor!important;
}

/* header quote button uses the exact same geometry */
.btn--head{
  min-height:var(--btn-h)!important;
  padding:0 18px!important;
  font-size:.92rem!important;
}

/* homepage custom hero/about CTAs follow the same system */
.allite-mockup-hero__primary,
.allite-about__cta{
  background:#8CB646!important;
  border:2px solid #8CB646!important;
  color:#fff!important;
}
.allite-mockup-hero__primary:hover,
.allite-about__cta:hover{
  background:#025EBE!important;
  border-color:#025EBE!important;
  color:#fff!important;
}
.allite-mockup-hero__secondary{
  background:transparent!important;
  border:2px solid rgba(255,255,255,.72)!important;
  color:#fff!important;
}
.allite-mockup-hero__secondary:hover{
  background:#fff!important;
  border-color:#fff!important;
  color:#061F45!important;
}

/* hover stays readable and stable */
a.btn:hover,.btn:hover,
.allite-mockup-hero__primary:hover,
.allite-mockup-hero__secondary:hover,
.allite-about__cta:hover{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(-1px)!important;
  text-decoration:none!important;
}
a.btn:active,.btn:active,
.allite-mockup-hero__primary:active,
.allite-mockup-hero__secondary:active,
.allite-about__cta:active{
  transform:none!important;
}

/* groups line up to one height */
.btns{align-items:center!important;gap:12px!important}
.btns>.btn{min-height:var(--btn-h)!important}

/* mobile: full width where grouped, but still the same clean rectangle */
@media (max-width:640px){
  .btns>.btn,
  .allite-mockup-hero__buttons>a,
  .allite-about__cta{
    width:100%!important;
    min-height:var(--btn-h)!important;
    justify-content:center!important;
    padding:0 18px!important;
  }
  .btns .btn--gold>svg,
  .btns .btn--primary>svg,
  .allite-mockup-hero__primary-icon,
  .allite-about__cta-icon{
    margin:0!important;
  }
}

/* mobile drawer CTAs should not revert to the old pill/card treatment */
@media (max-width:920px){
  .nav .m-cta .btn{
    min-height:52px!important;
    border-radius:11px!important;
    padding:0 16px!important;
    font-size:.92rem!important;
  }
  .nav .m-cta .btn--primary{
    background:#025EBE!important;
    border-color:#025EBE!important;
    color:#fff!important;
  }
  .nav .m-cta .btn--primary:hover{background:#8CB646!important;border-color:#8CB646!important}
  .nav .m-cta .btn--ghost{
    background:transparent!important;
    border-color:rgba(255,255,255,.7)!important;
    color:#fff!important;
  }
  .nav .m-cta .btn--ghost:hover{background:#fff!important;border-color:#fff!important;color:#061F45!important}
}

/* ========================================================================== 
   FINAL PILL CTA OVERRIDE — 2026-09-12
   Keep the original premium pill silhouette. Icons stay plain/transparent in
   every state — no white square, circle or boxed icon on hover.
   ========================================================================== */
:root{
  --btn-h:54px;
  --btn-r:999px;
}

/* Premium pill geometry everywhere */
a.btn,.btn,
.btn--head,
.nav .m-cta .btn,
.allite-mockup-hero__primary,
.allite-mockup-hero__secondary,
.allite-about__cta{
  min-height:var(--btn-h)!important;
  border-radius:999px!important;
  padding:0 24px!important;
  gap:10px!important;
  overflow:hidden!important;
  box-shadow:none!important;
}

.btn--head{
  min-height:50px!important;
  height:50px!important;
  padding:0 22px!important;
}

/* ALL CTA icons are clean inline glyphs — never a white/coloured box. */
a.btn>svg,.btn>svg,
.btn--gold>svg,.btn--primary>svg,.btn--ghost>svg,
a.btn[href^="tel:"]>svg,
.allite-mockup-hero__primary svg,
.allite-mockup-hero__secondary svg,
.allite-about__cta svg,
.btn:hover>svg,.btn:focus-visible>svg,.btn:active>svg,
.btn--gold:hover>svg,.btn--gold:focus-visible>svg,.btn--gold:active>svg,
.btn--primary:hover>svg,.btn--primary:focus-visible>svg,.btn--primary:active>svg{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  color:currentColor!important;
  stroke:currentColor!important;
  fill:none!important;
  box-shadow:none!important;
  filter:none!important;
  flex:0 0 18px!important;
}

/* Remove old custom icon discs/wrappers too. */
.allite-mockup-hero__primary-icon,
.allite-about__cta-icon,
.allite-mockup-hero__primary:hover .allite-mockup-hero__primary-icon,
.allite-about__cta:hover .allite-about__cta-icon,
.allite-mockup-hero__primary:focus-visible .allite-mockup-hero__primary-icon,
.allite-about__cta:focus-visible .allite-about__cta-icon{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  color:currentColor!important;
  box-shadow:none!important;
  flex:0 0 18px!important;
}

/* Solid buttons: whole pill changes colour; icon stays white and transparent. */
.btn--gold,
.btn--gold:link,
.btn--gold:visited,
.allite-mockup-hero__primary,
.allite-about__cta{
  background:#8CB646!important;
  border-color:#8CB646!important;
  color:#fff!important;
}
.btn--gold:hover,.btn--gold:focus-visible,.btn--gold:active,
.allite-mockup-hero__primary:hover,.allite-mockup-hero__primary:focus-visible,
.allite-about__cta:hover,.allite-about__cta:focus-visible{
  background:#025EBE!important;
  border-color:#025EBE!important;
  color:#fff!important;
}

.btn--primary,.btn--primary:link,.btn--primary:visited{
  background:#025EBE!important;
  border-color:#025EBE!important;
  color:#fff!important;
}
.btn--primary:hover,.btn--primary:focus-visible,.btn--primary:active{
  background:#061F45!important;
  border-color:#061F45!important;
  color:#fff!important;
}

/* A tiny arrow movement is enough; no icon container effect. */
.btn--gold:hover>svg,.btn--gold:focus-visible>svg,
.btn--primary:hover>svg,.btn--primary:focus-visible>svg,
.allite-mockup-hero__primary:hover svg,
.allite-about__cta:hover svg{
  transform:translateX(2px)!important;
  background:transparent!important;
  color:#fff!important;
  stroke:#fff!important;
}

/* Phone CTAs remain pill-shaped and centred. */
a.btn[href^="tel:"]{
  border-radius:999px!important;
  padding-inline:24px!important;
  gap:9px!important;
}

/* Mobile keeps the exact same pill language. */
@media (max-width:920px){
  .nav .m-cta .btn{
    min-height:52px!important;
    border-radius:999px!important;
    padding:0 20px!important;
  }
}
@media (max-width:640px){
  .btns>.btn,
  .allite-mockup-hero__buttons>a,
  .allite-about__cta{
    border-radius:999px!important;
    min-height:54px!important;
    padding-inline:22px!important;
  }
}

/* ========================================================================== 
   MOBILE HEADER + SMOOTH INTERACTION PASS — 2026-09-12
   Restores a clean compact mobile header, keeps pill CTAs, and adds restrained
   hover motion to buttons/images only. No scroll-reveal / fly-in animation.
   ========================================================================== */

/* Smooth, premium CTA motion. Keep the whole pill as the moving object; icons
   remain transparent glyphs so the old white icon-box can never return. */
a.btn,.btn,
.allite-mockup-hero__primary,
.allite-mockup-hero__secondary,
.allite-about__cta{
  transition:
    background-color .30s cubic-bezier(.22,1,.36,1),
    border-color .30s cubic-bezier(.22,1,.36,1),
    color .24s ease,
    box-shadow .30s cubic-bezier(.22,1,.36,1),
    transform .30s cubic-bezier(.22,1,.36,1)!important;
  will-change:transform;
}
a.btn>svg,.btn>svg,
.allite-mockup-hero__primary svg,
.allite-mockup-hero__secondary svg,
.allite-about__cta svg{
  transition:transform .30s cubic-bezier(.22,1,.36,1),stroke .22s ease,color .22s ease!important;
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
}
@media (hover:hover) and (pointer:fine){
  a.btn:hover,.btn:hover,
  .allite-mockup-hero__primary:hover,
  .allite-mockup-hero__secondary:hover,
  .allite-about__cta:hover{
    transform:translateY(-2px)!important;
    box-shadow:0 10px 22px rgba(6,31,69,.14)!important;
  }
  .btn--gold:hover>svg,.btn--gold:focus-visible>svg,
  .btn--primary:hover>svg,.btn--primary:focus-visible>svg,
  .allite-mockup-hero__primary:hover svg,
  .allite-about__cta:hover svg{
    transform:translateX(3px)!important;
    background:transparent!important;
    background-color:transparent!important;
    box-shadow:none!important;
  }
}
a.btn:active,.btn:active,
.allite-mockup-hero__primary:active,
.allite-mockup-hero__secondary:active,
.allite-about__cta:active{
  transform:translateY(0) scale(.985)!important;
  box-shadow:none!important;
}

/* Smooth image motion. Only subtle frame hover/focus motion — no entrance
   animation, so page content still renders immediately. */
.division-media img,
.pcard-media img,
.scard img,
.split-media>img,
.media-pair img,
.phero-media img,
.gallery figure img,
.allite-mockup-hero__main-image,
.allite-about__image img{
  transition:transform .65s cubic-bezier(.22,1,.36,1),filter .45s ease!important;
  transform:scale(1)!important;
  will-change:transform;
}
.division-media,.pcard-media,.scard,.split-media,.phero-media,.gallery figure,
.allite-mockup-hero__image-card,.allite-about__image{overflow:hidden}
@media (hover:hover) and (pointer:fine){
  .division:hover .division-media img,
  .pcard:hover .pcard-media img,
  .scard:hover img,
  .split-media:hover>img,
  .media-pair:hover img,
  .phero-media:hover img,
  .gallery figure:hover img,
  .allite-mockup-hero__image-card:hover .allite-mockup-hero__main-image,
  .allite-about__image:hover img{
    transform:scale(1.035)!important;
  }
}

/* MOBILE HEADER — keep it compact, aligned and independent from CTA overrides. */
@media (max-width:920px){
  .hdr{
    padding:8px 4% 0!important;
    background:transparent!important;
    border:0!important;
  }
  .hdr>.wrap,
  body.home .hdr>.wrap{
    width:100%!important;
    max-width:none!important;
    min-height:64px!important;
    margin:0!important;
    padding:0 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    border-radius:17px!important;
    background:#fff!important;
    box-shadow:0 12px 30px rgba(6,31,69,.12)!important;
  }

  /* Mobile only needs the primary identity. Hiding the second badge prevents
     the logo group from crushing the hamburger on 360–430px screens. */
  .hdr .brand{
    min-width:0!important;
    max-width:calc(100% - 56px)!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    overflow:hidden!important;
  }
  .hdr .brand-mark{
    width:auto!important;
    height:34px!important;
    flex:0 0 auto!important;
  }
  .hdr .brand-rule,
  .hdr .brand-badge{
    display:none!important;
  }
  .hdr .brand-txt{
    display:flex!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .hdr .brand-name{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:.95rem!important;
    line-height:1.05!important;
  }
  .hdr .brand-sub{
    margin-top:4px!important;
    font-size:.50rem!important;
    letter-spacing:.18em!important;
  }

  .burger{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    flex:0 0 44px!important;
    margin-left:auto!important;
    padding:0!important;
    border-radius:13px!important;
    border:1px solid rgba(2,94,190,.16)!important;
    background:linear-gradient(145deg,#061F45 0%,#025EBE 100%)!important;
    box-shadow:0 8px 18px rgba(6,31,69,.16)!important;
    transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s ease,background .24s ease!important;
  }
  .burger:hover{transform:translateY(-1px)!important;box-shadow:0 10px 22px rgba(6,31,69,.20)!important}
  .burger:active{transform:scale(.95)!important}
  .burger span,.burger span::before,.burger span::after{
    width:20px!important;
    height:2px!important;
    background:#fff!important;
    border-radius:999px!important;
    transition:transform .28s cubic-bezier(.22,1,.36,1),background-color .18s ease!important;
  }
  .burger[aria-expanded="true"] span{background:transparent!important}
  .burger[aria-expanded="true"] span::before{transform:rotate(45deg)!important}
  .burger[aria-expanded="true"] span::after{transform:rotate(-45deg)!important}

  /* Drawer starts exactly below the measured sticky header and animates cleanly. */
  .nav{
    inset:var(--hdr-h,72px) 0 0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-8px)!important;
    transition:opacity .28s ease,transform .32s cubic-bezier(.22,1,.36,1),visibility 0s linear .32s!important;
  }
  .nav.open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
    transition:opacity .28s ease,transform .32s cubic-bezier(.22,1,.36,1),visibility 0s!important;
  }

  /* Keep drawer CTA pills compact and readable; do not let global button
     sizing turn them into oversized blocks. */
  .nav .m-cta .btn{
    min-height:50px!important;
    height:50px!important;
    min-width:0!important;
    width:100%!important;
    padding:0 18px!important;
    border-radius:999px!important;
    font-size:.90rem!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
}

@media (max-width:430px){
  .hdr{padding-inline:12px!important}
  .hdr>.wrap,body.home .hdr>.wrap{min-height:60px!important;padding-inline:12px!important}
  .hdr .brand-mark{height:31px!important}
  .hdr .brand-name{font-size:.88rem!important}
  .hdr .brand-sub{font-size:.46rem!important}
  .burger{width:42px!important;height:42px!important;min-width:42px!important;flex-basis:42px!important}
}

@media (max-width:350px){
  .hdr .brand-name{font-size:.82rem!important}
  .hdr .brand-sub{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  a.btn,.btn,a.btn>svg,.btn>svg,
  .division-media img,.pcard-media img,.scard img,.split-media>img,.media-pair img,
  .phero-media img,.gallery figure img,.allite-mockup-hero__main-image,.allite-about__image img,
  .burger,.burger span,.burger span::before,.burger span::after,.nav{
    transition:none!important;
  }
}

/* ========================================================================== 
   FINAL MOBILE HEADER RESTORE — 2026-09-12
   Keep BOTH Allite identities visible on mobile and keep the header above the
   Lenis-stopped drawer. This intentionally overrides the previous mobile pass.
   ========================================================================== */
@media (max-width:920px){
  /* Fixed on mobile so Lenis stop / body overflow can never scroll the header away. */
  .hdr{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    z-index:140!important;
    padding:8px 4% 0!important;
    background:transparent!important;
    border:0!important;
    pointer-events:none;
  }
  .hdr>.wrap,
  body.home .hdr>.wrap{
    width:100%!important;
    max-width:none!important;
    min-height:66px!important;
    margin:0!important;
    padding:0 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 12px 30px rgba(6,31,69,.14)!important;
    pointer-events:auto;
  }

  /* Restore the logo group. The previous pass hid the cleaning logo; both now stay. */
  .hdr .brand{
    min-width:0!important;
    max-width:calc(100% - 56px)!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    overflow:visible!important;
    white-space:nowrap!important;
  }
  .hdr .brand-mark{
    display:block!important;
    width:auto!important;
    height:33px!important;
    flex:0 0 auto!important;
  }
  .hdr .brand-txt{
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
    overflow:visible!important;
    flex:0 1 auto!important;
  }
  .hdr .brand-name{
    display:block!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    font-size:.91rem!important;
    line-height:1.02!important;
  }
  .hdr .brand-sub{
    display:block!important;
    margin-top:4px!important;
    font-size:.47rem!important;
    letter-spacing:.18em!important;
  }
  .hdr .brand-rule{
    display:block!important;
    width:1px!important;
    height:27px!important;
    margin:0 1px!important;
    background:rgba(6,31,69,.16)!important;
    flex:0 0 1px!important;
  }
  .hdr .brand-badge{
    display:block!important;
    width:auto!important;
    height:33px!important;
    max-width:33px!important;
    object-fit:contain!important;
    flex:0 0 auto!important;
  }

  .burger{
    position:relative!important;
    z-index:2!important;
    display:grid!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    flex:0 0 44px!important;
    margin-left:auto!important;
  }

  /* Drawer always begins below and sits behind the visible header. */
  .nav{
    z-index:130!important;
    inset:var(--hdr-h,74px) 0 0!important;
  }

  /* Header is fixed now, so heroes no longer need the old negative pull-up. */
  .allite-mockup-hero,
  .phero{
    margin-top:0!important;
  }
  .allite-mockup-hero{
    padding-top:calc(var(--hdr-h,74px) + 6%)!important;
  }
  .phero{
    padding-top:calc(var(--hdr-h,74px) + 6%)!important;
  }
}

@media (max-width:430px){
  .hdr{padding:7px 12px 0!important}
  .hdr>.wrap,body.home .hdr>.wrap{min-height:62px!important;padding:0 11px!important;gap:8px!important}
  .hdr .brand{gap:7px!important;max-width:calc(100% - 50px)!important}
  .hdr .brand-mark{height:30px!important}
  .hdr .brand-name{font-size:.80rem!important}
  .hdr .brand-sub{font-size:.43rem!important;margin-top:3px!important}
  .hdr .brand-rule{height:24px!important}
  .hdr .brand-badge{height:30px!important;max-width:30px!important}
  .burger{width:42px!important;height:42px!important;min-width:42px!important;flex-basis:42px!important}
}

/* On very narrow phones keep both actual logos and only drop the text lockup. */
@media (max-width:355px){
  .hdr .brand-txt{display:none!important}
  .hdr .brand-mark{height:31px!important}
  .hdr .brand-badge{height:31px!important;max-width:31px!important}
  .hdr .brand-rule{height:25px!important}
}