/* ════════════════════════════════════════════════════════════════════
   THE EAST BEND — site stylesheet
   Brand palette: Cream #F9EEE3 · Tan #DABDA1 · Brown #9C725D
                  Blue #63819D · Navy #173451
   Type: TT Quaris (primary) · Archivo Expanded (stand-in for Sweet Gothic)
   ════════════════════════════════════════════════════════════════════ */

/* ─── FONTS ───────────────────────────────────────────────────────────
   NOTE: TT Quaris files in /assets/fonts are TRIAL versions (evaluation
   only). Purchase a web license from typetype.org before launch, or
   delete these three @font-face blocks — headings then fall back to
   Tenor Sans (loaded from Google Fonts), matching the previous site. */
@font-face { font-family: 'TT Quaris'; src: url('../fonts/tt-quaris-light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT Quaris'; src: url('../fonts/tt-quaris-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT Quaris'; src: url('../fonts/tt-quaris-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Brand */
  --cream:       #F9EEE3;
  --tan:         #DABDA1;
  --brown:       #9C725D;
  --blue:        #63819D;
  --navy:        #173451;

  /* Extended */
  --navy-deep:   #0f2439;
  --navy-ink:    #0a1929;
  --blue-tint:   #b3c6d6;
  --paper:       #fcf8f3;
  --sand:        #f3e6d8;
  --brown-dark:  #7d5642;
  --body:        #463a32;
  --line:        rgba(23, 52, 81, 0.14);
  --line-light:  rgba(249, 238, 227, 0.16);

  --font-display: 'TT Quaris', 'Tenor Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-label:   'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
  --section: clamp(84px, 10vw, 152px);
  --h2: clamp(42px, 4.2vw, 65px);   /* section titles: 42px up to 1000px wide (was 36px), larger on phones and tablets (owner, 26 Sep 2026) */
  --header-h: 96px;
  --header-h-solid: var(--header-h);   /* the bar keeps its height when it turns solid: only its background fades in */
  --radius: 4px;
  --radius-img: 10px;   /* photos, tiles and the panels beside them: softer than the cards and fields */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* entrances: fast start, long settle */
}

/* ─── RESET / BASE ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* The canvas under every page is the dark navy, so between pages — and in any moment
   before a page has painted — the screen goes dark, never white. (Each page also sets
   this inline in its head, so it holds before this file has arrived.) */
html { background: var(--navy-ink); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(var(--header-h-solid) + 16px); }
/* The home page's section links (the hero's Discover The East Bend, the menu, the footer) land
   flush under the header, not 16px short with a strip of the section above showing. */
#vision, #timeline, #news, #design-team, #partners, #sign { scroll-margin-top: -16px; }
body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
/* <picture> only offers the WebP; it takes no box, so every img rule lays out as before. */
picture { display: contents; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
::selection { background: var(--tan); color: var(--navy); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 999;
  background: var(--navy); color: var(--cream); padding: 12px 18px;
  font-family: var(--font-label); font-stretch: 125%; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius);
}
.skip-link:focus { top: 16px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: var(--section) 0; position: relative; }
.section--tight { padding: clamp(64px, 7vw, 104px) 0; }
/* Two same-colour sections that read as one: a single tight gap between them (News). */
.section--close-above { padding-top: clamp(68px, 8vw, 118px); }
.section--close-below { padding-bottom: clamp(64px, 7vw, 104px); }
.section--flush-top { padding-top: 0; }
/* The Gallery's filter buttons and the Contact page's tabs sit closer under the page hero.
   Phones keep the usual 84px. */
.section--snug-top { padding-top: clamp(84px, 6vw, 96px); }
.section--paper { background: var(--paper); }
.section--cream { background: var(--cream); }
.section--sand  { background: var(--sand); }
.section--white { background: #fff; }
.section--navy  { background: var(--navy); color: var(--blue-tint); }
.section--deep  { background: var(--navy-deep); color: var(--blue-tint); }
/* The footer's darkest navy, on a section--deep, which gives it the light text. Every dark
   section matches the footer (owner, 28 Sep 2026: "the darkest color blue we use"): In the
   News and Partners, the text heroes and the phone menu. */
.section--ink   { background: var(--navy-ink); }
.section--texture::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('../img/texture-watercolor.jpg') center / cover; opacity: .18; mix-blend-mode: multiply;
}
.section--texture > * { position: relative; }

/* ─── TYPE ────────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center;
  font-family: var(--font-label); font-stretch: 125%;
  font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brown-dark); line-height: 1.4; margin-bottom: 26px;
}
.eyebrow--center { justify-content: center; }
.section--navy .eyebrow, .section--deep .eyebrow { color: var(--tan); }

.h-display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display); font-weight: 500; color: var(--navy);
  letter-spacing: -0.015em; line-height: 1.08;
}
.h-display { font-size: clamp(47px, 6.9vw, 112px); line-height: 1.0; letter-spacing: -0.025em; }
.h1 { font-size: clamp(43px, 5.6vw, 86px); line-height: 1.04; letter-spacing: -0.02em; }
.h2 { font-size: var(--h2); }
.h3 { font-size: clamp(27px, 2.55vw, 38px); line-height: 1.15; }
.h4 { font-size: 23px; line-height: 1.25; letter-spacing: -0.005em; }
/* Titles read as one weight in one colour: <em> stays semantic but takes no
   italic and no accent colour, here or on any dark section. */
:is(.h-display, .h1, .h2, .h3, .h4) em { font-style: normal; color: inherit; font-weight: inherit; }
.section--navy :is(.h-display,.h1,.h2,.h3,.h4), .section--deep :is(.h-display,.h1,.h2,.h3,.h4) { color: var(--cream); }

.lead { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.6; font-weight: 300; color: var(--navy); }
.lead--body { color: var(--body); font-size: clamp(18.5px, 1.4vw, 20px); }   /* The Vision: body colour; a touch smaller at 18.5–20px (owner 2026-09-26; was 20–21.5, and 23.5 before 2026-09-24) */
.text-lg { font-size: clamp(18px, 1.35vw, 20px); line-height: 1.7; }
.section--navy .lead, .section--deep .lead { color: var(--cream); }
.prose p + p { margin-top: 1.1em; }
.prose a { color: var(--navy); text-decoration-color: var(--tan); text-underline-offset: 3px; }
.muted { opacity: .75; }
.small { font-size: 14px; line-height: 1.6; }
.center { text-align: center; }
.mt-s { margin-top: 18px; } .mt-m { margin-top: 32px; } .mt-l { margin-top: 56px; }

.section-head { max-width: 780px; margin-bottom: clamp(44px, 5vw, 72px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .h2 + p { margin-top: 22px; }
.section-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.section-head--row > div { max-width: 720px; }

/* ─── BUTTONS & LINKS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-label); font-stretch: 125%;
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; line-height: 1;
  padding: 18px 30px; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);   /* hover only fades the colour: no lift, shadow or sliding arrow (owner, 26 Sep 2026) */
}
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }   /* a tight button squeezes the label, never the arrow */
.btn--tan   { background: var(--tan); color: var(--navy); }
.btn--tan:hover { background: var(--cream); }
/* Light blue (the home hero's Discover The East Bend). Navy on a light fill reads lighter than the
   same 700 weight in cream on navy beside it, so a hairline stroke evens the two out. */
.btn--blue { background: var(--blue-tint); color: var(--navy); -webkit-text-stroke: .45px currentColor; }
.btn--blue:hover { background: var(--cream); }
.btn--navy  { background: var(--navy); color: var(--cream); }
.btn--navy:hover { background: var(--navy-deep); }
.btn--ghost { border-color: rgba(23,52,81,.35); color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.btn--ghost-light { border-color: rgba(249,238,227,.5); color: var(--cream); }
.btn--ghost-light:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn--rect { border-radius: 14px; }   /* a rounded rectangle rather than the usual pill */

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-label); font-stretch: 125%;
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy); text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--tan);
  transition: gap .3s var(--ease), color .3s;
}
.link-arrow svg { width: 14px; height: 14px; }
.link-arrow:hover { gap: 18px; color: var(--brown-dark); }
.section--navy .link-arrow, .section--deep .link-arrow { color: var(--cream); }
.section--navy .link-arrow:hover, .section--deep .link-arrow:hover { color: var(--tan); }

/* ─── HEADER ──────────────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header::before { /* soft scrim so cream nav reads over bright skies */
  content: ''; position: absolute; inset: 0 0 -40px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,25,41,.55), rgba(10,25,41,0));
  transition: opacity .4s;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; max-width: none; }
/* The horizontal lockup, centred in the header row. Width sets its size and the art's
   proportions set its height. */
.brand { position: relative; display: block; width: 316px; aspect-ratio: 734 / 122; flex-shrink: 0; }
.brand img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .35s; }
.brand .logo-navy { opacity: 0; }

.nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 36px); list-style: none; }
.nav-links a {
  position: relative; display: block; padding: 8px 0;
  font-family: var(--font-label); font-stretch: 125%;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream); text-decoration: none; transition: color .3s; white-space: nowrap;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { padding: 14px 22px; font-size: 10.5px; }
.nav .btn--tan:hover { background: #fff; }   /* white over the dark hero; the light header keeps its light blue, below (owner, 26 Sep 2026) */

.site-header.is-solid { background: rgba(252,248,243,.96); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); box-shadow: 0 1px 0 var(--line); }
.site-header.is-solid::before { opacity: 0; }
.site-header.is-solid .logo-cream { opacity: 0; }
.site-header.is-solid .logo-navy { opacity: 1; }
.site-header.is-solid .nav-links a { color: var(--navy); }
.site-header.is-solid .nav .btn--tan { background: var(--navy); color: var(--cream); }
.site-header.is-solid .nav .btn--tan:hover { background: var(--blue-tint); color: var(--navy); }   /* the light blue of Discover The East Bend (owner, 26 Sep 2026) */

.menu-toggle {
  display: none; width: 46px; height: 46px; border-radius: 50%; position: relative;
  border: 1px solid rgba(249,238,227,.45); color: var(--cream);
}
.menu-toggle span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease), opacity .2s; }
/* centred in the 44px inside the border: three 1.5px lines 5.5px apart span 12.5px */
.menu-toggle span:nth-child(1) { top: 15.75px; } .menu-toggle span:nth-child(2) { top: 21.25px; } .menu-toggle span:nth-child(3) { top: 26.75px; }
.site-header.is-solid .menu-toggle { color: var(--navy); border-color: var(--line); }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* The menu is the dark navy, not a photograph, and a touch translucent: the page
   stays faintly visible behind it (softened by a light blur so the links stay crisp).
   It starts under the header, which takes the same tint while it is open, so a menu too
   tall for a short phone scrolls beneath the logo rather than through it.
   The links and Share Your Thoughts sit together in the middle of it (owner, 26 Sep 2026):
   auto margins rather than centring, so a menu taller than the screen still scrolls from its top. */
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0; z-index: 90; background: rgba(10,25,41,.9);   /* the footer's navy (owner, 28 Sep 2026; was the deep navy) */
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; flex-direction: column;
  padding: 24px var(--gutter) 40px;
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
  overflow-y: auto;
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }   /* visible at once, so focus can land in it */
.menu-open { overflow: hidden; }
.menu-open .site-header { background: rgba(10,25,41,.9); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.menu-open .site-header::before { opacity: 0; }
.menu-open .site-header .logo-cream { opacity: 1; } .menu-open .site-header .logo-navy { opacity: 0; }
.menu-open .site-header .menu-toggle { color: var(--cream); border-color: rgba(249,238,227,.45); }
.mobile-menu ul { list-style: none; }
.mobile-menu > ul { margin-top: auto; }
.mobile-menu li { border-bottom: 1px solid var(--line-light); }
.mobile-menu li a {
  display: flex; justify-content: space-between; align-items: center; padding: 16px 0;
  font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 7.4vw, 40px); line-height: 1.1;   /* a nudge smaller (owner, 26 Sep 2026; was 30px, 8vw, 44px) */
  color: var(--cream); text-decoration: none; letter-spacing: -0.01em;
  transform: translateY(12px); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease), color .3s;
}
.mobile-menu li a small { font-family: var(--font-label); font-stretch: 125%; font-size: 10px; letter-spacing: .2em; color: var(--tan); font-weight: 700; }
.mobile-menu li a[aria-current="page"] { color: var(--tan); }
.menu-open .mobile-menu li a { transform: none; opacity: 1; }
.menu-open .mobile-menu li:nth-child(2) a { transition-delay: .04s; } .menu-open .mobile-menu li:nth-child(3) a { transition-delay: .08s; }
.menu-open .mobile-menu li:nth-child(4) a { transition-delay: .12s; } .menu-open .mobile-menu li:nth-child(5) a { transition-delay: .16s; }
.menu-open .mobile-menu li:nth-child(6) a { transition-delay: .2s; }  .menu-open .mobile-menu li:nth-child(7) a { transition-delay: .24s; }
.mobile-menu__foot { margin-top: 40px; margin-bottom: auto; display: grid; }
/* From 901px up the header keeps its Share Your Thoughts button beside the menu key, so the
   menu's own is dropped there (and the links centre alone); phones keep it. */
