/* ==========================================================================
   ACADEMY RIDGE — WEBSITE v2.4  ·  "Adapts to You"

   The product's whole argument is adaptability: lock-off rooms that become a
   gym or a rental, three plans, "a home that adapts to you." So the site is
   built to demonstrate that rather than assert it — a small set of section
   archetypes that rotate, rather than one rhythm repeated down the page.

   What is deliberately different from v2.3:

   1. GOLD IS A FIELD, NOT A TRIM. v2.3 used the brand gold only for hairlines
      and buttons. Here full-bleed gold panels carry ink type. It is the single
      most recognisably Academy Ridge move available, it is what the live site
      does, and no previous version used it.
   2. THREE GROUNDS IN ROTATION — paper, ink, gold. Variety comes from the
      system rather than from decoration, which is what made v2.0 feel messy.
   3. NUMBERS ARE A DISPLAY ELEMENT. Square footages, drive times and warranty
      years are set at display scale. On a sales page the figures are the pitch.
   4. SECTION NUMBERING as quiet wayfinding down the left edge.
   5. HEAVIER DISPLAY TYPE (800 vs 600) against very small wide-tracked labels,
      for contrast rather than uniform mid-weight everywhere.
   6. IMAGES BREAK THE GRID — full-bleed and offset, not all boxed in cards.

   Fonts: Montserrat (display, matches the logo) + Inter (body)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand gold. Sampled from the logo gradient (#AD7D0C -> #F9B01B -> #FFC829).
     `field` is the flood colour; `deep` is the only one safe for small text
     on paper; `bright` is for marks on ink. */
  --gold-deep:   #8A6207;
  --gold:        #AD7D0C;
  --gold-field:  #F5AE1C;
  --gold-bright: #FFC829;
  --gold-pale:   #FBF1DA;

  /* Neutrals — warmer and creamier than v2.3, closer to paper stock */
  --ink:        #16160E;
  --ink-2:      #22221A;
  --ink-70:     #4A4A40;
  --ink-45:     #83837A;
  --ink-25:     #B4B4AA;
  --line:       #E0DCD1;
  --line-soft:  #EDEAE1;
  --paper:      #F8F6F1;
  --paper-2:    #F0ECE3;
  --white:      #FFFFFF;

  --display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --container: 1280px;
  --measure: 660px;
  --gutter: 34px;
  --pad: 92px;
  --header-h: 78px;
  --header-stuck-h: 64px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --radius: 0px;
}
@media (max-width: 900px) { :root { --pad: 58px; --gutter: 20px; --header-h: 62px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.6;
  color: var(--ink-70); background: var(--paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
/* Neutralises the width/height presentational hints so the aspect-ratio rules
   below actually apply. Without it every ratio slot renders at intrinsic size. */
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
figure, figcaption { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--display); color: var(--ink); font-weight: 800;
  line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 0.4em;
  text-wrap: balance;
}
/* Phone floor of 2.25rem (was 2.6rem) so hero headlines break into whole phrases rather than
   leaving single words such as "That" or "From" on their own line. */
h1 { font-size: clamp(2.25rem, 6.2vw, 5rem); }
h2 { font-size: clamp(2rem, 3.9vw, 3.35rem); }
h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.14; letter-spacing: -0.028em; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
p { margin: 0 0 0.85em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 600; }

.lede { font-size: clamp(1.05rem, 1.35vw, 1.24rem); line-height: 1.45; color: var(--ink); }
.small { font-size: 0.87rem; line-height: 1.6; }
.muted { color: var(--ink-45); }
.fine { font-size: 0.74rem; line-height: 1.65; color: var(--ink-45); }

/* Label — the smallest type on the site, always wide-tracked */
.label {
  display: block; font-family: var(--body); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 18px; text-wrap: balance;
}
.label.on-ink { color: var(--gold-bright); background: none; }
.label.on-gold { color: var(--ink); opacity: 0.62; background: none; }
.label.plain { color: var(--ink-45); }

/* ---------- Grounds ---------- */
/* overflow guards the bleed images below: they extend past the container and
   are clipped at the section edge, which is the viewport edge. */
.band { position: relative; padding: var(--pad) 0; overflow: hidden; }
.band-sm { padding: calc(var(--pad) * 0.6) 0; }
.on-paper { background: var(--paper); }
.on-paper-2 { background: var(--paper-2); }
.on-white { background: var(--white); }

.on-ink { background: var(--ink); color: rgba(255,255,255,0.7); }
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4 { color: var(--white); }
.on-ink p, .on-ink li { color: rgba(255,255,255,0.7); }
.on-ink strong { color: var(--white); }
.on-ink .lede { color: rgba(255,255,255,0.86); }
.on-ink .muted, .on-ink .fine { color: rgba(255,255,255,0.48); }

/* Gold as a field. Ink type on gold, never white — white on this yellow
   fails contrast badly. */
.on-gold { background: var(--gold-field); color: var(--ink); }
.on-gold h1, .on-gold h2, .on-gold h3, .on-gold h4 { color: var(--ink); }
.on-gold p, .on-gold li, .on-gold .lede { color: var(--ink); }
.on-gold .muted, .on-gold .fine { color: rgba(22,22,14,0.62); }

.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
/* Single sections that need extra width (Now Selling buying steps) */
.wide-section .wrap { max-width: 1480px; }
.measure { max-width: var(--measure); }
.measure.mid { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 30px; font-family: var(--body); font-size: 0.73rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
  border: 1.5px solid transparent; background: none; cursor: pointer;
  border-radius: var(--radius); white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn-gold { background: var(--gold-field); color: var(--ink); border-color: var(--gold-field); }
.btn-gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.btn-ink { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-ink:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-line { border-color: rgba(22,22,14,0.18); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.btn-line-light { border-color: rgba(255,255,255,0.4); color: var(--white); }
.btn-line-light:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-line-ink { border-color: rgba(22,22,14,0.32); color: var(--ink); }
.btn-line-ink:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-sm { padding: 12px 22px; font-size: 0.67rem; }
.btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.btns.mid { justify-content: center; }


/* Arrow link */
.alink {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.73rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep); padding-bottom: 6px;
  border-bottom: 1.5px solid currentColor;
  transition: color 0.25s var(--ease);
}
.alink::after { content: '\2192'; font-size: 1rem; letter-spacing: 0;
  transition: transform 0.25s var(--ease); }
.alink:hover { color: var(--ink); }
.alink:hover::after { transform: translateX(5px); }
.alink.on-ink { color: var(--gold-bright); background: none; }
.alink.on-ink:hover { color: var(--white); }
.alink.on-gold { color: var(--ink); }
.alink.on-gold:hover { color: var(--white); }


/* ---------- Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 900; height: var(--header-h);
  display: flex; align-items: center;
  transition: background 0.3s var(--ease), height 0.3s var(--ease), box-shadow 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr .row { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: block; line-height: 0; }
.brand img { height: 30px; width: auto; transition: height 0.4s var(--ease); }
.brand .on-dark-logo { display: block; }
.brand .on-light-logo { display: none; }
.hdr.stuck {
  background: rgba(248,246,241,0.95); backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line); height: var(--header-stuck-h);
}
/* Every page: bigger logo at the top of the page, shrinks smoothly into the standard header
   size once the page scrolls and the header "sticks". Same on all pages so the menu never shifts
   position when moving between pages. */
.hdr:not(.stuck):not(.solid) { height: clamp(78px, 9vw, 100px); }
.hdr:not(.stuck):not(.solid) .brand img { height: clamp(34px, 4.2vw, 44px); }
.hdr.stuck .on-dark-logo { display: none; }
.hdr.stuck .on-light-logo { display: block; }
.hdr.stuck .menu > li > a { color: var(--ink-70); }
.hdr.stuck .menu > li > a:hover, .hdr.stuck .menu > li > a.here { color: var(--ink); }
.hdr.stuck .burger span { background: var(--ink); }
.hdr.stuck .hdr-cta { background: var(--gold-field); border-color: var(--gold-field); color: var(--ink); }
.hdr.stuck .hdr-cta:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.hdr.solid { background: var(--paper); border-bottom-color: var(--line); }

.menu { display: none; align-items: center; gap: 30px; }
@media (min-width: 1060px) { .menu { display: flex; } }
.menu > li { position: relative; }
.menu > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.71rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.88); padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.menu > li > a:hover, .menu > li > a.here { color: var(--white); border-bottom-color: var(--gold-field); }
.hdr.stuck .menu > li > a.here { border-bottom-color: var(--gold-field); }
.caret {
  width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; opacity: 0.5; transition: transform 0.22s var(--ease);
}
.menu > li:hover .caret, .menu > li:focus-within .caret { transform: rotate(180deg); opacity: 1; }

.sub {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  min-width: 216px; padding: 7px 0; background: var(--white);
  border-top: 2.5px solid var(--gold-field); box-shadow: 0 20px 44px rgba(22,22,14,0.15);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 20;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
/* hover bridge so the pointer can cross the gap */
.menu > li::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.menu > li:hover .sub, .menu > li:focus-within .sub {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.sub a {
  display: block; padding: 9px 22px; white-space: nowrap;
  font-size: 0.71rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-70); transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.sub a:hover, .sub a:focus-visible { background: var(--gold-pale); color: var(--ink); }

.hdr-cta {
  display: inline-block; padding: 12px 24px; background: var(--gold-field); border: 1.5px solid var(--gold-field); color: var(--ink);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
  transition: all 0.25s var(--ease); border-radius: var(--radius);
}
.hdr-cta:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.hdr-cta { display: inline-block; }
@media (max-width: 1059px) { .hdr-cta { padding: 10px 16px; font-size: 0.62rem; letter-spacing: 0.12em; } }
@media (max-width: 400px) { .hdr-cta { padding: 9px 12px; letter-spacing: 0.08em; } }
/* Small phones (360px Android): the larger home page logo plus Register and the burger were
   13px wider than the screen. Tighten the gaps and cap the logo so the row fits. */
@media (max-width: 400px) { .hdr .row { gap: 12px; } .hdr:not(.stuck):not(.solid) .brand img { height: 30px; } }

/* Registration form: honeypot field (hidden from people, visible to bots) and the
   thank you / error notes shown after the handler redirects back. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formnote { padding: 16px 20px; margin: 0 0 26px; font-size: 0.9rem; line-height: 1.6;
  border-left: 3px solid var(--gold-field); background: var(--gold-pale); color: var(--ink); }
.formnote strong { font-weight: 700; }
.formnote a { color: var(--gold-deep); text-decoration: underline; }
.formnote-err { border-left-color: #A33; background: #FBECEC; }

/* Social icons: inline SVGs that take their colour from the surrounding context, so the
   same markup works on the transparent header, the stuck header and the dark footer. */
.social { display: flex; align-items: center; gap: 14px; }
.social a { display: inline-flex; line-height: 0; }
.social svg { width: 19px; height: 19px; fill: currentColor;
  transition: fill 0.25s var(--ease), opacity 0.25s var(--ease); }
.social-hdr { display: flex; color: var(--white); }
/* Below the desktop breakpoint the nav collapses, so the icons, the Register button
   and the burger pack to the right of the logo. */
@media (max-width: 1059px) { .social-hdr { margin-left: auto; gap: 12px; } .social-hdr svg { width: 17px; height: 17px; } }
@media (max-width: 460px) { .social-hdr { display: none; } }
.social-hdr a:hover svg { fill: var(--gold-field); }
.hdr.stuck .social-hdr { color: var(--ink-70); }
.hdr.stuck .social-hdr a:hover svg { fill: var(--gold-deep); }
.social-ftr { margin-top: 20px; color: rgba(255,255,255,0.72); }
.social-ftr svg { width: 21px; height: 21px; }
.social-ftr a:hover svg { fill: var(--gold-bright); }

.burger { display: flex; flex-direction: column; gap: 5px; width: 34px; height: 34px;
  align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 0; }
@media (min-width: 1060px) { .burger { display: none; } }
.burger span { display: block; width: 24px; height: 1.5px; background: var(--white); transition: background 0.25s var(--ease); }

/* Drawer */
.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 1000; width: min(370px, 86vw);
  background: var(--ink); box-shadow: -18px 0 50px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
  padding: 78px 30px 40px; transform: translateX(100%);
  transition: transform 0.4s var(--ease); overflow-y: auto;
}
.drawer.open { transform: none; }
/* Scrim: dims the page behind the panel and closes the menu when clicked. */
.drawer-scrim { position: fixed; inset: 0; z-index: 999; background: rgba(10,10,6,0.55);
  opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s; }
.drawer-scrim.open { opacity: 1; visibility: visible; }
.drawer > a, .drawer-group > a:first-child {
  display: block; font-family: var(--display); font-weight: 800; font-size: 1.32rem;
  color: var(--white); padding: 10px 0; letter-spacing: -0.03em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.drawer a:hover { color: var(--gold-bright); }
.drawer-group > a:first-child { border-bottom: 0; padding-bottom: 2px; }
.drawer-sub {
  display: block; font-family: var(--body); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55);
  padding: 6px 0 6px 16px; position: relative;
}
.drawer-sub::before { content: ''; position: absolute; left: 0; top: 50%; width: 7px; height: 1.5px; background: var(--gold-field); }
.drawer-group { margin-bottom: 12px; }
.drawer-logo { height: 28px; width: auto; max-width: 200px; object-fit: contain;
  align-self: flex-start; flex: none; margin-bottom: 26px; }
.drawer-x { position: absolute; top: 16px; right: 22px; background: none; border: 0;
  color: var(--white); font-size: 2.2rem; line-height: 1; cursor: pointer; }

/* ==========================================================================
   ARCHETYPE 1 — HERO
   Kept from v2.3 at Christian's request: full-bleed photograph, two-tone
   headline with the second line in gold.
   ========================================================================== */
/* Hero height is set so the factbar below it lands inside the first screen. The factbar
   measures 101-111px across desktop widths, so 118px clears it with a little room.
   svh keeps this honest on mobile, where 100vh is taller than the visible area. */
.hero { position: relative; min-height: calc(100vh - 118px); min-height: calc(100svh - 118px);
  display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + 60px) 0 84px; overflow: hidden; background: var(--ink); }
/* On short screens (most 768-820px laptops) the hero's own padding, not the min-height,
   is what pushes the factbar below the fold. Tighten the padding there. */
@media (max-height: 850px) {
  .hero, .phero { padding: calc(var(--header-h) + 26px) 0 50px; }
}
@media (max-height: 760px) {
  .hero, .phero { padding: calc(var(--header-h) + 16px) 0 38px; }
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100% !important; object-fit: cover; }
.hero-bg video { width: 100%; height: 100% !important; object-fit: cover; display: block;
  transition: opacity 0.8s ease; }
.hero-bg video.loop-fade { opacity: 0; }
.hero-bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,6,0.58) 0%, rgba(10,10,6,0.2) 30%, rgba(10,10,6,0.44) 62%, rgba(10,10,6,0.9) 100%); }
.hero-in { position: relative; z-index: 2; max-width: 780px; color: rgba(255,255,255,0.86); }
.hero-in h1 { color: var(--white); margin-bottom: 0.3em; }
.hero-in h1 .gold { color: var(--gold-field); display: block; }
.hero-in .lede { color: rgba(255,255,255,0.86); }
.hero-eyebrow {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--white); margin-bottom: 22px;
}

