/* =====================================================================
   PRO LAYER — award-show polish on top of site.css
   Patterns: brand load sequence, custom cursor, grain, word reveals,
   sticky stacking cards, typographic marquee, bento, counters.
   Everything here degrades to the base site without JS.
   ===================================================================== */

/* ---------- 1. grain / texture ---------- */
.grain{position:fixed;inset:-150%;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 7s steps(6) infinite}
@keyframes grainshift{
  0%{transform:translate(0,0)}17%{transform:translate(-3%,-4%)}33%{transform:translate(2%,-2%)}
  50%{transform:translate(-2%,3%)}67%{transform:translate(3%,2%)}83%{transform:translate(-3%,1%)}100%{transform:translate(0,0)}}

/* ---------- 2. brand load sequence ---------- */
.loader{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--navy);
  clip-path:inset(0 0 0 0)}
.loader-in{display:flex;flex-direction:column;align-items:center;gap:22px}
.loader img{height:46px;width:auto;opacity:0}
.loader-bar{position:relative;width:min(210px,42vw);height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.loader-bar i{position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left}
.loader-pct{font-size:12px;font-weight:650;letter-spacing:.12em;color:var(--on-navy-2)}
html.loaded .loader{pointer-events:none}
html.no-loader .loader{display:none}

/* ---------- 3. custom cursor (fine pointers only) ---------- */
.cur,.cur-dot{position:fixed;top:0;left:0;z-index:290;pointer-events:none;border-radius:50%;
  will-change:transform;mix-blend-mode:normal}
.cur{width:38px;height:38px;margin:-19px 0 0 -19px;box-shadow:inset 0 0 0 1.5px rgba(13,26,43,.3);
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),
             background-color .35s,box-shadow .35s,opacity .3s}
.cur-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--orange);transition:opacity .3s,transform .3s}
html.cur-hot .cur{width:66px;height:66px;margin:-33px 0 0 -33px;background:rgba(238,69,45,.14);box-shadow:inset 0 0 0 1.5px rgba(238,69,45,.5)}
html.cur-hot .cur-dot{opacity:0}
html.cur-dark .cur{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
html.cur-hidden .cur,html.cur-hidden .cur-dot{opacity:0}
.cur-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);
  opacity:0;transition:opacity .3s,transform .4s var(--ease);white-space:nowrap}
html.cur-label .cur-label{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none),(pointer:coarse){.cur,.cur-dot{display:none}}

/* ---------- 4. scroll progress ---------- */
.sprog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:200;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--orange),#FF8A6B);pointer-events:none}

/* ---------- 5. word-level reveal ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top}
.w>span{display:inline-block;will-change:transform}
html.pro [data-words] .w>span{transform:translateY(105%)}

/* ---------- 6. sticky stacking cards (how it works) ---------- */
html.pro .stack-wrap{position:relative}
html.pro .stack-card{position:sticky;top:calc(96px + var(--i) * 14px);margin-bottom:18px;
  border-radius:var(--r-xl);background:#fff;padding:clamp(24px,2.8vw,38px);
  box-shadow:inset 0 0 0 1px rgba(13,26,43,.08),0 24px 60px -34px rgba(13,26,43,.5);
  transform-origin:center top}
.stack-card{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.2vw,30px);align-items:start}
.stack-n{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;flex:0 0 auto;
  background:var(--navy);color:var(--orange);font-size:15px;font-weight:700;font-stretch:112%}
.stack-card.on .stack-n{background:var(--orange);color:var(--navy)}
.stack-card h3{margin:4px 0 8px}
.stack-card p{margin:0;color:var(--body);font-size:15.5px;max-width:56ch}
.stack-card .pill-row{margin-top:14px}
@media (max-width:640px){
  .stack-card{grid-template-columns:1fr;gap:14px}
  html.pro .stack-card{top:calc(84px + var(--i) * 10px)}
}

/* ---------- 7. typographic marquee band ---------- */
.mq{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:clamp(26px,3vw,40px) 0;
  border-top:1px solid var(--navy-line);border-bottom:1px solid var(--navy-line)}
.mq-track{display:flex;gap:clamp(30px,4vw,56px);width:max-content;align-items:center;will-change:transform}
.mq-track span{display:inline-flex;align-items:center;gap:clamp(16px,2vw,26px);white-space:nowrap;
  font-size:clamp(28px,4.4vw,60px);font-weight:700;font-stretch:118%;letter-spacing:-.042em;line-height:1}
.mq-track i{display:inline-block;width:clamp(9px,1vw,13px);height:clamp(9px,1vw,13px);border-radius:50%;
  background:var(--orange);flex:0 0 auto}
