/* ============================================================
   COMPONENTS.CSS
   Case by Case Homes — Verbolta Studio
   ─────────────────────────────────────────────────────────────
   Built on the tokens in global.css (2026-10 redesign).
   BEM naming; one block per component.

   Contents:
   1.  Buttons
   2.  Navigation
   3.  Section header + shared marks (hex nut, labels)
   4.  Hero
   5.  Page header (inner pages)
   6.  Process — the rising-arrow steps (signature)
   7.  Feature row + team pair
   8.  Before / After slider
   9.  Portfolio cards + project modal
   10. Financing band
   11. Listing cards + Listings page
   12. Listing detail page
   13. Testimonials
   14. Contact strip (closing CTA band)
   15. Forms (+ multi-step contact form)
   16. Contact page
   17. About page
   18. Footer
   19. Legal pages
   20. 404 page
   21. Video feature + player
   22. Mobile refinements
   ============================================================ */

:root {
  /* Hex nut from the logo — used for bullets, step nodes, label marks */
  --hex: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%);
}


/* ─────────────────────────────────────────────────────────────
   1. BUTTONS
   .btn-primary   — solid charcoal; the main action on light bg
   .btn-primary--inv — solid gold; the main action on dark bg
   .btn-primary--filled — alias of the solid style (form submits)
   .btn-secondary — outlined; secondary actions ("View all")
   .btn-text      — tracked caps link, underline draws on hover
   ───────────────────────────────────────────────────────────── */

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 1rem 1.6rem;
  max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.btn-primary {
  background-color: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-paper);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  box-shadow: 0 8px 22px rgba(28, 32, 37, 0.22);
  transform: translateY(-1px);
}

/* On dark backgrounds the main action turns gold, the logo's accent */
.btn-primary--inv {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-ink);
}

.btn-primary--inv:hover,
.btn-primary--inv:focus-visible {
  background-color: var(--color-gold-light);
  border-color: var(--color-gold-light);
  color: var(--color-ink);
  box-shadow: 0 8px 26px rgba(190, 155, 87, 0.28);
}

.btn-primary--filled {
  background-color: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-paper);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

/* Phones: a hair smaller and tighter, so "Schedule a Free Home Assessment"
   fits a standard phone on one line, and any label too long for the screen
   wraps (balanced, centered) inside its button instead of pushing the whole
   section past the screen edge */
@media (max-width: 480px) {
  .btn-primary,
  .btn-secondary {
    display: inline-block; /* inline, so a wrapped label keeps its arrow */
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    padding-inline: 1.25rem;
    line-height: 1.35;
    white-space: normal;
    text-wrap: balance;
    text-align: center;
  }
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--color-charcoal);
  color: var(--color-charcoal);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-charcoal);
  color: var(--color-paper);
}

/* Arrow glyph inside a button nudges forward on hover */
.btn-primary span[aria-hidden="true"],
.btn-secondary span[aria-hidden="true"],
.btn-text span[aria-hidden="true"] {
  display: inline-block;
  transition: transform var(--transition-base);
}

.btn-primary:hover span[aria-hidden="true"],
.btn-secondary:hover span[aria-hidden="true"],
.btn-text:hover span[aria-hidden="true"] {
  transform: translateX(3px);
}

/* Text link button */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-gold);
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.btn-text:hover::after,
.btn-text:focus-visible::after {
  transform: scaleX(1);
}

.btn-text--inv {
  color: var(--color-paper);
}


/* ─────────────────────────────────────────────────────────────
   2. NAVIGATION
   ───────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base);
}

/* The bar's fill (and its frosted glass) lives on this layer, never on .nav
   itself: a backdrop-filter on .nav makes it the containing block for the
   fixed mobile drawer inside it, which crushed the open menu into the 72px
   bar as soon as the page had scrolled. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: transparent;
  transition: background-color var(--transition-base);
  pointer-events: none;
}

/* Scrolled / inner pages — solid paper */
.nav--scrolled {
  border-bottom-color: var(--color-rule);
}

.nav--scrolled::before {
  background-color: rgba(250, 249, 246, 0.94);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* Scrolling within the hero — dark glass so light text stays readable */
.nav--scrolled-hero {
  border-bottom-color: rgba(250, 249, 246, 0.08);
}

.nav--scrolled-hero::before {
  background-color: rgba(28, 32, 37, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.nav__logo:hover {
  opacity: 0.75;
}

.nav__logo-img {
  height: 46px;
  width: auto;
  display: block;
}

/* Full-color icon on light; the reversed icon (white + her gold) over the
   dark homepage hero and inner-page headers */
.nav__logo-img--reversed { display: none; }

.nav--over-hero .nav__logo-img--color,
.nav--scrolled-hero .nav__logo-img--color { display: none; }

.nav--over-hero .nav__logo-img--reversed,
.nav--scrolled-hero .nav__logo-img--reversed { display: block; }

.nav--open .nav__logo-img--color { display: block; }
.nav--open .nav__logo-img--reversed { display: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.nav__link {
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  text-decoration: none;
  position: relative;
  padding-block: 0.5rem;
  transition: color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.nav__link:hover::after,
.nav__link--active::after {
  transform: scaleX(1);
}

.nav--over-hero .nav__link {
  color: var(--color-paper);
}

.nav__cta {
  margin-left: 0.25rem;
  padding: 0.75rem 1.2rem;
  font-size: 0.75rem;
}

/* Over the hero the nav CTA becomes the gold button */
.nav--over-hero .nav__cta {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-ink);
}

.nav--over-hero .nav__cta:hover {
  background-color: var(--color-gold-light);
  border-color: var(--color-gold-light);
}

/* Mobile toggle — two bars */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-right: -10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-charcoal);
  transform-origin: center;
  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast);
}

.nav--over-hero .nav__toggle-bar {
  background-color: var(--color-paper);
}

.nav--open .nav__toggle-bar {
  background-color: var(--color-charcoal);
}

.nav--open .nav__toggle-bar:nth-child(1) {
  transform: translateY(4.5px) rotate(45deg);
}

.nav--open .nav__toggle-bar:nth-child(2) {
  transform: translateY(-4.5px) rotate(-45deg);
}

/* While the drawer is open the bar itself turns solid paper */
.nav--open {
  border-bottom-color: var(--color-rule);
}

.nav--open::before {
  background-color: var(--color-paper);
}



/* Mobile drawer — full-height menu */
.nav__drawer {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-paper);
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--gutter) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain; /* scrolling the menu never scrolls the page */
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.4s var(--ease-out),
    opacity 0.3s var(--ease-out),
    visibility 0s linear 0.4s;
  z-index: calc(var(--z-nav) - 1);
}

.nav__drawer--open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform 0.4s var(--ease-out),
    opacity 0.3s var(--ease-out),
    visibility 0s;
}

.nav__drawer > nav {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.nav__drawer-link {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: clamp(1.6rem, 7vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-charcoal);
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--color-rule);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__drawer-link::after {
  content: '→';
  font-size: 0.6em;
  font-weight: 400;
  color: var(--color-gold);
}

.nav__drawer-link--active {
  color: var(--color-gold-deep);
}

.nav__drawer-phone {
  margin-top: auto;
  padding-block: var(--space-sm);
  text-align: center;
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}

.nav__drawer-cta {
  margin-top: auto;
  width: 100%;
  padding-block: 1.1rem;
}

.nav__drawer-phone + .nav__drawer-cta {
  margin-top: 0;
}

/* Staggered reveal of drawer items on open */
.nav__drawer-link,
.nav__drawer-phone,
.nav__drawer-cta {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.4s var(--ease-out),
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.nav__drawer--open .nav__drawer-link,
.nav__drawer--open .nav__drawer-phone,
.nav__drawer--open .nav__drawer-cta {
  opacity: 1;
  transform: translateY(0);
}

.nav__drawer--open .nav__drawer-link:nth-child(1) { transition-delay: 0.06s; }
.nav__drawer--open .nav__drawer-link:nth-child(2) { transition-delay: 0.10s; }
.nav__drawer--open .nav__drawer-link:nth-child(3) { transition-delay: 0.14s; }
.nav__drawer--open .nav__drawer-link:nth-child(4) { transition-delay: 0.18s; }
.nav__drawer--open .nav__drawer-link:nth-child(5) { transition-delay: 0.22s; }
.nav__drawer--open .nav__drawer-phone             { transition-delay: 0.26s; }
.nav__drawer--open .nav__drawer-cta               { transition-delay: 0.30s; }

@media (prefers-reduced-motion: reduce) {
  .nav__drawer { transform: none; }
  .nav__drawer-link,
  .nav__drawer-phone,
  .nav__drawer-cta {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .nav__logo-img { height: 38px; }
}


/* ─────────────────────────────────────────────────────────────
   3. SECTION HEADER + SHARED MARKS
   ───────────────────────────────────────────────────────────── */

.section-header {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: var(--space-lg);
  max-width: 820px;
}

/* Small tracked label above a heading, marked with the logo's hex nut */
.section-header__eyebrow,
.page-header__eyebrow,
.feature-row__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  max-width: none;
}

.section-header__eyebrow::before,
.page-header__eyebrow::before,
.feature-row__eyebrow::before {
  content: '';
  width: 9px;
  height: 10px;
  flex-shrink: 0;
  background-color: var(--color-gold);
  clip-path: var(--hex);
}

.section-header__eyebrow--on-dark,
.section-header--inv .section-header__eyebrow {
  color: var(--color-gold-light);
}

.section-header__heading {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.02;
  color: var(--color-charcoal);
}

.section-header__sub {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-slate);
  max-width: 56ch;
}

.section-header--inv .section-header__heading { color: var(--color-paper); }
.section-header--inv .section-header__sub { color: rgba(250, 249, 246, 0.72); }

/* Kept for markup compatibility; sections now separate by background */
.section-header--ruled {}

/* Heading left, supporting copy + action right (desktop) */
.section-header--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-sm) var(--space-lg);
}

.section-header--split > :first-child { grid-column: 1; }

.section-header__aside {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-bottom: 0.35rem;
}

@media (max-width: 860px) {
  .section-header--split {
    grid-template-columns: minmax(0, 1fr);
  }
  .section-header__aside {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Gold hex-nut bullets for lists of work / features */
.renovation-scope,
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: var(--space-sm);
}

.renovation-scope li,
.feature-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-slate);
  max-width: 64ch;
}

.renovation-scope li::before,
.feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 11px;
  background-color: var(--color-gold);
  clip-path: var(--hex);
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem var(--space-md);
}

@media (max-width: 640px) {
  .feature-list { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────
   4. HERO
   Full-bleed photo (Site Settings → Homepage Hero Image) with one
   orchestrated opening: the photo starts as a muted "blueprint"
   (with faint gold grid lines), a gold divider sweeps across and
   reveals it in full color — the site's before/after idea — while
   the headline rises line by line, "Sell it." landing as the sweep
   finishes. Then a slow drift. Works with any photo she picks.
   Parallax is handled by JS (translateY on .hero__media).
   ───────────────────────────────────────────────────────────── */

@property --hero-split {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

.hero {
  --hero-split: 0%;
  position: relative;
  height: 100svh;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background-color: var(--color-ink);
  animation: hero-reveal 2.4s var(--ease-in-out) 0.4s forwards;
}

@keyframes hero-reveal {
  from { --hero-split: 0%; }
  to   { --hero-split: 100%; }
}

/* Slightly oversized for parallax travel room */
.hero__media {
  position: absolute;
  inset: -15% 0;
  width: 100%;
  height: 130%;
  z-index: 0;
  will-change: transform;
  background-color: var(--color-ink);
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transform-origin: 60% 40%;
  animation: hero-drift 18s var(--ease-out) 2.8s forwards;
}

/* "Before": the same photo, muted and cool like a print of the plans */
.hero__img--before {
  filter: grayscale(1) contrast(1.08) brightness(0.62);
}

/* "After": full color, revealed up to the sweep line */
.hero__img--after {
  clip-path: inset(0 calc(100% - var(--hero-split)) 0 0);
}

@keyframes hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

/* Faint gold drafting grid over the not-yet-revealed side */
.hero__blueprint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(211, 182, 124, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(211, 182, 124, 0.16) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  clip-path: inset(0 0 0 var(--hero-split));
  pointer-events: none;
}

/* Charcoal vignette: heavy bottom-left (behind the type), light elsewhere */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(28, 32, 37, 0.74) 0%, rgba(28, 32, 37, 0.38) 42%, rgba(28, 32, 37, 0.06) 100%),
    linear-gradient(to top, rgba(28, 32, 37, 0.88) 0%, rgba(28, 32, 37, 0) 56%);
}

/* The gold divider, with a soft glow; fades once the photo is revealed */
.hero__sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--hero-split);
  z-index: 2;
  width: 2px;
  transform: translateX(-1px);
  background-color: var(--color-gold-light);
  box-shadow: 0 0 22px 3px rgba(211, 182, 124, 0.55);
  pointer-events: none;
  animation: hero-sweep-out 0.6s var(--ease-out) 2.75s forwards;
}

