/* Flame Shield London — stylesheet.
   Design system derived from the approved Stitch "Safety & Heritage" direction:
   warm parchment ground, white surfaces, one disciplined heritage-red accent,
   London-charcoal dark sections, Lexend display type (self-hosted variable font,
   600/700 only), system stack for body. No icon fonts, no frameworks. */

@font-face {
  font-family: 'Lexend';
  src: url('/assets/fonts/lexend-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #1a1c1e;            /* london charcoal */
  --ink-soft: #3f4348;
  --muted: #5d5e61;          /* secondary */
  --faint: #74777f;          /* steel gray */
  --paper: #f9f7f2;          /* warm parchment: page ground */
  --surface: #ffffff;        /* cards + alternating sections */
  --surface-soft: #f3f3f6;
  --line: #e9e5dc;           /* hairline on parchment */
  --line-cool: #e4e4e7;      /* hairline on white */
  --line-strong: #d6d3ca;
  --red: #c8102e;            /* heritage red */
  --red-deep: #9e001f;
  --red-tint: #fdeeec;       /* soft red wash */
  --red-wash: #ffdad8;       /* icon chips */
  --amber-tint: #fdf6e7;
  --ok: #1b7f4d;
  --focus: #1a4fd6;
  --ink-panel: #1a1c1e;
  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(26, 28, 30, 0.05);
  --shadow-card: 0 1px 2px rgba(26, 28, 30, 0.04), 0 10px 34px -16px rgba(26, 28, 30, 0.14);
  --shadow-float: 0 8px 30px rgba(26, 28, 30, 0.07);
  --shadow-lg: 0 24px 60px -24px rgba(26, 28, 30, 0.28);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: 'Lexend', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --container: 1240px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 0.55em;
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 600;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.4rem); font-weight: 700; line-height: 1.08; }
h2 { font-size: clamp(1.85rem, 1.35rem + 2vw, 2.55rem); margin-top: 0; }
h3 { font-size: 1.13rem; letter-spacing: -0.01em; }
h1 .accent, h2 .accent { color: var(--red); }
p { margin: 0 0 1.15em; }
a { color: var(--red-deep); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }
ul, ol { padding-left: 1.25em; margin: 0 0 1.2em; }
li { margin-bottom: 0.4em; }
strong { font-weight: 700; color: var(--ink); }
small { color: var(--muted); }
::selection { background: var(--red); color: #fff; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 5vw, 44px); }
.container-narrow { max-width: 780px; }
.prose { max-width: 68ch; }
.prose h2 { scroll-margin-top: 96px; }
.prose > h2 { margin-top: 1.7em; }

.placeholder {
  display: inline; background: var(--amber-tint); border-bottom: 1px dashed #d0a541;
  color: #7a5a12; font-size: 0.82em; padding: 0 0.3em; border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  padding: 14px 28px; font-size: 0.99rem; line-height: 1.15; min-height: 50px;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    color 0.18s var(--ease), transform 0.14s var(--ease), box-shadow 0.18s var(--ease);
}
.btn .btn-arrow { transition: transform 0.2s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 1px 2px rgba(158, 0, 31, 0.3); }
.btn-primary:hover { background: var(--red-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(158, 0, 31, 0.55); }
.btn-primary:active { transform: translateY(0) scale(0.99); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2e3133; color: #fff; transform: translateY(-1px); }
.btn-dark:active { transform: translateY(0) scale(0.99); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-light { background: #fff; color: var(--red-deep); }
.btn-light:hover { background: var(--red-wash); color: var(--red-deep); transform: translateY(-1px); }
.btn-sm { padding: 10px 20px; font-size: 0.92rem; min-height: 44px; }
.btn-lg { padding: 16px 34px; font-size: 1.05rem; min-height: 54px; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-cool);
  transition: box-shadow 0.25s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 4px 24px -12px rgba(26, 28, 30, 0.16); }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 78px; }

.brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand-logo { height: 54px; width: auto; display: block; }

/* compact click-to-call button, mobile only (sits between logo and hamburger) */
.mobile-cta {
  display: none; align-items: center; gap: 7px; white-space: nowrap;
  background: var(--red); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 0.92rem; padding: 10px 15px; border-radius: var(--radius-sm);
  min-height: 44px; box-shadow: 0 4px 14px -6px rgba(158,0,31,0.5);
}
.mobile-cta:hover { background: var(--red-deep); color: #fff; }
.mobile-cta svg { flex: none; }

.main-nav > ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; align-items: center; }
.main-nav li { margin: 0; }
.main-nav a, .nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--ink-soft);
  text-decoration: none; background: none; border: 0; cursor: pointer;
  padding: 9px 14px; border-radius: 9px; transition: color 0.15s, background-color 0.15s;
}
.main-nav a:hover, .nav-trigger:hover { color: var(--red-deep); background: var(--paper); }
.main-nav a[aria-current="page"] { color: var(--red-deep); }
.nav-chev { transition: transform 0.22s var(--ease); margin-top: 1px; }
.has-mega:hover .nav-chev, .has-mega.open .nav-chev, .nav-trigger[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }

/* ---- mega-menu ---- */
.has-mega { position: static; }
.mega {
  position: absolute; top: calc(100% - 6px); left: 50%; transform: translate(-50%, 8px);
  width: min(760px, calc(100vw - 48px));
  background: var(--surface); border: 1px solid var(--line-cool); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 8px; z-index: 130;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.mega-wide { width: min(880px, calc(100vw - 48px)); }
.has-mega:focus-within > .mega, .has-mega.open > .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
/* invisible bridge covering the gap between the trigger and the panel so the
   pointer never crosses dead space (JS hover-intent delay backs this up) */
.mega::before { content: ""; position: absolute; top: -28px; left: -40px; right: -40px; height: 30px; }
.mega-inner { display: grid; grid-template-columns: 1fr 232px; gap: 8px; }
.mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; padding: 12px; }
.mega-cols-areas { grid-template-columns: repeat(4, 1fr); }
.mega-col-title { font-size: 0.68rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); margin: 4px 0 8px; padding: 0 10px; }
.mega-item { display: flex; align-items: flex-start; gap: 11px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: inherit; transition: background-color 0.14s; }
.mega-item:hover { background: var(--paper); }
.mega-item-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--red-wash); color: var(--red); display: grid; place-items: center; }
.mega-item-ico svg { width: 19px; height: 19px; }
.mega-item-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mega-item-txt strong { font-size: 0.92rem; font-weight: 650; color: var(--ink); }
.mega-item-txt small { font-size: 0.78rem; color: var(--muted); }
.mega-item[aria-current="page"] strong { color: var(--red-deep); }
.mega-area { display: block; padding: 8px 10px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; transition: background-color 0.14s, color 0.14s; }
.mega-area:hover { background: var(--paper); color: var(--red-deep); }
.mega-area[aria-current="page"] { color: var(--red-deep); }
.mega-feature {
  display: flex; flex-direction: column; gap: 5px; position: relative;
  background: var(--ink); color: #d7dae0; border-radius: var(--radius); padding: 20px 18px;
  text-decoration: none; overflow: hidden; transition: transform 0.2s var(--ease);
}
.mega-feature::before { content: ""; position: absolute; right: -50px; top: -60px; width: 200px; height: 200px; background: radial-gradient(closest-side, rgba(200,16,46,0.5), transparent 72%); pointer-events: none; }
.mega-feature:hover { transform: translateY(-2px); }
.mega-feature strong { color: #fff; font-family: var(--font-display); font-size: 1.02rem; position: relative; }
.mega-feature > span:not(.mega-feature-tag):not(.mega-feature-cta):not(.mega-feature-ico) { font-size: 0.83rem; color: #b6bac2; position: relative; }
.mega-feature-tag { align-self: flex-start; background: var(--red); color: #fff; font-size: 0.68rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; position: relative; }
.mega-feature-ico { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.12); color: #ffdad8; display: grid; place-items: center; position: relative; margin-bottom: 2px; }
.mega-feature-cta { margin-top: 4px; font-weight: 700; font-size: 0.85rem; color: #fff; position: relative; }

.header-actions { display: flex; align-items: center; gap: 14px; }
.phone-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.96rem; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.phone-link:hover { color: var(--red-deep); }
.phone-link svg { color: var(--red); flex: none; }
.phone-link-text { display: flex; flex-direction: column; line-height: 1.2; }
.phone-link-num { font-size: inherit; }
.phone-link-hours {
  font-weight: 500; font-size: 0.68rem; letter-spacing: 0.01em;
  color: var(--muted); margin-top: 1px;
}
.phone-link:hover .phone-link-hours { color: var(--muted); }
/* Under this width the hours line widens the phone block enough to wrap the
   header CTA onto two lines. The footer carries the hours on every page. */
@media (max-width: 1199px) { .phone-link-hours { display: none; } }

.menu-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 12px;
  background: none; border: 1px solid var(--line-strong); border-radius: 11px; cursor: pointer;
}
.menu-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s; }

/* mobile drawer with accordion sections */
.drawer-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(26, 28, 30, 0.52); animation: fade-in 0.2s ease; }
.mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(90vw, 400px); background: var(--surface);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.22);
  display: flex; flex-direction: column; overflow-y: auto; padding: 0 0 24px;
  animation: slide-in 0.28s var(--ease);
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(100%); } }
.drawer-head { display: flex; align-items: center; justify-content: flex-end; padding: 12px 16px; border-bottom: 1px solid var(--line-cool); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.drawer-close { width: 46px; height: 46px; font-size: 1.7rem; line-height: 1; background: none; border: 1px solid var(--line-strong); border-radius: 11px; cursor: pointer; color: var(--ink); flex: none; }
.drawer-body { padding: 8px 12px; }
.drawer-link { display: block; padding: 14px 12px; min-height: 50px; font-weight: 650; color: var(--ink); text-decoration: none; font-size: 1.04rem; border-radius: 10px; }
.drawer-link:hover { background: var(--paper); color: var(--red-deep); }
.drawer-acc { border-radius: 10px; }
.drawer-acc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; min-height: 50px; font-weight: 650; font-size: 1.04rem; color: var(--ink); cursor: pointer; border-radius: 10px; }
.drawer-acc > summary::-webkit-details-marker { display: none; }
.drawer-acc > summary svg { transition: transform 0.24s var(--ease); color: var(--faint); }
.drawer-acc[open] > summary svg { transform: rotate(180deg); }
.drawer-acc[open] > summary { color: var(--red-deep); }
.drawer-acc-body { padding: 2px 6px 12px; }
.drawer-sub-title { font-size: 0.68rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin: 12px 10px 4px; }
.drawer-sub-title:first-child { margin-top: 4px; }
.drawer-sublink { display: block; padding: 10px 14px; min-height: 44px; font-weight: 550; font-size: 0.96rem; color: var(--ink-soft); text-decoration: none; border-radius: 8px; border-left: 2px solid var(--line-cool); margin-left: 8px; }
.drawer-sublink:hover { background: var(--paper); color: var(--red-deep); border-left-color: var(--red); }
.drawer-sublink-strong { font-weight: 700; color: var(--red-deep); border-left-color: var(--red); }
.drawer-cta { padding: 14px 20px 0; display: grid; gap: 10px; margin-top: auto; }

