:root{
      /* ==============================
         CADECT — Minimal Professional Palette (Full-Width Ready)
      ============================== */

      /* Backgrounds */
      --bg:  #06110D;   /* deep forest */
      --bg2: #071812;   /* forest depth */

      /* Surfaces (subtle, not bright) */
      --surface:  rgba(244,240,232,.05);
      --surface2: rgba(244,240,232,.08);

      /* Text */
      --text:  #F4F0E8;
      --muted: rgba(244,240,232,.72);

      /* Borders */
      --line:        rgba(244,240,232,.10);
      --line-strong: rgba(244,240,232,.14);

      /* Accents (keep minimal usage) */
      --emerald: #1F8A70;
      --gold:    #C9A227;
      --gold2:   #E1C76A;

      /* Effects */
      --shadow:      0 18px 46px rgba(0,0,0,.48);
      --shadow-soft: 0 10px 26px rgba(0,0,0,.34);
      --focus:       0 0 0 4px rgba(201,162,39,.18);

      /* Layout */
      --radius:    18px;
      --radius-lg: 22px;

      /* Full-width pattern:
         - backgrounds/sections can go edge-to-edge
         - content stays readable inside containers */
      --content-max: 1200px;
      --content-max-wide: 1320px;
      --gutter: clamp(16px, 3vw, 32px);
    }

    *{ box-sizing:border-box; }
    html, body{ height:100%; width:100%; overflow-x:hidden; }

    body{
      margin:0;
      font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      line-height: 1.6;
      background:
        radial-gradient(1200px 700px at 10% -10%, rgba(31,138,112,.26), transparent 58%),
        radial-gradient(900px 500px at 100% 0%, rgba(201,162,39,.18), transparent 55%),
        radial-gradient(900px 500px at 40% 110%, rgba(31,138,112,.14), transparent 55%),
        linear-gradient(180deg, var(--bg), var(--bg2));
    }

    a{ color:inherit; text-decoration:none; }
    a:hover{ text-decoration:none; }

    /* ==============================
       Full-width utilities
    ============================== */
    .container,
    .container-wide{
      width: 95%;
      max-width: none;              /* FULL WIDTH */
      margin-inline: auto;
      padding-inline: var(--gutter);
    }

    /* Optional: keep text readable on ultra-wide screens */
    :root{
      --measure: 80ch;
    }

    .section-head p,
    .lead,
    .card p,
    .card .muted,
    .list li{
      max-width: var(--measure);
    }

    /* Use when you want a section background to bleed edge-to-edge */
    .full-bleed{
      width:100vw;
      margin-left:calc(50% - 50vw);
      margin-right:calc(50% - 50vw);
    }

    /* Media safety */
    img, video, iframe{ max-width:100%; height:auto; display:block; }

    .skip-link{
      position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
    }
    .skip-link:focus{
      left:1rem; top:1rem; width:auto; height:auto;
      background: var(--text); color:#111;
      padding:.6rem .9rem; border-radius:.7rem;
      z-index:9999;
    }

    /* Better anchor offset with sticky header */
    section[id]{ scroll-margin-top: 96px; }

    /* ==============================
       Header (Luxe + Sticky + Hide/Shrink)
    ============================== */
    .site-header{
      position: sticky;
      top: 0;
      z-index: 50;

      backdrop-filter: blur(14px);
      background: rgba(6,17,13,.58);
      border-bottom: 1px solid var(--line);

      transition: transform .28s ease, background .28s ease, border-color .28s ease;
      will-change: transform;
    }

    .site-header.is-hidden{ transform: translateY(-110%); }

    .site-header.is-scrolled{
      background: rgba(6,17,13,.78);
      border-bottom-color: rgba(244,240,232,.18);
    }

    .header-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: .95rem 0;
      gap: 1rem;
      position: relative; /* important for mobile nav absolute positioning */
      transition: padding .22s ease;
    }

    .site-header.is-compact .header-inner{
      padding-top: .55rem;
      padding-bottom: .55rem;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:.75rem;
    }

    .brand-mark{
      width: 42px; height: 42px;
      border-radius: 14px;
      background:
        radial-gradient(circle at 30% 30%, rgba(244,240,232,.55), transparent 45%),
        linear-gradient(135deg, rgba(31,138,112,.95), rgba(201,162,39,.85));
      box-shadow: 0 18px 55px rgba(0,0,0,.55);
      border: 1px solid rgba(244,240,232,.14);

      transition: width .22s ease, height .22s ease, border-radius .22s ease;
    }

    .site-header.is-compact .brand-mark{
      width: 36px;
      height: 36px;
      border-radius: 13px;
    }

    .brand-text strong{
      font-family: "Playfair Display", serif;
      letter-spacing: .2px;
    }

    .brand-text small{
      display:block;
      color: var(--muted);
      font-size: .78rem;
      margin-top: .12rem;
      transition: opacity .22s ease, font-size .22s ease;
    }

    .site-header.is-compact .brand-text small{
      opacity: .86;
      font-size: .74rem;
    }

    .site-nav{
      display:flex;
      align-items:center;
      gap: 1rem;
    }

    .site-nav a{
      color: rgba(244,240,232,.86);
      font-weight: 650;
      font-size: .95rem;
      padding: .35rem .25rem;
    }

    .site-nav a:hover{ color:#fff; }

    /* Active states: supports class="active" AND aria-current */
    .site-nav a.active,
    .site-nav a[aria-current="page"]{
      color:#fff;
      position:relative;
    }
    .site-nav a.active::after,
    .site-nav a[aria-current="page"]::after{
      content:"";
      display:block;
      height:2px;
      margin-top:6px;
      border-radius:999px;
      background: rgba(201,162,39,.95);
    }

    .nav-toggle{
      display:none;
      width: 46px; height: 46px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(244,240,232,.04);
      cursor:pointer;
    }
    .nav-toggle:hover{ border-color: rgba(244,240,232,.20); }
    .nav-toggle:focus-visible{ outline:none; box-shadow: var(--focus); }

    .nav-toggle span{
      display:block;
      height:2px;
      width: 22px;
      margin: 6px auto;
      background: rgba(244,240,232,.9);
      border-radius: 2px;
    }

    /* ==============================
       Type
    ============================== */
    h1, h2{
      font-family: "Playfair Display", serif;
      line-height: 1.12;
    }
    h3{
      margin:0 0 .3rem;
      font-family: "Manrope", sans-serif;
      letter-spacing:.1px;
    }
    p{ margin: .6rem 0; }
    .muted{ color: var(--muted); }
    .small{ font-size: .92rem; }

    /* ==============================
       Buttons
    ============================== */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      padding: .82rem 1.05rem;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(244,240,232,.04);
      font-weight: 750;
      letter-spacing: .2px;
      transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
      text-decoration:none !important;
    }
    .btn:hover{ transform: translateY(-1px); border-color: rgba(244,240,232,.22); }
    .btn:active{ transform: translateY(0); }
    .btn:focus-visible{ outline:none; box-shadow: var(--focus); }

    .btn-primary{
      border-color: transparent;
      background: linear-gradient(135deg, rgba(31,138,112,.95), rgba(201,162,39,.92));
      box-shadow: 0 18px 65px rgba(31,138,112,.18);
    }
    .btn-secondary{ background: rgba(244,240,232,.07); }
    .btn-outline{
      background: transparent;
      border-color: rgba(201,162,39,.45);
    }
    .btn-ghost{
      background: transparent;
      border-color: rgba(244,240,232,.18);
    }
    .full{ width:100%; }

    /* Small button (for trust downloads) */
    .btn-sm{
      padding: .58rem .82rem;
      border-radius: 12px;
      font-weight: 800;
      font-size: .92rem;
    }

    /* ==============================
       Badge / Pills
    ============================== */
    .badge{
      display:inline-flex;
      padding: .36rem .65rem;
      border-radius: 999px;
      border: 1px solid rgba(201,162,39,.36);
      background: rgba(201,162,39,.10);
      color: rgba(244,240,232,.92);
      font-weight: 800;
      font-size: .84rem;
    }
    .pill-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem; }
    .pill{
      border: 1px solid rgba(244,240,232,.14);
      background: rgba(244,240,232,.04);
      padding: .35rem .6rem;
      border-radius: 999px;
      color: rgba(244,240,232,.82);
      font-weight: 700;
      font-size: .85rem;
    }

    /* ==============================
       Hero (base)
    ============================== */
    .hero{ padding: 3.6rem 0 2.2rem; }

    .hero-grid{
      display:grid;
      grid-template-columns: 1.2fr .85fr;
      gap: 1.4rem;
      align-items: start;
    }

    .hero-copy h1{
      font-size: clamp(2rem, 3.7vw, 3.2rem);
      margin: .75rem 0 .75rem;
      letter-spacing: -.4px;
    }

    .lead{
      color: rgba(244,240,232,.86);
      font-size: 1.06rem;
      max-width: 60ch;
    }

    .hero-actions{
      display:flex;
      gap: .8rem;
      margin: 1.2rem 0 1.2rem;
      flex-wrap: wrap;
    }

    /* Trust row */
    .trust-row{
      display:flex;
      gap: .9rem;
      flex-wrap: wrap;
    }

    .trust-item{
      padding: .7rem .85rem;
      border-radius: 16px;
      border: 1px solid rgba(244,240,232,.12);
      background: linear-gradient(180deg, rgba(244,240,232,.05), rgba(244,240,232,.02));
    }

    .trust-item strong{ display:block; }
    .trust-item span{ color: var(--muted); font-size: .9rem; }

    /* ==============================
       Premium Hero (image overlay + stat strip + premium card shine)
       Requires: <section class="hero hero--image"> + <div class="hero-bg">
    ============================== */
    .hero--image{
      position: relative;
      overflow: hidden;
      padding: 4.2rem 0 2.6rem;
    }

    .hero-bg{
      position:absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(6,17,13,.70), rgba(6,17,13,.90)),
        radial-gradient(900px 420px at 20% 0%, rgba(201,162,39,.22), transparent 60%),
        radial-gradient(900px 420px at 90% 0%, rgba(31,138,112,.18), transparent 60%),
        url("../img/hero.jpg");
      background-size: cover;
      background-position: center;
      filter: saturate(1.05) contrast(1.02);
      transform: scale(1.03);
    }

    .hero--image .container,
    .hero--image .hero-grid{
      position: relative;
      z-index: 1;
    }

    .hero--image .lead{ color: rgba(244,240,232,.90); }

    /* Stat strip */
    .stat-strip{
      margin-top: 1.05rem;
      display:flex;
      gap: .75rem;
      flex-wrap: wrap;
    }

    .stat{
      border: 1px solid rgba(244,240,232,.14);
      background: rgba(244,240,232,.04);
      border-radius: 16px;
      padding: .72rem .85rem;
      backdrop-filter: blur(10px);
      min-width: 170px;
    }

    .stat-num{ display:block; font-weight: 900; letter-spacing: .2px; }
    .stat-label{ display:block; color: var(--muted); font-size: .9rem; }

    /* Hero premium card shine */
    .hero-card--premium{
      position: relative;
      overflow: hidden;
    }
    .hero-card--premium::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(600px 220px at 20% 0%, rgba(201,162,39,.22), transparent 60%),
        radial-gradient(600px 220px at 80% 10%, rgba(31,138,112,.18), transparent 65%);
      pointer-events:none;
    }
    .hero-card--premium::after{
      content:"";
      position:absolute;
      left:-40%;
      top:-60%;
      width: 70%;
      height: 220%;
      transform: rotate(18deg);
      background: linear-gradient(90deg, transparent, rgba(244,240,232,.10), transparent);
      opacity: .35;
      pointer-events:none;
    }

    /* ==============================
       Cards
    ============================== */
    .card{
      border: 1px solid rgba(244,240,232,.12);
      background: rgba(244,240,232,.04);
      border-radius: var(--radius);
      padding: 1.15rem;
    }

    .card.luxe{
      background:
        radial-gradient(600px 220px at 20% 0%, rgba(201,162,39,.10), transparent 60%),
        linear-gradient(180deg, rgba(244,240,232,.06), rgba(244,240,232,.02));
      box-shadow: var(--shadow);
    }

    /* Premium micro-interaction */
    .card.luxe,
    .hero-card{
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .card.luxe:hover,
    .hero-card:hover{
      transform: translateY(-2px);
      border-color: rgba(244,240,232,.18);
      box-shadow: 0 26px 80px rgba(0,0,0,.58);
    }

    .divider{
      height:1px;
      background: rgba(244,240,232,.12);
      margin: .9rem 0;
    }

    /* Hero card extras */
    .hero-card{
      border: 1px solid rgba(244,240,232,.12);
      background:
        radial-gradient(700px 280px at 20% 0%, rgba(201,162,39,.14), transparent 62%),
        linear-gradient(180deg, rgba(244,240,232,.06), rgba(244,240,232,.02));
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 1.15rem;
    }

    .kicker{
      display:inline-flex;
      font-weight: 900;
      letter-spacing:.18em;
      text-transform: uppercase;
      font-size:.72rem;
      color: rgba(244,240,232,.72);
      margin-bottom:.4rem;
    }

    .card-title{ margin:0 0 .35rem; }
    .card-sub{ margin:0 0 .95rem; color: var(--muted); }

    .mini-stack{ display:grid; gap:.65rem; margin: .85rem 0 1rem; }
    .mini{
      border: 1px solid rgba(244,240,232,.10);
      background: rgba(6,17,13,.25);
      border-radius: 16px;
      padding: .75rem .85rem;
    }
    .mini-title{
      font-weight: 900;
      color: rgba(244,240,232,.92);
      margin-bottom:.15rem;
    }
    .mini-text{ color: var(--muted); font-size: .92rem; }

    /* ==============================
       Sections / Layout
    ============================== */
    .section{
      padding: 3.6rem 0;
      border-top: 1px solid rgba(244,240,232,.08);
    }

    .section.alt{ background: rgba(244,240,232,.02); }

    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.1rem;
    }

    .section h2{
      margin:0 0 .55rem;
      font-size: clamp(1.5rem, 2.2vw, 2.05rem);
    }

    .split{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
      align-items: start;
    }

    .grid-3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }

    /* Lists */
    .list{ margin: .7rem 0 0; padding-left: 1.05rem; }
    .list li{ margin: .35rem 0; }

    /* Links */
    .link{
      display:inline-flex;
      margin-top: .6rem;
      font-weight: 850;
      color: rgba(201,162,39,.95);
    }
    .link:hover{ color: var(--gold2); }

    /* ==============================
       Trust section (premium)
    ============================== */
    .trust{ position: relative; }

    .trust-card{
      position: relative;
      overflow: hidden;
      padding-top: 1.25rem;
    }

    /* Gold top accent */
    .trust-card::before{
      content:"";
      position:absolute;
      left: 1.1rem;
      right: 1.1rem;
      top: .9rem;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(201,162,39,.10), rgba(201,162,39,.95), rgba(201,162,39,.10));
      opacity: .95;
    }

    /* Icon badge */
    .trust-icon{
      display:inline-block;
      width: 44px;
      height: 44px;
      border-radius: 16px;
      border: 1px solid rgba(244,240,232,.14);
      background:
        radial-gradient(circle at 30% 30%, rgba(244,240,232,.32), transparent 50%),
        linear-gradient(135deg, rgba(31,138,112,.55), rgba(201,162,39,.35));
      box-shadow: 0 18px 55px rgba(0,0,0,.35);
      margin-bottom: .7rem;
      position: relative;
    }

    /* Simple glyphs (pure CSS) */
    .trust-icon::after{
      content:"✓";
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      font-weight: 900;
      color: rgba(244,240,232,.92);
      font-size: 1.05rem;
    }
    .trust-icon--shield::after{ content:"🛡"; font-size: 1.0rem; }
    .trust-icon--hand::after{ content:"🤝"; font-size: 1.0rem; }

    .trust-actions{
      display:flex;
      gap: .6rem;
      flex-wrap: wrap;
      margin-top: 1.1rem;
    }

    /* ==============================
       Impact
    ============================== */
    .impact-panel{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      align-items: stretch;
    }

    .impact-left{
      border: 1px solid rgba(244,240,232,.10);
      border-radius: var(--radius);
      padding: 1.2rem;
      background:
        radial-gradient(700px 280px at 10% 0%, rgba(31,138,112,.16), transparent 60%),
        rgba(244,240,232,.03);
    }

    .impact-title{
      margin:0 0 .5rem;
      font-family: "Playfair Display", serif;
      font-size: 1.4rem;
    }

    .impact-actions{
      display:flex;
      gap:.7rem;
      flex-wrap:wrap;
      margin-top: .9rem;
    }

    .impact-right{
      border: 1px solid rgba(244,240,232,.10);
      border-radius: var(--radius);
      padding: 1.2rem;
      background:
        radial-gradient(700px 280px at 20% 0%, rgba(201,162,39,.14), transparent 60%),
        rgba(244,240,232,.03);
    }

    .metrics-grid{ display:grid; gap:.75rem; }

    .metric{
      border: 1px solid rgba(244,240,232,.10);
      background: rgba(6,17,13,.22);
      border-radius: 16px;
      padding: .85rem .95rem;
    }

    .metric-num{
      font-family:"Playfair Display", serif;
      font-size: 1.55rem;
      font-weight: 700;
      letter-spacing: -.3px;
      margin-bottom:.12rem;
    }

    .metric-label{ color: var(--muted); font-size: .93rem; }
    .note{ opacity:.85; }

    /* ==============================
       Team
    ============================== */
    .person .person-top{
      display:flex;
      align-items:center;
      gap:.8rem;
    }

    .avatar{
      width: 46px; height: 46px;
      border-radius: 16px;
      border: 1px solid rgba(244,240,232,.14);
      background:
        radial-gradient(circle at 30% 30%, rgba(244,240,232,.35), transparent 45%),
        linear-gradient(135deg, rgba(31,138,112,.55), rgba(201,162,39,.35));
    }

    .person-name{ margin:0; font-family:"Playfair Display", serif; }

    /* ==============================
       Tags grid
    ============================== */
    .tag-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .8rem;
    }

    .tag{
      border: 1px solid rgba(244,240,232,.12);
      background: linear-gradient(180deg, rgba(244,240,232,.05), rgba(244,240,232,.02));
      border-radius: 16px;
      padding: .95rem;
      font-weight: 850;
      color: rgba(244,240,232,.90);
    }

    /* ==============================
       Donate
    ============================== */
    .donate{
      padding: 3.6rem 0;
      border-top: 1px solid rgba(244,240,232,.08);
      background:
        radial-gradient(900px 420px at 10% 10%, rgba(201,162,39,.16), transparent 60%),
        radial-gradient(900px 420px at 90% 10%, rgba(31,138,112,.14), transparent 60%),
        rgba(244,240,232,.02);
    }

    .donate-inner{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 1rem;
      align-items: start;
    }

    .donate-card{
      border: 1px solid rgba(244,240,232,.12);
      background: linear-gradient(180deg, rgba(244,240,232,.06), rgba(244,240,232,.02));
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 1rem;
    }

    .donate-note{
      margin-top: .85rem;
      color: rgba(244,240,232,.75);
      font-size: .92rem;
      border-top: 1px solid rgba(244,240,232,.12);
      padding-top: .85rem;
    }

    /* ==============================
       Contact (no form)
    ============================== */
    .contact-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }

    .contact-link{
      font-weight: 850;
      color: rgba(201,162,39,.95);
    }
    .contact-link:hover{ color: var(--gold2); }

    .contact-cta{
      display:flex;
      gap:.8rem;
      flex-wrap:wrap;
      margin-top: 1.2rem;
    }

    /* ==============================
       Footer
    ============================== */
    .site-footer{
      border-top: 1px solid rgba(244,240,232,.10);
      padding: 1.5rem 0;
      background: rgba(0,0,0,.18);
    }

    .footer-inner{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .footer-links{
      display:flex;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .footer-links a{
      color: rgba(244,240,232,.78);
      font-weight: 750;
    }
    .footer-links a:hover{ color:#fff; }

    /* ==============================
       CTA band + Contact page styles
    ============================== */
    .cta-band{
      border-top: 1px solid rgba(244,240,232,.08);
      padding: 2.4rem 0;
      background:
        radial-gradient(900px 420px at 10% 10%, rgba(201,162,39,.14), transparent 60%),
        radial-gradient(900px 420px at 90% 10%, rgba(31,138,112,.12), transparent 60%),
        rgba(244,240,232,.02);
    }

    .cta-inner{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 1.2rem;
      flex-wrap: wrap;
    }

    .cta-title{
      margin:0 0 .35rem;
      font-size: clamp(1.4rem, 2.1vw, 1.9rem);
    }

    .cta-actions{
      display:flex;
      gap:.7rem;
      flex-wrap: wrap;
    }

    .page-hero{
      padding: 3.2rem 0 2.2rem;
      border-top: 1px solid rgba(244,240,232,.08);
      background:
        radial-gradient(1100px 520px at 15% 0%, rgba(201,162,39,.16), transparent 60%),
        radial-gradient(1100px 520px at 95% 0%, rgba(31,138,112,.14), transparent 60%),
        rgba(244,240,232,.02);
    }

    .page-hero-actions{
      display:flex;
      gap:.8rem;
      flex-wrap: wrap;
      margin-top: 1.1rem;
    }

    .contact-grid--page{ grid-template-columns: repeat(4, 1fr); }

    .contact-split{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-top: 1rem;
    }

    .map-actions{
      display:flex;
      gap:.7rem;
      flex-wrap: wrap;
      margin-top: .8rem;
    }

    /* ==============================
       Homepage layout upgrades
    ============================== */

    /* Make section headings feel premium (no weird spacing/align) */
    .section-head--stack{
      display: grid !important;
      gap: .35rem !important;
      align-items: start !important;
      justify-content: start !important;
      margin-bottom: 1.15rem;
      max-width: 78ch;
    }
    .section-head--stack p{ margin:0; }

    /* About */
    .about-grid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 1rem;
      align-items: start;
    }
    .about-actions{
      display:flex;
      gap:.7rem;
      flex-wrap: wrap;
      margin-top: .9rem;
    }

    .facts{
      display:grid;
      gap:.65rem;
      margin-top: .8rem;
    }
    .fact{
      display:flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      padding: .7rem .85rem;
      border-radius: 16px;
      border: 1px solid rgba(244,240,232,.10);
      background: rgba(6,17,13,.22);
    }
    .fact-k{
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      font-size: .72rem;
      color: rgba(244,240,232,.72);
    }
    .fact-v{
      font-weight: 800;
      color: rgba(244,240,232,.9);
      text-align: right;
    }

    /* Steps */
    .steps{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }
    .step-top{
      display:flex;
      align-items:center;
      gap:.75rem;
    }
    .step-num{
      width: 44px;
      height: 44px;
      border-radius: 16px;
      border: 1px solid rgba(244,240,232,.14);
      background:
        radial-gradient(circle at 30% 30%, rgba(244,240,232,.22), transparent 55%),
        linear-gradient(135deg, rgba(31,138,112,.45), rgba(201,162,39,.28));
      display:grid;
      place-items:center;
      font-weight: 900;
    }

    /* Impact */
    .impact-grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 1rem;
      align-items: start;
    }
    .metrics-grid--tight{
      margin-top: .85rem;
      grid-template-columns: 1fr 1fr;
    }
    .metrics-grid--tight .metric{ padding: .8rem .9rem; }

    /* Trust layout */
    .trust-layout{
      display:grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .trust-side{ align-self: start; }

    /* Team */
    .team-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }

    /* Focus tiles */
    .focus-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
    .focus-tile p{ margin-top: .35rem; }

    /* ==============================
       Responsive
    ============================== */
    @media (max-width: 980px){
      .hero-grid{ grid-template-columns: 1fr; }
      .split{ grid-template-columns: 1fr; }
      .grid-3{ grid-template-columns: 1fr; }
      .impact-panel{ grid-template-columns: 1fr; }
      .tag-grid{ grid-template-columns: 1fr; }
      .donate-inner{ grid-template-columns: 1fr; }
      .contact-grid{ grid-template-columns: 1fr; }
      .contact-grid--page{ grid-template-columns: 1fr; }
      .contact-split{ grid-template-columns: 1fr; }

      .about-grid{ grid-template-columns: 1fr; }
      .steps{ grid-template-columns: 1fr; }
      .impact-grid{ grid-template-columns: 1fr; }
      .metrics-grid--tight{ grid-template-columns: 1fr; }
      .team-grid{ grid-template-columns: 1fr; }
      .focus-grid{ grid-template-columns: 1fr; }

      .nav-toggle{ display:block; }

      /* Mobile menu dropdown (short + scrollable) */
      .site-nav{
        position: absolute;
        right: 0;
        top: calc(100% + .65rem);
        width: min(460px, calc(100vw - (var(--gutter) * 2)));

        display:flex;
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;

        padding: .9rem;
        border-radius: var(--radius);
        border: 1px solid rgba(244,240,232,.14);
        background: rgba(6,17,13,.92);
        box-shadow: var(--shadow);

        /* closed state */
        max-height: 0;
        opacity: 0;
        transform: translateY(-6px) scale(.985);
        pointer-events: none;
        overflow: hidden;

        transition: max-height .26s ease, opacity .22s ease, transform .22s ease;
      }

      .site-nav.open{
        /* “short window” feel */
        max-height: 60vh;
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        overflow: auto;
        overscroll-behavior: contain;
      }

      .site-nav a{
        padding: .6rem .7rem;
        border-radius: 12px;
      }

      .site-nav a:hover{ background: rgba(244,240,232,.05); }
    }

    /* ==============================
       Reduced motion
    ============================== */
    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; scroll-behavior:auto !important; }
    }

    /* =========================================
       Footer — Super Luxury (v3) — CADECT
       Replace your OLD footer CSS block with this ENTIRE block.
    ========================================= */
    .site-footer.footer-luxe{
      position: relative;
      overflow: hidden;
      padding: 2.9rem 0 1.25rem;
      border-top: 1px solid rgba(244,240,232,.10);

      /* smaller base type */
      font-size: .92rem;

      background:
        radial-gradient(1100px 520px at 10% 0%, rgba(201,162,39,.16), transparent 60%),
        radial-gradient(1100px 520px at 90% 0%, rgba(31,138,112,.14), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.32));
    }

    .site-footer.footer-luxe::before{
      content:"";
      position:absolute;
      left: 0; right: 0; top: 0;
      height: 2px;
      background: linear-gradient(90deg,
        rgba(201,162,39,0),
        rgba(201,162,39,.95),
        rgba(31,138,112,.65),
        rgba(201,162,39,0)
      );
      opacity: .85;
    }

    .footer-sheen{
      position:absolute;
      inset:-40%;
      background:
        radial-gradient(circle at 30% 30%, rgba(244,240,232,.06), transparent 42%),
        radial-gradient(circle at 75% 25%, rgba(201,162,39,.08), transparent 45%),
        radial-gradient(circle at 40% 80%, rgba(31,138,112,.06), transparent 45%);
      transform: rotate(10deg);
      pointer-events:none;
      opacity: .9;
    }

    .footer-wrap{ position: relative; z-index: 1; }

    /* 3-column grid */
    .footer-top{
      display:grid;
      grid-template-columns: 1.55fr 1fr 1.1fr;
      gap: 1rem;
      align-items: start;
    }

    /* Luxury card base */
    .footer-card{
      border: 1px solid rgba(244,240,232,.12);
      border-radius: var(--radius);
      background:
        radial-gradient(650px 220px at 18% 0%, rgba(201,162,39,.10), transparent 62%),
        linear-gradient(180deg, rgba(244,240,232,.055), rgba(244,240,232,.018));
      box-shadow: var(--shadow-soft);
      padding: 1.05rem;
      backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden;
    }

    /* GOLD gradient top border per card (premium) */
    .footer-card::before{
      content:"";
      position:absolute;
      left: .95rem;
      right: .95rem;
      top: .85rem;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg,
        rgba(201,162,39,.10),
        rgba(201,162,39,.92),
        rgba(31,138,112,.55),
        rgba(201,162,39,.10)
      );
      opacity: .9;
    }

    /* Soft sheen */
    .footer-card::after{
      content:"";
      position:absolute;
      left:-35%;
      top:-60%;
      width: 70%;
      height: 220%;
      transform: rotate(18deg);
      background: linear-gradient(90deg, transparent, rgba(244,240,232,.085), transparent);
      opacity: .24;
      pointer-events:none;
    }

    /* Spacing so the top line doesn't overlap content */
    .footer-card > *:first-child{ margin-top: .25rem; }

    .footer-brand-head{
      display:flex;
      gap: .75rem;
      align-items:center;
    }

    .footer-mark{
      width: 42px;
      height: 42px;
      border-radius: 16px;
    }

    .footer-name{
      display:block;
      font-family: "Playfair Display", serif;
      font-size: 1.08rem;
      letter-spacing: .2px;
    }

    .footer-tagline{
      font-size: .82rem;
      margin-top: .08rem;
    }

    .footer-about{
      margin: .75rem 0 .75rem;
      font-size: .92rem;
    }

    .footer-contact{
      display:grid;
      gap: .5rem;
      margin-top: .55rem;
    }

    .fc-row{
      display:grid;
      grid-template-columns: 66px 1fr;
      gap: .65rem;
      align-items: baseline;
    }

    .fc-k{
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-size: .66rem;
      color: rgba(244,240,232,.68);
    }

    .footer-registered{
      margin: .75rem 0 0;
      font-size: .84rem;
      opacity: .92;
    }

    .footer-cta{
      display:flex;
      gap: .55rem;
      flex-wrap: wrap;
      margin-top: .85rem;
    }

    .footer-mini{
      margin: .85rem 0 0;
      display:flex;
      gap: .45rem;
      align-items:center;
      font-size: .86rem;
    }

    .footer-mini .dot{
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: rgba(201,162,39,.85);
      box-shadow: 0 0 0 4px rgba(201,162,39,.14);
    }

    /* Headings + links */
    .footer-h{
      margin: 0 0 .55rem;
      font-family: "Playfair Display", serif;
      font-size: .98rem;
      letter-spacing: .18px;
    }

    .footer-h-inline{ margin-bottom: .45rem; }

    .footer-sub{
      margin: .15rem 0 .75rem;
      font-size: .86rem;
    }

    /* Footer nav */
    .footer-nav a{
      display:block;
      padding: .45rem .5rem;
      border-radius: 12px;
      color: rgba(244,240,232,.82);
      font-weight: 750;
      font-size: .9rem;
      border: 1px solid transparent;
      background: transparent;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
    }

    .footer-nav a:hover{
      color: rgba(244,240,232,.95);
      border-color: rgba(244,240,232,.14);
      background: rgba(244,240,232,.04);
      transform: translateY(-1px);
    }

    .footer-divider-soft{
      height: 1px;
      background: rgba(244,240,232,.10);
      margin: .9rem 0;
    }

    /* Docs */
    .footer-docs{
      display:grid;
      gap: .5rem;
    }

    .doc-link{
      display:inline-flex;
      align-items:center;
      gap: .5rem;
      padding: .48rem .55rem;
      border-radius: 12px;
      border: 1px solid rgba(244,240,232,.12);
      background: rgba(6,17,13,.22);
      color: rgba(244,240,232,.86);
      font-weight: 750;
      font-size: .9rem;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .doc-link::before{
      content:"";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: rgba(201,162,39,.75);
      box-shadow: 0 0 0 4px rgba(201,162,39,.14);
      display:inline-block;
      margin-right: .05rem;
      flex: 0 0 auto;
    }

    .doc-link:hover{
      border-color: rgba(201,162,39,.35);
      box-shadow: 0 16px 40px rgba(0,0,0,.34);
    }

    /* Social */
    .footer-social{
      display:flex;
      gap: .55rem;
      flex-wrap: wrap;
      margin-top: .35rem;
    }

    .social{
      width: 42px;
      height: 42px;
      display:grid;
      place-items:center;
      border-radius: 14px;
      border: 1px solid rgba(244,240,232,.12);
      background: rgba(244,240,232,.04);
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

    .social svg{
      width: 18px;
      height: 18px;
      fill: rgba(244,240,232,.82);
    }

    .social:hover{
      transform: translateY(-1px);
      border-color: rgba(201,162,39,.40);
      box-shadow: 0 18px 50px rgba(0,0,0,.42);
    }
    .social:hover svg{ fill: rgba(244,240,232,.95); }

    /* Trust strip */
    .footer-trust{
      margin-top: .9rem;
      display:flex;
      gap:.55rem;
      flex-wrap: wrap;
    }

    .trust-pill{
      padding: .42rem .6rem;
      border-radius: 999px;
      border: 1px solid rgba(244,240,232,.12);
      background: rgba(244,240,232,.04);
      color: rgba(244,240,232,.80);
      font-weight: 800;
      font-size: .82rem;
    }

    .trust-pill:hover{
      border-color: rgba(201,162,39,.30);
    }

    /* Divider + bottom bar */
    .footer-divider{
      height: 1px;
      background: rgba(244,240,232,.12);
      margin: 1.05rem 0 .95rem;
    }

    .footer-bottom{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .footer-legal{
      display:flex;
      gap: .8rem;
      flex-wrap: wrap;
    }

    .footer-legal a{
      color: rgba(244,240,232,.72);
      font-weight: 750;
      font-size: .88rem;
      padding: .32rem .4rem;
      border-radius: 10px;
      border: 1px solid transparent;
    }

    .footer-legal a:hover{
      color: rgba(244,240,232,.95);
      border-color: rgba(244,240,232,.14);
      background: rgba(244,240,232,.04);
    }

    .to-top{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      font-weight: 850;
      font-size: .88rem;
      color: rgba(201,162,39,.95);
      padding: .42rem .6rem;
      border-radius: 12px;
      border: 1px solid rgba(201,162,39,.25);
      background: rgba(201,162,39,.06);
    }

    .to-top:hover{
      color: var(--gold2);
      border-color: rgba(201,162,39,.45);
    }

    .footer-signature{
      margin-left: .6rem;
      color: rgba(244,240,232,.58);
      font-size: .82rem;
    }

    @media (max-width:980px){
      .footer-top{ grid-template-columns: 1fr; }
      .fc-row{ grid-template-columns: 78px 1fr; }
      .footer-bottom{ justify-content: flex-start; }
      .footer-signature{ display:block; margin-left:0; margin-top:.25rem; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .footer-nav a, .social, .doc-link, .to-top{ transition:none !important; }
    }
    /* =========================================
       Premium Mobile "Home" (breadcrumb style)
       Paste below your header CSS
    ========================================= */

    /* Hide Home link on desktop */
    .nav-home{ display:none; }

    /* Upgrade mobile dropdown “Home” to look premium */
    @media (max-width: 980px){
      .nav-home{
        display:block;
        padding: .75rem .75rem .85rem;
        border-radius: 16px;
        border: 1px solid rgba(244,240,232,.14);
        background:
          radial-gradient(650px 220px at 20% 0%, rgba(201,162,39,.14), transparent 60%),
          radial-gradient(650px 220px at 85% 10%, rgba(31,138,112,.12), transparent 65%),
          rgba(244,240,232,.03);
        box-shadow: 0 18px 55px rgba(0,0,0,.35);
        margin-bottom: .25rem;
        position: relative;
        overflow: hidden;
      }

      .nav-home::after{
        content:"";
        position:absolute;
        left:-35%;
        top:-60%;
        width: 70%;
        height: 220%;
        transform: rotate(18deg);
        background: linear-gradient(90deg, transparent, rgba(244,240,232,.09), transparent);
        opacity: .22;
        pointer-events:none;
      }

      .nav-home-kicker{
        display:block;
        font-weight: 900;
        letter-spacing: .18em;
        text-transform: uppercase;
        font-size: .68rem;
        color: rgba(244,240,232,.62);
        margin-bottom: .2rem;
      }

      .nav-home-title{
        display:flex;
        align-items:center;
        gap: .5rem;
        font-weight: 900;
        color: rgba(244,240,232,.92);
        font-size: .98rem;
      }

      .nav-home-title::before{
        content:"←";
        display:inline-flex;
        width: 26px;
        height: 26px;
        align-items:center;
        justify-content:center;
        border-radius: 10px;
        border: 1px solid rgba(201,162,39,.28);
        background: rgba(201,162,39,.08);
        color: rgba(201,162,39,.95);
        font-weight: 900;
      }

      /* Optional: make Donate CTA in dropdown feel aligned */
      .site-nav .nav-cta{
        margin-top: .25rem;
      }
    }

    /*about page */
    /* =========================================================
       ABOUT PAGE — Premium Styling (page-specific)
       Requires: <body class="page-about">
       Updated: FULL-WIDTH layout + premium readability
    ========================================================= */

    .page-about{
      /* Full-width padding + readable text measure */
      --pad-x: clamp(16px, 3vw, 44px);
      --measure: 80ch;
    }

    /* =========================================================
       FULL-WIDTH OVERRIDE (About page only)
       Makes .container / .container-wide span full width
    ========================================================= */
    .page-about .container,
    .page-about .container-wide{
      max-width: none !important;
      width: 100%;
      padding-left: var(--pad-x);
      padding-right: var(--pad-x);
    }

    /* Keep text comfortable to read even on ultra-wide screens */
    .page-about .lead,
    .page-about .section-head p,
    .page-about .card.luxe p,
    .page-about .card.luxe .muted,
    .page-about .list li{
      max-width: var(--measure);
    }

    /* =========================================================
       Page hero (about)
    ========================================================= */
    .page-about .hero.hero--plain{
      position: relative;
      padding: clamp(2.2rem, 4vw, 3.4rem) 0;
      border-bottom: 1px solid rgba(244,240,232,.10);
      background:
        radial-gradient(1200px 520px at 12% 0%, rgba(201,162,39,.16), transparent 62%),
        radial-gradient(1200px 520px at 88% 0%, rgba(31,138,112,.14), transparent 62%),
        linear-gradient(180deg, rgba(244,240,232,.03), rgba(0,0,0,.12));
      overflow: hidden;
    }

    .page-about .hero.hero--plain::after{
      content:"";
      position:absolute;
      inset:-40%;
      background:
        radial-gradient(circle at 30% 28%, rgba(244,240,232,.06), transparent 45%),
        radial-gradient(circle at 75% 25%, rgba(201,162,39,.08), transparent 45%),
        radial-gradient(circle at 40% 80%, rgba(31,138,112,.06), transparent 50%);
      transform: rotate(10deg);
      pointer-events:none;
      opacity: .85;
    }

    .page-about .hero-copy{ position: relative; z-index: 1; }
    .page-about .hero-card{ position: relative; z-index: 1; }

    /* Headline + lead refinement */
    .page-about .hero h1{
      letter-spacing: .15px;
      line-height: 1.06;
      margin: .5rem 0 .7rem;
    }

    .page-about .lead{
      font-size: clamp(1.05rem, 1.2vw, 1.18rem);
      line-height: 1.55;
      color: rgba(244,240,232,.84);
    }

    /* Badge (subtle premium) */
    .page-about .badge{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.38rem .62rem;
      border-radius: 999px;
      border: 1px solid rgba(244,240,232,.14);
      background: rgba(244,240,232,.04);
      color: rgba(244,240,232,.78);
      font-weight: 850;
      font-size: .78rem;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    /* Sections rhythm (clean + roomy) */
    .page-about .section{
      padding: clamp(2.6rem, 4.6vw, 4rem) 0;
    }

    .page-about .section.alt{
      border-top: 1px solid rgba(244,240,232,.08);
      border-bottom: 1px solid rgba(244,240,232,.08);
      background:
        radial-gradient(900px 360px at 20% 0%, rgba(201,162,39,.10), transparent 60%),
        radial-gradient(900px 360px at 80% 0%, rgba(31,138,112,.10), transparent 62%),
        rgba(244,240,232,.02);
    }

    /* Section headings */
    .page-about .section-head h2{
      letter-spacing: .18px;
    }

    /* Luxe cards (gold trim + refined hover) */
    .page-about .card.luxe{
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(244,240,232,.12);
      border-radius: var(--radius, 18px);
      background:
        radial-gradient(700px 240px at 18% 0%, rgba(201,162,39,.11), transparent 62%),
        linear-gradient(180deg, rgba(244,240,232,.055), rgba(244,240,232,.016));
      box-shadow: var(--shadow-soft, 0 10px 26px rgba(0,0,0,.34));
      backdrop-filter: blur(10px);
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

    .page-about .card.luxe::before{
      content:"";
      position:absolute;
      left: 1rem;
      right: 1rem;
      top: .9rem;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg,
        rgba(201,162,39,.10),
        rgba(201,162,39,.92),
        rgba(31,138,112,.55),
        rgba(201,162,39,.10)
      );
      opacity: .9;
    }

    .page-about .card.luxe::after{
      content:"";
      position:absolute;
      left:-35%;
      top:-60%;
      width:70%;
      height:220%;
      transform: rotate(18deg);
      background: linear-gradient(90deg, transparent, rgba(244,240,232,.085), transparent);
      opacity:.22;
      pointer-events:none;
    }

    .page-about .card.luxe:hover{
      border-color: rgba(201,162,39,.22);
      box-shadow: 0 18px 46px rgba(0,0,0,.48);
      transform: translateY(-1px);
    }

    /* Prevent hover jump on touch */
    @media (hover:none){
      .page-about .card.luxe:hover{ transform:none; }
    }

    /* Kicker (small label) */
    .page-about .kicker{
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-size: .72rem;
      color: rgba(244,240,232,.62);
      margin-bottom: .35rem;
    }

    /* Divider */
    .page-about .divider{
      height: 1px;
      background: rgba(244,240,232,.10);
      margin: 1rem 0;
    }

    /* Pills (focus chips) */
    .page-about .pill-row{
      display:flex;
      flex-wrap: wrap;
      gap: .5rem;
      margin-top: .75rem;
    }

    .page-about .pill{
      padding: .38rem .6rem;
      border-radius: 999px;
      border: 1px solid rgba(244,240,232,.12);
      background: rgba(244,240,232,.04);
      color: rgba(244,240,232,.78);
      font-weight: 800;
      font-size: .84rem;
    }

    /* Facts (key-value) */
    .page-about .facts{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: .7rem;
    }

    .page-about .fact{
      border: 1px solid rgba(244,240,232,.10);
      background: rgba(6,17,13,.18);
      border-radius: 14px;
      padding: .75rem .8rem;
    }

    .page-about .fact-k{
      display:block;
      font-size: .66rem;
      font-weight: 900;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(244,240,232,.62);
      margin-bottom: .25rem;
    }

    .page-about .fact-v{
      display:block;
      font-weight: 800;
      color: rgba(244,240,232,.88);
      line-height: 1.35;
    }

    /* Lists (premium bullets) */
    .page-about .list{
      list-style: none;
      padding-left: 0;
      margin: .65rem 0 0;
      display:grid;
      gap: .55rem;
    }

    .page-about .list li{
      position: relative;
      padding-left: 1.2rem;
      color: rgba(244,240,232,.82);
      line-height: 1.55;
    }

    .page-about .list li::before{
      content:"";
      position:absolute;
      left: 0;
      top: .62em;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: rgba(201,162,39,.78);
      box-shadow: 0 0 0 4px rgba(201,162,39,.14);
    }

    /* Hero stats look tighter + premium */
    .page-about .stat-strip{
      margin-top: 1.1rem;
      border: 1px solid rgba(244,240,232,.12);
      background: rgba(244,240,232,.03);
      border-radius: 18px;
      padding: .85rem .9rem;
    }

    .page-about .stat-num{
      font-weight: 900;
      letter-spacing: .2px;
    }

    .page-about .stat-label{
      color: rgba(244,240,232,.62);
    }

    /* Buttons inside about cards (slightly smaller, elegant) */
    .page-about .btn{ border-radius: 14px; }
    .page-about .btn.btn-primary,
    .page-about .btn.btn-outline,
    .page-about .btn.btn-ghost{
      font-weight: 850;
    }

    /* Responsive */
    @media (max-width: 980px){
      .page-about .facts{ grid-template-columns: 1fr; }
      .page-about .lead{ max-width: 100%; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .page-about .card.luxe{ transition:none !important; }
    }

    /* =========================================================
       ABOUT — Premium Table of Contents (TOC)
    ========================================================= */
    .page-about .toc-band{
      padding-top: 1.4rem;
      padding-bottom: 0;
    }

    .page-about .toc-wrap{
      padding: 1.2rem;
    }

    .page-about .toc-head{
      display:flex;
      gap: 1rem;
      align-items: flex-end;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: .95rem;
    }

    .page-about .toc-title{
      margin: .25rem 0 .3rem;
      font-family: "Playfair Display", serif;
      font-size: 1.35rem;
      letter-spacing: .18px;
    }

    .page-about .toc-sub{
      margin: 0;
      max-width: 70ch;
      font-size: .92rem;
    }

    .page-about .toc-cta{
      display:flex;
      gap: .55rem;
      flex-wrap: wrap;
    }

    .page-about .toc-grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .65rem;
    }

    .page-about .toc-link{
      display:flex;
      align-items:center;
      gap: .7rem;
      padding: .75rem .8rem;
      border-radius: 16px;
      border: 1px solid rgba(244,240,232,.12);
      background: rgba(244,240,232,.03);
      color: rgba(244,240,232,.88);
      font-weight: 850;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
      position: relative;
      overflow: hidden;
    }

    .page-about .toc-link::after{
      content:"";
      position:absolute;
      left:-35%;
      top:-60%;
      width:70%;
      height:220%;
      transform: rotate(18deg);
      background: linear-gradient(90deg, transparent, rgba(244,240,232,.08), transparent);
      opacity:.18;
      pointer-events:none;
    }

    .page-about .toc-link:hover{
      transform: translateY(-1px);
      border-color: rgba(201,162,39,.28);
      background:
        radial-gradient(520px 160px at 25% 0%, rgba(201,162,39,.12), transparent 60%),
        rgba(244,240,232,.03);
      box-shadow: 0 18px 46px rgba(0,0,0,.45);
    }

    .page-about .toc-k{
      width: 34px;
      height: 34px;
      display:grid;
      place-items:center;
      border-radius: 14px;
      border: 1px solid rgba(201,162,39,.28);
      background: rgba(201,162,39,.08);
      color: rgba(201,162,39,.95);
      font-size: .8rem;
      letter-spacing: .12em;
      font-weight: 900;
    }

    .page-about .toc-v{
      display:block;
      line-height: 1.1;
    }

    /* Active highlight (if you enable the optional JS) */
    .page-about .toc-link.is-active{
      border-color: rgba(201,162,39,.42);
      background:
        radial-gradient(620px 180px at 22% 0%, rgba(201,162,39,.16), transparent 62%),
        rgba(244,240,232,.03);
    }

    @media (max-width: 980px){
      .page-about .toc-grid{ grid-template-columns: 1fr; }
      .page-about .toc-head{ align-items: flex-start; }
    }

    /* =========================================================
       FIX: About page grid overlap (Vision/Mission + Governance)
       Forces .grid-2 to behave correctly on About page only
    ========================================================= */
    .page-about .grid-2{
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem !important;
      align-items: stretch;
    }

    .page-about .grid-2 > *{
      min-width: 0;     /* prevents overflow-based overlap */
      margin: 0;        /* avoids unexpected margins collapsing */
    }

    /* If your global CSS uses floats somewhere, this guarantees clearing */
    .page-about .grid-2::after{
      content:"";
      display:block;
      clear: both;
    }

    /* Mobile: stack cards (no overlap) */
    @media (max-width: 980px){
      .page-about .grid-2{
        grid-template-columns: 1fr;
      }
    }
    /* the grid to avoid overlapping of cards */
    /* =========================================================
       GLOBAL FIX: .grid-2 overlapping cards (Vision/Mission etc.)
    ========================================================= */
    .grid-2{
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem !important;
      align-items: stretch;
    }

    .grid-2 > *{
      min-width: 0;     /* prevents overflow overlap */
      margin: 0;        /* avoids unexpected margin collisions */
    }

    /* Safety: if any float rules exist in older CSS */
    .grid-2::after{
      content:"";
      display:block;
      clear: both;
    }

    /* Mobile stack */
    @media (max-width: 980px){
      .grid-2{
        grid-template-columns: 1fr;
      }
    }
    /* =========================================================
       CONTACT PAGE — Form + Map styling (premium, one block)
       Works with: <body class="page-contact">
       Updated: dropdown menu background (deep forest / forest depth)
    ========================================================= */

    /* Split layout: form + right stack */
    .page-contact .contact-split{
      display: grid;
      grid-template-columns: 1.25fr .85fr;
      gap: 1rem;
      align-items: start;
    }

    @media (max-width: 980px){
      .page-contact .contact-split{
        grid-template-columns: 1fr;
      }
    }

    /* Form grid */
    .page-contact .contact-form .form-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .75rem;
    }

    .page-contact .contact-form .field--full{
      grid-column: 1 / -1;
    }

    @media (max-width: 680px){
      .page-contact .contact-form .form-grid{
        grid-template-columns: 1fr;
      }
    }

    /* Labels + inputs */
    .page-contact .contact-form .label{
      display: block;
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(244,240,232,.62);
      margin: 0 0 .35rem;
    }

    .page-contact .contact-form .input{
      width: 100%;
      padding: .78rem .85rem;
      border-radius: 14px;
      border: 1px solid rgba(244,240,232,.12);
      background: rgba(244,240,232,.03);
      color: rgba(244,240,232,.90);
      outline: none;
      transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }

    .page-contact .contact-form .input::placeholder{
      color: rgba(244,240,232,.45);
    }

    .page-contact .contact-form .input:focus{
      border-color: rgba(201,162,39,.35);
      box-shadow: 0 0 0 4px rgba(201,162,39,.10);
      background: rgba(244,240,232,.04);
    }

    /* Select caret look */
    .page-contact .contact-form select.input{
      appearance: none;
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(244,240,232,.55) 50%),
        linear-gradient(135deg, rgba(244,240,232,.55) 50%, transparent 50%);
      background-position:
        calc(100% - 18px) 1.15rem,
        calc(100% - 13px) 1.15rem;
      background-size: 6px 6px;
      background-repeat: no-repeat;
      padding-right: 2.2rem;
    }

    /* ✅ Dropdown menu colors (opened options list) */
    .page-contact .contact-form select.input,
    .page-contact .contact-form select.input option,
    .page-contact .contact-form select.input optgroup{
      background-color: var(--bg2, #071812) !important;  /* forest depth */
      color: var(--text, #F4F0E8) !important;
    }

    /* Optional: selected option highlight (support varies by browser) */
    .page-contact .contact-form select.input option:checked{
      background-color: var(--bg, #06110D) !important;   /* deep forest */
      color: var(--text, #F4F0E8) !important;
    }

    /* Checkbox row */
    .page-contact .contact-form .check{
      display: flex;
      gap: .6rem;
      align-items: flex-start;
    }

    .page-contact .contact-form .check input{
      width: 18px;
      height: 18px;
      margin-top: .18rem;
      accent-color: var(--gold, #C9A227);
    }

    /* =========================================================
       MAP (premium iframe)
    ========================================================= */
    .page-contact .map-frame{
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(244,240,232,.10);
      background: rgba(244,240,232,.02);
      position: relative;
      box-shadow: 0 18px 46px rgba(0,0,0,.42);
    }

    .page-contact .map-frame iframe{
      width: 100%;
      height: 260px;
      border: 0;
      display: block;
    }

    /* Optional: luxury glow overlay */
    .page-contact .map-frame::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(520px 220px at 18% 0%, rgba(201,162,39,.10), transparent 60%),
        radial-gradient(520px 220px at 82% 0%, rgba(31,138,112,.10), transparent 62%);
      opacity:.75;
      mix-blend-mode: screen;
    }
    /* =========================================================
       FOOTER UPDATE: Deep forest base + remove card chrome only
       + Premium column separators (NO pseudo-elements)
       Paste at VERY BOTTOM of styles.css
    ========================================================= */

    /* 1) Footer background -> Deep forest */
    .site-footer.footer-luxe{
      background: var(--bg, #06110D) !important; /* deep forest */
    }

    /* Optional: keep sheen subtle on deep forest */
    .site-footer.footer-luxe .footer-sheen{
      opacity: .65;
    }

    /* 2) Remove ONLY the "card" appearance (no borders, no glass, no shadow) */
    .site-footer.footer-luxe .footer-card{
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }

    /* Disable decorative pseudo elements (we won't use them) */
    .site-footer.footer-luxe .footer-card::before,
    .site-footer.footer-luxe .footer-card::after{
      content: none !important;
    }

    /* Keep dividers consistent on deep forest */
    .site-footer.footer-luxe .footer-divider,
    .site-footer.footer-luxe .footer-divider-soft{
      background: rgba(244,240,232,.10) !important;
    }

    /* Trust pills remain premium */
    .site-footer.footer-luxe .trust-pill{
      background: rgba(244,240,232,.04);
      border: 1px solid rgba(244,240,232,.10);
    }

    /* =========================================================
       3) Desktop layout + vertical separators (RELIABLE)
    ========================================================= */
    @media (min-width: 980px){
      /* Force footer top into 3 columns */
      .site-footer.footer-luxe .footer-top{
        display: grid !important;
        grid-template-columns: 1.45fr .75fr 1fr; /* Brand | Explore | Resources */
        gap: 1.25rem;
        align-items: start;
      }

      /* Vertical separators between columns */
      .site-footer.footer-luxe .footer-top > .footer-card:not(:first-child){
        border-left: 1px solid rgba(244,240,232,.10) !important;
        padding-left: 1.25rem; /* space after separator */
      }
    }

    /* Mobile: stacked, no vertical separators */
    @media (max-width: 979px){
      .site-footer.footer-luxe .footer-top{
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
      }

      .site-footer.footer-luxe .footer-top > .footer-card{
        border-left: none !important;
        padding-left: 0 !important;
      }
    }
    /* =========================================================
       PARTNERS SECTION (Homepage)
       Add to: assets/css/styles.css  (near other section styles)
       Updated: fixes button overlap + improves layout consistency
    ========================================================= */

    #partners{
      position: relative;
    }

    /* Make sure the section-head spacing matches your existing rhythm */
    #partners .section-head{
      margin-bottom: 1.25rem;
    }

    /* Soft luxe background option (keeps it subtle) */
    #partners.section{
      background:
        radial-gradient(900px 420px at 12% 10%, rgba(201,162,39,.10), transparent 60%),
        radial-gradient(700px 360px at 90% 30%, rgba(31,138,112,.10), transparent 55%);
    }

    /* Ensure the 2-column layout stretches nicely */
    #partners .grid-2{
      align-items: stretch;
    }

    /* Partner pills row */
    #partners .pill-row{
      display: flex;
      flex-wrap: wrap;
      gap: .65rem .65rem;
      margin-top: .75rem;
    }

    /* Pill enhancement (won’t break your existing .pill outside this section) */
    #partners .pill{
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .55rem .85rem;
      border-radius: 999px;
      border: 1px solid var(--line, rgba(244,240,232,.10));
      background: var(--surface, rgba(244,240,232,.05));
      color: var(--text, #F4F0E8);
      font-weight: 650;
      letter-spacing: .2px;
      line-height: 1;
      box-shadow: 0 10px 22px rgba(0,0,0,.22);
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

    #partners .pill:hover{
      transform: translateY(-2px);
      border-color: var(--line-strong, rgba(244,240,232,.14));
      background: var(--surface2, rgba(244,240,232,.08));
    }

    /* Tiny dot indicator */
    #partners .pill::before{
      content:"";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(201,162,39,.85);
      box-shadow: 0 0 0 3px rgba(201,162,39,.15);
    }

    /* =========================================================
       FIX: Button stack overlap in the "For partners & donors" card
       Targets the <div class="d-grid gap-2"> inside #partners only
    ========================================================= */

    #partners .d-grid.gap-2{
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: .65rem !important;
      align-items: stretch;
    }

    /* Force buttons to behave like full-width blocks and never overlay */
    #partners .d-grid.gap-2 > a.btn{
      display: inline-flex !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      justify-content: center;
      text-align: center;
      white-space: normal;
    }

    /* Safety: prevent any weird positioning context from causing overlap */
    #partners .card.luxe{
      position: relative;
    }

    /* Mobile: stack nicely */
    @media (max-width: 900px){
      #partners .grid-2{
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
      }
    }
    #partners .pill{
      line-height: 1.15;     /* helps long names like U.S. Embassy in Tanzania */
      padding: .58rem .9rem; /* slightly better spacing */
    }