/* =====================================================
   FIRE PROTECT LONDON LTD — DESIGN SYSTEM
   Locked: Crimson #B0173A / Charcoal #1C1C1E / Off-white #F5F5F3
   Montserrat (headings) / Inter (body)
   ===================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .accred-track { animation: none; }
}
body, h1, h2, h3, h4, h5, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
svg { display: block; }

/* ---------- Tokens ---------- */
:root {
  /* Crimson scale */
  --crimson-800: #6F0E26;
  --crimson-700: #8F1230;
  --crimson-600: #B0173A;   /* primary accent — locked */
  --crimson-500: #C93A56;
  --crimson-100: #F7E3E8;
  --crimson-50:  #FBF0F2;

  /* Charcoal scale */
  --charcoal-900: #1C1C1E;  /* base dark surface — locked */
  --charcoal-800: #26262A;
  --charcoal-700: #333338;
  --charcoal-600: #46464C;

  /* Off-white / neutrals */
  --off-white: #F5F5F3;     /* page background — locked */
  --white: #FFFFFF;
  --ink: #1C1C1E;
  --ink-muted: #58585D;
  --ink-faint: #8A8A8F;
  --hairline: rgba(28,28,30,0.10);
  --hairline-dark: rgba(245,245,243,0.14);

  /* Type */
  --font-head: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing (8px rhythm) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --section-pad: 96px;
  --container-w: 1200px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(28,28,30,0.06);
  --shadow-md: 0 4px 20px rgba(28,28,30,0.08);
  --shadow-lg: 0 20px 48px rgba(28,28,30,0.16);

  /* Motion */
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --dur-fast: 200ms;
  --dur-med: 500ms;
  --dur-slow: 700ms;
}

html, body { max-width: 100%; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
}
h1 { font-size: 56px; letter-spacing: -0.025em; }
h2 { font-size: 38px; }
h3 { font-size: 24px; }
h4 { font-size: 19px; letter-spacing: -0.01em; }

p { color: var(--ink-muted); }
p + p { margin-top: 1em; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson-600);
  white-space: nowrap;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 2px;
  background: var(--crimson-600);
  flex: none;
}
.eyebrow--on-dark { color: rgba(245,245,243,0.85); }
.eyebrow--on-dark::before { background: var(--crimson-600); }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 32px;
}

section { position: relative; }
.section-pad { padding: var(--section-pad) 0; }
.section-pad--panel { background: var(--white); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }

.section-head { max-width: 640px; margin-bottom: var(--sp-8); }
.section-head h2 { margin-top: var(--sp-3); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { margin-top: var(--sp-4); font-size: 17px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
  border: 1.5px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--crimson-600);
  color: var(--white);
}
.btn-primary:hover { background: var(--crimson-700); }
.btn-ghost-dark {
  border-color: rgba(245,245,243,0.35);
  color: var(--off-white);
}
.btn-ghost-dark:hover { border-color: var(--off-white); background: rgba(245,245,243,0.08); }
.btn-ghost-light {
  border-color: var(--hairline);
  color: var(--ink);
}
.btn-ghost-light:hover { border-color: var(--charcoal-900); }
.btn-block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Site header ---------- */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 24px 48px 0;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.site-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(28,28,30,0.95) 0%, rgba(28,28,30,0) 100%);
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease-out);
}
/* Pinned once scrolled, same padding-top and logo size as the resting
   state — only the background/blur change to read as "solid" against page
   content scrolling underneath it. Bottom padding is added to match (the
   resting header has none, relying on the ::before gradient instead of a
   hard-edged box) so the now-opaque bar has even breathing room and its
   content sits centred rather than pinned to the bottom edge. */
.site-header.is-solid {
  position: fixed;
  padding-bottom: 24px;
  background: rgba(28,28,30,0.97);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-md);
}
.site-header.is-solid::before { opacity: 0; }

.header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.logo-badge { display: inline-flex; align-items: center; flex: none; }
.logo-badge img { height: 88px; width: auto; transform-origin: left center; transition: transform var(--dur-fast) var(--ease-out); }