/* ---------------------------------------------------------------- breadcrumbs */

.breadcrumbs { border-bottom: 1px solid var(--line); background: var(--paper); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 11px 0; font-size: 0.84rem; color: var(--muted); }
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: 4px; }
.breadcrumbs li + li::before { content: "/"; color: var(--faint); padding: 0 5px; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--red-deep); }

/* ---------------------------------------------------------------- badge + credential bar */

/* Clean editorial eyebrow: a short red rule + uppercase label. No pill, no dot. */
.badge {
  display: inline-flex; align-items: center; gap: 12px; width: fit-content;
  background: none; border: 0; padding: 0; box-shadow: none;
  font-size: 0.76rem; font-weight: 750; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--red-deep);
}
.badge::before { content: ""; flex: none; width: 26px; height: 2px; border-radius: 2px; background: var(--red); }

.trust-strip { margin-top: 2em; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; }
.trust-strip ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0; padding: 0; }
.trust-strip li { margin: 0; font-size: 0.82rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.trust-strip li strong { color: var(--ink); font-weight: 800; letter-spacing: 0.02em; }
.trust-strip li:not(:last-child)::after { content: ""; width: 1px; height: 15px; background: var(--line-strong); margin-left: 22px; }
@media (max-width: 620px) { .trust-strip li:not(:last-child)::after { display: none; } }

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(48px, 5vw, 96px) 0 clamp(48px, 5vw, 88px);
  background: linear-gradient(120deg, #16181a 0%, #221115 52%, #6f0e20 128%);
  border-bottom: 1px solid var(--ink);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }

/* --- background video --- */
.hero-video { width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; opacity: 0; transition: opacity 0.7s var(--ease); }
.hero-video.is-ready { opacity: 1; }
/* the poster carries the hero until the clip can paint, so there is never a
   flash of flat colour behind the headline */
.hero-media-video { background: #14161a url("/assets/img/hero-poster.webp") center / cover no-repeat; }
/* legibility scrim: dark on the copy side, fading toward the image */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* dark bed under the copy, then it opens up so the footage is actually
     visible; the vertical pass only protects the header and the bottom edge */
  background:
    linear-gradient(90deg, rgba(15,16,17,0.92) 0%, rgba(15,16,17,0.76) 38%, rgba(15,16,17,0.34) 70%, rgba(15,16,17,0.18) 100%),
    linear-gradient(180deg, rgba(15,16,17,0.45) 0%, rgba(15,16,17,0) 26%, rgba(15,16,17,0) 68%, rgba(15,16,17,0.38) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero .badge { margin-bottom: 1.5em; color: #ff9a90; }
.hero .badge::before { background: #ff5a4d; }
.hero h1 { margin-bottom: 0.5em; text-wrap: balance; color: #fff; }
.hero h1 .accent { color: #ff7a70; }
.hero .lede { font-size: clamp(1.08rem, 1rem + 0.5vw, 1.24rem); color: rgba(255,255,255,0.82); max-width: 32em; margin-bottom: 0; }
/* emphasised standards (BS 5839-1 etc.) must stay legible on the photo */
.hero .lede strong { color: #fff; font-weight: 700; }
.hero-points { list-style: none; padding: 0; margin: 1.7em 0 0; display: grid; gap: 13px; }
.hero-points li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; margin: 0; color: rgba(255,255,255,0.92); }
.hero-points li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.7em; }
.hero-cta-book { display: none; }
.hero-cta-call svg { flex: none; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.hero .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.hero .btn-outline:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }
.hero-creds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 1.8em 0 0; padding-top: 1.4em; border-top: 1px solid rgba(255,255,255,0.14); }
.hero-creds li { list-style: none; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin: 0; }
.hero-creds li strong { color: #fff; font-weight: 800; }
.hero-mobile-cta { display: none; }

/* page hero (inner pages) */
.page-hero { position: relative; border-bottom: 1px solid var(--line); padding: clamp(44px, 5vw, 76px) 0; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; top: -240px; right: -140px; width: 560px; height: 560px;
  background: radial-gradient(closest-side, rgba(255, 179, 177, 0.32), transparent 70%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .badge { margin-bottom: 1.5em; }
.page-hero h1 { max-width: 22em; margin-bottom: 0.4em; text-wrap: balance; }
.page-hero .lede { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.22rem); color: var(--muted); max-width: 44em; margin-bottom: 0; }

/* ---------------------------------------------------------------- sections */

.section { padding: clamp(36px, 4.2vw, 62px) 0; }
/* Kept as a hook for a hairline-separated band; the page keeps ONE background
   colour throughout so no section reads as a random white block. */
.section-warm { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Headings get room to breathe on one or two lines instead of stacking two
   words per row; the supporting line is wider still. */
.section-head { max-width: none; margin-bottom: clamp(22px, 2.6vw, 36px); }
.section-head h2 { margin: 0 0 0.35em; text-wrap: balance; }
.section-head p { color: var(--muted); font-size: 1.1rem; margin: 0; max-width: 78ch; }
.section-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head-center h2 { max-width: 30ch; margin-left: auto; margin-right: auto; }
.section-head-center p { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------- red takeover band */

/* takeover band: charcoal with a red glow accent (calmer than the old solid red) */
.band-red { position: relative; background: var(--ink-panel); color: #d7dae0; padding: clamp(36px, 4.5vw, 56px) 0; overflow: hidden; }
.band-red::before {
  content: ""; position: absolute; top: -60%; left: -6%; width: 55%; height: 220%;
  background: radial-gradient(closest-side, rgba(200, 16, 46, 0.4), transparent 70%);
  pointer-events: none;
}
.band-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: clamp(22px, 4vw, 56px); flex-wrap: wrap; }
.band-copy { display: flex; gap: 18px; align-items: flex-start; flex: 1 1 480px; }
.band-ico { flex: none; width: 54px; height: 54px; border-radius: 14px; background: var(--red); display: grid; place-items: center; color: #fff; box-shadow: 0 10px 24px -10px rgba(200, 16, 46, 0.6); }
.band-red h2 { color: #fff; margin: 0 0 0.35em; }
.band-red p { color: #b6bac2; margin: 0; max-width: 56ch; }
.band-red .btn { flex: none; }
.band-red .btn-light { background: var(--red); color: #fff; box-shadow: 0 1px 2px rgba(158, 0, 31, 0.3); }
.band-red .btn-light:hover { background: var(--red-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(158, 0, 31, 0.55); }
@media (max-width: 880px) {
  .band-red { padding: 30px 0 34px; }
  /* flex-basis must reset in column direction or it becomes a 480px-tall hole */
  .band-copy { flex: 0 1 auto; gap: 14px; }
  .band-ico { width: 46px; height: 46px; }
  .band-red .btn { width: 100%; }
}

/* ------------------------------------------------- bento services grid */

.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bento-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 0;
  background: var(--surface); border: 1px solid var(--line-cool); border-radius: var(--radius-lg);
  padding: 28px; text-decoration: none; color: inherit; overflow: hidden;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.bento-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); border-color: var(--line-strong); }
.bento-card h3 { margin: 0 0 0.45em; color: var(--ink); }
.bento-card p { margin: 0 0 1.1em; font-size: 0.95rem; color: var(--muted); }
.bento-ico {
  width: 48px; height: 48px; border-radius: 12px; background: var(--red-wash); color: var(--red);
  display: grid; place-items: center; margin-bottom: 18px;
  transition: transform 0.3s var(--ease);
}
.bento-card:hover .bento-ico { transform: scale(1.08); }
.bento-link { margin-top: auto; font-weight: 700; font-size: 0.9rem; color: var(--red-deep); display: inline-flex; align-items: center; gap: 6px; }
.bento-link::after { content: "\2192"; transition: transform 0.25s var(--ease); }
.bento-card:hover .bento-link::after { transform: translateX(4px); }

.bento-feature { grid-column: span 2; grid-row: span 2; padding: 34px; }
.bento-feature p { max-width: 46ch; font-size: 1rem; }
.bento-ghost {
  position: absolute; right: -60px; bottom: -70px; color: var(--ink); opacity: 0.045;
  pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.bento-feature:hover .bento-ghost { opacity: 0.08; transform: rotate(-4deg); }

.bento-dark { grid-column: span 2; background: var(--ink); border-color: var(--ink); flex-direction: row; align-items: center; gap: 24px; }
.bento-dark::before {
  content: ""; position: absolute; right: -80px; top: -90px; width: 300px; height: 300px;
  background: radial-gradient(closest-side, rgba(200, 16, 46, 0.5), transparent 72%);
  pointer-events: none;
}
.bento-dark h3 { color: #fff; }
.bento-dark p { color: #b9bdc4; max-width: 44ch; }
.bento-dark .bento-body { position: relative; flex: 1; }
.bento-dark .bento-tag {
  position: relative; flex: none; border: 1px solid rgba(255, 255, 255, 0.25); color: #fff;
  border-radius: var(--radius-sm); padding: 12px 20px; font-weight: 650; font-size: 0.92rem; white-space: nowrap;
  transition: background-color 0.2s var(--ease);
}
.bento-dark:hover .bento-tag { background: rgba(255, 255, 255, 0.12); }
.bento-dark:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -18px rgba(26, 28, 30, 0.55); }

@media (max-width: 980px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-feature { grid-column: span 2; grid-row: auto; }
  .bento-dark { grid-column: span 2; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .bento-feature, .bento-dark { grid-column: auto; }
  .bento-dark { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------- process timeline (home) */

.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; counter-reset: tl; }
.timeline::before { content: ""; position: absolute; top: 44px; left: 12.5%; right: 12.5%; height: 3px; border-radius: 3px; background: var(--line-cool); }
.timeline-fill { position: absolute; top: 44px; left: 12.5%; height: 3px; border-radius: 3px; width: var(--tl-progress, 0%); max-width: 75%; background: linear-gradient(90deg, var(--red-deep), var(--red)); z-index: 0; transition: width 0.7s var(--ease); }
.timeline-step { position: relative; z-index: 1; text-align: center; counter-increment: tl; }
.timeline-dot {
  position: relative; width: 88px; height: 88px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--line-cool); display: grid; place-items: center;
  color: var(--faint); box-shadow: var(--shadow-sm);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease), background-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.timeline-dot svg { position: relative; z-index: 1; transition: transform 0.4s var(--ease); }
.timeline-step.is-lit .timeline-dot { border-color: var(--red); background: var(--red); color: #fff; box-shadow: 0 0 0 6px var(--red-tint), 0 10px 24px -10px rgba(200,16,46,0.5); transform: translateY(-3px); }
.timeline-step.is-lit .timeline-dot svg { transform: scale(1.08); }
.timeline-step:hover .timeline-dot { border-color: var(--red); color: var(--red); }
.timeline-step.is-lit:hover .timeline-dot { color: #fff; }
.timeline-step h3 { margin: 0 0 0.3em; transition: color 0.4s var(--ease); }
.timeline-step h3::before { content: counter(tl, decimal-leading-zero); display: block; font-size: 0.8rem; font-weight: 750; letter-spacing: 0.1em; color: var(--faint); margin-bottom: 6px; transition: color 0.4s var(--ease); }
.timeline-step.is-lit h3::before { color: var(--red); }
.timeline-step p { margin: 0; font-size: 0.94rem; color: var(--muted); }
@media (max-width: 860px) {
  .timeline { grid-template-columns: 1fr; gap: 30px; }
  .timeline::before { top: 12px; bottom: 12px; left: 27px; right: auto; width: 3px; height: auto; display: block; }
  .timeline-fill { top: 12px; left: 27px; width: 3px; height: var(--tl-progress, 0%); max-width: none; max-height: calc(100% - 24px); background: linear-gradient(180deg, var(--red-deep), var(--red)); transition: height 0.7s var(--ease); }
  .timeline-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; row-gap: 2px; text-align: left; align-items: start; }
  .timeline-dot { grid-row: 1 / 3; width: 56px; height: 56px; margin: 0; }
  .timeline-step h3, .timeline-step p { grid-column: 2; }
  .timeline-step h3::before { display: inline; margin-right: 6px; }
  .timeline-dot svg { width: 22px; height: 22px; }
}

/* Scroll-driven (natively reversible) step lighting on modern browsers: dots
   light as they pass the lower third of the viewport and dim again when you
   scroll back up. Older browsers fall back to the JS one-way version. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .timeline-dot { animation: tl-dot linear both; animation-timeline: view(); animation-range: cover 8% cover 34%; }
    @keyframes tl-dot {
      to { border-color: var(--red); background: var(--red); color: #fff; box-shadow: 0 0 0 6px var(--red-tint), 0 10px 24px -10px rgba(200, 16, 46, 0.5); transform: translateY(-3px); }
    }
    .timeline-fill { animation: tl-fill-x linear both; animation-timeline: view(); animation-range: cover 8% cover 62%; transition: none; }
    @keyframes tl-fill-x { from { width: 0; } to { width: 75%; } }
    @media (max-width: 860px) {
      .timeline-fill { animation-name: tl-fill-y; }
      @keyframes tl-fill-y { from { height: 0; } to { height: calc(100% - 24px); } }
    }
  }
}

/* ------------------------------------------------- card directory (guides etc.) */

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.card {
  position: relative; padding: 26px; display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-cool); border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
a.card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); border-color: var(--line-strong); }
.card h3 { margin: 0; color: var(--ink); }
.card p { margin: 0; font-size: 0.95rem; color: var(--muted); }
.card .card-link { margin-top: 8px; font-weight: 700; font-size: 0.9rem; color: var(--red-deep); display: inline-flex; align-items: center; gap: 6px; }
.card .card-link::after { content: "\2192"; transition: transform 0.25s var(--ease); }
a.card:hover .card-link::after { transform: translateX(4px); }

.checklist { list-style: none; padding: 0; display: grid; gap: 13px; margin: 0 0 1.3em; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; margin: 0; color: var(--ink-soft); }
.checklist li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--red-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c8102e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }

.process { list-style: none; counter-reset: step; padding: 0; display: grid; gap: 26px; max-width: 640px; margin: 0; }
.process li { counter-increment: step; position: relative; padding-left: 64px; margin: 0; min-height: 46px; }
.process li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -2px;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--red); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.process li::after { content: ""; position: absolute; left: 43px; top: 34px; bottom: -26px; width: 1px; background: var(--line-strong); }
.process li:last-child::after { display: none; }
.process h3 { margin: 0 0 0.25em; color: var(--ink); }
.process p { margin: 0; color: var(--muted); }

.quote-box {
  border-left: 3px solid var(--red); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px; margin: 1.8em 0; box-shadow: var(--shadow-sm);
  font-size: 1.12rem; line-height: 1.55; color: var(--ink); font-weight: 450;
}
.quote-box strong { color: var(--red-deep); }
.quote-box p:last-child { margin-bottom: 0; }

.table-wrap { overflow-x: auto; margin: 1.5em 0; border: 1px solid var(--line-cool); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line-cool); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { background: var(--surface-soft); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); }
td { color: var(--ink-soft); }

/* FAQ heading centred so every homepage section header reads consistently */
.faq-section .container > h2 { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }

/* FAQ: white cards with rotating chevron */
.faq-item { background: var(--surface); border: 1px solid var(--line-cool); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; transition: box-shadow 0.25s var(--ease); }
.faq-item:hover { box-shadow: var(--shadow-sm); }
.faq-item[open] { box-shadow: var(--shadow-card); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%235d5e61' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center no-repeat; transition: transform 0.3s var(--ease); }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item summary h3 { margin: 0; font-size: 1.06rem; color: var(--ink); }
.faq-answer { padding: 0 22px 22px; color: var(--ink-soft); max-width: 70ch; }
.faq-answer p:last-child { margin-bottom: 0; }

/* CTA */
/* Closing CTA: a contained rounded panel on the page background, so it never
   collides with the footer the way the old full-bleed band did. */
.cta-section { padding-bottom: clamp(46px, 5vw, 76px); }
.cta-panel { position: relative; overflow: hidden; border-radius: clamp(20px, 2vw, 28px);
  padding: clamp(28px, 3.6vw, 56px); color: #d7dae0;
  background: linear-gradient(118deg, #17191b 0%, #1d1a1c 46%, #3a1119 82%, #58101f 100%);
  box-shadow: 0 30px 70px -34px rgba(26,28,30,0.6); }
.cta-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 88% 112%, rgba(200,16,46,0.42), rgba(200,16,46,0.1) 46%, transparent 72%); }
.cta-inner { position: relative; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.cta-eyebrow { font-size: 0.72rem; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; color: #ff9a90; margin: 0 0 12px; }
.cta-section h2 { color: #fff; margin: 0 0 0.45em; }
.cta-copy > p { color: #b6bac2; margin: 0; max-width: 52ch; }
.cta-points { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 9px; }
.cta-points li { display: flex; align-items: center; gap: 11px; font-size: 0.92rem; color: rgba(255,255,255,0.9); margin: 0; }
.cta-points li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.cta-actions { display: grid; gap: 16px; justify-items: stretch; }
.cta-actions .btn { width: 100%; }
.cta-call { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-radius: var(--radius);
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); text-decoration: none;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); }
.cta-call:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.3); }
.cta-call-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--red); color: #fff; }
.cta-call-ico svg { width: 20px; height: 20px; }
.cta-call small { display: block; font-size: 0.74rem; color: rgba(255,255,255,0.7); }
.cta-call strong { display: block; font-size: 1.06rem; color: #fff; letter-spacing: -0.01em; }
@media (max-width: 820px) {
  .cta-inner { grid-template-columns: 1fr; }
  .cta-points { margin-top: 16px; }
}

/* ---------------------------------------------------------------- service page layout */

/* The article and a sticky booking card side by side. Without this the aside
   dropped below the article and the prose sat in a narrow column with a dead
   half-screen next to it. */
.svc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: clamp(28px, 3.4vw, 56px); align-items: start; }
.svc-main { max-width: none; min-width: 0; }
.svc-main > h2 { margin-top: 1.9em; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.svc-main > h2:first-child { margin-top: 0; }
/* a hairline lead-in marks each new question in the article */
.svc-main > h2::before { content: ""; display: block; width: 46px; height: 3px; border-radius: 99px; background: var(--red); margin-bottom: 14px; }
.svc-main > p { max-width: 68ch; }

.svc-aside { position: sticky; top: 96px; }
.svc-card {
  border-radius: var(--radius-lg); padding: clamp(20px, 1.8vw, 26px);
  background: var(--surface); border: 1px solid rgba(200,16,46,0.22);
  box-shadow: 0 30px 60px -40px rgba(200,16,46,0.55), var(--shadow-card);
}
.svc-card-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 0.7rem;
  font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
.svc-card-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.svc-card-title { margin: 0 0 8px; font-size: 1.3rem; line-height: 1.2; }
.svc-card-text { margin: 0 0 16px; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }
.svc-card .btn-block { display: flex; width: 100%; justify-content: center; }
.svc-card .btn-block + .btn-block { margin-top: 9px; }
.svc-card-creds { list-style: none; margin: 16px 0 0; padding: 15px 0 0; border-top: 1px solid var(--line-cool);
  display: flex; flex-wrap: wrap; gap: 8px; }
.svc-card-creds li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 650; color: var(--ink-soft);
  background: var(--surface-soft); border: 1px solid var(--line-cool); border-radius: 999px; padding: 5px 10px; }
.svc-card-creds li::before { content: ""; width: 13px; height: 13px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23c8102e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; }

@media (max-width: 980px) {
  /* minmax(0, 1fr), not 1fr: a plain 1fr track refuses to shrink below the
     min-content width of what is inside it, and a wide table in the article
     was pushing the whole page sideways */
  .svc-layout { grid-template-columns: minmax(0, 1fr); }
  /* on phones the card is the CTA at the end of the read, not a sidebar */
  .svc-aside { position: static; }
}

/* ---------------------------------------------------------------- guides */

/* Article head. Narrower measure than a service page and no photograph: a
   compliance answer is read, not browsed, and a hero image here would only
   push the first sentence below the fold. */
.art-hero { padding: clamp(34px, 4vw, 60px) 0 clamp(20px, 2vw, 28px); background: var(--paper); }
.art-kicker { margin: 0 0 12px; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--red); }
.art-hero h1 { margin: 0 0 18px; font-size: clamp(1.85rem, 1.3rem + 2.3vw, 3rem); line-height: 1.1; }
.art-lede { margin: 0 0 22px; max-width: 62ch; font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem);
  line-height: 1.55; color: var(--ink-soft); }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 0.82rem; color: var(--muted); }
.art-meta-item strong { color: var(--ink-soft); font-weight: 650; }
.art-meta-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }
@media (max-width: 620px) {
  /* the byline is the least useful item on a phone, so it goes rather than
     wrapping the row onto a third line */
  .art-meta-by, .art-meta-by + .art-meta-sep, .art-meta-item + .art-meta-sep:last-of-type { display: none; }
}

.art-section { padding-top: clamp(24px, 2.6vw, 38px); }
.art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 3.4vw, 56px); align-items: start; }
.art-main { max-width: none; min-width: 0; }
.art-main > h2 { margin-top: 2em; font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem); scroll-margin-top: 96px; }
.art-main > h2:first-child { margin-top: 0; }
.art-main > h2::before { content: ""; display: block; width: 46px; height: 3px; border-radius: 99px;
  background: var(--red); margin-bottom: 14px; }
.art-main > p { max-width: 68ch; }

/* The extractable answer. Set apart from the body so a reader scanning for the
   answer finds it, and so an answer engine has an unambiguous block to lift. */
.art-answer { margin: 0 0 1.1em; padding: 2px 0 2px 18px; border-left: 3px solid var(--red);
  max-width: 68ch; }
.art-answer p { margin: 0; font-size: 1.06rem; line-height: 1.6; font-weight: 500; color: var(--ink); }

.art-tldr { margin: 0 0 2.2em; padding: clamp(18px, 1.8vw, 24px); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line-cool); box-shadow: var(--shadow-sm); }
.art-tldr-label { margin: 0 0 8px; font-size: 0.7rem; font-weight: 750; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--red); }
.art-tldr p:last-child { margin-bottom: 0; }
.art-tldr p { font-size: 0.98rem; line-height: 1.62; color: var(--ink-soft); }

/* The rail carries a contents list and the booking card. Together they are
   taller than a 768px laptop viewport, and a sticky element taller than the
   screen strands whatever sits at its bottom: the accreditation badges under
   the button never came into view. Capping the rail and letting the contents
   list scroll inside it keeps the card, the button and the badges reachable at
   any window height. */
.art-aside { position: sticky; top: 96px; max-height: calc(100vh - 112px);
  display: flex; flex-direction: column; }
.art-rail { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.art-toc { padding: clamp(16px, 1.5vw, 20px); border-radius: var(--radius-lg);
  background: var(--surface-soft); border: 1px solid var(--line-cool);
  min-height: 0; display: flex; flex-direction: column; }
.art-toc ol { overflow-y: auto; scrollbar-width: thin; }
.art-rail .svc-card { flex: none; }
.art-toc-title { margin: 0 0 10px; font-size: 0.7rem; font-weight: 750; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); }
.art-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.art-toc li { counter-increment: toc; }
.art-toc li + li { margin-top: 2px; }
.art-toc a { display: grid; grid-template-columns: 20px 1fr; gap: 6px; padding: 6px 0;
  font-size: 0.86rem; line-height: 1.4; color: var(--ink-soft); text-decoration: none; }
.art-toc a::before { content: counter(toc); font-size: 0.72rem; font-weight: 700; color: var(--faint);
  padding-top: 2px; }
.art-toc a:hover { color: var(--red-deep); }

/* Mid-article prompt. Quieter than the closing CTA on purpose: it is an offer
   of help at the moment the reader understands their obligation, not a wall. */
.art-inline-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(14px, 1.6vw, 20px); margin: 2.2em 0; padding: clamp(18px, 1.8vw, 24px);
  border-radius: var(--radius-lg); background: var(--red-tint); border: 1px solid rgba(200,16,46,0.18); }
