/* ==========================================================================
   CARGO SHASTRA — Design System  (v2 rebuild)
   Re-inventing Global Cargo Through Intelligence & Innovation
   Brand: low-poly rainbow "C" · indigo primary · NO pure black anywhere
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Poppins:wght@500;600;700&family=Pacifico&family=Baloo+2:wght@600;700;800&family=Quicksand:wght@500;600;700&family=Comfortaa:wght@400;500;600;700&family=Orbitron:wght@500;600;700;800&display=swap');

@font-face{font-family:'Neuropol X';src:url('../assets/fonts/NeuropolX.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap}

:root{
  /* ---- Brand spectrum (sampled from the Cargo Shastra logo) ---- */
  --red:#e5261f;
  --orange:#f47a20;
  --gold:#ffc20e;
  --green:#3aaa35;
  --teal:#12a5b0;
  --sky:#1e9fe0;
  --blue:#1b5fc1;
  --indigo:#3a2fb0;      /* PRIMARY — buttons, footer, links */
  --violet:#7a29a0;
  --magenta:#e5157e;

  /* legacy aliases still referenced by older rules */
  --accent:var(--indigo);
  --cyan:var(--sky);
  --pink:var(--magenta);

  /* ---- Ink / neutrals (darkest is deep navy — never #000) ---- */
  --ink:#141a3c;         /* headings */
  --ink-2:#3d4468;       /* body copy */
  --ink-3:#7b82a3;       /* muted / captions */
  --line:#e6e8f4;
  --line-2:#d7dbec;

  --paper:#ffffff;
  --paper-2:#f5f6fc;     /* cool off-white section */
  --paper-3:#eceefb;

  /* ---- Deep sections (indigo-navy, NOT black) ---- */
  --deep:#141a3c;
  --deep-2:#1b2150;
  --deep-3:#272e6b;

  /* ---- Semantic ---- */
  --bg:var(--paper);
  --fg:var(--ink);
  --muted:var(--ink-3);
  --focus:#3a2fb0;

  /* ---- Metrics ---- */
  --maxw:1280px;
  --gutter:clamp(20px,5vw,72px);
  --nav-h:88px;

  --r-sm:14px;
  --r:22px;
  --r-lg:34px;
  --r-pill:999px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* rainbow gradient used for accent words / bars */
  --grad:linear-gradient(92deg,var(--red),var(--orange) 16%,var(--gold) 32%,var(--green) 48%,var(--teal) 60%,var(--sky) 72%,var(--indigo) 86%,var(--magenta));
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 20px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--indigo);color:#fff}

.skip{position:absolute;left:-9999px;top:0;background:var(--indigo);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 10px 0;z-index:2000}
.skip:focus{left:0}

/* ---- Layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,128px);position:relative}
.section--tight{padding-block:clamp(48px,6vw,84px)}
.section--deep{background:var(--deep);color:#eef0ff}
.section--soft{background:var(--paper-2)}

/* connects two stacked sections with a rounded-rectangle overlap — the section
   curves up over the one above it on a single corner, revealing that section's
   color underneath. Alternate --l (top-left) / --r (top-right) down the page. */
.sec-curve{--curve:clamp(36px,7vw,96px);position:relative;z-index:1;
  margin-top:calc(var(--curve) * -1);overflow:hidden}
.sec-curve--l{border-radius:var(--curve) 0 0 0}
.sec-curve--r{border-radius:0 var(--curve) 0 0}

/* contained rounded-rect panel with a faded line pattern */
.section--panel{background:none;padding-block:clamp(36px,5vw,64px)}
.section--panel > .wrap{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--deep);border-radius:clamp(26px,3.4vw,44px);
  padding:clamp(2.4rem,5vw,4rem);
  box-shadow:0 44px 100px -55px rgba(20,26,60,.55),inset 0 1px 0 rgba(255,255,255,.06);
}
.section--panel > .wrap::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px clamp(46px,6vw,72px)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px clamp(46px,6vw,72px));
  -webkit-mask-image:radial-gradient(130% 130% at 12% -10%,#000 0,rgba(0,0,0,.35) 45%,transparent 78%);
          mask-image:radial-gradient(130% 130% at 12% -10%,#000 0,rgba(0,0,0,.35) 45%,transparent 78%);
}
.section--panel > .wrap::after{
  content:"";position:absolute;z-index:-1;top:-30%;right:-14%;width:55%;height:80%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(58,47,176,.35),transparent 68%);
}

/* full-bleed Vision / Mission band (navy, edge to edge) */
.section--vm{position:relative;isolation:isolate;overflow:hidden}
.section--vm::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px clamp(46px,6vw,72px)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px clamp(46px,6vw,72px));
  -webkit-mask-image:radial-gradient(120% 130% at 10% -10%,#000 0,rgba(0,0,0,.3) 48%,transparent 80%);
          mask-image:radial-gradient(120% 130% at 10% -10%,#000 0,rgba(0,0,0,.3) 48%,transparent 80%)}
.section--vm::after{content:"";position:absolute;z-index:-1;top:-26%;right:-10%;width:52%;height:78%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(58,47,176,.4),transparent 66%)}

/* =====================================================================
   TYPOGRAPHY
   ===================================================================== */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);font-weight:600;margin:0;line-height:1.05;letter-spacing:-.02em}
.section--deep h1,.section--deep h2,.section--deep h3,.section--deep h4{color:#fff}

.display{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(2.4rem,6vw,5rem);line-height:1.02;letter-spacing:-.035em;color:var(--ink);
}
.h-xl{font-size:clamp(2rem,4.6vw,3.6rem);text-transform:uppercase;letter-spacing:-.03em;line-height:1.04}
.h-lg{font-size:clamp(1.7rem,3.4vw,2.7rem);text-transform:uppercase;letter-spacing:-.025em;line-height:1.08}
.h-md{font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.02em;line-height:1.15}

.lead{font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--ink-2);max-width:46ch;line-height:1.6}
.section--deep .lead{color:rgba(255,255,255,.72)}

/* rainbow accent word */
.grad{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
/* dim continuation line (Zerixa move) */
.dim{color:var(--ink-3)}
.section--deep .dim{color:rgba(255,255,255,.5)}

/* =====================================================================
   EYEBROW  —  / LABEL            [ 01 ]
   ===================================================================== */
.eyebrow{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:.82rem;letter-spacing:.02em;color:var(--ink);margin-bottom:1.4rem;
}
.section--deep .eyebrow{color:#fff}
.eyebrow::before{content:"/";color:var(--indigo);font-weight:700}
.eyebrow .idx{display:none}

/* centered variant */
.section-head{max-width:52ch}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}

/* =====================================================================
   BUTTONS  — pill, label-swap on hover
   ===================================================================== */
.btn{
  --bg:var(--indigo);--fg:#fff;
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  padding:.95rem 1.6rem;border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);border:1px solid transparent;
  font-family:var(--font-display);font-weight:600;font-size:.9rem;letter-spacing:-.01em;
  overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s;
  white-space:nowrap;
}
.btn__label{position:relative;display:inline-grid;overflow:hidden}
.btn__label span{grid-area:1/1;transition:transform .42s var(--ease),opacity .42s var(--ease)}
.btn__label span:last-child{transform:translateY(120%);opacity:0}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -18px color-mix(in srgb,var(--bg) 70%,transparent)}
.btn:hover .btn__label span:first-child{transform:translateY(-120%);opacity:0}
.btn:hover .btn__label span:last-child{transform:translateY(0);opacity:1}
.btn svg{width:1.05em;height:1.05em;flex:none}

.btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--paper-2);box-shadow:none}
.section--deep .btn--ghost{--fg:#fff;border-color:rgba(255,255,255,.28)}
.section--deep .btn--ghost:hover{background:rgba(255,255,255,.08)}
.hero .btn--ghost{--bg:#fff;--fg:var(--ink);border-color:transparent}
.hero .btn--ghost:hover{--bg:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
.btn--white{--bg:#fff;--fg:var(--ink)}
.btn--gold{--bg:var(--gold);--fg:var(--deep)}
.btn--lg{padding:1.1rem 2rem;font-size:1rem}
.btn--sm{padding:.7rem 1.15rem;font-size:.82rem}
.btn--disabled{--bg:var(--line-2);--fg:var(--ink-3);pointer-events:none;cursor:not-allowed;box-shadow:none}
.btn--disabled:hover{transform:none;box-shadow:none}

/* text link with arrow */
.tlink{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);
  font-weight:600;font-size:.92rem;text-transform:uppercase;letter-spacing:.01em;color:var(--indigo);
}
.tlink::after{content:"»";transition:transform .3s var(--ease)}
.tlink:hover::after{transform:translateX(4px)}
.section--deep .tlink{color:var(--gold)}

/* =====================================================================
   NAV
   ===================================================================== */
.nav{position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--nav-h);display:flex;align-items:center;
  background:var(--paper-2);transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.nav.is-scrolled{background:var(--paper-2);box-shadow:0 1px 0 var(--line)}

/* transparent header over a dark photo/video hero — turns solid white on scroll */
.nav--on-dark{background:transparent;box-shadow:none}
.nav--on-dark .nav__menu > .nav__item > a{color:#fff}
.nav--on-dark .nav__menu > .nav__item > a::after{background:#fff}
.nav--on-dark .nav__trigger{color:#fff}
.nav--on-dark .nav__chev{color:#fff}
.nav--on-dark .btn--ghost{--fg:#fff;border-color:rgba(255,255,255,.35)}
.nav--on-dark .nav__toggle span{background:#fff}
.nav--on-dark.is-scrolled{background:var(--paper-2);box-shadow:0 1px 0 var(--line)}
.nav--on-dark.is-scrolled .nav__menu > .nav__item > a{color:var(--ink)}
.nav--on-dark.is-scrolled .nav__menu > .nav__item > a::after{background:var(--grad)}
.nav--on-dark.is-scrolled .nav__trigger,.nav--on-dark.is-scrolled .nav__chev{color:var(--ink)}
.nav--on-dark.is-scrolled .btn--ghost{--fg:var(--ink);border-color:var(--line-2)}
.nav--on-dark.is-scrolled .nav__toggle span{background:var(--ink)}
.nav__inner{max-width:var(--maxw);margin:0 auto;width:100%;padding-inline:var(--gutter);
  padding-left:clamp(6px,1.2vw,20px);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.nav__logo{display:flex;align-items:center;flex:none}
.nav__logo img{height:54px;width:auto;transition:height .3s}
.nav.is-scrolled .nav__logo img{height:44px}

.nav__menu{display:flex;align-items:center;gap:.35rem}
.nav__menu a{
  font-family:var(--font-display);font-weight:600;font-size:calc(.9rem + 3px);letter-spacing:-.01em;
  color:var(--ink);padding:.55rem .85rem;border-radius:var(--r-pill);position:relative;
  transition:color .2s,background .2s;
}
.nav__menu a::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.34rem;height:2px;
  background:var(--grad);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__menu a:hover::after,.nav__menu a[aria-current="page"]::after{transform:scaleX(1)}

/* ---- dropdown ---- */
.nav__item{position:relative;display:flex;align-items:center}
.nav__trigger{display:inline-flex;align-items:center;gap:.28rem}
.nav__chev{width:13px;height:13px;flex:none;transition:transform .25s var(--ease)}
.nav__item:hover .nav__chev,.nav__item:focus-within .nav__chev{transform:rotate(180deg)}
.nav__item::before{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
.nav__drop{
  position:fixed;top:var(--nav-h);left:0;right:0;width:100%;
  padding:2rem max(32px,calc((100% - 1240px) / 2));
  background:rgba(20,26,60,.86);border-radius:0;overflow:hidden;
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 40px 80px -28px rgba(10,14,36,.55);
  display:flex;align-items:center;justify-content:center;gap:clamp(1.5rem,4vw,3rem);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;z-index:30;
}
.nav__item:hover .nav__drop,.nav__item:focus-within .nav__drop{opacity:1;visibility:visible;transform:translateY(0)}
.nav__drop::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);z-index:2}
.nav__drop::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 160% at 102% -10%,rgba(122,41,160,.4),transparent 65%),
    radial-gradient(38% 130% at -4% 112%,rgba(30,159,224,.28),transparent 60%)}
.nav__drop-links{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(150px,200px));
  grid-auto-flow:column;grid-template-rows:auto repeat(3,auto);gap:.3rem 2rem;flex:none;min-width:0;
  align-content:center;padding-right:clamp(1.5rem,3vw,2.5rem);margin-right:0;
  border-right:1px solid rgba(255,255,255,.1)}
.nav__drop-links--wide{grid-template-columns:repeat(3,minmax(140px,180px));grid-template-rows:auto repeat(4,auto)}
.nav__drop-links::before{content:"Quick Links";grid-column:1/-1;font-family:var(--font-display);
  font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--sky);margin-bottom:.7rem}
.nav__drop a{position:relative;padding:.3rem .9rem .3rem 1.1rem;border-radius:10px;font-size:1.02rem;
  font-weight:600;line-height:1.3;font-family:var(--font-display);color:rgba(255,255,255,.8);
  white-space:nowrap;transition:background .18s,color .18s,padding-left .18s}
.nav__drop a::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;border-radius:50%;
  background:var(--sky);transform:translateY(-50%) scale(0);transition:transform .18s var(--ease)}
.nav__drop a::after{display:none}
.nav__drop a:hover{background:rgba(255,255,255,.07);color:#fff;padding-left:1.3rem}
.nav__drop a:hover::before{transform:translateY(-50%) scale(1)}
.nav__drop-promo{position:relative;z-index:1;flex:1 1 340px;min-width:0;max-width:380px;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,rgba(27,33,80,.55),rgba(58,47,176,.28));text-decoration:none;
  display:flex;align-items:center;gap:1.1rem;padding:1rem;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.nav__drop-promo:hover{transform:translateY(-3px);box-shadow:0 26px 50px -20px rgba(0,0,0,.6);
  border-color:rgba(255,255,255,.22)}
.nav__drop-promo img{width:104px;height:104px;flex:none;border-radius:12px;object-fit:cover;display:block;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.5)}
.nav__drop-promo-body{min-width:0;flex:1 1 auto}
.nav__drop-promo-body::before{content:"Featured";display:block;font-family:var(--font-display);
  font-weight:700;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:.4rem}
.nav__drop-promo-body strong{display:block;font-family:var(--font-display);font-weight:700;
  font-size:1.04rem;color:#fff;margin-bottom:.4rem}
.nav__drop-promo-body p{font-size:.82rem;line-height:1.45;color:rgba(255,255,255,.6);margin:0 0 .75rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nav__drop-btn{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font-display);
  font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.02em;color:#fff;
  background:var(--indigo);padding:.5rem .9rem;border-radius:var(--r-pill);white-space:nowrap;
  box-shadow:0 10px 20px -10px rgba(58,47,176,.7);transition:background .2s,transform .2s}
.nav__drop-promo:hover .nav__drop-btn{background:var(--magenta);transform:translateX(2px)}

.nav__cta{flex:none}
.nav__toggle{display:none;width:44px;height:44px;border:0;background:none;position:relative;z-index:1002}
.nav__toggle span{position:absolute;left:9px;right:9px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}

.nav__toggle span:nth-child(1){top:15px}
.nav__toggle span:nth-child(2){top:21px}
.nav__toggle span:nth-child(3){top:27px}
.nav.is-open .nav__toggle span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav.is-open .nav__toggle span:nth-child(2){opacity:0}
.nav.is-open .nav__toggle span:nth-child(3){top:21px;transform:rotate(-45deg)}

@media (max-width:960px){
  .nav__toggle{display:block}
  .nav__menu,.nav__cta{
    position:fixed;top:0;right:0;width:min(400px,100vw);height:100dvh;z-index:1001;
    flex-direction:column;align-items:stretch;gap:0;background:var(--paper);
    padding:calc(var(--nav-h) + 8px) 0 96px;overflow-y:auto;transform:translateX(102%);
    box-shadow:-24px 0 70px -40px rgba(20,26,60,.5);
  }
  .nav.is-open .nav__menu{animation:navIn .3s var(--ease) both}
  @keyframes navIn{from{transform:translateX(102%)}to{transform:translateX(0)}}
  .nav__menu > a,.nav__trigger{font-size:1.1rem;padding:1.1rem clamp(24px,7vw,32px);border-bottom:1px solid var(--line)}
  .nav__menu a::after{display:none}

  /* dropdown -> accordion in the drawer */
  .nav__item{flex-direction:column;align-items:stretch;width:100%}
  .nav__item::before{display:none}
  .nav__trigger{display:flex;justify-content:space-between;color:var(--ink)}
  .nav--on-dark .nav__menu > .nav__item > a{color:var(--ink)}
  .nav--on-dark .nav__menu > .nav__item > a::after{background:var(--grad)}
  .nav--on-dark .nav__trigger,.nav--on-dark .nav__chev{color:var(--ink)}
  .nav__chev{width:16px;height:16px}
  .nav__item.is-open .nav__chev{transform:rotate(180deg)}
  .nav__drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-radius:0;padding:0;min-width:0;background:var(--paper-2);flex-direction:column;
    max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
  .nav__item.is-open .nav__drop{max-height:600px}
  .nav__drop::before,.nav__drop::after{display:none}
  .nav__drop-links{display:flex;flex-direction:column;padding:0;margin-right:0;border-right:0}
  .nav__drop-links::before{display:none}
  .nav__drop-promo{display:none}
  .nav__drop a{padding:.95rem clamp(38px,10vw,48px);border-bottom:1px solid var(--line);
    border-radius:0;font-size:1rem;white-space:normal;color:var(--ink)}
  .nav__drop a::before{display:none}
  .nav__drop a:hover{background:var(--paper-2);color:var(--indigo);padding-left:clamp(38px,10vw,48px)}
  .nav__cta{width:min(400px,100vw);top:auto;bottom:0;height:auto;padding:1.2rem clamp(24px,7vw,32px);
    border-top:1px solid var(--line);transform:translateX(102%)}
  .nav.is-open .nav__cta{animation:navIn .3s var(--ease) both}
  .nav__cta .btn{width:100%;justify-content:center}
  .nav__scrim{position:fixed;inset:0;z-index:1000;background:rgba(20,26,60,.45);opacity:0;pointer-events:none;transition:opacity .3s}
  .nav.is-open .nav__scrim{opacity:1;pointer-events:auto}
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;padding-top:var(--nav-h);overflow:hidden;
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.hero > .wrap{position:relative;z-index:2;flex:1;display:flex;align-items:center;width:100%;
  padding-left:clamp(6px,1.2vw,20px)}

/* video background behind the hero */
.hero__video-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--deep)}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero__clouds{position:absolute;top:0;left:0;right:0;height:clamp(180px,26vw,340px);z-index:1;
  pointer-events:none;opacity:.55;mix-blend-mode:screen;
  background:url("../assets/img/plane-clouds.jpg") center 8%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%)}
.hero__veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(135deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.4) 34%,rgba(255,255,255,.18) 60%,rgba(255,255,255,.05) 82%),
  linear-gradient(180deg,rgba(255,255,255,.12),transparent 30%,rgba(255,255,255,.2) 100%)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero__copy{position:relative;z-index:0;max-width:760px;margin-top:clamp(5.5rem,32vh,22rem)}
.hero__script{font-family:'Poppins',sans-serif;font-weight:700;font-style:normal;text-transform:none;
  font-size:clamp(1.3rem,2.9vw,2.15rem);line-height:1.14;letter-spacing:-.015em;color:var(--gold);
  white-space:nowrap;margin:0}
.hero__through{display:block;font-family:'Poppins',sans-serif;font-weight:700;text-transform:none;
  font-size:clamp(1.3rem,2.9vw,2.15rem);line-height:1.14;letter-spacing:-.015em;color:#fff;margin-top:.7rem;
  white-space:nowrap;
  transform:scaleX(.76);transform-origin:left top}
.hero__through .w-gray{color:rgba(255,255,255,.85)}
.hero__through .w-grad1{background:linear-gradient(90deg,var(--red),var(--orange) 55%,var(--blue));
  background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero__through .w-grad2{background:linear-gradient(90deg,var(--sky),var(--violet) 55%,var(--magenta));
  background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero__quote{font-family:var(--font-sans);font-weight:400;font-style:normal;
  font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.6;color:var(--indigo);
  max-width:45ch;margin:1.8rem 0 0;padding:0}
.hero__btns{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.3rem}
.hero__art{position:relative;aspect-ratio:1/.92;min-height:320px}

/* ===== opening curtain — plays once per session ===== */
#intro{position:fixed;inset:0;z-index:2000;background:var(--deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  animation:introExit 1.15s cubic-bezier(.76,0,.24,1) 2.05s forwards}
#intro__logo{width:clamp(96px,12vw,150px);height:auto;opacity:0;transform:translateY(16px) scale(.9);
  animation:introIn .85s cubic-bezier(.2,.7,.2,1) .15s forwards}
#intro__line{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--grad);
  transform:scaleX(0);transform-origin:left;animation:introBar 1.5s cubic-bezier(.6,0,.2,1) .3s forwards}
body.intro-lock{overflow:hidden}
@keyframes introIn{to{opacity:1;transform:none}}
@keyframes introBar{to{transform:scaleX(1)}}
@keyframes introExit{to{transform:translateY(-101%);visibility:hidden}}
@media (prefers-reduced-motion:reduce){#intro{display:none}}

/* ===== homepage opening sequence — slow, smooth, layered ===== */
.hero-anim .hero__copy > *{opacity:0}
.hero-anim .hero__copy > h1{animation:heroClip 1.5s cubic-bezier(.2,.72,.14,1) .24s both}
.hero-anim .hero__copy > .hero__through{animation:heroUp 1.2s var(--ease-out) .46s both}
.hero-anim .hero__copy > .hero__quote{animation:heroUp 1.2s var(--ease-out) .56s both}
.hero-anim .hero__copy > .hero__btns{animation:heroUp 1.2s var(--ease-out) .7s both}
.hero-anim .hero__video-wrap{animation:heroReveal 2.6s cubic-bezier(.38,0,.1,1) both}
.hero-anim .marquee{opacity:0;transform:translateY(22px);animation:heroUp 1.2s var(--ease-out) .8s both}
@keyframes heroUp{to{opacity:1;transform:none}}
@keyframes heroClip{0%{opacity:0;clip-path:inset(0 0 108% 0);transform:translateY(36px)}
  100%{opacity:1;clip-path:inset(0 0 -12% 0);transform:none}}
@keyframes heroReveal{0%{clip-path:inset(0 0 100% 0);transform:scale(1.16)}100%{clip-path:inset(0 0 0 0);transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .hero-anim .hero__copy > *,.hero-anim .hero__copy > h1,
  .hero-anim .hero__video-wrap,.hero-anim .hero__veil,.hero-anim .marquee{animation:none;opacity:1;transform:none;clip-path:none}
  .hero__video{display:none}
}

/* orbit / connection graphic */
.orbit{position:absolute;inset:0;display:grid;place-items:center}
.orbit__map{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.5}
.orbit__c{position:relative;width:clamp(120px,20vw,190px);z-index:2;filter:drop-shadow(0 16px 40px rgba(58,47,176,.25))}
.orbit__node{position:absolute;display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);
  font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:.4rem .7rem;
  box-shadow:0 10px 26px -14px rgba(20,26,60,.28)}
.orbit__node i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.orbit__node i svg{width:13px;height:13px}

/* =====================================================================
   MARQUEE
   ===================================================================== */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.section--deep .marquee{border-color:rgba(255,255,255,.14)}
.marquee__row{display:flex;gap:3rem;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .marquee__row{animation-play-state:paused}
.marquee__row span{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:.95rem;letter-spacing:.02em;color:var(--ink-2);display:inline-flex;align-items:center;gap:3rem}
.marquee__row span::before{content:"/";color:var(--indigo)}
.section--deep .marquee__row span{color:rgba(255,255,255,.66)}
@keyframes marq{to{transform:translateX(-50%)}}

/* marquee sitting inside the full-screen hero, over the photo */
.hero .marquee{position:relative;z-index:2;margin-top:auto;border-block:1px solid var(--line);
  background:#fff}
.hero .marquee__row span{color:var(--ink)}
.hero .marquee__row span::before{color:var(--indigo)}

/* =====================================================================
   ECOSYSTEM
   ===================================================================== */
.eco{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.eco__art{position:relative;aspect-ratio:1/1;display:grid;place-items:center;
  animation:ecoSpin 64s linear infinite}
.eco__art .eco__c{animation:ecoSpin 64s linear infinite reverse}
.eco__art .eco__node{animation:ecoSpin 64s linear infinite reverse}
.eco__art:hover,.eco__art:hover .eco__c,.eco__art:hover .eco__node{animation-play-state:paused}
@keyframes ecoSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .eco__art,.eco__art .eco__c,.eco__art .eco__node{animation:none}
}
.eco__ring{position:absolute;inset:6%;border-radius:50%;border:2px dashed var(--line-2)}
.eco__ring:nth-child(2){inset:20%;border-color:var(--paper-3)}
.eco__c{position:relative;width:36%;z-index:2;filter:drop-shadow(0 20px 50px rgba(58,47,176,.28))}
.eco__node{position:absolute;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  font-family:var(--font-display);font-weight:600;font-size:.72rem;text-transform:uppercase;
  text-align:center;color:var(--ink);width:96px;line-height:1.2}
.eco__node i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;
  box-shadow:0 12px 26px -12px rgba(20,26,60,.4)}
.eco__node i svg{width:22px;height:22px}
.eco-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line);padding-top:1.6rem}
#ecosystem .eco-trust{margin-top:clamp(4rem,9vw,7rem)}
.eco-trust li{list-style:none;display:flex;align-items:center;gap:.7rem;font-weight:600;color:var(--ink);font-size:.92rem}
.eco-trust svg{width:26px;height:26px;flex:none}

/* =====================================================================
   CAPABILITY STRIP
   ===================================================================== */
.caps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.caps__item{background:#fff;padding:clamp(1.4rem,2.6vw,2.2rem) 1.2rem;display:flex;flex-direction:column;
  align-items:center;gap:.7rem;text-align:center;transition:background .3s}
.caps__item:hover{background:var(--paper-2)}
.caps__item i{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff}
.caps__item i svg{width:26px;height:26px}
.caps__item img{width:52px;height:52px;object-fit:contain}
.caps__item h3{font-size:1rem;text-transform:uppercase;letter-spacing:-.01em}
.caps__item p{font-size:.82rem;color:var(--ink-3);margin:0;line-height:1.4}

/* =====================================================================
   VISION / MISSION
   ===================================================================== */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2rem)}
