/* ==========================================================================
   All Solutions Construction R&R · 2026 rebuild
   Order: reset · primitives · header · hero · sections · components · footer
   ========================================================================== */

/* ---------- Reset ---------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* A <picture> is a plain box with auto height, so an img inside it that asks
   for height:100% resolves to auto and object-fit never crops. Every media
   frame that relies on object-fit has to stretch the picture too. */
.hero__media picture,
.ba__layer picture,
.step__media picture,
.owner__media picture,
.svc__m picture { display: block; width: 100%; height: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-head);
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-dark :focus-visible,
.section--dark :focus-visible,
.hero :focus-visible { outline-color: var(--white); }

::selection { background: var(--brand-red); color: var(--white); }

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

.skip {
  position: absolute; left: var(--s-4); top: -100px;
  background: var(--ink); color: var(--white);
  padding: var(--s-3) var(--s-5); z-index: 200;
  font-weight: 700; text-decoration: none;
  transition: top var(--t-fast) var(--ease-out);
}
.skip:focus { top: var(--s-4); }

/* ---------- Layout primitives ---------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--alt  { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: var(--text-on-dark); }
.section--dark p { color: var(--text-on-dark-2); }
.section--tight { padding-block: clamp(52px, 6vw, 92px); }

/* Anchor jumps must clear the sticky bar. */
main section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---------- Type primitives ------------------------------------------ */

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent-type);
}
.eyebrow--on-dark { color: var(--white); opacity: .74; }
.eyebrow--on-hero { color: var(--white); opacity: .9; }

.rule-accent {
  width: 44px; height: 3px;
  background: var(--accent);
  border: 0; margin: var(--s-4) 0 var(--s-5);
}
.section--dark .rule-accent,
.hero .rule-accent { background: var(--accent); }

.section-head { max-width: 62ch; margin-bottom: var(--s-8); }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p {
  margin-top: var(--s-5);
  font-size: var(--fs-lead);
  color: var(--text-body);
  max-width: 56ch;
}
.section--dark .section-head p { color: var(--text-on-dark-2); }

.section-head--split {
  max-width: none; display: grid; gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: end; gap: var(--s-10);
  }
  .section-head--split p { margin-top: 0; padding-bottom: .35em; }
}

.lead { font-size: var(--fs-lead); color: var(--text-body); }

/* ---------- Buttons --------------------------------------------------- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 17px var(--s-6);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bg); border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-h4); font-weight: 700;
  letter-spacing: -0.01em; text-decoration: none;
  cursor: pointer; min-height: 56px;
  transition: background var(--t-press) var(--ease-out),
              border-color var(--t-press) var(--ease-out),
              transform var(--t-press) var(--ease-press);
}
.btn:hover { --btn-bg: var(--brand-red-dark); }
.btn:active { transform: translateY(1px); }
.btn__icon { width: 20px; height: 20px; flex: none; transition: transform var(--t-press) var(--ease-out); }
.btn:hover .btn__icon { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--white); border-color: var(--ink); }

.btn--ghost-light {
  --btn-bg: rgba(10,9,12,.28); --btn-fg: var(--white);
  border-color: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--ghost-light:hover {
  --btn-bg: var(--white); --btn-fg: var(--ink);
  border-color: var(--white);
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* A quiet text link with a rule that draws on hover. */
.tlink {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700;
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 2px; background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-press) var(--ease-out);
}
.tlink:hover { background-size: 100% 6px; }

/* ---------- Header ---------------------------------------------------- */

.header {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background var(--t-slow) var(--ease-out),
              border-color var(--t-slow) var(--ease-out),
              box-shadow var(--t-slow) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.header__inner {
  width: 100%; max-width: var(--container-wide);
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--s-6);
}

.brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.brand img { width: auto; height: 58px; }
.brand__reverse { display: block; }
.brand__solid { display: none; }

/* Over the hero the header is transparent and uses the reverse-out logo.
   Once scrolled past it turns solid bone with the full-colour logo. */
.header.is-solid {
  background: rgba(250,249,247,.94);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--hairline);
}
.header.is-solid .brand__reverse { display: none; }
.header.is-solid .brand__solid { display: block; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.nav__list a {
  font-family: var(--font-display);
  font-weight: 600; font-size: 0.9375rem;
  letter-spacing: -0.005em; text-decoration: none;
  color: var(--white);
  padding: var(--s-2) 0;
  position: relative;
  transition: color var(--t-fast) var(--ease-out);
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-press) var(--ease-out);
}
.nav__list a:hover::after, .nav__list a[aria-current="true"]::after { transform: scaleX(1); }
.header.is-solid .nav__list a { color: var(--ink); }

.header__call {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.0625rem; letter-spacing: -0.02em;
  text-decoration: none; color: var(--white);
  padding: var(--s-2) 0;
  white-space: nowrap;
}
.header__call svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.header.is-solid .header__call { color: var(--ink); }

