:root {
  /* Jim’s Building Inspections approved brand palette, Style Guide June 2025 */
  --navy: #002f54;
  --navy-deep: #002f54;
  --navy-black: #001f38;
  --sky: #4bbaeb;
  --sky-soft: #e4f5fc;
  --grey: #9da5ab;
  --orange: #f15e30;
  --red: #d61e2f;
  --yellow: var(--orange);
  --white: #fff;
  --paper: #f7f8f9;
  --mist: #edf7fb;
  --ink: #002f54;
  --muted: #5f6f7c;
  --line: rgba(0,47,84,.16);
  --shadow: 0 24px 70px rgba(0,47,84,.15);
  --shell: min(1320px, calc(100% - 64px));
  --display: "Avenir Next", Avenir, Futura, "Trebuchet MS", Arial, sans-serif;
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.modal-open { overflow: hidden; }
img { display: block; width: 100%; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { border: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; z-index: 9999; top: -80px; left: 18px; padding: 12px 18px; background: var(--yellow); color: var(--navy-deep); border-radius: 10px; font-weight: 900; }
.skip-link:focus { top: 18px; }
.preview-bar { position: relative; z-index: 1200; padding: 7px 18px; text-align: center; background: var(--navy-black); color: rgba(255,255,255,.72); font-size: 12px; }
.preview-bar strong { color: var(--yellow); margin-right: 8px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; transition: background .3s ease, box-shadow .3s ease; }
body.has-preview .site-header { top: 29px; }
.site-header.is-solid { background: rgba(255,255,255,.95); backdrop-filter: blur(18px); box-shadow: 0 8px 38px rgba(0,34,61,.09); }
.header-inner { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 34px; }
.brand { width: 245px; padding: 9px 13px; background: rgba(255,255,255,.96); box-shadow: 0 12px 40px rgba(0,22,39,.15); border-radius: 14px; transition: width .25s ease, box-shadow .25s ease, padding .25s ease; }
.site-header.is-solid .brand { width: 220px; box-shadow: none; padding-left: 0; }
.main-nav { display: flex; align-items: center; gap: 30px; color: white; font-size: 14px; font-weight: 700; }
.site-header.is-solid .main-nav { color: var(--navy); }
.main-nav > a { position: relative; }
.main-nav > a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--yellow); transition: right .2s ease; }
.main-nav > a:hover::after { right: 0; }
.site-header.is-solid .main-nav > a::after { background: var(--sky); }
.menu-toggle { display: none; width: 48px; height: 48px; border-radius: 50%; background: white; padding: 14px 12px; box-shadow: 0 8px 30px rgba(0,31,55,.13); }
.menu-toggle span { display: block; height: 2px; margin: 5px 0; background: var(--navy); border-radius: 99px; }

.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 25px; border-radius: 999px; font-family: var(--display); font-size: 13px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--navy-deep); background: var(--yellow); box-shadow: 0 12px 36px rgba(249,237,46,.22); }
.button-primary:hover { background: #fff65d; box-shadow: 0 18px 45px rgba(249,237,46,.3); }
.button-dark { color: white; background: var(--navy); }
.button-dark:hover { background: var(--navy-deep); box-shadow: 0 16px 38px rgba(0,48,87,.22); }
.button-light { color: var(--navy); background: white; }
.button-outline-light { color: white; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.06); backdrop-filter: blur(10px); }
.button-outline-light:hover { background: rgba(255,255,255,.13); }
.button-ghost { color: var(--navy); border: 1px solid rgba(0,48,87,.22); background: transparent; }
.button-ghost:hover { background: var(--mist); }
.button-small { min-height: 44px; padding-inline: 20px; }
.button-large { min-height: 60px; padding-inline: 31px; font-size: 14px; }
.button-full { width: 100%; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--navy); font-family: var(--display); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--sky); }
.eyebrow-light { color: rgba(255,255,255,.82); }
.eyebrow-light::before { background: var(--sky); }

