/* OEM Properties Site Styles.
   Plain CSS, no build step. Mobile-first.
*/

:root {
  /* Typography scale — TIGHTENED in Round 1 for B2B housing services feel */
  --oem-h1: 2.5rem;
  --oem-h1-mobile: 1.75rem;
  --oem-h2: 1.875rem;
  --oem-h2-mobile: 1.5rem;
  --oem-h3: 1.25rem;
  --oem-h3-mobile: 1.125rem;
  --oem-body: 1.0625rem;
  --oem-body-large: 1.125rem;
  --oem-body-small: 0.9375rem;
  --oem-eyebrow: 0.8125rem;

  /* Line heights */
  --oem-lh-tight: 1.15;
  --oem-lh-snug: 1.3;
  --oem-lh-relaxed: 1.5;

  /* Spacing block/element tokens. */
  --oem-space-block: 3rem;
  --oem-space-element: 1.5rem;

  /* Standardized section padding (mobile / desktop) + header gaps. Every normal
     content section and section-header gap routes through these. */
  --oem-section-pad-y: 4rem;       /* mobile  content section top/bottom (64px) */
  --oem-section-pad-y-lg: 6rem;    /* desktop content section top/bottom (96px) */
  --oem-gap-eyebrow: 0.75rem;      /* eyebrow → heading */
  --oem-gap-heading: 0.75rem;      /* heading → lead/body */
  --oem-gap-header: 2rem;          /* .section-header block → content */
  --oem-gap-lead: 1.5rem;          /* lead → content/buttons */

  /* Brand colors */
  --oem-white: #ffffff;
  --oem-off-white: #faf8f4;
  --oem-beige: #f7f4ef;
  --oem-pale-blue: #eef5fd;
  --oem-columbia: #a0c3f0;
  --oem-steel: #698bc5;
  --oem-eyebrow-ink: #557099;   /* accessible steel for eyebrow text on light (WCAG AA) */
  --oem-text: #1b1b20;
  --oem-text-muted: #6b6b73;
  --oem-logo-red: #f4042d;
  --oem-divider: rgba(27, 27, 32, 0.08);

  /* Shadows */
  --oem-card-shadow: 0 20px 48px rgba(27, 27, 32, 0.08);
  --oem-card-shadow-soft: 0 4px 16px rgba(27, 27, 32, 0.04);

  /* Eyebrow */
  --oem-eyebrow-spacing: 0.12em;
  --oem-eyebrow-weight: 500;

  /* Layout */
  --radius: 12px;
  --radius-lg: 16px;
  --ease: .2s ease;
  --container: 1200px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Explicit html background so the brief cross-document repaint frame between
   pages is brand-beige, not browser-default white. The body bg below covers it
   on-page; html only shows during navigation between separate documents. */
html { scroll-behavior: smooth; background-color: var(--oem-beige); }
body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--oem-body);
  line-height: var(--oem-lh-relaxed);
  color: var(--oem-text);
  background: var(--oem-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Note: @view-transition { navigation: auto } was tried but conflicted with
   the per-element .fade-in float-in on hero content — Chromium snapshots the
   new page before the IntersectionObserver fires, so the crossfade would
   reveal opacity:0 heroes and then they'd float in = double-animation flicker.
   Reverted to instant nav; the html beige bg above kills the white flash, and
   each fresh page load gets its own clean hero float-in via .fade-in. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Text-align utility used in a few spots. */
.text-center { text-align: center; }

/* Screen-reader-only utility: visually hidden but exposed to AT.
   Used for headings that anchor a section semantically without taking
   visible space (e.g. above tab panels where the visible label IS the tabs). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Layout helpers */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 2rem; }
@media (max-width: 600px) { .container { padding: 0 1.25rem; } }

/* Backgrounds — single source of truth for section bg classes */
.bg-white { background: var(--oem-white); }
.bg-beige { background: var(--oem-beige); }
.bg-pale-blue { background: var(--oem-pale-blue); }

/* Typography */
.eyebrow {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: var(--oem-eyebrow);
  letter-spacing: var(--oem-eyebrow-spacing);
  text-transform: uppercase;
  color: var(--oem-eyebrow-ink);
  margin: 0 0 var(--oem-gap-eyebrow) 0;  /* unified eyebrow→headline gap sitewide */
  display: inline-block;
}
.hero-section .eyebrow,
.empathy-fullbleed .eyebrow,
.section--service-preview .eyebrow,
.hero--housing-fullwidth .eyebrow,
.hero--service-areas-fullwidth .eyebrow,
.hero--partners-fullwidth .eyebrow {
  color: rgba(255, 255, 255, 0.88);
}

.h-hero {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: var(--oem-h1-mobile);
  line-height: var(--oem-lh-tight);
  letter-spacing: -0.02em;
  color: var(--oem-text);
  margin: 0 0 var(--oem-gap-heading) 0;
  text-wrap: balance;
}
@media (min-width: 900px) { .h-hero { font-size: var(--oem-h1); } }
/* Removed: white-space: nowrap at 1100px+ was causing headline jumps when
   zooming and overflow when headlines were close to the threshold. H1s now
   wrap naturally with text-wrap: balance at all widths. */

.h-section {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: var(--oem-h2-mobile);
  line-height: var(--oem-lh-snug);
  letter-spacing: -0.02em;
  color: var(--oem-text);
  margin: 0 0 var(--oem-gap-heading) 0;
  text-wrap: balance;
}
@media (min-width: 900px) { .h-section { font-size: var(--oem-h2); } }

.h-final {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: var(--oem-h2-mobile);
  line-height: var(--oem-lh-snug);
  letter-spacing: -0.02em;
  color: var(--oem-text);
  margin: 0 0 var(--oem-gap-heading) 0;
  text-wrap: balance;
}
@media (min-width: 900px) { .h-final { font-size: var(--oem-h2); } }

.lead {
  font-size: var(--oem-body);
  line-height: var(--oem-lh-relaxed);
  color: var(--oem-text-muted);
  margin: 0 0 var(--oem-gap-lead) 0;
  max-width: 60ch;
}
@media (min-width: 900px) { .lead { font-size: var(--oem-body-large); } }

/* Buttons (Phase 3: pill shape, locked specs) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0.875rem 1.75rem;
  border-radius: 14px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  border: 1.5px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  text-align: center;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.btn:focus-visible {
  outline: 2px solid var(--oem-steel);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--oem-text);
  color: var(--oem-white);
}
.btn-primary:hover { background: #000; }
.btn-secondary {
  background: transparent;
  color: var(--oem-text);
  border-color: var(--oem-text);
}
.btn-secondary:hover { background: var(--oem-beige); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.text-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 15px;
  color: var(--oem-text);
  border-bottom: 1.5px solid var(--oem-steel);
  padding-bottom: 2px;
  font-weight: 500;
  transition: border-bottom-color var(--ease), color var(--ease);
}
.text-link:hover {
  border-bottom-color: var(--oem-text);
  color: var(--oem-text);
}

/* Header (white, solid, logo blends seamlessly on left) */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.80);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* Clean, clear separation from the page while staying white-transparent. */
  border-bottom: 1px solid rgba(27, 27, 32, 0.10);
  box-shadow: 0 4px 16px rgba(27, 27, 32, 0.05);
  z-index: 50;
  transition: box-shadow var(--ease);
}
.site-header.scrolled { box-shadow: 0 4px 18px rgba(27,27,32,.09); }
/* Header brand: STACKED red-icon over "OEM PROPERTIES" Bebas wordmark.
   Mirrors footer brand lockup exactly (same font, weight, size, letter-spacing). */
.site-header .logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.header-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 88px;
  transition: height var(--ease);
}
.site-header.scrolled .header-inner { height: 76px; }
@media (min-width: 1024px) {
  .header-inner { height: 96px; }
  .site-header.scrolled .header-inner { height: 84px; }
}

.nav-desktop { display: none; }
.nav-desktop a {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: rgba(27, 27, 32, 0.72);
  padding: 12px 18px;
  border-radius: 8px;
  position: relative;
  transition: color var(--ease);
}
.nav-desktop a:hover,
.nav-desktop a:focus-visible,
.nav-desktop a.is-active { color: var(--oem-text); }
/* Soft underline on hover + persistent on the current page's link.
   Steel-blue accent instead of full dark — calmer, less tab-indicator. */
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 4px;
  height: 1.5px;
  background: var(--oem-text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
  pointer-events: none;
}
.nav-desktop a:hover::after,
.nav-desktop a:focus-visible::after,
.nav-desktop a.is-active::after {
  transform: scaleX(1);
}

.header-cta.btn {
  min-height: 40px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
}

/* Header right cluster: Contact Us button + hamburger sit together */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Below desktop breakpoint: hide the Contact Us primary button; hamburger only */
@media (max-width: 1099px) {
  .header-right .header-cta { display: none; }
}

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--oem-divider);
  border-radius: 10px;
  margin-left: 8px;
  color: var(--oem-text);
}
.hamburger svg { width: 22px; height: 22px; }

@media (min-width: 1100px) {
  .nav-desktop { display: flex; align-items: center; gap: 8px; }
  .hamburger { display: none; }
  .header-cta.btn { min-height: 44px; padding: 14px 26px; font-size: 15px; }
}

/* Mobile menu — half-width frosted drawer slides in from the right. Closed
   state is visibility: hidden so tab-focus skips it. Backdrop element below
   handles the dim + click-outside-to-close. */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  min-width: 260px;
  max-width: 480px;
  background: rgba(255, 255, 255, 0.55);
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 20px;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
}
/* Gate the blur layer behind .open so it's only allocated when the drawer is visible. */
.mobile-menu.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.3s ease, visibility 0s linear 0s;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.mobile-menu-top {
  display: flex; align-items: center; justify-content: flex-end;
  min-height: 56px;
}
.mobile-menu-top .logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.mobile-menu-top .logo img {
  height: 32px;
  width: auto;
  filter: none;
}
.mobile-menu-top .logo-wordmark {
  font-family: "Bebas Neue", "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  color: var(--oem-text);
  line-height: 1;
}
.mobile-menu-close {
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--oem-divider);
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--oem-text);
  cursor: pointer;
}
.mobile-menu-close svg { width: 22px; height: 22px; }
.mobile-menu nav {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 24px;
}
.mobile-menu nav a {
  font-size: 22px; font-weight: 500;
  padding: 16px 8px;
  border-bottom: 1px solid var(--oem-divider);
  color: var(--oem-text);
}
.mobile-menu .btn { margin-top: 24px; align-self: flex-start; width: 185px; max-width: 100%; }
/* Two stacked CTAs (Request Housing primary + Contact Us secondary): keep 24px above the pair, tighten between. */
.mobile-menu .btn + .btn { margin-top: 12px; }

/* Dim backdrop sits behind the drawer; click closes the menu. */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 27, 32, 0.30);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-menu-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu-backdrop { transition: none; }
}

/* Homepage hero (full-width image background, image leads, white text).
   Pulled up under the sticky frosted header so the header overlays the hero.
   Negative margin = unscrolled header height (mobile 72px / desktop 80px);
   padding-top absorbs that so hero content sits in roughly the same spot. */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 520px;
  background-color: var(--oem-off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: -88px;
  padding: calc(88px + 56px) 24px 56px;
  overflow: hidden;
}
/* Image layer — filter scoped here so it never touches the scrim or text. */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/southern-cali.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.1) brightness(1.08);
  opacity: 0.92;
  z-index: 0;
}
/* Scrim layer — directional left-heavy gradient, dark only behind text. */
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Dark only behind the centered text; the rest of the photo stays clear. */
  background: radial-gradient(
    ellipse 74% 66% at center,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.44) 48%,
    rgba(0, 0, 0, 0.00) 80%
  );
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 840px;
  margin: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .hero-section {
    min-height: 680px;
    margin-top: -96px;
    padding: calc(96px + 64px) 40px 64px;
  }
}
.hero-content .eyebrow {
  color: rgba(255,255,255,0.92);
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
}
.hero-description {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  margin: 0 0 var(--oem-gap-lead);
  max-width: none;
  white-space: normal;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.9),
    0 0 14px rgba(0, 0, 0, 0.6),
    0 0 28px rgba(0, 0, 0, 0.45);
}
@media (min-width: 900px) {
  .hero-description { font-size: 18px; }
}
/* Hero buttons: clear hierarchy on the dark photo. Primary = solid white
   pill with dark text (the focal CTA). Secondary = ghost outline (still
   visible, deliberately quieter). */