@media (min-width: 900.02px) { .mobile-menu__foot { display: none; } .mobile-menu > ul { margin-bottom: auto; } }
/* A phone with its browser bars out has too little height for the links at full size:
   they scale with the window's height, as the timeline's menu does, so the list and
   Share Your Thoughts fit above the fold. */
@media (max-height: 820px) {
  .mobile-menu li a { font-size: min(clamp(28px, 7.4vw, 40px), clamp(22px, 3.9vh, 35px)); padding: clamp(8px, 1.4vh, 16px) 0; }
  .mobile-menu__foot { margin-top: clamp(20px, 3vh, 40px); }
}

/* ─── HOME HERO ───────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end;
  color: var(--cream); overflow: hidden; background: var(--navy-deep);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; animation: heroZoomHome 30s var(--ease-out) both, heroZoomLoop 30s ease-in-out 30s infinite alternate; }
.page-hero__media img, .hero__media img { will-change: transform; }
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes heroZoomHome { from { transform: scale(1.16); } to { transform: scale(1); } }   /* the home page: from a touch closer, a nudge longer */
/* ...then, from where that ends, back in and out again for as long as the page is open */
@keyframes heroZoomLoop { from { transform: scale(1); } to { transform: scale(1.16); } }
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10,25,41,.94) 0%, rgba(10,25,41,.80) 30%, rgba(10,25,41,.58) 60%, rgba(10,25,41,.66) 100%),
    linear-gradient(to right, rgba(10,25,41,.74), rgba(10,25,41,.18) 70%);
}
.hero__content { position: relative; width: 100%; padding-bottom: clamp(56px, 9vh, 110px); padding-top: calc(var(--header-h) + 88px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 48px; }
.hero .eyebrow { color: var(--tan); }
.hero h1 { color: var(--cream); max-width: 15ch; }
.hero .btn-row { margin-top: 42px; }   /* room under the title: a touch more, then a small touch back (owner, 26 Sep 2026) */
.hero .btn { font-size: 12px; padding: 19px 32px; gap: 13px; }   /* the homepage hero's two buttons, a size up (a bump less than before, owner 26 Sep 2026) */
.hero .btn svg { width: 14px; height: 14px; margin: -1px 0; }   /* the arrow never makes its button the taller of the pair */
@media (min-width: 640.02px) {   /* and a bump more above phone widths */
  .hero .btn { font-size: 13px; padding: 21px 36px; gap: 14px; }
  .hero .btn svg { width: 17px; height: 17px; margin: -2px 0; }   /* the arrow, larger without making the button taller */
}
.hero__foot {
  margin-top: clamp(48px, 8vh, 84px); padding-top: 22px; border-top: 1px solid var(--line-light);
  display: flex; justify-content: space-between; align-items: center; gap: 10px 28px; flex-wrap: wrap;
  font-family: var(--font-label); font-stretch: 125%; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(249,238,227,.7);
}
.hero__foot span { display: inline-flex; align-items: center; gap: 10px; }
.hero__foot svg { width: 14px; height: 14px; color: var(--tan); }
@media (min-width: 640.02px) { .hero__foot { margin-top: clamp(60px, 10vh, 100px); } }   /* a bump more room under the buttons (phones keep theirs) */
/* Desktop: the buttons a nudge lower. The rule under them gives up the same 10px, so the
   heading above and the line below stay exactly where they were (owner, 2026-09-24). */
@media (min-width: 1180.02px) {
  .hero .btn-row { margin-top: 52px; }
  .hero__foot { margin-top: calc(clamp(60px, 10vh, 100px) - 10px); }
}


/* ─── PAGE HERO (interior) ────────────────────────────────────────── */
.page-hero {
  position: relative; min-height: clamp(460px, 74vh, 760px); display: flex; align-items: flex-end;
  color: var(--cream); overflow: hidden; background: var(--navy-deep);
}
.page-hero--short { min-height: clamp(400px, 56vh, 560px); }
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 22s var(--ease-out) both; }
.page-hero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,25,41,.94) 0%, rgba(10,25,41,.74) 42%, rgba(10,25,41,.6) 100%), linear-gradient(to right, rgba(10,25,41,.72), rgba(10,25,41,.16) 72%); }
.page-hero__content { position: relative; width: 100%; padding: calc(var(--header-h) + 72px) 0 clamp(48px, 7vw, 88px); }
.page-hero .eyebrow { color: var(--tan); }
.page-hero h1 { color: var(--cream); max-width: 16ch; }
.page-hero p { max-width: 600px; margin-top: 22px; color: rgba(249,238,227,.86); font-size: clamp(17px, 1.3vw, 19px); text-wrap: pretty; }   /* no one-word last line */
@media (max-width: 374px) { .page-hero p br { display: none; } }
.crumbs { display: flex; gap: 10px; list-style: none; margin-bottom: 26px; font-family: var(--font-label); font-stretch: 125%; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(249,238,227,.65); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--tan); }
.crumbs li + li::before { content: '/'; margin-right: 10px; opacity: .5; }
.crumbs li[aria-current] { color: var(--tan); }

/* ─── SUBNAV (in-page anchors) ────────────────────────────────────── */
.subnav { position: sticky; top: var(--header-h-solid); z-index: 40; background: rgba(252,248,243,.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.subnav ul { display: flex; gap: 8px; list-style: none; overflow-x: auto; padding: 14px 0; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a {
  display: block; white-space: nowrap; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line);
  font-family: var(--font-label); font-stretch: 125%; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--navy); text-decoration: none; transition: background .25s, color .25s, border-color .25s;
}
.subnav a.is-active { background: var(--navy); color: var(--cream); border-color: var(--navy); }
@media (hover: hover) and (pointer: fine) { .subnav a:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); } }

/* ─── STATEMENT + STATS ───────────────────────────────────────────── */
/* A line break for wider screens only: on a phone the line wraps on its own. */
@media (max-width: 700px) { .br-wide { display: none; } }
.statement-media { margin-top: clamp(56px, 7vw, 104px); aspect-ratio: 16 / 9; }   /* the before/after slider, the full measure: well past the copy's */
/* The intro heading keeps its three lines on a phone too: it sets to fit the longest,
   "behind a scrapyard fence." (11.27em), and never above the usual 36px (owner, 2026-09-24). */
@media (max-width: 640px) {
  #intro .section-head { container-type: inline-size; }
  #intro .h2 { font-size: min(36px, 100cqi / 11.5); }
}

.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); }
.stat { padding: 34px 28px 0 0; }
.stat + .stat { padding-left: 28px; border-left: 1px solid var(--line); }
.stat__num { font-family: var(--font-display); font-weight: 500; font-size: clamp(46px, 5vw, 80px); line-height: 1; color: var(--navy); letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 4px; }
.stat__num sup { font-size: .45em; letter-spacing: 0; top: 0; align-self: flex-start; margin-top: .15em; }   /* the number's own navy */
.stat__label { margin-top: 16px; font-family: var(--font-label); font-stretch: 125%; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brown-dark); line-height: 1.6; }
.stat p { margin-top: 10px; font-size: 15px; line-height: 1.6; }

/* ─── SPLIT (image + text) ────────────────────────────────────────── */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(32px, 4vw, 72px); align-items: center; }
.split__media { grid-column: 1 / span 7; position: relative; }
.split__body  { grid-column: 8 / span 5; }
.split--flip .split__media { grid-column: 6 / span 7; order: 2; }
.split--flip .split__body  { grid-column: 1 / span 5; order: 1; }
.split--even .split__media { grid-column: 1 / span 6; } .split--even .split__body { grid-column: 7 / span 6; }
.split--even.split--flip .split__media { grid-column: 7 / span 6; } .split--even.split--flip .split__body { grid-column: 1 / span 6; }
.split__body .h2, .split__body .h3 { margin-bottom: 24px; }
.split__body .btn-row, .split__body .link-arrow { margin-top: 34px; }
/* The home page's Vision title keeps its four lines (the breaks are in the markup): where
   its column runs short, it steps down just enough for "built for Nashville," (7.9em) to fit. */
.split__body--fit { container-type: inline-size; }
.split__body--fit .h2 { font-size: min(var(--h2), 100cqi / 8.05); }
/* two paragraphs side by side under a split, across its full width */
.prose-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 72px); margin-top: clamp(48px, 5vw, 80px); padding-top: clamp(32px, 3.5vw, 48px); border-top: 1px solid var(--line); }

.frame { position: relative; overflow: hidden; border-radius: var(--radius-img); background: var(--sand); isolation: isolate; }   /* isolate: the corners stay clipped while the photo scales (Safari) */
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
@media (hover: hover) and (pointer: fine) { .frame:hover img { transform: scale(1.04); } }
.frame--tall { aspect-ratio: 4 / 5; }
.frame--wide { aspect-ratio: 16 / 10; }
.frame--land { aspect-ratio: 4 / 3; }
.frame__tag {
  position: absolute; left: 18px; bottom: 18px; padding: 9px 14px; border-radius: 999px;
  background: rgba(10,25,41,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--cream);
  font-family: var(--font-label); font-stretch: 125%; font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}

.checklist { list-style: none; margin-top: 28px; border-top: 1px solid var(--line); }
.checklist li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.55; color: var(--body); }
.checklist li::before { content: ''; width: 18px; height: 1px; background: var(--brown); margin-top: 12px; }
.checklist strong { font-weight: 500; color: var(--navy); }
.section--navy .checklist, .section--navy .checklist li { border-color: var(--line-light); color: var(--blue-tint); }
.section--navy .checklist li::before { background: var(--tan); }
.section--navy .checklist strong { color: var(--cream); }