/* Hero */
.hero { min-height: 100svh; position: relative; z-index: 2; display: grid; align-items: end; overflow: visible; margin-bottom: 0; background: var(--navy-deep); color: white; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,19,33,.98) 0%, rgba(0,31,55,.9) 42%, rgba(0,31,55,.38) 70%, rgba(0,19,33,.12) 100%), linear-gradient(0deg, rgba(0,19,33,.92) 0%, transparent 38%); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transform: scale(1.015); animation: heroDrift 18s ease-in-out infinite alternate; }
@keyframes heroDrift { to { transform: scale(1.055) translateX(-.8%); } }
.hero-lines { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(115deg, transparent 0 26%, rgba(102,186,241,.7) 26.1% 26.25%, transparent 26.35%), linear-gradient(115deg, transparent 0 65%, rgba(249,237,46,.6) 65.05% 65.18%, transparent 65.28%); pointer-events: none; }
.hero-content { position: relative; z-index: 2; padding: 170px 0 176px; }
.hero-copy { max-width: 820px; }
.hero-kicker { display: block; margin-bottom: 26px; color: var(--sky-soft); font-family: var(--display); font-size: 12px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.hero h1 { margin: 0; font-family: var(--display); font-size: clamp(64px, 7.1vw, 116px); line-height: .89; letter-spacing: -.07em; font-weight: 900; text-wrap: balance; }
.hero h1 span { display: block; }
.hero h1 em { color: var(--yellow); font-style: normal; }
.hero-lead { max-width: 690px; margin: 30px 0 0; color: rgba(255,255,255,.78); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 36px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; color: rgba(255,255,255,.68); font-size: 13px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.hero-ribbon { position: absolute; z-index: 8; left: -1%; right: -1%; bottom: -30px; overflow: hidden; background: var(--yellow); color: var(--navy-deep); border-block: 1px solid rgba(0,0,0,.08); box-shadow: 0 16px 30px rgba(0,19,33,.18); transform: rotate(-1.2deg) scale(1.02); transform-origin: left center; }
.hero-ribbon-track { display: flex; width: max-content; padding: 17px 0 19px; animation: ribbon 26s linear infinite; font-family: var(--display); font-size: 15px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hero-ribbon-track span { padding-right: 48px; white-space: nowrap; }
.hero-ribbon-track span::after { content: "✦"; margin-left: 48px; }
@keyframes ribbon { to { transform: translateX(-50%); } }

/* Purpose / story */
.purpose { position: relative; z-index: 1; padding: 178px 0 150px; background: var(--paper); overflow: hidden; }
.purpose::after { content: ""; position: absolute; width: 520px; height: 520px; border: 90px solid var(--mist); border-radius: 50%; top: -260px; right: -230px; opacity: .75; }
.purpose-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(70px, 9vw, 150px); align-items: start; position: relative; z-index: 1; }
.purpose-heading { position: sticky; top: 140px; }
.purpose-heading h2 { margin: 24px 0 24px; max-width: 560px; font-family: var(--display); font-size: clamp(52px, 5.2vw, 86px); line-height: .95; letter-spacing: -.06em; text-wrap: balance; }
.purpose-heading h2 em { color: var(--sky); font-style: normal; }
.purpose-heading p { max-width: 500px; margin: 0; color: var(--muted); font-size: 18px; }
.purpose-visual { margin-top: 52px; display: grid; grid-template-columns: 1fr .63fr; gap: 14px; height: 420px; }
.purpose-visual figure { margin: 0; overflow: hidden; border-radius: 4px; }
.purpose-visual figure:first-child { margin-top: 44px; }
.purpose-visual img { width: 100%; height: 100%; object-fit: cover; }
.purpose-list { border-top: 1px solid var(--line); }
.purpose-item { display: grid; grid-template-columns: 94px 1fr; gap: 28px; padding: 38px 0; border-bottom: 1px solid var(--line); }
.purpose-item > span { padding-top: 7px; color: var(--sky); font-family: var(--display); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.purpose-item h3 { margin: 0 0 12px; font-family: var(--display); font-size: clamp(26px, 2.4vw, 39px); line-height: 1.04; letter-spacing: -.045em; }
.purpose-item p { margin: 0; color: var(--muted); font-size: 17px; }

/* Fundraising pages */
.pages-spotlight { padding: 145px 0; color: white; background: linear-gradient(145deg, var(--navy-black), #043b61 115%); overflow: hidden; }
.fundraising-showcase { display: grid; grid-template-columns: minmax(300px, .68fr) minmax(620px, 1.32fr); gap: clamp(52px, 7vw, 100px); align-items: start; }
.fundraising-showcase-intro { position: sticky; top: 132px; }
.fundraising-showcase-intro h2 { margin: 24px 0 24px; font-family: var(--display); font-size: clamp(48px, 5vw, 76px); line-height: .96; letter-spacing: -.06em; text-wrap: balance; }
.fundraising-showcase-intro > p { margin: 0; color: rgba(255,255,255,.72); font-size: 18px; }
.fundraising-showcase-note { margin-top: 34px; padding: 24px 0 0; border-top: 1px solid rgba(255,255,255,.18); }
.fundraising-showcase-note strong { display: block; margin-bottom: 7px; color: var(--yellow); font-family: var(--display); font-size: 14px; }
.fundraising-showcase-note span { display: block; color: rgba(255,255,255,.62); font-size: 15px; }
.fundraising-showcase-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.fundraising-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fundraising-card { overflow: hidden; color: var(--navy-deep); background: white; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; box-shadow: 0 26px 70px rgba(0,8,15,.22); transition: transform .25s ease, box-shadow .25s ease; }
.fundraising-card:hover { transform: translateY(-5px); box-shadow: 0 34px 90px rgba(0,8,15,.3); }
.fundraising-card-media { display: block; overflow: hidden; background: var(--mist); }
.fundraising-card-media img { width: 100%; aspect-ratio: 2048/682; object-fit: cover; transition: transform .45s ease; }
.fundraising-card:hover .fundraising-card-media img { transform: scale(1.018); }
.fundraising-card-body { padding: 20px 20px 18px; }
.fundraising-card-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.fundraising-card-meta span:last-child { color: var(--navy); font-weight: 700; }
.fundraising-card h3 { margin: 12px 0 8px; min-height: 2.15em; font-family: var(--display); font-size: clamp(21px, 1.65vw, 28px); line-height: 1.06; letter-spacing: -.04em; }
.fundraising-card p { margin: 0; color: var(--muted); font-size: 14px; }
.fundraising-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.fundraising-card-actions > a { color: var(--navy); font-weight: 800; }
.fundraising-card-actions > a span { margin-left: 4px; }
.fundraising-card-actions .button { min-height: 42px; padding-inline: 18px; }

/* Ways to take part */
.action-section { position: relative; padding: 145px 0; background: linear-gradient(180deg, #fff, var(--paper)); overflow: hidden; }
.action-section::after { content: ""; position: absolute; width: 520px; height: 520px; right: -290px; top: -210px; border: 82px solid var(--mist); border-radius: 50%; opacity: .75; }
.participation-intro { position: relative; z-index: 1; display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(50px, 8vw, 120px); align-items: end; margin-bottom: 55px; }
.participation-intro h2 { margin: 20px 0 0; font-family: var(--display); font-size: clamp(48px, 5vw, 76px); line-height: .96; letter-spacing: -.06em; text-wrap: balance; }
.participation-intro p { margin: 0; color: var(--muted); font-size: 19px; }
.participation-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.participation-card { min-height: 390px; display: flex; flex-direction: column; padding: 36px; background: white; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 18px 50px rgba(0,48,87,.08); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.participation-card:hover { transform: translateY(-6px); border-color: rgba(104,185,236,.65); box-shadow: 0 28px 70px rgba(0,48,87,.13); }
.participation-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 34px; color: var(--navy); background: var(--sky-soft); border-radius: 17px; }
.participation-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.participation-label { color: var(--sky); font-family: var(--display); font-size: 11px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.participation-card h3 { margin: 12px 0 16px; font-family: var(--display); font-size: clamp(30px, 2.6vw, 42px); line-height: 1; letter-spacing: -.05em; text-wrap: balance; }
.participation-card p { margin: 0; color: var(--muted); font-size: 16px; }
.participation-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 28px; color: var(--navy); border-top: 1px solid var(--line); font-weight: 800; text-align: left; }
.participation-link span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; transition: background .2s ease, color .2s ease; }
.participation-card:hover .participation-link span { color: var(--navy-deep); background: var(--yellow); border-color: var(--yellow); }

/* Impact */
.impact { padding: 145px 0 130px; color: white; background: var(--navy-black); overflow: hidden; }
.impact-header { max-width: 980px; margin-bottom: 60px; }
.impact-header h2 { margin: 22px 0 22px; font-family: var(--display); font-size: clamp(50px, 6.2vw, 92px); line-height: .94; letter-spacing: -.065em; text-wrap: balance; }
.impact-header p { max-width: 720px; margin: 0; color: rgba(255,255,255,.68); font-size: 19px; }
.impact-feature { display: grid; grid-template-columns: 1.18fr .82fr; min-height: 630px; border-radius: 30px; overflow: hidden; background: var(--navy); box-shadow: 0 40px 110px rgba(0,0,0,.3); }
.impact-feature-media { min-height: 560px; }
.impact-feature-media img { height: 100%; object-fit: cover; }
.impact-feature-copy { padding: clamp(48px, 6vw, 90px); display: flex; flex-direction: column; justify-content: center; }
.impact-feature-copy span { color: var(--yellow); font-family: var(--display); font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.impact-feature-copy h3 { margin: 22px 0 22px; font-family: var(--display); font-size: clamp(38px, 4vw, 62px); line-height: .98; letter-spacing: -.055em; }
.impact-feature-copy p { margin: 0; color: rgba(255,255,255,.7); font-size: 18px; }
.impact-programs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.program-card { position: relative; min-height: 430px; overflow: hidden; border-radius: 24px; background: var(--navy); }
.program-card img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.program-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,19,33,.98), rgba(0,19,33,.18) 72%); }
.program-card-copy { position: absolute; z-index: 2; inset: auto 0 0; padding: 28px; }
.program-card-copy span { color: var(--yellow); font-family: var(--display); font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.program-card-copy h3 { margin: 8px 0 8px; font-family: var(--display); font-size: 28px; letter-spacing: -.04em; }
.program-card-copy p { margin: 0; color: rgba(255,255,255,.68); font-size: 15px; }

/* Final CTA */
.final-cta { padding: 110px 0; background: var(--paper); }
.final-card { position: relative; min-height: 570px; display: grid; grid-template-columns: 1fr .88fr; overflow: hidden; border-radius: 32px; color: white; background: var(--navy); box-shadow: var(--shadow); }
.final-copy { padding: clamp(56px, 7vw, 100px); display: flex; flex-direction: column; justify-content: center; }
.final-copy h2 { margin: 20px 0 20px; max-width: 700px; font-family: var(--display); font-size: clamp(48px, 5.3vw, 80px); line-height: .95; letter-spacing: -.06em; text-wrap: balance; }
.final-copy p { max-width: 590px; margin: 0; color: rgba(255,255,255,.7); font-size: 18px; }
.final-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.final-art { position: relative; min-height: 520px; }
.final-art::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, var(--navy), transparent 35%); }
.final-art img { height: 100%; object-fit: cover; }

/* Teams directory */
.page-hero { position: relative; min-height: 650px; display: grid; align-items: end; padding: 170px 0 90px; color: white; background: var(--navy-deep); overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 15%, rgba(102,186,241,.25), transparent 30%), linear-gradient(115deg, transparent 55%, rgba(102,186,241,.12) 55.2% 55.5%, transparent 55.7%); }
.page-hero-grid { position: relative; display: grid; grid-template-columns: 1fr .72fr; gap: 90px; align-items: end; }
.page-hero h1 { margin: 22px 0 22px; max-width: 900px; font-family: var(--display); font-size: clamp(60px, 6.5vw, 100px); line-height: .92; letter-spacing: -.065em; text-wrap: balance; }
.page-hero p { margin: 0; max-width: 680px; color: rgba(255,255,255,.7); font-size: 19px; }
.page-hero-aside { padding: 32px; border-left: 2px solid var(--yellow); background: rgba(255,255,255,.06); backdrop-filter: blur(12px); }
.page-hero-aside strong { display: block; margin-bottom: 10px; font-family: var(--display); font-size: 24px; }
.page-hero-aside span { color: rgba(255,255,255,.7); }
.directory { padding: 120px 0 140px; background: var(--paper); }
.directory-head { display: grid; grid-template-columns: 1fr .75fr; gap: 80px; align-items: end; margin-bottom: 50px; }
.directory-head h2 { margin: 18px 0 0; font-family: var(--display); font-size: clamp(46px, 5vw, 76px); line-height: .98; letter-spacing: -.06em; }
.directory-head p { margin: 0; color: var(--muted); font-size: 18px; }
.directory-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.directory-card { overflow: hidden; background: white; box-shadow: 0 16px 55px rgba(0,35,63,.09); border-radius: 22px; transition: transform .25s ease, box-shadow .25s ease; }
.directory-card:hover { transform: translateY(-5px); box-shadow: 0 24px 70px rgba(0,35,63,.15); }
.directory-card-image { display: block; aspect-ratio: 2048/682; overflow: hidden; background: var(--mist); }
.directory-card-image img { height: 100%; object-fit: cover; transition: transform .5s ease; }
.directory-card:hover .directory-card-image img { transform: scale(1.02); }
.directory-card-body { padding: 26px; }
.directory-card-top { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 13px; }
.directory-card h3 { margin: 10px 0 12px; font-family: var(--display); font-size: clamp(28px, 3vw, 43px); line-height: 1.02; letter-spacing: -.045em; }
.directory-card p { margin: 0; color: var(--muted); }
.directory-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.directory-card-footer a { font-weight: 800; color: var(--navy); }
.directory-overall { margin-top: 28px; padding: 34px; display: flex; align-items: center; justify-content: space-between; gap: 30px; color: white; background: var(--navy); border-radius: 22px; }
.directory-overall strong { display: block; font-family: var(--display); font-size: 26px; }
.directory-overall span { color: rgba(255,255,255,.68); }

/* Individual page */
.team-hero { position: relative; min-height: 780px; display: grid; align-items: end; overflow: hidden; color: white; background: var(--navy-deep); }
.team-hero-media { position: absolute; inset: 0; }
.team-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.team-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,19,33,.98), rgba(0,31,55,.82) 48%, rgba(0,31,55,.2)), linear-gradient(0deg, rgba(0,19,33,.9), transparent 55%); }
.team-hero-content { position: relative; z-index: 2; padding: 170px 0 90px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; color: rgba(255,255,255,.62); font-size: 13px; }
.team-hero-copy { max-width: 850px; }
.team-hero h1 { margin: 20px 0 20px; font-family: var(--display); font-size: clamp(64px, 7vw, 110px); line-height: .9; letter-spacing: -.067em; text-wrap: balance; }
.team-hero p { max-width: 690px; margin: 0; color: rgba(255,255,255,.74); font-size: 20px; }
.team-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.team-main { padding: 120px 0; background: var(--paper); }
.team-main-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; align-items: start; }
.team-donate-panel { position: sticky; top: 125px; padding: 34px; color: white; background: var(--navy); border-radius: 24px; box-shadow: var(--shadow); }
.team-donate-panel span { color: var(--sky-soft); font-family: var(--display); font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.team-donate-panel strong { display: block; margin: 16px 0 12px; font-family: var(--display); font-size: 42px; line-height: 1; letter-spacing: -.045em; }
.team-donate-panel p { margin: 0; color: rgba(255,255,255,.7); }
.team-trust { display: grid; gap: 10px; margin: 26px 0; padding: 22px 0; border-block: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.75); font-size: 14px; }
.team-story h2 { margin: 16px 0 24px; font-family: var(--display); font-size: clamp(46px, 5vw, 74px); line-height: .96; letter-spacing: -.06em; text-wrap: balance; }
.team-story > p { max-width: 760px; color: var(--muted); font-size: 19px; }
.team-benefits { margin-top: 55px; border-top: 1px solid var(--line); }
.team-benefit { display: grid; grid-template-columns: 54px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.team-benefit span { color: var(--sky); font-family: var(--display); font-weight: 900; }
.team-benefit strong { display: block; margin-bottom: 7px; font-family: var(--display); font-size: 25px; }
.team-benefit p { margin: 0; color: var(--muted); }
.share-band { padding: 95px 0; color: white; background: var(--navy-deep); }
.share-band-inner { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; }
.share-band h2 { margin: 16px 0 10px; max-width: 900px; font-family: var(--display); font-size: clamp(43px, 5vw, 72px); line-height: .98; letter-spacing: -.055em; }
.share-band p { max-width: 680px; margin: 0; color: rgba(255,255,255,.67); }
.share-band-actions { display: flex; flex-direction: column; gap: 12px; min-width: 220px; }
.other-pages { padding: 115px 0 130px; background: white; }
.other-pages-head { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 38px; }
.other-pages-head h2 { margin: 15px 0 0; font-family: var(--display); font-size: clamp(42px, 4.7vw, 68px); letter-spacing: -.055em; }
.other-pages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.other-page-card { overflow: hidden; border-radius: 18px; background: var(--paper); }
.other-page-card img { aspect-ratio: 2048/682; object-fit: cover; }
.other-page-card div { padding: 18px; display: flex; justify-content: space-between; gap: 16px; font-weight: 800; }

/* Footer */
.site-footer { padding: 76px 0 20px; color: white; background: var(--navy-black); }
.footer-grid { display: grid; grid-template-columns: .95fr .9fr .7fr; gap: 80px; align-items: start; }
.footer-brand img { max-width: 260px; padding: 12px; background: white; border-radius: 12px; }
.footer-brand p { max-width: 420px; margin: 22px 0 0; color: rgba(255,255,255,.58); }
.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }
.footer-links div { display: grid; gap: 11px; align-content: start; }
.footer-links strong { margin-bottom: 6px; color: var(--sky); font-family: var(--display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.footer-links a, .footer-links button { color: rgba(255,255,255,.67); text-align: left; }
.footer-links a:hover, .footer-links button:hover { color: white; }
.footer-callout { padding: 28px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: rgba(255,255,255,.04); }
.footer-callout > span { color: var(--yellow); font-family: var(--display); font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.footer-callout strong { display: block; margin: 12px 0 22px; font-family: var(--display); font-size: 25px; line-height: 1.1; }
.footer-callout button { display: flex; justify-content: space-between; width: 100%; color: white; font-weight: 800; }
.footer-bottom { display: flex; justify-content: space-between; gap: 30px; margin-top: 65px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.4); font-size: 12px; }

/* Donation modal */
.donation-experience[hidden] { display: none; }
.donation-experience { position: fixed; z-index: 3000; inset: 0; display: grid; place-items: center; padding: 26px; }
.donation-backdrop { position: absolute; inset: 0; background: rgba(0,13,24,.82); backdrop-filter: blur(12px); }
.donation-panel { position: relative; width: min(1280px, 100%); height: min(900px, calc(100svh - 52px)); display: grid; grid-template-columns: 430px 1fr; overflow: hidden; border-radius: 28px; background: white; box-shadow: 0 40px 140px rgba(0,0,0,.45); }
.donation-close { position: absolute; z-index: 5; top: 16px; right: 18px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: rgba(255,255,255,.95); font-size: 26px; box-shadow: 0 10px 30px rgba(0,31,55,.15); }
.donation-intro { padding: 42px; overflow-y: auto; color: white; background: var(--navy-deep); }
.donation-mark { max-width: 260px; margin-bottom: 42px; padding: 10px; background: white; border-radius: 12px; }
.donation-intro h2 { margin: 16px 0 15px; font-family: var(--display); font-size: 44px; line-height: .98; letter-spacing: -.05em; }
.donation-intro > p { margin: 0; color: rgba(255,255,255,.67); }
.donation-picker-label { display: flex; justify-content: space-between; margin: 32px 0 10px; color: var(--sky-soft); font-family: var(--display); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.donation-picker-label span { color: rgba(255,255,255,.4); }
.donation-team-picker { display: grid; gap: 8px; }
.donation-team-option { width: 100%; display: grid; grid-template-columns: 48px 1fr; gap: 13px; align-items: center; padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; color: white; text-align: left; background: rgba(255,255,255,.04); transition: border .2s ease, background .2s ease; }
.donation-team-option:hover, .donation-team-option.is-active { border-color: var(--yellow); background: rgba(249,237,46,.08); }
.donation-option-code { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 10px; color: var(--navy-deep); background: var(--sky-soft); font-family: var(--display); font-size: 12px; font-weight: 900; }
.donation-team-option.is-active .donation-option-code { background: var(--yellow); }
.donation-team-option strong { display: block; font-size: 14px; }
.donation-team-option small { display: block; color: rgba(255,255,255,.48); font-size: 12px; }
.donation-trust { display: grid; gap: 8px; margin-top: 26px; color: rgba(255,255,255,.58); font-size: 12px; }
.donation-trust span::before { content: "✓"; margin-right: 8px; color: var(--yellow); }
.donation-form-stage { min-width: 0; overflow-y: auto; background: #f6f7f8; }
.donation-form-header { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 34px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(12px); }
.donation-form-header span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.donation-form-header strong { display: block; margin-top: 3px; color: var(--navy); font-family: var(--display); font-size: 18px; }
.secure-pill { padding: 8px 12px; border-radius: 999px; color: var(--navy) !important; background: var(--mist); font-weight: 800; }
.donation-embed-wrap {
  position: relative;
  min-height: 860px;
  padding: 48px 34px 64px;
}
.embed-loader {
  position: absolute;
  z-index: 1;
  top: 52px;
  left: 50%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.embed-loader[hidden] { display: none; }
.embed-loader-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0,48,87,.14);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@keyframes spin { to { transform: rotate(360deg); } }
#raiselyEmbed {
  min-height: 800px;
  padding-block: 8px;
}
#raiselyEmbed iframe {
  display: block;
  width: 100% !important;
  min-height: 800px;
  border: 0;
}
.embed-error {
  min-height: 260px;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 32px;
  border-radius: 22px;
  color: var(--navy);
  text-align: center;
  background: white;
  box-shadow: 0 18px 48px rgba(0,48,87,.08);
}
.embed-error strong { font-family: var(--display); font-size: 22px; }
.embed-error span { color: var(--muted); }

/* Animation */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.from-left { transform: translateX(-35px); }
.reveal.from-right { transform: translateX(35px); }
.reveal.is-visible { opacity: 1; transform: none; }

.not-found { min-height: 70svh; }
.not-found .page-hero-content { position: relative; }

@media (max-width: 1050px) {
  :root { --shell: min(100% - 40px, 950px); }
  .main-nav { gap: 19px; }
  .purpose-grid, .action-intro, .page-hero-grid, .team-main-grid { grid-template-columns: 1fr; }
  .purpose-heading { position: static; }
  .purpose-visual { max-width: 720px; }
  .section-head { grid-template-columns: 1fr; gap: 24px; }
  .impact-feature { grid-template-columns: 1fr; }
  .impact-feature-media { min-height: 470px; }
  .impact-programs { grid-template-columns: 1fr 1fr; }
  .impact-programs .program-card:last-child { grid-column: 1 / -1; }
  .action-row { grid-template-columns: 70px .7fr 1fr 60px; }
  .final-card { grid-template-columns: 1fr; }
  .final-art { min-height: 430px; }
  .final-art::before { background: linear-gradient(0deg, transparent, var(--navy) 100%); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-callout { grid-column: 1 / -1; }
  .team-donate-panel { position: static; }
}

@media (max-width: 820px) {
  :root { --shell: calc(100% - 32px); }
  .header-inner { min-height: 76px; }
  .brand, .site-header.is-solid .brand { width: 190px; }
  .menu-toggle { display: block; }
  .main-nav { position: fixed; inset: 76px 16px auto; display: grid; gap: 0; padding: 16px; color: var(--navy); background: white; border-radius: 18px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: .2s ease; }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .main-nav a { padding: 14px 10px; border-bottom: 1px solid var(--line); }
  .main-nav a::after { display: none; }
  .main-nav .button { margin-top: 10px; }
  .hero-content { padding: 138px 0 154px; }
  .hero-media::after { background: linear-gradient(90deg, rgba(0,19,33,.96), rgba(0,31,55,.76)), linear-gradient(0deg, rgba(0,19,33,.95), transparent 48%); }
  .purpose, .action-section, .impact, .directory, .team-main, .other-pages { padding-block: 90px; }
  .purpose-grid { gap: 65px; }
  .purpose-visual { height: 330px; }
  .purpose-item { grid-template-columns: 48px 1fr; gap: 18px; }
  .pages-spotlight { padding-block: 90px; }
  .page-card { flex-basis: min(88vw, 540px); min-height: 460px; }
  .pages-spotlight-footer { align-items: flex-start; flex-direction: column; }
  .action-intro { gap: 24px; }
  .action-row { grid-template-columns: 54px 1fr 56px; min-height: 170px; padding-block: 24px; }
  .action-row p { grid-column: 2 / 3; }
  .impact-programs { grid-template-columns: 1fr; }
  .impact-programs .program-card:last-child { grid-column: auto; }
  .program-card { min-height: 400px; }
  .directory-grid { grid-template-columns: 1fr; }
  .directory-head { grid-template-columns: 1fr; gap: 20px; }
  .directory-overall { align-items: flex-start; flex-direction: column; }
  .share-band-inner { grid-template-columns: 1fr; }
  .share-band-actions { flex-direction: row; min-width: 0; }
  .other-pages-grid { grid-template-columns: 1fr; }
  .other-pages-head { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-callout { grid-column: auto; }
  .donation-experience { padding: 0; }
  .donation-panel { width: 100%; height: 100svh; grid-template-columns: 1fr; border-radius: 0; overflow-y: auto; }
  .donation-intro { overflow: visible; padding: 32px 22px 28px; }
  .donation-mark { max-width: 220px; margin-bottom: 28px; }
  .donation-intro h2 { font-size: 38px; }
  .donation-team-picker { max-height: 270px; overflow-y: auto; }
  .donation-form-stage { overflow: visible; }
  .donation-form-header { top: 0; padding: 18px 22px; }
  .donation-embed-wrap { min-height: 840px; padding: 34px 14px 54px; }
  .embed-loader { top: 38px; }
  #raiselyEmbed { min-height: 780px; padding-block: 6px; }
  #raiselyEmbed iframe { min-height: 780px; }
}

@media (max-width: 560px) {
  :root { --shell: calc(100% - 24px); }
  .brand, .site-header.is-solid .brand { width: 165px; }
  .hero h1 { font-size: clamp(54px, 16vw, 76px); }
  .hero-lead { font-size: 16px; }
  .hero-actions .button { width: 100%; }
  .hero-trust { display: grid; gap: 9px; }
  .purpose-heading h2, .section-head h2, .action-intro h2, .impact-header h2, .page-hero h1, .team-hero h1 { font-size: clamp(44px, 13vw, 64px); }
  .purpose-visual { grid-template-columns: 1fr; height: 440px; }
  .purpose-visual figure:first-child { margin-top: 0; }
  .purpose-visual figure:last-child { display: none; }
  .page-rail { gap: 14px; padding-right: 20px; }
  .page-card { flex-basis: 88vw; min-height: 410px; border-radius: 20px; }
  .page-card-content { padding: 22px; }
  .page-card-actions { flex-direction: column; align-items: stretch; }
  .page-card-actions .button { width: 100%; }
  .action-row { grid-template-columns: 42px 1fr 46px; gap: 12px; }
  .action-row h3 { font-size: 35px; }
  .impact-feature { border-radius: 22px; }
  .impact-feature-media { min-height: 360px; }
  .impact-feature-copy { padding: 32px 24px 38px; }
  .final-card { border-radius: 22px; }
  .final-copy { padding: 42px 24px; }
  .final-actions .button { width: 100%; }
  .page-hero { min-height: 590px; padding-top: 130px; }
  .page-hero-aside { padding: 24px; }
  .directory-card-body { padding: 20px; }
  .directory-card-footer { align-items: flex-start; flex-direction: column; }
  .directory-card-footer .button { width: 100%; }
  .team-hero { min-height: 700px; }
  .team-hero-actions .button { width: 100%; }
  .team-main-grid { gap: 50px; }
  .share-band-actions { flex-direction: column; }
  .footer-links { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .donation-intro { padding-top: 72px; }
}


@media (max-width: 1050px) {
  .fundraising-showcase { grid-template-columns: 1fr; }
  .fundraising-showcase-intro { position: static; max-width: 760px; }
  .participation-intro { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 820px) {
  .hero { margin-bottom: 0; }
  .hero-ribbon { bottom: -22px; }
  .hero-ribbon-track { padding-block: 14px 16px; font-size: 12px; }
  .purpose { padding-top: 135px; }
  .fundraising-card-grid { grid-template-columns: 1fr 1fr; }
  .participation-grid { grid-template-columns: 1fr; }
  .participation-card { min-height: 320px; }
}

@media (max-width: 620px) {
  .fundraising-card-grid { grid-template-columns: 1fr; }
  .fundraising-showcase-actions .button { width: 100%; }
  .fundraising-card h3 { min-height: 0; }
  .purpose-item { grid-template-columns: 72px 1fr; gap: 16px; }
  .participation-card { padding: 28px 24px; }
}

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

/* v10 public fundraising momentum */
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .55fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: end;
}
.hero-total {
  align-self: end;
  margin-bottom: 4px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 22px;
  background: rgba(0,28,51,.62);
  box-shadow: 0 24px 70px rgba(0,12,22,.28);
  backdrop-filter: blur(18px);
}
.hero-total > span {
  display: block;
  color: var(--sky-soft);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-total > strong {
  display: block;
  margin: 12px 0 14px;
  color: var(--yellow);
  font-family: var(--display);
  font-size: clamp(54px, 5.2vw, 82px);
  line-height: .92;
  letter-spacing: -.065em;
}
.hero-total p {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 15px;
}
.hero-total button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.18);
  color: white;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}
.hero-total button b {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--navy-deep);
  background: var(--yellow);
}
.donation-activity .hero-ribbon-track {
  animation-duration: 34s;
  text-transform: none;
  letter-spacing: .015em;
}
.donation-activity .hero-ribbon-track span {
  font-family: var(--body);
  font-weight: 700;
}
.donation-activity .hero-ribbon-track strong {
  font-family: var(--display);
  font-weight: 900;
}
.donation-activity:hover .hero-ribbon-track { animation-play-state: paused; }

@media (max-width: 1050px) {
  .hero-layout { grid-template-columns: 1fr; gap: 36px; }
  .hero-total { width: min(560px, 100%); }
  .hero-content { padding-bottom: 150px; }
}

@media (max-width: 820px) {
  .hero-layout { gap: 30px; }
  .hero-total { padding: 24px; }
  .hero-total > strong { font-size: clamp(50px, 15vw, 70px); }
  .hero-content { padding-bottom: 132px; }
}

@media (max-width: 520px) {
  .hero-total { border-radius: 18px; }
  .hero-total p { font-size: 14px; }
  .donation-activity .hero-ribbon-track { font-size: 11px; }
}
.team-hero-funds {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-top: 28px;
}
.team-hero-funds strong {
  color: var(--yellow);
  font-family: var(--display);
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1;
  letter-spacing: -.055em;
}
.team-hero-funds span {
  color: rgba(255,255,255,.7);
  font-size: 14px;
}


/* v11 tighter storytelling and complete service representation */
.purpose {
  padding: 118px 0 108px;
}
.purpose-grid {
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(52px, 6vw, 92px);
  align-items: center;
}
.purpose-heading {
  position: static;
}
.purpose-heading h2 {
  max-width: 600px;
  font-size: clamp(48px, 4.35vw, 70px);
  line-height: .97;
}
.purpose-heading p {
  max-width: 560px;
  font-size: 17px;
}
.purpose-visual {
  height: 300px;
  margin-top: 34px;
}
.purpose-visual figure:first-child {
  margin-top: 26px;
}
.purpose-item {
  grid-template-columns: 82px 1fr;
  gap: 22px;
  padding: 25px 0;
}
.purpose-item h3 {
  margin-bottom: 8px;
  font-size: clamp(25px, 2vw, 33px);
}
.purpose-item p {
  font-size: 16px;
}

.action-section {
  padding: 98px 0 108px;
}
.participation-intro {
  grid-template-columns: 1fr .88fr;
  gap: clamp(42px, 6vw, 82px);
  align-items: center;
  margin-bottom: 36px;
}
.participation-intro h2 {
  max-width: 720px;
  font-size: clamp(45px, 4.2vw, 64px);
  line-height: .98;
}
.participation-intro p {
  max-width: 650px;
  font-size: 17px;
}
.participation-grid {
  gap: 16px;
}
.participation-card {
  min-height: 310px;
  padding: 28px;
  border-radius: 20px;
}
.participation-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 22px;
  border-radius: 14px;
}
.participation-icon svg {
  width: 25px;
  height: 25px;
}
.participation-card h3 {
  margin: 9px 0 12px;
  font-size: clamp(28px, 2.25vw, 36px);
}
.participation-card p {
  font-size: 15.5px;
}
.participation-link {
  padding-top: 20px;
}

.impact {
  padding: 118px 0 112px;
}
.impact-header {
  margin-bottom: 44px;
}
.impact-header h2 {
  max-width: 1050px;
  font-size: clamp(48px, 5.2vw, 78px);
}
.impact-programs {
  grid-template-columns: repeat(4, 1fr);
}
.program-card {
  min-height: 370px;
}
.program-card-ambulance {
  background: linear-gradient(145deg, #075184, #002844 70%);
}
.program-card-ambulance::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 15%, rgba(104,185,236,.38), transparent 34%), linear-gradient(125deg, transparent 52%, rgba(249,237,46,.12) 52.2% 52.7%, transparent 53%);
}
.program-card-ambulance::after {
  background: linear-gradient(0deg, rgba(0,19,33,.96), rgba(0,48,87,.16) 78%);
}
.ambulance-art {
  position: absolute;
  z-index: 1;
  inset: 34px 28px auto;
  color: rgba(255,255,255,.9);
}
.ambulance-art svg {
  width: 100%;
  max-height: 185px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1120px) {
  .impact-programs { grid-template-columns: repeat(2, 1fr); }
  .impact-programs .program-card:last-child { grid-column: auto; }
}

@media (max-width: 820px) {
  .purpose { padding-block: 88px; }
  .purpose-grid { gap: 48px; }
  .purpose-visual { height: 300px; }
  .action-section { padding-block: 82px; }
  .participation-intro { grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
  .participation-card { min-height: 285px; }
  .impact { padding-block: 90px; }
}

@media (max-width: 620px) {
  .purpose-item { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .purpose-item > span { padding-top: 0; }
  .purpose-visual { height: 330px; }
  .impact-programs { grid-template-columns: 1fr; }
  .program-card { min-height: 350px; }
}


/* ========================================================================== 
   JBI BRAND ALIGNMENT — JUNE 2025 STYLE GUIDE
   ========================================================================== */
body { background: var(--paper); }
.site-header.is-solid { border-bottom: 3px solid var(--sky); }
.brand { border-radius: 0; box-shadow: 0 10px 30px rgba(0,47,84,.14); }
.site-header.is-solid .brand { background: transparent; }

.button { border-radius: 4px; letter-spacing: .02em; text-transform: uppercase; }
.button-primary { color: var(--white); background: var(--orange); box-shadow: 0 12px 34px rgba(241,94,48,.24); }
.button-primary:hover { color: var(--white); background: #d94f25; box-shadow: 0 18px 44px rgba(241,94,48,.28); }
.button-dark { background: var(--navy); }
.button-ghost { border-color: rgba(0,47,84,.28); }
.button-outline-light { border-radius: 4px; }

.skip-link { color: var(--white); background: var(--orange); border-radius: 3px; }
.preview-bar strong { color: var(--sky); }
.main-nav > a::after,
.site-header.is-solid .main-nav > a::after { background: var(--sky); }

.eyebrow { color: var(--navy); }
.eyebrow::before,
.eyebrow-light::before { background: var(--sky); }
.eyebrow-light { color: rgba(255,255,255,.88); }

.hero-media::after { background: linear-gradient(90deg, rgba(0,31,56,.98) 0%, rgba(0,47,84,.91) 42%, rgba(0,47,84,.42) 70%, rgba(0,31,56,.18) 100%), linear-gradient(0deg, rgba(0,31,56,.94) 0%, transparent 40%); }
.hero-lines { opacity: .34; background-image: linear-gradient(115deg, transparent 0 26%, rgba(75,186,235,.78) 26.1% 26.25%, transparent 26.35%), linear-gradient(115deg, transparent 0 65%, rgba(241,94,48,.62) 65.05% 65.18%, transparent 65.28%); }
.hero h1 em { color: var(--sky); }
.hero-trust i { background: var(--orange); }
.hero-ribbon { bottom: -31px; color: var(--white); background: var(--sky); border-color: rgba(0,47,84,.12); box-shadow: 0 16px 30px rgba(0,47,84,.18); }
.hero-ribbon-track span::after { color: var(--navy); }
.hero-total { border-top: 5px solid var(--sky); }
.hero-total strong { color: var(--white); }
.hero-total button { color: var(--sky); }

.purpose, .participate, .final-cta, .directory, .team-main { background: var(--paper); }
.purpose::after, .participate::after { border-color: rgba(75,186,235,.10); }
.purpose-heading h2 em { color: var(--sky); }
.purpose-item > span { color: var(--sky); }

.pages-spotlight, .impact { background: var(--navy); }
.fundraising-showcase-note { border-left-color: var(--sky); }
.fundraising-card, .directory-card { border-radius: 4px; border-top: 4px solid var(--sky); }
.fundraising-card-actions > a, .directory-card-footer a { color: var(--navy); }
.fundraising-card-meta span:last-child, .directory-card-top span:last-child { color: var(--orange); font-weight: 700; }

.participation-card { border-radius: 4px; border-top: 4px solid var(--sky); }
.participation-card-icon { color: var(--navy); background: var(--sky-soft); border-radius: 2px; }
.participation-card .eyebrow, .participation-card-label { color: var(--sky); }

.impact-feature, .program-card, .final-card { border-radius: 4px; }
.impact-feature-copy span, .program-card-copy span { color: var(--sky); }
.program-card { border-bottom: 5px solid var(--sky); }

.final-card { border-top: 6px solid var(--sky); }
.final-copy .button-primary { background: var(--orange); }

.page-hero, .team-hero, .share-band { background: var(--navy); }
.page-hero-aside { border-left-color: var(--sky); }
.directory-card, .directory-overall, .team-donate-panel, .other-page-card { border-radius: 4px; }
.directory-overall { border-left: 6px solid var(--sky); }
.team-donate-panel { border-top: 5px solid var(--sky); }
.team-donate-panel > span, .team-benefit > span { color: var(--sky); }
.team-hero-media::after { background: linear-gradient(90deg, rgba(0,31,56,.98), rgba(0,47,84,.84) 48%, rgba(0,47,84,.22)), linear-gradient(0deg, rgba(0,31,56,.92), transparent 55%); }

.site-footer { background: var(--navy); border-top: 7px solid var(--sky); }
.footer-brand img { border-radius: 0; }
.footer-links strong { color: var(--sky); }
.footer-callout { border-top: 4px solid var(--sky); }

.donation-intro { background: var(--navy); }
.donation-panel, .donation-mark, .donation-team-option, .donation-form-stage, .donation-embed-wrap { border-radius: 4px; }
.donation-team-option.is-active { border-color: var(--sky); box-shadow: 0 0 0 2px rgba(75,186,235,.2); }
.secure-pill { color: var(--navy); background: var(--sky-soft); }
.embed-loader-spinner { border-top-color: var(--sky); }

/* Approved 45-degree brand detail derived from JBI banner geometry. */
.hero::before, .page-hero::after, .team-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 180px;
  height: 18px;
  right: 0;
  top: 132px;
  background: var(--orange);
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  opacity: .95;
}
.page-hero::after { top: auto; bottom: 70px; width: 240px; background: var(--sky); }
.team-hero::before { top: 145px; background: var(--sky); }

@media (max-width: 820px) {
  .brand { border-radius: 0; }
  .hero::before, .page-hero::after, .team-hero::before { width: 100px; height: 12px; top: 110px; }
  .page-hero::after { top: auto; bottom: 44px; }
}