/* ============================================================
   Baptiste Plumbing Service

   Direction: light, translucent, flat. No motion of any kind.
   Nothing moves, scales, slides or animates on scroll. The only
   transitions are short colour fades on hover so a control still
   feels responsive to click.

   CONTRAST: gold #B8924F on white is 2.89:1 and FAILS WCAG AA.
     · gold is a FILL, never body text on white
     · gold buttons carry NAVY labels (5.47:1, passes)
     · inline gold links use --gold-ink (6.05:1, passes)
   ============================================================ */

:root {
  --navy-900:#0E2438; --navy-800:#14304F; --navy-700:#1A3D63; --navy-600:#1F4C77;
  --slate:#4A6480; --slate-light:#7089A3;
  --gold:#B8924F; --gold-hover:#A88445; --gold-lift:#D0AE76; --gold-ink:#7A5E30;
  --sky:#29ABE2;

  /* White ground, solid white cards, light blue for supporting sections. */
  --ground:#FFFFFF;
  --surface:#FFFFFF;
  --surface-solid:#FFFFFF;
  --tint:#EDF4FA;          /* light blue section background */
  --tint-deep:#DFEDF7;     /* light blue, one step deeper */
  --line:rgba(14,36,56,.13);
  --line-soft:rgba(14,36,56,.09);
  --line-bright:rgba(255,255,255,.16);

  --r-lg:16px; --r-card:12px; --r-btn:8px; --r-sm:6px;
  --wrap:1180px; --gutter:22px;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --header-h:74px;
  --fade:140ms linear;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);font-size:17px;line-height:1.66;
  color:var(--slate);background:var(--ground);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (max-width:767px){body{font-size:16px}}
img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{color:var(--navy-800);font-weight:700;line-height:1.14;letter-spacing:-.022em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5vw,3.35rem);font-weight:800;letter-spacing:-.032em}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);letter-spacing:-.026em}
h3{font-size:1.16rem;font-weight:700;line-height:1.32;letter-spacing:-.014em}
p{margin:0 0 1.15em}
a{color:var(--gold-ink);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--fade)}
a:hover{color:var(--navy-700)}
ul{margin:0;padding:0}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.section{padding:84px 0}
.section-lg{padding:108px 0}
@media (max-width:767px){.section{padding:54px 0}.section-lg{padding:60px 0}}
.bg-mist{background:var(--tint)}
.bg-mist-100{background:var(--tint-deep)}
.bg-navy{background:var(--navy-900);color:rgba(255,255,255,.8)}
.bg-navy h1,.bg-navy h2,.bg-navy h3{color:#fff}
.center{text-align:center}
.lede{font-size:1.1rem;color:var(--slate);max-width:62ch;font-weight:400}
.center .lede{margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy-900);color:#fff;padding:12px 20px;z-index:200}
.skip:focus{left:0}

.eyebrow{
  display:inline-block;margin:0 0 14px;
  color:var(--navy-600);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;
}
.bg-navy .eyebrow,.on-photo .eyebrow{color:var(--gold-lift)}
.kicker{display:block;margin:0 0 16px;font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lift);line-height:1.7}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:13px 22px;border-radius:var(--r-btn);
  font-family:var(--font);font-size:15.5px;font-weight:700;letter-spacing:-.008em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background-color var(--fade),border-color var(--fade),color var(--fade);
}
.btn-primary{background:var(--gold);color:var(--navy-900);border-color:var(--gold)}
.btn-primary:hover{background:var(--gold-hover);border-color:var(--gold-hover);color:var(--navy-900)}
.btn-dark{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.btn-dark:hover{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.42);color:#fff;background:rgba(255,255,255,.07)}
.btn-ghost:hover{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.14);color:#fff}
.btn-outline{border-color:var(--line);color:var(--navy-800);background:var(--surface)}
.btn-outline:hover{border-color:var(--navy-700);color:var(--navy-800);background:var(--tint)}
.btn-lg{min-height:56px;padding:15px 28px;font-size:16.5px}
.btn-block{width:100%}
.btn .ico{width:24px;height:24px;display:grid;place-items:center;flex:none;opacity:.62}
.btn .ico svg{width:15px;height:15px;display:block}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.center .btn-row{justify-content:center}

/* ---------- utility strip + header ---------- */
.util{background:var(--navy-900);color:rgba(255,255,255,.6);font-size:13px}
.util .wrap{display:flex;justify-content:flex-end;gap:20px;align-items:center;min-height:36px}
.util a{color:var(--gold-lift);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util a:hover{color:#fff}
.util a svg{width:14px;height:14px;flex:none}
.util .sep{opacity:.24}
@media (max-width:767px){.util .hide-sm{display:none}.util .wrap{justify-content:center}}

.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid transparent;transition:border-color var(--fade),background-color var(--fade);
}
.site-header.scrolled{border-bottom-color:var(--line);background:#fff}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand img{width:44px;height:44px;border-radius:50%;flex:none}
.brand .brand-txt{display:block}
.brand b{display:block;font-size:18px;font-weight:700;color:var(--navy-800);line-height:1.05;letter-spacing:-.03em}
.brand .brand-txt > span{display:block;font-size:10.5px;font-weight:600;color:var(--slate-light);letter-spacing:.13em;text-transform:uppercase;margin-top:2px}
.nav{display:flex;align-items:center;gap:1px}
.nav a{
  position:relative;padding:9px 12px;border-radius:var(--r-sm);text-decoration:none;
  color:var(--navy-700);font-size:14px;font-weight:600;white-space:nowrap;
  transition:color var(--fade),background-color var(--fade);
}
.nav a:hover{background:var(--tint);color:var(--navy-900)}
.nav a[aria-current=page]{color:var(--navy-900);font-weight:600}
.nav a[aria-current=page]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:1.5px;background:var(--gold)}
@media (max-width:1100px){.nav,.header-cta{display:none}}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);cursor:pointer;position:relative;flex:none}
@media (max-width:1100px){.burger{display:block}}
.burger i{position:absolute;left:12px;width:20px;height:1.5px;background:var(--navy-800)}
.burger i:nth-child(1){top:15px}
.burger i:nth-child(2){top:21px}
.burger i:nth-child(3){top:27px}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){opacity:0}
.burger[aria-expanded=true] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:70;
  background:#fff;
  display:none;flex-direction:column;padding:calc(var(--header-h) + 26px) var(--gutter) 40px;
  overflow-y:auto;
}
.drawer.open{display:flex}
.drawer a.d-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 2px;border-bottom:1px solid var(--line-soft);
  font-size:1.25rem;font-weight:600;color:var(--navy-800);text-decoration:none;letter-spacing:-.022em;
}
.drawer a.d-link svg{width:15px;height:15px;opacity:.28}
.drawer .d-actions{margin-top:26px;display:grid;gap:10px}
body.locked{overflow:hidden}