@keyframes hero-sweep-out {
  to { opacity: 0; }
}

.hero__headline {
  position: relative;
  z-index: 3;
  padding-inline: var(--gutter);
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
  padding-bottom: clamp(1.25rem, 3.5vh, 2rem);
}

/* Sized by width AND height, so short laptop screens (1366×768, 1536×864)
   keep the logo, headline, and bar clear of the nav */
.hero__heading {
  font-size: clamp(2.9rem, min(8.6vw, 12.5vh), 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--color-paper);
  max-width: 12ch;
}

/* Each line rises from behind a mask */
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}

.hero__line > * {
  display: inline-block;
  transform: translateY(105%);
  animation: hero-line-up 1s var(--ease-out) forwards;
}

.hero__line:nth-child(1) > * { animation-delay: 0.5s; }
.hero__line:nth-child(2) > * { animation-delay: 0.85s; }
.hero__line:nth-child(3) > * { animation-delay: 1.9s; }

@keyframes hero-line-up {
  to { transform: translateY(0); }
}

/* "Sell it." — the serif italic voice, in the logo's gold */
.hero__heading em {
  color: var(--color-gold-light);
  font-size: 1.08em;
  letter-spacing: -0.02em;
  padding-right: 0.08em; /* keep the italic overhang inside the mask */
}

.hero__bar {
  position: relative;
  z-index: 3;
  width: 100%;
  border-top: 1px solid rgba(250, 249, 246, 0.14);
  background: rgba(28, 32, 37, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero__bar-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(1.1rem, 2.6vh, 1.6rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.hero__location {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero__location-label {
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  max-width: none;
  line-height: 1;
}

.hero__location-name {
  font-family: var(--font-display);
  font-stretch: 110%;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-paper);
  max-width: none;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

/* Hero brand logo — full named lockup in its ORIGINAL colors on a paper
   "badge," pinned with two strips of painter's tape and a slight tilt, so it
   reads as intentionally placed and stays legible over any hero photo.
   (reveal-fade is used so its rotate transform isn't overwritten.) */
.hero__logo-plate {
  position: relative;
  display: inline-block;
  padding: clamp(0.9rem, 2vh, 1.25rem) clamp(1.1rem, 2.4vh, 1.5rem);
  margin-bottom: clamp(1rem, 3.5vh, 2rem);
  background-color: rgba(250, 249, 246, 0.9);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-radius: 2px;
  box-shadow:
    0 18px 40px rgba(28, 32, 37, 0.34),
    0 2px 6px rgba(28, 32, 37, 0.22);
  transform: rotate(-2.5deg);
}

.hero__logo-plate::before,
.hero__logo-plate::after {
  content: '';
  position: absolute;
  top: -12px;
  width: 84px;
  height: 26px;
  background-color: rgba(222, 214, 196, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 2px 5px rgba(28, 32, 37, 0.16);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.hero__logo-plate::before { left: 16px; transform: rotate(-8deg); }
.hero__logo-plate::after  { right: 16px; transform: rotate(7deg); }

.hero__logo {
  width: clamp(124px, min(15vw, 21vh), 196px);
  height: auto;
  display: block;
}

/* Hold the opening until the brand intro lifts (both hero styles) */
.is-intro .hero,
.is-intro .hero * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; --hero-split: 100%; }
  .hero__img { animation: none; }
  .hero__sweep { display: none; }
  .hero__line > * { transform: none; animation: none; }
}

@media (max-width: 768px) {
  .hero {
    min-height: 580px;
  }

  .hero__heading {
    font-size: clamp(2.75rem, 13vw, 4.5rem);
  }

  .hero__bar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    padding-block: 1.1rem 1.4rem;
  }

  .hero__actions {
    width: 100%;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .hero__logo-plate { transform: rotate(-2deg); }
  .hero__logo-plate::before,
  .hero__logo-plate::after { width: 60px; height: 22px; top: -10px; }
  .hero__logo-plate::before { left: 10px; }
  .hero__logo-plate::after  { right: 10px; }
  .hero__logo { width: clamp(118px, 32vw, 156px); }
}


/* ── Illustrated hero ("scene", the default) ──────────────────
   src/components/HeroScene.astro + HomeHero.astro — sheet A-100,
   the cover of the drawing set: a center-hall colonial drafted in
   front elevation on light grid paper. The opening lands by ~2.3s:
     0.05–0.7s  the plan: grade, non-photo-blue levels, grid bubbles
     0.35–1.0s  the build: walls, roof, openings drawn in graphite
     1.0–1.6s   the fix: gold revision clouds + the revision list;
                detail (shingles, siding, sashes) goes in by course
     1.5–2.3s   sell it: plantings, a warm wash in the glass, and the
                SOLD rider lands on her yard sign
   Then only the sign stirs. Copy and actions are all in by ~1s. */

.hero--scene {
  /* The text column; the drawing takes the rest of the width, so the two
     never overlap at any size */
  --hero-text-w: clamp(330px, 40vw, 640px);
  --sheet: var(--color-sheet);
  --np-blue: var(--color-np-blue);
  --np-blue-ink: var(--color-np-blue-ink);
  justify-content: center;
  color: var(--color-charcoal);
  background-color: var(--color-sheet);
  background-image: var(--sheet-vignette), var(--sheet-grain);
  height: auto;
  min-height: max(620px, 100svh);
  animation: none;
}

.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Grid paper: fine lines every 24px, heavier every 120px — strongest
   around the drawing, fading out under the headline */
.hero-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--sheet-grid);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 62% 90% at 74% 55%, #000 35%, transparent 88%);
  mask-image: radial-gradient(ellipse 62% 90% at 74% 55%, #000 35%, transparent 88%);
  pointer-events: none;
}

/* Daylight drifting slowly across the drafting table */
.hero-scene__light {
  position: absolute;
  inset: -25%;
  background: radial-gradient(ellipse 30% 36% at 58% 44%, rgba(255, 251, 242, 0.6) 0%, rgba(255, 251, 242, 0) 70%);
  animation: hs-light 18s var(--ease-in-out) infinite alternate;
  pointer-events: none;
}

@keyframes hs-light {
  from { transform: translate3d(-14%, -4%, 0); }
  to   { transform: translate3d(12%, 5%, 0); }
}

/* The drawing fills everything right of the text column and below the nav,
   fitted to the bottom-right corner; strokes past its frame stay visible
   for the pointer parallax (main.js) */
.hero-scene__layer {
  --scene-left: calc(max(var(--gutter), 50% - var(--max-width) / 2 + var(--gutter)) + var(--hero-text-w));
  position: absolute;
  top: var(--nav-height);
  left: var(--scene-left);
  width: calc(100% - var(--scene-left));
  max-width: none;
  height: calc(100% - var(--nav-height));
  overflow: visible;
}

@media (pointer: fine) {
  .hero-scene__layer { will-change: transform; }
}

.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: calc(var(--nav-height) + clamp(1rem, 4vh, 3rem)) var(--gutter) clamp(2.5rem, 10vh, 7rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 2.4vh, 1.5rem);
}

/* Everything in the copy wraps inside its column */
.hero--scene .hero__content > * {
  max-width: var(--hero-text-w);
}

/* What the business does, above the headline (the logo itself lives in the
   nav — no second copy here) */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  max-width: none;
  opacity: 0;
  animation: hs-fade 0.7s var(--ease-out) 0.05s forwards;
}

.hero__eyebrow::before {
  content: '';
  width: 10px;
  height: 11px;
  background-color: var(--color-gold);
  clip-path: var(--hex);
}

.hero--scene .hero__heading {
  font-size: clamp(3rem, min(8vw, 12vh), 7.25rem);
  max-width: 11ch;
  color: var(--color-charcoal);
}

.hero--scene .hero__heading em {
  color: var(--color-gold-deep);
}

/* Lines rise once the headline fonts have loaded (main.js adds
   .is-fonts-ready, capped at 0.9s), so "Sell it." never swaps from a fallback
   font mid-motion on a first visit. A clean ease with no long crawl, and a
   roomier mask, so no line ever looks stuck half-revealed. */
.hero--scene .hero__line {
  padding: 0.08em 0.1em 0.12em 0;
  margin: -0.08em 0 -0.12em;
}

/* Each line waits fully hidden (transparent and below the mask, so not even
   the tip of a tall italic letter peeks out), then fades up into place */
.hero--scene .hero__line > * {
  opacity: 0;
  transform: translateY(115%);
  animation: hero-line-rise 0.7s cubic-bezier(0.2, 0.75, 0.25, 1) both;
  animation-play-state: paused;
}

@keyframes hero-line-rise {
  from { opacity: 0; transform: translateY(115%); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero--scene.is-fonts-ready .hero__line > * { animation-play-state: running; }
.hero--scene .hero__line:nth-child(1) > * { animation-delay: 0.1s; }
.hero--scene .hero__line:nth-child(2) > * { animation-delay: 0.45s; }
.hero--scene .hero__line:nth-child(3) > * { animation-delay: 0.75s; }

/* Without JavaScript the fonts-ready class never arrives, and reduced-motion
   visitors get the finished headline at once */
@media (scripting: none), (prefers-reduced-motion: reduce) {
  .hero--scene .hero__line > * { opacity: 1; transform: none; animation: none; }
}

.hero__lede {
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
  line-height: 1.55;
  color: var(--color-slate);
  max-width: 34ch;
  opacity: 0;
  animation: hs-fade 0.7s var(--ease-out) 0.6s forwards;
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 0.4rem;
  opacity: 0;
  animation: hs-fade 0.7s var(--ease-out) 0.75s forwards;
}

/* A single glint crosses the button once the drawing completes */
.hero__cta {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 1.75rem;
  font-size: 0.875rem;
}

.hero__cta::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-18deg) translateX(0);
  animation: hs-glint 0.9s var(--ease-in-out) 2.2s 1 forwards;
  pointer-events: none;
}

@keyframes hs-glint {
  to { transform: skewX(-18deg) translateX(560%); }
}

.hero__creds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 0.4rem;
  opacity: 0;
  animation: hs-fade 0.7s var(--ease-out) 0.9s forwards;
}

.hero__creds li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-slate);
}

.hero__creds li::before {
  content: '';
  width: 8px;
  height: 9px;
  background-color: var(--color-gold);
  clip-path: var(--hex);
}

/* Architect's title block, bottom-right of the sheet (as on the inner
   pages' blueprint headers) */
.hero-scene__titleblock {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(0.9rem, 2.6vh, 1.6rem);
  display: flex;
  border: 1px solid rgba(38, 44, 50, 0.22);
  background-color: rgba(244, 240, 231, 0.82);
  font-stretch: var(--label-stretch);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-slate);
  opacity: 0;
  animation: hs-fade 0.8s var(--ease-out) 1.2s forwards;
}

.hero-scene__titleblock span {
  padding: 0.45rem 0.6rem;
  white-space: nowrap;
}

.hero-scene__titleblock span + span {
  border-left: 1px solid rgba(38, 44, 50, 0.22);
}

.hero-scene__titleblock strong {
  color: var(--color-gold-deep);
  font-weight: 700;
}

/* ── Scene: the drawing ── */

/* Non-photo blue: levels, grid, the roof set out */
.hs-blue {
  fill: none;
  stroke: var(--np-blue);
  stroke-width: 0.9;
  stroke-linecap: round;
}

