/* ── TOKENS ── */
:root{
  --blue:#0078C8;
  --blue-dark:#005A9E;
  --blue-deep:#003A6E;
  --blue-xdeep:#001933;
  --blue-light:#3399D6;
  --green:#8CC828;
  --green-dark:#6A9A1A;
  --green-light:#A8E040;
  --dark:#020D1A;
  --dark2:#041020;
  --white:#FFFFFF;
  --gray-50:#F8FAFC;
  --gray-100:#F0F4F8;
  --gray-200:#E2E8F0;
  --gray-500:#64748B;
  --gray-700:#334155;
  --gray-900:#0F172A;
  --text-dark:#0D1B2A;
  --muted-dark:rgba(13,27,42,0.58);
  --muted-light:rgba(255,255,255,0.65);
  --gray-300:#CBD5E1;
  --card-shadow:0 4px 24px rgba(0,0,0,0.08);
  --card-shadow-hover:0 16px 48px rgba(0,0,0,0.14);
  --radius-card:20px;
  --radius-btn:10px;
  --radius-pill:999px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--white);
  color:var(--text-dark);
  overflow-x:hidden;
  cursor:auto;
}

/* ── PROGRESS BAR ── */
#progress-bar{
  position:fixed;top:0;left:0;height:3px;z-index:300;
  background:linear-gradient(90deg,var(--blue),var(--green));
  width:0%;transition:width 0.08s linear;
}

/* ── NAVBAR ── */
#mainNav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:12px 56px;
  display:flex;align-items:center;justify-content:space-between;
  transition:all 0.45s cubic-bezier(0.16,1,0.3,1);
}
#mainNav.scrolled{
  padding:8px 56px;
  background:rgba(2,13,26,0.94);
  backdrop-filter:blur(28px) saturate(180%);
  border-bottom:1px solid rgba(0,120,200,0.22);
  box-shadow:0 4px 40px rgba(0,0,0,0.35);
}
.nav-logo-wrap{display:flex;align-items:center;text-decoration:none}
#navLogoImg{height:74px;width:auto;transition:height 0.4s ease;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.35));
  -webkit-filter:drop-shadow(0 2px 4px rgba(0,0,0,0.35))}
#mainNav.scrolled #navLogoImg{height:54px}
.nav-links{display:flex;gap:22px;list-style:none}
.nav-links a{
  font-size:15px;color:rgba(255,255,255,0.75);text-decoration:none;
  font-weight:700;position:relative;transition:color 0.25s;
  display:flex;align-items:center;gap:5px;
}
/* inline SVG nav icons (replaced emoji for crisp, cross-platform rendering) */
.nav-ico{display:inline-flex;align-items:center;justify-content:center}
.nav-ico svg{width:15px;height:15px;display:block}
.nav-ico.blue{color:var(--blue-light)}
.nav-ico.green{color:var(--green)}
.nav-links a::after{
  content:'';position:absolute;bottom:-5px;left:0;right:0;
  height:2px;background:var(--green);border-radius:2px;
  transform:scaleX(0);transform-origin:right;
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left}
.nav-cta{
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:var(--dark);font-family:'Exo 2',sans-serif;font-weight:700;
  font-size:13px;padding:10px 24px;border-radius:var(--radius-btn);
  border:none;cursor:pointer;
  transition:transform 0.25s,box-shadow 0.25s;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(140,200,40,0.4)}
.nav-cta:active{transform:scale(0.97)}

/* ── HERO ── */
#hero{
  position:relative;
  min-height:100dvh;
  display:flex;
  align-items:stretch;
  background:linear-gradient(to right, #07182b 0%, #0c2a4a 30%, #0e3c69 52%, #115a96 76%, #1a6fb4 100%);
  overflow:hidden;
}

/* banner collage on its own layer so its edges can feather into the gradient */
.hero-photo{
  position:absolute;top:50%;right:0;transform:translateY(-50%);
  height:74%;aspect-ratio:1536 / 1024;
  z-index:0;pointer-events:none;opacity:0.92;
  background:url('../images/home_page.jpg') center / cover no-repeat;
  mix-blend-mode:soft-light;
  /* soft feather on all four edges so there is no hard picture boundary */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 16%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 16%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite:intersect;
}
@media(max-width:768px){
  /* on mobile the photo sits in the lower visual block, behind the scaled 3D scene */
  .hero-photo{
    top:auto;bottom:0;left:0;right:0;
    width:100%;height:300px;
    transform:none;aspect-ratio:auto;
    background-position:center;background-size:cover;
  }
}

/* subtle noise on hero */
#hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;opacity:0.025;
}
/* diagonal line texture across the WHOLE hero (fades in from left so no seam) */
#hero::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(-55deg,
    rgba(255,255,255,0.04) 0px,rgba(255,255,255,0.04) 1px,
    transparent 1px,transparent 22px);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,1) 45%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,1) 45%);
}
/* ambient orbs */
.hero-orb{position:absolute;border-radius:50%;pointer-events:none}
.hero-orb-1{width:600px;height:600px;top:-180px;left:-120px;
  background:radial-gradient(circle,rgba(0,120,200,0.32),transparent 70%);
  animation:orbFloat1 20s ease-in-out infinite alternate}
.hero-orb-2{width:500px;height:500px;bottom:-100px;left:30%;
  background:radial-gradient(circle,rgba(140,200,40,0.18),transparent 70%);
  animation:orbFloat2 26s ease-in-out infinite alternate}
@keyframes orbFloat1{0%{transform:translate(0,0)}100%{transform:translate(60px,50px)}}
@keyframes orbFloat2{0%{transform:translate(0,0)}100%{transform:translate(-50px,-60px)}}

.hero-left{
  position:relative;z-index:2;
  flex:0 0 55%;
  display:flex;flex-direction:column;justify-content:center;
  padding:100px 56px 80px 80px;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;width:fit-content;
  background:rgba(0,120,200,0.14);border:1px solid rgba(0,120,200,0.38);
  border-radius:var(--radius-pill);padding:7px 18px;margin-bottom:32px;
  font-size:11px;color:var(--blue-light);font-weight:600;letter-spacing:1.2px;
  animation:fadeDown 0.8s cubic-bezier(0.16,1,0.3,1) 0.15s both;
}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  animation:badgePulse 2.2s ease infinite}
@keyframes badgePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.55;transform:scale(1.6)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes lineUp{from{opacity:0;transform:translateY(64px)}to{opacity:1;transform:translateY(0)}}

.hero-h1{
  font-family:'Exo 2',sans-serif;
  font-size:clamp(44px,5.2vw,86px);
  font-weight:900;line-height:1.0;
  letter-spacing:-2.5px;margin-bottom:26px;
}
/* word-by-word rise: each word is a clipping mask, its inner <i> slides up */
.hero-line{display:block}
.hero-line.line1{color:#fff}
.hero-line.line2{color:var(--green);-webkit-text-fill-color:var(--green)}
.hero-h1 .word{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em}
.hero-h1 .word > i{
  display:inline-block;font-style:normal;will-change:transform;
  transform:translateY(110%);
  animation:wordRise 0.6s cubic-bezier(0.16,1,0.3,1) both;
  animation-delay:var(--wd,0s);
}
@keyframes wordRise{from{transform:translateY(110%)}to{transform:translateY(0)}}
.hero-sub{
  font-size:16px;color:var(--muted-light);
  max-width:460px;line-height:1.78;font-weight:300;
  margin-bottom:36px;
  animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.9s both;
}
.hero-btns{
  display:flex;gap:12px;flex-wrap:wrap;
  animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 1.05s both;
}
.btn-primary{
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:var(--dark);font-family:'Exo 2',sans-serif;font-weight:800;font-size:14px;
  padding:14px 30px;border-radius:var(--radius-btn);border:none;cursor:pointer;
  display:flex;align-items:center;gap:9px;
  transition:transform 0.28s,box-shadow 0.28s;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(140,200,40,0.42)}
.btn-primary:active{transform:scale(0.97)}
.btn-outline{
  background:transparent;color:#fff;
  font-family:'Exo 2',sans-serif;font-weight:600;font-size:14px;
  padding:13px 28px;border-radius:var(--radius-btn);
  border:1.5px solid rgba(255,255,255,0.32);cursor:pointer;
  transition:all 0.28s;
}
.btn-outline:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.7);transform:translateY(-3px)}
.btn-outline:active{transform:scale(0.97)}

/* ── HERO FEATURE PILLS ── */
.hero-feature-pills{
  display:flex;gap:16px;flex-wrap:wrap;margin-bottom:36px;
  animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 1.0s both;
}
.hfp{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;padding:10px 14px;
  transition:all 0.28s cubic-bezier(0.16,1,0.3,1);
}
.hfp:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.22);transform:translateY(-2px)}
.hfp-icon{
  width:36px;height:36px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}
.hfp-label{
  font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;
  color:#fff;letter-spacing:0.3px;line-height:1.4;text-transform:uppercase;
}

/* ── HERO RIGHT VISUAL ── */
.hero-right{
  position:relative;z-index:1;
  flex:1;
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.hero-right::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 65% 35%,rgba(140,200,40,0.18),transparent 55%),
             radial-gradient(ellipse at 55% 75%,rgba(0,120,200,0.35),transparent 60%);
}
/* radar keyframes (consumed by the inline-styled radar markup) */
@keyframes radarPulse{
  0%{opacity:0.9;transform:scale(0.96)}
  60%{opacity:0.4}
  100%{opacity:0;transform:scale(1.06)}
}
@keyframes radarSweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes centerPulse{
  0%{box-shadow:0 0 0 8px rgba(140,200,40,0.15),0 0 40px rgba(140,200,40,0.4)}
  100%{box-shadow:0 0 0 16px rgba(140,200,40,0.08),0 0 60px rgba(140,200,40,0.7)}
}
@keyframes pestFloat{
  0%{transform:translate(0,0) rotate(0deg) scale(1)}
  100%{transform:translate(var(--dx,10px),var(--dy,-10px)) rotate(var(--rot,15deg)) scale(1.1)}
}
@keyframes badgeFloat{0%{transform:translateY(0)}100%{transform:translateY(-10px)}}

/* ── INTEGRATED HUD SCENE ── */
.hero-right{perspective:1300px;perspective-origin:50% 45%;}
.hud-scene{
  position:relative;width:600px;height:480px;
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(0.22,1,0.36,1);
  will-change:transform;
}
.hud-layer{position:absolute;inset:0;transform-style:preserve-3d;}

/* perspective grid floor */
.hud-grid{
  position:absolute;bottom:18px;left:50%;
  width:960px;height:340px;pointer-events:none;
  transform:translateX(-50%) translateZ(-90px) rotateX(72deg);
  transform-origin:bottom center;
  background-image:
    linear-gradient(rgba(140,200,40,0.20) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,150,255,0.16) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 60% 75% at center top,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 60% 75% at center top,#000 0%,transparent 72%);
  animation:hudGridMove 3.4s linear infinite;
  opacity:0.7;
}
@keyframes hudGridMove{from{background-position:0 0,0 0}to{background-position:0 44px,0 0}}

/* HUD connector lines (SVG) */
.hud-links{position:absolute;inset:0;width:600px;height:480px;pointer-events:none;
  transform:translateZ(25px);overflow:visible;}
.hud-link{
  fill:none;stroke:url(#hudLinkGrad);stroke-width:1.4;
  stroke-dasharray:5 7;
  animation:hudFlow 1.1s linear infinite;
}
@keyframes hudFlow{to{stroke-dashoffset:-24}}
.hud-node{fill:var(--green);filter:drop-shadow(0 0 5px rgba(140,200,40,0.9));
  animation:hudNode 2s ease-in-out infinite;}
.hud-node.b{animation-delay:0.5s}
.hud-node.c{animation-delay:1s}
@keyframes hudNode{0%,100%{r:3.2;opacity:1}50%{r:5;opacity:0.55}}

/* depth placement of radar + badges inside scene */
.hud-radar{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) translateZ(10px);}
.hud-badge{position:absolute;z-index:6;
  background:rgba(255,255,255,0.1);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.22);border-radius:14px;padding:12px 16px;
  transform:translateZ(55px);
  box-shadow:0 18px 40px rgba(0,10,25,0.45);}
.hud-badge .hbf-line1{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:800;color:#fff;}
.hud-badge .hbf-line2{font-size:11px;color:rgba(255,255,255,0.6);margin-top:3px;}
.hud-badge.a{top:34px;right:6px;animation:badgeFloat 4s ease-in-out infinite alternate}
.hud-badge.b{bottom:96px;left:-6px;background:rgba(140,200,40,0.15);border-color:rgba(140,200,40,0.35);
  animation:badgeFloat 5.5s ease-in-out infinite alternate-reverse}
.hud-badge.c{bottom:54px;right:14px;animation:badgeFloat 3.5s ease-in-out infinite alternate}

@media (prefers-reduced-motion:reduce){
  .hud-scene{transition:none}
  .hud-grid,.hud-link,.hud-node{animation:none}
  .hero-h1 .word > i{transform:none;animation:none}
  .ps-stage{transition:none;transform:none}
  .ps-stage.active{transform:none}
  .ps-mesh,.ps-ring,.ps-orbit,.ps-tilt,
  .ps-visual-inner::after,
  .ps-stage.active .ps-stage-ico{animation:none}
}

/* ── SECTION SHARED ── */
.section-label{
  font-size:11px;letter-spacing:2.8px;font-weight:700;
  text-transform:uppercase;margin-bottom:14px;
  display:inline-flex;align-items:center;gap:8px;
}
.section-label.green{color:var(--green)}
.section-label.blue{color:var(--blue)}
.section-label::before{content:'';width:22px;height:2px;border-radius:2px;background:currentColor}
.section-title{
  font-family:'Exo 2',sans-serif;
  font-size:clamp(30px,3.8vw,54px);
  font-weight:900;letter-spacing:-1.5px;line-height:1.06;
}
.section-title.dark{color:var(--blue-dark)}
.section-title.light{color:#fff}
.dim{opacity:0.38}

/* ── STATS STRIP ── */
#stats-strip{
  background:var(--white);
  padding:56px 80px;
  position:relative;z-index:2;
}
.stats-inner{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;max-width:1100px;margin:0 auto;
  border:1px solid var(--gray-200);border-radius:var(--radius-card);
  overflow:hidden;
}
.stat-block{
  padding:36px 28px;text-align:center;
  border-right:1px solid var(--gray-200);
  border-top:1px solid var(--gray-200);
  transition:background 0.3s;
}
.stat-block:nth-child(3n){border-right:none}
.stat-block:nth-child(-n+3){border-top:none}
.stat-block:hover{background:var(--gray-50)}
.stat-block-num{
  font-family:'Exo 2',sans-serif;
  font-size:clamp(38px,4vw,58px);
  font-weight:900;letter-spacing:-2px;
  color:var(--blue);line-height:1;margin-bottom:8px;
}
.stat-block-num.green{color:var(--blue-dark)}
.stat-block-lbl{font-size:13px;color:var(--gray-500);font-weight:400;letter-spacing:0.2px}
.stats-heading{font-family:'Exo 2',sans-serif;font-size:clamp(24px,2.6vw,34px);
  font-weight:800;text-align:center;color:var(--blue-dark);letter-spacing:-0.5px;
  margin:0 auto 36px;max-width:760px;line-height:1.25}
.stat-block-desc{font-size:12.5px;color:var(--gray-700);font-weight:400;
  line-height:1.6;margin-top:10px}

/* ── COVERAGE ── */
#coverage{
  background:var(--white);
  padding:56px 80px;position:relative;z-index:2;
  border-top:1px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200);
}
.coverage-inner{max-width:860px;margin:0 auto;text-align:center}
.coverage-label{font-size:11px;letter-spacing:2.5px;color:var(--gray-500);
  font-weight:600;text-transform:uppercase;margin-bottom:20px}