.main-nav { display: flex; align-items: center; gap: 32px; }
.main-nav > ul { display: flex; align-items: center; gap: 26px; }
.main-nav a:not(.nav-contact-btn) {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--off-white);
  transition: color var(--dur-fast) var(--ease-out);
}
.main-nav a:not(.nav-contact-btn):hover { color: var(--crimson-500); }
.nav-link { display: inline-flex; align-items: center; gap: 6px; }
.nav-link .caret { width: 9px; height: 9px; transition: transform var(--dur-fast) var(--ease-out); }
.has-dropdown:hover .caret { transform: rotate(180deg); }

.has-dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: -20px;
  min-width: 300px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-menu li a {
  display: block;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  color: var(--ink) !important;
  font-size: 13.5px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}
.dropdown-menu li a strong { color: var(--crimson-600); }
.dropdown-menu li a:hover { background: var(--off-white); color: var(--crimson-600) !important; }
.dropdown-menu .dropdown-divider { margin: 8px 6px; border-top: 1px solid var(--hairline); }
.dropdown-menu .dropdown-label {
  padding: 6px 16px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(28,28,30,0.45); font-weight: 600;
}

.nav-contact-btn {
  background: var(--crimson-600);
  color: var(--white) !important;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out);
}
.nav-contact-btn:hover { background: var(--crimson-700); color: var(--white) !important; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  position: relative;
  z-index: 60;
  flex: none;
}
.nav-toggle span {
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: var(--off-white);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), top var(--dur-fast) var(--ease-out);
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-open .nav-toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* ---------- Hero (homepage) ---------- */
/* Base fallback colour only — the photo itself now comes from the
   crossfading .hero-slide layers below, not a background-image here. */
.hero {
  position: relative;
  height: auto;
  min-height: 100vh;
  overflow: hidden;
  background: var(--charcoal-900);
}
/* Carousel: one .hero-slides set per breakpoint (desktop/mobile use
   different crops), each holding a stack of full-bleed slides that
   crossfade via opacity — see main.js. Sits at the very back, below the
   shape grid and scrim, which stay constant across every slide so the
   overlay strength never changes as the photo rotates. */
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slides--mobile { display: none; }
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.hero-slide.is-active { opacity: 1; }
/* Brand-gradient scrim: darkens the full hero (not just behind the nav) so
   text stays readable over the photo everywhere, not just near the top.
   Same crimson/charcoal pairing used across the site (see .cta-band::before),
   just carried at full strength edge-to-edge instead of fading to nothing. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(28,28,30,0.3) 0%, rgba(28,28,30,0.1) 30%, rgba(28,28,30,0.16) 100%),
    linear-gradient(115deg, rgba(28,28,30,0.22) 0%, rgba(120,16,40,0.16) 32%, rgba(90,13,32,0.12) 58%, rgba(28,28,30,0.14) 100%);
}
.hero-content {
  position: relative;
  z-index: 20;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 170px clamp(32px, 4vw, 64px) 60px clamp(56px, 8vw, 140px);
}
.hero-content-inner { max-width: 700px; }
.hero-content h1 {
  font-size: 58px;
  color: var(--white);
  margin-top: var(--sp-4);
  text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 8px 28px rgba(0,0,0,0.5);
}
.hero-content .lede {
  color: rgba(245,245,243,0.78);
  font-size: 18px;
  margin-top: var(--sp-5);
  max-width: 560px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.5);
}
.hero-actions { display: flex; gap: 16px; margin-top: var(--sp-7); flex-wrap: wrap; }

/* Desktop: text and lead form card sit as one grouped pair, centred as a
   unit within the hero — text lands left-of-centre, the form right-of-centre,
   rather than either being pinned to an outer edge. */
