/* ===========================================================
   EZ Fixer LLC — stylesheet
   Palette taken straight from the logo: deep brand navy
   (#003F7D) as the ink, a brighter service blue for plumbing,
   and the logo orange (#F47D22) as the action colour.
   =========================================================== */

:root{
  /* Brand */
  --navy:#003f7d;
  --navy-d:#002a55;
  --navy-dd:#001c3a;
  --navy-2:#0a4e93;
  --blue:#1272d6;
  --blue-l:#4aa3ff;
  --blue-soft:#e9f2fd;
  --orange:#f47d22;
  --orange-d:#d9660d;
  --orange-l:#ffa354;
  --orange-soft:#fef1e6;
  --green:#25b26a;

  /* Neutrals */
  --ink:#0f2440;
  --body:#4d5f77;
  --muted:#7f8da2;
  --line:#e2e9f2;
  --line-2:#eef3f9;
  --bg:#ffffff;
  --bg-2:#f4f8fd;
  --bg-3:#eaf1f9;

  --radius:18px;
  --radius-sm:12px;
  --shadow-xs:0 2px 8px rgba(0,42,85,.05);
  --shadow-sm:0 6px 18px -10px rgba(0,42,85,.28);
  --shadow:0 22px 50px -24px rgba(0,42,85,.34);
  --shadow-lg:0 44px 90px -36px rgba(0,42,85,.45);
  --wrap:1220px;
  /* Height of the hero's closing wave. The stats card's overlap is derived from
     this rather than hard-coded, so the two cannot drift apart as the viewport
     changes — see .stats-wrap. */
  --wave-h:clamp(60px,7vw,110px);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:120px;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--body);background:var(--bg);line-height:1.65;font-size:16px;
  -webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%;
}
h1,h2,h3,h4{font-family:'Outfit','Plus Jakarta Sans',sans-serif;color:var(--ink);line-height:1.12;letter-spacing:-.022em;font-weight:700}
h2{font-size:clamp(1.95rem,3.5vw,2.9rem)}
h3{font-size:1.2rem;letter-spacing:-.012em}
h4{font-size:1rem}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
address{font-style:normal}
button{font-family:inherit}
::selection{background:var(--orange);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:96px 0;position:relative}
/* Visibility utilities. They have to out-punch component rules such as
   `.topbar-info a`, hence the !important on the hiding half. */
.hide-sm,.hide-md{display:inline-flex}

.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:700}
.skip-link:focus{left:0}

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}

/* svg sizing helpers */
svg{flex:none}
.ic{width:24px;height:24px}
.ti{width:15px;height:15px}
.bi{width:18px;height:18px}
.al{width:16px;height:16px}
.tk{width:16px;height:16px}
.eb-ic{width:16px;height:16px}
.svc-ic{width:27px;height:27px}
.li-tick{width:15px;height:15px;flex:none;color:var(--blue);stroke-width:3;margin-top:5px}
.fine-ic{width:14px;height:14px}
.cc-ic{width:16px;height:16px}
.ts-ic{width:19px;height:19px}
.fc-ic{width:16px;height:16px}
.hc-ic{width:19px;height:19px;color:var(--orange)}
.mq-ic{width:15px;height:15px;color:var(--orange)}
.nt-ic{width:26px;height:26px;color:var(--navy);flex:none}
.fb-ic{width:16px;height:16px;color:var(--orange-l)}
.mb-ic{width:18px;height:18px}
.gv-ic{width:14px;height:14px}

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.75rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);margin-bottom:18px;
}
.eyebrow-light{color:var(--orange-l)}
.eb-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 4px rgba(244,125,34,.25)}

/* wavy underline accent for a heading fragment */
.ul-wave{position:relative;white-space:nowrap;color:var(--navy)}
.ul-wave::after{content:"";position:absolute;left:0;right:0;bottom:-.14em;height:8px;
  background-repeat:repeat-x;background-size:38px 8px;animation:flowX 2.6s linear infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='8'%3E%3Cpath d='M0 4 Q9.5 -1 19 4 T38 4' fill='none' stroke='%23f47d22' stroke-width='2.4'/%3E%3C/svg%3E")}
@keyframes flowX{to{background-position-x:38px}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:.95rem;cursor:pointer;line-height:1;white-space:nowrap;
  padding:14px 24px;border-radius:999px;border:1.5px solid transparent;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s,color .25s,border-color .25s;
}
.btn.lg{padding:17px 30px;font-size:1rem}
.btn.full{width:100%}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px) scale(.99)}

/* water-fill hover: a wave rises through the button */
.btn-orange,.btn-navy,.btn-white{--fill:var(--orange-d)}
.btn-orange::before,.btn-navy::before,.btn-white::before{
  content:"";position:absolute;z-index:-1;left:-12%;right:-12%;bottom:0;height:0;
  background:var(--fill);border-radius:44% 44% 0 0;
  transition:height .55s var(--ease);animation:waterWobble 3.2s ease-in-out infinite}
.btn-orange:hover::before,.btn-navy:hover::before,.btn-white:hover::before{height:280%}
@keyframes waterWobble{50%{border-radius:38% 50% 0 0}}

.btn-orange{background:var(--orange);color:#fff;box-shadow:0 12px 26px -12px rgba(244,125,34,.8)}
.btn-orange:hover{transform:translateY(-3px);box-shadow:0 20px 34px -14px rgba(244,125,34,.85)}
.btn-navy{background:var(--navy);color:#fff;--fill:var(--blue);box-shadow:0 12px 26px -14px rgba(0,63,125,.85)}
.btn-navy:hover{transform:translateY(-3px);box-shadow:0 20px 34px -14px rgba(0,63,125,.9)}
.btn-white{background:#fff;color:var(--navy);--fill:var(--orange-soft)}
.btn-white:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.btn-glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.38);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.2);border-color:#fff;transform:translateY(-3px)}
.btn-outline-white{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-outline-white:hover{background:rgba(255,255,255,.14);border-color:#fff;transform:translateY(-3px)}
.btn-plain{background:transparent;color:var(--navy);border-color:var(--line);}
.btn-plain:hover{border-color:var(--navy);transform:translateY(-3px)}
.btn.loading{opacity:.72;pointer-events:none}

/* click ripple */
.ripple{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);
  background:rgba(255,255,255,.45);pointer-events:none;animation:ripple .6s ease-out forwards}
.btn-white .ripple,.btn-plain .ripple{background:rgba(0,63,125,.2)}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--blue),var(--orange));
  box-shadow:0 0 12px rgba(244,125,34,.6);transition:width .1s linear}

