/* ─────────────────────────────────────────────────────────────────────────────
 * Proud To You — stylesheet
 *
 * Palette is sampled from the company's own documents, not invented:
 *   The green and the orange are measured off the company logo, not chosen —
 *   the monogram panel and the swoosh. Keeping the whole site on those two
 *   colours is what makes the pages look like they belong to the letterhead.
 *
 * Structural debt the owner should know about: the typefaces load from Google
 * Fonts. That is fine for a prototype opened from a file, but on a real deploy
 * it should be self-hosted — a slow reply from Google fails a build.
 * ───────────────────────────────────────────────────────────────────────────── */

:root{
  /* Green and orange, both measured off the company logo the owner supplied —
     the deep green of the monogram panel and the core of the orange swoosh.
     The logo on the page is lifted from a SCAN, so these are as close as a scan
     allows; replace them with the values from the original artwork when it
     arrives and every surface below follows automatically. */
  --green-900:#04281a;     /* deepest — footer */
  --green-800:#063a23;
  --green:#0a5230;         /* primary brand green */
  --green-600:#0f6b3e;
  --green-400:#1e8a53;

  --orange-700:#9a5520;
  --orange:#d2702c;        /* sampled from the swoosh — decorative use */
  /* The brand orange is too light to carry small text on white: it measures
     3.45:1 and 4.5 is the floor. This darker tint of the same hue is what every
     small orange label uses, so the brand reads without failing a reader. */
  --orange-ink:#a9581c;
  --orange-400:#e58a3c;
  --orange-300:#f2b075;

  --ink:#16202e;
  --ink-soft:#4a5668;
  --line:#dfe4ec;
  --tint:#f4f7fb;
  --white:#fff;

  --wrap:1200px;
  --r:4px;

  --th:"IBM Plex Sans Thai","Inter",system-ui,sans-serif;
  --disp:"Barlow Condensed","IBM Plex Sans Thai",system-ui,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--th);font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.2;font-weight:700}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--orange);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}

:focus-visible{outline:3px solid var(--orange-400);outline-offset:3px}

/* ── buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:14px 30px;border-radius:var(--r);text-decoration:none;
  font-weight:600;font-size:15.5px;letter-spacing:.01em;
  transition:transform .18s var(--ease),background .18s,border-color .18s,color .18s;
  border:1.5px solid transparent;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
/* Dark green on the brand orange — 4.6:1, and the same pairing the
   logo swoosh already uses. White on this orange measures only 3.45:1. */
.btn--orange{background:var(--orange);color:var(--green-900);font-weight:700}
.btn--orange:hover{background:var(--orange-400)}
.btn--ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ── header ────────────────────────────────────────────────────
   White, not transparent. The logo is a lockup on a light silver panel, so a
   dark or see-through bar would put a white box over the video; a solid white
   bar is what the artwork was drawn for. */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:#fff;border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.hdr__in{display:flex;align-items:center;gap:28px;height:78px}
.hdr.is-stuck{box-shadow:0 4px 22px rgba(4,40,26,.10)}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand__mark{height:46px;width:auto;object-fit:contain}
.brand__txt{display:none}

.nav{display:flex;gap:26px;margin-left:auto}
.nav a{
  text-decoration:none;color:var(--green-800);font-size:14.5px;font-weight:600;
  padding:6px 0;position:relative;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--orange);transition:right .25s var(--ease);
}
.nav a:hover{color:var(--green)}
.nav a:hover::after{right:0}

