/* ==========================================================================
   SPEEDY LLC | Flooring, Tile & Bathroom Remodeling | Spokane, WA
   Visual system translated from the approved reference template.
   Scale and rhythm follow that reference; palette is SPEEDY black / white / gold.
   ========================================================================== */

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

/* ---------- 2. TOKENS ---------- */
:root {
  /* Brand: gold sampled directly from the SPEEDY logo (#FCAE12) */
  --gold:        #fcae12;
  --gold-light:  #ffc33f;
  --gold-deep:   #c9860a;
  --gold-dark:   #a86e05;

  /* Neutrals */
  --black:       #080808;
  --ink:         #0b0d10;
  --charcoal:    #16191d;
  --slate:       #1e2125;
  --white:       #ffffff;
  --off-white:   #f4f2ed;
  --warm-gray:   #e9e6df;
  --line-light:  #ddd9d0;
  --muted:       #555555;
  --muted-2:     #6d6a64;
  --white-70:    rgba(255,255,255,.70);
  --white-50:    rgba(255,255,255,.50);
  --white-10:    rgba(255,255,255,.10);
  --white-14:    rgba(255,255,255,.14);
  --black-08:    rgba(8,8,8,.08);
  --black-14:    rgba(8,8,8,.14);

  /* Type */
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --fs-h1:    clamp(2.05rem, 5.4vw, 4.25rem);
  --fs-h2:    clamp(2.05rem, 4.4vw, 3.5rem);
  --fs-h3:    clamp(1.55rem, 2.5vw, 2.15rem);
  --fs-h4:    clamp(1.2rem, 1.6vw, 1.5rem);
  --fs-lead:  clamp(1.02rem, 1.25vw, 1.175rem);
  --fs-body:  1rem;
  --fs-sm:    .9375rem;
  --fs-xs:    .8125rem;
  --fs-label: .75rem;
  --fs-num:   clamp(2.4rem, 4.6vw, 3.75rem);
  --fs-stat:  clamp(1.9rem, 3.2vw, 3rem);

  --ls-h1: -.052em;
  --ls-h2: -.040em;
  --ls-h3: -.030em;
  --lh-1:   1;
  --lh-11:  1.1;
  --lh-12:  1.2;
  --lh-14:  1.4;
  --lh-15:  1.5;
  --lh-16:  1.62;

  /* Layout: container width taken from the reference */
  --container: 84.5rem;
  --gutter: clamp(1.125rem, 4vw, 2.75rem);

  /* Vertical rhythm */
  --sec:    clamp(4rem, 8.4vw, 7.5rem);
  --sec-lg: clamp(5rem, 10.4vw, 10rem);
  --sec-sm: clamp(3rem, 5.6vw, 5rem);

  /* Radius - restrained, per reference */
  --r-xs: .25rem;
  --r-sm: .5rem;
  --r-md: .75rem;
  --r-lg: 1rem;
  --r-full: 999px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .25s var(--ease);
  --t-base: .4s var(--ease);
  --t-slow: .7s var(--ease);

  --header-h: 5rem;
  --mobile-bar-h: 0px;
}

/* ---------- 3. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  /* Reserve the scrollbar track so locking the scroll (preloader, estimate
     modal) never shifts the layout sideways. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-16);
  color: var(--ink);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-bottom: var(--mobile-bar-h);
}

body.is-locked { overflow: hidden; }

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

/* Sprite icons reference a <symbol> and carry no viewBox of their own, so the
   browser would size them 300x150. Give every icon a real box by default;
   component rules below override where a different size is needed. */
svg { width: 1em; height: 1em; flex: none; }
/* The hidden sprite host must stay at zero, not pick up the icon default. */
svg[width="0"] { width: 0; height: 0; position: absolute; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible, .footer :focus-visible { outline-color: var(--gold-light); }

.skip-link {
  position: absolute; left: 1rem; top: -100%;
  z-index: 2000; padding: .75rem 1.25rem;
  background: var(--gold); color: var(--black);
  font-weight: 600; border-radius: var(--r-sm);
  transition: top var(--t-fast);
}
.skip-link:focus { top: 1rem; }

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

/* ---------- 4. TYPOGRAPHY ---------- */
.h1, .h2, .h3, .h4 {
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); line-height: var(--lh-11); letter-spacing: var(--ls-h1); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-11); letter-spacing: var(--ls-h2); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-12); letter-spacing: var(--ls-h3); }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-12); letter-spacing: -.022em; }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-15);
  color: var(--muted);
  max-width: 44ch;
  text-wrap: pretty;
}
.body-text { color: var(--muted); line-height: var(--lh-16); text-wrap: pretty; }
.small { font-size: var(--fs-sm); }

.on-dark .h1, .on-dark .h2, .on-dark .h3, .on-dark .h4 { color: var(--off-white); }
.on-dark .lead, .on-dark .body-text { color: var(--white-70); }

.gold { color: var(--gold); }
.nowrap { white-space: nowrap; }

/* Eyebrow: the reference's parenthetical section label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: '('; opacity: .55; }
.eyebrow::after  { content: ')'; opacity: .55; }
.on-dark .eyebrow { color: var(--white-70); }
.eyebrow--gold { color: var(--gold-deep); }
.on-dark .eyebrow--gold { color: var(--gold); }

/* ---------- 5. LAYOUT ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: 94rem; }

.section { position: relative; padding-block: var(--sec); }
.section--lg { padding-block: var(--sec-lg); }
.section--sm { padding-block: var(--sec-sm); }
.section--tight-top { padding-top: var(--sec-sm); }

.bg-white     { background: var(--white); }
.bg-off       { background: var(--off-white); }
.bg-warm      { background: var(--warm-gray); }
.bg-ink       { background: var(--ink); }
.bg-black     { background: var(--black); }

.rule { height: 1px; background: var(--black-14); border: 0; }
.on-dark .rule { background: var(--white-14); }

/* Section head: label above an oversized editorial headline */
.sec-head { display: flex; flex-direction: column; gap: .875rem; max-width: 40rem; }
.sec-head--wide { max-width: 52rem; }
/* Head that is meant to hold on one line at desktop widths */
.sec-head--line { max-width: none; }
@media (min-width: 992px) {
  .sec-head--line .sec-head__title, .sec-head--line .lead { white-space: nowrap; }
}
.sec-head__title { margin-top: .25rem; }

/* ---------- 6. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: .8125rem 1.5rem;
  border-radius: var(--r-full);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1.25;
  letter-spacing: -.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--t-base), color var(--t-base),
              border-color var(--t-base), transform .12s ease;
}
.btn:active { transform: translateY(1px); }

/* Roll-up label: the text is duplicated inside a clipped wrapper */
.btn__label { display: block; height: 1.25em; overflow: hidden; }
.btn__label span { display: block; transition: transform var(--t-base); }
.btn:hover .btn__label span { transform: translateY(-100%); }

.btn__icon { width: 1.125rem; flex: none; overflow: hidden; display: flex; }
.btn__icon svg { width: 1.125rem; height: .875rem; flex: none; transition: transform var(--t-base); }
.btn:hover .btn__icon svg:first-child { transform: translateX(120%); }
.btn:hover .btn__icon svg:last-child  { transform: translateX(-100%); }
.btn__icon svg:last-child { transform: translateX(0); margin-left: -1.125rem; }

.btn--primary { background: var(--gold); color: var(--black); }
.btn--primary:hover { background: var(--black); color: var(--white); }

