/* ──────────────────────────────────────────────────────────────────────
   Styx Mill — Components

   Component conventions per brief §12 — class names chosen so each
   block translates cleanly to an Astro component in the eventual NRL
   portfolio rebuild without semantic translation. Shared verbatim with
   the elmbridge-mews site so the whole portfolio carries one component set.

     .site-header / .site-footer
     .nav-primary / .mobile-menu-toggle
     .hero / .hero-content
     .proposition-strip
     .stage-status-table
     .home-card / .home-grid
     .point-card / .property-card / .property-gallery
     .section--dark / .dev-aerial / .team-*
     .location-map / .subscribe-modal
     .cta-band
     .facts-block
     .form-field / .form-actions
   ────────────────────────────────────────────────────────────────────── */

/* ── Site header / sticky nav ──────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 249, 245, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--colour-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 72px;
  padding-block: var(--space-3);
}

/* .site-header__brand wordmark styling lives in tokens.css (brand layer). */

.nav-primary {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav-primary a {
  color: var(--colour-text);
  text-decoration: none;
  font-size: var(--text-sm);
  padding-block: var(--space-2);
  position: relative;
  transition: color var(--motion-fast) var(--ease);
}
.nav-primary a:hover { color: var(--colour-accent); }
.nav-primary a[aria-current="page"] {
  color: var(--colour-accent);
}
.nav-primary a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 2px;
  background: var(--colour-accent);
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background var(--motion-fast) var(--ease),
              color var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease);
  cursor: pointer;
}

.btn--primary {
  background: var(--colour-accent);
  color: var(--colour-on-accent);
}
.btn--primary:hover {
  background: var(--colour-accent-hover);
  color: var(--colour-on-accent);
}

.btn--ghost {
  background: transparent;
  color: var(--colour-text);
  border-color: var(--colour-border-strong);
}
.btn--ghost:hover {
  border-color: var(--colour-text);
  color: var(--colour-text);
}

.btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--text-sm); letter-spacing: 0.1em; }
.btn--small { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: clamp(520px, 80vh, 780px);
  display: grid;
  align-items: end;
  background: var(--colour-surface-tint);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img,
.hero__media .hero__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__placeholder {
  background:
    linear-gradient(135deg, #1a4a5a 0%, #0d3a4a 35%, #003344 70%, #00222e 100%);
  display: grid;
  place-items: center;
  color: rgba(251, 249, 245, 0.5);
  font-family: var(--font-serif);
  font-size: var(--text-md);
  letter-spacing: 0.04em;
}
.hero__placeholder::before {
  content: "Master aerial render — placeholder";
}

.hero__overlay {
  position: absolute;
  inset: 0;
  /* The hero content is bottom-aligned, but this gradient stayed at 10%
     opacity until 40% down — so the eyebrow and the lede landed on bright sky
     and pale render and were close to unreadable. Ramps earlier and harder
     now, which keeps the sky clean at the top and gives the copy a surface to
     sit on. Matters most on a phone in daylight, which is 83% of this
     audience. */
  background:
    linear-gradient(180deg,
      rgba(0, 30, 40, 0.10) 0%,
      rgba(0, 30, 40, 0.16) 28%,
      rgba(0, 30, 40, 0.58) 58%,
      rgba(0, 30, 40, 0.82) 100%);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-block: var(--space-9) var(--space-8);
  color: var(--colour-on-accent);
}
.hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: var(--space-4);
  color: rgba(251, 249, 245, 0.85);
}
.hero h1 {
  color: var(--colour-on-accent);
  /* Ceiling matched to the reduced --text-3xl. Lexend at 60px over a photo
     read as shouty rather than premium; the brand sets headlines small and
     lets the imagery and the logo carry the weight (guide pp.11-14). */
  font-size: clamp(2rem, 4vw, 2.875rem);
  max-width: 20ch;
}
.hero__lede {
  font-size: var(--text-md);
  margin-top: var(--space-5);
  max-width: 56ch;
  color: rgba(251, 249, 245, 0.92);
}
.hero__actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-7);
  flex-wrap: wrap;
}

/* Inner-page hero — shorter than the home hero; same photo + overlay pattern
   so every tab opens with the same premium entry. */
.hero--inner { min-height: clamp(360px, 52vh, 520px); }

