/* Hero-only display faces (client requests):
   Mrs Saint Delafield: Heather's signature.
   Libre Caslon Text italic: the hero quote. The brand has no serif;
   this one is not used by Maison. */
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@1,400&family=Mrs+Saint+Delafield&display=swap');

/* =========================================================
   OCEAN AREA LIVING — homepage brand layer (v2, refined)
   Brand Identity v1.0 colours and fonts only. Visual only: no
   copy, order, links or behaviour change.

   Refinement principles:
   · lighter heading weights (600), tighter tracking, more air
   · hairline rules instead of boxes; photos carry the colour
   · few frames: only the property cards and the form are cards
   · hero text sits directly on the photo (client decision)
   Section rhythm: White / Aqua Mist, one Deep Ocean band.
   ========================================================= */

/* Shared geometry: 1240px content, 40px / 20px sides */
.hb-inner, .hc-inner, .hn-inner, .ha-inner, .hm-inner,
.profile-inner, .waterfront-inner, .listings-inner,
.numbers-inner, .voices-inner, .contact-inner {
  max-width: 1320px; padding-left: 40px; padding-right: 40px;
}

/* Header logo: brand range 34–46px tall */
.nav .oal-img { height: 46px; }
.nav-white { --nav-h: 79px; }
@media (max-width: 1180px) { .nav-white { --nav-h: 75px; } }
@media (max-width: 860px)  { .nav .oal-img { height: 38px; } .nav-white { --nav-h: 63px; } }
@media (max-width: 480px)  { .nav .oal-img { height: 32px; } .nav-white { --nav-h: 57px; } }

/* ---------- Refined type ---------- */
.hb-h, .hc-h, .hn-h, .ha-h, .hm-h, .profile-h, .waterfront-h,
.section-h, .numbers-h, .voices-h, .contact-h, .contact-form-h {
  font-family: var(--oal-display); font-weight: 600; font-style: normal;
  color: var(--oal-deep); letter-spacing: -.028em; text-wrap: balance;
}
.hb-h i, .hn-h i, .profile-h i, .waterfront-h i, .section-h i,
.numbers-h i, .voices-h i, .contact-h i { font-style: normal; font-weight: 400; }

/* Eyebrow: smaller, wider tracking, led by a short ocean rule */
.uc-label {
  font: 600 11.5px/1.2 var(--oal-display);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--oal-ocean-ink);
}
.profile-copy > .uc-label,
.waterfront-copy > .uc-label,
.section-head-num,
.voices-head .uc-label,
.ct-lead > .uc-label,
.numbers .uc-label.on-dark {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11.5px; letter-spacing: .2em; opacity: 1;
}
.profile-copy > .uc-label::before,
.waterfront-copy > .uc-label::before,
.section-head-num::before,
.voices-head .uc-label::before,
.ct-lead > .uc-label::before,
.numbers .uc-label.on-dark::before {
  content: ""; width: 28px; height: 1px; background: currentColor; flex: none;
}

/* Body copy: slightly lighter colour for a calmer page */
.hb-p, .profile-body, .waterfront-body, .hn-p, .contact-intro, .ha-card p {
  color: #3A4650;
}

/* =========================================================
   1 · HERO — text directly on the photo
   ========================================================= */
.hero { background: var(--oal-deep); color: #fff; }

/* Video only — no still photo. Plain Deep blue sits behind the film
   for the moment before its first frame appears. */
.hero-media {
  background: var(--oal-deep);
}
/* The film is cropped to fill the hero (never stretched) and is always
   visible: if autoplay is blocked or reduced motion is on, the video's
   own frame shows (paused) instead of any substitute image. */
.hero-video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}

/* Overlay: its own layer (.hero-scrim), separate from the photo or video
   underneath, so swapping the media keeps the same text treatment.
   Strongest behind the signature and copy (lower left), softer across
   the rest of the footage so the coast stays visible. Sized for the
   film's brightest frames (white house wall ~1-3s, sand and surf
   ~6-7s, both in the lower left). */
