/* =========================================================
   Drayo Plumbing — site styles
   World: the hardware at a well-kept main shutoff.
   Cast iron, galvanized zinc, stamped brass. Valve red is
   reserved for calling controls and the act-now symptom.
   ========================================================= */

:root {
  --iron: #1b2226;
  --iron-2: #242d32;
  --iron-3: #12171a;
  --zinc: #e5e8e7;
  --zinc-2: #d3d8d7;
  --white: #ffffff;
  --steel: #8c9398;
  --brass: #b38b45;
  --brass-light: #c8a765;
  --valve: #c62a1f;
  --valve-dark: #a8221a;
  --valve-light: #ff6b5e;

  --text: #1b2226;
  --muted: #4c555b;
  --muted-dark: #b9c1c5;
  --rule: #b9c0c2;
  --rule-dark: rgba(255, 255, 255, 0.16);
  --ok: #2e6b4a;

  /* legacy names still referenced by a few inline styles */
  --ink: var(--iron);

  --font-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --font-num: "Atkinson Hyperlegible Mono", ui-monospace, Consolas, monospace;

  --radius: 3px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --header-h: 72px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Large screens: widen the page so the logo, menu and every section's content move left together
   instead of floating in a 1320px column. */
@media (min-width: 1500px) { :root { --max: 1680px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: var(--zinc);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--zinc);
}

::selection { background: var(--brass-light); color: var(--iron); }
img, video, svg { display: block; max-width: 100%; }

a { color: var(--iron); text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--brass); }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.005em;
  margin: 0 0 0.45em;
  color: var(--iron);
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 7vw, 6rem); font-weight: 900; }
h2 { font-size: clamp(2.2rem, 4.4vw, 3.9rem); }
h3 { font-size: clamp(1.35rem, 1.8vw, 1.6rem); font-weight: 700; line-height: 1.08; letter-spacing: 0; }
p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--white); color: var(--iron);
  padding: 10px 16px; font-weight: 700;
}
.skip-link:focus { top: 12px; }

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

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.28rem); color: var(--muted); max-width: 60ch; }
.num { font-family: var(--font-num); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-call { background: var(--valve); color: var(--white); }
.btn-call:hover { background: var(--valve-dark); color: var(--white); }
.btn-call .num { font-weight: 700; }
.btn-ghost, .btn-outline { border-color: var(--iron); color: var(--iron); background: transparent; }
.btn-ghost:hover, .btn-outline:hover { background: var(--iron); color: var(--white); }
.btn-lg { min-height: 60px; padding: 0 28px; font-size: 1.1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Dark contexts flip the outline button */
.hero .btn-ghost, .section-dark .btn-ghost, .cta-band .btn-ghost, .area-band .btn-ghost, .callbar .btn-ghost {
  border-color: rgba(255, 255, 255, 0.75); color: var(--white);
}
.hero .btn-ghost:hover, .section-dark .btn-ghost:hover, .cta-band .btn-ghost:hover, .area-band .btn-ghost:hover, .callbar .btn-ghost:hover {
  background: var(--white); color: var(--iron); border-color: var(--white);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--zinc-2);
}
.header-inner { display: flex; align-items: center; gap: 28px; min-height: var(--header-h); }

.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--iron); flex: none; }
.logo-mark { width: 34px; height: 34px; flex: none; color: var(--iron); }
.logo-words { display: flex; align-items: baseline; gap: 9px; line-height: 1; }
.logo-name { font-family: var(--font-display); font-weight: 900; font-size: 1.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
.logo-trade {
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--brass); color: var(--iron); padding: 4px 7px 3px;
}

.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: block; padding: 10px 12px;
  color: var(--iron); text-decoration: none; font-weight: 600; font-size: 0.98rem;
}
.nav-list a:hover { text-decoration: underline; text-decoration-color: var(--brass); }
.nav-list a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--brass); }

