body{font-family:'Plus Jakarta Sans',sans-serif;}
body{background:var(--bg);color:var(--text);}
.glass-card{background:rgba(34,39,39,0.4);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{--bg:#08120d;--surface:#111e17;--surface2:#0d1a12;--border:#1f3828;--border2:#263f30;--text:#ffffff;--muted:#4a7a60;--a1:#2effa8;--a2:#00d4ff;--a3:#b8f55a;}
html,body{width:100%;overflow-x:hidden;}
html{scroll-behavior:smooth;}
body::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:9000;opacity:0.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px;}
#spacer{height:290vh;}

/* NEWS (Split scroll: sticky image + native text scroll) */
.news-split{
  --section-bg:var(--bg);
  --section-text:var(--text);
  --section-text-muted:var(--muted2, var(--muted));
  --section-border:var(--border);
  --section-accent:var(--secondary, var(--a2));
  width:100%;
  background:var(--section-bg);
  padding:80px 0;
}
html.light .news-split{--section-border:#e2e2e2;}
html.dark .news-split{--section-border:#2a2a2a;}

.news-split__header{
  max-width:1200px;
  margin:0 auto 64px;
  padding:0 48px;
}
.news-label{
  display:inline-block;
  font-size:11px;
  font-weight:900;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--section-text-muted);
  margin-bottom:14px;
}
.news-title{
  font-size:clamp(2.1rem,3.2vw,3.2rem);
  font-weight:900;
  letter-spacing:-0.03em;
  color:var(--section-text);
  margin-bottom:12px;
}
.news-subtitle{
  color:var(--section-text-muted);
  max-width:70ch;
  line-height:1.7;
}

.news-split__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 48px;
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  gap:0 48px;
  align-items:start;
}
.news-split__divider{
  background:var(--section-border,#e2e2e2);
  align-self:stretch;
  width:1px;
}

/* LEFT — sticky image */
.news-split__left{
  position:sticky;
  top:calc(50vh - 240px);
  height:480px;
}
.news-image-stack{
  position:relative;
  width:100%;
  height:100%;
  border-radius:16px;
  overflow:hidden;
}
.news-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 600ms ease;
  border-radius:16px;
}
.news-img.is-active{opacity:1;}

/* RIGHT — natural scroll */
.news-split__right{
  padding-top:40px;
  padding-bottom:40px;
  display:flex;
  flex-direction:column;
}
.news-item{
  min-height:85vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:48px 0;
  border-bottom:1px solid var(--section-border,#e2e2e2);
  opacity:0.35;
  transition:opacity 400ms ease;
}
.news-item:last-child{border-bottom:none;}
.news-item.is-active{opacity:1;}

.news-item__img{display:none;}
.news-item__tag{
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--section-accent);
  font-weight:900;
  margin-bottom:16px;
}
.news-item__h{
  font-size:clamp(24px,2.8vw,36px);
  font-weight:700;
  color:var(--section-text);
  line-height:1.15;
  margin-bottom:10px;
}
.news-item__sub{
  font-size:16px;
  font-weight:500;
  color:var(--section-text-muted);
  line-height:1.5;
  margin-bottom:14px;
}
.news-item__p{
  font-size:15px;
  line-height:1.7;
  color:var(--section-text-muted);
  margin-bottom:20px;
  max-width:62ch;
}

/* NEWS (ScrollTrigger panels, pinned; replaces #news split section) */
.news-section{
  background:transparent;
  color:#0b0d10;
  padding:0;
  margin-top:0;
  position:relative;
  overflow:visible;
  z-index:auto;
}
.news-section[data-scroll-panels]:not(.news-section--mobile-reset){
  background:#f7f7f7;
}
.news-pin-target{
  background:#f7f7f7;
  color:#0b0d10;
  width:100%;
  box-sizing:border-box;
  position:relative;
  z-index:1;
  overflow:hidden;
}
/* No elevated z-index while pinned — prevents News floating over hero/sections after resize */
/* Pinned: fill viewport below nav (min-height + JS --news-pin-min-h; no height !important) */
.news-section.news-section--pinned[data-scroll-panels]:not(.news-section--mobile-reset){
  background:#f7f7f7;
}
.news-section.news-section--pinned[data-scroll-panels]:not(.news-section--mobile-reset) .news-pin-target{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-height:var(--news-pin-min-h, calc(100svh - var(--nav-h, 72px))) !important;
  background:#f7f7f7;
  overflow:hidden;
}
.news-section.news-section--pinned[data-scroll-panels]:not(.news-section--mobile-reset) .news-section__container{
  flex:1 1 auto;
  display:grid;
  width:100%;
  max-width:1200px;
  min-height:var(--news-pin-min-h, calc(100svh - var(--nav-h, 72px)));
  height:100%;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  align-items:stretch;
  align-content:stretch;
  grid-template-columns:minmax(240px, 340px) minmax(0, 1fr);
  grid-template-rows:minmax(0, 1fr);
  padding:clamp(12px,2vh,24px) clamp(24px,4vw,48px);
  column-gap:clamp(28px,4vw,52px);
  row-gap:clamp(16px,2vh,24px);
  overflow:hidden;
}
.news-section.news-section--pinned[data-scroll-panels]:not(.news-section--mobile-reset) .left-nav{
  align-self:start;
  min-height:0;
}
.news-section.news-section--pinned[data-scroll-panels]:not(.news-section--mobile-reset) .right-content{
  align-self:stretch;
  min-height:0;
  height:100%;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
}
.news-section.news-section--pinned[data-scroll-panels]:not(.news-section--mobile-reset) .panel.is-active{
  overflow:hidden;
}
.news-section[data-scroll-panels]:not(.news-section--mobile-reset) > .pin-spacer{
  background:#f7f7f7;
}
.news-section__container{
  max-width:1200px;
  margin:0 auto;
  padding:96px 48px;
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(260px, 340px) 1fr;
  column-gap:72px;
  align-items:start;
  position:relative;
}
/* Homepage #news: list headline aligns with panel title (kicker lives in left column only) */
.news-section[data-scroll-panels]:not(.news-section--mobile-reset){
  --news-head-offset:calc(12px * 1.35 + 10px);
}
.news-section[data-scroll-panels]:not(.news-section--mobile-reset) .left-nav__kicker{
  margin:0 0 10px;
  line-height:1.35;
}
.news-section[data-scroll-panels]:not(.news-section--mobile-reset) .right-content{
  padding-top:var(--news-head-offset);
  box-sizing:border-box;
}
.news-section[data-scroll-panels] .left-nav{
  position:relative;
  top:auto;
  align-self:start;
}
.news-section[data-scroll-panels] .right-content{
  align-self:start;
}
.news-section[data-scroll-panels] .panel{
  transform:none;
}
.news-section[data-scroll-panels]:not(.news-section--mobile-reset) .panel__h{
  margin:0 0 10px;
  line-height:1.05;
}
/* Scroll-panels (desktop JS): content height in flow until pin — avoids early viewport-tall snap */
.news-section[data-scroll-panels]:not(.news-section--mobile-reset) .news-section__container{
  min-height:auto;
}
.news-section[data-scroll-panels]:not(.news-section--mobile-reset) .news-pin-target{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  box-sizing:border-box;
}
/* Homepage #news (desktop): natural height until pin */
@media (min-width: 901px){
  .news-section[data-scroll-panels]:not(.news-section--mobile-reset){
    margin-top:48px;
    min-height:0;
  }
  .news-section[data-scroll-panels]:not(.news-section--mobile-reset) .news-pin-target{
    border-top:1px solid rgba(15,23,42,0.07);
  }
  .news-section[data-scroll-panels]:not(.news-section--mobile-reset) .news-section__container{
    width:100%;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
    align-items:start;
    align-content:start;
    min-height:auto;
    padding:clamp(12px,2vh,20px) clamp(32px,4vw,48px);
    column-gap:clamp(32px,4vw,52px);
    row-gap:clamp(16px,2vh,24px);
  }
  .news-section[data-scroll-panels]:not(.news-section--mobile-reset) .right-content{
    min-height:min(520px,56vh);
    box-sizing:border-box;
  }
  .news-section.news-section--pinned[data-scroll-panels]:not(.news-section--mobile-reset) .news-section__container{
    align-items:stretch;
    align-content:stretch;
    min-height:var(--news-pin-min-h, calc(100svh - var(--nav-h, 72px)));
  }
  .news-section.news-section--pinned[data-scroll-panels]:not(.news-section--mobile-reset) .right-content{
    min-height:0;
    height:100%;
    align-self:stretch;
  }
  .news-section.news-section--pinned[data-scroll-panels]:not(.news-section--mobile-reset) .panel{
    min-height:0;
    grid-template-rows:auto auto auto minmax(0, 1fr);
  }
  .news-section[data-scroll-panels]:not(.news-section--mobile-reset) .panel{
    display:grid;
    align-content:start;
    row-gap:0;
    padding-top:0;
  }
}
@media (max-width: 900px){
  .news-section__container{
    grid-template-columns:1fr;
    gap:28px;
    padding:72px 20px;
  }
  .news-section[data-scroll-panels]:not(.news-section--mobile-reset) .right-content{
    padding-top:0;
  }
}
.left-nav{position:sticky;top:96px;align-self:start;}
@media (max-width: 900px){.left-nav{position:relative;top:auto;}}
.left-nav__kicker{font-size:12px;font-weight:900;letter-spacing:0.14em;text-transform:uppercase;color:#6b7280;margin-bottom:18px;}
.left-nav__list{list-style:none;display:flex;flex-direction:column;gap:14px;padding:0;margin:0;}
.left-nav__item{display:flex;align-items:baseline;gap:14px;font-weight:700;color:#6b7280;opacity:0.3;}
.left-nav__link{display:flex;align-items:baseline;gap:14px;color:inherit;text-decoration:none;}
.left-nav__link:hover{color:#0b0d10;opacity:1;}
.left-nav__num{font-variant-numeric:tabular-nums;width:2.3em;letter-spacing:0.06em;font-weight:900;}
.left-nav__title{font-size:16px;letter-spacing:-0.01em;}
.left-nav__more{
  display:inline-flex;
  align-items:baseline;
  gap:14px;
  margin-top:1rem;
  font-weight:700;
  font-size:16px;
  letter-spacing:-0.01em;
  color:#6b7280;
  text-decoration:none;
}
@media (prefers-reduced-motion: no-preference){
  .left-nav__more{transition:color 150ms ease, opacity 150ms ease;}
}
.left-nav__more:hover{color:#0b0d10;opacity:1;}
.left-nav__more:focus-visible{outline:2px solid rgba(17,24,39,0.35);outline-offset:4px;border-radius:8px;}
.right-content{position:relative;min-height:520px;}
.panel{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:translateY(50px);will-change:transform,opacity;pointer-events:none;}
.panel.is-active{pointer-events:auto;}
.panel__h{font-size:clamp(2rem, 3.2vw, 3rem);font-weight:950;letter-spacing:-0.04em;margin-bottom:10px;}
.panel__sub{color:#111827;opacity:0.78;max-width:70ch;line-height:1.65;margin-bottom:18px;}
.panel__bullets{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;}
@media (max-width: 700px){.panel__bullets{grid-template-columns:1fr;}}
.panel__bullets li{position:relative;padding-left:18px;color:#111827;opacity:0.85;line-height:1.5;}
.panel__bullets li::before{content:"";position:absolute;left:0;top:0.6em;width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg, #22c55e, #06b6d4);}
.panel__visual{margin-top:10px;}
.news-section[data-scroll-panels] .panel__media{
  width:100%;
  max-width:100%;
  min-height:0;
  border-radius:18px;
  border:1px solid rgba(17,24,39,0.12);
  background:#ffffff;
  box-shadow:0 18px 55px rgba(2, 6, 23, 0.12);
  overflow:hidden;
}
.news-section[data-scroll-panels] .panel__media--empty{
  min-height:clamp(120px, 22vh, 280px);
  background:linear-gradient(135deg, rgba(34,197,94,0.08), rgba(6,182,212,0.08));
}
.news-section[data-scroll-panels] .panel__img{
  display:block;
  width:100%;
  height:100%;
  max-height:clamp(160px, 28vh, 340px);
  object-fit:cover;
  object-position:center;
}
@media (min-width: 901px){
  .news-section.news-section--pinned[data-scroll-panels]:not(.news-section--mobile-reset) .panel__img{
    max-height:min(36vh, 320px);
  }
}
.panel__cta{margin-top:18px;max-width:420px;}
.panel__ctaBtn{min-width:0;width:auto;justify-content:center;}
.panel__code,.panel__mock,.panel__chat,.panel__flow,.panel__api{border-radius:18px;border:1px solid rgba(17,24,39,0.12);background:#ffffff;box-shadow:0 18px 55px rgba(2, 6, 23, 0.12);overflow:hidden;}
.panel__codeTop{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid rgba(17,24,39,0.08);background:linear-gradient(180deg, #ffffff, #f8fafc);}
.dot{width:10px;height:10px;border-radius:50%;}
.dot--r{background:#ef4444;}
.dot--y{background:#f59e0b;}
.dot--g{background:#22c55e;}
.panel__codeTitle{margin-left:8px;font-size:12px;font-weight:800;color:#111827;opacity:0.75;}
.panel__codeBody{margin:0;padding:16px 16px 18px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:13px;line-height:1.55;color:#0b1020;background:radial-gradient(900px 200px at 20% 0%, rgba(34,197,94,0.10), transparent 60%),radial-gradient(900px 200px at 70% 0%, rgba(6,182,212,0.10), transparent 60%),#ffffff;}
.panel__mock{padding:14px;}
.panel__mockHeader{font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:0.12em;color:#6b7280;margin-bottom:10px;}
.panel__mockRow{display:flex;gap:10px;margin-bottom:12px;}
.panel__mockRow span{height:10px;flex:1;border-radius:999px;background:rgba(17,24,39,0.08);}
.panel__mockCard{height:74px;border-radius:14px;background:linear-gradient(135deg, rgba(34,197,94,0.10), rgba(6,182,212,0.10));border:1px solid rgba(17,24,39,0.08);margin-bottom:10px;}
.panel__mockCard:last-child{margin-bottom:0;}
.panel__chat{padding:14px; display:flex; flex-direction:column; gap:10px;}
.panel__chatMsg{padding:12px 14px;border-radius:14px;font-weight:650;line-height:1.4;border:1px solid rgba(17,24,39,0.08);}
.panel__chatMsg--user{background:rgba(6,182,212,0.08);}
.panel__chatMsg--bot{background:rgba(34,197,94,0.08);}
.panel__flow{padding:18px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.panel__node{padding:10px 12px;border-radius:12px;background:rgba(17,24,39,0.04);border:1px solid rgba(17,24,39,0.08);font-weight:900;letter-spacing:-0.01em;}
.panel__line{flex:1;height:2px;background:linear-gradient(90deg, rgba(34,197,94,0.45), rgba(6,182,212,0.45));border-radius:2px;}
.panel__api{padding:16px; display:flex; align-items:center; gap:12px;}
.panel__apiLabel{font-weight:950;font-size:12px;letter-spacing:0.12em;background:rgba(34,197,94,0.12);color:#166534;padding:6px 10px;border-radius:999px;border:1px solid rgba(34,197,94,0.22);}
.panel__apiPath{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:13px;color:#111827;opacity:0.82;}

/* ============================================================================
   FEATURED NEWS — homepage `#news` (slide-to-reveal animation).

   Mechanic (desktop, ≥769px, motion allowed):
     - Each `.news-card` is a 50/50 CSS grid:
         * `.news-card__info`  — left column (text: tag, date, title,
                                  subtitle, CTA). ALWAYS VISIBLE.
         * `.news-card__cover` — image panel, half the card's width.
                                  Absolutely positioned at the right
                                  column (left: 50%; right: 0), then
                                  translated LEFT by 100% of its own
                                  width on first paint — so it sits on
                                  top of the text panel and the user
                                  sees only the image at rest.
     - The image keeps the SAME width and height throughout. No scale,
       no opacity change. The only thing animated is `xPercent`:
         start (top 70%)    → xPercent: -100  (image on left, covers text)
         end (bottom 30%)   → xPercent:    0  (image on right, text shown)
     - `scrub: true` binds the timeline DIRECTLY to scroll position with
       no smoothing window, so the animation reverses immediately when
       the user scrolls back up. `invalidateOnRefresh: true` re-measures
       on resize so positions stay pixel-clean.

   Mobile (<=768px) and prefers-reduced-motion: the layered animation is
   disabled — the card collapses to a vertical stack (image on top, text
   below). No JS animation needed; the text is always visible.
   ============================================================================ */
.featured-news{
  position:relative;
  padding:clamp(72px, 11vh, 140px) 0 clamp(80px, 12vh, 160px);
  background:#f7f7f7;
  color:#0b1220;
  overflow:hidden;
}

html.dark .featured-news{
  background:#08120d;
  color:#f8fafc;
}

.featured-news__container{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(20px, 4vw, 56px);
}

.featured-news__header{
  margin-bottom:clamp(36px, 5vw, 56px);
  max-width:780px;
}

.featured-news__kicker{
  display:inline-flex;
  align-items:center;
  gap:0.65rem;
  margin-bottom:14px;
  color:#65a30d;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
html.dark .featured-news__kicker{color:#a3e635;}
.featured-news__kicker-line{
  display:inline-block;
  width:28px;
  height:1px;
  background:currentColor;
}

.featured-news__title{
  margin:0 0 0.65rem;
  font-family:var(--font-headline, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size:clamp(2.25rem, 4.2vw, 3.5rem);
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:1.05;
}

.featured-news__subtitle{
  margin:0;
  max-width:60ch;
  font-size:clamp(1rem, 1.4vw, 1.125rem);
  line-height:1.55;
  color:rgba(15, 23, 42, 0.62);
}
html.dark .featured-news__subtitle{color:rgba(255, 255, 255, 0.65);}

.featured-news__list{
  display:flex;
  flex-direction:column;
  gap:clamp(24px, 4vw, 40px);
}

.featured-news__placeholder,
.featured-news__empty{
  margin:0;
  padding:2.5rem 1.5rem;
  border-radius:16px;
  border:1px dashed rgba(15, 23, 42, 0.12);
  background-color:rgba(15, 23, 42, 0.02);
  color:#4b5563;
  text-align:center;
  font-size:0.95rem;
}
html.dark .featured-news__placeholder,
html.dark .featured-news__empty{
  border-color:rgba(255, 255, 255, 0.12);
  background-color:rgba(255, 255, 255, 0.03);
  color:rgba(255, 255, 255, 0.7);
}

.featured-news__footer{
  margin-top:clamp(32px, 5vw, 48px);
  display:flex;
  justify-content:flex-end;
}

.featured-news__more{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.65rem 1.15rem;
  border-radius:9999px;
  border:1px solid rgba(101, 163, 13, 0.32);
  background-color:transparent;
  color:#166534;
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-decoration:none;
  transition:background-color 220ms ease, color 220ms ease, transform 220ms ease;
}
.featured-news__more:hover,
.featured-news__more:focus-visible{
  background-color:rgba(163, 230, 53, 0.12);
  color:#14532d;
  transform:translateX(2px);
}
.featured-news__more:focus-visible{
  outline:2px solid #65a30d;
  outline-offset:4px;
}
html.dark .featured-news__more{
  border-color:rgba(163, 230, 53, 0.35);
  color:#d2ff9a;
}
html.dark .featured-news__more:hover,
html.dark .featured-news__more:focus-visible{
  background-color:rgba(163, 230, 53, 0.16);
  color:#f7ffe2;
}

/* ----------------------- Card (full-width article) -----------------------
   50/50 grid stage. The info panel lives in the left grid cell. The
   cover sits absolutely on top of the right grid cell, but is
   translated LEFT by 100% of its own width on first paint so it
   covers the text panel (left column) until the user scrolls. */
.news-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  align-items:stretch;
  width:100%;
  /* Width capped at 80% of the list container (−20% from the previous
     full-bleed card) and centered so both side gutters stay equal. */
  max-width:80%;
  margin-inline:auto;
  /* Height scaled to 70% of the previous clamp (−30%). */
  min-height:clamp(252px, 35vh, 336px);
  border-radius:20px;
  background-color:rgba(15, 23, 42, 0.025);
  border:1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 40px rgba(15, 23, 42, 0.06);
  overflow:hidden;
  isolation:isolate;
  contain:layout paint;
}
html.dark .news-card{
  background-color:rgba(255, 255, 255, 0.025);
  border-color:rgba(255, 255, 255, 0.08);
  box-shadow:0 20px 48px rgba(0, 0, 0, 0.38);
}

/* TEXT LAYER — left grid column. Always visible (no opacity/blur
   animation). The cover sits on top of it at rest, then slides off to
   the right as the user scrolls, revealing this content underneath.

   `padding-left: clamp(2rem, 4vw, 3.5rem)` keeps the content well
   inside the card so it never looks clipped by the left border. */
.news-card__info{
  position:relative;
  z-index:1;
  grid-column:1;
  display:flex;
  flex-direction:column;
  gap:0.85rem;
  justify-content:center;
  padding:clamp(1.5rem, 3vw, 2.5rem);
  padding-left:clamp(2rem, 4vw, 3.5rem);
}

.news-card__meta{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.65rem 0.85rem;
}

.news-card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  background-color:rgba(163, 230, 53, 0.14);
  color:#65a30d;
  flex-shrink:0;
}
html.dark .news-card__icon{
  background-color:rgba(163, 230, 53, 0.18);
  color:#a3e635;
}

.news-card__tag{
  font-size:0.56rem; /* −20% (was 0.7rem) */
  font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#65a30d;
}
html.dark .news-card__tag{color:#a3e635;}

.news-card__excerpt{
  margin:0;
  font-size:0.704rem; /* −20% (was 0.88rem) */
  line-height:1.55;
  color:#4b5563;
  max-width:44ch;
  overflow-wrap:anywhere;
}
html.dark .news-card__excerpt{color:rgba(255, 255, 255, 0.72);}

.news-card__date{
  font-size:0.576rem; /* −20% (was 0.72rem) */
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(15, 23, 42, 0.55);
  font-variant-numeric:tabular-nums;
  /* Use border-left as a subtle separator from the tag in the meta row. */
  padding-left:0.85rem;
  border-left:1px solid rgba(15, 23, 42, 0.18);
  line-height:1;
}
html.dark .news-card__date{
  color:rgba(255, 255, 255, 0.5);
  border-left-color:rgba(255, 255, 255, 0.18);
}
/* When the tag is missing, drop the visual separator. */
.news-card__meta > .news-card__date:first-of-type:not(:nth-child(n+3)){
  padding-left:0;
  border-left:none;
}

.news-card__title{
  margin:0;
  font-family:var(--font-headline, "Plus Jakarta Sans", system-ui, sans-serif);
  /* −20% on every clamp stop (was clamp(1.15rem, 1.85vw, 1.7rem)). */
  font-size:clamp(0.92rem, 1.48vw, 1.36rem);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.2;
  color:#0b1220;
}
html.dark .news-card__title{color:#f8fafc;}

.news-card__cta{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  align-self:flex-start;
  font-size:0.7rem; /* −20% (was 0.875rem) */
  font-weight:700;
  letter-spacing:0.01em;
  color:#166534;
  text-decoration:none;
  background-image:linear-gradient(currentColor, currentColor);
  background-position:0 100%;
  background-repeat:no-repeat;
  background-size:0 1px;
  transition:background-size 220ms ease, color 220ms ease;
}
.news-card__cta:hover,
.news-card__cta:focus-visible{background-size:100% 1px;}
.news-card__cta:focus-visible{
  outline:2px solid #65a30d;
  outline-offset:4px;
  border-radius:4px;
}
html.dark .news-card__cta{color:#d2ff9a;}

.news-card__cta-arrow{display:inline-block; transition:transform 220ms ease;}
.news-card__cta:hover .news-card__cta-arrow,
.news-card__cta:focus-visible .news-card__cta-arrow{transform:translateX(4px);}

/* COVER LAYER — image panel sized to exactly half the card. Its
   *natural* slot is now the LEFT half (left: 0; right: 50%) so that
   on first paint the cover sits directly over the text panel with
   NO CSS transform required.
   GSAP scrubs xPercent: 0 → 100 to slide it across to the right half,
   revealing the text on the left.

   Why no `transform: translate3d(-100%, 0, 0)` here anymore?
   When the cover's rest position was the right half, a CSS transform
   was needed to shift it leftward into the text-panel slot. But mixing
   that CSS transform with GSAP's `xPercent` can compound (GSAP may
   parse the existing translate3d() as raw `x` in some engines and
   then *add* its own `xPercent`, producing a -200% translation that
   parks the cover off-card to the left). Anchoring the cover to the
   left half via `left:0; right:50%` keeps everything in `xPercent`
   space and removes any chance of doubling. */
.news-card__cover{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:50%;
  z-index:2;
  overflow:hidden;
  background-color:rgba(15, 23, 42, 0.92);
  will-change:transform;
  contain:layout paint;
}

/* Anchor that wraps the cover image. Fills the cover so the entire
   image area is a click target that deep-links into /news#article-N.
   Sits *under* `.news-card__cover-shade` (which has pointer-events:none)
   so the shade overlay never blocks clicks. The image inside keeps its
   existing `width:100%; height:100%; object-fit:cover` sizing. */
.news-card__cover-link{
  position:absolute;
  inset:0;
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  border-radius:inherit;
  /* No default outline; focus ring shown only for keyboard users. */
  outline:none;
}
.news-card__cover-link:focus-visible{
  outline:2px solid #84cc16;
  outline-offset:-3px;
}

.news-card__image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Soft inner shading on the cover so the image edges blend with the card. */
.news-card__cover-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.05) 38%, transparent 70%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.18), transparent 50%);
}

.news-card__cover--empty{
  background:
    linear-gradient(145deg, rgba(46, 255, 168, 0.16), rgba(0, 212, 255, 0.12)),
    #eef2f5;
}

/* Mobile (<=599px): no overlay slide — collapse to a vertical stack
   (image on top, text below). Above 600px (including half-snapped
   browser windows and small-laptop @ Windows display-scaling combos
   that previously fell into the mobile bucket at 100% browser zoom)
   we keep the side-by-side desktop layout so the scrub slide can
   actually run. The JS matchMedia under the matching breakpoint
   (`min-width: 600px`) wires up the scroll-triggered animation. */
@media (max-width: 599px){
  .featured-news{padding:56px 0 72px;}
  .featured-news__header{margin-bottom:28px;}
  .featured-news__list{gap:20px;}

  .news-card{
    display:flex;
    flex-direction:column;
    min-height:0;
    /* Undo the desktop 80% width cap — let the card span the full
       column width in the stacked mobile layout. */
    max-width:none;
    margin-inline:0;
    border-radius:16px;
    contain:layout;
  }
  .news-card__info{
    position:relative;
    inset:auto;
    order:2;
    padding:1.25rem 1.5rem 1.5rem;
    padding-right:1.5rem;   /* reset the desktop padding-right cut-out */
    border-top:1px solid rgba(15, 23, 42, 0.06);
    /* Drop transform + blur — only opacity is scrubbed on mobile. */
    transform:none !important;
    filter:none !important;
    will-change:opacity;
  }
  html.dark .news-card__info{border-top-color:rgba(255, 255, 255, 0.06);}
  .news-card__cover{
    position:relative;
    inset:auto;
    order:1;
    width:100%;
    height:clamp(180px, 42vw, 280px);
    background-color:transparent;
    transform:none !important;
    opacity:1 !important;
    will-change:auto;
  }
}

/* Reduced motion: skip the animation entirely and render the same
   stacked layout as mobile, with the text fully visible from the start. */
@media (prefers-reduced-motion: reduce){
  .news-card{
    display:flex;
    flex-direction:column;
    min-height:0;
    contain:layout;
  }
  .news-card__info{
    position:relative;
    inset:auto;
    order:2;
    padding:1.25rem 1.5rem 1.5rem;
    padding-right:1.5rem;
    border-top:1px solid rgba(15, 23, 42, 0.06);
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    will-change:auto;
  }
  .news-card__cover{
    position:relative;
    inset:auto;
    order:1;
    width:100%;
    height:clamp(180px, 42vw, 280px);
    background-color:transparent;
    transform:none !important;
    opacity:1 !important;
    will-change:auto;
  }
}

/* NEWS SUBPAGE: Single-Track Masked Scroll (exact class names) */
/* NEWS SUBPAGE: native sticky + IntersectionObserver (explicit overrides) */
.news-native{background:#f7f7f7;color:#0b0d10;}
.news-native__layout{
  display:flex;
  gap:2rem;
  align-items:flex-start;
  max-width:1200px;
  margin:0 auto;
  padding:32px 48px 96px;
}
@media (max-width: 900px){
  .news-native__layout{flex-direction:column;padding:24px 20px 72px;}
}

.news-left-nav{
  position:sticky;
  top:100px;
  height:fit-content;
  z-index:10;
  width:300px;
  flex-shrink:0;
  max-height:calc(100vh - 140px);
  overflow:auto;
}
@media (max-width: 900px){.news-left-nav{width:100%;}}

.news-right-frame{
  flex:1;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#ffffff;
  overflow:hidden; /* masks top/bottom borders */
}
.news-scroll-wrapper{
  /* CRITICAL: makes `.news-article` children's `offsetTop` measured
     from THIS wrapper, not from <main> (which is the next positioned
     ancestor and would otherwise contribute its own padding/offset
     to every article's offsetTop). Without this, JS calls like
     `scrollWrapper.scrollTo({ top: article.offsetTop })` overshoot
     by `<main>`'s padding-top, and deep-links land in the wrong
     article (or get clamped to maxScroll). */
  position:relative;
  height:calc(100vh - 120px);
  overflow-y:auto;
  scroll-behavior:smooth;
  padding-right:16px;
}
@media (max-width: 900px){
  .news-scroll-wrapper{height:auto;max-height:none;overflow:visible;padding-right:0;}
  .news-right-frame{overflow:visible;}
}

.news-article{
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:48px 0;
  scroll-margin-top:100px;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  position:relative !important;
  inset:auto !important;
  transition:none !important;
}

.nav-link{display:block;text-decoration:none;color:inherit;}

/* NEWS SUBPAGE: scoped container variables + contrast (no global leakage) */
.news-container{
  color-scheme:light dark;
  --news-bg:#ffffff;
  --news-card:#ffffff;
  --news-border:#e2e8f0;
  --news-text:#0F172A;
  --news-meta:rgba(15,23,42,0.72);
  --news-nav-text:#0F172A; /* required */
}
/* Premium Dark Mode (scoped strictly to news container) */
html[data-theme="dark"] .news-container{
  --news-bg:#0F0F0F;            /* deep neutral charcoal */
  --news-card:#0F0F0F;          /* right column matches page background */
  --news-border:transparent;    /* remove borders for seamless navbar integration */
  --news-text:#FFFFFF;          /* titles/primary */
  --news-meta:#A3A3A3;          /* body/meta soft grey */
  --news-nav-text:#E5E5E5;      /* left nav inactive titles */
  --news-nav-num:#525252;       /* left nav inactive numbers */
  --news-hover-num:#34D399;     /* hover number emerald */
  --news-active-num:#D4FF00;    /* active number vibrant lime */
}

.news-container{
  background:var(--news-bg);
  color:var(--news-text);
}
.news-container .news-native__layout{
  /* default layout padding remains for light mode; dark-mode overrides below */
}
.news-container .news-right-frame{
  background:var(--news-card);
  border-color:var(--news-border);
}

/* Light mode: make right column blend into page */
html.light .news-container .news-right-frame{
  background:transparent !important;
  border:none !important;
}
.news-container .panel__meta{color:var(--news-meta);}
.news-container .panel__sub{color:var(--news-meta);}
.news-container .panel__body{color:var(--news-text);}

/* Left nav must be scrollable with fixed height */
.news-container .news-left-nav{
  overflow-y:auto;
  max-height:calc(100vh - 140px);
}

/* Right column fixed height for accurate scroll tracking */
.news-container .news-scroll-wrapper{
  height:calc(100vh - 100px);
  overflow-y:auto;
}

/* Remove legacy active visuals: no background/border/title transforms */
.news-container .nav-link,
.news-container .nav-link.active{
  background:transparent !important;
  border-left:0 !important;
  transform:none !important;
  font-weight:inherit !important;
  color:var(--news-nav-text) !important;
}

/* Active state targets ONLY the number prefix */
.news-container .nav-link .nav-num{
  color:inherit;
}
.news-container .nav-link.active .nav-num{
  color:#32CD32;
  font-family:"Courier New", monospace;
  font-weight:700;
  font-size:1.15em;
  letter-spacing:0.5px;
}

/* --- News Right Column: inner content breathing room --- */
/* Targets the existing article wrapper and optional alias (`.right-column-content`) */
.news-container .news-article,
.news-container .right-column-content{
  box-sizing:border-box;
  padding-left:2rem;
}

/* --- News Left Nav: strict flex layout (date on one line, spacing via gap) --- */
.news-container .nav-link{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  text-decoration:none;
  padding:0.5rem 1rem;
  box-sizing:border-box;
}
.news-container .nav-date{
  white-space:nowrap; /* CRITICAL: keep "Aug 30, 2025" on one line */
  font-size:0.85em;
  opacity:0.75;
  letter-spacing:0.02em;
}
.news-container .nav-title{
  font-weight:500;
  line-height:1.4;
}

/* Minimize scrollbar visibility (nav + content) */
.news-container .news-left-nav,
.news-container .news-scroll-wrapper{
  scrollbar-width:thin;
  scrollbar-color:rgba(150,150,150,0.2) transparent;
}
.news-container .news-left-nav::-webkit-scrollbar,
.news-container .news-scroll-wrapper::-webkit-scrollbar{width:6px;}
.news-container .news-left-nav::-webkit-scrollbar-thumb,
.news-container .news-scroll-wrapper::-webkit-scrollbar-thumb{
  background:rgba(150,150,150,0.2);
  border-radius:3px;
}
.news-container .news-left-nav::-webkit-scrollbar-track,
.news-container .news-scroll-wrapper::-webkit-scrollbar-track{background:transparent;}

/* ----------------------------- */
/* Premium Dark Mode refinements */
/* ----------------------------- */
html[data-theme="dark"] .news-container{
  background:var(--news-bg);
}

/* Seamless navbar integration: remove top borders/padding/radius/gaps */
html[data-theme="dark"] .news-container .news-native__layout{
  padding-top:0;
  margin-top:0;
}
html[data-theme="dark"] .news-container .news-left-nav,
html[data-theme="dark"] .news-container .news-right-frame{
  padding-top:0;
  margin-top:0;
}
html[data-theme="dark"] .news-container .news-right-frame{
  border:none !important;     /* removes any top borders */
  border-radius:0 !important; /* remove rounded “card” look */
  background:var(--news-card);
}
html[data-theme="dark"] .news-container .news-scroll-wrapper{
  padding-right:16px; /* keep existing gutter */
}

/* Left nav surface: continuous dark, optional subtle tint */
html[data-theme="dark"] .news-container .news-left-nav{
  background:rgba(255,255,255,0.03);
  border:none !important;
  border-radius:0 !important;
  scrollbar-width:none; /* invisible scrollbar */
}
html[data-theme="dark"] .news-container .news-left-nav::-webkit-scrollbar{width:0;height:0;}

/* Right content typography for premium charcoal */
html[data-theme="dark"] .news-container .panel__h{color:#FFFFFF;}
html[data-theme="dark"] .news-container .panel__body,
html[data-theme="dark"] .news-container .panel__body p{color:#A3A3A3;}
html[data-theme="dark"] .news-container .panel__meta,
html[data-theme="dark"] .news-container .panel__sub{color:#A3A3A3;}

/* Left nav text contrast + states (titles unchanged; active affects number + bold title) */
html[data-theme="dark"] .news-container .nav-link{
  color:var(--news-nav-text) !important;
}
html[data-theme="dark"] .news-container .nav-link .nav-num{
  color:var(--news-nav-num);
  transition:color 160ms ease;
}
html[data-theme="dark"] .news-container .nav-link:hover .nav-num{color:var(--news-hover-num);}
html[data-theme="dark"] .news-container .nav-link:hover .left-nav__title{color:#FFFFFF;}

html[data-theme="dark"] .news-container .nav-link.active .nav-num{
  color:var(--news-active-num);
  font-family:"Courier New", monospace;
  font-weight:800;
  font-size:1.15em;
  letter-spacing:0.5px;
}
html[data-theme="dark"] .news-container .nav-link.active .left-nav__title{
  color:#FFFFFF;
  font-weight:700;
}

/* NEWS PAGE (Blog layout) */
.blog-page{display:grid;grid-template-columns:220px 1fr;gap:32px;max-width:1200px;margin:0 auto;padding:48px 20px 96px;}
@media (max-width: 900px){.blog-page{grid-template-columns:1fr;padding:28px 16px 72px;}}
.blog-nav{position:sticky;top:110px;align-self:start;}
@media (max-width: 900px){.blog-nav{position:relative;top:auto;}}
.blog-nav__brand{display:inline-block;font-weight:950;letter-spacing:-0.02em;color:rgba(237,238,237,0.92);text-decoration:none;margin-bottom:10px;}
html.light .blog-nav__brand{color:#0b0d10;}
.blog-nav__menu{display:flex;flex-direction:column;gap:10px;font-size:13px;}
.blog-nav__menu a{text-decoration:none;color:rgba(237,238,237,0.65);font-weight:800;letter-spacing:0.06em;text-transform:uppercase;}
html.light .blog-nav__menu a{color:rgba(11,13,16,0.60);}
.blog-nav__menu a:hover{color:var(--a2);}
html.light .blog-nav__menu a:hover{color:#0ea5e9;}
.blog-content{width:100%;}
.blog-header{max-width:900px;margin:0 auto 26px;}
.blog-kicker{font-size:12px;font-weight:900;letter-spacing:0.16em;text-transform:uppercase;color:rgba(237,238,237,0.45);margin-bottom:10px;}
html.light .blog-kicker{color:rgba(11,13,16,0.45);}
.blog-title{font-size:clamp(2rem, 3.6vw, 3.1rem);font-weight:950;letter-spacing:-0.04em;margin-bottom:10px;}
.blog-subtitle{max-width:70ch;line-height:1.75;color:rgba(237,238,237,0.70);}
html.light .blog-subtitle{color:rgba(11,13,16,0.65);}
.blog-stream{max-width:900px;margin:0 auto;}
.blog-post{padding:26px 0;}
.blog-post__tag{display:inline-block;font-size:11px;font-weight:950;letter-spacing:0.14em;text-transform:uppercase;color:var(--a2);margin-bottom:12px;}
html.light .blog-post__tag{color:#0ea5e9;}
.blog-post__title{font-size:clamp(1.55rem, 2.2vw, 2.05rem);font-weight:950;letter-spacing:-0.03em;margin-bottom:10px;}
.blog-post__meta{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.blog-post__subtitle{font-size:1rem;line-height:1.7;color:rgba(237,238,237,0.72);}
html.light .blog-post__subtitle{color:rgba(11,13,16,0.65);}
.blog-post__date{font-size:12px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:rgba(237,238,237,0.45);}
html.light .blog-post__date{color:rgba(11,13,16,0.45);}
.blog-post__figure{margin:0 0 18px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,0.10);}
html.light .blog-post__figure{border:1px solid rgba(11,13,16,0.10);}
.blog-post__img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;}
.blog-post__body{line-height:1.85;font-size:16px;color:rgba(237,238,237,0.78);}
html.light .blog-post__body{color:rgba(11,13,16,0.78);}
.blog-post__body p{margin-bottom:14px;}
.blog-post__body p:last-child{margin-bottom:0;}
.blog-divider{border:none;height:1px;background:rgba(255,255,255,0.10);margin:26px 0 0;}
html.light .blog-divider{background:rgba(11,13,16,0.10);}

/* NEWS PAGE: TOC + anchored entries (scoped) */
.news-page-container{scroll-behavior:smooth;}
.news-page-container.blog-page{grid-template-columns:280px 1fr;gap:3rem;padding:2rem;}
@media (max-width: 768px){.news-page-container.blog-page{grid-template-columns:1fr;}}
.news-page-container .blog-nav{
  position:sticky;
  top:100px;
  align-self:start;
  height:fit-content;
  max-height:calc(100vh - 140px);
  overflow:auto;
}
.news-page-container .blog-post{scroll-margin-top:120px;padding-bottom:3rem;}
.news-page-container .blog-divider{margin-top:3rem;}

.news-toc__title{font-size:12px;font-weight:900;letter-spacing:0.16em;text-transform:uppercase;color:rgba(237,238,237,0.45);margin-bottom:12px;}
html.light .news-toc__title{color:rgba(11,13,16,0.45);}
.news-toc__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:13px;}
.news-toc__list a{text-decoration:none;color:rgba(237,238,237,0.65);font-weight:800;letter-spacing:0.06em;text-transform:uppercase;}
html.light .news-toc__list a{color:rgba(11,13,16,0.60);}
.news-toc__list a:hover{color:var(--a2);}
html.light .news-toc__list a:hover{color:#0ea5e9;}

.news-toc__mobile{display:none;margin-top:10px;}
.news-toc__summary{cursor:pointer;font-size:13px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:rgba(237,238,237,0.72);list-style:none;}
html.light .news-toc__summary{color:rgba(11,13,16,0.70);}
.news-toc__panel{margin-top:12px;}
@media (max-width: 768px){
  .news-toc__desktop{display:none;}
  .news-toc__mobile{display:block;}
  .news-page-container .blog-nav{position:static;top:auto;margin-bottom:2rem;}
}
.blog-top{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,0.14);background:rgba(17,30,23,0.7);color:rgba(237,238,237,0.92);display:inline-flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity 200ms ease, transform 200ms ease;z-index:60;}
html.light .blog-top{background:rgba(255,255,255,0.85);border:1px solid rgba(11,13,16,0.12);color:#0b0d10;}
.blog-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.news-item__more{
  max-height:0;
  overflow:hidden;
  transition:max-height 400ms ease;
  color:var(--section-text-muted);
  font-size:15px;
  line-height:1.7;
  max-width:62ch;
}
.news-item__more.is-open{max-height:300px;}
.news-item__bottom{
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.news-item__date{
  font-size:12px;
  color:var(--section-text-muted);
  letter-spacing:0.02em;
  font-variant-numeric:tabular-nums;
}
.news-item__btn{
  background:transparent;
  border:1px solid var(--section-border);
  color:var(--section-text);
  font-size:13px;
  padding:8px 20px;
  border-radius:999px;
  cursor:pointer;
}
@media (prefers-reduced-motion: no-preference){
  .news-item__btn{transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease;}
  .news-item__btn:hover{background:var(--section-text);color:var(--section-bg);}
}

/* Tablet (768–1024px) */
@media (max-width: 1024px){
  .news-split__inner{grid-template-columns:42fr 1px 58fr;}
  .news-split__left{top:calc(50vh - 180px);height:360px;}
}

/* Mobile (<768px): stack layout, inline images per item */
@media (max-width: 767px){
  .news-split{padding:56px 0;}
  .news-split__header{padding:0 24px;}
  .news-split__inner{
    padding:0 24px;
    grid-template-columns:1fr;
    gap:24px;
  }
  .news-split__left{position:relative;top:auto;height:auto;display:none;}
  .news-split__divider{display:none;}
  .news-split__right{padding:0;}
  .news-item{
    min-height:auto;
    padding:28px 0;
    opacity:1;
  }
  .news-item__img{
    display:block;
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:16px;
    margin-bottom:18px;
  }
}

@media (prefers-reduced-motion: reduce){
  .news-img{transition:none;}
  .news-item{transition:none;opacity:1 !important;}
}
/* ===== News parallax pinning layout (Sanity.io mechanic) ===== */
.news-scroll-section{
  position:relative;
  /* JS sets --item-count and --news-frame-h based on viewport/nav */
  height:calc(var(--news-frame-h) * (var(--item-count, 3) + 1));
}
.news-sticky-frame{
  position:sticky;
  top:var(--news-sticky-top);
  height:var(--news-frame-h);
  overflow:hidden; /* clip window */
  display:flex;
  max-width:1200px;
  margin:0 auto;
  border-top:1px solid var(--section-border);
  border-bottom:1px solid var(--section-border);
  background:var(--section-bg);
}
.news-sticky-frame.is-pinned::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:80px;
  background:linear-gradient(to bottom, transparent, var(--section-bg));
  pointer-events:none;
}
.news-col{height:100%;display:flex;flex-direction:column;}
.news-col--left{
  width:220px;
  border-right:1px solid var(--section-border);
  padding-right:40px;
  padding-left:40px;
  justify-content:center;
}
.news-left-inner{display:flex;flex-direction:column;gap:22px;}
.news-left-label{
  font-weight:900;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:var(--section-nav-inactive);
  transform:rotate(-90deg);
  transform-origin:left top;
  width:0;
  white-space:nowrap;
}
.news-left-nums{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
.news-left-num{font-weight:900;letter-spacing:0.08em;color:var(--section-nav-inactive);opacity:0.8;}
.news-left-num.is-active{color:var(--section-text);opacity:1;}

.news-col--middle{
  flex:1;
  padding:0 48px;
  display:flex;
  justify-content:flex-start;
}
.news-middle-inner{
  width:100%;
  max-width:560px;
  will-change:transform;
}
.news-item{
  height:var(--news-frame-h);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0;
}
.news-item-kicker{
  display:inline-flex;
  align-items:center;
  font-size:0.72rem;
  font-weight:900;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--section-nav-inactive);
  margin-bottom:14px;
}
.news-item-headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;}
.news-item-h{color:var(--section-text);font-weight:900;letter-spacing:-0.03em;font-size:clamp(1.35rem,2.1vw,2rem);line-height:1.1;}
.news-item-metric{color:var(--section-accent);font-weight:900;letter-spacing:-0.03em;font-size:clamp(1.05rem,1.4vw,1.25rem);white-space:nowrap;}
.news-item-body{margin-top:14px;color:var(--section-nav-hover);line-height:1.75;}
.news-item-bullets{margin-top:14px;padding-left:18px;color:var(--section-nav-hover);line-height:1.7;}
.news-item-bullets li{margin:6px 0;}
.news-item-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:18px;
  padding:10px 14px;
  border-radius:9999px;
  border:1px solid var(--section-nav-active);
  color:var(--section-text);
  text-decoration:none;
}
@media (prefers-reduced-motion: no-preference){
  .news-item-cta{transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease;}
  .news-item-cta:hover{background:var(--section-nav-active);color:var(--section-bg);}
}

.news-col--right{
  width:320px;
  border-left:1px solid var(--section-border);
  padding-left:40px;
  padding-right:40px;
  justify-content:center;
}
.news-right-nav{display:flex;flex-direction:column;gap:10px;}
.news-nav-item{
  all:unset;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 10px 10px 12px;
  color:var(--section-nav-inactive);
  border-left:2px solid transparent;
}
.news-nav-item:focus-visible{outline:2px solid var(--section-accent);outline-offset:4px;border-left-color:var(--section-accent);}
.news-nav-item.is-active{color:var(--section-text);border-left-color:var(--section-accent);}
.news-nav-num{font-weight:900;letter-spacing:0.08em;font-size:0.78rem;opacity:0.9;min-width:34px;}
.news-nav-title{font-weight:800;letter-spacing:-0.01em;font-size:0.95rem;line-height:1.2;}

/* Text styles */
.news-sanity-kicker{display:inline-flex;align-items:center;font-size:0.72rem;font-weight:900;letter-spacing:0.2em;text-transform:uppercase;color:var(--section-nav-inactive);margin-bottom:14px;}
.news-sanity-headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;}
.news-sanity-h{color:var(--section-text);font-weight:900;letter-spacing:-0.03em;font-size:clamp(1.35rem,2.1vw,2rem);line-height:1.1;}
.news-sanity-metric{color:var(--section-accent);font-weight:900;letter-spacing:-0.03em;font-size:clamp(1.05rem,1.4vw,1.25rem);white-space:nowrap;}
.news-sanity-body{margin-top:14px;color:var(--section-nav-hover);line-height:1.75;}
.news-sanity-bullets{margin-top:14px;padding-left:18px;color:var(--section-nav-hover);line-height:1.7;}
.news-sanity-bullets li{margin:6px 0;}

/* CTA button (exact spec) */
.news-sanity-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;padding:10px 14px;border-radius:9999px;border:1px solid var(--section-nav-active);color:var(--section-text);text-decoration:none;}
@media (prefers-reduced-motion: no-preference){
  .news-sanity-cta{transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease;}
  .news-sanity-cta:hover{background:var(--section-nav-active);color:var(--section-bg);}
}

/* Visual cards */
.news-sanity-card{background:var(--section-card-bg);border:1px solid var(--section-border);border-radius:12px;padding:24px;}
html.dark .news-sanity-card{box-shadow:0 0 0 1px var(--section-border);}
.news-sanity-card-header{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.news-sanity-dot{width:8px;height:8px;border-radius:9999px;background:var(--section-border);}
.news-sanity-microtitle{color:var(--section-text);font-weight:900;letter-spacing:-0.02em;margin-bottom:14px;}
.news-sanity-caption{margin-top:14px;color:var(--section-nav-inactive);line-height:1.65;font-size:0.9rem;}
.news-sanity-bars{display:flex;flex-direction:column;gap:10px;}
.news-sanity-bar{display:block;height:10px;border-radius:9999px;border:1px solid var(--section-border);background:transparent;position:relative;overflow:hidden;}
.news-sanity-bar::after{content:'';position:absolute;inset:0;width:var(--w,60%);background:var(--section-accent);opacity:0.22;}
.news-sanity-pill{font-weight:900;font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;padding:8px 10px;border-radius:9999px;border:1px solid var(--section-border);color:var(--section-text);}
.news-sanity-steps{display:flex;flex-direction:column;gap:12px;}
.news-sanity-step{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--section-border);}
.news-sanity-stepnum{width:24px;height:24px;border-radius:9999px;display:flex;align-items:center;justify-content:center;border:1px solid var(--section-border);color:var(--section-text);font-weight:900;font-size:0.8rem;}
.news-sanity-steplabel{color:var(--section-nav-hover);font-weight:700;}
.news-sanity-code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:0.9rem;line-height:1.7;color:var(--section-text);}
.news-sanity-code-line{padding:6px 0;border-bottom:1px dashed var(--section-border);}
.news-sanity-code-line:last-child{border-bottom:none;}
.news-sanity-code-dim{color:var(--section-nav-inactive);}
.news-sanity-code-strong{color:var(--section-text);font-weight:800;}

/* Panel entrance/exit sequencing */
.panel-text{opacity:0;}
.panel-text.panel-active{opacity:1;}
.panel-text.panel-exit{opacity:0;}
@media (prefers-reduced-motion: no-preference){
  .panel-text{transition:opacity 200ms ease,transform 200ms ease;transform:translateY(-8px);}
  .panel-text.panel-active{transform:translateY(0);}

  .panel-text > .news-sanity-kicker{opacity:0;transform:translateY(8px);transition:opacity 300ms ease-out,transform 300ms ease-out;}
  .panel-text > .news-sanity-headrow{opacity:0;transform:translateY(16px);transition:opacity 400ms ease-out 60ms,transform 400ms ease-out 60ms;}
  .panel-text > .news-sanity-body{opacity:0;transition:opacity 350ms ease-out 140ms;}
  .panel-text > .news-sanity-bullets li{opacity:0;transform:translateX(-8px);transition:opacity 300ms ease-out,transform 300ms ease-out;}
  .panel-text > .news-sanity-cta{opacity:0;transition:opacity 300ms ease-out;}

  .panel-text.panel-active > .news-sanity-kicker{opacity:1;transform:translateY(0);}
  .panel-text.panel-active > .news-sanity-headrow{opacity:1;transform:translateY(0);}
  .panel-text.panel-active > .news-sanity-body{opacity:1;}
  .panel-text.panel-active > .news-sanity-bullets li{opacity:1;transform:translateX(0);}
  .panel-text.panel-active > .news-sanity-bullets li:nth-child(1){transition-delay:200ms;}
  .panel-text.panel-active > .news-sanity-bullets li:nth-child(2){transition-delay:260ms;}
  .panel-text.panel-active > .news-sanity-bullets li:nth-child(3){transition-delay:320ms;}
  .panel-text.panel-active > .news-sanity-bullets li:nth-child(4){transition-delay:380ms;}
  .panel-text.panel-active > .news-sanity-cta{opacity:1;transition-delay:440ms;}

  /* Inactive reverse (200ms ease-in, up) */
  .panel-text.panel-exit > .news-sanity-kicker,
  .panel-text.panel-exit > .news-sanity-headrow{opacity:0;transform:translateY(-8px);transition:opacity 200ms ease-in,transform 200ms ease-in;}
  .panel-text.panel-exit > .news-sanity-body,
  .panel-text.panel-exit > .news-sanity-bullets li,
  .panel-text.panel-exit > .news-sanity-cta{opacity:0;transition:opacity 200ms ease-in;}
}

/* Tablet/mobile: keep your existing "tab bar" feel */
@media (max-width: 1024px){
  .news-sanity-wrap{padding:0 24px;}
  .news-col--left{display:none;}
  .news-col--right{width:240px;padding-left:24px;padding-right:24px;}
  .news-col--middle{padding:0 24px;}
  .news-sticky-frame{max-width:100%;}
}
@media (max-width: 767px){
  /* Disable the parallax pin mechanic on mobile */
  .news-scroll-section{height:auto;}
  .news-sticky-frame{position:relative;top:auto;height:auto;overflow:visible;display:block;border:none;background:transparent;}
  .news-col--right{display:none;}
  .news-col--middle{padding:0;}
  .news-middle-inner{max-width:none;transform:none !important;}
  .news-item{height:auto;justify-content:flex-start;padding:24px 0;border-top:1px solid var(--section-border);}
  .news-item:first-child{border-top:none;}
}

@media (prefers-reduced-motion: reduce){
  .news-middle-inner{transform:none !important;}
  .news-scroll-section{height:auto;}
  .news-sticky-frame{position:relative;top:auto;height:auto;overflow:visible;}
}

/* HERO STAGE: pin to viewport; spacer drives scroll animation */
#stage{position:fixed;left:0;top:0;width:100%;height:100vh;overflow:hidden;perspective:1400px;pointer-events:none;z-index:1;}
#glow{position:absolute;right:10%;top:50%;transform:translateY(-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(46,255,168,0.05) 0%,transparent 68%);pointer-events:none;}
#hero-blob{position:absolute;left:calc(56% + 50px);top:calc(46% + 50px);transform:translate(-50%,-50%);width:min(780px,92vw);height:min(780px,92vw);border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(14,165,164,0.18) 0%,rgba(22,163,74,0.12) 38%,transparent 70%);filter:blur(42px);opacity:0.9;pointer-events:none;}
#hero-text{
  position:absolute;
  top:calc(50% + 48px);
  left:var(--hero-inline-pad);
  transform:translateY(-50%);
  width:min(var(--hero-text-max), calc(100vw - (var(--hero-inline-pad) * 2)));
  max-width:none;
  z-index:30;
  pointer-events:none;
}
.eyebrow{font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:currentColor;opacity:0.85;margin-bottom:1.1rem;}
#hero-text h1{
  /* Fluid headline scale with hard min/max so large screens do not look undersized */
  font-size:var(--hero-heading-size);
  font-weight:800;
  line-height:1.06;
  color:var(--text);
  letter-spacing:-0.03em;
}
#hero-text h1 em{font-style:normal;background:linear-gradient(110deg,var(--a1),var(--a2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#hero-text p{
  /* Subheading spacing and size scale smoothly, capped for readability */
  margin-top:var(--hero-body-space);
  font-size:var(--hero-body-size);
  color:var(--muted);
  line-height:1.75;
  max-width:min(42ch, calc(var(--hero-text-max) - clamp(1.5rem, 4vw, 4rem)));
}
#who-title{position:absolute;top:18vh;left:50%;transform:translate(-50%,-50%);max-width:720px;pointer-events:none;z-index:25;opacity:1;transition:none;}
#who-title h2{font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:900;letter-spacing:-0.04em;color:var(--text);line-height:1.1;text-align:center;}
#scroll-hint{position:absolute;bottom:32px;left:7vw;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;opacity:0;animation:fadeHint 0.8s 1.2s forwards;pointer-events:none;z-index:12;}
@keyframes fadeHint{to{opacity:0.45;}}
.hint-bar{width:28px;height:1px;background:var(--muted);animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scaleX(1);opacity:.45;}50%{transform:scaleX(1.6);opacity:.9;}}
.card-wrap{
  position:absolute;
  left:0;
  top:0;
  /* Cards keep original aspect ratio while scaling with viewport width */
  width:var(--hero-card-w);
  height:var(--hero-card-h);
  aspect-ratio:300/182;
  transform-style:preserve-3d;
  cursor:pointer;
  pointer-events:auto;
  z-index:10;
  /* Scroll path + flip: compositor-only (set from rAF via translate3d) */
  will-change:transform;
  contain:layout style;
}
/* Idle float: separate layer so sin motion never touches left/top */
.card-float{
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transform:translate3d(0,0,0);
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  @media (min-width: 1024px){
    .card-wrap,
    .card-float{
      will-change:auto;
    }
    .card-float{
      transform:translate3d(0,0,0) !important;
    }
  }
}

/* Mobile/tablet: static hero (no animation) */
@media (max-width: 1023px){
  #spacer{height:1px;}
  #stage{
    position:relative;
    height:auto;
    perspective:none;
    pointer-events:auto;
    padding:162px 0 40px;
  }
  #glow,#hero-blob,#scroll-hint{display:none;}
  #hero-text{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    transform:none;
    max-width:none;
    padding:0 6vw;
    margin:40px auto 22px;
    z-index:1;
  }
  #hero-mobile-who{display:none !important;}
  #who-title{
    display:block;
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    max-width:none;
    padding:0 6vw;
    margin:20px auto 24px;
    z-index:1;
    opacity:1;
  }
  #who-title h2{text-align:left;}
  .card-wrap{
    position:relative;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    opacity:1 !important;
    width:min(92vw, 360px) !important;
    height:auto !important;
    margin:var(--hero-card-stack-gap) auto;
    will-change:auto;
    contain:none;
  }
  .card-float{
    animation:none !important;
    transform:none !important;
    will-change:auto;
  }
  .mobile-who-label{
    display:block !important;
    margin:0 auto 12px;
    padding:0 2px;
    font-size:0.72rem;
    font-weight:900;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:rgba(46,255,168,0.85);
  }
  .face{position:relative;transform:none !important;}
  /* Show the "built for" faces on mobile/tablet */
  .front{display:none;}
  .back{display:block;transform:none !important;}
}

@media (max-width: 639px){
  #hero-text h1{font-size:clamp(1.75rem,7.6vw,2.25rem);line-height:1.05;}
  #hero-text p{font-size:0.95rem;}
}
.face{position:absolute;inset:0;border-radius:var(--hero-card-radius);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;}
.front{background:var(--surface);border:1px solid var(--border2);padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;}
.front::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);}
.front-row{display:flex;justify-content:space-around;align-items:flex-start;}
.fc-label{font-size:0.55rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--muted);}
.fc-icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;}
.fc-id{font-size:0.58rem;color:#1d3826;letter-spacing:0.05em;}
.fc-dots{display:flex;gap:3px;}
.fc-dot{width:4px;height:4px;border-radius:50%;background:var(--border2);opacity:.45;}
.back{background:var(--surface2);border:1px solid var(--border);transform:rotateY(180deg);padding:24px 26px;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;position:relative;}
.back::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:var(--hero-card-radius) var(--hero-card-radius) 0 0;}
.back-row{display:flex;align-items:center;gap:10px;}
.back-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.back h3{font-size:1.06rem;font-weight:800;color:var(--text);letter-spacing:-0.01em;}
.back p{margin-top:5px;font-size:0.86rem;color:var(--muted);line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.7em * 3);}
.back-link{font-size:0.56rem;font-weight:500;letter-spacing:0.1em;text-decoration:none;text-transform:uppercase;}
.back-link::after{content:' →';}
.hero-scroller-bg{
  background:#0c0f0f;
  min-height:1px;
  /* Mobile-first fluid tokens with desktop caps to prevent ultrawide overflow */
  --hero-inline-pad:clamp(1rem,3.5vw,7vw);
  --hero-text-max:clamp(18rem,33vw,34rem);
  --hero-heading-size:clamp(1.9rem,1.1rem + 4.2vw,5rem);
  --hero-body-size:clamp(0.94rem,0.86rem + 0.3vw,1.12rem);
  --hero-body-space:clamp(0.9rem,0.45rem + 1vw,1.4rem);
  --hero-card-w:clamp(260px,13.5vw + 145px,340px);
  --hero-card-h:calc(var(--hero-card-w) * (182 / 300));
  --hero-card-radius:clamp(12px,0.7vw + 8px,16px);
  --hero-card-stack-gap:clamp(0.75rem,2.2vw,1rem);
}

/* HERO IMAGE CARDS (front face) */
#c0 .front, #c1 .front, #c2 .front{padding:0;}
.hero-card-img{width:100%;height:100%;aspect-ratio:300/182;object-fit:cover;display:block;filter:saturate(1.08) contrast(1.05);}

/* MOBILE FLOATING HERO CARDS — stacked vertically next to the eyebrow,
   mirroring the desktop scattered-stack composition. Hidden ≥769px;
   visible ≤768px only. Each card is offset horizontally for depth. */
.hero-mobile-cards{display:none;}

@media (max-width:768px){
  .hero-mobile-cards{
    display:block;
    position:absolute;
    top:-6px;
    right:clamp(28px,10vw,56px);
    width:clamp(91px,24.5vw,120px);
    pointer-events:none;
    z-index:1;
  }
  .hero-mobile-card{
    position:relative;
    width:100%;
    aspect-ratio:300/182;
    border-radius:clamp(5px,1.2vw,10px);
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,0.4);
    border:1px solid rgba(255,255,255,0.1);
    will-change:transform;
  }
  .hero-mobile-card+.hero-mobile-card{margin-top:-40%;}
  .hero-mobile-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:saturate(1.08) contrast(1.05);
  }
  .hero-mobile-card--0{left:0;     z-index:3;animation:heroMBob0 3s ease-in-out infinite;}
  .hero-mobile-card--1{left:18%;  z-index:2;animation:heroMBob1 3s ease-in-out 0.4s infinite;}
  .hero-mobile-card--2{left:36%;  z-index:1;animation:heroMBob2 3s ease-in-out 0.8s infinite;}
}
@keyframes heroMBob0{
  0%,100%{transform:rotate(-20deg) translateY(0);}
  50%{transform:rotate(-20deg) translateY(-5px);}
}
@keyframes heroMBob1{
  0%,100%{transform:rotate(-12deg) translateY(0);}
  50%{transform:rotate(-12deg) translateY(-5px);}
}
@keyframes heroMBob2{
  0%,100%{transform:rotate(-2deg) translateY(0);}
  50%{transform:rotate(-2deg) translateY(-5px);}
}
html.light .hero-mobile-card{
  box-shadow:0 4px 14px rgba(15,23,42,0.14);
  border-color:rgba(0,0,0,0.08);
}
@media (prefers-reduced-motion:reduce){
  .hero-mobile-card{animation:none !important;}
}

@media (min-width: 1024px) and (max-width: 1500px), (min-width: 1024px) and (max-height: 900px){
  /* Laptop-size desktops: trim hero scale so the full composition fits one screen */
  .hero-scroller-bg{
    --hero-inline-pad:clamp(0.9rem,2.6vw,5vw);
    --hero-text-max:clamp(17rem,30vw,29rem);
    --hero-heading-size:clamp(1.75rem,0.9rem + 3.15vw,4rem);
    --hero-body-size:clamp(0.9rem,0.84rem + 0.25vw,1.02rem);
    --hero-body-space:clamp(0.75rem,0.35rem + 0.7vw,1.05rem);
    /* Keep cards clearly rectangular on 14" screens (avoid over-narrow look) */
    --hero-card-w:clamp(248px,11vw + 128px,308px);
  }
}

@media (min-width: 1600px){
  /* Freeze scale at very wide viewports to keep hero composition stable */
  .hero-scroller-bg{
    --hero-inline-pad:clamp(2rem,5vw,7rem);
    --hero-text-max:34rem;
    --hero-card-w:340px;
  }
}
.hero-card-badge{
  position:absolute;
  left:14px;
  top:14px;
  padding:6px 10px;
  border-radius:9999px;
  font-size:0.62rem;
  font-weight:900;
  letter-spacing:0.12em;
  text-transform:uppercase;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.hero-card-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%);
  pointer-events:none;
}

/* ABOUT: 3D infinite coverflow carousel */
.about-coverflow{
  position:relative;
  width:288px;
  height:288px;
  perspective:1100px;
  transform:translateX(-45%);
  transform-style:preserve-3d;
  border-radius:22px;
  overflow:visible;
}
.about-coverflow::after{
  content:'';
  position:absolute;
  inset:-26px -22px -34px;
  background:radial-gradient(circle at 50% 40%, rgba(46,255,168,0.18) 0%, rgba(0,212,255,0.10) 35%, transparent 75%);
  filter:blur(20px);
  opacity:0.9;
  z-index:0;
  pointer-events:none;
}
.about-coverflow-track{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  z-index:1;
}
.about-coverflow-slide{
  position:absolute;
  top:50%;
  left:50%;
  width:307px;
  height:230px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
  transform-style:preserve-3d;
  transform:translate(-50%,-50%);
  transition:transform 520ms cubic-bezier(.2,.8,.2,1), opacity 520ms cubic-bezier(.2,.8,.2,1), filter 520ms cubic-bezier(.2,.8,.2,1);
  background:rgba(17,30,23,0.75);
}
.about-coverflow-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:translateZ(0);
  filter:saturate(1.08) contrast(1.06);
}
.about-coverflow-slide::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}
.about-coverflow-caption{
  position:absolute;
  left:12px;
  bottom:10px;
  font-size:0.62rem;
  font-weight:900;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.9);
  z-index:2;
  text-shadow:0 8px 22px rgba(0,0,0,0.65);
}
@media (max-width: 480px){
  .about-coverflow{width:min(74vw, 288px);height:min(74vw, 288px);}
  .about-coverflow-slide{width:min(62vw, 256px);height:min(46vw, 192px);}
}

/* MOBILE HERO + "WHO IT'S BUILT FOR": static (no animations), near top */
@media (max-width: 640px){
  /* Remove the scroll runway on mobile */
  #spacer{height:0;}

  /* Unpin stage so it flows naturally */
  #stage{
    position:relative;
    height:auto;
    min-height:calc(100vh - 64px);
    padding:96px 0 56px; /* account for fixed nav */
    overflow:visible;
    pointer-events:auto;
  }

  #glow{
    right:50%;
    top:120px;
    transform:translateX(50%);
    width:420px;
    height:420px;
  }

  #hero-text{
    position:relative;
    inset:auto;
    left:auto;
    top:auto;
    transform:none;
    margin:0 auto;
    max-width:min(560px, 92vw);
    padding:0 8px;
    z-index:2;
    pointer-events:auto;
  }
  #hero-text p{max-width:none;}

  #aud-label{
    position:relative;
    inset:auto;
    left:auto;
    top:auto;
    transform:none;
    margin:26px auto 10px;
    opacity:1 !important;
    z-index:2;
  }

  #who-title{
    position:relative;
    inset:auto;
    left:auto;
    top:auto;
    transform:none !important;
    margin:0 auto 10px;
    max-width:min(560px, 92vw);
    opacity:1 !important;
    z-index:2;
  }

  /* Cards: static stacked, show the "back" content only */
  .card-wrap{
    position:relative;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    opacity:1 !important;
    width:min(92vw, 380px) !important;
    height:auto !important;
    margin:var(--hero-card-stack-gap) auto;
    z-index:2;
  }
  .face{position:relative;transform:none !important;}
  .front{display:none;}
  .back{display:flex;transform:none !important;}
}

