/* ==========================================================================
   BLACKX — Bidding Portfolio · v4 · LIGHT theme
   Bright canvas, navy ink, lime signal. GSAP motion, 3D coverflow.
   ========================================================================== */

:root{
  --bg:#EEF2F7; --bg-2:#E3E9F1; --surface:#FFFFFF;
  --ink:#0B1F3A; --ink-2:#3D4F66; --ink-3:#8493A8;
  --navy:#122D4E; --navy-deep:#081627;
  --lime:#A5CE26; --lime-dark:#8DB31D; --lime-ink:#223300;
  --line:#DCE3EC; --line-2:#C9D3E0;
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:34px; --r-pill:999px;
  --font-display:"Barlow Condensed",sans-serif; --font-body:"Inter",sans-serif;
  --shadow:0 2px 6px rgba(11,31,58,.07),0 10px 24px rgba(11,31,58,.10);
  --shadow-lg:0 8px 18px rgba(11,31,58,.12),0 20px 40px rgba(11,31,58,.16);
  --shadow-xl:0 18px 34px rgba(11,31,58,.22),0 34px 60px rgba(11,31,58,.16);
  --shadow-lime:0 10px 30px rgba(165,206,38,.45);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-slam:cubic-bezier(.76,0,.24,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--ink);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
/* clip horizontal overflow on the wrapper (not html/body — that breaks scroll) */
#smooth{position:relative;overflow:hidden}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--lime);color:var(--lime-ink)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:#C4CEDA;border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ============ CURSOR ============ */
.cursor-dot,.cursor-ring{display:none}
@media (hover:hover) and (pointer:fine){
  .cursor-dot,.cursor-ring{display:block;position:fixed;top:0;left:0;z-index:2000;pointer-events:none;border-radius:50%}
  .cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--navy)}
  .cursor-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border:1.5px solid rgba(141,179,29,.7);
    transition:width .28s var(--ease-out),height .28s var(--ease-out),margin .28s,border-color .28s,background-color .28s}
  body.cursor-hot .cursor-ring{width:66px;height:66px;margin:-33px 0 0 -33px;background:rgba(165,206,38,.12);border-color:var(--lime-dark)}
}

/* ============ GRAIN + SCROLL PROGRESS ============ */
.grain{position:fixed;inset:-8%;z-index:1500;pointer-events:none;opacity:.028;height:100svh;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:1600;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--lime-dark),var(--lime));box-shadow:0 0 12px rgba(165,206,38,.8)}

/* ============ SPLASH ============ */
#splash{position:fixed;inset:0;z-index:3000;background:var(--navy-deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;transition:transform .9s var(--ease-slam)}
#splash.gone{transform:translateY(-100%)}
#splash .logo{font-family:var(--font-display);font-weight:800;font-size:clamp(64px,12vw,110px);letter-spacing:.03em;color:#fff;text-transform:uppercase;line-height:1;position:relative;overflow:hidden;padding:0 14px}
#splash .logo b{color:var(--lime)}
#splash .logo::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-110%);animation:sheen 1.5s ease .2s infinite}
@keyframes sheen{to{transform:translateX(110%)}}
#splash .boot{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.12em;color:#7d90ab;text-transform:uppercase;min-height:16px;text-align:center}
#splash .boot .ok{color:var(--lime)}
#splash .bar{width:min(300px,70vw);height:3px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden}
#splash .bar i{display:block;height:100%;width:0;background:var(--lime);border-radius:99px;transition:width .25s ease}
#splash .tag{color:#7d90ab;font-size:12px;letter-spacing:.4em;text-transform:uppercase;margin-top:-8px}

/* ============ NAV ============ */
#nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:6px;padding:8px 10px;
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-pill);box-shadow:var(--shadow);
  opacity:0;translate:0 -20px;transition:opacity .6s var(--ease-out),translate .6s var(--ease-out)}
#nav.on{opacity:1;translate:0 0}
#nav .mark{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:.04em;text-transform:uppercase;padding:0 12px 0 8px;color:var(--ink)}
#nav .mark b{color:var(--lime-dark)}
#nav a.link{font-size:12.5px;font-weight:600;color:var(--ink-2);padding:8px 14px;border-radius:var(--r-pill);transition:color .2s,background .2s}
#nav a.link:hover{color:var(--ink);background:var(--bg-2)}
#nav a.link.active{color:var(--lime-dark)}
#nav .cta{font-size:12.5px;font-weight:700;color:var(--lime-ink);background:var(--lime);padding:9px 18px;border-radius:var(--r-pill);white-space:nowrap;transition:background .2s,box-shadow .25s}
#nav .cta:hover{background:#B4DC35;box-shadow:var(--shadow-lime)}
@media (max-width:820px){#nav .link{display:none}}

/* ============ TYPE ============ */
.display{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.95;color:var(--ink)}
.display b,.display em{color:var(--lime-dark);font-style:normal}
.on-navy .display{color:#fff}
.on-navy .display b,.on-navy .display em{color:var(--lime)}

/* ============ HERO — light, structured ============ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(168deg,#FFFFFF 0%,#EAEFF6 46%,#DFE7F1 100%)}
.hero-bg{position:absolute;inset:-10% -10% 0;z-index:0;pointer-events:none}
.hero-bg::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(11,31,58,.08) 1px,transparent 1px);background-size:26px 26px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.2) 60%,rgba(0,0,0,.5));
  inset:-140px -280px;animation:gridDrift 150s linear infinite;will-change:transform}
.hero-bg::after{content:"";position:absolute;width:1100px;height:1100px;border-radius:50%;top:-520px;right:-300px;
  background:radial-gradient(circle,rgba(165,206,38,.20),rgba(165,206,38,0) 62%);animation:glowPulse 9s ease-in-out infinite alternate}
/* translate by exact multiples of the 26px dot grid so the loop is seamless,
   and use transform so the compositor handles it (no per-frame repaint) */
@keyframes gridDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(260px,130px,0)}}
@keyframes glowPulse{from{opacity:.72}to{opacity:1}}
.hero-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:130px 24px 90px;gap:26px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);
  padding:9px 18px;border:1px solid rgba(255,255,255,.9);border-radius:var(--r-pill);background:rgba(255,255,255,.86);box-shadow:0 4px 16px rgba(11,31,58,.07)}
.kicker .pulse{width:7px;height:7px;border-radius:50%;background:var(--lime-dark);box-shadow:0 0 0 0 rgba(141,179,29,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(141,179,29,.5)}70%{box-shadow:0 0 0 12px rgba(141,179,29,0)}100%{box-shadow:0 0 0 0 rgba(141,179,29,0)}}
.hero-h1{color:var(--ink);font-size:clamp(52px,9vw,124px);max-width:1100px}
.hero-h1 b{color:var(--lime-dark)}
.hero-h1 .ln{display:block;overflow:hidden;padding:0 .06em}
.hero-h1 .ln span{display:inline-block}
.hero .sub{max-width:640px;color:var(--ink-2);font-size:clamp(15px,1.6vw,17.5px)}
.nda-chip{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);padding:7px 14px;border-radius:var(--r-pill);box-shadow:0 2px 8px rgba(11,31,58,.06)}
.nda-chip svg{color:var(--lime-dark)}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:var(--r-pill);font-weight:700;font-size:14.5px;line-height:1;transition:box-shadow .3s,background .2s,border-color .2s,color .2s}
.btn svg{transition:transform .25s var(--ease-out)}
.btn:hover svg{transform:translateX(4px)}
.btn-lime{background:var(--lime);color:var(--lime-ink);box-shadow:0 6px 20px rgba(165,206,38,.4)}
.btn-lime:hover{background:#B4DC35;box-shadow:var(--shadow-lime)}
.btn-ghost{color:var(--ink);border:1px solid var(--line-2);background:var(--surface)}
.btn-ghost:hover{border-color:var(--lime-dark);color:var(--lime-dark)}
.hero-stats{position:relative;z-index:2;display:flex;justify-content:center;gap:clamp(28px,6vw,84px);padding:0 24px 60px;flex-wrap:wrap}
.hstat{text-align:center}
.hstat .v{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,4.6vw,54px);color:var(--ink);line-height:1}
.hstat .v i{font-style:normal;color:var(--lime-dark)}
.hstat .l{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-top:7px}
.scroll-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:2;width:26px;height:42px;border:1.5px solid var(--line-2);border-radius:14px;display:flex;justify-content:center;padding-top:7px;background:rgba(255,255,255,.5)}
.scroll-hint i{width:3px;height:9px;border-radius:3px;background:var(--lime-dark);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(12px);opacity:.2}}

