:root{--bg:#F5EFE6; --panel:#FBF7F1; --ink:#2F2A28; --muted:#7A6E66; --accent:#C8A36A; --accent-dark:#8C6B3E; --shadow:rgba(0,0,0,.08); --radius:18px;}
*{box-sizing:border-box}
html, body{margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; scroll-behavior:smooth;}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:1170px; margin:0 auto; padding:0 20px}
nav.site-nav{position:sticky; top:0; z-index:50; background:rgba(245, 239, 230, 0.9); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid #e8dfd2}
nav .bar{display:flex; align-items:center; gap:16px; justify-content:space-between; height:70px; max-width: 100%;}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:44px; height:44px; border-radius:12px; box-shadow:0 2px 8px var(--shadow)}
.brand .name{font-family:"Bebas Neue", sans-serif; letter-spacing:.6px; font-size:26px}
.navlinks{display:flex; gap:14px; align-items:center; flex-wrap:wrap; list-style:none; padding:0; margin:0;}
.navlinks a:not(.btn){font-size:13px; opacity:.9; position:relative; padding:4px 0;}
.navlinks a:not(.btn)::before{content:""; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--accent); transition:width 0.3s ease-in-out;}
.navlinks a:not(.btn):hover::before{width:100%;}
.navlinks a.btn{padding:10px 12px;font-size: 11px;}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:999px; border:1px solid var(--accent); background:var(--accent); color:white; font-weight:700; letter-spacing:.3px; text-transform:uppercase; font-size:13px; box-shadow:0 6px 20px var(--shadow); transition:all 0.5s ease;}
.btn.ghost{background:transparent; color:var(--ink)}
.btn:hover{transform:translateY(-3px)}
.hero{padding:56px 0 28px; background:linear-gradient(180deg, #fff8f0, var(--bg));}
.hero .grid{display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center}
.h-kicker{color:var(--accent-dark); font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:12px}
h1{font-family:"Bebas Neue", sans-serif; font-size:56px; line-height:1.02; margin:8px 0 12px}
.lead{font-size:18px; color:var(--muted); max-width:60ch}
.lead.w-full {max-width: 100%;}
.cta-row{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}
.picture-box .frame{aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:#f9f3ea url('assets/img/solentria-logo.jpg') center/cover no-repeat; border:1px solid #eadfcf}
.picture-box .hero-video {aspect-ratio: 4/3;border-radius: var(--radius);object-fit: cover;width: 100%;}
.caption{font-size:13px; color:var(--muted); margin-top:10px; text-align:center}
section{padding:72px 0; border-top:1px dashed #e9dece}
h2{font-family:"Bebas Neue", sans-serif; font-size:34px; margin:0 0 8px}
.kicker{color:var(--accent-dark); text-transform:uppercase; font-size:12px; letter-spacing:.18em; margin-bottom:6px}
.card-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--panel); border-radius:var(--radius); padding:18px; border:1px solid #efe6da; box-shadow:0 10px 24px var(--shadow)}
.card h3{margin:0 0 6px; font-size:20px}
.meta{color:var(--muted); font-size:13px}
footer{padding:38px 0; color:var(--muted); text-align:center; border-top:1px dashed #e9dece;}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:14px}
.cards .card{background:transparent; border:none; box-shadow:none; padding:0}
.picture-box{background:var(--panel); border-radius:var(--radius); padding:12px; box-shadow:0 16px 40px var(--shadow); border:1px solid #efe6da; width:100%; margin:0;}
.picture-box img{width:100%; min-height:230px; border-radius:14px; object-fit:cover;}
.picture-box .caption, figcaption.caption{font-size:13px; color:var(--muted); margin-top:10px; text-align:center}
.mission-split{padding:72px 0 36px; border-top:none}
.mission-split .grid{display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:stretch;}
.mission-split .copy{background:var(--panel); border:1px solid #efe6da; border-radius:var(--radius); padding:28px; box-shadow:0 16px 40px var(--shadow);}
.mission-split .eyebrow{color:var(--accent-dark); text-transform:uppercase; letter-spacing:.18em; font-size:12px; margin-bottom:8px; position:relative; padding-left:14px;}
.mission-split .eyebrow:before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:8px; height:8px; border-radius:3px; background:var(--accent); box-shadow:0 0 0 6px rgba(200,163,106,.18);}
.mission-split h2{font-size:38px; margin:2px 0 8px}
.mission-split p{color:var(--muted); font-size:16px; line-height:1.6}
.mission-split .mini-cta{display:flex; gap:12px; margin-top:12px; flex-wrap:wrap}
.mission-split .visual{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:0 24px 60px var(--shadow); border:1px solid #efe6da; background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0, 0, 0, .08));}
.mission-split .visual .img{position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.25), rgba(0,0,0,.05)), url('assets/img/Mission Section  Banner.jpg') center/cover no-repeat; filter:saturate(105%);}
.transparency-hero{padding:20px 0 0; background:transparent;}
.transparency-hero .grid{grid-template-columns:0.75fr 1fr;}
.transparency-hero h3, .let-talk h3, .fr-body-sm h3{font-size:24px; font-family:'Bebas Neue', sans-serif;}
.transparency-hero ul{line-height:24px; color:var(--muted); margin-bottom:0;padding-left: 1rem;}
.transparency-hero .cta-row{margin-top:1.5rem;}
.menu-toggle{padding:0; width:auto; border:none; display:none; font-size:26px; cursor:pointer; background:none; color:var(--accent);}
.donate-card{display:grid; grid-template-columns:1.25fr 1fr; background:var(--panel); border:1px solid #e8dfd2; border-radius:var(--radius); overflow:hidden; box-shadow:0 6px 20px var(--shadow);}
.donate-copy{padding:32px; display:flex; flex-direction:column; justify-content:center; position:relative;}
.donate-title{margin:0 0 10px; font-size:clamp(22px,2.2vw,34px); line-height:1.15}
.donate-lede{margin:0 0 14px; color:var(--ink); opacity:.9; line-height:1.6}
.donate-points{list-style:none; margin:8px 0 18px 0; padding:0; display:grid; gap:8px}
.donate-points li{position:relative; padding-left:26px; color:var(--ink); opacity:.9}
.donate-points li::before{content:""; position:absolute; left:0; top:.1em; width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--accent) 0%, var(--accent-dark) 70%); box-shadow:0 0 0 2px rgba(200,163,106,.18);}
.donate-cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.donate-cta .btn.solid{background:linear-gradient(180deg, var(--accent), var(--accent-dark)); color:#fff; border:none}
.fineprint{margin:0; font-size:.9rem; color:var(--muted)}
.donate-visual{position:relative; min-height:260px}
.donate-visual img {width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.05)}
.donate-visual .soft-gradient{position:absolute; inset:0; background:radial-gradient(120% 120% at 0% 100%, rgba(245,239,230,.95) 0%, rgba(245, 239, 230, 0) 45%), linear-gradient(90deg, rgba(245, 239, 230, .55) 0%, rgba(245, 239, 230, 0) 40%); pointer-events:none;}
.let-talk .grid{gap:4rem; display:grid; margin-top:3.5rem; grid-template-columns:1fr 0.65fr;}
.let-talk h3{margin:1rem 0 1.5rem;}
.let-talk .contact-form{padding:2rem;position: relative;}
.let-talk .contact-form .contact-icon {position: absolute;height: 60px;top: -30px;background: #f5efe6;border-radius: 5px;border: 2px solid #efe6da;box-shadow: 0 10px 24px var(--shadow);}
.let-talk .contact-form .btn{width:100%; min-height:50px; border-radius:10px;cursor: pointer;}
.let-talk input, .let-talk textarea {margin-bottom:1.5rem;}
input:not([type="checkbox"]), textarea, select{width:100%; padding:0.85rem 1rem; min-height: 50px; border:none; border-radius:10px; background:#f5efe6; font-size:1rem; resize:none; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;border: 1px solid #efe6da;}
select{border-right: 20px solid #f5efe6;}
input:focus, textarea:focus, select:focus{outline:none;}
.let-talk .social-links{list-style:none; padding:0; display:flex; gap:1rem; margin-bottom:0;}
.let-talk .social-links a{width:50px; height:50px; display:flex; align-items:center; justify-content:center; background:var(--panel); color:var(--accent-dark); border:1px solid #efe6da; border-radius:var(--radius); box-shadow:0 10px 24px var(--shadow);}
.let-talk .social-links a svg{width:20px; height:20px;}
.mm-section h2, .mm-section .kicker{margin:0;}
.mm-section .donate-card {grid-template-columns: inherit;max-width: 800px;margin: auto;}
.mm-section .donate-visual {max-height: 344px;min-height: auto;}
.mm-section .donate-visual img{object-fit:contain;max-height: 344px;}
.mm-section .cta-row{justify-content:space-between; align-items: flex-end;margin: 0;}
.mm-section .cta-row > div {display: flex;gap: 12px;flex-wrap: wrap;}
.mm-section .cta-row .pib-logo{width:70px; margin-top:-15px;}
.resources .grid {display: grid; grid-template-columns: 1fr 1fr; gap: 28px;}
.resources .resources-img {height: 275px;width: 100%; object-fit: cover; border-radius: 10px}
.partner-logos {gap: 1rem;display: flex;margin: 0;justify-content: center;flex-wrap: wrap;}
.partner-logos a {background:var(--accent); border-radius: 10px;max-width: calc((100% - 3rem) / 4); display: flex; width: 100%;overflow: hidden;position: relative;}
.partner-logos a:after {position: absolute;inset: 0;background: radial-gradient(120% 120% at 0% 100%, rgba(155, 106, 45, 0.5) 0%, rgba(245, 239, 230, 0) 45%), linear-gradient(90deg, rgba(245, 239, 230, .55) 0%, rgba(245, 239, 230, 0) 40%);pointer-events: none;content: '';}
.partner-logos img {max-width: 100%;max-height: 150px;object-fit: contain;transition: all 1s ease;min-height: 90px;}
.partner-logos a:hover img {transform: scale(1.2);}
.stories .stories-img {margin: 1.5rem 0;}
.stories .stories-img img {width: 100%;max-height: 500px;object-fit: cover;border-radius: var(--radius);}
.gallery {text-align: center;}
.lb-nav a.lb-prev, .lb-nav a.lb-next {display: block !important;opacity: 1 !important;width: 40px !important;background-size: 100% !important;}
.fr-modal {position: fixed;inset: 0;display: flex;align-items: center;justify-content: center;z-index: 1000;visibility: hidden;opacity: 0;transition: opacity 0.3s ease;}
.fr-modal[aria-hidden="false"] {visibility: visible;opacity: 1;}
.fr-backdrop {position: absolute;inset: 0;background-color: #000;opacity: 0.8;}
.fr-dialog {position: relative;max-width: 860px;width: 90%;background: var(--panel);border-radius: var(--radius);overflow: hidden;border: 1px solid rgba(255, 255, 255, 0.08);z-index: 1;}
.fr-header {display: flex;align-items: center;justify-content: space-between;padding: 16px 20px;border-bottom: 1px solid #efe6da;}
.fr-header h2 {margin: 0;font-size: 24px;}
.fr-close {font-size: 1.5rem;line-height: 1;background: transparent;border: 0;cursor: pointer;}
.fr-body {padding: 20px;max-height: 65vh;overflow: auto;}
.fr-footer {padding: 16px 20px;border-top: 1px solid #efe6da;}
.fr-footer .btn {padding: 12px 30px;}
.modal-form .row + .row {margin-top: 1rem;}
.modal-form label {font-weight: 600;font-size: 14px;margin-bottom: 0.25rem;display: block;}
.modal-form label .asterisk {color: #dc3545; }
.modal-form .agree label {display: flex;align-items: center;gap: 5px;margin: 0;}
.modal-form .agree label input{accent-color: var(--accent-dark);}
.modal-form .agree label a {text-decoration: underline dotted;}
.modal-form .agree label a:hover {text-decoration: underline solid;}
.modal-form .two-col { display: flex; gap: 1rem; }
.modal-form .two-col .col { flex: 1; }
#volunteer-modal .fr-footer, #financial-resources-modal .fr-footer {display: flex;align-items: center;justify-content: space-between;gap: 28px;}
#volunteer-modal .fr-footer #v-status{font-size: 14px;}
.modal-form .error {border-color: #dc3545 !important;box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.18);}
.fr-section {margin: 1rem 0;padding: 1rem;border: 1px solid #efe6da;border-radius: var(--radius);background: var(--bg);}
.fr-section + .fr-section {margin: 1rem 0;}
.fr-section h3 {margin-top: 0;margin-bottom: 0.75rem;font-size:24px; font-family:'Bebas Neue', sans-serif;}
.fr-list {margin-bottom: 0;}
.fr-list li {margin-bottom: 0.5rem;line-height: 1.4;}
.fr-list a {color: var(--accent);text-decoration: none;font-weight: 600;}
.fr-list a:hover {text-decoration: underline;}
#setup-account-modal .fr-footer {display: flex;justify-content: flex-end;gap: 1rem;}
.fr-body-sm h3 {margin-bottom: -10px;}
.fr-body-sm .qr-placeholder { background: #f5efe6;font-size: 1rem;font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;border: 1px solid #efe6da;height: 200px;display: flex;justify-content: center;align-items: center;border-radius: var(--radius);}
.fr-body-sm .qr-btn .btn {margin-top: 1rem;}

@media (max-width: 1150px) {
.menu-toggle{display:block;}
.navlinks{left:0; right:0; top:70px; display:none; background:#000; position:absolute; padding:20px 30px; flex-direction:column; margin-top:1px; align-items:flex-start; background:rgba(245, 239, 230, 0.9); backdrop-filter:saturate(1.2) blur(8px);}
.navlinks.show{display:flex;}
}
@media (max-width: 900px){
.mission-split .grid{grid-template-columns:1fr; gap:20px}
.mission-split .visual{height:320px}
.hero .grid, .transparency-hero .grid, .resources .grid{grid-template-columns:1fr}
.cards, .card-row{grid-template-columns:1fr; gap:14px}
}
@media (max-width: 991.98px){
.donate-card, .let-talk .grid{grid-template-columns:1fr}
.donate-visual{order:-1; max-height:300px}
.donate-copy{padding:24px}
.donate-visual .soft-gradient{display:none;}
.let-talk .grid{gap:28px;}
/* .gallery a {display: flex;max-width: calc((100% - 2rem) / 3);} */
}
@media (min-width: 768px) {
.fr-body-sm {display: none;}
}
@media (max-width: 767.98px) {
#setup-account-modal .fr-footer {display: none;}
.fr-body-sm { margin-top: 1rem; }
.fr-body-sm .btn {width: 100%;}
}
@media (max-width:400px){
.mm-section .cta-row >div{width:100%;}
.mm-section .cta-row .pib-logo{margin-top:0;}
.partner-logos img {min-height: 75px;}
.partner-logos a {max-width: calc((100% - 2rem) / 3);}
.modal-form .two-col { flex-wrap: wrap; }
.modal-form .two-col .col { flex: unset; width: 100%; }
}