/* =============================================================================
   Charlotte Square — Design System
   -----------------------------------------------------------------------------
   Order: tokens → base → layout → header/nav → hero → components → sections
          → forms → footer → utilities → motion
   Palette is drawn from the building itself: brick-red panels, steel cladding,
   the limestone podium, and the reclaimed-wood / sage interiors.
   ============================================================================= */

/* ---------- Tokens ---------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Brand palette */
  --brick:      #D2452D;
  --brick-300:  #F08A6A;
  --brick-600:  #B5371F;
  --brick-700:  #8E2A19;
  --brick-100:  #FBE7E2;
  /* Warm charcoals, not blue-blacks: the dark sections should read like dusk on
     brick, not like a screen turned off. */
  --ink:        #1A1613;
  --ink-800:    #241F1A;
  --ink-700:    #322B24;
  --ink-500:    #564E46;
  --steel:      #736C64;
  --stone:      #F5F1E9;
  --stone-200:  #EBE4D6;
  --stone-300:  #DCD3C1;
  --paper:      #FFFFFF;
  /* Supporting hues, all drawn from the building and its block */
  --sage:       #5E7A70;   /* landscaping and the lounge walls */
  --sage-100:   #E3EBE7;
  --sage-900:   #2E473F;
  --sand:       #D2914E;   /* the cedar pergola and the limestone podium */
  --sand-100:   #FAEBD7;
  --sand-700:   #A96A2C;
  --sand-900:   #6E4315;
  --sky:        #5C7F9E;   /* the steel cladding and the sky above it */
  --sky-100:    #E4ECF3;
  --sky-900:    #2A4358;
  /* LEED Gold, kept to the certification badges and the one stat. The text
     gold reads 5.8:1 on white and the light gold 9.5:1 on the ink sections;
     the line gold is for frames and rules, never for text. */
  --gold:         #7D6220;
  --gold-line:    #C4A55A;
  --gold-tint:    #F8F2E2;
  --gold-on-dark: #D9B96A;

  /* Semantic */
  --bg:           var(--stone);
  --bg-elev:      var(--paper);
  --bg-sunken:    var(--stone-200);
  --fg:           var(--ink);
  --fg-muted:     var(--ink-500);
  --fg-subtle:    var(--steel);
  --line:         rgba(18, 19, 22, .12);
  --line-strong:  rgba(18, 19, 22, .28);
  --accent:       var(--brick);
  --accent-hover: var(--brick-600);
  --accent-fg:    #FFFFFF;
  --accent-tint:  var(--brick-100);
  --accent-on-dark: var(--brick-300);
  --ok-bg:        var(--sage-100);
  --ok-fg:        var(--sage-900);
  /* Functional, deliberately not a brand hue, so it can never read as decoration */
  --focus-ring:   #2F6FED;
  --focus:        0 0 0 2px var(--bg-elev), 0 0 0 4px var(--focus-ring);

  /* Type */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: clamp(3rem, 5.6vw + .75rem, 6rem);
  --fs-h1:      clamp(2.5rem, 4.4vw + .75rem, 4.75rem);
  --fs-h2:      clamp(2rem, 2.6vw + .75rem, 3.4rem);
  --fs-h3:      clamp(1.3rem, .9vw + .9rem, 1.7rem);
  --fs-lead:    clamp(1.1rem, .45vw + .95rem, 1.35rem);
  --fs-body:    1.0625rem;
  --fs-small:   .9rem;
  --fs-eyebrow: .76rem;
  --lh-tight:   1.0;
  --lh-snug:    1.15;
  --lh-body:    1.6;

  /* Layout */
  --container: 78rem;
  --narrow:    46rem;
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --section:   clamp(4.5rem, 9vw, 8.5rem);
  --gap:       clamp(1rem, 2vw, 1.75rem);
  --radius:    1.25rem;
  --radius-sm: .75rem;
  --radius-xs: .4rem;
  --pill:      999px;
  --header-h:  4.75rem;
  --shadow:    0 24px 60px -24px rgba(18, 19, 22, .28);
  --shadow-sm: 0 8px 24px -12px rgba(18, 19, 22, .22);
  --ease:      cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          var(--ink);
    --bg-elev:     var(--ink-800);
    --bg-sunken:   #120F0C;
    --fg:          var(--stone);
    --fg-muted:    #BDB4A6;
    --fg-subtle:   #948A7E;
    --line:        rgba(244, 241, 235, .12);
    --line-strong: rgba(244, 241, 235, .3);
    --accent-tint: rgba(210, 69, 45, .2);
    --ok-bg:       rgba(94, 122, 112, .25);
    --ok-fg:       #CFE0D8;
    --shadow:      0 24px 60px -24px rgba(0, 0, 0, .7);
    --shadow-sm:   0 8px 24px -12px rgba(0, 0, 0, .6);
    --focus-ring:  #7FB3FF;
  }
}
:root[data-theme="dark"] {
  --bg:          var(--ink);
  --bg-elev:     var(--ink-800);
  --bg-sunken:   #120F0C;
  --fg:          var(--stone);
  --fg-muted:    #BDB4A6;
  --fg-subtle:   #948A7E;
  --line:        rgba(244, 241, 235, .12);
  --line-strong: rgba(244, 241, 235, .3);
  --accent-tint: rgba(210, 69, 45, .2);
  --ok-bg:       rgba(94, 122, 112, .25);
  --ok-fg:       #CFE0D8;
  --shadow:      0 24px 60px -24px rgba(0, 0, 0, .7);
  --shadow-sm:   0 8px 24px -12px rgba(0, 0, 0, .6);
  --focus-ring:  #7FB3FF;
}

