/* Pellmarsh — layout and components. Every value is a --s-* token from assets/tokens.css.
   Sections, each composed differently (PAIR-NOTES "Compositions"):
   1 arrival: diagonal split · 2 the difference: stage + console · 3 houses: strip + dials
   4 pavements: full-bleed + docked panel · 5 pools: photo + tile course band
   6 how we work: axis timeline · 7 free site visit: site-plan picker on the cream ground (the plan is the colour event) */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s-nav-h); }
html.pm-smooth { scroll-behavior: smooth; }
body {
    margin: 0; background: var(--s-bg); color: var(--s-text);
    font: var(--s-weight-regular) var(--s-step-body)/var(--s-leading-body) var(--s-font-body);
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: var(--s-focus-ring) solid var(--s-focus-light); outline-offset: var(--s-focus-offset); }

.pm-wrap { width: 100%; max-width: var(--s-max); margin-inline: auto; padding-inline: var(--s-gutter); }
.pm-skip {
    position: absolute; left: var(--s-space-s); top: var(--s-space-s); z-index: var(--s-z-nav);
    padding: var(--s-space-xs) var(--s-space-s); background: var(--s-soot); color: var(--s-spray);
    border-radius: var(--s-radius-s); transform: translateY(-200%);
}
.pm-skip:focus { transform: none; outline-color: var(--s-focus-dark); }
.pm-h2 {
    font: var(--s-weight-display) var(--s-step-h2)/var(--s-leading-display) var(--s-font-display);
    letter-spacing: var(--s-track-heading); text-wrap: balance;
}

/* ---- The PAVER TILE button: radius 10, hard soot offset shadow, presses into it ---- */
.pm-tile {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--s-btn-h); padding: 0 var(--s-btn-pad-x);
    background: var(--s-btn-bg); color: var(--s-btn-ink);
    border: var(--s-btn-edge) solid var(--s-btn-ink); border-radius: var(--s-btn-radius);
    box-shadow: var(--s-btn-shadow-x) var(--s-btn-shadow-y) 0 0 var(--s-btn-ink);
    font: var(--s-weight-display) var(--s-step-body)/var(--s-leading-heading) var(--s-font-display);
    text-decoration: none; cursor: pointer;
    transition: transform var(--s-dur-ui) var(--s-ease), box-shadow var(--s-dur-ui) var(--s-ease), background-color var(--s-dur-ui) var(--s-ease);
}
.pm-tile:hover { background: var(--s-btn-bg-hover); }
.pm-tile:active { transform: translate(var(--s-press), var(--s-press)); box-shadow: 0 0 0 0 var(--s-btn-ink); }
.pm-tile--nav { min-height: var(--s-nav-btn-h); padding-inline: var(--s-nav-btn-pad-x); font-size: var(--s-step-small); }

/* ---- Nav ------------------------------------------------------------------------- */
.pm-nav {
    position: sticky; top: 0; z-index: var(--s-z-nav);
    display: flex; align-items: center; gap: var(--s-nav-gap);
    height: var(--s-nav-h); padding-inline: var(--s-gutter);
    background: var(--s-bg); border-bottom: var(--s-hairline) solid var(--s-rule);
}
.pm-logo {
    display: inline-flex; align-items: center; gap: var(--s-space-xs); min-height: var(--s-tap);
    font: var(--s-weight-display) var(--s-step-logo)/var(--s-leading-solid) var(--s-font-display);
    letter-spacing: var(--s-track-logo); text-decoration: none; margin-right: auto;
}
.pm-logo__mark {
    width: var(--s-space-m); height: var(--s-space-m); border-radius: var(--s-radius-s);
    background: linear-gradient(135deg, var(--s-soot) 0 46%, var(--s-chartreuse) 46% 100%);
    border: var(--s-btn-edge) solid var(--s-soot);
}
.pm-nav__links { display: none; }
.pm-nav__links ul { display: flex; gap: var(--s-nav-gap); }
.pm-nav__links a, .pm-nav__phone {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    font: var(--s-weight-semi) var(--s-step-small)/var(--s-leading-caption) var(--s-font-body); text-decoration: none;
}
.pm-nav__links a:hover, .pm-nav__phone:hover { text-decoration: underline; }
.pm-nav__phone { display: none; font-variant-numeric: var(--s-numeric); }
.pm-nav__menu {
    min-height: var(--s-tap); padding: 0 var(--s-space-s); background: none; cursor: pointer;
    border: var(--s-btn-edge) solid var(--s-soot); border-radius: var(--s-radius-s);
    font: var(--s-weight-semi) var(--s-step-small)/var(--s-leading-caption) var(--s-font-body);
}
.pm-nav__short { display: none; }

.pm-sheet {
    margin: 0 0 0 auto; width: min(100%, var(--s-sheet-max)); height: 100%; max-height: none;
    padding: var(--s-space-m) var(--s-gutter); border: 0; background: var(--s-bg); color: var(--s-text);
}
.pm-sheet::backdrop { background: var(--s-scrim); }
.pm-sheet__top { display: flex; justify-content: space-between; align-items: center; }
.pm-sheet__close {
    min-height: var(--s-tap); padding: 0 var(--s-space-s); background: none; cursor: pointer;
    border: var(--s-btn-edge) solid var(--s-soot); border-radius: var(--s-radius-s); font-weight: var(--s-weight-semi);
}
.pm-sheet__list { margin-block: var(--s-space-l); }
.pm-sheet__list a {
    display: flex; align-items: center; min-height: var(--s-btn-h); text-decoration: none;
    border-bottom: var(--s-hairline) solid var(--s-rule);
    font: var(--s-weight-display) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display);
}
.pm-sheet__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-m); }
.pm-sheet__phone { display: inline-flex; align-items: center; min-height: var(--s-tap); font-weight: var(--s-weight-semi); }

/* ---- 1. Arrival -------------------------------------------------------------------- */
.pm-hero {
    position: relative; overflow: hidden; isolation: isolate;
    height: calc(100svh - var(--s-ribbon-h) - var(--s-nav-h)); min-height: var(--s-hero-min-h);
    background: var(--s-field); color: var(--s-field-ink);
}
/* The photo is full-bleed under the panel. With JS, site.js places the image so its REAL grime line
   runs where the copy needs it and cuts the panel along that same line (one line, one angle). */
