
  <style>
    *{box-sizing:border-box;margin:0;padding:0}
    img{max-width:100%;display:block}
    a{text-decoration:none;color:inherit}
    button,input{font:inherit}
    html{scroll-behavior:smooth}

    :root{
      --bg:#0c0c0c;
      --black:#000;
      --panel:#101010;
      --card:#151515;
      --text:#fff;
      --muted:rgba(255,255,255,.75);
      --stroke:rgba(255,255,255,.10);
      --accent:#e63946;
      --accent2:#ff4d57;
      --container:1200px;
      --shadow:0 25px 70px rgba(0,0,0,.55);
      --space-2:14px;
      --space-3:18px;
      --space-4:24px;
      --space-5:32px;
      --space-6:44px;
      --space-8:90px;
    }

    body{
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background:
        radial-gradient(900px 500px at 20% -10%, rgba(230,57,70,.18), transparent 55%),
        radial-gradient(900px 500px at 90% 10%, rgba(230,57,70,.12), transparent 55%),
        var(--bg);
      color:var(--text);
      line-height:1.65;
      overflow-x:hidden;
    }

    .container{max-width:var(--container);margin:0 auto;padding:0 22px}
    section{padding:var(--space-8) 0}
    @media(max-width:900px){section{padding:72px 0}}

    /* HEADER */
    header{
      position:fixed;top:0;left:0;width:100%;z-index:2000;height:86px;
      background:rgba(0,0,0,.88);
      border-bottom:1px solid rgba(255,255,255,.06);
      backdrop-filter:blur(10px);
    }
    .header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
    .brand{display:flex;align-items:center;gap:12px;min-width:220px}
    .brand img{width:38px;height:38px;border-radius:10px}
    .brand .name{font-weight:950;letter-spacing:.2px;white-space:nowrap;line-height:1.05}
    .brand .tag{display:block;font-size:.78rem;color:var(--muted);margin-top:2px;line-height:1.1}

    nav.desktop{display:flex;align-items:center;gap:26px}
    nav.desktop a{
      font-size:.92rem;color:rgba(255,255,255,.86);
      position:relative;padding:6px 0;font-weight:800;letter-spacing:.2px
    }
    nav.desktop a:hover{color:#fff}
    nav.desktop a::after{
      content:"";position:absolute;left:0;bottom:-8px;width:100%;height:2px;
      background:var(--accent);transform:scaleX(0);transform-origin:left;
      transition:transform .25s ease;border-radius:999px
    }
    nav.desktop a:hover::after{transform:scaleX(1)}

    .header-actions{display:flex;align-items:center;gap:10px}

    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      padding:12px 18px;border-radius:999px;font-weight:900;font-size:.9rem;
      border:1px solid var(--stroke);background:rgba(255,255,255,.06);color:#fff;
      cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
      user-select:none;white-space:nowrap
    }
    .btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18)}
    .btn.primary{
      border:none;background:linear-gradient(90deg,var(--accent),var(--accent2));
      box-shadow:0 14px 35px rgba(230,57,70,.22)
    }
    .btn.secondary{background:transparent;border:2px solid var(--accent)}
    .btn.secondary:hover{background:rgba(230,57,70,.12);box-shadow:0 12px 30px rgba(230,57,70,.18)}

    .icon-btn{
      width:42px;height:42px;border-radius:999px;border:1px solid var(--stroke);
      background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;
      cursor:pointer;transition:transform .18s ease,background .18s ease
    }
    .icon-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.10)}
    .search-icon{
      width:18px;height:18px;border:2px solid #fff;border-radius:50%;position:relative;opacity:.95
    }
    .search-icon::after{
      content:"";position:absolute;width:10px;height:2px;background:#fff;right:-8px;bottom:-2px;
      transform:rotate(45deg);border-radius:999px
    }

    .hamburger{
      display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--stroke);
      background:rgba(255,255,255,.06);cursor:pointer;padding:0;
      align-items:center;justify-content:center;gap:6px;flex-direction:column
    }
    .hamburger span{width:20px;height:2px;background:#fff;border-radius:999px;opacity:.95}
    @media(max-width:980px){
      nav.desktop{display:none}
      .hamburger{display:flex}
      .brand{min-width:auto}
    }

    /* MOBILE MENU */
    .mobile-panel{
      position:fixed;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(14px);
      display:none;z-index:2500
    }
    .mobile-panel.active{display:block}
    .mobile-sheet{
      position:absolute;top:0;right:0;height:100%;width:min(420px,92vw);
      background:linear-gradient(180deg,rgba(18,18,18,.98),rgba(0,0,0,.98));
      border-left:1px solid rgba(255,255,255,.08);
      box-shadow:-30px 0 90px rgba(0,0,0,.65);
      padding:22px;display:flex;flex-direction:column;gap:16px;
      animation:sheetIn .25s ease forwards
    }
    @keyframes sheetIn{from{transform:translateX(18px);opacity:0}to{transform:translateX(0);opacity:1}}
    .mobile-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}
    .close-x{
      width:44px;height:44px;border-radius:999px;border:1px solid var(--stroke);
      background:rgba(255,255,255,.06);cursor:pointer;position:relative
    }
    .close-x::before,.close-x::after{
      content:"";position:absolute;top:50%;left:50%;width:20px;height:2px;background:#fff;border-radius:999px
    }
    .close-x::before{transform:translate(-50%,-50%) rotate(45deg)}
    .close-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
    .mobile-nav{display:flex;flex-direction:column;gap:10px;padding:10px 0}
    .mobile-nav a{
      padding:14px 14px;border-radius:14px;background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);font-weight:900;letter-spacing:.2px
    }
    .mobile-actions{display:flex;flex-direction:column;gap:12px;margin-top:6px}
    .mobile-actions .btn{width:100%}

    /* SEARCH OVERLAY */
    .search-overlay{
      position:fixed;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(14px);
      display:none;z-index:2600;padding:92px 0 40px
    }
    .search-overlay.active{display:block}
    .search-box{max-width:780px;margin:0 auto;padding:0 22px}
    .search-bar{
      display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:14px 16px;box-shadow:var(--shadow)
    }
    .search-bar input{width:100%;background:transparent;border:none;outline:none;color:#fff;font-size:1rem}
    .search-results{
      margin-top:16px;background:rgba(21,21,21,.85);border:1px solid rgba(255,255,255,.08);
      border-radius:18px;overflow:hidden
    }
    .result-item{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);display:block}
    .result-item:last-child{border-bottom:none}
    .result-item strong{display:block;font-size:.98rem;font-weight:900}
    .result-item span{display:block;color:var(--muted);font-size:.86rem;margin-top:4px}
    .no-results{padding:18px 16px;color:rgba(255,255,255,.70)}

    /* HERO SLIDER */
    .hero{
      min-height:100vh;padding-top:110px;position:relative;overflow:hidden;
      display:flex;align-items:center
    }
    .hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.03);
      transition:opacity 1s ease,transform 6s ease}
    .hero-slide.active{opacity:1;transform:scale(1)}
    .hero::before{
      content:"";position:absolute;inset:0;z-index:1;
      background:
        linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.58) 45%,rgba(0,0,0,.35) 70%,rgba(0,0,0,.22) 100%),
        radial-gradient(800px 500px at 30% 35%,rgba(230,57,70,.18),transparent 55%),
        radial-gradient(800px 500px at 70% 60%,rgba(230,57,70,.10),transparent 60%)
    }
    .hero-content{position:relative;z-index:2;max-width:860px;padding:10px 0}
    .kicker{
      display:inline-flex;gap:10px;align-items:center;padding:8px 14px;border-radius:999px;
      background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);
      color:rgba(255,255,255,.92);font-weight:950;letter-spacing:.16em;text-transform:uppercase;font-size:.75rem
    }
    .hero h1{margin-top:var(--space-4);font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.05;letter-spacing:-0.03em;font-weight:950}
    .hero p{margin-top:var(--space-3);max-width:600px;color:var(--muted);font-size:1.07rem}
    .hero-actions{margin-top:var(--space-5);display:flex;gap:12px;flex-wrap:wrap}
    @media(max-width:900px){.hero{padding-top:105px}.hero-actions .btn{width:100%}}

    .animate-in{opacity:0;transform:translateY(16px);animation:upFade .9s ease forwards}
    .delay-1{animation-delay:.05s}.delay-2{animation-delay:.15s}.delay-3{animation-delay:.28s}
    @keyframes upFade{to{opacity:1;transform:translateY(0)}}

    .dots{
      position:absolute;z-index:3;left:50%;bottom:26px;transform:translateX(-50%);
      display:flex;gap:10px;padding:10px 12px;border-radius:999px;background:rgba(0,0,0,.35);
      border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(10px)
    }
    .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer}
    .dot.active{background:#fff}
    @media(max-width:900px){.dots{bottom:18px}}

    /* SECTION TITLE */
    .section-title{
      display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);
      flex-wrap:wrap;margin-bottom:var(--space-6)
    }
    .section-title h2{
      font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-0.02em;font-weight:950;line-height:1.1
    }
    .section-title h2::after{
      content:"";display:block;width:56px;height:3px;background:var(--accent);
      border-radius:999px;margin-top:12px
    }
    .section-sub{color:var(--muted);max-width:680px;margin-top:var(--space-2);font-size:1rem}

    /* MISSION/VISION/VALUES */
    .mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
    .mv-media{
      border-radius:28px;overflow:hidden;box-shadow:var(--shadow);position:relative;
      border:1px solid rgba(255,255,255,.08)
    }
    .mv-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35))}
    .mv-cards{display:grid;grid-template-columns:1fr;gap:14px}
    .mv-card{background:rgba(21,21,21,.85);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px}
    .mv-card h3{font-size:1.12rem;font-weight:950;margin-bottom:8px;line-height:1.2}
    .mv-card p{color:var(--muted)}
    .values{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
    .chip{
      padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.06);font-weight:900;font-size:.86rem
    }
    @media(max-width:900px){.mv-grid{grid-template-columns:1fr}}

    /* SERMON HERO */
    .sermon-hero{
      position:relative;width:100%;min-height:90vh;display:flex;align-items:center;cursor:pointer;
      border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);
      background:
        linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.52) 45%,rgba(0,0,0,.25) 70%,rgba(0,0,0,.14) 100%),
        url("https://img.youtube.com/vi/YpWQxNZRLvw/maxresdefault.jpg") center/cover no-repeat
    }
    .sermon-hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18)}
    .sermon-hero .content{
      position:relative;z-index:2;width:100%;max-width:var(--container);margin:0 auto;padding:0 22px;
      display:flex;align-items:center;justify-content:space-between;gap:34px
    }
    .sermon-label{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:950;margin-bottom:12px}
    .sermon-text{max-width:580px}
    .sermon-text h2{font-size:clamp(2.1rem,4vw,3rem);margin-bottom:12px;font-weight:950;line-height:1.05}
    .sermon-meta{font-size:1rem;color:var(--muted);margin-bottom:22px;font-weight:800}
    .sermon-actions{display:flex;gap:12px;flex-wrap:wrap}
    .play-button{
      width:96px;height:96px;border-radius:50%;background:rgba(0,0,0,.60);border:2px solid #fff;
      display:flex;align-items:center;justify-content:center;transition:.25s ease;
      box-shadow:0 18px 50px rgba(0,0,0,.55)
    }
    .play-button::before{
      content:"";border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff;margin-left:4px
    }
    .play-button:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.08);box-shadow:0 22px 60px rgba(230,57,70,.25)}
    @media(max-width:900px){
      .sermon-hero{min-height:58vh}
      .sermon-hero .content{flex-direction:column;align-items:flex-start}
      .play-button{width:72px;height:72px}
    }

    /* GET INVOLVED */
    .gi-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
    .gi-image{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:18px;border:1px solid rgba(255,255,255,.08)}
    .gi-image img{transition:opacity .35s ease}
    .gi-image.fade img{opacity:0}
    .gi-text{transition:opacity .35s ease}
    .gi-text.fade{opacity:0}
    .gi-text p{color:var(--muted);margin-bottom:14px;max-width:540px}
    .gi-content h2{font-size:clamp(2rem,4vw,2.75rem);margin-bottom:10px;font-weight:950;letter-spacing:-0.02em;line-height:1.1}
    .gi-content>p{color:var(--muted);max-width:560px;margin-bottom:22px}
    .gi-list{display:flex;flex-direction:column;gap:12px}
    .gi-item{
      background:rgba(21,21,21,.85);border:1px solid rgba(255,255,255,.08);
      padding:18px 20px;border-radius:16px;font-weight:950;
      display:flex;justify-content:space-between;align-items:center;cursor:pointer;
      transition:transform .2s ease,background .2s ease,border-color .2s ease
    }
    .gi-item:hover{transform:translateX(6px);background:rgba(27,27,27,.95);border-color:rgba(230,57,70,.22)}
    .gi-item.active{border-left:4px solid var(--accent);background:rgba(27,27,27,.95)}
    .gi-item span{font-size:.85rem;opacity:.65;font-weight:900}
    @media(max-width:900px){.gi-split{grid-template-columns:1fr;gap:44px}}

    /* LEADERSHIP HERO */
    .leaders-hero{
      position:relative;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);
      background:
        linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.58) 45%,rgba(0,0,0,.30) 75%,rgba(0,0,0,.18) 100%),
        url("https://cdn.prod.website-files.com/67b61e371284645145ba494c/695438e3bbe8773f07256971_LEADER.jpeg") center/cover no-repeat;
      padding:0
    }
    .leaders-hero-inner{min-height:72vh;display:flex;align-items:center;position:relative;padding:72px 0}
    .leaders-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding: 12px 18px;              /* bigger */
  border-radius: 999px;

  background: rgba(230,57,70,.14); /* more premium (red glow) */
  border: 1px solid rgba(230,57,70,.35);

  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .82rem;

  box-shadow: 0 18px 55px rgba(230,57,70,.14);
}