.hero-section .btn-row {
  /* hero-description already provides its own bottom margin (2.25rem); the
     default .btn-row margin-top: 28px stacks on top of that and feels loose. */
  margin-top: 0;
}
.hero-section .btn {
  font-weight: 500;
  border-width: 1px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}
.hero-section .btn-primary {
  background: var(--oem-white);
  color: var(--oem-text);
  border-color: var(--oem-white);
  box-shadow: 0 10px 28px rgba(0,0,0,0.24);
}
.hero-section .btn-primary:hover {
  background: var(--oem-beige);
  border-color: var(--oem-beige);
  color: var(--oem-text);
}
.hero-section .btn-secondary {
  background: transparent;
  color: var(--oem-white);
  border-color: var(--oem-white);
  backdrop-filter: blur(3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}
.hero-section .btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--oem-white);
  color: var(--oem-white);
}

/* Scroll-in fade. Default is VISIBLE so content survives a JS failure — the
   hidden state is gated behind .js (set by forms.js the moment it loads). Once
   the IntersectionObserver adds .is-visible, the element transitions in. */
.fade-in { opacity: 1; transform: none; }
.js .fade-in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}
.js .fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in.delay-1 { transition-delay: 0ms; }
.fade-in.delay-2 { transition-delay: 150ms; }
.fade-in.delay-3 { transition-delay: 300ms; }
.fade-in.delay-4 { transition-delay: 450ms; }
.fade-in.delay-5 { transition-delay: 600ms; }
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Generic hero (non-homepage pages). Padding matches global section rhythm
   so every page feels equally "zoomed" relative to each other. */
.hero {
  padding: 2.5rem 0;
  background: var(--oem-white);
}
@media (min-width: 768px) {
  .hero { padding: 3.5rem 0; }
}
/* Forms */
.form-wrap {
  background: var(--oem-white);
  border: 1px solid var(--oem-divider);
  border-radius: var(--radius-lg);
  padding: 28px 28px 20px;
  box-shadow: var(--oem-card-shadow);
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 768px) { .form-wrap { padding: 40px 40px 28px; } }
.form-grid {
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 768px) {
  .form-grid { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .form-grid .full { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 500; color: var(--oem-text); }
.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 16px;
  /* Cap the line box so text <input>s can't grow past min-height the way a
     <select> clamps to it — keeps inputs and selects the exact same height
     (otherwise Inter's tall default line-height makes inputs a few px taller
     and the select reads "thinner"). textarea re-sets line-height below. */
  line-height: 1.25;
  color: var(--oem-text);
  background: var(--oem-white);
  border: 1px solid var(--oem-divider);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--oem-eyebrow-ink);
  outline-offset: 1px;
  border-color: var(--oem-eyebrow-ink);
  box-shadow: 0 0 0 3px rgba(85,112,153,0.18);
}
/* Windows High Contrast / forced-colors mode can't see custom shadow rings;
   restore a real outline so keyboard focus is visible in that environment. */
@media (forced-colors: active) {
  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }
}
.field .err { color: #8a1f1f; font-size: 13px; margin-top: 4px; display: none; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #8a1f1f; }
.field.has-error .err { display: block; }

/* ---- Custom date picker (js/forms.js) -----------------------------------
   Brands the calendar so it matches the form; the native date popup can't be
   styled. The field stays a native <input type="date"> until JS upgrades it. */
.dp-wrap { position: relative; width: 100%; }
.dp-input { cursor: pointer; padding-right: 44px; }
.dp-toggle {
  position: absolute; top: 0; right: 0; height: 100%; width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; color: var(--oem-steel); cursor: pointer;
}
.dp-toggle svg { width: 20px; height: 20px; }
.dp-calendar {
  position: absolute; z-index: 50; top: calc(100% + 6px); left: 0;
  width: 304px; max-width: calc(100vw - 3rem);
  background: var(--oem-white); border: 1px solid var(--oem-divider);
  border-radius: 14px; box-shadow: var(--oem-card-shadow); padding: 14px;
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-title { font-weight: 600; font-size: 15px; color: var(--oem-text); }
.dp-nav {
  width: 34px; height: 34px; border: 0; border-radius: 8px; background: none;
  color: var(--oem-text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--ease);
}
.dp-nav:hover { background: var(--oem-pale-blue); }
.dp-nav svg { width: 18px; height: 18px; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow { font-size: 12px; font-weight: 600; color: var(--oem-text-muted); text-align: center; padding: 4px 0; }
.dp-empty { height: 38px; }
.dp-day {
  appearance: none; -webkit-appearance: none; border: 0; background: none;
  font: inherit; font-size: 14px; color: var(--oem-text); cursor: pointer;
  height: 38px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--ease), color var(--ease);
}
.dp-day:hover:not([disabled]) { background: var(--oem-pale-blue); }
.dp-day:focus-visible { outline: 2px solid var(--oem-eyebrow-ink); outline-offset: 1px; }
.dp-day[disabled] { color: #c5c8cf; cursor: default; }
.dp-day.is-today { box-shadow: inset 0 0 0 1px var(--oem-steel); }
.dp-day.is-selected,
.dp-day.is-selected:hover { background: var(--oem-text); color: #fff; }
.privacy-note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--oem-text-muted);
  background: var(--oem-beige);
  border-radius: 10px;
  padding: 14px 16px;
}
.form-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form-success {
  display: none;
  background: var(--oem-white);
  border: 1px solid var(--oem-divider);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin: 0 auto;
  max-width: 760px;
  text-align: center;
  box-shadow: var(--oem-card-shadow-soft);
}
/* Gentle float-in when the success block reveals so it matches the rest of
   the site's float-in cadence instead of snapping. */
.form-success.show {
  display: block;
  animation: formSuccessIn 500ms ease both;
}
@keyframes formSuccessIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .form-success.show { animation: none; }
}
.form-success h3 { margin: 0 0 8px; font-size: 20px; color: var(--oem-text); font-weight: 600; }
.form-success p { margin: 0; color: var(--oem-text-muted); }
.form-error {
  display: none;
  margin-top: 14px;
  color: #8a1f1f;
  font-size: 14px;
}
.form-error.show { display: block; }

.section.bg-pale-blue { background: var(--oem-pale-blue); }

/* Contact page cards */
.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 880px;
  margin: 0 auto;
}
@media (min-width: 768px) { .contact-cards { grid-template-columns: 1fr 1fr; gap: 24px; } }
.contact-card {
  background: var(--oem-white);
  border: 1px solid var(--oem-divider);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* hover lift + transition are handled by the unified card rule below */
}
.contact-card .icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--oem-beige);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--oem-text);
  margin-bottom: 4px;
}
.contact-card .icon svg { width: 22px; height: 22px; }
.contact-card .label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oem-text-muted);
}
.contact-card .value {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--oem-text);
}

/* Footer — frosted white panel with dark text, Bebas Neue wordmark, Helvetica
   uppercase tagline. Red icon stays red on the light bg. A dark copyright
   strip sits flush beneath the columns. */
.site-footer {
  /* Solid warm off-white panel — deliberately a different surface than the
     white frosted header, so the footer reads as its own zone (clear
     separation). Hairline + soft shadow mark the seam. */
  background: #f6f6f4;
  color: var(--oem-text);
  border-top: 1px solid rgba(27, 27, 32, 0.08);
  box-shadow: 0 -4px 16px rgba(27, 27, 32, 0.03);
  padding: 16px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 18px;
}
.footer-brand, .footer-contact { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
  .footer-brand, .footer-contact { grid-column: auto; }
}
@media (max-width: 767px) {
  .footer-grid { max-width: 340px; margin-left: auto; margin-right: auto; }
  /* Hairline dividers between the brand, contact, and pages/actions sections. */
  .footer-brand, .footer-contact { border-bottom: 1px solid var(--oem-divider); padding-bottom: 22px; }
}
/* Contact rows: small leading icon + text. */
.footer-contact ul { gap: 14px; }
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer-contact a svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.footer-brand .footer-description {
  color: rgba(27, 27, 32, 0.72);
  font-size: 14px;
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}
.footer-col h4 {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(27, 27, 32, 0.62);
  margin: 0 0 10px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a {
  color: var(--oem-text);
  font-size: 15px;
  transition: opacity var(--ease);
}
.footer-col a:hover { opacity: 0.65; }
.footer-bottom-strip {
  /* Thin dark copyright bar at the very bottom (full-width). Softer than pure
     --oem-text so it reads lighter. */
  background: #2a2a32;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 34px;
  padding: 14px 0;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  text-align: center;
}
.footer-bottom-strip p { margin: 0; }

/* ── REAL LOGO ASSETS ─────────────────────────────────────────── */

/* HEADER — icon + wordmark on white; width-driven; no shadow */
.site-header .logo img,
.site-header .logo-img { width:124px; height:auto; background:transparent; transition:width var(--ease); }
@media (min-width:1024px){ .site-header .logo img,.site-header .logo-img{ width:150px; } }
.site-header.scrolled .logo img,.site-header.scrolled .logo-img{ width:112px; }
@media (min-width:1024px){ .site-header.scrolled .logo img,.site-header.scrolled .logo-img{ width:138px; } }

/* HERO — white lockup, centered (620px on laptops); shadow for legibility on photo */
.hero-logo{ display:block; width:min(70vw,290px); height:auto; margin:0 auto 0.9rem;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5)) drop-shadow(0 0 22px rgba(0,0,0,0.4)); }
@media (min-width:768px){ .hero-logo{ width:min(54vw,465px); } }

/* hero stack centered + WHITE supporting text */
.hero-content{ text-align:center; margin-left:auto; margin-right:auto; }
.hero-content .eyebrow{ color:rgba(255,255,255,0.90); margin-bottom:var(--oem-gap-eyebrow); }
.hero-content .hero-description{
  font-size:16px; line-height:1.45; font-weight:500;
  max-width:none; margin:18px auto 22px;
  white-space:nowrap; text-wrap:balance;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.8), 0 0 14px rgba(0,0,0,0.6); }
/* Below ~900px the one-line sentence would overflow, so let it wrap there. */
@media (max-width:900px){
  .hero-content .hero-description{ white-space:normal; max-width:560px; } }
.hero-content .btn-row{ justify-content:center; margin-top:10px; }

/* Mobile hero: taller, airier, stacked CTAs. Content is vertically centered but
   biased downward so it sits just BELOW the visible center (luxury feel). The
   top padding offsets the 88px the sticky header overlaps, plus a nudge. */
@media (max-width: 767px) {
  .hero-section {
    align-items: center;
    min-height: 740px;
    padding-top: calc(88px + 156px);
    padding-bottom: 72px;
  }
  .hero-content .hero-description {
    max-width: 310px;
    margin: 28px auto 48px;
  }
  .hero-content .btn-row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 22px;
    margin-top: 0;
  }
  .hero-section .btn-row .btn {
    width: 270px;
    min-height: 54px;
  }
}

/* FOOTER — full logo sits flat on the solid footer (no drop-shadow, so it
   doesn't read as a floating element) */
.footer-logo{ display:block; width:126px; height:auto; margin-bottom:0.65rem; }
@media (min-width:768px){ .footer-logo{ width:200px; } }

/* Form-type toggle (Partners page) */
.form-tabs {
  display: flex;
  gap: 6px;
  background: #ece7df;
  border: 1px solid rgba(27, 27, 32, 0.05);
  border-radius: 12px;
  padding: 5px;
  max-width: 520px;
  margin: 0 auto 28px;
}
.form-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 11px;
  background: #f5f2ee;
  border: none;
  border-radius: 9px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--oem-text-muted);
  cursor: pointer;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
  text-align: center;
  line-height: 1.3;
}
.form-tab[aria-selected="true"] {
  background: #1b1b20;
  color: var(--oem-white);
  box-shadow: 0 1px 4px rgba(27, 27, 32, 0.16);
}
.form-tab:not([aria-selected="true"]):hover {
  background: #efebe4;
  color: var(--oem-text);
}
.form-tab:focus-visible {
  outline: 2px solid var(--oem-steel);
  outline-offset: 2px;
}
@media (min-width: 600px) {
  .form-tab { font-size: 14px; padding: 10px 22px; min-height: 42px; }
}

.form-panel { display: none; }
.form-panel.is-active { display: block; }

