/* Headings: Fraunces, self-hosted. The "wonky" letterforms are switched off
   inside the font file itself (WONK pinned to 0, SOFT to 24, optical size
   48), so no browser setting can bring them back. Weight 400 to 600. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/fraunces-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;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/fraunces-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;
}
/* Body: Inter, self-hosted variable font. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/inter-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/inter-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;
}
/* Metric-matched fallbacks: system fonts resized to the measured width and
   line metrics of each web font, so text does not reflow when it arrives. */
@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'), local('Tinos');
  size-adjust: 114.29%;
  ascent-override: 85.6%;
  descent-override: 22.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
  size-adjust: 107.34%;
  ascent-override: 90.25%;
  descent-override: 22.47%;
  line-gap-override: 0%;
}

/* ==========================================================================
   Mila Flooring & Carpentry , design system
   Brand: #E50000 red, near-black, warm timber neutrals
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --red: #E50000;
  --red-bright: #FF2020;
  --red-deep: #A80000;
  --red-soft: #FFF0F0;

  --ink: #0A0908;
  --ink-2: #17130F;
  --ink-3: #4A4038;
  --ink-4: #6F645A;
  --paper: #FCFAF7;
  --paper-2: #F4EFE7;
  --paper-3: #E9E1D5;

  --oak: #C08A4E;

  --bg: var(--paper);
  --bg-alt: var(--paper-2);
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --text: var(--ink);
  --text-muted: var(--ink-3);
  --text-faint: var(--ink-4);
  --line: color-mix(in oklab, var(--ink) 11%, transparent);
  --line-strong: color-mix(in oklab, var(--ink) 20%, transparent);
  /* Text red is a shade deeper than the brand red so small text reads at
     WCAG AA on every light background; fills keep the brand red. White text
     on the gradient passes from its lightest corner. */
  --accent: #D40000;
  --accent-grad: linear-gradient(135deg, #E81010 0%, #D40000 45%, #A80000 100%);
  /* Gradient-coloured numbers: the dark end must stay readable on dark backgrounds. */
  --text-grad: var(--accent-grad);
  --text-grad-dark: linear-gradient(135deg, #FF7070 0%, #FF3B3B 55%, #E81010 100%);

  --font-display: "Fraunces", "Fraunces Fallback", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.32rem + 0.85vw, 2.05rem);
  --step-3:  clamp(1.9rem, 1.55rem + 1.6vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.8rem + 2.8vw, 4.1rem);
  --step-5:  clamp(3rem, 1.9rem + 5vw, 6rem);

  --gap: clamp(1rem, 0.8rem + 1vw, 1.6rem);
  --section-y: clamp(4rem, 2.6rem + 6vw, 9rem);
  --wrap: 1280px;
  --wrap-narrow: 800px;

  --radius: 6px;
  --radius-lg: 14px;
  --radius-xl: 22px;

  --shadow-sm: 0 1px 2px rgb(10 9 8 / .04), 0 3px 10px rgb(10 9 8 / .04);
  --shadow-md: 0 2px 6px rgb(10 9 8 / .05), 0 14px 34px -8px rgb(10 9 8 / .12);
  --shadow-lg: 0 6px 16px rgb(10 9 8 / .07), 0 34px 70px -16px rgb(10 9 8 / .2);
  --shadow-red: 0 10px 30px -8px rgb(229 0 0 / .45);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* The fixed header's bar, plus the announcement strip under it when one is shown. */
  --header-bar: 82px;
  --promo-h: 0px;
  --pv-h: 0px;
  --header-h: calc(var(--header-bar) + var(--promo-h) + var(--pv-h));
}
:root:has(.promo) { --promo-h: 3.5rem; }
:root:has(.pv-strip) { --pv-h: 2.25rem; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D0B0A;
    --bg-alt: #141110;
    --surface: #1A1615;
    --surface-2: #201B19;
    --text: #F8F4EF;
    --text-muted: #C2B7AB;
    --text-faint: #8F8478;
    --line: color-mix(in oklab, #F8F4EF 13%, transparent);
    --line-strong: color-mix(in oklab, #F8F4EF 25%, transparent);
    --red-soft: #2C1210;
    --accent: #FF3B3B;
    --text-grad: var(--text-grad-dark);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .45);
    --shadow-md: 0 2px 6px rgb(0 0 0 / .45), 0 14px 34px -8px rgb(0 0 0 / .6);
    --shadow-lg: 0 6px 16px rgb(0 0 0 / .5), 0 34px 70px -16px rgb(0 0 0 / .75);
  }
}
:root[data-theme="dark"] {
  --bg: #0D0B0A;
  --bg-alt: #141110;
  --surface: #1A1615;
  --surface-2: #201B19;
  --text: #F8F4EF;
  --text-muted: #C2B7AB;
  --text-faint: #8F8478;
  --line: color-mix(in oklab, #F8F4EF 13%, transparent);
  --line-strong: color-mix(in oklab, #F8F4EF 25%, transparent);
  --red-soft: #2C1210;
  --accent: #FF3B3B;
  --text-grad: var(--text-grad-dark);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .45);
  --shadow-md: 0 2px 6px rgb(0 0 0 / .45), 0 14px 34px -8px rgb(0 0 0 / .6);
  --shadow-lg: 0 6px 16px rgb(0 0 0 / .5), 0 34px 70px -16px rgb(0 0 0 / .75);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:where(h1,h2,h3,h4,h5,h6) { font-weight: 500; line-height: 1.08; text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--accent); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: 0; left: 50%; translate: -50% -120%;
  z-index: 300; padding: .75rem 1.3rem; background: var(--accent);
  color: #fff; font-weight: 600; font-size: var(--step--1);
  border-radius: 0 0 var(--radius) var(--radius); transition: translate .2s var(--ease);
}
.skip-link:focus { translate: -50% 0; }

/* Grain: a barely-there texture that stops large flat fills looking dead. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 500; pointer-events: none;
  opacity: .022; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::after { mix-blend-mode: screen; opacity: .035; }
}
:root[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: .035; }

/* Scroll progress */
.progress {
  position: fixed; top: 0; left: 0; z-index: 250; height: 2px; width: 100%;
  transform-origin: 0 50%; scale: var(--p, 0) 1;
  background: var(--accent-grad);
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--bg-alt); }
.section--ink {
  background: var(--ink); color: #F8F4EF;
  --text: #F8F4EF; --text-muted: #B9AEA2; --line: rgb(255 255 255 / .13);
  --line-strong: rgb(255 255 255 / .24); --surface: #16120F; --surface-2: #1C1714;
}
/* Ambient red glow so dark bands read as lit, not as a black box. */
.section--ink::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60rem 30rem at 15% 0%, rgb(229 0 0 / .16), transparent 60%),
    radial-gradient(50rem 26rem at 90% 100%, rgb(229 0 0 / .1), transparent 60%);
}
.section--ink > * { position: relative; }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.06;
}
.h1 { font-size: var(--step-5); }
.h2 { font-size: var(--step-4); }
.h3 { font-size: var(--step-3); }
.h4 { font-size: var(--step-2); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ""; width: 1.8rem; height: 2px; background: var(--accent-grad); border-radius: 2px; }
.eyebrow--center::after { content: ""; width: 1.8rem; height: 2px; background: var(--accent-grad); border-radius: 2px; }

.lede { font-size: var(--step-1); color: var(--text-muted); line-height: 1.55; }
.muted { color: var(--text-muted); }
.measure { max-width: 62ch; }
.center { text-align: center; margin-inline: auto; }

.section-head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.2rem, 1.5rem + 2.6vw, 4rem); }
.section-head--center { text-align: center; justify-items: center; }
.section-head--center .measure { margin-inline: auto; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: end; gap: 2.5rem; }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem; padding: 1rem 1.7rem;
  font-size: var(--step--1); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--btn-fg); background: var(--accent-grad); background-size: 150% 150%;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; overflow: hidden; isolation: isolate;
  box-shadow: var(--shadow-red);
  transition: translate .3s var(--ease-out), box-shadow .3s var(--ease), background-position .5s var(--ease);
}
/* Sheen sweep on hover. */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .3) 50%, transparent 70%);
  translate: -120% 0; transition: translate .7s var(--ease-out);
}
.btn:hover { translate: 0 -3px; box-shadow: 0 16px 40px -10px rgb(229 0 0 / .6); background-position: 100% 0; }
.btn:hover::before { translate: 120% 0; }
.btn:active { translate: 0 -1px; }
.btn > * { position: relative; z-index: 2; }

.btn--outline {
  background: transparent; color: var(--text); border-color: var(--line-strong); box-shadow: none;
}
.btn--outline::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--text);
  translate: 0 101%; transition: translate .4s var(--ease-out);
}
.btn--outline:hover { color: var(--bg); border-color: var(--text); box-shadow: var(--shadow-md); }
.btn--outline:hover::after { translate: 0 0; }