.coverage-states{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.state-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--white);border:1px solid var(--gray-200);
  border-radius:18px;padding:22px 36px;min-width:148px;
  box-shadow:var(--card-shadow);
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.state-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);border-color:var(--blue-light)}
.state-emoji{font-size:30px}
.state-name{font-family:'Exo 2',sans-serif;font-size:15px;font-weight:800;color:var(--text-dark)}
.state-tag{font-size:11px;color:var(--gray-500);font-weight:400}
.state-card.home .state-name{color:var(--blue)}
.state-card.home{border-color:rgba(0,120,200,0.25);background:linear-gradient(145deg,rgba(0,120,200,0.06),#fff)}

/* ── THREE PILLARS ── */
#pillars{
  background:var(--white);
  padding:96px 80px;position:relative;z-index:2;
}
.pillars-header{text-align:center;margin-bottom:60px}
.pillars-sub{font-size:15px;color:var(--gray-500);margin-top:14px;
  font-weight:300;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.7}
/* ── DIVISIONS (full-width stacked rows) — modern feature-tile layout ── */
.divisions{display:flex;flex-direction:column;gap:30px;max-width:1200px;margin:0 auto}
.division-row{
  --acc:var(--blue);--acc-soft:rgba(0,120,200,0.06);--acc-line:rgba(0,120,200,0.16);
  position:relative;display:grid;grid-template-columns:330px 1fr;
  background:var(--white);border:1px solid var(--gray-200);
  border-radius:24px;overflow:hidden;box-shadow:var(--card-shadow);
  transition:transform 0.45s cubic-bezier(0.16,1,0.3,1),box-shadow 0.45s cubic-bezier(0.16,1,0.3,1),border-color 0.45s;
}
/* accent light-bar that sweeps in on hover across the top edge */
.division-row::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;z-index:3;
  background:linear-gradient(90deg,var(--acc),transparent 72%);
  opacity:0;transition:opacity 0.45s;
}
.division-row:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);border-color:var(--acc-line)}
.division-row:hover::before{opacity:1}
.division-row.d-blue{--acc:var(--blue);--acc-soft:rgba(0,120,200,0.06);--acc-line:rgba(0,120,200,0.16)}
.division-row.d-green{--acc:var(--green-dark);--acc-soft:rgba(140,200,40,0.08);--acc-line:rgba(140,200,40,0.24)}
.division-row.d-navy{--acc:var(--blue-deep);--acc-soft:rgba(0,58,110,0.05);--acc-line:rgba(0,58,110,0.14)}
.division-rail{
  position:relative;padding:36px 30px;
  display:flex;flex-direction:column;gap:15px;overflow:hidden;
  /* twin glows — top-left + bottom-right — so the panel reads as fully
     composed at any height instead of showing stark white below the CTA */
  background:
    radial-gradient(130% 80% at 0% 0%,var(--acc-soft),transparent 58%),
    radial-gradient(120% 72% at 100% 100%,var(--acc-soft),transparent 56%),
    var(--white);
  border-right:1px solid var(--acc-line);
}
.division-rail::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--acc),transparent)}
/* oversized ghost division numeral as a graphic accent */
.division-rail::after{
  content:attr(data-num);position:absolute;right:16px;top:2px;
  font-family:'Exo 2',sans-serif;font-weight:900;font-size:84px;line-height:1;
  letter-spacing:-5px;color:var(--acc);opacity:0.07;pointer-events:none;
}
.division-rail > *{position:relative;z-index:1}
.division-rail .pillar-eyebrow{margin-bottom:0}
.division-rail .pillar-title{font-size:20px}
.division-rail .pillar-tagline{margin-top:0}
/* CTA sits directly under the header group (top-aligned block); the
   leftover rail height collects as framed space at the bottom rather
   than an awkward void between the badge and a bottom-pinned button */
.division-rail-footer{margin-top:24px;padding-top:0}
.division-rail .pillar-btn{width:100%}
.division-content{
  padding:30px 32px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  gap:12px;align-content:start;
}
/* Division 02 has four product-style categories — a 2-column grid lays
   them out as a clean 2×2 (no orphan tile) and gives the row a more
   deliberate, balanced composition. Collapses to 1 col on mobile. */
.division-row.d-green .division-content{
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
}
.div-intro{grid-column:1/-1;font-size:14px;line-height:1.6;color:var(--gray-700);font-weight:300;margin:-2px 0 4px}
.div-intro strong{font-weight:600;color:var(--text-dark)}
/* each category renders as a soft, hover-lifting feature tile */
.div-cat{
  display:flex;flex-direction:column;gap:10px;
  padding:16px 16px 18px;border-radius:14px;
  border:1px solid var(--gray-200);background:var(--gray-50);
  transition:transform 0.32s cubic-bezier(0.16,1,0.3,1),background 0.32s,border-color 0.32s,box-shadow 0.32s;
}
.div-cat:hover{
  transform:translateY(-3px);
  background:var(--acc-soft);border-color:var(--acc-line);
  box-shadow:0 10px 26px rgba(0,0,0,0.05);
}
.div-cat-head{
  display:flex;align-items:center;gap:11px;position:relative;
  /* reserve room for a two-line title so single- and double-line heads
     share one baseline and their bullet lists start at the same height */
  min-height:60px;
  font-family:'Exo 2',sans-serif;font-size:14px;font-weight:700;line-height:1.3;letter-spacing:-0.2px;color:var(--text-dark);
  padding-bottom:12px;
}
/* short accent underline that grows on hover (replaces the flat hairline) */
.div-cat-head::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:38px;border-radius:2px;
  background:var(--acc);opacity:0.5;transition:width 0.34s cubic-bezier(0.16,1,0.3,1),opacity 0.34s;
}
.div-cat:hover .div-cat-head::after{width:62px;opacity:1}
.div-cat-icon{
  width:34px;height:34px;flex-shrink:0;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--acc);color:#fff;
  box-shadow:0 4px 12px var(--acc-line),inset 0 1px 0 rgba(255,255,255,0.28);
  transition:transform 0.32s cubic-bezier(0.16,1,0.3,1);
}
.div-cat:hover .div-cat-icon{transform:scale(1.09) rotate(-3deg)}
.div-cat-icon svg{width:18px;height:18px}
.div-cat-intro{font-size:12.5px;line-height:1.55;color:var(--gray-700);font-weight:400;margin:-2px 0 1px}
.div-cat-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.div-item{
  position:relative;padding-left:17px;
  font-size:12.5px;line-height:1.58;color:var(--gray-700);font-weight:400;
}
.div-item::before{
  content:"";position:absolute;left:0;top:6px;
  width:6px;height:6px;border-radius:2px;background:var(--acc);transform:rotate(45deg);
}
.div-item strong{font-family:'Exo 2',sans-serif;font-weight:600;color:var(--text-dark)}
/* clickable categories that open the matching expertise popup */
.div-cat[data-pop]{cursor:pointer;position:relative}
.div-cat[data-pop]:hover{transform:translateY(-3px);background:#fff;border-color:var(--acc);box-shadow:0 14px 30px rgba(0,0,0,0.08)}
.div-cat[data-pop]:focus-visible{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-line)}
.div-cat[data-pop] .div-cat-head{padding-right:34px}
.div-cat[data-pop]::after{content:"\203A";position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Exo 2',sans-serif;font-size:17px;font-weight:700;line-height:1;color:var(--acc);background:var(--acc-line);transition:background .25s,color .25s}
.div-cat[data-pop]:hover::after{background:var(--acc);color:#fff}
.pillar-icon-box{
  width:58px;height:58px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;position:relative;
  box-shadow:0 0 0 7px var(--acc-soft),0 6px 18px rgba(0,0,0,0.05);
}
.pillar-icon-box.blue{background:rgba(0,120,200,0.09);color:var(--blue)}
.pillar-icon-box.green{background:rgba(140,200,40,0.12);color:var(--green-dark)}
.pillar-icon-box.navy{background:rgba(0,58,110,0.08);color:var(--blue-deep)}
.pillar-eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;
  text-transform:uppercase;color:var(--gray-500);margin-bottom:5px}
.pillar-title{font-family:'Exo 2',sans-serif;font-size:18px;font-weight:800;
  line-height:1.3;letter-spacing:-0.3px;color:var(--text-dark)}
.pillar-tagline{font-size:13px;font-weight:300;line-height:1.5;
  color:var(--gray-500);margin-top:6px}
.pillar-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--gray-50);border:1px solid var(--gray-200);
  border-radius:var(--radius-pill);padding:6px 14px;
  font-size:12px;color:var(--gray-700);font-weight:500;width:fit-content;
}
.pillar-badge.green{background:rgba(140,200,40,0.09);border-color:rgba(140,200,40,0.35);color:var(--green-dark)}
/* pillar tags */
.pillar-tags{display:flex;flex-wrap:wrap;gap:8px}
.ptag{font-size:11.5px;padding:5px 12px;border-radius:var(--radius-pill);font-weight:600}
.ptag.green{background:rgba(140,200,40,0.09);border:1px solid rgba(140,200,40,0.35);color:var(--green-dark)}
.ptag.blue{background:rgba(0,120,200,0.07);border:1px solid rgba(0,120,200,0.2);color:var(--blue-dark)}
.pillar-footer{margin-top:auto;padding-top:4px}
.pillar-btn{
  width:100%;padding:12px 20px;border-radius:var(--radius-btn);
  font-family:'Exo 2',sans-serif;font-weight:700;font-size:13px;
  cursor:pointer;transition:all 0.28s;border:1.5px solid;
}
.pillar-btn.blue{
  background:rgba(0,120,200,0.08);border-color:rgba(0,120,200,0.3);color:var(--blue);
}
.pillar-btn.blue:hover{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 6px 20px rgba(0,120,200,0.28)}
.pillar-btn.green{
  background:rgba(140,200,40,0.09);border-color:rgba(140,200,40,0.4);color:var(--text-dark);
}
.pillar-btn.green:hover{background:var(--green-dark);color:#fff;border-color:var(--green-dark);box-shadow:0 6px 20px rgba(140,200,40,0.25)}
.pillar-btn.navy{
  background:rgba(0,58,110,0.07);border-color:rgba(0,58,110,0.25);color:var(--blue-deep);
}
.pillar-btn.navy:hover{background:var(--blue-deep);color:#fff;border-color:var(--blue-deep);box-shadow:0 6px 20px rgba(0,58,110,0.25)}

/* ── SPECIALIZED SERVICES ── */
#services{
  background:var(--gray-50);
  padding:96px 80px;position:relative;z-index:2;
  border-top:1px solid var(--gray-200);
}
.services-header{text-align:center;margin-bottom:56px}
.services-header .section-label{display:inline-flex}
.services-sub{font-size:15px;color:var(--gray-500);margin-top:14px;
  font-weight:300;max-width:560px;margin-left:auto;margin-right:auto;line-height:1.7}
.svc-grid-title{
  text-align:center;font-family:'Exo 2',sans-serif;
  font-size:clamp(20px,2.2vw,28px);font-weight:800;
  color:var(--blue-dark);letter-spacing:-0.5px;
  margin:-26px auto 34px;
}
.svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;max-width:1100px;margin:0 auto;
}
.svc-card{
  background:var(--white);border:1px solid var(--gray-200);
  border-radius:var(--radius-card);padding:30px 24px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;
  box-shadow:0 2px 12px rgba(0,0,0,0.05);
  transition:all 0.34s cubic-bezier(0.16,1,0.3,1);
}
.svc-card:hover{
  transform:translateY(-7px);
  box-shadow:0 16px 42px rgba(0,120,200,0.13);
  border-color:rgba(140,200,40,0.55);
}
.svc-icon{
  width:70px;height:70px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--green-dark);font-size:30px;line-height:1;
  background:rgba(140,200,40,0.10);
  border:2px solid rgba(140,200,40,0.45);
  transition:all 0.34s cubic-bezier(0.16,1,0.3,1);
}
.svc-icon svg{width:34px;height:34px;display:block}
/* image symbols (home "Our Specialized Services") fill the badge */
#services .svc-icon{width:140px;height:140px;background:#fff;padding:0;overflow:hidden}
#services .svc-icon img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
/* tint emoji icons to the brand green (renders the glyph as a solid silhouette) */
.svc-icon.emoji{color:transparent;text-shadow:0 0 0 var(--green-dark)}
.svc-card:hover .svc-icon.emoji{text-shadow:0 0 0 var(--green-dark)}
.svc-card:hover .svc-icon{
  background:rgba(140,200,40,0.18);
  border-color:var(--green);
  color:var(--green-dark);
  transform:scale(1.08);
  box-shadow:0 0 0 6px rgba(140,200,40,0.10);
}
.svc-name{
  font-family:'Exo 2',sans-serif;font-size:14.5px;font-weight:700;
  color:var(--text-dark);line-height:1.45;letter-spacing:-0.2px;
}
.svc-sub{font-family:'Exo 2',sans-serif;font-size:12px;font-weight:600;color:var(--green);letter-spacing:.2px;margin-top:-6px}
.svc-desc{font-size:12.5px;color:var(--gray-500);line-height:1.65;font-weight:300;margin-top:-4px}

