/* ==========================================================================
   130 SHERBROOK RESIDENCES, West Broadway, Winnipeg
   A Paragon Living community
   Palette: Tricorn Black #2F2F30 · Copper Mountain #A6613C · Ice Cube #E3E4E1
   Type:    Josefin Sans, single brand typeface (Thin 100 to Bold 700)
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Josefin Sans';
  src: url('../assets/fonts/josefin-sans-var-latin.21efe155.woff2') format('woff2-variations'),
       url('../assets/fonts/josefin-sans-var-latin.21efe155.woff2') format('woff2');
  font-weight: 100 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../assets/fonts/josefin-sans-var-latin-ext.e9dfe6f6.woff2') format('woff2-variations'),
       url('../assets/fonts/josefin-sans-var-latin-ext.e9dfe6f6.woff2') format('woff2');
  font-weight: 100 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallback. Josefin's x-height ratio is 0.378 against Arial's
   0.519, so Arial is scaled to 72.9% and its ascent/descent overridden to keep
   the same line box. Text does not shift when the webfont arrives. */
@font-face {
  font-family: 'Josefin Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 72.9%;
  ascent-override: 102.9%;
  descent-override: 34.3%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  /* the design is art-directed light with dark sections; "only light" opts the
     page out of Chrome's Auto Dark Theme so Android never repaints the brand */
  color-scheme: only light;
  --ink: #2F2F30;          /* Tricorn Black */
  --ink-deep: #232324;
  --ice: #E3E4E1;          /* Ice Cube */
  --paper: #F2F2F0;
  --copper: #A6613C;       /* Copper Mountain */
  --copper-deep: #8A4F30;
  --copper-lift: #C07B53;
  --on-photo: #EFEFEC;

  --ink-60: rgba(47, 47, 48, .72);
  --hairline-dark: rgba(47, 47, 48, .16);
  --hairline-light: rgba(227, 228, 225, .22);

  /* one typeface, the whole brand. hierarchy comes from weight and tracking. */
  --font-display: 'Josefin Sans', 'Josefin Fallback', 'Century Gothic', sans-serif;
  --font-body: 'Josefin Sans', 'Josefin Fallback', 'Century Gothic', sans-serif;

  /* viewport-fit=cover is declared, so a notched phone held sideways eats one
     gutter; nothing was subtracting the inset */
  /* main.js keeps this in sync: the header's height moves with the browser
     font size and with whether its row wraps */
  --nav-h: 74px;
  --gutter-safe: max(env(safe-area-inset-left), env(safe-area-inset-right));
  --container: min(1200px, calc(92vw - 2 * var(--gutter-safe)));
  --section-pad: clamp(4.5rem, 9vw, 8rem);
  --ease-out: cubic-bezier(.22, .61, .2, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-padding-top: calc(var(--nav-h) + 18px);
  -webkit-text-size-adjust: 100%;
  /* classic-scrollbar platforms: no reflow when a modal locks body scroll */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Josefin has a small x-height, so body copy is set a notch larger and looser
   than the Raleway original or it reads thin at the same nominal size. */
body {
  font-family: var(--font-body);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.74;
  letter-spacing: .008em;
  color: var(--ink);
  background: var(--ice);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
sup { font-size: .6em; }

::selection { background: var(--copper); color: var(--ice); }

:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.section--dark :focus-visible,
.cta :focus-visible,
.footer :focus-visible,
.hero :focus-visible { outline-color: var(--ice); }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 300;
  background: var(--ink); color: var(--ice);
  padding: .7em 1.2em .55em; text-decoration: none;
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

.container { width: var(--container); margin-inline: auto; }

/* ---------- Type ---------- */
/* The logo sets the rule: heavy geometric caps over light tracked caps. Every
   heading on the page is built from that same two-weight relationship. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: .045em;
  text-transform: uppercase;
}
/* widest unbreakable run in any h2 is "WALKING SPEED." at 8.9em (an nbsp holds
   it together); min() keeps it inside the container below ~357px. */
h2 { font-size: min(9.4vw, clamp(2.1rem, 4.4vw, 3.6rem)); }
h1 em, h2 em, h3 em { font-style: normal; font-weight: 600; letter-spacing: .02em; }

p { max-width: 62ch; text-wrap: pretty; }

.eyebrow {
  display: flex; align-items: center; gap: .9rem;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase;
  /* copper-deep, not copper: at this size WCAG needs 4.5:1 and the brand
     copper only reaches 3.7-4.3 on the light grounds */
  color: var(--copper-deep);
}
p.eyebrow{
  max-width: 79ch;
}
.eyebrow::before {
  content: ''; width: 2.2rem; height: 1px;
  background: currentColor; opacity: .7; flex: none;
}
.eyebrow--onphoto { color: var(--on-photo); }

.section-head {
  display: flex; align-items: baseline; gap: 1.1rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.section-index {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 600; line-height: 1;
  letter-spacing: .06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(47, 47, 48, .58);
}
.section-head--ondark .section-index { -webkit-text-stroke-color: rgba(227, 228, 225, .5); }
.section-head--ondark .eyebrow { color: rgba(227, 228, 225, .8); }

.footnote { font-size: .78rem; color: var(--ink-60); max-width: 66ch; margin-top: 1rem; }

.text-link {
  display: inline-block; margin-top: 1.4rem;
  font-weight: 600; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--copper-deep);
  border-bottom: 1px solid currentColor; padding-bottom: .4em;
  transition: opacity .25s;
}
.text-link:hover { opacity: .65; }
.text-link span { display: inline-block; transition: transform .3s var(--ease-out); }
.text-link:hover span { transform: translateX(5px); }

.inline-link {
  display: inline; padding: 0; border: 0; background: none;
  font: inherit; color: var(--copper-deep); cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity .25s;
}
.inline-link:hover { opacity: .65; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  font-family: var(--font-display);
  font-size: .88rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  line-height: 1; text-decoration: none; white-space: nowrap;
  padding: 1.15em 1.9em 1em;   /* Josefin caps sit high in the em box */
  border: 1px solid transparent;
  transition: background .3s, color .3s, border-color .3s;
}
.btn--lg { font-size: .96rem; padding: 1.25em 2.2em 1.1em; }
/* below ~340px the label on one line is wider than the container */
@media (max-width: 340px) {
  .btn { white-space: normal; text-wrap: balance; padding-inline: 1.2em; }
}
.btn__arrow { display: inline-block; transition: transform .3s var(--ease-out); font-weight: 500; }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--solid { background: var(--copper); color: #fff; }
.btn--solid:hover { background: var(--copper-deep); }

.btn--ghost { border-color: rgba(239, 239, 236, .55); color: var(--on-photo); }
.btn--ghost:hover { background: var(--on-photo); color: var(--ink); border-color: var(--on-photo); }

.btn--dark { background: var(--ink); color: var(--ice); }
.btn--dark:hover { background: var(--copper); color: #fff; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  transition: background .4s, box-shadow .4s;
}
.nav__inner {
  width: var(--container); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding-block: 1.15rem;
  transition: padding .4s;
}
/* flex:none — from 901 to 1043px the link row squeezed the lockup to 109px */
.nav__brand { position: relative; display: block; flex: none; }
/* the Sherbrook lockup is 5.4:1, so it is sized on width, not height */
.nav__logo { width: 168px; height: auto; transition: opacity .35s; }
.nav__logo--dark { position: absolute; inset: 0; opacity: 0; }

.nav__links { display: flex; gap: 2.1rem; margin-left: auto; }
.nav__links a {
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--on-photo);
  position: relative; padding-bottom: .4em;
  transition: color .35s;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease-out);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__actions { display: flex; align-items: center; gap: 1.2rem; }
/* nothing wraps at a normal font size; at 150%+ text the row would otherwise
   push the CTA past the right edge */
.nav__inner { flex-wrap: wrap; row-gap: .5rem; }
.nav__cta { font-size: .78rem; padding: 1em 1.5em .85em; }

.nav--scrolled { background: rgba(227, 228, 225, .93); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--hairline-dark); }
.nav--scrolled .nav__inner { padding-block: .7rem; }
.nav--scrolled .nav__logo--light { opacity: 0; }
.nav--scrolled .nav__logo--dark { opacity: 1; }
.nav--scrolled .nav__links a { color: var(--ink); }

/* burger */
.nav__burger { display: none; width: 42px; height: 42px; position: relative; z-index: 260; }
.nav__burger span {
  position: absolute; left: 9px; right: 9px; height: 2px;
  background: var(--on-photo); transition: transform .35s, top .35s, background .35s;
}
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { top: 24px; }
.nav--scrolled .nav__burger span { background: var(--ink); }
body.menu-open .nav__burger span { background: var(--ice); }
body.menu-open .nav__burger span:nth-child(1) { top: 20px; transform: rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { top: 20px; transform: rotate(-45deg); }

/* mobile menu. It was place-items:center with no scroller while body.menu-open
   froze the page: at 844x390 and 900x500 the six items were taller than the
   screen, so the first link sat under the header and the CTA was unreachable.
   Now it scrolls, clears the header, and caps its type by height too. */
.mobile-menu {
  position: fixed; inset: 0; z-index: 250;
  background: var(--ink);
  display: grid;
  align-content: safe center;   /* "safe" never pushes content past the top edge */
  justify-items: center;
  padding: calc(var(--nav-h) + 18px + env(safe-area-inset-top)) 1.25rem
           max(2rem, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity .45s, visibility .45s;
}
.mobile-menu nav { display: grid; gap: clamp(.8rem, 2.6vh, 1.5rem); text-align: center; }
.mobile-menu a {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.5rem, min(7.5vw, 6.6vh), 2.8rem);
  line-height: 1; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none;
  color: var(--ice);
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s, transform .5s;
  transition-delay: calc(var(--i) * 70ms);
}
.mobile-menu .btn {
  justify-self: center; margin-top: 1rem;
  /* .mobile-menu a (0,1,1) outranks .btn (0,1,0), so the CTA inherited the
     display clamp: with em padding that made a 91-143px slab wider than the
     screen. This rule is (0,2,0). */
  font-size: clamp(.88rem, 3.2vw, 1rem);
  max-width: 100%;
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s, transform .5s, background .3s;
  transition-delay: calc(var(--i) * 70ms);
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
body.menu-open .nav {
  z-index: 260; background: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.menu-open .nav__logo--light { opacity: 1; }
body.menu-open .nav__logo--dark { opacity: 0; }
body.menu-open .mobile-menu a,
body.menu-open .mobile-menu .btn { opacity: 1; transform: none; }
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  padding-top: calc(var(--nav-h) + 18px);   /* clears the fixed nav at any font size */
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--on-photo);
  overflow: hidden;
}
.hero__media, .hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 55% 45%;
}
.hero__media img { will-change: transform; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(47,47,48,.55) 0%, rgba(47,47,48,0) 24%),
    linear-gradient(90deg, rgba(35,35,36,.78) 0%, rgba(47,47,48,.34) 48%, rgba(47,47,48,0) 80%),
    linear-gradient(199deg, rgba(47,47,48,0) 18%, rgba(35,35,36,.94) 84%);
}

.hero__side {
  position: absolute; z-index: 2;
  left: 2rem; top: 50%; transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: .64rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(239, 239, 236, .66);
}

.hero__content {
  position: relative; z-index: 2;
  width: var(--container); margin-inline: auto;
  padding-bottom: clamp(2.5rem, 5vh, 4.5rem);
}
.hero__title {
  /* NEIGHBOURHOOD is one unbreakable 9.8em word; the 2.3rem floor made it
     360px wide and the viewport cut it off at or below 374px. min() caps the
     floor by width and changes nothing from 449px up. */
  font-size: min(8.4vw, clamp(2.3rem, 5.2vw, 4.6rem));
  max-width: 19ch;
  margin: 1.2rem 0 1.3rem;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(24, 24, 25, .5);
}
.hero__lede {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  font-weight: 400;
  max-width: 48ch;
  color: #F6F5F2;
  text-shadow: 0 1px 16px rgba(24, 24, 25, .7), 0 0 40px rgba(24, 24, 25, .45);
}
.eyebrow--onphoto { text-shadow: 0 1px 12px rgba(24, 24, 25, .6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.1rem; }

.hero__foot {
  position: relative; z-index: 2;
  width: var(--container); margin-inline: auto;
  display: flex; align-items: center; gap: 3rem;
  border-top: 1px solid var(--hairline-light);
  padding-block: 1.1rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(239, 239, 236, .74);
}
.hero__scrollcue { margin-left: auto; display: inline-flex; align-items: center; gap: .8rem; }
.hero__scrollcue i {
  width: 1px; height: 30px; background: rgba(239,239,236,.7);
  display: inline-block;
  animation: cue 2.1s var(--ease-out) infinite;
  transform-origin: top;
}
@keyframes cue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 46% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Sections ---------- */
.section { position: relative; padding-block: var(--section-pad); overflow: hidden; }
.section--ice { background: var(--ice); }
.section--paper { background: var(--paper); }
.section--dark { background: var(--ink); color: var(--ice); }
.section--dark::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); background-size: 240px;
  opacity: .07; mix-blend-mode: screen;
}
.section--dark .container { position: relative; z-index: 1; }

