/* ============================================================
   Cross Trade Shipping — inner-page extensions
   (loads AFTER style.css; reuses its tokens & blocks)
   ============================================================ */

/* ---------- Page hero video + drifting ship ---------- */
/* video rotated 90° so the wake runs LEFT->RIGHT; shifted down below the headline */
.phero__bg video{position:absolute;top:calc(50% + 18vh);left:50%;width:140vh;height:140vw;transform:translate(-50%,-50%) rotate(90deg);object-fit:cover;max-width:none;max-height:none}
.phero__ship{position:absolute;left:7%;top:calc(50% + 18vh);width:min(7vw,96px);z-index:1;transform:translate(0,-50%) rotate(90deg);filter:drop-shadow(0 16px 36px rgba(0,0,0,.5));pointer-events:none;will-change:transform}

/* ---------- Motto background tanker (Stark) ---------- */
.motto__ship{position:absolute;width:min(36vw,500px);right:-5%;bottom:-12%;transform:rotate(14deg);opacity:.45;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));pointer-events:none;will-change:transform;z-index:0}
.motto .wrap{position:relative;z-index:1}

/* ---------- Nav dropdown (Services) ---------- */
/* escape hatch: if CDNs hang and main.js never boots, show all content */
html.js-dead [data-reveal],html.js-dead [data-fade],html.js-dead [data-hline],html.js-dead [data-stagger],html.js-dead [data-split]{opacity:1!important;transform:none!important;clip-path:none!important;visibility:visible!important}
html.js-dead [data-words] .w{opacity:1!important}

.nav__drop{position:relative;display:flex;align-items:center}
.nav__drop>a{font-size:var(--t-sm);font-weight:500;color:rgba(255,255,255,.92);position:relative;padding:4px 0;transition:color var(--fast) var(--eo)}
.nav__drop>a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--teal-bright);transition:width var(--fast) var(--eo)}
.nav__drop:hover>a::after{width:100%}
.nav.scrolled .nav__drop>a{color:var(--ink-soft)}
.nav.scrolled .nav__drop:hover>a{color:var(--teal-deep)}
.nav__panel{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);padding-top:16px;opacity:0;pointer-events:none;transition:opacity var(--fast) var(--eo),transform var(--fast) var(--eo);z-index:950}
.nav__drop:hover .nav__panel,.nav__drop:focus-within .nav__panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav__panel-in{display:flex;flex-direction:column;gap:2px;background:rgba(250,251,252,.98);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--sh-lg);padding:10px;min-width:250px}
.nav__panel-in a{padding:11px 14px;border-radius:9px;font-size:var(--t-sm);font-weight:500;color:var(--ink-soft);transition:background var(--fast) var(--eo),color var(--fast) var(--eo)}
.nav__panel-in a:hover{background:var(--bg-soft);color:var(--teal-deep)}
@media(max-width:680px){.nav__drop{display:none}}

/* ---------- Page hero ---------- */
/* ---------- Page hero — CargoKite sticky full-screen; content rides over ---------- */
.phero{position:sticky;top:0;z-index:1;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;background:var(--navy);color:#fff;overflow:hidden;padding:160px 0 calc(var(--s8) + 64px)}
main>section:not(.phero){position:relative;z-index:2}
.prose,.hscroll,.ghostband{background:var(--bg)}
.phero+section{box-shadow:0 -40px 80px rgba(8,23,38,.28)}
.phero__content{will-change:transform,opacity}
.phero__bg{will-change:transform}
.phero__bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.phero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(15deg,rgba(8,23,38,.92) 0%,rgba(8,23,38,.62) 55%,rgba(8,23,38,.38) 100%)}
.phero__content{position:relative;z-index:2;width:100%}
.phero__crumb{display:flex;align-items:center;gap:10px;font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.64);margin-bottom:var(--s5)}
.phero__crumb a{color:rgba(255,255,255,.64);transition:color var(--fast) var(--eo)}
.phero__crumb a:hover{color:var(--teal-bright)}
.phero__crumb i{width:4px;height:4px;border-radius:50%;background:var(--teal-bright);font-style:normal}
.phero__title{font-family:var(--serif);font-weight:500;font-size:clamp(2.9rem,7vw,5.8rem);line-height:1;letter-spacing:-.02em;max-width:17ch}
.phero__lead{margin-top:var(--s5);max-width:56ch;color:var(--on-dark-soft);font-size:var(--t-md);line-height:1.55}

