/* ============================================================
   BH Garage Door USA — site.css
   Brand: #FE4C25 (orange) / #1A2767 (navy)
   Type:  Outfit (UI) + Playfair Display (accent)
   NOTE: all @media blocks live at the END of this file.
   ============================================================ */

:root{
  --orange:#FE4C25;
  --orange-d:#e13d18;
  --navy:#1A2767;
  --navy-d:#131d4f;
  --navy-deep:#131C4C;
  --ink:#151a2e;
  --body:#5a6076;
  --line:#e6e8f0;
  --bg:#ffffff;
  --bg-soft:#f6f7fb;
  --white:#fff;
  --radius:14px;
  --radius-lg:22px;
  --shadow:0 10px 30px rgba(20,26,48,.08);
  --shadow-lg:0 24px 60px rgba(20,26,48,.14);
  --wrap:1240px;
  --ff:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-alt:"Playfair Display",Georgia,serif;
  /* logo height drives the hero's top clearance — keep them linked */
  --logo-h:clamp(68px,50.4px + 4.695vw,118px);
  --hdr-top:14px;
  --hero-clear:clamp(30px,22px + 2.1vw,54px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--ff);font-size:16.5px;line-height:1.75;
  color:var(--body);background:var(--bg);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
[hidden]{display:none !important}

h1,h2,h3,h4,h5{color:var(--ink);font-weight:800;line-height:1.18;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(28px,17.6px + 2.8vw,45px)}
h2{font-size:clamp(25px,20.2px + 1.3vw,36px)}
h3{font-size:clamp(19px,17.3px + .46vw,23px)}
h4{font-size:18px}
p{margin:0 0 1.1em}

/* fluid gutter: 24px on the smallest phones up to 38px on desktop.
   One source of truth — never override padding-inline per breakpoint,
   and never use a `padding` shorthand on a .wrap element. */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:clamp(24px,5vw,38px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--orange);color:#fff;padding:10px 16px;z-index:999}
.skip:focus{left:8px;top:8px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 27px;border-radius:60px;font-weight:700;font-size:15.5px;
  border:2px solid transparent;cursor:pointer;transition:.22s ease;text-align:center;
  line-height:1.2;
}
.btn-primary{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn-primary:hover{background:var(--orange-d);border-color:var(--orange-d);transform:translateY(-2px);box-shadow:0 12px 26px rgba(254,76,37,.32)}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:#22317d;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-dark{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-dark:hover{background:#0f1740}
.btn-ghost-dark{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost-dark:hover{background:var(--navy);color:#fff}
.btn-block{width:100%}

/* ---------- inline icons (CSS masks, zero external requests) ---------- */
.ic{display:inline-block;width:1em;height:1em;background:currentColor;flex:none;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;vertical-align:-.13em}
.ic-phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C11.4 21 3 12.6 3 2.9c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C11.4 21 3 12.6 3 2.9c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.3z'/%3E%3C/svg%3E")}
.ic-mail{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E")}
.ic-pin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E")}
.ic-cal{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 8v10H5V10h14z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 8v10H5V10h14z'/%3E%3C/svg%3E")}
.ic-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")}
.ic-fb{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3h-3.1V8c0-.9.3-1.5 1.5-1.5h1.6V3.9c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.4-4 4.1v2.1H7.5v3h2.7v8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3h-3.1V8c0-.9.3-1.5 1.5-1.5h1.6V3.9c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.4-4 4.1v2.1H7.5v3h2.7v8z'/%3E%3C/svg%3E")}
.ic-ig{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.1 3.3.1 4.8 1.7 4.9 4.9.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.9c-.1 3.2-1.6 4.8-4.9 4.9-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-3.3-.2-4.8-1.7-4.9-4.9-.1-1.3-.1-1.7-.1-4.9s0-3.5.1-4.8C2.3 4 3.8 2.4 7.1 2.3 8.4 2.2 8.8 2.2 12 2.2zm0 6.6a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4zm0 5.3a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2zm4.1-5.6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.1 3.3.1 4.8 1.7 4.9 4.9.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.9c-.1 3.2-1.6 4.8-4.9 4.9-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-3.3-.2-4.8-1.7-4.9-4.9-.1-1.3-.1-1.7-.1-4.9s0-3.5.1-4.8C2.3 4 3.8 2.4 7.1 2.3 8.4 2.2 8.8 2.2 12 2.2zm0 6.6a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4zm0 5.3a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2zm4.1-5.6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z'/%3E%3C/svg%3E")}
.ic-li{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.9 21H3.4V9h3.5zM5.1 7.4a2 2 0 1 1 0-4.1 2 2 0 0 1 0 4.1zM21 21h-3.5v-5.8c0-1.4 0-3.2-1.9-3.2s-2.2 1.5-2.2 3.1V21H9.9V9h3.3v1.6h.1c.5-.9 1.6-1.9 3.4-1.9 3.6 0 4.3 2.4 4.3 5.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.9 21H3.4V9h3.5zM5.1 7.4a2 2 0 1 1 0-4.1 2 2 0 0 1 0 4.1zM21 21h-3.5v-5.8c0-1.4 0-3.2-1.9-3.2s-2.2 1.5-2.2 3.1V21H9.9V9h3.3v1.6h.1c.5-.9 1.6-1.9 3.4-1.9 3.6 0 4.3 2.4 4.3 5.5z'/%3E%3C/svg%3E")}
.ic-x{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 3h3.2l-7 8 8.2 10h-6.4l-5-6.1L4.7 21H1.5l7.5-8.6L1.1 3h6.6l4.5 5.6zm-1.1 16h1.8L7.7 4.9H5.8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 3h3.2l-7 8 8.2 10h-6.4l-5-6.1L4.7 21H1.5l7.5-8.6L1.1 3h6.6l4.5 5.6zm-1.1 16h1.8L7.7 4.9H5.8z'/%3E%3C/svg%3E")}
.ic-yt{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 7.2s-.2-1.4-.8-2c-.8-.8-1.6-.8-2-.9C16 4.1 12 4.1 12 4.1s-4 0-6.8.2c-.4.1-1.3.1-2 .9-.6.6-.8 2-.8 2S2.2 8.8 2.2 10.5v1.6c0 1.6.2 3.3.2 3.3s.2 1.4.8 2c.8.8 1.8.8 2.2.9 1.6.1 6.8.2 6.8.2s4 0 6.8-.2c.4-.1 1.2-.1 2-.9.6-.6.8-2 .8-2s.2-1.6.2-3.3v-1.6c0-1.7-.2-3.3-.2-3.3zM9.9 14.3V8.6l5.2 2.9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 7.2s-.2-1.4-.8-2c-.8-.8-1.6-.8-2-.9C16 4.1 12 4.1 12 4.1s-4 0-6.8.2c-.4.1-1.3.1-2 .9-.6.6-.8 2-.8 2S2.2 8.8 2.2 10.5v1.6c0 1.6.2 3.3.2 3.3s.2 1.4.8 2c.8.8 1.8.8 2.2.9 1.6.1 6.8.2 6.8.2s4 0 6.8-.2c.4-.1 1.2-.1 2-.9.6-.6.8-2 .8-2s.2-1.6.2-3.3v-1.6c0-1.7-.2-3.3-.2-3.3zM9.9 14.3V8.6l5.2 2.9z'/%3E%3C/svg%3E")}
.ic-pin2{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12c0 4.2 2.6 7.8 6.3 9.3-.1-.8-.2-2 0-2.9l1.2-5.1s-.3-.6-.3-1.5c0-1.4.8-2.5 1.8-2.5.9 0 1.3.6 1.3 1.5 0 .9-.6 2.2-.9 3.5-.3 1 .5 1.9 1.6 1.9 1.9 0 3.2-2.4 3.2-5.3 0-2.2-1.5-3.8-4.1-3.8-3 0-4.9 2.2-4.9 4.7 0 .9.3 1.5.7 2 .2.2.2.3.1.6l-.2.9c-.1.3-.3.4-.6.2-1.2-.5-1.8-1.9-1.8-3.5 0-2.6 2.2-5.8 6.6-5.8 3.5 0 5.9 2.6 5.9 5.3 0 3.6-2 6.3-5 6.3-1 0-1.9-.5-2.2-1.2l-.6 2.4c-.2.8-.7 1.7-1.1 2.3.8.2 1.7.4 2.6.4 5.5 0 10-4.5 10-10S17.5 2 12 2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12c0 4.2 2.6 7.8 6.3 9.3-.1-.8-.2-2 0-2.9l1.2-5.1s-.3-.6-.3-1.5c0-1.4.8-2.5 1.8-2.5.9 0 1.3.6 1.3 1.5 0 .9-.6 2.2-.9 3.5-.3 1 .5 1.9 1.6 1.9 1.9 0 3.2-2.4 3.2-5.3 0-2.2-1.5-3.8-4.1-3.8-3 0-4.9 2.2-4.9 4.7 0 .9.3 1.5.7 2 .2.2.2.3.1.6l-.2.9c-.1.3-.3.4-.6.2-1.2-.5-1.8-1.9-1.8-3.5 0-2.6 2.2-5.8 6.6-5.8 3.5 0 5.9 2.6 5.9 5.3 0 3.6-2 6.3-5 6.3-1 0-1.9-.5-2.2-1.2l-.6 2.4c-.2.8-.7 1.7-1.1 2.3.8.2 1.7.4 2.6.4 5.5 0 10-4.5 10-10S17.5 2 12 2z'/%3E%3C/svg%3E")}

/* ---------- header ---------- */
.hdr{background:var(--navy);position:sticky;top:0;z-index:200}
.hdr-in{display:flex;align-items:center;gap:26px;min-height:86px}
.brand{display:block}
.brand img{width:auto;height:56px;object-fit:contain}
/* default (solid navy bar) -> white mark; overlay header -> navy mark */
.brand-dark{display:none}
.hdr-overlay .brand-dark{display:block}
.hdr-overlay .brand-white{display:none}

/* overlay mode: header floats on top of the hero */
/* fixed, not absolute — absolute scrolled away with the hero */
.hdr-overlay{background:transparent;position:fixed;left:0;right:0;top:0;box-shadow:none;z-index:230;
  transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease}

/* Scrolled state: solid bar so the nav stays readable over page content.
   The overlay header shows the navy-bordered mark against a photo; once the
   bar is solid navy that mark disappears into it, so swap to the white one. */
.hdr-overlay.is-stuck{
  background:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  /* a hairline reads far cleaner on a solid bar than a heavy drop shadow */
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 24px rgba(20,26,48,.10);
}
/* The pulse ring is a hero-banner flourish. On a solid bar it just looks
   like a glowing blob, so it stops once the header is stuck. */
.hdr-overlay.is-stuck .cfs4-ring{display:none}
/* White bar: the white nav text and white logo would both vanish, so every
   foreground colour flips to the dark palette. */
.hdr-overlay.is-stuck .nav-list > li > a{color:var(--ink)}
.hdr-overlay.is-stuck .nav-list > li > a.on{color:var(--orange)}
.hdr-overlay.is-stuck .nav-list > li > a:hover{color:var(--orange)}
.hdr-overlay.is-stuck .burger{color:var(--navy)}
.hdr-overlay.is-stuck .burger-x i{background:var(--navy)}
/* The logo and call button keep their full header size when stuck — only
   the bar's colour treatment changes on scroll, nothing is scaled down. */
.hdr-overlay.is-stuck .brand-dark{display:block}
.hdr-overlay.is-stuck .brand-white{display:none}
.hdr-overlay.is-stuck .brand::before{opacity:0}
/* tighten the bar once stuck so it does not eat the viewport */
/* Trim the bar a little without shrinking the logo or the button: the
   overlay header carries 14px of top padding and a 112px floor for the
   hero layout, neither of which a stuck bar needs. */
/* The logo sets the bar height, so trimming the bar means easing the logo
   down a little. Kept close to full size — this is a trim, not the big
   shrink that looked cheap. */
.hdr-overlay.is-stuck .hdr-in{min-height:0;padding-top:5px;padding-bottom:5px}
.hdr-overlay.is-stuck .brand img{height:clamp(74px,64px + 1.9vw,96px)}
.hdr-overlay.is-stuck .brand{align-self:center;margin-top:0}
.hdr-overlay .hdr-in{min-height:112px;align-items:center;padding-top:14px}
/* logo overhangs into the hero */
.hdr-overlay .brand{align-self:flex-start;position:relative;z-index:2}
.hdr-overlay .brand img{height:var(--logo-h)}

/* soft white halo so the navy mark stays legible over the photo */
.hdr-overlay .brand::before{
  content:"";position:absolute;left:50%;top:50%;
  width:172%;height:158%;transform:translate(-50%,-50%);
  border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.72) 42%,
    rgba(255,255,255,.34) 66%,
    rgba(255,255,255,0) 100%);
  filter:blur(7px);
}
.hdr-overlay .brand img{
  filter:drop-shadow(0 0 5px rgba(255,255,255,.95)) drop-shadow(0 3px 10px rgba(0,0,0,.28));
}

/* ============================================================
   LIVE-SITE CTA BUTTON
   Values copied verbatim from bhgaragedoorusa.com. Do not tweak
   these by eye — re-read the live source if something looks off.
   ============================================================ */
.cfs4-outer{display:flex;align-items:center;justify-content:center;padding:5px 0;overflow:visible}
.cfs4-pulse-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:visible}

.cfs4-ring{
  position:absolute;top:0;left:0;right:0;bottom:0;
  border-radius:12px;background:var(--orange);
  animation:cfs4-pulse 2.4s ease-out infinite;
  z-index:0;pointer-events:none;
}
.cfs4-ring:nth-child(2){animation-delay:.8s}
.cfs4-ring:nth-child(3){animation-delay:1.6s}
@keyframes cfs4-pulse{
  0%   {transform:scale(1);    opacity:.6}
  100% {transform:scale(1.25); opacity:0}
}
/* One pulse at every width. Where the ring overshoots the screen edge on
   a narrow viewport, body{overflow-x:hidden} clips it — no second
   keyframe, so mobile and desktop are guaranteed to look identical. */
.cfs4-navy .cfs4-ring{background:var(--navy)}

.cfs4-btn{
  display:inline-flex;align-items:stretch;background:var(--orange);
  border-radius:12px;text-decoration:none;position:relative;z-index:1;
  white-space:nowrap;overflow:hidden;transition:background .3s ease;
}
.cfs4-btn:hover{background:var(--navy)}
.cfs4-navy .cfs4-btn{background:var(--navy)}
.cfs4-navy .cfs4-btn:hover{background:var(--orange)}

.cfs4-icon-wrap{
  display:flex;align-items:center;justify-content:center;
  width:clamp(52px,39.9px + 3.2vw,80px);align-self:stretch;background:rgba(0,0,0,.15);flex-shrink:0;
  transition:background .3s ease;
}
.cfs4-btn:hover .cfs4-icon-wrap{background:rgba(255,255,255,.15)}
.cfs4-icon-circle{
  width:clamp(38px,31px + 1.88vw,58px);height:clamp(38px,31px + 1.88vw,58px);border-radius:50%;background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  /* the icon draws with currentColor — without this it inherits the
     body text colour and renders dark instead of white */
  color:#fff;
}
.cfs4-icon-circle svg{width:clamp(22px,18.5px + .93vw,30px);height:clamp(22px,18.5px + .93vw,30px);display:block}

.cfs4-texts{display:flex;flex-direction:column;justify-content:center;min-width:0;
  padding-block:clamp(10px,8.3px + .46vw,14px);
  padding-right:clamp(13px,8.2px + 1.3vw,24px);padding-left:clamp(11px,8px + .81vw,18px)}
/* explicit line-heights: without these the lines inherit body's 1.75
   and the button balloons vertically */
.cfs4-top{font-size:clamp(10.5px,9.4px + .29vw,13px);font-weight:700;color:rgba(255,255,255,.9);
  letter-spacing:clamp(.8px,.28px + .14vw,2px);text-transform:uppercase;margin:0;line-height:1.2}
.cfs4-num{font-size:clamp(18px,14.9px + .81vw,25px);font-weight:900;color:#fff;margin:2px 0 0;line-height:1.15}

/* the handset rings and its signal waves ripple out */
.cfs4-handset{
  transform-box:fill-box;transform-origin:50% 62%;
  animation:cfs4-ring-shake 1.35s cubic-bezier(.36,.07,.19,.97) infinite;
}
@keyframes cfs4-ring-shake{
  0%,14%   {transform:rotate(0)}
  21%      {transform:rotate(-12deg)}
  28%      {transform:rotate(10deg)}
  35%      {transform:rotate(-7.5deg)}
  42%      {transform:rotate(5.5deg)}
  49%      {transform:rotate(-3.6deg)}
  56%      {transform:rotate(2.2deg)}
  63%      {transform:rotate(-1.1deg)}
  70%,100% {transform:rotate(0)}
}
/* calendar: date squares light up in sequence */
.cfs4-cal-d{
  transform-box:fill-box;transform-origin:50% 50%;
  animation:cfs4-cal-pop 2.8s ease-in-out infinite;
}
.cfs4-cal .d1{animation-delay:0s}
.cfs4-cal .d2{animation-delay:.09s}
.cfs4-cal .d3{animation-delay:.18s}
.cfs4-cal .d4{animation-delay:.27s}
.cfs4-cal .d5{animation-delay:.36s}
.cfs4-cal .d6{animation-delay:.45s}
@keyframes cfs4-cal-pop{
  0%,55%,100%{opacity:.5;  transform:scale(.9)}
  18%,38%    {opacity:1;   transform:scale(1)}
}
.cfs4-cal-bind{
  transform-box:fill-box;transform-origin:50% 100%;
  animation:cfs4-cal-bind 2.8s ease-in-out infinite;
}
@keyframes cfs4-cal-bind{
  0%,100%{transform:translateY(0)}
  12%    {transform:translateY(-1px)}
}

.cfs4-wave{
  transform-box:fill-box;transform-origin:0% 100%;
  animation:cfs4-wave 1.35s cubic-bezier(.25,.6,.3,1) infinite;
}
.cfs4-wave1{animation-delay:.02s}
.cfs4-wave2{animation-delay:.14s}
@keyframes cfs4-wave{
  0%   {opacity:0;   transform:scale(.55)}
  22%  {opacity:1;   transform:scale(1)}
  58%  {opacity:.95; transform:scale(1.04)}
  80%  {opacity:0;   transform:scale(1.16)}
  100% {opacity:0;   transform:scale(.55)}
}
.nav{margin-inline:auto}
/* drawer-only brand — revealed in the mobile block */
.nav-logo{display:none}
.nav-list{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav-list>li>a{color:#fff;font-weight:600;font-size:16px;padding:10px 0;display:inline-flex;align-items:center;gap:6px;position:relative}
.nav-list>li>a::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:0;background:var(--orange);transition:.25s}
.nav-list>li>a:hover::after,.nav-list>li>a.on::after{width:100%}
.nav-list>li>a.on{color:var(--orange)}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.8}
.has-sub{position:relative}
.sub{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);
  background:#fff;list-style:none;margin:0;padding:10px;border-radius:14px;
  min-width:250px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:.22s;
  border-top:3px solid var(--orange);
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,6px)}
.sub a{display:block;padding:10px 14px;border-radius:9px;color:var(--ink);font-weight:600;font-size:15.5px}
.sub a:hover{background:var(--bg-soft);color:var(--orange)}

/* ============================================================
   MEGA MENUS  (Services / Service Areas)
   Anchored to .hdr so the panel spans the header rather than the
   list item. Hidden state is visibility+opacity — NOT display:none,
   so it can transition. pointer-events:none while hidden, and no
   child ever re-declares visibility:visible: a hidden overlay whose
   child turns visibility back on swallows every click on the page.
   ============================================================ */
/* NO .hdr{position:...} here. .hdr already sets position:relative up at
   the top of this file, and .hdr-overlay overrides it to absolute. A second
   .hdr rule this far down has equal specificity and wins on order, which
   silently strips the overlay header's positioning. Both values are
   "positioned", so the panel anchors correctly either way. */
.has-mega{position:static}
/* Measured 25px of dead space between the nav link and the panel: the
   pointer left .has-mega on the way down and the menu shut before it could
   be reached. This bridges it. Kept to the link's own width (+20px) so it
   never sits over a neighbouring nav item and steal its hover. */
.has-mega>a::before{
  content:"";position:absolute;left:-20px;right:-20px;top:100%;height:38px;
}
.mega{
  position:absolute;left:0;right:0;top:100%;z-index:120;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-16px) scale(.99);
  transition:opacity .34s cubic-bezier(.22,1,.36,1),
             transform .46s cubic-bezier(.22,1,.36,1),
             visibility 0s linear .46s;
}
.has-mega:hover>.mega,.has-mega:focus-within>.mega{
  opacity:1;visibility:visible;transform:translateY(0) scale(1);
  transition-delay:0s,0s,0s;
}
/* .mega spans the full header width, but the white card inside is centred
   and narrower. Leaving .mega hit-testable meant the transparent strips
   either side of the card still counted as hovering the menu, so it stayed
   open with the pointer nowhere near it. Only the visible card takes
   pointer events; everything else falls through to the page beneath. */
.has-mega:hover>.mega>.mega-in,.has-mega:focus-within>.mega>.mega-in{pointer-events:auto}
.mega-in{
  background:#fff;border-radius:20px;border-top:3px solid var(--orange);
  box-shadow:0 30px 70px rgba(10,16,40,.26);
  margin-top:10px;padding:26px;
  display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:26px;align-items:stretch;
}
/* ---- service cards ----
   Same construction as the numbered service-page cards: a light tinted
   gradient body with a solid dark icon tile, alternating navy/orange.
   The 4n formula gives a checkerboard across two columns rather than
   two flat stripes of colour. */
.mega-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.mega-card{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:14px;padding:14px 15px;border-radius:16px;
  border:1px solid transparent;
  /* entrance state — settled by the reveal rule below */
  opacity:0;transform:translateY(16px) scale(.965);
  transition:transform .3s cubic-bezier(.3,.7,.3,1),box-shadow .3s ease,border-color .3s ease;
}
.mega-card:nth-child(4n+1),.mega-card:nth-child(4n+4){
  background:linear-gradient(150deg,#e7edfb 0%,#f1f5fd 100%);
}
.mega-card:nth-child(4n+2),.mega-card:nth-child(4n+3){
  background:linear-gradient(150deg,#ffe1d6 0%,#fff0eb 100%);
}
.mega-card:nth-child(4n+1) .mega-ic,.mega-card:nth-child(4n+4) .mega-ic{
  background:var(--navy);box-shadow:0 12px 26px rgba(26,39,103,.34);
}
.mega-card:nth-child(4n+2) .mega-ic,.mega-card:nth-child(4n+3) .mega-ic{
  background:var(--orange);box-shadow:0 12px 26px rgba(254,76,37,.36);
}
/* reveal: rise, settle and un-blur with a touch of overshoot */
.has-mega:hover>.mega .mega-card,.has-mega:focus-within>.mega .mega-card{
  opacity:1;transform:translateY(0) scale(1);
  transition:opacity .42s cubic-bezier(.22,1,.36,1),
             transform .52s cubic-bezier(.22,1.2,.32,1),
             box-shadow .3s ease,border-color .3s ease;
}
.mega-card:nth-child(1){transition-delay:.05s}
.mega-card:nth-child(2){transition-delay:.10s}
.mega-card:nth-child(3){transition-delay:.15s}
.mega-card:nth-child(4){transition-delay:.20s}
.mega-card:nth-child(5){transition-delay:.25s}
.mega-card:nth-child(6){transition-delay:.30s}
.mega-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 44px rgba(20,26,48,.16);
  border-color:rgba(255,255,255,.9);
}
/* a light wash sweeps across the card on hover */
.mega-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.62) 50%,transparent 66%);
  transform:translateX(-120%);opacity:0;
}
.mega-card:hover::before{animation:megaWash .9s cubic-bezier(.25,.6,.3,1)}
@keyframes megaWash{
  0%  {transform:translateX(-120%);opacity:0}
  22% {opacity:1}
  100%{transform:translateX(120%);opacity:0}
}
.mega-ic{
  position:relative;
  width:50px;height:50px;flex:none;border-radius:15px;display:grid;place-items:center;
  color:#fff;
  transition:transform .42s cubic-bezier(.22,1.3,.32,1),box-shadow .3s ease;
  /* the tile pops in a beat behind its card */
  opacity:0;transform:scale(.62) rotate(-10deg);
}
.has-mega:hover>.mega .mega-ic,.has-mega:focus-within>.mega .mega-ic{
  opacity:1;transform:scale(1) rotate(0deg);
  transition:opacity .34s ease,transform .55s cubic-bezier(.22,1.45,.32,1),box-shadow .3s ease;
}
.mega-card:nth-child(1) .mega-ic{transition-delay:.13s}
.mega-card:nth-child(2) .mega-ic{transition-delay:.18s}
.mega-card:nth-child(3) .mega-ic{transition-delay:.23s}
.mega-card:nth-child(4) .mega-ic{transition-delay:.28s}
.mega-card:nth-child(5) .mega-ic{transition-delay:.33s}
.mega-card:nth-child(6) .mega-ic{transition-delay:.38s}
.mega-card:hover .mega-ic{transform:scale(1.09) rotate(-5deg)}
/* .sa hardcodes color:#fff, which is correct on these solid dark tiles */
.mega-ic .sa{width:28px;height:28px;color:#fff;position:relative;z-index:1}
.mega-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.mega-tx strong{font-size:15.5px;color:var(--ink);font-weight:800;line-height:1.2}
.mega-short{display:none}
.mega-tx small{font-size:12.6px;color:var(--body);line-height:1.35}
.mega-go{
  width:8px;height:8px;flex:none;margin-left:auto;
  border-right:2px solid var(--navy);border-top:2px solid var(--navy);
  transform:rotate(45deg) translateX(-4px);opacity:0;
  transition:transform .3s cubic-bezier(.22,1.2,.32,1),opacity .26s ease;
}
.mega-card:hover .mega-go{opacity:.9;transform:rotate(45deg) translateX(1px)}
/* ---- city list ---- */
.mega-cities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px;align-content:start}
.mega-city{
  display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;
  font-size:14.4px;font-weight:600;color:var(--ink);
  transition:background .22s ease,color .22s ease;
  opacity:0;transform:translateY(6px);
}
.has-mega:hover>.mega .mega-city,.has-mega:focus-within>.mega .mega-city{
  opacity:1;transform:translateY(0);
  transition:opacity .3s ease,transform .3s cubic-bezier(.3,.7,.3,1),background .22s ease,color .22s ease;
}
.mega-city:nth-child(3n+1){transition-delay:.05s}
.mega-city:nth-child(3n+2){transition-delay:.09s}
.mega-city:nth-child(3n+3){transition-delay:.13s}
.mega-city:hover{background:var(--bg-soft);color:var(--orange)}
.mega-city-pin{
  width:24px;height:24px;flex:none;border-radius:7px;display:grid;place-items:center;
  background:rgba(26,39,103,.08);color:var(--navy);transition:.22s;
}
.mega-city-pin svg{width:14px;height:14px}
.mega-city:hover .mega-city-pin{background:var(--orange);color:#fff}
/* the pin dips on hover only — never idles, on a grid of repeated items */
.mega-city:hover .mega-city-pin svg{animation:arDrop .62s cubic-bezier(.3,1.5,.5,1)}
/* ---- side panel ---- */
.mega-side{
  background:var(--navy);color:#fff;border-radius:16px;padding:22px;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  opacity:0;transform:translateX(20px);
}
.has-mega:hover>.mega .mega-side,.has-mega:focus-within>.mega .mega-side{
  opacity:1;transform:translateX(0);
  transition:opacity .44s cubic-bezier(.22,1,.36,1) .12s,
             transform .54s cubic-bezier(.22,1,.36,1) .12s;
}
.mega-kicker{
  display:inline-flex;align-items:center;gap:9px;color:var(--orange);
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;font-size:11.5px;
}
.mega-kicker::before{content:"";width:26px;height:2px;background:var(--orange)}
.mega-side-h{font-size:21px;font-weight:800;line-height:1.25;margin:6px 0 0}
.mega-side-h em{font-family:var(--ff-alt);font-style:italic;color:var(--orange)}
.mega-side-p{font-size:13.4px;color:rgba(255,255,255,.76);line-height:1.5;margin:0 0 14px}
/* the CTA button is nowrap and ~321px natural; the column's inner width is
   ~286px, so it is scaled down rather than allowed to burst the panel */
.mega-side .cfs4-outer{justify-content:flex-start;padding:0}
.mega-side .cfs4-pulse-wrap{transform:scale(.86);transform-origin:left center}
.mega-all{
  display:inline-flex;align-items:center;gap:9px;margin-top:12px;
  color:#fff;font-weight:700;font-size:14px;
}
.mega-all i{
  width:7px;height:7px;border-right:2px solid var(--orange);border-top:2px solid var(--orange);
  transform:rotate(45deg);transition:transform .24s ease;
}
.mega-all:hover{color:var(--orange)}
.mega-all:hover i{transform:rotate(45deg) translateX(3px)}

.hdr-cta{display:flex;align-items:center;gap:16px}
.hdr-call{display:inline-flex;align-items:center;gap:11px;color:#fff}
.hdr-call-ic{width:38px;height:38px;border-radius:50%;background:var(--orange);color:#fff;
  display:grid;place-items:center;font-size:17px;-webkit-mask:none;mask:none;position:relative}
.hdr-call-ic::before{content:"";width:17px;height:17px;background:#fff;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C11.4 21 3 12.6 3 2.9c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.3z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C11.4 21 3 12.6 3 2.9c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.3z'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hdr-call-tx{display:flex;flex-direction:column;line-height:1.25}
.hdr-call-tx small{font-size:12.5px;opacity:.75}
.hdr-call-tx strong{font-size:17px;font-weight:800}
/* ---------- garage-door menu button ---------- */
.burger{
  display:none;width:48px;height:48px;padding:0;cursor:pointer;
  place-items:center;border-radius:15px;
  /* orange by default */
  background:linear-gradient(150deg,var(--orange),var(--orange-d));
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 10px 24px rgba(254,76,37,.38),inset 0 1px 0 rgba(255,255,255,.38);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.burger:hover{
  background:linear-gradient(150deg,var(--orange-d),#c9330f);
  border-color:rgba(255,255,255,.5);transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(254,76,37,.5),inset 0 1px 0 rgba(255,255,255,.45);
}
.burger.open{
  background:linear-gradient(150deg,rgba(254,76,37,.98),rgba(225,61,24,.98));
  border-color:rgba(255,255,255,.55);
  box-shadow:0 0 0 5px rgba(254,76,37,.24),0 12px 28px rgba(254,76,37,.4);
}
.burger:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* both marks stack in the same cell; we cross-fade between them */
.burger>*{grid-area:1/1}
.burger-svg{
  width:27px;height:27px;display:block;overflow:visible;
  transition:opacity .28s ease,transform .38s cubic-bezier(.5,0,.2,1);
}
.burger-svg .bg-frame,.burger-svg .bg-base{
  fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.burger-svg .bg-slat{fill:#fff}

/* close mark — plain spans, so no SVG transform quirks */
.burger-x{
  position:relative;width:24px;height:24px;justify-self:center;align-self:center;
  opacity:0;transform:rotate(-90deg) scale(.7);
  transition:opacity .28s ease,transform .38s cubic-bezier(.5,0,.2,1);
}
.burger-x i{
  position:absolute;top:50%;left:0;width:100%;height:2.5px;
  background:#fff;border-radius:3px;
}
.burger-x i:first-child{transform:translateY(-50%) rotate(45deg)}
.burger-x i:last-child{transform:translateY(-50%) rotate(-45deg)}

/* keyed off aria-expanded (always set by the JS) rather than a class */
.burger[aria-expanded="true"] .burger-svg{opacity:0;transform:rotate(90deg) scale(.7)}
.burger[aria-expanded="true"] .burger-x{opacity:1;transform:rotate(0) scale(1)}
.burger[aria-expanded="true"]{
  background:linear-gradient(150deg,rgba(254,76,37,.98),rgba(225,61,24,.98));
  border-color:rgba(255,255,255,.55);
  box-shadow:0 0 0 5px rgba(254,76,37,.24),0 12px 28px rgba(254,76,37,.4);
}

/* ---------- sections ---------- */
.sec{padding-block:clamp(52px,32.9px + 5.1vw,96px)}
.sec-soft{background:var(--bg-soft)}
.kicker{
  display:inline-block;color:var(--orange);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:13px;margin-bottom:12px;
}
.sec-head{max-width:760px;margin:0 auto 54px;text-align:center}
.sec-head p{margin:0}
.sec-head-l{max-width:660px;margin:0 0 46px;text-align:left}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(19,28,76,.95) 0%,rgba(19,28,76,.86) 46%,rgba(19,28,76,.42) 100%);
  z-index:1;
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* padding-BLOCK only: never clobber the .wrap inline gutter, or the
   hero copy stops lining up with the logo/nav above it. */
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-block:84px 92px}
.hero h1{color:#fff;font-size:52px;margin-bottom:20px}
.hero h1 em{font-family:var(--ff-alt);font-style:italic;font-weight:700;color:var(--orange)}
.hero-lead{color:rgba(255,255,255,.92);font-size:18px;max-width:560px}
.hero-lead strong{color:#fff;font-weight:700}
.hero-ticks{list-style:none;padding:0;margin:26px 0 32px;display:flex;flex-wrap:wrap;gap:12px 26px}
.hero-ticks li{display:flex;align-items:center;gap:9px;font-weight:500;color:#fff;font-size:clamp(14.5px,13.4px + .29vw,17px)}
.hero-ticks .ic{color:var(--orange);width:19px;height:19px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:26px}

/* ----- full-bleed hero with background slideshow ----- */
/* Fits the viewport exactly, but grows instead of clipping if the
   copy ever needs more room (long headings, large font settings). */
/* bottom-aligned so the CTAs always sit a fixed 5px off the hero edge,
   whatever the viewport height */
/* dvh tracks the real viewport; svh resolves short and leaves a gap */
/* Centred, not bottom-aligned. Zoomed out (or on a tall monitor) a
   flex-end hero leaves the copy stranded at the bottom of a huge frame. */
.hero-full{min-height:100vh;min-height:100dvh;display:flex;align-items:center}
.hero-full::before{
  background:linear-gradient(100deg,rgba(15,22,60,.88) 0%,rgba(15,22,60,.66) 38%,rgba(15,22,60,.22) 68%,rgba(15,22,60,.30) 100%);
}
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  background-image:var(--bg);
  opacity:0;transition:opacity .9s ease-in-out;will-change:opacity,transform;
}
.hero-slide.on{opacity:1;animation:kenburns 9s ease-out forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero-full .hero-in{
  grid-template-columns:1fr;width:100%;
  /* padding-BLOCK only — the inline gutter must stay inherited from
     .wrap so the hero copy lines up exactly with the logo above it. */
  /* symmetric so the flex centring is honest; the top value also clears
     the overlay header and logo on short screens */
  padding-block:calc(112px + 26px) calc(112px + 26px);
}
.hero-copy{max-width:790px}
/* hero kicker: same rule-and-caps language as the section kickers,
   tuned for legibility over a photographic background */
.hero-kicker{
  display:inline-flex;align-items:center;gap:13px;
  color:var(--orange);font-weight:700;font-size:clamp(11.5px,10.8px + .19vw,13px);
  letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:clamp(12px,9px + .8vw,18px);
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.hero-kicker::before{
  content:"";width:clamp(26px,20px + 1.6vw,44px);height:2px;flex:none;
  background:linear-gradient(90deg,rgba(254,76,37,0),var(--orange));
  box-shadow:0 0 12px rgba(254,76,37,.85);
}
.hero-kicker::after{
  content:"";width:5px;height:5px;flex:none;border-radius:50%;
  background:var(--orange);box-shadow:0 0 10px rgba(254,76,37,.9);
}
.hero-full h1{font-size:clamp(25px,18.5px + 1.73vw,40px);line-height:1.15;margin-bottom:clamp(12px,7.7px + 1.15vw,22px);
  text-shadow:0 4px 26px rgba(0,0,0,.35)}
.hero-full .hero-lead{max-width:640px;font-size:clamp(15.5px,14px + .4vw,19px)}
/* stacked tick list, matching the reference */
.hero-full .hero-ticks{flex-direction:column;gap:11px;margin:28px 0 38px}

/* ---------- marquee band under the hero ---------- */
.mq{
  position:relative;overflow:hidden;
  background:var(--orange);
  padding-block:clamp(14px,10.5px + .93vw,22px);
  user-select:none;
}
/* edges dissolve instead of hard-cutting */
.mq-track{
  display:flex;width:max-content;
  animation:mqScroll 46s linear infinite;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.mq:hover .mq-track{animation-play-state:paused}
.mq-set{display:flex;align-items:center;flex:none}
/* all phrases render the same — plain white text, no outline.
   Each one is a link; the track pauses on hover so it can be clicked. */
.mq-i{
  font-size:clamp(16px,11.1px + 1.04vw,25px);font-weight:700;letter-spacing:.01em;
  color:#fff;white-space:nowrap;text-decoration:none;
  line-height:1.35;padding-inline:clamp(13px,8.2px + 1.3vw,24px);
  transition:opacity .25s ease;
}
.mq-i:hover{
  opacity:.82;
  text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;
}
.mq-i:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:5px}
.mq-sep{
  width:9px;height:9px;flex:none;transform:rotate(45deg);
  background:#fff;border-radius:2px;opacity:.9;
}
@keyframes mqScroll{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

/* ---------- quote band: form left, offset card right ---------- */
.qb{position:relative;overflow:hidden;padding-block:clamp(52px,37.3px + 3.9vw,86px);background:var(--bg-soft)}
/* photo is barely there — just a faint texture behind the cards */
.qb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.14}
.qb::before{content:"";position:absolute;inset:0;background:rgba(246,247,251,.55)}
.qb-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:center}

.qb-form{
  background:#fff;border-radius:18px;padding:clamp(24px,17.5px + 1.7vw,38px) clamp(20px,11.3px + 2.3vw,40px) clamp(26px,19.9px + 1.6vw,40px);
  box-shadow:0 30px 70px rgba(10,16,40,.28);position:relative;z-index:3;
}
/* the info card tucks in behind the form and sits lower.
   padding-left must clear the overlap or the form covers its text. */
.qb-card{
  --qb-overlap:56px;
  background:#fff;border-radius:18px;
  padding:clamp(24px,19.7px + 1.15vw,34px) clamp(20px,13.1px + 1.85vw,36px) clamp(26px,21.7px + 1.15vw,36px)
          calc(var(--qb-overlap) + clamp(20px,13.1px + 1.85vw,36px));
  box-shadow:0 24px 60px rgba(10,16,40,.22);
  margin-left:calc(var(--qb-overlap) * -1);margin-top:66px;
  position:relative;z-index:2;
}
.qb-badge{
  display:inline-flex;align-items:center;gap:10px;
  border:1.5px solid var(--orange);border-radius:8px;
  padding:9px 16px;font-size:14.5px;font-weight:700;color:var(--ink);
  line-height:1.35;margin-bottom:20px;
}
.qb-g{width:20px;height:20px;flex:none}
.qb-h{font-size:clamp(24px,19.7px + 1.15vw,34px);line-height:1.2;margin-bottom:12px}
.qb-h em{font-family:var(--ff-alt);font-style:italic;font-weight:700;color:var(--orange)}
.qb-p{font-size:16px;margin-bottom:26px}

/* form styling inside the card */
.qform-title{
  font-size:clamp(26px,20.8px + 1.4vw,38px);text-align:center;margin-bottom:clamp(18px,14.5px + .93vw,26px);color:var(--navy);
  font-family:var(--ff-alt);font-weight:700;line-height:1.3;
}
.qform-title em{font-style:italic;color:var(--orange)}
.qf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.fld-full{grid-column:1/-1}
.qform-btn{
  margin-top:24px;background:var(--orange);color:#fff;border:0;
  padding:14px 30px;border-radius:7px;font-weight:700;font-size:15.5px;
  cursor:pointer;transition:.22s ease;
}
.qform-btn:hover{background:var(--orange-d);transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(254,76,37,.32)}

/* ---------- quote card (standalone use, e.g. contact page) ---------- */
.qform{color:var(--body)}
/* mobile-only video testimonial slider inside the quote band.
   Revealed in the <=1024px block, where it takes order:-1. */
.qv{display:none}
.qv-head{margin-bottom:14px}
/* the band is --bg-soft, so this inherits the dark heading colour like
   .qb-h does — do not set a light colour here */
.qv-h{font-size:clamp(21px,17.6px + .91vw,29px);line-height:1.25;margin:0}
.qv-h em{font-family:var(--ff-alt);font-style:italic;font-weight:700;color:var(--orange)}
.qv-track{
  display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:2px;
}
.qv-track::-webkit-scrollbar{display:none}
.qv-slide{
  flex:0 0 74%;scroll-snap-align:start;
  border-radius:18px;overflow:hidden;background:#0b1020;
  box-shadow:0 14px 34px rgba(10,16,40,.28);
}
/* portrait clips — cap the height so one slide never eats the screen */
.qv-slide video{width:100%;aspect-ratio:9/16;max-height:56vh;
  object-fit:cover;display:block}

/* inside the CTA band the .qb-form wrapper already provides the card */
.qb-form .qform{background:none;box-shadow:none;padding:0;border:0}

.fld label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:7px}
.fld label span{color:var(--orange)}
.fld input,.fld select,.fld textarea{
  width:100%;padding:13px 15px;border:1.5px solid transparent;border-radius:7px;
  font-family:var(--ff);font-size:15.5px;color:var(--ink);
  background:#f1f2f5;transition:.2s;line-height:1.4;
}
.fld input::placeholder,.fld textarea::placeholder{color:#9aa0b0}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--orange);background:#fff;
  box-shadow:0 0 0 3px rgba(254,76,37,.13);
}
.fld textarea{resize:vertical;min-height:110px}
/* the native arrow renders hard against the field edge — swap it for a
   chevron and reserve room for it on the right */
.fld select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2767' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:13px 13px;
}
.fld select::-ms-expand{display:none}

/* ---------- trust strip ---------- */
.trust{background:var(--orange);color:#fff;padding:24px 0}
.trust-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.trust h3{color:#fff;margin:0;font-size:22px}
.trust p{margin:0;color:rgba(255,255,255,.9)}

/* ---------- about / stats ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-media{position:relative}
.about-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%}
.about-badge{
  position:absolute;right:-14px;bottom:-14px;background:var(--orange);color:#fff;
  border-radius:18px;padding:20px 26px;box-shadow:var(--shadow-lg);text-align:center;
}
.about-badge strong{display:block;font-size:30px;font-weight:900;line-height:1.1}
.about-badge span{font-size:13.5px;opacity:.92}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0}
.stat{background:var(--bg-soft);border-radius:var(--radius);padding:20px 16px;text-align:center;border:1px solid var(--line)}
.stat b{display:block;font-size:34px;font-weight:900;color:var(--navy);line-height:1.3;letter-spacing:-.02em}
.stat span{font-size:13.5px;font-weight:600;color:var(--body)}

/* ---------- services: split heading ---------- */
.svc-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,10px + 2.6vw,54px);align-items:center;
  margin-bottom:clamp(28px,20px + 2.1vw,48px);
}
.svc-h{
  font-size:clamp(26px,19.6px + 1.7vw,42px);line-height:1.18;margin:0;
}
.svc-h em{font-family:var(--ff-alt);font-style:italic;font-weight:700;color:var(--orange)}
.svc-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:18px;text-align:right}
.svc-head-r p{margin:0;font-size:clamp(14.5px,13.8px + .19vw,16px);max-width:44ch}
.svc-head-btn{padding:13px 22px 13px 26px;font-size:14.5px}

/* ---------- service cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,10px + 2.1vw,32px)}
.svc{
  background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(20,26,48,.07);
  display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease;
}
.svc:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(20,26,48,.16)}
.svc-img{display:block;position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--bg-soft)}
.svc-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .65s cubic-bezier(.2,.6,.3,1)}
.svc:hover .svc-img img{transform:scale(1.07)}

/* navy title band */
.svc-band{
  display:block;text-align:center;color:#fff;
  background:linear-gradient(150deg,var(--navy),#22317d);
  padding:clamp(13px,10px + .8vw,18px) 18px;transition:background .3s ease;
}
.svc:hover .svc-band{background:linear-gradient(150deg,#22317d,var(--navy))}
.svc-band strong{
  display:block;font-size:clamp(17px,14.9px + .563vw,23px);font-weight:800;
  line-height:1.35;letter-spacing:-.01em;
  /* keep it to a single line at every card width */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.svc-body{padding:clamp(18px,13px + 1.3vw,26px);display:flex;flex-direction:column;flex:1}
.svc-body p{font-size:clamp(13.8px,13.2px + .16vw,15px);margin-bottom:16px}
.svc-list{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px}
.svc-list li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:clamp(13.5px,13px + .13vw,14.8px);font-weight:600;color:var(--ink);
}
.svc-list .ic{color:var(--orange);width:15px;height:15px;margin-top:3px;flex:none}

/* call button pinned to the bottom of every card, left-aligned */
.svc-cta{margin-top:auto}
.svc-cta .cfs4-outer{width:auto;max-width:100%;padding:0;justify-content:flex-start}
.svc-cta .cfs4-pulse-wrap,.svc-cta .cfs4-btn{width:auto;max-width:100%;min-width:0}
/* tighter icon proportions — at card scale a wide panel reads as a pale blob */
.svc-cta .cfs4-icon-wrap{width:clamp(48px,41px + 1.32vw,58px)}
.svc-cta .cfs4-icon-circle{
  width:clamp(33px,29px + .75vw,41px);height:clamp(33px,29px + .75vw,41px);
  background:rgba(255,255,255,.26);
}
.svc-cta .cfs4-icon-circle svg{width:clamp(19px,17.3px + .45vw,23px);height:clamp(19px,17.3px + .45vw,23px)}
.svc-cta .cfs4-texts{padding:12px 17px 12px 14px;min-width:0}
.svc-cta .cfs4-top{font-size:clamp(10px,9.5px + .14vw,11.5px);letter-spacing:1px}
.svc-cta .cfs4-num{font-size:clamp(17px,15.6px + .37vw,21px)}
/* full 1.25x pulse — the button is 224px in a ~315px card interior,
   so the halo has room and matches the hero buttons */

/* ============================================================
   "WHY CHOOSE US" — animated illustrations
   ============================================================ */
/* solid tile; the illustration inside draws in white */
.num-art{
  display:grid;place-items:center;margin-bottom:16px;color:#fff;
  width:clamp(58px,50px + 1.6vw,70px);height:clamp(58px,50px + 1.6vw,70px);
  border-radius:17px;
  transition:transform .3s ease,box-shadow .3s ease;
}
.num:hover .num-art{transform:translateY(-3px)}
.wa{width:66%;height:66%;display:block;overflow:visible}
.wa [stroke-width]:not([stroke]){stroke:currentColor}

/* Two-tone icons: the body draws in the tile's own colour (white) while
   the accent parts pick up the opposite brand colour. --accent is set
   per card below. */
.wa-1 .wa-sweep,
.wa-2 .wa-check,
.wa-3 .l1,
.wa-4 .t4,
.wa-4 .wa-tilecheck,
.wa-5 .wa-cog-b circle,
.wa-6 .wa-radar          {stroke:var(--accent)}
.wa-2 .wa-spark,
.wa-3 .wa-tag > circle,
.wa-5 .wa-cog-b rect,
.wa-6 .wa-pin > circle   {fill:var(--accent)}

/* 01 — hands sweep the dial while the outer ring traces a fast turnaround.
   Every part shares the 32,32 centre, so nothing can drift off-axis. */
.wa-1 .wa-tick-m,.wa-1 .wa-tick-h{transform-box:view-box;transform-origin:32px 32px}
.wa-1 .wa-tick-m{animation:waMin  4.2s cubic-bezier(.35,0,.25,1) infinite}
.wa-1 .wa-tick-h{animation:waHour 4.2s cubic-bezier(.35,0,.25,1) infinite}
@keyframes waMin {0%,6%{transform:rotate(0)}78%,100%{transform:rotate(360deg)}}
@keyframes waHour{0%,6%{transform:rotate(0)}78%,100%{transform:rotate(30deg)}}
/* r=23.5 -> circumference 147.7; start at 12 o'clock */
.wa-1 .wa-sweep{
  fill:none;stroke-dasharray:147.7;stroke-dashoffset:0;
  transform-box:view-box;transform-origin:32px 32px;transform:rotate(-90deg);
  animation:waSweep 4.2s cubic-bezier(.35,0,.25,1) infinite;
}
@keyframes waSweep{
  0%,6%   {stroke-dashoffset:147.7;opacity:.9}
  78%     {stroke-dashoffset:0;opacity:.9}
  92%,100%{stroke-dashoffset:0;opacity:0}
}

/* 02 — shield draws, tick stamps, sparks pop */
.wa-2 .wa-shield{stroke-dasharray:190;stroke-dashoffset:0;
  animation:waDraw 4.2s ease-in-out infinite}
@keyframes waDraw{0%,6%{stroke-dashoffset:190}34%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:190}}
.wa-2 .wa-check{stroke-dasharray:34;stroke-dashoffset:0;
  animation:waTick 4.2s ease-in-out infinite}
@keyframes waTick{0%,36%{stroke-dashoffset:34}52%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:34}}
.wa-2 .wa-spark{animation:waSpark 4.2s ease-in-out infinite}
.wa-2 .s1{animation-delay:.15s}
.wa-2 .s2{animation-delay:.4s}
@keyframes waSpark{
  0%,52%{opacity:0;r:1}
  60%{opacity:1;r:2.6}
  78%,100%{opacity:0;r:1}
}

/* 03 — price tag swings, figures written */
.wa-3 .wa-tag{transform-box:view-box;transform-origin:9px 32px;
  animation:waSwing 4s ease-in-out infinite}
@keyframes waSwing{
  0%,100%{transform:rotate(0deg)}
  20%{transform:rotate(-8deg)}
  42%{transform:rotate(5.5deg)}
  64%{transform:rotate(-3deg)}
  82%{transform:rotate(1deg)}
}
.wa-3 .wa-line{stroke-dasharray:30;stroke-dashoffset:0;
  animation:waWrite 4s ease-in-out infinite}
.wa-3 .l1{animation-delay:.25s}
.wa-3 .l2{animation-delay:.55s}
@keyframes waWrite{0%,12%{stroke-dashoffset:30}36%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}

/* 04 — brand tiles pop in, last one confirms */
.wa-4 .wa-tile{transform-box:fill-box;transform-origin:center;
  animation:waPop 4s cubic-bezier(.3,1.5,.5,1) infinite}
.wa-4 .t1{animation-delay:0s}
.wa-4 .t2{animation-delay:.14s}
.wa-4 .t3{animation-delay:.28s}
.wa-4 .t4{animation-delay:.42s}
@keyframes waPop{
  0%,4%{opacity:0;transform:scale(.4)}
  16%{opacity:1;transform:scale(1.12)}
  24%,86%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.4)}
}
.wa-4 .wa-tilecheck{stroke-dasharray:18;stroke-dashoffset:0;
  animation:waTileTick 4s ease-in-out infinite}
@keyframes waTileTick{0%,58%{stroke-dashoffset:18}70%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:18}}

/* 05 — meshing cogs turn in opposite directions */
/* each gear spins about its own centre; position lives in the SVG */
.wa-5 .wa-cog-a{transform-box:view-box;transform-origin:24px 26px;
  animation:waCogA 9s linear infinite}
.wa-5 .wa-cog-b{transform-box:view-box;transform-origin:45px 45px;
  animation:waCogB 9s linear infinite}
@keyframes waCogA{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes waCogB{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}

/* 06 — pin drops, coverage rings sweep outward */
.wa-6 .wa-pin{transform-box:view-box;transform-origin:32px 46px;
  animation:waDrop 4s cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes waDrop{
  0%,6%{transform:translateY(-16px) scale(.86);opacity:0}
  20%{transform:translateY(0) scale(1.06);opacity:1}
  28%,88%{transform:translateY(0) scale(1);opacity:1}
  100%{transform:translateY(-16px) scale(.86);opacity:0}
}
.wa-6 .wa-radar{transform-box:view-box;transform-origin:32px 52px;
  animation:waRadar 4s cubic-bezier(.25,.6,.3,1) infinite}
.wa-6 .r1{animation-delay:.3s}
.wa-6 .r2{animation-delay:1.1s}
@keyframes waRadar{
  0%,24%{transform:scale(.3);opacity:0}
  36%{opacity:.85}
  74%,100%{transform:scale(1.9);opacity:0}
}

/* ============================================================
   SERVICE GRID — concept icons
   ============================================================ */
.sa{width:66%;height:66%;display:block;overflow:visible;color:#fff}

/* spring: coil compresses, top plate rides down with it */
.sa-spring .sa-coil{transform-box:view-box;transform-origin:32px 50px;
  animation:saCoil 2.4s cubic-bezier(.45,0,.35,1) infinite}
.sa-spring .sa-plate-t{transform-box:view-box;transform-origin:32px 50px;
  animation:saPlate 2.4s cubic-bezier(.45,0,.35,1) infinite}
@keyframes saCoil {0%,100%{transform:scaleY(1)}45%{transform:scaleY(.72)}}
@keyframes saPlate{0%,100%{transform:translateY(0)}45%{transform:translateY(9px)}}

/* opener: keys press, signal waves radiate */
.sa-opener .sa-key{transform-box:fill-box;transform-origin:center;
  animation:saKey 2.6s ease-in-out infinite}
.sa-opener .k2{animation-delay:.18s}
@keyframes saKey{0%,54%,100%{opacity:.5;transform:scale(.86)}62%{opacity:1;transform:scale(1)}}
.sa-opener .sa-wave{animation:saWave 2.6s ease-in-out infinite}
.sa-opener .w1{animation-delay:.62s}
.sa-opener .w2{animation-delay:.78s}
@keyframes saWave{0%,20%{opacity:0}40%{opacity:1}75%,100%{opacity:0}}

/* cable: pulley turns while the cable pays out */
.sa-cable .sa-pulley{transform-box:view-box;transform-origin:22px 20px;
  animation:saSpin 4s linear infinite}
@keyframes saSpin{to{transform:rotate(360deg)}}
.sa-cable .sa-cable{stroke-dasharray:8 6;animation:saPay 1.6s linear infinite}
@keyframes saPay{to{stroke-dashoffset:-14}}
.sa-cable .sa-hook{transform-box:view-box;transform-origin:50px 42px;
  animation:saHook 2.6s ease-in-out infinite}
@keyframes saHook{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* track: carriage runs the rail and back (position is in the SVG, so this
   only slides it — nothing collapses to the origin when animation is off) */
.sa-track .sa-carriage{transform-box:view-box;transform-origin:0 0;
  animation:saRoll 3.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes saRoll{0%,100%{transform:translateX(0)}50%{transform:translateX(28px)}}

/* roller: wheel spins, hinge bolts pulse */
.sa-roller .sa-wheel,.sa-roller .sa-spokes{transform-box:view-box;transform-origin:23px 34px}
.sa-roller .sa-spokes{animation:saSpin 3.4s linear infinite}
.sa-roller .sa-bolt{animation:saBolt 2.6s ease-in-out infinite}
.sa-roller .b2{animation-delay:.3s}
@keyframes saBolt{0%,100%{opacity:.45;r:2}45%{opacity:1;r:2.8}}

/* panel: sections lift in sequence */
.sa-panel .sa-pan{transform-box:fill-box;transform-origin:center;
  animation:saLift 2.8s cubic-bezier(.4,0,.3,1) infinite}
.sa-panel .p2{animation-delay:.12s}
.sa-panel .p3{animation-delay:.24s}
@keyframes saLift{
  0%,58%,100%{transform:translateY(0)}
  30%        {transform:translateY(-3.5px)}
}

/* door: shutter rolls up to reveal the opening */
.sa-door .sa-door{transform-box:view-box;transform-origin:32px 52px;
  animation:saOpen 3.6s cubic-bezier(.5,0,.3,1) infinite}
@keyframes saOpen{
  0%,16%{transform:scaleY(1)}
  46%,72%{transform:scaleY(.14)}
  100%  {transform:scaleY(1)}
}

/* check: tick draws in */
.sa-check .sa-tick{stroke-dasharray:34;stroke-dashoffset:0;
  animation:saTick 3s ease-in-out infinite}
@keyframes saTick{0%,10%{stroke-dashoffset:34}38%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:34}}

/* tools: wrench turns */
.sa-tools .sa-wrench{transform-box:view-box;transform-origin:0 0;
  animation:saTurn 3.2s ease-in-out infinite}
@keyframes saTurn{
  0%      {transform:translate(26px,24px) rotate(0deg)}
  22%     {transform:translate(26px,24px) rotate(-30deg)}
  38%     {transform:translate(26px,24px) rotate(16deg)}
  54%     {transform:translate(26px,24px) rotate(-16deg)}
  70%,100%{transform:translate(26px,24px) rotate(0deg)}
}

/* ---------- numbered feature grid ---------- */
.num-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.num{
  border:0;border-radius:var(--radius-lg);padding:32px 28px;
  position:relative;overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease;
}
.num:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(20,26,48,.13)}

/* cards alternate blue / orange; in a 3-up grid this reads as a checkerboard */
.num:nth-child(odd){background:linear-gradient(150deg,#e7edfb 0%,#f1f5fd 100%)}
.num:nth-child(odd) .num-art{background:var(--navy);--accent:#fff;
  box-shadow:0 12px 26px rgba(26,39,103,.34)}
.num:nth-child(odd) .num-n{color:var(--navy);opacity:.16}

.num:nth-child(even){background:linear-gradient(150deg,#ffe1d6 0%,#fff0eb 100%)}
.num:nth-child(even) .num-art{background:var(--orange);--accent:#fff;
  box-shadow:0 12px 26px rgba(254,76,37,.36)}
.num:nth-child(even) .num-n{color:var(--orange);opacity:.28}
.num h3{font-size:20px;margin-bottom:10px;padding-right:52px}
.num p{margin:0;font-size:15.5px}
.num-n{
  position:absolute;top:22px;right:24px;font-size:38px;font-weight:900;
  color:var(--orange);opacity:.16;line-height:1;
}

/* ============================================================
   PROCESS — connected timeline of steps
   ============================================================ */
.pr{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);
  padding-block:clamp(56px,34px + 5.9vw,108px);
}
/* soft orange bloom behind the middle step */
.pr-glow{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(720px,72vw);height:320px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(254,76,37,.13),transparent 68%);
}
.pr .sec-head h2 em{font-family:var(--ff-alt);font-style:italic;font-weight:700;color:var(--orange)}

.pr-grid{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,10px + 2.6vw,40px);
}
/* dashed connector running behind the badges */
.pr-line{
  position:absolute;left:16%;right:16%;top:74px;height:2px;z-index:0;
  background:repeating-linear-gradient(90deg,
    rgba(26,39,103,.28) 0 7px,transparent 7px 15px);
}

.pr-step{
  position:relative;z-index:1;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:clamp(26px,20px + 1.6vw,38px) clamp(18px,12px + 1.6vw,30px)
          clamp(30px,24px + 1.6vw,42px);
  box-shadow:0 14px 40px rgba(20,26,48,.07);
  overflow:hidden;
  transition:transform .32s cubic-bezier(.3,.7,.3,1),box-shadow .32s ease;
}
.pr-step:hover{transform:translateY(-8px);box-shadow:0 30px 64px rgba(20,26,48,.16)}
/* oversized ghost numeral */
.pr-ghost{
  position:absolute;right:14px;top:2px;font-size:clamp(74px,58px + 4.3vw,116px);
  font-weight:900;line-height:1;color:var(--navy);opacity:.05;
  letter-spacing:-.05em;pointer-events:none;
}

/* ---- illustration plate ---- */
.pr-art{
  position:relative;display:grid;place-items:center;margin:0 auto 20px;
  width:clamp(104px,88px + 4.3vw,132px);height:clamp(104px,88px + 4.3vw,132px);
  border-radius:26px;
  background:linear-gradient(150deg,#fff,#eef0f7);
  border:1px solid var(--line);
  box-shadow:0 14px 32px rgba(20,26,48,.10),inset 0 1px 0 #fff;
  transition:box-shadow .35s ease,transform .35s ease,border-color .35s ease;
}
.pr-step:hover .pr-art{
  transform:translateY(-3px);border-color:rgba(254,76,37,.35);
  box-shadow:0 20px 40px rgba(254,76,37,.20),inset 0 1px 0 #fff;
}
.pa{width:78%;height:78%;display:block;overflow:visible}
.pa-ink{stroke:var(--navy)}
.pa-panel{stroke:var(--navy);opacity:.45}

/* counter chip */
.pr-num{
  position:absolute;right:-6px;bottom:-6px;
  width:32px;height:32px;border-radius:50%;
  background:var(--orange);color:#fff;border:3px solid #fff;
  display:grid;place-items:center;
  font-size:12.5px;font-weight:800;font-style:normal;line-height:1;
  box-shadow:0 6px 16px rgba(254,76,37,.4);
  transition:background .35s ease;
}
.pr-step:hover .pr-num{background:var(--navy)}

/* ============ step 1: scan for faults ============ */
.pa-1 .pa-scan{
  transform-box:view-box;transform-origin:60px 60px;
  animation:paScan 3.6s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes paScan{
  0%,8%    {transform:translateY(0);   opacity:0}
  14%      {opacity:1}
  50%      {transform:translateY(38px);opacity:1}
  86%      {transform:translateY(0);   opacity:1}
  94%,100% {opacity:0}
}
.pa-1 .pa-lens{
  transform-box:view-box;transform-origin:0 0;
  animation:paLens 3.6s cubic-bezier(.45,0,.35,1) infinite;
}
@keyframes paLens{
  0%   {transform:translate(48px,66px)}
  30%  {transform:translate(46px,72px)}
  55%  {transform:translate(80px,85px)}
  80%  {transform:translate(60px,68px)}
  100% {transform:translate(48px,66px)}
}
.pa-1 .pa-dot{opacity:0;animation:paBlip 3.6s ease-in-out infinite}
.pa-1 .d1{animation-delay:.9s}
.pa-1 .d2{animation-delay:1.7s}
@keyframes paBlip{
  0%,10%  {opacity:0;r:2}
  18%     {opacity:1;r:5}
  46%     {opacity:1;r:4}
  62%,100%{opacity:0;r:2}
}

/* ============ step 2: write the quote, then approve ============ */
.pa-2 .pa-line,.pa-2 .pa-total{stroke:var(--navy)}
.pa-2 .pa-line{
  stroke-dasharray:46;stroke-dashoffset:0;
  animation:paWrite 4s ease-in-out infinite;
}
.pa-2 .l1{animation-delay:.1s}
.pa-2 .l2{animation-delay:.45s}
.pa-2 .l3{animation-delay:.8s}
.pa-2 .pa-total{
  stroke-dasharray:24;stroke-dashoffset:0;
  animation:paWrite 4s ease-in-out infinite;animation-delay:1.15s;
}
@keyframes paWrite{
  0%,6%  {stroke-dashoffset:46}
  26%    {stroke-dashoffset:0}
  84%    {stroke-dashoffset:0}
  100%   {stroke-dashoffset:46}
}
.pa-2 .pa-stamp{
  transform-box:view-box;transform-origin:88px 86px;
  animation:paStamp 4s cubic-bezier(.3,1.5,.5,1) infinite;
}
@keyframes paStamp{
  0%,42%  {transform:scale(0);opacity:0}
  52%     {transform:scale(1.16);opacity:1}
  60%     {transform:scale(1)}
  88%     {transform:scale(1);opacity:1}
  100%    {transform:scale(1);opacity:0}
}

/* ============ step 3: door lifts, wrench turns, job done ============ */
.pa-3 .pa-door{
  transform-box:view-box;transform-origin:60px 98px;
  animation:paDoor 4.2s cubic-bezier(.5,0,.3,1) infinite;
}
@keyframes paDoor{
  0%,18%  {transform:scaleY(1)}
  46%     {transform:scaleY(.12)}
  76%     {transform:scaleY(.12)}
  100%    {transform:scaleY(1)}
}
.pa-3 .pa-wrench{
  transform-box:view-box;transform-origin:0 0;
  animation:paWrench 4.2s ease-in-out infinite;
}
@keyframes paWrench{
  0%      {transform:translate(36px,74px) rotate(0deg)}
  20%     {transform:translate(36px,74px) rotate(-28deg)}
  34%     {transform:translate(36px,74px) rotate(14deg)}
  48%     {transform:translate(36px,74px) rotate(-16deg)}
  60%,100%{transform:translate(36px,74px) rotate(0deg)}
}
.pa-3 .pa-done{
  transform-box:view-box;transform-origin:92px 30px;
  animation:paDone 4.2s cubic-bezier(.3,1.5,.5,1) infinite;
}
@keyframes paDone{
  0%,50%  {transform:scale(0);opacity:0}
  60%     {transform:scale(1.18);opacity:1}
  68%     {transform:scale(1)}
  90%     {transform:scale(1);opacity:1}
  100%    {transform:scale(1);opacity:0}
}

.pr-label{
  display:block;color:var(--orange);font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px;
}
.pr-step h3{font-size:clamp(18px,16.4px + .43vw,21px);margin-bottom:10px}
.pr-step p{margin:0;font-size:clamp(14px,13.4px + .16vw,15.5px)}
/* accent bar that draws in on hover */
.pr-rule{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:0;height:4px;background:var(--orange);border-radius:4px 4px 0 0;
  transition:width .4s cubic-bezier(.3,.7,.3,1);
}
.pr-step:hover .pr-rule{width:64%}

/* ---------- process (legacy) ---------- */
.proc{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.proc-i{text-align:center;position:relative;padding:0 12px}
.proc-n{
  width:74px;height:74px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:24px;font-weight:900;margin:0 auto 20px;
  box-shadow:0 12px 30px rgba(26,39,103,.28);transition:.3s;
}
.proc-i:hover .proc-n{background:var(--orange);transform:translateY(-5px)}
.proc-i h3{font-size:20px}
.proc-i p{margin:0;font-size:15.5px}

/* ============================================================
   ABOUT — layered image composition + editorial copy column
   ============================================================ */
.ab{
  position:relative;overflow:hidden;background:#fff;
  padding-block:clamp(58px,36px + 5.9vw,110px);
}
/* faint dot field behind the artwork */
.ab-dots{
  position:absolute;left:-40px;top:8%;width:min(340px,28vw);height:60%;
  background-image:radial-gradient(rgba(26,39,103,.16) 1.4px,transparent 1.4px);
  background-size:17px 17px;opacity:.5;pointer-events:none;
}
.ab-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(40px,16px + 6.4vw,96px);align-items:center;position:relative;z-index:2;
}

/* ---- media ---- */
.ab-media{position:relative;padding-bottom:clamp(30px,18px + 3.2vw,64px)}
/* offset navy plate for depth */
.ab-plate{
  position:absolute;left:clamp(-14px,-2.6vw,-8px);top:clamp(-14px,-2.6vw,-8px);
  width:62%;height:62%;border-radius:26px;
  background:linear-gradient(150deg,var(--navy),#22317d);
  opacity:.10;
}
.ab-shot{
  position:relative;margin:0;border-radius:24px;overflow:hidden;
  box-shadow:0 30px 70px rgba(10,16,40,.26);
}
.ab-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.6,.3,1)}
.ab-media:hover .ab-shot img{transform:scale(1.04)}
/* small overlapping card */
.ab-shot-sm{
  position:absolute;right:clamp(-10px,-1.4vw,0px);bottom:0;margin:0;
  width:clamp(130px,22%,210px);border-radius:18px;overflow:hidden;
  border:5px solid #fff;box-shadow:0 20px 44px rgba(10,16,40,.28);
}
.ab-shot-sm img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
/* years-of-experience seal */
.ab-seal{
  position:absolute;left:clamp(-6px,-.8vw,0px);bottom:clamp(24px,4vw,58px);
  background:var(--orange);color:#fff;border-radius:18px;
  padding:clamp(14px,10px + 1vw,20px) clamp(16px,11px + 1.3vw,24px);
  box-shadow:0 18px 40px rgba(254,76,37,.42);
  display:flex;align-items:center;gap:12px;
}
.ab-seal strong{
  font-size:clamp(30px,23px + 1.9vw,44px);font-weight:900;line-height:1;
  letter-spacing:-.02em;
}
.ab-seal sup{font-size:.5em;vertical-align:super;margin-left:1px}
.ab-seal span{
  font-size:clamp(11.5px,10.6px + .24vw,13.5px);font-weight:600;line-height:1.3;
  opacity:.95;border-left:1px solid rgba(255,255,255,.45);padding-left:12px;
}

/* ---- copy ---- */
/* kicker with a leading rule — shared by About and the video stories */
.ab-kicker,.vs-kicker{
  display:inline-flex;align-items:center;gap:11px;color:var(--orange);
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  font-size:13px;margin-bottom:14px;
}
.ab-kicker::before,.vs-kicker::before{
  content:"";width:34px;height:2px;background:var(--orange);flex:none;
}
.ab-h{
  font-size:clamp(27px,20.4px + 1.76vw,42px);line-height:1.18;margin-bottom:16px;
}
.ab-h em{font-family:var(--ff-alt);font-style:italic;font-weight:700;color:var(--orange)}
.ab-lead{font-size:clamp(15px,14px + .27vw,17px);margin-bottom:24px}

.ab-points{
  list-style:none;padding:0;margin:0 0 30px;
  display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;
}
.ab-points li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:clamp(14px,13.3px + .19vw,15.5px);font-weight:600;color:var(--ink);
}
.ab-points .ic{color:var(--orange);width:17px;height:17px;margin-top:3px;flex:none}

/* ---- stats: raised panel, hairline dividers, orange accent rule ---- */
.ab-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-bottom:clamp(26px,20px + 1.6vw,38px);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#fff,#f8f9fc);
  box-shadow:0 14px 36px rgba(20,26,48,.07);
}
.ab-stat{
  padding:clamp(20px,15px + 1.3vw,30px) clamp(6px,3px + .8vw,12px);
  text-align:center;position:relative;transition:background .3s ease;
}
.ab-stat:hover{background:rgba(254,76,37,.035)}
.ab-stat + .ab-stat::before{
  content:"";position:absolute;left:0;top:20%;height:60%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 22%,var(--line) 78%,transparent);
}
.ab-stat b{
  display:block;font-size:clamp(27px,20.6px + 1.7vw,42px);font-weight:900;
  color:var(--navy);line-height:1.28;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.ab-stat-rule{
  display:block;width:26px;height:3px;border-radius:3px;background:var(--orange);
  margin:9px auto 10px;transition:width .35s cubic-bezier(.3,.7,.3,1);
}
.ab-stat:hover .ab-stat-rule{width:46px}
/* sized + tracked so all three labels hold a single line */
.ab-stat span{
  display:block;font-size:clamp(9.5px,9.1px + .11vw,11px);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--body);
  white-space:nowrap;
}

/* ---- CTA row ---- */
.ab-cta{display:flex;align-items:center;gap:clamp(18px,10px + 2.1vw,34px);flex-wrap:wrap}
.ab-btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 26px 15px 30px;border-radius:60px;color:#fff;font-weight:700;
  font-size:15.5px;line-height:1;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--orange),var(--orange-d));
  box-shadow:0 14px 30px rgba(254,76,37,.34);
  transition:transform .28s ease,box-shadow .28s ease;
}
/* sheen sweep on hover */
.ab-btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.34) 45%,transparent 70%);
  transform:translateX(-120%);transition:transform .65s cubic-bezier(.3,.7,.3,1);
}
.ab-btn:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(254,76,37,.44)}
.ab-btn:hover::before{transform:translateX(120%)}
.ab-btn span{position:relative;z-index:1}
.ab-btn-arrow{
  position:relative;z-index:1;width:20px;height:2px;background:#fff;border-radius:2px;
  transition:width .28s ease;
}
.ab-btn-arrow::after{
  content:"";position:absolute;right:-1px;top:50%;width:8px;height:8px;
  border-top:2px solid #fff;border-right:2px solid #fff;border-radius:1px;
  transform:translateY(-50%) rotate(45deg);
}
.ab-btn:hover .ab-btn-arrow{width:30px}

.ab-call{display:inline-flex;align-items:center;gap:14px;color:var(--ink)}
.ab-call-ic{
  width:52px;height:52px;flex:none;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:rgba(254,76,37,.11);color:var(--orange);
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
/* soft pulse ring */
.ab-call-ic::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(254,76,37,.5);
  animation:abCallPulse 2.6s cubic-bezier(.24,.6,.35,1) infinite;
}
@keyframes abCallPulse{
  0%{transform:scale(1);opacity:.7}
  70%{opacity:0}
  100%{transform:scale(1.35);opacity:0}
}
.ab-call-ic .cfs4-svg{width:23px;height:23px;display:block;position:relative;z-index:1}
.ab-call:hover .ab-call-ic{background:var(--orange);color:#fff;transform:translateY(-2px)}
.ab-call-tx{display:flex;flex-direction:column;gap:2px}
.ab-call-tx small{font-size:12.5px;color:var(--body);line-height:1.2;
  letter-spacing:.04em}
.ab-call-tx strong{font-size:clamp(16px,15px + .27vw,19px);font-weight:800;
  color:var(--navy);line-height:1.2}

/* ---------- brand logo slider ---------- */
.bs{
  position:relative;overflow:hidden;background:#fff;
  padding-block:clamp(26px,18px + 2.1vw,44px);
  border-block:1px solid var(--line);
}
.bs-track{
  display:flex;width:max-content;
  animation:bsScroll 34s linear infinite;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.bs:hover .bs-track{animation-play-state:paused}
.bs-set{display:flex;align-items:center;flex:none}
.bs-i{
  display:grid;place-items:center;flex:none;
  padding-inline:clamp(24px,14px + 2.6vw,52px);
}
.bs-i img{
  height:clamp(34px,26px + 2.1vw,52px);width:auto;object-fit:contain;
  /* logos are supplied on white — multiply drops the white box, full colour */
  mix-blend-mode:multiply;
  transition:transform .3s ease;
}
.bs-i img:hover{transform:scale(1.06)}
@keyframes bsScroll{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

/* ---------- customer video stories (copy left, players right) ---------- */
.vs{padding-block:clamp(52px,32.9px + 5.1vw,96px);background:#fff}
.vs-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,18px + 3.7vw,66px);align-items:center}
.vs-h{font-size:clamp(26px,20.5px + 1.47vw,39px);margin-bottom:16px;line-height:1.22}
.vs-h em{font-family:var(--ff-alt);font-style:italic;font-weight:700;color:var(--orange)}
.vs-copy p{font-size:clamp(14.5px,13.4px + .29vw,16px)}
.vs-cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:26px}

.vs-videos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,8px + 1.6vw,26px)}
.vs-vid{
  border-radius:16px;overflow:hidden;background:#000;
  border:2px solid var(--orange);
  box-shadow:0 0 0 5px rgba(254,76,37,.16),0 20px 44px rgba(10,16,40,.22);
}
.vs-vid video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}

/* ---------- videos / testimonials ---------- */
.vid-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:760px;margin-inline:auto}
.vid-card{border-radius:var(--radius-lg);overflow:hidden;background:#000;box-shadow:var(--shadow-lg);position:relative}
.vid-card video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;cursor:pointer}
.vid-hint{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:5px 11px;border-radius:40px;pointer-events:none}

