/* =========================================================================
   Shelby West — Bassi Properties
   Palette sampled from the physical site sign (reference/SIGN.JPG):
     black surround #2C2C2C · warm cream panel #F8F6F3 · copper keyline #AC876F
   Brand colours (BP Brand Identity Style Guide): black #000000, magenta #D40F7D.
   Magenta is an accent only — CTA, focus, small marks. Never a large fill.
   Type: Playfair Display (project wordmark + headings, matching the sign's
   high-contrast letterspaced serif), Montserrat (all UI and body copy, per the
   Bassi identity guide).
   ========================================================================= */

/* ---------- tokens ---------- */
:root {
  --black:        #000000;
  --ink:          #0E0E0E;
  --ink-line:     #2C2C2C;
  --paper:        #F8F6F3;
  --white:        #FFFFFF;

  --copper:       #AC876F;   /* decorative only — fails text contrast on light */
  --copper-ink:   #6B5748;   /* text-safe copper on light surfaces (6.3:1)     */
  --copper-over:  #DCC3B0;   /* copper tint for type over the hero render:
                                the #AC876F version needs a near-black field to
                                clear AA, which would mean a much heavier scrim */
  --copper-line:  rgba(172, 135, 111, .55);

  --magenta:      #D40F7D;
  --magenta-deep: #A80B62;

  --on-ink:        #FFFFFF;
  --on-ink-muted:  #C6C3BE;
  --on-paper:      #23211E;
  --on-paper-muted:#4A4642;

  --danger:       #B3261E;

  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --wrap: 68rem;
  --gap: clamp(1rem, 3vw, 2rem);
  --section-y: clamp(4rem, 11vw, 8.5rem);
  --radius: 2px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(212, 15, 125, .18);
  /* The page is a light theme with dark sections. Pinning the scheme keeps
     native selects and scrollbars consistent when the OS is in dark mode. */
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
  /* Black rail, not the page's cream. color-scheme: light above would
     otherwise hand us the OS light scrollbar (near-white thumb on white);
     these two declarations override it rather than fight it — the standard
     property for Firefox and current Chromium/Safari, the -webkit-
     pseudo-elements below for older Chromium and Safari. Thumb is a step
     lighter than the pure-black track so it stays visible/draggable against it. */
  scrollbar-color: var(--ink-line) var(--black);
  scrollbar-width: auto;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb {
  background: var(--ink-line);
  border-radius: 999px;
  border: 2px solid var(--black);   /* keeps the thumb off the very edge */
}
::-webkit-scrollbar-thumb:hover { background: var(--copper-ink); }
::-webkit-scrollbar-corner { background: var(--black); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--on-paper);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a, button, label, input, select, summary { touch-action: manipulation; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

img, iframe { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }

h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

/* ---------- focus: a magenta ring with a light halo so it reads on both
     the near-black and the cream surfaces ---------- */
:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .9);
}
.section--ink :focus-visible,
.hero :focus-visible,
.footer :focus-visible { box-shadow: 0 0 0 6px rgba(255, 255, 255, .55); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .875rem 1.25rem;
  background: var(--magenta);
  color: var(--white);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* ---------- shared pieces ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(clamp(1.25rem, 5vw, 3rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.25rem, 5vw, 3rem), env(safe-area-inset-right));
}
.wrap--narrow { max-width: 48rem; }
.wrap--form { max-width: 40rem; }

.section { padding-block: var(--section-y); scroll-margin-top: 1.5rem; }
.section--paper { background: var(--paper); color: var(--on-paper); }
.section--ink { background: var(--ink); color: var(--on-ink); }