.header__cta { display: none; }
@media (min-width: 1140px) {
  .header__cta {
    display: inline-flex; align-items: center;
    padding: 11px var(--s-5); min-height: 44px;
    background: var(--accent); color: var(--on-accent);
    border: 0; border-radius: var(--radius);
    font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
    text-decoration: none;
    transition: background var(--t-press) var(--ease-out);
  }
  .header__cta:hover { background: var(--brand-red-dark); }
}

/* ---------- Phone menu ------------------------------------------------ */

.menu-btn {
  display: none;
  margin-left: auto;
  align-items: center; gap: var(--s-2);
  min-height: 44px; padding: var(--s-2) var(--s-3);
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
  color: var(--white);
}
.menu-btn__bars { display: grid; gap: 4px; width: 20px; }
.menu-btn__bars i {
  display: block; height: 2px; background: currentColor;
  transition: transform var(--t-press) var(--ease-out), opacity var(--t-fast) linear;
}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .menu-btn__bars i { transition: none; } }
.header.is-solid .menu-btn { color: var(--ink); }

/* Sheet open: the header drops back to its dark-ground treatment whatever the
   scroll position, so a bone bar never floats over the dark sheet. */
.menu-open .header,
.menu-open .header.is-solid {
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.menu-open .header.is-solid .brand__reverse { display: block; }
.menu-open .header.is-solid .brand__solid { display: none; }
.menu-open .header.is-solid .menu-btn { color: var(--white); }

.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--ink); color: var(--white);
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + var(--s-5)) var(--gutter) var(--s-7);
}
.menu[hidden] { display: none; }
.menu__list { display: flex; flex-direction: column; flex: 1; }
.menu__list li { flex: 1; display: flex; align-items: center; border-bottom: 1px solid var(--hairline-dark); }
.menu__list li:first-child { border-top: 1px solid var(--hairline-dark); }
.menu__list a {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 7vw, 2.1rem); letter-spacing: var(--tr-tight);
  text-decoration: none; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.menu__list a span { font-family: var(--font-body); font-size: .75rem; letter-spacing: var(--tr-label); color: var(--steel-light); }
.menu__foot { padding-top: var(--s-6); display: grid; gap: var(--s-4); }
.menu__phone {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.5rem; letter-spacing: var(--tr-tight);
  text-decoration: none; display: block;
}
.menu__meta { font-size: var(--fs-small); color: var(--text-on-dark-2); }

@media (max-width: 899px) {
  .nav, .header__cta, .header__call { display: none; }
  .menu-btn { display: inline-flex; }
}

/* ---------- Hero ------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
}
/* Three layers so nothing fights over `transform`:
   .hero__media clips, -inner carries the scroll parallax, img carries the
   entrance settle and the slow push that follows it. */
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media-inner {
  position: absolute; inset: -9% 0;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  transform-origin: 50% 62%;
  animation: heroIn 2100ms var(--ease-out) both,
             heroPush 26s 2100ms var(--ease-inout) infinite alternate;
}
@keyframes heroIn   { from { transform: scale(1.20); } to { transform: scale(1.05); } }
@keyframes heroPush { from { transform: scale(1.05); } to { transform: scale(1.12); } }

/* Tablet portrait shows the photo full height, so object-position does nothing.
   Push in harder instead, anchored low, to crop the dead ceiling out. */
@media (min-width: 620px) and (max-width: 1099px) {
  .hero__media img {
    transform-origin: 50% 72%;
    animation-name: heroInTablet, heroPushTablet;
  }
  @keyframes heroInTablet   { from { transform: scale(1.34); } to { transform: scale(1.18); } }
  @keyframes heroPushTablet { from { transform: scale(1.18); } to { transform: scale(1.25); } }
}
@media (min-width: 1100px) {
  .hero__media img { object-position: 50% 58%; transform-origin: 50% 58%; }
}
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: var(--scrim-hero); }

.hero__inner {
  width: 100%; max-width: var(--container-wide);
  margin-inline: auto; padding-inline: var(--gutter);
  padding-block: clamp(104px, 15vh, 168px) clamp(56px, 8vh, 104px);
}
.hero__copy { max-width: min(100%, 47rem); }
.hero h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero);
  font-weight: 800;
  margin-top: var(--s-4);
}
.hero__sub {
  margin-top: var(--s-6);
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: rgba(255,255,255,.9);
}
.hero .btn-row { margin-top: var(--s-7); }
.hero__note {
  margin-top: var(--s-5);
  font-size: var(--fs-small);
  color: rgba(255,255,255,.74);
  display: flex; align-items: center; gap: var(--s-3);
}
.hero__note b { color: var(--white); font-weight: 700; }
.hero__note::before {
  content: ""; width: 22px; height: 2px; background: var(--accent); flex: none;
}