/* Reusable section + form utility classes (Partners polish round).
   Replace ad-hoc inline styles with these so spacing stays consistent. */
.section-header {
  text-align: center;
  margin-bottom: var(--oem-gap-header);
}
.section-header .h-section,
.section-header .h-final,
.section-header .lead {
  margin-left: auto;
  margin-right: auto;
}
.section-header--compact {
  margin-bottom: var(--oem-gap-header);
}
.justify-center {
  justify-content: center;
}
.form-heading {
  margin-bottom: var(--oem-gap-heading);
}
/* Form-context override: an H3 with .h-section inside a form-wrap or the
   partners-form-card reads smaller than a page-level section H2. Keeps the
   global heading scale unchanged. */
.form-wrap .h-section.form-heading,
.partners-form-card .h-section.form-heading {
  font-size: 1.375rem;
  line-height: 1.3;
  margin-bottom: var(--oem-gap-heading);
}
@media (min-width: 900px) {
  .form-wrap .h-section.form-heading,
  .partners-form-card .h-section.form-heading {
    font-size: 1.625rem;
  }
}
.form-subtitle {
  margin: 0 0 var(--oem-gap-lead);
  color: var(--oem-text-muted);
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.45;
}
.muted-inline {
  color: var(--oem-text-muted);
  font-weight: 400;
}
.form-success-spaced {
  margin-top: 24px;
}
.form-helper-note {
  margin-top: 8px;
  font-size: var(--oem-body-small);
  color: var(--oem-text-muted);
}

/* Drag-and-drop photo upload */
.dropzone {
  position: relative;
  border: 2px dashed var(--oem-divider);
  background: var(--oem-beige);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-align: center;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}
.dropzone:hover,
.dropzone.is-dragover {
  background: var(--oem-beige);
  border-color: var(--oem-text);
}
.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.dropzone .dz-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--oem-white);
  margin-bottom: 6px;
  color: var(--oem-text);
}
.dropzone .dz-icon svg { width: 19px; height: 19px; }
.dropzone .dz-title {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--oem-text);
  margin: 0 0 4px;
}
.dropzone .dz-sub {
  font-size: 13px;
  color: var(--oem-text-muted);
  opacity: 0.85;
  margin: 0;
}
.dropzone .dz-files {
  margin-top: 14px;
  font-size: 13px;
  color: var(--oem-text);
  font-weight: 500;
}
.dropzone .dz-files:empty { display: none; }
/* ====================================================================
   PHASE 2: Page content rebuild styles
   ==================================================================== */

/* Icon-led value items (Why Choose OEM) */
.value-icon-grid {
  display: grid;
  /* clean breakpoints that divide evenly: 1 (mobile) -> 2 -> 4, never orphans */
  grid-template-columns: 1fr;
  gap: 2.5rem 2rem;
  margin-top: var(--oem-space-block);
}
@media (min-width: 600px) { .value-icon-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .value-icon-grid { grid-template-columns: repeat(4, 1fr); } }
.value-icon-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
/* Icon sits in a soft pale-blue round badge (mirrors the How It Works number
   badge): blue icon on pale-blue, an intentional exception to the otherwise
   monochrome homepage icon set. */
.value-icon-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--oem-pale-blue);
  margin: 0 0 16px;
  box-shadow: 0 0 28px rgba(105, 139, 197, 0.10);
}
.value-icon-item .value-icon {
  width: 30px;
  height: 30px;
  color: var(--oem-steel);
  margin: 0;
  stroke-width: 1.75;
}
.value-icon-item h3 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--oem-text);
  margin: 0 0 14px;
}
.value-icon-item p {
  font-size: 16px;
  line-height: 1.65;
  color: #5F6673;
  margin: 0;
  max-width: 34ch;
}

/* Card variant: premium white card — soft border, generous radius/padding, a
   soft elevated shadow. */
.value-icon-grid--cards { gap: 1.5rem; }
.value-icon-grid--cards .value-icon-item {
  background: #FFFFFF;
  border: 1px solid #EEF2F6;
  border-radius: 24px;
  padding: 30px 30px;
  box-shadow: 0 14px 36px rgba(27, 27, 32, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.value-icon-grid--cards .value-icon-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(27, 27, 32, 0.12);
}
.value-icon-grid--cards .value-icon-item p { max-width: 34ch; }

/* How It Works sits on a soft pale-blue panel (informational accent, ties to the
   number badges); white cards lift off it. */
.section--how-it-works { background: var(--oem-pale-blue); }

/* How It Works — stacked horizontal step cards: number left, subtle vertical
   divider, then title + line on the right. Single column at every width. */
.step-grid--v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 820px;
  margin-top: 2.5rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
/* Subtle vertical connector linking the step number badges into a timeline.
   It runs the full grid height behind the opaque white cards, so it's only
   visible as short segments in the gaps between cards. left = badge center. */
.step-grid--v2::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 70px;
  width: 2px;
  background: rgba(105, 139, 197, 0.35);
  z-index: 0;
}
.step-v2 {
  background: #FFFFFF;
  border: 1px solid #EEF2F6;
  border-radius: 24px;
  padding: 26px 32px;
  box-shadow: 0 16px 40px rgba(27, 27, 32, 0.09);
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 1.75rem;
  min-height: 108px;
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.step-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 52px rgba(27, 27, 32, 0.12);
}
/* Number sits in a soft pale-blue round badge, with a thin vertical divider
   before the text (per the reference). */
.step-v2 .step-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--oem-pale-blue);
  color: var(--oem-steel);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 30px rgba(105, 139, 197, 0.12);
}
.step-v2 .step-text {
  flex: 1;
  min-width: 0;
  border-left: 1px solid #E8ECF1;
  padding-left: 2rem;
}
.step-v2 h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--oem-text);
  margin: 0 0 0.55rem;
}
.step-v2 p {
  font-family: "Inter", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #5F6673;
  margin: 0;
  max-width: 54ch;
}

/* Mobile: "What we provide" stacks one full-width card per row so the titles
   fit on one line; smaller badge/icon/type per the premium spec. */
@media (max-width: 599px) {
  .value-icon-grid { gap: 1rem; }
  .value-icon-grid--cards { gap: 1rem; }
  .value-icon-grid--cards .value-icon-item { padding: 24px; border-radius: 20px; }
  .value-icon-badge { width: 56px; height: 56px; margin-bottom: 18px; }
  .value-icon-item .value-icon { width: 24px; height: 24px; }
  .home-page .value-icon-grid--cards .value-icon-item h3 { font-size: 1.25rem; line-height: 1.2; margin-bottom: 12px; }
  .value-icon-item p { font-size: 15px; line-height: 1.6; max-width: 100%; }
}

/* Pathway cards (Phase 2: clean white cards with shadow lift) */
.pathway-grid {
  display: grid;
  /* 3-card row: 1 (mobile) -> 3 (desktop), skipping the 2-col stage that orphans */
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: var(--oem-space-block);
}
/* 3-up from 900px (matches the "Why we do it" 3-card grid) so tablets don't
   show a single tall stacked column. */
@media (min-width: 900px) { .pathway-grid { grid-template-columns: repeat(3, 1fr); } }
.pathway-grid .card {
  background: var(--oem-white);
  border: 1px solid var(--oem-divider);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: var(--oem-card-shadow-soft);
  transition: transform var(--ease), box-shadow var(--ease);
  display: flex;
  flex-direction: column;
}
.pathway-grid .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--oem-card-shadow);
}
.pathway-grid .card h3 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--oem-text);
  margin: 0 0 0.5rem;
}
.pathway-grid .card p {
  font-size: var(--oem-body-small);
  line-height: var(--oem-lh-relaxed);
  color: var(--oem-text-muted);
  margin: 0 0 1.5rem;
}
.pathway-grid .card .btn { margin-top: auto; align-self: flex-start; }

/* Homepage Get in Touch image-background cards (Round 1):
   Image fills top ~60% of card, white text panel overlaps image bottom by
   ~16px. Card lifts + image zooms on hover. H3 clamped to one line. */
.card.card--image-bg {
  background: var(--oem-white);
  border: none;
  border-radius: 16px;
  box-shadow: var(--oem-card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  transition: transform var(--ease), box-shadow var(--ease);
}
.card.card--image-bg:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px rgba(27, 27, 32, 0.12);
}
.card.card--image-bg .card-image {
  position: relative;
  flex: 0 0 auto;
  height: 230px;
  aspect-ratio: auto;
  overflow: hidden;
  /* Inset the photo so the card's white bg frames it on the top + sides;
     round + clip at its own container (translateZ(0) gives a clean clip layer
     so the hover-scaled <img> can't escape the corners). */
  margin: 14px 14px 0;
  border-radius: 14px;
  transform: translateZ(0);
  background: var(--oem-beige);
}
.card.card--image-bg .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Round the <img> itself — object-fit images don't reliably honor an
     ancestor's border-radius clip in WebKit, so do it on the image. */
  border-radius: 14px;
  transition: transform 0.4s ease;
}
.card.card--image-bg:hover .card-image img {
  transform: scale(1.03);
}
.card.card--image-bg .card-panel {
  background: var(--oem-white);
  padding: 14px 24px 22px;
  margin-top: 0;
  position: relative;
  z-index: 2;
  border-radius: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.card.card--image-bg .card-panel h3 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--oem-text);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}
.card.card--image-bg .card-panel p {
  color: #4a4a52;
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.5;
  max-width: 100%;
}
/* On-brand icon badge above each card heading (steel on pale-blue, matching
   the What We Provide cards + proof points). */
.card.card--image-bg .card-panel .pathway-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f2e9d6;   /* warm cream circle */
  color: #b08d44;        /* muted gold icon (this section only) */
  margin: 0 0 10px;
}
.card.card--image-bg .card-panel .pathway-icon svg { width: 24px; height: 24px; }

/* Push the CTA to the bottom of each (equal-height) card so the buttons line
   up across all three; the button hugs its label with the arrow just after it
   (no stretched full-width gap). */
.card.card--image-bg .card-panel .btn {
  align-self: center;
  margin-top: auto;
  justify-content: center;
  gap: 0.6rem;
}
/* Arrow sizing shared by the How-can-we-help CTAs and the Who-we-work-with button. */
.btn-arrow {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
/* Strengthen the outlined CTAs on these cards (Partner With Us / Submit Property)
   while keeping the first card (Request Housing) dark-filled. */
.card.card--image-bg .card-panel .btn-secondary {
  border: 1.5px solid var(--oem-text);
  background: #ffffff;
  color: var(--oem-text);
}
.card.card--image-bg .card-panel .btn-secondary:hover {
  background: var(--oem-text);
  color: #ffffff;
}
@media (max-width: 768px) {
  .card.card--image-bg .card-image { height: 225px; }
  .card.card--image-bg .card-panel { padding: 14px 22px 22px; }
}

/* Homepage Emotional Anchor — true full-bleed photo band: runs edge-to-edge and
   sits flush against the sections above/below (no warm band, no contained card,
   no margins/shadow), with the text overlaid on the image. */
.empathy-fullbleed {
  position: relative;
  width: 100%;
  padding: 0;
}
.empathy-card {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  height: 480px;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@media (min-width: 768px) {
  .empathy-card { height: 500px; }
}
@media (min-width: 1024px) {
  .empathy-card { height: 580px; }
}
.empathy-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(1.05);
  z-index: 1;
}
/* Left-weighted dark gradient for white-text legibility — no warm top fade now
   that the band is a clean edge-to-edge photo (crisp seams like the reference). */
.empathy-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(27, 27, 32, 0.68) 0%,
      rgba(27, 27, 32, 0.35) 45%,
      rgba(27, 27, 32, 0.05) 100%
    );
  z-index: 2;
}
.empathy-fullbleed .empathy-fullbleed-text {
  position: relative;
  z-index: 3;
  text-align: left;
  color: var(--oem-white);
  /* Align the text's left edge to the site container gutter (2rem on mobile,
     lines up with the 1200px container on desktop) so it doesn't float oddly
     far left on a full-bleed wide viewport. */
  padding-left: max(2rem, calc(50vw - 600px));
  padding-right: 2rem;
  max-width: 560px;
  box-sizing: content-box;
}
/* Short underline accent under the headline (steel — logo red stays logo-only). */
.empathy-fullbleed .empathy-line::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: var(--oem-steel);
  margin: 1.25rem 0 0;
}
.empathy-fullbleed .eyebrow {
  color: rgba(255, 255, 255, 0.92);
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
}
.empathy-fullbleed .empathy-line {
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
  font-size: 1.625rem;
  color: var(--oem-white);
  margin: 0 0 1.5rem;
  line-height: 1.2;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 0 8px rgba(0, 0, 0, 0.28);
  text-wrap: balance;
}
@media (min-width: 900px) {
  .empathy-fullbleed .empathy-line { font-size: 2.5rem; }
}
.empathy-fullbleed .lead {
  font-family: "Lora", Georgia, serif;
  font-size: 17px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 100%;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
}
@media (min-width: 900px) {
  .empathy-fullbleed .lead { font-size: 1.375rem; max-width: 480px; }
}
.empathy-fullbleed .lead + .lead {
  margin-top: 1rem;
}