.eyebrow {
  margin: 0 0 1.25rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--copper-ink);
}
.section--ink .eyebrow { color: var(--copper); }   /* 5.9:1 on the near-black field */
.eyebrow::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin-top: .75rem;
  background: var(--copper-line);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.1rem + 2.9vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.lede {
  margin-top: 1.5rem;
  max-width: 40ch;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.75;
  text-wrap: pretty;
  color: var(--on-paper-muted);
}
.lede--tight { margin-top: 1rem; max-width: 46ch; }
.section--ink .lede { color: var(--on-ink-muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: .875rem 2rem;
  border: 0;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.btn--primary { background: var(--magenta); color: var(--white); }
.btn--primary:hover { background: var(--magenta-deep); }
.btn--primary:active { transform: scale(.985); }
.btn--block { width: 100%; margin-top: 1.75rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* =========================================================================
   A. HERO — three pieces. The wordmark sits alone, plain, top-left corner,
   transparent, over the sky (no shadow, no background — the sky is the one
   quiet part of this photo). "Coming Soon", the subhead and the CTA sit
   centred at the bottom on a soft white-to-transparent fade that comes up to
   about the hedge line — dark text on a light fade, kept below the siding
   and garage doors so the building itself is never covered.
   ========================================================================= */
.hero {
  position: relative;
  display: grid;
  grid-template-areas: "hero";
  min-height: 100vh;    /* fallback for browsers without the small-viewport unit */
  min-height: 100svh;   /* no jump when mobile browser chrome collapses */
  background: var(--black);
  color: var(--on-ink);
  isolation: isolate;
}
/* Media and panel occupy the same cell — the type overlays the render. */
.hero > * { grid-area: hero; min-width: 0; }

/* Taken out of flow so the render never sizes the hero: left as a grid item
   its intrinsic 2000×1447 would win over min-height on wide viewports and the
   hero would grow past one screen. Absolute against the grid area gives the
   image a definite box to cover. */
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
}

.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  /* Shifted right of the render's own centre (was 50% 48%) so the car in the
     driveway and the monument sign stay in frame at every breakpoint,
     including the narrow portrait crops that used to lose the right third of
     the image entirely. Pulled down from 46% to 58% so more of the road and
     driveway (and less sky) shows at the bottom, giving the fade room to sit
     below the roofline without covering the building. */
  object-fit: cover;
  object-position: 66% 58%;
}

.hero__panel { position: relative; z-index: 1; height: 100%; }

/* Top-left corner, wordmark alone, plain, over the sky. */
.hero__brand {
  position: absolute;
  top: max(clamp(1.25rem, 4vh, 2.5rem), env(safe-area-inset-top));
  left: max(clamp(1.25rem, 5vw, 3rem), env(safe-area-inset-left));
}

.hero .eyebrow {
  margin-bottom: .5rem;
  color: var(--copper-ink);
}
/* Centred in the bottom block, unlike the bare rule elsewhere on the page. */
.hero .eyebrow::after { margin-inline: auto; }

.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2.25rem);
  line-height: .98;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.wordmark span { display: block; }

/* Bottom block. The fade is a background on this element, not a separate
   layer — its height is always exactly padding-top + content + padding-bottom,
   so it can never fall short of (or overshoot) the text it's backing, at any
   breakpoint. padding-top is the taper zone: the gradient reaches full
   strength before the eyebrow's line box starts, so nothing ever sits on
   half-faded pixels. "Comes up to about the hedge line" is padding-top. */
.hero__info {
  position: absolute;
  inset: auto 0 0 0;
  padding-top: clamp(2.5rem, 7.5vh, 4rem);
  padding-bottom: max(clamp(1rem, 3vh, 1.5rem), env(safe-area-inset-bottom));
  padding-inline: max(clamp(1.25rem, 5vw, 3rem), env(safe-area-inset-left));
  text-align: center;
  background: linear-gradient(to top, rgba(255, 255, 255, .97) 0%,
    rgba(255, 255, 255, .95) 55%, rgba(255, 255, 255, .8) 78%,
    rgba(255, 255, 255, 0) 100%);
}

.hero__sub {
  margin: 0 auto;
  max-width: 46ch;
  font-size: clamp(.8125rem, .75rem + .3vw, .9375rem);
  line-height: 1.5;
  color: var(--on-paper);
}

.hero__cta { margin-top: .625rem; }

@media (min-width: 48rem) {
  .wordmark { letter-spacing: .12em; font-size: clamp(2rem, 1.3rem + 2vw, 2.75rem); }
  .hero__sub { font-size: 1rem; }
  .hero__cta { margin-top: .875rem; }
}

/* A phone held sideways: keep the block compact and the taper shallow so it
   still clears the bottom of a ~375px-tall viewport. */
@media (min-aspect-ratio: 3 / 2) and (max-height: 32rem) {
  .hero__brand { top: clamp(.75rem, 3vh, 1.5rem); }
  .wordmark { font-size: clamp(1.25rem, 6vh, 1.75rem); }
  .hero__info { padding-top: 2.25rem; padding-bottom: clamp(.5rem, 2vh, .875rem); }
  .hero .eyebrow { margin-bottom: .375rem; }
  .hero__sub { font-size: .8125rem; }
  .hero__cta { margin-top: .5rem; }
}