.vm__card{background:var(--deep-2);border-radius:var(--r-lg);padding:clamp(1.8rem,3.4vw,2.8rem);
  position:relative;overflow:hidden}
.vm__card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px}
.vm__card--v::before{background:var(--gold)}
.vm__card--m::before{background:var(--green)}
.vm__card h3{font-family:var(--font-mono);font-weight:700;font-size:.9rem;letter-spacing:.14em;margin-bottom:1rem}
.vm__card--v h3{color:var(--gold)}
.vm__card--m h3{color:var(--green)}
.vm__card p{color:rgba(255,255,255,.82);margin:0;font-size:1.02rem;line-height:1.6}
.vm__ambition{text-align:center;margin-top:2rem;font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;color:#fff;font-size:clamp(1rem,1.8vw,1.3rem)}
.vm__ambition b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* =====================================================================
   PRODUCTS GRID
   ===================================================================== */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 1.8rem}
.pcard{--pc:var(--indigo);position:relative;background:#fff;
  border-left:6px solid var(--pc);border-radius:14px;padding:1.9rem 5.6rem 1.9rem 1.7rem;
  display:flex;flex-direction:column;gap:.6rem;
  box-shadow:0 18px 40px -22px rgba(20,26,60,.22);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
/* keep the hover snappy even inside a reveal-stagger grid */
.pgrid > .pcard{transition:transform .32s var(--ease),box-shadow .32s var(--ease),opacity .5s var(--ease)}
.pcard:hover,.pgrid > .pcard:hover{transform:translateY(-6px);z-index:5;position:relative;
  box-shadow:0 26px 50px -22px color-mix(in srgb,var(--pc) 35%,transparent)}
@media (hover:none){.pcard:hover,.pgrid > .pcard:hover{transform:none;z-index:auto}}
.pcard__logo{position:absolute;top:-14px;right:14px;width:78px;height:78px;padding:.5rem;
  background:#fff;border-radius:12px;box-shadow:0 10px 24px -10px rgba(20,26,60,.35);
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s var(--ease)}
.pcard:hover .pcard__logo{transform:scale(1.05)}
.pcard__logo img{height:100%;width:100%;object-fit:contain}
.pcard h3{font-size:1.18rem;font-weight:700;text-transform:none;letter-spacing:-.01em;color:var(--ink)}
.pcard p{margin:0;font-size:.88rem;color:var(--ink-3);line-height:1.55}
@media (max-width:1080px){.pgrid{grid-template-columns:repeat(2,1fr)}}

/* =====================================================================
   STATS  (odometer)
   ===================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,3vw,2.5rem)}
.stat b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,6vw,4.4rem);
  line-height:1;letter-spacing:-.04em;color:#fff}
.stat .odo{display:inline-flex;overflow:hidden;height:1em;vertical-align:bottom}
.stat .odo i{display:flex;flex-direction:column;font-style:normal;transition:transform 1.4s var(--ease)}
.stat .odo i span{height:1em;display:flex;align-items:center}
.stat p{margin:.6rem 0 0;color:rgba(255,255,255,.62);font-size:.9rem;line-height:1.4}
.stat .plus{color:var(--gold)}

/* =====================================================================
   SPLIT / CONTENT SECTIONS (inner pages)
   ===================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--rev .split__media{order:-1}
.split__media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__media--contain img{object-fit:contain;padding:1.2rem}
.summit-full{position:relative;min-height:clamp(480px,58vw,680px);display:grid;align-items:center;
  overflow:hidden}
.summit-full__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 45%}
.summit-full__veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,10,26,.72) 0%,rgba(8,10,26,.52) 30%,rgba(8,10,26,.2) 55%,rgba(8,10,26,.02) 75%)}
.summit-full__copy{position:relative;max-width:min(520px,88vw);padding-left:120px;margin-left:0;margin-right:auto}
.summit-full__copy .h-lg,.summit-full__copy .lead{color:#fff}
.summit-full__copy .h-lg .dim{color:rgba(255,255,255,.62)}
.summit-full__copy .lead{color:rgba(255,255,255,.85)}
@media (max-width:620px){
  .summit-full{padding-top:clamp(2.2rem,10vw,3rem);padding-bottom:2.5rem;min-height:auto}
  .summit-full__copy{padding-left:clamp(20px,6vw,32px);padding-right:clamp(20px,6vw,32px);max-width:100%}
}
@media (max-width:900px){
  .summit-full__copy .h-lg{font-size:clamp(1.15rem,5.6vw,1.8rem);white-space:nowrap;overflow-wrap:anywhere}
}
.split ul{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.6rem}
.split ul li{position:relative;padding-left:1.7rem;color:var(--ink-2)}
.split ul li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--grad)}

/* contact page — office cards + maps */
.offices{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.3rem}
.office{--_c:var(--oc,var(--indigo));display:flex;align-items:flex-start;gap:.9rem;padding:1.1rem 1.2rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .25s,transform .25s var(--ease),box-shadow .25s var(--ease)}
.office:hover{border-color:var(--_c);transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(20,26,60,.3)}
.office__ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  color:var(--_c);background:color-mix(in srgb,var(--_c) 13%,#fff)}
.office__ic svg{width:20px;height:20px}
.office b{display:block;color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:.92rem}
.office span{display:block;color:var(--ink-3);font-size:.85rem;margin-top:.15rem}
@media (max-width:520px){.offices{grid-template-columns:1fr}}
.mapgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.mapcard{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 26px 54px -34px rgba(20,26,60,.26)}
.mapcard__tag{position:absolute;top:1rem;left:1rem;z-index:1;font-family:var(--font-mono);
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  background:#fff;padding:.45rem .8rem;border-radius:var(--r-pill);box-shadow:0 10px 24px -12px rgba(20,26,60,.3)}
.mapcard iframe{display:block;width:100%;height:320px;border:0;filter:grayscale(.15)}
@media (max-width:820px){.mapgrid{grid-template-columns:1fr}}

/* numbered feature blocks */
.feat{border-top:1px solid var(--line);padding-block:clamp(1.8rem,3.4vw,2.6rem);
  display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);
  gap:clamp(1.4rem,3.5vw,3rem);align-items:start}
.feat:nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(0,330px)}
.feat:nth-of-type(even) .feat__media{order:2}
.feat__media{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;
  background:var(--paper-2);border:1px solid var(--line);position:sticky;top:calc(var(--nav-h) + 1.4rem)}
.feat__media img{width:100%;height:100%;object-fit:cover;display:block}
.feat__text{min-width:0}
@media (max-width:820px){
  .feat,.feat:nth-of-type(even){grid-template-columns:1fr}
  .feat__media{position:static;aspect-ratio:16/9;order:-1}
  .feat:nth-of-type(even) .feat__media{order:-1}
}
.feat__n{font-family:var(--font-mono);font-weight:700;font-size:.9rem;color:var(--indigo);letter-spacing:.1em}
.feat h3{margin:.4rem 0 .3rem;font-size:clamp(1.2rem,2vw,1.6rem);text-transform:uppercase;letter-spacing:-.02em}
.feat__sub{color:var(--ink-3);font-size:.95rem}
.feat__body{display:grid;grid-template-columns:1.2fr 1fr;gap:1.4rem 3rem;margin-top:1rem}
.feat__list{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.feat__list li{position:relative;padding-left:1.5rem;color:var(--ink-2);font-size:.95rem}
.feat__list li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:2px;background:var(--indigo)}
.feat__kv{display:flex;flex-wrap:wrap;gap:.5rem;align-content:start}
.feat__kv span{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.4rem .85rem;font-size:.8rem;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:.4rem}
.feat__kv span::before{content:"✔";color:var(--green);font-size:.75rem}

/* =====================================================================
   CARDS grid (generic — resources, team, etc.)
   ===================================================================== */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.7rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 26px 54px -34px rgba(20,26,60,.26)}
