/* story — page-specific styles */
@media (max-width:1180px){.nav-dd{flex-direction:column;align-items:flex-start;width:100%}.nav-dd .caret{display:none}.nav-dd .dd{position:static;opacity:1;visibility:visible;transform:none;margin:8px 0 0;padding:0 0 0 14px;background:transparent;border:none;box-shadow:none;min-width:0;border-left:1px solid rgba(255,255,255,.18)}.nav-dd::after{display:none}.menu .nav-dd .dd a{color:rgba(255,255,255,.82);padding:8px 0}.menu .nav-dd .dd a:hover{background:transparent;color:#fff}}
@media (max-width:1429px){.hero-logo{display:none}body.home .brand{opacity:1;pointer-events:auto}}
@media (max-width:1180px){
  .menu{position:fixed;flex-direction:column;background:var(--ink-blue);padding:22px var(--pad) 30px;gap:22px;align-items:flex-start;transform:translateY(-130%);transition:transform .3s;height:auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  header.scrolled .menu{background:#fff;border-bottom:1px solid var(--hair)}
  .menu.open{transform:translateY(0)}
  .menu a{font-size:16px;color:#fff}header.scrolled .menu a{color:var(--muted)}
  .menu .nav-cta{align-self:stretch;justify-content:center;font-size:15px;padding:14px}
  .burger{display:flex}
}
.hero{min-height:100vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;
  padding-top:150px;padding-bottom:clamp(120px,14vw,190px)}
.hero .bg{position:absolute;inset:0;z-index:0;background:#101C3A center/cover no-repeat;background-image:var(--hero-img,none)}
.h-title{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:900;font-size:clamp(54px,10vw,140px);line-height:.86;letter-spacing:-.04em;color:#fff;margin:0}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@media (max-width:980px){.h-vlabel,.scrollcue{display:none}}
@media (prefers-reduced-motion:reduce){.scrollcue .bar{animation:none}}
.stats-wrap{position:relative;z-index:10;margin-top:clamp(-90px,-8vw,-70px);padding-bottom:clamp(30px,5vw,60px)}
@media (max-width:820px){.stats-float{grid-template-columns:1fr 1fr}.sf{border-left:1px solid var(--hair);border-top:1px solid var(--hair)}.sf:nth-child(-n+2){border-top:none}.sf:nth-child(odd){border-left:none}}
.trades{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:820px){.svc-head{grid-template-columns:1fr;gap:14px}.trades{grid-template-columns:1fr}.svc-grid{grid-template-columns:1fr}}
@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.play::before{animation:none}}
@media (max-width:900px){.story-in{grid-template-columns:1fr;gap:34px}}
.htl{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:40px;position:relative}
.htl::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:linear-gradient(90deg,var(--blue),var(--orange))}
.ht{position:relative;padding-top:38px}
.ht::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--blue)}
.ht:last-child::before{background:var(--orange);border-color:var(--orange-deep)}
.ht .yr{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--orange-deep)}
.ht h3{font-weight:800;font-size:20px;margin:10px 0 8px;letter-spacing:-.01em}
.ht p{color:var(--muted);margin:0;font-size:14.5px;line-height:1.55}
@media (max-width:860px){
  .htl{grid-template-columns:1fr;gap:0;margin-top:40px;padding-left:34px}
  .htl::before{left:6px;right:auto;top:6px;bottom:6px;width:2px;height:auto;background:linear-gradient(180deg,var(--blue),var(--orange))}
  .ht{padding:0 0 40px 6px}
  .ht::before{left:-34px;top:3px}
}
@media (max-width:900px){.tgrid{grid-template-columns:1fr}}
@media (max-width:900px){.cgrid{grid-template-columns:1fr;gap:40px}.two{grid-template-columns:1fr}}
@media (max-width:820px){.ft{grid-template-columns:1fr 1fr}.fb{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.page-banner{position:relative;overflow:hidden;color:#fff;padding-top:clamp(148px,19vh,188px);padding-bottom:clamp(64px,8vw,94px);background:#101C3A center/cover no-repeat}
.tcard2{display:block;border-radius:22px;padding:36px;border:1px solid var(--hair);background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;overflow:hidden}
.tcard2.a::before{background:var(--blue)}
.tcard2 .ico{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;margin-bottom:22px;color:#fff}
.tcard2 p{color:var(--muted);font-size:15px;margin:16px 0 20px;line-height:1.55}
.tcard2 .go{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:gap .2s}
@media (max-width:820px){.tcards{grid-template-columns:1fr}}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px}
.wcard .wi{width:50px;height:50px;border-radius:14px;background:rgba(11,99,224,.10);border:1px solid rgba(11,99,224,.22);display:grid;place-items:center;color:var(--orange-deep);margin-bottom:20px}
@media (max-width:900px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.why{grid-template-columns:1fr}}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
@media (max-width:820px){.values{grid-template-columns:1fr}}
.rsum{display:flex;align-items:center;gap:30px;flex-wrap:wrap;background:var(--soft);border:1px solid var(--hair);border-radius:20px;padding:32px 36px;margin-bottom:42px}
.rsum .big{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:900;font-size:60px;color:var(--blue-deep);line-height:1;letter-spacing:-.03em}
.rsum .rmeta{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.hero .bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.esop-r p{color:rgba(255,255,255,.82);font-size:15.5px;line-height:1.62;margin:0 0 14px}
.esop-r p:last-child{margin-bottom:0}
@media(max-width:820px){.esop-band{grid-template-columns:1fr;gap:24px}}
.page-banner{background-image:url(../images/background-01.jpg)}

/* ═══════════════════════════════════════════════════════════════════════════
   OUR STORY
   The page is a narrative, so it is built as a reading column that widens
   and narrows rather than a grid of equal cards: opening spread, pull
   quote, figures, timeline, principles, close. Measure is capped at ~66ch
   everywhere so the prose stays readable on a wide monitor.
   ══════════════════════════════════════════════════════════════════════════ */

.st-banner .kicker{
  display:block;font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:700;font-size:clamp(17px,2vw,22px);letter-spacing:-.01em;
  color:var(--chrome);margin:16px 0 0}

/* ── 1. opening spread: copy left, video right ───────────────────────────── */
.st-open{padding:clamp(56px,7vw,92px) 0 clamp(40px,5vw,62px)}
.st-open-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(30px,4.4vw,70px);align-items:center}
.st-open p.st-lede{font-size:clamp(19px,2.1vw,23px);line-height:1.58;color:var(--ink-blue);
  font-weight:500;letter-spacing:-.012em;margin:0 0 20px;max-width:30ch}
.st-open p{color:var(--muted);font-size:16.5px;line-height:1.72;margin:0 0 16px;max-width:62ch}
.st-open p:last-child{margin-bottom:0}
.st-founders{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.st-founder{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 10px;
  border:1px solid var(--hair);border-radius:100px;background:#fff;
  font-size:14px;font-weight:600;color:var(--blue-deep)}
.st-founder .ini{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em}
.st-founder .st-role{font-weight:400;color:var(--muted);font-size:13px}

/* the shared .video-card is built for a wide band, so it is reined in here */
.st-video{margin:0}
.st-video .video-card{border-radius:22px}

/* ── 2. pull quote ───────────────────────────────────────────────────────── */
.st-quote{background:var(--ink-blue);color:#fff;position:relative;overflow:hidden;
  padding:clamp(54px,7vw,92px) 0}
.st-quote::before{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 120% at 12% 0%,rgba(37,88,170,.42),transparent 62%)}
.st-quote .wrap{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(28px,4.6vw,76px);align-items:end}
.st-quote blockquote{margin:0}
.st-mark{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-style:italic;
  font-size:84px;line-height:.6;color:var(--chrome);opacity:.55;display:block;
  margin-bottom:14px;user-select:none}
.st-quote q{quotes:none;display:block;
  font-family:"Fraunces",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;
  font-size:clamp(21px,2.7vw,33px);line-height:1.44;letter-spacing:-.015em;color:#fff}
.st-cite{display:flex;align-items:center;gap:13px;margin-top:30px;font-style:normal}
.st-cite .bar{width:34px;height:2px;background:var(--chrome);border-radius:2px;flex:0 0 auto}
.st-cite b{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.01em}
.st-cite .st-role{font-family:"Space Mono",ui-monospace,Consolas,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--chrome);display:block;margin-top:3px}
.st-quote-after{margin:0 0 6px;color:rgba(255,255,255,.80);font-size:16px;line-height:1.72;
  border-left:2px solid rgba(200,210,228,.38);padding-left:clamp(16px,1.6vw,22px)}

/* ── 3. figures ──────────────────────────────────────────────────────────── */
.st-figs{padding:clamp(44px,5.4vw,70px) 0 0}
.st-figs-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--hair);border-radius:20px;overflow:hidden;background:#fff}
.st-fig{padding:clamp(24px,2.8vw,34px);border-left:1px solid var(--hair)}
.st-fig:first-child{border-left:0}
.st-fig b{display:block;font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:900;font-size:clamp(34px,4.4vw,50px);line-height:1;letter-spacing:-.035em;
  color:var(--blue-deep)}
.st-fig span{display:block;margin-top:10px;font-family:"Space Mono",ui-monospace,Consolas,monospace;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);line-height:1.5}

/* ── 4. growth + timeline ────────────────────────────────────────────────── */
.st-growth{padding:clamp(54px,7vw,92px) 0 clamp(40px,5vw,60px)}
.st-growth .section-head{max-width:none}
.st-growth .section-head h2{margin:0;max-width:16ch}
.st-growth .section-head p{color:var(--muted);font-size:16.5px;line-height:1.72;
  margin:22px 0 0;max-width:62ch}

/* A vertical rail reads better than a four-across strip here: there are six
   milestones and each needs a sentence, not a label. The rail sits in the
   gutter so the dates and the prose share one optical left edge. */
.st-tl{margin:clamp(34px,4vw,52px) 0 0;position:relative;padding-left:clamp(26px,3vw,40px)}
.st-tl::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(180deg,var(--blue) 0%,var(--blue) 55%,var(--red) 100%);
  border-radius:2px}
.st-ev{position:relative;padding:0 0 clamp(28px,3.4vw,40px);
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:clamp(14px,2.2vw,34px);
  align-items:start}
.st-ev:last-child{padding-bottom:0}
.st-ev::before{content:"";position:absolute;left:calc(-1 * clamp(26px,3vw,40px));top:5px;
  width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--blue);
  box-shadow:0 0 0 4px #fff}
.st-ev:last-child::before{background:var(--red);border-color:var(--red)}
.st-yr{font-family:"Space Mono",ui-monospace,Consolas,monospace;font-weight:700;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blue);padding-top:2px}
.st-ev:last-child .st-yr{color:var(--red)}
.st-ev h3{margin:0 0 7px;font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:800;font-size:clamp(18px,1.9vw,21px);letter-spacing:-.018em;color:var(--ink-blue)}
.st-ev p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.68;max-width:58ch}

