/* ==========================================================================
   Project Heroes First — theme styles (design handoff v2: sand / camo / gold)
   Tokens → base → utilities → header → intro → heroes → sections → cards →
   forms → footer → motion
   ========================================================================== */

:root {
	/* Dark neutral grounds (no pure black). The three ribbon colors are the
	   accents, used evenly: red = fire, green = military, blue = law enforcement. */
	--deep: #17191C;
	--od: #2B2E33;
	--od-link: #E2C46A;
	--field: #5F7F3A;
	--field-btn: #4A6530;
	--light-green: #9DBF66;
	--blue: #2F6DB0;
	--blue-2: #1E4D7B;
	--red: #C0332D;
	--red-2: #C9372F;
	--sand: #1E2024;
	--sand-2: #23262A;
	--card: #2A2D32;
	--card-2: #26292D;
	--tan: #3A3E45;
	--input-border: #4A4F57;
	--ink: #F1EFEA;
	--ink-dark: #16181A;
	--muted: #B4B8BF;
	--muted-2: #C9CCD1;
	--light: #E6E8EB;
	--light-2: #C3C7CD;
	--gold: #F7CD4A;
	--gold-edge: #7A5A1E;
	--night: #111214;
	--gold-grad: linear-gradient(135deg, #9E7425 0%, #F4D27A 22%, #FFF6CF 34%, #D9A93A 52%, #B8892E 66%, #F7DC8A 84%, #A87C28 100%);
	--gold-grad-h: linear-gradient(90deg, #9E7425 0%, #F4D27A 22%, #FFF6CF 34%, #D9A93A 52%, #B8892E 66%, #F7DC8A 84%, #A87C28 100%);
	--steel-grad-h: linear-gradient(90deg, #16181B 0%, #4C5159 22%, #9AA0A9 34%, #2A2D33 52%, #1B1D21 66%, #6A707A 84%, #121417 100%); /* the gold seam, in black steel */
	--gold-grad-v: linear-gradient(180deg, #9E7425 0%, #F4D27A 22%, #FFF6CF 34%, #D9A93A 52%, #B8892E 66%, #F7DC8A 84%, #A87C28 100%);

	--display: 'Black Ops One', 'Big Shoulders Display', Impact, sans-serif;
	--body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--wrap: 1280px;
	--wrap-wide: 1560px;
	--gutter: clamp(16px, 4vw, 40px);
	--gutter-wide: clamp(20px, 4vw, 64px);
	--radius: 2px;
	--ease-out: cubic-bezier(.2, .8, .2, 1);
	--ease-in-out: cubic-bezier(.7, 0, .3, 1);

	--topo: url('../design/img/topo.webp'); /* tactical contour map, seamless tile (generated, no license) */
	--topo-size: 1200px;
	--tricolor: var(--gold-grad-h); /* was red | green | blue; gold everywhere since 8 Oct */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sand); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--od-link); }
a:hover { color: #fff; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 1; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid #D9A93A; outline-offset: 3px; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; background: #fff; color: var(--ink-dark); padding: 10px 14px; border-radius: var(--radius); }
.skip-link:focus { top: 8px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--wide { width: min(var(--wrap-wide), 100% - 2 * var(--gutter-wide)); }

/* ---------- Utilities ---------- */
.gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gold-bar { display: inline-block; width: 36px; height: 3px; background: var(--gold-grad); flex: none; }
.eyebrow { margin: 0 0 18px; font-weight: 600; font-size: clamp(15px, 1.3vw, 18px); display: flex; align-items: center; gap: 12px; }
.kicker { margin: 0 0 18px; font-weight: 600; font-size: 16px; }
.kicker--heading { margin: 0 0 14px; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(22px, 2.2vw, 32px); line-height: 1; letter-spacing: .02em; }
.kicker--caps { margin: 0 0 8px; font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--od-link); }
.seam-b { border-style: solid; border-width: 0 0 6px; border-image: var(--gold-grad-h) 1; }
.seam-tb { border-style: solid; border-width: 6px 0; border-image: var(--gold-grad-h) 1; }
.seam-tb--thin { border-width: 4px 0; }
.rule-tricolor { border-style: solid; border-width: 0 0 4px; border-image: var(--tricolor) 1; }
.sep-t { border-top: 4px solid; border-image: var(--gold-grad-h) 1; }
.bg-sand { background-color: var(--sand); background-image: radial-gradient(120% 80% at 50% 0%, #2A2D3299 0%, #1E202400 60%), var(--topo); background-size: 100% 100%, var(--topo-size); background-repeat: no-repeat, repeat; color: var(--ink); }
.bg-steel { background: #1b1c1e var(--steel-bg, url('../design/img/program-bg.jpg')) top center / 100% auto repeat-y; color: var(--ink); }
.bg-emblems { color: var(--ink); background-color: #0b0d12; background-image: linear-gradient(180deg, #0b0d1200 0%, #0b0d1200 24vw, #0b0d12 38vw), url('../design/img/story-bg.jpg'); background-size: 100% 100%, 100% auto; background-position: top center; background-repeat: no-repeat; }
.bg-board { color: var(--ink); background-color: #0f1317; background-image: linear-gradient(180deg, #0f131700 0%, #0f131700 24vw, #0f1317 38vw), url('../design/img/board-bg.jpg'); background-size: 100% 100%, 100% auto; background-position: top center; background-repeat: no-repeat; }
.bg-advisory { color: var(--ink); background-color: #0e0f11; background-image: linear-gradient(180deg, #0e0f1100 0%, #0e0f1100 22vw, #0e0f11 33vw), url('../design/img/advisory-bg.jpg'); background-size: 100% 100%, 100% auto; background-position: top center; background-repeat: no-repeat; }
.bg-soldier { color: var(--ink); background-color: #0d0e10; background-image: linear-gradient(180deg, #0d0e1000 0%, #0d0e1000 22vw, #0d0e10 34vw), url('../design/img/recognition-bg.jpg'); background-size: 100% 100%, 100% auto; background-position: top center; background-repeat: no-repeat; }
.bg-marble { background: #121316 url('../design/img/marble-bg.jpg') top center / 100% auto repeat-y; color: var(--ink); }
.bg-responders { color: #fff; background: #07090c url('../design/img/responders-bg.jpg') center / cover no-repeat; }
.bg-contour { background: #0c0d10 url('../design/img/contour-gold-bg.jpg') top center / 100% auto repeat-y; color: var(--ink); }
.bg-slate { background: #0e1013 var(--slate-bg, url('../design/img/ribbons-bg.jpg')) top center / 100% auto repeat-y; color: #fff; }
.bg-marpat { background: linear-gradient(180deg, #161a12a6, #161a12bf), url('../design/img/marpat.png') 0 0 / 640px repeat; color: #fff; text-shadow: 0 1px 2px #000a; }
.bg-marpat .gold, .bg-slate .gold { text-shadow: none; filter: drop-shadow(0 1px 2px #000a); }
.bg-marpat .card, .bg-marpat .split, .bg-marpat .member, .bg-slate .card, .bg-slate .member, .bg-steel .card, .bg-steel .member { text-shadow: none; }
.bg-deep { background: var(--deep) var(--topo) 0 0 / var(--topo-size) repeat; color: #fff; }
/* OD green band that breaks up the charcoal (client request, 8 Oct). */
.bg-wood { background: #333C26 linear-gradient(180deg, #3B452C 0%, #2D3522 100%); color: #fff; }
.bg-wood--dark { background: var(--deep); } /* ribbons band: solid, no contour map */
.section { padding: clamp(72px, 9vw, 120px) 0; }
.section--last { padding-bottom: clamp(96px, 12vw, 150px); }
.h-xl { font-size: clamp(31.1px, 3.7vw, 50.3px); }
.h-lg { font-size: clamp(28px, 3vw, 44px); line-height: .95; }
.h-md { font-size: clamp(25.2px, 2.7vw, 35.5px); line-height: .95; }
.h-card { font-size: clamp(21px, 1.8vw, 26px); }
.text-light { color: var(--light); }
.text-muted { color: var(--muted); }
.lead-p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.65; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.watermark { position: absolute; bottom: -.18em; font-family: var(--display); text-transform: uppercase; font-size: clamp(88px, 14vw, 222px); line-height: 1; color: #ffffff0d; white-space: nowrap; pointer-events: none; user-select: none; }
.watermark--left { left: -2vw; }
.watermark--right { right: -2vw; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--display); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius); border: 0; cursor: pointer; transition: all .2s; line-height: 1.2; }
.btn--gold { font-size: 16.3px; color: var(--ink-dark); background: var(--gold-grad); padding: 16px 30px; box-shadow: 0 2px 0 var(--gold-edge), 0 6px 14px #0006; }
.btn--gold:hover { background: #fff; color: var(--ink-dark); transform: translateY(-2px); }
.btn--gold.btn--sm { font-size: 13.3px; padding: 12px 24px; }
.btn--gold.btn--wide { padding: 16px 38px; box-shadow: 0 10px 30px #000a; }
.btn--green { font-size: 14.8px; color: #fff; background: var(--field-btn); padding: 15px 28px; }
.btn--green:hover { background: var(--field); color: #fff; transform: translateY(-2px); }
.btn--outline { font-size: 14.1px; color: #fff; padding: 12px 24px; border: 2px solid #ffffffb3; }
.btn--outline:hover { background: #fff; color: var(--deep); border-color: #fff; }
.btn--outline.btn--lg { font-size: 16.3px; padding: 14px 28px; }
.btn--outline.btn--lg:hover { border-color: #fff; background: #ffffff1a; color: #fff; }
.btn--goldline { font-size: 16.3px; padding: 14px 34px; border: 2px solid #E3B23C; border-image: var(--gold-grad) 1; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn--goldline:hover { -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink-dark); }
.link-more { font-weight: 700; font-size: 16px; color: var(--od-link); text-decoration: none; }
.link-more:hover { color: #fff; text-decoration: underline; }
.link-gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; text-decoration: none; }

/* ---------- Header ---------- */
/* A solid header bar with a rule under it; the nav sits on the line of the ribbons' tails. */
.site-header { position: relative; z-index: 20; background: var(--deep); color: #fff; border-bottom: 4px solid; border-image: var(--gold-grad-h) 1; }
.site-header__row { display: flex; align-items: flex-end; gap: 24px; padding: 26px 0 8px; }
.brand { display: block; flex: none; margin-right: auto; }
.brand__logo { height: clamp(48px, 4.4vw, 68px); width: auto; filter: drop-shadow(0 4px 12px #000a); }
.header__right { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: clamp(12px, 2vw, 28px); }
.social { list-style: none; display: flex; gap: 2px; }
.social--header { padding-right: clamp(12px, 2vw, 28px); border-right: 1px solid #ffffff40; }
.social a { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; opacity: .85; }
.social a:hover { opacity: 1; color: #F4D27A; }
.site-nav { display: flex; align-items: flex-end; gap: clamp(12px, 2vw, 28px); flex-wrap: wrap; justify-content: flex-end; }
.menu { list-style: none; display: flex; gap: clamp(12px, 2vw, 26px); font-weight: 600; font-size: 15px; align-items: flex-end; }
.menu > li { position: relative; }
.menu > li > a { color: #fff; text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
.menu > li > a:hover, .menu > li.current-menu-item > a, .menu > li.current-menu-ancestor > a, .menu > li.current_page_item > a, .menu > li.current_page_ancestor > a { color: #fff; border-image: var(--gold-grad-h) 1; }
.menu .submenu-toggle { display: none; }
.menu .caret { width: 9px; height: 6px; fill: currentColor; }
.sub-menu { list-style: none; position: absolute; top: 100%; left: -16px; padding-top: 10px; min-width: 220px; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; }
.sub-menu__panel, .sub-menu { }
.sub-menu > li:first-child { border-top: 3px solid; border-image: var(--gold-grad-h) 1; }
.sub-menu > li { background: var(--deep); }
.sub-menu > li:first-child { padding-top: 8px; }
.sub-menu > li:last-child { padding-bottom: 8px; box-shadow: 0 18px 40px #0008; }
.sub-menu a { display: block; color: #fff; text-decoration: none; padding: 10px 18px; font-size: 15px; font-weight: 600; }
.sub-menu a:hover { background: var(--od); color: #F7DC8A; }
.menu > li:hover > .sub-menu, .menu > li:focus-within > .sub-menu, .menu > li.is-open > .sub-menu { opacity: 1; visibility: visible; }
.nav-toggle { display: none; }

@media (max-width: 1180px) { .social--header { display: none; } }
@media (max-width: 1080px) {
	.brand__logo { height: clamp(40px, 10vw, 54px); }
	.site-header__row { align-items: center; }
	.header__right { gap: 12px; }
	.site-nav__donate { display: none; }
	.nav-toggle { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; color: #fff; font: 600 14px var(--body); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; padding: 8px 0; }
	.nav-toggle__bars { display: grid; gap: 4px; width: 22px; }
	.nav-toggle__bars i { display: block; height: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
	.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
	.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
	.site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--deep); padding: 8px var(--gutter-wide) 24px; border-top: 3px solid; border-image: var(--gold-grad-h) 1; box-shadow: 0 30px 50px #0008; max-height: calc(100vh - 140px); overflow: auto; }
	.site-nav.is-open { display: flex; }
	.menu { flex-direction: column; align-items: stretch; gap: 0; }
	.menu > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #ffffff14; }
	.menu > li > a { flex: 1; padding: 16px 0; font-size: 17px; border: 0; }
	.menu > li > a .caret { display: none; }
	.menu .submenu-toggle { display: grid; place-items: center; background: none; border: 0; color: #fff; padding: 14px; cursor: pointer; }
	.menu .submenu-toggle svg { transition: transform .15s; }
	.menu .submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
	.sub-menu { position: static; display: none; opacity: 1; visibility: visible; padding: 0 0 10px 14px; min-width: 0; flex-basis: 100%; }
	.sub-menu > li { background: transparent; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
	.sub-menu a { padding: 10px 0; color: #E9ECE0; }
	.sub-menu a:hover { background: none; }
	.menu > li.is-open > .sub-menu { display: block; }
	.site-nav__mobile-actions { display: flex; gap: 12px; margin-top: 18px; }
	.site-nav__mobile-actions .btn { flex: 1; }
}
@media (min-width: 1081px) { .site-nav__mobile-actions { display: none; } }

/* ---------- Opening animation (home) ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: var(--deep); display: grid; place-items: center; align-content: center; gap: 20px; }
html.no-intro .intro, .intro.is-done { display: none; }
.intro__logo { width: min(62vw, 560px); height: auto; opacity: 0; }
.intro__line { margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: clamp(11.8px, 1.2vw, 16.3px); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; }
.intro__skip { position: absolute; right: 24px; bottom: 24px; background: none; border: 1px solid #ffffff55; color: #fff; font: 600 14px var(--body); padding: 8px 16px; border-radius: var(--radius); cursor: pointer; }
.intro__skip:hover { border-color: #fff; }
/* CSS fallback so the overlay never traps anyone if JS does not run. */
.intro { animation: intro-exit-fallback .7s var(--ease-in-out) 3.4s both; }
.intro.has-js { animation: none; }
@keyframes intro-exit-fallback { to { transform: translateY(-100%); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ---------- Heroes ---------- */
.hero, .hero2 { position: relative; display: flex; align-items: flex-end; background: var(--deep); color: #fff; overflow: hidden; }
.hero { min-height: min(calc(100vh - 170px), 780px); }
.hero2 { min-height: clamp(340px, 32vw, 480px); }
.hero__media, .hero2__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, #15171AEB 0%, #15171AA6 45%, #15171A26 80%), linear-gradient(0deg, #15171AD9 0%, #15171A00 45%); }
.hero2__shade { position: absolute; inset: 0; background: linear-gradient(90deg, #15171AF2 0%, #15171AB3 50%, #15171A40 100%), linear-gradient(0deg, #15171ACC, #15171A00 50%); }
.hero2--night { background: var(--night); }
.hero2--night .hero2__shade { background: linear-gradient(90deg, #111214F2 0%, #111214A6 50%, #11121426 100%), linear-gradient(0deg, #111214CC, #11121400 50%); }
.hero__inner { position: relative; width: 100%; max-width: var(--wrap-wide); margin: 0 auto; padding: clamp(72px, 8vw, 120px) var(--gutter-wide) clamp(48px, 7vw, 88px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 40px clamp(40px, 5vw, 96px); }
.hero__copy { flex: 1 1 600px; max-width: 880px; }
.hero__title { font-size: clamp(41.4px, 6.2vw, 109.5px); line-height: .95; letter-spacing: -.005em; text-wrap: balance; }
.hero__text { margin: 28px 0 0; max-width: 520px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--light); }
.hero__actions { margin-top: 34px; }
.mission-card { flex: 0 1 500px; padding: clamp(28px, 3vw, 40px); background: #15171ACC; backdrop-filter: blur(6px); border-top: 5px solid; border-image: var(--gold-grad-h) 1; }
.mission-card h2 { margin: 0 0 14px; font-size: clamp(22.2px, 1.9vw, 29.6px); line-height: .95; letter-spacing: .01em; }
.mission-card p { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.5; font-weight: 500; color: #fff; text-wrap: pretty; }
.hero2__inner { position: relative; width: 100%; max-width: var(--wrap-wide); margin: 0 auto; padding: clamp(80px, 8vw, 120px) var(--gutter-wide) clamp(48px, 6vw, 80px); }
.hero2__inner--tall { padding-top: clamp(88px, 9vw, 132px); padding-bottom: clamp(56px, 7vw, 96px); }
.hero2__title { max-width: 900px; font-size: clamp(40px, 5.6vw, 92px); line-height: .95; text-wrap: balance; }
.hero2__text { margin: 24px 0 0; max-width: 640px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--light); }
.hero2__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(32px, 5vw, 96px); align-items: end; }
.hero2__grid .lead-p { font-size: clamp(17px, 1.35vw, 19px); color: var(--light); }

/* ---------- Home: hero photos ---------- */
.hero__slides { position: absolute; inset: 0; }
.hero__slides .hero__media { opacity: 0; transform: scale(1.04); transition: opacity 1.4s ease, transform 8s linear; }
.hero__slides .hero__media.is-active { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .hero__slides .hero__media { transition: none; transform: none; } }

/* ---------- Home: YouTube strip ---------- */
.seam-steel { height: 6px; background: var(--steel-grad-h); }
.yt-strip { background: var(--deep) var(--topo) 0 0 / var(--topo-size) repeat; color: #fff; padding: clamp(36px, 5vw, 64px) 0; }
.yt-strip__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.yt-strip__grid--link { grid-template-columns: 1fr; }
.yt-strip__grid--link .yt-strip__copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; }
.yt-strip__copy h2 { margin: 0 0 12px; }
.yt-strip__grid--link .yt-strip__copy h2 { margin: 0; }
.yt-strip__copy p { font-size: 17px; color: var(--light-2); max-width: 520px; }
.yt-strip__copy .link-more { display: inline-block; margin-top: 16px; }
.yt-strip__grid--link .yt-strip__copy .link-more { margin: 0; }
.yt { position: relative; aspect-ratio: 16 / 9; background: #0d0e10; box-shadow: 0 24px 60px -24px #000; border-top: 4px solid; border-image: var(--tricolor) 1; }
.yt__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background-color: #0d0e10; background-image: var(--yt-thumb); background-position: center; background-size: cover; background-repeat: no-repeat; display: grid; place-items: center; }
.yt__play::after { content: ""; position: absolute; inset: 0; background: #0000002e; transition: background .2s; }
.yt__play:hover::after { background: #00000010; }
.yt__icon { position: relative; z-index: 1; transition: transform .2s; filter: drop-shadow(0 6px 18px #0009); }
.yt__play:hover .yt__icon { transform: scale(1.08); }
.yt__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt--short { aspect-ratio: 9 / 16; width: min(100%, 340px); margin-inline: auto; }

/* Text beside a video (Events page). */
.video-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.video-split--short { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.video-split__copy h2 { margin: 0 0 20px; text-wrap: balance; }
.video-split__copy .prose { font-size: clamp(17px, 1.4vw, 20px); max-width: 560px; }
@media (max-width: 860px) { .video-split, .video-split--short { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .yt-strip__grid { grid-template-columns: 1fr; } }

/* ---------- Home: tiles ---------- */
.tiles { background: var(--deep); padding: 0; }
.tiles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 4px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 4.6; padding: 24px; color: #fff; text-decoration: none; overflow: hidden; background: var(--od) var(--tile-img, none) center / cover no-repeat; transition: filter .3s; }
.tile:hover { filter: brightness(1.12); color: #fff; }
.tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #121416C7 0%, #12141680 38%, #12141600 65%); }
.tile > * { position: relative; }
.tile__bar { width: 32px; height: 3px; margin-bottom: 14px; background: var(--gold-grad); }
.tile__bar--gold { background: var(--gold-grad); }
.tile__title { font-family: var(--display); text-transform: uppercase; font-size: clamp(22.2px, 1.9vw, 28.1px); line-height: .95; }
.tile__sub { margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--light); }
.tile__go { margin-top: 14px; font-weight: 700; font-size: 14px; }
.tile--43 { aspect-ratio: 4 / 3; }

@media (max-width: 640px) { .tiles__grid { grid-template-columns: repeat(2, 1fr); } .tile { padding: 16px; }  }

/* ---------- Home: who we serve ---------- */
.serve { color: var(--ink); background-color: #131312; background-image: linear-gradient(180deg, #13131200 0%, #13131200 26vw, #131312 37vw), var(--serve-bg, url('../design/img/serve-bg.jpg')); background-size: 100% 100%, 100% auto; background-position: top center; background-repeat: no-repeat; }
.serve-card { display: flex; flex-direction: column; background: var(--card); box-shadow: 0 1px 0 var(--tan); overflow: hidden; }
.serve-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; border-bottom: 6px solid; border-image: var(--gold-grad-h) 1; transition: transform .5s var(--ease-out); }
.serve-card:hover img { transform: scale(1.03); }
.serve-card__body { position: relative; padding: 24px 26px 28px; background: var(--card); }
.serve-card__body h3 { margin: 0 0 10px; font-size: clamp(22px, 1.9vw, 28px); }
.serve-card__body p { font-size: 16.5px; color: var(--muted); }
@media (max-width: 640px) { .serve-card img { aspect-ratio: 16 / 11; } }

/* ---------- Home: heroes in action ---------- */
.gallery { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gallery li { overflow: hidden; background: var(--card); }
.gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease-out); }
.gallery li:hover img { transform: scale(1.04); }
.gallery--1 { grid-template-columns: 1fr; }
.gallery--1 img { aspect-ratio: 16 / 7; }
.gallery--2, .gallery--4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .gallery { grid-template-columns: repeat(2, 1fr); } .gallery--1 { grid-template-columns: 1fr; } }

/* ---------- Home: about band ---------- */
.about-band { position: relative; overflow: hidden; padding: clamp(80px, 10vw, 140px) 0; }
.about-band__grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: start; }
.about-band h2 { font-size: clamp(31.1px, 3.7vw, 53.3px); text-wrap: balance; }
.about-band__mission { margin: 0 0 22px; padding-left: 18px; border-left: 4px solid; border-image: var(--gold-grad-v) 1; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; font-weight: 500; color: #fff; text-wrap: pretty; }
.about-band__text { font-size: clamp(17px, 1.4vw, 20px); color: var(--light); }
.about-band__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Memorial Hero Ribbons (home) ---------- */
.ribbons { padding: clamp(72px, 9vw, 120px) 0; color: #fff; background: #0e1013 var(--ribbons-bg, url('../design/img/ribbons-bg.jpg')) top center / 100% auto repeat-y; }
.ribbons__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(36px, 5vw, 80px); align-items: center; }
.ribbons__art { display: block; width: min(100%, 400px); height: auto; margin: 0 0 28px -8px; filter: drop-shadow(0 18px 30px #000a); }
.ribbons h2 { margin: 0 0 12px; text-wrap: balance; }
.ribbons__lead { display: inline; margin: 0; font-weight: 700; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.4; }
.ribbons__text { margin: 18px 0 0; font-size: clamp(17px, 1.3vw, 19px); color: var(--light); max-width: 560px; }
.ribbons__unseen { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ribbons__unseen li { --rc: var(--red-2); position: relative; padding: 16px 20px 16px 34px; background: #0000004d; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; color: #fff; }
.ribbons__unseen li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: linear-gradient(90deg, var(--rc) 0 30%, #0b0b0b 30% 70%, var(--rc) 70%); }
.ribbons__unseen li:nth-child(4n+2) { --rc: var(--field); }
.ribbons__unseen li:nth-child(4n+3) { --rc: var(--blue); }
.ribbons__unseen li:nth-child(4n+4) { --rc: #D9A93A; }
.ribbons__stands { margin-top: 32px; }
.ribbons__stands .kicker--caps { color: transparent; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; margin-bottom: 14px; }
.ribbons__stands ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ribbons__stands li { padding: 9px 14px; border: 1px solid #ffffff40; border-radius: var(--radius); font-weight: 600; font-size: 15px; color: var(--light); }
.ribbons__crisis { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid #ffffff26; font-size: 15px; color: var(--light-2); }

/* ---------- Cards ---------- */
.card { background: var(--card); box-shadow: 0 1px 0 var(--tan); }
.card--hover { transition: transform .25s, box-shadow .25s; }
.card--hover:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -20px #15171A55; }
.pillar { padding: 36px 32px 40px; border-top: 6px solid; border-image: var(--gold-grad-h) 1; }
.pillar h3 { margin: 0 0 14px; font-size: clamp(20.7px, 1.8vw, 25.2px); color: var(--ink); }
.pillar p { font-size: 17px; color: var(--muted); }
.pillar--photo { padding: 0; border-top: 0; display: flex; flex-direction: column; }
.pillar--photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 25%; border-bottom: 6px solid; border-image: var(--gold-grad-h) 1; }
.pillar--photo .pillar__body { padding: 28px 28px 34px; }
.pillar--photo h3 { font-size: clamp(21px, 1.8vw, 26px); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.grid-3--320 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
.section-head p { font-size: 18px; color: var(--muted-2); max-width: 620px; }
.section-head--row { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: end; margin-bottom: 36px; }
.section-head h2 { color: var(--ink); }
.paradigm { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(24px, 3vw, 40px); }
.paradigm h3 { margin: 0 0 14px; font-size: clamp(23.7px, 2.4vw, 35.5px); line-height: .95; color: var(--ink); }
.paradigm p { font-size: 18px; color: var(--muted); max-width: 480px; }
.paradigm .btn { margin-top: 28px; }
.paradigm img { width: 100%; max-width: 560px; justify-self: end; aspect-ratio: 1 / 1; object-fit: cover; background: #000; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.split img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.split--capped img { max-height: 520px; min-height: 300px; }
.split__body { padding: clamp(28px, 4vw, 56px); align-self: center; }
.split__body .rule { width: 48px; height: 4px; margin-bottom: 20px; background: var(--gold-grad); }
.split__body h2 { margin: 0 0 16px; font-size: clamp(28px, 3vw, 44px); line-height: .95; color: var(--ink); }
.split__body p { font-size: 18px; color: var(--muted); }
.split__body p + p { margin-top: 16px; }
.split__body .btn { margin-top: 28px; }
.stack { display: grid; gap: 20px; }
.usep { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); background: var(--card); color: #fff; align-items: center; }
.usep img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.usep__body { padding: clamp(32px, 4vw, 56px); }
.usep__body .kicker { margin-bottom: 12px; font-size: 15px; }
.usep__body h2 { margin: 0 0 16px; font-size: clamp(23.7px, 2.4vw, 34px); line-height: .95; }
.usep__body p { margin: 0 0 28px; font-size: 17px; color: var(--light-2); }
.rule-top { border-top: 1px solid var(--tan); }

/* ---------- Home: impact ---------- */
.impact { padding: clamp(96px, 12vw, 168px) 0 clamp(80px, 10vw, 136px); background: linear-gradient(180deg, #161a12a6, #161a12bf), url('../design/img/marpat.png') 0 0 / 640px repeat; text-shadow: 0 1px 2px #000a; }
.impact .gold { text-shadow: none; filter: drop-shadow(0 1px 2px #000a); }
.impact h2 { margin: 0 0 clamp(48px, 6vw, 80px); }
.impact__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 48px 40px; }
.stat { border-top: 3px solid; border-image: var(--gold-grad-h) 1; padding-top: 22px; }
.stat--gold { border-image: var(--gold-grad-h) 1; }
.stat strong { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(34.7px, 3vw, 49.6px); line-height: .95; white-space: nowrap; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat p { margin: 18px 0 0; font-size: 17px; line-height: 1.5; color: var(--light); max-width: 280px; }
.impact__goal { margin: clamp(56px, 7vw, 88px) 0 0; padding-top: 28px; border-top: 1px solid #ffffff26; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; max-width: 760px; }

/* ---------- Events ---------- */
.event-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); background: var(--card-2); }
.event-card--sand { background: var(--card); box-shadow: 0 1px 0 var(--tan); }
.event-card__media { position: relative; display: grid; place-items: center; min-height: 300px; background: #fff; padding: clamp(28px, 4vw, 56px); text-decoration: none; }
.event-card__media img { width: 100%; max-width: 420px; height: auto; }
.event-card__media--photo { padding: 0; }
.event-card__media--flyer { padding: 0; background: #0e1013 url('../design/img/ribbons-bg.jpg') right top / 200% auto no-repeat; }
.event-card__media--flyer img { width: 100%; height: 100%; max-width: none; max-height: 620px; object-fit: contain; }
.event-card--sand .event-card__media--flyer img { max-height: 680px; }
.event-card__media--dark { background: #0e1013 url('../design/img/ribbons-bg.jpg') right top / 200% auto no-repeat; }
.event-card__media--photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.event-card__media .event-card__fallback { width: min(60%, 260px); height: auto; filter: drop-shadow(0 4px 12px #0006); }
.event-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.event-card__actions .btn { margin: 0; }
.event-card__date { position: absolute; top: 0; left: 24px; background: var(--red); color: #fff; padding: 14px 18px 12px; text-align: center; font-family: var(--display); text-transform: uppercase; line-height: 1; }
.event-card__date b { display: block; font-weight: 400; font-size: 48px; }
.event-card__date span { font-size: 18px; letter-spacing: .06em; }
.event-card__body { padding: clamp(28px, 4vw, 52px); align-self: center; }
.event-card__body h3, .event-card__body h2 { margin: 0 0 12px; font-size: clamp(26.6px, 2.5vw, 38.5px); line-height: .95; color: var(--ink); }
.event-card__body h3 a, .event-card__body h2 a { color: var(--ink); text-decoration: none; }
.event-card__body h3 a:hover, .event-card__body h2 a:hover { color: var(--red); }
.event-card__meta { margin: 0 0 18px; font-weight: 600; font-size: 15px; line-height: 1.6; color: var(--od-link); }
.event-card__text { margin: 0 0 28px; font-size: 17px; color: var(--muted); max-width: 520px; }
.event-card__dl { margin: 0 0 22px; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 17px; line-height: 1.5; }
.event-card__dl dt { font-weight: 700; color: var(--od-link); }
.event-card__dl dd { margin: 0; color: var(--ink); }
.event-card__lead { margin: 0 0 8px; font-size: 18px; line-height: 1.5; font-weight: 700; color: var(--ink); }
.event-single { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 48px; }
.event-single__side { background: var(--card); padding: 26px; box-shadow: 0 1px 0 var(--tan); align-self: start; }
@media (max-width: 900px) { .event-single { grid-template-columns: 1fr; } }

/* ---------- Partners ---------- */
.logo-row { list-style: none; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1150px; }
.logo-row li { flex: 0 0 180px; background: #fff; border: 1px solid var(--tan); display: grid; place-items: center; padding: 24px; height: 132px; transition: background .2s; }
.logo-row li:hover { background: #F6F7F1; }
.logo-row img { max-width: 132px; max-height: 80px; width: auto; height: auto; object-fit: contain; }
.partner-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.partner-grid li { display: flex; }
.partner { flex: 1; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tan); text-decoration: none; color: var(--ink-dark); transition: transform .2s, box-shadow .2s; }
a.partner:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px #000a; color: var(--ink-dark); }
.partner__well { height: 150px; display: grid; place-items: center; padding: 20px; }
.partner__well img { max-width: 100%; max-height: 108px; width: auto; height: auto; object-fit: contain; }
.partner__nologo { font-family: var(--display); text-transform: uppercase; font-size: 20px; line-height: 1.05; color: var(--ink-dark); text-align: center; }
.partner__bar { margin-top: auto; height: 64px; padding: 0 16px; border-top: 3px solid; border-image: var(--gold-grad-h) 1; background: var(--card); color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.partner__name { font-weight: 700; font-size: 15px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.partner__name--md { font-size: 13px; }
.partner__name--sm { font-size: 12px; }
.partner__arrow { font-weight: 700; color: var(--od-link); }
.partner-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; }
.partner-cta h2 { max-width: 760px; font-size: clamp(31px, 3.7vw, 52px); text-wrap: balance; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; background: var(--night) var(--cta-img, url('../design/img/cta-heroes-sunset.jpg')) center 35% / cover no-repeat; color: #fff; min-height: clamp(560px, 56vw, 860px); display: flex; align-items: flex-end; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #11121466 0%, #11121400 28%, #11121400 48%, #111214cc 74%, #111214f2 100%); }
.cta-band__inner { position: relative; width: 100%; padding-bottom: clamp(48px, 6vw, 88px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.cta-band__bar { width: 64px; height: 3px; background: var(--gold-grad); }
.cta-band h2 { max-width: 900px; font-size: clamp(34px, 4.6vw, 66px); text-wrap: balance; text-shadow: 0 4px 24px #000; }
.cta-band h2 .gold { text-shadow: none; filter: drop-shadow(0 4px 14px #000); }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ---------- About / Mission / Programs ---------- */
.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; }
.story-grid img { width: 100%; max-width: 520px; justify-self: end; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-bottom: 5px solid; border-image: var(--gold-grad-h) 1; }
.story-grid--award img { max-width: 460px; border-bottom: 5px solid; border-image: var(--gold-grad-h) 1; }
.awards { list-style: none; display: grid; gap: 14px; }
.awards li { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 18px 22px; background: #ffffff0a; border-left: 4px solid; border-image: var(--gold-grad-v) 1; }
.awards strong { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.1; }
.awards span { font-size: 16px; color: var(--light-2); }
.story-grid__quote { font-family: var(--display); text-transform: uppercase; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.15; text-wrap: balance; }
.mv-card { background: #1A1D16D9; padding: clamp(32px, 4vw, 52px); border-top: 5px solid; border-image: var(--gold-grad-h) 1; }
.mv-card h2 { margin: 0 0 18px; font-size: clamp(26px, 2.4vw, 36px); line-height: .95; }
.mv-card p { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.5; font-weight: 500; text-wrap: pretty; }
.def-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 80px); }
.def-grid > p { font-size: clamp(19px, 1.6vw, 23px); color: var(--light); text-wrap: pretty; }
.gold-rule-left { align-self: center; border-left: 3px solid; border-image: var(--gold-grad-v) 1; padding-left: clamp(20px, 3vw, 40px); }
.gold-rule-left h2 { margin: 0 0 16px; font-size: clamp(28px, 3vw, 44px); }
.gold-rule-left .strong { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; font-weight: 600; }
.gold-rule-left p + p { margin-top: 16px; }
.gold-rule-left .text-light { font-size: 17px; }
.way { background: #15171AF2; display: flex; flex-direction: column; }
.way img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 25%; }
.way img.way__img--top { object-position: center top; }
.way__body { padding: 28px 28px 32px; border-top: 3px solid; border-image: var(--gold-grad-h) 1; display: flex; flex-direction: column; flex: 1; }
.way__body h3 { margin: 0 0 12px; font-size: clamp(21px, 1.8vw, 26px); }
.way__front { margin: 0 0 14px; font-size: 17px; line-height: 1.55; font-weight: 600; }
.way__back { margin: 0 0 24px; font-size: 16px; color: var(--light-2); }
.way .btn { margin-top: auto; align-self: flex-start; padding: 12px 22px; }

/* ---------- Leadership ---------- */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: 20px; }
.person { display: flex; flex-wrap: wrap; background: var(--card); box-shadow: 0 1px 0 var(--tan); border-top: 5px solid; border-image: var(--gold-grad-h) 1; }
.person--gold { border-image: var(--gold-grad-h) 1; }
.person img { flex: 1 1 200px; min-width: 0; width: auto; max-width: 100%; min-height: 280px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.person__body { flex: 999 1 300px; padding: clamp(24px, 3vw, 36px); }
.person__body h3 { margin: 0 0 6px; font-size: clamp(21px, 1.8vw, 26px); color: var(--ink); }
.person__role { margin: 0 0 16px; font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--od-link); }
.person__bio { font-size: 16px; color: var(--muted); }
.advisory { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.advisor { background: var(--od); display: flex; flex-direction: column; }
.advisor img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 20%; }
.advisor__body { padding: 28px 28px 32px; border-top: 3px solid; border-image: var(--gold-grad-h) 1; }
.advisor__body h3 { margin: 0 0 6px; font-size: clamp(20px, 1.7vw, 24px); }
.advisor__role { margin: 0 0 14px; font-weight: 700; font-size: 14px; }
.advisor__bio { font-size: 16px; color: var(--light); }

/* Leadership as a photo grid: name and role under each photo, bio on request. */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 295px)); gap: 20px; align-items: stretch; justify-content: center; }
.team-title { margin-bottom: 36px; text-align: center; }
.member { background: var(--card); box-shadow: 0 1px 0 var(--tan); display: flex; flex-direction: column; }
.member img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-bottom: 5px solid; border-image: var(--gold-grad-h) 1; }
.member--gold img { border-bottom: 5px solid; border-image: var(--gold-grad-h) 1; }
.member__cap { padding: 20px 18px 22px; flex: 1; display: flex; flex-direction: column; }
.member__cap h3 { margin: 0 0 6px; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.05; }
.member__cred { display: block; margin-top: 4px; font-family: var(--body); text-transform: none; font-size: 14px; font-weight: 600; color: var(--muted); }
.member__role { margin: 0; font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--od-link); }
.member__bio { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--tan); }
.member__role { margin-bottom: 14px; }
.member__bio summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--light); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.member__bio summary::-webkit-details-marker { display: none; }
.member__bio summary::after { content: "+"; font-size: 18px; line-height: 1; color: var(--od-link); }
.member__bio[open] summary::after { content: "–"; }
.member__bio div { margin-top: 10px; font-size: 15.5px; color: var(--muted); }
.member__bio div p + p { margin-top: 10px; }
.bg-deep .member { background: #22252A; }

/* ---------- Forms ---------- */
.form-card { background: var(--card); border-top: 6px solid; border-image: var(--gold-grad-h) 1; padding: clamp(28px, 4vw, 56px); box-shadow: 0 1px 0 var(--tan); display: flex; flex-direction: column; gap: 40px; }
.form-card--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px 20px; padding: clamp(28px, 4vw, 52px); }
.form-card h2 { font-size: clamp(28px, 3vw, 42px); color: var(--ink); }
.form-card--grid h2 { margin: 0 0 10px; font-size: clamp(26px, 2.6vw, 38px); }
.form-card__intro { grid-column: 1 / -1; }
.form-card__intro p { margin: 0 0 8px; font-size: 17px; color: var(--muted); }
.fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px 20px; }
.fieldset legend { padding: 0 0 16px; font-family: var(--display); text-transform: uppercase; font-size: 20px; color: var(--od-link); }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; color: var(--ink); }
.field--wide { grid-column: 1 / -1; }
.field .hint { font-weight: 500; color: var(--muted); }
.field input:not([type="file"]), .field select, .field textarea { width: 100%; padding: 13px 14px; font: 16px var(--body); color: var(--ink); background: #16181B; color-scheme: dark; border: 1px solid var(--input-border); border-radius: var(--radius); }
.field input[type="date"] { padding: 12px 14px; }
.field--checks { margin: 0; padding: 0; border: 0; min-width: 0; }
.field--checks legend { padding: 0 0 8px; font: 700 14px var(--body); color: var(--ink); text-transform: none; display: flex; gap: 8px; flex-wrap: wrap; }
.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.check { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; background: #16181B; border: 1px solid var(--input-border); border-radius: var(--radius); font-weight: 600; font-size: 15px; cursor: pointer; color: var(--ink); }
.field--checks .check input[type="checkbox"] { flex: none; width: 18px; height: 18px; padding: 0; margin: 0; accent-color: #E2C46A; background: none; border: 0; box-shadow: none; }
.check:has(input:checked) { border-color: #E2C46A; background: #E2C46A1a; }
.check:has(input:focus-visible) { outline: 3px solid #D9A93A; outline-offset: 2px; }
.field textarea { line-height: 1.5; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: #E2C46A; box-shadow: 0 0 0 3px #E2C46A40; }
.field input[type="file"] { width: 100%; min-width: 0; padding: 14px; font: 15px var(--body); color: var(--light); background: #16181B; border: 1px dashed #6A6F78; border-radius: var(--radius); }
.form-card .btn--gold { align-self: flex-start; font-size: 16.3px; padding: 17px 36px; box-shadow: 0 2px 0 var(--gold-edge), 0 6px 14px #0004; }
.form-card .btn--gold:hover { filter: brightness(1.08); background: var(--gold-grad); color: var(--ink-dark); }
.form-card__submit { grid-column: 1 / -1; }
.form-privacy { font-size: 13.5px; font-weight: 500; color: var(--muted); grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-done { background: var(--card); border-top: 6px solid; border-image: var(--gold-grad-h) 1; padding: clamp(32px, 5vw, 64px); text-align: center; box-shadow: 0 1px 0 var(--tan); }
.form-done--left { text-align: left; }
.form-done h2 { margin: 0 0 14px; font-size: clamp(28px, 3vw, 42px); color: var(--ink); }
.form-done p { margin: 0 auto; max-width: 520px; font-size: 18px; color: var(--muted); }
.form-done--left p { margin: 0; max-width: none; }
.form-error { background: var(--card); border-top: 6px solid var(--red); padding: 18px 22px; box-shadow: 0 1px 0 var(--tan); margin-bottom: 20px; font-weight: 600; color: var(--red); }
.join-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 80px); }
.form-wrap { max-width: 960px; margin: 0 auto; padding: 0 var(--gutter); }
.contact-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.contact-aside { flex: 1 1 300px; background: var(--deep); color: #fff; padding: clamp(28px, 4vw, 48px); border-top: 5px solid; border-image: var(--gold-grad-h) 1; display: flex; flex-direction: column; gap: 28px; }
.contact-aside h2 { margin: 0 0 10px; font-size: 24px; }
.contact-aside p { font-size: 17px; color: var(--light); }
.contact-aside .kicker--caps { color: transparent; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; margin-bottom: 12px; }
.contact-aside__links { display: flex; flex-direction: column; gap: 10px; font-weight: 600; font-size: 16px; }
.contact-aside__links a { color: #fff; text-decoration: none; }
.contact-aside__links a:hover { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.contact-aside .btn { align-self: flex-start; padding: 12px 22px; }
.contact-main { flex: 2 1 560px; min-width: 0; }

/* ---------- Donate ---------- */
.donate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.donate-card { background: var(--deep); color: #fff; padding: clamp(32px, 4vw, 56px); border-top: 5px solid; border-image: var(--gold-grad-h) 1; display: flex; flex-direction: column; gap: 20px; }
.donate-card h2 { font-size: clamp(28px, 3vw, 42px); }
.donate-card p { font-size: 18px; color: var(--light); }
.donate-card .btn { align-self: flex-start; margin-top: 8px; padding: 17px 34px; }
.donate-card__foot { margin-top: auto; padding-top: 20px; border-top: 1px solid #ffffff26; font-size: 16px; color: var(--light-2); }
.qr-card { background: var(--card); padding: clamp(32px, 4vw, 56px); border-top: 5px solid; border-image: var(--gold-grad-h) 1; box-shadow: 0 1px 0 var(--tan); display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.qr-card > div:first-child { flex: 1 1 220px; }
.qr-card h2 { margin: 0 0 12px; font-size: clamp(26px, 2.6vw, 38px); color: var(--ink); }
.qr-card p { font-size: 18px; color: var(--muted); }
.qr-card__box { flex: 0 0 220px; height: 220px; background: #fff; border: 2px dashed #8C7B57; display: grid; place-items: center; text-align: center; padding: 16px; font-size: 14px; font-weight: 600; color: #6B5F45; }
.qr-card__box img { width: 100%; height: 100%; object-fit: contain; }
.qr-card__box--img { border: 2px solid var(--tan); padding: 10px; }

/* ---------- Generic page / prose ---------- */
.prose { font-size: 18px; color: var(--muted); }
.prose p { margin: 0 0 1em; max-width: 72ch; }
.prose h2 { font-size: clamp(26px, 2.6vw, 38px); color: var(--ink); margin: 1.4em 0 .5em; }
.prose h3 { font-size: clamp(21px, 1.8vw, 26px); color: var(--ink); margin: 1.3em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose a { color: var(--od-link); }
.prose--light, .prose--light p { color: var(--light); }
.prose--light h2, .prose--light h3 { color: #fff; }
.prose--lead p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.65; color: var(--light); text-wrap: pretty; max-width: none; }
.empty { padding: 22px; background: var(--card); box-shadow: 0 1px 0 var(--tan); max-width: 60ch; }

/* ---------- Footer ---------- */
.site-footer__support { position: relative; padding: 8px 0 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; }
.site-footer__support .kicker { margin-bottom: 6px; }
.site-footer__support-title { margin: 0; font-family: var(--display); text-transform: uppercase; font-size: clamp(28px, 3.2vw, 44px); line-height: .95; }
.site-footer__support-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.site-footer { position: relative; border-top: 6px solid; border-image: var(--gold-grad-h) 1; background: #111 var(--footer-img, url('../design/img/footer-flag.jpg?v=2')) center / cover no-repeat; color: #fff; text-shadow: 0 2px 8px #000c; }
.site-footer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000004d, #00000026 40%, #00000080); }
.site-footer__grid { position: relative; padding: clamp(72px, 9vw, 120px) 0 clamp(36px, 4vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 48px; align-items: start; }
.site-footer__brand { width: 240px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.site-footer__brand img { width: 240px; height: auto; filter: drop-shadow(0 6px 16px #000c); }
.site-footer__brand p { margin: 12px 0 0; font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.footer-menu { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 56px; font-size: 18px; font-weight: 700; align-self: center; }
.footer-menu a { color: #fff; text-decoration: none; }
.footer-menu a:hover { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-footer__legal { position: relative; padding: 24px 0 36px; border-top: 1px solid #ffffffb3; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; font-size: 14px; }
.site-footer__legal p { margin: 0; padding-bottom: 17px; }
.site-footer__legal a { color: #fff; }
.site-footer__legal-links { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.site-footer__legal-links > a { padding-bottom: 17px; }
.site-footer__credit { display: inline-flex; align-items: flex-end; gap: 14px; }
.site-footer__credit > span { padding-bottom: 17px; }
.site-footer__credit a { display: block; margin-right: calc(-1 * var(--gutter) + 12px); transition: filter .2s; }
.site-footer__credit a:hover { filter: brightness(1.3); }
.site-footer__credit img { height: 56px; width: auto; filter: drop-shadow(0 2px 4px #000c); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
	.js [data-reveal] { opacity: 0; }
	.js [data-reveal].is-in { opacity: 1; animation: reveal .7s var(--ease-out) both; animation-delay: var(--reveal-delay, 0ms); }
	.js [data-hero-copy] > *, .js [data-hero-card] { opacity: 0; }
	.js .hero-ready [data-hero-copy] > *, .js .hero-ready [data-hero-card] { opacity: 1; animation: hero-in .8s var(--ease-out) both; animation-delay: var(--hero-delay, 0ms); }
}
@keyframes reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes hero-in { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }