/* ============================================================
   VIBRANT HEALTH ADVOCATES — ABERDEEN BRANCH
   Warm & Human Community Design System
   ============================================================ */

/* --- Custom Properties --- */
:root {
  --cream:          #FAF4EC;
  --cream-mid:      #F2E8D5;
  --cream-dark:     #E0D0B8;
  --terracotta:     #C4622D;
  --terracotta-lt:  #E8956A;
  --terracotta-pale:#F7E8DF;
  --purple:         #7B2D8B;
  --purple-lt:      #F0D9F5;
  --purple-mid:     #C49AD4;
  --brown:          #4A2E1E;
  --brown-lt:       #7A5540;
  --text:           #2D1B0E;
  --text-mid:       #5C3D2E;
  --text-light:     #8B6E50;
  --white:          #FFFDF8;
  --r-sm:           10px;
  --r:              24px;
  --r-lg:           32px;
  --r-xl:           48px;
  --sh-sm:          0 2px 12px rgba(45,27,14,.08);
  --sh:             0 4px 24px rgba(45,27,14,.13);
  --sh-lg:          0 8px 48px rgba(45,27,14,.18);
  --sh-pol:         4px 8px 28px rgba(45,27,14,.20);
  --font:           system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font);
  background:var(--cream);
  color:var(--text);
  line-height:1.78;
  font-size:1.0625rem;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--terracotta);text-decoration:none;}
a:hover{text-decoration:underline;color:var(--brown);}
h1,h2,h3,h4,h5{
  font-weight:800;line-height:1.2;
  letter-spacing:-0.02em;color:var(--text);
}
h1{font-size:clamp(2rem,5vw,3.5rem);}
h2{font-size:clamp(1.6rem,3.5vw,2.5rem);}
h3{font-size:clamp(1.15rem,2.5vw,1.55rem);}
h4{font-size:1.05rem;}
p{line-height:1.82;margin-bottom:1em;}
p:last-child{margin-bottom:0;}
ul,ol{padding-left:1.4em;}

/* --- Layout --- */
.container{max-width:1180px;margin:0 auto;padding:0 1.5rem;}
.section{padding:5rem 0;}
.section--tight{padding:3rem 0;}
.section--cream{background:var(--cream);}
.section--cream-mid{background:var(--cream-mid);}
.section--terracotta-pale{background:var(--terracotta-pale);}
.section--purple-lt{background:var(--purple-lt);}
.section--brown{background:var(--brown);}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  background:var(--cream);
  border-bottom:2px dotted var(--cream-dark);
  position:sticky;top:0;z-index:200;
  padding:.7rem 0;
}
.site-nav{
  max-width:1180px;margin:0 auto;padding:0 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  position:relative;
}
.brand-lockup{
  display:flex;align-items:center;gap:.65rem;
  text-decoration:none;flex-shrink:0;
}
.brand-logo{
  width:46px;height:46px;object-fit:contain;
  border-radius:50%;flex-shrink:0;
}
.brand-wordmark{
  height:34px;width:auto;object-fit:contain;
  /* dark artwork on transparent — fine on cream header */
}
.nav-links{
  list-style:none;display:flex;align-items:center;gap:.2rem;flex-wrap:wrap;
}
.nav-links a{
  display:block;padding:.38rem .78rem;
  color:var(--text-mid);font-weight:700;font-size:.88rem;
  border-radius:999px;transition:background .18s,color .18s;
  text-decoration:none;letter-spacing:.01em;
}
.nav-links a:hover,.nav-links a.active{
  background:var(--purple-lt);color:var(--purple);
  text-decoration:none;
}
.nav-cta{
  background:var(--terracotta) !important;
  color:white !important;
}
.nav-cta:hover{
  background:var(--brown) !important;color:white !important;
}
.nav-toggle{
  display:none;background:none;
  border:2px solid var(--terracotta);border-radius:var(--r-sm);
  color:var(--terracotta);font-size:1.2rem;
  cursor:pointer;padding:.28rem .55rem;line-height:1;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-block;padding:.78rem 2rem;
  border-radius:999px;font-weight:800;font-size:.95rem;
  letter-spacing:.02em;cursor:pointer;
  transition:transform .18s,box-shadow .18s,background .18s;
  text-decoration:none;border:none;line-height:1.3;
  font-family:var(--font);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh);text-decoration:none;}
