/* ============================================================
   MONTEREY BAY JUNK SERVICES — Concept 01 "Conversion Powerhouse"
   Single-file build. Tokens → base → layout → components.
   ============================================================ */

:root{
  /* Brand (taken from the company logo) */
  --brand-blue:#1F5FA8;
  --brand-blue-dark:#0D3B66;
  --brand-blue-deep:#08294A;
  --brand-yellow:#FFD633;
  --brand-yellow-dark:#F0C400;
  --ink:#10202F;
  --muted:#607080;
  --surface:#F3F6F8;
  --line:#DBE4EC;

  /* One page shade, used by every light section. Nothing on this page is
     pure white — --white is kept for type and icons sitting on dark. */
  --paper:#EFF4F8;      /* every light section */
  --paper-2:#F7FAFC;    /* raised surfaces: buttons, drawer, menus */
  --white:#FFFFFF;      /* text/icon colour only */

  /* Spacing scale */
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2rem;
  --s6:3rem; --s7:4rem; --s8:5.5rem; --s9:7rem;

  --radius-btn:10px;
  --radius-card:20px;
  --radius-media:28px;

  --shadow-sm:
    0 1px 2px rgba(30,71,114,.045),
    0 4px 10px -4px rgba(30,71,114,.06);
  --shadow-md:
    0 1px 2px rgba(30,71,114,.04),
    0 10px 22px -10px rgba(30,71,114,.10),
    0 30px 60px -28px rgba(30,71,114,.14);
  --shadow-lg:
    0 2px 5px rgba(30,71,114,.05),
    0 20px 38px -16px rgba(30,71,114,.15),
    0 48px 88px -40px rgba(30,71,114,.22);
  --shadow-hover:
    0 2px 4px rgba(30,71,114,.05),
    0 16px 30px -12px rgba(30,71,114,.13),
    0 40px 72px -34px rgba(30,71,114,.20);

  --wrap:1350px;
  --h2:clamp(2rem,4.6vw,2.9rem);   /* every section title, one size */
  --sub-gap:1.2rem;                /* title → subtitle, everywhere */
  --header-h:132px;

  /* Glass system: translucent panels a shade lighter than the page,
     so cards lift off --paper without ever hitting pure white. */
  --glass-bg:rgba(255,255,255,.66);
  --glass-bg-strong:rgba(255,255,255,.86);
  --glass-brd:rgba(255,255,255,.85);
  --glass-blur:blur(18px) saturate(165%);
  --glass-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.55);
  --glass-dark-bg:rgba(255,255,255,.07);
  --glass-dark-brd:rgba(255,255,255,.16);
  --glass-dark-blur:blur(16px) saturate(150%);

  /* One fixed height keeps every card image identical, whatever the
     column width happens to be. */
  --card-media-h:clamp(200px,24vw,258px);

  --font-display:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
/* clip, not hidden — hidden would break every position:sticky on the page */
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

/* ---------- Glass surfaces ---------- */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
}
.glass-dark{
  background:var(--glass-dark-bg);
  -webkit-backdrop-filter:var(--glass-dark-blur);
  backdrop-filter:var(--glass-dark-blur);
  border:1px solid var(--glass-dark-brd);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .glass,.scard,.review,.faq__item,.area,.spec,.item,.floatcard,.local__point{background:var(--paper-2)}
  .glass-dark,.wcard{background:rgba(255,255,255,.10)}
}
h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.025em;line-height:1.06;color:var(--ink)}
h1{font-weight:800}
h2{font-weight:800;font-size:var(--h2);text-wrap:balance}
h3{font-weight:700}
p{margin:0}
figure,blockquote{margin:0}   /* the UA gives figure a 40px side margin */
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
/* Grid children default to min-width:auto, which lets a wide child push a
   track past the container. Opt every layout grid out of that. */
.hero__grid>*,.choose__grid>*,.dump__grid>*,.eco__grid>*,
.areas__grid>*,.why__grid>*,.faq__grid>*,.foot__grid>*,.qband .wrap>*,
.phero__grid>*,.split>*,.prices>*,.local__point>*,.specrow>*{min-width:0}
.local__point p,.pcard__note,.specrow dt{overflow-wrap:anywhere}
.section{padding-block:var(--s8)}
:where(section)[id]{scroll-margin-top:110px}

.eyebrow{
  font-family:var(--font-display);
  font-weight:800;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand-blue);
}
.lede{color:var(--muted);font-size:1.115rem;max-width:56ch}

/* ---------- Section subtitle ----------
   One treatment for every section, light or dark, so the eyebrow →
   title → subtitle rhythm is identical the whole way down. */
.eyebrow{display:block;margin-bottom:.85rem}
.subhead{
  margin-top:var(--sub-gap);
  color:var(--muted);
  font-size:1.06rem;
  line-height:1.62;
  max-width:56ch;
}
.on-dark .subhead,.why .subhead,.qband .subhead{color:#BFD5EA}
.final .subhead{margin-inline:auto}

/* ---------- Focus + skip ---------- */
:focus-visible{outline:3px solid var(--brand-blue);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible,.util-bar :focus-visible{outline-color:var(--brand-yellow)}
.skip{
  position:absolute;left:16px;top:-100px;z-index:200;
  background:var(--brand-yellow);color:var(--brand-blue-dark);
  padding:.75rem 1.1rem;border-radius:8px;font-weight:700;
  transition:top .18s ease;
}
.skip:focus{top:12px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-weight:800;font-size:1rem;
  padding:.95rem 1.5rem;border-radius:var(--radius-btn);
  border:2px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .16s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  line-height:1.1;
}
.btn svg{width:18px;height:18px;flex:none}
.btn--yellow{background:var(--brand-yellow);color:var(--brand-blue-dark);box-shadow:0 8px 20px rgba(255,214,51,.32)}
.btn--yellow:hover{background:var(--brand-yellow-dark);transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,214,51,.42)}
.btn--yellow:active{transform:translateY(0);box-shadow:0 4px 10px rgba(255,214,51,.35)}
.btn--outline{background:var(--paper-2);color:var(--brand-blue-dark);border-color:var(--brand-blue)}
.btn--outline:hover{background:var(--brand-blue);color:var(--white);transform:translateY(-2px)}
.btn--outline:active{transform:translateY(0)}
.btn--ghost-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.45)}
.btn--ghost-light:hover{background:rgba(255,255,255,.12);border-color:var(--white)}
.btn--sm{padding:.6rem 1rem;font-size:.9rem}
.btn--block{width:100%}

.arrowlink{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:800;font-size:.98rem;
  color:var(--brand-blue);text-decoration:none;
}
.arrowlink svg{width:16px;height:16px;transition:transform .18s ease}
.arrowlink:hover svg{transform:translateX(4px)}
.arrowlink:hover{color:var(--brand-blue-dark)}

/* ============================================================
   HEADER
   ============================================================ */
.util-bar{background:var(--brand-blue-dark);color:#CFE0F1;font-size:.86rem}
.util-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:42px}
.util-bar b{color:var(--white);font-weight:600}
.util-bar .dot{color:var(--brand-yellow);padding-inline:.4rem}
.util-phone{display:inline-flex;align-items:center;gap:.45rem;color:var(--white);font-weight:700;text-decoration:none;font-family:var(--font-display)}
.util-phone svg{width:15px;height:15px;color:var(--brand-yellow)}
.util-phone:hover{color:var(--brand-yellow)}

.masthead{position:sticky;top:0;z-index:90}
.navbar{
  background:rgba(247,250,252,.80);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 0 rgba(13,59,102,.06);
  transition:box-shadow .25s ease, background .25s ease;
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .navbar{background:var(--paper-2)}
}
.masthead.is-stuck .navbar{background:rgba(247,250,252,.92);box-shadow:0 8px 28px rgba(13,59,102,.14)}
.navbar > .wrap{display:flex;align-items:center;gap:1rem;min-height:78px}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
/* The logo asset published by the business is a white/knockout version, so it
   sits on a brand-blue plate. Swap in the full-color logo here if available. */
.brand__plate{background:var(--brand-blue-dark);border-radius:12px;padding:.5rem .7rem;display:grid;place-items:center}
.brand__plate img{height:34px;width:auto}
.brand__txt{display:none;line-height:1.15}
.brand__txt strong{display:block;font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:-.02em}
.brand__txt span{font-size:.72rem;color:var(--muted);letter-spacing:.02em}

.nav{margin-left:auto;display:none}
.nav ul{display:flex;align-items:center;gap:0}
/* Scoped to the bar's own links so the mega panels keep their own styling. */
.nav > ul > li > a{
  display:block;text-decoration:none;font-weight:600;font-size:.9rem;
  padding:.55rem .52rem;border-radius:8px;color:#26394C;position:relative;
  white-space:nowrap;
}
@media (min-width:1400px){
  .nav ul{gap:.15rem}
  .nav > ul > li > a{padding:.55rem .62rem}
}
.nav > ul > li > a::after{
  content:"";position:absolute;left:.52rem;right:.52rem;bottom:.28rem;height:3px;
  background:var(--brand-yellow);border-radius:3px;transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;
}
.nav > ul > li > a:hover{color:var(--brand-blue-dark)}
.nav > ul > li > a:hover::after,.nav > ul > li > a[aria-current="page"]::after{transform:scaleX(1)}

.nav-cta{display:none;gap:.5rem;align-items:center;flex:none}
.burger{
  margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--brand-blue-dark);color:#fff;border:0;border-radius:10px;
  padding:.7rem .9rem;font-family:var(--font-display);font-weight:800;font-size:.9rem;cursor:pointer;
}
.burger svg{width:18px;height:18px}