/* Scroll cue sits on the baseline of the hero, centred. */
.hero__cue {
  position: absolute; left: 50%; bottom: var(--s-5);
  transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-size: .6875rem; font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: rgba(255,255,255,.72); text-decoration: none;
  padding: var(--s-2);
}
.hero__cue span { display: block; }
.hero__cue i {
  display: block; width: 1px; height: 34px;
  background: linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,0));
  animation: cue 2.4s var(--ease-inout) infinite;
}
@keyframes cue { 0%,100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }
@media (prefers-reduced-motion: reduce) { .hero__cue i { animation: none; } }
@media (max-width: 899px) { .hero__cue { display: none; } }

/* Trust strip pinned to the foot of the hero. */
.hero__strip {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.18);
  background: rgba(10,9,12,.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__strip ul {
  max-width: var(--container-wide); margin-inline: auto;
  padding: var(--s-4) var(--gutter);
  display: flex; flex-wrap: nowrap; gap: clamp(18px, 3vw, 40px);
  overflow-x: auto; scrollbar-width: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.88);
}
.hero__strip ul::-webkit-scrollbar { display: none; }
.hero__strip li { display: flex; align-items: center; gap: var(--s-3); white-space: nowrap; flex: none; }
.hero__strip li::before {
  content: ""; width: 5px; height: 5px; background: var(--accent);
  border-radius: 50%; flex: none;
}

/* ---------- Statement band ------------------------------------------- */

.statement { background: var(--white); }
.statement__grid {
  display: grid; gap: var(--s-8);
}
@media (min-width: 960px) {
  .statement__grid {
    grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
    gap: var(--s-10);
  }
}
.statement__label {
  font-family: var(--font-display); font-size: var(--fs-label);
  font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--steel-light);
  border-top: 2px solid var(--ink);
  padding-top: var(--s-4);
}
.statement__body p {
  font-size: var(--fs-statement);
  line-height: 1.42;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-weight: 500;
}
.statement__body p + p {
  margin-top: var(--s-5);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  letter-spacing: 0;
  color: var(--text-body);
  font-weight: 400;
}
.statement__body b { font-weight: 700; }
.statement__sig {
  margin-top: var(--s-7);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5);
  padding-top: var(--s-5); border-top: 1px solid var(--hairline);
  font-size: var(--fs-small); color: var(--text-body);
}
.statement__sig strong { font-family: var(--font-display); color: var(--ink); }

/* ---------- Before / after -------------------------------------------- */

.ba {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--stone);
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}


.ba__layer { position: absolute; inset: 0; }
.ba__layer img { width: 100%; height: 100%; object-fit: cover; }
.ba__layer--after { clip-path: inset(0 0 0 var(--pos, 50%)); }

.ba__tag {
  position: absolute; top: var(--s-4);
  font-family: var(--font-display); font-weight: 700;
  font-size: .6875rem; letter-spacing: var(--tr-label); text-transform: uppercase;
  padding: 7px var(--s-4); color: var(--white);
  pointer-events: none;
}
.ba__tag--before { left: var(--s-4); background: var(--ink); }
.ba__tag--after  { right: var(--s-4); background: var(--accent); }

.ba__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px; background: var(--white);
  transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
  pointer-events: none;
}
.ba__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--white); color: var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
}
.ba__grip svg { width: 22px; height: 22px; }
.ba input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: ew-resize;
}
.ba input[type="range"]:focus-visible ~ .ba__handle .ba__grip {
  outline: 3px solid var(--brand-red);
  outline-offset: 3px;
}

.work__grid { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 980px) {
  .work__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s-10); }
}
.work__caption h3 { font-size: var(--fs-h3); }
.work__caption .lead { margin-top: var(--s-4); }
.work__facts {
  margin-top: var(--s-7); display: grid; gap: 0;
  border-top: 1px solid var(--hairline);
}
.work__facts div {
  display: grid; grid-template-columns: 128px 1fr; gap: var(--s-4);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-small);
}
.work__facts dt {
  font-family: var(--font-display); font-weight: 700;
  font-size: .6875rem; letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--steel-light); padding-top: 2px;
}
.work__facts dd { margin: 0; color: var(--text-body); }
.work__note {
  margin-top: var(--s-6);
  padding-left: var(--s-5);
  border-left: 3px solid var(--accent);
  font-size: var(--fs-small); color: var(--text-body);
}

/* ---------- Process rail ---------------------------------------------- */

.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(232px, 1fr);
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-5);
  padding-right: var(--gutter);
  margin-right: calc(50% - 50vw);
  scrollbar-width: thin;
}
@media (min-width: 720px) { .rail { grid-auto-columns: minmax(300px, 1fr); gap: var(--s-6); } }

.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-track { background: var(--hairline); }
.rail::-webkit-scrollbar-thumb { background: var(--steel-light); }