.ghost-numeral::after, .footer__ghost::after { content: attr(data-ghost); }
.ghost-numeral {
  position: absolute; top: -.06em; left: -.03em;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(12rem, 30vw, 26rem);
  line-height: 1; letter-spacing: -.01em;
  color: rgba(47, 47, 48, .045);
  pointer-events: none; user-select: none;
}
.ghost-numeral--right { left: auto; right: -.03em; color: rgba(227, 228, 225, .05); }

/* The two "130" watermarks are the brand mark itself rather than typed
   numerals. Decorative: empty alt, aria-hidden, lazy, no layout shift (the
   width/height attributes carry the intrinsic ratio). The em-based offsets
   of .ghost-numeral / .footer__ghost still apply; only size and ink opacity
   are set here. */
.ghost-mark { width: clamp(19rem, 42vw, 39rem); height: auto; opacity: .05; }
.footer__ghost.ghost-mark { width: clamp(16rem, 36vw, 33rem); opacity: .04; }
.footer__ghost {
  position: absolute; bottom: -.16em; right: -.02em;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(10rem, 26vw, 22rem);
  line-height: 1;
  color: rgba(227, 228, 225, .035);
  pointer-events: none; user-select: none;
}

/* ---------- 01 The building ---------- */
.building__grid {
  display: grid; grid-template-columns: 5fr 6fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.building__copy h2 { max-width: 16ch; margin-bottom: 1.5rem; }
.building__copy p + p { margin-top: 1rem; }

.building__media { position: relative; margin-right: calc(50% - 50vw); }
.building__media img { width: 100%; height: 100%; object-fit: cover; }

.badge-card {
  position: absolute; left: -1px; bottom: -2rem;
  max-width: 310px;
  background: var(--copper); color: var(--ice);
  padding: 1.5rem 1.7rem 1.6rem;
  box-shadow: 0 24px 48px -24px rgba(47, 47, 48, .5);
}
.badge-card__num {
  display: block;
  font-family: var(--font-display); font-weight: 300;
  font-size: 2.2rem; line-height: 1; letter-spacing: .04em;
  border-bottom: 1px solid var(--hairline-light);
  padding-bottom: .5rem; margin-bottom: .8rem;
}
.badge-card p { font-size: .88rem; line-height: 1.6; color: #fff; }

.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(4rem, 7vw, 6rem);
  border-top: 1px solid var(--hairline-dark);
}
.stats__item { padding: 1.7rem 1.5rem 0; border-left: 1px solid var(--hairline-dark);
  min-width: 0; overflow-wrap: break-word; }   /* "Anticipated" ran off the phone at 200% browser text */
.stats__item:first-child { border-left: 0; padding-left: 0; }
.stat-num {
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(3rem, 5.2vw, 4.6rem); line-height: 1; letter-spacing: .01em;
  color: var(--copper);
}
.stats__item dd {
  font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-60); margin-top: .6rem; line-height: 1.5;
}