/* ============ MARQUEE + TICKER ============ */
.marquee-wrap{position:relative;z-index:3;overflow:hidden}
.marquee{display:flex;white-space:nowrap;overflow:hidden;user-select:none}
.marquee .track{display:flex;flex-shrink:0;align-items:center;animation:marq 34s linear infinite}
.marquee.rev .track{animation-direction:reverse}
.marquee span{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.6vw,30px);text-transform:uppercase;letter-spacing:.06em;padding:16px 26px;display:inline-flex;align-items:center;gap:26px}
.marquee span::after{content:"◆";font-size:11px}
.marquee.navy{background:var(--navy)}
.marquee.navy span{color:rgba(255,255,255,.92)}
.marquee.navy span::after{color:var(--lime)}
.marquee.deep{background:var(--navy-deep)}
.marquee.lime{background:var(--lime)}
.marquee.lime span{color:var(--lime-ink)}
.marquee.lime span::after{color:var(--lime-ink)}
.ticker{background:var(--navy-deep);border-top:1px solid rgba(255,255,255,.08)}
.ticker .track{animation-duration:46s}
.ticker span{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:12px;font-weight:500;letter-spacing:.08em;color:#9FB3CC;padding:11px 22px;text-transform:none;gap:22px}
.ticker span b{color:var(--lime);font-weight:700}
.ticker span::after{content:"·";color:#3D5573;font-size:14px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
.section{position:relative;padding:clamp(90px,12vh,150px) 24px;max-width:1280px;margin:0 auto}
.section-head{position:relative;margin-bottom:clamp(44px,6vw,72px)}
.sec-index{position:absolute;top:-.45em;left:-.06em;z-index:0;pointer-events:none;font-family:var(--font-display);font-weight:800;font-size:clamp(120px,22vw,260px);line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(11,31,58,.08)}
.sec-kicker{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--lime-dark);margin-bottom:14px}
.sec-kicker::before{content:"";width:34px;height:1.5px;background:var(--lime-dark)}
.on-navy .sec-kicker{color:var(--lime)}.on-navy .sec-kicker::before{background:var(--lime)}
.section-head h2{position:relative;z-index:1;font-size:clamp(44px,7vw,86px);max-width:950px}
.section-head p.lead{position:relative;z-index:1;color:var(--ink-2);max-width:580px;margin-top:16px;font-size:16px}
.on-navy .section-head p.lead,.on-navy .lead{color:#AEBFD6}

/* ============ METRICS ============ */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:900px){.metrics{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.metrics{grid-template-columns:1fr}}
.metric{background:var(--surface);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-lg);padding:clamp(26px,3.6vw,42px) clamp(20px,2.8vw,34px);position:relative;overflow:hidden;box-shadow:var(--shadow);transition:transform .35s var(--ease-out),box-shadow .35s}
.metric:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.metric::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--lime);transition:width .6s var(--ease-out)}
.metric:hover::after{width:100%}
.metric .v{font-family:var(--font-display);font-weight:800;font-size:clamp(44px,5.6vw,70px);line-height:1;color:var(--ink)}
.metric .v i{font-style:normal;color:var(--lime-dark)}
.metric .l{margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.metric .d{margin-top:8px;font-size:13px;color:var(--ink-2)}

/* ============ PROFILES — editorial featured showcase ============ */
.showcase-sec{max-width:1300px}
.showcase{display:grid;grid-template-columns:1.28fr .72fr;gap:clamp(30px,5vw,72px);align-items:center;margin-top:6px}
@media (max-width:900px){.showcase{grid-template-columns:1fr;gap:34px}}

.sc-media{position:relative}
.sc-media::before{content:"";position:absolute;inset:-14% -10% -20%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 60% at 40% 40%,rgba(165,206,38,.16),transparent 70%);filter:blur(10px)}
.sc-shot{position:relative;z-index:1;border-radius:20px;overflow:hidden;background:#0d0f14;
  box-shadow:0 50px 110px rgba(11,31,58,.28),0 14px 34px rgba(11,31,58,.16);cursor:zoom-in}
.sc-shot::after{content:"";position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}
.sc-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:#0d0f14;
  opacity:0;transition:opacity .35s ease}
.sc-shot img.on{opacity:1}
/* liquid filter is applied ONLY while animating (added/removed in JS) so the
   image is a zero-cost sharp render at rest */
.sc-shot.is-liquid img.on{filter:url(#liquid)}

/* transition blades: skewed panels that sweep across and cover the swap */
.sc-blade{position:absolute;top:-12%;bottom:-12%;left:-22%;right:-22%;z-index:6;pointer-events:none;
  transform:skewX(-14deg);visibility:hidden;will-change:transform}
.sc-blade.navy{background:var(--navy-deep);z-index:6}
.sc-blade.lime{background:linear-gradient(100deg,var(--lime) 0%,#8DB31D 100%);z-index:7}

/* giant ghost profile number behind the layout */
.showcase{position:relative}
.sc-ghost{position:absolute;right:-2%;top:-16%;z-index:0;pointer-events:none;
  font-family:var(--font-display);font-weight:800;font-size:clamp(150px,21vw,300px);line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(11,31,58,.07)}
.sc-media,.sc-info{position:relative;z-index:1}

/* char-split masks for the role title (word wrappers prevent mid-word breaks) */
.sc-role .wd{display:inline-block;white-space:nowrap}
.sc-role .chw{display:inline-block;overflow:hidden;vertical-align:top}
.sc-role .ch{display:inline-block}
/* masked stat values */
.sc-stats div{overflow:hidden}

/* rolling counter */
.sc-count{overflow:hidden}
.sc-count b{display:inline-block}

.sc-info{min-width:0}
.sc-label{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--lime-dark);font-weight:700}
.sc-label span{color:var(--ink-3)}
.sc-role{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.98;
  font-size:clamp(38px,5vw,64px);color:var(--ink);margin-top:14px}
.sc-title{color:var(--ink-2);font-size:clamp(14px,1.5vw,16.5px);margin-top:14px;max-width:440px}
.sc-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.sc-stats{display:grid;grid-template-columns:repeat(2,auto);gap:24px 48px;margin-top:30px;width:max-content}
.sc-stats b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.4vw,46px);line-height:1;color:var(--ink)}
.sc-stats div:nth-child(1) b,.sc-stats div:nth-child(3) b{color:var(--lime-dark)}
.sc-stats span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.sc-view{display:inline-flex;align-items:center;gap:8px;margin-top:32px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink);
  border-bottom:2px solid var(--lime);padding-bottom:4px;transition:gap .25s,color .2s}
