/* ==========================================================================
   christiedowns.com.au — project site
   A Curated Property Group development site.

   Loads AFTER base.css, which is the Free Land Division design system
   (Apple HIG: clarity, deference, depth). This file does two jobs:

     1. Re-points the accent tokens. Base.css uses a land green that reads as
        "services". A property sales page wants to recede so the renders carry
        the colour, so the accent here is a deep slate-ink with a warm sand
        secondary. Contrast re-checked against the same surfaces.

     2. Adds the components base.css does not have: the numbers bar, the
        availability table, the document room, the floor plans, the amenity
        list.

   Do not fork base.css. Override it here so a fix upstream still lands.

   HISTORY — 18 October 2026. This file was briefly restyled to match
   144hutt.com.au (cream, navy, DM Serif Display, uppercase caps, square
   edges). That was reverted at the client's direction — the original
   treatment suits this product better. The CONTENT work from that pass was
   kept: floor plans, the Curated lockup, the residence table fixes,
   cache-busted asset links and the tightened copy.
   ========================================================================== */

:root {
  /* ---- Accent: deep ink. Verified 12.6:1 on --bg (#fbfbfd). ------------- */
  --accent: #1f3a4d;
  --accent-hover: #16293a;
  --accent-subtle: #eef2f5;
  --accent-border: #d2dde4;
  --focus-ring: #1f3a4d;

  /* Secondary: warm sand. Used for the "please read" panel and rule lines
     only — never for text on light, where it fails contrast. */
  --sand: #b08445;
  --sand-subtle: #faf4ea;
  --sand-border: #ecdcc2;

  /* Status colours for the availability table. All checked on --bg-elevated. */
  --status-available: #1a6b3f;      /* 5.6:1 */
  --status-available-bg: #e9f5ee;
  --status-offer: #8a5a12;          /* 5.3:1 */
  --status-offer-bg: #fdf3e2;
  --status-sold: #6e6e73;           /* 4.8:1 */
  --status-sold-bg: #f1f1f3;

  /* Dark panels: re-point so nested components stay contrast-safe. */
  --accent-on-dark: #8fc4e8;        /* 8.1:1 on #1d1d1f */
  --accent-on-dark-hover: #b4d9f2;
  --text-on-accent-dark: #0a1620;
}

/* --------------------------------------------------------------------------
   1. Brand bar — the Curated Property Group attribution.

   This is not decoration. A suburb-name domain selling property must say who
   is behind it, plainly and on every page, or it can read as an official or
   council site. Keep it above the nav and keep it visible.
   -------------------------------------------------------------------------- */

.brandbar {
  background: var(--bg-inverse);
  color: var(--text-on-inverse-muted);
  font-size: 0.8125rem;
  letter-spacing: -0.003em;
}
.brandbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  padding-block: 0.45rem;
}
.brandbar a {
  color: var(--text-on-inverse);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.brandbar a:hover { color: #fff; border-bottom-color: #fff; }
.brandbar__note { color: var(--text-on-inverse-muted); }

/* The Curated lockup, set the way the identity document does it: the name
   above, "Property Group" small beneath. It is the parent mark, so it sits
   here rather than competing with the project wordmark in the nav. */
.lockup {
  display: inline-flex;
  flex-direction: column;
  gap: 0.08rem;
  text-decoration: none;
  border: 0 !important;
  line-height: 1.05;
}
.lockup__name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-on-inverse);
}
.lockup__sub {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-on-inverse-muted);
}
.lockup:hover .lockup__name,
.lockup:hover .lockup__sub { color: var(--accent-on-dark); }

/* --------------------------------------------------------------------------
   2. Nav
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--material-nav);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--separator);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
}
.nav__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.nav__links { display: flex; align-items: center; gap: 1.5rem; }
.nav__links a:not(.btn) {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9375rem;
}
.nav__links a:not(.btn):hover { color: var(--text); }

/* Below 760px the inline links would wrap into the logo. Hide them; the page
   is a single scroll and the hero CTA goes to the form anyway. */
@media (max-width: 760px) {
  .nav__links a:not(.btn) { display: none; }
}

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
/* The render is bright and the headline sits on it. Two stacked gradients:
   a vertical one for the text block, a flat wash to hold contrast at any
   crop. Measured: white on the darkest point of the render = 9.2:1. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 16, 22, 0.82) 0%, rgba(10, 16, 22, 0.55) 45%, rgba(10, 16, 22, 0.88) 100%),
    rgba(10, 16, 22, 0.18);
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 11vw, 7.5rem);
  /* base.css centres .hero, but the buttons and the price band range left,
     so the block read as half-centred. Everything ranges left off one
     margin instead. */
  text-align: left;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: 1rem;
}
.hero h1 {
  color: #fff;
  max-width: 16ch;
  margin-bottom: 0.4em;
}
.hero__sub {
  font-size: clamp(1.0625rem, 2vw, 1.3125rem);
  line-height: 1.45;
  color: var(--text-on-inverse-muted);
  max-width: 44ch;
  margin-bottom: 2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.hero__trust {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--text-on-inverse-muted);
}

/* The price band introduced during the restyle is kept: having the figure
   above the fold tested better than making people scroll for it. */
.hero__price {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1rem 0;
  margin-bottom: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.hero__price b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}
.hero__price span {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-inverse-muted);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform 0.15s var(--ease-out);
}
.btn:active { transform: scale(0.985); }

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

/* On the dark hero the ink accent disappears. Invert. */
.hero .btn--primary { background: #fff; color: #0a1620; border-color: #fff; }
.hero .btn--primary:hover { background: var(--accent-on-dark-hover); border-color: var(--accent-on-dark-hover); color: #0a1620; }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--separator-strong);
}
.btn--ghost:hover { background: var(--bg-sunken); }
.hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.42); }
.hero .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

.btn--sm { padding: 0.5rem 1rem; font-size: 0.9375rem; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   5. Numbers bar

   Four figures, directly under the hero. On a phone this becomes a 2x2 grid
   rather than a scroller — an investor compares these against each other, and
   a horizontal scroller hides half the comparison.
   -------------------------------------------------------------------------- */

.numbers {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--separator);
}
.numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.numbers__cell {
  padding: clamp(1.25rem, 3vw, 2rem) 1rem;
  text-align: center;
  border-left: 1px solid var(--separator);
}
.numbers__cell:first-child { border-left: 0; }
.numbers__value {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3.2vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
}
.numbers__label {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  line-height: 1.3;
}
@media (max-width: 720px) {
  .numbers__grid { grid-template-columns: 1fr 1fr; }
  .numbers__cell:nth-child(odd) { border-left: 0; }
  .numbers__cell:nth-child(n + 3) { border-top: 1px solid var(--separator); }
}

/* --------------------------------------------------------------------------
   6. Generic blocks
   -------------------------------------------------------------------------- */