/* ---------- testimonials: two opposing marquee rows ---------- */
.says{position:relative;display:grid;gap:clamp(16px,10px + 1.6vw,26px)}
/* Edges fade INTO the section colour with a gradient overlay.
   A mask was used here originally, but it fades to transparent, which
   made the outer cards see-through and revealed the grey behind them. */
.says::before,.says::after{
  content:"";position:absolute;top:-4px;bottom:-4px;z-index:2;
  width:clamp(48px,8vw,140px);pointer-events:none;
}
.says::before{
  left:-1px;
  background:linear-gradient(90deg,var(--bg-soft) 12%,rgba(246,247,251,0) 100%);
}
.says::after{
  right:-1px;
  background:linear-gradient(270deg,var(--bg-soft) 12%,rgba(246,247,251,0) 100%);
}
.says-row{overflow:hidden}
.says-track{
  display:flex;width:max-content;gap:clamp(16px,10px + 1.6vw,26px);
  /* room for the card shadow, which overflow:hidden would otherwise clip */
  padding-block:18px;
  animation:says-left 54s linear infinite;
}
.says-track--rev{animation:says-right 54s linear infinite}
.says:hover .says-track{animation-play-state:paused}
@keyframes says-left{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}
@keyframes says-right{
  from{transform:translate3d(-50%,0,0)}
  to  {transform:translate3d(0,0,0)}
}
.says-track .tst{
  flex:0 0 clamp(280px,24vw,372px);
  display:flex;flex-direction:column;
  /* A downward-cast shadow darkens the strip under each row, which reads
     as a background colour change between the two rows. Keep it soft and
     evenly spread so no band forms. */
  box-shadow:0 2px 14px rgba(20,26,48,.045);
}