.hero-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(48px, 6vw, 96px);
  width: 100%;
}
.hero-lead-form {
  flex: none;
  width: clamp(380px, 34vw, 480px);
  background: linear-gradient(135deg, rgba(120,16,40,0.12) 0%, rgba(28,28,30,0.14) 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(245,245,243,0.14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-7);
}
.lead-form-head { margin-bottom: var(--sp-5); }
.lead-form-head .eyebrow { margin-bottom: var(--sp-3); }
.lead-form-head h3 { margin-top: 0; color: var(--white); }
/* Labels sit on the translucent dark card now, not a white one — the
   inputs themselves stay opaque/light so entered text stays readable. */
#heroLeadForm .form-field label { color: rgba(245,245,243,0.85); }
#heroLeadForm .form-field + .form-field { margin-top: var(--sp-4); }
#heroLeadForm .btn { margin-top: var(--sp-5); }

.lead-form-success {
  display: none;
  background: var(--crimson-50);
  border: 1px solid var(--crimson-100);
  color: var(--crimson-700);
  padding: var(--sp-5);
  border-radius: var(--radius-md);
  font-size: 14.5px;
  margin-top: var(--sp-5);
}
.lead-form-success.is-visible { display: block; }

/* Laptop-height screens: the two-column hero + form layout works fine at
   full desktop width, but on shorter viewports the form spills past the
   fold (or gets clipped by .hero's overflow:hidden) before the submit
   button is visible. Rather than guessing a viewport-height breakpoint
   (unreliable — OS display scaling changes the effective CSS viewport
   height independently of the physical screen), main.js measures whether
   the hero content actually overflows and toggles this class only when it
   does, so ordinary desktop and mobile viewports are never touched. */
.hero.is-compact .hero-content { padding: 100px clamp(32px, 4vw, 64px) 28px clamp(56px, 8vw, 140px); }
.hero.is-compact .hero-content h1 { font-size: 42px; }
.hero.is-compact .hero-content .lede { font-size: 16px; margin-top: var(--sp-3); }
.hero.is-compact .hero-actions { margin-top: var(--sp-5); }

.hero.is-compact .hero-lead-form { padding: var(--sp-5); }
.hero.is-compact .lead-form-head { margin-bottom: var(--sp-3); }
.hero.is-compact .lead-form-head h3 { font-size: 20px; }
.hero.is-compact #heroLeadForm .form-field + .form-field { margin-top: var(--sp-3); }
.hero.is-compact .form-field label { font-size: 11px; }
.hero.is-compact .form-field input, .hero.is-compact .form-field select { padding: 9px 14px; font-size: 14px; }
.hero.is-compact #heroLeadForm .btn { margin-top: var(--sp-3); padding: 12px 28px; }

/* .hero-content's base `height: 100%` is invalid against .hero's auto
   height (percentage-of-auto resolves to auto), so it silently grows to
   fit its content instead of being capped at the viewport — which is
   exactly why it never overflows and main.js's is-compact detection
   above never fires on short laptop screens. Mobile relies on that same
   auto-grow behaviour on purpose (see .hero-slides--mobile comment), so
   this only pins the height at the desktop (side-by-side) layout width —
   the same >=1025px threshold main.js already uses to gate is-compact —
   leaving mobile/tablet and normal-height desktop screens untouched. */
@media (min-width: 1025px) {
  .hero-content { height: 100vh; }
}

/* ---------- Page header (inner pages) ---------- */
.page-header {
  position: relative;
  height: 36vh;
  min-height: 320px;
  max-height: 420px;
  overflow: hidden;
  background: var(--charcoal-900);
}
.page-header-bg { position: absolute; inset: 0; }
.page-header-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.38; }
.page-header-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 100% at 50% 45%, rgba(28,28,30,0.75) 0%, rgba(28,28,30,0.92) 100%);
}
.page-header-inner {
  position: relative;
  z-index: 20;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 100px;
}
.page-header .eyebrow::before { display: none; }
.page-header h1 { color: var(--white); margin-top: var(--sp-4); font-size: 42px; }
.breadcrumb { margin-top: var(--sp-5); font-size: 15px; color: rgba(245,245,243,0.65); }
.breadcrumb a:hover { color: var(--off-white); }