.pm-hero__photo { position: absolute; inset: 0; z-index: var(--s-z-photo); overflow: hidden; }
.pm-hero__photo picture, .pm-hero__photo img { width: 100%; height: 100%; }
.pm-hero__photo img { object-fit: cover; object-position: var(--s-hero-pos); }
.pm-hero.is-cut .pm-hero__photo img { position: absolute; max-width: none; object-fit: fill; }
.pm-anim .pm-hero__photo img { animation: pm-settle var(--s-dur-photo) var(--s-ease-out) both; }
@keyframes pm-settle { from { transform: scale(1); } to { transform: scale(var(--s-scale-photo)); } }
.pm-hero__panel {
    position: absolute; inset: 0; z-index: var(--s-z-panel); background: var(--s-field);
    clip-path: polygon(0 0, var(--s-hero-split) 0, var(--s-hero-split-foot) 100%, 0 100%);
}
.pm-hero__line { position: absolute; inset: 0; z-index: var(--s-z-line); width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pm-hero__stroke, .pm-hero__stroke-in { fill: none; stroke-linecap: butt; }
.pm-hero:not(.is-cut) .pm-hero__line { display: none; }
.pm-hero__stroke { stroke: var(--s-soot); stroke-width: var(--s-cut-w); }
.pm-hero__stroke-in { stroke: var(--s-chartreuse); stroke-width: calc(var(--s-cut-w) - var(--s-cut-edge)); }
.pm-anim .pm-hero__stroke, .pm-anim .pm-hero__stroke-in { transition: stroke-dashoffset var(--s-dur-cut) var(--s-ease-cut); }
.pm-hero__copy {
    position: relative; z-index: var(--s-z-copy);
    max-width: calc(var(--s-hero-copy-w) + 2 * var(--s-gutter));
    padding: var(--s-hero-pad-top) var(--s-gutter) var(--s-space-l);
}
.pm-hero__title {
    font: var(--s-weight-display) var(--s-step-hero)/var(--s-leading-solid) var(--s-font-display);
    letter-spacing: var(--s-track-display);
}
.pm-hero__title span { display: block; white-space: nowrap; }
.pm-hero__lede { margin-top: var(--s-space-m); max-width: var(--s-measure-narrow); font-size: var(--s-step-lede); line-height: var(--s-leading-caption); }
/* The surface jumps sit under the CTA as soot tabs cut on the clean edge's own lean:
   the diagonal device, not a form widget beside the headline. */
.pm-hero__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-tab-gap); margin-top: var(--s-space-m); }
.pm-hero__tabs-label, .pm-hero__tabs a {
    display: inline-flex; align-items: center; justify-content: center; min-height: var(--s-tab-h);
    font: var(--s-weight-strong) var(--s-step-body)/var(--s-leading-solid) var(--s-font-body);
}
.pm-hero__tabs-label { font-weight: var(--s-weight-regular); padding-right: var(--s-space-xs); }
.pm-hero__tabs a {
    padding: 0 calc(var(--s-tab-pad-x) + var(--s-tab-lean));
    background: var(--s-soot); color: var(--s-chartreuse); text-decoration: none;
    clip-path: polygon(var(--s-tab-lean) 0, 100% 0, calc(100% - var(--s-tab-lean)) 100%, 0 100%);
    transition: background-color var(--s-dur-ui) var(--s-ease), color var(--s-dur-ui) var(--s-ease);
}
.pm-hero__tabs a:hover { background: var(--s-spray); color: var(--s-soot); }
/* The clip would hide an outline, so focus is a full colour swap plus a thick underline. */
.pm-hero__tabs a:focus-visible { outline: none; background: var(--s-spray); color: var(--s-soot); text-decoration: underline; text-decoration-thickness: var(--s-tab-rule); text-underline-offset: var(--s-tab-gap); }
.pm-hero__cta { margin-top: var(--s-space-m); }
/* Desktop (set by site.js): the tabs leave the copy column for the clean stone under the line. The
   "See it on" label takes a chartreuse chip so it never sits bare on the photograph. */
.pm-hero.pm-tabs-under .pm-hero__tabs { position: absolute; margin: 0; flex-wrap: nowrap; width: max-content; }
.pm-hero.pm-tabs-under .pm-hero__tabs-label { min-height: var(--s-tab-h); padding: 0 var(--s-space-s); background: var(--s-field); color: var(--s-field-ink); border-radius: var(--s-radius-s); }
/* A solid soot chip on the clean side, just under the line (never bare text on the photo). */
.pm-hero__note {
    position: absolute; left: var(--s-gutter); bottom: var(--s-space-l); z-index: var(--s-z-copy);
    max-width: var(--s-chip-max); padding: var(--s-space-xs) var(--s-space-s); border-radius: var(--s-radius-s);
    background: var(--s-soot); color: var(--s-spray);
    font: var(--s-weight-semi) var(--s-step-caption)/var(--s-leading-caption) var(--s-font-body);
}

