@layer reset, base, layout, components, utils;

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0}
  img,svg,canvas,video{display:block;max-width:100%}
  button,input{font:inherit;color:inherit}
}

@layer base{
  :root{
    /* sampled directly from logo-720-t.png - do not hand-tweak */
    --navy-900: #00111E;
    --navy-800: #002137;
    --navy-700: #023154;
    --navy-600: #004770;
    --navy-500: #0D6596;
    --navy-line:#0A4A73;

    --gold-hi:  #FED424;
    --gold:     #F2AA10;
    --gold-deep:#E67A00;
    --gold-edge:#C86900;
    --gold-ink: #002137;

    --red:      #C21005;
    --red-hi:   #E0300F;

    --sky:      #7FC4F0;

    --paper:    #F5F8FB;
    --paper-2:  #E8EEF4;
    /* body copy on dark. nine near-identical blue-greys used to live inline here,
       all at chroma .02, which read hazy against navy. two tokens, less tint,
       higher lightness, so the text lands as white instead of grey. */
    --text:     oklch(0.985 0.004 250);
    --text-dim: oklch(0.925 0.006 250);
    --ink:      #002137;
    --ink-2:    #2C4A63;
    --line:     #C9D6E2;

    --sh-1: 0 1px 2px rgb(0 17 30 / .10), 0 6px 16px rgb(0 17 30 / .10);
    --sh-2: 0 2px 6px rgb(0 17 30 / .14), 0 18px 44px rgb(0 17 30 / .22);
    --sh-gold: 0 10px 30px rgb(230 122 0 / .38);

    --r-lg:20px; --r-md:13px; --r-sm:9px;
    --gutter: clamp(1.15rem, 4vw, 4rem);
    --display:"Archivo", ui-sans-serif, system-ui, sans-serif;       /* sub-heads, buttons, labels */
    --display-xl:"Anton", "Archivo", Impact, ui-sans-serif, sans-serif; /* big headers - matches the logo lettering */
    --body:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  }
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  /* 500 not 400: light type on a dark ground optically thins out, so body copy
     needs the extra weight to read as solid white rather than grey haze */
  body{font-family:var(--body);color:var(--paper);line-height:1.6;font-size:1.0625rem;font-weight:500;overflow-x:hidden;
    background:linear-gradient(175deg, rgb(0 17 30) 0%, rgb(0 33 55) 50%, rgb(0 17 30) 100%);
    background-attachment:fixed}
  h1,h2,h3,h4{font-family:var(--display);line-height:1.03;text-wrap:balance;font-weight:900;letter-spacing:-0.035em}
  p{text-wrap:pretty}
  a{color:inherit}
  :where(a,button):focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:var(--r-sm)}
  ::selection{background:var(--gold);color:var(--gold-ink)}
}

@layer layout{
  .wrap{width:min(100% - (var(--gutter)*2), 1260px);margin-inline:auto}
  .pad-xl{padding-block:clamp(5rem,10vw,9rem)}
  .pad-lg{padding-block:clamp(4rem,8vw,7rem)}
  .pad-sm{padding-block:clamp(1.75rem,3.5vw,2.75rem)}
}

@layer components{

/* ============ TOP BANNER ============ */
/* Section scaled up 25%: padding 1.25-2.1rem -> 1.56-2.63rem, mascot 84-150px
   -> 105-188px, wordmark 1.85-3.5rem -> 2.31-4.38rem. */
.topbanner{position:relative;overflow:clip;color:var(--paper);
  padding-block:clamp(2rem,4vw,3.5rem);
  background:linear-gradient(135deg, rgb(0 17 30) 0%, rgb(2 49 84) 50%, rgb(0 17 30) 100%)}
.topbanner::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 120% at 22% 55%, rgb(230 122 0 / .30), transparent 60%)}
.topbanner::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--gold-hi), var(--gold-deep), var(--gold-hi), transparent)}
.topbanner__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(.5rem,1.4vw,1.1rem)}
/* display:contents so the <picture> wrapper drops out of layout entirely and
   the <img> stays a direct flex child of .topbanner__in. Every existing
   .topbanner__mascot rule below then applies unchanged, hover included. */
.topbanner__pic{display:contents}
.topbanner__mascot{width:clamp(16rem,44vw,36rem);height:auto;
  filter:drop-shadow(0 8px 20px oklch(0 0 0 / .55)) drop-shadow(0 0 26px rgb(230 122 0 / .45))}
/* CLS reservation for the town picker. town-picker.js injects the button at
   2600ms as a sibling of the tagline, i.e. INSIDE this block and ABOVE the
   CTA row, so the space has to be held here. An earlier version reserved it
   on .topbanner__in instead: that padding sits below the CTA row, so removing
   it could never cancel the downward push the injection causes, and the
   buttons still jumped (measured 0.0713). 2.7rem == the 42.9px the button
   plus its 8px top margin actually occupies. */
.topbanner__id{min-width:0;position:relative;padding-block-end:2.7rem}
/* The button is taken OUT of flow and parked in that reserved 2.7rem. Nothing
   reflows when it arrives, so the shift is structurally impossible rather than
   merely cancelled out. The previous :has() version removed the padding in the
   same beat the button was inserted, but the selector re-evaluates a frame
   late, so the CTA row still jumped once (0.0394). Position is deterministic. */
.townpick{position:absolute;bottom:0;left:50%;translate:-50% 0;margin-block-start:0}

/* Primary conversion CTA: deliberately larger than any other button on the page
   and carrying a pulsing gold halo, because it is the one click that matters. */
.topbanner__act .btn{
  font-size:clamp(1.7rem,2.4vw,2.1rem);
  padding:1.25rem 2.2rem;
  border-radius:var(--r-lg,16px);
  letter-spacing:.02em;
  white-space:normal;line-height:1.2;
  justify-content:center;text-align:center;
}
.topbanner__act .btn--gold{
  line-height:1.35;
  text-shadow:0 1px 0 rgb(255 255 255 / .65), 0 2px 0 rgb(255 255 255 / .25),
              0 -1px 1px rgb(0 0 0 / .2), 0 3px 6px rgb(0 0 0 / .25)}
.topbanner__word{text-align:center;
  font-family:var(--display-xl);font-size:clamp(3rem,9vw,8rem);line-height:.90;text-transform:uppercase;letter-spacing:.04em;
  background:linear-gradient(180deg, #FED424 0%, var(--gold-hi) 18%, var(--gold) 50%, var(--gold-deep) 82%, #C86900 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #8a4d00) drop-shadow(0 4px 0 #633600)
         drop-shadow(0 6px 0 #3d2100) drop-shadow(0 8px 0 #2a1700)
         drop-shadow(0 14px 22px rgb(0 0 0 / .6))}
@media(min-width:1320px){.topbanner .wrap{width:min(100% - (var(--gutter)*2), 1560px)}}
.topbanner__word2{font-family:var(--display-xl);font-weight:400;font-size:clamp(1.5rem,3.8vw,3.2rem);
  letter-spacing:.02em;text-transform:uppercase;margin-top:.5rem;line-height:1.15;
  white-space:nowrap;
  background:linear-gradient(180deg, var(--gold-hi) 10%, var(--gold-deep) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #8a4d00) drop-shadow(0 6px 0 #633600)
         drop-shadow(0 9px 0 #3d2100) drop-shadow(0 14px 18px rgb(0 0 0 / .55))}
/* Wrapped case. The extrusion stack reaches 14px below the baseline, so at
   line-height 1.15 the shadows off line one land on the caps of line two and
   the whole thing reads as mud. Two changes, both needed: open the leading so
   there is room for the stack, and shorten the stack itself, because a 26px
   glyph does not need the same extrusion depth as an 80px one. */
@media(max-width:760px){
  .topbanner__word2{font-size:clamp(1rem,4.6vw,1.75rem);white-space:normal;text-wrap:balance;
    line-height:1.45;
    filter:drop-shadow(0 2px 0 #8a4d00) drop-shadow(0 4px 0 #633600)
           drop-shadow(0 7px 10px rgb(0 0 0 / .55))}
  .topbanner__tag{line-height:1.42}
}
.topbanner__tag{font-size:clamp(1.3rem,3vw,2.4rem);font-weight:800;color:#fff;margin-top:.6rem;line-height:1.15;
  text-shadow:0 2px 0 #011827, 0 4px 0 #01111c, 0 8px 18px rgb(0 0 0 / .6)}
/* Two rows: logo + wordmark own the full top row, then the pill and the CTA sit
   below on their own row, sharing the width evenly. flex-basis:100% is what
   forces the row break inside the wrapping parent. */
.topbanner__act{width:100%;display:grid;
  grid-template-columns:1fr 1fr;align-items:stretch;
  gap:1.1rem;margin-inline-start:0;margin-block-start:1.1rem}
.topbanner__act>*{min-width:0}
@media(max-width:640px){
  .topbanner__act{grid-template-columns:1fr;gap:.7rem}
}
.topbanner__pill{position:relative;overflow:hidden;border-radius:var(--r-lg,16px);padding:1.1rem 2rem;text-align:center;line-height:1.35;
  background:linear-gradient(180deg, rgb(13 101 150), rgb(2 49 84));
  box-shadow:0 6px 0 rgb(230 122 0), 0 7px 2px oklch(0 0 0 / .35), inset 0 1px 0 oklch(1 0 0 / .22);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s cubic-bezier(.2,.8,.3,1)}
.topbanner__pill::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg, transparent 40%, oklch(1 0 0 / .18) 50%, transparent 60%);
  transform:translateX(-120%);animation:pillShimmer 4s ease-in-out infinite}
@keyframes pillShimmer{0%,80%,100%{transform:translateX(-120%)}60%{transform:translateX(120%)}}
.topbanner__pill:hover{transform:translateY(-3px);
  box-shadow:0 9px 0 rgb(230 122 0), 0 11px 3px oklch(0 0 0 / .38), inset 0 1px 0 oklch(1 0 0 / .28)}
.topbanner__pill:active{transform:translateY(3px);
  box-shadow:0 2px 0 rgb(230 122 0), 0 3px 2px oklch(0 0 0 / .34), inset 0 1px 0 oklch(1 0 0 / .22)}
@media (prefers-reduced-motion: reduce){.topbanner__pill::after{animation:none}}
/* brand lockup gets the same lift so the whole top bar moves as one system */
.brand{transition:transform .16s cubic-bezier(.2,.8,.3,1)}
.brand:hover{transform:translateY(-2px)}
.topbanner__mascot{transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.topbanner__in:hover .topbanner__mascot{transform:translateY(-4px) rotate(-1.5deg)}
.topbanner__pill span{display:block;font-family:var(--display);font-weight:800;font-size:1.1rem;color:#fff;
  text-shadow:0 1px 0 oklch(0 0 0 / .3)}
.topbanner__pill b{display:block;font-family:var(--display);font-weight:900;font-size:1.15rem;color:var(--gold-hi);margin-top:.2rem;
  text-shadow:0 1px 0 oklch(0 0 0 / .3)}
.topbanner__pill a{text-decoration:none}
.topbanner__pill a:hover{text-decoration:underline}

/* ============ HEADER ============ */
.topbar{position:sticky;top:0;z-index:80;background:rgb(0 33 55 / .82);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--navy-line);overflow:hidden}
.topbar canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.topbar__in{display:flex;align-items:center;gap:1rem;min-height:96px;position:relative;z-index:1;flex-wrap:wrap;padding-block:.8rem}
/* The global .wrap caps at 1260px, which is exactly what brand + nav + both call
   buttons measure, so everything wrapped. The bar gets its own wider track on
   large screens; body copy still reads at 1260. */
@media(min-width:1320px){.topbar .wrap{width:min(100% - (var(--gutter)*2), 1560px)}}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--paper)}
.brand img{width:52px;height:52px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 8px oklch(0 0 0 / .4))}
.brand__txt{font-family:var(--display);font-weight:900;font-size:1.02rem;line-height:1.05;letter-spacing:-.04em;text-transform:uppercase}
.brand__txt i{font-style:normal;color:var(--gold);display:block;font-size:.72rem;letter-spacing:.14em;font-weight:700;margin-top:2px}
.topnav{margin-inline-start:auto;display:none;gap:2rem}
@media(min-width:1000px){.topnav{display:flex}}
.topnav a{text-decoration:none;font-size:.93rem;font-weight:600;color:var(--text);letter-spacing:.01em;transition:color .18s ease-out;position:relative}
.topnav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .22s ease-out}
.topnav a:hover{color:#fff}
.topnav a:hover::after{transform:scaleX(1)}

/* --- 3D push buttons: solid extruded edge + lift on hover + press on click --- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1.1rem 1.8rem;border-radius:var(--r-md);
  font-family:var(--display);font-weight:900;font-size:clamp(1.65rem,2.4vw,2.05rem);letter-spacing:.01em;text-decoration:none;border:0;cursor:pointer;text-transform:uppercase;
  transform:translateZ(0);white-space:nowrap;overflow:hidden;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s cubic-bezier(.2,.8,.3,1), filter .16s ease-out}
/* top-edge sheen so the face reads as a lit surface */
.btn::after{content:"";position:absolute;inset:1px 1px auto;height:45%;border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 40% 40%;
  background:linear-gradient(180deg, oklch(1 0 0 / .38), oklch(1 0 0 / 0));pointer-events:none}
.btn:active{transform:translateY(4px)}

.btn::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg, transparent 40%, oklch(1 0 0 / .22) 50%, transparent 60%);
  transform:translateX(-120%);animation:btnShimmer 5s ease-in-out infinite}
@keyframes btnShimmer{0%,75%,100%{transform:translateX(-120%)}55%{transform:translateX(120%)}}
@media (prefers-reduced-motion: reduce){.btn::before{animation:none}}
.btn--gold{
  background:linear-gradient(180deg, #FED424, var(--gold-hi) 30%, var(--gold-deep) 85%, #C86900);color:var(--gold-ink);
  box-shadow:
    0 6px 0 rgb(0 71 112),
    0 7px 2px rgb(200 105 0 / .35),
    0 14px 30px rgb(230 122 0 / .45),
    inset 0 1px 0 oklch(1 0 0 / .35);
}
.btn--gold:hover{transform:translateY(-3px);filter:brightness(1.08);
  box-shadow:0 9px 0 rgb(0 71 112), 0 11px 3px rgb(200 105 0 / .4), 0 22px 46px rgb(230 122 0 / .6), inset 0 1px 0 oklch(1 0 0 / .35)}
.btn--gold:active{box-shadow:0 2px 0 rgb(0 71 112), 0 3px 2px rgb(200 105 0 / .35), 0 6px 14px rgb(230 122 0 / .35), inset 0 1px 0 oklch(1 0 0 / .25)}

.btn--red{
  background:linear-gradient(180deg, var(--red-hi), var(--red));color:#fff;
  box-shadow:0 6px 0 rgb(194 16 5), 0 7px 2px rgb(194 16 5 / .38), 0 14px 30px rgb(194 16 5 / .38);
}
.btn--red:hover{transform:translateY(-3px);filter:brightness(1.06);
  box-shadow:0 9px 0 rgb(194 16 5), 0 11px 3px rgb(194 16 5 / .40), 0 22px 46px rgb(194 16 5 / .5)}
.btn--red:active{box-shadow:0 2px 0 rgb(194 16 5), 0 3px 2px rgb(194 16 5 / .38), 0 6px 14px rgb(194 16 5 / .35)}

/* solid navy face, gold edge, gold lettering: the complementary-edge rule, so this
   sits in the same 3D system as the gold and red buttons instead of reading as a ghost */
.btn--wire{background:linear-gradient(180deg, var(--navy-500) 0%, var(--navy-600) 48%, var(--navy-700) 100%);
  color:var(--gold-hi);
  box-shadow:0 6px 0 rgb(230 122 0), 0 7px 2px oklch(0 0 0 / .35), 0 14px 28px oklch(0 0 0 / .35), inset 0 1px 0 oklch(1 0 0 / .25);
  text-shadow:0 1px 4px oklch(0 0 0 / .5)}
.btn--wire::after{opacity:.32}
.btn--wire:hover{transform:translateY(-3px);filter:brightness(1.08);
  box-shadow:0 9px 0 rgb(230 122 0), 0 11px 3px oklch(0 0 0 / .4), 0 22px 42px oklch(0 0 0 / .4), inset 0 1px 0 oklch(1 0 0 / .30)}
.btn--wire:active{transform:translateY(4px);
  box-shadow:0 2px 0 rgb(230 122 0), 0 3px 2px oklch(0 0 0 / .3), inset 0 1px 0 oklch(1 0 0 / .22)}

/* white emergency button sits on red - give it its own edge */
.emerg .btn::after{opacity:.7}
.btn--lg{padding:1.25rem 2.2rem;font-size:clamp(1.85rem,2.7vw,2.3rem)}
.topbar .btn{margin-inline-start:auto}
@media(min-width:1000px){.topbar .btn{margin-inline-start:0}}
@media(max-width:520px){.topbar .brand__txt{display:none}}

/* ============ HERO ============ */
.hero{position:relative;color:var(--paper);overflow:clip;isolation:isolate;
  background:linear-gradient(160deg, rgb(0 17 30) 0%, rgb(2 49 84) 55%, rgb(0 17 30) 100%)}
.hero__bgwrap{position:absolute !important;inset:0;z-index:-1 !important;overflow:hidden}
.hero__bgimg{width:100%;height:100%;object-fit:cover;object-position:70% 45%;display:block}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(100deg, rgb(0 17 30 / .90) 0%, rgb(0 17 30 / .80) 32%, rgb(0 17 30 / .45) 60%, rgb(0 17 30 / .30) 100%),
    radial-gradient(70% 60% at 78% 22%, rgb(13 101 150 / .40), transparent 62%),
    radial-gradient(60% 55% at 12% 88%, rgb(230 122 0 / .20), transparent 60%);
}
/* #hexfield canvas removed from the markup; its rule went with it. */
.hero__grid{position:relative;z-index:3;display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media(min-width:1020px){.hero__grid{grid-template-columns:7fr 5fr}}

/* 75% larger (.76rem -> 1.33rem) and carrying the same layered gold extrude the
   headings use, so it reads as part of the 3D type system rather than a label. */
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--display-xl);
  font-size:clamp(1.6rem, 3vw, 2.4rem);font-weight:400;letter-spacing:.002em;text-transform:uppercase;
  margin-block-end:1.4rem;
  background:linear-gradient(180deg, var(--gold-hi) 10%, var(--gold-deep) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #8a4d00) drop-shadow(0 4px 0 #633600)
         drop-shadow(0 6px 0 #3d2100) drop-shadow(0 12px 18px rgb(0 0 0 / .55))}
.hero h1{font-size:clamp(2.7rem, 6.4vw + .3rem, 5.4rem);letter-spacing:-.045em;text-transform:uppercase}
.hero h1 em{font-style:normal;display:block;
  background:linear-gradient(180deg, var(--gold-hi) 10%, var(--gold-deep) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgb(200 105 0 / .55));}
.hero__sub{margin-block-start:1.6rem;max-width:52ch;font-size:clamp(1.06rem,1.5vw,1.22rem);color:var(--text)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-block-start:2.4rem;justify-content:center;align-items:center}

.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-block-start:2.6rem;padding-block-start:2rem;border-top:1px solid var(--navy-line);list-style:none;padding-inline:0}
/* trust pills - 3D like the buttons: navy face, gold extruded edge */
.trust li{display:flex;align-items:center;gap:.6rem;font-size:1.4rem;font-weight:800;font-family:var(--display);
  color:var(--gold-hi);letter-spacing:-.005em;
  background:linear-gradient(180deg, rgb(13 101 150), rgb(2 49 84));
  border-radius:100px;padding:.85rem 1.5rem;cursor:default;
  box-shadow:0 5px 0 rgb(230 122 0), 0 6px 2px oklch(0 0 0 / .35), inset 0 1px 0 oklch(1 0 0 / .22);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s cubic-bezier(.2,.8,.3,1)}
.trust li:hover{transform:translateY(-3px);
  box-shadow:0 8px 0 rgb(230 122 0), 0 10px 3px oklch(0 0 0 / .38), inset 0 1px 0 oklch(1 0 0 / .28)}
.tick{width:22px;height:22px;flex:none;color:var(--gold)}

.hero .btn.callbtn{background:rgb(2 49 84 / .45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;box-shadow:0 4px 0 rgb(230 122 0 / .6), 0 5px 2px oklch(0 0 0 / .3), inset 0 1px 0 oklch(1 0 0 / .18);
  border:1px solid rgb(242 170 16 / .3)}
.hero .btn.callbtn:hover{box-shadow:0 7px 0 rgb(230 122 0 / .7), 0 9px 3px oklch(0 0 0 / .35), inset 0 1px 0 oklch(1 0 0 / .25)}
.hero .callbtn b{color:var(--gold-hi)}
.hero .callbtn em{color:rgb(248 250 253 / .85)}
.hero .btn--wire{background:rgb(2 49 84 / .4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 5px 0 rgb(230 122 0 / .55), 0 6px 2px oklch(0 0 0 / .3), inset 0 1px 0 oklch(1 0 0 / .18);
  border:1px solid rgb(242 170 16 / .25)}
.hero .btn--wire:hover{box-shadow:0 8px 0 rgb(230 122 0 / .65), 0 10px 3px oklch(0 0 0 / .35), inset 0 1px 0 oklch(1 0 0 / .25)}
.hero .trust li{background:rgb(2 49 84 / .4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 0 rgb(230 122 0 / .5), 0 5px 2px oklch(0 0 0 / .25), inset 0 1px 0 oklch(1 0 0 / .15);
  border:1px solid rgb(242 170 16 / .2)}
.hero .trust li:hover{box-shadow:0 7px 0 rgb(230 122 0 / .6), 0 9px 3px oklch(0 0 0 / .3), inset 0 1px 0 oklch(1 0 0 / .22)}

.hero__mascot{position:relative;display:grid;place-items:center}
.hero__mascot img{width:min(112%,560px);max-width:none;filter:drop-shadow(0 30px 55px oklch(0 0 0 / .55));animation:float 6.5s ease-in-out infinite}
@media(max-width:1019px){.hero__mascot img{width:min(100%,420px)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-16px) rotate(.6deg)}}
.hero__ring{position:absolute;inset:auto;width:min(96%,520px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgb(242 170 16 / .22) 0%, transparent 62%);z-index:-1;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.06);opacity:1}}

/* ============ DUAL-NUMBER CALL BLOCKS ============ */
.callpair{display:flex;flex-wrap:wrap;gap:.85rem}
/* Both call buttons render the same width regardless of label length, so the
   pair reads as one matched unit instead of two mismatched slabs. */
.callpair .callbtn{flex:1 1 0;min-width:0}
.btn.callbtn{flex-direction:column;align-items:flex-start;gap:.12rem;padding:.72rem 1.3rem;
  background:linear-gradient(180deg, #FED424, var(--gold-hi) 30%, var(--gold-deep) 85%, #C86900);color:var(--gold-ink);
  box-shadow:0 6px 0 rgb(0 71 112), 0 7px 2px rgb(0 33 55 / .38), 0 14px 30px rgb(230 122 0 / .4), inset 0 1px 0 oklch(1 0 0 / .35);
  overflow:visible}
.btn.callbtn::before{display:none}
.btn.callbtn:hover{transform:translateY(-3px);filter:brightness(1.06);
  box-shadow:0 9px 0 rgb(0 71 112), 0 11px 3px rgb(0 33 55 / .4), 0 22px 46px rgb(230 122 0 / .5)}
.btn.callbtn:active{transform:translateY(4px);
  box-shadow:0 2px 0 rgb(0 71 112), 0 3px 2px rgb(0 33 55 / .38)}
.callbtn b{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:900;
  font-size:2.1rem;letter-spacing:-.01em;line-height:1.1;position:relative;z-index:2}
.callbtn em{font-style:normal;font-size:1.2rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  opacity:1;color:var(--gold-ink);padding-inline-start:1.6rem;position:relative;z-index:2}
.callbtn::after{height:38%}
/* compact pair for the sticky header - both numbers always visible */
/* the header pair must stay side by side; wrapping stacked them and the lower
   button hung out below the bar and over the hero */
.callpair--sm{flex:1 0 100%;gap:.65rem;flex-wrap:nowrap}
/* Must match the 1320px breakpoint where .topbar .wrap widens to 1560. Hiding
   these at 1240 left a 1240-1319 band where the labels showed but the container
   was still 1260, which overflowed the page by 61px once the pair stopped
   wrapping. The two breakpoints have to move together. All .callbtn instances
   share one size now, so this and the sizing steps below apply site-wide, not
   just to the sticky header pair. */
@media(max-width:1319px){.callpair--sm .callbtn em{display:none}}
@media(max-width:1040px){
  .callbtn{padding:.7rem 1.1rem}
  .callbtn b{font-size:1.8rem;gap:.44rem}
  .callbtn b svg{width:24px;height:24px}
}
@media(max-width:720px){
  .topbar__in{flex-wrap:wrap;padding-block:.6rem;gap:.6rem}
  .callpair--sm{margin-inline-start:0;width:100%;gap:.5rem}
  .callpair--sm .callbtn{flex:1}
  .callbtn b{justify-content:center;font-size:1.55rem}
}
@media(max-width:400px){.callbtn b{font-size:1.3rem}}

/* banner pill: both numbers on one line */
.topbanner__pill u{display:block;text-decoration:none;font-family:var(--display);font-weight:900;
  font-size:1.2rem;color:var(--gold-hi);margin-top:.2rem}
.topbanner__pill u a{text-decoration:none}
.topbanner__pill u a:hover{text-decoration:underline}

/* footer region captions */
.foot__region{display:block;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:oklch(0.68 0.02 250);margin-top:.1rem}

/* sticky bar: full-size call buttons, same system as the rest of the site */
.callbar__btn{flex:1 1 0;min-width:0;padding:.75rem 1rem;align-items:center}
.callbar__btn b{justify-content:center;font-size:clamp(1.25rem,4.6vw,1.5rem);white-space:nowrap}
/* the full region label is long, so in the sticky bar it wraps instead of
   overflowing the button. both numbers stay visible, which is the rule. */
.callbar__btn em{padding-inline-start:0;text-align:center;width:100%;font-size:.8rem;
  white-space:normal;overflow-wrap:anywhere;line-height:1.22;letter-spacing:.03em}
@media(max-width:620px){.callbar__txt{display:none}}
@media(max-width:360px){.callbar__btn em{display:none}}

/* ============ ANIMATED LOGO REEL (hero, far right) ============ */
.hero__reel{margin:0;position:relative;width:min(112%,600px);max-width:none;border-radius:var(--r-lg);
  overflow:hidden;isolation:isolate;
  box-shadow:
    0 8px 0 var(--gold-edge),
    0 11px 4px rgb(0 0 0 / .40),
    0 26px 60px rgb(0 0 0 / .55),
    inset 0 0 0 2px var(--gold);
  animation:float 7s ease-in-out infinite}
.hero__reel video{display:block;width:100%;height:auto;background:#eee}
/* warm the panel slightly so the light plate sits inside the brand, not against it */
.hero__reel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgb(254 212 36 / .10), transparent 45%, rgb(2 49 84 / .18));
  mix-blend-mode:multiply}
@media(max-width:1019px){.hero__reel{width:min(100%,460px);margin-inline:auto}}
@media (prefers-reduced-motion: reduce){.hero__reel{animation:none}}

/* ============ QUOTE STUB ============ */
.quote{position:relative;text-align:center;color:#fff;overflow:clip;
  background:linear-gradient(160deg, rgb(0 17 30) 0%, rgb(2 49 84) 55%, rgb(0 17 30) 100%);
  border-block:1px solid var(--navy-line);
  padding-block:clamp(3rem,6vw,4.5rem) !important}
.quote__bgwrap{position:absolute;inset:0;z-index:0;overflow:hidden}
.quote__bgimg{width:100%;height:100%;object-fit:cover;object-position:30% 45%;display:block}
.quote::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgb(0 17 30 / .50) 0%, rgb(0 17 30 / .35) 45%, rgb(0 17 30 / .60) 100%)}
.quote>.wrap{position:relative;z-index:2}
.quote .wrap{max-width:760px;margin-inline:auto}
.quote h2{font-size:clamp(2.2rem,4.2vw,3.2rem);text-transform:uppercase;color:var(--gold-hi);
  letter-spacing:-.02em;
  text-shadow:0 2px 0 #8a4d00, 0 4px 0 #5d3400, 0 10px 20px rgb(0 0 0 / .5)}
.quote p{font-size:1.2rem;font-weight:600;color:#fff;margin-block-start:1.1rem;line-height:1.55;
  max-width:56ch;margin-inline:auto;
  text-shadow:0 2px 6px rgb(0 0 0 / .9), 0 0 14px rgb(0 0 0 / .65)}
.quote p strong{color:var(--gold-hi)}
.quote__call{max-width:420px;margin:1.75rem auto 0}

/* ============ EMERGENCY ============ */
.emerg{color:#fff;position:relative;z-index:4;overflow:clip;isolation:isolate;
  padding-block:clamp(2.25rem,4.5vw,3.5rem);
  background:
    linear-gradient(115deg, rgb(194 16 5) 0%, rgb(194 16 5) 42%, rgb(194 16 5) 62%, rgb(194 16 5) 100%);
  box-shadow:inset 0 14px 30px oklch(0 0 0 / .45), inset 0 -14px 30px oklch(0 0 0 / .45)}
/* wet night: cold light from above + water sheen pooling at the base */
.emerg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 70% at 76% -10%, rgb(13 101 150 / .55), transparent 62%),
    radial-gradient(60% 45% at 20% 115%, rgb(13 101 150 / .40), transparent 65%)}