.eyebrow {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.75rem;
}
.lede {
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: var(--measure);
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* --------------------------------------------------------------------------
   7. Availability table

   Status text is read live from HubSpot. It must never show an empty table:
   the HTML ships with the last known state and JS replaces it.

   Column handling: at five columns the residence names wrap to two lines and
   the areas break mid-unit ("140.7 / m²"), which looks broken rather than
   dense. Below 720px the internal-living column is dropped — total area and
   price are what a buyer compares — and nothing is allowed to wrap.
   -------------------------------------------------------------------------- */

.avail { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.avail caption {
  caption-side: bottom;
  padding-top: 0.9rem;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  text-align: left;
}
.avail th, .avail td {
  padding: 0.95rem 0.65rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--separator);
}
.avail th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  vertical-align: bottom;
}
.avail td:first-child { font-weight: 600; }
.avail td:first-child, .avail th:first-child { padding-left: 0; }
.avail td:last-child,  .avail th:last-child  { padding-right: 0; text-align: right; }
.avail tbody tr:last-child td { border-bottom: 0; }
.avail td:nth-child(2), .avail td:nth-child(3), .avail td:nth-child(4) {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  .avail th:nth-child(2), .avail td:nth-child(2) { display: none; }
  .avail th, .avail td { padding: 0.85rem 0.4rem; font-size: 0.875rem; }
}

@media (max-width: 440px) {
  .avail th:nth-child(3), .avail td:nth-child(3) { display: none; }
  .avail caption { white-space: normal; }
}

.pill {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.pill--available { color: var(--status-available); background: var(--status-available-bg); }
.pill--offer     { color: var(--status-offer);     background: var(--status-offer-bg); }
.pill--sold      { color: var(--status-sold);      background: var(--status-sold-bg); }

.avail__stale {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   8. Document room
   -------------------------------------------------------------------------- */

.docroom { background: var(--bg-inverse); color: var(--text-on-inverse); }
.docroom h2 { color: #fff; }
.docroom .lede { color: var(--text-on-inverse-muted); }

.docroom__panel {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  background: #26262a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.docroom__tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.docroom__tabs::-webkit-scrollbar { display: none; }
.docroom__tab {
  flex: 0 0 auto;
  padding: 0.9rem 1.25rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-on-inverse-muted);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.docroom__tab:hover { color: #fff; }
.docroom__tab[aria-selected="true"] {
  color: #fff;
  border-bottom-color: var(--accent-on-dark);
}

.docroom__notice {
  padding: 0.85rem 1.25rem;
  background: rgba(143, 196, 232, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-on-inverse-muted);
}
.docroom__version {
  display: inline-block;
  margin-right: 0.6rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.docroom__stage {
  position: relative;
  min-height: 24rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: #1b1b1e;
}
.docroom__canvas {
  max-width: 100%;
  height: auto;
  background: #fff;
  box-shadow: var(--shadow-3);
  border-radius: 2px;
}
.docroom__placeholder {
  text-align: center;
  color: var(--text-on-inverse-muted);
  font-size: 0.9375rem;
  max-width: 34ch;
  line-height: 1.6;
}

.docroom__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.docroom__pager { display: flex; align-items: center; gap: 0.75rem; }
.docroom__pagelabel {
  font-size: 0.875rem;
  color: var(--text-on-inverse-muted);
  font-variant-numeric: tabular-nums;
  min-width: 9ch;
  text-align: center;
}
.docroom__iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.docroom__iconbtn:hover:not([disabled]) { background: rgba(255, 255, 255, 0.14); }
.docroom__iconbtn[disabled] { opacity: 0.35; cursor: not-allowed; }
.docroom__actions { display: flex; gap: 0.6rem; }
.docroom .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.34); }
.docroom .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* --------------------------------------------------------------------------
   9. Amenities
   -------------------------------------------------------------------------- */

.amenity { list-style: none; margin: 0; padding: 0; }
.amenity li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--separator);
  margin: 0;
}
.amenity li:last-child { border-bottom: 0; }
.amenity__d {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   10. Maths panel — show the working rather than asserting a yield
   -------------------------------------------------------------------------- */

.maths {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.9;
  background: var(--bg-sunken);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  padding: 1rem 1.15rem;
  overflow-x: auto;
}
.maths b { font-weight: 600; color: var(--accent); }

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--separator); }
.faq details { border-bottom: 1px solid var(--separator); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--text-tertiary);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { content: "\2212"; }
.faq__body {
  padding-bottom: 1.3rem;
  color: var(--text-secondary);
  max-width: var(--measure);
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   12. Form
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 1.15rem; }
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.15rem;
}
.field { display: grid; gap: 0.35rem; }
.field > label { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); }
.field input,
.field select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--separator-strong);
  border-radius: var(--r-sm);
  appearance: none;
}
.field input:focus, .field select:focus { border-color: var(--accent); }
.field--error input, .field--error select { border-color: var(--danger); }
.field__err { font-size: 0.8125rem; color: var(--danger); }

/* 16px minimum stops iOS Safari zooming the page on focus. */
@media (max-width: 480px) {
  .field input, .field select { font-size: 16px; }
}