.sc-view:hover{gap:12px;color:var(--lime-dark)}
.sc-view svg{transition:transform .25s}
.sc-view:hover svg{transform:translate(2px,-2px)}
.sc-info.anim>*{animation:scIn .7s var(--ease-out) both}
.sc-info.anim .sc-role{animation-delay:.04s}.sc-info.anim .sc-title{animation-delay:.08s}
.sc-info.anim .sc-badges{animation-delay:.12s}.sc-info.anim .sc-stats{animation-delay:.16s}.sc-info.anim .sc-view{animation-delay:.2s}
@keyframes scIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.sc-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:clamp(34px,5vw,56px)}
.sc-arrow{width:52px;height:52px;border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink);
  display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s,color .2s,box-shadow .25s}
.sc-arrow:hover{background:var(--lime);color:var(--lime-ink);transform:scale(1.08);box-shadow:var(--shadow-lime)}
.sc-arrow:active{transform:scale(.94)}
.sc-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-width:440px}
.sc-dot{width:7px;height:7px;border-radius:50%;background:var(--line-2);cursor:pointer;transition:width .3s,background .3s}
.sc-dot:hover{background:var(--ink-3)}
.sc-dot.on{background:var(--line-2);width:22px;border-radius:99px;position:relative;overflow:hidden}
/* the active dot FILLS over the autoplay interval — visible auto-advance */
.sc-dot.on::after{content:"";position:absolute;inset:0;border-radius:99px;background:var(--lime-dark);transform:scaleX(0);transform-origin:0 50%}
.sc-dot.on.fill::after{animation:dotfill 5.2s linear forwards}
@keyframes dotfill{to{transform:scaleX(1)}}
.sc-count{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:.1em;color:var(--ink);margin-left:4px}
.sc-count b{color:var(--lime-dark)}.sc-count span{color:var(--ink-3)}
@media (max-width:560px){.sc-count{display:none}}

