/* ============================================================
   NOC DEVELOPMENT — Revision 9
   Mobile overflow fixes + conversion elements (SEO plan §3.4)
   Loaded after site.css on every page.
   ============================================================ */

/* ── 1. MOBILE OVERFLOW / TEXT-WIDTH FIXES ──────────────────
   Android reported: body text rendered wider than the viewport and
   wide comparison tables were clipped with no way to pan. Body uses
   overflow-x:clip (needed to keep the sticky header working), so wide
   content must scroll inside its OWN container instead of the page. */

/* Grid/flex children default to min-width:auto, which lets long words and
   wide tables blow out the track. This is the root cause of the clipping. */
.container > *,
.article-body > *,
.article-content > *,
.section > * { min-width: 0; }

/* Long URLs, model codes and unbroken strings wrap instead of overflowing. */
body { overflow-wrap: break-word; }
p, li, td, th, dd, dt, blockquote, figcaption, .noc-faq-a { overflow-wrap: break-word; }

/* Wide tables get their own horizontal scroller (added by js/rev9.js). */
.rev9-tscroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.rev9-tscroll > table { min-width: 560px; margin: 0; }
.rev9-tscroll[data-overflowing="1"] { position: relative; }
/* Subtle "there is more to the right" affordance */
.rev9-scrollhint {
  display: none;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400, #8a8683);
  margin: 8px 0 0;
}
.rev9-tscroll[data-overflowing="1"] + .rev9-scrollhint { display: block; }

@media (max-width: 768px) {
  /* Nothing may exceed the viewport width. */
  img, iframe, video, table, pre, svg, canvas { max-width: 100%; }
  table { table-layout: auto; }
  /* Wide fixed-width inline styles are the other common offender. */
  [style*="width:"][style*="px"] { max-width: 100% !important; }
  /* Article/blog text: comfortable measure, no clipping. */
  .article-content, .article-body, .blog-article { max-width: 100%; }
  .article-content p, .article-body p { font-size: 15px; line-height: 1.8; }
}

/* ── 1b. GRID TRACKS THAT REFUSE TO SHRINK ───────────────────────────
   Several page-level grids use `1fr`, which is minmax(auto, 1fr) — the
   `auto` minimum is the item's min-content contribution, so one wide
   descendant (a stat row, a button row, a table) drags the whole track
   past the viewport. On Android this is what pushed body copy off-screen
   with no way to pan, because body uses overflow-x:clip.
   minmax(0, 1fr) lets the track shrink; the descendant then wraps, or
   scrolls inside its own container (see .rev9-tscroll above). */
@media (max-width: 900px) {
  .crossborder-grid,
  .town-layout,
  .map-grid,
  .register-inner,
  .comm-hero-inner,
  .article-body,
  .blog-featured,
  .life-grid,
  .communities-grid,
  .blog-grid,
  .fp-grid,
  .amenities-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Every grid/flex child may shrink below its content's intrinsic width. */
  .crossborder-grid > *, .town-layout > *, .map-grid > *,
  .register-inner > *, .comm-hero-inner > *, .article-body > *,
  .blog-featured > *, .life-grid > *, .section > * > * {
    min-width: 0;
  }
  /* Button/stat rows wrap rather than forcing the track wide. */
  .crossborder-stat-row, .crossborder-cta, .comm-hero-actions,
  .hero-actions, .life-stats { flex-wrap: wrap; }
  .crossborder-stat, .life-stat { min-width: 140px; }
}

/* ── 2. STICKY MOBILE ACTION BAR ─────────────────────────────
   "Book a viewing" + tap-to-call, on every page, mobile only. */
