:root {
    --navy: #0e2d4d;
    --navy-deep: #071c33;
    --navy-soft: #17456e;
    --orange: #ee9b2e;
    --orange-deep: #d97f18;
    --sky: #63b6c6;
    --cream: #f7f2e8;
    --sand: #efe6d4;
    --ink: #16212e;
    --muted: #5f6b78;
    --white: #ffffff;
    --shadow-sm: 0 6px 20px rgba(7, 28, 51, 0.08);
    --shadow: 0 24px 60px rgba(7, 28, 51, 0.16);
    --shadow-lg: 0 40px 90px rgba(7, 28, 51, 0.26);
    --radius: 20px;
    --maxw: 1200px;
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "Source Sans 3", "Helvetica Neue", system-ui, sans-serif;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
  body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.7;
    overflow-x: hidden;
  }
  h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.08; font-weight: 600; letter-spacing: -0.01em; }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  section { position: relative; }
  ::selection { background: var(--orange); color: #fff; }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

  /* ---------- SCROLL PROGRESS ---------- */
  #progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--orange), var(--sky));
    z-index: 200; transition: width .1s linear;
  }

  /* ---------- NAV ---------- */
  header.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 150;
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 36px;
    transition: background .4s ease, padding .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
  }
  header.nav.scrolled {
    background: rgba(9, 28, 51, 0.9);
    backdrop-filter: blur(14px) saturate(1.2);
    padding: 12px 36px;
    box-shadow: 0 10px 40px rgba(0,0,0,.22);
  }
  .brand { display: flex; align-items: center; gap: 13px; color: #fff; }
  .brand .logo-svg { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
  .brand .bt { line-height: 1.05; }
  .brand b { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: .2px; display: block; }
  .brand .sub { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; opacity: .78; font-family: var(--sans); }
  nav.links { display: flex; align-items: center; gap: 30px; }
  nav.links a { color: #eaf1f6; font-size: 14.5px; letter-spacing: .3px; opacity: .9; transition: opacity .2s, color .2s; position: relative; }
  nav.links a:not(.btn)::after {
    content: ""; position: absolute; left: 0; bottom: -5px; height: 2px; width: 0;
    background: var(--orange); transition: width .28s ease;
  }
  nav.links a:not(.btn):hover { opacity: 1; }
  nav.links a:not(.btn):hover::after { width: 100%; }
  .btn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none;
    background: linear-gradient(135deg, var(--orange), var(--orange-deep));
    color: #23160a !important; font-weight: 700; padding: 12px 24px;
    border-radius: 40px; font-size: 14.5px; letter-spacing: .2px; font-family: var(--sans);
    box-shadow: 0 10px 26px rgba(217,127,24,.42); transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  }
  .btn:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(217,127,24,.55); }
  .btn.ghost { background: transparent; color: #fff !important; border: 1.6px solid rgba(255,255,255,.55); box-shadow: none; }
  .btn.ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
  .btn.big { padding: 17px 40px; font-size: 16px; }
  .nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 27px; cursor: pointer; }

  /* ---------- HERO ---------- */
  #hero { min-height: 100vh; display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; }
  .hero-bg {
    position: absolute; inset: -8% 0 0 0; height: 116%;
    background: url("../assets/banner.jpg") center/cover no-repeat;
    will-change: transform; z-index: 0;
  }
  .hero-veil {
    position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(180deg, rgba(7,28,51,.55) 0%, rgba(7,28,51,.35) 40%, rgba(7,28,51,.82) 100%),
      radial-gradient(circle at 50% 40%, rgba(7,28,51,0) 30%, rgba(7,28,51,.4) 100%);
  }
  .hero-inner { position: relative; z-index: 3; max-width: 940px; padding: 130px 28px 90px; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); letter-spacing: 3px;
    text-transform: uppercase; font-size: 12px; color: #fff;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
    padding: 8px 18px; border-radius: 40px; margin-bottom: 30px; backdrop-filter: blur(6px);
  }
  .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); animation: pulse 2s infinite; }
  @keyframes pulse { 0%,100%{ transform: scale(1); opacity: 1;} 50%{ transform: scale(1.5); opacity: .6;} }
  #hero h1 { font-size: clamp(2.9rem, 7vw, 5.6rem); font-weight: 600; margin-bottom: 24px; text-shadow: 0 6px 40px rgba(0,0,0,.4); }
  #hero h1 .accent { font-style: italic; color: var(--orange); font-weight: 500; }
  #hero p.lead { font-size: clamp(1.1rem, 2vw, 1.4rem); max-width: 660px; margin: 0 auto 40px; opacity: .95; font-weight: 300; }
  .hero-cta { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
  .hero-stats {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3;
    display: flex; gap: 44px; color: #fff; font-family: var(--sans);
  }
  .hero-stats .hs { text-align: center; }
  .hero-stats .hs b { font-family: var(--serif); font-size: 1.7rem; color: var(--orange); display: block; line-height: 1; }
  .hero-stats .hs span { font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .82; }
  .scroll-cue { position: absolute; bottom: 118px; left: 50%; transform: translateX(-50%); z-index: 3; }
  .mouse { width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.6); border-radius: 16px; position: relative; }
  .mouse::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background: #fff; border-radius: 3px; animation: scroll 1.8s infinite; }
  @keyframes scroll { 0%{ opacity: 0; transform: translate(-50%,0);} 30%{opacity:1;} 60%{ opacity: 1; transform: translate(-50%,14px);} 100%{opacity:0;} }
  @media (max-width: 760px){ .hero-stats{ gap: 26px; } .hero-stats .hs b{ font-size: 1.3rem; } .scroll-cue{ display:none; } }

  /* ---------- SECTION PRIMITIVES ---------- */
  .section-pad { padding: 130px 0; }
  .section-head { max-width: 720px; margin: 0 auto 66px; text-align: center; }
  .section-head.left { margin-left: 0; text-align: left; }
  .kicker { font-family: var(--sans); letter-spacing: 3px; text-transform: uppercase; font-size: 12.5px; color: var(--orange-deep); font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
  .kicker::before { content: ""; width: 26px; height: 2px; background: var(--orange); display: inline-block; }
  .section-head h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin: 16px 0 18px; color: var(--navy); }
  .section-head p { color: var(--muted); font-size: 1.12rem; }

  /* reveal */
  .reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; } .reveal.d4 { transition-delay: .4s; }

  /* ---------- MISSION ---------- */
  #mission { background: var(--cream); overflow: hidden; }
  .mission-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; }
  .mission-copy h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); color: var(--navy); margin: 18px 0 22px; }
  .mission-copy p { color: var(--muted); margin-bottom: 20px; font-size: 1.08rem; }
  .mission-media { position: relative; }
  .mission-media .frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/5; }
  .mission-media .frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.2s ease; }
  .mission-media.in .frame img { transform: scale(1); }
  .mission-media .float-card {
    position: absolute; bottom: -26px; left: -26px; background: var(--white); border-radius: 16px;
    padding: 20px 24px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 15px; max-width: 260px;
  }
  .mission-media .float-card .ring { width: 52px; height: 52px; border-radius: 50%; flex: none; background: conic-gradient(var(--orange) 0 78%, #e7ddc9 78% 100%); display: grid; place-items: center; }
  .mission-media .float-card .ring i { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 14px; font-style: normal; }
  .mission-media .float-card .fc-t { font-size: 13px; color: var(--muted); font-family: var(--sans); line-height: 1.35; }
  .mission-media .float-card .fc-t b { color: var(--ink); display: block; font-size: 15px; }
  .badge-row { display: flex; gap: 26px; margin-top: 30px; flex-wrap: wrap; }
  .badge-row .b { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 14px; color: var(--navy); font-weight: 600; }
  .badge-row .b svg { width: 22px; height: 22px; color: var(--orange-deep); }

  /* ---------- IMPACT PARALLAX ---------- */
  #impact { color: #fff; text-align: center; overflow: hidden; }
  .impact-bg { position: absolute; inset: -10% 0; height: 120%; background: url("../assets/home-project.jpg") center/cover no-repeat; will-change: transform; z-index: 0; }
  .impact-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(9,28,51,.9), rgba(9,28,51,.82)); }
  .impact-inner { position: relative; z-index: 2; padding: 120px 28px; }
  .impact-inner .kicker { color: var(--orange); justify-content: center; }
  .impact-inner h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 16px auto 60px; max-width: 720px; }
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1000px; margin: 0 auto; }
  .stat { padding: 20px; position: relative; }
  .stat:not(:last-child)::after { content: ""; position: absolute; right: -15px; top: 20%; height: 60%; width: 1px; background: rgba(255,255,255,.16); }
  .stat .n { font-family: var(--serif); font-size: clamp(2.6rem, 5.5vw, 3.8rem); color: var(--orange); font-weight: 600; line-height: 1; }
  .stat .l { font-family: var(--sans); letter-spacing: 1.5px; text-transform: uppercase; font-size: 12.5px; opacity: .86; margin-top: 12px; }
  @media (max-width:820px){ .stats{ grid-template-columns: 1fr 1fr; gap: 40px 20px; } .stat::after{ display:none; } }

  /* ---------- TRANSFORMATION (before/after slider) ---------- */
  #transform { background: var(--white); overflow: hidden; }
  .ba-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; }
  .ba-copy h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--navy); margin: 18px 0 20px; }
  .ba-copy p { color: var(--muted); font-size: 1.08rem; margin-bottom: 22px; }
  .ba-copy .hint { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 700; color: var(--orange-deep); font-size: 14px; }
  .ba-copy .hint svg { width: 22px; height: 22px; animation: swipehint 1.8s ease-in-out infinite; }
  @keyframes swipehint { 0%,100%{ transform: translateX(-4px);} 50%{ transform: translateX(4px);} }
  .ba {
    position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg);
    aspect-ratio: 3/4; user-select: none; cursor: ew-resize; background: #ddd;
  }
  .ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
  .ba .after-img { z-index: 1; }
  .ba .before-wrap { position: absolute; inset: 0; z-index: 2; width: 50%; overflow: hidden; }
  .ba .before-wrap img { width: auto; height: 100%; max-width: none; }
  .ba .lbl { position: absolute; top: 18px; z-index: 4; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 14px; border-radius: 30px; color: #fff; backdrop-filter: blur(4px); }
  .ba .lbl.before { left: 18px; background: rgba(9,28,51,.72); }
  .ba .lbl.after { right: 18px; background: rgba(217,127,24,.85); }
  .ba .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; z-index: 3; transform: translateX(-50%); box-shadow: 0 0 20px rgba(0,0,0,.4); }
  .ba .knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 50%; background: #fff; z-index: 4; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.35); color: var(--navy); }
  .ba .knob svg { width: 26px; height: 26px; }

  /* ---------- SPONSOR MARQUEE ---------- */
  /* Deliberately compact — logos only, no copy/CTA, so it reads as a quiet
     credibility strip rather than competing with the homepage's real job.
     Keep this section short: it is the 2nd homepage block, not a gallery. */
  #sponsor-strip {
    background: var(--white);
    padding: 22px 0 26px;
    border-bottom: 1px solid rgba(14,45,77,.06);
    overflow: hidden;
    max-height: 160px; /* hard layout budget if assets misbehave */
  }
  .marquee-label { text-align: center; font-family: var(--sans); font-size: 11.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 14px; }
  .marquee-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee-track { display: flex; align-items: center; width: max-content; animation: marquee-scroll 22s linear infinite; }
  .marquee-track:hover { animation-play-state: paused; }
  .marquee-item { display: flex; align-items: center; justify-content: center; flex: none; height: 56px; padding: 0 28px; }
  .marquee-item .logo-card {
    display: flex; align-items: center; justify-content: center;
    height: 100%; max-height: 56px; padding: 6px 18px;
    background: var(--cream); border: 1px solid rgba(14,45,77,.07); border-radius: 12px;
  }
  .marquee-item img {
    display: block;
    height: 40px;
    max-height: 40px;
    max-width: 160px;
    width: auto;
    object-fit: contain;
  }
  @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; overflow-x: auto; } }

  /* ---------- STORIES GALLERY ---------- */
  #stories { background: var(--cream); overflow: hidden; }
  .story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .story {
    position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
    aspect-ratio: 3/4; cursor: pointer; transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s;
  }
  .story:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
  .story img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }
  .story:hover img { transform: scale(1.08); }
  .story .ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,28,51,0) 35%, rgba(7,28,51,.9) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; color: #fff; }
  .story .tag { font-family: var(--sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-bottom: 8px; }
  .story h3 { font-size: 1.5rem; margin-bottom: 6px; }
  .story p { font-size: .94rem; opacity: .9; font-family: var(--sans); transform: translateY(8px); opacity: 0; transition: opacity .4s, transform .4s; }
  .story:hover p { opacity: .92; transform: none; }
  .story.tall { grid-row: span 2; aspect-ratio: auto; }
  @media (max-width: 860px){ .story-grid{ grid-template-columns: 1fr 1fr; } .story.tall{ grid-row: auto; aspect-ratio: 3/4; } }

  /* ---------- PROGRAMS ---------- */
  #programs { background: var(--white); }
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .card {
    background: var(--cream); border-radius: var(--radius); padding: 42px 34px; position: relative; overflow: hidden;
    transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, background .4s; border: 1px solid rgba(14,45,77,.06);
  }
  .card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--orange), var(--sky)); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; }
  .card:hover { transform: translateY(-10px); box-shadow: var(--shadow); background: #fff; }
  .card:hover::before { transform: scaleX(1); }
  .card .ico { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 24px; background: linear-gradient(135deg, var(--navy), var(--navy-soft)); color: var(--orange); box-shadow: var(--shadow-sm); transition: transform .4s; }
  .card:hover .ico { transform: rotate(-6deg) scale(1.06); }
  .card .ico svg { width: 30px; height: 30px; }
  .card h3 { font-size: 1.45rem; color: var(--navy); margin-bottom: 12px; }
  .card p { color: var(--muted); font-size: 1rem; }

  /* ---------- QUOTE PARALLAX ---------- */
  #quote { color: #fff; text-align: center; overflow: hidden; }
  .quote-bg { position: absolute; inset: -12% 0; height: 124%; background: url("../assets/gala-home-before.jpg") center/cover no-repeat; will-change: transform; z-index: 0; }
  .quote-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(9,28,51,.86), rgba(14,45,77,.9)); }
  .quote-inner { position: relative; z-index: 2; padding: 130px 28px; max-width: 900px; margin: 0 auto; }
  .quote-inner .qm { font-family: var(--serif); font-size: 5rem; color: var(--orange); line-height: .5; opacity: .5; }
  .quote-inner blockquote { font-family: var(--serif); font-weight: 500; font-style: italic; font-size: clamp(1.6rem, 3.4vw, 2.6rem); margin: 24px 0 30px; line-height: 1.3; }
  .quote-inner cite { font-family: var(--sans); font-style: normal; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; opacity: .82; }
  .quote-inner cite b { color: var(--orange); }

  /* ---------- GET INVOLVED ---------- */
  #involved { background: var(--cream); }
  .involve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .involve { border-radius: var(--radius); padding: 44px 34px; color: #fff; position: relative; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .4s cubic-bezier(.16,1,.3,1); }
  .involve:hover { transform: translateY(-8px); }
  .involve::after { content: ""; position: absolute; inset: 0; opacity: .16; background-size: cover; background-position: center; z-index: 0; transition: transform .8s ease; }
  .involve:hover::after { transform: scale(1.1); }
  .involve > * { position: relative; z-index: 1; }
  .involve.v1 { background: linear-gradient(160deg, var(--navy-soft), var(--navy-deep)); }
  .involve.v2 { background: linear-gradient(160deg, var(--orange), var(--orange-deep)); color: #23160a; }
  .involve.v3 { background: linear-gradient(160deg, #2f7d8c, #14454f); }
  .involve .n { font-family: var(--serif); font-size: 2.4rem; opacity: .3; margin-bottom: 10px; }
  .involve h3 { font-size: 1.6rem; margin-bottom: 12px; }
  .involve p { font-size: 1rem; opacity: .92; margin-bottom: 20px; font-family: var(--sans); }
  .involve .lnk { font-family: var(--sans); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; transition: gap .25s; }
  .involve .lnk:hover { gap: 14px; }

  /* ---------- DONATE ---------- */
  #donate { color: #fff; text-align: center; overflow: hidden; background: var(--navy-deep); }
  .donate-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 20% 20%, rgba(238,155,46,.22), transparent 40%), radial-gradient(circle at 80% 80%, rgba(99,182,198,.18), transparent 45%); }
  .donate-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; padding: 130px 28px; }
  .donate-inner .kicker { color: var(--orange); justify-content: center; }
  #donate h2 { font-size: clamp(2.2rem, 4.6vw, 3.3rem); margin: 16px 0 18px; }
  #donate p.d-lead { font-size: 1.16rem; opacity: .92; margin-bottom: 40px; font-weight: 300; }
  .tiers { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
  .tier { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 22px 26px; min-width: 150px; cursor: pointer; transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .3s, border-color .3s; }
  .tier:hover, .tier.sel { transform: translateY(-6px); background: rgba(238,155,46,.16); border-color: var(--orange); }
  .tier .amt { font-family: var(--serif); font-size: 1.9rem; color: var(--orange); font-weight: 600; }
  .tier .desc { font-size: 13px; opacity: .84; font-family: var(--sans); margin-top: 4px; }
  #donate .fine { font-size: 13px; opacity: .66; margin-top: 24px; }

  /* ---------- CONTACT ---------- */
  #contact { background: var(--white); }
  .contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: start; }
  .contact-info h2 { color: var(--navy); font-size: clamp(2rem, 4vw, 2.9rem); margin: 16px 0 18px; }
  .contact-info p { color: var(--muted); margin-bottom: 30px; font-size: 1.08rem; }
  .contact-line { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
  .contact-line .ci { width: 50px; height: 50px; border-radius: 14px; background: var(--cream); display: grid; place-items: center; color: var(--orange-deep); flex: none; }
  .contact-line .ci svg { width: 22px; height: 22px; }
  .contact-line b { display: block; color: var(--ink); font-family: var(--sans); font-size: 15px; }
  .contact-line span { color: var(--muted); font-size: .95rem; font-family: var(--sans); }
  form { background: var(--cream); border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow-sm); }
  form h3 { color: var(--navy); font-size: 1.5rem; margin-bottom: 6px; }
  form .fs { color: var(--muted); font-size: .95rem; margin-bottom: 24px; font-family: var(--sans); }
  form label { display: block; font-size: 13px; font-family: var(--sans); font-weight: 600; color: var(--navy); margin: 0 0 7px; }
  form input, form textarea { width: 100%; padding: 13px 16px; border: 1.5px solid #e3dccb; border-radius: 12px; font-family: inherit; font-size: 15px; margin-bottom: 18px; background: #fff; transition: border .2s, box-shadow .2s; }
  form input:focus, form textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(238,155,46,.14); }
  form textarea { min-height: 130px; resize: vertical; }
  form button { width: 100%; justify-content: center; }

  /* ---------- FOOTER ---------- */
  footer.site { background: var(--navy-deep); color: #b9c7d4; padding: 70px 0 32px; font-family: var(--sans); font-size: 14.5px; }
  .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 44px; margin-bottom: 48px; }
  footer.site .brand { margin-bottom: 18px; }
  footer.site .brand b { color: #fff; }
  footer.site .fdesc { max-width: 300px; opacity: .8; line-height: 1.7; }
  footer.site h4 { color: #fff; font-family: var(--serif); margin-bottom: 18px; font-size: 17px; font-weight: 600; }
  footer.site a.fl { color: #b9c7d4; display: block; margin-bottom: 11px; opacity: .82; transition: color .2s, padding .2s; }
  footer.site a.fl:hover { color: var(--orange); padding-left: 4px; opacity: 1; }
  .foot-news input { width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; font-family: var(--sans); margin-bottom: 12px; }
  .foot-news input::placeholder { color: rgba(255,255,255,.5); }
  .foot-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; opacity: .66; font-size: 13.5px; }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 960px) {
    .mission-grid, .ba-grid, .contact-grid { grid-template-columns: 1fr; gap: 44px; }
    .ba-grid { direction: ltr; }
    .cards, .involve-grid, .story-grid { grid-template-columns: 1fr; }
    .story-grid { grid-template-columns: 1fr 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    nav.links { display: none; }
    nav.links.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: rgba(9,28,51,.98); padding: 22px 36px 28px; gap: 20px; align-items: flex-start; }
    .nav-toggle { display: block; }
    .section-pad { padding: 90px 0; }
  }
  @media (max-width: 560px){ .story-grid{ grid-template-columns: 1fr; } .mission-media .float-card{ left: 0; } }

  /* ---------- INNER PAGES ---------- */
  .page-hero {
    position: relative; color: #fff; text-align: center; overflow: hidden;
    background: var(--navy-deep); padding: 160px 28px 90px;
  }
  .page-hero .ph-bg {
    position: absolute; inset: 0; background: url("../assets/banner.jpg") center/cover no-repeat;
    opacity: .35; z-index: 0;
  }
  .page-hero .ph-veil {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(9,28,51,.55), rgba(9,28,51,.88));
  }
  .page-hero .ph-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
  .page-hero .eyebrow { justify-content: center; display: inline-flex; }
  .page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 18px 0 16px; }
  .page-hero h1 .accent { color: var(--orange); }
  .page-hero .lead { font-size: 1.15rem; opacity: .92; font-weight: 300; max-width: 560px; margin: 0 auto; }

  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
  form { position: relative; }
  form select {
    width: 100%; padding: 13px 16px; border: 1.5px solid #e3dccb; border-radius: 12px;
    font-family: inherit; font-size: 15px; margin-bottom: 18px; background: #fff;
    transition: border .2s, box-shadow .2s; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230e2d4d' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
  }
  form select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(238,155,46,.14); }
  form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  form .check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 18px; }
  form .check-item {
    display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 14.5px;
    color: var(--ink); font-weight: 500; margin: 0;
  }
  form .check-item input[type="checkbox"],
  form .check-item input[type="radio"] {
    width: auto; margin: 0; accent-color: var(--orange-deep);
  }
  form .radio-row { display: flex; flex-wrap: wrap; gap: 16px 22px; margin-bottom: 18px; }
  form .form-note { font-size: 13px; color: var(--muted); font-family: var(--sans); margin: -8px 0 18px; }
  form .err-banner, .form-error {
    background: #fde8e8; color: #8a1f1f; border: 1px solid #f5c2c2; border-radius: 12px;
    padding: 12px 16px; margin-bottom: 18px; font-family: var(--sans); font-size: 14.5px;
  }
  .success-box {
    background: var(--cream); border-radius: var(--radius); padding: 48px 40px; text-align: center;
    box-shadow: var(--shadow-sm); border: 1px solid rgba(14,45,77,.06);
  }
  .success-box h3 { color: var(--navy); font-size: 1.7rem; margin-bottom: 12px; }
  .success-box p { color: var(--muted); font-family: var(--sans); font-size: 1.05rem; margin-bottom: 24px; }
  .success-box .ico-ok {
    width: 64px; height: 64px; border-radius: 50%; background: rgba(238,155,46,.16); color: var(--orange-deep);
    display: grid; place-items: center; margin: 0 auto 20px; font-size: 1.6rem;
  }

  .split-2 { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
  .info-panel h2 { color: var(--navy); font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin: 14px 0 16px; }
  .info-panel p { color: var(--muted); margin-bottom: 16px; font-size: 1.05rem; }
  .info-panel ul { list-style: none; padding: 0; margin: 0 0 24px; }
  .info-panel li {
    position: relative; padding: 10px 0 10px 32px; color: var(--ink); font-family: var(--sans);
    border-bottom: 1px solid rgba(14,45,77,.06);
  }
  .info-panel li::before {
    content: ""; position: absolute; left: 0; top: 16px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--orange); box-shadow: inset 0 0 0 4px rgba(238,155,46,.25);
  }

  .steps-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 40px; }
  .step-card {
    background: #fff; border-radius: var(--radius); padding: 28px 22px; border: 1px solid rgba(14,45,77,.06);
    box-shadow: var(--shadow-sm);
  }
  .step-card .sn {
    font-family: var(--serif); font-size: 2rem; color: var(--orange); font-weight: 700; margin-bottom: 10px;
  }
  .step-card h3 { color: var(--navy); font-size: 1.15rem; margin-bottom: 8px; }
  .step-card p { color: var(--muted); font-size: .95rem; font-family: var(--sans); margin: 0; }

  .serve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .filter-bar {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px;
  }
  .filter-btn {
    font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: .4px;
    padding: 10px 18px; border-radius: 40px; border: 1.5px solid rgba(14,45,77,.12);
    background: #fff; color: var(--navy); cursor: pointer; transition: .2s;
  }
  .filter-btn:hover, .filter-btn.active {
    background: var(--navy); color: #fff; border-color: var(--navy);
  }
  .story-grid .story[hidden] { display: none; }

  .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .news-card {
    background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
    border: 1px solid rgba(14,45,77,.06); transition: transform .4s, box-shadow .4s; display: flex; flex-direction: column;
  }
  .news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
  .news-card .thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--cream); }
  .news-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
  .news-card:hover .thumb img { transform: scale(1.06); }
  .news-card .body { padding: 24px 22px 28px; flex: 1; display: flex; flex-direction: column; }
  .news-card .meta { font-family: var(--sans); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange-deep); font-weight: 700; margin-bottom: 10px; }
  .news-card h3 { color: var(--navy); font-size: 1.25rem; margin-bottom: 10px; }
  .news-card p { color: var(--muted); font-family: var(--sans); font-size: .96rem; flex: 1; margin-bottom: 16px; }
  .news-card .lnk { font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--navy); }

  .logo-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 36px 0 10px;
  }
  .logo-slot {
    background: #fff; border: 1px dashed rgba(14,45,77,.16); border-radius: 16px; min-height: 100px;
    display: grid; place-items: center; color: var(--muted); font-family: var(--sans); font-size: 13px;
    letter-spacing: 1px; text-transform: uppercase;
  }
  .logo-slot.filled { border-style: solid; border-color: rgba(14,45,77,.08); padding: 14px; }
  .logo-slot.filled img { max-height: 64px; max-width: 100%; width: auto; object-fit: contain; }
  .tier-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
  .tier-card {
    background: #fff; border-radius: var(--radius); padding: 32px 26px; border: 1px solid rgba(14,45,77,.06);
    box-shadow: var(--shadow-sm); text-align: center;
  }
  .tier-card.featured { border-color: var(--orange); box-shadow: 0 16px 40px rgba(238,155,46,.18); }
  .tier-card h3 { color: var(--navy); margin-bottom: 8px; }
  .tier-card .price { font-family: var(--serif); font-size: 2rem; color: var(--orange); font-weight: 700; margin-bottom: 12px; }
  .tier-card p { color: var(--muted); font-family: var(--sans); font-size: .95rem; margin: 0; }

  .cta-band {
    background: var(--navy); color: #fff; text-align: center; padding: 80px 28px;
  }
  .cta-band h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 14px; }
  .cta-band p { opacity: .9; margin-bottom: 28px; max-width: 520px; margin-left: auto; margin-right: auto; }
  .cta-band .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

  @media (max-width: 960px) {
    .split-2, .steps-4, .serve-grid, .news-grid, .tier-cards, .logo-grid { grid-template-columns: 1fr 1fr; }
    .steps-4 { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .split-2, .steps-4, .serve-grid, .news-grid, .tier-cards, .logo-grid, form .row-2, form .check-grid { grid-template-columns: 1fr; }
  }

  /* ---------- INTERACTIVE FORMS WIZARD ---------- */
  /* Baseline for §2 of the forms plan: large type, 44px+ tap targets, visible
     focus rings, real fieldset/legend — this audience skews elderly, low-tech,
     and on small screens, so these are floors, not defaults to shrink later. */
  .wizard-progress { margin-bottom: 34px; }
  .wp-track { height: 8px; border-radius: 20px; background: rgba(14,45,77,.08); overflow: hidden; }
  .wp-fill { height: 100%; background: linear-gradient(90deg, var(--orange), var(--sky)); border-radius: 20px; transition: width .3s ease; }
  .wp-label { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--navy); margin-top: 10px; }

  .field { margin-bottom: 26px; }
  /* Direct-child combinator + :not(.consent-check) is load-bearing, not style
     preference: .field-group (the radio_cards/checkbox_cards fieldset) also
     carries the .field class, so a bare ".field label" selector would match
     — and, on specificity alone, override — every .radio-card label nested
     two levels down inside it (and the .consent-check label, which IS a
     direct child). That's what broke the checkbox layout in the screenshot:
     the option labels were silently forced to display:block with bold navy
     text instead of the flex row .radio-card/.consent-check actually define. */
  .field > label:not(.consent-check), .field > legend { display: block; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 8px; padding: 0; }
  .field .req { color: var(--orange-deep); }
  .field-help { font-family: var(--sans); font-size: 13.5px; color: var(--muted); margin: -2px 0 8px; }
  .field-error { font-family: var(--sans); font-size: 13.5px; color: #8a1f1f; background: #fde8e8; border: 1px solid #f5c2c2; border-radius: 10px; padding: 8px 12px; margin: 4px 0 8px; }
  .field input[type="text"], .field input[type="email"], .field input[type="tel"],
  .field input[type="number"], .field input[type="date"], .field textarea, .field select {
    width: 100%; font-size: 17px; padding: 15px 16px; border: 1.5px solid #e3dccb; border-radius: 12px;
    font-family: inherit; background: #fff; min-height: 52px;
  }
  .field textarea { min-height: 130px; }
  .field input:focus, .field textarea:focus, .field select:focus {
    outline: 3px solid rgba(238,155,46,.5); outline-offset: 1px; border-color: var(--orange);
  }

  .field-group { border: none; margin: 0 0 26px; padding: 0; }
  .field-group legend { width: 100%; }

  /* iOS-style selection controls: native input stays in the DOM (real
     checkbox/radio semantics, works with zero JS, screen-reader accurate)
     but is drawn as a custom filled circle + checkmark via ::after rather
     than the browser's plain native control — the "iOS Settings row" look. */
  .radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .radio-card {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 58px; padding: 15px 18px;
    border: 1.5px solid #e9e2d0; border-radius: 16px; background: #fff; cursor: pointer;
    font-family: var(--sans); font-size: 15.5px; color: var(--ink); font-weight: 500;
    box-shadow: 0 1px 2px rgba(14,45,77,.04);
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .1s ease;
  }
  .radio-card:hover { border-color: #d8cdb0; }
  .radio-card:active { transform: scale(0.985); }
  .radio-card:has(input:checked) {
    border-color: var(--orange); background: rgba(238,155,46,.08);
    box-shadow: 0 1px 2px rgba(14,45,77,.04), 0 0 0 1px var(--orange) inset;
  }
  .radio-card:has(input:focus-visible) { outline: 3px solid rgba(238,155,46,.45); outline-offset: 2px; }
  .radio-card span { flex: 1; }

  .radio-card input,
  .consent-check input {
    appearance: none; -webkit-appearance: none; flex: none; margin: 0; cursor: pointer;
    width: 25px; height: 25px; border: 2px solid #d3c9b3; background: #fff;
    position: relative; transition: border-color .16s ease, background-color .16s ease;
  }
  .radio-card input[type="radio"] { border-radius: 50%; }
  .radio-card input[type="checkbox"] { border-radius: 8px; }
  .radio-card input:checked, .consent-check input:checked {
    border-color: var(--orange); background: var(--orange);
  }
  .radio-card input:checked::after, .consent-check input:checked::after {
    content: ""; position: absolute; left: 50%; top: 46%;
    width: 6px; height: 11px; margin: -7px 0 0 -3.5px;
    border: solid #fff; border-width: 0 2.5px 2.5px 0;
    transform: rotate(40deg);
  }
  @media (max-width: 560px) { .radio-cards { grid-template-columns: 1fr; } }

  .consent-check {
    display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1.5px solid #e9e2d0;
    border-radius: 16px; background: #fff; cursor: pointer; font-family: var(--sans); font-size: 15px;
    color: var(--ink); line-height: 1.5; box-shadow: 0 1px 2px rgba(14,45,77,.04);
    transition: border-color .16s ease, background-color .16s ease;
  }
  .consent-check:has(input:checked) { border-color: var(--orange); background: rgba(238,155,46,.06); }
  .consent-check input { margin-top: 1px; }
  .consent-check input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--orange-deep); }

  .wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 34px; gap: 16px; }
  .wizard-nav .btn { min-height: 52px; }

  /* ---------- REVIEW SCREEN ---------- */
  .review-group { background: var(--cream); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 18px; border: 1px solid rgba(14,45,77,.06); }
  .review-group-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
  .review-group-head h3 { color: var(--navy); font-size: 1.05rem; margin: 0; }
  .review-group-head a { font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--orange-deep); }
  .review-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px 16px; padding: 10px 0; border-top: 1px solid rgba(14,45,77,.06); font-family: var(--sans); }
  .review-row:first-of-type { border-top: none; }
  .review-label { color: var(--muted); font-size: 13.5px; }
  .review-value { color: var(--ink); font-size: 14.5px; }
  @media (max-width: 560px) { .review-row { grid-template-columns: 1fr; } }

  /* ---------- NEXT-STEPS CHECKLIST ---------- */
  .checklist { list-style: none; margin: 0; padding: 0; }
  .checklist li {
    display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(14,45,77,.08);
    font-family: var(--sans); font-size: 15px; color: var(--ink);
  }
  .checklist li:first-child { border-top: none; }
  .checklist li span:nth-child(2) { flex: 1; }
  .checklist .check-ico {
    width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
    border: 1.5px solid rgba(14,45,77,.2); font-size: 13px; color: var(--white);
  }
  .checklist li.done .check-ico { background: var(--orange); border-color: var(--orange); }
  .checklist li.done span:nth-child(2) { color: var(--muted); text-decoration: line-through; }