/* ---- 2. The difference --------------------------------------------------------------- */
.pm-diff { padding-block: var(--s-section) var(--s-section-tight); }
.pm-diff__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-space-m); }
.pm-diff__seg-wrap { flex: none; }
.pm-seg { display: inline-flex; gap: var(--s-seg-pad); padding: var(--s-seg-pad); background: var(--s-soot); border-radius: var(--s-radius); }
.pm-seg__tab {
    min-height: var(--s-seg-h); padding: 0 var(--s-space-m); border: 0; border-radius: var(--s-radius-s); cursor: pointer;
    background: transparent; color: var(--s-spray);
    font: var(--s-weight-display) var(--s-step-body)/var(--s-leading-solid) var(--s-font-display);
    transition: background-color var(--s-dur-ui) var(--s-ease), color var(--s-dur-ui) var(--s-ease);
}
.pm-seg__tab:hover { background: var(--s-soot-2); }
.pm-seg__tab[aria-selected="true"] { background: var(--s-chartreuse); color: var(--s-soot); }
.pm-seg__tab:focus-visible { outline-color: var(--s-focus-dark); outline-offset: 0; }
.pm-diff__panel { display: grid; gap: var(--s-space-l); margin-top: var(--s-space-m); }
.pm-diff__panel[hidden] { display: none; }
.pm-diff__panel:focus { outline: none; }
.pm-stage__frame {
    position: relative; overflow: hidden; aspect-ratio: var(--s-stage-ratio);
    border-radius: var(--s-radius); background: var(--s-surface);
    touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: crosshair;
}
.pm-stage__frame picture, .pm-stage__frame img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pm-stage__frame img { object-fit: cover; pointer-events: none; }
.pm-stage__before, .pm-stage__after { position: absolute; inset: 0; }
.pm-stage__after { clip-path: inset(0 calc(100% - var(--pm-v)) 0 0); }
.pm-stage__label {
    position: absolute; left: var(--s-space-s); top: var(--s-space-s); z-index: var(--s-z-copy);
    padding: var(--s-space-2xs) var(--s-space-xs); border-radius: var(--s-radius-s);
    background: var(--s-soot); color: var(--s-spray); font: var(--s-weight-semi) var(--s-step-caption)/var(--s-leading-caption) var(--s-font-body);
}
.pm-stage__svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--s-z-line); pointer-events: none; }
.pm-stage__svg line { vector-effect: non-scaling-stroke; stroke-linecap: round; }
.pm-stage__track { stroke: var(--s-spray); stroke-width: var(--s-cut-edge); stroke-dasharray: var(--s-track-dash); }
.pm-stage__done-edge { stroke: var(--s-soot); stroke-width: calc(var(--s-cut-w) + 2 * var(--s-cut-edge)); }
.pm-stage__done { stroke: var(--s-chartreuse); stroke-width: var(--s-cut-w); }
.pm-stage__notch, .pm-stage__grip, .pm-stage__chip { position: absolute; left: 50%; top: 50%; }
.pm-stage__notch {
    z-index: var(--s-z-line); width: var(--s-note-dot); height: var(--s-note-dot); border-radius: 50%;
    background: var(--s-soot); border: var(--s-cut-edge) solid var(--s-spray); transform: translate(-50%, -50%);
}
.pm-stage__notch.is-passed { background: var(--s-chartreuse); border-color: var(--s-soot); }
.pm-stage__chip {
    z-index: var(--s-z-copy); width: max-content; max-width: var(--s-chip-max);
    padding: var(--s-space-xs) var(--s-space-s); border-radius: var(--s-radius-s);
    background: var(--s-soot); color: var(--s-spray);
    font: var(--s-weight-semi) var(--s-step-caption)/var(--s-leading-caption) var(--s-font-body);
    pointer-events: none; visibility: hidden;
}
.pm-stage.is-live .pm-stage__chip { visibility: visible; }
.pm-stage__grip {
    z-index: var(--s-z-grip); width: var(--s-cut-hit); height: var(--s-cut-hit); border-radius: 50%;
    transform: translate(-50%, -50%); cursor: grab; touch-action: none;
    display: grid; place-items: center;
}
.pm-stage__grip:active { cursor: grabbing; }
.pm-stage__grip:focus-visible { outline: var(--s-focus-ring) solid var(--s-soot); outline-offset: 0; box-shadow: 0 0 0 calc(var(--s-focus-ring) * 2) var(--s-spray); }
.pm-nozzle { width: var(--s-cut-grip); height: auto; overflow: visible; transform: translateY(var(--s-grip-nozzle)); }
.pm-nozzle__disc { fill: var(--s-chartreuse); stroke: var(--s-soot); stroke-width: 3; }
.pm-nozzle__tip { fill: var(--s-soot); }
.pm-nozzle__ribs { fill: none; stroke: var(--s-soot); stroke-width: 3; stroke-linecap: round; }
/* The section's lede lives here, as the slider's caption, with the frame's own label under it. */
.pm-stage__cap { display: grid; gap: var(--s-space-xs); margin-top: var(--s-space-m); max-width: var(--s-measure); }
.pm-stage__lede { font-size: var(--s-step-lede); line-height: var(--s-leading-caption); }
.pm-stage__what { font-size: var(--s-step-caption); line-height: var(--s-leading-caption); }
.pm-stage__what strong { font-weight: var(--s-weight-strong); }
.pm-stage__what span { color: var(--s-muted); }
.pm-console__label, .pm-houses__list-label, .pm-pave__label, .pm-course__label, .pm-picked__label {
    font: var(--s-weight-strong) var(--s-step-caption)/var(--s-leading-caption) var(--s-font-body);
}
.pm-console__label { color: var(--s-muted); }
.pm-console__title {
    margin-top: var(--s-space-xs);
    font: var(--s-weight-display) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display); letter-spacing: var(--s-track-heading);
}
.pm-console__method { margin-top: var(--s-space-s); max-width: var(--s-measure); }
.pm-console__notes { margin-top: var(--s-space-m); border-top: var(--s-hairline) solid var(--s-rule); counter-reset: pm-note; }
.pm-console__notes li {
    counter-increment: pm-note; display: grid; grid-template-columns: var(--s-space-l) 1fr; gap: var(--s-space-xs);
    padding-block: var(--s-space-s); border-bottom: var(--s-hairline) solid var(--s-rule);
    color: var(--s-muted); transition: color var(--s-dur-ui) var(--s-ease);
}
.pm-console__notes li::before {
    content: counter(pm-note); font: var(--s-weight-display) var(--s-step-body)/var(--s-leading-body) var(--s-font-figure);
    font-variant-numeric: var(--s-numeric);
}
.pm-console__notes li.is-on { color: var(--s-text); font-weight: var(--s-weight-strong); }
.pm-console__hint { margin-top: var(--s-space-m); font-size: var(--s-step-caption); color: var(--s-muted); }
.pm-honest { display: grid; gap: var(--s-space-xs); margin-top: var(--s-space-xl); }
.pm-honest__rule { display: block; height: var(--s-cut-edge); margin-bottom: var(--s-space-s); background: var(--s-soot); }
.pm-honest__title { font: var(--s-weight-display) var(--s-step-body)/var(--s-leading-heading) var(--s-font-display); }
.pm-honest p { max-width: var(--s-measure); color: var(--s-muted); }

/* ---- 3. Houses: strip + the gauge board -------------------------------------------- */
/* Strip photo with its headline set INSIDE, on a solid chartreuse label docked to the bottom edge;
   the clean edge runs in over its top. Then the intro (lede + what we clean) beside a soot board
   carrying two working instruments: each dial reads its typical range, and its trigger, held,
   pushes the needle to the top of that range (pointer, touch, Space/Enter). */