/* Drawer */
.drawer{
  position:fixed;inset:0;z-index:120;visibility:hidden;
}
.drawer__scrim{
  position:absolute;inset:0;background:rgba(8,41,74,.55);opacity:0;
  transition:opacity .28s ease;
}
.drawer__panel{
  position:absolute;top:0;right:0;height:100%;width:min(360px,88vw);
  background:var(--paper-2);transform:translateX(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:1.1rem;overflow-y:auto;
}
.drawer.is-open{visibility:visible}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__panel{transform:none}
.drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}
.drawer__close{background:var(--paper);border:0;border-radius:10px;width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
.drawer__close svg{width:20px;height:20px}
.drawer nav a{
  display:flex;justify-content:space-between;align-items:center;
  padding:.95rem .25rem;border-bottom:1px solid var(--line);
  text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.08rem;
}
.drawer nav a svg{width:16px;height:16px;color:var(--brand-yellow)}
.drawer__cta{display:grid;gap:.6rem;margin-top:1.4rem}
.drawer__foot{margin-top:auto;padding-top:1.4rem;color:var(--muted);font-size:.9rem}


/* ---------- Drawer accordion groups ---------- */
.dgroup{border-bottom:1px solid var(--line)}
.dgroup__btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:none;border:0;cursor:pointer;padding:.95rem .25rem;text-align:left;
  font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:var(--ink);
}
.dgroup__btn svg{width:16px;height:16px;color:var(--brand-blue);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.dgroup__btn[aria-expanded="true"] svg{transform:rotate(135deg);color:var(--brand-yellow-dark)}
.dgroup__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s cubic-bezier(.2,.7,.2,1)}
.dgroup__panel > div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear .36s}
.dgroup.is-open .dgroup__panel{grid-template-rows:1fr}
.dgroup.is-open .dgroup__panel > div{visibility:visible;transition-delay:0s}
/* Outrank .drawer nav a so sub-items read as subordinate. */
.drawer nav .dgroup__panel a{
  justify-content:flex-start;gap:.65rem;
  font-size:.97rem;font-weight:600;padding:.62rem .25rem .62rem 1rem;
  border-bottom:0;color:#4A5C6D;
  transition:color .18s ease, padding-left .18s ease;
}
.drawer nav .dgroup__panel a svg{width:15px;height:15px;color:var(--brand-blue);flex:none}
.drawer nav .dgroup__panel a:hover{color:var(--brand-blue-dark);padding-left:1.3rem}
.dgroup__panel > div{padding-bottom:.55rem}

/* ---------- Back to top ----------
   A pill that grows a label on hover and tucks above the mobile dock. */
.totop{
  position:fixed;right:20px;z-index:85;
  bottom:calc(20px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:.45rem;
  height:52px;padding:0 16px;border-radius:26px;cursor:pointer;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-md);
  color:var(--brand-blue-dark);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.92);
  transition:
    opacity .3s ease,
    transform .38s cubic-bezier(.2,.7,.2,1),
    visibility 0s linear .38s,
    background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.totop.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s,0s,0s,0s}
.totop svg{width:18px;height:18px;flex:none;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.totop span{
  font-family:var(--font-display);font-weight:800;font-size:.85rem;white-space:nowrap;
  max-width:0;overflow:hidden;opacity:0;
  transition:max-width .32s cubic-bezier(.2,.7,.2,1), opacity .24s ease;
}
.totop:hover,.totop:focus-visible{
  background:var(--brand-yellow);border-color:var(--brand-yellow-dark);
  box-shadow:0 12px 28px rgba(255,214,51,.42);
}
.totop:hover span,.totop:focus-visible span{max-width:70px;opacity:1}
.totop:hover svg,.totop:focus-visible svg{transform:translateY(-3px)}
.totop:active{transform:translateY(1px) scale(.97)}
@media (max-width:1149px){
  /* clear the conversion dock */
  .totop{bottom:calc(86px + env(safe-area-inset-bottom));right:14px;height:46px;padding:0 13px}
  .totop svg{width:17px;height:17px}
}

/* Mobile bottom dock */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:grid;grid-template-columns:1fr 1fr;gap:.55rem;
  padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(247,250,252,.86);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.7);
  box-shadow:0 -6px 22px rgba(13,59,102,.1);
}

/* ============================================================
   HERO
   ============================================================ */
