/* ═══════════════════════════════════════════════════════════════════
   TTMC — Phase 2 experiences (homepage). Loaded after home.css.
   Hero v2 · scroll story · technology showcase · Africa network ·
   globe · card tilt · form states.
   Progressive enhancement throughout: every hidden/"before" state is
   gated on a class set by JS (.mo / .is-pinned / .is-live), so the page is
   complete and readable without scripts, WebGL or animation.
═══════════════════════════════════════════════════════════════════ */

/* ───────── HERO v2: layered scene (plate · aircraft · optional 3D) ───────── */
.hx-scene{position:absolute;inset:0}
.hx-layer{position:absolute;inset:-14px}                       /* identical box for every layer so the cut-out registers on the plate */
.hx-photo{animation:hxPlate 1.2s var(--ease) both}
@keyframes hxPlate{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:none}}
.hx-plane{position:absolute;inset:0;animation:hxPlane 1.35s var(--ease) .3s both}
.hx-plane picture,.hx-plane img{display:block;width:100%;height:100%}
.hx-plane img{object-fit:cover;object-position:50% 60%;filter:drop-shadow(0 28px 30px rgba(11,31,58,.2))}
@keyframes hxPlane{from{opacity:0;transform:translate3d(64px,34px,0) scale(.94)}to{opacity:1;transform:none}}
.hx-scene.is-3d .hx-plane{opacity:0;animation:none}            /* a live 3D aircraft replaces the cut-out */
.hx-scene canvas{z-index:3}
.hx-chip-in,.hx-float-in{animation:hxFade .9s var(--ease) 1.1s both}   /* settle: no idle floating */