.consent {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.consent input { margin-top: 0.22rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }

/* Honeypot. Hidden from people, reachable by a bot that fills every input.
   Not display:none — some bots skip those. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__status { font-size: 0.9375rem; }
.form__status--err { color: var(--danger); }
.form__status--ok  { color: var(--status-available); }

/* --------------------------------------------------------------------------
   13. Modal — used for the gated document download
   -------------------------------------------------------------------------- */

.modal {
  border: 0;
  padding: 0;
  max-width: min(30rem, calc(100vw - 2rem));
  width: 100%;
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-3);
  color: var(--text);
}
.modal::backdrop { background: rgba(10, 16, 22, 0.55); }
.modal__inner { padding: clamp(1.25rem, 3vw, 1.75rem); }
.modal__close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 2rem; height: 2rem;
  border: 0; border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--text-secondary);
  font-size: 1.125rem; line-height: 1;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.foot {
  background: var(--bg-sunken);
  border-top: 1px solid var(--separator);
  font-size: 0.875rem;
  color: var(--text-tertiary);
}
.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.75rem;
  padding-block: clamp(2rem, 4vw, 3rem) 1.25rem;
}
.foot h4 { color: var(--text); font-size: 0.875rem; margin-bottom: 0.65rem; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 0.35rem; }
.foot a { color: var(--text-secondary); text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }
.foot__blurb {
  max-width: 32ch;
  margin-bottom: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.foot__legal {
  border-top: 1px solid var(--separator);
  padding-block: 1.25rem 2rem;
  line-height: 1.65;
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   15. Floor plans

   A tab strip rather than five stacked images. Five full plans down the page
   is a wall of near-identical drawings that a visitor scrolls straight past;
   one at a time, chosen by the person, gets looked at.

   The plan image is wide and detailed, so on a phone it is wrapped in a
   horizontal scroller at a readable width rather than shrunk to 375px, where
   the room labels become unreadable.
   -------------------------------------------------------------------------- */

.plans__tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.plans__tabs::-webkit-scrollbar { display: none; }

.plans__tab {
  flex: 0 0 auto;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--separator-strong);
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.plans__tab:hover { background: var(--bg-sunken); color: var(--text); }
.plans__tab[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

.plans__stage {
  margin-top: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.plans__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.plans__scroll img {
  display: block;
  width: 100%;
  min-width: 36rem;   /* below this the room labels stop being readable */
  height: auto;
}
.plans__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  padding: 0.9rem 1.15rem;
  border-top: 1px solid var(--separator);
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.plans__meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.plans__hint { font-size: 0.8125rem; color: var(--text-tertiary); margin-top: 0.6rem; }

/* --------------------------------------------------------------------------
   16. Utilities
   -------------------------------------------------------------------------- */

/* A heading landing flush under the sticky nav is the most common
   "unfinished" tell. Push anchored sections clear of it. */
html { scroll-padding-top: 6.5rem; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.muted { color: var(--text-tertiary); }
.small { font-size: 0.875rem; line-height: 1.6; }
.tiny  { font-size: 0.8125rem; line-height: 1.6; color: var(--text-tertiary); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   17. Multi-page furniture

   The project moved from one long page to four. Two new pieces: the small
   masthead the inner pages get in place of the hero, and the cards on the
   overview that send people to them.
   -------------------------------------------------------------------------- */

.pagehead {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--separator);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.pagehead h1 {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  margin-bottom: 0.4em;
}
.pagehead .lede { margin-bottom: 0; }

.nextgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.nextcard {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform 0.2s var(--ease-out);
}
.nextcard:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  color: var(--text);
}
.nextcard h3 { margin-bottom: 0; }
.nextcard p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.nextcard__go {
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
}
.nextcard__go::after {
  content: " \2192";
  display: inline-block;
  transition: transform var(--dur) var(--ease-out);
}
.nextcard:hover .nextcard__go::after { transform: translateX(3px); }

/* The current page in the nav. Marked, not disabled — it still scrolls to
   the top, which is what people expect from a logo-adjacent nav. */
.nav__links a[aria-current="page"] {
  color: var(--text);
  font-weight: 500;
}

/* ==========================================================================
   18 October 2026 — palette, beach hero, day/night, multi-page parts.

   COLOUR. Taken from the Ponder logo concepts (Logo Concepts - Seven on
   Holman - 2026-07-27.pdf) and the buyers guide that uses them:
       Beach   #f9f9ed   Celeste       #85b6d8   Marine #c5d9ce
       Linen   #f1f0ea   Horizon Blue  #80a1b3   Text   #4d4d4f
   Celeste and Horizon Blue are too light for text or for white-on-colour
   buttons, so --accent is a deepened Horizon Blue (#2f5a73): 7.4:1 with
   white text, 7.0:1 on Beach. The light brand colours are used as surfaces.
   ========================================================================== */

:root {
  --beach: #f9f9ed;
  --linen: #f1f0ea;
  --celeste: #85b6d8;
  --horizon: #80a1b3;
  --marine: #c5d9ce;

  /* Page surfaces. Beach (#f9f9ed) read too yellow on screen (client, 18 Oct),
     so the page uses a cool off-white with a trace of Marine instead. The
     brand colours above stay as the record of the palette. */
  --bg: #f6f8f7;
  --bg-sunken: #edf2f1;
  --bg-elevated: #ffffff;
  --text: #24292d;
  --text-secondary: #4d4d4f;        /* 8.0:1 on Beach */
  --text-tertiary: #636468;         /* 5.2:1 on Linen */

  --accent: #2f5a73;
  --accent-hover: #244859;
  --accent-subtle: #e7f0f6;
  --accent-border: #c3d7e5;
  --focus-ring: #2f5a73;

  --bg-inverse: #22343f;            /* deep marine for the brand bar and document room */
  --accent-on-dark: #85b6d8;        /* Celeste, 5.9:1 on --bg-inverse */
  --accent-on-dark-hover: #a9cde6;

  --sand-subtle: #eef4f0;           /* Marine tint for the "please read" notes */
  --sand-border: var(--marine);
  --material-nav: rgba(246, 248, 247, 0.82);
}

body { background: var(--bg); }
.eyebrow { color: var(--accent); }
.docroom__panel { background: #2b3f4b; }
.docroom__stage { background: #1d2c35; }

/* Reveal only hides things once ui.js has said it is running. */
html:not(.js) .reveal { opacity: 1; transform: none; }

/* ---- Nav: links on wide screens, a menu below 900px ------------------- */
.nav__menu { display: none; }
@media (max-width: 900px) {
  .nav__links a:not(.btn) { display: none; }
  .nav__menu { display: block; }
}
.nav__links { gap: 1.25rem; }
.nav__right { display: flex; align-items: center; gap: 0.5rem; }
.nav__panel a[aria-current="page"] { font-weight: 600; background: var(--accent-subtle); }

/* ---- Hero: the beach -------------------------------------------------- */
.beach {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: min(92svh, 860px);
  background: linear-gradient(180deg, #a9cbe3 0%, #cfe2ee 38%, #e8f0f0 70%, var(--bg) 100%);
  color: #1f3340;
}
.beach__copy {
  position: relative;
  z-index: 2;
  padding-block: clamp(2.25rem, 7vw, 5rem) 0;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.beach__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(47, 90, 115, 0.18);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.beach__pill::before {
  content: "";
  width: 0.95rem; height: 0.95rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3 5 7v8c0 7 4.7 12 11 14 6.3-2 11-7 11-14V7L16 3Zm-1.5 17.5L10 16l1.8-1.8 2.7 2.7 5.7-5.7L22 13l-7.5 7.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3 5 7v8c0 7 4.7 12 11 14 6.3-2 11-7 11-14V7L16 3Zm-1.5 17.5L10 16l1.8-1.8 2.7 2.7 5.7-5.7L22 13l-7.5 7.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.beach h1 {
  margin: 1rem auto 0.5rem;
  max-width: 16ch;
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1.05;
  color: #1f3340;
}
.beach__price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0.5rem 0 0;
}
.beach__price b {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.beach__price span {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3d5563;
}
.beach__sub { margin: 0.5rem auto 1.5rem; color: #3d5563; font-size: 1.0625rem; }
.beach__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.beach .btn--ghost { background: rgba(255, 255, 255, 0.6); border-color: rgba(47, 90, 115, 0.3); color: #1f3340; }
.beach .btn--ghost:hover { background: #fff; }

.beach__scene {
  position: relative;
  flex: 1 0 auto;
  min-height: clamp(220px, 40vh, 420px);
  margin-top: -2rem;
}
.beach__scene svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.bh-layer { transition: transform 0.6s var(--ease-out); will-change: transform; }
.bh-wave { animation: bh-slide linear infinite; }
.bh-wave--1 { animation-duration: 26s; }
.bh-wave--2 { animation-duration: 19s; animation-direction: reverse; }
.bh-wave--3 { animation-duration: 14s; }
.bh-wave--4 { animation-duration: 10s; animation-direction: reverse; }
@keyframes bh-slide { to { transform: translateX(-1440px); } }

.bh-foam, .bh-wet { animation: bh-swash 6s ease-in-out infinite; transform-box: fill-box; }
.bh-foam { opacity: 0.85; }
@keyframes bh-swash {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.bh-sun { animation: bh-pulse 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bh-pulse { 50% { transform: scale(1.06); } }
.bh-glint rect { animation: bh-twinkle 3.2s ease-in-out infinite; }
.bh-glint rect:nth-child(2) { animation-delay: -0.8s; }
.bh-glint rect:nth-child(3) { animation-delay: -1.6s; }
.bh-glint rect:nth-child(4) { animation-delay: -2.4s; }
@keyframes bh-twinkle { 50% { opacity: 0.1; } }
.bh-gull { fill: none; stroke: #3d5563; stroke-width: 2.4; stroke-linecap: round; animation: bh-gull 9s ease-in-out infinite; }
.bh-gull--2 { animation-delay: -3s; animation-duration: 11s; }
@keyframes bh-gull {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(40px, -10px); }
}

.beach__tag {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 4vh, 2rem);
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f3340;
  white-space: nowrap;
}
.beach__dot {
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: var(--celeste);
  box-shadow: 0 0 0 0 rgba(133, 182, 216, 0.7);
  animation: bh-ping 2.2s ease-out infinite;
}
@keyframes bh-ping { to { box-shadow: 0 0 0 12px rgba(133, 182, 216, 0); } }

@media (prefers-reduced-motion: reduce) {
  .bh-wave, .bh-foam, .bh-wet, .bh-sun, .bh-glint rect, .bh-gull, .beach__dot { animation: none !important; }
  .bh-layer { transition: none; }
}

/* ---- The three reasons ------------------------------------------------ */
.pillars { padding-block: clamp(2.5rem, 6vw, 4rem); }
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
.pillar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s;
}
.pillar:nth-child(1) { background: linear-gradient(160deg, #ffffff 40%, var(--accent-subtle)); }
.pillar:nth-child(2) { background: linear-gradient(160deg, #ffffff 40%, #e3eff7); }
.pillar:nth-child(3) { background: linear-gradient(160deg, #ffffff 40%, var(--sand-subtle)); }
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent-border); color: var(--text); }
.pillar__icon { width: 2.25rem; height: 2.25rem; color: var(--accent); margin-bottom: 0.4rem; }
.pillar__title { font-size: 1.375rem; margin: 0; }
.pillar p { margin: 0; color: var(--text-secondary); }
.pillar__go { margin-top: auto; padding-top: 0.6rem; font-size: 0.875rem; font-weight: 600; color: var(--accent); }
.pillar__go::after { content: " \2192"; display: inline-block; transition: transform 0.2s var(--ease-out); }
.pillar:hover .pillar__go::after { transform: translateX(3px); }

/* ---- Day / night ------------------------------------------------------ */
.dn {
  --pos: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  aspect-ratio: 1280 / 768;
  background: #1d2c35;
  user-select: none;
  touch-action: pan-y;
}
.dn__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dn__night {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos) * 1%) 0 0);
}
.dn__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--pos) * 1%);
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.dn__handle span {
  position: absolute;
  top: 50%; left: 50%;
  width: 2.75rem; height: 2.75rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-2);
}
.dn__handle span::before,
.dn__handle span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0; height: 0;
  border: 6px solid transparent;
  transform: translateY(-50%);
}
.dn__handle span::before { left: 7px;  border-right-color: var(--accent); }
.dn__handle span::after  { right: 7px; border-left-color: var(--accent); }
.dn__range {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}
.dn:has(.dn__range:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.dn__btns { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
.dn__btn {
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--separator-strong);
  background: var(--bg-elevated);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.dn__btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- CTA band --------------------------------------------------------- */
.ctaband { background: var(--celeste); color: #1f2e38; }
.ctaband__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(2rem, 5vw, 3rem);
}
.ctaband h2 { margin: 0 0 0.25rem; color: #1f2e38; }
.ctaband p { margin: 0; color: #1f2e38; }

/* ---- Location route --------------------------------------------------- */
.route svg { display: block; width: 100%; height: auto; }
.route__path { stroke: var(--accent); stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 1.6s var(--ease-out); }
.route__path--2 { stroke: var(--horizon); transition-delay: 0.9s; }
.route.is-visible .route__path { stroke-dashoffset: 0; }
html:not(.js) .route__path { stroke-dashoffset: 0; }
.route__node { fill: var(--accent); }
.route__node--2 { fill: var(--horizon); }
.route__swash { animation: bh-swash 5s ease-in-out infinite; transform-box: fill-box; }
.route__km { font-size: 30px; font-weight: 700; fill: var(--accent); text-anchor: middle; letter-spacing: -0.02em; }
.route__km--sm { font-size: 22px; fill: #3d5563; }
.route__lbl { font-size: 15px; fill: var(--text-secondary); text-anchor: middle; }
.route__sea { font-size: 14px; fill: #fff; text-anchor: middle; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .route__path { stroke-dashoffset: 0; transition: none; } .route__swash { animation: none; } }

/* ---- Government-backed steps ------------------------------------------ */
.gsteps { list-style: none; counter-reset: g; margin: 0; padding: 0; display: grid; gap: 1rem; }
.gsteps li {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 4rem;
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
}
.gsteps li::before {
  counter-increment: g;
  content: counter(g);
  position: absolute;
  left: 1.25rem; top: 1.25rem;
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--celeste);
  color: #1f2e38;
  font-weight: 700;
  font-size: 0.9375rem;
}
.gsteps h3 { font-size: 1.0625rem; margin: 0.2rem 0 0.3rem; }
.gsteps p { margin: 0; color: var(--text-secondary); font-size: 0.9375rem; }

.note { background: var(--sand-subtle); border-color: var(--sand-border); box-shadow: none; }

/* ---- Price split bar --------------------------------------------------- */
.split__bar { display: flex; height: 3.25rem; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1); }
.split__bar span {
  display: flex; align-items: center; padding-inline: 1rem;
  width: 0; font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
  transition: width 1.2s var(--ease-out);
}
.split__land  { background: var(--marine); color: #1f2e38; }
.split__build { background: var(--horizon); color: #12202a; }
.split.is-visible .split__bar span, html:not(.js) .split__bar span { width: var(--w); }
@media (prefers-reduced-motion: reduce) { .split__bar span { width: var(--w); transition: none; } }

.facts li { display: block; padding: 0.9rem 0; border-top: 1px solid var(--separator); color: var(--text-secondary); }
.facts li b { display: inline-block; min-width: 7.5rem; color: var(--text); }

/* ---- Homes gallery ---------------------------------------------------- */
.gallery { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); grid-template-columns: 1fr 1fr; }
.gallery figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; transition: transform 0.8s var(--ease-out); }
.gallery figure:hover img { transform: scale(1.03); }
.gallery__big { grid-column: 1 / -1; }
/* Captions on the gallery (added 19 Oct with the exterior band). Same
   treatment as the photo wall: a gradient foot rather than a solid bar, so
   the render is not sliced in half. White on the darkened foot is above 7:1. */
.gallery figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.25rem 1rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(180deg, rgba(10, 22, 32, 0) 0%, rgba(10, 22, 32, 0.72) 100%);
  pointer-events: none;
}

/* The streetscape is a 1280x449 panorama. The gallery's default 16/10 crop
   turns it into a strip of garage doors, so the big cell follows the image. */
.gallery__big img { aspect-ratio: auto; }

@media (max-width: 600px) { .gallery { grid-template-columns: 1fr; } }

.grid-3 { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.stat { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; color: var(--accent); margin: 0.25rem 0 0.75rem; }
.stat span { font-size: 0.9375rem; font-weight: 500; color: var(--text-secondary); letter-spacing: 0; }
.wide-img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }

/* ---- Logo — "sevenon / holman", Ponder concept 1, in Celeste ----------
   Vector, extracted from Logo Concepts - Seven on Holman - 2026-07-27.pdf.
   White version on the hero sky, Celeste everywhere else. */
.nav__brand { display: inline-flex; align-items: center; }
.nav__brand img { display: block; height: 36px; width: auto; }
.foot__logo { display: block; height: 44px; width: auto; }
.beach__logo {
  display: block;
  height: clamp(60px, 9vw, 84px);
  width: auto;
  margin: 0 auto 1.25rem;
  filter: drop-shadow(0 2px 10px rgba(31, 51, 64, 0.28));
}

/* Hero, logo-and-address only (18 Oct). */
.beach__h1 { margin: 0; line-height: 0; }
.beach__copy { padding-block: clamp(3rem, 12vh, 7rem) 0; }
.beach .beach__logo { height: clamp(84px, 14vw, 150px); margin-bottom: 1.25rem; }
.beach__addr {
  margin: 0;
  font-size: clamp(0.9375rem, 2vw, 1.125rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1f3340;
}

/* ==========================================================================
   Brand panels for the three reasons (replaces .pillar), the surf band and
   wave dividers. 18 Oct 2026.
   Text on the panels is #14222c: 6.9:1 on Celeste, 6.1:1 on Horizon Blue,
   11:1 on Marine.
   ========================================================================== */
.pcard {
  --gx: 50%; --gy: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 21rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: 24px;
  overflow: hidden;
  color: #14222c;
  text-decoration: none;
  isolation: isolate;
  /* The tilt is written inline by ui.js, so it never fights .reveal. */
  transition: opacity 0.7s var(--ease-out), transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  box-shadow: 0 1px 2px rgba(20, 34, 44, 0.06), 0 10px 30px rgba(20, 34, 44, 0.08);
}
.pcard:hover { color: #14222c; box-shadow: 0 4px 10px rgba(20, 34, 44, 0.08), 0 24px 48px rgba(20, 34, 44, 0.16); }
.pcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.pcard--celeste { background: linear-gradient(160deg, #a4c9e4, var(--celeste)); }
.pcard--horizon { background: linear-gradient(160deg, #9ab8c9, var(--horizon)); }
.pcard--marine  { background: linear-gradient(160deg, #dbe8e0, var(--marine)); }
/* Glare that follows the pointer. */
.pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.45), transparent 45%);
  opacity: 0;
  transition: opacity 0.3s;
}
.pcard:hover::after { opacity: 1; }

.pcard__art { width: 112px; height: 112px; margin: -0.25rem 0 0.75rem -0.25rem; overflow: visible; }
.pcard__kicker {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pcard__stat {
  margin: 0.35rem 0 0.4rem;
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pcard__line { font-size: 1.0625rem; line-height: 1.45; max-width: 24ch; }
.pcard__go {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
}
.pcard__go::after { content: " \2192"; display: inline-block; transition: transform 0.25s var(--ease-out); }
.pcard:hover .pcard__go::after { transform: translateX(5px); }

/* Always one row (client, 18 Oct). Compact between 600 and 960px; below
   600px three columns would be too thin to read, so the row swipes sideways
   with the next card peeking in. */
.pillars__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .pillars__grid { gap: 0.875rem; }
  .pillars .pcard { min-height: 0; border-radius: 20px; }
  .pillars .pcard__body { padding: 1rem 1.1rem 1.2rem; }
  .pillars .pcard__art { width: 54px; height: 54px; }
  .pillars .pcard__kicker { font-size: 0.6875rem; letter-spacing: 0.1em; }
  .pillars .pcard__stat { font-size: clamp(1.25rem, 3.2vw, 2.25rem); }
  .pillars .pcard__line { font-size: 0.875rem; }
  .pillars .pcard__go { font-size: 0.8125rem; padding-top: 0.9rem; }
}
@media (max-width: 599px) {
  .pillars__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    margin-inline: calc(-1 * var(--gutter, 1rem));
    padding: 0.5rem var(--gutter, 1rem) 1.25rem;
    scrollbar-width: none;
  }
  .pillars__grid::-webkit-scrollbar { display: none; }
  .pillars .pcard { scroll-snap-align: start; }
  .pillars .pcard__stat { font-size: 2.25rem; }
  .pillars .pcard__line { font-size: 0.9375rem; }
}


/* Card 1: pulse rings, tick draws in. */
.pcard__ring { fill: none; stroke: #fff; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pcard--celeste:hover .pcard__ring, .pcard--celeste.is-visible .pcard__ring { animation: pc-ring 2.4s ease-out infinite; }
.pcard__ring--2 { animation-delay: 1.2s !important; }
@keyframes pc-ring { 0% { opacity: 0.8; transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.35); } }
.pcard__tick { stroke-dasharray: 44; stroke-dashoffset: 44; transition: stroke-dashoffset 0.9s var(--ease-out) 0.3s; }
.pcard.is-visible .pcard__tick, html:not(.js) .pcard__tick { stroke-dashoffset: 0; }
.pcard:hover .pcard__tick { animation: pc-tick 0.9s var(--ease-out); }
@keyframes pc-tick { from { stroke-dashoffset: 44; } to { stroke-dashoffset: 0; } }

/* Card 2: rolling water and a bobbing surfer. Faster on hover. */
.pcard__waves path { animation: pc-roll 4s linear infinite; }
.pcard__waves path:nth-child(2) { animation-duration: 3s; animation-direction: reverse; }
.pcard__waves path:nth-child(3) { animation-duration: 2.2s; }
.pcard--horizon:hover .pcard__waves path { animation-duration: 1.2s; }
@keyframes pc-roll { to { transform: translateX(60px); } }
.pcard__surfer { animation: pc-bob 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pc-bob { 50% { transform: translate(6px, -5px) rotate(-4deg); } }

/* Card 3: the agent in the middle fades out; the line goes solid. */
.pcard__agent { transition: opacity 0.6s, transform 0.6s var(--ease-out); transform-box: fill-box; transform-origin: center; }
.pcard__link { transition: stroke-dasharray 0.6s; }
.pcard--marine.is-visible .pcard__agent { opacity: 0.35; }
.pcard--marine:hover .pcard__agent { opacity: 0; transform: translateY(-14px) scale(0.6); }
.pcard--marine:hover .pcard__link { stroke-dasharray: 200 0; }
.pcard__tiny { font-size: 11px; font-weight: 700; fill: #14222c; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---- Surf band ---------------------------------------------------------- */
.surfband { position: relative; height: clamp(260px, 42vw, 460px); overflow: hidden; background: #cfe2ee; }
.surfband svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.surfband__tag {
  position: absolute;
  left: clamp(1rem, 4vw, 3rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 2;
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin: 0;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-2);
  font-size: 0.875rem; font-weight: 600; color: #1f3340;
}
.sb-surfer { animation: sb-ride 6s ease-in-out infinite; }
@keyframes sb-ride {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-46px, 14px); }
}
.sb-lip { animation: sb-lip 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: right bottom; }
@keyframes sb-lip { 50% { transform: scale(1.03, 0.97); } }
.sb-spray circle { animation: sb-spray 2.4s ease-out infinite; }
.sb-spray circle:nth-child(2) { animation-delay: -0.6s; }
.sb-spray circle:nth-child(3) { animation-delay: -1.2s; }
.sb-spray circle:nth-child(4) { animation-delay: -1.8s; }
@keyframes sb-spray { 0% { opacity: 0.9; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(18px, -26px); } }

/* ---- Wave divider: a moving wave edge into the next section ------------- */
.wavediv { display: block; width: 100%; height: clamp(36px, 6vw, 70px); margin-bottom: -1px; overflow: hidden; }
/* max-width:none is load-bearing. base.css sets `img, svg, video { max-width:
   100% }`, which capped this svg at the container width even though width is
   200%. The slide animation then pulled it left and left bare container on the
   right — which read as the wave stopping halfway and stepping down to a flat
   edge. */
.wavediv svg {
  display: block;
  width: 200%;
  max-width: none;
  height: 100%;
  animation: wd-slide 18s linear infinite;
}
@keyframes wd-slide { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .pcard { transform: none !important; }
  .pcard__ring, .pcard__waves path, .pcard__surfer, .sb-surfer, .sb-lip, .sb-spray circle, .wavediv svg { animation: none !important; }
}
.pcard--horizon .pcard__art { overflow: hidden; border-radius: 18px; background: rgba(255, 255, 255, 0.14); }

/* ---- Cards with a photo on top (18 Oct) -------------------------------- */
.pillars .pcard { padding: 0; min-height: 0; }
.pcard__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.pcard__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.pcard:hover .pcard__media img { transform: scale(1.07); }
.pcard__media::after {
  content: ""; position: absolute; inset: auto 0 0; height: 45%;
  background: linear-gradient(to bottom, transparent, rgba(20, 34, 44, 0.28));
  pointer-events: none;
}
/* The animated icon becomes a round badge sitting on the photo. */
.pillars .pcard__art,
.pcard--horizon .pcard__art {
  position: absolute; left: 0.9rem; bottom: 0.9rem; z-index: 1;
  width: 72px; height: 72px; margin: 0; padding: 4px;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 6px 18px rgba(20, 34, 44, 0.25);
}
.pcard--celeste .pcard__art { background: var(--celeste); }
.pcard--horizon .pcard__art { background: var(--horizon); }
.pcard--marine  .pcard__art { background: var(--marine); }
.pcard__credit {
  position: absolute; right: 0.5rem; bottom: 0.45rem; z-index: 1;
  padding: 0.1rem 0.4rem; border-radius: 6px;
  background: rgba(20, 34, 44, 0.55); color: #fff;
  font-size: 0.625rem; letter-spacing: 0.02em;
}
.pcard__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.credits a { color: inherit; }

/* ---- Beach photo gallery (location page) ------------------------------- */
.beachpics { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; }
.beachpics figure { margin: 0; overflow: hidden; border-radius: var(--r-lg); position: relative; }
.beachpics figure:first-child { grid-row: span 2; }
.beachpics img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.beachpics figure:hover img { transform: scale(1.05); }
.beachpics figcaption {
  position: absolute; left: 0.75rem; bottom: 0.65rem;
  padding: 0.3rem 0.65rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9); color: #1f3340;
  font-size: 0.8125rem; font-weight: 600;
}
@media (max-width: 640px) {
  .beachpics { grid-template-columns: 1fr; }
  .beachpics figure:first-child { grid-row: auto; }
  .beachpics img { aspect-ratio: 4 / 3; }
}

/* Map: the two longer legs draw after the first two. */
.route__path--3 { transition-delay: 1.4s; }
.route__path--4 { stroke: #7c9a6b; transition-delay: 1.8s; }
.route__node--vine { fill: #7c9a6b; }

.route__seakm  { font-size: 30px; font-weight: 700; fill: #fff; text-anchor: middle; letter-spacing: -0.02em; }
.route__sealbl { font-size: 15px; font-weight: 600; fill: #fff; text-anchor: middle; }

/* Page head with the render as its background (location page).
   White text sits on a dark fade from the left: at the text the fade is at
   least rgba(16,28,36,0.72) over the render, which keeps white well above
   4.5:1 wherever the copy can fall. */
.pagehead--bg {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(320px, 46vw, 520px);
  padding-block: clamp(2rem, 5vw, 3.5rem);
  background: #1d2c35;
  border-bottom: 0;
}
.pagehead__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.pagehead--bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(16, 28, 36, 0.86) 0%, rgba(16, 28, 36, 0.72) 38%, rgba(16, 28, 36, 0.2) 70%, rgba(16, 28, 36, 0) 100%),
    linear-gradient(0deg, rgba(16, 28, 36, 0.55) 0%, rgba(16, 28, 36, 0) 55%);
}
.pagehead__inner { position: relative; z-index: 2; width: 100%; }
.pagehead--bg .eyebrow { color: var(--celeste); }
.pagehead--bg h1 { color: #fff; max-width: 14ch; }
.pagehead--bg .lede { color: rgba(255, 255, 255, 0.9); }
.pagehead__note {
  position: absolute; right: 0.75rem; bottom: 0.6rem; z-index: 2;
  font-size: 0.6875rem; color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 640px) {
  .pagehead--bg::before { background: linear-gradient(0deg, rgba(16, 28, 36, 0.9) 0%, rgba(16, 28, 36, 0.7) 45%, rgba(16, 28, 36, 0.15) 100%); }
}


/* ---- The cards as a revolving row (18 Oct) -----------------------------
   One horizontal row that scrolls and snaps card by card. Three in view
   from 600px up (client, 18 Oct); one and a peek on phones. */
.pillars .pillars__grid {
  --pc-gap: clamp(0.875rem, 2vw, 1.5rem);
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--pc-gap)) / 3);
  gap: var(--pc-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0.5rem 0 1.25rem;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.pillars .pillars__grid::-webkit-scrollbar { display: none; }
.pillars .pillars__grid:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 24px; }
.pillars .pcard { scroll-snap-align: start; }
@media (max-width: 599px) {
  .pillars .pillars__grid {
    grid-auto-columns: 80%;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}
.pillars__ctrl { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem; }
.pillars__btn {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--separator-strong);
  background: var(--bg-elevated);
  color: var(--accent); font: inherit; font-size: 1.375rem; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-1);
}
.pillars__btn:hover { border-color: var(--accent); }
.pillars__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pillars__bars { display: block; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.pillars__btn[aria-pressed="true"] .pillars__bars { display: none; }
.pillars__btn[aria-pressed="true"]::after { content: "\25B6"; font-size: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .pillars .pillars__grid { scroll-behavior: auto; } }
/* On-photo credits: top-right, one line, so they never sit on the badge. */
.pcard__credit { top: 0.45rem; bottom: auto; right: 0.45rem; max-width: calc(100% - 0.9rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   Buy now (buy.html, reserved.html) — 19 Oct 2026
   ========================================================================== */

/* Five steps in a row on desktop, a list on phones. */
.buysteps { padding-block: clamp(2rem, 5vw, 3rem); }
.bsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: none; }
@media (max-width: 900px) { .bsteps { grid-template-columns: 1fr; } }
.bstep {
  position: relative;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}
.bstep:first-child { background: var(--celeste); border-color: var(--celeste); }
.bstep__n {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; margin-bottom: 0.6rem;
  border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 0.9375rem;
}
.bstep h3 { font-size: 1.0625rem; margin: 0 0 0.3rem; }
.bstep p { margin: 0; font-size: 0.9375rem; color: var(--text-secondary); }
.bstep:first-child p { color: #1f2e38; }
@media (max-width: 900px) {
  .bstep { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 0.75rem; align-items: start; }
  .bstep__n { grid-row: span 2; margin: 0; }
}

/* Residence picker: radio cards. */
.pick, .conv { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.pick legend, .conv legend { font-weight: 600; margin-bottom: 0.75rem; padding: 0; }
.pick__grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.pick__opt {
  position: relative;
  display: grid; gap: 0.15rem;
  padding: 0.85rem 0.9rem;
  border: 1.5px solid var(--separator-strong);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.pick__opt input { position: absolute; opacity: 0; pointer-events: none; }
.pick__n { font-weight: 700; }
.pick__a { font-size: 0.875rem; color: var(--text-secondary); }
.pick__s { font-size: 0.75rem; font-weight: 600; color: var(--status-available); }
.pick__opt:hover { border-color: var(--accent); }
.pick__opt:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); box-shadow: 0 0 0 3px rgba(47, 90, 115, 0.18); }
.pick__opt:has(input:checked)::after {
  content: "\2713"; position: absolute; top: 0.55rem; right: 0.7rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 0.8125rem; font-weight: 700;
}
.pick__opt:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.pick__opt.is-taken { opacity: 0.55; cursor: not-allowed; background: var(--bg-sunken); }
.pick__opt.is-taken .pick__s { color: var(--status-sold); }
.pick__price { margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--text-secondary); }
.pick__price b { color: var(--text); }
#pick-err { margin-top: 0.5rem; color: var(--danger); font-size: 0.875rem; }

.field__hint { margin: 0; font-size: 0.8125rem; color: var(--text-tertiary); }
.consent--plain { margin-bottom: 0.75rem; }
.field textarea {
  width: 100%; font: inherit; padding: 0.7rem 0.85rem;
  border: 1px solid var(--separator-strong); border-radius: var(--r-sm);
  background: var(--bg-elevated); color: var(--text); resize: vertical;
}
.notbinding {
  margin: 0.5rem 0 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--r-md);
  background: var(--sand-subtle);
  border: 1px solid var(--sand-border);
}
.notbinding p { margin: 0; font-size: 0.9375rem; }
.btn--lg { padding: 0.95rem 1.9rem; font-size: 1.0625rem; }

/* Table: a small Buy link next to each Available pill. */
.avail__buy {
  display: inline-block; margin-left: 0.4rem;
  padding: 0.2rem 0.7rem; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; text-decoration: none;
  font-size: 0.8125rem; font-weight: 600;
}
.avail__buy:hover { background: var(--accent-hover); color: #fff; }
@media (max-width: 440px) { .avail td:last-child { white-space: normal; } .avail__buy { margin: 0.35rem 0 0; } }

/* CTA band with two buttons. */
.ctaband__btns { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ctaband .btn--ghost { background: rgba(255, 255, 255, 0.55); border-color: rgba(31, 46, 56, 0.35); color: #1f2e38; }
.ctaband .btn--ghost:hover { background: #fff; }

/* reserved.html */
.rv { text-align: center; }
.rv__res { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; }
.rv__ref { margin: 0.35rem 0 1rem; color: var(--text-secondary); font-size: 0.9375rem; }
.rv__ref b { font-family: var(--font-mono); color: var(--text); }
.rv__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* The chosen residence's floor plan, shown large under the options. */
.pick__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.pick__preview { margin: 1rem 0 0; }
.pick__preview a { display: block; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--separator); background: #fff; }
.pick__preview img { display: block; width: 100%; height: auto; }
.pick__preview figcaption { margin-top: 0.45rem; font-size: 0.8125rem; color: var(--text-tertiary); }
@media (max-width: 480px) {
  .pick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick__opt { padding: 0.65rem 0.7rem; }
  .pick__a { font-size: 0.75rem; }
}

/* Key terms + disclosure (buy.html). */
.terms { display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.term {
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-1);
}
.term h3 { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.term__big { margin: 0.3rem 0 0.4rem; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.term p:not(.term__big) { margin: 0 0 0.4rem; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; }
.term [data-pending] { color: var(--text); font-weight: 500; }
.disclose { border-left: 4px solid var(--celeste); }
.disclose h3 { margin-top: 0; }
.disclose__list { columns: 2 16rem; column-gap: 2rem; margin: 0.5rem 0 0; padding-left: 1.1rem; }
.disclose__list li { margin-bottom: 0.3rem; break-inside: avoid; }
.term__split { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.term__split li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0; border-top: 1px solid var(--separator); font-size: 0.875rem; color: var(--text-secondary); }
.term__split b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   The build page (build.html) and the deposit choice — 19 Oct 2026
   ========================================================================== */
.stages { list-style: none; margin: 0; padding: 0; position: relative; }
.stages::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(var(--celeste), var(--horizon));
}
.stage { position: relative; padding: 0 0 1.75rem 2.75rem; }
.stage:last-child { padding-bottom: 0; }
.stage__dot {
  position: absolute; left: 0; top: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
  transition: background 0.4s;
}
.stage.is-visible .stage__dot { background: var(--accent); }
.stage:first-child .stage__dot, .stage:nth-child(2) .stage__dot { border-color: var(--celeste); }
.stage:first-child.is-visible .stage__dot, .stage:nth-child(2).is-visible .stage__dot { background: var(--celeste); }
.stage__when { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.stage h3 { margin: 0.2rem 0 0.3rem; font-size: 1.25rem; }
.stage p { margin: 0 0 0.5rem; color: var(--text-secondary); }
.stage__pay {
  display: inline-block; margin: 0.15rem 0 0 !important;
  padding: 0.35rem 0.75rem; border-radius: var(--r-pill);
  background: var(--accent-subtle); color: var(--text) !important; font-size: 0.875rem;
}
.stage__pay[data-pending] { background: var(--bg-sunken); color: var(--text-tertiary) !important; font-style: italic; }

.paytable { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.paytable th, .paytable td { padding: 0.7rem 0.5rem; text-align: left; border-bottom: 1px solid var(--separator); }
.paytable th { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.paytable td:not(:first-child), .paytable th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.paytable td[data-pending] { color: var(--text-tertiary); font-style: italic; }
.paytable__total td { font-weight: 700; border-bottom: 0; }
.paytable td:first-child { padding-left: 0; }
.paytable td:last-child, .paytable th:last-child { padding-right: 0; }

/* Deposit choice in the reserve form. */
.dep { margin-bottom: 1rem; }
.dep__grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.dep__amt { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; color: var(--accent); }
.dep__note { margin-top: -0.5rem; margin-bottom: 1.25rem; }
@media (max-width: 480px) { .dep__grid { grid-template-columns: 1fr; } }
.pick__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.7rem; }
.pick__fact { font-size: 0.9375rem; color: var(--text-secondary); }
.pick__fact b { font-size: 1.125rem; color: var(--text); font-variant-numeric: tabular-nums; }

/* Residence choice as a row of pills, matching the floor plan tabs on the
   Homes page (client, 19 Oct). Real radio buttons underneath, so keyboard
   and screen readers still work. Taken homes show their status in the pill. */
.pick__grid {
  display: flex; flex-wrap: nowrap; gap: 0.5rem;
  overflow-x: auto; scrollbar-width: none; padding: 0.15rem 0.15rem 0.35rem;
  grid-template-columns: none;
}
.pick__grid::-webkit-scrollbar { display: none; }
.pick__grid .pick__opt {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--separator-strong);
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  box-shadow: none;
  white-space: nowrap;
}
.pick__grid .pick__n { font-weight: 500; font-size: 0.9375rem; color: var(--text-secondary); }
.pick__grid .pick__s { display: none; }
.pick__grid .pick__opt:hover { background: var(--bg-sunken); border-color: var(--separator-strong); }
.pick__grid .pick__opt:hover .pick__n { color: var(--text); }
.pick__grid .pick__opt:has(input:checked) { background: var(--accent); border-color: var(--accent); box-shadow: none; }
.pick__grid .pick__opt:has(input:checked) .pick__n { color: var(--text-on-accent); }
.pick__grid .pick__opt:has(input:checked)::after { content: none; }
.pick__grid .pick__opt.is-taken { background: var(--bg-sunken); }
.pick__grid .pick__opt.is-taken .pick__n { text-decoration: line-through; }
.pick__grid .pick__opt.is-taken .pick__s { display: inline; font-size: 0.75rem; }
@media (max-width: 480px) { .pick__grid { grid-template-columns: none; } .pick__grid .pick__opt { padding: 0.5rem 0.95rem; } }
.pick__grid .pick__n { transition: color 0.2s; }

/* --------------------------------------------------------------------------
   Photo wall  (replaced the surf band on the overview, 19 Oct)

   An asymmetric mosaic, not an even grid. The streetscape is a 1280x449
   panorama — in a square cell it crops to a strip of garage doors, so it gets
   the full width. The corner render then takes a double-height cell with the
   three interiors stacked beside it.

   The grid is edge-to-edge rather than inside .wrap: renders carry this page,
   and boxing them in a column makes them look like thumbnails.
   -------------------------------------------------------------------------- */

.photowall { padding-block: var(--section-y); }

.photowall__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-inline: 10px;
}

.pw {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  aspect-ratio: 4 / 3;
}
.pw img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease-out);
}
.pw:hover img { transform: scale(1.03); }

/* The panorama across the top, and the corner render two rows tall. */
.pw--wide  { grid-column: span 4; aspect-ratio: 1280 / 449; }
.pw--tall  { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
/* Fills the second row beside the tall cell, so the mosaic has no gap. */
.pw--span2 { grid-column: span 2; aspect-ratio: 16 / 9; }

/* Caption sits on the image. A gradient rather than a solid bar so the render
   is not cut in half; white on the darkened foot measures above 7:1. */
.pw figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.25rem 1rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(180deg, rgba(10, 22, 32, 0) 0%, rgba(10, 22, 32, 0.72) 100%);
  pointer-events: none;
}

/* Button first, then the legal line. A text link buried in a disclaimer was
   doing the work of a call to action and getting ignored — the disclaimer
   still has to be there, so the button sits above it rather than inside it. */
.photowall__after {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
}
.photowall__after .photowall__foot { margin-top: 0; flex: 1 1 22rem; }

.photowall__foot {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-tertiary);
}

/* Tablet: the tall cell stops earning its keep once the row is only two
   across, so everything becomes a simple pair. */
@media (max-width: 900px) {
  .photowall__grid { grid-template-columns: repeat(2, 1fr); }
  .pw--wide  { grid-column: span 2; }
  .pw--tall  { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
  .pw--span2 { grid-column: span 2; aspect-ratio: 16 / 9; }
}

/* Phone: one column. Interiors are the reason someone scrolls this far, so
   they stay full width rather than shrinking to a two-up thumbnail. */
@media (max-width: 560px) {
  .photowall__grid { grid-template-columns: 1fr; gap: 8px; padding-inline: 8px; }
  .pw--wide, .pw--tall, .pw--span2 { grid-column: span 1; aspect-ratio: 3 / 2; }
  .pw { aspect-ratio: 3 / 2; }
}

/* Document shortcuts under the floor plans (19 Oct). Three equal ghost
   buttons; they wrap to a column on a phone rather than shrinking to
   unreadable widths. */
.docbtns {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--separator);
}
.docbtns__h { margin-bottom: 0.9rem; }
.docbtns__for { color: var(--text-tertiary); font-weight: 400; }
.docbtns__row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.docbtns__row .btn { flex: 0 1 auto; }
@media (max-width: 520px) {
  .docbtns__row { flex-direction: column; align-items: stretch; }
  .docbtns__row .btn { width: 100%; }
}

/* Homes heading: straight to the floor plans (19 Oct). */
.pagehead__jump { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; margin-top: 1.4rem; }
.pagehead__jumplbl { font-size: 0.875rem; color: var(--text-tertiary); margin-inline: 0.25rem; }
.jumppill {
  display: inline-flex; align-items: center;
  padding: 0.45rem 0.95rem; border-radius: var(--r-pill);
  border: 1px solid var(--separator-strong); background: var(--bg-elevated);
  color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease-out);
}
.jumppill:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.jumppill:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
#plans { scroll-margin-top: 4.5rem; }
@media (max-width: 480px) { .pagehead__jumplbl { flex-basis: 100%; margin: 0.25rem 0 0; } }
/* A quieter primary button: about 18% less than the standard one (client, 19 Oct). */
.btn--quiet { font-size: 0.88em; padding: 0.68rem 1.3rem; min-height: 0; }

/* Progress payment schedule table on the build page (19 Oct 2026).
   .paytable cells default to nowrap; this table has long milestone text, so it
   wraps and uses fixed column widths. */
.paytable.sched { table-layout: fixed; }
.paytable.sched th, .paytable.sched td { white-space: normal; text-align: left; vertical-align: top; }
.paytable.sched th:first-child, .paytable.sched td:first-child { width: 2.75rem; padding-left: 0; font-variant-numeric: tabular-nums; }
.paytable.sched th:last-child, .paytable.sched td:last-child { width: 9.5rem; text-align: right; padding-right: 0; color: var(--text-secondary); }
.paytable.sched .paytable__total td:last-child { color: var(--text); }
.sched__d { display: block; margin-top: 0.15rem; font-size: 0.875rem; font-weight: 400; color: var(--text-secondary); line-height: 1.45; }
@media (max-width: 560px) { .paytable.sched th:last-child, .paytable.sched td:last-child { width: 5.5rem; font-size: 0.8125rem; } }