.hs-datum { stroke: url(#hs-datum); }

.hs-center {
  stroke-width: 0.8;
  stroke-dasharray: 16 4 3 4; /* a centerline: long dash, short dash */
}

.hs-bubble,
.hs-level {
  fill: none;
  stroke: var(--np-blue);
  stroke-width: 1;
}

.hs-level-fill {
  fill: var(--np-blue);
  stroke: none;
}

/* Graphite: a profile weight for the shell, lighter for openings and detail */
.hs-ink {
  fill: none;
  stroke: var(--color-charcoal);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hs-ground { stroke: url(#hs-ground); stroke-width: 2.8; }
.hs-2 { stroke-width: 1.3; }
.hs-3 { stroke-width: 0.85; }

.hs-hatch {
  stroke-width: 0.6;
  stroke-opacity: 0.5;
}

.hs-hatch--muntin { stroke-width: 0.7; stroke-opacity: 0.8; }
.hs-hatch--glass { stroke-opacity: 0.38; }
.hs-hatch--leaf { stroke-opacity: 0.42; }

.hs-shrub {
  stroke-width: 0.9;
  fill: var(--sheet);
  fill-opacity: 0;
}

.hs-dim {
  fill: none;
  stroke: var(--color-slate);
  stroke-width: 0.8;
}

.hs-tick {
  stroke: var(--color-charcoal);
  stroke-width: 1.6;
}

.hs-title-num {
  fill: none;
  stroke: var(--color-charcoal);
  stroke-width: 1.2;
}

.hs-title-rule {
  stroke: var(--color-charcoal);
  stroke-width: 2;
}

/* Gold: the renovation markups */
.hs-gold {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hs-delta {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.3;
}

/* The scope of work: a schedule box on the sheet */
.hs-scope-box {
  fill: rgba(246, 243, 236, 0.78);
  stroke: var(--color-charcoal);
  stroke-width: 1;
  stroke-opacity: 0.5;
}

.hs-scope-rule {
  fill: none;
  stroke: var(--color-charcoal);
  stroke-width: 0.7;
  stroke-opacity: 0.35;
}

.hs-scope-hex { fill: var(--color-gold); }

/* The shade tree: light, loose pencil behind the house */
.hs-tree {
  fill: none;
  stroke: var(--color-charcoal);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hs-tree-trunk { stroke-width: 1.2; stroke-opacity: 0.75; }
.hs-tree-limb { stroke-width: 1.1; stroke-opacity: 0.62; }
.hs-tree-limb--mid { stroke-width: 0.8; stroke-opacity: 0.55; }
.hs-tree-limb--fine { stroke-width: 0.55; stroke-opacity: 0.48; }
.hs-tree-edge { stroke-width: 0.8; stroke-opacity: 0.42; }
.hs-tree-leaves { stroke-width: 0.6; stroke-opacity: 0.34; }

/* Birds: two pencil strokes each */
.hs-bird__wings {
  fill: none;
  stroke: var(--color-charcoal);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hs-rev-rule { stroke-width: 0.8; }

.hs-wash .hs-fade {
  fill: var(--color-gold);
  fill-opacity: 0.34;
}

/* Lettering: the site's tracked caps, CAD-small */
.hs-t {
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  fill: var(--color-slate);
  stroke: none;
}

.hs-t--blue { font-size: 8.5px; fill: var(--np-blue-ink); }
.hs-t--small { font-size: 7.5px; font-weight: 500; }
.hs-t--bubble { font-size: 11px; font-weight: 700; letter-spacing: 0; fill: var(--np-blue-ink); }
.hs-t--title { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; fill: var(--color-charcoal); }
.hs-t--num { font-size: 10px; font-weight: 700; letter-spacing: 0; fill: var(--color-charcoal); }
.hs-t--head { font-size: 8.5px; font-weight: 700; letter-spacing: 0.22em; }
.hs-t--gold { font-size: 9.5px; font-weight: 700; fill: var(--color-gold-deep); }
.hs-t--delta { font-size: 9px; font-weight: 700; letter-spacing: 0; fill: var(--color-gold-deep); }
.hs-t--delta-sm { font-size: 7.5px; }

/* Her yard sign: a white colonial post and panel, her logo, a gold inset */
.hs-sign-post {
  fill: #FFFFFF;
  stroke: var(--color-charcoal);
  stroke-width: 1.1;
  stroke-linejoin: round;
}

.hs-sign-hook {
  fill: none;
  stroke: var(--color-charcoal);
  stroke-width: 1;
}

.hs-sign-board {
  fill: #FFFFFF;
  stroke: var(--color-charcoal);
  stroke-width: 1.3;
}

.hs-sign-inset {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 0.8;
}

.hs-rider rect { fill: var(--color-gold); }

.hs-rider-text {
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  fill: var(--color-ink);
}

/* ── Scene: the opening ── */

@keyframes hs-fade { to { opacity: 1; } }

/* Sketch-in: every drawn stroke carries pathLength="1" */
.hs-draw {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: hs-draw 0.7s var(--ease-in-out) var(--d, 0s) forwards;
}

.hs-blue .hs-draw { animation-duration: 0.55s; }
.hs-gold .hs-draw { animation-duration: 0.65s; }

@keyframes hs-draw {
  to { stroke-dashoffset: 0; }
}

.hs-fade {
  opacity: 0;
  animation: hs-fade 0.45s var(--ease-out) var(--d, 0s) forwards;
}

.hs-pop {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  animation: hs-pop 0.4s var(--ease-out) var(--d, 0s) forwards;
}

@keyframes hs-pop {
  to { opacity: 1; transform: scale(1); }
}

/* Plantings take their paper fill as they're drawn, hiding the brick */
.hs-shrub {
  animation:
    hs-draw 0.7s var(--ease-in-out) var(--d, 0s) forwards,
    hs-shrub-fill 0.4s var(--ease-out) var(--d, 0s) forwards;
}

@keyframes hs-shrub-fill {
  to { fill-opacity: 0.95; }
}

/* The SOLD rider drops onto the sign */
.hs-rider {
  opacity: 0;
  translate: 0 -12px;
  animation: hs-settle 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 2s forwards;
}

@keyframes hs-settle {
  to { opacity: 1; translate: 0 0; }
}

/* …and the sign stirs, barely, in the breeze */
.hs-swing {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: hs-sway 3.6s var(--ease-in-out) 2.4s infinite alternate;
}

@keyframes hs-sway {
  from { rotate: -2deg; }
  to   { rotate: 2.2deg; }
}

/* ── Scene: gently alive, once drawn ── */

/* The shade tree's crown stirs */
.hs-tree-crown {
  transform-box: view-box;
  animation: hs-tree 5.5s var(--ease-in-out) 2.4s infinite alternate;
}

@keyframes hs-tree {
  from { rotate: -1.4deg; }
  to   { rotate: 1.8deg; }
}

/* The finished windows glow, softly brighter and dimmer */
.hs-wash {
  animation: hs-glow 7s var(--ease-in-out) 2.8s infinite alternate;
}

@keyframes hs-glow {
  to { opacity: 0.68; }
}

/* Now and then a couple of birds cross the sky, beating their wings */
.hs-bird {
  opacity: 0;
  animation: hs-fly var(--dur, 52s) linear var(--delay, 0s) infinite;
}

@keyframes hs-fly {
  0%   { opacity: 0; transform: translate(860px, var(--y)); }
  8%   { opacity: 0.72; }
  86%  { opacity: 0.72; }
  100% { opacity: 0; transform: translate(1390px, calc(var(--y) - 26px)); }
}

.hs-bird__wings {
  transform-box: fill-box;
  transform-origin: center;
  animation: hs-flap 0.85s var(--ease-in-out) infinite alternate;
}

@keyframes hs-flap {
  to { transform: scaleY(0.4); }
}

/* A wisp of smoke curls up from the chimney: a short dash travelling up a
   wavy path, fading as it rises */
.hs-smoke {
  fill: none;
  stroke: url(#hs-smoke);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 22 100;
  stroke-dashoffset: 22;
  animation: hs-smoke 5.2s linear var(--delay, 0s) infinite;
}

@keyframes hs-smoke {
  to { stroke-dashoffset: -100; }
}

/* Scrolled offscreen: freeze everything that loops (battery) */
.hero--offscreen .hs-smoke,
.hero--offscreen .hs-swing,
.hero--offscreen .hs-tree-crown,
.hero--offscreen .hs-wash,
.hero--offscreen .hs-bird,
.hero--offscreen .hs-bird__wings,
.hero--offscreen .hero-scene__light {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow,
  .hero__lede,
  .hero__cta-row,
  .hero__creds,
  .hero-scene__titleblock,
  .hs-fade,
  .hs-pop,
  .hs-rider { opacity: 1; transform: none; translate: none; animation: none; }
  .hs-draw { stroke-dashoffset: 0; animation: none; }
  .hs-shrub { fill-opacity: 0.95; }
  .hero__cta::after,
  .hs-swing,
  .hs-tree-crown,
  .hs-wash,
  .hero-scene__light { animation: none; }
  .hs-birds,
  .hs-smoke { display: none; }
}

/* Mobile: the copy first, then the drawing as its own block below it (in the
   page flow, at the drawing's own proportions), so they can't collide */
@media (max-width: 860px) {
  /* The bottom padding keeps the drawing's caption clear of the seam's
     medallion, which overhangs the hero's lower edge */
  .hero--scene {
    justify-content: flex-start;
    min-height: 0;
    padding-bottom: 1.5rem;
  }

  .hero__content {
    order: 1;
    padding-bottom: 0.75rem;
  }

  .hero--scene .hero__content > * { max-width: 100%; }

  .hero-scene {
    position: relative;
    inset: auto;
    order: 2;
    margin-top: -0.5rem;
  }

  .hero-scene__layer {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 840 / 772;
  }

  .hero--scene .hero__heading {
    font-size: clamp(2.6rem, 12vw, 4.25rem);
  }

  .hero__creds,
  .hero-scene__titleblock { display: none; }
}

/* Phones: the copy centers over the drawing, like the title on a cover
   sheet (as the inner pages' headers do) */
@media (max-width: 768px) {
  .hero--scene .hero__content {
    align-items: center;
    text-align: center;
  }

  /* The eyebrow becomes two centered lines under its hex nut */
  .hero__eyebrow {
    flex-direction: column;
    gap: 0.55rem;
    letter-spacing: 0.12em;
    line-height: 1.6;
  }

  .hero__eyebrow-sep { display: none; }
  .hero__eyebrow-place { display: block; }

  /* An even mask on both sides, so each centered line sits truly centered */
  .hero--scene .hero__line { padding-inline: 0.1em; }

  .hero__cta-row {
    justify-content: center;
    width: 100%;
  }

  .hero__cta {
    width: 100%;
    max-width: 26rem;
  }

  /* The grid paper centers under the full-width drawing */
  .hero-scene::before {
    -webkit-mask-image: radial-gradient(ellipse 72% 85% at 50% 55%, #000 35%, transparent 88%);
    mask-image: radial-gradient(ellipse 72% 85% at 50% 55%, #000 35%, transparent 88%);
  }
}


/* ─────────────────────────────────────────────────────────────
   5. PAGE HEADER + HEADER ART
   Inner pages (About, Listings, Portfolio, Contact): the same warm
   drafting sheet as the homepage hero — blue grid, a gold
   tape-measure edge, and an architect's title block — with the
   headline left and an animated elevation drawn in graphite and gold
   on the right (src/components/HeaderArt.astro). The nav floats clear
   over it with dark text, as it does over the homepage hero.
   ───────────────────────────────────────────────────────────── */

.page-header {
  position: relative;
  overflow: hidden;
  color: var(--color-charcoal);
  background-color: var(--color-sheet);
  background-image: var(--sheet-vignette), var(--sheet-grain);
  padding-top: calc(var(--nav-height) + clamp(3rem, 7vw, 5.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Grid paper, as on the homepage hero: strongest around the drawing */
.page-header::before,
.legal-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--sheet-grid);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 95% at 72% 55%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 75% 95% at 72% 55%, #000 30%, transparent 85%);
  pointer-events: none;
}

/* A gold tape-measure edge along the bottom */
.page-header::after,
.legal-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  background-image:
    repeating-linear-gradient(90deg, rgba(158, 124, 58, 0.75) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(158, 124, 58, 0.5) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(158, 124, 58, 0.32) 0 1px, transparent 1px 12px);
  background-size: 100% 16px, 100% 10px, 100% 6px;
  background-position: left bottom;
  background-repeat: repeat-x;
  border-bottom: 2px solid var(--color-gold);
  pointer-events: none;
}

.page-header__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: end;
  gap: var(--space-lg);
}

.page-header__inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: clamp(0.5rem, 2vw, 1.5rem);
}

.page-header__eyebrow { color: var(--color-gold-deep); }

.page-header__heading {
  font-size: clamp(2.75rem, 6.4vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--color-charcoal);
  max-width: 14ch;
}

.page-header__heading em {
  color: var(--color-gold-deep);
}

.page-header__intro {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-slate);
  max-width: 48ch;
}

.page-header__art {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 540px;
  padding-bottom: 2.75rem; /* room for the title block */
}

/* Architect's title block, bottom-right of the sheet */
.page-header__titleblock {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  border: 1px solid rgba(38, 44, 50, 0.24);
  background-color: rgba(244, 240, 231, 0.7);
  font-stretch: var(--label-stretch);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-slate);
  opacity: 0;
  animation: hart-fade 0.8s var(--ease-out) 3.2s forwards;
}

.page-header__titleblock span {
  padding: 0.45rem 0.6rem;
  white-space: nowrap;
}

.page-header__titleblock span + span {
  border-left: 1px solid rgba(38, 44, 50, 0.24);
}

.page-header__titleblock strong {
  color: var(--color-gold-deep);
  font-weight: 700;
}

/* Narrow phones: a compact title block that always fits the screen */
@media (max-width: 480px) {
  .page-header__titleblock { font-size: 0.5rem; letter-spacing: 0.1em; }
  .page-header__titleblock span { padding: 0.4rem 0.45rem; }
  .page-header__titleblock span:last-child { display: none; }
}

@media (max-width: 860px) {
  .page-header__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .page-header__art {
    justify-self: center;
    max-width: 400px;
  }
}

/* ── Header art: shared drawing system ─────────────────────── */

.hart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hart__line,
.hart__fine,
.hart__ground,
.hart__leader {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hart__line   { stroke: var(--color-charcoal); stroke-width: 1.7; }
.hart__fine   { stroke: var(--color-charcoal); stroke-width: 1.05; opacity: 0.62; }
.hart__ground { stroke: var(--color-charcoal); stroke-width: 2; }
.hart__leader { stroke: var(--color-gold); stroke-width: 1.2; }

.hart__dim {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.1;
}

.hart__text {
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  fill: var(--color-gold-deep);
}

.hart__text--callout {
  font-size: 10.5px;
  fill: var(--color-charcoal);
}

/* "Lit" window panes in the logo's gold */
.hart__glow {
  fill: var(--color-gold);
  opacity: 0;
}

.hart__dot {
  fill: var(--color-gold);
  stroke: var(--color-sheet);
  stroke-width: 2;
}

/* Sketch-in: every drawn element carries pathLength="1" */
.hart .draw {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: hart-draw 1.1s var(--ease-in-out) var(--d, 0s) forwards;
}

.hart .fade {
  opacity: 0;
  animation: hart-fade 0.8s var(--ease-out) var(--d, 0s) forwards;
}

.hart .glow {
  animation: hart-glow 1s var(--ease-out) var(--d, 0s) forwards;
}

.hart .pop {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: hart-pop 0.5s var(--ease-out) var(--d, 0s) forwards;
}

@keyframes hart-draw { to { stroke-dashoffset: 0; } }
@keyframes hart-fade { to { opacity: 1; } }
@keyframes hart-glow { to { opacity: 0.42; } }
@keyframes hart-pop  { to { transform: scale(1); } }

/* "For Sale" sign: drops in, sways a few times, settles */
.hart__sign {
  transform-box: view-box;
  transform-origin: 176px 226px;
  opacity: 0;
  animation:
    hart-fade 0.3s var(--ease-out) var(--d, 0s) forwards,
    hart-sway 3.2s var(--ease-in-out) var(--d, 0s) 1 forwards;
}

.hart__sign-board {
  fill: var(--color-gold);
  stroke: var(--color-charcoal);
  stroke-width: 1;
}

.hart__sign-text {
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: var(--color-ink);
}

@keyframes hart-sway {
  0%   { transform: rotate(-9deg); }
  25%  { transform: rotate(6deg); }
  50%  { transform: rotate(-3.5deg); }
  75%  { transform: rotate(1.5deg); }
  100% { transform: rotate(0deg); }
}

/* Portfolio: before/after house — the divider wipes across once */
@property --hart-split {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 92%;
}

.hart--transform {
  position: relative;
  aspect-ratio: 520 / 320;
  --hart-split: 92%;
  animation: hart-wipe 2.6s var(--ease-in-out) 0.9s forwards;
}

@keyframes hart-wipe {
  from { --hart-split: 92%; }
  to   { --hart-split: 40%; }
}

.hart__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hart__after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--hart-split));
}

.hart__sketch {
  fill: none;
  stroke: var(--color-np-blue);
  stroke-width: 1.3;
  stroke-dasharray: 5 5;
  opacity: 0.9;
}

.hart__mark {
  fill: none;
  stroke: var(--color-gold-light);
  stroke-width: 1.1;
  opacity: 0.55;
}

.hart__glow--on { opacity: 0.42; }

.hart__divider {
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: var(--hart-split);
  width: 2px;
  transform: translateX(-50%);
  background-color: var(--color-gold);
}

.hart__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: var(--color-paper);
  border: 2px solid var(--color-gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.hart__grip::before,
.hart__grip::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-block: 4px solid transparent;
}

.hart__grip::before { left: 6px; border-right: 6px solid var(--color-charcoal); }
.hart__grip::after  { right: 6px; border-left: 6px solid var(--color-charcoal); }

.hart__tag {
  position: absolute;
  top: 0;
  font-stretch: var(--label-stretch);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
}

.hart__tag--before { left: 4%; background-color: rgba(38, 44, 50, 0.08); color: var(--color-slate); }
.hart__tag--after  { right: 4%; background-color: var(--color-gold); color: var(--color-ink); }

/* Hold every drawing until the brand intro lifts */
.is-intro .hart,
.is-intro .hart *,
.is-intro .page-header__titleblock {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .hart .draw { stroke-dashoffset: 0; animation: none; }
  .hart .fade,
  .hart__sign { opacity: 1; animation: none; }
  .hart .glow { opacity: 0.42; animation: none; }
  .page-header__titleblock { opacity: 1; animation: none; }
  .hart .pop { transform: none; animation: none; }
  .hart--transform { animation: none; --hart-split: 40%; }
}

/* ─────────────────────────────────────────────────────────────
   6. PROCESS — RISING-ARROW STEPS (signature)
   Five steps climb left to right along the logo's gold arrow:
   the home's value rises at each step. /main.js draws the curve
   through the hex-nut nodes (and redraws on resize); without JS
   the steps simply sit in their staircase. Mobile: a vertical
   gold line instead.
   ───────────────────────────────────────────────────────────── */

.process-rise {
  position: relative;
}

.process-rise__arrow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.process-rise__path,
.process-rise__head {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Drawn in when the block scrolls into view */
.process-rise__path {
  stroke-dasharray: var(--path-length, 2000);
  stroke-dashoffset: var(--path-length, 2000);
  transition: stroke-dashoffset 1.6s var(--ease-in-out) 0.2s;
}

.process-rise__head {
  opacity: 0;
  transition: opacity 0.4s var(--ease-out) 1.6s;
}

.process-rise.is-drawn .process-rise__path { stroke-dashoffset: 0; }
.process-rise.is-drawn .process-rise__head { opacity: 1; }

.steps-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
}

.step-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-right: var(--space-md);
  /* Staircase: each step sits higher than the one before */
  margin-top: calc((4 - var(--i, 0)) * 34px);
}

.step-card__num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 50px;
  margin-bottom: 0.5rem;
  background-color: var(--color-gold);
  clip-path: var(--hex);
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  line-height: 1;
}

.step-card__title {
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--color-charcoal);
}

.step-card__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-slate);
  max-width: 26ch;
}