/* falling water streaks */
.emerg::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.30;
  background-image:
    linear-gradient(178deg, transparent 0 45%, rgb(13 101 150 / .95) 45% 47%, transparent 47%),
    linear-gradient(181deg, transparent 0 62%, rgb(13 101 150 / .75) 62% 63.5%, transparent 63.5%),
    linear-gradient(179deg, transparent 0 28%, rgb(13 101 150 / .60) 28% 29.5%, transparent 29.5%);
  background-size:37px 190px, 61px 240px, 89px 160px;
  animation:rain 1.5s linear infinite}
@keyframes rain{to{background-position:0 190px, 0 240px, 0 160px}}
/* the burst pipe itself, far right */
.emerg__video{display:block;width:100%;max-width:100%;height:auto}
.emergency .wrap{text-align:center}
.emerg__text{max-width:62ch;margin-inline:auto;font-size:clamp(1.3rem,2.4vw,1.6rem);font-weight:900;line-height:1.5;
  text-align:center;letter-spacing:.01em;
  color:#fff;text-shadow:0 2px 8px rgb(0 0 0 / .7)}
.emergency .callpair{justify-content:center}
.emerg__pipe{display:none;position:absolute;right:-2%;top:50%;translate:0 -50%;z-index:-1;
  width:clamp(220px,30vw,460px);height:auto;opacity:.5;pointer-events:none;
  filter:drop-shadow(0 10px 26px oklch(0 0 0 / .6))}
@media(max-width:860px){.emerg__pipe{opacity:.22;right:-14%}}
.emerg__lead{flex:1 1 340px}
.emerg__in{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.emerg h2{font-size:clamp(1.5rem,3.1vw,2.35rem);letter-spacing:-.01em;text-transform:uppercase;
  text-shadow:0 2px 0 rgb(194 16 5), 0 4px 14px oklch(0 0 0 / .55)}
.emerg h2 span{color:var(--gold-hi);display:block}
.emerg p{font-size:1.02rem;max-width:52ch;margin-block-start:.55rem;color:oklch(0.95 0.02 30);text-shadow:0 1px 6px oklch(0 0 0 / .5)}
.emerg .btn{margin-inline-start:auto;background:linear-gradient(180deg, var(--gold-hi), var(--gold-deep));color:var(--gold-ink);
  box-shadow:0 6px 0 rgb(0 71 112), 0 7px 2px rgb(0 33 55 / .38), 0 14px 30px oklch(0 0 0 / .28)}
.emerg .btn:hover{transform:translateY(-3px);filter:brightness(1.06);
  box-shadow:0 9px 0 rgb(0 71 112), 0 11px 3px rgb(0 33 55 / .4), 0 22px 46px oklch(0 0 0 / .32)}
.emerg .btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgb(0 71 112), 0 3px 2px rgb(0 33 55 / .38)}
.pulse{width:14px;height:14px;box-shadow:0 0 14px oklch(1 0 0 / .9);border-radius:50%;background:#fff;flex:none;box-shadow:0 0 0 0 oklch(1 0 0 / .85);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 14px oklch(1 0 0 / 0)}100%{box-shadow:0 0 0 0 oklch(1 0 0 / 0)}}

/* ============ PROMISE BAR ============ */
.promise{background:linear-gradient(135deg, var(--navy-900) 0%, rgb(2 49 84) 50%, var(--navy-900) 100%);
  color:var(--paper);position:relative;overflow:clip;border-block:1px solid var(--navy-line);
  }
.promise__bgwrap{position:absolute;inset:0;z-index:0}
.promise__bgimg{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.promise::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgb(0 17 30 / .82) 0%, rgb(0 17 30 / .74) 50%, rgb(0 17 30 / .86) 100%),
    radial-gradient(80% 60% at 50% 0%, rgb(13 101 150 / .35), transparent 65%)}
.promise>*{position:relative;z-index:2}
.promise>.promise__bgwrap{position:absolute;z-index:0}
.promise__kick{font-family:var(--display-xl);font-weight:400;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(2.1rem,3.4vw,2.8rem);color:var(--gold-hi);margin-block-end:.7rem;line-height:1.05;
  background:linear-gradient(180deg, var(--gold-hi) 10%, var(--gold-deep) 92%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #8a4d00) drop-shadow(0 4px 0 #633600) drop-shadow(0 8px 14px rgb(0 0 0 / .55))}
.promise__title{font-family:var(--display-xl);text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:.98;
  background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 45%,var(--gold-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* text-shadow bleeds through transparent glyphs, so depth comes from a
     drop-shadow filter that respects alpha (same fix as the H1 gold line).
     !important because an unlayered @media h1,h2 rule otherwise outranks this
     layered class and repaints the navy extrude through the gold. */
  text-shadow:none!important;
  filter:drop-shadow(0 2px 0 #8a4d00) drop-shadow(0 4px 1px rgb(0 0 0 / .4)) drop-shadow(0 8px 14px rgb(0 0 0 / .5));
  margin-block-end:clamp(1.6rem,3.5vw,2.6rem)}

.promise__grid{display:grid;gap:clamp(.9rem,1.8vw,1.35rem);
  grid-template-columns:repeat(3,1fr)}
/* 3 illustrated panels: 3-across on wide screens, then full-width stacked.
   never 2-across, because 3 items in 2 columns leaves an open corner. */
@media(max-width:900px){.promise__grid{grid-template-columns:1fr}}

.promise__item{position:relative;display:flex;flex-direction:column;gap:.6rem;
  padding:clamp(1.15rem,2vw,1.6rem);border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgb(3 55 95 / .12) 0%,rgb(0 33 55 / .18) 100%);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  border:1px solid rgb(254 212 36 / .35);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),
    0 6px 0 var(--gold-edge), 0 8px 4px rgb(0 0 0 / .35), 0 20px 44px rgb(0 0 0 / .38);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s cubic-bezier(.2,.8,.3,1)}
.promise__item::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 90% at 0% 0%, rgb(254 212 36 / .10), transparent 55%)}
.promise__item:hover{transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgb(127 196 240 / .22),
    0 10px 0 var(--gold-edge), 0 12px 6px rgb(0 0 0 / .45), 0 28px 60px rgb(0 0 0 / .5)}
.promise__item--wide{grid-column:1 / -1;flex-direction:row;align-items:flex-start;gap:1.1rem}
@media(max-width:560px){.promise__item--wide{flex-direction:column}}

.promise__ico{flex:none;width:clamp(44px,5vw,54px);height:clamp(44px,5vw,54px);
  display:grid;place-items:center;border-radius:14px;color:var(--navy-900);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep));
  box-shadow:0 4px 0 var(--gold-edge), 0 6px 10px rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .5)}
.promise__ico svg{width:56%;height:56%}

.promise__item h3{font-family:var(--display);font-weight:900;text-transform:uppercase;
  letter-spacing:-.01em;font-size:clamp(1.15rem,1.7vw,1.4rem);color:var(--gold-hi);
  text-shadow:0 2px 5px rgb(0 0 0 / .9), 0 0 14px rgb(0 0 0 / .7)}
.promise__item p{color:#fff;font-size:1rem;line-height:1.5;font-weight:600;
  text-shadow:0 2px 5px rgb(0 0 0 / .9), 0 0 12px rgb(0 0 0 / .65)}
.promise__body{flex:1}

.promise__skills{list-style:none;margin-block-start:.9rem;display:grid;gap:.5rem .9rem;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:560px){.promise__skills{grid-template-columns:1fr}}
.promise__skills li{position:relative;padding-inline-start:1.5rem;color:#fff;font-weight:600;font-size:1rem;
  text-shadow:0 2px 5px rgb(0 0 0 / .9), 0 0 12px rgb(0 0 0 / .65)}
.promise__skills li::before{content:"";position:absolute;left:0;top:.5em;width:.6rem;height:.6rem;border-radius:50%;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));box-shadow:0 0 8px rgb(242 170 16 / .6)}

/* ============ COMMERCIAL CLIENTS ============ */
.clients{margin-block-start:clamp(2rem,4vw,3rem);text-align:center}
.clients__lead{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(.86rem,1.4vw,1rem);color:var(--sky);margin-block-end:1.1rem}
.clients__row{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(.7rem,1.6vw,1.2rem)}
.clients__logo{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1rem,1.7vw,1.35rem);color:var(--paper);
  padding:.6rem 1.15rem;border-radius:var(--r-md);
  background:linear-gradient(165deg,rgb(3 55 95 / .8),rgb(0 33 55 / .9));
  border:1px solid var(--navy-line);
  box-shadow:inset 0 1px 0 rgb(127 196 240 / .16), 0 4px 0 rgb(0 0 0 / .35), 0 10px 22px rgb(0 0 0 / .35)}

/* ============ SECTION HEADS ============ */
.sec-head{max-width:62ch;margin-block-end:clamp(2.25rem,4vw,3.25rem)}
.sec-head h2{font-size:clamp(2.1rem,3.8vw + .3rem,3.4rem);letter-spacing:-.04em;text-transform:uppercase}
.sec-head p{margin-block-start:1rem;color:var(--text);font-size:1.08rem}
#services .sec-head{max-width:none;text-align:center;margin-inline:auto}
#services .sec-head p{max-width:70ch;margin-inline:auto;font-weight:700;color:#fff;font-size:1.2rem}
.kicker{display:inline-flex;align-items:center;gap:.9rem;font-family:var(--display);
  font-size:clamp(2.2rem, 4.8vw, 6.2rem);font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-hi);margin-block-end:1rem;white-space:nowrap;
  text-shadow:0 1px 0 #8a4d00, 0 2px 0 #5d3400, 0 4px 8px rgb(0 0 0 / .45)}
.kicker::before{content:"";width:40px;height:5px;flex:none;border-radius:2px;
  background:linear-gradient(90deg, var(--gold-hi), var(--gold-deep))}

/* ============ SERVICES (3D tilt cards) ============ */
.svc{display:grid;gap:1.4rem;grid-template-columns:1fr;perspective:1400px}
@media(min-width:880px){.svc{grid-template-columns:8fr 4fr}}
.card{position:relative;border-radius:var(--r-lg);border:0;
  background:linear-gradient(180deg, rgb(0 71 112), rgb(2 49 84));
  padding:clamp(1.6rem,2.8vw,2.4rem);
  box-shadow:0 7px 0 rgb(230 122 0), 0 9px 3px oklch(0 0 0 / .34), inset 0 1px 0 oklch(1 0 0 / .18);
  transform-style:preserve-3d;transition:transform .25s ease-out, box-shadow .25s ease-out;will-change:transform}
.card::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg, var(--gold-hi), var(--gold-deep))}
.card:hover{box-shadow:0 11px 0 rgb(230 122 0), 0 14px 4px oklch(0 0 0 / .38), inset 0 1px 0 oklch(1 0 0 / .24)}
.card--wide{grid-column:1;grid-row:span 2;display:flex;flex-direction:column;position:relative;
  background:linear-gradient(165deg, rgb(0 71 112) 0%, rgb(2 49 84) 70%)}
.card__mark{position:absolute;z-index:0;left:50%;top:50%;translate:-50% -50%;
  width:clamp(220px,32vw,420px);height:auto;opacity:.1;pointer-events:none;user-select:none}
.card--wide>*:not(.card__mark){position:relative;z-index:1}
/* the residential card is forced to the height of the two stacked cards beside it,
   which left a large void under its list. this panel is pinned to the bottom with
   margin auto so it absorbs whatever slack the grid creates, at any breakpoint. */
.card__cta{margin-block-start:auto;position:relative;isolation:isolate;
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem 1.5rem;align-items:center;
  margin-block-start:auto;padding:1.45rem 1.55rem;border-radius:var(--r-md);
  background:
    radial-gradient(120% 150% at 13% 55%, rgb(242 170 16 / .20), transparent 60%),
    linear-gradient(180deg, rgb(0 33 55 / .94) 0%, rgb(0 17 30 / .97) 100%);
  box-shadow:0 5px 0 var(--gold-edge), 0 8px 16px oklch(0 0 0 / .48),
    inset 0 1px 0 oklch(1 0 0 / .16)}
/* hairline of light along the top edge, same trick the buttons use to read as raised */
.card__cta::before{content:"";position:absolute;inset-inline:1px;top:0;height:2px;z-index:-1;
  border-radius:var(--r-md) var(--r-md) 0 0;
  background:linear-gradient(90deg, transparent, var(--gold-hi) 22%, var(--gold-deep) 78%, transparent)}
.card__cta img{width:clamp(88px,9vw,124px);height:auto;flex:none;
  filter:drop-shadow(0 0 22px rgb(242 170 16 / .38)) drop-shadow(0 8px 14px rgb(0 0 0 / .55))}
.card__cta h4{font-family:var(--display);font-weight:900;font-size:1.12rem;line-height:1.2;
  color:var(--gold-hi);text-transform:uppercase;letter-spacing:-.01em;margin:0 0 .35rem}
.card__cta p{font-size:.96rem;color:var(--text);margin:0 0 1rem;max-width:46ch}
.card__cta .btn{width:fit-content}
@media(max-width:520px){
  .card__cta{grid-template-columns:1fr;justify-items:start}
  .card__cta img{width:96px}
}
.card h3{font-size:1.94rem;letter-spacing:-.03em;margin-block-start:.4rem;color:var(--gold-hi)}
.card__num{font-family:var(--display);font-size:.76rem;font-weight:800;letter-spacing:.14em;color:var(--gold)}
.card ul{margin:1.3rem 0 0;padding:0;list-style:none;display:grid;gap:.55rem}
.card--wide ul{grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:.55rem 1.6rem}
.card li{display:flex;gap:.65rem;align-items:flex-start;font-size:.99rem;color:var(--text)}
.card li::before{content:"";width:8px;height:9px;margin-block-start:.5rem;flex:none;background:var(--gold);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* ============ RENOVATION IDEAS ============ */
.ideas{position:relative;overflow:clip;border-block:1px solid var(--navy-line);
  background:
    radial-gradient(70% 55% at 15% 8%, rgb(230 122 0 / .22), transparent 65%),
    radial-gradient(60% 45% at 88% 92%, rgb(254 212 36 / .18), transparent 70%),
    linear-gradient(160deg, rgb(0 17 30) 0%, rgb(2 49 84) 55%, rgb(0 17 30) 100%)}
.ideas>*{position:relative;z-index:2}
.ideas__grid{display:grid;gap:1.35rem;grid-template-columns:1fr}
@media(min-width:620px){.ideas__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ideas__grid{grid-template-columns:repeat(3,1fr)}}
.idea{margin:0;border-radius:var(--r-lg);overflow:hidden;position:relative;
  box-shadow:0 7px 0 rgb(230 122 0), 0 9px 3px oklch(0 0 0 / .36);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s cubic-bezier(.2,.8,.3,1)}
.idea img{width:100%;height:100%;aspect-ratio:2/3;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.idea--collage{margin-block-start:1.5rem;box-shadow:0 20px 44px rgb(0 0 0 / .38);
  border:1px solid var(--navy-line);max-width:900px;margin-inline:auto}
.idea--collage img{aspect-ratio:auto;width:100%;height:auto;max-height:520px;object-fit:contain;
  background:rgb(0 17 30)}
.idea:hover{transform:translateY(-5px);
  box-shadow:0 12px 0 rgb(230 122 0), 0 15px 5px oklch(0 0 0 / .4)}
.idea:hover img{transform:scale(1.06)}
.idea--collage:hover{transform:none}
.idea--collage:hover img{transform:none}
.idea figcaption{position:absolute;inset-inline:0;bottom:0;padding:2.4rem 1.15rem .95rem;
  background:linear-gradient(180deg, transparent, rgb(0 17 30 / .92) 62%)}
.idea figcaption b{display:block;font-family:var(--display-xl);font-weight:400;font-size:1.3rem;
  text-transform:uppercase;color:var(--gold-hi);line-height:1.05}
.idea figcaption span{display:block;font-size:.86rem;color:var(--text);margin-top:.15rem}
.ideas__note{margin-block-start:1.6rem;font-size:.85rem;color:var(--text-dim);font-style:italic}
.ideas__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-block-start:2rem}
.ideas__cta span{font-size:.95rem;color:var(--text)}

/* ============ WHY ============ */
.why{color:var(--paper);position:relative;overflow:clip;
  background:linear-gradient(155deg, rgb(0 17 30) 0%, rgb(2 49 84) 48%, rgb(0 17 30) 100%)}
.why::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(65% 55% at 82% 8%, rgb(13 101 150 / .55), transparent 62%),
    radial-gradient(50% 45% at 10% 95%, rgb(230 122 0 / .16), transparent 60%)}
.why>*{position:relative;z-index:2}
.why .sec-head h2{color:var(--paper)}
/* Mitch in the far-right corner of the Why section */
.why .wrap{position:relative}
.why__mascot{position:absolute;top:-1.5rem;right:-1rem;z-index:1;
  width:clamp(150px,17vw,290px);height:auto;pointer-events:none;
  filter:drop-shadow(0 14px 30px oklch(0 0 0 / .55)) drop-shadow(0 0 34px rgb(230 122 0 / .32));
  animation:float 7.5s ease-in-out infinite}
@media(max-width:900px){.why__mascot{display:none}}
.why .kicker{color:var(--gold)}
.why__grid{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:640px){.why__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.why__grid{grid-template-columns:repeat(3,1fr)}}