.step { scroll-snap-align: start; }
.step__media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--stone);
}
.step__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.step:hover .step__media img { transform: scale(1.04); }
.step__n {
  position: absolute; left: 0; bottom: 0;
  background: var(--ink); color: var(--white);
  font-family: var(--font-display); font-weight: 800;
  font-size: .8125rem; letter-spacing: .08em;
  padding: 8px 14px;
}
.step__n b { color: var(--accent); font-weight: 800; }
.step h3 {
  font-size: 1.0625rem; margin-top: var(--s-5);
  letter-spacing: -0.015em;
}
.step p { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--text-body); }
.section--dark .step p { color: var(--text-on-dark-2); }

.rail-foot {
  margin-top: var(--s-6);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--fs-small); color: var(--text-body);
}
.rail-nav { display: flex; gap: var(--s-2); }
.rail-nav button {
  width: 46px; height: 46px; border: 1px solid var(--hairline-strong);
  background: transparent; color: var(--ink);
  border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--t-press) var(--ease-out),
              color var(--t-press) var(--ease-out),
              border-color var(--t-press) var(--ease-out);
}
.rail-nav button:hover:not(:disabled) { background: var(--ink); color: var(--white); border-color: var(--ink); }
.rail-nav button:disabled { opacity: .3; cursor: default; }
.rail-nav svg { width: 18px; height: 18px; }

/* ---------- Services -------------------------------------------------- */

.svc { border-top: 1px solid var(--hairline-dark); }
.svc__row {
  display: grid; gap: var(--s-3) var(--s-5);
  grid-template-columns: 46px 1fr;
  grid-template-areas: "n t" ". d";
  align-items: start;
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--hairline-dark);
  text-decoration: none;
  position: relative;
  transition: background var(--t-press) var(--ease-out);
}
@media (min-width: 860px) {
  .svc__row {
    grid-template-columns: 96px minmax(0, 330px) minmax(0, 1fr);
    grid-template-areas: "n t d";
    align-items: center;
    gap: var(--s-6);
    padding: var(--s-6) var(--s-5);
    margin-inline: calc(var(--s-5) * -1);
  }
  .svc__row:hover { background: var(--ink-2); }
}
.svc__n {
  grid-area: n;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.03em;
  color: #6E6C78;   /* 3.06:1 on --ink, AA for large text */
  line-height: 1;
  transition: color var(--t-press) var(--ease-out);
}
.svc__row:hover .svc__n { color: var(--accent); }
.svc__t {
  grid-area: t;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  letter-spacing: var(--tr-tight);
  color: var(--white);
  line-height: 1.1;
}
.svc__d { grid-area: d; font-size: var(--fs-body); color: var(--text-on-dark-2); max-width: 54ch; }
.svc__m {
  grid-area: m; display: none;
  aspect-ratio: 1; overflow: hidden; background: var(--ink-2);
}
@media (min-width: 860px) { .svc__m { display: block; } }
.svc__m img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06); opacity: .58;
  transition: filter var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.svc__row:hover .svc__m img { filter: grayscale(0); opacity: 1; transform: scale(1.05); }

.svc-foot {
  margin-top: var(--s-8);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  font-size: var(--fs-lead); color: var(--text-on-dark-2);
}
.svc-foot .tlink { color: var(--white); }

/* ---------- How we work ----------------------------------------------- */

.how__grid { display: grid; gap: var(--s-8); }
@media (min-width: 960px) {
  .how__grid { grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr); gap: var(--s-10); align-items: start; }
}
.how__quote {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-quote); line-height: 1.32;
  letter-spacing: var(--tr-tight);
  margin-top: var(--s-6);
  padding-left: var(--s-5);
  border-left: 3px solid var(--accent);
  color: var(--ink);
}
.how__quote footer {
  margin-top: var(--s-4);
  font-family: var(--font-body); font-size: var(--fs-small);
  font-weight: 400; letter-spacing: 0; color: var(--text-body);
}

.how__cta { margin-top: var(--s-8); }
.steps { counter-reset: step; }
.steps li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-5) var(--s-6);
  padding: var(--s-7) 0;
  border-top: 1px solid var(--hairline);
}
.steps li:last-child { border-bottom: 1px solid var(--hairline); }
.steps__n {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-numeral); line-height: .8;
  letter-spacing: -0.05em;
  color: #D6D2CA;
  grid-row: span 2;
}
.steps h3 { font-size: var(--fs-h3); align-self: center; }
.steps p { grid-column: 2; color: var(--text-body); }
@media (max-width: 559px) {
  .steps li { grid-template-columns: 1fr; gap: var(--s-3); }
  .steps__n { grid-row: auto; font-size: 2rem; }
  .steps p { grid-column: 1; }
}

/* ---------- Owners ---------------------------------------------------- */

/* Two people, not two billboards. The portraits are capped well under the
   column width so they read as a pair of headshots, and they sit beside the
   copy rather than under it, which is what left half the row empty. */
.owners__layout { display: grid; gap: var(--s-8); }
.owners__intro { order: 1; }
.owners__grid  { order: 2; }