.btn-primary{background:var(--terracotta);color:white;}
.btn-primary:hover{background:#A84E22;color:white;}
.btn-purple{background:var(--purple);color:white;}
.btn-purple:hover{background:#60216E;color:white;}
.btn-outline{background:transparent;color:var(--terracotta);border:2.5px solid var(--terracotta);}
.btn-outline:hover{background:var(--terracotta);color:white;}
.btn-cream{background:var(--cream);color:var(--terracotta);}
.btn-cream:hover{background:var(--white);color:var(--brown);}
.btn-white{background:white;color:var(--purple);}
.btn-white:hover{background:var(--purple-lt);color:var(--purple);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:640px;
  display:flex;align-items:flex-start;
  overflow:hidden;
  padding-bottom:140px;
}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center 25%;
  background-repeat:no-repeat;
}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(45,27,14,.65) 0%,rgba(92,61,46,.4) 55%,rgba(196,98,45,.22) 100%);
}
.hero-content{
  position:relative;z-index:2;
  max-width:1180px;margin:0 auto;
  padding:5rem 1.5rem 3.5rem;
  color:white;width:100%;
}
.hero-content h1{
  color:white;max-width:680px;
  text-shadow:0 2px 10px rgba(0,0,0,.32);
  margin-bottom:1.25rem;
}
.hero-sub{
  color:rgba(255,255,255,.9);
  font-size:clamp(1rem,2vw,1.18rem);
  max-width:580px;line-height:1.72;
  text-shadow:0 1px 5px rgba(0,0,0,.22);
  margin-bottom:1.75rem;
}
/* Overlap card over hero */
.hero-overlap-wrapper{
  position:relative;z-index:10;
  margin-top:-110px;
  padding-bottom:1rem;
}
.hero-overlap-card{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:2.5rem 2.75rem;
  box-shadow:var(--sh-lg);
  border:3px solid var(--cream-dark);
  max-width:920px;
  margin:0 auto;
  position:relative;
}
.hero-overlap-card::before{
  content:'';position:absolute;
  top:-14px;left:2.75rem;
  width:64px;height:5px;
  background:var(--terracotta);border-radius:999px;
}

/* ============================================================
   SECTION LABELS & HEADERS
   ============================================================ */
.section-label{
  display:inline-block;font-size:.76rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--terracotta);background:var(--terracotta-pale);
  border-radius:999px;padding:.24rem .9rem;margin-bottom:.75rem;
  border:1.5px solid var(--terracotta-lt);
}
.section-header{margin-bottom:3rem;}
.section-header h2{margin-bottom:.7rem;}
.section-header p{color:var(--text-mid);font-size:1.04rem;max-width:620px;}
.centered{text-align:center;}
.centered .section-header p{margin:0 auto;}

/* ============================================================
   GRIDS
   ============================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}
.grid-stag{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2rem;align-items:start;
}
.grid-stag>*:nth-child(2){margin-top:3rem;}
.grid-stag>*:nth-child(3){margin-top:1.5rem;}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--white);border-radius:var(--r);
  padding:2rem;box-shadow:var(--sh-sm);
  border:2px solid var(--cream-dark);
  transition:transform .22s,box-shadow .22s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh);}
.card-icon{font-size:2.2rem;margin-bottom:1rem;display:block;}
.card h3{margin-bottom:.55rem;color:var(--terracotta);}
.card p{color:var(--text-mid);font-size:.95rem;}
.card--purple{border-color:var(--purple-mid);background:var(--purple-lt);}
.card--purple h3{color:var(--purple);}
.card--terracotta{border-color:var(--terracotta-lt);background:var(--terracotta-pale);}
.card-dotted{
  border:2.5px dashed var(--brown-lt);
  background:var(--white);border-radius:var(--r);padding:2rem;
}

/* ============================================================
   POLAROID CARDS
   ============================================================ */