.rev9-actionbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2147482000; /* just under the chat launcher */
  background: var(--charcoal, #24211f);
  border-top: 2px solid var(--red, #c0392b);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
  box-shadow: 0 -6px 24px rgba(26,25,24,0.22);
}
.rev9-actionbar a {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  text-align: center;
}
.rev9-actionbar .rev9-ab-primary { background: var(--red, #c0392b); color: #fff; }
.rev9-actionbar .rev9-ab-call { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.rev9-actionbar svg { width: 17px; height: 17px; flex: 0 0 auto; }

@media (max-width: 900px) {
  .rev9-actionbar { display: flex; }
  /* Keep page content clear of the bar. */
  body { padding-bottom: 68px; }
  .site-footer { padding-bottom: 24px; }
  /* Lift the chat launcher and panel above the action bar. */
  .nocc .nocc-launch { bottom: 84px !important; }
  .nocc .nocc-panel { bottom: 150px !important; max-height: calc(100vh - 190px) !important; }
}

/* ── 3. TAP-TO-CALL IN THE HEADER ────────────────────────────
   Desktop: a quiet phone link beside the nav CTA.
   Mobile: an icon button next to the hamburger. */
.rev9-headcall {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--black, #1a1918);
  white-space: nowrap;
}
.rev9-headcall:hover { color: var(--red, #c0392b); }
.rev9-headcall svg { width: 15px; height: 15px; }
.rev9-headcall-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-right: 4px;
  color: var(--red, #c0392b);
}
.rev9-headcall-mobile svg { width: 20px; height: 20px; }
@media (max-width: 1024px) {
  .rev9-headcall-mobile { display: inline-flex; }
}

/* ── 4. EXIT-INTENT / SCROLL INCENTIVE PROMPT ────────────────── */
.rev9-exit {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(26,25,24,0.62);
  opacity: 0;
  transition: opacity .22s ease;
}
.rev9-exit.is-open { display: flex; }
.rev9-exit.is-shown { opacity: 1; }
.rev9-exit-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--white, #fff);
  border-top: 4px solid var(--red, #c0392b);
  padding: 40px 36px 32px;
  box-shadow: 0 28px 80px rgba(26,25,24,0.35);
  transform: translateY(12px);
  transition: transform .24s cubic-bezier(.4,0,.2,1);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.rev9-exit.is-shown .rev9-exit-card { transform: none; }
.rev9-exit-close {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px;
  font-size: 22px; line-height: 1;
  color: var(--gray-400, #8a8683);
}
.rev9-exit-close:hover { color: var(--black, #1a1918); }
.rev9-exit-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--red, #c0392b); margin-bottom: 12px;
}
.rev9-exit-title {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 27px; font-weight: 600; line-height: 1.2;
  color: var(--black, #1a1918); margin-bottom: 12px;
}
.rev9-exit-title em { font-style: italic; color: var(--red, #c0392b); }
.rev9-exit-sub { font-size: 14px; line-height: 1.75; color: var(--gray-500, #6b6866); margin-bottom: 22px; }
.rev9-exit form { display: flex; flex-direction: column; gap: 10px; }
.rev9-exit input, .rev9-exit select {
  width: 100%; padding: 13px 14px; font-size: 14.5px;
  border: 1px solid var(--border, #e2ddd6); background: var(--bg, #fefcf9);
  color: var(--black, #1a1918);
}
.rev9-exit input:focus, .rev9-exit select:focus { outline: none; border-color: var(--red, #c0392b); }
.rev9-exit button[type="submit"] {
  width: 100%; min-height: 48px; background: var(--red, #c0392b); color: #fff;
  font-size: 14.5px; font-weight: 600; letter-spacing: 0.03em;
}
.rev9-exit button[type="submit"]:hover { background: #962d22; }
.rev9-exit-legal { font-size: 11px; color: var(--gray-400, #8a8683); line-height: 1.6; margin-top: 4px; }
.rev9-exit-done { font-size: 15px; line-height: 1.75; color: var(--gray-500, #6b6866); }

/* ── 5. TRUST SIGNALS NEAR FORMS ─────────────────────────────── */
.rev9-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.rev9-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.72);
}
.rev9-trust-item svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--red, #c0392b); }
/* Light-background variant (voucher / city pages) */
.rev9-trust--light { border-top-color: var(--border, #e2ddd6); }
.rev9-trust--light .rev9-trust-item { color: var(--gray-500, #6b6866); }

@media print {
  .rev9-actionbar, .rev9-exit, .nocc { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* ============================================================
   REVISION 10.1
   ============================================================ */

/* ── 10.1 §1. DESKTOP HERO IMAGE — SHOW THE WHOLE RENDERING ──
   The home page hero photo is 2560×1707 (3:2). On desktop the right-hand
   column is ~725px wide by ~858px tall (0.85:1, portrait), so object-fit:cover
   scaled the image to the column HEIGHT and threw away ~44% of its WIDTH —
   the house was sliced down both sides.
   Fix (desktop only — the mobile layout stacks and already looks right):
     • the photo is displayed with object-fit:contain, so nothing is cut off;
     • the letterbox area is filled with a blurred, scaled copy of the same
       photo (set as a background-image on .hero-image in index.html), so
       there is no dead band — it reads as one image.
   Mobile/tablet (≤900px) is deliberately untouched. */
@media (min-width: 901px) {
  .hero-image { position: relative; overflow: hidden; }
  .hero-image::before {
    content: "";
    position: absolute;
    inset: -6%;
    background-image: inherit;      /* the URL set inline on .hero-image */
    background-size: cover;
    background-position: center;
    filter: blur(26px) saturate(1.08) brightness(0.96);
    transform: scale(1.06);
    z-index: 0;
  }
  .hero-image > img {
    position: relative !important;
    z-index: 1;
    object-fit: contain !important;
    object-position: center !important;
  }
  .hero-image-overlay { z-index: 2; }
}

/* ── 10.1 §2. QUEENS VALLEY SITE PLAN ───────────────────────
   The site plan is now a button that opens the page lightbox instead of a
   link to Drive / the broker portal. Keep it looking exactly like the old
   framed image. */
.qve-siteplan-btn {
  appearance: none;
  font: inherit;
  color: inherit;
  transition: border-color var(--dur, .3s) var(--ease, ease);
}
.qve-siteplan-btn:hover { border-color: var(--red, #c0392b) !important; }
.qve-siteplan-btn:focus-visible { outline: 2px solid var(--red, #c0392b); outline-offset: 2px; }

/* ============================================================
   REVISION 10.2 — events hub, event pages, signal landing pages
   ============================================================ */

/* ── Shared: NOC-branded form (replaces embedded HubSpot forms) ── */
.noc-form { display: grid; gap: 14px; }
.noc-form .noc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.noc-form label,
.noc-form .noc-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gray-500, #6b6866);
}
.noc-form input[type="text"],
.noc-form input[type="email"],
.noc-form input[type="tel"],
.noc-form input[type="number"],
.noc-form input[type="date"],
.noc-form select,
.noc-form textarea {
  width: 100%; padding: 13px 14px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--border, #e2ddd6); background: var(--white, #fff);
  color: var(--black, #1a1918); border-radius: 0; min-height: 46px;
}
.noc-form textarea { min-height: 96px; resize: vertical; }
.noc-form input:focus, .noc-form select:focus, .noc-form textarea:focus {
  outline: none; border-color: var(--red, #c0392b);
}
.noc-form .noc-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.noc-form button[type="submit"] {
  min-height: 50px; padding: 0 26px; width: 100%;
  background: var(--red, #c0392b); color: #fff; border: none;
  font-size: 15px; font-weight: 600; letter-spacing: 0.03em; cursor: pointer;
  font-family: inherit;
}
.noc-form button[type="submit"]:hover { background: #962d22; }
.noc-form button[type="submit"]:disabled { opacity: .6; cursor: default; }
.noc-consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; line-height: 1.65; color: var(--gray-500, #6b6866);
  text-transform: none; letter-spacing: 0;
}
.noc-consent input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }
.noc-form-legal { font-size: 11.5px; line-height: 1.6; color: var(--gray-400, #8a8683); }
.noc-hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }
.noc-form-done {
  border-left: 3px solid var(--red, #c0392b); padding: 18px 20px;
  background: var(--bg-2, #f7f4ef); font-size: 15px; line-height: 1.8;
}
@media (max-width: 620px) { .noc-form .noc-row { grid-template-columns: minmax(0,1fr); } }

/* ── Events hub ─────────────────────────────────────────────── */
.evh-hero { background: var(--charcoal, #24211f); color: #fff; padding: var(--space-9, 72px) 0; }
.evh-hero h1 {
  font-family: var(--font-serif, Georgia, serif); font-size: clamp(34px, 5vw, 58px);
  font-weight: 600; line-height: 1.08; margin-bottom: 18px; color: #fff;
}
.evh-hero h1 em { font-style: italic; color: var(--red, #c0392b); }
.evh-hero p { font-size: 17px; line-height: 1.75; color: rgba(255,255,255,0.74); max-width: 640px; }
.evh-list { display: grid; gap: 26px; }
.evh-card {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 30px; align-items: center;
  border: 1px solid var(--border, #e2ddd6); background: var(--white, #fff);
  padding: 26px 28px;
}
.evh-card.is-past { opacity: .62; }
.evh-date {
  border-right: 1px solid var(--border, #e2ddd6); padding-right: 24px; text-align: center;
}
.evh-date-month {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--red, #c0392b);
}
.evh-date-day {
  font-family: var(--font-serif, Georgia, serif); font-size: 52px; font-weight: 700;
  line-height: 1; color: var(--black, #1a1918); margin: 4px 0 6px;
}
.evh-date-time { font-size: 13px; color: var(--gray-500, #6b6866); }
.evh-card h2 {
  font-family: var(--font-serif, Georgia, serif); font-size: 26px; font-weight: 600;
  line-height: 1.2; margin-bottom: 8px; color: var(--black, #1a1918);
}
.evh-card h2 a:hover { color: var(--red, #c0392b); }
.evh-meta { font-size: 13px; color: var(--gray-400, #8a8683); margin-bottom: 10px; }
.evh-card p { font-size: 14.5px; line-height: 1.75; color: var(--gray-500, #6b6866); }
.evh-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 5px 10px; margin-bottom: 10px;
  background: var(--bg-2, #f7f4ef); color: var(--gray-500, #6b6866);
  border: 1px solid var(--border, #e2ddd6);
}
.evh-tag--open { background: rgba(192,57,43,0.08); border-color: rgba(192,57,43,0.35); color: var(--red, #c0392b); }
@media (max-width: 900px) {
  .evh-card { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .evh-date { border-right: none; border-bottom: 1px solid var(--border, #e2ddd6); padding: 0 0 16px; text-align: left; display: flex; align-items: baseline; gap: 12px; }
  .evh-date-day { font-size: 34px; margin: 0; }
}

/* ── Signal landing pages (LP2 / LP3 / LP4 / LP5) ───────────── */
.lp-hero { background: var(--charcoal, #24211f); color: #fff; padding: var(--space-9, 72px) 0; }
.lp-hero--light { background: var(--bg-2, #f7f4ef); color: var(--black, #1a1918); }
.lp-hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: start; }
.lp-h1 {
  font-family: var(--font-serif, Georgia, serif); font-size: clamp(32px, 4.6vw, 54px);
  font-weight: 600; line-height: 1.1; margin-bottom: 18px;
}
.lp-h1 em { font-style: italic; color: var(--red, #c0392b); }
.lp-hero p.lp-sub { font-size: 17px; line-height: 1.78; color: rgba(255,255,255,0.76); max-width: 600px; }
.lp-hero--light p.lp-sub { color: var(--gray-500, #6b6866); }
.lp-card {
  background: var(--white, #fff); padding: 30px 28px;
  box-shadow: 0 22px 60px rgba(26,25,24,0.22); border-top: 4px solid var(--red, #c0392b);
}
.lp-card h2, .lp-card h3 {
  font-family: var(--font-serif, Georgia, serif); font-size: 23px; font-weight: 600;
  color: var(--black, #1a1918); margin-bottom: 6px;
}
.lp-card .lp-card-note { font-size: 13px; color: var(--gray-500, #6b6866); margin-bottom: 20px; line-height: 1.6; }
.lp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border, #e2ddd6); border: 1px solid var(--border, #e2ddd6); }
.lp-stat { background: var(--white, #fff); padding: 20px 18px; }
.lp-stat-num { font-family: var(--font-serif, Georgia, serif); font-size: 30px; font-weight: 700; color: var(--black, #1a1918); line-height: 1.1; }
.lp-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-400, #8a8683); margin-top: 6px; }
.lp-source { font-size: 11.5px; line-height: 1.6; color: var(--gray-400, #8a8683); margin-top: 12px; }
.lp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.lp-table th, .lp-table td { padding: 12px 14px; border-bottom: 1px solid var(--border, #e2ddd6); text-align: left; }
.lp-table th { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500, #6b6866); background: var(--bg-2, #f7f4ef); }
.lp-table td strong { color: var(--black, #1a1918); }
.lp-note {
  border-left: 3px solid var(--red, #c0392b); background: var(--bg-2, #f7f4ef);
  padding: 18px 22px; font-size: 14.5px; line-height: 1.8; color: var(--gray-500, #6b6866);
}
.lp-check-out { display: none; margin-top: 26px; }
.lp-check-out.is-on { display: block; }
.lp-verdict { padding: 22px 24px; border: 1px solid var(--border, #e2ddd6); border-top: 4px solid var(--red, #c0392b); background: var(--white, #fff); }
.lp-verdict-head { font-family: var(--font-serif, Georgia, serif); font-size: 24px; font-weight: 600; color: var(--black, #1a1918); margin-bottom: 10px; }
.lp-verdict p { font-size: 15px; line-height: 1.8; color: var(--gray-500, #6b6866); margin-bottom: 10px; }
.lp-verdict ul { margin: 12px 0 0 18px; font-size: 14.5px; line-height: 1.85; color: var(--gray-500, #6b6866); }
.lp-steps { counter-reset: lpstep; display: grid; gap: 0; }
.lp-step { display: none; }
.lp-step.is-on { display: grid; gap: 14px; }
.lp-progress { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-400, #8a8683); margin-bottom: 14px; }
@media (max-width: 900px) {
  .lp-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

/* ── 10.2: EVENT PAGE COMPONENTS ─────────────────────────────
   Lifted out of bevel-line-event.html so the Bevel Line event page and
   the New Home Buyer Seminar page share one definition. Both pages use
   .evt-hero, .evt-facts, .evt-cards, .evt-plans, .evt-rsvp, .evt-details
   and the lightbox; keeping the rules on one page meant the other
   rendered unstyled. */

  :root {
    --evt-green: #14402a;
    --evt-green-2: #1d5a3a;
    --evt-gold: #b8863b;
    --evt-cream: #f7f3ea;
  }
  .evt-hero {
    background: var(--evt-green);
    color: #fff;
    padding: var(--space-9, 72px) 0;
    position: relative;
    overflow: hidden;
  }
  .evt-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 56px;
    align-items: center;
  }
  .evt-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--evt-gold); margin-bottom: 16px;
  }
  .evt-h1 {
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 600; line-height: 1.08; margin-bottom: 18px; color: #fff;
  }
  .evt-h1 em { font-style: italic; color: var(--evt-gold); }
  .evt-sub { font-size: 17px; line-height: 1.75; color: rgba(255,255,255,0.78); max-width: 560px; margin-bottom: 26px; }
  .evt-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
  .evt-fact {
    border: 1px solid rgba(255,255,255,0.24);
    background: rgba(255,255,255,0.07);
    padding: 12px 16px; min-width: 150px;
  }
  .evt-fact-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--evt-gold); margin-bottom: 5px; }
  .evt-fact-value { font-size: 15px; font-weight: 600; color: #fff; line-height: 1.4; }
  .evt-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
  .btn-evt {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 50px; padding: 0 26px; font-size: 15px; font-weight: 600;
    letter-spacing: 0.02em; background: var(--evt-gold); color: #fff;
    border: 1px solid var(--evt-gold);
  }
  .btn-evt:hover { background: #9c7130; border-color: #9c7130; }
  .btn-evt-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
  .btn-evt-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
  .evt-flyer {
    display: block; width: 100%; height: auto;
    border: 6px solid rgba(255,255,255,0.9);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    cursor: zoom-in;
  }
  .evt-countdown { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 26px; }
  .evt-countdown span {
    background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22);
    padding: 12px 16px; font-family: var(--font-serif, Georgia, serif);
    font-size: 34px; font-weight: 700; color: #fff; line-height: 1;
    min-width: 72px; text-align: center;
  }
  .evt-countdown span small {
    display: block; font-family: var(--font-sans, sans-serif); font-size: 9px;
    font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.6); margin-top: 5px;
  }

  .evt-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .evt-card { border: 1px solid var(--border, #e2ddd6); background: var(--white, #fff); padding: 26px 22px; }
  .evt-card-icon { font-size: 22px; margin-bottom: 12px; }
  .evt-card h3 { font-family: var(--font-serif, Georgia, serif); font-size: 19px; font-weight: 600; margin-bottom: 8px; color: var(--black, #1a1918); }
  .evt-card p { font-size: 14px; line-height: 1.75; color: var(--gray-500, #6b6866); }

  .evt-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .evt-plan { border: 1px solid var(--border, #e2ddd6); background: #fff; cursor: zoom-in; }
  .evt-plan img { width: 100%; aspect-ratio: 4/3; object-fit: contain; display: block; background: #fff; }
  .evt-plan-cap { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-500, #6b6866); padding: 12px 14px; border-top: 1px solid var(--border, #e2ddd6); }

  .evt-rsvp { background: var(--evt-green); color: #fff; }
  .evt-rsvp-inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
  .evt-form-card { background: #fff; padding: 32px 30px; box-shadow: 0 20px 60px rgba(0,0,0,0.28); }
  .evt-form-card h3 { font-family: var(--font-serif, Georgia, serif); font-size: 24px; font-weight: 600; color: var(--black, #1a1918); margin-bottom: 6px; }
  .evt-form-note { font-size: 13px; color: var(--gray-500, #6b6866); margin-bottom: 20px; }
  .evt-form-fallback { font-size: 13.5px; line-height: 1.7; color: var(--gray-500, #6b6866); }
  .evt-ul { list-style: none; margin: 18px 0 0; padding: 0; }
  .evt-ul li { position: relative; padding-left: 26px; margin-bottom: 12px; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.82); }
  .evt-ul li::before { content: "✓"; position: absolute; left: 0; color: var(--evt-gold); font-weight: 700; }

  .evt-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .evt-detail { border-left: 3px solid var(--evt-gold); padding-left: 18px; }
  .evt-detail-label { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-400, #8a8683); margin-bottom: 6px; }
  .evt-detail-value { font-size: 16px; font-weight: 600; color: var(--black, #1a1918); line-height: 1.5; }

  .evt-lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.93); z-index: 2147483200; align-items: center; justify-content: center; padding: 20px; }
  .evt-lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; }

  @media (max-width: 900px) {
    .evt-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .evt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .evt-plans { grid-template-columns: minmax(0, 1fr); }
    .evt-rsvp-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .evt-details { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 560px) {
    .evt-cards { grid-template-columns: minmax(0, 1fr); }
  }

/* ============================================================
   REVISION 10.3 — mobile conversion pass
   Every rule here came out of a real-device audit at 390px. The theme is
   the same each time: on a phone the form is the page, and anything that
   makes it awkward to touch costs a registration.
   ============================================================ */
@media (max-width: 900px) {

  /* iOS zooms the whole page in when a field's font is under 16px, then
     leaves the visitor zoomed and scrolled sideways. That single detail
     loses more mobile registrations than any copy change wins back. */
  .noc-form input[type="text"],
  .noc-form input[type="email"],
  .noc-form input[type="tel"],
  .noc-form input[type="number"],
  .noc-form input[type="date"],
  .noc-form select,
  .noc-form textarea,
  .register-form-inline input,
  #eq-form input, #eq-form select,
  #rc-form input, #rc-form select {
    font-size: 16px !important;
    min-height: 50px;
  }

  /* Consent is a legal requirement and a 18px box is a miss-and-try-again
     on a thumb. Give the whole row a proper target. */
  .noc-consent {
    align-items: center;
    min-height: 44px;
    padding: 6px 0;
  }
  .noc-consent input[type="checkbox"] {
    width: 24px; height: 24px; margin-top: 0;
  }

  /* Submit buttons run full width and are unmissable. */
  .noc-form button[type="submit"] { min-height: 54px; font-size: 16px; }

  /* Buttons inside the two tools were sized for a mouse. */
  #rc-form .btn, #eq-form .btn, .lp-step .btn { min-height: 50px; font-size: 15px; }

  /* Footer link lists: 22px rows are a lottery. */
  .site-footer .footer-col a,
  .site-footer .footer-brand a {
    display: block;
    min-height: 40px;
    line-height: 40px;
    padding: 0;
  }

  /* The announce bar is the first thing on the page and its link was 14px tall. */
  #announce-bar a { display: inline-block; padding: 6px 2px; min-height: 32px; }

  /* Hamburger. */
  .nav-toggle { width: 44px !important; height: 44px !important; }

  /* Floor-plan quick pills. */
  .quick-pill { min-height: 40px !important; }

  /* Event and landing-page cards: the whole card should feel tappable. */
  .evh-card [class*="btn"], .evt-cta-row a, .lp-card .btn { min-height: 48px; }

  /* Stop a long email address or phone number from setting the page width. */
  .evt-detail-value, .lp-source, .noc-form-legal { overflow-wrap: break-word; }
}

/* The honeypot must never be reachable — it sits off-screen by design, but
   make sure a screen reader and the tab order skip it too. */
.noc-hp { pointer-events: none !important; }

/* ── 10.3: keep the chat launcher off the call to action ──────────────
   On a phone the launcher is a wide pill sitting a few pixels above the
   sticky bar, and it lands squarely on top of whichever button happens to
   be there. Collapse it to a circular icon on mobile: still obvious, but it
   no longer covers the thing we are asking people to tap. */
@media (max-width: 900px) {
  .nocc .nocc-launch {
    padding: 0 !important;
    width: 52px; height: 52px;
    border-radius: 50% !important;
    justify-content: center;
    right: 14px !important;
    bottom: 88px !important;
  }
  .nocc .nocc-launch .nocc-label { display: none !important; }
  .nocc .nocc-launch svg { width: 24px; height: 24px; }
}

/* ── 10.3: the announce bar was eating the top of every phone screen ──
   Three wrapped lines of red pushed the headline below the fold on a 390px
   device. Tighter type and padding buy that space back for the offer. */
@media (max-width: 900px) {
  #announce-bar {
    font-size: 12.5px;
    line-height: 1.45;
    padding: 9px 14px;
  }
  #announce-bar strong { display: block; }
  #announce-bar a { min-height: 30px; padding: 4px 2px; }
}

/* The event and seminar contact lines are tap targets, not prose. */
@media (max-width: 900px) {
  .evt-detail-value a { display: inline-block; min-height: 40px; line-height: 40px; }
}

/* ── 10.3: give the headline back the top of the phone screen ────────
   The landing-page heroes carried desktop padding on mobile, so between the
   announce bar, the header and 72px of air the H1 started below the fold. */
@media (max-width: 900px) {
  .lp-hero, .evh-hero, .evt-hero { padding: 36px 0 42px; }
  .lp-hero .lp-h1, .evh-hero h1 { font-size: clamp(30px, 8.5vw, 40px); }
  .lp-hero .lp-sub, .evh-hero p { font-size: 16px; line-height: 1.7; }
  .lp-hero-inner, .evt-hero-inner { gap: 28px; }
  /* The form card should be the next thing after the headline, not a scroll away. */
  .lp-hero .evt-cta-row, .lp-hero .lp-card { margin-top: 22px; }
}

/* ── 10.3: on a phone, the register card comes before the detail tiles ──
   The seminar hero listed date, time, address and admission before the form,
   which pushed the ask past the first screen and a half. On mobile the order
   becomes headline → the hook → register → the details, so somebody who is
   already sold can act without scrolling past four tiles first.
   display:contents lets the copy column's children take part in the flex
   ordering without changing the desktop two-column layout. */
@media (max-width: 900px) {
  .lp-hero-inner:has(.sem-hero-copy) { display: flex; flex-direction: column; }
  .sem-hero-copy { display: contents; }
  .sem-hero-copy > .eyebrow      { order: 1; }
  .sem-hero-copy > .lp-h1        { order: 2; }
  .sem-hero-copy > .lp-sub       { order: 3; }
  .lp-hero-inner > .lp-card      { order: 4; margin-top: 4px; }
  .sem-hero-copy > .evt-facts    { order: 5; margin-top: 26px; }
  .sem-hero-copy > .evt-countdown{ order: 6; }
  .sem-hero-copy > .evt-cta-row  { order: 7; }
}

/* display:contents drops the copy column's own spacing, so restore it. */
@media (max-width: 900px) {
  .sem-hero-copy > .eyebrow { margin-bottom: 12px; }
  .sem-hero-copy > .lp-h1 { margin-bottom: 14px; }
  .sem-hero-copy > .lp-sub { margin-bottom: 20px; }
}

/* ============================================================
   Rev 10.4 — floor-plan explorer on the quick-closing pages
   ============================================================ */
.fx-filters { display:flex; flex-wrap:wrap; gap:26px 40px; padding:22px 0 6px;
              border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200);
              margin-bottom:22px; }
.fx-fgroup { min-width:180px; }
.fx-flabel { display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
             color:var(--gray-400); font-weight:700; margin-bottom:10px; }
.fx-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.fx-pill { min-height:40px; padding:0 16px; border:1px solid var(--gray-200); background:#fff;
           border-radius:999px; font-size:14px; font-weight:600; color:var(--gray-500);
           cursor:pointer; transition:all .18s ease; }
.fx-pill:hover { border-color:var(--red); color:var(--red); }
.fx-pill.is-on { background:var(--red); border-color:var(--red); color:#fff; }
.fx-count { font-size:13.5px; color:var(--gray-400); margin-bottom:18px; }
.fx-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:20px; }
.fx-card { background:#fff; border:1px solid var(--gray-200); border-top:3px solid var(--red);
           border-radius:4px; padding:22px 22px 18px; display:flex; flex-direction:column; }
.fx-card-comm { font-size:11px; letter-spacing:.1em; text-transform:uppercase;
                color:var(--gray-400); font-weight:700; }
.fx-card-name { font-family:var(--font-serif); font-size:23px; font-weight:600;
                margin:8px 0 4px; color:var(--black); }
.fx-card-type { font-size:14px; color:var(--gray-500); margin-bottom:14px; }
.fx-card-stats { display:flex; gap:16px; flex-wrap:wrap; font-size:13.5px;
                 color:var(--gray-500); padding-bottom:12px; border-bottom:1px solid var(--gray-200); }
.fx-card-stats strong { color:var(--black); font-size:15px; }
.fx-card-price { font-size:16px; font-weight:700; color:var(--black); margin:12px 0 16px; }
.fx-card-foot { margin-top:auto; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.fx-ask { min-height:44px; width:100%; padding:0 14px; border:none; background:var(--red); color:#fff;
          border-radius:3px; font-size:14px; font-weight:700; cursor:pointer; transition:opacity .18s; }
.fx-ask:hover { opacity:.88; }
.fx-view { font-size:13.5px; font-weight:600; color:var(--gray-500); min-height:36px;
           line-height:36px; text-decoration:none; }
.fx-view:hover { color:var(--red); }
.fx-empty { border:1px dashed var(--gray-200); border-radius:4px; padding:26px; margin-top:20px;
            font-size:15px; line-height:1.8; color:var(--gray-500); display:flex;
            flex-wrap:wrap; gap:10px; align-items:center; }
.fx-empty p { flex:1 1 100%; }
.fx-flash { animation:fxFlash 1.4s ease; }
@keyframes fxFlash { 0%,100% { box-shadow:0 18px 50px rgba(26,25,24,0.10); }
                     30% { box-shadow:0 0 0 4px rgba(200,16,46,0.30), 0 18px 50px rgba(26,25,24,0.10); } }
@media (max-width:900px) {
  .fx-filters { gap:18px 24px; padding:18px 0 4px; }
  .fx-fgroup { min-width:0; flex:1 1 100%; }
  .fx-grid { grid-template-columns:1fr; }
  .fx-pill { min-height:44px; font-size:15px; }
  .fx-card { padding:20px 18px 16px; }
}

/* ============================================================
   REVISION 10.5
   ============================================================ */

/* ── 10.5 §1 + §4. COMMUNITY HERO PHOTOS — SHOW THE WHOLE HOUSE ──
   Central Park Windsor (1920x1080) and Golfwood Lakes (1600x1068) were both
   displayed with object-fit:cover inside a container whose shape did not match
   the photo, so the render was sliced — on Central Park the garage and roofline
   were cut off, on Golfwood the house was cropped on every side.
   Same fix already proven on the home page in Rev 10.1: display the photo with
   object-fit:contain so nothing is lost, and fill the letterbox with a blurred,
   scaled copy of the same photo so it still reads as one full-bleed image.
   Applies on desktop AND mobile — both were cropping. */
.hero-placeholder-windsor,
.golfwood-hero-photo {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.hero-placeholder-windsor::before,
.golfwood-hero-photo::before {
  content: "";
  position: absolute;
  inset: -6%;
  background-image: inherit;         /* URL set inline on the container */
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(1.06) brightness(0.94);
  transform: scale(1.06);
  z-index: 0;
}
.hero-placeholder-windsor > img,
.golfwood-hero-photo > img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  z-index: 1;
}

/* Central Park: the column is free to take the photo's own 16:9 shape, so on
   desktop there is effectively no letterbox at all. Centring the block in its
   grid column keeps the spacing even instead of leaving one band underneath. */
.hero-placeholder-windsor {
  aspect-ratio: 16 / 9;
  min-height: 0 !important;
  height: auto !important;
}
.comm-hero-image:has(.hero-placeholder-windsor) { align-self: center; }

/* The status card sits ON the photo, at the bottom, out of the way of the
   house. It was previously forced into the middle of the image by an inline
   position:relative on the element, which beat the stylesheet's absolute
   bottom-left placement. */
.hero-placeholder-windsor .hero-image-overlay,
.golfwood-hero-photo .golfwood-hero-photo-overlay {
  position: absolute !important;
  z-index: 2 !important;
  top: auto !important;
  bottom: 18px !important;
  left: 18px !important;
  right: auto !important;
  max-width: min(320px, calc(100% - 36px)) !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  background: rgba(255, 255, 255, 0.94);
  box-sizing: border-box;
}
.hero-placeholder-windsor .hero-image-overlay .project { font-size: 16px; }
.hero-placeholder-windsor .hero-image-overlay .price { font-size: 11px; line-height: 1.5; }

@media (max-width: 900px) {
  .hero-placeholder-windsor .hero-image-overlay,
  .golfwood-hero-photo .golfwood-hero-photo-overlay {
    bottom: 12px !important;
    left: 12px !important;
    max-width: calc(100% - 24px) !important;
    padding: 8px 12px !important;
  }
  .golfwood-hero-photo { min-height: 0 !important; aspect-ratio: 3 / 2; }
}