.owners__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
@media (min-width: 520px) and (max-width: 759px) {
  .owners__grid { max-width: 420px; gap: var(--s-6); }
}

/* Tablet portrait has room for the pair beside the copy, so it switches at
   760 rather than 900. Left at 900 it stacked on an iPad and left half the
   row empty. */
@media (min-width: 760px) {
  .owners__layout {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--s-9);
    align-items: center;
  }
  .owners__intro { order: 2; }
  .owners__grid  { order: 1; gap: var(--s-5); }
}
@media (min-width: 1000px) {
  .owners__layout { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: var(--s-10); }
  .owners__grid { gap: var(--s-6); }
}
@media (min-width: 1240px) {
  .owners__layout { grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: var(--s-11); }
  .owners__grid { gap: var(--s-7); }
}
.owner figure { margin: 0; }
.owner__media {
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone);
  position: relative;
}
.owner__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.owner:hover .owner__media img { transform: scale(1.03); }
.owner figcaption { padding-top: var(--s-4); }
.owner figcaption .owner__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem); letter-spacing: var(--tr-tight);
  display: flex; flex-direction: column; gap: 2px;
}
.owner__role {
  font-family: var(--font-body); font-size: .625rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.5;
  color: var(--accent-type);
}
.owner figcaption p + p { margin-top: var(--s-3); color: var(--text-body); font-size: .8125rem; line-height: 1.55; }

/* ---------- Why choose us rail ---------------------------------------- */

.why { background: var(--ink); color: var(--white); padding-block: var(--s-7); overflow: hidden; }
.why__inner {
  display: flex; align-items: center; gap: var(--s-6);
  max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter);
  flex-wrap: wrap;
}
.why__label {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--white); opacity: .55; flex: none;
}
.why__list {
  display: flex; flex-wrap: wrap; gap: var(--s-3) clamp(16px, 2.4vw, 32px);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.9375rem, 1.5vw, 1.125rem);
  letter-spacing: -0.01em;
}
.why__list li { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
.why__list li:not(:last-child)::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* ---------- Reviews --------------------------------------------------- */

.section--marquee { overflow: hidden; }
/* Soft edges so cards dissolve at the boundary instead of being guillotined
   by the viewport. Stops are in px, not percentages: a percentage stop wide
   enough to read on a phone dims most of a card on a desktop. */
.marquee {
  position: relative; margin-top: var(--s-8);
  -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 104px, #000 calc(100% - 104px), transparent 100%);
          mask-image: linear-gradient(to right,
      transparent 0, #000 104px, #000 calc(100% - 104px), transparent 100%);
}
@media (max-width: 899px) {
  .marquee {
    -webkit-mask-image: linear-gradient(to right,
        transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to right,
        transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
}
.marquee__track {
  display: flex; width: max-content;
  gap: var(--s-6);
  will-change: transform;
}
.marquee.is-running .marquee__track {
  animation: slide var(--dur, 44s) linear infinite;
}
/* Shift by exactly one copy of the real reviews, so the loop point lands on an
   identical card and there is no seam and no gap. */
@keyframes slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--shift, 0px) * -1), 0, 0); }
}
.marquee.is-running:hover .marquee__track,
.marquee.is-running:focus-within .marquee__track { animation-play-state: paused; }

.rcard {
  width: min(84vw, 560px); flex: none;
  background: var(--ink-2);
  border: 1px solid var(--hairline-dark);
  border-top: 3px solid var(--accent);
  padding: var(--s-7);
  transition: border-color 320ms var(--ease-out),
              background 320ms var(--ease-out),
              transform 420ms var(--ease-out);
}

/* Hovering already pauses the strip, so the card can afford to acknowledge it.
   The lift is small on purpose: this is a quote, not a button. */
.marquee.is-running .rcard:hover {
  transform: translateY(-6px);
  background: #26252C;
  border-color: #45434E;
}

/* The wall assembles as the section arrives, then starts drifting. Only the
   first few are staggered; the clones sit offscreen and need no delay. */
.marquee .rcard {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 760ms var(--ease-out) var(--rd, 0ms),
              transform 760ms var(--ease-out) var(--rd, 0ms);
}
.marquee.is-in .rcard { opacity: 1; transform: none; }
.marquee .rcard:nth-child(1) { --rd: 0ms; }
.marquee .rcard:nth-child(2) { --rd: 130ms; }
.marquee .rcard:nth-child(3) { --rd: 260ms; }
.marquee .rcard:nth-child(n+4) { --rd: 340ms; }