/* ── Proposition strip — freehold-vs-village contrast ──────────────── */
.proposition-strip {
  background: var(--colour-surface-elev);
  border-block: 1px solid var(--colour-border);
}
.proposition-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  padding-block: var(--space-7);
}
.proposition-strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.proposition-strip__item dt {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  color: var(--colour-brand);
}
.proposition-strip__item dd {
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  line-height: var(--line-normal);
}

/* ── Facts block (AI-readable, brief §3) ───────────────────────────── */
.facts-block {
  background: var(--colour-surface-elev);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  margin-block: var(--space-6);
}
.facts-block__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--colour-text-soft);
  margin-bottom: var(--space-3);
}
.facts-block p {
  font-size: var(--text-base);
  line-height: var(--line-normal);
  color: var(--colour-text);
}

/* ── Stage status table ────────────────────────────────────────────── */
.stage-status-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-6);
}
.stage-status-table th,
.stage-status-table td {
  text-align: left;
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--colour-border);
}
.stage-status-table th {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--colour-text-soft);
}
.stage-status-table td {
  font-size: var(--text-base);
}
.stage-status-table .stage-name {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  color: var(--colour-brand);
}

.stage-pill {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  background: var(--colour-surface-tint);
  color: var(--colour-text-muted);
  border: 1px solid var(--colour-border-strong);
}
.stage-pill[data-status="selling"] {
  background: var(--colour-accent-soft);
  color: var(--colour-accent-hover);
  border-color: var(--colour-accent-soft);
}
.stage-pill[data-status="consenting"],
.stage-pill[data-status="under-construction"] {
  background: #f0e6d3;
  color: #856023;
  border-color: #e2d3b0;
}
.stage-pill[data-status="under-offer"] {
  background: #fde8e8;
  color: #8a2a2a;
  border-color: #f5c0c0;
}