/* "Prefer to call" line under form submit */
.prefer-to-call {
  margin-top: 1rem;
  text-align: center;
  font-size: var(--oem-body-small);
  color: var(--oem-text-muted);
}
.prefer-to-call a {
  color: var(--oem-text);
  font-weight: 500;
  border-bottom: 1px solid rgba(27, 27, 32, 0.35);
}
.prefer-to-call a:hover { border-bottom-color: var(--oem-text); }
/* Partners page: the call line sits below the form card, not inside it — a
   small steel phone icon + text on one centered row so it reads intentional. */
.prefer-to-call--below {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.prefer-to-call-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--oem-steel);
}

/* Pull-quote (About page Section 3) */
/* About page: inset testimonial quote card sits mid-flow inside the
   continuous story section. Replaces the prior full-width pale blue band. */
.story-quote-card {
  background: var(--oem-white);
  border: 1px solid rgba(105, 139, 197, 0.18);
  border-left: 3px solid var(--oem-pale-blue);
  border-radius: 14px;
  box-shadow: var(--oem-card-shadow-soft);
  padding: 1.5rem 1.5rem 1.25rem;
  margin: 1.5rem auto 1.75rem;
  max-width: 640px;
}
.story-quote {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.35;
  color: var(--oem-text);
  margin: 0 0 0.65rem;
  text-wrap: balance;
}
@media (min-width: 900px) {
  .story-quote { font-size: 1.4rem; }
}

/* ABOUT page split layout — the WHOLE story (eyebrow + H1 + every paragraph
   + inset quote + closing) lives in the left column with a beige background.
   The founders photo fills the right column full-bleed to the viewport's
   right edge, and on desktop is sticky so it stays visible as you scroll
   the story. Mobile stacks: beige text block first, photo full-width below. */
.about-story-split {
  background: var(--oem-white);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Pull the split up behind the sticky frosted header so the beige column
     (left) and founders photo (right) show through the frost, matching the
     photo-hero pages. Top padding on the copy column compensates. */
  margin-top: -88px;
}
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}
.about-story-copy {
  background: var(--oem-beige);
  padding: calc(88px + 2.5rem) 1.5rem 2.5rem;
}
.about-story-inner {
  max-width: 56ch;
  margin: 0 auto;
}
.about-story-image {
  width: 100%;
  height: 320px;
}
.about-story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 0;
  box-shadow: none;
  display: block;
}
/* Mobile: lead with the founders photo (above the story), so the page opens on
   a face before the text. Desktop keeps the side-by-side split. */
@media (max-width: 899px) {
  /* Don't pull the split under the header on mobile — the photo leads here, so
     keep its full top edge visible just below the header. */
  .about-story-split { margin-top: 0; }
  .about-story-image { order: -1; }
  .about-story-copy { padding-top: 2.5rem; }
  /* Shift the crop up so the founders' faces (near the top of the source) show
     instead of being cut off. */
  .about-story-image img { object-position: center 18%; }
}

/* Tighter editorial typography inside the story column. Smaller paragraphs
   and smaller spacing than the global defaults so the entire story fits in
   a manageable column without feeling sprawling. */
.about-story-inner .h-hero {
  margin: 0 0 var(--oem-gap-heading);
  max-width: none;
  font-size: 1.75rem;
  white-space: normal;
}
@media (min-width: 900px) {
  .about-story-inner .h-hero { font-size: 2rem; }
}
.about-story-inner .lead {
  margin: 0 0 var(--oem-gap-lead);
  font-size: 1rem;
  color: var(--oem-text-muted);
  max-width: none;
}
.about-story-inner p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--oem-text);
  margin: 0 0 1rem;
}
.about-story-inner p:last-child { margin-bottom: 0; }
.about-story-inner .story-quote-card {
  margin: 1.5rem 0;
  padding: 1.5rem 1.75rem;
  max-width: none;
}
.about-story-inner .story-quote { font-size: 1.15rem; }

/* Desktop: 50/50 split, beige fills entire left half visibly, story content
   centered inside that left half. Image right sticks so it stays in view. */
@media (min-width: 900px) {
  .about-story-split { margin-top: -96px; }
  .about-story-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .about-story-copy {
    padding: calc(96px + 3.5rem) 2rem 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .about-story-inner {
    max-width: 520px;
    margin: 0 auto;
  }
  .about-story-image {
    position: sticky;
    top: 0;
    height: 100vh;
    /* Beige band shows through the frosted header above the photo, matching
       the left column's tint. */
    background: var(--oem-beige);
  }
  /* Start the photo below the header so the founders' faces (top ~20% of the
     landscape source) aren't hidden behind the frost when the column is
     cover-cropped to portrait. */
  .about-story-image img {
    height: calc(100% - 96px);
    margin-top: 96px;
  }
}

/* Partners hero — full-bleed photo + LEFT-aligned text + left-heavy overlay.
   Matches the Housing/Service Areas full-bleed pattern but text sits left
   of center, with the dark side of the overlay placed under the text. */
.hero--partners-fullwidth {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Aspect locked to partners-home.jpg (1538×625 ≈ 2.46:1) so the image fills
     the hero with NO crop and NO side letterbox at any viewport ≥ ~600px wide.
     min-height floor kicks in on narrow mobile so text still fits.
     Negative margin-top pulls the hero behind the sticky frosted header (88px
     mobile / 96px desktop); padding-top compensates so text sits below it. */
  aspect-ratio: 1538 / 625;
  min-height: 300px;
  max-height: 620px;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-top: -88px;
  padding: calc(88px + 2.5rem) 0 2.5rem;
}
/* Mobile: lock the hero to a controlled, slightly shorter height (~470px) and
   keep the image sharp (no blur). Desktop is governed by the aspect-ratio. */
@media (max-width: 767px) {
  .hero--partners-fullwidth { min-height: 470px; max-height: 500px; }
}
@media (min-width: 768px) {
  .hero--partners-fullwidth {
    margin-top: -96px;
    padding: calc(96px + 4rem) 0 4rem;
  }
}
@media (min-width: 1024px) {
  .hero--partners-fullwidth {
    padding: calc(96px + 5rem) 0 5rem;
  }
}
.hero--partners-fullwidth img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}
.hero--partners-fullwidth::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(27, 27, 32, 0.70) 0%,
    rgba(27, 27, 32, 0.30) 35%,
    rgba(27, 27, 32, 0.00) 65%
  );
  z-index: 2;
  pointer-events: none;
}
.hero--partners-fullwidth .hero-text {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: left;
  color: var(--oem-white);
  box-sizing: border-box;
}
@media (min-width: 600px) {
  .hero--partners-fullwidth .hero-text { padding: 0 2rem; }
}
.hero--partners-fullwidth .eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 var(--oem-gap-eyebrow);
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
}
.hero--partners-fullwidth .h-hero {
  color: var(--oem-white);
  margin: 0 0 var(--oem-gap-heading);
  max-width: 720px;
  font-size: 2.375rem;
  line-height: 1.05;
  font-weight: 600;
  white-space: normal;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
}
@media (min-width: 900px) {
  .hero--partners-fullwidth .h-hero { font-size: 3.125rem; line-height: 1.06; }
}
.hero--partners-fullwidth .lead {
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 var(--oem-gap-lead);
  max-width: 90%;
  font-size: 16px;
  line-height: 1.45;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
}
@media (min-width: 768px) {
  .hero--partners-fullwidth .lead { font-size: 20px; line-height: 1.55; max-width: 720px; }
}
/* ====================================================================
   PARTNERS PROOF POINTS — three clean proof points between the hero and
   the form. Mobile: stacked rows, icon left / text right, hairline
   dividers, no cards or shadows. Desktop: equal 3-column strip, icon
   above centered text. Shares the warm tone of the form section so the
   two read as one connected zone. */
.proof-points {
  background: #f8f6f2;
  padding: 1.9rem 0 0.5rem;
}
.proof-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.proof-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--oem-divider);
}
.proof-item:last-child { border-bottom: none; }
.proof-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--oem-pale-blue);
  color: var(--oem-steel);
  border: 1px solid rgba(105, 139, 197, 0.35);
}
.proof-icon svg { width: 26px; height: 26px; }
.proof-title {
  font-family: "Inter", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--oem-text);
  margin: 0 0 0.25rem;
}
.proof-desc {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--oem-text-muted);
  margin: 0;
}
@media (min-width: 768px) {
  .proof-points { padding: 3rem 0 1.25rem; }
  /* Match the form card width (760px) so the strip and form align as a column */
  .proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 760px;
    margin: 0 auto;
  }
  .proof-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
    padding: 0.25rem 1.5rem;
    border-bottom: none;
  }
  /* thin vertical hairline between adjacent columns (not before the first) */
  .proof-item + .proof-item { border-left: 1px solid var(--oem-divider); }
  .proof-icon { width: 60px; height: 60px; }
  .proof-icon svg { width: 26px; height: 26px; }
  .proof-title { font-size: 1.0625rem; }
}

.partners-form-card {
  background: var(--oem-white);
  border: none;
  border-radius: 18px;
  box-shadow: var(--oem-card-shadow);
  padding: 2.5rem 2.25rem 2.25rem;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
/* Roomier, lower-density form on the Partners page. Top padding trimmed so the
   form card sits close to the proof points (one connected zone), not floating. */
#forms { background-color: #f8f6f2; padding-top: 1rem; }
@media (min-width: 768px) {
  #forms { padding-top: 2.25rem; }
}
.partners-form-card .form-subtitle { margin-bottom: var(--oem-gap-lead); }
.partners-form-card .field { gap: 8px; }
.partners-form-card .form-grid { gap: 1.5rem; }
@media (min-width: 768px) {
  /* even row + column gap so the wider 2-up grid reads cleanly */
  .partners-form-card .form-grid { gap: 1.5rem; }
}
.partners-form-card .form-actions { margin-top: 1.75rem; }
/* Softer, warmer inputs + a clean soft focus ring */
.partners-form-card .field input,
.partners-form-card .field select,
.partners-form-card .field textarea {
  background: #fcfbf9;
  border: 1px solid #e7e2d9;
  border-radius: 12px;
  padding: 13px 15px;
}
.partners-form-card .field input:focus,
.partners-form-card .field select:focus,
.partners-form-card .field textarea:focus {
  outline: none;
  border-color: var(--oem-steel);
  box-shadow: 0 0 0 3px rgba(105, 139, 197, 0.16);
}
/* Softer labels + darker, more readable placeholders */
.partners-form-card .field label {
  font-size: 15px;
  font-weight: 500;
}
.partners-form-card .field input::placeholder,
.partners-form-card .field textarea::placeholder {
  color: var(--oem-text-muted);
  opacity: 1;
}
/* Comfortable, less-bulky single-line inputs on mobile (~55px) */
@media (max-width: 767px) {
  .partners-form-card .field input,
  .partners-form-card .field select {
    min-height: 55px;
    padding: 15px 15px;
  }
}
/* Tab panels: the global .form-panel { display: none } rule handles hiding;
   inside the card we add a fade-in animation on the active panel. Card height
   changes between panels — that's intentional (no dead space below the
   shorter panel). */
.partners-form-card .form-panel-stack > .form-panel.is-active {
  display: block;
  animation: formPanelFadeIn 0.25s ease;
}
@keyframes formPanelFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .partners-form-card .form-panel-stack > .form-panel.is-active { animation: none; }
}
/* When the form-wrap and form-success sit inside the partners-form-card,
   strip their own card chrome so we don't get a card-inside-a-card and no
   stray white border edge. */
