/* ═══════════════════════════════════════════════════════════════════
   London City Property Maintenance: design system
   ─────────────────────────────────────────────────────────────────
   Type rule that carries the whole thing:
     · Condensed uppercase (Barlow Condensed) = hero + banner moments ONLY
     · Everything else = Figtree, sentence case, tight tracking
   Break that rule and it stops looking designed.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Ink & paper */
  --ink:#0A1B2E;
  --ink-2:#3F566E;
  --ink-3:#7089A1;
  --line:#E2EBF3;
  --line-2:#EDF3F8;
  --paper:#fff;
  --fog:#F4F8FB;

  /* Blues */
  --navy:#0B2542;
  --navy-2:#071A31;
  --blue:#1668D8;
  --blue-2:#0F52B0;
  --blue-3:#4E9BEE;
  --ice:#CFE4F7;
  --ice-2:#E8F2FB;

  /* Summer */
  --green:#63C63C;
  --green-2:#4EA82C;
  --green-3:#E9F8E1;

  /* Live accent (season switch reassigns) */
  --acc:var(--blue);
  --acc-2:var(--blue-2);
  --acc-tint:var(--ice-2);

  --r-s:14px; --r-m:20px; --r-l:28px; --r-xl:36px;
  --gut:clamp(18px,3.2vw,40px);
  --hdr:74px;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.62,.05,.2,1);

  --f-d:'Barlow Condensed',Impact,sans-serif;
  --f-b:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  margin:0;background:var(--fog);color:var(--ink-2);
  font:400 17px/1.6 var(--f-b);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
svg{display:block;flex:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:600;letter-spacing:-.022em;line-height:1.08}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--blue);color:#fff}

.wrap{width:min(1280px,100% - (var(--gut) * 2));margin-inline:auto}
.wrap--tight{width:min(1120px,100% - (var(--gut) * 2))}

/* ─── Type scale ─────────────────────────────────────────── */
.dsp{
  font-family:var(--f-d);font-weight:800;text-transform:uppercase;
  line-height:.86;letter-spacing:-.004em;color:var(--ink);
}
.dsp em{font-style:normal;color:var(--acc);display:block}
.dsp--hero{font-size:clamp(3.2rem,8.4vw,7.4rem)}
.dsp--band{font-size:clamp(2.6rem,6vw,5.2rem)}

.h2{font-size:clamp(2rem,3.5vw,3.05rem);letter-spacing:-.028em}
.h3{font-size:clamp(1.3rem,1.7vw,1.6rem);letter-spacing:-.02em}
.lede{font-size:clamp(1.02rem,1.25vw,1.16rem);line-height:1.65;color:var(--ink-2)}

.eyebrow{
  display:flex;align-items:center;gap:10px;margin:0 0 20px;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor;opacity:.55}

.on-dark{color:rgba(219,234,247,.72)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark .eyebrow{color:var(--ice)}
.on-dark .dsp em{color:var(--ice)}
.on-dark .lede{color:rgba(219,234,247,.7)}

/* ─── Links ──────────────────────────────────────────────── */
.tlink{
  display:inline-flex;align-items:center;gap:7px;color:var(--acc);
  font-weight:600;font-size:15.5px;position:relative;
}
.tlink::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .55s var(--e-out);
}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}
.tlink svg{width:15px;height:15px;transition:transform .45s var(--e-out)}
.tlink:hover svg{transform:translateX(4px)}
.on-dark .tlink{color:var(--ice)}

/* ─── Buttons ────────────────────────────────────────────── */
.btn{
  --h:48px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:var(--h);padding:0 24px;border-radius:999px;cursor:pointer;
  font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),background .3s,color .3s;
  overflow:hidden;isolation:isolate;
}
.btn svg{width:16px;height:16px;transition:transform .5s var(--e-out)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0);transition-duration:.1s}
.btn:focus-visible{outline:2.5px solid var(--blue-3);outline-offset:3px}
.btn--lg{--h:56px;padding:0 30px;font-size:16px}
.btn--full{width:100%}

.btn--fill{background:var(--acc);color:#fff;box-shadow:0 6px 18px -8px color-mix(in srgb,var(--acc) 85%,transparent)}
.btn--fill::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--acc-2);
  transform:translateY(101%);transition:transform .55s var(--e-out);
}
.btn--fill:hover{box-shadow:0 14px 30px -10px color-mix(in srgb,var(--acc) 80%,transparent)}
.btn--fill:hover::before{transform:none}
.btn--fill:hover svg{transform:translateX(3px)}