.polaroid{
  background:var(--white);
  border:7px solid var(--white);
  border-bottom-width:40px;
  border-radius:6px;
  box-shadow:var(--sh-pol);
  display:block;
  transition:transform .28s,box-shadow .28s;
  cursor:default;
}
.polaroid:hover{
  transform:rotate(0deg) scale(1.03) !important;
  box-shadow:6px 14px 40px rgba(45,27,14,.24);
}
.polaroid img{
  width:100%;height:220px;object-fit:cover;
  display:block;border-radius:3px 3px 0 0;
}
.polaroid-caption{
  padding:.3rem .5rem;
  font-size:.78rem;color:var(--text-mid);font-weight:700;
  text-align:center;letter-spacing:.03em;
  position:absolute;bottom:6px;left:0;right:0;
}
.polaroid{position:relative;}
.pol-tl{transform:rotate(-2.8deg);}
.pol-tr{transform:rotate(2.2deg);}
.pol-sl{transform:rotate(-1.4deg);}
.pol-sr{transform:rotate(1.6deg);}

.polaroid-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2.5rem;align-items:start;
  padding:1.5rem 0 3rem;
}
.polaroid-row>*:nth-child(2){margin-top:2.5rem;}
.polaroid-row>*:nth-child(3){margin-top:5rem;}

/* ============================================================
   IMPACT STATS
   ============================================================ */
.stats-bar{background:var(--terracotta);padding:4rem 0;}
.stats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2rem;text-align:center;
}
.stat-item{color:white;}
.stat-number{
  font-size:clamp(2.6rem,5vw,3.75rem);font-weight:800;
  line-height:1;display:block;letter-spacing:-.04em;color:white;
}
.stat-label{
  font-size:.94rem;font-weight:600;
  color:rgba(255,255,255,.88);margin-top:.5rem;
  display:block;line-height:1.4;
}

/* ============================================================
   STAMP BADGE
   ============================================================ */
.stamp-badge{
  width:132px;height:132px;border-radius:50%;
  border:3.5px dashed var(--purple);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:var(--purple-lt);
  transform:rotate(-8deg);flex-shrink:0;
  text-align:center;padding:.9rem;
}
.stamp-badge .s1{font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);}
.stamp-badge .s2{font-size:.85rem;font-weight:800;color:var(--purple);line-height:1.25;margin:.15rem 0;}
.stamp-badge .s3{
  font-size:.58rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--purple);
  border-top:1.5px solid var(--purple-mid);
  padding-top:.22rem;margin-top:.1rem;
}

/* ============================================================
   SQUIGGLE DIVIDER
   ============================================================ */
.squig{width:100%;overflow:hidden;line-height:0;padding:1rem 0;}
.squig svg{width:100%;height:auto;display:block;}

/* ============================================================
   PAGE BANNER (non-hero pages)
   ============================================================ */
.page-banner{
  position:relative;height:360px;overflow:hidden;
}
.page-banner img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
}
.page-banner::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(45,27,14,.28) 0%,rgba(45,27,14,.6) 100%);
}
.page-banner-content{
  position:absolute;bottom:0;left:0;right:0;
  padding:2rem 1.5rem 2.5rem;z-index:2;color:white;
  max-width:1180px;margin:0 auto;
}
.page-banner-content h1{
  color:white;text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.page-banner-content p{
  color:rgba(255,255,255,.88);font-size:1.05rem;
  max-width:560px;text-shadow:0 1px 4px rgba(0,0,0,.2);
}

/* ============================================================
   PHOTO UTILITIES
   ============================================================ */
.photo-r{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);}
.photo-xl{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);}
.photo-r img,.photo-xl img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;}
.photo-split-rev>*:first-child{order:2;}
.photo-split-rev>*:last-child{order:1;}

/* ============================================================
   INTRO STRIP
   ============================================================ */
.intro-strip{
  background:var(--white);border-radius:var(--r-lg);
  padding:2.5rem 3rem;border:2px solid var(--cream-dark);
  position:relative;overflow:hidden;
}
.intro-strip::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(to right,var(--terracotta),var(--purple));
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.intro-strip p{font-size:1.05rem;color:var(--text-mid);line-height:1.82;}

/* ============================================================
   DOTTED ELEMENTS
   ============================================================ */
.dotted-box{
  border:2.5px dotted var(--terracotta-lt);
  border-radius:var(--r);padding:2rem;
}
.dotted-accent{
  border-left:4px dotted var(--purple);
  padding-left:1.25rem;margin:1.5rem 0;
}

/* ============================================================
   TRUSTEE CARD
   ============================================================ */