/* LIGHT THEME (dedicated palette + scoped overrides; Dark Theme untouched) */
html.light{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --surface2:#f2f4f8;
  --surface3:#e9edf5;
  --border:#d7ddea;
  --border2:#c6cede;
  --text:#0b1220;
  --muted:#334155;
  --muted2:#64748b;
  --shadow:0 18px 60px rgba(15,23,42,0.10);
  --shadow2:0 10px 28px rgba(15,23,42,0.12);

  /* Brand accents for Light Theme (green-first, distinct from Dark) */
  --primary:#16a34a;
  --on-primary:#ffffff;
  --secondary:#0ea5a4;      /* teal */
  --tertiary:#84cc16;       /* lime */
  --on-surface-variant:var(--muted2);
}

/* Page base */
html.light body{background:var(--bg) !important;color:var(--text) !important;}
html.light .hero-scroller-bg,
html.light .bg-background{background-color:var(--bg) !important;}
html.light section{background-color:transparent;}
html.light section[style*="background:#0c0f0f"],
html.light section[style*="background: #0c0f0f"]{background-color:var(--bg) !important;}

/* Text utilities (ensure contrast everywhere) */
html.light .text-on-surface{color:var(--text) !important;}
html.light .text-on-surface-variant{color:var(--muted) !important;}
html.light .text-on-background{color:var(--text) !important;}
html.light main .text-white{color:var(--text) !important;}
html.light main .text-zinc-400{color:var(--muted) !important;}
html.light main .text-zinc-500{color:var(--muted2) !important;}

