/* ==========================================================================
   כזוהר הרקיע — "אבן ושחר"
   Jerusalem limestone at dawn in the Negev. Light theme first, plus
   "לילה במדבר" (night in the desert) dark theme.
   ========================================================================== */

/* ---------- Fonts (self-hosted, @fontsource, Hebrew + Latin subsets) ---------- */
@font-face { font-family: "Bellefair"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/bellefair-hebrew-400-normal.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Bellefair"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/bellefair-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Hebrew"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/ibm-plex-sans-hebrew-hebrew-300-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Plex Hebrew"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-hebrew-hebrew-400-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Plex Hebrew"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-hebrew-hebrew-500-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Plex Hebrew"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-hebrew-hebrew-600-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Plex Hebrew"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/ibm-plex-sans-hebrew-latin-300-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Hebrew"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-hebrew-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Hebrew"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-hebrew-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Hebrew"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-hebrew-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }


/* ==========================================================================
   "חימר" (clay) — the אבן ושחר palette re-sculpted as soft, matte, hand-pressed
   clay: puffy rounded surfaces, a top-left light, deep soft shade bottom-right.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* palette */
  --limestone: #EFE7DA;
  --paper: #F7F3EC;
  --basalt: #1C1B18;
  --warm-grey: #5E584F;
  --copper: #A65A2E;
  --copper-ink: #8F4B24;
  --sage: #5F6B4F;
  --blush: #E9C9A8;
  --night: #141311;

  /* dawn sky (hero) */
  --sky-1: #121110; --sky-2: #1f1915; --sky-3: #3d281c; --sky-4: #8a4a2a; --sky-5: #d49067;

  /* roles — light */
  --bg: var(--paper);
  --bg-2: var(--limestone);
  --surface: #FBF8F3;
  --ink: var(--basalt);
  --muted: var(--warm-grey);
  --line: rgba(28, 27, 24, .14);
  --line-strong: rgba(28, 27, 24, .36);
  --accent: var(--copper-ink);
  --accent-solid: var(--copper);
  --btn-bg: var(--copper);
  --btn-fg: #FFFFFF;
  --focus: #8F4B24;
  --sage-ink: #4E5A40;

  /* clay tints: matte earth pastels */
  --tint-warm: #F2DCCA;
  --tint-sage: #DFE4D3;
  --tint-blush: #F3E0D8;
  --tint-sand: #F1E6D1;
  --tint-stone: #F6F0E7;

  /* the clay shadow stack: drop shade · lifted light · top-left sheen · bottom-right shade */
  --clay-1: 6px 8px 16px rgba(110, 76, 44, .16), -5px -5px 12px rgba(255, 255, 255, .8), inset 2px 2px 4px rgba(255, 255, 255, .7), inset -3px -3px 6px rgba(110, 76, 44, .12);
  --clay-2: 14px 18px 36px rgba(110, 76, 44, .17), -10px -10px 26px rgba(255, 255, 255, .72), inset 5px 5px 10px rgba(255, 255, 255, .6), inset -7px -7px 14px rgba(110, 76, 44, .11);
  --clay-3: 22px 30px 60px rgba(110, 76, 44, .2), -14px -14px 36px rgba(255, 255, 255, .68), inset 8px 8px 16px rgba(255, 255, 255, .55), inset -10px -10px 22px rgba(110, 76, 44, .13);
  --clay-press: 2px 3px 6px rgba(110, 76, 44, .12), -2px -2px 6px rgba(255, 255, 255, .6), inset 6px 6px 12px rgba(110, 76, 44, .16), inset -5px -5px 10px rgba(255, 255, 255, .75);
  --clay-well: inset 5px 5px 10px rgba(110, 76, 44, .14), inset -5px -5px 10px rgba(255, 255, 255, .8);
  /* coloured clay (copper / basalt buttons and the dark card) */
  --clay-copper: 8px 10px 20px rgba(143, 75, 36, .3), -4px -4px 12px rgba(255, 255, 255, .7), inset 3px 3px 6px rgba(255, 214, 180, .45), inset -4px -4px 8px rgba(70, 28, 8, .32);
  --clay-copper-press: 2px 3px 6px rgba(143, 75, 36, .25), inset 5px 5px 10px rgba(70, 28, 8, .35), inset -3px -3px 6px rgba(255, 214, 180, .3);
  --clay-ink: 14px 18px 36px rgba(28, 20, 12, .28), -10px -10px 26px rgba(255, 255, 255, .6), inset 5px 5px 12px rgba(255, 240, 220, .12), inset -8px -8px 16px rgba(0, 0, 0, .45);
  --art-shadow: drop-shadow(0 16px 14px rgba(110, 76, 44, .2)) drop-shadow(0 4px 3px rgba(110, 76, 44, .14));
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .18 .2 0 0 0 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* type */
  --f-display: "Bellefair", "Frank Ruhl Libre", "David", serif;
  --f-ui: "Plex Hebrew", "IBM Plex Sans Hebrew", "Segoe UI", "Arial Hebrew", system-ui, sans-serif;
  --fs-body: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  --fs-small: .9375rem;
  --fs-xs: .8125rem;
  --fs-d1: clamp(3.25rem, 1.6rem + 6.4vw, 8.5rem);
  --fs-d2: clamp(2.6rem, 1.5rem + 4vw, 5.5rem);
  --fs-d3: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h3: clamp(1.5rem, 1.25rem + .8vw, 2rem);

  /* spacing scale (4px base): every gap in the hero, cards, sheet and footer is a step of this scale */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
  /* the hero's vertical rhythm unit grows with the screen's height, so short laptops and tall phones
     keep the same proportions between kicker, title, lines and buttons */
  --hr: clamp(8px, 1.65vh, 18px);
  /* the mobile dock: 44px controls + 2×4px padding, floating 14px above the safe area */
  --dock-h: 52px; --dock-gap: 14px;
  /* iOS Safari reports env(safe-area-inset-bottom) as 0 while its toolbar shows and 34px once it slides
     away, which moved the whole hero copy (and the title under its golden dust) mid-scroll. The bottom
     inset is only needed when the large and small viewports are the same (no toolbar: home-screen app),
     so this value never changes while the visitor scrolls. */
  --safe-b-stable: max(0px, env(safe-area-inset-bottom) - (100lvh - 100svh));

  /* layout */
  --wrap: 1320px;
  --gutter: clamp(20px, 4.2vw, 64px); /* 20px on phones: text never runs to the glass edge */
  --sec: clamp(88px, 5rem + 6vw, 184px);
  --r-sm: 18px;
  --r: 28px;
  --r-lg: 40px;
  --header-h: 76px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --squish: cubic-bezier(.5, 1.8, .5, .8);
  color-scheme: light;
}

/* "לילה במדבר" — dark clay: deep soft shade, a faint warm sheen on the top-left edge */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141311; --bg-2: #1A1815; --surface: #25221E; --ink: #EFE7DA; --muted: #B4AB9C;
    --line: rgba(239, 231, 218, .13); --line-strong: rgba(239, 231, 218, .34);
    --accent: #E0A274; --accent-solid: #A65A2E; --btn-bg: #A65A2E; --btn-fg: #FFFFFF;
    --focus: #E9C9A8; --sage-ink: #B2BD9B;
    --tint-warm: #2E2520; --tint-sage: #232821; --tint-blush: #2E2425; --tint-sand: #2A2520; --tint-stone: #25221E;
    --clay-1: 6px 8px 16px rgba(0, 0, 0, .5), -4px -4px 10px rgba(255, 236, 214, .035), inset 2px 2px 4px rgba(255, 236, 214, .1), inset -3px -3px 6px rgba(0, 0, 0, .38);
    --clay-2: 14px 18px 36px rgba(0, 0, 0, .55), -8px -8px 22px rgba(255, 236, 214, .035), inset 5px 5px 10px rgba(255, 236, 214, .085), inset -7px -7px 14px rgba(0, 0, 0, .4);
    --clay-3: 22px 30px 60px rgba(0, 0, 0, .6), -12px -12px 30px rgba(255, 236, 214, .035), inset 8px 8px 16px rgba(255, 236, 214, .08), inset -10px -10px 22px rgba(0, 0, 0, .42);
    --clay-press: 2px 3px 6px rgba(0, 0, 0, .4), inset 6px 6px 12px rgba(0, 0, 0, .45), inset -4px -4px 10px rgba(255, 236, 214, .07);
    --clay-well: inset 5px 5px 10px rgba(0, 0, 0, .45), inset -4px -4px 9px rgba(255, 236, 214, .06);
    --clay-copper: 8px 10px 20px rgba(0, 0, 0, .5), inset 3px 3px 6px rgba(255, 214, 180, .3), inset -4px -4px 8px rgba(50, 18, 4, .45);
    --clay-copper-press: 2px 3px 6px rgba(0, 0, 0, .4), inset 5px 5px 10px rgba(50, 18, 4, .5), inset -3px -3px 6px rgba(255, 214, 180, .2);
    --clay-ink: 14px 18px 36px rgba(0, 0, 0, .6), inset 5px 5px 12px rgba(255, 236, 214, .1), inset -8px -8px 16px rgba(0, 0, 0, .5);
    --art-shadow: drop-shadow(0 16px 14px rgba(0, 0, 0, .45)) drop-shadow(0 4px 3px rgba(0, 0, 0, .35));
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .84 .1 0 0 0 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141311; --bg-2: #1A1815; --surface: #25221E; --ink: #EFE7DA; --muted: #B4AB9C;
  --line: rgba(239, 231, 218, .13); --line-strong: rgba(239, 231, 218, .34);
  --accent: #E0A274; --accent-solid: #A65A2E; --btn-bg: #A65A2E; --btn-fg: #FFFFFF;
  --focus: #E9C9A8; --sage-ink: #B2BD9B;
  --tint-warm: #2E2520; --tint-sage: #232821; --tint-blush: #2E2425; --tint-sand: #2A2520; --tint-stone: #25221E;
  --clay-1: 6px 8px 16px rgba(0, 0, 0, .5), -4px -4px 10px rgba(255, 236, 214, .035), inset 2px 2px 4px rgba(255, 236, 214, .1), inset -3px -3px 6px rgba(0, 0, 0, .38);
  --clay-2: 14px 18px 36px rgba(0, 0, 0, .55), -8px -8px 22px rgba(255, 236, 214, .035), inset 5px 5px 10px rgba(255, 236, 214, .085), inset -7px -7px 14px rgba(0, 0, 0, .4);
  --clay-3: 22px 30px 60px rgba(0, 0, 0, .6), -12px -12px 30px rgba(255, 236, 214, .035), inset 8px 8px 16px rgba(255, 236, 214, .08), inset -10px -10px 22px rgba(0, 0, 0, .42);
  --clay-press: 2px 3px 6px rgba(0, 0, 0, .4), inset 6px 6px 12px rgba(0, 0, 0, .45), inset -4px -4px 10px rgba(255, 236, 214, .07);
  --clay-well: inset 5px 5px 10px rgba(0, 0, 0, .45), inset -4px -4px 9px rgba(255, 236, 214, .06);
  --clay-copper: 8px 10px 20px rgba(0, 0, 0, .5), inset 3px 3px 6px rgba(255, 214, 180, .3), inset -4px -4px 8px rgba(50, 18, 4, .45);
  --clay-copper-press: 2px 3px 6px rgba(0, 0, 0, .4), inset 5px 5px 10px rgba(50, 18, 4, .5), inset -3px -3px 6px rgba(255, 214, 180, .2);
  --clay-ink: 14px 18px 36px rgba(0, 0, 0, .6), inset 5px 5px 12px rgba(255, 236, 214, .1), inset -8px -8px 16px rgba(0, 0, 0, .5);
  --art-shadow: drop-shadow(0 16px 14px rgba(0, 0, 0, .45)) drop-shadow(0 4px 3px rgba(0, 0, 0, .35));
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .84 .1 0 0 0 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-ui); font-size: var(--fs-body); line-height: 1.75; font-weight: 400;
  font-variant-numeric: tabular-nums; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, .display-1, .display-2, .display-3, .hero-sub, .hero-motto, .eyebrow, .tag, .tier-name { text-wrap: balance; }
