/* ============================================================================
   base.css — Parkway Homes
   Reset, container, section utilities, structural defaults, buttons, forms.
   Section-specific CSS lives in clearly-marked SECTION banners below.
   ============================================================================ */

/* === RESET + BASE ========================================================= */

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

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

html, body { height: 100%; }

/* overflow-x:hidden lives ONLY on body. Putting it on html along with
   height:100% turns html into a clipped scroll container, which kills
   vertical page scrolling on mobile (body content past 100vh becomes
   unreachable). The box-sizing reset above prevents horizontal overflow
   at the source. */
body {
  background-color: var(--mg-surface-page);
  color: var(--mg-text-body, var(--mg-text-body-warm));
  overflow-x: hidden;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

input, textarea, select { font: inherit; }

ul, ol { list-style: none; padding: 0; margin: 0; }

/* === ACCESSIBILITY HELPERS ================================================ */

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--mg-color-navy);
  color: var(--mg-color-white);
  padding: 12px 20px;
  border-radius: var(--mg-radius-sm);
  z-index: 9999;
  text-decoration: none;
  font-weight: var(--mg-weight-semibold);
  transition: top var(--mg-dur-base) var(--mg-ease-out);
}

.skip-link:focus {
  top: 8px;
}

/* Dual-ring focus indicator: dark 2px inner outline + 2px yellow halo.
   Either ring is visible on any surface — including yellow CTA buttons
   (dark ring carries) and navy surfaces (yellow halo carries). Meets
   WCAG 1.4.11 (3:1) on every combination used in the design. */
:focus-visible {
  outline: 2px solid var(--mg-color-ink-name);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--mg-accent);
  border-radius: var(--mg-radius-sm);
}

/* === LAYOUT =============================================================== */

.container {
  width: 100%;
  max-width: var(--mg-container-max);
  margin-inline: auto;
  padding-inline: var(--mg-space-9);   /* 48px gutter on desktop */
}

.container--narrow { max-width: var(--mg-container-narrow); }

.container--full   { max-width: none; padding-inline: 0; }

/* Section base — every section sits in a <section.section> */
.section {
  position: relative;
  padding-block: var(--mg-section-pad);
}

.section--tight   { padding-block: var(--mg-section-pad-tight); }
.section--loose   { padding-block: var(--mg-section-pad-loose); }
.section--flush   { padding-block: 0; }

/* Surface variants (also drive text colours via [data-surface] in tokens.css) */
.section--cream { background-color: var(--mg-surface-page); }
.section--white { background-color: var(--mg-surface-white); }
.section--dark  { background-color: var(--mg-surface-dark); }

/* === ORNAMENTS ============================================================ */

/* The 9×50 watercolour brushstroke divider that sits under every section H2.
   Kept as the original raster — the wash texture IS the design, recolouring
   it would flatten the warmth. Decorative, marked aria-hidden in markup. */
.ornament-rule {
  display: block;
  width: 50px;
  height: 9px;
  object-fit: cover;
}

.ornament-rule--on-dark { opacity: 0.5; }

/* Section head: eyebrow + h2 + rule + lead — standard pattern */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-6);
  max-width: 747px;
}

.section-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.section-head__rule { margin-block-start: calc(-1 * var(--mg-space-2)); }

.section-head__lead {
  max-width: 533px;
}

/* === BUTTONS ============================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mg-space-3);
  padding: var(--mg-space-4) var(--mg-space-6);
  border-radius: var(--mg-radius-md);
  border: 1px solid transparent;
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-body);
  font-weight: var(--mg-weight-semibold);
  letter-spacing: var(--mg-track-button);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--mg-dur-base) var(--mg-ease-out),
              border-color var(--mg-dur-base) var(--mg-ease-out),
              transform var(--mg-dur-fast) var(--mg-ease-out),
              box-shadow var(--mg-dur-base) var(--mg-ease-out);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* Buttons are <a class="btn">, so typography.css's a:hover underline would
   otherwise apply — suppress it for all button variants. */
.btn:hover,
.btn:focus-visible { text-decoration: none; }

/* Primary — yellow, site-wide (one-button rule). No stroke. */
.btn--primary {
  background-color: var(--mg-accent);
  color: var(--mg-color-ink-name);
  border-color: transparent;
}

.btn--primary:hover {
  background-color: color-mix(in srgb, var(--mg-accent) 90%, #000000);
}

/* Outline — translucent white over photo (hero), text near-black */
.btn--outline {
  background-color: var(--mg-surface-overlay-light);
  color: var(--mg-color-ink-mid);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.btn--outline:hover {
  background-color: var(--mg-color-white);
}

/* Ghost — for use on dark surfaces */
.btn--ghost {
  background-color: transparent;
  color: var(--mg-color-white);
  border-color: rgba(255, 255, 255, 0.40);
}

.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Disabled */
.btn[disabled],
.btn--disabled {
  background-color: var(--mg-surface-overlay-disabled);
  color: var(--mg-color-disabled-text);
  cursor: not-allowed;
  transform: none;
  border-color: transparent;
}

/* Size variants */
.btn--sm {
  padding: var(--mg-space-3) var(--mg-space-4) var(--mg-space-3) var(--mg-space-5);
  font-size: var(--mg-text-md);
  border-radius: var(--mg-radius-sm);
}

.btn--lg {
  padding: var(--mg-space-4) var(--mg-space-6) var(--mg-space-4) var(--mg-space-7);
  height: 64px;
}

/* Block buttons */
.btn--block { width: 100%; }

/* Icon container — 16px (sm) or 32px (lg) trailing chevron/arrow.
   Renders the actual <img> so the SVG's native fill shows through.
   Per-context filters recolour the arrow where the button bg demands it
   (e.g. green submit gets a white arrow). */
.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.btn--sm .btn__icon {
  width: 16px;
  height: 16px;
}

.btn__icon img,
.btn__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* On the green-gradient submit button, the SVG's native dark fill is
   invisible — recolour it white to match the button label. */
.quote-form__submit .btn__icon img {
  filter: brightness(0) invert(1);
}

/* === FORM ELEMENTS ======================================================== */

/* Standard text input — compact 40px height per Carlos. Visible 1px border
   at rest (3.7:1 contrast on white form card per WCAG 1.4.11). Focus
   replaces the border with a 2px box-shadow ring in accent-eyebrow orange
   so the focus indicator wins visually without shifting layout. */
.input {
  box-sizing: border-box;            /* explicit — padding counts INTO width */
  width: 100%;
  background-color: var(--mg-surface-input);
  border: 1px solid var(--mg-border-form);
  border-radius: 0;
  height: 40px;
  padding: 0 var(--mg-space-4);
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-body); /* 16px — keeps iOS Safari from zooming on focus */
  font-weight: var(--mg-weight-medium);
  color: var(--mg-color-ink-name);
  line-height: 1.25;
  outline: 0;
  transition: border-color var(--mg-dur-base) var(--mg-ease-out),
              box-shadow var(--mg-dur-base) var(--mg-ease-out);
}

.input::placeholder {
  color: var(--mg-color-brown-placeholder);
  opacity: 0.55;
  font-weight: var(--mg-weight-regular);
}

.input:focus,
.input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--mg-accent-eyebrow);
}

/* Phone field with country-flag prefix — wraps .input height (56px) */
.input--phone {
  display: flex;
  align-items: center;
  gap: var(--mg-space-2);
}

.input--phone .input__flag {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.input--phone input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  color: inherit;
  height: 100%;
  padding: 0;
}

/* Field group — compact gap */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-2);
}

.field__label {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-md);
  font-weight: var(--mg-weight-medium);
  color: var(--mg-color-ink-name);
  line-height: 1;
}

/* Pill option (chip selector) */
.pill {
  flex: 1 0 auto;
  min-height: 48px;
  padding: var(--mg-space-2) var(--mg-space-4);
  background-color: var(--mg-color-white);
  border: 1px solid var(--mg-border-form);
  border-radius: var(--mg-radius-sm);
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-md);
  font-weight: var(--mg-weight-medium);
  color: #656565;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--mg-dur-base) var(--mg-ease-out),
              border-color var(--mg-dur-base) var(--mg-ease-out),
              color var(--mg-dur-base) var(--mg-ease-out);
}

.pill[aria-pressed="true"],
.pill.is-selected {
  background-color: var(--mg-surface-input);
  border-color: var(--mg-border-form-on);
  color: var(--mg-color-brown-strong);
}

.pill:hover {
  border-color: var(--mg-border-form-on);
}

/* === SERVICE CARD (used in hero strip + form step 1) ======================
   Cards size to their content. Parent .service-cards flex stretches them
   to the tallest sibling so they all match heights automatically. */

.service-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mg-space-3);
  padding: var(--mg-space-4) var(--mg-space-4) var(--mg-space-3);
  background-color: var(--mg-surface-card);
  border-radius: var(--mg-radius-sm);
  /* Photo option tiles intentionally use a transparent rest border — the
     card sits on a contrasting cream-card surface so it's identifiable
     without an outline. Hover/selected reveal the border for state. */
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--mg-dur-base) var(--mg-ease-out),
              transform var(--mg-dur-fast) var(--mg-ease-out),
              background-color var(--mg-dur-base) var(--mg-ease-out);
}

.service-card:hover {
  border-color: var(--mg-border-form-on);
  transform: translateY(-2px);
}

.service-card.is-selected,
.service-card[aria-pressed="true"] {
  border-color: var(--mg-color-brown-strong);
  background-color: color-mix(in srgb, var(--mg-surface-card) 60%, var(--mg-color-yellow) 8%);
}

/* Icon area — fixed compact height so the card stays short. The image
   inside scales to fit while preserving its aspect. */
.service-card__icon {
  width: 100%;
  height: clamp(64px, 7vw, 92px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.service-card__icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.service-card__copy {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-1);
  width: 100%;
}

.service-card__title {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-body);
  font-weight: var(--mg-weight-medium);
  color: var(--mg-color-brown-strong);
  line-height: var(--mg-leading-snug);
  margin: 0;
}

.service-card__desc {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-base);
  font-weight: var(--mg-weight-regular);
  color: var(--mg-color-brown-soft);
  line-height: var(--mg-leading-snug);
  margin: 0;
}

/* === STEP INDICATOR (form header) ========================================= */

.steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mg-space-8);
  padding-block: var(--mg-space-3);
  border-bottom: 1px solid #E2E2E3;
}

.steps__item {
  display: flex;
  align-items: center;
  gap: var(--mg-space-2);
}

.steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--mg-radius-pill);
  background-color: transparent;
  border: 1px solid rgba(163, 163, 163, 0.50);
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-sm);
  font-weight: var(--mg-weight-medium);
  color: var(--mg-color-disabled-text);
  opacity: 0.5;
  transition: background-color var(--mg-dur-base) var(--mg-ease-out),
              color var(--mg-dur-base) var(--mg-ease-out),
              opacity var(--mg-dur-base) var(--mg-ease-out),
              border-color var(--mg-dur-base) var(--mg-ease-out);
}

.steps__label {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-body);
  font-weight: var(--mg-weight-medium);
  color: #797979;
}

.steps__item.is-active .steps__num {
  background-color: var(--mg-accent-eyebrow);
  border-color: var(--mg-accent-eyebrow);
  color: var(--mg-color-cream-card);
  opacity: 1;
}

.steps__item.is-active .steps__label {
  color: var(--mg-color-navy);
}

/* === EYEBROW + RULE STACK ================================================= */

/* The recurring "tab" — small white-bg badge with notched corners, used as a
   container label (e.g. "What we build" tab over the service cards). */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  background-color: var(--mg-color-white);
  border-radius: var(--mg-radius-tab) var(--mg-radius-tab) 0 0;
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-body);
  font-weight: var(--mg-weight-semibold);
  letter-spacing: var(--mg-track-button);
  text-transform: uppercase;
  color: #000;
  line-height: 1.1;
}

/* === REVIEWS CHIP (hero + footer) ========================================= */

.review-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-4);
  padding: 0 var(--mg-space-4);
  border-radius: var(--mg-radius-md);
  color: var(--mg-color-white);
}

.review-chip__group {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-1);
  white-space: nowrap;             /* keep "Google Reviews" + "5.0 ★★★★★" each on one line */
}

.review-chip__divider {
  width: 1px;
  height: 24px;
  background-color: currentColor;
  opacity: 0.4;
}

.review-chip__score {
  font-weight: var(--mg-weight-semibold);
}

.review-chip__stars {
  display: inline-flex;
  gap: 2px;
}

/* === SECTION: TOPBAR ====================================================== */

/* The topbar is fixed-position. Default state: translucent over the hero
   photo with backdrop-blur and a hairline bottom border. After the hero
   scrolls out of view, JS adds .is-scrolled which transitions to a solid
   white background with the dark logo + dark text + soft shadow. */
/* Default: absolute over the hero, scrolls away with the page (not sticky).
   The .is-scrolled state below switches it to position:fixed so the compact
   white version slides in as the user passes the hero. */
