/* Collin & Sam Refrigeration: page styles. The engine (scrollcraft.css) is
   untouched; this file themes it with tokens and styles our own markup. */

:root {
  --sc-canvas:     #F4F7F9;
  --sc-surface:    #E3EBF0;
  --sc-ink:        #0F1C26;
  /* Steel soft (#5B87A8) is 3.6:1 on the canvas: fine for rules and labels, not
     for body copy. Body secondary text uses a darker step of the same hue. */
  --sc-ink-soft:   #35546C;
  --steel-soft:    #5B87A8;
  --sc-accent:     #1E5A8A;
  --sc-accent-ink: #FFFFFF;
  --heat:  #E8672A;   /* hot states only, never a button */
  --frost: #BFD7EA;   /* winter cold states only */
  --lamp:  #F2A541;   /* winter warm states only */

  --sc-font-display: "DM Sans", system-ui, sans-serif;
  --sc-font-text:    "DM Sans", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --sc-shadow-color: 205 45% 12%;
  --sc-r-sm: 8px; --sc-r-md: 14px; --sc-r-lg: 22px;

  --temp: 0;          /* 0 = the problem, 1 = comfortable. Written by site.js. */
  --bar-h: 64px;
}

body { background: var(--sc-canvas); }
.sc-display { font-weight: 650; }
.sc-grain { opacity: 0.03; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rm-only { display: none; }

/* ---- grading: the whole page reads one variable ------------------------- */
.graded {
  filter:
    sepia(calc((1 - var(--temp)) * 0.22))
    saturate(calc(1 + (1 - var(--temp)) * 0.18))
    brightness(calc(1 + (1 - var(--temp)) * 0.03));
}
[data-season="winter"] .graded {
  filter:
    saturate(calc(0.78 + var(--temp) * 0.24))
    hue-rotate(calc((1 - var(--temp)) * -10deg))
    brightness(calc(0.97 + var(--temp) * 0.03));
}

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.4rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: 0.005em;
  border-radius: var(--sc-r-sm); text-decoration: none; white-space: nowrap;
  box-shadow: var(--sc-e1), inset 0 1px 0 rgb(255 255 255 / 0.16);
  transition: background-color 160ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(0.98); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #174A73; } }
.btn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.btn--big { min-height: 56px; padding: 0 1.8rem; font-size: var(--sc-t-base); }
.phone {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); color: var(--sc-ink);
  text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--steel-soft);
  padding: 0.6rem 0.2rem; min-height: 44px; display: inline-flex; align-items: center;
}