/* ==========================================================================
   02 THE BUILDING
   The supplied head-on rendering, made interactive. Two zones only: the street
   floor and levels two to seven. Hotspot geometry lives in the SVG paths in
   index.html, expressed as percentages of the elevation crop, so the overlay
   tracks the image at every size.
   ========================================================================== */
.levels__intro {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 2rem 4rem; align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.levels__intro p { color: rgba(227, 228, 225, .82); }

/* --- the picker: an explicit two-state control, so the interaction is
       obvious before anyone hovers the image --- */
.zonepick {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--hairline-light);
  border: 1px solid var(--hairline-light);
  margin-bottom: 1.2rem;
}
.zonepick__btn {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.4rem 1.05rem;
  background: rgba(16, 16, 17, .55);
  text-align: left;
  border-top: 3px solid transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.zonepick__btn:hover { background: rgba(227, 228, 225, .1); }
.zonepick__btn.is-on {
  background: var(--copper);
  border-top-color: var(--copper-lift);
  box-shadow: inset 0 0 0 1px rgba(239, 239, 236, .22);
}
.zonepick__btn.is-on:hover { background: var(--copper-deep); }
.zonepick__btn.is-on .zonepick__tx b { color: var(--on-photo); }
.zonepick__btn.is-on .zonepick__tx i { color: rgba(239, 239, 236, .82); }
.zonepick__n {
  font-family: var(--font-display); font-weight: 200;
  font-size: 1.6rem; line-height: 1; letter-spacing: .04em;
  color: transparent; -webkit-text-stroke: 1px rgba(227, 228, 225, .5);
  flex: none; transition: color .3s, -webkit-text-stroke-color .3s;
}
.zonepick__btn.is-on .zonepick__n { color: rgba(239, 239, 236, .95); -webkit-text-stroke-color: transparent; }
.zonepick__tx { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.zonepick__tx b {
  font-family: var(--font-display); font-weight: 500;
  font-size: .92rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ice); line-height: 1;
}
.zonepick__tx i {
  font-style: normal; font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(227, 228, 225, .55); line-height: 1.3;
}

.elevation { margin: 0; }
.elevation__scroll { position: relative; }
.elevation__frame {
  position: relative; line-height: 0;
  border: 1px solid var(--hairline-light);
  background: var(--ink-deep);
}
.elevation__frame img { width: 100%; height: auto; display: block; user-select: none; }

.elevation__zones {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
}
/* the fill layer dims whatever is not selected */
.zone {
  fill: rgba(18, 18, 19, .62);
  stroke: none;
  cursor: pointer; outline: none;
  transition: fill .45s var(--ease-out);
}
.zone:hover { fill: rgba(18, 18, 19, .2); }
.zone.is-on { fill: rgba(166, 97, 60, .04); }
.zone.is-on:hover { fill: rgba(166, 97, 60, .1); }
.zone-edge {
  fill: none; pointer-events: none;
  stroke: rgba(227, 228, 225, 0); stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: stroke .4s var(--ease-out), stroke-width .4s var(--ease-out);
}
.zone-edge.is-hot { stroke: rgba(227, 228, 225, .85); stroke-width: 2.5; }
.zone-edge.is-on { stroke: var(--copper-lift); stroke-width: 3.5; }
.zone:focus-visible { fill: rgba(227, 228, 225, .16); }

/* Selection feedback is one continuous pass of light across the chosen zone,
   clipped to its shape. A stroke-dash draw was tried first and read badly: the
   polygon is scaled non-uniformly, so the outline crawled along the stepped
   parapet and whipped along the long edges. A wipe has constant velocity. */
.sweep { pointer-events: none; opacity: 0; }
@keyframes zoneSweep {
  0%   { opacity: 0; transform: translateX(0); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(152px); }
}
.sweep.is-run { animation: zoneSweep 1.05s linear; }

/* labels are real buttons now */
.elevation__tag {
  position: absolute; z-index: 2;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: baseline; gap: .55em;
  white-space: nowrap; cursor: pointer;
  /* real buttons on the elevation: at .72em they were 22px tall, under the
     24px floor in WCAG 2.2 SC 2.5.8 */
  padding: .95em 1.1em .8em;
  min-height: 24px; box-sizing: border-box;
  background: rgba(28, 28, 29, .82);
  border: 1px solid rgba(227, 228, 225, .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(227, 228, 225, .78); line-height: 1;
  transition: background .35s, border-color .35s, color .35s, box-shadow .35s, transform .35s var(--ease-out);
}
.elevation__tag b {
  font-family: var(--font-display); font-weight: 600;
  font-size: .78rem; letter-spacing: .1em; color: var(--ice);
}
.elevation__tag:hover {
  transform: translate(-50%, -50%) scale(1.06);
  border-color: var(--ice); color: var(--ice);
  background: rgba(28, 28, 29, .94);
}
.elevation__tag.is-on {
  background: var(--copper); border-color: var(--copper-lift); color: rgba(239, 239, 236, .95);
  box-shadow: 0 12px 34px -14px rgba(0, 0, 0, .8);
}
.elevation__tag.is-on b { color: var(--on-photo); }
.elevation__tag--homes  { left: 50%; top: 40%; }
.elevation__tag--street { left: 50%; top: 85.5%; }

/* a one-shot nudge so a first-time visitor knows the image is live */
@keyframes tagNudge {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.09); }
}
.elevation__frame.is-idle .elevation__tag { animation: tagNudge 1.5s var(--ease-out) 2; }

.elevation__caption {
  display: flex; flex-direction: column; align-items: flex-end; gap: .4rem;
  margin-top: .9rem;
  font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(227, 228, 225, .66);
  text-align: right;
}

.levels__panel {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 2px solid var(--copper);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  position: relative;
}
.levels__panel::before {
  content: ''; position: absolute; top: -2px; left: 0; height: 2px;
  width: 100%; background: var(--copper-lift);
  transform-origin: left; animation: railWipe .7s var(--ease-out);
}
@keyframes railWipe { from { transform: scaleX(0); } }
.levels__swap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
  animation: swapIn .5s var(--ease-out);
}
@keyframes swapIn { from { opacity: 0; transform: translateY(10px); } }
.levels__eyebrow {
  display: flex; align-items: baseline; gap: .8rem;
  font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: #D08F66;   /* copper-lift is 3.95:1 on ink at this size; this is 4.97:1 */
  margin-bottom: 1rem;
}
.levels__eyebrow b {
  font-family: var(--font-display); font-weight: 200;
  font-size: 2.4rem; line-height: .9; letter-spacing: .03em;
  color: transparent; -webkit-text-stroke: 1px rgba(227, 228, 225, .48);
}
.levels__swap h3 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); margin-bottom: .9rem; max-width: 20ch; }
.levels__swap > div > p { color: rgba(227, 228, 225, .8); font-size: .98rem; }
.levels__spec {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.6rem;
  border-top: 1px solid var(--hairline-light);
}
.levels__spec div { padding: .9rem 0; border-bottom: 1px solid var(--hairline-light); }
.levels__spec dt {
  font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(227, 228, 225, .66);
}
.levels__spec dd {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.02rem; letter-spacing: .03em; color: var(--ice); margin-top: .25rem;
}