/* ─── PRINCIPLES ──────────────────────────────────────────────────── */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-light); }
.principle { padding: 44px 40px 48px 0; border-bottom: 1px solid var(--line-light); position: relative; }
.principle:not(:nth-child(3n+1)) { padding-left: 40px; border-left: 1px solid var(--line-light); }
.principle__num { font-family: var(--font-label); font-stretch: 125%; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; color: var(--tan); }
.principle__icon { width: 46px; height: 46px; color: var(--tan); margin: 26px 0 22px; }
.principle h3 { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--cream); margin-bottom: 12px; letter-spacing: -0.01em; }
.principle p { font-size: 15.5px; line-height: 1.7; color: var(--blue-tint); }
.principles--light { border-color: var(--line); }
.principles--light .principle { border-color: var(--line); }
.principles--light .principle h3 { color: var(--navy); }
.principles--light .principle p { color: var(--body); }
.principles--light .principle__icon { color: var(--brown); }
.principles--light .principle__num { color: #916854; }   /* small text: a shade deeper than the icons */
/* The Vision page's six principles, larger above phone widths so they read at a glance. */
@media (min-width: 640.02px) {
  #principles .principle__num { font-size: 12px; }
  #principles .principle__icon { width: 58px; height: 58px; }
  #principles .principle h3 { font-size: clamp(27px, 2.3vw, 32px); text-wrap: balance; }   /* no one-word second lines */
  #principles .principle p { font-size: 17.5px; }
}

/* ─── QUICK LINKS (home) ──────────────────────────────────────────────
   Two panels side by side, edge to edge and top to bottom, each the short version of a
   section that lives on its own page (the principles on the Vision page, the stages on
   the District page) and each a link to it: the subject, a photo, and the way in. The
   principles panel sets its photo where its list used to be; the stages panel runs over
   its photo, under a navy shade. Each panel's content is centred both ways. */
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--navy-deep); }
.quick__panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: clamp(64px, 7vw, 112px) clamp(32px, 5vw, 88px);
  background: #faf4ed; color: var(--body); text-decoration: none; transition: background .35s var(--ease);
}
.quick__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 3.2vw, 50px); line-height: 1.08; letter-spacing: -0.02em; color: var(--navy); }
.quick__title em { font-style: normal; }
.quick > a.quick__panel .quick__title { font-size: clamp(32px, 3.5vw, 55px); }   /* Guiding Principles and Stages & Venues, a nudge up */
.quick__media { position: relative; width: 100%; max-width: 600px; aspect-ratio: 2 / 1; margin: clamp(28px, 3vw, 40px) 0; border-radius: var(--radius-img); overflow: hidden; background: var(--sand); isolation: isolate; }
.quick__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.quick__panel--photo { background: var(--navy-deep); }
.quick__panel--photo img { z-index: -2; }
/* darkest behind the copy in the middle; more of the stage shows toward the edges */
.quick__panel--photo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(10,25,41,.86) 0%, rgba(10,25,41,.62) 100%); }
.quick__panel--photo .eyebrow { color: var(--tan); }
.quick__panel--photo .quick__title { color: var(--cream); }
.quick__panel--photo p { max-width: 460px; margin: 22px 0 32px; color: rgba(249,238,227,.88); text-wrap: balance; }
.quick__panel--photo .link-arrow { color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  .quick > a.quick__panel:hover { background: #fdfbf9; }
  .quick > a.quick__panel:hover .link-arrow { gap: 18px; color: var(--brown-dark); }
  .quick > a.quick__panel:hover img { transform: scale(1.04); }
  .quick > a.quick__panel--photo:hover { background: var(--navy-deep); }
  .quick > a.quick__panel--photo:hover .link-arrow { color: var(--tan); }
}
/* The home page's close, in the same two panels: the three latest stories on the left
   (each a link out: its photo small, the source in Medium over the date in Regular), and
   on the right Get Involved over Contact. */
.quick__panel--news { background: #fff; }
.news-list { list-style: none; width: 100%; max-width: 600px; margin: clamp(28px, 3vw, 40px) 0; border-top: 1px solid var(--line); text-align: left; }
.news-list li { border-bottom: 1px solid var(--line); }
.news-list a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 22px; align-items: start; padding: 22px 0; color: inherit; text-decoration: none; }
.news-list__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--sand); isolation: isolate; }
.news-list__body, .news-list__meta, .news-list__title, .news-list__text { display: block; }
.news-list__meta { margin-bottom: 6px; font-size: 14px; line-height: 1.4; }
.news-list__meta strong { font-weight: 500; color: var(--navy); -webkit-text-stroke: .3px currentColor; }   /* the source bold, the date regular */
.news-list__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.35vw, 20px); line-height: 1.3; letter-spacing: -0.005em; color: var(--navy); transition: color .3s; }
.news-list__title svg { display: inline-block; width: 12px; height: 12px; margin-left: 2px; color: var(--brown); }
.news-list__text { margin-top: 8px; font-size: 15px; line-height: 1.6; }
.quick__panel--navy { background: var(--navy); }
.quick__panel--navy .eyebrow { color: var(--tan); }
.quick__panel--navy .quick__title { color: var(--cream); }
.quick__panel--navy .quick__copy { max-width: 440px; margin: 20px 0 30px; color: rgba(249,238,227,.88); text-wrap: balance; }
.quick__panel--navy .newsletter { width: 100%; max-width: 460px; margin-top: 0; }   /* the subpages' newsletter signup */
.quick__panel--tan { background: var(--tan); }
.quick__panel--blue { background: var(--blue-tint); }   /* the home page's Contact panel: the light blue of Watch it Rise (owner, 2026-09-24) */
.quick__panel--tan .eyebrow, .quick__panel--blue .eyebrow { color: #6a4736; }   /* a shade deeper: small text on tan (4.8:1 on the light blue) */
/* The FAQ page's newsletter panel in the light blue (owner, 2026-09-24): navy copy, and the
   signup field in a light key rather than the navy panels' dark one. */
.quick__panel--blue .quick__copy { max-width: 440px; margin: 20px 0 30px; color: var(--navy); text-wrap: balance; }
.quick__panel--blue .newsletter { width: 100%; max-width: 460px; margin-top: 0; background: rgba(255,255,255,.55); border-color: rgba(23,52,81,.22); }
.quick__panel--blue .newsletter:focus-within { border-color: var(--navy); }
.quick__panel--blue .newsletter input { color: var(--navy); }
.quick__panel--blue .newsletter input::placeholder { color: rgba(23,52,81,.6); }
.quick__panel--blue .newsletter-msg { color: #6a4736; }
.quick__panel--tan .contact-links, .quick__panel--blue .contact-links { width: 100%; max-width: 440px; margin-top: 28px; list-style: none; border-top: 1px solid rgba(23,52,81,.2); text-align: left; }
@media (hover: hover) and (pointer: fine) {
  .news-list a:hover .news-list__title { color: var(--brown-dark); }
  .news-list a:hover img { transform: scale(1.05); }
}

/* ─── MOSAIC (district preview) ───────────────────────────────────── */
.mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(150px, 16vw, 230px); gap: 14px; }
.tile { position: relative; overflow: hidden; border-radius: var(--radius-img); display: block; color: var(--cream); text-decoration: none; background: var(--navy); isolation: isolate; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); z-index: -2; }
.tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10,25,41,.85) 0%, rgba(10,25,41,.1) 55%, rgba(10,25,41,0) 100%); transition: opacity .5s; }
@media (hover: hover) and (pointer: fine) { .tile:hover img { transform: scale(1.06); } }
.tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 2vw, 30px); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.tile__kicker { display: block; font-family: var(--font-label); font-stretch: 125%; font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--tan); margin-bottom: 8px; }
.tile__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(21px, 1.9vw, 30px); line-height: 1.12; letter-spacing: -0.01em; }
.tile__go { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(249,238,227,.5); display: grid; place-items: center; transition: background .3s, color .3s, transform .3s var(--ease); }
.tile__go svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .tile:hover .tile__go { background: var(--tan); color: var(--navy); border-color: var(--tan); transform: rotate(-45deg); } }
.tile--a { grid-column: span 7; grid-row: span 2; }
.tile--b { grid-column: span 5; grid-row: span 1; }
.tile--c { grid-column: span 5; grid-row: span 1; }
.tile--d { grid-column: span 4; grid-row: span 2; }
.tile--e { grid-column: span 4; grid-row: span 2; }
.tile--f { grid-column: span 4; grid-row: span 2; }

/* ─── FULL-BLEED BAND ─────────────────────────────────────────────── */
.band { position: relative; min-height: clamp(460px, 80vh, 760px); display: flex; align-items: center; color: var(--cream); overflow: hidden; background: var(--navy-deep); }
@media (min-width: 640.02px) { .band { min-height: clamp(520px, 92vh, 880px); } }   /* taller above phone widths */
.band__media { position: absolute; inset: -12% 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,25,41,.9) 0%, rgba(10,25,41,.66) 48%, rgba(10,25,41,.3) 100%); }
.band .wrap { position: relative; z-index: 1; }
.band blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 4.2vw, 66px); line-height: 1.12; letter-spacing: -0.02em; max-width: 17ch; color: var(--cream); }
.band blockquote em { font-style: normal; color: inherit; }
/* On a phone the quote keeps its three lines and sets as large as the longest, "neighborhood
   begins at" (10.45em), allows: a good bit over 32px on the wider phones (owner, 2026-09-24). */
@media (max-width: 640px) {
  .band .wrap { container-type: inline-size; }
  .band blockquote { font-size: min(44px, 100cqi / 10.66); }
}
.band .eyebrow { color: var(--tan); }
.band p { max-width: 520px; margin-top: 26px; font-size: 17px; line-height: 1.7; color: rgba(249,238,227,.92); }

/* ─── TIMELINE ────────────────────────────────────────────────────── */
.timeline { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: relative; }
.timeline li::after { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line); z-index: 1; }
.timeline li:last-child::after { display: none; }
/* The same space above the button as below it: the section closes with the matching
   section--close-below padding. */
.progress-cta { display: flex; justify-content: center; margin-top: clamp(64px, 7vw, 104px); }
.progress-cta .btn { padding: 22px 42px; }
.timeline li { position: relative; padding: 42px 22px 0 0; }
.timeline li::before { content: ''; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 5px var(--cream); z-index: 2; }
.section--paper .timeline li::before { box-shadow: 0 0 0 5px var(--paper); }
.timeline li.is-now::before { background: var(--brown); box-shadow: 0 0 0 5px var(--cream), 0 0 0 10px rgba(156,114,93,.25); }
.timeline li.is-next::before { background: var(--cream); border: 1px dashed var(--navy); }
.timeline__when { font-family: var(--font-label); font-stretch: 125%; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brown-dark); display: block; margin-bottom: 10px; }
.timeline h3 { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--navy); margin-bottom: 8px; letter-spacing: -0.005em; }
.timeline p { font-size: 14.5px; line-height: 1.6; }
.timeline li.is-next h3, .timeline li.is-next p { opacity: .72; }
.note { margin-top: 44px; padding: 22px 28px; border-left: 2px solid var(--brown); background: rgba(255,255,255,.55); font-size: 15px; line-height: 1.65; font-weight: 300; color: var(--body); max-width: 860px; }

/* ─── NEWS ────────────────────────────────────────────────────────── */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); }
.news-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.news-card .frame { aspect-ratio: 16 / 10; margin-bottom: 24px; }
.news-card__meta { display: flex; flex-wrap: wrap; row-gap: 4px; gap: 12px; align-items: center; font-family: var(--font-label); font-stretch: 125%; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brown-dark); margin-bottom: 14px; }
.news-card__meta span + span::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; margin-right: 12px; vertical-align: middle; }
.news-card h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.28; color: var(--navy); letter-spacing: -0.01em; margin-bottom: 12px; transition: color .3s; }
.news-card p { font-size: 15px; line-height: 1.65; }
.news-card p { margin-bottom: 22px; }
.news-card .link-arrow { margin-top: auto; align-self: flex-start; }
@media (hover: hover) and (pointer: fine) { .news-card:hover h3 { color: var(--brown-dark); } }
.section--navy .news-card h3, .section--deep .news-card h3 { color: var(--cream); }
.section--navy .news-card__meta, .section--deep .news-card__meta { color: var(--tan); }

.press-list { list-style: none; border-top: 1px solid var(--line); }
.press-list li a { display: grid; grid-template-columns: 200px 1fr auto; gap: 28px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: padding .35s var(--ease), background .35s; }
@media (hover: hover) and (pointer: fine) { .press-list li a:hover { padding-left: 14px; padding-right: 14px; background: rgba(255,255,255,.6); } }
.press-list__outlet { font-family: var(--font-label); font-stretch: 125%; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brown-dark); line-height: 1.6; }
.press-list__outlet time { display: block; color: var(--body); opacity: .75; font-weight: 600; }
.press-list__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.3; color: var(--navy); }
.press-list svg { width: 16px; height: 16px; color: var(--brown); }

/* ─── FAQ ─────────────────────────────────────────────────────────── */
.faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.faq-aside { position: sticky; top: 120px; }
.faq-group + .faq-group { margin-top: 64px; }
.faq-group__title { font-family: var(--font-label); font-stretch: 125%; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brown-dark); padding-bottom: 18px; border-bottom: 1px solid var(--navy); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.35; color: var(--navy); letter-spacing: -0.005em;
  transition: color .3s;
}
.faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--brown-dark); } }
.faq__icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); position: relative; transition: background .3s, border-color .3s, transform .4s var(--ease); }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--navy); transform: translate(-50%, -50%); transition: transform .4s var(--ease), background .3s; }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq[open] .faq__icon { background: var(--navy); border-color: var(--navy); transform: rotate(180deg); }
.faq[open] .faq__icon::before, .faq[open] .faq__icon::after { background: var(--cream); }
.faq[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { padding: 0 64px 30px 0; max-width: 760px; }
.faq__a p + p, .faq__a p + ul, .faq__a ul + p { margin-top: 14px; }
.faq__a ul { padding-left: 20px; }
.faq__a li + li { margin-top: 6px; }
.faq__a a { color: var(--navy); text-decoration-color: var(--tan); text-underline-offset: 3px; }
.faq__a strong { font-weight: 500; }   /* Medium is TT Quaris's heaviest loaded cut; 700 would be a faked bold */
.faq-cats { list-style: none; margin-top: 30px; border-top: 1px solid var(--line); }
.faq-cats a { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--navy); font-size: 16px; transition: color .25s, padding .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .faq-cats a:hover { color: var(--brown-dark); padding-left: 8px; } }
.faq-cats span { font-family: var(--font-label); font-stretch: 125%; font-size: 10.5px; font-weight: 700; color: var(--brown); letter-spacing: .1em; }