.art-inline-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 12px; background: var(--red-wash); color: var(--red-deep); }
.art-inline-head { margin: 0 0 4px; font-family: 'Lexend', system-ui, sans-serif; font-weight: 700;
  font-size: 1.02rem; line-height: 1.3; color: var(--ink); }
.art-inline-text { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }
.art-inline-cta .btn { flex: none; white-space: nowrap; }
@media (max-width: 760px) {
  .art-inline-cta { grid-template-columns: auto minmax(0, 1fr); }
  .art-inline-cta .btn { grid-column: 1 / -1; justify-content: center; }
}

.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.guide-card { display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 2vw, 26px);
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line-cool);
  box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: rgba(200,16,46,0.3); }
.guide-card-tag { align-self: flex-start; font-size: 0.66rem; font-weight: 750; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--red); background: var(--red-tint);
  border-radius: 999px; padding: 4px 10px; }
.guide-card h3 { margin: 4px 0 0; font-size: 1.12rem; line-height: 1.28; }
.guide-card p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--muted); flex: 1; }
.guide-card-go { margin-top: 6px; font-size: 0.84rem; font-weight: 700; color: var(--red-deep); }
.guide-card:hover .guide-card-go { color: var(--red); }

@media (max-width: 980px) {
  .art-layout { grid-template-columns: minmax(0, 1fr); }
  /* on a phone the rail is the end of the read, and a contents list after the
     article is noise, so only the booking card survives. The viewport cap has
     to go with the stickiness, or it would clip the card in normal flow. */
  .art-aside { position: static; max-height: none; display: block; }
  .art-toc { display: none; }
}