.header-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.header-phone { display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; color: var(--iron); line-height: 1.15; }
.header-phone small { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.header-phone strong { font-family: var(--font-num); font-size: 1.12rem; font-weight: 700; }
.header-phone:hover strong { text-decoration: underline; text-decoration-color: var(--brass); }
.header-actions .btn { min-height: 46px; padding: 0 18px; }

.icon-btn {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius);
  border: 2px solid var(--iron); background: transparent; color: var(--iron); cursor: pointer;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn.call { background: var(--valve); border-color: var(--valve); color: var(--white); text-decoration: none; }

@media (max-width: 1180px) { .header-phone { display: none; } }

@media (max-width: 960px) {
  :root { --header-h: 64px; }
  .icon-btn { display: inline-flex; }
  .header-actions .btn { display: none; }
  .header-actions { margin-left: auto; gap: 10px; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
    background: var(--white); padding: 12px var(--gutter) 40px; overflow-y: auto; margin: 0;
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a { font-family: var(--font-display); font-weight: 800; font-size: 2rem; padding: 14px 0; border-bottom: 1px solid var(--zinc-2); }
  .nav-list a[aria-current="page"] { box-shadow: none; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--brass); }
  .nav-cta { display: grid; gap: 12px; margin-top: 28px; }
  .logo-name { font-size: 1.6rem; }
  .logo-mark { width: 30px; height: 30px; }
}
@media (min-width: 961px) { .nav-cta { display: none; } }
@media (max-width: 380px) { .logo-trade { display: none; } }
body.nav-open { overflow: hidden; }

/* ---------- Pipe marker band (signature) ----------
   Whole units only: extra units wrap onto a hidden second line. */
.marker { background: var(--brass); color: var(--iron); overflow: hidden; height: 46px; }
.marker ul {
  display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 56px;
  height: 46px; list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: none;
}
.marker li {
  display: flex; align-items: center; gap: 16px; height: 46px;
  font-family: var(--font-display); font-weight: 800; font-size: 0.98rem;
  letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
}
.marker svg { width: 38px; height: 12px; flex: none; }

/* ---------- Photo / video slots ---------- */
.slot {
  position: relative; aspect-ratio: var(--ar, 3 / 2); margin: 0; overflow: hidden;
  background: var(--zinc-2);
  outline: 1px dashed var(--steel); outline-offset: -1px;
}
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.slot.is-loaded { outline: 0; }
.slot.is-missing img { opacity: 0; }
.slot-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 20px; text-align: center;
  color: var(--muted); font-size: 0.86rem; line-height: 1.35;
}
.slot-label b {
  font-family: var(--font-display); font-weight: 800; font-size: 0.8rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--brass); color: var(--iron); padding: 4px 9px 3px;
}
.slot-label code { font-family: var(--font-num); font-size: 0.85rem; color: var(--iron); word-break: break-all; }
.slot-label .slot-hint { max-width: 34ch; }
.slot-dark { background: var(--iron-2); outline-color: rgba(255, 255, 255, 0.3); }
.slot-dark .slot-label { color: var(--muted-dark); }
.slot-dark .slot-label code { color: var(--white); }

/* ---------- Hero (full bleed) ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--white); background: var(--iron-2);
  min-height: min(calc(100svh - var(--header-h)), 900px);
  display: flex; align-items: flex-end;
}
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media .slot-label {
  justify-content: flex-start; align-items: flex-end; text-align: right;
  padding: 88px var(--gutter) 0; color: var(--muted-dark);
}
.hero-media .slot-label code { color: var(--white); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero-video.is-missing { display: none; }
/* The poster photo sits underneath and is what shows by default. The script starts the video and
   fades it in over 1s once frames are actually playing, then crossfades back to the photo over the
   last 1.5s, so neither end is a hard cut. No script, or reduced motion: the photo only. */
.hero-video { opacity: 0; transition: opacity 1s ease-in-out; }
.hero-video.is-on { opacity: 1; }
.hero-video.is-on.is-ending { opacity: 0; transition-duration: 1.5s; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    /* Darkest under the text column (which ends near 45% on wide screens), easing off before the
       plumber so he stays bright. Tuned so the brass line holds 3:1 over every video frame. */
    linear-gradient(90deg, rgba(18, 23, 26, 0.93) 0%, rgba(18, 23, 26, 0.88) 38%, rgba(18, 23, 26, 0.62) 50%, rgba(18, 23, 26, 0.12) 72%, rgba(18, 23, 26, 0) 100%),
    linear-gradient(0deg, rgba(18, 23, 26, 0.6) 0%, rgba(18, 23, 26, 0) 40%);
}
.hero-inner { padding-top: 96px; padding-bottom: clamp(56px, 8vh, 96px); }
.hero-copy { max-width: 860px; }
/* Desktop: the photo puts the plumber just right of center, so the copy column is capped at 42% of
   the screen and the headline scales with the width instead of sitting at its 6rem maximum. When the
   column is too narrow for the phone row, the buttons wrap under the number instead of crossing him. */
@media (min-width: 961px) {
  .hero-copy { max-width: min(820px, 42vw); }
  .hero h1 { font-size: clamp(3rem, 4.6vw, 5.25rem); }
  .hero .hero-phone { font-size: clamp(2.2rem, 2.6vw, 2.9rem); }
}
.hero h1 { color: var(--white); margin-bottom: 0.32em; }
.hero h1 span { display: block; color: var(--brass-light); }
.hero-sub { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: #e4e8e9; max-width: 54ch; margin-bottom: 28px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.status-lines {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--rule-dark);
  color: #e4e8e9; font-weight: 600; font-size: 0.98rem;
}
.status-lines li { padding: 12px 18px 0 0; margin-right: 18px; border-right: 1px solid var(--rule-dark); }
.status-lines li:last-child { border-right: 0; margin-right: 0; }
.status-lines li:nth-last-child(2) { border-right: 0; margin-right: 0; }
.status-lines li:last-child { flex-basis: 100%; padding-bottom: 0; }