.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--gold); color: var(--black); }

.btn--outline { border-color: var(--black-14); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }

/* On photography / dark surfaces */
.btn--glass {
  background: var(--white-10);
  color: var(--white);
  border-color: var(--white-14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn--glass:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }

.btn--lg { padding: 1rem 1.875rem; font-size: var(--fs-body); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* Text link with directional arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 500; font-size: var(--fs-sm);
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--black-14);
  transition: border-color var(--t-base), color var(--t-base);
}
.link-arrow svg { width: 1rem; height: .8rem; transition: transform var(--t-base); }
.link-arrow:hover { border-color: var(--gold); color: var(--gold-deep); }
.link-arrow:hover svg { transform: translateX(4px); }
.on-dark .link-arrow { border-color: var(--white-14); }
.on-dark .link-arrow:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- 7. HEADER ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  transition: transform .45s var(--ease), background-color var(--t-base),
              border-color var(--t-base);
  border-bottom: 1px solid transparent;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}
.header.is-solid {
  background: rgba(11,13,16,.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--white-10);
}
.header.is-hidden { transform: translateY(-100%); }

.brand { display: flex; align-items: center; flex: none; }
.brand img { width: auto; height: 2.75rem; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  color: var(--white-70);
  padding-block: .25rem;
  transition: color var(--t-fast);
}
.nav__link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -.25rem;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base);
}
.nav__link:hover, .nav__link.is-active { color: var(--white); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 1rem; flex: none; }
.header__phone {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-sm); font-weight: 500; color: var(--white);
  transition: color var(--t-fast);
}
.header__phone svg { width: 1rem; height: 1rem; color: var(--gold); flex: none; }
.header__phone:hover { color: var(--gold); }

.burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  align-items: center; justify-content: center;
  border: 1px solid var(--white-14); border-radius: var(--r-sm);
  color: var(--white);
}
.burger span {
  display: block; position: relative;
  width: 1.125rem; height: 1.5px; background: currentColor;
  transition: transform var(--t-base), background-color var(--t-base);
}
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0;
  width: 1.125rem; height: 1.5px; background: currentColor;
  transition: transform var(--t-base), top var(--t-base);
}
.burger span::before { top: -.375rem; }
.burger span::after  { top:  .375rem; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 890;
  background: var(--ink);
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }

.mobile-menu__nav { display: flex; flex-direction: column; margin-top: 1rem; }
.mobile-menu__link {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--white-10);
  font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em;
  color: var(--off-white);
  opacity: 0; transform: translateY(14px);
}
.mobile-menu.is-open .mobile-menu__link {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(60ms * var(--i, 0) + 80ms);
}
.mobile-menu__index { font-size: var(--fs-xs); color: var(--gold); flex: none; }

.mobile-menu__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 1rem; }
.mobile-menu__contact { display: grid; gap: .5rem; }
.mobile-menu__contact a { color: var(--white-70); font-size: var(--fs-sm); }
.mobile-menu__contact a:hover { color: var(--gold); }

/* ---------- 8. HERO ---------- */
.hero {
  position: relative;
  min-height: 44rem;
  height: 88vh;
  max-height: 52rem;
  padding-top: calc(var(--header-h) + 1.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: clip;
  background: var(--ink);
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,8,8,.72) 0%, rgba(8,8,8,.30) 26%, rgba(5,6,7,.66) 58%, var(--ink) 97%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; padding-bottom: clamp(1.75rem, 3.4vw, 3rem);
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .625rem;
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--white);
}
.hero__eyebrow .bolt { width: .75rem; height: .75rem; color: var(--gold); flex: none; }
.hero__area {
  font-size: var(--fs-xs); color: var(--white-70); text-align: right; max-width: 16rem;
}

.hero__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27rem;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}
.hero__left { display: flex; flex-direction: column; gap: clamp(1.5rem, 2.6vw, 2.25rem); max-width: 52rem; }
.hero__title { color: var(--off-white); font-size: clamp(2.05rem, 4.1vw, 3.5rem); line-height: 1.06; letter-spacing: var(--ls-h1); font-weight: 500; }
.hero__copy { color: rgba(244,242,237,.86); font-size: var(--fs-lead); line-height: var(--lh-15); max-width: 40rem; }

/* Hero media card: the reference's hero-right slider */
.hero__card { position: relative; }
.hero-slider { position: relative; }
.hero-slider__track { position: relative; overflow: hidden; border-radius: var(--r-sm); }
.hero-slider__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), visibility .6s;
}
.hero-slider__slide.is-active { position: relative; opacity: 1; visibility: visible; }
.hero-slider__slide img { width: 100%; height: 17rem; object-fit: cover; }

.hero-slider__caption {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: .875rem;
}
.hero-slider__label { font-size: var(--fs-sm); font-weight: 500; color: var(--off-white); }
.hero-slider__nav { display: flex; gap: .375rem; }
.hero-slider__dot {
  width: 1.75rem; height: 2px; background: var(--white-14);
  transition: background-color var(--t-base);
}
.hero-slider__dot.is-active { background: var(--gold); }

/* ---------- 9. TRUST BAR ---------- */
.trust { background: var(--off-white); padding-top: clamp(1.5rem, 3vw, 2.75rem); }
.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}
.trust__item {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1rem, 2vw, 2rem) clamp(1.75rem, 3vw, 2.75rem) 0;
  display: flex; flex-direction: column; gap: .625rem;
}
.trust__item + .trust__item { padding-left: clamp(1rem, 2vw, 2rem); border-left: 1px solid var(--line-light); }
.trust__icon { width: 1.375rem; height: 1.375rem; color: var(--gold-deep); flex: none; }
.trust__title {
  font-size: clamp(.95rem, 1.35vw, 1.125rem);
  font-weight: 500; line-height: 1.22; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--ink);
}
.trust__meta { font-size: var(--fs-xs); color: var(--muted-2); }
.trust__meta strong { font-weight: 500; color: var(--ink); }

/* ---------- 10. SERVICES ---------- */
/* Scroll-driven service panel: the left media and the right list are pinned
   together while four sentinels hand over the active service on scroll.
   Below 992px the pin is dropped and the list behaves as a tap accordion. */

.sec-head--center {
  max-width: 52rem; margin-inline: auto;
  align-items: center; text-align: center;
}

.svc-scroll { position: relative; height: calc(4 * 58vh); margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.svc-steps {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
}
.svc-sticky { position: sticky; top: calc(var(--header-h) + clamp(1.5rem, 4vh, 3.5rem)); }

.svc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(2rem, 4.5vw, 5.5rem);
  align-items: center;
}

/* Media stack */
.svc-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--warm-gray);
  border-radius: var(--r-xs);
}
.svc-media__frame {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transform: scale(1.07);
  clip-path: inset(0 0 12% 0);
  transition: opacity .75s var(--ease), visibility .75s,
              transform 1.1s var(--ease), clip-path .9s var(--ease);
}
.svc-media__frame.is-active {
  opacity: 1; visibility: visible;
  transform: none; clip-path: inset(0 0 0 0);
}
.svc-media__frame picture { display: block; height: 100%; }
.svc-media__frame img { width: 100%; height: 100%; object-fit: cover; }
.svc-media__tag {
  position: absolute; left: 0; bottom: 0;
  padding: .5rem .875rem;
  background: var(--gold); color: var(--black);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  transform: translateY(101%);
  transition: transform .6s var(--ease);
  transition-delay: .12s;
}
.svc-media__frame.is-active .svc-media__tag { transform: none; }