/* The hero is the one place on the page that carries a gradient. */
.hero{
  position:relative;overflow:hidden;padding-block:var(--s6) var(--s7);
  background:
    radial-gradient(1100px 620px at 88% 6%, rgba(255,214,51,.20), transparent 60%),
    radial-gradient(900px 620px at 4% 30%, rgba(31,95,168,.16), transparent 62%),
    linear-gradient(168deg,#FAFCFE 0%,#EAF1F8 52%,#E4EDF6 100%);
}
.hero::before{
  content:"";position:absolute;top:-180px;right:-200px;width:700px;height:700px;
  background:radial-gradient(circle at center, rgba(31,95,168,.10), transparent 62%);
  pointer-events:none;
}
/* Soft seam into the flat page shade below. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:140px;pointer-events:none;
  background:linear-gradient(180deg,rgba(239,244,248,0),var(--paper));
}
.hero .wrap{position:relative;z-index:1}
.hero__grid{display:grid;gap:var(--s6);align-items:center}
.hero h1{
  font-size:clamp(2.75rem,8.2vw,4.35rem);margin:.9rem 0 0;
  display:grid;                 /* ghost + typed copy share one cell */
}
.hero h1 > span{grid-area:1/1}
.hero h1 .blue{color:var(--brand-blue);position:relative;display:inline-block}
.hero h1 .blue::after{
  content:"";position:absolute;left:2px;right:14%;bottom:-.02em;height:.13em;
  background:var(--brand-yellow);border-radius:6px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.hero h1 .blue.is-lit::after{transform:scaleX(1)}

/* The ghost reserves the final height so nothing jumps while typing.
   Without JS it is the visible headline and the typed layer is hidden. */
.hero__type{display:none}
.js .hero__type{display:block}
.js .hero__ghost{visibility:hidden}
.caret{
  display:inline-block;width:.055em;height:.82em;margin-left:.07em;
  background:var(--brand-yellow);border-radius:2px;vertical-align:-.05em;
  animation:caret-blink 1.05s steps(1,end) infinite;
}
@keyframes caret-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.hero__sub{margin-top:1.15rem;font-size:1.14rem;color:var(--muted);max-width:34ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.hero__points{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.6rem}
.hero__points li{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;color:#2A3B4C}
.tick{width:20px;height:20px;flex:none;border-radius:50%;background:var(--brand-yellow);display:grid;place-items:center}
.tick svg{width:12px;height:12px;color:var(--brand-blue-dark)}

.hero__media{position:relative}
.hero__shape{
  position:absolute;inset:auto -18px -22px auto;width:72%;height:78%;
  border:14px solid var(--brand-yellow);border-radius:38px;transform:rotate(-4deg);
  z-index:0;opacity:.9;
}
.figure{
  position:relative;z-index:1;margin:0;border-radius:var(--radius-media);overflow:hidden;
  background:var(--brand-blue-dark);box-shadow:var(--shadow-lg);
}
.figure img{width:100%;height:100%;object-fit:cover}
.hero__figure{aspect-ratio:4/3.35}
.floatcard{
  position:absolute;z-index:2;border-radius:16px;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  padding:.75rem .95rem;box-shadow:var(--shadow-md);
  display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);
  font-weight:800;font-size:.86rem;line-height:1.2;letter-spacing:-.01em;
}
.floatcard--a{left:-10px;top:12%}
.floatcard--b{right:-6px;bottom:9%}
.floatcard .ic{width:30px;height:30px;border-radius:9px;background:rgba(31,95,168,.12);display:grid;place-items:center;flex:none}
.floatcard .ic svg{width:16px;height:16px;color:var(--brand-blue)}
.stars{display:flex;gap:1px}
.stars svg{width:12px;height:12px;color:var(--brand-yellow)}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust{
  position:relative;overflow:hidden;
  background:var(--brand-blue-dark);   /* flat, same blue as the other bands */
  color:var(--white);
}
/* Fade the ends so items enter and leave instead of popping. */
.trust::before,.trust::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.trust::before{left:0;background:linear-gradient(90deg,#0D3B66,rgba(13,59,102,0))}
.trust::after{right:0;background:linear-gradient(270deg,#0D3B66,rgba(13,59,102,0))}
.trust__viewport{overflow:hidden;padding-block:1.15rem}
.trust__lane{display:flex;width:max-content;will-change:transform}
.trust__set{display:flex;align-items:center;gap:2.6rem;padding-right:2.6rem;flex:none}
.trust li{
  display:flex;align-items:center;gap:.65rem;flex:none;white-space:nowrap;
  font-family:var(--font-display);font-weight:700;font-size:.98rem;
  color:#D9E6F3;letter-spacing:-.01em;
  transition:color .22s ease, transform .22s ease;
}
.trust li svg{
  width:22px;height:22px;flex:none;color:var(--brand-yellow);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.trust li:hover{color:var(--white);transform:translateY(-2px)}
.trust li:hover svg{transform:scale(1.16) rotate(-7deg)}
.trust__dot{width:5px;height:5px;border-radius:50%;background:rgba(255,214,51,.5);flex:none}
@keyframes trust-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--run),0,0)}}
.trust__lane.is-running{animation:trust-run var(--dur,34s) linear infinite}
.trust:hover .trust__lane.is-running,
.trust:focus-within .trust__lane.is-running{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .trust__lane.is-running{animation:none}
  .trust__viewport{overflow-x:auto}
}

/* ============================================================
   SERVICE CHOICE
   ============================================================ */
.sec-head{max-width:60ch;margin-bottom:var(--s5)}
.sec-head h2{font-size:var(--h2)}
.sec-head > .subhead{max-width:52ch}

.choose__grid{display:grid;gap:1.4rem;align-items:stretch}
.scard{
  display:flex;flex-direction:column;height:100%;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  border-radius:var(--radius-card);overflow:hidden;
  box-shadow:var(--glass-shadow);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* Fixed media height — columns can differ in width and the images still
   line up exactly. */
.scard__media{
  position:relative;overflow:hidden;background:var(--brand-blue-dark);
  height:var(--card-media-h);flex:none;
}
.scard__media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.scard:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:rgba(31,95,168,.28)}
.scard:hover .scard__media img{transform:scale(1.02)}
.scard__badge{
  position:absolute;left:14px;top:14px;background:var(--brand-yellow);color:var(--brand-blue-dark);
  font-family:var(--font-display);font-weight:800;font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;padding:.35rem .6rem;border-radius:6px;
}
.scard__body{padding:1.5rem 1.4rem 1.6rem;display:flex;flex-direction:column;flex:1;gap:.7rem}
.scard__ic{width:40px;height:40px;border-radius:12px;background:rgba(31,95,168,.10);border:1px solid rgba(31,95,168,.14);display:grid;place-items:center}
.scard__ic svg{width:20px;height:20px;color:var(--brand-blue)}
.scard h3{font-size:1.5rem;color:var(--brand-blue-dark)}
.scard p{color:var(--muted)}
.scard .btn{margin-top:auto}   /* same button component as the rest of the page */

/* ============================================================
   QUICK QUOTE BAND
   ============================================================ */
.qband{position:relative;overflow:hidden;background:var(--brand-blue-dark);color:var(--white)}
.qband__mark{
  position:absolute;right:-60px;top:50%;transform:translateY(-50%);
  width:420px;height:420px;opacity:.05;color:var(--white);pointer-events:none;
}
.qband .wrap{position:relative;z-index:1;display:grid;gap:1.6rem;padding-block:var(--s6);align-items:center}
.qband h2{color:var(--white);font-size:clamp(1.7rem,3.6vw,2.35rem)}
.qband .subhead{max-width:50ch}
.qband__act{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.qband__phone{
  display:inline-flex;align-items:center;gap:.5rem;color:var(--white);
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;text-decoration:none;
  border-bottom:2px solid rgba(255,214,51,.5);padding-bottom:2px;
}
.qband__phone:hover{border-bottom-color:var(--brand-yellow);color:var(--brand-yellow)}
.qband__phone svg{width:18px;height:18px;color:var(--brand-yellow)}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps{
  position:relative;display:grid;gap:2.6rem 1.5rem;margin-top:calc(var(--s5) + 1.6rem);
  list-style:none;margin-inline:0;padding:0;      /* no browser numerals */
}
.steps li::marker{content:none}
.step{
  position:relative;z-index:1;
  padding:2.4rem 1.6rem 1.7rem;border-radius:var(--radius-card);
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:rgba(31,95,168,.28)}
/* The badge straddles the top edge of the card. */
.step__num{
  position:absolute;top:-26px;left:1.6rem;
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:1.32rem;line-height:1;
  letter-spacing:-.03em;color:var(--brand-blue-dark);
  background:linear-gradient(150deg,var(--brand-yellow),var(--brand-yellow-dark));
  box-shadow:0 10px 24px rgba(255,214,51,.42);
  transition:transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.step:hover .step__num{transform:translateY(-4px) rotate(-7deg);box-shadow:0 16px 32px rgba(255,214,51,.55)}
.step__ic{
  position:absolute;top:1.5rem;right:1.5rem;      /* balances the badge */
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:rgba(31,95,168,.10);border:1px solid rgba(31,95,168,.15);
  transition:background .25s ease, transform .28s cubic-bezier(.2,.7,.2,1);
}
.step__ic svg{width:20px;height:20px;color:var(--brand-blue);transition:color .25s ease}
.step:hover .step__ic{background:var(--brand-blue);transform:scale(1.07)}
.step:hover .step__ic svg{color:var(--brand-yellow)}
.step h3{font-size:1.24rem;margin-top:.2rem;color:var(--brand-blue-dark);padding-right:3.4rem}
.step p{color:var(--muted);margin-top:.55rem;font-size:.99rem}

/* ============================================================
   DUMPSTER FEATURE
   ============================================================ */
.dump{background:transparent}
.dump__grid{display:grid;gap:var(--s5);align-items:center}
.dump__figure{aspect-ratio:4/3;box-shadow:var(--shadow-md)}
.dump h2{margin-top:0}
.specs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.spec{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-sm);
  border-radius:999px;padding:.5rem .95rem;
  font-family:var(--font-display);font-weight:700;font-size:.85rem;
}
.spec i{width:7px;height:7px;border-radius:50%;background:var(--brand-yellow);display:block}
.uses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1.2rem;margin-top:1.5rem}
.uses li{display:flex;gap:.55rem;align-items:flex-start;font-size:.97rem}
.uses svg{width:17px;height:17px;color:var(--brand-blue);margin-top:.28rem;flex:none}

/* ============================================================
   JUNK TYPES
   ============================================================ */
.items__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin-top:var(--s5)}
.item{
  display:flex;align-items:center;gap:.8rem;min-width:0;
  padding:.7rem .85rem;border-radius:14px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(31,95,168,.22)}
.item__ic{
  width:44px;height:44px;border-radius:13px;background:rgba(31,95,168,.10);
  display:grid;place-items:center;flex:none;transition:background .2s ease;
}
.item__ic svg{width:21px;height:21px;color:var(--brand-blue);transition:color .2s ease}
.item:hover .item__ic{background:var(--brand-yellow)}
.item:hover .item__ic svg{color:var(--brand-blue-dark)}
.item span{font-family:var(--font-display);font-weight:700;font-size:.98rem;letter-spacing:-.01em}
/* Long labels ("Construction Debris") must wrap rather than push the grid wide */
.item > span:last-child{min-width:0;overflow-wrap:anywhere;line-height:1.25}
@media (max-width:420px){
  .item{padding:.6rem .65rem;gap:.6rem}
  .item__ic{width:38px;height:38px;border-radius:11px}
  .item__ic svg{width:18px;height:18px}
  .item > span:last-child{font-size:.88rem}
}
.items__note{margin-top:var(--s5);color:var(--muted);font-size:.97rem}
.items__note a{color:var(--brand-blue);font-weight:700}

/* ============================================================
   WHY US
   ============================================================ */
.why{
  position:relative;overflow:hidden;color:var(--white);
  background:linear-gradient(160deg,#134A82 0%,#0D3B66 44%,#061F39 100%);
}
.why::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(640px 440px at 88% 4%, rgba(255,214,51,.22), transparent 62%),
    radial-gradient(580px 440px at 2% 92%, rgba(64,150,240,.24), transparent 62%);
}
.why::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:66px 66px;
  -webkit-mask-image:radial-gradient(circle at 55% 35%, #000, transparent 76%);
  mask-image:radial-gradient(circle at 55% 35%, #000, transparent 76%);
}
.why .wrap{position:relative;z-index:1}
.why .eyebrow{color:var(--brand-yellow)}
.why h2{color:var(--white)}
.why .subhead{max-width:38ch}
.why__mark{
  display:flex;align-items:center;gap:.8rem;margin-top:1.8rem;
  color:#9DB8D2;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--font-display);font-weight:700;
}
.why__mark span{height:1px;flex:1;min-width:2rem;background:linear-gradient(90deg,rgba(255,214,51,.75),rgba(255,255,255,.04))}
.why__grid{display:grid;gap:var(--s5)}
.why__list{display:grid;gap:1.05rem}

.wcard{
  position:relative;overflow:hidden;
  background:var(--glass-dark-bg);
  -webkit-backdrop-filter:var(--glass-dark-blur);
  backdrop-filter:var(--glass-dark-blur);
  border:1px solid var(--glass-dark-brd);
  border-radius:20px;padding:1.7rem 1.55rem;
  transition:transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
/* Light sweeps across the glass on hover */
.wcard::after{
  content:"";position:absolute;left:0;top:-120%;width:45%;height:340%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  transform:translateX(-130%) rotate(14deg);opacity:0;
  transition:opacity .35s ease, transform .85s cubic-bezier(.3,.7,.3,1);
  pointer-events:none;
}
.wcard:hover::after{opacity:1;transform:translateX(300%) rotate(14deg)}
.wcard:hover{
  transform:translateY(-5px);border-color:rgba(255,214,51,.45);
  background:rgba(255,255,255,.11);box-shadow:0 22px 48px rgba(4,16,32,.42);
}
.wcard__ic{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(255,214,51,.28),rgba(255,214,51,.07));
  border:1px solid rgba(255,214,51,.34);
  transition:transform .25s ease;
}
.wcard:hover .wcard__ic{transform:scale(1.06) rotate(-4deg)}
.wcard__ic svg{width:24px;height:24px;color:var(--brand-yellow)}
.wcard h3{color:var(--white);font-size:1.16rem;margin-top:1.05rem;letter-spacing:-.02em}
.wcard p{color:#BFD5EA;margin-top:.55rem;font-size:.97rem}

.statblock{
  margin-top:1.05rem;
  background:linear-gradient(120deg,rgba(255,214,51,.17),rgba(255,214,51,.04));
  -webkit-backdrop-filter:var(--glass-dark-blur);
  backdrop-filter:var(--glass-dark-blur);
  border:1px solid rgba(255,214,51,.32);
  border-radius:20px;padding:1.7rem 1.6rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;
}
.statblock p{
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.35rem,3vw,1.95rem);
  line-height:1.16;letter-spacing:-.028em;color:var(--white);
}
.statblock p em{color:var(--brand-yellow);font-style:normal}
@media (min-width:700px){
  .why__list{grid-template-columns:1fr 1fr;gap:1.15rem}
  .statblock{grid-column:1/-1}
}

/* ============================================================
   ECO
   ============================================================ */
.eco{background:var(--brand-blue-dark);color:var(--white)}
.eco__grid{display:grid;gap:var(--s5);align-items:center}
.eco h2{color:var(--white);margin-top:0}
.eco .eyebrow{color:var(--brand-yellow)}
.eco__list{display:grid;gap:.95rem;margin-top:1.5rem}
.eco__list li{display:flex;gap:.75rem;align-items:flex-start;color:#D8E6F3}
.eco__list svg{width:20px;height:20px;color:var(--brand-yellow);flex:none;margin-top:.22rem}
.eco__figure{aspect-ratio:5/4}
.eco__note{margin-top:1.5rem;font-size:.88rem;color:#9DB8D2}

/* ============================================================
   REVIEWS
   ============================================================ */
.review figcaption{display:flex;align-items:center;gap:.65rem;margin-top:auto;padding-top:.4rem}
.avatar{
  width:38px;height:38px;border-radius:50%;background:var(--brand-blue);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:.9rem;flex:none;
}
.review cite{font-style:normal;font-family:var(--font-display);font-weight:800;font-size:.95rem}
.review small{display:block;color:var(--muted);font-weight:500;font-size:.82rem;font-family:var(--font-body)}

/* ============================================================
   SERVICE AREA
   ============================================================ */
.areas{background:transparent}
.areas__grid{display:grid;gap:var(--s5);align-items:center}

/* Equal-width tiles keep every pin and label on the same optical line. */
.areas__list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;margin-top:1.6rem;
}
@media (min-width:560px){.areas__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){.areas__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.areas__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.area{
  display:flex;align-items:center;gap:.65rem;min-width:0;
  padding:.7rem .8rem;border-radius:14px;text-decoration:none;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-sm);
  font-family:var(--font-display);font-weight:700;font-size:.95rem;line-height:1.2;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.area__pin{
  width:30px;height:30px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:rgba(31,95,168,.10);transition:background .18s ease;
}
.area__pin svg{width:16px;height:16px;color:var(--brand-blue);transition:color .18s ease}
.area__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.area:hover{
  background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);
  transform:translateY(-3px);box-shadow:0 12px 26px rgba(31,95,168,.28);
}
.area:hover .area__pin{background:rgba(255,255,255,.20)}
.area:hover .area__pin svg{color:var(--brand-yellow)}
.areas__note{margin-top:1.6rem;color:var(--muted);font-size:.97rem}
.mapcard{
  position:relative;border-radius:var(--radius-card);overflow:hidden;
  background:linear-gradient(160deg,#123E6E,#0D3B66 55%,#0A3159);
  aspect-ratio:1/1;box-shadow:var(--shadow-md);
}
.mapcard svg{position:absolute;inset:0;width:100%;height:100%}
.mapcard__tag{
  position:absolute;left:1.25rem;bottom:1.25rem;color:#fff;z-index:2;
  font-family:var(--font-display);font-weight:800;font-size:1rem;
}
.mapcard__tag small{display:block;font-family:var(--font-body);font-weight:500;font-size:.78rem;color:#9DB8D2}

/* ============================================================
   FAQ
   ============================================================ */
.faq__grid{display:grid;gap:var(--s5);margin-top:var(--s5);align-items:start}
@media (min-width:960px){
  .faq__grid{grid-template-columns:.82fr 1.18fr;gap:var(--s6)}
  .faq__aside{position:sticky;top:130px}
}
.faq__help{
  margin-top:1.5rem;border-radius:var(--radius-card);padding:1.5rem 1.4rem;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
}
.faq__help h3{font-size:1.1rem;color:var(--brand-blue-dark)}
.faq__help p{color:var(--muted);margin-top:.55rem;font-size:.96rem}
.faq__help .btn{margin-top:1.1rem}

.faq__list{display:grid;gap:.85rem}
.faq__item{
  position:relative;border-radius:18px;overflow:hidden;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .28s ease, border-color .28s ease, background .28s ease, transform .28s ease;
}
.faq__item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--brand-yellow),rgba(255,214,51,.35));
  transform:scaleY(0);transform-origin:top;
  transition:transform .38s cubic-bezier(.2,.7,.2,1);
}
.faq__item:hover{border-color:rgba(31,95,168,.22)}
.faq__item.is-open{
  background:var(--glass-bg-strong);border-color:rgba(31,95,168,.26);
  box-shadow:var(--shadow-hover);
}
.faq__item.is-open::before{transform:scaleY(1)}
.faq__item h3{margin:0}
.faq__btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:none;border:0;text-align:left;cursor:pointer;padding:1.25rem 1.35rem;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.015em;
  line-height:1.38;color:var(--brand-blue-dark);
  transition:color .2s ease;
}
.faq__btn:hover{color:var(--brand-blue)}
.faq__sign{
  width:34px;height:34px;flex:none;border-radius:50%;
  background:rgba(31,95,168,.09);border:1px solid rgba(31,95,168,.14);
  display:grid;place-items:center;
  transition:background .25s ease, transform .4s cubic-bezier(.2,.7,.2,1), border-color .25s ease;
}
.faq__sign svg{width:15px;height:15px;color:var(--brand-blue-dark);transition:color .25s ease}
.faq__btn[aria-expanded="true"] .faq__sign{
  background:var(--brand-yellow);border-color:var(--brand-yellow-dark);transform:rotate(135deg);
}
/* 0fr → 1fr gives a true animated height with no fixed max-height guesswork */
.faq__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1);
}
/* visibility:hidden is what actually takes the panel out of the accessibility
   tree and the tab order. grid-template-rows:0fr only clips it, so on /faqs/ a
   screen reader read all 26 answers while every button said aria-expanded=false,
   and Tab walked through the collapsed drawer groups' 15 invisible links.
   The delay lets the closing animation finish before it disappears. */