/* Inner page hero */
/* Interior page heroes match the homepage height exactly, so every page opens the same. */
.phero { position: relative; min-height: calc(100vh - 118px); min-height: calc(100svh - 118px);
  display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + 60px) 0 60px; overflow: hidden; background: var(--ink); }
.phero .hero-bg::after {
  background: linear-gradient(180deg, rgba(10,10,6,0.6) 0%, rgba(10,10,6,0.3) 36%, rgba(10,10,6,0.86) 100%); }
.phero-in { position: relative; z-index: 2; max-width: 760px; color: rgba(255,255,255,0.84); }
.phero-in h1 { color: var(--white); }
.phero-in h1 .gold { color: var(--gold-field); display: block; }
.phero-in .lede { color: rgba(255,255,255,0.84); margin-bottom: 0; }
/* Hero content sits closer to the bottom edge on every page (was 84px home, 60px inner pages),
   so the headline and button read as anchored to the fact bar or the section below. */
.hero { padding-bottom: 52px; }
.phero { padding-bottom: 44px; }
@media (max-width: 900px) { .hero { padding-bottom: 40px; } .phero { padding-bottom: 36px; } }
@media (max-height: 850px) { .hero, .phero { padding-bottom: 36px; } }
@media (max-height: 760px) { .hero, .phero { padding-bottom: 30px; } }
/* Hero lede kept to a single line on wide screens (wraps normally below 1200px) */
@media (min-width: 1200px) { .phero-in:has(.lede-oneline) { max-width: none; } .phero-in .lede-oneline { white-space: nowrap; } }
.crumb { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-bottom: 18px; }
.crumb a { color: rgba(255,255,255,0.8); }
.crumb a:hover { color: var(--gold-bright); }

/* ==========================================================================
   ARCHETYPE 2 — FACT BAR
   A dark strip of the numbers a buyer scans for. Sits under the hero.
   ========================================================================== */
.factbar { background: var(--ink); }
.factbar-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 860px) { .factbar-in { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { padding: 26px 20px; text-align: center; border-right: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12); }
.fact:nth-child(2n) { border-right: 0; }
@media (min-width: 860px) {
  .fact { border-bottom: 0; border-right: 1px solid rgba(255,255,255,0.12); }
  .fact:nth-child(2n) { border-right: 1px solid rgba(255,255,255,0.12); }
  .fact:last-child { border-right: 0; }
}
.fact-n { display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 2.3vw, 2.1rem); letter-spacing: -0.04em; line-height: 1;
  color: var(--gold-field); white-space: nowrap; }
.fact-l { display: block; font-size: 0.63rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 9px; }
/* minmax(0, 1fr) and min-width: 0 stop a no-wrap figure such as $599,900 from pushing the grid
   past the screen on 360px phones. The figures also step down a size there. */
.fact { min-width: 0; }
@media (max-width: 400px) { .fact { padding: 22px 10px; } .fact-n { font-size: 1.3rem; } }
/* When a label runs to two lines on a phone ("Show Home, 12–3pm"), the figures in that row
   still line up: each cell pins its label and figure to the bottom. */
.fact { display: flex; flex-direction: column; justify-content: flex-end; }
/* Phones: tighter side padding and tracking so every label, including "Show Home, 12–3pm",
   stays on one line and the four figures sit level. */
@media (max-width: 559px) { .fact { padding-left: 6px; padding-right: 6px; } .fact-l { letter-spacing: 0.08em; } }
@media (min-width: 360px) and (max-width: 559px) { .fact-l { white-space: nowrap; } }
@media (max-width: 400px) { .fact-l { font-size: 0.6rem; } }
/* Below 360px (rare, older small phones) the longest labels may wrap; the figures stay level. */
/* Highlight variant: short phrases rather than figures, with a line of detail beneath */
.factbar.hl .fact-n { font-size: clamp(1.05rem, 1.5vw, 1.32rem); letter-spacing: -0.02em; white-space: normal; line-height: 1.15; }
.factbar.hl .fact-s { display: block; margin-top: 8px; font-size: 0.8rem; line-height: 1.45; color: rgba(255,255,255,0.62); }
@media (min-width: 860px) { .factbar.three .factbar-in { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 859px) { .factbar.three .factbar-in { grid-template-columns: 1fr; } .factbar.three .fact { border-right: 0; } .factbar.three .fact:last-child { border-bottom: 0; } }
@media (min-width: 860px) { .factbar.three .fact:nth-child(2n) { border-right: 1px solid rgba(255,255,255,0.12); } .factbar.three .fact:last-child { border-right: 0; } }

/* ==========================================================================
   ARCHETYPE 3 — STATEMENT
   One idea, large, with nothing competing. Used sparingly.
   ========================================================================== */
.statement { text-align: center; }
.statement h2 { font-size: clamp(2.1rem, 4.6vw, 4rem); margin-bottom: 0.35em; }
.statement .lede { max-width: 640px; margin: 0 auto; }

/* ==========================================================================
   ARCHETYPE 4 — SPLIT
   Text against a photograph. The `bleed` variant runs the image off the edge
   of the viewport, which is what stops the page feeling boxed in.
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; gap: 58px; }
  .split.flip .split-img { order: 2; }
  .split.wide-img { grid-template-columns: 1.18fr 1fr; }
  /* Wider text column for sections whose bullets should sit on one line each */
  .split.wide-body { grid-template-columns: 0.8fr 1.2fr; }
  .split.wide-body .split-body { max-width: 760px; }
}
.split-img img { width: 100%; object-fit: cover; border-radius: var(--radius); }
.split-img.r43 img { aspect-ratio: 4 / 3; }
.split-img.r11 img { aspect-ratio: 1 / 1; }
.split-img.r45 img { aspect-ratio: 4 / 5; }
.split-img.free img { aspect-ratio: auto; }
.split-body { max-width: 520px; }
/* Headings kept to a single line, scaling with the viewport so they never wrap */
.h2-oneline { white-space: nowrap; font-size: clamp(1.4rem, 3.3vw, 3.35rem); }
.split.flip .split-body { margin-left: auto; }