.hero-scrim {
  display: block;
  background:
    radial-gradient(70% 75% at 12% 88%,
      rgba(0, 24, 44, .55) 0%, rgba(0, 24, 44, .35) 45%, rgba(0, 24, 44, 0) 78%),
    linear-gradient(90deg,
      rgba(0, 24, 44, .50) 0%, rgba(0, 24, 44, .38) 32%,
      rgba(0, 24, 44, .16) 55%, rgba(0, 24, 44, .06) 75%),
    linear-gradient(180deg,
      rgba(0, 24, 44, .10) 0%, rgba(0, 24, 44, 0) 22%,
      rgba(0, 24, 44, .18) 50%, rgba(0, 24, 44, .62) 100%);
}
.hero-copy {
  position: absolute;
  left: max(40px, calc((100% - 1240px) / 2));
  right: max(40px, calc((100% - 1240px) / 2));
  bottom: 76px;
  width: auto; max-width: none;
  background: none; border-radius: 0; box-shadow: none; padding: 0;
  color: #fff;
}
/* Heather's name as a hand signature, with a drawn swash beneath it.
   Same words in the same <h1>; only the lettering changes. */
.hero-h1 {
  position: relative;
  display: inline-block; width: auto; max-width: none;
  font-family: 'Mrs Saint Delafield', 'Snell Roundhand', 'Apple Chancery', cursive;
  font-weight: 400; font-style: normal;
  font-size: clamp(72px, 9.6vw, 148px);
  line-height: 1.05;
  letter-spacing: 0;
  color: #fff;
  padding: .06em .18em .18em 0;
  margin: 0 0 -.1em -.04em;
  transform: rotate(-4deg);
  transform-origin: left bottom;
  text-shadow:
    0 1px 2px rgba(0, 28, 52, .25),
    0 4px 30px rgba(0, 28, 52, .45);
  text-wrap: nowrap; white-space: nowrap;
}
.hero-h1::after {
  content: "";
  position: absolute;
  left: 4%; right: -6%; bottom: .04em;
  height: .26em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M4 30 C 90 14, 210 6, 330 12 S 520 30, 560 16 C 578 10, 590 8, 596 10' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M120 34 C 220 24, 340 22, 470 28' fill='none' stroke='white' stroke-opacity='.55' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 8px rgba(0, 28, 52, .35));
  pointer-events: none;
}
/* Quote: serif italic in soft ivory, distinct from the white signature.
   The top margin gives the signature's underline room to breathe. */