.topbar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--mg-topbar-height);
  background-color: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: height var(--mg-dur-slow) var(--mg-ease-out),
              background-color var(--mg-dur-slow) var(--mg-ease-out),
              backdrop-filter var(--mg-dur-slow) var(--mg-ease-out),
              border-color var(--mg-dur-slow) var(--mg-ease-out),
              box-shadow var(--mg-dur-slow) var(--mg-ease-out),
              transform var(--mg-dur-base) var(--mg-ease-out),
              opacity var(--mg-dur-base) var(--mg-ease-out);
}

.topbar__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  /* Constrain the bar's content to the same wrapper as page content
     (centred 1280px max-width + matching gutters) so the logo/nav/CTA
     line up with the columns below. The .topbar itself stays full-bleed
     for the background. Gutters mirror .container at every breakpoint. */
  width: 100%;
  max-width: var(--mg-container-max);
  margin-inline: auto;
  padding-inline: var(--mg-space-9);
}

.topbar__nav ul {
  display: flex;
  gap: var(--mg-space-3);
}

.topbar__nav a {
  display: inline-block;
  padding-block: var(--mg-space-3);
  font-family: var(--mg-font-body);
  font-size: 13px;                  /* tightened so the items clear the centred logo */
  font-weight: var(--mg-weight-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mg-color-white);
  text-decoration: none;
  line-height: 1;
  transition: color var(--mg-dur-base) var(--mg-ease-out);
}

.topbar__nav a:hover,
.topbar__nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Scroll-spy active item — thicker orange underline (site.js IIFE 10 toggles
   .is-active). No fill; same treatment over hero and once scrolled. */
.topbar__nav a.is-active {
  text-decoration: underline;
  text-decoration-color: var(--mg-accent-eyebrow);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.topbar__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  line-height: 0;
}

/* Two SVG variants — wave swoosh stays full-colour in both;
   text paths swap white (over hero) ↔ navy (on scroll). */
.topbar__logo-img--scrolled { display: none; }
.topbar.is-scrolled .topbar__logo-img--over     { display: none; }
.topbar.is-scrolled .topbar__logo-img--scrolled { display: block; }

.topbar__cta {
  /* CTA already styled by .btn.btn--primary.btn--sm — nothing extra. */
}

/* ---- Mobile hamburger menu (native <details>, zero JS) -------------------
   Hidden on desktop (display:none) — desktop uses .topbar__nav inline links.
   On mobile, .topbar__nav hides and this takes over. */
.topbar__menu {
  display: none;
}

.topbar__menu-btn {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
}

.topbar__menu-btn::-webkit-details-marker { display: none; }
.topbar__menu-btn::marker { content: ''; }

.topbar__menu-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--mg-color-white);
  border-radius: 2px;
  transition: background-color var(--mg-dur-base) var(--mg-ease-out),
              transform var(--mg-dur-base) var(--mg-ease-out),
              opacity var(--mg-dur-base) var(--mg-ease-out);
}

.topbar.is-scrolled .topbar__menu-bar {
  background-color: var(--mg-color-ink-name);
}

/* Bars animate to an X when open */
.topbar__menu[open] .topbar__menu-bar:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.topbar__menu[open] .topbar__menu-bar:nth-child(2) {
  opacity: 0;
}
.topbar__menu[open] .topbar__menu-bar:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* Drop-down panel sits flush under the topbar, full width.
   position: absolute + top: 100% anchors to the topbar's actual height,
   so it works across desktop (112px), mobile (compact auto), and the
   .is-scrolled state without needing per-state overrides. */
.topbar__menu-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: var(--mg-space-5) var(--mg-space-6);
  background-color: var(--mg-color-white);
  border-bottom: 1px solid var(--mg-border-row);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-3);
}

.topbar__menu-list a {
  display: block;
  padding: var(--mg-space-3) var(--mg-space-2);
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-body);
  font-weight: var(--mg-weight-semibold);
  letter-spacing: var(--mg-track-eyebrow);
  text-transform: uppercase;
  color: var(--mg-color-ink-name);
  text-decoration: none;
  border-bottom: 1px solid var(--mg-border-row);
}

.topbar__menu-list li:last-child a { border-bottom: 0; }

/* Scroll-spy active item in the mobile menu (site.js IIFE 10) — thicker
   orange underline, no fill, to match the desktop nav. */
.topbar__menu-list a.is-active {
  text-decoration: underline;
  text-decoration-color: var(--mg-accent-eyebrow);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* Scrolled state — switches from position:absolute (over hero) to
   position:fixed (sticky in viewport). Compact white bar. */
.topbar.is-scrolled {
  position: fixed;
  height: auto;
  background-color: var(--mg-color-white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--mg-border-row);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.topbar.is-scrolled .topbar__inner {
  height: auto;
  padding-block: 12px;                         /* per Carlos — 12px vertical */
}

/* Compact logo for the scrolled bar — kept absolute-centred per default. */
.topbar.is-scrolled .topbar__logo-img {
  width: auto;
  height: 56px;
}

.topbar.is-scrolled .topbar__nav a { color: var(--mg-color-ink-name); }

/* Hide the topbar during the recent-homes scroll-reveal full-screen
   phases. Smooth transform-based slide-up — nav comes back as the user
   exits the section. */
.topbar.is-hidden {
  transform: translateY(-100%);
  pointer-events: none;
  opacity: 0;
}

/* === SECTION: HERO ======================================================== */

.hero {
  position: relative;
  /* Content-driven height with a clamped floor so the hero never gets
     uncomfortably short on tiny viewports nor wastefully tall on huge
     ones. Default: hero = padding + content + gap + photo (no dead
     space). The clamp() locks the lower bound; viewports taller than
     the natural content height just see slight extra sky breathing
     room above the headline (not below it). */
  /* Locked to "roughly one viewport tall" with sensible bounds:
       - floor 640px so tiny laptops still get a hero feel
       - target 100vh so the whole composition (sky + content + photo
         + bleeding widget) lands inside the first screenful
       - ceiling 1040px so 4K monitors don't get an absurd wall of sky */
  min-height: clamp(640px, 100vh, 1040px);
  min-height: clamp(640px, 100dvh, 1040px); /* dvh avoids the iOS address-bar jump; vh line above is the fallback */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;            /* content + photo stack toward the bottom */
  gap: clamp(var(--mg-space-5), 3vh, var(--mg-space-7));
  padding-top: var(--mg-topbar-height);
  overflow: visible;
  background-image: linear-gradient(180deg,
    rgb(22, 68, 138)   0%,
    rgb(95, 140, 185)  45%,
    rgb(180, 205, 220) 85%,
    rgb(218, 228, 234) 100%);
}

/* Photo anchored to the bottom of the hero. Width up to 2000px; the
   container has a shorter aspect than the source so the BOTTOM of the
   image (foreground/grass) is cropped via object-fit cover — the TOP
   (sky + roofline) stays intact so the sky-gradient blend is seamless. */
/* Photo container — aspect WIDER than the source (1728/840 = 2.06) so
   object-fit cover scales the image to fill width, then crops the BOTTOM
   only (object-position anchors the top). No margin-top:auto now — the
   parent hero uses justify-content:flex-end to stack content + photo
   toward the bottom, so the photo sits immediately under the content
   with no dead vertical space. */
.hero__photo {
  position: relative;
  width: 100%;
  max-width: 2000px;
  aspect-ratio: 1728 / 520;          /* shorter — crops more of the foreground */
  z-index: 1;
}

/* The mask gradient is the blend itself: the top 30% of the photo is
   transparent → opaque, so the page sky gradient (behind .hero) shows
   physically THROUGH the upper photo, melting into the photo's own
   sky/warmth colors. No hard pixel boundary at all. */
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchored low in the source so the HOUSE BODY (the focal point) sits
     in the upper-middle of the visible photo. Top of the source (warm
     sky) gets cropped — the mask blend below handles that edge so the
     transition is still smooth. Bottom foreground (grass) gets cropped
     less aggressively. */
  object-position: center 65%;
  display: block;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.4) 12%,
    #000 30%);
          mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.4) 12%,
    #000 30%);
}

/* Olive bottom-fade — Figma layer 1, sits over the photo bottom only. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(49, 57, 0, 0) 78%, rgb(49, 57, 0) 100%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mg-space-5);                  /* tighter than var(--mg-space-7) */
  width: 100%;
  max-width: 986px;
  margin-inline: auto;
  padding-top: var(--mg-space-8);
  padding-inline: var(--mg-space-9);
  text-align: center;
}

.hero__headline {
  color: var(--mg-color-white);
  max-width: 986px;
  font-size: clamp(40px, 4.4vw, 56px);     /* down from 64px */
  letter-spacing: 0.02em;                  /* 2% tracking */
  line-height: 1.12;                       /* tighter than display default 1.2 */
}

.hero__lead {
  color: var(--mg-color-white);
  max-width: 679px;
  font-weight: var(--mg-weight-medium);
}

.hero__ctas {
  display: flex;
  gap: var(--mg-space-6);
  width: 100%;
  max-width: 566px;
  justify-content: center;
}

.hero__ctas .btn { flex: 1; }

/* Top-align flex items so the outline button stays its natural height even
   though the primary stack (button + hook) is taller. */
.hero__ctas { align-items: flex-start; }

/* Outline (white) CTA: 95% opacity at rest, 100% on hover/focus. */
.hero__ctas .btn--outline { opacity: 0.95; }
.hero__ctas .btn--outline:hover,
.hero__ctas .btn--outline:focus-visible { opacity: 1; }

/* Wrap around the primary CTA so the reassurance hook sits directly below
   it (not under the whole CTA pair). The stack takes the same flex slot a
   single .btn would, so the row stays balanced 50/50. */
.hero__primary-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--mg-space-2);
  min-width: 0;
}
/* The base .btn is display:inline-flex (content-width). Inside the stack
   we need it to fill the stack horizontally so it matches the outline
   button's width exactly. */
.hero__primary-stack > .btn { width: 100%; }

/* Reassurance hook line — short claim with a small orange check icon,
   sits directly under the yellow CTA. */
.hero__hook {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mg-space-2);
  margin: 0;
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-md);
  font-weight: var(--mg-weight-medium);
  color: var(--mg-color-white);
  opacity: 0.92;
  line-height: 1.4;
}
.hero__hook-icon { display: inline-flex; flex-shrink: 0; }
.hero__hook-icon svg { display: block; }

/* Scroll cue — pinned 24px above the widget's top edge so it always
   sits just above the tab badge regardless of widget height. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: var(--mg-space-6);          /* 24px gap to widget */
  display: inline-flex;
  width: 48px;
  height: 48px;
  z-index: 6;
  animation: scrollCue 2.4s var(--mg-ease-out) infinite;
}

@keyframes scrollCue {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
}

/* === SECTION: HERO — "WHAT WE BUILD" WIDGET =============================
   Straddles the hero/next-section boundary. Centered horizontally; pulled
   down 50% of its own height so the seam runs through its vertical middle.
   The next section uses .section--after-hero to add top padding that
   clears the bleed automatically. */
.hero__cards {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 68%);            /* sits a touch lower */
  z-index: 5;
  width: calc(100% - 2 * var(--mg-space-6));
  max-width: 960px;             /* the one hardcoded value Carlos OK'd */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Next section: add enough top padding to clear the overlapping widget
   AND a comfortable breathing gap before the content begins.
   Uses clamp() so it scales with viewport, no precise px math. */
.section--after-hero {
  /* Increased to clear the lower-positioned widget (translateY 60%). */
  padding-block-start: clamp(17rem, 24vw, 24rem);
}

.hero__cards-tab {
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
  padding-inline: var(--mg-space-6);
}

.hero__cards-body {
  position: relative;
  z-index: 1;
  width: 100%;
  background-color: var(--mg-color-white);
  border-radius: var(--mg-radius-md);
  box-shadow: var(--mg-shadow-card);
  padding: var(--mg-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-4);
}

.service-cards {
  display: flex;
  align-items: stretch;
  gap: var(--mg-space-2);
}

/* The <li> becomes a flex container too so the inner <button> can
   stretch to fill — guarantees all 4 service cards are the same height
   regardless of how long their title or description copy is. */
.service-cards li {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
}

.service-cards li > .service-card {
  width: 100%;
  flex: 1;
}

.hero__cards-continue {
  align-self: center;
  /* sizes to content + padding — no hardcoded width */
  padding-inline: var(--mg-space-7);
}

/* Accreditation row under the card */
.accreditations {
  display: flex;
  gap: 68px;
  justify-content: center;
  padding-top: var(--mg-space-6);
}

.accreditation {
  display: flex;
  align-items: center;
  gap: var(--mg-space-2);
}

/* Badges have differing aspect ratios (VBA wider than HIA), so size by a
   shared height with auto width — keeps the row balanced and never crops. */
.accreditation__logo {
  height: 25px;
  width: auto;
}

.accreditation__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
}

/* === SECTION: REVIEW CHIP (hero variant) ================================= */

