/* ==========================================================================
   Core Asbestos Scotland - landing page
   Survey-document styling: 2px ink rules, zero radius, flat surfaces,
   accent (#78a83c, from the logo) spent sparingly.
   ========================================================================== */

/* --- Archivo (self-hosted variable font, 400-800 axis) ------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  /* Green variant: accent taken from the brand logo. */
  --color-accent: #78a83c;
  --color-accent-100: #f3f7e8;
  --color-accent-200: #e4eecb;
  --color-accent-300: #cce0a2;
  --color-accent-400: #a7c96a;
  --color-accent-500: #78a83c;
  --color-accent-600: #5f8a2c;
  --color-accent-700: #4a6d21;
  --color-accent-800: #375118;
  --color-accent-900: #263a10;

  /* Text on the poster close, which is a whole accent field rather than a
     control. Ink on this green is 5.8:1. */
  --color-on-accent: #201e1d;
  /* Labels on accent-filled controls (buttons, selected chips, mobile CTA).
     Client-chosen white. Note this is ~2.8:1 on the base green and so does not
     meet WCAG AA; darkening the fill to --color-accent-700 would fix it. */
  --color-accent-label: #ffffff;
  /* Small accent text: -700 on the paper page, -400 on the ink bands. */
  --accent-on-light: var(--color-accent-700);
  --accent-on-dark: var(--color-accent-400);

  --font-heading: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: var(--font-heading);

  --lead: 28px;
  --edge: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
}


/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
figure { margin: 0; }
svg { display: block; }

/* Author display rules would otherwise beat the UA's [hidden] rule. */
[hidden] { display: none !important; }

a { color: var(--accent-on-light); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  margin: 0;
}

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

section[id] { scroll-margin-top: 92px; }

.tnum { font-feature-settings: 'tnum' 1; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--edge); top: -100px; z-index: 90;
  background: var(--color-neutral-900); color: var(--color-bg);
  padding: 12px 18px; font-family: var(--font-heading); font-weight: 800;
  font-size: 14px; text-decoration: none;
}
.skip-link:focus { top: 8px; color: var(--color-bg); }

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--edge);
}

/* --- Shared marks --------------------------------------------------------
   The accent rule reads as a lit LED strip: a solid accent bar with a top-lit
   gradient, and one soft highlight that sweeps left, then back right. */
.hazard-stripe {
  position: relative;
  height: 6px;
  overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in srgb, #ffffff 26%, var(--color-accent)) 0%,
    var(--color-accent) 55%,
    color-mix(in srgb, #000000 14%, var(--color-accent)) 100%);
}
.hazard-stripe::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 34%;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, #ffffff 80%, transparent) 50%,
    transparent 100%);
  animation: led-sweep 5s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes led-sweep {
  from { transform: translateX(-115%); }
  to { transform: translateX(310%); }
}

.kicker {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 16px;
  font-size: 12.5px; line-height: 14px; letter-spacing: .11em;
  text-transform: uppercase; font-weight: 600;
  color: var(--accent-on-light);
  font-feature-settings: 'tnum' 1;
}
.kicker::before {
  content: ''; width: 9px; height: 9px; flex: none;
  background: var(--color-accent);
}
.kicker--on-dark { color: var(--accent-on-dark); }

.h2 {
  font-size: clamp(32px, calc(4vw + 2px), 54px);
  line-height: 1.05;
  letter-spacing: -.022em;
  margin: 0 0 0 -.05em;
}
.h2--narrow { font-size: clamp(32px, calc(3.6vw + 2px), 48px); line-height: 1.06; }