/* optional: add a glowing dot before the text */
.leaders-badge::before{
  content:"";
  width:10px;height:10px;
  border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(230,57,70,.18);
}
.leaders-section .leaders-badge{
  margin-bottom: 30px;
}

.leaders-hero h2{
  margin-top:14px;
  font-size:clamp(2.2rem,4.4vw,3.2rem);
  font-weight:950;
  letter-spacing:-0.03em;
  line-height:1.05;
  max-width:760px;
}
    .leaders-hero p{margin-top:14px;color:rgba(255,255,255,.80);max-width:620px;font-size:1.02rem}
    .leaders-actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
    @media(max-width:900px){.leaders-hero-inner{min-height:62vh;padding:64px 0}.leaders-actions .btn{width:100%}}

    /* IMPACT COUNTERS (9,999+ and 5+) */
    .impact{
      position:relative;padding:0;
      background:
        linear-gradient(rgba(0,0,0,.84),rgba(0,0,0,.84)),
        url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=2200&q=60") center/cover no-repeat;
      border-top:1px solid rgba(255,255,255,.06);
      border-bottom:1px solid rgba(255,255,255,.06)
    }
    .impact-inner{padding:84px 0}
    .impact .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center}
    .verse{
      padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.06);box-shadow:var(--shadow);max-width:680px
    }
    .verse .ref{color:var(--accent);font-weight:950;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin-bottom:10px}
    .verse p{color:rgba(255,255,255,.86);font-size:1.08rem;line-height:1.7;font-weight:800}

    .stats{display:grid;grid-template-columns:1fr;gap:14px}
    .stat{
      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
      border-radius:18px;padding:18px;box-shadow:var(--shadow)
    }
    .stat .num{font-size:clamp(2.1rem,4vw,3rem);font-weight:950;letter-spacing:-0.02em;line-height:1.05}
    .stat .label{margin-top:6px;color:rgba(255,255,255,.84);font-weight:900}
    .stat .hint{margin-top:6px;color:rgba(255,255,255,.65);font-size:.92rem}
    .num .plus{color:rgba(255,255,255,.85)}
    @media(max-width:900px){.impact .wrap{grid-template-columns:1fr}.impact-inner{padding:72px 0}}

    /* TESTIMONIALS */
    .testimonials{text-align:center;padding-top:0}
    .testimonial-stage{position:relative;max-width:820px;margin:0 auto;min-height:240px}
    .testimonial{
      position:absolute;inset:0;margin:auto;background:rgba(21,21,21,.85);
      border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:44px 46px;
      opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s ease;box-shadow:var(--shadow)
    }
    .testimonial.active{opacity:1;transform:translateY(0);z-index:2}
    .testimonial.exit{opacity:0;transform:translateY(-20px);z-index:1}
    .testimonial::before{content:"“";position:absolute;top:-28px;left:28px;font-size:4rem;color:rgba(255,255,255,.08)}
    .testimonial p{color:var(--muted);font-size:1.05rem;line-height:1.75;margin-bottom:18px}
    .testimonial-author{font-weight:950}
    .testimonial-role{margin-top:4px;color:rgba(255,255,255,.55);font-size:.85rem}
    @media(max-width:900px){.testimonial{padding:34px 22px}.testimonial-stage{min-height:290px}}

    /* BACK TO TOP */
    .back-top-wrap{display:flex;justify-content:center;padding:0 0 46px}
    .back-top{
      padding:14px 22px;border-radius:999px;font-weight:950;letter-spacing:.10em;text-transform:uppercase;font-size:.86rem;
      border:1px solid rgba(230,57,70,.35);background:rgba(230,57,70,.10);color:#fff;
      box-shadow:0 0 0 0 rgba(230,57,70,.45),0 18px 60px rgba(230,57,70,.18);
      animation:glowPulse 1.6s ease-in-out infinite;cursor:pointer
    }
    @keyframes glowPulse{
      0%{box-shadow:0 0 0 0 rgba(230,57,70,.45),0 18px 60px rgba(230,57,70,.18)}
      70%{box-shadow:0 0 0 14px rgba(230,57,70,0),0 22px 70px rgba(230,57,70,.22)}
      100%{box-shadow:0 0 0 0 rgba(230,57,70,0),0 18px 60px rgba(230,57,70,.18)}
    }

    /* FOOTER */
    footer{
      border-top:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg,rgba(21,21,21,.7),rgba(0,0,0,.98));
      padding:70px 0 28px
    }
    .footer-grid{display:grid;grid-template-columns:1.2fr .9fr .9fr 1.1fr;gap:22px}
    .footer-card{
      background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
      border-radius:18px;padding:18px
    }
    .footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}
    .footer-brand img{width:40px;height:40px;border-radius:12px}
    .footer-card h4{font-size:1rem;font-weight:950;margin-bottom:10px}
    .footer-card p,.footer-card a,.footer-card li{color:rgba(255,255,255,.78);font-size:.92rem;line-height:1.7}
    .footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}
    .footer-links a:hover{color:#fff}
    .socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
    .social{
      width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;
      transition:transform .18s ease,background .18s ease,border-color .18s ease
    }
    .social:hover{transform:translateY(-2px);background:rgba(255,255,255,.10);border-color:rgba(230,57,70,.28)}
    .social svg{width:20px;height:20px;fill:#fff;opacity:.92}
    .subscribe{display:flex;gap:10px;margin-top:10px}
    .subscribe input{
      flex:1;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.10);
      border-radius:999px;padding:12px 14px;color:#fff;outline:none
    }
    .subscribe button{
      border:none;background:linear-gradient(90deg,var(--accent),var(--accent2));
      border-radius:999px;padding:12px 16px;font-weight:950;color:#fff;cursor:pointer
    }
    .footer-bottom{
      margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
      display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
      color:rgba(255,255,255,.65);font-size:.9rem
    }
    @media(max-width:980px){.footer-grid{grid-template-columns:1fr}}

    /* COOKIE */
    .cookie{position:fixed;left:18px;right:18px;bottom:18px;z-index:3000;display:none}
    .cookie.active{display:block}
    .cookie-inner{
      max-width:1000px;margin:0 auto;background:rgba(21,21,21,.92);
      border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:16px;
      display:flex;gap:14px;align-items:center;justify-content:space-between;
      box-shadow:var(--shadow);backdrop-filter:blur(10px)
    }
    .cookie-inner p{color:rgba(255,255,255,.82);font-size:.92rem;max-width:680px}
    .cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
    .cookie-actions .btn{padding:10px 14px;font-size:.88rem}
    @media(max-width:760px){.cookie-inner{flex-direction:column;align-items:flex-start}}
	/* ================================
   CLEAN SPACING + RESPONSIVE FIXES
   Paste at the END of your CSS
================================ */

/* global spacing improvements */
section{ padding: 100px 0; }
@media(max-width:900px){
  section{ padding: 76px 0; }
}

.container{ padding: 0 24px; }
@media(max-width:900px){
  .container{ padding: 0 18px; }
}

/* make content breathe */
.section-title{ margin-bottom: 56px; }
@media(max-width:900px){
  .section-title{ margin-bottom: 36px; }
}

/* ===== MISSION/VISION/VALUES ===== */
.mv-grid{
  gap: 52px;
}
.mv-cards{ gap: 16px; }
.mv-card{ padding: 22px; }
.values{ gap: 12px; margin-top: 14px; }

/* ===== GET INVOLVED ===== */
.gi-split{ gap: 58px; }
.gi-image{ margin-bottom: 22px; }
.gi-text p{ margin-bottom: 18px; }
.gi-item{ padding: 20px 22px; }
.gi-list{ gap: 14px; }
@media(max-width:900px){
  .gi-split{ gap: 36px; }
  .gi-item{ padding: 18px 18px; }
}

/* ===== SERMON HERO ===== */
.sermon-hero .content{ gap: 44px; }
@media(max-width:900px){
  .sermon-hero .content{ gap: 18px; }
}

/* ===== IMPACT ===== */
.impact-inner{ padding: 92px 0; }
.impact .wrap{ gap: 34px; }
.verse{ padding: 22px; }
.stat{ padding: 22px; }
@media(max-width:900px){
  .impact-inner{ padding: 72px 0; }
}

/* ===== TESTIMONIALS ===== */
.testimonial-stage{ min-height: 280px; }
.testimonial{ padding: 44px 40px; }
@media(max-width:900px){
  .testimonial-stage{ min-height: 320px; }
  .testimonial{ padding: 34px 22px; }
}

/* ================================
   LEADERSHIP HERO (FIX CROPPING)
   Make photo readable, not zoomed
================================ */
.leaders-hero{
  /* switch from COVER to CONTAIN to avoid harsh cropping */
  background:
    linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.66) 45%,rgba(0,0,0,.35) 80%,rgba(0,0,0,.22) 100%),
    url("https://cdn.prod.website-files.com/67b61e371284645145ba494c/695438e3bbe8773f07256971_LEADER.jpeg")
    center top / contain no-repeat;

  /* give room so image doesn’t feel tight */
  padding: 0;
}