.review-chip__icon { width: 24px; height: 24px; }
.review-chip__divider { background-color: rgba(255, 255, 255, 0.4); }

.review-chip--hero {
  /* Hero variant — white text over photo. Inherits .review-chip base. */
}

/* === SECTION: OWNER STORY #1 (Craig's bio + 4 polaroid portraits) ========
   Long-form bio sits in a narrow centered column with 4 tilted polaroid
   portraits floating at the corners of the wider container. Names are
   emphasised with bold weight (no underline — client found the dotted
   underline read as a spell-check squiggle). */

.owner-story {
  position: relative;
  /* Outer padding lives on the .section/.section--after-hero — this is
     purely the positioning context for the floating polaroids. */
}

.owner-story__prose {
  position: relative;
  z-index: 2;
  max-width: 72ch;             /* widened per Carlos */
  margin-inline: auto;
  text-align: center;
}

.owner-story__text {
  font-family: var(--mg-font-display);
  font-weight: var(--mg-weight-regular);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.5;
  /* Lighter than brown-gold — Figma uses a softer prose tone on this
     long-form section. One-off; not promoted to a token. */
  color: #6D5A2D;
  margin: 0;
}

.owner-story__text + .owner-story__text {
  margin-top: var(--mg-space-7);
}

.owner-story__name {
  font-weight: var(--mg-weight-bold);
  text-decoration: none;
}

.owner-story__rule {
  margin: var(--mg-space-7) auto 0;
}

/* Polaroid frames — white border + tilt + soft shadow. Updated portraits
   are full square photos (no transparency), so the image fills the 1:1
   inner box edge-to-edge. */
.polaroid {
  width: clamp(120px, 12vw, 166px);
  aspect-ratio: 1;
  margin: 0;
  background-color: var(--mg-surface-card);   /* neutral fallback if image fails */
  border: 8px solid var(--mg-color-white);
  border-radius: var(--mg-radius-tab);
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  position: relative;
}

.polaroid img {
  position: absolute;
  /* Slight overlap (inset -1px) guarantees no hairline gap at the bottom
     or right edge from sub-pixel rounding. The polaroid's overflow:hidden
     clips it back to the inner box. */
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Desktop: position the 4 polaroids absolutely at the corners of the
   .owner-story positioning context. <display:contents> on the wrapper
   keeps the children direct positioning targets without extra DOM. */
.owner-story__portraits {
  display: contents;
}

.polaroid--tl, .polaroid--tr, .polaroid--bl, .polaroid--br {
  position: absolute;
  z-index: 1;
}

/* Top polaroids tuck into the upper corners without poking above the
   container top (avoids crowding the bleeding widget above). Bottom ones
   bleed slightly past the container sides so the prose feels framed
   rather than boxed. */
/* --py is the scroll-parallax offset (set by site.js IIFE 9); it composes
   with each polaroid's tilt so the cards drift as they scroll past. */
.polaroid--tl { top: 0;    left: 1%;    transform: translate3d(0, var(--py, 0px), 0) rotate(-6deg);  will-change: transform; }
.polaroid--tr { top: 0;    right: 1%;   transform: translate3d(0, var(--py, 0px), 0) rotate(7deg);   will-change: transform; }
.polaroid--bl { top: 55%;  left: -6%;   transform: translate3d(0, var(--py, 0px), 0) rotate(-16deg); will-change: transform; }
.polaroid--br { top: 55%;  right: -6%;  transform: translate3d(0, var(--py, 0px), 0) rotate(16deg);  will-change: transform; }

/* === SECTION: OWNER STORY #2 ("A family business.") =======================
   Asymmetric 2×2 grid on white surface.
   Top-left: text. Top-right: tall kitchen photo.
   Bottom-left: wide dining photo. Bottom-right: portrait card.
   Soft watercolour wave dividers bleed cream into white at top + bottom. */

.family-section {
  position: relative;
  overflow: hidden;             /* keep wave dividers clipped to section */
}

.family-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    "text    kitchen"
    "dining  portrait";
  gap: clamp(var(--mg-space-6), 4vw, var(--mg-space-9));
  align-items: start;
}

.family-grid__text     { grid-area: text;     max-width: 56ch; }
/* The 3 photos float free of the grid rhythm via scroll parallax (--py set
   by site.js IIFE 9). translate3d(0,0,0) is a no-op until JS kicks in. */
.family-grid__kitchen  { grid-area: kitchen; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.family-grid__dining   { grid-area: dining;  transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.family-grid__portrait { grid-area: portrait; max-width: 320px; justify-self: center; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

.family-grid__heading {
  color: var(--mg-text-heading-white);
  margin-block: var(--mg-space-7) var(--mg-space-6);
}

.family-grid__prose {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-3);
  margin-top: var(--mg-space-6);
  color: var(--mg-text-body-white);
}

/* Wave dividers — pure decoration. The source PNG (4096×508, aspect 8:1)
   gets squashed to fit Figma's flatter intended slice (≈ 23:1, image 39
   was 1728×75). `object-fit: fill` stretches the whole image into the
   clamped band — wave curve flattens proportionally, full viewport width,
   no horizontal cropping. */
.section-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--mg-wave-h);
  object-fit: fill;                        /* stretch to exact box — full width, flat wave */
  pointer-events: none;
  display: block;
  /* The wave PNG bakes the original cream (#FBF8F1); nudge it down to match
     the current page cream (--mg-color-cream). Per-section overrides below
     (e.g. .form-section) replace this where the wave must bleach to white. */
  filter: brightness(0.97);
}

/* Sections that carry a wave divider need extra padding equal to the wave
   height on the divider side(s), so visible content keeps its breathing
   room. Use `data-divider="top"` / `"bottom"` / `"top bottom"` on the
   <section> element. The `~=` selector matches space-separated tokens. */
.section[data-divider~="top"] {
  padding-block-start: calc(var(--mg-section-pad) + var(--mg-wave-h));
}

.section[data-divider~="bottom"] {
  padding-block-end: calc(var(--mg-section-pad) + var(--mg-wave-h));
}

/* The loose-padding variant compounds the same way */
.section--loose[data-divider~="top"] {
  padding-block-start: calc(var(--mg-section-pad-loose) + var(--mg-wave-h));
}

.section--loose[data-divider~="bottom"] {
  padding-block-end: calc(var(--mg-section-pad-loose) + var(--mg-wave-h));
}

/* And the tight-padding variant */
.section--tight[data-divider~="top"] {
  padding-block-start: calc(var(--mg-section-pad-tight) + var(--mg-wave-h));
}

.section--tight[data-divider~="bottom"] {
  padding-block-end: calc(var(--mg-section-pad-tight) + var(--mg-wave-h));
}

/* Top wave: flip so cream lands at element top (continuous with section above),
   wave-edge in the middle, transparent at element bottom (current section bg
   shows through). */
.section-wave--top {
  top: 0;
  transform: scaleY(-1) translateY(1px);
}

/* Bottom wave: natural orientation — transparent at top (current bg shows
   through), wave-edge in the middle, cream at element bottom (continuous
   with section below). */
.section-wave--bottom {
  bottom: 0;
  transform: translateY(1px);
}

/* Per-section recolour overrides. The wave PNG is cream; a CSS filter
   bleaches it to white where the section above is white. */
.form-section .section-wave--top {
  filter: brightness(1.07) saturate(0);
}

/* === FRAMED PHOTO + CORNER BRACKETS =====================================
   Photo in a tight container with 4 small orange L-shaped brackets at the
   corners — small decorative cropmarks per Figma. */
.framed-photo {
  position: relative;
  margin: 0;
  line-height: 0;
}

.framed-photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.framed-photo--tall img { aspect-ratio: 533 / 662; }
.framed-photo--wide img { aspect-ratio: 603 / 398; }

/* Service detail card variant — used in the "Whatever you're building"
   strip. Soft grey fallback bg + inset hairline border (so the corner
   brackets can poke past without being clipped by overflow). */
.framed-photo--service {
  aspect-ratio: 4 / 3;
  background-color: #EFEFEF;
  box-shadow: inset 0 0 0 1px #EBEBEB;
}

.framed-photo--service img { aspect-ratio: 4 / 3; }

.framed-photo--placeholder {
  background-color: var(--mg-surface-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.framed-photo__placeholder {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-sm);
  font-weight: var(--mg-weight-regular);
  color: #66625E;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.corner {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: transparent;
  background-image: url("../svg/corner-bracket.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.corner--tl { top: -13px; left: -13px; }
.corner--tr { top: -13px; right: -13px; transform: scaleX(-1); }
.corner--bl { bottom: -13px; left: -13px; transform: scaleY(-1); }
.corner--br { bottom: -13px; right: -13px; transform: scale(-1, -1); }

/* === PORTRAIT CARD (small person card with photo + name + role) =========
   Used here for Craig; reused elsewhere (recent homes, family band). */
.portrait-card {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-4);
  margin: 0;
}

.portrait-card__photo-wrap {
  position: relative;                       /* anchors the corner brackets */
  margin: 0;
}

.portrait-card__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background-color: var(--mg-surface-card);
  display: block;
}

.portrait-card__caption {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-2);
}

/* === SECTION: COMPARISON TABLE (Parkway vs Volume Builder) ================
   New archetype — to be promoted into mulgrave-base. Built generic so
   the same CSS handles any 2-column compare. Mobile collapses to a
   stacked card layout with labels per cell via data-label. */

.compare-section__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--mg-space-9), 5vw, var(--mg-space-11));
}

.compare-section__heading {
  color: var(--mg-color-brown-gold);
  /* No extra margin-block — defer to .section-head's `gap: var(--mg-space-6)`
     so every section header (compare, carousel, recent, reviews, service-area)
     has identical eyebrow → heading → rule → lead rhythm. */
}

.compare-table {
  width: 100%;
  max-width: 1068px;
  border-collapse: collapse;
  text-align: left;
  table-layout: fixed;
}

/* Header row: Parkway wordmark left, "Other Volume Builder" right */
.compare-table thead tr {
  border-bottom: 1px solid var(--mg-color-table-head-rule);
}

.compare-table th {
  padding: var(--mg-space-2) var(--mg-space-7) var(--mg-space-2) 0;
  vertical-align: middle;
  font-family: var(--mg-font-body);
  font-size: 18px;
  font-weight: var(--mg-weight-medium);
  height: 56px;
}

.compare-table th + th { padding-right: 0; padding-left: var(--mg-space-7); }

.compare-table__brand { display: block; width: 84px; height: auto; }

.compare-table__th-them {
  color: var(--mg-color-ink-quiet);
  opacity: 0.8;
}

/* Data rows */
.compare-table tbody tr {
  border-top: 1px solid var(--mg-border-row);
}

.compare-table tbody tr:first-child { border-top: 0; }

.compare-table td {
  padding: var(--mg-space-4) var(--mg-space-7) var(--mg-space-4) 0;
  vertical-align: top;
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-body);
  color: var(--mg-color-ink);
  line-height: 1.45;
}

.compare-table td + td {
  padding-right: 0;
  padding-left: var(--mg-space-7);
  opacity: 0.8;
}

/* Cell content: icon + text in a flex row (wrap to keep semantics clean) */
.compare-cell {
  display: flex;
  align-items: flex-start;
  gap: var(--mg-space-2);
}

.compare-cell__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 4px;             /* aligns visually with first line of text */
}

/* === SECTION: PROCESS (4-step, photo-backdrop variant) ====================
   Dark photo (construction frame at dusk) sits behind a two-gradient wash
   that keeps the text readable. Steps sit in a 4-up grid with dashed
   left-borders and circular numbered badges. */

.process-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--mg-color-process-bg);    /* #10110C */
}

.process-section__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;   /* clip the scaled, parallaxed photo */
}

.process-section__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Scaled up so the small parallax travel (--py, site.js IIFE 9) never
     exposes an edge — the image isn't large, so the shift stays gentle. */
  transform: translate3d(0, var(--py, 0px), 0) scale(1.12);
  will-change: transform;
}

/* Two gradient overlays — vertical fade from bottom + diagonal wash from
   top-right — keep heading legible regardless of photo highlights. */
.process-section__overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, rgb(28, 23, 11) 9.99%, rgba(0, 0, 0, 0) 49.96%),
    linear-gradient(157.42deg, rgba(35, 31, 30, 0.8) 22.48%, rgba(0, 0, 0, 0) 57.94%);
  pointer-events: none;
}

.process-section__inner {
  display: flex;
  flex-direction: column;
  /* Generous gap so the photo backdrop has room to breathe between
     the heading block and the 4 steps. */
  gap: clamp(var(--mg-space-13), 14vw, 14rem);
}

.process-section__heading {
  color: var(--mg-color-white);
  /* No extra margin — defer to .section-head's gap so every section
     header has identical eyebrow → heading → rule → lead rhythm. */
  max-width: 22ch;
}

.process-section__lead {
  color: var(--mg-color-cream);
  max-width: 60ch;
}

/* 4-up step grid */
.process-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--mg-space-6), 4vw, var(--mg-space-10));
  padding: 0;
  margin: 0;
}