/* ── IMPACT BANNER ── */
#impact-banner{
  position:relative;z-index:2;
  background:linear-gradient(135deg,var(--blue-xdeep) 0%,var(--blue-deep) 100%);
  overflow:hidden;
}
#impact-banner::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-52deg,
    rgba(255,255,255,0.04) 0px,rgba(255,255,255,0.04) 1px,
    transparent 1px,transparent 20px);
}
#impact-banner::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--green),var(--green-dark),var(--green));
}
/* commitment-style background variant */
#impact-banner.impact-commit-bg::before{
  background:radial-gradient(circle at 50% 0%,rgba(140,200,40,0.14),transparent 60%);
}
#impact-banner.impact-commit-bg::after{display:none;}
.impact-inner{
  display:grid;grid-template-columns:1fr 420px;
  max-width:1240px;margin:0 auto;
  align-items:center;gap:80px;
  padding:88px 80px;
  position:relative;z-index:2;
}
.impact-left .section-label{color:rgba(140,200,40,0.9)}
.impact-left .section-label::before{background:rgba(140,200,40,0.9)}
.impact-headline{
  font-family:'Exo 2',sans-serif;
  font-size:clamp(32px,3.8vw,52px);
  font-weight:900;letter-spacing:-1.8px;line-height:1.07;
  color:#fff;margin-bottom:20px;
}
.impact-headline .accent{color:var(--green)}
.impact-sub{
  font-size:15px;color:rgba(255,255,255,0.72);
  line-height:1.78;font-weight:300;margin-bottom:28px;max-width:440px;
}
.impact-checks{display:flex;flex-direction:column;gap:11px;margin-bottom:36px}
.impact-check{
  display:flex;align-items:center;gap:12px;
  font-size:14px;color:rgba(255,255,255,0.88);font-weight:400;
}
.check-icon{
  width:24px;height:24px;border-radius:6px;flex-shrink:0;
  background:rgba(140,200,40,0.18);border:1px solid rgba(140,200,40,0.35);
  display:flex;align-items:center;justify-content:center;
}
.check-icon svg{width:13px;height:13px;color:var(--green)}
.impact-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-white{
  background:#fff;color:var(--blue);
  font-family:'Exo 2',sans-serif;font-weight:800;font-size:14px;
  padding:13px 28px;border-radius:var(--radius-btn);border:none;cursor:pointer;
  transition:all 0.28s;
}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,0.25)}
.btn-white:active{transform:scale(0.97)}
.btn-outline-white{
  background:transparent;color:#fff;
  font-family:'Exo 2',sans-serif;font-weight:600;font-size:14px;
  padding:12px 26px;border-radius:var(--radius-btn);
  border:1.5px solid rgba(255,255,255,0.42);cursor:pointer;
  transition:all 0.28s;
}
.btn-outline-white:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.75);transform:translateY(-3px)}
/* right metric cards */
.impact-metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.metric-card{
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:16px;padding:22px 18px;text-align:center;
  transition:all 0.32s;
}
.metric-card:hover{background:rgba(255,255,255,0.12);transform:translateY(-4px)}
.metric-num{
  font-family:'Exo 2',sans-serif;font-size:32px;font-weight:900;
  color:#fff;letter-spacing:-1px;line-height:1;margin-bottom:6px;
}
.metric-num.green{color:var(--green-light)}
.metric-lbl{font-size:12px;color:rgba(255,255,255,0.5);font-weight:300;line-height:1.4}

/* right side: "How We Work" process timeline (home Why HHA? — unique vs metric grid) */
.impact-flow{
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;padding:30px 30px 32px;position:relative;
}
.impact-flow-head{
  font-family:'Exo 2',sans-serif;font-size:12px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:rgba(140,200,40,0.9);margin-bottom:24px;
}
.impact-flow-step{position:relative;display:flex;gap:18px;padding-bottom:24px}
.impact-flow-step:last-child{padding-bottom:0}
/* connecting line between nodes */
.impact-flow-step:not(:last-child)::before{
  content:'';position:absolute;left:21px;top:46px;bottom:-2px;width:2px;
  background:linear-gradient(to bottom,rgba(140,200,40,0.55),rgba(140,200,40,0.10));
}
.impact-flow-num{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;
  background:rgba(140,200,40,0.14);border:1.5px solid rgba(140,200,40,0.5);
  color:var(--green-light);font-family:'Exo 2',sans-serif;font-weight:800;font-size:17px;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;transition:all 0.3s;
}
.impact-flow-step:hover .impact-flow-num{
  background:var(--green-dark);color:#fff;border-color:var(--green-dark);
  box-shadow:0 0 0 6px rgba(140,200,40,0.12);
}
.impact-flow-body{padding-top:3px}
.impact-flow-title{
  font-family:'Exo 2',sans-serif;font-size:16px;font-weight:700;
  color:#fff;letter-spacing:-0.2px;margin-bottom:4px;
}
.impact-flow-text{font-size:13px;color:rgba(255,255,255,0.6);line-height:1.6;font-weight:300}

/* ── COMPLETE PROTECTION — STICKY SCROLL STORY ── */
#process-sticky{
  position:relative;z-index:2;
  background:linear-gradient(160deg,var(--blue-xdeep) 0%,#02101f 60%,var(--blue-deep) 100%);
  padding:96px 80px 110px;
  /* NOTE: do NOT set overflow:hidden here — an ancestor with overflow:hidden
     disables position:sticky on the pinned visual below. The ::before glow is
     inset:0 so it can't overflow the section anyway. */
}
#process-sticky::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 22% 30%,rgba(0,120,200,0.20),transparent 55%),
             radial-gradient(circle at 80% 80%,rgba(140,200,40,0.12),transparent 55%);
}
.ps-header{text-align:center;max-width:760px;margin:0 auto 40px;position:relative;z-index:2}
.ps-intro{
  font-size:16px;color:var(--muted-light);line-height:1.8;font-weight:300;
  margin-top:14px;
}
.ps-layout{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;
  max-width:1180px;margin:0 auto;
  align-items:stretch;
}
/* sticky visual — column stretches full height so the inner panel can pin
   across the whole steps column */
.ps-visual{position:relative;height:100%}
.ps-visual-inner{
  position:sticky;top:calc(50vh - 215px);
  height:430px;border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(8px);
  overflow:hidden;
  perspective:1100px;
  box-shadow:0 30px 80px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.08);
}
/* moving glass sheen across the card */
.ps-visual-inner::after{
  content:'';position:absolute;top:0;left:-70%;width:55%;height:100%;z-index:6;
  pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,0.10),transparent);
  transform:skewX(-18deg);
  animation:psSheen 7.5s ease-in-out infinite;
}
@keyframes psSheen{0%,55%{left:-70%}100%{left:170%}}

/* drifting gradient-mesh backdrop */
.ps-mesh{
  position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 30% 28%,rgba(0,120,200,0.40),transparent 45%),
    radial-gradient(circle at 72% 62%,rgba(140,200,40,0.30),transparent 46%),
    radial-gradient(circle at 50% 85%,rgba(0,170,255,0.22),transparent 50%);
  filter:blur(22px);
  animation:psMesh 16s ease-in-out infinite alternate;
}
@keyframes psMesh{
  from{transform:translate3d(-3%,-2%,0) scale(1.05)}
  to{transform:translate3d(4%,3%,0) scale(1.18)}
}

/* tilt wrapper (mouse parallax via JS) + 3D depth */
.ps-tilt{
  position:absolute;inset:0;z-index:2;
  transform-style:preserve-3d;
  transition:transform 0.18s ease-out;
}

/* rotating conic glow ring behind the icon */
.ps-ring{
  position:absolute;top:42%;left:50%;width:268px;height:268px;
  margin:-134px 0 0 -134px;border-radius:50%;
  transform:translateZ(20px);
  background:conic-gradient(from 0deg,
    transparent 0deg,rgba(140,200,40,0.0) 40deg,
    rgba(140,200,40,0.65) 130deg,rgba(0,170,255,0.85) 210deg,
    transparent 300deg);
  -webkit-mask:radial-gradient(closest-side,transparent 63%,#000 65%,#000 80%,transparent 82%);
          mask:radial-gradient(closest-side,transparent 63%,#000 65%,#000 80%,transparent 82%);
  animation:psSpin 8s linear infinite;
  opacity:0.9;
}
@keyframes psSpin{to{transform:translateZ(20px) rotate(360deg)}}

/* orbiting particles */
.ps-orbit{
  position:absolute;top:42%;left:50%;width:320px;height:320px;
  margin:-160px 0 0 -160px;
  transform:translateZ(40px);
  animation:psOrbit 15s linear infinite;
}
.ps-orbit span{
  position:absolute;top:50%;left:50%;width:9px;height:9px;border-radius:50%;
  margin:-4.5px;background:var(--green-light);
  box-shadow:0 0 14px var(--green-light);
}
.ps-orbit span:nth-child(1){transform:rotate(0deg) translateX(160px)}
.ps-orbit span:nth-child(2){transform:rotate(130deg) translateX(160px);
  background:var(--blue-light);box-shadow:0 0 14px var(--blue-light);width:7px;height:7px}
.ps-orbit span:nth-child(3){transform:rotate(245deg) translateX(160px);
  width:6px;height:6px;opacity:0.85}
@keyframes psOrbit{to{transform:translateZ(40px) rotate(360deg)}}

/* 3D stage stack — card-flip transition */
.ps-3d{position:absolute;inset:0;z-index:3;transform-style:preserve-3d}
.ps-stage{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transform:translateZ(60px) rotateY(38deg) scale(0.94);
  transform-origin:center;
  opacity:0;backface-visibility:hidden;
  transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.ps-stage.active{opacity:1;transform:translateZ(60px) rotateY(0deg) scale(1)}
.ps-stage-num{
  font-family:'Exo 2',sans-serif;font-weight:800;font-size:15px;letter-spacing:4px;
  color:rgba(140,200,40,0.9);
}
.ps-stage-ico{
  position:relative;width:132px;height:132px;border-radius:30px;
  display:flex;align-items:center;justify-content:center;
  color:var(--green-light);
  background:linear-gradient(155deg,rgba(140,200,40,0.22),rgba(0,120,200,0.10));
  border:1.5px solid rgba(140,200,40,0.45);
  box-shadow:0 0 0 10px rgba(140,200,40,0.05),0 18px 40px rgba(0,0,0,0.45),
             inset 0 1px 0 rgba(255,255,255,0.18);
}
.ps-stage.active .ps-stage-ico{animation:psFloat 5.5s ease-in-out infinite}
@keyframes psFloat{
  0%,100%{transform:translateY(0) rotateX(0deg)}
  50%{transform:translateY(-14px) rotateX(8deg)}
}
.ps-stage-ico svg{width:62px;height:62px;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.4))}
.ps-stage-img{width:96px;height:96px;object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,0.45))}
.ps-stage-name{
  font-family:'Exo 2',sans-serif;font-weight:800;font-size:24px;color:#fff;
  letter-spacing:-0.5px;
}
.ps-progress{
  position:absolute;left:28px;right:28px;bottom:26px;height:3px;border-radius:3px;z-index:5;
  background:rgba(255,255,255,0.12);overflow:hidden;
}
.ps-progress > span{
  display:block;height:100%;width:20%;border-radius:3px;
  background:linear-gradient(90deg,var(--blue-light),var(--green));
  transform-origin:left center;
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
/* scrolling steps */
.ps-steps{display:flex;flex-direction:column}
.ps-step{
  min-height:78vh;display:flex;flex-direction:column;justify-content:center;
  opacity:0.32;transition:opacity 0.5s ease,transform 0.5s ease;
}
.ps-step.active{opacity:1}
.ps-step-tag{
  font-family:'Exo 2',sans-serif;font-weight:800;font-size:12px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--green-light);margin-bottom:16px;
}
.ps-step-title{
  font-family:'Exo 2',sans-serif;font-weight:800;font-size:clamp(24px,2.6vw,34px);
  color:#fff;line-height:1.12;letter-spacing:-0.6px;margin-bottom:16px;
}
.ps-step-text{
  font-size:16px;color:var(--muted-light);line-height:1.8;font-weight:300;max-width:460px;
}
.ps-step-warranty{
  display:flex;align-items:flex-start;gap:10px;max-width:460px;margin-top:18px;
  padding:12px 14px;border-radius:12px;
  background:rgba(140,200,40,0.06);border:1px solid rgba(140,200,40,0.22);
  font-size:13.5px;line-height:1.6;color:rgba(255,255,255,0.78);font-weight:300;
}
.ps-step-warranty strong{color:var(--green-light);font-weight:700}
.ps-warranty-ico{flex-shrink:0;width:18px;height:18px;color:var(--green);margin-top:1px}
.ps-warranty-ico svg{width:100%;height:100%;display:block}
@media(max-width:880px){
  #process-sticky{padding:64px 22px 72px}
  .ps-layout{grid-template-columns:1fr;gap:0}
  .ps-visual-inner{top:74px;height:230px}
  .ps-stage-ico{width:96px;height:96px}
  .ps-stage-ico svg{width:46px;height:46px}
  .ps-stage-name{font-size:20px}
  .ps-stage{gap:14px}
  .ps-steps{margin-top:20px}
  .ps-step{min-height:62vh}
}

/* ── SERVICES (PEST TYPES) ── */
#pest-types{
  background:var(--gray-50);
  padding:96px 80px;position:relative;z-index:2;
  border-top:1px solid var(--gray-200);
}
.pest-types-header{text-align:center;margin-bottom:56px}
.pest-types-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;max-width:1200px;margin:0 auto;
}
.pest-type-card{
  background:var(--white);border:1px solid var(--gray-200);
  border-radius:16px;padding:20px 16px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;
  box-shadow:0 2px 12px rgba(0,0,0,0.05);
  transition:all 0.32s cubic-bezier(0.16,1,0.3,1);
}
.pest-type-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 36px rgba(0,120,200,0.12);
  border-color:var(--blue-light);
}
.pest-type-emoji{font-size:32px}
.pest-type-name{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;
  color:var(--text-dark);line-height:1.3}
.pest-type-card.featured{
  background:linear-gradient(145deg,rgba(0,120,200,0.07),var(--white));
  border-color:rgba(0,120,200,0.25);
}

/* ── PRODUCTS ── */
#products{
  background:var(--gray-50);padding:96px 80px;position:relative;z-index:2;
  border-top:1px solid var(--gray-200);
}
.products-header{text-align:center;margin-bottom:60px}
.products-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:20px;max-width:1200px;margin:0 auto;
}
.product-card{
  background:var(--white);border:1px solid var(--gray-200);
  border-radius:var(--radius-card);overflow:hidden;
  box-shadow:var(--card-shadow);cursor:pointer;
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.product-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.product-card:hover{transform:translateY(-8px);box-shadow:var(--card-shadow-hover);border-color:var(--gray-300)}
.product-img-area{
  position:relative;height:255px;
  background:linear-gradient(135deg,rgba(0,120,200,0.09),rgba(140,200,40,0.09));
  display:flex;align-items:center;justify-content:center;
  font-size:52px;
  border-bottom:1px solid var(--gray-200);
  overflow:hidden;
}
/* soft radial spotlight + faint grid behind the product icon */
.product-img-area::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgba(0,120,200,0.16),transparent 60%);
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1),opacity 0.4s;
}
.product-card:hover .product-img-area::before{transform:scale(1.25)}
.product-img-area .product-emoji{position:relative;z-index:1;line-height:1;
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);filter:drop-shadow(0 8px 16px rgba(0,90,160,0.18))}
.product-card:hover .product-emoji{transform:translateY(-4px) scale(1.08)}
/* green line-icon variant (matches site icon language) */
.product-img-area .product-ico{position:relative;z-index:1;display:block;color:var(--green-dark);
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);filter:drop-shadow(0 8px 16px rgba(0,90,160,0.12))}
.product-img-area .product-ico svg{width:58px;height:58px;display:block}
.product-card:hover .product-ico{transform:translateY(-4px) scale(1.06)}
/* real product photo variant */
.product-img-area .product-photo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;display:block;
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1)}
.product-card:hover .product-photo{transform:scale(1.07)}
.product-body{padding:22px}
.product-name{font-family:'Exo 2',sans-serif;font-size:15px;font-weight:700;
  margin-bottom:8px;color:var(--text-dark)}