/* Tailwind color utilities from config (override only in Light Theme) */
html.light .bg-primary{background-color:var(--primary) !important;}
html.light .text-on-primary{color:var(--on-primary) !important;}
html.light .text-primary{color:var(--primary) !important;}
html.light .text-secondary{color:var(--secondary) !important;}

html.light .bg-surface-container{background-color:var(--surface) !important;}
html.light .bg-surface-container-low{background-color:var(--surface2) !important;}
html.light .bg-surface-container-high{background-color:var(--surface3) !important;}

/* Navigation */
html.light nav{
  background:rgba(246,247,251,0.88) !important;
  border-bottom:1px solid var(--border) !important;
  box-shadow:0 10px 30px rgba(15,23,42,0.08);
}
html.light nav .text-lime-400{color:var(--primary) !important;}
html.light nav a.text-zinc-400{color:var(--muted) !important;}
html.light nav a.text-zinc-400:hover{color:var(--text) !important;}
html.light nav img{filter:drop-shadow(0 1px 0 rgba(255,255,255,0.9)) drop-shadow(0 10px 18px rgba(15,23,42,0.10));}
html.light .theme-toggle{
  background:rgba(15,23,42,0.04) !important;
  border-color:var(--border) !important;
  color:var(--muted) !important;
}
html.light .theme-toggle:hover{
  background:rgba(22,163,74,0.10) !important;
  border-color:rgba(22,163,74,0.28) !important;
  color:var(--primary) !important;
}