.pm-strip { position: relative; aspect-ratio: var(--s-full-ratio-p); overflow: hidden; }
.pm-strip picture, .pm-strip img { width: 100%; height: 100%; }
.pm-strip img { object-fit: cover; object-position: var(--s-house-pos); }
.pm-strip__label {
    position: absolute; left: 0; bottom: 0; z-index: var(--s-z-copy); max-width: var(--s-strip-label-w);
    padding: var(--s-space-m) var(--s-gutter) var(--s-space-s); background: var(--s-field); color: var(--s-field-ink);
    clip-path: polygon(0 0, calc(100% - var(--s-label-lean)) 0, 100% 100%, 0 100%);
    padding-right: calc(var(--s-gutter) + var(--s-label-lean));
}
.pm-houses__body { display: grid; gap: var(--s-space-xl); padding-block: var(--s-space-xl) var(--s-section-tight); }
.pm-houses__intro { display: grid; gap: var(--s-space-l); align-content: start; }
.pm-houses__lede {
    max-width: var(--s-measure-narrow);
    font: var(--s-weight-display) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display); letter-spacing: var(--s-track-heading);
}
.pm-houses__list-label { color: var(--s-muted); }
.pm-houses__list { display: grid; margin-top: var(--s-space-xs); border-top: var(--s-btn-edge) solid var(--s-soot); }
.pm-houses__list li {
    display: flex; align-items: center; gap: var(--s-space-s); min-height: var(--s-tap);
    padding-block: var(--s-space-xs); border-bottom: var(--s-hairline) solid var(--s-rule);
    font: var(--s-weight-strong) var(--s-step-body)/var(--s-leading-caption) var(--s-font-body);
}
.pm-houses__list li::before {
    content: ""; flex: none; width: var(--s-space-s); height: var(--s-cut-w);
    background: var(--s-chartreuse); border: var(--s-hairline) solid var(--s-soot); transform: skewY(var(--s-edge-skew));
}
.pm-board {
    position: relative; display: grid; gap: var(--s-space-m);
    padding: var(--s-space-l) var(--s-space-m); border-radius: var(--s-radius);
    background: var(--s-panel); color: var(--s-panel-ink);
    clip-path: polygon(var(--s-board-notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--s-board-notch));
}
.pm-board::before {
    content: ""; position: absolute; left: 0; top: 0; width: calc(var(--s-board-notch) * 1.414); height: var(--s-cut-w);
    background: var(--s-chartreuse); transform-origin: 0 0; transform: translate(0, var(--s-board-notch)) rotate(-45deg);
}
.pm-board__label { font: var(--s-weight-strong) var(--s-step-caption)/var(--s-leading-caption) var(--s-font-body); color: var(--s-panel-muted); padding-left: var(--s-space-l); }
.pm-gauges { display: grid; gap: var(--s-space-l); }
.pm-gauge { display: grid; gap: var(--s-space-s); justify-items: center; text-align: center; container-type: inline-size; }
.pm-gauge__head strong { display: block; font: var(--s-weight-display) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display); }
.pm-gauge__head span { color: var(--s-panel-muted); font-weight: var(--s-weight-strong); font-size: var(--s-step-caption); }
/* The plate: a machined bezel ring, a soot-2 face, a glass highlight; the trigger docks on its foot. */
.pm-gauge__plate {
    position: relative; width: 100%; max-width: var(--s-gauge-size);
    padding: var(--s-space-m) var(--s-space-m) var(--s-space-s);
    border-radius: var(--s-gauge-plate-r); background: var(--s-soot-2);
    box-shadow: inset 0 0 0 var(--s-btn-edge) var(--s-bezel), inset 0 var(--s-space-xs) var(--s-space-m) var(--s-plate-shade), 0 var(--s-space-2xs) 0 var(--s-plate-lip);
}
.pm-gauge__plate::after {
    content: ""; position: absolute; inset: var(--s-space-xs) var(--s-space-xs) 45% var(--s-space-xs); border-radius: var(--s-gauge-plate-r) var(--s-gauge-plate-r) 50% 50%;
    background: linear-gradient(var(--s-glass), transparent); pointer-events: none;
}
.pm-gauge__dial { display: block; width: 100%; height: auto; overflow: visible; }
.pm-gauge__arc { fill: none; stroke: var(--s-rule-dark); stroke-width: var(--s-gauge-stroke); }
.pm-gauge__band-edge { fill: none; stroke: var(--s-spray); stroke-width: calc(var(--s-gauge-stroke) + 2 * var(--s-cut-edge)); }
.pm-gauge__band { fill: none; stroke: var(--s-chartreuse); stroke-width: var(--s-gauge-stroke); }
.pm-gauge__tick { stroke: var(--s-spray); stroke-width: var(--s-gauge-tick); }
.pm-gauge__tick--minor { stroke: var(--s-panel-muted); stroke-width: var(--s-hairline); }
.pm-gauge__num, .pm-gauge__unit {
    fill: var(--s-panel-muted); font: var(--s-weight-strong) var(--s-gauge-num)/var(--s-leading-solid) var(--s-font-figure);
    font-variant-numeric: var(--s-numeric); text-anchor: middle; dominant-baseline: middle;
}
.pm-gauge__unit { fill: var(--s-chartreuse); }
.pm-gauge__needle { transform-box: view-box; transform-origin: 100px 104px; transform: rotate(var(--pm-angle)); }
.pm-gauge__needle line { stroke: var(--s-chartreuse); stroke-width: var(--s-gauge-needle-w); stroke-linecap: round; }
.pm-anim .pm-gauge__needle { transition: transform var(--s-dur-needle) var(--s-ease-settle); }
.pm-gauge.is-held .pm-gauge__needle { transform: rotate(var(--pm-angle-hi)); transition-duration: var(--s-dur-squeeze); }
.pm-anim .pm-gauge.is-settled:not(.is-held) .pm-gauge__needle line { animation: pm-flutter var(--s-dur-flutter) var(--s-ease) infinite alternate; transform-box: view-box; transform-origin: 100px 104px; }
@keyframes pm-flutter { from { transform: rotate(calc(-1 * var(--s-flutter))); } to { transform: rotate(var(--s-flutter)); } }
.pm-board.is-pre .pm-gauge__needle { transform: rotate(var(--s-gauge-start)); }
.pm-gauge__hub { fill: var(--s-spray); stroke: var(--s-soot); stroke-width: 3; }
.pm-gauge__trigger {
    display: inline-flex; align-items: center; gap: var(--s-space-xs); min-height: var(--s-tap); margin-top: var(--s-space-xs);
    padding: 0 var(--s-space-m); border: var(--s-btn-edge) solid var(--s-chartreuse); border-radius: var(--s-btn-radius);
    background: transparent; color: var(--s-spray); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
    font: var(--s-weight-display) var(--s-step-small)/var(--s-leading-solid) var(--s-font-display);
    box-shadow: 0 var(--s-press) 0 0 var(--s-chartreuse-deep);
    transition: transform var(--s-dur-ui) var(--s-ease), box-shadow var(--s-dur-ui) var(--s-ease), background-color var(--s-dur-ui) var(--s-ease);
}
.pm-gauge__trigger-dot { width: var(--s-space-xs); height: var(--s-space-xs); border-radius: 50%; background: var(--s-chartreuse); }
.pm-gauge__trigger:hover { background: var(--s-soot); }
.pm-gauge__trigger[aria-pressed="true"] { transform: translateY(var(--s-press)); box-shadow: 0 0 0 0 var(--s-chartreuse-deep); background: var(--s-chartreuse); color: var(--s-soot); }
.pm-gauge__trigger[aria-pressed="true"] .pm-gauge__trigger-dot { background: var(--s-soot); }
.pm-gauge__trigger:focus-visible { outline-color: var(--s-focus-dark); }
.pm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pm-gauge__typical { display: grid; justify-items: center; gap: var(--s-space-2xs); }
.pm-gauge__typ-label { font-size: var(--s-step-caption); font-weight: var(--s-weight-strong); color: var(--s-panel-muted); }
.pm-gauge__figure {
    font: var(--s-weight-display) var(--s-step-figure)/var(--s-leading-heading) var(--s-font-figure);
    font-variant-numeric: var(--s-numeric); letter-spacing: var(--s-track-heading); white-space: nowrap; color: var(--s-chartreuse);
}
.pm-gauge__sentence { max-width: var(--s-measure-narrow); color: var(--s-panel-ink); }
.pm-gauges__note { font-size: var(--s-step-caption); color: var(--s-panel-muted); text-align: center; }

