/* ============================================================
   V4 LAYER — v2's typography and art direction, v3's cleanliness,
   and a full mobile alignment pass. Loads after style.css.
   ============================================================ */

/* ---------- v3 cleanliness: square geometry, quieter chrome ---------- */

*{ border-radius:0 !important; }
img.seal{ border-radius:50% !important; }   /* the wax seal stays circular */

html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:clip; }

section{ padding:clamp(3.4rem,7.5vw,7rem) 0; }
.section-head{ padding-bottom:1rem; }
.section-head .num{ opacity:.07; }

/* registration marks (v3 signature), inset so parallax crop keeps them */
.media-frame{ position:relative; }
.media-frame::before, .thumb::before{
  content:""; position:absolute; top:10px; left:10px; width:14px; height:14px;
  border-top:1px solid rgba(168,92,51,.85); border-left:1px solid rgba(168,92,51,.85);
  z-index:4; pointer-events:none;
}
.media-frame::after, .thumb::after{
  content:""; position:absolute; bottom:10px; right:10px; width:14px; height:14px;
  border-bottom:1px solid rgba(168,92,51,.85); border-right:1px solid rgba(168,92,51,.85);
  z-index:4; pointer-events:none;
}
.thumb{ position:relative; }
.film-wrap + .media-caption{ z-index:5; }

/* hairline discipline */
.spec th{ letter-spacing:.18em; }
.regions p{ padding:.6rem 0; }

/* ---------- MOBILE ALIGNMENT PASS ---------- */

@media (max-width:640px){
  .wrap{ padding:0 20px; }
  section{ padding:2.6rem 0; }

  /* type scale for small screens */
  h1{ font-size:2.15rem; }
  h2{ font-size:1.55rem; }
  h3{ font-size:1.2rem; }
  .lead{ font-size:1.05rem; }
  blockquote.pull{ font-size:1.25rem; padding-left:0; }
  .kicker{ font-size:.6rem; letter-spacing:.18em; }

  /* hero */
  .hero-cinema{ height:min(88svh,700px); min-height:470px; }
  .hero-cinema h1{ font-size:2.05rem; max-width:13ch; }
  .hero-cinema .italic-sub{ font-size:1rem; margin-bottom:1.5rem; }
  .hero-cinema .hero-content{ padding-bottom:1.6rem; }
  .hero-ctas{ gap:.65rem; margin-bottom:1.8rem; }
  .hero-ctas .btn{ flex:1 1 100%; }
  .hero-fact{ display:grid; grid-template-columns:1fr; gap:.4rem; font-size:.6rem; padding-top:1rem; }

  /* proof bar */
  .proof-bar{ padding:1.3rem 0; }
  .proof-item strong{ font-size:.95rem; }

  /* layout rhythm */
  .two-col{ gap:1.8rem; }
  .section-head{ margin-bottom:1.6rem; padding-bottom:.8rem; }
  .section-head .num{ font-size:3rem; bottom:.1rem; }
  .grid{ gap:1.5rem; }

  /* buttons: full-width, honest tap targets */
  .btn{ display:block; width:100%; text-align:center; padding:1rem; letter-spacing:.18em; }
  .btn:hover{ letter-spacing:.18em; }
  .cta-band > div{ gap:1.2rem; }
  .cta-band h2{ font-size:1.35rem; }
  .panel{ padding:1.5rem; }

  /* facts + notes */
  .facts{ gap:.45rem 1.1rem; font-size:.6rem; letter-spacing:.12em; padding:.8rem 0; margin-bottom:1.5rem; }
  .plans-note{ font-size:.58rem; letter-spacing:.12em; }
  .trust-note{ font-size:.74rem; }

  /* spec tables stack cleanly */
  .spec tr{ display:block; padding:.85rem 0; border-bottom:1px solid var(--hairline); }
  .spec tr:first-child{ border-top:2px solid var(--green); }
  .spec th, .spec td{ display:block; border:none; padding:.12rem 0; width:auto; }
  .spec td{ font-size:.96rem; }
  .spec .result{ white-space:normal; font-size:1.05rem; }

  /* project hero status */
  .status-line{ gap:.5rem 1.2rem; margin:1rem 0 1.5rem; }
  .price{ font-size:1.25rem; }
  .media-caption{ padding:.8rem 1rem; font-size:.6rem; gap:.3rem 1.1rem; }

  /* steps / regions / marquee */
  .steps{ gap:1.3rem; }
  .step h3{ font-size:1.05rem; }
  .regions p{ font-size:.64rem; }
  .marquee{ padding:.85rem 0; }
  .marquee-track span{ font-size:1rem; }

  /* film */
  .film-wrap{ aspect-ratio:16/9; }

  /* footer + sticky CTA clearance */
  .foot-grid{ gap:1.6rem; margin-bottom:2rem; }
  footer .wordmark{ margin-bottom:1.6rem; }
  footer.site{ padding-bottom:96px; }   /* room for the sticky inquiry bar */
  main{ padding-bottom:0; }
  .foot-legal{ gap:.7rem; flex-direction:column; align-items:flex-start; }

  /* lightbox */
  .lb-stage img{ max-height:58vh; }
}