.product-spec{font-size:12.5px;color:var(--gray-700);line-height:1.65;
  font-weight:400;margin-bottom:18px}
.product-btn{
  width:100%;padding:10px;
  background:var(--gray-50);border:1px solid var(--gray-200);
  border-radius:8px;color:var(--blue);
  font-family:'Exo 2',sans-serif;font-weight:600;font-size:12px;
  cursor:pointer;transition:all 0.28s;
}
.product-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 4px 16px rgba(0,120,200,0.22)}

/* ── WHY US ── */
#why{
  background:var(--gray-50);
  padding:96px 80px;position:relative;z-index:2;
  border-top:1px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200);
}
.why-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:center;max-width:1100px;margin:0 auto;
}
.why-left .big-text{
  font-family:'Exo 2',sans-serif;
  font-size:clamp(38px,4.5vw,64px);
  font-weight:900;letter-spacing:-2px;line-height:1.0;margin-bottom:24px;
  color:var(--text-dark);
}
.why-left .big-text em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--green));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.why-left p{font-size:15px;color:var(--gray-500);line-height:1.8;font-weight:300;max-width:380px}
.why-features{display:flex;flex-direction:column;gap:4px}
.feature-row{
  display:flex;align-items:flex-start;gap:16px;
  padding:18px 16px;border-radius:14px;
  border:1px solid transparent;
  transition:all 0.35s cubic-bezier(0.16,1,0.3,1);cursor:default;
}
.feature-row:hover{background:var(--white);border-color:var(--gray-200);
  transform:translateX(6px);box-shadow:var(--card-shadow)}
.feature-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  transition:all 0.3s;
}
.feature-icon.blue{background:rgba(0,120,200,0.09)}
.feature-icon.green{background:rgba(140,200,40,0.12)}
.feature-title{font-family:'Exo 2',sans-serif;font-size:14.5px;
  font-weight:700;margin-bottom:4px;color:var(--text-dark)}
.feature-desc{font-size:13px;color:var(--gray-500);line-height:1.6;font-weight:300}

/* ── TESTIMONIALS ── */
#testimonials{
  background:var(--white);
  padding:96px 80px;position:relative;z-index:2;overflow:hidden;
}
#testimonials::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(140,200,40,0.06),transparent 55%);
}
#testimonials>*{position:relative;z-index:2}
.testi-header{text-align:center;margin-bottom:60px}
.testi-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:22px;max-width:1100px;margin:0 auto;
}
.testi-card{
  background:var(--white);border:1px solid var(--gray-200);
  border-radius:var(--radius-card);padding:30px;
  box-shadow:var(--card-shadow);
  transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
  display:flex;flex-direction:column;gap:16px;
}
.testi-card:hover{transform:translateY(-6px);box-shadow:var(--card-shadow-hover);border-color:var(--gray-300)}
.testi-stars{display:flex;gap:3px}
.testi-star{width:14px;height:14px;background:#f5b301;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.testi-quote{font-size:14px;color:var(--gray-700);line-height:1.82;
  font-style:italic;font-weight:300;flex:1}
.testi-quote::before{content:'\201C';font-size:54px;color:var(--green);opacity:0.9;
  font-family:'Exo 2',sans-serif;line-height:0.6;display:block;margin-bottom:8px}
.testi-author{display:flex;align-items:center;gap:12px;padding-top:4px;
  border-top:1px solid var(--gray-100)}
.testi-avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  display:flex;align-items:center;justify-content:center;
  font-family:'Exo 2',sans-serif;font-weight:700;font-size:13px;color:#fff;
  flex-shrink:0;
}
.testi-name{font-family:'Exo 2',sans-serif;font-size:13.5px;font-weight:700;color:var(--text-dark)}
.testi-place{font-size:11.5px;color:var(--gray-500);margin-top:1px}

/* ── IDENTITY / COMMITMENT / MISSION ── */
#identity-pillars{
  background:var(--gray-50);
  padding:96px 80px;position:relative;z-index:2;
}
.icm-header{text-align:center;margin-bottom:56px}
.icm-sub{font-size:15px;color:var(--gray-500);margin-top:14px;
  max-width:680px;margin-left:auto;margin-right:auto;line-height:1.7}
.icm-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;max-width:1100px;margin:0 auto;align-items:stretch;
}
.icm-card{
  --icm-accent:var(--blue);
  background:var(--white);border:1px solid var(--gray-200);
  border-top:4px solid var(--icm-accent);
  border-radius:var(--radius-card);padding:34px 30px;
  box-shadow:var(--card-shadow);
  transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
  display:flex;flex-direction:column;gap:14px;
}
.icm-card:hover{transform:translateY(-6px);box-shadow:var(--card-shadow-hover);border-color:var(--gray-300)}
.icm-identity{--icm-accent:var(--blue)}
.icm-commitment{--icm-accent:var(--green-dark)}
.icm-mission{--icm-accent:var(--blue-deep)}
.icm-icon{
  width:54px;height:54px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  color:var(--icm-accent);background:color-mix(in srgb,var(--icm-accent) 12%,transparent);
}
.icm-label{
  font-family:'Exo 2',sans-serif;font-size:12px;font-weight:800;
  letter-spacing:2px;text-transform:uppercase;color:var(--icm-accent);
}
.icm-title{
  font-family:'Exo 2',sans-serif;font-size:18px;font-weight:700;
  line-height:1.3;color:var(--text-dark);
}
.icm-text{font-size:14px;color:var(--gray-700);line-height:1.8;font-weight:300}
/* bottom-anchored accent bar — fills the void on shorter cards so equal-height
   cards stay visually balanced, and reinforces each card's brand accent */
.icm-card::after{content:'';margin-top:auto;width:44px;height:3px;border-radius:3px;
  background:var(--icm-accent);opacity:0.55}

/* ── CORE COMPETENCIES ── */
#core-competencies{
  background:var(--gray-50);
  padding:96px 80px;position:relative;z-index:2;
}
.cc-header{text-align:center;margin-bottom:52px}
.cc-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:22px;max-width:1100px;margin:0 auto;align-items:stretch;
}
.cc-card{
  background:var(--white);border:1px solid var(--gray-200);
  border-radius:var(--radius-card);padding:30px 24px;text-align:center;
  transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.cc-card:hover{transform:translateY(-6px);box-shadow:var(--card-shadow-hover);
  border-color:var(--gray-300)}
.cc-icon{
  width:64px;height:64px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--green-dark);line-height:1;
  background:rgba(140,200,40,0.10);
  border:2px solid rgba(140,200,40,0.45);
  transition:all 0.34s cubic-bezier(0.16,1,0.3,1);
}
.cc-icon svg{width:32px;height:32px;display:block}
.cc-card:hover .cc-icon{
  background:rgba(140,200,40,0.18);border-color:var(--green);
  transform:scale(1.08);box-shadow:0 0 0 6px rgba(140,200,40,0.10);
}
.cc-title{font-family:'Exo 2',sans-serif;font-size:16px;font-weight:700;
  line-height:1.3;color:var(--text-dark)}
.cc-text{font-size:13.5px;color:var(--gray-500);line-height:1.65;font-weight:300}

/* ── CTA ── */
#cta{
  background:var(--dark);
  padding:100px 80px;position:relative;z-index:2;overflow:hidden;
  text-align:center;
}
/* blue panel variant — uses the HHA Difference section's blue gradient */
#cta.cta-blue{
  background:linear-gradient(135deg,var(--blue-xdeep) 0%,var(--blue-deep) 100%);
}
#cta::before{
  content:'';position:absolute;
  top:-200px;left:50%;transform:translateX(-50%);
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(140,200,40,0.12),transparent 65%);
  pointer-events:none;
}
.cta-inner{position:relative;z-index:2;max-width:680px;margin:0 auto}
.cta-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(140,200,40,0.12);border:1px solid rgba(140,200,40,0.3);
  border-radius:var(--radius-pill);padding:7px 18px;margin-bottom:28px;
  font-size:11px;color:var(--green);font-weight:600;letter-spacing:1.2px;
}
.cta-title{
  font-family:'Exo 2',sans-serif;
  font-size:clamp(32px,4vw,54px);
  font-weight:900;letter-spacing:-1.8px;line-height:1.08;
  color:#fff;margin-bottom:18px;
}
.cta-sub{font-size:15px;color:var(--muted-light);line-height:1.75;
  font-weight:300;margin-bottom:38px}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── FOOTER ── */
footer{
  background:#010810;
  border-top:1px solid rgba(0,120,200,0.2);
  padding:72px 80px 36px;
  position:relative;z-index:2;
}
/* ── BOXY LINK GRID ──
   single connected panel grid: container draws top+left, each cell draws
   right+bottom, so the lattice stays seamless at 4 / 2 / 1 columns */
.footer-grid{
  display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr;
  gap:0;margin-bottom:0;
  border-top:1px solid rgba(0,120,200,0.22);
  border-left:1px solid rgba(0,120,200,0.22);
}
.footer-grid > div{
  position:relative;
  padding:34px 30px;
  border-right:1px solid rgba(0,120,200,0.22);
  border-bottom:1px solid rgba(0,120,200,0.22);
  transition:background 0.25s;
}
.footer-grid > div::before{
  content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.footer-grid > div:hover{background:rgba(0,120,200,0.05)}
.footer-grid > div:hover::before{transform:scaleX(1)}
.footer-logo-wrap{display:inline-block;margin-bottom:14px}
.footer-logo{height:72px;width:auto;display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.35));
  -webkit-filter:drop-shadow(0 2px 4px rgba(0,0,0,0.35))}
.footer-tagline{font-size:12.5px;color:rgba(255,255,255,0.55);font-style:italic;
  margin-bottom:14px;font-weight:300}
.footer-about{font-size:13px;color:rgba(255,255,255,0.72);
  line-height:1.72;font-weight:300}
.footer-about-lead{color:rgba(255,255,255,0.92);font-weight:600;margin-bottom:12px}
.footer-about strong{font-weight:700;color:rgba(255,255,255,0.95)}
.footer-about-lead strong{font-weight:800}
.footer-about-cta{margin-top:12px;color:rgba(255,255,255,0.92)}
.footer-about-cta strong{font-weight:700}
.footer-heading{
  font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:2.2px;text-transform:uppercase;
  color:var(--blue-light);margin-bottom:18px;
  padding-bottom:12px;position:relative;
  border-bottom:1px solid rgba(0,120,200,0.18);
}
.footer-heading::after{
  content:"";position:absolute;left:0;bottom:-1px;
  width:34px;height:2px;background:var(--green);
}
.footer-heading a{color:inherit;text-decoration:none;transition:color 0.22s}
.footer-heading a:hover{color:var(--green)}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-links a{
  font-size:13px;color:rgba(255,255,255,0.72);text-decoration:none;
  transition:color 0.22s,padding-left 0.22s;font-weight:400;
}
.footer-links a:hover{color:var(--green);padding-left:5px}
.contact-item{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13px;color:rgba(255,255,255,0.74);margin-bottom:9px;
  line-height:1.55;font-weight:400;
}
.contact-item a{color:inherit;text-decoration:none;transition:color 0.22s}
.contact-item a:hover{color:var(--green)}
.contact-icon{color:var(--blue-light);flex-shrink:0;margin-top:1px;font-style:normal;display:inline-flex;align-items:center}
.contact-icon svg{width:16px;height:16px;display:block}
.social-row{display:flex;gap:8px;margin-top:18px}
.social-btn{
  width:38px;height:38px;border-radius:3px;
  border:1px solid rgba(0,120,200,0.22);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.55);font-size:14px;cursor:pointer;
  text-decoration:none;transition:all 0.28s;
}
.social-btn:hover{border-color:var(--green);color:var(--green);
  background:rgba(140,200,40,0.1);transform:translateY(-2px)}
.footer-bottom{
  border-left:1px solid rgba(0,120,200,0.22);
  border-right:1px solid rgba(0,120,200,0.22);
  border-bottom:1px solid rgba(0,120,200,0.22);
  padding:22px 30px;background:rgba(0,120,200,0.03);
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:rgba(255,255,255,0.45);font-weight:300;
}
.footer-bottom a{color:rgba(255,255,255,0.3);text-decoration:none;transition:color 0.2s}
.footer-bottom a:hover{color:var(--green)}

/* ── FOOTER BRAND / CTA BAND (full width) ── */
.footer-brand-band{
  max-width:1240px;margin:0 auto 52px;padding-bottom:50px;
}
.fbb-head{text-align:center;max-width:780px;margin:0 auto 38px}
.fb-headline{
  font-family:'Exo 2',sans-serif;font-weight:800;
  font-size:32px;line-height:1.12;letter-spacing:-.6px;
  color:#fff;margin:0;
}
.fb-headline .g{color:var(--green)}
.fb-rule{display:block;width:96px;height:3px;border-radius:2px;
  background:var(--green);margin:18px auto 20px}
.fb-intro{font-size:14px;line-height:1.72;font-weight:300;
  color:rgba(255,255,255,0.75);margin:0 auto;max-width:680px}