/* ---------- Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: var(--lh-snug);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.03em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.015em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a  { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--brick); color: #fff; }
.accent { color: var(--accent); }
.on-dark .accent, .hero .accent, .section--ink .accent { color: var(--accent-on-dark); }

/* ---------- Layout ---------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { max-width: var(--narrow); }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--flush-top { padding-top: 0; }
.section--sunken { background: var(--bg-sunken); }
.section--elev { background: var(--bg-elev); }
.section--ink {
  background:
    radial-gradient(80% 60% at 88% 0%, rgba(210, 145, 78, .16), transparent 62%),
    radial-gradient(70% 55% at 0% 100%, rgba(94, 122, 112, .16), transparent 60%),
    var(--ink);
  color: var(--stone);
}
.section--ink .lead { color: rgba(244, 241, 235, .72); }
.section--ink .eyebrow { color: var(--accent-on-dark); }
.grid { display: grid; gap: var(--gap); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-media { grid-template-columns: 1.15fr 1fr; }
  .split--flip > :first-child { order: 2; }
}

/* ---------- Typography helpers ---------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.1rem;
}
.eyebrow::before { content: ""; width: .55rem; height: .55rem; background: currentColor; border-radius: 2px; flex: none; }
.lead { font-size: var(--fs-lead); color: var(--fg-muted); max-width: 40rem; line-height: 1.5; }
.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section__head h2 { margin-bottom: .6rem; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
.section__head--center .lead { margin-inline: auto; }
.section__head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2rem; max-width: none; flex-wrap: wrap; }
.section__head--row > div { max-width: 46rem; }
.pull { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.pull em { font-style: normal; color: var(--accent); }
.prose { max-width: 60ch; }
.prose p { color: var(--fg-muted); }
.prose p strong { color: var(--fg); }
.muted { color: var(--fg-muted); }
.small { font-size: var(--fs-small); }

/* ---------- Buttons --------------------------------------------------------- */
.btn {
  --btn-bg: var(--fg); --btn-fg: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.1rem; padding: .8rem 1.5rem; border-radius: var(--pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: .98rem; letter-spacing: -.005em; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { border-radius: var(--pill); }
.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--accent-fg); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; color: inherit; border-color: var(--line-strong); }
.btn--ghost:hover { border-color: currentColor; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--lg { min-height: 3.5rem; padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn--sm { min-height: 2.5rem; padding: .5rem 1.05rem; font-size: .9rem; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.link-arrow { display: inline-flex; gap: .45rem; align-items: center; font-weight: 700; text-decoration: none; padding-block: .2rem; }
.link-arrow::after { content: "→"; transition: transform .25s var(--ease); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Header / navigation --------------------------------------------- */
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--brick); color: #fff; border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 1rem; }

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  display: flex; align-items: center; color: #fff;
  transition: background .35s, color .35s, box-shadow .35s;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.topbar.is-scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  color: var(--fg); box-shadow: 0 1px 0 var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: .7rem; text-decoration: none;
  font-family: var(--font-display); font-weight: 800; font-size: 1.22rem; letter-spacing: -.02em; line-height: 1;
}
.brand__mark { width: 2.15rem; height: 2.15rem; flex: none; }   /* the mark carries its own colour */
.brand__text { display: grid; gap: .12em; min-width: 0; }
.brand__name { white-space: nowrap; }
.brand__name b { font-weight: 500; }
/* The descriptor. Sized in em so it tracks whatever each style does to .brand,
   and set in the body face because the display faces are not built to hold
   letter-spacing at this size. */
.brand__tag {
  font-family: var(--font-body);
  font-size: .46em; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1; white-space: nowrap; opacity: .74;
}
.nav { display: none; gap: 1.9rem; }
.nav a { text-decoration: none; font-weight: 600; font-size: .95rem; position: relative; padding: .45rem 0; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brick);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.topbar__actions { display: none; align-items: center; gap: 1.1rem; }
.topbar__actions .portal { text-decoration: none; font-weight: 600; font-size: .92rem; opacity: .85; display: inline-block; padding-block: .3rem; }
.topbar__actions .portal:hover { opacity: 1; text-decoration: underline; }
.menu-btn {
  display: inline-flex; align-items: center; gap: .6rem; background: transparent; color: inherit;
  border: 1.5px solid currentColor; border-radius: var(--pill); padding: .55rem 1rem;
  font-weight: 700; font-size: .9rem; cursor: pointer;
}
.menu-btn__icon { width: 18px; height: 12px; position: relative; display: block; }
.menu-btn__icon span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; }
.menu-btn__icon span:first-child { top: 0; }
.menu-btn__icon span:last-child { bottom: 0; }
@media (min-width: 1000px) {
  .nav, .topbar__actions { display: flex; }
  .menu-btn { display: none; }
}

.drawer {
  position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--stone);
  display: flex; flex-direction: column; padding: 0 0 var(--gutter);
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .5s var(--ease), opacity .4s, visibility 0s .5s;
  overflow-y: auto;
}
.drawer.is-open { transform: none; opacity: 1; visibility: visible; transition: transform .5s var(--ease), opacity .3s, visibility 0s; }
.drawer__top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; flex: none; }
.drawer__top .brand { color: #fff; }
.drawer__nav { display: flex; flex-direction: column; margin-top: 1.5rem; }
.drawer__nav a {
  font-family: var(--font-display); font-size: clamp(2rem, 8vw, 3.2rem); font-weight: 700; letter-spacing: -.03em;
  text-decoration: none; padding: .5rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1);
  display: flex; justify-content: space-between; align-items: center; color: #fff;
}
.drawer__nav a small { font-family: var(--font-body); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .45; }
.drawer__nav a:hover { color: var(--accent-on-dark); }
.drawer__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; padding-top: 2.5rem; }
.drawer__foot .btn--ghost { border-color: rgba(255, 255, 255, .45); color: #fff; }
.drawer__foot address { font-size: .9rem; opacity: .7; }
body.menu-open { overflow: hidden; }

/* ---------- Hero ------------------------------------------------------------ */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  background: var(--ink); color: #fff; overflow: hidden; isolation: isolate;
}
.hero--short { min-height: min(74svh, 46rem); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media .ph { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18, 19, 22, .42) 0%, rgba(18, 19, 22, .12) 38%, rgba(18, 19, 22, .86) 100%);
}
.hero__inner { position: relative; padding-top: calc(var(--header-h) + 3rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.hero .eyebrow { color: #fff; }
.hero .eyebrow::before { background: var(--brick); }
.hero__title { font-size: var(--fs-display); line-height: .98; letter-spacing: -.035em; max-width: 24ch; margin: 0 0 1.25rem; }
.hero--short .hero__title { font-size: var(--fs-h1); max-width: 16ch; }
.hero__lead { font-size: var(--fs-lead); max-width: 38rem; color: rgba(255, 255, 255, .82); margin: 0 0 2rem; line-height: 1.5; }
.hero__grid { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.5fr 1fr; } }
.hero__aside { display: grid; gap: .5rem; font-size: .95rem; color: rgba(255, 255, 255, .78); justify-items: start; }
.hero__aside a { text-decoration: none; }
.hero__aside a:hover { text-decoration: underline; }
.hero__aside strong { color: #fff; }
@media (min-width: 900px) { .hero__aside { justify-items: end; text-align: right; } }
/* The leasing block reads top to bottom: a status, who to call, when, and
   who manages the building, each on its own line. Names and the number
   never break across two lines. */
.hero__status {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff;
}
.hero__dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: #5CC48D; box-shadow: 0 0 0 .2rem rgba(92, 196, 141, .28); }
.hero__call strong { font-size: 1.08rem; }
.hero__mgmt { font-size: .85rem; }
.hero__mgmt a { white-space: nowrap; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: .2em; }
/* A few slow pulses once the page has settled, then still. */
@keyframes hero-dot { 70%, 100% { box-shadow: 0 0 0 .55rem rgba(92, 196, 141, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .hero__dot { animation: hero-dot 1.6s ease-out 2.2s 3; }
}
.hero .btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.hero .btn--ghost:hover { border-color: #fff; }

/* ---------- Photo placeholders ---------------------------------------------- */
/* A <figure class="ph"> shows art-directed gradient art until a real photo is
   dropped in. The <img> removes itself on error and adds .is-empty, which
   reveals the shot label so the team knows which photo belongs in each slot. */
.ph {
  position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 10;
  background: var(--ph-bg, var(--stone-300)); isolation: isolate; margin: 0;
}
.ph--3x2 { aspect-ratio: 3 / 2; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--4x5 { aspect-ratio: 4 / 5; }
.ph--1x1 { aspect-ratio: 1; }
.ph--21x9 { aspect-ratio: 21 / 9; }
.ph--sq { border-radius: var(--radius-sm); }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ph::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px);
  background-size: 3.25rem 4.25rem;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 88%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 88%);
  transition: opacity .4s;
}
.ph.is-empty::before { opacity: 1; }
.ph--stone::before { background-image: linear-gradient(rgba(0, 0, 0, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .07) 1px, transparent 1px); }
.ph__label {
  position: absolute; left: .85rem; bottom: .85rem; z-index: 2; display: none; align-items: center; gap: .5rem;
  padding: .45rem .8rem .45rem .6rem; border-radius: var(--pill);
  background: rgba(18, 19, 22, .6); color: #fff; font-size: .72rem; letter-spacing: .02em; line-height: 1.2;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); max-width: calc(100% - 1.7rem);
}
.ph.is-empty .ph__label { display: inline-flex; }
.ph__label svg { width: .95rem; height: .95rem; flex: none; }
.ph__label code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; opacity: .85; }
.ph--brick { --ph-bg: radial-gradient(120% 90% at 8% 8%, #EE7A5C 0%, transparent 55%), radial-gradient(80% 70% at 92% 18%, #7A1F12 0%, transparent 62%), radial-gradient(90% 90% at 45% 110%, #B5371F 0%, transparent 62%), linear-gradient(140deg, #D2452D 0%, #8E2A19 100%); }
.ph--stone { --ph-bg: radial-gradient(110% 80% at 10% 0%, #FFFFFF 0%, transparent 55%), radial-gradient(70% 60% at 90% 30%, #C9BFAE 0%, transparent 60%), radial-gradient(80% 80% at 40% 110%, #B9AD97 0%, transparent 60%), linear-gradient(140deg, #EDE7DB, #CBC1B0); }
.ph--ink { --ph-bg: radial-gradient(100% 80% at 15% 10%, #4A4D55 0%, transparent 55%), radial-gradient(70% 60% at 85% 25%, #26282D 0%, transparent 60%), radial-gradient(90% 90% at 50% 115%, #0D0E10 0%, transparent 60%), linear-gradient(140deg, #2E3137, #121316); }
.ph--sage { --ph-bg: radial-gradient(110% 80% at 10% 0%, #9DB5AB 0%, transparent 55%), radial-gradient(70% 60% at 90% 30%, #3F5A51 0%, transparent 60%), radial-gradient(80% 80% at 40% 110%, #2F473F 0%, transparent 60%), linear-gradient(140deg, #6F8C82, #3A544B); }
.ph--dusk { --ph-bg: radial-gradient(110% 80% at 15% 0%, #F08A5D 0%, transparent 50%), radial-gradient(70% 60% at 85% 20%, #D2452D 0%, transparent 60%), radial-gradient(100% 80% at 50% 115%, #121316 0%, transparent 62%), linear-gradient(180deg, #7A2E1F 0%, #1B1D21 100%); }
.ph--wood { --ph-bg: radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, .22), transparent 60%), repeating-linear-gradient(180deg, #6B4A33 0 1.5rem, #8A6547 1.5rem 3rem, #56392A 3rem 4.4rem, #7D5B40 4.4rem 5.9rem, #4E3324 5.9rem 6.8rem); }
.ph--wood::before { display: none; }
.ph--sky { --ph-bg: radial-gradient(100% 70% at 50% 100%, #F4F1EB 0%, transparent 55%), radial-gradient(80% 60% at 20% 0%, #4A7BB5 0%, transparent 60%), linear-gradient(180deg, #1F4E86 0%, #6FA0D6 55%, #CFD9E3 100%); }

.collage { position: relative; }
.collage .ph + .ph {
  position: absolute; width: 44%; right: -4%; bottom: -8%;
  box-shadow: var(--shadow); border: 6px solid var(--bg);
}
@media (max-width: 899px) { .collage { margin-bottom: 3rem; } }
.section--elev .collage .ph + .ph { border-color: var(--bg-elev); }

/* ---------- Stats strip ----------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 1.5rem 1.25rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat:nth-child(2n) { border-right: 0; }
.stat:last-child { border-bottom: 0; border-right: 0; grid-column: 1 / -1; }
@media (min-width: 800px) {
  .stats { grid-template-columns: repeat(5, 1fr); }
  .stat { border-bottom: 0; }
  .stat:nth-child(2n) { border-right: 1px solid var(--line); }
  .stat:last-child { border-right: 0; grid-column: auto; }
}
.stat__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 2.6vw, 2.6rem); letter-spacing: -.03em; line-height: 1; margin-bottom: .4rem; }
/* Units read as units: a real word space, quiet color, never jammed against the figure */
.stat__value small { font-size: .38em; font-weight: 700; color: var(--fg-muted); margin-left: .38em; letter-spacing: .01em; }
.stat__label { font-size: var(--fs-small); color: var(--fg-muted); }

/* ---------- Bento tiles ----------------------------------------------------- */
.bento { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); grid-auto-rows: 10.5rem; grid-auto-flow: dense; }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 12.5rem; } }
.tile {
  position: relative; overflow: hidden; border-radius: var(--radius); color: #fff; text-decoration: none;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; isolation: isolate; background: var(--ink);
}
.tile .ph { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; border-radius: 0; height: 100%; transition: transform .9s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(18, 19, 22, .8)); }
.tile:hover .ph { transform: scale(1.04); }
.tile__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1.4vw, 1.45rem); letter-spacing: -.02em; margin: 0; line-height: 1.15; }
.tile__sub { font-size: .85rem; opacity: .82; margin: .3rem 0 0; }
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile--big { grid-column: span 2; grid-row: span 2; }
.tile--big .tile__title { font-size: clamp(1.5rem, 2.4vw, 2.3rem); }
.tile--solid { background: var(--accent); }
.tile--solid::after { display: none; }
.tile--solid .tile__title { font-size: clamp(1.3rem, 1.8vw, 1.8rem); }
.tile--stone { background: var(--bg-sunken); color: var(--fg); }
.tile--stone::after { display: none; }
.tile--sage { background: linear-gradient(150deg, #6D8C81, var(--sage-900)); }
.tile--sand { background: linear-gradient(150deg, var(--sand), var(--sand-700)); color: #fff; }
.tile--sand::after { display: none; }
.tile--sky { background: linear-gradient(150deg, #6E93B2, var(--sky-900)); color: #fff; }
.tile--sky::after { display: none; }
.tile--sand .tile__icon, .tile--sky .tile__icon { color: #fff; }
.tile--sage::after { display: none; }
.tile__icon { width: 2.2rem; height: 2.2rem; margin-bottom: auto; opacity: .9; }
.tile--stone .tile__icon { color: var(--accent); }

/* ---------- Checklists ------------------------------------------------------ */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 1.5rem; }
.checklist--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .checklist--2 { grid-template-columns: 1fr; } }
.checklist li { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem .1rem; border-bottom: 1px solid var(--line); }
.checklist li::before {
  content: ""; flex: none; width: 1.3rem; height: 1.3rem; margin-top: .15rem; border-radius: 50%; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fff' stroke='none'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' stroke='%23000'/%3E%3C/svg%3E") center / 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fff' stroke='none'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' stroke='%23000'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.checklist li strong { display: block; }
.checklist li span { color: var(--fg-muted); font-size: .95rem; }

/* ---------- Feature columns ------------------------------------------------- */
.feature { display: grid; gap: .6rem; align-content: start; }
.feature__icon { width: 2.6rem; height: 2.6rem; border-radius: .8rem; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); margin-bottom: .4rem; }
/* Rotate the icon tints so a row of features carries the whole palette */
.feature:nth-child(4n + 2) .feature__icon { background: var(--sage-100); color: var(--sage-900); }
.feature:nth-child(4n + 3) .feature__icon { background: var(--sand-100); color: var(--sand-900); }
.feature:nth-child(4n + 4) .feature__icon { background: var(--sky-100); color: var(--sky-900); }
.feature__icon svg { width: 1.3rem; height: 1.3rem; }
.section--ink .feature__icon { background: rgba(255, 255, 255, .08); color: var(--accent-on-dark); }
.section--ink .feature:nth-child(4n + 2) .feature__icon { background: rgba(126, 163, 149, .18); color: #A8CBBC; }
.section--ink .feature:nth-child(4n + 3) .feature__icon { background: rgba(210, 145, 78, .18); color: #EBB77C; }
.section--ink .feature:nth-child(4n + 4) .feature__icon { background: rgba(92, 127, 158, .2); color: #A8C6DE; }
.feature h3 { font-size: 1.2rem; margin: 0; }
.feature p { color: var(--fg-muted); font-size: .97rem; margin: 0; }
.section--ink .feature p { color: rgba(244, 241, 235, .7); }

/* ---------- Steps / story --------------------------------------------------- */
.steps { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.step { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 760px) { .step { grid-template-columns: 6rem 1fr; gap: 2rem; } }
.step__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 4rem); letter-spacing: -.04em; line-height: 1; color: var(--accent); }
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--fg-muted); max-width: 60ch; }

/* ---------- Floor plans ----------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.chip {
  border: 1.5px solid var(--line-strong); background: transparent; border-radius: var(--pill);
  padding: .55rem 1.1rem; font-weight: 600; font-size: .92rem; cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s;
}
.chip:hover { border-color: var(--fg); }
.chip.is-active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.plans { display: grid; gap: var(--gap); }
@media (min-width: 720px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan {
  background: var(--bg-elev); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan .ph { border-radius: 0; aspect-ratio: 4 / 3; }
.plan__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.plan__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.plan__name { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; letter-spacing: -.02em; margin: 0; line-height: 1.1; }
.plan__tag { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .38rem .6rem; border-radius: var(--pill); background: var(--accent-tint); color: var(--accent); white-space: nowrap; flex: none; }
.plan__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .92rem; color: var(--fg-muted); }
.plan__meta b { color: var(--fg); font-weight: 700; }
.plan__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: .93rem; color: var(--fg-muted); }
.plan__list li { display: flex; gap: .55rem; }
.plan__list li::before { content: "—"; color: var(--accent); flex: none; }
.plan__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.plan__price { font-weight: 700; line-height: 1.2; }
.plan__price small { display: block; font-weight: 600; font-size: .72rem; color: var(--fg-subtle); margin-top: .1rem; }
.plan[hidden] { display: none; }
.plans__empty { display: none; color: var(--fg-muted); padding: 2rem 0; }

/* ---------- Ticker ---------------------------------------------------------- */
.ticker { position: relative; border-block: 1px solid var(--line); padding: 1.1rem 0; }
.ticker__view {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Stopped, it is a row you can scroll rather than a band that moves — so the
   names stay reachable instead of wrapping into a static block. */
.ticker:not(.is-running) .ticker__view { overflow-x: auto; scrollbar-width: thin; }
.ticker__track { display: flex; width: max-content; }
/* Motion is opt-in: no animation without JS, and JS only opts in when the
   visitor has not asked for reduced motion, or has pressed play. */
html.js .ticker.is-running .ticker__track { animation: ticker 52s linear infinite; }
/* Hover only. :focus-within pauses the moment the play button is pressed —
   the button is the only focusable thing in the band — so play appeared to do
   nothing. The button is the real pause mechanism now; hover is a convenience. */
html.js .ticker.is-running .ticker__view:hover .ticker__track { animation-play-state: paused; }
.ticker__toggle {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg-elev); color: var(--fg-muted);
  cursor: pointer; padding: 0; z-index: 1;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.ticker__toggle:hover { color: var(--accent); border-color: var(--accent); }
.ticker__toggle:focus-visible { outline: none; box-shadow: var(--focus); }
.ticker__toggle svg { width: 1rem; height: 1rem; }
.ticker__item {
  display: inline-flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 2rem); letter-spacing: -.02em; white-space: nowrap;
}
.ticker__item::after { content: ""; width: .5em; height: .5em; background: var(--accent); border-radius: 3px; flex: none; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Category cards / info cards ------------------------------------- */
.card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 2.5vw, 2rem); }
.card h3 { font-size: 1.25rem; margin-bottom: .35rem; }
.card__kicker { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .6rem; }
.card ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }
.card ul li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
.card ul li:last-child { border-bottom: 0; }
.card ul li span { color: var(--fg-subtle); font-size: .85rem; white-space: nowrap; }
.card--ink { background: var(--ink); color: var(--stone); border-color: transparent; }
.card--ink .card__kicker { color: var(--accent-on-dark); }
.card--ink p { color: rgba(244, 241, 235, .75); }
.card--accent { background: var(--accent); color: #fff; border-color: transparent; }
.card--accent .card__kicker { color: rgba(255, 255, 255, .85); }
.card--accent p { color: rgba(255, 255, 255, .88); }
.card--accent .btn--light:hover { background: var(--stone); }
.info-card { display: grid; gap: .35rem; align-content: start; }
.info-card p { color: var(--fg-muted); margin: 0; }
.info-card a { text-decoration: none; font-weight: 600; color: var(--fg); }
.info-card a:hover { text-decoration: underline; }
.info-card a[href^="tel:"] { display: inline-block; padding-block: .4rem; margin-block: -.4rem; }
/* .info-card p comes after .card--ink p and would paint dark grey on the dark card. */
.info-card.card--ink p { color: rgba(244, 241, 235, .75); }
.info-card.card--ink a:not(.btn) { color: var(--stone); }
.map { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line); background: var(--bg-sunken); }
.map iframe { width: 100%; height: 100%; border: 0; filter: saturate(.85); }
.map--tall { aspect-ratio: 4 / 3; }

/* ---------- FAQ (native details) -------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.2rem 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.7rem; font-weight: 500; color: var(--accent); transition: transform .3s var(--ease); line-height: 1; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 1.4rem; color: var(--fg-muted); max-width: 62ch; }

/* ---------- Diagram --------------------------------------------------------- */
.diagram { width: 100%; height: auto; font-family: var(--font-body); }
.diagram text { font-size: 13px; font-weight: 600; fill: currentColor; }
.diagram .diagram__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; fill: var(--accent); }
.legend { display: grid; gap: .8rem; }
.legend li { display: flex; gap: .8rem; align-items: baseline; }
.legend ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.legend i { flex: none; width: .9rem; height: .9rem; border-radius: 3px; transform: translateY(.1rem); }
.legend strong { display: block; }
.legend span { color: var(--fg-muted); font-size: .95rem; }
.section--ink .legend span { color: rgba(244, 241, 235, .7); }

/* ---------- CTA band -------------------------------------------------------- */
.band { background: linear-gradient(115deg, var(--brick-600) 0%, var(--brick) 46%, #D97A3C 100%); color: #fff; padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; overflow: hidden; }
.band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 100% 0%, rgba(255, 255, 255, .18), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(0, 0, 0, .2), transparent 60%);
}
.band__inner { position: relative; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .band__inner { grid-template-columns: 1.3fr 1fr; } }
.band h2 { font-size: clamp(2.2rem, 4vw, 4rem); letter-spacing: -.03em; margin: 0; }
.band p { color: rgba(255, 255, 255, .85); margin-top: 1rem; max-width: 36rem; }
.band .eyebrow { color: rgba(255, 255, 255, .9); }
.band .eyebrow::before { background: #fff; }
.band .btn--ghost { border-color: rgba(255, 255, 255, .6); color: #fff; }
.band .btn--ghost:hover { border-color: #fff; }
.band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 900px) { .band__actions { justify-self: end; justify-content: flex-end; } }

/* ---------- Forms ----------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-size: .85rem; font-weight: 700; letter-spacing: .01em; }
.field label i { color: var(--accent); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--fg); background: var(--bg-elev);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: .85rem 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E727A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--brick); }
.field__error { font-size: .8rem; color: var(--brick); display: none; }
.field.is-invalid .field__error { display: block; }
/* After sending: an icon, a heading and one line, in place, where the eye
   already is. Focused so screen readers announce it; not a control, so no ring. */
.form__status { display: none; }
.form__status.is-ok, .form__status.is-err {
  display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; row-gap: .15rem; align-items: start;
  padding: 1.1rem 1.25rem; border: 1px solid; border-radius: var(--radius-sm);
}
.form__status.is-ok { background: var(--ok-bg); color: var(--ok-fg); border-color: color-mix(in srgb, var(--ok-fg) 20%, transparent); }
.form__status.is-err { background: var(--accent-tint); color: var(--brick-700); border-color: color-mix(in srgb, var(--brick-700) 20%, transparent); }
.form__status:focus { outline: none; }
.form__status-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; }
.is-ok .form__status-icon { background: var(--ok-fg); color: var(--ok-bg); }
.is-err .form__status-icon { background: var(--brick-700); color: #fff; }
.form__status-title { margin: 0; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; }
.form__status-text { margin: 0; font-size: .95rem; line-height: 1.5; }
.form__status a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .15em; white-space: nowrap; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form__note { font-size: .82rem; color: var(--fg-subtle); max-width: 30rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------------------------------------------------------- */
.footer {
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(210, 145, 78, .13), transparent 60%),
    radial-gradient(50% 60% at 0% 20%, rgba(92, 127, 158, .12), transparent 60%),
    var(--ink);
  color: var(--stone); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
}
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer .brand { color: #fff; font-size: 1.3rem; }
.footer__tag { color: rgba(244, 241, 235, .7); max-width: 26rem; margin-top: 1rem; }
.footer h4 { font-family: var(--font-body); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 241, 235, .5); margin: 0 0 1rem; font-weight: 700; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.footer ul a, .footer address a { display: inline-block; padding-block: .2rem; }
.footer a { text-decoration: none; color: rgba(244, 241, 235, .85); }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer address { color: rgba(244, 241, 235, .85); margin-bottom: .75rem; }
.footer__mgmt {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-top: 1.5rem; padding: .9rem 1.1rem;
  border: 1px solid rgba(244, 241, 235, .14); border-radius: var(--radius-sm); font-size: .88rem; color: rgba(244, 241, 235, .7); width: fit-content;
}
.evo { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; color: #fff; font-size: 1.05rem; }
.evo b { color: var(--accent-on-dark); font-weight: 800; }
.footer__bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(244, 241, 235, .12);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center;
  font-size: .82rem; color: rgba(244, 241, 235, .55);
}
.footer__bottom a { color: rgba(244, 241, 235, .7); display: inline-block; padding-block: .3rem; }
.eho { display: inline-flex; align-items: center; gap: .5rem; }
.eho svg { width: 1.3rem; height: 1.3rem; }

/* ---------- Utilities ------------------------------------------------------- */
/* A phone number, or a name, is never split across two lines. */
.nowrap, a[href^="tel:"] { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.note { font-size: .85rem; color: var(--fg-subtle); }
.badge { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: var(--pill); background: var(--accent-tint); color: var(--accent); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Motion ---------------------------------------------------------- */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
html.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .tile .ph, .plan { transition: none; }
}

/* ---------- Late additions -------------------------------------------------- */
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
.section--ink .btn--ghost { border-color: rgba(255, 255, 255, .45); color: #fff; }
.section--ink .btn--ghost:hover { border-color: #fff; }
.section__head--row .chips { margin-bottom: 0; }
.contact-grid { display: grid; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1.35fr 1fr; align-items: start; } }
.card h2 { font-size: var(--fs-h3); margin-bottom: 1.25rem; }
.tile .tile__icon { color: #fff; }
.stats-wrap { padding: 0; }
.gallery { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery .ph--span { grid-column: span 2; }

/* A closer look — three unfurnished rooms, each with a caption under it. It
   reuses the gallery grid but not the lightbox: these are documentary frames
   where the caption carries as much as the photograph does. */
.closer { margin: 0; min-width: 0; }
.closer > figcaption { margin-top: .7rem; font-size: .9rem; line-height: 1.45; color: var(--fg-muted); text-wrap: pretty; }
.strip { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .strip { grid-template-columns: repeat(4, 1fr); } }
.strip .feature { padding: 1.4rem; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--line); }
.section--ink .strip .feature { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.section--ink .strip .feature h3 { color: #fff; }
.amenity { scroll-margin-top: calc(var(--header-h) + 1rem); }
.amenity + .amenity { margin-top: clamp(3rem, 7vw, 6rem); }
.amenity h3 { font-size: var(--fs-h2); letter-spacing: -.03em; }
.evo-block { padding: clamp(1.75rem, 3vw, 2.5rem); border-radius: var(--radius); background: var(--ink); color: var(--stone); display: grid; gap: 1rem; align-content: start; }
.evo-block .evo { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.evo-block p { color: rgba(244, 241, 235, .75); }
.evo-block .btn--ghost { border-color: rgba(255, 255, 255, .45); color: #fff; }
.pill-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.pill-list li { padding: .45rem .85rem; border-radius: var(--pill); border: 1px solid rgba(255, 255, 255, .25); font-size: .85rem; font-weight: 600; }
.notfound { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--gutter); }

/* Placeholder labels sit at the top of tiles and heroes so they never cover titles */
.tile .ph__label { bottom: auto; top: .85rem; }
.hero__media .ph__label { bottom: auto; top: calc(var(--header-h) + .85rem); }

/* =============================================================================
   GALLERY — the style this site ships in.
   -----------------------------------------------------------------------------
   Everything above is the base layer. Gallery overrides its tokens and a few of
   its structures on <html data-style="gallery">, which every page now carries,
   so the base is load-bearing and cannot be deleted even though no page renders
   it unstyled.

   Three other directions were built and reviewed: Brick & Stone (the base layer
   on its own), Atelier and Dusk. Atelier, Dusk and the switcher that moved
   between them are in archive/styles/ with instructions for putting any of them
   back. Brick & Stone needs no file — it is what you get by removing the
   data-style attribute.
   ============================================================================= */
[hidden] { display: none !important; }

/* ---------- Style 2: Gallery — editorial serif, white space, oxblood --------- */
html:root[data-style="gallery"] {
  --bg: #FFFFFF; --bg-elev: #FAF8F5; --bg-sunken: #F3F0EB;
  --fg: #1A1A1A; --fg-muted: #4F4B47; --fg-subtle: #6F6A65;   /* 4.5:1 or better on every Gallery ground */
  --line: rgba(26, 26, 26, .14); --line-strong: rgba(26, 26, 26, .4);
  --accent: #7A1F12; --accent-hover: #5E160C; --accent-fg: #FFFFFF; --accent-tint: #F3E6E2; --accent-on-dark: #E8A48F;
  --ok-bg: var(--sage-100); --ok-fg: var(--sage-900);
  --focus-ring: #2F6FED;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: .25rem; --radius-sm: .2rem; --radius-xs: .15rem; --pill: .25rem;
  --shadow: none; --shadow-sm: none;
  --fs-display: clamp(3.4rem, 6.6vw + .75rem, 7.4rem);
  --fs-h1: clamp(2.8rem, 4.8vw + .75rem, 5.4rem);
  --fs-h2: clamp(2.3rem, 3vw + .75rem, 3.9rem);
  --fs-h3: clamp(1.5rem, 1vw + 1rem, 2rem);
  --fs-lead: clamp(1.1rem, .4vw + 1rem, 1.3rem);
  --lh-snug: 1.05;
}
[data-style="gallery"] :is(h1, h2, h3, .hero__title, .plan__name, .tile__title, .stat__value, .step__num, .pull, .brand, .drawer__nav a, .ticker__item, .evo, .faq summary, .band h2) { font-weight: 400; letter-spacing: -.01em; }
[data-style="gallery"] .brand { font-size: 1.45rem; }
[data-style="gallery"] .brand__name b { font-style: italic; }
[data-style="gallery"] .evo b { font-style: italic; }
[data-style="gallery"] .stat__value { font-size: clamp(2.2rem, 3vw, 3.2rem); }
[data-style="gallery"] .stat__value small { font-family: var(--font-body); font-weight: 600; }
[data-style="gallery"] .eyebrow { font-size: .7rem; letter-spacing: .24em; font-weight: 600; }
[data-style="gallery"] .eyebrow::before { width: 1.6rem; height: 1px; border-radius: 0; }
[data-style="gallery"] .hero__title .accent, [data-style="gallery"] .pull em { font-style: italic; }
[data-style="gallery"] .pull em { color: var(--accent); }
@media (min-width: 900px) { [data-style="gallery"] .hero__title .accent { color: var(--accent); } }

/* Gallery's display type is set large because on the desktop hero it carries a
   whole column on its own. Over a full-bleed photograph on a phone that extra
   6px of minimum pushes the slideshow caption and controls off the screen, so
   below the split it steps back to the base scale. --fs-display has exactly one
   consumer, .hero__title, so this moves nothing else. */
@media (max-width: 899.98px) { html:root[data-style="gallery"] { --fs-display: clamp(3rem, 5.6vw + .75rem, 6rem); } }
[data-style="gallery"] .ticker__item { font-style: italic; }
[data-style="gallery"] .ticker__item::after { width: .3em; height: .3em; border-radius: 50%; }
[data-style="gallery"] .btn { font-weight: 600; letter-spacing: .01em; }
[data-style="gallery"] .plan__tag, [data-style="gallery"] .badge { background: transparent; border: 1px solid var(--line-strong); color: var(--fg); }
[data-style="gallery"] .plan { box-shadow: none; }
[data-style="gallery"] .plan:hover { transform: none; box-shadow: none; border-color: var(--fg); }
[data-style="gallery"] .card:not(.card--ink):not(.card--accent) { background: var(--bg); }
[data-style="gallery"] .tile::after { background: linear-gradient(180deg, transparent 40%, rgba(26, 26, 26, .78)); }
[data-style="gallery"] .feature__icon { background: transparent; border: 1px solid var(--line-strong); color: var(--fg); border-radius: 50%; }
[data-style="gallery"] .section--ink .feature__icon { border-color: rgba(245, 241, 233, .32); color: #F2EFE9; }
[data-style="gallery"] .section--ink .feature:nth-child(4n + 2) .feature__icon { border-color: rgba(168, 203, 188, .55); color: #A8CBBC; }
[data-style="gallery"] .section--ink .feature:nth-child(4n + 3) .feature__icon { border-color: rgba(235, 183, 124, .55); color: #EBB77C; }
[data-style="gallery"] .section--ink .feature:nth-child(4n + 4) .feature__icon { border-color: rgba(168, 198, 222, .55); color: #A8C6DE; }
[data-style="gallery"] .checklist li::before { background: var(--fg); }
[data-style="gallery"] .chip.is-active { background: var(--fg); color: var(--bg); }
/* Gallery hero: paper ground, type left, framed photograph right — a two-column
   composition, so it only applies where there are two columns. Below 900px the
   style inherits the base hero: photograph full-bleed, scrim, type over it. */
@media (min-width: 900px) {
  [data-style="gallery"] .topbar { color: var(--fg); }
  [data-style="gallery"] .hero { background: var(--bg); color: var(--fg); min-height: 0; display: grid; }
  [data-style="gallery"] .hero::after { display: none; }
  [data-style="gallery"] .hero__media { position: relative; inset: auto; z-index: 0; order: 2; }
  [data-style="gallery"] .hero__media .ph { border-radius: var(--radius); }
  [data-style="gallery"] .hero__media .ph__label { top: .85rem; }
  [data-style="gallery"] .hero .eyebrow { color: var(--accent); }
  [data-style="gallery"] .hero__lead { color: var(--fg-muted); }
  [data-style="gallery"] .hero__aside { color: var(--fg-muted); }
  [data-style="gallery"] .hero__aside strong, [data-style="gallery"] .hero__status { color: var(--fg); }
  [data-style="gallery"] .hero .btn--ghost { border-color: var(--line-strong); color: var(--fg); }
  [data-style="gallery"] .hero .btn--ghost:hover { border-color: var(--fg); }
  [data-style="gallery"] .hero__title { max-width: 12ch; }
  [data-style="gallery"] .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
  [data-style="gallery"] .hero__media { order: 2; min-height: 0; margin: calc(var(--header-h) + 1.5rem) var(--gutter) 2.5rem 0; }
  [data-style="gallery"] .hero__inner { width: auto; max-width: none; margin: 0; padding-left: var(--gutter); padding-right: 2.5rem; padding-top: calc(var(--header-h) + 3.5rem); padding-bottom: 3.5rem; }
  [data-style="gallery"] .hero__grid { grid-template-columns: 1fr; }
  [data-style="gallery"] .hero__aside { justify-items: start; text-align: left; }
}
[data-style="gallery"] .drawer { background: var(--bg); color: var(--fg); }
[data-style="gallery"] .drawer__top .brand, [data-style="gallery"] .drawer__nav a { color: var(--fg); }
[data-style="gallery"] .drawer__nav a { border-color: var(--line); }
[data-style="gallery"] .drawer__nav a:hover { color: var(--accent); }
[data-style="gallery"] .drawer__foot .btn--ghost { border-color: var(--line-strong); color: var(--fg); }
[data-style="gallery"] .footer { background: var(--bg-sunken); color: var(--fg); border-top: 1px solid var(--line); }
[data-style="gallery"] .footer .brand, [data-style="gallery"] .footer a, [data-style="gallery"] .footer address, [data-style="gallery"] .evo { color: var(--fg); }
[data-style="gallery"] .footer a:hover { color: var(--accent); }
[data-style="gallery"] .footer__tag, [data-style="gallery"] .footer h4, [data-style="gallery"] .footer__bottom, [data-style="gallery"] .footer__bottom a, [data-style="gallery"] .footer__mgmt { color: var(--fg-muted); }
[data-style="gallery"] .footer__mgmt, [data-style="gallery"] .footer__bottom { border-color: var(--line); }
[data-style="gallery"] .evo b { color: var(--accent); }
[data-style="gallery"] .section--ink .evo b { color: var(--accent-on-dark); }
[data-style="gallery"] .band { background: var(--fg); color: var(--bg); }
[data-style="gallery"] .band::before { display: none; }
[data-style="gallery"] .band .btn--light { --btn-bg: var(--bg); --btn-fg: var(--fg); }
[data-style="gallery"] .band .eyebrow { color: var(--accent-on-dark); }
[data-style="gallery"] .band .eyebrow::before { background: var(--accent-on-dark); }

/* ---------- Map fallback (also covers hosts that block the embed) ----------- */
.map { position: relative; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 2.5rem 2.5rem; }
.map iframe { position: relative; z-index: 1; }
.map__link { position: absolute; z-index: 2; right: .85rem; bottom: .85rem; }
.map__pin { position: absolute; z-index: 0; inset: 0; display: grid; place-items: center; color: var(--fg-subtle); font-size: .9rem; gap: .5rem; text-align: center; padding: 1rem; }
.map__pin svg { width: 2.2rem; height: 2.2rem; color: var(--accent); }

/* ---------- Artifact build: static at rest, hero sized to content ----------- */
html.is-artifact .hero { min-height: min(88svh, 54rem); }
html.is-artifact .topbar { padding-top: env(safe-area-inset-top, 0px); }
.credits { padding-left: 1.2rem; color: var(--fg-muted); font-size: .95rem; display: grid; gap: .45rem; margin: 0; }
/* Grid tracks never grow past the viewport because of a long word */
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strip, .gallery, .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plans { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .strip { grid-template-columns: minmax(0, 1fr); } }
.feature h3, .tile__title, .card h3 { overflow-wrap: anywhere; }
/* Router page switches jump instantly even though the site scrolls smoothly */
html.no-smooth, html.no-smooth body { scroll-behavior: auto !important; }

/* =============================================================================
   HERO GALLERY — crossfading slides with a slow Ken Burns drift, a caption bar
   with segmented progress, prev/next, keyboard and swipe. Reduced motion:
   no drift, instant cuts, no autoplay.
   ============================================================================= */
.hero__slides { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__slide.is-active { opacity: 1; z-index: 1; }
.hero__slide .ph { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; }
.hero__slide img { transform-origin: var(--kb-origin, 50% 45%); }
/* Depth, not movement: 5.5% over half a minute, eased at both ends so it never
   snaps, and `alternate` so it breathes in and out instead of resetting. The
   origin sits just above centre, where the building is, so the drift reads as
   the camera easing toward the facade. */
.hero__slide.is-active img { animation: hero-drift 32s cubic-bezier(.4, 0, .6, 1) infinite alternate; }
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.055); } }
/* Kept for a multi-slide hero: the per-slide origins that made consecutive
   slides drift in different directions. */
.hero[data-gallery] .hero__slide:nth-child(odd) { --kb-origin: 68% 42%; }
.hero[data-gallery] .hero__slide:nth-child(even) { --kb-origin: 32% 58%; }
.hero__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap;
  margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .2);
  font-size: .85rem; color: rgba(255, 255, 255, .8);
}
.hero__caption { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.hero__caption b { color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero__count { font-variant-numeric: tabular-nums; opacity: .7; }
.hero__ctrl { display: flex; align-items: center; gap: 1rem; }
.hero__segs { display: flex; gap: .35rem; }
/* The bar is 3px; the button around it is not. Hit area clears the 24px floor. */
.hero__seg {
  width: 2.2rem; min-height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; align-items: center; position: relative;
}
.hero__seg::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%;
  height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .28);
}
.hero__seg:focus-visible { outline-offset: 3px; }
.hero__seg i { position: relative; z-index: 1; display: block; height: 3px; width: 0; border-radius: 2px; background: #fff; }
.hero__seg.is-done i { width: 100%; }
.hero__seg.is-active i { animation: segfill var(--slide-ms, 6500ms) linear forwards; }
.hero.is-paused .hero__seg.is-active i { animation-play-state: paused; }
@keyframes segfill { to { width: 100%; } }
.hero__nav { display: flex; gap: .5rem; }
.hero__btn {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .4);
  background: rgba(18, 19, 22, .35); color: #fff; display: grid; place-items: center; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .2s, background .2s;
}
.hero__btn:hover { border-color: #fff; background: rgba(18, 19, 22, .55); }
.hero__btn:focus-visible { border-radius: 50%; }
.hero__btn svg { width: 1.1rem; height: 1.1rem; }
@media (min-width: 900px) {
  [data-style="gallery"] .hero__bar { border-top-color: var(--line); color: var(--fg-muted); }
  [data-style="gallery"] .hero__caption b { color: var(--fg); }
  [data-style="gallery"] .hero__seg::after { background: var(--line-strong); }
  [data-style="gallery"] .hero__seg i { background: var(--fg); }
  [data-style="gallery"] .hero__btn { border-color: var(--line-strong); background: transparent; color: var(--fg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  [data-style="gallery"] .hero__btn:hover { border-color: var(--fg); background: var(--bg-sunken); }

}

/* Headline rises line by line on load. The mask is a clip-path that reaches past
   the line box so the blurred text shadow is not cut into a hard band, and it is
   released once the rise has finished. */
.hero__line { display: block; overflow: visible; padding-bottom: .14em; margin-bottom: -.14em; clip-path: inset(-.7em -2em -.28em -2em); animation: unclip 1ms linear 1.4s forwards; }
.hero__line > span { display: block; transform: translateY(128%); animation: rise 1s var(--ease) .1s forwards; }
.hero__line:nth-child(2) > span { animation-delay: .25s; }
@keyframes rise { to { transform: none; } }
@keyframes unclip { to { clip-path: none; } }

/* Amenities gallery → lightbox */
.gallery__item { display: block; text-decoration: none; color: inherit; border-radius: var(--radius); cursor: zoom-in; }
.gallery__item:focus-visible { box-shadow: var(--focus); }
.ph > img { transition: transform .9s var(--ease); }
.gallery__item:hover .ph > img { transform: scale(1.05); }
.lightbox { border: 0; padding: 0; margin: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; inset: 0; color: #F4F1EB; }
.lightbox::backdrop { background: rgba(10, 11, 13, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox[open] { display: grid; place-items: center; animation: lbIn .35s var(--ease); }
@keyframes lbIn { from { opacity: 0; transform: scale(.98); } }
.lightbox__stage { position: relative; width: min(92vw, 1400px); display: grid; gap: .8rem; justify-items: center; }
.lightbox__img { max-width: 100%; max-height: 74dvh; border-radius: .75rem; object-fit: contain; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9); animation: lbFade .45s var(--ease); background: #16181D; }
@keyframes lbFade { from { opacity: 0; transform: translateX(var(--lb-dx, 0px)) scale(.985); } }
.lightbox__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; font-size: .9rem; color: rgba(244, 241, 235, .85); }
.lightbox__meta b { color: #fff; font-weight: 700; }
.lightbox__count { font-variant-numeric: tabular-nums; opacity: .7; }
.lightbox__btn {
  position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .35); background: rgba(18, 19, 22, .55); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.lightbox__btn:hover { border-color: #fff; }
.lightbox__btn svg { width: 1.2rem; height: 1.2rem; }
.lightbox__btn--prev { left: -.75rem; }
.lightbox__btn--next { right: -.75rem; }
.lightbox__close { position: fixed; top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); background: rgba(18, 19, 22, .55); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lightbox__close svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 720px) {
  .lightbox__stage { width: 94vw; }
  .lightbox__btn { top: auto; bottom: -3.6rem; transform: none; }
  .lightbox__btn--prev { left: 0; }
  .lightbox__btn--next { right: 0; }
}
body.lightbox-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active img { animation: none; transform: none; }
  .hero__slide { transition-duration: .01s; }
  .hero__seg.is-active i { animation: none; width: 100%; }
  .hero__line > span { animation: none; transform: none; }
  .lightbox[open], .lightbox__img { animation: none; }
  .gallery__item:hover .ph > img { transform: none; }
}

/* Legibility over photography: soft shadow behind light text, deeper gradient on phones */
.hero .eyebrow, .hero__title, .hero__lead, .hero__aside, .hero__bar, .tile__title, .tile__sub {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 22px rgba(0, 0, 0, .35);
}
.tile--solid .tile__title, .tile--solid .tile__sub, .tile--stone .tile__title, .tile--stone .tile__sub, .tile--sage .tile__title, .tile--sage .tile__sub { text-shadow: none; }
@media (min-width: 900px) {
  [data-style="gallery"] .hero .eyebrow, [data-style="gallery"] .hero__title, [data-style="gallery"] .hero__lead, [data-style="gallery"] .hero__aside, [data-style="gallery"] .hero__bar { text-shadow: none; }
}
@media (max-width: 720px) {
  .hero .eyebrow, .hero__title, .hero__lead, .hero__aside, .hero__bar { text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 10px 30px rgba(0, 0, 0, .55); }
  .hero::after { background: linear-gradient(180deg, rgba(18, 19, 22, .5) 0%, rgba(18, 19, 22, .3) 30%, rgba(18, 19, 22, .92) 100%); }
  .hero__lead { color: rgba(255, 255, 255, .92); }
}
.lightbox__stage { width: fit-content; max-width: min(92vw, 1400px); }
.lightbox__meta { max-width: 100%; }
/* Phone refinements: the wordmark and its descriptor always fit beside Menu */
@media (max-width: 480px) {
  .brand { gap: .55rem; font-size: 1.08rem; }
  .brand__mark { width: 1.85rem; height: 1.85rem; }
  .brand__tag { font-size: .44em; letter-spacing: .12em; }
  [data-style="gallery"] .brand { font-size: 1.25rem; }
  .menu-btn { padding: .5rem .85rem; }
}
@media (max-width: 400px) { .topbar__call-word { display: none; } }
@media (max-width: 360px) {
  .brand { font-size: 1rem; gap: .45rem; }
  .brand__tag { letter-spacing: .09em; }
  .menu-btn { padding: .5rem .7rem; font-size: .84rem; }
}

.hero .eyebrow, .hero__title, .hero__lead, .hero__aside, .hero__bar, .tile__title, .tile__sub {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 4px 18px rgba(0, 0, 0, .32);
}
@media (max-width: 720px) {
  .hero .eyebrow, .hero__title, .hero__lead, .hero__aside, .hero__bar { text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 24px rgba(0, 0, 0, .45); }
}
.tile--solid .tile__title, .tile--solid .tile__sub, .tile--stone .tile__title, .tile--stone .tile__sub, .tile--sage .tile__title, .tile--sage .tile__sub { text-shadow: none; }
@media (min-width: 900px) {
  [data-style="gallery"] .hero .eyebrow, [data-style="gallery"] .hero__title, [data-style="gallery"] .hero__lead, [data-style="gallery"] .hero__aside, [data-style="gallery"] .hero__bar { text-shadow: none; }
}

/* =============================================================================
   STREET INDEX — the block in house-number order, with this address marked
   ============================================================================= */
/* The list names its own street. Without it the column of house numbers means
   nothing once the prose beside it stacks away on a phone. */
.street__head {
  margin: 0 0 .5rem; font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-subtle);
}
.street { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.street__row {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: .25rem 1.1rem; align-items: baseline;
  padding: 1rem .25rem; border-bottom: 1px solid var(--line);
}
.street__no {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.1;
  color: var(--fg-subtle); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.street__row strong { display: block; font-size: 1.05rem; }
.street__note { display: block; color: var(--fg-muted); font-size: .95rem; margin-top: .15rem; }
/* The marked row is flagged by its ground and a rule, not by recoloring the
   name: accent text on an accent tint does not clear the contrast floor. */
/* The marked row used to take `padding-left: 1rem` for the accent bar, which
   pushed its house number and its name 12px right of every other row — the one
   row meant to stand out was the one that did not line up. The panel now bleeds
   outward by the same amount it pads inward, so the highlight grows and the
   columns stay put. */
.street__row--here {
  background: var(--accent-tint); border-radius: var(--radius-sm); border-bottom-color: transparent;
  box-shadow: inset 3px 0 0 var(--accent);
  margin-inline: -.75rem; padding-inline: 1rem;
}
.street__row--here .street__no { color: var(--accent); }
.street__row--here strong { color: var(--fg); }
.street__row--here .street__note { color: var(--fg-muted); }

/* =============================================================================
   TEXT WRAPPING
   Headings balance across their lines; body copy uses `pretty`, which keeps a
   single short word from being stranded on the last line (a widow).
   ============================================================================= */
p, .lead, .hero__lead, .prose p, .feature p, .card p, .step p, .tile__sub,
.plan__list li, .checklist li span, .card ul li, .faq details > div, .footer__tag, .band p, .form__note,
.street__note, .closer > figcaption {
  text-wrap: pretty;
}

/* Gallery style sets a deliberately narrow measure for the home headline, which
   is short and hand-broken. Interior pages carry one long sentence, so they get
   a wider measure and a calmer size rather than a tall ragged stack. */
[data-style="gallery"] .hero--short .hero__title {
  font-size: clamp(2.3rem, 3.2vw + .7rem, 4.1rem);
  max-width: 24ch;
  letter-spacing: -.015em;
}

/* =============================================================================
   EVOLUTION24 LOCKUP — the management company's own logo, always linked to
   evolution24.net. White art on dark grounds, full-color on light cards.
   ============================================================================= */
.evo-logo { display: inline-block; line-height: 0; text-decoration: none; transition: opacity .2s; }
.evo-logo:hover { opacity: .75; }
.evo-logo:focus-visible { border-radius: var(--radius-xs); }
.evo-logo img { width: auto; height: 2.9rem; object-fit: contain; }
.evo-logo--sm img { height: 3.4rem; }
.evo-logo--lg img { height: 5rem; }
.evo-logo--card img { height: 3.6rem; }
.footer__mgmt { align-items: center; gap: .6rem 1rem; }
/* Two pieces of art ship together where the ground changes with the style: the
   knockout version for dark footers, the full-color one for the Gallery style's
   footer. Its tan and cream are made for a dark ground: on the light footer and
   cards the cream "24" all but vanished. So on a light page the logo sits on its
   own dark chip, and reads the way Evolution24's own brand shows it. */
.evo-logo .on-light { display: none; }
[data-style="gallery"] .footer .evo-logo .on-dark { display: none; }
[data-style="gallery"] .footer .evo-logo .on-light { display: block; }
[data-style="gallery"] .footer__mgmt { background: var(--ink); border-color: var(--ink); color: rgba(244, 241, 235, .78); }
.evo-logo--card { background: var(--ink); padding: .7rem 1rem; border-radius: var(--radius-sm); width: fit-content; }
.card .evo-logo { margin-bottom: .35rem; }
.section--ink .evo-logo--sm { display: inline-block; padding: .7rem 1.1rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-sm); }

/* =============================================================================
   REDUCED MOTION — last block in the file so it overrides every rule above.
   Anything that parks an element off its resting position must be undone here.
   ============================================================================= */
/* ---------------------------------------------------------------------------
   Rules that used to live in style="" attributes.
   Moved here so the Content Security Policy can drop 'unsafe-inline' from
   style-src. With it, the policy is decoration — an injected
   <span style="position:fixed;inset:0"> still lands. Without it, it cannot.
   --------------------------------------------------------------------------- */

/* Three class selectors. Only two are needed now that Dusk is archived, but the
   third is what ties [data-style="dusk"] .diagram .diagram__label on specificity
   and beats it on source order — which is how the inline style used to win.
   Leave it: restoring Dusk without it turns the park label accent-coloured. */
.diagram .diagram__label.diagram__label--park { fill: var(--sage); }

/* Two class selectors, because `.diagram text` (0,1,1) outranks an SVG
   presentation attribute — which is why fill="#121316" silently lost and the
   inline style did not. */
.diagram .diagram__t--podium  { fill: #121316; font-size: 12px; }
.diagram .diagram__t--terrace { fill: #F08A6A; font-size: 11px; font-weight: 700; }
.diagram .diagram__t--balcony { fill: currentColor; font-size: 12px; }

.legend__dot--roof    { background: var(--sky); }
.legend__dot--upper   { background: #8E2A19; }
.legend__dot--terrace { background: var(--brick); }
.legend__dot--podium  { background: #C9BFAE; }
.legend__dot--park    { background: var(--sage); }

/* Virtual staging disclosure. Always visible — unlike .ph__label, which only
   appears when a slot is empty. Real estate advertising rules treat a digitally
   furnished photograph as an altered image, and an unlabelled one as a claim. */
.ph { position: relative; }
.ph__staged {
  position: absolute; right: .5rem; bottom: .5rem; z-index: 1;
  font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .28rem .5rem; border-radius: 4px;
  background: rgba(18, 19, 22, .78); color: #fff;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  /* Marked important on purpose: a per-style rule is more specific than this
     block, and twice now that has left the headline parked out of position. */
  .hero__line { clip-path: none !important; animation: none !important; }
  .hero__title { animation: none !important; }
  .hero__line > span { transform: none !important; animation: none !important; }
  .hero__slide { transition-duration: .01s; }
  .hero__slide.is-active img { animation: none; transform: none; }
  .hero__seg.is-active i { animation: none; width: 100%; }
  .btn, .tile .ph, .plan { transition: none; }
  .gallery__item:hover .ph > img { transform: none; }
  .lightbox[open], .lightbox__img { animation: none; }
}

/* ---------- Tour pages ------------------------------------------------------
   /tour/ and its three versions: the site's own hero, cards and form, with the
   navigation taken out so the page has one job. Only the footer needs telling
   that it has lost its columns. */
.footer--lp { padding-top: 0; }
.footer--lp .footer__bottom { margin-top: 0; }
.lp__note { font-size: .82rem; color: var(--fg-subtle); }

/* =============================================================================
   CREDENTIALS — LEED Gold and the 2017 NAIOP award.
   Set in the site's own type: these are not the USGBC or NAIOP logos, which
   have their own usage rules (see CREDS in the page generator). Gold appears
   only here and on the one stat, so it keeps meaning "certified".
   ============================================================================= */

/* The hero seal: two copies of one link. .seal--photo sits on the framed
   photograph of the Gallery hero from 900px; .seal--flow sits above the
   headline everywhere else. Exactly one is displayed at any width. */
.seal {
  display: flex; align-items: center; gap: .7rem; width: fit-content;
  padding: .45rem 1.15rem .45rem .45rem; border-radius: 999px;
  text-decoration: none; line-height: 1.1;
}
.seal__icon { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid; }
.seal__icon svg { width: 1.1rem; height: 1.1rem; }
.seal__text { display: grid; gap: .15rem; }
.seal__k { font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.seal__v { font-family: var(--font-display); font-size: 1.5rem; line-height: .95; }
a.seal:hover .seal__v { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Over a full-bleed photograph: dark glass, light gold */
.seal--flow {
  margin: 0 0 1.25rem; color: #fff;
  background: rgba(18, 19, 22, .52); border: 1px solid rgba(217, 185, 106, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.seal--flow .seal__icon { border-color: rgba(217, 185, 106, .7); color: var(--gold-on-dark); }
.seal--flow .seal__k { color: rgba(255, 255, 255, .88); }
.seal--flow .seal__v { color: var(--gold-on-dark); }
.seal--photo { display: none; }
@media (min-width: 900px) {
  [data-style="gallery"] .seal--flow { display: none; }
  [data-style="gallery"] .seal--photo {
    display: flex; position: absolute; z-index: 2; left: 1.25rem; bottom: 1.25rem;
    background: #fff; color: var(--fg); border: 1px solid var(--gold-line);
    box-shadow: 0 12px 32px -14px rgba(18, 19, 22, .5);
  }
  [data-style="gallery"] .seal--photo .seal__icon { border-color: var(--gold-line); background: var(--gold-tint); color: var(--gold); }
  [data-style="gallery"] .seal--photo .seal__k { color: var(--fg-muted); }
  [data-style="gallery"] .seal--photo .seal__v { color: var(--gold); font-size: 1.85rem; }
  [data-style="gallery"] .seal--photo { gap: .85rem; padding: .55rem 1.5rem .55rem .55rem; left: 1.5rem; bottom: 1.5rem; }
  [data-style="gallery"] .seal--photo .seal__icon { width: 2.9rem; height: 2.9rem; }
  [data-style="gallery"] .seal--photo .seal__icon svg { width: 1.35rem; height: 1.35rem; }
  [data-style="gallery"] .seal--photo .seal__k { font-size: .68rem; }
}

.stat__value--gold { color: var(--gold); }
#cert-title .accent { color: var(--gold-on-dark); font-style: italic; }

/* Badges: a 2 x 2 block beside text, or a row of four under a heading */
.creds { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .creds--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 359.98px) { .creds { grid-template-columns: minmax(0, 1fr); } }
.cred {
  display: grid; justify-items: center; align-content: start; gap: .3rem; min-width: 0; text-align: center;
  padding: 1.5rem 1rem 1.35rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--bg-elev);
}
.cred__icon { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--fg); margin-bottom: .5rem; }
.cred__icon svg { width: 1.25rem; height: 1.25rem; }
.cred__k { margin: 0; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); }
.cred__v { margin: 0; font-family: var(--font-display); font-size: clamp(1.9rem, 2.3vw, 2.4rem); line-height: 1.05; letter-spacing: -.01em; color: var(--fg); overflow-wrap: anywhere; }
.cred__note { margin: .25rem 0 0; font-size: .84rem; line-height: 1.4; color: var(--fg-muted); max-width: 24ch; }
/* The certificate: a second gold rule just inside the first */
.cred--gold { border-color: var(--gold-line); outline: 1px solid var(--gold-line); outline-offset: -6px; background: var(--gold-tint); }
.cred--gold .cred__icon { border-color: var(--gold-line); color: var(--gold); }
.cred--gold .cred__k, .cred--gold .cred__v { color: var(--gold); }
.section--ink .cred { background: rgba(255, 255, 255, .03); border-color: rgba(244, 241, 235, .2); }
.section--ink .cred__icon { border-color: rgba(244, 241, 235, .35); color: #F2EFE9; }
.section--ink .cred__k { color: rgba(244, 241, 235, .66); }
.section--ink .cred__v { color: #fff; }
.section--ink .cred__note { color: rgba(244, 241, 235, .7); }
.section--ink .cred--gold { background: rgba(217, 185, 106, .08); border-color: rgba(217, 185, 106, .6); outline-color: rgba(217, 185, 106, .38); }
.section--ink .cred--gold .cred__icon { border-color: rgba(217, 185, 106, .7); color: var(--gold-on-dark); }
.section--ink .cred--gold .cred__k, .section--ink .cred--gold .cred__v { color: var(--gold-on-dark); }

/* The spec sheet on the story page. Two class selectors on the group heading:
   Gallery's :is(h1, h2, h3, .hero__title…) rule weighs (0,2,0). */
.specs { display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) {
  .specs { display: block; columns: 2; column-gap: clamp(2rem, 5vw, 4.5rem); }
  .specs__group { break-inside: avoid; margin-bottom: clamp(2rem, 4vw, 3rem); }
}
.specs .specs__group h3 {
  font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .75rem;
}
.specs dl { margin: 0; border-top: 1px solid var(--fg); }
.specs dl > div { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: .2rem 1.25rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--fg-muted); font-size: .92rem; padding-top: .1rem; }
.specs dd { margin: 0; }
@media (max-width: 520px) { .specs dl > div { grid-template-columns: minmax(0, 1fr); } }
.specs__foot { margin-top: 2rem; }

/* The LEED mark beside Equal Housing Opportunity in every footer */
.marks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.5rem; }
.footer__bottom .eho { display: inline-flex; }
.eho--leed svg { color: var(--gold-on-dark); }
[data-style="gallery"] .eho--leed svg { color: var(--gold); }

/* =============================================================================
   TARGET MOVE-IN — month buttons in place of <input type="month">.
   A radio group: arrow keys move between months, the chosen one fills in ink.
   On a phone the two worded answers take the full width, with the months in
   threes between them; from 640px it is two rows of five.
   ============================================================================= */
.movein { border: 0; margin: 0; padding: 0; min-width: 0; }
.movein legend { padding: 0; margin-bottom: .4rem; font-size: .85rem; font-weight: 700; letter-spacing: .01em; }
.movein__opts { display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.movein__opt--wide { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .movein__opts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .movein__opt--wide { grid-column: span 2; }
}
.movein__opt { position: relative; display: block; cursor: pointer; }
/* The radio stays in the page for keyboards and screen readers; the face is
   what shows. Two classes, to outrank `.field input`. */
.movein .movein__opt input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; appearance: none; -webkit-appearance: none; border: 0; box-shadow: none;
}
.movein__opt > span {
  display: grid; place-content: center; justify-items: center; gap: .1rem; min-height: 3.6rem;
  padding: .55rem .5rem; text-align: center; line-height: 1.15;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-elev); color: var(--fg);
  transition: border-color .15s, background-color .15s, color .15s;
}
.movein__m { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.005em; }
.movein__y { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.movein__opt:hover > span { border-color: var(--fg); }
.movein .movein__opt input:checked + span { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.movein .movein__opt input:checked + span .movein__y { color: inherit; opacity: .72; }
.movein .movein__opt input:focus-visible + span { box-shadow: var(--focus); }
@media (prefers-reduced-motion: reduce) { .movein__opt > span { transition: none; } }

/* The Gallery style is a light design whatever the device is set to, so its
   native controls (select menus, the date pickers, scrollbars) are drawn light
   too, rather than dark widgets on a white card. */
html:root[data-style="gallery"] { color-scheme: light; }

/* Browser autofill paints fields its own blue. Keep them in the site's colours. */
.field input:-webkit-autofill, .field input:-webkit-autofill:hover,
.field textarea:-webkit-autofill, .field select:-webkit-autofill {
  -webkit-text-fill-color: var(--fg); caret-color: var(--fg);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-elev) inset; box-shadow: 0 0 0 1000px var(--bg-elev) inset;
}
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-elev) inset, var(--focus); box-shadow: 0 0 0 1000px var(--bg-elev) inset, var(--focus);
}

/* =============================================================================
   THE C, DRAWN — the white C in the mark is one line (see C_STROKE), so it can
   be drawn from the tab round to the bottom arm, as if by hand.

   Every page: the header's C pops its square and draws itself on arrival.
   The home page, on arrival and on a reload: a white intro with the C drawn
   large and the name under it; then the C flies into the header's place
   (main.js measures where) as the page shows through. The intro is off unless
   the head script turns it on, so without JavaScript, or for crawlers, there
   is none. Where the device asks for reduced motion, nothing moves: the intro
   is the finished mark and name fading in and out, and the header's C simply
   stands.
   ============================================================================= */
@keyframes c-pop  { from { transform: scale(.35) rotate(-10deg); opacity: 0; } }
@keyframes c-draw { from { stroke-dasharray: 100; stroke-dashoffset: 100; } to { stroke-dasharray: 100; stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: no-preference) {
  html:not(.with-intro) .topbar .brand__mark rect { transform-box: fill-box; transform-origin: center; animation: c-pop .45s var(--ease) both; }
  html:not(.with-intro) .topbar .brand__mark .brand__c { animation: c-draw .65s cubic-bezier(.65, 0, .35, 1) .15s both; }
}

.intro { display: none; }
html.with-intro .intro {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-content: center; justify-items: center; gap: clamp(1.4rem, 2.2vw, 2.4rem);
  background: var(--bg); color: var(--fg);
  animation: intro-clear .5s var(--ease) 1.45s forwards, intro-done 0s linear 2s forwards;
}
/* Sized to the screen: 104px on a phone, up to 184px on a large monitor,
   where a phone-sized mark would be a speck in the middle of the white. */
.intro__mark { width: clamp(104px, 10vw, 184px); height: clamp(104px, 10vw, 184px); will-change: transform; animation: intro-fly .6s cubic-bezier(.7, 0, .25, 1) 1.4s forwards; }
.intro__mark svg { display: block; width: 100%; height: 100%; }
.intro__mark rect { transform-box: fill-box; transform-origin: center; animation: c-pop .55s var(--ease) both; }
.intro__mark .brand__c { animation: c-draw .85s cubic-bezier(.65, 0, .35, 1) .3s both; }
.intro__name {
  margin: 0; text-align: center; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3.6rem); line-height: 1; letter-spacing: -.01em;
  animation: intro-name .55s var(--ease) .85s both, intro-fade .3s ease 1.35s forwards;
}
.intro__name b { font-weight: 400; font-style: italic; }
.intro__name span {
  display: block; margin-top: clamp(.55rem, .7vw, .9rem); font-family: var(--font-body); font-size: clamp(.7rem, .6vw, .85rem); font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--fg-muted);
}
@keyframes intro-name  { from { opacity: 0; transform: translateY(10px); } }
@keyframes intro-fade  { to { opacity: 0; } }
@keyframes intro-clear { to { background-color: transparent; } }
@keyframes intro-done  { to { visibility: hidden; } }
@keyframes intro-fly   { to { transform: translate(var(--fly-x, 0px), var(--fly-y, 0px)) scale(var(--fly-s, 1)); } }
/* Animations turned off on the device (Windows "Animation effects", a Mac's
   "Reduce motion"): no drawing, no flight, nothing moves. The finished mark and
   the name fade in, hold a moment, and the white fades away. Opacity only. */
@keyframes intro-in  { from { opacity: 0; } }
@keyframes intro-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.with-intro .intro { animation: intro-out .45s ease 1.1s forwards, intro-done 0s linear 1.55s forwards; }
  .intro__mark, .intro__name { animation: intro-in .4s ease both; }
  .intro__mark rect, .intro__mark .brand__c { animation: none; }
}