/* The sticky bottom Call/Book bar was removed at the client's request.
   The header keeps both actions in reach: the phone number sits in the
   strip above the logo and Book Now sits in the header itself. */

/* ---------- hero ----------
   The overlay is deliberately light so the photograph reads as a
   photograph. Legibility comes from a stronger gradient on the side
   the text sits on, not from flooding the whole image. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-900)}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 42%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* Scrim behind the text column only. Past the halfway point the
     photograph is left almost untouched, so a bright image stays bright
     instead of going uniformly grey under a blanket overlay. */
  background:linear-gradient(97deg,
    rgba(9,24,40,.95) 0%,
    rgba(9,24,40,.88) 24%,
    rgba(9,24,40,.62) 44%,
    rgba(9,24,40,.22) 66%,
    rgba(9,24,40,.04) 100%);
}
.hero .wrap{position:relative;padding-top:108px;padding-bottom:108px;min-height:min(640px,78vh);display:flex;align-items:center}
.hero-inner{max-width:640px}
.hero h1{color:#fff;margin-bottom:20px;text-wrap:balance;text-shadow:0 2px 18px rgba(9,24,40,.4)}
.hero p{color:rgba(255,255,255,.9);font-size:1.12rem;max-width:50ch;margin-bottom:30px;text-shadow:0 1px 12px rgba(9,24,40,.45)}
@media (max-width:767px){
  .hero .wrap{padding-top:58px;padding-bottom:58px;min-height:0}
  .hero p{font-size:1.02rem}
  .hero::after{background:linear-gradient(180deg,rgba(10,26,42,.78),rgba(10,26,42,.92))}
}

.phero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-900)}
.phero-media{position:absolute;inset:0;z-index:-2}
.phero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(97deg,rgba(9,24,40,.93) 0%,rgba(9,24,40,.8) 34%,rgba(9,24,40,.5) 62%,rgba(9,24,40,.2) 100%)}
.phero .wrap{position:relative;padding:76px 22px}
.phero h1{color:#fff;margin-bottom:10px;max-width:20ch}
.phero p{color:rgba(255,255,255,.84);font-size:1.06rem;max-width:56ch;margin:0}
@media (max-width:767px){.phero .wrap{padding:52px 22px}}

/* ---------- trust bar ---------- */
.trust{border-bottom:1px solid var(--line-soft);background:#fff}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:22px 0}
@media (max-width:900px){.trust-grid{grid-template-columns:repeat(2,1fr);gap:18px 6px}}
.trust-item{display:flex;align-items:center;gap:12px;padding:4px 8px}
.trust-item .tico{width:36px;height:36px;display:grid;place-items:center;flex:none;color:var(--navy-600);opacity:.85}
.trust-item .tico svg{width:20px;height:20px}
.trust-item b{display:block;color:var(--navy-800);font-size:14px;font-weight:700;line-height:1.3}
.trust-item span{display:block;color:var(--slate-light);font-size:12.5px;margin-top:1px}

/* ---------- surfaces ----------
   One flat translucent card. No nested bezel, no shadow stack. */
.shell{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  transition:background-color var(--fade),border-color var(--fade);
}
.shell > .core{height:100%;border-radius:var(--r-lg)}
a.shell{display:block;text-decoration:none;color:inherit}
a.shell:hover{border-color:var(--navy-600);background:#fff}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.svc-grid{grid-template-columns:1fr}}
.svc-card .core{padding:26px 24px 24px;display:flex;flex-direction:column}
.svc-ico{width:40px;height:40px;display:grid;place-items:center;color:var(--navy-600);margin-bottom:18px;opacity:.9}
.svc-ico svg{width:24px;height:24px;flex:none}
.svc-card h3{margin-bottom:7px}
.svc-card p{color:var(--slate);font-size:14.8px;line-height:1.62;margin-bottom:16px;flex:1}
.more{display:inline-flex;align-items:center;gap:6px;color:var(--gold-ink);font-weight:600;font-size:14px}
.more svg{width:13px;height:13px}

.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:22px 12px;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-card);text-decoration:none;color:var(--navy-800);
  font-size:13.4px;font-weight:600;line-height:1.32;
  transition:background-color var(--fade),border-color var(--fade);
}
.tile:hover{border-color:var(--navy-600);color:var(--navy-900)}
.tile .tl-ico{width:34px;height:34px;display:grid;place-items:center;color:var(--navy-600);opacity:.85}
.tile .tl-ico svg{width:22px;height:22px}

/* ---------- review counter ---------- */
.rev-stat{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center}
@media (max-width:800px){.rev-stat{grid-template-columns:1fr;gap:22px;text-align:center;justify-items:center}}
.rev-number{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:172px;padding:26px 32px;border-radius:var(--r-lg);
  background:rgba(14,36,56,.93);border:1px solid rgba(255,255,255,.08);
}
.rev-number .n{font-size:3.6rem;font-weight:700;color:#fff;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.rev-number .lbl{color:rgba(255,255,255,.58);font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;margin-top:8px}
.stars{display:inline-flex;gap:3px;align-items:center}
.stars svg{width:17px;height:17px;color:var(--gold-lift)}
.rev-number .stars{margin-bottom:13px}
.rev-copy h2{margin-bottom:9px}
.rev-copy .src{display:inline-flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--slate);margin-top:4px}
.rev-copy .src svg{width:17px;height:17px;flex:none;color:var(--navy-600);margin-top:3px;opacity:.8}
.rev-copy .src a{font-weight:600}

.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:960px){.rev-grid{grid-template-columns:1fr}}
.rev-card .core{padding:26px 24px;display:flex;flex-direction:column;height:100%}
.rev-card .stars{margin-bottom:14px}
.rev-card blockquote{margin:0 0 18px;color:var(--navy-700);font-size:15.8px;line-height:1.66;flex:1;font-weight:400}
.rev-card blockquote::before{content:"\201C"}
.rev-card blockquote::after{content:"\201D"}
.rev-meta{border-top:1px solid var(--line-soft);padding-top:14px}
.rev-meta b{display:block;color:var(--navy-800);font-size:14.5px;font-weight:700}
.rev-meta span{display:block;color:var(--slate-light);font-size:12.5px;margin-top:2px}
.src-tag{display:inline;font-weight:600;color:var(--navy-600)}