/* ─── TEAM / PARTNERS ─────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.team-card { background: var(--paper); padding: 40px 30px 34px; display: flex; flex-direction: column; min-height: 250px; text-decoration: none; color: inherit; transition: background .35s; }
.section--white .team-card { background: #fff; }
@media (hover: hover) and (pointer: fine) { .team-card:hover { background: var(--cream); } }
.team-card__mark { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.2vw, 34px); color: var(--navy); line-height: 1; letter-spacing: 0.01em; }
.team-card__mark .accent { color: var(--brown); }
.team-card__role { margin-top: 14px; font-family: var(--font-label); font-stretch: 125%; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brown-dark); }
.team-card p { margin-top: 16px; font-size: 14.5px; line-height: 1.6; flex: 1; }
.team-card .link-arrow { margin-top: 22px; align-self: flex-start; font-size: 10px; }

.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.partner-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 210px; padding: 32px 30px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
@media (hover: hover) and (pointer: fine) { .partner-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(10,25,41,.3); border-color: var(--tan); } }
.partner-card__name { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--navy); letter-spacing: -0.01em; }
.partner-card p { font-size: 14.5px; line-height: 1.6; margin-top: 12px; }
.partner-card .link-arrow { margin-top: 24px; align-self: flex-start; }

/* ─── CTA PANELS ──────────────────────────────────────────────────── */
.cta-panels { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; }
.cta-panel { position: relative; overflow: hidden; border-radius: var(--radius-img); padding: clamp(36px, 4.5vw, 64px); min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--cream); background: var(--navy); isolation: isolate; text-decoration: none; }
.cta-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease); }
.cta-panel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10,25,41,.92), rgba(10,25,41,.35)); }
@media (hover: hover) and (pointer: fine) { .cta-panel:hover img { transform: scale(1.04); } }
.cta-panel--plain { background: var(--tan); color: var(--navy); }
/* The plain (tan) panel has no photo, so no shade over it either. */
.cta-panel--plain::after { display: none; }
.cta-panel .eyebrow { color: var(--tan); }
.cta-panel--plain .eyebrow { color: #6a4736; }   /* a shade deeper: small text on tan */
.cta-panel h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 3.2vw, 50px); line-height: 1.08; letter-spacing: -0.02em; max-width: 14ch; }
.cta-panel p { margin-top: 18px; max-width: 460px; opacity: .88; }
.cta-panel .btn { margin-top: 32px; align-self: flex-start; }
.contact-links a { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(23,52,81,.2); text-decoration: none; color: var(--navy); font-size: 19px; font-weight: 400; transition: padding .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .contact-links a:hover { padding-left: 8px; } }
.contact-links svg { width: 15px; height: 15px; }

/* ─── FORMS ───────────────────────────────────────────────────────── */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label, .field .label { font-family: var(--font-label); font-stretch: 125%; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); }
.field label .opt { color: #956c57; letter-spacing: .1em; font-weight: 500; text-transform: none; font-stretch: 100%; font-family: var(--font-display); font-size: 12px; margin-left: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 15px 18px; border-radius: var(--radius); border: 1px solid rgba(23,52,81,.2); background: #fff;
  font-size: 16px; color: var(--navy-deep); outline: none; transition: border-color .25s, box-shadow .25s;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: rgba(23,52,81,.38); }
.field input:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(99,129,157,.16); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--body); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--navy); flex-shrink: 0; cursor: pointer; }
.form__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.form__note { font-size: 13px; line-height: 1.6; font-weight: 300; color: var(--body); opacity: .85; }
.form__error { display: none; font-size: 14px; color: #9b3b2a; }
.form.has-error .form__error { display: block; }
.hp { position: absolute !important; left: -9999px !important; }
.form-success { display: none; padding: 44px 36px; border-radius: var(--radius); border: 1px solid var(--tan); background: var(--cream); text-align: center; }
.form-success.is-visible { display: block; animation: fadeUp .5s var(--ease); }
.form-success__mark { width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 50%; background: var(--navy); color: var(--cream); display: grid; place-items: center; }
.form-success__mark svg { width: 20px; height: 20px; }
.form-success h3 { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.2; text-wrap: balance; padding-top: 7.5px; color: var(--navy); margin-bottom: 17.5px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.form-card { background: #fff; border-radius: var(--radius); padding: clamp(28px, 4vw, 56px); box-shadow: 0 22px 44px -26px rgba(10,25,41,.12); border: 1px solid var(--line); }   /* a much lighter shadow (owner, 2026-09-24) */

/* newsletter inline (footer) */
.newsletter { display: flex; gap: 8px; margin-top: 20px; padding: 6px; border-radius: 999px; background: rgba(249,238,227,.07); border: 1px solid var(--line-light); transition: border-color .25s; }
.newsletter:focus-within { border-color: var(--tan); }
.newsletter input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; padding: 10px 16px; color: var(--cream); font-size: 15px; }
@media (pointer: coarse) { .newsletter input { font-size: 16px; } }   /* iOS would zoom the page into a smaller field */
.newsletter input::placeholder { color: rgba(179,198,214,.6); }
.newsletter .btn { padding: 14px 20px; font-size: 10px; }
.newsletter-msg { margin-top: 12px; font-size: 14px; color: var(--tan); min-height: 1.4em; }

/* ─── TABS (contact) ──────────────────────────────────────────────── */
.tabs { display: inline-flex; gap: 6px; padding: 7px; border-radius: 999px; background: #fff; border: 1px solid var(--line); margin-bottom: clamp(40px, 5vw, 64px); flex-wrap: wrap; }
.tab { padding: 17px 32px; border-radius: 999px; font-family: var(--font-label); font-stretch: 125%; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); transition: background .3s, color .3s; }
.tab:hover { background: var(--cream); }
.tab[aria-selected="true"] { background: var(--navy); color: #fff; }   /* the white of the pill around it (owner, 26 Sep 2026) */
.tab-panel[hidden] { display: none; }
.tab-panel.is-switched { animation: fadeUp .45s var(--ease); }
/* The Local Community tab's partners, set off below its form. */
.contact-partners { margin-top: clamp(72px, 8vw, 120px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.contact-aside .h2 { margin-bottom: 22px; }
.aside-card { margin-top: 36px; padding: 30px; border-radius: var(--radius); background: var(--cream); border: 1px solid var(--line); }
.aside-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--navy); margin-bottom: 10px; }
.aside-card p { font-size: 15px; line-height: 1.65; }
.aside-card .btn { margin-top: 22px; }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }

/* ─── GALLERY ─────────────────────────────────────────────────────── */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.filter { padding: 11px 20px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--font-label); font-stretch: 125%; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); transition: background .25s, color .25s, border-color .25s; }
.filter:hover { border-color: var(--navy); }
.filter[aria-pressed="true"] { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.gallery { columns: 2 320px; column-gap: 16px; }
.gallery__item { break-inside: avoid; margin-bottom: 16px; position: relative; display: block; width: 100%; overflow: hidden; border-radius: var(--radius-img); cursor: zoom-in; background: var(--sand); text-align: left; isolation: isolate; }
.gallery__item img { width: 100%; transition: transform 1.2s var(--ease); }
.gallery__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,25,41,.75), rgba(10,25,41,0) 50%); opacity: 0; transition: opacity .4s; }
.gallery__item:focus-visible img { transform: scale(1.04); }
@media (hover: hover) and (pointer: fine) { .gallery__item:hover img { transform: scale(1.04); } }
.gallery__item:focus-visible::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .gallery__item:hover::after { opacity: 1; } }
.gallery__cap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; color: var(--cream); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease); font-size: 15px; line-height: 1.4; }
.gallery__cap small { display: block; font-family: var(--font-label); font-stretch: 125%; font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tan); margin-bottom: 6px; }
.gallery__item:focus-visible .gallery__cap { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .gallery__item:hover .gallery__cap { opacity: 1; transform: none; } }
.gallery__item.is-hidden { display: none; }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8,20,33,.96); display: grid; grid-template-rows: 1fr auto; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
.lightbox__stage { display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; padding: 70px 90px 10px; min-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-img); box-shadow: 0 40px 80px rgba(0,0,0,.5); }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 32px 26px; color: var(--cream); }
.lightbox__cap { font-size: 16px; }
.lightbox__cap small { display: block; font-family: var(--font-label); font-stretch: 125%; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tan); margin-bottom: 4px; }
.lightbox__count { font-family: var(--font-label); font-stretch: 125%; font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--blue-tint); }
.lb-btn { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(249,238,227,.3); color: var(--cream); display: grid; place-items: center; transition: background .25s, color .25s; }
.lb-btn svg { width: 18px; height: 18px; }
.lb-close { top: 20px; right: 24px; }
.lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 22px; top: 50%; transform: translateY(-50%); }

/* ─── LOCATION MAP (annotated aerial) ─────────────────────────────── */

/* ─── FEATURE BLOCKS (district page) ──────────────────────────────── */
.feature { padding: clamp(72px, 9vw, 130px) 0; border-top: 1px solid var(--line); }
.feature--first { padding-top: clamp(28px, 3.5vw, 50px); }   /* straight after the figures: a shorter run-up */
.feature--first { scroll-margin-top: 44px; }   /* so its anchor lands with the photo clear of the subnav, like the others */
.feature:first-of-type { border-top: 0; }
.feature__num { font-family: var(--font-display); font-weight: 300; font-size: clamp(60px, 7vw, 110px); line-height: .9; color: var(--tan); letter-spacing: -0.04em; margin-bottom: 18px; display: block; }
.feature-pair { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
.feature-pair .frame { aspect-ratio: auto; height: clamp(260px, 32vw, 480px); }
/* The Promenade's title breaks after "path" wherever that first line fits: the one-column
   layout, from a 390px phone up. Beside its picture the column is too narrow for it, so
   there the title wraps on its own. */
@media (max-width: 389.98px), (min-width: 900.02px) { #promenade .h2 br { display: none; } }

.icon-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; border-top: 1px solid var(--line-light); }
.icon-row > div { padding: 32px 28px 0 0; }
.icon-row > div + div { padding-left: 28px; border-left: 1px solid var(--line-light); }
.icon-row svg { width: 36px; height: 36px; color: var(--tan); margin-bottom: 18px; }
.icon-row h3 { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--cream); margin-bottom: 8px; }
.icon-row p { font-size: 15px; line-height: 1.65; }
@media (min-width: 640.02px) { .icon-row h3 { font-size: 21px; } .icon-row p { font-size: 16px; } }   /* a bump up above phone widths (phones keep theirs) */

/* then / next: the Vision page's aerial, a nudge inside the full measure */
.then-next { aspect-ratio: 16 / 9; max-width: 1200px; }
/* ─── BEFORE / AFTER SLIDER ───────────────────────────────────────── */
.ba { --p: 50%; position: relative; }
.ba__stage {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-img); overflow: hidden;
  background: var(--sand); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.ba__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
/* clip-path (not width) so the "before" image never squashes as it narrows */
.ba__before-wrap { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ba__divider {
  position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px;
  background: var(--cream); box-shadow: 0 0 0 1px rgba(10,25,41,.22); pointer-events: none; z-index: 3;
}
.ba__handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(48px, 4.4vw, 64px); height: clamp(48px, 4.4vw, 64px); border-radius: 50%;
  background: var(--cream); color: var(--navy); display: grid; place-items: center;
  box-shadow: 0 14px 34px -10px rgba(10,25,41,.55);
}
.ba__handle svg { width: 44%; height: 44%; }
/* Invisible native range keeps the control keyboard-operable and announced;
   pointer dragging is handled on the stage so the divider tracks the cursor exactly. */
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none; background: transparent; }
.ba:focus-within .ba__handle { outline: 3px solid var(--brown); outline-offset: 3px; }
/* on the home page the slider takes the statement image's place and its 16:9 frame; on a
   phone it is a square, its corners a touch rounder (owner, 2026-09-24) */
.statement-media .ba__stage { aspect-ratio: 16 / 9; }
@media (max-width: 640px) {
  .statement-media, .statement-media .ba__stage { aspect-ratio: 1 / 1; }
  .statement-media .ba__stage { border-radius: 14px; }
}

/* doc card */
.doc-card { display: flex; gap: 24px; align-items: center; padding: 28px 30px; border-radius: var(--radius); border: 1px solid var(--line-light); background: rgba(249,238,227,.05); text-decoration: none; color: var(--cream); transition: background .3s, border-color .3s; margin-top: 36px; }
.doc-card:hover { background: rgba(249,238,227,.1); border-color: var(--tan); }
.doc-card__icon { width: 54px; height: 54px; border-radius: 50%; background: var(--tan); color: var(--navy); display: grid; place-items: center; flex-shrink: 0; }
.doc-card__icon svg { width: 20px; height: 20px; }
.doc-card strong { display: block; font-weight: 500; font-size: 20px; line-height: 1.3; }
.doc-card small { font-family: var(--font-label); font-stretch: 125%; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tan); }

/* ─── STAGES / PERFORMANCE ────────────────────────────────────────── */
.stages { list-style: none; margin-top: 30px; border-top: 1px solid var(--line-light); }
.stages li { display: grid; grid-template-columns: 92px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line-light); align-items: start; }
.stages__cap { font-family: var(--font-display); font-weight: 300; font-size: 34px; line-height: 1; color: var(--tan); letter-spacing: -0.02em; }
.stages__cap small { display: block; margin-top: 8px; font-family: var(--font-label); font-stretch: 125%; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-tint); }
.stages h3 { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--cream); margin-bottom: 4px; -webkit-text-stroke: .5px currentColor; }   /* bolder than Medium, the heaviest cut loaded */
.stages p { font-size: 14.5px; line-height: 1.6; }