.tst{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,18px + 1.6vw,34px);box-shadow:var(--shadow);position:relative;overflow:hidden}
/* oversized quote mark */
.tst-mark{
  position:absolute;right:18px;top:-6px;font-family:var(--ff-alt);
  font-size:96px;line-height:1;color:var(--orange);opacity:.13;pointer-events:none;
}
.tst-stars{color:#FBBD00;letter-spacing:3px;font-size:17px;margin-bottom:12px}
.tst p{font-size:16px;color:var(--body);margin-bottom:20px}
.tst-who{display:flex;align-items:center;gap:14px}
.tst-who img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.tst-who strong{display:block;color:var(--ink);font-size:16px}
.tst-who span{font-size:13.5px}

/* ---------- brands ---------- */
.brands{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:44px}
.brands img{height:52px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:.3s;mix-blend-mode:multiply}
.brands img:hover{filter:none;opacity:1}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gal a{display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;box-shadow:var(--shadow)}
.gal img{width:100%;height:100%;object-fit:cover;transition:.45s}
.gal a:hover img{transform:scale(1.07)}

/* ============================================================
   FAQ — accordion left, imagery right
   ============================================================ */
.fq{
  background:var(--bg-soft);
  padding-block:clamp(56px,34px + 5.9vw,108px);
}
.fq-in{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(34px,16px + 4.8vw,80px);align-items:center;
}
.fq-h{
  font-size:clamp(27px,20.4px + 1.76vw,42px);line-height:1.18;margin-bottom:12px;
}
.fq-h em{font-family:var(--ff-alt);font-style:italic;font-weight:700;color:var(--orange)}
.fq-lead{font-size:clamp(14.5px,13.8px + .19vw,16px);margin-bottom:26px;max-width:52ch}

/* ---- accordion ---- */
.faq{max-width:none;margin:0}
.faq-i{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  margin-bottom:11px;overflow:hidden;position:relative;
  transition:border-color .28s ease,box-shadow .28s ease,background .28s ease;
}
.faq-i:hover{border-color:rgba(254,76,37,.4)}
.faq-i[open]{
  border-color:var(--orange);
  box-shadow:0 12px 30px rgba(254,76,37,.13);
}
/* orange spine on the open item */
.faq-i[open]::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);
}
.faq-i summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:16px 18px 16px 22px;font-weight:700;color:var(--ink);
  font-size:clamp(14.5px,13.8px + .19vw,16.5px);line-height:1.4;
}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary span{flex:1}
/* plus that rotates into a cross */
.faq-ico{
  position:relative;flex:none;width:26px;height:26px;border-radius:50%;
  background:rgba(26,39,103,.07);
  transition:background .28s ease,transform .32s cubic-bezier(.3,.7,.3,1);
}
.faq-ico::before,.faq-ico::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--navy);
  border-radius:2px;transition:background .28s ease,opacity .28s ease;
}
.faq-ico::before{width:11px;height:2.2px;transform:translate(-50%,-50%)}
.faq-ico::after{width:2.2px;height:11px;transform:translate(-50%,-50%)}
.faq-i[open] .faq-ico{background:var(--orange);transform:rotate(135deg)}
.faq-i[open] .faq-ico::before,.faq-i[open] .faq-ico::after{background:#fff}
.faq-i[open] .faq-ico::after{opacity:0}

.faq-i .faq-a{
  padding:0 22px 18px 22px;
  font-size:clamp(13.8px,13.2px + .16vw,15.2px);
  animation:faqReveal .34s cubic-bezier(.3,.7,.3,1);
}
.faq-i .faq-a p{margin:0}
@keyframes faqReveal{
  from{opacity:0;transform:translateY(-7px)}
  to  {opacity:1;transform:none}
}

/* ---- imagery ---- */
.fq-media{display:grid;gap:clamp(14px,9px + 1.3vw,22px)}
.fq-media figure{
  margin:0;border-radius:18px;overflow:hidden;
  box-shadow:0 18px 44px rgba(20,26,48,.16);
}
.fq-media img{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.6,.3,1);
}
.fq-media figure:hover img{transform:scale(1.05)}