/* ---------- Service cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 40px 28px 28px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 450ms var(--ease-out), box-shadow 450ms var(--ease-out), border-color 450ms var(--ease-out);
  height: 100%;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(176,23,58,0.18), 0 8px 20px rgba(28,28,30,0.1);
  border-color: var(--crimson-600);
}
/* Decorative glow + ghost index number — pure colour/life, sits behind content */
.card-glow {
  position: absolute; top: -50px; right: -50px;
  width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(176,23,58,0.18), rgba(176,23,58,0) 72%);
  opacity: 0.55;
  transform: scale(0.85);
  transition: transform 600ms var(--ease-out), opacity 600ms var(--ease-out);
  pointer-events: none;
}
.service-card:hover .card-glow { transform: scale(1.2); opacity: 1; }
.card-index {
  position: absolute; top: 12px; right: 20px;
  font-family: var(--font-head); font-weight: 800; font-size: 42px;
  color: rgba(28,28,30,0.045);
  line-height: 1;
  transition: color 500ms var(--ease-out), transform 500ms var(--ease-out);
  pointer-events: none;
}
.service-card:hover .card-index { color: rgba(176,23,58,0.14); transform: translateY(-2px); }
.card-body { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.service-card .icon {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--crimson-50), var(--crimson-100));
  color: var(--crimson-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-5);
  flex: none;
  transition: background 450ms var(--ease-out), color 450ms var(--ease-out), transform 450ms var(--ease-out), box-shadow 450ms var(--ease-out);
}
.service-card:hover .icon {
  background: linear-gradient(135deg, var(--crimson-600), var(--crimson-800));
  color: var(--white);
  transform: scale(1.08) rotate(-6deg);
  box-shadow: 0 10px 24px rgba(176,23,58,0.35);
}
.service-card .icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 19px; margin-bottom: 10px; transition: color 400ms var(--ease-out); }
.service-card:hover h3 { color: var(--crimson-700); }
.service-card p { font-size: 14.5px; flex: 1; }
.service-card .card-more {
  margin-top: var(--sp-4);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crimson-600);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.service-card .card-more svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.service-card:hover .card-more svg { transform: translateX(4px); }
.card-link-wrap { display: block; height: 100%; }

/* Standout "not sure what you need" card closing out the services grid —
   same shape as a service-card, but filled crimson so it reads as a
   different kind of thing, not just another service. */
.service-card--cta { background: var(--crimson-600); border-color: var(--crimson-600); }
.service-card--cta:hover { border-color: var(--white); box-shadow: 0 24px 48px rgba(28,28,30,0.28); }
.service-card--cta .card-glow { background: radial-gradient(circle, rgba(255,255,255,0.28), rgba(255,255,255,0) 72%); }
.service-card--cta .icon { background: rgba(255,255,255,0.16); color: var(--white); }
.service-card--cta:hover .icon { background: var(--white); color: var(--crimson-600); box-shadow: none; }
.service-card--cta h3, .service-card--cta:hover h3 { color: var(--white); }
.service-card--cta p { color: rgba(255,255,255,0.82); }
.service-card--cta .card-more { color: var(--white); }

/* ---------- Process flow (service detail "how it works") ---------- */
.process-flow {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
}
.process-flow::before {
  content: "";
  position: absolute;
  top: 27px;
  left: calc(100% / var(--steps, 4) / 2);
  right: calc(100% / var(--steps, 4) / 2);
  height: 2px;
  background: var(--hairline);
  z-index: 1;
}
.process-step {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--sp-3);
}
.process-num {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--charcoal-900);
  color: var(--white);
  font-family: var(--font-head); font-weight: 700; font-size: 19px;
  box-shadow: 0 0 0 6px var(--off-white);
  margin-bottom: var(--sp-4);
  transition: background 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.process-step:hover .process-num { background: var(--crimson-600); transform: translateY(-3px); }
.process-step h3 { font-size: 16px; margin: 0; }