/* at a glance */
.glance { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); }
.glance > div { padding: 28px 20px 0 0; }
.glance > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.glance strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 3.6vw, 58px); line-height: 1; color: var(--navy); letter-spacing: -0.03em; }
.glance span { display: block; margin-top: 12px; font-family: var(--font-label); font-stretch: 125%; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brown-dark); line-height: 1.6; }

/* corridors */
.corridors { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.corridors__map { border-radius: var(--radius-img); overflow: hidden; box-shadow: 0 40px 80px -50px rgba(10,25,41,.5); }
.corridors__list { list-style: none; border-top: 1px solid var(--line); }
.corridors__list li { display: grid; grid-template-columns: 22px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.corridors__list h3 { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--navy); margin-bottom: 4px; }
.corridors__list p { font-size: 14.5px; line-height: 1.6; }
.swatch { width: 16px; height: 16px; border-radius: 3px; margin-top: 5px; }
.swatch--gateway { background: #2f3d8f; }
.swatch--entertainment { background: #6b2463; }
.swatch--core { background: #27a6dc; }
.swatch--lifestyle { background: #eadb2a; }
.swatch--riverfront { background: #c2451f; }

/* people / platform / place */
.ppp { margin-top: 30px; border-top: 1px solid var(--line-light); }
.ppp > div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line-light); }
.ppp h3 { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1; color: var(--tan); }
.ppp p { font-size: 15.5px; line-height: 1.65; }

/* ─── FOOTER ──────────────────────────────────────────────────────── */
.site-footer { background: var(--navy-ink); color: var(--blue-tint); padding: clamp(72px, 8vw, 120px) 0 36px; position: relative; overflow: hidden; }
.footer-top { display: grid; grid-template-columns: minmax(0, 6fr) repeat(2, minmax(0, 3fr)); gap: clamp(32px, 4vw, 64px); padding-bottom: clamp(56px, 6vw, 88px); border-bottom: 1px solid var(--line-light); }
.footer-brand img { height: 210px; width: auto; }   /* the logo and the footer's type, larger (owner, 26 Sep 2026) */
.footer-brand p { margin-top: 28px; max-width: 320px; font-size: 15px; line-height: 1.7; }
.footer-title { font-family: var(--font-label); font-stretch: 125%; font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--tan); margin-bottom: 22px; }
.footer-col ul { list-style: none; display: grid; gap: 14px; }
.footer-col a { color: var(--cream); text-decoration: none; font-size: 19px; opacity: .85; transition: opacity .25s, color .25s; }
.footer-col a:hover { opacity: 1; color: var(--tan); }
.footer-news .h4 { color: var(--cream); font-weight: 500; font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; }
.footer-bottom { padding-top: 30px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-family: var(--font-label); font-stretch: 125%; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(179,198,214,.62); }
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--tan); }
/* PRE-LAUNCH (goes with the password gate): Log Out at the end of the small print (owner,
   28 Sep 2026), as on Version 4. A button posting a form rather than a link, because links are
   prerendered on hover and a hovered link would sign the visitor out (GATE_LOGOUT in render.js).
   Styled as the line it sits in; on hover it fades to tan, like the footer's links. */
.footer-bottom .logout button {
  -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; transition: color .25s;
}
.footer-bottom .logout button:hover { color: var(--tan); }
.footer-bottom .logout button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* Admin, after it (owner, 29 Sep 2026): a link to the website editor, styled like Log Out and the
   footer's links (it fades to tan on hover). It stays after launch unless it's switched off in
   the editor (Every page › Footer). */
/* Privacy Policy and Terms of Use (launch, 16 Oct 2026): after the © line, styled like Admin. */
.footer-bottom :is(.admin-link, .legal-links) a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.footer-disclaimer { margin-top: 26px; font-size: 14.5px; line-height: 1.65; font-weight: 300; color: rgba(179,198,214,.62); max-width: 710px; text-wrap: pretty; }   /* two lines on a desktop, never a one-word last line */
.footer-disclaimer strong { font-weight: 500; }   /* the renderings line: Medium, the heaviest cut the site loads */
.site-footer .wrap { position: relative; z-index: 1; }

/* ─── REVEAL ──────────────────────────────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* Already on screen when the page arrived (set inline before first paint): no fade of its own. */
.js .no-fade, .js .no-fade > *, .js .no-fade img { transition: none !important; }
.js .reveal[data-delay="1"] { transition-delay: .1s; } .js .reveal[data-delay="2"] { transition-delay: .2s; }
.js .reveal[data-delay="3"] { transition-delay: .3s; } .js .reveal[data-delay="4"] { transition-delay: .4s; }
.js .reveal[data-delay="5"] { transition-delay: .5s; } .js .reveal[data-delay="6"] { transition-delay: .6s; }

/* NOTE: the wipe is applied to the CHILDREN, never to .reveal-img itself.
   Chromium computes an IntersectionObserver's intersectionRect against the
   target's paint clip, so a clip-path on the observed element reports
   intersectionRatio: 0 forever, the observer never fires, and the image stays
   permanently hidden. Clipping the children keeps the observed box unclipped. */
.js .reveal-img > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease); }
.js .reveal-img.is-in > * { clip-path: inset(0 0 0 0); }
.js .reveal-img:not(.is-in) { background: transparent; }
.js .reveal-img img { transition: transform 1.4s var(--ease); }
.js .reveal-img:not(.is-in) img { transform: scale(1.07); }
.js .tile.reveal:not(.is-in) img { transform: scale(1.08); }
.js .cta-panel.reveal:not(.is-in) img { transform: scale(1.08); }

/* ─── PAGE TRANSITION ─────────────────────────────────────────────────
   Where the browser supports cross-document view transitions (Chrome, Edge,
   Safari 18.2+), moving between pages is one crossfade from the old page to the
   new — there is no blank frame to see. The header crossfades with the page (a
   header of its own morphed between its tall and scrolled sizes and ghosted the
   nav), and a scrolled page's cream header bar turns navy as the page is left
   (.vt-out, set on pageswap), so the top of the screen stays dark. The page's
   head marks an arrival by crossfade (.vt-in) before its first paint, and the
   fades below stand down, because the crossfade already is the fade.

   Everywhere else, and on a first visit, the page fades itself in with plain CSS
   (so it can never be left blank if site.js fails), and site.js fades the page
   out to the navy canvas just before an internal navigation. Opacity only — a
   transform would re-root the fixed header.

   Each page's head also holds its first render (and so the crossfade's start)
   until its first screen of markup has arrived: <link rel="expect" href="#fold"
   blocking="render">, with the #fold marker at the end of the body, just after the
   inline script that shows whatever is on screen at arrival. Without
   it, on a slow connection the crossfade began on a page that was only header, then
   the hero and the cream section popped in mid-fade. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: var(--ease); }
.vt-out .site-header, .vt-out .site-header * { transition: none !important; }
.vt-out .site-header.is-solid { background: var(--navy-ink); box-shadow: none; }
.vt-out .site-header.is-solid .logo-cream { opacity: 1; }
.vt-out .site-header.is-solid .logo-navy { opacity: 0; }
.vt-out .site-header.is-solid .nav-links a { color: var(--cream); }
.vt-out .site-header.is-solid .nav .btn--tan { background: var(--tan); color: var(--navy); }
.vt-out .site-header.is-solid .menu-toggle { color: var(--cream); border-color: rgba(249,238,227,.45); }
.js body { animation: pageIn .6s var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
.js .site-header { animation: headerIn .8s var(--ease-out) .08s both; }
@keyframes headerIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
/* Leaving without a crossfade: the page fades out as ONE layer to the navy canvas.
   (Fading the cream background and the content separately washed dark areas out
   to milky cream half-way through: a white flash before the dark.) */
.js.is-leaving body { animation: pageOut .22s var(--ease) forwards; }
@keyframes pageOut { from { opacity: 1; } to { opacity: 0; } }

/* Above the fold nothing waits for the script: the hero's lines fade up on CSS alone
   as the page arrives, instead of after site.js has loaded and measured them. */
.js .hero .reveal, .js .page-hero .reveal { transition: none; animation: revealIn .75s var(--ease-out) both; }
.js .hero .reveal[data-delay="1"], .js .page-hero .reveal[data-delay="1"] { animation-delay: .08s; }
.js .hero .reveal[data-delay="2"], .js .page-hero .reveal[data-delay="2"] { animation-delay: .16s; }
.js .hero .reveal[data-delay="3"], .js .page-hero .reveal[data-delay="3"] { animation-delay: .24s; }
.js .hero .reveal[data-delay="4"], .js .page-hero .reveal[data-delay="4"] { animation-delay: .32s; }
@keyframes revealIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Arriving by crossfade: the crossfade is the fade-in, so nothing fades twice. */
.vt-in body, .vt-in .site-header, .vt-in .hero .reveal, .vt-in .page-hero .reveal { animation: none; }
.vt-in .hero .reveal, .vt-in .page-hero .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ─── HOVER (pointer devices only, so nothing sticks after a tap) ────── */
@media (hover: hover) and (pointer: fine) {
  .doc-card:hover { transform: translateX(5px); }
  .news-card:hover .frame img { transform: scale(1.05); }
  .lb-btn:hover { background: var(--cream); color: var(--navy); }
}
.doc-card { transition: background .3s, border-color .3s, transform .4s var(--ease); }

/* Body copy a nudge up above phone widths (owner, 2026-09-24): 18px, rising to 20px on
   large screens. The band line and the page intros, which set their own size, match it. */
