/* ==========================================================================
   SCS — GLOBAL OVERRIDES
   Loaded after each page stylesheet. Implements the site-wide rebuild changes:
   navigation legibility, the orange-glow button animation, the full-screen
   mobile menu, and the de-numbered section headers.
   Brand tokens (--orange #FF6A00, --ink #0A0A0A, Inter / JetBrains Mono) are
   inherited from the page stylesheets — nothing here redefines them.
   ========================================================================== */

/* ----- 1. NAVIGATION : bolder + slightly larger links --------------------- */
.nav nav ul li a{
  font-family:var(--mono);
  font-size:13px;            /* was ~11px */
  font-weight:700;           /* bolded */
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  position:relative;
  transition:color .2s ease;
}
.nav nav ul li a:hover,
.nav nav ul li a.active{color:var(--orange)}
/* keep the active underline crisp under the heavier weight */
.nav nav ul li a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--orange);border-radius:2px;
}

/* ----- 2. SECTION HEADERS : de-numbered titles, more prominent ------------ */
/* The "// 0N ·" prefixes were stripped in markup; make the surviving label
   read a step bolder + larger while preserving the mono family + tracking.   */
.eyebrow,
.pillars .cell .num,
.sec-head .eyebrow{
  font-weight:700;
  font-size:13.5px;          /* nudged up from ~11px */
  letter-spacing:.16em;
}
.pillars .cell .num{font-size:12.5px}

/* ----- 3. ORANGE GLOW ANIMATION — APPLIED TO ALL BUTTONS ------------------ */
/* Mirrors the hero "WORLDWIDE" treatment: a warm gradient sheen that sweeps
   across the button, plus an ambient orange halo that breathes on hover.     */
@keyframes scs-glow-sweep{
  0%{transform:translateX(-130%) skewX(-18deg)}
  100%{transform:translateX(130%) skewX(-18deg)}
}
@keyframes scs-glow-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,106,0,0);}
  50%{box-shadow:0 0 26px 2px rgba(255,106,0,.45);}
}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{                              /* the moving sheen */
  content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:60%;
  background:linear-gradient(100deg,
     transparent 0%,
     rgba(255,170,90,.0) 20%,
     rgba(255,200,150,.55) 50%,
     rgba(255,170,90,.0) 80%,
     transparent 100%);
  transform:translateX(-130%) skewX(-18deg);
  pointer-events:none;z-index:2;mix-blend-mode:screen;opacity:.0;
  transition:opacity .25s ease;
}
.btn:hover::before,
.btn:focus-visible::before{opacity:1;animation:scs-glow-sweep 1.15s cubic-bezier(.2,.8,.2,1) infinite}
.btn:hover,
.btn:focus-visible{animation:scs-glow-pulse 1.8s ease-in-out infinite}
/* lift on hover (kept subtle, brand-consistent) */
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
/* disabled / "coming soon" buttons must not glow */
.btn[aria-disabled="true"],
.btn[style*="not-allowed"]{animation:none}
.btn[aria-disabled="true"]::before,
.btn[style*="not-allowed"]::before{display:none}

/* ----- 4. FULL-SCREEN MOBILE NAVIGATION ----------------------------------- */
.nav-toggle{
  display:none;                /* hidden on desktop */
  appearance:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;padding:0;color:var(--ink);z-index:1002;
}
.nav-toggle span{
  display:block;width:24px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .3s ease, opacity .25s ease;
}
header.nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav.open .nav-toggle span:nth-child(2){opacity:0}
header.nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1100px){
  .nav-toggle{display:inline-flex;order:3}

  /* full-viewport overlay menu (replaces the old 60vh dropdown) */
  .nav nav{
    position:fixed !important;
    inset:0 !important;
    top:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-height:none !important;
    background:rgba(241,236,227,.985);
    backdrop-filter:saturate(180%) blur(18px);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    display:flex !important;align-items:center;justify-content:center;
    transform:translateY(-100%);
    opacity:0;visibility:hidden;
    transition:transform .42s cubic-bezier(.2,.8,.2,1), opacity .3s ease, visibility .42s;
    border:0 !important;z-index:1001;overflow:auto;
  }
  header.nav.open nav{
    transform:translateY(0);opacity:1;visibility:visible;max-height:none !important;
  }
  .nav nav ul{
    display:flex !important;flex-direction:column;align-items:center;
    gap:6px !important;width:auto;padding:0 !important;
  }
  .nav nav ul li{width:100%;text-align:center;border:0 !important}
  .nav nav ul li a{
    display:block;padding:18px 12px;font-size:22px !important;letter-spacing:.12em;
  }
  .nav nav ul li a.active::after{display:none}
  /* surface the CTA inside the overlay on mobile */
  .nav .bar>a.btn.primary{display:none}
  header.nav .mobile-cta{display:none}
  header.nav.open .mobile-cta{
    display:inline-flex;margin-top:26px;
  }
  body.nav-open{overflow:hidden}
}

/* ----- 5. accessibility / motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .btn::before{display:none}
  .btn:hover,.btn:focus-visible{animation:none}
  .nav nav{transition:opacity .2s ease, visibility .2s ease}
}

/* ==========================================================================
   ROUND 2 — pure-white nav, single CTA, seamless WORLDWIDE shimmer
   ========================================================================== */

/* 1. Pure white, fully opaque nav (also removes the see-through "bleed"
      where page content showed through the translucent bar). */
header.nav,
header.nav.scrolled{
  background:#ffffff !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:1px solid var(--line);
}
/* clip the bar so a hovered CTA's glow halo can't spill into the ticker below */
header.nav .bar{overflow:hidden}

/* 2. Only ONE visible CTA on desktop (the far-right one). The cloned
      "mobile-cta" is hidden everywhere except inside the open mobile menu. */
header.nav .mobile-cta{display:none !important;}
@media (max-width:1100px){
  header.nav.open .mobile-cta{display:inline-flex !important;margin-top:26px}
}

/* 3. Seamless WORLDWIDE shimmer — a continuous linear sweep that loops with
      no jump. Shifting by one full background width (200%) tiles perfectly. */
.hero h1 .o{
  background-size:200% 100% !important;
  animation:shine 5s linear .4s infinite !important;
}
@keyframes shine{
  from{background-position:200% 0;}
  to{background-position:0% 0;}
}