/* give the section a solid fallback color behind the "contain" image */
.leaders-hero{ background-color:#000; }

/* fix margin feeling (was looking out of container) */
.leaders-hero-inner{
  min-height: 74vh;
  padding: 96px 0;
}

/* on phones, contain + top alignment keeps faces visible */
@media(max-width:900px){
  .leaders-hero{
    background:
      linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.78) 55%,rgba(0,0,0,.92) 100%),
      url("https://cdn.prod.website-files.com/67b61e371284645145ba494c/695438e3bbe8773f07256971_LEADER.jpeg")
      center top / cover no-repeat;
  }
  .leaders-hero-inner{
    min-height: 62vh;
    padding: 74px 0;
  }
}

/* ensure buttons wrap nicely instead of squeezing */
.hero-actions, .leaders-actions, .sermon-actions{
  gap: 14px;
}
.btn{ padding: 14px 20px; }
/* =========================
   FINAL CLEAN SPACING FIXES
   Paste at END of CSS
========================= */

/* Bigger breathing room between sections */
section{ padding: 110px 0; }
@media(max-width:900px){ section{ padding: 78px 0; } }

/* Add visual separation so pages don't feel glued */
section + section{
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Hero already full height, reduce bottom glue */
.hero{ padding-bottom: 130px; }
@media(max-width:900px){ .hero{ padding-bottom: 110px; } }

/* Events was feeling too close */
.events{ padding-top: 100px; }
@media(max-width:900px){ .events{ padding-top: 70px; } }

/* Titles spacing */
.section-title{ margin-bottom: 54px; }
@media(max-width:900px){ .section-title{ margin-bottom: 34px; } }

/* Events track breathe */
.events-track{ gap: 26px; grid-auto-columns: 360px; padding-bottom: 18px; }
@media(max-width:900px){ .events-track{ gap: 16px; grid-auto-columns: 88%; } }

/* Mission/Vision grid breathe */
.mv-grid{ gap: 60px; }
@media(max-width:900px){ .mv-grid{ gap: 34px; } }

/* Get involved grid breathe */
.gi-split{ gap: 60px; }
@media(max-width:900px){ .gi-split{ gap: 36px; } }

/* Sermon spacing */
.sermon-hero .content{ gap: 46px; }
@media(max-width:900px){ .sermon-hero .content{ gap: 18px; } }

/* Impact spacing */
.impact-inner{ padding: 96px 0; }
@media(max-width:900px){ .impact-inner{ padding: 72px 0; } }

/* =========================
   LEADERSHIP (NOT HERO)
   Text left, image right
========================= */
.leaders-hero{ background: none !important; padding: 0 !important; border-top: 1px solid rgba(255,255,255,.06); }
.leaders-hero-inner{ min-height:auto !important; padding: 0 !important; }

.leaders-section{ padding: 110px 0; }
@media(max-width:900px){ .leaders-section{ padding: 78px 0; } }

.leaders-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items:center;
}