/* ---------- Hero keyword ticker (CargoKite scroll ticker) ---------- */
.phero__ticker{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid rgba(255,255,255,.14);padding:13px 0;background:rgba(8,23,38,.3);backdrop-filter:blur(8px)}
.phero__ticker .marquee__track{font-family:var(--sans);font-size:var(--t-xs);font-weight:600;letter-spacing:.2em;color:rgba(255,255,255,.6);gap:26px}
.phero__ticker .marquee__track i{color:var(--teal-bright);font-style:normal}

/* ---------- Ghost mega-type band (Stark outline type, scrubbed) ---------- */
.ghostband{position:relative;z-index:2;overflow:hidden;padding:clamp(28px,5vw,72px) 0}
.ghostband span{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(3.2rem,12.5vw,10.5rem);line-height:.92;letter-spacing:-.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(11,31,51,.22);will-change:transform}

/* ---------- Sticky stacking cards (Stark deck) ---------- */
.stack{display:flex;flex-direction:column;gap:var(--s5);margin-top:var(--s7)}
.scard{position:sticky;border-radius:var(--radius);padding:clamp(28px,5vw,64px);min-height:56vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;box-shadow:var(--sh-lg)}
.scard:nth-child(1){top:calc(84px + 0px)}
.scard:nth-child(2){top:calc(84px + 20px)}
.scard:nth-child(3){top:calc(84px + 40px)}
.scard h3{font-family:var(--serif);font-weight:500;font-size:var(--t-xl);letter-spacing:-.02em;line-height:1.05;max-width:16ch}
.scard p{margin-top:var(--s4);font-size:var(--t-md);line-height:1.55;max-width:54ch}
.scard__no{position:absolute;top:clamp(14px,3vw,36px);right:clamp(20px,4vw,48px);font-family:var(--serif);font-weight:500;font-size:clamp(4.4rem,11vw,9.5rem);line-height:1;color:transparent;pointer-events:none}
.scard--light .scard__no{-webkit-text-stroke:1.5px rgba(11,31,51,.3)}
.scard--navy .scard__no{-webkit-text-stroke:1.5px rgba(255,255,255,.38)}
.scard--teal .scard__no{-webkit-text-stroke:1.5px rgba(255,255,255,.38)}
.scard--light{background:var(--bg-tint);border:1px solid var(--line);color:var(--ink)}
.scard--light p{color:var(--ink-soft)}
.scard--navy{background:var(--navy);color:#fff}
.scard--navy p{color:var(--on-dark-soft)}
.scard--teal{background:linear-gradient(140deg,var(--teal-deep),var(--teal));color:#fff}
.scard--teal p{color:rgba(255,255,255,.9)}

/* ---------- Motto statement rows (Stark stacked type) ---------- */
.motto__rows{position:relative;font-family:var(--serif);font-weight:500;font-size:clamp(2.3rem,6.8vw,5.6rem);line-height:1.04;letter-spacing:-.02em}
.motto__rows span{display:block}
.motto__rows .accent{background:linear-gradient(100deg,var(--teal-bright),var(--gold-bright));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Clip-path image reveal (Stark unmask) ---------- */
.prose__img[data-reveal],.split__media[data-reveal]{clip-path:inset(9% 9% 9% 9% round var(--radius));transition:opacity var(--rev-dur) var(--ease-soft),transform var(--rev-dur) var(--ease-soft),filter var(--rev-dur) var(--ease-soft),clip-path 1.25s var(--ease-soft);transition-delay:calc(var(--i,0)*70ms)}
.prose__img[data-reveal].in,.split__media[data-reveal].in{clip-path:inset(0 0 0 0 round var(--radius))}

/* Stark word-by-word scrub: words start dim, JS drives opacity */
[data-words] .w{opacity:.13;display:inline-block;will-change:opacity}
/* accent spans stay whole (background-clip:text can't paint through inline-block children) */
[data-words] .accent.w{display:inline}
@media(prefers-reduced-motion:reduce){[data-words] .w{opacity:1!important}}

/* parallax images: slight overscale so travel never shows edges */
img[data-parallax]{transform:scale(1.08);will-change:transform}

/* ---------- Prose (story sections) ---------- */
.prose{padding:var(--section) 0}
.prose--soft{background:var(--bg-soft)}
.prose__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s7) var(--s9);align-items:start}
.prose__aside{position:sticky;top:110px}
.prose__head{font-family:var(--serif);font-weight:500;font-size:var(--t-xl);line-height:1.06;letter-spacing:-.02em;margin-top:var(--s4);max-width:16ch}
.prose__body p{color:var(--ink-soft);font-size:var(--t-md);max-width:var(--measure);line-height:1.65}
.prose__body p+p{margin-top:var(--s5)}
.prose__body strong{color:var(--ink);font-weight:600}
.prose__img{margin-top:var(--s7);border-radius:var(--radius);overflow:hidden;box-shadow:var(--sh-md)}
.prose__img img{width:100%;height:100%;object-fit:cover}

/* ---------- Big pull-quote band (code / motto) ---------- */
.motto{background:var(--navy);color:#fff;padding:var(--section) 0;text-align:center;position:relative;overflow:hidden}
.motto::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:30px 30px;opacity:.5}
.motto__text{position:relative;font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1.12;letter-spacing:-.015em;max-width:24ch;margin:0 auto}
.motto__text .accent{background:linear-gradient(100deg,var(--teal-bright),var(--gold-bright));-webkit-background-clip:text;background-clip:text;color:transparent}
.motto__label{position:relative;margin-top:var(--s6);font-size:var(--t-sm);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-soft)}