/* ---- The clean edge between sections, and the clean pass over photographs --------------- */
.pm-edge {
    position: absolute; left: 0; top: 0; z-index: var(--s-z-line); display: block;
    width: 100%; height: var(--s-edge-rise); overflow: visible; pointer-events: none;
}
.pm-edge line { vector-effect: non-scaling-stroke; }
.pm-edge--top { top: var(--s-edge-inset); }
.pm-edge--pools { display: none; }
.pm-edge--pools.is-pre { transform: scaleY(0); }
/* A section that opens on the diagonal: it rises into the one above along the clean edge. */
.pm-cut-top { clip-path: polygon(0 var(--s-edge-rise), 100% 0, 100% 100%, 0 100%); margin-top: calc(-1 * var(--s-edge-rise)); }
.pm-edge__soot { stroke: var(--s-soot); stroke-width: calc(var(--s-cut-w) + 2 * var(--s-cut-edge)); }
.pm-edge__core { stroke: var(--s-chartreuse); stroke-width: var(--s-cut-w); }
.pm-anim .pm-edge { transform-origin: 0 100%; transition: transform var(--s-dur-cut) var(--s-ease-cut); }
.pm-edge.is-pre { transform: scaleX(0); }
.pm-pass { position: absolute; inset: 0; z-index: var(--s-z-panel); overflow: hidden; pointer-events: none; }
.pm-pass__slab {
    position: absolute; top: -10%; bottom: -10%; left: -30%; width: 160%;
    background: var(--s-spray); border-left: var(--s-cut-w) solid var(--s-chartreuse);
    box-shadow: calc(-1 * var(--s-cut-edge)) 0 0 0 var(--s-soot), inset var(--s-cut-edge) 0 0 0 var(--s-soot);
    transform: translateX(110%) skewX(var(--s-pass-skew));
}
.pm-anim .pm-pass__slab { transition: transform var(--s-dur-pass) var(--s-ease-cut); }
.pm-pass.is-pre .pm-pass__slab { transform: translateX(0) skewX(var(--s-pass-skew)); }

/* ---- 4. Pavements: full-bleed + docked soot list --------------------------------------- */
.pm-pave__photo { position: relative; aspect-ratio: var(--s-full-ratio-p); overflow: hidden; }
.pm-pave__photo picture, .pm-pave__photo img { width: 100%; height: 100%; }
.pm-pave__photo img { object-fit: cover; object-position: var(--s-pave-pos); }
.pm-pave__panel { padding: var(--s-space-l) var(--s-gutter) var(--s-section-tight); background: var(--s-panel); color: var(--s-panel-ink); }
.pm-pave__title { font-size: var(--s-step-panel); }
.pm-pave__label { margin-top: var(--s-space-m); color: var(--s-panel-muted); }
.pm-pave__list { margin-top: var(--s-space-xs); border-top: var(--s-hairline) solid var(--s-rule-dark); }
.pm-pave__list div {
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-space-s);
    padding-block: var(--s-space-xs); border-bottom: var(--s-hairline) solid var(--s-rule-dark);
}
.pm-pave__list dt { font-weight: var(--s-weight-strong); }
.pm-pave__list dd { color: var(--s-panel-muted); }
.pm-pave__cap { margin-top: var(--s-space-m); font-size: var(--s-step-caption); line-height: var(--s-leading-caption); color: var(--s-panel-muted); }

/* ---- 5. Pools: the photo cut on a diagonal + the coping ledger ---------------------------- */
/* Desktop: photo left, full height, its right side cut on the site's diagonal with the clean edge
   along it; the copy and a two-part ledger (what we clean: chartreuse tiles; what we protect: soot
   outlines) on the right. Phone: title, then the photo, then the ledger. */
.pm-pools { position: relative; z-index: var(--s-z-panel); padding-top: var(--s-edge-rise); background: var(--s-surface); border-bottom: var(--s-btn-edge) solid var(--s-soot); }
.pm-pools__grid { position: relative; display: grid; }
.pm-pools__photo { position: relative; aspect-ratio: var(--s-full-ratio-p); overflow: hidden; }
.pm-pools__photo picture, .pm-pools__photo img { width: 100%; height: 100%; }
.pm-pools__photo img { object-fit: cover; object-position: var(--s-pool-pos); }
.pm-pools__tag {
    position: absolute; left: var(--s-gutter); bottom: var(--s-space-m); z-index: var(--s-z-copy); max-width: var(--s-chip-max);
    padding: var(--s-space-xs) var(--s-space-s); border-radius: var(--s-radius-s); background: var(--s-soot); color: var(--s-spray);
    font: var(--s-weight-semi) var(--s-step-caption)/var(--s-leading-caption) var(--s-font-body);
}
.pm-pools__copy { display: grid; align-content: center; gap: var(--s-space-s); padding: var(--s-space-xl) var(--s-gutter) var(--s-section-tight); }
.pm-pools__title { max-width: var(--s-pools-title-w); }
.pm-pools__lede { max-width: var(--s-measure-narrow); font-size: var(--s-step-lede); line-height: var(--s-leading-caption); }
.pm-course__label { margin-top: var(--s-space-m); color: var(--s-muted); }
.pm-course { display: grid; gap: var(--s-space-m); }
.pm-course__head { margin-bottom: var(--s-space-xs); font: var(--s-weight-display) var(--s-step-body)/var(--s-leading-heading) var(--s-font-display); }
.pm-course__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--s-tile-min), 1fr)); gap: var(--s-coping-joint); }
.pm-sq {
    display: flex; flex-direction: column; gap: var(--s-space-xs); min-height: var(--s-tile-size);
    padding: var(--s-space-s); border: var(--s-btn-edge) solid var(--s-soot); border-radius: var(--s-radius);
    background: var(--s-spray); color: var(--s-soot);
}
.pm-sq--clean { background: var(--s-chartreuse); box-shadow: var(--s-btn-shadow-x) var(--s-btn-shadow-y) 0 0 var(--s-soot); }
.pm-sq--protect { background: transparent; border-style: dashed; }
.pm-sq strong { font: var(--s-weight-display) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display); letter-spacing: var(--s-track-heading); }
.pm-sq span { font-size: var(--s-step-small); line-height: var(--s-leading-caption); font-weight: var(--s-weight-semi); }
.pm-anim .pm-sq { transition: transform var(--s-dur-tile) var(--s-ease-out), opacity var(--s-dur-tile) var(--s-ease-out); transition-delay: calc(var(--pm-i) * var(--s-stagger-tile)); }
.pm-course.is-pre .pm-sq { transform: translateY(calc(-1 * var(--s-tile-drop))); opacity: 0; }