.hero-toggle {
  position: absolute; right: var(--gutter); bottom: 24px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(18, 23, 26, 0.6); color: var(--white);
  font: 600 0.88rem var(--font-body); cursor: pointer;
}
.hero-toggle svg { width: 14px; height: 14px; }
.hero-toggle[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: settle 0.9s var(--ease-out) backwards; }
  .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.24s; }
  @keyframes settle { from { transform: translateY(14px); } to { transform: none; } }
}

@media (max-width: 720px) {
  .hero { min-height: 0; }
  .hero-shade { background: linear-gradient(0deg, rgba(18, 23, 26, 0.95) 0%, rgba(18, 23, 26, 0.92) 50%, rgba(18, 23, 26, 0.86) 70%, rgba(18, 23, 26, 0.4) 100%); }
  .hero-inner { padding-top: 200px; padding-bottom: 40px; }
  .hero-ctas .btn { width: 100%; }
  .hero-media .slot-label { align-items: center; text-align: center; padding: 22px 16px 0; }
  .hero-toggle { bottom: auto; top: 14px; }
  .hero-media .slot-label { padding-top: 22px; }
  .status-lines { flex-direction: column; }
  .status-lines li { border-right: 0; margin-right: 0; padding: 10px 0; border-bottom: 1px solid var(--rule-dark); }
  .status-lines li:last-child { border-bottom: 0; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 128px) 0; }
.section-white { background: var(--zinc-2); --muted: #434b50; --rule: #9aa2a5; }
.section-dark { background: var(--iron); color: #dfe4e6; }
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark .lede { color: var(--muted-dark); }
.section-dark a:not(.btn) { color: var(--white); }
.section-head { max-width: 800px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head-row .section-head { margin-bottom: 0; }

.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split-reverse > :first-child { order: 2; }
.split-narrow-media { grid-template-columns: 1.25fr 0.8fr; }
.split > *, .two-col > * { min-width: 0; }
@media (max-width: 900px) {
  .split, .split-narrow-media { grid-template-columns: 1fr; }
  .split-reverse > :first-child { order: 0; }
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- Home: symptom picker ---------- */
.picker { background: var(--zinc); padding: clamp(56px, 8vw, 112px) 0; }
.picker-inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.picker-head { position: sticky; top: calc(var(--header-h) + 32px); }
.picker-head h2 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.picker-head p { color: var(--muted); max-width: 34ch; }
.picker-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--iron); }
.picker-list li { border-bottom: 1px solid var(--rule); }
.picker-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; align-items: center; gap: 6px 24px;
  padding: 22px 0; text-decoration: none; color: var(--iron);
}
.p-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.35rem); line-height: 1; }
.p-next { color: var(--muted); font-size: 0.98rem; text-align: right; }
.picker-list .arrow { width: 40px; height: 14px; color: var(--iron); transition: transform 0.25s var(--ease-out); }
.picker-list a:hover .arrow, .picker-list a:focus-visible .arrow { transform: translateX(6px); }
.picker-list a:hover .p-name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--brass); }
.picker-list .urgent .p-name { font-weight: 900; text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 7px; text-decoration-color: var(--brass); }
.picker-list .urgent .p-next { color: var(--iron); font-weight: 700; }
@media (max-width: 860px) {
  .picker-inner { grid-template-columns: 1fr; }
  .picker-head { position: static; }
}
@media (max-width: 560px) {
  .picker-list a { grid-template-columns: minmax(0, 1fr) 32px; padding: 18px 0; }
  .p-next { grid-column: 1; grid-row: 2; text-align: left; }
  .picker-list .arrow { grid-column: 2; grid-row: 1 / span 2; width: 32px; }
}

/* ---------- Home: emergency band ---------- */
.emergency-band .split { align-items: start; }
.first-steps { list-style: none; padding: 0; margin: 0 0 34px; counter-reset: step; border-left: 2px solid var(--brass); }
.first-steps li { counter-increment: step; position: relative; padding: 0 0 22px 32px; }
.first-steps li:last-child { padding-bottom: 0; }
.first-steps li::before {
  content: counter(step);
  position: absolute; left: -14px; top: 0;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--brass); color: var(--iron);
  font-family: var(--font-num); font-weight: 700; font-size: 0.85rem;
}
.first-steps strong { color: var(--white); display: block; font-size: 1.12rem; }