/* ── 5. principles ───────────────────────────────────────────────────────── */
.st-close{background:var(--soft);padding:clamp(56px,7vw,92px) 0}
.st-close-in{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,4.4vw,64px);align-items:start}
.st-close h2.sec-title{margin:0;font-size:clamp(30px,4.2vw,48px)}
.st-close p{color:var(--muted);font-size:16.5px;line-height:1.72;margin:22px 0 0;max-width:60ch}
.st-close p+p{margin-top:16px}
.st-vals{display:grid;gap:14px}
.st-val{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:start;
  background:#fff;border:1px solid var(--hair);border-radius:16px;
  padding:22px 24px;transition:transform .22s,box-shadow .22s,border-color .22s}
.st-val:hover{transform:translateY(-3px);border-color:transparent;
  box-shadow:0 16px 34px rgba(16,28,58,.10)}
.st-val .vi{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--blue);color:#fff}
.st-val h3{margin:0 0 5px;font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:800;font-size:17px;letter-spacing:-.012em;color:var(--ink-blue)}
.st-val p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:none}

/* ── 6. mission line ─────────────────────────────────────────────────────── */
.st-mission{padding:clamp(54px,7vw,88px) 0}
.st-mission-in{border-left:3px solid var(--red);padding-left:clamp(22px,3vw,38px)}
.st-mission .eyebrow{margin-bottom:16px}
.st-mission .eyebrow .ln{display:none}
.st-mission p{margin:0;font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:700;font-size:clamp(21px,2.7vw,32px);line-height:1.38;letter-spacing:-.022em;
  color:var(--ink-blue);max-width:28ch}