/* Bleed: image runs past the container toward the viewport edge. The negative
   margin is deliberately generous and the parent .band clips it, which avoids
   the classic 100vw-versus-scrollbar overflow bug. */
@media (min-width: 1060px) {
  .split.bleed-r { grid-template-columns: 1fr 1.12fr; }
  .split.bleed-r .split-img { margin-right: -14vw; }
  .split.bleed-l { grid-template-columns: 1.12fr 1fr; }
  .split.bleed-l .split-img { order: -1; margin-left: -14vw; }
}

/* ==========================================================================
   ARCHETYPE 5 — BIG NUMBER
   Figures at display scale. On a sales page the numbers are the argument, so
   they get treated as headlines rather than buried in body copy.
   ========================================================================== */
.bignums { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 760px) { .bignums { grid-template-columns: repeat(3, 1fr); } }
.bignum { padding: 34px 26px; text-align: center; border-top: 1px solid var(--line); }
@media (min-width: 760px) {
  .bignum { border-top: 0; border-right: 1px solid var(--line); }
  .bignum:last-child { border-right: 0; }
}
.on-ink .bignum { border-color: rgba(255,255,255,0.14); }
.on-gold .bignum { border-color: rgba(22,22,14,0.18); }
.bignum-n { display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(3rem, 6vw, 4.6rem); line-height: 0.92; letter-spacing: -0.05em;
  color: var(--gold-deep); margin-bottom: 14px; }
.on-ink .bignum-n { color: var(--gold-field); }
.on-gold .bignum-n { color: var(--ink); }
.bignum-l { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-45); line-height: 1.5; }
.on-ink .bignum-l { color: rgba(255,255,255,0.6); }
.on-gold .bignum-l { color: rgba(22,22,14,0.6); }
.bignum p { font-size: 0.9rem; margin-top: 10px; }

/* Chips — small pill list, e.g. "also nearby" facts */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  list-style: none; padding: 0; margin: 34px 0 0; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 9px 16px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 0.72rem; color: var(--ink-45); }
.chips .t { font-family: var(--display); font-weight: 800; font-size: 0.8rem; color: var(--gold-deep); }
.on-ink .chips li { border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.62); }
.on-ink .chips .t { color: var(--gold-field); }
.on-gold .chips li { border-color: rgba(22,22,14,0.18); color: rgba(22,22,14,0.62); }
.on-gold .chips .t { color: var(--ink); }

/* ==========================================================================
   ARCHETYPE 6 — SWITCHER
   The interactive centrepiece. One lock-off room, ten furnishings. Clicking a
   use swaps the photography and the copy, which demonstrates the adaptability
   claim instead of asserting it.
   ========================================================================== */
.switcher { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 960px) { .switcher { grid-template-columns: 260px 1fr; gap: 44px; align-items: start; } }
.switch-list { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 960px) { .switch-list { flex-direction: column; flex-wrap: nowrap; gap: 0; } }
.switch-btn {
  background: none; border: 0; cursor: pointer; text-align: left; width: auto;
  font-family: var(--body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-45);
  padding: 11px 16px; border: 1px solid var(--line); transition: all 0.2s var(--ease);
}
@media (min-width: 960px) {
  .switch-btn { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 14px 0; }
  .switch-btn:first-child { border-top: 1px solid var(--line); }
}
.switch-btn:hover { color: var(--ink); }
.switch-btn.on { color: var(--ink); border-color: var(--ink); }
@media (min-width: 960px) {
  .switch-btn.on { color: var(--gold-deep); border-bottom-color: var(--gold-field); }
  .switch-btn.on::before { content: '\2192'; margin-right: 9px; }
}
.on-ink .switch-btn { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.16); }
.on-ink .switch-btn:hover { color: var(--white); }
.on-ink .switch-btn.on { color: var(--gold-bright); border-color: var(--gold-field); }

.switch-panel { display: none; }
.switch-panel.on { display: block; animation: fade 0.4s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.switch-shots { display: grid; grid-template-columns: 1fr; gap: 3px; }
@media (min-width: 620px) { .switch-shots { grid-template-columns: 1fr 1fr; } }
.switch-shots img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.switch-copy { margin-top: 20px; max-width: 620px; }
.switch-copy h3 { margin-bottom: 8px; }

/* ==========================================================================
   ARCHETYPE 7 — TILE RUN
   Photographs in a rhythm, no frames. Alternate tiles drop for movement.
   ========================================================================== */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 900px) { .tiles.t3 { grid-template-columns: repeat(3, 1fr); } .tiles.t4 { grid-template-columns: repeat(4, 1fr); } }
.tiles img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.tiles.stagger > :nth-child(even) { margin-top: 38px; }
@media (max-width: 620px) { .tiles.stagger > :nth-child(even) { margin-top: 20px; } }

/* ---------- Cards (frameless) ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 700px) { .cards.c2 { grid-template-columns: repeat(2, 1fr); } .cards.c3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards.c3 { grid-template-columns: repeat(3, 1fr); } .cards.c4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) and (max-width: 999px) { .cards.c4 { grid-template-columns: repeat(2, 1fr); } }
.card { display: flex; flex-direction: column; }
.card-img { overflow: hidden; border-radius: var(--radius); display: block; }
.card-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.9s var(--ease); }
.card:hover .card-img img { transform: scale(1.04); }
.card-txt { padding-top: 18px; flex: 1; display: flex; flex-direction: column; }
.card-txt h3 { margin-bottom: 12px; }
.card-tag { display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-deep); margin: 0 0 12px; }
.card-txt p { font-size: 0.93rem; }

/* Plan tagline: the same line the homepage plan cards carry (.card-tag), sized up to sit
   under a section h2 instead of a card h3. Pulled tight to the heading it belongs to. */
.plan-tag { display: block; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-deep); margin: -0.15em 0 24px; }
/* Price sits on the tagline rather than under it: same face and tracking, darker so the
   figure still reads as information, with a middot holding the two apart. */
.plan-tag .price { color: var(--ink-70); }
.plan-tag .price::before { content: '\00B7'; color: var(--ink-25); margin: 0 0.7em; }
.card-end { margin-top: auto; padding-top: 16px; }
.card-img.blank { aspect-ratio: 4 / 3; background: var(--paper-2);
  display: flex; align-items: center; justify-content: center; }
.card-img.blank span { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-25); }

/* Tile variant — a bordered box rather than an image with text beneath it.
   Reserved for the floor plan cards (Alpha/Beta/Delta), where a clearer
   product-comparison feel earns back the frame the rest of the site dropped. */
.card.tile { background: var(--white); border: 1px solid var(--line); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.card.tile:hover { border-color: var(--ink-25); box-shadow: 0 14px 34px rgba(22,22,14,0.08); }
.card.tile .card-txt { padding: 22px 26px 26px; }
.card.tile .card-end { padding-bottom: 0; }
.on-ink .card.tile, .on-paper-2 .card.tile { background: var(--white); }

/* ---------- Spec rows ---------- */
.specs { border-top: 2px solid var(--gold-field); }
.specs li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 0.9rem; }
.specs li:last-child { border-bottom: 0; }
.specs .k { color: var(--ink-45); }
.specs .v { color: var(--ink); font-weight: 600; text-align: right; }
/* On the darker paper-2 band the soft rule is nearly the same value as the background,
   so the spec list reads as unruled. Step it up one token to keep the same visible weight. */
.on-paper-2 .specs li { border-bottom-color: var(--line); }
.on-ink .specs { border-top-color: var(--gold-field); }
.on-ink .specs li { border-bottom-color: rgba(255,255,255,0.1); }
.on-ink .specs .k { color: rgba(255,255,255,0.5); }
.on-ink .specs .v { color: var(--white); }
.specs-title { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-deep); padding: 16px 0 12px; border-bottom: 1px solid var(--line-soft); }
.on-ink .specs-title { color: var(--gold-bright); border-bottom-color: rgba(255,255,255,0.1); }

/* ---------- Ticked list ---------- */
.ticks li { position: relative; padding: 0 0 12px 22px; font-size: 0.93rem; line-height: 1.55; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 10px; width: 10px; height: 2px; background: var(--gold-field); }
.ticks.two { column-count: 1; }
@media (min-width: 760px) { .ticks.two { column-count: 2; column-gap: 44px; } }
.ticks.two li { break-inside: avoid; }

/* ---------- Steps ---------- */
.steps { counter-reset: st; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 46px 1fr; gap: 18px;
  padding: 20px 0; border-bottom: 1px solid var(--line); }
.steps li:first-child { border-top: 1px solid var(--line); }
.steps li::before { content: counter(st, decimal-leading-zero);
  font-family: var(--display); font-weight: 800; font-size: 0.92rem; color: var(--gold-deep); }
.on-ink .steps li { border-color: rgba(255,255,255,0.14); }
.on-ink .steps li::before { color: var(--gold-bright); }
.steps h4 { margin-bottom: 4px; }
.steps p { font-size: 0.92rem; margin: 0; }

/* ---------- Table ---------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line-soft); border-radius: 14px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 560px; }
table.tbl th, table.tbl td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
table.tbl th { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-45); border-bottom: 2px solid var(--gold-field); background: var(--paper-2); }
table.tbl td.n, table.tbl th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tbl th .unit { display: block; font-size: 0.58rem; font-weight: 500; letter-spacing: 0.08em; text-transform: none; color: var(--ink-45); margin-top: 3px; }
table.tbl tbody tr:hover td { background: var(--gold-pale); }
table.tbl tr.grp td { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep); background: var(--paper-2); }
table.tbl tbody tr.grp:hover td { background: var(--paper-2); }
table.tbl-compare th, table.tbl-compare td { text-align: center; }
table.tbl-compare tbody td:first-child { font-size: 1rem; }
table.tbl-compare tbody tr:last-child td { border-bottom: 0; }

/* Comparison table rows jump to their plan section. The plan name is a real link so the
   row is reachable by keyboard; the whole-row click below is a mouse convenience on top. */
.tbl tbody tr.row-link { cursor: pointer; }
.tbl tbody tr.row-link td:first-child a { color: inherit; border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s var(--ease); }
.tbl tbody tr.row-link:hover td:first-child a,
.tbl tbody tr.row-link td:first-child a:focus-visible { border-bottom-color: var(--gold); }
.status-pill { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--gold-pale);
  color: var(--gold-deep); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Comparison tables on narrow screens: each plan row becomes its own card, with the column
   heading repeated beside every value (from data-label), so nothing needs a sideways scroll.
   .tbl-stack switches below 640px; .tbl-stack-md (the nine column Townhomes table) switches
   below 1000px and sets the three plans side by side on tablets. */
