/* Self-hosted variable fonts, latin subset only.
   Jost and Playfair Display are both SIL OFL 1.1.
   Jost replaces the source site's Loft, which is licensed to Duda-hosted sites only. */
@font-face{font-family:'Jost';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/jost-var.235d8f8964.woff2') format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600 700;font-display:swap;src:url('/assets/fonts/playfair-var.5d91eb5d52.woff2') format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------------------------------------------------------------------------
   Tokens. Values trace to .site-migration/source/design-tokens.json, where each
   one records whether it was observed on the source or chosen deliberately.
--------------------------------------------------------------------------- */
:root {
  --brand-navy: #0f4d8c;
  --brand-navy-deep: #0a3a6b;
  --ink: #4d4d4d;
  --ink-strong: #2d2e32;
  --ink-muted: #666;
  --surface: #fff;
  --surface-warm: #f1eee9;
  --surface-cool: #f7f7f7;
  --border: #d1d1d1;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.1875rem;
  --step-2: clamp(1.45rem, 1.15rem + 1.1vw, 1.95rem);
  --step-3: clamp(1.9rem, 1.35rem + 2.2vw, 2.95rem);
  --step-4: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem);

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.6;

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-pill: 999px;

  --shadow-card: 0 3px 11px rgb(0 0 0 / 0.18);
  --shadow-card-hover: 0 10px 28px rgb(0 0 0 / 0.16);

  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 76px;
}

/* --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--surface);
  overflow-wrap: break-word;
}
img, picture, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-strong);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-3);
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--step-4); line-height: var(--lh-tight); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 var(--space-3); max-width: 68ch; }
a { color: var(--brand-navy); text-underline-offset: 0.2em; }
a:hover { color: var(--brand-navy-deep); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: var(--space-3); top: -100px; z-index: 100;
  background: var(--brand-navy); color: #fff; padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-md) var(--radius-md); transition: top 120ms ease;
}
.skip-link:focus { top: 0; color: #fff; }

.container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.section { padding-block: clamp(var(--space-6), 7vw, var(--space-8)); }
.section--tight-top { padding-top: 0; }
.section--warm { background: var(--surface-warm); }
.section--cool { background: var(--surface-cool); }
.eyebrow {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-navy);
  margin: 0 0 var(--space-2);
}
.lede { font-size: var(--step-1); color: var(--ink); max-width: 60ch; }

/* Buttons -------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-2) var(--space-5);
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.btn--primary { background: var(--brand-navy); color: #fff; }
.btn--primary:hover { background: var(--brand-navy-deep); color: #fff; transform: translateY(-1px); }
.btn--secondary { background: transparent; color: var(--brand-navy); border-color: var(--brand-navy); }
.btn--secondary:hover { background: var(--brand-navy); color: #fff; }
.btn--on-dark { background: #fff; color: var(--brand-navy); }
.btn--on-dark:hover { background: var(--surface-warm); color: var(--brand-navy-deep); }
.btn[aria-busy='true'] { opacity: 0.72; pointer-events: none; }

/* Header --------------------------------------------------------------------
   Two-tier, matching the source: contact line and CTA on the top row with the
   logo centred between them, primary nav beneath. The source paints the logo as
   an overlay that covers its own first three nav links; here the logo is a grid
   sibling, so nothing is hidden at any width.
---------------------------------------------------------------------------- */
.header { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--border); }
.header__top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3);
  width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto;
  min-height: 64px; padding-block: var(--space-2);
}
.header__contact { display: flex; align-items: center; gap: var(--space-3); font-size: var(--step--1); }
.header__area { text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); white-space: nowrap; }
.header__phone { font-weight: 600; letter-spacing: 0.04em; color: var(--ink-strong); text-decoration: none; white-space: nowrap; }
.header__phone:hover { color: var(--brand-navy); }
.header__logo { justify-self: center; }
.header__logo img { width: clamp(150px, 22vw, 260px); height: auto; }
.header__action { justify-self: end; display: flex; align-items: center; gap: var(--space-2); }

.nav { display: none; border-top: 1px solid var(--border); }
.nav__list {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(var(--space-3), 2.5vw, var(--space-6));
  list-style: none; margin: 0 auto; padding: 0;
  width: min(100% - (var(--gutter) * 2), var(--container));
}
.nav__link {
  display: inline-block; font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-strong);
  padding-block: var(--space-3); border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--brand-navy); border-bottom-color: var(--brand-navy); }
.nav__link[aria-current='page'] { color: var(--brand-navy); border-bottom-color: var(--brand-navy); }

.btn--sm { min-height: 40px; padding: var(--space-1) var(--space-4); font-size: 0.8125rem; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 20px; height: 2px; background: var(--ink-strong); content: '';
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after { position: absolute; top: 6px; }

/* Below 900px the top row carries the logo and the toggle only. */
.header__contact, .header__action .btn { display: none; }

@media (min-width: 900px) {
  .nav { display: block; }
  .nav-toggle { display: none; }
  .header__contact { display: flex; }
  .header__action .btn { display: inline-flex; }
}

.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0; z-index: 39;
  background: #fff; padding: var(--space-5) var(--gutter);
  overflow-y: auto; display: none;
}
.mobile-nav[data-open='true'] { display: block; }
.mobile-nav__list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-2); }
.mobile-nav__link {
  display: block; padding: var(--space-3) 0; font-size: var(--step-1);
  text-decoration: none; color: var(--ink-strong); border-bottom: 1px solid var(--border);
}
body[data-nav-open='true'] { overflow: hidden; }