.faq__panel > div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear .4s}
.faq__item.is-open .faq__panel{grid-template-rows:1fr}
.faq__item.is-open .faq__panel > div{visibility:visible;transition-delay:0s}
.faq__panel p{
  color:var(--muted);margin:0;padding:0 3.6rem 1.35rem 1.35rem;
  opacity:0;transform:translateY(-6px);
  transition:opacity .3s ease .06s, transform .3s ease .06s;
}
.faq__item.is-open .faq__panel p{opacity:1;transform:none}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{position:relative;overflow:hidden;background:var(--brand-blue-dark);color:var(--white);text-align:center}
.final__art{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:min(1100px,140%);opacity:.14;color:var(--brand-yellow);pointer-events:none}
.final .wrap{position:relative;z-index:1;padding-block:var(--s8)}
.final h2{color:var(--white);font-size:clamp(2.1rem,5.6vw,3.5rem)}
.final .subhead{color:#BFD5EA;max-width:50ch}
.final__cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2rem}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--brand-blue-deep);color:#A9C2D8;font-size:.95rem}
.site-footer .wrap{padding-block:var(--s6) var(--s4)}
.foot__grid{display:grid;gap:2.4rem}
.foot__brand p{margin-top:1rem;max-width:38ch;color:#A9C2D8}
.foot__phone{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:1.2rem;
  font-family:var(--font-display);font-weight:800;font-size:1.28rem;color:#fff;text-decoration:none;
}
.foot__phone svg{width:19px;height:19px;color:var(--brand-yellow)}
.foot__phone:hover{color:var(--brand-yellow)}
.foot__col h2{color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem;font-weight:800}
.foot__col li{margin-bottom:.6rem}
.foot__col a{text-decoration:none}
.foot__col a:hover{color:var(--brand-yellow)}
.foot__areas{display:flex;flex-wrap:wrap;gap:.35rem .9rem}
.foot__bottom{
  border-top:1px solid rgba(255,255,255,.12);margin-top:var(--s5);padding-top:1.4rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.86rem;
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.js .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1);
}
.js .reveal.is-in{opacity:1;transform:none}

/* Never animate the page header in. It holds the headline the browser
   measures as the largest paint, and fading it up from zero pushed that to
   3-4s on phones even though the page itself had finished loading. */
.js .phero .reveal,.js .phero .stagger > *,
.js .hero .reveal,.js .hero .stagger > *{opacity:1;transform:none;transition:none}

/* Directional + scale variants, chosen per section so the page does not
   read as one repeated fade. */
.js .reveal--left{transform:translateX(-20px)}
.js .reveal--right{transform:translateX(20px)}
.js .reveal--scale{transform:scale(.94)}
.js .reveal--blur{filter:blur(9px)}
.js .reveal--blur.is-in{filter:none}
.js .reveal--left.is-in,.js .reveal--right.is-in,.js .reveal--scale.is-in{transform:none}
/* Once the layout stacks, a sideways slide both reads oddly and pushes the
   document wider than the viewport. Fall back to the vertical reveal. */
@media (max-width:900px){
  .js .reveal--left,.js .reveal--right{transform:translateY(26px)}
}

/* Children stagger off a shared index set by the observer. */
.js .stagger > *{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 70ms);
}
.js .stagger.is-in > *{opacity:1;transform:none}

/* Reading-progress rail across the top of the sticky header. */
.progress{
  position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:transparent;overflow:hidden;pointer-events:none;z-index:5;
}
.progress i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--brand-yellow),var(--brand-blue));
}

