/* ============================================
   Two Sisters Foundation — Design System
   Palette: Caribbean Teal / Haitian Amber / Lush Mint / Warm Parchment
   Type: Fraunces (display) + Plus Jakarta Sans (body)
   ============================================ */

:root{
  --teal-900:#0d3535;
  --teal-800:#123f3f;
  --teal-700:#175050;
  --teal-600:#1f6363;
  --teal-100:#e3edec;
  --amber-600:#d9720f;
  --amber-500:#ea8c1f;
  --amber-400:#f2a63f;
  --amber-100:#fdedd6;
  --mint-500:#4f9d78;
  --mint-100:#e7f3ea;
  --parchment:#fbf3e6;
  --parchment-dark:#f3e6d0;
  --cream:#fffdf8;
  --ink:#20302f;
  --ink-soft:#4a5a58;
  --line:#e4dccb;
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:8px;
  --shadow-soft:0 20px 45px -20px rgba(13,53,53,0.25);
  --shadow-card:0 10px 30px -12px rgba(13,53,53,0.18);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Plus Jakarta Sans', sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  line-height:1.12;
  margin:0 0 .5em;
  color:var(--teal-900);
  font-weight:600;
}
h1{font-size:clamp(2.4rem,4.6vw,3.8rem); font-weight:600;}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem);}
h3{font-size:1.4rem;}
p{margin:0 0 1em;color:var(--ink-soft);}
.container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.section{padding:96px 0;}
.section-tight{padding:64px 0;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:.78rem; color:var(--amber-600);
  background:var(--amber-100);
  padding:7px 16px; border-radius:999px;
  margin-bottom:18px;
}
.eyebrow.on-dark{background:rgba(255,255,255,.14); color:var(--amber-400);}
.lede{font-size:1.15rem; max-width:620px;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.98rem;
  padding:14px 26px; border-radius:999px;
  border:2px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--amber-500); color:#fff; box-shadow:0 12px 24px -10px rgba(217,114,15,.55);}
