/* ==========================================================================
   Absolute Prestige Cleaning — site stylesheet
   Palette lifted from the existing brand: cyan #11B4F5 on deep teal #06425A.
   NOTE: all @media blocks live at the END of this file. Keep it that way —
   a media query placed above a later same-specificity rule silently no-ops.
   ========================================================================== */

:root{
  --brand:#11B4F5;
  --brand-dark:#0d95cc;
  --brand-tint:#CFEBF7;
  --brand-wash:#11B4F514;
  --accent:#06425A;
  --ink:#011218;
  --ink-2:#021F2A;
  --body:#5b6b73;
  --muted:#909090;
  --line:#dce5e9;
  --bg:#ffffff;
  --bg-soft:#f5fafd;
  --white:#ffffff;

  --radius:16px;
  --radius-lg:24px;
  --radius-sm:10px;
  --shadow-sm:0 2px 10px rgba(1,18,24,.06);
  --shadow:0 12px 34px rgba(1,18,24,.10);
  --shadow-lg:0 26px 64px rgba(1,18,24,.16);
  --ring:0 0 0 4px rgba(17,180,245,.28);

  --wrap:1200px;
  --gut:24px;
  --sect:96px;

  /* Topbar + header overlay the hero, so the hero must know their combined
     height to pad its content clear of them. Kept in sync in the media
     queries at the foot of this file. */
  --topbar-h:44px;
  --hdr-h:84px;
  --top-h:128px;
  /* The bars round to fractional heights (font metrics, zoom, DPI), so an
     exact pull-up leaves a sub-pixel seam of body colour at the very top.
     Over-pull by this much and add it straight back as padding: the dark hero
     simply slides further under the transparent chrome, content never moves. */
  --top-slack:4px;

  /* Outfit throughout — headings and body both. */
  --f-head:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* No scroll-behavior:smooth here — it breaks programmatic carousel scrolling. */
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--f-body);font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4,h5{font-family:var(--f-head);color:var(--ink);margin:0 0 .5em;line-height:1.14;font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,5vw,3.7rem)}
h2{font-size:clamp(1.85rem,3.4vw,2.65rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sect{padding-block:var(--sect)}
.sect--tight{padding-block:64px}
.sect--soft{background:var(--bg-soft)}
.sect--dark{background:var(--ink);color:#b9cdd6}
.sect--dark h2,.sect--dark h3{color:#fff}

.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#00222e;padding:12px 20px;z-index:999;font-weight:700;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- Eyebrow / headings ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-head);font-weight:600;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--brand);border-radius:2px}
.sect--dark .eyebrow{color:var(--brand)}
.lede{font-size:1.06rem;color:var(--body);max-width:62ch}
.sect--dark .lede{color:#9fb6c0}
.head-c{text-align:center}
.head-c .lede{margin-inline:auto}
.head-c .eyebrow{justify-content:center}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-head);font-weight:600;font-size:1rem;letter-spacing:.005em;
  padding:15px 30px;border-radius:100px;border:2px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
  text-align:center;line-height:1.2;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:19px;height:19px;flex:none}
.btn--primary{background:var(--brand);color:#00222e;box-shadow:0 8px 20px rgba(1,18,24,.28)}
.btn--primary:hover{background:#2ec0ff;box-shadow:0 14px 28px rgba(1,18,24,.38)}
.btn--dark{background:var(--accent);color:#fff}
.btn--dark:hover{background:#075977}
.btn--ghost{border-color:rgba(255,255,255,.34);color:#fff}
.btn--ghost:hover{border-color:var(--brand);background:var(--brand);color:#00222e}
.btn--outline{border-color:var(--line);color:var(--ink);background:#fff}
.btn--outline:hover{border-color:var(--brand);color:var(--brand)}
.btn--wide{width:100%}
.btn--lg{padding:clamp(12px,1.7vh,15px) 32px;font-size:1.01rem}

/* ---------- Call button ----------
   Icon promoted into a circular chip, small uppercase label over a large
   number, solid fill with depth. A flat rect + tiny caps + inline icon is the
   combination that reads as cheap, so this pattern is used for every call CTA. */

/* ---------- Top bar ---------- */
.topbar{position:relative;z-index:61;background:transparent;color:#9fb8c2;font-size:.87rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:44px}
.topbar a{color:#cfe8f3;font-weight:500}
.topbar a:hover{color:var(--brand)}
.topbar__list{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.topbar__item{display:inline-flex;align-items:center;gap:8px}
.topbar__item svg{width:15px;height:15px;color:var(--brand);flex:none}

/* ---------- Header ----------
   Dark on purpose. The client's wordmark is near-white artwork on transparent
   (avg RGB ~195,219,247), so on a white bar everything except the swirl icon
   disappears. It was drawn for a dark ground — give it one. This also lets the
   topbar, header and hero read as a single dark block. */
.hdr{
  position:sticky;top:0;z-index:60;background:transparent;
  border-bottom:1px solid transparent;
  transition:background .28s ease,box-shadow .28s ease,border-color .28s ease;
}
/* Only once it detaches from the hero does it need its own surface. */
.hdr.is-stuck{
  background:rgba(1,18,24,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:rgba(255,255,255,.10);
  box-shadow:0 8px 30px rgba(1,18,24,.46);
}
.hdr__in{display:flex;align-items:center;gap:26px;min-height:var(--hdr-h)}
/* Equal-width flanks make the nav sit optically centred in the bar. */
.brand{display:flex;align-items:center;gap:12px;flex:1 1 0;min-width:0}
.brand img{height:56px;width:auto}
.nav{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.nav a{
  font-family:var(--f-head);font-weight:500;color:#dcebf2;
  padding:10px 15px;border-radius:100px;font-size:1rem;
  transition:color .18s ease,background .18s ease;position:relative;
}
.nav a:hover{color:var(--brand);background:rgba(17,180,245,.12)}
.nav a[aria-current="page"]{color:var(--brand);background:rgba(17,180,245,.16);font-weight:600}
.hdr__cta{display:flex;align-items:center;gap:12px;flex:1 1 0;justify-content:flex-end}

/* ---- Animated header call icon ----
   One 3.2s loop: the handset gives a short ring, then the two signal arcs
   broadcast outwards in turn. Only transform + opacity animate. The resting
   style is the complete icon, so with animation off nothing is missing. */
.hdr__cta .btn--primary svg{overflow:visible}
.hdr__cta .btn--primary .ic-handset{transform-box:fill-box;transform-origin:50% 50%;animation:callRing 3.2s ease-in-out infinite}
.hdr__cta .btn--primary .ic-arc{animation:callArc 3.2s ease-out infinite}
.hdr__cta .btn--primary .ic-arc--2{animation-delay:.14s}
@keyframes callRing{
  0%,34%,100%{transform:rotate(0)}
  4%{transform:rotate(-15deg)}
  8%{transform:rotate(13deg)}
  12%{transform:rotate(-11deg)}
  16%{transform:rotate(9deg)}
  20%{transform:rotate(-6deg)}
  24%{transform:rotate(4deg)}
  28%{transform:rotate(-2deg)}
}
@keyframes callPulse{
  0%,6%{opacity:0;transform:scale(1)}
  12%{opacity:.85}
  60%,100%{opacity:0;transform:scale(1.38)}
}
@keyframes callArc{
  0%,4%{opacity:0}
  16%,52%{opacity:1}
  70%,100%{opacity:0}
}

/* dropdown */
.has-sub{position:relative}
.has-sub>a::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);display:inline-block;margin-left:7px}
.sub{
  position:absolute;top:calc(100% + 10px);left:0;min-width:262px;background:var(--ink-2);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:10px 14px;border-radius:9px;font-size:.96rem;font-weight:500;color:#dcebf2}
.sub a:hover{background:rgba(17,180,245,.14);color:var(--brand)}

/* ---- Mobile menu button ----
   Frosted rounded square; three right-aligned strokes of different lengths with
   the middle one in brand cyan. They even out on hover. */
.burger{
  display:none;position:relative;flex:none;width:46px;height:46px;border-radius:14px;cursor:pointer;
  align-items:center;justify-content:center;padding:0;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px rgba(0,0,0,.28);
  transition:border-color .25s ease,box-shadow .25s ease,transform .2s ease;
}
.burger:hover,.burger:focus-visible{
  outline:none;border-color:rgba(17,180,245,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 4px rgba(17,180,245,.16),0 10px 26px rgba(0,0,0,.32);
}
.burger:active{transform:scale(.95)}
.burger__lines{position:relative;display:block;width:22px;height:14px}
.burger__lines i{position:absolute;right:0;height:2px;border-radius:2px;background:#fff;transition:width .35s cubic-bezier(.22,1,.36,1)}
.burger__lines i:nth-child(1){top:0;width:22px}
.burger__lines i:nth-child(2){top:6px;width:12px;background:var(--brand);box-shadow:0 0 8px rgba(17,180,245,.7)}
.burger__lines i:nth-child(3){top:12px;width:17px}
.burger:hover .burger__lines i,.burger:focus-visible .burger__lines i{width:22px}

/* ---- Mobile menu drawer (right side) ----
   Closed: off-canvas, `visibility:hidden` after the slide, and `inert` in the DOM.
   Open: visible immediately, so it never depends on a transition completing. */
.drawer{display:none}
html.is-locked,html.is-locked body{overflow:hidden}
.drawer__scrim{
  position:fixed;inset:0;z-index:90;background:rgba(0,8,11,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s;
}
.drawer__panel{
  position:fixed;top:0;right:0;bottom:0;z-index:91;width:min(88vw,400px);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(18px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
  background:
    radial-gradient(440px 320px at 100% 0%,rgba(17,180,245,.2),transparent 70%),
    radial-gradient(360px 300px at 0% 100%,rgba(6,66,90,.55),transparent 70%),
    linear-gradient(180deg,#02202c,#011218 60%);
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-30px 0 80px rgba(0,0,0,.55);
  transform:translate3d(104%,0,0);visibility:hidden;
  transition:transform .55s cubic-bezier(.22,1,.36,1),visibility 0s linear .55s;
}
.drawer.is-open .drawer__scrim{opacity:1;visibility:visible;transition:opacity .4s ease}
.drawer.is-open .drawer__panel{transform:none;visibility:visible;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.drawer__panel::before{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:linear-gradient(180deg,transparent,rgba(17,180,245,.55),transparent)}

.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer__brand img{display:block;height:44px;width:auto}
.drawer__close{
  width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0;
  color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .25s ease,background .25s ease;
}
.drawer__close:hover,.drawer__close:focus-visible{outline:none;transform:rotate(90deg);border-color:rgba(17,180,245,.65);background:rgba(17,180,245,.14)}
.drawer__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}

.drawer__label{
  display:flex;align-items:center;gap:12px;margin:22px 0 4px;
  font-family:var(--f-head);font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--brand);
}
.drawer__label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(17,180,245,.45),transparent)}

.drawer__nav{display:flex;flex-direction:column}
.drawer__item{
  display:flex;align-items:center;gap:14px;width:100%;margin:0;padding:15px 2px;cursor:pointer;
  border:0;border-bottom:1px solid rgba(255,255,255,.07);background:none;border-radius:0;
  font-family:var(--f-head);font-size:1.36rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;
  color:#fff;text-align:left;text-decoration:none;
  transition:color .2s ease,padding-left .35s cubic-bezier(.22,1,.36,1);
}
.drawer__num{flex:none;width:26px;font-size:.7rem;font-weight:600;letter-spacing:.08em;color:rgba(17,180,245,.8);font-variant-numeric:tabular-nums}
.drawer__txt{flex:1;min-width:0}
.drawer__go{width:18px;height:18px;flex:none;color:rgba(255,255,255,.35);transition:transform .35s cubic-bezier(.22,1,.36,1),color .2s ease}
.drawer__item:hover,.drawer__item:focus-visible{outline:none;color:var(--brand);padding-left:8px}
.drawer__item:hover .drawer__go,.drawer__item:focus-visible .drawer__go{color:var(--brand)}
a.drawer__item:hover .drawer__go{transform:translateX(3px)}
.drawer__item[aria-current="page"],.drawer__item[data-current]{color:var(--brand)}
.drawer__item[aria-current="page"] .drawer__txt::after,.drawer__item[data-current] .drawer__txt::after{
  content:"";display:inline-block;width:6px;height:6px;margin-left:10px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 10px var(--brand);vertical-align:middle;
}
.drawer__item[aria-expanded="true"]{color:var(--brand)}
.drawer__item[aria-expanded="true"] .drawer__go{transform:rotate(180deg);color:var(--brand)}

/* Services accordion: animates height with grid rows; collapsed links are
   visibility:hidden so they cannot be tabbed to. */
.drawer__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1)}
.drawer__subwrap{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear .4s}
.drawer__sub.is-open{grid-template-rows:1fr}
.drawer__sub.is-open .drawer__subwrap{visibility:visible;transition:none}
.drawer__subin{padding:6px 0 12px;border-bottom:1px solid rgba(255,255,255,.07)}
.drawer__subin a{display:flex;align-items:center;gap:12px;padding:9px 0 9px 40px;font-size:.98rem;color:#b4cad3;text-decoration:none;transition:color .2s ease}
.drawer__subin a::before{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:rgba(17,180,245,.65)}
.drawer__subin a:hover{color:#fff}

.drawer__cta{display:grid;gap:10px;margin-top:24px}
.drawer__cta .btn{width:100%}
.drawer__meta{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
.drawer__meta li,.drawer__meta a{display:flex;align-items:center;gap:11px;min-width:0;font-size:.88rem;color:#9fb8c2;text-decoration:none}
.drawer__meta span{min-width:0;overflow-wrap:anywhere}
.drawer__meta a:hover{color:#fff}
.drawer__meta svg{width:16px;height:16px;flex:none;color:var(--brand)}
.drawer__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:22px;border-top:1px solid rgba(255,255,255,.07);
  font-size:.76rem;color:#6f8e99;
}
.drawer__meta+.drawer__foot{margin-top:max(24px,auto)}
.drawer__social{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);transition:border-color .2s ease,background .2s ease}
.drawer__social:hover{border-color:rgba(17,180,245,.6);background:rgba(17,180,245,.14)}
.drawer__social svg{width:16px;height:16px}

/* Staggered entrance. `backwards` fill: the resting (visible) state is the
   default, the hidden start frame only exists while the animation plays. */
@keyframes drIn{from{opacity:0;transform:translate3d(24px,0,0)}}
.drawer.is-open .drawer__label,
.drawer.is-open .drawer__nav>.drawer__item,
.drawer.is-open .drawer__cta>*,
.drawer.is-open .drawer__meta{animation:drIn .6s cubic-bezier(.22,1,.36,1) backwards}
.drawer.is-open .drawer__label{animation-delay:.1s}
.drawer.is-open .drawer__nav>.drawer__item:nth-of-type(1){animation-delay:.14s}
.drawer.is-open .drawer__nav>.drawer__item:nth-of-type(2){animation-delay:.19s}
.drawer.is-open .drawer__nav>.drawer__item:nth-of-type(3){animation-delay:.24s}
.drawer.is-open .drawer__nav>.drawer__item:nth-of-type(4){animation-delay:.29s}
.drawer.is-open .drawer__nav>.drawer__item:nth-of-type(5){animation-delay:.34s}
.drawer.is-open .drawer__nav>.drawer__item:nth-of-type(6){animation-delay:.39s}
.drawer.is-open .drawer__cta>*:nth-child(1){animation-delay:.44s}
.drawer.is-open .drawer__cta>*:nth-child(2){animation-delay:.49s}
.drawer.is-open .drawer__meta{animation-delay:.54s}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:var(--ink);color:#c2d7df;overflow:hidden;
  /* Rise behind the transparent topbar+header so there is no seam, then pad
     the content back clear of them. */
  margin-top:calc((var(--top-h) + var(--top-slack)) * -1);
  /* Breathing room scales with viewport HEIGHT so the whole banner fits the
     fold on a short laptop without looking starved on a tall monitor. The
     chrome clearance is a fixed floor the clamp is added to, never eaten. */
  padding-block:calc(var(--top-h) + var(--top-slack) + clamp(8px,2.6vh,36px))
                clamp(24px,4vh,64px);
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
}
.hero>.wrap{width:100%}
/* Photo layer, then a scrim, then the content. The scrim is heaviest on the
   left where the headline sits and eases off towards the centre so the nozzle
   and spray still read; the bottom fade blends into the dark section edge. */
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(1,18,24,.95) 0%,rgba(1,18,24,.88) 40%,rgba(1,18,24,.58) 64%,rgba(1,18,24,.64) 100%),
    linear-gradient(180deg,rgba(1,18,24,.55) 0%,rgba(1,18,24,0) 30%,rgba(1,18,24,0) 70%,rgba(1,18,24,.75) 100%);
}
.hero::before{z-index:1}
.hero>.wrap{position:relative;z-index:2}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 520px at 12% 8%,rgba(17,180,245,.20),transparent 62%),
    radial-gradient(700px 480px at 92% 92%,rgba(6,66,90,.62),transparent 66%);
  pointer-events:none;
}
.hero__grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,4vw,60px);align-items:center}
.hero h1{color:#fff;font-size:clamp(2.5125rem,2.5vw + 0.9625rem,3.7125rem);margin-bottom:.4em;letter-spacing:-.025em}
.hero h1 .hl{color:var(--brand)}
/* Explicit break keeps "Cleaners in Coventry" as one line on desktop; it is
   removed below 720px so the heading can wrap naturally on narrow screens. */
.hero h1 .h1-br{display:inline}
.hero__lede{font-size:1.06rem;color:#a8c2cc;max-width:50ch;margin-bottom:clamp(20px,2.8vh,28px)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:clamp(22px,3vh,32px)}
.hero__trust{display:flex;gap:clamp(30px,3.6vw,52px);flex-wrap:wrap;padding-top:clamp(22px,3vh,30px);border-top:1px solid rgba(255,255,255,.14)}
.hero__trust b{
  display:flex;align-items:flex-start;
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(2.3rem,1.4vw + 1.7rem,3rem);
  color:#fff;line-height:1;letter-spacing:-.038em;
  /* tabular figures keep the three stats optically aligned */
  font-variant-numeric:tabular-nums lining-nums;
}
/* the counter must not pick up the label styling further down */
.hero__trust b [data-count]{font-size:inherit;color:inherit;font-weight:inherit;letter-spacing:inherit}
/* the + and the star sit smaller and raised, in accent colour */
.hero__trust b i{
  font-style:normal;font-weight:600;font-size:.44em;line-height:1;
  color:var(--brand);margin-left:.07em;margin-top:.13em;letter-spacing:0;
}
.hero__trust b i.st{color:#ffc107;font-size:.42em;margin-left:.15em;margin-top:.15em}
.hero__trust>div>span{display:block;margin-top:9px;font-size:.88rem;color:#93aeb9}

/* stars */
.stars{display:inline-flex;gap:2px;color:#ffc107}
.stars svg{width:16px;height:16px}

/* ---------- Quote card ---------- */
.qcard{background:#fff;border-radius:var(--radius-lg);padding:clamp(22px,3vh,30px) 28px clamp(20px,2.6vh,26px);box-shadow:var(--shadow-lg);color:var(--body)}
.qcard h2{font-size:1.45rem;margin-bottom:4px}
.qcard h2 .hl{color:var(--brand)}
.qcard__sub{font-size:.87rem;color:var(--muted);margin-bottom:clamp(10px,1.8vh,16px);line-height:1.45}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.7vh,14px) 12px}
.field{display:flex;flex-direction:column;gap:5px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--f-head);font-weight:600;font-size:.81rem;color:var(--ink)}
.field .req{color:#e0453b}
.field input,.field select,.field textarea{
  width:100%;padding:clamp(10px,1.5vh,12px) 13px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;font-size:.93rem;color:var(--ink);background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field textarea{resize:vertical;min-height:clamp(44px,7vh,62px)}
/* Selects size from the UA's line-height:normal, so with the same padding they
   came out 4.3px shorter than the inputs beside them. Pin the line-height to
   match, and swap the cramped native arrow for a chevron with real breathing
   room on the right. */
.field select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  line-height:1.7;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23667f8a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
  cursor:pointer;
}
.field select::-ms-expand{display:none}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(17,180,245,.16)}
.field .err{font-size:.8rem;color:#e0453b;display:none}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#e0453b}
.field.is-bad .err{display:block}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.formnote{font-size:.76rem;color:var(--muted);margin-top:10px;text-align:center;line-height:1.5}
.formmsg{padding:14px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:.94rem;display:none}
.formmsg.ok{display:block;background:#e6f8ee;color:#12633c;border:1px solid #b6e6cc}
.formmsg.bad{display:block;background:#fdecea;color:#a3271d;border:1px solid #f5c4be}

/* ---------- Pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pillar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.pillar:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.pillar__ic{width:56px;height:56px;border-radius:15px;background:var(--brand-wash);color:var(--brand);display:grid;place-items:center;margin-bottom:18px}
.pillar__ic svg{width:27px;height:27px}
.pillar h3{font-size:1.12rem;margin-bottom:8px}
.pillar p{font-size:.94rem;color:var(--body);margin:0}

/* ---------- Split / about ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split--flip .split__media{order:2}
.split__media{position:relative}
.split__media img{border-radius:var(--radius-lg);width:100%;object-fit:cover}
.split--aside{grid-template-columns:minmax(0,1.45fr) minmax(320px,.95fr);gap:clamp(40px,5vw,72px);align-items:start}
.split--aside>.prose{max-width:none}
.split--aside>aside{position:sticky;top:calc(var(--hdr-h) + 24px)}
.badge{
  position:absolute;right:-16px;bottom:-16px;background:var(--brand);color:#00222e;
  border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);text-align:center;
}
.badge b{display:block;font-family:var(--f-head);font-size:2.3rem;line-height:1}
.badge span{font-size:.82rem;font-weight:600}
.ticks{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem}
.ticks svg{width:21px;height:21px;color:var(--brand);flex:none;margin-top:3px}

/* ---------- Services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.svc{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px 28px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.svc::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.svc:hover::after{transform:scaleX(1)}
.svc__ic{width:74px;height:74px;margin-bottom:20px;position:relative}
.svc__ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .28s ease}
.svc__ic .on{opacity:0}
.svc:hover .svc__ic .on{opacity:1}
.svc:hover .svc__ic .off{opacity:0}
.svc h3{margin-bottom:10px}
.svc h3 a::after{content:"";position:absolute;inset:0}
.svc p{font-size:.95rem;flex:1;margin-bottom:18px}
.svc__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:16px;border-top:1px solid var(--line)}
.svc__price{font-family:var(--f-head);font-weight:700;color:var(--ink);font-size:1rem}
.svc__price small{display:block;font-weight:500;color:var(--muted);font-size:.76rem}
.svc__more{font-family:var(--f-head);font-weight:600;color:var(--brand);font-size:.92rem;display:inline-flex;align-items:center;gap:6px}
.svc__more svg{width:15px;height:15px;transition:transform .2s ease}
.svc:hover .svc__more svg{transform:translateX(4px)}

/* ---------- Stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat b{display:block;font-family:var(--f-head);font-size:clamp(2.2rem,4vw,3.1rem);color:var(--brand);line-height:1;margin-bottom:6px}
.stat b [data-count]{font-size:inherit;color:inherit;font-weight:inherit}
.stat>span{font-size:.92rem;color:#9fb6c0}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 28px;position:relative}
.step__n{
  width:52px;height:52px;border-radius:50%;background:var(--brand);color:#00222e;
  display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:1.25rem;margin-bottom:18px;
}
.step h3{font-size:1.14rem}
.step p{font-size:.95rem;margin:0}

/* ---------- Reviews ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;gap:14px}
.rev__q{font-size:.99rem;color:var(--body);flex:1}
.rev__by{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.rev__av{
  width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#0b7fb3,var(--accent));color:#fff;
  font-family:var(--f-head);font-weight:700;font-size:.95rem;letter-spacing:.04em;
  box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(17,180,245,.35);
}
.rev__by b{display:block;font-family:var(--f-head);font-weight:600;color:var(--ink);font-size:1rem;line-height:1.25}
.rev__by>span:not(.rev__av)>span{display:block;margin-top:3px;font-size:.84rem;color:var(--muted);line-height:1.3}

/* ---------- CTA band ---------- */
.cta{position:relative;background:var(--accent);color:#cfe8f3;border-radius:var(--radius-lg);padding:56px 48px;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 380px at 88% 20%,rgba(17,180,245,.28),transparent 64%)}
.cta__in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.cta h2{color:#fff;margin-bottom:8px}
.cta h2 .hl{color:var(--brand)}
.cta p{margin:0;max-width:56ch}
.cta__btns{display:flex;gap:14px;flex-wrap:wrap;flex:none}

/* ---------- Page hero (inner pages) ---------- */
.phero{background:var(--ink);color:#a8c2cc;position:relative;overflow:hidden;margin-top:calc((var(--top-h) + var(--top-slack)) * -1);padding-block:calc(var(--top-h) + var(--top-slack) + 26px) 56px}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(760px 420px at 78% 12%,rgba(17,180,245,.20),transparent 64%)}
.phero__in{position:relative}
.phero h1{color:#fff;margin-bottom:10px}
.phero p{max-width:66ch;margin:0}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:.87rem;color:#7f9aa5;margin-bottom:14px}
.crumbs a{color:var(--brand)}
.crumbs a:hover{text-decoration:underline}
.crumbs li{list-style:none;display:inline-flex;gap:8px;align-items:center}
.crumbs li+li::before{content:"/";color:#4b6772}
.crumbs ol{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0}

/* ---------- Prose / answer blocks (GEO) ---------- */
.prose{max-width:74ch}
.prose h2{margin-top:1.9em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.5em;font-size:1.16rem}
.prose ul{padding-left:0;list-style:none;display:grid;gap:11px;margin:0 0 1.3em}
.prose ul li{position:relative;padding-left:21px}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--brand)}
/* The answer block is the unit AI Overviews lift. Keep it 40-60 words, directly
   under a question heading, and self-contained. */
.answer{
  background:var(--bg-soft);border-left:4px solid var(--brand);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:20px 24px;margin:0 0 1.4em;
  font-size:1.02rem;color:var(--ink);
}
.answer p{margin:0}

/* ---- Quick answer box (every page) ----
   Deliberately not a reveal-on-scroll element: it is the text answer engines
   and screen readers are pointed at, so it is visible from first paint. */
.qa-band{padding-block:clamp(36px,5vw,60px) 0}
.qa-band+.sect{padding-top:clamp(40px,5vw,64px)}
.qa{
  position:relative;max-width:900px;margin-inline:auto;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,34px) clamp(22px,3.4vw,40px) clamp(22px,3vw,32px) clamp(26px,3.8vw,44px);
  box-shadow:0 14px 34px rgba(1,18,24,.06);
}
.qa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--brand),var(--accent))}
.qa__tag{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;
  padding:5px 12px 5px 9px;border-radius:100px;background:var(--brand-wash);
  font-family:var(--f-head);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
}
.qa__tag svg{width:14px;height:14px;color:var(--brand)}
.qa__q{font-size:clamp(1.3rem,1vw + 1rem,1.7rem);line-height:1.25;margin:0 0 10px;color:var(--ink)}
.qa__a{margin:0;font-size:1.04rem;line-height:1.7;color:var(--body)}
.qa__facts{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px 10px}
.qa__facts li{
  display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;
  background:var(--bg-soft);border:1px solid var(--line);font-size:.86rem;font-weight:500;color:var(--ink);line-height:1.3;
}
.qa__facts svg{width:14px;height:14px;color:var(--brand);flex:none}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:82ch}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq details[open]{border-color:var(--brand);box-shadow:var(--shadow-sm)}
.faq summary{
  padding:20px 56px 20px 24px;font-family:var(--f-head);font-weight:600;color:var(--ink);
  font-size:1.04rem;cursor:pointer;position:relative;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__a{padding:0 24px 22px;font-size:.99rem}
.faq__a p{margin:0}

/* ---------- Key facts table (AI-liftable) ---------- */
.facts{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:.97rem}
.facts th,.facts td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.facts th{font-family:var(--f-head);color:var(--ink);font-weight:600;width:42%;background:var(--bg-soft)}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- Gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gal figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--bg-soft);aspect-ratio:1/1;position:relative}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gal figure:hover img{transform:scale(1.06)}

/* ---------- Areas ---------- */
.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.area-grid a{
  display:flex;align-items:center;gap:9px;padding:13px 16px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.93rem;
  font-weight:500;color:var(--ink);transition:border-color .18s ease,color .18s ease,transform .18s ease;
}
.area-grid a:hover{border-color:var(--brand);color:var(--brand);transform:translateX(3px)}
.area-grid svg{width:15px;height:15px;color:var(--brand);flex:none}

/* ---- Location page: "Booking" facts + "Nearby areas" as a pair of cards ---- */
.split--cards{align-items:stretch;gap:clamp(20px,2.4vw,28px)}
.panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,2.6vw,36px);box-shadow:0 10px 30px rgba(1,18,24,.05);
  display:flex;flex-direction:column;min-width:0;
}
.panel__eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-head);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.panel__eyebrow svg{width:15px;height:15px}
.panel h2{font-size:clamp(1.4rem,1vw + 1rem,1.75rem);line-height:1.2;margin:0 0 8px}
.panel__sub{font-size:.95rem;color:var(--muted);margin:0 0 22px}

/* facts as label/value rows — still a real <table> for crawlers and AI answers */
.facts--card{margin:0;font-size:.95rem}
.facts--card th,.facts--card td{padding:14px 0;border-bottom:1px solid var(--line);background:none}
.facts--card th{width:40%;font-family:var(--f-body);font-weight:500;color:var(--muted);padding-right:16px}
.facts--card td{font-family:var(--f-head);font-weight:600;color:var(--ink)}
.facts--card tr:last-child th,.facts--card tr:last-child td{border-bottom:0;padding-bottom:0}
.facts--card td a{color:var(--brand)}

/* nearby areas: tiles, with the "all areas" link as the closing tile */
.near-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:auto}
.near{
  display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;
  border:1px solid var(--line);background:var(--bg-soft);color:var(--ink);
  font-family:var(--f-head);font-weight:600;font-size:.96rem;line-height:1.25;
  transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.near__ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#fff;color:var(--brand);flex:none;box-shadow:0 0 0 1px var(--line)}
.near__ic svg{width:16px;height:16px}
.near__go{margin-left:auto;width:16px;height:16px;color:var(--muted);flex:none;transition:transform .18s ease,color .18s ease}
.near:hover{border-color:var(--brand);background:#fff;transform:translateY(-2px);box-shadow:0 10px 22px rgba(1,18,24,.08)}
.near:hover .near__go{color:var(--brand);transform:translateX(3px)}
.near--all{background:var(--accent);border-color:var(--accent);color:#fff}
.near--all .near__ic{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.near--all .near__go{color:#fff}
.near--all:hover{background:var(--ink);border-color:var(--ink)}
.near-grid .near--all:nth-child(odd){grid-column:1/-1}

/* ---- Location page: verified local data ---- */
.prose ul.local-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 1.4em}
.prose ul.local-list li{display:flex;flex-direction:column;gap:2px;padding:12px 14px 12px 36px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft)}
.prose ul.local-list li::before{left:15px;top:19px}
.local-list__name{font-family:var(--f-head);font-weight:600;color:var(--ink);line-height:1.3}
.local-list__meta{font-size:.84rem;color:var(--muted);line-height:1.35}
.prose ul.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.2em}
.prose ul.chips li{padding:6px 13px;border-radius:100px;background:var(--brand-wash);color:var(--accent);font-family:var(--f-head);font-weight:600;font-size:.88rem;line-height:1.3}
.prose ul.chips li::before{display:none}
.local-src{font-size:.78rem;color:var(--muted);margin-top:.4em}
.near__txt{display:flex;flex-direction:column;min-width:0}
.near__txt small{margin-top:2px;font-family:var(--f-body);font-weight:400;font-size:.76rem;color:var(--muted)}

/* ---- Thank-you page ----
   The seal and tick are drawn with CSS animation, but their RESTING state is
   fully drawn: if animations never run (reduced motion, a non-compositing
   viewer) the check is still there. `backwards` fill only applies the hidden
   start frame while the animation is actually playing. */
.ty{
  position:relative;overflow:hidden;color:#c2d7df;
  background:radial-gradient(1100px 560px at 50% -8%,rgba(17,180,245,.2),transparent 62%),var(--ink);
  margin-top:calc((var(--top-h) + var(--top-slack)) * -1);
  padding-block:calc(var(--top-h) + var(--top-slack) + clamp(28px,6vh,72px)) clamp(56px,8vh,100px);
  min-height:100vh;min-height:100svh;
}
.ty__orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none}
.ty__orb--a{width:420px;height:420px;left:-140px;top:16%;background:radial-gradient(circle,rgba(17,180,245,.45),transparent 70%);animation:tyFloat 14s ease-in-out infinite}
.ty__orb--b{width:540px;height:540px;right:-180px;bottom:-140px;background:radial-gradient(circle,rgba(6,66,90,.95),transparent 70%);animation:tyFloat 18s ease-in-out infinite reverse}
@keyframes tyFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(26px,-20px,0)}}
.ty__in{position:relative;z-index:1;display:grid;justify-items:center;gap:clamp(30px,4.5vw,52px)}
.ty__card{
  position:relative;width:min(780px,100%);text-align:center;
  padding:clamp(34px,5vw,58px) clamp(22px,5vw,62px);border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 40px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
}
.ty__card::before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,rgba(17,180,245,.9),transparent)}
.ty__seal{
  width:96px;height:96px;margin:0 auto 24px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(17,180,245,.3),rgba(17,180,245,.06) 70%);
  box-shadow:0 0 0 10px rgba(17,180,245,.06),0 0 64px rgba(17,180,245,.38);
}
.ty__seal svg{width:96px;height:96px;display:block;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ty__ring{stroke:#11b4f5;stroke-width:3;stroke-dasharray:277;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50% 50%;animation:tyRing .95s cubic-bezier(.65,0,.35,1) .15s backwards}
.ty__tick{stroke:#fff;stroke-width:5;stroke-dasharray:60;stroke-dashoffset:0;animation:tyTick .5s cubic-bezier(.65,0,.35,1) .9s backwards}
@keyframes tyRing{from{stroke-dashoffset:277}}
@keyframes tyTick{from{stroke-dashoffset:60}}
.ty__eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:12px;font-family:var(--f-head);font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brand)}
.ty__eyebrow::before,.ty__eyebrow::after{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--brand))}
.ty__eyebrow::after{transform:scaleX(-1)}
.ty h1{color:#fff;font-size:clamp(2.5rem,4.4vw,3.7rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 14px}
.ty h1 em{font-style:normal;color:var(--brand)}
.ty__lede{max-width:54ch;margin:0 auto;font-size:1.08rem;line-height:1.7;color:#b4cad3}
.ty__lede b{color:#fff;font-weight:600}
.ty__ref{display:inline-flex;align-items:center;gap:8px;margin:22px 0 0;padding:8px 16px;border-radius:100px;border:1px dashed rgba(255,255,255,.24);font-size:.84rem;color:#9fb8c2}
.ty__ref b{font-family:var(--f-head);color:#fff;letter-spacing:.06em}
.ty__steps{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.ty__steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 10px;text-align:center}
.ty__steps li+li::before{content:"";position:absolute;top:21px;left:calc(-50% + 30px);right:calc(50% + 30px);height:2px;background:linear-gradient(90deg,rgba(17,180,245,.75),rgba(255,255,255,.14))}
.ty__dot{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-head);font-weight:700;color:#dcebf2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18)}
.ty__dot svg{width:20px;height:20px}
.ty__steps .is-done .ty__dot{background:var(--brand);border-color:var(--brand);color:#00222e;box-shadow:0 0 0 6px rgba(17,180,245,.15)}
.ty__steps .is-now .ty__dot{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 6px rgba(17,180,245,.1);animation:tyPulse 2.4s ease-in-out infinite}
@keyframes tyPulse{0%,100%{box-shadow:0 0 0 6px rgba(17,180,245,.1)}50%{box-shadow:0 0 0 13px rgba(17,180,245,.02)}}
.ty__txt b{display:block;font-family:var(--f-head);font-size:1rem;color:#fff}
.ty__txt span{display:block;margin-top:3px;font-size:.86rem;line-height:1.5;color:#93aeb9}
.ty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.ty__hours{margin:18px 0 0;font-size:.84rem;color:#86a3ae}
.ty__prep{width:min(1100px,100%)}
.ty__prep h2{margin:0 0 20px;text-align:center;color:#fff;font-size:clamp(1.3rem,1.2vw + 1rem,1.7rem)}
.ty__tips{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ty__tip{padding:22px 20px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);transition:transform .25s ease,border-color .25s ease,background .25s ease}
.ty__tip:hover{transform:translateY(-3px);border-color:rgba(17,180,245,.4);background:rgba(255,255,255,.06)}
.ty__tip-ic{width:40px;height:40px;margin-bottom:14px;border-radius:12px;display:grid;place-items:center;background:rgba(17,180,245,.12);color:var(--brand)}
.ty__tip-ic svg{width:20px;height:20px}
.ty__tip h3{margin:0 0 6px;font-size:1rem;color:#fff}
.ty__tip p{margin:0;font-size:.88rem;line-height:1.55;color:#9fb8c2}

/* ---- Home: prices card ---- */
.panel .answer--flat{margin:6px 0 18px;font-size:.95rem}
.price-list{width:100%;border-collapse:collapse}
.price-list th,.price-list td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.price-list tr:last-child th,.price-list tr:last-child td{border-bottom:0}
.price-list th{text-align:left;font-weight:inherit}
.price-list th a{display:flex;align-items:center;gap:13px;color:var(--ink)}
.price-list th img{width:40px;height:40px;flex:none;padding:6px;border-radius:12px;background:var(--bg-soft);box-shadow:0 0 0 1px var(--line);object-fit:contain;transition:background .18s ease}
.price-list th span{font-family:var(--f-head);font-weight:600;font-size:.98rem;line-height:1.25}
.price-list th small{display:block;margin-top:3px;font-family:var(--f-body);font-weight:400;font-size:.8rem;color:var(--muted)}
.price-list th a:hover span{color:var(--brand)}
.price-list th a:hover img{background:var(--brand-wash)}
.price-list td{text-align:right;white-space:nowrap;padding-left:14px;font-family:var(--f-head);font-weight:700;font-size:1.3rem;color:var(--ink);letter-spacing:-.01em;line-height:1.1}
.price-list td small{display:block;font-family:var(--f-body);font-weight:400;font-size:.74rem;color:var(--muted);letter-spacing:0}
.price-list td small:first-child{margin-bottom:2px;text-transform:uppercase;letter-spacing:.1em;font-size:.64rem}
.price-list__q{font-size:1rem;color:var(--brand)}
.panel__foot{margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--line);font-size:.84rem;color:var(--muted)}
.panel__foot a{color:var(--brand);font-weight:600}

/* ---------- Contact ---------- */
.cinfo{display:grid;gap:16px}
.cinfo__row{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.cinfo__ic{width:48px;height:48px;border-radius:13px;background:var(--brand-wash);color:var(--brand);display:grid;place-items:center;flex:none}
.cinfo__ic svg{width:22px;height:22px}
.cinfo__row h3{font-size:1.02rem;margin-bottom:3px}
.cinfo__row p,.cinfo__row a{margin:0;font-size:.97rem}
.cinfo__row a:hover{color:var(--brand)}
.map{border:0;width:100%;height:380px;border-radius:var(--radius-lg);display:block}

/* ---------- Footer ---------- */
.ftr{background:var(--ink);color:#8fa9b3;padding-block:72px 0;font-size:.95rem}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px}
.ftr .ftr-h{font-family:var(--f-head);color:#fff;font-size:1.05rem;margin:0 0 18px;font-weight:600}
.ftr a{color:#8fa9b3}
.ftr a:hover{color:var(--brand)}
.ftr__logo{height:52px;width:auto;margin-bottom:18px}
.ftr__list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ftr__row{display:flex;gap:11px;align-items:flex-start}
.ftr__row svg{width:17px;height:17px;color:var(--brand);flex:none;margin-top:4px}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:background .18s ease,transform .18s ease}
.social a:hover{background:var(--brand);transform:translateY(-2px)}
.social svg{width:17px;height:17px;color:#fff}
.ftr__hours{display:grid;gap:7px}
.ftr__hours div{display:flex;justify-content:space-between;gap:14px}
.ftr__bot{margin-top:56px;border-top:1px solid rgba(255,255,255,.1);padding-block:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.87rem}

/* ---------- Sticky mobile call bar ---------- */

/* ---------- Reveal (must never gate content) ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hdr__cta .btn--primary .ic-handset,.hdr__cta .btn--primary .ic-arc,.hdr__cta .btn--primary::before,.hdr__cta .btn--primary::after{animation:none}
  .drawer__scrim,.drawer__panel,.drawer__sub,.drawer__subwrap,.burger__lines i{transition:none}
  .drawer.is-open .drawer__label,.drawer.is-open .drawer__nav>.drawer__item,.drawer.is-open .drawer__cta>*,.drawer.is-open .drawer__meta{animation:none}
  .ty__orb,.ty__ring,.ty__tick,.ty__steps .is-now .ty__dot{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   RESPONSIVE — all media queries live below this line.
   ========================================================================== */
@media (max-width:1080px){
  :root{--sect:76px}
  .hero__grid{grid-template-columns:1fr;gap:36px}
  .hero{padding-block:calc(var(--top-h) + var(--top-slack) + 30px) 56px}
  .hero h1{font-size:clamp(2.3125rem,5vw,3.0125rem)}
  .ty__tips{grid-template-columns:1fr 1fr}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .area-grid{grid-template-columns:repeat(3,1fr)}
  .ftr__grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:900px){
  /* Keep --top-h in step with the real header height or the hero pads wrong. */
  :root{--hdr-h:70px;--top-h:114px}
  .nav,.hdr__cta .btn--dark{display:none}
  .burger{display:flex}
  .brand img{height:48px}
  .drawer{display:block}
  .split{grid-template-columns:1fr;gap:40px}
  .split--aside>aside{position:static}
  .split--flip .split__media{order:0}
  .steps{grid-template-columns:1fr}
  .rev-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:32px}
  .cta{padding:44px 32px}
  .cta__in{flex-direction:column;align-items:flex-start}
  .topbar__list .hide-sm{display:none}
}
@media (max-width:720px){
  :root{--sect:60px;--gut:18px;--hdr-h:66px;--top-h:110px}
  body{font-size:16px}
  .pillars{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr);gap:12px}
  .area-grid{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1fr;gap:34px}
  .fgrid{grid-template-columns:1fr}
  .qcard{padding:26px 22px}
  .hero{padding-block:calc(var(--top-h) + var(--top-slack) + 22px) 48px}
  .hero h1 .h1-br{display:none}
  .hero__cta .btn{width:100%}
  .hero__bg::after{background:linear-gradient(180deg,rgba(1,18,24,.72),rgba(1,18,24,.86) 55%,rgba(1,18,24,.95))}
  .qcard{padding:22px 20px 20px}
  .hero__trust{gap:22px}
  .prose ul.local-list{grid-template-columns:1fr}
  .ty__steps{grid-template-columns:1fr;gap:16px;text-align:left}
  .ty__steps li{flex-direction:row;align-items:flex-start;text-align:left;padding:0}
  .ty__steps li+li::before{display:none}
  .ty__actions .btn{width:100%}
  .badge{right:12px;bottom:-12px;padding:16px 20px}
  .ftr__bot{flex-direction:column;text-align:center;align-items:center}
  .topbar .wrap{justify-content:center}
  .topbar__list{gap:16px;justify-content:center}
  .cta{padding:36px 24px}
  .facts th{width:auto}
}
/* Short desktop viewports (a 768px-tall screen is only ~660px of page once
   browser chrome is deducted — very common). There the fixed topbar+header
   eats a fifth of the fold, so drop the utility bar and trim the header: the
   address, hours and email all remain in the footer, the contact page and the
   LocalBusiness schema. This is what lets the hero still fit at 660px. */
@media (min-width:901px) and (max-height:800px){
  :root{--topbar-h:0px;--hdr-h:74px;--top-h:74px}
  .topbar{display:none}
  .brand img{height:46px}
}

@media (max-width:480px){
  /* Header call button collapses to a matching icon tile beside the menu button. */
  .hdr__cta{gap:10px}
  .hdr__cta .btn--primary{
    padding:0;width:46px;height:46px;border-radius:14px;font-size:0;color:#fff;
    background:linear-gradient(145deg,#29c2ff 0%,#0b93d1 55%,#0a7fb3 100%);
    border:1px solid rgba(255,255,255,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 22px rgba(17,180,245,.38);
  }
  .hdr__cta .btn--primary{gap:0}
  .hdr__cta .btn--primary span{display:none}
  .hdr__cta .btn--primary{position:relative;isolation:isolate;overflow:visible}
  .hdr__cta .btn--primary::before,
  .hdr__cta .btn--primary::after{
    content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;
    border:2px solid rgba(41,194,255,.75);opacity:0;
    animation:callPulse 3.2s cubic-bezier(.22,1,.36,1) infinite;
  }
  .hdr__cta .btn--primary::after{animation-delay:.45s}
  .hdr__cta .btn--primary svg{width:24px;height:24px;color:#fff;filter:drop-shadow(0 1px 1px rgba(0,40,60,.35))}
  .brand img{height:42px}
}
@media (max-width:420px){
  .gal{grid-template-columns:1fr 1fr}
  .area-grid{grid-template-columns:1fr}
  .near-grid{grid-template-columns:1fr}
  .ty__tips{grid-template-columns:1fr}
  .hero__trust{gap:20px}
}