/* Tablet + mobile: a vertical timeline with a gold spine */
@media (max-width: 900px) {
  .process-rise__arrow { display: none; }

  .steps-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    padding-left: 0;
  }

  .steps-row::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 25px;
    bottom: 25px;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-gold) 0%, rgba(190, 155, 87, 0.35) 100%);
  }

  .step-card {
    margin-top: 0;
    padding-right: 0;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: start;
  }

  .step-card__num {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .step-card__title { padding-top: 0.75rem; }
  .step-card__body { max-width: 52ch; }
}


/* ─────────────────────────────────────────────────────────────
   7. FEATURE ROW + TEAM PAIR
   Two-column split: text / media (or reversed).
   ───────────────────────────────────────────────────────────── */

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

.feature-row--reverse {
  direction: rtl;
}

.feature-row--reverse > * {
  direction: ltr;
}

.feature-row__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.feature-row__heading {
  font-size: clamp(2.1rem, 4vw, 3.25rem);
  line-height: 1.04;
  color: var(--color-charcoal);
}

.feature-row__body {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-slate);
}

.feature-row__content--inv .feature-row__eyebrow { color: var(--color-gold-light); }
.feature-row__content--inv .feature-row__heading { color: var(--color-paper); }
.feature-row__content--inv .feature-row__body { color: rgba(250, 249, 246, 0.72); }

.feature-row__media {
  position: relative;
}

/* Melissa & Josh, side by side: name + license, the one-team proof */
.team-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  border-top: 1px solid var(--color-rule-dark);
}

.team-pair__item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.25rem 1.25rem 0 0;
}

.team-pair__item + .team-pair__item {
  padding-left: 1.25rem;
  border-left: 1px solid var(--color-rule-dark);
}

.team-pair__name {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-paper);
  max-width: none;
}

.team-pair__role {
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  max-width: none;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .feature-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .feature-row--reverse {
    direction: ltr;
  }
}


/* ─────────────────────────────────────────────────────────────
   8. BEFORE / AFTER SLIDER
   Used on the portfolio, homepage, and listing detail pages.
   ───────────────────────────────────────────────────────────── */

.ba-slider { margin: 0; }

.ba-slider__frame {
  --ba-pos: 50%;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-stone);
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  border-radius: var(--radius-lg);
}

.ba-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

/* "Before" sits on top of "after" and is clipped to the slider position */
.ba-slider__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}

.ba-slider__tag {
  position: absolute;
  top: 0.85rem;
  z-index: 2;
  font-stretch: var(--label-stretch);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  pointer-events: none;
  line-height: 1;
}

.ba-slider__tag--before {
  left: 0.85rem;
  background-color: rgba(28, 32, 37, 0.72);
  color: var(--color-paper);
}

.ba-slider__tag--after {
  right: 0.85rem;
  background-color: var(--color-gold);
  color: var(--color-ink);
}

.ba-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-pos);
  width: 0;
  z-index: 3;
  pointer-events: none;
}

.ba-slider__handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  transform: translateX(-50%);
  background-color: var(--color-paper);
  box-shadow: 0 0 0 1px rgba(28, 32, 37, 0.15);
}

.ba-slider__handle-grip {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--color-paper);
  box-shadow: 0 4px 16px rgba(28, 32, 37, 0.3);
  transition: transform var(--transition-fast);
}

.ba-slider__frame.is-dragging .ba-slider__handle-grip {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Twin arrows on the grip */
.ba-slider__handle-grip::before,
.ba-slider__handle-grip::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-block: 5px solid transparent;
}

.ba-slider__handle-grip::before { left: 0.6rem; border-right: 7px solid var(--color-charcoal); }
.ba-slider__handle-grip::after  { right: 0.6rem; border-left: 7px solid var(--color-charcoal); }