/* Row list */
.svc-panel { display: flex; flex-direction: column; }
.svc-row {
  --svc-pad: clamp(1.1rem, 1.9vw, 1.6rem);
  position: relative;
  padding: var(--svc-pad) 0 var(--svc-pad) clamp(1.125rem, 1.8vw, 1.625rem);
  border-bottom: 1px solid var(--black-14);
}
.svc-row::before {
  content: '';
  position: absolute; left: 0; top: var(--svc-pad);
  width: 2px; height: 1.35rem;
  background: var(--line-light);
  transition: height .65s var(--ease), background-color .45s var(--ease);
}
.svc-row.is-active::before {
  height: calc(100% - var(--svc-pad) * 2);
  background: var(--ink);
}

.svc-row__heading { margin: 0; }
.svc-row__btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; width: 100%; padding: 0; text-align: left;
  color: var(--muted-2);
  transition: color .4s var(--ease);
}
.svc-row.is-active .svc-row__btn, .svc-row__btn:hover { color: var(--ink); }
.svc-row__title {
  font-size: clamp(1.2rem, 1.85vw, 1.55rem);
  font-weight: 600; letter-spacing: -.032em; line-height: 1.2;
}
.svc-row__mark {
  width: 2.125rem; height: 2.125rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-light);
  border-radius: var(--r-full);
  opacity: 0; transform: translateX(-.5rem);
  transition: opacity .45s var(--ease), transform .45s var(--ease),
              background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.svc-row__mark svg { width: .875rem; height: .7rem; }
.svc-row.is-active .svc-row__mark { opacity: 1; transform: none; background: var(--gold); border-color: var(--gold); color: var(--black); }
.svc-row__btn:hover .svc-row__mark { opacity: 1; transform: none; }

.svc-row__body {
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .6s var(--ease), opacity .45s var(--ease);
}
.svc-row.is-active .svc-row__body { grid-template-rows: 1fr; opacity: 1; }
.svc-row__body > div { overflow: hidden; }
.svc-row__desc {
  padding-top: .875rem;
  font-size: var(--fs-sm); color: var(--muted);
  max-width: 52ch;
}

.svc__pills { display: flex; flex-wrap: wrap; gap: .4375rem; padding-top: 1rem; }
.svc__pills li {
  padding: .3125rem .75rem;
  background: var(--off-white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  color: var(--ink);
  transition: border-color var(--t-base), background-color var(--t-base), transform var(--t-base);
}
.svc-row.is-active .svc__pills li { border-color: rgba(252,174,18,.55); }
.svc__pills li:hover { transform: translateY(-2px); border-color: var(--gold); }

.svc-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3.25rem);
  padding-top: clamp(1.5rem, 2.6vw, 2.25rem);
  border-top: 1px solid var(--black-14);
}
.svc-foot__note {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-xs); color: var(--muted-2);
}
.svc-foot__note svg { width: .875rem; height: .875rem; color: var(--gold-deep); flex: none; }

/* ---------- 11. PROJECTS ---------- */
.projects { overflow: hidden; }
.projects__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.projects__controls { display: flex; align-items: center; gap: 1.25rem; }
.projects__count {
  font-size: var(--fs-sm); color: var(--white-70);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.projects__count b { color: var(--gold); font-weight: 500; }
.carousel-btn {
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--white-10); color: var(--white);
  border: 1px solid var(--white-14);
  transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base);
}
.carousel-btn svg { width: 1.125rem; height: .875rem; }
.carousel-btn:hover:not(:disabled) { background: var(--gold); color: var(--black); border-color: var(--gold); }
.carousel-btn:disabled { opacity: .3; cursor: not-allowed; }
.carousel-btn--prev svg { transform: rotate(180deg); }

.projects__viewport {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  overflow: hidden;
}
.projects__track {
  display: flex;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  transition: transform .65s var(--ease);
  will-change: transform;
}
.pcard {
  flex: 0 0 auto;
  width: clamp(16rem, 27vw, 24rem);
  display: flex; flex-direction: column;
}
.pcard__media {
  position: relative; overflow: hidden;
  background: var(--charcoal);
}
.pcard__media img {
  width: 100%; height: clamp(20rem, 30vw, 27rem);
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__index {
  position: absolute; top: 0; left: 0;
  padding: .5rem .75rem;
  background: var(--gold); color: var(--black);
  font-size: var(--fs-xs); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pcard__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--white-14); margin-top: 1rem;
}
.pcard__title { font-size: var(--fs-body); font-weight: 500; color: var(--off-white); }
.pcard__tag {
  font-size: var(--fs-xs); color: var(--white-50);
  text-transform: uppercase; letter-spacing: .07em; flex: none;
}
.projects__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem; margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--white-14);
}
.projects__cta p { font-size: clamp(1.1rem, 1.9vw, 1.5rem); font-weight: 500; color: var(--off-white); letter-spacing: -.024em; }

/* ---------- 12. WHY SPEEDY ---------- */
/* At rest the four cards form a staircase: each one sits a fixed step lower
   than the one before it. As the section passes through the viewport they
   rise into one clean row. --i is the step index, so a fifth card would
   extend the staircase without touching this file.
   The photograph on each card lives in a hover state only - the card is
   white until the pointer lands on it, then the image fades up behind a
   dark scrim. */
.why-grid {
  --step: clamp(1.75rem, 3.2vw, 3.5rem);

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.875rem, 1.4vw, 1.375rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  /* a single step of clearance under the lowest tread; the rest of the
     overhang is absorbed by the section's own bottom padding, so the row
     does not leave a hole once it has levelled */
  padding-bottom: var(--step);
}

.why-card {
  /* one tread of the staircase: card 01 sits level, each next card drops
     by a single step */
  --stair: translateY(calc(var(--i, 0) * var(--step)));

  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(2.5rem, 5vw, 5rem);
  min-height: clamp(20rem, 27vw, 27.5rem);
  padding: clamp(1.125rem, 1.6vw, 1.625rem);
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  overflow: hidden;
  transform: var(--stair);
  transition: transform 1.05s var(--ease), box-shadow var(--t-hover),
              background-color .5s var(--ease), border-color .5s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms), 0s, 0s, 0s;
}

/* levelled */
.why-card.is-aligned { transform: none; }

/* Scroll-linked levelling where the browser supports it */
@supports (animation-timeline: view()) {
  @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .why-card {
      transform: none;
      transition: box-shadow var(--t-hover), background-color .5s var(--ease), border-color .5s var(--ease);
      animation: why-level linear both;
      animation-timeline: view();
      animation-range: entry 12% cover 46%;
    }
  }
}
@keyframes why-level {
  from { transform: var(--stair); }
  to   { transform: none; }
}

.why-card__num {
  position: relative; z-index: 2;
  align-self: flex-start;
  padding: .4375rem .9375rem;
  border-radius: var(--r-full);
  background: var(--ink); color: var(--off-white);
  font-size: var(--fs-xs); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
.why-card__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .625rem; }
.why-card__title {
  font-size: clamp(1.3rem, 1.75vw, 1.6rem);
  font-weight: 500; line-height: 1.14; letter-spacing: -.032em;
  transition: color .5s var(--ease);
}
.why-card__desc { font-size: var(--fs-sm); color: var(--muted); transition: color .5s var(--ease); }