/* ---------------------------------------------------------------- opening hours */

.hours-table { width: 100%; border-collapse: collapse; margin: 4px 0 12px; }
.hours-table th, .hours-table td { padding: 9px 0; border-bottom: 1px solid var(--line-cool); font-size: 0.93rem; text-align: left; }
.hours-table th { font-weight: 650; color: var(--ink); background: none; text-transform: none; letter-spacing: normal; font-size: 0.93rem; width: auto; }
.hours-table td { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- link tiles */

.ltiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1.4em 0 1.6em; }
.ltile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 17px; border-radius: var(--radius); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line-cool); box-shadow: var(--shadow-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.ltile:hover { border-color: var(--red); background: var(--red-wash); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.ltile-name { font-weight: 650; font-size: 0.95rem; color: var(--ink); line-height: 1.35; }
.ltile:hover .ltile-name { color: var(--red-deep); }
.ltile-go { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--red-wash); color: var(--red); font-size: 0.9rem; transition: transform 0.25s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease); }
.ltile:hover .ltile-go { background: var(--red); color: #fff; transform: translateX(3px); }
@media (max-width: 560px) {
  .ltiles { gap: 8px; }
  .ltile { padding: 12px 13px; }
  .ltile-name { font-size: 0.87rem; }
  .ltile-go { width: 22px; height: 22px; font-size: 0.8rem; }
}

/* every article heading gets the same red rule lead-in, not just service pages */
.prose > h2::before {
  content: ""; display: block; width: 46px; height: 3px; border-radius: 99px;
  background: var(--red); margin-bottom: 14px;
}

/* ---------------------------------------------------------------- proof strip */

.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.proof-card { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2vw, 28px);
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line-cool); box-shadow: var(--shadow-card); }
.proof-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: var(--red-wash); border: 1px solid rgba(200,16,46,0.14); color: var(--red); }
.proof-mark svg { width: 16px; height: 16px; }
.proof-card blockquote { margin: 0; font-size: 0.96rem; line-height: 1.6; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.proof-by { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line-cool);
  font-size: 0.8rem; font-weight: 650; color: var(--ink); }
.proof-by span { display: block; font-weight: 500; color: var(--muted); }
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- us vs them */

.vs-section { position: relative; overflow: hidden; }
.vs-glow { position: absolute; inset: auto -10% -30% 30%; height: 420px; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(200,16,46,0.10), transparent 70%); }
.vs-board { position: relative; }

/* header row: the two sides named once, then every row reads as a comparison */
.vs-headrow, .vs-row { display: grid; grid-template-columns: 190px 1fr 1fr; gap: clamp(12px, 1.4vw, 20px); align-items: stretch; }
.vs-headrow { margin-bottom: 12px; }
.vs-hcell { display: flex; align-items: center; gap: 11px; padding: 12px 18px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.vs-hcell-them { background: var(--surface-soft); color: var(--faint); border: 1px solid var(--line-cool); }
.vs-hcell-us { background: var(--red); color: #fff; box-shadow: 0 16px 30px -18px rgba(200,16,46,0.75); }
.vs-badge { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.vs-badge svg { width: 15px; height: 15px; }
.vs-badge-them { background: rgba(26,28,30,0.07); color: var(--faint); }
.vs-badge-us { background: rgba(255,255,255,0.2); color: #fff; }

/* the spine runs between the two columns and fills as the rows light up */
.vs-spine { position: absolute; top: 62px; bottom: 8px; left: calc(190px + clamp(12px, 1.4vw, 20px) + (100% - 190px - clamp(12px, 1.4vw, 20px) * 2) / 2 + clamp(12px, 1.4vw, 20px) / 2);
  width: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.vs-spine-fill { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--red), var(--red-deep));
  transition: height 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }

.vs-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vs-row { position: relative; padding: 4px 0; opacity: 0; transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.vs-row.is-in { opacity: 1; transform: none; }
.vs-topic { display: flex; align-items: center; gap: 11px; padding: 16px 4px 16px 0; }
.vs-topic-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--red-wash); color: var(--red); border: 1px solid rgba(200,16,46,0.14); }
.vs-topic-ico svg { width: 19px; height: 19px; }
.vs-topic-label { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: var(--ink); }
.vs-cell { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-radius: var(--radius);
  border: 1px solid var(--line-cool); font-size: 0.95rem; line-height: 1.5;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.3s var(--ease); }
.vs-cell-them { background: var(--surface-soft); color: var(--muted); }
.vs-cell-us { background: var(--surface); color: var(--ink-soft); }
.vs-row.is-in .vs-cell-us { border-color: rgba(200,16,46,0.26); box-shadow: 0 18px 34px -26px rgba(200,16,46,0.6); }
.vs-row:hover .vs-cell-us { transform: translateY(-2px); border-color: var(--red); box-shadow: 0 22px 40px -24px rgba(200,16,46,0.7); }
.vs-row:hover .vs-cell-them { opacity: 0.72; }
.vs-mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px; }
.vs-mark svg { width: 13px; height: 13px; }
.vs-mark-them { background: rgba(26,28,30,0.07); color: var(--faint); }
.vs-mark-us { background: var(--red-wash); color: var(--red); }
/* the tick draws itself in once the row arrives */
.vs-draw { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.5s var(--ease) 0.15s; }
.vs-row.is-in .vs-draw, .vs-badge-us .vs-draw { stroke-dashoffset: 0; }
.vs-txt strong { color: var(--ink); }
.vs-chip { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--red-wash);
  border: 1px solid rgba(200,16,46,0.16); color: var(--red-deep); font-size: 0.7rem; font-weight: 750;
  letter-spacing: 0.03em; white-space: nowrap; vertical-align: 1px; }