/* Header compacts a little once you leave the top of the page. */
.navbar > .wrap{transition:min-height .3s cubic-bezier(.2,.7,.2,1)}
.masthead.is-stuck .navbar > .wrap{min-height:68px}
.brand__plate{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.masthead.is-stuck .brand__plate{transform:scale(.92)}

/* Shared hover behaviours ------------------------------------------------ */
.figure img{transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.figure:hover img{transform:scale(1.05)}
.trust li{transition:transform .22s ease, color .22s ease}
.trust li:hover{transform:translateY(-3px);color:var(--brand-blue-dark)}
.trust li svg{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.trust li:hover svg{transform:scale(1.18) rotate(-6deg)}
.spec{transition:transform .2s ease, box-shadow .2s ease}
.spec:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(13,59,102,.12)}
.eco__list li{transition:transform .22s ease}
.eco__list li:hover{transform:translateX(5px)}
.uses li{transition:transform .2s ease,color .2s ease}
.uses li:hover{transform:translateX(4px);color:var(--brand-blue-dark)}
.foot__col a{transition:color .2s ease, padding-left .2s ease}
.foot__col li > a:hover{padding-left:5px}
.step{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.step:hover{transform:translateY(-5px)}
.step__num{transition:color .28s ease}
.step:hover .step__num span{color:var(--brand-blue)}
.avatar{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.review:hover .avatar{transform:scale(1.08) rotate(-5deg)}
.scard__badge{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.scard:hover .scard__badge{transform:translateY(-2px) scale(1.04)}
.scard__ic{transition:transform .28s cubic-bezier(.2,.7,.2,1), background .25s ease}
.scard:hover .scard__ic{transform:rotate(-6deg) scale(1.08);background:var(--brand-yellow)}
.mapcard{transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease}
.mapcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}


/* ============================================================
   MEGA MENU
   ============================================================ */
.navbar{position:relative}
.nav__item{position:static}
.nav__trigger{
  display:inline-flex;align-items:center;gap:.34rem;
  background:none;border:0;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:.9rem;
  padding:.55rem .52rem;border-radius:8px;color:#26394C;
  position:relative;white-space:nowrap;
}
.nav__trigger .chev{width:13px;height:13px;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.nav__trigger::after{
  content:"";position:absolute;left:.52rem;right:1.4rem;bottom:.28rem;height:3px;
  background:var(--brand-yellow);border-radius:3px;transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;
}
.nav__trigger:hover,.nav__trigger[aria-expanded="true"]{color:var(--brand-blue-dark)}
.nav__trigger:hover::after,.nav__trigger[aria-expanded="true"]::after{transform:scaleX(1)}
.nav__trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}

.mega{
  position:absolute;left:0;right:0;top:100%;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .26s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s;
}
.mega.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}
/* A menu has to be readable above all else, so this glass is far more
   opaque than the decorative cards on the page. */
.mega__inner{
  margin:.6rem auto 0;border-radius:22px;padding:1.6rem;
  background:rgba(249,251,253,.98);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(13,59,102,.10);
  box-shadow:var(--shadow-lg);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .mega__inner{background:var(--paper-2)}
}
.mega .wrap{display:block}   /* never inherit the navbar's flex wrap */
.mega__grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
.mega__card{
  display:block;text-decoration:none;border-radius:16px;overflow:hidden;
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  transition:transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease, border-color .26s ease;
}
.mega__card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:rgba(31,95,168,.3)}
.mega__thumb{display:block;height:124px;overflow:hidden;background:var(--brand-blue-dark)}
.mega__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.mega__card:hover .mega__thumb img{transform:scale(1.07)}
.mega__txt{display:block;padding:.95rem 1rem 1.05rem}
.mega__txt strong{
  display:flex;align-items:center;gap:.4rem;
  font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--brand-blue-dark);
}
.mega__txt strong svg{width:14px;height:14px;color:var(--brand-blue);transition:transform .22s ease}
.mega__card:hover .mega__txt strong svg{transform:translateX(4px)}
.mega__txt span{display:block;margin-top:.28rem;color:var(--muted);font-size:.88rem;line-height:1.45}

.mega__label{
  font-family:var(--font-display);font-weight:800;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand-blue);margin-bottom:.85rem;
}
.mega__areas{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.mega__area{
  display:flex;align-items:center;gap:.55rem;min-width:0;
  padding:.55rem .7rem;border-radius:11px;text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;
  border:1px solid transparent;
  transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
}
.mega__area svg{width:15px;height:15px;margin-right:.15rem;color:var(--brand-blue);flex:none;transition:color .18s ease}
.mega__area span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mega__area:hover{background:var(--brand-blue);color:#fff;transform:translateX(3px)}
.mega__area:hover svg{color:var(--brand-yellow)}
.mega__area--primary{
  background:linear-gradient(120deg,rgba(255,214,51,.30),rgba(255,214,51,.10));
  border-color:rgba(255,214,51,.55);
}
.mega__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.9rem;
  margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid rgba(13,59,102,.10);
  color:var(--muted);font-size:.92rem;
}

/* ============================================================
   HERO — rotating typed line
   ============================================================ */
.hero__rotate{color:var(--brand-blue);position:relative;display:inline-block}
.hero__rotate::after{
  content:"";position:absolute;left:2px;right:0;bottom:-.02em;height:.13em;
  background:var(--brand-yellow);border-radius:6px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.hero__rotate.is-lit::after{transform:scaleX(1)}
.hero__rotate.is-clearing::after{transform-origin:right}
.caret{
  display:inline-block;width:.055em;height:.78em;margin-left:.07em;
  background:var(--brand-yellow);border-radius:2px;vertical-align:-.02em;
  box-shadow:0 0 14px rgba(255,214,51,.85);
  animation:caret-blink 1.05s steps(1,end) infinite;
}
.caret.is-typing{animation:none;opacity:1}
@keyframes caret-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* Static lines drift up on load so the headline arrives as one moment. */
.js .hero__line{opacity:0;transform:translateY(16px);animation:line-in .8s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero__line--b{animation-delay:.12s}
@keyframes line-in{to{opacity:1;transform:none}}

/* ============================================================
   REVIEWS — looping 3-up carousel
   ============================================================ */
.slider{--per:1;--gap:1.25rem;position:relative;margin-top:var(--s5)}
@media (min-width:700px){.slider{--per:2}}
@media (min-width:1050px){.slider{--per:3}}
/* Vertical padding gives the shadows room to fade out before the clip
   edge. The side padding has to stay under one gap width (20px) or the
   next card starts peeking in at the rail edges. */
.slider__viewport{
  overflow:hidden;
  padding:2.4rem .85rem 5rem;
  margin:-2.4rem -.85rem -3.2rem;
}
.slider__track{display:flex;gap:var(--gap);will-change:transform}
.slider__track.is-animating{transition:transform .72s cubic-bezier(.33,.9,.3,1)}
.review{
  flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  position:relative;
  /* No fill at all — the pane is pure backdrop work. brightness lifts it off
     the page the way a tint would, without introducing a background colour. */
  background:transparent;
  -webkit-backdrop-filter:blur(22px) saturate(190%) brightness(1.075);
  backdrop-filter:blur(22px) saturate(190%) brightness(1.075);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
  border-radius:var(--radius-card);
  padding:1.9rem 1.7rem;display:flex;flex-direction:column;gap:.9rem;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.review:hover{
  transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:rgba(31,95,168,.26);
  -webkit-backdrop-filter:blur(24px) saturate(200%) brightness(1.10);
  backdrop-filter:blur(24px) saturate(200%) brightness(1.10);
}
.review::before{
  content:"\201C";position:absolute;right:1.3rem;top:.1rem;
  font-family:var(--font-display);font-weight:800;font-size:5rem;line-height:1;
  color:rgba(31,95,168,.10);pointer-events:none;transition:color .3s ease
}
.review:hover::before{color:rgba(255,214,51,.45)}
.slider__ui{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:.2rem}
.slider__ui[hidden]{display:none}
.slider__btn{
  width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-sm);color:var(--brand-blue-dark);
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.slider__btn svg{width:19px;height:19px}
.slider__btn:hover{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);transform:translateY(-3px) scale(1.06)}
.slider__btn:active{transform:translateY(0) scale(.97)}
.slider__dots{display:flex;align-items:center;gap:.34rem;flex-wrap:wrap;justify-content:center}
.slider__dot{
  width:8px;height:8px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(13,59,102,.22);
  transition:width .3s cubic-bezier(.2,.7,.2,1), background .25s ease, transform .2s ease;
}
.slider__dot:hover{background:rgba(13,59,102,.42);transform:scale(1.25)}
.slider__dot.is-active{width:26px;background:var(--brand-blue);transform:none}
@media (max-width:560px){.slider__dot{width:6px;height:6px}.slider__dot.is-active{width:20px}}

/* ============================================================
   SALINAS SEO SECTIONS
   ============================================================ */
.local{position:relative;overflow:hidden}
.local--tint{background:transparent}
.local__grid{display:grid;gap:var(--s5);align-items:center}
@media (min-width:900px){
  /* stretch, not centre, so the photo runs the full height of the copy */
  .local__grid{grid-template-columns:1.05fr .95fr;gap:var(--s6);align-items:stretch}
  .local__grid--flip .local__media{order:-1}
  .local__media{display:flex;flex-direction:column}
  .local__figure{aspect-ratio:auto;flex:1;min-height:420px}
}
.local__city{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  border-radius:999px;padding:.42rem .95rem;margin-bottom:1rem;
  font-family:var(--font-display);font-weight:800;font-size:.76rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--brand-blue);
  box-shadow:var(--shadow-sm);
}
.local__city svg{width:14px;height:14px;color:var(--brand-yellow)}
.local .subhead{max-width:58ch}
.local__points{display:grid;gap:.9rem;margin-top:1.8rem}
.local__point{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  padding:1.05rem 1.15rem;border-radius:16px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-sm);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.local__point:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(31,95,168,.24)}
.local__ic{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:rgba(31,95,168,.10);border:1px solid rgba(31,95,168,.14);
  transition:background .25s ease, transform .28s cubic-bezier(.2,.7,.2,1);
}
.local__ic svg{width:20px;height:20px;color:var(--brand-blue);transition:color .25s ease}
.local__point:hover .local__ic{background:var(--brand-yellow);transform:rotate(-7deg) scale(1.07)}
.local__point:hover .local__ic svg{color:var(--brand-blue-dark)}
.local__point h3{font-size:1.06rem;color:var(--brand-blue-dark)}
.local__point p{margin-top:.35rem;color:var(--muted);font-size:.96rem}
.local__cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.9rem}
.local__media{position:relative}
.local__figure{aspect-ratio:4/3.2}
.local__stat{
  position:absolute;left:-12px;bottom:18px;z-index:2;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  border-radius:16px;padding:.85rem 1.05rem;box-shadow:var(--shadow-md);
  font-family:var(--font-display);font-weight:800;font-size:.88rem;line-height:1.3;
  display:flex;align-items:center;gap:.6rem;
}
.local__stat .ic{width:32px;height:32px;border-radius:10px;background:rgba(255,214,51,.35);display:grid;place-items:center;flex:none}
.local__stat .ic svg{width:16px;height:16px;color:var(--brand-blue-dark)}
.local__stat small{display:block;font-family:var(--font-body);font-weight:500;font-size:.76rem;color:var(--muted)}
@media (max-width:560px){.local__stat{left:8px;bottom:8px}}