/* ── Home cards ─────────────────────────────────────────────────────── */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-block: var(--space-6);
}
.home-card {
  background: var(--colour-surface-elev);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--motion) var(--ease),
              transform var(--motion) var(--ease);
}
.home-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.home-card__media {
  aspect-ratio: 4 / 3;
  background: var(--colour-surface-tint);
  position: relative;
}
.home-card__banner {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: #8a2a2a;
  color: #fbf9f5;
  padding: 4px var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.home-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.home-card__title { font-size: var(--text-lg); color: var(--colour-brand); }
.home-card__media img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── Show Home anchor ─────────────────────────────────────────────── */
.showhome { display:grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-6); align-items:center; margin-top: var(--space-5); }
@media (max-width: 820px){ .showhome { grid-template-columns: 1fr; } }
.showhome__media img { width:100%; border-radius: var(--radius); display:block; }
.showhome__spec { list-style:none; margin: var(--space-4) 0 0; padding:0; display:grid; gap: var(--space-2); }
.showhome__spec li { padding-left: 1.5em; position:relative; color: var(--colour-text-muted); font-size: var(--text-sm); }
.showhome__spec li::before { content:"\2713"; position:absolute; left:0; color: var(--colour-accent); font-weight:700; }
.showhome__plans { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width: 560px){ .showhome__plans { grid-template-columns: 1fr; } }
.showhome__plans a { text-decoration:none; color: var(--colour-text-muted); font-size: var(--text-sm); }
.showhome__plans img { width:100%; border:1px solid var(--colour-border); border-radius: var(--radius); display:block; background:#fff; }
.showhome__plans span { display:block; margin-top: var(--space-2); }

/* ── Interactive site plan ────────────────────────────────────────── */
.section--tint { background: var(--colour-surface-tint); }
.siteplan { position:relative; max-width: 1100px; margin: var(--space-6) auto 0; border:1px solid var(--colour-border); border-radius: var(--radius); overflow:hidden; background:#fff; }
.siteplan__img { display:block; width:100%; height:auto; }
.plot { position:absolute; transform: translate(-50%,-50%); width:30px; height:30px; padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff; background: var(--colour-accent); border:2px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.4); cursor:pointer; transition: transform .12s; }
.plot--sold { background:#8a2a2a; }
/* Under offer: contract signed, conditions unconfirmed. Deliberately TEAL rather
   than a shade between the accent and the sold red — those two are already close
   under deuteranopia, and a third warm colour between them would be unreadable.
   Teal separates on hue AND lightness. */
.plot--offer { background:#2f5d6b; }
.plot:hover, .plot:focus-visible { transform: translate(-50%,-50%) scale(1.28); z-index:6; outline:none; }
.plot__num { pointer-events:none; }
.plot__pop { position:absolute; bottom:135%; left:50%; transform: translateX(-50%); min-width:150px; background: var(--colour-brand, #003344); color:#fff; padding:9px 12px; border-radius:8px; font-size:12px; font-weight:400; line-height:1.5; white-space:nowrap; text-align:center; opacity:0; pointer-events:none; transition: opacity .12s; box-shadow:0 6px 18px rgba(0,0,0,.35); z-index:7; }
.plot__pop b { color:#fff; }
.plot__pop::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color: var(--colour-brand,#003344); }
.plot__reg { color:#ffd9a8; font-weight:600; text-decoration:none; }
/* The pack sits ABOVE register in the popup and is the lighter ask: at the moment a
   visitor picks a home, taking the pack away is what they are ready to do. Register
   stays, in the accent colour, as the bigger commitment underneath. */
.plot__pack { color:#fff; font-weight:600; text-decoration:underline; }
.plot__sold { color:#ffb4a8; font-style:italic; }
.plot__offer { color:#9fd3e3; font-style:italic; }
.plot:hover .plot__pop, .plot:focus-visible .plot__pop, .plot.is-open .plot__pop { opacity:1; pointer-events:auto; }
.siteplan__legend { display:flex; flex-wrap:wrap; gap: var(--space-5); justify-content:center; padding: var(--space-4); font-size: var(--text-xs); color: var(--colour-text-muted); }
.siteplan__legend .dot { width:11px; height:11px; border-radius:50%; display:inline-block; margin-right:5px; vertical-align:middle; }
.dot--avail { background: var(--colour-accent); } .dot--sold { background:#8a2a2a; }
.dot--offer { background:#2f5d6b; }

/* ── availability list ────────────────────────────────────────────── */
.avail-wrap { margin-top: var(--space-6); }
.avail-wrap summary { cursor:pointer; color: var(--colour-accent); font-size: var(--text-sm); font-weight:600; }
.avail { width:100%; border-collapse:collapse; margin-top: var(--space-4); font-size: var(--text-sm); }
.avail th, .avail td { text-align:left; padding: var(--space-3); border-bottom:1px solid var(--colour-border); }
.avail th { color: var(--colour-text-muted); font-size: var(--text-xs); text-transform:uppercase; letter-spacing:.08em; }
.avail .sold { color:#8a2a2a; font-weight:600; }
.avail a { color: var(--colour-accent); text-decoration:none; }

/* ── Hero background image ─────────────────────────────────────────── */
.hero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* ── Featured homes (homepage → routes to The Homes) ──────────────── */
.featured__head { display:flex; justify-content:space-between; align-items:flex-end; gap: var(--space-5); flex-wrap:wrap; margin-bottom: var(--space-6); }
.featured-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 760px){ .featured-grid { grid-template-columns: 1fr; } }
.featured-card { display:flex; flex-direction:column; background: var(--colour-surface-elev); border:1px solid var(--colour-border); border-radius: var(--radius); overflow:hidden; text-decoration:none; color:inherit; transition: box-shadow var(--motion) var(--ease), transform var(--motion) var(--ease); }
.featured-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.featured-card__media { position:relative; aspect-ratio: 4 / 3; }
.featured-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.featured-card__tag { position:absolute; top: var(--space-3); left: var(--space-3); background: var(--colour-accent); color: var(--colour-on-accent); font-size: var(--text-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding: 4px var(--space-3); border-radius: var(--radius); }
.featured-card__body { padding: var(--space-5); display:flex; flex-direction:column; gap: var(--space-2); }
.featured-card__body h3 { color: var(--colour-brand); font-size: var(--text-lg); }
.featured-card__meta { color: var(--colour-text-muted); font-size: var(--text-sm); }
.featured-card__price { font-weight:600; font-size: var(--text-lg); }

/* ── Site-wide time-limited banner ─────────────────────────────────── */
.site-banner { background: var(--colour-accent); color: var(--colour-on-accent); font-size: var(--text-sm); }
.site-banner__inner { display:flex; align-items:center; justify-content:center; gap: var(--space-4); padding: var(--space-3) var(--space-4); flex-wrap:wrap; text-align:center; }
.site-banner p { margin:0; color: var(--colour-on-accent); }
.site-banner strong { color: var(--colour-on-accent); }
.site-banner__fine { opacity:0.8; font-size: var(--text-xs); }
.site-banner__cta { color: var(--colour-on-accent); font-weight:700; text-decoration:underline; white-space:nowrap; }
.site-banner__cta:hover { text-decoration:none; }

/* ── Construction progress gallery (data-driven) ──────────────────── */
.progress__head { display:flex; justify-content:space-between; align-items:flex-end; gap: var(--space-5); flex-wrap:wrap; margin-bottom: var(--space-6); }
.progress-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); }
.progress-card { margin:0; background: var(--colour-surface-elev); border:1px solid var(--colour-border); border-radius: var(--radius); overflow:hidden; }
.progress-card img { width:100%; aspect-ratio: 4 / 3; object-fit:cover; display:block; }
.progress-card figcaption { padding: var(--space-4); display:flex; flex-direction:column; gap: 4px; }
.progress-date { font-size: var(--text-xs); text-transform:uppercase; letter-spacing:.1em; color: var(--colour-accent); font-weight:600; }
.progress-card strong { color: var(--colour-brand); }
.progress-card figcaption span:last-child { color: var(--colour-text-muted); font-size: var(--text-sm); }
.progress-empty { color: var(--colour-text-muted); background: var(--colour-surface-elev); border:1px dashed var(--colour-border); border-radius: var(--radius); padding: var(--space-6); text-align:center; }
.progress-empty a { color: var(--colour-accent); }

/* ── CTA band ──────────────────────────────────────────────────────── */
.cta-band {
  background: var(--colour-accent);
  color: var(--colour-on-accent);
  padding-block: var(--space-8);
}
.cta-band h2 { color: var(--colour-on-accent); }
.cta-band__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: center;
}
.cta-band__inner > div { max-width: 60ch; }
.cta-band .btn--ghost {
  color: var(--colour-on-accent);
  border-color: rgba(251, 249, 245, 0.35);
}
.cta-band .btn--ghost:hover {
  border-color: var(--colour-on-accent);
  background: rgba(251, 249, 245, 0.08);
}

/* ── Footer ────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--colour-brand);
  color: rgba(251, 249, 245, 0.85);
  padding-block: var(--space-7);
}
.site-footer a { color: var(--colour-on-accent); }
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6);
  padding-block: var(--space-5);
}
.site-footer__col h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(251, 249, 245, 0.7);
  margin-bottom: var(--space-3);
}
.site-footer__col ul { list-style: none; padding: 0; }
.site-footer__col li + li { margin-top: var(--space-2); }
.site-footer__legal {
  border-top: 1px solid rgba(251, 249, 245, 0.15);
  padding-top: var(--space-5);
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: rgba(251, 249, 245, 0.6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ── Forms ─────────────────────────────────────────────────────────── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block: var(--space-4);
}
.form-field label {
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}
.form-field input,
.form-field textarea,
.form-field select {
  font: inherit;
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  background: var(--colour-surface-elev);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius);
  color: var(--colour-text);
  transition: border-color var(--motion-fast) var(--ease),
              box-shadow var(--motion-fast) var(--ease);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--colour-accent);
  box-shadow: 0 0 0 3px var(--colour-accent-soft);
}

/* ── Comparison table (Ownership page) ─────────────────────────────── */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-6);
}
.comparison-table th,
.comparison-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  vertical-align: top;
}
.comparison-table thead th {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--colour-text-soft);
  border-bottom: 2px solid var(--colour-border-strong);
}
.comparison-table thead th:nth-child(2) {
  background: var(--colour-accent-soft);
  color: var(--colour-accent-hover);
}
.comparison-table tbody tr:nth-child(odd) {
  background: rgba(243, 239, 230, 0.4);
}

/* ── Mobile menu (progressive enhancement) ─────────────────────────── */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--colour-text);
}

@media (max-width: 820px) {
  .nav-primary {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--colour-surface);
    border-bottom: 1px solid var(--colour-border);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4);
    gap: var(--space-2);
  }
  .nav-primary[data-open="true"] {
    display: flex;
  }
  .nav-primary a {
    padding: var(--space-3);
    border-radius: var(--radius);
  }
  .nav-primary a[aria-current="page"]::after { display: none; }
  .nav-primary a[aria-current="page"] { background: var(--colour-accent-soft); }

  .mobile-menu-toggle { display: inline-flex; }

  .hero { min-height: 60vh; }
  .cta-band__inner { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────────
   Home-page rework additions — shared with elmbridge-mews.
   ────────────────────────────────────────────────────────────────────── */

/* Visually-hidden (a11y labels) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Points of difference — minimal cards (no fluff) */
.point-card {
  background: transparent;
  padding: var(--space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.point-card__num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--colour-accent);
  letter-spacing: 0.18em;
}
.point-card__num::after { content: ""; display: block; width: 32px; height: 2px; background: var(--colour-accent); margin-top: var(--space-3); opacity: 0.6; }
.point-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--colour-brand);
  margin: 0;
  line-height: 1.2;
}
.point-card__desc {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--colour-text-muted);
  margin: 0;
}

/* Scroll-reveal — progressive enhancement. Visible by default; only hidden
   when JS is active (html.js), so no-JS / crawlers see everything. */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--motion-slow) var(--ease), transform var(--motion-slow) var(--ease);
  will-change: opacity, transform;
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Amenities chips — pill list of nearby points of interest */
.amenities-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.amenities-chips li {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--colour-text);
  background: var(--colour-surface-elev);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}