.hero-sub {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.35; letter-spacing: 0;
  color: #F3EBD8; opacity: 1;
  margin: clamp(30px, 2.8vw, 42px) 0 0; padding: 0;
  max-width: 34ch;
  text-shadow: 0 1px 2px rgba(0, 24, 44, .30), 0 2px 18px rgba(0, 24, 44, .40);
}
/* Paragraph: brand sans, smaller, regular, narrower column, airy leading */
.hero-body {
  font-family: var(--oal-body); font-weight: 400; font-style: normal;
  font-size: 15.5px; line-height: 1.75; letter-spacing: .005em;
  color: #F2F5F7; opacity: 1;
  margin: 22px 0 0; padding: 0;
  max-width: 46ch;
  text-shadow: 0 1px 2px rgba(0, 24, 44, .35), 0 1px 14px rgba(0, 24, 44, .45);
}
.hero-scroll {
  right: max(40px, calc((100% - 1240px) / 2)); bottom: 40px;
  font: 600 11px/1 var(--oal-display); letter-spacing: .24em;
  color: #fff; opacity: .8; text-shadow: none;
}
.hero-scroll-line { background: #fff; }

/* =========================================================
   2 · BUYING AND SELLING — Aqua Mist; photo-led, unframed
   ========================================================= */
.hb { background: var(--oal-mist); padding: 120px 0; }
.hb-inner { gap: 48px; }
.hb-card { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.hb-media {
  border: 0; border-radius: var(--oal-r-md); overflow: hidden;
  background: var(--oal-line); aspect-ratio: 3 / 2;
}
.hb-media img { transition: transform 1.2s cubic-bezier(.2, .6, .2, 1); }
.hb-card:hover .hb-media img { transform: scale(1.02); }
.hb-copy { padding: 32px 0 0; }
.hb-h { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.18; margin: 0 0 12px; }
.hb-p { font-size: 17px; line-height: 1.7; margin: 0 0 28px; max-width: 48ch; }

/* =========================================================
   3 · HEATHER — White
   ========================================================= */
.profile { background: #fff; padding: 128px 0; }
.profile-inner { gap: 96px; align-items: center; grid-template-columns: 5fr 6fr; }
.portrait { border: 0; border-radius: var(--oal-r-md); background-color: var(--oal-cloud); }
.profile-copy { padding-top: 0; }
.profile-h { font-size: clamp(40px, 4.4vw, 60px); line-height: 1.04; margin: 22px 0 18px; }
.profile-lede {
  font: 500 17px/1.6 var(--oal-display); font-style: normal;
  color: var(--oal-slate); opacity: 1;
  border-bottom: 1px solid var(--oal-line);
  margin: 0 0 28px; padding-bottom: 24px; max-width: 52ch;
}
.profile-body { font-size: 17px; line-height: 1.75; margin: 0 0 18px; max-width: 58ch; }
.profile-copy .btn-link { margin-top: 18px; }

/* =========================================================
   4 · CERTIFICATIONS — Aqua Mist, banner unchanged
   ========================================================= */
.hc { background: var(--oal-mist); border-top: 0; padding: 88px 0 96px; }
.hc-h { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; margin: 0 0 44px; }

/* =========================================================
   5 · WATERFRONT — White
   ========================================================= */
.waterfront { background: #fff; border-top: 0; padding: 128px 0; }
.waterfront-inner { gap: 96px; }
.waterfront-h { font-size: clamp(36px, 3.8vw, 52px); line-height: 1.06; margin: 22px 0 0; }
.waterfront-rule { background: var(--oal-line); height: 1px; width: 100%; max-width: 46ch; margin: 30px 0 28px; border-radius: 0; }
.waterfront-body { font-size: 17px; line-height: 1.75; margin: 0 0 36px; }
.waterfront-media { border: 0; border-radius: var(--oal-r-md); background: var(--oal-cloud); }

/* =========================================================
   6 · FEATURED PROPERTIES — Aqua Mist, brand property cards
   ========================================================= */
.listings { background: var(--oal-mist); padding: 128px 0; }
.section-head {
  grid-template-columns: 240px 1fr; gap: 48px;
  padding-bottom: 40px; margin-bottom: 56px;
  border-bottom: 1px solid rgba(0, 63, 113, .14);
}
.section-head-num { padding-top: 14px; }
.section-h { font-size: clamp(36px, 3.8vw, 52px); line-height: 1.06; }
.section-aside { font: 400 18px/1.6 var(--oal-body); font-style: normal; color: var(--oal-slate); opacity: 1; margin-top: 14px; }

.cards { gap: 28px; }
.card {
  background: #fff;
  border: 0;
  border-radius: var(--oal-r-md);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 63, 113, .04);
  transition: box-shadow .3s ease;
}
.card:hover { opacity: 1; box-shadow: var(--oal-shadow-1); }
.card-img { aspect-ratio: 4 / 3; border-bottom: 0; background: var(--oal-cloud); }

/* Status labels: quiet white chips on the photo */
.card-status {
  top: 16px; left: 16px; right: auto;
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 12px;
  border-radius: var(--oal-r-sm);
  font: 600 11px/1 var(--oal-display);
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255, 255, 255, .94); color: var(--oal-deep);
  border: 0;
}
.card-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--oal-ocean);
}
.cards .card:nth-child(1) .card-status::before { background: var(--oal-flower); }
.cards .card:nth-child(3) .card-status { color: var(--oal-slate); }
.cards .card:nth-child(3) .card-status::before { background: var(--oal-slate); }

.card-body { padding: 24px 24px 26px; }
.card-h {
  font: 600 21px/1.25 var(--oal-display); font-style: normal;
  letter-spacing: -.015em; color: var(--oal-deep); margin: 0 0 6px;
}
.card-h i { font-style: normal; }
.card-meta {
  font: 400 15px/1.5 var(--oal-body);
  letter-spacing: 0; text-transform: none;
  color: var(--oal-slate); opacity: 1;
}
.card-dot { margin: 0 6px; opacity: .6; }
.card-rule { background: var(--oal-line); margin: 18px 0 16px; }