.process-step {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-6);
  padding-left: var(--mg-space-4);
  border-left: 1px dashed rgba(255, 255, 255, 0.4);
  color: var(--mg-color-white);
}

.process-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--mg-radius-pill);
  border: 1px solid rgba(244, 244, 244, 0.5);
  font-family: var(--mg-font-body);
  font-weight: var(--mg-weight-medium);
  font-size: var(--mg-text-lg);
  color: var(--mg-color-white);
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

.process-step__title {
  font-family: var(--mg-font-body);
  font-weight: var(--mg-weight-medium);
  font-size: var(--mg-text-step);
  line-height: 30px;
  margin: 0;
  color: var(--mg-color-white);
}

.process-step__body {
  font-family: var(--mg-font-body);
  font-weight: var(--mg-weight-regular);
  font-size: var(--mg-text-body);
  line-height: var(--mg-leading-normal);
  color: var(--mg-color-white);
  margin: 0;
}

/* === SECTION: WHAT WE BUILD — draggable horizontal carousel ===============
   No loop. Mouse drag, touch swipe, horizontal scroll all work natively
   via overflow-x + scroll-snap. JS adds mouse-drag-to-scroll on desktop.
   Prev/Next buttons step one card at a time. */

.services-carousel-section__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--mg-space-9), 5vw, var(--mg-space-11));
}

.services-carousel-section__heading {
  color: var(--mg-color-brown-gold);
  max-width: 18ch;
}

.drag-carousel {
  position: relative;
  /* Escape the .container completely — track is full viewport width.
     Negative margin = (50vw - 50% of container width). */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

.drag-carousel__track {
  display: flex;
  gap: clamp(var(--mg-space-5), 2.5vw, var(--mg-space-7));
  /* First/last card start at the wrapper edge — padding-inline equals
     half the viewport-minus-wrapper, with a sensible minimum. */
  padding-inline: max(var(--mg-space-6), calc((100vw - var(--mg-container-max)) / 2 + var(--mg-space-6)));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--mg-space-6), calc((100vw - var(--mg-container-max)) / 2 + var(--mg-space-6)));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.drag-carousel__track::-webkit-scrollbar { display: none; }

.drag-carousel__track.is-dragging { cursor: grabbing; }
.drag-carousel__track.is-dragging * { pointer-events: none; }

/* Cards keep the Figma proportions: feature card wider (~522px), the
   other 3 narrower (~400px). Sizes scale via clamp so they stay
   proportional at any viewport. */
.drag-card {
  flex: 0 0 clamp(280px, 30vw, 400px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-6);
  margin: 0;
}

.drag-card:first-child {
  flex: 0 0 clamp(340px, 40vw, 540px);
}

/* Carousel cards keep the image's natural aspect on desktop — no crop. */
.drag-card__photo {
  aspect-ratio: auto;
}

.drag-card__photo img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: auto;
}

.drag-card__copy {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-3);
}

.drag-card__title {
  font-family: var(--mg-font-display);
  font-weight: var(--mg-weight-regular);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15;
  color: #1E1A15;
  margin: 0;
}

.drag-card__desc {
  font-family: var(--mg-font-body);
  font-weight: var(--mg-weight-regular);
  font-size: var(--mg-text-body);
  line-height: var(--mg-leading-normal);
  color: #4B4742;
  margin: 0;
}

/* (Prev/Next nav removed — carousel is drag-only.) */

/* === SECTION: RECENT HOMES — grow / reveal / shrink scroll animation ======
   Section opens with heading. Below: tall stage with a sticky pin.
   Phase A (0–25%):  tile-1 photo grows from inline size to fullscreen.
   Phase B (25–50%): tile-2 slides up from below, covers tile-1.
   Phase C (50–75%): tile-3 slides up from below, covers tile-2.
   Phase D (75–100%): tile-3 photo shrinks back to inline size.
   Info bar inside each tile is constrained to the site wrapper
   (max-width 1280) and always sits at the bottom of the viewport. */

.recent-reveal__head {
  margin-bottom: clamp(var(--mg-space-6), 3.5vw, var(--mg-space-8));
}

.recent-reveal__heading {
  color: var(--mg-color-brown-gold);
  max-width: 28ch;
}

.recent-reveal__stage {
  position: relative;
  /* 6 phases × 100vh — 3 anim segments + 3 hold/read segments between */
  height: 600vh;
}

.recent-reveal__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background-color: var(--mg-surface-page);
}

.recent-reveal__tile {
  position: absolute;
  inset: 0;
  margin: 0;
  display: block;
  will-change: transform;
}

.recent-reveal__tile[data-tile-index="0"] { z-index: 1; }
.recent-reveal__tile[data-tile-index="1"] { z-index: 2; transform: translateY(100%); }
.recent-reveal__tile[data-tile-index="2"] { z-index: 3; transform: translateY(100%); }

/* Photo — sized via CSS custom property (JS sets --tile-scale 0–1).
   At scale 0: max 1280 wide, taller-than-letterbox card (centred).
   At scale 1: 98vw × 98vh — leaves a visible cream border around the
   image at full-bleed so the section bg isn't completely covered.
   Scale-0 height is 82vh (was 60vh): a less-letterboxed aspect, and it
   fills more of the 100vh pin so the centred card sits closer to the
   headline above (less empty space). */
.recent-reveal__photo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(var(--mg-container-max, 1280px) + (98vw - var(--mg-container-max, 1280px)) * var(--tile-scale, 1));
  height: calc(min(82vh, 920px) + (98vh - min(82vh, 920px)) * var(--tile-scale, 1));
  max-width: 98vw;
  max-height: 98vh;
  overflow: hidden;
  border-radius: var(--mg-radius-md);
  transition: none;
}

.recent-reveal__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recent-reveal__shade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg,
                      rgba(0, 0, 0, 0) 55%,
                      rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
}

/* Info bar — INSIDE the photo card, absolute at its bottom edge.
   Padding scales with --tile-scale so text breathing-room grows with
   the image. */
.recent-reveal__info {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(var(--mg-space-4), calc(2vw + 2vw * var(--tile-scale, 0)), var(--mg-space-7));
  padding: calc(var(--mg-space-5) + var(--mg-space-5) * var(--tile-scale, 0))
           calc(var(--mg-space-5) + var(--mg-space-7) * var(--tile-scale, 0));
  color: var(--mg-color-white);
  pointer-events: none;
}

.recent-reveal__id {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-2);
  min-width: 0;
}

/* Text interpolates with --tile-scale so the small/inline state matches
   the Figma design size; the full/100vw state grows up to a larger
   wrapper-width size. */
.recent-reveal__region {
  font-family: var(--mg-font-body);
  font-size: calc(12px + 2px * var(--tile-scale, 0));
  font-weight: var(--mg-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
}

.recent-reveal__address {
  font-family: var(--mg-font-display);
  font-weight: var(--mg-weight-regular);
  font-size: calc(28px + 20px * var(--tile-scale, 0));     /* 28 → 48 */
  line-height: 1.05;
}

.recent-reveal__stats dt { font-size: calc(11px + 2px * var(--tile-scale, 0)); }
.recent-reveal__stats dd { font-size: calc(18px + 6px * var(--tile-scale, 0)); }

.recent-reveal__stats {
  display: flex;
  margin: 0;
  flex-shrink: 0;
  align-items: flex-end;
}

.recent-reveal__stats > div {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-1);
  padding-inline: clamp(var(--mg-space-5), 2.5vw, var(--mg-space-9));
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.recent-reveal__stats > div:first-child { border-left: 0; }

.recent-reveal__stats dt {
  font-family: var(--mg-font-body);
  font-weight: var(--mg-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  margin: 0;
}

.recent-reveal__stats dd {
  font-family: var(--mg-font-body);
  font-weight: var(--mg-weight-medium);
  color: var(--mg-color-white);
  line-height: 1;
  margin: 0;
}

/* Reduced-motion + small viewports: drop the scroll-pin and just stack
   the 3 tiles as normal property cards. */
@media (prefers-reduced-motion: reduce) {
  .recent-reveal__stage { height: auto; }
  .recent-reveal__pin   { position: static; height: auto; overflow: visible; background: transparent; }
  .recent-reveal__tile  {
    position: relative;
    transform: none !important;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--mg-space-2);
  }
}

/* === SECTION: REVIEWS (6 cards, horizontal scroll rail) ===================
   6 × 400px cards in a single horizontal row that overflows the container
   and scrolls. CSS scroll-snap keeps cards aligned to the start edge.
   Markup identical to a Smash Balloon Reviews Pro export so Backend can
   swap source without touching CSS. */

.reviews-section__head { gap: var(--mg-space-6); }

.reviews-section__heading {
  color: var(--mg-color-brown-gold);
  max-width: 24ch;
}

/* The chip variant for light backgrounds (override of base review-chip) */
.review-chip--light { color: #4F4F4F; }
.review-chip--light .review-chip__divider { background-color: rgba(0, 0, 0, 0.2); }

/* The card rail — bleeds out of the .container for full-bleed marquee.
   Two duplicate groups of cards inside a track that translates -50%
   on loop, giving a seamless infinite scroll. */
.reviews-rail {
  position: relative;
  margin-top: var(--mg-space-11);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.reviews-rail__track {
  display: flex;
  width: max-content;
  gap: var(--mg-space-6);
  animation: reviewsScroll var(--reviews-scroll-duration, 60s) linear infinite;
}

.reviews-rail:hover .reviews-rail__track,
.reviews-rail:focus-within .reviews-rail__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .reviews-rail__track { animation: none; }
}

.reviews-rail__group {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--mg-space-6);
  flex-shrink: 0;
}

@keyframes reviewsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--mg-space-3))); }
}

.review-card {
  flex: 0 0 clamp(280px, 28vw, 400px);
  background-color: var(--mg-color-white);
  padding: var(--mg-space-7);
  border-radius: var(--mg-radius-tab);    /* 8px per Figma */
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-4);
  opacity: 1;
  transition: opacity var(--mg-dur-base) var(--mg-ease-out);
}

/* When any card is hovered, dim the others to highlight the focus card. */
.reviews-rail:hover .review-card { opacity: 0.5; }
.reviews-rail:hover .review-card:hover { opacity: 1; }

.review-card__head {
  display: flex;
  align-items: center;
  gap: var(--mg-space-3);
}

/* Quote text sits bare inside the <blockquote> (no <p> wrapper), so the
   text styles must live on .review-card__quote itself — otherwise the text
   falls back to the cream section's inherited brown body colour. */
.review-card__quote,
.review-card__quote p {
  font-family: var(--mg-font-body);
  font-size: 18px;
  font-weight: var(--mg-weight-regular);
  color: var(--mg-color-ink);
  line-height: var(--mg-leading-normal);
  margin: 0;
}

.review-card__quote strong {
  font-weight: var(--mg-weight-semibold);
}

.review-card__author {
  font-family: var(--mg-font-body);
  font-size: 18px;
  font-weight: var(--mg-weight-medium);
  color: var(--mg-color-table-head-rule);   /* navy #222D53 per Figma */
  font-style: normal;
  line-height: 1;
}

/* === SECTION: TEAM (family band) ==========================================
   Full-bleed background photo + dark gradient overlay. Centered heading
   sits in the upper area. Family cutout positioned at the bottom showing
   the full upper body (not cropped at the shoulders). Top + bottom of
   the section have circular notch dividers (curved concave cutouts) that
   carry the cream surface of the adjacent sections into the dark band. */

.team-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--mg-color-navy);
  padding-bottom: 0;                          /* photo sits flush at section bottom */
}

.team-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;   /* clip the scaled, parallaxed background photo */
}

.team-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate3d(0, var(--py, 0px), 0) scale(1.1);
  will-change: transform;
}

/* Dark gradient overlay — TOP PORTION ONLY (≈ top 40% of the section).
   Heading stays readable; the rest of the photo shows through clean. */
.team-section__bg::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background-image: linear-gradient(180deg,
    rgba(5, 20, 45, 0.85) 0%,
    rgba(5, 20, 45, 0.55) 50%,
    rgba(5, 20, 45, 0) 100%);
}

/* Custom Figma separator — thin cream strip with a centered notch.
   Significantly reduced height so it reads as a detail, not a giant
   shape. Width spans full viewport; height is small. */
.team-divider {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: clamp(14px, 1.2vw, 20px);
  z-index: 6;
  pointer-events: none;
  display: block;
}

.team-divider--top    { top: 0; }
.team-divider--bottom { bottom: 0; transform: rotate(180deg); }

.team-section__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--mg-space-7), 4vw, var(--mg-space-10));
}

.team-section__heading {
  color: var(--mg-color-white);
  max-width: 22ch;
}

/* Family photo — cropped to upper-leg height (no shoes). Sits flush
   at the bottom edge of the section (no padding-bottom on the section). */
.team-section__photo {
  margin: 0;
  width: 100%;
  /* Floor reduced to 280px so the photo never forces horizontal scroll
     on phones. Cap stays at 1100px for desktop. */
  max-width: clamp(280px, 90vw, 1100px);
  aspect-ratio: 5 / 4;
  overflow: hidden;
}