.lede {
  margin: 0;
  font-size: 16.5px; line-height: 28px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

.sq-bullet {
  display: flex; gap: 10px;
}
.sq-bullet::before {
  content: ''; width: 7px; height: 7px; flex: none;
  background: var(--color-accent); margin-top: 6px;
}

/* --- Icons (Lucide, drawn once into a sprite at the top of <body>) -------- */
.icon {
  flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon--solid { fill: currentColor; stroke: none; }
.i-accent { color: var(--color-accent); }
.i-accent-dark { color: var(--accent-on-dark); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 14px; line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 8px 14px;
}
.btn:hover { color: var(--color-text); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary { background: var(--color-accent); color: var(--color-accent-label); }
.btn--primary:hover { background: var(--color-accent-600); color: var(--color-accent-label); }
.btn--primary:active { background: var(--color-accent-700); }

.btn--outline { border: 2px solid var(--color-divider); }
.btn--outline:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn--outline:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

.btn--ghost {
  color: var(--accent-on-light);
  padding-inline: 4px;
  align-self: flex-start;
  font-size: 14.5px;
}
.btn--ghost:hover {
  color: var(--accent-on-light);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.btn--ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

/* size steps used across the page */
.btn--nav { font-size: 14px; padding: 12px 18px; white-space: nowrap; }
.btn--lg { font-size: 16.5px; padding: 17px 24px; }
.btn--md { font-size: 15.5px; padding: 15px 22px; white-space: nowrap; }
.btn--sm { font-size: 15px; padding: 14px 20px; }

/* --- Top bar ------------------------------------------------------------- */
.topbar { background: var(--color-neutral-900); color: var(--color-bg); }
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px;
  padding-block: 9px;
  font-size: 11.5px; line-height: 16px; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 600;
}
.topbar__rating { display: inline-flex; align-items: center; gap: 7px; }
.topbar__last { margin-left: auto; color: var(--accent-on-dark); }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
  box-shadow: 0 3px 8px color-mix(in srgb, #201e1d 8%, transparent);
}

/* The header CTA is the one control that follows the visitor down the page, so
   it carries a slow sheen: enough to catch the eye, not enough to nag.
   The label stays ink, not paper: white on this green is only 2.8:1. */
.site-header .btn--primary {
  position: relative;
  overflow: hidden;
  transition: background-color .2s ease, transform .2s ease;
}
.site-header .btn--primary::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 45%;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, #ffffff 55%, transparent) 50%,
    transparent 100%);
  transform: translateX(-150%);
  animation: btn-sheen 5s ease-in-out infinite;
  pointer-events: none;
}
.site-header .btn--primary:hover { transform: translateY(-1px); }
.site-header .btn--primary:active { transform: translateY(0); }
@keyframes btn-sheen {
  0%, 55% { transform: translateX(-150%); }
  90%, 100% { transform: translateX(270%); }
}
.site-header__inner {
  display: flex; align-items: center; gap: clamp(14px, 3vw, 40px);
  min-height: 74px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit; margin-right: auto;
}
.brand img { height: 38px; width: auto; }

.nav {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
}
.nav a { color: inherit; text-decoration: none; }
.nav a:hover { color: var(--accent-on-light); }

.header-phone {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--color-text);
  font-family: var(--font-heading); font-weight: 800; font-size: 16px;
  font-feature-settings: 'tnum' 1; white-space: nowrap;
}
.header-phone:hover { color: var(--color-text); }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding-block: calc(1.75 * var(--lead)) calc(2.2 * var(--lead)); }
.hero .kicker { margin-bottom: calc(.95 * var(--lead)); }