p, li, dd, dt, label, .lede, .tier-benefits span, .opt-meta, .tier-net, .tier-total { text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
button { font: inherit; color: inherit; }
bdi { unicode-bidi: isolate; }
::selection { background: var(--blush); color: var(--basalt); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 12px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; inset-inline-start: 16px; top: 12px; z-index: 100; padding: .6rem 1.2rem; background: var(--basalt); color: var(--paper); border-radius: 999px; text-decoration: none; transform: translateY(-180%); transition: transform .2s; }
.skip-link:focus { transform: none; }
.muted { color: var(--muted); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec); }
main { text-align: center; }

/* ---------- Photo frame: every photo sits in its clay card behind a fine copper hairline and a
   soft limestone inner bevel, so all images read as one framed family ---------- */
.frame { position: relative; display: block; isolation: isolate; }
.frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(143, 75, 36, .3), inset 0 0 0 5px rgba(247, 238, 224, .2), inset 0 12px 26px rgba(255, 240, 220, .12), inset 0 -16px 30px rgba(52, 32, 16, .2);
}
.pos-soldier { object-position: 51% 42%; }
.pos-mikveh { object-position: 60% 62%; }

/* ---------- Clay surfaces ---------- */
.clay {
  --clay-bg: var(--surface);
  background-color: var(--clay-bg);
  background-image: var(--grain);
  border-radius: var(--r);
  box-shadow: var(--clay-2);
}
.clay-warm { --clay-bg: var(--tint-warm); }
.clay-sage { --clay-bg: var(--tint-sage); }
.clay-blush { --clay-bg: var(--tint-blush); }
.clay-sand { --clay-bg: var(--tint-sand); }
.clay-art { display: block; width: var(--art, 140px); margin-inline: auto; filter: var(--art-shadow); transition: transform .6s var(--spring); }
.clay-art img { width: 100%; height: auto; }
/* a clay object rests on the card: on hover it lifts and tilts, like being picked up */
@media (hover: hover) {
  .clay:hover .clay-art { transform: translateY(-8px) rotate(-3deg) scale(1.04); }
}

/* ---------- Type ---------- */
.display-1, .display-2, .display-3, .hero-title, .footer-word, .brand-word {
  font-family: var(--f-display); font-weight: 400; letter-spacing: 0;
}
.display-1 { font-size: var(--fs-d1); line-height: .98; }
.display-2 { font-size: var(--fs-d2); line-height: 1.04; }
.display-3 { font-size: var(--fs-d3); line-height: 1.15; }
.display-1 em, .display-2 em { font-style: normal; color: var(--accent); }
h3 { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; }
.lede { font-size: clamp(1.125rem, 1.02rem + .45vw, 1.375rem); line-height: 1.7; font-weight: 300; max-width: 42ch; margin-inline: auto; }
.eyebrow {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem; flex-wrap: wrap;
  padding: .35rem 1.1rem; margin-bottom: 1.5rem; border-radius: 999px;
  font-size: var(--fs-small); font-weight: 500; color: var(--accent);
  background: var(--surface); box-shadow: var(--clay-1);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
.eyebrow-sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }
.eyebrow-he { font-family: var(--f-display); font-size: 1.15rem; font-weight: 400; }
.tag {
  display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .8rem;
  font-size: var(--fs-xs); font-weight: 500; line-height: 1.6; letter-spacing: .01em;
  border-radius: 999px; color: var(--muted); background: var(--surface); box-shadow: var(--clay-1);
}
.tag-accent { color: var(--accent); }
.tag-glass { color: #F7F3EC; background: rgba(20, 19, 17, .5); box-shadow: inset 1px 1px 2px rgba(255, 255, 255, .25), inset -2px -2px 4px rgba(0, 0, 0, .25); backdrop-filter: blur(6px); }
.nw { white-space: nowrap; }
.fine { margin-top: 2rem; font-size: var(--fs-xs); color: var(--muted); }

/* section heads: everything centred, one column */
.section-head, .vision-head, .act-intro, .partner-head { display: grid; justify-items: center; text-align: center; margin-inline: auto; }
.section-head { gap: 1.25rem; margin-bottom: clamp(56px, 6vw, 104px); max-width: 52rem; }
.section-head-main { display: grid; justify-items: center; }

/* ---------- Buttons: soft clay pills that squish when pressed ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 50px; padding: .7rem 1.7rem; border: 0; border-radius: 999px;
  font-family: var(--f-ui); font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: var(--surface); color: var(--ink); box-shadow: var(--clay-1);
  transition: transform .45s var(--spring), box-shadow .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: none; transition: transform .45s var(--spring); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(-4px); }
.btn:active { transform: scale(.96); box-shadow: var(--clay-press); transition-duration: .12s; }
.btn-solid { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--clay-copper); }
.btn-solid:hover { background: #B4643A; }
.btn-solid:active { box-shadow: var(--clay-copper-press); background: #9A5229; }
.btn-line { background: var(--surface); color: var(--ink); }
.btn-light { background: #F7F3EC; color: #1C1B18; box-shadow: 0 12px 26px rgba(0, 0, 0, .35), inset 3px 3px 6px rgba(255, 255, 255, .9), inset -4px -4px 8px rgba(120, 80, 50, .22); }
.btn-light:hover { background: #FFF8EF; }
.btn-light:active { box-shadow: 0 4px 10px rgba(0, 0, 0, .3), inset 5px 5px 10px rgba(120, 80, 50, .25), inset -3px -3px 6px rgba(255, 255, 255, .8); }
.btn-ghost-light { background: rgba(247, 243, 236, .1); color: #F7F3EC; box-shadow: 0 12px 26px rgba(0, 0, 0, .3), inset 2px 2px 4px rgba(255, 255, 255, .28), inset -3px -3px 6px rgba(0, 0, 0, .3); backdrop-filter: blur(8px); }
.btn-ghost-light:hover { background: rgba(247, 243, 236, .18); }
.btn-ghost-light:active { box-shadow: inset 4px 4px 8px rgba(0, 0, 0, .35), inset -2px -2px 4px rgba(255, 255, 255, .2); }
.btn-sm { min-height: 42px; padding: .45rem 1.25rem; font-size: .9375rem; }
.btn-lg { min-height: 58px; padding: .9rem 2.2rem; font-size: 1.0625rem; }
.btn-block { width: 100%; }
.icon-btn {
  display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; color: inherit; background: var(--surface); box-shadow: var(--clay-1);
  transition: transform .45s var(--spring), box-shadow .25s var(--ease);
}
.icon-btn:hover { transform: translateY(-2px) rotate(-6deg); }
.icon-btn:active { transform: scale(.92); box-shadow: var(--clay-press); transition-duration: .12s; }
.icon-btn svg { width: 22px; height: 22px; }
.link { color: var(--accent); font-weight: 600; }

/* ---------- Header ----------
   Over the opening screen: the brand floats on the right, the links sit in a slim centred glass
   capsule with tiny copper separators, and the topline becomes a whisper-quiet caption beneath it
   (it fades on the first scroll). Past the hero the header becomes the solid floating clay pill. */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--ink); transition: color .35s; }
.bar {
  display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h);
  border-radius: 999px; transition: background-color .4s var(--ease), box-shadow .4s var(--ease), min-height .4s var(--ease), padding .4s var(--ease), width .4s var(--ease), margin .4s var(--ease);
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-inline-end: auto; }
.brand-mark { width: 44px; height: 44px; color: var(--accent); flex: none; }
/* the word and the sub-line are one symmetric, centred stack beside the mark */
.brand-text { display: grid; justify-items: center; text-align: center; line-height: 1.1; }
.brand-word { font-size: 1.6rem; }
.brand-sub { font-size: .75rem; color: var(--muted); letter-spacing: .05em; margin-top: .12rem; }
.nav ul { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.nav li { display: flex; align-items: center; }
.nav a { display: block; text-decoration: none; font-size: .9375rem; font-weight: 500; padding: .45rem 1rem; border-radius: 999px; transition: background-color .3s, box-shadow .3s, color .3s, transform .4s var(--spring); }
.nav a:hover { transform: translateY(-1px); }
.nav a[aria-current="true"] { box-shadow: var(--clay-press); }
.bar-actions { display: flex; align-items: center; gap: .6rem; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: block; }
}
.menu-btn { display: none; }
.topline { display: none; }