/* ───────── SCROLL STORY ───────── */
.story{position:relative;background:linear-gradient(180deg,#fff 0%,var(--hx-bg) 100%)}
.story-step{padding:84px 0 40px}
.story-step+.story-step{border-top:1px solid var(--rule-2)}
.story-step .shell{display:grid;grid-template-columns:1fr;gap:30px}
.story-kicker{display:flex;align-items:center;gap:10px;font:700 .72rem/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--blue-lt);margin-bottom:22px}
.story-kicker span{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 8px;border-radius:100px;background:var(--ice);color:var(--blue-lt)}
.story-h{font-family:var(--disp);font-weight:800;font-size:clamp(2.2rem,4.6vw,4.1rem);line-height:1;letter-spacing:-.04em;color:var(--navy);margin-bottom:22px}
.story-h em{font-style:normal;color:var(--accent)}
.story-p{font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.7;color:var(--navy-soft);max-width:520px}
.story-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.story-fig{position:relative;margin:0;border-radius:30px;overflow:hidden;aspect-ratio:16/11;background:var(--steel);box-shadow:var(--hx-shadow)}
.story-fig>picture{display:block;width:100%;height:100%}
.story-fig>picture img{display:block;width:100%;height:100%;object-fit:cover}
.story-fig-tech{background:linear-gradient(160deg,#fff,var(--ice));display:grid;place-items:center;aspect-ratio:16/12}
.st-device{position:relative;width:66%;margin-top:-26px}
.st-device .hx-laptop{width:100%;margin:0}
.st-device .hx-laptop-screen picture,.st-device .hx-laptop-screen img{height:auto}   /* the img height="" attribute would otherwise beat aspect-ratio */
.st-phone{right:-10%;bottom:-4%;width:24%}
.st-note{position:absolute;left:-20%;right:-20%;bottom:-62px;text-align:center;font-size:.7rem;color:var(--navy-mute)}
.st-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.st-line{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;opacity:.9}
.st-node{fill:#fff;stroke:var(--accent);stroke-width:2}
.st-node.hub{fill:var(--accent);stroke:#fff;stroke-width:2.4}
.story-ui,.story-skip{display:none}

/* pinned mode — only enabled by JS on wide, fine-pointer, motion-OK screens */
.story.is-pinned .story-track{height:calc(var(--steps,4) * 92vh)}
.story.is-pinned .story-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.story.is-pinned .story-step{position:absolute;inset:0;display:flex;align-items:center;padding:calc(var(--nav-h) + 24px) 0 80px;border:0;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.story.is-pinned .story-step.is-active{opacity:1;visibility:visible;transition:opacity .6s var(--ease),visibility 0s}
.story.is-pinned .story-step .shell{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(36px,5vw,84px)}
.story.is-pinned .story-copy>*{opacity:0;transform:translate3d(0,26px,0);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.story.is-pinned .story-step.is-active .story-copy>*{opacity:1;transform:none}
.story.is-pinned .story-step.is-active .story-copy>*:nth-child(2){transition-delay:.08s}
.story.is-pinned .story-step.is-active .story-copy>*:nth-child(3){transition-delay:.16s}
.story.is-pinned .story-step.is-active .story-copy>*:nth-child(4){transition-delay:.24s}
.story.is-pinned .story-fig{clip-path:inset(0 0 0 100% round 30px);transition:clip-path 1s var(--ease);aspect-ratio:auto;height:min(64vh,560px)}
.story.is-pinned .story-step.is-active .story-fig{clip-path:inset(0 0 0 0 round 30px)}
.story.is-pinned .story-fig>picture img{transform:scale(calc(1.12 - var(--u,0) * .07)) translate3d(0,calc(var(--u,0) * -16px),0);transition:transform .2s linear}
.story.is-pinned .st-line,.story.is-pinned .st-node{opacity:0}
.story.is-pinned .st-line{stroke-dasharray:1;stroke-dashoffset:1}
.story.is-pinned .story-step.is-active .st-line{opacity:.95;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease) .45s,opacity .3s .45s}
.story.is-pinned .story-step.is-active .st-node{opacity:1;transition:opacity .5s 1.3s}
.story.is-pinned .story-ui{display:block;position:absolute;left:0;right:0;bottom:26px;pointer-events:none}
.story.is-pinned .story-rail{display:flex;gap:8px;max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}
.story.is-pinned .story-rail li{flex:1;height:3px;border-radius:3px;background:rgba(11,31,58,.12);overflow:hidden;position:relative}
.story.is-pinned .story-rail li::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--f,0))}
.story.is-pinned .story-skip{display:inline-flex;position:absolute;right:var(--pad);top:calc(var(--nav-h) + 26px);z-index:5;padding:9px 16px;border-radius:100px;
  font:700 .7rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--navy-soft);background:rgba(255,255,255,.8);border:1px solid var(--rule);backdrop-filter:blur(8px)}
.story.is-pinned .story-skip:hover,.story.is-pinned .story-skip:focus-visible{color:var(--blue-lt);border-color:var(--blue)}

/* ───────── TECHNOLOGY SHOWCASE v2 ───────── */
.tx-feats{display:grid;gap:6px;margin:0 0 36px;max-width:520px}
.tx-feat{padding:16px 20px 16px 22px;border-radius:18px;border:1px solid transparent;position:relative;transition:background .4s var(--ease),border-color .4s,box-shadow .4s}
.tx-feat::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:3px;background:var(--accent);opacity:0;transform:scaleY(.4);transition:opacity .3s,transform .4s var(--ease)}
.tx-feat b{display:block;font:700 .98rem/1.3 var(--disp);color:var(--navy);margin-bottom:4px}
.tx-feat span{font-size:.88rem;line-height:1.55;color:var(--navy-soft)}
.tx-feat.is-on{background:rgba(255,255,255,.85);border-color:rgba(11,31,58,.08);box-shadow:0 20px 40px -30px rgba(11,31,58,.4)}
.tx-feat.is-on::before{opacity:1;transform:none}
.tx-devices{--tp:1}
.mo .tx-devices{--tp:0}                                         /* progress var set by JS; 1 means fully in place */
.tx-persp{perspective:1400px}
.tx-devices .hx-laptop{transform:translate3d(0,calc((1 - var(--tp)) * 46px),0) rotateX(calc((1 - var(--tp)) * 9deg)) rotateY(calc((1 - var(--tp)) * -5deg));transform-origin:50% 100%;will-change:transform}
.tx-devices .hx-phone{transform:translate3d(calc((1 - var(--tp)) * 40px),calc((1 - var(--tp)) * 30px),0);opacity:calc(.25 + var(--tp) * .75)}
.tx-screen{aspect-ratio:16/10;overflow:hidden;border-radius:6px}
.tx-screen picture{position:absolute;inset:0;transition:opacity .7s var(--ease)}
.tx-screen picture,.tx-screen picture img{display:block;width:100%;height:100%}
.tx-screen img{aspect-ratio:auto;object-fit:cover;border-radius:0}
.tx-s.s1{opacity:0}
.tx-devices[data-screen="1"] .tx-s.s0{opacity:0}
.tx-devices[data-screen="1"] .tx-s.s1{opacity:1}
.tx-devices[data-screen="2"] .tx-s.s1{opacity:0}
.tx-hl{position:absolute;left:63%;top:70%;width:36%;height:30%;border:2px solid var(--accent);border-radius:14px;box-shadow:0 0 0 6px rgba(8,121,232,.18);opacity:0;transition:opacity .5s .2s}
.tx-devices[data-screen="2"] .tx-hl{opacity:1}
.tx-phone picture{position:absolute;inset:0;transition:opacity .7s var(--ease)}
.tx-phone picture,.tx-phone picture img{display:block;width:100%;height:100%}
.tx-p.p1{opacity:0}
.tx-devices[data-screen="1"] .tx-p.p0{opacity:0}
.tx-devices[data-screen="1"] .tx-p.p1{opacity:1}

/* ───────── AFRICA NETWORK ───────── */
.af{padding:140px 0;background:linear-gradient(180deg,#fff 0%,var(--ice) 55%,#fff 100%)}
.af-head{max-width:860px;margin:0 0 56px}
.af-layout{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,5vw,76px);align-items:center}
.af-map{position:relative;width:100%;max-width:620px;margin:0 auto}
.af-svg{display:block;width:100%;height:auto;overflow:visible}
.af-rest{-webkit-mask-image:radial-gradient(ellipse 70% 62% at 38% 62%,#000 38%,transparent 82%);mask-image:radial-gradient(ellipse 70% 62% at 38% 62%,#000 38%,transparent 82%)}
.af-rest path{fill:#E9F2FB}
.af-c{fill:#fff;stroke:#BCD4EC;stroke-width:.8;stroke-linejoin:round;transition:fill .35s var(--ease)}
.af-c.core{fill:#A9D1F7}
.af[data-region="southern"] .af-c[data-region="southern"],
.af[data-region="copperbelt"] .af-c[data-region="copperbelt"],
.af[data-region="east"] .af-c[data-region="east"]{fill:#CBE4FF}
.af-route{fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;opacity:.5;transition:opacity .35s,stroke-width .35s}
.af-route.is-on{opacity:1;stroke-width:2.6}
.af.has-sel .af-route:not(.is-on){opacity:.12}
.mo .af-route{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.9s var(--ease) calc(var(--i,0) * .11s),opacity .35s,stroke-width .35s}
.mo .af-map.is-in .af-route{stroke-dashoffset:0}
.af-pin{cursor:pointer;outline:none}
.mo .af-pin{opacity:0;transition:opacity .6s var(--ease) 1.1s}
.mo .af-map.is-in .af-pin{opacity:1}
.af-hit{fill:transparent}
.af-dot{fill:#fff;stroke:var(--accent);stroke-width:3;transition:fill .25s}
.af-pin.hub .af-dot,.af-pin.is-sel .af-dot{fill:var(--accent);stroke:#fff}
.af-ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;transition:opacity .25s}
.af-pin.hub .af-ring{opacity:.45;transform-box:fill-box;transform-origin:center;animation:hxPing 3s var(--ease) infinite}
.af:not(.is-live) .af-pin.hub .af-ring{animation:none}
.af-pin:hover .af-ring,.af-pin:focus-visible .af-ring,.af-pin.is-sel .af-ring{opacity:.7;animation:none}
.af-pin:focus-visible .af-ring{stroke-width:3;opacity:1}
.af-label{font:700 21px var(--ui);fill:var(--navy);paint-order:stroke;stroke:#fff;stroke-width:6;stroke-linejoin:round;opacity:0;transition:opacity .2s;pointer-events:none}
.af-pin.hub .af-label,.af-pin:hover .af-label,.af-pin:focus-visible .af-label,.af-pin.is-sel .af-label{opacity:1}
.af-badge{position:absolute;left:0;top:0;margin:0;padding:7px 12px;border-radius:100px;border:1.5px dashed rgba(11,102,201,.5);background:rgba(255,255,255,.85);
  font:700 .64rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-lt)}
.af-panel{display:grid;gap:22px}
.af-chips{display:flex;flex-wrap:wrap;gap:8px}
.af-chip,.gl-dest{appearance:none;cursor:pointer;border:1px solid var(--rule);background:#fff;color:var(--navy);border-radius:100px;padding:10px 16px;
  font:600 .8rem/1 var(--ui);transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease),box-shadow .25s}
.af-chip:hover,.gl-dest:hover{border-color:var(--blue);color:var(--blue-lt);transform:translateY(-1px)}
.af-chip:focus-visible,.gl-dest:focus-visible,.gl-reset:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.af-chip[aria-pressed="true"],.gl-dest[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 12px 24px -14px rgba(11,107,214,.8)}
.af-card,.gl-card{padding:26px 26px 24px;border-radius:24px;background:#fff;border:1px solid var(--rule);box-shadow:var(--hx-shadow);min-height:178px}
.af-card-tag{display:inline-block;margin:0 0 14px;padding:5px 11px;border-radius:100px;border:1.5px dashed rgba(11,102,201,.5);font:700 .6rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-lt)}
.af-card-name{font:800 1.7rem/1.1 var(--disp);letter-spacing:-.03em;color:var(--navy)}
.af-card-country{margin:4px 0 12px;font:600 .74rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--navy-mute)}
.af-card-note{font-size:.95rem;line-height:1.6;color:var(--navy-soft)}
.af-card-svc{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.af-card-svc li{padding:6px 11px;border-radius:100px;background:var(--ice);font:600 .7rem/1 var(--ui);color:var(--blue-lt)}
.af-disclaimer{font-size:.74rem;line-height:1.55;color:var(--navy-mute);max-width:520px}

/* ───────── GLOBE ───────── */
.gl{padding:140px 0;background:linear-gradient(180deg,#fff 0%,var(--hx-bg) 100%)}
.gl-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,76px);align-items:center}
.gl-copy{display:grid;gap:22px;justify-items:start}
.gl-copy .hx-p{max-width:520px}
.gl-dests{display:flex;flex-wrap:wrap;gap:8px;max-width:540px}
.gl-dest{padding:8px 13px;font-size:.76rem}
.gl-dest i{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gl-dest{position:relative}
.gl-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.gl-reset{appearance:none;cursor:pointer;border:0;background:none;padding:6px 0;border-bottom:1px solid rgba(11,102,201,.4);font:700 .72rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-lt)}
.gl-hint{font-size:.74rem;color:var(--navy-mute)}
.gl-stage{position:relative;width:100%;max-width:660px;margin-left:auto;aspect-ratio:1/1}
.gl-canvas{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s var(--ease)}
.gl-canvas canvas{display:block;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.gl.is-live .gl-canvas{opacity:1;visibility:visible}
.gl-fallback{position:absolute;inset:0;margin:0;max-width:none;display:flex;flex-direction:column;justify-content:center;transition:opacity .6s var(--ease)}
.gl.is-live .gl-fallback{opacity:0;visibility:hidden;pointer-events:none}

/* ───────── CARD TILT (subtle, fine pointers only; JS sets the vars) ───────── */
.hx-card{transform:perspective(900px) translate3d(0,var(--ty,0),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s var(--ease),box-shadow .45s var(--ease)}
.hx-card:hover{transform:perspective(900px) translate3d(0,-7px,0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
/* The cards also carry [data-reveal]. Once revealed, home.css applies `.mo [data-reveal].is-in{transform:none}` (specificity 0,3,0)
   plus a slow .9s transform transition — together they silently cancelled the hover lift and tilt. These selectors out-rank it. */
.mo .hx-card[data-tilt].is-in{transition:transform .3s var(--ease),box-shadow .45s var(--ease),opacity .9s var(--ease);transition-delay:0s}
.mo .hx-card[data-tilt].is-in:hover{transform:perspective(900px) translate3d(0,-7px,0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.hx-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.24),transparent 62%)}
.hx-card:hover::before{opacity:1}

/* ───────── FORMS (inline validation + success) ───────── */
.f-err{display:block;margin-top:6px;font-size:.76rem;font-weight:600;line-height:1.4;color:var(--warn)}
.form-card input[aria-invalid="true"],.form-card textarea[aria-invalid="true"]{border-color:var(--warn)}
.form-card.sent .f-note{color:var(--go);font-weight:600}
.form-card input:focus-visible,.form-card textarea:focus-visible,.form-card select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ═══════ RESPONSIVE (last, so it wins the cascade) ═══════ */
@media(max-width:1180px){
  .af-layout,.gl-grid{grid-template-columns:1fr}
  .af-map{max-width:520px}
  .gl-stage{margin:0 auto;max-width:560px}
  .gl-copy{justify-items:start}
}
@media(max-width:960px){
  .hx-layer{inset:-6px}
  .story-step{padding:64px 0 24px}
  .story-fig{aspect-ratio:16/11}
  .st-phone{right:-4%}
  .af,.gl{padding:96px 0}
  .tx-devices .hx-laptop{transform:none}
  .tx-devices .hx-phone{transform:none;opacity:1}
}
@media(max-width:620px){
  .story-p{max-width:none}
  .story-fig-tech{aspect-ratio:1/1}
  .st-device{width:84%}
  .af-label{font-size:25px}
  .af-card,.gl-card{padding:22px}
  .gl-dest{padding:9px 12px}
}
@media(prefers-reduced-motion:reduce){
  .hx-photo,.hx-plane,.hx-chip-in,.hx-float-in{animation:none}
  .mo .af-route{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .mo .af-pin{opacity:1;transition:none}
  .af-pin.hub .af-ring{animation:none}
  .tx-devices .hx-laptop,.tx-devices .hx-phone{transform:none;opacity:1}
  .tx-screen picture,.tx-phone picture{transition:none}
  .hx-card{transform:none !important;transition:none}
  .hx-card::before{display:none}
}

/* aircraft that fly each footprint line (SMIL animateMotion along the route) */
.af-plane path{fill:var(--blue-lt);stroke:#fff;stroke-width:1.2;stroke-linejoin:round}
.af-plane{opacity:.9;transition:opacity .35s}
.af.has-sel .af-plane:not(.is-on){opacity:0}
.hx-plane-g path{fill:#0B66C9;stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.af-plane,.hx-plane-g{display:none}}

/* three distinct showcase screens (laptop s0/s1/s2, phone p0/p1/p2) — each feature changes the image */
.tx-screen .tx-s,.tx-phone .tx-p{opacity:0}
.tx-devices[data-screen="0"] .tx-s.s0,.tx-devices[data-screen="0"] .tx-p.p0,
.tx-devices[data-screen="1"] .tx-s.s1,.tx-devices[data-screen="1"] .tx-p.p1,
.tx-devices[data-screen="2"] .tx-s.s2,.tx-devices[data-screen="2"] .tx-p.p2{opacity:1}
.tx-hl{display:none}
.tx-devices[data-screen="2"] .tx-s.s0,.tx-devices[data-screen="2"] .tx-s.s1,.tx-devices[data-screen="1"] .tx-s.s0{opacity:0}
.tx-devices[data-screen="2"] .tx-s.s2{opacity:1}