/* ---------- Service gallery (on-site photos) ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-item { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery-item img {
  width: 100%; height: 280px; object-fit: cover;
  transition: transform 500ms var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.06); }

/* ---------- Split (why us) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
}
.split > * { min-width: 0; }
.split-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.split-media img { width: 100%; height: 520px; object-fit: cover; }
.split-media-badge {
  position: absolute;
  left: -1px; bottom: 24px;
  background: var(--crimson-600);
  color: var(--white);
  padding: 20px 28px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.split-media-badge .num { font-family: var(--font-head); font-weight: 700; font-size: 28px; display: block; }
.split-media-badge .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.9; }
.split-points { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-6); }
.split-point { display: flex; gap: 18px; }
.split-point .tick {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--crimson-100);
  color: var(--crimson-600);
  display: flex; align-items: center; justify-content: center;
}
.split-point .tick svg { width: 17px; height: 17px; }
.split-point h4 { margin-bottom: 4px; }
.split-point p { font-size: 14.5px; }
.split.reverse { grid-template-columns: 1fr 1fr; }
.split.reverse .split-media { order: 2; }
.split.reverse .split-copy { order: 1; }

/* ---------- Stats band ---------- */
.stats-band { background: var(--crimson-600); padding: var(--sp-8) 0; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats-row .stat { text-align: center; padding: 0 var(--sp-4); border-left: 1px solid var(--hairline-dark); }
.stats-row .stat:first-child { border-left: 0; }
.stats-row .num {
  font-family: var(--font-head); font-weight: 700; font-size: 42px;
  color: var(--white); letter-spacing: -0.01em;
}
.stats-row .num span.accent { color: var(--crimson-500); }
.stats-row .lbl { margin-top: 8px; font-size: 13px; color: rgba(245,245,243,0.65); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Accreditation strip ---------- */
.accred-strip { background: var(--white); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: var(--sp-6) 0; }
.accred-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.accred-item { display: flex; align-items: center; gap: 12px; color: var(--ink-muted); }
.accred-item .badge {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--charcoal-900); color: var(--crimson-500);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  flex: none;
}
.accred-item span.name { font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: 0.03em; color: var(--ink); text-transform: uppercase; }

/* Mobile-only auto-scrolling marquee — desktop shows the static row above.
   Two identical copies of the row sit side by side in the track; each copy
   carries its own trailing spacer (rather than a gap on the track itself)
   so the two copies are exactly equal width and translateX(-50%) lands
   precisely on the second copy with no jump when the loop repeats. */
.accred-marquee { display: none; }

.accred-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.accred-card {
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-md);
  padding: var(--sp-6); display: flex; gap: 18px; align-items: flex-start;
  box-shadow: var(--shadow-sm);
}
.accred-card .badge { width: 52px; height: 52px; font-size: 15px; }
.accred-card h4 { margin-bottom: 6px; }
.accred-card p { font-size: 14px; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--crimson-600);
  position: relative;
  overflow: hidden;
  padding: var(--sp-9) 0;
}
.cta-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.cta-inner h2 { color: var(--white); max-width: 560px; }
.cta-inner p { color: rgba(245,245,243,0.68); margin-top: var(--sp-3); max-width: 480px; }
.cta-actions { display: flex; gap: 16px; flex-wrap: wrap; }
/* The band background is now the same crimson as .btn-primary, which would
   otherwise disappear into it — flip this one button to a white fill. */
.cta-band .btn-primary { background: var(--white); color: var(--crimson-600); }
.cta-band .btn-primary:hover { background: var(--off-white); }
.cta-phone {
  display: flex; align-items: center; gap: 14px;
  color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 22px;
}
.cta-phone .icon-wrap {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--white); display: flex; align-items: center; justify-content: center; flex: none;
}
.cta-phone .icon-wrap svg { width: 20px; height: 20px; color: var(--crimson-600); }