.leaders-photo{
  border-radius: 28px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 35px 90px rgba(0,0,0,.55);
  position: relative;
}

.leaders-photo img{
  width:100%;
  height: 560px;
  object-fit: cover;
  object-position: center top;
}

.leaders-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.25));
}

@media(max-width:900px){
  .leaders-grid{ grid-template-columns:1fr; gap: 28px; }
  .leaders-photo img{ height: 420px; }
}

/* =========================
   FLOATING BACK TO TOP ARROW
========================= */
.back-top-wrap{ display:none !important; }

.to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(230,57,70,.35);
  background: rgba(230,57,70,.14);
  box-shadow: 0 22px 70px rgba(230,57,70,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 4000;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.to-top:hover{
  background: rgba(230,57,70,.22);
  transform: translateY(6px);
}

.to-top.show{
  opacity: 1;
  transform: translateY(0);
}

.to-top svg{
  width: 22px;
  height: 22px;
  fill: #fff;
  opacity: .95;
}

/* ==========================
   FINAL SECTION SPACING FIX
   (single source of truth)
========================== */

/* consistent breathing room */
:root{
  --sec: 120px;
  --sec-m: 86px;
  --gap: 36px;
  --gap-m: 24px;
}

section{ padding: var(--sec) 0; }
@media(max-width:900px){ section{ padding: var(--sec-m) 0; } }

/* For places where you used <section class="container"> */
section.container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
section.container > .section-title,
section.container > .mv-grid,
section.container > .gi-split,
section.container > .testimonial-stage{
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 22px;
  padding-right: 22px;
}

/* space between blocks inside sections */
.section-title{ margin-bottom: 56px; }
@media(max-width:900px){ .section-title{ margin-bottom: 36px; } }

/* Fix the "almost touching" issues */
.testimonials{
  padding-top: var(--sec) !important;
  padding-bottom: calc(var(--sec) + 10px) !important;
}
@media(max-width:900px){
  .testimonials{ padding-bottom: calc(var(--sec-m) + 10px) !important; }
}

/* add bigger separation between specific sections you mentioned */
.sermon-hero{ margin: var(--gap) 0; }
@media(max-width:900px){ .sermon-hero{ margin: var(--gap-m) 0; } }

.gi-split{ margin-top: 10px; }
.leaders-section{ margin-top: var(--gap); }
@media(max-width:900px){ .leaders-section{ margin-top: var(--gap-m); } }

/* keep footer comfortably away */
footer{ margin-top: 30px; }

/* Leadership CTA: make it big + separated */
.leaders-actions{
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.leaders-actions .btn.primary{
  padding: 16px 26px;
  font-size: 1rem;
  border-radius: 999px;
}
@media(max-width:900px){
  .leaders-actions .btn{ width: 100%; }
}
.events{ padding-top: var(--sec); }
@media(max-width:900px){ .events{ padding-top: var(--sec-m); } }

/* HERO 2026 TYPEWRITER LINE */
.hero-yearline{
  margin-top: 14px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: clamp(.9rem, 1.5vw, 1.05rem);
  color: rgba(255,255,255,.92);
}

.hero-yearline span{
  position: relative;
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}

/* blinking cursor */
.hero-yearline span::after{
  content:"";
  display:inline-block;
  width:2px;
  height:1em;
  margin-left:8px;
  background: rgba(255,255,255,.9);
  transform: translateY(2px);
  animation: blink .75s steps(2) infinite;
  border-radius: 2px;
}

@keyframes blink { 50% { opacity: 0; } }
/* =========================
   LEADERSHIP: MOBILE ORDER + CLASSIC HEADING + BUTTON FIX
   Paste at END of CSS
========================= */

/* Make grid more intentional on desktop */
.leaders-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr; /* photo left, text right */
  gap: 60px;
  align-items:center;
}

/* Classic + noticeable badge */
.leaders-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 0;                 /* remove pill look */
  background: transparent;
  border: none;
  box-shadow: none;

  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .92rem;
  color: rgba(255,255,255,.92);
  position: relative;
  margin-bottom: 14px;
}

/* subtle classic rule under badge */
.leaders-badge::after{
  content:"";
  display:block;
  width: 74px;
  height: 2px;
  background: var(--accent);
  border-radius: 999px;
  margin-top: 10px;
}

/* remove the glowing dot from earlier badge style (if still applied) */
.leaders-badge::before{ content:none !important; }

/* Headline more “classic” */
.leaders-section h2{
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin-bottom: 12px;
}

/* Buttons: smaller so they don’t feel like headings */
.leaders-actions{
  margin-top: 20px;
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
}