.mq-track .ghost{color:transparent;-webkit-text-stroke:1.4px rgba(183,192,204,.62)}

/* ---------- 8. bento grid (value / outcomes) ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(132px,auto);gap:clamp(10px,1.2vw,14px)}
.bn{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(20px,2.2vw,28px);border-radius:var(--r-lg);background:var(--chalk);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.bn:hover{transform:translateY(-4px);box-shadow:0 22px 50px -30px rgba(13,26,43,.55)}
.bn .ibox{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;margin-bottom:auto;align-self:flex-start}
.bn .ibox .ic{display:block;margin:auto}
.bn b{display:block;font-size:16.5px;font-weight:650;font-stretch:104%;letter-spacing:-.018em;color:var(--navy);margin:16px 0 5px}
.bn p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.bn-wide{grid-column:span 2}
.bn-tall{grid-row:span 2}
.bn-dark{background:var(--navy)}
.bn-dark b{color:#fff}.bn-dark p{color:var(--on-navy)}
.bn-dark .ibox{background:var(--orange);color:var(--navy)}
.bn-accent{background:linear-gradient(145deg,var(--orange),#C8391C);color:#fff}
.bn-accent b,.bn-accent p{color:#fff}
.bn-accent .ibox{background:rgba(255,255,255,.2);color:#fff;box-shadow:none}
.bn-num{font-size:clamp(30px,3.4vw,46px);font-weight:700;font-stretch:116%;letter-spacing:-.045em;
  line-height:1;color:var(--navy);margin-bottom:6px}
.bn-dark .bn-num,.bn-accent .bn-num{color:#fff}
.bn-glow{position:absolute;right:-50px;top:-50px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(238,69,45,.22),transparent 70%);pointer-events:none}
@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bn-wide{grid-column:span 2}
  .bn-tall{grid-row:span 1}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .bn-wide{grid-column:span 1}
}

/* ---------- 9. section index rail ---------- */
.rail-idx{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:12px;opacity:0;transition:opacity .5s}
.rail-idx.show{opacity:1}
.rail-idx a{position:relative;display:block;width:9px;height:9px;border-radius:50%;
  background:rgba(13,26,43,.18);transition:background-color .35s,transform .45s var(--ease)}
.rail-idx a::after{content:attr(data-label);position:absolute;right:20px;top:50%;transform:translateY(-50%) translateX(6px);
  padding:5px 11px;border-radius:999px;background:var(--navy);color:#fff;font-size:11.5px;font-weight:600;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
.rail-idx a:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.rail-idx a:hover{transform:scale(1.4);background:var(--orange)}
.rail-idx a.on{background:var(--orange);transform:scale(1.35)}
.rail-idx.on-dark a{background:rgba(255,255,255,.28)}
.rail-idx.on-dark a.on{background:var(--orange)}
@media (max-width:1240px){.rail-idx{display:none}}

/* ---------- 10. hero shimmer on the stat chips ---------- */
.chip{position:relative;overflow:hidden}
.chip::after{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%)}
html.pro .chip.shine::after{animation:shine 1.1s var(--ease)}
@keyframes shine{to{transform:translateX(120%)}}
.chip.win::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%)}

/* ---------- 11. link underline sweep on nav ---------- */
.nav-links>a,.nav-drop-btn{overflow:hidden}

/* ---------- 12. reduced motion / no-JS safety ---------- */
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  html.pro [data-words] .w>span{transform:none}
  html.pro .stack-card{position:relative;top:auto}
  .mq-track{animation:none}
}
html:not(.pro) .stack-card{position:relative;top:auto}
html:not(.pro) [data-words] .w>span{transform:none}

/* bento on dark sections: translucent, not muddy chalk */
.sec.navy .bn{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--navy-line)}
.sec.navy .bn b{color:#fff}
.sec.navy .bn p{color:var(--on-navy)}
.sec.navy .bn .ibox{background:rgba(255,255,255,.08);color:var(--orange)}
.sec.navy .bn:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(183,192,204,.3)}
.sec.navy .bn-dark{background:rgba(255,255,255,.03)}
.sec.navy .bn-accent{background:linear-gradient(145deg,var(--orange),#C8391C);box-shadow:0 24px 54px -28px rgba(238,69,45,.7)}
.sec.navy .bn-accent .ibox{background:rgba(255,255,255,.2);color:#fff}
.sec.navy .bn-accent b,.sec.navy .bn-accent p{color:#fff}
.sec.navy .bn-num{color:#fff}