/* ---------- Top bar ---------- */
.topbar{background:var(--navy-dd);color:#b8cbe1;font-size:.83rem}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}
.topbar-info{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.topbar-info a,.topbar-info span{display:inline-flex;align-items:center;gap:8px;color:#b8cbe1;transition:color .2s}
.topbar-info a:hover{color:#fff}
.topbar-info svg{color:var(--orange)}
.topbar-badge{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:#fff;white-space:nowrap}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 0 rgba(37,178,106,.7);animation:pulse 1.9s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(37,178,106,0)}100%{box-shadow:0 0 0 0 rgba(37,178,106,0)}}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid transparent;transition:box-shadow .3s,border-color .3s,background .3s}
.nav.scrolled{background:rgba(255,255,255,.97);border-color:var(--line);
  box-shadow:0 10px 34px -24px rgba(0,42,85,.5)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:84px}
.brand{display:flex;align-items:center}
.brand-logo{height:52px;width:auto;transition:transform .35s var(--ease)}
.brand:hover .brand-logo{transform:scale(1.04)}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links>a{font-weight:600;font-size:.95rem;color:var(--ink);position:relative;padding:6px 0}
.nav-links>a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2.5px;border-radius:2px;
  background:var(--orange);transition:width .32s var(--ease)}
.nav-links>a:hover::after,.nav-links>a.active::after{width:100%}
.nav-links>a.active{color:var(--navy)}
.nav-links>a.nav-cta{color:#fff;padding:13px 22px;margin-left:6px}
.nav-links>a.nav-cta::after{display:none}
.nav-call{display:none;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;
  align-items:center;justify-content:center}
.nav-call svg{width:20px;height:20px}
.nav-toggle{display:none;background:none;border:none;color:var(--navy);cursor:pointer;padding:4px}
.nav-toggle svg{width:28px;height:28px;stroke-width:1.9}
.nav-toggle svg path{transition:transform .35s var(--ease),opacity .2s;transform-origin:center}
.nav-toggle.on svg path:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle.on svg path:nth-child(2){opacity:0}
.nav-toggle.on svg path:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.nav-scrim{position:fixed;inset:0;z-index:65;background:rgba(0,20,42,.55);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.nav-scrim.open{opacity:1;visibility:visible}

/* ===========================================================
   HERO
   =========================================================== */
.hero{position:relative;min-height:min(94vh,860px);display:flex;align-items:center;
  padding:96px 0 150px;background:var(--navy-dd);overflow:hidden;isolation:isolate;color:#fff}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;
  background-size:cover;background-position:62% center;background-repeat:no-repeat}
/* Fades up over the poster once the footage can actually play, so there is no
   flash of empty backdrop while it buffers. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;
  opacity:0;transition:opacity .7s ease}
.hero-video.ready{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-video{transition:none}}
/* The footage is a bright white studio render, so the navy wash is weighted to
   the left: the headline sits on solid ink while the middle and right keep the
   original brightness of the animation. The stops are pulled in to match the
   copy's leftward shift below — the ink only has to cover the text, and every
   percent past that is footage needlessly hidden. */
.hero-tint{position:absolute;inset:0;
  background:
    linear-gradient(96deg,
      rgba(0,22,47,.97) 0%,
      rgba(0,26,54,.94) 20%,
      rgba(0,38,77,.80) 32%,
      rgba(0,45,90,.56) 50%,
      rgba(0,60,120,.14) 62%,
      rgba(255,255,255,0) 72%),
    linear-gradient(180deg,rgba(0,20,42,.55) 0%,transparent 26%),
    radial-gradient(60% 50% at 6% 92%,rgba(18,114,214,.42),transparent 68%),
    radial-gradient(50% 45% at 26% 6%,rgba(244,125,34,.22),transparent 66%)}
.hero-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 78%)}

/* The callback card is pinned to the right edge of the container so it clears
   the headline and sits over the bright side of the footage. */
.hero-inner{position:relative;z-index:2;display:grid;
  grid-template-columns:1fr minmax(330px,392px);gap:56px;align-items:center;width:100%}
/* Pulled out toward the viewport edge — the mirror of the callback card's own
   negative margin — so the middle of the frame opens up and the footage reads
   between the two. The clamp collapses to 0 once the viewport is narrow enough
   that there is no gutter left to borrow. */
.hero-copy{max-width:580px;
  margin-left:clamp(-90px,calc((var(--wrap) - 100vw) / 2 + 30px),0px)}
.hero h1{font-size:clamp(2.6rem,5.2vw,4.3rem);font-weight:800;color:#fff;margin:4px 0 22px;
  letter-spacing:-.03em;text-shadow:0 4px 30px rgba(0,20,42,.5)}
.grad-orange{background-image:linear-gradient(100deg,var(--orange) 30%,#ffd0a3 50%,var(--orange) 70%);
  background-size:220% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:sheen 6.5s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
.hero .lead{font-size:1.14rem;color:#cfe0f2;max-width:56ch;font-weight:400}
.hero-cta{display:flex;gap:14px;margin:34px 0 28px;flex-wrap:wrap}
.hero-ticks{list-style:none;display:flex;gap:10px 26px;flex-wrap:wrap}
.hero-ticks li{display:inline-flex;align-items:center;gap:9px;font-size:.92rem;font-weight:600;color:#dbe8f6}
.hero-ticks .tk{color:var(--orange);stroke-width:3}

/* quick-booking card */
/* Deep-ink glass: the card floats over the bright half of the footage, so it
   carries its own darkness rather than relying on the hero wash. */
/* Pulled out of the container into the page gutter so it sits ~40px off the
   viewport's right edge, capped so it stays sane on very wide monitors and
   backs off to flush once the gutter runs out. Never overflows. */
.hero-card{position:relative;justify-self:end;width:100%;
  margin-right:clamp(-200px,calc((var(--wrap) - 100vw) / 2 + 40px),0px);
  background:rgba(0,24,50,.84);border:1px solid rgba(255,255,255,.18);
  border-radius:24px;padding:30px;backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);box-shadow:0 44px 90px -34px rgba(0,10,26,.95);
  overflow:hidden;isolation:isolate}
.hero-card-glow{position:absolute;z-index:-1;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,125,34,.55),transparent 70%);
  filter:blur(40px);top:-110px;right:-90px;animation:drift 12s ease-in-out infinite}
@keyframes drift{50%{transform:translate(-26px,30px) scale(1.12)}}
.hc-badge{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);padding:7px 14px;border-radius:999px;margin-bottom:14px}
.hero-card-head h2{color:#fff;font-size:1.5rem;margin-bottom:7px}
.hero-card-head p{color:#c6d8ec;font-size:.93rem;margin-bottom:20px}
.hero-card .field label{color:#cfe0f2}
.hero-card .field input,.hero-card .field select{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}
.hero-card .field input::placeholder{color:rgba(255,255,255,.45)}
.hero-card .field input:focus,.hero-card .field select:focus{
  background:rgba(255,255,255,.17);border-color:var(--orange);box-shadow:0 0 0 4px rgba(244,125,34,.22)}
.hero-card .select-wrap::after{border-top-color:#cfe0f2}
.hero-card select option{color:var(--ink)}
.hero-card-fine{display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:.76rem;color:#a9c1d9;margin-top:14px}

/* hero wave */
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;z-index:1;line-height:0;pointer-events:none}
.hero-wave svg{width:100%;height:var(--wave-h);display:block}
.hero-wave path{fill:var(--bg)}

/* ---------- Rising bubbles (shared effect) ---------- */
.fx-bubbles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-bubbles span{position:absolute;bottom:-40px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 32% 27%,rgba(255,255,255,.95) 4%,rgba(74,163,255,.3) 46%,rgba(18,114,214,.42));
  border:1px solid rgba(18,114,214,.34);
  box-shadow:inset -2px -3px 6px rgba(18,114,214,.22),0 0 10px rgba(18,114,214,.14);
  animation:rise var(--dur,15s) linear var(--delay,0s) infinite}
@keyframes rise{
  0%{transform:translate3d(0,0,0) scale(.7);opacity:0}
  12%{opacity:.72}
  86%{opacity:.62}
  100%{transform:translate3d(var(--drift,16px),-102vh,0) scale(1.05);opacity:0}}
.hero-bubbles{z-index:1}
.hero-bubbles span{background:radial-gradient(circle at 32% 27%,rgba(255,255,255,.95) 4%,rgba(255,255,255,.16) 55%,rgba(255,255,255,.06));
  border-color:rgba(255,255,255,.42);box-shadow:inset -2px -3px 6px rgba(255,255,255,.18)}
.cta-bubbles span{background:radial-gradient(circle at 33% 28%,rgba(255,255,255,.7),rgba(255,255,255,.12) 60%,transparent);
  border-color:rgba(255,255,255,.28)}

/* ===========================================================
   STATS (card overlapping the hero wave)
   =========================================================== */
/* The card must clear the wave's crest across its own width, so the wave reads
   only in the margins either side of it. The crest of the path sits at 0.7155
   of the wave's height above the hero's bottom edge (solved from the bezier),
   so the overlap is derived from --wave-h with 6px of slack rather than being a
   fixed pixel value that drifts out of step as 7vw changes. */
.stats-wrap{position:relative;z-index:5;padding-bottom:8px;
  margin-top:calc(var(--wave-h) * -0.7155 - 6px)}
.stats-card{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 20px;
  box-shadow:var(--shadow-lg)}
.stat{text-align:center;position:relative;padding:0 12px}
.stat:not(:last-child)::after{content:"";position:absolute;right:0;top:14%;height:72%;width:1px;background:var(--line)}
.stat-fig{display:flex;align-items:baseline;justify-content:center;gap:4px}
.stat-num{font-family:'Outfit';font-size:clamp(2.1rem,3.4vw,2.9rem);font-weight:800;color:var(--navy);line-height:1}
.stat-suffix{font-family:'Outfit';font-size:1.05rem;font-weight:800;color:var(--orange)}
.stat p{color:var(--muted);font-size:.88rem;margin-top:8px;line-height:1.45}
.stat-num.done{animation:statGlow 1.1s var(--ease)}
@keyframes statGlow{40%{text-shadow:0 0 24px rgba(18,114,214,.6)}}

/* ---------- Marquee ---------- */
.marquee{background:var(--navy);overflow:hidden;padding:15px 0;margin-top:60px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;align-items:center;gap:40px;width:max-content;animation:marquee 44s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  font-family:'Outfit';font-weight:600;font-size:1rem;color:#cfe0f2}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Section heads ---------- */
.head-center{text-align:center;max-width:720px;margin:0 auto 54px}
.head-center .eyebrow{justify-content:center}
.head-sub{font-size:1.06rem;margin-top:16px}

/* ===========================================================
   SERVICES
   =========================================================== */
.services{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 55%,var(--bg) 100%);overflow:hidden}
.services .wrap{position:relative;z-index:1}
.services .fx-bubbles span{opacity:0;animation-name:rise}

/* trade switch */
.trade-switch{position:relative;display:flex;padding:6px;background:var(--bg-3);
  border:1px solid var(--line);border-radius:999px;margin:0 auto 42px;width:max-content;max-width:100%}
.trade-thumb{position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);border-radius:999px;
  background:var(--navy);box-shadow:0 10px 22px -12px rgba(0,63,125,.9);
  transition:transform .5s var(--ease),background .5s var(--ease)}
.trade-switch.is-electrical .trade-thumb{transform:translateX(100%);background:var(--orange);
  box-shadow:0 10px 22px -12px rgba(244,125,34,.95)}
.trade-btn{position:relative;z-index:1;flex:1 1 0;min-width:172px;display:inline-flex;align-items:center;
  justify-content:center;gap:10px;padding:13px 26px;border:none;background:none;cursor:pointer;
  font-weight:700;font-size:1rem;color:var(--body);border-radius:999px;transition:color .35s}
.trade-btn.active{color:#fff}
.trade-panel[hidden]{display:none}
.trade-panel{animation:panelIn .55s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}}
.trade-intro{text-align:center;max-width:70ch;margin:0 auto 40px;font-size:1.03rem}

/* service cards */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px 26px;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.svc-card::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(260px 260px at var(--mx,50%) var(--my,0%),rgba(18,114,214,.11),transparent 70%)}
.theme-orange .svc-card::after{background:radial-gradient(260px 260px at var(--mx,50%) var(--my,0%),rgba(244,125,34,.13),transparent 70%)}
.svc-card:hover::after{opacity:1}
.svc-card:hover{transform:translateY(-7px);box-shadow:0 26px 54px -26px rgba(0,63,125,.5);border-color:transparent}
.theme-orange .svc-card:hover{box-shadow:0 26px 54px -26px rgba(244,125,34,.55)}
.svc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;transform:scaleX(0);
  transform-origin:left;transition:transform .5s var(--ease);
  background:linear-gradient(90deg,var(--blue),var(--blue-l))}
.theme-orange .svc-card::before{background:linear-gradient(90deg,var(--orange),var(--orange-l))}
.svc-card:hover::before{transform:scaleX(1)}
.svc-num{position:absolute;top:16px;right:22px;font-family:'Outfit';font-weight:800;font-size:2.7rem;
  line-height:1;color:var(--navy);opacity:.06;pointer-events:none;transition:opacity .35s,transform .35s var(--ease)}
.svc-card:hover .svc-num{opacity:.12;transform:translateY(-4px)}
.svc-ic-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:17px;margin-bottom:20px;overflow:hidden;isolation:isolate;
  background:var(--blue-soft);color:var(--blue);transition:transform .4s var(--ease),color .4s}
.theme-orange .svc-ic-wrap{background:var(--orange-soft);color:var(--orange-d)}
.svc-ic-wrap svg{position:relative;z-index:2}
/* water rises inside the icon tile on hover */
.svc-ic-wrap::after{content:"";position:absolute;z-index:1;left:-24%;right:-24%;bottom:0;height:0;
  background:linear-gradient(180deg,var(--blue-l),var(--blue));border-radius:44% 44% 0 0;
  transition:height 1.6s var(--ease);animation:waterWobble 3s ease-in-out infinite}
.theme-orange .svc-ic-wrap::after{background:linear-gradient(180deg,var(--orange-l),var(--orange))}
.svc-card:hover .svc-ic-wrap::after{height:135%}
.svc-card:hover .svc-ic-wrap{transform:scale(1.05) rotate(-4deg);color:#fff}
.svc-card h3{margin-bottom:11px}
.svc-card p{font-size:.95rem;flex:1}
.svc-link{position:relative;margin-top:20px;font-weight:700;font-size:.9rem;color:var(--blue);
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start}
.theme-orange .svc-link{color:var(--orange-d)}
.svc-link::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:currentColor;
  opacity:.5;transition:width .3s var(--ease)}
.svc-link:hover::after{width:calc(100% - 24px)}
.svc-link:hover svg{transform:translateX(4px)}
.svc-link svg{transition:transform .25s var(--ease)}

/* full catalogue */
.catalog{margin-top:44px;background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:32px;box-shadow:var(--shadow-sm)}
.catalog-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.catalog-head h3{font-size:1.3rem;text-transform:capitalize}
.cat-chips{display:flex;gap:9px;flex-wrap:wrap}
.cat-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;color:var(--body);font-weight:700;font-size:.88rem;
  cursor:pointer;transition:all .3s var(--ease)}
.cat-chip:hover{transform:translateY(-2px);border-color:var(--navy);color:var(--navy)}
.cat-chip.active{background:var(--navy);border-color:var(--navy);color:#fff}
.theme-orange .cat-chip.active{background:var(--orange);border-color:var(--orange)}
.cat-panel[hidden]{display:none}
.cat-panel{animation:panelIn .45s var(--ease)}
.cat-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.cat-col h4{font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;color:var(--blue);
  margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--blue-soft)}
.theme-orange .cat-col h4{color:var(--orange-d);border-bottom-color:var(--orange-soft)}
.cat-col ul{list-style:none;display:grid;gap:9px}
.cat-col li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;line-height:1.5}
.theme-orange .li-tick{color:var(--orange)}

.svc-note{margin-top:36px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);
  border-radius:14px;padding:20px 24px;display:flex;align-items:center;gap:16px;font-size:1rem;
  box-shadow:var(--shadow-xs)}