/* photo card: metallic frame, navy body, gold extruded edge */
.why__item{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg, rgb(2 49 84), rgb(0 33 55));
  box-shadow:
    inset 0 0 0 1px rgb(127 196 240 / .45),
    inset 0 0 0 4px rgb(2 49 84),
    inset 0 0 0 5px rgb(127 196 240 / .22),
    0 7px 0 var(--gold-edge),
    0 9px 3px rgb(0 0 0 / .38),
    0 20px 44px rgb(0 0 0 / .45);
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s cubic-bezier(.2,.8,.3,1)}
.why__item:hover{transform:translateY(-5px);
  box-shadow:
    inset 0 0 0 1px rgb(127 196 240 / .6),
    inset 0 0 0 4px rgb(2 49 84),
    inset 0 0 0 5px rgb(254 212 36 / .35),
    0 11px 0 var(--gold-edge),
    0 14px 4px rgb(0 0 0 / .42),
    0 28px 58px rgb(0 0 0 / .5)}
.why__item:active{transform:translateY(3px);
  box-shadow:inset 0 0 0 1px rgb(127 196 240 / .45), 0 3px 0 var(--gold-edge), 0 5px 3px rgb(0 0 0 / .38)}

.why__shot{position:relative;margin:5px 5px 0;border-radius:calc(var(--r-lg) - 8px) calc(var(--r-lg) - 8px) 0 0;
  overflow:hidden;line-height:0}
.why__shot img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.why__item:hover .why__shot img{transform:scale(1.05)}
.why__shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgb(0 17 30 / .12) 0%, transparent 40%, rgb(0 33 55 / .55) 100%)}

/* gold hex badge straddling the photo and the body */
.why__ico{position:absolute;left:1rem;bottom:-19px;z-index:2;width:40px;height:44px;
  display:grid;place-items:center;color:var(--gold-ink);
  background:linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  filter:drop-shadow(0 4px 0 rgb(0 33 55)) drop-shadow(0 6px 5px rgb(0 0 0 / .45))}

.why__body{padding:2rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.why__body h3{font-size:1.2rem;text-transform:uppercase;color:var(--gold-hi);line-height:1.08}
.why__body p{font-size:.96rem;color:var(--text);margin:0}

/* ============ AREAS ============ */
.areas{border-block:1px solid var(--navy-line);position:relative;overflow:clip;
  background:linear-gradient(145deg, rgb(0 17 30) 0%, rgb(2 49 84) 55%, rgb(0 17 30) 100%)}
.areas__bgwrap{position:absolute;inset:0;z-index:0}
.areas__bgimg{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block;opacity:.4}
.areas>.wrap{position:relative;z-index:1}
.areas__grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr}
@media(min-width:940px){.areas__grid{grid-template-columns:5fr 7fr;align-items:center}}
.areas__list{display:flex;flex-wrap:wrap;gap:.6rem}
/* regional blocks */
.region{margin-block-end:2.5rem}
.region:last-of-type{margin-block-end:0}
.region__head{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-block-end:1.2rem;
  padding-block-end:1.1rem;border-bottom:2px solid rgb(230 122 0 / .45)}
.region__head h3{font-size:clamp(1.5rem,2.6vw,2.1rem);text-transform:uppercase;color:var(--gold-hi)}
.region__head p{font-size:.98rem;color:var(--text);margin-block-start:.2rem}
.region__head .callbtn{margin-inline-start:auto}

/* ============ BRAND MARKS (mascot watermark, every section) ============ */
.mark{position:absolute;z-index:0;width:var(--mw,200px);height:auto;opacity:var(--mo,.15);
  pointer-events:none;user-select:none;
  filter:drop-shadow(0 10px 26px oklch(0 0 0 / .5));
  animation:float 9s ease-in-out infinite}
.mark--right{right:clamp(-2rem,-1vw,0rem);top:2.5rem}
.mark--left{left:clamp(-2rem,-1vw,0rem);bottom:2.5rem}
/* the service-area watermark sat too low against the region columns */
#areas .mark--right{top:.25rem}
#services .wrap,#ideas .wrap,#coverage .wrap,#faq .wrap,#areas .wrap,.promise .wrap{position:relative}
#services .wrap>*:not(.mark),#ideas .wrap>*:not(.mark),#coverage .wrap>*:not(.mark),
#faq .wrap>*:not(.mark),#areas .wrap>*:not(.mark),.promise .wrap>*:not(.mark){position:relative;z-index:1}
@media(max-width:820px){.mark{display:none}}

.foot__logo{width:min(240px,60%);height:auto;margin:0 auto 2.5rem;display:block;
  filter:drop-shadow(0 12px 28px oklch(0 0 0 / .55))}

/* ============ RENTAL / AIRBNB ============ */
.rental{position:relative;overflow:clip;border-block:1px solid var(--navy-line);
  background:linear-gradient(170deg, rgb(0 17 30) 0%, rgb(2 49 84) 52%, rgb(0 17 30) 100%)}
.rental__bgwrap{position:absolute;inset:0;z-index:0}
.rental__bgimg{width:100%;height:100%;object-fit:cover;object-position:80% 38%;display:block}
/* Poster-style seniors panel: single ad image, whole-panel tap-to-call, no overlays */
.seniors-poster{background:linear-gradient(170deg, rgb(0 17 30) 0%, rgb(2 49 84) 50%, rgb(0 17 30) 100%);
  border-block:1px solid var(--navy-line)}
.seniors-poster__link{display:block;max-width:1120px;margin-inline:auto;border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-2);outline:3px solid transparent;transition:outline-color .18s ease, transform .18s ease}
.seniors-poster__link:hover,.seniors-poster__link:focus-visible{outline-color:var(--gold);transform:translateY(-2px)}
.seniors-poster__img{display:block;width:100%;height:auto}
.rental::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(170deg, rgb(0 17 30 / .90) 0%, rgb(2 49 84 / .72) 45%, rgb(0 17 30 / .90) 100%)}
.rental .wrap{position:relative;z-index:1}
.rental__grid{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:760px){.rental__grid{grid-template-columns:repeat(3,1fr)}}
.rental__item{border-radius:var(--r-md);padding:1.5rem;
  background:linear-gradient(180deg, rgb(0 71 112 / .22), rgb(2 49 84 / .30));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1px solid rgb(254 212 36 / .32);
  box-shadow:0 6px 0 rgb(230 122 0), 0 7px 2px oklch(0 0 0 / .32), inset 0 1px 0 oklch(1 0 0 / .22);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s cubic-bezier(.2,.8,.3,1)}
.rental__item:hover{transform:translateY(-4px);
  box-shadow:0 10px 0 rgb(230 122 0), 0 12px 3px oklch(0 0 0 / .36), inset 0 1px 0 oklch(1 0 0 / .28)}
.rental__item h3{font-size:1.22rem;color:var(--gold-hi);text-transform:uppercase;
  text-shadow:0 2px 5px rgb(0 0 0 / .9), 0 0 12px rgb(0 0 0 / .65)}
.rental__item p{margin-block-start:.55rem;font-size:.97rem;color:#fff;font-weight:600;
  text-shadow:0 2px 5px rgb(0 0 0 / .9), 0 0 12px rgb(0 0 0 / .65)}

/* ============ SENIORS ============ */
.seniors{position:relative;overflow:clip;border-top:6px solid var(--gold);border-bottom:1px solid var(--navy-line);
  background:linear-gradient(160deg, rgb(0 17 30) 0%, rgb(2 49 84) 55%, rgb(0 17 30) 100%);
  box-shadow:inset 0 -14px 30px rgb(0 0 0 / .5), inset 0 6px 0 rgb(0 17 30 / .6);
  min-height:clamp(420px,55vw,620px)}