/* ============================================================
   INNER PAGE HERO  (shared by every service page)
   ============================================================ */
.phero{
  position:relative;overflow:hidden;padding-block:var(--s6) var(--s7);
  background:
    radial-gradient(1000px 560px at 88% 4%, rgba(255,214,51,.20), transparent 60%),
    radial-gradient(820px 560px at 2% 34%, rgba(31,95,168,.16), transparent 62%),
    linear-gradient(168deg,#FAFCFE 0%,#EAF1F8 54%,#E4EDF6 100%);
}
.phero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:130px;pointer-events:none;
  background:linear-gradient(180deg,rgba(239,244,248,0),var(--paper));
}
.phero .wrap{position:relative;z-index:1}
.phero__grid{display:grid;gap:var(--s5);align-items:center}
@media (min-width:900px){
  .phero__grid{grid-template-columns:1.08fr .92fr;gap:var(--s6)}
}
.phero h1{font-size:clamp(2.3rem,5.6vw,3.5rem);margin-top:.2rem}
.phero .subhead{font-size:1.12rem;max-width:52ch}
.phero__cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:2rem}
.phero__figure{aspect-ratio:4/3.1}

/* Breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.88rem;color:var(--muted)}
.crumbs a{text-decoration:none;font-weight:600;color:var(--brand-blue);transition:color .18s ease}
.crumbs a:hover{color:var(--brand-blue-dark);text-decoration:underline}
.crumbs svg{width:12px;height:12px;color:#9FB2C4;flex:none}
.crumbs [aria-current]{font-weight:600;color:var(--ink)}

/* ============================================================
   PRICE CARD  +  SPEC TABLE
   ============================================================ */
.prices{display:grid;gap:1.4rem;margin-top:var(--s5)}
@media (min-width:760px){.prices--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.prices--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pcard{
  position:relative;display:flex;flex-direction:column;height:100%;
  padding:1.9rem 1.7rem;border-radius:var(--radius-card);
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:rgba(31,95,168,.28)}
.pcard--lead{border-color:rgba(255,214,51,.6);background:linear-gradient(160deg,rgba(255,214,51,.14),var(--glass-bg) 58%)}
.pcard__tag{
  align-self:flex-start;background:var(--brand-yellow);color:var(--brand-blue-dark);
  font-family:var(--font-display);font-weight:800;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.34rem .6rem;border-radius:6px;margin-bottom:1rem;
}
.pcard__ic{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:1rem;
  background:rgba(31,95,168,.10);border:1px solid rgba(31,95,168,.15);
  transition:background .25s ease, transform .28s cubic-bezier(.2,.7,.2,1);
}
.pcard__ic svg{width:22px;height:22px;color:var(--brand-blue);transition:color .25s ease}
.pcard:hover .pcard__ic{background:var(--brand-yellow);transform:rotate(-7deg) scale(1.07)}
.pcard:hover .pcard__ic svg{color:var(--brand-blue-dark)}
.pcard h3{font-size:1.28rem;color:var(--brand-blue-dark)}
.pcard__price{
  display:flex;align-items:baseline;gap:.45rem;margin-top:1rem;
  font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;
  font-size:2.7rem;line-height:1;color:var(--brand-blue);
}
.pcard__price small{font-family:var(--font-body);font-weight:500;font-size:.9rem;color:var(--muted);letter-spacing:0}
.pcard__note{color:var(--muted);margin-top:.7rem;font-size:.97rem}
.pcard ul{display:grid;gap:.6rem;margin-top:1.3rem}
.pcard li{display:flex;gap:.6rem;align-items:flex-start;font-size:.97rem;color:#2A3B4C}
.pcard li svg{width:17px;height:17px;color:var(--brand-blue);flex:none;margin-top:.26rem}
/* Button always sits on the card floor, with a guaranteed gap above it,
   so a row of cards lines up whatever length the copy runs to. */
.pcard .btn{margin-top:auto}
.pcard > *:nth-last-child(2){margin-bottom:1.6rem}

/* Spec rows */
.specs__list{
  margin-top:var(--s5);border-radius:var(--radius-card);overflow:hidden;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
}
.specrow{
  display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;
  padding:1.05rem 1.35rem;border-bottom:1px solid rgba(13,59,102,.08);
  transition:background .2s ease;
}
.specrow:last-child{border-bottom:0}
.specrow:hover{background:rgba(255,255,255,.45)}
.specrow__ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:rgba(31,95,168,.10)}
.specrow__ic svg{width:17px;height:17px;color:var(--brand-blue)}
.specrow dt{font-family:var(--font-display);font-weight:700;font-size:.99rem;color:var(--brand-blue-dark)}
.specrow dd{
  margin:0;font-family:var(--font-display);font-weight:800;font-size:1.02rem;
  color:var(--brand-blue);text-align:right;white-space:nowrap;
}
@media (max-width:520px){
  .specrow{grid-template-columns:auto 1fr;row-gap:.3rem}
  .specrow dd{grid-column:2;text-align:left;white-space:normal}
  .pcard,.notecard{padding-inline:1.25rem}
  .pcard__price{font-size:2.3rem}
}

/* Two-column prose + aside used on the pricing page */
.split{display:grid;gap:var(--s5);align-items:start}
@media (min-width:960px){
  .split{grid-template-columns:1.15fr .85fr;gap:var(--s6)}
  .split__aside{position:sticky;top:130px}
}
.notecard{
  border-radius:var(--radius-card);padding:1.6rem 1.5rem;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
}
.notecard h3{font-size:1.1rem;color:var(--brand-blue-dark)}
.notecard p{color:var(--muted);margin-top:.55rem;font-size:.96rem}
.notecard .btn{margin-top:1.15rem}


/* ============================================================
   PRODUCT PRICE BLOCK  (hero of every service page)
   ============================================================ */
.phero__price{
  display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .7rem;
  margin-top:1.6rem;padding:.9rem 1.2rem;border-radius:16px;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-sm);
}
.phero__price b{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(2rem,4.4vw,2.65rem);line-height:1;color:var(--brand-blue);
}
.phero__price span{font-size:.95rem;color:var(--muted)}
.phero__price em{
  font-style:normal;font-family:var(--font-display);font-weight:800;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brand-blue-dark);
  background:var(--brand-yellow);padding:.28rem .55rem;border-radius:5px;
}

/* ============================================================
   LOAD-SIZE ESTIMATOR
   ============================================================ */
.est{margin-top:var(--s5)}
.est__tabs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem;
  padding:.4rem;border-radius:999px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
}
.est__tab{
  border:0;background:transparent;cursor:pointer;border-radius:999px;
  padding:.85rem .4rem;font-family:var(--font-display);font-weight:800;font-size:.98rem;
  color:var(--brand-blue-dark);white-space:nowrap;
  transition:background .22s ease, color .22s ease, box-shadow .22s ease, transform .18s ease;
}
.est__tab:hover{background:rgba(31,95,168,.09)}
.est__tab[aria-selected="true"]{
  background:linear-gradient(150deg,var(--brand-yellow),var(--brand-yellow-dark));
  box-shadow:0 8px 20px rgba(255,214,51,.42);
}
.est__tab:active{transform:scale(.97)}
@media (max-width:480px){.est__tab{font-size:.86rem;padding:.75rem .2rem}}

.est__body{display:grid;gap:var(--s5);margin-top:1.6rem;align-items:center}
@media (min-width:900px){.est__body{grid-template-columns:.82fr 1.18fr;gap:var(--s6)}}
.est__body>*{min-width:0}

.est__panel{
  border-radius:var(--radius-card);padding:1.8rem 1.6rem;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
}
.est__label{
  font-family:var(--font-display);font-weight:800;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand-blue);
}
.est__amount{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(2.3rem,5.6vw,3.1rem);line-height:1.02;color:var(--brand-blue-dark);
  margin-top:.55rem;
}
/* the figure re-reads as it swaps */
.est__amount.is-swapping{opacity:0;transform:translateY(8px)}
.est__amount{transition:opacity .2s ease, transform .28s cubic-bezier(.2,.7,.2,1)}
.est__chip{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;
  background:rgba(255,214,51,.28);border:1px solid rgba(255,214,51,.55);
  border-radius:999px;padding:.4rem .8rem;
  font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--brand-blue-dark);
}
.est__chip svg{width:14px;height:14px;color:var(--brand-blue-dark)}
.est__loads{margin-top:1rem;color:var(--muted);font-size:.99rem}
.est__panel .btn{margin-top:1.5rem}
.est__fine{margin-top:1.1rem;font-size:.84rem;color:var(--muted);line-height:1.55}

