/* ==========================================================================
   ANGLIA BOILER MAINTENANCE — styles
   Palette and type come from source/brand/moodboard.png; see source/README.md
   for how each token was derived and the contrast limits on each colour.
   ========================================================================== */

:root {
  /* From the moodboard */
  --navy: #0B2D4A;
  --red: #D71920;
  --charcoal: #333333;
  --grey: #9CA3AF;          /* graphic + text on navy only: 2.5:1 on white */
  --grey-lt: #F2F4F7;

  /* Derived */
  --navy-900: #071E33;
  --navy-600: #16466F;
  --red-dk: #B3141A;        /* hover, and red text that must sit on grey-lt */
  --ink: var(--charcoal);
  --ink-soft: #555B65;      /* 7.0:1 on white */
  --line: #DDE2E8;
  --paper: #FFFFFF;
  --on-navy: #FFFFFF;
  --on-navy-soft: #C9D3DE;

  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(11, 45, 74, .06), 0 6px 20px rgba(11, 45, 74, .08);
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
a[href^="tel:"]:not(:has(.nowrap)) { white-space: nowrap; }   /* a phone number never breaks across lines */   /* .status and .contact-list li set display, which beats the attribute */
a { color: var(--navy-600); }
a:hover { color: var(--red-dk); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; color: var(--navy); font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: .75rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.eyebrow {
  display: block;
  font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-dk); margin-bottom: .75rem;
}
.rule::after {
  content: ''; display: block; width: 56px; height: 4px; background: var(--red);
  margin-top: .6rem; border-radius: 2px;
}
.rule-center::after { margin-left: auto; margin-right: auto; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.4rem; border-radius: var(--radius);
  font: 600 .95rem/1 var(--font); text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dk); color: #fff; }
.btn-ghost { border-color: rgba(255,255,255,.85); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--navy); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-600); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 700px) {
  .btn-row-mobile-center { justify-content: center; }
  .btn-row-mobile-center .btn { min-width: 240px; justify-content: center; }
}

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--line);
}
.header-inner {
  /* Three columns with equal outer tracks, so the links sit at the true centre
     of the page, not just in the gap between the logo and the button. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem;
  min-height: 76px;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--navy); }
.brand img { width: 46px; height: 46px; }
.brand-name { font-weight: 700; font-size: .95rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; }
.brand-name small { display: block; font-size: .78em; font-weight: 600; }

.nav { justify-self: center; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; }
.nav a, .brand-name, .header-cta .btn { white-space: nowrap; }
.nav a {
  text-decoration: none; color: var(--ink); font-weight: 500; font-size: .95rem;
  padding: .4rem 0; border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--navy); border-bottom-color: var(--grey); }
.nav a[aria-current="page"] { color: var(--navy); font-weight: 600; border-bottom-color: var(--red); }

.header-cta { display: flex; align-items: center; gap: 1rem; justify-self: end; }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--navy);
}
.nav-toggle svg { width: 28px; height: 28px; }

/* Shown only inside the mobile menu; must precede the media query below. */
.nav .nav-phone { display: none; }
@media (max-width: 1220px) {
  .header-inner { display: flex; }
  .nav-toggle { display: block; order: 3; margin-left: .5rem; }
  .header-cta { order: 2; margin-left: auto; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; justify-self: stretch;
    background: #fff; border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: .5rem var(--gutter) 1rem; }
  .nav a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .nav a[aria-current="page"] { border-bottom-color: var(--line); box-shadow: inset 4px 0 0 var(--red); padding-left: .8rem; }
  .nav .nav-phone { display: block; }
}
.nav .nav-phone a { color: var(--red-dk); font-weight: 700; }

/* Phones: the call button moves into the menu, which already has one. */
@media (max-width: 600px) { .header-cta { display: none; } .nav-toggle { margin-left: auto; } }

/* The "No heating?" link is the one people hunt for in a panic. */
.nav a.nav-help { color: var(--red-dk); font-weight: 600; }

/* --- Logo steam ----------------------------------------------------------
   Three soft puffs rise from the chimney on the AB mark. The chimney tip is
   at the top centre of the image (x 49%, y ~2% of ab-mark.png). */
.brand-mark { position: relative; display: block; flex: none; }
.steam { position: absolute; left: 49%; top: 2px; width: 0; height: 0; pointer-events: none; }
.steam i {
  position: absolute; left: -4px; bottom: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(156, 163, 175, .75); filter: blur(1.5px);
  opacity: 0; animation: steam 3.6s ease-out infinite;
}
.steam i:nth-child(2) { animation-delay: 1.2s; --drift: -5px; }
.steam i:nth-child(3) { animation-delay: 2.4s; --drift: 4px; }
@keyframes steam {
  0%   { opacity: 0;  transform: translate(0, 0) scale(.5); }
  15%  { opacity: .9; }
  100% { opacity: 0;  transform: translate(var(--drift, 2px), -16px) scale(2.1); }
}
.footer-brand .mark-tile { position: relative; }
.footer-brand .steam { top: 6px; }
.footer-brand .steam i { background: rgba(255, 255, 255, .6); }

/* --- Seasonal bar (built by main.js from SITE.banners) -------------------- */
.season-bar { background: var(--red); color: #fff; font-size: .92rem; font-weight: 600; }
.season-bar .wrap { display: flex; align-items: center; justify-content: center; gap: .5rem 1rem; flex-wrap: wrap; padding-top: .55rem; padding-bottom: .55rem; text-align: center; }
.season-bar a { color: #fff; text-underline-offset: 3px; display: inline-block; padding: .55rem .25rem; margin: -.55rem 0; }
.season-bar button {
  background: none; border: 0; color: #fff; cursor: pointer; padding: .7rem; margin: -.7rem -.45rem -.7rem 0;
  display: inline-flex; opacity: .85;
}
.season-bar button:hover { opacity: 1; }
.season-bar button svg { width: 18px; height: 18px; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative; color: var(--on-navy);
  background: var(--navy);
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
}
.hero-media img, .hero-media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(11,45,74,.94) 38%, rgba(11,45,74,.55) 70%, rgba(11,45,74,.25) 100%);
}
.hero-inner { position: relative; z-index: 2; padding: clamp(2.5rem, 5vw, 4rem) 0; max-width: 640px; }
.hero h1 { color: #fff; }
.hero .eyebrow { color: var(--on-navy-soft); }
.hero p { font-size: 1.08rem; color: var(--on-navy-soft); max-width: 34em; }
.hero .btn-row { margin-top: 1.75rem; }
@media (max-width: 700px) {
  /* The photo stops being a background (the overlay hid the vans) and sits
     under the text as a strip, fading up into the navy. */
  .hero { display: flex; flex-direction: column; }
  .hero::before { display: none; }
  .hero-media { position: relative; inset: auto; order: 2; }
  .hero-media img, .hero-media video { height: auto; aspect-ratio: 16 / 9; object-position: 70% 60%; }
  .hero-media::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 35%; z-index: 1;
    background: linear-gradient(var(--navy), rgba(11, 45, 74, 0));
  }
  .hero-inner { padding-bottom: 1.5rem; }
  .hero-inner { text-align: center; margin: 0 auto; }
  .hero p { margin-left: auto; margin-right: auto; }
  .hero .btn-row { justify-content: center; }
  .hero .btn { min-width: 240px; justify-content: center; }
}

.page-hero { background: var(--navy); color: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0; }   /* same as .hero-inner, so every banner is spaced alike */
.page-hero h1 { color: #fff; margin-bottom: .75rem; }
.page-hero p { color: var(--on-navy-soft); max-width: 40em; margin: 0; font-size: 1.05rem; }
.page-hero .eyebrow { color: var(--on-navy-soft); }
.page-hero a { color: #fff; font-weight: 600; white-space: nowrap; }
.page-hero a.btn { font-weight: 600; white-space: normal; text-align: center; justify-content: center; }   /* banner links don't wrap; buttons must, or they push the text off a phone screen */
/* A key offer inside a banner sentence: a red label, so it reads first. */
.tag-offer {
  display: inline-block; background: var(--red); color: #fff; font-weight: 700;
  padding: .05rem .5rem; border-radius: 4px; white-space: nowrap; letter-spacing: .01em;
}
.page-hero .hero-cta { margin-top: 1.5rem; }
/* Banner with a photo behind the text (inner pages). Same pattern as the home
   hero: navy on the left where the text sits, the photo showing on the right. */
.page-hero-photo { position: relative; overflow: hidden; }
.page-hero-media { position: absolute; inset: 0; }
.page-hero-media picture { display: contents; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-media img.obj-right { object-position: 80% 50%; }
.page-hero-media img.obj-boiler { object-position: 85% 15%; }   /* the boiler is top right of the shot */
.page-hero-photo::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(11,45,74,.93) 40%, rgba(11,45,74,.5) 72%, rgba(11,45,74,.2) 100%);
}
.page-hero-photo .wrap { position: relative; z-index: 2; }
.page-hero-photo .wrap > * { max-width: 620px; }
@media (max-width: 700px) {
  .page-hero-photo { display: flex; flex-direction: column; padding-bottom: 0; }
  .page-hero-photo::before { display: none; }
  .page-hero-media { position: relative; inset: auto; order: 2; margin-top: 1.5rem; }
  .page-hero-media img { height: auto; aspect-ratio: 16 / 9; }
  .page-hero-media::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 35%; z-index: 1;
    background: linear-gradient(var(--navy), rgba(11, 45, 74, 0));
  }
  .page-hero-photo .wrap > * { max-width: none; }
}
@media (max-width: 700px) {
  .page-hero .wrap { text-align: center; }
  .page-hero p { margin-left: auto; margin-right: auto; }
  .page-hero .hero-cta { justify-content: center; }
}

/* --- Trust strip --------------------------------------------------------- */
.trust { background: var(--navy-900); color: #fff; }
.trust ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.trust li {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
  padding: 1.4rem .75rem; font-size: .9rem; font-weight: 500; line-height: 1.3;
}
.trust li + li { border-left: 1px solid rgba(255,255,255,.14); }
.trust svg { width: 34px; height: 34px; color: #fff; }
@media (max-width: 880px) {
  .trust ul { grid-template-columns: repeat(2, 1fr); }
  .trust li { border-top: 1px solid rgba(255,255,255,.14); }
  .trust li + li { border-left: 0; }
  .trust li:nth-child(even) { border-left: 1px solid rgba(255,255,255,.14); }
  .trust li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* --- Sections ------------------------------------------------------------ */
.section { padding: clamp(2.25rem, 5vw, 4rem) 0; }
.section-alt { background: var(--grey-lt); }
.section-head { max-width: 640px; margin-bottom: 2rem; }
.section-head p { color: var(--ink-soft); }
.center { text-align: center; margin-left: auto; margin-right: auto; }

.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split-rev > :first-child { order: 2; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split-rev > :first-child { order: 0; } }
.photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.photo img, .photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo img.obj-top { object-position: 50% 15%; }   /* keep the top of the subject when a crop is landscape */
.photo-tall { width: 100%; aspect-ratio: 4 / 5; max-height: 560px; }
@media (max-width: 820px) { .photo-tall { aspect-ratio: 4 / 3; } }   /* after the base rule, or it loses */
.photo-tall.photo-4x3 { aspect-ratio: 4 / 3; }   /* the cascade video is 4:3: show the whole shot, not a tall crop */

/* --- Featured photo ---------------------------------------------------------
   For the engineer photo: a red frame with an even gap all round, and a badge;
   the photo itself untouched. Kept narrower so its low resolution shows less. */
.photo-feature { position: relative; margin: 12px; max-width: 440px; justify-self: center; width: calc(100% - 24px); }
.photo-feature::before {
  content: ''; position: absolute; inset: -12px;
  border: 3px solid var(--red); border-radius: calc(var(--radius) + 6px);
}
.photo-feature .photo { position: relative; max-height: 520px; }
.photo-badge {
  position: absolute; left: -14px; bottom: 28px; z-index: 1;
  display: flex; align-items: center; gap: .55rem;
  background: var(--navy); color: #fff; font-weight: 600; font-size: .9rem;
  padding: .7rem 1rem; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(11, 45, 74, .3);
  border-left: 4px solid var(--red);
}
.photo-badge svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 820px) {
  .photo-feature { margin: 10px; width: calc(100% - 20px); max-width: none; }
  .photo-feature::before { inset: -10px; }
  .photo-badge { left: 12px; bottom: 16px; }
}


/* --- Service cards ------------------------------------------------------- */
/* Row gap and top margin leave room for the icon badge, which sits half above each card. */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 1.25rem; margin-top: 3rem; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; display: flex; flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(11,45,74,.08), 0 12px 28px rgba(11,45,74,.12); }
.card { position: relative; padding-top: 3.25rem; text-align: center; align-items: center; }
/* The icon as a badge: a navy circle centred on the card's top edge, with a
   white ring so it lifts off the border. Turns red on hover. */
.card .icon {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; padding: 18px; box-sizing: border-box;
  border-radius: 50%; background: var(--navy); color: #fff;
  border: 4px solid #fff; box-shadow: 0 4px 14px rgba(11, 45, 74, .22);
  transition: background .15s;
}
.card:hover .icon { background: var(--red); }
.card p { color: var(--ink-soft); font-size: .95rem; flex: 1; }
.card-link {
  display: inline-block; padding: .35rem 0;
  color: var(--red-dk); font-weight: 600; font-size: .92rem; text-decoration: none; margin-top: .5rem;
}
.card-link svg { width: 16px; height: 16px; vertical-align: -3px; margin-left: .35rem; transition: transform .15s; }
.card-link:hover svg { transform: translateX(3px); }
a.card { text-decoration: none; color: inherit; }
/* Phones: two compact columns. Smaller badge, no description (the whole card
   links to the page that has it), so six services take three short rows. */
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 2.25rem .75rem; margin-top: 2.25rem; }
  .card { padding: 2.1rem .75rem 1rem; }
  .card .icon { width: 52px; height: 52px; padding: 12px; border-width: 3px; }
  .card h3 { font-size: .95rem; margin-bottom: .3rem; }
  .card p { display: none; }
  /* The link text is too long for a half-width card and wrapped, orphaning the
     arrow; show the arrow only. The text stays readable to screen readers. */
  .card .card-link { margin-top: auto; padding: .1rem 0 0; font-size: 0; line-height: 0; }
  .card .card-link svg { width: 20px; height: 20px; margin-left: 0; vertical-align: middle; }
}

/* --- Ticked lists -------------------------------------------------------- */
.ticks { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.ticks li { position: relative; padding: .45rem 0 .45rem 2rem; border-bottom: 1px solid var(--line); }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .72rem; width: 18px; height: 18px;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ticks-2 { columns: 2; column-gap: 2.5rem; }
.ticks-2 li { break-inside: avoid; }
@media (max-width: 640px) { .ticks-2 { columns: 1; } }

.panel {
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--navy);
  border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow);
}
.panel-red { border-top-color: var(--red); }
.panel h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; }
.panel h3 svg { width: 28px; height: 28px; color: var(--red); flex: none; }
.panel > .ticks:last-child { margin-bottom: 0; }
.panel > .ticks + .card-link { margin-top: -.75rem; }   /* the list's bottom margin is enough space before its link */
/* Intro text in its own column to the left of a pair of panels (Domestic,
   Installation), instead of a heading block stacked above them. */