.trustee-card{
  background:var(--white);border-radius:var(--r);
  padding:1.75rem;text-align:center;
  box-shadow:var(--sh-sm);border:2px dashed var(--cream-dark);
}
.trustee-avatar{
  width:70px;height:70px;border-radius:50%;
  background:var(--terracotta-pale);
  margin:0 auto 1rem;
  display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;border:3px solid var(--cream-dark);
}
.trustee-card h4{font-size:1.05rem;margin-bottom:.25rem;}
.trustee-card .role{
  font-size:.8rem;color:var(--purple);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}

/* ============================================================
   PROGRAMME CARDS
   ============================================================ */
.prog-card{
  background:var(--white);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh);
  border:2px solid var(--cream-dark);
}
.prog-card-head{
  background:var(--terracotta-pale);
  padding:1.75rem 2rem 1.5rem;
  border-bottom:2px solid var(--cream-dark);
}
.prog-card-head .picon{font-size:2rem;margin-bottom:.65rem;display:block;}
.prog-card-head h3{color:var(--terracotta);margin-bottom:.45rem;}
.prog-card-head p{color:var(--text-mid);font-size:.94rem;line-height:1.65;margin:0;}
.prog-card-body{padding:1.75rem 2rem;}
.prog-card-body p{color:var(--text-mid);font-size:.94rem;line-height:1.78;margin:0;}

/* ============================================================
   ARTICLE / BLOG
   ============================================================ */
.article-card{
  background:var(--white);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-sm);
  border:2px solid var(--cream-dark);
  display:flex;flex-direction:column;
  transition:transform .22s,box-shadow .22s;
}
.article-card:hover{transform:translateY(-5px);box-shadow:var(--sh);}
.article-card-img{width:100%;height:220px;object-fit:cover;display:block;}
.article-card-body{
  padding:1.5rem;flex:1;
  display:flex;flex-direction:column;
}
.article-card-body h3{margin-bottom:.45rem;font-size:1.1rem;}
.article-card-body h3 a{color:var(--text);text-decoration:none;}
.article-card-body h3 a:hover{color:var(--terracotta);}
.article-dek{
  color:var(--text-mid);font-size:.9rem;line-height:1.62;
  margin-bottom:1rem;flex:1;
}
.read-more{
  color:var(--purple);font-weight:700;
  font-size:.86rem;letter-spacing:.03em;
}
.read-more:hover{color:var(--terracotta);}