/* ---- 6. How we work: the axis --------------------------------------------------------- */
.pm-how { padding-block: var(--s-space-l) calc(var(--s-edge-rise) + var(--s-space-m)); }
.pm-how__top { display: grid; gap: var(--s-space-l); align-items: center; }
.pm-how__photo { position: relative; border-radius: var(--s-radius); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--s-label-lean)), calc(100% - var(--s-label-lean)) 100%, 0 100%); }
.pm-how__photo img { width: 100%; aspect-ratio: var(--s-detail-ratio); object-fit: cover; }
.pm-day { position: relative; margin-top: var(--s-space-xl); }
.pm-day__axis {
    position: absolute; top: 0; bottom: 0; left: calc(var(--s-gutter) + var(--s-node) / 2);
    width: calc(var(--s-cut-w) + 2 * var(--s-cut-edge)); transform: translateX(-50%);
}
.pm-day__axis span {
    display: block; width: 100%; height: 100%; background: var(--s-chartreuse);
    border: var(--s-cut-edge) solid var(--s-soot); transform-origin: 50% 0;
}
.pm-day__steps { position: relative; display: grid; gap: var(--s-space-l); }
.pm-day__step { position: relative; padding-left: calc(var(--s-node) + var(--s-space-m)); }
.pm-day__step::before {
    content: ""; position: absolute; left: 0; top: var(--s-space-xs);
    width: var(--s-node); height: var(--s-node); border-radius: var(--s-radius-s);
    background: var(--s-spray); border: var(--s-focus-ring) solid var(--s-soot);
}
.pm-day__num {
    display: block; font: var(--s-weight-display) var(--s-step-figure)/var(--s-leading-solid) var(--s-font-figure);
    font-variant-numeric: var(--s-numeric); letter-spacing: var(--s-track-heading);
}
.pm-day__name { margin-top: var(--s-space-xs); font: var(--s-weight-display) var(--s-step-body)/var(--s-leading-heading) var(--s-font-display); }
.pm-day__line { margin-top: var(--s-space-2xs); color: var(--s-muted); max-width: var(--s-measure-narrow); }

/* ---- 7. Free site visit: the plan picker on the cream ground ---------------------------- */
/* Not a brand-colour field: the section is spray white under a soot coping edge, and chartreuse
   appears only where the visitor has tapped the plan, and on the submit. */