.svc-note strong{color:var(--ink)}
.svc-note a{color:var(--orange-d);font-weight:700;border-bottom:2px solid var(--orange-soft)}
.svc-note a:hover{border-bottom-color:var(--orange)}

/* ===========================================================
   WHY US (dark)
   =========================================================== */
.why{background:var(--navy-dd);color:#c3d5e8;overflow:hidden}
.why h2,.why h3{color:#fff}
.why .head-sub{color:#a9c1d9}
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.glow-a{width:420px;height:420px;background:rgba(18,114,214,.45);left:-140px;top:-120px;animation:drift 15s ease-in-out infinite}
.glow-b{width:380px;height:380px;background:rgba(244,125,34,.32);right:-120px;bottom:-140px;animation:drift 18s ease-in-out infinite reverse}
.why .wrap{position:relative;z-index:1}

.pillars{display:grid;gap:16px;max-width:960px;margin:0 auto}
.pillar{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;
  overflow:hidden;transition:background .35s,border-color .35s,box-shadow .35s}
.pillar:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.pillar.open{background:rgba(255,255,255,.08);border-color:rgba(244,125,34,.5);
  box-shadow:0 26px 60px -34px rgba(244,125,34,.7)}
.pillar-head{width:100%;display:flex;align-items:center;gap:22px;padding:24px 26px;
  background:none;border:none;cursor:pointer;text-align:left;color:inherit}
.pillar-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;
  border-radius:16px;background:rgba(18,114,214,.24);color:#8fc0ff;transition:all .4s var(--ease)}
.pillar-ic svg{width:27px;height:27px}
.pillar.open .pillar-ic{background:var(--orange);color:#fff;transform:rotate(-6deg) scale(1.05)}
.pillar-title{flex:1;min-width:0}
.pillar-idx{font-family:'Outfit';font-size:.74rem;font-weight:800;letter-spacing:.14em;color:var(--orange-l)}
.pillar-title h3{font-size:1.25rem;margin:2px 0 5px}
.pillar-title p{font-size:.94rem;color:#a9c1d9}
.pillar-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#fff;transition:transform .4s var(--ease),background .3s}
.pillar-toggle svg{width:18px;height:18px}
.pillar.open .pillar-toggle{transform:rotate(135deg);background:rgba(255,255,255,.14)}
.pillar-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.pillar.open .pillar-body{grid-template-rows:1fr}
.pillar-body>ul{overflow:hidden;list-style:none;display:grid;gap:11px;
  padding:0 30px 0 106px;transition:padding .5s var(--ease)}
.pillar.open .pillar-body>ul{padding-bottom:28px}
.pillar-body li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;color:#c3d5e8}
.pillar-body .li-tick{color:var(--orange)}

/* ===========================================================
   ABOUT
   =========================================================== */
.about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}
.about-media{position:relative}
.blueprint{position:relative;background:linear-gradient(150deg,var(--bg-2),#fff 60%);
  border:1px solid var(--line);border-radius:24px;padding:16px;box-shadow:var(--shadow);overflow:hidden}
.blueprint::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 85% 8%,rgba(244,125,34,.12),transparent 60%),
             radial-gradient(60% 50% at 10% 95%,rgba(18,114,214,.14),transparent 60%)}
.blueprint svg{width:100%;height:auto;display:block;position:relative}
.bp-grid{color:var(--navy)}
.bp-line{fill:none;stroke:var(--navy);stroke-width:2.2;opacity:.32;stroke-linecap:round;stroke-linejoin:round}
.bp-line-soft{fill:none;stroke:var(--navy);stroke-width:1.6;opacity:.18;stroke-linecap:round}
.bp-box{fill:#fff;stroke:var(--navy);stroke-width:2;opacity:.4}
.bp-pipe{fill:none;stroke:url(#bpPipe);stroke-width:10;stroke-linecap:round;stroke-linejoin:round;opacity:.22}
.bp-flow{fill:none;stroke:url(#bpPipe);stroke-width:10;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26 42;animation:bpFlow 1.9s linear infinite}
@keyframes bpFlow{to{stroke-dashoffset:-68}}
.bp-wire{fill:none;stroke:url(#bpWire);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.25}
.bp-spark{fill:none;stroke:url(#bpWire);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:10 60;filter:drop-shadow(0 0 5px rgba(244,125,34,.8));animation:bpSpark 1.5s linear infinite}
@keyframes bpSpark{to{stroke-dashoffset:-140}}
.bp-node{fill:#fff;stroke-width:3}
.bp-node-water{stroke:var(--blue);animation:nodePulse 2.6s ease-in-out infinite}
.bp-node-power{stroke:var(--orange);animation:nodePulse 2.6s ease-in-out infinite .9s}
@keyframes nodePulse{50%{r:29;opacity:.9}}
.bp-ic{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center}
.bp-ic svg{width:24px;height:24px}
/* positioned onto the two SVG nodes — (216,236) and (316,236) inside the
   26 50 468 380 viewBox — allowing for the card's 16px padding */
.bp-ic-water{left:calc(16px + (100% - 32px) * .4060);top:calc(16px + (100% - 32px) * .4895);color:var(--blue)}
.bp-ic-power{left:calc(16px + (100% - 32px) * .6197);top:calc(16px + (100% - 32px) * .4895);color:var(--orange-d)}

.float-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 18px;
  font-size:.86rem;font-weight:700;color:var(--navy);box-shadow:var(--shadow);white-space:nowrap}
.float-chip svg{color:var(--orange)}
.chip-a{top:22px;right:-14px;animation:float 4.4s ease-in-out infinite}
.chip-b{bottom:26px;left:-16px;animation:float 5.2s ease-in-out infinite .8s}
@keyframes float{50%{transform:translateY(-10px)}}

.about-copy h2{margin:8px 0 20px}
.about-copy p{margin-bottom:16px}
.about-list{list-style:none;margin:26px 0 30px;display:grid;gap:13px}
.about-list li{display:flex;align-items:flex-start;gap:13px;font-size:.98rem}
.about-list strong{color:var(--ink)}
.li-ic{width:22px;height:22px;color:#fff;background:var(--blue);border-radius:50%;padding:4px;
  flex:none;stroke-width:2.6;margin-top:2px}
.about-list li:nth-child(even) .li-ic{background:var(--orange)}
.about-cta{display:flex;gap:14px;flex-wrap:wrap}

/* ===========================================================
   PROCESS TIMELINE
   =========================================================== */
.process{background:var(--bg-2)}
.timeline{position:relative;list-style:none;max-width:1040px;margin:0 auto;padding:10px 0}
.tl-rail{position:absolute;left:50%;top:20px;bottom:20px;width:4px;transform:translateX(-50%);
  background:var(--line);border-radius:3px;overflow:hidden}
.tl-fill{display:block;width:100%;height:0;border-radius:3px;
  background:linear-gradient(180deg,var(--blue),var(--blue-l) 45%,var(--orange));
  box-shadow:0 0 14px rgba(18,114,214,.55);transition:height .18s linear}
.tl-step{position:relative;display:grid;grid-template-columns:1fr 96px 1fr;align-items:center;
  padding:14px 0}
.tl-node{grid-column:2;justify-self:center;position:relative;display:inline-flex;align-items:center;
  justify-content:center;width:62px;height:62px;border-radius:50%;background:#fff;color:var(--muted);
  border:2px solid var(--line);box-shadow:var(--shadow-xs);z-index:2;
  transition:color .45s var(--ease),border-color .45s,background .45s,transform .45s var(--ease)}
.tl-node svg{width:26px;height:26px;transition:transform .45s var(--ease)}
.tl-ring{position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--orange);
  opacity:0;transform:scale(.85);transition:opacity .5s,transform .5s var(--ease)}
.tl-step.done .tl-node{background:var(--navy);border-color:var(--navy);color:#fff;transform:scale(1.06)}
.tl-step.done .tl-ring{opacity:.45;transform:scale(1)}
.tl-step:nth-of-type(even).done .tl-node{background:var(--orange);border-color:var(--orange)}
.tl-card{grid-column:1;grid-row:1;text-align:right;padding-right:36px}
.tl-step:nth-of-type(even) .tl-card{grid-column:3;text-align:left;padding:0 0 0 36px}
.tl-step-no{display:inline-block;font-family:'Outfit';font-size:.72rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:7px}
.tl-card h3{margin-bottom:8px;font-size:1.22rem}
.tl-card p{font-size:.95rem;max-width:44ch;display:inline-block}

/* ===========================================================
   SERVICE AREA (dark)
   =========================================================== */
.area{background:
   radial-gradient(900px 420px at 88% 8%,rgba(244,125,34,.2),transparent 62%),
   radial-gradient(800px 400px at 4% 96%,rgba(18,114,214,.28),transparent 62%),
   var(--navy-d);
  color:#c3d5e8;overflow:hidden}
.area h2{color:#fff}
.area-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.area-copy p{margin-bottom:16px;color:#c3d5e8}
.area-chips{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 30px}
.area-chip{display:inline-flex;align-items:center;font-size:.84rem;font-weight:600;color:#dbe8f6;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:7px 14px;
  border-radius:999px;transition:background .25s,transform .25s var(--ease),border-color .25s}
.area-chip:hover{background:rgba(244,125,34,.24);border-color:rgba(244,125,34,.6);transform:translateY(-2px)}
.area-chip-more{background:none;border-style:dashed;color:#9fb8d1}

.area-map{position:relative;border-radius:24px;overflow:hidden;min-height:460px;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 90px -40px rgba(0,10,26,.9)}
.area-map iframe{width:100%;height:100%;min-height:460px;border:0;display:block;
  filter:saturate(.75) contrast(1.05)}
.radar{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
  width:280px;height:280px;pointer-events:none}
.radar-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(244,125,34,.65);
  opacity:0;animation:radarPing 3.6s ease-out infinite}
.radar-ring:nth-child(2){animation-delay:1.2s}
.radar-ring:nth-child(3){animation-delay:2.4s}
@keyframes radarPing{0%{transform:scale(.16);opacity:0}12%{opacity:.85}100%{transform:scale(1);opacity:0}}
.radar-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;
  border-radius:50%;background:var(--orange);color:#fff;display:inline-flex;align-items:center;
  justify-content:center;box-shadow:0 0 0 6px rgba(244,125,34,.28),0 14px 30px -10px rgba(0,0,0,.6)}
.radar-core svg{width:22px;height:22px}
.area-badge{position:absolute;z-index:3;left:20px;bottom:20px;background:rgba(0,28,58,.86);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:14px;
  padding:12px 18px;color:#fff;line-height:1.3}
.area-badge strong{display:block;font-family:'Outfit';font-size:1.3rem}
.area-badge span{font-size:.78rem;color:#a9c1d9}

/* ===========================================================
   GALLERY + LIGHTBOX
   =========================================================== */
/* Masonry columns rather than a fixed mosaic: the job photos are before/after
   comparisons in mixed portrait and landscape ratios, and cropping them to a
   uniform tile would cut the "after" half off. Each tile keeps its own shape. */
/* The column count lives in a custom property so the breakpoints stay the only
   place it is written: the no-JS fallback feeds it to `columns`, and the JS
   upgrade below reads the same value back out. */
.gallery-grid{--gal-cols:3;columns:var(--gal-cols);column-gap:18px}
/* Multi-column fills one column to the bottom before starting the next, so the
   top row reads 1, 7, 12 rather than 1, 2, 3. Once JS has dealt the tiles into
   real columns round-robin, reading order runs across the row as written.
   Columns are no longer height-balanced as a result — that is the trade, and
   the running order is the thing worth keeping. */
.gallery-grid.is-cols{columns:auto;display:flex;align-items:flex-start}
.gal-col{flex:1 1 0;min-width:0}
.gal-item{position:relative;display:block;width:100%;padding:0;border:0;margin:0 0 18px;
  break-inside:avoid;-webkit-column-break-inside:avoid;
  cursor:pointer;border-radius:var(--radius);overflow:hidden;background:var(--bg-3);
  box-shadow:var(--shadow);isolation:isolate;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.gal-item picture{display:block}
.gal-item img{width:100%;height:auto;display:block;opacity:0;transform:scale(1.05);
  transition:transform .8s var(--ease),opacity .6s var(--ease)}
/* the shimmer needs a box to fill before the image has loaded its height */
.gal-item:not(.loaded){min-height:280px}
.gal-item.loaded img{opacity:1;transform:scale(1)}
.gal-item:hover,.gal-item:focus-visible{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.gal-item:hover img{transform:scale(1.08)}
.gal-skel{position:absolute;inset:0;background:linear-gradient(100deg,var(--bg-3) 30%,#e3ecf7 50%,var(--bg-3) 70%);
  background-size:200% 100%;animation:galShimmer 1.4s linear infinite}
.gal-item.loaded .gal-skel{opacity:0;animation:none;transition:opacity .4s}
@keyframes galShimmer{to{background-position:-200% 0}}
.gal-num{position:absolute;top:14px;left:14px;z-index:3;font-family:'Outfit';font-weight:800;font-size:.8rem;
  color:#fff;padding:5px 11px;border-radius:999px;background:rgba(0,20,42,.5);
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(-6px);transition:all .4s var(--ease)}
.gal-item:hover .gal-num{opacity:1;transform:none}
.gal-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  gap:8px;padding:22px 20px 18px;text-align:left;
  background:linear-gradient(transparent 38%,rgba(0,20,42,.6) 68%,rgba(0,20,42,.92));
  opacity:0;transform:translateY(10px);transition:all .45s var(--ease)}
.gal-item:hover .gal-overlay,.gal-item:focus-visible .gal-overlay{opacity:1;transform:none}
.gal-cap{color:#fff;font-family:'Outfit';font-weight:700;font-size:1.05rem;line-height:1.25}
.gal-view{display:inline-flex;align-items:center;gap:8px;color:#dbe8f6;font-weight:600;font-size:.86rem}
.gal-view-ic{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;
  border-radius:50%;background:var(--orange);color:#fff}
.gal-item::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 0 var(--orange);transition:box-shadow .45s var(--ease)}
.gal-item:hover::after,.gal-item:focus-visible::after{box-shadow:inset 0 0 0 3px var(--orange)}

.lightbox{position:fixed;inset:0;z-index:120;opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),visibility .35s}
.lightbox.open{opacity:1;visibility:visible}
.lb-overlay{position:absolute;inset:0;background:rgba(0,10,22,.95);backdrop-filter:blur(8px)}
.lb-topbar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;
  justify-content:space-between;padding:22px clamp(16px,4vw,42px)}
.lb-counter{color:#fff;font-family:'Outfit';font-weight:700;font-size:1rem}
.lb-counter i{color:rgba(255,255,255,.4);font-style:normal;margin:0 3px}
.lb-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;
  width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  transition:background .25s,transform .25s var(--ease)}
.lb-btn:hover{background:rgba(255,255,255,.22);transform:scale(1.06)}
.lb-btn svg{width:22px;height:22px}
.lb-nav{position:absolute;top:50%;z-index:5;transform:translateY(-50%);width:52px;height:52px}
.lb-nav:hover{transform:translateY(-50%) scale(1.06)}
.lb-prev{left:clamp(10px,3vw,34px)}
.lb-next{right:clamp(10px,3vw,34px)}
.lb-figure{position:absolute;inset:0;z-index:2;margin:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:80px clamp(64px,9vw,110px) 60px}
.lb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;flex:1;width:100%}
.lb-spinner{position:absolute;width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.2);
  border-top-color:#fff;animation:lbSpin .8s linear infinite}
.lightbox.loaded .lb-spinner{display:none}
@keyframes lbSpin{to{transform:rotate(360deg)}}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;opacity:0;
  transition:opacity .35s var(--ease);cursor:pointer}
.lightbox.loaded .lb-img{opacity:1}
.lb-cap{color:#dbe8f6;font-weight:600;text-align:center}

/* ===========================================================
   FAQ
   =========================================================== */
.faq{background:var(--bg-2)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq-intro h2{margin:8px 0 14px}
.faq-intro p{margin-bottom:24px}
.faq-list{display:grid;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:border-color .3s,box-shadow .3s}
.faq-item.open{border-color:var(--orange);box-shadow:0 20px 40px -28px rgba(244,125,34,.75)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 22px;background:none;border:none;cursor:pointer;text-align:left;
  font-family:'Outfit';font-weight:600;font-size:1.04rem;color:var(--ink)}
.faq-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:50%;background:var(--bg-3);color:var(--navy);transition:transform .4s var(--ease),background .3s,color .3s}
.faq-ic svg{width:17px;height:17px}
.faq-item.open .faq-ic{transform:rotate(135deg);background:var(--orange);color:#fff}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a p{overflow:hidden;padding:0 22px;font-size:.96rem;transition:padding .45s var(--ease)}
.faq-item.open .faq-a p{padding-bottom:22px}

/* ===========================================================
   CTA BAND
   =========================================================== */
.cta-band{position:relative;overflow:hidden;padding:72px 0;color:#fff;
  background:linear-gradient(120deg,var(--orange-d) 0%,var(--orange) 45%,#ffa04a 100%)}
.cta-band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 90% at 12% 110%,rgba(0,42,85,.5),transparent 62%)}
.cta-in{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:40px;flex-wrap:wrap}
.cta-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3);padding:7px 15px;border-radius:999px;margin-bottom:16px}
.cta-eyebrow .pulse-dot{background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7)}
.cta-in h2{color:#fff;max-width:20ch}
.cta-in p{color:rgba(255,255,255,.92);margin-top:10px;font-size:1.06rem;max-width:52ch}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ===========================================================
   CONTACT
   =========================================================== */
.contact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:start}
.contact-info{list-style:none;display:grid;gap:18px;margin-bottom:26px}
.contact-info li{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:16px 18px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.contact-info li:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:transparent}
.ci-ic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;
  border-radius:13px;background:var(--blue-soft);color:var(--blue)}
.contact-info li:nth-child(2) .ci-ic{background:var(--orange-soft);color:var(--orange-d)}
.contact-info span{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-weight:800}
.contact-info a,.contact-info address{font-family:'Outfit';color:var(--ink);font-weight:600;font-size:1.02rem;
  line-height:1.35;transition:color .2s}
.contact-info a:hover{color:var(--orange-d)}

.hours-card{background:var(--navy);color:#c3d5e8;border-radius:18px;padding:26px;position:relative;overflow:hidden}
.hours-card::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,125,34,.4),transparent 70%);filter:blur(30px);
  right:-70px;top:-80px}
.hours-card h3{color:#fff;display:flex;align-items:center;gap:10px;font-size:1.1rem;margin-bottom:18px;
  position:relative}
.hours-card dl{display:grid;gap:12px;position:relative}
.hours-card dl>div{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding-bottom:12px;border-bottom:1px dashed rgba(255,255,255,.16)}
.hours-card dt{font-size:.92rem}
.hours-card dd{font-family:'Outfit';font-weight:700;color:#fff;white-space:nowrap;font-size:.95rem}
.hours-note{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:.85rem;font-weight:700;
  color:var(--orange-l);position:relative}
.hours-note .pulse-dot{background:var(--orange-l);box-shadow:0 0 0 0 rgba(255,163,84,.7)}

.contact-form-wrap{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;
  box-shadow:var(--shadow);position:relative;overflow:hidden}
.contact-form-wrap::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--blue),var(--orange))}
.contact-form-wrap.flash{animation:flashCard 1.6s var(--ease)}
@keyframes flashCard{0%,100%{box-shadow:var(--shadow)}
  25%{box-shadow:0 0 0 5px rgba(244,125,34,.3),var(--shadow)}}

/* ---------- Form ---------- */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-size:.84rem;font-weight:700;color:var(--ink)}
.req{color:var(--orange)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:.97rem;color:var(--ink);padding:13px 15px;width:100%;
  border:1.5px solid var(--line);border-radius:12px;background:var(--bg-2);
  transition:border-color .2s,box-shadow .2s,background .2s}
.field textarea{resize:vertical;min-height:110px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px rgba(244,125,34,.14)}
.field.err input,.field.err textarea{border-color:#d93025;box-shadow:0 0 0 4px rgba(217,48,37,.1)}
.select-wrap{position:relative}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.select-wrap::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-fine{font-size:.79rem;color:var(--muted);margin-top:16px;text-align:center}
.form-status{font-size:.92rem;font-weight:600;margin-bottom:16px;border-radius:11px;display:none}
.form-status.show{display:block;padding:13px 15px}
.form-status.ok{background:#e7f8ee;color:#146c40;border:1px solid #b5e6cb}
.form-status.bad{background:#fdeceb;color:#a3231a;border:1px solid #f5c6c2}

/* ===========================================================
   FOOTER
   =========================================================== */
.footer{background:var(--navy-dd);color:#9fb8d1;padding:70px 0 0;position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--orange),var(--blue))}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:48px}
.footer-logo{height:58px;width:auto;background:#fff;padding:10px 14px;border-radius:12px;margin-bottom:20px}
.footer-brand p{font-size:.94rem;max-width:38ch}
.footer-badges{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.footer-badges span{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;
  color:#dbe8f6;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  padding:8px 14px;border-radius:999px}
.footer-col h4{color:#fff;font-size:1rem;margin-bottom:18px;font-family:'Outfit'}
.footer-col a,.footer-addr{display:block;color:#9fb8d1;font-size:.94rem;margin-bottom:12px;
  transition:color .2s,transform .2s var(--ease)}
.footer-col a:hover{color:var(--orange-l);transform:translateX(3px)}
.footer-base{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:22px 24px;
  border-top:1px solid rgba(255,255,255,.1);font-size:.85rem}

/* ---------- Back to top ---------- */
.to-top{position:fixed;right:22px;bottom:26px;z-index:56;width:48px;height:48px;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--navy);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{box-shadow:var(--shadow);color:var(--orange-d)}
.to-top-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.to-top-ring circle{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-dasharray:126;
  stroke-dashoffset:126;transition:stroke-dashoffset .1s linear}
.to-top-arrow{width:20px;height:20px}

/* ---------- Mobile action bar ---------- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;padding:10px 12px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  box-shadow:0 -10px 34px -22px rgba(0,42,85,.5)}
.mobile-bar-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:.98rem;padding:14px 12px;border-radius:12px;border:none;cursor:pointer;color:#fff}
.mb-call{background:var(--navy)}
.mb-quote{background:var(--orange)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width:1080px){
  .hero-inner{grid-template-columns:1fr;gap:44px}
  .hero-copy{max-width:none;margin-left:0}
  .hero-card{max-width:520px;justify-self:start;margin-right:0}
  /* stacked hero: the wash has to work top-to-bottom instead of left-to-right */
  .hero-tint{background:
    linear-gradient(180deg,rgba(0,22,47,.96) 0%,rgba(0,26,54,.92) 46%,rgba(0,38,77,.78) 100%),
    radial-gradient(70% 40% at 10% 96%,rgba(18,114,214,.4),transparent 68%),
    radial-gradient(60% 34% at 82% 4%,rgba(244,125,34,.24),transparent 66%)}
  .about-grid,.area-grid,.faq-grid,.contact-grid{grid-template-columns:1fr;gap:44px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{--gal-cols:2}
  .cat-cols{grid-template-columns:repeat(2,1fr);gap:26px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
  .hide-md{display:none!important}
  .float-chip.chip-a{right:6px}
  .float-chip.chip-b{left:6px}
}
@media (max-width:900px){
  html{scroll-padding-top:92px}
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff;z-index:70}
  .nav.scrolled{background:#fff}
  .nav-in{height:68px;gap:10px}
  .brand-logo{height:42px}
  .nav-call{display:inline-flex;margin-left:auto}
  .nav-toggle{display:inline-flex;z-index:80}
  .nav-links{position:fixed;inset:0 0 0 auto;width:min(330px,84vw);background:#fff;flex-direction:column;
    align-items:stretch;gap:2px;padding:90px 26px 32px;box-shadow:var(--shadow-lg);z-index:70;
    transform:translateX(100%);transition:transform .42s var(--ease);overflow-y:auto}
  .nav-links.open{transform:translateX(0)}
  .nav-links>a{width:100%;padding:14px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav-links>a::after{display:none}
  .nav-links>a.nav-cta{margin:18px 0 0;justify-content:center;border-bottom:none}
  .section{padding:76px 0}
  .stats-card{grid-template-columns:repeat(2,1fr);gap:26px 0;padding:30px 16px}
  .stat:nth-child(2)::after{display:none}
  .stat:nth-child(-n+2){padding-bottom:26px;border-bottom:1px solid var(--line)}
  /* timeline collapses to a single left rail */
  .tl-rail{left:31px;transform:none}
  .tl-step{grid-template-columns:62px 1fr;gap:0;padding:12px 0}
  .tl-node{grid-column:1;justify-self:start}
  .tl-card,.tl-step:nth-of-type(even) .tl-card{grid-column:2;grid-row:1;text-align:left;padding:0 0 0 26px}
  .pillar-body>ul{padding-left:26px;padding-right:22px}
  .pillar-head{gap:16px;padding:20px}
  .pillar-ic{width:48px;height:48px}
  .pillar-ic svg{width:23px;height:23px}
  .mobile-bar{display:flex}
  body{padding-bottom:72px}
  .to-top{bottom:90px}
  .scroll-cue{display:none}
  .hero{padding:70px 0 130px;min-height:auto}
  .area-map,.area-map iframe{min-height:380px}
}
@media (max-width:640px){
  .section{padding:62px 0}
  .wrap{padding:0 18px}
  .topbar-in{min-height:40px;padding:6px 0;gap:8px 14px;flex-wrap:wrap;justify-content:center}
  .topbar-info{gap:14px;font-size:.79rem;justify-content:center}
  .hide-sm{display:none!important}
  .topbar-badge{font-size:.76rem}
  .hero h1{font-size:clamp(2.1rem,8.6vw,2.9rem)}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .hero-card{padding:24px 20px}
  /* overlap now derives from --wave-h at every width; no override needed */
  .stats-card{border-radius:18px}
  .svc-grid,.cat-cols{grid-template-columns:1fr}
  .catalog{padding:22px 18px}
  .catalog-head{flex-direction:column;align-items:flex-start;gap:14px}
  .trade-btn{min-width:0;padding:12px 14px;font-size:.94rem}
  .form-row{grid-template-columns:1fr;gap:0}
  .contact-form-wrap{padding:24px 20px}
  .gallery-grid{--gal-cols:1;column-gap:14px}
  .gal-item{margin-bottom:14px}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .cta-band{padding:56px 0}
  .float-chip{font-size:.78rem;padding:9px 14px}
  .lb-figure{padding:76px 14px 40px}
  .lb-nav{width:44px;height:44px}
  .lb-prev{left:8px}.lb-next{right:8px}
}

/* ===========================================================
   Reduced motion
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .fx-bubbles,.radar,.hero-card-glow,.glow{display:none}
  .bp-flow,.bp-spark{animation:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .marquee-track{animation:none;width:auto;overflow:hidden}
}