/* Five stars tick in rather than landing as a block. */
.marquee .stars svg {
  opacity: 0; transform: scale(0.72);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-press);
}
.marquee.is-in .stars svg { opacity: 1; transform: none; }
.marquee.is-in .stars svg:nth-child(1) { transition-delay: 420ms; }
.marquee.is-in .stars svg:nth-child(2) { transition-delay: 480ms; }
.marquee.is-in .stars svg:nth-child(3) { transition-delay: 540ms; }
.marquee.is-in .stars svg:nth-child(4) { transition-delay: 600ms; }
.marquee.is-in .stars svg:nth-child(5) { transition-delay: 660ms; }
.rcard blockquote { margin: 0; }
.rcard p { font-size: var(--fs-small); color: var(--text-on-dark-2); }
.rcard p + p { margin-top: var(--s-4); }
.rcard footer {
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--hairline-dark);
  font-size: var(--fs-small); color: var(--steel-light);
}
.rcard footer b { color: var(--white); font-family: var(--font-display); }
.stars { display: flex; gap: 3px; color: var(--accent); margin-bottom: var(--s-5); }
.stars svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .marquee.is-running .marquee__track { animation: none; }
  .marquee {
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-4);
    -webkit-mask-image: none; mask-image: none;
  }
  .rcard { scroll-snap-align: center; }
  .marquee .rcard, .marquee .stars svg {
    opacity: 1; transform: none; transition: none;
  }
  .marquee.is-running .rcard:hover { transform: none; }
}

/* ---------- Service area ---------------------------------------------- */

.area__grid { display: grid; gap: var(--s-8); }
@media (min-width: 900px) {
  .area__grid { grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr); gap: var(--s-10); align-items: start; }
}
.towns {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.towns li {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h4); letter-spacing: -0.015em;
  display: flex; align-items: center; gap: var(--s-3);
}
.towns li::before { content: ""; width: 4px; height: 4px; background: var(--accent); flex: none; }

/* ---------- Estimate form --------------------------------------------- */

.form__grid { display: grid; gap: var(--s-9); }
@media (min-width: 940px) {
  .form__grid { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: var(--s-11); align-items: start; }
}

.contact-card {
  margin-top: var(--s-7);
  border-top: 2px solid var(--ink);
}
.contact-card dl { margin: 0; }
.contact-card dl > div {
  padding: var(--s-5) 0; border-bottom: 1px solid var(--hairline);
}
.contact-card dt {
  font-family: var(--font-display); font-weight: 700;
  font-size: .6875rem; letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--steel-light);
}
.contact-card dd {
  margin: var(--s-2) 0 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem); letter-spacing: var(--tr-tight);
}
.contact-card dd a { text-decoration: none; }
.contact-card dd a:hover { color: var(--accent-type); }
.contact-card dd.small { font-size: var(--fs-body); font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }

.field { margin-bottom: var(--s-5); }
.field label {
  display: block; margin-bottom: var(--s-2);
  font-family: var(--font-display); font-weight: 700;
  font-size: .6875rem; letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink);
}
.field input, .field select, .field textarea {
  width: 100%; padding: 15px var(--s-4);
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink);
  background: var(--white);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
  min-height: 54px;
}
.field textarea { min-height: 132px; resize: vertical; }
.field select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355535C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-4) center; background-size: 20px;
  padding-right: var(--s-9);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--error); }
.hint { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--text-body); }
.error { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--error); font-weight: 500; }
.error:empty { display: none; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-6); }
.or { font-size: var(--fs-small); color: var(--text-body); }
.or a { font-weight: 700; color: var(--ink); }

.form__status { margin-top: var(--s-5); font-size: var(--fs-small); }
.form__status:empty { display: none; }
.form__status[data-state="ok"] { background: var(--success-bg); color: var(--success-fg); padding: var(--s-4) var(--s-5); border-left: 3px solid var(--success-fg); }
.form__status[data-state="err"] { background: var(--stone); color: var(--error); padding: var(--s-4) var(--s-5); border-left: 3px solid var(--error); }

/* ---------- CTA band -------------------------------------------------- */

.cta-band { background: var(--accent); color: var(--white); }
.cta-band .container {
  padding-block: clamp(56px, 8vw, 104px);
  display: grid; gap: var(--s-7);
}
@media (min-width: 900px) {
  .cta-band .container {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: var(--s-10);
  }
}
.cta-band h2 { font-size: var(--fs-display); color: var(--white); }
.cta-band p { margin-top: var(--s-4); color: rgba(255,255,255,.9); font-size: var(--fs-lead); max-width: 46ch; }
.cta-band .btn {
  --btn-bg: var(--white); --btn-fg: var(--ink); border-color: var(--white);
}
.cta-band .btn:hover { --btn-bg: var(--ink); --btn-fg: var(--white); border-color: var(--ink); }

/* ---------- Footer ---------------------------------------------------- */