/* ---------- Process line (visit + price) ---------- */
.process {
  list-style: none; padding: 0; margin: clamp(40px, 5vw, 72px) 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px;
  border-top: 2px solid var(--iron); counter-reset: stop;
}
.process li { counter-increment: stop; position: relative; padding-top: 30px; }
.process li::before {
  content: counter(stop);
  position: absolute; top: -14px; left: 0;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--iron); color: var(--white);
  font-family: var(--font-num); font-weight: 700; font-size: 0.85rem;
}
.process h3 { margin-bottom: 8px; }
.process p { margin: 0; color: var(--muted); }
@media (max-width: 900px) {
  .process { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--iron); gap: 0; }
  .process li { padding: 0 0 26px 32px; }
  .process li:last-child { padding-bottom: 0; }
  .process li::before { top: 0; left: -14px; }
}

/* ---------- Home: service area + close ---------- */
.area { background: var(--iron); }
.area-banner { --ar: 21 / 9; }
.area .slot { aspect-ratio: auto; width: 100%; height: clamp(260px, 42.86vw, 640px); outline-color: rgba(255, 255, 255, 0.3); background: var(--iron-2); }
.area .slot-label { color: var(--muted-dark); }
.area .slot-label code { color: var(--white); }
.area-band { color: #dfe4e6; padding: clamp(56px, 8vw, 104px) 0; }
.area-band .container { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: end; }
.area-band h2, .area-band h3 { color: var(--white); }
.city-line { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.city-line li { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--brass-light); line-height: 1.15; }
.city-line li:not(:last-child)::after { content: "/"; color: var(--steel); margin: 0 12px; font-weight: 400; }
.area-band p { color: var(--muted-dark); max-width: 48ch; }
.area-band a:not(.btn) { color: var(--white); }
.close-call { border-top: 2px solid var(--brass); padding-top: 24px; }
.close-call h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
@media (max-width: 860px) { .area-band .container { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .close-call .btn { width: 100%; } }

/* ---------- Ruled lists that replace card grids ---------- */
.service-grid { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--iron); }
.service-grid > li { border-bottom: 1px solid var(--rule); }
.service-card {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: center;
  padding: clamp(20px, 3vw, 32px) 0; text-decoration: none; color: var(--text);
}
.service-card h2, .service-card h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 10px; }
.service-card p { color: var(--muted); max-width: 52ch; margin-bottom: 14px; }
.more { font-weight: 700; color: var(--iron); display: inline-flex; align-items: center; gap: 10px; }
.more svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease-out); }
.service-card:hover .more svg { transform: translateX(5px); }
.service-card:hover h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--brass); }
@media (max-width: 700px) { .service-card { grid-template-columns: 1fr; } }

.signs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 40px; border-top: 2px solid var(--iron); }
.signs li { padding: 16px 0 16px 26px; border-bottom: 1px solid var(--rule); position: relative; font-weight: 600; }
.signs li::before { content: ""; position: absolute; left: 0; top: 24px; width: 12px; height: 2px; background: var(--brass); }

.panel { border-top: 2px solid var(--iron); padding-top: 20px; }
.panel h3 { margin-bottom: 12px; }
.panel ul, .panel ol { margin: 0; padding-left: 1.2em; }
.panel li { margin-bottom: 0.5em; }
.panel-accent { border-top-color: var(--brass); border-top-width: 4px; }

.call-card { border-top: 2px solid var(--iron); padding-top: 20px; }
.call-card h2, .call-card h3 { color: var(--iron); font-size: clamp(1.6rem, 2.4vw, 2rem); }
.call-card a.big-phone {
  display: inline-block; font-family: var(--font-num); font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.02em;
  color: var(--iron); text-decoration: none; line-height: 1.1; margin: 2px 0 16px;
  border-bottom: 4px solid var(--valve); padding-bottom: 4px;
}
.call-card a.big-phone:hover { border-bottom-color: var(--valve-dark); }
.call-card ul { margin: 0; padding-left: 1.2em; color: var(--muted); }
.call-card p, .call-card li { color: var(--muted); }

.emergency-grid { max-width: 1040px; border-top: 2px solid var(--iron); }
.emergency-card { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 8px 48px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.emergency-card h3 { margin: 0; font-size: clamp(1.6rem, 2.4vw, 2rem); }
.emergency-card.danger h3 { font-weight: 900; }
.emergency-card.danger + .emergency-card:not(.danger) { border-top: 2px solid var(--iron); }
.emergency-card ol { margin: 0; padding-left: 1.2em; }
.emergency-card li { margin-bottom: 0.45em; }
@media (max-width: 700px) { .emergency-card { grid-template-columns: 1fr; } }

.city-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; list-style: none; padding: 0; margin: 36px 0 0; border-top: 2px solid var(--iron); }
.city-grid li { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.city-grid strong { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--iron); display: block; line-height: 1; }
.city-grid span { display: block; color: var(--muted); font-size: 0.98rem; margin-top: 8px; }
@media (max-width: 800px) { .city-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .city-grid { grid-template-columns: 1fr; } }