/* Visually hidden, keyboard-operable range input (drag is on the frame) */
.ba-slider__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.ba-slider__frame:focus-within .ba-slider__handle-grip {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.ba-slider__caption {
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin-top: 0.75rem;
  max-width: none;
}


/* ─────────────────────────────────────────────────────────────
   9. PORTFOLIO CARDS + PROJECT MODAL
   Portfolio page + the homepage "Recent work" teaser.
   ───────────────────────────────────────────────────────────── */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (max-width: 760px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

.pf-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.pf-card:hover {
  box-shadow: var(--shadow-md);
}

.pf-card__preview {
  position: relative;
}

.pf-card__preview .ba-slider__frame,
.pf-card__photo {
  border-radius: 0;
}

/* The small card preview drops the per-pair caption — it lives in the modal */
.pf-card__preview .ba-slider__caption { display: none; }

/* Projects with finished photos but no before/after show a still */
.pf-card__photo {
  aspect-ratio: 4 / 3;
}

.pf-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 1.5rem 1.75rem 1.75rem;
}

.pf-card__loc {
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
}

.pf-card__title {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.15;
  color: var(--color-charcoal);
}

.pf-card__result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-slate);
  max-width: none;
}

.pf-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background-color: rgba(190, 155, 87, 0.16);
  color: var(--color-gold-deep);
  font-weight: 600;
  font-size: 0.8125rem;
}

.pf-card__more {
  margin-top: 0.4rem;
  padding: 0 0 3px;
  background: none;
  border: 0;
}

/* Portfolio page grid: one large card per row on tablets in portrait, so a
   project fills the iPad screen when Melissa presents in person */
@media (max-width: 1000px) {
  .portfolio-grid--page { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* Project viewer (modal) — built for presenting on an iPad or laptop */
body.pf-modal-open { overflow: hidden; }

.pf-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 2.5vw, 2rem);
}

.pf-modal.is-open { display: flex; }

.pf-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 32, 37, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.pf-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 3vw, 2.25rem);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.pf-modal :focus-visible {
  outline: 2px solid var(--color-gold-deep);
  outline-offset: 2px;
}

.pf-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: 1.1rem;
}

.pf-modal__titles {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.pf-modal__loc {
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  max-width: none;
}

.pf-modal__title {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.05;
  color: var(--color-charcoal);
}

.pf-modal__tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.pf-modal__count {
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--color-slate);
  margin-right: 0.35rem;
}

.pf-modal__tool {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-rule);
  background: var(--color-white);
  color: var(--color-charcoal);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.pf-modal__tool:hover {
  background-color: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-paper);
}

.pf-modal__close {
  font-size: 1.6rem;
  line-height: 1;
}

/* Full-screen icon: four corner brackets */
.pf-modal__fs-icon {
  position: relative;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(currentColor, currentColor) left top / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) left top / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 2px 6px no-repeat;
}

.pf-modal__stage { position: relative; }

.pf-modal__stage-inner {
  height: min(64dvh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  touch-action: pan-y;
}

.pf-modal__stage-inner .ba-slider,
.pf-modal__stage-inner .ba-slider__frame { width: 100%; height: 100%; }
.pf-modal__stage-inner .ba-slider__frame { aspect-ratio: auto; border-radius: 0; }

.pf-stage-photo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-stage-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.pf-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 0;
  background: rgba(250, 249, 246, 0.94);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-charcoal);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.pf-modal__nav:hover { background-color: var(--color-white); }
.pf-modal__nav:active { transform: translateY(-50%) scale(0.95); }

.pf-modal__nav--prev { left: 0.85rem; }
.pf-modal__nav--next { right: 0.85rem; }

.pf-modal__nav::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-block: 7px solid transparent;
}

.pf-modal__nav--prev::before { border-right: 10px solid currentColor; margin-right: 3px; }
.pf-modal__nav--next::before { border-left: 10px solid currentColor; margin-left: 3px; }

.pf-modal__caption {
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin-top: 0.85rem;
  text-align: center;
  max-width: none;
  min-height: 1.2em;
}

.pf-modal__thumbs {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: var(--space-sm);
  overflow-x: auto;
  padding: 0.25rem 0.25rem 0.4rem;
  scrollbar-width: thin;
}

.pf-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 92px;
  height: 69px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--color-stone);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

.pf-thumb:hover { opacity: 1; }
.pf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-thumb--active { border-color: var(--color-gold); opacity: 1; }

.pf-thumb__badge {
  position: absolute;
  bottom: 3px;
  left: 3px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--color-gold);
  color: var(--color-ink);
}

.pf-modal__info {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pf-modal__summary {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-slate);
  max-width: 70ch;
}

.pf-modal__subhead {
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  margin-bottom: 0.25rem;
}

/* Full screen: the photo takes over, details stay one scroll away */
.pf-modal.is-fullscreen .pf-modal__dialog,
.pf-modal__dialog:fullscreen {
  width: 100%;
  max-height: none;
  height: 100%;
  border-radius: 0;
  padding: clamp(1rem, 2.5vw, 2rem);
  background: var(--color-ink);
}

.pf-modal__dialog:fullscreen .pf-modal__title { color: var(--color-paper); }
.pf-modal__dialog:fullscreen .pf-modal__loc { color: var(--color-gold-light); }
.pf-modal__dialog:fullscreen .pf-modal__count,
.pf-modal__dialog:fullscreen .pf-modal__caption { color: rgba(250, 249, 246, 0.7); }
.pf-modal__dialog:fullscreen .pf-modal__stage-inner { height: calc(100dvh - 15rem); }
.pf-modal__dialog:fullscreen .pf-modal__summary { color: rgba(250, 249, 246, 0.75); }
.pf-modal__dialog:fullscreen .pf-modal__subhead { color: var(--color-paper); }
.pf-modal__dialog:fullscreen .renovation-scope li { color: rgba(250, 249, 246, 0.75); }

.pf-modal__dialog:-webkit-full-screen {
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
  background: var(--color-ink);
}

.pf-modal__dialog:-webkit-full-screen .pf-modal__title { color: var(--color-paper); }
.pf-modal__dialog:-webkit-full-screen .pf-modal__stage-inner { height: calc(100vh - 15rem); }

@media (max-width: 600px) {
  .pf-modal { padding: 0; }
  .pf-modal__dialog { max-height: 100dvh; height: 100%; border-radius: 0; }
  .pf-modal__stage-inner { height: 52dvh; }
  .pf-modal__nav { width: 2.75rem; height: 2.75rem; }
  .pf-modal__tool { width: 44px; height: 44px; }
  .pf-modal__thumbs { justify-content: flex-start; }
}

/* Project metrics (in the modal) */
.transform-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background-color: var(--color-rule);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.transform-metric {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  background-color: var(--color-white);
}

.transform-metric__label {
  font-stretch: var(--label-stretch);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-slate);
  max-width: none;
}

.transform-metric__value {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-charcoal);
  line-height: 1.1;
}

.transform-metric__value--accent { color: var(--color-gold-deep); }

@media (max-width: 600px) {
  .transform-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ─────────────────────────────────────────────────────────────
   10. FINANCING BAND
   "Improve now. Pay at closing." — charcoal, over a faint
   blueprint grid (Josh's side of the business).
   ───────────────────────────────────────────────────────────── */

.financing-band {
  position: relative;
  background-color: var(--color-charcoal);
  color: var(--color-paper);
  padding-block: var(--space-xl);
  overflow: hidden;
  isolation: isolate;
}

.financing-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(250, 249, 246, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 249, 246, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 78% 45%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 90% at 78% 45%, #000 0%, transparent 72%);
}

.financing-band__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

.financing-band__heading {
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--color-paper);
  margin-top: 1.25rem;
}

.financing-band__heading em,
.feature-row__content--inv .feature-row__heading em,
.contact-strip__heading em {
  color: var(--color-gold-light);
}

.section-header__heading em,
.feature-row__heading em,
.about-brand__heading em {
  color: var(--color-gold-deep);
}

.financing-band__body {
  font-size: var(--text-md);
  line-height: 1.65;
  color: rgba(250, 249, 246, 0.74);
  margin-top: 1.5rem;
  max-width: 44ch;
}

.financing-band__cta {
  margin-top: var(--space-md);
}

/* The points read like line items on a closing statement */
.financing-band__points {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(250, 249, 246, 0.16);
}

.financing-point {
  position: relative;
  padding: 1.6rem 0 1.6rem 2.25rem;
  border-bottom: 1px solid rgba(250, 249, 246, 0.16);
}

.financing-point::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.95rem;
  width: 14px;
  height: 15px;
  background-color: var(--color-gold);
  clip-path: var(--hex);
}

.financing-point__title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
  color: var(--color-paper);
}

.financing-point__body {
  font-size: var(--text-base);
  line-height: 1.6;
  color: rgba(250, 249, 246, 0.68);
  margin-top: 0.4rem;
  max-width: 46ch;
}

@media (max-width: 900px) {
  .financing-band__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}


/* ─────────────────────────────────────────────────────────────
   11. LISTING CARDS + LISTINGS PAGE
   ───────────────────────────────────────────────────────────── */

.card-listing {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card-listing:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-listing__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--color-stone);
}

.card-listing__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1s var(--ease-out), filter var(--transition-slow);
}

.card-listing:hover .card-listing__media img {
  transform: scale(1.04);
}

/* No photo uploaded: a quiet stone panel with the hex mark */
.card-listing__no-photo {
  position: absolute;
  inset: 0;
  display: block;
  background-color: var(--color-stone);
}

.card-listing__no-photo::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 40px;
  transform: translate(-50%, -50%);
  background-color: var(--color-rule);
  clip-path: var(--hex);
}

/* Status pill */
.card-listing__status {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-stretch: var(--label-stretch);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-ink);
  background-color: var(--color-gold);
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  pointer-events: none;
}

.card-listing__status--pending {
  background-color: var(--color-charcoal);
  color: var(--color-paper);
}

.card-listing__status--sold {
  background-color: var(--color-paper);
  color: var(--color-charcoal);
}

.card-listing__body {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
}

.card-listing__meta {
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  max-width: none;
}

.card-listing__address {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.1;
  color: var(--color-charcoal);
}

.card-listing__city {
  font-size: var(--text-sm);
  color: var(--color-slate);
  max-width: none;
}

/* Specs row — beds · baths · sqft. Each spec's divider sits on its left; the
   strip reaches one gap past the text column on both sides and is clipped
   back to it, so when the specs wrap (five, on a phone) the divider that
   would open a row is cut away and none dangles at the end of the row above */
.card-listing__specs {
  --spec-gap: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-block: 0.6rem;
  margin-inline: calc(-1 * var(--spec-gap) - 1px) calc(-1 * var(--spec-gap));
  clip-path: inset(0 var(--spec-gap) 0 calc(var(--spec-gap) + 1px));
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

.card-listing__spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.9rem 0 0.9rem var(--spec-gap);
  margin-right: var(--spec-gap);
  border-left: 1px solid var(--color-rule);
}

.card-listing__spec-value {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--color-charcoal);
  line-height: 1;
}

.card-listing__spec-label {
  font-stretch: var(--label-stretch);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-slate);
}

.card-listing__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: 0.3rem;
}

.card-listing__price {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--color-charcoal);
  line-height: 1;
}

.card-listing__price-label {
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-slate);
}

/* Sold listings sit quieter — photo desaturates, full color on hover */
.card-listing[data-status="sold"] .card-listing__media img {
  filter: grayscale(0.6);
}

.card-listing[data-status="sold"]:hover .card-listing__media img {
  filter: grayscale(0);
}

@media (max-width: 780px) {
  .card-listing { grid-template-columns: 1fr; }
  .card-listing__media { aspect-ratio: 3 / 2; }
}

/* Homepage stack + "view all" row */
.listings-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.listings-view-all {
  display: flex;
  justify-content: flex-start;
}

/* Listings page — filter pills */
.listings-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.listings-filter__label {
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin-right: 0.4rem;
}

.filter-btn {
  font-stretch: var(--label-stretch);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  border: 1px solid var(--color-rule);
  background: var(--color-white);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.filter-btn:hover {
  border-color: var(--color-charcoal);
}

.filter-btn--active {
  background-color: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-paper);
}

.listings-count {
  font-size: var(--text-sm);
  color: var(--color-slate);
  max-width: none;
  margin-top: var(--space-md);
}

.listings-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-md);
}

/* Nothing for sale right now — direction, not a dead end */
.listings-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.listings-empty__heading {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--color-charcoal);
}