.partners-form-card .form-wrap {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: none;
  margin: 0;
}
.partners-form-card .form-success {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: none;
}
.partners-form-card .section-header {
  margin-bottom: var(--oem-gap-header);
}
.partners-form-card .section-header .h-section {
  margin-bottom: var(--oem-gap-heading);
}
.partners-form-card .section-header .lead {
  font-size: 1rem;
  line-height: 1.55;
}

@media (max-width: 899px) {
  .partners-form-card { padding: 1.25rem 1.25rem 1rem; }
}

/* Housing Request full-width image hero (Lonely Planet editorial style)
   — image edge-to-edge, soft dark gradient, text bottom-center.
   Replaces the older 50/50 split. */
.hero--housing-fullwidth {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Aspect locked to family-craftsman.jpg (1431×596 ≈ 2.40:1). Negative
     margin-top pulls the hero behind the sticky frosted header (88/96px);
     padding-top compensates so text sits below it. */
  aspect-ratio: 1431 / 596;
  min-height: 300px;
  max-height: 620px;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-top: -88px;
  padding: calc(88px + 3rem) 0 3rem;
}
@media (min-width: 768px) {
  .hero--housing-fullwidth {
    margin-top: -96px;
    padding: calc(96px + 4rem) 0 4rem;
  }
}
@media (min-width: 1024px) {
  .hero--housing-fullwidth {
    padding: calc(96px + 5rem) 0 5rem;
  }
}
.hero--housing-fullwidth img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
  display: block;
  z-index: 1;
  /* Warmth push: family-craftsman.jpg reads cooler/grayer than the other
     twilight + sunset heroes. Sepia(0.08) adds a subtle golden cast; saturate
     and brightness lift it into the same warm palette. */
  filter: saturate(1.12) brightness(1.04) sepia(0.08);
}
.hero--housing-fullwidth::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(27, 27, 32, 0.70) 0%,
    rgba(27, 27, 32, 0.30) 35%,
    rgba(27, 27, 32, 0.00) 65%
  );
  z-index: 2;
  pointer-events: none;
}
.hero--housing-fullwidth .hero-text {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: left;
  color: var(--oem-white);
  box-sizing: border-box;
}
@media (min-width: 600px) {
  .hero--housing-fullwidth .hero-text { padding: 0 2rem; }
}
.hero--housing-fullwidth .eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
}
.hero--housing-fullwidth .h-hero {
  color: var(--oem-white);
  margin: 0 0 var(--oem-gap-heading);
  max-width: 720px;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
  white-space: normal;
}
@media (max-width: 899px) {
  .hero--housing-fullwidth .h-hero { font-size: 2.375rem; line-height: 1.08; }
}
.hero--housing-fullwidth .lead {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 var(--oem-gap-lead);
  max-width: 90%;
  font-size: 17px;
  line-height: 1.45;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
}
@media (min-width: 768px) {
  .hero--housing-fullwidth .lead { font-size: 20px; line-height: 1.55; max-width: 720px; }
}
/* Mobile: a slightly wider-aspect (shorter) hero so the cover crop reveals more
   of the surrounding scene — feels more open. Image stays cover, no blur. */
@media (max-width: 767px) {
  .hero--housing-fullwidth { min-height: 380px; }
}
/* Grouped form sections: small uppercase labels + an inline muted disclaimer
   (no heavy box). */
.form-group-label {
  grid-column: 1 / -1;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oem-eyebrow-ink);
  margin: 0;
}
.form-grid .form-group-label:not(:first-child) { margin-top: 0.65rem; }
.form-disclaimer {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--oem-text-muted);
  margin: 0.5rem 0 0;
}

/* Request Housing form section — lighter, less crowded on mobile. */
@media (max-width: 767px) {
  .housing-form-section .form-wrap { padding: 16px 24px 8px; }
  .housing-form-section .form-grid { gap: 18px; }
  .housing-form-section .field input,
  .housing-form-section .field select { min-height: 55px; }
}

/* Service Areas full-bleed hero (Round 1): matches Request Housing pattern.
   Image edge-to-edge, soft dark gradient (darkest at bottom), text
   bottom-center over the gradient. */
.hero--service-areas-fullwidth {
  position: relative;
  width: 100%;
  min-height: 420px;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Negative margin-top pulls the hero behind the sticky frosted header
     (88px mobile / 96px desktop); padding-top compensates. */
  margin-top: -88px;
  padding: calc(88px + 4rem) 0 4rem;
}
@media (min-width: 768px) {
  .hero--service-areas-fullwidth {
    min-height: 480px;
    margin-top: -96px;
    padding: calc(96px + 5rem) 0 5rem;
  }
}
@media (min-width: 1024px) {
  .hero--service-areas-fullwidth {
    min-height: 560px;
    padding: calc(96px + 6rem) 0 6rem;
  }
}
.hero--service-areas-fullwidth img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}
.hero--service-areas-fullwidth::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(27, 27, 32, 0.70) 0%,
    rgba(27, 27, 32, 0.30) 35%,
    rgba(27, 27, 32, 0.00) 65%
  );
  z-index: 2;
}
.hero--service-areas-fullwidth .hero-text {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: left;
  color: var(--oem-white);
  box-sizing: border-box;
}
@media (min-width: 600px) {
  .hero--service-areas-fullwidth .hero-text { padding: 0 2rem; }
}
.hero--service-areas-fullwidth .eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.82);
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
}
.hero--service-areas-fullwidth .h-hero {
  color: var(--oem-white);
  margin: 0 0 var(--oem-gap-heading);
  max-width: 720px;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
  white-space: normal;
}
.hero--service-areas-fullwidth .lead {
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 var(--oem-gap-lead);
  max-width: 760px;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
}

/* Service Areas pale blue informational county cards.
   4-across desktop, 2x2 tablet, stacked mobile. Cities are ALWAYS visible
   on every screen size — no hover-reveal. County name uses Inter (not
   Bebas Neue), title case (not uppercase), tuned to keep "Los Angeles
   County" on one line. */
.county-grid-v2 {
  display: grid;
  /* clean breakpoints that divide evenly: 1 (mobile) -> 2 -> 4, never orphans */
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: var(--oem-space-block);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .county-grid-v2 { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (min-width: 1024px) {
  .county-grid-v2 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1.25rem; }
}
/* Mobile: tighten the gap between the "Counties Covered" label and the first
   card so the heading reads as connected to the cards, and make the label a
   touch larger/more readable. */
@media (max-width: 767px) {
  .section--counties .section-header--compact { margin-bottom: var(--oem-gap-header); }
  .section--counties .county-grid-v2 { margin-top: 0.85rem; }
  .section--counties .section-header--compact .eyebrow { font-size: 0.875rem; letter-spacing: 0.13em; }
}
.county-card-v2 {
  background: var(--oem-pale-blue);
  border: 1px solid rgba(105, 139, 197, 0.16);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  min-height: 170px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-shadow: var(--oem-card-shadow-soft);
  transition: transform var(--ease), box-shadow var(--ease);
}
.county-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: var(--oem-card-shadow);
}
.county-card-v2 .county-name {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--oem-text);
  margin: 0 0 0.65rem;
  line-height: 1.25;
  /* Single-line names by design ("Los Angeles County"); ellipsis fallback if
     a future addition or extreme zoom ever forces the name past the card width. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .county-card-v2 .county-name { font-size: 1.15rem; }
}
.county-card-v2 .county-cities {
  color: var(--oem-text-muted);
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 0;
  max-width: 26ch;
  opacity: 1;
}

/* Counties section bottom padding — zero on mobile so the Nationwide section's
   own top padding is the entire gap above it (kept ~48px, no big empty space). */
.section--counties { padding-bottom: 0; }
@media (min-width: 768px) { .section--counties { padding-bottom: 1.5rem; } }

/* Nationwide Support — calm warm off-white closing section before the footer.
   On-brand (`--oem-off-white` family), so the pale-blue county cards flow into
   it without a jarring dark block. Eyebrow → headline → dark button. */
.nationwide-band {
  background: #f8f6f2;
  color: var(--oem-text);
  text-align: center;
  padding: 36px 28px 48px;
}
@media (min-width: 768px) {
  .nationwide-band { padding: 40px 56px 56px; }
}
.nationwide-inner {
  max-width: 820px;
  margin: 0 auto;
}
.nationwide-eyebrow {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oem-eyebrow-ink);
  margin: 0 0 var(--oem-gap-eyebrow);
}
.nationwide-text {
  font-family: var(--oem-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.22;
  color: var(--oem-text);
  max-width: 340px;
  margin: 0 auto 20px;
}
@media (min-width: 768px) {
  .nationwide-text { font-size: 28px; line-height: 1.25; max-width: 640px; }
}

/* Two clickable icon cards (Request Housing + Contact OEM) — Zoom-style: a
   rounded pale-blue icon badge + title + one-line subtext. Reuses the premium
   card recipe (white, hairline border, soft shadow, hover lift). 1-up on mobile,
   2-up from 600px. */
.nationwide-cards {
  display: grid;
  /* 2-card row: 1 (mobile) -> 2, never orphans */
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
}
@media (min-width: 600px) {
  .nationwide-cards {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 720px;
  }
}
.nationwide-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 24px;
  background: #ffffff;
  border: 1px solid #EEF2F6;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(27, 27, 32, 0.08);
  text-decoration: none;
  color: inherit;
  transition: transform var(--ease), box-shadow var(--ease);
}
.nationwide-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 56px rgba(27, 27, 32, 0.12);
}
.nationwide-card:focus-visible {
  outline: 2px solid var(--oem-steel);
  outline-offset: 2px;
}
.nationwide-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--oem-pale-blue);
  color: var(--oem-steel);
  margin-bottom: 14px;
}
.nationwide-card-badge svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.75;
}
.nationwide-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--oem-text);
  margin: 0 0 6px;
}
.nationwide-card-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--oem-text-muted);
  margin: 0;
  max-width: 26ch;
}
/* Footer top padding stays tight on mobile (logo close to the seam); a touch
   more on desktop. Consistent across all pages. */
@media (min-width: 768px) {
  .site-footer { padding-top: 36px; }
}

/* Homepage Service Areas Preview: full-bleed coastal + CA watercolor map
   image background. Dark gradient overlay so white text reads cleanly. */
.section--service-preview {
  position: relative;
  background-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.32) 0%,
      rgba(0, 0, 0, 0.45) 100%
    ),
    url("../assets/images/service-areas-preview-bg.jpg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  color: var(--oem-white);
  padding-top: 6rem;
  padding-bottom: 6rem;
  min-height: 480px;
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .section--service-preview {
    padding-top: 8rem;
    padding-bottom: 8rem;
    min-height: 560px;
  }
}
.section--service-preview .eyebrow {
  color: rgba(255, 255, 255, 0.92);
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
}
.section--service-preview .h-section {
  color: var(--oem-white);
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
}
.section--service-preview .lead {
  color: rgba(255, 255, 255, 0.95);
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.section--service-preview .btn-primary {
  background: var(--oem-white);
  color: var(--oem-text);
  border-color: var(--oem-white);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}
.section--service-preview .btn-primary:hover {
  background: var(--oem-beige);
  border-color: var(--oem-beige);
}

/* Card unification: every card on the site uses the same radius + shadow
   weights, so the visual system reads as one set. Specific card variants
   (image-bg, step-v2, etc.) can still override individual properties. */
.contact-card,
.form-wrap,
.county-card-v2,
.pathway-grid .card {
  border-radius: 16px;
  box-shadow: var(--oem-card-shadow);
  transition: transform var(--ease), box-shadow var(--ease);
}
.contact-card:hover,
.county-card-v2:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 56px rgba(27, 27, 32, 0.12);
}
/* What We Provide cards keep their own premium radius/shadow (defined with the
   .value-icon-grid--cards base above) — intentionally outside the 16px card
   unification set. */

/* Sitewide: very subtle hairline at the top of each .section. Anchors the
   edge without feeling like a hard divider. Only applies to content-led
   sections (.section) — full-bleed image sections naturally separate via
   their imagery and overlays, so they're intentionally skipped. */
.section + .section,
.section--service-preview + .section,
.empathy-fullbleed + .section,
.hero-section + .section {
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}
/* Same hairline at top of full-bleed image sections that follow a content
   section, so the boundary is gently marked on both sides. (The emotional
   anchor is excluded — it shares a continuous warm band with the CTA above it.) */
.section + .section--service-preview {
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}

/* Sitewide section vertical rhythm — single source of truth, routed through the
   --oem-section-pad-y tokens (4rem/64px mobile, 6rem/96px desktop). */