@media (max-width:400px){
  .hero-cinema h1{ font-size:1.85rem; }
  h1{ font-size:1.9rem; }
  .proof-item strong{ font-size:.9rem; }
}

/* ---------- rule discipline: no doubled hairlines ---------- */

.proof-bar{ border-bottom:none; }   /* the ticker below supplies the single rule */

/* ---------- mobile decluttering: one idea per line, no repeats ---------- */

@media (max-width:640px){
  /* hero: kicker, headline, subline, two buttons. The estate facts
     reappear in the flagship section right below, so no duplicate stack */
  .hero-fact{ display:none; }

  /* cards keep status, name, town. The one-line descriptions are
     desktop enrichment; on a phone they read as noise */
  .card-desc{ display:none; }

  /* kill the doubled rule at the top of stacked spec tables */
  .spec tr:first-child th, .spec tr:first-child td{ border-top:none; }

  /* tighter, quieter proof bar */
  .proof-bar{ padding:1.1rem 0; }
  .proof-grid{ gap:.85rem; }
  .proof-item .kicker{ margin-bottom:.15rem; }
  .proof-item strong{ font-size:.92rem; }

  /* facts strips breathe less vertically */
  .facts{ row-gap:.35rem; padding:.75rem 0; margin-bottom:1.3rem; }
  .plans-note{ margin-bottom:1rem; }

  /* regions block: single hairline rhythm */
  .regions p{ padding:.5rem 0; }
}

/* ---------- precision separators on status lines ---------- */

