/* ==========================================================================
   NGM — shared site stylesheet
   Rebuilt from the actual NGM Homepage treatment (not the summary):
   layered ambient glows, 3-layer gold headline, sheen sweep, silk cream,
   riseIn entrance stagger, section color-bleeds. Every page loads this.
   ========================================================================== */

:root{
  --ink:#04140D;
  --green:#0B2E1E;
  --green-mid:#12402A;
  --green-deep:#071B11;
  --green-hero-a:#0D3320;
  --green-hero-b:#0A2A1A;
  --cream:#F5F2EC;
  --gray:#93A79A;
  --cream-muted:#5C6E63;
  --gold-flat:#F5CE5C;
  --gold-flat-2:#EFC94F;
  --gold-deep:#C9A227;
  --gold-deep-2:#A07E1C;
  --gold:linear-gradient(180deg,#FFF6D6 0%,#FFEAA6 14%,#FBDA78 30%,#F5CE5C 44%,#E8BF44 49.5%,#FFF2BE 52.5%,#F9D869 66%,#F2CC50 82%,#E2BA36 100%);
  --wrap:1280px;
  --pad-x:clamp(20px,5vw,64px);
  --pad-y:clamp(76px,10vw,130px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Montserrat,system-ui,sans-serif;
  font-size:15px;line-height:1.68;
  background:var(--green-deep);color:var(--cream);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-family:'Plus Jakarta Sans',Montserrat,sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.08}
h1{font-size:clamp(34px,5.8vw,68px)}
h2{font-size:clamp(29px,4.4vw,54px)}
h3{font-size:clamp(19px,2.1vw,25px);line-height:1.22}

/* ============ layout ============ */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x);position:relative;z-index:2}
.section{padding-top:var(--pad-y);padding-bottom:var(--pad-y);position:relative;overflow:hidden}
.sec-green{background:radial-gradient(130% 170% at 50% -25%,#12402A 0%,#0B2E1E 50%,#071B11 100%)}
.sec-green-flat{background:var(--green-deep)}
.sec-cream{background:var(--cream);color:var(--cream-muted)}
.sec-cream h1,.sec-cream h2,.sec-cream h3{color:var(--green)}

/* ============ ambient glow layers (the "perfect circle" look) ============
   Stack these absolutely-positioned divs behind .wrap. */
.glow{position:absolute;pointer-events:none;z-index:0}
.glow-green{ /* big soft green circle, brightest core */
  width:min(1300px,140vw);height:900px;top:-30%;left:50%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(37,102,66,.55) 0%,rgba(18,64,42,.34) 42%,transparent 72%);
  animation:glowDrift 24s ease-in-out infinite alternate;
}
.glow-gold{ /* scarce warm wash over it */
  width:min(900px,120vw);height:560px;top:2%;left:50%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(245,206,92,.11) 0%,transparent 70%);
  animation:breathe 13s ease-in-out infinite;
}
.blob{ /* off-canvas gold accent, drifts */
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(245,206,92,.14),transparent 70%);
  animation:blobDrift 26s ease-in-out infinite,breathe 14s ease-in-out infinite;
}
@keyframes glowDrift{0%{transform:translateX(-50%) translateY(0) scale(1)}100%{transform:translateX(-50%) translateY(28px) scale(1.06)}}
@keyframes blobDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,7%) scale(1.1)}}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}