.card__img{display:block;overflow:hidden;border-radius:calc(var(--r) - 10px);aspect-ratio:16/10;
  margin-bottom:1.1rem;background:var(--paper-2)}
.card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.card:hover .card__img img{transform:scale(1.05)}
.card__tag{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;color:var(--indigo);text-transform:uppercase}
.card h3{margin:.5rem 0 .4rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:-.01em}
.card p{margin:0;color:var(--ink-3);font-size:.9rem}
.card--soon{opacity:.72}
.card--soon .card__tag{color:var(--ink-3)}

.card--new{position:relative;display:block;grid-column:span 2;border-color:transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;border-width:2px;
  box-shadow:0 26px 54px -30px rgba(20,26,60,.3)}
.card--new .card__tag{color:var(--gold)}
.card--new h3{text-transform:none;font-size:1.3rem}
.card__new-tag{position:absolute;top:1.1rem;right:1.1rem;z-index:1;font-family:var(--font-mono);
  font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:var(--grad);padding:.3rem .7rem;border-radius:var(--r-pill)}
@media (max-width:680px){.card--new{grid-column:1/-1}}

/* team */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.team__member{position:relative;background:#fff;padding:1.4rem 1.5rem 1.4rem 1.7rem;--tc:var(--indigo);
  transition:background .3s var(--ease)}