/* =========================================================================
   B. VALUE PROPOSITION
   ========================================================================= */
/* Centred head, scoped to this section by its labelling id. .h2, .lede and
   .eyebrow are all shared with the Location and Register sections, which stay
   left-aligned — never centre the bare classes.

   The lede needs margin-inline: auto as well as text-align, or its 40ch
   measure would stay hugging the left gutter with the centred text floating
   inside it. The eyebrow and its keyline come along because they label this
   very heading: left on its own above a symmetric block it reads as a bug,
   not as a choice. The chips follow for the same reason on narrow screens —
   from 40rem up they are already centred inside their three columns. */
[aria-labelledby="homes-title"] .eyebrow,
[aria-labelledby="homes-title"] .h2,
[aria-labelledby="homes-title"] .lede,
[aria-labelledby="homes-title"] .chip { text-align: center; }
[aria-labelledby="homes-title"] .lede { margin-inline: auto; }
[aria-labelledby="homes-title"] .eyebrow::after { margin-inline: auto; }

.chips {
  display: grid;
  gap: 0;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  border-top: 1px solid var(--copper-line);
}
.chip {
  padding: 1.125rem .25rem;
  border-bottom: 1px solid var(--copper-line);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 40rem) {
  .chips { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--copper-line); }
  .chip { border-bottom: 0; border-left: 1px solid var(--copper-line); padding-inline: 1.25rem; text-align: center; }
  .chip:first-child { border-left: 0; }
}

/* =========================================================================
   C. LOCATION
   ========================================================================= */
.location {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 52rem) {
  .location { grid-template-columns: 1.35fr 1fr; align-items: start; }
}

.location__map { border: 1px solid var(--copper-line); background: var(--ink-line); }
.location__map iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  border: 0;
  filter: grayscale(.15);
}
@media (min-width: 52rem) { .location__map iframe { aspect-ratio: 16 / 11; } }

.location__fallback {
  padding: .875rem 1rem;
  border-top: 1px solid var(--copper-line);
  font-size: .875rem;
}
.location__fallback a {
  color: var(--on-ink);
  text-underline-offset: .25em;
  transition: color .15s var(--ease);
}
.location__fallback a:hover { color: var(--copper); }

/* Neighbourhood callouts. Names only — the keyline stack echoes the fact
   chips in the section above, and holds up with labels this short. */
.notes-label {
  margin: 0 0 .25rem;
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--copper);          /* 5.9:1 on the near-black field */
}

.places { border-top: 1px solid var(--copper-line); }
.place {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .875rem;
  padding: 1rem .25rem;
  border-bottom: 1px solid var(--copper-line);
}
.place__name {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.place__note {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--on-ink-muted);    /* 10.4:1 on the near-black field */
}

/* =========================================================================
   D. REGISTRATION FORM
   ========================================================================= */
.form { margin-top: clamp(2rem, 5vw, 2.75rem); }

.form__note {
  margin-bottom: 1.75rem;
  font-size: .875rem;
  color: var(--on-paper-muted);
}
.form__note--warn {
  margin-top: 1.25rem;
  padding: .875rem 1rem;
  border-left: 3px solid var(--danger);
  color: var(--danger);
}

.errors {
  margin-bottom: 1.75rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--danger);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--white);
}
.errors:focus-visible { outline-offset: 4px; }
.errors__title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--danger);
}
.errors__list { margin-top: .75rem; display: grid; gap: .5rem; }
.errors__list li { font-size: .8125rem; line-height: 1.5; }
.errors__list li::before { content: "\2716\00a0"; color: var(--danger); }
.errors__list a {
  color: var(--danger);
  text-underline-offset: .2em;
  transition: color .15s var(--ease);
}
.errors__list a:hover { color: #7E1A14; }

.field { margin-bottom: 1.5rem; border: 0; padding: 0; min-width: 0; }

.field > label,
.field legend {
  display: block;
  margin-bottom: .5rem;
  padding: 0;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.req { color: var(--magenta); }

.hint {
  margin-top: .4375rem;
  font-size: .8125rem;
  color: var(--on-paper-muted);
}

input[type="text"], input[type="email"], input[type="tel"], select {
  width: 100%;
  min-height: 3rem;
  padding: .75rem .875rem;
  border: 1px solid #8A8378;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--on-paper);
  font-family: inherit;
  font-size: 1rem;   /* 16px keeps iOS from zooming on focus */
  line-height: 1.4;
  transition: border-color .15s var(--ease);
}
input:hover, select:hover { border-color: #5F594F; }

select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--on-paper) 50%),
                    linear-gradient(135deg, var(--on-paper) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 1.35rem, calc(100% - 1rem) 1.35rem;
  background-size: .3125rem .3125rem, .3125rem .3125rem;
  background-repeat: no-repeat;
}

.field--invalid input[type="text"],
.field--invalid input[type="email"],
.field--invalid input[type="tel"],
.field--invalid select { border-color: var(--danger); border-width: 2px; }

.error {
  margin-top: .5rem;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--danger);
}
.error::before { content: "\2716\00a0"; }   /* not colour alone */