.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 48px; list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--iron); }
.principles li { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.principles h3 { margin-bottom: 6px; }
.principles p { margin: 0; color: var(--muted); }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 48px; border-top: 2px solid var(--iron); }
.checklist li { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.checklist h3 { font-size: 1.45rem; margin-bottom: 6px; }
.checklist p { margin: 0; color: var(--muted); }

.promise-list { list-style: none; padding: 0; margin: 0 0 24px; border-top: 2px solid var(--iron); }
.promise-list li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.promise-list strong { display: block; color: var(--iron); font-size: 1.08rem; }

.note { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 16px 0; font-size: 0.98rem; max-width: 60ch; }
.note p:last-child { margin: 0; }

.chips { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; gap: 2px 0; }
.chips li { font-weight: 700; color: var(--iron); }
.chips li:not(:last-child)::after { content: "/"; color: var(--steel); margin: 0 10px; font-weight: 400; }

/* ---------- FAQ ---------- */
.faq { max-width: 880px; border-top: 2px solid var(--iron); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; line-height: 1.1; color: var(--iron);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 14px; height: 14px; flex: none;
  border-right: 2.5px solid var(--iron); border-bottom: 2.5px solid var(--iron);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform 0.2s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq .faq-body { padding: 0 0 22px; color: var(--muted); max-width: 68ch; }
.faq .faq-body p:last-child { margin: 0; }

/* ---------- Compare table ---------- */
.table-scroll { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; background: var(--white); border-top: 2px solid var(--iron); }
.compare th, .compare td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.compare thead th { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--iron); }
.compare tbody th { font-weight: 700; color: var(--iron); width: 26%; }

/* ---------- CTA band (inner pages) ---------- */
.cta-band { background: var(--iron); color: #dfe4e6; padding: clamp(56px, 8vw, 104px) 0; }
.cta-band .container { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.cta-band h2 { color: var(--white); margin-bottom: 10px; }
.cta-band p { margin: 0; color: var(--muted-dark); max-width: 52ch; }
@media (max-width: 600px) { .cta-band .btn-row, .cta-band .btn { width: 100%; } }

/* ---------- Inner page hero ---------- */
.page-hero { background: var(--zinc); padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 7vw, 96px); }
.page-hero h1 { font-size: clamp(2.8rem, 6vw, 5.4rem); max-width: 16ch; }
.page-hero .split h1 { max-width: none; font-size: clamp(2.6rem, 4.8vw, 4.6rem); }
.page-hero .btn-row { margin-top: 28px; }
.page-hero .status { font-weight: 700; color: var(--iron); border-top: 1px solid var(--rule); padding-top: 12px; max-width: 60ch; }
.breadcrumb { font-size: 0.92rem; margin-bottom: 28px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--steel); }
.breadcrumb a { color: var(--iron); }

/* ---------- Booking form ---------- */
.book-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 960px) { .book-layout { grid-template-columns: 1fr; } }
.book-aside { display: grid; gap: 32px; position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 960px) { .book-aside { position: static; } }

.form-card { background: var(--white); border-top: 4px solid var(--iron); padding: clamp(22px, 4vw, 44px); }
.form-card fieldset { border: 0; padding: 0; margin: 0 0 32px; min-width: 0; }
.form-card legend { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; color: var(--iron); padding: 0; margin-bottom: 16px; line-height: 1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.field label, .field .label { display: block; font-weight: 700; color: var(--iron); margin-bottom: 6px; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="date"], .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--white); border: 2px solid var(--steel); border-radius: var(--radius);
  transition: border-color 0.15s ease;
}
.field input[type="tel"], .field input[name="zip"] { font-family: var(--font-num); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--brass); outline-offset: 1px; border-color: var(--iron); }
.field [aria-invalid="true"] { border-color: var(--valve); }
.field .hint { font-size: 0.92rem; color: var(--muted); margin: 6px 0 0; }
.field .error { font-size: 0.94rem; color: var(--valve-dark); font-weight: 700; margin: 6px 0 0; }
.field .error:empty { display: none; }