/* Location map (Leaflet) */
.location-map {
  width: 100%;
  height: clamp(320px, 42vw, 460px);
  border-radius: var(--radius);
  border: 1px solid var(--colour-border);
  box-shadow: var(--shadow-sm);
  background: var(--colour-surface-tint);
  z-index: 0; /* keep tiles under the sticky header */
}
.location-map__legend {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.location-map__dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.location-map__dot--styx { background: var(--colour-accent); }
.location-map__dot--em   { background: var(--colour-brand); }

/* Subscribe pop-up */
.subscribe-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.subscribe-modal[data-open="true"] { display: flex; }
.subscribe-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 30, 40, 0.55);
}
.subscribe-modal__dialog {
  position: relative;
  background: var(--colour-surface-elev);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 460px;
  width: 100%;
  padding: var(--space-8) var(--space-7) var(--space-7);
  text-align: center;
  animation: subscribe-in var(--motion) var(--ease);
}
@keyframes subscribe-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.subscribe-modal__close {
  position: absolute;
  top: var(--space-3); right: var(--space-4);
  background: none; border: none;
  font-size: 1.75rem; line-height: 1;
  color: var(--colour-text-soft);
  cursor: pointer;
}
.subscribe-modal__close:hover { color: var(--colour-brand); }
.subscribe-modal__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--colour-accent);
  margin: 0 0 var(--space-2);
}
.subscribe-modal__title { margin: 0 0 var(--space-3); color: var(--colour-brand); }
.subscribe-modal__lede {
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  line-height: 1.55;
  margin: 0 0 var(--space-5);
}
.subscribe-modal__form { display: flex; flex-direction: column; gap: var(--space-3); }
.subscribe-modal__form input {
  padding: var(--space-4);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  width: 100%;
}
.subscribe-modal__form input:focus-visible {
  outline: 2px solid var(--colour-accent);
  outline-offset: 1px;
}
.subscribe-modal__done {
  margin: var(--space-4) 0 0;
  color: var(--colour-success);
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────────
   NRL PROPERTY-CARD GALLERY — reusable, icon-based module.

   Drop-in for any North Ridge development site. Three pieces travel together:
     1. this CSS block
     2. the SVG icon sprite (id="nrl-prop-icons") — defines #i-bed #i-study
        #i-bath #i-toilet #i-car #i-floor #i-land
     3. the .property-card markup (one <article> per home; static HTML so
        crawlers/AI see every listing at first paint)
   Each card: photo + badge → icon feature row → address →
   feature note → price + PDF. Data mirrors data/homes.json.
   ────────────────────────────────────────────────────────────────────── */
.property-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px)  { .property-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .property-gallery { grid-template-columns: repeat(3, 1fr); } }