.hero__title {
  font-size: clamp(44px, 7.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0 0 0 -.055em;
}
.hero__title span { display: block; }
.hero__title .accent { color: var(--color-accent); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: calc(1.4 * var(--lead)) clamp(32px, 6vw, 88px);
  margin-top: calc(1.05 * var(--lead));
}
.hero__sub {
  margin: 0; max-width: 52ch;
  font-size: 18px; line-height: 30px;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: calc(1.1 * var(--lead));
}
.hero__note {
  margin: 18px 0 0; max-width: 46ch;
  font-size: 13.5px; line-height: 20px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.proof { border-top: 2px solid var(--color-divider); }
.proof__head {
  display: flex; align-items: baseline; gap: 18px;
  padding: 20px 4px 16px;
  border-bottom: 1px solid var(--color-divider);
}
.proof__score {
  margin: 0;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(52px, 5vw, 72px); line-height: 1; letter-spacing: -.03em;
  color: var(--color-accent); font-feature-settings: 'tnum' 1;
}
.stars { display: flex; gap: 3px; margin-bottom: 6px; }
.proof__caption {
  margin: 0; font-size: 13.5px; line-height: 19px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.proof__caption strong { color: var(--color-text); }

.stats { margin: 0; }
.stat {
  display: flex; align-items: baseline; gap: 16px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--color-divider);
}
.stat:last-child { border-bottom-width: 2px; }
.stat dt {
  flex: none; width: 74px;
  font-family: var(--font-heading); font-weight: 800; font-size: 22px;
  line-height: 1; font-feature-settings: 'tnum' 1;
}
.stat dd { margin: 0; font-size: 14px; line-height: 21px; }

.row-hover:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }

/* --- Full-bleed team photo ---------------------------------------------- */
.hero-photo { filter: grayscale(1) contrast(1.08); }
.hero-photo img {
  width: 100%;
  height: clamp(240px, 38vw, 460px);
  object-fit: cover;
  /* The file is already pre-cropped to 2.72:1 with headroom above the tallest
     head. This keeps that headroom even on an ultrawide, where the band crops
     down to roughly 5:1. */
  object-position: center 8%;
}
.photo-band { background: var(--color-neutral-900); color: var(--color-bg); }
.photo-band__inner {
  display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline;
  padding-block: 11px;
  font-size: 11.5px; line-height: 16px; letter-spacing: .09em;
  text-transform: uppercase;
}
.photo-band__label { color: var(--accent-on-dark); font-weight: 600; }
.photo-band__text { opacity: .75; }

/* --- Emergency strip ----------------------------------------------------- */
.emergency { border-bottom: 2px solid var(--color-divider); }
.emergency__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px clamp(20px, 3vw, 34px);
  align-items: center;
  padding-block: calc(1.4 * var(--lead));
}
.emergency h2 {
  font-size: clamp(22px, calc(2.3vw + 2px), 29px); line-height: 1.14;
  letter-spacing: -.015em; margin: 0 0 8px; max-width: 36ch;
}
.emergency p {
  margin: 0; max-width: 66ch;
  font-size: 15.5px; line-height: 26px;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}

/* --- Generic section ----------------------------------------------------- */
.section { padding-block: calc(2.6 * var(--lead)); }
.section--rule { border-top: 2px solid var(--color-divider); }

.section-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--lead) clamp(32px, 6vw, 88px);
  align-items: end;
  margin-bottom: calc(1.6 * var(--lead));
}

/* Ruled cell grid: container draws top + left, each cell right + bottom. */
.grid-ruled {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(295px, 1fr));
  border-top: 2px solid var(--color-divider);
  border-left: 2px solid var(--color-divider);
}
.grid-ruled > * {
  border-right: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
}

/* --- 01 What we remove --------------------------------------------------- */
#services { padding-block: calc(2.8 * var(--lead)) calc(2.4 * var(--lead)); }

.service {
  padding: calc(1.05 * var(--lead)) clamp(20px, 2.4vw, 30px) calc(1.15 * var(--lead));
  display: flex; flex-direction: column; gap: 12px;
}
.service__code {
  margin: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; font-feature-settings: 'tnum' 1;
}
.service__code b { font-weight: 600; color: var(--color-accent); }
.service__code span { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.service h3 {
  font-size: 22px; line-height: 1.14; letter-spacing: -.015em;
  margin: 0; max-width: 18ch;
}
.service__body {
  margin: 0; font-size: 14.5px; line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 74%, transparent);
}
.footnote {
  margin: 18px 0 0; max-width: 76ch;
  font-size: 13.5px; line-height: 22px;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

/* --- Quote form (ink band) ---------------------------------------------- */
.quote { background: var(--color-neutral-900); color: var(--color-bg); }
.quote__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: calc(1.6 * var(--lead)) clamp(32px, 5vw, 80px);
  padding-block: calc(2.4 * var(--lead)) calc(2.6 * var(--lead));
}
.quote h2 { margin-bottom: 14px; max-width: 19ch; }
.quote__lede {
  margin: 0 0 calc(1.2 * var(--lead)); max-width: 54ch;
  font-size: 16.5px; line-height: 28px; opacity: .78;
}