.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) { .choice-grid { grid-template-columns: 1fr; } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice label {
  display: block; height: 100%; padding: 14px 16px;
  border: 2px solid var(--steel); border-radius: var(--radius);
  cursor: pointer; font-weight: 700; color: var(--iron); line-height: 1.3;
}
.choice label small { display: block; font-weight: 400; color: var(--muted); margin-top: 3px; }
.choice input:checked + label { border-color: var(--iron); background: var(--zinc); box-shadow: inset 0 0 0 1px var(--iron); }
.choice input:focus-visible + label { outline: 3px solid var(--brass); outline-offset: 2px; }
.choice.urgent input:checked + label { border-color: var(--valve); background: #fbeceb; box-shadow: inset 0 0 0 1px var(--valve); }

.check { display: flex; gap: 12px; align-items: flex-start; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--iron); flex: none; }
.check label { font-weight: 400; color: var(--text); }

.urgent-alert {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fbeceb; border-top: 3px solid var(--valve);
  padding: 16px 18px; margin-top: 14px; color: var(--text);
}
.urgent-alert[hidden] { display: none; }
.urgent-alert svg { width: 24px; height: 24px; color: var(--valve); flex: none; margin-top: 2px; }
.urgent-alert p { margin: 0 0 10px; }
.urgent-alert .btn { min-height: 46px; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form-foot p { margin: 0; font-size: 0.94rem; color: var(--muted); flex: 1 1 260px; }

.form-summary { background: #fbeceb; border-top: 3px solid var(--valve); padding: 14px 18px; margin-bottom: 24px; color: var(--text); }
.form-summary[hidden] { display: none; }
.form-summary h2 { font-size: 1.5rem; color: var(--valve-dark); margin-bottom: 6px; }
.form-summary ul { margin: 0; padding-left: 1.2em; }
.form-summary a { color: var(--valve-dark); }

.success[hidden] { display: none; }
.success dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 18px; margin: 20px 0 26px; border-top: 2px solid var(--iron); }
.success dt, .success dd { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.success dt { font-weight: 700; color: var(--iron); }
.success dd { margin: 0; color: var(--text); word-break: break-word; }
@media (max-width: 480px) { .success dl { grid-template-columns: 1fr; } .success dt { border-bottom: 0; padding-bottom: 0; } }
.form-card fieldset.subgroup { margin: 0; }
.form-card fieldset.subgroup legend { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--iron-3); color: var(--muted-dark); padding: clamp(56px, 7vw, 88px) 0 32px; font-size: 0.98rem; }
.site-footer .logo { color: var(--white); }
.site-footer .logo-mark { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; color: var(--white); margin-bottom: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: #dfe4e6; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--brass); }
.footer-brand p { max-width: 36ch; margin-top: 18px; }
.footer-phone { font-family: var(--font-num); font-weight: 700; font-size: 1.5rem; color: var(--white) !important; display: inline-block; margin: 4px 0 8px; }
.demo-note {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; font-size: 0.9rem;
}
.demo-note p { margin: 0; max-width: 80ch; }
.demo-badge {
  display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 0.8rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--iron); background: var(--brass); padding: 3px 8px 2px; margin-right: 8px;
}

/* ---------- Phone call bar ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; grid-template-columns: 1.5fr 1fr; gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--iron); border-top: 3px solid var(--brass);
}
.callbar .btn { min-height: 52px; padding: 0 12px; }
@media (max-width: 768px) {
  .callbar { display: grid; }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* Scroll reveal (main.js adds .rv only to elements below the first screen, and never under
   reduced motion). Transform and opacity only, so it stays cheap on a phone. */
@media (prefers-reduced-motion: no-preference) {
  .rv {
    opacity: 0;
    transform: translate3d(var(--rv-x, 0px), var(--rv-y, 18px), 0);
    transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
    transition-delay: var(--rv-d, 0ms);
  }
  .rv.rv-in { opacity: 1; transform: none; }
}
/* Reduced motion: no scroll reveals (above), no hero settle (hero rules), and no sliding extras. */
@media (prefers-reduced-motion: reduce) {
  .picker-list .arrow, .more svg, .faq summary::after, .nav { transition: none; }
  .picker-list a:hover .arrow, .picker-list a:focus-visible .arrow, .service-card:hover .more svg { transform: none; }
}
@media print { .rv { opacity: 1 !important; transform: none !important; } }

@media print {
  .site-header, .callbar, .hero-media, .hero-toggle, .marker { display: none !important; }
  .hero { color: var(--iron); min-height: 0; }
  .hero h1, .hero-sub { color: var(--iron); }
}

.stack { display: grid; gap: 40px; }
@media (min-width: 961px) and (max-width: 1100px) { .header-actions .btn-ghost { display: none; } }
h2.h3 { font-size: clamp(1.35rem, 1.8vw, 1.6rem); font-weight: 700; line-height: 1.08; }

/* Inner-page step lists: the same continuous ruled line as the home process */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; border-left: 2px solid var(--iron); }
.steps li { counter-increment: step; position: relative; padding: 0 0 26px 34px; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(step); position: absolute; left: -14px; top: 0;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--iron); color: var(--white);
  font-family: var(--font-num); font-weight: 700; font-size: 0.85rem;
}
.steps h3 { margin-bottom: 6px; padding-top: 2px; }
.steps p { margin: 0; color: var(--muted); }
.section-dark .steps { border-left-color: var(--brass); }
.section-dark .steps li::before { background: var(--brass); color: var(--iron); }
.section-dark .steps p { color: var(--muted-dark); }
.page-hero + .section { padding-top: clamp(24px, 4vw, 56px); }