/* ---------- CTA band: photo bg, copy left, quote card right ---------- */
.cta2{position:relative;overflow:hidden;background:var(--navy-deep);
  padding-block:clamp(52px,34px + 4.8vw,94px)}
.cta2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.cta2::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(19,28,76,.90),rgba(19,28,76,.72));
}
.cta2-in{
  position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(30px,14px + 4.3vw,72px);align-items:center;
}
.cta2-h{
  color:#fff;font-size:clamp(26px,19.6px + 1.7vw,42px);line-height:1.2;
  margin-bottom:14px;
}
.cta2-h em{font-family:var(--ff-alt);font-style:italic;font-weight:700;color:var(--orange)}
.cta2-copy p{
  color:rgba(255,255,255,.9);font-size:clamp(14.5px,13.8px + .19vw,16.5px);
  margin-bottom:26px;max-width:46ch;
}
.cta2-copy .cfs4-outer{justify-content:flex-start;padding:0}

.cta2-card{
  background:#fff;border-radius:20px;
  padding:clamp(24px,16px + 2.1vw,42px) clamp(20px,11px + 2.4vw,44px)
          clamp(26px,19px + 1.9vw,42px);
  box-shadow:0 30px 70px rgba(10,16,40,.3);
}
.cta2-card .qform{background:none;box-shadow:none;padding:0;border:0}
/* submit sits centred in this card */
.cta2-card .qform-btn{display:block;margin:26px auto 0}