.est__viz{position:relative}
.est__truck{width:100%;height:auto;display:block;overflow:visible}
.est__truck .ln{fill:none;stroke:var(--brand-blue-dark);stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.est__truck .body{fill:rgba(255,255,255,.7)}
.est__truck .glass-p{fill:rgba(31,95,168,.16)}
.est__truck .tyre{fill:#16283A}
.est__truck .hub{fill:var(--paper-2)}
.est__truck .track{fill:rgba(31,95,168,.07)}
.est__truck .ground{stroke:rgba(31,95,168,.28);stroke-width:3;stroke-dasharray:7 11;stroke-linecap:round}
.est__fill{
  fill:var(--brand-yellow);
  transform-box:fill-box;transform-origin:left center;
  transform:scaleX(var(--fill,.25));
  transition:transform .62s cubic-bezier(.25,.85,.3,1);
}
.est__cap{
  position:absolute;left:66%;top:2%;transform:translateX(-50%);
  font-family:var(--font-display);font-weight:800;font-size:.86rem;
  color:var(--brand-blue-dark);background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);border-radius:999px;padding:.4rem .9rem;
  box-shadow:var(--shadow-sm);white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  .est__fill{transition:none}
  .est__amount{transition:none}
}

/* Item categories strip */
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:var(--s5)}
@media (min-width:700px){.cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cat{
  display:flex;align-items:center;gap:.75rem;min-width:0;text-decoration:none;
  padding:.85rem 1rem;border-radius:15px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-sm);
  font-family:var(--font-display);font-weight:700;font-size:.98rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.cat__ic{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;background:rgba(31,95,168,.10);transition:background .2s ease}
.cat__ic svg{width:19px;height:19px;color:var(--brand-blue);transition:color .2s ease}
.cat span{min-width:0;overflow-wrap:anywhere}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(31,95,168,.26)}
.cat:hover .cat__ic{background:var(--brand-yellow)}
.cat:hover .cat__ic svg{color:var(--brand-blue-dark)}


/* ------------------------------------------------------------------
   Service card extensions. Same .scard the home page uses — these only
   add the price line and feature list the hub page needs.
   ------------------------------------------------------------------ */
.scard__price{
  display:flex;align-items:baseline;gap:.4rem;margin-top:.2rem;
  font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;
  font-size:1.95rem;line-height:1;color:var(--brand-blue);
}
.scard__price small{
  font-family:var(--font-body);font-weight:500;font-size:.85rem;
  color:var(--muted);letter-spacing:0;
}
.scard ul{display:grid;gap:.55rem;margin-top:.5rem}
.scard li{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem;color:#2A3B4C}
.scard li svg{width:16px;height:16px;color:var(--brand-blue);flex:none;margin-top:.24rem}
.scard__body > *:nth-last-child(2){margin-bottom:1.4rem}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.cmp__scroll{overflow-x:auto;margin-top:var(--s5);padding-bottom:.4rem;-webkit-overflow-scrolling:touch}
.cmp{
  min-width:680px;border-radius:var(--radius-card);overflow:hidden;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
}
.cmp__row{
  display:grid;grid-template-columns:1.25fr repeat(3,1fr);
  border-bottom:1px solid rgba(13,59,102,.08);
}
.cmp__row:last-child{border-bottom:0}
.cmp__row > *{padding:1rem 1.1rem;display:flex;align-items:center;gap:.5rem;min-width:0}
/* sprite symbols have no intrinsic size — pin them before they fill the cell */
.cmp__row > * > svg{width:17px;height:17px;flex:none;color:var(--brand-blue)}
.cmp__row > *:first-child{
  font-family:var(--font-display);font-weight:700;font-size:.93rem;color:var(--brand-blue-dark);
}
.cmp__row > *:not(:first-child){font-size:.94rem;color:#2A3B4C}
/* the middle column is the recommended one */
.cmp__row > *:nth-child(2){background:rgba(255,214,51,.10)}
.cmp__row--head > *:nth-child(2){background:rgba(255,214,51,.24)}
.cmp__row--head{border-bottom:1px solid rgba(13,59,102,.14)}
.cmp__row--head > *{
  padding-block:1.15rem;align-items:flex-start;flex-direction:column;gap:.3rem;
  font-family:var(--font-display);font-weight:800;color:var(--brand-blue-dark);
}
.cmp__row--head .price{
  font-size:1.35rem;letter-spacing:-.03em;color:var(--brand-blue);line-height:1;
}
.cmp__row--head .unit{font-family:var(--font-body);font-weight:500;font-size:.8rem;color:var(--muted)}
.cmp__row--cta > *{padding-block:1.2rem}
.cmp__row--cta .btn{width:100%}
.cmp__row b{font-family:var(--font-display);font-weight:800;color:var(--brand-blue-dark)}
.cmp__yes{color:var(--brand-blue);flex:none}
.cmp__yes svg{width:17px;height:17px}
.cmp__hint{margin-top:.9rem;font-size:.88rem;color:var(--muted)}
@media (min-width:760px){.cmp{min-width:0}.cmp__hint{display:none}}


/* ============================================================
   FORM CONTROLS
   ============================================================ */
.form__grid{display:grid;gap:1.1rem}
@media (min-width:620px){.form__grid--2{grid-template-columns:1fr 1fr}}
.form__grid>*{min-width:0}
.field{display:grid;gap:.45rem}
.field > label{
  font-family:var(--font-display);font-weight:700;font-size:.88rem;color:var(--brand-blue-dark);
}
.field > label .opt{font-family:var(--font-body);font-weight:500;color:var(--muted);font-size:.82rem}
.field input,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  /* Was rgba(13,59,102,.16), which resolves to 1.33:1. The border is the only
     visual boundary of the field, so WCAG 1.4.11 applies at 3:1. */
  border:1px solid rgba(13,59,102,.42);border-radius:13px;padding:.85rem 1rem;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field textarea{min-height:130px;resize:vertical;line-height:1.6}
/* Was #9AAAB9, 2.34:1 against the field. WCAG 1.4.3 wants 4.5:1. */
.field input::placeholder,.field textarea::placeholder{color:#5E7182}
.field input:hover,.field textarea:hover{border-color:rgba(31,95,168,.34)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--brand-blue);
  box-shadow:0 0 0 4px rgba(31,95,168,.16);background:rgba(255,255,255,.9);
}
.field.is-bad input,.field.is-bad textarea{border-color:#C0392B;box-shadow:0 0 0 4px rgba(192,57,43,.12)}
.field__err{font-size:.82rem;color:#B0342A;font-weight:600;display:none}
.field.is-bad .field__err{display:block}

/* Numbered step heading inside the booking form */
.step-h{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.step-h span{
  width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brand-yellow),var(--brand-yellow-dark));
  font-family:var(--font-display);font-weight:800;font-size:.95rem;color:var(--brand-blue-dark);
}
.step-h h3{font-size:1.18rem;color:var(--brand-blue-dark)}
.fset{border:0;padding:0;margin:0 0 var(--s5)}
.fset:last-of-type{margin-bottom:0}
.fset[hidden]{display:none}

/* ============================================================
   SERVICE PICKER
   ============================================================ */
.pick{display:grid;gap:.9rem}
@media (min-width:700px){.pick{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pick > *{min-width:0}
.pick__opt{position:relative;display:block;cursor:pointer}
.pick__opt input{position:absolute;opacity:0;width:1px;height:1px}
.pick__card{
  display:flex;flex-direction:column;gap:.5rem;height:100%;
  padding:1.15rem 1.1rem;border-radius:16px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.pick__opt:hover .pick__card{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.pick__opt input:checked + .pick__card{
  border-color:var(--brand-yellow-dark);
  background:linear-gradient(150deg,rgba(255,214,51,.20),var(--glass-bg) 62%);
  box-shadow:var(--shadow-md);
}
.pick__opt input:focus-visible + .pick__card{outline:3px solid var(--brand-blue);outline-offset:3px}
.pick__ic{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(31,95,168,.10);transition:background .22s ease;
}
.pick__ic svg{width:19px;height:19px;color:var(--brand-blue);transition:color .22s ease}
.pick__opt input:checked + .pick__card .pick__ic{background:var(--brand-yellow)}
.pick__opt input:checked + .pick__card .pick__ic svg{color:var(--brand-blue-dark)}
.pick__card b{font-family:var(--font-display);font-weight:800;font-size:1.02rem;color:var(--brand-blue-dark)}
.pick__card span{font-size:.88rem;color:var(--muted);line-height:1.5}
.pick__card em{
  font-style:normal;font-family:var(--font-display);font-weight:800;font-size:.95rem;
  color:var(--brand-blue);margin-top:auto;
}

/* ============================================================
   CALENDAR
   ============================================================ */
.cal{
  border-radius:var(--radius-card);padding:1.2rem 1.1rem 1.3rem;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
}
.cal__head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1rem}
.cal__title{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--brand-blue-dark)}
.cal__nav{
  width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--glass-bg-strong);border:1px solid var(--glass-brd);
  color:var(--brand-blue-dark);box-shadow:var(--shadow-sm);
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,opacity .18s ease;
}
.cal__nav svg{width:16px;height:16px}
.cal__nav:hover:not(:disabled){background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);transform:translateY(-2px)}
.cal__nav:disabled{opacity:.3;cursor:default}
.cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.cal__dow{
  text-align:center;padding:.45rem 0;font-family:var(--font-display);font-weight:800;
  font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.cal__day{
  aspect-ratio:1;border:0;background:transparent;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:.93rem;color:var(--ink);
  border-radius:11px;transition:background .16s ease, color .16s ease, transform .16s ease;
}
.cal__day:hover:not(:disabled):not(.is-on){background:rgba(31,95,168,.12)}
.cal__day:disabled{opacity:.26;cursor:default}
.cal__day.is-today{box-shadow:inset 0 0 0 2px var(--brand-yellow)}
.cal__day.is-span{background:rgba(31,95,168,.14);border-radius:0}
.cal__day.is-on{background:var(--brand-blue);color:#fff}
.cal__day.is-on:active{transform:scale(.94)}
.cal__day.is-start{border-radius:11px 0 0 11px}
.cal__day.is-end{border-radius:0 11px 11px 0}
.cal__day.is-only{border-radius:11px}
.cal__foot{margin-top:.9rem;font-size:.84rem;color:var(--muted);line-height:1.55}

/* Time windows */
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-top:1.1rem}
@media (min-width:520px){.slots{grid-template-columns:repeat(3,minmax(0,1fr))}}
.slot{position:relative}
.slot input{position:absolute;opacity:0;width:1px;height:1px}
.slot span{
  display:block;text-align:center;cursor:pointer;border-radius:12px;padding:.7rem .4rem;
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  font-family:var(--font-display);font-weight:700;font-size:.86rem;color:var(--brand-blue-dark);
  transition:background .18s ease,border-color .18s ease,transform .16s ease;
}
.slot span:hover{background:rgba(31,95,168,.10);transform:translateY(-2px)}
.slot input:checked + span{background:var(--brand-yellow);border-color:var(--brand-yellow-dark)}
/* Today's windows that are already too close to schedule. */
.slot input:disabled + span{opacity:.4;cursor:not-allowed;text-decoration:line-through;transform:none;background:transparent}
.slot input:focus-visible + span{outline:3px solid var(--brand-blue);outline-offset:3px}

/* ============================================================
   BOOKING SUMMARY
   ============================================================ */
@media (min-width:1000px){
  .book__grid{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--s6);align-items:start}
  .book__aside{position:sticky;top:130px}
}
.book__grid>*{min-width:0}
.sum{
  border-radius:var(--radius-card);padding:1.6rem 1.5rem;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
}
.sum h3{font-size:1.12rem;color:var(--brand-blue-dark)}
.sum__rows{margin-top:1rem}
.sum__row{
  display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px dashed rgba(13,59,102,.14);font-size:.93rem;
}
.sum__row:last-child{border-bottom:0}
.sum__row dt{color:var(--muted)}
.sum__row dd{margin:0;font-family:var(--font-display);font-weight:700;color:var(--brand-blue-dark);text-align:right}
.sum__total{
  margin-top:1.2rem;padding-top:1.1rem;border-top:2px solid rgba(13,59,102,.12);
}
.sum__total p:first-child{
  font-family:var(--font-display);font-weight:800;font-size:.72rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--brand-blue);
}
.sum__amount{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(1.9rem,4.4vw,2.4rem);line-height:1.05;color:var(--brand-blue-dark);margin-top:.4rem;
}
.sum__note{margin-top:.7rem;font-size:.83rem;color:var(--muted);line-height:1.55}
.sum .btn{margin-top:1.3rem}

/* Confirmation panel */
.done{
  border-radius:var(--radius-card);padding:2rem 1.7rem;text-align:center;
  background:linear-gradient(150deg,rgba(255,214,51,.18),var(--glass-bg) 62%);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,214,51,.5);
  box-shadow:var(--glass-shadow);
}
.done__ic{
  width:60px;height:60px;border-radius:50%;margin:0 auto 1.1rem;display:grid;place-items:center;
  background:var(--brand-yellow);box-shadow:0 12px 26px rgba(255,214,51,.45);
}
.done__ic svg{width:28px;height:28px;color:var(--brand-blue-dark)}
.done h3{font-size:1.45rem;color:var(--brand-blue-dark)}
.done > p{color:var(--muted);margin-top:.7rem;max-width:46ch;margin-inline:auto}
.done__cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.5rem}
.done[hidden]{display:none}