.section {
  padding-top: var(--oem-section-pad-y);
  padding-bottom: var(--oem-section-pad-y);
}
@media (min-width: 768px) {
  .section {
    padding-top: var(--oem-section-pad-y-lg);
    padding-bottom: var(--oem-section-pad-y-lg);
  }
}

/* Homepage Final CTA — contained two-column card: photo left, text + button
   right on a warm light panel. Replaces the full-bleed photo treatment. */
.final-cta-split { background: var(--oem-beige); }
.cta-card {
  display: grid;
  grid-template-columns: 1fr;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(27, 27, 32, 0.06);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 64px rgba(27, 27, 32, 0.14);
}
.cta-card-media { position: relative; min-height: 240px; }
.cta-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cta-card-body {
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
.cta-card-body .h-final {
  color: var(--oem-text);
  margin: 0 0 var(--oem-gap-heading);
}
.cta-card-body .h-final::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--oem-steel);
  border-radius: 2px;
  margin: 1rem 0 0;
}
.cta-card-body .lead {
  color: var(--oem-text-muted);
  margin: 0 0 1.75rem;
  max-width: 42ch;
}
.cta-card-body .btn-row { margin: 0; justify-content: flex-start; }
@media (min-width: 768px) {
  /* Photo gets an even share (was 40%); shorter card + trimmed, balanced padding
     so the vertically-centered text fills its side without leftover cream. */
  .cta-card { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .cta-card-media { min-height: 380px; }
  .cta-card-body { padding: 3rem 3.25rem; }
}


/* ============================================================
   HOMEPAGE: "Who we work with" partner band, section-header
   restyle, and section-transition smoothing. Heading restyle is
   scoped to .home-page so the rest of the site is untouched.
   ============================================================ */

/* "Who we work with" partner logo band */
.partner-section { background: var(--oem-white); }

/* Carrier logos: equal invisible wrappers in a clean grid — 2 columns on
   mobile, 6 across on desktop — bound by a hairline rail. Logos stay full
   color, softened, and sized per visual weight so they read as one even set. */
.partner-strip {
  /* Mobile: center-snap "peek" carousel of large logo cards (manual swipe). */
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
  scroll-behavior: smooth;
  scrollbar-width: none;               /* Firefox: hide scrollbar */
  max-width: 1080px;
  margin: 1.25rem auto 0;
  padding: 0.25rem 0;                  /* first card sits flush-left, aligned with the header */
  background: transparent;
  /* Right-edge fade softens the peeking next card (section bg is white). */
  -webkit-mask-image: linear-gradient(to right, #000 76%, transparent 100%);
          mask-image: linear-gradient(to right, #000 76%, transparent 100%);
}
.partner-strip::-webkit-scrollbar { display: none; } /* Chrome/Safari: hide scrollbar */
@media (min-width: 768px) {
  /* Desktop: all six logos inside ONE soft container card with thin dividers
     between them. Break out WIDER than the text column so the logos aren't cramped. */
  .partner-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-items: center;
    align-items: center;
    gap: 0;
    padding: 4rem 1.75rem;
    width: min(94vw, 1440px);   /* wider than the 1200 container */
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);   /* center the wider card on the section */
    overflow: visible;
    scroll-snap-type: none;
    background: var(--oem-white);
    border: 1px solid var(--oem-divider);
    border-radius: 28px;
    box-shadow: 0 12px 40px rgba(27, 27, 32, 0.06);
    -webkit-mask-image: none;
            mask-image: none;
  }
}
.partner-logo {
  /* Mobile: large, tall logo card; snaps to start so the first aligns with the header. */
  flex: 0 0 78%;
  scroll-snap-align: start;
  height: 180px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Soft off-white card with rounded corners + a faint shadow so the edge
     blends gently instead of reading as a hard beige rectangle. */
  background: var(--oem-off-white);
  border-radius: 20px;
  box-shadow: 0 4px 18px rgba(27, 27, 32, 0.05);
}
@media (min-width: 768px) {
  /* Desktop: bare logo inside the shared container card (no per-logo card). */
  .partner-logo {
    width: 100%;
    height: 124px;
    padding: 0 26px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    scroll-snap-align: none;
  }
}
/* Thin vertical hairline between adjacent logos — desktop only (inside the
   shared container card); the mobile carousel uses separate cards instead. */
.partner-logo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60px;
  background: var(--oem-divider);
  display: none;                 /* mobile: no dividers */
}
@media (min-width: 768px) {
  .partner-logo::before { display: block; }                                /* divider before each logo */
  .partner-strip .partner-logo:nth-child(6n+1)::before { display: none; }  /* except the first */
}
.partner-logo img {
  width: auto;
  height: auto;
  max-height: calc(var(--h) * 1.7);  /* mobile: scaled up to fill the taller cards */
  max-width: 100%;                   /* keep within the card padding */
  display: block;
  opacity: 0.88;
  transition: opacity var(--ease), filter var(--ease), transform var(--ease);
}
@media (min-width: 768px) {
  /* Desktop: mostly full color, just slightly softened; full color + bigger on hover. */
  .partner-logo img {
    max-height: calc(var(--h) * 1.3);
    max-width: 100%;
    filter: grayscale(0.15);
    opacity: 0.95;
  }
}
.partner-logo img:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.12);   /* full color + noticeable grow on hover */
}

/* Cleaner closing CTA below the logos. */
.partner-cta {
  margin-top: 1rem;
  text-align: center;
}
/* Homepage: the closing CTA reads as the last line of the white "Who we work
   with" section (no separate band) — the section keeps its normal bottom padding
   before the full-bleed emotional image below. */
.home-page .partner-cta {
  margin-top: 2.75rem;
}
/* Tighten heading -> logos -> CTA into one compact block, and trim this section's
   top/bottom air so its sparse content doesn't read emptier than the denser
   neighbouring sections. The compound .bg-white.partner-section selector (0,4,0)
   is needed to beat the later `.home-page .bg-white .section-header` rules that
   set margin-bottom: 2rem. */
.home-page .partner-section { padding-top: 5.5rem; padding-bottom: 7rem; }
@media (min-width: 768px) {
  /* small gap under the button, then the wave band (190px, pinned to the
     bottom) sits just below it so more of the swirl shows */
  .home-page .partner-section { padding-top: 7rem; padding-bottom: 9rem; }
  /* CTA: a touch more room above the divider on desktop. */
  .home-page .partner-cta { margin-top: 2rem; }
}
.home-page .bg-white.partner-section .section-header { margin-bottom: 1rem; }
.home-page .bg-white.partner-section .partner-strip { margin-top: 0.5rem; }
/* Mobile: left-align the heading/subhead so they line up with the left edge of
   the (left-aligned) logo carousel below. Desktop stays centered. */
@media (max-width: 767px) {
  .home-page .bg-white.partner-section .section-header { text-align: left; }
  .home-page .bg-white.partner-section .section-header .h-section,
  .home-page .bg-white.partner-section .section-header .lead { margin-left: 0; margin-right: 0; }
  .home-page .bg-white.partner-section .section-header .h-section::after { margin-left: 0; margin-right: auto; }
}
.partner-cta p {
  margin: 0 0 0.95rem;
  font-size: 1.0625rem;
  color: var(--oem-text-muted);
}
/* Closing CTA: soft divider (steel hairline + small diamond) under the carrier
   logos, then an eyebrow + serif prompt. Hairlines flex so they shrink on
   mobile; heading rule is scoped (0,2,0) so it beats `.partner-cta p`. */
.partner-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 340px;
  margin: 0 auto 2.5rem;
}
.partner-divider .pd-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(105, 139, 197, 0.5));
}
.partner-divider .pd-rule:last-child {
  background: linear-gradient(90deg, rgba(105, 139, 197, 0.5), transparent);
}
.partner-divider .pd-dia {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin: 0 8px;
  background: var(--oem-steel);
  transform: rotate(45deg);
}
.partner-cta .partner-cta-heading {
  margin: 0 0 1.75rem;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--oem-text);
}
@media (max-width: 767px) {
  .partner-cta .partner-cta-heading { font-size: 1.625rem; }
  .partner-divider { max-width: 280px; margin-bottom: 1.75rem; }
}

/* Homepage section headings: left-aligned bold black title + soft-gray
   description, no eyebrow label. Light content sections only (bg-white /
   bg-beige) — the white-on-photo sections keep their centered treatment. */
.home-page .bg-white .section-header,
.home-page .bg-beige .section-header {
  text-align: left;
  margin-bottom: var(--oem-gap-header);
}
.home-page .bg-white .section-header .h-section,
.home-page .bg-beige .section-header .h-section,
.home-page .bg-white .section-header .lead,
.home-page .bg-beige .section-header .lead {
  margin-left: 0;
  margin-right: 0;
}
.home-page .bg-white .section-header .h-section,
.home-page .bg-beige .section-header .h-section { font-size: 1.75rem; }
@media (min-width: 900px) {
  .home-page .bg-white .section-header .h-section,
  .home-page .bg-beige .section-header .h-section { font-size: 2.125rem; }
}
.home-page .bg-white .section-header .lead,
.home-page .bg-beige .section-header .lead {
  color: var(--oem-text-muted);
  font-size: 1.0625rem;
  max-width: 560px;
  margin-top: 0;
}

/* Homepage content sections now inherit the standardized .section padding
   (--oem-section-pad-y = 64/96). The earlier 3.5/4.5rem + 48px overrides and the
   1.5rem section-header override were removed during spacing standardization. */
.home-page .pathway-grid,
.home-page .value-icon-grid,
.home-page .step-grid--v2 { margin-top: 2rem; }

/* ====================================================================
   NEO-CLASSICAL REFRESH  (Home + Service Areas)
   Cozy / minimalist / editorial pass driven by reference imagery.
   Scoped to .home-page and the Service Areas hero/county cards so the
   other pages are visually untouched. Appended last so source order
   lets these win over the earlier homepage-heading rules.

   Adds: Playfair Display serif headings + light italic accent words,
   warmer section backgrounds, one calm greige band ("Who we work
   with"), serif card titles, and roomier county cards.
   ==================================================================== */

:root {
  --oem-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --oem-greige: #e9e4da;            /* calm warm band, image-1 "mission" strip */
}

/* --- Serif headings + italic accent word --------------------------- */
.home-page .h-section,
.home-page .h-final,
.hero--service-areas-fullwidth .h-hero {
  font-family: var(--oem-serif);
  font-weight: 600;
  letter-spacing: 0;            /* Playfair doesn't want Inter's tight tracking */
}
/* Final CTA headline — a touch larger + bolder for presence */
.cta-card-body .h-final {
  font-weight: 700;
  font-size: 1.625rem;
}
@media (min-width: 900px) {
  .cta-card-body .h-final { font-size: 2rem; }
}
/* Italic accent = an EXISTING word wrapped in <em class="accent">.
   Same words, no copy change — just emphasis (image-1 "dream home" style). */
.h-section .accent,
.h-final .accent,
.h-hero .accent {
  font-style: italic;
  font-weight: 500;
  color: inherit;
}

/* --- Homepage section headers: left-aligned + roomier -------------- */
.home-page .bg-white .section-header,
.home-page .bg-beige .section-header {
  text-align: left;
  margin-bottom: var(--oem-gap-header);
}
.home-page .bg-white .section-header .h-section,
.home-page .bg-beige .section-header .h-section,
.home-page .bg-white .section-header .lead,
.home-page .bg-beige .section-header .lead {
  margin-left: 0;
  margin-right: 0;
}
.home-page .bg-white .section-header .lead,
.home-page .bg-beige .section-header .lead {
  max-width: 56ch;
}
/* Subheads levelled up: a notch darker + slightly more weight than the default
   muted gray, so every section subhead reads with a bit more presence and they
   all match (the Why subhead is brought down to this same treatment). */
.home-page .section-header .lead,
.service-preview-text .lead,
.cta-card-body .lead,
.why-subhead {
  color: #4a4a52;
  font-weight: 500;
}
.home-page .bg-white .section-header .h-section,
.home-page .bg-beige .section-header .h-section { font-size: 2rem; }
@media (min-width: 900px) {
  .home-page .bg-white .section-header .h-section,
  .home-page .bg-beige .section-header .h-section { font-size: 2.375rem; }
}