/* fallback grid (reduced-motion / capture) — reuse cf-card markup */
.gallery-fallback.as-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
@media (max-width:1020px){.gallery-fallback.as-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.gallery-fallback.as-grid{grid-template-columns:1fr}}
.cf-card{position:relative;background:var(--surface);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);cursor:zoom-in;transition:transform .3s var(--ease-out),box-shadow .3s}
.gallery-fallback .cf-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl)}
.cf-frame{position:relative;background:#0A1830}
.cf-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:#0E2140;border-bottom:1px solid rgba(255,255,255,.07)}
.cf-bar i{width:9px;height:9px;border-radius:50%;background:#2C4568}
.cf-bar i:nth-child(1){background:#E5484D}.cf-bar i:nth-child(2){background:#F5A623}.cf-bar i:nth-child(3){background:var(--lime)}
.cf-bar span{margin-left:8px;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:10px;color:#5E7391;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-shot{position:relative;aspect-ratio:16/9.4;overflow:hidden;background:#0d0f14}
.cf-shot img{width:100%;height:100%;object-fit:cover;object-position:left top}
.cf-body{padding:18px 20px 20px}
.cf-top{display:flex;align-items:center;justify-content:space-between}
.cf-top .code{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.16em;color:var(--lime-dark);font-weight:700}
.cf-top .rate{font-weight:700;font-size:13px;color:var(--lime-dark)}
.cf-role{font-family:var(--font-display);font-weight:700;font-size:26px;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);margin-top:8px;line-height:1}
.cf-title{margin-top:7px;font-size:12px;color:var(--ink-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.cf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;min-height:24px}
.cf-nums{display:flex;margin-top:15px;border-top:1px solid var(--line);padding-top:14px}
.cf-nums div{flex:1}
.cf-nums .v{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--ink);line-height:1}
.cf-nums .v i{font-style:normal;color:var(--lime-dark)}
.cf-nums .l{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}

/* ============ CHIPS ============ */
.chip{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--ink-2);background:var(--surface)}
.chip.hot{background:rgba(165,206,38,.14);border-color:rgba(141,179,29,.6);color:var(--lime-dark)}
.chip.blue{background:rgba(46,107,230,.1);border-color:rgba(46,107,230,.45);color:#2E6BE6}

/* ============ PROOF — coverflow marquee ============ */
.proof-band{max-width:none;padding-left:0;padding-right:0}
.proof-band .section-head{max-width:1280px;margin-left:auto;margin-right:auto;padding:0 24px}
.proof-rows{display:flex;flex-direction:column;gap:26px;perspective:1400px}
.proof-row{display:flex;width:max-content;animation:marq 38s linear infinite}
.proof-row:nth-child(2){animation-duration:44s}
.proof-row.rev{animation-direction:reverse}
.proof-row:hover{animation-play-state:paused}
.proof-card{position:relative;width:clamp(300px,32vw,440px);border-radius:18px;overflow:hidden;background:transparent;flex-shrink:0;margin-right:24px;transition:transform .3s var(--ease-out)}
.proof-card:hover{transform:translateY(-6px)}
.proof-img{border-radius:18px;overflow:hidden;background:#0d0f14;box-shadow:0 14px 30px rgba(11,31,58,.20),0 4px 10px rgba(11,31,58,.10)}
.proof-img img{width:100%;display:block}
.proof-card .cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 4px 0;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--ink-2)}
.proof-card .cap b{color:var(--lime-dark);font-size:14px;white-space:nowrap}

#lightbox{position:fixed;inset:0;z-index:2500;background:rgba(11,31,58,.55);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;padding:5vw;opacity:0;pointer-events:none;transition:opacity .35s}
#lightbox.on{opacity:1;pointer-events:auto}
#lightbox img{max-width:min(1000px,92vw);max-height:86vh;border-radius:var(--r);background:#0d0f14;border:6px solid #fff;box-shadow:0 40px 120px rgba(11,31,58,.5);transform:scale(.92);transition:transform .35s var(--ease-out)}
#lightbox.on img{transform:scale(1)}
#lightbox .x{position:absolute;top:26px;right:30px;font-size:15px;font-weight:700;color:#fff;letter-spacing:.2em;text-transform:uppercase;transition:color .2s}
#lightbox .x:hover{color:var(--lime)}

/* ============ PROCESS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1020px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.steps{grid-template-columns:1fr}}
.step{position:relative;background:var(--surface);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-lg);padding:30px 26px 28px;overflow:hidden;box-shadow:var(--shadow);transition:transform .3s var(--ease-out),box-shadow .3s}
.step:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.step .n{font-family:var(--font-display);font-weight:800;font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:1.3px rgba(141,179,29,.7)}
.step h3{font-family:var(--font-display);font-weight:700;font-size:26px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);margin-top:16px}
.step p{color:var(--ink-2);font-size:13.5px;margin-top:9px}
.step::after{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--lime),transparent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.step:hover::after{transform:scaleX(1)}

/* ============ CTA + FOOTER ============ */
.cta-sec{max-width:1280px}
.cta-panel{position:relative;background:linear-gradient(160deg,#16355C 0%,var(--navy-deep) 72%);border-radius:var(--r-xl);padding:clamp(60px,9vw,110px) clamp(24px,6vw,80px);text-align:center;overflow:hidden;box-shadow:var(--shadow-lg)}
.cta-panel::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,.1))}
.cta-panel::after{content:"";position:absolute;width:700px;height:700px;border-radius:50%;bottom:-380px;left:-200px;background:radial-gradient(circle,rgba(165,206,38,.2),rgba(165,206,38,0) 60%)}
.cta-panel>*{position:relative;z-index:1}
.cta-panel h2{font-size:clamp(50px,8vw,110px)}
.cta-panel .lead{margin:18px auto 0;max-width:520px}
.cta-panel .hero-ctas{margin-top:34px}
footer{padding:34px 24px;max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
footer .mark{font-family:var(--font-display);font-weight:800;font-size:22px;text-transform:uppercase;color:var(--ink)}
footer .mark b{color:var(--lime-dark)}
footer p{font-size:12px;color:var(--ink-3)}
footer .soc{display:flex;gap:18px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
footer .soc a:hover{color:var(--lime-dark)}

/* ============ MOTION SAFETY ============ */
@media (prefers-reduced-motion:reduce){
  /* stop looping motion outright instead of racing it at .001s */
  .marquee .track,.ticker .track,.proof-row,.grain,
  .hero-bg::before,.hero-bg::after,.kicker .pulse,.scroll-hint i{animation:none !important}
  *,*::before,*::after{animation-duration:.001s !important}
  .hero-inner{opacity:1 !important}
  /* headliner rows are fully static without GSAP; the reveal veil must not
     sit over the screenshots when the reveal never runs */
  .hl-veil,.card-veil{display:none !important}
  .showcase,.sc-nav{display:none}
}

/* ============ PINNED SCROLL-DRIVEN SHOWCASE (desktop) ============ */
#profiles.sc-pin{padding:76px 24px 40px;display:flex;flex-direction:column;justify-content:center;min-height:100svh}
#profiles.sc-pin .section-head{margin-bottom:clamp(16px,2.4vh,28px)}
#profiles.sc-pin .section-head h2{font-size:clamp(32px,4.2vw,54px)}
#profiles.sc-pin .section-head p.lead{margin-top:8px;font-size:14px;max-width:560px}
#profiles.sc-pin .sc-shot{max-height:50vh}
#profiles.sc-pin .sc-nav{margin-top:clamp(16px,3vh,32px)}
#profiles.sc-pin .sc-hint{display:inline-flex;align-items:center;gap:10px;margin-left:18px;
  font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
#profiles.sc-pin .sc-hint svg{color:var(--lime-dark);animation:hintNudge 1.6s ease-in-out infinite}
@keyframes hintNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ============ DARK SHOWCASE STAGE (#profiles) ============ */
#profiles{max-width:none;background:
  radial-gradient(900px 520px at 85% -10%,rgba(165,206,38,.13),transparent 60%),
  linear-gradient(165deg,#123055 0%,#0B1F3A 45%,#081627 100%)}
#profiles::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:26px 26px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.12) 55%,rgba(0,0,0,.35))}
#profiles>*{position:relative;z-index:1}
#profiles .section-head,#profiles .showcase,#profiles .sc-nav{max-width:1280px;margin-left:auto;margin-right:auto;width:100%}
#profiles .section-head h2{color:#fff}
#profiles .section-head h2 b{color:var(--lime)}
#profiles .sec-kicker{color:var(--lime)}
#profiles .sec-kicker::before{background:var(--lime)}
#profiles .section-head p.lead{color:#AEBFD6}
#profiles .sec-index{-webkit-text-stroke:1.2px rgba(255,255,255,.10)}
#profiles .sc-ghost{-webkit-text-stroke:2px rgba(255,255,255,.10)}
#profiles .sc-label{color:var(--lime)}
#profiles .sc-label span{color:#7D90AB}
#profiles .sc-role{color:#fff}
#profiles .sc-title{color:#AEBFD6}
#profiles .sc-stats b{color:#fff}
#profiles .sc-stats div:nth-child(1) b,#profiles .sc-stats div:nth-child(3) b{color:var(--lime)}
#profiles .sc-stats span{color:#7D90AB}
#profiles .sc-view{color:#fff;border-bottom-color:var(--lime)}
#profiles .sc-view:hover{color:var(--lime)}
#profiles .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#CDD9E8}
#profiles .chip.hot{background:rgba(165,206,38,.16);border-color:rgba(165,206,38,.6);color:var(--lime)}
#profiles .chip.blue{background:rgba(94,150,255,.15);border-color:rgba(94,150,255,.5);color:#8FB3F7}
#profiles .sc-arrow{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);color:#fff;box-shadow:none}
#profiles .sc-arrow:hover{background:var(--lime);color:var(--lime-ink);box-shadow:var(--shadow-lime)}
#profiles .sc-dot{background:rgba(255,255,255,.22)}
#profiles .sc-dot:hover{background:rgba(255,255,255,.5)}
#profiles .sc-dot.on{background:rgba(255,255,255,.28)}
#profiles .sc-dot.on::after{background:var(--lime)}
#profiles .sc-count{color:#fff}
#profiles .sc-count b{color:var(--lime)}
#profiles .sc-count span{color:#7D90AB}
#profiles .sc-hint{color:#7D90AB}
#profiles .sc-hint svg{color:var(--lime)}
#profiles .sc-shot{box-shadow:0 50px 110px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)}
#profiles .sc-media::before{background:radial-gradient(60% 60% at 40% 40%,rgba(165,206,38,.20),transparent 70%)}
/* blades on the dark stage: lime + white sweep */
#profiles .sc-blade.navy{background:#E9EFF7}

/* bottom progress across the pinned stage */
.sc-progress{position:absolute;left:clamp(24px,6vw,90px);right:clamp(24px,6vw,90px);bottom:24px;height:3px;
  background:rgba(255,255,255,.14);border-radius:99px;overflow:hidden;z-index:2}
.sc-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--lime-dark),var(--lime));
  transform:scaleX(0);transform-origin:0 50%}

/* ============ 02b THE BENCH — dark continuation of the stage ============ */
#bench{max-width:none;background:#081627;position:relative;padding-top:clamp(60px,8vh,100px)}
#bench::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:26px 26px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,.08))}
#bench>*{position:relative;z-index:1}
#bench .section-head,#bench .bench-grid{max-width:1280px;margin-left:auto;margin-right:auto}
#bench .section-head{margin-bottom:clamp(28px,4vw,44px)}
#bench .section-head h2{color:#fff;font-size:clamp(36px,5vw,64px)}
#bench .section-head h2 b{color:var(--lime)}
#bench .sec-kicker{color:var(--lime)}
#bench .sec-kicker::before{background:var(--lime)}
#bench .section-head p.lead{color:#AEBFD6}
#bench .bench-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;width:100%}
@media (max-width:1080px){#bench .bench-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){#bench .bench-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){#bench .bench-grid{grid-template-columns:1fr}}
#bench .cf-card{background:#0E2340;border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 26px rgba(0,0,0,.42)}
#bench .cf-card:hover{transform:translateY(-6px);border-color:rgba(165,206,38,.45);box-shadow:0 16px 36px rgba(0,0,0,.55)}
#bench .cf-role{color:#fff;font-size:20px}
#bench .cf-title{color:#9FB0C6;font-size:11px;min-height:32px}
#bench .cf-top .code{color:var(--lime)}
#bench .cf-top .rate{color:var(--lime)}
#bench .cf-nums{border-top:1px solid rgba(255,255,255,.1)}
#bench .cf-nums .v{color:#fff}
#bench .cf-nums .v i{color:var(--lime)}
#bench .cf-nums .l{color:#6E86A4}
#bench .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#CDD9E8}
#bench .chip.hot{background:rgba(165,206,38,.16);border-color:rgba(165,206,38,.6);color:var(--lime)}
#bench .chip.blue{background:rgba(94,150,255,.15);border-color:rgba(94,150,255,.5);color:#8FB3F7}

/* ============ HEADLINER ROWS — alternating editorial walk ============ */
#hl-rows{position:relative;z-index:1;max-width:1280px;margin:0 auto;width:100%;
  display:flex;flex-direction:column;gap:clamp(70px,11vh,130px);padding-top:10px}
.hl-row{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4.5vw,70px);align-items:center}
.hl-row.flip .hl-media{order:2}
.hl-row.flip .hl-info{order:1}
.hl-ghost{position:absolute;top:-14%;right:-2%;z-index:0;pointer-events:none;
  font-family:var(--font-display);font-weight:800;font-size:clamp(120px,15vw,220px);line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.09)}