.leaders-actions .btn{
  padding: 12px 16px;     /* smaller */
  font-size: .9rem;       /* smaller text */
  font-weight: 900;
  letter-spacing: .02em;
  border-radius: 999px;
  text-transform: none;   /* prevents “heading feel” */
}

/* Optional: make secondary look more button-like */
.leaders-actions .btn.secondary{
  border-width: 1px;
  background: rgba(255,255,255,.04);
}

/* MOBILE: photo on top, then text, then buttons */
@media(max-width:900px){
  .leaders-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* Force photo to appear first */
  .leaders-photo{ order: 1; }
  .leaders-copy{ order: 2; }

  .leaders-photo img{
    height: 360px;
    object-fit: cover;
    object-position: center top;
  }

  /* Buttons under text and full width */
  .leaders-actions{
    margin-top: 18px;
  }
  .leaders-actions .btn{
    width: 100%;
    justify-content:center;
  }
}
/* PHONE ONLY: Badge + Names ABOVE photo */
@media(max-width:900px){

  /* ensure we can reorder children cleanly */
  .leaders-grid{
    grid-template-columns:1fr;
  }

  /* reorder inside the text block */
  .leaders-copy{ display: contents; } /* allows children to become grid items */

  .leaders-badge{ order: 1; }
  .leaders-section h2{ order: 2; }
  .leaders-photo{ order: 3; }

  /* the two paragraphs (text) */
  .leaders-section .leaders-copy p:nth-of-type(1){ order: 4; }
  .leaders-section .leaders-copy p:nth-of-type(2){ order: 5; }

  /* buttons last */
  .leaders-actions{ order: 6; }

  /* photo sizing on phone */
  .leaders-photo img{
    height: 360px;
    object-fit: cover;
    object-position: center top;
  }

  /* buttons full-width & look like buttons */
  .leaders-actions .btn{
    width:100%;
    padding:12px 16px;
    font-size:.9rem;
    text-transform:none;
  }
}
.play-button,
.sermon-play-inline {
  display: none !important;
}
html, body{
  background:#0c0c0c !important;
  color:#fff !important;
}
/* ==============================
   EVENTS (NEW STYLE - ISOLATED)
   Fixes weird overlays by being
   fully self-contained
============================== */

.ngc-events{
  padding: 110px 0;
  position: relative;
  z-index: 1;
  background: transparent;
  isolation: isolate; /* prevents strange overlay blending */
}

.ngc-events-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 22px;
}

.ngc-events-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 46px;
}

.ngc-events-head h2{
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 950;
  line-height: 1.1;
  margin: 0;
}

.ngc-events-head p{
  margin-top: 10px;
  color: rgba(255,255,255,.72);
  max-width: 680px;
}

.ngc-events-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .92rem;
  border: 1px solid rgba(230,57,70,.35);
  background: rgba(230,57,70,.12);
  color: #fff;
  text-decoration:none;
  white-space: nowrap;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.ngc-events-btn:hover{
  transform: translateY(-1px);
  background: rgba(230,57,70,.20);
  border-color: rgba(230,57,70,.55);
}

/* Track */
.ngc-events-track{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: 340px;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 12px;

  scroll-snap-type: x mandatory;

  /* prevents “white film” when some global styles apply */
  background: transparent !important;
}
.ngc-events-track::-webkit-scrollbar{height: 4px}
.ngc-events-track::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}

.ngc-event{
  scroll-snap-align: start;
  background: rgba(21,21,21,.88);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  position: relative;
  overflow: hidden;

  /* hard stop to any inherited “filter/backdrop” weirdness */
  filter: none !important;
  backdrop-filter: none !important;

  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.ngc-event:hover{
  transform: translateY(-6px);
  border-color: rgba(230,57,70,.22);
  background: rgba(27,27,27,.95);
}

.ngc-event-date{
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  font-weight: 950;
  margin-bottom: 10px;
}

.ngc-event-title{
  font-size: 1.1rem;
  font-weight: 950;
  line-height: 1.2;
  margin: 0 0 8px;
}

.ngc-event-desc{
  color: rgba(255,255,255,.72);
  font-size: .95rem;
  margin: 0;
}

/* Footer row: chip left, link right */
.ngc-event-foot{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.ngc-event-chip{
  display:inline-flex;
  align-items:center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.ngc-event-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  white-space: nowrap;
  opacity: .92;
  transition: transform .18s ease, opacity .18s ease, color .18s ease;
}
.ngc-event-link:hover{
  opacity: 1;
  color: #e63946;
  transform: translateY(-1px);
}

/* Mobile */
@media(max-width: 900px){
  .ngc-events{ padding: 78px 0; }
  .ngc-events-track{ grid-auto-columns: 86%; gap: 14px; }
}
/* ==============================
   EVENTS: PREMIUM LINK + ANIMATIONS
   Paste at VERY END of CSS
============================== */

/* smoother feel everywhere (buttons/links) */
.ngc-events-btn,
.ngc-event-chip,
.ngc-event-link{
  -webkit-tap-highlight-color: transparent;
}

/* ---- View all events button (more alive) ---- */
.ngc-events-btn{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
.ngc-events-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(240px 120px at 20% 30%, rgba(255,255,255,.18), transparent 55%);
  opacity: 0;
  transition: opacity .25s ease;
}
.ngc-events-btn:hover::before{ opacity: 1; }
.ngc-events-btn:active{ transform: translateY(0px) scale(.98); }

/* ---- Event card: hover + subtle border glow ---- */
.ngc-event{
  transform: translateY(0);
}
.ngc-event::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 22px;
  background: radial-gradient(420px 200px at 15% 10%, rgba(230,57,70,.22), transparent 60%);
  opacity: 0;
  pointer-events:none;
  transition: opacity .25s ease;
}
.ngc-event:hover::before{ opacity: 1; }

/* extra depth on hover */
.ngc-event:hover{
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
}

/* ---- CHIP: little bounce + highlight ---- */
.ngc-event-chip{
  position: relative;
  overflow:hidden;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.ngc-event-chip:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.ngc-event-chip:active{ transform: translateY(0) scale(.98); }

/* ---- SEE DETAILS: make it look premium ---- */
.ngc-event-link{
  position: relative;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: 0 16px 44px rgba(0,0,0,.35);
  gap: 10px;
  opacity: 1;
  transform: translateZ(0);
}

.ngc-event-link::after{
  content:"→";
  font-weight: 950;
  opacity: .92;
  transition: transform .18s ease, opacity .18s ease;
}

/* shiny sweep */
.ngc-event-link::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 70%;
  height: 180%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  opacity: 0;
  transition: left .55s ease, opacity .2s ease;
  pointer-events:none;
}

.ngc-event-link:hover{
  transform: translateY(-2px);
  border-color: rgba(230,57,70,.28);
  background: rgba(230,57,70,.12);
  box-shadow: 0 20px 60px rgba(230,57,70,.14);
}

.ngc-event-link:hover::after{ transform: translateX(4px); }
.ngc-event-link:hover::before{
  opacity: 1;
  left: 120%;
}

.ngc-event-link:active{
  transform: translateY(-1px) scale(.98);
}

/* ---- Scroll-in animation (cards appear nicely) ---- */
.ngc-event{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .65s ease, transform .65s ease;
  will-change: opacity, transform;
}
.ngc-event.in{
  opacity: 1;
  transform: translateY(0);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .ngc-event,
  .ngc-events-btn,
  .ngc-event-chip,
  .ngc-event-link{
    transition: none !important;
    animation: none !important;
  }
  .ngc-event{ opacity: 1 !important; transform:none !important; }
}
/* FIX: Hero text looks faded (increase contrast + clarity) */

/* 1) Stronger overlay so text pops on bright images */
.hero::before{
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.70) 45%,
      rgba(0,0,0,.45) 75%,
      rgba(0,0,0,.30) 100%
    ),
    radial-gradient(900px 520px at 30% 35%, rgba(0,0,0,.35), transparent 60%),
    radial-gradient(900px 520px at 70% 60%, rgba(0,0,0,.22), transparent 65%);
}

