/* ========================
   Fonts & global reset
   ======================== */
   * { margin: 0; padding: 0; box-sizing: border-box; }
   html { scroll-behavior: smooth; }
   body {
     font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
     color: #222; background: #fff; line-height: 1.6;
   }
   .container { width: 90%; max-width: 1200px; margin: auto; }
   img { max-width: 100%; height: auto; display: block; }
   a { color: #12592f; text-decoration: none; }
   
   /* ================================
      Header (photo banner w/ overlay)
      ================================ */
   .site-header{
     position:relative;
     inline-size:100%;
     aspect-ratio:16/9;
     min-block-size:56svh;      /* tall enough on phones */
     max-block-size:760px;      /* not too tall on desktop */
     overflow:hidden;
   }
   @media (max-width:640px){
     .site-header{ aspect-ratio:3/4; min-block-size:68svh; }
   }
   
   .header-image{
     position:absolute; inset:0;
     inline-size:100%; block-size:100%;
     object-fit:cover;
     object-position: 20% 40%;  /* adjust to frame subject */
   }
   
   /* Overlay spans full header; absolute layout (single source of truth) */
   .header-container{
     position:absolute; inset:0;
     width:100% !important; max-width:none !important; margin:0 !important;
     padding:0;
     background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.22) 100%);
     z-index:2;
     --edge: clamp(12px, 3vw, 32px);
   }
   
   /* Logo top-left */
   .brand{
     position:absolute;
     top: var(--edge);
     left: var(--edge);
     display:inline-flex; align-items:center; gap:.5rem;
     z-index:3;
   }
   .logo-img{
     width: clamp(90px,16vw,170px);
     height:auto;
     filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
   }
   
   /* Nav top-right */
   .nav-links{
     position:absolute;
     top: max(var(--edge), env(safe-area-inset-top));
     right: calc(var(--edge) + env(safe-area-inset-right));
     display:flex; flex-wrap:wrap; gap: clamp(6px,1.2vw,14px);
     z-index:4;
   }
   .nav-links a{
     background:#622985; color:#fff; font-weight:600;
     font-size: clamp(.85rem,1.6vw,1rem);
     padding: clamp(6px,.9vw,10px) clamp(10px,1.4vw,14px);
     border-radius:999px; box-shadow:0 2px 10px rgba(0,0,0,.12);
   }
   
   /* Purple title at bottom-right */
   .hero-text{
     position:absolute;
     right: calc(0px + env(safe-area-inset-right));
     bottom: clamp(12px, 3vw, 28px);
     z-index:3;
   
     font-family:'Playfair Display', ui-serif, Georgia, serif;
     font-weight:700;
     font-size: clamp(1.3rem, 6.2vw, 4rem);
     line-height:1.05; color:#fff;
   
     background-color: rgba(98,41,133,.62);
     padding: clamp(8px,1.8vw,18px) clamp(12px,3vw,28px);
     border-radius: 12px 0 0 12px;
     text-align:right;
   
     max-width:min(92vw, 720px);
     padding-right: calc(16px + env(safe-area-inset-right));
     text-shadow:0 2px 10px rgba(0,0,0,.35);
     box-shadow:0 6px 20px rgba(0,0,0,.15);
     overflow-wrap:anywhere; word-break:break-word;
   }
   @supports(backdrop-filter: blur(1px)){
     .hero-text{ backdrop-filter:saturate(120%) blur(1px); }
   }
   
   /* Tiny phones: center nav/title to avoid clipping */
   @media (max-width: 480px) {
     .nav-links { left: 50%; right: auto; transform: translateX(-50%); margin-top: 6px; }
     .hero-text {
       left: 50%; right: auto; transform: translateX(-50%);
       text-align: center; border-radius: 12px; max-width: calc(100% - 24px);
     }
   }
   
   /* ======================
      Content blocks
      ====================== */
   .hero {
     text-align: center;
     padding: 3rem 1rem;
     background: #fff;
   }
   .hero h1 {
     font-family: 'Playfair Display', ui-serif, Georgia, serif;
     font-size: clamp(1.75rem, 5vw, 2.75rem);
     margin-bottom: 1.2rem;
     color: #12592f;
   }
   .hero p {
     font-size: clamp(1rem, 2.5vw, 1.125rem);
     max-width: 800px;
     margin: 0 auto;
   }
   .hero-community { color: #622985; }
   .hero-community-donate { 
    color: #ffffff;
    text-align: center;
  }

  .hero-community p{
    margin-bottom: 1rem;
    color:white;
    max-width: 900px;
    text-align:center;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1rem, 2.3vw, 1.125rem);
  }
   
   .details { background-color: #622985; }
   .details-text { color: #ffffff; }
   
   .grid-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     align-items: center;
   }
   .oca-grid-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
   }
   
   .community-impact { padding: clamp(1.5rem, 5vw, 3rem) 1rem; }
   .community-impact h2 {
     font-family: 'Playfair Display', ui-serif, Georgia, serif;
     font-size: 2rem;
     color: #003366;
     margin-bottom: 1rem;
     text-align: center;
   }
   .community-impact p {
     margin-bottom: 1rem;
     max-width: 900px;
     margin-left: auto;
     margin-right: auto;
     font-size: clamp(1rem, 2.3vw, 1.125rem);
   }
   
   /* Stack grids on narrow screens */
   @media (max-width: 860px) {
     .grid-container { grid-template-columns: 1fr; }
     .oca-grid-container { grid-template-columns: 1fr 1fr; }
   }
   @media (max-width: 520px) {
     .oca-grid-container { grid-template-columns: 1fr; }
   }
   
   /* ======================
      Centered vertical caps
      ====================== */
   .section-caps { position: relative; }
   .section-caps::before,
   .section-caps::after {
     content: "";
     display: block;
     width: 2px;
     height: clamp(36px, 6vh, 64px);
     background: #111;
     margin-inline: auto;
     border-radius: 2px;
     box-shadow: 0 0 0.01px rgba(0,0,0,0.01), 0 1px 0 rgba(0,0,0,0.06);
   }
   .section-caps::before { margin-bottom: clamp(16px, 3vh, 28px); }
   .section-caps::after  { margin-top:    clamp(16px, 3vh, 28px); }
   
   /* Utility: screen-reader only */
   .visually-hidden {
     position: absolute !important;
     width: 1px; height: 1px; padding: 0; margin: -1px;
     overflow: hidden; clip: rect(0 0 0 0);
     white-space: nowrap; border: 0;
   }
   
   /* ======================
      Program tiles (2 rows, 3 cols)
      ====================== */
   .program-tiles {
     --purple: #622985;
     --tile-radius: 8px;
     --gap: clamp(16px, 2vw, 28px);
   
     display: grid;
     grid-template-columns: repeat(3, minmax(220px, 1fr));
     gap: var(--gap);
     padding: clamp(16px, 3vw, 28px) 1rem;
   }
   .area-card {
     position: relative; display: block;
     border-radius: var(--tile-radius); overflow: hidden;
     background: #eee; box-shadow: 0 6px 20px rgba(0,0,0,.08);
     isolation: isolate; aspect-ratio: 4 / 5; text-decoration: none;
   }
   .area-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
   .area-card .label {
     position: absolute; left: 0; right: 0; bottom: 0; height: 33.333%;
     background: var(--purple); color: #fff; display: grid; place-items: center;
     text-align: center; padding: 10px 12px;
     font-family: 'Playfair Display', ui-serif, Georgia, serif; font-weight: 700;
     font-size: clamp(1rem, 1.6vw, 1.4rem); line-height: 1.25;
     z-index: 2; transition: opacity .25s ease, transform .25s ease;
   }
   .area-card .hover-panel {
     position: absolute; inset: 0; background: rgba(98, 41, 133, .92);
     color: #fff; display: grid; place-items: center; text-align: center;
     padding: clamp(12px, 2vw, 18px); opacity: 0; z-index: 3; pointer-events: none;
     transition: opacity .25s ease;
   }
   .area-card .hover-panel p { max-width: 34ch; font-size: clamp(.95rem, 1.4vw, 1.1rem); line-height: 1.4; }
   .area-card:hover .hover-panel,
   .area-card:focus .hover-panel,
   .area-card:focus-within .hover-panel { opacity: 1; pointer-events: auto; }
   .area-card:hover .label,
   .area-card:focus .label,
   .area-card:focus-within .label { opacity: .05; transform: translateY(6px); }
   .area-card:focus,
   .area-card:focus-visible { outline: 3px solid color-mix(in oklab, var(--purple) 70%, white); outline-offset: 2px; }
   
   @media (max-width: 980px) { .program-tiles { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
   @media (max-width: 560px) { .program-tiles { grid-template-columns: 1fr; } }
   
   /* ======================
      Partner logos gallery
      ====================== */
   .hero.gallery3 {
     --cols: 3;
     display: grid;
     grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
     gap: clamp(12px, 2vw, 24px);
     align-items: center; justify-items: center;
     padding: 2rem 1rem;
   }
   .hero.gallery3 > h1 { grid-column: 1 / -1; margin-bottom: 0.5rem; }
   .hero.gallery3 > a { display: flex; align-items: center; justify-content: center; padding: clamp(4px, 1vw, 8px); }
   .hero.gallery3 img {
     max-width: 100%; height: auto; object-fit: contain;
     max-height: clamp(44px, 8vw, 80px);
   }
   @media (max-width: 640px) {
     .hero.gallery3 { --cols: 1; }
     .hero.gallery3 > a { padding: 8px 0; }
     .hero.gallery3 img { max-height: clamp(48px, 10vw, 72px); }
   }
   
   /* =========================
      Alternating leadership rows
      ========================= */
   .leaders-alt { padding: clamp(24px, 5vw, 56px) 1rem; }
   .leaders-row { display: grid; gap: clamp(18px, 3vw, 36px); align-items: start; margin-block: clamp(12px, 3vw, 28px); }
   .leaders-row--duo  { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
   .leaders-row--trio { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
   .leader { color:#1b1b1b; }
   .leader--h { display: grid; grid-template-columns: auto 1fr; gap: clamp(14px, 2vw, 22px); align-items: center; }
   .leader--v { display: grid; justify-items: center; text-align: center; gap: clamp(8px, 1.6vw, 12px); }
   .leader-avatar {
     width: clamp(96px, 12vw, 160px); aspect-ratio: 1/1; object-fit: cover; object-position: center;
     border-radius: 50%; box-shadow: 0 6px 18px rgba(0,0,0,.12); background:#fff;
   }
   .leader-text { display: grid; gap: 4px; }
   .leader-name {
     font-family: 'Playfair Display', ui-serif, Georgia, serif;
     font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.6rem); line-height: 1.15; margin: 0;
   }
   .leader-role { font-size: clamp(.95rem, 1.4vw, 1.05rem); color: #2b2b2b; letter-spacing: .2px; }
   .name--green  { color: #12592f; }
   .name--purple { color: #622985; }
   
   @media (max-width: 960px) { .leaders-row--trio { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
   @media (max-width: 640px) {
     .leaders-row--duo, .leaders-row--trio { grid-template-columns: 1fr; }
     .leader--h { grid-template-columns: 1fr; justify-items: center; text-align:center; }
     .leader-text { justify-items: center; }
   }
   
   /* ======================
      Alternating video rows (Awards)
      ====================== */
   .honorees { padding: clamp(24px, 5vw, 56px) 1rem; }
   .hon-row {
     --gap: clamp(18px, 3vw, 36px);
     display: grid; grid-template-columns: 1fr 1fr;
     gap: var(--gap); align-items: center;
     margin-block: clamp(18px, 3vw, 40px);
   }
   .hon-row--flip { grid-auto-flow: dense; }
   .hon-row--flip .hon-copy { order: 1; }
   
   .hon-copy { max-width: 60ch; justify-self: center; text-align: center; }
   .hon-body { font-size: clamp(.98rem, 1.4vw, 1.05rem); line-height: 1.55; color: #2b2b2b; margin-bottom: .75rem; }
   .hon-credit { text-align: center; }
   .hon-name {
     font-family: 'Playfair Display', ui-serif, Georgia, serif;
     font-weight: 700; font-size: clamp(1.05rem, 1.9vw, 1.35rem);
   }
   .hon-title { color: #12592f; font-size: clamp(.95rem, 1.3vw, 1.05rem); }
   
   @media (max-width: 900px) {
     .hon-row { grid-template-columns: 1fr; }
     .hon-row--flip .hon-copy { order: initial; }
     .hon-copy { max-width: 70ch; }
   }
   
   /* Video card (title posterless) */
   .video-card {
     position: relative; aspect-ratio: 16 / 9;
     border-radius: 12px; overflow: hidden; background: #0b0b0b;
   }
   .video-card video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }

   .contact-section{
    padding: clamp(32px, 6vw, 72px) 0;
  }
  
  .contact-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 5vw, 64px);
    align-items: start;
  }
  
  .org-title{
    color:var(--heading);
    text-transform:uppercase;
    letter-spacing:.14em;
    font-weight:700;
    font-size: clamp(20px, 2.8vw, 32px);
    line-height:1.35;
    margin:0 0 28px;
  }
  
  .contact-list{
    margin:0 0 8px;
    padding:0;
  }
  
  .contact-list .row{
    display:block;
    margin: 22px 0;
  }
  
  .contact-list dt{
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size: .92rem;
    color: var(--muted);
    margin:0 0 6px;
  }
  
  .contact-list dd{
    margin:0;
    font-size: 1.05rem;
    color: var(--text);
  }
  
  .contact-list a{
    color:inherit;
    text-decoration:none;
  }
  
  .contact-list a:hover,
  .edit a:hover{
    text-decoration:underline;
  }
  
  address{
    font-style:normal;
    white-space:pre-line;
  }
  
  .edit{
    margin-top: 8px;
    font-weight:600;
  }
  
  .edit a{
    color: var(--heading);
    text-decoration:none;
  }
  
  /* Right side (logo + tagline) */
  .brand-panel{
    position:relative;
    padding-top: clamp(16px, 2vw, 24px);
  }
  
  .brand-logo{
    width: min(560px, 100%);
    height:auto;
    display:block;
    margin-left:auto; /* nudge toward the right like in the screenshot */
  }
  
  .brand-panel::after{
    /* green rule under the logo */
    content:"";
    display:block;
    width: min(500px, 80%);
    height:5px;
    background: var(--green);
    margin: clamp(10px, 2.2vw, 16px) 0 10px auto;
    border-radius:2px;
  }
  
  .tagline{
    color: var(--purple);
    font-size: clamp(16px, 1.4vw, 22px);
    text-align:right;
    margin: 0;
  }
  
  /* Divider with dotted look */
  .divider{
    width:100%;
    height:1px;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.28) 1px, transparent 1px);
    background-size: 8px 1px;
    background-repeat: repeat-x;
    opacity:.7;
    margin: clamp(28px, 6vw, 48px) 0 0;
  }
  
  .site-footer{
    padding: 18px 0 40px;
    color:#cfcfcf;
  }
  
  .site-footer small{
    letter-spacing:.08em;
  }

  /* Responsive */
@media (max-width: 880px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
  .brand-logo,
  .brand-panel::after,
  .tagline{
    margin-left:0;
    text-align:left;
  }
  .brand-panel::after{
    width: 220px;
  }
}