.hdr__act{display:flex;align-items:center;gap:12px}
.lang{
  background:none;border:1.5px solid var(--line);color:var(--green-800);
  padding:7px 14px;border-radius:var(--r);cursor:pointer;
  font-family:var(--th);font-size:13.5px;font-weight:600;letter-spacing:.04em;
  transition:background .2s,border-color .2s,color .2s;
}
.lang:hover{background:var(--tint);border-color:var(--green);color:var(--green)}
.hdr__cta{padding:11px 22px;font-size:14.5px}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.burger span{width:24px;height:2px;background:var(--green);transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── hero ──────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--green-900)}
.hero__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  /* The scrim has one job: hold white text above 4.5:1 over EVERY frame of the
     loop, including the bright runway shot, while still letting the right of
     the picture read as an aircraft. The stops were tuned against measured
     contrast at the brightest frame, not chosen by eye. */
  background:
    linear-gradient(100deg,
      rgba(4,40,26,.90) 0%,
      rgba(5,48,31,.82) 38%,
      rgba(8,66,40,.70) 60%,
      rgba(10,82,48,.22) 80%,
      rgba(10,82,48,.05) 100%),
    linear-gradient(to top,rgba(4,40,26,.58) 0%,rgba(4,40,26,0) 42%);
}
.hero__in{position:relative;z-index:2;padding:130px 0 120px}
/* The copy block hugs the same left gutter as every section below it, so the
   headline lines up with the logo and the section headings instead of drifting
   to the middle of the page. */
.hero__copy{max-width:min(860px,62%)}
@media (max-width:900px){.hero__copy{max-width:100%}}
.hero__eyebrow{
  font-family:var(--disp);letter-spacing:.26em;text-transform:uppercase;
  font-size:14px;font-weight:600;color:var(--orange-300);margin-bottom:22px;
}
.hero__eyebrow::after{content:"";display:block;width:62px;height:2px;background:var(--orange);margin-top:14px}
.hero__h1{
  color:#fff;font-size:clamp(34px,5.2vw,62px);line-height:1.13;
  letter-spacing:-.015em;white-space:pre-line;margin-bottom:26px;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero__lead{color:rgba(255,255,255,.88);font-size:clamp(16px,1.55vw,19.5px);max-width:620px;margin-bottom:38px}
.hero__btns{display:flex;gap:14px;flex-wrap:wrap}

.hero__scroll{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  color:rgba(255,255,255,.7);text-decoration:none;font-size:12px;letter-spacing:.14em;
}
.hero__scroll:hover{color:#fff}
.hero__dot{animation:dot 2s var(--ease) infinite}
@keyframes dot{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(8px);opacity:.3}}

/* ── sections ──────────────────────────────────────────────── */
/* Items that fly in from the right sit outside the page while they travel.
   `clip` keeps that from widening the document — unlike `hidden` it does not
   turn the section into a scroll container, so nothing inside loses the ability
   to be scrolled to or anchored. */
.sec{padding:110px 0;overflow-x:clip}
.sec--tight{padding:88px 0}
.sec--tint{background:var(--tint)}

/* Soft photographic backdrops for the four light sections: a pre-blurred
   picture under a pale wash, fading to the section's own colour at the top and
   bottom so neighbouring sections meet without a seam. The cards on top stay
   solid white, so the picture only ever shows around them. */
#about,#fleet,#partners,#glossary{position:relative;isolation:isolate}
#about::before,#fleet::before,#partners::before,#glossary::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-size:100% 100%,cover,cover;background-position:center;background-repeat:no-repeat;
}
#about::before{background-image:
  linear-gradient(to bottom,#fff 0,rgba(255,255,255,0) 120px,rgba(255,255,255,0) calc(100% - 120px),#fff 100%),
  linear-gradient(rgba(255,255,255,.76),rgba(255,255,255,.76)),url(img/soft/runway.jpg)}
#fleet::before{background-image:
  linear-gradient(to bottom,#fff 0,rgba(255,255,255,0) 120px,rgba(255,255,255,0) calc(100% - 120px),#fff 100%),
  linear-gradient(rgba(255,255,255,.76),rgba(255,255,255,.76)),url(img/soft/hangar.jpg)}
#partners::before{background-image:
  linear-gradient(to bottom,var(--tint) 0,rgba(244,247,251,0) 120px,rgba(244,247,251,0) calc(100% - 120px),var(--tint) 100%),
  linear-gradient(rgba(244,247,251,.78),rgba(244,247,251,.78)),url(img/soft/engine.jpg)}
#glossary::before{background-image:
  linear-gradient(to bottom,#fff 0,rgba(255,255,255,0) 120px,rgba(255,255,255,0) calc(100% - 120px),#fff 100%),
  linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),url(img/soft/testcell.jpg)}
.sec--brand{
  position:relative;color:#fff;
  background:
    radial-gradient(900px 520px at 85% -10%,rgba(30,138,83,.5),transparent 60%),
    linear-gradient(160deg,#0e6439 0%,var(--green) 40%,var(--green-800) 100%);
}
/* A faint engineering grid, visible only around the top-right corner and
   fading out well before the copy, so text and cards sit on a plain field. */
.sec--brand::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(760px 480px at 80% 0,#000 0%,transparent 100%);
  mask-image:radial-gradient(760px 480px at 80% 0,#000 0%,transparent 100%);
}
.sec--brand>.wrap{position:relative}
.sec--brand .sec__lead{color:rgba(255,255,255,.76)}

.sec__head{max-width:760px;margin-bottom:54px}
.kicker{
  font-family:var(--disp);font-size:13px;letter-spacing:.3em;font-weight:600;
  color:var(--orange-300);display:block;margin-bottom:12px;
}
.kicker--dark{color:var(--orange-ink)}
.sec__head h2{font-size:clamp(27px,3.3vw,40px);letter-spacing:-.01em}
.sec--brand .sec__head h2{color:#fff}
.sec__lead{margin-top:16px;color:var(--ink-soft);font-size:17px}

.note{
  margin-top:34px;padding:16px 20px;border-left:3px solid var(--orange);
  background:var(--tint);color:var(--ink-soft);font-size:15.5px;
}

/* ── pillars ───────────────────────────────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line)}
.pillars li{background:#fff;padding:34px 26px;transition:background .25s}
.pillars li:hover{background:var(--tint)}
.pillars .n{
  font-family:var(--disp);font-size:15px;letter-spacing:.18em;color:var(--orange-ink);
  display:block;margin-bottom:16px;
}
.pillars h3{font-size:18px;margin-bottom:10px}
.pillars p{font-size:15px;color:var(--ink-soft);line-height:1.68}

/* ── capability grid ───────────────────────────────────────── */
.capg{margin-bottom:50px}
.capg:last-child{margin-bottom:0}
.capg__t{
  font-family:var(--disp);font-size:15px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange-300);padding-bottom:12px;margin-bottom:26px;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:14px;background:none}
.caps li{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:16px;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.caps li:hover{background:rgba(255,255,255,.10);border-color:rgba(242,176,117,.45);transform:translateY(-3px)}
.caps h3{font-size:16.5px;color:#fff;margin-bottom:4px}
.caps .th{display:block;font-size:14px;color:var(--orange-300);font-weight:500;margin-bottom:9px}
.caps p{font-size:14.5px;color:rgba(255,255,255,.7);line-height:1.65}

/* ── fleet ─────────────────────────────────────────────────── */
.fleetg{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:34px}
.fleetg section{border-top:3px solid var(--green);padding-top:22px}
.fleetg h3{font-size:18px;margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{
  border:1px solid var(--line);padding:7px 15px;border-radius:999px;
  font-size:14.5px;color:var(--ink-soft);background:#fff;transition:border-color .2s,color .2s;
}
.chips span:hover{border-color:var(--orange);color:var(--green)}

/* ── partners ──────────────────────────────────────────────── */
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.pcard{background:#fff;border:1px solid var(--line);padding:32px 28px;border-top:3px solid var(--orange)}
.pcard h3{font-family:var(--disp);font-size:24px;letter-spacing:.06em;margin-bottom:6px;color:var(--green)}
.pcard .c{font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:16px;display:block}
.pcard p{font-size:15px;color:var(--ink-soft);line-height:1.7}

.brands{margin-top:70px;padding-top:50px;border-top:1px solid var(--line)}
.brands h3{font-size:clamp(21px,2.3vw,27px)}
.brandg{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:28px;margin-top:32px}
.brandg h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:12px}
.brandg li{font-size:15.5px;color:var(--ink);padding:5px 0;border-bottom:1px solid var(--line)}
.disclaimer{margin-top:30px;font-size:13.5px;color:var(--ink-soft);font-style:italic}

/* ── glossary ──────────────────────────────────────────────── */
.gl__tools{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:30px}
.gl__search{
  display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  padding:11px 17px;border-radius:var(--r);background:#fff;flex:1 1 280px;max-width:380px;
  color:var(--ink-soft);transition:border-color .2s;
}
.gl__search:focus-within{border-color:var(--orange)}
.gl__search input{border:0;outline:0;font-family:var(--th);font-size:15.5px;width:100%;background:none;color:var(--ink)}
.gl__alpha{display:flex;flex-wrap:wrap;gap:5px}
.gl__alpha button{
  min-width:33px;padding:6px 9px;border:1px solid var(--line);background:#fff;
  font-family:var(--disp);font-size:15px;font-weight:600;color:var(--ink-soft);
  border-radius:var(--r);cursor:pointer;transition:all .18s;
}
.gl__alpha button:hover{border-color:var(--orange);color:var(--green)}
.gl__alpha button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}

.gl__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;background:none}
.gl__item{background:#fff;padding:26px 24px;border:1px solid var(--line);border-radius:16px;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.gl__item:hover{box-shadow:0 14px 30px rgba(4,40,26,.10);transform:translateY(-2px)}
.gl__item h3{font-family:var(--disp);font-size:22px;letter-spacing:.05em;color:var(--green)}
.gl__item .full{display:block;font-size:13.5px;color:var(--orange-ink);margin:2px 0 11px;font-family:var(--th);font-weight:500}
.gl__item p{font-size:15px;color:var(--ink-soft);line-height:1.7}
.gl__empty{padding:40px 0;color:var(--ink-soft);text-align:center}

/* ── contact ───────────────────────────────────────────────── */
.ct{display:grid;grid-template-columns:1.45fr 1fr;gap:24px}
.ct__card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);padding:36px 32px}
.ct__card--main{border-top:3px solid var(--orange)}
.ct__rows li{padding:17px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.ct__rows li:last-child{border-bottom:0}
.ct__rows .k{
  display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-300);margin-bottom:5px;
}
.ct__rows .v{font-size:17.5px;color:#fff;white-space:pre-line;line-height:1.6}
.ct__rows a.v{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .2s}
.ct__rows a.v:hover{border-bottom-color:var(--orange-300)}
.ct__maplink{font-size:14px;color:var(--orange-300);text-decoration:none;display:inline-block;margin-top:8px}
.ct__maplink:hover{text-decoration:underline}
.ct__note{
  margin-top:26px;padding:16px 18px;background:rgba(163,126,65,.18);
  border-left:3px solid var(--orange-400);font-size:15px;color:rgba(255,255,255,.9);
}

/* ── footer ────────────────────────────────────────────────── */
.ft{background:var(--green-900);color:rgba(255,255,255,.72);padding:64px 0 0;font-size:15px}
.ft__in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:46px}
.ft__brand{display:flex;gap:14px;align-items:flex-start}
.ft__brand img{width:54px;height:54px;object-fit:contain}
.ft__brand strong{display:block;color:#fff;font-size:16px;letter-spacing:.04em}
.ft__brand span{font-size:14.5px}
.ft h4{font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--orange-300);margin-bottom:16px}
.ft__nav,.ft__ct{display:flex;flex-direction:column;gap:9px}
.ft__nav a,.ft__ct a{text-decoration:none;transition:color .2s}
.ft__nav a:hover,.ft__ct a:hover{color:#fff}
.ft__bar{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 0;border-top:1px solid rgba(255,255,255,.1);font-size:13.5px;color:rgba(255,255,255,.5);
}


/* ── responsive ────────────────────────────────────────────── */
@media (max-width:1040px){
  .nav{
    position:fixed;inset:78px 0 auto 0;flex-direction:column;gap:0;
    background:#fff;padding:8px 20px 20px;box-shadow:0 18px 30px rgba(4,40,26,.12);
    transform:translateY(-130%);transition:transform .35s var(--ease);
    border-bottom:1px solid var(--line);
  }
  .nav.open{transform:none}
  .nav a{padding:15px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav a::after{display:none}
  .burger{display:flex}
  .hdr__cta{display:none}
  .ct{grid-template-columns:1fr}
  .ft__in{grid-template-columns:1fr 1fr}
  .ft__brand{grid-column:1/-1}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{width:min(100% - 32px,var(--wrap))}
  .sec{padding:72px 0}
  .sec--tight{padding:60px 0}
  .sec__head{margin-bottom:38px}
  .hero__in{padding:112px 0 108px}
  .hero__btns .btn{flex:1 1 100%}
  .gl__list,.pillars,.caps{grid-template-columns:1fr}
  .ft__in{grid-template-columns:1fr}
  .brand__txt strong{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Imagery, icons and the world map.
   The card treatment follows the reference the owner picked: a photo in a
   generously rounded card, with the words sitting on frosted glass over it
   rather than beside it. Every photo was chosen for real shallow depth of
   field, so the card has a subject in focus and a soft background.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── icons ─────────────────────────────────────────────────── */
.ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.ico svg{width:100%;height:100%;display:block}

.ico--chip{
  width:44px;height:44px;padding:10px;border-radius:12px;
  background:var(--orange);color:#fff;
  box-shadow:0 6px 16px rgba(210,112,44,.32);
}
.ico--tile{
  width:46px;height:46px;padding:10px;border-radius:12px;margin-bottom:16px;
  background:rgba(242,176,117,.14);color:var(--orange-300);
  border:1px solid rgba(242,176,117,.26);
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.caps li:hover .ico--tile{background:var(--orange);color:#fff;transform:translateY(-3px) scale(1.04);border-color:transparent}
.ico--fleet{
  width:52px;height:52px;padding:11px;border-radius:14px;margin-bottom:18px;
  background:var(--green);color:#fff;
  box-shadow:0 10px 22px rgba(10,82,48,.22);
  transition:transform .3s var(--ease);
}
.fcard:hover .ico--fleet{transform:translateY(-3px) rotate(-4deg)}

/* ── pillar cards with photography ─────────────────────────── */
.pillars{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:22px;background:none;
}
.pcard2{
  position:relative;border-radius:20px;overflow:hidden;background:var(--green-900);
  min-height:360px;display:flex;align-items:flex-end;isolation:isolate;
  box-shadow:0 2px 10px rgba(4,40,26,.08);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.pcard2:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(4,40,26,.20)}
.pcard2__fig{position:absolute;inset:0;margin:0;z-index:0}
.pcard2__fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pcard2:hover .pcard2__fig img{transform:scale(1.07)}
.pcard2__fig::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,40,26,.82) 0%,rgba(4,40,26,.30) 46%,rgba(4,40,26,.05) 100%);
}
.pcard2__body{
  position:relative;z-index:1;width:100%;margin:14px;padding:22px 20px 20px;
  border-radius:14px;color:#fff;
  background:rgba(4,40,26,.60);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(255,255,255,.14);
}
.pcard2__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pcard2__n{
  font-family:var(--disp);font-size:15px;letter-spacing:.2em;
  color:var(--orange-300);margin-left:auto;
}
.pcard2 h3{font-size:18.5px;color:#fff;margin-bottom:8px}
.pcard2 p{font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.66}

/* Browsers without backdrop-filter get a solid panel instead of unreadable text. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pcard2__body{background:rgba(4,40,26,.90)}
}

/* ── capability tiles ──────────────────────────────────────── */
.caps li{padding:28px 24px 26px}

/* ── fleet cards ───────────────────────────────────────────── */
.fleetg{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.fcard{
  border:1px solid var(--line);border-top:0;border-radius:18px;padding:28px 26px;
  background:#fff;transition:box-shadow .35s var(--ease),transform .35s var(--ease);
}
.fcard:hover{box-shadow:0 16px 34px rgba(4,40,26,.10);transform:translateY(-3px)}
.fcard h3{font-size:18px;margin-bottom:16px}

/* ── world map ─────────────────────────────────────────────── */
.sec__head--center{margin-inline:auto;text-align:center}
.wm__box{
  position:relative;border-radius:22px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);padding:10px;
}
.wm__svg{width:100%;height:auto;display:block;overflow:visible}
.wm__land path{fill:rgba(255,255,255,.11);stroke:rgba(255,255,255,.30);stroke-width:.5;stroke-linejoin:round}
.wm__route{fill:none;stroke:rgba(242,176,117,.42);stroke-width:1.6;stroke-dasharray:3 5}
.wm__routeDash{
  fill:none;stroke:url(#wmRoute);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:26 300;animation:wmFlow 6s linear infinite;
  filter:drop-shadow(0 0 5px rgba(242,176,117,.6));
}
@keyframes wmFlow{from{stroke-dashoffset:326}to{stroke-dashoffset:0}}
.wm__plane path{fill:#fff;stroke:none;filter:drop-shadow(0 0 4px rgba(242,176,117,.9))}
.wm__dot{fill:var(--orange-300);stroke:#fff;stroke-width:1.4}
.wm__city.is-home .wm__dot{fill:#fff;stroke:var(--orange)}
.wm__pulse{animation:wmPulse 3.4s var(--ease) infinite}
@keyframes wmPulse{0%{transform:scale(.4);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
.wm__label{
  fill:#fff;font-family:var(--th);font-size:15px;font-weight:700;text-anchor:middle;
  paint-order:stroke;stroke:rgba(4,40,26,.75);stroke-width:3px;stroke-linejoin:round;
}
.wm__sub{
  fill:var(--orange-300);font-family:var(--th);font-size:12px;font-weight:600;text-anchor:middle;
  paint-order:stroke;stroke:rgba(4,40,26,.75);stroke-width:3px;stroke-linejoin:round;
}

.wm__stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;margin-top:40px;
}
.wm__stats li{
  padding:24px 22px;border-radius:16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
}
.wm__stats strong{
  display:block;font-family:var(--disp);font-size:46px;line-height:1;
  color:var(--orange-300);margin-bottom:10px;
}
.wm__stats .t{display:block;color:#fff;font-size:15.5px;font-weight:600;margin-bottom:5px}
.wm__stats .d{display:block;color:rgba(255,255,255,.7);font-size:13.5px}

@media (max-width:620px){
  .pcard2{min-height:320px}
  .wm__label{font-size:17px}
  .wm__sub{font-size:14px}
  .wm__stats strong{font-size:38px}
}
@media (prefers-reduced-motion:reduce){
  .wm__routeDash,.wm__pulse{animation:none}
  .wm__plane animateMotion{display:none}
}

/* ── heading banners ───────────────────────────────────────────
   The photograph is the point, so it is shown at close to full brightness and
   covers the whole card. Readability is handled by giving the words their own
   frosted panel on top of it — the same device the pillar cards use — instead
   of drowning the picture in a dark wash. */
.sec__head--art{
  position:relative;isolation:isolate;max-width:none;
  border-radius:20px;overflow:hidden;
  padding:26px;margin-bottom:46px;
  min-height:330px;display:flex;align-items:flex-end;
  background-color:var(--green-900);
}
.sec__head__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
}
/* The heading sits straight on the picture, so the picture itself carries the
   shading: darker at the foot and down the left where the words are, clear at
   the top right so the photograph still reads. */
.sec__head--art::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(4,40,26,.78) 0%,rgba(4,40,26,.50) 40%,rgba(4,40,26,0) 78%),
    linear-gradient(to right,rgba(4,40,26,.45) 0%,rgba(4,40,26,0) 62%);
}
.sec__head__panel{position:relative;max-width:640px;padding:28px 30px 26px}
.sec__head--art h2,
.sec__head--art h3{color:#fff;margin:0;text-shadow:0 1px 16px rgba(0,0,0,.5)}
.sec__head--art .sec__lead{color:rgba(255,255,255,.92);max-width:none;margin-top:12px;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.sec__head--art .kicker{text-shadow:0 1px 10px rgba(0,0,0,.5)}
.sec__head--art .kicker,
.sec__head--art .kicker--dark{color:var(--orange-300)}
.sec__head--sub{min-height:250px;margin-bottom:34px}
.sec__head--sub h3{font-size:clamp(21px,2.3vw,27px)}

/* Capability group bands: same idea at band scale — picture visible, label on
   its own small frosted plate. */
.capg{margin-bottom:50px}
.capg__t{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:16px;border-bottom:0;
  min-height:124px;display:flex;align-items:flex-end;
  padding:16px;margin-bottom:22px;
  color:#fff;background-color:var(--green-900);
  font-size:15px;letter-spacing:.2em;
}
.capg__t::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(4,40,26,.62) 0%,rgba(4,40,26,.10) 55%,rgba(4,40,26,0) 100%);
}
.capg__t span{
  display:inline-block;padding:11px 18px;border-radius:11px;
  background:rgba(4,40,26,.78);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .capg__t span{background:rgba(4,40,26,.93)}
}

@media (max-width:620px){
  .sec__head--art{min-height:300px;padding:14px;border-radius:16px}
  .sec__head__panel{padding:22px 20px;border-radius:13px}
  .sec__head--sub{min-height:240px}
  .capg__t{min-height:112px;padding:12px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Motion. Transform and opacity only — nothing here triggers layout, so the
   page still scrolls at frame rate on a mid-range phone.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Resting states apply only once the motion script has marked the document.
   Without it every element is simply visible, so a reader whose JavaScript
   failed gets the whole page rather than a blank one. */
/* --fx is written per element by the script: negative for things that sit left
   of their group's centre, positive for the right, absent for the middle. The
   easing is the slow-out curve that makes motion read as weighted rather than
   springy — it covers most of the distance early, then settles. */
html.js .m-rise{
  opacity:0;
  transform:translate3d(var(--fx,0),var(--fy,30px),0);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1);
}
html.js .m-rise.is-in{opacity:1;transform:none}

html.js .sec__lead.m-rise,
html.js .hero__lead.m-rise,
html.js .hero__eyebrow.m-rise,
html.js .kicker.m-rise,
html.js .hero__btns.m-rise{--fx:-44px;--fy:0px}

html.js .m-fade{opacity:0;transition:opacity .8s var(--ease)}
html.js .m-fade.is-in{opacity:1}

/* A heading arrives a phrase at a time, each phrase sliding in from the left
   behind its own edge so the words lock into place instead of fading up. */
.m-word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.m-word__i{display:inline-block;will-change:transform}
html.js .m-split .m-word__i{
  transform:translate3d(-108%,0,0);opacity:0;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .7s ease;
}
html.js .m-split.is-in .m-word__i{transform:none;opacity:1}

/* Photographs drift inside their frame. The frame clips; the image is taller
   than the frame so the drift never exposes an edge. */
[data-parallax]{will-change:transform}

.m-progress{
  position:fixed;inset:0 0 auto 0;height:3px;z-index:120;pointer-events:none;
  background:rgba(4,40,26,.10);
}
.m-progress i{
  display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--orange),var(--orange-300));
}

/* Icons draw themselves once their tile arrives. */
html.js .m-rise .ico svg *{
  stroke-dasharray:160;stroke-dashoffset:160;
}
html.js .m-rise.is-in .ico svg *{
  stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease) .18s;
}

@media (prefers-reduced-motion:reduce){
  html.js .m-rise,html.js .m-fade{opacity:1!important;transform:none!important}
  html.js .m-split .m-word__i{transform:none!important;opacity:1!important}
  html.js .m-rise .ico svg *{stroke-dashoffset:0!important}
  .m-progress{display:none}
}

/* Country names are map furniture, not markers: no dot, no accent colour, and
   small enough that the three partner cities stay the only things you read. */
.wm__geoLabel{
  fill:rgba(255,255,255,.38);
  font-family:var(--th);font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-anchor:middle;pointer-events:none;
}
@media (max-width:620px){ .wm__geoLabel{font-size:12px;letter-spacing:.08em} }

/* ═══════════════════════════════════════════════════════════════════════════
   Pointer response.
   Only inside (hover:hover) — a touch screen has no cursor to follow, and
   leaving these on would strand a card mid-tilt after a tap.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover:hover) and (pointer:fine){

  /* The card returns to rest on its own curve; while the pointer is inside,
     the script writes `transform` every frame and no transition may interfere. */
  .pcard2,.pcard,.fcard,.caps li,.gl__item,.wm__stats li,.sec__head--art{
    transform-style:preserve-3d;
    transition:transform .5s var(--ease),box-shadow .4s var(--ease),
               background .25s,border-color .25s;
  }
  .pcard2.is-hover,.pcard.is-hover,.fcard.is-hover,.caps li.is-hover,
  .gl__item.is-hover,.wm__stats li.is-hover,.sec__head--art.is-hover{
    transition:box-shadow .4s var(--ease),background .25s,border-color .25s;
  }

  /* A soft light that tracks the cursor. --mx/--my are written by the script. */
  .pcard2::after,.pcard::after,.fcard::after,.caps li::after,
  .gl__item::after,.wm__stats li::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    border-radius:inherit;opacity:0;transition:opacity .35s var(--ease);
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
               rgba(255,255,255,.16),transparent 62%);
  }
  /* The light must sit ON the surface but UNDER the words, or it washes the
     text out at exactly the moment the reader is pointing at it. On the photo
     cards it goes above the picture (z 0, after it in the DOM) and below the
     panel (z 1); on the plain cards a negative layer, boxed in by `isolation`,
     puts it above the background and behind the text. */
  .pcard2::after{z-index:0}
  .pcard::after,.fcard::after,.caps li::after,.gl__item::after,.wm__stats li::after{z-index:-1}
  .pcard,.fcard,.caps li,.gl__item,.wm__stats li{position:relative;isolation:isolate}
  .pcard2.is-hover::after,.pcard.is-hover::after,.fcard.is-hover::after,
  .caps li.is-hover::after,.gl__item.is-hover::after,.wm__stats li.is-hover::after{opacity:1}

  /* On white cards the light is a warm tint rather than a white wash. */
  .pcard::after,.fcard::after,.gl__item::after{
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
               rgba(210,112,44,.12),transparent 64%);
  }

  /* Photographs drift against the lean, which is what sells the depth. */
  .pcard2__fig img,.sec__head__bg{
    transition:transform .5s var(--ease);
  }
  .pcard2.is-hover .pcard2__fig img{
    transform:translate3d(var(--hx,0),var(--hy,0),0) scale(1.09);
    transition:transform .12s linear;
  }
  .sec__head--art.is-hover .sec__head__bg{
    transform:translate3d(var(--hx,0),var(--hy,0),0) scale(1.05);
    transition:transform .12s linear;
  }

  /* The frosted panel lifts off the picture it sits on. This is a 2D lift, not
     translateZ: the card clips its contents, and `overflow:hidden` flattens a
     preserve-3d subtree, so a Z offset would be silently ignored. */
  .pcard2__body{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
  .pcard2.is-hover .pcard2__body{
    transform:translateY(-5px) scale(1.012);
    box-shadow:0 18px 40px rgba(4,40,26,.30);
  }

  /* Icons answer the pointer too. */
  .caps li.is-hover .ico--tile{transform:translateY(-4px) scale(1.07) rotate(-3deg)}
  .fcard.is-hover .ico--fleet{transform:translateY(-4px) rotate(-5deg)}
  .pcard2.is-hover .ico--chip{transform:translateY(-3px) scale(1.09) rotate(-4deg)}
  .ico--chip{transition:transform .45s var(--ease)}

  .btn,.chips span{transition:transform .35s var(--ease),background .2s,border-color .2s,color .2s}
  .btn:hover{transform:none}          /* the magnet owns transform while hovering */
}

@media (prefers-reduced-motion:reduce){
  .pcard2,.pcard,.fcard,.caps li,.gl__item,.wm__stats li,.sec__head--art{transform:none!important}
  .pcard2__fig img,.sec__head__bg{transform:none!important}
}