/* ---- hover state: the photograph ---- */
.why-card__media {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0;
  transition: opacity .55s var(--ease);
  pointer-events: none;
}
.why-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.2s var(--ease);
}
.why-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,8,.45) 0%, rgba(8,8,8,.14) 30%, rgba(8,8,8,.72) 62%, rgba(8,8,8,.9) 100%);
}

@media (hover: hover) {
  .why-card:hover {
    background: var(--ink);
    border-color: transparent;
    box-shadow: 0 24px 48px -32px rgba(8,8,8,.45);
  }
  .why-card:hover .why-card__media { opacity: 1; }
  .why-card:hover .why-card__media img { transform: scale(1); }
  .why-card:hover .why-card__title { color: var(--off-white); }
  .why-card:hover .why-card__desc { color: var(--white-70); }
}

/* Keyboard parity: a focused card shows the same state */
.why-card:focus-within {
  background: var(--ink);
  border-color: transparent;
}
.why-card:focus-within .why-card__media { opacity: 1; }
.why-card:focus-within .why-card__title { color: var(--off-white); }
.why-card:focus-within .why-card__desc { color: var(--white-70); }

/* Touch devices get no hover, so the image would never be seen - show it. */
@media (hover: none) {
  .why-card { background: var(--ink); border-color: transparent; }
  .why-card__media { opacity: 1; }
  .why-card__media img { transform: scale(1); }
  .why-card__title { color: var(--off-white); }
  .why-card__desc { color: var(--white-70); }
}

/* ---------- 13. CTA ---------- */
/* A tall, centred block over a full-bleed photograph. The image sits at full
   strength at the top and is washed down into the ink colour at the bottom,
   so the section hands over to the next one without a hard seam. */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  min-height: clamp(34rem, 56vw, 46rem);
  display: flex; align-items: center;
  padding-block: clamp(5rem, 10vw, 9rem);
}
.cta__media { position: absolute; inset: 0; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.cta__overlay {
  position: absolute; inset: 0;
  background:
    /* a soft wash behind the copy so the type never fights the tile pattern */
    radial-gradient(64% 58% at 50% 52%, rgba(5,6,8,.62) 0%, rgba(5,6,8,0) 100%),
    linear-gradient(360deg, var(--ink) 0%, rgba(5,6,8,.82) 42%, rgba(8,8,8,.42) 74%, rgba(8,8,8,.5) 100%);
}
.cta__inner { position: relative; z-index: 2; }

.cta__stack {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0;
  max-width: 46rem; margin-inline: auto;
}
.cta__stack .eyebrow { margin-bottom: clamp(.75rem, 1.4vw, 1.125rem); }
.cta__title {
  color: var(--off-white);
  max-width: 20ch;
  text-wrap: balance;
  margin-bottom: clamp(1.125rem, 2vw, 1.75rem);
}
.cta__copy {
  font-size: var(--fs-lead);
  line-height: var(--lh-15);
  color: rgba(244,242,237,.82);
  max-width: 40rem;
}
.cta__buttons {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .75rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* ---------- 14. PROCESS ---------- */
/* Two columns: a sticky heading + CTA on the left, the four steps stacked on
   the right. The left column stays with the reader for the length of the
   section, so the CTA is in reach at every step. */
.process__layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.process__aside { position: relative; align-self: stretch; }
.process__sticky {
  position: sticky;
  /* clears the fixed header, then a little breathing room */
  top: calc(var(--header-h) + clamp(1.5rem, 4vw, 3.5rem));
  display: flex; flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}
.process__action { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.process__note { font-size: var(--fs-sm); color: var(--muted); max-width: 34ch; }

.process__steps {
  list-style: none;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--black-14);
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: start;
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  min-height: clamp(9rem, 13vw, 12rem);
  border-bottom: 1px solid var(--black-14);
}
.step__body { display: flex; flex-direction: column; gap: .625rem; }
.step__num {
  display: flex; align-items: baseline; gap: .125rem;
  font-size: var(--fs-num); font-weight: 700;
  line-height: .9; letter-spacing: -.05em; color: var(--ink);
  min-width: 3.5ch;
}
.step__num i { font-style: normal; color: var(--gold); }
.step h3 {
  font-size: var(--fs-body); font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.3;
}
.step p { font-size: var(--fs-sm); color: var(--muted); max-width: 54ch; }

/* a short gold tick draws itself along the divider as each step arrives,
   so the accent marks the step without turning every rule gold */
.step::after {
  content: ''; position: absolute; left: 0; top: -1px;
  width: 0; height: 2px; background: var(--gold);
  transition: width .6s var(--ease);
}
.step.is-visible::after { width: clamp(2.75rem, 6vw, 4.5rem); }

/* ---------- 15. REVIEWS ---------- */
/* Google's own review-card shape: white card, avatar chip, name, date, the
   G mark top-right, a five-star row and the quote. The cards currently ship
   as empty stubs - see the comment above the section in index.html. */
.reviews__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
}

.gsummary {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1rem, 1.8vw, 1.375rem) clamp(1.125rem, 2vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
}
.gsummary__logo { width: 1.75rem; height: 1.75rem; flex: none; }
.gsummary__body { display: flex; flex-direction: column; gap: .1875rem; }
.gsummary__score { display: flex; align-items: center; gap: .625rem; }
.gsummary__value {
  font-size: 1.5rem; font-weight: 500; line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.gsummary__stars { display: flex; gap: .125rem; color: #fbbc05; }
.gsummary__stars svg { width: .9375rem; height: .9375rem; }
.gsummary__meta { font-size: var(--fs-xs); color: var(--muted-2); }
.gsummary__link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 1px solid var(--line-light);
  transition: color var(--t-base);
}
.gsummary__link svg { width: 1rem; height: .8rem; transition: transform var(--t-base); }
.gsummary__link:hover { color: var(--gold-deep); }
.gsummary__link:hover svg { transform: translateX(4px); }

.greviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.875rem, 1.4vw, 1.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.gcard {
  display: flex; flex-direction: column; gap: .875rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
}
.gcard__head { display: flex; align-items: center; gap: .75rem; }
.gcard__avatar {
  width: 2.5rem; height: 2.5rem; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--warm-gray);
  color: var(--ink);
  font-size: var(--fs-sm); font-weight: 500;
}
/* the reviewer's own Google profile picture, already masked to a circle */
.gcard__avatar--photo { background: none; }
.gcard__avatar--photo img { width: 100%; height: 100%; object-fit: cover; }
.gcard__who { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.gcard__name { font-size: var(--fs-sm); font-weight: 500; }
.gcard__meta { font-size: var(--fs-xs); color: var(--muted-2); }
.gcard__g { width: 1.125rem; height: 1.125rem; flex: none; margin-left: auto; align-self: flex-start; }
/* stars and the date share a line, the way Google sets them */
.gcard__rating { display: flex; align-items: center; gap: .625rem; }
.gcard__stars { display: flex; gap: .125rem; color: #fbbc05; }
.gcard__stars svg { width: 1rem; height: 1rem; }
.gcard__date { font-size: var(--fs-xs); color: var(--muted-2); }
.gcard__text { font-size: var(--fs-sm); line-height: var(--lh-15); color: var(--muted); }

/* --- placeholder treatment --- */
.gcard--placeholder .gcard__avatar { color: var(--muted-2); }
.gcard--placeholder .gcard__name,
.gcard--placeholder .gcard__meta { color: var(--muted-2); }
.gcard--placeholder .gcard__stars { color: var(--black-14); }
/* capped, so the stub does not read as one huge loading block when it
   spans both columns at the tablet breakpoint */
.gcard__lines { display: flex; flex-direction: column; gap: .5rem; max-width: 30rem; }
.gcard__lines span {
  display: block; height: .5rem; border-radius: var(--r-full);
  background: var(--black-14);
}
.gcard__lines span:nth-child(2) { width: 92%; }
.gcard__lines span:nth-child(3) { width: 64%; }
.gcard__stub { font-size: var(--fs-xs); color: var(--muted-2); max-width: 44ch; }

.google-mark { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); font-weight: 500; }
.google-mark svg { width: 1.125rem; height: 1.125rem; flex: none; }

/* ---------- 16. FAQ ---------- */
.faq__grid {
  display: grid; grid-template-columns: 4fr 7fr;
  gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}
.faq__aside { position: sticky; top: 7.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.faq__list { border-top: 1px solid var(--black-14); }
.faq__item { border-bottom: 1px solid var(--black-14); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.375rem 0;
  text-align: left;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 500; letter-spacing: -.018em; line-height: 1.35;
  color: var(--ink);
  transition: color var(--t-fast);
}
.faq__q:hover { color: var(--gold-deep); }
.faq__toggle {
  flex: none; width: 1.875rem; height: 1.875rem;
  border-radius: var(--r-full);
  background: var(--warm-gray); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background-color var(--t-base), color var(--t-base), transform var(--t-base);
}
.faq__toggle::before, .faq__toggle::after {
  content: ''; position: absolute;
  background: currentColor; border-radius: 1px;
  transition: transform var(--t-base), opacity var(--t-base);
}
.faq__toggle::before { width: .625rem; height: 1.5px; }
.faq__toggle::after  { width: 1.5px; height: .625rem; }
.faq__q[aria-expanded="true"] .faq__toggle { background: var(--gold); color: var(--black); }
.faq__q[aria-expanded="true"] .faq__toggle::after { transform: scaleY(0); opacity: 0; }

.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding-bottom: 1.5rem; padding-right: clamp(0rem, 6vw, 4rem);
  font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-16);
}

/* ---------- 17. FOOTER ---------- */
.footer { background: var(--ink); color: var(--off-white); }
.footer__top {
  display: grid; grid-template-columns: 1fr 1.75fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  padding-block: var(--sec) clamp(2.5rem, 4vw, 3.5rem);
}
.footer__brand { display: flex; flex-direction: column; gap: 1.5rem; max-width: 24rem; }
.footer__brand img { width: 11.25rem; height: auto; }
.footer__tag {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 500; letter-spacing: -.028em; text-transform: uppercase;
  line-height: 1.25;
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: .5rem; row-gap: 0;
}
.footer__tag .bolt { width: .875rem; height: .875rem; color: var(--gold); flex: none; }
.footer__license {
  font-size: var(--fs-xs); color: var(--white-70);
  padding: .75rem 0 0; border-top: 1px solid var(--white-10);
}
.footer__license b { color: var(--off-white); font-weight: 500; }

.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.footer__col h3 {
  font-size: var(--fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--white-50); margin-bottom: 1.125rem;
}
.footer__col li + li { margin-top: .75rem; }
.footer__col a, .footer__col span { font-size: var(--fs-sm); color: var(--white-70); transition: color var(--t-fast); }
.footer__col a:hover { color: var(--gold); }
.footer__col address { font-style: normal; font-size: var(--fs-sm); color: var(--white-70); line-height: var(--lh-15); }

.footer__map {
  border-top: 1px solid var(--white-10);
  border-bottom: 1px solid var(--white-10);
}
.footer__map iframe {
  display: block; width: 100%; height: 17rem; border: 0;
  filter: grayscale(1) invert(.92) contrast(.86);
}

.footer__social { display: flex; gap: .625rem; }
.footer__social a {
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--white-14); border-radius: var(--r-sm);
  color: var(--white-70);
  transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base);
}
.footer__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }
.footer__social svg { width: 1.0625rem; height: 1.0625rem; }

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.75rem;
}
.footer__bottom p, .footer__bottom a { font-size: var(--fs-xs); color: var(--white-50); }
.footer__bottom a:hover { color: var(--gold); }
.footer__legal { display: flex; gap: 1.25rem; }

