:root{
      /* Polar Pop palette */
      --polar-deep:#065758;   /* deep teal */
      --polar-ice:#E2F0EF;    /* ice white */
      --polar-mist:#A9D4D6;   /* light teal */
      --polar-sea:#82C3C5;    /* mid teal */
      --polar-coral:#C46960;  /* coral */

      /* Theme */
      --bg:#065758;           /* page bg */
      --bg-elev:#0c4a4c;      /* elevated surfaces */
      --text:#E2F0EF;         /* primary text */
      --muted:#A9D4D6;        /* secondary text */
      --card:#082f30;         /* card surface */
      --accent:#C46960;       /* primary accent (coral) */
      --accent-2:#82C3C5;     /* secondary accent (teal) */
      --ring: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent);
      --radius: 18px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --container: 1200px;

      /* Sparkles */
      --sparkle:#fff;
    }

    html{scroll-behavior:smooth}
    *{box-sizing:border-box}
    body{ margin:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif }
    a{ color:var(--accent); text-decoration:none }
    a:hover{ filter:brightness(1.1) saturate(1.05) }

    /* Header */
    header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background: color-mix(in oklab, var(--bg) 90%, transparent); border-bottom:1px solid color-mix(in oklab, var(--accent) 40%, transparent) }
    .nav{ max-width:var(--container); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px }
    .brand{ display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.5px }
    .brand .logo-img{ width:36px; height:36px; border-radius:10px; box-shadow:var(--shadow); background:var(--bg-elev); object-fit:contain; padding:2px }
    .brand span{ color: var(--accent) }
    .nav a{ color:var(--text); opacity:.95 }
    .btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; border:1px solid color-mix(in oklab, var(--text) 10%, transparent); background:var(--bg-elev); color:var(--text); box-shadow:var(--shadow); transition: transform .12s ease }
    .btn:hover{ transform:translateY(-2px) }
    .btn.primary{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border:0 }
    .nav a.top-btn{ background: var(--accent); color:#fff; border:1px solid color-mix(in oklab, var(--accent) 60%, transparent) }

    /* Hero */
    .hero-wrap{ background: radial-gradient(900px 600px at 12% -10%, color-mix(in oklab, var(--polar-coral) 22%, transparent), transparent 70%), radial-gradient(900px 600px at 100% 0%, color-mix(in oklab, var(--polar-sea) 22%, transparent), transparent 70%), color-mix(in oklab, var(--polar-ice) 14%, var(--bg)) }
    .hero{ max-width:var(--container); margin:auto; padding:56px 20px 28px; display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center }
    .hero h1{ font-size:clamp(32px,4.2vw,54px); line-height:1.05; margin:0 0 10px }
    .hero p{ color:var(--muted); margin:0 0 18px }
    .illustration{ width:100%; border-radius: var(--radius); box-shadow: var(--shadow); border:1px solid color-mix(in oklab, var(--text) 10%, transparent) }
    .cta{ display:flex; gap:12px; flex-wrap:wrap }
    .cta.cta-stack{ flex-direction:column; align-items:flex-start }
    .cta-row{ display:flex; gap:12px; flex-wrap:wrap }

    /* Sections */
    section{ padding: 42px 0 }
    section .wrap{ max-width:var(--container); margin:auto; padding:0 20px }

    /* Alternating backgrounds */
    section.alt-a{ background: radial-gradient(circle at top left, color-mix(in oklab, var(--polar-coral) 20%, transparent), transparent 70%), color-mix(in oklab, var(--polar-ice) 20%, var(--bg)) }
    section.alt-b{ background: radial-gradient(circle at bottom right, color-mix(in oklab, var(--polar-sea) 25%, transparent), transparent 70%), color-mix(in oklab, var(--polar-mist) 20%, var(--bg)) }

    /* Cards & grid */
    .grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px }
    .grid.grid-2{ grid-template-columns: 1fr 1fr }
    @media (max-width:1000px){ .hero{ grid-template-columns:1fr } .grid{ grid-template-columns:1fr 1fr } }
    @media (max-width:1000px){ .grid.grid-2{ grid-template-columns:1fr } }
    @media (max-width:640px){ .grid{ grid-template-columns:1fr } }
    .card{ background:linear-gradient(180deg, color-mix(in oklab, var(--card) 86%, transparent), color-mix(in oklab, var(--bg) 40%, transparent)); border:1px solid color-mix(in oklab, var(--text) 8%, transparent); border-radius: var(--radius); padding:16px; position:relative; overflow:hidden }
    .card:hover{ box-shadow:var(--shadow) }
    .card .top{ display:flex; align-items:center; gap:12px; margin-bottom:8px }
    .badge{ font-size:12px; background:var(--accent-2); color:#fff; padding:4px 8px; border-radius:999px; border:none }
    .card p{ color:var(--muted); margin:8px 0 12px }
    .thumb.tall{ height:260px; object-fit:cover }

    /* Carousel (Story) */
    .story-carousel{ margin-top:14px }
    .carousel{ position:relative; border:1px solid color-mix(in oklab, var(--text) 10%, transparent); border-radius:12px; overflow:hidden; background:var(--bg-elev); height:360px }
    .carousel-track{ display:flex; will-change:transform; transition:transform .45s ease; height:100% }
    .carousel figure{ min-width:100%; margin:0; height:100%; display:flex; align-items:center; justify-content:center; background:var(--bg-elev) }
    .carousel img{ height:100%; width:auto; max-width:100%; object-fit:contain; display:block }
    @media (max-width:640px){ .carousel{ height:240px } .carousel .nav{ position:absolute; top:50%; transform:translateY(-50%); background: var(--bg-elev); color:#fff; border:1px solid color-mix(in oklab, var(--text) 20%, transparent); border-radius:12px; padding:10px 14px; display:inline-flex; align-items:center; gap:8px; box-shadow:var(--shadow); z-index:3; font-size:16px; line-height:1; cursor:pointer } }
    .carousel .nav{ position:absolute; top:50%; transform:translateY(-50%); background: var(--bg-elev); color:#fff; border:1px solid color-mix(in oklab, var(--text) 20%, transparent); border-radius:12px; padding:10px 14px; display:inline-flex; align-items:center; gap:8px; box-shadow:var(--shadow); z-index:3; font-size:16px; line-height:1; cursor:pointer }
    .carousel .nav .chev{ font-size:20px; line-height:1 }
    .carousel .nav:hover{ filter:brightness(1.05) saturate(1.05) }
    .carousel .prev{ left:12px }
    .carousel .next{ right:12px }
    .carousel .dots{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:6px }
    .carousel .dot{ width:8px; height:8px; border-radius:50%; background: color-mix(in oklab, var(--text) 30%, transparent); border:1px solid color-mix(in oklab, var(--text) 35%, transparent); opacity:.9 }
    .carousel .dot.active{ background: var(--accent); border-color: transparent; opacity:1 }

    /* Collapsible */
    .card.collapsible{margin-top:18px}
    .collapsible summary{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-weight:700;font-size:1.17em;color:var(--text);padding:4px 0 6px;text-align:center}
    .collapsible .content{padding-top:8px}
    .collapsible summary::-webkit-details-marker{display:none}
    .collapsible summary::after{content:'▸'; font-size:14px; line-height:1; margin-left:8px; transform:rotate(0deg); transition:transform .2s ease}
    .collapsible[open] summary::after{transform:rotate(90deg)}
    .narrow{ max-width:820px; margin:0 auto }

    /* Special Thanks feature cards */
    .feature-stack{ display:flex; flex-direction:column; gap:18px }
    .feature-card{ position:relative; height: clamp(260px, 45vw, 480px); border-radius: var(--radius); overflow:hidden; border:1px solid color-mix(in oklab, var(--text) 10%, transparent); box-shadow: var(--shadow); background: var(--bg-elev) center/cover no-repeat; background-image: var(--bg-img) }
    .feature-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 36%, transparent), color-mix(in oklab, var(--bg) 48%, transparent)); pointer-events:none }
    .feature-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding: 20px; z-index:1 }
    .feature-logo{ height:64px; width:auto; object-fit:contain; display:block; filter:none }
    .feature-text{ max-width: 900px; margin:0 auto; color:#fff; font-weight:700 }
    .feature-text .sub{ font-weight:700; margin-top:6px }

    /* Volunteer & Charity cards */
    .vol-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px }
    @media (max-width:900px){ .vol-grid{ grid-template-columns:1fr } }
    .vol-card{ display:flex; flex-direction:column; align-items:center; text-align:center }
    .vol-card .vol-logo{ height:90px; width:auto; object-fit:contain; margin:2px auto 10px; max-width:92% }
    .vol-card p{ margin-top:4px }

    /* Footer */
    footer{ border-top:1px solid color-mix(in oklab, var(--accent) 40%, transparent); background: radial-gradient(circle at 50% -30%, color-mix(in oklab, var(--polar-ice) 15%, transparent), transparent 80%), color-mix(in oklab, var(--polar-ice) 10%, var(--bg)) }
    .foot{ max-width:var(--container); margin:auto; padding:28px 20px; color:var(--muted); display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between }

    /* Utilities */
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
    .icon{ width:22px; height:22px; display:inline-block }
    .btn .icon-img{ height:22px; width:auto; display:inline-block; object-fit:contain; vertical-align:middle }
    #toTop{ position:fixed; right:18px; bottom:18px; opacity:0; transform:translateY(10px); transition: all .15s ease; background: var(--accent); color:#fff }
    #toTop.show{ opacity:1; transform:none }
    h4{ margin:10px 0 6px; font-size:15px; color:var(--text) }

    /* Education two-column card */
    .edu-two{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start }
    @media (max-width:800px){ .edu-two{ grid-template-columns:1fr } }
    .edu-two h3:first-child{ margin-top:0 }

    /* Sparkle host for plain anchors/buttons */
    .sparkle-host{ position:relative }

    /* --- Sparkles (white) --- */
    .sparkle{
      position:absolute; left:0; top:0;
      width:6px; height:6px; pointer-events:none; border-radius:50%;
      background:
        radial-gradient(circle,
          #fff 0 28%,
          color-mix(in oklab, var(--sparkle) 92%, #fff) 29% 60%,
          transparent 61%);
      filter: drop-shadow(0 0 6px color-mix(in oklab, var(--sparkle) 85%, transparent));
      transform: translate(-50%, -50%) scale(.9) rotate(0deg);
      opacity:.95;
      animation: tt-sparkle .8s ease-out forwards;
    }
    @keyframes tt-sparkle{
      to{
        transform:
          translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
          scale(.1)
          rotate(90deg);
        opacity:0;
      }
    }
    @media (prefers-reduced-motion: reduce){
      .sparkle{ animation:none; opacity:0 }
      .btn:hover{ box-shadow: 0 0 0 3px color-mix(in oklab, var(--sparkle) 25%, transparent) inset; }
    }