.pm-visit {
    position: relative;
    padding-block: var(--s-section-tight); background: var(--s-bg); color: var(--s-text);
    padding-top: calc(var(--s-space-l) + var(--s-edge-rise));
}
/* A full-width statement over the field, then plan | form. */
.pm-visit__top { display: grid; gap: var(--s-space-m); }
.pm-visit__title { font-size: var(--s-step-visit); max-width: var(--s-visit-title-w); }
.pm-visit__grid { display: grid; gap: var(--s-space-xl); margin-top: var(--s-space-xl); }
.pm-visit__lede { max-width: var(--s-measure); font-size: var(--s-step-lede); line-height: var(--s-leading-caption); }
.pm-plan__door { fill: var(--s-bg); stroke: none; pointer-events: none; }
.pm-plan__box { position: relative; aspect-ratio: var(--s-plan-ratio); max-width: var(--s-plan-max-p); }
.pm-plan__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pm-plan__lot { fill: none; stroke: var(--s-soot); stroke-width: var(--s-plan-line); stroke-dasharray: var(--s-lot-dash); }
.pm-plan__curb { stroke: var(--s-soot); stroke-width: var(--s-plan-line); }
.pm-plan__zone { fill: var(--s-surface); stroke: var(--s-soot); stroke-width: var(--s-plan-zone-line); transition: fill var(--s-dur-ui) var(--s-ease); }
.pm-plan__zone.is-on { fill: var(--s-chartreuse); }
.pm-plan__zone.is-hover:not(.is-on) { fill: url(#pm-hatch); }
.pm-plan__hatch { stroke: var(--s-hatch); stroke-width: var(--s-plan-zone-line); }
.pm-plan__ridge, .pm-plan__joint { fill: none; stroke: var(--s-slate-graphic); stroke-width: var(--s-hairline); pointer-events: none; }
.pm-plan__water { fill: var(--s-water); stroke: var(--s-soot); stroke-width: var(--s-hairline); }
.pm-plan__btn {
    position: absolute; padding: var(--s-space-2xs); margin: 0; border: 0; border-radius: 0;
    background: transparent; cursor: pointer; text-align: left;
    display: flex; align-items: flex-start; justify-content: flex-start;
    font: var(--s-weight-strong) var(--s-step-small)/var(--s-leading-caption) var(--s-font-body);
}
.pm-plan__btn span { display: none; padding: var(--s-space-2xs) var(--s-space-xs); border-radius: var(--s-radius-s); background: var(--s-spray); }
.pm-plan__btn[aria-pressed="true"] span { background: var(--s-soot); color: var(--s-spray); }
.pm-plan__btn:focus-visible { outline-offset: calc(-1 * var(--s-focus-ring)); }
/* Zone boxes = their SVG rectangles (viewBox 400 x 300) as percentages of the plan box. */
.pm-plan__btn--pool { left: 30%; top: 6.67%; width: 40%; height: 20%; z-index: 1; }
.pm-plan__btn--patio { left: 27.5%; top: 28%; width: 45%; height: 10.67%; z-index: 1; align-items: center; }
.pm-plan__btn--siding { left: 25%; top: 39.33%; width: 50%; height: 26.67%; z-index: 1; align-items: flex-end; }
.pm-plan__btn--roof { left: 28%; top: 43.33%; width: 44%; height: 18.67%; z-index: 2; align-items: center; justify-content: center; }
.pm-plan__btn--path { left: 37.5%; top: 66%; width: 5.5%; height: 22.67%; z-index: 1; }
.pm-plan__btn--drive { left: 76.5%; top: 50%; width: 15%; height: 38.67%; z-index: 1; align-items: flex-end; }
.pm-plan__btn--path span, .pm-plan__btn--drive span { writing-mode: vertical-rl; transform: rotate(180deg); }
.pm-plan__cap { margin-top: var(--s-space-s); font-size: var(--s-step-caption); font-weight: var(--s-weight-strong); }

.pm-form { display: grid; gap: var(--s-space-l); align-content: start; }
.pm-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.pm-form legend, .pm-field label {
    padding: 0; margin-bottom: var(--s-space-xs);
    font: var(--s-weight-strong) var(--s-step-body)/var(--s-leading-caption) var(--s-font-body);
}
.pm-checks__grid { display: grid; gap: var(--s-space-2xs) var(--s-space-m); }
.pm-check { display: flex; align-items: center; gap: var(--s-space-s); min-height: var(--s-tap); cursor: pointer; font-weight: var(--s-weight-strong); }
.pm-check input, .pm-size input { margin: 0; }
.pm-check input {
    appearance: none; -webkit-appearance: none; flex: none; width: var(--s-check); height: var(--s-check); cursor: pointer;
    background: var(--s-spray); border: var(--s-btn-edge) solid var(--s-soot); border-radius: var(--s-radius-s);
    transition: background-color var(--s-dur-ui) var(--s-ease), box-shadow var(--s-dur-ui) var(--s-ease);
}
.pm-check input:checked { background: var(--s-soot); box-shadow: inset 0 0 0 var(--s-space-2xs) var(--s-spray); }
.pm-picked { padding: var(--s-space-m); border-radius: var(--s-radius); background: var(--s-soot); color: var(--s-spray); }
.pm-picked__label { color: var(--s-panel-muted); }
.pm-picked__list { margin-top: var(--s-space-xs); }
.pm-picked__list li { padding-block: var(--s-space-2xs); font-weight: var(--s-weight-strong); }
.pm-picked__list li.pm-picked__empty { font-weight: var(--s-weight-regular); color: var(--s-panel-muted); }
.pm-sizes__row { display: flex; gap: var(--s-space-xs); }
.pm-size { position: relative; flex: 1; cursor: pointer; }
.pm-size input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.pm-size span {
    display: flex; align-items: center; justify-content: center; min-height: var(--s-field-h);
    border: var(--s-btn-edge) solid var(--s-soot); border-radius: var(--s-radius); background: var(--s-spray);
    font: var(--s-weight-display) var(--s-step-body)/var(--s-leading-solid) var(--s-font-display);
    transition: background-color var(--s-dur-ui) var(--s-ease), color var(--s-dur-ui) var(--s-ease);
}
.pm-size input:checked + span { background: var(--s-soot); color: var(--s-spray); }
.pm-size input:focus-visible + span { outline: var(--s-focus-ring) solid var(--s-focus-light); outline-offset: var(--s-focus-offset); }
.pm-fields { display: grid; gap: var(--s-space-m); }
.pm-field { display: grid; align-content: start; }
.pm-field input {
    min-height: var(--s-field-h); padding: 0 var(--s-space-s); width: 100%;
    background: var(--s-spray); border: var(--s-btn-edge) solid var(--s-soot); border-radius: var(--s-radius);
    font-size: var(--s-step-input);
}
.pm-field input::placeholder { color: var(--s-slate); opacity: 1; }
.pm-field input[aria-invalid="true"] { border-color: var(--s-error); box-shadow: inset 0 0 0 var(--s-hairline) var(--s-error); }
.pm-field__hint { margin-top: var(--s-space-2xs); font-size: var(--s-step-caption); color: var(--s-muted); }
.pm-err { color: var(--s-error); font: var(--s-weight-strong) var(--s-step-caption)/var(--s-leading-caption) var(--s-font-body); }
.pm-err:empty { display: none; }
.pm-err:not(:empty) { margin-top: var(--s-space-2xs); }
.pm-form__submit { justify-self: start; background: var(--s-chartreuse); }
.pm-form__submit:hover { background: var(--s-chartreuse-deep); }
.pm-form__status { font-weight: var(--s-weight-strong); max-width: var(--s-measure); }
.pm-form__status:not(:empty) { padding: var(--s-space-s); border-radius: var(--s-radius); background: var(--s-surface); }
/* The empty live region keeps its place in the DOM but not its grid gap (no band under the submit). */
.pm-form__status:empty { position: absolute; }

/* ---- Footer --------------------------------------------------------------------------- */
.pm-foot { padding-block: var(--s-section-tight) var(--s-space-l); background: var(--s-panel); color: var(--s-panel-ink); }
.pm-foot__grid { display: grid; gap: var(--s-space-l); }
.pm-foot__brand { display: grid; gap: var(--s-space-xs); align-content: start; color: var(--s-panel-muted); }
.pm-foot__brand .pm-logo { color: var(--s-panel-ink); }
.pm-foot .pm-logo__mark { border-color: var(--s-spray); }
.pm-foot__contact { display: flex; flex-wrap: wrap; gap: var(--s-space-xs) var(--s-space-m); }
.pm-foot__contact a, .pm-foot__list a { display: inline-flex; align-items: center; min-height: var(--s-tap); color: var(--s-panel-ink); }
.pm-foot__title { font: var(--s-weight-strong) var(--s-step-caption)/var(--s-leading-caption) var(--s-font-body); color: var(--s-panel-muted); }
.pm-foot__list span { color: var(--s-panel-muted); font-size: var(--s-step-caption); }
.pm-foot__small, .pm-foot__copy { font-size: var(--s-step-caption); color: var(--s-panel-muted); }
.pm-foot__copy { margin-top: var(--s-space-l); }
.pm-foot :focus-visible { outline-color: var(--s-focus-dark); }

/* ---- Phone ------------------------------------------------------------------------------ */
@media (max-width: 767px) {
    html { scroll-padding-top: var(--s-nav-h-mobile); }
    .pm-nav { height: var(--s-nav-h-mobile); gap: var(--s-space-xs); }
    .pm-nav__long { display: none; }
    .pm-nav__short { display: inline; }
    .pm-hero { height: calc(100svh - var(--s-ribbon-h) - var(--s-nav-h-mobile)); min-height: var(--s-hero-min-h-p); display: flex; flex-direction: column; justify-content: flex-start; }
    /* Phone: the copy leads at the top; the photograph (dirty, the line, clean) fills the foot. */
    .pm-hero__photo { inset: auto 0 0 0; height: var(--s-hero-photo-h-p); }
    .pm-hero.is-cut .pm-hero__photo { inset: 0; height: auto; }
    .pm-hero__photo img { object-position: var(--s-hero-pos-p); }
    .pm-hero__panel { clip-path: polygon(0 0, 100% 0, 100% var(--s-hero-edge-p-right), 0 var(--s-hero-edge-p-left)); }
    .pm-hero__copy { padding: var(--s-hero-pad-top-p) var(--s-gutter) 0; }
    .pm-hero__lede { margin-top: var(--s-space-s); font-size: var(--s-step-body); }
    .pm-hero__tabs { display: flex; margin-top: var(--s-space-s); }
    .pm-hero__tabs-label { display: none; }
    .pm-hero__tabs { flex-wrap: nowrap; }
    .pm-hero__tabs a { flex: 1; padding: 0 var(--s-tab-lean); }
    .pm-hero__cta { display: flex; margin-top: var(--s-space-s); }
    .pm-hero__note { display: none; }
    .pm-diff__top { display: contents; }
    .pm-diff__title { padding-inline: var(--s-gutter); }
    .pm-diff__seg-wrap { margin-top: var(--s-space-m); padding-inline: var(--s-gutter); position: sticky; top: var(--s-nav-h-mobile); z-index: var(--s-z-sticky); padding-block: var(--s-space-xs); background: var(--s-bg); }
    .pm-seg { display: flex; }
    .pm-seg__tab { flex: 1; padding: 0; }
    .pm-stage__frame { aspect-ratio: var(--s-stage-ratio-p); }
    .pm-plan__box { margin-inline: auto; }
    .pm-visit__grid { margin-top: var(--s-space-l); }
}

/* ---- Phone + tablet: the visit is one column — plan, checklist, what the visit covers, the rest ---- */
@media (max-width: 1023px) {
    .pm-visit__grid { gap: var(--s-space-l); }
    .pm-visit__plan-col, .pm-form { display: contents; }
    .pm-plan { order: 1; }
    .pm-checks { order: 2; }
    .pm-picked { order: 3; }
    .pm-sizes { order: 4; }
    .pm-fields { order: 5; }
    .pm-form__submit { order: 6; }
    .pm-form__status { order: 7; }
}

/* ---- Tablet and up ------------------------------------------------------------------------ */
@media (min-width: 768px) {
    .pm-strip { aspect-ratio: var(--s-strip-ratio); max-height: var(--s-strip-max-h); width: 100%; }
    .pm-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: var(--s-space-l); }
    .pm-gauge { grid-row: span 4; grid-template-rows: subgrid; align-items: start; }
    .pm-board { padding: var(--s-space-l); }
    .pm-checks__grid, .pm-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pm-plan__box { max-width: none; }
    .pm-plan__btn span { display: inline-block; }
    .pm-foot__grid { grid-template-columns: 1.4fr 1fr 1.4fr; }
}

/* ---- Desktop --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    /* The honesty note sits in the console column under the steps, beside the stage's caption (no dead band). */
    .pm-diff__body {
        display: grid; grid-template-columns: var(--s-stage-col) var(--s-console-col); grid-template-rows: auto 1fr;
        column-gap: var(--s-space-l); margin-top: var(--s-space-m);
    }
    .pm-diff__panel { grid-column: 1 / -1; grid-row: 1 / 3; grid-template-columns: subgrid; grid-template-rows: subgrid; margin-top: 0; align-items: start; }
    .pm-stage { grid-column: 1; grid-row: 1 / 3; }
    .pm-console { grid-column: 2; grid-row: 1; }
    .pm-honest { grid-column: 2; grid-row: 2; align-self: start; margin-top: var(--s-space-l); }
    .pm-console { padding-top: var(--s-space-s); }
    .pm-pave { position: relative; height: var(--s-pave-h); overflow: hidden; }
    .pm-pave__photo { position: absolute; inset: calc(-1 * var(--s-parallax)) 0; aspect-ratio: auto; }
    .pm-pave__panel {
        position: absolute; left: var(--s-gutter); bottom: var(--s-gutter); width: var(--s-pave-panel-w);
        padding: var(--s-space-l); border-radius: var(--s-radius);
    }
    .pm-pave__list div { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
    .pm-pave__panel { clip-path: polygon(0 0, calc(100% - var(--s-label-lean)) 0, 100% var(--s-label-lean), 100% 100%, 0 100%); }
    .pm-houses__body { padding-top: var(--s-space-l); }
    /* The statement is set at display size so it carries its half of the frame; the board starts inside the same view. */
    .pm-houses__intro { grid-template-columns: minmax(0, 1.4fr) var(--s-houses-intro-col); align-items: start; column-gap: var(--s-space-xl); }
    .pm-houses__lede { max-width: var(--s-measure-statement); font-size: var(--s-step-statement); line-height: var(--s-leading-heading); letter-spacing: var(--s-track-display); }
    .pm-console__method, .pm-honest p, .pm-console__notes li { font-size: var(--s-step-body); }
    .pm-stage__what, .pm-console__hint, .pm-gauges__note, .pm-board__label { font-size: var(--s-step-caption); }
    .pm-board { padding: var(--s-space-xl) var(--s-space-xl) var(--s-space-l); }
    .pm-gauges { column-gap: var(--s-space-xl); }
    .pm-pools { padding-top: var(--s-edge-rise); }
    .pm-edge--pools { display: block; }
    .pm-pools__grid { grid-template-columns: var(--s-pools-photo-col) minmax(0, 1fr); min-height: var(--s-pool-h); }
    .pm-pools__photo { aspect-ratio: auto; clip-path: polygon(0 0, 100% 0, calc(100% - var(--s-pools-lean)) 100%, 0 100%); }
    .pm-pools__copy { padding: var(--s-section-tight) var(--s-gutter) var(--s-section-tight) var(--s-space-l); }
    .pm-edge--pools { top: 0; height: 100%; width: var(--s-pools-lean); left: calc(var(--s-pools-photo-w) - var(--s-pools-lean)); transform-origin: 0 100%; }
    .pm-how__top { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
    .pm-how__title { font-size: var(--s-step-hero); line-height: var(--s-leading-solid); letter-spacing: var(--s-track-display); }
    .pm-day { padding-top: calc(var(--s-node) + var(--s-axis-gap)); }
    .pm-day__axis {
        top: calc(var(--s-node) / 2); bottom: auto; left: var(--s-gutter); right: var(--s-gutter);
        width: auto; height: calc(var(--s-cut-w) + 2 * var(--s-cut-edge)); transform: translateY(-50%);
    }
    .pm-day__axis span { transform-origin: 0 50%; }
    .pm-day__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-space-m); }
    .pm-day__step { padding-left: 0; }
    .pm-day__step::before { top: calc(-1 * (var(--s-node) + var(--s-axis-gap))); }
    .pm-visit__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
    /* The plan and its running summary travel with the form, so the field never shows an empty column. */
    .pm-visit__plan-col { position: sticky; top: calc(var(--s-nav-h) + var(--s-space-l)); display: grid; gap: var(--s-space-l); }
}

@media (min-width: 1200px) {
    .pm-nav__links { display: block; }
    .pm-nav__menu { display: none; }
}
@media (min-width: 1360px) {
    .pm-nav__phone { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}