@media (min-width: 640.02px) {
  body { font-size: clamp(18px, 1.4vw, 20px); }
  .band p, .page-hero p, .hero__sub { font-size: clamp(18px, 1.4vw, 20px); }
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────── */
/* The full nav from 1281px up; below that the menu key. (It was 1181px; "Share Your Thoughts"
   is the longer label, and at 1181-1280px the links would have wrapped: owner, 26 Sep 2026.) */
@media (max-width: 1280px) {
  .nav-links { display: none; }
  .menu-toggle { display: block; }
}
@media (max-width: 1180px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer-news { grid-column: span 2; }
  .footer-brand { display: flex; gap: 32px; align-items: flex-end; }
  .footer-brand img { height: 168px; }
}
@media (max-width: 1024px) {
  .timeline { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .timeline li::after { display: none; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 34px; }
  .icon-row { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .icon-row > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .glance { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .glance > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .corridors { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --header-h: 84px; }
  .brand { width: 192px; }
  .nav > .btn { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__content { padding-top: calc(var(--header-h) + 64px); }
  .split, .split--flip, .split--even { grid-template-columns: 1fr; }
  .split .split__media, .split .split__body { grid-column: 1 / -1 !important; order: 0 !important; }
  .prose-cols { grid-template-columns: 1fr; gap: 1.1em; margin-top: 1.1em; padding-top: 0; border-top: 0; }   /* one column: reads on from the text above */
  .principles { grid-template-columns: 1fr 1fr; }
  .principle, .principle:not(:nth-child(3n+1)) { padding: 36px 28px 40px 0; border-left: 0; }
  .principle:nth-child(2n) { padding-left: 28px; border-left: 1px solid var(--line-light); }
  .principles--light .principle:nth-child(2n) { border-left-color: var(--line); }
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; }
  .tile--a { grid-column: span 2; grid-row: span 1; }
  .tile--b, .tile--c, .tile--d, .tile--e, .tile--f { grid-column: span 1; grid-row: span 1; }
  .tile--f { grid-column: span 2; }   /* the last of five takes the row rather than leave a gap (phones: one column, below) */
  .news-grid { grid-template-columns: 1fr; gap: 48px; }
  .faq-layout { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-aside { position: static; }
  .partner-grid { grid-template-columns: 1fr; }
  .cta-panels { grid-template-columns: 1fr; }
  .cta-panel { min-height: 360px; }
  /* the two panels one over the other, each the full width */
  .quick { grid-template-columns: minmax(0, 1fr); }
  .quick__panel { padding: clamp(56px, 10vw, 84px) var(--gutter); }
  .quick__media { aspect-ratio: 16 / 9; }
  .quick__panel--photo::after { background: rgba(10,25,41,.78); }   /* the copy runs the full width here */
  .feature-pair { grid-template-columns: 1fr; }
  .press-list li a { grid-template-columns: 1fr auto; gap: 8px 20px; }
  .press-list__outlet { grid-column: 1 / -1; }
  .subnav { top: var(--header-h-solid); }
  .lightbox__stage { padding: 70px 14px 10px; }
  .lb-prev, .lb-next { top: auto; bottom: 134px; transform: none; }   /* clear of a two-line caption */
  .lightbox__count { white-space: nowrap; }
}
/* Contact tabs: the three stay in one pill at every width; on a phone they share it evenly. */
@media (max-width: 900px) {
  .tab { padding: 15px 18px; font-size: 11.5px; letter-spacing: .12em; }
}
@media (max-width: 700px) {
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .tab { padding: 14px 6px; font-size: min(10.5px, 2.7vw); letter-spacing: .06em; white-space: nowrap; }
}
@media (max-width: 640px) {
  /* Contact buttons may wrap rather than widen the one-column page past a 360px screen */
  .form-card .form__foot .btn, .aside-card .btn { white-space: normal; text-align: center; }
}
@media (max-width: 389.98px) {
  .form-card .form__foot .btn { padding-left: 20px; padding-right: 20px; letter-spacing: .1em; }
  .cta-panel .btn { padding-left: 20px; padding-right: 20px; letter-spacing: .12em; }   /* Share Your Thoughts, Press Inquiries */
}
@media (max-width: 359.98px) {
  .cta-panel .btn { white-space: normal; text-align: center; }   /* two lines sooner than a cropped label */
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .form-row { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding-right: 14px; }
  .stat + .stat { padding-left: 14px; }
  .stat:nth-child(3) { padding-left: 0; }
  .principles { grid-template-columns: 1fr; }
  .principle, .principle:nth-child(2n), .principle:not(:nth-child(3n+1)) { padding: 32px 0 36px; border-left: 0; }
  .mosaic { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .tile--a, .tile--b, .tile--c, .tile--d, .tile--e, .tile--f { grid-column: span 1; }
  .timeline { grid-auto-flow: row; grid-template-columns: 1fr; row-gap: 0; padding-left: 8px; }
  .timeline li { padding: 0 0 36px 34px; border-left: 1px solid var(--line); margin-left: 7px; }
  .timeline li::before { left: -8px; top: 2px; }
  .timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
  .team-grid { grid-template-columns: 1fr; }
  .team-card { min-height: 0; }
  .icon-row { grid-template-columns: 1fr; }
  .icon-row > div, .icon-row > div + div { padding: 28px 0 0; border-left: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { display: block; margin-bottom: 24px; }   /* more room under the logo: 56px to the columns, was 32px (owner, 26 Sep 2026) */
  .footer-brand img { height: 152px; }
  .people { grid-template-columns: 1fr; }
  .doc-card { flex-direction: column; align-items: flex-start; }
  .band::after { background: linear-gradient(to top, rgba(10,25,41,.9) 10%, rgba(10,25,41,.35)); }
  .band { align-items: flex-end; padding-bottom: 60px; }
  .hero__shade { background: linear-gradient(to top, rgba(10,25,41,.95) 0%, rgba(10,25,41,.84) 45%, rgba(10,25,41,.66) 100%); }
  .faq__a { padding-right: 0; }
  .glance { grid-template-columns: repeat(2, 1fr); }
  .glance > div:nth-child(n) { padding-left: 0; border-left: 0; }
  .glance > div:nth-child(2n) { padding-left: 18px; border-left: 1px solid var(--line); }
  .stages li { grid-template-columns: 74px 1fr; gap: 14px; }
  .stages__cap { font-size: 28px; }
  .ppp > div { grid-template-columns: 1fr; gap: 6px; }
  .newsletter { flex-direction: column; border-radius: 22px; }
  .newsletter .btn { width: 100%; }
  /* buttons stack to equal width instead of hugging their label */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { justify-content: center; width: 100%; }
  .cta-panel .btn { align-self: stretch; }
  .progress-cta .btn { width: 100%; padding-left: 18px; padding-right: 18px; letter-spacing: .12em; white-space: normal; text-align: center; }
  .news-list a { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
  /* comfortable tap targets */
  .link-arrow { padding: 6px 0; }
  .footer-col ul { gap: 2px; }
  .footer-col a { display: block; padding: 11px 0; }
  .footer-bottom { gap: 10px 24px; }
  .footer-bottom a { display: inline-block; padding: 10px 0; }
  .footer-bottom .logout button { padding: 12px 0; margin: -12px 0; }   /* Log Out: a taller tap target that leaves the line spacing alone */
  .footer-bottom .admin-link a { padding: 12px 0; margin: -12px 0; }    /* Admin: the same */
  /* a 16:10 stage is too letterboxed on a phone */
  .ba__stage { aspect-ratio: 4 / 3; }
  /* the two hero footer lines stack on a phone — centre them */
  .hero__foot { font-size: 9px; letter-spacing: .13em; justify-content: center; text-align: center; }
  .hero__foot span { gap: 8px; }
  .hero__foot svg { width: 12px; height: 12px; }
  /* The home title always reads "A new riverfront / neighborhood for / Nashville." (the
     breaks are in the markup): sized to its column, as large as the phone allows with
     "neighborhood for" (7.72em) on one line, up to 53px. */
  .hero__grid > div { container-type: inline-size; }
  .hero h1 { font-size: clamp(34px, 100cqi / 7.85, 53px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal-img > * { clip-path: none; }
}

/* ════════════════════════════════════════════════════════════════════
   VERSION 5, STRIPPED DOWN (25 Sep 2026)
   Only the previous site's copy, and no renderings or photos for now: the heroes
   stand on the brand navy alone, the news cards are text, and the timeline page
   is a list of milestones in place of the 3D model. Everything above is left as
   it was, so photography can come back later without a rewrite.
   ════════════════════════════════════════════════════════════════════ */

/* ─── TEXT-ONLY HEROES ─────────────────────────────────────────────────
   The same layout, type and footer rule as the photo heroes, on the footer's darkest navy:
   every dark section matches the footer (owner, 28 Sep 2026). They were the navy fading to
   it, lit softly from the top right, as the share card is. (The home hero's photo covers it.) */
.hero--text, .page-hero--text { background: var(--navy-ink); }
/* The hero's eyebrow is just "Music City's Next Hit" (owner, 26 Sep 2026), so on a phone it
   fits one line at its full size and no longer shrinks to fit. */
.page-hero--text { min-height: clamp(340px, 48vh, 480px); }
@media (max-width: 640px) { .page-hero--text { min-height: 300px; } }   /* a phone: just the title under the header, no empty band */
.hero--text h1 { max-width: none; }
/* The location line: "Nashville, Tennessee | On the Cumberland River" (owner, 26 Sep 2026; reworded the same day).
   The bar spaced and softened like the eyebrow's bullet. On a phone the two parts take a line
   each, centred, the pin in front of the first; the line break stands in for the bar there. */
.hero__sep { margin: 0 4px; opacity: .55; }
@media (max-width: 640px) {
  .hero--text .hero__foot > span { display: block; text-align: center; }
  .hero--text .hero__foot svg { display: inline-block; vertical-align: -2px; margin-right: 8px; }
  .hero--text .hero__foot .hero__sep { display: none; }
  .hero--text .hero__foot .hero__place { display: block; margin-top: 6px; }
}
.hero__sub { max-width: 620px; margin-top: 30px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.7; color: rgba(249,238,227,.86); text-wrap: pretty; }
/* With no photo beside it, the home title shares the width with its paragraph: title
   left, paragraph right and level with its last line, the buttons underneath. The
   title sets as large as its column allows with "neighborhood for" (under 8em) on one line;
   its column is 7.6 of 12 so the title could go a bump larger (owner, 26 Sep 2026). */
.hero__grid--text { container-type: inline-size; gap: 0; }   /* stacked, the paragraph's own margin is the gap */
@media (min-width: 1024.02px) {
  .hero__grid--text { grid-template-columns: minmax(0, 7.6fr) minmax(0, 4.4fr); column-gap: clamp(48px, 5vw, 96px); }
  .hero__grid--text h1 { font-size: min(7.4vw, 120px, calc((100cqi - clamp(48px, 5vw, 96px)) * 7.6 / 12 / var(--fit, 8))); }
  .hero__grid--text .hero__sub { margin-top: 0; max-width: 440px; }   /* a nudge inside its column, five even lines (owner, 26 Sep 2026) */
}
@media (min-width: 640.02px) and (max-width: 1024px) {
  .hero__grid--text h1 { font-size: min(clamp(47px, 7.4vw, 76px), 100cqi / var(--fit, 8)); }   /* one column (tablets): a bump up too */
}
@media (max-width: 640px) {
  .hero__grid--text h1 { font-size: clamp(34px, 100cqi / var(--fit, 8), 53px); }
}
.hero h1.hero__code { font-size: clamp(120px, 22vw, 280px); font-weight: 300; line-height: .9; letter-spacing: -0.04em; }

/* ─── VISION: title beside its two paragraphs ──────────────────────── */
.text-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
/* the title keeps its four lines: it steps down just enough for "built for Nashville," to fit */
.text-split__head { container-type: inline-size; }
.text-split__head .h2 { font-size: min(var(--h2), 100cqi / var(--fit, 8.05)); }
.text-split__body { padding-top: 4px; }
@media (min-width: 900.02px) { .text-split__body { padding-top: 46px; } }   /* level with the title, under the eyebrow */
@media (max-width: 900px) { .text-split { grid-template-columns: minmax(0, 1fr); } }   /* one column: the title, then its paragraphs */

/* the zoning proposal, on a light section */
.doc-card--light { margin-top: clamp(32px, 3.5vw, 44px); background: #fff; border-color: var(--line); color: var(--navy); }
.doc-card--light:hover { background: #fff; border-color: var(--navy); }   /* the navy of its title, not the tan (owner, 26 Sep 2026) */
.doc-card--light .doc-card__icon { background: var(--blue-tint); }   /* the light blue of Discover The East Bend (owner, 26 Sep 2026) */
.doc-card__go { width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; color: var(--navy); }   /* the dark blue of its title (owner, 26 Sep 2026) */
@media (max-width: 640px) {
  .doc-card--light { flex-direction: row; align-items: center; gap: 18px; padding: 22px; }
  .doc-card--light .doc-card__icon { width: 46px; height: 46px; }
  .doc-card--light strong { font-size: 18px; }
}

/* ─── NEWS: text cards on the navy ─────────────────────────────────── */
.news-card--text { padding-top: 30px; border-top: 1px solid var(--line); }
.section--navy .news-card--text, .section--deep .news-card--text { border-top-color: var(--line-light); }
@media (hover: hover) and (pointer: fine) {
  .section--navy .news-card:hover h3, .section--deep .news-card:hover h3 { color: var(--tan); }
}

/* ─── DESIGN TEAM: the firm, its role, and the way to its work ──────── */
.team-card { min-height: 230px; }
.team-card__role { margin-bottom: 30px; }
.team-card .link-arrow { margin-top: auto; }
/* Each firm's name on one line. Where the longest, "Hodgson Douglas" (8.17em), would wrap in its
   card, all four names ease down together, so they stay one size (owner, 26 Sep 2026). */
.team-card { container-type: inline-size; }
.team-card__mark { font-size: min(clamp(26px, 2.2vw, 34px), 100cqi / var(--mark-fit, 8.3)); }
@media (max-width: 640px) { .team-card { min-height: 0; } }   /* one column: each card only as tall as its lines */

/* ─── PARTNERS on the deep navy ───────────────────────────────────── */
.partner-card { min-height: 190px; }
@media (max-width: 900px) { .partner-card { min-height: 0; } }   /* one column: the name, then Donate */
.section--deep .partner-card, .section--navy .partner-card { background: rgba(249,238,227,.04); border-color: var(--line-light); }
.section--deep .partner-card__name, .section--navy .partner-card__name { color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  .section--deep .partner-card:hover, .section--navy .partner-card:hover { background: rgba(249,238,227,.08); border-color: var(--tan); box-shadow: 0 24px 50px -24px rgba(0,0,0,.55); }
}

/* ─── CONTACT (the spacing the page used to set inline) ────────────── */
.aside-card .eyebrow { margin-bottom: 12px; }
.form-card__title { margin-bottom: 10px; }
.form-card__lead { margin-bottom: 28px; }
.btn:disabled { opacity: .55; cursor: progress; }   /* while a form is sending */

/* ─── TIMELINE (home page section): the milestones ─────────────────────
   Date on the left, a dot on the rail, the milestone on the right. The latest
   reached (.is-now) takes the light blue dot with its halo; the one still ahead
   (.is-next) a dashed dot, and the rail runs dashed into it. On a phone the date
   moves above its title and the rail runs down the left edge. */
.milestones { --when: 170px; --rail: 72px; --ring: var(--paper); --title: clamp(25px, 2.35vw, 35px); --mid: calc(var(--title) * .59); list-style: none; max-width: 1040px; margin: 0 auto; }
/* --title: the milestone titles, a notch up again after being taken down a touch (owner, 26 Sep 2026). --mid: the middle of
   a title's first line, where the dot, the date and the rail's ends sit at any width. */
#timeline .h2 { text-wrap: balance; }   /* where it takes two lines: "From Scrapyard / to Neighborhood" */
/* Below 400px, where the gutters are 20px, it steps down just enough to keep those two lines
   ("to Neighborhood" is 7.67em) rather than break in three at 42px. */
@media (max-width: 400px) { #timeline .h2 { font-size: min(var(--h2), (100vw - 40px) / 7.75); } }
.section--cream .milestones { --ring: var(--cream); }   /* the dots' ring is the section's own colour, cutting the rail */
.milestone { position: relative; display: grid; grid-template-columns: var(--when) var(--rail) minmax(0, 1fr); padding-bottom: clamp(56px, 6vw, 88px); }
.milestone:last-child { padding-bottom: 0; }
.milestone::before {
  content: ''; position: absolute; z-index: 1; top: calc(var(--mid) - 8px); left: calc(var(--when) + var(--rail) / 2 - 8px);
  width: 16px; height: 16px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 6px var(--ring);
}
.milestone::after {
  content: ''; position: absolute; top: var(--mid); bottom: calc(var(--mid) * -1); left: calc(var(--when) + var(--rail) / 2);
  width: 0; border-left: 1px solid var(--line); margin-left: -.5px;
}
.milestone:last-child::after { display: none; }
.milestone.is-now::before { background: var(--blue-tint); box-shadow: 0 0 0 6px var(--ring), 0 0 0 11px rgba(179,198,214,.55); }   /* the light blue of Discover The East Bend (owner, 26 Sep 2026) */
.milestone.is-now::after { border-left-style: dashed; border-left-color: rgba(23,52,81,.4); }
.milestone.is-next::before { background: var(--ring); border: 1px dashed var(--navy); }
.milestone__when {
  grid-column: 1; padding-top: calc(var(--mid) - 8px); text-align: right;
  font-family: var(--font-label); font-stretch: 125%; font-size: 13px; font-weight: 700;
  letter-spacing: .18em; line-height: 16px; text-transform: uppercase; color: var(--brown-dark);
}
.milestone__body { grid-column: 3; }
.milestone__title { font-family: var(--font-display); font-weight: 500; font-size: var(--title); line-height: 1.18; letter-spacing: -0.015em; color: var(--navy); text-wrap: balance; }
.milestone__body p { margin-top: 14px; max-width: 640px; }
@media (min-width: 640.02px) { .milestone__body p { font-size: clamp(17px, 1.3vw, 18.5px); } }   /* a touch under the body copy (owner, 26 Sep 2026) */
/* A milestone's public record, linked by the name of the site it is on: the link-arrow's
   face and tan rule, set as running text so that on a phone a wrapped name keeps the
   arrow beside its last word. */
.milestone__body .milestone__source {
  margin-top: 20px; font-family: var(--font-label); font-stretch: 125%; font-size: 11.5px; font-weight: 700;
  letter-spacing: .18em; line-height: 2.2; text-transform: uppercase;
}
.milestone__source a { color: var(--navy); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid var(--tan); transition: color .3s; }
.milestone__source span { white-space: nowrap; }
.milestone__source svg { display: inline-block; width: 14px; height: 14px; margin-left: 12px; vertical-align: -2px; }
@media (hover: hover) and (pointer: fine) { .milestone__source a:hover { color: var(--brown-dark); } }
.milestone.is-next .milestone__title { opacity: .72; }
@media (max-width: 700px) {
  .milestones { --rail: 40px; }
  .milestone { grid-template-columns: var(--rail) minmax(0, 1fr); padding-bottom: 48px; }
  .milestone::before { top: 3px; left: 0; }
  .milestone::after { top: 11px; bottom: -11px; left: 8px; }
  .milestone__when { grid-column: 2; padding-top: 3px; margin-bottom: 12px; text-align: left; }
  .milestone__when:empty { display: none; }
  .milestone__body { grid-column: 2; }
  /* no date (the first): the dot sits level with the title instead */
  .milestone:has(> .milestone__when:empty)::before { top: 7px; }
  .milestone:has(> .milestone__when:empty)::after { top: 15px; }
}

/* ─── CONTACT ASIDES: heading fit, and held in view beside the form ─────
   A heading marked .h2--fit sets as large as its column allows with its longest
   line (given in --fit, in em) on one line: "Share Your Thoughts" 9.15em, "Join the
   East Bend" / "Investment Community" 10.44em, "Bring Your Business" 8.55em.
   Beside the form (from 901px up), the aside stays in view while the form scrolls,
   as the FAQ page's did. */
.contact-aside { container-type: inline-size; }
.h2--fit { font-size: min(var(--h2), 100cqi / var(--fit)); }
@media (min-width: 900.02px) {
  .contact-aside { position: sticky; top: calc(var(--header-h-solid) + 40px); }
}

/* ─── CONTACT DROPDOWN (owner, 26 Sep 2026) ──────────────────────────────
   Contact opens its three tabs (Investors, Businesses, Media) in a light panel
   under the nav, on hover and on keyboard focus; a transparent strip above the
   panel keeps the hover alive on the way down. The phone menu lists the same three
   as small links under Contact, one to a row (owner, 26 Sep 2026). */
.nav-drop { position: relative; }
.nav-drop__caret { display: inline-block; width: 9px; height: 9px; margin-left: 7px; vertical-align: 1px; transition: transform .3s var(--ease); }
.nav-drop__menu {
  position: absolute; top: calc(100% + 16px); left: 50%; z-index: 5; min-width: 196px; padding: 8px;
  list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-img);   /* solid: below the header bar nothing blurs what is behind it */
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);   /* no drop shadow: the hairline border sets it off (owner, 26 Sep 2026) */
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
.nav-drop__menu::before { content: ''; position: absolute; left: 0; right: 0; top: -17px; height: 17px; }
.nav-drop:hover .nav-drop__menu, .nav-drop:focus-within .nav-drop__menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
}
.nav-drop:hover .nav-drop__caret, .nav-drop:focus-within .nav-drop__caret { transform: rotate(180deg); }
.site-header .nav-drop__menu a, .vt-out .site-header.is-solid .nav-drop__menu a {
  display: block; padding: 13px 16px; border-radius: 6px; white-space: nowrap; color: var(--navy);
  transition: background .2s, color .2s;
}
.nav-drop__menu a::after { display: none; }
.site-header .nav-drop__menu a:hover, .site-header .nav-drop__menu a:focus-visible { background: var(--blue-tint); color: var(--navy); }   /* the light blue of Discover The East Bend, with navy type as on the Share Your Thoughts hover (owner, 26 Sep 2026) */
.mobile-menu__sub { display: flex; flex-direction: column; align-items: flex-start; list-style: none; margin-top: -6px; padding-bottom: 14px; }
.mobile-menu .mobile-menu__sub li { border-bottom: 0; }
.mobile-menu .mobile-menu__sub a {
  display: inline-block; padding: 8px 0; font-family: var(--font-label); font-stretch: 125%;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-tint);
}
.menu-open .mobile-menu .mobile-menu__sub li a { transition-delay: .2s; }   /* in after Contact, not with the links above it */

/* Footer on a phone: the two link columns share their rows, so where "The East Bend" takes two
   lines at the larger size the lists still start level (owner asked for larger footer type,
   26 Sep 2026). */
@media (max-width: 640px) {
  .footer-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}

/* ════════════════════════════════════════════════════════════════════
   PHOTOS (owner, 26 Sep 2026)
   The home page's photographs, from images/Web Optimized: WebP in assets/img/photos,
   one fixed set of widths per place, named <name>-<width>.webp (the website editor
   keeps the same shape for pictures uploaded in it).
     · Hero: the riverfront promenade in colour under the dark blue overlay, zooming and drifting.
     · Timeline: a small rounded picture under each milestone's date. Not a link.
     · In the News: each story's picture above its date, as the cards had before.
     · Share Your Thoughts: a rounded photo under the text beside the form.
   ════════════════════════════════════════════════════════════════════ */

/* Hero: the riverfront promenade under the skyline (images/Hero Image- full size.png; owner,
   26 Sep 2026), in full colour under the dark blue overlay (.hero__shade, as on Version 4's
   home page), and moving the way that page's picture moves. It opens a touch closer and
   zooms out for --hero-intro, then zooms in and out for as long as the page is open, one
   way per --hero-leg, easing smoothly through each turn on the same sine curve as the
   drift. Under the zoom a slow drift sways corner to corner, timed to cross the middle at
   full speed just as the zoom turns round, so the picture keeps moving through every turn.
   The drift (2.4% / 1.4%) must stay inside the room the zoom leaves, (scale − 1) / 2 each
   way, or an edge shows: keep the smallest scale at 1.03 or more. The navy behind it is
   what shows while it loads. */
.hero--photo .hero__media img {
  object-position: 28% 50%;   /* on a phone, the skyline and the bridge */
  /* A touch more zoom, a touch quicker, and fluid in and out (owner, 28 Sep 2026). It was
     1.28 → 1.03 ↔ 1.2 at 20.8s / 18.2s (Version 4's pace), with each turn eased only
     briefly, so the zoom reversed quickly. Keep the two times 8 : 7. */
  --hero-intro: 19.2s; --hero-leg: 16.8s;
  animation:
    heroFlyHome var(--hero-intro) cubic-bezier(.12, .35, .8, 1) both,
    heroFlyLoop var(--hero-leg) cubic-bezier(.37, 0, .63, 1) var(--hero-intro) infinite alternate,
    heroDrift var(--hero-leg) cubic-bezier(.37, 0, .63, 1) calc(var(--hero-intro) - var(--hero-leg) / 2) infinite alternate backwards;
}
@keyframes heroFlyHome { from { scale: 1.32; } to { scale: 1.03; } }
@keyframes heroFlyLoop { from { scale: 1.03; } to { scale: 1.24; } }
@keyframes heroDrift { from { translate: 2.4% 1.4%; } to { translate: -2.4% -1.4%; } }
@media (prefers-reduced-motion: reduce) {
  .hero--photo .hero__media img { animation: none; }   /* the picture stands still, whole and centred */
}
/* Phones: a tall screen puts the small tan eyebrow over the bright sky above the skyline,
   so the overlay's top runs a little deeper there (.66 to .76) and the eyebrow keeps 4.5:1
   or better through the whole zoom and drift (it measured 4.15:1 without; 26 Sep 2026). */
@media (max-width: 640px) {
  .hero--photo .hero__shade { background: linear-gradient(to top, rgba(10,25,41,.95) 0%, rgba(10,25,41,.84) 45%, rgba(10,25,41,.76) 100%); }
}

/* Timeline: the picture sits under the date, as wide as the date column, its right edge
   level with the date's. The column stacks with a gap, so a milestone without a date has
   no gap above its picture. A small bump larger and a touch rounder (owner, 26 Sep 2026):
   the date column, and so the picture, grows from 170px to 200px as the screen widens
   (full size from 1000px, 170px on small tablets, where the words need the room); on a
   phone the picture is 280px. Keep IMAGE_SLOTS.timeline.sizes in render.js in step. */
.milestones { --when: clamp(170px, 15vw + 50px, 200px); }
.milestone__when { display: flex; flex-direction: column; align-items: flex-end; row-gap: 16px; }
.milestone__img {
  display: block; width: 100%; max-width: var(--when); height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 12px; background: var(--sand);
}
.milestone.is-next .milestone__img { opacity: .8; }   /* still ahead: a touch lighter, like its title */
@media (max-width: 700px) {
  .milestone__when { align-items: flex-start; row-gap: 14px; }
  .milestone__img { max-width: 280px; }
}

/* In the News: the picture's frame in the navy until it arrives, not a sand flash. */
.section--navy .frame, .section--deep .frame { background: rgba(249,238,227,.06); }
/* Tablets (641-900px), where the cards stack: each story's picture beside its words rather
   than across the full width. The pictures stay sharp (their sources are 800px wide) and
   the three stories fit in far less height. Phones keep the picture on top. */
@media (min-width: 640.02px) and (max-width: 900px) {
  .news-card:has(> .frame) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 4vw, 36px); align-items: start; }
  .news-card:has(> .frame) > * { grid-column: 2; }
  .news-card > .frame { grid-column: 1; grid-row: 1 / span 4; margin-bottom: 0; }
  .news-card:has(> .frame) p { margin-bottom: 18px; }
  .news-card:has(> .frame) .link-arrow { justify-self: start; }   /* its rule only as long as its words, as in the stacked cards */
}

/* Share Your Thoughts: the photo under the text, the width of the column. */
.aside-photo {
  position: relative; margin-top: clamp(32px, 3.5vw, 44px); aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: var(--radius-img); background: var(--sand); isolation: isolate;
}
.aside-photo img { width: 100%; height: 100%; object-fit: cover; }

/* The hero's buttons on the narrowest phones (under 360px): "Discover The East Bend" ran
   past both ends of its pill at 320px, so the labels step down a size and set tighter. */
@media (max-width: 359.98px) {
  .hero .btn { font-size: 11px; letter-spacing: .12em; gap: 10px; padding-left: 14px; padding-right: 14px; }
}

/* Footer on a phone: the shorter list (Contact) was stretched to the longer one's height,
   spreading its links out of line with the first column's. Each list keeps its own rows. */
@media (max-width: 640px) {
  .footer-col ul { align-content: start; }
}

/* The Vision: a large featured photo left, words right (owner, 26 Sep 2026). Inside the site's
   usual measure (the same edges as .wrap), the aerial fills the left half as a framed picture
   and the eyebrow, title and paragraphs stack in the right half, with the zoning link below
   them (.vision-split__docs). The photo is as tall as the words beside it, from the eyebrow
   to the last paragraph's foot, so its top and bottom line up with theirs, and the link sits
   below its foot (owner, 28 Sep 2026: it ran down to the link's foot until then). The photo
   is at least square, so much shorter words would sit centred beside it; the launch words
   make it about 1:1.1 at its squarest (1400-1500px screens). (It was a full-bleed half, edge
   to edge and top to bottom, until the owner asked for a featured photo instead, later on
   26 Sep.) Up to 900px the photo sits above the words, framed the same way. Without a photo
   the section keeps its two text columns. */
.vision-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "media body" ". docs"; align-items: center; column-gap: clamp(48px, 6vw, 112px);
  padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--wrap)) / 2));
}
.vision-split__media { grid-area: media; position: relative; align-self: stretch; overflow: hidden; border-radius: 14px; background: var(--sand); isolation: isolate; }   /* 14px: a nudge rounder than the other photos' --radius-img (owner, 28 Sep 2026; was 10px) */
.vision-split__media::before { content: ''; display: block; padding-top: 100%; }   /* its shortest: square */
/* 0%: where the frame is squarer than the photo, the crop comes off the photo's foot (a road),
   never the towers' tops, 7.4% down it. That is the still photo (reduced motion) from about
   1150px up; the drifting one is drawn 14% taller (below), so with the launch words it loses
   at most a sliver (0.3% of its foot at 1480px). */
.vision-split__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.vision-split__body { grid-area: body; container-type: inline-size; }
.vision-split__docs { grid-area: docs; container-type: inline-size; }
/* the title keeps its four lines: it steps down just enough for "built for Nashville," to fit */
.vision-split__body .h2 { font-size: min(var(--h2), 100cqi / var(--fit, 8.05)); }
.vision-split__body .prose { margin-top: clamp(28px, 3vw, 40px); }
@media (max-width: 900px) {
  .vision-split { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "body" "docs"; }
  .vision-split__media { margin-bottom: clamp(44px, 8vw, 64px); }   /* the gap under the photo (a row-gap would open one above the link too) */
  .vision-split__media::before { padding-top: 75%; }   /* 4:3 */
  .vision-split__media > img { object-position: 50% 20%; }   /* the whole skyline, the bridges and the site */
}
@media (max-width: 640px) { .vision-split__media::before { padding-top: 125%; } }   /* phones show the whole photo, taller: 4:5 (owner, 26 Sep 2026; was 4:3) */
/* The East Bend logo, centred on the photo (owner, 28 Sep 2026). In the owner's mock (a
   1280px screen) it was 27.4% of the frame's width and 32.2% of its height. The frame changes
   shape with the screen: 4:5 on phones, 4:3 on tablets, and on computers as tall as the
   words beside it (about 1:1.7 at 901px, 1:1.1 from 1280px up; 1:2 and 1:1.4 in the mock's
   day, when it ran down to the zoning link's foot). So the logo keeps the mock's share of
   the photo's area rather than of one side, which would make it loom in the short 4:3 frame
   and shrink in the tall ones. 13.7cqw + 9.64cqh is that share to within 5% for every frame
   from 4:3 to 1:2 (147px wide in the mock's frame at 1280px). It stays within about a third
   of the frame's width (34cqw) if longer words make the frame taller still. --logo-size
   scales it. On computers it is 1.05: 140px wide at 1280px and 154px at 1440px, the owner's
   "nudge smaller" than the mock (.95 in the taller frame, 28 Sep 2026), kept when the photo
   was cut to the last paragraph's foot later that day. Browsers without container units
   show it at 27.4% of the width. */
.vision-split__logo { --logo-size: 1; position: absolute; inset: 0; display: grid; place-items: center; container-type: size; }
.vision-split__logo img { width: calc(27.4% * var(--logo-size)); width: calc(min(13.7cqw + 9.64cqh, 34cqw) * var(--logo-size)); height: auto; }
@media (min-width: 900.02px) { .vision-split__logo { --logo-size: 1.05; } }
/* It loads with the page, then fades up into place when it comes into view (owner, 28 Sep
   2026): a beat after the photo appears, when both arrive at once (a jump to #vision). That
   is its own entrance: it takes no part in the photo's reveal (.reveal-img), and it stays
   put while the photo drifts (below). */
.js .reveal-img > .vision-split__logo { clip-path: none; }
.js .vision-split__logo img.reveal { transform: none; opacity: 0; translate: 0 28px; transition: opacity 1.1s var(--ease-out) .45s, translate 1.3s var(--ease-out) .45s; }   /* .45s: it stays a step behind the photo's fade when both start at once */
.js .vision-split__logo img.reveal.is-in { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { .js .vision-split__logo img.reveal { opacity: 1; translate: none; } }
/* The photo's own entrance (owner, 28 Sep 2026: it "pops into place"): the whole frame fades
   in while the photo settles from a touch larger (.reveal-img's zoom). The wipe .reveal-img
   gives its children never ran on an img, because the zoom's transition replaces it, so the
   photo appeared in a single frame; and its clip hid the photo from the browser's lazy
   loading, so it was only fetched once reached. So this frame fades instead, the photo loads
   with the page (IMAGE_SLOTS.vision.early in render.js), and site.js waits until it is
   decoded before fading it in. */
.js .vision-split__media.reveal-img > img { clip-path: none; }
.js .vision-split__media.reveal-img { opacity: 0; transition: opacity 1.3s var(--ease); }
.js .vision-split__media.reveal-img.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .vision-split__media.reveal-img { opacity: 1; } }
/* The photo drifts a little slower than the page as it passes, a slight parallax, while the
   frame and the logo stay put (owner, 28 Sep 2026). It moves from 7% of the frame's height
   above level to 7% below (--pan), 14% of the frame over the whole pass (from its top at
   the foot of the screen to its foot at the header's, the page's scroll-padding-top), and is
   level (the crop above) with the frame midway between. (It was 5%, until the owner asked
   for "a touch more" later on 28 Sep. At level it crops --pan / (1 + 2 × --pan) of the
   photo off the top, 6.1% here; the tallest towers' tops are 7.4% down it, so from 8% they
   would touch the frame's top.) To have that to spare it is drawn 7%
   taller than the frame at the top and the bottom, so 14% larger; tablets move its focus
   (--pan-y) so the crop at level stays the 20% one above. Browsers with
   scroll-driven animations (Chrome, Edge, Safari 26 and later) run it in CSS, off the main
   thread, so it keeps pace with the scroll; site.js does the same elsewhere (.is-panning).
   None with reduced motion: the photo keeps its whole crop. */
.vision-split__media { --pan: .07; --pan-y: calc(100% * (.1 - .75 * var(--pan)) / (.5 - 1.5 * var(--pan))); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vision-split__media { view-timeline: --vision-frame block; }
    .vision-split__media > img { inset: calc(-100% * var(--pan)) 0 auto; height: calc(100% * (1 + 2 * var(--pan))); animation: vision-pan linear both; animation-timeline: --vision-frame; }
    @media (max-width: 900px) { .vision-split__media > img { object-position: 50% var(--pan-y); } }
  }
}
.vision-split__media.is-panning > img { inset: calc(-100% * var(--pan)) 0 auto; height: calc(100% * (1 + 2 * var(--pan))); will-change: translate; }
@media (max-width: 900px) { .vision-split__media.is-panning > img { object-position: 50% var(--pan-y); } }
/* the drift, as a share of the photo's own (taller) height: --pan of the frame's */
@keyframes vision-pan {
  from { translate: 0 calc(-100% * var(--pan) / (1 + 2 * var(--pan))); }
  to { translate: 0 calc(100% * var(--pan) / (1 + 2 * var(--pan))); }
}
/* In a narrow words column (a small laptop, 901-1100px), the zoning link takes the phone
   card's compact size, so its title keeps to one line. */
@container (max-width: 460px) {
  .vision-split__docs .doc-card--light { gap: 18px; padding: 22px; }
  .vision-split__docs .doc-card--light .doc-card__icon { width: 46px; height: 46px; }
  .vision-split__docs .doc-card--light strong { font-size: 18px; }
}

/* ════════════════════════════════════════════════════════════════════
   THE WEBSITE EDITOR (26 Sep 2026)
   What the editor (/admin) needs from this stylesheet. Each rule leaves the
   site as launched exactly as it is; they only come into play when words or
   the number of items change in the editor.
   · --fit / --mark-fit (in the rules above): the headings that keep each line
     whole divide their column by their longest line's length in ems. The
     defaults are today's numbers; when the words change, the editor measures
     the new ones the same way and sets the number on the heading (render.js).
   ════════════════════════════════════════════════════════════════════ */

/* Milestones still ahead after the first: the rail keeps running dashed between them. */
.milestone.is-next:not(:last-child)::after { border-left-style: dashed; border-left-color: rgba(23,52,81,.4); }

/* Design team: when the firms don't fill the last row, its cards widen to close it, so no
   empty cell shows the grid's line colour (four to a row; two on tablets). */
@media (min-width: 1024.02px) {
  .team-card:nth-child(4n + 1):last-child { grid-column: span 4; }
  .team-card:nth-child(4n + 1):nth-last-child(2), .team-card:nth-child(4n + 2):last-child { grid-column: span 2; }
  .team-card:nth-child(4n + 3):last-child { grid-column: span 2; }
}
@media (min-width: 640.02px) and (max-width: 1024px) {
  .team-card:nth-child(2n + 1):last-child { grid-column: span 2; }
}
/* …while their firm names stay the size of the others': the fit is worked out from one
   column's width, not the widened card's (a card is 30px padding a side; lines 1px). */
@media (min-width: 1024.02px) {
  .team-card:nth-child(4n + 1):last-child .team-card__mark { font-size: min(clamp(26px, 2.2vw, 34px), ((100cqi + 57px) / 4 - 60px) / var(--mark-fit, 8.3)); }
  .team-card:nth-child(4n + 1):nth-last-child(2) .team-card__mark, .team-card:nth-child(4n + 2):last-child .team-card__mark,
  .team-card:nth-child(4n + 3):last-child .team-card__mark { font-size: min(clamp(26px, 2.2vw, 34px), ((100cqi + 59px) / 2 - 60px) / var(--mark-fit, 8.3)); }
}
@media (min-width: 640.02px) and (max-width: 1024px) {
  .team-card:nth-child(2n + 1):last-child .team-card__mark { font-size: min(clamp(26px, 2.2vw, 34px), ((100cqi + 59px) / 2 - 60px) / var(--mark-fit, 8.3)); }
}

/* A news article showing both its source and its date: when the two can't share a line, the
   date starts the next one without its dot (the dot sits in the gap, cut off at the edge). */
.news-card__meta { column-gap: 28px; overflow: hidden; }
.news-card__meta span + span::before { margin-left: -16px; }

/* More than one document link under the Vision: stacked close together. */
.doc-card--light + .doc-card--light { margin-top: 14px; }

/* A button label longer than today's (over 24 letters, marked btn--long by the editor's
   templates) may wrap inside its pill on a phone rather than run past its ends. */
@media (max-width: 640px) {
  .btn-row .btn--long, .aside-card .btn--long { white-space: normal; text-align: center; line-height: 1.35; }
}

/* ─── PRIVACY POLICY & TERMS OF USE (launch, 16 Oct 2026) ─────────────
   /privacy and /terms (legalPage in render.js): the Contact page's heading,
   then the text in one readable column on the paper, its sections numbered
   and ruled off like the Vision's columns. */
.legal { max-width: 760px; }
.legal__intro p { color: var(--navy); font-size: clamp(18px, 1.35vw, 19.5px); }
.legal__part { margin-top: clamp(36px, 4vw, 52px); padding-top: clamp(28px, 3vw, 36px); border-top: 1px solid var(--line); }
.legal__part .h4 { margin-bottom: 14px; }
.legal__num { color: var(--brown-dark); }
.legal a { overflow-wrap: anywhere; }