/* ---------- legacy CTA band ---------- */
.cta{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:rgba(254,76,37,.16)}
.cta-in{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding-block:82px}
.cta h2{color:#fff;font-size:clamp(25px,19.4px + 1.5vw,38px)}
.cta p{color:rgba(255,255,255,.85);font-size:17px}
.cta-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:26px}

/* ---------- page hero (inner pages) ---------- */
.phero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(19,28,76,.95),rgba(19,28,76,.72));z-index:1}
.phero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero-in{position:relative;z-index:2;padding:70px 0 76px;max-width:820px}
.phero h1{color:#fff;font-size:clamp(26px,17.6px + 2.24vw,44px);margin-bottom:14px}
.phero p{color:rgba(255,255,255,.88);font-size:17.5px;margin:0}
.crumb{font-size:14px;color:rgba(255,255,255,.7);margin-bottom:14px}
.crumb a:hover{color:var(--orange)}
.crumb span{opacity:.55;margin:0 7px}

/* ============================================================
   SERVICE PAGE — conversion blocks
   ============================================================ */

/* ---- trust bar under the hero ---- */
.tb{background:linear-gradient(100deg,var(--orange) 0%,#e8431c 34%,#2b3a86 78%,var(--navy) 100%);color:#fff}
.tb-in{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,8px + 1.6vw,28px);
  padding-block:clamp(13px,10px + .8vw,18px);
}
.tb-i{display:flex;align-items:center;gap:11px}
.tb-ic{
  width:clamp(34px,30px + .9vw,40px);height:clamp(34px,30px + .9vw,40px);
  flex:none;border-radius:11px;
  /* white tile, navy artwork — the icons draw with currentColor */
  background:#fff;color:var(--navy);--accent:var(--navy);
  display:grid;place-items:center;
  box-shadow:0 8px 20px rgba(12,18,46,.22);
  transition:transform .3s ease;
}
.tb-i:hover .tb-ic{transform:translateY(-3px)}
/* the illustrations are drawn for a larger plate — scale them up in here */
.tb-ic .wa{width:74%;height:74%}
.tb-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.tb-tx strong{
  font-size:clamp(13.5px,12.9px + .16vw,15.5px);font-weight:800;line-height:1.2;
}
/* description is sized to hold one line; ellipsis is a safety net only */
.tb-tx small{
  font-size:clamp(11.5px,11.1px + .11vw,12.5px);line-height:1.25;
  color:rgba(255,255,255,.88);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---- symptom checklist ---- */
.sy{background:#fff;padding-block:clamp(52px,32px + 5.3vw,96px)}
.sy-head{max-width:760px;margin:0 auto clamp(26px,20px + 1.6vw,38px);text-align:center}
.sy-head .ab-kicker{justify-content:center}
.sy-h{font-size:clamp(25px,19.6px + 1.44vw,38px);line-height:1.2;margin-bottom:12px}
.sy-h em{font-family:var(--ff-alt);font-style:italic;font-weight:700;color:var(--orange)}
.sy-head p{margin:0;font-size:clamp(14.5px,13.8px + .19vw,16px)}
.sy-list{
  list-style:none;padding:0;margin:0 0 clamp(26px,20px + 1.6vw,36px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,8px + 1vw,18px);
}
.sy-i{position:relative}
.sy-i > a{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:16px;overflow:hidden;position:relative;
  background:linear-gradient(150deg,#fff 0%,#f7f8fc 100%);
  border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(20,26,48,.06);
  transition:transform .3s cubic-bezier(.3,.7,.3,1),box-shadow .3s ease,border-color .3s ease;
}
/* orange spine that grows on hover */
.sy-i > a::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:0;background:var(--orange);border-radius:0 3px 3px 0;
  transition:height .32s cubic-bezier(.3,.7,.3,1);
}
.sy-i > a:hover{
  transform:translateY(-4px);border-color:rgba(254,76,37,.4);
  box-shadow:0 20px 40px rgba(20,26,48,.14);
}
.sy-i > a:hover::before{height:62%}

.sy-ic{
  width:clamp(40px,34px + 1.3vw,46px);height:clamp(40px,34px + 1.3vw,46px);
  flex:none;border-radius:13px;display:grid;place-items:center;
  background:var(--navy);color:#fff;
  box-shadow:0 8px 18px rgba(26,39,103,.28);
  transition:background .3s ease,box-shadow .3s ease,transform .3s ease;
}
.sy-ic .sa{width:74%;height:74%}
.sy-i > a:hover .sy-ic{
  background:var(--orange);box-shadow:0 10px 22px rgba(254,76,37,.4);
  transform:scale(1.05);
}
.sy-t{
  flex:1;min-width:0;font-weight:700;color:var(--ink);
  font-size:clamp(14px,13.3px + .19vw,15.5px);line-height:1.3;
}
/* chevron that slides in on hover */
.sy-go{
  width:9px;height:9px;flex:none;
  border-top:2.2px solid var(--orange);border-right:2.2px solid var(--orange);
  transform:rotate(45deg) translateX(-3px);opacity:0;
  transition:opacity .28s ease,transform .3s ease;
}
.sy-i > a:hover .sy-go{opacity:1;transform:rotate(45deg) translateX(0)}
.sy-foot{display:flex;justify-content:center}
.sy-call{
  display:inline-flex;align-items:center;gap:14px;color:var(--ink);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:60px;
  padding:12px 26px 12px 12px;transition:border-color .25s ease,transform .25s ease;
}
.sy-call:hover{border-color:var(--orange);transform:translateY(-2px)}
.sy-call-ic{
  width:44px;height:44px;flex:none;border-radius:50%;
  background:var(--orange);color:#fff;display:grid;place-items:center;
}
.sy-call-ic .cfs4-svg{width:21px;height:21px;display:block}
.sy-call small{display:block;font-size:12.5px;color:var(--body);line-height:1.3}
.sy-call strong{font-size:clamp(14.5px,13.8px + .19vw,16px);color:var(--navy)}

/* ---- booking panel ---- */
.bk{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(150deg,var(--navy-deep) 0%,var(--navy) 55%,#22317d 100%);
  padding-block:clamp(52px,32px + 5.3vw,96px);
}
/* photo sits under a navy wash so the copy keeps its contrast */
.bk-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.26;
}
.bk::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(15,22,60,.94) 0%,rgba(19,28,76,.86) 44%,rgba(26,39,103,.66) 100%);
}
.bk-glow{
  position:absolute;right:-120px;top:-90px;width:420px;height:420px;z-index:1;
  border-radius:50%;background:radial-gradient(circle,rgba(254,76,37,.34),transparent 68%);
  pointer-events:none;
}
.bk-in{
  position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,16px + 4.3vw,72px);align-items:center;
}
.bk-h{color:#fff;font-size:clamp(26px,19.6px + 1.7vw,40px);line-height:1.2;margin-bottom:14px}
.bk-h em{font-family:var(--ff-alt);font-style:italic;font-weight:700;color:var(--orange)}
.bk-lead{color:rgba(255,255,255,.86);font-size:clamp(14.5px,13.8px + .19vw,16.5px);
  margin-bottom:24px;max-width:52ch}
.bk-chips{
  list-style:none;padding:0;margin:0 0 26px;
  display:grid;grid-template-columns:1fr 1fr;gap:11px 20px;
}
.bk-chips li{display:flex;align-items:center;gap:10px;font-weight:600;
  font-size:clamp(13.8px,13.2px + .16vw,15px)}
.bk-chips .ic{color:var(--orange);width:16px;height:16px;flex:none}
.bk-proof{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
  padding-block:16px;margin-bottom:24px;
}
.bk-stars{color:#FBBD00;letter-spacing:3px;font-size:17px}
.bk-proof p{margin:0;font-size:14px;color:rgba(255,255,255,.82)}
.bk-proof strong{color:#fff}
.bk-or{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bk-or > span{font-size:14px;color:rgba(255,255,255,.7)}
.bk-or .cfs4-outer{padding:0}

.bk-card{
  background:#fff;border-radius:20px;
  padding:clamp(24px,16px + 2.1vw,42px) clamp(20px,11px + 2.4vw,44px)
          clamp(26px,19px + 1.9vw,42px);
  box-shadow:0 30px 70px rgba(6,10,30,.42);
}
.bk-card .qform{background:none;box-shadow:none;padding:0;border:0}
.bk-card .qform-btn{display:block;width:100%;margin-top:24px}

/* ---- other services: image cards ---- */
.os{background:#fff;padding-block:clamp(52px,32px + 5.3vw,96px)}
.os-h{font-size:clamp(25px,19.6px + 1.44vw,38px);line-height:1.2;margin-bottom:12px}
.os-h em{font-family:var(--ff-alt);font-style:italic;font-weight:700;color:var(--orange)}
.os-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,7px + 1.3vw,20px);
}
.os-card{
  position:relative;display:block;overflow:hidden;border-radius:18px;
  aspect-ratio:3/4;box-shadow:0 12px 30px rgba(20,26,48,.12);
  transition:transform .35s cubic-bezier(.3,.7,.3,1),box-shadow .35s ease;
}
.os-card:hover{transform:translateY(-7px);box-shadow:0 28px 56px rgba(20,26,48,.24)}
.os-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.6,.3,1);
}
.os-card:hover img{transform:scale(1.09)}
/* navy veil so the label always reads, deepening toward the base */
.os-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(15,22,60,.10) 0%,rgba(15,22,60,.42) 46%,rgba(12,18,46,.92) 100%);
  transition:background .35s ease;
}
.os-card:hover .os-veil{
  background:linear-gradient(180deg,
    rgba(254,76,37,.18) 0%,rgba(19,28,76,.55) 46%,rgba(12,18,46,.94) 100%);
}
.os-body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  padding:clamp(14px,10px + 1vw,20px);
}
.os-body strong{
  color:#fff;font-size:clamp(13.5px,12.9px + .16vw,15.5px);font-weight:800;
  line-height:1.3;text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.os-go{
  width:clamp(28px,24px + .8vw,32px);height:clamp(28px,24px + .8vw,32px);
  flex:none;border-radius:50%;position:relative;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  transition:background .3s ease,border-color .3s ease,transform .3s ease;
}
.os-go::before{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  border-top:2px solid #fff;border-right:2px solid #fff;
  transform:translate(-60%,-50%) rotate(45deg);
}
.os-card:hover .os-go{
  background:var(--orange);border-color:var(--orange);transform:translateX(3px);
}

/* ============================================================
   SERVICE LEAD — editorial copy left, framed imagery right
   ============================================================ */
.ls{
  position:relative;overflow:hidden;background:#fff;
  padding-block:clamp(56px,34px + 5.9vw,108px);
}
.ls-dots{
  position:absolute;right:-30px;bottom:6%;width:min(300px,26vw);height:54%;
  background-image:radial-gradient(rgba(26,39,103,.15) 1.4px,transparent 1.4px);
  background-size:17px 17px;opacity:.45;pointer-events:none;
}
.ls-in{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(36px,16px + 5.3vw,88px);align-items:center;position:relative;z-index:2;
}
.ls-h{
  font-size:clamp(26px,19.6px + 1.7vw,40px);line-height:1.2;margin-bottom:16px;
}
.ls-h em{font-family:var(--ff-alt);font-style:italic;font-weight:700;color:var(--orange)}
.ls-p{font-size:clamp(14.5px,13.8px + .19vw,16px)}

.ls-points{
  list-style:none;padding:0;margin:26px 0 30px;
  display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;
  border-top:1px solid var(--line);padding-top:26px;
}
.ls-points li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:clamp(14px,13.3px + .19vw,15.5px);font-weight:600;color:var(--ink);
}
.ls-points .ic{color:var(--orange);width:17px;height:17px;margin-top:3px;flex:none}