@media (max-width: 639px) {
  .tablewrap:has(.tbl-stack) { overflow: visible; border: 0; border-radius: 0; }
  table.tbl-stack { min-width: 0; }
}
/* The four column Now Selling table fits its half-width column on laptops without a forced width. */
table.tbl-stack:not(.tbl-stack-md) { min-width: 0; }
table.tbl-compare tbody td:first-child { white-space: nowrap; }
@media (max-width: 999px) {
  .tablewrap:has(.tbl-stack-md) { overflow: visible; border: 0; border-radius: 0; }
  table.tbl-stack-md { min-width: 0; }
}
@media (max-width: 639px) {
  table.tbl-stack, table.tbl-stack tbody, table.tbl-stack tr, table.tbl-stack td { display: block; }
  table.tbl-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  table.tbl-stack tbody { display: grid; gap: 14px; }
  table.tbl-stack tr { background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--gold-field); }
  table.tbl-stack td { display: flex; justify-content: space-between; align-items: center; gap: 16px;
    text-align: right !important; padding: 11px 18px; border-bottom: 1px solid var(--line-soft); font-size: 0.9rem; color: var(--ink); }
  table.tbl-stack td::before { content: attr(data-label); color: var(--ink-45); text-align: left; font-size: 0.86rem; }
  table.tbl-stack td:first-child { display: block; text-align: left !important; padding: 16px 18px 12px;
    font-family: var(--display); font-weight: 800; font-size: 1.12rem !important; letter-spacing: -0.02em; }
  table.tbl-stack td:first-child::before { content: none; }
  table.tbl-stack tbody tr:last-child td { border-bottom: 1px solid var(--line-soft); }
  table.tbl-stack td:last-child, table.tbl-stack tbody tr:last-child td:last-child { border-bottom: 0; }
  table.tbl-stack tbody tr:hover td { background: none; }
}
@media (max-width: 999px) {
  table.tbl-stack-md, table.tbl-stack-md tbody, table.tbl-stack-md tr, table.tbl-stack-md td { display: block; }
  table.tbl-stack-md thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  table.tbl-stack-md tbody { display: grid; gap: 14px; }
  table.tbl-stack-md tr { background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--gold-field); }
  table.tbl-stack-md td { display: flex; justify-content: space-between; align-items: center; gap: 16px;
    text-align: right !important; padding: 11px 18px; border-bottom: 1px solid var(--line-soft); font-size: 0.9rem; color: var(--ink); }
  table.tbl-stack-md td::before { content: attr(data-label); color: var(--ink-45); text-align: left; font-size: 0.86rem; }
  table.tbl-stack-md td:first-child { display: block; text-align: left !important; padding: 16px 18px 12px;
    font-family: var(--display); font-weight: 800; font-size: 1.12rem !important; letter-spacing: -0.02em; }
  table.tbl-stack-md td:first-child::before { content: none; }
  table.tbl-stack-md tbody tr:last-child td { border-bottom: 1px solid var(--line-soft); }
  table.tbl-stack-md td:last-child, table.tbl-stack-md tbody tr:last-child td:last-child { border-bottom: 0; }
  table.tbl-stack-md tbody tr:hover td { background: none; }
}
@media (min-width: 640px) and (max-width: 999px) {
  table.tbl-stack-md tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  table.tbl-stack-md td { padding: 10px 14px; font-size: 0.84rem; }
  table.tbl-stack-md td::before { font-size: 0.8rem; }
  table.tbl-stack-md td:first-child { padding: 14px 14px 10px; }
}
/* The whole plan card lifts on hover like the plan tiles, since the row is a link. */
@media (max-width: 999px) {
  table.tbl-stack-md tr.row-link:hover, table.tbl-stack tr.row-link:hover { border-color: var(--ink-25); border-top-color: var(--gold-field); }
}


/* ---------- Tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 0 28px; border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 13px 0; cursor: pointer; font-size: 0.71rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-45); transition: all 0.22s var(--ease); }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--gold-field); }

/* ---------- Quote ---------- */
.quote blockquote { font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 2.1vw, 1.8rem);
  line-height: 1.28; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 20px; }
.on-gold .quote blockquote { color: var(--ink); }
.on-ink .quote blockquote { color: var(--white); }
.quote cite { font-style: normal; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-45); }
.on-gold .quote cite { color: rgba(22,22,14,0.6); }
.on-ink .quote cite { color: rgba(255,255,255,0.55); }

/* ---------- Gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.filt { background: none; border: 1px solid var(--line); cursor: pointer; padding: 10px 17px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-45); transition: all 0.22s var(--ease); }
.filt:hover { color: var(--ink); border-color: var(--ink-25); }
.filt.on { background: var(--ink); border-color: var(--ink); color: var(--white); }
/* Filter rows: a small label, then the buttons. Buttons with no matching photos are dimmed. */
.filters-plan { margin-bottom: 12px; }
/* Label in its own column so every wrapped row of buttons lines up under the first button */
.filters:has(.filt-btns), .filters.has-label { display: grid; grid-template-columns: 110px 1fr; gap: 9px 0; align-items: start; }
.filt-btns { display: flex; flex-wrap: wrap; gap: 9px; }
.filters .filt-label { padding-top: 11px; }
@media (max-width: 620px) { .filters:has(.filt-btns), .filters.has-label { grid-template-columns: 1fr; } .filters .filt-label { padding-top: 0; } }
/* Phones: tighter filter buttons so the photos start higher on the first screen. */
@media (max-width: 559px) {
  .filters { margin-bottom: 22px; } .filters-plan { margin-bottom: 10px; }
  .filters:has(.filt-btns), .filters.has-label { gap: 6px 0; }
  .filt-btns { gap: 6px; }
  .filt { padding: 8px 11px; font-size: 0.62rem; letter-spacing: 0.1em; }
}
.filt-label { align-self: start; min-width: 88px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-45); }
.filt:disabled { opacity: 0.32; cursor: default; }
.filt:disabled:hover { color: var(--ink-45); border-color: var(--line); }
.gempty { padding: 40px 0; color: var(--ink-45); }

/* Justified gallery: every photo keeps its own proportions and each row is filled edge to edge.
   --ar (width / height) is set on each tile; flex-grow in proportion to it keeps a row's heights equal.
   The ::after spacer soaks up the leftover space on the last row so it doesn't stretch. */
.ggrid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.ggrid::after { content: ''; flex-grow: 1000000; }
@media (min-width: 700px) { .ggrid { gap: 10px; } }
.gitem { position: relative; overflow: hidden; cursor: pointer; border: 0; padding: 0;
  background: var(--paper-2); display: block; border-radius: var(--radius);
  flex: var(--ar, 1) 1 calc(var(--ar, 1) * 150px); }
/* Phones: a smaller base size lets two landscape photos share a row instead of one per row. */
@media (max-width: 519px) { .gitem { flex-basis: calc(var(--ar, 1) * 100px); } .ggrid { gap: 6px; } }
@media (min-width: 700px) { .gitem { flex-basis: calc(var(--ar, 1) * 210px); } }
@media (min-width: 1100px) { .gitem { flex-basis: calc(var(--ar, 1) * 250px); } }
.gitem img { display: block; width: 100%; height: auto; object-fit: cover; transition: transform 0.8s var(--ease), opacity 0.3s var(--ease); }
.gitem:hover img { transform: scale(1.05); opacity: 0.92; }
.gitem[hidden] { display: none; }

/* Video item in the gallery grid — same tile, with a play button over the thumbnail */
.gitem-video { position: relative; }
.gitem-video .play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(22,22,14,0.55); border: 1.5px solid rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center; pointer-events: none; transition: all 0.25s var(--ease); }
.gitem-video .play::after { content: ''; width: 0; height: 0; margin-left: 3px;
  border-left: 14px solid var(--white); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.gitem-video:hover .play { background: var(--gold-field); border-color: var(--gold-field); }
.gitem-video:hover .play::after { border-left-color: var(--ink); }

/* ---------- Lightbox / modal ---------- */
.lb { position: fixed; inset: 0; z-index: 1200; background: rgba(10,10,6,0.96);
  display: none; align-items: center; justify-content: center; padding: 5vh 5vw; }
.lb.open { display: flex; }
.lb img { max-width: 100%; max-height: 90vh; width: auto; object-fit: contain; min-width: 0; min-height: 0; }
.lb-video { max-width: 100%; max-height: 90vh; width: auto; min-width: 0; min-height: 0; display: none; }
.lb-video.on { display: block; cursor: pointer; }
.lb-vwrap { position: relative; display: none; max-width: 100%; line-height: 0; }
.lb-vwrap.on { display: block; }
/* Slim scrub bar along the bottom edge of the video; grows slightly on hover so it's easy to grab. */
.lb-scrub { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; cursor: pointer; touch-action: none;
  display: flex; align-items: flex-end; }
.lb-scrub::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: rgba(255,255,255,0.28); transition: height 0.2s var(--ease); }
.lb-scrub-fill { position: relative; display: block; height: 4px; width: 0; background: var(--gold-field);
  transition: height 0.2s var(--ease); }
.lb-scrub:hover::before, .lb-scrub.drag::before, .lb-scrub:hover .lb-scrub-fill, .lb-scrub.drag .lb-scrub-fill { height: 7px; }
.lb-scrub:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.lb-b { position: absolute; background: none; border: 0; color: rgba(255,255,255,0.75);
  cursor: pointer; font-size: 2.2rem; line-height: 1; padding: 14px; transition: color 0.2s; }
.lb-b:hover { color: var(--white); }
.lb-x { top: 12px; right: 16px; font-size: 2.4rem; }
.lb-p { left: 6px; top: 50%; transform: translateY(-50%); }
.lb-n { right: 6px; top: 50%; transform: translateY(-50%); }
.lb-c { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font-size: 0.7rem; letter-spacing: 0.16em; color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; }

/* ---------- Carousel ---------- */
.car { position: relative; background: var(--ink); overflow: hidden; border-radius: var(--radius); }
.car-slide { display: none; position: relative; }
.car-slide.on { display: block; }
.car-slide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.car-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 22px 18px;
  color: rgba(255,255,255,0.92); font-size: 0.84rem;
  background: linear-gradient(180deg, rgba(10,10,6,0) 0%, rgba(10,10,6,0.8) 100%); }
.car-b { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px;
  border: 0; cursor: pointer; background: rgba(22,22,14,0.55); color: var(--white);
  font-size: 1.7rem; line-height: 1; z-index: 3; transition: background 0.22s var(--ease); }
.car-b:hover { background: var(--gold-field); color: var(--ink); }
.car-b.p { left: 0; } .car-b.n { right: 0; }
.car-dots { position: absolute; bottom: 15px; right: 18px; display: flex; gap: 7px; z-index: 3; }
.car-dot { width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer; border-radius: 50%;
  background: rgba(255,255,255,0.4); transition: all 0.22s var(--ease); }