.team__member::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tc)}
.team__member b{display:block;font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:1rem}
.team__member span{font-size:.85rem;color:var(--ink-3)}
.team__member:hover{background:color-mix(in srgb,var(--tc) 12%,#fff)}
.team__member:hover b{color:color-mix(in srgb,var(--tc) 78%,var(--ink))}
.team__member--lead{background:color-mix(in srgb,var(--tc) 9%,#fff)}
.team__member--lead b{color:color-mix(in srgb,var(--tc) 76%,var(--ink))}
.team__member:nth-child(10n+1){--tc:var(--red)}
.team__member:nth-child(10n+2){--tc:var(--orange)}
.team__member:nth-child(10n+3){--tc:var(--gold)}
.team__member:nth-child(10n+4){--tc:var(--green)}
.team__member:nth-child(10n+5){--tc:var(--teal)}
.team__member:nth-child(10n+6){--tc:var(--sky)}
.team__member:nth-child(10n+7){--tc:var(--blue)}
.team__member:nth-child(10n+8){--tc:var(--violet)}
.team__member:nth-child(10n+9){--tc:var(--magenta)}
.team__member:nth-child(10n){--tc:var(--indigo)}

/* ---------- org chart ---------- */
.org{--ol:var(--line-2);--g:clamp(1.6rem,5vw,3rem);margin:2.8rem auto 0;max-width:860px}

.org__ceo{display:flex;justify-content:center;position:relative;padding-bottom:26px}
.org__ceo::after{content:"";position:absolute;left:50%;bottom:0;width:2px;height:26px;background:var(--ol);transform:translateX(-50%)}

.org__cols{display:flex;gap:var(--g);position:relative;padding-top:26px}
.org__cols::before{content:"";position:absolute;top:0;left:calc(25% - var(--g)/4);right:calc(25% - var(--g)/4);height:2px;background:var(--ol);border-radius:2px}
.org__col{flex:1;min-width:0;position:relative;padding-top:26px;display:flex;flex-direction:column}
.org__col::before{content:"";position:absolute;top:0;left:50%;width:2px;height:26px;background:var(--ol);transform:translateX(-50%)}

.org__box{--_c:var(--tc,var(--indigo));text-align:center;
  font-family:var(--font-display);font-weight:600;font-size:.85rem;letter-spacing:-.01em;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--_c);
  border-radius:12px;padding:.7rem 1rem;line-height:1.3;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.org__box small{display:block;font-weight:500;font-size:.72rem;color:var(--ink-3);letter-spacing:0;margin-top:.15rem}
.org__box:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px color-mix(in srgb,var(--_c) 55%,transparent)}
.org__box--ceo{--_c:var(--indigo);background:var(--indigo);color:#fff;border-color:transparent;
  font-size:.95rem;letter-spacing:.06em;padding:.85rem 2.4rem;box-shadow:0 18px 36px -18px rgba(58,47,176,.5)}
.org__box--head{background:var(--paper-2)}

.org__list{list-style:none;margin:0;padding:26px 0 0;position:relative;display:flex;flex-direction:column;gap:16px}
.org__list::before{content:"";position:absolute;left:50%;top:0;width:2px;height:26px;background:var(--ol);border-radius:2px;transform:translateX(-50%)}
.org__list li{position:relative;margin:0}
.org__list li+li::before{content:"";position:absolute;left:50%;top:-16px;width:2px;height:16px;background:var(--ol);border-radius:2px;transform:translateX(-50%)}

@media (max-width:640px){
  .org__cols{flex-direction:column;gap:1.5rem}
  .org__cols::before{display:none}
}

/* world map — real continent silhouettes, soft shadow, brand pins */
.wmap{position:relative;width:100%;border-radius:var(--r-lg);overflow:hidden;background:#e3e7ef;
  border:1px solid var(--line);box-shadow:0 34px 64px -44px rgba(20,26,60,.3);
  padding:clamp(14px,3vw,28px)}
.wmap svg{width:100%;height:auto;display:block}
.wmap__land{filter:drop-shadow(0 3px 3px rgba(30,40,70,.18))}

/* global sales — unique locations grid (no scroll) */
.saleloc{margin-top:1.8rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.saleloc__c{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:1rem 1.1rem;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s}
.saleloc__c:hover{transform:translateY(-2px);border-color:var(--line-2);
  box-shadow:0 16px 34px -20px color-mix(in srgb,var(--tc,var(--indigo)) 55%,transparent)}
.saleloc__c h3{margin:0 0 .55rem;font-family:var(--font-display);font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink);display:flex;align-items:center;gap:.5rem}
.saleloc__c h3::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--tc,var(--indigo))}
.saleloc__c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.saleloc__c li{font-size:.86rem;color:var(--ink-2)}
.saleloc__note{grid-column:1/-1;margin:.5rem 0 0;font-family:var(--font-display);font-weight:600;
  font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;color:var(--indigo)}

/* =====================================================================
   PAGE HERO (inner pages)
   ===================================================================== */
.phero{padding-top:calc(var(--nav-h) + clamp(48px,7vw,90px));padding-bottom:clamp(40px,6vw,72px)}
.phero h1{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.3rem,5.4vw,4.2rem);line-height:1.02;letter-spacing:-.035em;max-width:18ch}
.phero .lead{margin-top:1.2rem}
.phero h1[data-p-name]{text-transform:none}

/* product hero — copy left, logo showcase right */
.phero{--pc:var(--indigo);position:relative;isolation:isolate;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 60% at 82% 18%,color-mix(in srgb,var(--pc) 16%,transparent),transparent 70%),
    radial-gradient(40% 50% at 100% 100%,color-mix(in srgb,var(--pc) 10%,transparent),transparent 70%)}
.phero .eyebrow,.phero .eyebrow a{color:var(--pc)}
.phero__split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.pshowcase{position:relative;display:grid;place-items:center;padding:clamp(2.2rem,5vw,3.4rem);
  background:#fff;border-radius:var(--r-lg);border:1px solid var(--line);
  box-shadow:0 40px 80px -40px color-mix(in srgb,var(--pc) 35%,rgba(20,26,60,.3))}
.pshowcase::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:radial-gradient(70% 70% at 50% 40%,color-mix(in srgb,var(--pc) 12%,transparent),transparent 72%)}
.pshowcase img{width:auto;max-width:78%;max-height:170px;height:auto;
  filter:drop-shadow(0 18px 30px color-mix(in srgb,var(--pc) 25%,transparent))}
.btn--disabled .btn__label{opacity:.85}
.btn-wrap{position:relative;display:inline-block}
.btn-wrap__tag{position:absolute;top:-10px;right:-8px;z-index:1;
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--ink-3);padding:.2rem .5rem;border-radius:var(--r-pill);white-space:nowrap}
@media (max-width:860px){
  .phero__split{grid-template-columns:1fr}
  .pshowcase{justify-items:center}
}

/* product prev / next navigator — deep band with rainbow edge + glow */
.pnav{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);color:#eef0ff;
  padding-block:clamp(2rem,4vw,3.2rem)}
.pnav::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.pnav::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 130% at 50% -20%,rgba(58,47,176,.55),transparent 70%),
    radial-gradient(closest-side at 8% 130%,rgba(30,159,224,.3),transparent),
    radial-gradient(closest-side at 92% 130%,rgba(229,21,126,.26),transparent),
    radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:auto,auto,auto,26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.2));mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.2))}
.pnav__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.pnav__link{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:#fff;
  padding:.8rem 1.15rem;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);transition:background .3s,border-color .3s,transform .3s var(--ease)}
.pnav__link:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.pnav__link[data-p-prev]{justify-self:start}
.pnav__link--next{justify-self:end;text-align:right}
.pnav__all{justify-self:center}
.pnav__arrow{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--grad);color:#fff}
.pnav__arrow svg{width:16px;height:16px}
.pnav__meta{display:flex;flex-direction:column;line-height:1.25}
.pnav__k{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.pnav__name{font-family:var(--font-display);font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.pnav__all{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-family:var(--font-display);font-weight:600;font-size:.82rem;color:rgba(255,255,255,.72);
  padding:.55rem .95rem;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.16);
  transition:color .3s,border-color .3s,background .3s}
.pnav__all:hover{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.06)}
.pnav__all svg{width:15px;height:15px}
@media (max-width:680px){
  .pnav__row{grid-template-columns:1fr;gap:.7rem}
  .pnav__link,.pnav__link--next{width:100%;text-align:left;justify-content:flex-start}
  .pnav__link[data-p-prev]{justify-self:stretch}
  .pnav__link--next{justify-self:stretch;flex-direction:row}
  .pnav__all{justify-self:stretch;order:3;justify-content:center}
}

.phero--deep{background:var(--deep);color:#eef0ff}
.phero--deep h1{color:#fff}
.phero--deep .eyebrow,.phero--deep .eyebrow a{color:#fff}
.phero--deep .eyebrow .idx{color:rgba(255,255,255,.5)}
.phero--deep .eyebrow .idx b{color:var(--gold)}
.phero--deep .lead{color:rgba(255,255,255,.72)}

/* photo-backed hero — set --phimg:url(...) on the section */
.phero--img{position:relative;isolation:isolate;overflow:hidden}
.phero--img::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(100deg,rgba(20,26,60,.95) 0%,rgba(20,26,60,.82) 46%,rgba(20,26,60,.5) 100%),
    linear-gradient(180deg,rgba(20,26,60,.35),rgba(20,26,60,.15) 30%,rgba(20,26,60,.72)),
    var(--phimg);
  background-size:cover;background-position:center;background-repeat:no-repeat}
@media (max-width:1000px){
  .phero--img::before{background-image:
    linear-gradient(180deg,rgba(20,26,60,.86),rgba(20,26,60,.78) 45%,rgba(20,26,60,.92)),var(--phimg)}
}

/* full, unzoomed photo hero — pair with .phero--img, shows the whole image with no cropping */
.phero--contain{background:var(--deep)}
.phero--contain::before{background-size:auto 100%,auto 100%,contain;background-position:center,center,center bottom}
@media (max-width:1000px){
  .phero--contain::before{background-size:auto 100%,auto 100%,contain}
}

/* photo section background — pair with .section--deep, set --secimg:url(...) */
.section--bg{position:relative;isolation:isolate;overflow:hidden}
.section--bg::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(rgba(20,26,60,.9),rgba(20,26,60,.9)),
    var(--secimg);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.section--bg.section--bg-soft::before{background-image:
  linear-gradient(rgba(245,246,252,.9),rgba(245,246,252,.94)),var(--secimg)}

/* abstract gradient wash behind light sections — set --secimg:url('/assets/img/bg-grad-*.jpg') */
.section--grad{position:relative;isolation:isolate;overflow:hidden;background:var(--paper-2)}
.section--grad::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.34),rgba(255,255,255,.62)),var(--secimg);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.section--grad.section--panel{background:none}
.section--grad.section--panel::before{background-image:
  linear-gradient(rgba(245,246,252,.55),rgba(245,246,252,.8)),var(--secimg)}
/* heavier wash — for a busy photo behind a light section (keeps text undisturbed) */
.section--grad.section--grad-photo::before{background-image:
  linear-gradient(180deg,rgba(245,246,252,.74) 0%,rgba(245,246,252,.87) 42%,rgba(245,246,252,.93) 100%),var(--secimg)}

/* course category band — full-bleed colour tiles over a photo */
.catband{display:grid;grid-template-columns:repeat(4,1fr)}
.cat{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(84px,9vw,104px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:.1rem;
  padding:clamp(.6rem,1.1vw,.85rem) clamp(.8rem,1.4vw,1.1rem);text-decoration:none;color:#fff;background:var(--cat,var(--indigo))}
.cat::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--img);
  background-size:cover;background-position:center;transition:transform .6s var(--ease)}