.fb-intro .g{color:var(--green);font-weight:600}
.fb-intro strong{font-weight:700;color:rgba(255,255,255,0.95)}
.fb-services{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:30px}
.fb-card{
  background:linear-gradient(160deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
  border:1px solid rgba(0,120,200,0.18);border-radius:3px;
  padding:26px 16px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.fb-card:hover{border-color:var(--green);transform:translateY(-4px);
  box-shadow:0 18px 40px -24px rgba(140,200,40,.5)}
.fb-card-ico{width:36px;height:36px;color:var(--green)}
.fb-card-ico svg{width:100%;height:100%;display:block}
.fb-card-lbl{font-size:13px;font-weight:600;line-height:1.35;color:rgba(255,255,255,0.88)}
.fb-desc{font-size:13.5px;line-height:1.72;font-weight:300;text-align:center;
  color:rgba(255,255,255,0.72);margin:0 auto 30px;max-width:900px}
.fb-desc .g{color:var(--green);font-weight:600}
.fb-hl{color:var(--green);font-weight:700;white-space:nowrap}
.fb-bars{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:stretch}
.fb-trust,.fb-ctabar{
  display:flex;align-items:center;gap:18px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(0,120,200,0.18);border-radius:3px;
  padding:22px 24px;
}
.fb-trust-ico{flex:0 0 auto;width:44px;height:44px;color:var(--green)}
.fb-trust-ico svg{width:100%;height:100%;display:block}
.fb-trust p{margin:0;font-size:13px;line-height:1.65;font-weight:300;color:rgba(255,255,255,0.75)}
.fb-trust .g{color:var(--green);font-weight:700}
.fb-trust strong{font-weight:700;color:rgba(255,255,255,0.95)}
.fb-ctabar{flex-wrap:wrap}
.fb-ctabar-ico{flex:0 0 auto;width:48px;height:48px;border-radius:3px;
  background:var(--green);color:#06210a;display:flex;align-items:center;justify-content:center}
.fb-ctabar-ico svg{width:23px;height:23px;display:block}
.fb-ctabar p{flex:1 1 180px;margin:0;font-size:13px;line-height:1.55;font-weight:300;color:rgba(255,255,255,0.82)}
.fb-ctabar .g{color:var(--green);font-weight:600}
.fb-ctabar-btn{
  flex:1 1 auto;text-align:center;background:var(--green);color:#06210a;
  font-family:'Exo 2',sans-serif;font-weight:800;font-size:13px;letter-spacing:.5px;
  border:none;border-radius:3px;padding:14px 24px;cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:transform .2s,box-shadow .2s;
}
.fb-ctabar-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(140,200,40,.65)}

/* ── REVEAL ANIMATIONS ── */
.reveal{
  opacity:0;transform:translateY(48px);
  transition:opacity 0.85s cubic-bezier(0.16,1,0.3,1),transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{
  opacity:0;transform:translateX(-52px);
  transition:opacity 0.85s cubic-bezier(0.16,1,0.3,1),transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{
  opacity:0;transform:translateX(52px);
  transition:opacity 0.85s cubic-bezier(0.16,1,0.3,1),transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-d1{transition-delay:0.08s}
.reveal-d2{transition-delay:0.16s}
.reveal-d3{transition-delay:0.24s}
.reveal-d4{transition-delay:0.32s}

/* ── WAVE DIVIDER ── */
.wave-div{width:100%;overflow:hidden;line-height:0;position:relative;z-index:2}
.wave-div svg{display:block;width:100%}
/* wave at the foot of the hero, bridging into the white stats strip */
#hero > .wave-div{position:absolute;bottom:-1px;left:0;right:0;z-index:4;pointer-events:none}
#hero > .wave-div svg{height:90px}
@media(max-width:768px){ #hero > .wave-div svg{height:50px} }

/* same wave at the foot of every inner-page banner, bridging into the section below */
.page-hero > .wave-div{position:absolute;bottom:-1px;left:0;right:0;z-index:5;pointer-events:none}
.page-hero > .wave-div svg{height:90px}
.page-hero > .wave-div path{fill:var(--white)}
/* who-we-are flows into a tinted (gray) section — match the wave to its top colour */
.page-about .page-hero > .wave-div path{fill:#EAF2FB}
@media(max-width:768px){ .page-hero > .wave-div svg{height:50px} }

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  #mainNav{padding:16px 40px}
  #mainNav.scrolled{padding:10px 40px}
  #stats-strip,#coverage,#pillars,#services,#pest-types,#products,#why,#testimonials,#identity-pillars,#core-competencies,#cta,footer{
    padding-left:40px;padding-right:40px}
  .impact-inner{padding:72px 40px;gap:48px}
  .impact-inner{grid-template-columns:1fr 320px}
  .hero-left{padding:100px 40px 80px 56px}
}
@media(max-width:1024px){
  /* collapse the 7-item nav into the hamburger before it can overflow
     (#mainNav prefix raises specificity so it beats the base .nav-hamburger rule defined later) */
  #mainNav .nav-links,#mainNav .nav-cta{display:none}
  #mainNav .nav-hamburger{display:flex}
  .division-row{grid-template-columns:1fr}
  .division-rail{border-right:none;border-bottom:1px solid var(--acc-line)}
  .division-rail::before{width:100%;height:4px;bottom:auto}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .testi-grid{grid-template-columns:1fr 1fr}
  .icm-grid{grid-template-columns:1fr}
  .cc-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:0}
  .fb-services{grid-template-columns:repeat(2,1fr)}
  .fb-bars{grid-template-columns:1fr}
  .impact-inner{grid-template-columns:1fr}
  .impact-metrics{grid-template-columns:repeat(4,1fr)}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .stat-block{border-right:1px solid var(--gray-200);border-top:none}
  .stat-block:nth-child(2n){border-right:none}
  .stat-block:nth-child(-n+2){border-top:none}
  .stat-block:nth-child(n+3){border-top:1px solid var(--gray-200)}
}
/* ── HAMBURGER ── */
.nav-hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;background:transparent;border:none;cursor:pointer;padding:4px;
}
.nav-hamburger span{
  display:block;height:2px;border-radius:2px;
  background:#fff;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── MOBILE DRAWER ── */
#mobileMenu{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:190;
  background:rgba(2,13,26,0.97);backdrop-filter:blur(24px);
  flex-direction:column;align-items:center;justify-content:center;gap:10px;
  opacity:0;transition:opacity 0.3s ease;
}
#mobileMenu.open{opacity:1}
#mobileMenu ul{list-style:none;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0}
#mobileMenu ul li a{
  display:flex;align-items:center;gap:10px;
  font-size:20px;font-weight:700;color:rgba(255,255,255,0.8);
  text-decoration:none;padding:14px 32px;border-radius:12px;
  transition:all 0.25s;border:1px solid transparent;
}
#mobileMenu .nav-ico svg{width:19px;height:19px}
#mobileMenu ul li a:hover,#mobileMenu ul li a.active{
  color:#fff;background:rgba(255,255,255,0.07);
  border-color:rgba(255,255,255,0.14);
}
#mobileMenu .mobile-cta{
  margin-top:20px;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:var(--dark);font-family:'Exo 2',sans-serif;font-weight:800;font-size:15px;
  padding:14px 36px;border-radius:var(--radius-btn);border:none;cursor:pointer;
}

@media(max-width:768px){
  #mainNav{padding:14px 20px}
  #mainNav.scrolled{padding:10px 20px}
  #hero{padding-top:72px;flex-direction:column;min-height:auto}
  .hero-left{flex:0 0 auto;padding:54px 24px 12px}
  .hero-h1{letter-spacing:-1.5px}
  /* bring the visual back on mobile: full-width block with the 3D scene scaled to fit */
  .hero-right{
    display:flex;position:relative;
    flex:0 0 auto;width:100%;height:300px;
    overflow:hidden;perspective:900px;
  }
  .hud-scene{transform:scale(0.54);transform-origin:center}
  /* shrink just the floating bugs (not the radar) a bit on mobile */
  .hud-radar span svg{transform:scale(0.8)}
  #stats-strip,#coverage,#pillars,#services,#pest-types,#products,#why,#testimonials,#identity-pillars,#core-competencies,#cta{
    padding:72px 24px}
  footer{padding:56px 24px 28px}
  .svc-grid{grid-template-columns:1fr}
  .stats-inner{grid-template-columns:1fr 1fr;border-radius:16px}
  .stat-block{border-right:1px solid var(--gray-200);border-top:none}
  .stat-block:nth-child(2n){border-right:none}
  .stat-block:nth-child(-n+2){border-top:none}
  .stat-block:nth-child(n+3){border-top:1px solid var(--gray-200)}
  .why-grid{grid-template-columns:1fr;gap:40px}
  .testi-grid{grid-template-columns:1fr}
  .cc-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr;gap:0}
  .fb-headline{font-size:23px}
  .fb-trust,.fb-ctabar{flex-direction:column;align-items:flex-start}
  .fb-ctabar p{flex:0 0 auto}
  .fb-ctabar-btn{flex:0 0 auto;width:100%}
  .impact-inner{padding:60px 24px;gap:40px}
  .impact-metrics{grid-template-columns:repeat(2,1fr)}
  .coverage-states{gap:12px}
  .pest-types-grid{grid-template-columns:repeat(2,1fr)}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center}
  /* products: 1 card per row, show full image (no crop) */
  .products-grid{grid-template-columns:1fr}
  .product-img-area{height:auto}
  .product-img-area .product-photo{position:static;height:auto;object-fit:contain}
}
/* ══════════════════════════════════════════
   INTERIOR PAGES (Who We Are, etc.)
   ══════════════════════════════════════════ */
/* page banner */
.page-hero{
  position:relative;overflow:hidden;
  padding:150px 80px 84px;
  background:linear-gradient(to right,#07182b 0%,#0c2a4a 38%,#125a93 100%);
}
.page-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-55deg,
    rgba(255,255,255,0.04) 0px,rgba(255,255,255,0.04) 1px,
    transparent 1px,transparent 22px);
  -webkit-mask-image:linear-gradient(to right,transparent,rgba(0,0,0,1) 60%);
  mask-image:linear-gradient(to right,transparent,rgba(0,0,0,1) 60%);
}
.page-hero::after{
  content:'';position:absolute;top:-160px;right:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,120,200,0.30),transparent 70%);pointer-events:none;
}
.page-hero-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto}
.page-hero-title{
  font-family:'Exo 2',sans-serif;font-weight:900;
  font-size:clamp(38px,5vw,68px);letter-spacing:-2px;line-height:1.04;
  color:#fff;margin:10px 0 16px;
}
.page-hero-title span{color:var(--green)}
/* de-emphasised sub-phrase inside a page-hero title (e.g. the served states) */
.page-hero-title span.ph-title-sm{
  display:block;color:inherit;
  font-size:0.46em;font-weight:700;letter-spacing:-0.5px;
  opacity:0.82;margin:6px 0 2px;
}
.page-hero-sub{
  font-size:16px;color:var(--muted-light);max-width:620px;
  line-height:1.8;font-weight:300;
}
.breadcrumb{margin-top:24px;font-size:13px;color:rgba(255,255,255,0.5);font-weight:300}
.breadcrumb a{color:var(--blue-light);text-decoration:none;transition:color 0.2s}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{margin:0 8px;opacity:0.5}

/* page-hero text entrance — staggered pop-up matching the home hero */
.page-hero .section-label{animation:fadeDown 0.8s cubic-bezier(0.16,1,0.3,1) 0.12s both}
.page-hero-title{overflow:hidden;animation:lineUp 1s cubic-bezier(0.16,1,0.3,1) 0.30s both}
.page-hero-sub{animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.58s both}
.page-hero .breadcrumb{animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.74s both}

/* generic page section */
.psec{padding:88px 80px;position:relative;z-index:2}
.psec.gray{background:var(--gray-50);border-top:1px solid var(--gray-200)}
.psec.white{background:var(--white)}
.psec-inner{max-width:1100px;margin:0 auto}
.psec-head{text-align:center;margin-bottom:48px}
.psec-head .section-label{justify-content:center}
.psec-intro{font-size:15px;color:var(--gray-500);max-width:680px;
  line-height:1.8;font-weight:300;margin:16px auto 0;text-align:center}
/* refined section sign-off — a centred closing statement with a small gradient accent rule above */
.psec-closing{
  position:relative;max-width:640px;margin:52px auto 0;padding-top:28px;
  text-align:center;font-family:'Exo 2',sans-serif;
  font-size:clamp(16px,1.7vw,19px);font-weight:600;
  line-height:1.6;letter-spacing:-0.2px;color:var(--text-dark);
}
.psec-closing::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:46px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--green));
}

/* intro prose */
.about-lead{font-size:18px;color:var(--text-dark);line-height:1.8;
  font-weight:500;margin-bottom:22px;font-family:'Exo 2',sans-serif;letter-spacing:-0.2px}
.about-text p{font-size:15px;color:var(--gray-700);line-height:1.85;
  font-weight:300;margin-bottom:18px}
.about-text{max-width:860px;margin:0 auto;text-align:center}

/* why-clients-trust checklist (light bg) */
.trust-heading{text-align:center;font-family:'Exo 2',sans-serif;
  font-size:clamp(20px,2.2vw,28px);font-weight:800;letter-spacing:-0.5px;
  color:var(--text-dark);margin:46px auto 4px}
.trust-list{max-width:640px;margin:32px auto 0;display:flex;flex-direction:column;gap:12px;text-align:left}
.trust-item{display:flex;align-items:flex-start;gap:13px;font-size:15px;
  color:var(--gray-700);font-weight:400;line-height:1.6}
.trust-check{flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:rgba(140,200,40,0.14);color:var(--green);
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.trust-check svg{width:13px;height:13px}
.trust-closing{max-width:820px;margin:34px auto 0;font-size:19px;color:var(--blue-deep);
  line-height:1.8;font-weight:600;text-align:center;font-style:italic}
.trust-closing strong{color:var(--green);font-weight:700;font-style:normal}
/* intro line above the trust checklist */
.trust-intro{max-width:760px;margin:14px auto 0;font-size:15px;color:var(--gray-700);
  line-height:1.8;font-weight:300;text-align:center}
/* detailed trust items: bold lead-in label + description */
.trust-text{display:block}
.trust-text strong{color:var(--text-dark);font-weight:700}

/* trusted manufacturer brand cards */
.brand-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:1100px;margin:0 auto}
.brand-card{
  background:var(--white);border:1px solid var(--gray-200);border-radius:16px;
  padding:26px 18px;text-align:center;box-shadow:0 2px 12px rgba(0,0,0,0.05);
  transition:all 0.32s cubic-bezier(0.16,1,0.3,1);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.brand-card:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(0,120,200,0.12);border-color:var(--blue-light)}
.brand-badge{
  width:46px;height:46px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(140,200,40,0.12);color:var(--green-dark);
}
.brand-badge svg{width:22px;height:22px}
.brand-name{font-family:'Exo 2',sans-serif;font-size:14.5px;font-weight:800;color:var(--text-dark);line-height:1.3}
.brand-note{font-size:11px;color:var(--gray-500);font-weight:400;line-height:1.4}
/* emoji variant of the brand badge — same green-tinted container + green silhouette
   as the SVG badges so every card in the Solutions section reads uniformly */
.brand-badge.emoji{
  background:rgba(140,200,40,0.12);font-size:22px;line-height:1;
  color:transparent;text-shadow:0 0 0 var(--green-dark);
}

/* ── PROFESSIONAL-GRADE SOLUTIONS — grouped sub-sections ── */
.sol-group{
  max-width:1100px;margin:46px auto 4px;
  font-family:'Exo 2',sans-serif;font-size:clamp(18px,2vw,24px);
  font-weight:800;letter-spacing:-0.4px;color:var(--blue-dark);
  display:flex;align-items:center;gap:10px;
}
.sol-group:first-of-type{margin-top:8px}
/* render the group emoji as a solid green silhouette so it matches the card badges */
.sol-group .sol-ico{
  color:transparent;text-shadow:0 0 0 var(--green-dark);
  font-size:0.92em;line-height:1;
}
.sol-group-sub{
  max-width:1100px;margin:0 auto 24px;
  font-size:14px;color:var(--gray-500);font-weight:300;line-height:1.7;
}
/* uniform cards: every card is the same width across all three groups,
   wrapping and centering so the 5 / 4 / 2 groups stay visually consistent */