/* ---------- Chip grid (expertise, countries) ---------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.chips li{border:1px solid var(--line-strong);border-radius:999px;padding:12px 22px;font-weight:500;font-size:var(--t-sm);color:var(--ink);transition:background var(--fast) var(--eo),border-color var(--fast) var(--eo),color var(--fast) var(--eo)}
.chips li:hover{background:rgba(27,167,172,.08);border-color:var(--teal);color:var(--teal-deep)}
.chips--dark li{border-color:rgba(255,255,255,.18);color:var(--on-dark)}
.chips--dark li:hover{background:rgba(27,167,172,.18);border-color:var(--teal-bright);color:#fff}

/* ---------- Numbered duty list (light twin of problem__list) ---------- */
.duties{list-style:none;display:flex;flex-direction:column;gap:var(--s5);margin-top:var(--s6)}
.duties li{display:flex;gap:var(--s5);align-items:baseline;padding-bottom:var(--s5);border-bottom:1px solid var(--line);font-size:var(--t-md);color:var(--ink-soft);line-height:1.55}
.duties li span{font-family:var(--serif);font-size:var(--t-lg);color:var(--teal-deep);font-weight:600;flex:0 0 auto;font-variant-numeric:tabular-nums}

/* ---------- Highlight banner (COVID crew change, 24/7) ---------- */
.banner{background:linear-gradient(120deg,var(--teal-deep),var(--teal));color:#fff;border-radius:var(--radius);padding:var(--s7);display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap;justify-content:space-between}
.banner h3{font-family:var(--serif);font-weight:500;font-size:var(--t-lg);letter-spacing:-.01em;max-width:26ch}
.banner p{color:rgba(255,255,255,.88);font-size:var(--t-base);max-width:44ch}
.banner__tag{font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 16px;white-space:nowrap}

/* ---------- Photo gallery grid (awards / media) ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s7)}
.gallery figure{border-radius:var(--radius);overflow:hidden;background:var(--bg-tint);border:1px solid var(--line)}
.gallery figure.tall{grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .6s var(--eo)}
.gallery figure.tall img{aspect-ratio:auto;height:100%}
.gallery figure:hover img{transform:scale(1.04)}

/* ---------- Team ---------- */
.member-lead{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s7) var(--s9);align-items:center;padding:var(--s8) 0;border-top:1px solid var(--line)}
.member-lead:first-of-type{border-top:0;padding-top:0}
.member-lead__photo{border-radius:var(--radius);overflow:hidden;background:var(--navy);position:relative;box-shadow:var(--sh-md)}
.member-lead__photo::before{content:"";display:block;padding-top:115%}
.member-lead__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.member-lead:nth-of-type(even) .member-lead__photo{order:2}
.member-lead__role{font-size:var(--t-sm);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep)}
.member-lead__name{font-family:var(--serif);font-weight:500;font-size:var(--t-xl);letter-spacing:-.02em;line-height:1.05;margin:var(--s3) 0 var(--s4)}
.member-lead__cred{font-size:var(--t-sm);color:var(--muted);font-weight:500;margin-bottom:var(--s5);max-width:52ch;line-height:1.5}
.member-lead ul{list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.member-lead ul li{display:flex;gap:12px;align-items:baseline;color:var(--ink-soft);font-size:var(--t-base);line-height:1.5}
.member-lead ul li::before{content:"";flex:0 0 auto;width:14px;height:1.5px;background:var(--teal);transform:translateY(-4px)}
.member-lead__initials{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;font-family:var(--serif);font-weight:500;font-size:clamp(4rem,8vw,7rem);color:rgba(255,255,255,.35);background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 100%)}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s7)}
.tcard{background:var(--bg-tint);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform var(--fast) var(--eo),box-shadow var(--fast) var(--eo),border-color var(--fast) var(--eo);display:flex;align-items:stretch}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:rgba(27,167,172,.35)}
.tcard__photo{position:relative;background:var(--navy);overflow:hidden;flex:0 0 40%;min-height:250px}
.tcard__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.tcard__body{padding:var(--s6) var(--s5);display:flex;flex-direction:column;justify-content:center;flex:1}
.tcard__role{font-size:var(--t-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep)}
.tcard__name{font-family:var(--serif);font-weight:500;font-size:var(--t-lg);letter-spacing:-.01em;margin:var(--s2) 0 var(--s3);line-height:1.1}
.tcard p{color:var(--ink-soft);font-size:var(--t-sm);line-height:1.55}
@media(max-width:980px){.team-grid{grid-template-columns:1fr}}
@media(max-width:760px){
  .tcard{flex-direction:column}
  .tcard__photo{flex:none;min-height:0}
  .tcard__photo::before{content:"";display:block;padding-top:82%}
}