.vs-foot { max-width: 74ch; margin: clamp(26px, 3vw, 40px) auto 0; text-align: center; font-size: 0.98rem; color: var(--muted); }
.vs-foot strong { color: var(--ink); }

/* swipe affordance, phones only */
.vs-hint { display: none; align-items: center; justify-content: center; gap: 8px; margin-top: 14px;
  font-size: 0.74rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.vs-hint svg { width: 15px; height: 15px; }
@media (max-width: 900px) {
  /* one card per topic, swiped sideways: six stacked cards made this the
     longest scroll on the page, and a rail keeps it to one screen */
  .vs-spine, .vs-headrow { display: none; }
  .vs-rows {
    display: flex; gap: 12px; margin: 0 -20px; padding: 4px 20px 10px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: 20px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .vs-rows::-webkit-scrollbar { display: none; }
  .vs-row {
    display: block; flex: 0 0 auto; width: 80vw; max-width: 340px; scroll-snap-align: start;
    padding: 18px; border-radius: var(--radius-lg); border: 1px solid var(--line-cool);
    background: var(--surface); box-shadow: var(--shadow-card);
    opacity: 1; transform: none; transition: none;
  }
  .vs-topic { padding: 0 0 12px; }
  .vs-cell { border: 0; padding: 12px 0 0; border-radius: 0; font-size: 0.9rem; background: none; }
  .vs-cell-them { border-top: 1px solid var(--line-cool); }
  .vs-cell-us { border-top: 1px solid rgba(200,16,46,0.2); }
  .vs-row.is-in .vs-cell-us, .vs-row:hover .vs-cell-us { box-shadow: none; border-color: rgba(200,16,46,0.2); transform: none; }
  .vs-hint { display: flex; }
  .vs-foot { margin-top: 22px; font-size: 0.92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-row { opacity: 1; transform: none; }
  .vs-draw { stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------- quiz card */

.quiz-card {
  position: relative; background: var(--surface); border: 1px solid var(--line-cool); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: clamp(24px, 2.4vw, 32px); padding-top: clamp(28px, 2.6vw, 36px);
  width: 100%; max-width: 520px; justify-self: end; overflow: hidden;
}
.quiz-progress { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--surface-soft); border-radius: 0; overflow: hidden; margin: 0; }
.quiz-progress-bar { height: 100%; width: 16%; background: linear-gradient(90deg, var(--red-deep), var(--red)); border-radius: 0 999px 999px 0; transition: width 0.5s var(--ease); }
.quiz-head { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 8px; margin-bottom: 5px; }
.quiz-title { font-family: var(--font-display); font-size: 1.32rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; color: var(--ink); }
.quiz-step-count { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-deep); background: var(--red-tint); padding: 4px 10px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.quiz-step-count::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.quiz-sub { font-size: 0.9rem; color: var(--muted); margin: 6px 0 20px; }

.quiz-step-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin: 0 0 14px; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .quiz-step:not([hidden]) { animation: quiz-step-in 0.4s var(--ease) both; }
  @keyframes quiz-step-in { from { opacity: 0; transform: translateX(16px); } }
}
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 0 6px; }
.option-grid.cols-1 { grid-template-columns: 1fr; }
.option-btn {
  display: flex; align-items: center; text-align: left;
  font: inherit; font-size: 0.93rem; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-cool); border-radius: var(--radius-sm);
  padding: 11px 14px; min-height: 46px; cursor: pointer;
  transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease),
    box-shadow 0.16s var(--ease), transform 0.12s var(--ease), color 0.16s var(--ease);
}
.option-btn span { min-width: 0; }
.option-btn:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.option-btn:active { transform: scale(0.985); }
.option-btn[aria-pressed="true"] { border-color: var(--red); background: var(--red-tint); color: var(--red-deep); }
/* the "Something else" row only exists on phones, where the long lists fold */
.option-more { display: none; color: var(--muted); font-weight: 550; }
@media (max-width: 560px) {
  /* one clean column on phones: nothing wraps, nothing clips */
  .option-grid { grid-template-columns: 1fr; }
  /* eight rows made the card taller than the screen and pushed Next out of
     reach: show the likely answers, keep the rest one tap away */
  .option-grid .opt-more { display: none; }
  .option-grid.is-open .opt-more { display: flex; }
  .option-grid .option-more { display: flex; }
  .option-grid.is-open .option-more { display: none; }
}

.quiz-field { margin-bottom: 16px; }
.quiz-field label, .field label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 7px; color: var(--ink); }
.quiz-field .hint, .field .hint { font-size: 0.82rem; color: var(--muted); margin-top: 6px; }
input[type="text"], input[type="tel"], input[type="email"], input[type="date"], textarea, select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface);
  border: 2px solid var(--line-cool); border-radius: var(--radius-sm); padding: 12px 15px; min-height: 50px;
  transition: border-color 0.14s, box-shadow 0.14s;
}
textarea { min-height: 92px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px var(--red-tint); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--red); }

.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-pill { position: relative; }
.radio-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-pill span { display: inline-flex; align-items: center; min-height: 48px; border: 2px solid var(--line-cool); border-radius: var(--radius-sm); padding: 10px 18px; font-weight: 600; font-size: 0.92rem; cursor: pointer; transition: border-color 0.16s, background-color 0.16s; }
.radio-pill:hover span { border-color: var(--line-strong); }
.radio-pill input:checked + span { border-color: var(--red); background: var(--red-tint); }
.radio-pill input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.field-error { display: none; color: var(--red-deep); font-size: 0.85rem; font-weight: 600; margin-top: 7px; }
.field-error.show { display: block; animation: error-in 0.25s var(--ease); }
@keyframes error-in { from { opacity: 0; transform: translateY(-3px); } }
.quiz-notice { display: none; background: var(--amber-tint); border: 1px solid #e6cd86; border-radius: var(--radius-sm); padding: 11px 14px; font-size: 0.88rem; margin-top: 10px; color: #6f5410; }
.quiz-notice.show { display: block; animation: error-in 0.25s var(--ease); }

.quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
.quiz-back { font: inherit; font-weight: 700; font-size: 0.94rem; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 13px 10px; min-height: 48px; border-radius: 8px; transition: color 0.15s; }
.quiz-back:hover { color: var(--ink); }
/* Next fills the whole remaining row (no stray empty space on its left) */
.quiz-next { flex: 1 1 auto; margin-left: 0; }
/* Next matches every other primary button on the site: heritage red. */
.quiz-card .quiz-next.btn-primary { background: var(--red); box-shadow: 0 1px 2px rgba(158, 0, 31, 0.3); }
.quiz-card .quiz-next.btn-primary:hover { background: var(--red-deep); box-shadow: 0 14px 28px -12px rgba(158, 0, 31, 0.55); transform: translateY(-1px); }

/* fixed +44 country prefix; the input holds the national number only */
.phone-input { display: flex; align-items: stretch; border: 2px solid var(--line-cool); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.14s, box-shadow 0.14s; }
.phone-input:focus-within { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-tint); }
.phone-prefix { display: flex; align-items: center; padding: 0 12px 0 15px; font-weight: 700; color: var(--ink); background: var(--surface-soft); border-right: 1px solid var(--line-cool); font-variant-numeric: tabular-nums; }
.phone-input input[type="tel"] { border: 0; border-radius: 0; box-shadow: none; }
.phone-input input[type="tel"]:focus { box-shadow: none; }
.quiz-legend { font-weight: 700; font-size: 0.9rem; margin-bottom: 8px; padding: 0; color: var(--ink); }

.consent-row { display: flex; gap: 11px; align-items: flex-start; margin: 4px 0 2px; }
.consent-row input[type="checkbox"] { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--red); flex: none; }
.consent-row label { font-weight: 500; font-size: 0.88rem; margin: 0; color: var(--ink-soft); }

/* Booking confirmation. The card lives inside .hero, which sets color:#fff for
   the video background, so EVERY text node in here needs an explicit colour or
   it inherits white and vanishes against the white card. That was the original
   bug: only the h3 and the phone link had colours, so the panel rendered as a
   tall empty box with a stray phone number in it. */
.quiz-success { text-align: left; color: var(--ink); }
.quiz-success h3 { font-family: var(--font-display); font-size: 1.34rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--ink); }
.quiz-success .success-lead { font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 18px; }
.quiz-success .success-mark {
  width: 46px; height: 46px; border-radius: 50%; background: #e8f5ee; color: var(--ok);
  display: grid; place-items: center; margin-bottom: 14px;
}
.quiz-success .success-mark svg { width: 24px; height: 24px; display: block; }

/* Read-back of what they actually submitted: catches a mistyped phone number
   before we waste a call, and reassures that the details landed. */
.success-summary {
  margin: 0 0 18px; padding: 14px 16px; background: var(--surface-soft);
  border: 1px solid var(--line-cool); border-radius: var(--radius-sm);
  display: grid; gap: 9px;
}
.success-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.success-summary dt { font-size: 0.78rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); margin: 0; flex: none; }
.success-summary dd { margin: 0; font-size: 0.92rem; font-weight: 650; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* on a phone the card is ~330px wide: side-by-side label/value squeezes
   "Wed 29 Jul 2026, morning, 8am to 12pm" into three ragged lines */
@media (max-width: 560px) {
  .success-summary > div { display: block; }
  .success-summary dd { text-align: left; margin-top: 2px; }
}

.success-next { margin: 0 0 18px; }
.success-next h4 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 650; margin: 0 0 10px; color: var(--ink); }
.success-next ol { margin: 0; padding: 0; list-style: none; counter-reset: eh-step; display: grid; gap: 10px; }
.success-next li {
  counter-increment: eh-step; position: relative; padding-left: 30px;
  font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft);
}
.success-next li::before {
  content: counter(eh-step); position: absolute; left: 0; top: 0.05em;
  width: 20px; height: 20px; border-radius: 50%; background: var(--red-tint); color: var(--red-deep);
  font-size: 0.72rem; font-weight: 750; display: grid; place-items: center; font-variant-numeric: tabular-nums;
}

.success-urgent {
  margin: 0; padding-top: 15px; border-top: 1px solid var(--line-cool);
  font-size: 0.9rem; color: var(--ink-soft);
}
.success-urgent a { color: var(--red-deep); }
.success-urgent .success-hours { display: block; margin-top: 3px; font-size: 0.8rem; color: var(--faint); }

