/* ===========================================================
   Kamee-Tek — HVAC Water Treatment
   Visual world: "Instrumented". See DESIGN.md
   =========================================================== */

:root{
  /* brand, sampled from the live site + logo master */
  --abyss:#04202C;        /* brand teal, deepened — dark ground */
  --abyss-2:#06293a;
  --navy:#1F4978;         /* primary */
  --navy-d:#15334F;
  --teal:#004152;         /* deep shade */
  --sky:#9CC5E9;          /* the beam */
  --flow:#38C6E0;         /* detonates once per viewport */
  --flow-d:#1BA9C4;

  --paper:#FFFFFF;
  --mist:#F4F7FA;
  --rule:#DDE5EC;
  --rule-d:rgba(156,197,233,.20);

  --ink:#0E2430;          /* body on light */
  --ink-2:#4A6373;        /* secondary on light — 5.2:1 on paper */
  --on-dark:#EAF2F8;
  --on-dark-2:#9FBCCB;    /* secondary on dark — tinted from hue, 6.3:1 on abyss */

  --d:"Montserrat",system-ui,sans-serif;
  --b:"IBM Plex Sans",system-ui,sans-serif;
  --m:"IBM Plex Mono",ui-monospace,monospace;

  --sh-1:0 2px 4px rgba(4,32,44,.05), 0 8px 20px rgba(4,32,44,.07);
  --sh-2:0 4px 10px rgba(4,32,44,.07), 0 20px 46px rgba(4,32,44,.11);

  --ease:cubic-bezier(.16,.84,.36,1);
  --shell:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 clamp(1rem,.96rem + .18vw,1.0625rem)/1.65 var(--b);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--d);font-weight:700;line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}

.shell{width:min(100% - 2.5rem,var(--shell));margin-inline:auto}
@media (max-width:640px){.shell{width:min(100% - 2rem,var(--shell))}}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--flow);color:var(--abyss);
  padding:.75rem 1.25rem;font:600 .9rem var(--b);border-radius:0 0 4px 0}
.skip:focus{left:0}

:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--flow);outline-offset:3px;border-radius:2px}