.property-card {
  display: flex; flex-direction: column;
  background: var(--colour-surface-elev);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease);
}
.property-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.property-card__media { position: relative; }
.property-card__media img {
  display: block; width: 100%; height: clamp(190px, 24vw, 230px); object-fit: cover;
}
.property-card__badge {
  position: absolute; top: var(--space-3); right: var(--space-3);
  background: rgba(0, 51, 68, 0.9); color: #fff;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 0;
}

.property-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.property-card__eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--colour-accent); margin: 0; }
.property-card__address { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 400; color: var(--colour-brand); margin: 0; line-height: 1.2; }

/* The icon feature row — the heart of the module */
.property-card__features {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  padding: var(--space-3) 0; margin: 0;
  border-top: 1px solid var(--colour-border);
  border-bottom: 1px solid var(--colour-border);
  list-style: none;
}
.feature { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--colour-text); font-weight: 600; }
.feature__icon { width: 22px; height: 22px; color: var(--colour-accent); flex: none; }
.feature__val { font-variant-numeric: tabular-nums; }
.feature__label { font-weight: 400; color: var(--colour-text-soft); font-size: var(--text-xs); }

.property-card__note { font-size: var(--text-sm); line-height: 1.55; color: var(--colour-text-muted); margin: 0; flex: 1; }
.property-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.property-card__price { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 700; color: var(--colour-brand); margin: 0; }