.listings-empty__body {
  font-size: var(--text-base);
  max-width: 52ch;
}


/* ─────────────────────────────────────────────────────────────
   12. LISTING DETAIL PAGE
   ───────────────────────────────────────────────────────────── */

/* Gallery — lead photo + up to four tiles */
/* Photos fill fixed frames (absolutely positioned, object-fit: cover), so a
   photo's own size or shape can never stretch the gallery over the page —
   whatever the photo count. */
.listing-gallery {
  margin-top: var(--nav-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 6px;
  height: clamp(420px, 62vh, 620px);
  padding: 6px;
  overflow: hidden;
  background-color: var(--color-paper);
}

.listing-gallery--single {
  grid-template-columns: 1fr;
}

.listing-gallery-spacer {
  height: var(--nav-height);
}

.listing-gallery__hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background-color: var(--color-ink);
}

.listing-gallery--single .listing-gallery__hero {
  border-radius: var(--radius-lg);
}

.listing-gallery__hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter var(--transition-slow);
}

.listing-gallery__hero:hover img {
  transform: scale(1.02);
}

.listing-gallery__status {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 2;
  font-stretch: var(--label-stretch);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-ink);
  background-color: var(--color-gold);
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
}

.listing-gallery__status--contract {
  background-color: var(--color-charcoal);
  color: var(--color-paper);
}

.listing-gallery__status--sold {
  background-color: var(--color-paper);
  color: var(--color-charcoal);
}

.listing-gallery__count {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  font-stretch: var(--label-stretch);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  background-color: rgba(250, 249, 246, 0.94);
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.listing-gallery__count:hover {
  background-color: var(--color-white);
}

.listing-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

/* Fewer than four tiles: let the ones we have fill the space */
.listing-gallery__thumbs--1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.listing-gallery__thumbs--2 { grid-template-columns: minmax(0, 1fr); }
.listing-gallery__thumbs--3 .listing-gallery__thumb:first-child { grid-column: 1 / -1; }

.listing-gallery__thumb {
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background-color: var(--color-ink);
}

/* Round only the gallery's outer corners */
.listing-gallery__thumbs--4 .listing-gallery__thumb:nth-child(2),
.listing-gallery__thumbs--3 .listing-gallery__thumb:nth-child(1),
.listing-gallery__thumbs--2 .listing-gallery__thumb:nth-child(1),
.listing-gallery__thumbs--1 .listing-gallery__thumb:nth-child(1) { border-top-right-radius: var(--radius-lg); }

.listing-gallery__thumbs--4 .listing-gallery__thumb:nth-child(4),
.listing-gallery__thumbs--3 .listing-gallery__thumb:nth-child(3),
.listing-gallery__thumbs--2 .listing-gallery__thumb:nth-child(2),
.listing-gallery__thumbs--1 .listing-gallery__thumb:nth-child(1) { border-bottom-right-radius: var(--radius-lg); }

.listing-gallery__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base), filter var(--transition-slow);
}

.listing-gallery__thumb:hover img {
  transform: scale(1.04);
}

.listing-gallery__thumb--more::after {
  content: attr(data-more);
  position: absolute;
  inset: 0;
  background-color: rgba(28, 32, 37, 0.6);
  color: var(--color-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-stretch: var(--label-stretch);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Lightbox */
.listing-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background-color: rgba(20, 23, 27, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility 0s linear 0.4s;
}

.listing-lightbox--open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition-base), visibility 0s;
}

.listing-lightbox__img {
  max-width: 88vw;
  max-height: 84vh;
  object-fit: contain;
  border-radius: var(--radius);
}

.listing-lightbox__close,
.listing-lightbox__prev,
.listing-lightbox__next {
  position: absolute;
  color: var(--color-paper);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(250, 249, 246, 0.22);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.listing-lightbox__close {
  top: var(--space-md);
  right: var(--space-md);
  width: 46px;
  height: 46px;
  font-size: 1.5rem;
}

.listing-lightbox__prev,
.listing-lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
}

.listing-lightbox__prev { left: var(--space-md); }
.listing-lightbox__next { right: var(--space-md); }

.listing-lightbox__close:hover,
.listing-lightbox__prev:hover,
.listing-lightbox__next:hover {
  background-color: rgba(250, 249, 246, 0.1);
  border-color: var(--color-gold);
}

.listing-lightbox__prev::before,
.listing-lightbox__next::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.listing-lightbox__prev::before { transform: rotate(45deg) translate(2px, -2px); }
.listing-lightbox__next::before { transform: rotate(-135deg) translate(2px, -2px); }

.listing-lightbox__counter {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(250, 249, 246, 0.6);
  max-width: none;
}

/* Detail body — two columns */
.listing-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-xl);
  align-items: flex-start;
  padding-block: var(--space-lg) var(--space-xl);
}

.listing-breadcrumb {
  margin-bottom: var(--space-md);
}

.listing-detail__address {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--color-charcoal);
}

.listing-detail__city {
  font-size: var(--text-md);
  color: var(--color-slate);
  margin-top: 0.75rem;
  max-width: none;
}

.listing-detail__price {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--color-gold-deep);
  line-height: 1;
  margin-top: var(--space-md);
  max-width: none;
}

.listing-detail__price-label {
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-slate);
}

.listing-detail__list-price {
  font-size: var(--text-sm);
  color: var(--color-slate);
  margin-top: 0.5rem;
}

/* Key specs — a spec sheet. Cells grow to fill every row they wrap onto, so
   an odd count never leaves an empty grey cell (5 specs on a phone: 2+2+1) */
.listing-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: var(--space-lg);
  background-color: var(--color-rule);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.listing-spec {
  flex: 1 1 118px;
  padding: 1.1rem 1.25rem;
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.listing-spec__value {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-charcoal);
  line-height: 1;
}

.listing-spec__label {
  font-stretch: var(--label-stretch);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-slate);
  max-width: none;
}

/* Secondary details — two-column definition list */
.listing-detail__table {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}

.listing-detail__row {
  display: grid;
  grid-template-columns: minmax(110px, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-sm);
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--color-rule);
}

.listing-detail__row-label {
  font-stretch: var(--label-stretch);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-slate);
  padding-top: 0.2rem;
}

.listing-detail__row-value {
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  font-weight: 500;
}

.listing-detail__description {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}

.listing-detail__section-title {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  color: var(--color-charcoal);
  margin-bottom: var(--space-sm);
}

.listing-detail__description p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-slate);
}

.listing-detail__description p + p {
  margin-top: var(--space-sm);
}

.listing-detail__ba {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Right: sticky contact card */
.listing-detail__sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-md));
}

.listing-sidebar {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-top: 3px solid var(--color-gold);
}

.listing-sidebar__agent {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-rule);
}

.listing-sidebar__agent-photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.listing-sidebar__agent-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-sidebar__agent-name {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-charcoal);
  max-width: none;
  line-height: 1.2;
}

.listing-sidebar__agent-title {
  font-stretch: var(--label-stretch);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  max-width: none;
  margin-top: 0.3rem;
}

.listing-sidebar__heading {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-charcoal);
  max-width: none;
  line-height: 1.15;
}

.listing-sidebar .form { gap: 1.1rem; }
.listing-sidebar .inquiry-submit { width: 100%; }

/* Room for the seam's medallion above, which the button used to run into */
.listing-detail__back {
  padding-top: var(--space-md);
}

@media (max-width: 1080px) {
  .listing-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .listing-detail__sidebar { position: static; }
}

@media (max-width: 900px) {
  .listing-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }

  .listing-gallery__hero {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .listing-gallery--single .listing-gallery__hero { border-radius: var(--radius-lg); }

  .listing-gallery__thumbs,
  .listing-gallery__thumbs--1,
  .listing-gallery__thumbs--2,
  .listing-gallery__thumbs--3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 1fr;
    height: 92px;
  }

  .listing-gallery__thumbs--3 .listing-gallery__thumb:first-child { grid-column: auto; }

  .listing-gallery__thumbs .listing-gallery__thumb { border-radius: 0 !important; }

  .listing-detail__table { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .listing-gallery__thumbs,
  .listing-gallery__thumbs--1,
  .listing-gallery__thumbs--2,
  .listing-gallery__thumbs--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    height: auto;
    grid-auto-rows: 84px;
  }

  .listing-gallery__thumbs--3 .listing-gallery__thumb:first-child { grid-column: 1 / -1; }

  .listing-detail__row { grid-template-columns: 1fr; gap: 0.25rem; }
}


/* ─────────────────────────────────────────────────────────────
   13. TESTIMONIALS
   One quote at a time, set large in the serif italic.
   ───────────────────────────────────────────────────────────── */

.testimonials {
  padding-block: var(--space-xl);
  background-color: var(--color-stone);
}

.testimonials__inner {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.testimonials__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.testimonials__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-gold-deep);
  max-width: none;
}

.testimonials__eyebrow::before {
  content: '';
  width: 9px;
  height: 10px;
  background-color: var(--color-gold);
  clip-path: var(--hex);
}

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.testimonial-card.is-leaving { opacity: 0; transform: translateY(10px); }
.testimonial-card.is-entering { opacity: 0; transform: translateY(-10px); }

/* Oversized gold opening mark */
.testimonial-card__mark {
  display: block;
  font-family: var(--font-accent);
  font-size: 7rem;
  font-style: italic;
  line-height: 0.6;
  height: 3rem;
  color: var(--color-gold);
  user-select: none;
  pointer-events: none;
}

.testimonial-card__quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.5rem, 2.8vw, 2.35rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-charcoal);
  max-width: 34ch;
  margin-bottom: var(--space-md);
  text-wrap: pretty;
}

.testimonial-card__word {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(4px);
  transition:
    opacity 0.35s var(--ease-out),
    filter 0.35s var(--ease-out),
    transform 0.35s var(--ease-out);
}

.testimonial-card__word--visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.testimonial-card__footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
}

.testimonial-card__footer::before {
  content: '';
  width: 36px;
  height: 2px;
  background-color: var(--color-gold);
  flex-shrink: 0;
}

.testimonial-card__name {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-charcoal);
  max-width: none;
  line-height: 1.3;
}

.testimonial-card__location {
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-slate);
  max-width: none;
  margin-top: 4px;
  line-height: 1.3;
}

.testimonials__nav {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.testimonials__arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--color-rule);
  background: var(--color-white);
  color: var(--color-charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.testimonials__arrow:hover {
  background-color: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-paper);
}

.testimonials__arrow--prev::before,
.testimonials__arrow--next::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.testimonials__arrow--prev::before { transform: rotate(45deg) translate(1px, -1px); }
.testimonials__arrow--next::before { transform: rotate(-135deg) translate(1px, -1px); }

.testimonials__progress {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: var(--space-md);
}

.testimonials__pip {
  width: 24px;
  height: 2px;
  background-color: var(--color-rule);
  border: none;
  padding: 8px 0;
  background-clip: content-box;
  cursor: pointer;
  transition: background-color var(--transition-fast), width var(--transition-base);
}

.testimonials__pip--active {
  background-color: var(--color-gold);
  width: 48px;
}

@media (max-width: 768px) {
  .testimonial-card { min-height: 260px; }
  .testimonial-card__mark { font-size: 5.5rem; height: 2.4rem; }
}


/* ─────────────────────────────────────────────────────────────
   14. CONTACT STRIP — the closing CTA band on every page
   ───────────────────────────────────────────────────────────── */

.contact-strip {
  position: relative;
  background-color: var(--color-ink);
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* A faint oversized house outline — the logo's roofline */
.contact-strip::before {
  content: '';
  position: absolute;
  right: -6%;
  bottom: -46%;
  width: min(760px, 70vw);
  aspect-ratio: 1;
  z-index: -1;
  border: 2px solid rgba(190, 155, 87, 0.16);
  border-bottom: 0;
  border-right: 0;
  transform: rotate(45deg);
  pointer-events: none;
}

.contact-strip__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.contact-strip__heading {
  font-size: clamp(2.1rem, 4.6vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--color-paper);
  max-width: 18ch;
}

.contact-strip__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  flex-shrink: 0;
}

.contact-strip__sub {
  font-size: var(--text-sm);
  color: rgba(250, 249, 246, 0.66);
  max-width: 34ch;
  line-height: 1.5;
  text-align: right;
}