.footer { background: var(--ink); color: var(--text-on-dark-2); padding-block: var(--s-10) var(--s-7); }
.footer__grid { display: grid; gap: var(--s-8); }
@media (min-width: 760px) {
  .footer__grid { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: var(--s-9); }
}
.footer__logo img { height: 76px; width: auto; }
.footer__blurb { margin-top: var(--s-5); font-size: var(--fs-small); max-width: 40ch; }
.footer h3 {
  font-size: .6875rem; letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--white); opacity: .6; font-weight: 700; margin-bottom: var(--s-4);
}
.footer ul { display: grid; gap: var(--s-3); }
.footer a { text-decoration: none; font-size: var(--fs-small); }
.footer a:hover { color: var(--white); }
.footer__phone {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.375rem; letter-spacing: var(--tr-tight); color: var(--white);
  text-decoration: none; display: inline-block; margin-bottom: var(--s-3);
}
.footer__bar {
  margin-top: var(--s-9); padding-top: var(--s-5);
  border-top: 1px solid var(--hairline-dark);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  justify-content: space-between;
  font-size: var(--fs-small);
}
.footer__bar a { color: var(--text-on-dark-2); }

/* ---------- Sticky call bar (phones) ---------------------------------- */

.callbar { display: none; }
@media (max-width: 899px) {
  /* The hero already carries a Call button and an estimate button, so a
     second pair pinned across the bottom of it is the same offer twice. The
     bar waits offscreen and rises once the hero has gone.
     `visibility` is switched with the transform so the links are not a tab
     stop while the bar is parked below the fold. */
  .callbar {
    position: fixed; inset: auto 0 0 0; z-index: var(--z-callbar);
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--white);
    border-top: 1px solid var(--hairline);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -10px 30px rgba(10, 9, 12, .10);
    transform: translateY(100%);
    visibility: hidden;
    will-change: transform;
    transition: transform 440ms var(--ease-out),
                visibility 0s linear 440ms;
  }
  .callbar.is-shown {
    transform: none;
    visibility: visible;
    transition: transform 440ms var(--ease-out), visibility 0s;
  }
  /* Without JS nothing would ever reveal it, so leave it in place. */
  .no-js .callbar { transform: none; visibility: visible; }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 58px; text-decoration: none;
    font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  }
  .callbar a svg { width: 18px; height: 18px; }
  .callbar__call { background: var(--accent); color: var(--on-accent); }
  .callbar__quote { color: var(--ink); }
  /* Keeps the footer clear of the bar once it has risen. */
  body { padding-bottom: 59px; }
  .hero { min-height: 100svh; }
  /* Two up where there is room, stacked and full width only on phones. */
  .hero .btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .btn { justify-content: center; }
}
@media (max-width: 619px) {
  .hero .btn-row { grid-template-columns: 1fr; }
}

/* ---------- Reveal ---------------------------------------------------- */