/* The panel is reused for both outcomes and the script toggles these two
   classes, but neither existed, so a failure showed the success checkmark on a
   yellow disc above the words "That did not send." */
.done--fallback{
  background:linear-gradient(150deg,rgba(192,57,43,.12),var(--glass-bg) 62%);
  border-color:rgba(192,57,43,.45);
}
.done--fallback .done__ic{
  background:#C0392B;box-shadow:0 12px 26px rgba(192,57,43,.35);
}
/* A rotated checkmark is still a checkmark, so hide it and draw a mark that
   reads as "something went wrong" at a glance. */
.done--fallback .done__ic svg{display:none}
.done--fallback .done__ic::before{
  content:"!";color:#fff;font-family:var(--font-display);font-weight:800;font-size:2rem;line-height:1;
}
.done--fallback h3{color:#8E2A20}
.done:focus{outline:none}
.done:focus-visible{outline:3px solid var(--brand-blue);outline-offset:4px}

/* ============================================================
   FAQ FILTER CHIPS
   ============================================================ */
.chipbar{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s5)}
.chipbtn{
  cursor:pointer;border-radius:999px;padding:.6rem 1.05rem;
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-sm);
  font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--brand-blue-dark);
  transition:background .2s ease,border-color .2s ease,transform .18s ease,box-shadow .2s ease;
}
.chipbtn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.chipbtn[aria-pressed="true"]{
  background:linear-gradient(150deg,var(--brand-yellow),var(--brand-yellow-dark));
  border-color:var(--brand-yellow-dark);box-shadow:0 8px 20px rgba(255,214,51,.4);
}
.faq__group{margin-top:var(--s5)}
.faq__group[hidden]{display:none}
.faq__grouph{
  display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;
  font-family:var(--font-display);font-weight:800;font-size:.74rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--brand-blue);
}
.faq__grouph::after{content:"";flex:1;height:1px;background:rgba(13,59,102,.12)}
.faq__none{margin-top:var(--s5);color:var(--muted)}
.faq__none[hidden]{display:none}


/* ============================================================
   SERVICE AREA DIRECTORY
   ============================================================ */
.grouph{
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;
  font-family:var(--font-display);font-weight:800;font-size:.74rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--brand-blue);
}
.grouph::after{content:"";flex:1;height:1px;background:rgba(13,59,102,.12)}
.agroup + .agroup{margin-top:var(--s6)}

.acities{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:.85rem}
@media (min-width:560px){.acities{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.acities{grid-template-columns:repeat(3,minmax(0,1fr))}}
.acities > *{min-width:0}
.acity{
  display:flex;align-items:center;gap:.9rem;min-width:0;text-decoration:none;
  padding:1rem 1.1rem;border-radius:16px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-sm);
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease,
             border-color .22s ease, background .22s ease, color .22s ease;
}
.acity__pin{
  width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:rgba(31,95,168,.10);transition:background .22s ease;
}
.acity__pin svg{width:20px;height:20px;color:var(--brand-blue);transition:color .22s ease}
.acity__txt{min-width:0}
.acity b{
  display:block;font-family:var(--font-display);font-weight:800;font-size:1.03rem;
  letter-spacing:-.02em;color:var(--brand-blue-dark);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .22s ease;
}
.acity__txt > span{
  display:block;margin-top:.12rem;font-size:.85rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .22s ease;
}
.acity__go{
  margin-left:auto;flex:none;width:17px;height:17px;color:var(--brand-blue);
  transition:transform .22s ease, color .22s ease;
}
.acity:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-md);
  background:var(--brand-blue);border-color:var(--brand-blue);
}
.acity:hover b,.acity:hover .acity__txt > span{color:#fff}
.acity:hover .acity__txt > span{opacity:.82}
.acity:hover .acity__pin{background:rgba(255,255,255,.18)}
.acity:hover .acity__pin svg,.acity:hover .acity__go{color:var(--brand-yellow)}
.acity:hover .acity__go{transform:translateX(4px)}
.acity--lead{
  border-color:rgba(255,214,51,.6);
  background:linear-gradient(150deg,rgba(255,214,51,.20),var(--glass-bg) 62%);
}
.acity--lead .acity__pin{background:rgba(255,214,51,.4)}
.acity--lead .acity__pin svg{color:var(--brand-blue-dark)}

/* let the decorative map fill a media column like a photo would */
@media (min-width:900px){
  .local__media > .mapcard{flex:1;aspect-ratio:auto;min-height:430px}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:560px){
  .trust .wrap{grid-template-columns:repeat(3,1fr)}
  .items__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brand__txt{display:block}
}
@media (min-width:768px){
  body{font-size:17.5px}
  .section{padding-block:var(--s9)}
  .steps{grid-template-columns:repeat(3,1fr);gap:1.8rem}
  /* Dashed run behind the badges, drawn left to right as the row reveals. */
  .steps::before{
    content:"";position:absolute;left:12%;right:12%;top:2px;height:2px;z-index:0;
    background:repeating-linear-gradient(90deg,rgba(31,95,168,.45) 0 10px,transparent 10px 20px);
    transform:scaleX(0);transform-origin:left;
  }
  .js .steps.is-in::before{transform:scaleX(1);transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .15s}
  /* Equal columns: the three service cards must be identical in width
     so their fixed-height images read as one clean row. */
  .choose__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dump__grid,.eco__grid,.areas__grid{grid-template-columns:1fr 1fr}
  .items__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .qband .wrap{grid-template-columns:1.2fr auto}
  .foot__grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media (min-width:1000px){
  .trust .wrap{grid-template-columns:repeat(5,1fr)}
  .hero__grid{grid-template-columns:55fr 45fr;gap:var(--s7)}
  .why__grid{grid-template-columns:.82fr 1.18fr;gap:var(--s7)}
  .why__sticky{position:sticky;top:130px}
  .foot__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}
}
/* Switch to the full desktop bar only once it genuinely fits. */
@media (min-width:1150px){
  .nav,.nav-cta{display:flex}
  .burger{display:none}
  .dock{display:none}
  .navbar .brand__txt{display:none}      /* the logo already says it */
  .nav-cta .btn--outline{display:none}   /* phone lives in the utility bar */
}
@media (min-width:1300px){
  .nav-cta .btn--outline{display:inline-flex}
}
@media (max-width:1149px){
  body{padding-bottom:76px}
}
@media (max-width:520px){
  .hero__shape{display:none}
  .floatcard--a{left:8px;top:8px}
  .floatcard--b{right:8px;bottom:8px}
  .btn{width:100%}
  .hero__cta .btn,.final__cta .btn,.qband__act .btn{width:100%}
  .dock .btn{width:100%}
  .uses{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .reveal,.js .stagger > *{opacity:1;transform:none;filter:none}
  .progress i{transform:scaleX(0)!important}
}