/* Cards / glass surfaces */
html.light .glass-card{
  background:rgba(255,255,255,0.85) !important;
  border-color:rgba(215,221,234,0.9) !important;
  box-shadow:var(--shadow2);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
html.light .service-card{box-shadow:var(--shadow2);}
html.light .service-card:hover{box-shadow:var(--shadow);}

/* Hero 3D cards */
html.light #stage{background:transparent;}
html.light .front{
  border-color:var(--border2) !important;
  box-shadow:0 14px 42px rgba(15,23,42,0.12);
}
html.light .back{
  background:var(--surface2) !important;
  border-color:var(--border) !important;
  box-shadow:0 12px 36px rgba(15,23,42,0.10);
}
/* Hero card fronts: yellow → green gradient while keeping readable surfaces */
html.light #c0 .front{background:linear-gradient(135deg,rgba(250,204,21,0.34),rgba(22,163,74,0.18)), var(--surface) !important;}
html.light #c1 .front{background:linear-gradient(135deg,rgba(234,179,8,0.28),rgba(34,197,94,0.16)), var(--surface) !important;}
html.light #c2 .front{background:linear-gradient(135deg,rgba(250,204,21,0.22),rgba(22,163,74,0.14)), var(--surface) !important;}
html.light .fc-label{color:var(--muted2) !important;}
html.light .fc-dot{background:var(--border2) !important;opacity:0.7;}
html.light .fc-id{color:var(--muted) !important;}
html.light #hero-text p{color:var(--muted) !important;}
html.light #scroll-hint{color:var(--muted2) !important;}
html.light .hint-bar{background:var(--border2) !important;}

/* Buttons */
html.light button.bg-primary,
html.light a .bg-primary{
  background:var(--primary) !important;
  color:var(--on-primary) !important;
}
html.light button.bg-primary:hover{filter:brightness(0.95);}
html.light .border-lime-400{border-color:rgba(22,163,74,0.35) !important;}
html.light .text-lime-400{color:var(--primary) !important;}

/* CTA mobile-only halo (hidden on desktop; shown in @media max-width 768px) */
.cta-mobile-shell__halo{display:none;}

/* CTA hover video layer (no layout shift; falls back automatically) */
/* Parent container: establishes stacking context */
.cta-btn{
  position:relative;
  isolation:isolate; /* Creates new stacking context, prevents parent z-index wars */
  overflow:hidden;
  background:transparent; /* CRITICAL: removes background covering video */
}

/* Video layer: guaranteed visibility */
.cta-btn__video{
  position:absolute;
  inset:0; /* top:0; right:0; bottom:0; left:0; */
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  opacity:0;
  transition:opacity 0.3s ease;
  pointer-events:none;
}

/* Show video on hover/focus */
.cta-btn:hover .cta-btn__video,
.cta-btn:focus .cta-btn__video{
  opacity:1;
}

/* Optional dark overlay for text readability */
.cta-btn__overlay{
  position:absolute;
  inset:0;
  background:rgba(0, 0, 0, 0.25);
  z-index:1;
  opacity:0;
  transition:opacity 0.3s ease;
  pointer-events:none;
}

.cta-btn:hover .cta-btn__overlay,
.cta-btn:focus .cta-btn__overlay{
  opacity:1;
}

/* Text layer: stays above video */
.cta-btn__text{
  position:relative;
  z-index:2;
  pointer-events:none;
  color:#000000 !important;
  transition:color 0.3s ease;
}
.cta-btn:hover .cta-btn__text,
.cta-btn:focus .cta-btn__text{
  color:#ffffff !important;
}

/* Homepage “Get in Touch…” — lime-400 fill (matches permits “Apply at…” button) */
.cta-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:#a3e635; /* Tailwind lime-400 */
  z-index:-1;
  transition:background-color 0.3s ease,opacity 0.3s ease;
}
.cta-btn:hover::before,
.cta-btn:focus::before{
  background:#bef264; /* Tailwind lime-300 */
}