.btn--light { background: #fff; color: var(--ink); box-shadow: 0 10px 30px -10px rgb(0 0 0 / .5); }
.btn--light:hover { box-shadow: 0 16px 40px -10px rgb(0 0 0 / .6); }

.btn--ghost-light {
  background: rgb(255 255 255 / .07); color: #fff; border-color: rgb(255 255 255 / .28);
  box-shadow: none; backdrop-filter: blur(8px);
}
.btn--ghost-light:hover { background: rgb(255 255 255 / .16); border-color: #fff; }

.btn--lg { padding: 1.15rem 2.1rem; font-size: var(--step-0); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: var(--step--1); letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .4s var(--ease-out);
}
.link-arrow svg { transition: translate .3s var(--ease-spring); }
.link-arrow:hover { background-size: 100% 1.5px; }
.link-arrow:hover svg { translate: 5px 0; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset-inline: 0; top: 0; z-index: 200;
  transition: background .4s var(--ease), border-color .4s var(--ease),
              box-shadow .4s var(--ease), backdrop-filter .4s var(--ease),
              translate .45s var(--ease-out);
  border-bottom: 1px solid transparent;
}
/* Slides away while reading down the page; any scroll up brings it back. */
.header.is-hidden { translate: 0 -100%; box-shadow: none; }
.header:focus-within { translate: 0 0; }
/* Over a hero image the header is glass; elsewhere and once scrolled it solidifies. */
.header--over { color: #fff; }
.header--over .nav__link { color: rgb(255 255 255 / .82); }
.header--over .icon-btn { color: rgb(255 255 255 / .82); border-color: rgb(255 255 255 / .25); }
.header--over .icon-btn:hover { background: rgb(255 255 255 / .14); color: #fff; border-color: rgb(255 255 255 / .5); }
.header--over .brand__mark--dark { display: none; }
.header--over .brand__mark--light { display: block; }
.header--over::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(8 7 6 / .55), transparent);
}

.header.is-stuck {
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
.header.is-stuck::before { opacity: 0; }
.header.is-stuck .nav__link { color: var(--text-muted); }
.header.is-stuck .icon-btn { color: var(--text-muted); border-color: var(--line); }
.header.is-stuck .icon-btn:hover { background: var(--bg-alt); color: var(--text); border-color: var(--line-strong); }
.header.is-stuck .brand__mark--dark { display: block; }
.header.is-stuck .brand__mark--light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .header.is-stuck .brand__mark--dark { display: none; }
  :root:not([data-theme="light"]) .header.is-stuck .brand__mark--light { display: block; }
}
:root[data-theme="dark"] .header.is-stuck .brand__mark--dark { display: none; }
:root[data-theme="dark"] .header.is-stuck .brand__mark--light { display: block; }

.header__in { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); min-height: var(--header-bar); }
.header__spacer { height: var(--header-h); }

.brand { display: inline-flex; align-items: center; flex: none; margin-right: auto; }
.brand img { width: clamp(140px, 15vw, 182px); transition: scale .3s var(--ease-spring); }
.brand:hover img { scale: 1.03; }
.brand__mark--light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__mark--dark { display: none; }
  :root:not([data-theme="light"]) .brand__mark--light { display: block; }
}
:root[data-theme="dark"] .brand__mark--dark { display: none; }
:root[data-theme="dark"] .brand__mark--light { display: block; }

.nav { display: none; }
@media (min-width: 1080px) { .nav { display: block; } }
.nav__list { display: flex; align-items: center; gap: .2rem; }
.nav__link {
  white-space: nowrap;
  position: relative; display: inline-flex; align-items: center; gap: .35rem;
  padding: .65rem .9rem; border-radius: var(--radius);
  font-size: var(--step--1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); transition: color .25s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .32rem;
  height: 2px; border-radius: 2px; background: var(--accent-grad);
  scale: 0 1; transform-origin: left; transition: scale .35s var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current="page"], .nav__item:hover > .nav__link { color: currentColor; }
