html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', sans-serif;
    background-color: #F7F3ED;
    color: #2C2C2C;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;
}

.icon{
  display: inline-flex;
  transform: translateY(1px);
}

/* LIGHT mode — for dark background pages (homepage, impact, donate) */
#navbar .bti-nav-link        { color: rgba(247,243,237,0.72); }
#navbar .bti-nav-link:hover  { background: rgba(255,255,255,0.1); color: #F7F3ED; }
#navbar .bti-nav-link.active { background: rgba(196,154,60,0.2) !important; color: #DDB96A !important; }
#navbar #bti-hamburger       { color: #F7F3ED; }

/* After scroll — always resolve to dark text regardless of mode */
#navbar.scrolled .bti-nav-link        { color: rgba(28,58,42,0.65) !important; }
#navbar.scrolled .bti-nav-link:hover  { background: rgba(28,58,42,0.07) !important; color: #1C3A2A !important; }
#navbar.scrolled .bti-nav-link.active { background: rgba(196,154,60,0.12) !important; color: #1C3A2A !important; }
#navbar.scrolled #bti-hamburger       { color: #1C3A2A !important; }

/* ── Navbar ── */
#navbar {
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

#navbar.scrolled {
    background: #F7F3ED !important;
    box-shadow: 0 1px 0 rgba(28, 58, 42, 0.12);
}

/* ── Mobile Menu ── */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-menu.open {
    max-height: 600px;
}

/* ── Fade-up on scroll ── */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.72s ease, transform 0.72s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Hero text clip ── */
.hero-accent {
    background: linear-gradient(135deg, #C49A3C 0%, #DDB96A 60%, #C49A3C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Stat counter ── */
.counter {
    font-family: 'Cormorant Garamond', serif;
}

/* ── Program card hover ── */
.program-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.program-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(28, 58, 42, 0.12);
}

/* ── Pillar number ── */
.pillar-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 5rem;
    line-height: 1;
    color: rgba(196, 154, 60, 0.18);
    font-style: italic;
    position: absolute;
    top: -20px;
    right: 20px;
}

/* ── Gold underline ── */
.gold-line::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: #C49A3C;
    margin-top: 14px;
}

.gold-line-center::after {
    margin-left: auto;
    margin-right: auto;
}

/* ── CTA shimmer ── */
.btn-primary {
    position: relative;
    overflow: hidden;
    background: #C49A3C;
    color: #fff;
    transition: background 0.3s ease;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.5s ease;
}

.btn-primary:hover::after {
    left: 150%;
}

.btn-primary:hover {
    background: #b08832;
}

.btn-outline {
    border: 1.5px solid #1C3A2A;
    color: #1C3A2A;
    transition: background 0.3s ease, color 0.3s ease;
}

.btn-outline:hover {
    background: #1C3A2A;
    color: #F7F3ED;
}

/* ── Noise grain overlay ── */
.grain::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.5;
    z-index: 1;
}