/* Forms */
html.light .contact-input{
  background:rgba(255,255,255,0.92) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  box-shadow:0 1px 0 rgba(15,23,42,0.03);
}
html.light .contact-input::placeholder{color:var(--muted2) !important;}
html.light .contact-input:focus{
  border-color:rgba(22,163,74,0.55) !important;
  box-shadow:0 0 0 3px rgba(22,163,74,0.14) !important;
}

/* Footer (keep dark footer for hierarchy, but ensure link contrast) */
html.light footer{background-color:#0b1220 !important;}
html.light footer .text-zinc-400{color:rgba(226,232,240,0.78) !important;}
html.light footer .text-zinc-500{color:rgba(226,232,240,0.55) !important;}
html.light footer a:hover{color:#ffffff !important;}

/* Snapshot icons visibility in Light Theme */
html.light #services svg{filter:contrast(1.08) saturate(1.05);}
html.light #services .bg-white\/5{background:rgba(15,23,42,0.04) !important;}
html.light #services .border-white\/15{border-color:var(--border) !important;}
html.light #services .text-white{color:var(--text) !important;}

/* Trust header visibility (inline style uses low-opacity text) */
html.light section[style*="border-top"][style*="border-bottom"] h2{
  color:var(--muted) !important;
  opacity:1 !important;
}

/* CONTACT INPUTS */
.contact-input{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:#edeeed;transition:border-color 0.3s,box-shadow 0.3s;}
html.light .contact-input{background:rgba(255,255,255,0.92);border:1px solid var(--border);color:var(--text);}
.contact-input:focus{outline:none;border-color:#2effa8;box-shadow:0 0 0 3px rgba(46,255,168,0.1);}
.contact-input::placeholder{color:#4a7a60;}
html.light .contact-input::placeholder{color:var(--muted2);}

/* THEME TOGGLE */
.theme-toggle{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:9999px;padding:6px 14px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:0.75rem;font-weight:600;letter-spacing:0.08em;transition:all 0.3s;color:#a9abab;}
.theme-toggle:hover{background:rgba(46,255,168,0.1);border-color:rgba(46,255,168,0.3);color:#2effa8;}
html.light .theme-toggle{background:rgba(15,23,42,0.04);border-color:var(--border);color:var(--muted);}

/* CONTACT NEON BLOBS (Glass morphism highlight) */
.contact-neon{position:relative;overflow:hidden;}
.contact-neon > *{position:relative;z-index:1;}
.contact-neon::before,
.contact-neon::after{
  content:'';
  position:absolute;
  inset:-40%;
  pointer-events:none;
  z-index:0;
  opacity:0.25;
  transform:translateZ(0);
  transition:opacity 0.35s ease, filter 0.35s ease;
  filter:blur(26px) saturate(1.25);
}
.contact-neon::before{
  background:
    radial-gradient(circle at 25% 30%, rgba(46,255,168,0.22) 0%, transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(0,212,255,0.20) 0%, transparent 60%);
}
.contact-neon::after{
  background:
    radial-gradient(circle at 55% 35%, rgba(184,245,90,0.22) 0%, transparent 55%),
    radial-gradient(circle at 25% 70%, rgba(0,212,255,0.14) 0%, transparent 60%);
}
.contact-neon:hover::before,
.contact-neon:hover::after{
  opacity:0.9;
}
/* Ensure the whole email card is clickable (no dead zones) */
.email-card > *{pointer-events:none;}
html.light .contact-neon::before,
html.light .contact-neon::after{
  opacity:0.55;
  transition:opacity 0.35s ease;
}
html.light .contact-neon:hover::before,
html.light .contact-neon:hover::after{
  opacity:0.95;
}

/* COUNTER */
.counter-num{opacity:1;}
.counter-num.counted{animation:countUp 0.6s ease forwards;}
@keyframes countUp{from{transform:translateY(16px);}to{transform:translateY(0);}}

/* SERVICE CARDS */
.service-card{transition:transform 0.3s ease,box-shadow 0.3s ease;}
.service-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(46,255,168,0.08);}

/* NAV WORDMARK */
.nav-wordmark{height:24px;width:auto;display:block;image-rendering:auto;}
@media (min-width: 640px){.nav-wordmark{height:30px;}}

/* PARTNERS */
.partner-logo{
  width:100%;
  height:66px; /* +20px */
  object-fit:contain;
  filter:none;
  opacity:0.95;
  transition:transform .35s ease, opacity .35s ease;
}
.partner-card:hover .partner-logo{
  opacity:1;
  transform:scale(1.04);
}

/* QUOTES */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.quote-card{display:flex;flex-direction:column;gap:16px;}
/* Keep avatars perfectly level even when roles wrap */
.quote-head{display:flex;align-items:flex-start;gap:14px;}
.quote-mark{align-self:flex-start;}
.quote-avatar{
  width:54px;height:54px;border-radius:9999px;flex-shrink:0;
  object-fit:cover;
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 14px 34px rgba(0,0,0,0.45);
  background:rgba(255,255,255,0.06);
}
.quote-meta{min-height:46px;display:flex;flex-direction:column;justify-content:flex-start;}
.quote-name{font-weight:900;color:var(--text);line-height:1.2;}
.quote-role{
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--on-surface-variant);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.2em * 2);
}
.quote-mark{font-size:2.4rem;font-weight:900;line-height:1;color:rgba(210,255,154,0.9);}
html.light .quote-avatar{border-color:rgba(11,18,32,0.14);box-shadow:0 12px 26px rgba(15,23,42,0.12);}

/* LIFECYCLE (connector sits behind icons; never over text) */
#lifecycle-line{height:3px;pointer-events:none;z-index:2;top:60px;transform:none;}
#lifecycle-line .life-track{position:absolute;inset:0;height:3px;border-radius:999px;background:rgba(237,238,237,0.14);}
#lifecycle-line .life-fill{
  position:absolute;inset:0;height:3px;border-radius:999px;
  background:linear-gradient(90deg,#d2ff9a,#00eefc,#faffaf);
  background-size:200% 100%;
  background-position:0% 50%;
  transform-origin:left center;
  transform:scaleX(0);
  will-change:transform;
  box-shadow:0 0 0 1px rgba(210,255,154,0.10), 0 18px 40px rgba(0,212,255,0.08);
}
.lifecycle-step .lifecycle-icon{transition:transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;}
.lifecycle-step{opacity:0.72;transition:opacity 0.22s ease, transform 0.22s ease;}
.lifecycle-step.is-active{opacity:1;transform:translateY(-2px);}
.lifecycle-step.is-active .lifecycle-icon{transform:scale(1.06);box-shadow:0 22px 60px rgba(46,255,168,0.10);}

html.light #lifecycle-line .life-track{background:rgba(15,23,42,0.16);}
html.light #lifecycle-line .life-fill{
  background:linear-gradient(90deg,#fde047,#16a34a,#84cc16);
  background-size:200% 100%;
  background-position:0% 50%;
  box-shadow:0 0 0 1px rgba(22,163,74,0.14), 0 18px 40px rgba(15,23,42,0.10);
}

/* Department dropdown (Dark Theme) */
html.dark select.contact-input{
  background:rgba(17,30,23,0.92);
  border:1px solid rgba(255,255,255,0.14);
  color:#edeeed;
}
html.dark select.contact-input option{
  background:#0c0f0f;
  color:#edeeed;
}
html.light .lifecycle-step.is-active .lifecycle-icon{box-shadow:0 22px 60px rgba(15,23,42,0.12);}

/* PERMIT LINKS */
.permit-link{transition:all 0.3s ease;}
.permit-link:hover{transform:translateX(6px);}

/* SLE CARD */
.sle-card{background:linear-gradient(135deg,#0d1a0d 0%,#1a2e1a 50%,#0d1a0d 100%);border-radius:18px;border:1px solid #2a4a2a;padding:28px 32px;position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.05);}
.hex-bg{position:absolute;right:0;top:0;bottom:0;width:160px;background:repeating-linear-gradient(60deg,transparent,transparent 12px,rgba(46,255,168,0.04) 12px,rgba(46,255,168,0.04) 13px);opacity:0.7;}

/* Extracted from inline hero card styles */
#c0 .back::after{background:#2effa8}
#c1 .back::after{background:#00d4ff}
#c2 .back::after{background:#b8f55a}

/* --------------------------------------------------------------------------
   SINGLE MOBILE OVERRIDES (max-width: 768px) — scoped fixes only; avoid !important
   except where overriding inline styles (e.g. #themeIcon font-size).
   -------------------------------------------------------------------------- */
@media (max-width:768px){

  /* —— Homepage CTA: larger pill video halo behind “Get in Touch…” (mobile only) —— */
  .cta-mobile-shell{
    position:relative;
    display:inline-block;
    max-width:100%;
    vertical-align:middle;
  }
  .cta-mobile-shell__halo{
    display:block;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    z-index:0;
    width:min(calc(100% + 3.25rem), calc(100vw - 2rem));
    height:calc(100% + 2.25rem);
    border-radius:9999px;
    overflow:hidden;
    pointer-events:none;
    box-shadow:0 14px 44px rgba(15,23,42,0.16);
  }
  html.dark .cta-mobile-shell__halo{
    box-shadow:0 16px 48px rgba(0,0,0,0.42);
  }
  .cta-mobile-shell__halo-video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .cta-mobile-shell > a{
    position:relative;
    z-index:1;
  }

  /* —— NAV: single-row bar + touch targets (≤768 only; desktop unaffected) —— */
  nav.site-nav{
    overflow-x:hidden;
    max-width:100vw;
    box-sizing:border-box;
  }
  nav.site-nav > div:first-of-type{
    flex-wrap:nowrap;
    align-items:center;
    justify-content:space-between;
    column-gap:6px;
    row-gap:0;
    padding-left:clamp(10px,3vw,14px);
    padding-right:clamp(10px,3vw,14px);
    padding-top:8px;
    padding-bottom:8px;
    min-height:48px;
    box-sizing:border-box;
  }
  nav.site-nav > div:first-of-type > a:first-of-type{
    flex:1 1 auto;
    min-width:0;
    gap:6px;
    overflow:hidden;
  }
  nav.site-nav #navLogo{
    height:28px;
    width:auto;
    flex-shrink:0;
  }
  nav.site-nav #navWordmark.nav-wordmark{
    height:18px;
    max-width:min(36vw,132px);
    width:auto;
    object-fit:contain;
    flex-shrink:1;
  }
  nav.site-nav > div:first-of-type > div:last-child{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    flex-shrink:0;
    gap:6px;
    min-width:0;
  }
  nav.site-nav #themeLabel{
    display:none;
  }
  nav.site-nav button#themeToggle.theme-toggle{
    position:relative;
    flex-shrink:0;
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    padding:0;
    justify-content:center;
    gap:0;
    box-sizing:border-box;
  }
  nav.site-nav #themeIcon.material-symbols-outlined{
    font-size:19px !important;
    width:19px;
    height:19px;
    line-height:1;
  }
  nav.site-nav > div:first-of-type > div:last-child > a[data-cms-href="nav.cta.link"]{
    flex-shrink:0;
    white-space:nowrap;
    padding-left:10px;
    padding-right:10px;
    padding-top:0;
    padding-bottom:0;
    min-height:44px;
    font-size:0.875rem;
    font-weight:500;
    letter-spacing:normal;
    text-transform:none;
    line-height:1.25;
    box-sizing:border-box;
  }
  nav.site-nav #mobileMenuBtn{
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    flex-shrink:0;
    padding:0;
    box-sizing:border-box;
  }
  nav.site-nav #mobileMenuBtn .material-symbols-outlined{
    font-size:19px;
    width:19px;
    height:19px;
    line-height:1;
  }
  html.light nav.site-nav #mobileMenuBtn .material-symbols-outlined{
    color:#1f2937;
  }

  /* —— News subpage (news.html): hide scroll-synced sidebar; mobile drawer + trigger —— */
  .news-container .news-left-nav{
    display:none;
  }
  #newsMobileMenuBtn.news-mobile-drawer__trigger:not([hidden]){
    position:fixed;
    top:max(72px, calc(var(--nav-h, 88px) + 8px));
    left:max(10px, env(safe-area-inset-left));
    z-index:40;
    box-sizing:border-box;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    padding:0;
    margin:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    border:2px solid #ffffff;
    background:#0f172a;
    color:#f8fafc;
    cursor:pointer;
    box-shadow:0 10px 28px rgba(15,23,42,0.28);
  }
  html[data-theme="dark"] #newsMobileMenuBtn.news-mobile-drawer__trigger:not([hidden]){
    border-color:rgba(255,255,255,0.35);
    background:#020617;
    color:#e2e8f0;
    box-shadow:0 12px 32px rgba(0,0,0,0.55);
  }
  #newsMobileMenuBtn.news-mobile-drawer__trigger:not([hidden]) .material-symbols-outlined{
    font-size:22px;
    line-height:1;
  }
  #newsMobileDrawer.news-mobile-drawer:not([hidden]){
    position:fixed;
    inset:0;
    z-index:45;
    box-sizing:border-box;
    pointer-events:none;
    visibility:hidden;
  }
  #newsMobileDrawer.news-mobile-drawer:not([hidden]).is-open{
    pointer-events:auto;
    visibility:visible;
  }
  .news-mobile-drawer__backdrop{
    position:absolute;
    inset:0;
    z-index:0;
    background:rgba(15,23,42,0.5);
    backdrop-filter:blur(2px);
  }
  html[data-theme="dark"] .news-mobile-drawer__backdrop{
    background:rgba(0,0,0,0.62);
  }
  .news-mobile-drawer__panel{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    z-index:1;
    box-sizing:border-box;
    width:min(88vw, 320px);
    max-width:100%;
    display:flex;
    flex-direction:column;
    background:var(--news-bg, #ffffff);
    color:var(--news-text, #0f172a);
    box-shadow:12px 0 40px rgba(15,23,42,0.18);
    transform:translate3d(-100%, 0, 0);
    transition:transform 0.28s ease;
    padding-top:max(12px, env(safe-area-inset-top));
  }
  #newsMobileDrawer.news-mobile-drawer:not([hidden]).is-open .news-mobile-drawer__panel{
    transform:translate3d(0, 0, 0);
  }
  .news-mobile-drawer__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 16px 10px;
    border-bottom:1px solid rgba(15,23,42,0.08);
  }
  html[data-theme="dark"] .news-mobile-drawer__head{
    border-bottom-color:rgba(255,255,255,0.08);
  }
  .news-mobile-drawer__title{
    margin:0;
    font-size:0.95rem;
    font-weight:800;
    letter-spacing:-0.02em;
  }
  .news-mobile-drawer__close{
    flex-shrink:0;
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    border:1px solid rgba(15,23,42,0.12);
    background:transparent;
    color:inherit;
    cursor:pointer;
    padding:0;
    box-sizing:border-box;
  }
  .news-mobile-drawer__close .material-symbols-outlined{
    font-size:22px;
    line-height:1;
  }
  .news-mobile-drawer__nav{
    flex:1;
    min-height:0;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .news-mobile-drawer__list{
    list-style:none;
    margin:0;
    padding:8px 0 20px;
  }
  .news-mobile-drawer__item{
    margin:0;
  }
  .news-mobile-drawer__link{
    display:block;
    padding:14px 18px;
    font-size:0.95rem;
    font-weight:650;
    line-height:1.35;
    text-decoration:none;
    color:inherit;
    border-bottom:1px solid rgba(15,23,42,0.06);
  }
  html[data-theme="dark"] .news-mobile-drawer__link{
    border-bottom-color:rgba(255,255,255,0.06);
  }
  .news-mobile-drawer__link:active{
    background:rgba(15,23,42,0.06);
  }
  html[data-theme="dark"] .news-mobile-drawer__link:active{
    background:rgba(255,255,255,0.06);
  }
  html.news-mobile-drawer--open body{
    overflow:hidden;
    touch-action:none;
  }

  /* —— NEWS mobile stack: JS adds .news-section--mobile-reset ≤768 after killing ScrollTrigger —— */
  .news-section.news-section--mobile-reset[data-scroll-panels] [data-scroll-panel],
  .news-section.news-section--mobile-reset[data-scroll-panels] .panel{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    animation:none;
    transition:none;
    transform:none;
    will-change:auto;
  }
  .news-section.news-section--mobile-reset[data-scroll-panels] [data-scroll-nav-item],
  .news-section.news-section--mobile-reset[data-scroll-panels] .left-nav__item{
    animation:none;
    transition:none;
    will-change:auto;
    filter:none;
  }

  /* —— About carousel footprint —— */
  #about #aboutCoverflow.about-coverflow,
  #about .about-coverflow{
    width:min(70vw,240px);
    height:min(70vw,240px);
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    transform:none;
    box-sizing:border-box;
  }
  #about .about-coverflow-slide{
    width:min(58vw,208px);
    max-width:100%;
    height:auto;
    aspect-ratio:4/3;
    min-width:141px;
    box-sizing:border-box;
  }

  /* —— Hero (≤768): align with About “Who We Are” — same gutter (px-12) + type scale —— */
  #stage #hero-text{
    margin-left:0;
    margin-right:0;
    margin-bottom:clamp(1.5rem,5vw,2.75rem);
    padding-left:3rem;
    padding-right:3rem;
    max-width:100%;
    width:100%;
    box-sizing:border-box;
    text-align:left;
  }
  #stage #hero-text .eyebrow{
    text-align:left;
    margin-bottom:1.5rem;
  }
  #stage #hero-text h1{
    font-size:3rem;
    line-height:1.25;
    font-weight:900;
    letter-spacing:-0.025em;
    color:var(--text);
    text-align:left;
  }
  #stage #who-title{
    margin-left:0;
    margin-right:0;
    margin-top:0;
    margin-bottom:0;
    padding-top:clamp(2.25rem,7vw,3.75rem);
    padding-left:3rem;
    padding-right:3rem;
    max-width:100%;
    width:100%;
    box-sizing:border-box;
    text-align:left;
  }
  #stage #who-title h2{
    font-size:clamp(1.25rem,5vw,1.75rem);
    line-height:1.25;
    font-weight:900;
    letter-spacing:-0.025em;
    color:var(--text);
    text-align:left;
    margin:0;
  }
  .mobile-who-label{display:none !important;}

  /* —— Lifecycle timeline (≤768): left rail + CSS var-driven fill scale —— */
  #lifecycle .lifecycle-timeline{
    position:relative;
    padding-left:max(38px, env(safe-area-inset-left));
    box-sizing:border-box;
  }
  #lifecycle #lifecycle-line{
    top:0;
    bottom:0;
    left:14px;
    width:2px;
    height:auto;
    transform:none;
    background:transparent;
  }
  #lifecycle #lifecycle-line .life-track{
    inset:0 auto 0 0;
    width:2px;
    height:100%;
    border-radius:999px;
    background:#d1d5db;
    transition:background-color .28s ease, opacity .28s ease;
  }
  html.dark #lifecycle #lifecycle-line .life-track{
    background:#6b7280;
  }
  #lifecycle #lifecycle-line .life-fill{
    inset:0 auto 0 0;
    width:2px;
    height:100%;
    border-radius:999px;
    transform-origin:top center;
    transform:scaleY(var(--life-fill-scale, 0));
    transition:opacity .2s ease, box-shadow .2s ease;
    opacity:calc(0.15 + var(--life-fill-scale, 0) * 0.85);
  }
  html.dark #lifecycle #lifecycle-line .life-fill{
    box-shadow:none;
    filter:none;
    opacity:calc(0.2 + var(--life-fill-scale, 0) * 0.8);
  }

  #lifecycle .lifecycle-grid .lifecycle-step{
    position:relative;
    align-items:flex-start;
    margin-bottom:24px;
    padding-left:48px;
    text-align:left;
    box-sizing:border-box;
  }
  #lifecycle .lifecycle-grid .lifecycle-step .lifecycle-icon{
    position:absolute;
    left:14px;
    top:6px;
    margin:0;
    transform:translateX(-50%);
    z-index:2;
    width:3.5rem;
    height:3.5rem;
    transition:opacity .3s ease, box-shadow .3s ease, background-color .3s ease, border-color .3s ease, transform .3s ease;
    opacity:.55;
  }
  #lifecycle .lifecycle-grid .lifecycle-step .lifecycle-icon span{
    transition:opacity .3s ease;
    opacity:.7;
  }
  #lifecycle .lifecycle-grid .lifecycle-step h4,
  #lifecycle .lifecycle-grid .lifecycle-step p{
    text-align:left;
    max-width:100%;
    overflow-wrap:anywhere;
  }
  #lifecycle .lifecycle-grid .lifecycle-step.lifecycle-step--mobile-inview .lifecycle-icon{
    opacity:1;
    transform:translateX(-50%) scale(1.04);
    box-shadow:0 14px 36px rgba(46,255,168,.16);
  }
  #lifecycle .lifecycle-grid .lifecycle-step.lifecycle-step--mobile-inview .lifecycle-icon span{
    opacity:1;
  }
  html.light #lifecycle .lifecycle-grid .lifecycle-step.lifecycle-step--mobile-inview .lifecycle-icon{
    box-shadow:0 12px 32px rgba(15,23,42,.14);
  }

  /* —— Contact cards —— */
  #contact a.contact-neon,
  #contact a.email-card{
    flex-wrap:wrap;
    gap:clamp(8px,.6rem,14px);
    padding:clamp(.85rem,.75rem + 2vw,1.05rem);
    box-sizing:border-box;
  }
  #contact a.contact-neon > div:nth-child(2),
  #contact a.email-card > div:nth-child(2){
    min-width:0;
    flex:1 1 12rem;
    box-sizing:border-box;
  }
  #contact a.contact-neon .font-medium,
  #contact a.email-card .font-medium{
    font-size:clamp(.78rem,2.8vw+.25rem,.98rem);
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}

/* ============================================================================
   ABOUT — MOBILE-ONLY 3D CIRCULAR CAROUSEL (≤767px)

   Desktop (≥768px) keeps the original `.about-coverflow` 3D carousel. The
   `.about-ferris` block is `display:none` by default so it never participates
   in desktop layout. At ≤767px we swap: `.about-coverflow-wrap` is hidden and
   `.about-ferris` becomes visible. Cards are arranged around a
   horizontal 3D ring (radius set in JS) and rotate as the user scrolls,
   driven by GSAP ScrollTrigger. CSS `perspective` on the stage provides
   natural depth scaling — front cards appear larger, back cards smaller.
   ============================================================================ */

.about-ferris{
  display:none;
}

@media (max-width: 767px){
  .about-media-col{
    flex-direction:column;
    align-items:center;
    width:100%;
  }

  /* Hide the desktop coverflow on mobile — the ferris wheel takes its place. */
  .about-coverflow-wrap{display:none !important;}

  .about-ferris{
    display:block;
    position:relative;
    width:100%;
    height:auto;
    overflow:visible;
    isolation:isolate;
    margin-top:1rem;
  }

  .about-ferris__stage{
    position:relative;
    width:100%;
    height:min(56vw, 260px);
    perspective:800px;
    perspective-origin:50% 50%;
    transform-style:preserve-3d;
    pointer-events:none;
  }

  .about-ferris__item{
    position:absolute;
    top:50%;
    left:50%;
    width:min(58vw, 240px);
    aspect-ratio:4/3;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(17,30,23,0.75);
    box-shadow:0 12px 40px rgba(0,0,0,0.5);
    transform:translate3d(-50%, -50%, 0);
    will-change:transform, opacity;
    pointer-events:auto;
    transition:box-shadow .3s ease;
  }

  .about-ferris__item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(1.08) contrast(1.06);
  }

  .about-ferris__item::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.35) 100%);
    pointer-events:none;
  }

  .about-ferris__caption{
    position:absolute;
    left:14px;
    bottom:12px;
    font-size:0.66rem;
    font-weight:900;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.92);
    text-shadow:0 8px 22px rgba(0,0,0,0.65);
    z-index:2;
  }

  .about-ferris__fade{
    display:none;
  }

  /* Pre-JS state: items sit at center until `data-ferris-ready` is added by JS. */
  .about-ferris:not([data-ferris-ready="true"]) .about-ferris__item:nth-child(n+2){
    opacity:0;
  }
}

/* Reduced motion: no scroll-driven wheel — render a tight vertical stack so the
   user still sees every card. JS skips ScrollTrigger entirely under this MQ. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce){
  .about-ferris{
    height:auto;
    overflow:visible;
    padding:1rem 0;
  }
  .about-ferris__stage{
    position:relative;
    top:auto;
    transform:none;
    height:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    perspective:none;
  }
  .about-ferris__item{
    position:relative;
    top:auto;
    left:auto;
    transform:none !important;
    opacity:1 !important;
    width:min(86vw, 340px);
  }
  .about-ferris__fade{display:none;}
}

/* ============ Sierra Leone Map with Live Location Dots ============ */
.sl-map-wrapper{
  isolation:isolate;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}
.sl-map-frame{
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 70%);
  height:96%;
  aspect-ratio:1 / 1;
  width:auto;
  max-width:100%;
}
@media (max-width: 1023px){
  .sl-map-wrapper{
    align-self:auto;
  }
  .sl-map-frame{
    height:auto;
    width:100%;
  }
}
.sl-map-image{
  filter:brightness(1.05) contrast(0.95);
  opacity:0.85;
  transition:opacity .7s ease, filter .7s ease;
}
.sl-map-wrapper:hover .sl-map-image{
  opacity:1;
  filter:brightness(1.1) contrast(1);
}
.sl-map-dots{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.sl-dot{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:#ef4444;
  box-shadow:0 0 0 0 rgba(239,68,68,0.85), 0 0 9px 1.5px rgba(239,68,68,0.55);
  pointer-events:auto;
  cursor:pointer;
  animation:sl-dot-pulse 1.8s ease-out infinite;
  z-index:2;
}
.sl-dot::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:rgba(239,68,68,0.35);
  z-index:-1;
  animation:sl-dot-ring 1.8s ease-out infinite;
}
.sl-dot:nth-child(1){animation-delay:0s;}
.sl-dot:nth-child(1)::before{animation-delay:0s;}
.sl-dot:nth-child(2){animation-delay:.45s;}
.sl-dot:nth-child(2)::before{animation-delay:.45s;}
.sl-dot:nth-child(3){animation-delay:.9s;}
.sl-dot:nth-child(3)::before{animation-delay:.9s;}
.sl-dot:nth-child(4){animation-delay:1.35s;}
.sl-dot:nth-child(4)::before{animation-delay:1.35s;}