/* ---------- 01 media overlay card ---------- */
.badge-card {
  position: absolute; left: -1px; bottom: -2.2rem;
  max-width: 360px;
  background: var(--copper); color: var(--ice);
  padding: 1.6rem 1.8rem 1.7rem;
  box-shadow: 0 26px 52px -26px rgba(47, 47, 48, .55);
}
.badge-card__num {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.55rem; line-height: 1.1; letter-spacing: .05em;
  border-bottom: 1px solid rgba(227, 228, 225, .34);
  padding-bottom: .7rem; margin-bottom: .9rem;
}
.badge-card p { font-size: .92rem; line-height: 1.65; color: #fff; }

/* ---------- 03 Amenities ----------
   A solid copper anchor block carrying what comes with the home, against a
   matrix of building amenities. Earlier passes were a card grid (orphan cell,
   ragged heights) and then two hairline lists (read as a document). This has
   real mass on one side and a precise grid on the other.
   Icon language matches the 1811 John Brebeuf build: 24px box, 1.7 stroke. */
.living__intro {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 1.5rem 4rem; align-items: end;
  margin-bottom: clamp(2.4rem, 4.5vw, 3.6rem);
}

.amen__grid {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(1.6rem, 3vw, 2.8rem);
  align-items: stretch;
}

/* --- the copper block --- */
.amen__col { display: flex; flex-direction: column; }
.amen__panel {
  flex: 1;
  background: var(--copper); color: var(--ice);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex; flex-direction: column;
  box-shadow: 0 30px 60px -34px rgba(47, 47, 48, .6);
}
.amen__panel h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--on-photo);
  margin: 0 0 1.6rem;
  max-width: 15ch;
}
.amen__panel-list { list-style: none; margin-top: auto; }
.amen__panel-list li {
  display: flex; align-items: center; gap: 1rem;
  padding: .95rem 0;
  border-top: 1px solid rgba(239, 239, 236, .26);
  font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #fff;
}
.amen__panel-list .feat__ic { color: var(--ice); opacity: .95; }

/* --- the tile matrix --- */
.amen__side-lb {
  display: flex; align-items: center; gap: 1rem;
  font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--copper-deep);
  margin-bottom: 1.1rem;
}
.amen__side-lb { max-width: none; }   /* p{max-width:62ch} was cutting the rule 255-297px short */
.amen__side-lb span { flex: none; }
.amen__side-lb::after { content: ''; flex: 1; height: 1px; background: rgba(166, 97, 60, .32); }

.amen__tiles {
  list-style: none; flex: 1;
  /* a plain 1fr track will not shrink below its content, so the longest tile
     label widened its own column and left the matrix uneven */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--hairline-dark);
  border-left: 1px solid var(--hairline-dark);
}
.amen__tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem;
  min-height: 132px;
  padding: 1.15rem 1.1rem 1.2rem;
  border-right: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  background: transparent;
}
.amen__tile-lb {
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.45; color: var(--ink);
}

.feat__ic {
  flex: none; display: inline-flex;
  width: 30px; height: 30px;
  color: var(--copper);
}
.feat__ic svg { width: 100%; height: 100%; display: block; }

/* ---------- 04 Gallery ---------- */
.gallery { padding-bottom: clamp(3rem, 6vw, 5rem); }
.gallery__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.gallery__hint {
  font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(227, 228, 225, .68);
  display: flex; align-items: center; gap: .7rem; flex: none;
}
/* flex:none on the hint made the heading give way instead: at 320px it broke
   to one word per line and the hint still ran off the edge. Below 700px they stack. */
@media (max-width: 700px) {
  .gallery__head { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .gallery__hint { order: 2; }
}

.gallery__track {
  display: flex; gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-inline: max(calc((100vw - 1200px) / 2), 4vw);
  padding-bottom: .5rem;
  scrollbar-width: none;
  cursor: grab;
  position: relative; z-index: 1;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery__track.is-dragging .gallery__card { pointer-events: none; }

.gallery__card {
  flex: none;
  scroll-snap-align: center;
  position: relative;
  cursor: pointer;
}
.gallery__card img {
  height: clamp(300px, 46vh, 430px);
  width: auto; max-width: 86vw;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  user-select: none;
}
.gallery__card--wide img { aspect-ratio: 1.85 / 1; }
.gallery__card figcaption {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-top: .8rem; margin-top: .1rem;
  border-top: 1px solid var(--hairline-light);
  font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(227, 228, 225, .78);
}
.gallery__count { font-family: var(--font-display); font-weight: 300; font-size: .9rem; letter-spacing: .14em; color: rgba(227,228,225,.66); }
.gallery__expand {
  position: absolute; top: .9rem; right: .9rem;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: rgba(35, 35, 36, .72); color: var(--ice);
  font-size: 1.2rem;
  opacity: 0; transition: opacity .3s, background .3s;
  backdrop-filter: blur(4px);
}
.gallery__card:hover .gallery__expand, .gallery__expand:focus-visible { opacity: 1; }
.gallery__expand:hover { background: var(--copper); }
@media (hover: none) { .gallery__expand { opacity: 1; } }

/* the last card in the track is a conversion card, not a photo */
.gallery__card--tease {
  width: min(420px, 86vw);
  /* min-height, not height: at 280-320px the copy outgrew the card */
  min-height: clamp(300px, 46vh, 430px);
  display: flex; flex-direction: column; justify-content: center;
  gap: 1rem; padding: 2rem;
  background: var(--copper); color: var(--on-photo);
  cursor: default;
}
.gallery__card--tease h3 { font-size: 1.7rem; }
.gallery__card--tease p { font-size: .9rem; color: #fff; }
.gallery__card--tease .btn { align-self: flex-start; background: var(--ink); color: var(--ice); }
.gallery__card--tease .btn:hover { background: var(--ink-deep); }

.gallery__stage { position: relative; }
.gallery__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  font-size: 1.3rem; color: var(--ice);
  background: rgba(40, 39, 38, .78);
  border: 1px solid rgba(227, 228, 225, .35);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
  transition: background .3s, border-color .3s, opacity .35s, transform .35s;
}
.gallery__arrow:hover { background: var(--copper); border-color: var(--copper); }
.gallery__arrow--prev { left: clamp(.9rem, 2.5vw, 2.2rem); }
.gallery__arrow--next { right: clamp(.9rem, 2.5vw, 2.2rem); }
.gallery__arrow.is-hidden { opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.85); }

.gallery__progress {
  width: var(--container); margin: 2.2rem auto 0;
  height: 2px; background: rgba(227, 228, 225, .18);
  position: relative; z-index: 1;
}
.gallery__progress i {
  display: block; height: 100%; width: 10%;
  background: var(--copper-lift);
  transition: width .15s linear;
}

/* ---------- 05 Neighbourhood ---------- */
.neighborhood__grid {
  display: grid; grid-template-columns: 7fr 4fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: end;
}
.neighborhood__aside {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1.4rem;
  border-left: 1px solid var(--hairline-dark);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: .4rem;
}
/* grid children default to min-width:auto, so the nbsp in "walking speed."
   pushed this column past the viewport and clipped the copy at 280px */
.neighborhood__grid > * { min-width: 0; }
.neighborhood__copy h2 { margin-bottom: 1.3rem; }
.neighborhood__copy p + p { margin-top: 1rem; }

.neighborhood__address {
  font-style: normal;
  padding-left: 1.2rem;
  border-left: 3px solid var(--copper);
  line-height: 1.6;
}
.neighborhood__address strong {
  font-family: var(--font-display); font-weight: 500; font-size: 1.3rem;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- interactive 3D neighbourhood map ---------- */
#sb-map-root {
  position: relative; width: 100%;
  min-height: 340px;
  height: 660px; max-height: 84vh;
  overflow: hidden; isolation: isolate;
  background: #262524;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  box-shadow: 0 40px 90px -40px rgba(35, 35, 36, .55);
}
#sb-map-root * { box-sizing: border-box; }
.sb-mapwrap { position: absolute; inset: 0; z-index: 1; }
#sb-map { position: absolute; inset: 0; }
#sb-map canvas { outline: none; }

.sb-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(120% 90% at 60% 40%, transparent 55%, rgba(24, 24, 25, .45) 100%); }
.sb-grain { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .05;
  background-image: var(--grain); background-size: 240px; }

.sb-panel { position: absolute; z-index: 5; top: 18px; left: 18px; bottom: 18px; width: 348px;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(227, 228, 225, .94);
  -webkit-backdrop-filter: blur(22px) saturate(1.05); backdrop-filter: blur(22px) saturate(1.05);
  border: 1px solid rgba(47, 47, 48, .1);
  border-top: 3px solid var(--copper);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateX(-14px);
  transition: opacity .45s ease, transform .45s ease; }
.sb-ready .sb-panel { opacity: 1; transform: none; }