/* ── type scale ───────────────────────────────────────────── */
.h2{font-size:clamp(2rem,1.45rem + 2.3vw,3.4rem);color:var(--teal)}
.h2--light{color:var(--paper)}
.h3{font-size:clamp(1.35rem,1.2rem + .6vw,1.75rem);letter-spacing:-.025em}
.lead{margin-top:1.15rem;max-width:62ch;font-size:clamp(1.05rem,1rem + .3vw,1.2rem);color:var(--ink-2)}
.lead--wide{max-width:72ch}
.lead strong{color:var(--teal);font-weight:600}

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  --bg:var(--flow);--fg:var(--abyss);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.6rem;border-radius:3px;
  font:600 .975rem/1 var(--b);letter-spacing:.005em;text-decoration:none;
  background:var(--bg);color:var(--fg);border:1px solid transparent;
  transition:transform .24s var(--ease),background-color .24s var(--ease),
             box-shadow .24s var(--ease),border-color .24s var(--ease),color .24s var(--ease);
  will-change:transform;
}
.btn--flow{box-shadow:0 2px 6px rgba(4,32,44,.16),0 10px 26px rgba(56,198,224,.26)}
.btn--flow:hover{background:#4FD3EC;transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(4,32,44,.18),0 16px 36px rgba(56,198,224,.36)}
.btn--ghost{background:transparent;color:var(--on-dark);border-color:var(--rule-d)}
.btn--ghost:hover{border-color:var(--sky);color:var(--paper);background:rgba(156,197,233,.08);transform:translateY(-2px)}
.btn--sm{padding:.65rem 1.1rem;font-size:.875rem}
.btn--lg{padding:1.1rem 2rem;font-size:1.0625rem}
.btn:active{transform:translateY(0)}

/* light-surface ghost */
.cta .btn--ghost{color:var(--teal);border-color:var(--rule)}
.cta .btn--ghost:hover{border-color:var(--teal);background:rgba(0,65,82,.05);color:var(--teal)}

/* ===========================================================
   HEADER
   =========================================================== */
.hdr{position:fixed;inset:0 0 auto;z-index:100;
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid transparent}
.hdr__in{display:flex;align-items:center;gap:1.5rem;min-height:78px}
.hdr.is-stuck{background:rgba(4,32,44,.94);border-bottom-color:var(--rule-d);box-shadow:0 1px 0 rgba(0,0,0,.2),0 10px 30px rgba(4,32,44,.3)}
@supports (backdrop-filter:blur(10px)){
  .hdr.is-stuck{background:rgba(4,32,44,.78);backdrop-filter:blur(14px) saturate(140%)}
}
@media (max-width:1024px),(hover:none){
  .hdr.is-stuck{background:rgba(4,32,44,.97);backdrop-filter:none}
}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.brand__mark{width:34px;height:35px;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__txt strong{font:700 1.0625rem/1 var(--d);letter-spacing:.01em;color:var(--paper)}
.brand__txt small{margin-top:.28rem;font:500 .5625rem/1 var(--b);letter-spacing:.19em;
  text-transform:uppercase;color:var(--sky)}

.nav{display:flex;align-items:center;gap:.35rem}
.nav>a:not(.btn){padding:.55rem .85rem;font:500 .9375rem/1 var(--b);color:var(--on-dark-2);
  text-decoration:none;border-radius:3px;transition:color .2s var(--ease),background-color .2s var(--ease)}
.nav>a:not(.btn):hover{color:var(--paper);background:rgba(156,197,233,.09)}
.nav .btn{margin-left:.6rem}

.burger{display:none;width:44px;height:44px;margin-right:-.5rem;background:none;border:0;cursor:pointer;
  padding:0;place-items:center}
.burger span{display:block;width:22px;height:2px;background:var(--paper);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

@media (max-width:900px){
  .burger{display:grid}
  .nav{position:fixed;inset:78px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--abyss);border-bottom:1px solid var(--rule-d);
    padding:.5rem 1.25rem 1.5rem;
    clip-path:inset(0 0 100% 0);transition:clip-path .4s var(--ease);
    box-shadow:0 20px 40px rgba(4,32,44,.4)}
  .nav.is-open{clip-path:inset(0 0 0 0)}
  .nav>a:not(.btn){padding:.95rem .25rem;font-size:1.05rem;border-bottom:1px solid var(--rule-d)}
  .nav .btn{margin:1.1rem 0 0}
}

/* ===========================================================
   HERO  +  SIGNATURE MOMENT
   =========================================================== */
.hero{position:relative;background:var(--abyss);color:var(--on-dark);overflow:hidden;
  padding:clamp(7rem,6rem + 7vw,10.5rem) 0 clamp(3.5rem,2rem + 5vw,6rem)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(90rem 48rem at 76% 14%,rgba(31,73,120,.38),transparent 64%),
    radial-gradient(46rem 32rem at 8% 96%,rgba(0,65,82,.75),transparent 70%)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--rule-d)}
.hero__grid{position:relative;display:grid;gap:clamp(2.5rem,1rem + 5vw,4.5rem);
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:center}
@media (max-width:980px){.hero__grid{grid-template-columns:1fr}}

.hero__h1{font-size:clamp(2.1rem,1.4rem + 3.1vw,3.9rem);letter-spacing:-.038em;color:var(--paper)}
.hero__sub{margin-top:1.4rem;max-width:54ch;font-size:clamp(1.05rem,1rem + .4vw,1.25rem);
  line-height:1.58;color:var(--on-dark-2)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}
.hero__note{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--rule-d);
  max-width:46ch;font-size:.9375rem;color:var(--on-dark-2)}
.hero__note strong{color:var(--sky);font-weight:600}

/* ── the circuit ─────────────────────────────────────────── */
.rig{position:relative}
.rig__svg{width:100%;height:auto;overflow:visible}

.rig__grid path{stroke:rgba(156,197,233,.10);stroke-width:1;fill:none}