.team-section__photo img {
  width: 100%;
  height: 100%;                    /* fill the 5:4 figure box */
  display: block;
  object-fit: cover;
  object-position: center top;     /* anchor heads, crop bottom (feet) */
}

/* Names — overlay the bottom of the photo (absolute pinned to section
   bottom edge, above the photo via z-index). */
.team-roster {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  inset: auto 0 var(--mg-space-7) 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(var(--mg-space-6), 3vw, var(--mg-space-9));
  z-index: 7;
}

.team-roster__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mg-space-1);
  min-width: 140px;
}

.team-roster__person .t-person-role {
  font-size: var(--mg-text-sm);
}

/* === SECTION: SERVICE AREA (peninsula map) ================================
   Watercolour map image + pinned label pills (percentage-positioned so
   the layout scales with map width). Mobile collapses to the map alone
   + a list of suburbs underneath. */

.service-area__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--mg-space-9), 5vw, var(--mg-space-11));
}

.service-area__heading {
  color: var(--mg-color-brown-gold);
}

.map-card {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 1280 / 650;
  margin-inline: auto;
  border: 1px solid var(--mg-color-map-card-border);
  background-color: var(--mg-surface-page);
  overflow: hidden;
}

/* Pan layer + inner rail wrap all map-image-anchored overlays (bg, pills,
   markers, labels, arc, radar). On desktop both are transparent (display:
   contents) so the children sit inside .map-card's positioning context
   exactly as before. On mobile the pan becomes a horizontal scroll
   container and the rail becomes the wide (aspect-correct) inner layer
   — sized so the bg's 1280:650 natural aspect is preserved and label
   percent-positions land on their actual map points. */
.map-card__pan,
.map-card__rail { display: contents; }
.map-card__pan.is-panning { cursor: grabbing; }

.map-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

/* All overlays: positioned via inline left/top % */
.map-pill,
.map-land,
.map-water,
.map-marker,
.map-arc,
.map-caption,
.map-radar,
.map-compass {
  position: absolute;
}

/* Concentric dashed radius rings centered on Dromana. The SVG is square
   and sized as a percentage of the map width — anything beyond the map
   bounds gets clipped by the .map-card's overflow:hidden. */
.map-radar {
  left: 30%;                /* Dromana X */
  top: 59%;                 /* Dromana Y */
  transform: translate(-50%, -50%);
  width: clamp(420px, 70%, 1100px);
  height: auto;
  z-index: 1;
  pointer-events: none;
  opacity: 0.7;
}

/* Compass rose — bottom-left corner. mix-blend-mode multiply lets the
   compass darken into whatever map terrain is underneath instead of
   sitting on top as a hard graphic. */
.map-compass {
  left: var(--mg-space-5);
  bottom: var(--mg-space-5);
  width: clamp(32px, 3.3vw, 56px);
  height: auto;
  z-index: 4;
  opacity: 0.65;
  mix-blend-mode: multiply;
}

/* Suburb pill — white chip with drop-shadow against the realistic map. */
.map-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-1);
  padding: 5px var(--mg-space-3);
  background-color: var(--mg-color-white);
  border-radius: 2px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
  font-family: var(--mg-font-body);
  font-weight: var(--mg-weight-bold);
  font-size: clamp(11px, 0.9vw, 14px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mg-color-brown-label);
  line-height: 1.4;
  white-space: nowrap;
  z-index: 3;
  transform: translate(-50%, -50%);
}

/* Dromana — special: the orange marker pin sits to its left (see markup). */
.map-pill--dromana {
  z-index: 6;
  color: var(--mg-color-brown-strong);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.20));
}

.map-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--mg-radius-pill);
  background-color: var(--mg-accent-eyebrow);
  flex-shrink: 0;
}

/* (Previous .map-dromana-connector removed — connector duty is now
   handled by reshaping the existing .map-arc element's path.) */

/* Large "South East Melbourne" land label — wraps to 2 lines via <br>. */
.map-land {
  font-family: var(--mg-font-body);
  font-weight: var(--mg-weight-bold);
  font-size: clamp(14px, 1.5vw, 22px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mg-color-brown-label);
  opacity: 0.35;
  line-height: 1.15;
  text-align: center;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Water labels (Port Phillip Bay, Bass Strait) */
.map-water {
  font-family: var(--mg-font-body);
  font-weight: var(--mg-weight-semibold);
  font-size: clamp(11px, 1vw, 15px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mg-color-map-water);
  opacity: 0.85;
  line-height: 1;
  transform: translate(-50%, -50%);
  z-index: 2;
  white-space: nowrap;
}

/* Dromana pin marker — outer ring + inner dot */
.map-marker {
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  z-index: 4;
}

.map-marker__ring {
  position: absolute;
  inset: 0;
  background-color: #F5D7C3;
  opacity: 0.4;
  border-radius: var(--mg-radius-pill);
}

.map-marker__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background-color: var(--mg-accent-eyebrow);
  border: 3px solid var(--mg-color-white);
  border-radius: var(--mg-radius-pill);
}

/* Connector arc — full-map overlay (1280×650 coord system) so the
   path's start/end points line up with concrete pixel positions. */
.map-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Caption card at bottom-right with interior thumb. Desktop position
   anchored to the % spot the map arc terminates (was an inline style on
   the element — moved here so mobile can override the position cleanly
   without `!important`). */
.map-caption {
  display: flex;
  align-items: stretch;
  background-color: var(--mg-color-white);
  border-radius: var(--mg-radius-md);
  overflow: hidden;
  margin: 0;
  left: 68.5%;
  top: 84.8%;
  width: clamp(280px, 31%, 393px);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
  z-index: 5;
}

.map-caption__thumb {
  flex-shrink: 0;
  width: 32%;
  object-fit: cover;
}

.map-caption__text {
  flex: 1;
  padding: var(--mg-space-3);
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-md);
  font-weight: var(--mg-weight-regular);
  color: var(--mg-color-ink);
  line-height: var(--mg-leading-normal);
}

.map-caption__text strong {
  font-weight: var(--mg-weight-semibold);
}

/* Mobile fallback list — hidden on desktop where the map labels stand in */
.service-area__list { display: none; }

/* === SECTION: FAQ (native details accordion) ==============================
   White surface. 2-column: heading left, Q&A right. Zero JS — native
   <details>/<summary>, keyboard-accessible by default. */

.faq-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 426px) minmax(0, 720px);
  gap: clamp(var(--mg-space-9), 8vw, 108px);
  align-items: start;
}

.faq-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-6);
}

.faq-section__heading {
  color: var(--mg-color-brown-gold);
}

.faq-section__footnote {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-body);
  font-weight: var(--mg-weight-regular);
  color: #1E1A15;
  line-height: var(--mg-leading-normal);
  margin: var(--mg-space-3) 0 0;
}

.faq-section__footnote a {
  color: var(--mg-color-link-quiet);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Accordion */
.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid #DAD7D3;
}

.faq-item:last-of-type {
  border-bottom: 1px solid #DAD7D3;
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mg-space-3);
  padding: 17px 4px;
  font-family: var(--mg-font-body);
  font-size: 18px;
  font-weight: var(--mg-weight-medium);
  color: var(--mg-color-navy);
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Hide the default disclosure marker across browsers */
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ''; }

/* The +/× toggle — CSS-only, two intersecting lines drawn with linear-gradient.
   Rotates 45° on open so + visually becomes ×. */
.faq-item__q::after {
  content: '';
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform var(--mg-dur-base) var(--mg-ease-out);
}

.faq-item[open] .faq-item__q::after {
  transform: rotate(45deg);
}

.faq-item__a {
  padding: 0 4px var(--mg-space-4);
  color: #4B4742;
}

.faq-item__a p {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-body);
  font-weight: var(--mg-weight-regular);
  line-height: var(--mg-leading-normal);
  margin: 0;
}

.faq-item__q:hover,
.faq-item__q:focus-visible {
  background-color: color-mix(in srgb, var(--mg-color-navy) 4%, transparent);
}

/* === SECTION: FORM — "Start your project" =================================
   Dark navy wrap, centered heading + lead, white form card with 4-step
   progress indicator + service-card grid + 2-column layout below.
   JS wiring lives in site.js — preselect from body[data-service], pill
   radio toggle, step indicator progression, alert-stub submit. */

.form-section {
  position: relative;                       /* anchor for the top wave divider */
  overflow: hidden;
  background-color: var(--mg-color-navy);
}

.form-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--mg-space-7), 4vw, var(--mg-space-9));
}

.form-section__heading {
  color: var(--mg-color-white);
  max-width: 22ch;
}

.form-section__lead {
  color: var(--mg-color-white);
  max-width: 56ch;
  text-align: center;
}

/* Form card */
.quote-form {
  width: 100%;
  background-color: var(--mg-color-white);
  border-radius: var(--mg-radius-md);
  overflow: hidden;
}

/* Step indicator strip */
.form-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--mg-space-5), 3vw, var(--mg-space-8));
  padding: var(--mg-space-3) var(--mg-space-6);
  margin: 0;
  border-bottom: 1px solid #E2E2E3;
}

.form-steps__item {
  display: flex;
  align-items: center;
  gap: var(--mg-space-2);
}

.form-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--mg-radius-pill);
  background-color: transparent;
  border: 1px solid rgba(163, 163, 163, 0.5);
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-sm);
  font-weight: var(--mg-weight-medium);
  color: #7A7A7A;
  opacity: 0.5;
  transition: background-color var(--mg-dur-base) var(--mg-ease-out),
              border-color var(--mg-dur-base) var(--mg-ease-out),
              color var(--mg-dur-base) var(--mg-ease-out),
              opacity var(--mg-dur-base) var(--mg-ease-out);
}

.form-steps__label {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-body);
  font-weight: var(--mg-weight-medium);
  color: #797979;
  transition: color var(--mg-dur-base) var(--mg-ease-out);
}

.form-steps__item.is-active .form-steps__num,
.form-steps__item.is-done .form-steps__num {
  background-color: var(--mg-accent-eyebrow);
  border-color: var(--mg-accent-eyebrow);
  color: var(--mg-color-white);
  opacity: 1;
}

.form-steps__item.is-done .form-steps__num {
  background-color: color-mix(in srgb, var(--mg-accent-eyebrow) 85%, transparent);
}

.form-steps__item.is-active .form-steps__label,
.form-steps__item.is-done .form-steps__label {
  color: var(--mg-color-navy);
}

/* Form body — compact spacing (one step tighter overall per Carlos). */
.quote-form__body {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-5);
  padding: var(--mg-space-6) clamp(var(--mg-space-5), 3vw, var(--mg-space-9));
}

.quote-form__group {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-3);
}

/* Section-level legend (e.g. "What type of project?") — orange section heading */
.quote-form__legend {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-md);
  font-weight: var(--mg-weight-semibold);
  letter-spacing: var(--mg-track-eyebrow);
  text-transform: uppercase;
  color: var(--mg-accent-eyebrow);
  padding: 0;
  margin: 0 0 var(--mg-space-3);
  display: block;
  width: 100%;
}

.quote-form__label {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-md);
  font-weight: var(--mg-weight-medium);
  color: var(--mg-color-ink-name);
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
}

.quote-form__divider {
  width: 100%;
  height: 1px;
  background-color: var(--mg-border-row);
  border: 0;
  margin: 0;
}

/* 2-column split — tighter gap */
.quote-form__split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(var(--mg-space-5), 3vw, var(--mg-space-7));
  align-items: start;
}

.quote-form__col {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-5);
  min-width: 0;
}

/* Column heading (e.g. "Budget & Timing", "Your details") — orange */
.quote-form__col-h {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-md);
  font-weight: var(--mg-weight-semibold);
  letter-spacing: var(--mg-track-eyebrow);
  text-transform: uppercase;
  color: var(--mg-accent-eyebrow);
  line-height: 1.3;
  margin: 0 0 var(--mg-space-2);
}

.quote-form__rule {
  background-color: var(--mg-border-row);
  width: 1px;
  min-height: 100%;
}

/* Pill option group — equal-width pills within a group, wrap to next row
   if needed. Each pill flexes to fill its slice of the row evenly. */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-2);
}

.pill-group .pill {
  flex: 1 1 0;                /* equal distribution within available width */
  min-width: max(120px, calc(25% - var(--mg-space-2)));   /* keeps 4-up max before wrap */
  min-height: 40px;
  padding-block: var(--mg-space-2);
  line-height: 1.25;
}

/* Budget group: keep 4 across, force "Prefer not to say" onto its own row.
   The 5th pill gets the full width. */
.pill-group[data-pill-group="budget"] .pill:last-child {
  flex-basis: 100%;
}

/* 2-column row inside Your details (First/Last name) — exact 50/50.
   `minmax(0, 1fr)` prevents either field from expanding beyond its track
   if its content/intrinsic width tries to push it (browser default for
   grid tracks is `auto` minimum). */