/* 2) Force hero text/buttons to be fully visible */
.hero h1,
.hero p,
.hero .hero-actions,
.hero .btn,
.hero .hero-yearline{
  opacity: 1 !important;
  color: #fff !important;
}

/* 3) Premium readability */
.hero h1{
  text-shadow: 0 10px 30px rgba(0,0,0,.75);
}
.hero p{
  color: rgba(255,255,255,.90) !important;
  text-shadow: 0 8px 22px rgba(0,0,0,.55);
}

/* 4) Buttons a little stronger */
.hero .btn{
  background: rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.18);
}
.hero .btn.primary{
  background: linear-gradient(90deg,var(--accent),var(--accent2));
}
/* HARD FIX: stop any fading on hero content */
.hero-content,
.hero-content *{
  opacity: 1 !important;
  filter: none !important;
}
/* HARD FIX: something upstream is lowering opacity/filter */
.hero-content{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.hero-content *{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.hero h1{ color:#fff !important; }
.hero p{ color:rgba(255,255,255,.92) !important; }
/* =========================
   HERO MOBILE OPTIMIZATION
========================= */

@media (max-width: 768px){

  .hero-content{
    padding: 0 18px;
    max-width: 100%;
  }

  .hero h1{
    font-size: clamp(1.9rem, 7vw, 2.4rem);
    line-height: 1.15;
  }

  .hero p{
    font-size: 1rem;
    line-height: 1.6;
  }

  .kicker{
    font-size: .8rem;
    padding: 8px 12px;
  }

  .hero-actions{
    flex-wrap: wrap;
    gap: 12px;
  }

  .hero .btn{
    width: 100%;
    justify-content: center;
  }

  /* First slide: keep centered but not too low */
  .hero.first-slide .hero-content{
    padding-top: 30vh;
  }
}

/* Extra small phones */
@media (max-width: 420px){
  .hero.first-slide .hero-content{
    padding-top: 26vh;
  }
}
/* Better hero slide scaling on mobile */
.hero-slide{
  background-size: cover;
  background-position: center;
}

@media (max-width: 768px){
  .hero-slide{
    background-position: center top;
  }
}
/* ===== Desktop dropdown (Serve) ===== */
.nav-dd{ position:relative; display:flex; align-items:center; }
.nav-dd-btn{
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.86);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 6px 0;
  cursor: pointer;
  display:flex;
  align-items:center;
  gap: 6px;
}
.nav-dd-btn:hover{ color:#fff; }

.nav-caret{ opacity:.85; font-size:.9em; transform: translateY(-1px); }

.nav-dd-menu{
  position:absolute;
  top: calc(100% + 14px);
  left: -14px;
  min-width: 220px;
  background: rgba(18,18,18,.98);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 25px 70px rgba(0,0,0,.60);
  padding: 10px;
  display:none;
  z-index: 3000;
}

.nav-dd-menu a{
  display:block;
  padding: 12px 12px;
  border-radius: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.88);
}
.nav-dd-menu a:hover{
  background: rgba(255,255,255,.06);
  color:#fff;
}

/* open state */
.nav-dd.open .nav-dd-menu{ display:block; }

/* ===== Mobile grouping ===== */
.m-group{
  margin: 6px 0 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.m-group-title{
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .76rem;
  opacity: .85;
  margin-bottom: 8px;
}
.m-sub{
  display:block;
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  margin-top: 8px;
  font-weight: 900;
}
/* =========================
   HEADER LAYOUT FIX
========================= */

.header-inner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

/* Logo hard left */
.header-inner .brand{
  justify-self: start;
}

/* Menu gets breathing room */
nav.desktop{
  justify-self: center;
  display: flex;
  gap: 22px;
}

/* Actions hard right */
.header-actions{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand{
  padding-left: 2px;
}
header .container{
  padding-left: 18px;
  padding-right: 18px;
}
/* FIX: make nav & dropdown clickable */
header{
  position: relative;
  z-index: 1000;
}

nav.desktop{
  position: relative;
  z-index: 2000;
}

.nav-dd{
  position: relative;
  z-index: 3000;
}

.nav-dd-btn{
  pointer-events: auto !important;
  cursor: pointer;
}

.nav-dd-menu{
  z-index: 4000;
}
.header-inner *{
  pointer-events: auto;
}
/* ===== FIX HEADER CLICK ISSUES ===== */

header{
  position: relative;
  z-index: 1000;
}

.header-actions{
  position: relative;
  z-index: 1002;
}

.hamburger,
.icon-btn{
  position: relative;
  z-index: 1003;
  pointer-events: auto;
}
.hero,
.hero-slide{
  pointer-events: none;
}

.hero-content,
.hero-actions,
.hero-content *{
  pointer-events: auto;
}
.mobile-panel{
  z-index: 2000;
}
/* HARD FIX: ensure hamburger appears on mobile no matter what external CSS does */
@media (max-width: 980px){
  nav.desktop{ display:none !important; }
  .hamburger{ display:flex !important; }
}
/* Layering sanity */
header{ position:fixed !important; top:0; left:0; width:100%; z-index:5000 !important; }
.mobile-panel{ z-index:6000 !important; }
.search-overlay{ z-index:7000 !important; }
/* =========================
   MOBILE MENU — COMPACT & CLEAN
========================= */

@media (max-width: 980px){

  /* Panel background stays premium */
  .mobile-panel{
    background: rgba(0,0,0,.88);
  }

  /* Sheet width smaller */
  .mobile-sheet{
    width: min(360px, 90vw);
    padding: 16px;
    gap: 12px;
  }

  /* Top brand */
  .mobile-top .brand img{
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .mobile-top .name{
    font-size: .95rem;
    font-weight: 900;
  }

  .mobile-top .tag{
    font-size: .72rem;
    opacity: .7;
  }

  /* Close button smaller */
  .close-x{
    width: 36px;
    height: 36px;
  }

  /* Navigation links */
  .mobile-nav{
    gap: 8px;
    padding: 10px 0;
  }

  .mobile-nav a{
    padding: 11px 14px;
    font-size: .9rem;
    font-weight: 900;
    border-radius: 12px;
  }

  /* Serve group */
  .m-group{
    padding: 10px;
    border-radius: 12px;
    margin: 6px 0 8px;
  }

  .m-group-title{
    font-size: .7rem;
    margin-bottom: 6px;
    opacity: .75;
  }

  .m-sub{
    padding: 10px 12px;
    font-size: .88rem;
    border-radius: 10px;
  }

  /* Actions (buttons) */
  .mobile-actions{
    gap: 10px;
    margin-top: 10px;
  }

  .mobile-actions .btn{
    padding: 11px 14px;
    font-size: .9rem;
  }

  /* Footer text */
  .mobile-sheet > div:last-child{
    font-size: .8rem;
    opacity: .65;
  }
}
/* =========================
   HEADER: MOBILE SPACING FIX
========================= */

@media (max-width: 980px){

  /* Give actions breathing room */
  .header-actions{
    gap: 14px;            /* was too tight */
  }

  /* Slightly smaller buttons on phone */
  .icon-btn,
  .hamburger{
    width: 40px;
    height: 40px;
  }

  /* Keep hamburger bars centered */
  .hamburger span{
    width: 18px;
  }
}
/* =========================================
   FINAL MASTER FIX — MOBILE HEADER ACTIONS
   Paste at the VERY END of your CSS
========================================= */

@media (max-width: 980px){

  /* keep header layout stable */
  header .header-inner{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap: 14px !important;
  }

  /* brand shouldn't push actions */
  header .brand{
    min-width: 0 !important;
    gap: 10px !important;
  }

  header .brand img{
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
  }

  /* Actions: spacing fix */
  .header-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap: 16px !important;              /* 👈 key fix */
  }

  /* Make buttons clean + consistent */
  .icon-btn,
  .hamburger{
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding: 0 !important;
  }

  /* Search icon stays centered */
  .icon-btn .search-icon{
    width: 18px !important;
    height: 18px !important;
  }

  /* hamburger bars nicer */
  .hamburger{
    gap: 6px !important;
  }
  .hamburger span{
    width: 20px !important;
    height: 2px !important;
    border-radius: 999px !important;
  }
}
/* ===============================
   EVENTS BUTTONS — TEXT FIT + MINIMAL LINK
   Paste at END of CSS
================================ */

/* Make the chip fit text (no stretching) */
.ngc-event-foot{
  align-items: center;
  gap: 10px;
}

.ngc-event-chip{
  width: auto !important;          /* prevents full-width */
  flex: 0 0 auto !important;       /* don’t stretch */
  display: inline-flex !important;
  padding: 8px 12px !important;
  font-size: .76rem !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}

/* Keep "See details" minimal (clean link style) */
.ngc-event-link{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;

  font-size: .86rem !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,.78) !important;
  opacity: .9 !important;
}

/* Remove the arrow bubble look if it exists */
.ngc-event-link::before,
.ngc-event-link::after{
  content: none !important;
}

/* Subtle hover */
.ngc-event-link:hover{
  color: #e63946 !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Mobile: keep chip + link on one line, but allow wrapping if needed */
@media (max-width: 900px){
  .ngc-event-foot{
    flex-wrap: wrap;
    gap: 10px;
  }
}
/* ===============================
   EVENTS — FORCE COMPACT BUTTONS
   (FINAL OVERRIDE)
=============================== */

/* Ensure footer row doesn't stretch children */
.ngc-event-foot{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

/* ===== CHIP: hug text tightly ===== */
.ngc-event-chip{
  all: unset !important;                 /* reset EVERYTHING */
  display: inline-flex !important;
  align-items: center !important;

  padding: 6px 10px !important;          /* tight */
  border-radius: 999px !important;

  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;

  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  color: #fff !important;
}

/* ===== SEE DETAILS: small minimal text ===== */
.ngc-event-link{
  all: unset !important;                 /* wipe pill styles */
  cursor: pointer !important;

  font-size: .82rem !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,.65) !important;
  white-space: nowrap !important;
}

/* Minimal hover */
.ngc-event-link:hover{
  color: #e63946 !important;
}

/* Kill any leftover pseudo effects */
.ngc-event-link::before,
.ngc-event-link::after{
  display: none !important;
}
/* ===============================
   HEADER: EXTREME LEFT/RIGHT + CLEAN SPACING
   Paste at VERY END of CSS
=============================== */

/* Full-width row so logo can be truly left */
header{
  position: fixed !important;
  top:0; left:0; width:100%;
  z-index: 5000 !important;
}

/* full width wrapper */
.header-row{
  width: 100%;
  padding-left: 18px;
  padding-right: 18px;
}

/* inner layout: logo left, nav center, actions right */
.header-inner{
  height: 86px;
  max-width: 100%;
  margin: 0;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  column-gap: 32px !important;
}

/* logo hard-left */
.brand{
  justify-self: start !important;
  min-width: auto !important;
  padding-left: 0 !important;
}

/* NAV gets real breathing space */
nav.desktop{
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* if screen gets smaller, allow wrap instead of squeeze */
@media (max-width: 1180px){
  nav.desktop{
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 18px !important;
    line-height: 1.2;
  }
}

/* Make the links look crisp and not tight */
nav.desktop a,
.nav-dd-btn{
  padding: 10px 6px !important;
  border-radius: 10px;
}
nav.desktop a:hover,
.nav-dd-btn:hover{
  background: rgba(255,255,255,.06);
}

/* actions hard-right */
.header-actions{
  justify-self: end !important;
  display:flex !important;
  align-items:center !important;
  gap: 14px !important;
}

/* make search/hamburger consistent */
.icon-btn,
.hamburger{
  width: 42px !important;
  height: 42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* ===============================
   MOBILE HEADER: NICE + NOT TOO BIG
=============================== */
@media (max-width: 980px){

  /* remove desktop nav */
  nav.desktop{ display:none !important; }

  /* simple, stable flex layout on mobile */
  .header-inner{
    display:flex !important;
    justify-content: space-between !important;
    gap: 14px !important;
  }

  .brand .name{ font-size: 1rem; }
  .brand .tag{ font-size: .72rem; }

  .icon-btn,
  .hamburger{
    width: 40px !important;
    height: 40px !important;
  }

  .hamburger span{
    width: 18px !important;
  }
}

/* Optional: hide the tagline on very small phones */
@media (max-width: 420px){
  .brand .tag{ display:none; }
}

/* keep dropdown above everything */
.nav-dd{ position: relative; z-index: 7000; }
.nav-dd-menu{ z-index: 8000; }
/* ===== MOBILE SERVE ACCORDION (details/summary) ===== */
@media (max-width:980px){

  .m-acc{
    margin: 6px 0 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
  }

  /* Remove default marker */
  .m-acc summary{ list-style:none; }
  .m-acc summary::-webkit-details-marker{ display:none; }

  .m-acc-btn{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 12px;
    cursor:pointer;
    font-weight:950;
    letter-spacing:.2px;
    font-size:.95rem;
    color:#fff;
    background: transparent;
  }

  .m-acc-caret{
    opacity:.9;
    transition: transform .18s ease;
  }
  .m-acc[open] .m-acc-caret{
    transform: rotate(180deg);
  }

  .m-acc-panel{
    padding: 0 10px 12px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  /* keep sub links compact */
  .m-acc-panel .m-sub{
    margin-top:0;
  }
}
/* ===== MOBILE MENU: smaller + cleaner ===== */
@media (max-width: 980px){

  /* Sheet spacing */
  .mobile-sheet{
    padding: 16px;
    gap: 12px;
  }

  /* Top area */
  .mobile-top{
    padding-bottom: 8px;
  }
  .mobile-top .brand img{
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .mobile-top .name{ font-size: .98rem; }
  .mobile-top .tag{ font-size: .74rem; }

  /* Links: reduce height + remove “overloaded cards” feel */
  .mobile-nav{
    gap: 8px;
    padding: 8px 0;
  }
  .mobile-nav a{
    padding: 10px 12px;                 /* smaller */
    border-radius: 12px;
    background: transparent;            /* less heavy */
    border: 1px solid rgba(255,255,255,.08);
    font-size: .95rem;
    font-weight: 900;
  }
  .mobile-nav a:hover{
    background: rgba(255,255,255,.05);
  }

  /* Serve group: slimmer + less boxed */
  .m-group{
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.02);
  }
  .m-group-title{
    font-size: .72rem;
    margin-bottom: 6px;
    opacity: .8;
  }
  .m-sub{
    padding: 10px 12px;
    border-radius: 12px;
    background: transparent;            /* remove extra blocks */
    border: 1px solid rgba(255,255,255,.08);
    margin-top: 8px;
    font-size: .94rem;
  }
  .m-sub:hover{
    background: rgba(255,255,255,.05);
  }

  /* Buttons: less tall */
  .mobile-actions{
    gap: 10px;
  }
  .mobile-actions .btn{
    padding: 11px 14px;
    font-size: .92rem;
  }

  /* Contact line smaller */
  .mobile-sheet > div:last-child{
    font-size: .85rem !important;
  }
}
/* ===== HEADER: logo far left, nav roomy, search far right ===== */

/* Make header content full-width (not capped at 1200px) */
header .container.header-inner{
  max-width:none;     /* overrides .container max-width */
  width:100%;
  padding-left:14px;  /* small edge spacing */
  padding-right:14px;
}

/* Logo can sit left without forcing width */
.brand{
  min-width:0 !important;     /* remove min-width:220px */
  margin-right:14px;
}

/* Let nav take center space and avoid squeeze */
nav.desktop{
  flex:1;
  justify-content:center;
  gap:18px;                  /* was 26px */
  flex-wrap:nowrap;
}

/* Slightly tighten nav text */
nav.desktop a,
.nav-dd-btn{
  font-size:.90rem;
  padding:6px 0;
}

/* Search icon stays extreme right */
.header-actions{
  margin-left:auto;
}

/* OPTIONAL: make search icon a bit slimmer */
.icon-btn{
  width:40px;
  height:40px;
}

/* ===== MOBILE MENU: make links not too big ===== */
@media(max-width:980px){
  .mobile-nav a{
    padding:12px 12px;   /* was 14px */
    border-radius:12px;
    font-size:.95rem;
  }
  .m-sub{
    padding:11px 12px;
    font-size:.94rem;
  }
  .btn{
    padding:12px 16px;
    font-size:.92rem;
  }
}
/* 🔥 FORCE ICON-ONLY SEARCH (NO SEARCH BAR EVER) */

/* Keep header clean BUT allow overlay search to work */

/* only hide search inputs inside the HEADER (if any) */
header input[type="search"],
header input{
  display: none !important;
}

/* DO NOT hide the overlay search bar */
.search-overlay .search-bar{
  display: flex !important;
}
.search-overlay input{
  display: block !important;
}


/* Ensure icon button stays visible */
#openSearch {
  display: flex !important;
}

/* Keep icon clean & round */
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
}
/* ===== FINAL OVERRIDE: Desktop shows NAV, not hamburger ===== */
.hamburger{ display:none !important; }
nav.desktop{ display:flex !important; }

@media (max-width: 980px){
  nav.desktop{ display:none !important; }
  .hamburger{ display:flex !important; }
}
/* ===== FINAL OVERRIDE: always show logo tagline on mobile ===== */
.brand .tag{ display:block !important; }
/* Only hide search inputs inside the HEADER, not the overlay */
header input[type="search"],
header .search-bar{
  display:none !important;
}
/* =========================
   FINAL FIX PACK
========================= */

/* Desktop: show nav, hide hamburger */
.hamburger{ display:none !important; }
nav.desktop{ display:flex !important; }

/* Mobile: hide nav, show hamburger */
@media (max-width: 980px){
  nav.desktop{ display:none !important; }
  .hamburger{ display:flex !important; }
}

/* Always show logo tagline (even small phones) */
.brand .tag{ display:block !important; }

/* Don’t kill the overlay search UI */
header input[type="search"],
header .search-bar{
  display:none !important;
}
.search-overlay{
  pointer-events: auto !important;
}
.search-overlay *{
  pointer-events: auto !important;
}
/* === SEARCH OVERLAY: FORCE WORKING (FINAL) === */
.search-overlay{
  pointer-events:auto !important;
  z-index: 99999 !important;
}
.search-overlay *{
  pointer-events:auto !important;
}

.search-overlay .search-bar{
  display:flex !important;
}
.search-overlay input{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}
/* === SEARCH OVERLAY: FORCE WORKING (FINAL) === */
.search-overlay{
  pointer-events:auto !important;
  z-index: 99999 !important;
}
.search-overlay *{
  pointer-events:auto !important;
}

.search-overlay .search-bar{
  display:flex !important;
}
.search-overlay input{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* =========================================
   FINAL OVERRIDE PACK — HEADER + SERVE UI
   Paste at the VERY END of your CSS
========================================= */

/* 1) HEADER: true extreme left / right */
header .container.header-inner{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* Make header use flex so left/right is guaranteed */
.header-inner{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
}

/* Brand hard-left */
.header-inner .brand{
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin-right: 0 !important;
}

/* Nav stays center and takes remaining space */
nav.desktop{
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

/* Actions hard-right */
.header-actions{
  flex: 0 0 auto !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
}

/* 2) Desktop vs Mobile visibility */
.hamburger{ display:none !important; }
nav.desktop{ display:flex !important; }

@media (max-width: 980px){
  nav.desktop{ display:none !important; }
  .hamburger{ display:flex !important; }
}

/* 3) Make Serve dropdown classic on desktop */
.nav-dd-menu{
  background: rgba(12,12,12,.98) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.70) !important;
}

.nav-dd-menu a{
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,.86) !important;
}

.nav-dd-menu a:hover{
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}

/* 4) Classic Serve accordion on mobile (details/summary) */
@media (max-width: 980px){
  .m-acc{
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.02) !important;
    overflow: hidden !important;
  }

  .m-acc summary{ list-style:none !important; }
  .m-acc summary::-webkit-details-marker{ display:none !important; }

  .m-acc-btn{
    padding: 12px 12px !important;
    font-family: Georgia, "Times New Roman", serif !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    font-size: .92rem !important;
    background: transparent !important;
  }

  .m-acc-caret{
    opacity: .85 !important;
    transition: transform .18s ease !important;
  }
  .m-acc[open] .m-acc-caret{ transform: rotate(180deg) !important; }

  .m-acc-panel{
    padding: 0 12px 12px !important;
    gap: 8px !important;
  }

  .m-acc-panel a{
    font-weight: 900 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.03) !important;
  }
}

/* 5) DO NOT block overlay search */
header input[type="search"],
header .search-bar{
  display:none !important;
}
.search-overlay{
  z-index: 99999 !important;
  pointer-events: auto !important;
}
.search-overlay *{
  pointer-events: auto !important;
}
.search-overlay .search-bar{
  display:flex !important;
}
.search-overlay input{
  display:block !important;
  opacity:1 !important;
  visibility: visible !important;
}
/* ===== FIX: cannot type in search input ===== */
#searchOverlay,
#searchOverlay *{
  pointer-events: auto !important;
}

#searchOverlay .search-bar{
  display: flex !important;
}

#searchInput{
  display: block !important;
  pointer-events: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Just in case something globally blocks inputs */
input, textarea{
  pointer-events: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
}
/* =========================
   MOBILE: Make Serve accordion match other links
========================= */
@media (max-width:980px){

  /* Make the accordion container behave like the other items */
  .m-acc{
    margin: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    overflow: hidden;
  }

  /* Make summary look exactly like .mobile-nav a */
  .m-acc-btn{
    padding: 10px 12px !important;     /* same “height” as links */
    border-radius: 12px !important;
    font-size: .95rem !important;      /* match mobile-nav a */
    font-weight: 900 !important;
    letter-spacing: .2px !important;
    background: transparent !important; /* same as your latest links */
    border: 0 !important;
    line-height: 1.2 !important;
  }

  /* Make the caret the same scale and not oversized */
  .m-acc-caret{
    font-size: .9rem !important;
    opacity: .8 !important;
  }

  /* Inside panel links: match other links too */
  .m-acc-panel{
    padding: 8px 10px 10px !important;
    gap: 8px !important;
  }

  .m-acc-panel .m-sub{
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: .94rem !important;
    font-weight: 900 !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.08) !important;
  }
}

  </style>