/* Hero phone: the number itself is the set piece */
.hero-call { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-bottom: 36px; }
.hero-call .hero-ctas { margin-bottom: 0; }
.hero-phone {
  font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1; color: var(--white); text-decoration: none;
  border-bottom: 4px solid var(--valve); padding-bottom: 6px;
}
.hero-phone:hover { border-bottom-color: var(--valve-light); }
@media (max-width: 720px) { .hero-call { flex-direction: column; align-items: stretch; } .hero-phone { align-self: flex-start; } }

/* Solid iron: primary actions that are not a phone call */
.btn-solid { background: var(--iron); color: var(--white); }
.btn-solid:hover { background: var(--iron-2); color: var(--white); }

/* Hero poster shows even when there is no video file */
.hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero-poster.is-missing { display: none; }

/* ==========================================================================
   21st.dev adaptations (plain CSS + main.js, no React). Each rule set is marked with the
   component it came from. The script adds the .has-* classes, so without it, or with
   reduced motion for the scroll beam, the site looks exactly as before.
   ========================================================================== */
:root { --fill-ease: cubic-bezier(0.785, 0.135, 0.15, 0.86); --fill-ms: 450ms; }

/* --- Arrow Fill Button (hyperiux, 21st.dev id 26022), adapted for the problem picker ---
   Their pill button grows a circular fill out of the arrow until it covers the button, while a
   second copy of the label, clipped to that same circle, recolors the text exactly where the fill
   has reached, and the arrow swaps out for a fresh one. Here: square row, iron fill, light text,
   brass arrow, and it also fills on keyboard focus. */
.picker-list a.has-fill { position: relative; isolation: isolate; --bleed: min(16px, var(--gutter)); }
.picker-list a.has-fill:hover .p-name { text-decoration: none; }
.picker-list .urgent a.has-fill:hover .p-name { text-decoration: underline; text-decoration-color: var(--brass); }
.picker-list a.has-fill .arrow { transition: transform var(--fill-ms) var(--fill-ease); }
.picker-list a.has-fill:hover > .arrow, .picker-list a.has-fill:focus-visible > .arrow,
.picker-list a.has-fill[data-pressed="true"] > .arrow { transform: translateX(70%) scale(0); }
.p-fill {
  position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--bleed)); right: calc(-1 * var(--bleed)); z-index: 1;
  display: grid; grid-template-columns: inherit; gap: inherit; align-items: center;
  padding: inherit; padding-left: var(--bleed); padding-right: var(--bleed);
  background: var(--iron); color: var(--white); pointer-events: none;
  clip-path: circle(0px at var(--fx, 100%) var(--fy, 50%));
  transition: clip-path var(--fill-ms) var(--fill-ease);
}
.p-fill .p-next { color: var(--muted-dark); }
.p-fill .arrow { color: var(--brass-light); transform: translateX(-60%) scale(0); transition: transform var(--fill-ms) var(--fill-ease); }
.picker-list a.has-fill:hover .p-fill, .picker-list a.has-fill:focus-visible .p-fill,
.picker-list a.has-fill[data-pressed="true"] .p-fill { clip-path: circle(var(--fr, 150%) at var(--fx, 100%) var(--fy, 50%)); }
.picker-list a.has-fill:hover .p-fill .arrow, .picker-list a.has-fill:focus-visible .p-fill .arrow,
.picker-list a.has-fill[data-pressed="true"] .p-fill .arrow { transform: none; }
.picker-list a.has-fill:focus-visible { outline-offset: 4px; }

/* --- Arrow Fill Button (hyperiux, id 26022), adapted for every red Call button ---
   The deeper valve red spreads out of the phone icon instead of the whole button switching color
   at once, and the icon swaps (old one out to the right, new one in from the left). */