/* --- GoHighLevel form embed ----------------------------------------------
   The form itself is an iframe, so its interior is styled inside GHL, not
   here. This is the frame around it: the same lifted panel the custom form
   used, so the section still reads as the page's second conversion goal
   rather than more dark band to scroll past. */
.ghl-form {
  background: color-mix(in srgb, #f3f2f2 6%, transparent);
  border-top: 4px solid var(--color-accent);
  padding: 18px clamp(12px, 1.4vw, 20px);
}
.ghl-form iframe {
  display: block;
  width: 100%;
  min-height: 796px;
  border: 0;
  border-radius: 0;
}
.privacy--standalone { margin-top: 16px; max-width: 44ch; }

.aside { align-self: start; }
.aside__title {
  margin: 0 0 18px; font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 600; opacity: .65;
}
.standard {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid color-mix(in srgb, #f3f2f2 25%, transparent);
}
.standard li {
  display: flex; gap: 13px; padding: 15px 0;
  border-bottom: 1px solid color-mix(in srgb, #f3f2f2 25%, transparent);
}
.standard svg { flex: none; margin-top: 5px; }
.standard strong {
  display: block; font-family: var(--font-heading); font-weight: 800; font-size: 14.5px;
}
.standard small { display: block; font-size: 13px; opacity: .65; }

.phone-box {
  margin-top: 26px; padding: 20px;
  background: color-mix(in srgb, #f3f2f2 8%, transparent);
  border-left: 3px solid var(--color-accent);
}
.phone-box p { margin: 0; font-size: 13.5px; line-height: 23px; opacity: .9; }
.phone-box a {
  color: var(--accent-on-dark);
  font-family: var(--font-heading); font-weight: 800;
  font-feature-settings: 'tnum' 1;
}
.phone-box a:hover { color: var(--color-accent-300); }
.phone-box small { opacity: .6; }

/* --- 02 Situations ------------------------------------------------------- */
#situations { padding-block: calc(2.8 * var(--lead)) calc(2.4 * var(--lead)); }
#situations .h2 { margin-bottom: 14px; max-width: 22ch; }
#situations .lede { margin-bottom: calc(1.6 * var(--lead)); max-width: 52ch; }

.cols-ruled {
  display: grid;
  border-top: 2px solid var(--color-divider);
}
.cols-ruled > * { border-bottom: 2px solid var(--color-divider); }
.cols-ruled > * + * { border-left: 2px solid var(--color-divider); }

.situations { grid-template-columns: repeat(3, 1fr); }
.situation {
  display: flex; flex-direction: column; gap: 14px;
  padding: calc(1.2 * var(--lead)) clamp(20px, 2.4vw, 32px) calc(1.3 * var(--lead));
}
.situations > :first-child { padding-left: 0; }
.situations > :last-child { padding-right: 0; }
.situation__label {
  margin: 0; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--color-accent); font-feature-settings: 'tnum' 1;
}
.situation h3 {
  font-size: 23px; line-height: 1.14; letter-spacing: -.015em;
  margin: 0; max-width: 20ch;
}
.situation__body {
  margin: 0; font-size: 14.5px; line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 74%, transparent);
}
.situation ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13.5px; line-height: 20px;
}
.situation .btn--ghost { margin-top: auto; }

/* --- 03 How it works ----------------------------------------------------- */
#process { padding-block: 0 calc(2.6 * var(--lead)); }
#process .h2 { margin-bottom: calc(1.5 * var(--lead)); max-width: 18ch; }

.steps { grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.step { padding: calc(1.05 * var(--lead)) clamp(18px, 2vw, 26px) calc(1.2 * var(--lead)); }
.steps > :first-child { padding-left: 0; }
.steps > :last-child { padding-right: 0; }
.step__num {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(44px, 4.6vw, 64px); line-height: 1; letter-spacing: -.04em;
  margin: 0 0 14px -.04em; color: var(--color-accent);
  font-feature-settings: 'tnum' 1;
}
.step h3 {
  font-size: 19px; line-height: 1.18; letter-spacing: -.01em; margin: 0 0 8px;
}
.step__body {
  margin: 0; font-size: 14.5px; line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 74%, transparent);
}
.process-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  padding-top: calc(1.2 * var(--lead));
}
.process-cta p {
  margin: 0; font-family: var(--font-heading); font-weight: 800;
  font-size: 19px; letter-spacing: -.01em;
}
.process-cta div { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- 04 About ------------------------------------------------------------ */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(1.5 * var(--lead)) clamp(32px, 5vw, 80px);
  align-items: center;
}
.team-figure { overflow: hidden; filter: grayscale(1) contrast(1.08); }
.team-figure img {
  width: 100%; height: auto; aspect-ratio: 16 / 10;
  /* The file is cut to 16/10 already, so nothing is cropped away here. */
  object-fit: cover; object-position: center;
  transition: transform .5s ease;
}
.team-figure:hover img { transform: scale(1.025); }
.team-figure figcaption {
  display: flex; gap: 14px; align-items: baseline;
  padding-top: 10px;
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
}
.team-figure figcaption b {
  color: var(--accent-on-light); font-weight: 600; font-feature-settings: 'tnum' 1;
}
.team-figure figcaption span { color: color-mix(in srgb, var(--color-text) 60%, transparent); }