.sb-head { padding: 18px 18px 10px; }
.sb-title { margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 1.35rem; line-height: 1.1; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); }
.sb-sub { margin: 5px 0 0; font-size: 11.5px; line-height: 1.4; color: #565C5B; }

.sb-search { position: relative; margin: 4px 16px 10px; }
/* direct child only — this styles the magnifier. Unscoped it also captured the
   clear button's X (a grandchild) and absolutely positioned it 11px from the
   left, which is why the X sat off-centre inside its own hover circle. */
.sb-search > svg { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px;
  transform: translateY(-50%); color: #565C5B; pointer-events: none; }
.sb-search input { width: 100%; height: 38px; padding: 0 12px 0 34px;
  border: 1px solid rgba(47, 47, 48, .16); background: rgba(255, 255, 255, .62);
  color: var(--ink); font: inherit; font-size: 13px; outline: none;
  transition: border-color .2s, background .2s; }
.sb-search input::placeholder { color: #6E7472; }
.sb-search input:focus { border-color: var(--copper); background: rgba(255, 255, 255, .85); }
.sb-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* explicit clear control: the native one is suppressed above and never showed
   on non-WebKit anyway, so there was no way to empty the field but backspace */
.sb-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; border: 0; background: none; color: #565C5B; cursor: pointer;
  border-radius: 50%; font: inherit; line-height: 0; -webkit-appearance: none; appearance: none;
  transition: color .2s, background .2s; }
/* the hidden attribute sets display:none in the UA sheet, but ANY author
   display declaration beats it — without this the X showed on an empty field */
.sb-clear[hidden] { display: none; }
.sb-clear svg { width: 13px; height: 13px; display: block; }
.sb-clear:hover { color: var(--ink); background: rgba(47, 47, 48, .08); }
.sb-clear:focus-visible { outline: 2px solid var(--copper); outline-offset: 1px; }
.sb-search input { padding-right: 34px; }

.sb-chipswrap { position: relative; }
.sb-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; scrollbar-width: none; }
.sb-chips::-webkit-scrollbar { display: none; }
.sb-chip-arrow {
  position: absolute; top: calc(50% - 6px); transform: translateY(-50%); z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .8rem; color: var(--ink);
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(47, 47, 48, .18);
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .25);
  cursor: pointer; transition: opacity .3s, background .2s;
}
.sb-chip-arrow:hover { background: #fff; }
.sb-chip-arrow--prev { left: 8px; }
.sb-chip-arrow--next { right: 8px; }
.sb-chip-arrow.is-hidden { opacity: 0; pointer-events: none; }
.sb-chip { display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 10px;
  border-radius: 999px; border: 1px solid rgba(47, 47, 48, .18); background: rgba(255, 255, 255, .4);
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-60); cursor: pointer; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s; }
.sb-chip:hover { background: rgba(255, 255, 255, .8); }
.sb-chip.is-on { background: var(--copper); border-color: var(--copper); color: #fff; }
.sb-chip-ic { display: inline-flex; width: 12px; height: 12px; }
.sb-chip-ic svg { width: 100%; height: 100%; }

.sb-list { flex: 1; overflow-y: auto; padding: 0 8px 4px; scrollbar-width: thin; }
.sb-list::-webkit-scrollbar { width: 6px; }
.sb-list::-webkit-scrollbar-thumb { background: rgba(47, 47, 48, .2); }
.sb-item { position: relative; width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; text-align: left; background: none; border: 0; cursor: pointer;
  color: var(--ink); transition: background .18s; }
.sb-item:hover { background: rgba(47, 47, 48, .05); }
.sb-item.is-active { background: rgba(166, 97, 60, .12); }
.sb-item.is-active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; background: var(--copper); }
.sb-item-ic { flex: 0 0 auto; width: 32px; height: 32px;
  display: grid; place-items: center; background: rgba(47, 47, 48, .07);
  border: 1px solid rgba(47, 47, 48, .1); color: var(--ink); transition: background .18s, color .18s; }
.sb-item-ic svg { width: 15px; height: 15px; }
.sb-item.is-active .sb-item-ic { background: var(--copper); border-color: var(--copper); color: var(--ice); }
.sb-item-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-item-nm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-item-sub { font-size: 10.5px; color: #565C5B; }
.sb-item-min { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--ink); background: rgba(166, 97, 60, .12);
  border: 1px solid rgba(166, 97, 60, .35); padding: 4px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums; }