/* ---------- 18. MODAL + FORM ---------- */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0rem, 4vw, 2rem);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(8,8,8,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal__panel {
  position: relative;
  width: 100%; max-width: 41rem;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  background: var(--off-white);
  border-radius: var(--r-md);
  transform: translateY(20px) scale(.985);
  transition: transform .4s var(--ease);
}
.modal.is-open .modal__panel { transform: none; }

.modal__head {
  position: relative;
  padding: clamp(1.75rem, 3.4vw, 2.5rem) clamp(1.25rem, 3.4vw, 2.5rem) 1.25rem;
  border-bottom: 1px solid var(--line-light);
}
.modal__head .eyebrow { margin-bottom: .625rem; }
.modal__close {
  position: absolute; top: 1.125rem; right: 1.125rem;
  width: 2.375rem; height: 2.375rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-light); border-radius: var(--r-full);
  transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base);
}
.modal__close svg { width: .875rem; height: .875rem; }
.modal__close:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

.modal__body { padding: clamp(1.5rem, 3.4vw, 2.5rem) clamp(1.25rem, 3.4vw, 2.5rem) clamp(1.75rem, 3.4vw, 2.5rem); }

.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; }
.field { display: flex; flex-direction: column; gap: .4375rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-xs); font-weight: 500; color: var(--ink); }
.field label .req { color: var(--gold-deep); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .8125rem .875rem;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  background-size: .75rem;
  padding-right: 2.25rem;
}
.field input::placeholder, .field textarea::placeholder { color: #9a968e; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(252,174,18,.22);
}
.field__hint { font-size: var(--fs-xs); color: var(--muted-2); }
.field__error { font-size: var(--fs-xs); color: #b3261e; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #b3261e; }
.field.has-error .field__error { display: flex; align-items: center; gap: .3125rem; }
.field__error svg { width: .8125rem; height: .8125rem; flex: none; }

.consent { display: flex; gap: .75rem; align-items: flex-start; margin-top: 1.25rem; }
.consent input[type="checkbox"] {
  appearance: none; flex: none;
  width: 1.125rem; height: 1.125rem; margin-top: .125rem;
  border: 1px solid var(--muted-2); border-radius: 3px;
  background: var(--white);
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.consent input[type="checkbox"]:checked {
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' stroke='%23080808' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/.6875rem no-repeat;
  border-color: var(--gold);
}
.consent label { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.consent a { text-decoration: underline; text-underline-offset: 2px; }
.consent.has-error input[type="checkbox"] { border-color: #b3261e; }

.form__submit { margin-top: 1.5rem; }
.form__alt {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--line-light);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: var(--fs-xs); color: var(--muted);
}
.form__alt a { font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.form-state { display: none; text-align: left; }
.form-state.is-shown { display: block; }
.form-state__icon {
  width: 3rem; height: 3rem; border-radius: var(--r-full);
  background: var(--gold); color: var(--black);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}
.form-state__icon svg { width: 1.375rem; height: 1.375rem; }
.form-state h3 { margin-bottom: .625rem; }
.form-state p { color: var(--muted); font-size: var(--fs-sm); }
.form-state .btn-row { margin-top: 1.5rem; }

.btn[data-loading="true"] { pointer-events: none; opacity: .65; }

/* ---------- 19. CONVERSION UI ---------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 880;
  display: none;
  background: var(--ink);
  border-top: 1px solid var(--white-14);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-cta__inner { display: grid; grid-template-columns: 1fr 1fr; }
.mobile-cta a, .mobile-cta button {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  height: 3.75rem;
  font-size: var(--fs-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.mobile-cta__call { color: var(--off-white); border-right: 1px solid var(--white-14); }
.mobile-cta__call svg { width: 1rem; height: 1rem; color: var(--gold); }
.mobile-cta__est { background: var(--gold); color: var(--black); }
.mobile-cta__est svg { width: .6875rem; height: .6875rem; }

.float-cta {
  position: fixed; right: 1.75rem; bottom: 1.75rem; z-index: 870;
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .625rem .625rem .625rem 1.125rem;
  background: var(--ink); color: var(--white);
  border: 1px solid var(--white-14);
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 500;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), background-color var(--t-base);
}
.float-cta.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.float-cta:hover { background: var(--black); }
.float-cta__icon {
  width: 2.125rem; height: 2.125rem; flex: none;
  border-radius: var(--r-full);
  background: var(--gold); color: var(--black);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t-base);
}
.float-cta:hover .float-cta__icon { transform: scale(1.06); }
.float-cta__icon svg { width: .75rem; height: .75rem; }

/* ---------- 20. REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms);
}

/* ---------- 20b. HOVER POLISH ----------
   One easing curve and one duration family for every interactive surface, so
   hovers settle instead of snapping. Motion stays on transform and opacity. */
:root { --t-hover: .45s cubic-bezier(.22, .61, .36, 1); }

a, button, .pcard, .trust__item, .why-card, .svc-row { -webkit-tap-highlight-color: transparent; }

/* Buttons: colour fade plus a small physical lift */
.btn {
  transition: background-color var(--t-hover), color var(--t-hover),
              border-color var(--t-hover), transform .28s var(--ease),
              box-shadow var(--t-hover);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(8,8,8,.55); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn--glass:hover { box-shadow: 0 14px 30px -18px rgba(252,174,18,.7); }

/* Navigation */
.nav__link { transition: color var(--t-hover); }
.header__phone { transition: color var(--t-hover), transform .3s var(--ease); }
.header__phone:hover { transform: translateY(-1px); }
.brand img { transition: opacity var(--t-hover); }
.brand:hover img { opacity: .82; }
.burger span, .burger span::before, .burger span::after { transition: transform var(--t-hover), background-color var(--t-hover), top var(--t-hover); }

.mobile-menu__link { transition: color var(--t-hover); }
.mobile-menu__link:hover { color: var(--gold); }
.mobile-menu__contact a { display: inline-block; transition: color var(--t-hover), transform .3s var(--ease); }
.mobile-menu__contact a:hover { transform: translateX(3px); }

/* Hero slider dots */
.hero-slider__dot { transition: background-color var(--t-hover), transform .3s var(--ease); }
.hero-slider__dot:hover { background: var(--white-70); transform: scaleY(2); }

/* Trust bar */
.trust__item { transition: background-color var(--t-hover); }
.trust__icon { transition: color var(--t-hover), transform .45s var(--ease); }
.trust__item:hover .trust__icon { color: var(--gold); transform: translateY(-3px); }
.trust__title { transition: color var(--t-hover); }

/* Project cards */
.pcard__media img { transition: transform 1.1s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.06); }
.pcard__title, .pcard__tag { transition: color var(--t-hover); }
.pcard:hover .pcard__title { color: var(--gold); }
.pcard__index { transition: transform .45s var(--ease); }
.pcard:hover .pcard__index { transform: translateY(-2px); }
.carousel-btn { transition: background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover), transform .3s var(--ease); }
.carousel-btn:hover:not(:disabled) { transform: translateY(-2px); }

/* FAQ */
.faq__q { transition: color var(--t-hover); }
.faq__q:hover .faq__toggle { border-color: var(--gold); color: var(--gold-deep); }

/* Footer */
.footer__col a { display: inline-block; transition: color var(--t-hover), transform .3s var(--ease); }
.footer__col a:hover { transform: translateX(3px); }
.footer__bottom a { transition: color var(--t-hover); }
.footer__social a { transition: background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover), transform .3s var(--ease); }
.footer__social a:hover { transform: translateY(-2px); }

/* Floating conversion UI */
.float-cta { transition: background-color var(--t-hover), color var(--t-hover), transform .3s var(--ease), box-shadow var(--t-hover); }
.float-cta:hover { transform: translateY(-3px); }
.mobile-cta__call, .mobile-cta__est { transition: background-color var(--t-hover), color var(--t-hover); }

/* Links inside long-form copy (privacy page, consent text) */
.link-arrow { transition: border-color var(--t-hover), color var(--t-hover), transform .3s var(--ease); }
.link-arrow:hover { transform: translateY(-1px); }

/* ---------- 21. RESPONSIVE ---------- */
@media (max-width: 1200px) {
  .hero__content { grid-template-columns: minmax(0, 1fr) 22rem; }
  .svc-layout { gap: clamp(1.75rem, 3.5vw, 3rem); }
}

@media (max-width: 991px) {
  :root { --header-h: 4.5rem; }
  html { scroll-padding-top: 5.5rem; }

  .nav, .header__phone { display: none; }
  .burger { display: flex; }
  .header__actions .btn--primary { display: none; }

  .hero { height: auto; min-height: 0; max-height: none; padding-top: calc(var(--header-h) + 2.5rem); }
  .hero__content { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__left { max-width: 34rem; }
  .hero__card { max-width: 30rem; }
  .hero__top { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .hero__area { text-align: left; max-width: none; }

  .trust__grid { grid-template-columns: 1fr 1fr; }
  .trust__item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .trust__item:nth-child(even) { padding-left: clamp(1rem, 3vw, 2rem); border-left: 1px solid var(--line-light); }
  .trust__item:nth-child(n+3) { border-top: 1px solid var(--line-light); }

  .faq__grid { grid-template-columns: 1fr; }
  .reviews__head { grid-template-columns: 1fr; align-items: start; }
  .greviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .greviews .gcard:last-child { grid-column: 1 / -1; }
  /* two columns: the staircase restarts on each row, so it stays a two-tread
     step rather than descending four treads down the page */
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); --step: clamp(1.25rem, 3vw, 2.25rem); }
  .why-card { min-height: 16rem; }
  .why-card:nth-child(odd)  { --stair: translateY(0); }
  .why-card:nth-child(even) { --stair: translateY(var(--step)); }
  .faq__aside { position: static; }

  /* No pinning on tablet and below: the list becomes a plain tap accordion */
  .svc-scroll { height: auto; margin-top: clamp(2rem, 5vw, 3rem); }
  .svc-steps { display: none; }
  .svc-sticky { position: static; }
  .svc-layout { grid-template-columns: 1fr; gap: 1.75rem; align-items: start; }
  .svc-media { aspect-ratio: 16 / 11; }
  .cta { min-height: 0; padding-block: clamp(4rem, 12vw, 6rem); }
  .cta__overlay { background: linear-gradient(360deg, var(--ink) 0%, rgba(5,6,8,.85) 46%, rgba(8,8,8,.52) 100%); }

  /* the sticky column unsticks and the steps stack beneath it */
  .process__layout { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); }
  .process__sticky { position: static; }
  .process__note { max-width: none; }

  .footer__top { grid-template-columns: 1fr; }
  .footer__brand { max-width: none; }
}

@media (max-width: 767px) {
  :root { --mobile-bar-h: 3.75rem; }
  .mobile-cta { display: block; }
  .float-cta { display: none; }

  .hero__card { max-width: none; }
  .hero-slider__slide img { height: 14rem; }

  .trust__grid { grid-template-columns: 1fr; }
  .trust__item, .trust__item + .trust__item {
    padding: 1.375rem 0; padding-left: 0;
    border-left: 0; border-top: 1px solid var(--line-light);
  }
  .trust__item:first-child { border-top: 0; }
  .trust__item { flex-direction: row; align-items: flex-start; gap: .875rem; }
  .trust__icon { margin-top: .125rem; }

  .svc-media { aspect-ratio: 4 / 3; }
  .svc-foot { flex-direction: column; align-items: flex-start; }
  .svc-foot .btn { width: 100%; }

  .greviews, .greviews .gcard:last-child { grid-template-columns: 1fr; grid-column: auto; }
  .gsummary { flex-wrap: wrap; }
  .gsummary__link { padding-left: 0; border-left: 0; }

  /* single column: no staircase to level, the cards just stack */
  .why-grid { grid-template-columns: 1fr; gap: 1rem; --step: 0px; }
  .why-card, .why-card:nth-child(odd), .why-card:nth-child(even) {
    --stair: none; min-height: 15rem;
  }

  .step { grid-template-columns: 1fr; gap: .875rem; padding: 1.5rem 0; }

  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__col:last-child { grid-column: 1 / -1; }
  .footer__map iframe { height: 14rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .form__grid { grid-template-columns: 1fr; }
  .modal { padding: 0; align-items: flex-end; }
  .modal__panel {
    max-width: none; max-height: 94dvh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%);
  }
  .projects__cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 479px) {
  :root { --gutter: 1.125rem; }
  .hero .btn-row, .projects__cta .btn { width: 100%; }
  .hero .btn-row .btn { width: 100%; }
  .process__action { align-items: stretch; width: 100%; }
  .process__action .btn { width: 100%; }
  .cta__buttons { flex-direction: column; align-items: stretch; width: 100%; }
  .cta__buttons .btn { width: 100%; }
  .projects__cta .btn { justify-content: center; }
  .brand img { height: 2.125rem; }
  .pcard { width: min(76vw, 18rem); }
  .footer__cols { grid-template-columns: 1fr; }
  .btn { padding: .75rem 1.25rem; }
}

/* ---------- 21b. MOBILE REFINEMENTS (<= 767px) ----------
   Everything in this block is phone-only. It is deliberately placed after the
   earlier breakpoints so it wins on source order without touching desktop. */

/* Slider dots are a mobile-only control, so they start hidden everywhere. */
.slider-dots { display: none; }
.slider-dots__dot {
  width: 2rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
}
.slider-dots__dot::after {
  content: ''; display: block; width: 100%; height: .1875rem;
  border-radius: var(--r-full); background: var(--black-14);
  transition: background-color var(--t-base);
}
.slider-dots__dot.is-active::after { background: var(--gold-deep); }

/* The modal is hidden for real when closed, so it never traps focus or
   sits in the layout while invisible. */
.modal[hidden] { display: none; }

@media (max-width: 767px) {

  /* --- 1. Modal: the exit is choreographed, not cut off ---
     The panel slides down while the backdrop fades on the same timing, and
     the scroll lock is released only once both have finished (see main.js).
     Enter is expressive, exit is even: the backdrop has to hold until the
     sheet has actually left the screen, so the exit uses a symmetric curve
     instead of the front-loaded one used on the way in. */
  .modal { transition: opacity .36s cubic-bezier(.4, 0, .2, 1), visibility .36s; }
  .modal.is-open { transition: opacity .34s var(--ease), visibility .34s; }
  .modal__panel {
    transition: transform .38s cubic-bezier(.4, 0, .2, 1);
    overscroll-behavior: contain;
  }
  .modal.is-open .modal__panel { transition: transform .46s cubic-bezier(.32, .72, 0, 1); }

  /* --- 2. Hero: the phone gets its own portrait crop of the master bath
     (see the media sources in index.html). Framed a little right of centre
     so the lit shower niches and the tile wall survive the crop, with a
     left wash carrying the copy, which is left-aligned. --- */
  .hero__media img { object-position: 62% 38%; }
  .hero__scrim {
    background:
      linear-gradient(90deg,
        rgba(5,6,7,.50) 0%,
        rgba(5,6,7,.14) 58%,
        rgba(5,6,7,0) 100%),
      linear-gradient(180deg,
        rgba(6,7,9,.74) 0%,
        rgba(6,7,9,.44) 18%,
        rgba(5,6,7,.50) 36%,
        rgba(5,6,7,.68) 58%,
        rgba(5,6,7,.88) 78%,
        var(--ink) 97%);
  }

  /* --- 3. Credentials: icon and title on the left, detail hard right --- */
  .trust__item,
  .trust__item + .trust__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 9rem);
    align-items: center;
    column-gap: .875rem;
    row-gap: 0;
  }
  .trust__icon { margin-top: 0; }
  .trust__title { font-size: .9375rem; }
  .trust__meta { text-align: right; }

  /* --- 4. Reviews become a swipeable, snapping track --- */
  .reviews .greviews {
    display: flex;
    grid-template-columns: none;
    gap: .75rem;
    margin-top: clamp(1.75rem, 6vw, 2.5rem);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .reviews .greviews::-webkit-scrollbar { display: none; }
  .reviews .greviews .gcard {
    flex: 0 0 min(86%, 21rem);
    scroll-snap-align: start;
  }
  /* Cards 2 and 3 start off to the side, where the scroll reveal observer
     never sees them, so they opt out of the reveal and are simply present. */
  .reviews .greviews .gcard.reveal { opacity: 1; transform: none; }
  .reviews .slider-dots {
    display: flex; justify-content: center; gap: .5rem;
    margin-top: .5rem;
  }

  /* --- 5. How it works: the CTA closes the block instead of splitting it --- */
  .process__layout { display: flex; flex-direction: column; }
  .process__aside, .process__sticky { display: contents; }
  .process .sec-head { order: 1; }
  .process__steps { order: 2; }
  .process__action { order: 3; width: 100%; }
  .process__action .btn { width: 100%; }
  .process__note { text-align: left; }

  /* --- 6. Footer centres on a phone --- */
  .footer__top { justify-items: center; text-align: center; }
  .footer__brand { align-items: center; }
  .footer__tag { justify-content: center; }
  .footer__license { width: 100%; }
  .footer__social { justify-content: center; }
  .footer__cols { justify-items: center; text-align: center; }
  .footer__col { width: 100%; }
  .footer__col address { text-align: center; }
  .footer__bottom {
    flex-direction: column; align-items: center;
    justify-content: center; text-align: center;
  }
  .footer__legal { justify-content: center; }
}