.sol-grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:16px;max-width:1100px;margin:0 auto;
}
.sol-grid .brand-card{flex:1 1 185px;min-width:165px;max-width:205px}
/* descriptions are longer here than on the plain brand grid — bump size/contrast for readability */
.sol-grid .brand-note{font-size:12.5px;line-height:1.55;color:var(--gray-700)}
@media(max-width:480px){
  .sol-grid .brand-card{flex-basis:100%;max-width:none}
}

/* sub-headings (H3) share one distinct colour tier, between the dark H2 and gray body */
.page-about .trust-heading{color:var(--blue-dark)}

/* commitment band */
.commit-band{
  position:relative;z-index:2;overflow:hidden;text-align:center;
  background:linear-gradient(135deg,var(--blue-xdeep) 0%,var(--blue-deep) 100%);
  padding:88px 80px;
}
.commit-band::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(140,200,40,0.14),transparent 60%);
}
.commit-inner{position:relative;z-index:2;max-width:820px;margin:0 auto}
.commit-text{font-size:17px;color:rgba(255,255,255,0.82);line-height:1.85;font-weight:300;margin-top:18px}

/* brand sign-off tagline band */
.signoff{
  background:linear-gradient(135deg,var(--green-dark),var(--green));
  text-align:center;padding:60px 80px;position:relative;z-index:2;
}
.signoff-name{font-family:'Exo 2',sans-serif;font-size:clamp(24px,3vw,34px);
  font-weight:900;color:#fff;letter-spacing:-0.5px}
.signoff-tag{font-family:'Exo 2',sans-serif;font-size:clamp(16px,2vw,22px);
  font-weight:700;color:var(--dark);margin-top:8px;font-style:italic}
.signoff-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.signoff-pill{
  background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.35);
  border-radius:var(--radius-pill);padding:8px 18px;
  font-size:13px;font-weight:700;color:#fff;font-family:'Exo 2',sans-serif;
}
.signoff-comp-head{font-family:'Exo 2',sans-serif;font-size:16px;font-weight:800;
  color:#fff;letter-spacing:.4px;text-transform:uppercase;margin-top:26px}
.signoff-comp{list-style:none;margin:16px auto 0;padding:0;max-width:720px;text-align:center;
  display:grid;gap:10px}
.signoff-comp li{font-size:14px;line-height:1.55;color:rgba(255,255,255,0.92);font-weight:300}
.signoff-comp li::before{content:"•";color:#fff;font-weight:700;margin-right:8px}
.signoff-comp li strong{font-family:'Exo 2',sans-serif;font-weight:700;color:#fff}

/* ════════════════════════════════════════════
   WHO WE ARE — refined color tone & depth
   (scoped to body.page-about so other pages are untouched)
   ════════════════════════════════════════════ */

/* warmer page-hero accent */
.page-about .page-hero{
  background:linear-gradient(118deg,#07182b 0%,#0c2a4a 30%,#125a93 74%,#1a6fb4 100%);
}
.page-about .page-hero-title span{color:var(--green-light)}

/* cool brand-tinted section backgrounds + soft glows for depth */
.page-about .psec{overflow:hidden}
.page-about .psec.gray{
  background:linear-gradient(180deg,#EAF2FB 0%,#F5FAFE 100%);
  border-top:1px solid #D8E6F2;
}
.page-about .psec.white{
  background:linear-gradient(180deg,#FFFFFF 0%,#FAFCFF 100%);
}
.page-about .psec.gray::before{
  content:'';position:absolute;top:-150px;right:-130px;width:440px;height:440px;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(0,120,200,0.10),transparent 70%);
}
.page-about .psec.white::before{
  content:'';position:absolute;bottom:-170px;left:-130px;width:460px;height:460px;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(140,200,40,0.08),transparent 70%);
}
.page-about .psec-inner{position:relative;z-index:1}

/* section labels become tinted pill chips */
.page-about .psec-head .section-label{
  padding:7px 16px;border-radius:var(--radius-pill);margin-bottom:18px;
}
.page-about .psec-head .section-label::before{display:none}
.page-about .psec-head .section-label.green{
  background:rgba(140,200,40,0.13);color:var(--green-dark);
}
.page-about .psec-head .section-label.blue{
  background:rgba(0,120,200,0.11);color:var(--blue-dark);
}

/* why-clients-trust → 2-column hover cards */
.page-about .trust-list{
  max-width:880px;display:grid;grid-template-columns:repeat(2,1fr);
  gap:14px;text-align:left;
}
.page-about .trust-item{
  background:var(--white);border:1px solid var(--gray-200);border-radius:14px;
  padding:16px 18px;align-items:center;font-size:14.5px;font-weight:500;
  color:var(--text-dark);box-shadow:0 2px 10px rgba(0,0,0,0.04);
  transition:transform .3s cubic-bezier(0.16,1,0.3,1),box-shadow .3s,border-color .3s;
}
.page-about .trust-item:hover{
  transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,120,200,0.10);
  border-color:rgba(140,200,40,0.5);
}
.page-about .trust-item:last-child{
  grid-column:1 / -1;justify-content:center;text-align:center;
  background:linear-gradient(135deg,rgba(0,120,200,0.07),rgba(140,200,40,0.07));
  border-color:rgba(0,120,200,0.18);font-weight:700;
}
/* detailed variant: single column, label + description, top-aligned */
.page-about .trust-list.detailed{
  grid-template-columns:1fr;max-width:780px;gap:12px;
}
.page-about .trust-list.detailed .trust-item{
  align-items:flex-start;font-weight:400;color:var(--gray-700);line-height:1.6;
}
.page-about .trust-list.detailed .trust-item:last-child{
  grid-column:auto;justify-content:flex-start;text-align:left;
  background:var(--white);border-color:var(--gray-200);font-weight:400;
}
@media(max-width:640px){
  .page-about .trust-list{grid-template-columns:1fr}
}

/* areas we serve */
.area-stack{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.area-card{
  background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-card);
  box-shadow:var(--card-shadow);padding:30px 32px;
  transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
}
.area-card:hover{box-shadow:var(--card-shadow-hover);border-color:var(--blue-light)}
.area-head{
  display:flex;align-items:center;gap:16px;
  margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--gray-100);
}
.area-emoji{
  width:56px;height:56px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:28px;
  background:rgba(0,120,200,0.09);
}
.area-state{font-family:'Exo 2',sans-serif;font-size:22px;font-weight:900;color:var(--text-dark);letter-spacing:-0.5px}
.area-count{font-size:13px;color:var(--gray-500);font-weight:500;margin-top:2px}
.area-chips{display:flex;flex-wrap:wrap;gap:10px}
.area-chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;padding:8px 15px;
  border-radius:var(--radius-pill);background:var(--gray-50);
  border:1px solid var(--gray-200);color:var(--gray-700);
  transition:all 0.22s;cursor:default;
}
.area-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.area-chip:hover{background:rgba(0,120,200,0.08);border-color:var(--blue-light);color:var(--blue-dark);transform:translateY(-2px)}
@media(max-width:768px){
  .area-card{padding:24px 20px}
  .area-state{font-size:19px}
}

/* contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:36px;max-width:1100px;margin:0 auto;align-items:start}
.contact-col-title{font-family:'Exo 2',sans-serif;font-size:20px;font-weight:800;color:var(--text-dark);margin-bottom:6px;letter-spacing:-0.4px}
.contact-col-sub{font-size:14px;color:var(--gray-500);line-height:1.7;font-weight:300;margin-bottom:24px}
.cinfo-card{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--white);border:1px solid var(--gray-200);border-radius:16px;
  padding:20px 22px;box-shadow:var(--card-shadow);margin-bottom:14px;text-decoration:none;
  transition:all 0.32s cubic-bezier(0.16,1,0.3,1);
}
.cinfo-card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover);border-color:var(--blue-light)}
.cinfo-ico{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(140,200,40,0.12);color:var(--green-dark);
}
.cinfo-ico svg{width:22px;height:22px}
.cinfo-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray-500);font-weight:700;margin-bottom:4px}
.cinfo-value{font-family:'Exo 2',sans-serif;font-size:16px;font-weight:700;color:var(--text-dark);line-height:1.4}
.cform{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-card);padding:32px;box-shadow:var(--card-shadow)}
.cform-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--gray-700);margin-bottom:7px}
.field input,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--gray-200);border-radius:10px;
  font-family:'DM Sans',sans-serif;font-size:14px;color:var(--text-dark);
  background:var(--gray-50);transition:all 0.22s;outline:none;
}
.field input:focus,.field textarea:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(0,120,200,0.12)}
.field textarea{resize:vertical;min-height:130px}
.cform .btn-primary{width:100%;justify-content:center;margin-top:6px}
.cform .btn-primary:disabled{opacity:0.6;cursor:not-allowed;transform:none;box-shadow:none}
.cform-note{font-size:12px;color:var(--gray-500);text-align:center;margin-top:14px;font-weight:300}
/* validation + captcha + alerts */
.hp-field{position:absolute !important;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.field-error{color:#d6332e;font-size:11.5px;margin-top:6px;line-height:1.4}
.field.error input,.field.error textarea{border-color:#e25b5b;background:#fff6f6}
.field.error input:focus,.field.error textarea:focus{border-color:#e25b5b;box-shadow:0 0 0 3px rgba(226,91,91,0.15)}
.form-alert{display:none;border-radius:10px;padding:12px 16px;font-size:13.5px;font-weight:500;margin-bottom:18px;line-height:1.5}
.form-alert.show{display:block}
.form-alert.success{background:rgba(140,200,40,0.12);border:1px solid rgba(140,200,40,0.5);color:var(--green-dark)}
.form-alert.error{background:rgba(226,91,91,0.10);border:1px solid rgba(226,91,91,0.4);color:#c0392b}
@media(max-width:860px){
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .cform-row{grid-template-columns:1fr}
}

@media(max-width:1100px){
  .page-hero{padding:140px 40px 72px}
  .psec{padding-left:40px;padding-right:40px}
  .commit-band,.signoff{padding-left:40px;padding-right:40px}
}
@media(max-width:1024px){
  .brand-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .page-hero{padding:120px 24px 56px}
  .psec{padding:64px 24px}
  .commit-band{padding:64px 24px}
  .signoff{padding:48px 24px}
  .brand-grid{grid-template-columns:repeat(2,1fr)}
}

/* ════════════════════════════════════════════
   PAGE-HERO BANNER — split layout
   Text + description on the LEFT, banner photo blended into the
   RIGHT edge of the dark header. The photo lives in its own
   .page-hero-photo layer and is feathered with a mask
   (transparent on the left, soft top/bottom) so it dissolves
   into the gradient with no hard seam.
   ════════════════════════════════════════════ */
.page-hero.ph-who,
.page-hero.ph-why,
.page-hero.ph-services,
.page-hero.ph-products,
.page-hero.ph-areas,
.page-hero.ph-contact{
  min-height:max(60vh, 770px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
/* text column kept on the left, clear of the photo */
.page-hero.ph-who .page-hero-inner,
.page-hero.ph-why .page-hero-inner,
.page-hero.ph-services .page-hero-inner,
.page-hero.ph-products .page-hero-inner,
.page-hero.ph-areas .page-hero-inner,
.page-hero.ph-contact .page-hero-inner{
  max-width:560px;
  margin:0;                              /* left-aligned, not centered */
  text-shadow:0 2px 14px rgba(0,0,0,0.45);
}
/* blended photo panel on the right.
   The box is matched to each image's own ratio (aspect-ratio set
   per page below) so the WHOLE image shows with no crop, while its
   edges feather into the dark header for a seamless blend. */
.page-hero-photo{
  position:absolute;top:50%;right:0;transform:translateY(-50%);
  width:auto;height:100%;z-index:1;pointer-events:none;opacity:0.58;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  mix-blend-mode:multiply;
  transition:opacity 0.55s ease, transform 0.65s cubic-bezier(0.16,1,0.3,1);
  /* soft feather on all four edges so there is no hard picture boundary (matches home hero) */
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,#000 16%,#000 92%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0%,#000 16%,#000 92%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%);
  mask-composite:intersect;
}
/* per-page image + box ratio matched to that image's real dimensions */
.page-hero.ph-who .page-hero-photo{background-image:url('../images/who_we_wre.jpg');aspect-ratio:1537 / 1023}
.page-hero.ph-why .page-hero-photo{background-image:url('../images/why_hha.jpg');aspect-ratio:1536 / 1024}
.page-hero.ph-services .page-hero-photo{background-image:url('../images/services.jpg');aspect-ratio:1536 / 1024}
.page-hero.ph-products .page-hero-photo{background-image:url('../images/product.jpg');aspect-ratio:1536 / 1024}
.page-hero.ph-areas .page-hero-photo{background-image:url('../images/areas_we_serve.jpg');aspect-ratio:1024 / 512}
.page-hero.ph-contact .page-hero-photo{background-image:url('../images/get_in_touch.jpg');aspect-ratio:1536 / 1024}

/* reveal the banner photo on hover — fades up to full opacity with a gentle zoom */
@media(min-width:861px){
  .page-hero:hover .page-hero-photo{
    opacity:1;
    transform:translateY(-50%) scale(1.05);
  }
}

/* tablet/phone: photo drops behind the text as a faint full-width wash */
@media(max-width:860px){
  .page-hero.ph-who .page-hero-inner,
  .page-hero.ph-why .page-hero-inner,
  .page-hero.ph-services .page-hero-inner,
  .page-hero.ph-products .page-hero-inner,
  .page-hero.ph-areas .page-hero-inner,
  .page-hero.ph-contact .page-hero-inner{
    max-width:none;
  }
  .page-hero-photo{
    top:0;transform:none;
    width:100%;height:100%;opacity:0.40;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 50%,#000 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 50%,#000 100%);
  }
}
@media(max-width:768px){
  .page-hero.ph-who,
  .page-hero.ph-why,
  .page-hero.ph-services,
  .page-hero.ph-products,
  .page-hero.ph-areas,
  .page-hero.ph-contact{
    min-height:46vh;
  }
}

/* ════════════════════════════════════════════
   PRODUCT DETAIL PAGE (e.g. Flycutor)
   scoped to body.page-product
   ════════════════════════════════════════════ */
.page-product .psec.gray{
  background:linear-gradient(180deg,#EAF2FB 0%,#F5FAFE 100%);
  border-top:1px solid #D8E6F2;
}

/* shared light-bg action buttons */
.btn-blue{
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  color:#fff;font-family:'Exo 2',sans-serif;font-weight:800;font-size:14px;
  padding:14px 30px;border-radius:var(--radius-btn);border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  transition:transform 0.28s,box-shadow 0.28s;
}
.btn-blue:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,120,200,0.32)}
.btn-blue:active{transform:scale(0.97)}
.btn-ghost-blue{
  background:transparent;color:var(--blue);
  font-family:'Exo 2',sans-serif;font-weight:600;font-size:14px;
  padding:13px 28px;border-radius:var(--radius-btn);
  border:1.5px solid rgba(0,120,200,0.35);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;transition:all 0.28s;
}
.btn-ghost-blue:hover{background:rgba(0,120,200,0.08);border-color:var(--blue);transform:translateY(-3px)}

/* ── overview split (image + lead) ── */
.prod-overview{
  display:grid;grid-template-columns:0.92fr 1.08fr;gap:54px;
  align-items:center;max-width:1100px;margin:0 auto;
}
.prod-figure{
  position:relative;border-radius:var(--radius-card);
  background:linear-gradient(145deg,rgba(0,120,200,0.10),rgba(140,200,40,0.10));
  border:1px solid var(--gray-200);box-shadow:var(--card-shadow);
  display:flex;align-items:center;justify-content:center;
  padding:38px;overflow:hidden;min-height:340px;
}
.prod-figure::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 40%,rgba(0,120,200,0.16),transparent 64%);
}
.prod-figure img{
  position:relative;z-index:1;max-width:100%;max-height:380px;height:auto;display:block;
  filter:drop-shadow(0 14px 30px rgba(0,60,110,0.20));
}
.prod-figure-tag{
  position:absolute;top:16px;left:16px;z-index:2;
  font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.5px;
  padding:6px 14px;border-radius:var(--radius-pill);
  background:#fff;color:var(--green-dark);border:1px solid rgba(140,200,40,0.55);
  box-shadow:0 4px 12px rgba(0,60,110,0.14);
}
.prod-overview-body .section-label{display:inline-flex}
.prod-title{
  font-family:'Exo 2',sans-serif;font-size:clamp(26px,3vw,38px);
  font-weight:900;letter-spacing:-1px;line-height:1.1;color:var(--text-dark);margin:6px 0 14px;
}
.prod-title span{color:var(--green-dark)}
.prod-lead{font-size:16px;color:var(--gray-700);line-height:1.8;font-weight:300;margin-bottom:14px}
.prod-lead strong{font-weight:600;color:var(--text-dark)}
.prod-pills{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 28px}
.prod-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:var(--radius-pill);
  background:var(--gray-50);border:1px solid var(--gray-200);color:var(--gray-700);
}
.prod-pill svg{width:15px;height:15px;color:var(--green-dark)}
.prod-cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* ── how it works (connected process flow) ── */
.flow{
  position:relative;max-width:1000px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
/* gradient track that joins the three nodes (node centres at 1/6, 1/2, 5/6) */
.flow::before{
  content:'';position:absolute;top:40px;left:16.66%;right:16.66%;height:4px;
  border-radius:2px;z-index:0;
  background:linear-gradient(90deg,var(--blue),var(--green));
}
/* light pulse that travels along the track to convey direction/sequence */
.flow::after{
  content:'';position:absolute;top:40px;left:16.66%;right:16.66%;height:4px;
  border-radius:2px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.9),transparent);
  background-size:130px 100%;background-repeat:no-repeat;
  animation:flowPulse 2.6s linear infinite;
}
@keyframes flowPulse{from{background-position:-10% 0}to{background-position:110% 0}}
.flow-step{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px;
}
/* directional chevron sitting on the track before steps 2 and 3 */
.flow-step + .flow-step::before{
  content:'';position:absolute;top:34px;left:-13px;z-index:2;
  width:13px;height:13px;
  border-top:3px solid var(--green-dark);border-right:3px solid var(--green-dark);
  transform:rotate(45deg);opacity:0.8;
}
.flow-node{
  position:relative;width:84px;height:84px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:3px solid var(--blue);color:var(--blue);
  box-shadow:0 8px 24px rgba(0,120,200,0.18);margin-bottom:22px;
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1),box-shadow 0.35s;
}
.flow-step:hover .flow-node{transform:translateY(-5px) scale(1.05);box-shadow:0 14px 32px rgba(0,120,200,0.28)}
.flow-node svg{width:34px;height:34px}
.flow-step.elec .flow-node{
  border-color:var(--green-dark);color:var(--green-dark);
  box-shadow:0 8px 24px rgba(140,200,40,0.24);
}
.flow-step.elec:hover .flow-node{box-shadow:0 14px 32px rgba(140,200,40,0.34)}
.flow-title{font-family:'Exo 2',sans-serif;font-size:18px;font-weight:800;color:var(--text-dark);margin-bottom:9px}
.flow-desc{font-size:13.5px;color:var(--gray-700);line-height:1.68;font-weight:300;max-width:270px}

/* ── benefits ── */
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto}
.benefit-item{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--white);border:1px solid var(--gray-200);border-radius:14px;
  padding:20px;box-shadow:0 2px 12px rgba(0,0,0,0.05);
  transition:all 0.32s cubic-bezier(0.16,1,0.3,1);
}
.benefit-item:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover);border-color:rgba(140,200,40,0.5)}
.benefit-check{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(140,200,40,0.13);color:var(--green-dark);
}
.benefit-check svg{width:20px;height:20px}
.benefit-text{font-size:13.5px;line-height:1.5;color:var(--gray-700);font-weight:400;padding-top:7px}
.benefit-text strong{font-family:'Exo 2',sans-serif;font-weight:700;color:var(--text-dark);display:block;font-size:14px}