.cat::after{content:"";position:absolute;inset:0;z-index:-1;transition:opacity .4s var(--ease);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--cat,var(--indigo)) 68%,transparent) 0%,
    color-mix(in srgb,var(--cat,var(--indigo)) 85%,transparent) 55%,
    color-mix(in srgb,var(--cat,var(--indigo)) 94%,transparent) 100%)}
.cat:hover::before{transform:scale(1.06)}
.cat:hover::after{opacity:.92}
.cat__count{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.02em;opacity:.88}
.cat__title{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.12;
  font-size:clamp(.9rem,1.1vw,1.05rem)}
.cat__title::after{content:"";display:block;width:0;height:2px;background:#fff;margin-top:.3rem;
  transition:width .4s var(--ease)}
.cat:hover .cat__title::after{width:44px}
@media (hover:none){.cat:hover::before{transform:none}}
@media (max-width:900px){.catband{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.catband{grid-template-columns:1fr}}

/* =====================================================================
   ICON CHIPS  — faceted brand-gradient tiles
   ===================================================================== */
.ico{
  --_c:var(--ic,var(--indigo));
  position:relative;isolation:isolate;overflow:hidden;flex:none;
  border-radius:30%;
  background-color:var(--_c);
  background-image:
    linear-gradient(145deg,rgba(255,255,255,.42),rgba(255,255,255,0) 46%),
    linear-gradient(320deg,rgba(10,14,40,.32),rgba(10,14,40,0) 44%);
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  box-shadow:
    0 12px 26px -10px color-mix(in srgb,var(--_c) 60%,transparent),
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -8px 16px -8px rgba(10,14,40,.35);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),filter .4s var(--ease);
}
/* faceted shard — a nod to the low-poly logo */
.ico::before{content:"";position:absolute;z-index:1;right:-26%;bottom:-34%;width:78%;height:78%;
  background:rgba(255,255,255,.16);transform:rotate(34deg)}
.ico::after{content:"";position:absolute;z-index:1;left:-30%;top:-40%;width:70%;height:70%;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.35),transparent 62%)}
.ico svg{position:relative;z-index:2;filter:drop-shadow(0 2px 3px rgba(10,14,40,.28))}
.ico img{position:relative;z-index:2}

/* interactive lift when the chip lives in a hoverable card / row */
.caps__item:hover .ico,
.course:hover .course__ic,
.why li:hover .ico,
.eco__node:hover .ico{
  transform:translateY(-2px) rotate(-6deg) scale(1.06);
  box-shadow:
    0 18px 36px -12px color-mix(in srgb,var(--_c,var(--indigo)) 70%,transparent),
    inset 0 1.5px 0 rgba(255,255,255,.7);
}
.caps__item:hover .ico svg,
.course:hover .course__ic svg,
.why li:hover .ico svg{transform:rotate(6deg);transition:transform .4s var(--ease)}

/* the rainbow mark used as the "Technology" capability — framed to match */
.caps__item img{border-radius:30%;padding:9px;background:#fff;border:1px solid var(--line);
  box-shadow:0 12px 26px -12px rgba(20,26,60,.25),inset 0 1px 0 rgba(255,255,255,.8)}

/* footer social — brand-glow on hover */
.footer__social a{transition:transform .3s var(--ease),background .25s,border-color .25s,color .25s,box-shadow .3s}
.footer__social a:hover{transform:translateY(-2px) rotate(-6deg);
  box-shadow:0 10px 22px -10px rgba(255,194,14,.5)}

/* trust-row line icons — put them in a soft ring */
.eco-trust svg{padding:7px;border-radius:12px;background:var(--paper-2);
  box-shadow:inset 0 0 0 1px var(--line)}

/* =====================================================================
   TRAINING page
   ===================================================================== */
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;border-radius:var(--r-pill);
  background:var(--paper-2);border:1px solid var(--line);font-family:var(--font-display);font-weight:600;
  font-size:.8rem;letter-spacing:-.01em;color:var(--ink)}
.pill svg{width:16px;height:16px;color:var(--indigo)}

.courses__head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:2rem}
.courses__head .btn{flex:none}
.courses__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.course{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;
  display:flex;flex-direction:column;gap:.5rem;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.course:hover{transform:translateY(-5px);box-shadow:0 28px 56px -34px rgba(20,26,60,.28);border-color:var(--line-2)}
.course__ic{width:46px;height:46px;display:grid;place-items:center}
.course__ic svg{width:24px;height:24px}
.course h3{font-size:.98rem;text-transform:none;letter-spacing:-.01em;line-height:1.2}
.course p{margin:0;font-size:.84rem;color:var(--ink-3);line-height:1.45;flex:1}
.course__more{font-family:var(--font-display);font-weight:600;font-size:.8rem;color:var(--indigo);
  text-transform:uppercase;letter-spacing:.01em}

.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.ticks li{position:relative;padding-left:1.9rem;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.15em;width:20px;height:20px;border-radius:50%;
  background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}

/* ===== capability showcase (interactive auto-advancing tabs + stage) ===== */
.capshow{display:flex;flex-direction:column;gap:clamp(1rem,1.8vw,1.4rem)}
.capshow__tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem}
.capshow__tab{--c:var(--indigo);position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:.9rem 1rem 1rem;text-align:left;cursor:pointer;overflow:hidden;
  font:inherit;-webkit-tap-highlight-color:transparent;
  transition:border-color .3s,box-shadow .3s,transform .3s}
.capshow__tab:hover{transform:translateY(-2px)}
.capshow__tab.is-active{border-color:color-mix(in srgb,var(--c) 45%,var(--line));
  box-shadow:0 22px 42px -32px color-mix(in srgb,var(--c) 50%,transparent)}
.capshow__tabtop{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.75rem}
.capshow__tabnum{font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:var(--c)}
.capshow__tabname{font-family:var(--font-display);font-weight:600;font-size:.82rem;line-height:1.25;color:var(--ink)}
.capshow__prog{position:relative;height:3px;border-radius:2px;background:var(--paper-2);overflow:hidden}
.capshow__progbar{position:absolute;inset:0 auto 0 0;width:0;background:var(--c);border-radius:2px}
.capshow__tab.is-active .capshow__progbar{animation:capshowProg 5.4s linear forwards}
@keyframes capshowProg{from{width:0}to{width:100%}}

.capshow__stage{position:relative;min-height:300px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--paper-2);overflow:hidden}
.capshow__stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(20,26,60,.05) 0 1px,transparent 1px 54px),
    repeating-linear-gradient(0deg,rgba(20,26,60,.042) 0 1px,transparent 1px 54px);
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 26% 42%,#000 0%,transparent 72%);
          mask-image:radial-gradient(ellipse 70% 90% at 26% 42%,#000 0%,transparent 72%)}
.capshow__panel{--c:var(--indigo);position:absolute;inset:0;z-index:0;display:flex;align-items:center;
  gap:clamp(1.5rem,3.4vw,3.2rem);padding:clamp(1.8rem,3.6vw,3.4rem);opacity:0;visibility:hidden;
  transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.capshow__panel.is-active{opacity:1;visibility:visible;z-index:1;transform:none;
  transition:opacity .45s var(--ease) .05s,transform .45s var(--ease) .05s}
.capshow__panel::before{content:"";position:absolute;inset:0;z-index:0;background:
    radial-gradient(circle at 8% 12%,color-mix(in srgb,var(--c) 20%,transparent),transparent 52%),
    linear-gradient(115deg,color-mix(in srgb,var(--c) 9%,transparent) 0%,transparent 50%),
    #fff}
.capshow__panel::after{content:"";position:absolute;z-index:0;top:50%;right:-10%;
  width:min(46%,380px);aspect-ratio:1;transform:translateY(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 26%,transparent) 0%,transparent 70%)}
.capshow__ic{position:relative;z-index:1;flex:none;width:clamp(84px,9vw,116px);aspect-ratio:1;border-radius:26px;
  background:color-mix(in srgb,var(--c) 12%,#fff);display:grid;place-items:center;
  box-shadow:0 22px 44px -26px color-mix(in srgb,var(--c) 42%,transparent)}
.capshow__ic svg{width:46%;height:46%;color:var(--c);stroke:var(--c)}
.capshow__body{position:relative;z-index:1}
.capshow__body h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.7rem);
  margin:0 0 .6rem;color:var(--ink)}
.capshow__body p{font-size:.98rem;line-height:1.6;color:var(--ink-2);margin:0 0 1.5rem;max-width:46ch}
.capshow__body .btn{--bg:var(--c)}
@media (max-width:900px){
  .capshow__tabs{grid-template-columns:repeat(3,1fr)}
  .capshow__panel{flex-direction:column;align-items:flex-start;text-align:left}
  .capshow__stage{min-height:360px}
}
@media (max-width:560px){.capshow__tabs{grid-template-columns:repeat(2,1fr)}}

/* ===== Cargo Gyan hero — full-bleed photo faded into the copy ===== */
.gyanhero{position:relative;isolation:isolate;overflow:hidden;
  padding-bottom:clamp(2.6rem,6vw,5rem)}
.gyanhero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:clamp(46px,5.6vw,74px) clamp(46px,5.6vw,74px);
  background-position:center;
  -webkit-mask-image:radial-gradient(125% 120% at 6% 34%,#000 0,#000 38%,transparent 74%);
          mask-image:radial-gradient(125% 120% at 6% 34%,#000 0,#000 38%,transparent 74%)}
.gyanhero > .wrap{position:relative;z-index:2}
.gyanhero__copy{max-width:min(560px,54%)}
.gyanhero__photo{position:absolute;top:0;right:0;bottom:0;width:min(58%,940px);z-index:1;pointer-events:none}
.gyanhero__photo img{width:100%;height:100%;object-fit:cover;object-position:88% 50%}
.gyanhero__photo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--paper) 0%,rgba(255,255,255,.82) 26%,rgba(255,255,255,.35) 46%,transparent 62%)}
.gyanhero__photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 24%,transparent 74%,var(--paper))}
.tlink--play{display:inline-flex;align-items:center;gap:.5rem}
.tlink--play::after{content:none}
.tlink--play svg{width:22px;height:22px;flex:none}
.gyanstrip{padding-top:0}
.gyanstrip > .wrap > .caps{border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.1rem,2.4vw,1.8rem);background:#fff;
  box-shadow:0 30px 60px -44px rgba(20,26,60,.4)}