.quote-form__row-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--mg-space-4);
}

.quote-form__row-2 > .field { min-width: 0; }

/* "Send to Parkway" — subtle two-stop green gradient instead of yellow,
   so the form's terminal action stands apart from the rest of the page's
   yellow CTAs. */
.quote-form__submit {
  margin-top: var(--mg-space-2);
  background-image: linear-gradient(180deg, #4F9D58 0%, #2E7036 100%);
  background-color: #4F9D58;             /* fallback if gradient fails */
  color: var(--mg-color-white);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transition: background-image var(--mg-dur-base) var(--mg-ease-out),
              transform var(--mg-dur-fast) var(--mg-ease-out),
              box-shadow var(--mg-dur-base) var(--mg-ease-out);
}

.quote-form__submit:hover {
  background-image: linear-gradient(180deg, #5DAD64 0%, #336D38 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30),
              0 6px 20px rgba(46, 112, 54, 0.30);
}

.quote-form__disclaimer {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-md);
  font-weight: var(--mg-weight-medium);
  color: var(--mg-color-brown-legal);
  line-height: var(--mg-leading-normal);
  margin: 0;
}

.quote-form__disclaimer a {
  color: var(--mg-color-link-quiet);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* === FOOTER ===============================================================
   Dark navy. Three-column grid on desktop:
   - Brand block (logo + intro + Google chip)
   - Visit Us + Contact + Plan-your-build CTA
   - Accreditations (VBA + HIA boxes) */

.footer {
  background-color: var(--mg-color-navy);
  padding-block: clamp(var(--mg-space-11), 8vw, var(--mg-space-13)) var(--mg-space-7);
  color: var(--mg-color-navy-text);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(var(--mg-space-7), 5vw, var(--mg-space-10));
  padding-bottom: var(--mg-space-9);
}

.footer-grid__brand {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-5);
  max-width: 56ch;
}

.footer__logo {
  display: inline-block;
  width: 186px;
  line-height: 0;
}

.footer__logo img { width: 100%; height: auto; }

.footer__intro {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-body);
  font-weight: var(--mg-weight-regular);
  color: var(--mg-color-navy-text);
  line-height: 1.5;
  margin: 0;
}

/* Footer column heading */
.footer-col__h {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-base);
  font-weight: var(--mg-weight-semibold);
  letter-spacing: var(--mg-track-eyebrow-wide);
  text-transform: uppercase;
  color: var(--mg-color-white);
  line-height: 1.3;
  margin: 0 0 var(--mg-space-4);
}

.footer-grid__contact {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-8);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-2);
}

.footer-col__address,
.footer-col p {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-base);
  font-weight: var(--mg-weight-regular);
  font-style: normal;
  color: var(--mg-color-navy-text);
  line-height: 1.5;
  margin: 0;
}

.footer__phone {
  color: var(--mg-color-navy-text);
  text-decoration: none;
}

.footer__phone:hover { text-decoration: underline; }

.footer__email {
  color: var(--mg-color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  word-break: break-word;
}

.footer__cta {
  align-self: flex-start;
  margin-top: var(--mg-space-3);
}

/* Accreditations boxes */
.footer-grid__accred {
  display: flex;
  flex-direction: column;
}

.footer-accred {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--mg-color-navy-border);
  max-width: 220px;
}

.footer-accred__row {
  display: flex;
  align-items: center;
  gap: var(--mg-space-3);
  padding: var(--mg-space-3) var(--mg-space-4);
  border-top: 1px solid var(--mg-color-navy-border);
}

.footer-accred__row:first-child { border-top: 0; }

.footer-accred__logo {
  width: 50px;
  height: auto;
  flex-shrink: 0;
}

.footer-accred__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-accred__name {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-md);
  font-weight: var(--mg-weight-semibold);
  color: var(--mg-color-navy-text);
  line-height: 1;
}

.footer-accred__sub {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-xs);
  font-weight: var(--mg-weight-medium);
  letter-spacing: 0.05em;
  color: var(--mg-color-navy-text-soft);
  line-height: 1;
}

/* Bottom row */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mg-space-4);
  padding-top: var(--mg-space-7);
  border-top: 1px solid var(--mg-color-navy-rule);
}

.footer-bottom__copyright {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-xs);
  font-weight: var(--mg-weight-regular);
  color: var(--mg-color-navy-legal);
  margin: 0;
  white-space: nowrap;
}

.footer-bottom__legal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--mg-space-5);
}

.footer-bottom__legal a {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-sm);
  color: var(--mg-color-navy-legal);
  text-decoration: none;
}

.footer-bottom__legal a:hover { text-decoration: underline; }

/* Footer Google chip — uses muted navy-text instead of pure white */
.review-chip--footer {
  color: var(--mg-color-navy-text);
  align-self: flex-start;
  padding: 0;
  gap: var(--mg-space-3);
}

.review-chip--footer .review-chip__divider {
  background-color: rgba(255, 255, 255, 0.2);
}

/* === MOTION HOOKS ========================================================= */

.no-scroll { overflow: hidden; }

/* === RESPONSIVE =========================================================== */