.car-dot.on { background: var(--gold-field); transform: scale(1.25); }

/* ---------- Form ---------- */
.fgrid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 620px) { .fgrid { grid-template-columns: 1fr 1fr; } .fgrid .full { grid-column: 1 / -1; } }
.field label { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-45); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 0; font-family: var(--body); font-size: 0.97rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0;
  transition: border-color 0.22s var(--ease); appearance: none; }
.field select { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2383837A' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; padding-right: 24px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold-field); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-25); }
.consent { display: flex; gap: 12px; align-items: flex-start; }
.consent input { width: 16px; height: 16px; margin-top: 4px; flex: none; accent-color: var(--gold-deep); }
.consent label { font-size: 0.77rem; line-height: 1.55; letter-spacing: 0; text-transform: none;
  font-weight: 400; color: var(--ink-70); margin: 0; }

/* Register page: boxed gold fields and a dark contact card, for more colour than the base form */
.reg-form .field label { color: var(--ink); }
.reg-form .field input, .reg-form .field select, .reg-form .field textarea {
  padding: 14px 16px; background-color: var(--white); border: 1.5px solid var(--gold-field);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease); }
.reg-form .field select { padding-right: 40px; background-position: right 16px center; }
.reg-form .field input:focus, .reg-form .field select:focus, .reg-form .field textarea:focus {
  border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(245,174,28,0.28); }
.reg-form .consent { padding-top: 18px; border-top: 1px solid var(--line); }
.btn-block { display: flex; width: 100%; justify-content: center; }
.panel.panel-ink { background: var(--ink); color: rgba(255,255,255,0.78); }
.panel-ink .panel-k { color: var(--gold-bright); }
.panel-ink .panel-v { color: var(--white); }
.panel-ink .panel-v a:hover { color: var(--gold-bright); }
.panel.panel-ink .panel-row { border-bottom-color: rgba(255,255,255,0.14); }
.panel-ink .muted { color: rgba(255,255,255,0.6); }

.panel { background: var(--paper-2); padding: 32px 30px; border-radius: var(--radius); }
.panel-row { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.panel-row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.panel-k { display: block; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-45); margin-bottom: 7px; }
.panel-v { font-size: 1rem; color: var(--ink); line-height: 1.5; }
.panel-v a:hover { color: var(--gold-deep); }
/* Contact lines grouped under one panel label, each with a small inline label */
.panel-contact { display: flex; align-items: baseline; gap: 14px; margin-top: 8px; }
.panel-contact:first-of-type { margin-top: 12px; }
.panel-contact .ck { flex: 0 0 48px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-45); }

.notice { border-left: 3px solid var(--gold-field); background: var(--gold-pale); padding: 18px 24px;
  border-radius: 0 10px 10px 0; box-shadow: 0 1px 2px rgba(22,22,14,0.04); }
.notice-label { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 6px; }
.notice p { font-size: 0.85rem; margin: 0; color: var(--ink-70); line-height: 1.55; }
.map { width: 100%; height: 400px; border: 0; display: block; filter: grayscale(1) contrast(1.04);
  transition: filter 0.5s var(--ease); }
.map:hover { filter: none; }
/* My Maps embeds carry a title bar we cannot switch off, so the frame is pulled up behind
   the container's top edge and clipped. 56px is the bar's height. */
.nearby-map { border: 1px solid var(--line); margin-bottom: 34px; overflow: hidden; height: 520px; }
.nearby-map .map { height: calc(100% + 56px); margin-top: -56px; filter: none; }
@media (max-width: 700px) { .nearby-map { height: 380px; } }

/* Travel time tables */
table.tbl-times { min-width: 620px; }
table.tbl-times th, table.tbl-times td { padding: 15px 20px; }
table.tbl-times th:first-child, table.tbl-times td:first-child { padding-left: 26px; }
table.tbl-times th.n, table.tbl-times td.n { text-align: center; width: 110px; }
table.tbl-times th.n { color: var(--ink); }
table.tbl-times td:first-child { font-weight: 500; color: var(--ink); }
table.tbl-times td.n { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--ink); }
table.tbl-times td.n .muted { color: var(--ink-25); font-family: var(--body); font-weight: 400; }
table.tbl-times td.n .onsite { font-family: var(--body); font-weight: 500; font-size: 0.82rem; color: var(--gold-deep); }
table.tbl-times tr.grp td { padding: 22px 26px 10px; background: var(--white); border-bottom: 0; color: var(--gold-deep); }
table.tbl-times tbody tr.grp:hover td { background: var(--white); }
table.tbl-times tbody tr:last-child td { border-bottom: 0; }
table.tbl-times tbody td { border-bottom-color: var(--line-soft); }

/* Travel time tables on phones: keep the table, but drop the forced 620px width and tighten
   the columns so Destination, Drive, Bike and Walk all fit on screen without swiping. */
@media (max-width: 639px) {
  .tablewrap:has(.tbl-times) { overflow: visible; }
  table.tbl-times { min-width: 0; table-layout: fixed; }
  table.tbl-times th, table.tbl-times td { padding: 12px 6px; }
  table.tbl-times th:first-child, table.tbl-times td:first-child { padding-left: 14px; }
  table.tbl-times th.n, table.tbl-times td.n { width: 50px; }
  table.tbl-times th:last-child, table.tbl-times td:last-child { padding-right: 12px; }
  table.tbl-times th { letter-spacing: 0.1em; }
  table.tbl-times th .unit { font-size: 0.55rem; letter-spacing: 0.02em; }
  table.tbl-times td:first-child { font-size: 0.86rem; line-height: 1.35; overflow-wrap: anywhere; }
  table.tbl-times td.n { font-size: 0.95rem; }
  table.tbl-times td.n .onsite { font-size: 0.78rem; }
  table.tbl-times td.n[colspan] { white-space: normal; line-height: 1.3; }
  table.tbl-times tr.grp td { padding: 18px 14px 8px; }
}

/* Full-width panorama strip inside a band */
.panostrip { width: 100vw; margin-left: calc(50% - 50vw); margin-top: 40px; margin-bottom: calc(var(--pad) * -1); line-height: 0; }
.panostrip img { width: 100%; height: auto; display: block; }
@media (max-width: 700px) { .panostrip img { height: 200px; object-fit: cover; } }

/* ---------- Reviews marquee: a slim bar of quotes that drifts, pausing on hover ---------- */
.revs { overflow: hidden; padding: 2px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.revs-track { display: flex; width: max-content; gap: 14px; animation: revdrift 110s linear infinite; }
.revs:hover .revs-track, .revs:focus-within .revs-track { animation-play-state: paused; }
@keyframes revdrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.rev { flex: 0 0 auto; max-width: 560px; margin: 0; background: var(--white); border: 1px solid var(--line);
  padding: 14px 22px; display: flex; align-items: center; gap: 16px; }
.rev blockquote { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-70);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rev figcaption { flex: none; font-family: var(--display); font-weight: 700; font-size: 0.78rem;
  color: var(--ink); white-space: nowrap; }
.rev figcaption span { display: block; margin-top: 3px; font-family: var(--body); font-size: 0.55rem;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-45); }
@media (max-width: 620px) { .rev { max-width: 86vw; padding: 12px 18px; } }
@media (prefers-reduced-motion: reduce) { .revs { overflow-x: auto; } .revs-track { animation: none; } }

/* ---------- CTA band ---------- */
.cta { position: relative; overflow: hidden; background: var(--ink); }
.cta-bg { position: absolute; inset: 0; opacity: 0.34; }
.cta-bg img { width: 100%; height: 100% !important; object-fit: cover; }
.cta-bg::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,10,6,0.72) 0%, rgba(10,10,6,0.4) 72%, rgba(10,10,6,0.3) 100%); }
.cta .wrap { position: relative; z-index: 2; }
.cta h2 { color: var(--white); }
.cta h2 .gold { color: var(--gold-field); display: block; }
.cta p, .cta .lede { color: rgba(255,255,255,0.82); }

/* ---------- Plan pages ---------- */
.plan-sheet { max-width: 880px; margin: 0 auto; }
.plan-sheet img { width: 100%; }
.pvar figcaption { padding-top: 14px; }
.pvar h3 { margin-bottom: 3px; }
.planjump { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }
.planjump .n { text-align: right; }
.planjump-l { display: block; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-45); margin-bottom: 4px; }
.planjump-t { display: block; font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--ink); }
a:hover .planjump-t { color: var(--gold-deep); }
@media (max-width: 640px) { .planjump { flex-direction: column; text-align: center; } .planjump .n { text-align: center; } }