@keyframes sl-dot-pulse{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,0.7), 0 0 9px 1.5px rgba(239,68,68,0.55);}
  70%{box-shadow:0 0 0 10px rgba(239,68,68,0), 0 0 9px 1.5px rgba(239,68,68,0.4);}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0), 0 0 9px 1.5px rgba(239,68,68,0.55);}
}
@keyframes sl-dot-ring{
  0%{transform:scale(0.6);opacity:0.9;}
  80%{transform:scale(2.6);opacity:0;}
  100%{transform:scale(2.6);opacity:0;}
}

@media (max-width: 768px){
  .sl-dot{width:8px;height:8px;margin:-4px 0 0 -4px;}
}

@media (prefers-reduced-motion: reduce){
  .sl-dot,
  .sl-dot::before{animation:none;}
  .sl-dot{box-shadow:0 0 0 3px rgba(239,68,68,0.25), 0 0 7px 1.5px rgba(239,68,68,0.5);}
}

/* ============================================================================
 * CTA proximity hands
 *
 * Two decorative hands sit at opposite off-screen corners of the CTA section
 * (`section.cta-stage` / `[data-cta-hands-stage]`). As the cursor approaches
 * `.cta-btn`, `initCtaProximityHands()` in main.js tweens them inward to
 * "point" at the button. CSS owns:
 *   - the stage (relative + overflow:hidden + full viewport min-height so
 *     hands have room to come in from clipped corners),
 *   - the resting off-screen transforms (so the hands are correctly placed
 *     even if JS or GSAP fails to load),
 *   - GPU hints (`will-change: transform`, `transform: translateZ(0)`),
 *   - touch / no-hover / reduced-motion fallbacks (hidden entirely).
 * JS owns motion only — same `transform` property CSS sets initially.
 * ==========================================================================*/

.cta-stage{
  position:relative;
  /* Tall enough that the off-screen hand corners stay near the button as
     the user scrolls into view. `min-height` (not `height`) keeps mobile
     layouts that need only content height from being forced taller. */
  min-height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.cta-stage__content{
  position:relative;
  z-index:2; /* sits above the hand layer */
}

.cta-hands{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1; /* above background blob (-z-10), below content */
}

.cta-hand{
  position:absolute;
  width:clamp(220px, 26vw, 420px);
  height:auto;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  /* GPU compositing — transform-only animations, no layout work. */
  will-change:transform;
  transform:translateZ(0);
  /* Subtle ambient lift; the drop-shadow follows the alpha channel so
     it works correctly on transparent PNGs. */
  filter:drop-shadow(0 16px 32px rgba(0, 0, 0, 0.35));
  transition:none; /* JS / GSAP owns motion */
  backface-visibility:hidden;
}

/* Left hand (wireframe). Anchored to the top-left of the stage; the
   initial transform parks it off-canvas up-left so it's clipped until
   the user nears the button. JS will smoothly tween it inward. */
/* Resting (proximity 0) transform. Must match `LEFT_REST` in
   `initCtaProximityHands()` (js/main.js) — that constant is the single
   source of truth; this rule only exists so the hand paints in the
   correct spot on the very first frame, BEFORE GSAP attaches. */
.cta-hand--left{
  top:10vh;
  left:0;
  transform:translate3d(-12vw, -10vh, 0); /* Match LEFT_REST for no first-frame jump */
  transform-origin:70% 70%; /* rotate/scale around the fingertip area */
}

/* Right hand (realistic). Anchored to the bottom-right, parked
   off-canvas down-right at rest. */
/* Resting (proximity 0) transform. Must match `RIGHT_REST` in
   `initCtaProximityHands()` (js/main.js); see note on `.cta-hand--left`. */
.cta-hand--right{
  bottom:10vh;
  right:0;
  transform:translate3d(8vw, -2vh, 0); /* Match RIGHT_REST for no first-frame jump */
  transform-origin:30% 30%;
}

/* No-hover / coarse-pointer (touch) devices: skip the whole effect.
   Spec: "show hands in static default positions" — i.e. the off-screen
   resting state, which is already what CSS gives us. `display:none`
   removes them entirely so they can't pop in via stray pointer events. */
@media (hover: none), (pointer: coarse){
  .cta-hands{display:none;}
  .cta-stage{
    /* Mobile doesn't need the 100vh breathing room — content-driven height
       keeps the page tight without a tall blank area. */
    min-height:auto;
  }
}

/* Reduced motion: keep the hands hidden so users with motion sensitivity
   don't get an unsolicited animated reveal. */
@media (prefers-reduced-motion: reduce){
  .cta-hands{display:none;}
}

/* ── Marquee Banner ── */
.marquee-banner{
  width:100%;
  overflow:hidden;
  background:var(--md-sys-color-surface-container-high, #1a1a2e);
  border-top:2px solid rgba(163,230,53,0.25);
  border-bottom:2px solid rgba(163,230,53,0.25);
  padding:1.25rem 0;
}
.marquee-track{
  display:flex;
  gap:4rem;
  width:max-content;
  animation:marquee-scroll 22s linear infinite;
}
.marquee-text{
  flex-shrink:0;
  white-space:nowrap;
  font-family:var(--font-headline, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size:clamp(1.5rem, 3vw, 2.5rem);
  font-weight:900;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  color:var(--md-sys-color-on-surface, #e0e0e0);
}
@keyframes marquee-scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
}