@media (max-width: 900px) {
  .container { padding-inline: var(--mg-space-6); }    /* 24px gutter */
  :root { --mg-section-pad: var(--mg-space-11); }      /* tighten to 64px */

  .t-display-1 { font-size: 44px; }
  .t-display-2 { font-size: 36px; }
  .t-display-3 { font-size: 24px; }

  .section-head { max-width: 100%; }

  .topbar__inner { padding-inline: var(--mg-space-6); }   /* match .container 24px */
  .topbar__nav { display: none; }                      /* hidden — hamburger takes over */
  .topbar__menu { display: inline-flex; }              /* hamburger shows on mobile */

  /* Mobile topbar: compact height by DEFAULT (don't wait for .is-scrolled)
     but keep the translucent backdrop-blur over the hero so it reads as
     "floating UI", not "white nav bar dropped on photo". The .is-scrolled
     state below switches to solid white when the hero leaves the viewport. */
  .topbar { height: auto; }
  .topbar__inner { padding-block: 10px; height: auto; }
  .topbar__logo-img { width: auto; height: 48px; }

  /* Hero on mobile uses the same clamp-driven pattern as desktop, just
     scaled for shorter viewports. Photo aspect bumps to 4/3 so the house
     is a meaningful size at narrow widths (the desktop 1728/520 would
     produce a 120px-tall strip on a 400px-wide phone). */
  /* Hero: target one full viewport so the widget tab + a sliver of the
     first 2×2 card row peek above the fold — signals "scroll for more".
     Photo aspect bumps to 4/3 so the house is the right size for narrow
     widths. */
  .hero {
    min-height: 100vh;
    min-height: 100dvh; /* dvh avoids the iOS address-bar jump on mobile */
    padding-bottom: var(--mg-space-7);
  }
  .hero__photo { aspect-ratio: 4 / 3; }
  /* Tighter side padding so the headline gets room to breathe. */
  .hero__content {
    padding-top: var(--mg-space-6);
    padding-inline: var(--mg-space-4);
    gap: var(--mg-space-4);
  }
  /* Lead copy: 20px on desktop is too loud on a 390px viewport. */
  .hero__lead { font-size: var(--mg-text-md); line-height: 1.45; }
  /* Buttons: keep both CTAs on ONE row at mobile. "See projects" hugs its
     own content width; "Plan your build" (the primary) expands to fill the
     rest of the row. */
  .hero__ctas { flex-direction: row; max-width: 340px; gap: var(--mg-space-2); }
  .hero__ctas .btn {
    padding: var(--mg-space-3) var(--mg-space-2);
    gap: var(--mg-space-1);
    font-size: 13px;
    letter-spacing: 0.02em;
    justify-content: center;
    white-space: nowrap;
  }
  /* Outline CTA hugs content; primary stack grows to fill the remaining row. */
  .hero__ctas > .btn--outline { flex: 0 0 auto; }
  .hero__primary-stack { flex: 1 1 auto; }
  .hero__ctas .btn__icon { width: 16px; height: 16px; }
  .scroll-cue { display: none; }

  .hero__cards {
    /* Full-bleed edge-to-edge on mobile — bypass the container gutter
       so the white widget card pins flush to the viewport edges. */
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    bottom: auto;
    top: 100%;
    transform: translateY(calc(-1 * var(--mg-space-9)));
  }
  /* Card body loses its outer radius at full-bleed (corners against the
     screen edge look unfinished otherwise). */
  .hero__cards-body { border-radius: 0; }
  /* Smaller CONTINUE button — matches the hero's compact CTAs. */
  .hero__cards-continue {
    padding: var(--mg-space-3) var(--mg-space-5);
    font-size: var(--mg-text-md);
  }
  .hero__cards-continue .btn__icon { width: 16px; height: 16px; }
  /* Service cards: 2 columns × 2 rows on mobile. Description text is
     hidden — the icon + title carry the meaning. Smaller icon area so
     each card is shorter. Used by BOTH the hero widget and form Step 1.
     `grid-auto-rows: 1fr` + flex column on the card guarantees every
     card is the same height regardless of how many lines the title
     occupies ("Renovations & Extensions" wraps to 2 lines; others 1). */
  .service-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: var(--mg-space-2);
    flex-direction: initial;                  /* override desktop flex-row */
  }
  .service-cards li { display: block; height: 100%; }
  .service-card {
    height: 100%;
    padding: var(--mg-space-3);
    gap: var(--mg-space-2);
    justify-content: flex-start;
  }
  .service-card__icon { height: 56px; }
  .service-card__copy { flex: 1; justify-content: center; }
  .service-card__title { min-height: 2.5em; line-height: 1.25; }
  .service-card__desc { display: none; }
  .accreditations { gap: var(--mg-space-7); flex-wrap: wrap; justify-content: center; }

  /* With the 2×2 widget the bleed is ~440px (cards + tab + Continue).
     Subtract the 48px upward translate, add ~64px breathing for clear
     visual separation between the widget bottom and the story content. */
  .section--after-hero {
    padding-block-start: clamp(28rem, 75vw, 34rem);
  }

  /* Owner story: drop absolute corners — show polaroids as a single row of 4
     above the prose. Sizes tuned so 4 frames + gaps fit on a 360px-wide
     viewport (the narrowest realistic phone). Border halved from 8→3px to
     keep the photos legible at this scale. */
  .owner-story__portraits {
    display: flex;
    flex-wrap: nowrap;                       /* one row, never wrap */
    gap: var(--mg-space-2);
    justify-content: center;
    margin-bottom: var(--mg-space-6);
  }
  .polaroid {
    position: static;
    width: clamp(60px, 20vw, 80px);
    border-width: 3px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.12);
    flex-shrink: 1;                          /* allow shrinking on extra-narrow */
  }
  .polaroid--tl, .polaroid--tr, .polaroid--bl, .polaroid--br {
    position: static;
    top: auto; left: auto; right: auto;
  }
  .polaroid--tl { transform: rotate(-4deg); }
  .polaroid--tr { transform: rotate(4deg); }
  .polaroid--bl { transform: rotate(-6deg); }
  .polaroid--br { transform: rotate(6deg); }

  /* Family section on mobile:
     Simple staggered stack. All 3 images smaller (~72% width) and
     alternate-aligned — kitchen left, dining/ute right, portrait left.
     Reads as a rhythmic gallery without overlap. */
  .family-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "kitchen"
      "dining"
      "portrait";
    gap: var(--mg-space-5);
  }
  .family-grid__kitchen,
  .family-grid__dining,
  .family-grid__portrait {
    width: 72%;
    max-width: 320px;
    margin: 0;                              /* override desktop max-width:320px center */
  }
  .family-grid__kitchen  { justify-self: start; }
  .family-grid__dining   { justify-self: end;   }
  .family-grid__portrait { justify-self: start; }

  /* Compare table — single-column on mobile, but grouped: all PARKWAY items
     under one PARKWAY heading, then all OTHER VOLUME BUILDER items under
     their heading. Achieves the desktop "two columns of pros vs cons" feel
     in a vertical stack, without repeating row labels.
     Mechanism: tbody → grid (1 col); tr → display:contents so its tds
     flow as direct grid items; order:1 puts every parkway td (first-of-row)
     in the first half, order:2 puts every other td in the second half;
     ::before on the FIRST td of each column carries the column heading. */
  .compare-table { table-layout: auto; display: block; }
  .compare-table thead {
    border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px;
    overflow: hidden; padding: 0; position: absolute;
  }
  .compare-table tbody {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .compare-table tbody tr { display: contents; }
  .compare-table tbody tr,
  .compare-table tbody tr:first-child { border: 0; }   /* borders move to td */
  .compare-table td,
  .compare-table td + td {
    display: block;
    width: 100%;
    padding: var(--mg-space-3) 0;            /* override desktop padding-left:32px */
    border-top: 1px solid var(--mg-border-row);
  }
  .compare-table td:first-child { order: 1; }
  .compare-table td:last-child  { order: 2; opacity: 0.85; }
  /* Drop the per-row data-label fallback */
  .compare-table td::before { content: none; }
  /* Section headings: ONE for parkway (above first parkway td),
     ONE for other (above first other td via order). */
  .compare-table tbody tr:first-child td:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .compare-table tbody tr:first-child td:last-child {
    /* This td becomes the first item of the second group thanks to order.
       Add the OTHER VOLUME BUILDER heading + reset its top border so the
       group starts cleanly. */
    border-top: 0;
    padding-top: 0;
    margin-top: var(--mg-space-7);
  }
  .compare-table tbody tr:first-child td:first-child::before,
  .compare-table tbody tr:first-child td:last-child::before {
    display: block;
    font-family: var(--mg-font-body);
    font-size: var(--mg-text-md);
    font-weight: var(--mg-weight-semibold);
    letter-spacing: var(--mg-track-eyebrow);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: var(--mg-space-4);
  }
  .compare-table tbody tr:first-child td:first-child::before {
    content: 'Parkway';
    color: var(--mg-color-brown-strong);
  }
  .compare-table tbody tr:first-child td:last-child::before {
    content: 'Other Volume Builder';
    color: var(--mg-color-ink-quiet);
  }

  /* Process steps: 4-up → 2-up grid on tablet/large mobile */
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Mobile crops carousel images to 4:3 for visual consistency in the
     narrower stacked layout. Desktop keeps natural aspect.
     (The base .drag-carousel rule already provides full-bleed via
      `margin-inline: calc(50% - 50vw); width: 100vw;` — no mobile
      override needed.) */
  .drag-card__photo {
    aspect-ratio: 4 / 3;
  }
  .drag-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Recent homes reveal: scroll-pin is a poor mobile experience —
     collapse to a normal stack of property tiles. Reset all the
     CSS-variable-based sizing on .recent-reveal__photo so the photo
     fills its tile cleanly instead of trying to be 98vw × 98vh. */
  .recent-reveal__stage { height: auto; }
  .recent-reveal__pin   { position: static; height: auto; overflow: visible; background: transparent; }
  .recent-reveal__tile  {
    position: relative;
    transform: none !important;
    opacity: 1 !important;
    aspect-ratio: 4 / 5;
    margin-bottom: var(--mg-space-3);
  }
  .recent-reveal__photo {
    position: static;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: var(--mg-radius-md);
  }
  /* Info bar: address row on top, then ONE compact stats line below.
     "BLOCK 638m²  ·  BUILD 5 months" — no vertical divider, no columns. */
  .recent-reveal__info {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mg-space-2);
    padding: var(--mg-space-4);
  }
  .recent-reveal__address { font-size: 22px; }
  .recent-reveal__stats {
    width: auto;
    display: flex;
    align-items: baseline;
    gap: var(--mg-space-3);
  }
  .recent-reveal__stats > div {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: var(--mg-space-1);
    padding: 0;
    border: 0;
    flex: 0 0 auto;
  }
  .recent-reveal__stats > div + div {
    border: 0;
    /* Middle-dot separator between block and build-time pairs */
    padding-left: var(--mg-space-3);
    position: relative;
  }
  .recent-reveal__stats > div + div::before {
    content: '·';
    position: absolute;
    left: 0;
    opacity: 0.7;
  }
  .recent-reveal__stats dt { font-size: 11px; opacity: 0.8; }
  .recent-reveal__stats dd { font-size: 14px; }

  /* Property tiles: info bar stacks vertically; stats become a row below */
  .property-tile--tall,
  .property-tile--wide { min-height: 360px; aspect-ratio: 4 / 5; }
  .property-tile__info { flex-direction: column; gap: var(--mg-space-4); }
  .property-tile__stats { width: 100%; }
  .property-tile__stats > div { flex: 1; padding-inline: var(--mg-space-3); }
  .property-tile__stats > div:first-child { padding-left: 0; }

  /* ---- SERVICE AREA MAP on mobile ----
     Full-bleed 3:4 (vertical) card. The pan is the scroll viewport. The
     RAIL inside the pan is wider than the viewport (sized to preserve
     the bg image's 1280:650 natural aspect at full card height) — this
     is critical: only when the rail's coordinate system matches the
     source map's do the label percent-positions land on their actual
     map points. The bg fills the rail 100%; all overlays (pills,
     markers, arc, radar, water/land labels) position absolute as %
     of the rail and inherit the exact desktop positioning. */
  .map-card {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    max-width: none;
    aspect-ratio: 3 / 4;
  }
  .map-card__pan {
    display: block;                              /* now a real container */
    position: absolute;
    inset: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .map-card__pan::-webkit-scrollbar { display: none; }
  /* The rail: full pan HEIGHT × width sized to bg's natural aspect.
     For a 3:4 card (width:height = 3:4 = 0.75) and bg aspect 1280:650
     (≈ 1.97:1), rail width = card.height × 1.97 = card.width × (4/3) × 1.97
     = card.width × 2.625. So 263% of card width. */
  .map-card__rail {
    display: block;
    position: relative;
    width: 263%;                                 /* card.width × (1280/650) × (4/3) */
    height: 100%;
  }
  /* Bg fills the rail at natural aspect — no cropping or stretching. */
  .map-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;                            /* rail IS the correct aspect */
  }
  /* Overlays (pills/markers/arc/radar/labels) are direct children of the
     rail — their `left: X%; top: Y%` inline styles use the rail as
     containing block. Rail dimensions match the source 1280×650 aspect,
     so every label lands on the same map point the Figma source defines. */
  .map-arc, .map-pill, .map-pill--dromana, .map-marker { display: block; }
  .map-pill { font-size: 11px; padding: 4px 8px; }
  .map-pill--dromana { font-size: 12px; }
  .map-land  { font-size: var(--mg-text-md); }
  .map-water { font-size: var(--mg-text-base); }
  /* Compass docked bottom-left of viewport (NOT inside pan, so it stays
     fixed during horizontal scroll). */
  .map-compass {
    display: block;
    left: var(--mg-space-3);
    bottom: var(--mg-space-3);
    width: 36px;
    z-index: 6;
  }
  /* "Based in Dromana" headquarters card stretches across the bottom of
     the visible map viewport — compass anchors the bottom-left, caption
     fills the remaining horizontal width. Both stay fixed during pan. */
  .map-caption {
    display: flex;
    top: auto;
    left: calc(var(--mg-space-3) + 36px + var(--mg-space-3));
    right: var(--mg-space-3);
    bottom: var(--mg-space-3);
    width: auto;                                  /* override desktop clamp(280px...) */
    max-width: none;
    z-index: 5;
    padding: 0;                                   /* keep desktop's flush thumb */
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: var(--mg-radius-md);
  }
  .map-caption__thumb { flex-shrink: 0; width: 56px; height: auto; object-fit: cover; }
  .map-caption__text {
    flex: 1;
    padding: var(--mg-space-2) var(--mg-space-3);
    font-size: var(--mg-text-sm);
    line-height: 1.3;
  }

  /* Tighter gap between map block and suburb list — was 48-64px. */
  .service-area__inner { gap: var(--mg-space-5); }

  /* Touch targets — bump pills to ≥44px per WCAG 2.5.5 */
  .pill-group .pill { min-height: 44px; }

  /* Reviews — compact for mobile. Smaller gap between cards (was 24px),
     tighter card padding (was 32px), smaller quote font, faster sweep.
     One card visible at a time so the 60s desktop sweep feels glacial. */
  .reviews-rail__track { animation-duration: 30s; gap: var(--mg-space-3); }
  .reviews-rail__group { gap: var(--mg-space-3); }
  .review-card {
    flex-basis: clamp(240px, 76vw, 320px);
    padding: var(--mg-space-5);
    gap: var(--mg-space-3);
    border-radius: var(--mg-radius-md);
  }
  .review-card__quote,
  .review-card__quote p { font-size: var(--mg-text-body); line-height: 1.45; }
  .review-card__author  { font-size: var(--mg-text-md); }
  @keyframes reviewsScroll { /* shorter step so gap-change keeps the loop seamless */
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - var(--mg-space-2))); }
  }

  /* ---- TEAM section: tight top, smaller names, bottom gradient, BIGGER
     overall so it reads as a hero moment, not a band. Photo gets more
     vertical real estate via taller aspect, and the section gets a small
     extra padding-top while keeping the heading close to the top. */
  .team-section { padding-block: var(--mg-space-8) 0; }
  .team-section__inner { gap: var(--mg-space-7); }
  .team-section__heading { font-size: 28px; }
  .team-section__photo { aspect-ratio: 4 / 5; max-width: 100vw; }
  .team-roster {
    inset: auto 0 var(--mg-space-4) 0;
    gap: var(--mg-space-3) var(--mg-space-5);
  }
  .team-roster__person { min-width: 0; gap: 0; }
  .team-roster__person .t-person-name { font-size: 13px; }
  .team-roster__person .t-person-role { font-size: 10px; }
  /* Bottom-up dark gradient overlay so name labels have contrast.
     Sits above the photo, below the roster, via z-index ordering. */
  .team-section__photo::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 35%;
    background-image: linear-gradient(180deg,
      rgba(5, 20, 45, 0)    0%,
      rgba(5, 20, 45, 0.55) 55%,
      rgba(5, 20, 45, 0.85) 100%);
    pointer-events: none;
    z-index: 6;        /* under team-roster (z 7), over the photo */
  }
  .team-section__photo { position: relative; }

  /* ---- PROCESS section: compact spacing on mobile ----
     The dark photo-backdrop section was eating ~3 viewports on mobile.
     Tighten section padding, the heading→steps gap, and the per-step
     internal gap so it lands in roughly 1.5 screens. */
  .process-section { padding-block: var(--mg-section-pad-tight); }
  .process-section__inner { gap: var(--mg-space-9); }
  .process-steps { gap: var(--mg-space-5); }
  .process-step { gap: var(--mg-space-3); padding-left: var(--mg-space-3); }
  .process-step__num { width: 36px; height: 36px; font-size: var(--mg-text-body); }
  .process-step__title { font-size: var(--mg-text-body); line-height: 1.3; }
  .process-step__body  { font-size: var(--mg-text-md); line-height: 1.4; }

  /* ---- CAROUSEL on mobile ----
     First card is intentionally NARROWER so the second card peeks ~30px
     past the right edge, signalling "more to scroll" stronger than just
     a gradient mask. Subsequent cards are full-viewport-width-minus-gutter
     so swiping centers one card at a time. Both snap to start. */
  .drag-carousel__track {
    padding-inline: var(--mg-space-4);
    scroll-padding-inline: var(--mg-space-4);
    gap: var(--mg-space-3);
  }
  .drag-card {
    flex-basis: calc(100vw - 2 * var(--mg-space-4));
  }
  .drag-card:first-child {
    flex-basis: calc(78vw - var(--mg-space-4));
  }

  .service-area__list {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-5);
    margin-top: var(--mg-space-7);
  }
  .service-area__intro {
    font-family: var(--mg-font-body);
    font-size: var(--mg-text-body);
    color: var(--mg-text-body-warm);
    line-height: var(--mg-leading-normal);
    margin: 0;
  }
  .service-area__intro strong { color: var(--mg-color-brown-strong); font-weight: var(--mg-weight-semibold); }
  .service-area__list ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mg-space-2) var(--mg-space-5);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .service-area__list li {
    font-family: var(--mg-font-body);
    font-size: var(--mg-text-md);
    font-weight: var(--mg-weight-medium);
    color: var(--mg-color-brown-strong);
    letter-spacing: 0.02em;
  }

  /* FAQ: 2-column → stacked */
  .faq-section__grid {
    grid-template-columns: 1fr;
    gap: var(--mg-space-9);
  }

  /* Form: 2-column → single column, vertical divider becomes horizontal */
  .quote-form__split {
    grid-template-columns: 1fr;
  }
  .quote-form__rule {
    width: 100%;
    height: 1px;
    min-height: 0;
  }
  /* Form step indicator on mobile: 2 rows × 2 cols, tight, no horizontal
     scroll. Smaller chips and labels keep it readable without dominating
     the form header. Each cell same height via grid-auto-rows. */
  .form-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    justify-content: stretch;
    gap: var(--mg-space-2) var(--mg-space-3);
    padding: var(--mg-space-3) var(--mg-space-4);
    overflow: visible;
  }
  .form-steps__item {
    gap: var(--mg-space-2);
    min-width: 0;
    align-items: center;
  }
  .form-steps__num { width: 20px; height: 20px; font-size: var(--mg-text-xs); flex-shrink: 0; }
  .form-steps__label {
    font-size: var(--mg-text-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Form card: full-bleed edge-to-edge on mobile — bypass container
     gutter so the white form card pins flush to the viewport edges.
     Drop the outer border-radius at full-bleed (looks unfinished
     against the screen edge). */
  .quote-form {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    max-width: 100vw;
    border-radius: 0;
  }

  /* Form body — tighter horizontal padding on mobile so inputs and
     pill groups get full width. */
  .quote-form__body { padding: var(--mg-space-5) var(--mg-space-4); gap: var(--mg-space-4); }
  .quote-form__group { gap: var(--mg-space-3); }

  /* Pill grid: 2-col grid with even cell heights via grid-auto-rows.
     Wrapping labels (e.g. "Ready to speak with a builder" on 2 lines)
     no longer make one pill taller than its sibling — both share the
     row's max height. Pills with `data-fill` ("Other", "Just exploring",
     "Prefer not to say") span the full row width. */
  .pill-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(48px, auto);
    gap: var(--mg-space-2);
  }
  .pill-group .pill {
    flex: initial;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: var(--mg-space-2) var(--mg-space-3);
    line-height: 1.2;
  }
  /* "Wide" pills span both columns. Applied only to groups with an ODD
     number of options where the last one needs the full row.
     - stage:   3 options → row 1: two, row 2: last spans full
     - budget:  5 options → rows 1-2: pairs, row 3: last spans full
     The "plans" group has 4 options and fits a clean 2×2 — no wide. */
  .pill-group .pill[data-pill-wide],
  .pill-group[data-pill-group="stage"]   .pill:last-child,
  .pill-group[data-pill-group="budget"]  .pill:last-child {
    grid-column: 1 / -1;
  }

  /* Footer: 3-column → stacked. Tighter to feel like one ordered footer,
     not three orphan blocks. Smaller logo, smaller gaps, lighter CTA,
     full-width accreditations card. */
  .site-footer { padding-block: var(--mg-space-9) var(--mg-space-5); }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--mg-space-7);
    padding-bottom: var(--mg-space-7);
  }
  .footer-grid__brand { gap: var(--mg-space-4); }
  .footer__logo { width: 140px; }
  .footer__intro { font-size: var(--mg-text-md); line-height: 1.45; }

  /* Visit Us + Contact: 2 columns side by side on mobile (was stacked).
     Each .footer-col is itself a single column of label + value(s). */
  .footer-grid__contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mg-space-4) var(--mg-space-5);
  }
  .footer-col__h { margin-bottom: var(--mg-space-2); }
  .footer__cta {
    margin-top: var(--mg-space-2);
    padding-inline: var(--mg-space-5);
    grid-column: 1 / -1;                /* CTA spans both contact columns */
    align-self: start;
  }

  /* Accreditations: VBA and HIA side by side (2-col) on mobile (was
     stacked rows). Drop the inter-row top border that desktop uses for
     the vertical stack; add a single vertical divider between the two
     cards instead. */
  .footer-grid__accred { gap: var(--mg-space-3); }
  .footer-accred {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }
  .footer-accred__row {
    padding: var(--mg-space-2) var(--mg-space-3);
    border-top: 0;
  }
  .footer-accred__row + .footer-accred__row {
    border-top: 0;
    border-left: 1px solid var(--mg-color-navy-border);
  }
  .footer-accred__logo { width: 38px; }

  /* Bottom legal row — bumped 2px so 11/12px doesn't feel like microcopy.
     Carlos's rule: 11px is the floor, don't sit on it. */
  .footer-bottom { padding-top: var(--mg-space-4); gap: var(--mg-space-2); }
  .footer-bottom__copyright {
    font-size: var(--mg-text-base);          /* 13px — was 11px */
    white-space: normal;
  }
  .footer-bottom__legal a { font-size: var(--mg-text-base); }  /* 13px — was 12px */
}

