:root{
  --container: 1180px;
  --brown-900: #2f1b11;
  --brown-800: #3a2416;
  --brown-700: #4a2f1e;
  --brown-600: #5a3b2b;
  --gold-500: #F3A63A;
  --gold-600: #E1922F;
  --gold-700: #C67F27;
  --cream-50: #fffbf7;
  --muted: #847a70;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#222;
  background:#fff;
  line-height:1.6;
}

.container{width:min(var(--container), 92%); margin-inline:auto}
a{color:inherit;text-decoration:none}

.btn{display:inline-flex;align-items:center;gap:.6rem;border-radius:10rem;padding:.7rem 1.2rem;border:1px solid transparent;font-weight:600;letter-spacing:.02em;transition:.2s ease-in-out}
.btn .arrow{font-size:1.2em;line-height:1}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:1rem 1.25rem;border-radius:14px}
.btn-sm{padding:.55rem .9rem;border-radius:10px}
.btn-pill{border-radius:999px;padding:.8rem 1.3rem}
.btn-accent{background:var(--gold-500);color:#201309;border-color:var(--gold-600);box-shadow:0 10px 20px rgba(226,146,47,.18)}
.btn-accent:hover{background:var(--gold-600)}
.btn-ghost{background:rgba(0,0,0,.35);color:#fff;border-color:rgba(255,255,255,.25)}
.btn-ghost:hover{background:rgba(0,0,0,.45)}
.btn-outline{border-color:#d7c8b7;color:#3a2a1e;background:#fff}
.btn-outline:hover{border-color:#c2b09b;background:#faf7f3}
.btn-with-icon .arrow{display:inline-block;transform:translateX(0);transition:transform .2s ease}
.btn-with-icon:hover .arrow{transform:translateX(3px)}

/* === NAV === */
.site-header{position:sticky;top:0;z-index:30;background:rgba(34,22,14,.5);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:72px;color:#fff}
.brand{display:flex;align-items:center;gap:1rem}
.logo{display:inline-block;width:110px;border-radius:12px;overflow:visible;box-shadow:0 6px 12px rgba(0,0,0,.18);background:#fff}
.logo img{display:block;width:100%;height:auto}
.logo.small{width:96px;box-shadow:none}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:"Fraunces", serif;font-weight:700;letter-spacing:.02em}
.brand-sub{font-size:.78rem;opacity:.9}

.primary-nav{display:flex;gap:1.6rem;align-items:center}
.primary-nav a{opacity:.9}
.primary-nav a.active{opacity:1;font-weight:600}
.primary-nav a:hover{opacity:1}

.contact-cta{margin-left:.6rem}

/* mobile toggle */
.nav-toggle{display:none;flex-direction:column;gap:4px;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.25);border-radius:9px;background:transparent;color:#fff}
.nav-toggle .bar{width:20px;height:2px;background:#fff;border-radius:2px}

/* mobile drawer */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:35}
.mobile-drawer{position:fixed;top:0;right:-100%;height:100dvh;width:min(82%, 360px);background:#22160e;color:#fff;z-index:40;padding:18px 18px 24px 18px;display:flex;flex-direction:column;gap:10px;transition:right .24s ease}
.mobile-drawer.open{right:0}
.mobile-drawer .m-item{padding:10px 6px;border-radius:8px}
.mobile-drawer .m-item.active, .mobile-drawer .m-item:hover{background:rgba(255,255,255,.08)}
.mobile-drawer hr{border:none;border-top:1px solid rgba(255,255,255,.12);margin:10px 0}
.mobile-drawer .m-cta{align-self:flex-start}

/* === HERO === */
.hero{position:relative;min-height:76vh;display:flex;align-items:center;color:#fff}
.hero-bg{position:absolute;inset:0;background-image:linear-gradient(to bottom, rgba(10,6,2,.65), rgba(10,6,2,.55) 35%, rgba(10,6,2,.55) 70%, rgba(10,6,2,.8)), url('assets/hero.jpg');background-size:cover;background-position:center;z-index:-1}
.hero-inner{padding-block:7rem 5rem}
.hero-title{font-family:"Fraunces", serif;font-weight:700;font-size: clamp(2.4rem, 4.3vw, 4.2rem);line-height:1.15; letter-spacing:.01em; margin:0 0 1rem 0}
.hero-title span{display:block}
.hero-sub{font-size:1.12rem;opacity:.95;margin:0 0 1.6rem 0}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.hero-dots{margin-top:3.5rem}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);margin-right:8px}
.dot.active{background:#fff}

/* === GENERIC SECTION === */
.section{padding-block:4.5rem}
.eyebrow{font-size:.9rem; text-transform:uppercase; letter-spacing:.18em; font-weight:600;color:#7a6d62; margin:0 0 .7rem 0}
.display{font-family:"Fraunces", serif;font-weight:700;font-size: clamp(2.4rem, 5vw, 4.1rem);line-height:1.08}
.display-sm{font-family:"Fraunces", serif;font-weight:700;font-size: clamp(2.0rem, 3.8vw, 2.8rem);line-height:1.12;margin:.2rem 0 1.1rem 0}

/* === ABOUT === */
.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;align-items:start}
.about-right p{color:#5d534b;max-width:54ch}
.about .btn-outline{margin-top:1rem}

/* === BAND === */
.band{background:radial-gradient(circle at 8px 8px, rgba(255,255,255,.1) 1px, transparent 1px) 0 0/12px 12px, var(--brown-800);color:#fff;text-align:center;padding-block:4.2rem}
.band-title{font-family:"Fraunces", serif;font-weight:700;font-size: clamp(1.8rem, 3vw, 2.6rem);line-height:1.2; margin:.2rem auto 1rem; max-width:24ch}
.band-copy{opacity:.95;margin:0 0 1.4rem 0}
.band-btn{margin-top:.4rem}

/* === SERVICES === */
.services .card-grid{margin-top:2.2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.card{background:#fff;border:1px solid #efe7dc;border-radius:16px;padding:1.4rem 1.2rem 1.2rem;box-shadow:0 8px 24px rgba(28,14,6,.06)}
.card .icon{--ico: #8b6c54; color:var(--gold-700); display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:rgba(243,166,58,.14);margin-bottom:.5rem}
.card .icon svg{width:32px;height:32px}
.card h3{margin:.3rem 0 .2rem 0;font-size:1.2rem}
.card p{color:#5d534b;margin:0 0 .6rem 0}
.list{padding-left:1rem;margin:0}
.list li{margin:.36rem 0; list-style:'✦ '; padding-left:.4rem}

/* === SUPPORT === */
.support{background:var(--brown-800);color:#ffeede;padding-block:4.5rem}
.support-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:3rem;align-items:center}
.support .display-sm{color:#ffb865}
.support-intro{max-width:62ch}
.features{list-style:none;padding:0;margin:1.2rem 0 0 0;display:grid;gap:.9rem}
.features li{display:grid;grid-template-columns:32px 1fr;gap:.8rem;align-items:start}
.feat-ico{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(243,166,58,.14);color:#f3a63a;font-weight:700;line-height:1}

.support-media{position:relative;min-height:320px}
.photo{position:absolute;border-radius:10px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.photo.primary{width:360px;right:8%;top:-10px;border-radius:10px}
.photo.secondary{width:280px;right:30%;bottom:-40px;transform:rotate(-2deg)}
.photo img{display:block;width:100%;height:100%;object-fit:cover}

/* === FOOTER === */
.site-footer{background:var(--brown-900);color:#f5eee7; padding-top:2.8rem}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr; gap:2.2rem; align-items:start}
.newsletter h4{font-size:1.4rem;margin:.3rem 0}
.newsletter p{color:#d5c5b5;margin:.2rem 0 1rem 0}
.subscribe{display:flex;gap:.6rem;max-width:520px}
.subscribe input{flex:1; padding:.8rem 1rem;border-radius:6px;border:1px solid #6b5446;background:#3a261a;color:#fff}
.subscribe input::placeholder{color:#d2c2b5}
.subscribe .btn{border-radius:6px}
.footer-col h5{margin:0 0 .4rem 0}
.f-list{list-style:none;padding:0;margin:0}
.f-list li{margin:.45rem 0}
.f-list a{color:#e9d7c6;opacity:.95}
.f-list a:hover{opacity:1;text-decoration:underline}
.social{display:flex;gap:.7rem;margin-top:1rem}
.social-ico{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid #6b5446;border-radius:50%;font-weight:700}
.copyright{border-top:1px solid #442a1c;margin-top:2rem;padding:.9rem 0;text-align:center;color:#cdb8a6}

/* === UTIL === */
.center{text-align:center;margin-top:1.6rem}
.no-scroll{overflow:hidden}
.donate-modal{position:fixed;inset:0;background:rgba(15,10,6,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:2rem;z-index:120}
.donate-modal[hidden]{display:none}
.donate-dialog{position:relative;width:min(90vw,720px);height:min(90vh,760px);background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(12,8,4,.45);overflow:hidden;display:flex;flex-direction:column}
.donate-dialog iframe{flex:1;border:0;background:#fff}
.donate-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:999px;border:none;background:rgba(0,0,0,.65);color:#fff;font-size:1.4rem;font-weight:600;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease}
.donate-close:hover{background:rgba(0,0,0,.8)}

/* === RESPONSIVE === */
@media (max-width: 1000px){
  .services .card-grid{grid-template-columns:1fr 1fr}
  .support-grid{grid-template-columns:1fr;gap:2rem}
  .support-media{min-height:240px}
  .photo.primary{position:relative;right:unset;top:unset;width:100%;max-width:520px;margin-inline:auto}
  .photo.secondary{right:unset;bottom:unset;transform:none;left:6%;top:40%;width:55%}
}

@media (max-width: 760px){
  .primary-nav{display:none}
  .nav-toggle{display:flex}
  .contact-cta{display:none}
  .hero{min-height:70vh}
  .hero-inner{padding-block:5.4rem 3.6rem}
  .hero-sub{font-size:1rem}
  .about-grid{grid-template-columns:1fr;gap:1.5rem}
  .services .card-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:1.4rem}
  .donate-dialog{width:96vw;height:90vh}
}

@media (max-width: 480px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .btn-lg{width:100%;justify-content:center}
  .band{padding-block:3.3rem}
  .section{padding-block:3.6rem}
}