.card-specs { grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; align-items: start; }
.card-specs > div { gap: 4px; padding: 0 16px; border-left: 1px solid var(--oal-line); }
.card-specs > div:first-child { padding-left: 0; border-left: 0; }
.spec-n {
  font: 600 18px/1.15 var(--oal-display);
  letter-spacing: -.01em; color: var(--oal-deep);
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.spec-l {
  font: 400 13.5px/1.3 var(--oal-body);
  letter-spacing: 0; text-transform: none;
  color: var(--oal-slate); opacity: 1; white-space: nowrap;
}
.listings-foot { margin-top: 56px; }

/* =========================================================
   7 · NEW CONSTRUCTION — White
   ========================================================= */
.hn { background: #fff; border-top: 0; padding: 128px 0; }
.hn-inner { gap: 88px; }
.hn-media { border: 0; border-radius: var(--oal-r-md); background: var(--oal-cloud); }
.hn-h { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; margin: 0 0 18px; }
.hn-p { font-size: 17px; line-height: 1.75; margin: 0 0 32px; }

/* =========================================================
   8 · EXPERIENCE & RECOGNITION — the Deep Ocean band
   Open figures divided by hairlines, no boxes.
   ========================================================= */
.numbers { color: #fff; background: var(--oal-deep); }
.numbers-media { background: var(--oal-deep); background-image: none; }
.numbers-scrim { display: none; }
.numbers-inner { padding-top: 128px; padding-bottom: 128px; }
.numbers .uc-label.on-dark { color: var(--oal-aqua); }
.numbers-h { color: #fff; font-size: clamp(36px, 3.8vw, 52px); line-height: 1.06; margin: 22px 0 14px; }
.numbers-lede { font: 400 18px/1.6 var(--oal-body); font-style: normal; color: var(--oal-aqua); opacity: 1; margin: 0 0 72px; }

.stats--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; align-items: stretch;
  border-top: 1px solid rgba(179, 227, 242, .28);
}
.stats--4 .stat-sep { display: none; }
.stats--4 .stat {
  padding: 40px 32px 0;
  border-left: 1px solid rgba(179, 227, 242, .28);
  background: none; border-radius: 0;
}
.stats--4 .stat:first-child { padding-left: 0; border-left: 0; }
.stats--4 .stat-n,
.stat-n {
  font: 500 clamp(48px, 5vw, 76px)/1 var(--oal-display);
  letter-spacing: -.04em; color: #fff;
  font-variant-numeric: lining-nums tabular-nums;
  gap: 0;
}
.stat-plus {
  font: 400 .62em/1 var(--oal-display);
  color: var(--oal-turquoise); opacity: 1;
  margin-left: 4px; align-self: flex-start; padding-top: .1em;
}
.stat-l {
  margin-top: 18px; padding-top: 0; border-top: 0;
  font: 600 11.5px/1.5 var(--oal-display);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--oal-aqua); opacity: 1;
}

/* =========================================================
   9 · AWARDS & RANKINGS — White, hairline list
   ========================================================= */
.ha { background: #fff; padding: 128px 0; }
.ha-h { font-size: clamp(36px, 3.8vw, 52px); line-height: 1.06; margin: 0 0 56px; }
.ha-grid { border: 0; gap: 0 56px; }
.ha-card {
  background: none; border: 0; border-radius: 0;
  border-top: 1px solid var(--oal-line);
  padding: 32px 0 44px;
  position: relative;
}
.ha-card::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 40px; height: 2px; background: var(--oal-ocean);
}
.ha-card h3 { font: 600 19px/1.35 var(--oal-display); letter-spacing: -.01em; color: var(--oal-deep); margin: 0 0 12px; }
.ha-card p { font-size: 15.5px; line-height: 1.7; }

/* =========================================================
   10 · MARKETS WE SERVE — Aqua Mist, photo-led
   ========================================================= */
.hm { background: var(--oal-mist); border-top: 0; padding: 128px 0; }
.hm-head { gap: 64px; margin-bottom: 56px; align-items: end; }
.hm-h { font-size: clamp(36px, 3.8vw, 52px); line-height: 1.06; }
.hm-intro { font: 400 18px/1.6 var(--oal-body); font-style: normal; color: var(--oal-slate); }
.hm-grid { gap: 48px 28px; }
.hm-card { background: none; border: 0; border-radius: 0; overflow: visible; color: var(--oal-deep); }
.hm-media { border: 0; border-radius: var(--oal-r-md); overflow: hidden; margin: 0 0 18px; background: var(--oal-line); }
.hm-media img { transition: transform 1.2s cubic-bezier(.2, .6, .2, 1); }
.hm-card:hover .hm-media img { transform: scale(1.02); }
.hm-name { font: 600 19px/1.3 var(--oal-display); letter-spacing: -.01em; color: var(--oal-deep); margin: 0 0 4px; padding: 0; }
.hm-cap {
  font: 400 14.5px/1.5 var(--oal-body);
  letter-spacing: 0; text-transform: none;
  color: var(--oal-slate); opacity: 1; padding: 0;
}
.hm-card:hover .hm-name { color: var(--oal-ocean-ink); }
.hm-card:focus-visible { outline: 2px solid var(--oal-ocean); outline-offset: 6px; border-radius: var(--oal-r-md); }

/* =========================================================
   11 · CLIENT PERSPECTIVES — White, open columns
   ========================================================= */
.voices { background: #fff; color: var(--oal-ink); padding: 128px 0; }
.voices-head {
  grid-template-columns: 240px 1fr; gap: 48px;
  padding-bottom: 40px; margin-bottom: 56px;
  border-bottom: 1px solid var(--oal-line);
}
.voices-head .uc-label { padding-top: 14px; }
.voices-h { font-size: clamp(36px, 3.8vw, 52px); line-height: 1.06; max-width: 20ch; }
.voices-grid { gap: 0; }
.voice {
  padding: 0 40px;
  border: 0; border-left: 1px solid var(--oal-line); border-radius: 0;
  background: none;
}
.voice:first-child { padding-left: 0; border-left: 0; }
.voice:last-child { padding-right: 0; }
.voice-stars { margin: 0 0 20px; gap: 3px; }
.voice-stars svg { width: 13px; height: 13px; fill: var(--oal-ocean); }
.voice-q {
  font: 400 17px/1.75 var(--oal-body); font-style: normal;
  color: var(--oal-ink); margin: 0 0 28px;
}
.voice-mark {
  font: 500 1.5em/0 var(--oal-display); font-style: normal;
  color: var(--oal-ocean); opacity: 1;
  vertical-align: -.22em; margin-right: .06em;
}
.voice-src { border-top: 1px solid var(--oal-line); padding-top: 18px; }
.voice-name.uc-label,
.voice-name {
  font: 600 15px/1.3 var(--oal-display);
  letter-spacing: -.005em; text-transform: none;
  color: var(--oal-deep); margin-bottom: 4px;
}
.voice-role.uc-label,
.voice-role {
  font: 400 13.5px/1.5 var(--oal-body);
  letter-spacing: 0; text-transform: none;
  color: var(--oal-slate); opacity: 1;
}

/* =========================================================
   12 · CONTACT — Aqua Mist, form on a quiet white panel
   ========================================================= */
.contact { background: var(--oal-mist); padding: 128px 0; }
.ct-grid { gap: 80px; }
.ct-lead .contact-h { font-size: clamp(36px, 3.8vw, 52px); line-height: 1.06; margin: 22px 0 0; }
.contact-intro { font-size: 17px; line-height: 1.75; margin: 20px 0 0; }
.cx.ct-links { margin-top: 32px; }
.ct-media { border: 0; border-radius: var(--oal-r-md); background: var(--oal-line); margin-top: 40px; }
.ct-form {
  background: #fff;
  border: 0;
  border-radius: var(--oal-r-md);
  box-shadow: 0 1px 2px rgba(0, 63, 113, .04);
  padding: 44px 44px 36px;
}
.contact-form-h { font-size: 24px; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 8px; }
.contact-form-sub {
  font: 400 15px/1.5 var(--oal-body);
  letter-spacing: 0; text-transform: none;
  color: var(--oal-slate); opacity: 1; margin: 0 0 28px;
}
.ct-form .form-fields { gap: 18px; }
.ct-form .field-row { gap: 18px; }
.ct-form .field-l { margin-bottom: 6px; }
.ct-form .field input,
.ct-form .field select { padding: 0 14px; }
.ct-form .field select { padding-right: 40px; }
.ct-form .field textarea { padding: 12px 14px; min-height: 104px; }
.ct-form .form-submit { margin-top: 6px; width: 100%; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .ha-grid, .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--4 .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stats--4 .stat { padding-bottom: 32px; }
  .profile-inner, .waterfront-inner, .hn-inner, .ct-grid { gap: 56px; }
}

@media (max-width: 960px) {
  .cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
}

@media (max-width: 860px) {
  .hb-inner, .hc-inner, .hn-inner, .ha-inner, .hm-inner,
  .profile-inner, .waterfront-inner, .listings-inner,
  .numbers-inner, .voices-inner, .contact-inner { padding-left: 20px; padding-right: 20px; }

  /* Hero: text stays on the photo */
  .hero-copy { left: 20px; right: 20px; bottom: 44px; }
  .hero-h1 { font-size: clamp(60px, 17vw, 84px); line-height: 1.05; }
  .hero-sub { font-size: 21px; line-height: 1.38; margin-top: 24px; max-width: 30ch; }
  .hero-body { font-size: 15px; line-height: 1.7; margin-top: 16px; max-width: 40ch; }
  /* Phones: the copy covers the lower half, so the overlay builds from
     the middle down; the top of the film stays clear. */
  .hero-scrim {
    background:
      linear-gradient(180deg,
        rgba(0, 24, 44, .08) 0%, rgba(0, 24, 44, 0) 18%,
        rgba(0, 24, 44, .42) 42%, rgba(0, 24, 44, .66) 66%,
        rgba(0, 24, 44, .80) 100%);
  }

  .hb, .profile, .hc, .waterfront, .listings, .hn, .ha, .hm, .voices, .contact { padding: 80px 0; }
  .numbers-inner { padding-top: 80px; padding-bottom: 80px; }

  .hb-inner { gap: 48px; }
  .hb-copy { padding: 24px 0 0; }
  .hb-p, .profile-body, .waterfront-body, .hn-p, .contact-intro { font-size: 16px; }

  .profile-h { font-size: 40px; margin: 16px 0 6px; }
  .waterfront-h, .section-h, .numbers-h, .voices-h, .ha-h, .hm-h, .hn-h,
  .ct-lead .contact-h { font-size: 34px; }

  .section-head, .voices-head { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 36px; padding-bottom: 28px; }
  .section-head-num, .voices-head .uc-label { padding-top: 0; }
  .section-aside, .numbers-lede, .hm-intro { font-size: 17px; }
  .hm-head { gap: 16px; margin-bottom: 36px; }

  /* Property specs: 2 × 2 so every figure stays large and legible */
  .card-body { padding: 20px 20px 24px; }
  .card-h { font-size: 22px; }
  .card-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .card-specs > div { padding: 0 0 0 16px; }
  .card-specs > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .spec-n { font-size: 20px; }
  .spec-l { font-size: 15px; }

  /* Figures: 2 × 2, open */
  .stats--4 .stat { padding: 28px 0 28px 20px; }
  .stats--4 .stat:nth-child(odd) { padding-left: 0; }
  .stats--4 .stat:nth-child(n+3) { border-top: 1px solid rgba(179, 227, 242, .28); }
  .stats--4 .stat-n { font-size: 48px; }
  .stat-l { font-size: 11.5px; letter-spacing: .14em; margin-top: 12px; }
  .numbers-lede { margin-bottom: 40px; }

  .ha-grid { grid-template-columns: minmax(0, 1fr); }
  .ha-card { padding: 28px 0 32px; }

  .voices-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .voice, .voice:first-child, .voice:last-child {
    padding: 36px 0 0; border-left: 0; border-top: 1px solid var(--oal-line); margin-top: 36px;
  }
  .voice:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
  .voice-q { font-size: 16px; }

  .ct-grid { gap: 44px; }
  .ct-form { padding: 28px 20px 24px; }
}

@media (max-width: 600px) {
  .hm-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

@media (max-width: 360px) {
  .stats--4 .stat-n { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .hb-media img, .hm-media img { transition: none; }
}