/* ---------- Split feature (image + copy) ---------- */
.split{padding:var(--section) 0}
.split--dark{background:var(--navy);color:#fff}
.split__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7) var(--s9);align-items:center}
.split__media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--sh-lg);position:relative}
.split__media::before{content:"";display:block;padding-top:85%}
.split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__head{font-family:var(--serif);font-weight:500;font-size:var(--t-xl);line-height:1.06;letter-spacing:-.02em;margin:var(--s4) 0 var(--s5);max-width:17ch}
.split--dark .split__head{color:#fff}
.split__body p{color:var(--ink-soft);font-size:var(--t-md);line-height:1.6;max-width:var(--measure)}
.split--dark .split__body p{color:var(--on-dark-soft)}
.split__body p+p{margin-top:var(--s5)}
.split__grid--flip .split__media{order:2}

/* ---------- Vision / Mission twin cards ---------- */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s7)}
.vm__card{border-radius:var(--radius);padding:var(--s8) var(--s7);position:relative;overflow:hidden}
.vm__card--vision{background:var(--navy);color:#fff}
.vm__card--mission{background:linear-gradient(140deg,var(--teal-deep),var(--teal));color:#fff}
.vm__card::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:26px 26px}
.vm__label{position:relative;font-size:var(--t-sm);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.vm__card p{position:relative;font-family:var(--serif);font-weight:500;font-size:var(--t-lg);line-height:1.3;letter-spacing:-.01em;margin-top:var(--s5)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s7)}
.pillar{padding-top:var(--s5);border-top:2px solid var(--teal)}
.pillar span{font-family:var(--serif);font-size:var(--t-md);color:var(--teal-deep);font-weight:600;display:block;margin-bottom:var(--s3)}
.pillar h3{font-family:var(--serif);font-weight:500;font-size:var(--t-lg);margin-bottom:var(--s3);letter-spacing:-.01em}
.pillar p{color:var(--ink-soft);font-size:var(--t-base)}

/* ---------- Footer mega-type: full-bleed single wordmark, all screens ---------- */
.footer__mega{justify-content:center;align-items:baseline;gap:1.1em;padding-top:clamp(8px,1.5vw,24px)}
.footer__mega span{letter-spacing:-.035em;font-size:clamp(2.5rem,13vw,330px);line-height:.8;color:rgba(255,255,255,.075)}
@media(max-width:760px){
  .footer__mega{gap:.9em}
  .footer__mega span{font-size:14.5vw}
  .footer__base{gap:6px 16px;padding-block:var(--s4)}
  .footer__brand p{font-size:var(--t-xs)}
}

/* ---------- Milestones timeline (awards): scroll-drawn spine + alternating rows ---------- */
.mline{padding:var(--section) 0;background:var(--bg);position:relative;overflow:hidden}
.mline__wrap{position:relative;margin-top:clamp(40px,6vw,80px);display:flex;flex-direction:column;gap:clamp(56px,8vw,120px);padding-bottom:12px}
.mline__spine{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--line);transform:translateX(-50%)}
.mline__prog{position:absolute;top:0;left:0;width:100%;height:0;background:linear-gradient(180deg,var(--teal-deep),var(--teal-bright))}
.mline__row{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(56px,8vw,120px);align-items:center}
.mline__row::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 5px var(--bg),0 0 0 7px rgba(27,167,172,.35);transform:translate(-50%,-50%);z-index:1}
.mline__media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/3.2;background:var(--bg-tint)}
.mline__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--eo)}
.mline__row:hover .mline__media img{transform:scale(1.05)}
.mline__row:nth-child(odd) .mline__media{order:2}
.mline__row:nth-child(odd) .mline__body{text-align:right}
.mline__body{position:relative}
.mline__year{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(3.6rem,8vw,6.6rem);line-height:.95;color:transparent;-webkit-text-stroke:1.5px rgba(27,167,172,.5);margin-bottom:var(--s3)}
.mline__tag{font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:var(--s2)}
.mline__body h3{font-family:var(--serif);font-weight:500;font-size:var(--t-lg);letter-spacing:-.01em;line-height:1.12;margin-bottom:var(--s3)}
.mline__body>p:last-child{color:var(--ink-soft);font-size:var(--t-md);line-height:1.6;max-width:44ch}
.mline__row:nth-child(odd) .mline__body>p:last-child{margin-left:auto}
@media(max-width:760px){
  .mline__wrap{gap:56px}
  .mline__spine{left:7px;transform:none}
  .mline__row{grid-template-columns:1fr;gap:18px 0;padding-left:34px;align-items:start}
  .mline__row::before{left:7px;top:10px;transform:translate(-50%,0)}
  .mline__row:nth-child(odd) .mline__media{order:0}
  .mline__row:nth-child(odd) .mline__body{text-align:left}
  .mline__row:nth-child(odd) .mline__body>p:last-child{margin-left:0}
  .mline__media{aspect-ratio:4/3}
  .mline__year{font-size:3rem;-webkit-text-stroke-width:1.2px}
}