/* silk cream texture — two blurred diagonal layers drifting opposite ways */
.silk{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.silk::before,.silk::after{content:"";position:absolute;inset:-20%}
.silk::before{
  background:linear-gradient(118deg,transparent 8%,rgba(255,255,255,.85) 18%,transparent 30%,rgba(224,216,200,.5) 40%,transparent 50%,rgba(255,255,255,.75) 62%,transparent 74%,rgba(224,216,200,.4) 86%,transparent 96%);
  filter:blur(46px);animation:silkA 28s ease-in-out infinite alternate;
}
.silk::after{
  background:linear-gradient(64deg,transparent 10%,rgba(255,255,255,.7) 22%,transparent 34%,rgba(224,216,200,.45) 48%,transparent 60%,rgba(255,255,255,.6) 74%,transparent 88%);
  filter:blur(58px);animation:silkB 36s ease-in-out infinite alternate;
}
@keyframes silkA{0%{transform:translate(-3%,-2%) rotate(-1.5deg) scale(1.05)}100%{transform:translate(3%,2%) rotate(1.5deg) scale(1.1)}}
@keyframes silkB{0%{transform:translate(3%,1.5%) rotate(1deg) scale(1.08)}100%{transform:translate(-3%,-2%) rotate(-1.5deg) scale(1.03)}}

/* photo sunk into green (design-system §4 recipe) */
.photo-sink{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.11;filter:grayscale(100%) brightness(.9);mix-blend-mode:luminosity;
  transform:scale(1.1);pointer-events:none;z-index:0}
.photo-drift{animation:heroDrift 30s ease-in-out infinite alternate}
@keyframes heroDrift{0%{transform:scale(1.1) translate(0,0)}50%{transform:scale(1.14) translate(-1.5%,-1%)}100%{transform:scale(1.1) translate(1.5%,.8%)}}

/* ============ kicker ============ */
.kicker{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-flat-2);margin-bottom:18px;display:block}
.sec-cream .kicker{color:var(--gold-deep-2)}
.lede{font-size:clamp(15px,1.5vw,17.5px);line-height:1.72;color:rgba(245,242,236,.68);max-width:62ch}
.sec-cream .lede{color:var(--cream-muted)}
.muted{color:var(--gray)}.sec-cream .muted{color:var(--cream-muted)}

/* ============ pill badge ============ */
.pill-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(245,242,236,.06);
  border:1px solid rgba(245,242,236,.14);border-radius:99px;padding:8px 18px;
  font-size:12.5px;font-weight:600;letter-spacing:.04em;color:rgba(245,242,236,.85)}
.pill-badge .dot{width:7px;height:7px;border-radius:99px;background:var(--gold);flex:none}
.pill-badge.live .dot{animation:dotPulse 2.6s ease-in-out infinite}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.4);opacity:1}}

/* ============ 3-layer gold headline (emboss + gold + sheen) ============ */
.gold-head{display:grid;isolation:isolate}
.gold-head>span{grid-area:1/1}
.gold-head .emboss{color:rgba(56,34,0,.42);transform:translateY(.028em);z-index:0}
.gold-head .fill{z-index:1;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.gold-head .sheen{z-index:2;background:linear-gradient(104deg,transparent 34%,rgba(255,248,224,.82) 47%,transparent 60%);
  background-size:250% 100%;background-position:-140% 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  mix-blend-mode:screen;animation:sheenDrift 9s ease-in-out infinite}
.sec-cream .gold-head .emboss{color:rgba(120,86,0,.25)}
@keyframes sheenDrift{0%,14%{background-position:-140% 0}86%,100%{background-position:240% 0}}

/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:99px;padding:16px 30px;
  font-size:14.5px;font-weight:800;font-family:Montserrat,sans-serif;border:0;cursor:pointer;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s,border-color .25s,background .25s}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 36px -10px rgba(245,206,92,.5)}
.btn-gold:active{transform:scale(.97)}
.btn-ghost{background:rgba(245,242,236,.06);border:1px solid rgba(245,242,236,.2);color:var(--cream);font-weight:700}
.btn-ghost:hover{border-color:rgba(245,206,92,.6);background:rgba(245,206,92,.08);transform:translateY(-2px)}
.sec-cream .btn-ghost{background:transparent;border-color:rgba(11,46,30,.22);color:var(--green)}
.sec-cream .btn-ghost:hover{border-color:var(--gold-deep);background:rgba(201,162,39,.07)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* ============ scroll progress ============ */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:var(--gold);will-change:width}

/* ============ header ============ */
.site-header{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:14px 24px;padding:24px var(--pad-x)}
.site-header .logo img{height:78px;width:auto;margin:-17px 0}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px}
.site-nav>a{color:rgba(245,242,236,.72);font-size:13.5px;font-weight:600;transition:color .25s}
.site-nav>a:hover,.site-nav>a[aria-current="page"]{color:var(--cream)}
.site-nav a.nav-cta{background:var(--gold);border:1px solid rgba(245,206,92,.5);
  color:#08150E;padding:10px 22px;border-radius:99px;font-size:13px;font-weight:800;transition:transform .2s,box-shadow .25s}
.site-nav a.nav-cta:hover{color:#08150E;transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(245,206,92,.55)}
.nav-more{position:relative}
.nav-more>button{background:none;border:0;cursor:pointer;font-family:Montserrat,sans-serif;
  color:rgba(245,242,236,.72);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:color .25s}
.nav-more>button:hover{color:var(--cream)}
.nav-more>button svg{transition:transform .3s}
.nav-more:hover>button svg,.nav-more:focus-within>button svg{transform:rotate(180deg)}
.nav-more-panel{position:absolute;top:calc(100% + 14px);right:0;min-width:220px;
  background:rgba(7,27,17,.97);backdrop-filter:blur(12px);border:1px solid rgba(245,242,236,.12);
  border-radius:16px;padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s,transform .25s,visibility .25s}
.nav-more:hover .nav-more-panel,.nav-more:focus-within .nav-more-panel{opacity:1;visibility:visible;transform:translateY(0)}
.nav-more-panel a{display:block;padding:11px 14px;border-radius:10px;font-size:13.5px;transition:background .2s,color .2s;color:rgba(245,242,236,.8)}
.nav-more-panel a:hover{background:rgba(245,242,236,.06);color:var(--cream)}

/* ============ footer ============ */
.site-footer{background:var(--green-deep);border-top:1px solid rgba(245,242,236,.08);padding:38px var(--pad-x)}
.site-footer .inner{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.site-footer img{height:64px;width:auto;margin:-14px 0}
.site-footer .tag{font-size:13px;color:var(--gray);max-width:34ch}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.site-footer nav a{color:var(--gray);font-size:13px;font-weight:600;transition:color .25s}
.site-footer nav a:hover{color:var(--cream)}
.site-footer .copy{font-size:12px;color:var(--cream-muted)}

/* ============ FAQ accordion — collapsed by CSS, present in HTML ============ */
.faq-item{border-bottom:1px solid rgba(11,46,30,.12)}
.sec-green .faq-item,.sec-green-flat .faq-item{border-bottom-color:rgba(245,242,236,.1)}
.faq-item summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:clamp(16px,1.7vw,19px);
  letter-spacing:-.01em;line-height:1.35;color:var(--green);transition:color .2s}
.sec-green .faq-item summary,.sec-green-flat .faq-item summary{color:var(--cream)}
.faq-item summary:hover{color:var(--gold-deep)}
.sec-green .faq-item summary:hover,.sec-green-flat .faq-item summary:hover{color:var(--gold-flat)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:6px;top:50%;width:15px;height:15px;margin-top:-7px;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
  background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
  color:var(--gold-deep);opacity:.75}
.sec-green .faq-item summary::after,.sec-green-flat .faq-item summary::after{color:var(--gold-flat)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-body{padding-bottom:26px}
.faq-body>div{max-width:70ch;animation:riseIn .5s ease both}
.faq-body p+p{margin-top:14px}
.faq-body a{color:var(--gold-deep);font-weight:700;border-bottom:1px solid rgba(201,162,39,.35)}
.sec-green .faq-body a,.sec-green-flat .faq-body a{color:var(--gold-flat);border-bottom-color:rgba(245,206,92,.35)}

/* ============ video slot (placeholder until footage lands) ============ */
.video-slot{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/9;
  background:radial-gradient(120% 160% at 30% 0%,#12402A 0%,#0B2E1E 48%,#071B11 100%);
  border:1px solid rgba(245,242,236,.12);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px}
.video-slot .play{width:64px;height:64px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;position:relative}
.video-slot .play::after{content:"";border-left:17px solid var(--ink);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.video-slot .play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(245,206,92,.4);animation:ripple 3.2s ease-out infinite}
@keyframes ripple{0%{transform:scale(.85);opacity:0}18%{opacity:1}100%{transform:scale(1.4);opacity:0}}
.video-slot .label{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);z-index:2}

/* ============ entrance + scroll reveals ============ */
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.rise{animation:riseIn .9s cubic-bezier(.22,.61,.36,1) both}
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
[data-reveal].in{opacity:1;transform:none}

/* ============ accessibility ============ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .rise{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* hamburger toggle — hidden on desktop, injected by js/nav.js */
.nav-toggle{display:none}

@media (max-width:820px){
  .site-header{padding:16px var(--pad-x);flex-wrap:nowrap;align-items:center}
  .site-header .logo img{height:60px;margin:-12px 0}
  .site-footer .inner{flex-direction:column;align-items:flex-start}

  /* show the hamburger (animates into an X when open) */
  .nav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:0 9px;background:none;border:0;cursor:pointer;flex:none;margin:-6px 0}
  .nav-toggle span{display:block;height:2px;width:26px;background:var(--cream);border-radius:2px;
    transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .2s}
  .sec-cream .nav-toggle span{background:var(--green)}
  .site-header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-header.nav-open .nav-toggle span:nth-child(2){opacity:0}
  .site-header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* collapse the desktop nav into a dropdown panel */
  .site-nav{
    display:none;position:absolute;top:100%;left:var(--pad-x);right:var(--pad-x);margin-top:8px;
    flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(7,27,17,.98);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(245,242,236,.12);border-radius:16px;padding:10px;
    box-shadow:0 26px 60px rgba(0,0,0,.45)}
  .site-header.nav-open .site-nav{display:flex;animation:navDrop .28s cubic-bezier(.22,.61,.36,1) both}
  @keyframes navDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

  .site-nav>a{padding:14px 15px;border-radius:11px;font-size:15.5px;color:rgba(245,242,236,.86)}
  .site-nav>a:hover,.site-nav>a[aria-current="page"]{background:rgba(245,242,236,.06);color:var(--cream)}

  /* flatten the "More" dropdown: hide its button, show its links inline */
  .nav-more{position:static;width:100%}
  .nav-more>button{display:none}
  .nav-more-panel{position:static;opacity:1;visibility:visible;transform:none;min-width:0;
    background:none;border:0;border-radius:0;padding:0;backdrop-filter:none;box-shadow:none}
  .nav-more-panel a{padding:14px 15px;border-radius:11px;font-size:15.5px}

  /* CTA sits full-width at the bottom of the menu */
  .site-nav a.nav-cta{width:100%;text-align:center;justify-content:center;margin-top:8px;padding:15px;font-size:14.5px}
}

/* ============================================================================
   MOBILE OPTIMIZATION LAYER  —  added 2026-08-09
   EVERY rule below lives inside a max-width media query, so the desktop /
   web view is NEVER affected. The CD pages carry heavy INLINE styles, so
   overrides here use !important to beat inline specificity — but only while
   the query matches (phones). Nothing here exists above the breakpoint.
   ============================================================================ */
@media (max-width:700px){
  /* --- 1. text must WRAP, never run off the right edge --------------------- */
  h1,h2,h3,h4{white-space:normal !important;overflow-wrap:break-word}
  [style*="white-space:nowrap"]{white-space:normal !important}
  .lede,p{overflow-wrap:break-word}

  /* --- 2. pill badges fit the screen (wrap instead of overflowing) --------- */
  .pill-badge{max-width:100%;flex-wrap:wrap;white-space:normal !important}

  /* --- 3. fixed multi-column grids collapse to ONE column ------------------ */
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 1.25fr"],
  [style*="grid-template-columns:1fr 1.42fr"],
  [style*="1fr 1fr 1fr 1.42fr"],
  [style*="minmax(420px"],
  [style*="minmax(min(100%,420px)"]{grid-template-columns:1fr !important}

  /* --- 4. oversized display numbers/headlines shrink to fit 360px ---------- */
  [style*="font-size:clamp(90px,15vw"]{font-size:clamp(40px,12.5vw,90px) !important}
  [style*="font-size:clamp(60px,10vw"]{font-size:clamp(34px,10vw,60px) !important}
  [style*="font-size:clamp(60px,9vw"] {font-size:clamp(34px,9.5vw,60px) !important}
  [style*="font-size:clamp(60px,8vw"] {font-size:clamp(34px,9vw,60px) !important}

  /* --- 5. button rows stack full-width & stay tappable -------------------- */
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row>.btn,.btn-row>a,.btn-row>button{width:100%;justify-content:center}

  /* --- 6. universal overflow safety net ----------------------------------- */
  img,svg,video,table{max-width:100% !important}

  /* --- 7. hide "keep scrolling" cues from the collapsed scroll-stories ----- */
  [data-dc="manHint"],[data-dc="cmpHint"],[data-dc="payHint"]{display:none !important}
}