/* ---------- Case studies ---------- */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-card {
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.case-card .media { height: 210px; overflow: hidden; position: relative; }
.case-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.case-card:hover .media img { transform: scale(1.06); }
.case-card .sector-tag {
  position: absolute; top: 16px; left: 16px;
  background: rgba(28,28,30,0.85); color: var(--white);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  padding: 6px 12px; border-radius: 3px;
}
.case-card .body { padding: var(--sp-5); }
.case-card h3 { font-size: 18px; margin-bottom: 8px; }
.case-card p { font-size: 14px; }
.case-card .meta { display: flex; gap: 18px; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }
.case-card .meta div { font-size: 12px; color: var(--ink-faint); }
.case-card .meta strong { display: block; color: var(--ink); font-family: var(--font-head); font-size: 13px; }

/* ---------- Forms ---------- */
/* min-width: 0 overrides the default `auto` that grid/flex items use for
   their sizing floor — without it, a select whose longest <option> text is
   wider than the viewport (e.g. "Fire Alarm Repairs, Call Outs &
   Installation") forces every ancestor track wider than the screen, which
   silently bled the whole form/card column off the right edge on mobile. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-width: 0; }
.form-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-family: var(--font-head); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  min-width: 0;
  background: var(--white);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 15px;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--crimson-600);
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 13px; color: var(--ink-faint); margin-top: var(--sp-2); }
.form-success {
  display: none;
  background: var(--crimson-50);
  border: 1px solid var(--crimson-100);
  color: var(--crimson-700);
  padding: 18px 22px;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  margin-top: var(--sp-4);
}
.form-success.is-visible { display: block; }

.contact-info-card {
  background: var(--charcoal-900);
  color: var(--off-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
}
.contact-info-card h3 { color: var(--white); }
.contact-info-row { display: flex; gap: 16px; padding: var(--sp-4) 0; border-top: 1px solid var(--hairline-dark); }
.contact-info-row:first-of-type { margin-top: var(--sp-5); }
.contact-info-row .icon-wrap {
  width: 40px; height: 40px; border-radius: 50%; background: var(--crimson-600);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.contact-info-row .icon-wrap svg { width: 17px; height: 17px; color: var(--white); }
.contact-info-row .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(245,245,243,0.55); }
.contact-info-row .val { font-family: var(--font-head); font-weight: 600; margin-top: 2px; }
.map-placeholder {
  margin-top: var(--sp-6);
  border: 1.5px dashed var(--hairline-dark);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  text-align: center;
  color: rgba(245,245,243,0.5);
  font-size: 13px;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal-900); color: rgba(245,245,243,0.6); padding-top: var(--sp-9); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--hairline-dark);
}
.footer-brand img { height: 64px; width: auto; margin-bottom: var(--sp-5); }
.footer-brand p { color: rgba(245,245,243,0.55); font-size: 14px; max-width: 300px; }
.footer-social { display: flex; gap: 12px; margin-top: var(--sp-5); }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--hairline-dark);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.footer-social a svg { width: 15px; height: 15px; color: rgba(245,245,243,0.7); }
.footer-social a:hover { background: var(--crimson-600); border-color: var(--crimson-600); }
.footer-col h5 {
  color: var(--white); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: var(--sp-5); font-family: var(--font-head); font-weight: 600;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 14px; transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover { color: var(--white); }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.footer-contact svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--crimson-500); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-5) 0; font-size: 12.5px; color: rgba(245,245,243,0.4); flex-wrap: wrap; gap: 12px;
}
.footer-bottom a:hover { color: rgba(245,245,243,0.8); }

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 70;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--crimson-600);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--crimson-700); }
.back-to-top svg { width: 20px; height: 20px; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 1; transform: none; }
.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.js-reveal-ready .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Mobile nav overlay ---------- */
.mobile-nav-overlay {
  position: fixed; inset: 0;
  background: var(--charcoal-900);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 100px 40px 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.nav-open .mobile-nav-overlay { opacity: 1; visibility: visible; }
.mobile-nav-overlay ul { display: flex; flex-direction: column; gap: 8px; }
.mobile-nav-overlay > ul > li { border-bottom: 1px solid var(--hairline-dark); }
.mobile-nav-overlay > ul > li:last-child { border-bottom: 0; }
.mobile-nav-overlay .mnav-row { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav-overlay .mnav-link {
  font-family: var(--font-head); font-weight: 600; font-size: 22px;
  color: var(--white); padding: 14px 0; display: block;
}
.mobile-nav-overlay .mobile-dropdown-trigger {
  padding: 14px 0 14px 20px;
  color: var(--white);
}
.mobile-nav-overlay .mobile-dropdown-trigger svg {
  width: 16px; height: 16px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.mobile-nav-overlay .mobile-dropdown-trigger.is-open svg { transform: rotate(180deg); }
.mobile-nav-overlay .mobile-sub { padding-left: 16px; padding-bottom: 8px; display: none; }
.mobile-nav-overlay .mobile-sub.is-open { display: flex; }
.mobile-nav-overlay .mobile-sub a { font-size: 15px; font-weight: 500; color: rgba(245,245,243,0.7); border-bottom: 0; padding: 10px 0; text-transform: none; display: block; }
.mobile-nav-overlay .mobile-sub-divider { border-top: 1px solid rgba(245,245,243,0.15); margin: 6px 0; }
.mobile-nav-overlay .mobile-sub-label {
  padding: 10px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(245,245,243,0.4); font-weight: 600;
}
.mobile-nav-overlay .mobile-contact { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  :root { --section-pad: 72px; }
  .container { padding: 0 24px; }

  .main-nav ul { gap: 18px; }
  .header-main { gap: 16px; }

  .hero { height: auto; min-height: 100vh; background-position: right center; }
  .hero-content {
    padding-top: 160px;
    padding-right: 24px;
    padding-bottom: 48px;
    padding-left: 24px;
    height: 100%;
  }
  .hero-content-inner { max-width: none; }
  .hero-content h1 { font-size: 44px; }

  .hero-grid { flex-direction: column; align-items: stretch; gap: var(--sp-6); }
  .hero-lead-form { width: 100%; max-width: 480px; margin: 0 auto; }

  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .accred-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: var(--sp-7); }
  .split.reverse .split-media { order: 1; }
  .split.reverse .split-copy { order: 2; }
  .split-media img { height: 380px; }

  .stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) 0; }
  .stats-row .stat:nth-child(3) { border-left: 0; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }

  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .main-nav { display: none; }
  .site-header { padding: 20px 20px 0; }
  /* Desktop lets the header scroll away with the hero (see base rule) —
     kept pinned here so the hamburger menu stays reachable while scrolling
     on mobile, where there's no persistent nav otherwise. */
  /* Bottom padding matches the top here (base .site-header has none) —
     without it the bar hugs the bottom of the now full-size 64px logo with
     no breathing room, which reads as cramped/off-centre next to the
     hamburger button. */
  .site-header.is-solid { position: fixed; padding-top: 14px; padding-bottom: 14px; }
  .logo-badge img { height: 64px; }
  /* The desktop scale-down transform for the scrolled header assumes the
     full-size 88px logo — on mobile the logo is already fixed at 64px, so
     that extra transform just shrinks it further and, with a left-origin
     scale, throws off its alignment next to the hamburger button. */
  .site-header.is-solid .logo-badge img { transform: none; }

  /* Purpose-built portrait crops of the hero carousel, not cover-cropped
     slices of the desktop landscape images. */
  .hero-slides--desktop { display: none; }
  .hero-slides--mobile { display: block; }
  /* The mobile hero can grow taller than the viewport to fit the stacked
     text + form beneath it, so a cover-fit image needs more and more
     cropped off as it grows. All three portrait photos have their subject
     in the lower two-thirds with mostly empty sky/ceiling above it, so
     anchor toward the bottom rather than centring — keeps the actual
     subject in frame instead of it drifting out the top. */
  .hero-slides--mobile .hero-slide { background-position: center 88%; }
  /* The desktop scrim above was lightened to let the skyline show through —
     too light on the mobile crop, where the text has no card of its own to
     lean on above the lead form. Bring some darkening back here only. */
  .hero::before {
    background:
      linear-gradient(180deg, rgba(28,28,30,0.55) 0%, rgba(28,28,30,0.2) 30%, rgba(28,28,30,0.3) 100%),
      linear-gradient(115deg, rgba(28,28,30,0.42) 0%, rgba(120,16,40,0.3) 32%, rgba(90,13,32,0.22) 58%, rgba(28,28,30,0.26) 100%);
  }

  /* Pulled up from the 1024px default so there's headroom above the lead
     form card stacked underneath — the section is auto-height here (see
     above) so it can grow to fit both without cropping the background. */
  .hero-content { padding-top: 110px; padding-bottom: 56px; }

  /* No card background — the scrim above (plus the h1/lede text-shadows)
     carries legibility now, so the heading sits directly on the photo.
     Still capped narrower than the full width and centred, so it reads as
     an intentional block of text rather than stretching edge to edge. */
  .hero-text-box {
    max-width: 380px;
    margin: 0 auto;
    text-align: center;
  }

  /* Pulled in tight under the text now there's no card padding holding it
     off — reads as one grouped block instead of two disconnected pieces. */
  .hero-actions { justify-content: center; margin-top: var(--sp-4); }

  .hero-lead-form { margin-top: var(--sp-6); }

  .page-header { height: 260px; min-height: 260px; }
  .page-header h1 { font-size: 32px; }
  /* Clears the 64px logo + 20px top padding of the mobile header (~84px)
     with room to spare, so the eyebrow/breadcrumb block never crowds the
     hamburger button on longer, wrapping page titles. */
  .page-header-inner { padding-top: 92px; }

  .card-grid { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  .accred-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item img { height: 220px; }

  /* Flow becomes a vertical timeline — the connecting line runs down the
     left edge through the circle centres instead of across their tops. */
  .process-flow { flex-direction: column; align-items: stretch; gap: var(--sp-6); }
  .process-flow::before { top: 8px; bottom: 8px; left: 27px; right: auto; width: 2px; height: auto; }
  .process-step { flex-direction: row; align-items: center; text-align: left; padding: 0; gap: var(--sp-4); }
  .process-num { margin-bottom: 0; width: 48px; height: 48px; font-size: 16px; box-shadow: 0 0 0 6px var(--off-white); }
  .process-step h3 { font-size: 15.5px; }

  /* Swap the static accreditation row for the auto-scrolling marquee. */
  .accred-strip .container > .accred-row { display: none; }
  .accred-marquee { display: block; overflow: hidden; }
  .accred-track { display: flex; width: max-content; animation: accred-scroll 22s linear infinite; }
  .accred-track .accred-row {
    display: flex; flex-wrap: nowrap; align-items: center;
    gap: var(--sp-6); padding-right: var(--sp-6);
  }
  .accred-track .accred-item { flex: none; }
  @keyframes accred-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* Slim strip instead of a tall block — the desktop section padding is
     sized for a wide 4-across row with room to breathe, way too much once
     it's this narrow and compact. */
  .stats-band { padding: var(--sp-4) 0; }

  /* Keep all four stats on a single row on mobile instead of wrapping to a
     2x2 grid — tighten padding, borders and type size so they still fit. */
  .stats-row { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .stats-row .stat { padding: 0 6px; border-left: 1px solid var(--hairline-dark); }
  .stats-row .stat:first-child { border-left: 0; }
  .stats-row .num { font-size: 20px; }
  .stats-row .lbl { font-size: 9px; margin-top: 6px; letter-spacing: 0.02em; line-height: 1.3; }

  .cta-inner { flex-direction: column; align-items: flex-start; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Intro copy + button centred to match the boxed, centred contact-info
     card stacked above it — form fields stay left-aligned since centring
     labels/inputs would look broken. */
  .contact-form-col { text-align: center; }
  .contact-form-col .form-grid { text-align: left; }

  /* Desktop's --sp-7 side padding plus the icon circle leaves the
     label/value text hugging the card's right edge on narrow phones —
     tighten the padding and gap so the whole row sits further left with
     proper breathing room on the right. */
  .contact-info-card { padding: var(--sp-5); }
  .contact-info-row { gap: 12px; }
  .contact-info-row .icon-wrap { width: 36px; height: 36px; }
}

@media (max-width: 420px) {
  h1 { font-size: 30px; }
  h2 { font-size: 26px; }
  :root { --section-pad: 56px; }
  .container { padding: 0 20px; }

  .hero-content { padding-top: 90px; min-height: 480px; }
  .hero-content h1 { font-size: 34px; }
  .eyebrow { white-space: normal; }
  .hero-actions { flex-direction: column; align-items: stretch; }

  .cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .cta-phone { justify-content: center; }

  .stats-row .stat { padding: 0 3px; }
  .stats-row .num { font-size: 16px; }
  .stats-row .lbl { font-size: 8px; margin-top: 4px; }

  .accred-row { justify-content: flex-start; }
}