/* Article page */
.article-hero-img{
  width:100%;height:420px;object-fit:cover;
  border-radius:var(--r-lg);
  margin-bottom:2.5rem;box-shadow:var(--sh-lg);
}
.article-wrap{max-width:740px;margin:0 auto;padding:0 1.5rem;}
.article-wrap h1{font-size:clamp(1.85rem,4vw,2.85rem);margin-bottom:.7rem;}
.article-dek-lg{
  font-size:1.13rem;color:var(--text-mid);line-height:1.72;
  margin-bottom:2rem;padding-bottom:1.5rem;
  border-bottom:2.5px dotted var(--cream-dark);
}
.article-wrap p{font-size:1.05rem;line-height:1.88;margin-bottom:1.6em;}
.article-back{
  display:inline-flex;align-items:center;gap:.35rem;
  font-weight:700;color:var(--terracotta);font-size:.9rem;
  margin-bottom:2rem;text-decoration:none;
}
.article-back:hover{color:var(--brown);text-decoration:none;}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.form-group{margin-bottom:1.4rem;}
.form-label{
  display:block;font-weight:700;font-size:.88rem;
  color:var(--text-mid);margin-bottom:.38rem;letter-spacing:.02em;
}
.form-input,.form-textarea,.form-select{
  width:100%;padding:.78rem 1.1rem;
  border-radius:var(--r-sm);border:2px solid var(--cream-dark);
  background:var(--white);font-family:var(--font);
  font-size:.97rem;color:var(--text);
  transition:border-color .18s,box-shadow .18s;
  appearance:none;
}
.form-input:focus,.form-textarea:focus,.form-select:focus{
  outline:none;border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(123,45,139,.12);
}
.form-textarea{min-height:150px;resize:vertical;}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section{
  background:var(--purple);padding:5.5rem 0;
  text-align:center;position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;
  top:-50px;left:-50px;
  width:220px;height:220px;border-radius:50%;
  background:rgba(255,255,255,.05);
}
.cta-section::after{
  content:'';position:absolute;
  bottom:-70px;right:-40px;
  width:300px;height:300px;border-radius:50%;
  background:rgba(255,255,255,.04);
}
.cta-section h2{
  color:white;margin-bottom:.8rem;
  max-width:680px;margin-left:auto;margin-right:auto;
}
.cta-section p{
  color:rgba(255,255,255,.86);font-size:1.05rem;
  max-width:540px;margin:0 auto 2rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--brown);color:rgba(255,255,255,.85);
  padding:4.5rem 0 2rem;
}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr;
  gap:3rem;padding-bottom:3rem;
  border-bottom:1.5px solid rgba(255,255,255,.14);
}
.footer-brand{
  display:flex;align-items:center;gap:.65rem;
  margin-bottom:1.2rem;
}
.footer-logo{
  width:42px;height:42px;object-fit:contain;
  border-radius:50%;
  filter:brightness(10) saturate(0);opacity:.88;
}
.footer-wordmark{
  height:30px;width:auto;object-fit:contain;
  filter:invert(1) brightness(2);opacity:.9;
}
.footer-about-text{
  font-size:.87rem;line-height:1.72;
  color:rgba(255,255,255,.7);max-width:380px;
  margin-bottom:1.2rem;
}
.footer-emails a{
  display:block;font-size:.82rem;
  color:rgba(255,255,255,.8);
  text-decoration:none;word-break:break-all;
  line-height:1.6;
}
.footer-emails a:hover{color:white;}
.footer-heading{
  font-size:.75rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--terracotta-lt);
  margin-bottom:1rem;display:block;
}
.footer-nav-list{
  list-style:none;padding:0;
  display:flex;flex-direction:column;gap:.4rem;
}
.footer-nav-list a{
  color:rgba(255,255,255,.75);font-size:.9rem;
  text-decoration:none;transition:color .18s;
}
.footer-nav-list a:hover{color:white;text-decoration:none;}
.footer-bottom{
  padding-top:1.5rem;font-size:.78rem;
  color:rgba(255,255,255,.45);
  display:flex;flex-wrap:wrap;gap:.5rem 2rem;
  justify-content:space-between;align-items:center;
}

/* ============================================================
   DOT PATTERN BG (decorative)
   ============================================================ */
.dot-bg{
  background-image:radial-gradient(circle,rgba(196,98,45,.14) 1px,transparent 1px);
  background-size:22px 22px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-stag{grid-template-columns:repeat(2,1fr);}
  .grid-stag>*:nth-child(2){margin-top:0;}
  .grid-stag>*:nth-child(3){margin-top:0;}
  .polaroid-row{grid-template-columns:repeat(2,1fr);}
  .polaroid-row>*:nth-child(3){margin-top:0;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-grid>*:first-child{grid-column:1/-1;}
  .photo-split{grid-template-columns:1fr;}
  .photo-split-rev>*{order:unset;}
  .stats-grid{grid-template-columns:repeat(3,1fr);gap:1rem;}
}

@media (max-width:640px){
  .grid-3,.grid-2,.grid-4,.grid-stag{grid-template-columns:1fr;}
  .polaroid-row{grid-template-columns:1fr;}
  .polaroid-row>*:nth-child(2){margin-top:0;}
  .stats-grid{grid-template-columns:1fr;gap:1.5rem;}
  .footer-grid{grid-template-columns:1fr;gap:2rem;}
  .nav-links{
    display:none;position:absolute;
    top:100%;left:0;right:0;
    background:var(--cream);
    flex-direction:column;
    padding:1rem;
    border-bottom:2px dotted var(--cream-dark);
    box-shadow:var(--sh);z-index:300;
  }
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
  .site-nav{flex-wrap:wrap;}
  .hero{min-height:560px;padding-bottom:110px;}
  .hero-overlap-wrapper{margin-top:-70px;}
  .hero-overlap-card{padding:1.5rem;margin:0 .75rem;}
  .intro-strip{padding:1.75rem 1.5rem;}
  .section{padding:3.5rem 0;}
  .cta-section{padding:4rem 0;}
  .page-banner{height:280px;}
  .article-hero-img{height:260px;}
  h1{font-size:clamp(1.7rem,8vw,2.5rem);}
}