/* ---------- Page CTA variant ---------- */
.cta__meta{display:flex;gap:var(--s6);flex-wrap:wrap;justify-content:center;color:rgba(255,255,255,.85);font-size:var(--t-base)}
.cta__meta a{font-weight:600;color:#fff;border-bottom:1.5px solid rgba(255,255,255,.4);transition:border-color var(--fast) var(--eo)}
.cta__meta a:hover{border-color:#fff}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .prose__grid,.split__grid,.member-lead{grid-template-columns:1fr}
  .scard{min-height:48vh}
  .prose__aside{position:static}
  .member-lead:nth-of-type(even) .member-lead__photo{order:0}
  .member-lead__photo{max-width:440px}
  .split__grid--flip .split__media{order:0}
  .team-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .vm{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
}
@media(max-width:680px){
  .phero{min-height:86svh;padding-top:130px}
  .phero__ship{width:54px}
  .motto__ship{width:58vw;opacity:.22;right:-12%}
  .team-grid,.gallery{grid-template-columns:1fr}
  .banner{flex-direction:column;align-items:flex-start}
}


/* ---------- Mobile menu: animated left drawer ---------- */
.nav{z-index:1001}
.menu{position:fixed;top:0;left:0;bottom:0;right:auto;width:min(86vw,380px);height:100%;background:linear-gradient(165deg,var(--navy) 0%,#0d2b46 100%);color:#fff;z-index:990;transform:translateX(-103%);transition:transform .65s cubic-bezier(.16,1,.3,1),visibility 0s .65s;box-shadow:40px 0 90px rgba(8,23,38,.4);padding:0;display:block;visibility:hidden}
.menu.open{transform:translateX(0);visibility:visible;transition:transform .65s cubic-bezier(.16,1,.3,1)}
.menu__inner{display:flex;flex-direction:column;justify-content:space-between;gap:28px;height:100%;padding:100px 30px 32px;overflow-y:auto}
.menu__label{font-size:var(--t-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-bright)}
.menu__links{display:flex;flex-direction:column;gap:2px}
.menu__links>a,.menu__acc{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,6vw,1.8rem);line-height:1.2;color:#fff;padding:10px 0;border:0;background:none;text-align:left;display:flex;align-items:center;justify-content:space-between;width:100%;letter-spacing:-.01em;cursor:pointer}
.menu__links>a,.menu__group,.menu__foot,.menu__label{opacity:0;transform:translateX(-26px);transition:opacity .5s var(--eo),transform .5s var(--eo)}
.menu.open .menu__links>a,.menu.open .menu__group,.menu.open .menu__foot,.menu.open .menu__label{opacity:1;transform:none;transition-delay:calc(.18s + var(--i,0)*.07s)}
.menu__plus{position:relative;width:16px;height:16px;flex:0 0 auto}
.menu__plus::before,.menu__plus::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:var(--teal-bright);transition:transform .4s var(--eo)}
.menu__plus::after{transform:rotate(90deg)}
.menu__acc[aria-expanded="true"] .menu__plus::after{transform:rotate(0deg)}
.menu__sub{max-height:0;overflow:hidden;transition:max-height .55s var(--eo);display:flex;flex-direction:column;border-left:1.5px solid rgba(27,167,172,.4);margin-left:2px}
.menu__group.open .menu__sub{max-height:340px}
.menu__sub a{font-size:var(--t-base);font-weight:500;color:var(--on-dark-soft);padding:9px 0 9px 16px;transition:color var(--fast) var(--eo)}
.menu__sub a:hover{color:#fff}
.menu__foot{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.menu a.menu__mail{font-family:var(--sans);font-size:var(--t-sm);color:var(--on-dark-soft);border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px}
/* burger morphs to X (uses aria-expanded set by main.js) */
.nav__burger span{transition:transform .45s var(--eo),width .45s var(--eo),background .3s var(--eo)}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.nav__burger:hover span:nth-child(2){width:60%}
.nav__burger[aria-expanded="true"]:hover span:nth-child(2){width:100%}

/* ---------- Mobile "Read more" collapse ---------- */
.rm-btn{display:none;align-items:center;gap:8px;margin-top:16px;font-weight:600;font-size:var(--t-sm);color:var(--teal-deep);background:none;border:1.5px solid var(--line-strong);border-radius:999px;padding:11px 24px;cursor:pointer;font-family:inherit}
.rm-btn--dark{color:#fff;border-color:rgba(255,255,255,.4)}
@media(max-width:760px){
  .rm-btn{display:inline-flex}
  .rm-clamp{position:relative;max-height:var(--rm-max,400px);overflow:hidden}
  .rm-clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(180deg,rgba(250,251,252,0),var(--bg));pointer-events:none}
  .rm-clamp.on-dark::after{background:linear-gradient(180deg,rgba(8,23,38,0),var(--navy))}
  .rm-clamp.rm-open{max-height:none}
  .rm-clamp.rm-open::after{display:none}
}

/* ---------- Mobile card sliders (auto-advance 5s) ---------- */
@media(max-width:760px){
  /* text-only cards (no photo) read better as a stack than a slider */
  .tcard:not(:has(.tcard__photo)){flex-direction:column}
  .tcard__body{padding:var(--s5)}
  /* gallery figures inside a slider have no grid row to span */
  .gallery[data-mslider] figure.tall{grid-row:auto}
  .gallery[data-mslider] figure.tall img{aspect-ratio:4/3;height:auto}
}
@media(max-width:760px){
  [data-mslider]{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px}
  [data-mslider]::-webkit-scrollbar{display:none}
  [data-mslider]>*{flex:0 0 82%;scroll-snap-align:center;min-width:0}
  .techgrid__inner[data-mslider]>.techgrid__headcard{flex:0 0 92%;margin-top:-40px}
  .techgrid__inner[data-mslider]>.techgrid__item{transform:none!important}
  .cases--static .cases__stage[data-mslider]{width:100%;padding:0 16px}
  .cases--static .cases__stage[data-mslider]>.cases__item::before{padding-top:72%}
  .team-grid[data-mslider]{margin-top:var(--s6)}
}

/* ---------- Large screens up to 4K ---------- */
@media(min-width:1920px){.wrap{max-width:1560px}}
@media(min-width:2400px){:root{font-size:19px}.wrap{max-width:1900px}}
@media(min-width:3200px){:root{font-size:24px}.wrap{max-width:2500px}}


/* ---------- Mobile: image above title + calmer scroll reveals ---------- */
@media(max-width:980px){
  .prose__aside{display:flex;flex-direction:column;position:static}
  .prose__img{order:-1;margin:0 0 var(--s5)}
  .split__grid .split__media{order:-1}
}
@media(max-width:760px){
  :root{--section:clamp(52px,14vw,76px)}
  [data-reveal]{transform:none!important;clip-path:none!important;transition-duration:.5s!important;transition-delay:min(calc(var(--i,0)*40ms),.24s)!important}
  img[data-parallax]{transform:none!important}
  .phero{min-height:66svh}
  .phero__lead{font-size:var(--t-base);margin-top:var(--s4)}
  .menu__inner{padding:84px 24px 26px;gap:18px}
  .menu a.menu__mail{font-size:.82rem;word-break:break-all}
  .menu__links>a,.menu__acc{font-size:clamp(1.25rem,5.8vw,1.55rem);padding:8px 0}
  .prose,.split{padding:calc(var(--section)*.9) 0}
  /* tighter rhythm: kill oversized gaps that read as blank space on phones */
  .prose__grid{gap:var(--s5)}
  .prose__head{margin-top:var(--s3)}
  .prose__body p+p{margin-top:var(--s4)}
  .motto{padding:var(--s8) 0}
  .motto__label{margin-top:var(--s5)}
  .member-lead{padding:var(--s6) 0;gap:var(--s5)}
  .vm{gap:var(--s4);margin-top:var(--s6)}
  .vm__card{padding:var(--s6) var(--s5)}
  .pillars{gap:var(--s5);margin-top:var(--s6)}
  .duties{gap:var(--s4);margin-top:var(--s5)}
  .duties li{gap:var(--s4);padding-bottom:var(--s4);font-size:var(--t-base)}
  .banner{padding:var(--s6) var(--s5);gap:var(--s4)}
  .banner__tag{white-space:normal;line-height:1.5;text-align:left}
  .chips{gap:10px;margin-top:var(--s5)}
  .chips li{padding:10px 18px}
  .faq__grid{gap:var(--s5)}
  .cta__inner{gap:var(--s4)}
  .cta__meta{flex-direction:column;gap:var(--s3);align-items:center}
  .footer__cols{gap:var(--s5);padding-block:var(--s6)}
  .network__head,.cta__head,.prose__head{max-width:none}
  /* pinned horizontal galleries become swipeable sliders on phones */
  .hscroll.is-static .hscroll__track{flex-direction:row}
  .hscroll.is-static .panel{height:52vh}

  /* ports & country names: two counter-sliding marquee rows instead of a tall list */
  .pmarq-hidden{display:none!important}
  .pmarq{display:flex;flex-direction:column;gap:12px;margin-top:var(--s6);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .pmarq__row{overflow:hidden}
  .pmarq__track{display:inline-flex;gap:10px;width:max-content;padding-right:10px;animation:pmarqslide var(--pdur,26s) linear infinite}
  .pmarq__row--rev .pmarq__track{animation-direction:reverse}
  .pmarq__pill{flex:0 0 auto;width:calc(50vw - var(--gutter,24px) - 10px);text-align:center;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:13px 10px;font-size:var(--t-sm);font-weight:500;color:var(--on-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(255,255,255,.04)}
}
@keyframes pmarqslide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.pmarq__track{animation:none}}