.hl-row.flip .hl-ghost{right:auto;left:-2%}
.hl-media{position:relative;z-index:1;border-radius:20px;overflow:hidden;background:#0d0f14;cursor:zoom-in;
  box-shadow:0 20px 42px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.08)}
.hl-media img{width:100%;display:block}
.hl-media::after{content:"";position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}
.hl-veil{position:absolute;inset:-1px;z-index:2;background:linear-gradient(100deg,var(--lime) 0%,#8DB31D 100%)}
.hl-info{position:relative;z-index:1;min-width:0}
@media (max-width:900px){
  .hl-row{grid-template-columns:1fr;gap:22px}
  .hl-row.flip .hl-media{order:0}
  .hl-row.flip .hl-info{order:1}
  .hl-ghost{font-size:110px;top:-40px}
}

/* ============ STAT DOORS — expanding accordion (AGS-style) ============ */
.metrics.stat-doors{display:flex;grid-template-columns:none;gap:12px;height:clamp(300px,36vw,380px)}
.sdoor{
  position:relative;flex:1;overflow:hidden;cursor:pointer;isolation:isolate;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
  border:1px solid rgba(255,255,255,.07);border-radius:var(--r-lg);
  box-shadow:var(--shadow);outline-offset:4px;
  transition:flex .85s var(--ease-slam),box-shadow .4s var(--ease-out);
}
.sdoor.is-open{flex:3.1;box-shadow:var(--shadow-lg)}
.sdoor::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(90% 55% at 50% 112%,rgba(165,206,38,.28),transparent 62%);
  transition:opacity .7s var(--ease-out);
}
.sdoor.is-open::before{opacity:1}
.sdoor::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:2;
  background:var(--lime);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-out) .15s;
}
.sdoor.is-open::after{transform:scaleX(1)}
.sdoor-ghost{
  position:absolute;top:-12px;right:6px;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--font-display);font-weight:800;font-size:clamp(90px,10vw,150px);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);
  opacity:0;transition:opacity .6s var(--ease-out) .2s;
}
.sdoor.is-open .sdoor-ghost{opacity:1}
.sdoor-spine{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  display:flex;align-items:center;gap:14px;writing-mode:vertical-rl;
  transition:opacity .35s var(--ease-out);white-space:nowrap;
}
.sdoor-spine .no{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.3em;color:var(--lime)}
.sdoor-spine .lb{font-family:var(--font-display);font-weight:700;font-size:clamp(15px,1.5vw,19px);letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.sdoor.is-open .sdoor-spine{opacity:0}
.sdoor-body{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:clamp(20px,2.6vw,34px) clamp(20px,2.6vw,34px) clamp(24px,2.9vw,38px);
  opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease-out) .22s,transform .55s var(--ease-out) .22s;
}
.sdoor.is-open .sdoor-body{opacity:1;transform:none}
.sdoor-body .v{font-family:var(--font-display);font-weight:800;font-size:clamp(46px,5.4vw,72px);line-height:1;color:#fff;white-space:nowrap}
.sdoor-body .v i{font-style:normal;color:var(--lime)}
.sdoor-body .l{margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.sdoor-body .d{margin-top:8px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.72);max-width:34em;min-width:230px}
@media (max-width:900px){
  .metrics.stat-doors{flex-direction:column;height:auto}
  .sdoor{min-height:64px;flex:none;transition:min-height .7s var(--ease-slam),box-shadow .4s}
  .sdoor.is-open{flex:none;min-height:250px}
  .sdoor-spine{left:20px;top:auto;bottom:18px;transform:none;writing-mode:horizontal-tb}
  .sdoor.is-open .sdoor-spine{opacity:0}
  .sdoor-ghost{top:auto;bottom:-18px}
  .sdoor-body .v{font-size:clamp(42px,11vw,60px)}
}
@media (prefers-reduced-motion:reduce){
  .sdoor,.sdoor::before,.sdoor::after,.sdoor-body,.sdoor-ghost,.sdoor-spine{transition:none}
}

/* ============ BENCH DOORS — profile accordion rows (AGS-style) ============ */
#bench .bench-grid.as-doors{display:flex;flex-direction:column;gap:16px;grid-template-columns:none}
.bench-doors{display:flex;gap:12px;height:clamp(330px,30vw,430px)}
.bdoor{
  position:relative;flex:1;overflow:hidden;cursor:pointer;isolation:isolate;
  background:#0E2340;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);
  outline-offset:4px;box-shadow:0 20px 50px rgba(0,0,0,.4);
  transition:flex .85s var(--ease-slam),border-color .5s,box-shadow .4s;
}
.bdoor.is-open{flex:3.4;border-color:rgba(165,206,38,.45);box-shadow:0 16px 36px rgba(0,0,0,.55)}
.bdoor-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:0;
  filter:brightness(.30) saturate(.75);transform:scale(1.06);
  transition:filter .7s var(--ease-out),transform 1.2s var(--ease-out);
}
.bdoor.is-open .bdoor-img{filter:brightness(.44) saturate(.9);transform:scale(1)}
.bdoor::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,22,39,.97) 16%,rgba(8,22,39,.42) 58%,rgba(8,22,39,.55) 100%);
}
.bdoor::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;
  background:var(--lime);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-out) .15s;
}
.bdoor.is-open::after{transform:scaleX(1)}
.bdoor-ghost{
  position:absolute;top:-14px;right:8px;z-index:1;pointer-events:none;user-select:none;
  font-family:var(--font-display);font-weight:800;font-size:clamp(100px,11vw,160px);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);
  opacity:0;transition:opacity .6s var(--ease-out) .2s;
}
.bdoor.is-open .bdoor-ghost{opacity:1}
.bdoor-spine{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:flex;align-items:center;gap:12px;writing-mode:vertical-rl;white-space:nowrap;
  transition:opacity .35s var(--ease-out);
}
.bdoor-spine .no{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.28em;color:var(--lime)}
.bdoor-spine .lb{font-family:var(--font-display);font-weight:700;font-size:clamp(14px,1.3vw,17px);letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.bdoor.is-open .bdoor-spine{opacity:0}
.bdoor-body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(18px,2.2vw,30px);
  opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease-out) .22s,transform .55s var(--ease-out) .22s;
}
.bdoor.is-open .bdoor-body{opacity:1;transform:none}
.bd-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.14em}
.bd-top .code{color:var(--lime)}
.bd-top .rate{color:var(--lime)}
.bd-role{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2vw,30px);line-height:1.05;color:#fff;margin-top:8px;text-transform:uppercase;letter-spacing:.02em}
.bd-title{font-size:12.5px;line-height:1.5;color:#AEBFD6;margin-top:6px;max-width:46em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bdoor .cf-nums{border-top:1px solid rgba(255,255,255,.12);max-width:420px}
.bdoor .cf-nums .v{color:#fff}
.bdoor .cf-nums .v i{color:var(--lime)}
.bdoor .cf-nums .l{color:#6E86A4}
.bd-zoom{display:inline-block;margin-top:12px;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.bdoor.is-open:hover .bd-zoom{color:var(--lime)}
@media (max-width:900px){
  .bench-doors{flex-direction:column;height:auto}
  .bdoor{min-height:60px;flex:none;transition:min-height .7s var(--ease-slam),border-color .5s}
  .bdoor.is-open{flex:none;min-height:360px}
  /* Anchor the spine to the TOP on mobile. .bdoor-body is bottom-anchored, so a
     bottom-anchored spine shared the same strip and the two cross-faded over
     each other on every open. Desktop never had this: there the spine is
     centred while the body sits at the bottom. */
  .bdoor-spine{left:18px;top:18px;bottom:auto;transform:none;writing-mode:horizontal-tb}
  /* Same top-bleed the desktop ghost uses. Bottom-anchored, a 100px numeral sat
     directly behind the stat row and read as a cut-off number. */
  .bdoor-ghost{top:-14px;bottom:auto}
}
@media (prefers-reduced-motion:reduce){
  .bdoor,.bdoor-img,.bdoor::after,.bdoor-body,.bdoor-ghost,.bdoor-spine{transition:none}
}

/* ============ RECEIPT PRINTER — vertical proof feed ============ */
.proof-cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  max-width:1280px;margin:0 auto;padding:0 24px;
  height:clamp(540px,66vh,720px);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);
}
.proof-col{overflow:hidden}
.proof-col.c2{margin-top:-46px}
.pcol-track{display:flex;flex-direction:column;gap:24px;will-change:transform;animation:pcol-up 62s linear infinite}
.proof-col.c2 .pcol-track{animation-duration:80s;animation-direction:reverse}
.proof-col.c3 .pcol-track{animation-duration:70s}
.proof-col:hover .pcol-track{animation-play-state:paused}
@keyframes pcol-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.proof-cols .proof-card{width:100%;margin-right:0}
@media (max-width:900px){
  .proof-cols{grid-template-columns:repeat(2,1fr);height:520px}
  .proof-col.c3{display:none}
}
@media (max-width:560px){
  .proof-cols{grid-template-columns:1fr;height:480px}
  .proof-col.c2{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pcol-track{animation:none}
  .proof-cols{height:auto;mask-image:none;-webkit-mask-image:none}
}

/* ==========================================================================
   MULTI-PAGE SHELL ADDITIONS (BlackX site revamp)
   ========================================================================== */

/* ---- nav: brand sub-line + dropdown + overflow ---- */
#nav .mark{display:inline-flex;align-items:center;line-height:1}
.nav-item{position:relative}
.nav-item .chev{width:12px;height:12px;margin-left:4px;vertical-align:-1px;transition:transform .25s}
.nav-item:hover .chev,.nav-item:focus-within .chev{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:340px;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-lg);padding:10px;opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility .25s;
}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;pointer-events:auto;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd-head{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);padding:8px 12px 6px}
.dd-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;transition:background .2s}
.dd-item:hover{background:var(--bg)}
.dd-item .dd-ic{flex:0 0 34px;height:34px;border-radius:10px;background:rgba(165,206,38,.14);display:flex;align-items:center;justify-content:center;color:var(--lime-dark)}
.dd-item .dd-ic svg{width:17px;height:17px}
.dd-item b{display:block;font-size:13px;color:var(--ink);line-height:1.25}
.dd-item small{display:block;font-size:11px;color:var(--ink-3);margin-top:1px}
.dd-sep{height:1px;background:var(--line);margin:8px 6px}
.dd-foot{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:12px;font-weight:700;color:var(--lime-dark);border-radius:12px}
.dd-foot:hover{background:var(--bg)}
.dd-foot svg{width:13px;height:13px}
#nav .nx-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);margin-right:7px;box-shadow:0 0 0 0 rgba(165,206,38,.5);animation:pulse 2s infinite}