.btn-primary:hover{background:var(--amber-600);}
.btn-outline-light{border-color:rgba(255,255,255,.55); color:#fff; background:transparent;}
.btn-outline-light:hover{background:rgba(255,255,255,.12);}
.btn-ghost{color:var(--teal-800); font-weight:700; padding:14px 6px;}
.btn-dark{background:var(--teal-900); color:#fff;}
.btn-dark:hover{background:var(--teal-700);}
.btn-outline-dark{border-color:var(--teal-900); color:var(--teal-900); background:transparent;}
.btn-outline-dark:hover{background:var(--teal-900); color:#fff;}
.btn-sm{padding:10px 18px; font-size:.88rem;}
.btn-block{width:100%; justify-content:center;}

/* Navbar */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,253,248,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:var(--maxw); margin:0 auto;}
.brand{display:flex; align-items:center; gap:12px; font-family:'Fraunces',serif;}
.brand-logo{width:84px; height:84px; border-radius:50%; object-fit:cover; display:block; flex-shrink:0; box-shadow:0 3px 10px rgba(0,0,0,.18);}
.footer-logo{width:74px; height:74px;}
@media (max-width:920px){.brand-logo{width:60px; height:60px;}}
.brand-name{font-size:1.15rem; font-weight:700; color:var(--teal-900); line-height:1.1;}
.brand-sub{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:.62rem; letter-spacing:.16em; color:var(--amber-600); font-weight:700;}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a{font-weight:600; font-size:.95rem; color:var(--ink); position:relative;}
.nav-links a:hover{color:var(--teal-700);}
.nav-links a.active{color:var(--amber-600);}
.nav-cta{display:flex; align-items:center; gap:18px;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer;}
.lang-toggle{display:flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-size:.8rem; font-weight:700;}
.lang-toggle button{border:none; background:#fff; color:var(--ink-soft); padding:7px 12px; cursor:pointer; font-weight:700; font-size:.8rem; font-family:'Plus Jakarta Sans',sans-serif;}
.lang-toggle button.active{background:var(--teal-900); color:#fff;}
.lang-toggle button:not(.active):hover{background:var(--teal-100);}
@media (max-width:920px){
  .nav-links{position:fixed; inset:96px 0 0 0; background:var(--cream); flex-direction:column; align-items:flex-start; padding:28px; gap:20px; transform:translateX(100%); transition:transform .25s ease; overflow-y:auto;}
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:block;}
  .nav-cta .btn span{display:none;}
}

/* Hero */
.hero{position:relative; overflow:hidden; background:var(--teal-900);}
.hero-media{position:absolute; inset:0;}
.hero-media img{width:100%; height:100%; object-fit:cover; opacity:.55;}
.hero-media::after{content:"";position:absolute; inset:0; background:linear-gradient(100deg, rgba(13,53,53,.96) 18%, rgba(13,53,53,.72) 46%, rgba(13,53,53,.28) 100%);}
.hero-inner{position:relative; z-index:2; padding:110px 28px 90px; max-width:var(--maxw); margin:0 auto;}
.hero-inner h1{color:#fff; max-width:760px;}
.hero-inner .lede{color:rgba(255,255,255,.86); max-width:600px;}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px;}
.hi-underline{color:var(--amber-400); text-decoration:underline; text-decoration-color:rgba(242,166,63,.5); text-underline-offset:6px;}

/* Page hero (interior pages) */
.page-hero{background:var(--teal-900); color:#fff; padding:80px 0 64px; position:relative; overflow:hidden;}
.page-hero::before{content:"";position:absolute; inset:0; background:radial-gradient(circle at 85% 20%, rgba(234,140,31,.28), transparent 55%);}
.page-hero .container{position:relative; z-index:1;}
.page-hero h1{color:#fff; max-width:760px;}
.page-hero p{color:rgba(255,255,255,.82); max-width:620px;}
.crumb{color:var(--amber-400); font-weight:700; font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:14px; display:block;}
.page-hero-logo{width:160px; height:160px; border-radius:50%; object-fit:cover; display:block; margin-bottom:20px; box-shadow:0 10px 30px rgba(0,0,0,.35); border:4px solid rgba(255,255,255,.9);}
@media (max-width:600px){.page-hero-logo{width:120px; height:120px;}}

/* Grid helpers */
.grid{display:grid; gap:32px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}
@media (min-width:601px) and (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}

.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
@media (max-width:900px){.split{grid-template-columns:1fr; gap:36px;}}

/* Cards */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-card);}
.card-flat{background:var(--parchment); border-radius:var(--radius-lg); padding:32px;}
.icon-badge{width:56px; height:56px; border-radius:16px; background:var(--teal-100); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.icon-badge svg{width:28px; height:28px; stroke:var(--teal-800);}
.icon-badge.amber{background:var(--amber-100);}
.icon-badge.amber svg{stroke:var(--amber-600);}

.bg-teal{background:var(--teal-900); color:#fff;}
.bg-teal h2, .bg-teal h3{color:#fff;}
.bg-teal p{color:rgba(255,255,255,.82);}
.bg-mint{background:var(--mint-100);}
.bg-parchment{background:var(--parchment);}

/* Photo frame */
.photo-frame{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft);}
.photo-frame img{width:100%; height:100%; object-fit:cover;}
.photo-tag{position:absolute; right:20px; bottom:-20px; background:var(--teal-900); color:#fff; border-radius:var(--radius-md); padding:18px 22px; max-width:210px; box-shadow:var(--shadow-card);}
.photo-tag .num{font-family:'Fraunces',serif; font-size:2.1rem; color:var(--amber-400); font-weight:700; line-height:1;}
.photo-tag p{color:rgba(255,255,255,.85); font-size:.88rem; margin:6px 0 0;}

/* Quote block */
.quote-block{border-left:4px solid var(--amber-500); padding-left:20px; font-style:italic; font-family:'Fraunces',serif; font-size:1.35rem; color:var(--teal-900); margin:22px 0;}

/* Checklist */
.check-list{display:grid; grid-template-columns:1fr 1fr; gap:12px 24px;}
@media (max-width:600px){.check-list{grid-template-columns:1fr;}}
.check-list li{display:flex; align-items:center; gap:10px; color:#fff; font-weight:600;}
.check-list li svg{flex-shrink:0; width:20px; height:20px;}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
@media (max-width:800px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{text-align:center; padding:28px 16px; background:rgba(255,255,255,.06); border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.12);}
.stat .num{font-family:'Fraunces',serif; font-size:2.4rem; color:var(--amber-400); font-weight:700;}
.stat .label{color:rgba(255,255,255,.78); font-size:.92rem; font-weight:600;}

/* Program cards */
.prog-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-card); height:100%; display:flex; flex-direction:column;}
.prog-num{font-family:'Fraunces',serif; color:var(--amber-500); font-weight:700; font-size:1rem; margin-bottom:6px;}
.prog-card .tag-line{font-weight:700; color:var(--teal-700); font-size:.85rem; margin-bottom:10px;}
.prog-card ul{margin-top:10px;}
.prog-card ul li{position:relative; padding-left:18px; margin-bottom:6px; color:var(--ink-soft); font-size:.92rem;}
.prog-card ul li::before{content:"—"; position:absolute; left:0; color:var(--amber-500);}
.badge-phase{display:inline-block; background:var(--teal-100); color:var(--teal-800); font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px; margin-bottom:10px; letter-spacing:.03em;}

/* Program card with photo (Programs page) */
.pc-row{display:flex; gap:22px; align-items:flex-start; margin-bottom:6px;}
.pc-text{flex:1; min-width:0;}
.pc-text h3{margin-bottom:.35em;}
.pc-photo{width:38%; max-width:170px; flex-shrink:0;}
.pc-photo img{width:100%; height:180px; object-fit:cover; border-radius:18px; box-shadow:var(--shadow-card); display:block;}
.prog-card.prog-card-photo ul{margin-top:14px;}
@media (max-width:600px){
  .pc-row{flex-direction:column;}
  .pc-photo{width:100%; max-width:none;}
  .pc-photo img{height:190px;}
}
.lead-photo-row{display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; margin-bottom:6px;}
.lead-photo-row .pc-text{flex:1; min-width:260px;}
.lead-photo-row .pc-photo{width:220px; max-width:100%;}
.lead-photo-row .pc-photo img{height:230px; object-fit:cover; border-radius:18px; box-shadow:0 20px 45px -18px rgba(0,0,0,.5); display:block;}

/* Values pills */
.values-wrap{display:flex; flex-wrap:wrap; gap:12px;}
.value-pill{background:#fff; border:1px solid var(--line); padding:12px 20px; border-radius:999px; font-weight:700; color:var(--teal-800); font-size:.92rem; box-shadow:var(--shadow-card);}

/* FAQ accordion */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:22px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:700; font-size:1.05rem; color:var(--teal-900); font-family:'Fraunces',serif;}
.faq-q .plus{transition:transform .2s ease; color:var(--amber-500); font-size:1.4rem; font-weight:400;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .28s ease;}
.faq-a-inner{padding-bottom:22px; color:var(--ink-soft);}

/* Donate options */
.donate-option{border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; background:#fff; box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:10px;}
.donate-option.featured{border-color:var(--amber-500); position:relative;}
.donate-option.featured::before{content:"Most Impactful"; position:absolute; top:-14px; right:24px; background:var(--amber-500); color:#fff; font-size:.72rem; font-weight:700; padding:5px 14px; border-radius:999px;}
.don-amt{font-family:'Fraunces',serif; font-size:1.8rem; color:var(--teal-900); font-weight:700;}

/* Contact form */
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:16px;}
.field label{display:block; font-weight:700; font-size:.88rem; margin-bottom:6px; color:var(--teal-900);}
.field input, .field textarea, .field select{
  width:100%; padding:13px 16px; border-radius:var(--radius-sm); border:1px solid var(--line);
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.96rem; background:var(--cream);
}
.field input:focus, .field textarea:focus, .field select:focus{outline:2px solid var(--amber-400); border-color:var(--amber-400);}

/* Footer */
.site-footer{background:var(--teal-900); color:rgba(255,255,255,.82); padding:72px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr; gap:32px;}}
.footer-grid h4{color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px;}
.footer-grid a{display:block; margin-bottom:10px; color:rgba(255,255,255,.72); font-size:.94rem;}
.footer-grid a:hover{color:var(--amber-400);}
.footer-brand p{color:rgba(255,255,255,.68); max-width:280px;}
.social-row{display:flex; gap:12px; margin-top:16px;}
.social-row a{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; margin:0;}
.social-row a:hover{background:var(--amber-500);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.85rem; color:rgba(255,255,255,.6);}
.footer-bottom a{color:rgba(255,255,255,.6);}
.footer-bottom a:hover{color:#fff;}

/* misc */
.divider{height:1px; background:var(--line); margin:48px 0;}
.tag-strip{display:flex; flex-wrap:wrap; gap:10px;}
.tag-chip{background:var(--mint-100); color:var(--teal-800); font-weight:700; font-size:.82rem; padding:6px 14px; border-radius:999px;}
.new-org-note{background:var(--amber-100); border:1px solid var(--amber-400); border-radius:var(--radius-md); padding:20px 24px; color:var(--teal-900); font-weight:600;}
.section-head{max-width:680px; margin-bottom:48px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.pill-nav{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px;}
.pill-nav a{background:#fff; border:1px solid var(--line); padding:9px 18px; border-radius:999px; font-weight:700; font-size:.88rem; color:var(--teal-800);}
.pill-nav a:hover{background:var(--teal-900); color:#fff; border-color:var(--teal-900);}