.pipe{fill:none;stroke:#5284B8;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;opacity:.92}

.flow{fill:none;stroke:url(#pipeG);stroke-width:4.5;stroke-linecap:round;
  stroke-dasharray:16 30;opacity:.95}
.flow--a{animation:dash 2.6s linear infinite}
.flow--b{animation:dash 3.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-92}}

.unit__body{fill:#0A2838;stroke:var(--sky);stroke-width:2.4}
.unit__fill{fill:rgba(56,198,224,.22);stroke:none}
.coil{fill:none;stroke:var(--sky);stroke-width:2.4;opacity:.75}

.fan__ring{fill:#0A2838;stroke:var(--sky);stroke-width:2.2}
.fan__blades{fill:none;stroke:var(--sky);stroke-width:2.1;stroke-linecap:round;opacity:.85}
.fan__hub{fill:var(--sky)}

.lbl{fill:#B6D0DE;font:500 12.5px/1 var(--b);letter-spacing:.13em;text-anchor:middle}
.lbl--flow{fill:var(--flow)}
.lbl--sm{font-size:11px;letter-spacing:.1em}

.dose__box{fill:#0A2838;stroke:var(--flow);stroke-width:2.2}
.dose__feed{stroke:var(--flow);stroke-width:3;stroke-dasharray:6 7;fill:none;
  animation:feed 1.4s linear infinite}
@keyframes feed{to{stroke-dashoffset:-26}}
.dose__arrow{fill:var(--flow)}
.dose__node{fill:var(--flow);stroke:var(--abyss);stroke-width:2.5;
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{r:7.5;opacity:1}50%{r:9.5;opacity:.72}}
.dose__halo{animation:halo 2.4s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.1)}}
.dose__halo{transform-box:fill-box;transform-origin:center}

.read__bg{fill:rgba(3,22,32,.92);stroke:rgba(156,197,233,.34);stroke-width:1}
.read__k{fill:#A8C6D6;font:500 10.5px/1 var(--b);letter-spacing:.15em}
.read__v{fill:var(--paper);font:500 17.5px/1 var(--m);letter-spacing:-.02em}
.read--ok .read__v{fill:var(--flow)}

/* Entrance choreography for the circuit.
   The resting state below IS the finished state, and every keyframe animates
   *from* the hidden state using `backwards`. Two reasons: the diagram is fully
   drawn when script.js does not run at all, and nothing depends on a `forwards`
   fill continuing to hold a composited layer once the animation has ended —
   which paints intermittently. */
.rig .pipe{stroke-dasharray:1200;stroke-dashoffset:0}
.rig.is-live .pipe{animation:draw 1.5s var(--ease) backwards}
.rig.is-live #pSupply{animation-delay:.22s}
@keyframes draw{from{stroke-dashoffset:1200}}
.rig.is-live .unit{animation:fade .7s var(--ease) .75s backwards}
.rig.is-live .rig__flow{animation:fade .9s var(--ease) 1.25s backwards}
.rig.is-live .dose{animation:fade .7s var(--ease) 1.5s backwards}
.rig.is-live .read__in{animation:riseIn .7s var(--ease) 1.75s backwards}
@keyframes fade{from{opacity:0}}
@keyframes riseIn{from{opacity:0;transform:translateY(8px)}}

@media (prefers-reduced-motion:reduce){
  .rig .pipe{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .rig .unit,.rig .dose,.rig .read__in,.rig .rig__flow{opacity:1;animation:none;transform:none}
  .flow,.fan__blades,.dose__feed,.dose__node,.dose__halo{animation:none}
  .flow{stroke-dasharray:none;opacity:.75}
}
@media (max-width:980px){.rig{margin-top:.5rem}}

/* ===========================================================
   CLIENT WALL
   =========================================================== */
.wall{padding:clamp(4rem,3rem + 4vw,6.5rem) 0;background:var(--paper)}
.wall__h{font-size:clamp(1.5rem,1.2rem + 1.5vw,2.25rem);color:var(--teal);max-width:22ch}
.wall__sub{margin-top:1rem;max-width:68ch;color:var(--ink-2);font-size:1.0375rem}
.wall__grid{margin-top:3rem;display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.wall__grid li{display:grid;place-items:center;background:var(--paper);
  padding:1.75rem 1.25rem;min-height:116px}
.wall__grid img{max-height:46px;width:auto;max-width:100%;object-fit:contain;
  filter:saturate(.9);transition:filter .3s var(--ease),transform .3s var(--ease)}
.wall__grid li:hover img{filter:saturate(1);transform:scale(1.04)}

/* ===========================================================
   STAKES
   =========================================================== */
.stakes{padding:clamp(4rem,3rem + 4vw,7rem) 0;background:var(--mist);
  border-block:1px solid var(--rule)}
.stakes__grid{display:grid;gap:clamp(2.5rem,1rem + 4vw,4.5rem);
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr)}
@media (max-width:940px){.stakes__grid{grid-template-columns:1fr}}
.stakes__fig{margin:2.5rem 0 0;overflow:hidden;border-radius:4px;box-shadow:var(--sh-2)}
.stakes__fig img{width:100%}
@media (max-width:940px){.stakes__fig{display:none}}

.stakes__list{display:grid;gap:0}
.stake{padding:1.75rem 0;border-top:1px solid var(--rule)}
.stake:last-child{border-bottom:1px solid var(--rule)}
.stake dt{font:700 clamp(1.15rem,1.05rem + .4vw,1.4rem)/1.2 var(--d);
  letter-spacing:-.025em;color:var(--teal)}
.stake dd{margin:.65rem 0 0;max-width:64ch;color:var(--ink-2)}
.stake dd strong{color:var(--teal);font-weight:600}

/* ===========================================================
   SERVICES
   =========================================================== */
.svc{padding:clamp(4rem,3rem + 4vw,7rem) 0;background:var(--paper)}
.svc__lead{margin-top:3.25rem;display:grid;gap:clamp(2rem,1rem + 3vw,3.5rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center}
@media (max-width:940px){.svc__lead{grid-template-columns:1fr}}
.svc__fig{margin:0;overflow:hidden;border-radius:4px;box-shadow:var(--sh-2)}
.svc__body p{margin-top:1rem;max-width:56ch;color:var(--ink-2)}
.svc__body .h3{color:var(--teal)}

.ticks{margin-top:1.5rem;display:grid;gap:.6rem}
.ticks li{position:relative;padding-left:1.85rem;font-size:.975rem;color:var(--ink)}
.ticks .ico{position:absolute;left:0;top:.2em;width:18px;height:18px;stroke-width:2.2;color:#1596B2}

.svc__rest{margin-top:clamp(2.5rem,2rem + 2vw,4rem);display:grid;gap:0 clamp(2rem,1rem + 3vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  border-top:1px solid var(--rule)}
.svc__item{padding:1.9rem 0;border-bottom:1px solid var(--rule)}
.svc__item h3{font-size:1.1875rem;letter-spacing:-.02em;color:var(--teal)}
.svc__item p{margin-top:.6rem;font-size:.9625rem;color:var(--ink-2)}

/* ===========================================================
   SECTORS
   =========================================================== */
.sect{padding:clamp(4rem,3rem + 4vw,7rem) 0;background:var(--abyss);color:var(--on-dark);
  position:relative;overflow:hidden}
.sect::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60rem 36rem at 85% 0%,rgba(31,73,120,.5),transparent 65%)}
.sect>.shell{position:relative}
.sect__grid{margin-top:3.25rem;display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.sect__card{display:flex;flex-direction:column;background:rgba(255,255,255,.035);
  border:1px solid var(--rule-d);border-radius:4px;overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.sect__card img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.75) contrast(1.05)}
.sect__card>div{position:relative;padding:2.4rem 1.4rem 1.7rem}
.sect__card h3{font-size:1.1875rem;letter-spacing:-.02em;color:var(--paper)}
.sect__card p{margin-top:.65rem;font-size:.9375rem;color:var(--on-dark-2)}
.sect__who{font-family:var(--m);font-size:.75rem!important;letter-spacing:.02em;
  color:var(--sky)!important;margin-top:1rem!important;padding-top:.85rem;
  border-top:1px solid var(--rule-d)}
@media (hover:hover){
  .sect__card:hover{transform:translateY(-5px);border-color:rgba(156,197,233,.42);
    box-shadow:0 8px 18px rgba(0,0,0,.26),0 26px 56px rgba(0,0,0,.34)}
}

/* ===========================================================
   METHOD
   =========================================================== */
.meth{padding:clamp(4rem,3rem + 4vw,7rem) 0;background:var(--paper)}
.meth__list{margin-top:3.25rem;counter-reset:step;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.meth__list li{counter-increment:step;position:relative;padding:2.4rem 1.5rem 2rem 0;
  border-top:2px solid var(--rule)}
.meth__list li::before{content:counter(step,decimal-leading-zero);
  position:absolute;top:-2px;left:0;padding-top:.85rem;
  font:500 .8125rem/1 var(--m);letter-spacing:.1em;color:var(--flow-d)}
.meth__list li::after{content:"";position:absolute;top:-2px;left:0;width:100%;height:2px;
  background:var(--flow);transform:scaleX(0);transform-origin:left center;
  transition:transform .8s var(--ease)}
.meth__list li.is-in::after{transform:scaleX(1)}
.meth__list h3{margin-top:1.4rem;font-size:1.0625rem;letter-spacing:-.015em;color:var(--teal)}
.meth__list p{margin-top:.6rem;font-size:.9375rem;color:var(--ink-2);max-width:34ch}
@media (prefers-reduced-motion:reduce){.meth__list li::after{transform:none;transition:none}}

/* ===========================================================
   COMPANY
   =========================================================== */
.co{padding:clamp(4rem,3rem + 4vw,7rem) 0;background:var(--navy-d);color:var(--on-dark);
  position:relative;overflow:hidden}
.co::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(54rem 34rem at 12% 110%,rgba(0,65,82,.8),transparent 68%)}
.co__grid{position:relative;display:grid;gap:clamp(2.5rem,1rem + 4vw,4.5rem);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
@media (max-width:940px){.co__grid{grid-template-columns:1fr}}
.co__lead{margin-top:1.25rem;max-width:60ch;font-size:1.0625rem;color:var(--on-dark-2)}
.co__lead strong{color:var(--sky);font-weight:600}

.facts{margin-top:2.75rem;display:grid;gap:1.75rem 1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,124px),1fr))}
.facts dt{font:700 clamp(2rem,1.6rem + 1.6vw,2.9rem)/1 var(--d);letter-spacing:-.04em;color:var(--sky)}
.facts dt span{font-size:.4em;letter-spacing:-.01em;margin-left:.1em;color:var(--on-dark-2)}
.facts dd{margin:.55rem 0 0;font-size:.875rem;line-height:1.45;color:var(--on-dark-2);max-width:22ch}

.co__ranges{margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid var(--rule-d);
  display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap}
.co__ranges p{font:500 .6875rem/1 var(--b);letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark-2);width:100%}
.co__ranges img{height:54px;width:auto;object-fit:contain;background:var(--paper);
  padding:.6rem .95rem;border-radius:3px;
  box-shadow:0 2px 6px rgba(0,0,0,.26),0 10px 24px rgba(0,0,0,.2)}

.exec{padding:1.9rem 1.75rem 2rem;background:rgba(255,255,255,.05);
  border:1px solid var(--rule-d);border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,.18),0 22px 50px rgba(0,0,0,.26)}
.exec h3{font-size:1.3125rem;letter-spacing:-.025em;color:var(--paper)}
.exec__role{margin-top:.4rem;font:600 .8125rem/1 var(--b);letter-spacing:.14em;
  text-transform:uppercase;color:var(--flow)}
.exec__quals{margin-top:.9rem;font-family:var(--m);font-size:.8125rem;color:var(--sky)}
.exec>p:last-child{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--rule-d);
  font-size:.9375rem;color:var(--on-dark-2)}

/* ===========================================================
   CTA
   =========================================================== */
.cta{padding:clamp(4rem,3rem + 4vw,7rem) 0;background:var(--mist);
  border-bottom:1px solid var(--rule)}
.cta__in{max-width:68ch}
.cta__h{font-size:clamp(2rem,1.5rem + 2.2vw,3.25rem);color:var(--teal)}
.cta__in>p{margin-top:1.15rem;max-width:58ch;font-size:1.0625rem;color:var(--ink-2)}
.cta__row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.25rem}
.cta__meta{margin-top:2rem!important;padding-top:1.4rem;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.65rem 1.75rem;
  font-family:var(--m);font-size:.8125rem;color:var(--ink-2)}