/* ──────────────────────────────────────────────────────────────────────
   Dark feature band — premium drama. Use sparingly (1–2 per page).
   Deep-teal section with light text + copper "bronze" accent (Landmark-style).
   ────────────────────────────────────────────────────────────────────── */
.section--dark { background: var(--colour-brand); color: rgba(251, 249, 245, 0.9); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .text-soft { color: var(--colour-accent-soft) !important; }
.section--dark .lead, .section--dark p { color: rgba(251, 249, 245, 0.82) !important; }
.section--dark .btn--ghost { color: #fff; border-color: rgba(251, 249, 245, 0.4); background: transparent; }
.section--dark .btn--ghost:hover { border-color: #fff; color: #fff; }

/* ──────────────────────────────────────────────────────────────────────
   Development aerial band — full-bleed "see the whole community" image
   with a caption overlay. References the complete development.
   ────────────────────────────────────────────────────────────────────── */
.dev-aerial { position: relative; }
.dev-aerial img {
  width: 100%;
  height: clamp(300px, 40vw, 600px);
  object-fit: cover;
  display: block;
}
.dev-aerial__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  background: linear-gradient(180deg, rgba(0,30,40,0.10) 35%, rgba(0,30,40,0.78));
}
.dev-aerial__overlay .container { padding-block: var(--space-7); color: #fff; }
.dev-aerial__overlay .text-soft { color: rgba(255,255,255,0.85) !important; }
.dev-aerial__overlay h2 { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.4); max-width: 22ch; }
.dev-aerial__overlay p { color: rgba(255,255,255,0.92); max-width: 56ch; }
.dev-aerial__stats {
  font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.04em;
  margin-top: var(--space-4) !important; display: flex; gap: var(--space-5); flex-wrap: wrap;
}
.dev-aerial__stats strong { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-lg); }

/* ──────────────────────────────────────────────────────────────────────
   TEAM / KEY-PEOPLE GRID — reusable. Each card: portrait photo (or initials
   placeholder until headshots land) + name + role + short bio.
   Swap .team-card__photo's text for <img> when real photos arrive.
   ────────────────────────────────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}
.team-card {
  display: flex; flex-direction: column;
  background: var(--colour-surface-elev);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.team-card__photo {
  aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--colour-surface-tint), var(--colour-accent-soft));
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--colour-brand);
  letter-spacing: 0.04em;
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.team-card__name { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 400; color: var(--colour-brand); margin: 0; line-height: 1.2; }
.team-card__role { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--colour-accent); margin: 0; }
.team-card__bio { font-size: var(--text-sm); line-height: 1.55; color: var(--colour-text-muted); margin: var(--space-2) 0 0; }
.team-card__contact { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.team-card__contact a { font-size: var(--text-sm); color: var(--colour-accent); text-decoration: none; }
.team-card__contact a:hover { text-decoration: underline; }

/* Team layout — large bios panel on the LHS spanning both rows; people tiles
   to the right. People tiles stay clean (photo + role + contact); the prose
   bios live in the left panel. */
.team-layout {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: var(--space-5);
}
.team-bio {
  grid-column: 1;
  grid-row: 1 / span 2;
  background: var(--colour-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.team-bio__eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.18em; color: var(--colour-accent-soft); margin: 0; }
.team-bio__name { font-family: var(--font-serif); font-weight: 400; color: #fff; margin: 0 0 var(--space-2); font-size: var(--text-md); line-height: 1.25; }
.team-bio__entry p { font-size: var(--text-sm); line-height: 1.6; color: rgba(251, 249, 245, 0.82); margin: 0; }

@media (max-width: 900px) {
  .team-layout { grid-template-columns: repeat(2, 1fr); }
  .team-bio { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 520px) {
  .team-layout { grid-template-columns: 1fr; }
}

/* ── Sticky action bar ─────────────────────────────────────────────────
   Mobile only. 83% of Elmbridge Mews traffic was mobile, and the actions
   that actually moved people — call, take the pack, get directions — sat
   on pages almost nobody reached (/location: 10 views of 1,309). This puts
   them at thumb height on every page. Close-out review §7.1, §7.3.

   Hidden on desktop, where the header nav and footer already carry them.
   ──────────────────────────────────────────────────────────────────── */
.action-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: flex;
  background: var(--colour-brand);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.18);
  /* Clears the iOS home indicator so the last item is never half-covered. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.action-bar__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* 56px minimum so the target clears the 44px accessibility floor with room
     to spare — this audience is not tapping precisely. */
  min-height: 56px;
  padding: var(--space-2) var(--space-1);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.88);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.action-bar__item:first-child { border-left: 0; }
.action-bar__item:hover,
.action-bar__item:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.08); }
.action-bar__item svg { width: 21px; height: 21px; fill: currentColor; display: block; }
.action-bar__item--primary { background: var(--colour-accent); color: #fff; }
.action-bar__item--primary:hover,
.action-bar__item--primary:focus-visible { background: var(--colour-accent-hover); color: #fff; }

/* Keeps the bar from covering the foot of the page. */
.action-bar-spacer { height: calc(56px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 861px) {
  .action-bar,
  .action-bar-spacer { display: none; }
}

/* ── Ungated pack strip ────────────────────────────────────────────────
   Deliberately not behind a form. At Elmbridge 51 households a month took
   the marketing pack with nothing in front of it, against 3 form starts —
   it is the pre-visit research step, and a form there suppresses the visit
   the advertising just paid for. Close-out review §3.1.
   ──────────────────────────────────────────────────────────────────── */
.pack-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-6);
}
/* nowrap only where there is room for it. "Download the pack (PDF)" is set
   uppercase with 0.1em tracking, which is wider than a 390px screen once the
   container gutters are taken off — left unscoped it pushed the whole document
   wider than the viewport and clipped every page on mobile. */
@media (min-width: 721px) {
  .pack-strip .btn { white-space: nowrap; }
}

@media (max-width: 720px) {
  .pack-strip { grid-template-columns: 1fr; }
  .pack-strip .btn { width: 100%; text-align: center; }
}

/* ── Enquiry form ──────────────────────────────────────────────────────
   Deliberately short. Elmbridge's form asked for six fields behind a
   required consent tickbox and collected three starts in 24 days; consent
   here is a disclosure line, which is what the Privacy Act 2020 actually
   works through.
   ──────────────────────────────────────────────────────────────────── */
.enquire-form {
  background: var(--colour-surface-elev);
  border: 1px solid var(--colour-border);
  padding: var(--space-6);
}
.enquire-form .btn { width: 100%; margin-top: var(--space-4); }

@media (min-width: 721px) {
  .enquire-form { padding: var(--space-7); }
  .enquire-form .btn { width: auto; }
}

/* Two actions in a CTA band — the ungated pack leads, registering follows. */
.cta-band__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.cta-band__actions .btn { text-align: center; }
@media (min-width: 721px) {
  .cta-band__actions .btn { white-space: nowrap; }
}


/* ── See it for yourself (homes) ─────────────────────────────────────────────────────── */
.seeit-grid { display:grid; gap:var(--space-5); grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); margin-top:var(--space-5); }
.seeit { margin:0; }
.seeit video { display:block; width:100%; aspect-ratio:16/9; background:#e9e6e1; border:1px solid rgba(0,51,68,.16); }
.seeit figcaption { margin-top:.7rem; font-size:var(--text-sm); line-height:1.5; }


/* ── Location: neighbourhood map ─────────────────────────────────────────────────────── */
.loc-map { margin:0; }
.loc-map img { display:block; width:100%; height:auto; border:1px solid rgba(0,51,68,.16); }
.loc-map figcaption { margin-top:.7rem; font-size:var(--text-sm); }

/* ── Location: walk tiles ────────────────────────────────────────────────────────────
   THE DISTANCE IS THE PICTURE. No photograph of any of these places exists in this repo,
   so rather than pad the tiles with stock imagery of somewhere that is not Styx Mill, the
   number carries the visual weight. It also happens to be the argument: 300 m is the
   headline, not a caption under one.

   The lead tile spans two columns and reverses to navy, because the reserve is the reason
   the development is where it is and a grid of equals would say the opposite. */
.walk-grid { display:grid; gap:1.25rem; margin-top:var(--space-6);
             grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.walk-tile { background:#fff; border:1px solid rgba(0,51,68,.16); padding:1.4rem 1.4rem 1.5rem;
             display:flex; flex-direction:column; }
.walk-tile--lead { grid-column:span 2; background:var(--colour-ink,#003344); color:#fff;
                   border-color:transparent; }
.walk-tile--quiet { background:transparent; border-style:dashed; }
.walk-dist { margin:0; font-family:'Lexend',system-ui,sans-serif; font-weight:700;
             font-size:clamp(2.6rem,6vw,3.6rem); line-height:.9; letter-spacing:-.04em;
             color:var(--colour-accent,#C06D3B); }
.walk-dist span { font-size:.42em; font-weight:600; letter-spacing:0; margin-left:.12em; }
.walk-tile--lead .walk-dist { color:#e6a375; }
.walk-time { margin:.5rem 0 0; font-family:'Lexend',system-ui,sans-serif; font-weight:600;
             font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; opacity:.75; }
.walk-tile h3 { margin:.85rem 0 .4rem; font-size:1.18rem; font-weight:600; line-height:1.25; }
/* Navy on navy. The lead tile reverses its background but headings keep the sitewide
   ink colour, so 'Styx Mill Conservation Reserve' — the most important line on the
   page — rendered invisible against its own tile. */
.walk-tile--lead h3 { font-size:1.5rem; color:#fff; }
.walk-tile--lead p:last-child { opacity:.92; }
.walk-tile p:last-child { margin:0; font-size:.97rem; line-height:1.55; opacity:.88; }

@media (max-width:640px) {
  /* One column on a phone, so the lead tile must stop spanning two of them. 83% of this
     site's traffic is mobile — the desktop arrangement is the special case here. */
  .walk-tile--lead { grid-column:span 1; }
}

/* ── Location: drive tiles ───────────────────────────────────────────────────────────
   Deliberately smaller and denser than the walk tiles. These are useful facts rather than
   reasons to buy, and giving them equal weight was what made the first version read like a
   timetable. */
.drive-grid { display:grid; gap:.9rem; margin-top:var(--space-6);
              grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.drive-tile { background:#fff; border:1px solid rgba(0,51,68,.14); padding:.95rem 1.05rem;
              display:flex; flex-direction:column; gap:.15rem; }
.drive-tile b { font-family:'Lexend',system-ui,sans-serif; font-weight:700; font-size:1.35rem;
                letter-spacing:-.02em; color:var(--colour-accent,#C06D3B); }
.drive-tile span { font-size:.95rem; line-height:1.35; }
.drive-tile i { font-style:normal; font-size:.8rem; opacity:.6; }


/* ── Facts, folded away ──────────────────────────────────────────────────────────────
   The Facts block stays in the DOM for machine extraction (see llms.txt) but out of the
   reading flow, where it was the second thing a human met on the page. */
.facts-details { border-top:1px solid rgba(0,51,68,.16); padding-top:1.1rem; }
.facts-details summary { cursor:pointer; font-family:'Lexend',system-ui,sans-serif;
  font-weight:600; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--colour-text-muted); }
.facts-details summary:hover { color:var(--colour-accent); }