.btn--line{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--line:hover{box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--ink);color:#fff}

.btn--glass{color:#fff;background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);backdrop-filter:blur(14px)}
.btn--glass:hover{background:rgba(255,255,255,.2)}

/* White button with an inset arrow badge (Seaport pattern) */
.btn--white{background:#fff;color:var(--ink);padding-right:8px}
.btn--white:hover{box-shadow:0 14px 30px -12px rgba(6,20,36,.6)}
.btn--white .badge{
  display:grid;place-items:center;width:34px;height:34px;border-radius:999px;flex:none;
  background:var(--blue);color:#fff;margin-left:6px;transition:transform .5s var(--e-out),background .3s;
}
.btn--white .badge svg{width:15px;height:15px}
.btn--white:hover .badge{transform:rotate(45deg)}
.btn--lg.btn--white .badge{width:40px;height:40px}

/* Dark navy button, for phone actions beside a white primary */
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-2)}

/* Outline buttons on any dark surface: panels, the modal, the mobile sheet,
   the dark footer. Keep this list in sync when adding a dark container. */
.on-dark .btn--line,.qm .btn--line,.sheet .btn--line,.ftr .btn--line{
  color:#fff;box-shadow:inset 0 0 0 1.5px rgba(207,228,247,.3)}
.on-dark .btn--line:hover,.qm .btn--line:hover,.sheet .btn--line:hover,.ftr .btn--line:hover{
  background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1.5px #fff}

/* ═══════════════════════════════════════════════════════════
   MOTION PRIMITIVES
   Masked line reveals + staggered fades. All driven by one
   observer adding .in to a [data-rv] container.
   ═══════════════════════════════════════════════════════════ */
.rv>*{text-wrap:balance}   /* stops a single orphan word on narrow screens */
.js .rv{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.js .rv>*{display:block;transform:translateY(108%);transition:transform 1.05s var(--e-out) var(--d,0s)}
.js [data-rv].in .rv>*{transform:none}

.js .fade{opacity:0;transform:translateY(20px);transition:opacity .9s var(--e-out) var(--d,0s),transform .9s var(--e-out) var(--d,0s)}
.js [data-rv].in .fade{opacity:1;transform:none}

.js .imgrv{clip-path:inset(0 0 101% 0);transition:clip-path 1.15s var(--e-out) var(--d,0s)}
.js .imgrv>*{transform:scale(1.16);transition:transform 1.5s var(--e-out) var(--d,0s)}
.js [data-rv].in .imgrv{clip-path:inset(0 0 0 0)}
.js [data-rv].in .imgrv>*{transform:none}

.js .lift{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .95s var(--e-out) var(--d,0s),transform .95s var(--e-out) var(--d,0s)}
.js [data-rv].in .lift{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .rv>*,.js .fade,.js .imgrv,.js .imgrv>*,.js .lift{
    transform:none!important;opacity:1!important;clip-path:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════════════════════
   PAGE TRANSITION
   ═══════════════════════════════════════════════════════════ */
/* A short cross-fade. The old curtain wipe drew attention to itself and any
   timing drift between CSS and JS read as a stutter. A fade has no direction
   to get wrong and stays smooth even if the next page is slow. */
.pt{
  position:fixed;inset:0;z-index:400;pointer-events:none;
  background:var(--navy-2);opacity:0;visibility:hidden;
}
.pt.out{opacity:1;visibility:visible;transition:opacity .26s ease-out}
.pt.in{opacity:0;visibility:visible;transition:opacity .42s ease-in .02s}
.pt__logo{position:absolute;left:50%;top:50%;translate:-50% -50%;opacity:.9}
.pt.in .pt__logo{opacity:0;transition:opacity .3s}
@media (prefers-reduced-motion:reduce){.pt{display:none}}

/* ═══════════════════════════════════════════════════════════
   HEADER: floating capsule
   ═══════════════════════════════════════════════════════════ */
/* Always visible. It used to hide on scroll-down and that read as a glitch. */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:190;
  padding:18px var(--gut) 0;
  transition:padding .45s var(--e-out);
}
.hdr.stuck{padding-top:10px}

.cap{
  width:min(1280px,100%);margin-inline:auto;
  display:flex;align-items:center;gap:18px;
  height:var(--hdr);padding:0 12px 0 22px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(20px) saturate(180%);
  border-radius:999px;
  box-shadow:0 1px 2px rgba(10,27,46,.05),0 12px 34px -18px rgba(10,27,46,.35);
  transition:box-shadow .45s var(--e-out),height .45s var(--e-out),background .45s var(--e-out);
}
.hdr.stuck .cap{height:64px;box-shadow:0 1px 2px rgba(10,27,46,.06),0 16px 40px -20px rgba(10,27,46,.5)}

/* Glass while it floats over the (always dark) hero, solid once scrolled.
   Both pages open on a dark hero; a light hero would need this gated. */
.hdr:not(.stuck):not(.solid) .cap{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.hdr:not(.stuck):not(.solid) .mnav a,.hdr:not(.stuck):not(.solid) .mnav button.nlink{color:#fff}
.hdr:not(.stuck):not(.solid) .mnav a:hover,.hdr:not(.stuck):not(.solid) .mnav button.nlink:hover{background:rgba(255,255,255,.14);color:#fff}
.hdr:not(.stuck):not(.solid) .hphone{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26)}
.hdr:not(.stuck):not(.solid) .hphone svg{color:var(--ice)}
.hdr:not(.stuck):not(.solid) .hphone:hover{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.hdr:not(.stuck):not(.solid) .burger{background:rgba(255,255,255,.14)}
.hdr:not(.stuck):not(.solid) .burger i{background:#fff}

/* Their real logo. Two files: the dark one reads on white, the light one on the
   glass header over the hero. Cross-faded by the .stuck class. */
.brand{position:relative;display:flex;align-items:center;gap:11px;flex:none}
.brand__logo{display:block;height:46px;width:auto;transition:opacity .4s var(--e-out),height .45s var(--e-out)}
.brand__logo--dark{position:absolute;left:0;top:50%;translate:0 -50%;opacity:0}
.hdr.stuck .brand__logo{height:40px}
.hdr.stuck .brand__logo--light,.hdr.solid .brand__logo--light{opacity:0}
.hdr.stuck .brand__logo--dark,.hdr.solid .brand__logo--dark{opacity:1}
.ftr .brand__logo,.qm__h .brand__logo{height:58px}
.sheet .brand__logo{height:48px}

.mnav{display:flex;align-items:center;gap:2px;margin-left:auto}
.mnav>*{position:relative}
.mnav a,.mnav button.nlink{
  display:inline-flex;align-items:center;gap:5px;padding:10px 14px;border-radius:999px;
  font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;
  transition:color .25s,background .25s;
}
.mnav a:hover,.mnav button.nlink:hover{background:var(--fog);color:var(--blue)}
.mnav a[aria-current]{color:var(--blue)}
.mnav .chev{width:13px;height:13px;opacity:.5;transition:transform .35s var(--e-out)}
.has-drop:hover .chev,.has-drop.open .chev{transform:rotate(180deg)}

/* Dropdown */
.drop{
  position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;width:300px;
  background:#fff;border-radius:var(--r-m);padding:8px;
  box-shadow:0 2px 4px rgba(10,27,46,.05),0 24px 50px -22px rgba(10,27,46,.4);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .32s var(--e-out),transform .32s var(--e-out),visibility .32s;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.drop a{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:11px 14px;border-radius:12px;width:100%;
}
.drop a b{font-size:14.5px;font-weight:600;color:var(--ink)}
.drop a span{font-size:12.5px;color:var(--ink-3);line-height:1.35}
.drop a:hover{background:var(--fog)}
.drop a:hover b{color:var(--blue)}

/* Right cluster: phone pill joined to CTA pill */
.hgrp{display:flex;align-items:center;gap:8px;flex:none}
.hphone{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;
  font-size:14.5px;font-weight:600;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .3s,background .3s;
}
.hphone svg{width:15px;height:15px;color:var(--blue)}
.hphone:hover{box-shadow:inset 0 0 0 1.5px var(--blue-3);background:var(--ice-2)}

/* Flex column with an explicit gap so the bar pitch is exact: 2px bar + 5px
   gap = 7px between centres, which is what the X transform below translates. */
.burger{display:none;width:46px;height:46px;border-radius:999px;background:var(--fog);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;margin:0;
  transition:transform .45s var(--e-out),opacity .25s}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){opacity:0}
.burger[aria-expanded=true] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile sheet */
/* Above the sticky bottom bar (170) but below the header (190) so the burger
   stays tappable. Scrolls internally, with room to clear the bar and the
   home indicator at the bottom of the list. */
.sheet{
  position:fixed;inset:0;z-index:180;background:var(--navy-2);
  padding:calc(var(--hdr) + 40px) var(--gut) calc(96px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:2px;
  clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .7s var(--e-io);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.sheet.open{clip-path:circle(150% at calc(100% - 46px) 46px)}
/* Direct children only, so the CTA buttons in .sheet__cta keep their own styling */
.sheet>a{
  display:block;padding:16px 0;font:800 clamp(28px,7vw,40px)/1 var(--f-d);
  text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(207,228,247,.14);
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--e-out),transform .5s var(--e-out);
}
.sheet.open>a{opacity:1;transform:none}
.sheet__cta{margin-top:28px;display:grid;gap:10px}

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
/* Centred, both axes. Top padding clears the floating header so tall content
   can never slide up underneath it. */
.hero{position:relative;min-height:min(100svh,940px);display:flex;align-items:center;
  padding:calc(var(--hdr) + 46px) 0 clamp(56px,7vw,90px);overflow:hidden;isolation:isolate}
.hero--sub{min-height:min(78svh,720px)}
.hero__bg{position:absolute;inset:-12% 0 -12% 0;z-index:-2;will-change:transform}
/* Positioned so it paints above .hero__fallback, which is also positioned.
   A static img would sit below it in paint order and never show. */
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Crossfading slideshow with a slow drift on the active slide. The scale and
   the pan run on different, non-matching durations so the movement never
   settles into an obvious loop. JS marks the active slide. */
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 2s var(--e-out);overflow:hidden}
.hero__slide.on{opacity:1}
html:not(.js) .hero__slide:first-child{opacity:1}

.hero__slide img{transform-origin:var(--org,50% 50%)}
.hero__slide.on img{animation:drift 22s cubic-bezier(.33,0,.25,1) forwards}
.hero__slide:nth-child(2n).on img{animation-name:driftB}
@keyframes drift{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.14) translate3d(-1.2%,-1.4%,0)}
}
@keyframes driftB{
  from{transform:scale(1.13) translate3d(1%,1.2%,0)}
  to{transform:scale(1.01) translate3d(0,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .hero__slide.on img{animation:none;transform:none}
}
.hero__fallback{position:absolute;inset:0;background:
  radial-gradient(110% 74% at 74% 6%,#1D5590 0%,#0B2542 46%,#061829 100%)}
.hero__fallback::after{content:"";position:absolute;left:-5%;right:-5%;bottom:0;height:32%;
  background:linear-gradient(180deg,rgba(232,242,251,0),rgba(232,242,251,.14));
  clip-path:polygon(0 46%,100% 16%,100% 100%,0 100%)}
/* canvas is a replaced element, so inset:0 alone will not stretch it. Without
   an explicit size it renders at its DPR-scaled intrinsic width and overhangs. */
.hero__snow{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero__veil{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(6,24,41,.62) 0%,rgba(6,24,41,.12) 30%,rgba(6,24,41,.5) 66%,rgba(6,24,41,.9) 100%),
  linear-gradient(94deg,rgba(6,24,41,.72) 0%,rgba(6,24,41,.16) 62%,transparent 100%)}

.hero__in{position:relative;max-width:980px;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.hero .dsp,.hero h1{color:#fff}
.hero .dsp em{color:var(--ice)}
.hero .eyebrow{color:var(--ice);justify-content:center}
.hero__sub{margin-top:22px;max-width:56ch;font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.62;color:rgba(226,239,250,.86)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;justify-content:center}
.hero__note{margin-top:16px;font-size:13.5px;color:rgba(207,228,247,.58)}

/* Hero headline: light geometric sans, sentence case, first line muted.
   Reads far calmer than condensed uppercase and matches the reference set. */
.htitle{
  font-size:clamp(2.5rem,5.6vw,4.9rem);font-weight:700;line-height:1.02;
  letter-spacing:-.038em;color:#fff;
}
/* Company name as a light italic kicker above the SEO headline */
.htitle .kick{display:block;font-size:.3em;font-weight:300;font-style:italic;line-height:1.3;
  color:rgba(255,255,255,.9);letter-spacing:.005em;margin-bottom:.34em}

/* Rating pill above the headline */
.rpill{
  /* min-height, not height: the label wraps on small screens */
  display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:7px 16px 7px 12px;
  border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  font-size:13.5px;font-weight:500;color:#fff;margin-bottom:22px;
  transition:background .3s;
}
.rpill:hover{background:rgba(255,255,255,.2)}
.rpill__g{width:17px;height:17px;flex:none}
.rpill__s{display:flex;gap:2px;color:#FFC107}
.rpill__s svg{width:13px;height:13px}
.rpill span{opacity:.86}

/* Trust tiles under the hero */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.3vw,16px)}
.tile{
  display:flex;align-items:center;gap:15px;padding:22px 22px;border-radius:var(--r-m);
  background:#fff;box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .55s var(--e-out),box-shadow .55s var(--e-out);
}
.tile:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(10,27,46,.4),inset 0 0 0 1px transparent}
.tile__i{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;flex:none;
  background:var(--ice-2);color:var(--blue)}
.tile__i svg{width:22px;height:22px}
/* Scoped to the text block: a bare `.tile span` would also hit .tile__i (a span)
   and knock it out of grid, which pushed the icons off centre. */
.tile>div b{display:block;font-size:1.02rem;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.tile>div span{display:block;margin-top:2px;font-size:13.5px;color:var(--ink-3);line-height:1.4}


.cue{position:absolute;left:50%;translate:-50% 0;bottom:clamp(22px,3vw,34px);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(207,228,247,.5)}
.cue i{display:block;width:1px;height:32px;background:rgba(207,228,247,.3);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;inset:0;background:#fff;animation:cue 2.4s var(--e-io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ═══════════════════════════════════════════════════════════
   COMPACT BANNER + OVERLAPPING PANEL
   For pages whose first section is a panel. The banner is short
   and carries no buttons; the panel lifts into it so the two
   read as one composition instead of two stacked blocks.
   ═══════════════════════════════════════════════════════════ */
/* The top padding has to clear the floating header capsule *and* leave breathing
   room, or the headline reads as glued to the nav. */
.hero--band{min-height:min(62svh,560px);
  padding-top:calc(var(--hdr) + clamp(72px,8vw,124px));
  padding-bottom:clamp(90px,11vw,150px)}
.hero--band .hero__sub{margin-top:16px;max-width:50ch}
.panel--lift{margin-top:clamp(-130px,-9vw,-70px);position:relative;z-index:3}

/* A long headline needs a wider column and a smaller size to hold two lines.
   Pair .hero--wide on the section with .htitle--wide on the h1. */
.hero--wide .hero__in{max-width:1180px}
.htitle--wide{max-width:none;font-size:clamp(2.1rem,4.5vw,3.9rem)}

@media (max-width:1000px){
  .hero--band{min-height:min(64svh,540px);
    padding-top:calc(var(--hdr) + clamp(58px,10vw,96px));
    padding-bottom:clamp(80px,14vw,120px)}
  .panel--lift{margin-top:-70px}
}
@media (max-width:680px){
  .htitle--wide{max-width:none}
  .panel--lift{margin-top:-56px}
}

/* ═══════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════ */
.sec{padding:clamp(72px,8.5vw,130px) 0;position:relative}
.sec--flush{padding-top:0}
.panel{
  background:var(--navy);color:rgba(219,234,247,.72);
  border-radius:var(--r-xl);margin-inline:var(--gut);
  padding:clamp(56px,7vw,110px) 0;position:relative;overflow:hidden;
}
.panel .wrap{width:min(1280px,100% - (var(--gut) * 2))}
.panel__glow{position:absolute;width:52vw;height:52vw;max-width:760px;max-height:760px;border-radius:50%;
  background:radial-gradient(circle,rgba(78,155,238,.22),transparent 68%);pointer-events:none;filter:blur(20px)}

.shead{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,60px);align-items:end;margin-bottom:clamp(38px,4.5vw,64px)}
.shead--center{grid-template-columns:1fr;text-align:center;justify-items:center;max-width:720px;margin-inline:auto}
.shead .lede{max-width:46ch}

/* ═══════════════════════════════════════════════════════════
   SEASON SWITCH + SERVICE CARDS
   ═══════════════════════════════════════════════════════════ */
.svc[data-season=summer]{--acc:var(--green);--acc-2:var(--green-2);--acc-tint:var(--green-3)}

.sw{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--line);margin-bottom:clamp(28px,3.5vw,44px)}
.sw__t{position:absolute;top:4px;left:4px;height:calc(100% - 8px);width:var(--w,140px);border-radius:999px;
  background:var(--acc);transition:transform .6s var(--e-out),width .6s var(--e-out),background .45s}
.sw__b{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 26px;
  border-radius:999px;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink-2);transition:color .4s}
.sw__b svg{width:17px;height:17px}
.sw__b.on{color:#fff}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
.cards[hidden]{display:none}
.card{
  position:relative;display:block;border-radius:var(--r-l);overflow:hidden;
  aspect-ratio:1/1.34;background:var(--ice-2);isolation:isolate;
  transition:transform .7s var(--e-out),box-shadow .7s var(--e-out);
}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(10,27,46,.45)}
.card__ph{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* Absolute so it paints above the ::before/::after gradient fallback */
.card__ph img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-out)}
.card:hover .card__ph img{transform:scale(1.05)}
.card__ph::before{content:"";position:absolute;inset:0;background:linear-gradient(155deg,var(--c1,#D6E8F7),var(--c2,#5C8FBE))}
.card__ph::after{content:"";position:absolute;inset:0;
  background:radial-gradient(72% 48% at 26% 14%,rgba(255,255,255,.5),transparent 72%)}
.card__vl{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent 30%,rgba(7,22,38,.55) 62%,rgba(6,18,31,.93) 100%)}
/* Floating label chip on the photo (ComfortAir pattern) */
.card__chip{
  position:absolute;top:16px;left:16px;z-index:1;display:inline-flex;align-items:center;gap:7px;
  height:32px;padding:0 13px;border-radius:999px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;
}
.card__chip svg{width:14px;height:14px;color:var(--acc)}
.card__bd{position:absolute;inset:auto 0 0 0;padding:24px 22px 22px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.card__bd h3{color:#fff;font-size:clamp(1.18rem,1.5vw,1.4rem);letter-spacing:-.02em}
.card__bd p{margin-top:7px;font-size:13.5px;line-height:1.5;color:rgba(226,239,250,.76);max-width:26ch}
.card__go{width:40px;height:40px;border-radius:999px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34);
  backdrop-filter:blur(8px);transition:background .45s,color .45s,transform .55s var(--e-out)}
.card__go svg{width:16px;height:16px}
.card:hover .card__go{background:#fff;color:var(--ink);transform:rotate(45deg)}

.card__ph[data-p=plow]{--c1:#DDEDFA;--c2:#3E729F}
.card__ph[data-p=ind]{--c1:#D2E3F3;--c2:#2F5883}
.card__ph[data-p=condo]{--c1:#E5F1FB;--c2:#4F81AF}
.card__ph[data-p=ice]{--c1:#EBF5FD;--c2:#5C90BD}
.card__ph[data-p=grass]{--c1:#E6F7DB;--c2:#4E8C2C}
.card__ph[data-p=leaf]{--c1:#FBF1DA;--c2:#9A7327}
.card__ph[data-p=mulch]{--c1:#EEF8E3;--c2:#5F8C42}
.card__ph[data-p=junk]{--c1:#E8F1F7;--c2:#5B7286}

/* ═══════════════════════════════════════════════════════════
   NUMBERED LIST (why us)
   ═══════════════════════════════════════════════════════════ */
.why{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,90px);align-items:start}
.why__st{position:sticky;top:calc(var(--hdr) + 40px)}
.rows{border-top:1px solid rgba(207,228,247,.16)}
.row{display:grid;grid-template-columns:44px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid rgba(207,228,247,.16);align-items:start}
.row__n{font:800 15px/1 var(--f-d);letter-spacing:.1em;color:var(--blue-3);padding-top:5px}
.row h3{font-size:1.22rem;margin-bottom:8px}
.row p{font-size:15.5px;line-height:1.62;max-width:52ch}
.sec:not(.panel) .rows{border-top-color:var(--line)}
.sec:not(.panel) .row{border-bottom-color:var(--line)}
.sec:not(.panel) .row__n{color:var(--acc)}
/* Pairs with .shead--center. The default rows run the full 1280px wrap, which
   under a centred heading leaves three short items stranded on the left. This
   pulls the container in to a reading measure and sizes the type up to match. */
.rows--center{max-width:860px;margin-inline:auto}
.rows--center .row{grid-template-columns:52px 1fr;gap:26px;padding:30px 0}
.rows--center .row h3{font-size:1.38rem;margin-bottom:10px}
.rows--center .row p{font-size:16.5px;line-height:1.65;max-width:none}
.rows--center .row__n{font-size:16px;padding-top:6px}

/* ═══════════════════════════════════════════════════════════
   STATS
   ═══════════════════════════════════════════════════════════ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px);margin-top:clamp(40px,5vw,70px)}
.stat{padding:28px 24px;border-radius:var(--r-m);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(207,228,247,.14)}
.stat b{display:block;font:800 clamp(2.2rem,4vw,3.3rem)/1 var(--f-d);color:#fff}
.stat span{display:block;margin-top:8px;font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ice);opacity:.8}

/* ═══════════════════════════════════════════════════════════
   PROCESS
   ═══════════════════════════════════════════════════════════ */
/* A single rule across all three steps that fills as the section scrolls by.
   JS sets --p from 0 to 1. */
.steps__line{position:relative;height:2px;background:var(--line);margin-bottom:26px;overflow:hidden}
.steps__line span{position:absolute;inset:0;background:var(--acc);transform-origin:left;
  transform:scaleX(var(--p,0));transition:transform .12s linear}
@media (prefers-reduced-motion:reduce){.steps__line span{transform:scaleX(1)}}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,34px)}
.step{padding-top:0}
.step__n{display:block;font:800 13px/1 var(--f-d);letter-spacing:.16em;color:var(--acc);margin-bottom:18px}
.step h3{font-size:1.32rem;margin-bottom:10px}
.step p{font-size:15.5px;line-height:1.62}

/* ═══════════════════════════════════════════════════════════
   REVIEWS
   ═══════════════════════════════════════════════════════════ */
/* Continuous marquee: the track slides left forever, the item list is doubled
   so the seam never shows. Arrows nudge it; hover pauses it. */
.revwrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.revs{display:flex;gap:10px;width:max-content;will-change:transform}
.rev{
  flex:0 0 clamp(300px,26vw,380px);
  margin:0;                      /* figure has a UA margin of 1em 40px */
  background:#fff;border-radius:var(--r-l);
  padding:34px 32px 28px;display:flex;flex-direction:column;gap:20px;
  box-shadow:0 1px 2px rgba(10,27,46,.04);
  transition:box-shadow .5s var(--e-out);
}
.rev:hover{box-shadow:0 26px 50px -28px rgba(10,27,46,.35)}
.rev blockquote{font-size:1.02rem;line-height:1.6}
.rev__s{display:flex;align-items:center;gap:3px;color:#FFC107}
.rev__s svg{width:15px;height:15px}
.rev__s .gg{width:16px;height:16px;margin-right:5px}
.rev blockquote{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink);flex:1;letter-spacing:-.011em}
.rev figcaption{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line-2)}
.av{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;flex:none;
  background:var(--ice-2);color:var(--blue-2);font-size:13px;font-weight:700;letter-spacing:.02em}
.rev figcaption b{font-size:15px;font-weight:600;color:var(--ink)}
/* Centred controls */
.railnav{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:clamp(26px,3vw,38px)}
.rnav{width:46px;height:46px;border-radius:999px;display:grid;place-items:center;cursor:pointer;
  background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .3s,color .3s}
.rnav svg{width:18px;height:18px}
.rnav:hover{background:var(--ink);color:#fff}

/* ═══════════════════════════════════════════════════════════
   REVIEWS PAGE GRID + FAQ PAGE TOPIC SWITCH
   ═══════════════════════════════════════════════════════════ */
/* Fluid by count, not by hard-coded columns: auto-fit reflows to however many
   cards fit, and a short last row stretches to fill instead of leaving a gap.
   `align-items:stretch` (the default) keeps every card in a row the same height,
   so adding a long review never leaves a stubby neighbour beside it. */
.revgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(14px,1.6vw,20px)}
.revgrid .rev{flex:none;width:auto;height:100%}

.sw--3{max-width:100%}
.faqpage .acc--wide{max-width:940px;margin-inline:auto}
.faqpage .acc--wide[hidden]{display:none}
.faqpage .sw{margin-bottom:clamp(30px,4vw,46px)}
.faqpage .shead{margin-bottom:26px}
.faqpage>.wrap{display:flex;flex-direction:column;align-items:center}
.faqpage>.wrap>*{width:100%}
/* the switch keeps its inline-flex width so the pill hugs the three buttons */
.faqpage>.wrap>.sw{width:auto}

@media (max-width:680px){
  /* Stacked cards, not thin pills. As full-width rounded bars these read as
     three empty tablets: too short for the width, centred text floating in the
     middle, and almost no contrast between the chosen one and the rest. Cards
     with a left-aligned icon, real height and a visible selected state read as
     a control you are meant to press.
     The container drops its own ring and background, or you get a card inside a
     pill. Beats `.faqpage>.wrap>.sw{width:auto}`. */
  .faqpage>.wrap>.sw,.sw--3{width:100%}
  .sw--3{flex-direction:column;gap:10px;padding:0;background:none;box-shadow:none;border-radius:0}
  .sw--3 .sw__t{display:none}
  .sw--3 .sw__b{
    width:100%;height:auto;min-height:60px;padding:0 20px;gap:14px;
    justify-content:flex-start;text-align:left;font-size:16.5px;border-radius:var(--r-m);
    background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);
    transition:background .3s,color .3s,box-shadow .3s;
  }
  .sw--3 .sw__b svg{width:21px;height:21px;flex:none;opacity:.55;transition:opacity .3s}
  .sw--3 .sw__b.on{background:var(--acc);color:#fff;box-shadow:0 14px 28px -16px rgba(22,104,216,.75)}
  .sw--3 .sw__b.on svg{opacity:1}
  /* Tick on the selected card, so the state survives even if the fill reads as
     decoration on a small screen. */
  .sw--3 .sw__b::after{
    content:"";margin-left:auto;width:20px;height:20px;border-radius:999px;flex:none;
    box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow .3s,background .3s;
  }
  .sw--3 .sw__b.on::after{
    background:#fff;box-shadow:none;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center/16px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center/16px no-repeat;
  }
}

/* ═══════════════════════════════════════════════════════════
   TEAM + MOSAIC
   ═══════════════════════════════════════════════════════════ */
/* One group shot, then the individual portraits below it */
.groupshot{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/8.4;
  background:linear-gradient(150deg,#DDEDFA,#2F5883);margin-bottom:clamp(30px,4vw,52px)}
.groupshot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.groupshot__v{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,20,36,.05) 45%,rgba(6,20,36,.72) 100%)}
.groupshot__c{position:absolute;left:0;bottom:0;padding:clamp(24px,3vw,36px);color:#fff;max-width:52ch}
.groupshot__c b{display:block;font-size:clamp(1.2rem,1.7vw,1.6rem);font-weight:600;letter-spacing:-.025em}
.groupshot__c p{margin-top:8px;font-size:15.5px;line-height:1.6;color:rgba(226,239,250,.82)}

.crewhead{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);
  margin-bottom:20px;display:flex;align-items:center;gap:10px}
.crewhead::before{content:"";width:22px;height:1.5px;background:currentColor;opacity:.55}

.crew{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.mem figure{margin:0}
.mem__ph{position:relative;aspect-ratio:4/4.7;border-radius:var(--r-l);overflow:hidden;
  background:linear-gradient(165deg,var(--ice-2),#4E81AF);display:grid;place-items:center}
.mem__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-out)}
.mem:hover .mem__ph img{transform:scale(1.04)}
.mem__i{font:800 clamp(38px,4vw,54px)/1 var(--f-d);color:rgba(255,255,255,.55)}
.mem figcaption{padding-top:16px}
.mem figcaption b{display:block;font-size:1.12rem;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.mem figcaption span{display:block;margin-top:3px;font-size:13px;color:var(--ink-3)}

.mos{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(90px,11vw,150px);gap:clamp(10px,1.2vw,16px);margin-top:clamp(20px,2.6vw,34px)}
.mo{border-radius:var(--r-m);overflow:hidden;position:relative;background:linear-gradient(150deg,#DDEDFA,#5C8FBE)}
.mo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
.mo:hover img{transform:scale(1.05)}
.mo:nth-child(1){grid-column:span 2;grid-row:span 2}
.mo:nth-child(2){grid-column:span 3;grid-row:span 2}
.mo:nth-child(3){grid-column:span 1;grid-row:span 2}
.mo:nth-child(4){grid-column:span 3;grid-row:span 2}
.mo:nth-child(5){grid-column:span 3;grid-row:span 2;background:linear-gradient(140deg,#E6F7DB,#4E8C2C)}

/* ═══════════════════════════════════════════════════════════
   SERVICE AREA
   ═══════════════════════════════════════════════════════════ */
.area{display:grid;grid-template-columns:1fr .8fr;gap:clamp(32px,5vw,80px);align-items:center}
.hoods{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.hoods li{padding:8px 15px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--ice);
  box-shadow:inset 0 0 0 1px rgba(207,228,247,.2)}
/* Same chips on a light section */
.hoods--light li{color:var(--ink-2);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.sec:not(.panel) .map{box-shadow:none}
.tile a{color:inherit;text-decoration:none}
.map{position:relative;aspect-ratio:1;border-radius:var(--r-xl);overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 50%,#0F3057,#061829);box-shadow:inset 0 0 0 1px rgba(207,228,247,.16)}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map__r{position:absolute;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(207,228,247,.26)}
.map__r:nth-of-type(1){width:36%;height:36%;animation:ring 4.5s var(--e-out) infinite}
.map__r:nth-of-type(2){width:60%;height:60%;animation:ring 4.5s var(--e-out) .7s infinite}
.map__r:nth-of-type(3){width:84%;height:84%;animation:ring 4.5s var(--e-out) 1.4s infinite}
@keyframes ring{0%{opacity:.1;transform:scale(.92)}50%{opacity:.55}100%{opacity:.1;transform:scale(1.02)}}
.map__p{position:relative;z-index:3;padding:12px 22px;border-radius:999px;background:var(--blue);color:#fff;
  font:800 17px/1 var(--f-d);text-transform:uppercase;letter-spacing:.06em;box-shadow:0 14px 32px -12px rgba(22,104,216,.9)}
@media (prefers-reduced-motion:reduce){.map__r{animation:none;opacity:.3}}

/* ═══════════════════════════════════════════════════════════
   SIMPLE PAGES (no banner) + SERVICE AREA
   ═══════════════════════════════════════════════════════════ */
.sec--first{padding-top:calc(var(--hdr) + clamp(48px,6vw,86px))}

.h1page{font-size:clamp(2.1rem,4.2vw,3.4rem);font-weight:700;letter-spacing:-.035em;line-height:1.05;color:var(--ink)}
.simplehead{max-width:44ch;margin-bottom:clamp(34px,4.5vw,52px)}
.simplehead .lede{max-width:52ch}
/* Centred variant: the column centres, and the headline and lede each get their
   own measure so neither runs the full width of the page. */
.simplehead--center{max-width:820px;margin-inline:auto;text-align:center}
.simplehead--center .h1page{max-width:17ch;margin-inline:auto}
.simplehead--center .lede{max-width:54ch;margin-inline:auto}

.revcta{display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap;justify-content:space-between;
  margin-top:clamp(30px,4vw,48px);padding:clamp(24px,3vw,34px);border-radius:var(--r-l);
  background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.revcta b{display:block;font-size:1.2rem;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.revcta p{margin-top:6px;font-size:15px;max-width:46ch}
.revcta__btns{display:flex;gap:10px;flex-wrap:wrap}

.area--page{align-items:center}
.map--light{box-shadow:0 30px 70px -34px rgba(10,27,46,.5)}

.areagrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px)}
.areacol{padding:26px 24px;border-radius:var(--r-m);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.areacol h3{font-size:1.05rem;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line);color:var(--ink)}
.areacol li{font-size:15px;padding:5px 0;color:var(--ink-2)}

.notelisted{display:flex;align-items:center;gap:clamp(16px,2vw,26px);flex-wrap:wrap;
  margin-top:clamp(22px,3vw,34px);padding:clamp(22px,2.6vw,30px);border-radius:var(--r-l);
  background:var(--ice-2);box-shadow:inset 0 0 0 1px var(--line)}
.notelisted__i{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;flex:none;
  background:#fff;color:var(--blue)}
.notelisted__i svg{width:24px;height:24px}
.notelisted b{display:block;font-size:1.08rem;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.notelisted p{margin-top:5px;font-size:15px;max-width:56ch}
.notelisted .btn{margin-left:auto}

/* Thank you page tick */
.ty__tick{display:grid;place-items:center;width:74px;height:74px;border-radius:999px;margin:0 auto 22px;
  background:rgba(99,198,60,.18);color:#8BDD57;box-shadow:inset 0 0 0 1.5px rgba(99,198,60,.42)}
.ty__tick svg{width:34px;height:34px}

/* Honeypot, hidden from people but visible to bots */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

@media (max-width:1000px){
  .areagrid{grid-template-columns:1fr 1fr}
  .notelisted .btn{margin-left:0}
}
@media (max-width:680px){
  .areagrid{grid-template-columns:1fr}
  .simplehead{max-width:none}
  .revcta,.notelisted{flex-direction:column;align-items:flex-start}
  /* Stacked, not `flex:1` side by side. Two buttons sharing a 325px row get
     134px each while their labels need 175px, so the text ran straight out of
     both pills. There is no width at which "Call (519) 933-8239" fits half a
     phone screen. */
  .revcta__btns{width:100%;flex-direction:column;gap:10px}
  .revcta__btns .btn{width:100%}
  .notelisted .btn{width:100%}
}

/* ═══════════════════════════════════════════════════════════
   INCLUDED-ITEM ICONS, FIGURE SLIDER, PANEL SNOWFALL
   ═══════════════════════════════════════════════════════════ */
.incl div{display:flex;flex-direction:column}
.incl__i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;margin-bottom:14px;
  background:var(--acc-tint);color:var(--acc-2)}
.incl__i svg{width:21px;height:21px}

.figslide{position:relative}
/* These sliders mix landscape and portrait phone photos. At the old 16/9.6 a
   portrait shot kept only 40% of its height and the subject was sliced in half.
   4/3.2 keeps about 60% of a portrait and 94% of a landscape, which is the best
   single ratio for a mixed set. Per-photo focal points do the rest. */
.figslide__frame{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3.2;
  background:linear-gradient(150deg,#DDEDFA,#3E729F)}
.figslide__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s var(--e-out)}
.figslide__frame img.on{opacity:1}
/* JS marks the active slide. Only the no-JS case needs a fallback, and it must
   not compete with .on or the two rules cancel each other out. */
html:not(.js) .figslide__frame img:first-of-type{opacity:1}
.figslide__nav{position:absolute;top:50%;translate:0 -50%;width:42px;height:42px;border-radius:999px;
  display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.9);color:var(--ink);
  box-shadow:0 10px 26px -12px rgba(6,20,36,.6);transition:background .28s,color .28s;z-index:2}
.figslide__nav svg{width:17px;height:17px}
.figslide__nav:hover{background:var(--blue);color:#fff}
.figslide__nav--prev{left:14px}
.figslide__nav--next{right:14px}
.figslide__dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.figslide__dots button{width:7px;height:7px;border-radius:999px;background:var(--line);cursor:pointer;padding:0;
  transition:width .4s var(--e-out),background .3s}
.figslide__dots button.on{width:22px;background:var(--blue)}

.panel--snow{isolation:isolate}
.panel__snow{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* ═══════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════ */
.faq{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(32px,5vw,80px);align-items:start}
.faq__h{position:sticky;top:calc(var(--hdr) + 40px)}
.faq__h .lede{max-width:34ch}

/* Numbered rows with a circular toggle (CoolFix pattern) */
.acc{border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q summary{
  display:grid;grid-template-columns:44px 1fr 40px;align-items:center;gap:18px;
  padding:22px 0;cursor:pointer;list-style:none;
}
.q summary::-webkit-details-marker{display:none}
.q__n{font-size:13px;font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums;transition:color .3s}
.q__t{font-size:17.5px;font-weight:600;color:var(--ink);letter-spacing:-.022em;transition:color .3s}
.q summary:hover .q__t,.q[open] .q__t{color:var(--blue)}
.q[open] .q__n{color:var(--blue)}
.q__i{
  position:relative;width:40px;height:40px;border-radius:999px;justify-self:end;
  background:var(--ice-2);transition:background .35s,transform .5s var(--e-out);
}
.q summary:hover .q__i{transform:scale(1.06)}
.q[open] .q__i{background:var(--blue)}
.q__i::before,.q__i::after{content:"";position:absolute;left:50%;top:50%;background:var(--blue);border-radius:2px;
  transition:transform .45s var(--e-out),background .35s}
.q__i::before{width:13px;height:1.8px;transform:translate(-50%,-50%)}
.q__i::after{width:1.8px;height:13px;transform:translate(-50%,-50%)}
.q[open] .q__i::before,.q[open] .q__i::after{background:#fff}
.q[open] .q__i::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0)}
.q__a{overflow:hidden}
.q__a p{padding:0 62px 26px 62px;font-size:16px;line-height:1.68;max-width:70ch}

/* Inside a dark panel the accordion has to invert. Without this the question
   text keeps `--ink` (navy) and disappears into the navy panel. */
.on-dark .acc{border-top-color:rgba(207,228,247,.2)}
.on-dark .q{border-bottom-color:rgba(207,228,247,.2)}
.on-dark .q__t{color:#fff}
.on-dark .q summary:hover .q__t,.on-dark .q[open] .q__t{color:var(--ice)}
.on-dark .q__n{color:rgba(207,228,247,.55)}
.on-dark .q[open] .q__n{color:var(--ice)}
.on-dark .q__a p{color:rgba(219,234,247,.78)}
.on-dark .q__i{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(207,228,247,.18)}
.on-dark .q__i::before,.on-dark .q__i::after{background:#fff}
.on-dark .q[open] .q__i{background:var(--blue);box-shadow:none}

/* ═══════════════════════════════════════════════════════════
   SHOWCASE: one large photo or clip, thumbnail strip below
   ═══════════════════════════════════════════════════════════ */
.show__main{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  /* No max-height. With `aspect-ratio` set, a height cap shrinks the box in
     BOTH directions, which is what stopped this filling the wrap: the thumb
     strip below ran full width while the main photo sat visibly narrower.
     Height is controlled by the ratio alone. */
  aspect-ratio:16/8.2;
  background:linear-gradient(150deg,#DDEDFA,#2F5883);margin-bottom:clamp(10px,1.2vw,16px);
}
.show__main img,.show__main video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.show__main img{opacity:0;transition:opacity .6s var(--e-out)}
.show__main img.on{opacity:1}
.show__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,20,36,.05) 40%,rgba(6,20,36,.6) 100%)}
.show__cap{position:absolute;left:0;bottom:0;padding:26px 28px;color:#fff;pointer-events:none}
.show__cap b{display:block;font-size:clamp(1.05rem,1.4vw,1.28rem);font-weight:600;letter-spacing:-.02em}
.show__cap span{display:block;margin-top:3px;font-size:13.5px;color:rgba(226,239,250,.75)}

/* Centred with the `translate` property, so hover must not touch `transform`
   or the button jumps half its height. Hover is colour only. */
.show__nav{
  position:absolute;top:50%;translate:0 -50%;width:50px;height:50px;border-radius:999px;cursor:pointer;
  display:grid;place-items:center;background:rgba(255,255,255,.9);color:var(--ink);
  box-shadow:0 12px 30px -12px rgba(6,20,36,.6);transition:background .28s,color .28s;
}
.show__nav svg{width:19px;height:19px}
.show__nav:hover{background:var(--blue);color:#fff}
.show__nav--prev{left:18px}
.show__nav--next{right:18px}

.show__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:78px;height:78px;border-radius:999px;
  display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.94);color:var(--blue);
  box-shadow:0 20px 50px -16px rgba(6,20,36,.7);transition:transform .5s var(--e-out);
}
.show__play[hidden]{display:none}
.show__play svg{width:26px;height:26px;margin-left:4px}
.show__play:hover{transform:translate(-50%,-50%) scale(1.08)}

/* Full width of the wrap. It used to be capped at 1080px, which left the gallery
   visibly narrower than every other section on the page. */
.show{width:100%}
.show__thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:clamp(8px,1vw,14px)}
.show__t{
  position:relative;aspect-ratio:16/10;border-radius:var(--r-s);overflow:hidden;cursor:pointer;padding:0;
  background:linear-gradient(150deg,#DDEDFA,#2F5883);opacity:.55;
  transition:opacity .4s,transform .5s var(--e-out),box-shadow .4s;
}
.show__t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.show__t:hover{opacity:.85;transform:translateY(-3px)}
.show__t.on{opacity:1;box-shadow:0 0 0 2.5px var(--blue)}
.show__t .vbadge{position:absolute;right:7px;top:7px;width:20px;height:20px;border-radius:999px;
  display:grid;place-items:center;background:rgba(6,20,36,.65);color:#fff}
.show__t .vbadge svg{width:9px;height:9px;margin-left:1px}

/* ═══════════════════════════════════════════════════════════
   REELS: 9:16 clip slider with a winter/summer toggle
   The track is a scroll-snap row rather than a transform, so a phone can
   swipe it natively and the arrows just drive scrollLeft. That also means
   the section can never trap a vertical wheel gesture.
   ═══════════════════════════════════════════════════════════ */
.reels>.wrap{display:flex;flex-direction:column;align-items:center}
.reels>.wrap>*{width:100%}
.reels>.wrap>.sw{width:auto}

.reel{position:relative}
.reel__vp{overflow:hidden}
.reel__track{
  display:flex;gap:clamp(12px,1.4vw,18px);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:4px;
}
.reel__track::-webkit-scrollbar{display:none}
.reel__track[hidden]{display:none}
.reel__c{
  position:relative;flex:0 0 calc((100% - (4 * clamp(12px,1.4vw,18px))) / 5);
  aspect-ratio:9/16;border-radius:var(--r-l);overflow:hidden;scroll-snap-align:start;
  background:linear-gradient(160deg,#DDEDFA,#2F5883);
  box-shadow:0 1px 2px rgba(10,27,46,.05);
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out);
}
.reel__c:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(10,27,46,.5)}
.reel__c.has-v{cursor:pointer;background:#0B2542}
/* The card is a thumbnail, so it always fills. Square source clips get cropped
   here on purpose; the lightbox shows them whole. */
.reel__c video,.reel__c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Placeholder: a play glyph and a soft sheen, so an empty card still reads as
   "a clip goes here" rather than as a broken image. */
.reel__ph{position:absolute;inset:0;display:grid;place-items:center}
.reel__ph::before{
  content:"";width:54px;height:54px;border-radius:999px;
  background:rgba(255,255,255,.9);box-shadow:0 18px 40px -14px rgba(6,20,36,.6);
}
.reel__ph::after{
  content:"";position:absolute;left:50%;top:50%;translate:-44% -50%;
  border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--blue);
}
/* Over a real clip the glyph sits above the video and fades out on play. */
.reel__c.has-v .reel__ph{z-index:2;transition:opacity .3s}
.reel__c.playing .reel__ph{opacity:0}
.reel__c.playing:hover .reel__ph{opacity:.55}
.reel__c[data-video=""] .reel__ph{opacity:.85}
.reel__lbl{
  position:absolute;left:0;right:0;bottom:0;padding:16px 16px 14px;
  font-size:13.5px;font-weight:600;line-height:1.35;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(6,20,36,.72));
}

.reel__nav{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:46px;height:46px;border-radius:999px;cursor:pointer;display:grid;place-items:center;
  background:#fff;color:var(--ink);box-shadow:0 14px 32px -14px rgba(10,27,46,.55),inset 0 0 0 1px var(--line);
  transition:background .28s,color .28s,opacity .28s;
}
.reel__nav svg{width:18px;height:18px}
.reel__nav:hover{background:var(--ink);color:#fff}
.reel__nav[disabled]{opacity:0;pointer-events:none}
.reel__nav--prev{left:calc(-1 * clamp(10px,1.6vw,23px))}
.reel__nav--next{right:calc(-1 * clamp(10px,1.6vw,23px))}

.reel__dots{display:flex;gap:7px;justify-content:center;margin-top:clamp(20px,2.4vw,30px)}
.reel__dots button{width:7px;height:7px;border-radius:999px;background:var(--line-2);cursor:pointer;
  transition:background .3s,width .35s var(--e-out)}
.reel__dots button.on{width:22px;background:var(--acc)}

@media (max-width:1180px){
  .reel__c{flex-basis:calc((100% - (3 * clamp(12px,1.4vw,18px))) / 4)}
}
@media (max-width:900px){
  .reel__c{flex-basis:calc((100% - (2 * 14px)) / 3)}
  .reel__nav{display:none}
}
@media (max-width:680px){
  /* One card centred with a sliver of its neighbours either side, so a swipe
     always lands on a centred card. The track needs matching side padding or
     the first and last card can never reach the middle: there is nothing to
     scroll past at either end. `--cw` is in vw and the padding is derived from
     it, because a percentage flex-basis would resolve against the track's
     content box (already reduced by that padding) and compound. */
  .reel{--cw:74vw}
  .reel__c{flex-basis:var(--cw);scroll-snap-align:center}
  .reel__track{gap:12px;padding-inline:calc((100vw - (var(--gut) * 2) - var(--cw)) / 2)}
  .reels>.wrap>.sw{width:100%}
}

/* Follow row under the reels */
.iglink{
  display:flex;align-items:center;gap:16px;margin-top:clamp(26px,3vw,40px);
  padding:18px 22px;border-radius:var(--r-m);background:#fff;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out);
}
.iglink:hover{transform:translateY(-3px);
  box-shadow:0 20px 40px -24px rgba(10,27,46,.4),inset 0 0 0 1px transparent}
.iglink__i{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;flex:none;
  background:var(--ice-2);color:var(--blue)}
.iglink__i svg{width:23px;height:23px}
/* Scoped to the text wrapper. A bare `.iglink > span` also matches .iglink__i,
   which is a span, and knocks the icon out of display:grid. */
.iglink__t{display:block}
.iglink__t b{display:block;font-size:1.02rem;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.iglink__t span{display:block;margin-top:2px;font-size:13.5px;color:var(--ink-3);line-height:1.4}
.iglink__go{width:20px;height:20px;margin-left:auto;flex:none;color:var(--ink-3);transition:color .3s}
.iglink:hover .iglink__go{color:var(--blue)}

/* ═══════════════════════════════════════════════════════════
   REEL LIGHTBOX
   Black transparent fade over the page, one 9:16 stage, arrows to step
   through the season on screen. The video is `contain` here so a square
   source clip is seen whole, unlike the cropped card thumbnail.
   ═══════════════════════════════════════════════════════════ */
.rlb{position:fixed;inset:0;z-index:350;display:grid;place-items:center;
  opacity:0;transition:opacity .34s var(--e-out)}
.rlb[hidden]{display:none}
.rlb.open{opacity:1}
.rlb__bg{position:absolute;inset:0;background:rgba(4,12,22,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer}
/* The scale-in lives on the frame, not the stage. A transform on an ancestor
   becomes the containing block for absolutely positioned descendants, which
   pulled the mobile counter and arrows inside the stage instead of anchoring
   them to the viewport. */
.rlb__stage{position:static;z-index:2;margin:0;display:flex;flex-direction:column;
  align-items:center;gap:14px}
/* Always 9:16, whatever the clip is. The square Instagram exports letterbox
   inside it, which is the right trade: the frame stays a consistent reel shape
   and no footage is cropped away. */
.rlb__frame{
  position:relative;aspect-ratio:9/16;height:min(80svh,860px);max-width:calc(100vw - 40px);
  border-radius:var(--r-l);overflow:hidden;background:#050D18;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  transform:scale(.96);transition:transform .4s var(--e-out);
}
.rlb.open .rlb__frame{transform:scale(1)}
.rlb__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#050D18}
.rlb__meta{font-size:13px;color:rgba(207,228,247,.6);font-variant-numeric:tabular-nums}

.rlb__x{position:absolute;top:18px;right:18px;z-index:4;width:46px;height:46px;border-radius:999px;
  display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(255,255,255,.12);
  transition:background .28s}
.rlb__x:hover{background:rgba(255,255,255,.24)}
.rlb__x svg{width:20px;height:20px}

.rlb__nav{position:absolute;top:50%;translate:0 -50%;z-index:4;
  width:52px;height:52px;border-radius:999px;display:grid;place-items:center;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.12);transition:background .28s,opacity .28s}
.rlb__nav:hover{background:rgba(255,255,255,.24)}
.rlb__nav svg{width:20px;height:20px}
.rlb__nav[disabled]{opacity:.25;pointer-events:none}
.rlb__nav--prev{left:clamp(12px,3vw,40px)}
.rlb__nav--next{right:clamp(12px,3vw,40px)}

@media (max-width:680px){
  /* Arrows drop to a bottom row: at this width they would cover the clip.
     The frame keeps its clip ratio and shrinks to whatever height is left. */
  .rlb__frame{width:calc(100vw - 32px);max-width:none;height:auto;
    max-height:calc(100svh - 200px)}
  .rlb__nav{top:auto;translate:none;width:48px;height:48px;
    bottom:calc(24px + env(safe-area-inset-bottom))}
  .rlb__nav--prev{left:calc(50% - 88px)}
  .rlb__nav--next{right:calc(50% - 88px)}
  .rlb__meta{position:absolute;left:50%;translate:-50% 0;
    bottom:calc(42px + env(safe-area-inset-bottom))}
  .rlb__x{top:14px;right:14px;width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .rlb,.rlb__frame{transition:none}
  .rlb__frame{transform:none}
}

/* ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */
.fld{display:block;margin-bottom:16px}
.fld>span{display:block;margin-bottom:7px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.fld input,.fld select,.fld textarea{
  width:100%;height:50px;padding:0 16px;border-radius:var(--r-s);border:1.5px solid var(--line);
  background:var(--fog);font:400 16px var(--f-b);color:var(--ink);
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.fld textarea{height:auto;padding:14px 16px;min-height:104px;resize:vertical;line-height:1.5}
.fld select{appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237089A1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.fld :is(input,select,textarea):focus{outline:0;border-color:var(--blue-3);background:#fff;box-shadow:0 0 0 4px rgba(78,155,238,.16)}
.fld ::placeholder{color:#9DB2C4}
.fld.bad :is(input,textarea){border-color:#E5484D;background:#FFF6F6}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Underline field style (service page sidebar) */
.uf{position:relative;margin-bottom:6px}
.uf input{width:100%;height:52px;padding:0 22px 0 0;background:none;border:0;border-bottom:1.5px solid rgba(207,228,247,.24);
  color:#fff;font:400 15.5px var(--f-b);transition:border-color .35s}
.uf input::placeholder{color:rgba(207,228,247,.5)}
.uf input:focus{outline:0;border-bottom-color:var(--ice)}
.uf::after{content:"✳";position:absolute;right:2px;top:17px;font-size:11px;color:var(--blue-3)}
.uf.bad input{border-bottom-color:#FF8A8F}

/* ═══════════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════════ */
/* Two column: details beside the form. Used by the home page contact panel. */
.ct{display:grid;grid-template-columns:1fr .92fr;gap:clamp(32px,5vw,80px);align-items:start;position:relative}
/* Stacked and generous, so each row is easy to scan and the column fills */
.cinfo{display:grid;grid-template-columns:1fr;gap:12px;margin-top:36px}
.cinfo li{display:flex;gap:18px;align-items:center;padding:20px 22px;border-radius:var(--r-m);
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(207,228,247,.13);
  transition:background .35s}
.cinfo li:hover{background:rgba(255,255,255,.08)}
.cinfo__i{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;flex:none;
  background:rgba(78,155,238,.16);color:var(--ice);box-shadow:inset 0 0 0 1px rgba(207,228,247,.18)}
.cinfo__i svg{width:24px;height:24px}
.cinfo b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ice);opacity:.7;margin-bottom:5px}
.cinfo a,.cinfo p{font-size:1.12rem;color:#fff;font-weight:600;letter-spacing:-.02em}
.cinfo a:hover{color:var(--ice)}

/* ── Contact page: one centred column. Header, form, then the details.
   The details sit on the light page background rather than in a dark box,
   because a single centred column has nothing to sit beside. ── */
.ctpage>.wrap{display:flex;flex-direction:column;align-items:center}
.ctpage>.wrap>*{width:100%}
.cform--solo{max-width:720px;margin-inline:auto;
  box-shadow:0 1px 2px rgba(10,27,46,.05),0 30px 60px -40px rgba(10,27,46,.4),inset 0 0 0 1px var(--line)}
.cinfo__lead{margin:clamp(38px,4.5vw,58px) 0 18px;text-align:center;
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
/* Fixed four-item list, so the counts are set explicitly (4, then 2x2, then 1)
   rather than left to auto-fit, which lands on three and strands one card. */
.cinfo--row{grid-template-columns:repeat(4,1fr);margin-top:0;max-width:1080px;margin-inline:auto}
.cinfo--row li{flex-direction:column;align-items:center;text-align:center;gap:14px;padding:28px 22px}
.cinfo--light li{background:#fff;box-shadow:inset 0 0 0 1px var(--line);
  transition:background .35s,box-shadow .5s var(--e-out),transform .5s var(--e-out)}
.cinfo--light li:hover{background:#fff;transform:translateY(-3px);
  box-shadow:0 20px 40px -24px rgba(10,27,46,.4),inset 0 0 0 1px transparent}
.cinfo--light .cinfo__i{background:var(--ice-2);color:var(--blue);box-shadow:none}
.cinfo--light b{color:var(--ink-3);opacity:1}
.cinfo--light a,.cinfo--light p{color:var(--ink);font-size:1.05rem;overflow-wrap:anywhere}
.cinfo--light a:hover{color:var(--blue)}

/* This white card lives inside .on-dark, which paints headings white. Reset it
   or the title is white on white. */
.cform{position:relative;background:#fff;border-radius:var(--r-xl);padding:clamp(26px,3vw,38px);color:var(--ink-2)}
.cform :is(h1,h2,h3,h4,b){color:var(--ink)}
.cform h3{font-size:1.4rem;margin-bottom:22px}
.cform__ok{position:absolute;inset:0;background:#fff;border-radius:var(--r-xl);display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;padding:40px}
.cform__ok[hidden]{display:none}
.cform__ok svg{width:52px;height:52px;color:var(--green);background:var(--green-3);border-radius:999px;padding:13px}
.cform .btn--full{margin-inline:auto}
.lb{color:var(--blue);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.ftr{background:var(--navy-2);color:rgba(207,228,247,.55);padding:clamp(56px,6vw,84px) 0 28px;margin-top:clamp(56px,6vw,90px)}
.ftr__t{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:clamp(24px,3vw,44px);padding-bottom:44px;border-bottom:1px solid rgba(207,228,247,.12)}
.ftr__b p{font-size:14.5px;line-height:1.7;margin:18px 0 22px;max-width:36ch}
.ftr h4{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.ftr__c a,.ftr__c span{display:block;font-size:14.5px;margin-bottom:10px;transition:color .25s}
.ftr__c a:hover{color:#fff}
.ftr__z{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:24px;font-size:13px}
/* Build credit sits on its own line under the legal row, quieter than both. */
.ftr__made{width:100%;padding-top:14px;margin-top:4px;border-top:1px solid rgba(207,228,247,.1);
  font-size:12.5px;color:rgba(207,228,247,.5)}
.ftr__made a{color:rgba(207,228,247,.78);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(207,228,247,.3);transition:color .25s,text-decoration-color .25s}
.ftr__made a:hover{color:#fff;text-decoration-color:#fff}

/* ═══════════════════════════════════════════════════════════
   QUOTE MODAL
   ═══════════════════════════════════════════════════════════ */
.qm{position:fixed;inset:0;z-index:300}
.qm[hidden]{display:none}
.qm__bg{position:absolute;inset:0;background:radial-gradient(85% 62% at 22% 0%,#12406F,#071A31 52%,#040F1D);
  opacity:0;transition:opacity .5s var(--e-out)}
.qm.open .qm__bg{opacity:1}
.qm__sh{position:relative;height:100dvh;display:flex;flex-direction:column;
  opacity:0;transform:translateY(20px);transition:opacity .5s var(--e-out) .05s,transform .6s var(--e-out) .05s}
.qm.open .qm__sh{opacity:1;transform:none}

.qm__h{display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:min(1060px,100% - (var(--gut) * 2));margin-inline:auto;padding:22px 0 14px}
.qm__hr{display:flex;align-items:center;gap:12px}
.qm__call{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;
  font-size:14px;font-weight:500;color:var(--ice);box-shadow:inset 0 0 0 1.5px rgba(207,228,247,.2);transition:background .3s}
.qm__call svg{width:15px;height:15px;color:var(--blue-3)}
.qm__call:hover{background:rgba(255,255,255,.08)}
.qm__x{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.09);color:#fff;transition:background .3s,transform .5s var(--e-out)}
.qm__x svg{width:19px;height:19px}
.qm__x:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}

.qm__p{width:min(1060px,100% - (var(--gut) * 2));margin-inline:auto;display:flex;align-items:center;gap:16px}
.qm__pb{flex:1;display:flex;gap:5px}
.qm__pb i{flex:1;height:3px;border-radius:999px;background:rgba(207,228,247,.18);overflow:hidden;position:relative}
.qm__pb i::after{content:"";position:absolute;inset:0;background:var(--ice);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--e-out)}
.qm__pb i.done::after{transform:none}
.qm__pt{font-size:12.5px;color:rgba(207,228,247,.6);white-space:nowrap;letter-spacing:.04em}
.qm__pt b{color:#fff;font-weight:600}

.qm__body{flex:1;display:flex;flex-direction:column;min-height:0}
.qm__scroll{flex:1;overflow-y:auto;padding:26px 0 36px;display:flex;flex-direction:column}
.st{width:min(1060px,100% - (var(--gut) * 2));margin-inline:auto;display:none}
.st.on{display:block;margin-block:auto;animation:stIn .55s var(--e-out) both}
.st.on.back{animation-name:stInB}
@keyframes stIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes stInB{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.st h2{color:#fff}
.st__s{margin:14px 0 30px;font-size:16.5px;line-height:1.6;color:rgba(219,234,247,.7);max-width:54ch}
.st__l{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ice);opacity:.75;margin-bottom:14px}
.st__l em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.7;font-weight:400}
.st__x{margin-top:32px;padding-top:26px;border-top:1px solid rgba(207,228,247,.14)}
.st__x[hidden]{display:none}
.st__e{margin-top:16px;font-size:14px;font-weight:500;color:#FF8A8F;min-height:20px}

.opts{display:grid;gap:12px}
.opts--3{grid-template-columns:repeat(3,1fr)}
.opts--2{grid-template-columns:repeat(2,1fr)}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt__b{position:relative;display:block;height:100%;padding:22px 20px;border-radius:var(--r-m);
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1.5px rgba(207,228,247,.16);
  transition:background .35s,box-shadow .35s,transform .5s var(--e-out)}
.opt:hover .opt__b{background:rgba(255,255,255,.09);transform:translateY(-2px)}
.opt input:focus-visible+.opt__b{box-shadow:inset 0 0 0 2px var(--blue-3),0 0 0 4px rgba(78,155,238,.28)}
.opt input:checked+.opt__b{background:rgba(78,155,238,.16);box-shadow:inset 0 0 0 2px var(--blue-3)}
.opt__b i{display:block;font-style:normal;font-size:22px;line-height:1;color:var(--ice);margin-bottom:12px}
.opt__b b{display:block;padding-right:34px;font-size:1.05rem;font-weight:600;color:#fff;letter-spacing:-.02em}
.opt__b span{display:block;margin-top:4px;font-size:13.5px;color:rgba(219,234,247,.62)}
.opt__b .opt__k{position:absolute;top:18px;right:18px;margin:0;width:22px;height:22px;border-radius:999px;
  box-shadow:inset 0 0 0 1.5px rgba(207,228,247,.3);transition:background .3s,box-shadow .3s}
.opt__k::after{content:"";position:absolute;left:7.5px;top:5px;width:6px;height:10px;border:solid #fff;
  border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .35s var(--e-out)}
.opt input:checked+.opt__b .opt__k{background:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue-3)}
.opt input:checked+.opt__b .opt__k::after{transform:rotate(45deg) scale(1)}

.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;padding:10px 18px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--ice);
  box-shadow:inset 0 0 0 1.5px rgba(207,228,247,.18);transition:background .3s,box-shadow .3s,color .3s}
.chip:hover span{background:rgba(255,255,255,.09)}
.chip input:checked+span{background:var(--blue);color:#fff;box-shadow:inset 0 0 0 1.5px var(--blue-3)}

.qf{max-width:720px}
.qf .fld>span{color:var(--ice);opacity:.8;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase}
.qf .fld :is(input,textarea){height:54px;border-radius:var(--r-m);background:rgba(255,255,255,.06);
  border:1.5px solid rgba(207,228,247,.18);color:#fff;font-size:16px}
.qf .fld textarea{height:auto;min-height:88px}
.qf .fld ::placeholder{color:rgba(207,228,247,.38)}
.qf .fld :is(input,textarea):focus{background:rgba(255,255,255,.1);border-color:var(--blue-3);box-shadow:0 0 0 4px rgba(78,155,238,.2)}
.qf .fld.bad :is(input,textarea){border-color:#FF8A8F;background:rgba(255,107,112,.1)}

/* Final step: fields left, running summary to the right so it's visible without
   scrolling to the bottom. Needs .on in the selector to beat `.st.on{display:block}`. */
.st.on.st--last{display:grid;grid-template-columns:1fr minmax(260px,340px);gap:clamp(24px,3vw,44px);align-items:start}
.st--last>h2,.st--last>.st__s{grid-column:1/-1}
.st--last .qf{max-width:none}

.sum{padding:22px 22px;border-radius:var(--r-m);background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(207,228,247,.14);display:grid;gap:10px;
  position:sticky;top:0}
.sum:empty{display:none}
.sum dl{display:flex;gap:16px;justify-content:space-between;margin:0;font-size:14.5px}
.sum dt{color:rgba(219,234,247,.6)}
.sum dd{margin:0;color:#fff;font-weight:500;text-align:right}

.done{max-width:620px}
.done__i{display:grid;place-items:center;width:70px;height:70px;border-radius:999px;margin-bottom:26px;
  background:rgba(99,198,60,.16);color:var(--green);box-shadow:inset 0 0 0 1.5px rgba(99,198,60,.36);
  animation:pop .65s var(--e-out) both}
.done__i svg{width:32px;height:32px}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.done__r{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.qm__f{display:flex;align-items:center;gap:18px;width:min(1060px,100% - (var(--gut) * 2));margin-inline:auto;
  padding:16px 0 22px;border-top:1px solid rgba(207,228,247,.14)}
.qm__n{margin-inline:auto;font-size:12.5px;color:rgba(207,228,247,.45)}
#qBack[hidden]{visibility:hidden;display:inline-flex}
#qNext{margin-left:auto}

/* ═══════════════════════════════════════════════════════════
   CHAT
   ═══════════════════════════════════════════════════════════ */
.chat{position:fixed;right:22px;bottom:22px;z-index:175;display:flex;flex-direction:column;align-items:flex-end;gap:13px}
.chat__fab{position:relative;width:56px;height:56px;border-radius:999px;cursor:pointer;display:grid;place-items:center;
  background:var(--blue);color:#fff;box-shadow:0 14px 32px -10px rgba(22,104,216,.85);
  transition:transform .55s var(--e-out),background .35s}
.chat__fab:hover{transform:translateY(-3px) scale(1.04);background:var(--blue-2)}
.chat__fab svg{width:24px;height:24px;position:absolute;transition:opacity .3s,transform .5s var(--e-out)}
.chat__fab .x{opacity:0;transform:rotate(-90deg) scale(.6)}
.chat.open .chat__fab .ic{opacity:0;transform:rotate(90deg) scale(.6)}
.chat.open .chat__fab .x{opacity:1;transform:none}
.chat__pulse{position:absolute;inset:0;border-radius:999px;animation:ping 3s var(--e-out) infinite}
.chat.open .chat__pulse{display:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(22,104,216,.5)}70%{box-shadow:0 0 0 16px rgba(22,104,216,0)}100%{box-shadow:0 0 0 0 rgba(22,104,216,0)}}
@media (prefers-reduced-motion:reduce){.chat__pulse{animation:none}}

.chat__p{width:min(360px,calc(100vw - 44px));border-radius:var(--r-l);overflow:hidden;background:#fff;
  box-shadow:0 30px 70px -26px rgba(10,27,46,.55);transform-origin:bottom right;
  animation:cin .42s var(--e-out) both}
.chat__p[hidden]{display:none}
@keyframes cin{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.chat__h{display:flex;align-items:center;gap:11px;padding:15px 15px 14px;background:var(--navy);color:#fff}
.chat__av{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:999px;flex:none;
  background:rgba(78,155,238,.3);font-size:13px;font-weight:700;overflow:hidden}
/* Absolute, or the photo paints under the gradient fallback behind it. */
.chat__av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.chat__h b{display:block;font-size:14.5px}
.chat__h>div>span{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(207,228,247,.72);margin-top:2px}
.chat__live{width:6px;height:6px;border-radius:999px;background:var(--green)}
.chat__x{margin-left:auto;width:30px;height:30px;border-radius:999px;background:rgba(255,255,255,.1);cursor:pointer;display:grid;place-items:center}
.chat__x svg{width:15px;height:15px}
/* Message form, not a scripted conversation */
.chat__body{padding:16px 15px 18px;background:var(--fog);position:relative}
.chat__body .fld{margin-bottom:10px}
.chat__body .fld>span{font-size:11.5px;margin-bottom:5px}
.chat__body .fld :is(input,textarea){height:42px;font-size:14.5px;border-radius:11px;background:#fff}
.chat__body .fld textarea{height:auto;min-height:78px;padding:11px 14px}
.chat__body .btn{margin-top:4px}
.chat__note{margin-top:10px;text-align:center;font-size:11.5px;color:var(--ink-3)}
.chat__ok{position:absolute;inset:0;background:var(--fog);display:grid;place-content:center;justify-items:center;
  gap:12px;text-align:center;padding:26px}
.chat__ok[hidden]{display:none}
.chat__ok svg{width:44px;height:44px;color:var(--green);background:var(--green-3);border-radius:999px;padding:11px}
.chat__ok b{color:var(--ink);font-size:1.02rem}
.chat__ok p{font-size:13.5px;line-height:1.55;color:var(--ink-2)}

/* ═══════════════════════════════════════════════════════════
   MOBILE STICKY BAR
   ═══════════════════════════════════════════════════════════ */
/* One full-width CTA. No separate call button: calling lives inside the sheet. */
/* Slides up once you are past the hero. Every banner already carries its own
   quote and call buttons, so showing this over them is a second CTA competing
   with the first. JS adds .on past 50vh. */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:170;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.93);backdrop-filter:blur(18px);border-top:1px solid var(--line);
  transform:translateY(115%);transition:transform .42s var(--e-out);will-change:transform}
.mbar.on{transform:none}
.mbar .btn{width:100%}
@media (prefers-reduced-motion:reduce){.mbar{transition:none}}

/* ═══════════════════════════════════════════════════════════
   MOBILE QUOTE SHEET (slides up from the bottom CTA)
   ═══════════════════════════════════════════════════════════ */
.qsheet{position:fixed;inset:0;z-index:250}
.qsheet[hidden]{display:none}
.qsheet__bg{position:absolute;inset:0;background:rgba(4,15,28,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .4s var(--e-out)}
.qsheet.open .qsheet__bg{opacity:1}
.qsheet__card{
  position:absolute;left:0;right:0;bottom:0;max-height:92svh;overflow-y:auto;
  background:#fff;border-radius:26px 26px 0 0;
  padding:10px 22px calc(26px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px -20px rgba(4,15,28,.5);
  transform:translateY(102%);transition:transform .52s var(--e-out);
}
.qsheet.open .qsheet__card{transform:none}
.qsheet__grab{display:block;width:44px;height:5px;border-radius:999px;background:var(--line);
  margin:0 auto 18px;cursor:pointer}
.qsheet__card h3{font-size:1.4rem;margin-bottom:6px}
.qsheet__lede{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin-bottom:20px}
.qsheet__or{display:flex;align-items:center;gap:14px;margin:20px 0 16px;
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.qsheet__or::before,.qsheet__or::after{content:"";flex:1;height:1px;background:var(--line)}
.qsheet__call{--h:54px;font-size:16px}
.qsheet__call svg{width:18px;height:18px}
.qsheet__ok{text-align:center;padding:26px 0 12px}
.qsheet__ok svg{width:52px;height:52px;color:var(--green);background:var(--green-3);border-radius:999px;padding:13px;margin:0 auto 16px}
.qsheet__ok b{display:block;font-size:1.15rem;color:var(--ink);margin-bottom:6px}
.qsheet__ok p{font-size:14.5px;line-height:1.55}
.qsheet__ok[hidden]{display:none}

/* ═══════════════════════════════════════════════════════════
   SERVICE PAGE
   ═══════════════════════════════════════════════════════════ */
.svcbody{display:grid;grid-template-columns:1fr 380px;gap:clamp(30px,4vw,64px);align-items:start}
.svcmain>*+*{margin-top:clamp(30px,3.6vw,52px)}
.prose h2{font-size:clamp(1.6rem,2.4vw,2.1rem);margin-bottom:16px}
.prose h3{font-size:1.28rem;margin-bottom:12px}
.prose p{font-size:16.5px;line-height:1.72;margin-bottom:16px}
.prose p:last-child{margin-bottom:0}
.prose a:not(.btn){color:var(--blue);font-weight:500;text-decoration:underline;text-underline-offset:3px}

.figure{border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/9;position:relative;
  background:linear-gradient(150deg,#DDEDFA,#3E729F)}
.figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.tick{border-top:1px solid var(--line)}
.tick li{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink)}
.tick li::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--acc);flex:none;margin-top:9px}

.incl{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.incl div{padding:22px 22px;border-radius:var(--r-m);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.incl b{display:block;font-size:1.02rem;font-weight:600;color:var(--ink);margin-bottom:6px;letter-spacing:-.02em}
.incl p{font-size:14.5px;line-height:1.55}

/* Just the lead form, sticky from the top of the section so it's fillable
   straight away rather than only once you reach the bottom. */
.side{position:sticky;top:calc(var(--hdr) + 30px)}

/* Compact stat strip, sits inline in the main column */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fig{padding:20px 22px;border-radius:var(--r-m);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.fig b{display:block;font:800 clamp(1.7rem,2.4vw,2.2rem)/1 var(--f-d);color:var(--ink)}
.fig span{display:block;margin-top:6px;font-size:12.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.scard{border-radius:var(--r-l);padding:26px 24px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.scard__ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--acc-tint);color:var(--acc-2);margin-bottom:16px}
.scard__ic svg{width:20px;height:20px}
.scard span{display:block;font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.scard b{display:block;font:800 clamp(2rem,3vw,2.6rem)/1 var(--f-d);color:var(--ink);margin-top:8px}

.lead{border-radius:var(--r-l);padding:30px 26px;background:var(--navy);color:rgba(219,234,247,.72)}
.lead h3{color:#fff;font-size:1.35rem;text-align:center;margin-bottom:10px}
.lead__s{text-align:center;font-size:14px;margin-bottom:22px}
.lead__s a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.lead .btn{margin-top:20px}
.lead__ok{text-align:center;padding:18px 0}
.lead__ok svg{width:44px;height:44px;color:var(--green);margin:0 auto 14px;background:rgba(99,198,60,.16);border-radius:999px;padding:11px}
.lead__ok b{color:#fff;display:block;margin-bottom:6px}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .cinfo--row{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .svcbody{grid-template-columns:1fr}
  .side{position:static}
  .ftr__t{grid-template-columns:1fr 1fr 1fr}
  .ftr__b{grid-column:1/-1}
}
@media (max-width:1000px){
  .mnav,.hphone{display:none}
  .burger{display:flex}
  .hdr .btn--fill{display:none}
  /* .mnav carried the margin-left:auto that pushed this cluster right, and it's
     hidden here, so the burger needs to claim that space itself. */
  .hgrp{margin-left:auto}
  .cap{padding-right:14px}

  /* Header gets out of the way on the way down and comes back on the way up.
     Desktop keeps it pinned; on a phone the screen space matters more. */
  .hdr{transition:transform .45s var(--e-out),padding .45s var(--e-out)}
  .hdr.hide{transform:translateY(-150%)}

  /* The sticky bottom bar is the primary CTA on mobile, so the floating
     message bubble would just compete with it. */
  .chat{display:none}
  .shead,.why,.area,.ct,.faq{grid-template-columns:1fr}
  .why__st,.faq__h{position:static}
  .steps{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  /* The contact page row keeps its auto-fit track here, or it collapses to one
     very wide card per line between 680px and 1000px. */
  .cinfo{grid-template-columns:1fr}
  .cinfo--row{grid-template-columns:repeat(2,1fr)}
  .crew{grid-template-columns:repeat(3,1fr)}
  .opts--3,.opts--2{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .st.on.st--last{grid-template-columns:1fr}
  .sum{position:static}
  .qm__call{display:none}
  .mbar{display:flex}
  .chat{right:16px;bottom:calc(76px + env(safe-area-inset-bottom))}
  .chat__fab{width:50px;height:50px}
  .chat__fab svg{width:22px;height:22px}
  .ftr{padding-bottom:calc(94px + env(safe-area-inset-bottom))}
  .show__nav{width:44px;height:44px}
  .show__nav--prev{left:12px}
  .show__nav--next{right:12px}
}
@media (max-width:680px){
  body{font-size:16px}
  /* 25px of breathing room around text and controls. Full-bleed containers
     (.panel) sit closer to the edge and add the rest back inside. */
  :root{--hdr:60px;--gut:25px}

  .cap{padding:0 10px 0 14px}
  .brand__logo{height:38px}
  .hdr.stuck .brand__logo{height:34px}
  .burger{width:42px;height:42px}

  .hero{min-height:100svh;padding-top:calc(var(--hdr) + 46px)}
  /* Must come after `.hero` above: same specificity, and a band banner should
     stay a band on a phone rather than eating the whole first screen. */
  .hero--band{min-height:min(64svh,470px);
    padding-top:calc(var(--hdr) + 52px);
    padding-bottom:clamp(64px,14vw,96px)}
  .hero__sub{font-size:1rem}
  .hero__cta{width:100%;gap:10px}
  .hero__cta .btn{width:100%}
  /* `.btn--white` trims its right padding to 8px so the arrow badge sits snug.
     At full width that asymmetry drags the centred label off to one side while
     the plain button beside it is dead centre, and the pair reads as misaligned.
     Matching the left padding to the badge's own width centres the LABEL and
     leaves the badge on the right, which is what the design intends. */
  .hero__cta .btn--white{padding-left:calc(40px + 6px + 8px)}
  .rpill{font-size:12.5px;gap:8px}
  .cue{display:none}

  .sec{padding:clamp(52px,10vw,72px) 0}
  /* `.sec` is declared after `.sec--first` at equal specificity, so without this
     the shorter mobile padding wins and the first section slides under the header.
     76px, not 46: the header floats 18px off the top, so 46 left only 28px of
     clear air under it and the first line read as stuck to the nav. */
  .sec--first{padding-top:calc(var(--hdr) + 76px)}
  .shead{margin-bottom:30px}
  /* The container almost touches the edge, and its content sits well inside it.
     34px total put the text nearly against the panel wall and read as cramped;
     56px gives the dark box real internal padding. Content inside a panel no
     longer lines up with content outside one on mobile, which is the right
     trade: a panel reads as its own surface. */
  .panel{margin-inline:8px;border-radius:var(--r-l);padding:clamp(44px,9vw,64px) 0}
  .panel .wrap{width:calc(100% - 56px)}

  /* Bigger headings, centred. Short ones are single-line in the markup so they
     don't break into a stub word. */
  /* The floors here used to sit ABOVE the fluid term on a phone: at 375px
     8.4vw is 31.5px but a 2.25rem floor forced it back to 36px, so the type
     never actually scaled down and headlines wrapped to three and four short
     lines filling barely half the column. Floors are now low enough that the
     vw term governs everything down to ~330px and only takes over below that. */
  .h2{font-size:clamp(1.75rem,8.4vw,2.75rem);letter-spacing:-.03em;line-height:1.06}
  .htitle{font-size:clamp(1.9rem,9vw,3rem)}
  .h1page{font-size:clamp(1.8rem,8.6vw,2.6rem);line-height:1.08}
  .dsp--band{font-size:clamp(2.1rem,10.5vw,3.4rem)}
  .htitle .kick{font-size:.34em}
  .lede{font-size:1.02rem}

  /* Centred headings read better on a narrow column */
  .shead,.shead>div{text-align:center}
  .shead .eyebrow,.crewhead{justify-content:center}
  .shead .lede{margin-inline:auto}
  .why__st,.faq__h,.area>div,.ct>div{text-align:center}
  .why__st .eyebrow,.faq__h .eyebrow,.area .eyebrow,.ct .eyebrow{justify-content:center}
  .why__st .lede,.faq__h .lede,.area .lede,.ct .lede{margin-inline:auto}
  .hoods{justify-content:center}
  .row{text-align:left}
  .cinfo li{text-align:left}
  /* Four centred blocks stacked is a lot of scrolling on a phone, so the row
     variant drops back to the compact icon-left layout. */
  .cinfo--row{grid-template-columns:1fr;gap:10px}
  .cinfo--row li{flex-direction:row;align-items:center;text-align:left;gap:16px;padding:18px 20px}
  .cinfo--light .cinfo__i{width:46px;height:46px;border-radius:13px}
  .cinfo--light .cinfo__i svg{width:21px;height:21px}
  .cinfo--light a,.cinfo--light p{font-size:1rem}

  /* Centred header: the headline gets the full column on a narrow screen */
  .simplehead--center{max-width:none}
  .simplehead--center .h1page{max-width:none}

  /* Number gutter tightens so the copy keeps its measure on a phone */
  .rows--center .row{grid-template-columns:34px 1fr;gap:14px;padding:24px 0}
  .rows--center .row h3{font-size:1.24rem}
  .rows--center .row p{font-size:16px}
  .rows--center .row__n{font-size:14px;padding-top:5px}

  .tiles{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .card{aspect-ratio:1/1}
  .crew{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:26px}
  .stats{grid-template-columns:1fr 1fr}
  .mos{grid-template-columns:1fr;grid-auto-rows:190px}
  .mo:nth-child(n){grid-column:span 1;grid-row:span 1}
  .f2{grid-template-columns:1fr;gap:0}
  .opts--3,.opts--2{grid-template-columns:1fr}
  .incl{grid-template-columns:1fr}
  .figs{grid-template-columns:1fr}
  .hoods{gap:6px}
  .hoods li{font-size:12.5px;padding:6px 12px}
  .groupshot{aspect-ratio:4/3.4}

  .revwrap{-webkit-mask-image:none;mask-image:none}
  .revs{gap:25px;padding-left:25px}
  .rev{flex-basis:calc(100vw - 50px);padding:28px 24px 24px}

  .show__main{aspect-ratio:4/3.2;border-radius:var(--r-l)}
  .show__thumbs{grid-auto-flow:row;grid-template-columns:repeat(4,1fr)}
  .show__cap{padding:18px}

  .q summary{grid-template-columns:26px 1fr 34px;gap:10px}
  .q__t{font-size:16px}
  .q__i{width:34px;height:34px}
  .q__a p{padding:0 0 22px 36px}

  .sw{width:100%}
  .sw__b{flex:1;justify-content:center;padding:0 10px}
  .cform{padding:24px 20px}

  /* Footer centred and a touch larger so it reads on a phone. The logo is the
     one thing that should not shrink here: it is the sign-off. `.brand__logo`
     is capped at 38px for the header capsule, so the footer has to opt back
     out at higher specificity. */
  .ftr__t{grid-template-columns:1fr;gap:34px;text-align:center;padding-bottom:34px}
  .ftr .brand__logo{height:74px}
  .ftr__b{display:flex;flex-direction:column;align-items:center}
  .ftr__b p{margin-inline:auto;font-size:15.5px;max-width:34ch}
  .ftr h4{font-size:13px;letter-spacing:.14em;margin-bottom:12px}
  .ftr__c a,.ftr__c span{font-size:16px;margin-bottom:12px}
  .ftr__z{justify-content:center;text-align:center;font-size:13.5px;gap:8px}
  .ftr__z p{width:100%}

  .qm__h{padding:14px 0 10px}
  .qm__n{display:none}
  .mbar{padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .mbar .btn{--h:52px}
}



/* ═══════════════════════════════════════════════════════════
   FOCAL POINTS
   Every photo slot uses object-fit:cover, so whichever way the container
   ratio differs from the photo, something gets cut. These say WHAT to keep.

   Rule of thumb used here: name the vertical position of the subject.
   Phone photos are portrait and usually have the action in the middle band
   with sky or asphalt padding the ends, so most of these pull upward.

   Placed last so they win over the component rules without !important.
   ═══════════════════════════════════════════════════════════ */

/* ── Wide banners. The narrow crops are the mobile hero (100svh) and the
      showcase strip, so these mostly steer horizontally toward the trucks. ── */
img[src*="banner-night"]      {object-position:38% 46%}  /* truck sits left, pile below */
img[src*="banner-storm"]      {object-position:55% 50%}  /* two trucks, centre right */
img[src*="banner-fleet"]      {object-position:50% 52%}
img[src*="banner-summer"]     {object-position:50% 48%}  /* crew walking away, mid frame */
img[src*="banner-mowing"]     {object-position:42% 55%}  /* mower left of centre */
img[src*="banner-lineup"]     {object-position:50% 50%}
img[src*="crew-group"]        {object-position:50% 45%}  /* three faces, upper middle */

/* ── Winter service photos ── */
img[src*="svc-plowing"]       {object-position:50% 38%}  /* truck high, empty lot below */
img[src*="svc-industrial"]    {object-position:44% 50%}  /* loader body left of centre */
img[src*="svc-condo"]         {object-position:50% 46%}  /* road and blade, mid frame */
img[src*="svc-deicing"]       {object-position:50% 46%}  /* salt pile, sky above */
img[src*="svc-sidewalk"]      {object-position:50% 42%}  /* loader against the building */
img[src*="svc-push"]          {object-position:55% 48%}
img[src*="svc-blade"]         {object-position:50% 48%}
img[src*="svc-lot-day"]       {object-position:50% 50%}
img[src*="svc-tractor"]       {object-position:50% 50%}

/* ── Summer service photos. Faces are high in the frame on these, so they
      pull further up than the winter set. ── */
img[src*="svc-grass"]         {object-position:50% 40%}
img[src*="svc-trim"]          {object-position:50% 32%}  /* face in the top third */
img[src*="svc-weed"]          {object-position:50% 42%}
img[src*="svc-edging"]        {object-position:50% 44%}
img[src*="svc-mow-bldg"]      {object-position:50% 45%}
img[src*="svc-standon"]       {object-position:50% 40%}
img[src*="svc-leaf"]          {object-position:50% 55%}  /* the walkway, not the sky */
img[src*="work-mower"]        {object-position:50% 58%}  /* mower low, sky fills the top */
img[src*="svc-mulch"]         {object-position:50% 50%}

/* ── Slot overrides where a slot crops far harder than the rest ── */
/* Gallery thumbs are 16:10 and hold portrait photos at under half height. */
.show__t img[src*="svc-condo"]   {object-position:50% 52%}
.show__t img[src*="svc-deicing"] {object-position:50% 50%}
.show__t img[src*="work-mower"]  {object-position:50% 52%}
/* The showcase stage is very wide, so a portrait photo needs its middle band. */
.show__main img[src*="banner-night"]{object-position:50% 46%}

@media (max-width:680px){
  /* The mobile hero is a tall 100svh crop: a landscape banner loses most of its
     width, so these hold the subject rather than the empty edge of the lot. */
  .hero__slide img[src*="banner-night"] {object-position:34% 50%}
  .hero__slide img[src*="banner-mowing"]{object-position:38% 55%}
  .hero__slide img[src*="banner-storm"] {object-position:58% 50%}
  .hero__slide img[src*="banner-fleet"] {object-position:46% 52%}
}

/* Drag affordance for pointer devices. Touch keeps the native gesture. */
@media (hover:hover){
  .reel__track{cursor:grab}
  .reel__track.dragging{cursor:grabbing;scroll-behavior:auto}
  /* Do NOT put `pointer-events:none` on the cards while dragging. `.dragging`
     lands on pointerdown, so the card stops being hit-testable before the click
     target is resolved and the lightbox can never open at all. Drag clicks are
     already swallowed in the capture phase by the `moved` check in main.js. */
  .figslide__frame{cursor:grab}
  .figslide__frame.dragging{cursor:grabbing}
}

/* Focal points for the photos added in the second batch */
img[src*="svc-storm"]        {object-position:50% 55%}  /* loader and truck, lower half */
img[src*="svc-loader-night"] {object-position:50% 50%}
img[src*="svc-condo-day"]    {object-position:50% 55%}  /* machine sits low against the row */
img[src*="svc-ty-mower"]     {object-position:50% 38%}  /* Ty's face, upper third */
img[src*="svc-ty-trim"]      {object-position:50% 40%}

/* ═══════════════════════════════════════════════════════════
   LEAD FORM ON MOBILE
   The underline fields are 52px tall with no horizontal padding, which is
   fine beside a mouse and too tight under a thumb: the tap targets sit
   right on top of each other and the labels read as one block. Taller
   fields, real gaps between them, and a heading that carries the card.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:680px){
  .lead{padding:32px 22px}
  .lead h3{font-size:1.75rem;letter-spacing:-.03em;line-height:1.15;margin-bottom:12px}
  .lead__s{font-size:15px;margin-bottom:28px}
  .uf{margin-bottom:14px}
  .uf input{height:62px;font-size:16.5px;padding-right:26px}
  /* Vertically centred on the taller field rather than pinned near the top. */
  .uf::after{top:50%;transform:translateY(-50%)}
  .lead .btn{margin-top:26px;--h:58px}
}

/* Shown only if a submit gets no response within 12s. See guard() in main.js. */
.sendfail{margin-top:14px;font-size:14px;line-height:1.5;color:#B4232B}
.sendfail a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.lead .sendfail,.qm .sendfail{color:#FF8A8F}