/* Wrapped in @layer legacy: these rules lose to prestige-ds.css regardless
   of specificity. Rules are deleted from here as the design system covers them. */
@layer legacy {
/* ==========================================================================
   Prestige Properties — public site redesign layer (loaded last, wins on order)
   A modern brand refresh: new type, retuned green palette, softer depth,
   rounder geometry, and consistent card/hover treatment across every page.
   ========================================================================== */

:root {
  /* Brand palette aligned with the mobile app */
  --pp-green: #0B7A3B;
  --pp-green-600: #14A85A;
  --pp-green-700: #08743A;
  --pp-dark: #075E2B;
  --pp-ink: #0D1512;
  --pp-ink-2: #33413B;
  --pp-muted: #6B7770;
  --pp-line: #E7ECE9;
  --pp-line-2: #EEF3F0;
  --pp-canvas: #F5F8F6;
  --pp-surface: #FFFFFF;
  --pp-green-050: #EAFBF1;
  --pp-green-100: #CFF5DE;

  --pp-radius-sm: 12px;
  --pp-radius: 16px;
  --pp-radius-lg: 22px;
  --pp-radius-xl: 28px;

  --pp-shadow-sm: 0 4px 14px rgba(9, 30, 20, 0.06);
  --pp-shadow: 0 14px 34px rgba(9, 30, 20, 0.09);
  --pp-shadow-lg: 0 24px 60px rgba(9, 30, 20, 0.14);

  --pp-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Base ---------------------------------------------------------------- */
body {
  font-family: var(--pp-font);
  color: var(--pp-ink);
  background: var(--pp-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { background: var(--pp-canvas); }

h1, h2, h3, h4 { letter-spacing: -0.02em; }

.container { width: min(1200px, 92%); margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pp-green-700);
}

.section { padding: 84px 0; }
.tint-soft, .section.tint { background: var(--pp-canvas); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14.5px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(135deg, var(--pp-green-600), var(--pp-green-700));
  color: #fff;
  box-shadow: 0 12px 26px rgba(8, 116, 58, 0.28);
}
.btn-primary:hover { box-shadow: 0 18px 34px rgba(8, 116, 58, 0.36); }
.btn-outline {
  background: var(--pp-surface);
  border-color: var(--pp-line);
  color: var(--pp-ink);
  box-shadow: var(--pp-shadow-sm);
}
.btn-outline:hover { border-color: var(--pp-green-100); color: var(--pp-green-700); }
.btn-ghost { background: transparent; color: var(--pp-ink-2); }
.btn-ghost:hover { color: var(--pp-green-700); }
.btn-sm { padding: 9px 16px; font-size: 13px; }

/* ---- Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--pp-line-2);
  padding: 14px 0;
}
.site-header .brand-mark {
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(8, 116, 58, 0.18);
  overflow: hidden;
}
.site-nav a {
  color: var(--pp-ink-2);
  font-weight: 600;
  position: relative;
  transition: color 0.15s ease;
}
.site-nav a:hover { color: var(--pp-green-700); }

/* Brand logo lockup replaces the wordmark text */
.site-header { padding: 10px 0; }
.site-header .brand { gap: 0; flex: 0 0 auto; }
.site-header .site-logo { height: 64px; width: auto; display: block; }
.footer-logo { display: inline-flex; }
.footer-logo img {
  height: 66px;
  width: auto;
  display: block;
  background: #fff;
  border-radius: 14px;
  padding: 10px 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
@media (max-width: 640px) { .site-header .site-logo { height: 50px; } }

/* ---- Hero ---------------------------------------------------------------- */
.home-hero { background: #07170f; }
.home-hero h1 {
  font-size: clamp(34px, 5.4vw, 58px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.home-hero p { color: rgba(255, 255, 255, 0.88); font-size: clamp(15.5px, 1.7vw, 19px); line-height: 1.62; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--pp-green-050);
  border: 1px solid var(--pp-green-100);
  color: var(--pp-green-700);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.hero-search-panel {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line-2);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow);
  padding: 14px;
}
.hero-search-panel input, .hero-search-panel select {
  border-radius: 12px;
  border: 1px solid var(--pp-line);
  background: var(--pp-canvas);
}
.hero-search-button {
  border-radius: 14px;
  background: linear-gradient(135deg, var(--pp-green-600), var(--pp-green-700));
  color: #fff;
  box-shadow: 0 10px 22px rgba(8, 116, 58, 0.3);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.hero-search-button:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(8, 116, 58, 0.4); }
.hero-pills a {
  border-radius: 999px;
  border: 1px solid var(--pp-line);
  background: var(--pp-surface);
  color: var(--pp-ink-2);
  font-weight: 600;
  transition: all 0.15s ease;
}
.hero-pills a:hover { border-color: var(--pp-green-100); color: var(--pp-green-700); background: var(--pp-green-050); }

/* ---- Section headings ---------------------------------------------------- */
.home-section-head h2, .section-head h2 {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.home-section-head p, .section-head p { color: var(--pp-muted); font-size: 16px; line-height: 1.6; }

/* ---- Universal card treatment ------------------------------------------- */
.property-card,
.type-tile,
.area-card,
.assurance-card,
.journey-step,
.audience-panel,
.testi,
.agent-directory-card,
.agent-profile-card,
.contact-card,
.contact-rail-card,
.faq-item,
.story-card-stack,
.panel,
.content-panel,
.auth-card {
  border-radius: var(--pp-radius-lg);
  border: 1px solid var(--pp-line-2);
  background: var(--pp-surface);
  box-shadow: var(--pp-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}

.property-card:hover,
.type-tile:hover,
.area-card:hover,
.agent-directory-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pp-shadow);
  border-color: var(--pp-green-100);
}

/* Image cards clip their media so rounded corners + hover-zoom stay contained */
.property-card, .area-card, .agent-directory-card { overflow: hidden; }
.property-card .property-media { overflow: hidden; }
.property-card .property-media img { transition: transform 0.5s ease; }
.property-card:hover .property-media img { transform: scale(1.06); }

.price-tag {
  background: rgba(8, 116, 58, 0.92);
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.purpose-tag {
  background: rgba(255, 255, 255, 0.92);
  color: var(--pp-green-700);
  font-weight: 800;
  border-radius: 999px;
}

.type-tile i, .assurance-card i {
  color: var(--pp-green-700);
}
.type-tile:hover i { transform: scale(1.1); }

/* Journey step numbers */
.journey-step span {
  color: var(--pp-green-700);
  font-weight: 800;
}

/* Testimonials */
.testi .stars i { color: #F5A623; }
.testi .av, .agent-avatar, .who .av {
  background: linear-gradient(135deg, var(--pp-green-600), var(--pp-green-700));
  color: #fff;
  font-weight: 800;
}

/* Dark audience panel keeps a rich brand gradient */
.audience-panel.dark {
  background: linear-gradient(150deg, var(--pp-green-700), var(--pp-dark));
  color: #fff;
  border-color: transparent;
}
.audience-panel.dark p { color: rgba(255, 255, 255, 0.82); }
.audience-panel.dark i { color: #fff; }
.audience-panel.dark a { color: #fff; }

/* ---- Trust strip --------------------------------------------------------- */
.home-trust-strip {
  background: var(--pp-surface);
  border-top: 1px solid var(--pp-line-2);
  border-bottom: 1px solid var(--pp-line-2);
}
.home-trust-strip i { color: var(--pp-green-700); }

/* ---- Final CTA ----------------------------------------------------------- */
.home-final-cta {
  background: linear-gradient(150deg, var(--pp-green-700), var(--pp-dark));
  color: #fff;
}
.home-final-cta h2 { color: #fff; letter-spacing: -0.025em; }
.home-final-cta p { color: rgba(255, 255, 255, 0.85); }
.home-final-cta .eyebrow { color: var(--pp-green-100); }
.home-final-cta .btn-outline { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.home-final-cta .btn-outline:hover { background: rgba(255, 255, 255, 0.2); }

/* ---- Inner page heroes --------------------------------------------------- */
.page-hero, .inner-hero, .legal-hero, .property-inner-hero, .auth-section {
  background: radial-gradient(900px 380px at 82% -20%, var(--pp-green-050), transparent 60%),
              linear-gradient(180deg, #ffffff, var(--pp-canvas));
}

/* ---- Split auth layout (branded panel + form) --------------------------- */
.auth-section:has(.auth-brand) {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  place-items: stretch;
  width: min(1060px, 92%);
  margin: 56px auto;
  padding: 0;
  border-radius: var(--pp-radius-xl);
  overflow: hidden;
  border: 1px solid var(--pp-line-2);
  background: var(--pp-surface);
  box-shadow: var(--pp-shadow-lg);
}
.auth-section:has(.auth-brand) > .auth-card {
  width: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 46px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-brand {
  background:
    radial-gradient(600px 260px at 120% -10%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(160deg, var(--pp-green-700), var(--pp-dark));
  color: #fff;
  padding: 48px 42px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}
.auth-brand-logo {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 14px;
  padding: 8px 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.auth-brand-logo img { height: 34px; width: auto; display: block; }
.auth-brand-fallback { font-weight: 800; color: var(--pp-green-700); font-size: 20px; }
.auth-brand-top h2 {
  color: #fff;
  font-size: clamp(24px, 2.4vw, 31px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 24px 0 10px;
}
.auth-brand-top p { color: rgba(255, 255, 255, 0.82); font-size: 15px; line-height: 1.6; }
.auth-brand-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.auth-brand-list li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.94); font-weight: 600; font-size: 14.5px; }
.auth-brand-list li i {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.auth-brand-foot { border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 22px; }
.auth-brand-stars i { color: #F5C24B; font-size: 13px; margin-right: 1px; }
.auth-brand-foot p { color: #fff; font-size: 14.5px; line-height: 1.55; margin: 10px 0 6px; font-weight: 600; }
.auth-brand-foot span { color: rgba(255, 255, 255, 0.7); font-size: 12.5px; font-weight: 600; }

@media (max-width: 880px) {
  .auth-section:has(.auth-brand) {
    grid-template-columns: 1fr;
    width: min(480px, 92%);
    box-shadow: var(--pp-shadow);
  }
  .auth-brand { display: none; }
  .auth-section:has(.auth-brand) > .auth-card { padding: 32px 24px; }
}

/* ---- Forms / auth -------------------------------------------------------- */
.auth-card { box-shadow: var(--pp-shadow); border-radius: var(--pp-radius-xl); }
.form-group input, .form-group select, .form-group textarea,
.contact-form input, .contact-form select, .contact-form textarea {
  border-radius: 12px;
  border: 1px solid var(--pp-line);
  background: var(--pp-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--pp-green-600);
  box-shadow: 0 0 0 3px rgba(20, 168, 90, 0.12);
  outline: none;
}

/* ---- Footer -------------------------------------------------------------- */
.site-footer { background: #0B1712; color: rgba(255, 255, 255, 0.72); }
.site-footer h4 { color: #fff; letter-spacing: 0.02em; }
.site-footer a { color: rgba(255, 255, 255, 0.72); transition: color 0.15s ease; }
.site-footer a:hover { color: #fff; }
.footer-social a {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  transition: all 0.15s ease;
}
.footer-social a:hover { background: var(--pp-green-700); border-color: var(--pp-green-700); color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }

/* ---- Motion: gentle reveal on load -------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .home-section, .section { animation: pp-rise 0.5s ease both; }
}
@keyframes pp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Responsive layer — header drawer, fluid typography, touch targets
   Everything below is mobile-facing and intentionally loaded last.
   ========================================================================== */

/* ---- Header shell -------------------------------------------------------- */
/* The header itself is full-bleed (sticky background); this inner track holds
   the gutter so nothing sits flush against the viewport edge. */
.site-header-inner {
  width: min(1200px, 100%);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2.5vw, 24px);
}

/* On desktop the menu wrapper is transparent to layout, so .site-nav and
   .nav-actions stay direct flex children exactly as they were. */
.site-menu { display: contents; }

.site-header .site-nav { flex: 0 1 auto; min-width: 0; }
.site-header .nav-actions { flex: 0 0 auto; }

/* ---- Hamburger ----------------------------------------------------------- */
.nav-toggle {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--pp-line);
  border-radius: 12px;
  background: var(--pp-surface);
  color: var(--pp-ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.nav-toggle:hover { border-color: var(--pp-green-100); background: var(--pp-green-050); }
.nav-toggle:focus-visible { outline: 2px solid var(--pp-green-600); outline-offset: 2px; }

.nav-toggle-bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.22s ease, opacity 0.18s ease, top 0.22s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }

/* Morph into a close (×) while the drawer is open */
body.nav-open .nav-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ---- Backdrop ------------------------------------------------------------ */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  border: 0;
  padding: 0;
  background: rgba(7, 23, 15, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.nav-backdrop[hidden] { display: none; }
body.nav-open .nav-backdrop { opacity: 1; }

/* ---- Mobile drawer ------------------------------------------------------- */
@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }

  /* backdrop-filter on the header would make it the containing block for the
     fixed drawer, pinning the panel to the header box instead of the viewport.
     The glass effect is dropped here so the drawer anchors to the viewport. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--pp-surface);
  }

  /* The sticky header is its own stacking context, so the drawer nested inside
     it cannot out-rank the backdrop on its own — lift the whole header instead.
     This also keeps the logo and the close button above the dimmed page. */
  body.nav-open .site-header { z-index: 60; }

  /* Keep the toggle (now an X) above the open panel so it stays the obvious
     way out — it shares a stacking context with the drawer. */
  body.nav-open .nav-toggle {
    position: relative;
    z-index: 55;
    border-color: var(--pp-line);
    background: var(--pp-surface);
  }

  /* A closed drawer is display:none rather than translated off-screen — a
     fixed element parked past the right edge is not clipped by the body's
     overflow and would leave the page scrolling sideways. The slide is driven
     by animations instead, which run on the display change. */
  .site-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: min(340px, 86vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 88px 22px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--pp-surface);
    border-left: 1px solid var(--pp-line);
    box-shadow: -24px 0 60px rgba(9, 30, 20, 0.18);
  }
  body.nav-open .site-menu {
    display: flex;
    animation: pp-drawer-in 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .site-menu.is-closing {
    display: flex;
    animation: pp-drawer-out 0.24s cubic-bezier(0.4, 0, 1, 1) both;
  }

  .site-header .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
  }
  .site-header .site-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 650;
    color: var(--pp-ink);
  }
  .site-header .site-nav a:hover,
  .site-header .site-nav a:focus-visible {
    background: var(--pp-green-050);
    color: var(--pp-green-700);
  }
  /* The desktop underline sweep has no place in a stacked list */
  .site-header .site-nav a::after { display: none; }

  .site-header .nav-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--pp-line);
  }
  .site-header .nav-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 15px;
  }
  .site-header .nav-actions .btn-ghost {
    border: 1px solid var(--pp-line);
    background: var(--pp-surface);
    color: var(--pp-ink);
  }

  /* Lock the page behind the drawer */
  body.nav-open { overflow: hidden; }
}

@keyframes pp-drawer-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes pp-drawer-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

/* Desktop: make sure a drawer left open at a small width can't leak back in */
@media (min-width: 921px) {
  .nav-backdrop { display: none; }
  body.nav-open { overflow: auto; }
}

/* ---- Skip link ----------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 0 0 12px 12px;
  background: var(--pp-green-700);
  color: #fff;
  font-weight: 700;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 0; }

/* ---- Touch targets ------------------------------------------------------- */
@media (max-width: 920px) {
  .hero-search-panel input,
  .hero-search-panel select,
  .filter-bar input,
  .filter-bar select,
  .form-group input,
  .form-group select,
  .form-group textarea,
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    min-height: 46px;
    /* iOS zooms the page in when a focused field is under 16px */
    font-size: 16px;
  }

  .btn { min-height: 44px; }

  .site-footer .footer-col a,
  .site-footer .footer-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .footer-social a { width: 42px; height: 42px; }
}

/* ---- Overflow guards ----------------------------------------------------- */
/* Long unbroken strings (emails, references, URLs) are the usual culprit
   behind sideways scrolling on narrow screens. */
body { overflow-x: hidden; }

h1, h2, h3, h4, p, a, li, td, th, span, strong { overflow-wrap: break-word; }

img, video, iframe, canvas, svg { max-width: 100%; }
img, video { height: auto; }

/* Any wide table scrolls inside its own box rather than pushing the page out */
@media (max-width: 920px) {
  .table-wrap,
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap > table,
  .table-scroll > table { min-width: 640px; }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .nav-backdrop,
  .nav-toggle-bars span { transition: none; }
  body.nav-open .site-menu,
  .site-menu.is-closing { animation-duration: 0.01ms; }
}

/* ---- Grid shrink + long-string wrapping ---------------------------------- */
/* A `1fr` track is `minmax(auto, 1fr)`, and that `auto` floor is the content's
   min-content width — so a single long token (an email address, a reference)
   holds the column open and pushes the page wider than the viewport. These
   layouts get an explicit zero floor, and their children are allowed to shrink. */
.story-layout,
.contact-showcase,
.faq-layout,
.agent-profile-shell,
.legal-wrap,
.contact-grid {
  min-width: 0;
}
.story-layout > *,
.contact-showcase > *,
.faq-layout > *,
.agent-profile-shell > *,
.legal-wrap > *,
.contact-grid > * {
  min-width: 0;
}

@media (max-width: 1000px) {
  .story-layout,
  .contact-showcase,
  .faq-layout,
  .agent-profile-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* `overflow-wrap: break-word` does not lower an element's min-content width —
   only `anywhere` does. Reserve it for machine strings, which have no natural
   break points, so prose keeps breaking on spaces as normal. */
.contact-card a,
.contact-methods a,
.footer-contact a,
a[href^="mailto:"],
a[href^="tel:"],
.copy-value,
.ref-value,
code, kbd, samp {
  overflow-wrap: anywhere;
}

/* Cards that pair a fixed icon with flexible text need the text column to be
   shrinkable, otherwise the icon's basis plus min-content wins. */
.contact-card { flex-wrap: wrap; }
.contact-card > *:not(.cc-ic) { min-width: 0; flex: 1 1 0; }

}