.site-header[data-over="hero"] { color: #F7F3EC; }
.site-header[data-over="hero"] .brand-mark { color: #E9C9A8; }
.site-header[data-over="hero"] .brand-sub { color: rgba(247, 243, 236, .82); }
.site-header[data-over="hero"] .icon-btn { background: rgba(32, 27, 22, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 0 0 1px rgba(247, 243, 236, .12); backdrop-filter: blur(10px); }
.site-header[data-over="hero"] .header-donate { min-height: 40px; padding-inline: 1.15rem; box-shadow: 0 8px 20px rgba(0, 0, 0, .3), inset 2px 2px 4px rgba(255, 214, 180, .4), inset -3px -3px 6px rgba(70, 28, 8, .35); }
.site-header.is-solid .bar {
  width: calc(100% - 24px); min-height: 66px; margin-top: 10px; padding-inline: clamp(10px, 1.6vw, 20px);
  background-color: color-mix(in srgb, var(--surface) 90%, transparent); background-image: var(--grain);
  box-shadow: var(--clay-2); backdrop-filter: blur(14px) saturate(1.2);
}

@media (min-width: 1024px) {
  .site-header[data-over="hero"] .bar { display: grid; grid-template-columns: 1fr auto 1fr; padding-top: 10px; }
  .site-header[data-over="hero"] .brand { justify-self: start; margin: 0; }
  .site-header[data-over="hero"] .bar-actions { justify-self: end; }
  .site-header[data-over="hero"] .nav ul {
    gap: 0; padding: 4px 6px; border-radius: 999px;
    background: linear-gradient(180deg, rgba(36, 30, 25, .5), rgba(28, 23, 19, .3));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 0 0 1px rgba(247, 243, 236, .13), 0 14px 34px rgba(0, 0, 0, .24);
    backdrop-filter: blur(16px) saturate(1.25);
  }
  .site-header[data-over="hero"] .nav li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: rgba(240, 211, 182, .6); }
  .site-header[data-over="hero"] .nav a { padding: .42rem 1rem; font-size: .875rem; letter-spacing: .03em; color: rgba(247, 243, 236, .9); }
  .site-header[data-over="hero"] .nav a:hover { color: #FFFFFF; background: rgba(247, 243, 236, .09); transform: none; }
  .site-header[data-over="hero"] .topline {
    display: flex; align-items: center; gap: .7rem; position: absolute; top: calc(var(--header-h) + 8px); left: 50%; margin: 0;
    transform: translateX(-50%); white-space: nowrap; font-size: .75rem; letter-spacing: .04em; color: rgba(247, 243, 236, .74);
    transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s;
  }
  .topline a { text-decoration: none; font-weight: 500; color: #F0D3B6; }
  .topline a:hover { text-decoration: underline; }
  .topline-tel::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-inline-end: .7rem; vertical-align: .2em; border-radius: 50%; background: rgba(240, 211, 182, .6); }
  .site-header[data-over="hero"].is-scrolled .topline { opacity: 0; transform: translate(-50%, -6px); visibility: hidden; transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s .5s; }
}

@media (max-width: 1023px) {
  .nav { display: none; }
  .menu-btn { display: inline-grid; }
  :root { --header-h: 64px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-word { font-size: 1.4rem; }
  .brand-sub { font-size: .6875rem; }
  .bar { gap: .75rem; }
  .icon-btn { width: 42px; height: 42px; }
  .site-header.is-solid .bar, .site-header[data-over="hero"] .bar { min-height: 58px; margin-top: 8px; width: calc(100% - 16px); padding-inline: 12px 8px; }
  /* over the hero on phones: the same pill, in smoked glass */
  .site-header[data-over="hero"] .bar { background: linear-gradient(180deg, rgba(28, 24, 20, .34), rgba(28, 24, 20, .18)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(247, 243, 236, .1), 0 10px 26px rgba(0, 0, 0, .2); backdrop-filter: blur(12px) saturate(1.2); }
}
@media (max-width: 767px) { .header-donate { display: none; } }

/* ---------- "כזוהר הרקיע", living: a thin white edge, a faint oval sky-blue (תכלת) halo, and a
   glossy pearl → limestone → champagne → soft-copper → dawn-blush fill that drifts very slowly ---------- */
/* Paint cost: the gradient fill and its glow are painted once and never animate. The slow tonal drift
   is a second, differently-positioned copy of the same fill (a ::after grid-stacked exactly on the
   word, hidden from assistive tech) whose opacity breathes — a compositor-only animation, so the big
   title never repaints per frame. */
.lux-wrap {
  --lux-1: #FBF6EE; --lux-2: #EADCC6; --lux-3: #F3E2C4; --lux-sheen: #FFFDF8; --lux-4: #EBC3A2; --lux-5: #F4DAD0;
  --lux-edge: rgba(255, 255, 255, .7); --lux-glow: rgba(182, 218, 240, .42); --lux-stroke: .5px;
  position: relative; isolation: isolate; display: grid; justify-items: center;
}
.lux-wrap::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 54%; width: 116%; height: 168%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(182, 218, 240, var(--halo-a, .2)), rgba(182, 218, 240, calc(var(--halo-a, .2) * .4)) 55%, rgba(182, 218, 240, 0) 100%);
}
.lux { display: inline-block; grid-area: 1 / 1; color: var(--lux-1); text-shadow: none; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lux, html.motion .lux-wrap::after {
    background-image: linear-gradient(105deg, var(--lux-1) 0%, var(--lux-2) 15%, var(--lux-3) 29%, var(--lux-sheen) 37%, var(--lux-4) 48%, var(--lux-5) 62%, var(--lux-2) 79%, var(--lux-1) 100%);
    background-size: 320% 100%; background-position: 12% 50%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    -webkit-text-stroke: var(--lux-stroke) var(--lux-edge);
  }
  .lux { filter: drop-shadow(0 0 .6px var(--lux-glow)) drop-shadow(0 0 9px rgba(182, 218, 240, .14)); }
  html.motion .lux-wrap::after {
    content: attr(data-lux); content: attr(data-lux) / "";
    grid-area: 1 / 1; pointer-events: none; background-position: 88% 50%;
    opacity: 0; will-change: opacity; animation: lux-drift 17s ease-in-out infinite;
  }
  html.motion .lux-wrap.is-paused::after { animation-play-state: paused; }
}
@keyframes lux-drift { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.hero-title.lux-wrap { --lux-stroke: .8px; }
/* the title's dissolve (main.js writes --wipe while it runs): the white letters erode under a soft front
   while their dust is born on the same strokes. The letter boxes get room for the ink that overhangs
   them (niqqud, the stroke), so the mask never clips a glyph; padding + equal negative margin keeps the
   layout, and background-origin keeps the gloss where it was. */
.hero-title .lux, html.motion .hero-title.lux-wrap::after {
  padding: .32em .14em; margin: -.32em -.14em; background-origin: content-box;
  -webkit-mask-image: var(--wipe, none); mask-image: var(--wipe, none);
}
/* on the light, solid header: deeper glossy tones (copper-ink, walnut, basalt) with a pearl edge */
:root[data-theme="light"] .site-header.is-solid .lux-wrap { --lux-1: #5A3822; --lux-2: #7A4A2B; --lux-3: #3F3027; --lux-sheen: #9C6038; --lux-4: #8F4B24; --lux-5: #6A4636; --lux-edge: rgba(255, 255, 255, .5); --lux-glow: rgba(120, 170, 200, .25); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header.is-solid .lux-wrap { --lux-1: #5A3822; --lux-2: #7A4A2B; --lux-3: #3F3027; --lux-sheen: #9C6038; --lux-4: #8F4B24; --lux-5: #6A4636; --lux-edge: rgba(255, 255, 255, .5); --lux-glow: rgba(120, 170, 200, .25); }
}
.site-header.is-solid .lux-wrap { --halo-a: .12; }
.brand-word.lux-wrap::before { width: 124%; height: 190%; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--sky-1); color: #F7F3EC; }
.hero-stage { position: relative; min-height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.hero-sky {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(120% 60% at 50% 108%, rgba(233, 201, 168, .55) 0%, rgba(166, 90, 46, .35) 32%, rgba(166, 90, 46, 0) 62%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 38%, var(--sky-3) 64%, var(--sky-4) 86%, var(--sky-5) 100%);
}
.hero-poster, .hero-canvas, .hero-photo, .hero-scrim { position: absolute; inset: 0; }
.hero-poster { z-index: -2; display: none; }
.hero-poster img, .hero-photo img, .finale-fig img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo picture, .finale-fig picture, .hero-poster { position: absolute; inset: 0; }
.hero-canvas { z-index: -2; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-canvas.is-live { opacity: 1; }
.hero-photo { z-index: -1; }
.hero-photo img { object-position: 50% 78%; }
/* "המחשה" labels the photo: a small glass tag at the bottom (inline-start) corner; with the 3D it fades in
   together with the photo it describes (main.js), so it never sits on the opening copy */
.hero-caption { position: absolute; z-index: 1; inset-inline-start: var(--gutter); bottom: 28px; font-size: .75rem; padding: .15rem .7rem; }
.hero-scrim { z-index: -1; background:
  radial-gradient(70% 62% at 50% 46%, rgba(18, 17, 16, .62) 0%, rgba(18, 17, 16, .3) 60%, rgba(18, 17, 16, .05) 100%),
  linear-gradient(180deg, rgba(18, 17, 16, .7) 0%, rgba(18, 17, 16, .2) 40%, rgba(18, 17, 16, .08) 70%, rgba(18, 17, 16, .3) 100%); }
/* The copy fills the stage between the header stack and the bottom reserve and centres itself with two
   flexible spacers: when it is taller than the room it simply starts below the header (auto spacers
   collapse to 0 — it never rides up under the header the way centred flex overflow would). */
.hero-copy {
  --hero-top: calc(var(--header-h) + 54px); /* bar + the topline caption beneath it + a clear gap */
  --hero-bottom: 104px;                     /* the centred scroll cue */
  position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: var(--hero-top); padding-bottom: var(--hero-bottom);
}
.hero-copy::before, .hero-copy::after { content: ""; flex: 1 1 0; min-height: 0; }
.hero-copy::before { flex-grow: .5; }  /* the kicker rides high, near the header (a clear gap stays: --hero-top) */
.hero-copy::after { flex-grow: 1.15; } /* the spare room gathers below the buttons */
.hero-copy > * { max-width: 44rem; flex: none; }
.hero-kicker { display: inline-flex; align-items: center; gap: .7rem; padding: .34rem 1.15rem .34rem 1.25rem; border-radius: 999px; font-size: 1.0625rem; line-height: 1.6; font-weight: 500; letter-spacing: .02em; color: #F7E2C8; margin-bottom: calc(var(--hr) * 2.7); background: rgba(247, 243, 236, .09); box-shadow: 0 0 0 1px rgba(233, 201, 168, .34), inset 2px 2px 4px rgba(255, 255, 255, .16), inset -2px -2px 5px rgba(0, 0, 0, .3), 0 0 22px rgba(233, 165, 105, .16); backdrop-filter: blur(6px); }
.hero-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E9C9A8; box-shadow: 0 0 0 4px rgba(233, 201, 168, .18), 0 0 14px rgba(233, 160, 106, .8); }
.hero-eyebrow { font-size: var(--fs-small); line-height: 1.6; font-weight: 500; letter-spacing: .02em; color: rgba(247, 243, 236, .86); }
.hero-title { font-size: min(clamp(4rem, 1.4rem + 9.4vw, 10rem), 17.5vh); line-height: 1.02; margin: calc(var(--hr) * 1.1) 0 calc(var(--hr) * .95); color: #FBF6EE; text-wrap: balance; --halo-a: .17; }
.hero-sub { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); line-height: 1.4; font-weight: 300; }
.hero-motto { font-family: var(--f-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.3; color: #F0D3B6; margin-top: calc(var(--hr) * .85); }
/* the lede is a single motto plaque: smoked glass, a fine gold hairline with a second one inside it,
   a small gold lozenge on the top edge and a soft warm glow */
.hero-lede {
  position: relative; margin-top: calc(var(--hr) * 2.7); padding: .8em 1.9em .85em; border-radius: 16px;
  font-size: clamp(1.1875rem, 1.04rem + .55vw, 1.5rem); line-height: 1.5; font-weight: 400; letter-spacing: .01em; color: #FCF8F2; max-width: 30ch; text-wrap: balance;
  text-shadow: 0 1px 2px rgba(12, 9, 7, .6);
  background: linear-gradient(180deg, rgba(38, 30, 24, .62), rgba(22, 17, 13, .56)); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(233, 201, 168, .58), inset 0 1px 0 rgba(255, 240, 220, .1), 0 12px 32px rgba(0, 0, 0, .26), 0 0 36px rgba(233, 165, 105, .18);
}
@media (min-width: 768px) { .hero-lede { max-width: 44ch; } }
.hero-lede::before { content: ""; position: absolute; inset: 5px; border-radius: 11px; border: 1px solid rgba(233, 201, 168, .24); pointer-events: none; }
.hero-lede::after { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: #EBCBA6; box-shadow: 0 0 10px rgba(240, 190, 140, .75); pointer-events: none; }
.hero-presidency { margin-top: calc(var(--hr) * 2); font-size: var(--fs-small); line-height: 1.6; font-weight: 500; color: rgba(247, 243, 236, .92); display: flex; align-items: center; justify-content: center; gap: .75rem; }
.hero-presidency::before, .hero-presidency::after { content: ""; width: 1.75rem; height: 1px; background: currentColor; opacity: .6; }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-4); margin-top: calc(var(--hr) * 2.7); }
.hero-line {
  position: absolute; inset-inline: 0; top: max(16vh, calc(var(--header-h) + 8px + var(--sp-4))); /* short landscape phones: clear of the header pill */ text-align: center; padding-inline: var(--gutter);
  font-family: var(--f-display); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.5rem); line-height: 1.2; color: #FBF6EE;
  opacity: 0; pointer-events: none; text-wrap: balance; text-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.hero-line span { display: inline-block; max-width: 22ch; }
.hero-scroll { position: absolute; bottom: 26px; inset-inline-start: 50%; transform: translateX(50%); display: none; flex-direction: column; align-items: center; gap: .5rem; font-size: var(--fs-xs); letter-spacing: .08em; color: rgba(247, 243, 236, .75); }
.hero-scroll i { width: 22px; height: 36px; border-radius: 999px; box-shadow: inset 2px 2px 4px rgba(255, 255, 255, .25), inset -2px -2px 5px rgba(0, 0, 0, .35); position: relative; }
.hero-scroll i::after { content: ""; position: absolute; top: 7px; inset-inline-start: 50%; width: 6px; height: 6px; margin-inline-start: -3px; border-radius: 50%; background: #F0D3B6; animation: drip 2.4s var(--ease) infinite; }
@keyframes drip { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* Fx (3D capable): a long scroll stage; main.js eases --copy/--line/--photo/--blur each frame */
html.fx .hero { height: 720vh; }
html.fx .hero-stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
html.fx .hero-poster { display: block; }
/* the un-blur is a cross-fade between a pre-blurred small copy and the sharp photo: only opacity
   changes per frame (compositor work), never a filter on a full-screen image */
.hero-photo-soft { display: none; }
.hero-photo-soft img { filter: blur(14px) saturate(.78); transform: scale(1.07); }
html.fx .hero-photo { opacity: 0; will-change: opacity; }
html.fx .hero-photo-soft { display: block; }
html.fx .hero-photo-sharp { opacity: 0; will-change: opacity; }
html.fx .hero-scrim, html.fx .hero-caption { opacity: 0; }
/* once the bright photo is up, a soft dusk veil at the very top keeps the header legible */
.hero-veil { display: none; }
html.fx .hero-veil { display: block; position: absolute; inset: 0 0 auto; height: 190px; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(16, 13, 11, .62), rgba(16, 13, 11, .3) 45%, rgba(16, 13, 11, 0)); }
/* per-frame opacity / transform of the hero layers are written inline by main.js (only on change,
   and only on the element that uses them, so no style invalidation fans out through the hero) */
/* once faded, the copy stays in the accessibility tree (the h1 remains the page heading); only the
   buttons leave the tab order, and the title's sheen stops */
html.fx .hero-copy[data-hidden] .hero-ctas { visibility: hidden; }
html.fx .hero-copy[data-hidden] .lux-wrap::after { animation-play-state: paused; }

/* progress rail: a thin clay groove with four stations (words · dust · building · stone) */
.hero-rail { display: none; }
html.fx .hero-rail {
  display: block; position: absolute; inset-inline-end: clamp(12px, 2.2vw, 34px); top: 50%; width: 4px; height: clamp(96px, 20vh, 176px);
  transform: translateY(-50%); border-radius: 999px; opacity: 0; pointer-events: none;
  background: rgba(247, 243, 236, .1); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .5), inset -1px -1px 1px rgba(255, 255, 255, .14);
}
.hero-rail-fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: 50% 0; transform: scaleY(0); background: linear-gradient(180deg, #F6E3CC, #CF9466); box-shadow: 0 0 8px rgba(240, 190, 140, .45); }
.hero-rail b { position: absolute; left: 50%; top: calc(var(--at) * 100%); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #2B231D; box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .22), 0 0 0 1px rgba(247, 243, 236, .22); transition: background-color .5s, box-shadow .5s; }
.hero-rail b.is-on { background: #F0D3B6; box-shadow: inset -1px -1px 1px rgba(120, 70, 30, .4), 0 0 9px rgba(240, 190, 140, .75); }

/* golden aura: layered glow, slow light rays and drifting bokeh, sitting exactly behind the
   building of the photo (the photo-sized box is masked by the building's silhouette) */
.hero-halo, .hero-halo-clip { display: none; }
/* the aura box is sized to the photo's cover crop (wider than a phone screen): a clipping layer keeps it
   from ever widening the layout viewport */
html.fx .hero-halo-clip { display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; contain: strict; pointer-events: none; }
html.fx .hero-halo {
  display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1376 768' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1376V768H0Z M125 652V428H808V440H890V362H1270V652Z'/%3E%3C/svg%3E"), linear-gradient(180deg, #000 62%, transparent 90%);
  -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: source-in;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1376 768' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1376V768H0Z M125 652V428H808V440H890V362H1270V652Z'/%3E%3C/svg%3E"), linear-gradient(180deg, #000 62%, transparent 90%);
  mask-size: 100% 100%; mask-repeat: no-repeat; mask-composite: intersect;
}
.halo-in, .halo-in i { position: absolute; display: block; }
.halo-in { inset: 0; }
.halo-core { left: 50.6%; top: 54%; width: 96%; height: 70%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 220, 168, .62), rgba(246, 184, 122, .3) 42%, rgba(233, 150, 90, .1) 72%, rgba(233, 150, 90, 0) 100%); }
.halo-rays { left: 50.6%; top: 56%; width: 132%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 228, 186, 0) 0deg, rgba(255, 228, 186, .075) 3.5deg, rgba(255, 228, 186, 0) 7deg, rgba(255, 228, 186, .035) 11deg, rgba(255, 228, 186, 0) 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, rgba(0, 0, 0, .4) 38%, transparent 64%); mask-image: radial-gradient(closest-side, #000 10%, rgba(0, 0, 0, .4) 38%, transparent 64%); }
.halo-bokeh { inset: 8% 4% 34%; opacity: .7;
  background:
    radial-gradient(circle at 14% 46%, rgba(255, 224, 176, .55) 0 2px, rgba(255, 224, 176, 0) 7px),
    radial-gradient(circle at 27% 22%, rgba(255, 236, 200, .4) 0 3px, rgba(255, 236, 200, 0) 10px),
    radial-gradient(circle at 41% 38%, rgba(255, 214, 160, .45) 0 1.5px, rgba(255, 214, 160, 0) 6px),
    radial-gradient(circle at 58% 16%, rgba(255, 232, 196, .38) 0 3.5px, rgba(255, 232, 196, 0) 12px),
    radial-gradient(circle at 72% 30%, rgba(255, 220, 170, .5) 0 2px, rgba(255, 220, 170, 0) 8px),
    radial-gradient(circle at 86% 50%, rgba(255, 236, 205, .4) 0 2.5px, rgba(255, 236, 205, 0) 9px),
    radial-gradient(circle at 93% 20%, rgba(255, 214, 160, .35) 0 1.5px, rgba(255, 214, 160, 0) 6px); }
html.motion .halo-core { animation: halo-breathe 9s ease-in-out infinite alternate; }
html.motion .halo-rays { animation: halo-turn 160s linear infinite; }
html.motion .halo-bokeh { animation: halo-drift 24s ease-in-out infinite alternate; }
.hero-halo:not(.is-on) .halo-in i { animation-play-state: paused; }
@keyframes halo-breathe { from { opacity: .72; transform: translate(-50%, -50%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.03); } }
@keyframes halo-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes halo-drift { from { transform: translate(1.5%, 2%); } to { transform: translate(-1.5%, -3%); } }
html.fx .hero-line { opacity: 0; }
html.fx .hero-scroll { display: flex; }
/* while the title's dissolve front sweeps (main.js), the letters repaint every frame: their two glow
   filters are dropped for those ~5% of the stage (the white letters are already half dust by then) */
html.fx .hero-title.is-wiping .lux { filter: none; }
/* Touch screens (phones, tablets): the WebGL canvas behind the hero redraws every frame, and every
   backdrop-filter over it has to re-blur its patch of the canvas every frame too — the header pill, the
   dock, the kicker, the plaque and the ghost button. Over the hero they become plain smoked glass,
   a little denser so the words keep their contrast. */
@media (pointer: coarse), (max-width: 767px) {
  html.fx .hero-kicker, html.fx .hero-lede, html.fx .hero-ctas .btn-ghost-light,
  html.fx .site-header[data-over="hero"] .bar, html.fx .site-header[data-over="hero"] .icon-btn,
  html.fx.over-hero .dock { -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.fx .hero-kicker { background: rgba(40, 31, 25, .38); }
  html.fx .hero-lede { background: linear-gradient(180deg, rgba(38, 30, 24, .74), rgba(22, 17, 13, .68)); }
  html.fx .hero-ctas .btn-ghost-light { background: rgba(40, 31, 25, .42); }
  html.fx .site-header[data-over="hero"] .icon-btn { background: rgba(32, 27, 22, .5); }
  html.fx.over-hero .dock { background-color: color-mix(in srgb, var(--surface) 94%, transparent); }
}
@media (max-width: 767px) {
  html.fx .site-header[data-over="hero"] .bar { background: linear-gradient(180deg, rgba(28, 24, 20, .5), rgba(28, 24, 20, .34)); }
}
html:not(.fx) .hero-copy { --hero-bottom: 64px; }
@media (min-width: 768px) and (max-height: 859px) {
  /* short laptops: the scroll cue tucks into the bottom corner (it and the photo caption never show at
     the same time: the cue leaves with the copy, the caption arrives with the photo) */
  .hero-scroll { inset-inline-start: var(--gutter); bottom: 24px; transform: none; gap: .35rem; }
  .hero-copy, html:not(.fx) .hero-copy { --hero-bottom: 32px; }
}

/* short laptop screens: the same order, on the tighter rhythm the first screen has room for */
@media (min-width: 768px) and (max-height: 760px) {
  .hero-kicker { margin-bottom: calc(var(--hr) * 2.1); }
  .hero-title { margin: calc(var(--hr) * .7) 0 calc(var(--hr) * .6); }
  .hero-motto { margin-top: calc(var(--hr) * .5); }
  .hero-lede { margin-top: calc(var(--hr) * 2.2); }
  .hero-presidency { margin-top: calc(var(--hr) * 1.4); }
  .hero-ctas { margin-top: calc(var(--hr) * 2); }
}
@media (max-width: 767px) {
  /* phones: the copy is balanced in the room between the header pill and the dock (plus the safe area),
     on one rhythm unit that grows with the phone's height */
  .hero-copy {
    --hr: clamp(9px, 1.9svh, 20px);
    --hero-top: calc(var(--header-h) + 8px + var(--sp-5));
    --hero-bottom: calc(var(--dock-h) + var(--dock-gap) + var(--sp-5) + var(--safe-b-stable));
    padding-inline: max(var(--gutter), 20px);
  }
  html:not(.fx) .hero-copy { --hero-top: calc(var(--header-h) + 8px + 30px + var(--sp-4)); --hero-bottom: calc(var(--dock-h) + var(--dock-gap) + var(--sp-5) + var(--safe-b-stable)); }
  .hero-copy::before { flex-grow: .22; }
  .hero-kicker { font-size: .9375rem; padding: .3rem 1rem .3rem 1.1rem; gap: .6rem; margin-bottom: calc(var(--hr) * 2.6); }
  .hero-eyebrow { font-size: .875rem; }
  .hero-title { font-size: clamp(3rem, min(15vw, 9svh), 4.75rem); margin: calc(var(--hr) * 1.1) 0 calc(var(--hr) * .75); }
  .hero-sub { font-size: clamp(1.0625rem, .9rem + .9vw, 1.25rem); }
  .hero-motto { font-size: clamp(1.3125rem, 1.1rem + 1vw, 1.5rem); margin-top: calc(var(--hr) * .8); }
  .hero-lede { margin-top: calc(var(--hr) * 2.5); padding: .7em 1.4em .75em; font-size: 1.125rem; line-height: 1.5; max-width: 15.5em; }
  .hero-presidency { margin-top: calc(var(--hr) * 1.8); font-size: .875rem; gap: .6rem; }
  .hero-presidency::before, .hero-presidency::after { width: 1.25rem; }
  .hero-ctas { width: 100%; max-width: 26rem; gap: var(--sp-3); margin-top: calc(var(--hr) * 2.4); }
  .hero-ctas .btn { flex: 1 1 9.5rem; min-height: 48px; padding-inline: 1rem; }
  html.fx .hero-scroll { display: none; }
  /* phones: the copy uses the full width, so the progress rail would sit on the words — the scroll itself is the cue */
  html.fx .hero-rail { display: none; }
  .hero-photo img { object-position: 62% 80%; }
  /* the caption tucks under the header pill, small, at the inline-start edge */
  .hero-caption { bottom: auto; top: calc(var(--header-h) + 8px + var(--sp-2)); inset-inline-start: max(var(--gutter), 20px); }
}
/* portrait screens (phones, tablets held upright) get the portrait renders: the whole building, edge to
   edge, with the render's sky continued above it and a soft desert foreground below (tools/portrait-renders.cjs).
   hero-scene.js and main.js read the same media query and geometry for the 3D's last frame and the aura. */
@media (max-aspect-ratio: 4/5) {
  .hero-photo img { object-position: 50% 92%; }
}
@media (max-width: 380px) {
  .hero-copy { padding-inline: var(--gutter); }
  .hero-ctas .btn { flex-basis: 8rem; font-size: .9375rem; padding-inline: .75rem; }
}
/* tall phones (the whole first screen free): a more generous rhythm unit, so the lines breathe */
@media (max-width: 767px) and (min-height: 720px) {
  .hero-copy { --hr: clamp(9px, 2.3svh, 22px); }
}
/* short phones (an SE with Safari's bars showing): the same rhythm, one notch tighter */
@media (max-width: 767px) and (max-height: 600px) {
  .hero-copy { --hr: clamp(7px, 1.7svh, 10px); --hero-bottom: calc(var(--dock-h) + var(--dock-gap) + var(--sp-4) + var(--safe-b-stable)); }
  html:not(.fx) .hero-copy { --hero-top: calc(var(--header-h) + 8px + 26px + var(--sp-2)); --hero-bottom: calc(var(--dock-h) + var(--dock-gap) + var(--sp-4) + var(--safe-b-stable)); }
  .hero-caption { top: calc(var(--header-h) + 8px + var(--sp-1)); }
  .hero-kicker { font-size: .875rem; line-height: 1.5; margin-bottom: calc(var(--hr) * 1.5); }
  .hero-eyebrow { font-size: .8125rem; line-height: 1.5; }
  .hero-sub { font-size: 1rem; }
  .hero-motto { font-size: 1.25rem; margin-top: 0; }
  .hero-lede { margin-top: calc(var(--hr) * 1.5); font-size: 1.0625rem; padding: .55em 1.2em .6em; }
  .hero-presidency { font-size: .8125rem; line-height: 1.5; }
  .hero-ctas .btn { min-height: 46px; }
}

/* ---------- Stats: four clay tiles ---------- */
.stats { padding-block: clamp(56px, 7vw, 104px); background: var(--bg); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px); margin: 0; }
.stat { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: .4rem; padding: clamp(22px, 2.6vw, 36px) 12px; text-align: center; }
.stat:nth-child(1) { --clay-bg: var(--tint-warm); }
.stat:nth-child(2) { --clay-bg: var(--tint-sage); }
.stat:nth-child(3) { --clay-bg: var(--tint-blush); }
.stat:nth-child(4) { --clay-bg: var(--tint-sand); }
.stat dd { font-family: var(--f-display); font-size: clamp(3rem, 2rem + 3.6vw, 5.5rem); line-height: 1; color: var(--ink); text-shadow: 2px 3px 0 rgba(166, 90, 46, .14); }
.stat dt { font-size: var(--fs-small); color: var(--muted); font-weight: 500; }
@media (max-width: 767px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Vision ---------- */
.vision { background: var(--bg); padding-top: clamp(40px, 4vw, 72px); }
.vision-head { margin-bottom: clamp(40px, 5vw, 72px); }
.vision-grid { display: grid; justify-items: center; }
.vision-figure { position: relative; width: min(100%, 1080px); padding: 12px; }
.vision-figure picture { border-radius: calc(var(--r-lg) - 12px); overflow: hidden; }
.vision-figure img { aspect-ratio: 1752 / 898; object-fit: cover; object-position: 50% 55%; width: 100%; }
@media (max-width: 599px) { .vision-figure img { aspect-ratio: 4 / 3; object-position: 40% 62%; } }
.vision-figure .tag { position: absolute; top: 28px; inset-inline-start: 28px; }
.vision-text { position: relative; z-index: 1; margin-top: clamp(-96px, -7vw, -40px); max-width: 44rem; padding: clamp(24px, 3vw, 40px) clamp(22px, 4vw, 56px); }
.vision-text .lede { font-size: clamp(1.1875rem, 1.02rem + .6vw, 1.5rem); max-width: 40ch; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); margin-top: clamp(120px, 12vw, 176px); list-style: none; padding: 0; }
.pillar { --art: clamp(132px, 11vw, 168px); padding: 0 clamp(20px, 2.4vw, 36px) clamp(28px, 3vw, 40px); }
.pillar .clay-art { margin-top: calc(var(--art) * -.5); }
.pillar h3 { margin: .25rem 0 .75rem; }
.pillar p:last-child { color: var(--muted); max-width: 32ch; margin-inline: auto; }
.pillar-tag { display: inline-block; margin-top: .75rem; padding: .15rem .8rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; color: var(--sage-ink); letter-spacing: .02em; box-shadow: var(--clay-well); }
.pillar-tag-muted { color: var(--muted); }
@media (max-width: 1023px) {
  .pillars { grid-template-columns: 1fr; gap: 104px; max-width: 34rem; margin-inline: auto; }
}

/* ---------- Activities ---------- */
.activities { background: var(--bg-2); padding-block: var(--sec); position: relative; }
.act-pin { position: relative; }
.act-track { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.act-intro { max-width: 40rem; margin-bottom: clamp(48px, 5vw, 80px); }
.act-intro .lede { margin-top: 1.25rem; }
.act-hint { display: none; }
.act-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(40px, 4vw, 56px) clamp(24px, 3vw, 40px); list-style: none; padding: 0; }
.act { --clay-bg: var(--surface); display: flex; flex-direction: column; padding: 12px 12px clamp(24px, 2.4vw, 32px); }
.act:nth-child(4n + 1) { --clay-bg: var(--tint-warm); }
.act:nth-child(4n + 2) { --clay-bg: var(--tint-sage); }
.act:nth-child(4n + 3) { --clay-bg: var(--tint-blush); }
.act:nth-child(4n + 4) { --clay-bg: var(--tint-sand); }
.act-fig { position: relative; border-radius: calc(var(--r) - 8px); }
.act-fig > picture { display: block; overflow: hidden; border-radius: calc(var(--r) - 8px); background: var(--line); box-shadow: var(--clay-well); }
.act-fig > picture img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s var(--ease); }
.act:hover .act-fig > picture img { transform: scale(1.04); }
/* the clay object sits on a puffy disc that overlaps the bottom edge of the photo */
.act-badge { position: absolute; inset-inline-start: 50%; bottom: -52px; transform: translateX(50%); display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background-color: var(--clay-bg); background-image: var(--grain); box-shadow: var(--clay-2); }
.act-badge .clay-art { --art: 92px; margin-top: -18px; }
.act:hover .act-badge .clay-art { transform: translateY(-8px) rotate(-4deg) scale(1.06); }
.act-body { padding: 68px clamp(12px, 2vw, 24px) 0; display: grid; justify-items: center; }
.act-meta { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: .75rem; }
.act-num { display: grid; place-items: center; min-width: 46px; height: 32px; padding-inline: .5rem; border-radius: 999px; font-family: var(--f-display); font-size: 1.25rem; color: var(--accent); line-height: 1; box-shadow: var(--clay-well); }
.act h3 { margin-bottom: .5rem; max-width: 22ch; }
.act p { color: var(--muted); max-width: 38ch; }
.act-progress { display: none; }
@media (max-width: 767px) { .act-list { grid-template-columns: 1fr; } }

/* horizontal chapter (desktop + motion; enabled by JS) */
.activities.is-horizontal { padding-block: 0; }
.activities.is-horizontal .act-pin { height: 100vh; overflow: hidden; display: flex; align-items: center; padding-top: calc(var(--header-h) - 10px); }
.activities.is-horizontal .act-track {
  display: flex; align-items: center; gap: clamp(32px, 3vw, 48px); max-width: none; margin: 0; width: max-content;
  padding-inline: var(--gutter) 12vw; will-change: transform;
}
.activities.is-horizontal .act-intro { flex: 0 0 min(32vw, 500px); margin: 0; }
.activities.is-horizontal .act-hint { display: flex; align-items: center; gap: .6rem; margin-top: 2rem; padding: .4rem 1.1rem; border-radius: 999px; font-size: var(--fs-small); color: var(--muted); box-shadow: var(--clay-well); }
.activities.is-horizontal .act-hint svg { width: 22px; height: 22px; }
.activities.is-horizontal .act-list { display: flex; gap: clamp(32px, 3vw, 48px); padding-block: 40px; }
.activities.is-horizontal .act { flex: 0 0 clamp(330px, 26vw, 420px); }
.activities.is-horizontal .act:nth-child(even) { margin-top: 6vh; }
.activities.is-horizontal .act-fig > picture img { aspect-ratio: auto; height: min(32vh, 340px); }
/* the next section tucks up under the end of the pin (main.js: the row's closing turn); it paints above the
   section's own background so the colour boundary stays just below the progress groove */
.activities.is-horizontal + .moments { position: relative; }
.activities.is-horizontal .act-progress { display: block; position: absolute; bottom: 4.5vh; inset-inline: var(--gutter); height: 10px; border-radius: 999px; box-shadow: var(--clay-well); }
.activities.is-horizontal .act-progress i { position: absolute; inset: 2px; border-radius: 999px; background: var(--accent-solid); box-shadow: inset 2px 2px 3px rgba(255, 214, 180, .5), inset -2px -2px 3px rgba(70, 28, 8, .35); transform: scaleX(var(--act, 0)); transform-origin: right; }

/* ---------- Moments ---------- */
.moments { background: var(--bg); }
.moment { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.moment + .moment { margin-top: clamp(72px, 9vw, 144px); }
.moment-fig { grid-column: 1 / span 7; position: relative; padding: 12px; }
.moment-fig picture { border-radius: calc(var(--r-lg) - 12px); overflow: hidden; }
.moment-fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.moment-fig .tag { position: absolute; top: 28px; inset-inline-start: 28px; }
.moment-text { grid-column: 8 / span 5; display: grid; justify-items: center; text-align: center; }
.moment-alt .moment-fig { grid-column: 6 / span 7; grid-row: 1; }
.moment-alt .moment-text { grid-column: 1 / span 5; grid-row: 1; }
.moment-text p { margin-top: 1rem; color: var(--muted); max-width: 36ch; }
.moment-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; list-style: none; padding: 0; }
.moment-list li { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1.1rem; border-radius: 999px; font-weight: 500; font-size: var(--fs-small); background: var(--surface); background-image: var(--grain); box-shadow: var(--clay-1); }
.moment-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-solid); box-shadow: inset 1px 1px 1px rgba(255, 214, 180, .6); flex: none; }
@media (max-width: 1023px) {
  .moment-fig, .moment-text, .moment-alt .moment-fig, .moment-alt .moment-text { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- Partnership ---------- */
.partner { background: var(--bg-2); }
.partner-top { display: grid; justify-items: center; gap: clamp(36px, 4vw, 56px); margin-bottom: clamp(104px, 10vw, 140px); }
.partner-head { max-width: 46rem; }
.partner-head .lede { margin-top: 1.25rem; }
.note-line { display: inline-flex; gap: .6rem; align-items: center; margin-top: 1.5rem; padding: .5rem 1.2rem; border-radius: 999px; font-size: var(--fs-small); font-weight: 500; color: var(--sage-ink); background: var(--tint-sage); box-shadow: var(--clay-1); }
.note-line svg, .tax-band svg { width: 22px; height: 22px; flex: none; }
/* phones: the line wraps, so the check stands centred above it and the band becomes a soft rounded slab */
@media (max-width: 639px) { .tax-band { flex-direction: column; gap: .4rem; padding: 1rem 1.5rem 1.1rem; border-radius: 28px; } }
/* the clay diorama: 3D clay building (three.js) over a static clay fallback */
.ignite {
  position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--r-lg);
  background:
    radial-gradient(70% 70% at 50% 100%, rgba(233, 201, 168, .55), rgba(233, 201, 168, 0) 70%),
    linear-gradient(180deg, #F6E7D6 0%, #EFDCC6 55%, #E7CDB1 100%);
  box-shadow: var(--clay-3);
}
:root[data-theme="dark"] .ignite { background: radial-gradient(70% 70% at 50% 100%, rgba(166, 90, 46, .3), rgba(166, 90, 46, 0) 70%), linear-gradient(180deg, #1D1A17 0%, #241F1B 60%, #2E2620 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ignite { background: radial-gradient(70% 70% at 50% 100%, rgba(166, 90, 46, .3), rgba(166, 90, 46, 0) 70%), linear-gradient(180deg, #1D1A17 0%, #241F1B 60%, #2E2620 100%); } }
.ignite::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 10px 10px 22px rgba(255, 255, 255, .35), inset -12px -12px 26px rgba(110, 76, 44, .16); }
:root[data-theme="dark"] .ignite::after { box-shadow: inset 10px 10px 22px rgba(255, 236, 214, .06), inset -12px -12px 26px rgba(0, 0, 0, .45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ignite::after { box-shadow: inset 10px 10px 22px rgba(255, 236, 214, .06), inset -12px -12px 26px rgba(0, 0, 0, .45); } }
.ignite-fallback, .ignite-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ignite-fallback { display: grid; place-items: center; transition: opacity .6s; }
.ignite-art { width: min(300px, 42%); filter: var(--art-shadow); }
.ignite-art img { width: 100%; height: auto; }
.ignite-art.is-drop { animation: plop .8s var(--squish); }
@keyframes plop { 0% { transform: translateY(-40px) scale(.9, 1.1); opacity: .2; } 55% { transform: translateY(0) scale(1.08, .9); opacity: 1; } 75% { transform: scale(.97, 1.03); } 100% { transform: none; } }
.ignite-canvas { opacity: 0; transition: opacity 1s var(--ease); touch-action: pan-y; }
.ignite.is-live .ignite-canvas { opacity: 1; }
.ignite.is-live .ignite-fallback { opacity: 0; }
.ignite-caption { position: absolute; bottom: 16px; inset-inline-start: 50%; transform: translateX(50%); padding: .3rem 1rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; color: var(--ink); background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: var(--clay-1); white-space: nowrap; }
.ignite-caption .muted { color: var(--muted); }
@media (max-width: 1023px) { .ignite { aspect-ratio: 16 / 10; } }
@media (max-width: 599px) { .ignite { aspect-ratio: 4 / 3.4; border-radius: var(--r); } .ignite-art { width: 52%; } }

.tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); row-gap: 104px; border: 0; padding: 0; margin: 0; min-width: 0; }
@media (max-width: 1279px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tier:last-child { grid-column: 1 / -1; max-width: 26rem; justify-self: center; width: 100%; } }
@media (max-width: 599px) { .tiers { grid-template-columns: 1fr; } }
.tier { position: relative; display: grid; grid-template-rows: 1fr auto; text-align: center; transition: box-shadow .35s var(--ease), transform .5s var(--spring); }
.tier:hover { transform: translateY(-4px); }
.tier-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tier-card { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 0 18px 18px; cursor: pointer; min-height: 100%; }
.tier-art { --art: clamp(112px, 8.6vw, 132px); margin-top: calc(var(--art) * -.55); margin-bottom: .25rem; }
.tier-name { font-family: var(--f-display); font-size: 1.7rem; line-height: 1.15; }
.tier-price { display: flex; align-items: baseline; justify-content: center; gap: .4rem; margin-top: .6rem; font-family: var(--f-display); font-size: clamp(2.5rem, 2rem + 1.1vw, 3.1rem); line-height: 1; }
.tier-price small { font-family: var(--f-ui); font-size: var(--fs-small); color: var(--muted); }
.tier-total { font-size: var(--fs-small); color: var(--muted); }
.tier-net { margin-top: .6rem; padding: .55rem .85rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--sage-ink); background: var(--tint-sage); border-radius: var(--r-sm); box-shadow: var(--clay-well); }
.tier-benefits { display: grid; gap: .5rem; margin-top: 1.1rem; padding-top: 1.1rem; font-size: var(--fs-small); line-height: 1.55; position: relative; }
.tier-benefits::before { content: ""; position: absolute; top: 0; inset-inline: 22%; height: 6px; border-radius: 999px; box-shadow: var(--clay-well); }
.tier-benefits span { display: block; }
.tier-benefits span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: .45rem; vertical-align: .15em; border-radius: 50%; background: var(--accent-solid); opacity: .75; }
.tier-cta { margin: 0 18px 20px; }
.tier-badge { position: relative; margin: -.1rem 0 .15rem; padding: .15rem .75rem; font-size: var(--fs-xs); font-weight: 600; color: #fff; background: #4E5A40; border-radius: 999px; box-shadow: 4px 5px 10px rgba(60, 70, 40, .3), inset 2px 2px 3px rgba(255, 255, 255, .3), inset -2px -2px 4px rgba(0, 0, 0, .3); z-index: 1; }
.tier-badge-inline { position: static; display: inline-block; margin-inline-start: .5rem; padding: .05rem .6rem; vertical-align: middle; font-family: var(--f-ui); box-shadow: none; }
/* chosen tier: pressed into the clay, copper rim, its brick does a little squash-and-settle */
.tier:has(.tier-input:checked) { --clay-bg: var(--tint-warm); box-shadow: var(--clay-press), 0 0 0 3px var(--accent-solid); transform: translateY(2px) scale(.99); }
.tier:has(.tier-input:checked) .tier-art { animation: settle .9s var(--squish); }
@keyframes settle { 0% { transform: translateY(-26px) scale(.92, 1.08); } 45% { transform: translateY(0) scale(1.1, .88); } 70% { transform: scale(.96, 1.04); } 100% { transform: none; } }
.tier:has(.tier-input:checked) .tier-cta { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--clay-copper); }
.tier-input:focus-visible + .tier-card { outline: 3px solid var(--focus); outline-offset: -6px; border-radius: var(--r); }

/* ---------- Benefits ---------- */
.benefits { background: var(--bg); }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); row-gap: clamp(100px, 9vw, 120px); margin-top: 104px; list-style: none; padding: 0; }
.benefit { --art: clamp(124px, 10vw, 150px); padding: 0 clamp(20px, 2.4vw, 36px) clamp(28px, 3vw, 40px); display: grid; justify-items: center; align-content: start; }
.benefit .clay-art { margin-top: calc(var(--art) * -.55); }
.benefit-n { display: grid; place-items: center; min-width: 46px; height: 30px; padding-inline: .5rem; margin-top: .25rem; border-radius: 999px; font-family: var(--f-display); font-size: 1.125rem; color: var(--accent); box-shadow: var(--clay-well); }
.benefit h3 { margin: .9rem 0 .5rem; }
.benefit p { color: var(--muted); max-width: 32ch; }
@media (max-width: 1023px) { .benefit-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .benefit-grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }

/* ---------- Process ---------- */
.process { background: var(--bg-2); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 36px); position: relative; list-style: none; padding: 0; margin-top: 24px; }
/* a pressed groove links the four steps */
.steps::before { content: ""; position: absolute; top: 96px; inset-inline: 12%; height: 12px; border-radius: 999px; box-shadow: var(--clay-well); }
.step { --art: clamp(112px, 9vw, 136px); position: relative; display: grid; justify-items: center; align-content: start; padding: 28px clamp(18px, 2vw, 28px) clamp(28px, 3vw, 36px); }
.step:nth-child(1) { --clay-bg: var(--tint-sand); }
.step:nth-child(2) { --clay-bg: var(--tint-sage); }
.step:nth-child(3) { --clay-bg: var(--tint-blush); }
.step:nth-child(4) { --clay-bg: var(--tint-warm); }
.step-n { position: absolute; top: -20px; inset-inline-start: 50%; transform: translateX(50%); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-family: var(--f-display); font-size: 1.5rem; color: #fff; background: var(--accent-solid); box-shadow: var(--clay-copper); }
.step h3 { margin: 1rem 0 .5rem; }
.step p { color: var(--muted); max-width: 30ch; }
.center-cta { margin-top: clamp(56px, 5vw, 88px); display: flex; justify-content: center; }
@media (max-width: 1023px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 56px; } .steps::before { display: none; } }
@media (max-width: 599px) { .steps { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }

/* ---------- Donate ---------- */
.donate { background: var(--bg); }
.methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
@media (max-width: 1199px) { .methods { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .methods { grid-template-columns: 1fr; } }
.method { --art: clamp(116px, 9vw, 140px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; padding: 28px 24px 30px; }
.method h3 { font-size: 1.75rem; }
.method > p { color: var(--muted); max-width: 30ch; }
.method .btn { margin-top: auto; }
.method-art { margin-bottom: .25rem; }
.method-main { --clay-bg: #24211D; color: #F7F3EC; box-shadow: var(--clay-ink); }
:root[data-theme="dark"] .method-main { --clay-bg: #2E2520; box-shadow: var(--clay-ink), 0 0 0 2px rgba(224, 162, 116, .55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .method-main { --clay-bg: #2E2520; box-shadow: var(--clay-ink), 0 0 0 2px rgba(224, 162, 116, .55); } }
.method-main > p { color: rgba(247, 243, 236, .82); }
.method-main .tag { background: rgba(247, 243, 236, .08); color: #F0D3B6; box-shadow: inset 2px 2px 4px rgba(255, 255, 255, .12), inset -2px -2px 4px rgba(0, 0, 0, .4); }
.method-main .method-art { filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .5)); }
.method-small { font-size: var(--fs-xs); color: rgba(247, 243, 236, .75); }
.method-qr { --clay-bg: var(--tint-sand); }
.method-bank { --clay-bg: var(--tint-sage); }
.phones { display: grid; gap: .25rem; list-style: none; padding: 0; }
.phones a { font-family: var(--f-display); font-size: 1.75rem; text-decoration: none; line-height: 1.3; }
.phones a:hover { color: var(--accent); }
.qr { width: 160px; height: 160px; padding: 10px; border-radius: var(--r-sm); background: #F7F3EC; box-shadow: var(--clay-well); }
.bank { display: grid; gap: .6rem; width: 100%; margin-top: auto; }
/* every row is the same three-column grid: the label and the value sit on the card's centre line, and the
   round copy button always takes the same slot at the row's end (balanced by an equal empty slot at the
   start), so the three buttons stand on one vertical line whatever the length of the value */
.bank > div {
  position: relative; display: grid; align-content: center; justify-items: center; row-gap: .1rem; min-height: 64px;
  /* equal room at both ends for the 44px button: the label + value stack stays on the card's centre line */
  padding: .55rem calc(.6rem + 44px + .5rem); border-radius: var(--r-sm); box-shadow: var(--clay-well);
}
.bank dt, .bank dd > span { text-align: center; min-width: 0; }
/* the copy button is centred on the whole row (label + value), not on the value line under the label */
.bank dd > .copy { position: absolute; inset-inline-end: .6rem; top: 50%; margin-top: -22px; }
.bank dt { font-size: var(--fs-xs); color: var(--muted); }
.bank dd { font-weight: 600; font-size: 1.0625rem; }
.copy { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface); cursor: pointer; color: var(--ink); box-shadow: var(--clay-1); transition: transform .45s var(--spring), box-shadow .2s, background-color .2s; }
.copy:hover { transform: translateY(-2px) rotate(-6deg); }
.copy:active { transform: scale(.9); box-shadow: var(--clay-press); }
.copy svg { width: 18px; height: 18px; }
.copy.is-done { background: #4E5A40; color: #fff; animation: pop .5s var(--squish); }
@keyframes pop { 40% { transform: scale(1.18, .86); } 70% { transform: scale(.95, 1.05); } }
.tax-band { display: flex; align-items: center; justify-content: center; gap: .6rem; width: fit-content; max-width: 100%; margin: 2.5rem auto 0; padding: .9rem 1.6rem; border-radius: 999px; text-wrap: balance; font-weight: 500; color: var(--sage-ink); text-align: center; background: var(--tint-sage); background-image: var(--grain); box-shadow: var(--clay-2); }

/* ---------- Finale ---------- */
.finale { position: relative; min-height: min(100vh, 960px); display: flex; align-items: flex-start; justify-content: center; color: #F7F3EC; background: var(--sky-1); isolation: isolate; overflow: hidden; }
.finale-fig { position: absolute; inset: 0; z-index: -1; }
.finale-fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.finale-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 13, 12, .84) 0%, rgba(14, 13, 12, .55) 36%, rgba(14, 13, 12, 0) 64%), linear-gradient(0deg, rgba(14, 13, 12, .35), rgba(14, 13, 12, 0) 25%); }
/* "המחשה" sits at the inline-start corner (right in RTL), across from the back-to-top pebble at the inline-end edge,
   so the two never meet however the finale scrolls past */
.finale-fig figcaption { position: absolute; bottom: 24px; inset-inline-start: var(--gutter); z-index: 1; }
.finale-copy { display: grid; justify-items: center; text-align: center; padding-block: clamp(120px, 14vh, 180px) 64px; }
.finale-copy .display-1 em { color: #F0D3B6; }
.finale-copy .lede { margin: 1.5rem auto 2.25rem; color: rgba(247, 243, 236, .9); max-width: 34ch; }
/* portrait screens: the portrait night render, anchored at the bottom, keeps the whole building in view.
   The section is tall enough that the heading, lede and button sit in the sky above the roofs — clear of
   the header pill on top and, on phones, of the floating dock below the building. */
@media (max-aspect-ratio: 4/5) {
  .finale { min-height: max(100svh, 46rem); }
  .finale-fig img { object-position: 50% 100%; }
}
@media (max-aspect-ratio: 4/5) and (max-width: 767px) {
  .finale-copy { padding-block: calc(var(--header-h) + 8px + var(--sp-7)) var(--sp-7); }
  .finale-copy .lede { margin: var(--sp-5) auto var(--sp-6); }
  .finale-fig figcaption { bottom: calc(var(--dock-h) + var(--dock-gap) + var(--sp-3) + env(safe-area-inset-bottom)); inset-inline: max(var(--gutter), 20px) auto; } /* clear of the back-to-top button */
}

/* ---------- Footer ---------- */
.footer { background: #141311; color: #EFE7DA; padding-block: clamp(64px, 7vw, 112px) 32px; text-align: center; }
.footer a { text-decoration: none; }
.footer a:hover { color: #E9C9A8; text-decoration: underline; }
.footer .muted { color: #B4AB9C; }
.footer-grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 48px; align-items: start; }
.footer-brand { order: 2; display: grid; justify-items: center; }
.footer-nav { order: 1; }
.footer-contact { order: 3; }
.footer-mark { width: 64px; height: 64px; padding: 10px; color: #E9C9A8; border-radius: 50%; background: #1E1C19; box-shadow: 8px 10px 20px rgba(0, 0, 0, .55), inset 3px 3px 6px rgba(255, 236, 214, .08), inset -4px -4px 8px rgba(0, 0, 0, .5); }
.footer-word { font-size: 2.5rem; margin: .9rem 0 .25rem; }
.footer-brand p:not(.footer-word) { max-width: 38ch; }
.footer-verse { margin-top: 1rem; font-family: var(--f-display); font-size: 1.35rem; color: #E9C9A8; }
.footer-h { font-family: var(--f-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; color: #B4AB9C; margin-bottom: 1rem; }
.footer-nav ul, .footer-contact ul { display: grid; gap: .45rem; list-style: none; padding: 0; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; margin-top: 64px; padding-top: 24px; font-size: var(--fs-xs); position: relative; }
.footer-base::before { content: ""; position: absolute; top: 0; inset-inline: 20%; height: 8px; border-radius: 999px; box-shadow: inset 3px 3px 6px rgba(0, 0, 0, .55), inset -2px -2px 5px rgba(255, 236, 214, .06); }
@media (max-width: 899px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; order: 0; } }

/* ---------- "נבחרת המאה": the royal tier ----------
   A double gold frame (a burnished outer band whose light slowly travels round, a fine inner hairline),
   filigree in the four corners, a small crown over the name, a champagne tint, a soft golden glow and,
   every few seconds, a faint sheen drifting across. Only the band's angle repaints (a 2.5px ring) and
   the sheen is a transform; both stop off screen, under reduced motion and in forced colours. */
@property --royal-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.tier-royal {
  --gold-ink: #7A5A22;
  --clay-bg: color-mix(in srgb, var(--surface) 90%, #EBD08C 10%);
  isolation: isolate;
  box-shadow: var(--clay-2), 0 0 0 1px rgba(184, 145, 63, .3), 0 22px 48px -14px rgba(176, 132, 52, .45), 0 0 34px rgba(233, 207, 134, .26);
}
.tier-royal::after {
  content: ""; position: absolute; inset: 8px; z-index: 2; pointer-events: none;
  border-radius: calc(var(--r) - 8px); border: 1px solid rgba(184, 145, 63, .5);
  box-shadow: inset 0 0 0 3px rgba(233, 207, 134, .1);
}
.tier-royal .tier-card, .tier-royal .tier-cta { position: relative; z-index: 3; } /* the clay art rests over the frame */
.tier-royal .tier-cta { margin: 0 26px 26px; }
.royal-frame {
  position: absolute; inset: 0; z-index: 2; padding: 2.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--royal-a), #7A5A22, #E9CF86 10%, #FFF3CC 16%, #C9A24E 26%, #8A6A2B 38%, #F1DA97 52%, #B8913F 64%, #7A5A22 76%, #F6E3A6 88%, #7A5A22);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.royal-corner { position: absolute; z-index: 2; width: 42px; height: 42px; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(122, 90, 34, .25)); }
.rc-tl { top: 4px; left: 4px; }
.rc-tr { top: 4px; right: 4px; transform: scaleX(-1); }
.rc-bl { bottom: 4px; left: 4px; transform: scaleY(-1); }
.rc-br { bottom: 4px; right: 4px; transform: scale(-1); }
.royal-glint { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.royal-glint i { position: absolute; top: -10%; bottom: -10%; left: -45%; width: 40%; opacity: 0; background: linear-gradient(100deg, rgba(255, 240, 200, 0) 0%, rgba(255, 236, 190, .42) 50%, rgba(255, 240, 200, 0) 100%); transform: skewX(-14deg); }
.royal-crown { display: block; width: 38px; height: 27px; margin: -.2rem auto .1rem; filter: drop-shadow(0 2px 3px rgba(122, 90, 34, .3)) drop-shadow(0 0 8px rgba(233, 207, 134, .5)); }
.tier-royal .tier-name { color: color-mix(in srgb, var(--ink) 82%, #7A5A22); }
.tier-royal:has(.tier-input:checked) { --clay-bg: color-mix(in srgb, var(--tint-warm) 88%, #EBD08C 12%); box-shadow: var(--clay-press), 0 0 0 3px var(--accent-solid), 0 0 36px rgba(233, 207, 134, .4); }
html.motion .royal-frame { animation: royal-turn 16s linear infinite; }
html.motion .royal-glint i { animation: royal-sweep 9s var(--ease) infinite 1.5s; }
html.motion .tier-royal.is-paused .royal-frame, html.motion .tier-royal.is-paused .royal-glint i { animation-play-state: paused; }
@keyframes royal-turn { to { --royal-a: 360deg; } }
@keyframes royal-sweep { 0%, 58% { opacity: 0; transform: translateX(0) skewX(-14deg); } 62% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; transform: translateX(380%) skewX(-14deg); } }
/* dark clay: a deeper, warmer gold */
:root[data-theme="dark"] .tier-royal { --clay-bg: color-mix(in srgb, var(--surface) 90%, #8A6A2B 10%); box-shadow: var(--clay-2), 0 0 0 1px rgba(201, 162, 78, .35), 0 22px 48px -14px rgba(0, 0, 0, .6), 0 0 36px rgba(201, 162, 78, .2); }
:root[data-theme="dark"] .tier-royal .tier-name { color: #F1DA97; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tier-royal { --clay-bg: color-mix(in srgb, var(--surface) 90%, #8A6A2B 10%); box-shadow: var(--clay-2), 0 0 0 1px rgba(201, 162, 78, .35), 0 22px 48px -14px rgba(0, 0, 0, .6), 0 0 36px rgba(201, 162, 78, .2); }
  :root:not([data-theme="light"]) .tier-royal .tier-name { color: #F1DA97; }
}

/* the same nobility, lighter, in the donation sheet: a still gold hairline, a small crown, a warm glow */
.opt-royal .opt-body { position: relative; background-color: color-mix(in srgb, var(--surface) 90%, #EBD08C 10%); box-shadow: var(--clay-1), 0 8px 22px -10px rgba(176, 132, 52, .45); }
.opt-royal .opt-body::before {
  content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, #8A6A2B, #F6E3A6 22%, #C9A24E 45%, #FFF3CC 60%, #B8913F 80%, #7A5A22);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.opt-crown { display: inline-block; width: 24px; height: 17px; margin-inline-end: .4rem; vertical-align: -.1em; filter: drop-shadow(0 0 5px rgba(233, 207, 134, .55)); }
.opt-royal input:checked + .opt-body { background-color: color-mix(in srgb, var(--tint-warm) 88%, #EBD08C 12%); }
:root[data-theme="dark"] .opt-royal .opt-body { background-color: color-mix(in srgb, var(--surface) 90%, #8A6A2B 10%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .opt-royal .opt-body { background-color: color-mix(in srgb, var(--surface) 90%, #8A6A2B 10%); } }

/* ---------- Dock (mobile sticky donate): a floating clay pill ---------- */
.dock { display: none; }
@media (max-width: 767px) {
  /* the page's dark footer runs on beneath the floating dock, so its last line clears it */
  .footer:not(.doc-footer) { padding-bottom: calc(var(--dock-h) + var(--dock-gap) + var(--sp-6) + env(safe-area-inset-bottom)); }
  /* keyboard focus scrolled into view stops above the floating dock, never under it */
  html:has(.dock) { scroll-padding-bottom: calc(var(--dock-h) + var(--dock-gap) * 2 + env(safe-area-inset-bottom)); }
  /* a small, quiet pill centred above the home indicator: a softer copper, a fine hairline, a low shadow */
  .dock {
    position: fixed; inset: auto 0 calc(var(--dock-gap) + env(safe-area-inset-bottom)) 0; margin-inline: auto; width: min(80vw, 21rem);
    z-index: 40; display: flex; gap: 4px; padding: 4px;
    border-radius: 999px; background-color: color-mix(in srgb, var(--surface) 84%, transparent);
    box-shadow: 0 0 0 1px rgba(110, 76, 44, .12), 0 6px 18px rgba(40, 24, 12, .16); backdrop-filter: blur(14px) saturate(1.1);
  }
  .dock-tel { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); flex: none; background: transparent; transition: transform .4s var(--spring), background-color .2s; }
  .dock-tel:active { transform: scale(.92); background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .dock-tel svg { width: 19px; height: 19px; }
  .dock-btn { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: #94593A; color: #fff; font-weight: 600; font-size: .9375rem; letter-spacing: .01em; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 222, 196, .28), 0 2px 6px rgba(90, 44, 18, .2); transition: transform .4s var(--spring); }
  .dock-btn:active { transform: scale(.97); box-shadow: inset 0 2px 5px rgba(50, 20, 6, .3); }
  .dock-sub { font-weight: 400; }
}

/* ---------- Back to top: a small round clay pebble with an up arrow ----------
   It rests at the inline-end edge (left in RTL), in line with the hero's progress rail: above the
   activities' progress groove on desktop, above the dock (and the safe area) on phones. Hidden near the
   top and while a dialog is open. */
.to-top {
  position: fixed; z-index: 45; inset-inline-end: clamp(16px, 2.2vw, 34px); bottom: calc(4.5vh + 26px);
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  color: var(--accent); background-color: color-mix(in srgb, var(--surface) 92%, transparent); background-image: var(--grain);
  box-shadow: var(--clay-1); backdrop-filter: blur(10px); cursor: pointer; -webkit-tap-highlight-color: transparent;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.86);
  transition: opacity .35s var(--ease), transform .5s var(--spring), visibility 0s .35s, box-shadow .25s var(--ease);
}
.to-top svg { width: 22px; height: 22px; transition: transform .45s var(--spring); }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .5s var(--spring), visibility 0s, box-shadow .25s var(--ease); }
.to-top:hover svg { transform: translateY(-2px); }
.to-top:active { transform: scale(.92); box-shadow: var(--clay-press); transition-duration: .12s; }
body:has(dialog[open]) .to-top { opacity: 0; visibility: hidden; }
@media (max-width: 767px) {
  .to-top { inset-inline-end: calc(var(--dock-gap) + 4px); bottom: calc(var(--dock-h) + var(--dock-gap) + var(--sp-3) + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
}

/* ---------- Dialogs ---------- */
dialog { color: var(--ink); background: var(--bg); border: 0; padding: 0; text-align: center; }
dialog::backdrop { background: rgba(16, 15, 13, .58); backdrop-filter: blur(4px); }
.sheet { margin: 0; width: min(560px, 100vw); max-width: none; height: 100dvh; max-height: none; inset: 0 auto 0 0; overflow-y: auto; overscroll-behavior: contain; background-image: var(--grain); border-radius: 0 var(--r-lg) var(--r-lg) 0; box-shadow: 24px 0 60px rgba(0, 0, 0, .3), inset -8px 8px 16px rgba(255, 255, 255, .25); }
.sheet[open] { animation: drawer-in .55s var(--spring); }
@keyframes drawer-in { from { transform: translateX(-60px); opacity: 0; } }
.sheet-inner { display: grid; gap: 1.75rem; padding: 28px clamp(20px, 3vw, 40px) calc(40px + env(safe-area-inset-bottom)); }
.sheet-grip { display: none; }
.sheet-head { position: relative; display: grid; justify-items: center; padding-top: 4px; }
.sheet-head > div { display: grid; justify-items: center; padding-inline: 50px; }
.sheet-head .icon-btn { position: absolute; top: 0; inset-inline-end: 0; }
.sheet-head .eyebrow { margin-bottom: .75rem; font-size: var(--fs-xs); padding-inline: .9rem; }
.sheet-head .eyebrow::before, .sheet-head .eyebrow::after { display: none; }
.sheet-title { font-family: var(--f-display); font-weight: 400; font-size: 3rem; line-height: 1; }
.sheet-tiers { display: grid; gap: 12px; border: 0; padding: 0; margin: 0; min-width: 0; }
.sheet-legend { font-weight: 600; margin: 0 auto .75rem; padding: 0; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset-inline-start: 16px; top: 50%; }
.opt-body { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .1rem 1rem; padding: 14px 20px; min-height: 72px; text-align: start; border-radius: var(--r-sm); background-color: var(--surface); background-image: var(--grain); box-shadow: var(--clay-1); transition: box-shadow .25s var(--ease), transform .4s var(--spring), background-color .25s; }
.opt:hover .opt-body { transform: translateY(-1px); }
.opt-name { font-weight: 600; }
.opt-price { font-family: var(--f-display); font-size: 2rem; line-height: 1; align-self: center; white-space: nowrap; }
.opt-price small { font-family: var(--f-ui); font-size: var(--fs-xs); color: var(--muted); }
.opt-meta { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.nw-md { white-space: nowrap; }
.opt input:checked + .opt-body { background-color: var(--tint-warm); box-shadow: var(--clay-press), 0 0 0 2px var(--accent-solid); transform: scale(.99); }
.opt input:focus-visible + .opt-body { outline: 3px solid var(--focus); outline-offset: 3px; }
.sheet-note { font-size: var(--fs-xs); color: var(--muted); }
.field-label { display: block; font-weight: 600; margin-bottom: .6rem; }
.field-label .muted { font-weight: 400; font-size: var(--fs-xs); }
.field { width: 100%; min-height: 54px; padding: .75rem 1.2rem; font: inherit; text-align: center; color: var(--ink); background: var(--surface); border: 0; border-radius: 999px; box-shadow: var(--clay-well); }
.field::placeholder { color: var(--muted); }
.field:focus-visible { outline-offset: 2px; }
/* the plaque: a pressed limestone tablet with a copper rim */
.plaque { display: grid; justify-items: center; gap: .25rem; margin-top: 16px; padding: 26px 18px; text-align: center; color: #1C1B18; border-radius: var(--r); background-color: #EFE4D2; background-image: var(--grain); box-shadow: 10px 14px 28px rgba(110, 76, 44, .22), inset 4px 4px 8px rgba(255, 255, 255, .7), inset -5px -5px 10px rgba(110, 76, 44, .18), inset 0 0 0 7px #EFE4D2, inset 0 0 0 9px rgba(143, 75, 36, .45); }
.plaque-label { font-size: var(--fs-xs); color: #5E584F; }
.plaque-name { font-family: var(--f-display); font-size: 2rem; line-height: 1.2; min-height: 1.2em; overflow-wrap: anywhere; color: #2A2622; text-shadow: 1px 1px 0 rgba(255, 255, 255, .7), -1px -1px 0 rgba(110, 76, 44, .3); }
.plaque-tier { font-size: var(--fs-xs); color: #8F4B24; font-weight: 600; }
.sheet-actions { display: grid; position: sticky; bottom: 0; margin: 0 calc(-1 * clamp(20px, 3vw, 40px)); padding: 14px clamp(20px, 3vw, 40px) calc(14px + env(safe-area-inset-bottom)); gap: .5rem; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); box-shadow: 0 -10px 24px rgba(110, 76, 44, .08); }
.sheet-small, .sheet-alt { font-size: var(--fs-small); color: var(--muted); }
.sheet-small { font-size: var(--fs-xs); text-align: center; }
.sheet-alt a { color: var(--ink); font-weight: 500; }

@media (max-width: 767px) {
  .sheet { width: 100%; height: auto; max-height: 92dvh; inset: auto 0 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .sheet[open] { animation: sheet-up .5s var(--spring); }
  @keyframes sheet-up { from { transform: translateY(60px); opacity: 0; } }
  .sheet-inner { padding-top: 12px; gap: 1.25rem; }
  .sheet-grip { display: block; width: 48px; height: 8px; border-radius: 999px; box-shadow: var(--clay-well); margin: 0 auto 4px; }
  .sheet-title { font-size: 2.4rem; }
}

/* mobile menu: a small floating clay panel that springs out of the menu button (top-left),
   soft grey-limestone, with deeply embossed words */
.menu-dialog {
  --m-bg: #E7E3DD; --m-bg-2: #DDD8D1; --m-ink: #4A443D; --m-muted: #625A51;
  --m-shadow: 18px 24px 46px rgba(40, 30, 20, .3), -4px -4px 14px rgba(255, 255, 255, .3), inset 4px 4px 10px rgba(255, 255, 255, .7), inset -6px -6px 14px rgba(90, 70, 50, .14);
  --m-item: 4px 5px 10px rgba(90, 70, 50, .15), -3px -3px 8px rgba(255, 255, 255, .75), inset 1px 1px 2px rgba(255, 255, 255, .8), inset -2px -2px 4px rgba(90, 70, 50, .08);
  --m-press: inset 3px 3px 7px rgba(90, 70, 50, .2), inset -3px -3px 7px rgba(255, 255, 255, .8);
  --m-emboss: 1px 1px 0 rgba(255, 255, 255, .95), 2px 2px 1px rgba(255, 255, 255, .4), -1px -1px 0 rgba(80, 60, 40, .32), 0 3px 6px rgba(80, 60, 40, .18);
  position: fixed; margin: 0; inset: calc(env(safe-area-inset-top) + 74px) auto auto 12px;
  width: min(232px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 104px); overflow: auto;
  padding: 0; border-radius: 26px; color: var(--m-ink); text-align: center;
  background-color: var(--m-bg); background-image: var(--grain), linear-gradient(160deg, var(--m-bg), var(--m-bg-2));
  box-shadow: var(--m-shadow); transform-origin: 14% 0;
}
:root[data-theme="dark"] .menu-dialog { --m-bg: #2C2926; --m-bg-2: #24211E; --m-ink: #EDE5D9; --m-muted: #BDB3A5;
  --m-shadow: 18px 24px 46px rgba(0, 0, 0, .6), inset 3px 3px 8px rgba(255, 236, 214, .07), inset -6px -6px 14px rgba(0, 0, 0, .45);
  --m-item: 4px 5px 10px rgba(0, 0, 0, .45), inset 1px 1px 2px rgba(255, 236, 214, .08), inset -2px -2px 4px rgba(0, 0, 0, .35);
  --m-press: inset 3px 3px 7px rgba(0, 0, 0, .55), inset -2px -2px 5px rgba(255, 236, 214, .06);
  --m-emboss: -1px -1px 0 rgba(255, 236, 214, .14), 1px 1px 0 rgba(0, 0, 0, .75), 2px 3px 4px rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .menu-dialog { --m-bg: #2C2926; --m-bg-2: #24211E; --m-ink: #EDE5D9; --m-muted: #BDB3A5;
  --m-shadow: 18px 24px 46px rgba(0, 0, 0, .6), inset 3px 3px 8px rgba(255, 236, 214, .07), inset -6px -6px 14px rgba(0, 0, 0, .45);
  --m-item: 4px 5px 10px rgba(0, 0, 0, .45), inset 1px 1px 2px rgba(255, 236, 214, .08), inset -2px -2px 4px rgba(0, 0, 0, .35);
  --m-press: inset 3px 3px 7px rgba(0, 0, 0, .55), inset -2px -2px 5px rgba(255, 236, 214, .06);
  --m-emboss: -1px -1px 0 rgba(255, 236, 214, .14), 1px 1px 0 rgba(0, 0, 0, .75), 2px 3px 4px rgba(0, 0, 0, .5); } }
.menu-dialog::backdrop { background: rgba(18, 15, 12, .26); backdrop-filter: blur(2px); }
.menu-dialog[open] { animation: menu-in .55s var(--spring); }
.menu-dialog[open]::backdrop { animation: fade .3s var(--ease); }
.menu-dialog.is-closing { animation: menu-out .22s var(--ease) forwards; }
.menu-dialog.is-closing::backdrop { animation: fade-out .22s var(--ease) forwards; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-12px) scale(.84); } }
@keyframes menu-out { to { opacity: 0; transform: translateY(-8px) scale(.9); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.menu-inner { display: grid; gap: 8px; padding: 10px 12px 14px; }
.menu-top { display: flex; align-items: center; justify-content: space-between; padding-inline-start: 10px; }
.menu-title { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; color: var(--m-muted); }
.menu-dialog .menu-close { width: 36px; height: 36px; color: var(--m-ink); background: var(--m-bg); box-shadow: var(--m-item); }
.menu-dialog .menu-close svg { width: 18px; height: 18px; }
.menu-inner ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.menu-inner ul a {
  display: block; padding: .42rem .9rem; border-radius: 16px; text-decoration: none;
  font-family: var(--f-display); font-size: 1.375rem; line-height: 1.3; color: var(--m-ink); text-shadow: var(--m-emboss);
  background: linear-gradient(150deg, color-mix(in srgb, var(--m-bg) 80%, #fff 20%), var(--m-bg-2)); box-shadow: var(--m-item);
  transition: transform .45s var(--spring), box-shadow .25s var(--ease);
}
.menu-inner ul a:hover { transform: translateY(-1px); }
.menu-inner ul a:active { transform: scale(.97); box-shadow: var(--m-press); }
html.motion .menu-dialog[open] li { animation: menu-item .5s var(--spring) both; }
.menu-dialog[open] li:nth-child(2) { animation-delay: .04s; }
.menu-dialog[open] li:nth-child(3) { animation-delay: .08s; }
.menu-dialog[open] li:nth-child(4) { animation-delay: .12s; }
.menu-dialog[open] li:nth-child(5) { animation-delay: .16s; }
@keyframes menu-item { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.menu-tel { display: flex; justify-content: center; gap: .45rem; padding-top: 2px; font-size: .8125rem; font-weight: 500; color: var(--m-muted); }
.menu-tel a { text-decoration: none; color: var(--m-ink); }

/* ---------- Dedication certificate ---------- */
.cert { display: grid; justify-items: center; gap: .6rem; margin-top: 14px; }
.cert-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.cert-actions .btn svg { width: 18px; height: 18px; }
.cert-actions .btn:hover svg { transform: none; }
.cert-note { font-size: var(--fs-xs); color: var(--muted); max-width: 40ch; line-height: 1.55; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 28px; inset-inline-start: 50%; transform: translate(50%, 20px) scale(.9); z-index: 60; padding: .75rem 1.4rem; background: #4E5A40; color: #fff; border-radius: 999px; font-weight: 600; opacity: 0; pointer-events: none; box-shadow: 8px 10px 22px rgba(40, 50, 30, .35), inset 2px 2px 4px rgba(255, 255, 255, .3), inset -3px -3px 6px rgba(0, 0, 0, .3); transition: opacity .3s, transform .5s var(--spring); }
.toast.is-on { opacity: 1; transform: translate(50%, 0) scale(1); }
@media (max-width: 767px) { .toast { bottom: calc(var(--dock-h) + var(--dock-gap) + var(--sp-4) + env(safe-area-inset-bottom)); } }

/* ---------- Reveal: clay "plops" into place ---------- */
html.motion.js .reveal { opacity: 0; transform: translateY(32px) scale(.96); transition: opacity .9s var(--ease), transform 1s var(--spring); }
html.motion.js .reveal.is-in { opacity: 1; transform: none; }
html.motion.js .tier.reveal.is-in:has(.tier-input:checked) { transform: translateY(2px) scale(.99); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .clay:hover .clay-art, .act:hover .act-badge .clay-art, .btn:hover, .tier:hover, .icon-btn:hover, .copy:hover { transform: none; }
  .royal-frame, .royal-glint i { animation: none !important; }
}

/* ---------- Forced colors ---------- */
@media (forced-colors: active) {
  .clay, .btn, .tag, .eyebrow, .opt-body, .icon-btn, .copy, .menu-dialog, .menu-inner ul a, .to-top { border: 1px solid CanvasText; }
  .lux { background: none !important; color: CanvasText !important; -webkit-text-fill-color: CanvasText !important; -webkit-text-stroke: 0 !important; filter: none !important; }
  .lux-wrap::after { display: none !important; }
  .lux-wrap::before, .hero-halo, .hero-rail, .hero-lede::before { display: none !important; }
  .tier:has(.tier-input:checked), .opt input:checked + .opt-body { outline: 3px solid Highlight; }
  .royal-frame, .royal-glint, .royal-corner, .tier-royal::after, .opt-royal .opt-body::before { display: none !important; }
  .tier-royal { border-width: 3px; border-style: double; }
  .royal-crown, .opt-crown { filter: none; }
}

/* ---------- Secondary pages: accessibility statement, privacy policy ---------- */
.doc-page .site-header { position: sticky; top: 0; }
.doc-page .site-header .bar { margin-inline: auto; }
.doc-back svg { width: 18px; height: 18px; transform: scaleX(-1); }
.doc-back:hover svg { transform: scaleX(-1) translateX(-3px); }
.doc-main { padding-block: clamp(40px, 6vw, 88px) var(--sec); text-align: center; }
.doc { max-width: calc(860px + 2 * var(--gutter)); }
.doc-head { display: grid; justify-items: center; margin-bottom: clamp(32px, 4vw, 56px); }
.doc-body { padding: clamp(28px, 4vw, 56px) clamp(22px, 5vw, 64px); text-align: start; }
.doc-body h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.2; margin: 2.2rem 0 .8rem; color: var(--ink); }
.doc-body p + p { margin-top: .9rem; }
.doc-lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); line-height: 1.8; }
.doc-body ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.doc-body li { position: relative; padding-inline-start: 1.4rem; }
.doc-body li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-solid); box-shadow: inset 1px 1px 1px rgba(255, 214, 180, .6); }
.doc-body a { color: var(--accent); font-weight: 500; }
.doc-date { margin-top: 2.4rem !important; padding-top: 1.2rem; font-size: var(--fs-small); color: var(--muted); border-top: 1px solid var(--line); }
.doc-footer { padding-block: 40px 32px; }
.doc-footer .footer-base { margin-top: 0; }
.doc-footer .footer-base::before { display: none; }
.doc-body a { white-space: nowrap; }
.doc-body ul + p { margin-top: 1.1rem; }