@media (max-width:960px){
  .gyanhero__copy{max-width:none}
  .gyanhero__photo{position:relative;width:100vw;margin-left:calc(50% - 50vw);
    height:clamp(220px,46vw,340px);margin-top:1.8rem}
  .gyanhero__photo::before{background:linear-gradient(180deg,var(--paper),transparent 34%)}
  .gyanhero__photo::after{background:linear-gradient(0deg,var(--paper),transparent 32%)}
  .gyanhero{padding-bottom:0}
  .gyanstrip{padding-top:clamp(1.6rem,4vw,2.4rem)}
}

/* ===== About Us — features around a centre figure ===== */
.aboutfeat{text-align:center}

/* photo backdrop with a gradual fade to the page colour at the bottom */
.aboutfeat--bg{position:relative;isolation:isolate}
.aboutfeat--bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,.46) 0%,
      rgba(255,255,255,.62) 26%,
      rgba(245,246,252,.9) 58%,
      var(--paper-2) 82%,
      var(--paper-2) 100%),
    var(--bgimg);
  background-size:cover,cover;background-position:center top,center top;background-repeat:no-repeat,no-repeat}
@media (max-width:900px){
  .aboutfeat--bg::before{background-image:
    linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.82) 40%,var(--paper-2) 78%),var(--bgimg)}
}
.aboutfeat__head{max-width:620px;margin:0 auto}
.aboutfeat__head .eyebrow{justify-content:center}

/* slow, smooth fade-up for the About Us opener */
.aboutfeat [data-reveal],
.aboutfeat [data-reveal-stagger] > *{
  opacity:0;transform:translateY(48px);
  transition:opacity 1.5s var(--ease-out),transform 1.5s var(--ease-out)}
.aboutfeat [data-reveal].in,
.aboutfeat [data-reveal-stagger].in > *{opacity:1;transform:none}
.aboutfeat [data-reveal-stagger].in > *:nth-child(1){transition-delay:.05s}
.aboutfeat [data-reveal-stagger].in > *:nth-child(2){transition-delay:.3s}
.aboutfeat [data-reveal-stagger].in > *:nth-child(3){transition-delay:.55s}
@media (prefers-reduced-motion:reduce){
  .aboutfeat [data-reveal],.aboutfeat [data-reveal-stagger] > *{transition:none;opacity:1;transform:none}
}
.aboutfeat__head h1{margin:.4rem 0 0}
.aboutfeat__title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem}
.aboutfeat__eyebrow{font-family:var(--font-mono);font-weight:700;font-size:.8rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-3)}
.aboutfeat__logo{height:auto;width:clamp(170px,20vw,260px);vertical-align:middle}
.aboutfeat__sub{margin:.7rem 0 0;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3)}
.aboutfeat__grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1.5rem,4vw,3.4rem);
  align-items:center;margin-top:clamp(2rem,5vw,3.4rem);text-align:left}
.aboutfeat__col{display:flex;flex-direction:column;gap:clamp(1.6rem,4vw,2.8rem)}
.aboutfeat__col--l{text-align:right}
.aboutfeat__item h3{display:flex;align-items:center;gap:.55rem;margin:0;
  font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.aboutfeat__col--l .aboutfeat__item h3{flex-direction:row-reverse}
.aboutfeat__ic{--_c:var(--ic,var(--indigo));flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;color:var(--_c);background:color-mix(in srgb,var(--_c) 14%,#fff)}
.aboutfeat__ic svg{width:15px;height:15px}
.aboutfeat__item p{margin:.55rem 0 0;font-size:.9rem;line-height:1.62;color:var(--ink-3);max-width:34ch}
.aboutfeat__col--l .aboutfeat__item p{margin-left:auto}
.aboutfeat__img{align-self:end}
.aboutfeat__img img{width:clamp(198px,22vw,290px);height:auto;display:block}

/* compact Our Vision section */
#vision{padding-block:clamp(2.4rem,4.5vw,3.6rem)}
#vision .split{align-items:center;gap:clamp(1.5rem,4vw,3rem)}

/* ===== Our Story — editorial two-column ===== */
.story__grid{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);align-items:start}
.story__aside{position:sticky;top:calc(var(--nav-h) + 2rem)}
.story__title{margin:.9rem 0 0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.6rem,2.9vw,2.4rem);line-height:1.05;letter-spacing:-.03em;color:var(--ink)}
.story__title .dim{color:var(--ink-3)}
.story__bar{display:block;width:56px;height:4px;border-radius:2px;background:var(--grad);margin-top:1.3rem}
.story__lead{margin:0;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
.story__body > p{margin:1.1rem 0 0;color:var(--ink-2);line-height:1.75}
.story__note{margin:1.7rem 0 0;padding:1.05rem 1.3rem;border-left:3px solid var(--indigo);
  background:var(--paper-2);border-radius:0 var(--r-sm) var(--r-sm) 0}
.story__note-k{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--indigo);margin-bottom:.4rem}
.story__note p{margin:0;color:var(--ink-2);line-height:1.65}
.story__note b{color:var(--ink)}
.story__kicker{margin:1.8rem 0 0;padding-left:1.1rem;border-left:3px solid var(--gold);
  font-family:var(--font-display);font-weight:600;font-size:clamp(1.08rem,1.8vw,1.32rem);
  letter-spacing:-.01em;line-height:1.4;color:var(--ink)}
@media (max-width:820px){
  .story__grid{grid-template-columns:1fr;gap:1.6rem}
  .story__aside{position:static}
}

/* ===== Leadership — founder perspective cards ===== */
.founders{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.2rem);align-items:start}
.founder{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.6rem,3vw,2.4rem);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.founder:hover{transform:translateY(-3px);box-shadow:0 26px 54px -34px color-mix(in srgb,var(--fc) 55%,transparent)}
.founder::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;
  border-radius:var(--r) var(--r) 0 0;background:var(--fc,var(--indigo))}
.founder__head{display:flex;align-items:center;gap:1rem;padding-bottom:1.15rem;margin-bottom:1.3rem;
  border-bottom:1px solid var(--line)}