.choices { display: flex; gap: .75rem; flex-wrap: wrap; }
.choice {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: 3rem;
  padding: .625rem 1.25rem;
  border: 1px solid #8A8378;
  border-radius: var(--radius);
  background: var(--white);
  font-size: .9375rem;
  font-weight: 500;
  cursor: pointer;
}
.choice:hover { border-color: #5F594F; }
.choice:has(input:checked) { border-color: var(--magenta); box-shadow: inset 0 0 0 1px var(--magenta); }
.field--invalid .choice { border-color: var(--danger); }

input[type="radio"], input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--magenta);
  flex: 0 0 auto;
}

.field--consent { margin-top: 2rem; }
/* Scoped past `.field > label`, which is more specific than a bare `.consent`. */
.field--consent > .consent {
  display: flex;
  gap: .875rem;
  align-items: flex-start;
  padding: 1.125rem;
  border: 1px solid #8A8378;
  border-radius: var(--radius);
  background: var(--white);
  font-size: .8125rem;
  line-height: 1.65;
  font-weight: 400;
  color: var(--on-paper-muted);
  cursor: pointer;
}
.consent input { margin-top: .25rem; }
.field--consent.field--invalid .consent { border-color: var(--danger); border-width: 2px; }

.success {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  padding: clamp(1.75rem, 5vw, 2.5rem);
  border: 1px solid var(--copper-line);
  border-left: 3px solid var(--magenta);
  background: var(--white);
}
.success__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: .625rem;
}
.success__title:focus-visible { outline-offset: 4px; }
.success p { color: var(--on-paper-muted); }

/* =========================================================================
   E. FOOTER — light, because the third-party marks are dark-on-transparent.
   ========================================================================= */
.footer {
  padding-block: clamp(3rem, 8vw, 4.5rem);
  padding-bottom: max(clamp(3rem, 8vw, 4.5rem), env(safe-area-inset-bottom));
  border-top: 1px solid var(--copper-line);
  background: var(--white);
  color: var(--on-paper);
}

.logos {
  display: grid;
  gap: clamp(1.75rem, 5vw, 2.5rem);
  align-items: center;
}
@media (min-width: 44rem) { .logos { grid-template-columns: repeat(3, 1fr); } }

.logos__item { display: flex; align-items: center; justify-content: center; min-height: 4.5rem; }
.logos__img { width: 100%; max-width: 11rem; height: auto; }
/* Wider lockup, sized to sit at the same optical weight as the square marks. */
.logos__img--wide { max-width: 14.5rem; }

.disclaimer {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid #E4DFD8;
  font-size: .75rem;
  line-height: 1.7;
  color: var(--on-paper-muted);
}

/* =========================================================================
   Motion — additive only. Everything is visible with JavaScript switched off.
   ========================================================================= */
.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.js [data-stagger] {
  opacity: 0;
  animation: rise .8s var(--ease) forwards;
}
.js [data-stagger="1"] { animation-delay: .10s; }
.js [data-stagger="2"] { animation-delay: .20s; }
.js [data-stagger="3"] { animation-delay: .34s; }
.js [data-stagger="4"] { animation-delay: .46s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal], .js [data-stagger] { opacity: 1; transform: none; animation: none; }
  .btn--primary:active { transform: none; }
}

/* Never let a reveal hide content from print. */
@media print {
  .js [data-reveal], .js [data-stagger] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .skip-link { display: none; }
}