/* Hero ----------------------------------------------------------------------- */
.hero { position: relative; display: grid; }
.hero > * { grid-area: 1 / 1; }
.hero__media img { width: 100%; height: clamp(340px, 52vh, 620px); object-fit: cover; }
.hero::after {
  content: ''; grid-area: 1 / 1;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.34) 55%, rgb(0 0 0 / 0.12) 100%);
}
.hero__body { position: relative; z-index: 2; align-self: center; padding-block: var(--space-6); }
.hero__body .container > * { color: #fff; }
.hero h1 { color: #fff; max-width: 20ch; text-shadow: 0 1px 18px rgb(0 0 0 / 0.35); }
.hero .eyebrow { color: #fff; opacity: 0.92; }
.hero__sub { font-size: var(--step-1); max-width: 46ch; margin-bottom: var(--space-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero--compact .hero__media img { height: clamp(220px, 32vh, 360px); }

/* Layout helpers -------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.split { display: grid; gap: var(--space-6); align-items: start; }
.split--center { align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--media-first > .split__media { order: -1; } }
.split__media img { border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.prose > :last-child { margin-bottom: 0; }
.stack > * + * { margin-top: var(--space-3); }

/* Cards ----------------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-5); height: 100%;
}
.card h3 { margin-bottom: var(--space-2); }
.card > :last-child { margin-bottom: 0; }

.property-card {
  position: relative; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.property-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.property-card:has(a:focus-visible) { box-shadow: var(--shadow-card-hover); }
.property-card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.property-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.property-card__address { font-family: var(--font-display); font-size: var(--step-2); margin: 0; }
.property-card__address a { text-decoration: none; color: var(--ink-strong); }
.property-card__address a::after { content: ''; position: absolute; inset: 0; }
.property-card__address a:hover { color: var(--brand-navy); }
.property-card__meta { color: var(--ink-muted); font-size: var(--step--1); margin: 0; }

/* Gallery --------------------------------------------------------------------- */
.gallery-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gallery-item { margin: 0; position: relative; }
.gallery-item button {
  display: block; padding: 0; border: 0; background: none; cursor: zoom-in;
  width: 100%; border-radius: var(--radius-md); overflow: hidden;
}
.gallery-item img {
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
  transition: transform 260ms ease;
}
.gallery-item button:hover img { transform: scale(1.03); }

.lightbox {
  position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / 0.92);
  display: none; place-items: center; padding: var(--space-4);
}
.lightbox[data-open='true'] { display: grid; }
.lightbox__figure { margin: 0; max-width: min(100%, 1400px); text-align: center; }
.lightbox__figure img { max-height: 82vh; width: auto; margin-inline: auto; border-radius: var(--radius-sm); }
.lightbox__caption { color: #fff; font-size: var(--step--1); margin-top: var(--space-3); }
.lightbox__btn {
  position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px;
  background: rgb(255 255 255 / 0.14); color: #fff; border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: var(--radius-pill); font-size: 1.5rem; cursor: pointer; line-height: 1;
}
.lightbox__btn:hover { background: rgb(255 255 255 / 0.28); }
.lightbox__prev { left: var(--space-3); }
.lightbox__next { right: var(--space-3); }
.lightbox__close { position: absolute; top: var(--space-3); right: var(--space-3); translate: none; }

/* Forms ------------------------------------------------------------------------ */
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-1); }
.field__label { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em; }
.field__req { color: var(--brand-navy); }
.field input, .field textarea {
  font: inherit; font-size: var(--step-0); color: var(--ink-strong);
  padding: var(--space-2) var(--space-3); min-height: 48px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--brand-navy); }
.field[data-invalid='true'] input, .field[data-invalid='true'] textarea { border-color: #b3261e; }
.field__error { color: #b3261e; font-size: var(--step--1); min-height: 0; }
.field[data-invalid='true'] .field__error { min-height: 1.4em; }
.form__status { font-size: var(--step-0); }
.form__status[data-state='error'] { color: #b3261e; }
.form-panel { background: var(--brand-navy); color: #fff; border-radius: var(--radius-md); padding: clamp(var(--space-5), 4vw, var(--space-7)); }
.form-panel h2, .form-panel p, .form-panel .field__label { color: #fff; }
.form-panel .field__req { color: #fff; }
.form-panel .field__error { color: #ffd7d3; }
.form-panel .form__status { color: #fff; }
.form-success { display: none; }
.form-panel[data-submitted='true'] .form-success { display: block; }
.form-panel[data-submitted='true'] .form, .form-panel[data-submitted='true'] .form-panel__intro { display: none; }

/* Footer ------------------------------------------------------------------------ */
.footer { background: var(--brand-navy); color: #fff; padding-block: var(--space-7) var(--space-5); }
.footer a:not(.btn) { color: #fff; }
.footer .btn--on-dark { color: var(--brand-navy); }
.footer .btn--on-dark:hover { color: var(--brand-navy-deep); }
.footer__grid { display: grid; gap: var(--space-6); }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.2fr 1fr 1.4fr; } }
.footer h2 { color: #fff; font-size: var(--step-1); }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer__list a { text-decoration: none; }
.footer__list a:hover { text-decoration: underline; }
.footer__logo img { width: 220px; filter: brightness(0) invert(1); }
.footer__legal {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid rgb(255 255 255 / 0.25);
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between;
  font-size: var(--step--1);
}

/* Breadcrumbs -------------------------------------------------------------------- */
.breadcrumb { font-size: var(--step--1); padding-block: var(--space-3); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.breadcrumb li + li::before { content: '/'; margin-right: var(--space-2); color: var(--ink-muted); }

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

/* Motion -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 480ms ease, transform 480ms ease; }
.reveal[data-visible='true'] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .property-card:hover, .btn--primary:hover { transform: none; }
  .gallery-item button:hover img { transform: none; }
}

@media print {
  .header, .footer, .lightbox, .nav-toggle, .mobile-nav { display: none !important; }
  body { color: #000; }
}

/* Services panel ------------------------------------------------------------- */
.services-split { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .services-split { grid-template-columns: 0.85fr 1.15fr; } }
.services-panel {
  background: var(--brand-navy); color: #fff;
  padding: clamp(var(--space-5), 3vw, var(--space-7)); border-radius: var(--radius-md);
}
.services-panel h2, .services-panel p { color: #fff; }
.services-panel > :last-child { margin-bottom: 0; }
.eyebrow--on-dark { color: #fff; opacity: 0.85; }

.service-block { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.service-block + .service-block { margin-top: var(--space-6); }
.service-block__icon { color: var(--brand-navy); }
.service-block__icon svg { display: block; }
.service-block h3 { margin-bottom: var(--space-2); }
.service-block h3 a { text-decoration: none; color: var(--ink-strong); }
.service-block h3 a:hover { color: var(--brand-navy); }
.service-block > div > :last-child { margin-bottom: 0; }
@media (max-width: 600px) { .service-block { grid-template-columns: 1fr; } }

/* Homepage photo grid --------------------------------------------------------- */
/* Three across at desktop, matching the source's 3x2 arrangement. auto-fit
   produced a ragged 4-then-2 break at 1440. */
.photo-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 600px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
.photo-grid__item { margin: 0; border-radius: var(--radius-md); overflow: hidden; }
.photo-grid__item img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/* About media ----------------------------------------------------------------- */
.about-media { display: grid; gap: var(--space-3); }
.about-media figure { margin: 0; }
.about-media img { border-radius: var(--radius-md); width: 100%; object-fit: cover; aspect-ratio: 16 / 9; }

/* Contact + map --------------------------------------------------------------- */
.contact-split { display: grid; gap: 0; align-items: stretch; }
@media (min-width: 900px) { .contact-split { grid-template-columns: 1fr 1fr; } }
.contact-split .form-panel { border-radius: var(--radius-md) var(--radius-md) 0 0; }
@media (min-width: 900px) { .contact-split .form-panel { border-radius: var(--radius-md) 0 0 var(--radius-md); } }
.map-embed { min-height: 340px; }
.map-embed iframe {
  display: block; width: 100%; height: 100%; min-height: 340px; border: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
@media (min-width: 900px) { .map-embed iframe { border-radius: 0 var(--radius-md) var(--radius-md) 0; } }

/* ---------------------------------------------------------------------------
   Two-tone display headings — the source site's signature treatment. One half
   roman in brand navy, the other italic in near-black. Content marks the
   italic half with *asterisks*; build-pages.mjs splits on them.
--------------------------------------------------------------------------- */
.display { font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.display .h-lead { color: var(--brand-navy); font-style: normal; }
.display .h-accent { color: var(--ink-strong); font-style: italic; font-weight: 700; }
.hero .display .h-lead, .hero .display .h-accent { color: #fff; }
.hero .display .h-accent { opacity: 0.96; }
.services-panel .display .h-lead, .services-panel .display .h-accent { color: #fff; }
.form-panel .display .h-lead, .form-panel .display .h-accent { color: #fff; }
.service-block h3.display a { color: inherit; }
.service-block h3.display a:hover .h-lead { color: var(--brand-navy-deep); }

/* Hero: the source stacks eyebrow, two-tone display, then a spaced sub-line. */
.hero .eyebrow { letter-spacing: 0.22em; font-size: 0.8125rem; }
.hero__sub {
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500;
  font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.0625rem);
  margin-top: var(--space-3); margin-bottom: var(--space-5);
}
.hero__h2 {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: #fff;
  margin: 0 0 var(--space-5); opacity: 0.9;
}

/* Eyebrows carry more space, matching the source's small-caps rhythm. */
.eyebrow { letter-spacing: 0.2em; font-size: 0.8125rem; }

/* ---------------------------------------------------------------------------
   De-boxed sections. The source sets its services and differentiators on open
   white with type and space doing the work; the bordered card stack this
   replaces read as a template.
--------------------------------------------------------------------------- */
.card {
  background: none; border: 0; border-top: 2px solid var(--brand-navy);
  border-radius: 0; padding: var(--space-4) 0 0; height: auto;
}
.card h3 { margin-bottom: var(--space-2); }

.property-card { border: 0; border-radius: 0; background: none; box-shadow: none; }
.property-card picture, .property-card img { border-radius: var(--radius-sm); }
.property-card:hover { box-shadow: none; transform: none; }
.property-card:hover img { filter: brightness(1.04); }
.property-card img { transition: filter 200ms ease; }
.property-card__body { padding: var(--space-3) 0 0; }
.property-card__address { font-size: var(--step-2); }

.photo-grid__item { border-radius: var(--radius-sm); }
.split__media img { border-radius: var(--radius-sm); box-shadow: none; }
.about-media img { border-radius: var(--radius-sm); }
.services-panel { border-radius: 0; }
.form-panel { border-radius: 0; }
.contact-split .form-panel, .map-embed iframe { border-radius: 0; }

/* Centred section headings where the source centres them. */
.section--centred { text-align: center; }
.section--centred .eyebrow { letter-spacing: 0.2em; }
.section--centred .lede { margin-inline: auto; }
.section--centred .card { text-align: left; }
.section--centred .display { margin-inline: auto; max-width: 22ch; }

/* A little more air between major bands. */
.section { padding-block: clamp(var(--space-7), 8vw, 7rem); }

/* Italic-to-roman transitions run tight; give the join a little air. */
.display .h-accent + .h-lead, .display .h-lead + .h-accent { margin-left: 0.14em; }

/* .section--tight-top must come after the section padding rule above. */
.section--tight-top { padding-top: 0; }

/* Property card headings should still read as links. */
.property-card__address a { color: var(--brand-navy); }
.property-card__address a:hover { color: var(--brand-navy-deep); text-decoration: underline; }

/* The hero already states the promise; the SEO line beneath it is supporting
   text, so it sits quieter than the sub-line above it. */
.hero__h2 { font-size: 0.8125rem; letter-spacing: 0.18em; opacity: 0.78; font-weight: 400; }

/* A section that flows straight on from the one above it needs no second
   full-height gap; the two were stacking to roughly 12rem of dead space. */
.section--tight-top { padding-top: 0; }
.section:has(+ .section--tight-top) { padding-bottom: var(--space-6); }

/* ---------------------------------------------------------------------------
   1. Why Parkwood cards: navy fill, white type.
--------------------------------------------------------------------------- */
.card {
  background: var(--brand-navy); color: #fff; border: 0; border-radius: var(--radius-md);
  padding: clamp(var(--space-4), 2.5vw, var(--space-6));
  height: 100%; display: flex; flex-direction: column;
  transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.card h3, .card h3 .h-lead, .card h3 .h-accent, .card p { color: #fff; }
.card p { opacity: 0.92; }
.card > :last-child { margin-bottom: 0; }
.card:hover { background: var(--brand-navy-deep); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }

/* ---------------------------------------------------------------------------
   2. Hero: taller, with a cross-fading slideshow.
--------------------------------------------------------------------------- */
/* clip contains the Ken Burns scale on the slide images; without it the
   1.09 zoom pushes the document ~18px wider than the viewport on mobile. */
.hero { position: relative; display: grid; isolation: isolate; overflow: clip; }
.hero > * { grid-area: 1 / 1; }
.hero__media { position: relative; grid-area: 1 / 1; overflow: clip; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1100ms ease-in-out;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide picture, .hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__media { min-height: clamp(560px, 84vh, 900px); }
.hero__media img { width: 100%; height: clamp(560px, 84vh, 900px); object-fit: cover; }
.hero--compact .hero__media { min-height: clamp(280px, 42vh, 460px); }
.hero--compact .hero__media img { height: clamp(280px, 42vh, 460px); }

.hero::after {
  content: ''; grid-area: 1 / 1; z-index: 1;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.68) 0%, rgb(0 0 0 / 0.42) 48%, rgb(0 0 0 / 0.12) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 0.34) 0%, rgb(0 0 0 / 0) 34%, rgb(0 0 0 / 0.36) 100%);
}
.hero__body { position: relative; z-index: 2; align-self: center; padding-block: var(--space-7); }
.hero h1 { max-width: 16ch; text-shadow: 0 2px 30px rgb(0 0 0 / 0.42); }
.hero--slides h1 { font-size: clamp(2.6rem, 1.7rem + 4.4vw, 5.25rem); line-height: 1.02; }
.hero--slides .hero__sub { letter-spacing: 0.2em; }

.hero__dots {
  position: relative; z-index: 3; align-self: end; justify-self: center;
  display: flex; gap: var(--space-2); padding-bottom: var(--space-5);
}
.hero__dot {
  width: 40px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  display: grid; place-items: center;
}
.hero__dot::before {
  content: ''; display: block; width: 34px; height: 3px; border-radius: 2px;
  background: rgb(255 255 255 / 0.45); transition: background-color 220ms ease;
}
.hero__dot:hover::before { background: rgb(255 255 255 / 0.75); }
.hero__dot.is-active::before { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

/* ---------------------------------------------------------------------------
   3. Mobile header: logo left, menu toggle hard right. The three-column desktop
      grid collapsed to two when the contact block was hidden, which parked the
      toggle beside the logo and left dead space on the right.
--------------------------------------------------------------------------- */
.header__top { grid-template-columns: 1fr auto; }
.header__logo { justify-self: start; }
.header__action { justify-self: end; }

@media (min-width: 900px) {
  .header__top { grid-template-columns: 1fr auto 1fr; }
  .header__logo { justify-self: center; }
}

/* Measured header heights: 69px below 900px (top row only) and 144px above it
   (top row plus nav row). --header-h drives both the mobile panel offset and
   the jump-link clearance, so it has to track the real value at each breakpoint. */
:root { --header-h: 69px; }
@media (min-width: 900px) { :root { --header-h: 144px; } }
:target, [id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* Metric-adjusted fallbacks. Without these the swap from the system serif to
   Playfair re-wraps large display headings and registers as layout shift. */
@font-face {
  font-family: 'Playfair Fallback';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 108%; ascent-override: 92%; descent-override: 22%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Jost Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans');
  size-adjust: 94%; ascent-override: 96%; descent-override: 26%; line-gap-override: 0%;
}
:root {
  --font-display: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
  --font-body: 'Jost', 'Jost Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ===========================================================================
   Fix: centred sections. p { max-width: 68ch } left the eyebrow flush left in
   a 1200px container, so its centred text sat 316px left of the heading's
   centre. Constrained blocks inside a centred section need auto margins.
=========================================================================== */
.section--centred p,
.section--centred .eyebrow,
.section--centred .lede { margin-inline: auto; }
.section--centred .eyebrow { max-width: 46ch; }

/* ===========================================================================
   Hero controls: arrows and scroll cue.
=========================================================================== */
.hero__arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  width: 56px; height: 56px; display: grid; place-items: center;
  color: #fff; background: rgb(0 0 0 / 0.22); border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 50%; cursor: pointer;
  opacity: 0.55; transition: opacity 200ms ease, background-color 200ms ease, transform 200ms ease;
}
.hero:hover .hero__arrow { opacity: 0.9; }
.hero__arrow:hover { opacity: 1; background: rgb(0 0 0 / 0.42); }
.hero__arrow:focus-visible { opacity: 1; }
.hero__arrow--prev { left: clamp(0.5rem, 2vw, 2rem); }
.hero__arrow--next { right: clamp(0.5rem, 2vw, 2rem); }
.hero__arrow--prev:hover { transform: translateX(-2px); }
.hero__arrow--next:hover { transform: translateX(2px); }
@media (max-width: 600px) { .hero__arrow { width: 44px; height: 44px; opacity: 0.75; } }

.hero__footer {
  position: relative; z-index: 3; grid-area: 1 / 1; align-self: end; justify-self: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding-bottom: var(--space-5);
}
.hero__dots { display: flex; gap: var(--space-2); padding: 0; }

.hero__scroll {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  color: #fff; text-decoration: none; opacity: 0.8; transition: opacity 200ms ease;
}
.hero__scroll:hover, .hero__scroll:focus-visible { opacity: 1; color: #fff; }
.hero__scroll-label {
  font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500;
}
.hero__scroll-line {
  display: block; width: 1px; height: 46px; background: rgb(255 255 255 / 0.5);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ''; position: absolute; inset-inline: 0; top: -60%; height: 60%;
  background: #fff; animation: scroll-cue 2.2s cubic-bezier(0.5, 0, 0.2, 1) infinite;
}
@keyframes scroll-cue {
  0% { top: -60%; } 70% { top: 100%; } 100% { top: 100%; }
}

/* ===========================================================================
   Cinematic scroll.
=========================================================================== */

/* Slow drift on the active hero slide. */
.hero--slides .hero__slide img { transform: scale(1.02); transition: transform 7s linear; }
.hero--slides .hero__slide.is-active img { transform: scale(1.09); }

/* Parallax: JS writes --py; only transforms move, so nothing reflows.
   The 1.14 scale is what keeps the 6%-of-height travel inside the frame —
   without it the image slides far enough to expose an empty edge. */
[data-parallax] { overflow: clip; will-change: transform; }
[data-parallax] img { transform: translate3d(0, var(--py, 0px), 0) scale(1.14); }

/* Full-bleed chapter band — the source composes this section the same way,
   with a text panel sitting over the photograph. */
.band { position: relative; display: grid; isolation: isolate; overflow: clip; }
.band > * { grid-area: 1 / 1; }
.band__media { overflow: clip; }
.band__media img {
  width: 100%; height: 100%; min-height: clamp(520px, 76vh, 820px);
  object-fit: cover; transform: translate3d(0, var(--py, 0px), 0) scale(1.18);
}
.band::after {
  content: ''; grid-area: 1 / 1; z-index: 1;
  background: linear-gradient(100deg, rgb(0 0 0 / 0.66) 0%, rgb(0 0 0 / 0.38) 52%, rgb(0 0 0 / 0.10) 100%);
}
.band__body { position: relative; z-index: 2; align-self: center; padding-block: clamp(var(--space-7), 8vw, 7rem); }
.band__panel { max-width: 46ch; }
.band__panel h2, .band__panel p { color: #fff; }
.band__panel .h-lead, .band__panel .h-accent { color: #fff; }
.band__panel .h-accent { opacity: 0.94; }
.band__panel > :last-child { margin-bottom: 0; }

/* Richer, staggered reveals. */
.reveal {
  opacity: 0; transform: translateY(28px) scale(0.985);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal[data-visible='true'] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero--slides .hero__slide img,
  .hero--slides .hero__slide.is-active img { transform: none; transition: none; }
  [data-parallax] img, .band__media img { transform: none; }
  .band__media img { transform: scale(1.02); }
  .hero__scroll-line::after { animation: none; top: 0; height: 100%; opacity: 0.6; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================================
   1. Hero footer: Scroll sits above the slide indicator, and the CTA row gets
      breathing room so it never crowds the cue.
=========================================================================== */
.hero__footer { gap: var(--space-4); }
.hero__actions { margin-bottom: clamp(var(--space-6), 8vh, var(--space-8)); }
.hero__scroll { order: -1; }
.hero__dots { order: 0; }

/* ===========================================================================
   2. Hold the standfirst to two lines.
=========================================================================== */
/* Measured: the standfirst is 831px on one line. A 34rem cap divides it into
   two balanced lines; the 40ch cap I first used was far too narrow and forced
   three. Below 900px it wraps naturally. */
.section--centred .eyebrow { max-width: min(100%, 34rem); text-wrap: balance; }

/* ===========================================================================
   3. Navy card hover. The lift previously died because
      .reveal[data-visible='true'] { transform: none } sits later in this file
      with equal specificity, so it cancelled .card:hover's transform.
=========================================================================== */
.card {
  position: relative; overflow: clip;
  transition: background-color 260ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: #fff; transform: scaleX(0); transform-origin: left;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover::after, .card:focus-within::after { transform: scaleX(1); }
.reveal.card[data-visible='true']:hover,
.reveal.card[data-visible='true']:focus-within,
.card:hover, .card:focus-within {
  background: var(--brand-navy-deep);
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgb(15 77 140 / 0.28);
}

/* ===========================================================================
   4. Footer: space between the logo and the consultation button.
=========================================================================== */
.footer__logo { margin-bottom: var(--space-5); }

/* ===========================================================================
   6. Inner pages: give the secondary heroes room and the same weight of
      composition as the homepage.
=========================================================================== */
.hero--compact .hero__media { min-height: clamp(360px, 54vh, 600px); }
.hero--compact .hero__media img { height: clamp(360px, 54vh, 600px); }
.hero--compact h1 { max-width: 20ch; }
.hero--compact .hero__body { padding-block: var(--space-6); }
.hero--compact .hero__actions { margin-bottom: 0; }

/* Inner-page splits share the homepage rhythm. */
.split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .split { gap: clamp(var(--space-6), 5vw, var(--space-8)); } }

/* ===========================================================================
   Property specifications. The source publishes these on every property page;
   the first build omitted them because discovery missed the widget.
=========================================================================== */
.specs {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
  border-block: 1px solid var(--border); padding-block: var(--space-5);
}
@media (min-width: 700px) { .specs { grid-template-columns: repeat(4, 1fr); } }
.spec { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; }
@media (min-width: 700px) { .spec + .spec { border-left: 1px solid var(--border); padding-left: var(--space-5); } }
.spec__value {
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem); color: var(--brand-navy);
}
.spec__label {
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 500; white-space: nowrap;
}
/* Inside the card the four specs sit closer together, so ease the tracking
   rather than let "Square feet" wrap and knock that column out of line. */
.specs-card .spec__label { letter-spacing: 0.12em; }
.specs-card .specs { gap: var(--space-4); }
.specs-card .spec + .spec { padding-left: var(--space-4); }
.section--tight-bottom { padding-bottom: 0; }

.hero__specs {
  color: #fff; font-size: var(--step--1); letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 500; margin: 0 0 var(--space-4); opacity: 0.95;
}

/* ===========================================================================
   1. About section: match the media column to the copy so the band reads
      balanced instead of top-weighted with a long tail of whitespace.
=========================================================================== */
/* The copy sets the height of the band; the two images divide it between them,
   so the column ends level with the text instead of running past it. */
#about .split { align-items: stretch; }
#about .about-media {
  display: grid; grid-template-rows: 1fr 1fr; gap: var(--space-4);
  min-height: 0; align-self: stretch;
}
#about .about-media figure { min-height: 0; overflow: clip; border-radius: var(--radius-sm); margin: 0; }
#about .about-media img {
  width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover;
}
#about .prose { display: flex; flex-direction: column; justify-content: center; }
#about .prose > :last-child { margin-bottom: 0; }
@media (max-width: 899px) { #about .about-media { grid-template-rows: auto auto; } #about .about-media img { aspect-ratio: 16 / 9; } }
@media (min-width: 900px) { #about .split { gap: clamp(var(--space-6), 5vw, var(--space-8)); } }

/* Two ledes stacked on the gallery intro need the same centred treatment. */
.section--centred .lede + .lede { margin-top: var(--space-4); }

/* The hero sub-line runs the full width of the photograph and can cross into
   its brighter areas, where 0.78 opacity white was marginal. */
.hero__h2 {
  opacity: 0.95; font-weight: 500;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.75), 0 0 3px rgb(0 0 0 / 0.5);
}
.hero .eyebrow { text-shadow: 0 1px 10px rgb(0 0 0 / 0.6); }
.hero__specs { text-shadow: 0 1px 12px rgb(0 0 0 / 0.7); }
.hero__sub { text-shadow: 0 1px 14px rgb(0 0 0 / 0.6); }

/* A larger lede for the standalone intro bands. */
.lede--lg {
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.45rem);
  line-height: 1.55; max-width: 62ch;
}

/* ===========================================================================
   Inner-page intro band. Wider measure so the copy runs to fewer lines, half
   the vertical padding of a standard section, and a ground colour that has to
   differ from whatever sits beneath it.
=========================================================================== */
.section--compact { padding-block: clamp(var(--space-5), 4vw, 3.5rem); }
.section--centred .lede--lg { max-width: min(100%, 60rem); }
.lede--lg { font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.35rem); line-height: 1.6; }
.section--centred .lede--lg + .lede--lg { margin-top: var(--space-3); }

/* Per-property location map. The source publishes one static map image per
   listing showing the actual lot; it is far more use than the site-wide
   embed, which is pinned on Fort Worth. */
.property-map { margin: 0; border-radius: var(--radius-sm); overflow: clip; }
.property-map img { width: 100%; height: 100%; object-fit: cover; min-height: 240px; }
.figure-note { font-size: var(--step--1); color: var(--ink-muted); margin-top: var(--space-3); }

/* ===========================================================================
   Property detail page.
   Taller hero, a specification card that overlaps it, and an asymmetric view
   grid so the primary rendering leads instead of three equal thumbnails.
=========================================================================== */
.hero--property .hero__media { min-height: clamp(420px, 66vh, 720px); }
.hero--property .hero__media img { height: clamp(420px, 66vh, 720px); }
.hero--property .hero__body { padding-block: var(--space-7) clamp(var(--space-8), 12vh, 8rem); }
.hero--property h1 { max-width: 18ch; }

.specs-card {
  position: relative; z-index: 3;
  margin-top: clamp(-5.5rem, -7vw, -3rem);
  background: #fff; border-radius: var(--radius-md);
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.16);
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  display: grid; gap: var(--space-5);
}
@media (min-width: 1000px) { .specs-card { grid-template-columns: 1fr auto; align-items: center; } }
.specs-card .specs { border: 0; padding-block: 0; }
.specs-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 1000px) { .specs-card__actions { justify-content: flex-end; } }

/* Asymmetric view grid: the lead rendering carries the section. */
.views { display: grid; gap: var(--space-3); }
/* min-width/min-height 0: grid items default to min-content, so the image's
   intrinsic 1920px width forced the second track wider than its fr share and
   pushed the document 111px past the viewport. */
.views__item { margin: 0; border-radius: var(--radius-sm); overflow: clip; min-width: 0; min-height: 0; }
.views__item button {
  display: block; padding: 0; border: 0; background: none; cursor: zoom-in;
  width: 100%; height: 100%;
}
.views__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.views__item button:hover img { transform: scale(1.03); }

@media (min-width: 900px) {
  .views--2 { grid-template-columns: 3fr 2fr; }
  .views--2 .views__item { aspect-ratio: 16 / 10; }
  .views--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
  .views--3 .views__item:first-child { grid-row: 1 / span 2; }
  .views--3 .views__item { aspect-ratio: auto; min-height: 0; }
  .views--3 { min-height: 34rem; }
}
@media (max-width: 899px) { .views__item { aspect-ratio: 16 / 10; } }

@media (prefers-reduced-motion: reduce) { .views__item button:hover img { transform: none; } }

/* ===========================================================================
   Property detail: one dense two-column block instead of four thin bands.
   The page previously ran 4,126px for 226 words across eight stacked
   full-width sections, including a 163px coloured band holding one sentence.
=========================================================================== */
.property-detail { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 900px) { .property-detail { grid-template-columns: 1.9fr 1fr; gap: var(--space-6); } }
.property-detail__views { display: grid; gap: var(--space-3); min-width: 0; }

.detail-card {
  background: var(--surface-warm); border-radius: var(--radius-md);
  padding: clamp(var(--space-4), 2.5vw, var(--space-5));
  min-width: 0;
}
/* The card is shorter than the stack of renderings beside it, which left the
   right column dead below the fold. Sticky keeps it in view against the images
   instead of stranding whitespace. */
@media (min-width: 900px) {
  .detail-card { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}
.detail-card > :last-child { margin-bottom: 0; }
.detail-card p { max-width: none; }
.detail-card__lede { font-size: var(--step-1); color: var(--ink-strong); }
.detail-card__map { margin: var(--space-4) 0 var(--space-2); border-radius: var(--radius-sm); overflow: clip; }
.detail-card__map img { width: 100%; height: auto; display: block; }
.detail-card__links { font-size: var(--step--1); margin-bottom: var(--space-4); }
.detail-card .btn { width: 100%; }

/* The hero image is the primary rendering and opens the same viewer, so it is
   not repeated as the first tile below. */
/* The hero body is layered over the media in the same grid cell, so it was
   swallowing every click aimed at the image. Let pointer events fall through
   the overlay while its own links and buttons stay clickable. */
.hero--property .hero__body { pointer-events: none; }
/* The gradient overlay is a grid child painted above the media, so it was also
   swallowing clicks aimed at the image. */
.hero--property::after { pointer-events: none; }
.hero--property .hero__body a,
.hero--property .hero__body button { pointer-events: auto; }
.hero__zoom {
  display: block; width: 100%; height: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in;
}
.hero__zoom:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.hero__zoom picture, .hero__zoom img { width: 100%; height: 100%; object-fit: cover; }

.section--tight { padding-block: clamp(var(--space-5), 5vw, var(--space-7)); }
.specs-card + .breadcrumb { padding-top: var(--space-4); padding-bottom: 0; }
.breadcrumb + .section { padding-top: clamp(var(--space-5), 4vw, var(--space-6)); }
/* The enquiry band is mostly form controls; it does not need the full pad. */
.hero--property ~ .section--warm#contact { padding-block: clamp(var(--space-5), 5vw, var(--space-7)); }

/* ===========================================================================
   Wide enquiry panel. Stacked, this block ran 1,208px for 67 words and became
   the tallest thing on a property page. Copy sits beside the form, and the two
   short fields pair up, which removes a row.
=========================================================================== */
.form-panel--wide { padding: clamp(var(--space-5), 3.5vw, var(--space-6)); }
@media (min-width: 900px) {
  .form-panel--wide {
    display: grid; grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(var(--space-5), 4vw, var(--space-7)); align-items: start;
  }
  .form-panel--wide .form-panel__intro { align-self: center; }
  .form-panel--wide .form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
  .form-panel--wide .field--name { grid-column: 1; }
  .form-panel--wide .field--email { grid-column: 2; }
  .form-panel--wide .field--phone,
  .form-panel--wide .field--message,
  .form-panel--wide .form__status,
  .form-panel--wide button[type='submit'],
  .form-panel--wide input[type='text'][name='_gotcha'] { grid-column: 1 / -1; }
  .form-panel--wide button[type='submit'] { justify-self: start; }
  .form-panel--wide h2 { font-size: var(--step-2); }
  .form-panel--wide textarea { min-height: 104px; }
}
.form-panel--wide .form-panel__intro > :last-child { margin-bottom: 0; }

/* The status region is an aria-live target and must stay in the accessibility
   tree, so it is collapsed rather than removed while it holds no message. */
.form__status:empty { height: 0; margin: 0; overflow: hidden; }

.form__noscript { font-size: var(--step--1); margin-top: var(--space-3); }
.form-panel .form__noscript, .form-panel .form__noscript a { color: #fff; }

/* ===========================================================================
   Touch targets. verify-interactions found four controls under 44px: the hero
   slide dots (40 wide), the header phone link (22 tall), the small header CTA
   (41 tall), and the header logo link (36 tall on mobile).
=========================================================================== */
.hero__dot { width: 44px; height: 44px; }
.header__phone {
  display: inline-flex; align-items: center; min-height: 44px;
}
.btn--sm { min-height: 44px; }
.header__logo { display: inline-flex; align-items: center; min-height: 44px; }

/* Breadcrumb and footer legal links measured 20px tall, under the 24px WCAG
   2.5.8 AA minimum. Padding the inline box lifts the hit area without
   changing the visible type. */
.breadcrumb a, .footer__legal a, .detail-card__links a {
  display: inline-block; padding-block: 3px;
}
.footer__legal p { margin: 0; max-width: none; }

/* FAQ. Answers are always visible: an answer engine should not have to open an
   accordion to find them, and neither should a visitor. */
.faq { display: grid; gap: var(--space-5); }
@media (min-width: 800px) { .faq { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-6); } }
.faq__item { border-top: 2px solid var(--brand-navy); padding-top: var(--space-3); }
.faq__q { font-size: var(--step-1); margin-bottom: var(--space-2); color: var(--ink-strong); }
.faq__a { margin-bottom: 0; max-width: 46ch; }

/* Gallery groups */
.gallery-group + .gallery-group { margin-top: clamp(var(--space-6), 5vw, var(--space-8)); }
.gallery-group__title { font-size: var(--step-2); margin-bottom: var(--space-4); }