/* ── applications chips ── */
.app-wrap{max-width:920px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.app-chip{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:500;padding:10px 18px;border-radius:var(--radius-pill);
  background:var(--white);border:1px solid var(--gray-200);color:var(--gray-700);
  box-shadow:0 2px 10px rgba(0,0,0,0.04);transition:all 0.26s cubic-bezier(0.16,1,0.3,1);
}
.app-chip:hover{transform:translateY(-3px);border-color:var(--blue-light);color:var(--blue-dark)}
.app-chip svg{width:17px;height:17px;color:var(--green-dark);flex-shrink:0}

/* ── models + spec tables ── */
.model-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:1000px;margin:0 auto}
.model-card{
  background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-card);
  overflow:hidden;box-shadow:var(--card-shadow);display:flex;flex-direction:column;
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.model-card:hover{transform:translateY(-6px);box-shadow:var(--card-shadow-hover);border-color:var(--gray-300)}
.model-figure{
  position:relative;height:330px;padding:30px;
  background:linear-gradient(145deg,rgba(0,120,200,0.08),rgba(140,200,40,0.08));
  border-bottom:1px solid var(--gray-200);
  display:flex;align-items:center;justify-content:center;
}
.model-figure img{max-height:100%;max-width:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 12px 26px rgba(0,60,110,0.18))}
.model-tag{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.4px;
  padding:5px 12px;border-radius:var(--radius-pill);
  background:#fff;color:var(--green-dark);border:1px solid rgba(140,200,40,0.55);
  box-shadow:0 4px 12px rgba(0,60,110,0.14);
}
.model-body{padding:24px}
.model-name{font-family:'Exo 2',sans-serif;font-size:16px;font-weight:800;color:var(--text-dark);letter-spacing:-0.3px;line-height:1.3}
.model-name .model-code{color:var(--blue)}
.model-sub{font-family:'Exo 2',sans-serif;font-size:12.5px;color:var(--green-dark);font-weight:600;margin:4px 0 14px}
.model-desc{font-size:13px;color:var(--gray-700);line-height:1.62;font-weight:300;
  margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--gray-100)}
.spec-table{width:100%;border-collapse:collapse;font-size:12.5px}
.spec-table th,.spec-table td{text-align:left;padding:9px 0;border-bottom:1px solid var(--gray-100);vertical-align:top}
.spec-table th{color:var(--gray-500);font-weight:500;width:48%;font-size:12px}
.spec-table td{color:var(--text-dark);font-weight:600;font-family:'Exo 2',sans-serif}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:none}

/* ── consumable lamps ── */
.lamp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:16px;max-width:1040px;margin:0 auto}
.lamp-card{
  position:relative;background:var(--white);border:1px solid var(--gray-200);border-radius:16px;
  padding:24px 22px;box-shadow:0 2px 12px rgba(0,0,0,0.05);
  transition:all 0.32s cubic-bezier(0.16,1,0.3,1);
}
.lamp-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);border-color:var(--blue-light)}
.lamp-icon{
  width:46px;height:46px;border-radius:12px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,120,200,0.09);color:var(--blue);
}
.lamp-icon svg{width:22px;height:22px}
.lamp-name{font-family:'Exo 2',sans-serif;font-size:15px;font-weight:800;color:var(--text-dark);margin-bottom:6px;line-height:1.3}
.lamp-meta{font-size:12.5px;color:var(--gray-700);line-height:1.7;font-weight:300}
.lamp-meta strong{font-weight:600;color:var(--text-dark)}
.lamp-haccp{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:10.5px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--radius-pill);
  background:rgba(140,200,40,0.13);color:var(--green-dark);border:1px solid rgba(140,200,40,0.38);
}
.lamp-haccp svg{width:12px;height:12px}

/* ── info callout (replacement / HACCP) ── */
.callout{
  max-width:1000px;margin:34px auto 0;display:flex;gap:18px;align-items:flex-start;
  background:linear-gradient(135deg,rgba(0,120,200,0.06),rgba(140,200,40,0.06));
  border:1px solid rgba(0,120,200,0.18);border-radius:18px;padding:24px 28px;
}
.callout + .callout{margin-top:16px}
.callout-icon{
  width:46px;height:46px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,120,200,0.10);color:var(--blue);
}
.callout-icon svg{width:22px;height:22px}
.callout-title{font-family:'Exo 2',sans-serif;font-weight:800;font-size:15px;color:var(--text-dark);margin-bottom:5px}
.callout-text{font-size:13.5px;color:var(--gray-700);line-height:1.72;font-weight:300}
.callout-text em{font-style:italic;color:var(--blue-deep)}

/* ── product image gallery (thumbnail strip) ── */
.prod-gallery{display:flex;flex-direction:column;gap:14px}
.prod-gallery-main{margin:0}
.prod-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.prod-thumb{
  position:relative;border:1px solid var(--gray-200);border-radius:14px;overflow:hidden;
  background:linear-gradient(145deg,rgba(0,120,200,0.08),rgba(140,200,40,0.08));
  padding:10px;cursor:pointer;height:96px;
  display:flex;align-items:center;justify-content:center;
  transition:transform 0.28s cubic-bezier(0.16,1,0.3,1),border-color 0.28s,box-shadow 0.28s;
}
.prod-thumb img{max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,60,110,0.16))}
.prod-thumb:hover{transform:translateY(-3px);border-color:var(--blue-light)}
.prod-thumb.active{border-color:var(--green-dark);box-shadow:0 0 0 2px rgba(140,200,40,0.30)}

/* ── cost-saving comparison table ── */
.compare-wrap{max-width:1000px;margin:44px auto 0;overflow-x:auto}
.compare-head{text-align:center;margin-bottom:22px}
.compare-table{
  width:100%;border-collapse:collapse;min-width:560px;
  background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-card);
  overflow:hidden;box-shadow:var(--card-shadow);font-size:13.5px;
}
.compare-table th,.compare-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--gray-100)}
.compare-table thead th{
  font-family:'Exo 2',sans-serif;font-weight:800;font-size:13px;
  background:var(--gray-50);color:var(--text-dark);vertical-align:bottom;
}
.compare-table thead th.col-led{
  background:linear-gradient(135deg,var(--blue),var(--green-dark));color:#fff;
}
.compare-table thead th .col-note{display:block;font-weight:500;font-size:11px;opacity:0.85;margin-top:3px}
.compare-table tbody th{font-weight:500;color:var(--gray-700);font-size:12.5px;width:40%}
.compare-table tbody td{font-family:'Exo 2',sans-serif;font-weight:600;color:var(--text-dark)}
.compare-table td.col-led{background:rgba(140,200,40,0.07)}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:none}
.compare-table tr.total th,.compare-table tr.total td{font-weight:800;font-size:14px;border-top:2px solid var(--gray-200)}
.compare-save{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;
  max-width:1000px;margin:18px auto 0;padding:18px 24px;text-align:center;
  background:linear-gradient(135deg,rgba(0,120,200,0.10),rgba(140,200,40,0.13));
  border:1px solid rgba(140,200,40,0.42);border-radius:16px;
  font-family:'Exo 2',sans-serif;font-weight:700;color:var(--text-dark);font-size:15px;
}
.compare-save strong{color:var(--green-dark);font-size:24px;font-weight:900}
.compare-basis{text-align:center;font-size:12px;color:var(--gray-500);margin:12px auto 0;font-weight:300}

@media(max-width:900px){
  .prod-overview{grid-template-columns:1fr;gap:32px}
  .benefit-grid{grid-template-columns:1fr 1fr}
  .model-grid{grid-template-columns:1fr;max-width:440px}
  /* flow → vertical timeline */
  .flow{grid-template-columns:1fr;gap:8px;max-width:420px}
  .flow::before{top:42px;bottom:42px;left:42px;right:auto;width:4px;height:auto;
    background:linear-gradient(180deg,var(--blue),var(--green))}
  .flow::after{display:none}
  .flow-step{flex-direction:row;align-items:flex-start;text-align:left;gap:22px;padding:14px 0}
  .flow-step + .flow-step::before{display:none}
  .flow-node{margin-bottom:0;flex-shrink:0}
  .flow-body{padding-top:10px}
  .flow-desc{max-width:none}
}
@media(max-width:600px){
  .benefit-grid{grid-template-columns:1fr}
}

