/* lifecommunitycenter.org · site stylesheet
   The site-specific layer over the Quality Web Library (qw.css). Unprefixed
   classes are this site's; qw- is the library and is never redefined here.
   Patterns carry the inspiration-review sample number they came from. Values
   ported from shipped work are marked with their source. */

/* ---------- brand: the life-community-center palette, library.json, Sept 11 2026 ---------- */
:root {
  --color-bg: #F0EDE4; --color-surface: #FFFFFF; --color-surface-dark: #304F38;
  --color-ink: #304F38; --color-ink-muted: #6E7A6C; --color-ink-on-dark: #F0EDE4;
  --color-line: #DCD5C2; --color-line-soft: #E7E2D2;
  --color-primary: #304F38; --color-primary-hover: #417746; --color-on-primary: #ffffff;
  --color-accent: #CFA627; --color-accent-hover: #EEC549; --color-on-accent: #304F38;
  --color-link: #304F38; --color-link-hover: #CFA627;
  --color-band-light: #FFFFFF; --color-band-light-tint: #F0EDE4; --color-band-card: #FFFFFF;
  --color-band-stone: #DFD8C6; --color-band-ink: #304F38; --color-band-ink-muted: #6E7A6C;
  --color-band-accent-ink: #A76D2E;
  --color-form-tint: #DFD8C6; --color-form-ink: #304F38; --color-form-focus: #417746;
  --color-mesh-1: #74AA48; --color-mesh-2: #41AD48;
  /* rgb triplets for the pools: a fade resolves to its own hue at zero alpha */
  --rgb-dark: 48 79 56; --rgb-deep: 65 119 70; --rgb-light: 116 170 72; --rgb-bright: 65 173 72; --rgb-gold: 238 197 73; --rgb-forest: 22 42 26;
  --nav-h: 74px;
}

html { scroll-padding-top: 100px; }
body { background: var(--color-bg); color: var(--color-ink); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }

/* ---------- type scale for the site ---------- */
.head__title, .hero__title, .close__theme, h2, h3 { font-family: var(--font-heading); }
.h3 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 26px 0 8px; }
.h3--light { color: #fff; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; max-width: 62ch; color: var(--color-ink); margin: 0 0 18px; }
.lead--strong { font-weight: 600; }
.fine { font-size: 14px; color: var(--color-ink-muted); max-width: 70ch; margin: 14px 0 0; }
.pull { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; max-width: 50ch; margin: 40px auto 0; text-align: center; color: var(--color-ink); text-wrap: balance; }
.pull::before { content: ""; display: block; width: 56px; height: 3px; background: linear-gradient(90deg, var(--color-mesh-1), var(--color-mesh-2)); margin: 0 auto 22px; }
.cols p, .split__copy p { margin: 0 0 1em; font-size: 17px; line-height: 1.65; }
.cols p:last-child, .split__copy p:last-child { margin-bottom: 0; }

/* ---------- payload strip: LOVE · INSPIRATION · FELLOWSHIP · EMPOWERMENT ---------- */
.payload { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; }
.payload i { font-style: normal; opacity: .55; }

/* ---------- the glass nav (sample 1, Primary; OnEarth values) ---------- */
.nav { position: fixed; top: 24px; left: 0; right: 0; z-index: 80; padding: 0 clamp(16px, 4vw, 64px); transition: top var(--dur) var(--ease-state); }
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--nav-h); padding: 0 16px 0 22px; border-radius: 100px;
  background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 10px 30px rgba(0,0,0,.18);
  transition: background var(--dur) var(--ease-state), box-shadow var(--dur) var(--ease-state); }