.status-line{ align-items:baseline; }
.status-line > * + *::before{
  content:"·"; color:var(--copper);
  margin-right:.65rem; font-weight:400;
}
@media (max-width:640px){
  .status-line{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .status-line > * + *::before{ content:none; }
}

/* ---------- quieter, slower town ticker ---------- */

.marquee{ opacity:.7; }
.marquee-track{ animation-duration:150s; }
.marquee-track i{ opacity:.5; }
.marquee-track span{ opacity:.8; }

/* ---------- equal housing line ---------- */

.fair-housing{
  font-size:.72rem; line-height:1.7; letter-spacing:.04em;
  color:rgba(244,239,227,.55);
  max-width:72ch; margin:0 0 1.3rem;
}

/* ---------- hero clipping fix ----------
   The v4 section padding was being counted inside the hero's fixed
   height, squeezing the bottom-anchored content until the headline
   clipped at the top. The hero now carries no section padding and
   grows with its content instead of cutting it. */

section.hero-cinema{ padding:0; height:auto; min-height:min(92vh,940px); }
.hero-cinema .hero-content{ padding-top:clamp(6rem,12vh,9rem); }
.hero-cinema h1{ overflow:visible; line-height:1.1; }

@media (max-width:640px){
  section.hero-cinema{ height:auto; min-height:min(88svh,700px); }
  .hero-cinema .hero-content{ padding-top:4.5rem; }
}

/* ============================================================
   V4.1 REFINEMENTS — mobile density + hairline discipline
   Mobile-scoped so the desktop art direction is untouched.
   ============================================================ */
@media (max-width:640px){

  /* Project hero: compact the stacked status line (status / price /
     address) into one tight block instead of three floating lines */
  .project-hero .status-line{ gap:.3rem; margin:.9rem 0 1.3rem; }
  .project-hero .status-line > *{ margin:0; }

  /* The hero facts strip repeats the spec table right below it —
     drop it on phones to cut the duplicate density (desktop keeps it) */
  .project-hero .facts{ display:none; }

  /* Town ticker becomes a single quiet divider instead of a
     rule–ticker–rule sandwich that reads as a double line */
  .marquee{ border-top:none; padding:.55rem 0 .85rem; opacity:.6; }

  /* Process steps: four stacked 2px bars feel heavy in a narrow
     column — take them to one refined hairline weight */
  .steps .step{ border-top-width:1px; border-top-color:var(--hairline-strong); }

  /* Mobile menu: guarantee a single hairline at the base, never two */
  .nav-links.open{ border-bottom:none; }
  .nav-links.open a:last-child{ border-bottom:1px solid var(--hairline); }
}

/* ---------- city-grouped developments (v4.2) ---------- */

.city-group{ margin-bottom:clamp(2.4rem,4.5vw,3.8rem); }
.city-group:last-child{ margin-bottom:0; }
.city-head{ display:flex; align-items:center; gap:1.3rem; margin-bottom:1.5rem; }
.city-name{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(1.3rem,2.2vw,1.75rem); color:var(--soft-black); letter-spacing:-.01em; line-height:1; }
.city-line{ flex:1; height:1px; background:var(--bronze); }
.city-count{ font-size:.6rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--copper); white-space:nowrap; }
.city-group .grid > *{ margin-top:0 !important; }

@media (max-width:640px){
  /* phones: the count label can be nearly screen-wide, so the city
     name takes its own line and the rule + count sit beneath it */
  .city-head{ flex-wrap:wrap; gap:.5rem .9rem; margin-bottom:1.1rem; }
  .city-name{ font-size:1.25rem; flex:1 1 100%; }
  .city-line{ flex:1 1 2.2rem; min-width:2.2rem; }
  .city-count{ font-size:.56rem; letter-spacing:.16em; }
  .city-group{ margin-bottom:2rem; }
}

@media (max-width:400px){
  /* very small phones: let the label wrap rather than ever clip */
  .city-count{ white-space:normal; text-align:right; line-height:1.6; max-width:75%; }
}

/* ---------- development sub-groups within a city (v4.2) ---------- */

.dev-group{ margin-bottom:clamp(1.9rem,3.5vw,2.8rem); }
.dev-group:last-child{ margin-bottom:0; }
.dev-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.6rem 1.4rem; flex-wrap:wrap; margin-bottom:1.1rem;
}
.dev-name{
  font-size:.72rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--green);
}
.dev-note{
  font-size:.6rem; font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
}

@media (max-width:640px){
  .dev-head{ margin-bottom:.9rem; }
  .dev-name{ letter-spacing:.18em; }
  .dev-note{ font-size:.56rem; }
}

/* ---------- anchored residences land clear of the header (v4.4) ---------- */

[id]{ scroll-margin-top:96px; }
html{ scroll-behavior:smooth; }

/* ---------- rendering disclosure captions (v4.4) ---------- */

.thumb{ position:relative; }
.thumb-note{
  position:absolute; left:10px; bottom:10px; z-index:5;
  font-size:.52rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,239,227,.92); background:rgba(30,58,43,.55);
  padding:.28rem .55rem; pointer-events:none; backdrop-filter:blur(2px);
}