/* ── 7. call to action ───────────────────────────────────────────────────── */
.st-cta{background:var(--ink-blue);color:#fff;padding:clamp(50px,6vw,78px) 0;
  position:relative;overflow:hidden}
.st-cta::before{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 130% at 88% 10%,rgba(37,88,170,.40),transparent 60%)}
.st-cta .wrap{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:space-between;gap:clamp(22px,3.4vw,48px);flex-wrap:wrap}
.st-cta h2{margin:0;font-weight:800;font-size:clamp(26px,3.6vw,42px);letter-spacing:-.03em;
  color:#fff;max-width:18ch}
.st-cta p{margin:12px 0 0;color:rgba(255,255,255,.76);font-size:16px;max-width:46ch}
.st-cta-btns{display:flex;gap:13px;flex-wrap:wrap}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .st-open-in,.st-close-in{grid-template-columns:1fr}
  .st-video{order:-1}
  .st-figs-in{grid-template-columns:1fr 1fr}
  .st-fig:nth-child(odd){border-left:0}
  .st-fig:nth-child(n+3){border-top:1px solid var(--hair)}
}
@media (max-width:980px){
  .st-quote .wrap{grid-template-columns:1fr;gap:30px;align-items:start}
  .st-quote-after{margin-top:4px}
  .st-growth .section-head h2,.st-close h2.sec-title{max-width:none}
}
@media (max-width:620px){
  .st-ev{grid-template-columns:1fr;gap:6px}
  .st-yr{padding-top:0}
  .st-mission p{max-width:none}
}
@media (max-width:460px){
  .st-figs-in{grid-template-columns:1fr}
  .st-fig{border-left:0}
  .st-fig+.st-fig{border-top:1px solid var(--hair)}
  .st-val{grid-template-columns:1fr;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .st-val{transition:none}.st-val:hover{transform:none}
}


/* ── the timeline arriving ───────────────────────────────────────────────
   Three things, in order: the rail draws itself down the gutter, each dot
   pops onto it, and the milestones cascade in behind. The rail carries
   .reveal only so the observer hands it .in - it must not fade itself, or
   it would take the whole timeline with it. */
.st-tl.reveal{opacity:1;transform:none;transition:none}
.st-tl::before{transform:scaleY(0);transform-origin:50% 0;
  transition:transform 1.25s cubic-bezier(.33,.9,.4,1) .1s}
.st-tl.in::before{transform:scaleY(1)}

.st-ev{transition-delay:0s}
.st-tl .st-ev:nth-child(1){transition-delay:.26s}
.st-tl .st-ev:nth-child(2){transition-delay:.40s}
.st-tl .st-ev:nth-child(3){transition-delay:.54s}
.st-tl .st-ev:nth-child(4){transition-delay:.68s}
.st-tl .st-ev:nth-child(5){transition-delay:.82s}
.st-tl .st-ev:nth-child(6){transition-delay:.96s}

.st-ev::before{transform:scale(0);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.st-ev.in::before{transform:scale(1)}
.st-ev .st-yr{opacity:0;transform:translateX(-10px);
  transition:opacity .5s ease .12s,transform .5s cubic-bezier(.33,.9,.4,1) .12s}
.st-ev.in .st-yr{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .st-tl::before,.st-ev::before,.st-ev .st-yr{transition:none;transform:none;opacity:1}
  .st-tl .st-ev{transition-delay:0s}
}