/* past the hero the paper ground is behind the bar, so the glass goes deep green */
body.is-past-hero .nav__bar { background: rgb(var(--rgb-dark) / .86); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.22); }
.nav__brand { display: block; }
.nav__lockup { height: 36px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__links a { display: inline-block; padding: 8px 24px; border-radius: 100px; color: #fff; font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-state), color var(--dur-fast) var(--ease-state); }
.nav__links a:hover { background: rgba(255,255,255,.14); color: #fff; }
.nav__links a.is-active { background: #fff; color: var(--color-primary); font-weight: 600; }
.nav__cta { --color-primary: var(--color-primary-hover); --color-on-primary: #fff; padding: 11px 22px; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.nav__cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nav__cta:hover { --color-primary: var(--color-mesh-2); transform: translateY(-1px); }
/* a page off the campaign (feedback, the report): the bar carries the lockup and one control, "View the Campaign", "Campaign" on phones */
.nav__cta--back { min-height: 44px; }
.nav__cta--back svg { margin-right: 2px; }
.nav__cta--new-tab svg { margin: 0 0 0 2px; }   /* the open-in-new-tab mark sits after the label (report bar, Oct 12) */
.nav__cta-short { display: none; }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(16,16,16,.35); color: #fff; cursor: pointer; }
@media (max-width: 820px) {
  :root { --nav-h: 60px; }
  .nav { top: 12px; padding: 0 12px; }
  .nav__links, .nav__cta { display: none; }
  .nav__cta--back { display: inline-flex; padding: 10px 14px; font-size: 11.5px; }
  .nav__cta-long { display: none; }
  .nav__cta-short { display: inline; }
  .nav__toggle { display: grid; place-items: center; }
  .nav__bar { padding: 0 8px 0 16px; }
  .nav__lockup { height: 28px; }
}
/* the drawer on this brand: deep green ground, paper links */
.qw-nav-drawer { --color-surface-dark: #22392A; --color-ink: #F0EDE4; --color-line: rgba(240,237,228,.18); --color-line-soft: rgba(240,237,228,.16);
  background: linear-gradient(165deg, #22392A 0%, var(--color-primary) 55%, var(--color-primary-hover) 100%); color: #F0EDE4; border-right: 0; }
.qw-nav-drawer::backdrop { background: rgb(var(--rgb-forest) / .55); }
.qw-nav-drawer__close { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.qw-nav-drawer__links a { color: #F0EDE4; }
.qw-nav-drawer__links a:active { color: var(--color-accent-hover); }
.qw-nav-drawer__links li:last-child a { color: var(--color-accent-hover); font-weight: 700; }
.qw-nav-drawer[open] { animation: drawer-in 460ms var(--ease-reveal) both; }
.qw-nav-drawer[open]::backdrop { animation: drawer-veil-in 360ms var(--ease-reveal) both; }
.qw-nav-drawer.is-closing { animation: drawer-out 300ms var(--ease-state) both; }
.qw-nav-drawer.is-closing::backdrop { animation: drawer-veil-out 300ms var(--ease-state) both; }
.qw-nav-drawer[open] .qw-nav-drawer__links li { animation: drawer-item 520ms var(--ease-reveal) both; animation-delay: calc(120ms + var(--i, 0) * 45ms); }
@keyframes drawer-in { from { transform: translateX(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drawer-out { from { transform: none; opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }
@keyframes drawer-veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawer-veil-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes drawer-item { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qw-nav-drawer[open], .qw-nav-drawer.is-closing, .qw-nav-drawer[open]::backdrop, .qw-nav-drawer.is-closing::backdrop, .qw-nav-drawer[open] .qw-nav-drawer__links li { animation: none; } }

/* ---------- 01 hero ---------- */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #22392A; color: var(--color-ink-on-dark); }
.hero__seq { position: absolute; inset: 0; z-index: 0; }
.hero__frame { position: absolute; inset: 0; opacity: 0; z-index: 0; transition: opacity 1800ms var(--ease-cinema); }
.hero__frame.was-on { opacity: 1; z-index: 1; }   /* the outgoing frame holds under the incoming one, so the crossfade never dips to the ground */
.hero__frame.is-on { z-index: 2; }
/* Nov 2 (Diallo, on a hotspot): a frame shows only once its file is loaded and decoded, so the
   first picture fades in whole over the hero's green instead of drawing in band by band */
.hero__frame.is-on.is-loaded { opacity: 1; }
.hero__frame.is-lead { transition-duration: 1200ms; transition-timing-function: var(--ease-reveal); }
.hero__frame picture { display: contents; }
html:not(.js) .hero__frame.is-on { opacity: 1; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform: scale(1.06); backface-visibility: hidden; will-change: transform; }
/* Ken Burns: four moves, one per frame in rotation, each running for the frame's
   whole turn plus the crossfade so the outgoing picture never snaps back */
.hero__frame.is-on.is-loaded .hero__img, .hero__frame.was-on .hero__img { animation-duration: 9.6s; animation-timing-function: linear; animation-fill-mode: forwards; }
.hero__frame.kb-1.is-on.is-loaded .hero__img, .hero__frame.kb-1.was-on .hero__img { animation-name: kb-1; }
.hero__frame.kb-2.is-on.is-loaded .hero__img, .hero__frame.kb-2.was-on .hero__img { animation-name: kb-2; }
.hero__frame.kb-3.is-on.is-loaded .hero__img, .hero__frame.kb-3.was-on .hero__img { animation-name: kb-3; }
.hero__frame.kb-4.is-on.is-loaded .hero__img, .hero__frame.kb-4.was-on .hero__img { animation-name: kb-4; }
@keyframes kb-1 { from { transform: scale(1.04) translate3d(1.2%, 1%, 0); }   to { transform: scale(1.15) translate3d(-1.2%, -1%, 0); } }
@keyframes kb-2 { from { transform: scale(1.15) translate3d(-1.2%, .6%, 0); } to { transform: scale(1.04) translate3d(1.2%, -.6%, 0); } }
@keyframes kb-3 { from { transform: scale(1.05) translate3d(0, -1.4%, 0); }   to { transform: scale(1.14) translate3d(.6%, 1.4%, 0); } }
@keyframes kb-4 { from { transform: scale(1.14) translate3d(1.4%, -.4%, 0); } to { transform: scale(1.04) translate3d(-1.4%, .8%, 0); } }
/* the veil: clear at the top, deep green at the foot where the copy sits; the greens multiplied in over it */
.hero__mesh { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--rgb-dark) / .12) 0%, rgb(var(--rgb-dark) / .30) 36%, rgb(var(--rgb-dark) / .86) 64%, rgb(var(--rgb-forest) / .94) 100%),
    linear-gradient(172deg, rgb(var(--rgb-deep) / .28) 0%, rgb(var(--rgb-dark) / .16) 100%); }
.hero__glow { position: absolute; inset: -14%; z-index: 2; pointer-events: none; mix-blend-mode: soft-light;
  background:
    radial-gradient(ellipse 58% 62% at 18% 22%, rgb(var(--rgb-light) / .8), rgb(var(--rgb-light) / 0) 62%),
    radial-gradient(ellipse 52% 56% at 84% 78%, rgb(var(--rgb-bright) / .7), rgb(var(--rgb-bright) / 0) 60%);
  animation: hero-glow 24s var(--ease-cinema) infinite alternate; }
@keyframes hero-glow { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-3%, 2.5%, 0) scale(1.08); } }
.hero__in { position: relative; z-index: 3; padding-top: calc(var(--nav-h) + 80px); padding-bottom: clamp(22px, 3.6vh, 40px); }
.hero__eyebrow { color: var(--color-accent-hover); font-size: 14px; font-weight: 800; letter-spacing: .2em; }
.hero__title { font-size: clamp(36px, 5.5vw, 74px); line-height: .98; letter-spacing: -.028em; color: #fff; margin: 6px 0 22px; max-width: 12ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.hero__title span { display: block; }
.hero__sub { font-size: 16px; line-height: 1.55; max-width: 58ch; color: rgba(240,237,228,.92); margin: 0 0 28px; text-shadow: 0 1px 18px rgba(0,0,0,.3); }
.hero__actions { gap: 12px; }
.hero__btn { --color-primary: var(--color-primary-hover); --color-on-primary: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.hero__btn:hover { --color-primary: var(--color-mesh-2); }
.hero__btn--ghost { --color-primary: #fff; --color-ghost-ink: #fff; --color-on-primary: var(--color-ink); }
.hero__strip { position: relative; z-index: 3; border-top: 1px solid rgba(240,237,228,.18); padding: 18px clamp(16px, 4vw, 64px); background: rgb(var(--rgb-dark) / .5); color: rgba(240,237,228,.85); }
@media (max-width: 640px) {
  .hero { min-height: 92svh; }
  .hero__title { font-size: clamp(34px, 11vw, 44px); }
  .hero__eyebrow { font-size: 11px; letter-spacing: .12em; }
  /* the copy covers most of the frame on a phone, so the veil carries the text: deep green from a third of the way down */
  .hero__mesh { background: linear-gradient(180deg, rgb(var(--rgb-dark) / .30) 0%, rgb(var(--rgb-dark) / .62) 28%, rgb(var(--rgb-dark) / .90) 52%, rgb(var(--rgb-forest) / .96) 100%), linear-gradient(172deg, rgb(var(--rgb-deep) / .28) 0%, rgb(var(--rgb-dark) / .16) 100%); }
  .payload { row-gap: 8px; }
  .payload i:nth-of-type(2) { flex-basis: 100%; height: 0; overflow: hidden; margin: 0; }   /* a line break: Love · Inspiration / Fellowship · Empowerment */
}

/* ---------- blocks: the four grounds ---------- */
.blk { position: relative; padding: clamp(56px, 8vw, 112px) 0; }
.blk--paper { background: var(--color-bg); }
.blk--white { background: var(--color-surface); }
.blk--stone { background: var(--color-band-stone); }
.blk--deep { background: var(--color-surface-dark); color: var(--color-ink-on-dark); }
.blk--deep .head__title, .blk--deep h3, .blk--deep h4 { color: #fff; }
.blk--deep p { color: rgba(240,237,228,.86); }
.blk--deep .qw-eyebrow { color: var(--color-accent-hover); }

/* section heads (sample 4): two forms. .head = eyebrow and H2 left, lead right.
   .head--stack = the title across the top on its own, wide, two lines at most. */
.head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px 56px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.head--stack { display: block; }
.head__title { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -.022em; margin: 6px 0 0; text-wrap: balance; }
.head__title--wide { max-width: 34ch; }
.nowrap { white-space: nowrap; }
@media (max-width: 640px) { .brk__title br { display: none; } }
.head__title--lines span { display: block; }
.head__lead { margin: 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--color-ink-muted); max-width: 44ch; }
.blk--deep .head__lead { color: rgba(240,237,228,.8); }
.eyebrow--dot::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-mesh-2); margin-right: 10px; vertical-align: 1px; }
.blk--deep .eyebrow--dot::before { background: var(--color-accent-hover); }
@media (max-width: 820px) { .head { grid-template-columns: 1fr; } }

/* frames and columns */
.frame { margin: 0; }
.frame__ph { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-band-stone) center / cover no-repeat; }
.frame--tall .frame__ph { aspect-ratio: 4 / 3; }
.frame__img { width: 100%; height: 100%; object-fit: cover; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.split--flip .frame { order: 2; }
.split--table { align-items: start; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split--flip .frame { order: 0; } }
.cols { column-count: 2; column-gap: 40px; }
.cols p { break-inside: avoid; }
.cols--two { column-count: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.cols--two .h3 { margin-top: 0; }
@media (max-width: 720px) { .cols { column-count: 1; } .cols--two { grid-template-columns: 1fr; } }

/* ---------- 04 the vision: deep band with grain and pools (sample 11), the bento (sample 8) ---------- */
.band { isolation: isolate; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 12% 8%, rgb(var(--rgb-light) / .30), rgb(var(--rgb-light) / 0) 60%),
    radial-gradient(ellipse 50% 50% at 92% 92%, rgb(var(--rgb-bright) / .24), rgb(var(--rgb-bright) / 0) 60%),
    linear-gradient(168deg, #35583E 0%, var(--color-surface-dark) 55%, #2A4631 100%); }
.band::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.band > * { position: relative; z-index: 1; }
/* six cards on a 3 x 4 grid. Row one: two singles stacked left, the wide photo right.
   Row two flipped: the wide photo left, two singles stacked right. Content order in
   the file is the program order; the grid places them. */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 232px; gap: 14px; }
.bento__card { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #22392A; display: flex; flex-direction: column; justify-content: flex-end; }
.bento__card:nth-child(1) { grid-area: 1 / 1; }          /* early childhood */
.bento__card:nth-child(2) { grid-area: 1 / 2 / 3 / 4; }  /* youth, wide */
.bento__card:nth-child(3) { grid-area: 2 / 1; }          /* family */
.bento__card:nth-child(4) { grid-area: 3 / 3; }          /* health */
.bento__card:nth-child(5) { grid-area: 4 / 3; }          /* seniors */
.bento__card:nth-child(6) { grid-area: 3 / 1 / 5 / 3; }  /* community, wide */
.bento__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the overlay: clear across the top, darkening through the lower half, deepest at the foot under the text */
.bento__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--rgb-forest) / 0) 30%, rgb(var(--rgb-forest) / .42) 55%, rgb(var(--rgb-forest) / .8) 78%, rgb(var(--rgb-forest) / .92) 100%); transition: opacity 700ms var(--ease-state); }
.bento__img { transition: transform 900ms var(--ease-emph, var(--ease-state)); }
.bento__text { transition: transform 700ms var(--ease-state); }
@media (hover: hover) { .bento__card:hover .bento__img { transform: scale(1.06); } .bento__card:hover .bento__text { transform: translateY(-4px); } .bento__card:hover::after { opacity: .92; } }
.bento__text { position: relative; z-index: 1; padding: 18px 20px 18px; }
.bento__card h3 { font-size: 19px; letter-spacing: -.015em; margin: 0 0 4px; color: #fff; }
.bento__card p { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: rgba(240,237,228,.94); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bento__card--photo-wide h3 { font-size: 24px; }
.bento__card--photo-wide p { -webkit-line-clamp: 3; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; }
  .bento__card:nth-child(n) { grid-area: auto; }
  .bento__card--photo-wide { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 520px) { .bento { grid-template-columns: 1fr; grid-auto-rows: auto; } .bento__card { min-height: 200px; grid-column: span 1 !important; grid-row: span 1 !important; } .bento__card--photo-wide { min-height: 200px; } .bento__card--photo-wide h3 { font-size: 19px; } .bento__card--photo-wide p { -webkit-line-clamp: 2; } }
.band__cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px clamp(40px, 6vw, 96px); margin-top: 48px; align-items: stretch; }
.band__copy p { font-size: 16.5px; line-height: 1.65; margin: 0 0 1em; max-width: 64ch; }
.day__head { margin: 0 0 18px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.35; letter-spacing: -.012em; color: #fff; max-width: 52ch; }
.day { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.day li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; padding: 11px 0; border-top: 1px solid rgba(240,237,228,.16); font-size: 15px; line-height: 1.5; color: rgba(240,237,228,.92); }
.day li:nth-child(-n+2) { border-top: 0; }
.day li svg { width: 18px; height: 18px; margin-top: 3px; display: block; }
.day .day__i--1 svg { color: var(--color-accent-hover); }   /* gold */
.day .day__i--2 svg { color: var(--color-band-stone); }     /* sand */
.day .day__i--3 svg { color: var(--color-band-accent-ink); } /* rust */
.day__close { font-weight: 600; color: var(--color-band-stone) !important; max-width: 46ch; }
.day li:last-child { grid-column: 1 / -1; }
@media (max-width: 600px) { .day { grid-template-columns: 1fr; } .day li:nth-child(2) { border-top: 1px solid rgba(240,237,228,.16); } }
.band__copy p:last-child { margin-bottom: 0; }
.band__name { position: relative; display: flex; flex-direction: column; justify-content: center; padding-left: 28px; border-left: 2px solid rgba(240,237,228,.22); }
.band__name-intro { margin: 0 0 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(240,237,228,.7); }
.vname { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vname li { font-family: var(--font-heading); font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.vname__initial { color: var(--color-mesh-2); }
.vname__life { margin: 14px 0 0; font-family: var(--font-heading); font-size: clamp(44px, 5vw, 76px); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--color-accent-hover); }
@media (max-width: 820px) { .band__cols { grid-template-columns: 1fr; } .band__name { padding-left: 20px; } }

/* ---------- 02 the building: aerial with a badge, copy beside, the facts as a hairline strip ---------- */
.building { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 64px); align-items: end; margin-bottom: 30px; }
.building__media { position: relative; }
.frame--parallax .frame__ph { transform: scale(1.06); }
.frame--parallax, .badge { will-change: transform; }
.building__media .frame { width: 88%; }
.building__media .frame__ph { aspect-ratio: 4 / 3; }
.badge-wrap { position: absolute; right: -4px; bottom: -34px; }
.badge { position: relative; display: grid; gap: 2px; padding: 18px 22px 16px; border-radius: var(--radius-lg); background: var(--color-surface-dark); color: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.22); }
.badge__num { font-family: var(--font-heading); font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.badge__label { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-hover); }
.building__copy p { margin: 0 0 1em; font-size: 16.5px; line-height: 1.65; }
.building__copy p:last-child { margin-bottom: 0; }
.building__lead { margin: 0 0 20px; font-size: clamp(17px, 1.3vw, 19px); max-width: 40ch; }
.facts--strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); --qw-accent: var(--color-primary-hover); }
.facts__cell { padding: 26px 22px; border-right: 1px solid var(--color-line); }
.facts__cell:last-child { border-right: 0; }
@media (max-width: 900px) { .building { grid-template-columns: 1fr; margin-bottom: 0; } .building__media { padding-bottom: 46px; } .building__media .frame { width: 100%; } .badge-wrap { right: 8px; bottom: 6px; } }
#moment.blk { padding-bottom: clamp(24px, 3vw, 40px); }
@media (max-width: 640px) { .facts--strip { grid-template-columns: 1fr 1fr; } .facts__cell:nth-child(2) { border-right: 0; } .facts__cell:nth-child(-n+2) { border-bottom: 1px solid var(--color-line); } }

/* ---------- mosaic: the library's photo mosaic, on this brand ---------- */
.mosaic { margin-top: clamp(28px, 3.5vw, 48px); }
.mosaic .qw-photo-mosaic { margin-top: 0; }
.mosaic .qw-photo-mosaic figure::after { background: linear-gradient(180deg, rgb(var(--rgb-dark) / 0) 50%, rgb(var(--rgb-dark) / .72) 100%); }
.mosaic .qw-photo-mosaic figcaption { color: #fff; }
.mosaic .qw-photo-mosaic img { filter: none; opacity: 1; }

/* ---------- 03 the need: one measured column, two photographs that hold beside it ---------- */
.need { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 4vw, 64px); align-items: start; }
.need__col p { margin: 0 0 1em; font-size: 17px; line-height: 1.66; }
.need__col p:last-child { margin-bottom: 0; }
.need__sum { margin: 32px auto 0; max-width: 62ch; text-align: center; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; font-weight: 600; color: var(--color-ink); }
@media (max-width: 720px) { .need { grid-template-columns: 1fr; } }
.pull--need { margin-top: clamp(36px, 4.5vw, 56px); max-width: 44ch; }
@media (max-width: 640px) { .pull--need br { display: none; } }
.mosaic { margin-top: clamp(28px, 3.5vw, 48px); }
.mosaic .qw-photo-mosaic figure::after { background: linear-gradient(180deg, rgb(var(--rgb-dark) / 0) 60%, rgb(var(--rgb-dark) / .35) 100%); }
.mosaic .qw-photo-mosaic img { filter: none; opacity: 1; }
.mosaic--bleed { width: 100%; margin-left: 0; margin-right: 0; padding: 0; max-width: none; }
.mos__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.mos__track { display: flex; width: max-content; will-change: transform; user-select: none; cursor: grab; }
.mos__track.is-dragging { cursor: grabbing; }
.mos__panel { flex: 0 0 auto; width: var(--mos-w, 1200px); margin-right: var(--space-md); }
.mos__track { padding-left: var(--space-md); }
.mos__panel.qw-photo-mosaic { margin-top: 0; }
@media (max-width: 899px) { .mos__panel.qw-photo-mosaic { grid-template-columns: 1fr 1.35fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); height: clamp(240px, 62vw, 380px); gap: 10px; } .mos__panel .qw-photo-mosaic__hero { grid-column: 2; grid-row: 1 / span 2; } .mos__panel figure { min-height: 0; } }
.mos__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: none; opacity: 1; }
.mos__panel img { transition: none; }
@media (hover: hover) { .mos__panel figure:hover img { transform: none; filter: none; } }

/* ---------- 05 responding: the deep band, the leaf mark ghosted, five on a roster ---------- */
.responding { overflow: hidden; }
.responding__mark { position: absolute; right: -6%; top: -10%; width: min(46vw, 620px); height: auto; opacity: .07; pointer-events: none; z-index: 0; }
.responding__head .head__title { max-width: none; }
.responding__head .head__lead--under { color: rgba(240,237,228,.82); max-width: 62ch; }
.roster { list-style: none; margin: clamp(28px, 3.5vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(240,237,228,.2); border-bottom: 1px solid rgba(240,237,228,.2); }
.roster__item { position: relative; padding: 26px 22px 28px 0; margin-right: 22px; border-right: 1px solid rgba(240,237,228,.16); display: grid; grid-template-rows: auto auto 1fr; gap: 12px; }
.roster__item:last-child { border-right: 0; margin-right: 0; }
.roster__leaf { display: block; width: 34px; height: 34px; } .roster__leaf img { width: 100%; height: 100%; display: block; }
.roster__t { margin: 0; font-size: 16px; letter-spacing: -.01em; line-height: 1.25; color: #fff; }
.roster__item p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(240,237,228,.9) !important; }
.responding__foot { margin-top: 36px; max-width: 96ch; }
.responding__foot .lead { color: #fff; }
.responding__foot .fine { margin-top: 10px; color: rgba(240,237,228,.65) !important; }
@media (max-width: 900px) { .roster { grid-template-columns: 1fr 1fr; gap: 0 24px; } .roster__item { border-right: 0; margin-right: 0; border-bottom: 1px solid rgba(240,237,228,.16); } .roster__item:last-child { grid-column: span 2; border-bottom: 0; } .responding__mark { width: 60vw; right: -20%; } }
@media (max-width: 520px) { .roster { grid-template-columns: 1fr; } .roster__item:last-child { grid-column: auto; } }

/* ---------- the rooms: before and after sliders ---------- */
#transformation .head { max-width: var(--container-max); margin-left: auto; margin-right: auto; }
.ba { margin: 0; }
.ba__stage { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: #22392A; box-shadow: 0 14px 34px rgba(0,0,0,.14); user-select: none; }
.ba__after, .ba__before { position: absolute; inset: 0; }
.ba__before { clip-path: inset(0 50% 0 0); }
.ba__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba__tag { position: absolute; bottom: 12px; padding: 6px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgb(var(--rgb-dark) / .78); backdrop-filter: blur(4px); }
.ba__tag--before { left: 12px; }
.ba__tag--after { right: 12px; background: var(--color-primary-hover); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(0,0,0,.15); pointer-events: none; }
.ba__grip { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.ba__grip svg { width: 18px; height: 18px; fill: none; stroke: var(--color-primary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba__cap { margin: 12px 2px 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink); }
/* THE ROOMS (Nov 2, round 3): ten sliders as a bento. From 1100px, four columns: the gymnasium
   opens the grid two columns wide and two rows tall with four rooms stacked beside it, and the
   serving kitchen closes it the same way on the other side. Feature stages fill their two rows (the
   pictures crop, both halves alike, so the line still meets). Two across from 640, one on phones.
   Each card's pictures fade in together once both are decoded; a small sweep of the handle on
   first sight says it slides. */
.rooms { list-style: none; margin: 0 auto; padding: 0; max-width: var(--container-max); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(26px, 2.6vw, 36px) clamp(16px, 1.8vw, 24px); }
.rooms__item { min-width: 0; display: flex; }
.rooms__item > .rooms__card { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rooms__item--feature { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.rooms__item--feature:last-child { grid-column: 3 / span 2; grid-row: 3 / span 2; }
.rooms .rooms__item--feature .ba__stage { aspect-ratio: auto; flex: 1; min-height: 300px; }
.rooms__item--feature .rooms__name { font-size: 15px; }
.rooms__item--feature .ba__grip { width: 48px; height: 48px; }
@media (max-width: 1099px) {
  .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rooms__item--feature, .rooms__item--feature:last-child { grid-column: 1 / -1; grid-row: auto; }
  .rooms .rooms__item--feature .ba__stage { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
}
.rooms .ba__stage { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
.rooms .ba__after picture, .rooms .ba__before picture { display: contents; }
.rooms .ba__img { transition: opacity 600ms var(--ease-reveal); }
.rooms .ba:not(.is-ready) .ba__img, .rooms .ba:not(.is-ready) .ba__tag { opacity: 0; }
.rooms .ba__tag { transition: opacity 600ms var(--ease-reveal); bottom: 10px; font-size: 10px; padding: 5px 9px; }
.rooms .ba__tag--before { left: 10px; }
.rooms .ba__tag--after { right: 10px; }
.rooms .ba__grip { width: 38px; height: 38px; }
.rooms .ba__stage:has(.ba__range:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.rooms .ba.is-hint .ba__before, .rooms .ba.is-hint .ba__handle { transition: clip-path 700ms cubic-bezier(.45,0,.2,1), left 700ms cubic-bezier(.45,0,.2,1); }
.rooms__cap { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; margin: 14px 2px 0; }
.rooms__n { grid-row: span 2; font-family: var(--font-heading); font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--color-primary); padding-top: 1px; }
.rooms__name { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink); }
.rooms__line { grid-column: 2; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--color-ink-muted, var(--color-ink)); }
@media (max-width: 639px) {
  .rooms { grid-template-columns: 1fr; gap: 30px; }
  .rooms .ba__grip { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .rooms .ba__img, .rooms .ba__tag, .rooms .ba.is-hint .ba__before, .rooms .ba.is-hint .ba__handle { transition: none; } }

/* ---------- 07 the plan: the four figures as a table beside the two notes ---------- */
#plan.blk--white { background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 60%, #fff) 0%, #fff 52%, color-mix(in srgb, var(--color-bg) 45%, #fff) 100%); }
.plan--table { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
.pwrap { background: var(--color-surface); border: 1px solid var(--color-line-soft); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 34px rgba(48,79,56,.08); }
.phead, .pr, .ptotal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1.4rem; align-items: baseline; padding: .95rem 1.6rem; }
.phead { background: var(--color-surface-dark); padding-top: .8rem; padding-bottom: .8rem; }
.phead span { font-weight: 800; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(240,237,228,.85); }
.phead .ph-2 { text-align: right; }
.pr { border-top: 1px solid var(--color-line-soft); padding-top: 1.05rem; padding-bottom: 1.05rem; }
.pr:nth-child(odd) { background: #F7F5EE; }
.pa { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; color: var(--color-ink); }
.pv { font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; color: var(--color-primary-hover); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc { grid-column: 1 / -1; font-size: .82rem; color: var(--color-ink-muted); margin-top: -.1rem; }
.ptotal { background: linear-gradient(120deg, #22392A, var(--color-primary) 60%, var(--color-primary-hover)); color: #fff; padding: 1.2rem 1.6rem 1.25rem; position: relative; }
.ptotal::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--color-accent); }
.pt-l { font-weight: 800; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent-hover); }
.pt-v { font-family: var(--font-heading); font-weight: 800; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.03em; color: #fff; text-align: right; white-space: nowrap; }
.pt-c { grid-column: 1 / -1; font-size: .88rem; font-weight: 600; color: rgba(240,237,228,.9); }
.plan__notes { display: grid; gap: 28px; }
.plan__notes .h3 { margin-top: 0; } .plan__notes p { margin: 0; font-size: 16.5px; line-height: 1.6; }
@media (max-width: 820px) { .plan--table { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .pr, .ptotal { grid-template-columns: 1fr; gap: .1rem; } .pv, .pt-v { text-align: left; } .phead .ph-2 { display: none; } }
.plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.kv { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.kv th, .kv td { text-align: left; padding: 15px 0; border-top: 1px solid var(--color-line); font-size: 16px; vertical-align: top; }
.kv th { font-weight: 500; color: var(--color-ink-muted); width: 48%; padding-right: 16px; }
.kv td { font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.kv tr:last-child th, .kv tr:last-child td { border-bottom: 1px solid var(--color-line); }
.kv__goal td { color: var(--color-primary-hover); font-size: 17px; }
.kv__goal th { color: var(--color-ink); font-weight: 600; }
.plan__copy .h3:first-child { margin-top: 0; }
.plan__copy p { margin: 0 0 6px; font-size: 16.5px; line-height: 1.6; }
.dates { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: 40px; }
.dates::before { content: ""; position: absolute; left: 12px; right: 12px; top: 11px; height: 2px; background: var(--color-line); }
.dates__mark { position: relative; padding-top: 30px; }
.dates__mark::before { content: ""; position: absolute; top: 4px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-surface); }
.dates__mark:last-child { text-align: right; }
.dates__mark:last-child::before { left: auto; right: 0; background: var(--color-primary); }
.dates__d { display: block; font-family: var(--font-heading); font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.02em; }
.dates__t { display: block; font-size: 13px; color: var(--color-ink-muted); margin-top: 2px; }
@media (max-width: 820px) { .plan { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .dates__d { font-size: 17px; } }

/* ---------- 08 the ask: figures on the dark band, the ladder, the pillar cards ---------- */
.ask__wrap { padding: 0 100px; max-width: none; }
.ask__wrap .head { max-width: var(--container-max); }
.ask__row { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 22px; align-items: start; margin: 8px 0 clamp(36px, 4vw, 56px); }
.figures { margin: 0; }
.figures { grid-template-columns: 1fr; align-content: start; border-radius: 14px; text-align: left; padding: 26px 10px 28px; }
.figures .qw-figure-band__tier { text-align: left; padding: 0 22px; }
.figures .qw-figure-band__tier p { max-width: 26ch; }
.figures .qw-figure-band__amt { font-size: clamp(30px, 2.8vw, 42px); white-space: nowrap; }
.figures .qw-figure-band__tier + .qw-figure-band__tier { border-left: 0; border-top: 1px solid rgba(240,237,228,.18); margin-top: 22px; padding-top: 22px; }
@media (max-width: 900px) { .ask__row { grid-template-columns: 1fr; } .ask__wrap { padding: 0 clamp(16px, 4vw, 64px); } }
.ask__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.ask__grid .h3 { margin-top: 0; }
.ladder { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: lad; }
.ladder__step { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: 12px; color: #fff;
  width: calc(100% - var(--i) * 9%); background: var(--color-primary); position: relative; }
.ladder__step:nth-child(1) { background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover)); border-left: 6px solid var(--color-accent); }
.ladder__step:nth-child(2) { background: var(--color-primary-hover); }
.ladder__step:nth-child(3) { background: #4E8A4C; }
.ladder__step:nth-child(4) { background: var(--color-mesh-1); }
.ladder__step:nth-child(5) { background: var(--color-mesh-2); }
.ladder__name { font-family: var(--font-heading); font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.ladder__range { font-size: 13px; font-weight: 600; white-space: nowrap; opacity: .95; }
.gwrap { margin: 0; background: var(--color-surface); border: 1px solid var(--color-line-soft); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 34px rgba(48,79,56,.08); }
.gwrap__head { padding: 22px 26px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 32px; align-items: baseline; }
.gwrap__head .h3 { margin: 0; } .gwrap__head p { margin: 0; font-size: 14.5px; color: var(--color-ink-muted); max-width: 70ch; }
.ghead, .gr, .gtotal { display: grid; grid-template-columns: 7.2rem 5.4rem 6.4rem minmax(0, 1fr) 3.4rem; gap: .8rem; align-items: center; padding: .7rem 1.6rem; }
.ghead { background: var(--color-surface-dark); }
.ghead span { font-weight: 800; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(240,237,228,.85); }
.ghead .gh-4 { grid-column: 4 / span 2; }
.gr { border-top: 1px solid var(--color-line-soft); }
.gr.is-lead { background: #FBF6E6; }
.ga { font-weight: 800; font-size: .95rem; letter-spacing: -.01em; color: var(--color-ink); white-space: nowrap; }
.gc { font-size: .85rem; color: var(--color-ink-muted); white-space: nowrap; }
.gv { font-weight: 700; font-size: .9rem; color: var(--color-primary-hover); white-space: nowrap; }
.gp { height: .9rem; background: var(--color-band-light-tint); border-radius: 3px; min-width: 0; overflow: hidden; }
.gp i { display: block; height: 100%; background: linear-gradient(90deg, var(--color-primary-hover), var(--color-mesh-2)); border-radius: 3px; transform-origin: left; }
.gr.is-lead .gp i { background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover)); }
.gt { font-weight: 800; font-size: .82rem; color: var(--color-ink); text-align: right; white-space: nowrap; }
.gtotal { background: var(--color-surface-dark); color: #fff; }
.gt-l { font-weight: 800; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.gt-c { grid-column: 2 / span 2; font-size: .78rem; color: #CFE0C6; line-height: 1.3; }
.gt-v { font-weight: 800; font-size: .95rem; color: #fff; text-align: right; white-space: nowrap; }
.gt-p { font-weight: 800; font-size: .82rem; color: var(--color-accent-hover); text-align: right; }
@media (max-width: 720px) {
  .gwrap__head { grid-template-columns: 1fr; }
  .ghead, .gr, .gtotal { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr) auto; gap: .5rem; padding: .6rem 1rem; }
  .ga { white-space: normal; font-size: .88rem; } .gc { white-space: normal; }
  .gp, .ghead .gh-4 { display: none; }
  .gv { grid-column: 3; text-align: right; }
  .gt { display: none; }
  .gtotal .gt-p { grid-column: 3; justify-self: end; } .gtotal .gt-c { grid-column: 1 / -1; order: 3; } .gtotal .gt-v { grid-column: 2 / span 2; }
}
.ways { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
.way { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 18px 20px; background: var(--color-surface); border: 1px solid var(--color-line-soft); border-left: 5px solid var(--c); border-radius: 12px; }
.way__idx { font-family: var(--font-heading); font-size: 22px; font-weight: 900; letter-spacing: -.03em; color: var(--color-primary-hover); line-height: 1.1; }
.way h4 { margin: 0 0 4px; font-size: 16.5px; letter-spacing: -.01em; }
.way p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--color-ink-muted); }
.ways-wrap .fine { margin-top: 16px; }
.fine--assets { max-width: 78ch; margin: 28px auto 0; text-align: center; font-size: 14.5px; text-wrap: balance; }
@media (max-width: 900px) { .ask__grid { grid-template-columns: 1fr; } .ladder__step { width: calc(100% - var(--i) * 6%); } }
@media (max-width: 520px) { .ladder__step { width: 100%; flex-direction: column; gap: 2px; } }

/* ---------- 09 your part: five cards and the theme tile on a 3 x 2 grid ---------- */
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.path { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 28px; background: var(--color-surface); border-radius: 18px; border-top: 6px solid var(--c); box-shadow: 0 10px 28px rgba(48,79,56,.08); transition: transform 600ms var(--ease-state), box-shadow 600ms var(--ease-state); }
.path--1 { --c: var(--color-primary); } .path--2 { --c: var(--color-primary-hover); } .path--3 { --c: var(--color-mesh-1); } .path--4 { --c: var(--color-accent); } .path--5 { --c: var(--color-mesh-2); }
.path__title { margin: 0; font-size: 21px; letter-spacing: -.015em; line-height: 1.2; }
.path p { margin: 0 0 auto; font-size: 15.5px; line-height: 1.58; color: var(--color-ink-muted); }
.path .qw-btn { align-self: flex-start; margin-top: 18px; --color-primary: #417746; --color-primary-hover: #304F38; }
@media (hover: hover) { .path:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(48,79,56,.14); } }
.path--theme { border-top: 0; background: linear-gradient(160deg, #22392A, var(--color-primary) 70%); color: #fff; justify-content: flex-end; overflow: hidden; }
.path--theme img { position: absolute; right: -18%; top: -22%; width: 78%; height: auto; opacity: .16; pointer-events: none; }
.path .path__theme { margin: 0; font-family: var(--font-heading); font-size: clamp(22px, 1.9vw, 27px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff; position: relative; }
.path__theme span { display: block; } .path__theme span:last-child { color: var(--color-accent-hover); }
@media (max-width: 900px) { .paths { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .paths { grid-template-columns: 1fr; } .path--theme { min-height: 180px; } }

/* ---------- 06 the founding congregation: the church's own loop under a green veil ---------- */
.congregation { position: relative; isolation: isolate; overflow: hidden; background: #22392A; color: var(--color-ink-on-dark); }
.congregation__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.congregation__img { position: absolute; left: 0; top: -22%; width: 100%; height: 144%; object-fit: cover; object-position: 50% 50%; filter: blur(3px) saturate(.7); will-change: transform; }
.congregation__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(var(--rgb-dark) / .94) 0%, rgb(var(--rgb-dark) / .88) 100%); }
.congregation__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.congregation__in .head { margin-bottom: 0; }
.congregation__mark { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(240,237,228,.24); }
.congregation__mark img { display: block; width: 190px; height: auto; opacity: .82; }
.congregation__in .head__title { color: #fff; }
.congregation__in .qw-eyebrow { color: var(--color-accent-hover); }
.congregation__copy p { font-size: 16.5px; line-height: 1.65; margin: 0 0 1em; color: rgba(240,237,228,.9); }
.congregation__copy p:last-child { margin-bottom: 0; }
@media (max-width: 820px) { .congregation__in { grid-template-columns: 1fr; } }

/* ---------- 10 the letter: the portrait beside the words ---------- */
.letter { display: grid; grid-template-columns: minmax(0, .3fr) minmax(0, .7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.letter__side { position: sticky; top: calc(var(--nav-h) + 48px); }
.portrait { position: relative; width: min(100%, 230px); aspect-ratio: 4 / 5; margin: 12px 0 0 12px; }
.portrait__frame { position: absolute; inset: 0; transform: translate(-12px, -12px); border: 2px solid var(--color-accent); border-radius: 14px; pointer-events: none; }
.portrait__photo { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 48px rgba(48,79,56,.18); }
.portrait__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--rgb-dark) / 0) 70%, rgb(var(--rgb-dark) / .28) 100%); }
.portrait__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: saturate(.92) contrast(1.03); }
.letter__sig { margin: 16px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--color-ink-muted); }
.letter__sig strong { display: block; font-size: 15px; color: var(--color-ink); margin-bottom: 3px; }
.letter__sig span { display: block; }
.letter__body .qw-eyebrow { display: block; margin-bottom: 16px; }
.letter__body p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; margin: 0 0 1em; max-width: 60ch; }
.letter__last { font-weight: 700; color: var(--color-ink); }
@media (max-width: 820px) { .letter { grid-template-columns: 1fr; } .letter__side { position: static; } .portrait { width: 220px; } }

/* ---------- 11 the close: theme over the lobby, how to give on a card ---------- */
.close { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 10vw, 140px) 0; background: #22392A; color: var(--color-ink-on-dark); }
.close__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.close__img { position: absolute; left: 0; top: -16%; width: 100%; height: 132%; object-fit: cover; object-position: 50% 50%; will-change: transform; }
.close__mesh { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--rgb-dark) / .9) 0%, rgb(var(--rgb-dark) / .86) 100%), radial-gradient(ellipse 60% 60% at 15% 20%, rgb(var(--rgb-light) / .3), rgb(var(--rgb-light) / 0) 60%); }
.close__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.close__theme { font-size: clamp(36px, 5.4vw, 72px); line-height: .98; letter-spacing: -.03em; color: #fff; margin: 0 0 24px; max-width: 12ch; text-wrap: balance; }
.close__theme span { display: block; }
.close__head { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; max-width: 48ch; margin: 0; color: rgba(240,237,228,.86); }
.close__download { margin-top: 24px; }
.close__cta { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(240,237,228,.22); max-width: 52ch; }
.close__cta-line { margin: 0 0 20px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; font-weight: 600; color: #fff; }
.pulse { position: relative; display: inline-flex; border-radius: 999px; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: cta-pulse 3.4s var(--ease-state) infinite; }
.pulse:hover::after { animation: none; box-shadow: none; }
.close__contact-btn { --color-primary: #417746; --color-primary-hover: #74AA48; position: relative; padding: 18px 34px; font-size: 14.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.close__contact-btn svg { width: 18px; height: 18px; }
@keyframes cta-pulse { 0%, 100% { box-shadow: 0 0 12px 0 rgb(var(--rgb-bright) / .14); } 50% { box-shadow: 0 0 40px 9px rgb(var(--rgb-bright) / .5); } }
.close__how-intro { font-size: 14.5px !important; color: var(--color-ink-muted) !important; margin: 0 0 16px !important; }
.gives { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--color-line-soft); }
.gives li { display: grid; gap: 2px; padding: 11px 0 11px 26px; border-bottom: 1px solid var(--color-line-soft); position: relative; }
.gives li::before { content: ""; position: absolute; left: 0; top: 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-mesh-2); }
.gives li::after { content: ""; position: absolute; left: 4px; top: 18px; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.gives strong { font-size: 14.5px; color: var(--color-ink); }
.gives span { font-size: 13.5px; line-height: 1.45; color: var(--color-ink-muted); }
.close__card { background: var(--color-surface); color: var(--color-ink); border-radius: var(--radius-xl, 20px); padding: clamp(24px, 3vw, 36px); box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.close__card .h3 { margin-top: 0; }
.close__card p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.close__card strong { color: var(--color-ink); }
.ways-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.ways-list li { position: relative; padding-left: 26px; font-size: 15px; font-weight: 600; line-height: 1.45; }
.ways-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-mesh-2); }
.ways-list li::after { content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.close__thanks { margin-top: 16px !important; font-weight: 700; color: var(--color-ink); }
@media (max-width: 820px) { .close__in { grid-template-columns: 1fr; } }

/* ---------- slots: reserved space that renders as nothing until it is filled ---------- */
.slot { display: block; }
.slot--thermometer, .slot--giving, .slot--contact { height: 0; margin: 0; }

/* ---------- shared: pull line, chips, footer ---------- */
.levels { margin-top: 6px; justify-content: flex-start; }
.levels li strong { font-weight: 800; }
.levels--dark li { background: rgba(240,237,228,.08); border-color: rgba(240,237,228,.28); border-left-color: var(--color-accent-hover); color: #fff; }
.foot { position: relative; background: #1B311E; color: rgba(240,237,228,.78); padding: clamp(36px, 5vw, 56px) 0 28px; overflow: hidden; }
.foot::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--color-primary-hover), var(--color-mesh-1), var(--color-mesh-2), var(--color-accent)); }
.foot__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px 48px; align-items: center; }
.foot__brand img { width: 150px; height: auto; }
.foot__line { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.foot__theme { margin: 0; font-size: 17px; color: rgba(240,237,228,.85); }
.foot__payload { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(240,237,228,.72); }
.foot__initial { color: var(--color-mesh-2); font-weight: 900; }
.foot__bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; margin-top: 8px; padding-top: 20px; border-top: 1px solid rgba(240,237,228,.14); }
.foot__lines { display: grid; gap: 4px; }
.foot__legal { margin: 0; font-size: 12.5px; color: rgba(240,237,228,.55); max-width: none; white-space: nowrap; }
.foot__copy { margin: 0; font-size: 12px; color: rgba(240,237,228,.45); }
@media (max-width: 900px) { .foot__legal { white-space: normal; } }
.foot__top { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(240,237,228,.8); text-decoration: none; cursor: pointer; white-space: nowrap; }
.foot__top svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.foot__top:hover { color: #fff; }
@media (max-width: 860px) { .foot__in { grid-template-columns: 1fr; gap: 20px; } .foot__payload { flex-wrap: wrap; gap: 10px 18px; } }

@media (prefers-reduced-motion: reduce) {
  .hero__img, .hero__glow { animation: none; }
  .hero__frame { transition: none; }
  .pulse::after { transition: none; animation: none; }
}

/* ---------- lane pages (step 5): the shared classes above plus these ---------- */
.hero--lane { min-height: 72svh; }
.hero--lane .hero__title { margin-bottom: 30px; }
@media (max-width: 640px) { .hero--lane { min-height: 64svh; } }
.prose p { margin: 0 0 1em; font-size: 17px; line-height: 1.65; max-width: 70ch; }
.prose p:last-child { margin-bottom: 0; }
.prose.cols p { max-width: none; }
.prose__strong { margin-top: 36px; max-width: 70ch; }
.prose__after { font-size: 17px; line-height: 1.65; max-width: 70ch; margin: 0; }
.sub { margin-top: 40px; padding: 28px 32px; border-radius: var(--radius-lg); background: var(--color-band-light-tint); border: 1px solid var(--color-line-soft); max-width: 72ch; }
.blk--paper .sub { background: var(--color-surface); }
.blk--stone .sub { background: var(--color-surface); border-color: transparent; }
.sub .h3 { margin-top: 0; }
.sub p { margin: 0 0 1em; font-size: 16px; line-height: 1.6; }
.sub p:last-child { margin-bottom: 0; }
.sub .levels { margin: 6px 0 0; }
.checks, .defs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--color-line); max-width: 78ch; }
.checks li, .defs li { position: relative; padding: 16px 0 16px 34px; border-bottom: 1px solid var(--color-line); font-size: 17px; line-height: 1.55; }
.checks li::before { content: ""; position: absolute; left: 0; top: 22px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-mesh-2); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center / contain no-repeat; }
.checks li::after { content: ""; position: absolute; left: 5px; top: 28px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.defs li { padding-left: 0; }
.defs li strong { color: var(--color-ink); }
.seq--plain h4 { margin-top: 11px; font-size: 18px; }
.fine--body { font-size: 15.5px; line-height: 1.6; max-width: 74ch; margin-top: 22px; }
.split--table { align-items: start; }
.tbl-wrap { overflow-x: auto; }
.kv--headed thead th { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-band-accent-ink); border-top: 0; padding-top: 0; }
.kv--headed tbody th { font-weight: 700; color: var(--color-ink); }
.kv--headed td { font-weight: 600; }
.kv--headed th:not(:first-child), .kv--headed td { text-align: right; }
.kv--headed th:first-child { width: auto; }
.naming { max-width: 62ch; }
.kv--naming th { width: 68%; font-weight: 600; color: var(--color-ink); }
.kv--naming td { text-align: right; color: var(--color-band-accent-ink); }
.dates--lane { max-width: 760px; margin-top: 8px; }
.dates__line { margin-top: 32px; }
.close__download { justify-content: center; margin-top: 28px; }
.verse { margin: 0 auto 36px; max-width: 34ch; }
.verse__text { font-family: var(--font-heading); font-size: clamp(20px, 2.2vw, 28px); font-weight: 500; font-style: italic; line-height: 1.4; color: rgba(240,237,228,.92); margin: 0 0 10px; }
.verse__text::before { content: "\201C"; } .verse__text::after { content: "\201D"; }
.verse__ref { display: block; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-hover); }
.blk--stone .kv th, .blk--stone .kv td { border-color: rgba(48,79,56,.18); }
@media (max-width: 520px) { .close__download .qw-btn { white-space: normal; text-align: center; max-width: 100%; } }
@media (max-width: 520px) { .fit__card .qw-btn, .close__download .qw-btn { white-space: normal; text-align: left; max-width: 100%; } }

/* ---------- the contact pop-up: a dialog with a deep green rail and the library's form register ---------- */
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkbtn:hover { color: var(--color-mesh-2); }
.close__contact-line { margin: 18px 0 0 !important; font-size: 14.5px !important; color: var(--color-ink-muted) !important; }
.cmodal { position: fixed; inset: 0; margin: auto; width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: min(92svh, 860px); padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: var(--color-surface); color: var(--color-ink); box-shadow: 0 40px 100px rgba(0,0,0,.35); opacity: 0; transform: translateY(18px) scale(.985); }
.cmodal[open] { opacity: 1; transform: none; transition: opacity 360ms var(--ease-reveal), transform 480ms var(--ease-reveal); }
@starting-style { .cmodal[open] { opacity: 0; transform: translateY(18px) scale(.985); } }
.cmodal::backdrop { background: rgb(var(--rgb-forest) / .72); backdrop-filter: blur(6px); }
.cmodal__in { display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: 0; max-height: min(92svh, 860px); }
.cmodal__rail { position: relative; overflow: hidden; padding: 40px 36px 36px; background: linear-gradient(165deg, #22392A 0%, var(--color-primary) 60%, var(--color-primary-hover) 100%); color: var(--color-ink-on-dark); display: flex; flex-direction: column; }
.cmodal__mark { width: 170px; height: auto; margin-bottom: 40px; }
.cmodal__eyebrow { color: var(--color-accent-hover); margin-bottom: 14px; }
.cmodal__title { font-family: var(--font-heading); font-size: clamp(22px, 2vw, 26px); line-height: 1.1; letter-spacing: -.02em; color: #fff; margin: 0 0 16px; }
.cmodal__title span { display: block; }
.cmodal__lead { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(240,237,228,.86); text-wrap: balance; }
.cmodal__leaf { position: absolute; right: -26%; bottom: -18%; width: 78%; height: auto; opacity: .12; pointer-events: none; }
.cmodal__body { padding: 40px 40px 36px; overflow-y: auto; overscroll-behavior: contain; }
.cmodal__close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--color-line); border-radius: 50%; background: var(--color-surface); color: var(--color-ink); cursor: pointer; transition: background var(--dur-fast) var(--ease-state), transform var(--dur-fast) var(--ease-state); }
.cmodal__close svg { width: 18px; height: 18px; fill: none; }
.cmodal__close:hover { background: var(--color-bg); transform: rotate(90deg); }
.cform .qw-field-row { gap: 16px; margin-bottom: 16px; }
.cform .qw-field { margin: 0; }
.cform .qw-field__label { color: var(--color-ink); }
.cform .qw-field__control { --color-form-tint: #DFD8C6; background: #FAF8F3; border-color: #E7E2D2; color: var(--color-ink); font-size: 15px; }
.cform .qw-field__control:focus { background: #fff; border-color: var(--color-primary-hover); box-shadow: 0 0 0 3px rgb(var(--rgb-deep) / .16); }
.cform .qw-field__control.is-invalid { border-color: #B3261E; }
.cform .qw-field__error { display: none; margin-top: 6px; font-size: 12.5px; color: #B3261E; }
.cform .qw-field__error[data-open="1"] { display: block; }
.cform__about { margin: 4px 0 18px; }
.cform__about .qw-fieldset__legend { display: block; color: var(--color-ink); letter-spacing: .16em; font-size: 12px; margin-bottom: 12px; }
.cform__about .qw-fieldset__legend .qw-req { float: none; margin-left: 2px; }
.cform__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.cform__check { margin: 0; padding: 9px 12px; border: 1px solid #E7E2D2; border-radius: 10px; background: #FAF8F3; font-size: 13.5px; white-space: nowrap; color: var(--color-ink); align-items: center; transition: border-color var(--dur-fast) var(--ease-state), background var(--dur-fast) var(--ease-state); }
.cform__check:has(input:checked) { border-color: var(--color-primary-hover); background: rgb(var(--rgb-deep) / .08); }
.cform__check .qw-checkbox__box { --color-form-focus: var(--color-primary-hover); flex: none; border: 1.5px solid var(--color-band-stone); background: #fff; }
.cform__check .qw-checkbox__label { font-weight: 600; letter-spacing: -.005em; }
.cform__about.is-invalid .cform__check { border-color: rgba(179,38,30,.5); }
.cform .qw-field__control--textarea { min-height: 110px; }
.cform__summary { margin-bottom: 18px; font-size: 13.5px; color: #B3261E; background: rgba(179,38,30,.06); border-color: rgba(179,38,30,.4); }
.cform__foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.cform__submit { --color-primary: #417746; --color-primary-hover: #304F38; padding: 15px 28px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; }
.cform__submit[disabled] { opacity: .7; cursor: wait; }
.cform__note { margin: 0; font-size: 12.5px; color: var(--color-ink-muted); }
.cform[data-open="0"] { display: none; }
.cform__done { display: none; text-align: center; padding: 40px 12px; }
.cform__done[data-open="1"] { display: block; }
.cform__done img { width: 64px; height: 64px; margin: 0 auto 18px; }
.cform__done h3 { font-family: var(--font-heading); font-size: 26px; letter-spacing: -.02em; margin: 0 0 10px; color: var(--color-ink); }
.cform__done p { margin: 0 auto 22px; max-width: 40ch; font-size: 16px; line-height: 1.6; color: var(--color-ink-muted); }
body.has-modal { overflow: hidden; }
@media (max-width: 860px) {
  .cmodal { inset: 14px 16px; margin: 0; width: auto; height: auto; max-width: none; max-height: none; border-radius: 18px; }
  .cmodal__in { display: block; height: 100%; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
  .cmodal__rail { padding: 28px 24px 24px; }
  .cmodal__mark { width: 140px; margin-bottom: 22px; }
  .cmodal__title { font-size: 22px; }
  .cmodal__lead { display: none; }
  .cmodal__leaf { width: 56%; right: -18%; bottom: -30%; }
  .cmodal__body { padding: 24px 20px 28px; overflow: visible; }
  /* the close stays put while the sheet scrolls under it, so it has to read on the
     green rail AND on the white form: a solid deep-green disc, a light ring, a shadow */
  .cmodal__close { background: var(--color-surface-dark); border: 1.5px solid rgba(255,255,255,.6); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.32); }
  .cmodal__close:hover { background: var(--color-primary-hover); transform: none; }
  .cform .qw-field-row { grid-template-columns: 1fr; }
  .cform__checks { grid-template-columns: 1fr; }
  .cform__foot { flex-direction: column; align-items: stretch; }
  .cform__submit { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cmodal, .cmodal[open] { transition: none; transform: none; } }

/* ==========================================================================
   THE OVERVIEW FILM IN THE HERO (Diallo, Oct 19, 2026)
   .hfilm is one button: a corner card at 1100px and wider (bottom-aligned with the
   hero's buttons, in the right gutter), a compact row under the buttons below that.
   The muted loop fades in over its own first frame once it is moving; the tap opens
   .fmodal, the film with sound (Vimeo). The card's ground is the hero's own dark
   green, so nothing flashes while the loop loads (Standard 21 rule 5).
   ========================================================================== */
.hfilm { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 8px 18px 8px 8px; width: max-content; max-width: 100%;
  border: 1px solid rgba(240,237,228,.24); border-radius: 16px; background: rgb(var(--rgb-dark) / .46); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 14px 34px rgba(0,0,0,.28); transition: border-color var(--dur-fast) var(--ease-state), background-color var(--dur-fast) var(--ease-state); }
.hfilm.is-done { animation: none; opacity: 1; transform: none; }   /* release the reveal once it has played (Safari composites a still-animated box with video in it badly) */
.hfilm:hover { border-color: rgba(240,237,228,.5); background: rgb(var(--rgb-dark) / .6); }
.hfilm:focus-visible { outline: 3px solid var(--color-accent-hover); outline-offset: 3px; }
.hfilm__media { position: relative; flex: none; width: 128px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #22392A; }
.hfilm__poster, .hfilm__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hfilm__video { opacity: 0; transition: opacity 700ms var(--ease-reveal); }
.hfilm.is-playing .hfilm__video { opacity: 1; }
.hfilm__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgb(var(--rgb-dark) / .45)); pointer-events: none; }
/* the BQ video play button (first-option nsbe, rcoc film page): green disc, a thin gold edge and a gold
   ring that pulses out every 2.4s; the gold is the palette's accent, the ring's reach scales with the disc */
.hfilm__play { --pulse-reach: 14px; position: absolute; z-index: 2; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; display: grid; place-items: center; border-radius: 50%;
  background: var(--color-primary-hover); border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  animation: hfilm-pulse 2.4s ease-out infinite; transition: transform var(--dur-fast) var(--ease-state), background-color var(--dur-fast) var(--ease-state); }
@keyframes hfilm-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 50%, transparent); } 100% { box-shadow: 0 0 0 var(--pulse-reach) color-mix(in srgb, var(--color-accent) 0%, transparent); } }
.hfilm__play svg { width: 46%; height: 46%; margin-left: 8%; fill: #fff; }
.hfilm:hover .hfilm__play { transform: scale(1.05); background: var(--color-mesh-2); }
.hfilm__text { display: grid; gap: 4px; }
.hfilm__label { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; line-height: 1.5; text-transform: uppercase; }
@media (min-width: 1100px) {
  .hfilm { position: absolute; right: var(--gutter); bottom: calc(clamp(22px, 3.6vh, 40px) + var(--hfilm-lift, 24px)); margin: 0; width: clamp(280px, 23vw, 360px); flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 18px; }
  .hfilm__media { width: 100%; border-radius: 0; }
  .hfilm__play { --pulse-reach: 20px; width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .hfilm__play svg { width: 40%; height: 40%; }
  .hfilm__text { padding: 13px 16px 14px; }
}
/* phones (Diallo, Oct 19): the whole insert runs the width inside the margins, a larger thumbnail, and
   "Overview Film" on its own second line */
@media (max-width: 640px) {
  .hfilm { margin-top: 18px; width: 100%; gap: 16px; padding: 9px 16px 9px 9px; }
  .hfilm__media { width: auto; flex: 1 1 auto; min-width: 112px; max-width: 196px; }   /* the thumbnail takes what the label leaves, up to 196px */
  .hfilm__text { flex: none; }
  .hfilm__label > span { display: block; white-space: nowrap; }
  .hfilm__label { font-size: 13px; }
}

.fmodal { position: fixed; inset: 0; width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: clamp(56px, 8vh, 88px) clamp(12px, 4vw, 48px);
  border: 0; background: transparent; display: none; place-items: center; opacity: 0; transition: opacity 320ms var(--ease-reveal), display 320ms allow-discrete, overlay 320ms allow-discrete; }
.fmodal[open] { display: grid; opacity: 1; }
@starting-style { .fmodal[open] { opacity: 0; } }
.fmodal::backdrop { background: rgb(var(--rgb-forest) / .9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fmodal__box { position: relative; width: min(1200px, 100%, calc((100svh - 2 * clamp(56px, 8vh, 88px)) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 40px 100px rgba(0,0,0,.5); }
.fmodal__frame, .fmodal__frame iframe, .fmodal__video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fmodal__video { display: block; object-fit: contain; background: #000; }
.fmodal__video[hidden] { display: none; }
.fmodal__close { position: fixed; top: clamp(12px, 2.4vh, 24px); right: clamp(12px, 2.4vw, 24px); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1.5px solid rgba(255,255,255,.6); border-radius: 50%;
  background: rgb(var(--rgb-dark) / .7); color: #fff; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-state); }
.fmodal__close:hover { background: var(--color-primary-hover); }
.fmodal__close:focus-visible { outline: 3px solid var(--color-accent-hover); outline-offset: 3px; }
.fmodal__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .fmodal, .hfilm__video, .hfilm__play { transition: none; } .hfilm__play { animation: none; } }

/* ==========================================================================
   THE FEEDBACK FORM (/feedback/), scoped to body.fb-body and .fb-*
   Folded in from its own file on Oct 19, 2026 (Standard 21): every page now links
   exactly two stylesheets, /css/qw-lib.css and this one, so Safari waits on nothing
   else before its first paint. Every rule here is scoped to its page's body class,
   so it never touches another page.
   ========================================================================== */
/* lifecommunitycenter.org/feedback · the site-visit feedback page
   Over qw.css and site.css (the palette, the glass bar, the footer).
   Unprefixed fb- classes are this page's; qw- is the library. Mobile first:
   filled standing in a room on a phone, one column, tap targets 44px and up,
   the grid never scrolls sideways at 360px. Every choice reads as a button
   before it is touched: white, a firm edge, a small lift; chosen turns deep
   green. Reveal motion is the site's (Tier 1). Ticket: web/_feedback-form-ticket.md, v1,
   Sept 25 2026, plus Diallo's revisions the same night. */

.fb-body { background: var(--color-bg); overflow-x: hidden; }

/* ---------- the page: under the fixed bar ---------- */
.fb { padding: calc(var(--fb-bar-top, 24px) + var(--nav-h) + clamp(28px, 5vw, 52px)) 0 clamp(48px, 7vw, 88px); }
@media (max-width: 820px) { .fb { --fb-bar-top: 12px; } }
.fb__in { width: min(720px, calc(100% - 32px)); margin: 0 auto; }
.fb__intro { margin-bottom: 28px; }
.fb__eyebrow { color: var(--color-primary-hover); }
.fb__title { font-family: var(--font-heading); font-size: clamp(28px, 6vw, 44px); line-height: 1.06; letter-spacing: -.022em; margin: 10px 0 14px; text-wrap: balance; color: var(--color-ink); }
.fb__lead { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--color-ink-muted); max-width: 58ch; }

/* ---------- the form ---------- */
.fb-form { background: var(--color-surface); border: 1px solid var(--color-line-soft); border-radius: 18px; padding: clamp(20px, 4vw, 36px); box-shadow: 0 12px 34px rgba(48,79,56,.08); }
.fb-form[data-open="0"] { display: none; }
.fb-form__summary { margin-bottom: 18px; font-size: 14px; color: #B3261E; background: rgba(179,38,30,.06); border-color: rgba(179,38,30,.4); }
.fb-q { margin: 0 0 32px; padding: 0; border: 0; min-width: 0; }
.fb-q--contact { margin-bottom: 0; }
.fb-q__prompt { display: block; margin: 0 0 12px; padding: 0; font-family: var(--font-heading); font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--color-ink); }
.fb-q__opt { display: inline; white-space: nowrap; font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-ink-muted); vertical-align: baseline; }
.fb-q__line { display: block; }
.fb-q__error { display: none; margin-top: 8px; font-size: 13px; font-weight: 600; color: #B3261E; }
.fb-q__error[data-open="1"] { display: block; }
.fb-q.is-invalid .fb-q__prompt { color: #B3261E; }

/* ---------- the button face every choice shares ----------
   White on the stone row, a visible edge, a soft lift; pressed dips; chosen
   fills deep green. The same face on the scale, the five, the pills and the
   chips so a visitor learns it once. */
.fb-scale.qw-choice--small .qw-choice__label,
.fb-five.qw-choice--toggle .qw-choice__label,
.fb-opt__label,
.fb-checks .fb-check {
  background: #fff; border: 1.5px solid var(--color-line); border-radius: 10px;
  box-shadow: 0 1px 0 rgba(48,79,56,.06), 0 2px 6px rgba(48,79,56,.10);
  color: var(--color-ink); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-state), border-color var(--dur-fast) var(--ease-state), color var(--dur-fast) var(--ease-state), box-shadow var(--dur-fast) var(--ease-state), transform var(--dur-fast) var(--ease-state);
}
@media (hover: hover) {
  .fb-scale.qw-choice--small .qw-choice__option:hover .qw-choice__label,
  .fb-five.qw-choice--toggle .qw-choice__option:hover .qw-choice__label,
  .fb-opt:hover .fb-opt__label,
  .fb-checks .fb-check:hover { border-color: var(--color-primary); color: var(--color-primary-hover); box-shadow: 0 1px 0 rgba(48,79,56,.06), 0 4px 10px rgba(48,79,56,.14); }
}
.fb-scale.qw-choice--small .qw-choice__option:active .qw-choice__label,
.fb-five.qw-choice--toggle .qw-choice__option:active .qw-choice__label,
.fb-opt:active .fb-opt__label,
.fb-checks .fb-check:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(48,79,56,.10); }
/* chosen */
.fb-scale.qw-choice--small .qw-choice__option input:checked + .qw-choice__label,
.fb-five.qw-choice--toggle .qw-choice__option input:checked + .qw-choice__label,
.fb-opt input:checked + .fb-opt__label {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); border-color: var(--color-primary-hover); color: #fff;
  box-shadow: 0 6px 16px -6px rgba(48,79,56,.5);
}
.fb-scale.qw-choice--small .qw-choice__option input:checked:hover + .qw-choice__label,
.fb-five.qw-choice--toggle .qw-choice__option input:checked:hover + .qw-choice__label,
.fb-opt input:checked:hover + .fb-opt__label { color: #fff; }
/* keyboard focus */
.fb-scale.qw-choice--small .qw-choice__option input:focus-visible + .qw-choice__label,
.fb-five.qw-choice--toggle .qw-choice__option input:focus-visible + .qw-choice__label,
.fb-opt input:focus-visible + .fb-opt__label,
.fb-checks .fb-check:has(input:focus-visible) { outline: 2px solid var(--color-primary-hover); outline-offset: 2px; }

/* the grid: a row per space, the four points as buttons under the name, a
   hairline between rows and nothing boxed (Diallo, Sept 25). The border and
   overflow reset undo choice-toggle.css's .qw-choice box (the same library
   collision): without it a rectangle frames the four, and the five.
   Three classes on the label rule: the library's --toggle.--small rule is
   three deep, and choice-toggle.css sets letter-spacing and uppercase on
   the same class name (a library collision, logged for the harvest). */
.fb-grid { display: grid; }
.fb-grid__row { padding: 14px 0; border-top: 1px solid var(--color-line-soft); }
.fb-grid__row:first-child { border-top: 0; padding-top: 4px; }
.fb-grid__row.is-invalid .fb-grid__space { color: #B3261E; }
.fb-grid__name { display: grid; gap: 2px; margin-bottom: 10px; }
.fb-grid__space { font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; }
.fb-grid__sub { font-size: 12.5px; line-height: 1.4; color: var(--color-ink-muted); }
.fb-scale { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0; background: none; border: 0; border-radius: 0; overflow: visible; }
.fb-scale.qw-choice--small .qw-choice__label { padding: 12px 4px; min-height: 46px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; line-height: 1.15; letter-spacing: 0; text-transform: none; text-align: center; white-space: nowrap; }

/* single choice as pills that wrap */
.fb-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-opt { flex: 1 1 auto; }
.fb-opt__label { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; text-align: center; }

/* multi-select as chips, one per line on a phone */
.fb-checks { display: grid; grid-template-columns: 1fr; gap: 8px; }
.fb-checks .fb-check { margin: 0; padding: 10px 12px; min-height: 46px; font-size: 14px; align-items: center; }
.fb-checks .fb-check:has(input:checked) { border-color: var(--color-primary-hover); background: rgb(var(--rgb-deep) / .10); }
.fb-checks .fb-check .qw-checkbox__box { --color-form-focus: var(--color-primary-hover); flex: none; border: 1.5px solid var(--color-band-stone); background: #fff; }
.fb-checks .fb-check .qw-checkbox__label { font-weight: 700; letter-spacing: -.005em; line-height: 1.35; }
.fb-q.is-invalid .fb-check { border-color: rgba(179,38,30,.5); }

/* the five: 1 to 5 as buttons with the end labels under them */
.fb-five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 0; background: none; border: 0; border-radius: 0; overflow: visible; }
.fb-five.qw-choice--toggle .qw-choice__label { min-height: 50px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 18px; font-weight: 800; letter-spacing: 0; padding: 10px 4px; }
.fb-five__ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--color-ink-muted); }

/* open text, the Other field, the contact block */
.fb-text { width: 100%; min-height: 96px; resize: vertical; }
.fb-form .qw-field__control { --color-form-tint: #DFD8C6; background: #F7F4EC; border-color: var(--color-line); color: var(--color-ink); font-size: 16px; }
.fb-form .qw-field__control:focus { background: #fff; border-color: var(--color-primary-hover); box-shadow: 0 0 0 3px rgb(var(--rgb-deep) / .16); }
.fb-form .fb-field { margin: 0; }
.fb-form .fb-field .qw-field__label { color: var(--color-ink); }
.fb-other { display: none; margin-top: 12px; }
.fb-other[data-open="1"] { display: block; }
.fb-contact { display: grid; gap: 14px; }

/* the foot */
.fb-form__foot { margin-top: 28px; }
.fb-submit { --color-primary: #417746; --color-primary-hover: #304F38; width: 100%; justify-content: center; padding: 17px 28px; min-height: 52px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 13.5px; }
.fb-submit[disabled] { opacity: .7; cursor: wait; }

/* the done state replaces the form */
.fb-done { display: none; text-align: center; padding: 40px 20px; background: var(--color-surface); border: 1px solid var(--color-line-soft); border-radius: 18px; box-shadow: 0 12px 34px rgba(48,79,56,.08); }
.fb-done[data-open="1"] { display: block; }
.fb-done img { width: 64px; height: 64px; margin: 0 auto 18px; }
.fb-done h2 { font-family: var(--font-heading); font-size: 28px; letter-spacing: -.02em; margin: 0 0 10px; color: var(--color-ink); }
.fb-done p { margin: 0 auto 22px; max-width: 40ch; font-size: 16px; line-height: 1.6; color: var(--color-ink-muted); }
.fb-done .qw-btn { --color-primary: #417746; --color-primary-hover: #304F38; }

/* wider than a phone: the grid row puts the name beside the scale */
@media (min-width: 640px) {
  .fb-grid__row { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 16px; align-items: center; }
  .fb-grid__name { margin-bottom: 0; }
  .fb-checks { grid-template-columns: 1fr 1fr; }
  .fb-contact { grid-template-columns: 1fr 1fr 1fr; }
  .fb-form__foot { display: flex; justify-content: flex-start; }
  .fb-submit { width: auto; }
}
@media (max-width: 399px) {
  /* the narrowest phones: the row loses side padding so Definitely fits on one line */
  .fb-grid__row { padding: 12px 0; }
  .fb-scale { gap: 4px; }
  .fb-scale.qw-choice--small .qw-choice__label { font-size: 11px; padding: 12px 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-opt__label, .fb-checks .fb-check, .fb-scale.qw-choice--small .qw-choice__label, .fb-five.qw-choice--toggle .qw-choice__label { transition: none; }
}

/* ==========================================================================
   THE FEEDBACK REPORT (/feedback/report/), scoped to body.rp-body and .rp-*
   Folded in from its own file on Oct 19, 2026 (Standard 21): every page now links
   exactly two stylesheets, /css/qw-lib.css and this one, so Safari waits on nothing
   else before its first paint. Every rule here is scoped to its page's body class,
   so it never touches another page.
   ========================================================================== */
/* lifecommunitycenter.org/feedback/report · the form report
   Over qw.css and site.css (the palette, the glass bar, the footer). rp- is
   this page's (the qw-report pattern once harvested); qw- is the library.
   Palette by token only, so the next brand swaps in by changing the :root
   block: series on --color-primary / --color-primary-hover, the scale on
   --rgb-deep, --rgb-light, --color-band-stone, --color-band-accent-ink;
   never the gold accent (charts never use the accent token). Mobile first;
   two columns of sections from 980px. Craft layer (Standard 19): bars grow
   in on first paint, the section heads carry the site's two-tone rule. */

.rp-body { background: var(--color-bg); overflow-x: hidden; }
.rp [hidden] { display: none !important; }
.rp { --rp-ink: var(--color-ink); --rp-muted: var(--color-ink-muted); --rp-line: var(--color-line-soft); --rp-card: var(--color-surface);
      --rp-ground: color-mix(in srgb, var(--color-bg) 55%, #fff); --rp-tint: color-mix(in srgb, var(--color-primary) 7%, #fff);
      --rp-s0: var(--color-primary); --rp-s0b: var(--color-primary-hover);
      --rp-radius: 18px; --rp-shadow: 0 14px 40px rgba(48,79,56,.08);
      padding: calc(var(--rp-bar-top, 24px) + var(--nav-h) + clamp(28px, 5vw, 56px)) 0 clamp(48px, 7vw, 88px); }
@media (max-width: 820px) { .rp { --rp-bar-top: 12px; } }
.rp__in { width: min(1040px, calc(100% - 32px)); margin: 0 auto; }
.rp__intro { margin-bottom: 22px; }
.rp__eyebrow { color: var(--color-primary-hover); }
.rp__title { font-family: var(--font-heading); font-size: clamp(32px, 6vw, 52px); line-height: 1.02; letter-spacing: -.026em; margin: 10px 0 0; color: var(--rp-ink); }
.rp__lead { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--rp-muted); max-width: 60ch; }

/* ---------- the summary paragraph: the one voice on the page ---------- */
.rp-summary { position: relative; background: var(--rp-card); border: 1px solid var(--rp-line); border-radius: var(--rp-radius); padding: 24px 26px 20px; margin: 0 0 18px; box-shadow: var(--rp-shadow); overflow: hidden; }
.rp-summary::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--color-mesh-1), var(--color-primary-hover)); }
.rp-summary__text { margin: 0 0 10px; font-family: var(--font-heading); font-size: clamp(15.5px, 1.4vw, 18px); font-weight: 400; line-height: 1.6; letter-spacing: 0; color: var(--rp-ink); text-wrap: pretty; }
.rp-summary__line { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted); }

/* ---------- the filters bar (off on this instance; the engine keeps it) ---------- */
.rp-bar { position: relative; z-index: 20; background: rgb(255 255 255 / .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--rp-line); border-radius: 14px; padding: 12px 16px; margin: 0 0 18px; box-shadow: var(--rp-shadow); }
.rp-bar__head { margin: 2px 0 10px; }
.rp-bar__title { margin: 0; font-family: var(--font-heading); font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--rp-ink); }
.rp-bar__note { margin: 2px 0 0; font-size: 13px; color: var(--rp-muted); }
.rp-bar__row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.rp-bar__row--count { margin-top: 8px; align-items: center; justify-content: space-between; }
.rp-bar__group { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.rp-bar__field { display: grid; gap: 3px; }
.rp-bar__label { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted); }
.rp-select { font: inherit; font-size: 14px; font-weight: 600; color: var(--rp-ink); background: var(--rp-ground); border: 1.5px solid var(--color-line); border-radius: 10px; padding: 8px 10px; min-height: 44px; }
.rp-select:focus-visible { outline: 2px solid var(--color-primary-hover); outline-offset: 2px; }
.rp-date { min-width: 140px; }
.rp-bar__count { font-size: 13.5px; font-weight: 700; color: var(--rp-ink); }
.rp-bar__clear { font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-hover); background: none; border: 0; cursor: pointer; padding: 6px 0; min-height: 44px; white-space: nowrap; }

/* ---------- loading, locked, error ---------- */
.rp-state { display: flex; align-items: center; gap: 10px; padding: 22px 20px; border: 1px dashed var(--color-line); border-radius: 14px; color: var(--rp-muted); font-size: 15px; background: var(--rp-card); }
.rp-state__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-mesh-1); animation: rp-pulse 1.2s ease-in-out infinite; }
.rp-state.is-error { border-style: solid; color: var(--rp-ink); }
.rp-state.is-error .rp-state__dot { animation: none; background: var(--color-band-accent-ink); }
@keyframes rp-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }

/* ---------- headline metrics ---------- */
.rp-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 18px; }
.rp-metric { position: relative; background: var(--rp-card); border: 1px solid var(--rp-line); border-radius: 16px; padding: 18px 16px 14px; display: grid; gap: 2px; overflow: hidden; }
.rp-metric::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--color-primary-hover), var(--color-mesh-1)); }
.rp-metric__v { font-family: var(--font-heading); font-size: clamp(28px, 4vw, 36px); font-weight: 800; letter-spacing: -.025em; line-height: 1; color: var(--color-primary-hover); }
.rp-metric__v--text { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.15; padding-top: 4px; }
.rp-metric__sub { font-size: 12.5px; font-weight: 600; color: var(--rp-muted); }
.rp-metric__l { margin-top: 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted); }

/* ---------- sections: a header band, then the body ---------- */
.rp-sections { display: grid; grid-template-columns: 1fr; gap: 16px; }
.rp-section { margin: 0; align-self: start; min-width: 0; background: var(--rp-card); border: 1px solid var(--rp-line); border-radius: var(--rp-radius); box-shadow: var(--rp-shadow); overflow: hidden; }
.rp-section__head { position: relative; width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px 18px; background: var(--rp-tint); border: 0; border-bottom: 1px solid var(--rp-line); cursor: pointer; text-align: left; font: inherit; color: var(--rp-ink); }
.rp-section__head::before { content: ""; position: absolute; left: 0; top: 0; width: 72px; height: 4px; background: linear-gradient(90deg, var(--color-mesh-1), var(--color-primary-hover)); border-radius: 0 0 4px 0; }
.rp-section__text { display: grid; gap: 6px; min-width: 0; }
.rp-section__title { margin: 0; font-family: var(--font-heading); font-size: clamp(20px, 2.6vw, 24px); font-weight: 800; letter-spacing: -.018em; line-height: 1.15; }
.rp-section__q { font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--color-primary-hover); text-wrap: pretty; }
.rp-section__chev { width: 12px; height: 12px; margin-top: 10px; border-right: 2.5px solid var(--color-primary-hover); border-bottom: 2.5px solid var(--color-primary-hover); transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease-state); flex: none; margin-right: 4px; }
.rp-section.is-open .rp-section__chev { transform: rotate(45deg); }
.rp-section:not(.is-open) .rp-section__head { border-bottom: 0; }
.rp-section__body { padding: 18px 22px 24px; }
.rp-note { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--rp-muted); max-width: 64ch; }
.rp-empty { margin: 0; color: var(--rp-muted); font-size: 15px; }

/* ---------- the grid: one stacked bar per space, every segment named ---------- */
.rp-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.rp-legend__item { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--rp-ink); padding: 5px 12px 5px 5px; border: 1px solid var(--rp-line); border-radius: 999px; background: #fff; }
.rp-legend__item i { width: 38px; height: 22px; border-radius: 6px; }
.rp-l0 i, .rp-strip__cell.rp-l0 { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); }
.rp-l1 i, .rp-strip__cell.rp-l1 { background: linear-gradient(135deg, var(--color-mesh-1), var(--color-mesh-2)); }
.rp-l2 i, .rp-strip__cell.rp-l2 { background: var(--color-band-stone); }
.rp-l3 i, .rp-strip__cell.rp-l3 { background: var(--color-band-accent-ink); }
.rp-legend__item.rp-l0 i, .rp-strip__k.rp-l0 i { background: var(--color-primary-hover); }
.rp-legend__item.rp-l1 i, .rp-strip__k.rp-l1 i { background: var(--color-mesh-1); }
.rp-legend__item.rp-l2 i, .rp-strip__k.rp-l2 i { background: var(--color-band-stone); }
.rp-legend__item.rp-l3 i, .rp-strip__k.rp-l3 i { background: var(--color-band-accent-ink); }
.rp-grid__row { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--rp-line); }
.rp-grid__row:first-of-type { border-top: 0; padding-top: 4px; }
.rp-grid__name { display: grid; gap: 2px; }
.rp-grid__name strong { font-family: var(--font-heading); font-size: 16px; letter-spacing: -.01em; }
.rp-grid__name small { font-size: 12.5px; color: var(--rp-muted); }
.rp-strip { display: grid; gap: 6px; }
.rp-strip__cells { display: flex; gap: 3px; width: 100%; }
.rp-strip__cell { position: relative; flex: 0 0 var(--w); min-width: 0; min-height: 42px; border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; overflow: hidden; transform-origin: left center; animation: rp-grow var(--dur, .6s) var(--ease-state) both; animation-delay: var(--reveal-delay, 0ms); }
.rp-strip__cell b { font-family: var(--font-heading); font-size: 15px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.rp-strip__cell em { font-style: normal; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.rp-strip__cell.rp-l2 b, .rp-strip__cell.rp-l2 em { color: var(--rp-ink); text-shadow: none; }
.rp-strip__cell.is-narrow em { display: none; }
.rp-strip__key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; font-weight: 600; color: var(--rp-muted); }
.rp-strip__k { display: inline-flex; align-items: center; gap: 6px; }
.rp-strip__k i { width: 10px; height: 10px; border-radius: 3px; }
.rp-strip__k b { color: var(--rp-ink); font-weight: 800; }
@keyframes rp-grow { from { transform: scaleX(.2); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- bars (choices and the 1 to 5) ---------- */
.rp-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rp-bar-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 9px 10px; border-radius: 10px; }
.rp-bar-row:nth-child(odd) { background: var(--rp-ground); }
.rp-bar-row__label { font-size: 14px; font-weight: 700; color: var(--rp-ink); line-height: 1.3; }
.rp-bar-row__track { display: block; height: 18px; background: color-mix(in srgb, var(--color-band-stone) 45%, #fff); border-radius: 999px; overflow: hidden; }
.rp-bar-row__fill { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--rp-s0), var(--rp-s0b) 55%, var(--color-mesh-1)); transform-origin: left; animation: rp-grow .7s var(--ease-state) both; }
.rp-bar-row__num { font-size: 13px; font-weight: 700; color: var(--rp-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-bar-row.is-zero .rp-bar-row__label { color: var(--rp-muted); font-weight: 600; }
.rp-bar-row.is-zero .rp-bar-row__fill { display: none; }
.rp-bars--scale .rp-bar-row__label { font-family: var(--font-heading); }
.rp-scale__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.rp-scale__head .rp-note { margin: 0; }
.rp-scale__mean { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--rp-muted); white-space: nowrap; }
.rp-scale__mean b { font-family: var(--font-heading); font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); padding: 6px 14px; border-radius: 12px; }

/* ---------- tables ---------- */
.rp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rp-table th, .rp-table td { padding: 12px 12px; border-bottom: 1px solid var(--rp-line); text-align: left; vertical-align: top; }
.rp-table thead th { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rp-muted); background: var(--rp-tint); }
.rp-table tbody th { font-weight: 600; }
.rp-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- themes: columns of cards ---------- */
.rp-theme-list { display: grid; gap: 14px; }
.rp-theme { background: var(--rp-ground); border: 1px solid var(--rp-line); border-radius: 14px; padding: 16px 18px; break-inside: avoid; }
.rp-theme.is-empty { opacity: .6; }
.rp-theme__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rp-theme__head h4 { margin: 0; font-family: var(--font-heading); font-size: 17px; font-weight: 800; letter-spacing: -.012em; line-height: 1.2; }
.rp-theme__n { font-family: var(--font-heading); font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); min-width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; flex: none; }
.rp-theme.is-empty .rp-theme__n { background: var(--rp-line); color: var(--rp-muted); }
.rp-theme__def { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--rp-muted); }
.rp-theme__quote { margin: 12px 0 0; padding: 12px 14px; border-left: 3px solid var(--color-mesh-1); background: #fff; border-radius: 0 10px 10px 0; }
.rp-theme__quote p { margin: 0 0 6px; font-size: 15px; line-height: 1.55; }
.rp-theme__quote footer { font-size: 12px; font-weight: 700; color: var(--rp-muted); }
.rp-themes__group { margin: 18px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rp-muted); }
.rp-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.rp-tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgb(var(--rgb-deep) / .12); color: var(--color-primary-hover); }
.rp-tag--proposed { background: color-mix(in srgb, var(--color-band-accent-ink) 14%, transparent); color: var(--color-band-accent-ink); }

/* ---------- in their words ---------- */
.rp-words { display: grid; gap: 12px; }
.rp-quote { margin: 0; padding: 16px 18px; background: var(--rp-ground); border: 1px solid var(--rp-line); border-left: 4px solid var(--color-primary); border-radius: 0 14px 14px 0; break-inside: avoid; }
.rp-quote__text { margin: 0 0 10px; font-family: var(--font-heading); font-size: 16px; font-weight: 600; line-height: 1.55; letter-spacing: -.005em; color: var(--rp-ink); }
.rp-quote__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; color: var(--rp-muted); }
.rp-quote__who { font-weight: 800; color: var(--color-primary-hover); }
.rp-quote__q { font-style: italic; }

/* ---------- submissions: one row per visitor, the answers panel beneath ---------- */
.rp-table--subs th, .rp-table--subs td { vertical-align: middle; }
.rp-table--subs tbody th { font-family: var(--font-heading); font-weight: 800; white-space: nowrap; }
.rp-table--subs td { white-space: nowrap; }
.rp-subs__row { cursor: pointer; transition: background var(--dur-fast) var(--ease-state); }
.rp-subs__row.is-alt th, .rp-subs__row.is-alt td { background: var(--rp-ground); }
.rp-subs__row:hover th, .rp-subs__row:hover td { background: var(--rp-tint); }
.rp-subs__row:focus-visible { outline: 2px solid var(--color-primary-hover); outline-offset: -2px; }
.rp-subs__act { text-align: right; }
.rp-subs__btn { font: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 8px 14px; min-height: 44px; border: 1.5px solid var(--color-primary-hover); border-radius: 999px; background: #fff; color: var(--color-primary-hover); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-state), color var(--dur-fast) var(--ease-state); }
.rp-subs__btn.is-on, .rp-subs__row:hover .rp-subs__btn { background: var(--color-primary-hover); color: #fff; }
.rp-subs__row.is-open th, .rp-subs__row.is-open td { border-bottom: 0; background: var(--rp-tint); }
.rp-subs__panel td { padding: 0 12px 20px; background: var(--rp-tint); white-space: normal; }
.rp-answers-panel { background: #fff; border: 1px solid var(--rp-line); border-radius: 14px; padding: 6px 18px 18px; }
.rp-answers__h { margin: 16px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary-hover); }
.rp-answers { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; }
.rp-answers dt { font-size: 12.5px; font-weight: 700; color: var(--rp-muted); margin-top: 8px; }
.rp-answers dd { margin: 0; font-size: 15px; line-height: 1.5; white-space: normal; }
.rp-answers dd .rp-tags { margin-left: 8px; vertical-align: middle; }
.rp-answers a { color: var(--color-primary-hover); font-weight: 600; }
.rp-copy { font: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-left: 10px; padding: 4px 10px; min-height: 28px; border: 1.5px solid var(--color-line); border-radius: 999px; background: #fff; color: var(--color-primary-hover); cursor: pointer; }

/* ---------- export, foot ---------- */
.rp-export { --color-primary: #417746; --color-primary-hover: #304F38; min-height: 44px; }

/* ---------- wider: two columns of sections, the width used ---------- */
@media (min-width: 640px) {
  .rp-metrics { grid-template-columns: repeat(3, 1fr); }
  .rp-grid__row { grid-template-columns: minmax(170px, 1fr) minmax(0, 2.4fr); align-items: center; }
  .rp-bar-row { grid-template-columns: minmax(130px, 1fr) minmax(0, 1.5fr) auto; align-items: center; gap: 14px; }
  .rp-bar-row__num { text-align: right; }
  .rp-answers { grid-template-columns: 240px minmax(0, 1fr); }
  .rp-answers dt { margin-top: 0; padding: 7px 0; border-top: 1px solid var(--rp-line); }
  .rp-answers dd { padding: 7px 0; border-top: 1px solid var(--rp-line); }
  .rp-theme-list { grid-template-columns: 1fr 1fr; align-items: start; }
  .rp-section--full .rp-bars { grid-template-columns: 1fr 1fr; column-gap: 14px; }
}
@media (min-width: 760px) { .rp-bar { position: sticky; top: calc(var(--rp-bar-top, 24px) + var(--nav-h) + 8px); } }
@media (min-width: 980px) {
  .rp-metrics { grid-template-columns: repeat(6, 1fr); }
  .rp-sections { grid-template-columns: 1fr 1fr; }
  .rp-section--full { grid-column: 1 / -1; }
  .rp-theme-list { grid-template-columns: 1fr 1fr 1fr; }
  .rp-words { display: block; columns: 2; column-gap: 12px; }
  .rp-quote { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-strip__cell, .rp-bar-row__fill { animation: none; }
  .rp-state__dot { animation: none; }
}

/* the marker site code reads to know this stylesheet has been applied (Standard 21 rule 4; keep it last) */
:root { --site-css: 1; }