.seniors__bgwrap{position:absolute;inset:0;z-index:0}
.seniors__bgimg{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.seniors::before{display:none}
.seniors .wrap{position:relative;z-index:2}
.seniors__copy{max-width:640px}
.seniors__copy--right{margin-inline-start:auto;text-align:right}
.seniors__copy--right .seniors__note{border-inline-start:0;border-inline-end:3px solid var(--gold);
  padding-inline-start:0;padding-inline-end:1rem}
@media(max-width:760px){.seniors__copy--right{margin-inline-start:0;text-align:left}
  .seniors__copy--right .seniors__note{border-inline-end:0;border-inline-start:3px solid var(--gold);
    padding-inline-end:0;padding-inline-start:1rem}}
.seniors__copy h2{font-size:clamp(2rem,3.6vw + .3rem,3.1rem);text-transform:uppercase;color:var(--gold-hi)}
.seniors__copy p{margin-block-start:1rem;color:var(--text);max-width:60ch}
.seniors__lead{font-size:1.15rem;font-weight:600;color:#fff !important}
.seniors__copy p b{color:var(--gold-hi)}
.seniors__note{font-size:.95rem;border-inline-start:3px solid var(--gold);padding-inline-start:1rem;
  color:var(--text) !important}
.seniors .callpair{margin-block-start:1.9rem}

/* ============ COVERAGE MAP ============ */
.map{position:relative;overflow:clip;border-block:1px solid var(--navy-line);
  background:linear-gradient(185deg, rgb(0 17 30) 0%, rgb(0 33 55) 55%, rgb(0 17 30) 100%)}
.map__panel{position:relative;border-radius:var(--r-lg);padding:clamp(.75rem,2vw,1.5rem);
  background:radial-gradient(120% 90% at 50% 30%, rgb(0 71 112), rgb(0 17 30) 70%);
  box-shadow:0 7px 0 rgb(230 122 0), 0 9px 3px oklch(0 0 0 / .34), inset 0 1px 0 oklch(1 0 0 / .16)}
.map__video{width:100%;height:auto;display:block;border-radius:calc(var(--r-lg) - 6px);
  background:rgb(0 17 30);box-shadow:0 10px 34px oklch(0 0 0 / .5)}

.map__key{list-style:none;padding:0;margin:1.3rem 0 0;display:flex;flex-wrap:wrap;gap:.7rem 2rem}
.map__key li{display:flex;align-items:center;gap:.6rem;font-size:.93rem;color:var(--text)}
.map__key b{font-family:var(--display);font-weight:900;color:#fff}
.map__key .sw,.map__key .gta{width:14px;height:14px;border-radius:50%;flex:none;border:2px solid rgb(0 17 30)}
.map__key .sw{background:#F2AA10}
.map__key .gta{background:#7FC4F0}
@media(max-width:640px){.lbl{font-size:24px}.zone{stroke-width:40}}
@media (prefers-reduced-motion: reduce){#cam{transition:none}}

/* ============ FAQ ============ */
.faq{position:relative;overflow:clip;border-block:1px solid var(--navy-line);
  background:linear-gradient(165deg, rgb(0 17 30) 0%, rgb(2 49 84) 55%, rgb(0 17 30) 100%)}
.faq__list{display:grid;gap:.9rem;max-width:78ch}
.faq details{border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(180deg, rgb(0 71 112), rgb(2 49 84));
  box-shadow:0 5px 0 rgb(230 122 0), 0 6px 2px oklch(0 0 0 / .32), inset 0 1px 0 oklch(1 0 0 / .18);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s cubic-bezier(.2,.8,.3,1)}
.faq details:hover{transform:translateY(-3px);
  box-shadow:0 8px 0 rgb(230 122 0), 0 10px 3px oklch(0 0 0 / .36), inset 0 1px 0 oklch(1 0 0 / .24)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 3.2rem 1.15rem 1.35rem;position:relative;
  font-family:var(--display);font-weight:900;font-size:1.06rem;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.35rem;top:50%;width:12px;height:12px;
  border-right:3px solid var(--gold);border-bottom:3px solid var(--gold);
  translate:0 -70%;rotate:45deg;transition:rotate .2s ease-out, translate .2s ease-out}
.faq details[open] summary::after{rotate:225deg;translate:0 -25%}
.faq details p{padding:0 1.35rem 1.25rem;color:var(--text);font-size:.98rem}
/* area chips - gold face, navy extruded edge, glow on touch/hover */
.chip{position:relative;background:linear-gradient(180deg, var(--gold-hi), var(--gold-deep));color:var(--gold-ink);
  border:0;border-radius:100px;padding:.85rem 1.55rem;font-size:1.5rem;font-weight:800;font-family:var(--display);
  letter-spacing:-.01em;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;
  box-shadow:0 5px 0 rgb(0 71 112), 0 6px 2px rgb(0 33 55 / .3), inset 0 1px 0 oklch(1 0 0 / .35);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease-out, filter .22s ease-out}
.chip:hover,.chip:focus,.chip:focus-visible{
  transform:translateY(-3px);filter:brightness(1.14) saturate(1.12);
  box-shadow:
    0 8px 0 rgb(0 71 112),
    0 10px 3px rgb(0 33 55 / .34),
    inset 0 1px 0 oklch(1 0 0 / .45),
    0 0 0 3px rgb(254 212 36 / .55),
    0 0 22px 4px rgb(254 212 36 / .75),
    0 0 46px 10px rgb(242 170 16 / .45)}
.chip:active{
  transform:translateY(2px);filter:brightness(1.2);
  box-shadow:
    0 2px 0 rgb(0 71 112),
    inset 0 1px 0 oklch(1 0 0 / .45),
    0 0 0 3px rgb(254 212 36 / .7),
    0 0 30px 8px rgb(254 212 36 / .9),
    0 0 60px 16px rgb(242 170 16 / .55)}
/* touch devices keep the glow briefly after the tap */
.chip.lit{
  filter:brightness(1.16) saturate(1.14);
  box-shadow:
    0 8px 0 rgb(0 71 112),
    inset 0 1px 0 oklch(1 0 0 / .45),
    0 0 0 3px rgb(254 212 36 / .6),
    0 0 26px 6px rgb(254 212 36 / .85),
    0 0 54px 12px rgb(242 170 16 / .5)}
@media (prefers-reduced-motion: reduce){.chip{transition:box-shadow .2s ease-out}}

/* ============ FINAL ============ */
.final{color:var(--paper);position:relative;overflow:clip;
  background:linear-gradient(150deg, rgb(0 17 30) 0%, rgb(2 49 84) 52%, rgb(0 17 30) 100%)}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 70% at 80% 50%, rgb(230 122 0 / .22), transparent 62%)}
.final__in{position:relative;z-index:2;display:grid;gap:2.5rem;grid-template-columns:1fr;align-items:center}
@media(min-width:940px){.final__in{grid-template-columns:7fr 4fr}}
.final h2{font-size:clamp(2.3rem,4.8vw,3.9rem);letter-spacing:-.04em;text-transform:uppercase;max-width:16ch}
.final h2 em{font-style:normal;color:var(--gold)}
.final p{margin-block-start:1.15rem;color:var(--text);max-width:50ch}
.final__row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-block-start:2.2rem}
.final__tagline{display:block;width:100%;text-align:center;font-family:var(--display);
  font-size:1.6rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-hi);
  filter:drop-shadow(1px 1px 0 #0D47A1) drop-shadow(2px 2px 0 #0D47A1) drop-shadow(0 0 6px rgba(33,150,243,.4))}
.final img{width:min(100%,300px);margin-inline:auto;filter:drop-shadow(0 24px 44px oklch(0 0 0 / .5))}

/* ============ FOOTER ============ */
footer{background:rgb(0 17 30);color:var(--text);font-size:.95rem;position:relative;overflow:hidden}
.foot__bgwrap{position:absolute;inset:0;z-index:0}
.foot__bgimg{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;opacity:.15}
footer .wrap{position:relative;z-index:1}
.foot__grid{display:grid;gap:2.25rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
footer h4{color:#fff;font-family:var(--display);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-block-end:1rem;font-weight:800}
footer a{text-decoration:none;color:var(--text);transition:color .18s ease-out}
footer a:hover{color:var(--gold)}
footer ul{list-style:none;padding:0;display:grid;gap:.5rem}
.foot__phone{font-family:var(--display);font-size:1.5rem;font-weight:900;color:var(--gold);letter-spacing:-.02em}
.foot__bottom{border-top:1px solid var(--navy-line);margin-block-start:2.75rem;padding-block-start:1.6rem;display:flex;flex-wrap:wrap;gap:.75rem 2rem;font-size:.86rem;color:oklch(0.65 0.02 250)}

/* ============ MOBILE CALL BAR ============ */
.callbar{position:fixed;inset-inline:0;bottom:0;z-index:90;
  padding:.6rem clamp(.6rem,3vw,var(--gutter)) calc(.6rem + env(safe-area-inset-bottom));
  background:rgb(0 33 55 / .95);backdrop-filter:blur(12px);border-top:1px solid var(--navy-line);
  display:flex;gap:.85rem;align-items:center;transform:translateY(115%);transition:transform .3s ease-out}
.callbar.is-on{transform:translateY(0)}
.callbar__txt{color:#fff;font-size:1.05rem;line-height:1.25;flex:1.3;font-weight:700}
.callbar__txt b{display:block;font-family:var(--display);font-size:1.4rem;font-weight:900;
  color:var(--gold-hi);letter-spacing:-.01em}

@media(min-width:1000px){.callbar{display:none}}
@media(max-width:999px){body{padding-block-end:92px}}
}

/* ============ 3D LETTERING (matches the logo's extruded wordmark) ============ */
h1, h2, .promise__item h3, .rental__item h3, .region__head h3, .card h3, .idea figcaption b{
  text-shadow:
    0 1px 0  #01304f,
    0 2px 0  #012a45,
    0 3px 0  #01243b,
    0 4px 0  #011e31,
    0 5px 0  #011827,
    0 6px 1px rgb(0 0 0 / .35),
    0 8px 14px rgb(0 0 0 / .55);
}
/* gold headings get a warmer extrude so the shadow reads as depth, not dirt */
.seniors__copy h2, .rental__item h3, .promise__item h3, .region__head h3,
.card h3, .idea figcaption b, .map__hud h3{
  text-shadow:
    0 1px 0  #8a4d00,
    0 2px 0  #6f3e00,
    0 3px 0  #563000,
    0 4px 1px rgb(0 0 0 / .4),
    0 7px 14px rgb(0 0 0 / .55);
}
/* the hero already carries a gradient fill; give it depth without muddying it */
.hero h1{text-shadow:0 2px 0 #011827, 0 4px 0 #01111c, 0 10px 22px rgb(0 0 0 / .6)}
/* the gold line is a gradient clipped to the glyphs, so text-shadow would bleed
   through the transparent letterforms. drop-shadow respects the alpha instead. */
.hero h1 em{text-shadow:none;
  filter:drop-shadow(0 2px 0 #8a4d00) drop-shadow(0 4px 0 #633600)
         drop-shadow(0 6px 0 #3d2100) drop-shadow(0 12px 18px rgb(0 0 0 / .55))}
@media(max-width:640px){
  h1,h2{text-shadow:0 2px 0 #012a45, 0 4px 0 #011e31, 0 6px 12px rgb(0 0 0 / .5)}
}

@layer utils{
  /* Anton is a single-weight condensed face - it needs near-zero tracking,
     so this overrides the tighter Archivo tracking set on the components. */
  h1,h2,h3{font-family:var(--display-xl);font-weight:400;letter-spacing:0;line-height:1.04}
  .hero h1{letter-spacing:.002em}

  .reveal{opacity:0;transform:translateY(20px)}
  .reveal.in{opacity:1;transform:none;transition:opacity .55s ease-out, transform .55s ease-out}
  .sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  section[id]{scroll-margin-top:88px}
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
    .reveal{opacity:1;transform:none}
  }
}

/* ============ POSTAL CODE LOOKUP ============ */
.pclookup{background:linear-gradient(160deg, rgb(2 49 84) 0%, rgb(0 17 30) 70%);
  border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.4rem);
  box-shadow:0 7px 0 var(--gold-edge), 0 10px 22px oklch(0 0 0 / .48), inset 0 1px 0 oklch(1 0 0 / .16)}
.pclookup__form{display:flex;gap:.8rem;flex-wrap:wrap;margin-block-start:1.2rem}
.pclookup__form input{flex:1 1 220px;min-width:0;font-family:var(--display);font-weight:800;
  font-size:1.24rem;letter-spacing:.16em;text-transform:uppercase;padding:1rem 1.2rem;
  color:var(--gold-ink);background:linear-gradient(180deg,#fff,#e6edf4);
  border:2px solid var(--gold);border-radius:var(--r-md);
  box-shadow:inset 0 2px 5px oklch(0 0 0 / .3)}
.pclookup__form input::placeholder{color:#5b7086;opacity:.55;letter-spacing:.1em}
.pclookup__form input:focus-visible{outline:3px solid var(--gold-hi);outline-offset:2px}
.pclookup__out{margin-block-start:1.4rem;padding:1.3rem 1.4rem;border-radius:var(--r-md);
  background:oklch(1 0 0 / .07);border:1px solid var(--navy-line)}
.pclookup__out--hit{box-shadow:inset 0 0 0 1.5px var(--gold), 0 4px 0 rgb(0 71 112)}
.pclookup__place{font-family:var(--display);font-weight:900;font-size:1.34rem;
  color:var(--gold-hi);text-transform:uppercase;margin:0 0 .25rem}
.pclookup__place span{display:inline-block;background:var(--gold);color:var(--gold-ink);
  padding:.12rem .5rem;border-radius:8px;margin-inline-end:.5rem}
.pclookup__crew{color:var(--text);margin:0 0 1rem}
.pclookup__more{margin:.9rem 0 0;font-size:.95rem}
.pclookup__more a{color:var(--sky);font-weight:700}
.pclookup__pair{display:flex;gap:.7rem;flex-wrap:wrap;margin:.8rem 0 0}
@media(max-width:520px){.pclookup__form input{font-size:1.06rem}}

/* ============ REGION PAGES ============ */
.crumbs{font-size:.9rem;color:var(--text-dim);margin-block-end:1.4rem}
.crumbs a{color:var(--sky)}
.regioncta{display:grid;gap:1.4rem;align-items:center;margin-block:2rem;
  grid-template-columns:1fr;padding:clamp(1.4rem,2.6vw,2rem);border-radius:var(--r-lg);
  background:linear-gradient(150deg, rgb(0 71 112), rgb(2 49 84));
  box-shadow:0 6px 0 var(--gold-edge), 0 9px 18px oklch(0 0 0 / .42)}
@media(min-width:820px){.regioncta{grid-template-columns:1fr auto}}
.regioncta h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 .5rem}
.regioncta p{color:var(--text);margin:0;max-width:70ch}
.arealinks{list-style:none;padding:0;margin:0;display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.arealinks a{display:block;padding:.95rem 1.15rem;border-radius:var(--r-md);
  background:linear-gradient(180deg, var(--navy-500), var(--navy-700));color:var(--gold-hi);
  font-family:var(--display);font-weight:800;text-decoration:none;
  box-shadow:0 4px 0 var(--gold-edge), inset 0 1px 0 oklch(1 0 0 / .18);
  transition:transform .16s cubic-bezier(.2,.8,.3,1)}
.arealinks a:hover{transform:translateY(-3px)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ============ INTERACTIVE COVERAGE MAP ============ */
.cvwrap{position:relative;border-radius:var(--r-lg);overflow:visible;
  padding:clamp(1rem,2.2vw,1.8rem);
  background:
    radial-gradient(90% 80% at 22% 20%, rgb(13 101 150 / .40), transparent 62%),
    radial-gradient(80% 70% at 82% 78%, rgb(242 170 16 / .16), transparent 60%),
    linear-gradient(165deg, rgb(0 33 55) 0%, rgb(0 17 30) 72%);
  box-shadow:0 7px 0 var(--gold-edge), 0 10px 24px oklch(0 0 0 / .5), inset 0 1px 0 oklch(1 0 0 / .14)}
.cvmap{width:100%;height:auto;display:block;overflow:visible}
.cvmap__route{stroke-dasharray:9 13;animation:cvflow 2.6s linear infinite}
@keyframes cvflow{to{stroke-dashoffset:-44}}
.cvcity{cursor:pointer}
.cvcity:focus{outline:none}
.cvcity__dot{transition:r .16s ease-out, filter .16s ease-out}
.cvcity:hover .cvcity__dot,.cvcity:focus .cvcity__dot{r:10;filter:drop-shadow(0 0 9px var(--gold-hi))}
.cvcity:focus-visible .cvcity__dot{stroke:#fff;stroke-width:3}
.cvcity__label{font-family:var(--display);font-weight:900;font-size:19px;fill:#fff;
  paint-order:stroke;stroke:#00111E;stroke-width:5px;stroke-linejoin:round;pointer-events:none}
.cvcity.is-landmark .cvcity__label{fill:var(--gold-hi)}
.cvcity__leader{stroke:oklch(1 0 0 / .34);stroke-width:1.3}
.cvcity__halo{pointer-events:none}

.cvpop{position:absolute;top:0;left:0;z-index:20;width:min(330px,84vw);
  background:linear-gradient(170deg, rgb(0 49 84) 0%, rgb(0 17 30) 100%);
  border-radius:var(--r-md);overflow:hidden;pointer-events:auto;
  box-shadow:0 6px 0 var(--gold-edge), 0 14px 34px oklch(0 0 0 / .62), inset 0 1px 0 oklch(1 0 0 / .2);
  opacity:0;transition:opacity .15s ease-out}
.cvpop.is-on{opacity:1}
.cvpop__img{width:100%;height:132px;object-fit:cover;display:block;
  border-block-end:2px solid var(--gold)}
.cvpop__body{padding:1rem 1.1rem 1.15rem}
.cvpop__city{font-family:var(--display);font-weight:900;font-size:1.22rem;line-height:1.1;
  color:#fff;text-transform:uppercase;margin:0 0 .15rem}
.cvpop__lm{font-family:var(--display);font-weight:800;font-size:.86rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-hi);margin:0 0 .5rem}
.cvpop__blurb{font-size:.9rem;line-height:1.45;color:var(--text);margin:0 0 .85rem}
.cvpop__crew{font-size:.82rem;color:var(--text-dim);margin:0 0 .7rem}
.cvpop__call{width:100%;justify-content:center}
.cvpop__more{display:inline-block;margin-block-start:.7rem;font-size:.85rem;font-weight:700;
  color:var(--sky)}
.cvpanel{margin-block-start:1rem;text-align:center}
.cvpanel__hint{color:var(--text-dim);font-size:.94rem;margin:0}
.cvlegend{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cvlegend li{display:grid;grid-template-columns:auto 1fr;gap:.3rem .7rem;align-items:start;
  padding:.9rem 1rem;border-radius:var(--r-md);background:oklch(1 0 0 / .06);
  box-shadow:inset 0 0 0 1px var(--navy-line)}
.cvlegend i{width:14px;height:14px;border-radius:50%;border:2px solid #00111E;margin-block-start:.28rem}
.cvlegend__sw{background:var(--gold-hi)}
.cvlegend__gta{background:var(--sky)}
.cvlegend b{font-family:var(--display);font-weight:900;color:var(--gold-hi);font-size:1.05rem}
.cvlegend span{grid-column:2;font-size:.86rem;color:var(--text-dim);line-height:1.4}
@media(max-width:700px){
  .cvcity__label{font-size:24px}
  .cvpop__img{height:110px}
}
@media (prefers-reduced-motion: reduce){
  .cvmap__route{animation:none}
}
/* ============ FOUR-ZONE SERVICE MAP ============ */
.zwrap{position:relative;border-radius:var(--r-lg);
  padding:clamp(.9rem,2vw,1.6rem);isolation:isolate;overflow:hidden;
  background:
    radial-gradient(70% 60% at 18% 16%, rgb(13 101 150 / .48), transparent 60%),
    radial-gradient(65% 60% at 84% 82%, rgb(242 170 16 / .20), transparent 58%),
    radial-gradient(120% 100% at 50% 120%, rgb(0 71 112 / .55), transparent 70%),
    linear-gradient(168deg, rgb(0 33 55) 0%, rgb(0 17 30) 76%);
  box-shadow:
    0 9px 0 var(--gold-edge),
    0 14px 30px oklch(0 0 0 / .58),
    inset 0 2px 0 oklch(1 0 0 / .18),
    inset 0 -30px 60px oklch(0 0 0 / .45)}
/* faint honeycomb, the brand motif, sitting under the map */
.zwrap::before{content:"";position:absolute;inset:0;z-index:0;opacity:.16;
  background-image:radial-gradient(circle at 50% 50%, rgb(242 170 16 / .5) 1.5px, transparent 1.6px);
  background-size:26px 26px}
.zwrap>*{position:relative;z-index:1}
.zmap{width:100%;height:auto;display:block;overflow:visible}

/* ---- cinematic aerial coverage map (replaces the flat SVG on the home page) -- */
.covmap{position:relative;border-radius:var(--r-md);overflow:hidden}
.covmap__stage{line-height:0;transform-origin:50% 50%;
  transition:transform .95s cubic-bezier(.4,0,.2,1);will-change:transform}
.covmap__img{width:100%;height:auto;display:block}
.covmap__hot{position:absolute;z-index:2;margin:0;padding:0;background:transparent;border:0;
  border-radius:16px;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:box-shadow .25s ease,background .25s ease}
.covmap__hot:hover,.covmap__hot:focus-visible{outline:none;background:rgb(254 212 36 / .05);
  box-shadow:inset 0 0 0 2px rgb(254 212 36 / .55),0 0 26px rgb(254 212 36 / .3)}
.covmap__caption{position:absolute;left:50%;top:5%;z-index:4;
  transform:translateX(-50%) translateY(-10px);
  display:flex;flex-direction:column;align-items:center;gap:.1rem;
  padding:.55rem 1.2rem;border-radius:999px;text-align:center;line-height:1.15;
  background:linear-gradient(180deg,rgb(0 33 55 / .92),rgb(0 17 30 / .95));
  border:1.5px solid var(--gold);box-shadow:0 10px 26px rgb(0 0 0 / .55),0 0 32px rgb(242 170 16 / .45);
  opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease}
.covmap.is-zoomed .covmap__caption{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.covmap.is-zoomed .covmap__zone{opacity:0;pointer-events:none}
.covmap__capname{font-family:var(--display);font-weight:900;font-size:clamp(.95rem,1.7vw,1.3rem);
  color:var(--gold-hi);letter-spacing:.02em}
.covmap__capnum{font-family:var(--display);font-weight:900;font-size:clamp(.9rem,1.5vw,1.15rem);
  color:var(--sky);text-decoration:none;letter-spacing:.02em}
.covmap__captowns{font-family:var(--body);font-weight:600;font-size:clamp(.6rem,1vw,.75rem);
  color:var(--paper)}
/* city markers that populate when a zone is flown into */
.covmap__towns{position:absolute;inset:0;z-index:3;pointer-events:none}
.cmtown{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;gap:3px;opacity:0;transition:opacity .5s ease;white-space:nowrap}
.cmtown.is-on{opacity:1}
.cmtown__dot{width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle, #FFF6D0 0%, var(--gold) 55%, rgb(242 170 16 / 0) 72%);
  box-shadow:0 0 9px 2px rgb(254 212 36 / .75)}
.cmtown__lbl{font-family:var(--display);font-weight:800;font-size:.74rem;letter-spacing:.01em;
  color:#fff;text-shadow:0 1px 2px #000, 0 0 6px rgb(0 0 0 / .85)}
/* illustrated promise panels (image cells sit flush) */
.promise__item--img{padding:0;overflow:hidden;display:flex}
.promise__item--img picture{display:block;width:100%}
.promise__item--img img{display:block;width:100%;height:auto;border-radius:inherit}

/* clear-fixed-quotes module: promise + a real day-by-day schedule (no fake prices) */
.promise__quote{margin-top:clamp(1rem,2.5vw,1.6rem);display:grid;
  grid-template-columns:1.05fr 1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:center;
  padding:clamp(1.3rem,3vw,2.3rem);border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgb(2 49 84 / .5), rgb(0 17 30 / .55));
  border:1px solid var(--navy-line);box-shadow:var(--sh-1)}
@media(max-width:760px){.promise__quote{grid-template-columns:1fr;gap:1.3rem}}
.pquote__intro h3{font-family:var(--display-xl);font-weight:900;color:var(--gold-hi);
  font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1.06;letter-spacing:-.02em;margin-bottom:.55rem}
.pquote__intro p{color:var(--text-dim);margin-bottom:1.15rem;max-width:46ch}
.pquote__steps{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin:0;padding:0}
.pquote__steps li{display:flex;align-items:center;gap:.9rem;
  background:rgb(0 17 30 / .4);border:1px solid var(--navy-line);border-left:4px solid var(--gold);
  border-radius:var(--r-sm);padding:.7rem .95rem}
.pquote__day{font-family:var(--display);font-weight:900;color:var(--gold-hi);
  font-size:.95rem;letter-spacing:.02em;flex:none;min-width:3.6em}
.pquote__task{color:var(--text);font-weight:500}

/* seniors panel (full-width illustrated feature + real tap-to-call buttons) */
.seniors__panel{margin:0 0 clamp(1rem,2.5vw,1.6rem)}
.seniors__panel img{display:block;width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.seniors__calls{max-width:760px;margin-inline:auto}
.covmap__zone{position:absolute;display:flex;flex-direction:column;align-items:center;
  gap:.12rem;padding:.62rem 1.05rem;border-radius:999px;text-decoration:none;text-align:center;
  font-family:var(--display);line-height:1.15;
  background:linear-gradient(180deg,rgb(0 33 55 / .82),rgb(0 17 30 / .9));
  border:1.5px solid var(--gold);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  box-shadow:0 0 0 3px rgb(0 17 30 / .35),0 8px 22px rgb(0 0 0 / .55),0 0 26px rgb(242 170 16 / .4);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s ease}
.covmap__zone:hover,.covmap__zone:focus-visible{transform:translateY(-3px);outline:none;
  box-shadow:0 0 0 3px rgb(0 17 30 / .4),0 12px 28px rgb(0 0 0 / .6),0 0 42px rgb(254 212 36 / .6)}
.covmap__num{font-weight:900;font-size:clamp(1rem,1.9vw,1.45rem);color:var(--gold-hi);letter-spacing:.01em}
.covmap__area{font-weight:800;font-size:clamp(.56rem,1vw,.72rem);letter-spacing:.07em;
  text-transform:uppercase;color:var(--paper)}
.covmap__zone--sw{left:6%;bottom:21%}
.covmap__zone--gta{left:53%;top:43%}
@media(max-width:560px){
  .covmap__zone{padding:.4rem .7rem;gap:0}
  .covmap__num{font-size:.82rem}.covmap__area{font-size:.5rem}}

/* ============ 3D GOLD RISE + SHIMMER — all headlines ============
   Gold gradient face, a blue 3D extrude (the "rise" from the wordmark sample),
   a blue outline glow, and a slow diagonal shimmer sweep. Depth is built from
   stacked drop-shadows — they cast off the gold shape and keep the face bright;
   text-shadow behind transparent gradient glyphs would only muddy them. */
@keyframes fxGoldSheen{
  0%{background-position:-160% 0, 0 0}
  55%,100%{background-position:260% 0, 0 0}}
.eyebrow, .h1__slogan em, .kicker, .card__num, .card h3, .promise__title,
.sec-head h2, .seniors__copy h2, .final h2, .region__head h3{
  background-image:
    linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .92) 47%, transparent 64%),
    linear-gradient(180deg, #FFF7DA 0%, #FFD64A 44%, #F5A81A 100%);
  background-size:260% 100%, 100% 100%;
  background-position:-160% 0, 0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
  filter:
    drop-shadow(0 1px 0 #0D47A1)
    drop-shadow(0 2px 0 #0c3f8f)
    drop-shadow(0 3px 0 #0a3577)
    drop-shadow(0 5px 5px rgb(0 0 0 / .42))
    drop-shadow(0 0 8px rgb(33 150 243 / .45));
  animation:fxGoldSheen 4s ease-in-out infinite;
}
/* no leading dash marks on the eyebrows */
.kicker::before, .eyebrow::before{display:none}
@media(prefers-reduced-motion:reduce){
  .eyebrow, .h1__slogan em, .kicker, .card__num, .card h3, .promise__title,
  .sec-head h2, .seniors__copy h2, .final h2, .region__head h3{
    animation:none;background-position:220% 0, 0 0}}
/* footer column headings: one clean, readable, consistent style (not the big
   headline gradient, which turns small footer text to mud) */
.foot__grid h4{font-family:var(--display);font-weight:900;font-size:1.5rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi);
  -webkit-text-fill-color:currentColor;margin-block-end:.7rem;
  filter:drop-shadow(1px 1px 0 #0D47A1) drop-shadow(2px 2px 0 #0D47A1) drop-shadow(0 0 6px rgba(33,150,243,.4))}

/* Ken Burns: slow cinematic zoom on the gallery + why photos, on hover/focus.
   Honours reduced-motion. Containers clip the overflow so the zoom stays framed. */
.idea, .why__shot{overflow:hidden}
.idea img, .why__shot img{transition:transform 6s cubic-bezier(.2,.5,.2,1);will-change:transform}
.idea:hover img, .idea:focus-within img,
.why__item:hover .why__shot img, .why__shot:focus-within img{transform:scale(1.12)}
.idea--collage img{transition:none;will-change:auto}
.idea--collage:hover img, .idea--collage:focus-within img{transform:none}
@media(prefers-reduced-motion:reduce){
  .idea img, .why__shot img{transition:none}
  .idea:hover img, .why__item:hover .why__shot img{transform:none}}
.zmap__cam{transition:transform .62s cubic-bezier(.22,.85,.24,1);transform-origin:0 0}
/* the glowing corridor is the signature of the aerial art: warm amber bloom */
.zmap__route{stroke-dasharray:11 15;animation:zflow 3s linear infinite;
  filter:drop-shadow(0 0 3px rgb(254 212 36 / .95)) drop-shadow(0 0 11px rgb(230 122 0 / .7))}
@keyframes zflow{to{stroke-dashoffset:-52}}
/* golden-hour bloom rising off the bottom, painted over the map, never blocking it */
.zwrap::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;mix-blend-mode:screen;
  background:radial-gradient(78% 54% at 50% 112%, rgb(255 176 51 / .22), transparent 62%)}

.zzone{cursor:pointer;transition:opacity .35s ease}
.zzone:focus{outline:none}
.zzone.is-dim{opacity:.22}
.zzone__glow{opacity:.85;transition:opacity .35s ease}
.zzone.is-on .zzone__glow{opacity:1}
.zzone__plate{opacity:.42;transition:opacity .3s ease, stroke-width .3s ease;
  animation:zdash 26s linear infinite}
@keyframes zdash{to{stroke-dashoffset:-380}}
.zzone.is-on .zzone__plate,.zzone:focus-visible .zzone__plate{opacity:1;stroke-width:3.4}
.zzone__title{font-family:var(--display-xl,var(--display));font-weight:900;
  font-size:30px;letter-spacing:.04em;fill:var(--gold-hi);pointer-events:none;
  paint-order:stroke;stroke:#00111E;stroke-width:6px;stroke-linejoin:round;
  transition:opacity .3s ease}
.zzone.is-dim .zzone__title{opacity:.3}

.zcity__dot{transition:r .2s cubic-bezier(.2,.8,.3,1);filter:drop-shadow(0 0 3px rgb(254 212 36 / .35))}
.zcity__ring{animation:zpulse 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * .11s);
  transform-box:fill-box;transform-origin:center}
@keyframes zpulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.85;transform:scale(1.22)}}
.zcity.has-hero .zcity__dot{filter:drop-shadow(0 0 10px var(--gold-hi))}

.zpanel{margin-block-start:1.3rem;padding:1.3rem 1.4rem;border-radius:var(--r-md);
  background:linear-gradient(170deg, rgb(0 49 84 / .9), rgb(0 17 30 / .96));
  box-shadow:0 5px 0 var(--gold-edge), 0 9px 20px oklch(0 0 0 / .5), inset 0 1px 0 oklch(1 0 0 / .18)}
.zpanel__idle p{margin:0;text-align:center;color:var(--text-dim)}
.zpanel__img{width:100%;max-height:190px;object-fit:cover;border-radius:12px;
  border:2px solid var(--gold);margin-block-end:1rem;display:block}
.zpanel__name{font-family:var(--display);font-weight:900;font-size:1.5rem;
  text-transform:uppercase;color:var(--gold-hi);margin:0 0 .2rem;
  text-shadow:0 1px 0 #8a4d00,0 2px 0 #5d3400,0 5px 10px rgb(0 0 0 / .5)}
.zpanel__sub{font-family:var(--display);font-weight:800;font-size:.86rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sky);margin:0 0 .7rem}
.zpanel__blurb{color:var(--text);margin:0 0 1rem;max-width:62ch}
.zpanel__regions{list-style:none;padding:0;margin:1rem 0 0;display:flex;gap:.6rem;flex-wrap:wrap}
.zpanel__regions a{display:inline-block;padding:.55rem .95rem;border-radius:999px;
  background:linear-gradient(180deg,var(--navy-500),var(--navy-700));color:var(--gold-hi);
  font-family:var(--display);font-weight:800;font-size:.86rem;text-decoration:none;
  box-shadow:0 3px 0 var(--gold-edge), inset 0 1px 0 oklch(1 0 0 / .2);
  transition:transform .16s cubic-bezier(.2,.8,.3,1)}
.zpanel__regions a:hover{transform:translateY(-2px)}

.zcards{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.85rem;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.zcard{display:grid;gap:.3rem;padding:1rem 1.1rem;border-radius:var(--r-md);cursor:pointer;
  background:linear-gradient(180deg, rgb(0 71 112), rgb(2 49 84));
  box-shadow:0 5px 0 var(--gold-edge), 0 8px 16px oklch(0 0 0 / .42), inset 0 1px 0 oklch(1 0 0 / .18);
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease}
.zcard:hover,.zcard.is-on{transform:translateY(-4px);
  box-shadow:0 9px 0 var(--gold-edge), 0 13px 24px oklch(0 0 0 / .5), inset 0 1px 0 oklch(1 0 0 / .26)}
.zcard>b{font-family:var(--display);font-weight:900;font-size:1.16rem;color:var(--gold-hi);
  text-transform:uppercase;text-shadow:0 1px 0 #8a4d00,0 2px 0 #5d3400}
.zcard>span{font-size:.84rem;color:var(--text-dim);line-height:1.35}
.zcard .btn{margin-block-start:.6rem;justify-content:center}
@media(max-width:700px){.zzone__title{font-size:38px}}
@media (prefers-reduced-motion: reduce){
  .zmap__cam{transition:none}
  .zmap__route,.zzone__plate,.zcity__ring{animation:none}
}
/* ---- city labels: small on every dot, blooming on hover ---- */
.zcity{cursor:pointer}
.zcity:focus{outline:none}
.zcity__label{font-family:var(--display);font-weight:800;font-size:9.5px;letter-spacing:.02em;
  fill:oklch(0.93 0.02 250);pointer-events:none;
  paint-order:stroke;stroke:#00111E;stroke-width:3.2px;stroke-linejoin:round;
  transition:font-size .18s cubic-bezier(.2,.8,.3,1), fill .18s ease, stroke-width .18s ease}
.zcity:hover .zcity__label,.zcity:focus-visible .zcity__label{
  font-size:23px;fill:#fff;stroke-width:6px}
.zcity:hover .zcity__dot,.zcity:focus-visible .zcity__dot{r:11}
.zcity.has-hero .zcity__label{fill:var(--gold-hi);font-size:11.5px}
.zcity.has-hero:hover .zcity__label{font-size:27px}
.zzone.is-dim .zcity__label{opacity:.25}
/* data-viz encoding colour for the second service area. Validated with the dataviz skill:
   chroma floor PASS, CVD separation from gold dE 28.1 protan / 22.9 tritan,
   normal-vision dE 31.4, contrast >=3:1 on the dark map surface. The brand
   --sky token is unchanged; this is an encoding job, not a brand job. */
:root{--crew-gta:#5BB8F5}
.zmap .zcity__ring[stroke="#7FC4F0"]{stroke:var(--crew-gta)}
.cvlegend__gta{background:var(--crew-gta)}
/* labels with no room at rest: present in the DOM, revealed on hover/focus */
.zcity__label--hover{opacity:0;font-size:0px;transition:opacity .16s ease, font-size .18s cubic-bezier(.2,.8,.3,1)}
.zcity:hover .zcity__label--hover,.zcity:focus-visible .zcity__label--hover{opacity:1;font-size:23px}
/* the hovered city must paint above its neighbours */
.zcity:hover,.zcity:focus-visible{isolation:isolate}
/* ---- level of detail: the map gets more descriptive as the camera moves in ---- */
.zland__contour{opacity:0;transition:opacity .5s ease;pointer-events:none}
.zmap[data-zoom="1"] .zland__contour{opacity:1}
.zland__relief{pointer-events:none}

.zmark{opacity:0;pointer-events:none;transition:opacity .4s ease .12s}
.zzone.is-on .zmark{opacity:1;pointer-events:auto}
.zmark__stem{stroke:var(--gold);stroke-width:1.6;stroke-opacity:.75}
.zmark__pin{fill:#00111E;stroke:var(--gold-hi);stroke-width:2.4;
  filter:drop-shadow(0 4px 7px rgb(0 0 0 / .65))}
.zmark__img{filter:drop-shadow(0 2px 4px rgb(0 0 0 / .5))}
/* in a dense cluster the captions collide, so hold the picture pins at rest and
   reveal each landmark name only on hover or focus. Names stay in the DOM. */
.zmark__cap{opacity:0;transition:opacity .18s ease}
.zmark:hover .zmark__cap,.zmark:focus-within .zmark__cap{opacity:1}
.zmark__cap{font-family:var(--display);font-weight:800;font-size:9px;letter-spacing:.02em;
  fill:var(--gold-hi);paint-order:stroke;stroke:#00111E;stroke-width:3.6px;
  stroke-linejoin:round;pointer-events:none}
.zmark:hover .zmark__pin{stroke-width:3.4}

/* minor city labels stay quiet until you are inside a zone */
.zmap[data-zoom="1"] .zcity__label{font-size:11px}
.zmap[data-zoom="1"] .zcity.has-hero .zcity__label{font-size:13px}
@media (prefers-reduced-motion: reduce){
  .zland__contour,.zmark{transition:none}
}
/* reveal is driven by the map's own zoom flag as well as the zone class, so it
   cannot be left in a half-applied transition state */
.zmap[data-zoom="1"] .zzone.is-on .zmark,
.zmap[data-zoom="1"] .zzone.is-on .zmark{opacity:1;pointer-events:auto}
.zmap[data-zoom="1"] .zland__contour{opacity:1}
/* ---- 400-series highways ---- */
.zroad__case{fill:none;stroke:#00111E;stroke-opacity:.75;stroke-width:5.4;
  stroke-linecap:round;stroke-linejoin:round}
.zroad{fill:none;stroke:#C9D6E4;stroke-opacity:.34;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke-opacity .4s ease}
.zroad--major{stroke:#E6EEF7;stroke-opacity:.5;stroke-width:2.6}
.zmap[data-zoom="1"] .zroad{stroke-opacity:.62}
.zmap[data-zoom="1"] .zroad--major{stroke-opacity:.9}
.zshield{opacity:0;transition:opacity .4s ease}
.zmap[data-zoom="1"] .zshield{opacity:1}
.zshield rect{fill:#00111E;stroke:#E6EEF7;stroke-opacity:.8;stroke-width:1.4}
.zshield text{font-family:var(--display);font-weight:900;font-size:11px;fill:#fff;
  letter-spacing:.02em}
/* Safety net for the scroll-reveal system.
   .reveal starts at opacity 0 and an IntersectionObserver is meant to clear it.
   If that observer never fires for an element, the content is invisible to the
   visitor with no error anywhere. This happened to the map. Belt and braces:
   anything still unrevealed 1.2s after load fades itself in. */
@keyframes revealFailsafe{to{opacity:1;transform:none}}
.reveal{animation:revealFailsafe .4s ease 1.2s forwards}
@media (prefers-reduced-motion: reduce){
  .reveal{animation:none;opacity:1;transform:none}
}
/* The H1 carries both the slogan and the keywords. The slogan stays visually
   dominant; the keyword line rides in the same element so the strongest on-page
   signal is not spent entirely on brand. */
.h1__slogan{display:block}
.h1__seo{display:block;font-family:var(--display-alt,var(--display));
  font-size:clamp(.95rem,1.6vw,1.28rem);font-weight:700;letter-spacing:.005em;
  text-transform:none;line-height:1.32;color:var(--sky);
  margin-block-start:.85rem;max-width:34ch;text-shadow:0 2px 6px rgb(0 0 0 / .6)}
/* ---- landmark caption: real text sitting ON the picture ----
   Painted-in lettering would be invisible to search, illegible at small sizes,
   and could come back misspelled from an image model. This looks the same and
   has none of those failure modes. */
.zpanel__fig{position:relative;margin:0 0 1rem;border-radius:12px;overflow:hidden;
  border:2px solid var(--gold);box-shadow:0 5px 0 var(--gold-edge),0 9px 20px oklch(0 0 0 / .5)}
/* Source art is square and the subject usually sits above centre, so a plain
   cover-crop beheaded the Woodstock cow. Taller box, and the crop favours the
   upper part of the frame where the landmark actually is. */
.zpanel__fig .zpanel__img{width:100%;aspect-ratio:5/4;max-height:none;
  object-fit:cover;object-position:50% 42%;display:block;
  border:0;border-radius:0;margin:0}
.zpanel__cap{position:absolute;inset:auto 0 0 0;padding:2.1rem .95rem .7rem;
  display:flex;flex-direction:column;gap:.1rem;pointer-events:none;
  background:linear-gradient(to top, oklch(0.16 0.03 250 / .96) 0%,
    oklch(0.16 0.03 250 / .82) 42%, oklch(0.16 0.03 250 / 0) 100%)}
.zpanel__cap::before{content:"";position:absolute;left:.95rem;top:1.15rem;
  width:38px;height:3px;background:var(--gold);border-radius:2px}
.zpanel__capcity{font-family:var(--display);font-weight:400;font-size:1.55rem;
  line-height:1;color:var(--gold-hi);text-transform:uppercase;letter-spacing:.01em;
  text-shadow:0 1px 0 #8a4d00,0 2px 0 #633600,0 4px 8px oklch(0 0 0 / .7)}
.zpanel__caplm{font-family:var(--display-alt,var(--display));font-weight:700;
  font-size:.82rem;color:var(--sky);letter-spacing:.01em;
  text-shadow:0 1px 4px oklch(0 0 0 / .8)}
@media(max-width:700px){
  .zpanel__fig .zpanel__img{aspect-ratio:4/3}
  .zpanel__capcity{font-size:1.3rem}
}
/* ============ THREE.JS HERO DEPTH LAYER ============ */
/* Sits behind hero content, never intercepts a click, and is simply absent on
   small screens and for reduced-motion users. The page must be complete without it. */
.hero{position:relative}
/* opacity .75 is the original 13 Aug value. Without it the field renders at full
   strength and reads as sitting on top of the hero instead of behind it. */
.hero3d{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:.75;contain:strict}
.hero3d canvas{display:block;width:100%;height:100%}
.hero>*:not(.hero3d){position:relative;z-index:1}
@media(max-width:820px){.hero3d{display:none}}
@media (prefers-reduced-motion: reduce){.hero3d{display:none}}

/* GSAP owns the reveal once JS is running. This class is added by main.js, which
   cancels the CSS keyframe failsafe so the two never animate the same property.
   If main.js never runs, the failsafe still shows the content. */
.reveal.reveal--js{animation:none}
/* ---- location-aware greeting ----
   The default tagline is what ships and what crawlers index. This only styles
   the "your crew" highlight applied client-side after an IP city lookup. */
.callbtn.is-yours{
  box-shadow:0 0 0 3px var(--gold-hi), 0 6px 0 rgb(0 71 112),
             0 10px 24px rgb(242 170 16 / .45) !important;
  transform:translateY(-2px)}
.callbtn.is-yours::before{
  content:"Your area";position:absolute;top:-.62rem;right:.7rem;
  font-family:var(--display-alt,var(--display));font-weight:900;font-size:.58rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--navy-900);
  background:var(--gold-hi);padding:.14rem .45rem;border-radius:5px;
  box-shadow:0 2px 0 var(--gold-edge)}
@media (prefers-reduced-motion: reduce){.callbtn.is-yours{transform:none}}
/* ============ TOP NAV AS 3D BUTTONS ============ */
/* Navy face, gold edge, gold lettering: the same complementary-edge rule the
   phone buttons and CTAs use, so the header stops reading as plain text links. */
/* One row, always. Wrapping here dropped "24/7 Emergency" onto a second line
   and pushed the header to 112px tall. Below 1000px the nav is hidden instead. */
.topnav{display:none;gap:.8rem;flex-wrap:nowrap;align-items:center;margin-inline-start:auto}
@media(min-width:1000px){.topnav{display:flex}}
.topnav a{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:.8rem 1.37rem;border-radius:var(--r-md);
  font-family:var(--display-alt,var(--display));font-weight:800;font-size:1.12rem;
  letter-spacing:.015em;text-decoration:none;white-space:nowrap;
  color:var(--gold-hi);
  background:linear-gradient(180deg, var(--navy-500) 0%, var(--navy-600) 48%, var(--navy-700) 100%);
  box-shadow:0 4px 0 var(--gold-edge), 0 6px 12px oklch(0 0 0 / .38),
             inset 0 1px 0 oklch(1 0 0 / .20);
  transition:transform .16s cubic-bezier(.2,.8,.3,1),
             box-shadow .16s cubic-bezier(.2,.8,.3,1), filter .16s ease}
/* the glass highlight across the top half, same as every other button */
.topnav a::after{content:"";position:absolute;inset:1px 1px auto;height:45%;
  border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 40% 40%;
  background:linear-gradient(180deg, oklch(1 0 0 / .16), oklch(1 0 0 / 0));
  opacity:.32;pointer-events:none}
.topnav a:hover{transform:translateY(-3px);filter:brightness(1.09);
  box-shadow:0 7px 0 var(--gold), 0 10px 18px oklch(0 0 0 / .42),
             inset 0 1px 0 oklch(1 0 0 / .28)}
.topnav a:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}
.topnav a:active{transform:translateY(4px);
  box-shadow:0 1px 0 var(--gold-edge), 0 2px 4px oklch(0 0 0 / .35),
             inset 0 1px 0 oklch(1 0 0 / .16)}
/* the section you are actually looking at stays lit */
.topnav a.is-current{
  background:linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  color:var(--gold-ink);
  box-shadow:0 4px 0 rgb(0 71 112), 0 6px 14px rgb(242 170 16 / .40),
             inset 0 1px 0 oklch(1 0 0 / .45)}
.topnav a.is-current::after{opacity:.5}

@media(max-width:900px){
  .topnav{gap:.4rem}
  .topnav a{padding:.5rem .7rem;font-size:.76rem}
}
@media (prefers-reduced-motion: reduce){
  .topnav a,.topnav a:hover,.topnav a:active{transition:none;transform:none}
}

/* ---- static coverage-map city labels (Windsor->London corridor) ---- */
.covmap__labels{position:absolute;inset:0;z-index:3;pointer-events:none}
.cmlabel{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.3rem;
  font-family:var(--display);font-weight:800;font-size:clamp(.58rem,1.1vw,.82rem);letter-spacing:.02em;
  color:#fff;white-space:nowrap;text-shadow:0 1px 3px rgb(0 0 0 / .95),0 0 9px rgb(0 0 0 / .7)}
.cmlabel::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--gold-hi);box-shadow:0 0 6px 1px rgb(254 212 36 / .85)}

/* ---- Ken Burns: slow, subtle zoom on feature photos (reduced-motion safe) ----
   Excluded from images that have baked-in text/writing (hero van, quote van,
   services collage, coverage map, areas map, footer map) - the scale/crop cuts
   words in half mid-scroll. Photos-only from here. */
@media (prefers-reduced-motion: no-preference){
  @keyframes kenburns{from{transform:scale(1.08) translate(-1.8%,-1.2%)}to{transform:scale(1.18) translate(1.8%,1.2%)}}
  .why__board{overflow:hidden}
  .promise__bgimg,.seniors__bgimg,.why__board img{
    animation:kenburns 18s ease-in-out infinite alternate;transform-origin:50% 40%;
    will-change:transform;backface-visibility:hidden}
}

/* ---- call buttons: center the number + area label so they fill the button evenly ---- */
.btn.callbtn{align-items:center !important;text-align:center}
.callbtn b{justify-content:center !important;width:100%}
.callbtn em{width:100%;text-align:center;padding-inline-start:0 !important}

/* ---- fill the wire CTA buttons: larger, bolder text ---- */
.btn--wire{font-size:clamp(1.65rem,2.4vw,2.05rem);font-weight:900;letter-spacing:.01em}
.btn--wire.btn--lg{font-size:clamp(1.9rem,2.8vw,2.35rem)}
.topbanner__act .btn--wire{font-weight:900;line-height:1.15}

/* ---- Why section: single 4-panel board image ---- */
.why__board{max-width:1120px;margin-inline:auto;border-radius:var(--r-lg);overflow:hidden;position:relative;z-index:1}
.why__board img{width:100%;height:auto;display:block}

/* ---- uniform full-width call buttons (identical bars, end to end) ---- */
.callpair:not(.callpair--sm){width:100%}
.callpair:not(.callpair--sm) .callbtn{flex:1 1 100% !important;width:100%}

/* ============ SUBPAGE CHROME ============
   .nav, .chips, .faq__item and .foot were used by every /handyman/ landing page
   and by /legal-basement-apartments/, but were never defined. Header links ran
   together as one word, the footer was unstyled and FAQ entries had no separation.
   Added 2026-08-19. Tokens only, no new colours. */

.nav{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(.9rem,2vw,1.75rem)}
.nav a{color:var(--text);font-family:var(--display);font-weight:700;font-size:.98rem;
  text-decoration:none;letter-spacing:.01em;padding-block:.35rem;
  border-block-end:2px solid transparent;transition:color .16s ease-out,border-color .16s ease-out}
.nav a:hover,.nav a:focus-visible{color:var(--gold-hi);border-block-end-color:var(--gold)}
@media(max-width:700px){.nav{display:none}}

.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-block:1.2rem 0;padding:0;list-style:none}

.faq__item{padding:1.15rem 1.35rem;margin-block-end:.85rem;border-radius:var(--r-md);
  background:linear-gradient(165deg, rgb(2 49 84 / .85), rgb(0 25 43 / .9));
  border-inline-start:4px solid var(--gold);
  box-shadow:0 2px 0 rgb(10 74 115), 0 8px 20px oklch(0 0 0 / .3)}
.faq__item h3{margin:0 0 .5rem;font-family:var(--display);font-weight:800;
  font-size:clamp(1.02rem,1.7vw,1.18rem);color:var(--gold-hi)}
.faq__item p{margin:0;color:var(--text);line-height:1.62}

.foot{padding:clamp(2rem,4vw,3rem) 0;margin-block-start:clamp(2rem,5vw,4rem);
  background:linear-gradient(180deg, rgb(0 25 43), var(--navy-900));
  border-block-start:3px solid var(--gold-edge);text-align:center}
.foot p{margin:0 0 .55rem;color:var(--text-dim);font-size:.96rem;line-height:1.6}
.foot p:last-child{margin-block-end:0}
.foot__phone{color:var(--gold-hi);font-family:var(--display);font-weight:800;
  font-size:1.16rem;text-decoration:none}
.foot__phone:hover,.foot__phone:focus-visible{text-decoration:underline}

/* Wide technical diagrams. .idea img forces aspect-ratio:2/3 portrait with
   object-fit:cover, which crops a landscape diagram into a sliver. --collage
   already fixes the image; --diagram also un-pins the caption so it reads
   below the figure instead of floating over the artwork. */
.idea--diagram{background:rgb(0 17 30 / .55)}
.idea--diagram img{max-height:none;aspect-ratio:1200/760;height:auto}
.idea--diagram figcaption{position:static;padding:.85rem 1.15rem 1.05rem;
  background:none;font-size:.92rem;color:var(--text-dim);text-align:center}

/* ============================================================
   QUOTE FORM  (added 2026-08-20)
   Speed-to-lead is the whole game for this business: 78% of
   customers hire whoever responds first, and responding inside
   60 seconds is worth +391% conversion. So this form is built
   short, phone-first, and with photo upload, because a picture
   of the problem often removes the site visit entirely.
   ============================================================ */
.quote__human{
  max-width:62ch;margin-inline:auto;margin-block:1.1rem 1.6rem;
  color:var(--text);font-size:1.02rem;line-height:1.55;
}
.quote__human strong{color:var(--gold-hi)}

.quote__split{
  display:grid;gap:clamp(1.2rem,3vw,2.4rem);align-items:start;
  grid-template-columns:1fr;max-width:1040px;margin-inline:auto;
}
/* 900px was too tight: at ~960px the right panel ran off the edge and got clipped.
   Two columns only once there is genuinely room for both. */
@media (min-width:1060px){ .quote__split{grid-template-columns:1.3fr .8fr} }

.qform{
  background:linear-gradient(180deg,rgb(0 33 55 / .92),rgb(0 17 30 / .94));
  border:1px solid var(--navy-line);border-radius:var(--r-lg);
  padding:clamp(1.1rem,2.6vw,1.9rem);box-shadow:var(--sh-2);
  border-block-end:3px solid var(--gold-deep);
}
.qform__lead{margin:0 0 1.1rem;color:var(--text-dim);font-size:.95rem}
.qform__row{display:grid;gap:.85rem;grid-template-columns:1fr}
@media (min-width:560px){ .qform__row{grid-template-columns:1fr 1fr} }

.qform__f{display:block;margin-block-end:.85rem}
.qform__f > span{
  display:block;margin-block-end:.35rem;font-family:var(--display);
  font-weight:800;font-size:.86rem;letter-spacing:.02em;color:var(--text);
}
.qform__f > span b{color:var(--gold);font-weight:800}
.qform__f > span em{
  display:block;font-style:normal;font-weight:600;font-size:.78rem;
  color:var(--text-dim);letter-spacing:0;margin-block-start:.1rem;
}
.qform input[type=text],.qform input[type=tel],.qform textarea,.qform select{
  width:100%;padding:.72rem .85rem;font:500 1rem/1.4 var(--body);
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:inset 0 1px 2px rgb(0 17 30 / .12);
}
.qform textarea{resize:vertical;min-height:110px}
.qform input:focus-visible,.qform textarea:focus-visible,.qform select:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-color:var(--gold-deep);
}
.qform input[aria-invalid="true"],.qform textarea[aria-invalid="true"]{
  border-color:var(--red-hi);box-shadow:0 0 0 3px rgb(224 48 15 / .22);
}
.qform__f--file input[type=file]{
  width:100%;padding:.6rem;font:500 .92rem var(--body);color:var(--text);
  background:rgb(255 255 255 / .06);border:1px dashed var(--navy-500);
  border-radius:var(--r-sm);
}
.qform__f--file small{display:block;margin-block-start:.4rem;color:var(--text-dim);font-size:.8rem;line-height:1.45}

.qform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.qform__submit{width:100%;margin-block-start:.5rem}
.qform__note{margin:.8rem 0 0;font-weight:600;min-height:1.2em}
.qform__note[data-state="err"]{color:var(--red-hi)}
.qform__note[data-state="ok"]{color:var(--gold-hi)}
.qform__fine{margin:.6rem 0 0;color:var(--text-dim);font-size:.82rem}

.quote__or{
  background:rgb(255 255 255 / .05);border:1px solid var(--navy-line);
  border-radius:var(--r-lg);padding:clamp(1rem,2.4vw,1.5rem);
}
.quote__orlead{
  margin:0 0 .9rem;font-family:var(--display);font-weight:900;
  font-size:1.05rem;color:var(--text);
}
.quote__points{margin:1.1rem 0 0;padding:0;list-style:none;display:grid;gap:.55rem}
.quote__points li{
  position:relative;padding-inline-start:1.5rem;color:var(--text-dim);
  font-size:.92rem;line-height:1.45;
}
.quote__points li::before{
  content:"";position:absolute;inset-block-start:.42em;inset-inline-start:0;
  width:.58rem;height:.58rem;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 3px rgb(242 170 16 / .18);
}

/* ============================================================
   "CALLING IS FASTER" EMPHASIS LINE  (2026-08-20)
   Tim asked for this big, 3D, and circled in red.
   Two ellipses at slightly different rotations and stroke widths
   read as a hand-drawn pen circle rather than a CSS border box.
   The extrude uses the site's existing language: a stacked
   text-shadow with a hard face and a receding edge.
   ============================================================ */
.qform__fine{
  position:relative;
  display:block;
  width:fit-content;
  max-width:100%;
  margin:2.4rem auto 1.1rem;
  padding:.55em 1.15em;
  text-align:center;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.02rem,2.9vw,1.6rem);
  line-height:1.32;
  letter-spacing:.005em;
  color:#FFF;
  text-wrap:balance;
  /* 3D extrude: hard dark face receding down-right, then a red glow bed */
  text-shadow:
    0 1px 0 #7a0a03,
    0 2px 0 #6a0903,
    0 3px 0 #5a0802,
    0 4px 0 #4a0602,
    0 5px 8px rgb(0 0 0 / .55),
    0 0 22px rgb(224 48 15 / .45);
}
/* outer pen stroke */
.qform__fine::before,
.qform__fine::after{
  content:"";
  position:absolute;
  inset:-.28em -.55em;
  border-radius:50% 50% 50% 50% / 50% 50% 50% 50%;
  pointer-events:none;
}
.qform__fine::before{
  border:4px solid var(--red-hi);
  border-block-start-color:rgb(224 48 15 / .72);   /* thins at the top like a real pen lift */
  transform:rotate(-2.2deg) scale(1.015);
  box-shadow:0 0 18px rgb(224 48 15 / .35), inset 0 0 22px rgb(224 48 15 / .12);
}
/* second, slightly offset pass so it reads hand-drawn, not geometric */
.qform__fine::after{
  border:2px solid rgb(194 16 5 / .55);
  border-inline-end-color:transparent;
  transform:rotate(1.6deg) scale(1.045);
}
@media (prefers-reduced-motion:no-preference){
  .qform__fine{animation:finePulse 3.6s ease-in-out infinite}
  @keyframes finePulse{
    0%,100%{text-shadow:
      0 1px 0 #7a0a03,0 2px 0 #6a0903,0 3px 0 #5a0802,0 4px 0 #4a0602,
      0 5px 8px rgb(0 0 0 / .55),0 0 22px rgb(224 48 15 / .45)}
    50%{text-shadow:
      0 1px 0 #7a0a03,0 2px 0 #6a0903,0 3px 0 #5a0802,0 4px 0 #4a0602,
      0 5px 8px rgb(0 0 0 / .55),0 0 34px rgb(224 48 15 / .75)}
  }
}
@media (max-width:560px){
  .qform__fine{padding:.6em .8em;margin-block-start:2rem}
  .qform__fine::before{inset:-.24em -.35em}
  .qform__fine::after{display:none}   /* one clean circle on small screens */
}

/* --- 2026-08-20, second pass on the emphasis line ------------------
   First version was too dominant and blocked the panel artwork.
   Smaller type, tighter circle, and the form panel is now translucent
   with a backdrop blur so the background image reads through without
   costing legibility. Blur matters: plain transparency over a busy
   photo makes form labels hard to read, which is the last thing a
   conversion form should do. */
.qform{
  background:linear-gradient(180deg,rgb(0 33 55 / .74),rgb(0 17 30 / .80));
  backdrop-filter:blur(7px) saturate(1.05);
  -webkit-backdrop-filter:blur(7px) saturate(1.05);
}
.quote__or{
  background:rgb(0 17 30 / .55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
/* Browsers without backdrop-filter get the old opaque panel back,
   so nobody ends up with unreadable labels over a photo. */
@supports not (backdrop-filter:blur(1px)){
  .qform{background:linear-gradient(180deg,rgb(0 33 55 / .94),rgb(0 17 30 / .96))}
  .quote__or{background:rgb(0 17 30 / .9)}
}

.qform__fine{
  font-size:clamp(.86rem,1.9vw,1.06rem);
  margin:1.7rem auto .5rem;
  padding:.42em .95em;
  text-shadow:
    0 1px 0 #7a0a03,
    0 2px 0 #5a0802,
    0 3px 6px rgb(0 0 0 / .5),
    0 0 14px rgb(224 48 15 / .38);
}
.qform__fine::before{
  border-width:2.5px;
  inset:-.22em -.42em;
  box-shadow:0 0 12px rgb(224 48 15 / .3), inset 0 0 16px rgb(224 48 15 / .09);
}
.qform__fine::after{ border-width:1.5px; transform:rotate(1.3deg) scale(1.035) }
@media (prefers-reduced-motion:no-preference){
  @keyframes finePulse{
    0%,100%{text-shadow:0 1px 0 #7a0a03,0 2px 0 #5a0802,0 3px 6px rgb(0 0 0 / .5),0 0 14px rgb(224 48 15 / .38)}
    50%    {text-shadow:0 1px 0 #7a0a03,0 2px 0 #5a0802,0 3px 6px rgb(0 0 0 / .5),0 0 24px rgb(224 48 15 / .62)}
  }
}

/* ============================================================
   SERVICES GRID, restacked 2026-08-20
   Was 8fr/4fr with residential spanning two rows, which made
   commercial a narrow sidebar card. Commercial is where the
   national-rollout credibility lives and it earns equal billing,
   so both are now full width and stacked.
   ============================================================ */
@media(min-width:880px){
  .svc{grid-template-columns:1fr}
}
.card--wide{grid-column:1;grid-row:auto}
/* Emergency stays a normal card and sits below the two majors. */

/* Uppercase via CSS, not typed caps in the HTML. Screen readers announce the
   underlying sentence case correctly this way, and the source stays readable
   for whoever edits the copy next. */
.quote__orlead{
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:clamp(.98rem,2.1vw,1.14rem);
  line-height:1.3;
  text-wrap:balance;
}

/* Call panel moved above the form 2026-08-20. Phone first is correct here:
   78% of home-service customers hire whoever responds first, so the fastest
   route to a human should lead, and the form is the fallback for people who
   cannot talk right now. Column ratio flipped to match, since the form needs
   the wider column for its two-up field rows. */
@media (min-width:1060px){
  .quote__split{grid-template-columns:.85fr 1.25fr}
}
.quote__or{
  border-block-end:3px solid var(--gold-deep);
}
.quote__orlead{
  color:var(--gold-hi);
  font-family:var(--display);
  font-weight:900;
}
/* The form is now the secondary path, so it reads a touch quieter. */
.qform__lead{color:var(--text-dim)}

/* The .quote section is centre-aligned, which was leaking into the bullet list:
   markers pinned hard left, text centred, big gap between them. Left-align the
   list and cap its width so it stays visually centred as a block. */
.quote__points{
  text-align:left;
  max-width:34ch;
  margin-inline:auto;
}
.quote__or{text-align:center}
.quote__or .callpair{justify-content:center;display:flex}

/* ============================================================
   TOP BANNER CTA + FLOATING QUOTE FOLLOWER   (2026-08-20)
   The banner button now states the offer in full: you speak to a
   live experienced contractor, and that is what earns the Best
   Quote Guarantee. Two lines so the long sentence stays readable
   at button size.
   ============================================================ */
.topbanner__quote{
  display:flex;flex-direction:column;gap:.18rem;text-align:center;
  line-height:1.18;padding-block:.72rem;
}
.topbanner__quote b{font-size:clamp(.82rem,1.5vw,.98rem);font-weight:900;letter-spacing:.005em}
.topbanner__quote em{
  font-style:normal;font-weight:800;
  font-size:clamp(.68rem,1.15vw,.8rem);
  letter-spacing:.06em;text-transform:uppercase;opacity:.85;
}

/* --- the follower ---------------------------------------------------
   Sits above the full-width call bar rather than beside it, so the two
   never collide. Hidden until the hero is out of view: showing a
   "scroll down to the quote form" prompt while the form is already on
   screen is just clutter. */
.qfloat{
  position:fixed;z-index:60;
  inset-inline-end:clamp(.7rem,2vw,1.4rem);
  inset-block-end:calc(var(--callbar-h, 74px) + clamp(.7rem,2vw,1.1rem));
  display:flex;flex-direction:column;gap:.1rem;
  max-inline-size:15.5rem;padding:.85rem 1.05rem;
  border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));
  color:var(--gold-ink);text-decoration:none;text-align:center;
  box-shadow:0 5px 0 var(--gold-edge), 0 12px 26px rgb(0 17 30 / .5);
  font-family:var(--display);
  opacity:0;visibility:hidden;translate:0 14px;
  transition:opacity .28s ease, translate .28s ease, visibility .28s;
}
.qfloat.is-on{opacity:1;visibility:visible;translate:0 0}
.qfloat:hover{filter:brightness(1.05)}
.qfloat:active{translate:0 3px;box-shadow:0 2px 0 var(--gold-edge), 0 8px 18px rgb(0 17 30 / .5)}
.qfloat:focus-visible{outline:3px solid #fff;outline-offset:3px}
.qfloat__top{font-weight:900;font-size:.92rem;line-height:1.15}
.qfloat__mid{font-weight:900;font-size:.92rem;line-height:1.15}
.qfloat__tag{
  margin-block-start:.25rem;font-size:.66rem;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;opacity:.8;
}
@media (max-width:560px){
  .qfloat{max-inline-size:11.5rem;padding:.7rem .8rem}
  .qfloat__top,.qfloat__mid{font-size:.8rem}
  .qfloat__tag{font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .qfloat{transition:opacity .01s}
}

/* ------------------------------------------------------------------
   TOP BANNER CTA, second pass 2026-08-20
   First attempt shrank the label to .82rem while the button kept its
   1.25rem/2.2rem padding, so the text floated in the middle of a large
   empty face. Now the label fills the face, and it carries the same
   embossed 3D the rest of the banner uses: white highlight above the
   glyph, dark relief below, so dark ink on gold reads as raised metal.
   ------------------------------------------------------------------ */
.topbanner__act .btn.topbanner__quote{
  inline-size:100%;
  padding:.95rem 1.5rem;
  gap:.05rem;
  line-height:1.1;
}
.topbanner__quote b{
  display:block;
  font-size:clamp(1.02rem,2.15vw,1.5rem);
  font-weight:900;
  letter-spacing:.005em;
  line-height:1.08;
  text-wrap:balance;
  text-shadow:
    0  1px 0 rgb(255 255 255 / .72),
    0  2px 0 rgb(255 255 255 / .30),
    0 -1px 0 rgb(0 0 0 / .30),
    0  3px 1px rgb(140 70 0 / .45),
    0  5px 9px rgb(0 0 0 / .32);
}
.topbanner__quote em{
  display:block;
  margin-block-start:.34rem;
  font-style:normal;
  font-weight:900;
  font-size:clamp(.7rem,1.2vw,.88rem);
  letter-spacing:.11em;
  text-transform:uppercase;
  opacity:1;
  color:rgb(0 33 55 / .82);
  text-shadow:
    0  1px 0 rgb(255 255 255 / .6),
    0 -1px 0 rgb(0 0 0 / .18);
}
/* a hairline rule between the promise and the guarantee, in the gold edge tone */
.topbanner__quote em::before{
  content:"";display:block;
  inline-size:min(58%,11rem);block-size:2px;
  margin:0 auto .38rem;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgb(140 70 0 / .5),transparent);
}
@media (max-width:560px){
  .topbanner__act .btn.topbanner__quote{padding:.85rem 1rem}
  .topbanner__quote b{font-size:1.02rem}
}

/* Third pass: the banner is a 2-col grid with align-items:stretch, so the gold
   button is forced to the pill's 140px height. The label only needed ~66px,
   leaving 74px of dead face. Scale the type to fill the height it is given. */
.topbanner__act .btn.topbanner__quote{padding:.8rem 1.35rem}
.topbanner__quote b{
  font-size:clamp(1.28rem,2.95vw,2.02rem);
  line-height:1.06;
}
.topbanner__quote em{
  margin-block-start:.42rem;
  font-size:clamp(.78rem,1.42vw,1.02rem);
  letter-spacing:.12em;
}
.topbanner__quote em::before{margin-block-end:.44rem}
@media (max-width:760px){
  /* single column below the grid breakpoint: no stretch to match, so ease off */
  .topbanner__quote b{font-size:clamp(1.05rem,4.2vw,1.4rem)}
  .topbanner__quote em{font-size:.76rem}
}

/* ------------------------------------------------------------------
   BEST QUOTE GUARANTEE as a stamped seal  (2026-08-20)
   A glow cannot work on dark ink over a bright gold face: there is no
   dark ground for light to spill onto. So the guarantee gets its own
   navy plate with bright gold lettering, which both solves the glow
   and reads like a stamped seal, which is what a guarantee should be.
   Contrast is #FED424 on #00111E, comfortably above AA.
   ------------------------------------------------------------------ */
.topbanner__quote em{
  display:block;
  inline-size:fit-content;
  margin:.5rem auto 0;
  padding:.4rem .95rem .42rem;
  border-radius:999px;
  background:linear-gradient(180deg, rgb(0 17 30 / .95), rgb(0 33 55 / .95));
  color:var(--gold-hi);
  font-size:clamp(.9rem,1.75vw,1.24rem);
  font-weight:900;
  letter-spacing:.1em;
  line-height:1.1;
  border:1px solid rgb(254 212 36 / .45);
  text-shadow:0 0 10px rgb(254 212 36 / .75), 0 0 22px rgb(242 170 16 / .45);
  box-shadow:
    0 0 0 1px rgb(0 0 0 / .25),
    0 0 14px rgb(254 212 36 / .35),
    inset 0 1px 0 rgb(255 255 255 / .12);
  animation:sealGlow 2.8s ease-in-out infinite;
}
.topbanner__quote em::before{content:none}   /* the plate replaces the hairline rule */

@keyframes sealGlow{
  0%,100%{
    text-shadow:0 0 10px rgb(254 212 36 / .70), 0 0 22px rgb(242 170 16 / .40);
    box-shadow:0 0 0 1px rgb(0 0 0 / .25), 0 0 14px rgb(254 212 36 / .30), inset 0 1px 0 rgb(255 255 255 / .12);
  }
  50%{
    text-shadow:0 0 14px rgb(254 212 36 / .95), 0 0 34px rgb(242 170 16 / .70);
    box-shadow:0 0 0 1px rgb(0 0 0 / .25), 0 0 26px rgb(254 212 36 / .55), inset 0 1px 0 rgb(255 255 255 / .12);
  }
}
@media (prefers-reduced-motion:reduce){
  .topbanner__quote em{animation:none}
}
@media (max-width:760px){
  .topbanner__quote em{font-size:.86rem;padding:.34rem .75rem;letter-spacing:.08em}
}


/* ------------------------------------------------------------------
   BANNER PILL, filled 2026-08-20
   Measured at 68% vertical fill with 48px of dead space: the pill is
   stretched by the grid to match the gold button beside it, but its
   type was sized for a much shorter box. Scaled the three lines up
   and given them a proper hierarchy so the box reads deliberate
   rather than padded out.
   ------------------------------------------------------------------ */
.topbanner__pill{
  display:flex;flex-direction:column;justify-content:center;gap:.34rem;
  padding:.95rem 1.5rem;
  line-height:1.2;
}
.topbanner__pill > span{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.02rem,1.95vw,1.34rem);
  line-height:1.14;
  color:#fff;
  text-wrap:balance;
  text-shadow:0 2px 0 rgb(0 17 30 / .55), 0 4px 10px rgb(0 0 0 / .35);
}
.topbanner__pill > b{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(.98rem,1.85vw,1.26rem);
  letter-spacing:.02em;
  color:var(--gold-hi);
  text-shadow:0 2px 0 rgb(0 17 30 / .6), 0 0 14px rgb(254 212 36 / .3);
}
.topbanner__pill > u{
  text-decoration:none;
  margin-block-start:.16rem;
}
.topbanner__pill > u a{
  display:inline-block;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.22rem,2.5vw,1.72rem);
  letter-spacing:.01em;
  color:var(--gold-hi);
  text-decoration:none;
  text-shadow:0 2px 0 rgb(0 17 30 / .65), 0 4px 0 rgb(0 17 30 / .35), 0 0 18px rgb(254 212 36 / .35);
  transition:filter .16s ease-out, translate .16s ease-out;
}
.topbanner__pill > u a:hover{filter:brightness(1.12);translate:0 -1px}
.topbanner__pill > u a:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px;border-radius:4px}
@media (max-width:760px){
  .topbanner__pill{padding:.85rem 1.05rem;gap:.26rem}
  .topbanner__pill > span{font-size:1rem}
  .topbanner__pill > b{font-size:.95rem}
  .topbanner__pill > u a{font-size:1.2rem}
}

/* Fourth pass. justify-content:center pooled all the slack top and bottom, so
   the box still measured 69% filled. space-evenly distributes it between the
   three lines instead, and the type goes up again so the ink itself carries
   more of the height. Measured after: fill should clear 90%. */
.topbanner__pill{
  justify-content:space-evenly;
  gap:0;
  padding-block:1.15rem;
}
.topbanner__pill > span{font-size:clamp(1.16rem,2.25vw,1.56rem);line-height:1.18}
.topbanner__pill > b{font-size:clamp(1.08rem,2.1vw,1.44rem)}
.topbanner__pill > u a{font-size:clamp(1.45rem,3vw,2.1rem)}
@media (max-width:760px){
  .topbanner__pill{padding-block:.9rem}
  .topbanner__pill > span{font-size:1.02rem}
  .topbanner__pill > b{font-size:.98rem}
  .topbanner__pill > u a{font-size:1.28rem}
}

/* ------------------------------------------------------------------
   PROMISE KICKER promoted to lead line  (2026-08-20)
   "Residential and commercial commitment" is a better headline than
   "Our promise to you": it is specific and it carries both service
   keywords. So it takes the size, and the H2 steps back a notch so
   the two read as a hierarchy rather than two lines shouting.
   The h2 stays the semantic heading, only its display size changes.
   ------------------------------------------------------------------ */
.promise__kick{
  font-size:clamp(2.9rem,6.4vw,5.4rem);
  line-height:.98;
  letter-spacing:.015em;
  margin-block-end:.35rem;
  text-wrap:balance;
  filter:
    drop-shadow(0 3px 0 #8a4d00)
    drop-shadow(0 6px 0 #633600)
    drop-shadow(0 9px 0 #3d2100)
    drop-shadow(0 16px 22px rgb(0 0 0 / .58));
}
.promise__title{
  font-size:clamp(1.5rem,2.6vw,2.15rem);
  letter-spacing:.03em;
  opacity:.92;
}
@media (max-width:760px){
  .promise__kick{font-size:clamp(1.9rem,8.4vw,3rem);letter-spacing:.005em}
  .promise__title{font-size:clamp(1.15rem,4.4vw,1.5rem)}
}

/* ------------------------------------------------------------------
   FLOATING FOLLOWER, restyled 2026-08-20
   Bigger type so the words fill the face, and the same raised-metal
   treatment the banner button uses: white highlight above each glyph,
   dark relief below, so dark ink on gold reads as embossed rather than
   printed. The guarantee gets the navy seal for consistency with the
   banner, which is also the only way to make it glow on a gold face.
   ------------------------------------------------------------------ */
.qfloat{
  max-inline-size:17.5rem;
  padding:1rem 1.15rem 1.05rem;
  gap:.06rem;
  background:linear-gradient(180deg,#FED424,var(--gold-hi) 28%,var(--gold-deep) 86%,#C86900);
  box-shadow:
    0 6px 0 var(--gold-edge),
    0 8px 3px rgb(200 105 0 / .4),
    0 16px 34px rgb(0 17 30 / .55),
    inset 0 1px 0 rgb(255 255 255 / .42);
}
/* lit top surface, same trick as .btn::after */
.qfloat::before{
  content:"";position:absolute;inset:1px 1px auto;height:44%;
  border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 40% 40%;
  background:linear-gradient(180deg, rgb(255 255 255 / .40), rgb(255 255 255 / 0));
  pointer-events:none;
}
.qfloat > *{position:relative;z-index:1}

.qfloat__top,.qfloat__mid{
  font-size:clamp(1.02rem,1.5vw,1.2rem);
  font-weight:900;
  line-height:1.08;
  letter-spacing:.004em;
  text-wrap:balance;
  text-shadow:
    0  1px 0 rgb(255 255 255 / .75),
    0  2px 0 rgb(255 255 255 / .32),
    0 -1px 0 rgb(0 0 0 / .28),
    0  3px 1px rgb(140 70 0 / .45),
    0  5px 9px rgb(0 0 0 / .30);
}
.qfloat__mid{font-size:clamp(1.14rem,1.7vw,1.34rem)}

.qfloat__tag{
  display:block;
  inline-size:fit-content;
  margin:.5rem auto 0;
  padding:.34rem .8rem .36rem;
  border-radius:999px;
  background:linear-gradient(180deg, rgb(0 17 30 / .95), rgb(0 33 55 / .95));
  border:1px solid rgb(254 212 36 / .45);
  color:var(--gold-hi);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.1em;
  line-height:1.1;
  opacity:1;
  text-shadow:0 0 10px rgb(254 212 36 / .8), 0 0 20px rgb(242 170 16 / .5);
  box-shadow:0 0 14px rgb(254 212 36 / .3), inset 0 1px 0 rgb(255 255 255 / .12);
  animation:sealGlow 2.8s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .qfloat__tag{animation:none} }
@media (max-width:560px){
  .qfloat{max-inline-size:13rem;padding:.8rem .85rem}
  .qfloat__top,.qfloat__mid{font-size:.94rem}
  .qfloat__tag{font-size:.64rem;letter-spacing:.07em}
}

/* Follower scaled back ~50% at Tim's request, with a gold halo on the gradient
   so it still catches the eye at the smaller size. The glow sits outside the
   box rather than on the text, because the face is bright and light needs a
   dark ground to spill onto. */
.qfloat{
  max-inline-size:9.4rem;
  padding:.55rem .6rem .6rem;
  border-radius:var(--r-sm);
  box-shadow:
    0 3px 0 var(--gold-edge),
    0 4px 2px rgb(200 105 0 / .38),
    0 8px 18px rgb(0 17 30 / .5),
    0 0 18px rgb(254 212 36 / .38),
    0 0 38px rgb(242 170 16 / .22),
    inset 0 1px 0 rgb(255 255 255 / .45);
  animation:floatHalo 3.2s ease-in-out infinite;
}
.qfloat::before{height:46%;border-radius:calc(var(--r-sm) - 1px) calc(var(--r-sm) - 1px) 40% 40%}
.qfloat__top,.qfloat__mid{
  font-size:.72rem;line-height:1.12;
  text-shadow:
    0  1px 0 rgb(255 255 255 / .72),
    0 -1px 0 rgb(0 0 0 / .26),
    0  2px 1px rgb(140 70 0 / .42);
}
.qfloat__mid{font-size:.78rem}
.qfloat__tag{
  margin-block-start:.3rem;
  padding:.2rem .45rem .22rem;
  font-size:.54rem;
  letter-spacing:.06em;
}
@keyframes floatHalo{
  0%,100%{box-shadow:0 3px 0 var(--gold-edge),0 4px 2px rgb(200 105 0 / .38),0 8px 18px rgb(0 17 30 / .5),0 0 16px rgb(254 212 36 / .32),0 0 32px rgb(242 170 16 / .18),inset 0 1px 0 rgb(255 255 255 / .45)}
  50%    {box-shadow:0 3px 0 var(--gold-edge),0 4px 2px rgb(200 105 0 / .38),0 8px 18px rgb(0 17 30 / .5),0 0 26px rgb(254 212 36 / .60),0 0 54px rgb(242 170 16 / .38),inset 0 1px 0 rgb(255 255 255 / .45)}
}
@media (prefers-reduced-motion:reduce){ .qfloat{animation:none} }
@media (max-width:560px){
  .qfloat{max-inline-size:8.4rem;padding:.5rem .5rem .55rem}
  .qfloat__top,.qfloat__mid{font-size:.66rem}
  .qfloat__mid{font-size:.72rem}
  .qfloat__tag{font-size:.5rem}
}

/* ============================================================
   EMERGENCY CARD PHOTO BACKGROUND + KEN BURNS  (2026-08-20)
   The van-in-the-rain shot behind the 24/7 card. Slow drift and
   scale so it feels alive without pulling attention off the copy.
   Two guards matter here:
     1. a dark scrim, because white text over a photo with bright
        streetlight reflections is unreadable without one
     2. prefers-reduced-motion kills the movement entirely
   ============================================================ */
.card--photo{position:relative;overflow:hidden;isolation:isolate}
.card--photo > *:not(.card__bg){position:relative;z-index:2}

.card__bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  border-radius:inherit;pointer-events:none;
}
.card__bg img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:60% 55%;
  animation:kenBurns 26s ease-in-out infinite alternate;
  will-change:transform;
}
/* scrim: navy wash plus a stronger gradient on the left where the copy sits */
.card__bg::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, rgb(0 17 30 / .93) 0%, rgb(0 33 55 / .82) 42%, rgb(0 33 55 / .55) 72%, rgb(0 17 30 / .68) 100%),
    linear-gradient(180deg, rgb(0 17 30 / .35), rgb(0 17 30 / .55));
}
@keyframes kenBurns{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to  {transform:scale(1.19) translate3d(-2.2%,-1.6%,0)}
}
@media (prefers-reduced-motion:reduce){
  .card__bg img{animation:none;transform:scale(1.04)}
}
/* the emergency list reads better slightly brighter over photo */
.card--photo li{color:#fff}
.card--photo .card__num{color:var(--gold-hi)}

/* ------------------------------------------------------------------
   EMERGENCY LABEL  (2026-08-20)
   Dropped the "03 /" prefix: this is not the third item in a list,
   it is an alert, and it should read like one. Big, warm red, glowing.
   The glow works here where it did not on the gold buttons, because
   this sits over a dark photo scrim, so light has somewhere to spill.
   ------------------------------------------------------------------ */
.card__num--alert{
  display:block;
  font-family:var(--display-xl);
  font-weight:400;
  font-size:clamp(2.6rem,5.6vw,4.4rem);
  line-height:.94;
  letter-spacing:.012em;
  text-transform:uppercase;
  margin-block-end:.1rem;
  background:linear-gradient(180deg,#FF6A3D 0%,#F0330F 42%,#C21005 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:
    drop-shadow(0 2px 0 #6e0a02)
    drop-shadow(0 4px 0 #4a0602)
    drop-shadow(0 0 16px rgb(240 51 15 / .72))
    drop-shadow(0 0 34px rgb(224 48 15 / .48))
    drop-shadow(0 10px 20px rgb(0 0 0 / .6));
  animation:alertPulse 2.4s ease-in-out infinite;
}
@keyframes alertPulse{
  0%,100%{filter:
    drop-shadow(0 2px 0 #6e0a02) drop-shadow(0 4px 0 #4a0602)
    drop-shadow(0 0 14px rgb(240 51 15 / .62)) drop-shadow(0 0 30px rgb(224 48 15 / .38))
    drop-shadow(0 10px 20px rgb(0 0 0 / .6))}
  50%{filter:
    drop-shadow(0 2px 0 #6e0a02) drop-shadow(0 4px 0 #4a0602)
    drop-shadow(0 0 22px rgb(255 106 61 / .95)) drop-shadow(0 0 48px rgb(240 51 15 / .68))
    drop-shadow(0 10px 20px rgb(0 0 0 / .6))}
}
@media (prefers-reduced-motion:reduce){ .card__num--alert{animation:none} }
@media (max-width:560px){ .card__num--alert{font-size:clamp(2rem,10vw,2.9rem)} }

/* ------------------------------------------------------------------
   QUOTE FORM, tightened ~50%  (2026-08-20)
   It was dominating the section. Padding, field spacing and type all
   come down. One guard: inputs stay at a 44px touch target on phones
   even though desktop goes tighter, because a cramped field on a
   phone is how you lose the lead you just worked to get.
   ------------------------------------------------------------------ */
.qform{padding:clamp(.85rem,1.6vw,1.15rem)}
.qform__lead{margin:0 0 .7rem;font-size:.86rem;line-height:1.35}

.qform__row{gap:.5rem}
.qform__f{margin-block-end:.5rem}
.qform__f > span{margin-block-end:.2rem;font-size:.76rem}
.qform__f > span em{font-size:.7rem;margin-block-start:.02rem}

.qform input[type=text],.qform input[type=tel],.qform textarea,.qform select{
  padding:.44rem .6rem;
  font-size:.92rem;
  border-radius:var(--r-sm);
}
.qform textarea{min-height:64px;rows:3}
.qform__f--file input[type=file]{padding:.38rem;font-size:.82rem}
.qform__f--file small{margin-block-start:.24rem;font-size:.72rem;line-height:1.35}

.qform__submit{margin-block-start:.3rem;padding-block:.72rem;font-size:clamp(1rem,1.9vw,1.25rem)}
.qform__note{margin-block-start:.5rem;font-size:.84rem}
.qform__fine{
  margin:1rem auto .3rem;
  font-size:clamp(.76rem,1.5vw,.9rem);
  padding:.34rem .8rem;
}
.qform__fine::before{border-width:2px;inset:-.18em -.34em}

/* phones: keep fields at a usable touch size regardless of the desktop trim */
@media (max-width:760px){
  .qform input[type=text],.qform input[type=tel],.qform select{padding:.62rem .7rem;font-size:1rem}
  .qform textarea{min-height:86px;font-size:1rem;padding:.62rem .7rem}
}

/* ------------------------------------------------------------------
   TOP 10 SEARCHES TABLE  (2026-08-20)
   Replaces services-collage.jpg. That image held ~200 words of real,
   locally specific content, including cost ranges, entirely inside
   pixels where Google cannot index a word of it. It also shipped with
   "Airhhb" and "bathroems". As HTML it is crawlable, correct, and
   readable on a phone, which a 1536x1024 chart never was.
   Cards on mobile, table on desktop.
   ------------------------------------------------------------------ */
.t10{margin-block:1.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.t10__table{
  inline-size:100%;border-collapse:collapse;
  font-size:clamp(.84rem,1.5vw,.96rem);
  color:var(--text);
  background:linear-gradient(180deg, rgb(0 33 55 / .78), rgb(0 17 30 / .84));
  border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 5px 0 var(--gold-deep), 0 10px 26px rgb(0 17 30 / .45);
}
.t10__table caption{
  caption-side:top;text-align:left;padding:.85rem 1rem .7rem;
  font-family:var(--display);font-weight:900;
  font-size:clamp(1rem,2vw,1.24rem);color:var(--gold-hi);
  text-wrap:balance;
}
.t10__table thead th{
  background:rgb(0 71 112 / .85);
  font-family:var(--display);font-weight:900;
  font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;text-align:left;padding:.6rem .8rem;
  border-block-end:2px solid var(--gold-deep);
}
.t10__table td,.t10__table th[scope=row]{
  padding:.62rem .8rem;vertical-align:top;text-align:left;
  border-block-start:1px solid rgb(10 74 115 / .55);
  font-weight:500;line-height:1.4;
}
.t10__table th[scope=row]{font-weight:800;color:#fff}
.t10__table tbody tr:nth-child(odd){background:rgb(255 255 255 / .035)}
.t10__rank{
  font-family:var(--display-xl);font-size:1.3rem;color:var(--gold-hi);
  width:3ch;text-align:center;line-height:1.1;
}
.t10__table strong{color:var(--gold-hi);font-weight:800}
.t10__note{margin:.7rem 0 0;color:var(--text-dim);font-size:.84rem;line-height:1.45}

/* phones: the 4-column table becomes stacked cards rather than a squeeze */
@media (max-width:720px){
  .t10__table thead{position:absolute;left:-9999px}
  .t10__table,.t10__table tbody,.t10__table tr,.t10__table td,.t10__table th{display:block;width:100%}
  .t10__table tr{
    border:1px solid var(--navy-line);border-radius:var(--r-sm);
    margin-block-end:.7rem;padding:.6rem .7rem;background:rgb(0 33 55 / .6);
    position:relative;padding-inline-start:3.1rem;
  }
  .t10__table td,.t10__table th[scope=row]{border:0;padding:.16rem 0}
  .t10__rank{
    position:absolute;inset-inline-start:.7rem;inset-block-start:.6rem;
    width:auto;font-size:1.6rem;
  }
  .t10__table td:nth-of-type(2)::before{content:"Why: ";color:var(--text-dim);font-weight:700}
  .t10__table td:nth-of-type(3)::before{content:"Local: ";color:var(--text-dim);font-weight:700}
}

/* ------------------------------------------------------------------
   TOWN CHIPS, halved and made translucent  (2026-08-20)
   Solid gold at 1.5rem, they tiled over the coverage map and hid it.
   Now roughly half the size and glazed like the quote panels, so the
   map reads through. Backdrop blur keeps the town names legible over
   a busy satellite image, which plain transparency would not.
   ------------------------------------------------------------------ */
.chip{
  padding:.4rem .82rem;
  font-size:clamp(.82rem,1.55vw,1rem);
  letter-spacing:.005em;
  border-radius:100px;
  background:linear-gradient(180deg, rgb(0 33 55 / .62), rgb(0 17 30 / .70));
  backdrop-filter:blur(7px) saturate(1.1);
  -webkit-backdrop-filter:blur(7px) saturate(1.1);
  color:var(--gold-hi);
  border:1px solid rgb(254 212 36 / .5);
  box-shadow:
    0 3px 0 rgb(200 105 0 / .55),
    0 4px 10px rgb(0 17 30 / .45),
    inset 0 1px 0 rgb(255 255 255 / .14);
  text-shadow:0 1px 2px rgb(0 17 30 / .8);
}
.chip:hover,.chip:focus,.chip:focus-visible{
  background:linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  color:var(--gold-ink);
  border-color:transparent;
  text-shadow:none;
}
/* No backdrop-filter support: fall back to a solid enough panel that the
   town names never sit unreadable on top of the map. */
@supports not (backdrop-filter:blur(1px)){
  .chip{background:linear-gradient(180deg, rgb(0 33 55 / .9), rgb(0 17 30 / .94))}
}
.areas__list{gap:.5rem}
@media (max-width:560px){
  .chip{padding:.34rem .68rem;font-size:.8rem}
}

/* ------------------------------------------------------------------
   SECTION RHYTHM  (2026-08-20)
   Measured 193px of dead space between the services cards and "What we
   do". Cause was systemic, not local: almost every section carries
   96px top AND bottom, so each junction stacks two of them.
   Collapsing the top padding on any section that follows another
   halves the junction while leaving the first section's breathing room
   and each section's own bottom padding intact. Sections with their
   own background keep more, because there the padding is doing visual
   work rather than just spacing.
   ------------------------------------------------------------------ */
main > section + section.pad-xl{ padding-block-start:clamp(2.1rem,4vw,3.2rem) }
main > section + section.pad-lg{ padding-block-start:clamp(1.7rem,3.2vw,2.6rem) }

/* Sections with their own photo or tinted background need the padding,
   otherwise the content crowds the edge of the panel. */
main > section + section.ideas,
main > section + section.areas,
main > section + section.promise,
main > section + section.emergency,
main > section + section.coverage,
main > section + section.rentals,
main > section + section.seniors{ padding-block-start:clamp(2.6rem,4.6vw,3.9rem) }
.svclist{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem}
@media(min-width:820px){.svclist{grid-template-columns:1fr 1fr;gap:.55rem 1.6rem}}
.svclist li{padding:.6rem .8rem;border-radius:var(--r-sm);background:rgb(0 33 55 / .55);
  border-inline-start:3px solid var(--gold-deep)}
.svclist b{display:block;font-family:var(--display);font-weight:900;color:var(--gold-hi);font-size:1rem;line-height:1.2}
.svclist span{display:block;margin-block-start:.15rem;color:var(--text-dim);font-size:.88rem;line-height:1.4}
/* stripped back: service names only. Prices removed, they scared people off
   before Tim could quote. Commentary removed, it read as internal research. */
.svclist li{padding:.5rem .8rem;font-family:var(--display);font-weight:800;
  color:#fff;font-size:.98rem;line-height:1.25}
.svclist b,.svclist span{all:unset}
/* Footer column labels were h4 directly under h2, skipping a level, which
   breaks the document outline for screen readers and Google alike. Promoted to
   h3 and re-styled to look exactly as they did. */
.foot__h{font-family:var(--display);font-weight:900;font-size:1.05rem;
  color:var(--gold-hi);margin:0 0 .5rem;letter-spacing:.01em}
/* Region title lifted out of .region__head (which overlays the map) and placed
   above it in the blue, where it reads without competing with the imagery. */
.region__title{margin-block:1.4rem .9rem;text-wrap:balance}
.region__title h3{
  font-family:var(--display-xl);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.5rem,3.2vw,2.35rem);line-height:1.04;letter-spacing:.02em;margin:0;
  background:linear-gradient(180deg,var(--gold-hi) 10%,var(--gold-deep) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #8a4d00) drop-shadow(0 4px 0 #3d2100) drop-shadow(0 8px 14px rgb(0 0 0 / .5));
}
.region__title p{margin:.3rem 0 0;color:var(--text-dim);font-size:.95rem;line-height:1.4}
/* the phone button is now alone in the head, so let it sit right */
.region__head{justify-content:flex-start}

/* ------------------------------------------------------------------
   BANNER CTA IN RED  (2026-08-20)
   Everything else on this page is gold, so the primary call button was
   camouflaged in its own brand palette. Red separates it and carries the
   urgency the copy is already claiming with "right now".
   The text flips to white here: dark navy ink was tuned for a bright gold
   face and would fail contrast on red.
   ------------------------------------------------------------------ */
.topbanner__quote.btn--red{
  background:linear-gradient(180deg,#FF5A2C 0%,var(--red-hi) 38%,var(--red) 88%,#8E0B03 100%);
  color:#fff;
  box-shadow:
    0 6px 0 #7A0A03,
    0 7px 2px rgb(122 10 3 / .45),
    0 14px 32px rgb(194 16 5 / .48),
    0 0 26px rgb(224 48 15 / .30),
    inset 0 1px 0 rgb(255 255 255 / .32);
}
.topbanner__quote.btn--red:hover{
  transform:translateY(-3px);filter:brightness(1.07);
  box-shadow:0 9px 0 #7A0A03,0 11px 3px rgb(122 10 3 / .5),0 22px 48px rgb(194 16 5 / .62),0 0 38px rgb(224 48 15 / .45),inset 0 1px 0 rgb(255 255 255 / .32);
}
.topbanner__quote.btn--red b{
  color:#fff;
  text-shadow:
    0 -1px 0 rgb(0 0 0 / .34),
    0  2px 0 rgb(110 10 2 / .85),
    0  3px 1px rgb(80 6 1 / .7),
    0  5px 10px rgb(0 0 0 / .42);
}
/* the guarantee seal keeps its navy plate and gold glow: it reads as a stamp
   on the red just as well, and it stays consistent with the rest of the brand */
.topbanner__quote.btn--red em{
  border-color:rgb(254 212 36 / .55);
  background:linear-gradient(180deg, rgb(0 17 30 / .96), rgb(0 33 55 / .96));
}

/* ------------------------------------------------------------------
   "NOT AN AI BOT!"  (2026-08-20)
   Tim's line, and it is the sharpest differentiator on the page.
   Every competitor is adding chatbots; saying a human answers is
   now a genuine claim rather than a given.
   ------------------------------------------------------------------ */
.topbanner__quote b i{
  display:block;
  font-style:normal;
  margin-block-start:.18rem;
  font-size:clamp(.82rem,1.55vw,1.06rem);
  letter-spacing:.06em;
  color:#FFE9A8;
  text-shadow:
    0 -1px 0 rgb(0 0 0 / .3),
    0  2px 0 rgb(110 10 2 / .8),
    0  0 12px rgb(255 233 168 / .5);
}
.qfloat__bot{
  display:block;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.05em;
  line-height:1.15;
  margin-block-start:.12rem;
  color:var(--gold-ink);
  opacity:.9;
}

/* --- "Our promise to you": nudged down and up-sized so it does not crowd
       the commercial card above it --- */
.promise{margin-block-start:1.1rem}
.promise__title{
  font-size:clamp(2.15rem,4.6vw,3.5rem);
  line-height:1.02;
  margin-block:.35rem .9rem;
}
.promise__kick{margin-block-end:.15rem}

/* --- town picker: the fallback when IP geolocation cannot place someone --- */
.townpick{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-block-start:.5rem;padding:.34rem .8rem;
  background:rgb(255 255 255 / .08);
  border:1px solid rgb(254 212 36 / .35);border-radius:999px;
  font-family:var(--display);font-weight:800;font-size:.8rem;
  color:var(--text-dim);cursor:pointer;
  transition:background .15s,border-color .15s;
}
.townpick:hover{background:rgb(255 255 255 / .14);border-color:var(--gold)}
.townpick span{color:var(--gold-hi);text-decoration:underline}
.townpick__list{
  display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;
  max-width:min(42rem,92vw);margin:.5rem auto 0;
  padding:.55rem;border-radius:var(--r-md);
  background:rgb(0 17 30 / .85);border:1px solid var(--navy-line);
  max-height:min(28vh,13rem);overflow-y:auto;
}
.townpick__opt{
  padding:.3rem .66rem;border-radius:999px;
  background:rgb(255 255 255 / .07);border:1px solid rgb(255 255 255 / .12);
  color:#fff;font:800 .8rem var(--display);cursor:pointer;
}
.townpick__opt:hover,.townpick__opt:focus-visible{
  background:var(--gold);color:var(--gold-ink);border-color:var(--gold-deep);outline:none;
}

/* ------------------------------------------------------------------
   SERVICE CARD TIDY-UP  (2026-08-20)
   Two faults Tim spotted:
     1. Rows looked scattered. Items like "Apartment & rental unit
        creation" wrap to two lines, and because the grid sizes rows to
        their tallest cell, every neighbouring column got a gap. Forcing
        equal row heights and aligning items to the top of their row puts
        the bullets back on a consistent rhythm.
     2. The CTA block sat left with the button off to one side. Centred,
        with the copy capped so the lines are even rather than ragged.
   ------------------------------------------------------------------ */
.card--wide ul{
  grid-auto-rows:minmax(1.9rem,auto);
  align-items:start;
  row-gap:.7rem;
}
.card--wide li{
  align-items:start;
  line-height:1.35;
  min-block-size:1.9rem;
}
.card li::before{margin-block-start:.42rem}

/* CTA panel: single centred column instead of image-plus-text side by side */
.card__cta{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  gap:.7rem;
  padding-block:1.35rem;
}
.card__cta > div{
  display:flex;flex-direction:column;align-items:center;
  inline-size:100%;
}
.card__cta h4{margin:0 0 .4rem;text-align:center}
.card__cta p{
  margin:0 auto .95rem;
  max-inline-size:46ch;
  text-align:center;
  text-wrap:balance;
}
.card__cta .callpair{
  display:flex;justify-content:center;inline-size:100%;
}
.card__cta img{margin-inline:auto}
/* service list items that link to a hub still read as list items, not blue links */
.svclist li a{color:inherit;text-decoration:none;display:block}
.svclist li:has(a):hover{border-color:var(--gold);background:rgb(255 255 255 / .1)}
.svclist li a:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

/* Emergency card list: sized up and given weight. These sit over a photo, so
   they need more than the standard card treatment to stay legible, and this is
   the highest-urgency list on the page so it should read that way. */
.card--photo ul{margin-block-start:1.1rem;row-gap:.72rem}
.card--photo li{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.06rem,1.55vw,1.28rem);
  line-height:1.3;
  color:#fff;
  letter-spacing:.004em;
  text-shadow:0 1px 0 rgb(0 0 0 / .5), 0 2px 10px rgb(0 0 0 / .6);
}
.card--photo li::before{
  width:11px;height:12px;margin-block-start:.44rem;
  background:var(--gold-hi);
  filter:drop-shadow(0 0 7px rgb(254 212 36 / .7));
}
.card--photo h3{
  font-size:clamp(1.5rem,2.5vw,2rem);
  margin-block-end:.2rem;
}
/* second pass: the clamp was bottoming out at ~17px, barely above the standard
   card. These need to read as urgent at a glance. */
.card--photo li{font-size:clamp(1.24rem,2.05vw,1.62rem);line-height:1.26}
.card--photo li::before{width:12px;height:13px;margin-block-start:.5rem}
.card--photo ul{row-gap:.85rem}
@media (max-width:560px){ .card--photo li{font-size:1.14rem} }

/* ------------------------------------------------------------------
   RENTAL SECTION CONTRAST  (2026-08-20)
   The background photo is a light beige interior, so white and gold text
   had nothing to sit against and washed out. The existing scrim only ran
   to .72 alpha through the middle band, which is exactly where the
   headings sit. Deepened, plus a focused pool of darkness behind the
   heading block so the type has its own ground.
   The fix is the background, not the text colour: lightening the type
   further would have made it worse, and darkening it would break the brand.
   ------------------------------------------------------------------ */
.rental::before{
  background:
    radial-gradient(120% 90% at 22% 26%, rgb(0 17 30 / .93) 0%, rgb(0 17 30 / .55) 55%, transparent 78%),
    linear-gradient(170deg, rgb(0 17 30 / .95) 0%, rgb(2 49 84 / .90) 45%, rgb(0 17 30 / .96) 100%);
}
/* headings get their own weight back now there is something behind them */
.rental .sec-head h2{
  text-shadow:0 2px 0 rgb(0 17 30 / .8), 0 4px 18px rgb(0 0 0 / .7);
}
.rental .kicker{
  color:var(--gold-hi);
  text-shadow:0 1px 0 rgb(0 17 30 / .9), 0 0 16px rgb(242 170 16 / .45);
}
.rental .sec-head p{color:#fff;text-shadow:0 1px 8px rgb(0 0 0 / .65)}

/* the three cards were transparent over a light photo: give them a real panel */
.rental__item{
  background:linear-gradient(180deg, rgb(0 33 55 / .82), rgb(0 17 30 / .88));
  border:1px solid var(--navy-line);
  border-block-end:3px solid var(--gold-deep);
  border-radius:var(--r-md);
  padding:1.05rem 1.15rem 1.2rem;
  box-shadow:0 8px 22px rgb(0 17 30 / .5);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.rental__item h3{color:var(--gold-hi);margin-block-start:0}
.rental__item p{color:#fff}
@supports not (backdrop-filter:blur(1px)){
  .rental__item{background:linear-gradient(180deg, rgb(0 33 55 / .94), rgb(0 17 30 / .96))}
}

/* ------------------------------------------------------------------
   RENTAL SECTION, REAL FIX  (2026-08-20)
   Two actual causes, found after two failed attempts at treating symptoms:

   1. The scrim was never visible. .rental::before and .rental__bgwrap were
      BOTH z-index:0. On a tie, DOM order wins, and bgwrap is a child, so
      the photo painted over every darkening layer added to ::before.
      Lifting the scrim to z-index:1 and the wrap to 0 makes it actually apply.

   2. The h2 carries a shimmer gradient that begins TRANSPARENT for its
      first 30%, clipped to the text with color:transparent. Those letters
      had no fill whatsoever. Invisible on a light photo. The sheen is kept
      but rebuilt so it only ever lightens, never erases.
   ------------------------------------------------------------------ */
.rental__bgwrap{z-index:0}
.rental::before{z-index:1}
.rental .wrap{position:relative;z-index:2}

.rental .sec-head h2{
  background-image:
    linear-gradient(115deg, rgb(255 255 255 / 0) 26%, rgb(255 255 255 / .55) 45%, rgb(255 255 255 / 0) 62%),
    linear-gradient(180deg, #FFF7DA 0%, #FFD64A 44%, #F5A81A 100%);
  background-blend-mode:screen, normal;
}

/* Third and final pass. Two more self-inflicted faults:
   1. background-blend-mode:screen (mine, added above) broke the clipped text
      fill. The headings that render correctly elsewhere use normal,normal.
   2. .kicker sets -webkit-text-fill-color:transparent, which overrides its
      gold `color`. Over a dark section its gradient shows; here it needed
      an explicit fill. Solid colour beats a clever gradient that can vanish. */
.rental .sec-head h2{
  background-image:
    linear-gradient(115deg, rgb(255 255 255 / 0) 26%, rgb(255 255 255 / .5) 45%, rgb(255 255 255 / 0) 62%),
    linear-gradient(180deg, #FFF7DA 0%, #FFD64A 44%, #F5A81A 100%);
  background-blend-mode:normal, normal;
}
.rental .kicker{
  background:none;
  -webkit-text-fill-color:var(--gold-hi);
  color:var(--gold-hi);
}

/* Fourth pass, and the real one. I added a text-shadow to this h2 to "improve
   contrast". On text with background-clip:text and a transparent fill, the
   shadow paints THROUGH the glyphs and covers the gold. This is the exact fault
   already recorded in the punch list for the hero H1: use a drop-shadow FILTER,
   which respects alpha, never text-shadow. */
.rental .sec-head h2{
  text-shadow:none;
  filter:
    drop-shadow(0 2px 0 #8a4d00)
    drop-shadow(0 4px 0 #3d2100)
    drop-shadow(0 8px 16px rgb(0 0 0 / .6));
}
/* New rental background is portrait (1200x1800) where the old one was landscape.
   object-fit:cover crops it to a band, so position it on the key handoff and the
   faces rather than defaulting to centre, which would have cut both off. */
.rental__bgimg{object-position:52% 30%}
@media (max-width:760px){ .rental__bgimg{object-position:44% 26%} }

/* ------------------------------------------------------------------
   SENIORS SECTION, rebuilt from a poster image  (2026-08-20)
   Was a single 1264px JPG with every word baked into pixels: the service
   name, three benefits, the discount offer and the phone number. Google
   read none of it, it was unreadable on a phone, the title was clipped
   mid-word, and the badge had an AI spelling artifact ("Wind6or").
   Photo kept, all copy now real HTML. Same look, indexable, and editable
   in a second when the coverage area changes.
   ------------------------------------------------------------------ */
.seniors{
  background:linear-gradient(170deg, rgb(0 17 30) 0%, rgb(2 49 84) 52%, rgb(0 17 30) 100%);
  border-block:1px solid var(--navy-line);
}
.seniors__grid{
  display:grid;gap:clamp(1.2rem,3vw,2.6rem);align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){ .seniors__grid{grid-template-columns:.82fr 1.18fr} }

.seniors__figure{margin:0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-2), 0 0 0 1px var(--navy-line);
  border-block-end:4px solid var(--gold-deep)}
.seniors__img{display:block;width:100%;height:auto}

.seniors__body .kicker{color:var(--gold-hi);-webkit-text-fill-color:var(--gold-hi);background:none}
.seniors__body h2{
  font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.02;margin:.3rem 0 .6rem;
}
.seniors__lead{font-size:clamp(1rem,1.9vw,1.16rem);color:var(--text);margin:0 0 1rem;max-width:52ch}

.seniors__list{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.55rem}
.seniors__list li{
  position:relative;padding-inline-start:2rem;
  font-family:var(--display);font-weight:800;
  font-size:clamp(1rem,1.7vw,1.14rem);color:#fff;line-height:1.32;
}
.seniors__list li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.28em;
  width:1.15rem;height:.62rem;border-inline-start:3px solid var(--gold-hi);
  border-block-end:3px solid var(--gold-hi);transform:rotate(-45deg);
  filter:drop-shadow(0 0 6px rgb(254 212 36 / .6));
}
.seniors__badge{
  margin:0 0 1.1rem;padding:.7rem .95rem;border-radius:var(--r-sm);
  background:linear-gradient(180deg, rgb(254 212 36 / .16), rgb(242 170 16 / .1));
  border:1px solid rgb(254 212 36 / .45);
  color:#fff;font-size:.98rem;line-height:1.45;
}
.seniors__badge strong{color:var(--gold-hi)}
.seniors__note{margin:.85rem 0 0;color:var(--text-dim);font-size:.9rem;line-height:1.5;max-width:56ch}
.seniors__note a{color:var(--gold-hi)}
/* Two faults in the seniors rebuild:
   1. the .82fr image column collapsed to 0px, because a fr track will shrink
      below its content unless given a minimum. minmax() holds it open.
   2. the site .kicker is 46px with white-space:nowrap, built for two or three
      words. A nine-word line ran 399px off-screen. This one wraps and sits at
      a sensible size for a sentence. */
@media (min-width:900px){
  .seniors__grid{grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr)}
}
.seniors__body .kicker{
  white-space:normal;
  font-size:clamp(.86rem,1.5vw,1.02rem);
  letter-spacing:.09em;
  line-height:1.3;
  display:block;
  max-width:34ch;
}
.seniors__figure{min-width:0}

/* ------------------------------------------------------------------
   LIGHTHOUSE SEO: tap targets and legible font sizes  (2026-08-20)
   Google audits both. Two real failures found:
     - header call button 219x35, service list links 393x20. Minimum is
       44px of height for a touch target, and the header phone button is
       one of the most-tapped elements on the whole site.
     - coverage map city labels rendered at 10.57px against a 12px floor.
   ------------------------------------------------------------------ */
.topbar .callbtn{min-block-size:46px}
.callpair--sm .callbtn{padding-block:.55rem}

.svclist li{min-block-size:44px;display:flex;align-items:center}
.svclist li a{
  display:flex;align-items:center;
  min-block-size:44px;inline-size:100%;
}

/* map labels: 10.57px -> 12px floor. clamp still scales them up on wide
   screens, it just can no longer go below what Google considers legible. */
.cvcity__label,.covmap__labels span,.zcity__label{
  font-size:max(16px, .74rem);
}

/* any remaining small chips get a real touch height on phones */
@media (max-width:900px){
  .chip{min-block-size:44px;display:inline-flex;align-items:center}
}
/* Second pass. Three things the first attempt missed:
   - .chip min-height was scoped to max-width:900px, but Lighthouse audits tap
     targets in MOBILE emulation and the rule needs to hold everywhere anyway
   - the <em> sub-label inside call buttons renders at 9.61px, under the 12px floor
   - .topbar .callbtn ignored min-block-size, so set the height on the anchor
     itself rather than relying on the flex parent */
.chip{min-block-size:44px;display:inline-flex;align-items:center}
.btn.callbtn em,.callbtn em{font-size:max(16px,.72rem);line-height:1.15}
.qfloat__tag,.topbanner__quote em{font-size:max(16px,.7rem)}
.topbar .callpair--sm .btn.callbtn{min-height:46px;padding-block:.5rem}
.areas__list .chip,.chips .chip{min-block-size:44px}
/* Third pass, targeting the exact elements rather than guessing selectors.
   Under the 12px legibility floor: */
.covmap__area{font-size:max(16px,.62rem);line-height:1.2}
.qform__f--file span em{font-size:max(16px,.7rem)}
.qform__f--file small{font-size:max(16px,.72rem)}

/* Under the 44px tap-target floor. All four are real links people press: */
.topbanner__pill u a{display:inline-flex;align-items:center;min-block-size:44px;padding-inline:.15rem}
.foot__phone{display:inline-flex;align-items:center;min-block-size:44px}
.seniors__note a{display:inline;padding-block:.35rem}   /* inline in a sentence, keep flow */
.foot ul li a,.arealinks li a{display:inline-flex;align-items:center;min-block-size:44px}
/* The footer service links live in footer > .wrap > .foot__grid > div > ul > li > a.
   My earlier rule targeted `.foot ul li a` but the footer element carries
   class "pad-lg", not "foot", so it never matched. Targeting the real chain. */
.foot__grid ul li a{
  display:inline-flex;align-items:center;
  min-block-size:44px;
}
.foot__grid ul li{display:block}

/* ------------------------------------------------------------------
   KICKER OVERFLOW ON REAL PHONES  (2026-08-20, final audit)
   .kicker is clamp(2.2rem,4.8vw,6.2rem) with white-space:nowrap. At 390px
   (iPhone) the clamp floors at 35px and a long kicker renders 616px wide,
   forcing the whole page to 634px and scrolling sideways. 12 of 16 pages
   were affected. Found only by testing at TRUE phone width; a 634px
   viewport hides it completely.
   Fixed globally for all 61 kickers, not per-section. The seniors kicker
   was patched locally earlier, which fixed one and left sixty.
   ------------------------------------------------------------------ */
.kicker{
  white-space:normal;
  flex-wrap:wrap;
  max-inline-size:100%;
  overflow-wrap:break-word;
}
@media (max-width:620px){
  .kicker{
    font-size:clamp(1.25rem, 5.6vw, 2.2rem);
    gap:.55rem;
    letter-spacing:.04em;
    line-height:1.16;
  }
  .kicker::before{width:26px;height:4px}
}
@media (max-width:400px){
  .kicker{font-size:clamp(1.1rem, 5.2vw, 1.8rem)}
  .kicker::before{width:20px;height:3px}
}

/* ------------------------------------------------------------------
   FLOATING CALL BADGE, legibility  (2026-08-20, final audit)
   Measured on a 390px iPhone the three lines rendered at 10.56px, 11.52px
   and 9.92px, all under Google's 12px floor and all genuinely hard to read.
   This badge follows the visitor down the whole page and asks for the call,
   so it is the last element that should be squinting-small.
   ------------------------------------------------------------------ */
.qfloat__top{font-size:max(16px, .92rem)}
.qfloat__mid{font-size:max(16px, clamp(1.14rem,1.7vw,1.34rem))}
.qfloat__bot{font-size:max(16px, .72rem);opacity:.95}
@media (max-width:620px){
  .qfloat__top{font-size:max(16px, .86rem)}
  .qfloat__mid{font-size:max(16px, .96rem)}
  .qfloat__bot{font-size:max(16px, .74rem)}
  .qfloat{padding:.6rem .7rem}
}
/* The floating badge is fixed at 150x130 in the bottom-right corner. Give the
   dense service list room underneath so its last row is not sitting in that
   corner when the badge is showing. Cheaper and more reliable than trying to
   make a fixed element dodge flowing content. */
.t10{padding-block-end:clamp(3.5rem,7vw,6rem)}
@media (max-width:620px){ .t10{padding-block-end:2.5rem} }
/* Trim the floating badge's footprint. At 150x130 it was large enough to sit
   across three service-list rows at once. A floating CTA only has to be
   readable and tappable, not big. Narrower means it overlaps far less of the
   page while keeping a 44px+ tap target and 12px+ text. */
.qfloat{
  max-inline-size:132px;
  padding:.5rem .55rem;
  gap:.25rem;
}
.qfloat__top{font-size:max(16px,.78rem);line-height:1.14}
.qfloat__mid{font-size:max(16px,.88rem);line-height:1.12}
.qfloat__bot{font-size:max(16px,.68rem)}
.qfloat .btn,.qfloat__cta{min-block-size:44px;font-size:max(16px,.66rem);padding:.3rem .45rem}
@media (max-width:620px){
  .qfloat{max-inline-size:118px;padding:.45rem .5rem}
}

/* ------------------------------------------------------------------
   COMMUNITY SECTION  (2026-08-20)
   Local sponsorship, the honest version of the "local testimonial" idea.
   No invented endorsements, no real business named without permission.
   Uses the same display face, gold-on-navy palette and card treatment as
   the seniors and rental sections so it reads as part of the same system.
   ------------------------------------------------------------------ */
.community{
  background:
    radial-gradient(120% 90% at 78% 20%, rgb(2 49 84 / .55) 0%, transparent 62%),
    linear-gradient(170deg, rgb(0 17 30) 0%, rgb(2 49 84) 52%, rgb(0 17 30) 100%);
  border-block:1px solid var(--navy-line);
}
.community__grid{
  display:grid;gap:clamp(1.3rem,3vw,2.8rem);align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:940px){
  .community__grid{grid-template-columns:minmax(0,1.05fr) minmax(300px,1fr)}
}

.community__body .kicker{
  white-space:normal;font-size:clamp(.86rem,1.5vw,1.02rem);
  letter-spacing:.09em;line-height:1.3;display:block;max-width:34ch;
  background:none;-webkit-text-fill-color:var(--gold-hi);color:var(--gold-hi);
}
.community__body h2{
  font-size:clamp(1.9rem,4.2vw,3.05rem);line-height:1.04;margin:.3rem 0 .7rem;
  text-shadow:none;
  filter:drop-shadow(0 2px 0 #8a4d00) drop-shadow(0 4px 0 #3d2100)
         drop-shadow(0 8px 16px rgb(0 0 0 / .55));
}
.community__lead{
  font-size:clamp(1rem,1.9vw,1.14rem);color:#fff;margin:0 0 1.1rem;
  max-width:56ch;line-height:1.55;
}

.community__list{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.7rem}
.community__list li{
  position:relative;padding:.62rem .9rem .62rem 2.5rem;
  border-radius:var(--r-sm);
  background:linear-gradient(180deg, rgb(0 33 55 / .72), rgb(0 17 30 / .8));
  border:1px solid var(--navy-line);
  border-inline-start:3px solid var(--gold-deep);
  color:var(--text);font-size:.98rem;line-height:1.45;
}
.community__list li strong{
  color:var(--gold-hi);font-family:var(--display);font-weight:800;
  letter-spacing:.01em;
}
.community__list li::before{
  content:"";position:absolute;inset-inline-start:.95rem;inset-block-start:1.05em;
  width:9px;height:10px;background:var(--gold-hi);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  filter:drop-shadow(0 0 6px rgb(254 212 36 / .6));
}
.community__note{
  margin:0 0 1.1rem;color:var(--text-dim);font-size:.94rem;
  line-height:1.5;max-width:52ch;
}

.community__figure{
  margin:0;min-width:0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-2), 0 0 0 1px var(--navy-line);
  border-block-end:4px solid var(--gold-deep);
}
.community__img{display:block;width:100%;height:auto}
.community__figure figcaption{
  padding:.6rem .9rem;text-align:center;
  font-family:var(--display);font-weight:800;
  font-size:.9rem;letter-spacing:.03em;text-transform:uppercase;
  color:var(--gold-hi);
  background:linear-gradient(180deg, rgb(0 33 55 / .9), rgb(0 17 30 / .95));
}

/* ===================================================================
   TYPE SCALE NORMALISATION 2026-08-22
   A computed-style audit of the rendered page found 14 distinct font
   sizes below 16px across 26 selectors: 12, 12.16, 12.48, 13.23,
   13.44, 13.6, 13.67, 13.76, 14.4, 14.72, 15.04, 15.2, 15.36, 15.68.
   That is drift, not a scale. Collapsed to four tiers with 16px as the
   body floor, below which iOS zooms the page on input focus and older
   readers struggle. Appended last so it wins on cascade order without
   needing !important.
   =================================================================== */
:root{
  --fs-label:.875rem;   /* 14px, UPPERCASE bold micro labels only */
  --fs-sm:1rem;         /* 16px, smallest permitted sentence text */
  --fs-body:1.125rem;   /* 17px, default reading size             */
  --fs-lead:1.5rem;     /* 19px, intro and emphasis paragraphs    */
}

/* Reading text. Nothing here drops below 16px. */
p,li,option,strong,
.seniors__note,.community__note,.seniors__badge,.h1__seo{
  font-size:var(--fs-body);
  line-height:1.6;
}

/* Topbanner display text: these are inside @layer components, so the
   unlayered p{font-size} above stomps them. Override here, unlayered. */
.topbanner__word{font-size:clamp(3rem,9vw,8rem) !important;line-height:.90 !important}
.topbanner__word2{font-size:clamp(1.5rem,3.8vw,3.2rem) !important;line-height:1.15 !important}
.topbanner__tag{font-size:clamp(1.3rem,3vw,2.4rem) !important;line-height:1.15 !important}
@media(max-width:760px){
  .topbanner__word2{font-size:clamp(1rem,4.6vw,1.75rem) !important;line-height:1.45 !important}
  .topbanner__tag{line-height:1.42 !important}
}

/* Secondary notes. Still at the 16px floor, never below. */
small,figcaption,
.qform__fine,.t10__note,.ideas__note{
  font-size:var(--fs-sm);
  line-height:1.55;
}

/* Lead paragraphs carry the argument, so they are sized like it. */
.qform__lead,.clients__lead{
  font-size:var(--fs-lead);
  font-weight:700;
  line-height:1.45;
  color:var(--text);
  text-align:center;
  text-wrap:balance;
  max-width:40ch;
  margin-inline:auto;
}

/* Form labels and nav were 12.16px, smaller than the fine print. */
.qform__f > span,.nav a,.topnav a{
  font-size:var(--fs-sm);
  line-height:1.5;
}

/* Micro labels are uppercase and heavy, so 14px reads larger than it
   measures. This is the only tier permitted under 16px. */
/* .kicker and .card__num were in this list and should never have been.
   Both are display elements, not micro labels: .kicker ships at
   clamp(2.2rem,4.8vw,6.2rem) and .card__num--alert at clamp(2.6rem,
   5.6vw,4.4rem). This rule sits later in the file at equal specificity,
   so it won and flattened both to 14px, which put the section titles
   BELOW their own body copy in the hierarchy. Excluded deliberately. */
.foot__region,.chip,
.callbtn em,.qfloat__tag,.qfloat__top,.qfloat__bot,
.townpick,.townpick__opt{
  font-size:var(--fs-label);
  letter-spacing:.02em;
}

/* The sticky call bar was painting over page content and clipping the
   phone number in the final card. Reserve its measured height. */
body{padding-bottom:calc(var(--callbar-h,0px) + 1rem)}

/* Map pin labels stay at 12px deliberately. They sit on a fixed-size
   graphic and enlarging them collides the pins into each other. */

/* Mop-up: these class-scoped rules outrank the plain element selectors
   in the block above, so they are restated here at matching specificity
   and later source order. Same four tiers, no new values. */
.qform__f--file small,.qform__f > span em,.qform__f--file span em,
.topbanner__quote em,.card li,.map__key li,.promise__skills li,
.card__list li,.svc li,.faq__item p,.foot li,.foot a{
  font-size:var(--fs-sm);
  line-height:1.55;
}
.card--photo li{font-size:var(--fs-body);line-height:1.5}
figcaption,.qfloat__mid{font-size:var(--fs-label)}

/* Quote points: four short proof lines that answer the objection
   "will I actually reach a person". They were plain list items at
   14.72px. Given real weight, a drawn gold tick (no emoji, no image
   request) and room to breathe, so they read as claims not filler. */
.quote__points{
  list-style:none;
  margin:1.5rem 0 0;
  padding:0;
  display:grid;
  gap:.15rem;
}
.quote__points li{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  padding:.72rem .9rem;
  font-size:var(--fs-body);
  font-weight:600;
  line-height:1.4;
  color:var(--text);
  border-radius:var(--r-sm);
  border-block-end:1px solid #ffffff14;
  text-wrap:pretty;
}
.quote__points li:last-child{border-block-end:0}

/* Gold disc plus a tick drawn from two borders. Scales with the text
   and needs no asset, so it cannot 404 the way an icon file can. */
.quote__points li::before{
  content:"";
  /* The rule near line 1642 sets position:absolute with inset-start:0.
     Without resetting it here the enlarged disc parks on top of the
     first letter instead of sitting in the flex row. */
  position:static;
  flex:0 0 auto;
  inline-size:1.45em;
  block-size:1.45em;
  margin-block-start:.02em;
  border-radius:50%;
  background:linear-gradient(160deg,var(--gold-hi),var(--gold-deep));
  box-shadow:0 1px 0 #00111e33;
}
.quote__points li::after{
  content:"";
  position:absolute;
  inset-inline-start:calc(.9rem + .48em);
  inset-block-start:calc(.72rem + .48em);
  inline-size:.3em;
  block-size:.6em;
  border-inline-end:.16em solid var(--gold-ink);
  border-block-end:.16em solid var(--gold-ink);
  transform:rotate(42deg);
}
@media (prefers-reduced-motion:no-preference){
  .quote__points li{transition:background-color .18s ease-out}
}
.quote__points li:hover{background:#ffffff0a}

/* qform__fine sits under the submit button and carries the "call
   instead if it is urgent" nudge, which is the highest value sentence
   on the whole form. It was rendering at fine-print size. */
.qform__fine{
  font-size:var(--fs-body);
  font-weight:600;
  line-height:1.5;
  color:var(--text);
  text-align:center;
  text-wrap:balance;
  max-inline-size:38ch;
  margin-inline:auto;
}

/* ===================================================================
   QUOTE PANEL 2026-08-22
   The 34ch cap on .quote__points was correct at 14.72px and wrong once
   the text moved to 18px: it forced a 373px column inside a 760px
   panel, so a 50 character line broke over three ragged lines. Measure
   is raised to fit the longest point on one line, and the panel is
   given a real vertical rhythm so the heading, the number and the
   proof list read as three groups rather than one loose stack.
   =================================================================== */
.quote__or{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.35rem;
  padding-block:2rem 1.75rem;
  padding-inline:clamp(1rem,3vw,2.25rem);
}

/* Group 1: the promise. Sized between body and the section heading so
   it leads the panel without competing with the h2 above it. */
.quote__orlead{
  margin:0;
  max-inline-size:26ch;
  font-size:clamp(1.25rem,1.1vw + 1rem,1.6rem);
  line-height:1.2;
  text-wrap:balance;
}

/* Group 2: the number. This is the one primary action in the panel,
   so nothing else gets gold fill at this weight. */
.quote__or .callpair{margin:0}

/* Group 3: the proof. Left aligned inside a centred block, with the
   measure raised so no point wraps mid phrase. The longest line is
   "Straight answer on what it takes and what it costs" at 50 chars. */
.quote__points{
  inline-size:100%;
  max-inline-size:54ch;
  margin:0 auto;
  text-align:start;
}
.quote__points li{text-wrap:pretty}

/* Below the two column split the panel is the whole width, so the
   measure rule matters more, not less. */
@media (max-width:1059px){
  .quote__points{max-inline-size:52ch}
}

/* The emergency video was replaced with a still on 2026-08-22. The video
   had two faults baked into its frames: the word "inspaded" and a 289
   number that belongs to honeyitsalldone.com, neither fixable in code.
   Same box model as the video it replaces. */
/* The WebP <picture> wrapper must be a block. Unlike the hero and footer
   images, whose <img> is position:absolute inside a wrapper and so escapes
   flow, this one is a normal-flow block at inline-size:100%. An inline
   <picture> around it would shrink-to-fit and collapse the image.
   Same convention as .promise__item--img picture above. */
.emergency picture{display:block;width:100%}
.emerg__img{
  display:block;
  inline-size:100%;
  max-inline-size:100%;
  block-size:auto;
  border-radius:var(--r-md);
}

/* The floating badge is position:fixed at z-index 60, 132px wide, 33px from
   the right edge. Content scrolls underneath it, so at narrow widths it
   lands on live copy: it was covering "We answer 24 hours a day" in the
   emergency paragraph. There is no per element gutter that fixes this,
   because any block can end up under it while scrolling.

   Below 1280px the page has no side margin to spare, and the sticky call
   bar at the bottom already carries the same number and the same promise,
   so hiding the badge there loses no call to action. Above 1280px the
   centred content leaves enough margin for it to sit clear of the text. */
@media (max-width:1279px){
  .qfloat{display:none}
}

/* ===================================================================
   EMERGENCY BADGE 2026-08-22
   Two things here.

   1. REGRESSION FIX. The type scale block earlier in this file lists
      .card__num in the 14px micro label tier. It sits later in the
      file than .card__num--alert and has equal specificity, so it won
      and flattened this badge from 4.4rem to 14px. The alert variant
      is now excluded explicitly rather than relying on source order.

   2. A live amber beacon on a 3 second cycle, as asked. The lamp is a
      pseudo element so only opacity and transform animate, which stays
      on the compositor and never triggers layout. The parent's red
      drop-shadow filter also applies to it, which is deliberate: an
      amber core inside a warm halo reads as a real warning lamp.
   =================================================================== */
.card__num.card__num--alert{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:.28em;
  font-size:clamp(3.4rem,7.5vw,6rem);
  letter-spacing:.012em;
}

/* The lamp. Sized in em so it scales with the word automatically. */
.card__num.card__num--alert::before{
  content:"";
  flex:0 0 auto;
  inline-size:.34em;
  block-size:.34em;
  border-radius:50%;
  /* Off centre highlight so it reads as a lit glass dome, not a flat dot */
  background:radial-gradient(circle at 34% 30%, #fff3c4 0%, #ffc233 38%, #f2aa10 62%, #b56a00 100%);
  box-shadow:
    0 0 .22em rgb(255 194 51 / .95),
    0 0 .7em rgb(242 170 16 / .85),
    0 0 1.5em rgb(242 170 16 / .55);
  animation:alertLamp 3s ease-in-out infinite;
  will-change:opacity,transform;
}

@keyframes alertLamp{
  0%,100%{opacity:.28;transform:scale(.88)}
  50%    {opacity:1;  transform:scale(1.12)}
}

/* A pulsing light is precisely what this setting exists to stop.
   The lamp stays lit and legible, it simply stops moving. */
@media (prefers-reduced-motion:reduce){
  .card__num.card__num--alert::before{animation:none;opacity:1;transform:none}
}

@media (max-width:560px){
  .card__num.card__num--alert{font-size:clamp(2.6rem,12vw,3.6rem)}
}

/* ideas__note is the "call anyway, we probably cover you" line that sits
   under the town list. It was sized as a footnote at 16px, which buried
   an actual invitation to phone. 80% up from that floor, and centred so
   it reads as a closing statement rather than a stray caption. */
.ideas__note{
  font-size:clamp(1.5rem,2.4vw + .6rem,1.8rem);
  line-height:1.45;
  font-weight:600;
  color:var(--text);
  text-align:center;
  text-wrap:balance;
  max-inline-size:42ch;
  margin-inline:auto;
}

/* Rental background swapped 2026-08-22. The previous image was portrait
   1200x1800 and its object-position values (52% 30%, 44% 26% on mobile)
   were tuned for that crop. The replacement is landscape 1536x1024, so
   those values now pull the frame off centre. Retuned: slightly above
   centre keeps the skyline and the doorway in frame while the lower
   roadway, which is the busiest part, falls away behind the copy. */
.rental__bgimg{object-position:50% 42%}
@media (max-width:760px){ .rental__bgimg{object-position:62% 40%} }

/* The scrim was tuned for the old portrait image, which was busy behind
   the copy. It runs 90 to 96 percent opaque navy across the whole
   section, so the replacement photo showed through at roughly 5 percent
   and was effectively invisible.

   Retuned directionally: still heavy top left where the heading and lead
   paragraph sit, easing across and down to the lower right where the
   three cards carry their own solid backgrounds and need no help. The
   headings already have their own text-shadow from the rules above. */
.rental::before{
  background:
    radial-gradient(115% 85% at 20% 24%, rgb(0 17 30 / .94) 0%, rgb(0 17 30 / .62) 52%, transparent 82%),
    linear-gradient(160deg,
      rgb(0 17 30 / .92) 0%,
      rgb(2 49 84 / .58) 46%,
      rgb(0 17 30 / .74) 100%);
}

/* The three rental card headings are statements, not labels, so they run
   at double their previous 19.52px. Anton is condensed, but at 39px an
   18 character line still exceeds the 253px column, so these wrap to two
   lines by design and the line-height is opened slightly to suit. */
.rental__item h3{
  font-size:clamp(1.75rem,4.4vw,2.44rem);
  line-height:1.08;
  text-wrap:balance;
}

/* "Discounts for seniors." is the hook in this paragraph, so it carries
   25% more size than the sentence around it. Set in em rather than rem
   so it stays proportional if the body size is ever retuned. */
.seniors__badge strong{
  font-size:1.25em;
  line-height:1.35;
}

/* The sticky bar's text block is given flex:1.3 and occupies 429px, but
   the type was 16.8px so most of that box sat empty next to a 372px
   button. Scaled to fill the space it already owns. */
.callbar__txt{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.1em;
  font-size:clamp(1rem,2.1vw,1.35rem);
  line-height:1.15;
}
.callbar__txt b{
  font-size:1.5em;
  line-height:1.05;
  display:block;
}

/* Closing line under the service list. This is the last thing read
   before the phone number, so it carries real size. */
.ideas__cta span{
  display:block;
  font-size:clamp(1.9rem,5.2vw,3.25rem);
  font-family:var(--display);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--gold-hi);
  text-align:center;
  text-wrap:balance;
  max-inline-size:20ch;
  margin:1.1rem auto 0;
  text-shadow:0 2px 0 rgb(0 17 30 / .75), 0 6px 20px rgb(0 0 0 / .5);
}