/* Drawing + PDF link, used on each floor plan band on Townhomes */
.plan-drawing-link { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.plan-drawing-link img { width: 50px; height: 65px; object-fit: cover; border: 1px solid var(--line); flex: none; }
.plan-drawing-link .txt { font-size: 0.87rem; }
.plan-drawing-links { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.plan-drawing-links .plan-drawing-link { border-top: 0; margin-top: 0; padding-top: 0; flex: 1 1 220px; }
/* Full-width site plan. Wide artwork, so it gets the whole column rather than a
   4:3 split frame that would crop it. Clicking opens the PDF. */
.siteplan { margin-top: 34px; border: 1px solid var(--line); background: var(--white); }
.siteplan img { display: block; width: 100%; height: auto; }
.siteplan a { display: block; }
/* The preview opens the full screen viewer below. */
.siteplan-open { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.siteplan-hint { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px; background: rgba(22,22,14,0.82); color: var(--white); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.siteplan-open:hover .siteplan-hint, .siteplan-open:focus-visible .siteplan-hint { background: var(--gold-field); color: var(--ink); }
@media (max-width: 559px) { .siteplan-hint { right: 8px; bottom: 8px; padding: 7px 10px; font-size: 0.58rem; } }

/* ---------- Site plan viewer ---------- */
.spv { position: fixed; inset: 0; z-index: 1200; background: #0E0E09; display: flex; flex-direction: column; }
.spv[hidden] { display: none; }
.spv-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.spv-t { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-bright); }
.spv-ctrl { display: flex; align-items: center; gap: 6px; }
.spv-b, .spv-pdf { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 1px solid rgba(255,255,255,0.22); color: var(--white); cursor: pointer;
  font-size: 1.35rem; line-height: 1; transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); }
.spv-pdf { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; padding: 0 14px; }
.spv-b:hover, .spv-pdf:hover { background: var(--gold-field); border-color: var(--gold-field); color: var(--ink); }
.spv-b:disabled { opacity: 0.35; cursor: default; background: none; color: var(--white); border-color: rgba(255,255,255,0.22); }
.spv-x { font-size: 1.8rem; margin-left: 6px; }
/* The stage scrolls; auto margins centre the image while it is smaller than the stage without
   clipping it once it is larger. */
.spv-stage { flex: 1; min-height: 0; overflow: auto; display: flex; cursor: grab; touch-action: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; }
.spv-stage.drag { cursor: grabbing; }
.spv-stage img { flex: none; margin: auto; max-width: none; height: auto; background: var(--white);
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.spv-hint { flex: none; margin: 0; padding: 10px 16px 14px; text-align: center; font-size: 0.72rem; color: rgba(255,255,255,0.55); }

/* Now Selling: release summary + buying steps */
.release-grid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; }
@media (min-width: 900px) { .release-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
/* Without this the plan table's minimum width stretched the column past the screen on phones,
   cutting off the paragraph and the table's right side. */
.release-grid > * { min-width: 0; }
.steps-cards { display: grid; grid-template-columns: 1fr; gap: 18px; counter-reset: sc; }
@media (min-width: 700px) { .steps-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps-cards { grid-template-columns: repeat(4, 1fr); } }
.steps-cards > div { counter-increment: sc; padding: 26px 24px 28px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); }
.steps-cards > div::before { content: counter(sc, decimal-leading-zero); display: block; font-family: var(--display); font-weight: 800; color: var(--gold-bright); margin-bottom: 14px; }
.steps-cards h4 { color: var(--white); margin-bottom: 8px; }
.steps-cards p { font-size: 0.9rem; margin: 0; color: rgba(255,255,255,0.72); }
.steps-cards .alink { margin-top: 14px; }
/* Five steps in a single row on desktop; two across (last card full width) on tablets */
@media (min-width: 1100px) {
  .steps-cards.five { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .steps-cards.five > div { padding: 24px 20px 26px; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .steps-cards.five { grid-template-columns: repeat(2, 1fr); }
  .steps-cards.five > div:last-child { grid-column: 1 / -1; }
}
.steps-cards > div { display: flex; flex-direction: column; }
.steps-cards .alink { align-self: flex-start; margin-top: auto; padding-top: 0; }
.steps-cards > div > p { margin-bottom: 20px; }

/* ---------- Footer ---------- */
.ftr { background: var(--ink); color: rgba(255,255,255,0.6); padding: 76px 0 30px; font-size: 0.9rem; }
.ftr-top { display: grid; grid-template-columns: 1fr; gap: 40px; padding-bottom: 46px;
  border-bottom: 1px solid rgba(255,255,255,0.1); }
@media (min-width: 900px) { .ftr-top { grid-template-columns: 1.5fr 1fr 1fr; gap: 56px; } }
.ftr-logo { height: 32px; width: auto; margin-bottom: 22px; }
.ftr p { color: rgba(255,255,255,0.6); max-width: 380px; }
.ftr-h { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.42); margin-bottom: 16px; }
.ftr li { margin-bottom: 10px; }
.ftr a { color: rgba(255,255,255,0.72); }
.ftr a:hover { color: var(--gold-bright); }
.ftr-legal { max-width: 720px; margin-top: 24px; font-size: 0.71rem; line-height: 1.65; color: rgba(255,255,255,0.38); }
.ftr-bot { padding-top: 26px; display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; }
.ftr-bot p, .ftr-bot a { font-size: 0.74rem; color: rgba(255,255,255,0.42); margin: 0; }

/* ---------- Reveal + top ---------- */
.rv { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: 0.08s; } .rv.d2 { transition-delay: 0.16s; } .rv.d3 { transition-delay: 0.24s; }
.totop { position: fixed; right: 20px; bottom: 20px; z-index: 800; width: 44px; height: 44px;
  border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease);
  display: flex; align-items: center; justify-content: center; }
.totop.show { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}

/* ---------- Utilities ---------- */
.mt-s { margin-top: 16px; } .mt-m { margin-top: 30px; } .mt-l { margin-top: 50px; }
.mb-s { margin-bottom: 16px; } .mb-m { margin-bottom: 30px; } .mb-l { margin-bottom: 50px; }
.mid { text-align: center; }
.head { max-width: 660px; margin-bottom: 36px; }
.head.mid { margin-left: auto; margin-right: auto; }
/* Wider intro paragraph for sections that sit above a full-width table */
.head-wide { max-width: 900px; }
/* Headings that must stay on a single line: the size scales with the viewport so the
   line never wraps and never overflows the gutter. */
.head.oneline { max-width: none; }
.head.oneline h2 { white-space: nowrap; font-size: clamp(1.25rem, 5.4vw, 3.35rem); }
/* Anchor targets land flush with the bottom of the stuck header, not 36px below it. */
[id] { scroll-margin-top: var(--header-stuck-h); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--gold-field); outline-offset: 3px; }
::selection { background: var(--gold-field); color: var(--ink); }

/* ---------- Contrast on the gold field ----------
   The neutral greys used on paper are far too light against this yellow.
   Everything on gold resolves to ink at varying opacity instead. */
.on-gold .switch-btn { color: rgba(22,22,14,0.74); border-color: rgba(22,22,14,0.22); }
.on-gold .switch-btn:hover { color: var(--ink); }
.on-gold .switch-btn.on { color: var(--ink); border-color: var(--ink); background: rgba(22,22,14,0.09); }
@media (min-width: 960px) {
  /* Selected use: tinted row with a solid marker down the left edge */
  .on-gold .switch-btn.on { background: rgba(22,22,14,0.09); box-shadow: inset 3px 0 0 var(--ink); padding-left: 14px; }
  .on-gold .switch-btn.on::before { content: '\2192'; margin-right: 9px; }
}
@media (min-width: 960px) {
  .on-gold .switch-btn { border-bottom-color: rgba(22,22,14,0.22); }
  .on-gold .switch-btn:first-child { border-top-color: rgba(22,22,14,0.22); }
  .on-gold .switch-btn.on { border-bottom-color: var(--ink); }
}
.on-gold .specs { border-top-color: var(--ink); }
.on-gold .specs li { border-bottom-color: rgba(22,22,14,0.16); }
.on-gold .specs .k { color: rgba(22,22,14,0.6); }
.on-gold .specs .v { color: var(--ink); }
.on-gold .specs-title { color: rgba(22,22,14,0.6); border-bottom-color: rgba(22,22,14,0.16); }
.on-gold .ticks li::before { background: var(--ink); }
/* Cards sitting inside a gold band: white panels so the photos and text stay legible */
.on-gold .cards .card { background: var(--white); border: 0;
  box-shadow: 0 10px 30px rgba(22,22,14,0.14); transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
.on-gold .cards .card:hover { box-shadow: 0 16px 40px rgba(22,22,14,0.2); }
.on-gold .cards .card .card-txt { padding: 22px 26px 26px; }
.on-gold .cards .card .label { color: var(--gold-deep); }
.on-gold .cards .card p { color: var(--ink-70); }
/* Developer intro: the Watermark logo sits opposite the copy on wide screens so the
   right half of the band is not left empty. */
.dev-intro { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.dev-logo img { width: 100%; max-width: 320px; height: auto; display: block; }
@media (min-width: 900px) {
  .dev-intro { grid-template-columns: minmax(0, 1fr) 420px; gap: 60px; }
  .dev-intro .measure { grid-column: 1; grid-row: 1; }
  .dev-logo { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
  .dev-logo img { max-width: 420px; }
}

/* A card row held narrower than the container, so a two-up row does not blow the
   photos up to full width. */
.cards.narrow { max-width: 980px; margin-left: auto; margin-right: auto; }

/* Panel cards: the same white panel treatment the gold band gives its cards, made
   available on any band so two card rows on one page read as one system. */
.cards.panel-cards .card { background: var(--white); border: 0;
  box-shadow: 0 10px 30px rgba(22,22,14,0.14); transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
.cards.panel-cards .card:hover { box-shadow: 0 16px 40px rgba(22,22,14,0.2); }
.cards.panel-cards .card .card-txt { padding: 22px 26px 26px; }
.cards.panel-cards .card p { color: var(--ink-70); }

.on-gold .steps li { border-color: rgba(22,22,14,0.2); }
.on-gold .steps li::before { color: var(--ink); }
.on-gold .tab { color: rgba(22,22,14,0.55); }
.on-gold .tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.on-gold .tabs { border-bottom-color: rgba(22,22,14,0.2); }
.on-gold .card-txt p { color: rgba(22,22,14,0.78); }

/* ==========================================================================
   SESSION 32 REFINEMENTS (Christian's review list, 23 September 2026)
   Kept together at the end so they win over the base rules above.
   ========================================================================== */

/* Header: Register sits before the social icons. The nav takes the spare space so the
   Register button and icons group together on the right at every width. */
.hdr .row { justify-content: flex-start; }
.hdr .row > nav { margin-left: auto; }
.hdr .row > .hdr-cta { margin-left: 8px; }
@media (max-width: 1059px) { .social-hdr { margin-left: 0; } .hdr .row > .hdr-cta { margin-left: auto; } }

/* Mobile menu: Register in the top left beside the close button; the page you are on is
   marked in gold with a bar; sub links indented further under their parent. */
/* Top row: logo, Register and the close button on one line. The logo gives way on the
   narrowest phones so all three always fit. */
.drawer { padding: 20px 24px 36px; }
.drawer-top { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; }
.drawer-brand { flex: none; display: block; line-height: 0; }
.drawer-brand .drawer-logo { height: 30px; width: auto; max-width: none; margin: 0; }
/* Same size and type as the Register button in the page header on phones and tablets,
   pushed right beside the close button. */
.drawer-top .drawer-cta { flex: none; display: inline-block; margin-left: auto; padding: 10px 16px;
  background: var(--gold-field); border: 1.5px solid var(--gold-field); color: var(--ink); font-family: var(--body);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; }
@media (max-width: 400px) { .drawer-top .drawer-cta { padding: 9px 12px; letter-spacing: 0.08em; } }
.drawer-top .drawer-cta:hover { background: var(--gold-bright); color: var(--ink); }
.drawer-top .drawer-x { position: static; flex: none; margin-left: 8px; width: 36px; height: 36px; margin-right: -6px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; }
.drawer-sub { padding-left: 34px; }
.drawer-sub::before { left: 16px; }
/* Current page: gold text and a short, fine bar beside it */
.drawer a.here { color: var(--gold-bright); }
.drawer > a.here, .drawer-group > a.here:first-child { position: relative; padding-left: 14px; }
.drawer > a.here::before, .drawer-group > a.here:first-child::before { content: ''; position: absolute; left: 0; top: 50%;
  width: 2px; height: 0.9em; transform: translateY(-50%); background: var(--gold-field); opacity: 0.85; }
.drawer-group > a.here:first-child::before { top: calc(50% + 4px); }
.drawer-sub.here { color: var(--gold-bright); }
/* Social links at the foot of the menu */
.drawer-social { margin-top: auto; padding-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.drawer-social-l { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.drawer-social .social { gap: 18px; color: rgba(255,255,255,0.8); }
.drawer-social .social a { border: 0; padding: 0; }
.drawer-social .social svg { width: 22px; height: 22px; }
.drawer-social .social a:hover svg { fill: var(--gold-bright); }
/* The closed drawer sits just off the right edge; its shadow was bleeding a dark band down
   the right side of every page on phones. Shadow only while open. */
.drawer { box-shadow: none; }
.drawer.open { box-shadow: -18px 0 50px rgba(0,0,0,0.35); }

/* Hero overlay: set halfway between the original darkness and the brightened version (Christian, 23 Sept). */
.hero-bg::after { background: linear-gradient(180deg, rgba(10,10,6,0.5) 0%, rgba(10,10,6,0.14) 30%, rgba(10,10,6,0.37) 62%, rgba(10,10,6,0.86) 100%); }
.phero .hero-bg::after { background: linear-gradient(180deg, rgba(10,10,6,0.51) 0%, rgba(10,10,6,0.21) 37%, rgba(10,10,6,0.82) 100%); }

/* Home: heading held on one line on wider screens */
@media (min-width: 1000px) { .h2-desk-oneline { white-space: nowrap; } }

/* Statement paragraphs run wider on large screens so they stack less tall */
.statement.measure { max-width: 900px; }
.statement .lede { max-width: 800px; }

/* Reviews: larger cards that show the whole review (or most of it), a smaller title,
   and the same overall section height. */
#reviews .head h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
#reviews .head { margin-bottom: 26px; }
.rev { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px;
  width: 400px; max-width: none; padding: 20px 24px; }
.rev blockquote { font-size: 0.9rem; line-height: 1.55; color: var(--ink); -webkit-line-clamp: 5; }
.revs-track { gap: 16px; align-items: stretch; }
@media (max-width: 620px) { .rev { width: 82vw; max-width: none; padding: 18px 20px; } }

/* Phones: images lead text in every split section (photo, then heading and copy) */
@media (max-width: 959px) {
  .split .split-img { order: -1; }
}
/* Townhomes plan sections: the two buttons sit side by side on phones */
@media (max-width: 559px) {
  .plan-btns { flex-wrap: nowrap; gap: 8px; }
  .plan-btns .btn { padding: 13px 14px; font-size: 0.64rem; letter-spacing: 0.1em; flex: 1 1 auto; justify-content: center; }
}

/* Big numbers stay three across on phones, sized down */
@media (max-width: 759px) {
  .bignums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bignum { padding: 18px 6px; border-top: 0; border-right: 1px solid var(--line); }
  .bignum:last-child { border-right: 0; }
  .on-ink .bignum { border-color: rgba(255,255,255,0.14); }
  .on-gold .bignum { border-color: rgba(22,22,14,0.18); }
  .bignum-n { font-size: clamp(1.6rem, 8vw, 2.4rem); margin-bottom: 8px; }
  .bignum-l { font-size: 0.54rem; letter-spacing: 0.1em; }

  .bignum p { font-size: 0.78rem; margin-top: 6px; line-height: 1.35; }
}

/* Nearby chips: an even two column grid on phones instead of a ragged centred cloud */
@media (max-width: 620px) {
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .chips li { justify-content: flex-start; border-radius: 0; padding: 10px 12px; font-size: 0.7rem; line-height: 1.25; }
  .chips .t { flex: none; min-width: 44px; }
  /* An odd last chip spans both columns so the grid ends square */
  .chips li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Home, Community and Okanagan cards: boxed on phones so the two read as separate items */
.cards.boxed-sm .card { background: var(--white); box-shadow: 0 8px 24px rgba(22,22,14,0.1); }
.cards.boxed-sm .card-txt { padding: 26px 30px 30px; }
@media (max-width: 699px) { .cards.boxed-sm .card-txt { padding: 20px 20px 22px; } }

/* Tabs (Features, Nearby Amenities): one swipeable row on phones instead of a ragged wrap */
@media (max-width: 699px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; gap: 0 22px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
    padding-right: 30px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; white-space: nowrap; }
}

/* Townhomes, The Setting: one continuous list on phones, button centred */
@media (max-width: 959px) {
  .setting-list { gap: 0; }
  .setting-btns { justify-content: center; }
}

/* Lock-off page, Which Plans: each plan boxed so the three read as separate items */
.plan-boxes .card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-top: 2px solid var(--gold-field); }
.plan-boxes .card-txt { padding: 22px 24px 24px; }
.plan-boxes .specs { border-top: 0; }
.plan-boxes { gap: 16px; }

/* Lock-off switcher on phones and tablets: previous and next arrows with the room name,
   instead of nine wrapped buttons. One photo per room on phones. */
.switch-nav { display: none; }
@media (max-width: 959px) {
  .switcher .switch-list { display: none; }
  .switch-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .switch-nav button { flex: none; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ink); color: var(--white); border: 0; cursor: pointer; font-size: 1.3rem; line-height: 1; }
  .switch-nav button:hover { background: var(--ink-2); }
  .switch-nav .sn-t { flex: 1; text-align: center; font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--ink); letter-spacing: -0.02em; }
  .switch-nav .sn-c { display: block; font-family: var(--body); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; color: rgba(22,22,14,0.62); margin-top: 3px; }
  .switch-copy h3 { display: none; }
  .switch-copy { margin-top: 14px; }
}
@media (max-width: 619px) { .switch-shots img + img { display: none; } }
/* Headline keeps its two line stack; only the paragraph widens */
.statement.measure h2 { max-width: 660px; margin-left: auto; margin-right: auto; }
/* Card headings held on one line: the size follows the card's own width (about 14 characters
   of this face per font size), capped at the normal h3 size. */
.card-txt:has(.h3-oneline) { container-type: inline-size; }
.h3-oneline { white-space: nowrap; font-size: min(clamp(1.2rem, 1.7vw, 1.5rem), 6.6cqi); }

/* Testimonials: stars on the right of the reviewer line, tighter section */
.rev figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.rev figcaption .who { display: block; margin: 0; font-family: var(--display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0; text-transform: none; color: var(--ink); }
.rev figcaption .who span { display: block; margin-top: 3px; font-family: var(--body); font-size: 0.55rem;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-45); }
.rev figcaption .stars { display: block; flex: none; margin: 0; font-family: var(--body); color: var(--gold-field);
  font-size: 0.95rem; letter-spacing: 0.08em; text-transform: none; line-height: 1; }
#reviews.band-sm { padding: calc(var(--pad) * 0.45) 0; }
#reviews .head { margin-bottom: 20px; }
#reviews .fine.mt-m { margin-top: 18px; }

/* Home hero film: starts muted; this button turns the sound on and off */
.hero-sound { position: absolute; right: 22px; bottom: 22px; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(22,22,14,0.55); border: 1.5px solid rgba(255,255,255,0.55); color: var(--white);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease); }
.hero-sound:hover { background: var(--gold-field); border-color: var(--gold-field); color: var(--ink); }
.hero-sound svg { width: 20px; height: 20px; }
.hero-sound .snd-on { display: none; }
.hero-sound[aria-pressed="true"] .snd-on { display: block; }
.hero-sound[aria-pressed="true"] .snd-off { display: none; }
@media (max-width: 700px) { .hero-sound { right: 14px; bottom: 14px; width: 40px; height: 40px; } }

/* Home hero: text steps aside while the film's closing logo plays (desktop only) */
.hero-in { transition: opacity 0.8s var(--ease), visibility 0.8s; }
.hero-in.logo-out { opacity: 0; visibility: hidden; }
/* Home hero overlay without the heavy dark band at the bottom. A soft shadow on the type keeps it
   readable over bright shots instead. */
/* Comparison, 24 Sept: gradient restored. The lighter version is kept below, switched off.
body.home .hero-bg::after { background: linear-gradient(180deg, rgba(10,10,6,0.45) 0%, rgba(10,10,6,0.14) 30%, rgba(10,10,6,0.26) 65%, rgba(10,10,6,0.3) 100%); }
body.home .hero-in h1, body.home .hero-in .lede { text-shadow: 0 2px 18px rgba(10,10,6,0.45), 0 1px 3px rgba(10,10,6,0.35); }
*/
/* Fact bar on phones: shorter cells */
@media (max-width: 559px) {
  .fact { padding-top: 14px; padding-bottom: 14px; }
  .fact-l { margin-bottom: 5px; }
}

/* Home hero overlay, 24 Sept: desktop darkens only the left side where the text sits, so the right
   of the film stays bright; phones use a softer bottom gradient plus a light text shadow. */
@media (min-width: 701px) {
  /* Desktop: no shade over the film apart from a light strip behind the header. The type carries
     its own contrast instead: a soft shadow on the headline and a tight dark halo around the
     smaller paragraph text, which needs it most. */
  /* Even tint over the whole film, with the same slightly darker strip at the top for the header. */
  body.home .hero-bg::after { background: linear-gradient(180deg, rgba(10,10,6,0.45) 0%, rgba(10,10,6,0.25) 20%, rgba(10,10,6,0.25) 100%); }
  body.home .hero-in h1 { text-shadow: 0 2px 14px rgba(10,10,6,0.35), 0 1px 2px rgba(10,10,6,0.3); }
  body.home .hero-in .lede { color: #fff; font-weight: 500; text-shadow: none; }
  body.home .hero .btn-line-light { background: rgba(10,10,6,0.22); }
}
@media (max-width: 700px) {
  body.home .hero-bg::after { background: linear-gradient(180deg, rgba(10,10,6,0.45) 0%, rgba(10,10,6,0.12) 28%, rgba(10,10,6,0.3) 58%, rgba(10,10,6,0.6) 100%); }
  body.home .hero-in h1, body.home .hero-in .lede { text-shadow: 0 2px 16px rgba(10,10,6,0.45), 0 1px 3px rgba(10,10,6,0.35); }
}
/* Wide screens: the hero is wider than the film's 16:9 shape, so the film is scaled to the width and
   trimmed top and bottom. Anchor it to the bottom so the trim comes off the sky, not the captions. */
@media (min-width: 701px) {
  body.home .hero-bg video { object-position: 50% 100%; }
  /* Hero text back in its original low position. The film is made slightly taller than the hero
     and pinned to the bottom, so the strip of footage below the captions is trimmed off and the
     captions sit just above the fact bar, clear of the button on the left. */
  body.home .hero-bg video { height: calc(100% + 3.1vw) !important; }
}

/* ==========================================================================
   HERO TINT, 24 Sept: one even tint on every hero, phones included.
   A slightly darker strip at the top keeps the menu readable; below that the
   tint is flat, so the photo or film stays bright right to the bottom.
   Home (moving film) 25%; inner pages 16% (lightened 28 Sept).
   ========================================================================== */
body.home .hero-bg::after,
body.home .hero .hero-bg::after { background: linear-gradient(180deg, rgba(10,10,6,0.45) 0%, rgba(10,10,6,0.25) 20%, rgba(10,10,6,0.25) 100%) !important; }
.phero .hero-bg::after { background:
  radial-gradient(ellipse 60% 50% at 18% 85%, rgba(10,10,6,0.32) 0%, rgba(10,10,6,0.16) 50%, rgba(10,10,6,0) 100%),
  linear-gradient(180deg, rgba(10,10,6,0.42) 0%, rgba(10,10,6,0.16) 20%, rgba(10,10,6,0.16) 100%) !important; }
/* Inner pages: a soft extra shade gathered behind the headline and paragraph (bottom left);
   on phones, where the text spans the width, it widens into a gentle band across the bottom. */
@media (max-width: 700px) {
  .phero .hero-bg::after { background:
    radial-gradient(ellipse 110% 45% at 40% 82%, rgba(10,10,6,0.32) 0%, rgba(10,10,6,0.16) 50%, rgba(10,10,6,0) 100%),
    linear-gradient(180deg, rgba(10,10,6,0.42) 0%, rgba(10,10,6,0.16) 20%, rgba(10,10,6,0.16) 100%) !important; }
}
/* Soft shadow on hero headlines everywhere so they hold up over bright areas without a dark fade. */
.hero-in h1, .phero-in h1 { text-shadow: 0 2px 14px rgba(10,10,6,0.35), 0 1px 2px rgba(10,10,6,0.3); }
/* Soft drop shadow (not an outline) behind hero paragraphs, all pages. */
.hero-in .lede, .phero-in .lede, body.home .hero-in .lede { color: #fff; font-weight: 500; text-shadow: 0 1px 8px rgba(10,10,6,0.55), 0 1px 2px rgba(10,10,6,0.35) !important; }
.phero-in .crumb { color: rgba(255,255,255,0.8); }

/* Lock-off "What's Inside", 28 Sept: two photos the same size, set on a diagonal. The wet bar
   photo sits on top so it is never covered; it overlaps only the plain wall of the second. */
.split-img.duo { position: relative; padding-bottom: 44%; }
.split-img.duo img { width: 57%; aspect-ratio: 4 / 5; height: auto; }
.split-img.duo img:first-child { position: relative; z-index: 2; object-position: 84% 50%;
  box-shadow: 0 0 0 7px var(--paper-2); }  /* paper-coloured ring: only shows where it crosses the second photo */
.split-img.duo img:last-child { position: absolute; right: 0; bottom: 0; z-index: 1; object-position: 39% 50%; }

/* Location fact bar, 28 Sept: one gold line icon per item, the facts as short lines of white and
   gold. Phones: two by two, icon beside the text, smaller type so nothing wastes space. */
.fb-ico .fbi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fbi-c { display: flex; align-items: center; gap: 14px; padding: 24px 20px; min-width: 0;
  border-right: 1px solid rgba(255,255,255,0.12); }
.fbi-c:last-child { border-right: 0; }
.fbi-ico { flex: none; width: 44px; height: 44px; border: 1px solid rgba(245,174,28,0.45); border-radius: 50%;
  display: grid; place-items: center; }
.fbi-ico svg { width: 22px; height: 22px; stroke: var(--gold-field); fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.fbi-l { display: block; font-size: 0.63rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.62); margin-bottom: 5px; white-space: nowrap; }
.fbi-t { display: block; font-family: var(--display); font-weight: 700; font-size: 1.06rem; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--white, #fff); white-space: nowrap; }
.fbi-t b { color: var(--gold-field); font-weight: 800; }
@media (max-width: 1100px) and (min-width: 860px) { .fbi-c { gap: 10px; padding: 22px 12px; } .fbi-ico { width: 36px; height: 36px; } .fbi-l { letter-spacing: 0.12em; } .fbi-t { font-size: 0.95rem; } }
@media (max-width: 859px) {
  .fb-ico .wrap { padding: 0; }
  .fb-ico .fbi { grid-template-columns: 1fr 1fr; }
  .fbi-c:nth-child(2n) { border-right: 0; }
  .fbi-c:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.12); }
  .fbi-c { padding: 20px 36px; }
}
@media (max-width: 559px) {
  .fbi-c { justify-content: flex-start; gap: 10px; padding: 14px 12px; }
  .fbi-ico { width: 32px; height: 32px; }
  .fbi-ico svg { width: 17px; height: 17px; }
  .fbi-l { font-size: 0.53rem; letter-spacing: 0.1em; margin-bottom: 3px; }
  .fbi-t { font-size: 0.81rem; }
}
@media (max-width: 370px) { .fbi-c { padding: 13px 8px; gap: 8px; } .fbi-l { letter-spacing: 0.06em; } }
/* Location fact bar, phones, tighter (28 Sept): less padding, smaller icon circle, tighter lines. */
@media (max-width: 559px) {
  .fbi-c { padding: 10px 12px; gap: 9px; }
  .fbi-ico { width: 28px; height: 28px; }
  .fbi-ico svg { width: 15px; height: 15px; }
  .fbi-l { margin-bottom: 2px; }
  .fbi-t { font-size: 0.78rem; line-height: 1.22; }
}
@media (max-width: 370px) { .fbi-c { padding: 10px 8px; gap: 7px; } }
/* Location fact bar, desktop: centre each icon and text group within its column (28 Sept). */
@media (min-width: 860px) { .fbi-c { justify-content: center; } }

/* Promo bar, 28 Sept: slides in under the menu after a short delay; built and configured in
   main.js (PROMO). Sits inside the header so it follows it as the header shrinks on scroll. */
.promo { position: absolute; top: 100%; left: 0; right: 0; z-index: -1;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-field); color: var(--ink);
  box-shadow: 0 6px 18px rgba(10,10,6,0.16);
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform 0.55s var(--ease), opacity 0.4s var(--ease), visibility 0s linear 0.55s; }
.promo.show { transform: none; opacity: 1; visibility: visible;
  transition: transform 0.55s var(--ease), opacity 0.4s var(--ease), visibility 0s; }
.promo-link { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 14px;
  padding: 11px 56px; color: var(--ink); text-decoration: none; font-size: 0.86rem; line-height: 1.35; text-align: center; }
.promo-link strong { font-family: var(--display); font-weight: 800; letter-spacing: -0.005em; }
.promo-more { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 1px; white-space: nowrap; }
.promo-link:hover .promo-more { opacity: 0.7; }
.promo-short { display: none; }
.promo-x { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--ink); }
.promo-x svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.promo-x:hover { opacity: 0.65; }
@media (max-width: 700px) {
  .promo-long { display: none; }
  .promo-short { display: inline; }
  .promo-link { padding: 9px 46px 9px 16px; font-size: 0.8rem; gap: 2px 10px; }
  .promo-more { font-size: 0.6rem; letter-spacing: 0.12em; }
  .promo-x { right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .promo, .promo.show { transition: none; } }
/* While the promo bar is showing, the hero text keeps clear of it: on short screens, where the
   headline sits close under the menu, the hero grows by the bar's height instead of being covered. */
.hero-in, .phero-in { transition: margin-top 0.55s var(--ease); }
body.promo-on .hero-in, body.promo-on .phero-in { margin-top: calc(var(--promo-h, 0px) + 14px); }
/* Home hero text fade before the film's closing logo, 28 Sept: a slower, softer fade (1.6s) that
   starts a little earlier, and fades back in gently when the film loops. Replaces the 0.8s fade,
   which the promo rule above had also overridden, making it snap. */
.hero-in { transition: opacity 1.6s ease-in-out, visibility 0s linear 0s, margin-top 0.55s var(--ease); }
.hero-in.logo-out { opacity: 0; visibility: hidden;
  transition: opacity 1.6s ease-in-out, visibility 0s linear 1.6s, margin-top 0.55s var(--ease); }

/* Registration form check (28 Sept): fields that need attention, and the message above Submit. */
.reg-form .field.invalid input, .reg-form .field.invalid select, .reg-form .field.invalid textarea { border-color: #B3261E; box-shadow: 0 0 0 1px #B3261E; }
.reg-form .field.consent.invalid label { color: #B3261E; }
.reg-form .field.consent.invalid input[type="checkbox"] { outline: 2px solid #B3261E; outline-offset: 2px; }
.reg-form .form-check { margin: 4px 0 14px; color: #B3261E; font-size: 0.92rem; font-weight: 600; }
.reg-form button[disabled] { opacity: 0.7; cursor: default; }
/* Consent checkbox, 28 Sept: the general field styles removed the checkbox's own tick, so it
   looked like it did nothing when clicked. A proper box that shows a clear tick when checked. */
.consent input[type="checkbox"], .reg-form .field.consent input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; min-width: 22px; padding: 0; margin: 2px 0 0;
  background: var(--white) center / 14px 14px no-repeat; border: 1.5px solid var(--gold-deep); border-radius: 3px;
  cursor: pointer; box-shadow: none; }
.consent input[type="checkbox"]:checked, .reg-form .field.consent input[type="checkbox"]:checked {
  background-color: var(--gold-deep);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E"); }
.consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold-field); outline-offset: 2px; }
.consent label { cursor: pointer; }
/* Flyover footage colour lift, 28 Sept: the Now Selling flyover and the Register hero (a still
   from the same flight) were shot in soft dusk light and read flat. A gentle boost: +8%
   brightness, +6% contrast, +18% colour. */
.hero-boost { filter: brightness(1.08) contrast(1.06) saturate(1.18); }
/* Lighter tint on the two flyover heroes (Now Selling video, Register photo), 28 Sept:
   flat part 16% down to 10%, top strip 42% down to 36%. The soft shade behind the
   headline stays the same so the text remains readable. */
body.hero-lighter .phero .hero-bg::after { background:
  radial-gradient(ellipse 60% 50% at 18% 85%, rgba(10,10,6,0.32) 0%, rgba(10,10,6,0.16) 50%, rgba(10,10,6,0) 100%),
  linear-gradient(180deg, rgba(10,10,6,0.36) 0%, rgba(10,10,6,0.10) 20%, rgba(10,10,6,0.10) 100%) !important; }
@media (max-width: 700px) {
  body.hero-lighter .phero .hero-bg::after { background:
    radial-gradient(ellipse 110% 45% at 40% 82%, rgba(10,10,6,0.32) 0%, rgba(10,10,6,0.16) 50%, rgba(10,10,6,0) 100%),
    linear-gradient(180deg, rgba(10,10,6,0.36) 0%, rgba(10,10,6,0.10) 20%, rgba(10,10,6,0.10) 100%) !important; }
}