.cta__meta li{display:flex;align-items:center;gap:.5rem}
.cta__meta .ico{color:var(--teal)}

/* ===========================================================
   FOOTER
   =========================================================== */
.ftr{background:var(--abyss);color:var(--on-dark-2);padding:clamp(3rem,2rem + 3vw,4.5rem) 0 0}
.ftr__grid{display:grid;gap:2.5rem clamp(1.5rem,1rem + 2vw,3rem);
  grid-template-columns:1.5fr 1fr 1fr 1.1fr}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.ftr__grid{grid-template-columns:1fr}}
.ftr__brand .brand__mark{width:40px;height:42px}
.ftr__brand p{margin-top:1.1rem;font-size:.9375rem;line-height:1.7}
.ftr__brand strong{color:var(--paper);font-family:var(--d);font-weight:700;letter-spacing:.01em}
.ftr h2{font:600 .6875rem/1 var(--b);letter-spacing:.18em;text-transform:uppercase;
  color:var(--sky);margin-bottom:1.1rem}
.ftr__nav{display:flex;flex-direction:column;gap:.6rem}
.ftr__nav a{font-size:.9375rem;text-decoration:none;transition:color .2s var(--ease)}
.ftr__nav a:hover{color:var(--paper)}
.ftr__cta p{margin:.9rem 0 1.4rem;font-size:.9375rem;line-height:1.7}
.ftr__mail{font-size:.9375rem;color:var(--sky);text-decoration:none;
  border-bottom:1px solid var(--rule-d);transition:color .2s var(--ease),border-color .2s var(--ease)}