.contact-strip__phone {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-gold-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(211, 182, 124, 0.35);
  padding-bottom: 2px;
  transition: border-color var(--transition-fast);
}

.contact-strip__phone:hover {
  border-color: var(--color-gold-light);
}

@media (max-width: 860px) {
  .contact-strip__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .contact-strip__actions { align-items: flex-start; }
  .contact-strip__sub { text-align: left; }
}


/* ─────────────────────────────────────────────────────────────
   15. FORMS
   Label above, boxed input below; gold focus.
   ───────────────────────────────────────────────────────────── */

.form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field label {
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}

.form-field__optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--color-slate);
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-charcoal);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.form-field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-charcoal) 50%),
    linear-gradient(135deg, var(--color-charcoal) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #8A9096;
}

.form-field input:hover,
.form-field textarea:hover,
.form-field select:hover {
  border-color: #C9C5BC;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--color-gold-deep);
  box-shadow: 0 0 0 3px rgba(190, 155, 87, 0.22);
}

.form-field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.form__note {
  font-size: var(--text-sm);
  color: var(--color-slate);
  max-width: none;
  line-height: 1.5;
}

.form__note-link {
  font-size: var(--text-xs);
}

/* Error state */
.form-field--error input,
.form-field--error textarea {
  border-color: var(--color-error);
}

.form-field__error-msg {
  font-size: var(--text-sm);
  color: var(--color-error);
  max-width: none;
}

.form-field__error-msg:empty { display: none; }

/* Honeypot — hidden from humans, bait for bots */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-submit-error {
  display: none;
  font-size: var(--text-sm);
  color: var(--color-error);
  line-height: 1.5;
}

.form-submit-error a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ── Multi-step contact form ───────────────────────────────────
   Progress rail + step transitions + selectable choice cards.
   All fields stay in the DOM so Netlify detects them. */

.form-progress {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 0.5rem;
}

.form-progress__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.form-progress__seg {
  height: 4px;
  border-radius: 4px;
  background-color: var(--color-rule);
  position: relative;
  overflow: hidden;
}

.form-progress__seg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}

.form-progress__seg.is-done::after,
.form-progress__seg.is-current::after {
  transform: scaleX(1);
}

.form-progress__seg.is-done { cursor: pointer; }

.form-progress__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.form-progress__name {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-charcoal);
}

.form-progress__count {
  flex-shrink: 0;
  white-space: nowrap; /* "Step 1 of 3" never splits on a phone */
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-slate);
  font-variant-numeric: tabular-nums;
}

.form-step {
  display: none;
  flex-direction: column;
  gap: 1.5rem;
}

.form-step.is-active {
  display: flex;
  animation: stepIn 0.45s var(--ease-out) both;
}

@keyframes stepIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.form-step__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: 0.25rem;
}

.form-step__nav--end { justify-content: flex-end; }

.form-step__error {
  display: none;
  font-size: var(--text-sm);
  color: var(--color-error);
  margin-top: 0.75rem;
}

.form-step__error.is-visible { display: block; }

.form-fieldset {
  border: none;
  padding: 0;
}

.form-fieldset__legend {
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  margin-bottom: 0.75rem;
  display: block;
}

.form-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.form-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.1rem 1rem 2.9rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* A hex "radio" that fills gold when chosen */
.form-choice::before {
  content: '';
  position: absolute;
  left: 1.1rem;
  top: 1.15rem;
  width: 16px;
  height: 18px;
  background-color: var(--color-rule);
  clip-path: var(--hex);
  transition: background-color var(--transition-fast);
}

.form-choice::after {
  content: '';
  position: absolute;
  left: calc(1.1rem + 3px);
  top: calc(1.15rem + 3px);
  width: 10px;
  height: 12px;
  background-color: var(--color-white);
  clip-path: var(--hex);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.form-choice:hover {
  border-color: #C9C5BC;
}

.form-choice:has(input:checked) {
  border-color: var(--color-gold-deep);
  background-color: #FBF7EE;
  box-shadow: 0 0 0 1px var(--color-gold-deep) inset;
}

.form-choice:has(input:checked)::before { background-color: var(--color-gold-deep); }
.form-choice:has(input:checked)::after { background-color: var(--color-gold); transform: scale(0.8); }

.form-choice:has(input:focus-visible) {
  outline: 2px solid var(--color-gold-deep);
  outline-offset: 2px;
}

.form-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.form-choice__label {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-charcoal);
  line-height: 1.3;
}

.form-choice__desc {
  font-size: var(--text-sm);
  color: var(--color-slate);
  line-height: 1.4;
}

.contact-submit {
  width: 100%;
  margin-top: 0.25rem;
}

/* Success state */
.contact-success {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: var(--space-md) 0;
}

.contact-success:focus { outline: none; }

/* Gold hex with a check */
.contact-success__mark {
  position: relative;
  display: block;
  width: 52px;
  height: 58px;
  background-color: var(--color-gold);
  clip-path: var(--hex);
}

.contact-success__mark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  width: 18px;
  height: 10px;
  border-left: 3px solid var(--color-ink);
  border-bottom: 3px solid var(--color-ink);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.contact-success__heading {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  color: var(--color-charcoal);
}

.contact-success__body {
  font-size: var(--text-base);
  color: var(--color-slate);
  line-height: 1.7;
}

@media (max-width: 480px) {
  .form-choice-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .form-step.is-active { animation: none; }
  .form-progress__seg::after { transition: none; }
}


/* ─────────────────────────────────────────────────────────────
   16. CONTACT PAGE
   ───────────────────────────────────────────────────────────── */

.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-xl);
  align-items: flex-start;
}

.contact-split__heading {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.05;
  color: var(--color-charcoal);
  margin-bottom: 1.25rem;
}

.contact-split__body {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-slate);
  margin-bottom: var(--space-lg);
}

/* The form sits on a white card */
.contact-split__form {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-top: 3px solid var(--color-gold);
}

.contact-details {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-rule);
}

.contact-detail {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--color-rule);
  align-items: baseline;
}

.contact-detail__label {
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  max-width: none;
  line-height: 1.6;
}

.contact-detail__value {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-charcoal);
  max-width: none;
  line-height: 1.6;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--transition-fast);
}

a.contact-detail__value:hover {
  color: var(--color-gold-deep);
}

.contact-detail__value--plain {
  font-weight: 400;
  color: var(--color-slate);
}

.contact-response-note {
  font-size: var(--text-sm);
  color: var(--color-slate);
  margin-top: var(--space-md);
  max-width: none;
}

/* Fair Housing notice */
.fair-housing {
  border-top: 1px solid var(--color-rule);
}

.fair-housing__inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  color: var(--color-slate);
}

.fair-housing__inner .eho-mark {
  flex-shrink: 0;
  margin-top: 2px;
}

.fair-housing__text {
  font-size: var(--text-sm);
  color: var(--color-slate);
  line-height: 1.7;
  max-width: 90ch;
}

@media (max-width: 960px) {
  .contact-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}


/* ─────────────────────────────────────────────────────────────
   17. ABOUT PAGE
   ───────────────────────────────────────────────────────────── */

/* Brand intro — statement left, story right */
.about-brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: flex-start;
}

.about-brand__heading {
  font-size: clamp(2.1rem, 4vw, 3.25rem);
  line-height: 1.04;
  color: var(--color-charcoal);
}

.about-brand__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.about-brand__body p {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-slate);
}

.about-brand__body p:first-child {
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--color-charcoal);
}

@media (max-width: 900px) {
  .about-brand { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
}

/* Process list (dark) — vertical timeline with a gold spine */
.process-list {
  position: relative;
  display: flex;
  flex-direction: column;
}

.process-list::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 2.5rem;
  bottom: 2.5rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-gold), rgba(190, 155, 87, 0.25));
}

.process-item {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: 1.75rem;
  align-items: flex-start;
}

.process-item__step {
  display: grid;
  place-items: center;
  width: 48px;
  height: 52px;
  background-color: var(--color-gold);
  clip-path: var(--hex);
  font-stretch: var(--label-stretch);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1;
}

.process-item__content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 0.6rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-rule-dark);
}

.process-item:last-child .process-item__content {
  border-bottom: 0;
  padding-bottom: 0;
}

.process-item__heading {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  color: var(--color-paper);
}

.process-item__body {
  font-size: var(--text-base);
  line-height: 1.75;
  color: rgba(250, 249, 246, 0.72);
  max-width: 62ch;
}

/* Team — two portraits + bios */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.team-member {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.team-member__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.team-member__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-member__name {
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  color: var(--color-charcoal);
}

.team-member__role {
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-top: 0.5rem;
}

.team-member__bio {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-slate);
  max-width: none;
}

@media (max-width: 860px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}

/* Services — two-column list with hex bullets (no prices, per brief) */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}

.service-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--color-rule);
}

.service-item__mark {
  width: 10px;
  height: 11px;
  flex-shrink: 0;
  background-color: var(--color-gold);
  clip-path: var(--hex);
}

.service-item__name {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-charcoal);
  max-width: none;
}

@media (max-width: 720px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* Credentials — four cards */
.credentials-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
}

.credential-item {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.6rem 1.5rem;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--color-gold);
}

.credential-item__label {
  font-stretch: var(--label-stretch);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  max-width: none;
}

.credential-item__value {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-charcoal);
  max-width: none;
  line-height: 1.15;
}

.credential-item__detail {
  font-size: var(--text-sm);
  color: var(--color-slate);
  max-width: none;
  line-height: 1.5;
}

@media (max-width: 1000px) {
  .credentials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .credentials-grid { grid-template-columns: 1fr; }
}

/* Service areas */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.area-item {
  padding: 1.6rem 1.5rem;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.area-item__name {
  font-size: 1.25rem;
  color: var(--color-charcoal);
  margin-bottom: 0.6rem;
}

.area-item__detail {
  font-size: var(--text-sm);
  color: var(--color-slate);
  line-height: 1.65;
  max-width: none;
}

.area-item--note {
  display: flex;
  align-items: center;
  background-color: transparent;
  box-shadow: none;
  border: 1px dashed #C9C5BC;
}

.area-item--note p {
  font-size: var(--text-base);
  color: var(--color-slate);
  max-width: none;
}

@media (max-width: 900px) {
  .areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .areas-grid { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────
   18. FOOTER
   Light, so the logo shows in its real colors. Brand + CTA on
   the left; Explore / Contact / Service area columns; legal
   line with the Equal Housing mark underneath.
   ───────────────────────────────────────────────────────────── */

.footer {
  background-color: var(--color-stone);
  color: var(--color-charcoal);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: var(--space-md);
  border-top: 3px solid var(--color-gold);
}

.footer__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-md);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.footer__logo {
  display: inline-flex;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.footer__logo:hover { opacity: 0.8; }

.footer__logo-img {
  width: 150px;
  height: auto;
  display: block;
}

.footer__statement {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-slate);
  max-width: 32ch;
}

.footer__tagline {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--color-charcoal);
  line-height: 1.2;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer__heading {
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  line-height: 1.3;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer__link,
.footer__value {
  font-size: var(--text-base);
  color: var(--color-charcoal);
  text-decoration: none;
  line-height: 1.4;
  overflow-wrap: anywhere;
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-gold-deep);
}

.footer__small {
  font-size: var(--text-sm);
  color: var(--color-slate);
  line-height: 1.6;
  max-width: 30ch;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  padding-block: 1.5rem;
  border-top: 1px solid var(--color-rule);
}

.footer__copy {
  font-size: var(--text-sm);
  color: var(--color-slate);
  max-width: none;
  line-height: 1.4;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer__legal-link {
  font-size: var(--text-sm);
  color: var(--color-slate);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__legal-link:hover {
  color: var(--color-charcoal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-rule);
  color: var(--color-slate);
}

.footer__eho {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-charcoal);
}

.footer__disclaimer p {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-slate);
  max-width: 110ch;
}

@media (max-width: 960px) {
  .footer__main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* Phones: one centered column. The brand and its button lead; Explore runs
   as a single wrapping row of links; contact lines get the full width (so an
   email address never breaks mid-word); the Equal Housing mark sits above
   the disclaimer. */
@media (max-width: 600px) {
  .footer__main {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
    justify-items: center;
    text-align: center;
  }

  .footer__brand,
  .footer__col,
  .footer__list {
    align-items: center;
  }

  /* Narrow enough to break the five links 3 + 2, not 4 + 1 */
  .footer__col--explore .footer__list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.4rem;
    max-width: 17rem;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer__legal { justify-content: center; }

  .footer__disclaimer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}


/* ─────────────────────────────────────────────────────────────
   19. LEGAL PAGES (privacy, terms, cookies)
   ───────────────────────────────────────────────────────────── */

.legal-hero {
  padding-top: calc(var(--nav-height) + clamp(3.5rem, 8vw, 6rem));
  padding-bottom: clamp(3rem, 7vw, 5rem);
  position: relative;
  overflow: hidden;
  color: var(--color-charcoal);
  background-color: var(--color-sheet);
  background-image: var(--sheet-vignette), var(--sheet-grain);
}

.legal-hero__inner {
  position: relative;
  max-width: 860px;
}

.legal-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.legal-hero__eyebrow {
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
}

.legal-hero__divider {
  color: rgba(38, 44, 50, 0.3);
}

.legal-hero__updated {
  font-size: var(--text-sm);
  color: var(--color-slate);
}

.legal-hero__heading {
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--color-charcoal);
  margin-bottom: var(--space-md);
}

.legal-hero__heading em {
  color: var(--color-gold-deep);
}

.legal-hero__intro {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-slate);
  max-width: 56ch;
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(170px, 240px) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-md));
  align-self: start;
}