/* ---------- 21c. PRELOADER ----------
   CHARGE -> SPEED -> REVEAL. Two copies of the one supplied logo, alpha-masked
   into the gold bolt and the white wordmark, each wiped in on its own
   directional clip. The logo art is never redrawn, recoloured or stretched:
   bolt mask + word mask recombine to exactly the original file.

   The whole block is inert unless the boot script in <head> puts .pl-on on
   <html>, so no-JS and repeat visits in the same session get the site
   immediately with nothing to skip. */

.preloader { display: none; }

.pl-on .preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--black);
  /* Top edge leads, following the angle the logo bolt travels. */
  clip-path: polygon(0% 0%, 114% 0%, 114% 100%, -14% 100%);
  will-change: clip-path;
}

/* Scroll is locked from paint one, and released by dropping .pl-on. Paired
   with scrollbar-gutter on <html>, nothing moves when it goes or comes back. */
.pl-on, .pl-on body { overflow: hidden; }

/* The one background detail: a faint structural grid, nothing more. */
.preloader__grid {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .03;
  background-image:
    repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 8.5vw),
    repeating-linear-gradient(0deg,  #fff 0 1px, transparent 1px 8.5vw);
}

.preloader__stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1.5rem, 3.4vw, 2.5rem);
  padding-inline: var(--gutter);
}