@media (max-width: 600px) {
  .container { padding-inline: var(--mg-space-4); }    /* 16px gutter */
  .topbar__inner { padding-inline: var(--mg-space-4); }  /* match .container 16px */
  :root { --mg-section-pad: var(--mg-space-10); }      /* 56px */

  .t-display-1 { font-size: 36px; }
  .t-display-2 { font-size: 30px; }

  .hero { min-height: clamp(480px, 90vh, 700px); }

  /* Topbar CTA: short "Plan" label instead of icon-only */
  .topbar__cta-full { display: none; }
  .topbar__cta-short { display: inline; }
  .topbar__cta { padding-inline: var(--mg-space-3); }

  /* Process steps: 2-up → single column on phones; tighten further */
  .process-steps { grid-template-columns: 1fr; gap: var(--mg-space-4); }
  .process-section__inner { gap: var(--mg-space-7); }

  /* Service cards at <600px stay 2×2 but with tighter padding so 2-up
     fits on iPhone-SE-class widths without squashing the title. */
  .service-cards { gap: var(--mg-space-1); }
  .service-card { padding: var(--mg-space-3) var(--mg-space-2); }
  .service-card__icon { height: 48px; }
  .service-card__title { font-size: var(--mg-text-md); }

  /* Footer: one more pass of compaction at phone widths */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-bottom__legal { gap: var(--mg-space-4); }
}

/* The short "Plan" label is hidden above 600px. Inside a min-width
   media query so it never beats the <600px rule above on source order. */
@media (min-width: 601px) {
  .topbar__cta-short { display: none; }
}

/* ===========================================================================
   Ultra-narrow viewports (< 420px) — iPhone SE / older Android territory.
   =========================================================================== */
@media (max-width: 420px) {
  :root { --mg-section-pad: var(--mg-space-9); }     /* 48px section pad */

  .t-display-1 { font-size: 30px; }
  .t-display-2 { font-size: 26px; }

  .container { padding-inline: var(--mg-space-3); }   /* 12px gutter */
  .topbar__inner { padding-inline: var(--mg-space-3); }  /* match .container 12px */

  /* Pill groups: narrower min so 2-up fits at 360px */
  .pill-group .pill { min-width: 96px; }

  /* Form body padding shrinks */
  .quote-form__body {
    padding: var(--mg-space-5) var(--mg-space-4);
  }
}

/* ============================================================================
   LEGAL / LONG-FORM PAGE TEMPLATE (page-templates/page-legal.php)
   Cream hero with title + last-updated date; narrow white prose column. */

.legal-page__hero-inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.legal-page__heading {
  color: var(--mg-color-brown-gold);
  margin: var(--mg-space-3) 0 var(--mg-space-3);
}

.legal-page__updated {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-sm);
  color: var(--mg-color-brown-soft);
  margin: 0;
}

.legal-page__prose {
  max-width: 720px;
  margin-inline: auto;
}

/* Generic prose styles — used by .legal-page__prose and reusable for any
   long-form text. Tuned to feel like the rest of the Parkway design system:
   warm-brown Fraunces headings with a small orange accent rule, custom
   orange bullets, numbered-circle <ol>, a magazine-style lead paragraph,
   pull-quote treatment, and on-brand links. */
.prose {
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-body);
  line-height: var(--mg-leading-loose, 1.7);
  color: var(--mg-color-ink);
}
.prose > * + * { margin-top: var(--mg-space-4); }
.prose p { margin: 0; }
.prose strong { font-weight: var(--mg-weight-bold); color: var(--mg-color-ink-name); }
.prose em { font-style: italic; }

/* Lead paragraph — first <p> reads as a magazine intro: larger, Fraunces,
   warm soft-brown. */
.prose > p:first-child {
  font-family: var(--mg-font-display);
  font-weight: var(--mg-weight-regular);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--mg-color-brown-soft);
  margin-bottom: var(--mg-space-7);
}

/* H2 — Fraunces brown-gold, with a small orange accent rule above */
.prose h2 {
  position: relative;
  font-family: var(--mg-font-display);
  font-weight: var(--mg-weight-regular);
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--mg-color-brown-gold);
  line-height: 1.2;
  margin-top: var(--mg-space-10);
  margin-bottom: var(--mg-space-3);
  padding-top: var(--mg-space-5);
}
.prose h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background-color: var(--mg-accent-eyebrow);
  border-radius: var(--mg-radius-pill);
}

/* H3 — body font, brown-strong, subordinate to h2 */
.prose h3 {
  font-family: var(--mg-font-body);
  font-weight: var(--mg-weight-bold);
  font-size: clamp(17px, 1.4vw, 19px);
  letter-spacing: 0.02em;
  color: var(--mg-color-brown-strong);
  margin-top: var(--mg-space-7);
  margin-bottom: var(--mg-space-2);
}

/* Lists — UL gets an orange dot, OL gets a numbered orange circle.
   Items pack tightly inside the list; the list itself keeps a small 8px
   margin top + bottom so it breathes against surrounding paragraphs. */
.prose ul,
.prose ol {
  margin: 0;
  margin-block: var(--mg-space-2);   /* 8px above + 8px below the list */
  padding-inline-start: 0;
  list-style: none;
}
.prose li {
  position: relative;
  padding-inline-start: 1.75rem;
}
.prose li + li { margin-top: 6px; }   /* tight gap between items */

.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--mg-accent-eyebrow);
}

.prose ol { counter-reset: prose-ol; }
.prose ol > li { counter-increment: prose-ol; padding-inline-start: 2.5rem; }
.prose ol > li::before {
  content: counter(prose-ol);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--mg-accent-eyebrow);
  color: var(--mg-color-white);
  font-family: var(--mg-font-body);
  font-weight: var(--mg-weight-bold);
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.prose li ul,
.prose li ol { margin-top: var(--mg-space-2); }

/* Links — warm brown text with an orange underline; flips to accent on hover */
.prose a {
  color: var(--mg-color-brown-strong);
  text-decoration: underline;
  text-decoration-color: var(--mg-accent-eyebrow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--mg-dur-base) var(--mg-ease-out),
              text-decoration-color var(--mg-dur-base) var(--mg-ease-out);
}
.prose a:hover,
.prose a:focus-visible { color: var(--mg-accent-eyebrow); }

/* Pull-quote — cream panel with a large Fraunces open-quote mark, italic
   display copy, orange accent rail. */
.prose blockquote {
  position: relative;
  margin: 0;
  padding: var(--mg-space-7) var(--mg-space-7) var(--mg-space-6) var(--mg-space-9);
  background-color: var(--mg-color-cream);
  border-inline-start: 3px solid var(--mg-accent-eyebrow);
  border-radius: var(--mg-radius-tab, 8px);
  font-family: var(--mg-font-display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--mg-color-brown-strong);
}
.prose blockquote::before {
  content: "\201C";
  position: absolute;
  top: -4px;
  left: var(--mg-space-5);
  font-family: var(--mg-font-display);
  font-size: 64px;
  line-height: 1;
  color: var(--mg-accent-eyebrow);
}
.prose blockquote p { margin: 0; }
.prose blockquote p + p { margin-top: var(--mg-space-3); }

/* Inline code */
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background-color: var(--mg-color-cream);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--mg-color-brown-strong);
}

/* HR — three small dots ornament (orange–taupe–orange) instead of a flat line */
.prose hr {
  border: 0;
  height: 6px;
  margin: var(--mg-space-9) auto;
  background-image:
    radial-gradient(circle, var(--mg-accent-eyebrow) 2.5px, transparent 3px),
    radial-gradient(circle, var(--mg-color-brown-soft)  2px,   transparent 2.5px),
    radial-gradient(circle, var(--mg-accent-eyebrow) 2.5px, transparent 3px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  background-position: calc(50% - 16px) center, 50% center, calc(50% + 16px) center;
}

/* ============================================================================
   FOOTER SOCIAL ICONS — circular icon buttons on the dark footer surface.
   The whole row + any individual icon hides automatically when its URL is
   empty (handled in template-parts/globals/footer.php). */
.footer-social {
  list-style: none;
  margin: var(--mg-space-4) 0 0;
  padding: 0;
  display: flex;
  gap: var(--mg-space-2);
}
.footer-social__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--mg-radius-pill);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--mg-color-white);
  transition: background-color var(--mg-dur-base) var(--mg-ease-out),
              color var(--mg-dur-base) var(--mg-ease-out);
}
.footer-social__btn:hover,
.footer-social__btn:focus-visible {
  background-color: var(--mg-accent-eyebrow);
  color: var(--mg-color-white);
  text-decoration: none;
}
.footer-social__btn svg { display: block; }

/* ============================================================================
   NON-HOME PAGES — TOPBAR
   On the homepage the topbar overlays the hero translucent; once you scroll
   past the hero, JS adds .is-scrolled and it flips to white. Pages that
   don't have a hero (legal pages, anything using page-legal.php, etc.) need
   the white state ON FROM THE START and to sit in normal flow above the
   content — not absolute-positioned over it.
   `body:not(.home)` cleanly covers every non-front page. */
body:not(.home) .topbar {
	position: sticky;
	top: 0;
	background-color: var(--mg-color-white);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom: 1px solid var(--mg-border-row, #e8e5dc);
	height: auto;
	padding-block: 10px;
}
body:not(.home) .topbar__logo-img--over     { display: none; }
body:not(.home) .topbar__logo-img--scrolled { display: block; }
body:not(.home) .topbar__nav a              { color: var(--mg-color-ink-name); }
body:not(.home) .topbar__menu-bar           { background-color: var(--mg-color-ink-name); }
/* Active-pill accent (matches the scrolled-state rule for parity) */
body:not(.home) .topbar__nav a.is-active {
	text-decoration: underline;
	text-decoration-color: var(--mg-accent-eyebrow);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}