.about__grid .h2 { margin-bottom: 14px; max-width: 18ch; }
.about__lede {
  margin: 0 0 calc(1.1 * var(--lead)); max-width: 52ch;
  font-size: 16px; line-height: 27px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.deflist { margin: 0; border-top: 2px solid var(--color-divider); }
.deflist > div { padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
.deflist > div:last-child { border-bottom-width: 2px; }
.deflist dt {
  font-family: var(--font-heading); font-weight: 800; font-size: 16px; margin-bottom: 3px;
}
.deflist dd {
  margin: 0; font-size: 14px; line-height: 22px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

/* --- 05 Recent work ------------------------------------------------------ */
#work .section-split { margin-bottom: calc(1.5 * var(--lead)); }
#work .h2 { max-width: 16ch; }
.work__intro {
  margin: 0; max-width: 50ch; font-size: 16px; line-height: 27px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.work-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2px;
  background: var(--color-divider);
  border: 2px solid var(--color-divider);
}
/* Column layout keeps every caption bar flush with the bottom of its cell,
   even when one caption runs to two lines at a narrow column width. */
.work-cell {
  display: flex; flex-direction: column;
  background: var(--color-bg); overflow: hidden;
}
.work-cell figcaption { margin-top: auto; }
.work-cell img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .5s ease;
}
.work-cell:hover img { transform: scale(1.025); }
.work-cell figcaption {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 14px;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--color-neutral-900); color: var(--color-bg);
}
.work-cell figcaption b { font-weight: 600; }
.work-cell figcaption span { opacity: .65; }

/* --- 06 Reviews ---------------------------------------------------------- */
.reviews__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: calc(1.2 * var(--lead)) clamp(40px, 6vw, 96px);
  align-items: end;
  margin-bottom: calc(1.5 * var(--lead));
}
.score-xl {
  margin: 0 0 0 -.04em;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(72px, 10vw, 140px); line-height: .95; letter-spacing: -.04em;
  color: var(--color-accent); font-feature-settings: 'tnum' 1;
}
.reviews__head .stars { gap: 4px; margin-bottom: 10px; }
.reviews__head h2 {
  font-size: clamp(26px, calc(2.8vw + 2px), 38px); line-height: 1.08; letter-spacing: -.02em;
  margin: 0 0 8px; max-width: 26ch;
}
.reviews__meta {
  margin: 0; font-size: 15px; line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.review {
  padding: 24px clamp(20px, 2.2vw, 28px);
  display: flex; flex-direction: column; gap: 16px;
}
.review blockquote {
  margin: 0; flex: 1;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 17px; line-height: 1.4; letter-spacing: -.005em;
}
/* No customer headshots exist, so each review is signed with its rating rather
   than an initials disc: stars, then the name, then what the job was. */
.review figcaption { display: block; }
.review .stars { gap: 3px; margin-bottom: 9px; }
.review figcaption strong { display: block; font-size: 13.5px; }
.review figcaption small {
  display: block;
  font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* --- 07 Price ------------------------------------------------------------ */
.price__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: calc(1.6 * var(--lead)) clamp(32px, 5vw, 80px);
  align-items: start;
}
.price__grid .h2 { margin-bottom: 14px; max-width: 16ch; }
.price__lede {
  margin: 0 0 20px; max-width: 46ch;
  font-size: 16px; line-height: 27px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.price-box {
  border: 2px solid var(--color-divider);
  padding: 22px clamp(20px, 2.2vw, 26px);
  margin-bottom: 20px;
}
.price-box__title {
  margin: 0 0 8px;
  font-family: var(--font-heading); font-weight: 800; font-size: 17px;
  letter-spacing: -.01em;
}
.price-box__body {
  margin: 0 0 16px; font-size: 14px; line-height: 23px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.price-box strong { color: var(--color-text); font-feature-settings: 'tnum' 1; }

.factors { margin: 0; border-top: 2px solid var(--color-divider); }
.factors > div {
  display: grid; grid-template-columns: minmax(96px, 140px) 1fr;
  gap: 8px 20px; padding: 16px 4px;
  border-bottom: 1px solid var(--color-divider);
}
.factors > div:last-child { border-bottom-width: 2px; }
.factors dt { font-family: var(--font-heading); font-weight: 800; font-size: 15.5px; }
.factors dd {
  margin: 0; font-size: 14px; line-height: 23px;
  color: color-mix(in srgb, var(--color-text) 74%, transparent);
}

/* --- 08 Coverage --------------------------------------------------------- */
.coverage__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: calc(1.5 * var(--lead)) clamp(32px, 5vw, 80px);
}
.coverage__grid .h2 { margin-bottom: 14px; max-width: 14ch; }
.coverage__lede {
  margin: 0 0 24px; max-width: 44ch;
  font-size: 16px; line-height: 27px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.areas {
  list-style: none; margin: 0; padding: 0; align-self: start;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 24px;
  border-top: 2px solid var(--color-divider);
}
.areas li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--color-divider);
  font-size: 14px;
}
.areas li::before {
  content: ''; width: 7px; height: 7px; flex: none; background: var(--color-accent);
}

/* --- 09 FAQ -------------------------------------------------------------- */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: calc(1.4 * var(--lead)) clamp(32px, 5vw, 80px);
  align-items: start;
}
.faq__grid .h2 { margin-bottom: 14px; max-width: 14ch; }
.faq__intro {
  margin: 0; max-width: 38ch; font-size: 15px; line-height: 25px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.faq__list { border-top: 2px solid var(--color-divider); }
.faq__list details { border-bottom: 1px solid var(--color-divider); }
.faq__list details:last-child { border-bottom-width: 2px; }
.faq__list summary {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 4px;
  font-family: var(--font-heading); font-weight: 800; font-size: 16.5px;
  letter-spacing: -.005em;
  cursor: pointer; list-style: none;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary span { flex: 1; }
.faq__list summary svg { flex: none; transition: transform .25s ease; }
.faq__list details[open] summary svg { transform: rotate(45deg); }
.faq__answer {
  padding: 0 4px 20px; max-width: 66ch;
  font-size: 14.5px; line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
}

/* --- Poster close -------------------------------------------------------- */
.poster { background: var(--color-accent); color: var(--color-on-accent); }
.poster__inner { padding-block: calc(2.8 * var(--lead)) calc(3 * var(--lead)); }
.poster h2 {
  font-size: clamp(40px, calc(5.6vw + 2px), 78px); line-height: 1.02; letter-spacing: -.025em;
  margin: 0 0 0 -.055em;
}
.poster h2 span { display: block; }
.poster__cta {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(1.4 * var(--lead));
}
.btn--paper { background: var(--color-bg); color: var(--color-text); }
.btn--paper:hover { background: var(--color-neutral-200); color: var(--color-text); }
.btn--on-accent {
  border: 2px solid var(--color-on-accent);
  color: var(--color-on-accent);
}
.btn--on-accent:hover {
  color: var(--color-on-accent);
  background: color-mix(in srgb, var(--color-on-accent) 10%, transparent);
}
.poster__points {
  list-style: none;
  margin: calc(1.4 * var(--lead)) 0 0;
  padding: calc(1 * var(--lead)) 0 0;
  border-top: 2px solid color-mix(in srgb, #201e1d 45%, transparent);
  display: flex; flex-wrap: wrap; gap: 10px 36px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
}
.poster__points li { display: flex; gap: 10px; align-items: baseline; }
.poster__points li::before {
  content: ''; width: 7px; height: 7px; flex: none; background: var(--color-on-accent);
}

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: var(--color-neutral-900); color: var(--color-bg); }
.site-footer__inner { padding-block: calc(2.2 * var(--lead)) calc(1.6 * var(--lead)); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, .8fr));
  gap: calc(1.4 * var(--lead)) clamp(24px, 4vw, 64px);
  padding-bottom: calc(1.4 * var(--lead));
  border-bottom: 1px solid color-mix(in srgb, #f3f2f2 22%, transparent);
}
.footer__brand img { height: 40px; width: auto; margin-bottom: 16px; }
.footer__tagline {
  margin: 0 0 16px; max-width: 34ch; font-size: 13.5px; line-height: 22px; opacity: .7;
}
.footer__phone {
  font-family: var(--font-heading); font-weight: 800; font-size: 18px;
  color: var(--color-bg); text-decoration: none; font-feature-settings: 'tnum' 1;
}
.footer__phone:hover { color: var(--color-bg); }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, #f3f2f2 30%, transparent);
  color: var(--color-bg);
}
.social a:hover { color: var(--color-bg); background: color-mix(in srgb, #f3f2f2 10%, transparent); }

.footer-col__title {
  margin: 0 0 14px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; opacity: .55;
}
.footer-col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px; font-size: 13.5px;
}
.footer-col a { color: var(--color-bg); text-decoration: none; opacity: .8; }
.footer-col a:hover { color: var(--color-bg); opacity: 1; }
.footer-contact address {
  margin: 0 0 14px; font-style: normal;
  font-size: 13.5px; line-height: 21px; opacity: .8;
}
.footer-contact address:last-child { margin-bottom: 0; }
.footer-contact strong { font-family: var(--font-heading); font-weight: 800; }
.footer-contact a {
  color: var(--accent-on-dark); text-decoration: none; font-feature-settings: 'tnum' 1;
}
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline;
  padding-top: 20px; font-size: 12.5px; opacity: .55;
}
.footer-legal p { margin: 0; }
.footer-legal a { color: var(--color-bg); }