/* ---------- filter chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 28px}
.chip{
  appearance:none;cursor:pointer;font-family:var(--font);
  padding:9px 17px;min-height:42px;border-radius:var(--r-btn);
  border:1px solid var(--line);background:#fff;
  color:var(--navy-700);font-size:14px;font-weight:700;
  transition:background-color var(--fade),color var(--fade),border-color var(--fade);
}
.chip:hover{border-color:var(--navy-600)}
.chip.on{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.gal figure[hidden]{display:none!important}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gal{grid-template-columns:1fr}}
.gal figure{margin:0;border-radius:var(--r-card);overflow:hidden;position:relative;background:var(--tint);border:1px solid var(--line-soft)}
.gal figure img{aspect-ratio:4/5;object-fit:cover;width:100%}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;
  background:linear-gradient(to top,rgba(10,26,42,.9),rgba(10,26,42,.52) 52%,rgba(10,26,42,0));
  color:#fff;font-size:13.5px;font-weight:600;line-height:1.4;
}
.gal figcaption em{display:block;font-style:normal;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lift);margin-bottom:4px}

/* ---------- split / lists ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:32px}}
.split-media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-soft)}
.split-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.checks{list-style:none;display:grid;gap:10px;margin:0 0 26px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--navy-700);line-height:1.52}
.checks .ck{width:19px;height:19px;border-radius:50%;background:var(--gold);color:var(--navy-900);display:grid;place-items:center;flex:none;margin-top:3px}
.checks .ck svg{width:11px;height:11px}
.cols-2{columns:2;column-gap:38px}
@media (max-width:767px){.cols-2{columns:1}}
.cols-2 li{break-inside:avoid;-webkit-column-break-inside:avoid}

.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){.badges{grid-template-columns:1fr}}
.badge{text-align:center;padding:28px 20px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card)}
.badge .bico{width:40px;height:40px;margin:0 auto 13px;display:grid;place-items:center;color:var(--navy-600);opacity:.88}
.badge .bico svg{width:23px;height:23px}
.badge b{display:block;color:var(--navy-800);font-size:15.5px;font-weight:700;margin-bottom:5px}
.badge span{font-size:13.8px;color:var(--slate)}

.quote-band{text-align:center;max-width:740px;margin:0 auto}
.quote-band .qmark{width:46px;height:46px;margin:0 auto 18px;display:grid;place-items:center;color:var(--gold-ink);opacity:.72}
.quote-band .qmark svg{width:26px;height:26px}
.quote-band q{display:block;font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.46;color:var(--navy-800);font-weight:600;letter-spacing:-.022em;margin-bottom:16px}
.quote-band cite{font-style:normal;font-size:14px;font-weight:600;color:var(--slate)}

.cta-band{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--navy-900)}
.cta-band .cta-inner{position:relative;z-index:2;padding:48px 44px;max-width:600px}
@media (max-width:767px){.cta-band .cta-inner{padding:34px 24px}}
.cta-band h2{color:#fff;margin-bottom:11px}
.cta-band p{color:rgba(255,255,255,.78);margin-bottom:26px}
.cta-photo{position:absolute;top:0;right:0;bottom:0;width:46%;z-index:1}
.cta-photo img{width:100%;height:100%;object-fit:cover}
.cta-photo::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,var(--navy-900) 1%,rgba(14,36,56,.45) 60%,rgba(14,36,56,.12) 100%)}
@media (max-width:900px){.cta-photo{display:none}}

/* ---------- forms ---------- */
.form-card .core{padding:30px 28px}
@media (max-width:600px){.form-card .core{padding:22px 18px}}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--navy-800);margin-bottom:6px}
.field .req{color:var(--gold-ink)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-btn);
  font-family:var(--font);font-size:16px;color:var(--navy-800);background:#fff;
  min-height:48px;transition:border-color var(--fade),background-color var(--fade);
}
.field textarea{min-height:120px;resize:vertical;line-height:1.56}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy-600);background:#fff}
.field input[aria-invalid=true],.field textarea[aria-invalid=true],.field select[aria-invalid=true]{border-color:#B3261E}
.err{display:none;color:#B3261E;font-size:13px;font-weight:500;margin-top:5px}
.err.show{display:block}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:600px){.grid-2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:12.8px;color:var(--slate-light);margin:13px 0 0;line-height:1.5}
.result{display:none;padding:16px 18px;border-radius:var(--r-card);font-size:15px;line-height:1.56;margin-bottom:18px}
.result.show{display:block}
.result.ok{background:#EDF7EE;border:1px solid #BBDFBE;color:#1B5E20}
.result.bad{background:#FDECEA;border:1px solid #F5C2BE;color:#8C1D18}
.result a{font-weight:600;color:inherit}
.spinner{width:15px;height:15px;border:2px solid rgba(14,36,56,.25);border-top-color:var(--navy-900);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn[disabled]{opacity:.6;pointer-events:none}

.crows{display:grid;gap:6px;margin-bottom:6px}
.crow{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.crow:last-child{border-bottom:0}
.crow .cico{width:36px;height:36px;display:grid;place-items:center;color:var(--navy-600);flex:none;opacity:.85}
.crow .cico svg{width:20px;height:20px;flex:none}
.crow b{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-light);margin-bottom:4px}
.crow .val{font-size:16.5px;font-weight:600;color:var(--navy-800);text-decoration:none;word-break:break-word}
a.val:hover{color:var(--gold-ink)}
.crow .sub{font-size:13.8px;color:var(--slate);margin-top:3px}

.area-list{list-style:none;display:grid;gap:8px;margin:0 0 26px}
.area-list li{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);font-size:16px;font-weight:600;color:var(--navy-800)}
.area-list .ck{width:20px;height:20px;border-radius:50%;background:var(--gold);color:var(--navy-900);display:grid;place-items:center;flex:none}
.area-list .ck svg{width:11px;height:11px}

/* ---------- map ---------- */
.map-card{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--tint);height:430px}
.map-card .map-fallback{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:900px){.map-card{height:340px}}
.map-note{font-size:12.8px;color:var(--slate-light);margin:10px 2px 0;line-height:1.5}

.prose{max-width:740px;margin:0 auto}
.prose h2{font-size:1.28rem;margin-top:36px}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:20px;margin:0 0 1.15em}
.prose li{margin-bottom:6px}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-900);color:rgba(255,255,255,.62);font-size:14.5px}
.site-footer a{color:rgba(255,255,255,.76);text-decoration:none;transition:color var(--fade)}
.site-footer a:hover{color:#fff}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:42px;padding:58px 0 40px}
@media (max-width:900px){.f-top{grid-template-columns:1fr;gap:32px;padding:42px 0 28px}}
.f-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.f-brand img{width:48px;height:48px;border-radius:50%;background:#fff;flex:none}
.f-brand .brand-txt{display:block}
.f-brand b{display:block;color:#fff;font-size:18px;font-weight:700;line-height:1.05;letter-spacing:-.03em}
.f-brand .brand-txt > span{display:block;font-size:10.5px;color:var(--gold-lift);letter-spacing:.13em;text-transform:uppercase;font-weight:500;margin-top:2px}
.f-blurb{max-width:38ch;font-size:14.2px;line-height:1.64;margin-bottom:18px}
.f-h{color:#fff;font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;margin:0 0 14px}
.f-list{list-style:none;display:grid;gap:9px;font-size:14.2px}
.f-phone{display:inline-flex;align-items:center;gap:8px;color:var(--gold-lift)!important;font-weight:700;font-size:18px;letter-spacing:-.02em}
.f-phone svg{width:17px;height:17px;flex:none}
.f-phone:hover{color:#fff!important}
.f-bottom{border-top:1px solid rgba(255,255,255,.09);padding:20px 0 28px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:13px}
.f-social{display:flex;gap:9px}
.f-social a{width:36px;height:36px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);display:grid;place-items:center;transition:background-color var(--fade)}
.f-social a:hover{background:rgba(255,255,255,.14)}
.f-social svg{width:17px;height:17px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{.site-header,.util,.callbar,.drawer,.site-footer{display:none}}

/* ============================================================
   MOTION
   Every animation is opacity + transform only, so it runs on the
   compositor and never triggers layout. One easing curve and one
   duration scale throughout, which is what makes it read as a
   single system rather than a pile of effects.

   Reveal targets are tagged by JS, not by hand in the markup, so the
   stagger stays consistent everywhere. `.has-js` gates the hidden
   start state: if JS never runs, nothing is ever invisible.
   ============================================================ */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:180ms; --t-mid:340ms; --t-slow:640ms;
}
html{scroll-behavior:smooth}

.has-js .reveal{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity var(--t-slow) var(--ease-out),
             transform var(--t-slow) var(--ease-out);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.has-js .reveal.in{opacity:1;transform:translate3d(0,0,0);will-change:auto}

/* interactive surfaces get a gentle lift back */
.btn{transition:background-color var(--t-fast) var(--ease-soft),
                border-color var(--t-fast) var(--ease-soft),
                color var(--t-fast) var(--ease-soft),
                transform var(--t-mid) var(--ease-out)}
.btn:hover{transform:translate3d(0,-1px,0)}
.btn:active{transform:translate3d(0,0,0) scale(.988);transition-duration:80ms}
.btn .ico{transition:transform var(--t-mid) var(--ease-out),opacity var(--t-fast) var(--ease-soft)}
.btn:hover .ico{transform:translate3d(3px,0,0);opacity:.9}

.shell,.tile,.badge,.chip{
  transition:background-color var(--t-fast) var(--ease-soft),
             border-color var(--t-fast) var(--ease-soft),
             transform var(--t-mid) var(--ease-out);
}
a.shell:hover,.tile:hover{transform:translate3d(0,-2px,0)}
.svc-ico,.tl-ico{transition:transform var(--t-mid) var(--ease-out),color var(--t-fast) var(--ease-soft)}
a.shell:hover .svc-ico,.tile:hover .tl-ico{transform:translate3d(0,-1px,0)}
.more svg{transition:transform var(--t-mid) var(--ease-out)}
a.shell:hover .more svg{transform:translate3d(3px,0,0)}

.gal figure img{transition:transform 900ms var(--ease-out)}
.gal figure:hover img{transform:scale(1.035)}
.gal figure figcaption{transition:opacity var(--t-fast) var(--ease-soft)}

.nav a,.site-footer a,.f-social a{transition:color var(--t-fast) var(--ease-soft),
  background-color var(--t-fast) var(--ease-soft)}
.f-social a{transition:background-color var(--t-fast) var(--ease-soft),transform var(--t-mid) var(--ease-out)}
.f-social a:hover{transform:translate3d(0,-2px,0)}

/* hamburger morph */
.burger i{transition:transform var(--t-mid) var(--ease-out),opacity var(--t-fast) var(--ease-soft)}

/* drawer: fades and lifts rather than appearing */
.drawer{
  display:flex;
  opacity:0;visibility:hidden;transform:translate3d(0,-6px,0);
  transition:opacity var(--t-mid) var(--ease-out),
             transform var(--t-mid) var(--ease-out),
             visibility 0s linear var(--t-mid);
}
.drawer.open{opacity:1;visibility:visible;transform:translate3d(0,0,0);transition-delay:0s}
.has-js .drawer a.d-link,.has-js .drawer .d-actions{
  opacity:0;transform:translate3d(0,10px,0);
  transition:opacity var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out);
}
.drawer.open a.d-link,.drawer.open .d-actions{opacity:1;transform:translate3d(0,0,0)}
.drawer.open a.d-link:nth-child(1){transition-delay:40ms}
.drawer.open a.d-link:nth-child(2){transition-delay:70ms}
.drawer.open a.d-link:nth-child(3){transition-delay:100ms}
.drawer.open a.d-link:nth-child(4){transition-delay:130ms}
.drawer.open a.d-link:nth-child(5){transition-delay:160ms}
.drawer.open a.d-link:nth-child(6){transition-delay:190ms}
.drawer.open a.d-link:nth-child(7){transition-delay:220ms}
.drawer.open .d-actions{transition-delay:250ms}

/* accordion-free: result panel eases in */
.result{transition:opacity var(--t-mid) var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0ms!important;
  }
  .has-js .reveal{opacity:1;transform:none}
  .has-js .drawer a.d-link,.has-js .drawer .d-actions{opacity:1;transform:none}
  .btn:hover,a.shell:hover,.tile:hover,.f-social a:hover{transform:none}
  .gal figure:hover img{transform:none}
}

/* ---------- mobile header ----------
   Under 1100px the nav collapses to a hamburger, but the two things that
   actually convert stay on screen: the phone number in the strip above
   (full width and tappable) and a Book Now button beside the menu. */
.header-book{display:none;padding:0 0 12px}
@media (max-width:1100px){.header-book{display:block}}
.btn-sm{min-height:44px;padding:11px 16px;font-size:14.5px}
@media (max-width:400px){
  .brand img{width:40px;height:40px}
  .brand b{font-size:16.5px}
  .brand .brand-txt > span{font-size:9.5px;letter-spacing:.1em}
  .site-header .wrap{gap:10px}
}
@media (max-width:1100px){
  .util .wrap{justify-content:center;min-height:40px}
  .util-call{font-size:14.5px}
  .util-call svg{width:15px;height:15px}
  .site-header .wrap{min-height:66px}
}

/* ---------- footer emergency line ---------- */
.f-emg{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13.5px;
  font-weight:700;color:var(--gold-lift);line-height:1.4}
.f-emg svg{width:16px;height:16px;flex:none}

/* ---------- expandable review ---------- */
.rev-card blockquote{margin-bottom:12px}
.rev-more{
  appearance:none;background:none;border:0;padding:0;margin:0 0 16px;cursor:pointer;
  font-family:var(--font);font-size:14px;font-weight:700;color:var(--gold-ink);
  text-decoration:underline;text-underline-offset:3px;align-self:flex-start;
  transition:color var(--t-fast) var(--ease-soft);
}
.rev-more:hover{color:var(--navy-700)}
.rev-full{display:block}

/* ============================================================
   DEPTH & SECTION BLENDING
   Hard colour switches between sections read as stacked blocks.
   Fading each tinted band in and out at its edges makes the page
   read as one surface instead of a pile of rectangles.
   ============================================================ */

.bg-mist{
  background:linear-gradient(180deg,
    var(--ground) 0%, var(--tint) 9%, var(--tint) 91%, var(--ground) 100%);
}
.bg-mist-100{
  background:linear-gradient(180deg,
    var(--ground) 0%, var(--tint-deep) 10%, var(--tint-deep) 90%, var(--ground) 100%);
}
/* Two tinted bands in a row would show a seam where they meet, so a
   tinted band directly after another stays flat at that edge. */
.bg-mist + .bg-mist,
.bg-mist + .bg-mist-100,
.bg-mist-100 + .bg-mist{background:var(--tint)}

/* The hero dissolves into the trust bar rather than stopping at a line. */
.hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:110px;z-index:0;
  background:linear-gradient(to top,var(--ground) 0%,rgba(255,255,255,.55) 45%,transparent 100%);
  pointer-events:none;
}
.hero .wrap{z-index:1}
@media (max-width:767px){.hero::before{height:70px}}

/* Cards lift off the page slightly. One soft ambient shadow, no stacks. */
.shell,.tile,.badge,.area-list li,.map-card,.gal figure{
  box-shadow:0 1px 2px rgba(14,36,56,.035), 0 10px 28px -16px rgba(14,36,56,.16);
}
a.shell:hover,.tile:hover{
  box-shadow:0 1px 2px rgba(14,36,56,.05), 0 16px 38px -18px rgba(14,36,56,.24);
}
.cta-band{box-shadow:0 20px 50px -24px rgba(14,36,56,.5)}
.rev-number{box-shadow:0 18px 44px -22px rgba(14,36,56,.55)}

/* A little more air, and headings that hold together at large sizes. */
.section{padding:96px 0}
.section-lg{padding:120px 0}
@media (max-width:767px){.section{padding:58px 0}.section-lg{padding:64px 0}}
h1,h2{text-wrap:balance}
.lede{line-height:1.68}

/* Trust bar sits on the page rather than in a box of its own. */
.trust{background:transparent;border-bottom:1px solid var(--line-soft)}
.trust-grid{padding:30px 0}

/* Section intros breathe a little more. */
.section > .wrap > .center{margin-bottom:52px}
@media (max-width:767px){.section > .wrap > .center{margin-bottom:34px}}

/* ============================================================
   WARM HEADER BAND + RICHER HERO
   Matching the reference: the whole header sits on a warm cream
   band rather than white, which stops the top of the page reading
   as one flat sheet of white.
   ============================================================ */
:root{
  --cream:#F4EEE3;
  --cream-line:rgba(20,48,79,.10);
}

.util{background:var(--cream);color:var(--navy-700);border-bottom:1px solid rgba(20,48,79,.06)}
.util a{color:var(--gold-ink)}
.util a:hover{color:var(--navy-900)}
.util .sep{opacity:.3}

.site-header{
  background:rgba(244,238,227,.93);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{background:var(--cream);border-bottom-color:var(--cream-line)}
.nav a:hover{background:rgba(255,255,255,.62)}
.burger{background:rgba(255,255,255,.7);border-color:var(--cream-line)}
.header-book{background:transparent}
.drawer{background:var(--cream)}

/* The white veil over the bottom of the hero was washing the photograph
   out. Gone. The hero now meets the page on its own terms. */
.hero::before{display:none}

/* Deeper, warmer scrim so the hero reads rich rather than pale. */
.hero::after{
  background:linear-gradient(97deg,
    rgba(7,21,36,.96) 0%,
    rgba(7,21,36,.9) 26%,
    rgba(8,24,40,.66) 48%,
    rgba(9,26,43,.3) 72%,
    rgba(9,26,43,.1) 100%);
}
@media (max-width:767px){
  .hero::after{background:linear-gradient(180deg,rgba(7,21,36,.82),rgba(7,21,36,.95))}
}
/* Trust bar sits on cream too, tying the top of the page together. */
.trust{background:var(--cream);border-bottom:1px solid var(--cream-line)}
.trust-item .tico{color:var(--navy-700)}

/* ---------- card shadow ----------
   One layered shadow: a tight contact shadow for the edge, and a wide
   soft one tinted navy rather than grey so it sits in the palette. */
.shell,.tile,.badge,.area-list li,.map-card,.gal figure,.form-card{
  box-shadow:
    0 1px 1px rgba(20,48,79,.05),
    0 4px 8px -3px rgba(20,48,79,.07),
    0 20px 36px -20px rgba(20,48,79,.26);
}
a.shell:hover,.tile:hover{
  box-shadow:
    0 1px 1px rgba(20,48,79,.06),
    0 8px 16px -5px rgba(20,48,79,.11),
    0 30px 50px -22px rgba(20,48,79,.34);
}
.rev-number{box-shadow:0 10px 22px -10px rgba(20,48,79,.4),0 30px 60px -28px rgba(20,48,79,.6)}
.cta-band{box-shadow:0 12px 26px -12px rgba(20,48,79,.34),0 34px 64px -30px rgba(20,48,79,.62)}

/* Small grey text on the cream band measured 3.14:1, which fails AA at
   these sizes. Darkened to --slate (5.6:1 on cream). */
.brand .brand-txt > span,
.trust-item span,
.util{color:var(--slate)}
.util .hide-sm{color:var(--slate)}

/* ============================================================
   HERO OVERLAY
   A single diagonal sweep reads as a band laid over the photo. This
   is built like light instead: a soft pool of shade anchored behind
   the text that falls off in every direction, plus a gentle top and
   bottom vignette. The photograph stays a photograph on the right,
   and the type has real contrast where it actually sits.
   ============================================================ */
.hero::after{
  background:
    radial-gradient(135% 118% at 8% 52%,
      rgba(6,18,32,.95) 0%,
      rgba(6,18,32,.88) 22%,
      rgba(6,18,32,.66) 40%,
      rgba(6,18,32,.36) 58%,
      rgba(6,18,32,.12) 74%,
      rgba(6,18,32,0) 88%),
    linear-gradient(180deg,
      rgba(6,18,32,.5) 0%,
      rgba(6,18,32,.14) 26%,
      rgba(6,18,32,.14) 62%,
      rgba(6,18,32,.52) 100%);
}
/* Phones only. Above this the radial treatment above still reads, and
   blanketing a tablet loses the photograph for no reason. */
@media (max-width:700px){
  .hero::after{
    background:
      radial-gradient(150% 86% at 28% 40%,
        rgba(6,18,32,.9) 0%,
        rgba(6,18,32,.8) 38%,
        rgba(6,18,32,.55) 68%,
        rgba(6,18,32,.34) 100%),
      linear-gradient(180deg, rgba(6,18,32,.4) 0%, rgba(6,18,32,.2) 40%, rgba(6,18,32,.6) 100%);
  }
}

/* Same treatment on the interior page heroes so they match. */
.phero::after{
  background:
    radial-gradient(130% 125% at 6% 50%,
      rgba(6,18,32,.94) 0%,
      rgba(6,18,32,.84) 26%,
      rgba(6,18,32,.58) 48%,
      rgba(6,18,32,.26) 70%,
      rgba(6,18,32,.06) 90%),
    linear-gradient(180deg, rgba(6,18,32,.4) 0%, rgba(6,18,32,.1) 45%, rgba(6,18,32,.4) 100%);
}

/* Slightly wider text column now the shade falls off gradually. */
.hero-inner{max-width:660px}
.hero h1{text-shadow:0 2px 24px rgba(6,18,32,.55)}
.hero p{text-shadow:0 1px 16px rgba(6,18,32,.6)}
.phero h1,.phero p{text-shadow:0 2px 20px rgba(6,18,32,.5)}

/* ============================================================
   THREE TIERS, NOT TWO

   Phone   (< 700px)   one column, thumb-sized targets, the phone
                       number and Book Now pinned where a thumb is
   Tablet  (700-1023)  hamburger stays, but the header behaves like a
                       website: inline Book Now, no full-width bar
   Desktop (>= 1024)   full horizontal nav, phone button in the header,
                       no sticky bar, wider measure and larger type

   The nav used to collapse at 1100px, so 13" laptops got the phone
   header. That is what made it read as an app rather than a website.
   ============================================================ */

/* ---- desktop: nav back from 1024px up ---- */
@media (min-width:1024px){
  .nav,.header-cta{display:flex}
  .burger,.header-book{display:none}
}
@media (max-width:1023px){
  .nav,.header-cta{display:none}
  .burger{display:block}
}

/* ---- tablet: inline Book Now instead of a full-width bar ---- */
@media (min-width:700px) and (max-width:1023px){
  .header-book{
    display:flex;position:absolute;top:0;right:calc(var(--gutter) + 58px);
    height:var(--header-h);align-items:center;padding:0;
  }
  .header-book .wrap{padding:0;max-width:none}
  .header-book .btn{width:auto;min-height:44px;padding:11px 20px;font-size:14.5px}
  .site-header .wrap{position:relative}
}
@media (max-width:699px){
  .header-book{display:block;position:static;padding:0 0 12px}
}

/* ---- desktop typography and measure ---- */
@media (min-width:1024px){
  body{font-size:17.5px}
  h1{font-size:clamp(2.6rem,3.6vw,3.5rem)}
  h2{font-size:clamp(1.9rem,2.6vw,2.45rem)}
  .lede{font-size:1.14rem}
  .section{padding:104px 0}
  .hero .wrap{min-height:min(660px,80vh)}
}
@media (min-width:1440px){
  :root{--wrap:1260px}
  .hero-inner{max-width:700px}
}

/* ---- phone: bigger touch targets, tighter rhythm ---- */
@media (max-width:699px){
  .btn{min-height:52px}
  .btn-lg{min-height:56px}
  .nav a,.d-link{min-height:48px}
  .field input,.field select,.field textarea{min-height:52px;font-size:16px}
  .chip{min-height:46px}
  .btn-row .btn{width:100%}
  .btn-row{gap:10px}
  .split{gap:28px}
  .rev-number{width:100%}
}

/* Hover effects are meaningless on touch and cause sticky states, so
   they only apply where there is a real pointer. */
@media (hover:none){
  .btn:hover,a.shell:hover,.tile:hover,.f-social a:hover{transform:none}
  .gal figure:hover img{transform:none}
}

/* ---------- contact: form first ----------
   The form is the point of the page, so it leads on every screen. On
   desktop it takes the wider column; on mobile it stacks above the
   contact details rather than below them. */
.split-form-first{grid-template-columns:1.05fr .95fr}
@media (max-width:900px){.split-form-first{grid-template-columns:1fr}}

/* ---------- service areas: map first ---------- */
.split-map-first{grid-template-columns:1.05fr .95fr;align-items:start}
@media (max-width:900px){.split-map-first{grid-template-columns:1fr}}
.split-map-first .map-card{height:460px}
@media (max-width:900px){.split-map-first .map-card{height:320px}}

/* Shorter hero on pages where the content below is the reason to be there. */
.phero-tight{padding-top:56px;padding-bottom:56px}
@media (max-width:767px){.phero-tight{padding-top:42px;padding-bottom:42px}}

/* Book Now links land on the form itself. The sticky header would sit on
   top of it, so the target reserves room for the header plus a little air. */
#book{scroll-margin-top:calc(var(--header-h) + 24px)}
@media (max-width:1023px){#book{scroll-margin-top:calc(var(--header-h) + 96px)}}

/* ---------- cookie consent ----------
   Only rendered when a cookie-setting analytics provider is configured. */
.consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:90;
  max-width:640px;margin:0 auto;padding:16px 18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:0 1px 2px rgba(20,48,79,.05),0 20px 44px -18px rgba(20,48,79,.4);
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
}
.consent p{margin:0;flex:1;min-width:220px;font-size:14.2px;color:var(--slate);line-height:1.5}
.consent-actions{display:flex;gap:8px;flex:none}
@media (max-width:560px){
  .consent{left:10px;right:10px;bottom:10px;padding:14px}
  .consent-actions{width:100%}
  .consent-actions .btn{flex:1}
}