/* Grid pattern */
.grid-bg {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ── Scroll indicator ── */
@keyframes scrollBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

.scroll-hint {
    animation: scrollBounce 1.8s ease-in-out infinite;
}

/* ── Image overlay ── */
.img-overlay {
    background: linear-gradient(to top, rgba(14, 32, 25, 0.6) 0%, transparent 50%);
}


/* =============================== ABOUT ========================= */
/* ── Reveal ── */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1);
    }
    .reveal.from-left  { transform: translateX(-40px); }
    .reveal.from-right { transform: translateX(40px); }
    .reveal.visible    { opacity: 1; transform: translate(0); }

    /* ── Masthead large text ── */
    .masthead-giant {
      font-size: clamp(4rem, 12vw, 10rem);
      line-height: 0.92;
      letter-spacing: -0.03em;
    }

    /* ── Problem number ── */
    .stat-giant {
      font-size: clamp(5rem, 16vw, 13rem);
      line-height: 1;
      letter-spacing: -0.04em;
    }

    /* ── Timeline ── */
    .timeline-line {
      position: absolute;
      left: 20px;
      top: 0;
      bottom: 0;
      width: 1px;
      background: linear-gradient(to bottom, transparent, #C49A3C 10%, #C49A3C 90%, transparent);
    }
    @media (min-width: 768px) {
      .timeline-line { left: 50%; transform: translateX(-50%); }
    }

    .timeline-dot {
      width: 12px;
      height: 12px;
      background: #C49A3C;
      border-radius: 50%;
      border: 3px solid #EDE5D8;
      box-shadow: 0 0 0 2px #C49A3C;
      flex-shrink: 0;
    }

    /* ── Values ticker ── */
    @keyframes ticker {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .ticker-track {
      display: flex;
      width: max-content;
      animation: ticker 28s linear infinite;
    }
    .ticker-track:hover { animation-play-state: paused; }

    /* ── Team card hover ── */
    .team-card .overlay {
      background: linear-gradient(to top, rgba(14,32,25,0.92) 0%, rgba(14,32,25,0.3) 60%, transparent 100%);
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .team-card:hover .overlay { opacity: 1; }
    .team-card .member-bio {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s;
    }
    .team-card:hover .member-bio { opacity: 1; transform: translateY(0); }
    .team-card img {
      transition: transform 0.5s ease;
    }
    .team-card:hover img { transform: scale(1.06); }

    /* ── Step connector ── */
    .step-connector {
      width: 2px;
      height: 40px;
      background: linear-gradient(to bottom, #C49A3C, transparent);
      margin: 0 auto;
    }
    @media (min-width: 1024px) {
      .step-connector { display: none; }
    }
    .step-arrow {
      display: none;
    }
    @media (min-width: 1024px) {
      .step-arrow {
        display: flex;
        align-items: center;
        color: #C49A3C;
        font-size: 1.25rem;
        flex-shrink: 0;
        margin-top: 2rem;
      }
    }

    /* ── Partners logo placeholder ── */
    .partner-logo {
      border: 1px solid rgba(28,58,42,0.15);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .partner-logo:hover {
      border-color: #C49A3C;
      box-shadow: 0 4px 20px rgba(196,154,60,0.12);
    }

    /* ── Full-bleed split image ── */
    .split-image-row {
      display: grid;
      grid-template-columns: 1fr;
    }
    @media (min-width: 1024px) {
      .split-image-row { grid-template-columns: 1fr 1fr; min-height: 580px; }
    }

    /* ── Horizontal rule accent ── */
    .hr-gold { border: none; height: 1px; background: linear-gradient(to right, #C49A3C, transparent); }

    /* ── Pull quote ── */
    .pull-quote-mark {
      font-family: 'Cormorant Garamond', serif;
      font-size: 8rem;
      line-height: 0.6;
      color: #C49A3C;
      opacity: 0.3;
      font-style: italic;
    }


    /* =============================== Programs =========================== */
    /* ── Reveal ── */
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ══════════════════════════════
       TAB EXPLORER
    ══════════════════════════════ */
    /* Sidebar tab button */
    .tab-btn {
      position: relative;
      cursor: pointer;
      transition: background 0.3s ease, color 0.3s ease;
    }
    .tab-btn .tab-index {
      font-family: 'Cormorant Garamond', serif;
      font-size: 3.5rem;
      line-height: 1;
      font-style: italic;
      font-weight: 300;
      transition: color 0.3s ease;
      color: rgba(196,154,60,0.18);
    }
    .tab-btn.active .tab-index { color: rgba(196,154,60,0.55); }
    .tab-btn .tab-bar {
      position: absolute;
      top: 0; left: 0;
      width: 3px;
      height: 0%;
      background: #C49A3C;
      transition: height 0.45s cubic-bezier(0.22,1,0.36,1);
      border-radius: 0 2px 2px 0;
    }
    .tab-btn.active .tab-bar { height: 100%; }
    .tab-btn:hover:not(.active) { background: rgba(255,255,255,0.4); }

    /* Tab panel */
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* Panel fade-in */
    @keyframes panelIn {
      from { opacity: 0; transform: translateX(20px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .tab-panel.active { animation: panelIn 0.42s cubic-bezier(0.22,1,0.36,1) both; }

    /* Mobile pill tabs */
    .pill-tab {
      border-bottom: 2px solid transparent;
      transition: border-color 0.3s ease, color 0.3s ease;
      white-space: nowrap;
    }
    .pill-tab.active {
      border-color: #C49A3C;
      color: #1C3A2A;
    }

    /* ══════════════════════════════
       ACCORDION
    ══════════════════════════════ */
    .acc-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.45s cubic-bezier(0.22,1,0.36,1);
    }
    .acc-body.open { max-height: 600px; }
    .acc-icon {
      transition: transform 0.35s ease;
    }
    .acc-item.open .acc-icon { transform: rotate(45deg); }

    /* ══════════════════════════════
       FAQ ACCORDION
    ══════════════════════════════ */
    .faq-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1);
    }
    .faq-body.open { max-height: 400px; }
    .faq-chevron { transition: transform 0.3s ease; }
    .faq-item.open .faq-chevron { transform: rotate(180deg); }

    /* ══════════════════════════════
       PROGRAM 01 — ACADEMY specifics
    ══════════════════════════════ */
    .outcome-bar {
      height: 4px;
      background: #EDE5D8;
      border-radius: 2px;
      overflow: hidden;
    }
    .outcome-fill {
      height: 100%;
      background: linear-gradient(to right, #C49A3C, #DDB96A);
      border-radius: 2px;
      width: 0%;
      transition: width 1.2s cubic-bezier(0.22,1,0.36,1);
    }

    /* ══════════════════════════════
       PROGRAM 02 — SPONSORSHIP FUND
    ══════════════════════════════ */
    .fund-step-line {
      position: absolute;
      left: 19px;
      top: 40px;
      bottom: -20px;
      width: 1px;
      background: linear-gradient(to bottom, #C49A3C, transparent);
    }
    .fund-dot {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #C49A3C;
      color: white;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }

    /* ══════════════════════════════
       PROGRAM 03 — HUB-SPOKE CSS
    ══════════════════════════════ */
    .hub-wrap {
      position: relative;
      width: 280px;
      height: 280px;
      margin: 0 auto;
    }
    .hub-center {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 100px; height: 100px;
      background: #1C3A2A;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      z-index: 2;
      box-shadow: 0 0 0 8px rgba(28,58,42,0.15);
    }
    .hub-spoke {
      position: absolute;
      width: 88px; height: 88px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      text-align: center;
      border: 1px solid rgba(196,154,60,0.35);
      background: #F7F3ED;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.6rem;
      color: #1C3A2A;
      font-weight: 500;
      line-height: 1.2;
      padding: 8px;
      transition: background 0.3s, border-color 0.3s;
      cursor: default;
    }
    .hub-spoke:hover { background: #C49A3C; color: white; border-color: #C49A3C; }
    .hub-line {
      position: absolute;
      top: 50%; left: 50%;
      width: 1px;
      background: rgba(196,154,60,0.3);
      transform-origin: top center;
      z-index: 0;
    }

    /* ══════════════════════════════
       APPLICATION TIMELINE (horizontal)
    ══════════════════════════════ */
    .app-step-line {
      position: absolute;
      top: 19px;
      left: 40px;
      right: -40px;
      height: 1px;
      background: linear-gradient(to right, #C49A3C, rgba(196,154,60,0.15));
    }

    /* ══════════════════════════════
       CHECKLIST
    ══════════════════════════════ */
    .check-item::before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #C49A3C;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8l3 3 5-5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-size: cover;
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* ══════════════════════════════
       STICKY SIDEBAR
    ══════════════════════════════ */
    @media (min-width: 1024px) {
      .sidebar-sticky { position: sticky; top: 32px; }
    }

    /* ══════════════════════════════
       HR GOLD
    ══════════════════════════════ */
    .hr-gold { border: none; height: 1px; background: linear-gradient(to right, #C49A3C, transparent); margin: 0; }

    /* ══════════════════════════════
       PROGRAM IMAGE FRAME
    ══════════════════════════════ */
    .img-frame {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
    }
    .img-frame::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 24px;
      border: 1px solid rgba(196,154,60,0.2);
      pointer-events: none;
    }


    /* ============================== Impact =========================== */
    /* ── Reveal ── */
    .reveal {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1),
                  transform 0.75s cubic-bezier(0.22,1,0.36,1);
    }
    .reveal.from-left  { transform: translateX(-36px); }
    .reveal.from-right { transform: translateX(36px); }
    .reveal.visible    { opacity: 1; transform: translate(0,0); }

    /* ══════════════════════════════
       01 COUNTER DASHBOARD
    ══════════════════════════════ */
    .counter-num {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(3.5rem, 8vw, 6.5rem);
      line-height: 1;
      letter-spacing: -0.03em;
      color: #C49A3C;
    }
    .counter-card {
      border-bottom: 1px solid rgba(196,154,60,0.12);
      transition: background 0.3s ease;
    }
    .counter-card:last-child { border-bottom: none; }
    @media (min-width: 768px) {
      .counter-card {
        border-bottom: none;
        border-right: 1px solid rgba(196,154,60,0.12);
      }
      .counter-card:last-child { border-right: none; }
    }

    /* ══════════════════════════════
       02 THEORY OF CHANGE
    ══════════════════════════════ */
    .toc-node {
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .toc-node:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(28,58,42,0.12);
    }
    .toc-arrow {
      color: rgba(196,154,60,0.4);
      flex-shrink: 0;
    }
    /* Color-coded node tops */
    .toc-node-0 { border-top: 3px solid #7A7A6E; }
    .toc-node-1 { border-top: 3px solid #C49A3C; }
    .toc-node-2 { border-top: 3px solid #DDB96A; }
    .toc-node-3 { border-top: 3px solid #1C3A2A; }
    .toc-node-4 { border-top: 3px solid #0E2019; }

    /* ══════════════════════════════
       03 STORY CARDS
    ══════════════════════════════ */
    .story-card {
      position: relative;
      overflow: hidden;
      transition: transform 0.4s ease;
    }
    .story-card:hover { transform: translateY(-6px); }
    .story-img {
      transition: transform 0.55s ease;
    }
    .story-card:hover .story-img { transform: scale(1.04); }
    .story-tag {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.65rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      font-weight: 500;
    }

    /* ══════════════════════════════
       04 FUND TRANSPARENCY BARS
    ══════════════════════════════ */
    .alloc-bar-bg {
      height: 10px;
      background: rgba(28,58,42,0.12);
      border-radius: 5px;
      overflow: hidden;
    }
    .alloc-bar-fill {
      height: 100%;
      border-radius: 5px;
      width: 0%;
      transition: width 1.4s cubic-bezier(0.22,1,0.36,1);
    }
    .alloc-bar-fill.gold   { background: linear-gradient(to right, #C49A3C, #DDB96A); }
    .alloc-bar-fill.forest { background: linear-gradient(to right, #1C3A2A, #2d5a42); }
    .alloc-bar-fill.mid    { background: linear-gradient(to right, #7A7A6E, #9a9a8e); }
    .alloc-bar-fill.dark   { background: #0E2019; }

    /* ══════════════════════════════
       05 SDG BADGES
    ══════════════════════════════ */
    .sdg-badge {
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      cursor: default;
    }
    .sdg-badge:hover {
      transform: translateY(-4px) scale(1.04);
      box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    }

    /* ══════════════════════════════
       06 GEOGRAPHIC REACH
    ══════════════════════════════ */
    .region-pill {
      transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }
    .region-pill:hover {
      background: #C49A3C;
      color: white;
      border-color: #C49A3C;
    }

    /* ══════════════════════════════
       07 MASONRY GALLERY
    ══════════════════════════════ */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 180px);
      gap: 10px;
    }
    @media (max-width: 768px) {
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 160px);
      }
    }
    .g1 { grid-column: span 2; grid-row: span 2; }
    .g2 { grid-column: span 1; grid-row: span 1; }
    .g3 { grid-column: span 1; grid-row: span 2; }
    .g4 { grid-column: span 2; grid-row: span 1; }
    .g5 { grid-column: span 1; grid-row: span 1; }
    .g6 { grid-column: span 1; grid-row: span 1; }
    .gallery-item {
      overflow: hidden;
      border-radius: 14px;
      position: relative;
    }
    .gallery-item img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .gallery-item:hover img { transform: scale(1.06); }
    .gallery-item .caption {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(14,32,25,0.7) 0%, transparent 50%);
      opacity: 0;
      transition: opacity 0.35s ease;
      display: flex;
      align-items: flex-end;
      padding: 14px;
    }
    .gallery-item:hover .caption { opacity: 1; }

    /* ══════════════════════════════
       08 REPORT CARD
    ══════════════════════════════ */
    .report-card {
      background: linear-gradient(135deg, #1C3A2A 0%, #0E2019 100%);
      position: relative;
      overflow: hidden;
    }
    .report-card::before {
      content: '2024';
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
      font-family: 'Cormorant Garamond', serif;
      font-size: 9rem;
      font-weight: 300;
      color: rgba(196,154,60,0.06);
      pointer-events: none;
      line-height: 1;
    }

    /* ── HR gold ── */
    .hr-gold { border: none; height: 1px; background: linear-gradient(to right, #C49A3C, transparent); }

    /* ── Pledge input ── */
    .pledge-input {
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(196,154,60,0.25);
      color: #F7F3ED;
      transition: border-color 0.3s ease, background 0.3s ease;
    }
    .pledge-input:focus {
      outline: none;
      border-color: #C49A3C;
      background: rgba(255,255,255,0.1);
    }
    .pledge-input::placeholder { color: rgba(247,243,237,0.3); }



    /* ================================ Blogs ======================= */
    /* ── Reveal ── */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
                  transform 0.7s cubic-bezier(0.22,1,0.36,1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ══════════════════════════════
       PUBLICATION MASTHEAD
    ══════════════════════════════ */
    .issue-rule {
      border: none;
      height: 1px;
      background: #2C2C2C;
    }
    .issue-rule-gold {
      border: none;
      height: 2px;
      background: #C49A3C;
    }
    .masthead-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 600;
      font-size: clamp(2.2rem, 5vw, 3.8rem);
      letter-spacing: -0.01em;
      line-height: 1;
    }

    /* ══════════════════════════════
       FEATURED ARTICLE
    ══════════════════════════════ */
    .featured-img {
      position: relative;
      overflow: hidden;
    }
    .featured-img img {
      transition: transform 0.6s ease;
    }
    .featured-img:hover img { transform: scale(1.03); }

    /* ══════════════════════════════
       CATEGORY FILTER
    ══════════════════════════════ */
    .cat-btn {
      transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
      border: 1px solid rgba(28,58,42,0.15);
      white-space: nowrap;
    }
    .cat-btn.active, .cat-btn:hover {
      background: #1C3A2A;
      color: #F7F3ED;
      border-color: #1C3A2A;
    }
    .cat-btn.active { pointer-events: none; }

    /* ══════════════════════════════
       ARTICLE CARDS
    ══════════════════════════════ */
    .article-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .article-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 48px rgba(28,58,42,0.1);
    }
    .article-card img {
      transition: transform 0.5s ease;
    }
    .article-card:hover img { transform: scale(1.04); }

    /* Hidden/visible for filter */
    .post-item {
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .post-item.hidden-post {
      display: none;
    }

    /* ══════════════════════════════
       CATEGORY COLOR BADGES
    ══════════════════════════════ */
    .badge-field      { background:#1C3A2A; color:#F7F3ED; }
    .badge-entrep     { background:#C49A3C; color:#fff; }
    .badge-education  { background:#0E2019; color:#DDB96A; }
    .badge-community  { background:#EDE5D8; color:#1C3A2A; border:1px solid rgba(28,58,42,0.2); }
    .badge-press      { background:#7A7A6E; color:#F7F3ED; }

    /* ══════════════════════════════
       NEWSPAPER COLUMNS
    ══════════════════════════════ */
    .newspaper-cols {
      column-count: 1;
      column-gap: 2.5rem;
    }
    @media (min-width: 640px) { .newspaper-cols { column-count: 2; } }
    @media (min-width: 1024px) { .newspaper-cols { column-count: 3; } }

    .newspaper-cols p {
      break-inside: avoid;
      margin-bottom: 1.1rem;
    }
    .field-note {
      break-inside: avoid;
      margin-bottom: 2rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid rgba(28,58,42,0.1);
    }
    .field-note:last-child { border-bottom: none; }

    /* Drop cap */
    .drop-cap::first-letter {
      font-family: 'Cormorant Garamond', serif;
      font-size: 3.5rem;
      font-weight: 600;
      line-height: 0.75;
      float: left;
      margin-right: 6px;
      margin-top: 6px;
      color: #C49A3C;
    }

    /* ══════════════════════════════
       NEWSLETTER
    ══════════════════════════════ */
    .nl-input {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(196,154,60,0.25);
      color: #F7F3ED;
      transition: border-color 0.3s ease;
    }
    .nl-input:focus {
      outline: none;
      border-color: #C49A3C;
    }
    .nl-input::placeholder { color: rgba(247,243,237,0.3); }

    /* ══════════════════════════════
       LIST ARTICLE ROW
    ══════════════════════════════ */
    .list-row {
      transition: background 0.25s ease;
    }
    .list-row:hover { background: rgba(28,58,42,0.04); }

    /* ══════════════════════════════
       PRESS STRIP
    ══════════════════════════════ */
    .press-logo {
      border: 1px solid rgba(28,58,42,0.1);
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .press-logo:hover {
      border-color: #C49A3C;
      box-shadow: 0 4px 16px rgba(196,154,60,0.1);
    }

    /* ══════════════════════════════
       READING TIME PILL
    ══════════════════════════════ */
    .read-time {
      font-family: 'DM Mono', monospace;
      font-size: 0.65rem;
    }

    /* ══════════════════════════════
       HR VARIANTS
    ══════════════════════════════ */
    .hr-full { border: none; height: 1px; background: rgba(28,58,42,0.12); }
    .hr-gold { border: none; height: 1px; background: linear-gradient(to right, #C49A3C, transparent); }


    /* =============================== Contact ======================= */
    /* ── Reveal ── */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
                  transform 0.7s cubic-bezier(0.22,1,0.36,1);
    }
    .reveal.from-left  { transform: translateX(-28px); }
    .reveal.from-right { transform: translateX(28px); }
    .reveal.visible    { opacity: 1; transform: translate(0,0); }

    /* ══════════════════════════════
       01  GREETING HEADER
    ══════════════════════════════ */
    .greeting-word {
      display: inline-block;
      opacity: 0;
      transform: translateY(40px);
      animation: wordIn 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
    }
    @keyframes wordIn {
      to { opacity: 1; transform: translateY(0); }
    }

    /* ══════════════════════════════
       02  PATHWAY CARDS
    ══════════════════════════════ */
    .pathway-card {
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      border: 2px solid transparent;
    }
    .pathway-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 48px rgba(28,58,42,0.12);
    }
    .pathway-card.selected {
      border-color: #C49A3C;
      box-shadow: 0 0 0 4px rgba(196,154,60,0.12);
    }
    .pathway-icon {
      transition: background 0.3s ease;
    }
    .pathway-card:hover .pathway-icon,
    .pathway-card.selected .pathway-icon {
      background: #C49A3C;
    }
    .pathway-card:hover .pathway-icon svg,
    .pathway-card.selected .pathway-icon svg {
      color: white;
    }

    /* ══════════════════════════════
       03  MULTI-STEP FORM
    ══════════════════════════════ */
    /* Step visibility */
    .form-step { display: none; }
    .form-step.active { display: block; }

    /* Step progress dots */
    .step-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: rgba(28,58,42,0.2);
      transition: background 0.3s ease, transform 0.3s ease;
    }
    .step-dot.active {
      background: #C49A3C;
      transform: scale(1.3);
    }
    .step-dot.done { background: #1C3A2A; }

    /* Step transition */
    @keyframes stepIn {
      from { opacity: 0; transform: translateX(24px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .form-step.active { animation: stepIn 0.38s cubic-bezier(0.22,1,0.36,1) both; }

    /* Form inputs */
    .f-input, .f-select, .f-textarea {
      width: 100%;
      background: rgba(255,255,255,0.7);
      border: 1.5px solid rgba(28,58,42,0.15);
      border-radius: 12px;
      padding: 12px 16px;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.875rem;
      color: #2C2C2C;
      transition: border-color 0.25s ease, background 0.25s ease;
      outline: none;
    }
    .f-input:focus, .f-select:focus, .f-textarea:focus {
      border-color: #C49A3C;
      background: white;
    }
    .f-input::placeholder, .f-textarea::placeholder { color: #7A7A6E; }

    /* Role radio buttons */
    .role-option {
      cursor: pointer;
      border: 1.5px solid rgba(28,58,42,0.15);
      border-radius: 14px;
      transition: border-color 0.25s ease, background 0.25s ease;
    }
    .role-option:hover { border-color: rgba(196,154,60,0.4); background: rgba(255,255,255,0.6); }
    .role-option.chosen {
      border-color: #C49A3C;
      background: white;
    }
    .role-option input { display: none; }

    /* Subject pills */
    .subject-pill {
      cursor: pointer;
      border: 1.5px solid rgba(28,58,42,0.15);
      border-radius: 50px;
      padding: 8px 16px;
      font-size: 0.75rem;
      font-family: 'DM Sans', sans-serif;
      transition: all 0.25s ease;
      background: rgba(255,255,255,0.6);
    }
    .subject-pill:hover { border-color: #C49A3C; }
    .subject-pill.selected {
      background: #1C3A2A;
      border-color: #1C3A2A;
      color: #F7F3ED;
    }
    .subject-pill input { display: none; }

    /* Progress bar */
    .form-progress-bar {
      height: 2px;
      background: rgba(28,58,42,0.1);
      border-radius: 1px;
      overflow: hidden;
    }
    .form-progress-fill {
      height: 100%;
      background: linear-gradient(to right, #C49A3C, #DDB96A);
      border-radius: 1px;
      transition: width 0.5s cubic-bezier(0.22,1,0.36,1);
    }

    /* ══════════════════════════════
       04  RESPONSE SLA STRIP
    ══════════════════════════════ */
    .sla-item {
      position: relative;
      transition: background 0.25s ease;
    }
    .sla-item:hover { background: rgba(196,154,60,0.06); }
    .sla-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* ══════════════════════════════
       05  OFFICE / MAP
    ══════════════════════════════ */
    .map-placeholder {
      background: linear-gradient(135deg, #1C3A2A 0%, #0E2019 100%);
      position: relative;
      overflow: hidden;
    }
    .map-grid-line {
      position: absolute;
      background: rgba(196,154,60,0.06);
    }

    /* ══════════════════════════════
       06  SOCIAL LINKS
    ══════════════════════════════ */
    .social-link {
      transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    }
    .social-link:hover {
      background: #C49A3C;
      color: white;
      transform: translateY(-3px);
    }

    /* ══════════════════════════════
       SUCCESS STATE
    ══════════════════════════════ */
    #form-success {
      display: none;
    }
    #form-success.visible { display: flex; }

    @keyframes checkIn {
      0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
      60%  { transform: scale(1.15) rotate(3deg); }
      100% { transform: scale(1) rotate(0); opacity: 1; }
    }
    .check-anim { animation: checkIn 0.6s cubic-bezier(0.22,1,0.36,1) both; }

    /* HR */
    .hr-sand { border: none; height: 1px; background: rgba(28,58,42,0.1); }
    .hr-gold  { border: none; height: 1px; background: linear-gradient(to right, #C49A3C, transparent); }


    /* =========================== Get Involved ====================== */
    /* ── Reveal ── */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.72s cubic-bezier(0.22,1,0.36,1),
                  transform 0.72s cubic-bezier(0.22,1,0.36,1);
    }
    .reveal.from-left  { transform: translateX(-30px); }
    .reveal.from-right { transform: translateX(30px); }
    .reveal.visible    { opacity: 1; transform: translate(0,0); }

    /* ══════════════════════════════
       01  CONVERSION HERO
    ══════════════════════════════ */

    /* Amount preset buttons */
    .amount-btn {
      border: 1.5px solid rgba(196,154,60,0.25);
      color: rgba(247,243,237,0.7);
      transition: all 0.25s ease;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
    }
    .amount-btn:hover, .amount-btn.active {
      border-color: #C49A3C;
      background: rgba(196,154,60,0.12);
      color: #C49A3C;
    }
    .amount-btn.active { background: rgba(196,154,60,0.18); }
    /* Frequency toggle */
    .freq-toggle {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(196,154,60,0.2);
    }
    .freq-btn {
      transition: background 0.25s ease, color 0.25s ease;
      color: rgba(247,243,237,0.5);
    }
    .freq-btn.active {
      background: #C49A3C;
      color: white;
    }
    /* Custom amount input */
    .custom-amount {
      background: rgba(255,255,255,0.07);
      border: 1.5px solid rgba(196,154,60,0.3);
      color: #F7F3ED;
      transition: border-color 0.3s;
    }
    .custom-amount:focus { outline: none; border-color: #C49A3C; }
    .custom-amount::placeholder { color: rgba(247,243,237,0.25); }

    /* ══════════════════════════════
       02  GIVING TIERS
    ══════════════════════════════ */
    .tier-card {
      position: relative;
      overflow: hidden;
      transition: transform 0.35s ease, box-shadow 0.35s ease;
    }
    .tier-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 28px 60px rgba(0,0,0,0.18);
    }
    /* Metallic gradient borders via pseudo-element */
    .tier-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2px;
      background: var(--tier-gradient);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
    .tier-seed       { --tier-gradient: linear-gradient(135deg, #7A7A6E, #aaa, #7A7A6E); }
    .tier-champion   { --tier-gradient: linear-gradient(135deg, #C49A3C, #DDB96A, #C49A3C); }
    .tier-catalyst   { --tier-gradient: linear-gradient(135deg, #C49A3C, #fff8e0, #C49A3C, #DDB96A); }
    .tier-cornerstone { --tier-gradient: linear-gradient(135deg, #DDB96A, #fff, #DDB96A, #C49A3C, #fff); }

    /* Diagonal ribbon */
    .tier-ribbon {
      position: absolute;
      top: 18px;
      right: -22px;
      width: 100px;
      text-align: center;
      padding: 4px 0;
      font-family: 'DM Mono', monospace;
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      transform: rotate(35deg);
    }
    .ribbon-seed        { background: rgba(122,122,110,0.3); color: #aaa; }
    .ribbon-champion    { background: rgba(196,154,60,0.3); color: #C49A3C; }
    .ribbon-catalyst    { background: rgba(196,154,60,0.5); color: #fff; }
    .ribbon-cornerstone { background: linear-gradient(90deg,#C49A3C,#DDB96A); color: #0E2019; }

    /* ══════════════════════════════
       03  IMPACT CALCULATOR
    ══════════════════════════════ */
    .calc-wrap { background: #F7F3ED; }

    /* Custom range slider */
    input[type="range"].impact-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: linear-gradient(to right, #C49A3C var(--slider-pct, 10%), rgba(28,58,42,0.15) var(--slider-pct, 10%));
      outline: none;
      cursor: pointer;
    }
    input[type="range"].impact-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 24px; height: 24px;
      border-radius: 50%;
      background: #C49A3C;
      border: 3px solid #F7F3ED;
      box-shadow: 0 2px 10px rgba(196,154,60,0.4);
      cursor: pointer;
      transition: transform 0.2s ease;
    }
    input[type="range"].impact-slider::-webkit-slider-thumb:hover {
      transform: scale(1.2);
    }
    input[type="range"].impact-slider::-moz-range-thumb {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: #C49A3C;
      border: 3px solid #F7F3ED;
      cursor: pointer;
    }

    /* Outcome transition */
    .outcome-item {
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .outcome-item.fade-out {
      opacity: 0;
      transform: translateY(8px);
    }

    /* Amount display */
    .calc-amount {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      line-height: 1;
    }

    /* ══════════════════════════════
       04  WAYS TO GIVE
    ══════════════════════════════ */
    .ways-rule { border: none; height: 2px; background: #2C2C2C; }
    .ways-col {
      border-right: 1px solid rgba(28,58,42,0.1);
    }
    .ways-col:last-child { border-right: none; }

    /* ══════════════════════════════
       05  BEYOND MONEY GRID
    ══════════════════════════════ */
    .beyond-cell {
      transition: transform 0.3s ease;
    }
    .beyond-cell:hover { transform: scale(1.01); }

    /* ══════════════════════════════
       06  MENTOR FORM
    ══════════════════════════════ */
    .mentor-input {
      background: rgba(255,255,255,0.08);
      border: 1.5px solid rgba(196,154,60,0.2);
      color: #F7F3ED;
      border-radius: 12px;
      padding: 12px 16px;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.875rem;
      width: 100%;
      transition: border-color 0.25s ease;
      outline: none;
    }
    .mentor-input:focus { border-color: #C49A3C; }
    .mentor-input::placeholder { color: rgba(247,243,237,0.28); }

    /* ══════════════════════════════
       07  PARTNERSHIP PACK
    ══════════════════════════════ */
    .pack-card {
      background: linear-gradient(110deg, #1C3A2A 0%, #0E2019 100%);
      position: relative;
      overflow: hidden;
    }
    .pack-card::after {
      content: '';
      position: absolute;
      top: -60px; right: -60px;
      width: 240px; height: 240px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(196,154,60,0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    /* Landscape doc icon */
    .doc-landscape {
      width: 80px; height: 60px;
      background: rgba(196,154,60,0.1);
      border: 1.5px solid rgba(196,154,60,0.25);
      border-radius: 10px;
      position: relative;
      flex-shrink: 0;
    }
    .doc-landscape::before {
      content: '';
      position: absolute;
      bottom: 8px; left: 10px; right: 10px;
      height: 1.5px;
      background: rgba(196,154,60,0.25);
      box-shadow: 0 5px 0 rgba(196,154,60,0.15), 0 10px 0 rgba(196,154,60,0.1);
    }

    /* ══════════════════════════════
       08  TRUST SIGNALS
    ══════════════════════════════ */
    .trust-badge {
      border: 1px solid rgba(28,58,42,0.15);
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .trust-badge:hover {
      border-color: #C49A3C;
      box-shadow: 0 4px 16px rgba(196,154,60,0.08);
    }

    /* ══════════════════════════════
       09  GIVING FAQ
    ══════════════════════════════ */
    .gfaq-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1);
    }
    .gfaq-body.open { max-height: 300px; }
    .gfaq-chevron { transition: transform 0.3s ease; }
    .gfaq-item.open .gfaq-chevron { transform: rotate(180deg); }

    /* ══════════════════════════════
       10  EMOTIONAL CLOSE
    ══════════════════════════════ */
    .close-bg {
      background: linear-gradient(to bottom, #0E2019 0%, #1C3A2A 100%);
    }
    .close-overlay {
      background: linear-gradient(to top, rgba(14,32,25,0.97) 0%, rgba(14,32,25,0.6) 50%, rgba(14,32,25,0.97) 100%);
    }

    /* HR */
    .hr-sand { border: none; height: 1px; background: rgba(28,58,42,0.1); }
    .hr-gold  { border: none; height: 1px; background: linear-gradient(to right, #C49A3C, transparent); }
    .hr-dark  { border: none; height: 1px; background: rgba(247,243,237,0.06); }



    /* ============================== Privacy =========================== */
    /* ══════════════════════════════
       READING PROGRESS BAR
    ══════════════════════════════ */
    #reading-progress {
      position: fixed;
      top: 0; left: 0;
      height: 3px;
      background: linear-gradient(to right, #C49A3C, #DDB96A);
      width: 0%;
      z-index: 100;
      transition: width 0.1s linear;
    }

    /* ══════════════════════════════
       DOCUMENT HEADER
    ══════════════════════════════ */
    .doc-header {
      background: #1C3A2A;
      border-bottom: 3px solid #C49A3C;
    }

    /* ══════════════════════════════
       LAYOUT — STICKY TOC + CONTENT
    ══════════════════════════════ */
    .doc-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
    }
    @media (min-width: 1024px) {
      .doc-layout {
        grid-template-columns: 260px 1fr;
        align-items: start;
      }
    }

    /* ══════════════════════════════
       STICKY TOC
    ══════════════════════════════ */
    .toc-wrap {
      position: sticky;
      top: 24px;
      max-height: calc(100vh - 48px);
      overflow-y: auto;
    }
    .toc-wrap::-webkit-scrollbar { width: 3px; }
    .toc-wrap::-webkit-scrollbar-track { background: transparent; }
    .toc-wrap::-webkit-scrollbar-thumb { background: rgba(196,154,60,0.3); border-radius: 2px; }

    .toc-link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 12px;
      border-radius: 8px;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.72rem;
      color: #7A7A6E;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
      border-left: 2px solid transparent;
      line-height: 1.3;
    }
    .toc-link:hover {
      background: rgba(28,58,42,0.05);
      color: #1C3A2A;
    }
    .toc-link.active {
      background: rgba(196,154,60,0.08);
      color: #1C3A2A;
      border-left-color: #C49A3C;
      font-weight: 500;
    }
    .toc-num {
      font-family: 'DM Mono', monospace;
      font-size: 0.6rem;
      color: rgba(196,154,60,0.5);
      flex-shrink: 0;
      width: 16px;
    }
    .toc-link.active .toc-num { color: #C49A3C; }

    /* ══════════════════════════════
       PLAIN LANGUAGE TOGGLE
    ══════════════════════════════ */
    .lang-toggle-wrap {
      background: rgba(28,58,42,0.06);
      border: 1px solid rgba(28,58,42,0.12);
      border-radius: 50px;
      padding: 4px;
      display: inline-flex;
      gap: 0;
    }
    .lang-btn {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.7rem;
      font-weight: 500;
      padding: 6px 14px;
      border-radius: 50px;
      cursor: pointer;
      transition: background 0.25s ease, color 0.25s ease;
      color: #7A7A6E;
      white-space: nowrap;
    }
    .lang-btn.active {
      background: #1C3A2A;
      color: #F7F3ED;
    }

    /* Plain / Legal text visibility */
    .text-plain  { display: block; }
    .text-legal  { display: none; }
    body.legal-mode .text-plain { display: none; }
    body.legal-mode .text-legal { display: block; }

    /* ══════════════════════════════
       LEGAL SECTIONS
    ══════════════════════════════ */
    .legal-section {
      padding: 48px 0;
      border-bottom: 1px solid rgba(28,58,42,0.08);
      scroll-margin-top: 24px;
    }
    .legal-section:last-child { border-bottom: none; }

    .section-num {
      font-family: 'DM Mono', monospace;
      font-size: 0.65rem;
      color: #C49A3C;
      letter-spacing: 0.1em;
      display: block;
      margin-bottom: 6px;
    }

    .section-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.85rem;
      font-weight: 500;
      color: #1C3A2A;
      line-height: 1.15;
      margin-bottom: 20px;
    }

    /* Summary card */
    .summary-card {
      background: rgba(196,154,60,0.07);
      border-left: 3px solid #C49A3C;
      border-radius: 0 10px 10px 0;
      padding: 14px 18px;
      margin-bottom: 24px;
    }
    .summary-card p {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.8rem;
      color: #1C3A2A;
      line-height: 1.6;
      font-weight: 500;
    }
    .summary-card .label {
      font-family: 'DM Mono', monospace;
      font-size: 0.6rem;
      color: rgba(196,154,60,0.7);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      display: block;
      margin-bottom: 4px;
    }

    /* Body text */
    .legal-body p {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.875rem;
      color: #4A4A4A;
      line-height: 1.8;
      margin-bottom: 16px;
    }
    .legal-body p:last-child { margin-bottom: 0; }

    .legal-body.text-legal p {
      font-size: 0.82rem;
      line-height: 1.9;
      color: #5A5A5A;
    }

    /* Subsections */
    .sub-heading {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      color: #1C3A2A;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 24px;
      margin-bottom: 10px;
    }

    /* Legal list */
    .legal-list {
      list-style: none;
      padding: 0;
      margin: 0 0 16px 0;
      space-y: 8px;
    }
    .legal-list li {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.875rem;
      color: #4A4A4A;
      line-height: 1.7;
      padding: 8px 0 8px 20px;
      position: relative;
      border-bottom: 1px solid rgba(28,58,42,0.05);
    }
    .legal-list li:last-child { border-bottom: none; }
    .legal-list li::before {
      content: '·';
      position: absolute;
      left: 6px;
      color: #C49A3C;
      font-weight: 700;
    }

    /* ══════════════════════════════
       REGISTRATION BLOCK
    ══════════════════════════════ */
    .reg-block {
      background: #1C3A2A;
      border-radius: 16px;
      padding: 28px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    @media (min-width: 640px) {
      .reg-block { grid-template-columns: 1fr 1fr; }
    }
    .reg-field label {
      font-family: 'DM Mono', monospace;
      font-size: 0.6rem;
      color: rgba(196,154,60,0.6);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      display: block;
      margin-bottom: 4px;
    }
    .reg-field p {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.8rem;
      color: rgba(247,243,237,0.85);
      line-height: 1.5;
    }

    /* ══════════════════════════════
       GDPR BADGE
    ══════════════════════════════ */
    .gdpr-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(28,58,42,0.07);
      border: 1px solid rgba(28,58,42,0.15);
      border-radius: 50px;
      padding: 6px 14px;
    }

    /* ══════════════════════════════
       PRINT / DOWNLOAD
    ══════════════════════════════ */
    @media print {
      #reading-progress,
      .toc-wrap,
      .lang-toggle-wrap,
      .no-print { display: none !important; }
      .doc-layout { grid-template-columns: 1fr !important; }
      .legal-section { page-break-inside: avoid; }
      body { background: white; }
    }

    /* ══════════════════════════════
       CONTACT INLINE BLOCK
    ══════════════════════════════ */
    .contact-inline {
      background: rgba(28,58,42,0.05);
      border: 1px solid rgba(28,58,42,0.1);
      border-radius: 12px;
      padding: 16px 20px;
      margin-top: 20px;
    }

    /* ══════════════════════════════
       VERSION BADGE
    ══════════════════════════════ */
    .version-chip {
      font-family: 'DM Mono', monospace;
      font-size: 0.6rem;
      background: rgba(196,154,60,0.15);
      color: #C49A3C;
      padding: 3px 10px;
      border-radius: 50px;
      border: 1px solid rgba(196,154,60,0.25);
    }

    /* HR variants */
    .hr-light { border: none; height: 1px; background: rgba(28,58,42,0.08); }
    .hr-gold  { border: none; height: 1px; background: linear-gradient(to right, #C49A3C, transparent); }

    /* Reveal */
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }