/* ============================================================
   AERO AIR CHARTER — shared stylesheet
   Palette taken from the official style sheet:
   https://flywithaero.com/s/Aero_StyleSheet-REV.pdf
   ============================================================ */
:root{
  --sunset-gulf:#ee2c44;   /* Pantone 1788C */
  --lt-orange:#f09021;     /* Pantone 1495C */
  --mid-blue:#33acd3;      /* Pantone 298C  */
  --lt-blue:#5fc6c9;       /* Pantone 325C  */
  --deep-blue:#026f91;     /* Pantone 7705C */

  --ink:#04141c;
  --paper:#f4f8f9;
  --paper-dim:rgba(244,248,249,.62);
  --hairline:rgba(244,248,249,.16);

  --grad-sunset:linear-gradient(100deg,var(--sunset-gulf) 0%,var(--lt-orange) 100%);
  --grad-gulf:linear-gradient(100deg,var(--deep-blue) 0%,var(--mid-blue) 55%,var(--lt-blue) 100%);

  --display:'Jost','Futura','Century Gothic',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --gut:clamp(20px,5vw,72px);
  --nav-h:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--lt-blue);outline-offset:3px;border-radius:2px}

/* ---------- fixed video background ---------- */
#video-wrap{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:0;transform-origin:center;will-change:transform;
  background:
    radial-gradient(120% 90% at 70% 0%,#0d4f6b 0%,transparent 60%),
    linear-gradient(180deg,#062b3c 0%,#04141c 70%);
}
#bg-video{width:100%;height:100%;object-fit:cover;transform:scale(1.35);transform-origin:center;will-change:transform}
#video-wrap.is-fallback::after{
  content:"";position:absolute;inset:-10%;
  background:
    radial-gradient(50% 40% at 20% 30%,rgba(95,198,201,.20),transparent 70%),
    radial-gradient(45% 35% at 80% 60%,rgba(238,44,68,.16),transparent 70%),
    radial-gradient(60% 50% at 50% 100%,rgba(2,111,145,.35),transparent 70%);
  animation:drift 34s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1.05)}to{transform:translate3d(2%,2%,0) scale(1.18)}}

#scrim{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,20,28,.74) 0%,rgba(4,20,28,.20) 26%,rgba(4,20,28,.34) 50%,rgba(4,20,28,.88) 100%);
}
body.page-inner #scrim{
  background:linear-gradient(180deg,rgba(4,20,28,.86) 0%,rgba(4,20,28,.62) 30%,rgba(4,20,28,.74) 60%,rgba(4,20,28,.94) 100%);
}
#grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gut);border-bottom:1px solid transparent;
  transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease;
}
.nav.is-stuck{
  background:rgba(4,20,28,.80);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--hairline);
}
.nav__logo img{height:46px;width:auto}
.nav__links{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}
.nav__links > li{list-style:none;position:relative}
.nav__links{margin:0;padding:0}
.navlink{
  font-family:var(--display);font-size:12px;font-weight:500;
  letter-spacing:.20em;text-transform:uppercase;color:var(--paper-dim);
  background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  transition:color .25s ease;
}
.navlink:hover,.navlink[aria-expanded="true"],.navlink.is-current{color:var(--paper)}
.navlink.is-current{position:relative}
.navlink.is-current::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--grad-sunset);
}
.navlink .caret{
  width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .28s ease;
}
.navlink[aria-expanded="true"] .caret{transform:rotate(225deg) translateY(-2px)}

/* services dropdown */
.drop{
  position:absolute;top:calc(100% + 18px);left:-22px;min-width:290px;
  background:rgba(6,26,36,.94);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--hairline);border-radius:4px;
  padding:8px;margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.drop::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.nav__item.is-open .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:13px 14px;border-radius:3px;transition:background .22s ease}
.drop a:hover{background:rgba(95,198,201,.10)}
.drop b{
  display:block;font-family:var(--display);font-size:13px;font-weight:500;
  letter-spacing:.10em;text-transform:uppercase;color:var(--paper);margin-bottom:3px;
}
.drop span{display:block;font-size:.78rem;color:rgba(244,248,249,.56);line-height:1.5;font-weight:300}
.drop a:hover b{color:var(--lt-blue)}

.nav__cta{
  font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.20em;text-transform:uppercase;
  padding:11px 22px;border-radius:999px;background:var(--grad-sunset);color:#fff;
  transition:transform .25s ease,box-shadow .25s ease;
}
.nav__cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(238,44,68,.36)}

/* mobile menu */
.burger{
  display:none;background:none;border:0;cursor:pointer;padding:10px;margin-right:-10px;
}
.burger span{display:block;width:24px;height:1px;background:var(--paper);transition:transform .3s ease,opacity .3s ease}
.burger span+span{margin-top:6px}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

#mobile-menu{
  position:fixed;inset:0;z-index:39;background:rgba(4,20,28,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:calc(var(--nav-h) + 30px) var(--gut) 40px;
  display:flex;flex-direction:column;gap:6px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
}
body.menu-open #mobile-menu{opacity:1;visibility:visible}
#mobile-menu a{
  font-family:var(--display);font-size:clamp(1.5rem,7vw,2.2rem);font-weight:300;
  text-transform:uppercase;letter-spacing:.02em;padding:12px 0;
  border-bottom:1px solid var(--hairline);
}
#mobile-menu a.sub{
  font-size:clamp(.92rem,3.6vw,1.05rem);letter-spacing:.14em;font-weight:400;
  color:var(--paper-dim);padding-left:22px;
}
/* Raised from 960px: the nav gained a Fleet item and five links
   plus the CTA no longer fit comfortably below ~1080px. */
@media(max-width:1080px){
  .nav__links,.nav__cta{display:none}
  .burger{display:block}
}

/* ---------- layout primitives ---------- */
main{position:relative;z-index:2}
.section{padding:clamp(90px,14vh,170px) var(--gut);position:relative}
.section--tight{padding-top:clamp(50px,7vh,80px);padding-bottom:clamp(50px,7vh,80px)}
.wrap{max-width:1220px;margin:0 auto}
.wrap--narrow{max-width:820px}

.eyebrow{
  font-family:var(--display);font-size:11px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--lt-blue);
  margin:0 0 22px;display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:38px;height:1px;background:var(--grad-sunset);flex:none}

h1,h2,h3,h4{font-family:var(--display);font-weight:300;margin:0;text-transform:uppercase}
h1{font-size:clamp(2.5rem,7.6vw,6.4rem);line-height:.95;letter-spacing:-.015em}
h2{font-size:clamp(1.9rem,5vw,4rem);line-height:1.02;letter-spacing:-.01em}
h3{font-size:clamp(1.08rem,2vw,1.45rem);line-height:1.15;letter-spacing:.02em;font-weight:400}
.lede{font-size:clamp(1.02rem,1.5vw,1.22rem);color:rgba(244,248,249,.80);max-width:62ch;font-weight:300}
.prose p{margin:0 0 22px;color:rgba(244,248,249,.78);font-weight:300;max-width:68ch}
.prose p:last-child{margin-bottom:0}

.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--display);font-size:12.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  padding:16px 32px;border-radius:999px;background:var(--grad-sunset);color:#fff;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease,background .3s ease;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(238,44,68,.38)}
.btn--ghost{background:transparent;border:1px solid var(--hairline);color:var(--paper)}
.btn--ghost:hover{border-color:var(--lt-blue);box-shadow:none;background:rgba(95,198,201,.08)}
.btn i{font-style:normal;transition:transform .3s ease}
.btn:hover i{transform:translateX(4px)}

/* ---------- inner-page header ---------- */
.page-hero{
  padding-top:calc(var(--nav-h) + clamp(70px,12vh,140px));
  padding-bottom:clamp(52px,9vh,96px);
}
.crumb{
  font-family:var(--display);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(244,248,249,.44);margin:0 0 26px;
}
.crumb a:hover{color:var(--lt-blue)}
.crumb span{margin:0 9px;opacity:.5}
.page-hero .lede{margin-top:28px}
.page-hero__meta{
  display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);margin-top:clamp(30px,5vh,48px);
}
.page-hero__meta div{border-left:1px solid var(--hairline);padding-left:14px}
.page-hero__meta dt{font-family:var(--display);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper-dim);margin:0 0 4px}
.page-hero__meta dd{margin:0;font-family:var(--display);font-size:15px;letter-spacing:.06em}

/* ---------- home hero ---------- */
#hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(60px,10vh,110px);padding-top:var(--nav-h)}
.hero__badge{width:clamp(58px,7vw,84px);margin-bottom:30px;opacity:.95}
#hero h1 span{display:block}
#hero h1 .accent{background:var(--grad-sunset);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500}
.hero__foot{margin-top:clamp(30px,5vh,54px);display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(24px,5vw,64px)}

/* ---------- experience ---------- */
.exp__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:start}
.exp__aside{padding-top:clamp(0px,3vw,54px)}
@media(max-width:900px){.exp__aside{padding-top:0}}
@media(max-width:900px){.exp__grid{grid-template-columns:1fr}}
.exp__copy p{margin:26px 0 0}
.exp__list{list-style:none;padding:0;margin:0;border-top:1px solid var(--hairline)}
.exp__list li{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--hairline)}
.exp__list b{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--lt-blue);flex:none;width:88px;text-transform:uppercase}
.exp__list span{font-size:.95rem;color:rgba(244,248,249,.78);font-weight:300}
.plate{position:relative;overflow:hidden;border-radius:3px;border:1px solid var(--hairline)}
.plate img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.plate:hover img{transform:scale(1.05)}
.plate figcaption{position:absolute;left:16px;bottom:14px;font-family:var(--display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.7)}

/* ---------- destinations ---------- */
.dest__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(38px,6vh,64px)}
.dest__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--hairline)}
@media(max-width:820px){.dest__grid{grid-template-columns:1fr}}
.dest{
  position:relative;padding:clamp(28px,3.2vw,42px);min-height:300px;
  background:rgba(4,20,28,.55);backdrop-filter:blur(6px);
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  transition:background .45s ease;
}
.dest:hover{background:rgba(2,111,145,.30)}
.dest::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad-sunset);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.dest:hover::after{transform:scaleX(1)}
.dest__code{font-family:var(--display);font-size:clamp(2.6rem,4.6vw,3.9rem);font-weight:200;letter-spacing:.04em;line-height:1;color:rgba(244,248,249,.30);transition:color .45s ease}
.dest:hover .dest__code{color:var(--lt-blue)}
.dest__name{margin:0 0 6px}
.dest__sub{font-family:var(--display);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-dim);margin:0}
.dest__time{margin-top:20px;padding-top:14px;border-top:1px solid var(--hairline);font-family:var(--display);font-size:12px;letter-spacing:.14em;color:rgba(244,248,249,.72)}

/* ---------- capability cards (now links) ---------- */
.cap__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);margin-top:clamp(44px,7vh,72px)}
@media(max-width:900px){.cap__grid{grid-template-columns:1fr}}
.cap{
  position:relative;z-index:0;display:block;
  border-top:2px solid transparent;border-image:var(--grad-gulf) 1;
  padding:26px 0 0;transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
/* Readability panel. Drawn on a pseudo-element that bleeds past the text
   box, so nothing shifts on hover — adding real padding would reflow the
   card. Sits behind the content via the card's own stacking context. */
.cap::before{
  content:"";position:absolute;z-index:-1;
  inset:-2px -24px -24px -24px;
  background:rgba(4,20,28,.72);
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  border-radius:3px;
  opacity:0;transform:scale(.99);
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1);
}
a.cap:hover::before,a.cap:focus-visible::before{opacity:1;transform:none}
a.cap:hover{transform:translateY(-6px)}
a.cap:focus-visible{outline:2px solid var(--lt-blue);outline-offset:6px}
/* On light sub-pages the panel would be invisible — invert it there. */
:is(.s-paper,.s-mist) .cap::before{
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 44px rgba(2,111,145,.14);
}
.cap:nth-child(2){border-image:var(--grad-sunset) 1}
.cap__tag{font-family:var(--display);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--lt-orange);margin:0 0 14px}
.cap h3{margin-bottom:14px;transition:color .3s ease}
a.cap:hover h3{color:var(--lt-blue)}
.cap p{margin:0;font-size:.96rem;color:rgba(244,248,249,.76);font-weight:300}
.cap ul{list-style:none;padding:0;margin:20px 0 0}
.cap li{font-size:.88rem;color:rgba(244,248,249,.66);font-weight:300;padding:7px 0 7px 20px;position:relative}
.cap li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:1px;background:var(--lt-blue)}
.cap__more{
  display:inline-flex;align-items:center;gap:9px;margin-top:24px;
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--paper);
}
.cap__more i{font-style:normal;transition:transform .3s ease}
a.cap:hover .cap__more{color:var(--lt-blue)}
a.cap:hover .cap__more i{transform:translateX(5px)}

/* ---------- values (about) ---------- */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--hairline);margin-top:clamp(40px,6vh,68px)}
@media(max-width:980px){.values{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.values{grid-template-columns:1fr}}
.value{background:rgba(4,20,28,.58);padding:clamp(26px,2.8vw,36px);backdrop-filter:blur(6px)}
.value h3{margin:0 0 12px;font-size:1.05rem;letter-spacing:.16em;font-weight:500}
.value p{margin:0;font-size:.88rem;color:rgba(244,248,249,.70);font-weight:300}
.value .num{
  font-family:var(--display);font-size:11px;letter-spacing:.26em;color:var(--lt-orange);
  display:block;margin-bottom:16px;
}

/* ---------- pull quote ---------- */
.pullquote{
  border-left:2px solid transparent;border-image:var(--grad-sunset) 1;
  padding-left:clamp(22px,3vw,42px);margin:0;
}
.pullquote p{
  font-family:var(--display);font-weight:200;font-style:italic;
  font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:1.22;margin:0 0 18px;
}
.pullquote footer{font-family:var(--display);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper-dim)}

/* ---------- crew ---------- */
.crew__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:2px;background:var(--hairline);margin-top:clamp(40px,6vh,66px);
}
.crew{
  position:relative;background:rgba(4,20,28,.58);backdrop-filter:blur(6px);
  padding-bottom:26px;transition:background .4s ease;
}
.crew:hover{background:rgba(2,111,145,.24)}
.crew__photo{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:var(--grad-gulf);display:grid;place-items:center;
}
.crew:nth-child(3n+2) .crew__photo{background:var(--grad-sunset)}
.crew:nth-child(3n) .crew__photo{background:linear-gradient(140deg,#026f91,#04141c)}
.crew__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.crew__initials{
  font-family:var(--display);font-size:clamp(2.4rem,4vw,3.2rem);font-weight:200;
  letter-spacing:.12em;color:rgba(255,255,255,.82);
}
.crew__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(4,20,28,.75) 100%)}
.crew__body{padding:22px clamp(20px,2vw,26px) 0}
.crew__name{margin:0 0 5px;font-size:1.02rem;font-weight:500;letter-spacing:.09em}
.crew__role{font-family:var(--display);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--lt-blue);margin:0 0 14px}
.crew__bio{margin:0;font-size:.86rem;color:rgba(244,248,249,.70);font-weight:300;line-height:1.6}

/* Placeholder chip — delete the `is-placeholder` class once real content lands. */
.crew.is-placeholder .crew__photo::before{
  content:"Placeholder";position:absolute;top:12px;left:12px;z-index:2;
  font-family:var(--display);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;
  background:rgba(4,20,28,.72);border:1px solid rgba(244,248,249,.28);
  color:rgba(244,248,249,.86);
}

/* ---------- generic feature list / steps ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
@media(max-width:880px){.grid-2{grid-template-columns:1fr}}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}}

.steps{list-style:none;margin:clamp(36px,5vh,58px) 0 0;padding:0;counter-reset:s}
.steps li{
  counter-increment:s;position:relative;padding:26px 0 26px 74px;
  border-top:1px solid var(--hairline);
}
.steps li:last-child{border-bottom:1px solid var(--hairline)}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:26px;
  font-family:var(--display);font-size:12px;letter-spacing:.2em;color:var(--lt-orange);
}
.steps h3{margin:0 0 8px}
.steps p{margin:0;font-size:.93rem;color:rgba(244,248,249,.72);font-weight:300;max-width:66ch}

.spec{width:100%;border-collapse:collapse;margin-top:clamp(30px,4vh,48px)}
.spec th,.spec td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--hairline);font-size:.9rem;font-weight:300}
.spec th{
  font-family:var(--display);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--paper-dim);font-weight:500;width:38%;
}
.spec td{color:rgba(244,248,249,.82)}
@media(max-width:620px){
  .spec th,.spec td{display:block;width:100%;padding:10px 0}
  .spec th{border-bottom:0;padding-bottom:2px}
}

.panel{
  background:rgba(4,20,28,.55);backdrop-filter:blur(6px);
  border:1px solid var(--hairline);border-radius:3px;
  padding:clamp(26px,3.2vw,42px);
}
.panel h3{margin:0 0 16px}
.panel ul{list-style:none;margin:0;padding:0}
.panel li{position:relative;padding:9px 0 9px 22px;font-size:.9rem;color:rgba(244,248,249,.74);font-weight:300}
.panel li::before{content:"";position:absolute;left:0;top:18px;width:9px;height:1px;background:var(--lt-blue)}

.faq{margin-top:clamp(34px,5vh,54px);border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:var(--display);font-size:clamp(.98rem,1.7vw,1.16rem);font-weight:400;letter-spacing:.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:29px;width:9px;height:9px;
  border-right:1px solid var(--lt-blue);border-bottom:1px solid var(--lt-blue);
  transform:rotate(45deg);transition:transform .3s ease;
}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq p{margin:0 0 24px;font-size:.93rem;color:rgba(244,248,249,.72);font-weight:300;max-width:70ch}

/* ---------- cta band ---------- */
.cta-band{
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  background:rgba(2,111,145,.16);backdrop-filter:blur(8px);
}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.cta-band h2{max-width:16ch}

/* ---------- footer ---------- */
#contact{background:linear-gradient(180deg,rgba(4,20,28,.55) 0%,rgba(4,20,28,.96) 55%);border-top:1px solid var(--hairline)}
.contact__top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.contact__phone{font-family:var(--display);font-weight:200;font-size:clamp(2rem,5.4vw,4rem);line-height:1;letter-spacing:-.01em;display:inline-block}
.contact__phone:hover{background:var(--grad-sunset);-webkit-background-clip:text;background-clip:text;color:transparent}
.foot{margin-top:clamp(56px,9vh,90px);padding-top:34px;border-top:1px solid var(--hairline);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
@media(max-width:900px){.foot{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot{grid-template-columns:1fr}}
.foot img.mark{height:30px;width:auto;margin-bottom:20px}
.foot p{margin:0 0 10px;font-size:.85rem;color:rgba(244,248,249,.60);font-weight:300}
.foot h4{font-family:var(--display);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper);margin:0 0 16px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px;font-size:.88rem;color:rgba(244,248,249,.66)}
.foot li a:hover{color:var(--lt-blue)}
.legal{margin-top:44px;padding-top:22px;border-top:1px solid var(--hairline);font-size:.74rem;line-height:1.7;color:rgba(244,248,249,.42);max-width:88ch}


/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:50;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .7s ease,visibility .7s ease}
#loader.is-hidden{opacity:0;visibility:hidden}
#loader img{width:74px;opacity:.9}
#loader p{color:#fff;font-family:var(--display);font-size:1.5rem;font-weight:300;letter-spacing:.18em;margin:0;font-variant-numeric:tabular-nums}
#loader .bar{width:180px;height:1px;background:rgba(255,255,255,.18);overflow:hidden}
#loader .bar i{display:block;height:100%;width:0%;background:var(--grad-sunset);transition:width .2s linear}

/* ---------- reveal / motion ---------- */
.reveal{opacity:0;transform:translateY(26px)}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  #video-wrap.is-fallback::after{animation:none}
  *{transition-duration:.01ms!important}
}

/* ============================================================
   STATIC SUB-PAGES
   Sub-pages drop the scroll-scrubbed video entirely. The video is
   the homepage's signature; repeating it everywhere dilutes it and
   costs a large download on pages that are mostly reading.
   ============================================================ */
body.page-static{
  background:
    radial-gradient(120% 80% at 78% -10%,rgba(2,111,145,.42) 0%,transparent 58%),
    radial-gradient(90% 60% at 8% 105%,rgba(238,44,68,.13) 0%,transparent 62%),
    linear-gradient(180deg,#05202c 0%,#04141c 46%,#031016 100%);
  background-attachment:fixed;
}
@media(max-width:820px){body.page-static{background-attachment:scroll}}

/* --- hero with a static photograph --- */
.page-hero--media{
  position:relative;overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(90px,16vh,180px));
  padding-bottom:clamp(64px,11vh,120px);
  border-bottom:1px solid var(--hairline);
}
.page-hero__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;
}
.page-hero--media::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(4,20,28,.92) 0%,rgba(4,20,28,.58) 38%,rgba(4,20,28,.80) 78%,#04141c 100%),
    linear-gradient(90deg,rgba(4,20,28,.82) 0%,rgba(4,20,28,.28) 62%,transparent 100%);
}
.page-hero--media > .wrap{position:relative;z-index:2}


/* --- image rows --- */
.figrow{display:grid;gap:2px;margin-top:clamp(34px,5vh,54px)}
.figrow--2{grid-template-columns:1fr 1fr}
.figrow--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.figrow--2,.figrow--3{grid-template-columns:1fr}}
.figrow .plate img{aspect-ratio:4/3}

/* --- accreditation badges --- */
.badges{
  display:flex;align-items:center;gap:clamp(28px,5vw,64px);flex-wrap:wrap;
  margin-top:clamp(34px,5vh,52px);padding-top:30px;border-top:1px solid var(--hairline);
}
.badges img{height:clamp(42px,6vw,62px);width:auto;opacity:.78;transition:opacity .3s ease}
.badges a:hover img{opacity:1}
.badges p{
  margin:0;font-size:.76rem;color:rgba(244,248,249,.46);font-weight:300;max-width:34ch;
}

/* --- IntersectionObserver reveal (sub-pages have no GSAP) --- */
body.page-static .reveal{
  transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);
}
body.page-static .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  body.page-static .reveal{opacity:1!important;transform:none!important}
}

/* ============================================================
   SECTION THEMES
   Sub-pages run bright. Each section declares a theme class and
   every component inside reads its colour from that theme's
   custom properties, so a section can be recoloured by swapping
   one class instead of overriding twenty rules.

     .s-paper   near-white, ink text        (default reading surface)
     .s-mist    pale gulf tint              (quiet alternation)
     .s-gulf    deep→light blue gradient    (saturated punctuation)
     .s-deep    solid Pantone 7705C         (saturated punctuation)
     .s-sunset  red→orange gradient         (calls to action only)
     .s-ink     brand dark                  (footer anchor)
   ============================================================ */

body.page-static{
  background:#eef6f8;
  color:var(--ink);
}
body.page-static #grain{opacity:.03}

/* ---------- theme tokens ---------- */
.s-paper,.s-mist{
  --fg:#04141c;
  --fg-soft:rgba(4,20,28,.74);
  --fg-mute:rgba(4,20,28,.52);
  --rule:rgba(2,111,145,.20);
  --accent:var(--deep-blue);
  --tag:var(--sunset-gulf);
  --panel:rgba(255,255,255,.72);
  --panel-line:rgba(2,111,145,.16);
  color:var(--fg);
}
.s-paper{background:#f4fafb}
.s-mist{background:linear-gradient(180deg,#e4f3f6 0%,#f0f8fa 100%)}

.s-gulf,.s-deep,.s-sunset{
  --fg:#fff;
  --fg-soft:rgba(255,255,255,.88);
  --fg-mute:rgba(255,255,255,.70);
  --rule:rgba(255,255,255,.30);
  --accent:#fff;
  --tag:#fff;
  --panel:rgba(255,255,255,.14);
  --panel-line:rgba(255,255,255,.28);
  color:#fff;
}
.s-gulf{background:var(--grad-gulf)}
.s-deep{background:var(--deep-blue)}
.s-sunset{background:var(--grad-sunset)}

.s-ink{
  --fg:var(--paper);
  --fg-soft:rgba(244,248,249,.78);
  --fg-mute:rgba(244,248,249,.56);
  --rule:var(--hairline);
  --accent:var(--lt-blue);
  --tag:var(--lt-orange);
  --panel:rgba(4,20,28,.55);
  --panel-line:var(--hairline);
  background:#04141c;color:var(--paper);
}

/* ---------- components read from the theme ---------- */
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .eyebrow{color:var(--accent)}
.s-gulf .eyebrow::before,.s-deep .eyebrow::before,.s-sunset .eyebrow::before{background:#fff}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .crumb{color:var(--fg-mute)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .crumb a:hover{color:var(--accent)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .lede{color:var(--fg-soft)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .prose p{color:var(--fg-soft)}

:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .panel{background:var(--panel);border-color:var(--panel-line)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .panel li{color:var(--fg-soft)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .panel li::before{background:var(--accent)}

:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .spec th{color:var(--fg-mute)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .spec td{color:var(--fg-soft)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .spec th,:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .spec td{border-bottom-color:var(--rule)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .spec em{color:var(--tag);font-style:normal;font-weight:500}

:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .steps li{border-top-color:var(--rule)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .steps li:last-child{border-bottom-color:var(--rule)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .steps li::before{color:var(--tag)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .steps p{color:var(--fg-soft)}

:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .faq{border-top-color:var(--rule)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .faq details{border-bottom-color:var(--rule)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .faq p{color:var(--fg-soft)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .faq summary::after{border-color:var(--accent)}

:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .page-hero__meta div{border-left-color:var(--rule)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .page-hero__meta dt{color:var(--fg-mute)}

:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .plate{border-color:var(--rule)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .badges{border-top-color:var(--rule)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .badges p{color:var(--fg-mute)}
.s-paper .badges img,.s-mist .badges img{opacity:.92}
.s-paper .badges a:hover img,.s-mist .badges a:hover img{opacity:.95}

:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .pullquote p{color:var(--fg)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .pullquote footer{color:var(--fg-mute)}

/* values + crew read the theme too */
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .values,:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .crew__grid{background:var(--rule)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .value,:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .crew{background:var(--panel);backdrop-filter:none}
.s-paper .value,.s-paper .crew{background:#fff}
.s-mist .value,.s-mist .crew{background:rgba(255,255,255,.78)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .crew:hover{background:rgba(2,111,145,.10)}
.s-gulf .crew:hover,.s-deep .crew:hover,.s-sunset .crew:hover{background:rgba(255,255,255,.22)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .value p,:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .crew__bio{color:var(--fg-soft)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .value .num{color:var(--tag)}
:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink) .crew__role{color:var(--accent)}
.s-gulf .value .num,.s-deep .value .num,.s-sunset .value .num{color:#fff;opacity:.8}

/* buttons per theme */
.s-sunset .btn{background:#fff;color:var(--sunset-gulf)}
.s-sunset .btn:hover{box-shadow:0 16px 40px rgba(0,0,0,.22)}
.s-sunset .btn--ghost,.s-gulf .btn--ghost,.s-deep .btn--ghost{
  background:transparent;border-color:rgba(255,255,255,.55);color:#fff;
}
.s-sunset .btn--ghost:hover,.s-gulf .btn--ghost:hover,.s-deep .btn--ghost:hover{
  background:rgba(255,255,255,.14);border-color:#fff;
}
.s-paper .btn--ghost,.s-mist .btn--ghost{border-color:rgba(2,111,145,.34);color:var(--deep-blue)}
.s-paper .btn--ghost:hover,.s-mist .btn--ghost:hover{
  background:rgba(2,111,145,.07);border-color:var(--deep-blue);
}

/* the CTA band drops its own dark treatment when themed */
.cta-band:is(.s-paper,.s-mist,.s-gulf,.s-deep,.s-sunset,.s-ink){background-image:none;backdrop-filter:none;border-color:transparent}
.cta-band.s-sunset{background:var(--grad-sunset)}

/* footer stays dark on bright pages — it anchors the bottom */
body.page-static #contact{background:#04141c;border-top:0}

/* ---------- brand wash over the photographic hero ---------- */
body.page-static .page-hero--media::after{
  background:
    linear-gradient(118deg,rgba(2,111,145,.62) 0%,rgba(2,111,145,.20) 46%,rgba(238,44,68,.34) 100%),
    linear-gradient(180deg,rgba(4,20,28,.80) 0%,rgba(4,20,28,.34) 40%,rgba(4,20,28,.55) 74%,#f4fafb 100%);
}
body.page-static .page-hero--media{border-bottom:0}
body.page-static .page-hero--media,
body.page-static .page-hero--media .lede,
body.page-static .page-hero--media .crumb a{color:var(--paper)}
body.page-static .page-hero--media .eyebrow{color:var(--lt-blue)}
body.page-static .page-hero--media .crumb{color:rgba(244,248,249,.62)}
body.page-static .page-hero--media .lede{color:rgba(244,248,249,.88)}
body.page-static .page-hero--media .page-hero__meta div{border-left-color:rgba(244,248,249,.28)}
body.page-static .page-hero--media .page-hero__meta dt{color:rgba(244,248,249,.66)}

/* two-card crew grid (maintenance team) */
.crew__grid--pair{grid-template-columns:repeat(2,1fr);max-width:680px}
@media(max-width:620px){.crew__grid--pair{grid-template-columns:1fr}}
/* real headshots crop from the top so faces aren't cut off */
.crew__photo img{object-position:center 22%}

/* ============================================================
   AVINODE WEB APP HOST
   The widget is injected into the light DOM, not an iframe — Avinode's
   own docs note that host-site CSS overrides it. This site's global
   element rules (uppercase headings, stripped link styling, 1.65
   line-height) would therefore bleed straight into their markup, so
   the host container reverts them.

   Colours and fonts for the widget itself are NOT set here. They are
   configured in Avinode: Company -> Apps -> [app] -> Web UI.
   ============================================================ */
#avinode-host{
  position:relative;
  z-index:5;                       /* above page content, below the nav */
  font-family:var(--body);
  line-height:1.5;
  color:#04141c;
  min-height:420px;                /* holds layout while the script boots */
}

/* No transform, filter, backdrop-filter, overflow:hidden or contain on
   this element or its ancestors — each creates a containing block that
   traps the widget's absolutely-positioned date picker. */

#avinode-host h1,#avinode-host h2,#avinode-host h3,
#avinode-host h4,#avinode-host h5,#avinode-host h6{
  font-family:inherit;
  font-weight:600;
  text-transform:none;
  letter-spacing:normal;
  line-height:1.3;
  margin:revert;
}
#avinode-host a{color:revert;text-decoration:revert}
#avinode-host img{display:revert;max-width:100%}
#avinode-host p,#avinode-host ul,#avinode-host ol,#avinode-host li{margin:revert;padding:revert}
#avinode-host ul,#avinode-host ol,#avinode-host li{list-style:revert}
#avinode-host button,#avinode-host input,#avinode-host select,#avinode-host textarea{
  font-family:inherit;
}

/* Fallback shown if the widget never boots — most likely cause is the
   documented 60-day inactivity token expiry. */
#quote-fallback[hidden]{display:none}
#quote-fallback{
  border:1px solid rgba(238,44,68,.35);
  border-left:3px solid var(--sunset-gulf);
  background:rgba(255,255,255,.85);
  padding:clamp(24px,3vw,36px);
  border-radius:3px;
}
#quote-fallback h3{margin:0 0 12px}
#quote-fallback p{margin:0 0 16px;color:var(--fg-soft, rgba(4,20,28,.74));font-weight:300}

/* Side rail beside the widget */
.quote__grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:1020px){.quote__grid{grid-template-columns:1fr}}
.quote__rail{position:sticky;top:calc(var(--nav-h) + 24px)}
@media(max-width:1020px){.quote__rail{position:static}}

/* The poster frame must fill the viewport exactly as the video does,
   otherwise the hero jumps when the first decoded frame replaces it. */
#bg-video{object-fit:cover;object-position:center;background:#04141c}

/* ============================================================
   TESTIMONIALS
   CSS columns rather than grid, because the quotes vary wildly in
   length — one is a single sentence, another is a full paragraph.
   Columns pack them without the ragged bottoms a grid would leave.
   ============================================================ */
.quotes{columns:3;column-gap:22px;margin-top:clamp(38px,6vh,62px)}
@media(max-width:1020px){.quotes{columns:2}}
@media(max-width:680px){.quotes{columns:1}}

.quote-card{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  display:inline-block;width:100%;
  margin:0 0 22px;padding:clamp(22px,2.4vw,30px);
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-top:2px solid transparent;
  border-image:var(--grad-gulf) 1;
  border-radius:2px;
}
.quote-card:nth-child(3n+2){border-image:var(--grad-sunset) 1}
.s-paper .quote-card{background:#fff}
.quote-card blockquote{margin:0;font-size:.95rem;line-height:1.62;color:var(--fg-soft);font-weight:300}
.quote-card blockquote::before{
  content:"\201C";display:block;
  font-family:var(--display);font-size:2.6rem;line-height:.6;
  color:var(--sunset-gulf);margin-bottom:12px;
}
.quote-card footer{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.quote-card cite{
  display:block;font-style:normal;font-family:var(--display);
  font-size:.95rem;font-weight:500;letter-spacing:.06em;color:var(--fg);
}
.quote-card span{
  display:block;margin-top:3px;font-size:.78rem;color:var(--fg-mute);font-weight:300;
}

/* ============================================================
   AIRCRAFT (fleet.html)
   ============================================================ */
.jump{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(26px,4vh,40px);
}
.jump a{
  font-family:var(--display);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  padding:10px 18px;border-radius:999px;
  border:1px solid rgba(244,248,249,.28);color:var(--paper);
  transition:background .25s ease,border-color .25s ease;
}
.jump a:hover{background:rgba(95,198,201,.16);border-color:var(--lt-blue)}

.craft{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4.5vw,64px);align-items:start}
@media(max-width:940px){.craft{grid-template-columns:1fr}}
.craft__lead{margin:0 0 26px;font-size:clamp(1rem,1.5vw,1.16rem);color:var(--fg-soft);font-weight:300}
.craft__class{
  font-family:var(--display);font-size:10.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--tag);margin:0 0 14px;
}
.craft__gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.craft__gallery .plate:first-child{grid-column:1 / -1}
.craft__gallery .plate:first-child img{aspect-ratio:16/9}
.craft__gallery .plate img{aspect-ratio:4/3}

/* spec cells */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;background:var(--rule);margin-top:clamp(26px,4vh,40px);
}
.stat{background:var(--panel);padding:20px}
.s-paper .stat{background:#fff}
.s-mist .stat{background:rgba(255,255,255,.8)}
.stat dt{
  font-family:var(--display);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--fg-mute);margin:0 0 8px;
}
.stat dd{
  margin:0;font-family:var(--display);font-size:clamp(1.15rem,2vw,1.5rem);
  font-weight:300;letter-spacing:.01em;color:var(--fg);line-height:1.1;
}
.stat dd small{display:block;font-size:.62em;letter-spacing:.06em;color:var(--fg-mute);margin-top:5px}

/* ============================================================
   INSTAGRAM
   Static tiles by default. Swap in a live feed by replacing the
   contents of #ig-feed — see README.
   ============================================================ */
.ig__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vh,44px)}
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:900px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.ig-grid{grid-template-columns:repeat(2,1fr)}}
.ig-tile{
  position:relative;display:block;overflow:hidden;border-radius:2px;
  aspect-ratio:1;background:rgba(4,20,28,.4);
}
.ig-tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ig-tile:hover img{transform:scale(1.06)}
.ig-tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(4,20,28,.82) 100%);
  opacity:0;transition:opacity .4s ease;
}
.ig-tile:hover::after{opacity:1}
.ig-tile figcaption{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
  font-size:.74rem;line-height:1.45;color:#fff;font-weight:300;
  opacity:0;transform:translateY(6px);
  transition:opacity .4s ease,transform .4s ease;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ig-tile:hover figcaption{opacity:1;transform:none}
.ig-handle{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:12px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
}
.ig-handle:hover{color:var(--lt-blue)}

/* ============================================================
   LINKED AIRCRAFT PLATES
   Jet photographs that click through to the fleet page. The overlay
   carries real specs rather than a bare "learn more" — the hover
   state should answer part of the question, not just promise to.
   ============================================================ */
.plate--link{display:block;cursor:pointer;text-decoration:none}

.plate__label{
  position:absolute;left:clamp(14px,1.6vw,20px);bottom:clamp(12px,1.4vw,16px);z-index:3;
  font-family:var(--display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.75);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}

.plate__over{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(16px,1.8vw,22px);
  background:linear-gradient(180deg,
    rgba(4,20,28,0) 30%,
    rgba(4,20,28,.55) 62%,
    rgba(2,111,145,.90) 100%);
  opacity:0;transition:opacity .45s ease;
}
.plate__stats{
  display:block;font-family:var(--display);font-size:11.5px;letter-spacing:.12em;
  color:rgba(255,255,255,.92);margin-bottom:8px;
  transform:translateY(8px);transition:transform .45s cubic-bezier(.2,.8,.2,1) .04s;
}
.plate__cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:#fff;
  transform:translateY(8px);transition:transform .45s cubic-bezier(.2,.8,.2,1) .08s;
}
.plate__cta i{font-style:normal;transition:transform .35s ease}

.plate--link:hover .plate__over,
.plate--link:focus-visible .plate__over{opacity:1}
.plate--link:hover .plate__stats,
.plate--link:hover .plate__cta,
.plate--link:focus-visible .plate__stats,
.plate--link:focus-visible .plate__cta{transform:none}
.plate--link:hover .plate__cta i{transform:translateX(4px)}
/* the persistent label steps up so it doesn't collide with the overlay */
.plate--link:hover .plate__label,
.plate--link:focus-visible .plate__label{transform:translateY(-52px)}

.plate--link:focus-visible{outline:2px solid var(--lt-blue);outline-offset:3px}

/* Touch devices never fire hover, so show the affordance permanently
   at lower intensity rather than hiding it behind an interaction that
   cannot happen. */
@media (hover: none){
  .plate__over{opacity:1;background:linear-gradient(180deg,rgba(4,20,28,0) 45%,rgba(4,20,28,.78) 100%)}
  .plate__stats,.plate__cta{transform:none}
  .plate--link:hover .plate__label{transform:none}
  .plate__label{display:none}
}
@media(prefers-reduced-motion:reduce){
  .plate__label,.plate__stats,.plate__cta{transition:none}
}

/* ============================================================
   DESTINATION POOL
   Every destination ships in the HTML. The .js class (set inline in
   <head>, before first paint) hides them so JS can reveal a random
   subset without a visible collapse. Without JS the class is never
   added and all of them simply show — which is a fine outcome, not a
   broken one.
   ============================================================ */
.js [data-dest-pool] .dest{display:none}
.js [data-dest-pool] .dest.is-shown{display:flex}

/* Aircraft names sit on one line. The global h2 clamp tops out at 4rem,
   which overflows the narrower text column once "Citation XLS" is a
   single line, so these get their own scale — larger when the layout is
   stacked and full width, smaller once it is two columns. */
.craft h2{font-size:clamp(2rem,4.4vw,3.6rem)}
@media(min-width:941px){
  .craft h2{font-size:clamp(1.6rem,3.2vw,2.9rem)}
}

/* Text-first variant. Keeps the gallery on the wide track so every
   aircraft section has identically sized imagery. */
.craft--flip{grid-template-columns:.85fr 1.15fr}
@media(max-width:940px){.craft--flip{grid-template-columns:1fr}}

/* Visually hidden but available to screen readers and crawlers. Used for
   headings that keep the document outline correct where a visible one
   would be redundant. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Crew group headings and the two-card leadership row */
.crew__heading{
  font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--tag,var(--lt-orange));
  margin:clamp(40px,6vh,64px) 0 18px;
  display:flex;align-items:center;gap:14px;
}
.crew__heading::after{content:"";flex:1;height:1px;background:var(--rule,var(--hairline))}
.crew__grid--lead{grid-template-columns:repeat(2,1fr);max-width:680px}
@media(max-width:620px){.crew__grid--lead{grid-template-columns:1fr}}

/* Starlink banner — copy beside the mark */
.starlink{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.5vw,64px);align-items:center}
@media(max-width:880px){.starlink{grid-template-columns:1fr}}

/* ---------- third-party mark: Starlink ----------
   The logo is SpaceX's trademark. Displaying it to identify a service
   fitted to the aircraft is ordinary nominative use, but the artwork
   itself must not be redrawn or tinted to our palette — brand guidelines
   for marks like this permit monochrome only.

   So: no recolouring. The CSS filter forces the source artwork to flat
   white (or flat black on light sections) without touching its shapes,
   which is the standard permitted treatment and means one file works on
   any background. */
.starlink__mark{display:inline-flex;align-items:center;line-height:0}
.starlink__mark img{
  height:clamp(20px,2.2vw,28px);width:auto;
  filter:brightness(0) invert(1);        /* -> flat white */
  opacity:.92;transition:opacity .25s ease;
}
.starlink__mark:hover img{opacity:1}
/* if the mark ever sits on a light section */
:is(.s-paper,.s-mist) .starlink__mark img{filter:brightness(0);opacity:.78}
:is(.s-paper,.s-mist) 
/* Large placement: the mark carries the right-hand column on its own, so
   no frame or backing panel — a logo in a photo frame reads as a mistake. */
.starlink__mark--lg{justify-content:center;padding:clamp(10px,2vw,28px) 0}
.starlink__mark--lg img{
  height:auto;
  width:min(100%,420px);
  max-height:none;
  opacity:.96;
}
@media(max-width:880px){.starlink__mark--lg{justify-content:flex-start}}
@media(max-width:880px){.starlink__mark--lg img{width:min(100%,300px)}}

.starlink__mark-fallback{
  font-family:var(--display);font-size:14px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;line-height:1.2;
}
.starlink__mark-fallback[hidden]{display:none}

/* ============================================================
   PHOTOGRAPHIC SECTION BACKGROUND
   Pairs with any theme class — the theme keeps supplying the type
   colours, .has-bg just replaces its fill with an image plus a scrim.
   ============================================================ */
.has-bg{position:relative;overflow:hidden;background:none}
.has-bg > .section__bg{position:absolute;inset:0;z-index:0;line-height:0}
.has-bg > .section__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.has-bg::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Horizontal pass carries the headline; vertical pass keeps the top and
     bottom edges from competing with the light sections either side. */
  background:
    linear-gradient(90deg,rgba(4,20,28,.82) 0%,rgba(4,20,28,.52) 38%,rgba(4,20,28,.16) 70%,rgba(4,20,28,.06) 100%),
    linear-gradient(180deg,rgba(4,20,28,.34) 0%,rgba(4,20,28,.06) 34%,rgba(4,20,28,.10) 66%,rgba(4,20,28,.40) 100%);
}
.has-bg > .wrap{position:relative;z-index:2}

/* Over a photograph the stat cells need their own backing to stay legible,
   which the flat theme colour alone does not give them. */
.has-bg .stats{background:rgba(255,255,255,.22)}
.has-bg .stat{
  background:rgba(4,20,28,.34);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
}
.has-bg .stat dd{text-shadow:0 1px 14px rgba(4,20,28,.5)}
.has-bg h2,.has-bg .lede{text-shadow:0 2px 22px rgba(4,20,28,.45)}

@media(max-width:700px){
  /* Portrait crops lose the coastline, so bias toward the water side where
     the type sits rather than centre-cropping. */
  .has-bg > .section__bg img{object-position:30% center}
  .has-bg::after{
    background:linear-gradient(180deg,rgba(4,20,28,.72) 0%,rgba(4,20,28,.58) 50%,rgba(4,20,28,.78) 100%);
  }
}