.header .nav__link:hover, .header .nav__link[aria-current="page"] { color: var(--accent); }
.header--over .nav__link:hover, .header--over .nav__link[aria-current="page"] { color: #fff; }
.nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__item:hover > .nav__link::after { scale: 1 1; }
.nav__item { position: relative; }
.nav__caret { transition: rotate .3s var(--ease); }
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { rotate: 180deg; }

.nav__panel {
  position: absolute; top: calc(100% + .5rem); left: 50%;
  min-width: 300px; padding: .5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; translate: -50% 10px; color: var(--text);
  transition: opacity .25s var(--ease), translate .32s var(--ease-out), visibility .25s;
}
.nav__item:hover > .nav__panel, .nav__item:focus-within > .nav__panel { opacity: 1; visibility: visible; translate: -50% 0; }
.nav__panel a {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .8rem; border-radius: var(--radius);
  font-size: var(--step--1); font-weight: 500; color: var(--text-muted);
  transition: background .2s var(--ease), color .2s var(--ease), padding-left .25s var(--ease);
}
.nav__panel a::before {
  content: ""; width: 6px; height: 6px; rotate: 45deg; flex: none;
  background: var(--accent); opacity: .3; transition: opacity .2s var(--ease), scale .25s var(--ease-spring);
}
.nav__panel a:hover { background: var(--bg-alt); color: var(--text); padding-left: 1.05rem; }
.nav__panel a:hover::before { opacity: 1; scale: 1.5; }

.header__actions { display: flex; align-items: center; gap: .5rem; flex: none; white-space: nowrap; }
.header__socials { display: none; gap: .3rem; margin-right: .2rem; flex: none; }
@media (min-width: 980px) { .header__socials { display: flex; flex-direction: row; } }
.header__cta { display: none; }
@media (min-width: 600px) { .header__cta { display: inline-flex; } }
.header__phone {
  display: none; align-items: center; gap: .5rem; padding: .55rem .85rem;
  font-size: var(--step--1); font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; flex: none;
  border-radius: var(--radius); transition: color .2s var(--ease), background .2s var(--ease);
}
.header__phone svg { color: var(--accent); }
.header__phone:hover { color: var(--accent); }
@media (min-width: 1240px) { .header__phone { display: inline-flex; } }

.icon-btn {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text-muted);
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), scale .2s var(--ease-spring);
}
.icon-btn:hover { scale: 1.06; }
.icon-btn--sm { width: 36px; height: 36px; }
.nav-toggle { display: grid; }
@media (min-width: 1080px) { .nav-toggle { display: none; } }
.theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 260; visibility: hidden; pointer-events: none; }
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__scrim {
  position: absolute; inset: 0; background: rgb(8 7 6 / .6);
  opacity: 0; transition: opacity .35s var(--ease); backdrop-filter: blur(3px);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; inset-block: 0; right: 0;
  width: min(410px, 90vw); display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--line);
  translate: 100% 0; transition: translate .45s var(--ease-out);
  overflow-y: auto; overscroll-behavior: contain;
}
.drawer.is-open .drawer__panel { translate: 0 0; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem clamp(1.1rem, 4vw, 1.6rem); border-bottom: 1px solid var(--line); }
.drawer__body { padding: 1rem clamp(1.1rem, 4vw, 1.6rem) 2rem; display: grid; gap: .1rem; }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem .2rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 500;
  transition: color .25s var(--ease), padding-left .3s var(--ease-out);
}
.drawer__link svg { color: var(--accent); opacity: 0; translate: -6px 0; transition: opacity .25s, translate .3s var(--ease-out); }
.drawer__link:hover, .drawer__link[aria-current="page"] { color: var(--accent); padding-left: .6rem; }
.drawer__link:hover svg, .drawer__link[aria-current="page"] svg { opacity: 1; translate: 0 0; }
.drawer__sub { display: grid; }
.drawer__sub a {
  padding: .6rem .2rem .6rem 1.1rem; font-size: var(--step--1); color: var(--text-muted);
  border-bottom: 1px solid var(--line); transition: color .2s var(--ease), padding-left .25s var(--ease);
}
.drawer__sub a::before { content: ""; display: inline-block; width: 5px; height: 5px; rotate: 45deg; background: var(--accent); opacity: .45; margin-right: .7rem; vertical-align: middle; }
.drawer__sub a:hover { color: var(--text); padding-left: 1.5rem; }
.drawer__foot { margin-top: 1.5rem; display: grid; gap: .7rem; }
.drawer__meta { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: grid; gap: .8rem; font-size: var(--step--1); color: var(--text-muted); }
.drawer__meta li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.drawer__meta svg { color: var(--accent); margin-top: .25em; }
.drawer__socials { display: flex; gap: .5rem; margin-top: .3rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: #fff;
  min-height: min(94svh, 900px); display: grid; align-items: center;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: kenburns 26s ease-in-out infinite alternate; }
}
@keyframes kenburns {
  from { scale: 1; translate: 0 0; }
  to   { scale: 1.09; translate: -1.5% -1%; }
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, rgb(6 5 4 / .94) 0%, rgb(6 5 4 / .82) 34%, rgb(6 5 4 / .38) 66%, rgb(6 5 4 / .58) 100%),
    linear-gradient(to top, rgb(6 5 4 / .8), transparent 45%),
    radial-gradient(48rem 30rem at 8% 42%, rgb(229 0 0 / .18), transparent 65%);
}
.hero__in { position: relative; padding-block: clamp(5.5rem, 4rem + 8vw, 8.5rem) clamp(3.5rem, 2.6rem + 4vw, 6rem); width: 100%; }
.hero__copy { display: grid; gap: clamp(1.1rem, .8rem + .8vw, 1.5rem); max-width: 54rem; }
.hero .eyebrow { color: #FF6E6E; }
.hero__title { font-size: clamp(2.5rem, 1.55rem + 4.2vw, 4.4rem); color: #fff; text-shadow: 0 2px 40px rgb(0 0 0 / .35); }
.hero__title em {
  font-style: normal;
  background: linear-gradient(120deg, #FF4B4B 0%, #E50000 60%, #FF2A2A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lede { font-size: var(--step-1); color: #E2DAD1; max-width: 38rem; line-height: 1.6; }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: .9rem 2.2rem; align-items: center;
  margin-top: .4rem; padding-top: 1.4rem; border-top: 1px solid rgb(255 255 255 / .15);
}
.trust-item { display: flex; align-items: center; gap: .7rem; font-size: var(--step--1); color: #C9BFB5; }
.trust-item strong { display: block; color: #fff; font-size: var(--step-0); font-weight: 700; line-height: 1.25; }
.trust-item > svg { color: var(--red-bright); flex: none; }
.stars { display: inline-flex; gap: 1.5px; color: #FFB020; }

.hero__cue {
  position: absolute; bottom: 1.6rem; left: 50%; translate: -50% 0; z-index: 1;
  display: grid; place-items: center; gap: .5rem;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: rgb(255 255 255 / .5);
}
.hero__cue span { width: 1px; height: 40px; background: linear-gradient(to bottom, rgb(255 255 255 / .6), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .hero__cue span { animation: cue 2.2s ease-in-out infinite; transform-origin: top; }
  @keyframes cue { 0%,100% { scale: 1 .4; opacity: .4; } 50% { scale: 1 1; opacity: 1; } }
}
@media (max-width: 900px) { .hero__cue { display: none; } }

/* On-load entrance , the first impression happens before any scrolling. */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { opacity: 0; translate: 0 26px; animation: rise .95s var(--ease-out) forwards; }
  .hero__copy > *:nth-child(1) { animation-delay: .1s; }
  .hero__copy > *:nth-child(2) { animation-delay: .22s; }
  .hero__copy > *:nth-child(3) { animation-delay: .34s; }
  .hero__copy > *:nth-child(4) { animation-delay: .46s; }
  .hero__copy > *:nth-child(5) { animation-delay: .58s; }
  @keyframes rise { to { opacity: 1; translate: 0 0; } }
}

/* ---------- Page hero ---------- */
.phero {
  position: relative; isolation: isolate; background: var(--ink); color: #fff; overflow: hidden;
}
.phero__media { position: absolute; inset: 0; z-index: -2; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgb(6 5 4 / .93), rgb(6 5 4 / .68) 60%, rgb(6 5 4 / .5)),
    radial-gradient(40rem 22rem at 5% 60%, rgb(229 0 0 / .17), transparent 62%);
}
.phero__in { padding-block: calc(var(--header-h) + clamp(2.6rem, 2rem + 4vw, 5rem)) clamp(3rem, 2.2rem + 4vw, 5.5rem); display: grid; gap: 1.2rem; }
.phero__title { font-size: var(--step-4); color: #fff; }
.phero__lede { color: #DED6CD; max-width: 56ch; font-size: var(--step-1); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--step--1); color: rgb(255 255 255 / .6); }
.crumbs a:hover { color: #fff; }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: .5rem; opacity: .45; }
.crumbs [aria-current] { color: #fff; }

/* ---------- Marquee ---------- */
.marquee {
  display: flex; overflow: hidden;
  border-block: 1px solid var(--line); background: var(--bg-alt);
  padding-block: 1rem;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track { display: flex; align-items: center; gap: 3.2rem; padding-right: 3.2rem; flex: none; animation: slide 42s linear infinite; }
.marquee__item {
  display: inline-flex; align-items: center; gap: .8rem; flex: none;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; color: var(--text-muted);
  letter-spacing: -.015em; white-space: nowrap;
}
.marquee__item::before { content: ""; width: 7px; height: 7px; background: var(--accent-grad); rotate: 45deg; flex: none; }
@keyframes slide { to { translate: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } .marquee { mask-image: none; overflow-x: auto; } }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .35s var(--ease), box-shadow .4s var(--ease), translate .4s var(--ease-out);
}
/* Red hairline that draws in on hover. */
.card::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; z-index: 3;
  background: var(--accent-grad); scale: 0 1; transform-origin: left;
  transition: scale .5s var(--ease-out);
}
.card:hover { border-color: transparent; box-shadow: var(--shadow-lg); translate: 0 -6px; }
.card:hover::after { scale: 1 1; }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease-out); }
.card:hover .card__media img { scale: 1.08; }
.card__body { display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.3rem, 1rem + .9vw, 1.8rem); flex: 1; }
.card__title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; letter-spacing: -.02em; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.card__text { color: var(--text-muted); font-size: var(--step--1); line-height: 1.65; flex: 1; }
.card__foot { display: flex; align-items: center; gap: .5rem; margin-top: .3rem; }

.card__num {
  position: absolute; top: 0; right: 0; z-index: 2;
  padding: .5rem .85rem; background: var(--accent-grad); color: #fff;
  font-size: var(--step--1); font-weight: 800; letter-spacing: .06em;
  border-bottom-left-radius: var(--radius);
}

.svc-icon {
  display: grid; place-items: center; width: 54px; height: 54px;
  background: var(--red-soft); color: var(--accent); border-radius: var(--radius);
  transition: background .4s var(--ease), color .4s var(--ease),
              rotate .5s var(--ease-spring), scale .4s var(--ease-spring);
}
.card:hover .svc-icon, .ctile:hover .ctile__icon { background: var(--accent-grad); color: #fff; rotate: -8deg; scale: 1.08; }

.ticks { display: grid; gap: .75rem; }
.ticks li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; font-size: var(--step-0); color: var(--text-muted); }
.ticks svg { color: var(--accent); margin-top: .35em; flex: none; }
.ticks--tight li { font-size: var(--step--1); gap: .6rem; }

/* Uniform tile grid for curated previews. */
.tile-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }

.tile-grid .shot { aspect-ratio: 1 / 1; }
.tile-grid .shot img { height: 100%; object-fit: cover; }

@media (min-width: 700px) {
  .card--feature { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .card--feature .card__media { aspect-ratio: 16 / 10; flex: 0 0 42%; }
  .card--feature .card__body { justify-content: center; gap: .9rem; padding: clamp(1.6rem, 1.2rem + 2vw, 3rem); }
  .card--feature .card__title { font-size: var(--step-3); }
  .card--feature .card__text { flex: 0 1 auto; max-width: 58ch; font-size: var(--step-0); }
}

/* ---------- Manufacturer strip ----------
   The artwork is dark navy and black, so each mark sits on a permanent light
   chip. That keeps someone else's trademark legible in dark mode without
   recolouring it. Logos rest desaturated so the row reads as one calm band,
   and come to full colour on hover. */
.brands { display: grid; gap: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); justify-items: center; text-align: center; }
.brands__list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem;
  width: 100%; max-width: 900px;
}
@media (min-width: 760px) { .brands__list { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.brands__item {
  position: relative; display: grid; place-items: center;
  height: 88px; padding: 1rem 1.2rem;
  background: #FFFFFF; border: 1px solid rgb(10 9 8 / .09);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: translate .35s var(--ease-out), box-shadow .35s var(--ease);
}
.brands__item::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: var(--accent-grad); scale: 0 1; transform-origin: left;
  transition: scale .45s var(--ease-out);
}
.brands__item:hover { translate: 0 -5px; box-shadow: var(--shadow-lg); }
.brands__item:hover::after { scale: 1 1; }
.brands__item img {
  max-height: 38px; width: auto; max-width: 100%; object-fit: contain;
  filter: grayscale(1); opacity: .72;
  transition: filter .4s var(--ease), opacity .4s var(--ease), scale .4s var(--ease-out);
}
.brands__item:hover img { filter: grayscale(0); opacity: 1; scale: 1.05; }
@media (max-width: 639px) {
  .brands__list { gap: .55rem; }
  .brands__item { height: 68px; padding: .8rem .9rem; }
  .brands__item img { max-height: 26px; }
}

/* ---------- Van / livery block ----------
   A photograph of the branded van is a real trust signal for a trade business:
   it shows the name, the specialisms, the phone number and "fully insured" on
   the vehicle itself. Given its own block rather than a decorative inset, so it
   survives on phones where insets are hidden. */
.van { display: grid; gap: clamp(1.6rem, 1.2rem + 2vw, 3rem); align-items: center; }
@media (min-width: 820px) { .van { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.van__media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-alt); box-shadow: var(--shadow-lg);
  max-width: 420px; justify-self: center; width: 100%;
}
.van__media img { width: 100%; height: auto; }
.van__copy { display: grid; gap: 1.1rem; align-content: start; }
.van__points { display: grid; gap: .7rem; }
.van__points li {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
  font-size: var(--step-0); color: var(--text-muted);
}
.van__points svg { color: var(--accent); margin-top: .32em; flex: none; }

/* ---------- Stats ---------- */
.stats {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.stat {
  background: var(--surface); padding: clamp(1.7rem, 1.3rem + 1.4vw, 2.7rem) clamp(1.1rem, 1rem + .7vw, 1.7rem);
  display: grid; gap: .4rem; position: relative; transition: background .35s var(--ease);
}
.stat:hover { background: var(--surface-2); }
.stat__num {
  font-family: var(--font-display); font-size: var(--step-4); font-weight: 600;
  letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label { font-size: var(--step--1); color: var(--text-muted); }

/* ---------- Split ---------- */
.split { display: grid; gap: clamp(2rem, 1.5rem + 3.5vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .split--wide-right { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
.split__copy { display: grid; gap: 1.25rem; align-content: start; }

.frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.frame img { width: 100%; transition: scale 1s var(--ease-out); }
.frame:hover img { scale: 1.04; }
.frame--tall { aspect-ratio: 4/5; }
.frame--tall img { height: 100%; object-fit: cover; }
.frame--wide { aspect-ratio: 3/2; }
.frame--wide img { height: 100%; object-fit: cover; }

.media-stack { position: relative; }
.media-stack__inset {
  position: absolute; right: -1rem; bottom: -1.8rem; width: 46%;
  border: 7px solid var(--bg); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
@media (max-width: 620px) { .media-stack__inset { display: none; } }

.badge-float {
  position: absolute; left: -1.2rem; bottom: 1.8rem; z-index: 2;
  display: grid; gap: .1rem; padding: 1.1rem 1.5rem;
  background: var(--accent-grad); color: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-red);
}
.badge-float strong { font-family: var(--font-display); font-size: var(--step-2); line-height: 1; }
.badge-float span { font-size: var(--step--1); opacity: .92; }
@media (max-width: 620px) { .badge-float { left: .8rem; } }

/* ---------- Before / after ---------- */
.ba {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  aspect-ratio: 3/4; box-shadow: var(--shadow-lg); touch-action: pan-y;
  user-select: none; cursor: ew-resize; background: var(--bg-alt);
}
@media (min-width: 700px) { .ba { aspect-ratio: 16/10; } }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba__handle {
  position: absolute; inset-block: 0; left: var(--pos, 50%);
  width: 3px; background: #fff; translate: -1.5px 0; box-shadow: 0 0 16px rgb(0 0 0 / .5);
}
.ba__grip {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 52px; height: 52px;
  background: #fff; color: var(--ink); border-radius: 50%; box-shadow: var(--shadow-lg);
  transition: scale .25s var(--ease-spring);
}
.ba:hover .ba__grip { scale: 1.1; }
.ba__tag {
  position: absolute; top: 1.1rem; padding: .4rem .85rem; z-index: 2;
  background: rgb(8 7 6 / .68); color: #fff; font-size: var(--step--1);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 100px;
  backdrop-filter: blur(6px); pointer-events: none; border: 1px solid rgb(255 255 255 / .15);
}
.ba__tag--before { left: 1.1rem; }
.ba__tag--after { right: 1.1rem; }
.ba__range { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

/* ---------- Gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip {
  padding: .6rem 1.2rem; border: 1px solid var(--line); border-radius: 100px;
  font-size: var(--step--1); font-weight: 600; color: var(--text-muted); background: var(--surface);
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), translate .25s var(--ease-out);
}
.chip:hover { border-color: var(--line-strong); color: var(--text); translate: 0 -2px; }
.chip[aria-pressed="true"] { background: var(--accent-grad); border-color: transparent; color: #fff; box-shadow: var(--shadow-red); }

.masonry { columns: 1; column-gap: var(--gap); }
@media (min-width: 560px) { .masonry { columns: 2; } }
@media (min-width: 900px) { .masonry { columns: 3; } }
@media (min-width: 1200px) { .masonry { columns: 4; } }
.masonry__item { break-inside: avoid; margin-bottom: var(--gap); }
.masonry__item.is-hidden { display: none; }

.shot {
  position: relative; display: block; width: 100%; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--bg-alt); cursor: zoom-in;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .4s var(--ease), translate .4s var(--ease-out);
}
.shot img { width: 100%; transition: scale .9s var(--ease-out); }
.shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(8 7 6 / .6), transparent 50%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.shot:hover { box-shadow: var(--shadow-lg); translate: 0 -4px; }
.shot:hover img { scale: 1.07; }
.shot:hover::after { opacity: 1; }
.shot__zoom {
  position: absolute; right: .8rem; bottom: .8rem; z-index: 1;
  display: grid; place-items: center; width: 42px; height: 42px;
  background: rgb(255 255 255 / .96); color: var(--ink); border-radius: 50%;
  opacity: 0; translate: 0 10px; scale: .85;
  transition: opacity .35s var(--ease), translate .35s var(--ease-out), scale .35s var(--ease-spring);
}
.shot:hover .shot__zoom { opacity: 1; translate: 0 0; scale: 1; }

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 280;
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
  background: rgb(5 4 3 / .95); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb__fig { position: relative; display: grid; gap: .9rem; max-width: min(1150px, 100%); max-height: 100%; }
.lb__fig img { max-height: min(78vh, 900px); width: auto; margin-inline: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.lb__cap { color: #C9C0B6; font-size: var(--step--1); text-align: center; }
.lb__btn {
  position: fixed; z-index: 2; display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .2); color: #fff;
  backdrop-filter: blur(8px);
  transition: background .25s var(--ease), scale .25s var(--ease-spring), border-color .25s var(--ease);
}
.lb__btn:hover { background: rgb(255 255 255 / .2); border-color: rgb(255 255 255 / .45); scale: 1.08; }
.lb__close { top: clamp(.8rem, 3vw, 1.8rem); right: clamp(.8rem, 3vw, 1.8rem); }
.lb__prev { left: clamp(.5rem, 2vw, 1.6rem); top: 50%; translate: 0 -50%; }
.lb__next { right: clamp(.5rem, 2vw, 1.6rem); top: 50%; translate: 0 -50%; }
.lb__prev svg { rotate: 90deg; }
.lb__next svg { rotate: -90deg; }

/* ---------- Testimonials ---------- */
.rail { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding: .4rem .4rem 1.2rem; margin: -.4rem -.4rem 0; scrollbar-width: thin; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-track { background: var(--line); border-radius: 100px; }
.rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 100px; }
.rail > * { scroll-snap-align: start; flex: 0 0 min(100%, 25.5rem); }

.quote {
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color .35s var(--ease), box-shadow .4s var(--ease), translate .4s var(--ease-out);
}
.quote:hover { box-shadow: var(--shadow-lg); translate: 0 -4px; border-color: transparent; }
.quote__mark { font-family: var(--font-display); font-size: 3.4rem; line-height: .55; color: var(--accent); opacity: .22; }
.quote__text { color: var(--text-muted); font-size: var(--step-0); line-height: 1.68; flex: 1; }
.quote__foot { display: flex; align-items: center; gap: .85rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.quote__avatar {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  background: var(--accent-grad); color: #fff; border-radius: 50%;
  font-family: var(--font-display); font-size: var(--step-0); font-weight: 600;
}
.quote__name { display: block; font-weight: 600; font-size: var(--step-0); line-height: 1.3; }
.quote__meta { display: block; font-size: var(--step--1); color: var(--text-faint); }

.rating-block { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; padding: 1.3rem 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.rating-block__score {
  font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; line-height: 1;
  background: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Steps ---------- */
.steps { display: grid; gap: 0; counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } .steps--5 { grid-template-columns: repeat(5, 1fr); } }
.step {
  position: relative; counter-increment: step;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  border: 1px solid var(--line); margin: -0.5px;
  display: grid; gap: .8rem; align-content: start;
  transition: background .35s var(--ease);
  overflow: hidden;
}
.step::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--accent-grad); scale: 0 1; transform-origin: left;
  transition: scale .5s var(--ease-out);
}
.step:hover { background: var(--surface); }
.step:hover::before { scale: 1 1; }
.step__n {
  font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; line-height: 1;
  background: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step__n::before { content: "0" counter(step); }
.step h3 { font-size: var(--step-1); font-family: var(--font-display); }
.step p { font-size: var(--step--1); color: var(--text-muted); }

/* ---------- Accordion ---------- */
.acc { display: grid; gap: .65rem; }
.acc__item { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.acc__item[open] { border-color: transparent; box-shadow: var(--shadow-md); }
.acc__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem clamp(1.1rem, 1rem + .7vw, 1.6rem); cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--step-0); transition: color .2s var(--ease);
}
.acc__q::-webkit-details-marker { display: none; }
.acc__q:hover { color: var(--accent); }
.acc__icon { flex: none; color: var(--accent); transition: rotate .35s var(--ease-spring); }
.acc__item[open] .acc__icon { rotate: 135deg; }
.acc__a { padding: 0 clamp(1.1rem, 1rem + .7vw, 1.6rem) 1.4rem; color: var(--text-muted); font-size: var(--step-0); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: #fff; }
.cta-band__media { position: absolute; inset: 0; z-index: -2; opacity: .42; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(115deg, rgb(6 5 4 / .96), rgb(6 5 4 / .74)),
    radial-gradient(44rem 24rem at 88% 20%, rgb(229 0 0 / .28), transparent 62%);
}
.cta-band__in { padding-block: clamp(3.5rem, 2.6rem + 4.5vw, 6rem); display: grid; gap: 1.8rem; justify-items: start; }
@media (min-width: 900px) { .cta-band__in { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 3rem; } }
.cta-band h2 { font-size: var(--step-4); color: #fff; }
.cta-band p { color: #DED6CD; max-width: 52ch; margin-top: .9rem; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .45rem; }
@media (min-width: 620px) { .form--2col { grid-template-columns: repeat(2, minmax(0,1fr)); } .field--full { grid-column: 1 / -1; } }
.label { font-size: var(--step--1); font-weight: 600; letter-spacing: .02em; }
.label .req { color: var(--accent); }
.input, .textarea, .select {
  width: 100%; padding: .9rem 1.05rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--step-0);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 16%, transparent);
}
.textarea { min-height: 9rem; resize: vertical; }
.select { appearance: none; cursor: pointer; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A6E63' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: var(--step--1); color: var(--text-faint); }
.form__status { display: none; padding: .95rem 1.15rem; border-radius: var(--radius); font-size: var(--step--1); border: 1px solid transparent; }
.form__status.is-visible { display: block; }
.form__status[data-state="ok"] { background: color-mix(in oklab, #16A34A 12%, transparent); border-color: color-mix(in oklab, #16A34A 40%, transparent); color: color-mix(in oklab, #16A34A 78%, var(--text)); }
.form__status[data-state="err"] { background: var(--red-soft); border-color: color-mix(in oklab, var(--accent) 40%, transparent); color: var(--accent); }
.field-error { font-size: var(--step--1); color: var(--accent); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--accent); }
.btn[aria-busy="true"] { opacity: .75; pointer-events: none; }
.spinner { width: 15px; height: 15px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

/* ---------- Contact tiles ---------- */
.contact-tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.ctile {
  display: grid; gap: .5rem; padding: clamp(1.4rem, 1.1rem + .9vw, 1.9rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color .35s var(--ease), box-shadow .4s var(--ease), translate .4s var(--ease-out);
}
.ctile:hover { box-shadow: var(--shadow-lg); translate: 0 -5px; border-color: transparent; }
.ctile__icon {
  display: grid; place-items: center; width: 48px; height: 48px;
  background: var(--red-soft); color: var(--accent); border-radius: var(--radius);
  transition: background .4s var(--ease), color .4s var(--ease), rotate .5s var(--ease-spring), scale .4s var(--ease-spring);
}
.ctile__label { font-size: var(--step--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.ctile__value { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; overflow-wrap: anywhere; }
.ctile__value a:hover { color: var(--accent); }

.map-frame { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-alt); box-shadow: var(--shadow-sm); }
.map-frame iframe { display: block; width: 100%; height: clamp(280px, 40vw, 420px); border: 0; filter: grayscale(.3) contrast(1.05); }

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--ink); color: #C9C0B6; padding-top: clamp(3.5rem, 2.6rem + 3.5vw, 5.5rem); overflow: hidden; }
.footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50rem 26rem at 12% 0%, rgb(229 0 0 / .13), transparent 62%);
}
.footer > * { position: relative; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; gap: clamp(2rem, 1.5rem + 2.2vw, 3.5rem); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1060px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer__brand img { width: 172px; margin-bottom: 1.2rem; }
.footer__about { font-size: var(--step--1); line-height: 1.75; max-width: 34ch; }
.footer__title { font-size: var(--step--1); font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: #fff; margin-bottom: 1.2rem; }
.footer__list { display: grid; gap: .65rem; font-size: var(--step--1); }
.footer__list a { display: inline-flex; align-items: center; gap: .5rem; transition: color .2s var(--ease), translate .25s var(--ease-out); }
.footer__list a svg { color: var(--red); opacity: .55; transition: opacity .2s; }
.footer__list a:hover { translate: 4px 0; }
.footer__list a:hover svg { opacity: 1; }
.footer__contact { display: grid; gap: .95rem; font-size: var(--step--1); }
.footer__contact li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; }
.footer__contact svg { color: var(--red); margin-top: .3em; }
.footer__socials { display: flex; gap: .5rem; margin-top: 1.3rem; }
.footer__socials a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid rgb(255 255 255 / .17); border-radius: var(--radius);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), translate .25s var(--ease-out);
}
.footer__socials a:hover { background: var(--accent-grad); border-color: transparent; color: #fff; translate: 0 -3px; }
.footer__bar {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-block: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / .11);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem;
  font-size: var(--step--1); color: #8E8377;
}
.footer__bar-links { display: flex; flex-wrap: wrap; gap: 1.3rem; }

/* ---------- Floating contact dock ---------- */
.dock {
  position: fixed; z-index: 210; left: 50%; bottom: 1.4rem; translate: -50% 0;
  display: none; align-items: center; gap: .5rem; padding: .5rem .5rem .5rem 1.3rem;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line); border-radius: 100px;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease), translate .5s var(--ease-out);
  /* Centred with left: 50%, a fixed box may only use half the screen and its
     buttons wrap; size it to its content, capped at the screen width. */
  width: max-content; max-width: calc(100vw - 2rem);
}
@media (min-width: 640px) { .dock { display: flex; } }
.dock__link, .dock__cta { white-space: nowrap; flex: none; }
.dock__text { min-width: 0; }
.dock.is-in { opacity: 1; pointer-events: auto; translate: -50% 0; }
.dock:not(.is-in) { translate: -50% 130%; }
.dock__text { display: none; font-size: var(--step--1); color: var(--text-muted); padding-right: .3rem; }
@media (min-width: 900px) { .dock__text { display: block; } }
.dock__text strong { color: var(--text); font-weight: 600; }
.dock__link {
  display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem;
  border-radius: 100px; font-size: var(--step--1); font-weight: 700;
  border: 1px solid var(--line); color: var(--text);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.dock__link svg { color: var(--accent); }
.dock__link:hover { background: var(--bg-alt); border-color: var(--line-strong); }
.dock__cta {
  display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.3rem;
  border-radius: 100px; font-size: var(--step--1); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--accent-grad); color: #fff; box-shadow: var(--shadow-red);
  transition: translate .25s var(--ease-out), box-shadow .25s var(--ease);
}
.dock__cta:hover { translate: 0 -2px; box-shadow: 0 14px 34px -10px rgb(229 0 0 / .6); }
.dock__close {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; color: var(--text-faint);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.dock__close:hover { background: var(--bg-alt); color: var(--text); }

/* Mobile action bar */
.actionbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 210;
  display: grid; grid-template-columns: 1fr 1fr;
  background: color-mix(in oklab, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgb(10 9 8 / .12);
  padding-bottom: env(safe-area-inset-bottom);
  /* Held back until the hero has scrolled away: the hero already carries a
     full-width red quote button, and showing both at once put two competing
     red CTAs on the same screen. */
  translate: 0 100%; visibility: hidden;
  transition: translate .45s var(--ease-out), visibility .45s;
}
.actionbar.is-in { translate: 0 0; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .actionbar { transition: none; } }
.actionbar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem .5rem; font-size: var(--step--1); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.actionbar a svg { color: var(--accent); }
.actionbar a + a { background: var(--accent-grad); color: #fff; }
.actionbar a + a svg { color: #fff; }
@media (min-width: 640px) { .actionbar { display: none; } }
@media (max-width: 639px) { .footer { padding-bottom: calc(60px + env(safe-area-inset-bottom)); } }

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; translate: 0 28px; transition: opacity .8s var(--ease-out), translate .8s var(--ease-out); }
  .reveal.is-in { opacity: 1; translate: 0 0; }
  .reveal-stagger > * { opacity: 0; translate: 0 24px; transition: opacity .7s var(--ease-out), translate .7s var(--ease-out); }
  .reveal-stagger.is-in > * { opacity: 1; translate: 0 0; }
  .reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
  .reveal-stagger.is-in > *:nth-child(2) { transition-delay: 80ms; }
  .reveal-stagger.is-in > *:nth-child(3) { transition-delay: 160ms; }
  .reveal-stagger.is-in > *:nth-child(4) { transition-delay: 240ms; }
  .reveal-stagger.is-in > *:nth-child(5) { transition-delay: 320ms; }
  .reveal-stagger.is-in > *:nth-child(6) { transition-delay: 400ms; }
  .reveal-stagger.is-in > *:nth-child(7) { transition-delay: 480ms; }
  .reveal-stagger.is-in > *:nth-child(8) { transition-delay: 560ms; }
  /* Images wipe in rather than just fading , reads as craft, not a stock fade. */
  .reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-out); }
  .reveal-img.is-in { clip-path: inset(0 0 0 0); }
}

/* ==========================================================================
   Small screens
   Most visitors to a local trade site arrive on a phone, so this is not an
   afterthought: the hero must land complete above the fold, thumbs must reach
   the actions, and nothing may hide behind the fixed action bar.
   ========================================================================== */

.hide-sm { display: none; }
@media (min-width: 560px) { .hide-sm { display: inline; } }

@media (max-width: 639px) {
  :root { --header-bar: 66px; --section-y: clamp(3rem, 2rem + 5vw, 4.5rem); }

  /* Hero: fit the whole pitch on one screen, clear of the action bar. */
  .hero { min-height: auto; }
  .hero__in { padding-block: calc(var(--header-h) + 1.6rem) 2.4rem; }
  .hero__copy { gap: 1.05rem; }
  .hero__title { font-size: clamp(1.9rem, 1.05rem + 4.6vw, 2.7rem); }
  .hero__lede { font-size: var(--step-0); line-height: 1.58; }
  .hero .eyebrow { font-size: .68rem; letter-spacing: .12em; }
  .hero .eyebrow::before { width: 1.1rem; }

  /* Full-width, equal-weight buttons are far easier to hit than inline ones. */
  .hero .btn-row, .cta-band .btn-row, .phero .btn-row { display: grid; gap: .65rem; width: 100%; }
  .hero .btn-row .btn, .cta-band .btn-row .btn { width: 100%; }
  .btn { padding: .95rem 1.4rem; }
  .btn--lg { padding: 1.05rem 1.5rem; font-size: var(--step--1); }

  /* Trust strip becomes a compact two-up instead of a squashed row. */
  .hero__trust { gap: .55rem; padding-top: 1rem; margin-top: .2rem; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .trust-item { flex: 1 1 100%; font-size: .82rem; gap: .6rem; }
  .trust-item > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .45rem; }
  .trust-item strong { display: inline; font-size: .92rem; }
  .trust-item > svg { width: 18px; height: 18px; }
  .stars svg { width: 13px; height: 13px; }

  /* Page heroes on inner pages. */
  .phero__in { padding-block: calc(var(--header-h) + 1.8rem) 2.2rem; gap: .85rem; }
  .phero__title { font-size: clamp(1.9rem, 1.2rem + 4.6vw, 2.6rem); }
  .phero__lede { font-size: var(--step-0); }

  /* Section headings and body rhythm. */
  .section-head { margin-bottom: 1.8rem; gap: .8rem; }
  .lede { font-size: var(--step-0); }
  .display { letter-spacing: -.025em; }

  /* Cards: tighter, and the feature card returns to a normal stacked card. */
  .card__body { padding: 1.2rem; gap: .6rem; }
  .card__title { font-size: var(--step-1); }
  .svc-icon { width: 46px; height: 46px; }

  /* Steps read as a stacked list, with the divider between them. */
  .steps { gap: 0; }
  .step { padding: 1.3rem 1.2rem; }
  .step__n { font-size: var(--step-2); }

  /* Stats two-up rather than one long column. */
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 1.3rem 1rem; }
  .stat__num { font-size: var(--step-3); }

  /* Testimonials: peek the next card so the rail is obviously swipeable. */
  .rail > * { flex: 0 0 86%; }

  /* Before/after: a taller crop suits a portrait screen, and the grip grows. */
  .ba { aspect-ratio: 4/5; }
  .ba__grip { width: 46px; height: 46px; }
  .ba__tag { font-size: .68rem; padding: .3rem .65rem; top: .7rem; }
  .ba__tag--before { left: .7rem; }
  .ba__tag--after { right: .7rem; }

  /* Gallery: two columns keeps photos big enough to read. */
  .masonry { columns: 2; column-gap: .6rem; }
  .masonry__item { margin-bottom: .6rem; }
  .tile-grid { gap: .6rem; }
  .filters { gap: .4rem; }
  .chip { padding: .5rem .9rem; font-size: .78rem; }

  /* Lightbox controls sit within thumb reach rather than mid-screen. */
  .lb__btn { width: 46px; height: 46px; }
  .lb__prev { top: auto; bottom: 1.2rem; left: 1.2rem; translate: none; }
  .lb__next { top: auto; bottom: 1.2rem; right: 1.2rem; translate: none; }
  .lb__fig img { max-height: 68vh; }
  .lb__cap { font-size: .78rem; }

  /* Forms: 16px inputs stop iOS zooming on focus. */
  .input, .textarea, .select { font-size: 16px; padding: .85rem 1rem; }
  .textarea { min-height: 8rem; }

  .contact-tiles { gap: .7rem; }
  .ctile { padding: 1.15rem; gap: .35rem; }
  .ctile__icon { width: 42px; height: 42px; }
  .ctile__value { font-size: var(--step-0); }

  .footer__grid { gap: 2rem; }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: .8rem; }

  .marquee__item { font-size: var(--step-0); }
  .marquee__track { gap: 2rem; padding-right: 2rem; }

  .cta-band__in { padding-block: 2.8rem; gap: 1.3rem; }
  .cta-band h2 { font-size: var(--step-3); }

  .media-stack__inset { display: none; }
  .badge-float { left: .7rem; bottom: .7rem; padding: .8rem 1.1rem; }
  .badge-float strong { font-size: var(--step-1); }

  .acc__q { padding: 1rem 1.1rem; font-size: var(--step--1); }
  .acc__a { padding: 0 1.1rem 1.1rem; font-size: var(--step--1); }

  /* Nothing may end up under the fixed action bar. */
  .section:last-of-type { padding-bottom: calc(var(--section-y) + .5rem); }
}

/* Very narrow phones. */
@media (max-width: 380px) {
  .hero__title { font-size: 2.05rem; }
  .brand img { width: 128px; }
  .trust-item { flex: 1 1 100%; }
}

/* Short landscape phones: never let a 100svh hero trap the content. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .hero__in { padding-block: calc(var(--header-h) + 1.2rem) 2rem; }
}

/* ==========================================================================
   Motion & depth
   Everything here is additive polish and sits behind prefers-reduced-motion.
   ========================================================================== */


/* Gentle parallax on framed imagery. */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .parallax { will-change: transform; }
  .parallax img { translate: 0 var(--py, 0px); transition: translate .1s linear; }
}

/* A soft light that follows the cursor across dark bands. */
.spotlight { position: relative; isolation: isolate; }
.spotlight::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(26rem 26rem at var(--mx, 50%) var(--my, 50%),
              rgb(229 0 0 / .16), transparent 70%);
}
.spotlight:hover::after { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }
.spotlight > .cta-band__media { position: absolute; z-index: -2; }
@media (hover: none) { .spotlight::after { display: none; } }

/* Primary CTAs lean very slightly toward the cursor. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .magnetic { transition: translate .35s var(--ease-out), box-shadow .3s var(--ease); }
  .magnetic:hover { transition: translate .1s linear, box-shadow .3s var(--ease); }
}

/* Section seam: a hairline that catches the eye between bands. */
.section--alt + .section::before,
.section + .section--alt::before {
  content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: min(100%, var(--wrap)); height: 1px;
  background: linear-gradient(to right, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

/* Accent underline that grows under a section heading as it enters. */
.section-head--center .display::after {
  content: ""; display: block; width: 0; height: 3px; margin: 1rem auto 0;
  border-radius: 3px; background: var(--accent-grad);
  transition: width .8s var(--ease-out) .25s;
}
.section-head--center.is-in .display::after { width: 68px; }

/* ---------- Utilities ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .95rem; border: 1px solid var(--line); border-radius: 100px;
  font-size: var(--step--1); font-weight: 600; color: var(--text-muted); background: var(--surface);
  transition: border-color .25s var(--ease), color .25s var(--ease), translate .25s var(--ease-out);
}
.pill svg { color: var(--accent); }
.pill:hover { border-color: var(--line-strong); color: var(--text); translate: 0 -2px; }
.hr { height: 1px; background: var(--line); border: 0; margin-block: var(--gap); }
.prose { display: grid; gap: 1.15rem; }
.prose h2 { font-family: var(--font-display); font-size: var(--step-2); margin-top: 1rem; }
.prose h3 { font-family: var(--font-display); font-size: var(--step-1); margin-top: .5rem; }
.prose p, .prose li { color: var(--text-muted); }
.prose ul { display: grid; gap: .5rem; }
.prose ul li { padding-left: 1.35rem; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--accent-grad); rotate: 45deg; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

@media print {
  .header, .actionbar, .dock, .footer, .drawer, .lb, .progress { display: none !important; }
  body::after { display: none; }
}

/* ==========================================================================
   Site standard components: answer-first service pages, quote form,
   projects, areas, key facts, guide
   ========================================================================== */

.section--tight { padding-block: clamp(2rem, 1.6rem + 2vw, 3.2rem); }
.btn-row--center { justify-content: center; margin-top: 1.4rem; }
.drawer__logo { width: 150px; height: auto; }
.footer__logo { width: 168px; height: auto; margin-bottom: 1.1rem; }
.footer__cta { margin-top: 1.2rem; }
.footer__credit a { text-decoration: underline; text-underline-offset: 3px; }
.hero__trust { list-style: none; }

.byline {
  font-size: var(--step--1); color: var(--text-faint);
  padding-bottom: 1rem; margin-bottom: clamp(1.4rem, 1rem + 1.5vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}

/* Answer blocks: the question is the heading, the first paragraph answers it. */
.qa-list { display: grid; gap: 0; }
.qa { padding-block: 1.3rem; border-bottom: 1px solid var(--line); }
.qa:first-child { padding-top: .4rem; }
.qa__q { font-size: var(--step-1); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; margin-bottom: .55rem; }
.qa__a { color: var(--text-muted); max-width: 68ch; }
.qa-list--page .qa__q { font-size: var(--step-1); }
.qa--lead { padding-block: 0 1.8rem; border: 0; }
.qa--lead + .qa--lead { padding-top: 1.8rem; border-top: 1px solid var(--line); }
.qa--lead .qa__q { font-size: var(--step-2); margin-bottom: .75rem; }
.qa--lead .qa__a { font-size: var(--step-0); line-height: 1.7; }
.qa-more { margin-top: 1.6rem; }

/* Service page: answers beside an "At a glance" and facts column. */
.svc { display: grid; gap: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); align-items: start; }
@media (min-width: 960px) {
  .svc { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  .svc__aside { position: sticky; top: calc(var(--header-h) + 1.2rem); }
}
.svc__aside { display: grid; gap: 1rem; min-width: 0; }
.svc__cta { width: 100%; }
.key-takeaways, .facts-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 1rem + .6vw, 1.5rem); min-width: 0;
}
.key-takeaways { border-top: 3px solid var(--accent); }
.key-takeaways h2, .facts-card h2 {
  font-size: var(--step--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: .8rem;
}
.key-takeaways ul { display: grid; gap: .6rem; }
.key-takeaways li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-weight: 600; font-size: var(--step--1); line-height: 1.5; }
.key-takeaways li svg { color: var(--accent); margin-top: .2em; }
.key-takeaways--wide { margin-bottom: 2rem; }
.key-takeaways--wide li { font-size: var(--step-0); }

.facts { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.facts th, .facts td { text-align: left; vertical-align: top; padding: .65rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.facts th { font-weight: 700; padding-right: 1rem; width: 38%; color: var(--text); }
.facts td { color: var(--text-muted); }
.facts--key { font-size: var(--step-0); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.facts--key th, .facts--key td { padding: .8rem 1.1rem; }
.facts--key th { width: 32%; }

.incl {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 1rem + 1vw, 1.8rem); min-width: 0;
}
.incl h3 { font-size: var(--step-1); margin-bottom: 1rem; }

.related { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.related__title { font-size: var(--step--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .9rem; }
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { min-height: 44px; padding: .5rem 1rem; }
a.pill { transition: border-color .2s var(--ease), color .2s var(--ease); }
a.pill:hover { border-color: var(--accent); color: var(--text); }

/* Home: counties as a tidy wrap of tags. */
.county-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .4rem 1.2rem; }
.county-list li { padding: .45rem .9rem; border: 1px solid var(--line-strong); border-radius: 100px; font-weight: 600; font-size: var(--step--1); background: var(--surface); }

/* Projects: one card per job; multi-photo jobs take more room. */
.filters { margin-bottom: .6rem; }
.chip { min-height: 44px; }
.filters__count { font-size: var(--step--1); margin-bottom: 1.4rem; }
.projects { display: grid; gap: var(--gap); grid-auto-flow: dense; }
@media (min-width: 700px) { .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .projects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) {
  .project:has(.project__photos--2) { grid-column: span 2; }
  .project:has(.project__photos--3) { grid-column: 1 / -1; }
}
.project {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.project.is-hidden { display: none; }
.project__photos { display: grid; gap: 3px; background: var(--line); }
.project__photos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project__photos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .project__photos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.project__photos .shot { border: 0; border-radius: 0; aspect-ratio: 4 / 3; }
.project__photos .shot img { width: 100%; height: 100%; object-fit: cover; }
.project__body { padding: clamp(1rem, .9rem + .6vw, 1.4rem); display: grid; gap: .55rem; }
.project__title { font-size: var(--step-1); font-weight: 700; line-height: 1.3; }
.project__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.project__tags li { font-size: .78rem; font-weight: 600; padding: .2rem .6rem; border-radius: 100px; background: var(--bg-alt); color: var(--text-muted); }
.project__text { color: var(--text-muted); font-size: var(--step--1); }

/* Areas */
.areas { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.area { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.3rem 1.4rem; display: grid; gap: .45rem; align-content: start; }
.area__name { font-family: var(--font-display); font-size: var(--step-1); }
.areas__note { margin-top: 2rem; }
.areas__note a, .qa-more a:not(.link-arrow), .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* About */
.does-grid, .diff-grid { margin-top: 1.6rem; }
.does, .diff { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.3rem 1.4rem; min-width: 0; }
.does h3, .diff h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.does h3 a:hover { color: var(--accent); }
.does p, .diff p { color: var(--text-muted); font-size: var(--step--1); }
.diff { border-top: 3px solid var(--accent); }

/* Tables that may be wider than a phone scroll inside their own box,
   never the page. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin-block: 1.2rem; }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--step--1); background: var(--surface); }
.compare th, .compare td { text-align: left; vertical-align: top; padding: .75rem .9rem; border: 1px solid var(--line); }
.compare thead th { background: var(--ink); color: #fff; font-weight: 700; }
.compare tbody th, .compare tbody td:first-child { font-weight: 700; color: var(--text); }
.compare td { color: var(--text-muted); }
.guide h2 { font-size: var(--step-2); margin-top: 2.4rem; }
.guide h3 { font-size: var(--step-1); margin-top: 1.6rem; }
.guide ol { list-style: decimal; padding-left: 1.3rem; display: grid; gap: .6rem; }
.guide ol li { padding-left: .3rem; }
.guide ol li::marker { color: var(--accent); font-weight: 700; }

/* Quote section, embedded on every page */
.quote-sec__in { display: grid; gap: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); align-items: start; }
@media (min-width: 960px) { .quote-sec__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.quote-sec__copy { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.quote-sec__call { font-weight: 600; }
.quote-sec__call a { color: var(--accent); white-space: nowrap; }
.quote-sec__form {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 1rem + 1.5vw, 2.2rem); box-shadow: var(--shadow-md); min-width: 0;
}
.qform { display: grid; gap: 1rem; }
.qform .input, .qform .select, .qform .textarea { min-height: 48px; font-size: max(16px, var(--step-0)); }
.qform .textarea { min-height: 7rem; }
.field-hint { font-size: var(--step--1); color: var(--text-faint); }
.optional { font-weight: 400; color: var(--text-faint); }
.qform__submit { width: 100%; }
.qform__trust { display: flex; align-items: center; justify-content: center; gap: .45rem; font-weight: 600; font-size: var(--step--1); }
.qform__trust svg { color: var(--accent); }
.form__note a { color: var(--accent); text-decoration: underline; }
.quote-page { padding-top: calc(var(--section-y) * .6); }
.quote-page .crumbs { color: var(--text-faint); margin-bottom: 1.4rem; }
.quote-page .crumbs a:hover, .quote-page .crumbs [aria-current] { color: var(--text); }
.next-steps { list-style: decimal; padding-left: 1.3rem; display: grid; gap: .5rem; color: var(--text-muted); }
.next-steps li::marker { color: var(--accent); font-weight: 700; }
.quote-page__contact { color: var(--text-muted); }
.prose .crumbs { color: var(--text-faint); margin-bottom: 1rem; }
/* Buttons and links placed in a split section head keep their natural width. */
.section-head--split > .btn, .section-head--split > a, .split__copy > .btn, .split__copy > .link-arrow { justify-self: start; }
@media (min-width: 900px) { .section-head--split > .btn, .section-head--split > a { justify-self: end; } }
/* Reviews: swipe row on phones, a full grid on larger screens so no card is
   ever shown sliced off at the edge. */
@media (min-width: 900px) {
  .rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .rail > * { flex: none; }
}
/* Four-up service cards: a smaller title keeps names to two lines. */
.grid--4 .card__title { font-size: var(--step-1); line-height: 1.25; }
/* Two tinted sections in a row get a hairline so they read as separate. */
.section--alt + .section--alt { border-top: 1px solid var(--line); }
/* Phones: service cards become compact rows (thumbnail beside text), so eight
   services take about a screen and a half instead of five screens. */
@media (max-width: 639px) {
  .svc-grid > .card { flex-direction: row; align-items: stretch; }
  .svc-grid > .card .card__media { flex: 0 0 34%; aspect-ratio: auto; min-height: 100%; }
  .svc-grid > .card .card__media img { height: 100%; object-fit: cover; }
  .svc-grid > .card .card__body { padding: .9rem 1rem; gap: .35rem; min-width: 0; }
  .svc-grid > .card .svc-icon { display: none; }
  .svc-grid > .card .card__title { font-size: var(--step-0); }
  .svc-grid > .card .card__text { font-size: .86rem; line-height: 1.45; }
  .svc-grid > .card .card__foot { margin-top: .1rem; }
}
/* Five photos: two across the top, three below, so no empty cell. */
@media (min-width: 700px) {
  .project__photos--n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .project__photos--n5 > .shot { grid-column: span 2; }
  .project__photos--n5 > .shot:nth-child(-n+2) { grid-column: span 3; }
  .project__photos--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .project__photos--n3 > .shot:first-child, .project__photos--n5 > .shot:first-child { grid-column: 1 / -1; }
}
/* Guide comparison: the table from 760px up, one card per floor below. */
.compare-cards { display: none; }
@media (max-width: 759px) {
  .compare-wrap { display: none; }
  .compare-cards { display: grid; gap: .9rem; margin-block: 1.2rem; }
}
.compare-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius-lg); padding: 1rem 1.1rem; }
.compare-card h3 { font-size: var(--step-1); margin: 0 0 .6rem !important; }
.compare-card dl { display: grid; gap: .55rem; }
.compare-card dl > div { display: grid; gap: .1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.compare-card dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.compare-card dt { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.compare-card dd { color: var(--text-muted); font-size: var(--step--1); }
.qa-more + .byline { margin: 2.2rem 0 0; padding: 1rem 0 0; border-bottom: 0; border-top: 1px solid var(--line); text-align: center; }

/* ==========================================================================
   Restored layouts: service grid, closing quote band, small utilities
   ========================================================================== */

/* Headings rise word by word. Each word clips its own box, padded so accents
   and descenders (g, y, p, j) always sit inside it; the negative margin gives
   the space back so line spacing is unchanged. */
@media (prefers-reduced-motion: no-preference) {
  .word {
    display: inline-block; overflow: hidden; vertical-align: top;
    padding: .1em .06em .2em; margin: -.1em -.06em -.2em;
  }
  .word > span {
    display: inline-block; translate: 0 115%;
    transition: translate .85s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 45ms);
  }
  .is-in .word > span, .word.is-in > span { translate: 0 0; }
}

/* Services: three across, and the last two share a row as wider cards,
   so eight services never leave an orphan. */
.svc-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .svc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .svc-grid > * { grid-column: span 2; }
  .svc-grid > :nth-last-child(-n+2):nth-child(3n+1),
  .svc-grid > :nth-last-child(-n+2):nth-child(3n+1) ~ * { grid-column: span 3; }
  .svc-grid > :nth-last-child(-n+2):nth-child(3n+1) .card__media,
  .svc-grid > :nth-last-child(-n+2):nth-child(3n+1) ~ * .card__media { aspect-ratio: 16 / 9; }
}
.svc-grid .card__title { font-size: var(--step-2); line-height: 1.2; }

.tile-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .tile-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .tile-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.masonry__item.is-more-hidden { display: none; }
.load-more { margin-top: 2rem; }

/* Closing band with the quote form, on every page. */
.cta-band__grid {
  display: grid; gap: clamp(2rem, 1.5rem + 2.5vw, 4rem); align-items: center;
  padding-block: clamp(3.5rem, 2.6rem + 4.5vw, 6.5rem);
}
@media (min-width: 960px) { .cta-band__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.cta-band__copy { display: grid; gap: 1.1rem; justify-items: start; min-width: 0; }
.cta-band__copy .eyebrow { color: #FF6E6E; }
.cta-band__copy p { margin-top: 0; }
.cta-band--form h2 { font-size: var(--step-3); }
.cta-band__ticks { display: grid; gap: .7rem; margin-block: .3rem .6rem; }
.cta-band__ticks li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; color: #E2DAD1; font-weight: 600; }
.cta-band__ticks svg { color: var(--red-bright); margin-top: .2em; }
.quote-card {
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-xl); padding: clamp(1.3rem, 1rem + 1.6vw, 2.4rem);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .55); min-width: 0;
}
.cta-band .quote-card p { color: var(--text-muted); max-width: none; margin-top: 0; }
.cta-band .quote-card .qform__trust { color: var(--text); }
.quote-card--flat { border: 1px solid var(--line); box-shadow: var(--shadow-md); margin-top: 1.6rem; }

/* Service page: sticky aside beside the prose. */
.split--top { align-items: start; }
.svc-aside { position: relative; }
@media (min-width: 900px) { .svc-aside { position: sticky; top: calc(var(--header-h) + 1.2rem); } }
.svc-aside .card:hover { translate: none; }
.svc-aside__title { font-size: var(--step-2); }
.svc-aside__glance { margin-block: .3rem .6rem; }
.svc-aside__contact { display: grid; gap: .6rem; }
.spec-col__title { font-family: var(--font-display); font-size: var(--step-1); margin-bottom: 1rem; }
.card__title--sm { font-size: var(--step-1); line-height: 1.25; }

.rating-block__label { font-weight: 700; }
.rating-block__link { font-size: var(--step--1); }
.phero__eyebrow { color: #FF6E6E; }
.lede--mt { margin-top: 1rem; }
.lede--gap { margin-block: 1rem 0; }
.btn-row--mt { margin-top: .6rem; }
.small-print { font-size: var(--step--1); margin-top: 1.4rem; }
.accent-link { color: var(--accent); font-weight: 600; }
.also__title, .areas-band__title { margin-block: .9rem 1.4rem; }
.areas-band__title + .lede { margin-bottom: 1rem; }
.filters--center { justify-content: center; }
.section--roomy { padding-block: calc(var(--section-y) * 1.6) var(--section-y); }
.notfound__title { margin-block: 1rem; }
.notfound__rule { margin-block: 3rem 2rem; }
.byline-inline { color: rgb(255 255 255 / .5); }
.trust-item .stars { flex: none; }

/* ==========================================================================
   Enquiry: select safety, save-our-number, lightbox quote, quick quote card
   ========================================================================== */
[hidden] { display: none !important; }
/* A long choice can never spill past the arrow: it trims with an ellipsis. */
.select { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

.save-number { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .45rem; margin-top: .8rem; font-size: var(--step--1); color: var(--text-muted); text-align: center; }
.save-number svg { color: var(--accent); flex: none; }
.save-number a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.lb__cta { justify-self: center; }
@media (max-width: 639px) { .lb__cta { margin-bottom: 4.2rem; } }

.qc {
  position: fixed; z-index: 220; display: grid; overflow: hidden;
  inset-inline: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom));
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px -12px rgb(0 0 0 / .45);
  translate: 0 calc(100% + 2rem); opacity: 0;
  transition: translate .55s var(--ease-out), opacity .4s var(--ease);
  max-height: calc(100svh - 5rem); overflow-y: auto;
}
.qc.is-in { translate: 0 0; opacity: 1; }
@media (min-width: 640px) { .qc { inset-inline: auto; right: 1.25rem; bottom: 1.25rem; width: 380px; } }
.qc__media { position: relative; height: 104px; overflow: hidden; background: var(--ink); }
@media (min-width: 640px) { .qc__media { height: 168px; } }
.qc__media img { width: 100%; height: 100%; object-fit: cover; }
.qc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(6 5 4 / .45), transparent 60%); }
.qc__close {
  position: absolute; top: .6rem; right: .6rem; z-index: 2; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%; color: #fff;
  background: rgb(10 9 8 / .55); backdrop-filter: blur(6px); border: 1px solid rgb(255 255 255 / .25);
}
.qc__body { display: grid; gap: .55rem; padding: 1rem 1.15rem 1.15rem; }
.qc__eyebrow { font-size: .7rem; }
.qc__title { font-size: var(--step-2); line-height: 1.1; }
.qc__text { font-size: var(--step--1); color: var(--text-muted); }
.qc__form { display: grid; gap: .5rem; margin-top: .2rem; }
.qc__form .input { min-height: 46px; font-size: 16px; padding: .7rem .9rem; }
.qc__form .field-error:empty { display: none; }
.qc__submit { width: 100%; }
.qc__form.is-sent .input, .qc__form.is-sent .qc__submit { display: none; }
@media (max-width: 639px) {
  .qc__body { padding: .85rem 1rem 1rem; gap: .45rem; }
  .qc__text { display: none; }
}
/* While the card is up, the other floating bars step aside. */
body.qc-open .dock, body.qc-open .actionbar { translate: 0 150%; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .qc { transition: none; } }

/* Optional details fold away, so the form is name, contact, floor, send. */
.qform__more { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); }
.qform__more-toggle {
  display: flex; align-items: center; gap: .5rem; min-height: 48px; padding: .75rem 1rem;
  cursor: pointer; font-weight: 600; font-size: var(--step--1); list-style: none;
}
.qform__more-toggle::-webkit-details-marker { display: none; }
.qform__more-toggle svg { margin-left: auto; color: var(--accent); transition: rotate .3s var(--ease); }
.qform__more[open] .qform__more-toggle svg { rotate: 45deg; }
/* Two columns only when the form itself is wide enough, wherever it sits. */
.qform__more { container-type: inline-size; }
.qform__more-body { display: grid; gap: 1rem; padding: 0 1rem 1rem; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 440px) { .qform__more-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Dark bands in the light theme: red text uses a lighter red to stay readable. */
.section--ink, .cta-band, .footer, .hero, .phero { --accent: #FF5252; --text-grad: var(--text-grad-dark); }
.lb__cta { white-space: nowrap; }
@media (max-width: 399px) { .hide-xs { display: none; } }

/* ==========================================================================
   Highlights: Instagram-style circles and the story viewer
   ========================================================================== */
.hl-inline { margin-bottom: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); }
.hl {
  display: flex; gap: clamp(.9rem, .6rem + 1.4vw, 1.8rem); justify-content: flex-start;
  overflow-x: auto; scroll-snap-type: x proximity; padding: .3rem .2rem .4rem; margin: 0 -.2rem;
  scrollbar-width: none;
}
.hl::-webkit-scrollbar { display: none; }
.hl li { flex: none; scroll-snap-align: start; }
.hl__item { display: grid; justify-items: center; gap: .5rem; width: 84px; color: var(--text); cursor: pointer; }
.hl__ring {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; padding: 3px;
  background: var(--line-strong); transition: scale .3s var(--ease-spring);
}
.hl__item.is-new .hl__ring { background: conic-gradient(from 210deg, #FF7070, #E81010, #A80000, #FF3B3B, #FF7070); }
.hl__item:hover .hl__ring { scale: 1.06; }
.hl__cover {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #2A1311, var(--ink) 70%); color: #FF5252;
  border: 3px solid var(--bg);
}
.hl__name { font-size: .8rem; font-weight: 600; line-height: 1.25; text-align: center; max-width: 84px; text-wrap: balance; }
@media (min-width: 900px) {
  .hl__item { width: 96px; }
  .hl__ring { width: 88px; height: 88px; }
  .hl__name { font-size: .85rem; max-width: 96px; }
}

.story {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  background: rgb(6 5 4 / .94); backdrop-filter: blur(6px);
}
.story__frame {
  position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; color: #fff;
  display: grid; grid-template-rows: auto auto 1fr auto;
}
@media (min-width: 640px) {
  .story__frame { width: auto; height: min(92svh, 880px); aspect-ratio: 9 / 16; border-radius: 18px; box-shadow: 0 30px 90px -20px rgb(0 0 0 / .8); }
}
.story__bars { position: relative; z-index: 3; display: flex; gap: 4px; padding: .7rem .75rem 0; }
.story__bar { flex: 1; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .3); overflow: hidden; }
.story__fill { display: block; height: 100%; width: 0; background: #fff; }
.story__bar.is-done .story__fill { width: 100%; }
.story__bar.is-active .story__fill { animation: story-fill var(--dur, 5000ms) linear forwards; }
.story.is-paused .story__bar.is-active .story__fill { animation-play-state: paused; }
@keyframes story-fill { from { width: 0; } to { width: 100%; } }
.story__head { position: relative; z-index: 3; display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; }
.story__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #FF5252; flex: none; border: 1px solid rgb(255 255 255 / .25); }
.story__icon svg { width: 18px; height: 18px; }
.story__title { font-weight: 700; font-size: .95rem; }
.story__when { color: rgb(255 255 255 / .75); font-size: .82rem; margin-right: auto; }
.story__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 1.1rem; line-height: 1; background: rgb(0 0 0 / .35); }
.story__btn:last-child { font-size: 1.6rem; }
.story__media { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__media::before, .story__media::after { content: ""; position: absolute; inset-inline: 0; pointer-events: none; z-index: 1; }
.story__media::before { top: 0; height: 22%; background: linear-gradient(rgb(0 0 0 / .55), transparent); }
.story__media::after { bottom: 0; height: 42%; background: linear-gradient(transparent, rgb(0 0 0 / .8)); }
.story__quote {
  position: relative; z-index: 2; display: grid; gap: 1rem; padding: 2rem 1.6rem; margin: 0 1rem; text-align: center;
}
.story__quote blockquote { font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1.6vw, 1.7rem); line-height: 1.3; }
.story__quote figcaption { font-weight: 700; color: rgb(255 255 255 / .85); }
.story__stars { color: #FFB020; letter-spacing: .15em; }
.story:has(.story__quote) .story__frame { background: radial-gradient(circle at 30% 20%, #3A1210, #0A0908 70%); }
.story__tap { position: absolute; z-index: 2; top: 15%; bottom: 25%; background: transparent; }
.story__tap--prev { left: 0; width: 33%; }
.story__tap--next { right: 0; width: 67%; }
.story__foot { position: relative; z-index: 3; grid-row: 4; display: grid; gap: .55rem; padding: 0 1rem calc(1rem + env(safe-area-inset-bottom)); }
.story__caption { font-size: .95rem; line-height: 1.45; text-shadow: 0 1px 8px rgb(0 0 0 / .6); }
.story__caption:empty { display: none; }
.story__link { font-size: .8rem; font-weight: 600; color: rgb(255 255 255 / .85); text-decoration: underline; text-underline-offset: 3px; justify-self: start; }
.story__cta { width: 100%; }
@media (prefers-reduced-motion: reduce) { .hl__ring { transition: none; } }

/* ---------- Announcement strip (live from AuraicPulse) and preview strip ---------- */
.promo { background: var(--ink); color: #fff; border-top: 1px solid rgb(255 255 255 / .12); }
.promo--accent { background: #B00000; }
.promo--warning { background: #5A3A00; }
.promo__in { display: flex; align-items: center; gap: .75rem; height: 3.5rem; }
.promo__text {
  flex: 1; margin: 0; font-size: var(--step--1); line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.promo__link { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.promo__link:hover { text-decoration-thickness: 2px; }
.promo__close {
  flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-inline-end: -.6rem;
  border: 0; border-radius: var(--radius); background: transparent; color: #fff; cursor: pointer;
}
.promo__close:hover { background: rgb(255 255 255 / .12); }
.promo__close:focus-visible, .promo__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pv-strip {
  position: fixed; z-index: 205; inset-inline: 0; top: 0; display: flex; align-items: center; justify-content: center;
  gap: .6rem; height: 2.25rem; padding-inline: 1rem; background: #FFD84D; color: #1A1400; font-size: var(--step--1); font-weight: 600;
}
.pv-strip a { color: #1A1400; text-decoration: underline; }
.header { top: var(--pv-h); }

/* Answer blocks from AuraicPulse under a service page's intro. */
.answer-slot:empty { display: none; }
.answer-block { margin-block: 1.6rem; padding: 1.2rem 1.3rem; border-inline-start: 3px solid var(--accent); background: var(--bg-alt); border-radius: var(--radius); }
.answer-block > :first-child { margin-top: 0; }
.answer-block > :last-child { margin-bottom: 0; }
.acc__a { margin: 0; }