@media (prefers-reduced-motion: no-preference) {
  .quiz-success:not([hidden]) { animation: quiz-step-in 0.4s var(--ease) both; }
  .quiz-success:not([hidden]) .success-mark { animation: success-pop 0.55s var(--ease) both 0.1s; }
  @keyframes success-pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
}

.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }


/* ---------------------------------------------------------------- footer */

.site-footer { background: var(--ink-panel); color: #a8adb7; padding: clamp(52px, 6vw, 76px) 0 100px; font-size: 0.94rem; }
/* six columns since the legal set moved out of Company into its own list */
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1.1fr; gap: clamp(24px, 2.6vw, 40px); }
/* logo-footer.webp already has the wordmark recoloured for dark backgrounds
   (red emblem kept, charcoal "SOLUTIONS" turned white), so no filter here: a
   brightness/invert filter would flatten the shield into a solid white blob. */
.footer-logo { height: 52px; width: auto; margin-bottom: 16px; }
.footer-brand { font-family: var(--font-display); color: #fff; font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
.footer-about p { color: #9297a1; max-width: 34ch; }
.footer-creds { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 16px 0 0; }
.footer-creds li { margin: 0; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: #c6cad2; }
.footer-heading { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: #74777f; margin: 0 0 16px; font-weight: 700; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { color: #ccd0d7; text-decoration: none; transition: color 0.15s; }
.site-footer a:hover { color: #fff; }
.footer-contact li { color: #9297a1; }
.site-footer .placeholder { color: #e8c15c; background: rgba(232, 193, 92, 0.1); border-color: rgba(232, 193, 92, 0.4); }
.footer-legal { border-top: 1px solid #2e3133; margin-top: 44px; padding-top: 24px; font-size: 0.84rem; color: #74777f; }
.footer-legal p { margin-bottom: 6px; }
/* reopening the consent banner is an action, not navigation, so it is a button
   that has been made to sit in the link list without looking foreign */
.footer-linkbtn {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: #ccd0d7; text-align: left; cursor: pointer;
  transition: color 0.15s;
}
.footer-linkbtn:hover { color: #fff; }

/* ---------------------------------------------------------------- consent banner */

/* position:fixed and pre-rendered hidden, so appearing costs no layout shift.
   Sits above the sticky call bar (z-index 90) and the header. */
.cc {
  position: fixed; inset: auto 0 0 0; z-index: 200;
  padding: clamp(12px, 2vw, 20px);
  display: flex; justify-content: center;
}
.cc-panel {
  width: min(680px, 100%);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-cool); border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px -12px rgba(26, 28, 30, 0.35);
  padding: clamp(18px, 2.2vw, 26px);
  transform: translateY(12px); opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.cc.is-open .cc-panel { transform: none; opacity: 1; }
.cc-title { margin: 0 0 8px; font-size: 1.08rem; line-height: 1.25; }
/* #3f4348 on #ffffff is about 9.7:1, comfortably past WCAG AA */
.cc-text { margin: 0 0 16px; font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); }
.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Both buttons are identical. The ICO treats a banner that emphasises accept
   over reject as non-compliant, so neither gets the site's primary red. */
.cc-btn {
  appearance: none; font: inherit; font-weight: 650; font-size: 0.92rem;
  padding: 12px 14px; cursor: pointer;
  color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--ink); border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}
.cc-btn:hover { background: var(--ink); color: #fff; }
.cc-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cc-more { margin: 14px 0 0; font-size: 0.86rem; }
.cc-more a { color: var(--red-deep); }

@media (max-width: 420px) {
  /* stacked, still equal: same width, same style, accept simply comes first */
  .cc-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-panel { transition: none; transform: none; opacity: 1; }
}

/* sticky click-to-call (mobile only) */
.sticky-call {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none;
  grid-template-columns: 1fr 1.4fr; gap: 10px; background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px); border-top: 1px solid var(--line-cool);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(26, 28, 30, 0.08);
}
.sticky-call a {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  font-weight: 700; font-size: 0.95rem; text-decoration: none; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); border: 2px solid var(--ink);
}
.sticky-call a.sticky-book { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 4px 14px -6px rgba(158, 0, 31, 0.5); }

/* ---------------------------------------------------------------- scroll reveal */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .reveal.is-visible { opacity: 1; transform: none; }
  .reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: var(--reveal-d, 0ms); }
  .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
  .home .hero-copy > *, .home .hero .quiz-card { animation: rise 0.75s var(--ease) both; }
  .home .hero-copy > *:nth-child(2) { animation-delay: 0.06s; }
  .home .hero-copy > *:nth-child(3) { animation-delay: 0.12s; }
  .home .hero-copy > *:nth-child(4) { animation-delay: 0.18s; }
  .home .hero-copy > *:nth-child(5) { animation-delay: 0.24s; }
  .home .hero .quiz-card { animation-delay: 0.14s; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } }
}

/* ---------------------------------------------------------------- accreditations marquee */

/* Fused to the bottom of the hero: a continuous, seamless logo belt.
   Two identical groups slide by exactly one group width, so the loop never
   shows a seam or a gap at any viewport width. */
.accred { background: var(--paper); border-bottom: 1px solid var(--line); padding: clamp(18px, 2.2vw, 26px) 0; overflow: hidden; }
.marquee { position: relative; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; will-change: transform; }
/* Fixed-width cards keep both groups exactly equal, so the -50% slide is
   seamless; from tablet up the group also spans the viewport so no gap can
   appear on wide monitors. */
.marquee-group { display: flex; align-items: stretch; gap: 16px; flex: none; }
.accred-card {
  display: flex; align-items: center; gap: 13px; flex: none; width: 232px;
  background: var(--surface); border: 1px solid var(--line-cool); border-radius: var(--radius);
  padding: 13px 16px; box-shadow: var(--shadow-sm);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.accred-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.accred-card-logo { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.accred-card-logo img { width: 40px; height: 40px; object-fit: contain; }
.accred-card-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.accred-card-txt strong { font-size: 0.95rem; font-weight: 750; color: var(--ink); letter-spacing: -0.01em; }
.accred-card-txt small { font-size: 0.75rem; color: var(--muted); }
@media (max-width: 560px) { .accred-card { width: 208px; padding: 11px 13px; gap: 11px; } .accred-card-logo { width: 44px; height: 44px; } .accred-card-logo img { width: 34px; height: 34px; } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask: none; mask: none; }
  .marquee-track { width: 100%; justify-content: center; transform: none !important; }
  .marquee-group { flex-wrap: wrap; justify-content: center; min-width: 0; }
  .marquee-group[aria-hidden="true"] { display: none; }
}

/* ---------------------------------------------------------------- services showcase slider */

.showcase-head { position: relative; margin-bottom: clamp(24px, 3vw, 38px); }
.showcase-head .section-head { margin-bottom: 0; }
.showcase-nav { display: flex; gap: 10px; position: absolute; right: 0; bottom: 0; }
.showcase-btn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: border-color 0.16s, color 0.16s, background-color 0.16s, transform 0.14s; }
.showcase-btn:hover { border-color: var(--red); color: var(--red-deep); transform: translateY(-1px); }
.showcase-btn:disabled { opacity: 0.35; cursor: default; transform: none; border-color: var(--line-strong); color: var(--muted); }
.showcase-scroller {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr);
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 0 16px; margin: 0 calc(-1 * clamp(20px, 5vw, 44px)); padding-left: clamp(20px, 5vw, 44px); padding-right: clamp(20px, 5vw, 44px);
  scrollbar-width: none;
}
.showcase-scroller::-webkit-scrollbar { display: none; }
.showcase-card {
  scroll-snap-align: start; position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit;
  background: var(--ink); border: 1px solid var(--line-cool); min-height: 340px;
  box-shadow: var(--shadow-card); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.showcase-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.showcase-img { position: absolute; inset: 0; z-index: 0; background: linear-gradient(150deg, #24262a, #3a1114 130%); }
.showcase-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.showcase-card:hover .showcase-img img { transform: scale(1.06); }
.showcase-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,16,17,0.15) 0%, rgba(15,16,17,0.55) 55%, rgba(15,16,17,0.92) 100%); }
.showcase-body { position: relative; z-index: 2; margin-top: auto; padding: 24px; color: #fff; }
.showcase-ico { width: 44px; height: 44px; border-radius: 11px; background: rgba(255,255,255,0.14); backdrop-filter: blur(4px); color: #ffd7d3; display: grid; place-items: center; margin-bottom: 14px; }
.showcase-body h3 { color: #fff; margin: 0 0 6px; font-size: 1.16rem; }
.showcase-body p { color: rgba(255,255,255,0.82); font-size: 0.9rem; margin: 0 0 12px; }
.showcase-link { font-weight: 700; font-size: 0.86rem; color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.showcase-link::after { content: "\2192"; transition: transform 0.25s var(--ease); }
.showcase-card:hover .showcase-link::after { transform: translateX(4px); }

/* /services/ overview: same cards in a static grid */
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.showcase-grid .showcase-card { min-height: 320px; }
@media (max-width: 980px) { .showcase-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .showcase-grid { grid-template-columns: 1fr; } .showcase-grid .showcase-card { min-height: 260px; } }

/* ---------------------------------------------------------------- reviews slider */

.reviews-section { overflow: hidden; }
.rev-marq { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.rev-track { display: flex; align-items: stretch; gap: 22px; width: max-content; padding: 8px 0 14px; animation: marquee 46s linear infinite; }
.rev-marq:hover .rev-track { animation-play-state: paused; }
.rev-card {
  width: clamp(300px, 32vw, 430px); flex: none; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-cool); border-radius: var(--radius-lg);
  padding: 26px 26px 22px; box-shadow: var(--shadow-card); margin: 0;
}
.rev-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rev-q { font-family: var(--font-display); font-size: 2.7rem; line-height: 0.55; color: var(--red); }
.rev-stars { display: inline-flex; gap: 3px; }
.rev-stars svg { width: 17px; height: 17px; fill: #f6b21b; }
.rev-card blockquote { margin: 0 0 18px; font-size: 0.98rem; line-height: 1.6; color: var(--ink-soft); }
.rev-who { margin-top: auto; display: flex; gap: 12px; align-items: center; padding-top: 16px; border-top: 1px solid var(--line-cool); }
.rev-av { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 800; font-family: var(--font-display); font-size: 1.05rem; }
.rev-who b { display: block; color: var(--ink); font-size: 0.95rem; line-height: 1.25; }
.rev-who > span:last-child > span { display: block; font-size: 0.82rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .rev-marq { -webkit-mask: none; mask: none; overflow-x: auto; }
  .rev-track { animation: none; width: auto; }
  .rev-card.dup { display: none; }
}

/* ---------------------------------------------------------------- locations grid */

.loc-region { margin-bottom: 30px; }
.loc-region:last-child { margin-bottom: 0; }
.loc-region-title { font-size: 0.78rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-deep); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.loc-region-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.loc-link {
  display: flex; align-items: center; gap: 11px; padding: 14px 16px; min-height: 54px;
  background: var(--surface); border: 1px solid var(--line-cool); border-radius: var(--radius);
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.96rem;
  transition: border-color 0.16s, transform 0.14s, box-shadow 0.16s;
}
.loc-link:hover { border-color: var(--red); color: var(--red-deep); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.loc-link svg { flex: none; color: var(--red); width: 20px; height: 20px; }
.loc-link .loc-arrow { margin-left: auto; color: var(--faint); transition: transform 0.2s var(--ease); }
.loc-link:hover .loc-arrow { transform: translateX(3px); color: var(--red); }
.loc-hub-cta { margin-top: 28px; text-align: center; }

/* location page hero: local map-pin badge + intro */
.loc-hero .badge svg { width: 14px; height: 14px; }

/* badge shown on the photo service cards (top-right pill) */
.svc-slide-badge { position: absolute; top: 16px; right: 16px; z-index: 3; background: rgba(255,255,255,0.96); color: var(--ink); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
@media (max-width: 560px) {
  .showcase-scroller { grid-auto-columns: minmax(250px, 78%); }
  .showcase-card { min-height: 300px; }
}

/* ---------------------------------------------------------------- service gallery carousel */

/* Edge-to-edge rail: the same small gutter on both sides, so the belt reads as
   a deliberate full-width strip instead of leaving a dead margin on the left
   while the right-hand card runs off the screen. */
.gal-section { overflow: hidden; --gal-pad: clamp(16px, 2.2vw, 30px); }
.gal-track {
  display: flex; gap: 20px; margin-top: clamp(24px, 3vw, 40px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px var(--gal-pad); scroll-padding-left: var(--gal-pad);
  scrollbar-width: none;
}
.gal-track::-webkit-scrollbar { display: none; }
.gcard {
  position: relative; flex: 0 0 auto; width: 340px; min-height: 27rem; scroll-snap-align: start;
  border-radius: 20px; overflow: hidden; text-decoration: none; color: #fff;
  box-shadow: var(--shadow-card); background: linear-gradient(150deg, #24262a, #3a1114 130%);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.gcard:hover { box-shadow: var(--shadow-lg); }
.gcard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
  transition: transform 0.6s var(--ease); }
.gcard:hover .gcard-img { transform: scale(1.05); }
.gcard-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,13,14,0.94) 0%, rgba(12,13,14,0.62) 38%, rgba(12,13,14,0.18) 72%, rgba(12,13,14,0.06) 100%); }
.gcard-body { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; align-items: flex-start; padding: 26px; }
.gcard-badge { display: inline-block; margin-bottom: 12px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(6px);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.gcard-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; line-height: 1.2; }
.gcard-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 10px; font-size: 0.92rem; line-height: 1.55; color: rgba(255,255,255,0.86); }
.gcard-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.gcard-arrow { transition: transform 0.3s var(--ease); }
.gcard:hover .gcard-arrow { transform: translateX(5px); }
.gal-foot { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: clamp(18px, 2vw, 26px); }
.gal-cta { display: flex; justify-content: center; margin-top: clamp(18px, 2vw, 26px); }
.gal-btn { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink);
  transition: background-color 0.16s, color 0.16s, border-color 0.16s, opacity 0.2s; }
.gal-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.gal-btn[disabled] { opacity: 0.3; cursor: default; }
.gal-btn[disabled]:hover { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.gal-dots { display: flex; gap: 8px; }
.gal-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer;
  transition: width 0.35s var(--ease), background-color 0.35s var(--ease); }
.gal-dot.is-active { width: 26px; background: var(--red); }
@media (max-width: 860px) {
  .gal-track { gap: 14px; }
  .gcard { width: 78vw; max-width: 320px; min-height: 23rem; border-radius: 16px; }
  .gcard-body { padding: 20px; }
  .gcard-title { font-size: 1.16rem; }
  .gcard-desc { font-size: 0.87rem; }
  .gal-foot .gal-btn { display: none; }
}

/* ---------------------------------------------------------------- numbered steps rail */

.steps { list-style: none; margin: clamp(34px, 4vw, 58px) 0 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(22px, 2.6vw, 40px); }
.step { position: relative; z-index: 1; }
.step:nth-child(2) { margin-top: 42px; }
.step:nth-child(3) { margin-top: 84px; }
.step:nth-child(4) { margin-top: 126px; }
.step-num { display: block; width: max-content; margin-bottom: 16px;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(3.2rem, 2.2rem + 2.4vw, 4.6rem);
  line-height: 1; letter-spacing: -0.04em; color: transparent;
  -webkit-text-stroke: 2px var(--red); transition: color 0.35s var(--ease); }
.step:hover .step-num { color: var(--red); }
.step h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.step h3::after { content: ""; display: block; width: 42px; height: 4px; border-radius: 99px; background: var(--red); margin: 12px 0 0; }
.step p { margin: 12px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.6; max-width: 34ch; }
@media (max-width: 980px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2), .step:nth-child(3), .step:nth-child(4) { margin-top: 0; }
}
@media (max-width: 620px) {
  /* compact on phones: the numeral sits in the margin next to the title
     instead of above it, which takes roughly half the scroll of the stacked
     version while keeping the sequence obvious */
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: start;
    padding: 16px 0; border-top: 1px solid var(--line-cool); }
  .step:first-child { border-top: 0; padding-top: 4px; }
  .step-num { grid-row: 1 / span 2; width: auto; margin: 0; font-size: 2.1rem;
    -webkit-text-stroke: 1.6px var(--red); }
  .step h3 { grid-column: 2; font-size: 1.05rem; }
  .step h3::after { display: none; }
  .step p { grid-column: 2; max-width: none; margin-top: 6px; font-size: 0.9rem; line-height: 1.55; }
}

/* ---------------------------------------------------------------- testimonial columns */

.tcol-section { overflow: hidden; }
.tcols { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: clamp(24px, 3vw, 42px); max-height: 640px; overflow: hidden;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); }
.tcol-md, .tcol-lg { display: none; }
.tcol-track { display: flex; flex-direction: column; gap: 22px; animation: tcol-scroll var(--tcol-dur, 36s) linear infinite; }
.tcols:hover .tcol-track { animation-play-state: paused; }
@keyframes tcol-scroll { to { transform: translateY(-50%); } }
.tcard { background: var(--surface); border: 1px solid var(--line-cool); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.tcard blockquote { margin: 0 0 16px; font-size: 0.97rem; line-height: 1.6; color: var(--ink-soft); }
.tcard figcaption { display: flex; gap: 11px; align-items: center; }
.tcard-av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--red-wash); color: var(--red-deep); display: grid; place-items: center; font-weight: 800; font-family: var(--font-display); }
.tcard-who b { display: block; color: var(--ink); font-size: 0.92rem; line-height: 1.3; }
.tcard-who > span:last-child { font-size: 0.82rem; color: var(--muted); }
@media (min-width: 700px) { .tcols { grid-template-columns: 1fr 1fr; } .tcol-md { display: block; } }
@media (min-width: 1000px) { .tcols { grid-template-columns: repeat(3, 1fr); } .tcol-lg { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .tcols { max-height: none; -webkit-mask: none; mask: none; }
  .tcol-track { animation: none; }
  .tcard.dup { display: none; }
}

/* ---------------------------------------------------------------- coverage map */

.map-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: center; }
.map-canvas { position: relative; width: 100%; border-radius: var(--radius-lg); }
.map-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(26,28,30,0.12)); }
.map-city { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); pointer-events: none; }
.map-dot { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 7px; text-decoration: none; z-index: 2; white-space: nowrap; }
.map-pin { flex: none; width: 13px; height: 13px; border-radius: 50%; background: var(--red); border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.28); }
.map-dot.is-hq .map-pin { background: var(--ink); width: 16px; height: 16px; }
.map-label { font-size: 0.72rem; font-weight: 700; color: var(--ink); background: rgba(255,255,255,0.94); padding: 2px 8px; border-radius: 6px; box-shadow: var(--shadow-sm); transition: color 0.16s, background-color 0.16s, opacity 0.16s; opacity: 0.9; }
.map-dot.is-hq .map-label { opacity: 1; }
.map-label small { color: var(--red-deep); font-weight: 800; margin-left: 3px; }
.map-dot:hover { z-index: 6; }
.map-dot:hover .map-label { background: #fff; color: var(--red-deep); }
.map-dot:hover .map-pin { transform: scale(1.15); }
@media (prefers-reduced-motion: no-preference) {
  .map-pin { position: relative; }
  .map-pin::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; animation: pin-pulse 2.6s var(--ease) infinite; }
  @keyframes pin-pulse { 0% { box-shadow: 0 0 0 0 rgba(200,16,46,0.45); } 70% { box-shadow: 0 0 0 11px rgba(200,16,46,0); } 100% { box-shadow: 0 0 0 0 rgba(200,16,46,0); } }
  .map-dot.is-hq .map-pin::after { animation-name: pin-pulse-hq; }
  @keyframes pin-pulse-hq { 0% { box-shadow: 0 0 0 0 rgba(26,28,30,0.4); } 70% { box-shadow: 0 0 0 12px rgba(26,28,30,0); } 100% { box-shadow: 0 0 0 0 rgba(26,28,30,0); } }
}
.map-side-lead { font-size: 1.06rem; color: var(--ink-soft); margin-bottom: 1.1em; }
.map-chips { display: none; list-style: none; padding: 0; margin: 0 0 1.2em; flex-wrap: wrap; gap: 8px; }
.map-chips a { display: inline-flex; min-height: 40px; align-items: center; padding: 7px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-strong); font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.map-chips a:hover { border-color: var(--red); color: var(--red-deep); }
@media (max-width: 820px) {
  .map-layout { grid-template-columns: 1fr; }
  .map-canvas { max-width: 440px; margin: 0 auto; }
  .map-label { display: none; }
  .map-pin { width: 11px; height: 11px; }
  .map-chips { display: flex; }
}