.founder__pic{width:66px;height:66px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none;
  box-shadow:0 0 0 3px #fff,0 0 0 5px color-mix(in srgb,var(--fc) 38%,transparent);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);will-change:transform}
.founder__pic:hover{transform:scale(1.3);position:relative;z-index:5;
  box-shadow:0 0 0 4px #fff,0 18px 36px -14px color-mix(in srgb,var(--fc) 55%,transparent)}
@media (hover:none){.founder__pic:hover{transform:none}}
.founder__label{margin:0;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fc,var(--indigo))}
.founder__name{margin:.25rem 0 0;font-family:var(--font-display);font-weight:600;font-size:1.18rem;
  letter-spacing:-.01em;color:var(--ink)}
.founder__role{margin:.12rem 0 0;font-size:.82rem;color:var(--ink-3)}
.founder__body > p{margin:.9rem 0 0;color:var(--ink-2);font-size:.95rem;line-height:1.7}
.founder__body > p:first-child{margin-top:0}
.founder__quote{color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:1.06rem;line-height:1.4}
.founder__pull{margin-top:1.3rem;padding-left:.95rem;border-left:3px solid var(--fc,var(--indigo));
  color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:.98rem;line-height:1.5}
@media (max-width:820px){.founders{grid-template-columns:1fr;gap:1.4rem}}
@media (max-width:900px){
  .aboutfeat__grid{grid-template-columns:1fr;text-align:center;gap:2.4rem}
  .aboutfeat__col{gap:2.2rem}
  .aboutfeat__col--l{text-align:center}
  .aboutfeat__item h3,.aboutfeat__col--l .aboutfeat__item h3{justify-content:center;flex-direction:row}
  .aboutfeat__item p,.aboutfeat__col--l .aboutfeat__item p{margin-inline:auto}
  .aboutfeat__img{order:-1;justify-self:center}
}

.why{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.why li{display:flex;align-items:center;gap:.8rem;font-family:var(--font-display);font-weight:600;
  color:#fff;font-size:.95rem;line-height:1.25}
.why i{width:40px;height:40px;display:grid;place-items:center;color:#fff;flex:none}
.why i svg{width:20px;height:20px}
@media (max-width:560px){.why{grid-template-columns:1fr}}

/* ===== Why Cargo Gyan — full-bleed photo + tinted rows ===== */
.whygyan{padding-block:clamp(2.2rem,4.5vw,3.4rem) 0;overflow:hidden}
.whygyan__grid{width:100vw;margin-left:calc(50% - 50vw);margin-top:clamp(1.4rem,3vw,2.2rem);
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.whygyan__media{position:relative;min-height:clamp(340px,40vw,540px)}
.whygyan__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.whygyan__panel{display:flex;flex-direction:column;justify-content:center}
.whygyan__row{display:flex;gap:clamp(1rem,2vw,1.5rem);align-items:flex-start;
  padding:clamp(1.5rem,3vw,2.5rem) clamp(1.6rem,4.5vw,3.6rem)}
.whygyan__row + .whygyan__row{border-top:1px solid rgba(255,255,255,.1)}
.whygyan__row:nth-child(1){background:rgba(255,255,255,.06)}
.whygyan__row:nth-child(2){background:rgba(255,255,255,.03)}
.whygyan__ic{flex:none;width:clamp(46px,4.4vw,56px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;background:var(--gold);color:var(--deep)}
.whygyan__ic svg{width:46%;height:46%}
.whygyan__row h3{margin:0 0 .4rem;font-family:var(--font-display);font-weight:600;font-size:1.02rem;
  letter-spacing:.03em;text-transform:uppercase;color:#fff}
.whygyan__row p{margin:0;font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.72);max-width:44ch}
@media (max-width:860px){
  .whygyan__grid{grid-template-columns:1fr}
  .whygyan__media{min-height:260px}
}

/* =====================================================================
   ENROLL band
   ===================================================================== */
.enroll{position:relative;background:var(--deep);color:#fff;border-radius:var(--r-lg);overflow:hidden;
  padding:clamp(1.4rem,3vw,2rem) clamp(1.4rem,3.4vw,2.4rem);
  display:flex;align-items:center;gap:clamp(1.1rem,2.6vw,2.2rem);flex-wrap:wrap}
.enroll::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad)}
.enroll__icon{width:54px;height:54px;border-radius:15px;background:rgba(255,255,255,.1);
  display:grid;place-items:center;flex:none;color:var(--gold)}
.enroll__icon svg{width:28px;height:28px}
.enroll__txt{flex:1 1 240px;min-width:0}
.enroll__txt b{display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.05rem,1.7vw,1.32rem);color:#fff;letter-spacing:-.01em}
.enroll__txt span{font-size:.92rem;color:rgba(255,255,255,.66)}
.enroll .btn{flex:none}
.enroll__ask{display:flex;align-items:center;gap:.7rem;flex:none;
  padding-left:clamp(1rem,2.4vw,1.8rem);border-left:1px solid rgba(255,255,255,.16)}
.enroll__ask > svg{width:22px;height:22px;color:var(--gold);flex:none}
.enroll__ask small{display:block;font-family:var(--font-mono);font-size:.72rem;
  color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.06em}
.enroll__ask a{color:var(--gold);font-weight:600;font-family:var(--font-display);font-size:.95rem}
@media (max-width:860px){
  .enroll{flex-direction:column;align-items:flex-start}
  .enroll .btn{width:100%;justify-content:center}
  .enroll__ask{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding-left:0;padding-top:1.1rem;width:100%}
}

/* =====================================================================
   CTA band
   ===================================================================== */
.cta{text-align:center}
.cta h2{font-size:clamp(1.9rem,4.4vw,3.4rem);text-transform:uppercase;letter-spacing:-.03em;max-width:20ch;margin-inline:auto}
.cta .btn{margin-top:1.8rem}

/* CTA with a cut-out person beside the copy */
.cta--person{text-align:left;overflow:hidden;padding-block:clamp(1.5rem,3vw,2.5rem) 0;position:relative;isolation:isolate}
.cta--person::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 110%,rgba(58,47,176,.5),transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 68px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 68px)}
.cta__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1rem,2.5vw,2.2rem);align-items:end}
.cta__body{padding-block:clamp(2.4rem,4vw,3.6rem);align-self:center}
.cta--person .eyebrow{justify-content:flex-start}
.cta--person h2{margin-inline:0;text-align:left}
.cta--person .lead{margin:1rem 0 0;text-align:left;max-width:44ch}
.cta__person{order:-1;align-self:end;justify-self:start;width:100%;max-width:440px;height:auto;display:block;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.4))}
@media (max-width:860px){
  .cta--person{text-align:center;padding-bottom:clamp(40px,6vw,72px)}
  .cta__grid{grid-template-columns:1fr;gap:.6rem;align-items:center}
  .cta__body{padding-bottom:0}
  .cta--person .eyebrow{justify-content:center}
  .cta--person h2{text-align:center;margin-inline:auto}
  .cta--person .lead{text-align:center;margin-inline:auto}
  .cta__person{max-width:280px;justify-self:center}
}

/* =====================================================================
   FOOTER  — deep-navy brand band with rainbow top edge
   ===================================================================== */
.footer{position:relative;background:var(--deep);color:rgba(255,255,255,.7);padding-block:clamp(52px,6vw,80px) 30px}
.footer::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad)}
.footer a{color:rgba(255,255,255,.7);transition:color .2s}
.footer a:hover{color:#fff}
.footer__top{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:clamp(1.4rem,3vw,2.6rem);
  padding-bottom:2.6rem;border-bottom:1px solid rgba(255,255,255,.14)}
.footer__brand img{height:48px;width:auto;margin-bottom:1rem;content:url("../assets/brand/logo-trans.png")}
.footer__brand p{max-width:30ch;font-size:.9rem;margin:0 0 1.1rem;line-height:1.55}
.footer__addr{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 .9rem}
.footer__addr-chip{display:flex;align-items:center;gap:.7rem;padding:.6rem .95rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm)}
.footer__addr-ic{flex:none;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.1);
  display:grid;place-items:center;color:var(--gold)}
.footer__addr-ic svg{width:16px;height:16px}
.footer__addr-chip b{font-size:.76rem;font-weight:600;color:#fff;white-space:nowrap}
.footer__addr--bottom{margin:0;gap:.6rem}
.footer__addr--bottom .footer__addr-chip{padding:.4rem .75rem}
.footer__addr--bottom .footer__addr-ic{width:26px;height:26px;border-radius:8px}
.footer__addr--bottom .footer__addr-ic svg{width:13px;height:13px}
.footer__addr--bottom .footer__addr-chip b{font-size:.72rem}
@media (max-width:720px){.footer__addr--bottom{order:3;width:100%;justify-content:center}}
.footer h4{color:#fff;font-family:var(--font-display);font-size:.74rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;margin:0 0 .9rem}
.footer__col a,.footer__col p{display:block;font-size:.88rem;margin:.4rem 0;line-height:1.4}
.footer__col p{color:rgba(255,255,255,.55)}
.footer__social{display:flex;gap:.6rem}
.footer__social a{width:36px;height:36px;border:1px solid rgba(255,255,255,.24);border-radius:50%;
  display:grid;place-items:center}
.footer__social a:hover{background:rgba(255,255,255,.1);border-color:var(--gold);color:var(--gold)}
.footer__social svg{width:15px;height:15px}
.footer__bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding-top:1.8rem;font-size:.8rem;color:rgba(255,255,255,.55)}
.footer__legal{display:flex;gap:1.4rem}
@media (max-width:1080px){.footer__top{grid-template-columns:1fr 1fr 1fr}}

/* =====================================================================
   REVEAL
   ===================================================================== */
/* smooth, slow fade-up — used across every page */
[data-reveal]{opacity:0;transform:translateY(40px);
  transition:opacity 1.3s var(--ease-out),transform 1.3s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-stagger]>*{opacity:0;transform:translateY(36px);
  transition:opacity 1.15s var(--ease-out),transform 1.15s var(--ease-out)}
[data-reveal-stagger].in>*{opacity:1;transform:none}
[data-reveal-stagger].in>*:nth-child(1){transition-delay:.04s}
[data-reveal-stagger].in>*:nth-child(2){transition-delay:.13s}
[data-reveal-stagger].in>*:nth-child(3){transition-delay:.22s}
[data-reveal-stagger].in>*:nth-child(4){transition-delay:.31s}
[data-reveal-stagger].in>*:nth-child(5){transition-delay:.4s}
[data-reveal-stagger].in>*:nth-child(6){transition-delay:.49s}
[data-reveal-stagger].in>*:nth-child(n+7){transition-delay:.58s}

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-stagger]>*{opacity:1!important;transform:none!important}
  .marquee__row{animation:none;flex-wrap:wrap;width:auto}
  .stat .odo i{transition:none}
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1040px){
  .hero__grid,.eco,.vm,.split,.feat__body{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .caps{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr 1fr}
  .footer__brand{grid-column:1/-1}
  .eco__art{max-width:440px;margin-inline:auto}
  .hero__art{max-width:460px;margin-inline:auto;width:100%}
}
@media (max-width:620px){
  .caps{grid-template-columns:1fr 1fr}
  .eco-trust{grid-template-columns:1fr;margin-left:-.6rem}
  .footer__top{grid-template-columns:1fr 1fr}
  .pgrid,.cardgrid{grid-template-columns:1fr 1fr}
  .eco__art{max-width:300px}
  .eco__node{width:72px;font-size:.6rem;gap:.25rem;line-height:1.15}
  .eco__node i{width:34px;height:34px}
  .eco__node i svg{width:17px;height:17px}
}
@media (max-width:420px){
  .pgrid,.cardgrid{grid-template-columns:1fr}
  .pcard{padding-right:1.7rem}
  .pcard__logo{position:static;margin-bottom:.4rem}
}
@media (max-width:640px){
  .hero__script{font-size:clamp(1.35rem,7.2vw,1.8rem);white-space:normal}
  .hero__through{font-size:clamp(1.1rem,5.8vw,1.5rem);white-space:normal}
  .hero__copy{max-width:100%}
  .hero > .wrap{padding-left:clamp(20px,6vw,28px);padding-right:clamp(20px,6vw,28px)}
}