/* ---- mobile overlay menu ---- */
.nav-burger{display:none;width:38px;height:38px;border-radius:50%;align-items:center;justify-content:center;color:var(--ink)}
.nav-burger svg{width:20px;height:20px}
@media (max-width:820px){.nav-burger{display:flex}}
#mmenu{
  position:fixed;inset:0;z-index:2600;background:linear-gradient(165deg,#123055 0%,#0B1F3A 50%,#081627 100%);
  display:flex;flex-direction:column;justify-content:center;padding:80px 34px 40px;
  opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s var(--ease-out),visibility .4s;
}
#mmenu.on{opacity:1;pointer-events:auto;visibility:visible}
#mmenu::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.1));pointer-events:none}
#mmenu .mm-link{
  position:relative;display:block;font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,9vw,52px);line-height:1.16;color:#fff;padding:4px 0;
  opacity:0;translate:0 24px;transition:opacity .5s var(--ease-out),translate .5s var(--ease-out);
}
#mmenu.on .mm-link{opacity:1;translate:0 0}
#mmenu .mm-link b{color:var(--lime)}
#mmenu .mm-link:nth-child(2){transition-delay:.05s}#mmenu .mm-link:nth-child(3){transition-delay:.1s}
#mmenu .mm-link:nth-child(4){transition-delay:.15s}#mmenu .mm-link:nth-child(5){transition-delay:.2s}
#mmenu .mm-link:nth-child(6){transition-delay:.25s}#mmenu .mm-link:nth-child(7){transition-delay:.3s}
#mmenu .mm-sub{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;opacity:0;transition:opacity .5s ease .35s}
#mmenu.on .mm-sub{opacity:1}
#mmenu .mm-sub a{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7D90AB}
#mmenu .mm-close{position:absolute;top:22px;right:24px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
#mmenu .mm-close:hover{color:var(--lime)}