.ls-cta{display:flex;align-items:center;gap:clamp(16px,8px + 2.1vw,32px);flex-wrap:wrap}
.ls-cta .cfs4-outer{padding:0;justify-content:flex-start}
.ls-link{
  display:inline-flex;align-items:center;gap:11px;
  font-weight:700;font-size:15.5px;color:var(--navy);
  padding-bottom:3px;border-bottom:2px solid rgba(26,39,103,.22);
  transition:color .25s ease,border-color .25s ease,gap .25s ease;
}
.ls-link .ab-btn-arrow{background:var(--navy);transition:background .25s ease,width .25s ease}
.ls-link .ab-btn-arrow::after{border-color:var(--navy)}
.ls-link:hover{color:var(--orange);border-color:var(--orange);gap:15px}
.ls-link:hover .ab-btn-arrow{background:var(--orange)}
.ls-link:hover .ab-btn-arrow::after{border-color:var(--orange)}

/* ---- framed imagery ---- */
.ls-media{position:relative;padding:0 0 clamp(26px,16px + 2.7vw,52px) clamp(0px,2vw,28px)}
/* outlined frame offset behind the photo */
.ls-frame{
  position:absolute;left:0;top:clamp(20px,3.2vw,44px);
  width:clamp(150px,34%,260px);height:64%;
  border:2px solid var(--orange);border-radius:22px;opacity:.5;
}
.ls-shot{
  position:relative;margin:0;border-radius:22px;overflow:hidden;
  box-shadow:0 30px 70px rgba(10,16,40,.26);
}
.ls-shot img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.6,.3,1);
}
.ls-media:hover .ls-shot img{transform:scale(1.05)}
/* floating contact chip */
.ls-badge{
  position:absolute;left:clamp(-6px,-.8vw,0px);bottom:0;
  display:inline-flex;align-items:center;gap:13px;
  background:#fff;border-radius:16px;padding:14px 20px 14px 14px;
  box-shadow:0 20px 44px rgba(10,16,40,.24);
}
.ls-badge-ic{
  width:44px;height:44px;flex:none;border-radius:50%;
  background:var(--orange);color:#fff;display:grid;place-items:center;
}
.ls-badge-ic .cfs4-svg{width:21px;height:21px;display:block}
.ls-badge-tx{display:flex;flex-direction:column;gap:2px}
.ls-badge-tx small{font-size:12px;color:var(--body);letter-spacing:.04em}
.ls-badge-tx strong{font-size:15.5px;color:var(--navy);font-weight:800}

/* ---------- lead split (legacy) ---------- */
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.lead-grid img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%}

/* ---------- contact ---------- */
.ct-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:56px}
.ct-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;text-align:center;box-shadow:var(--shadow);transition:.28s}
.ct-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.ct-ic{width:58px;height:58px;border-radius:50%;background:rgba(254,76,37,.11);color:var(--orange);display:grid;place-items:center;margin:0 auto 16px;font-size:24px}
.ct-card h3{font-size:19px;margin-bottom:8px}
.ct-card p{margin:0;font-size:15.5px;word-break:break-word}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

/* ============================================================
   SERVICE AREAS — tabbed city finder
   ============================================================ */
.ar{background:var(--bg-soft);padding-block:clamp(52px,32px + 5.3vw,96px)}
.ar-h{font-size:clamp(25px,19.6px + 1.44vw,38px);line-height:1.2;margin-bottom:12px}
.ar-h em{font-family:var(--ff-alt);font-style:italic;font-weight:700;color:var(--orange)}