/* ---------------------------------------------------------------- benefits (why choose) */

/* One panel divided by hairlines rather than four floating boxes: the cells
   read as a set, the hover fills a cell instead of lifting a card, and on
   phones it stays two across so the section does not turn into a long stack. */
.benefits-section { position: relative; overflow: hidden; }
.benefits-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 82% 60% at 50% 112%, var(--red-tint), transparent 60%); }
.benefits-section .container { position: relative; z-index: 1; }

.benefits {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-bottom: clamp(30px, 4vw, 50px);
  background: var(--surface); border: 1px solid var(--line-cool);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden;
}
.benefit-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: clamp(20px, 2vw, 30px);
  border-left: 1px solid var(--line-cool);
  transition: background-color 0.35s var(--ease);
}
.benefit-card:first-child { border-left: 0; }
/* the red rule that runs in along the top on hover */
.benefit-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.benefit-card:hover { background: var(--red-wash); }
.benefit-card:hover::before { transform: scaleX(1); }

.benefit-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.benefit-ico { flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--red-wash);
  color: var(--red); display: grid; place-items: center; border: 1px solid rgba(200,16,46,0.14);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease); }
.benefit-ico svg { width: 23px; height: 23px; }
.benefit-card:hover .benefit-ico { background: var(--red); color: #fff; transform: rotate(-6deg); }
.benefit-idx { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.4px rgba(200,16,46,0.3); transition: -webkit-text-stroke-color 0.3s var(--ease); }
.benefit-card:hover .benefit-idx { -webkit-text-stroke-color: var(--red); }
.benefit-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.benefit-card p { margin: 0; color: var(--muted); font-size: 0.93rem; line-height: 1.55; }

@media (max-width: 980px) {
  .benefits { grid-template-columns: 1fr 1fr; }
  .benefit-card:nth-child(odd) { border-left: 0; }
  .benefit-card:nth-child(n+3) { border-top: 1px solid var(--line-cool); }
}
@media (max-width: 560px) {
  /* still two across on phones: four stacked cards was the single biggest
     block of dead scroll on the page */
  .benefits { grid-template-columns: 1fr 1fr; }
  .benefit-card { padding: 15px 14px; gap: 9px; }
  .benefit-ico { width: 38px; height: 38px; border-radius: 11px; }
  .benefit-ico svg { width: 19px; height: 19px; }
  .benefit-idx { font-size: 1.15rem; }
  .benefit-card h3 { font-size: 0.94rem; }
  .benefit-card p { font-size: 0.83rem; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------------------------------------------------------------- glass testimonials */

.stagger-section { overflow-x: clip; overflow-y: visible; }
.tglass-eyebrow { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; font-weight: 650; }
.stagger { position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.stagger-stage { position: relative; height: clamp(392px, 34vw, 430px); max-width: 1100px; margin: 0 auto; touch-action: pan-y; }
/* glass shell: translucent pane with a solid card floating inside it */
.tglass {
  position: absolute; left: 50%; top: 50%; width: 340px; height: 340px; margin: 0;
  border-radius: 1rem; cursor: pointer;
  background: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.06));
  border: 1px solid rgba(26,28,30,0.06);
  box-shadow: 0 25px 25px rgba(26,28,30,0.10);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.5s var(--ease), box-shadow 0.5s var(--ease);
  will-change: transform;
}
.tglass-inner {
  position: absolute; inset: 16px; border-radius: 12px; overflow: hidden;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 18px 32px -22px rgba(26,28,30,0.55); border: 1px solid var(--line-cool);
  padding: 24px; display: flex; flex-direction: column;
}
.tglass.is-center { box-shadow: 0 30px 34px rgba(200,16,46,0.16), 0 25px 25px rgba(26,28,30,0.12); }
.tglass.is-center .tglass-inner { border-color: rgba(200,16,46,0.28); }
.tglass-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--red-wash); border: 1px solid rgba(200,16,46,0.14); color: var(--red); margin-bottom: 14px; flex: none; }
.tglass-mark svg { width: 17px; height: 17px; }
.tglass blockquote { margin: 0; font-size: 0.92rem; line-height: 1.62; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.tglass-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-cool); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tglass-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tglass-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; }
.tglass-name { font-size: 0.76rem; font-weight: 650; color: var(--ink); line-height: 1.3; }
.tglass-rating { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; font-weight: 700; color: var(--ink); }
.tglass-star { display: grid; place-items: center; color: #f6b21b; }
.tglass-star svg { width: 15px; height: 15px; }
.stagger-ctrls { display: flex; justify-content: center; gap: 12px; margin-top: 6px; }
.stagger-btn { width: 50px; height: 50px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; border-radius: 999px; transition: background-color 0.16s, color 0.16s, border-color 0.16s, transform 0.14s; }
.stagger-btn:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-1px); }
/* Phones: the panes still fan, but the browser does the scrolling. The rail is
   native (so a swipe has real inertia and never fights the page) and site.js
   tilts the panes either side of the centred one, so it reads like desktop. */