/* --- Mobile call bar ----------------------------------------------------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex;
  background: var(--color-neutral-900);
  border-top: 2px solid var(--color-accent);
}
.callbar a {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 58px;
  color: var(--color-bg); text-decoration: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
  font-feature-settings: 'tnum' 1;
}
/* `.callbar a` sets the paper colour at higher specificity, so the green half
   has to out-specify it to take the button label colour. */
.callbar a.callbar__quote,
.callbar a.callbar__quote:hover {
  background: var(--color-accent);
  color: var(--color-accent-label);
}

/* --- Scroll reveals ------------------------------------------------------
   Opt-in: hidden states only apply once JS has set body[data-arm], so a JS
   failure can never hide content. */
body[data-arm] [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
body[data-arm] [data-reveal][data-in] { opacity: 1; transform: none; }

/* --- Team photo colourise on scroll (progressive enhancement) ------------ */
@keyframes ca-colorize {
  from { filter: grayscale(1) contrast(1.08); }
  to { filter: grayscale(0) contrast(1); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-photo {
      animation: ca-colorize linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 75%;
    }
  }
}

/* --- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .team-figure img, .work-cell img { transition: none; }
  .team-figure:hover img, .work-cell:hover img { transform: none; }
  .faq__list summary svg { transition: none; }
  .hazard-stripe::after { animation: none; opacity: 0; }
  .site-header .btn--primary { transition: background-color .2s ease; }
  .site-header .btn--primary::after { animation: none; opacity: 0; }
  .site-header .btn--primary:hover { transform: none; }
}

/* --- Breakpoints --------------------------------------------------------- */
@media (max-width: 1000px) {
  .nav { display: none; }
}

@media (min-width: 761px) {
  .u-only-sm { display: none !important; }
}

@media (max-width: 760px) {
  body { padding-bottom: 64px; }

  .u-hide-sm { display: none !important; }

  /* The desktop hero opens on 2.8 line units of air. On a phone the H1 is
     already the whole screen, so that reads as a dead gap under the header. */
  .hero { padding-top: calc(1.3 * var(--lead)); }
  .hero .kicker { margin-bottom: calc(.85 * var(--lead)); }

  .hero__grid,
  .section-split,
  .quote__grid,
  .about__grid,
  .price__grid,
  .coverage__grid,
  .faq__grid,
  .reviews__head,
  .footer__grid { grid-template-columns: 1fr; }

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

  /* Ruled columns become ruled rows once stacked: the vertical rules and the
     column gutters would otherwise read as stray ink. */
  .cols-ruled { grid-template-columns: 1fr; }
  .cols-ruled > * + * { border-left: 0; }
  .situation, .step { padding-inline: 0 !important; }

  .reviews__head { align-items: start; }
}

/* --- Thank-you page ------------------------------------------------------- */
.thanks { padding-block: calc(2.4 * var(--lead)) calc(3 * var(--lead)); }
.thanks__title {
  font-size: clamp(32px, calc(4vw + 2px), 54px);
  line-height: 1.05; letter-spacing: -.022em;
  margin: 0 0 18px -.05em; max-width: 20ch;
}
.thanks__lede {
  margin: 0 0 calc(1.6 * var(--lead)); max-width: 54ch;
  font-size: 16.5px; line-height: 28px;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}
.thanks__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: calc(1.4 * var(--lead)) clamp(32px, 5vw, 80px);
  border-top: 2px solid var(--color-divider);
  padding-top: calc(1.2 * var(--lead));
}
.thanks__label {
  margin: 0 0 16px; font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 600;
  color: var(--accent-on-light);
}
.thanks__steps { list-style: none; margin: 0; padding: 0; }
.thanks__steps li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--color-divider);
  font-size: 15px; line-height: 25px;
}
.thanks__steps li:last-child { border-bottom-width: 2px; }
.thanks__steps b {
  flex: none; width: 22px;
  font-family: var(--font-heading); font-weight: 800; font-size: 17px;
  color: var(--color-accent); font-feature-settings: 'tnum' 1;
}
.thanks__box {
  align-self: start; padding: 22px clamp(18px, 2vw, 26px);
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
}
.thanks__box p { margin: 0 0 10px; font-size: 14.5px; line-height: 24px; }
.thanks__box p:last-child { margin-bottom: 0; }
.thanks__muted { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.thanks__cta { margin-top: calc(1.6 * var(--lead)); }
.thanks__cta .icon { transform: rotate(180deg); }

@media (max-width: 760px) {
  .thanks__grid { grid-template-columns: 1fr; }
}