.btn-call.has-fill { position: relative; isolation: isolate; overflow: hidden; }
.btn-call.has-fill:hover { background: var(--valve); }
.btn-call.has-fill::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--valve-dark);
  clip-path: circle(0px at var(--fx, 32px) var(--fy, 50%));
  transition: clip-path var(--fill-ms) var(--fill-ease);
}
.btn-call.has-fill:hover::before, .btn-call.has-fill:focus-visible::before,
.btn-call.has-fill[data-pressed="true"]::before { clip-path: circle(var(--fr, 150%) at var(--fx, 32px) var(--fy, 50%)); }
.btn-call .ico { position: relative; display: inline-block; width: 20px; height: 20px; flex: none; overflow: hidden; }
.btn-call .ico svg { position: absolute; inset: 0; transition: transform var(--fill-ms) var(--fill-ease); }
.btn-call .ico svg + svg { transform: translateX(-120%) scale(0.6); }
.btn-call.has-fill:hover .ico svg:first-child, .btn-call.has-fill:focus-visible .ico svg:first-child,
.btn-call.has-fill[data-pressed="true"] .ico svg:first-child { transform: translateX(120%) scale(0.6); }
.btn-call.has-fill:hover .ico svg + svg, .btn-call.has-fill:focus-visible .ico svg + svg,
.btn-call.has-fill[data-pressed="true"] .ico svg + svg { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .p-fill, .p-fill .arrow, .picker-list a.has-fill .arrow, .btn-call.has-fill::before, .btn-call .ico svg { transition: none; }
}

/* --- Timeline (Aceternity / manuarora700, 21st.dev id 857), adapted for the step lines ---
   Their timeline draws a beam down a faint track as you scroll through it, fading in at the
   start. Here the existing ruled line becomes the faint track and the solid line draws itself in:
   down the side on vertical step lists, left to right on the home page's row of four on desktop.
   Solid color and square ends instead of their purple-to-blue gradient. Transform only. */
.has-beam { position: relative; }
.has-beam > li::before { z-index: 1; }
.beam {
  position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; pointer-events: none; z-index: 0;
  background: var(--iron); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); opacity: var(--o, 0);
}
.steps.has-beam { border-left-color: var(--rule); }
.section-dark .steps.has-beam { border-left-color: rgba(200, 167, 101, 0.28); }
.section-dark .beam { background: var(--brass); }
.process.has-beam { border-top-color: var(--rule); }
.process > .beam { left: 0; right: 0; top: -2px; bottom: auto; width: auto; height: 2px; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
@media (max-width: 900px) {
  .process.has-beam { border-left-color: var(--rule); }
  .process > .beam { left: -2px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
}
@media print { .beam { display: none; } .has-beam { border-color: var(--iron) !important; } }

/* --- Visit steps (home page): the steps drive the headline, text and photo above ---
   The script builds four panels stacked in one grid cell (so the column holds the height of the
   tallest and nothing below jumps), four photos stacked in the frame, and turns the step titles
   into tabs. The active number turns brass; the step text moves up into the panel. */
.visit-stack { display: grid; }
.visit-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.visit-panel.is-active { visibility: visible; opacity: 1; transition: opacity 0.45s ease 0.1s, visibility 0s; }
.visit-note { color: var(--iron); font-weight: 600; max-width: 60ch; }
.has-stepper .visit-img { opacity: 0; transition: opacity 0.6s ease; }
.has-stepper .visit-img.is-active { opacity: 1; }
.process.is-stepper p { display: none; }
.process.is-stepper h3 { margin-bottom: 0; color: var(--muted); transition: color 0.3s ease; }
.process.is-stepper li.is-active h3, .process.is-stepper li:hover h3 { color: var(--iron); }
.process.is-stepper li::before { transition: background-color 0.3s ease, color 0.3s ease; }
.process.is-stepper li.is-active::before { background: var(--brass); color: var(--iron); }
.step-tab { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; }
.step-tab::after { content: ""; position: absolute; inset: -16px 0 0 -16px; }
.step-tab:focus-visible { outline: 2px solid var(--iron); outline-offset: 4px; }
.beam.is-jump { transition: transform 0.45s var(--fill-ease); }
.steps-toggle {
  display: flex; align-items: center; gap: 8px; margin: 28px 0 0 auto; min-height: 44px; padding: 0 14px;
  border-radius: var(--radius); border: 1px solid var(--rule); background: transparent; color: var(--iron);
  font: 600 0.88rem var(--font-body); cursor: pointer;
}
.steps-toggle:hover { border-color: var(--iron); }
.steps-toggle svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .visit-panel { transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; }
  .visit-panel.is-active { transform: none; transition: opacity 0.45s ease 0.1s, transform 0.55s var(--ease-out) 0.1s, visibility 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .visit-panel, .visit-panel.is-active, .has-stepper .visit-img, .process.is-stepper h3, .process.is-stepper li::before { transition: none; }
}
/* Phones: photo first, the four steps right under it, then the text, so the active step sits
   next to its photo and the room kept for the longest step falls at the end of the section. */
@media (max-width: 900px) {
  .has-stepper > .container { display: flex; flex-direction: column; }
  .has-stepper .split { display: contents; }
  .has-stepper .split > figure { order: 1; }
  .has-stepper ol.process { order: 2; margin-top: 36px; }
  .has-stepper .steps-toggle { order: 3; margin-top: 20px; }
  .has-stepper .split > div { order: 4; margin-top: 28px; }
}
@media print { .steps-toggle { display: none; } }