@media (max-width: 720px) {
  .stagger { -webkit-mask-image: none; mask-image: none; }
  .stagger.is-rail .stagger-stage {
    /* both axes must be listed: pan-x alone tells the browser a vertical drag
       starting here is not allowed at all, which stopped the page scrolling
       whenever a finger landed on the strip. With pan-x pan-y the rail takes
       the horizontal gesture and the page takes the vertical one. */
    touch-action: pan-x pan-y;
    position: static; height: auto; max-width: none;
    display: flex; gap: 10px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 26px calc(50vw - 130px) 44px;
    scrollbar-width: none;
  }
  .stagger.is-rail .stagger-stage::-webkit-scrollbar { display: none; }
  .stagger.is-rail .tglass {
    position: static; flex: 0 0 auto; scroll-snap-align: center;
    margin: 0; width: 260px; height: auto; min-height: 268px;
    pointer-events: auto !important;
    transform-origin: center 60%;
    transition: transform 0.35s var(--ease), opacity 0.35s var(--ease), box-shadow 0.35s var(--ease);
  }
  .stagger.is-rail .stagger-ctrls { display: none; }
}
@media (max-width: 560px) {
  .stagger-stage { height: 330px; }
  .tglass { width: 252px; height: 276px; border-radius: 14px; }
  .tglass-inner { inset: 11px; padding: 17px; border-radius: 10px; }
  .tglass blockquote { font-size: 0.83rem; line-height: 1.55; -webkit-line-clamp: 5; }
  .tglass-mark { width: 28px; height: 28px; margin-bottom: 10px; }
  .tglass-mark svg { width: 14px; height: 14px; }
  .tglass-foot { padding-top: 10px; }
  .tglass-name { font-size: 0.71rem; }
}
@media (prefers-reduced-motion: reduce) { .tglass { transition: opacity 0.3s ease; } }

/* ---------------------------------------------------------------- area photo cards + area map */

.area-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.area-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-cool); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); }
.area-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--line-strong); }
.area-card-media { display: block; aspect-ratio: 8 / 5; overflow: hidden; background: linear-gradient(150deg, #24262a, #3a1114 130%); }
.area-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.area-card:hover .area-card-media img { transform: scale(1.05); }
.area-card-media.no-img { background: linear-gradient(150deg, #2b2e33, #4a1218 130%); }
.area-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 4px; }
.area-card-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); letter-spacing: -0.01em; transition: color 0.2s var(--ease); }
.area-card:hover .area-card-name { color: var(--red-deep); }
.area-card-region { font-size: 0.82rem; color: var(--muted); }
.area-card-btn { margin-top: 12px; align-self: flex-start; background: var(--red); color: #fff; font-size: 0.8rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; padding: 9px 16px; border-radius: var(--radius-sm); transition: background-color 0.18s var(--ease); }
.area-card:hover .area-card-btn { background: var(--red-deep); }
@media (max-width: 1000px) { .area-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .area-cards { grid-template-columns: 1fr 1fr; gap: 14px; } .area-card-body { padding: 14px 15px 16px; } .area-card-body h3 { font-size: 1rem; } .area-card-btn { font-size: 0.72rem; padding: 8px 12px; } }
@media (max-width: 420px) { .area-cards { grid-template-columns: 1fr; } }

.area-map { position: relative; width: 100%; height: clamp(300px, 42vw, 460px); background: var(--surface-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.area-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.15); }
/* placeholder occupies exactly the same box as the iframe it is replaced by,
   so loading the map shifts nothing */
.map-consent {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  padding: 24px; text-align: center;
}
.map-consent-text { margin: 0; max-width: 46ch; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }
.map-consent-note { margin: 0; font-size: 0.84rem; color: var(--muted); }

/* location hero: the area photograph sits behind the copy like the homepage */
.loc-hero .hero-media img { object-position: center; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .main-nav, .phone-link, .header-actions .btn { display: none; }
  .menu-toggle { display: flex; }
  .mobile-cta { display: inline-flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-inner { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .timeline::before { display: none; }
}
@media (min-width: 861px) and (max-width: 1000px) { .timeline::before { display: block; } }
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  /* mobile: the clip runs behind the copy at the top of the hero, then the page
     settles back to paper for the booking card, so the card never sits on
     moving footage and the headline always has a dark bed under it */
  .hero { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); padding: 0 0 40px; }
  .hero-media { display: block; inset: 0 0 auto; height: var(--hero-media-h, 62%); }
  .hero-media::after {
    content: ""; position: absolute; inset: auto 0 -1px 0; height: 90px;
    background: linear-gradient(180deg, rgba(250,247,242,0) 0%, var(--paper) 92%);
  }
  .hero::after {
    background: linear-gradient(180deg, rgba(15,16,17,0.66) 0%, rgba(15,16,17,0.56) 34%, rgba(15,16,17,0.74) 64%, rgba(15,16,17,0) 80%);
  }
  .hero-copy { padding-top: 34px; }
  .hero h1 { color: #fff; }
  .hero h1 .accent { color: #ff8a80; }
  .hero .lede { color: rgba(255,255,255,0.86); }
  .hero .lede strong { color: #fff; }
  .hero-ctas { flex-direction: column; margin-top: 1.4em; }
  .hero-ctas .btn { width: 100%; }
  .hero-cta-call { display: none; }
  .hero-cta-book { display: inline-flex; }
  .hero .btn-outline { color: #fff; border-color: rgba(255,255,255,0.4); }
  .hero .btn-outline:hover { background: #fff; color: var(--ink); border-color: #fff; }
  .hero-creds { display: none; }
  .quiz-card { justify-self: stretch; max-width: 600px; margin: 0 auto; border: 1px solid var(--line-cool); box-shadow: var(--shadow-card); }
  .band-inner { flex-direction: column; align-items: flex-start; }
  .showcase-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .showcase-nav { display: none; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .loc-grid { grid-template-columns: 1fr; }
}
@media print {
  .site-header, .sticky-call, .mobile-drawer, .drawer-scrim, .cta-section { display: none !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}