/* ── FAQ ACCORDION ── */
.faq-wrap{max-width:820px;margin:0 auto}
.faq-item{
  background:#fff;border:1px solid var(--gray-100);border-radius:14px;
  margin-bottom:14px;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease;
}
.faq-item[open]{border-color:var(--green);box-shadow:0 10px 30px -18px rgba(7,24,43,.35)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:18px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:'Exo 2',sans-serif;font-weight:700;font-size:15.5px;color:var(--text-dark);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .faq-plus{
  flex:0 0 auto;width:24px;height:24px;position:relative;transition:transform .3s ease;color:var(--green);
}
.faq-item[open] summary .faq-plus{transform:rotate(45deg)}
.faq-item summary .faq-plus::before,
.faq-item summary .faq-plus::after{
  content:"";position:absolute;background:currentColor;border-radius:2px;
}
.faq-item summary .faq-plus::before{left:11px;top:3px;width:2px;height:18px}
.faq-item summary .faq-plus::after{top:11px;left:3px;height:2px;width:18px}
.faq-answer{padding:0 22px 20px;font-size:14px;color:var(--gray-700);line-height:1.78;font-weight:300}

/* ── CENTERED SHOWCASE IMAGE ── */
.showcase-img{display:block;max-width:900px;width:100%;margin:0 auto;border-radius:16px;border:1px solid var(--gray-100);box-shadow:var(--card-shadow-hover)}

/* ── IMAGE LIGHTBOX ── */
img.zoomable{cursor:zoom-in}
.lightbox{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;
  padding:32px;background:rgba(4,12,24,0.88);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
}
.lightbox.open{opacity:1;visibility:visible}
.lightbox-img{
  max-width:96vw;max-height:92vh;width:auto;height:auto;
  border-radius:10px;box-shadow:0 24px 70px -20px rgba(0,0,0,0.7);
  transform:scale(.96);transition:transform .25s ease;cursor:zoom-out;
}
.lightbox.open .lightbox-img{transform:scale(1)}
.lightbox-close{
  position:absolute;top:18px;right:24px;width:46px;height:46px;
  border:none;border-radius:50%;background:rgba(255,255,255,0.12);
  color:#fff;font-size:30px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.lightbox-close:hover{background:rgba(255,255,255,0.25)}

/* ── SERVICE EXPERTISE CARDS → CLICKABLE + POPUP ── */
.svc-grid-hint{
  text-align:center;color:var(--muted-dark);font-size:13.5px;
  margin:-14px auto 26px;font-weight:400;
}
.svc-card[role="button"]{cursor:pointer;position:relative;outline:none}
.svc-card[role="button"]:focus-visible{
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,120,200,0.25);
}
.svc-more{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Exo 2',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.3px;color:var(--blue);margin-top:2px;
  opacity:.78;transition:opacity .25s,gap .25s;
}
.svc-more svg{width:13px;height:13px}
.svc-card:hover .svc-more{opacity:1;gap:9px}
.svc-detail{display:none}

/* MODAL */
.svc-modal{
  position:fixed;inset:0;z-index:600;
  display:flex;align-items:center;justify-content:center;
  padding:28px;background:rgba(4,12,24,0.78);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;
}
.svc-modal.open{opacity:1;visibility:visible}
.svc-modal-panel{
  position:relative;background:var(--white);
  width:min(680px,100%);max-height:88vh;overflow:hidden;
  border-radius:22px;box-shadow:0 30px 80px -24px rgba(0,0,0,0.55);
  display:flex;flex-direction:column;
  transform:translateY(16px) scale(.97);transition:transform .3s cubic-bezier(0.16,1,0.3,1);
}
.svc-modal.open .svc-modal-panel{transform:translateY(0) scale(1)}
/* header content written over the banner image (like the page-hero title) */
.svc-modal-head{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;align-items:center;gap:14px;
  padding:34px 96px 18px 24px;
  background:linear-gradient(to top,
    rgba(5,18,33,0.95) 0%,rgba(5,18,33,0.55) 52%,transparent 100%);
}
.svc-modal-head.no-banner{
  position:static;padding:24px 24px 0;background:none;
}
.svc-modal-head > *{position:relative;z-index:2}
.svc-modal-icon{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;
  background:rgba(140,200,40,0.18);border:2px solid rgba(168,224,64,0.6);
}
.svc-modal-icon.emoji{color:transparent;text-shadow:0 0 0 var(--green-light)}
.svc-modal-icon:not(.emoji){color:#fff}
.svc-modal-icon svg{width:28px;height:28px;display:block}
.svc-modal-sub{
  font-family:'Exo 2',sans-serif;font-size:12px;font-weight:600;
  color:var(--green-light);letter-spacing:.3px;
}
.svc-modal-title{
  font-family:'Exo 2',sans-serif;font-size:clamp(18px,2.4vw,22px);font-weight:800;
  color:#fff;line-height:1.25;letter-spacing:-0.3px;margin-top:2px;
}
.svc-modal-body{
  padding:24px 28px 30px;overflow-y:auto;
}
.svc-modal-figure{
  position:relative;overflow:hidden;
  margin:-24px -28px 22px;            /* full-bleed banner at the top of the panel */
  aspect-ratio:16/8;min-height:240px;
  /* same blue background as the page banners */
  background:linear-gradient(to right,#07182b 0%,#0c2a4a 38%,#125a93 100%);
}
/* faint diagonal line texture, matching the page banners */
.svc-modal-figure::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(-55deg,
    rgba(255,255,255,0.05) 0px,rgba(255,255,255,0.05) 1px,
    transparent 1px,transparent 22px);
}
/* the photo sits INSIDE the blue background — multiply-blended at reduced
   opacity with feathered edges so it dissolves into the blue, exactly like
   the .page-hero-photo banner treatment */
.svc-modal-figure img{
  position:relative;z-index:2;
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0.66;mix-blend-mode:multiply;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,#000 14%,#000 86%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 12%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0%,#000 14%,#000 86%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 12%,#000 100%);
  mask-composite:intersect;
}
/* product shots are white-background studio images — keep them clean and fully
   visible (blending a white product into blue would erase it) */
/* product banners: blue background like the rest, with the background removed
   from the product so the unit sits directly on the blue (no white card) */
/* HHA logo badge — branding mark on every service banner */
.svc-modal-figure::after{
  content:'';position:absolute;z-index:6;left:16px;top:14px;
  width:178px;height:46px;border-radius:10px;pointer-events:none;
  background:rgba(255,255,255,0.95) url('../images/logo.png') center/84% no-repeat;
  box-shadow:0 4px 14px rgba(0,0,0,0.28);
}
@supports not (aspect-ratio:16/8){
  .svc-modal-figure{height:210px}
}
.svc-modal-lead{font-size:14.5px;line-height:1.68;color:var(--gray-700);margin-bottom:20px}
.svc-modal-block{
  border:1px solid var(--gray-200);border-radius:14px;
  padding:16px 18px;margin-bottom:14px;background:var(--gray-50);
}
.svc-modal-h{
  font-family:'Exo 2',sans-serif;font-size:14px;font-weight:700;
  color:var(--text-dark);letter-spacing:-0.2px;margin-bottom:10px;
}
.svc-modal-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.svc-modal-list li{
  position:relative;padding-left:20px;
  font-size:13px;line-height:1.6;color:var(--gray-700);font-weight:300;
}
.svc-modal-list li::before{
  content:"";position:absolute;left:2px;top:8px;
  width:7px;height:7px;border-radius:50%;background:var(--green);
}
.svc-modal-list li strong{font-family:'Exo 2',sans-serif;font-weight:600;color:var(--text-dark)}
.svc-modal-list-tick li::before{
  content:"";left:0;top:4px;width:12px;height:7px;border-radius:0;background:transparent;
  border-left:2.5px solid var(--green-dark);border-bottom:2.5px solid var(--green-dark);
  transform:rotate(-45deg);
}
.svc-modal-list-tick li{padding-left:22px}
.svc-modal-method{
  font-size:13px;line-height:1.62;color:var(--gray-700);font-weight:300;margin-top:12px;
}
.svc-modal-method strong{font-family:'Exo 2',sans-serif;font-weight:600;color:var(--text-dark)}
.svc-modal-block .svc-modal-method:first-child{margin-top:0}
.svc-modal-compliance{
  font-size:12.5px;line-height:1.6;color:var(--muted-dark);
  background:rgba(0,120,200,0.05);border:1px solid rgba(0,120,200,0.14);
  border-radius:12px;padding:13px 16px;margin-top:14px;
}
.svc-modal-compliance strong{color:var(--blue-dark);font-weight:600}
.svc-modal-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.svc-modal-btn{
  flex:1 1 200px;text-align:center;text-decoration:none;
  font-family:'Exo 2',sans-serif;font-size:13.5px;font-weight:700;
  padding:13px 18px;border-radius:12px;
  background:var(--gray-50);border:1px solid var(--gray-200);color:var(--blue-dark);
  transition:all .22s ease;
}
.svc-modal-btn:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.svc-modal-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.svc-modal-btn.primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
/* banner CTA buttons (Request a Quote + phone) inside the modal banner */
.svc-modal-headtext{min-width:0}
.svc-modal-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.svc-cta-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;padding:11px 18px;border-radius:10px;white-space:nowrap;transition:all .2s ease;box-shadow:0 4px 14px rgba(0,0,0,0.18)}
.svc-cta-btn svg{width:15px;height:15px;flex-shrink:0}
.svc-cta-btn.primary{background:var(--blue);border:1px solid var(--blue);color:#fff}
.svc-cta-btn.primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);transform:translateY(-2px)}
.svc-cta-btn:not(.primary){background:#fff;border:1px solid #fff;color:var(--blue-dark)}
.svc-cta-btn:not(.primary):hover{color:var(--blue);transform:translateY(-2px)}
.svc-modal-close{
  position:absolute;top:16px;right:18px;width:38px;height:38px;z-index:7;
  border:none;border-radius:50%;background:rgba(255,255,255,0.16);
  color:#fff;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease;
}
.svc-modal-close:hover{background:rgba(255,255,255,0.3)}
@media(max-width:600px){
  .svc-modal{padding:0;align-items:flex-end}
  .svc-modal-panel{width:100%;max-height:92vh;border-radius:20px 20px 0 0}
  .svc-modal-head{padding:30px 84px 16px 18px}
  .svc-modal-head.no-banner{padding:20px 18px 0}
  .svc-modal-body{padding:20px 20px 26px}
  .svc-modal-figure{margin:-20px -20px 20px}
  .svc-modal-figure::after{width:156px;height:40px}
}

/* ── WHO WE ARE / WHAT WE DO POPUP (icm-card + cc-card → modal) ── */
/* clickable affordance on the source cards */
.icm-clickable{cursor:pointer}
.icm-clickable:focus-visible{outline:3px solid var(--blue-light);outline-offset:3px}
.icm-card.icm-clickable::after{transition:width .35s cubic-bezier(0.16,1,0.3,1),opacity .35s ease}
.icm-card.icm-clickable:hover::after{width:64px;opacity:0.9}
.cc-card.icm-clickable:hover .cc-title{color:var(--green-dark)}

.icm-modal{
  position:fixed;inset:0;z-index:600;
  display:flex;align-items:center;justify-content:center;
  padding:28px;background:rgba(4,12,24,0.78);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;
}
.icm-modal.open{opacity:1;visibility:visible}
.icm-modal-panel{
  --icm-acc:var(--blue);
  position:relative;background:var(--white);
  width:min(700px,100%);max-height:88vh;overflow:hidden;
  border-radius:22px;box-shadow:0 30px 80px -24px rgba(0,0,0,0.55);
  display:flex;flex-direction:column;
  transform:translateY(16px) scale(.97);transition:transform .3s cubic-bezier(0.16,1,0.3,1);
}
.icm-modal.open .icm-modal-panel{transform:translateY(0) scale(1)}
.icm-modal-head{
  position:relative;display:flex;align-items:center;gap:16px;flex-shrink:0;
  padding:26px 70px 26px 28px;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--icm-acc) 92%,#000 8%),
    color-mix(in srgb,var(--icm-acc) 70%,var(--blue-xdeep) 30%));
}
.icm-modal-icon{
  width:56px;height:56px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:rgba(255,255,255,0.16);border:2px solid rgba(255,255,255,0.4);
}
.icm-modal-icon svg{width:28px;height:28px}
.icm-modal-headtext{min-width:0}
.icm-modal-label{
  font-family:'Exo 2',sans-serif;font-size:12px;font-weight:800;
  letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.85);
}
.icm-modal-title{
  font-family:'Exo 2',sans-serif;font-size:clamp(18px,2.4vw,22px);font-weight:800;
  color:#fff;line-height:1.25;letter-spacing:-0.3px;margin-top:3px;
}
.icm-modal-close{
  position:absolute;top:16px;right:18px;width:38px;height:38px;z-index:7;
  border:none;border-radius:50%;background:rgba(255,255,255,0.16);
  color:#fff;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease;
}
.icm-modal-close:hover{background:rgba(255,255,255,0.32)}
.icm-modal-body{padding:26px 30px 6px;overflow-y:auto}
.icm-m-tag{
  font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;
  color:var(--icm-acc);letter-spacing:.2px;margin-bottom:14px;
}
.icm-m-lead{font-size:15px;line-height:1.7;color:var(--gray-700);margin-bottom:16px;font-weight:400}
.icm-m-p{font-size:14px;line-height:1.72;color:var(--gray-700);margin-bottom:14px;font-weight:300}
.icm-m-h{
  font-family:'Exo 2',sans-serif;font-size:16px;font-weight:800;
  color:var(--text-dark);letter-spacing:-0.2px;margin:22px 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--gray-200);
}
.icm-m-grp{
  border:1px solid var(--gray-200);border-radius:14px;
  padding:16px 18px;margin-bottom:14px;background:var(--gray-50);
}
.icm-m-sub{
  font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;
  color:var(--icm-acc);letter-spacing:.3px;margin-bottom:10px;text-transform:uppercase;
}
.icm-m-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.icm-m-list li{
  position:relative;padding-left:22px;
  font-size:13.5px;line-height:1.62;color:var(--gray-700);font-weight:300;
}
.icm-m-list li::before{
  content:"";position:absolute;left:3px;top:8px;
  width:7px;height:7px;border-radius:50%;background:var(--icm-acc);
}
.icm-m-list li strong{font-family:'Exo 2',sans-serif;font-weight:600;color:var(--text-dark)}
.icm-m-tick li::before{
  content:"";left:1px;top:4px;width:11px;height:6px;border-radius:0;background:transparent;
  border-left:2.5px solid var(--icm-acc);border-bottom:2.5px solid var(--icm-acc);
  transform:rotate(-45deg);
}
.icm-m-tick li{padding-left:24px}
.icm-modal-foot{
  flex-shrink:0;display:flex;flex-wrap:wrap;gap:12px;
  padding:18px 30px 22px;border-top:1px solid var(--gray-200);background:var(--white);
}
.icm-modal-btn{
  flex:1 1 200px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-align:center;text-decoration:none;
  font-family:'Exo 2',sans-serif;font-size:13.5px;font-weight:700;
  padding:13px 18px;border-radius:12px;
  background:var(--gray-50);border:1px solid var(--gray-200);color:var(--blue-dark);
  transition:all .22s ease;
}
.icm-modal-btn svg{width:15px;height:15px;flex-shrink:0}
.icm-modal-btn:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.icm-modal-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.icm-modal-btn.primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
@media(max-width:600px){
  .icm-modal{padding:0;align-items:flex-end}
  .icm-modal-panel{width:100%;max-height:92vh;border-radius:20px 20px 0 0}
  .icm-modal-head{padding:22px 64px 22px 20px;gap:12px}
  .icm-modal-icon{width:48px;height:48px}
  .icm-modal-body{padding:22px 20px 4px}
  .icm-modal-foot{padding:14px 20px 18px}
}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
  .reveal,.reveal-left,.reveal-right{opacity:1!important;transform:none!important}
}