/* ---- inner-page hero (compact) ---- */
.page-hero{position:relative;overflow:hidden;padding:150px 24px 70px;text-align:center;
  background:linear-gradient(168deg,#FFFFFF 0%,#EAEFF6 46%,#DFE7F1 100%)}
.page-hero .hero-bg{position:absolute;inset:-10% -10% 0;z-index:0;pointer-events:none}
.page-hero h1{position:relative;z-index:1;font-size:clamp(44px,7.5vw,96px);max-width:1000px;margin:0 auto}
.page-hero .kicker{position:relative;z-index:1;margin-bottom:20px}
.page-hero .sub{position:relative;z-index:1;max-width:620px;margin:20px auto 0;color:var(--ink-2);font-size:clamp(15px,1.6vw,17px)}
.page-hero .hero-ctas{position:relative;z-index:1;margin-top:30px}

/* ---- forms (contact) ---- */
.form-card{background:var(--surface);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:clamp(26px,4vw,44px)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.f-field{display:flex;flex-direction:column;gap:7px}
.f-field.full{grid-column:1/-1}
.f-field label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.f-field input,.f-field select,.f-field textarea{
  font-family:var(--font-body);font-size:14px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:12px;padding:13px 15px;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.f-field textarea{min-height:130px;resize:vertical}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  border-color:var(--lime-dark);background:#fff;box-shadow:0 0 0 3px rgba(165,206,38,.18)}
.hp-wrap{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-success{display:none;text-align:center;padding:40px 20px}
.form-success.show{display:block}
.form-success .fs-ic{width:64px;height:64px;border-radius:50%;background:rgba(165,206,38,.16);color:var(--lime-dark);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.form-success h3{font-family:var(--font-display);font-weight:800;font-size:30px;text-transform:uppercase;color:var(--ink)}
.form-success p{color:var(--ink-2);margin-top:8px;font-size:14px}

/* ---- footer (multi-column) ---- */
.site-footer{background:var(--navy-deep);color:#AEBFD6;margin-top:0;padding:0}
.sf-inner{max-width:1280px;margin:0 auto;padding:clamp(50px,7vw,80px) 24px 30px}
.sf-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
@media (max-width:900px){.sf-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.sf-grid{grid-template-columns:1fr}}
.sf-brand .mark{font-family:var(--font-display);font-weight:800;font-size:26px;text-transform:uppercase;color:#fff}
.sf-brand .mark b{color:var(--lime)}
.sf-brand p{font-size:13px;margin-top:10px;max-width:300px}
.sf-col h4{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#7D90AB;margin-bottom:14px}
.sf-col a{display:block;font-size:13.5px;color:#CDD9E8;padding:5px 0;transition:color .2s}
.sf-col a:hover{color:var(--lime)}
.sf-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:#7D90AB}

/* ---- generic light/dark section helpers for inner pages ---- */
.dark-band{max-width:none;background:linear-gradient(165deg,#123055 0%,#0B1F3A 45%,#081627 100%);position:relative}
.dark-band::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.1))}
.dark-band>*{position:relative;z-index:1}
.dark-band .section-head,.dark-band .inner{max-width:1280px;margin-left:auto;margin-right:auto}
.dark-band .section-head h2{color:#fff}
.dark-band .section-head h2 b{color:var(--lime)}
.dark-band .sec-kicker{color:var(--lime)}
.dark-band .sec-kicker::before{background:var(--lime)}
.dark-band .section-head p.lead,.dark-band .lead,.dark-band p.lead{color:#AEBFD6}
.dark-band .sec-index{-webkit-text-stroke:1.2px rgba(255,255,255,.1)}

/* ==========================================================================
   PAGE COMPONENTS (services cards, FAQ, quote, pipeline mockup, audience)
   ========================================================================== */

/* ---- service cards (linked) ---- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1020px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.svc-grid{grid-template-columns:1fr}}
.svc{position:relative;display:block;background:var(--surface);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-lg);padding:28px 24px 24px;overflow:hidden;box-shadow:var(--shadow);transition:transform .3s var(--ease-out),box-shadow .3s}
.svc:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.svc::after{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--lime),transparent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.svc:hover::after{transform:scaleX(1)}
.svc .k{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime-dark);font-weight:700}
.svc h3{font-family:var(--font-display);font-weight:700;font-size:27px;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);margin-top:12px;line-height:1}
.svc p{color:var(--ink-2);font-size:13.5px;margin-top:10px;min-height:78px}
.svc ul{list-style:none;margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.svc li{position:relative;padding:4px 0 4px 24px;font-size:12.5px;color:var(--ink-2)}
.svc li::before{content:"";position:absolute;left:2px;top:10px;width:12px;height:7px;border-left:2.2px solid var(--lime-dark);border-bottom:2.2px solid var(--lime-dark);transform:rotate(-45deg)}
.svc .go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:12.5px;font-weight:700;color:var(--ink);border-bottom:2px solid var(--lime);padding-bottom:3px;transition:gap .25s,color .2s}
.svc:hover .go{gap:12px;color:var(--lime-dark)}

/* ---- FAQ accordion (native details) ---- */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--surface);border:1px solid rgba(255,255,255,.9);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font-weight:700;font-size:15px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:0 0 30px;height:30px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--lime-dark);transition:transform .3s var(--ease-out),background .2s}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--lime);color:var(--lime-ink)}
.faq .fa-body{padding:0 24px 20px;color:var(--ink-2);font-size:14px;max-width:680px}

/* ---- big testimonial quote ---- */
.quote-wrap{max-width:900px;margin:0 auto;text-align:center}
.quote-wrap blockquote{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.6vw,44px);line-height:1.2;color:var(--ink);text-transform:none}
.quote-wrap blockquote b{color:var(--lime-dark)}
.quote-who{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px}
.quote-who img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:var(--shadow)}
.quote-who .qn{text-align:left}
.quote-who .qn b{display:block;font-size:14px;color:var(--ink)}
.quote-who .qn span{font-size:12px;color:var(--ink-3)}

/* ---- pipeline dashboard mockup ---- */
.pipe-panel{background:var(--surface);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);overflow:hidden}
.pipe-bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.pipe-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.pipe-bar i:nth-child(1){background:#E5484D}.pipe-bar i:nth-child(2){background:#F5A623}.pipe-bar i:nth-child(3){background:var(--lime)}
.pipe-bar span{margin-left:8px;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--ink-3)}
.pipe-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 0}
.pipe-head b{font-size:13.5px;color:var(--ink)}
.pipe-live{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--lime-dark);display:inline-flex;align-items:center;gap:6px}
.pipe-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);animation:pulse 2s infinite}
.pipe-sum{display:flex;gap:26px;padding:14px 20px}
.pipe-sum b{display:block;font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--ink);line-height:1}
.pipe-sum b i{font-style:normal;color:var(--lime-dark)}
.pipe-sum span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.pipe-jobs{display:flex;flex-direction:column;gap:10px;padding:4px 20px 20px}
.pipe-job{border:1px solid var(--line);border-radius:14px;padding:13px 16px;display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--bg)}
.pipe-job.won{border-color:rgba(141,179,29,.65);background:rgba(165,206,38,.08)}
.pipe-job .t b{display:block;font-size:13px;color:var(--ink)}
.pipe-job .t span{font-size:11px;color:var(--ink-3)}
.pipe-job .amt{font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--ink);white-space:nowrap}
.pipe-job.won .amt{color:var(--lime-dark)}
.float-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid rgba(255,255,255,.9);border-radius:14px;box-shadow:var(--shadow-lg);padding:10px 14px;font-size:12px;font-weight:600;color:var(--ink-2)}
.float-chip b{color:var(--ink)}
.float-chip .ic{width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.float-chip .ic.blue{background:rgba(46,107,230,.12);color:#2E6BE6}
.float-chip .ic.lime{background:rgba(165,206,38,.16);color:var(--lime-dark)}

/* ---- audience items ---- */
.aud-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1000px}
@media (max-width:760px){.aud-grid{grid-template-columns:1fr}}
.aud{display:flex;gap:16px;background:var(--surface);border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:20px 22px;box-shadow:var(--shadow);transition:transform .3s var(--ease-out),box-shadow .3s}
.aud:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.aud .ic{flex:0 0 44px;height:44px;border-radius:13px;background:rgba(165,206,38,.14);color:var(--lime-dark);display:flex;align-items:center;justify-content:center}
.aud b{display:block;font-size:14.5px;color:var(--ink)}
.aud span{font-size:12.5px;color:var(--ink-2)}

/* ---- 2-col split section ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.feat-list{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:14px}
.feat-list li{position:relative;padding-left:34px;font-size:14px;color:var(--ink-2)}
.feat-list li b{color:var(--ink)}
.feat-list li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:rgba(165,206,38,.16)}
.feat-list li::after{content:"";position:absolute;left:6px;top:8px;width:10px;height:6px;border-left:2.2px solid var(--lime-dark);border-bottom:2.2px solid var(--lime-dark);transform:rotate(-45deg)}


/* 3-column step grids: desktop-only override so the mobile/tablet media
   queries in .steps still win (inline styles used to break this) */
@media (min-width:1021px){ .steps.cols-3{grid-template-columns:repeat(3,1fr)} }

/* 2-column metric bands: desktop/tablet only, collapse on phones */
.metrics.cols-2{gap:16px}
@media (min-width:521px){ .metrics.cols-2{grid-template-columns:1fr 1fr} }


/* ---- card veil: signature lime sweep reveal on step / service cards ---- */
.card-veil{position:absolute;inset:-1px;z-index:5;pointer-events:none;
  background:linear-gradient(100deg,var(--lime) 0%,#8DB31D 100%)}


/* ---- veil hosts: cards need clipping + a stacking context ---- */
.aud{position:relative;overflow:hidden}
/* ---- split-flap letters (AGS LUX signature) ---- */
.fl{display:inline-block;backface-visibility:hidden}
.fl.is-flapping{min-width:.62em;text-align:center}
.fl.is-flapping{color:var(--lime-dark)}
.dark-band .fl.is-flapping,.on-navy .fl.is-flapping{color:var(--lime)}


/* ==========================================================================
   DOORS — expanding accordion panels (the bench pattern, reusable)
   .doors            horizontal row, panels expand sideways
   .doors.is-vert    stacked column, panels expand downward
   ========================================================================== */
.doors{display:flex;gap:12px;height:clamp(320px,30vw,420px)}
.door{
  position:relative;flex:1;min-width:0;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  background:#0E2340;border:1px solid rgba(255,255,255,.10);
  transition:flex .7s var(--ease-slam),border-color .5s,box-shadow .5s;
}
.door.is-open{flex:3.4;border-color:rgba(165,206,38,.45);box-shadow:0 16px 36px rgba(0,0,0,.52)}
.door::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--lime),transparent);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-out)}
.door.is-open::after{transform:scaleX(1)}
.door-ghost{position:absolute;right:14px;top:-14px;font-family:var(--font-display);font-weight:800;
  font-size:clamp(90px,9vw,140px);line-height:1;color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.12);
  opacity:0;transition:opacity .6s var(--ease-out);pointer-events:none}