.legal-toc__label {
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-gold-deep);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-rule);
}

.legal-toc__list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.legal-toc__link {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-slate);
  text-decoration: none;
  padding: 0.5rem 0 0.5rem 0.9rem;
  border-left: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.legal-toc__link:hover {
  color: var(--color-charcoal);
}

.legal-toc__link.is-active {
  color: var(--color-charcoal);
  border-left-color: var(--color-gold);
  font-weight: 600;
}

.legal-sections {
  border-top: 1px solid var(--color-rule);
}

.legal-entry {
  position: relative;
  display: block;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-rule);
  scroll-margin-top: calc(var(--nav-height) + var(--space-md));
}

.legal-entry__content h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  color: var(--color-charcoal);
  margin-bottom: var(--space-sm);
}

.legal-entry__content p {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-slate);
  margin-bottom: var(--space-sm);
  max-width: 72ch;
}

.legal-entry__content p:last-child {
  margin-bottom: 0;
}

.legal-entry__content ul {
  margin-block: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.legal-entry__content li {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-slate);
  padding-left: 1.5rem;
  position: relative;
  max-width: 68ch;
}

.legal-entry__content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 9px;
  background-color: var(--color-gold);
  clip-path: var(--hex);
}

.legal-entry__content a {
  color: var(--color-charcoal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-gold);
  transition: text-decoration-color var(--transition-fast);
}

.legal-entry__content a:hover {
  text-decoration-color: var(--color-charcoal);
}

.legal-entry__content strong {
  font-weight: 600;
  color: var(--color-charcoal);
}

.legal-contact-link {
  display: inline-block;
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-charcoal);
  text-decoration: none;
  border-bottom: 2px solid var(--color-gold);
  padding-bottom: 0.1em;
  overflow-wrap: anywhere;
}

.legal-contact-link:hover {
  color: var(--color-gold-deep);
}

@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .legal-toc { display: none; }
}

@media (max-width: 768px) {
  .legal-entry { padding: var(--space-md) 0; }
}


/* ─────────────────────────────────────────────────────────────
   20. 404 PAGE
   ───────────────────────────────────────────────────────────── */

.not-found {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  background-color: var(--color-stone);
}

.not-found__inner {
  max-width: 620px;
  padding: var(--space-xl) 0;
}

.not-found__code {
  display: block;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: clamp(6rem, 18vw, 12rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-gold);
  margin-bottom: var(--space-md);
}

.not-found__heading {
  font-size: clamp(2.1rem, 5vw, 3.25rem);
  color: var(--color-charcoal);
  margin-bottom: var(--space-sm);
}

.not-found__body {
  font-size: var(--text-md);
  color: var(--color-slate);
  line-height: 1.65;
  max-width: 46ch;
  margin-bottom: var(--space-lg);
}

.not-found__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}


/* ─────────────────────────────────────────────────────────────
   21. VIDEO — portrait "poster" card (VideoFeature) + player
   (VideoModal). Behavior lives in /video.js (CSP-safe).
   ───────────────────────────────────────────────────────────── */

.video-feature {
  position: relative;
  width: min(100%, 330px);
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  overflow: hidden;
  background-color: var(--color-ink);
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
}

/* Hairline frame so the edge is defined on dark AND light sections */
.video-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(169, 174, 177, 0.35);
  pointer-events: none;
  z-index: 1;
}

.video-feature__still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Transparent click target over the whole frame. A <video> is interactive
   content, so it must NOT be nested inside the <button> — overlay instead. */
.video-feature__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  background: linear-gradient(to top, rgba(28, 32, 37, 0.55) 0%, rgba(28, 32, 37, 0) 45%);
  cursor: pointer;
  z-index: 2;
}

.video-feature__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 50%;
  background-color: var(--color-gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base), background-color var(--transition-fast);
}

.video-feature__play::before {
  content: '';
  display: block;
  margin-left: 0.3rem; /* optical centering */
  border-style: solid;
  border-width: 0.7rem 0 0.7rem 1.15rem;
  border-color: transparent transparent transparent var(--color-ink);
}

/* A slow pulse ring invites the tap */
.video-feature__play::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(211, 182, 124, 0.55);
  animation: video-pulse 2.4s var(--ease-out) infinite;
}

@keyframes video-pulse {
  0%   { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}

.video-feature__btn:hover .video-feature__play,
.video-feature__btn:focus-visible .video-feature__play {
  background-color: var(--color-gold-light);
  transform: translate(-50%, -50%) scale(1.06);
}

.video-feature__btn:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
}

.video-feature__label {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.2rem;
  z-index: 3;
  font-stretch: var(--label-stretch);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-paper);
  pointer-events: none;
}

/* Player overlay */
body.video-modal-open { overflow: hidden; }

.video-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.video-modal.is-open { display: flex; }

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(20, 23, 27, 0.94);
}

.video-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.video-modal__stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal__video {
  display: block;
  width: auto;
  height: auto;
  max-width: min(480px, 92vw);
  max-height: 88vh;
  object-fit: contain;
  background-color: #000;
  border-radius: 14px;
}

.video-modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 2;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(250, 249, 246, 0.22);
  background: transparent;
  color: var(--color-paper);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.video-modal__close:hover {
  background-color: rgba(250, 249, 246, 0.1);
  border-color: var(--color-gold);
}

.video-modal :focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .video-feature__play::after { animation: none; display: none; }
}


/* ─────────────────────────────────────────────────────────────
   SECTION SEAMS (src/components/SectionDivider.astro)
   A gold tape-measure rule on the boundary between sections — a
   solid line with ticks hanging off it (as on the page headers'
   edge) — parting around a gold medallion with the logo's hex nut.
   Reads on light and dark alike. Draws outward when scrolled to.
   ───────────────────────────────────────────────────────────── */

.seam {
  position: relative;
  z-index: 5;
  height: 0;
  pointer-events: none;
}

/* The rule + its ticks (tall every 120px, short every 24px), open in the
   middle for the medallion and fading out at the far edges */
.seam__line {
  --gap: 36px;
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 9px;
  background-image:
    linear-gradient(rgba(190, 155, 87, 0.95), rgba(190, 155, 87, 0.95)),
    repeating-linear-gradient(90deg, rgba(190, 155, 87, 0.75) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, rgba(190, 155, 87, 0.45) 0 1px, transparent 1px 24px);
  background-size: 100% 2px, 100% 9px, 100% 5px;
  background-position: 0 0, calc(50% + 60px) 0, calc(50% + 12px) 0;
  background-repeat: no-repeat, repeat-x, repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 calc(50% - var(--gap)), transparent calc(50% - var(--gap)), transparent calc(50% + var(--gap)), #000 calc(50% + var(--gap)), #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 calc(50% - var(--gap)), transparent calc(50% - var(--gap)), transparent calc(50% + var(--gap)), #000 calc(50% + var(--gap)), #000 93%, transparent 100%);
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1.5s var(--ease-out);
}

/* The medallion: solid gold, so it holds on any background, with a soft
   glow and the hex nut knocked out in paper */
.seam__badge {
  position: absolute;
  left: 50%;
  top: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #D6B677 0%, var(--color-gold) 55%, #A9853F 100%);
  box-shadow:
    0 0 0 4px rgba(190, 155, 87, 0.18),
    0 0 22px rgba(233, 200, 142, 0.5),
    0 4px 10px rgba(28, 32, 37, 0.18);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5) rotate(-90deg);
  transition: transform 0.9s var(--ease-out) 0.3s, opacity 0.5s var(--ease-out) 0.3s;
}

.seam__nut {
  width: 20px;
  height: 22px;
  fill: var(--color-paper);
}

.seam.reveal-fade--visible .seam__line  { clip-path: inset(0 0 0 0); }
.seam.reveal-fade--visible .seam__badge { opacity: 1; transform: translate(-50%, -50%); }

@media (scripting: none) {
  .seam__line  { clip-path: none; }
  .seam__badge { opacity: 1; transform: translate(-50%, -50%); }
}


/* ─────────────────────────────────────────────────────────────
   22. MOBILE REFINEMENTS
   Desktop is the reference. On phones every section's intro
   (eyebrow, title, short supporting line, its main action)
   centers, as do the page openers (hero, page and legal headers,
   404), the closing CTA band, and the footer. Running copy,
   lists, cards, and forms stay left-aligned for reading. The main
   action in a section spans the column.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Section intros, the split ones ("Recent work", "Current listings") too */
  .section-header,
  .page-header__inner {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }

  .section-header--split { justify-items: center; }
  .section-header__aside { align-items: center; }

  .section-header__sub,
  .page-header__intro {
    margin-inline: auto;
  }

  /* Text-and-media rows (the homepage team, About's video): the text
     centers above the media */
  .feature-row__content {
    align-items: center;
    text-align: center;
  }

  .team-pair__item,
  .team-pair__item + .team-pair__item {
    padding-inline: 0.75rem;
  }

  /* About: the brand statement's title (its story stays left) */
  .about-brand__heading { text-align: center; }

  /* Financing band: the pitch centers; its line items stay a list */
  .financing-band__inner > :first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Contact page: the intro over the details list */
  .contact-split__heading,
  .contact-split__body {
    text-align: center;
  }

  /* Legal pages and the 404 open centered, like every other page */
  .legal-hero__inner,
  .not-found__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }

  .legal-hero__meta,
  .not-found__actions {
    justify-content: center;
  }

  /* Listings: the filter pills and the count */
  .listings-filter { justify-content: center; }
  .listings-count { text-align: center; }

  /* The Fair Housing notice reads like the footer's: mark above, centered */
  .fair-housing__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Listing detail: the way back sits under the seam's medallion */
  .listing-detail__back .container { text-align: center; }

  /* The main action in a section spans the column */
  .feature-row__content .btn-primary,
  .financing-band__cta,
  .contact-strip__actions .btn-primary {
    width: 100%;
    max-width: 26rem;
  }

  .contact-strip__inner {
    align-items: center;
    text-align: center;
  }

  .contact-strip__heading { margin-inline: auto; }

  .contact-strip__actions {
    align-items: center;
    width: 100%;
  }

  .contact-strip__sub { text-align: center; }

  .card-listing__body { padding: 1.5rem 1.25rem; }
  .card-listing__specs { --spec-gap: 1rem; }

  .card-listing__footer {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  /* Stack label above value so long emails/phones get the full width */
  .contact-detail {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

@media (max-width: 480px) {
  /* The closing band's heading wraps on its own (its authored line break
     strands a word on a phone), and its full-width button drops the arrow
     so the label fits one line, like the financing band's */
  .contact-strip__heading br { display: none; }
  .contact-strip__actions .btn-primary span[aria-hidden="true"] { display: none; }
}