.ar-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,8px + 1.6vw,26px);flex-wrap:wrap;
  margin-bottom:clamp(22px,16px + 1.6vw,32px);
}
.ar-tabs{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.ar-tab{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:40px;padding:9px 18px;cursor:pointer;
  font-size:clamp(13px,12.6px + .11vw,14px);font-weight:700;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.ar-tab:hover{border-color:var(--orange);color:var(--orange)}
.ar-tab.is-on{
  background:var(--navy);border-color:var(--navy);color:#fff;
  box-shadow:0 10px 22px rgba(26,39,103,.26);
}

.ar-search{
  position:relative;display:flex;align-items:center;
  flex:0 0 clamp(200px,26vw,300px);
}
.ar-search-ic{
  position:absolute;left:16px;width:16px;height:16px;pointer-events:none;
  border:2px solid var(--body);border-radius:50%;opacity:.55;
}
.ar-search-ic::after{
  content:"";position:absolute;right:-5px;bottom:-4px;width:7px;height:2px;
  background:var(--body);border-radius:2px;transform:rotate(45deg);
}
.ar-search input{
  width:100%;padding:12px 16px 12px 42px;border-radius:40px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-family:var(--ff);font-size:14.5px;transition:.2s;
}
.ar-search input:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(254,76,37,.13);
}

.ar-empty{
  text-align:center;font-weight:600;color:var(--body);
  background:#fff;border:1px dashed var(--line);border-radius:14px;
  padding:22px;margin:0 0 20px;
}

.ar-panel{display:none;grid-template-columns:repeat(4,1fr);gap:clamp(10px,6px + 1vw,16px)}
.ar-panel.is-on{display:grid}
.ar-city{
  display:flex;align-items:center;gap:11px;
  background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:12px 14px;overflow:hidden;position:relative;
  transition:transform .28s cubic-bezier(.3,.7,.3,1),box-shadow .28s ease,border-color .28s ease;
}
.ar-city:hover{
  transform:translateY(-3px);border-color:rgba(254,76,37,.42);
  box-shadow:0 14px 28px rgba(20,26,48,.12);
}
.ar-pin{
  position:relative;isolation:isolate;
  width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:rgba(26,39,103,.08);color:var(--navy);
  transition:background .28s ease,color .28s ease;
}
.ar-pin svg{width:16px;height:16px;transform-origin:50% 100%}
.ar-city:hover .ar-pin{background:var(--orange);color:#fff}

/* No idle animation: 54 pins drifting at once reads as noise, however
   it's staggered. Motion happens on intent instead.

   Hover — the pin drops in with a little overshoot and a ripple
   leaves the base, the way a map marker lands. */
.ar-city:hover .ar-pin svg{animation:arDrop .62s cubic-bezier(.3,1.5,.5,1)}
@keyframes arDrop{
  0%  {transform:translateY(-9px) scale(.86)}
  50% {transform:translateY(1.5px) scale(1.1)}
  72% {transform:translateY(-1px)  scale(.98)}
  100%{transform:translateY(0)     scale(1)}
}
.ar-pin::after{
  content:"";position:absolute;left:50%;top:62%;z-index:-1;
  width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  border:2px solid var(--orange);opacity:0;
}
.ar-city:hover .ar-pin::after{animation:arRipple .72s cubic-bezier(.25,.6,.3,1)}
@keyframes arRipple{
  0%  {transform:scale(.4);opacity:.85}
  100%{transform:scale(2.6);opacity:0}
}
.ar-name{
  flex:1;min-width:0;font-weight:700;color:var(--ink);
  font-size:clamp(13.5px,13.1px + .11vw,14.8px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ar-go{
  width:8px;height:8px;flex:none;
  border-top:2px solid var(--orange);border-right:2px solid var(--orange);
  transform:rotate(45deg) translateX(-3px);opacity:0;
  transition:opacity .25s ease,transform .28s ease;
}
.ar-city:hover .ar-go{opacity:1;transform:rotate(45deg) translateX(0)}

/* ---------- service areas (legacy list) ---------- */
.area-svc{margin-bottom:52px}
.area-svc h3{font-size:22px;margin-bottom:6px}
.area-svc>p{margin-bottom:20px}
.area-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 18px;list-style:none;padding:0;margin:0}
.area-list a{
  display:block;padding:9px 14px;background:#fff;border:1px solid var(--line);border-radius:9px;
  font-size:14.5px;font-weight:600;color:var(--ink);transition:.2s;
}
.area-list a:hover{border-color:var(--orange);color:var(--orange);transform:translateX(3px)}
.near{display:flex;flex-wrap:wrap;gap:10px}
.near a{padding:8px 15px;background:#fff;border:1px solid var(--line);border-radius:40px;font-size:14px;font-weight:600;color:var(--ink);transition:.2s}
.near a:hover{background:var(--orange);border-color:var(--orange);color:#fff}



/* emergency: the triangle breathes, the mark blinks just behind it */
.sa-alert .sa-alert-tri{transform-box:view-box;transform-origin:32px 38px;
  animation:saAlertPulse 2.2s ease-in-out infinite}
@keyframes saAlertPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
.sa-alert .sa-alert-bar,.sa-alert .sa-alert-dot{animation:saAlertBlink 1.7s ease-in-out infinite}
.sa-alert .sa-alert-dot{animation-delay:.13s}
@keyframes saAlertBlink{0%,48%,100%{opacity:1}62%,78%{opacity:.22}}

/* ---------- service page: every city for this service ---------- */
.sc-areas .sec-head{margin-bottom:clamp(24px,18px + 1.6vw,38px)}
.sc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,6px + 1vw,16px)}
/* the city you are already on — flat, not a link */
.sc-grid .ar-city.is-here{
  background:var(--navy);border-color:var(--navy);cursor:default;
}
.sc-grid .ar-city.is-here .ar-name{color:#fff}
.sc-grid .ar-city.is-here .ar-pin{background:rgba(255,255,255,.16);color:#fff}
.sc-grid .ar-city.is-here .ar-go{display:none}
.sc-foot{margin-top:clamp(24px,18px + 1.6vw,36px);display:flex;justify-content:center}


/* ============================================================
   THANK-YOU PAGE
   ============================================================ */
.ty{position:relative;overflow:hidden;background:var(--bg-soft);
  padding-block:clamp(54px,38px + 4.3vw,92px)}
.ty-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.10}
.ty::before{content:"";position:absolute;inset:0;background:rgba(246,247,251,.6)}
.ty-in{position:relative;z-index:2}

.ty-head{text-align:center;max-width:660px;margin:0 auto clamp(34px,26px + 2.1vw,52px)}
/* success seal — ring sweeps round, then the tick strokes in */
.ty-seal{display:grid;place-items:center;width:86px;height:86px;margin:0 auto 20px;
  border-radius:50%;background:#fff;color:var(--orange);
  box-shadow:0 18px 44px rgba(254,76,37,.22);border:1px solid rgba(254,76,37,.2)}
.ty-seal-svg{width:52px;height:52px;display:block;overflow:visible}
.ty-seal-ring{stroke-dasharray:158;stroke-dashoffset:158;
  transform-box:view-box;transform-origin:32px 32px;transform:rotate(-90deg);
  animation:tySealRing .85s cubic-bezier(.4,0,.2,1) .1s forwards}
@keyframes tySealRing{to{stroke-dashoffset:0}}
.ty-seal-tick{stroke-dasharray:44;stroke-dashoffset:44;
  animation:tySealTick .45s cubic-bezier(.4,0,.2,1) .72s forwards}
@keyframes tySealTick{to{stroke-dashoffset:0}}
.ty-h{font-size:clamp(27px,20.4px + 1.76vw,42px);line-height:1.18;margin:0 0 12px}
.ty-h em{font-family:var(--ff-alt);font-style:italic;font-weight:700;color:var(--orange)}
.ty-lead{margin:0;font-size:clamp(14.6px,13.9px + .19vw,16.2px);color:var(--body)}

/* three steps, joined by a dashed run behind the numerals */
.ty-steps{position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,12px + 1.6vw,30px)}
.ty-steps::before{content:"";position:absolute;left:17%;right:17%;top:62px;height:2px;z-index:0;
  background:repeating-linear-gradient(90deg,rgba(26,39,103,.26) 0 7px,transparent 7px 15px)}
.ty-step{position:relative;z-index:1;background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:clamp(24px,18px + 1.6vw,34px) clamp(18px,13px + 1.3vw,26px) clamp(26px,20px + 1.6vw,34px);
  text-align:center;box-shadow:0 14px 40px rgba(20,26,48,.07);
  transition:transform .32s cubic-bezier(.3,.7,.3,1),box-shadow .32s ease}
.ty-step:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(20,26,48,.14)}
.ty-step-n{position:absolute;top:14px;right:18px;font-size:clamp(34px,26px + 2.1vw,52px);
  font-weight:900;color:rgba(26,39,103,.07);line-height:1;letter-spacing:-.02em}
.ty-step-ic{position:relative;display:grid;place-items:center;width:74px;height:74px;
  margin:0 auto 16px;border-radius:22px;background:var(--navy);color:#fff}
.ty-step-ic .sa{width:38px;height:38px;color:#fff}
.ty-step-ic .cfs4-svg{width:34px;height:34px;display:block}
.ty-step h3{font-size:clamp(17px,15.8px + .32vw,19.5px);margin:0 0 8px;line-height:1.25}
.ty-step p{margin:0;font-size:clamp(13.8px,13.2px + .16vw,15px);color:var(--body)}

/* urgent band */
.ty-urgent{margin-top:clamp(28px,22px + 1.6vw,42px);
  background:var(--navy);border-radius:22px;color:#fff;overflow:hidden;
  padding:clamp(22px,17px + 1.3vw,30px) clamp(22px,15px + 1.85vw,36px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ty-urgent-k{display:inline-flex;align-items:center;gap:10px;color:var(--orange);
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;font-size:12px}
.ty-urgent-k::before{content:"";width:28px;height:2px;background:var(--orange)}
.ty-urgent-h{margin:8px 0 0;font-size:clamp(16.5px,15px + .4vw,20px);font-weight:700;line-height:1.35;max-width:44ch}
.ty-urgent-cta .cfs4-outer{padding:0}

/* three quiet onward links */
.ty-links{margin-top:clamp(22px,18px + 1.1vw,32px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,7px + .8vw,16px)}
.ty-link{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line);
  border-radius:15px;padding:16px 18px;transition:border-color .26s ease,transform .26s cubic-bezier(.3,.7,.3,1)}
.ty-link:hover{border-color:rgba(254,76,37,.45);transform:translateY(-3px)}
.ty-link strong{font-size:15.4px;color:var(--ink);font-weight:800}
.ty-link small{font-size:12.8px;color:var(--body)}


/* ---------- local conditions (location pages) ---------- */
.lf{background:var(--bg-soft);padding-block:clamp(48px,34px + 3.7vw,84px)}
.lf-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(26px,18px + 2.1vw,52px);align-items:start}
.lf-h{font-size:clamp(25px,19.6px + 1.44vw,38px);line-height:1.2;margin:0 0 16px}
.lf-h em{font-family:var(--ff-alt);font-style:italic;font-weight:700;color:var(--orange)}
.lf-copy p{margin:0 0 14px;font-size:clamp(14.6px,13.9px + .19vw,16.2px);color:var(--body)}
.lf-copy p:last-child{margin-bottom:0}
.lf-facts{display:grid;gap:10px}
.lf-fact{background:#fff;border:1px solid var(--line);border-radius:15px;
  padding:15px 18px;display:flex;flex-direction:column;gap:3px;
  transition:border-color .26s ease,transform .26s cubic-bezier(.3,.7,.3,1)}
.lf-fact:hover{border-color:rgba(254,76,37,.42);transform:translateY(-2px)}
.lf-fact-k{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.lf-fact-v{font-size:15.2px;font-weight:700;color:var(--ink);line-height:1.3}


/* ============================================================
   BLOG POST
   ============================================================ */
/* hero: orange -> blue, sized for an article rather than a landing page.
   .hero-full is 100dvh with padding tuned for the home hero's big logo —
   inherited here it left enormous gaps around three short lines. */
.ph{background:#141C4A;min-height:0}
.hero-full.ph{min-height:0}
.ph .hero-in{
  /* .hero-full .hero-in is a grid with row-gap:56px, which is right for the
     home hero and far too airy for an article header — it was adding ~180px
     between the breadcrumb and the H1. Block flow here; the children carry
     their own margins. */
  display:block;row-gap:0;
  padding-block:clamp(126px,110px + 3.2vw,158px) clamp(48px,38px + 2.7vw,74px);
  max-width:var(--wrap);
}
/* Orange as a corner light over a navy ground, not an orange-to-navy sweep.
   Blending those two hues across the whole panel runs through a muddy
   purple-brown in the middle, which is what looked wrong. */
.ph-grad{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(115% 95% at 2% 0%, #FF5A2C 0%, rgba(255,90,44,.72) 26%, rgba(255,90,44,0) 62%),
    linear-gradient(135deg,#2A3679 0%,#1A2767 46%,#111845 100%)}
/* a couple of soft pools so it reads as lit, not flat */
.ph-mesh{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(45% 55% at 88% 8%, rgba(255,255,255,.14) 0%, transparent 62%),
    radial-gradient(60% 70% at 72% 92%, rgba(10,15,45,.55) 0%, transparent 60%)}
.ph .hero-in{position:relative;z-index:2}
.ph h1{margin:10px 0 14px;max-width:20ch}
.ph .hero-lead{max-width:58ch;margin:0}
.ph .hero-crumb{margin-bottom:18px}
/* the separators had no side spacing, so it read "Home/ Blog/Storm Prep" */
.hero-crumb span{margin:0 9px;opacity:.55}
.hero-crumb a{text-decoration:none}
.hero-crumb a:hover{color:var(--orange)}
.ph-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:22px}
.ph-meta-i{font-size:13.6px;color:rgba(255,255,255,.86);font-weight:600}
.ph-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.45)}

/* read-next cards */
.rn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,12px + 1.1vw,24px)}
.rn-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 14px 40px rgba(20,26,48,.07);
  transition:transform .32s cubic-bezier(.3,.7,.3,1),box-shadow .32s ease,border-color .32s ease}
.rn-card:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(20,26,48,.15);
  border-color:rgba(254,76,37,.35)}
.rn-img{position:relative;display:block;aspect-ratio:1200/630;overflow:hidden;background:var(--navy)}
.rn-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.rn-card:hover .rn-img img{transform:scale(1.05)}
.rn-tag{position:absolute;left:13px;top:13px;background:var(--orange);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:30px}
.rn-body{padding:20px;display:flex;flex-direction:column;flex:1}
.rn-meta{font-size:12.2px;font-weight:700;color:var(--body);opacity:.85;margin-bottom:9px}
.rn-card h3{font-size:16.8px;line-height:1.32;margin:0 0 9px}
.rn-card h3 a{color:var(--ink)}
.rn-card:hover h3 a{color:var(--orange)}
.rn-card p{margin:0 0 14px;font-size:13.8px;color:var(--body);flex:1}

/* article + sidebar */
.art{padding-block:clamp(48px,34px + 3.7vw,86px)}
.art-in{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,20px + 2.1vw,54px);align-items:start}
.art-body{max-width:72ch;font-size:clamp(15.4px,14.7px + .19vw,17px);line-height:1.78;color:var(--body)}
.art-body h2{font-size:clamp(21px,17.6px + .91vw,29px);line-height:1.25;color:var(--ink);margin:34px 0 12px}
.art-body h2:first-child{margin-top:0}
.art-body h3{font-size:clamp(17.5px,16.3px + .32vw,20px);color:var(--ink);margin:26px 0 10px}
.art-body p{margin:0 0 16px}
.art-body strong{color:var(--ink)}
.art-body ol,.art-body ul{margin:0 0 18px;padding-left:22px}
.art-body li{margin-bottom:9px}
.art-body a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
/* The CTA button and the related-service panel live inside .art-body, so the
   prose link rule above was underlining the phone number and recolouring the
   button text on hover. Exclude the components; prose links keep the style. */
.art-body .cfs4-btn,
.art-body .cfs4-btn:hover,
.art-body .cfs4-btn *,
.art-body .art-svc a,
.art-body .art-svc a:hover{
  text-decoration:none;
}
.art-body .cfs4-btn .cfs4-num,
.art-body .cfs4-btn .cfs4-top{color:#fff}

/* data table */
.art-tw{overflow-x:auto;margin:0 0 22px;border-radius:16px;border:1px solid var(--line);background:#fff}
.art-table{width:100%;border-collapse:collapse;font-size:14.6px;min-width:440px}
.art-table caption{caption-side:top;text-align:left;padding:15px 18px 12px;
  font-size:12.4px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.art-table th{background:var(--navy);color:#fff;text-align:left;padding:12px 16px;font-weight:700;font-size:13.6px}
.art-table td{padding:12px 16px;border-top:1px solid var(--line);color:var(--body)}
.art-table tbody tr:nth-child(even) td{background:var(--bg-soft)}
.art-table td:first-child{font-weight:700;color:var(--ink)}

/* pull quote */
.art-quote{margin:26px 0;padding:24px 26px 22px;border-radius:18px;position:relative;
  background:linear-gradient(150deg,#e7edfb 0%,#f1f5fd 100%);border-left:4px solid var(--orange)}
.art-quote p{margin:0 0 10px;font-size:clamp(16.5px,15.4px + .29vw,19px);line-height:1.5;
  font-weight:700;color:var(--ink)}
.art-quote cite{font-style:normal;font-size:12.6px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange)}

/* key-points box */
.art-key{margin:26px 0;padding:24px 26px;border-radius:18px;background:var(--navy);color:#fff}
.art-key h3{margin:0 0 12px;color:#fff;font-size:18px}
.art-key ul{margin:0;padding-left:20px}
.art-key li{margin-bottom:9px;color:rgba(255,255,255,.86);font-size:15px}
.art-key li::marker{color:var(--orange)}

/* inline contextual links inside article prose */
.art-ilink{color:var(--orange);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:2px;
  text-decoration-color:rgba(254,76,37,.4);transition:text-decoration-color .22s ease}
.art-ilink:hover{text-decoration-color:var(--orange)}

/* contextual link to the matching service page */
.art-svc{margin:26px 0;padding:20px 22px;border-radius:18px;display:flex;align-items:center;gap:16px;
  background:linear-gradient(150deg,#ffe1d6 0%,#fff0eb 100%);border:1px solid rgba(254,76,37,.28)}
.art-svc-ic{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:var(--orange);color:#fff;box-shadow:0 10px 22px rgba(254,76,37,.34)}
.art-svc-ic .sa{width:26px;height:26px;color:#fff}
.art-svc-tx{min-width:0}
.art-svc-tx small{display:block;font-size:11.6px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--orange);margin-bottom:3px}
.art-svc-tx a{font-size:16px;font-weight:800;color:var(--ink);text-decoration:none;line-height:1.3}
.art-svc-tx a:hover{color:var(--orange)}

/* in-article CTA */
.art-cta{margin-top:34px;padding:24px 26px;border-radius:20px;background:var(--bg-soft);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.art-cta-h{margin:6px 0 0;font-size:clamp(17px,15.8px + .32vw,20px);font-weight:800;color:var(--ink);max-width:34ch}
.art-cta .cfs4-outer{padding:0}

/* sidebar */
.art-side{display:grid;gap:14px;position:sticky;top:24px}
.art-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;
  box-shadow:0 14px 40px rgba(20,26,48,.07)}
.art-card-h{margin:6px 0 8px;font-size:19px;font-weight:800;color:var(--ink);line-height:1.28}
.art-card-p{margin:0 0 18px;font-size:14.2px;color:var(--body)}
.art-card-quiet{background:var(--bg-soft);box-shadow:none}
.art-more{list-style:none;margin:0;padding:0}
.art-more li{border-top:1px solid var(--line)}
.art-more li:first-child{border-top:0}
.art-more a{display:block;padding:11px 0;font-size:14.4px;font-weight:700;color:var(--ink);line-height:1.35}
.art-more a:hover{color:var(--orange)}

/* prev / next */


.pn-link{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 20px;
  display:flex;flex-direction:column;gap:5px;transition:border-color .26s ease,transform .26s cubic-bezier(.3,.7,.3,1)}
.pn-link:hover{border-color:rgba(254,76,37,.45);transform:translateY(-3px)}
.pn-link small{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.pn-link strong{font-size:15.4px;color:var(--ink);line-height:1.35}
.pn-next{text-align:right}


/* ---------- blog listing ---------- */
.bl-cats{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
  margin:0 0 clamp(26px,20px + 1.6vw,38px)}
.bl-cat{cursor:pointer;user-select:none;transition:background .22s ease,border-color .22s ease,color .22s ease;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:40px;
  background:#fff;border:1px solid var(--line);font-size:13.8px;font-weight:700;color:var(--ink)}
.bl-cat i{font-style:normal;font-size:11.6px;font-weight:800;color:var(--orange)}
.bl-cat:hover{border-color:rgba(254,76,37,.5)}
.bl-cat.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.bl-cat.is-on i{color:#fff;opacity:.7}

.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,13px + 1.3vw,28px)}
.bl-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 14px 40px rgba(20,26,48,.07);
  transition:transform .32s cubic-bezier(.3,.7,.3,1),box-shadow .32s ease,border-color .32s ease}
.bl-card:hover{transform:translateY(-6px);box-shadow:0 30px 64px rgba(20,26,48,.16);
  border-color:rgba(254,76,37,.35)}
/* the newest post runs full width with the image beside the copy */
.bl-lead{grid-column:1/-1;flex-direction:row;align-items:stretch}
.bl-lead .bl-img{flex:0 0 52%;aspect-ratio:auto}
.bl-lead .bl-body{flex:1;justify-content:center;padding:clamp(24px,18px + 1.6vw,38px)}
.bl-lead h3{font-size:clamp(22px,18.6px + .91vw,30px)}

.bl-img{position:relative;display:block;aspect-ratio:1200/630;overflow:hidden;background:var(--navy)}
.bl-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.bl-card:hover .bl-img img{transform:scale(1.05)}
.bl-cat-tag{position:absolute;left:14px;top:14px;background:var(--orange);color:#fff;
  font-size:11.4px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 12px;border-radius:30px}
.bl-body{padding:22px;display:flex;flex-direction:column;flex:1}
.bl-meta{display:flex;align-items:center;gap:9px;margin-bottom:10px;
  font-size:12.4px;font-weight:700;color:var(--body);opacity:.85}
.bl-dot{width:3px;height:3px;border-radius:50%;background:var(--orange)}
.bl-card h3{font-size:clamp(17px,15.8px + .32vw,19.5px);line-height:1.3;margin:0 0 10px}
.bl-card h3 a{color:var(--ink)}
.bl-card:hover h3 a{color:var(--orange)}
.bl-card p{margin:0 0 16px;font-size:14.2px;color:var(--body);flex:1}
.bl-more{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:800;color:var(--orange)}
.bl-more i{width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg);transition:transform .24s ease}
.bl-more:hover i{transform:rotate(45deg) translateX(3px)}

/* ---------- blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:.28s;display:flex;flex-direction:column}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.post-img{aspect-ratio:16/10;overflow:hidden}
.post-img img{width:100%;height:100%;object-fit:cover;transition:.45s}
.post:hover .post-img img{transform:scale(1.06)}
.post-body{padding:24px;display:flex;flex-direction:column;flex:1}
.post-meta{font-size:13px;color:var(--orange);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px}
.post-body h3{font-size:19px;margin-bottom:9px}
.post-body p{font-size:15px;margin-bottom:16px}
.post-body .svc-more{margin-top:auto}

/* ---------- notices ---------- */
.notice{padding:16px 20px;border-radius:12px;margin-bottom:22px;font-weight:600}
.notice-ok{background:#e8f7ee;border:1px solid #b7e5c8;color:#146c37}
.notice-err{background:#fdecea;border:1px solid #f5c2bd;color:#a32316}

/* ---------- questions strip ---------- */
/* ---------- questions CTA above the footer ---------- */
.cq{background:var(--bg-soft);padding-top:clamp(40px,28px + 3.2vw,68px)}
/* the card straddles the footer edge */
.cq-card{
  position:relative;z-index:2;margin-bottom:clamp(-120px,-9vw,-70px);
  background:var(--orange);border-radius:20px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  box-shadow:0 26px 60px rgba(254,76,37,.28);
}
.cq-copy{padding:clamp(28px,18px + 2.7vw,56px) clamp(22px,14px + 2.1vw,52px)}
.cq-h{color:#fff;font-size:clamp(24px,18.6px + 1.44vw,38px);margin-bottom:10px;line-height:1.2}
.cq-sub{color:rgba(255,255,255,.95);font-size:clamp(15px,14.3px + .19vw,17px);margin-bottom:6px}
.cq-num{
  display:block;color:#fff;font-weight:900;line-height:1.2;
  font-size:clamp(22px,17.4px + 1.22vw,32px);margin-bottom:22px;
}
.cq-num:hover{text-decoration:underline}
.cq-btn{
  display:inline-block;background:var(--navy);color:#fff;font-weight:700;
  padding:13px 26px;border-radius:8px;font-size:15px;
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
}
.cq-btn:hover{background:#22317d;transform:translateY(-2px);box-shadow:0 12px 26px rgba(26,39,103,.4)}
/* photo sits flush to the card edge with an arched inner corner */
.cq-media{position:relative;min-height:190px}
.cq-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-top-left-radius:clamp(70px,12vw,190px);
  border-left:6px solid var(--orange);border-top:6px solid var(--orange);
}

/* ---------- footer ---------- */
.ftr{background:var(--navy-deep);color:rgba(255,255,255,.75)}
.ftr-top{display:grid;grid-template-columns:1.55fr .8fr .95fr 1.15fr;gap:44px;
  padding-block:70px 54px;padding-inline:clamp(24px,5vw,38px)}
.ftr{padding-top:clamp(70px,54px + 4.3vw,130px)}
.ftr-brand img{height:clamp(74px,62px + 3.2vw,102px);width:auto;margin-bottom:18px}
.ftr-brand p{font-size:15px;max-width:340px}
.ftr-actions{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.ftr-act{display:inline-flex;align-items:center;gap:13px;color:#fff}
/* circle is a wrapper — putting the mask icon itself on a padded circle
   made the glyph fill the whole disc and render as a solid blob */
.ftr-act-ic{
  width:38px;height:38px;flex:none;border-radius:50%;
  background:var(--orange);color:#fff;
  display:grid;place-items:center;transition:background .25s ease;
}
.ftr-act-ic .cfs4-svg{width:19px;height:19px;display:block}
.ftr-act:hover .ftr-act-ic{background:#fff;color:var(--orange)}
.ftr-act-tx{display:flex;flex-direction:column}
.ftr-act small{display:block;font-size:12.5px;opacity:.7;line-height:1.2}
.ftr-act strong{font-size:16px}
.ftr h4{color:#fff;font-size:17px;margin-bottom:20px;position:relative;padding-bottom:12px}
.ftr h4::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2.5px;background:var(--orange)}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ftr ul a{font-size:15px;transition:.2s}
.ftr ul a:hover{color:var(--orange);padding-left:4px}
.ftr-contact li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.55}
.ftr-contact .ic{color:var(--orange);width:16px;height:16px;margin-top:5px;flex:none}
.ftr-soc{display:flex;gap:11px;margin-top:22px}
/* same fix: the anchor is the disc, the glyph lives inside it */
.ftr-soc a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.09);color:#fff;
  display:grid;place-items:center;transition:background .25s ease,transform .25s ease;
}
.ftr-soc a .ic{width:16px;height:16px}
.ftr-soc a:hover{background:var(--orange);transform:translateY(-2px)}
.ftr-bot{border-top:1px solid rgba(255,255,255,.1)}
.ftr-bot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px}
.ftr-bot p{margin:0;font-size:14.5px}
.ftr-areas a:hover{color:var(--orange)}

/* ---------- floating desktop call button ---------- */
/* hidden on phones — the sticky call bar covers that case */
.fab{display:none}
.fab .cfs4-outer{padding:0}

/* ---------- sticky mobile call bar ---------- */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:300;
  box-shadow:0 -6px 22px rgba(0,0,0,.16);
  transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .28s ease}
/* JS adds this on load, then removes it once the marquee is scrolled past.
   Without JS the bar simply stays visible — it never gets stuck hidden. */
.callbar.is-tucked{transform:translateY(110%);opacity:0;pointer-events:none}
/* flex-basis must be auto, not 0. With flex:1 both halves are forced to
   exactly 50% whatever they contain, so the phone number wraps to two
   lines and then fills the width, pushing the icon out to the edge.
   Sizing from content and growing from there keeps both on one line. */
.callbar a{flex:1 1 auto;padding:11px 10px;text-align:center;font-weight:700;
  font-size:clamp(13.5px,11.55px + .52vw,15.5px);white-space:nowrap;
  display:flex;align-items:center;justify-content:center;gap:8px}
.callbar-a{background:var(--navy);color:#fff}
.callbar-b{background:var(--orange);color:#fff}
/* animated phone / calendar icons. color is set explicitly because the
   SVGs draw with currentColor — inheriting it has bitten these icons
   before, where they picked up a dark colour inside a button. */
.callbar-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;flex:none;color:#fff;
  /* white at 20% over each half, exactly like .cfs4-icon-circle on the
     hero buttons: it lands as light blue on the navy side and light
     orange on the orange side without hard-coding either colour. */
  background:rgba(255,255,255,.2);
}
.callbar-ic .cfs4-svg{width:18px;height:18px;display:block}

/* ---------- reveal (must never gate content) ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
.no-js .rv,html.no-io .rv{opacity:1;transform:none}

/* ============================================================
   MEDIA QUERIES — keep at the very end of this file
   ============================================================ */
@media (min-width:761px){
  .fab{
    display:block;position:fixed;right:clamp(18px,2vw,32px);bottom:clamp(18px,2vw,32px);
    z-index:300;opacity:0;pointer-events:none;
    transform:translateY(22px) scale(.96);
    transition:opacity .3s ease,transform .38s cubic-bezier(.3,.7,.3,1);
  }
  .fab.is-shown{opacity:1;transform:none;pointer-events:auto}
  /* slightly tighter than the in-page buttons so it doesn't dominate.
     Scoped to .fab only — in-page call buttons keep their own sizing. */
  .fab .cfs4-icon-wrap{width:64px}
  .fab .cfs4-icon-circle{width:48px;height:48px}
  .fab .cfs4-icon-circle svg{width:25px;height:25px}
  .fab .cfs4-num{font-size:22px}
}

@media (max-width:1320px){
}

@media (max-width:1180px){
  .nav-list{gap:22px}
  .hdr-in{gap:18px}
  .hdr-call-tx small{display:none}
  .ftr-top{grid-template-columns:1.4fr 1fr 1fr}
  .ftr-col:last-child{grid-column:1/-1}
  /* header button keeps live proportions, just scaled as a unit */
  .hdr-cta .cfs4-pulse-wrap{transform:scale(.82);transform-origin:right center}
}

@media (max-width:1024px){
  .hero-in{grid-template-columns:1fr;gap:44px;padding-block:64px 74px}
  .hero-lead{max-width:none}
  .svc-grid,.num-grid,.proc,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .svc-head{grid-template-columns:minmax(0,1fr);gap:18px}
  /* 3 steps in 2 columns orphans the third and crushes the copy —
     hold 3-across here and stack outright on phones (<=760px). */
  .pr-line{display:none}
  .svc-head-r{align-items:flex-start;text-align:left}
  .about-grid,.lead-grid,.ct-grid,.cta-in{grid-template-columns:1fr;gap:40px}
  .cta-in{padding-block:64px}
  .ct-cards{grid-template-columns:1fr}
  .area-list{grid-template-columns:repeat(3,1fr)}
  .ar-panel.is-on,.sc-grid{grid-template-columns:repeat(3,1fr)}
  .ar-top{flex-direction:column;align-items:stretch}
  .ar-search{flex:1 1 auto}
  .gal{grid-template-columns:repeat(2,1fr)}
  .about-media{order:-1}
  /* stack the CTA band; no overlap on narrow screens */
  .qb{padding:60px 0}
  /* minmax(0,1fr) — a plain 1fr can be forced wider by a nowrap child */
  .qb-in{grid-template-columns:minmax(0,1fr);gap:26px}
  /* stacked: pitch card, then the video slider, then the form */
  .qb-card{order:-1}
  .qv{display:block;order:-1}
  .cta2-in{grid-template-columns:minmax(0,1fr);gap:34px}
  .fq-in{grid-template-columns:minmax(0,1fr);gap:36px}
  .ls-in{grid-template-columns:minmax(0,1fr);gap:40px}
  .bk-in{grid-template-columns:minmax(0,1fr);gap:34px}
  .bk-lead{max-width:none}
  .tb-in{grid-template-columns:1fr 1fr;gap:20px}
  .sy-list{grid-template-columns:1fr 1fr}
  .os-grid{grid-template-columns:repeat(3,1fr)}
  .ls-media{padding-left:0;max-width:620px}
  .ls-dots{display:none}
  .fq-media{grid-template-columns:1fr 1fr;max-width:none}
  .fq-media figure:last-child{margin-left:0}
  .cta2-copy p{max-width:none}
  .vs-in{grid-template-columns:minmax(0,1fr);gap:34px}
  /* Whole section goes at this width — the .qv slider in the quote band
     already carries both clips, so this is left saying "watch their
     stories" with nothing to watch. Desktop keeps it. */
  .vs{display:none}
  .ab-in{grid-template-columns:minmax(0,1fr);gap:46px}
  .ab-media{max-width:600px}
  .ab-dots{display:none}
  /* no overlap when stacked — zero the variable so the padding
     that compensates for it collapses too, or the card overflows */
  .qb-card{--qb-overlap:0px;margin-left:0;margin-top:0}
  /* keep filling the viewport on tablet/mobile too (was min-height:0,
     which silently disabled the 100dvh fill on every small screen) */
  .hero-full{min-height:100vh;min-height:100dvh}
  .hero-full .hero-in{padding-bottom:96px}
  .hdr-overlay .hdr-in{align-items:center;min-height:88px}
  .hdr-overlay .brand{margin-top:0}
  .hdr-overlay .nav,.hdr-overlay .hdr-cta{margin-top:0}

  /* mobile nav */
  /* nav is off-canvas and the header CTA is hidden here, so nothing
     pushes the burger right — do it explicitly */
  .burger{display:grid;margin-left:auto}
  .hdr-book{display:none}
  .nav{
    position:fixed;top:0;right:-100%;width:min(340px,86vw);height:100dvh;
    /* top padding trimmed from 92px — the logo now occupies that space */
    background:var(--navy-deep);padding:22px 26px 30px;overflow-y:auto;
    transition:right .32s ease;box-shadow:-10px 0 40px rgba(0,0,0,.35);margin:0;z-index:210;
  }
  .nav.open{right:0}
  /* max-width keeps it clear of the close button in the top-right */
  .nav-logo{display:block;max-width:124px;margin:0 0 20px;padding-bottom:18px;
    border-bottom:1px solid rgba(255,255,255,.13)}
  .nav-logo img{width:100%;height:auto;display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:2px}
  .nav-list>li>a{padding:13px 4px;font-size:17px;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-list>li>a::after{display:none}
  /* ---- mega menus in the drawer ----
     Not a bare list: each service becomes a tinted row with its own icon
     tile, alternating like the desktop cards but tuned for a dark panel. */
  .mega{
    position:static;opacity:1;visibility:visible;pointer-events:auto;
    transform:none;transition:none;
  }
  .mega .wrap{padding-inline:0}
  .mega-in{
    display:block;background:transparent;box-shadow:none;border:0;border-radius:0;
    margin:8px 0 12px;padding:0;
  }
  .mega-cards,.mega-cities{display:block}
  .mega-card{
    position:relative;overflow:hidden;
    display:flex;align-items:center;gap:12px;
    padding:10px 12px;margin-bottom:7px;border-radius:13px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;transform:none;box-shadow:none;
    transition:background .25s ease,border-color .25s ease,transform .25s cubic-bezier(.3,.7,.3,1);
    /* staggered in as the drawer slides open */
    opacity:0;animation:navRowIn .42s cubic-bezier(.22,1,.36,1) forwards;
  }
  .nav:not(.open) .mega-card{animation:none;opacity:1}
  @keyframes navRowIn{
    from{opacity:0;transform:translateX(14px)}
    to  {opacity:1;transform:translateX(0)}
  }
  .mega-card:nth-child(1){animation-delay:.06s}
  .mega-card:nth-child(2){animation-delay:.11s}
  .mega-card:nth-child(3){animation-delay:.16s}
  .mega-card:nth-child(4){animation-delay:.21s}
  .mega-card:nth-child(5){animation-delay:.26s}
  .mega-card:nth-child(6){animation-delay:.31s}
  /* the desktop gradients are (0,2,0); match that specificity or the light
     card bodies bleed into the dark drawer */
  .mega-card:nth-child(4n+1),.mega-card:nth-child(4n+2),
  .mega-card:nth-child(4n+3),.mega-card:nth-child(4n+4){
    background:rgba(255,255,255,.055);box-shadow:none;
  }
  .mega-card:active,.mega-card:hover{
    background:rgba(254,76,37,.16);border-color:rgba(254,76,37,.5);transform:translateX(2px);
  }
  .mega-card::before{display:none}
  /* icon tiles return on mobile, smaller, alternating row to row */
  .mega-ic{
    display:grid;width:34px;height:34px;border-radius:11px;flex:none;
    opacity:1;transform:none;box-shadow:none;transition:background .25s ease;
  }
  .mega-card:nth-child(odd) .mega-ic{background:rgba(255,255,255,.13)}
  .mega-card:nth-child(even) .mega-ic{background:var(--orange)}
  .mega-card:hover .mega-ic,.mega-card:active .mega-ic{transform:none}
  .mega-ic .sa{width:19px;height:19px;color:#fff}
  .mega-tx small{display:none}
  .mega-tx strong{color:#fff;font-size:14.6px;font-weight:700;letter-spacing:.005em}
  .mega-card:hover .mega-tx strong{color:#fff}
  .mega-full{display:none}
  .mega-short{display:inline}
  /* chevron stays, pointing along the row */
  .mega-go{
    display:block;opacity:.5;border-color:#fff;
    transform:rotate(45deg) translateX(0);
  }
  .mega-card:hover .mega-go{opacity:1;border-color:var(--orange)}
  .mega-city-pin{display:none}
  .mega-side{display:none}
  /* Service Areas is a single destination in the drawer */
  .nav-areas .mega{display:none}
  .nav-areas>a .caret{display:none}
  .mega-tx small{display:none}
  .mega-card:hover .mega-tx strong{color:var(--orange)}
  /* the side panel duplicates the call bar and footer CTA on mobile */
  .mega-side{display:none}
  .sub{
    position:static;transform:none;opacity:1;visibility:visible;background:transparent;
    box-shadow:none;border:0;border-left:2px solid var(--orange);border-radius:0;
    margin:6px 0 10px 8px;padding:0 0 0 12px;min-width:0;
  }
  .has-sub:hover .sub{transform:none}
  .sub a{color:rgba(255,255,255,.82);padding:9px 4px;font-size:15px}
  .sub a:hover{background:transparent;color:var(--orange)}
  .nav-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:205;opacity:0;
    visibility:hidden;transition:.3s}
  .nav-mask.on{opacity:1;visibility:visible}
}

@media (max-width:760px){
  body{font-size:16px}
  .hero-in{padding-block:50px 60px}
  .phero-in{padding:52px 0 56px}
  /* portrait hero crops — falls back to the landscape one if a slide has
     no mobile source, so the hero can never end up with no image */
  .hero-slide{background-image:var(--bg-m,var(--bg))}
  .ty-steps{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  .ty-steps::before{display:none}
  .bl-grid,.rn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-lead{flex-direction:column}
  .bl-lead .bl-img{flex:none}
  .art-in{grid-template-columns:minmax(0,1fr)}
  .art-side{position:static}
  .rn-grid{grid-template-columns:1fr}
  .pn-next{text-align:left}
  .art-cta{flex-direction:column;align-items:flex-start}
  .lf-in{grid-template-columns:minmax(0,1fr)}
  .ty-links{grid-template-columns:1fr}
  .ty-urgent{flex-direction:column;align-items:flex-start}
  .bl-grid{grid-template-columns:1fr}
  .svc-grid,.num-grid,.proc,.blog-grid,.vid-grid{grid-template-columns:1fr}
  /* Process: one card per row. Cap the measure and centre it, otherwise a
     full-width card on a 760px screen leaves the centred copy stranded. */
  .pr-grid{grid-template-columns:minmax(0,1fr);max-width:430px;
    margin-inline:auto;gap:18px}
  /* the crushed copy was the real problem — give it room back */
  .pr-step{padding:30px 24px 32px}
  .pr-step p{font-size:15px}
  /* Phones get a swipeable row instead of the auto-scrolling marquee.
     Two ~2570px animated layers is a lot to composite on mobile Safari and
     the second row could end up painted blank. Scroll-snap is also simply
     the better interaction on a touch screen. */
  .says-row{
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .says-row::-webkit-scrollbar{display:none}
  .says-track,.says-track--rev{animation:none;width:max-content}
  .says-track .tst{flex-basis:min(82vw,320px);scroll-snap-align:center}
  /* the duplicate half exists only to make the marquee loop seamlessly;
     with no animation it is just repeated content, so hide it */
  .says-track .tst[aria-hidden="true"]{display:none}
  /* edge fades belong to a moving marquee, not a scroller */
  .says::before,.says::after{display:none}
  .vid-grid{max-width:340px}
  .area-list{grid-template-columns:repeat(2,1fr)}
  .ar-panel.is-on,.sc-grid{grid-template-columns:repeat(2,1fr)}
  .qf-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:12px}
  .stat{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:14px 18px}
  .stat b{font-size:27px}
  .qform{padding:24px 20px}
  .hdr-in{min-height:70px}
  .brand img{height:44px}
  /* bigger mark on phones. The header min-height below grows with it, and
     the hero's top padding already reads --logo-h (see .hero-in), so the
     copy shifts down by exactly the same amount instead of colliding. */
  :root{--logo-h:clamp(100px,86.4px + 3.63vw,118px)}
  .hdr-call-tx{display:none}
  .hdr-overlay .hdr-in{min-height:108px}
  /* The drawer is a dark panel that lives INSIDE .hdr-overlay, so the white
     sticky-bar rules were recolouring its links to dark ink on dark navy —
     which is why About and Services vanished. Force them back. */
  .hdr-overlay.is-stuck .nav-list > li > a{color:rgba(255,255,255,.92)}
  .hdr-overlay.is-stuck .nav-list > li > a.on,
  .hdr-overlay.is-stuck .nav-list > li > a:hover{color:var(--orange)}
  .hdr-overlay.is-stuck .mega-tx strong{color:#fff}

  /* smaller mark in the drawer */
  .nav-logo{max-width:96px;margin-bottom:16px;padding-bottom:14px}

  /* No call button in the mobile header at all — the sticky call bar
     pinned to the bottom of the screen already covers tap-to-call. */
  .hdr-cta{display:none}
  /* MOBILE ONLY: clearance derived from the logo, so the copy can't ride
     up under the header on short screens. Desktop keeps its own value —
     applying this there pushed the CTAs out of the viewport. */
  /* Centre the hero copy on phones instead of hanging it off the bottom.
     Padding is symmetric so the flex centring is honest, and it is sized to
     clear the overlay logo so the heading can never ride under it. */
  .hero-full{align-items:center}
  .hero-full .hero-in{
    padding-top:calc(var(--hdr-top) + var(--logo-h) + 10px);
    padding-bottom:calc(var(--hdr-top) + var(--logo-h) + 10px);
  }
  /* stacked but left-aligned — buttons size to their content */
  .hero-cta{gap:14px;flex-direction:column;align-items:flex-start}
  .cfs4-outer{width:auto;max-width:100%;justify-content:flex-start}
  .cfs4-pulse-wrap,.cfs4-btn{width:auto;max-width:100%}
  /* text stays at the live sizes (13px / 27px) on every width */
  .qb-card{--qb-overlap:0px}
  /* The badge line is ~46 characters, so it wraps to two lines on any
     phone no matter the size — a heavy outlined box around it dominated
     the card. Make it lighter instead: smaller text, tighter padding,
     a soft tint rather than a hard 1.5px rule. */
  .qb-badge{
    /* fluid so the line survives narrower phones before it has to wrap */
    font-size:clamp(11.6px,7.5px + 1.09vw,12.5px);line-height:1.4;gap:7px;
    padding:8px 10px;border-radius:10px;
    border-width:1px;background:rgba(254,76,37,.05);
    align-items:center;margin-bottom:16px;
  }
  /* logo is taller than a single 12.5px line, so it centres against the
     two-line text block rather than aligning to the first line */
  .qb-g{width:clamp(23px,18.3px + 1.25vw,26px);height:clamp(23px,18.3px + 1.25vw,26px)}
  /* The call button is nowrap, so its min-content width sets the card's
     floor. Trim it enough to fit a 375px screen:
       card content = 375 - 48 (gutters) - 40 (padding) = 287px
       button       = 58 (panel) + 24 (text pad) + ~199 (widest line) = 281px */
  .qb-card,.qb-form{min-width:0}
  .qb-card .cfs4-outer,.qb-card .cfs4-pulse-wrap,.qb-card .cfs4-btn{max-width:100%;min-width:0}
  .cq-card{grid-template-columns:minmax(0,1fr);margin-bottom:-58px}
  .cq-media{min-height:200px;order:-1}
  .cq-media img{border-top-left-radius:0;border-left:0;border-top:0;
    border-bottom-left-radius:clamp(60px,16vw,120px)}
  .ftr-top{grid-template-columns:1fr;gap:34px;padding-block:52px 40px}
  .ftr-col:last-child{grid-column:auto}
  .ftr-bot-in{flex-direction:column;text-align:center}
  .about-badge{right:10px;bottom:-10px;padding:15px 20px}
  .about-badge strong{font-size:24px}
  .brands{gap:28px}
  .brands img{height:38px}
  .gal{grid-template-columns:1fr 1fr;gap:12px}
  .callbar{display:flex}
  body{padding-bottom:56px}
  .svc-list{grid-template-columns:1fr}
}

/* three nowrap labels don't fit side by side on a phone — stack them
   into rows instead of letting them overflow */
@media (max-width:560px){
  .ab-stats{grid-template-columns:1fr}
  .ab-stat{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;text-align:left;padding:15px 18px;
  }
  .ab-stat + .ab-stat::before{
    left:18px;right:18px;top:0;width:auto;height:1px;
    background:var(--line);
  }
  .ab-stat b{font-size:27px;line-height:1.2}
  .ab-stat-rule{display:none}
  .ab-stat span{font-size:11px;letter-spacing:.07em}
}

@media (max-width:420px){
  .area-list{grid-template-columns:1fr}
  .hero-ticks{gap:9px 16px}
  .btn{padding:13px 22px;font-size:15px}
}

/* short viewports (small laptops, landscape phones): tighten the hero
   so the CTAs stay above the fold instead of overflowing */
@media (min-width:761px) and (max-height:860px){
  .hero-full .hero-in{padding-bottom:40px}
  .hero-full .hero-ticks{gap:8px;margin:20px 0 26px}
}
@media (min-width:761px) and (max-height:740px){
  .hero-full .hero-in{padding-bottom:34px}
  .hero-full .hero-ticks{margin:16px 0 22px}
}

@media (max-width:1024px){
}
@media (max-width:760px){
  .mq-sep{width:7px;height:7px}
  .mq-track{animation-duration:30s}
  .ab-points,.ls-points,.bk-chips{grid-template-columns:1fr;gap:11px}
  .tb-in{grid-template-columns:1fr;gap:14px}
  .sy-list{grid-template-columns:1fr}
  .sy-call{padding-right:20px}
  .os-grid{grid-template-columns:1fr 1fr}
  .os-card{aspect-ratio:4/3}
  .ls-frame{display:none}
  .ls-badge{position:static;margin-top:16px}
  .ab-shot-sm{width:36%}
  .ab-stats{border-radius:14px}
  .ab-stat{padding-inline:6px}
  .ab-cta{gap:20px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  /* don't snap the scrollers to their end frame — hold them still instead */
  .mq-track,.bs-track,.says-track{animation:none!important;transform:none!important}
  /* illustrations rest on their finished drawing */
  .pa,.pa *,.wa,.wa *,.sa,.sa *{animation:none!important;transform:none!important;opacity:1!important}
  .ar-pin svg,.ar-pin::after{animation:none!important;transform:none!important}
}