.home-page .section-header { margin-bottom: var(--oem-gap-header); }
.home-page .pathway-grid,
.home-page .value-icon-grid,
.home-page .step-grid--v2 { margin-top: 2.5rem; }

/* --- "Who we work with" background graphic (assets/images/who-we-work-with.jpg),
   with the white->pale-blue gradient as a fallback underneath. --- */
.home-page .partner-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--oem-white) 0%, var(--oem-white) 30%, var(--oem-pale-blue) 100%);
}
/* The blue wave graphic renders as a fixed-height band pinned to the very bottom
   (not a full-cover background) so it always sits well BELOW the button/content,
   independent of viewport width. Top edge feathers into the section. */
.home-page .partner-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  background: url("../assets/images/who-we-work-with.jpg") center bottom / cover no-repeat;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to top, #000 82%, transparent 100%);
          mask-image: linear-gradient(to top, #000 82%, transparent 100%);
}
.home-page .partner-section > .container { position: relative; z-index: 1; }
@media (min-width: 768px) {
  .home-page .partner-section::after { height: 128px; background-position: center 80%; }
}

/* --- Cozy serif card titles --------------------------------------- */
.home-page .card.card--image-bg .card-panel h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
  font-size: 1.75rem;
  margin: 0 0 12px;
}
/* What We Provide titles: Fraunces serif, matching the How It Works step titles
   (sized down so they sit comfortably in the narrower cards). */
.home-page .value-icon-item h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: 1.25rem;
  line-height: 1.18;
  color: var(--oem-text);
  text-wrap: balance;
}
/* How It Works step titles: Fraunces serif, sized for the horizontal card. */
.home-page .step-v2 h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: 1.6rem;
  line-height: 1.18;
}
/* Step-grid / value-grid top spacing (override the grouped .home-page rules above). */
.home-page .step-grid--v2 { margin-top: 2.5rem; }
.home-page .value-icon-grid--cards { margin-top: 2.5rem; }
/* How It Works — mobile sizing (placed after the desktop .home-page step rules so
   it wins at equal specificity). */
@media (max-width: 599px) {
  .step-grid--v2 { gap: 0.875rem; margin-top: 2rem; }
  .step-grid--v2::before { left: 47px; }   /* mobile badge center (18px pad + 29px) */
  .step-v2 { padding: 18px 18px; border-radius: 20px; gap: 1rem; min-height: 92px; box-shadow: 0 12px 30px rgba(27, 27, 32, 0.08); }
  .step-v2 .step-num { width: 58px; height: 58px; font-size: 1.45rem; }
  .step-v2 .step-text { padding-left: 1rem; }
  .home-page .step-v2 h3 { font-size: 1.25rem; line-height: 1.2; }
  .step-v2 p { font-size: 0.9rem; line-height: 1.55; }
}
/* "How can we help?" image-card titles: Fraunces 600 (matching How It Works),
   1.75rem desktop / 1.5rem mobile. */
@media (max-width: 767px) {
  .home-page .card.card--image-bg .card-panel h3 { font-size: 1.5rem; }
}

/* --- Service Areas: roomier, cozier county cards ------------------ */
.county-grid-v2 { margin-top: 3rem; }
@media (min-width: 768px) and (max-width: 1023px) { .county-grid-v2 { gap: 1.75rem; } }
@media (min-width: 1024px) { .county-grid-v2 { gap: 1.75rem; } }
.county-card-v2 {
  padding: 2.25rem 1.75rem;
  min-height: 0;                 /* was a rigid 170px floor — let content breathe */
}
.county-card-v2 .county-name {
  font-family: var(--oem-serif);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0;
  white-space: normal;           /* allow natural wrap in serif */
  overflow: visible;
  text-overflow: clip;
  margin: 0;
}
@media (min-width: 1024px) { .county-card-v2 .county-name { font-size: 1.375rem; } }
/* delicate centered divider under the county name (editorial touch) */
.county-card-v2 .county-name::after {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: var(--oem-steel);
  opacity: 0.45;
  margin: 0.9rem auto 0.9rem;
}
.county-card-v2 .county-cities {
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 30ch;
  margin: 0;
}

/* ====================================================================
   BRIGHTER, AIRIER IMAGERY (sitewide)
   The reference imagery is bright and airy; OEM's photo sections were
   carrying heavy dark gradients (and one darkening brightness filter),
   which read as "too dark." Pull the scrims back so the photos stay
   light, while the existing strong text-shadows keep white headlines
   legible. Appended last so these override the earlier overlay rules.
   ==================================================================== */

/* Homepage hero — central radial behind the white logo (enough for legibility) */
.hero-section::after {
  background: radial-gradient(
    ellipse 62% 58% at center 44%,
    rgba(0, 0, 0, 0.40) 0%,
    rgba(0, 0, 0, 0.20) 44%,
    rgba(0, 0, 0, 0.00) 78%
  );
}

/* Emotional-anchor band — keep the warm photo, but concentrate a soft vignette
   behind the centered text so all three lines are clearly legible, and group
   the headline + 2 supporting lines as ONE unit. */
.empathy-fullbleed .empathy-line { margin-bottom: 0.75rem; }
.empathy-fullbleed .lead {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 0, 0, 0.28);
}
.empathy-fullbleed .lead + .lead { margin-top: 0.15rem; }

/* Homepage Service-Areas preview — lighter top-to-bottom wash */
.section--service-preview {
  background-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.32) 100%
    ),
    url("../assets/images/service-areas-preview-bg.jpg");
}

/* Interior page heroes (Service Areas / Partners / Housing) — left-to-right
   gradient strong enough that the eyebrow + lead stay clearly legible. */
.hero--housing-fullwidth::after {
  background: linear-gradient(
    to right,
    rgba(27, 27, 32, 0.34) 0%,
    rgba(27, 27, 32, 0.16) 38%,
    rgba(27, 27, 32, 0.00) 64%
  );
}
/* Service Areas — warm charcoal gradient (medium) */
.hero--service-areas-fullwidth::after {
  background: linear-gradient(
    90deg,
    rgba(27, 27, 32, 0.52) 0%,
    rgba(27, 27, 32, 0.34) 42%,
    rgba(27, 27, 32, 0.14) 100%
  );
}
/* For Partners — solid warm-charcoal overlay (no blur). Stronger and more even
   on mobile so the left-aligned text reads cleanly across the wrap; lighter on
   the right at desktop so the photo breathes. */
.hero--partners-fullwidth::after {
  background: linear-gradient(
    90deg,
    rgba(30, 26, 22, 0.74) 0%,
    rgba(30, 26, 22, 0.54) 50%,
    rgba(30, 26, 22, 0.34) 100%
  );
}
@media (min-width: 768px) {
  .hero--partners-fullwidth::after {
    background: linear-gradient(
      90deg,
      rgba(30, 26, 22, 0.66) 0%,
      rgba(30, 26, 22, 0.42) 42%,
      rgba(30, 26, 22, 0.10) 100%
    );
  }
}

/* Subtle, consistent text shadows on the photo-hero text for legibility
   (headings vs. body). Overrides the heavier per-hero shadows above. */
.hero--service-areas-fullwidth .h-hero,
.hero--partners-fullwidth .h-hero,
.hero--housing-fullwidth .h-hero,
.contact-left .h-hero {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.hero--service-areas-fullwidth .eyebrow,
.hero--partners-fullwidth .eyebrow,
.hero--housing-fullwidth .eyebrow,
.hero--service-areas-fullwidth .lead,
.hero--partners-fullwidth .lead,
.hero--housing-fullwidth .lead,
.contact-intro {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}

/* ====================================================================
   CONTACT PAGE — two-column (intro left, form card right)
   Asana-style: serif headline + short intro on the left, the contact
   form in a white card on the right, all on a calm beige panel.
   ==================================================================== */
/* ====================================================================
   CONTACT — full-bleed photo with contact info on the left (white text
   over the photo) and a simple white form card on the right.
   Scoped to .contact-page.
   ==================================================================== */

/* Full-bleed photo section, pulled under the sticky frosted header. */
.contact-hero-full {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -88px;
  padding: calc(88px + 2.5rem) 0 3.5rem;
  overflow: hidden;
}
@media (min-width: 768px) {
  .contact-hero-full {
    margin-top: -96px;
    padding: calc(96px + 4rem) 0 5rem;
  }
}
.contact-hero-full > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 1;
}
/* Left-weighted scrim so the white info reads on the left, easing lighter
   toward the right where the white form card sits. */
.contact-hero-full::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(27, 27, 32, 0.80) 0%,
    rgba(27, 27, 32, 0.58) 42%,
    rgba(27, 27, 32, 0.38) 100%
  );
  z-index: 2;
  pointer-events: none;
}
.contact-hero-full > .container { position: relative; z-index: 3; }

/* Two-column split: info left (over photo), form card right. Stacks <860px. */
.contact-split { display: grid; gap: 2.25rem; }
@media (min-width: 860px) {
  .contact-split {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
  }
}

/* Left — heading + intro + details, white over the photo */
.contact-left { color: var(--oem-white); }
.contact-left .h-hero {
  font-family: var(--oem-serif);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--oem-white);
  margin: 0 0 var(--oem-gap-heading);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 18px rgba(0, 0, 0, 0.45);
}
.contact-intro {
  font-size: var(--oem-body-large);
  color: rgba(255, 255, 255, 0.94);
  margin: 0 0 var(--oem-gap-lead);
  max-width: 42ch;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 0, 0, 0.4);
}
/* Email / Phone / Instagram sit in a row BELOW the split (under the form),
   over the photo with a hairline divider above them. */
.contact-details {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
}
.contact-detail-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.74);
  margin-bottom: 0.35rem;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.contact-detail a,
.contact-detail .contact-detail-value {
  font-size: var(--oem-body);
  color: var(--oem-white);
  text-decoration: none;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6), 0 0 14px rgba(0, 0, 0, 0.4);
}
.contact-detail a { border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 1px; }
.contact-detail a:hover { border-bottom-color: rgba(255, 255, 255, 0.85); }

/* Right — solid white form card */
.contact-form-card {
  background: var(--oem-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--oem-card-shadow);
  padding: 2rem 1.75rem;
}
@media (min-width: 768px) {
  .contact-form-card { padding: 2.75rem; }
}
.contact-form-card .form-heading {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--oem-text);
  margin: 0 0 var(--oem-gap-heading);
}
.contact-form-card .form-subtitle { margin: 0 0 var(--oem-gap-lead); }
.contact-form-card .form-wrap {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-width: none;
  margin: 0;
}
.contact-form-card .form-success { max-width: none; margin: 1.25rem 0 0; text-align: left; }

/* Editorial fields: letter-spaced labels, squared hairline inputs */
.contact-page .field label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  font-weight: 600;
  color: var(--oem-text-muted);
}
.contact-page .field input,
.contact-page .field select,
.contact-page .field textarea {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(27, 27, 32, 0.18);
  border-radius: 0;
}
.contact-page .field input:focus,
.contact-page .field select:focus,
.contact-page .field textarea:focus {
  border-color: var(--oem-text);
  box-shadow: 0 0 0 3px rgba(27, 27, 32, 0.08);
}

.field label .optional { color: var(--oem-text-muted); font-weight: 400; }

/* "Who we work with" — the carrier-logo grid + CTA are defined once in the
   base `.partner-strip` / `.partner-logo` / `.partner-cta` rules above (full
   color, softened, equal wrappers, 2-col mobile / 6-up desktop). No homepage
   overrides needed. */

/* ====================================================================
   ROUND 2 — heading presence + underline accent, Service Areas preview
   panel (Approach 3). Large confident headings carry the structure
   (user: "I only see large headings" — no eyebrow labels), with a short
   steel underline accent beneath, per the CozySpace / interior refs.
   ==================================================================== */

/* Larger section headings + short underline accent (light home sections) */
.home-page .bg-white .section-header .h-section,
.home-page .bg-beige .section-header .h-section { font-size: 2.125rem; }
@media (min-width: 900px) {
  .home-page .bg-white .section-header .h-section,
  .home-page .bg-beige .section-header .h-section { font-size: 2.625rem; }
}
/* How It Works header matches the other content-section headings for a uniform
   heading scale down the page (it still leads its 1.6rem step-card titles). */
.home-page .section--how-it-works .section-header .h-section { font-size: 2.125rem; }
@media (min-width: 900px) {
  .home-page .section--how-it-works .section-header .h-section { font-size: 2.625rem; }
}
.home-page .section-header .h-section::after,
.service-preview-text .h-section::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--oem-steel);
  border-radius: 2px;
  margin: 1rem 0 0;
}