/* --- the logo --- */
.preloader__logo {
  position: relative;
  width: clamp(11.875rem, 56vw, 15rem);   /* 190-240px on a phone */
  aspect-ratio: 1120 / 522;               /* the supplied artwork, never stretched */
}

.preloader__layer {
  position: absolute; inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url('../logo/speedy-logo-1120.png');
  background-image: image-set(
    url('../logo/speedy-logo-1120.webp') type('image/webp'),
    url('../logo/speedy-logo-1120.png')  type('image/png'));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
  -webkit-mask-position: center;  mask-position: center;
  will-change: clip-path, transform, opacity;
}
.preloader__layer--bolt {
  -webkit-mask-image: url('../logo/speedy-mask-bolt.png');
          mask-image: url('../logo/speedy-mask-bolt.png');
  clip-path: polygon(-20% 0%, -6% 0%, -18% 100%, -20% 100%);
}
.preloader__layer--word {
  -webkit-mask-image: url('../logo/speedy-mask-word.png');
          mask-image: url('../logo/speedy-mask-word.png');
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transform: translateX(-20px);
}

/* The trail that rides the bolt wipe. Peaks at 18% - a hint of travel, not a glow. */
.preloader__trail {
  position: absolute; top: -7%; bottom: -7%;
  left: 0; width: 100%;
  pointer-events: none; opacity: 0;
  /* Peaks just short of the element edge and returns to zero at it, so the
     leading edge reads as a front rather than as the side of a rectangle. */
  background: linear-gradient(90deg,
    rgba(252,174,18,0) 58%, rgba(252,174,18,.05) 78%,
    rgba(252,174,18,.17) 93%, rgba(252,174,18,.09) 98%,
    rgba(252,174,18,0) 100%);
  /* Without this the trail is a rectangle and you can see its corners. */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  transform: translateX(-100%);
  will-change: transform, opacity;
}