.ftr__mail:hover{color:var(--paper);border-color:var(--sky)}
.ftr__base{margin-top:clamp(2.5rem,2rem + 2vw,3.5rem);padding:1.5rem 0;
  border-top:1px solid var(--rule-d);display:flex;gap:1rem;flex-wrap:wrap;
  justify-content:space-between;font-size:.8125rem}
.ftr__legal a{text-decoration:none;transition:color .2s var(--ease)}
.ftr__legal a:hover{color:var(--paper)}
.ftr__legal span{opacity:.5;margin:0 .35rem}

/* ===========================================================
   ICONS — one authored family (sprite at the top of index.html).
   Same line language as the hero schematic: 24px grid, 1.6 stroke,
   round joins; water and chemistry parts carry the --ico-ac accent.
   =========================================================== */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;--ico-ac:#1596B2}
.ico--sm{width:17px;height:17px}
.ico--btn{width:18px;height:18px;stroke-width:1.9}
.ico--note{width:22px;height:22px;margin-top:.1rem;color:var(--sky);--ico-ac:var(--flow)}

.ico-tile{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;
  border-radius:6px;color:var(--navy);
  background:linear-gradient(155deg,#F4F9FD 20%,#E1EDF7);
  border:1px solid #CADDEC;
  box-shadow:0 1px 2px rgba(4,32,44,.05),0 6px 14px rgba(4,32,44,.07);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.ico-tile .ico{width:27px;height:27px}
.ico-tile--lg{width:56px;height:56px}
.ico-tile--lg .ico{width:30px;height:30px}

/* dark badge: straddles the sector photo and its text */
.ico-tile--badge{position:absolute;top:-26px;left:1.4rem;width:52px;height:52px;
  color:var(--sky);background:linear-gradient(155deg,#0F3549,#07222F);
  border-color:rgba(156,197,233,.34);
  box-shadow:0 3px 8px rgba(0,0,0,.3),0 12px 26px rgba(0,0,0,.3)}
.ico-tile--badge .ico{--ico-ac:var(--flow)}

/* placements */
.btn--flow .ico--btn{transition:transform .24s var(--ease)}
.btn--flow:hover .ico--btn{transform:translateX(3px)}

.hero__note{display:flex;gap:.75rem;align-items:flex-start}

.stake{position:relative;padding-left:4.4rem}
.stake dt .ico-tile{position:absolute;left:0;top:1.65rem}

.svc__h{display:flex;align-items:center;gap:1rem}
.svc__item .ico-tile{margin-bottom:1.1rem}

.meth__list .ico-tile + h3{margin-top:1rem}

.exec__quals{display:flex;align-items:center;gap:.5rem}
.exec__quals .ico{--ico-ac:var(--flow)}

.ftr .ico{color:var(--sky);--ico-ac:var(--flow)}
.ftr__mail{display:inline-flex;align-items:center;gap:.5rem}
.ftr__cta .ftr__hours{display:flex;gap:.5rem;align-items:flex-start}
.ftr__hours .ico{margin-top:.3rem}

@media (hover:hover){
  .svc__item:hover .ico-tile,
  .meth__list li:hover .ico-tile,
  .stake:hover .ico-tile{transform:translateY(-3px);border-color:var(--flow);
    box-shadow:0 2px 4px rgba(4,32,44,.06),0 12px 24px rgba(4,32,44,.11)}
  .sect__card:hover .ico-tile--badge{border-color:var(--flow)}
}
@media (max-width:480px){
  .stake{padding-left:3.75rem}
  .stake dt .ico-tile{width:42px;height:42px}
  .stake dt .ico-tile .ico{width:23px;height:23px}
}

/* ===========================================================
   REVEALS — quiet everywhere except the hero circuit
   =========================================================== */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .btn,.sect__card,.wall__grid img,.ico-tile,.ico--btn{transition:none!important}
  .ico-tile,.ico--btn{transform:none!important}
}
/* mobile / touch: drop the expensive stuff (Safari jank) */
@media (max-width:1024px),(hover:none){
  .sect__card,.wall__grid img{transition:none}
  .stakes__fig,.svc__fig,.exec{box-shadow:var(--sh-1)}
}