/* ---- bar ---------------------------------------------------------------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: flex; align-items: center; gap: var(--sc-5);
  padding: 0 var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 90%, transparent);
  border-bottom: 1px solid var(--sc-hairline);
}
.bar__mark { display: flex; align-items: baseline; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.bar__name { font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; }
.bar__trade { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.season {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--sc-surface); border-radius: var(--sc-r-sm);
}
.season__btn {
  border: 0; background: transparent; cursor: pointer;
  min-height: 36px; padding: 0 0.85rem; border-radius: 6px;
  font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft);
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.season__btn[aria-pressed="true"] { background: var(--sc-canvas); color: var(--sc-ink); box-shadow: var(--sc-e1); }

/* ---- readout (signature) ------------------------------------------------ */
.readout {
  position: fixed; right: var(--sc-gutter); bottom: clamp(1rem, 3vh, 2rem); z-index: var(--sc-z-chrome);
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.55rem 1rem 0.6rem;
  background: var(--sc-ink); color: #F4F7F9;
  border-radius: var(--sc-r-md); box-shadow: var(--sc-e2);
  font-family: var(--sc-font-mono);
  transition: opacity 240ms var(--sc-ease-out);
}
.readout__label { font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: #9FB4C4; }
.readout__deg { font-size: 1.9rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; color: var(--readout-c, #F4F7F9); }
.readout__cta { display: none; }
.readout.is-away { opacity: 0; pointer-events: none; }

/* ---- 1 hero ------------------------------------------------------------- */
.hero__stage { background: #EDE4D6; }
[data-season="winter"] .hero__stage { background: #DCE6EE; }
.hero__plane { position: absolute; inset: 0; will-change: transform; }
.hero__plane picture, .hero__plane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; max-width: none; }
.hero__sky { transform: translate3d(0, calc(var(--sc-p, 0) * 4vh), 0) scale(calc(1.03 + var(--sc-p, 0) * 0.01)); }
.hero__house {
  transform-origin: 50% 100%;
  transform: translate3d(0, calc(var(--sc-p, 0) * -9vh), 0) scale(calc(1.02 + var(--sc-p, 0) * 0.06));
  z-index: 2;
}
.hero__haze {
  /* only the hot ground band shimmers; the roofline stays sharp */
  -webkit-mask-image: linear-gradient(to bottom, transparent 70%, #000 80%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 70%, #000 80%, #000 100%);
  filter: url(#heat);
  opacity: calc(1 - var(--temp) * 3);
}
[data-season="winter"] .hero__haze { display: none; }
.hero__glare {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 55% at 72% 0%, rgb(255 248 232 / 0.75), rgb(255 240 214 / 0) 70%);
  transform: translate3d(0, calc(var(--sc-p, 0) * -3vh), 0);
  opacity: calc(1 - var(--temp) * 4);
}
[data-season="winter"] .hero__glare { background: radial-gradient(70% 50% at 40% 0%, rgb(240 246 252 / 0.7), rgb(240 246 252 / 0) 70%); }
.hero__head {
  position: absolute; z-index: 1;   /* between sky (0) and house (2) */
  left: var(--sc-gutter); top: calc(var(--bar-h) + clamp(1.5rem, 5vh, 3.5rem));
  width: min(52rem, 70vw);
}
.hero__h1 { font-size: clamp(3rem, 1.6rem + 4.6vw, 6.2rem); max-width: 11ch; letter-spacing: -0.04em; line-height: 0.95; }
.hero__foot {
  /* Scrim only where the copy sits, and only while the copy is there: it fades
     with the sub/CTA cue (out 0.465..0.62) so the lawn is clear by mid-act. */
  position: absolute; left: 0; bottom: 0; width: min(56rem, 70vw); height: 60%; z-index: 3; pointer-events: none;
  /* Plateau under the copy block, then a tail that reaches transparent at the
     box edge (ellipse = box, so nothing clips to a hard line). */
  background: radial-gradient(100% 100% at 0% 100%, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 66%, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 75%, color-mix(in oklab, var(--sc-canvas) 45%, transparent) 85%, color-mix(in oklab, var(--sc-canvas) 12%, transparent) 93%, transparent 100%);
  opacity: clamp(0, (0.62 - var(--sc-p, 0)) / 0.155, 1);
}
.hero__copy {
  position: absolute; z-index: 4;
  left: var(--sc-gutter); bottom: clamp(2rem, 8vh, 5rem);
  width: min(30rem, 80vw);
}
.hero__sub { font-size: var(--sc-t-lg); line-height: 1.42; letter-spacing: -0.01em; margin: 0 0 var(--sc-5); max-width: 30ch; text-wrap: pretty; }
.hero__actions { display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap; }

/* ---- 2 unit ------------------------------------------------------------- */
.unit__stage {
  background:
    radial-gradient(62% 58% at 64% 62%, #D9DBDF 0%, #DFE3E7 40%, var(--sc-canvas) 78%);
  display: grid; grid-template-columns: minmax(18rem, 30rem) 1fr; align-items: center;
  gap: var(--sc-6); padding: calc(var(--bar-h) + 2vh) var(--sc-gutter) 4vh;
}
.unit__copy { position: relative; align-self: center; min-height: 16rem; }
.unit__copy > div { position: absolute; inset: 0 0 auto 0; }
.unit__copy .sc-lede { max-width: 32ch; }
.unit__rig { position: relative; height: min(82svh, 100%); display: grid; place-items: center; }
.unit__world {
  position: relative; height: 100%; max-height: 80svh; aspect-ratio: 620 / 690; max-width: 100%;
}
.unit__floor {
  position: absolute; left: 50%; bottom: 8%; width: 70%; height: 16%; translate: -45% 0;
  background: radial-gradient(closest-side, rgb(40 52 64 / 0.20), rgb(40 52 64 / 0));
  filter: blur(6px);
}
.unit__parts { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 62%; }
.part { position: absolute; max-width: none; height: auto; will-change: transform, opacity; transform-origin: 50% 50%; }
.part--whole { opacity: 0; }
.tag {
  position: absolute; left: var(--x); top: var(--y);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sc-ink-soft); white-space: nowrap;
  padding-top: 0.5rem; border-top: 1px solid var(--steel-soft);
  will-change: opacity;
}

/* ---- 3 room (peak) ------------------------------------------------------ */
.room__stage { background: #C9C3BC; }
.room__img, .room__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.room__cool { clip-path: inset(0 100% 0 0); will-change: clip-path; }
.room__edge {
  position: absolute; top: 0; bottom: 0; left: 0; width: 3px; z-index: 2;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 0.85) 30%, rgb(255 255 255 / 0.85) 70%, rgb(255 255 255 / 0));
  box-shadow: 0 0 24px 8px rgb(214 232 246 / 0.55);
  opacity: 0; will-change: transform, opacity;
}
[data-season="winter"] .room__edge { box-shadow: 0 0 24px 8px rgb(242 165 65 / 0.35); }
.air { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.air--tall { display: none; }
.air path {
  fill: none; stroke: rgb(255 255 255 / 0.7); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 9 7; animation: airflow 2.6s linear infinite;
}
.air .air__thin { stroke-width: 1.4; stroke: rgb(255 255 255 / 0.5); animation-duration: 3.4s; }
[data-season="winter"] .air path { stroke: rgb(255 214 160 / 0.75); }
@keyframes airflow { to { stroke-dashoffset: -32; } }
.air.is-paused path { animation-play-state: paused; }
.room__a, .room__b { position: absolute; z-index: 4; left: var(--sc-gutter); color: #F7FAFC; }
.room__b .sc-lede { color: #E4ECF2; }
.room__a .room__line { color: #F7FAFC; }
.room__col {
  position: absolute; inset: 0 auto 0 0; width: min(40rem, 44vw); z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgb(12 24 36 / 0.72) 0%, rgb(12 24 36 / 0.6) 50%, rgb(12 24 36 / 0) 100%);
}
.room__a { top: calc(var(--bar-h) + 14vh); width: min(22rem, 27vw); }
.room__b { bottom: clamp(2.5rem, 10vh, 6rem); width: min(20rem, 25vw); }
.room__b .sc-lede { margin-top: var(--sc-4); }
.room__line { font-size: var(--sc-t-2xl); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; max-width: 11ch; }

/* ---- 4 services --------------------------------------------------------- */
.svc__stage { background: var(--sc-surface); display: flex; align-items: center; }
.rail { display: flex; gap: clamp(1rem, 2vw, 2rem); padding: calc(var(--bar-h) + 2rem) var(--sc-gutter) 3rem; align-items: stretch; }
.rail > * { flex: 0 0 auto; }
.rail__lead { width: clamp(16rem, 26vw, 24rem); display: flex; flex-direction: column; justify-content: center; gap: var(--sc-4); order: -10; }
.rail__note { width: clamp(15rem, 22vw, 20rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--sc-4); order: 50; padding-right: 4vw; }
.card {
  width: clamp(16rem, 25vw, 23rem);
  background: var(--sc-canvas); border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e2), var(--sc-edge); overflow: hidden;
  display: flex; flex-direction: column;
}
.card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.card h3 { font-size: var(--sc-t-xl); font-weight: 650; letter-spacing: -0.02em; margin: var(--sc-5) var(--sc-5) var(--sc-2); }
.card p { margin: 0 var(--sc-5) var(--sc-5); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; }
/* season decides the lead service */
.card[data-svc="repair"] { order: 1; } .card[data-svc="install"] { order: 2; } .card[data-svc="tuneup"] { order: 3; }
.card[data-svc="thermostat"] { order: 4; } .card[data-svc="air"] { order: 5; } .card[data-svc="heat"] { order: 6; }
[data-season="winter"] .card[data-svc="heat"] { order: 0; }
[data-season="winter"] .card[data-svc="install"] { order: 7; }
@media (prefers-reduced-motion: no-preference) {
  .card { transition: none; }
  .card:nth-of-type(n+3) { opacity: calc(0.55 + min(1, max(0, var(--sc-p, 0) * 3.2 - 0.2)) * 0.45); }
  .card:nth-of-type(n+5) { opacity: calc(0.55 + min(1, max(0, var(--sc-p, 0) * 2.4 - 0.6)) * 0.45); }
  [data-season="winter"] .card[data-svc="heat"] { opacity: 1; }
}

/* ---- 5 visit ------------------------------------------------------------ */
.visit { padding-block: clamp(4rem, 12vh, 8rem); }
.visit__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.visit h2 { max-width: 9ch; position: sticky; top: calc(var(--bar-h) + 3rem); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-7); }
.steps li { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--sc-4); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.steps__n { font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); color: var(--sc-accent); padding-top: 0.35rem; }
.steps h3 { margin: 0 0 var(--sc-2); font-size: var(--sc-t-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.steps p { margin: 0; color: var(--sc-ink-soft); max-width: 40ch; }

/* ---- 6 close ------------------------------------------------------------ */
.close__stage { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sc-7); padding: calc(var(--bar-h) + 2rem) var(--sc-gutter) 5rem; }
.close__bg, .close__bg picture, .close__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.close__bg { z-index: 0; }
.close__hot { opacity: var(--close-hot, 0); }
.close__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, rgb(10 22 34 / 0.7) 0%, rgb(10 22 34 / 0) 16%),
    linear-gradient(90deg, rgb(10 22 34 / 0.78) 0%, rgb(10 22 34 / 0.55) 38%, rgb(10 22 34 / 0.12) 64%, rgb(10 22 34 / 0) 80%);
}
.close__copy { grid-area: 1 / 1; position: relative; z-index: 2; color: #F4F7F9; max-width: 34rem; }
.close__copy .sc-lede { color: #DCE6EE; margin: var(--sc-5) 0 var(--sc-6); max-width: 30ch; }
.close__actions { display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap; }
.phone--light { color: #F4F7F9; text-decoration-color: #9FB4C4; }
.dial-halo {
  grid-area: 1 / 2; place-self: center; z-index: 1; pointer-events: none;
  width: 0; height: 0; margin-right: 4vw; position: relative;
}
.dial-halo::before {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: calc(clamp(15rem, 27vw, 24rem) * 2.1); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(10 22 34 / 0.84) 0%, rgb(10 22 34 / 0.74) 62%, rgb(10 22 34 / 0.3) 84%, rgb(10 22 34 / 0) 100%);
}
.dial-wrap { grid-area: 1 / 2; position: relative; z-index: 2; color: #F4F7F9; display: grid; justify-items: center; gap: var(--sc-4); margin-right: 4vw; }
.dial {
  --size: clamp(15rem, 27vw, 24rem);
  position: relative; width: var(--size); height: var(--size); border-radius: 50%;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.dial:active { cursor: grabbing; }
.dial:focus-visible { outline: 3px solid #F4F7F9; outline-offset: 8px; }
.dial__ticks { filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.7)); position: absolute; inset: -12%; width: 124%; height: 124%; overflow: visible; }
.dial__ticks line { stroke: rgb(244 247 249 / 0.55); stroke-width: 0.8; }
.dial__ticks line.on { stroke: var(--dial-c, #9FD0F2); stroke-width: 1.3; }
.dial__ticks text { fill: #E6EEF4; font-family: "IBM Plex Mono", monospace; font-size: 6.5px; text-anchor: middle; dominant-baseline: middle; }
.dial__knob { position: absolute; inset: 0; transform: rotate(var(--ang, 0deg)); will-change: transform; }
.dial__knob img { width: 100%; height: 100%; filter: drop-shadow(0 14px 22px rgb(0 0 0 / 0.45)); pointer-events: none; }
.dial__notch { position: absolute; left: 50%; top: 5.5%; width: 4px; height: 7%; translate: -50% 0; border-radius: 2px; background: var(--dial-c, #9FD0F2); }
.dial__face { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.dial__num { font-family: var(--sc-font-mono); font-weight: 500; font-size: calc(var(--size) * 0.24); line-height: 1; color: #F4F7F9; font-variant-numeric: tabular-nums; }
.dial__unit { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: #B9C9D6; margin-top: 0.4rem; }
.dial__hint { margin: 0; font-size: var(--sc-t-xs); color: #F4F7F9; font-family: var(--sc-font-mono); }
.foot {
  position: absolute; z-index: 2; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 1.25rem;
  display: flex; gap: 0.2rem 1.5rem; flex-wrap: wrap;
  font-size: var(--sc-t-xs); color: #DCE6EE; font-family: var(--sc-font-mono);
}

/* ---- mobile ------------------------------------------------------------- */
@media (max-width: 860px) {
  :root { --bar-h: 56px; }
  .bar { gap: var(--sc-3); }
  .bar__trade, .bar__cta { display: none; }
  .season__btn { padding: 0 0.7rem; }
  .readout {
    left: 0; right: 0; bottom: 0; border-radius: 0;
    padding: 0.6rem var(--sc-gutter) calc(0.6rem + env(safe-area-inset-bottom));
    align-items: center;
  }
  .readout__deg { font-size: 1.6rem; }
  .readout__cta { display: inline-flex; margin-left: auto; min-height: 44px; }
  .readout.is-away { opacity: 1; pointer-events: auto; }
  .readout.is-away .readout__label, .readout.is-away .readout__deg { visibility: hidden; }

  .hero__plane img { object-position: 50% 50%; }
  .hero__head { top: calc(var(--bar-h) + 1.25rem); width: auto; right: var(--sc-gutter); }
  .hero__h1 { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .hero__copy { bottom: calc(76px + 1rem); width: auto; right: var(--sc-gutter); }
  .hero__foot { width: 100%; height: 46%; background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 50%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 78%, transparent 92%); }
  .hero__sub { font-size: var(--sc-t-base); }
  .hero__house { transform: translate3d(0, calc(var(--sc-p, 0) * -6vh), 0) scale(calc(1.02 + var(--sc-p, 0) * 0.05)); }

  .unit__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; padding: calc(var(--bar-h) + 1.25rem) var(--sc-gutter) 84px; gap: var(--sc-3); }
  .unit__copy { min-height: 9.5rem; }
  .unit__copy .sc-display--md { font-size: 1.9rem; }
  .unit__copy .sc-lede { font-size: var(--sc-t-base); }
  .unit__rig { height: 100%; align-self: stretch; }
  .unit__world { height: auto; width: 100%; max-height: 100%; }
  .tag { display: none; }

  .air--wide { display: none; }
  .air--tall { display: block; }
  .room__cool { clip-path: inset(0 0 100% 0); }
  .room__edge { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 3px;
    background: linear-gradient(to right, rgb(255 255 255 / 0), rgb(255 255 255 / 0.85) 30%, rgb(255 255 255 / 0.85) 70%, rgb(255 255 255 / 0)); }
  .room__col { width: auto; inset: 0 0 auto 0; height: 46%; background: linear-gradient(180deg, rgb(12 24 36 / 0.68) 0%, rgb(12 24 36 / 0.52) 60%, rgb(12 24 36 / 0) 100%); }
  .room__a { top: calc(var(--bar-h) + 7vh); width: auto; right: var(--sc-gutter); }
  .room__b { top: calc(var(--bar-h) + 5vh); bottom: auto; width: auto; right: var(--sc-gutter); }
  .room__b .sc-display--lg { font-size: 2.6rem; }

  /* the service pan becomes a native swipe row on phones */
  .svc__stage { flex-direction: column; align-items: stretch; justify-content: center; }
  .svc.is-swipe .rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 5rem; }
  .svc.is-swipe .rail > * { scroll-snap-align: start; }
  .rail__lead { width: 78vw; }
  .card { width: 76vw; }
  .rail__note { width: 70vw; }

  .visit { padding-bottom: 6rem; }
  .visit__grid { grid-template-columns: 1fr; }
  .visit h2 { position: static; max-width: 12ch; }

  .close__stage { grid-template-columns: 1fr; align-content: start; padding: calc(var(--bar-h) + 1.5rem) var(--sc-gutter) 7rem; gap: var(--sc-5); }
  .close__scrim { background: linear-gradient(180deg, rgb(10 22 34 / 0.82) 0%, rgb(10 22 34 / 0.6) 40%, rgb(10 22 34 / 0.35) 70%, rgb(10 22 34 / 0.55) 100%); }
  .close__copy .sc-lede { margin: var(--sc-3) 0 var(--sc-4); font-size: var(--sc-t-base); }
  .close__copy .sc-display--lg { font-size: 2.3rem; }
  .close__actions .btn { display: none; } /* the bottom bar carries Book a visit here */
  .dial-wrap { margin: 0; grid-area: 2 / 1; }
  .dial-halo { grid-area: 2 / 1; margin: 0; }
  .dial-halo::before { width: calc(min(62vw, 16rem) * 1.8); }
  .close__copy { grid-area: 1 / 1; }
  .dial { --size: min(62vw, 16rem); }
  .foot { bottom: calc(76px + 0.5rem); flex-direction: column; gap: 0.2rem; }
}

/* ---- reduced motion: a complete static page ----------------------------- */
.rm .rm-only { display: block; }
.rm [data-sc-stage] { position: relative; min-height: 100svh; }
.rm .hero__stage, .rm .room__stage, .rm .close__stage { height: 100svh; }
.rm .hero__sky, .rm .hero__house, .rm .hero__glare { transform: none; }
.rm .hero__haze { display: none; }
.rm .part { display: none; }
.rm .part--whole { display: block; opacity: 1; }
.rm .room__cool { clip-path: none; }
.rm .room__edge { display: none; }
.rm .air path { animation: none; stroke-dasharray: none; }
.rm .unit__copy > div { position: static; }
.rm .unit__copy { display: grid; gap: var(--sc-5); min-height: 0; }
.rm .unit__stage { height: auto; }
.rm .svc__stage { min-height: 0; padding-block: 2rem; }
.rm .svc .rail { overflow-x: auto; scroll-snap-type: x mandatory; }
.rm .svc .rail > * { scroll-snap-align: start; }
.rm .tag { display: none; }