.sb-item-min svg { width: 13px; height: 13px; color: var(--copper); }
.sb-item.is-active .sb-item-min { background: var(--copper); border-color: var(--copper); color: #fff; }
.sb-item.is-active .sb-item-min svg { color: var(--ice); }
.sb-empty { padding: 22px 12px; font-size: 12.5px; color: #565C5B; text-align: center; }
.sb-count { padding: 10px 18px 13px; font-size: 10.5px; letter-spacing: .03em;
  color: #565C5B; border-top: 1px solid rgba(47, 47, 48, .09); }

/* POI pin markers */
.sb-poi { z-index: 1; position: relative; width: 30px; height: 42px; padding: 0; border: 0;
  background: transparent; cursor: pointer;
  transform: scale(var(--sb-s, 1)); transform-origin: 50% 100%;
  transition: transform .2s ease, filter .2s ease; }
.sb-poi-pin { position: absolute; inset: 0; display: block; }
.sb-poi-pin svg { width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.sb-pb { fill: #A6613C; }
.sb-pc { fill: #2F2F30; }
.sb-poi:hover, .sb-poi.is-hot { transform: scale(calc(var(--sb-s, 1) * 1.14)) translateY(-2px); }
.sb-poi.is-active { transform: scale(calc(var(--sb-s, 1) * 1.2)) translateY(-3px); }
.sb-poi.is-active .sb-pb { fill: #C07B53; }
.sb-poi.is-active .sb-poi-pin svg { filter: drop-shadow(0 4px 10px rgba(192, 123, 83, .6)); }
.sb-poi-ring { position: absolute; left: 50%; bottom: -4px; width: 16px; height: 6px;
  transform: translateX(-50%); border-radius: 50%; background: rgba(192, 123, 83, .55);
  opacity: 0; pointer-events: none; }
.sb-poi.is-active .sb-poi-ring { animation: sbRing 1.6s ease-out infinite; }
@keyframes sbRing {
  0% { opacity: .7; transform: translateX(-50%) scale(.6); }
  100% { opacity: 0; transform: translateX(-50%) scale(2.4); } }

/* hero marker */
.sb-hero-mk { z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; opacity: 0; transform: translateY(8px);
  transition: opacity .9s ease, transform .9s ease; }
.sb-hero-in .sb-hero-mk { opacity: 1; transform: none; }
.sb-hero-pin img { display: block; width: 46px; height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55)); }
.sb-hero-lb { display: block; padding: 9px 13px 8px;
  background: rgba(47, 47, 48, .78); border: 1px solid rgba(227, 228, 225, .24);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .55); }
.sb-hero-lb img { display: block; width: 108px; height: auto; }

/* popup */
.sb-pop { z-index: 3; }
.sb-pop .maplibregl-popup-content { padding: 0; overflow: hidden;
  background: rgba(40, 39, 38, .93); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(227, 228, 225, .14); box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .65);
  font-family: var(--font-body); border-radius: 0; }
.sb-pop .maplibregl-popup-tip { border-top-color: rgba(40, 39, 38, .93);
  border-bottom-color: rgba(40, 39, 38, .93); }
.sb-pop .maplibregl-popup-close-button { color: #B9BDB9; font-size: 17px; right: 6px; top: 4px; background: none; }
.sb-pop .maplibregl-popup-close-button:hover { color: var(--ice); background: none; }
.sb-pop-in { padding: 13px 16px 12px; }
.sb-pop-nm { margin: 0 14px 3px 0; font-size: 14.5px; font-weight: 600; color: var(--ice); }
.sb-pop-sub { margin: 0; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8F918E; }
.sb-pop-row { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.sb-pop-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #B9BDB9; white-space: nowrap; }
.sb-pop-stat svg { width: 13px; height: 13px; color: #C07B53; }
.sb-pop-stat b { color: var(--ice); font-variant-numeric: tabular-nums; }
.sb-pop-dist { color: #9BA09C; font-weight: 600; }

/* controls */
.sb-ctrl { position: absolute; z-index: 4; right: 14px; bottom: 26px; display: flex;
  flex-direction: column; gap: 6px; }
.sb-ctrl button { width: 36px; height: 36px; border: 1px solid rgba(227, 228, 225, .16);
  background: rgba(40, 39, 38, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ice); font-size: 16px; font-family: var(--font-body); font-weight: 600;
  cursor: pointer; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.sb-ctrl button:hover { background: rgba(166, 97, 60, .8); border-color: rgba(227, 228, 225, .3); }
.sb-ctrl button[data-act="tilt"] { font-size: 12px; letter-spacing: .04em; }
.sb-ctrl button[data-act="rotl"], .sb-ctrl button[data-act="rotr"] { font-size: 15px; }

/* MapLibre's cooperative-gesture hint; its default is Helvetica on flat black */
#sb-map-root .maplibregl-cooperative-gesture-screen {
  background: rgba(24, 24, 25, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  font-family: var(--font-display); font-size: .95rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ice);
  text-align: center;
}
#sb-map-root .maplibregl-ctrl-attrib { background: rgba(38, 37, 36, .7); color: #85898B; font-size: 9.5px; }
#sb-map-root .maplibregl-ctrl-attrib a { color: #9BA09C; }
.sb-fallback { display: grid; place-items: center; min-height: 320px;
  background: linear-gradient(160deg, #2F2F30, #A6613C); }
.sb-fb { text-align: center; padding: 40px; }
.sb-fb-t { font-family: var(--font-display); font-weight: 400; font-size: 22px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ice); margin: 0 0 8px; }
.sb-fb-m { color: rgba(227, 228, 225, .75); font-size: 14px; margin: 0; }

@media (max-width: 919px) {
  #sb-map-root { height: auto; max-height: none; min-height: 340px; }
  /* with JS the panel + canvas always boot to ~1040px on phones; reserving it
     up front means the sections below never shift when the map arrives */
  html.js #sb-map-root { min-height: 1020px; }
  .sb-mapwrap { position: relative; height: 440px; }
  /* below the map on phones, so it rises rather than slides in from the left */
  .sb-panel { position: relative; inset: auto; width: 100%; max-height: none;
    border-left: 0; border-right: 0; border-bottom: 0;
    transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
  .sb-ready .sb-panel { transform: none; }
  .sb-list { flex: none; max-height: 48vh; min-height: 320px; }
  .sb-chips { flex-wrap: nowrap; overflow-x: auto; padding: 0 42px 12px; scroll-behavior: smooth;
    /* the scroll arrows sit on the row; without this a chip sliding under one
       is chopped by an opaque circle instead of fading */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%); }
  .sb-chip { flex: none; }
  .sb-ctrl { bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-panel, .sb-hero-mk, .sb-poi { transition: none; }
  .sb-poi.is-active .sb-poi-ring { animation: none; opacity: .5; }
}

/* amenities (SEO content) */
.amenities {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 3rem;
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  border-top: 1px solid var(--hairline-dark);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.amenities__col h3 {
  font-size: 1.1rem; font-weight: 500; letter-spacing: .1em;
  color: var(--ink);
  margin-bottom: 1rem;
}
.amenities__col ul { list-style: none; }
.amenities__col li {
  font-size: .9rem; line-height: 1.55;
  color: var(--ink-60);
  padding: .5rem 0 .5rem 1.1rem;
  position: relative;
}
.amenities__col li::before {
  content: '';
  position: absolute; left: 0; top: 1em;
  width: 5px; height: 5px;
  background: var(--copper);
}
/* Routed walk time carried by each neighbourhood bullet. Same copper-tint pill
   as the map sidebar's .sb-item-min, retuned for the ice ground: --ink on a 12%
   copper wash computes to 9.15:1, well clear of AA. line-height 1 with 2px
   vertical padding keeps the pill shorter than the .9rem/1.55 line box, so the
   ::before copper square on .amenities__col li does not move. */
.mins {
  display: inline-flex; align-items: center;
  margin-left: .45rem;
  padding: 2px 7px;
  border: 1px solid rgba(166, 97, 60, .35);
  border-radius: 999px;
  background: rgba(166, 97, 60, .12);
  color: var(--ink);
  font-size: .68rem; font-weight: 700; line-height: 1; letter-spacing: .04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- 06 FAQ ---------- */
.faq__grid {
  display: grid; grid-template-columns: 4fr 8fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.faq__list { border-bottom: 1px solid var(--hairline-dark); }
.faq__item { border-top: 1px solid var(--hairline-dark); }
.faq__item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1.25rem 0;
  font-weight: 600; font-size: 1rem;
  cursor: pointer;
  transition: color .3s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--copper-deep); }
.faq__icon {
  font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; line-height: 1;
  color: var(--copper);
  transition: transform .35s var(--ease-out);
  flex: none;
}
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__item p {
  padding: 0 0 1.5rem;
  font-size: .96rem; color: var(--ink-60);
  max-width: 66ch;
}
.faq__item a { color: var(--copper-deep); }

/* ---------- CTA finale ---------- */
.cta {
  position: relative;
  background: var(--ink-deep); color: var(--on-photo);
  text-align: center;
  padding-block: clamp(6rem, 12vw, 10rem);
  overflow: hidden;
}
.cta__media, .cta__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 60%;
}
.cta__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(90% 80% at 50% 100%, rgba(166, 97, 60, .5), transparent 70%),
    rgba(35, 35, 36, .8);
}
/* minmax(0,1fr): the nowrap button's 298px min-content set the column width,
   so at 280px the headline and copy laid out wider than the container */
.cta__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center;
  gap: 1.1rem; width: var(--container); margin-inline: auto;
}
.cta h2 { font-size: clamp(1.9rem, 4.3vw, 3.5rem); max-width: 20ch; }
.cta p { max-width: 46ch; color: rgba(239, 239, 236, .86); }
.cta .btn { margin-top: 1rem; }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  background: var(--ink-deep); color: var(--ice);
  padding-top: clamp(4rem, 7vw, 6rem);
  overflow: hidden;
}
.footer .container { position: relative; z-index: 1; }
.footer__grid {
  display: grid;
  /* the fourth column carries JROD + rule + Paragon side by side (~226px); at
     3fr it got 164px at 901px and overflow:hidden sliced the Paragon wordmark
     up to 1098px. Widened, and 4-up now starts at 1080px. */
  grid-template-columns: 3.4fr 2.1fr 2.7fr 3.8fr;
  gap: 3rem;
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}
.footer__brand img { width: 190px; }
.footer__brand p { margin-top: 1.4rem; font-size: .88rem; color: rgba(227, 228, 225, .6); line-height: 1.7; }

.footer__col h3, .footer__paragon h3 {
  font-family: var(--font-body);
  font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(227, 228, 225, .58);
  margin-bottom: 1.2rem;
}
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.footer__col a, .footer__waitlist {
  font-size: .92rem; color: #C0C1BF;  /* == rgba(227,228,225,.82) over the footer ink, 8.7:1 */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
  padding: 0; text-align: left;
}
.footer__col a:hover, .footer__waitlist:hover { color: var(--ice); border-bottom-color: rgba(227,228,225,.5); }

.footer__social { display: flex; gap: .7rem; margin-top: 1rem; }
.footer__social a {
  width: 40px; height: 40px; border: 1px solid rgba(227, 228, 225, .3);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background .3s, border-color .3s, color .3s;
}
.footer__social svg { width: 17px; height: 17px; }
.footer__social a:hover { background: var(--copper); border-color: var(--copper); color: var(--on-photo); }

.footer__owners { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.footer__owners img { opacity: .9; transition: opacity .3s; height: auto; max-width: 100%; }
.footer__owners a { flex: 0 1 auto; min-width: 0; line-height: 0; }
.footer__owners a:hover img { opacity: 1; }
.footer__owners a img { width: 120px; }
/* flex:0 1 auto + min-width:0 + max-width:100%: if the column is ever short
   again the marks scale down together instead of one being cut off */
.footer__owners .footer__jrod { width: 78px; flex: 0 1 auto; min-width: 0; }
.footer__amp { width: 1px; height: 30px; flex: none; background: var(--hairline-light); }
.footer__paragon p { margin-top: 1.1rem; font-size: .82rem; color: rgba(227, 228, 225, .55); line-height: 1.65; }

.footer__bar {
  border-top: 1px solid var(--hairline-light);
  padding-block: 1.5rem 1.7rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2.5rem;
  font-size: .74rem; color: rgba(227, 228, 225, .58);
}
.footer__bar p { max-width: none; }

/* ---------- Waitlist modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: 1rem;
  opacity: 0; visibility: hidden;
  transition: opacity .4s, visibility .4s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(35, 35, 36, .68);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.modal__card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(88svh, 100%);
  overflow-y: auto;
  background: var(--paper);
  border-top: 4px solid var(--copper);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  transform: translateY(16px) scale(.985);
  transition: transform .45s var(--ease-out);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5);
}
.modal.is-open .modal__card { transform: none; }
.modal__close {
  position: absolute; top: 1rem; right: 1rem;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-size: 1rem; color: var(--ink-60);
  text-decoration: none;
  transition: color .3s, transform .3s;
}
.modal__close:hover { color: var(--ink); transform: rotate(90deg); }

.modal__card h3 { font-size: clamp(1.9rem, 4.4vw, 2.5rem); margin: .8rem 0 .7rem; }
.modal__sub { font-size: .92rem; color: var(--ink-60); margin-bottom: 1.7rem; }

.field { margin-bottom: 1.25rem; }
.field label, .field legend {
  display: block;
  font-size: .64rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: .35rem;
}
.field__optional { opacity: .55; letter-spacing: .1em; text-transform: none; font-weight: 500; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"] {
  width: 100%;
  font: inherit; color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 2px solid rgba(47, 47, 48, .28);
  border-radius: 0;
  padding: .55em 0;
  transition: border-color .3s;
}
.field input:focus { outline: none; border-bottom-color: var(--copper); }
.field input.is-invalid { border-bottom-color: #8C3B2E; }

.field--radios { border: 0; margin-top: 1.5rem; }
.radio-pills { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .6rem; }
.radio-pills label { cursor: pointer; }
.radio-pills input { position: absolute; opacity: 0; pointer-events: none; }
.radio-pills span {
  display: inline-block;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid rgba(47, 47, 48, .35);
  border-radius: 99px;
  padding: .7em 1.15em .55em;
  transition: background .25s, color .25s, border-color .25s;
}
.radio-pills input:checked + span { background: var(--copper); border-color: var(--copper); color: #fff; }
.radio-pills input:focus-visible + span { outline: 2px solid var(--copper); outline-offset: 2px; }

.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

.modal__status { font-size: .85rem; min-height: 1.4em; margin: .4rem 0 .6rem; color: var(--ink-60);
  overflow-wrap: anywhere; }   /* Mailchimp echoes the address back inside its errors */
.modal__status.is-error { color: #8C3B2E; font-weight: 600; }

.modal__submit { width: 100%; }
.modal__submit[disabled] { opacity: .55; cursor: wait; }
.modal__fineprint { font-size: .74rem; color: var(--ink-60); opacity: .8; margin-top: .9rem; text-align: center; }

.modal__success { text-align: center; padding: 2rem 0 1rem; }
.modal__check { width: 74px; height: 74px; color: var(--copper); margin: 0 auto 1.4rem; }
.modal__check circle { stroke-dasharray: 190; stroke-dashoffset: 190; animation: draw 1s var(--ease-out) forwards; }
.modal__check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s var(--ease-out) .7s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.modal__success h3 { margin-bottom: .6rem; }
.modal__success p { max-width: 40ch; margin: 0 auto 1.6rem; font-size: .92rem; color: var(--ink-60); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; visibility: hidden;
  transition: opacity .35s, visibility .35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(24, 24, 25, .95); }
.lightbox figure { position: relative; z-index: 1; max-width: min(1400px, 92vw); }
.lightbox img { max-height: 80svh; width: auto; max-width: 100%; margin-inline: auto; }
.lightbox figcaption {
  display: flex; justify-content: space-between; gap: 2rem;
  padding-top: .9rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(227, 228, 225, .78);
}
.lightbox__close {
  position: absolute; top: max(1.2rem, env(safe-area-inset-top)); right: 1.4rem; z-index: 2;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  color: var(--ice); font-size: 1.15rem;
  background: rgba(24, 24, 25, .6); backdrop-filter: blur(6px);
  border: 1px solid rgba(227, 228, 225, .6); border-radius: 50%;
  transition: background .3s, transform .3s;
}
.lightbox__close:hover { background: var(--copper); transform: rotate(90deg); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  color: var(--ice); font-size: 1.25rem;
  background: rgba(24, 24, 25, .6); backdrop-filter: blur(6px);
  border: 1px solid rgba(227, 228, 225, .6); border-radius: 50%;
  transition: background .3s, border-color .3s;
}
.lightbox__nav:hover { background: var(--copper); border-color: var(--copper); }
.lightbox__nav--prev { left: clamp(.6rem, 2.5vw, 2.5rem); }
.lightbox__nav--next { right: clamp(.6rem, 2.5vw, 2.5rem); }

/* bottom-anchored arrows suit a phone held upright; sideways (667x375) they
   landed on the figcaption, so below that height they stay at the sides */
@media (max-width: 700px) and (min-height: 560px) {
  .lightbox__nav {
    top: auto; transform: none;
    bottom: max(1.1rem, env(safe-area-inset-bottom));
    width: 46px; height: 46px;
  }
}
@media (max-width: 700px) and (max-height: 559px) {
  .lightbox__nav { width: 42px; height: 42px; }
}

/* ---------- Rendering work ----------
   Below-fold sections are skipped until the viewport approaches them. Contents
   stay in the DOM, the accessibility tree and anchor navigation; only layout
   and paint are deferred. "auto <estimate>" keeps anchor jumps accurate, and
   the browser remembers the real size after first render. */
/* contain-intrinsic-size reserves the CONTENT box; section padding stacks on
   top of it. These are measured rendered content heights (desktop 1350px /
   phone 412px); the auto keyword swaps in the real size after first render. */
.amen-sec { content-visibility: auto; contain-intrinsic-size: auto 760px; }
.gallery { content-visibility: auto; contain-intrinsic-size: auto 760px; }
.faq { content-visibility: auto; contain-intrinsic-size: auto 700px; }
.neighborhood { content-visibility: auto; contain-intrinsic-size: auto 1930px; }
.cta { content-visibility: auto; contain-intrinsic-size: auto 375px; }
@media (max-width: 919px) {
  .amen-sec { contain-intrinsic-size: auto 1340px; }
  .gallery { contain-intrinsic-size: auto 580px; }
  .neighborhood { contain-intrinsic-size: auto 3375px; }
  .faq { contain-intrinsic-size: auto 790px; }
  .cta { contain-intrinsic-size: auto 300px; }
}
/* the footer is the last element on the page: deferring its rendering saves
   nothing measurable and gave audit tooling one more edge to trip on */

/* ---------- Script-failure fallbacks ----------
   The waitlist dialog opens via :target, so every "Get first access" link works
   with scripting disabled OR when main.js never arrives (blocked, network
   error): the links then perform their native #waitlist navigation. When
   main.js is healthy it intercepts the click, and on a direct /#waitlist load
   it clears the fragment on close, so :target can never hold the dialog open.
   Close links navigate to #top. Controls that can do nothing without JS are
   hidden rather than left dead (the burger too: footer links cover no-JS
   navigation). */
.modal:target { opacity: 1; visibility: visible; }
.modal:target .modal__card { transform: none; }
html.no-js .gallery__arrow,
html.no-js .gallery__expand,
html.no-js .nav__burger,
html.no-js .zonepick { display: none; }

/* ---------- Forced colors (Windows High Contrast) ---------- */
@media (forced-colors: active) {
  .btn, .zonepick__btn, .elevation__tag { border: 1px solid ButtonText; }
  .radio-pills span { border: 1px solid ButtonText; }
  .radio-pills input:checked + span { outline: 3px solid Highlight; outline-offset: 1px; }
  .zone.is-on { fill: Highlight; opacity: .35; }

  /* forced colours repaint every background with Canvas, so the burger's bars
     vanished and there was no way to open the menu below 1080px. All three
     states, or .nav--scrolled (0,2,1) wins and hides them again on scroll. */
  .nav__burger span,
  .nav--scrolled .nav__burger span,
  body.menu-open .nav__burger span { background: CanvasText; }

  /* set at 3-5% ink; forced colours make them opaque CanvasText, so a giant
     "01" / "WB" / "130" printed over the copy */
  .ghost-numeral, .ghost-mark, .footer__ghost { display: none; }

  /* track and fill both collapse to the same forced colour */
  .gallery__progress { background: Canvas; border: 1px solid CanvasText; }
  .gallery__progress i { background: Highlight; }
}

/* ---------- Print ---------- */
@media print {
  .nav, .mobile-menu, .modal, .lightbox, .skip-link, .hero__scrollcue,
  .gallery__arrow, .gallery__expand, .gallery__progress, .zonepick,
  .elevation__tag, #sb-map-root, .cta,
  .ghost-numeral, .footer__ghost { display: none !important; }
  /* the hero and the copper panels were outside the reset, so sheet 1 came out
     a solid dark block */
  .section, .section--dark, .footer, body,
  .hero, .amen__panel, .levels__panel, .badge-card { background: #fff !important; color: #000 !important; }
  .hero__media, .hero__scrim, .cta__media { display: none !important; }
  /* the hero reserved a screen for a photo that is not printed, and its type is
     coloured for that photo: white on white */
  .hero { min-height: 0 !important; padding-top: 0 !important; }
  .hero .eyebrow, .hero__lede, .hero__title, .hero__foot,
  .hero .btn--ghost { color: #000 !important; text-shadow: none !important; }
  .hero .btn--ghost { border-color: #000 !important; }
  .amen-sec, .gallery, .neighborhood, .faq { content-visibility: visible; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* a horizontal scroller on screen: on paper only card 1 of 4 would appear */
  .gallery__track { display: block !important; overflow: visible !important; }
  .gallery__card { width: auto !important; max-width: 100% !important; break-inside: avoid; margin-bottom: 1rem; }
  .gallery__card--tease { display: none !important; }
  /* FAQ <details> are opened by main.js on beforeprint; CSS cannot do it */
  main a[href^="https://"]::after {
    content: " (" attr(href) ")"; font-size: .78em;
    /* the link sits inside uppercase letter-spaced type in places */
    text-transform: none; letter-spacing: normal; word-break: break-all;
  }
}

/* ---------- Reveal animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* .js is set by an inline script before first paint, and .reveals-off by a
     2.5s timer if main.js never arms the observer. Nothing is hidden unless
     something is guaranteed to be able to show it again. */
  html.js:not(.reveals-off) [data-reveal] {
    opacity: 0; transform: translateY(26px);
    transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  }
  html.js [data-reveal].is-inview { opacity: 1; transform: none; }
  html.reveals-off [data-reveal] { opacity: 1 !important; transform: none !important; }

  /* The hero <h1> is the LCP element. It must never sit at opacity 0 waiting
     for JavaScript, so paint it on the first frame and animate transform only. */
  html.js .hero [data-reveal] {
    opacity: 1;
    transform: translateY(18px);
    animation: heroRise .6s var(--ease-out) forwards;
  }
  .hero [data-reveal][data-d="1"] { animation-delay: .05s; }
  .hero [data-reveal][data-d="2"] { animation-delay: .10s; }
  .hero [data-reveal][data-d="3"] { animation-delay: .15s; }
  .hero [data-reveal][data-d="4"] { animation-delay: .20s; }
  html.js .hero [data-reveal].is-inview { transform: none; }
  @keyframes heroRise { to { transform: none; } }
  [data-d="1"] { transition-delay: .1s; }
  [data-d="2"] { transition-delay: .2s; }
  [data-d="3"] { transition-delay: .3s; }
  [data-d="4"] { transition-delay: .4s; }
  [data-d="5"] { transition-delay: .5s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scrollcue i { animation: none; }
  .zone, .elevation__tag { transition: none; }
  .levels__panel::before, .levels__swap { animation: none; }
  .modal__check circle, .modal__check path { animation-duration: 0s; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1399px), (max-height: 799px) {
  /* no clear space for the vertical caption until ~1400px (at 1340px it came
     within 2.4px of the headline), and it needs ~400px of height for one column */
  .hero__side { display: none; }
}
@media (max-width: 1339px) {
  .elevation__tag { font-size: .58rem; padding: .6em .85em .48em; }
  .elevation__tag b { font-size: .7rem; }
}

/* The link row plus the CTA needs 960px of container on one line, and the
   container is 92vw: the desktop header only fits from 1044px up. At the old
   900px burger breakpoint, 901-1043px wrapped two links onto two lines and
   squeezed the lockup. 1080px leaves 33px of slack for a substitute font. */
/* the four walk-time columns need ~340px to keep a name and its pill on one
   line; at 901px they were 171px, narrower than the 2-up layout one pixel below */
@media (max-width: 1149px) {
  .amenities { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1079px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: block; }
  /* same threshold: the 4-up row cannot hold both owner marks below this
     width. The brand spans the row so the short first column leaves no void. */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav__logo { width: 140px; }

  .hero__foot span:not(.hero__scrollcue) { display: none; }
  .hero__foot { justify-content: flex-end; }

  .building__grid { grid-template-columns: 1fr; }
  .building__media { margin-right: 0; margin-left: 0; }
  .badge-card { position: static; margin-top: 0; max-width: none; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
  .stats__item { border-left: 0; border-top: 1px solid var(--hairline-dark); padding-left: 0; }

  .levels__intro, .living__intro { grid-template-columns: 1fr; }
  .levels__swap { grid-template-columns: 1fr; }
  .amen__grid { grid-template-columns: 1fr; }
  /* eight tiles: only 1, 2, 4 and 8 divide cleanly, so 3-up left an empty
     cell and an open corner in the hairline matrix */
  .amen__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elevation__tag { font-size: .56rem; letter-spacing: .14em; padding: .55em .75em .45em; gap: .4em; }
  .elevation__tag b { font-size: .66rem; }

  .zonepick__btn { padding: .95rem 1.1rem .85rem; }
  /* the whole elevation, edge to edge. A 200vw scroller hid two thirds of the
     building behind a gesture nobody was told about. */
  .elevation { margin-inline: calc(50% - 50vw); }
  .elevation__frame { width: 100%; border-left: 0; border-right: 0; }
  .elevation__caption {
    align-items: flex-start; text-align: left;
    width: var(--container); margin-inline: auto;
  }
  .elevation__tag--homes  { top: 38%; }
  .elevation__tag--street { top: 86%; }


  .neighborhood__grid { grid-template-columns: 1fr; }
  .neighborhood__aside { border-left: 0; padding-left: 0; }
  .faq__grid { grid-template-columns: 1fr; gap: 1.5rem; }

  .gallery__card img { height: clamp(240px, 36vh, 330px); }
  .gallery__card--tease { height: auto; min-height: clamp(240px, 36vh, 330px); width: min(340px, 86vw); padding: 1.5rem; }
  .gallery__arrow { width: 42px; height: 42px; font-size: 1.05rem; }

}

@media (max-width: 620px) {
  /* the two zone buttons only need ~260px each; stacking at 900px doubled the
     picker's height for no reason */
  .zonepick { grid-template-columns: 1fr; }
  .elevation__tag--homes { top: 38%; }
}

@media (max-width: 560px) {
  /* the 2-up grid is already set at 900px; only the tile metrics change here */
  .amen__tile { min-height: 126px; padding: 1rem .9rem 1.05rem; gap: 1rem; }
  .amen__tile-lb { font-size: .62rem; letter-spacing: .12em; }
  .amen__panel-list li { font-size: .7rem; letter-spacing: .12em; }
  .amenities { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .stats__item { padding: 1.2rem .9rem 0 0; }
  /* a full-width button has nothing to gain from white-space: nowrap, and at a
     large browser font size the nowrap label ran off the screen */
  .hero__cta .btn { width: 100%; white-space: normal; }
}