@media (min-width: 1000px) {
  .intro-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2.5rem; align-items: start; }
  .intro-panels .section-head { margin-bottom: 0; padding-top: .5rem; }
}
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 820px) { .panels { grid-template-columns: 1fr; } }

/* --- Offer band ---------------------------------------------------------- */
.offer {
  background: var(--red); color: #fff;
}
.offer .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding-top: 1.5rem; padding-bottom: 1.5rem;
}
.offer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-weight: 600; }
.offer li { display: flex; align-items: center; gap: .5rem; }
.offer li svg { width: 20px; height: 20px; flex: none; }
.offer .btn { background: #fff; color: var(--red-dk); }
@media (max-width: 700px) {
  .offer .wrap, .offer ul { justify-content: center; text-align: center; }
  /* a long single item wraps to two lines: put its icon above it, not stranded at the left */
  .offer-stack li { flex-direction: column; gap: .4rem; }
}
.offer .btn:hover { background: var(--navy); color: #fff; }

/* --- Reviews ------------------------------------------------------------ */
.reviews { background: var(--navy); }
.reviews h2 { color: #fff; }
.reviews .eyebrow { color: var(--on-navy-soft); }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 2rem; }
/* Phones and tablets: one card at a time, swiped sideways, with the next card
   peeking in from the right so it is obvious there is more. The row bleeds to
   the screen edges so cards are not cut off at the page margin. */
@media (max-width: 900px) {
  .review-grid {
    display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) .25rem; scrollbar-width: none;
  }
  .review-grid::-webkit-scrollbar { display: none; }
  .review { flex: 0 0 min(85%, 420px); scroll-snap-align: start; }
  .review-grid:focus-visible { outline-offset: 4px; }
}
.review-dots { display: none; }
@media (max-width: 900px) {
  .review-dots { display: flex; justify-content: center; gap: .25rem; margin: -1.25rem 0 1.5rem; }
  /* A 32px button (a thumb-sized target) drawing a 10px dot. */
  .review-dots button {
    width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .review-dots button::before {
    content: ''; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .35);
  }
  .review-dots button[aria-current="true"]::before { background: #fff; }
}
.review {
  margin: 0; background: #fff; border-radius: var(--radius); padding: 1.75rem;
  border-top: 4px solid var(--red); display: flex; flex-direction: column;
}
.review-stars { display: flex; gap: 2px; margin-bottom: 1rem; color: var(--red); }
.review-stars svg { width: 18px; height: 18px; }
.review blockquote { margin: 0 0 1.25rem; flex: 1; font-size: .98rem; }
.review blockquote p { margin: 0; }
.review figcaption { font-weight: 700; color: var(--navy); font-size: .92rem; }
.review figcaption span { display: block; font-weight: 500; color: var(--ink-soft); font-size: .82rem; }
.review.is-placeholder blockquote {
  border: 2px dashed var(--line); border-radius: var(--radius); padding: 1rem;
  color: var(--ink-soft); font-style: italic; font-size: .88rem;
}

/* --- Team / about -------------------------------------------------------- */
/* team.webp is cropped above the name banner baked into the original (source/photos/team.png),
   which leaves a 6:1 strip. Keep it whole on phones too: a taller crop shows only 4 of the 10. */
.page-hero-team { padding-bottom: 0; }
.hero-team { position: relative; margin-top: clamp(1.5rem, 5vw, 4rem); }   /* matches the gap under every other banner */
/* Edge to edge. Past ~1400px wide the 1024px source would blur if it kept scaling, so the
   height is capped and the crop keeps the bottom (the faces), losing only sky and van roofs. */
.hero-team img { width: 100%; max-height: 300px; object-fit: cover; object-position: 50% 100%; }
.hero-team::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 45%;
  background: linear-gradient(var(--navy), rgba(11, 45, 74, 0));
}
.stat-row { display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 1.5rem 0; }
.stat strong { display: block; font-size: 2.4rem; line-height: 1; color: var(--navy); }
.stat span { font-size: .85rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* --- Accreditations ------------------------------------------------------ */
.accr { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem 3.5rem; }
.accr img { height: 96px; width: auto; }
.accr a { display: block; text-decoration: none; }
.accr-item { text-align: center; }
.accr-item img { margin: 0 auto .5rem; }
.accr-item span { font-size: .85rem; font-weight: 600; color: var(--ink-soft); }

/* --- Hours / contact ----------------------------------------------------- */
.status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 600; padding: .35rem .75rem; border-radius: 999px;
  background: var(--grey-lt); color: var(--ink);
}
.status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--grey); }
.status.is-open { background: #E6F4EA; color: #1E5E2E; }
.status.is-open::before { background: #2E8B47; }
.hours { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.hours th, .hours td { text-align: left; padding: .55rem 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.hours td { text-align: right; }
.hours tr.today th, .hours tr.today td { color: var(--navy); font-weight: 700; }
.hours tr.hours-group { display: none; }
@media (max-width: 700px) {
  .hours tr.hours-day { display: none; }
  .hours tr.hours-group { display: table-row; }
}
.note { font-size: .92rem; color: var(--ink-soft); }
.contact-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.contact-list li { display: flex; gap: .85rem; padding: .7rem 0; align-items: flex-start; }
.contact-list svg { width: 22px; height: 22px; color: var(--red); flex: none; margin-top: .15rem; }
.big-phone { display: inline-block; padding: .4rem 0; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; color: var(--navy); text-decoration: none; }
address { font-style: normal; }

/* --- Map ---------------------------------------------------------------- */
.map-frame {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow); background: var(--grey-lt);
}
.map-frame iframe { display: block; width: 100%; height: 380px; border: 0; }
.panel .map-frame { box-shadow: none; margin-bottom: 1.25rem; }

/* --- No heating page ---------------------------------------------------- */
.narrow { max-width: 820px; }
.alert {
  background: #FDECEC; border: 2px solid var(--red); border-radius: var(--radius);
  padding: 1.5rem 1.75rem; color: var(--ink);
}
.alert h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.3rem; color: var(--red-dk); }
.alert h2 svg { width: 28px; height: 28px; flex: none; }
.alert a { color: var(--red-dk); white-space: nowrap; }
.alert ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.alert li { margin: .2rem 0; }
.checks { display: grid; gap: .75rem; }
.check { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.check summary {
  display: flex; align-items: center; gap: .9rem; cursor: pointer; list-style: none;
  padding: 1.1rem 1.25rem; font-weight: 600; color: var(--navy); font-size: 1.05rem;
}
.check summary::-webkit-details-marker { display: none; }
.check summary::after {
  content: ''; margin-left: auto; width: 10px; height: 10px; flex: none;
  border-right: 2px solid var(--grey); border-bottom: 2px solid var(--grey);
  transform: rotate(45deg); transition: transform .15s;
}
.check[open] summary::after { transform: rotate(-135deg); }
.check-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: .9rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.check-body { padding: 0 1.25rem 1.1rem calc(1.25rem + 30px + .9rem); color: var(--ink-soft); }
.check-body strong { color: var(--ink); }
.check-body .ticks { margin-bottom: 0; }
@media (max-width: 600px) { .check-body { padding-left: 1.25rem; } }

/* --- Prose (boiler page) ------------------------------------------------- */
.prose { max-width: 720px; }
.prose h2 { margin-top: 2rem; }

/* --- CTA band ------------------------------------------------------------ */
.cta-band { background: var(--navy); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--on-navy-soft); max-width: 36em; margin: 0 auto 1.5rem; }
.cta-band .btn-row { justify-content: center; }

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: var(--on-navy-soft); font-size: .92rem; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 2.5rem;
  padding-top: 3.5rem; padding-bottom: 2.5rem;
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }
.footer-brand { display: flex; align-items: center; gap: .85rem; color: #fff; text-decoration: none; margin-bottom: 1rem; }
.footer-brand .mark-tile { background: #fff; border-radius: 8px; padding: 6px; }
.footer-brand img { width: 44px; height: 44px; }
.footer-brand span { font-weight: 700; text-transform: uppercase; line-height: 1.15; }
.site-footer h2 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: .25rem 0; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-contact li { display: flex; gap: .6rem; }
.footer-contact svg { width: 18px; height: 18px; flex: none; margin-top: .2rem; color: var(--grey); }
.footer-base {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 1.25rem; padding-bottom: 1.25rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  font-size: .82rem;
}
.footer-reg { font-size: .85rem; line-height: 1.7; }
.footer-tagline { font-style: italic; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .steam { display: none; }
  .check summary::after { transition: none; }
  .card, .card .icon, .card-link svg, .btn { transition: none; }
}