.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--t-enter) var(--ease-out) var(--delay, 0ms),
              transform var(--t-enter) var(--ease-out) var(--delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
.no-js .reveal { opacity: 1; transform: none; }


/* ==========================================================================
   Cinematic motion
   Everything here animates `transform`, `opacity` or `clip-path` only, so it
   stays on the compositor. Durations and travel are cut on phones, where the
   same values read as sluggish and cost more to paint.
   ========================================================================== */

/* ---------- Hero entrance ---------------------------------------------
   Runs off the clock, not off an observer, so the title card is already
   moving on first paint. */

.hero__scrim { animation: fadeIn 1100ms var(--ease-out) both; }

.hero h1 { overflow: visible; }
.ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.ln > span {
  display: block;
  transform: translate3d(0, 108%, 0);
  animation: lineUp 1100ms var(--ease-out) var(--d, 0ms) both;
}
@keyframes lineUp { to { transform: translate3d(0, 0, 0); } }

.h-in {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  animation: riseIn 900ms var(--ease-out) var(--d, 0ms) both;
}
@keyframes riseIn { to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.hero__strip.h-in { transform: translate3d(0, 100%, 0); }
.hero__cue.h-in {
  animation-name: cueIn;
  animation-duration: 1200ms;
  transform: translateX(-50%) translateY(18px);
}
@keyframes cueIn {
  to { opacity: 1; transform: translateX(-50%); }
}

/* ---------- Scroll reveals --------------------------------------------- */

/* Headings wipe up behind their own edge rather than just fading. */
.rv-line {
  clip-path: inset(0 0 108% 0);
  transform: translate3d(0, 0.16em, 0);
  transition: clip-path 1000ms var(--ease-out) var(--delay, 0ms),
              transform 1000ms var(--ease-out) var(--delay, 0ms);
}
.is-in .rv-line, .rv-line.is-in { clip-path: inset(0 0 -12% 0); transform: none; }

/* The red rule draws itself in from the left. */
.rule-accent { transform: scaleX(0); transform-origin: left center;
  transition: transform 760ms var(--ease-out) calc(var(--delay, 0ms) + 180ms); }
.is-in .rule-accent, .rule-accent.is-in { transform: scaleX(1); }

/* Photo frames: the frame wipes open while the picture inside settles back
   from a push. That counter-move is what makes it read as film rather than
   as a fade. */
.rv-media, .rv-wipe {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1150ms var(--ease-out) var(--delay, 0ms);
}
.rv-media picture {
  transform: scale(1.16);
  transform-origin: center;
  transition: transform 1500ms var(--ease-out) var(--delay, 0ms);
}
.is-in .rv-media, .is-in .rv-wipe,
.rv-media.is-in, .rv-wipe.is-in { clip-path: inset(0 0 0 0); }
.is-in .rv-media picture, .rv-media.is-in picture { transform: scale(1.045); }


/* Rail cards arrive left to right rather than all at once. */
.step:nth-child(1) .rv-media { --delay: 0ms; }
.step:nth-child(2) .rv-media { --delay: 90ms; }
.step:nth-child(3) .rv-media { --delay: 180ms; }
.step:nth-child(4) .rv-media { --delay: 270ms; }
.step:nth-child(n+5) .rv-media { --delay: 340ms; }

/* Services rows arrive one after another. */
.svc li { opacity: 0; transform: translate3d(0, 20px, 0);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.is-in .svc li, .svc.is-in li { opacity: 1; transform: none; }
.svc.is-in li:nth-child(1) { transition-delay: 60ms; }
.svc.is-in li:nth-child(2) { transition-delay: 150ms; }
.svc.is-in li:nth-child(3) { transition-delay: 240ms; }
.svc.is-in li:nth-child(4) { transition-delay: 330ms; }
.svc.is-in li:nth-child(5) { transition-delay: 420ms; }
.svc__n { transform: translate3d(-14px, 0, 0);
  transition: transform 800ms var(--ease-out), color var(--t-press) var(--ease-out); }
.svc.is-in .svc__n { transform: none; }
.svc.is-in li:nth-child(1) .svc__n { transition-delay: 120ms; }
.svc.is-in li:nth-child(2) .svc__n { transition-delay: 210ms; }
.svc.is-in li:nth-child(3) .svc__n { transition-delay: 300ms; }
.svc.is-in li:nth-child(4) .svc__n { transition-delay: 390ms; }
.svc.is-in li:nth-child(5) .svc__n { transition-delay: 480ms; }

/* Numbered process steps count in. */
.steps li > * { opacity: 0; transform: translate3d(0, 16px, 0);
  transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); }
.steps.is-in li > * { opacity: 1; transform: none; }
.steps.is-in li:nth-child(1) > * { transition-delay: 40ms; }
.steps.is-in li:nth-child(2) > * { transition-delay: 140ms; }
.steps.is-in li:nth-child(3) > * { transition-delay: 240ms; }
.steps.is-in li:nth-child(4) > * { transition-delay: 340ms; }

/* Town list ticks in. */
.towns li { opacity: 0; transform: translate3d(0, 12px, 0);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.towns.is-in li { opacity: 1; transform: none; }
.towns.is-in li:nth-child(n) { transition-delay: calc(40ms * var(--i, 0)); }

/* Buttons fill with a sweep rather than a flat colour swap. */
.btn { position: relative; isolation: isolate; overflow: hidden; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-sweep, transparent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 460ms var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn--ghost { --btn-sweep: var(--ink); }
.btn--ghost-light { --btn-sweep: var(--white); }
.cta-band .btn { --btn-sweep: var(--ink); }

/* ---------- Phones and tablets ----------------------------------------
   Shorter, shallower, and no parallax. On a phone the long travel reads as
   lag, and a scroll-driven transform competes with the browser's own
   compositing during a flick. */
@media (max-width: 899px) {
  .ln > span { animation-duration: 850ms; }
  .h-in { transform: translate3d(0, 14px, 0); animation-duration: 700ms; }
  .rv-media, .rv-wipe { transition-duration: 820ms; }
  .rv-media picture { transition-duration: 1000ms; transform: scale(1.10); }
  .is-in .rv-media picture, .rv-media.is-in picture { transform: scale(1.02); }
  .rv-line { transition-duration: 760ms; }
  .svc li, .steps li > *, .towns li { transition-duration: 540ms; }
  .hero__media-inner { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .callbar { transition: none; }
  .hero__scrim, .ln > span, .h-in { animation: none; opacity: 1; transform: none; }
  .rv-line, .rv-media, .rv-wipe { clip-path: none; transform: none; transition: none; }
  .rv-media picture { transform: none; transition: none; }
  .rule-accent { transform: scaleX(1); transition: none; }
  .svc li, .svc__n, .steps li > *, .towns li { opacity: 1; transform: none; transition: none; }
  .hero__media-inner { transform: none; }
  .btn::before { display: none; }
}

/* No JS: nothing may stay hidden. */
.no-js .rv-line, .no-js .rv-media, .no-js .rv-wipe { clip-path: none; }
.no-js .rv-media picture { transform: none; }
.no-js .rule-accent { transform: scaleX(1); }
.no-js .svc li, .no-js .steps li > *, .no-js .towns li { opacity: 1; transform: none; }
.no-js .marquee .rcard, .no-js .marquee .stars svg { opacity: 1; transform: none; }