.door.is-open .door-ghost{opacity:1}
.door-spine{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  writing-mode:vertical-rl;display:flex;align-items:center;gap:18px;white-space:nowrap;
  transition:opacity .45s var(--ease-out)}
.door-spine .no{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.28em;color:var(--lime)}
.door-spine .lb{font-family:var(--font-display);font-weight:700;font-size:clamp(14px,1.3vw,17px);
  letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.door.is-open .door-spine{opacity:0}
.door-body{position:absolute;inset:0;padding:clamp(24px,2.6vw,38px);display:flex;flex-direction:column;
  justify-content:center;gap:10px;opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-out) .12s,transform .5s var(--ease-out) .12s}
.door.is-open .door-body{opacity:1;transform:none}
.door-body .k{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.2em;color:var(--lime);font-weight:700}
.door-body h3{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,40px);
  text-transform:uppercase;line-height:1;color:#fff}
.door-body p{color:#AEBFD6;font-size:13.5px;max-width:460px}
.door-body ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:4px}
.door-body li{position:relative;padding-left:24px;font-size:12.5px;color:#CDD9E8}
.door-body li::before{content:"";position:absolute;left:2px;top:6px;width:11px;height:6px;
  border-left:2.2px solid var(--lime);border-bottom:2.2px solid var(--lime);transform:rotate(-45deg)}
.door-body .go{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;font-weight:700;
  color:#fff;border-bottom:2px solid var(--lime);padding-bottom:3px;align-self:flex-start}

/* vertical variant: stacked panels that expand downward */
.doors.is-vert{flex-direction:column;height:auto}
.doors.is-vert .door{flex:none;min-height:74px;transition:min-height .7s var(--ease-slam),border-color .5s,box-shadow .5s}
.doors.is-vert .door.is-open{min-height:clamp(300px,26vw,360px)}
.doors.is-vert .door-spine{writing-mode:horizontal-tb;left:clamp(20px,2.4vw,34px);top:50%;transform:translateY(-50%)}
.doors.is-vert .door-ghost{top:auto;bottom:-18px;right:20px}

/* phones: always stack and expand downward */
@media (max-width:820px){
  .doors{flex-direction:column;height:auto}
  .doors .door{flex:none;min-height:70px;transition:min-height .7s var(--ease-slam),border-color .5s}
  .doors .door.is-open{flex:none;min-height:340px}
  .doors .door-spine{writing-mode:horizontal-tb;left:20px;top:50%;transform:translateY(-50%)}
  .doors .door-ghost{top:auto;bottom:-16px}
}
@media (prefers-reduced-motion:reduce){
  .door,.door-body,.door-ghost,.door-spine,.door::after{transition:none}
}


/* ==========================================================================
   PERFORMANCE
   ========================================================================== */
/* skip layout/paint for sections that are far off screen */


/* reserve space so 70+ lazy screenshots cannot thrash layout as they load */
.proof-img{aspect-ratio:16/9.4;overflow:hidden}
.proof-img img{width:100%;height:100%;object-fit:cover;object-position:left top}

/* only promote layers that are actually moving, and drop the hint at rest */
.marquee .track,.hl-media{will-change:transform}
/* limit repaint scope of repeated cards */
.proof-card,.cf-card,.step,.svc,.metric,.aud,.bdoor,.door{contain:layout paint style}
.marquee .track:not(:hover),.proof-row:not(:hover){backface-visibility:hidden}

/* nav uses a solid translucent fill: backdrop-filter forced a re-blur of the
   page behind it on every scroll frame, which was a constant scrolling cost. */

/* phones: drop the most expensive decorative layers entirely */
@media (max-width:820px){
  .grain{display:none}
  .hero-bg::before{animation:none}
  .cursor-dot,.cursor-ring{display:none}
}

/* ==========================================================================
   NATIVE SCROLL-DRIVEN PARALLAX (Chrome 115+)
   These run entirely on the compositor: zero main-thread work per frame.
   theme.js detects support and skips its GSAP scrub equivalents, so the
   motion is identical but free. Safari (no support yet) keeps the GSAP path,
   which is fine there because its native scrolling is already smooth.
   NOTE: animates `translate`, NOT `transform` — GSAP owns `transform` on these
   elements (scale/opacity reveals), and the two properties compose cleanly.
   ========================================================================== */
@supports (animation-timeline: view()) {
  .hl-media{
    animation:plxMedia linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes plxMedia{from{translate:0 36px}to{translate:0 -36px}}

  .hl-ghost{
    animation:plxGhost linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes plxGhost{from{translate:0 90px}to{translate:0 -90px}}

  .sec-index{
    animation:plxIndex linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes plxIndex{from{translate:0 30px}to{translate:0 -30px}}
}

/* Scroll progress bar driven by the compositor, not by JS.
   In Chrome this removes the last per-frame main-thread write during scroll
   (theme.js skips its ScrollTrigger equivalent when scroll() timelines exist).
   Safari has no support yet and keeps the JS path. */
@supports (animation-timeline: scroll()) {
  .scroll-progress{animation:sprogGrow linear both;animation-timeline:scroll(root block);}
  @keyframes sprogGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}