/* Service Areas preview — two-column panel: dark text on white + a framed
   coastal/map image beside it (fully legible; replaces white-on-photo). */
.service-preview-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .service-preview-split { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; }
}
.service-preview-text .h-section { font-size: 1.875rem; }
@media (min-width: 900px) { .service-preview-text .h-section { font-size: 2.25rem; } }
.service-preview-text .h-section::after { margin-left: 0; margin-right: 0; }
.service-preview-text .lead { max-width: 54ch; margin-top: 0; }
.service-preview-text .btn-row { margin-top: 1.75rem; }
.service-preview-figure {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--oem-divider);
  box-shadow: var(--oem-card-shadow);
}
.service-preview-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ====================================================================
   ROUND 6 — Bring About / For Partners / Request Housing up to the
   neo-classical standard: Playfair serif H1s with one italic accent
   word, a left underline accent on the left-aligned headings, and a
   touch more breathing room. Locked copy + form ids unchanged.
   ==================================================================== */

/* Serif H1s on the three interior pages. The .accent italic rule at the
   top of the refresh block already styles the emphasized word, and it
   inherits this serif family. */
.hero--partners-fullwidth .h-hero,
.hero--housing-fullwidth .h-hero,
.about-story-inner .h-hero,
.housing-form-heading {
  font-family: var(--oem-serif);
  font-weight: 600;
  letter-spacing: 0;
}

/* Left-aligned underline accent for the left-aligned light headings
   (About story H1 + Housing form heading). Photo-hero H1s skip it. */
.about-story-inner .h-hero::after,
.housing-form-heading::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--oem-steel);
  border-radius: 2px;
  margin: 1rem 0 0;
}

/* About — premium, warm, editorial testimonial pull-quote: warm card, steel
   left accent, a large faded quotation mark behind the text, roomier rhythm. */
.about-story-inner .story-quote-card {
  background: #fcfbf8;
  border: 1px solid rgba(27, 27, 32, 0.08);
  border-radius: 12px;
  box-shadow: var(--oem-card-shadow-soft);
  padding: 1.5rem 1.75rem;
  margin: 2.5rem 0;
  max-width: none;
}
.about-story-inner .story-quote {
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.55;
  margin: 0;
}
@media (min-width: 900px) {
  .about-story-inner .story-quote { font-size: 1.3rem; }
}

/* For Partners — roomier form card on the warmed (beige) section */
@media (min-width: 900px) {
  .partners-form-card { padding: 3rem; }
}

/* Request Housing — heading rhythm under the new underline accent */
.housing-form-heading { margin-bottom: var(--oem-gap-heading); }

/* ====================================================================
   HOME — Service Areas Preview: the coastal photo sits BEHIND the
   centered text (heading + line + button), kept airy so the dark text
   reads, with soft top/bottom fades into the neighboring sections.
   ==================================================================== */
.section--service-preview-v2 {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  /* Vertical padding comes from the base .section rule (standard 64/96 rhythm),
     so this band matches its neighbours with no per-section override. */
}
.service-preview-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  opacity: 1;
  z-index: 0;
}
/* No white veil over the photo — only a top/bottom vertical fade melts the band
   into the sections above/below (no hard rectangle). Text legibility comes from
   a soft text-shadow on the heading/lead, not a wash over the image. */
.section--service-preview-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, 0) 86%, #fff 100%);
}
.section--service-preview-v2 .service-preview-text .h-section,
.section--service-preview-v2 .service-preview-text .lead {
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.85);
}
.section--service-preview-v2 .container { position: relative; z-index: 2; }
.section--service-preview-v2 .service-preview-text {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.section--service-preview-v2 .service-preview-text .h-section::after { margin-left: auto; margin-right: auto; }
.section--service-preview-v2 .service-preview-text .lead { margin-left: auto; margin-right: auto; }
.section--service-preview-v2 .service-preview-text .btn-row { justify-content: center; }

/* Frosted backdrop-filter behind the hero/CTA text was removed in favor of a
   simpler overlay system (no backdrop-filter): a centered vignette backs the
   hero logo, and the emotional anchor uses a soft-focus image. */

/* ====================================================================
   Consistent interior photo-hero H1 sizing across pages — Service Areas,
   Housing, and Contact match the For Partners hero (50px desktop / 36px
   mobile) so every page-hero headline reads at the same scale.
   ==================================================================== */
.hero--service-areas-fullwidth .h-hero,
.hero--housing-fullwidth .h-hero,
.contact-left .h-hero {
  font-size: 2.25rem;
  line-height: 1.08;
}
@media (min-width: 900px) {
  .hero--service-areas-fullwidth .h-hero,
  .hero--housing-fullwidth .h-hero,
  .contact-left .h-hero {
    font-size: 3.125rem;
    line-height: 1.06;
  }
}
/* Service Areas hero H1 — a touch more presence on mobile (40px), same serif
   styling. Mobile-only so Housing/Contact heroes are unaffected. */
@media (max-width: 899px) {
  .hero--service-areas-fullwidth .h-hero { font-size: 2.5rem; line-height: 1.05; }
}

/* ====================================================================
   INTERIOR PHOTO-HERO CONSISTENCY PASS — unify height, overlay, eyebrow,
   H1, and lead across For Partners / Service Areas / Request Housing so
   all three read at one scale. Placed after the per-hero rules so it wins
   by source order. (Contact = different split pattern; About = no photo
   hero; both intentionally excluded.)
   ==================================================================== */
.hero--partners-fullwidth,
.hero--service-areas-fullwidth,
.hero--housing-fullwidth {
  aspect-ratio: auto;          /* drop the per-image aspect ratios */
  min-height: 460px;
  max-height: none;
  margin-top: -88px;
  padding: calc(88px + 3rem) 0 3rem;
}
@media (min-width: 768px) {
  .hero--partners-fullwidth,
  .hero--service-areas-fullwidth,
  .hero--housing-fullwidth {
    min-height: 510px;
    margin-top: -96px;
    padding: calc(96px + 4rem) 0 4rem;
  }
}
@media (min-width: 1024px) {
  .hero--partners-fullwidth,
  .hero--service-areas-fullwidth,
  .hero--housing-fullwidth {
    min-height: 560px;
    padding: calc(96px + 5rem) 0 5rem;
  }
}
/* Unified overlay — neutral charcoal, medium strength. Fixes Housing's
   too-light scrim and drops Partners' warm tint so all three match. */
.hero--partners-fullwidth::after,
.hero--service-areas-fullwidth::after,
.hero--housing-fullwidth::after {
  background: linear-gradient(
    90deg,
    rgba(20, 20, 24, 0.65) 0%,
    rgba(20, 20, 24, 0.38) 45%,
    rgba(20, 20, 24, 0.12) 100%
  );
}
/* Unified eyebrow */
.hero--partners-fullwidth .eyebrow,
.hero--service-areas-fullwidth .eyebrow,
.hero--housing-fullwidth .eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.90);
  margin: 0 0 var(--oem-gap-eyebrow);
}
/* Unified mobile H1 (desktop already 50px / 3.125rem) */
@media (max-width: 899px) {
  .hero--partners-fullwidth .h-hero,
  .hero--service-areas-fullwidth .h-hero,
  .hero--housing-fullwidth .h-hero {
    font-size: 2.375rem;
    line-height: 1.07;
  }
}
/* Unified lead */
.hero--partners-fullwidth .lead,
.hero--service-areas-fullwidth .lead,
.hero--housing-fullwidth .lead {
  font-size: 17px;
  line-height: 1.5;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.93);
}
@media (min-width: 768px) {
  .hero--partners-fullwidth .lead,
  .hero--service-areas-fullwidth .lead,
  .hero--housing-fullwidth .lead {
    font-size: 20px;
    line-height: 1.55;
  }
}

/* ============================================================
   Why we do it — left-aligned header above three full-width review cards
   (all scoped to .why-section)
   ============================================================ */
.why-section { background: var(--oem-pale-blue); }      /* soft panel, like How It Works */

/* Layout: left-aligned header stacked above full-width cards at every width */
.why-rail { text-align: left; margin-bottom: 2.25rem; max-width: 640px; }
@media (min-width: 900px) { .why-rail { margin-bottom: 2.75rem; } }
.why-heading {
  font-family: var(--oem-serif); font-weight: 600;
  font-size: 2.125rem; line-height: var(--oem-lh-tight);
  color: var(--oem-text); margin: 0;
}
.why-heading em { font-style: italic; }
@media (min-width: 900px) { .why-heading { font-size: 2.625rem; } }
.why-accent {
  display: block; width: 56px; height: 2px;
  background: var(--oem-steel); border-radius: 2px; margin: 1rem 0 1.25rem;
}
.why-subhead {
  font-size: var(--oem-body-large); line-height: var(--oem-lh-relaxed);
  color: #4a4a52; font-weight: 500; margin: 0 0 1.25rem;
}

/* Star rows (rail + cards) */
.why-stars {
  color: var(--oem-steel); font-size: 1.0625rem;
  letter-spacing: 0.15em; line-height: 1; margin: 0 0 0.6rem;
}
.why-card .why-stars { margin: 0 0 0.875rem; }

/* Right: three equal-width, equal-height cards */
.why-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .why-cards { grid-template-columns: repeat(3, 1fr); } }

.why-card {
  display: flex; flex-direction: column;
  background: var(--oem-white); border: 1px solid #EEF2F6; border-radius: 24px;
  padding: 32px; box-shadow: 0 14px 36px rgba(27, 27, 32, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.why-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(27, 27, 32, 0.12); }

.why-card-quote {
  display: block; font-family: var(--oem-serif); font-weight: 600;
  font-size: 2.75rem; line-height: 0.6; color: var(--oem-columbia); margin-bottom: 0.5rem;
}
.why-card-title {
  font-family: "Inter", sans-serif; font-weight: 700;
  font-size: 1.1875rem; line-height: 1.3; color: var(--oem-text); margin: 0 0 0.625rem;
}
.why-card-body {
  font-size: var(--oem-body-small); line-height: 1.6;
  color: var(--oem-text); margin: 0 0 1.25rem;
}

/* Attribution pinned to the bottom -> equal-height cards; avatar + name/context */
.why-card-attr {
  margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--oem-divider);
  display: flex; align-items: center; gap: 0.75rem;
}
.why-avatar {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--oem-pale-blue); color: var(--oem-steel);
}
.why-avatar svg { width: 22px; height: 22px; }
.why-card-name { font-weight: 700; font-size: var(--oem-body-small); color: var(--oem-text); margin: 0; }
.why-card-context { font-size: var(--oem-body-small); color: var(--oem-text-muted); margin: 0.15rem 0 0; }

/* ====================================================================
   Interior photo-heroes — bottom-left text + bottom-weighted scrim +
   smaller subheader for clearer hierarchy. Applied to all three
   (For Partners / Service Areas / Request Housing) for consistency.
   ==================================================================== */
.hero--partners-fullwidth,
.hero--service-areas-fullwidth,
.hero--housing-fullwidth { align-items: flex-end; }

.hero--partners-fullwidth::after,
.hero--service-areas-fullwidth::after,
.hero--housing-fullwidth::after {
  background: linear-gradient(
    to top,
    rgba(20, 20, 24, 0.80) 0%,
    rgba(20, 20, 24, 0.42) 30%,
    rgba(20, 20, 24, 0.06) 62%,
    rgba(20, 20, 24, 0.00) 100%
  );
}
.hero--partners-fullwidth .lead,
.hero--service-areas-fullwidth .lead,
.hero--housing-fullwidth .lead {
  font-size: 15px;
  line-height: 1.5;
  max-width: 600px;
  color: rgba(255, 255, 255, 0.88);
}
@media (min-width: 768px) {
  .hero--partners-fullwidth .lead,
  .hero--service-areas-fullwidth .lead,
  .hero--housing-fullwidth .lead { font-size: 17px; line-height: 1.55; }
}

/* Match the Contact form heading ("Send Us a Message") to the Request Housing
   form heading ("Request Details"): same serif font, weight, and size scale. */
.contact-form-card .form-heading {
  font-family: var(--oem-serif);
  font-weight: 600;
  letter-spacing: 0;
  font-size: 1.375rem;
}
@media (min-width: 900px) {
  .contact-form-card .form-heading { font-size: 1.625rem; }
}