/* The one signature moment: a gold line crossing the mark at speed. */
.preloader__accent {
  position: absolute; left: 0; top: 50%;
  width: 24vw; height: 2px;
  pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(252,174,18,0), rgba(252,174,18,.30) 64%, var(--gold-light) 100%);
  transform: translateX(-26vw);
  will-change: transform, opacity;
}

/* --- stage 01 impulse: one thin gold trace --- */
.preloader__trace {
  position: absolute; left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(252,174,18,0), var(--gold) 46%, rgba(252,174,18,.25));
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* --- stage 05 brand statement --- */
.preloader__tagline {
  margin: 0;
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: rgba(255,255,255,.6);
  opacity: 0;
  transform: translateY(6px);
  will-change: transform, opacity;
}

/* --- real loading readout, editorial corner placement --- */
.preloader__count {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.75rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.17);
  opacity: 0;
  will-change: opacity;
}

/* --- stage 06 exit: the gold line that opens the page --- */
.preloader__strike {
  position: absolute;
  top: -30%; bottom: -30%;
  left: 0; width: 3px;
  background: linear-gradient(180deg, rgba(252,174,18,0), var(--gold) 14%, var(--gold-light) 50%, var(--gold) 86%, rgba(252,174,18,0));
  transform: translateX(-20vw) rotate(var(--strike-angle, 0deg));
  opacity: 0;
  will-change: transform, opacity;
}
.preloader__strike::before {
  content: '';
  position: absolute; top: 0; bottom: 0; right: 100%;
  width: 20vw;
  background: linear-gradient(90deg, rgba(252,174,18,0), rgba(252,174,18,.15));
}

@media (min-width: 768px) {
  .preloader__logo { width: clamp(17.5rem, 26vw, 23.75rem); }  /* 280-380px */
  .preloader__tagline { font-size: .75rem; letter-spacing: .22em; }
}

/* --- hero and chrome hold their entrance while the preloader is up --- */
.pl-on .header,
.pl-on .hero__top,
.pl-on .hero__title,
.pl-on .hero__copy,
.pl-on .hero .btn-row,
.pl-on .hero__card,
.pl-on .mobile-cta { opacity: 0; }
/* .float-cta is deliberately absent: it is opacity 0 until its own scroll
   logic shows it, and pinning it visible here would strand it on screen. */

/* Reduced motion: the logo, a beat, a fade. No wipes, no strike. */
@media (prefers-reduced-motion: reduce) {
  .pl-on .preloader { clip-path: none; transition: opacity .25s linear; }
  .preloader__grid, .preloader__trace, .preloader__trail,
  .preloader__accent, .preloader__strike { display: none; }
  .preloader__layer--bolt { clip-path: none; }
  .preloader__layer--word { clip-path: none; opacity: 1; transform: none; }
  .preloader__tagline { opacity: 1; transform: none; }
  .pl-on .header,
  .pl-on .hero__top,
  .pl-on .hero__title,
  .pl-on .hero__copy,
  .pl-on .hero .btn-row,
  .pl-on .hero__card,
  .pl-on .mobile-cta { opacity: 1; }
}

/* ---------- 22. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .carousel-btn:hover, .float-cta:hover, .footer__social a:hover,
  .footer__col a:hover, .mobile-menu__contact a:hover, .header__phone:hover,
  .trust__item:hover .trust__icon, .pcard:hover .pcard__media img,
  .why-card:hover .why-card__media img, .svc__pills li:hover { transform: none; }
  .why-card, .why-card.is-aligned { transform: none !important; }
  .mobile-menu.is-open .mobile-menu__link { opacity: 1; transform: none; }
  .step::after { width: clamp(2.75rem, 6vw, 4.5rem); }
}

/* ---------- 23. PRINT ---------- */
@media print {
  .header, .mobile-cta, .float-cta, .modal, .mobile-menu, .hero__media, .cta__media { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
  .section { padding-block: 1.5rem; }
}

/* ---------- 24. UTILITIES ---------- */
/* Desktop-only break: keeps the hero subhead on two lines without forcing an
   awkward wrap on narrow screens, where it reflows on its own. */
.br-lg { display: none; }
@media (min-width: 992px) { .br-lg { display: inline; } }

/* Intentional line breaks in the hero headline. Kept at every width so the
   headline always reads as three controlled lines instead of wrapping to four
   with an orphaned last word on small screens. */
.br-d { display: inline; }