:root {
    --lumis-black:#101315; --hangar-charcoal:#24292C; --runway-graphite:#3A4145;
    --titanium-grey:#879095; --lumis-platinum:#B8B7B0; --signal-ivory:#D8D4CA;
    --cloud-white:#F3F4F2; --aviation-blue:#527588; --font:"Helvetica Neue", Helvetica, Arial, sans-serif;
    --hairline: rgba(135,144,149,0.20); --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:auto; }
  body { background:var(--lumis-black); color:var(--cloud-white); font-family:var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  a { color:inherit; }

  /* ===================== top bar ===================== */
  #topbar { position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
    padding:22px clamp(20px,5vw,64px); pointer-events:none; border-bottom:1px solid transparent; will-change:transform;
    transition:transform .55s var(--ease), padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); }
  /* condensed frosted bar once scrolled off the very top */
  #topbar.scrolled { padding-top:12px; padding-bottom:12px; background:rgba(16,19,21,0.72);
    -webkit-backdrop-filter:blur(10px) saturate(120%); backdrop-filter:blur(10px) saturate(120%); border-bottom-color:var(--hairline); }
  /* auto-hide: slide up on scroll-down, reveal on scroll-up */
  #topbar.nav-hidden { transform:translateY(-100%); }
  /* subtle top scrim so the wordmark + mark stay legible over bright hero images; fades out once condensed */
  #topbar::before { content:""; position:absolute; left:0; right:0; top:0; height:210%; pointer-events:none;
    background:linear-gradient(180deg, rgba(16,19,21,0.6) 0%, rgba(16,19,21,0.32) 42%, rgba(16,19,21,0) 100%); transition:opacity .4s var(--ease); }
  #topbar.scrolled::before { opacity:0; }
  #topbar .brand { display:flex; align-items:center; gap:14px; pointer-events:auto; text-decoration:none; }
  #topbar .brand svg { width:46px; height:20px; display:block; }
  .wordmark { font-family:var(--font); font-weight:300; font-size:14px; letter-spacing:0.30em; color:var(--cloud-white); text-transform:uppercase; line-height:1; }
  .wordmark small { display:block; font-family:var(--font); font-weight:400; font-size:8px; letter-spacing:0.24em; color:var(--titanium-grey); margin-top:6px;
    max-height:14px; overflow:hidden; transition:opacity .35s var(--ease), max-height .35s var(--ease), margin-top .35s var(--ease); }
  #topbar.scrolled .wordmark small { opacity:0; max-height:0; margin-top:0; }
  #topbar nav { display:flex; align-items:center; gap:30px; pointer-events:auto; }
  #topbar nav a { font-family:var(--font); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--titanium-grey); text-decoration:none; transition:color .3s var(--ease); }
  #topbar nav a:hover { color:var(--cloud-white); }
  /* animated underline, echoing the kicker line motif */
  #topbar nav a:not(.btn) { position:relative; padding-bottom:4px; }
  #topbar nav a:not(.btn)::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--aviation-blue); transition:right .35s var(--ease); }
  #topbar nav a:not(.btn):hover::after, #topbar nav a.active::after { right:0; }
  .btn { font-family:var(--font); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--cloud-white); text-decoration:none; border:1px solid var(--hairline); padding:11px 18px; background:rgba(58,65,69,0.30); backdrop-filter:blur(3px); transition:border-color .3s var(--ease), background .3s var(--ease); white-space:nowrap; cursor:pointer; display:inline-block; }
  .btn:hover { border-color:var(--aviation-blue); background:rgba(82,117,136,.16); }
  .btn.primary { border-color:rgba(184,183,176,.55); }
  .btn.primary:hover { border-color:var(--lumis-platinum); background:rgba(184,183,176,.12); }
  /* topbar Enquire CTA — legible over bright hero images (esp. mobile, where it is the only nav action);
     overrides the grey nav-link colour and gives a dark frosted base + platinum outline on any background */
  #topbar nav a.btn { color:var(--cloud-white); background:rgba(16,19,21,0.66); -webkit-backdrop-filter:blur(8px) saturate(120%); backdrop-filter:blur(8px) saturate(120%); border-color:rgba(184,183,176,0.5); }
  #topbar nav a.btn:hover { color:var(--cloud-white); background:rgba(16,19,21,0.8); border-color:var(--lumis-platinum); }
  @media (min-width:861px) and (max-width:1040px){ #topbar nav { gap:18px; } }
  /* ---- mobile menu (hamburger + full-screen overlay, built by nav.js) ---- */
  .navtoggle { display:none; }
  .navtoggle span { position:absolute; left:11px; right:11px; height:1.5px; border-radius:2px; background:var(--cloud-white);
    transition:transform .35s var(--ease), opacity .2s var(--ease), top .3s var(--ease); }
  .navtoggle span:nth-child(1){ top:16px; } .navtoggle span:nth-child(2){ top:21.5px; } .navtoggle span:nth-child(3){ top:27px; }
  body.menu-open .navtoggle span:nth-child(1){ top:21.5px; transform:rotate(45deg); }
  body.menu-open .navtoggle span:nth-child(2){ opacity:0; }
  body.menu-open .navtoggle span:nth-child(3){ top:21.5px; transform:rotate(-45deg); }
  body.menu-open { overflow:hidden; }
  body.menu-open #topbar { z-index:30; transform:none; }
  body.menu-open #topbar::before { opacity:0; }
  body.menu-open #privacy-bar { display:none; }   /* the consent bar (z-50) must not cover the menu CTA */
  .mobilemenu { position:fixed; inset:0; z-index:25; background:rgba(16,19,21,0.98); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    display:flex; flex-direction:column; justify-content:center; padding:100px clamp(28px,8vw,60px) 44px; overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s; }
  body.menu-open .mobilemenu { opacity:1; visibility:visible; transform:none; transition:opacity .4s var(--ease), transform .4s var(--ease); }
  .mobilemenu .mm-nav { display:flex; flex-direction:column; }
  .mobilemenu .mm-nav a { display:block; font-family:var(--font); font-weight:300; font-size:clamp(23px,6.2vw,36px); letter-spacing:-0.01em; line-height:1;
    color:var(--cloud-white); text-decoration:none; padding:17px 0; border-bottom:1px solid var(--hairline); transition:color .3s var(--ease); }
  .mobilemenu .mm-nav a.active { color:var(--titanium-grey); }
  .mobilemenu .mm-cta { display:block; margin-top:32px; text-align:center; padding:16px 18px; font-size:12px; }
  .mobilemenu .mm-contact { display:block; margin-top:20px; text-align:center; font-family:var(--font); font-size:12px; letter-spacing:.1em; color:var(--titanium-grey); text-decoration:none; }
  @media (max-width:860px){ #topbar nav { display:none; } .navtoggle { display:block; position:relative; width:44px; height:44px; padding:0; margin:0; border:0; background:none; cursor:pointer; pointer-events:auto; } }
  @media (min-width:861px){ .mobilemenu { display:none; } }
  @media (max-width:560px){ .wordmark { font-size:12px; letter-spacing:0.24em; } .wordmark small { display:none; } #topbar .brand svg { width:40px; } }

  /* ===================== hero (sticky) ===================== */
  #hero-wrap { position:relative; height:620vh; z-index:1; }
  #hero-sticky { position:sticky; top:0; height:100vh; overflow:hidden; background:var(--lumis-black); }
  .scene { position:absolute; inset:0; overflow:hidden; }
  #scene2 { opacity:0; }
  .scene img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform,opacity; }
  #img1 { object-position:38% 40%; } #img2 { object-position:50% 46%; }
  .scrim-left { position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg, rgba(16,19,21,0.90) 0%, rgba(16,19,21,0.62) 26%, rgba(16,19,21,0.28) 44%, rgba(16,19,21,0) 64%); }
  .scrim-bottom { position:absolute; inset:0; pointer-events:none; opacity:0.18;
    background:linear-gradient(0deg, rgba(16,19,21,0.95) 0%, rgba(16,19,21,0.4) 26%, rgba(16,19,21,0) 50%); }
  .vignette { position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(16,19,21,0.55) 0%, rgba(16,19,21,0) 13%), radial-gradient(130% 90% at 52% 42%, transparent 60%, rgba(16,19,21,0.5) 100%); }
  #overlay { position:absolute; inset:0; }
  .stage { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:0 clamp(20px,8vw,140px); opacity:0; will-change:opacity,transform; }
  /* 900px, not 720: the authored <br> breaks assume a measure wide enough for
     their longest segment ("executed with precision." is 876px at the 82px h1
     cap). At 720 those segments re-wrapped and orphaned a word. */
  .stage .inner { max-width:900px; }
  .stage br.m { display:none; }          /* phone-only break, off by default */
  #s4 .inner { max-width:860px; }
  #s4 h2 { font-size:clamp(30px,3.9vw,50px); }
  .nb { white-space:nowrap; }

  .kicker { font-family:var(--font); font-size:12px; letter-spacing:0.28em; text-transform:uppercase; color:var(--signal-ivory); display:flex; align-items:center; gap:14px; margin-bottom:26px; }
  .kicker::before { content:""; width:34px; height:1px; background:var(--aviation-blue); display:inline-block; }
  h1,h2 { font-family:var(--font); font-weight:300; letter-spacing:0; line-height:1.06; color:var(--cloud-white); text-wrap:balance; }
  h1 { font-size:clamp(38px,6.4vw,82px); text-shadow:0 2px 40px rgba(0,0,0,0.4); }
  h2 { font-size:clamp(30px,4.6vw,56px); }
  .stage h2 { text-shadow:0 2px 40px rgba(0,0,0,0.4); }
  .lede { font-size:clamp(15px,1.5vw,19px); line-height:1.6; color:var(--signal-ivory); max-width:34em; margin-top:26px; text-wrap:pretty; }
  .stage .lede { text-shadow:0 1px 24px rgba(0,0,0,0.5); }
  .cta-row { display:flex; gap:14px; margin-top:40px; flex-wrap:wrap; }

  #ticks { position:absolute; right:clamp(18px,3vw,40px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:12px; }
  #ticks .tick { width:34px; height:2px; background:var(--titanium-grey); opacity:.4; transform:scaleX(.6); transform-origin:right center; transition:opacity .4s var(--ease), transform .4s var(--ease), background .4s var(--ease); }
  #ticks .tick.active { opacity:1; transform:scaleX(1); background:var(--aviation-blue); }
  #cue { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); font-family:var(--font); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--signal-ivory); display:flex; align-items:center; gap:10px; transition:opacity .6s var(--ease); text-shadow:0 1px 14px rgba(0,0,0,0.6); }
  #cue .line { width:1px; height:26px; background:linear-gradient(var(--titanium-grey),transparent); animation:cue 2.4s var(--ease) infinite; }
  @keyframes cue { 0%{transform:scaleY(.2);transform-origin:top;opacity:.2;} 40%{transform:scaleY(1);opacity:1;} 100%{transform:scaleY(.2);transform-origin:bottom;opacity:.2;} }
  #readout { position:absolute; bottom:30px; left:clamp(20px,5vw,64px); font-family:var(--font); font-size:10.5px; letter-spacing:.14em; color:var(--titanium-grey); text-shadow:0 1px 14px rgba(0,0,0,0.6); }
  #readout b { color:var(--signal-ivory); font-weight:500; }
  @media (max-width:860px){ #readout,#cue,#ticks { display:none; } }

  /* ===================== content sections ===================== */
  main { position:relative; z-index:2; background:var(--lumis-black); }
  .sect { padding:clamp(84px,13vh,168px) clamp(20px,8vw,140px); border-top:1px solid var(--hairline); }
  .sect-head { max-width:760px; margin-bottom:56px; }
  .sect-head .lede { margin-top:22px; }

  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
  .card { background:var(--lumis-black); padding:34px clamp(24px,3vw,40px); display:flex; flex-direction:column; gap:14px; min-height:210px; transition:background .4s var(--ease); }
  .card:hover { background:var(--hangar-charcoal); }
  .card .idx { font-family:var(--font); font-size:11px; letter-spacing:.18em; color:var(--titanium-grey); }
  .card h3 { font-family:var(--font); font-weight:600; font-size:19px; letter-spacing:.02em; color:var(--cloud-white); }
  .card p { font-size:14.5px; line-height:1.6; color:var(--signal-ivory); }
  /* photo cards (cabin-class) */
  .card.card-photo { padding:0; overflow:hidden; }
  .card-photo .ph { aspect-ratio:3/2; overflow:hidden; background:var(--hangar-charcoal); }
  .card-photo .ph img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.4s var(--ease); }
  .card-photo:hover .ph img { transform:scale(1.05); }
  .card-photo .cbody { padding:24px clamp(20px,2.5vw,30px) 30px; display:flex; flex-direction:column; gap:12px; }
  @media (max-width:720px){ .grid2 { grid-template-columns:1fr; } }
  .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
  @media (max-width:820px){ .grid3 { grid-template-columns:1fr; } }

  /* market / credibility band */
  .market { padding-top:clamp(60px,8vh,104px); padding-bottom:clamp(60px,8vh,104px); }
  .market-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
  .m-col { background:var(--lumis-black); padding:32px clamp(22px,3vw,38px); }
  .m-k { font-family:var(--font); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--signal-ivory); margin-bottom:12px; }
  .m-col p { font-size:14px; line-height:1.6; color:var(--titanium-grey); }
  @media (max-width:760px){ .market-grid { grid-template-columns:1fr; } }

  /* split (FBOs) */
  .split { display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(40px,6vw,90px); align-items:start; }
  @media (max-width:860px){ .split { grid-template-columns:1fr; gap:44px; } }
  .proof { border-top:1px solid var(--hairline); }
  .proof .row { display:grid; grid-template-columns:190px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid var(--hairline); align-items:baseline; }
  .proof .name { font-family:var(--font); font-weight:600; font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--cloud-white); }
  .proof .desc { font-size:14.5px; line-height:1.55; color:var(--signal-ivory); }
  @media (max-width:560px){ .proof .row { grid-template-columns:1fr; gap:8px; } }

  /* process (standards) */
  .process { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
  .process .step { background:var(--lumis-black); padding:30px 24px; display:flex; flex-direction:column; gap:12px; min-height:200px; }
  .process .num { font-family:var(--font); font-size:22px; font-weight:500; color:var(--runway-graphite); }
  .process .step:hover .num { color:var(--aviation-blue); }
  .process h4 { font-family:var(--font); font-weight:600; font-size:15px; letter-spacing:.04em; color:var(--cloud-white); }
  .process p { font-size:13px; line-height:1.55; color:var(--titanium-grey); }
  @media (max-width:900px){ .process { grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .process { grid-template-columns:1fr; } }

  /* enquire */
  #enquire { background:linear-gradient(180deg, var(--lumis-black), #0c0f11); }
  .enq { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:start; }
  @media (max-width:860px){ .enq { grid-template-columns:1fr; gap:44px; } }
  form.enq-form { display:flex; flex-direction:column; gap:16px; }
  .field { display:flex; flex-direction:column; gap:8px; }
  .field label { font-family:var(--font); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--titanium-grey); }
  .field input, .field textarea, .field select { background:var(--hangar-charcoal); border:1px solid var(--hairline); color:var(--cloud-white); font-family:var(--font); font-size:15px; padding:13px 14px; border-radius:0; transition:border-color .3s var(--ease); }
  .field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--aviation-blue); }
  .field.two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:520px){ .field.two { grid-template-columns:1fr; } }
  .form-row { display:flex; align-items:center; gap:18px; margin-top:6px; flex-wrap:wrap; }
  .form-status { font-family:var(--font); font-size:11px; letter-spacing:.06em; color:var(--titanium-grey); }
  .form-status.ok { color:var(--signal-ivory); }
  .form-status.err { color:var(--aviation-blue); }
  .contact-line { font-family:var(--font); font-size:12px; letter-spacing:.1em; color:var(--titanium-grey); line-height:2; }
  .contact-line b { color:var(--signal-ivory); font-weight:500; }

  /* footer */
  footer { border-top:1px solid var(--hairline); padding:clamp(64px,9vh,110px) clamp(20px,8vw,140px) 40px; background:var(--lumis-black); position:relative; z-index:2; }
  .foot-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; align-items:start; }
  @media (max-width:980px){ .foot-top { grid-template-columns:1fr 1fr; gap:40px 32px; } .foot-top .lockup { grid-column:1 / -1; margin-bottom:4px; } }
  @media (max-width:560px){ .foot-top { grid-template-columns:1fr; gap:30px; }
    .foot-col h5 { margin-bottom:10px; }
    .foot-col a { padding:11px 0; }              /* larger, comfortable tap targets (~44px) */
    .foot-social { margin-top:16px; gap:12px; }
    .foot-social a { width:42px; height:42px; }
    .foot-legal { display:block; margin-top:44px; }
    .foot-legal > span { display:block; }
    .foot-legal > span + span { margin-top:14px; }
    .foot-legal .foot-links { display:flex; gap:22px; } }
  .lockup { display:flex; flex-direction:column; gap:16px; }
  .lockup .mark svg { width:120px; height:auto; }
  .lockup .lname { font-family:var(--font); font-weight:300; font-size:20px; letter-spacing:0.34em; text-transform:uppercase; color:var(--cloud-white); }
  .lockup .ltag { font-family:var(--font); font-size:9px; letter-spacing:0.26em; text-transform:uppercase; color:var(--titanium-grey); margin-top:6px; }
  .foot-col h5 { font-family:var(--font); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--titanium-grey); margin-bottom:18px; }
  .foot-col a { display:block; font-size:14px; color:var(--signal-ivory); text-decoration:none; padding:6px 0; transition:color .3s var(--ease); }
  .foot-col a:hover { color:var(--cloud-white); }
  .foot-legal { margin-top:56px; padding-top:24px; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
    font-family:var(--font); font-size:10.5px; letter-spacing:.1em; color:var(--titanium-grey); line-height:1.8; }
  .foot-legal .foot-links { display:flex; gap:22px; flex-wrap:wrap; }
  .foot-legal .foot-links a { color:var(--titanium-grey); text-decoration:none; transition:color .3s var(--ease); }
  .foot-legal .foot-links a:hover { color:var(--cloud-white); }

  /* loader */
  #loader { position:fixed; inset:0; z-index:60; background:var(--lumis-black); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; transition:opacity .9s var(--ease), visibility .9s; animation:loaderFail .8s var(--ease) 5s forwards; }
  @keyframes loaderFail { to { opacity:0; visibility:hidden; pointer-events:none; } }
  #loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
  #loader svg { width:48px; height:auto; opacity:.9; }
  #loader .lw { font-family:var(--font); font-weight:300; font-size:13px; letter-spacing:.34em; text-transform:uppercase; color:var(--cloud-white); }
  #loader .bar { width:150px; height:1px; background:var(--runway-graphite); position:relative; overflow:hidden; }
  #loader .bar::after { content:""; position:absolute; inset:0; width:40%; background:var(--lumis-platinum); animation:load 1.3s var(--ease) infinite; }
  @keyframes load { 0%{transform:translateX(-100%);} 100%{transform:translateX(350%);} }

  .reveal { opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal.in { opacity:1; transform:none; }

/* ============================================================
   Inner pages (Services, For FBOs & Operators)
   ============================================================ */
body.page main { position:relative; z-index:2; background:var(--lumis-black); }
.page-hero { padding:150px clamp(20px,8vw,140px) clamp(52px,7vh,92px); border-bottom:1px solid var(--hairline); }
.page-hero .kicker { color:var(--signal-ivory); }
.page-hero h1 { font-size:clamp(38px,6vw,74px); max-width:17ch; }
.page-hero .lede { max-width:40em; }
.faq { max-width:820px; }
.faq .qa { padding:24px 0; border-bottom:1px solid var(--hairline); }
.faq .qa:first-child { border-top:1px solid var(--hairline); }
.faq .qa h3 { font-family:var(--font); font-weight:400; font-size:clamp(17px,2.1vw,22px); letter-spacing:.01em; color:var(--cloud-white); margin-bottom:11px; }
.faq .qa p { font-size:15px; line-height:1.75; color:var(--signal-ivory); max-width:70ch; }
.faq .qa a { color:var(--aviation-blue); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s var(--ease); }
.faq .qa a:hover { border-bottom-color:var(--aviation-blue); }

.feature { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,74px); align-items:center; }
.feature.rev .fig { order:2; }
.feature .fig { position:relative; overflow:hidden; background:var(--hangar-charcoal); aspect-ratio:4/3; }
.feature .fig img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.4s var(--ease); }
.feature:hover .fig img { transform:scale(1.045); }
.feature .body h3 { font-family:var(--font); font-weight:300; font-size:clamp(24px,3vw,38px); letter-spacing:-0.01em; color:var(--cloud-white); line-height:1.1; }
.feature .body .kicker { margin-bottom:20px; }
.feature .body .lede { margin-top:18px; max-width:none; }
@media (max-width:820px){ .feature { grid-template-columns:1fr; gap:26px; } .feature.rev .fig { order:0; } }

.sublist { margin-top:26px; display:grid; gap:12px; padding:0; }
.sublist li { list-style:none; display:grid; grid-template-columns:9px 1fr; gap:14px; align-items:start; font-size:14.5px; line-height:1.5; color:var(--signal-ivory); }
.sublist li::before { content:""; width:7px; height:7px; margin-top:7px; background:var(--aviation-blue); display:block; }

.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:44px; }
.gallery .g { position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--hangar-charcoal); }
.gallery .g img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.4s var(--ease); }
.gallery .g:hover img { transform:scale(1.06); }
.gallery .g::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:linear-gradient(0deg, rgba(16,19,21,0.82) 0%, rgba(16,19,21,0.42) 16%, rgba(16,19,21,0) 44%); }
  .gallery .g .c { position:absolute; left:14px; bottom:12px; z-index:2; font-family:var(--font); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--cloud-white); text-shadow:0 1px 2px rgba(0,0,0,.9), 0 1px 12px rgba(0,0,0,.55); }
@media (max-width:720px){ .gallery { grid-template-columns:1fr 1fr; } }

.band { position:relative; min-height:min(76vh,640px); display:flex; align-items:flex-end; overflow:hidden; border-bottom:1px solid var(--hairline); }
.band img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.band .bscrim { position:absolute; inset:0; background:
  linear-gradient(0deg, rgba(16,19,21,0.94) 0%, rgba(16,19,21,0.25) 42%, rgba(16,19,21,0.12) 100%),
  linear-gradient(90deg, rgba(16,19,21,0.72), rgba(16,19,21,0) 56%),
  linear-gradient(180deg, rgba(16,19,21,0.5) 0%, transparent 16%); }
.band .binner { position:relative; padding:clamp(40px,8vh,96px) clamp(20px,8vw,140px); max-width:840px; }
.band .binner h1 { font-size:clamp(34px,5.2vw,64px); }
.band.strip { min-height:min(46vh,380px); }
.band .band-line { font-family:var(--font); font-weight:300; font-size:clamp(20px,2.6vw,30px); color:var(--cloud-white); letter-spacing:-0.01em; line-height:1.25; text-shadow:0 2px 30px rgba(0,0,0,0.5); max-width:22ch; }

.ctabar { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
#topbar nav a.active { color:var(--cloud-white); }

/* before / after comparison slider */
.compare { position:relative; overflow:hidden; aspect-ratio:16/9; background:var(--hangar-charcoal); touch-action:none; cursor:ew-resize; user-select:none; }
.compare img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.compare .c-before { clip-path:inset(0 50% 0 0); }
.compare .c-divider { position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:var(--cloud-white); pointer-events:none; box-shadow:0 0 22px rgba(0,0,0,.55); }
.compare .c-grip { position:absolute; top:50%; left:50%; width:40px; height:40px; margin:-20px 0 0 -20px; border:1.5px solid var(--cloud-white); border-radius:50%; background:rgba(16,19,21,.35); backdrop-filter:blur(2px); }
.compare .c-grip::before, .compare .c-grip::after { content:""; position:absolute; top:50%; width:0; height:0; border:5px solid transparent; }
.compare .c-grip::before { left:7px; border-right-color:var(--cloud-white); margin-top:-5px; }
.compare .c-grip::after { right:7px; border-left-color:var(--cloud-white); margin-top:-5px; }
.compare .c-lab { position:absolute; bottom:14px; font-family:var(--font); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--cloud-white); text-shadow:0 1px 8px rgba(0,0,0,.75); pointer-events:none; }
.compare .c-lab-b { left:14px; } .compare .c-lab-a { right:14px; }
.compare-cap { margin-top:14px; font-family:var(--font); font-size:11px; letter-spacing:.08em; color:var(--titanium-grey); }
.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,44px); }
@media (max-width:820px){ .compare-grid { grid-template-columns:1fr; } }

/* ===================== legal / long-form prose ===================== */
.legal { max-width:74ch; }
.legal h2 { font-family:var(--font); font-weight:300; font-size:clamp(22px,2.6vw,32px); letter-spacing:-0.01em; color:var(--cloud-white); line-height:1.15; margin-top:64px; padding-top:30px; border-top:1px solid var(--hairline); }
.legal h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.legal h3 { font-family:var(--font); font-weight:600; font-size:15px; letter-spacing:.06em; color:var(--cloud-white); margin-top:32px; }
.legal p { font-size:15px; line-height:1.75; color:var(--signal-ivory); margin-top:16px; text-wrap:pretty; }
.legal ul { margin-top:18px; display:grid; gap:11px; padding:0; }
.legal li { list-style:none; display:grid; grid-template-columns:7px 1fr; gap:14px; align-items:start; font-size:15px; line-height:1.65; color:var(--signal-ivory); }
.legal li::before { content:""; width:5px; height:5px; margin-top:9px; background:var(--aviation-blue); display:block; }
.legal a { color:var(--cloud-white); text-decoration:none; border-bottom:1px solid var(--titanium-grey); transition:border-color .3s var(--ease); }
.legal a:hover { border-bottom-color:var(--aviation-blue); }
.page-hero .meta { font-family:var(--font); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--titanium-grey); margin-top:30px; }

/* data table (retention / categories) */
.legal .dl { margin-top:24px; border-top:1px solid var(--hairline); }
.legal .dl .row { display:grid; grid-template-columns:210px 1fr; gap:22px; padding:16px 0; border-bottom:1px solid var(--hairline); align-items:baseline; }
.legal .dl .k { font-family:var(--font); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cloud-white); }
.legal .dl .v { font-size:14.5px; line-height:1.6; color:var(--signal-ivory); }
@media (max-width:620px){ .legal .dl .row { grid-template-columns:1fr; gap:6px; } }

/* placeholder for company details the operator must supply before launch */
.todo { color:var(--aviation-blue); font-weight:500; white-space:nowrap; }

/* inline privacy note under the enquiry form */
.form-note { font-size:12px; line-height:1.6; color:var(--titanium-grey); margin-top:16px; max-width:46em; }
.form-note a { color:var(--signal-ivory); text-decoration:none; border-bottom:1px solid var(--hairline); }
.form-note a:hover { border-bottom-color:var(--aviation-blue); }

/* footer social icons */
.foot-social { display:flex; gap:10px; margin-top:20px; }
.foot-social a { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0;
  border:1px solid var(--hairline); color:var(--titanium-grey); text-decoration:none;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.foot-social a:hover { color:var(--cloud-white); border-color:var(--aviation-blue); background:rgba(82,117,136,.14); }
.foot-social a:focus-visible { outline:1px solid var(--aviation-blue); outline-offset:2px; }
.foot-social svg { display:block; }

/* ===================== hero typography on small screens =====================
   Hero line breaks are authored, not left to the browser: text-wrap:balance
   evens the line lengths but splits phrases mid-thought ("the standard your /
   passengers notice"). So every heading break is a real <br>, and <br class="m">
   adds a phone-only break where a line is too long to hold.

   That only works if each authored line actually fits. The stage padding is
   8vw a side, so the usable measure is 84vw, and a segment fits while
      segment-width-at-56px x (font/56) <= 0.84vw.
   Measured longest segments (Liberation Sans, i.e. Arial metrics — real
   Helvetica Neue is narrower, so these are conservative):
      "aircraft beneath the finish."   644px @56  -> h2 max 7.3vw
      "executed with precision."       598px @56  -> h1 max 7.9vw
      "your passengers notice."        595px @56  -> h2 max 7.9vw
   h2 is capped by the 7.3vw case, so 7.0vw is used with margin to spare; h1
   takes 7.5vw. The clamp minimums sit low deliberately — a floor that engages
   on a narrow phone would break the fit and re-wrap the line. */
@media (max-width:640px){
  .stage br.m { display:inline; }        /* phone-only break */
  .stage h1, .stage h2 { line-height:1.12; overflow-wrap:break-word; }
  .stage h1 { font-size:clamp(22px,7.5vw,40px); }
  .stage h2 { font-size:clamp(21px,7.0vw,36px); }
  #s4 h2 { font-size:clamp(20px,6.4vw,32px); }
  .stage .lede { margin-top:20px; }
  .stage .inner { max-width:none; }
}

/* The privacy bar styles itself — see js/privacy-bar.js. Keeping them there
   makes the injected component atomic: it can never render unstyled because a
   browser is holding an older cached copy of this file. */


/* ===================== band hero on small screens =====================
   img/hangar.jpg is a 2560x731 panorama (3.5:1). Overlaying the copy on it
   forces a tall box on a phone, and object-fit:cover then shows only ~17% of
   the frame at 1.14 source px per CSS px — a 2.6x upscale on a 3x screen, so
   the composition is lost and the result is soft. Worse, the copy itself makes
   the band taller, which tightens the crop further (down to ~13%).

   So on phones the image gets its own 3:2 banner and the copy sits beneath it
   on the page ground: 43% of the frame is visible at 2.81 px per CSS px, and
   at 3:2 the scaled height matches the box exactly, so nothing is cropped
   vertically — the full sky-to-apron composition reads, centred on the jet in
   the hangar mouth. The copy also stops fighting a scrim for legibility. */
@media (max-width:640px){
  .band { display:block; min-height:0; }
  .band picture { display:block; }
  .band img { position:static; width:100%; height:auto; aspect-ratio:3/2;
    object-fit:cover; object-position:50% 50%; }
  /* fade the foot of the image into the copy below — the image is exactly
     66.67vw tall (3:2 of a full-bleed width), so the gradient can match it */
  .band .bscrim { inset:0 0 auto 0; height:66.67vw;
    background:linear-gradient(0deg, rgba(16,19,21,0.92) 0%, rgba(16,19,21,0.15) 38%, rgba(16,19,21,0) 62%); }
  .band .binner { padding:22px 20px 8px; max-width:none; }
  .band .binner h1 { font-size:clamp(29px,7.6vw,38px); line-height:1.12; }
  .band .binner .kicker { margin-bottom:18px; }
  .band .binner .lede { margin-top:18px; }
}

/* Tablets and landscape phones keep the overlay, but a 640px-tall band on a
   ~768px viewport still crops the panorama to about a third of its width at
   1.14 source px per CSS px. A shorter band widens the visible slice to ~47%
   and lifts it to ~1.56, without changing the design. */
@media (min-width:641px) and (max-width:860px){
  .band { min-height:min(58vh,470px); }
}

/* ---------- Partners (typographic band) ---------- */
.partners .partner-groups{ display:grid; grid-template-columns:1fr 1fr; gap:44px 56px; margin-top:6px; }
.partners .pgroup h5{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--titanium-grey);
  font-weight:400; margin:0 0 8px; padding-bottom:14px; border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; gap:10px; }
.partners .pgroup h5::before{ content:""; width:20px; height:1px; background:var(--aviation-blue); flex:0 0 auto; }
.partners .plist{ list-style:none; }
.partners .plist a{ display:block; text-decoration:none; padding:18px 0; border-bottom:1px solid var(--hairline); }
.partners .plist li:last-child a{ border-bottom:0; }
.partners .pn{ display:inline-block; position:relative; font-size:23px; font-weight:400; letter-spacing:.015em;
  color:var(--cloud-white); line-height:1.15; transition:color .25s var(--ease); }
.partners .pn::after{ content:""; position:absolute; left:0; bottom:-3px; width:0; height:1px;
  background:var(--aviation-blue); transition:width .3s var(--ease); }
.partners .pn .ext{ font-size:14px; color:var(--titanium-grey); margin-left:9px; vertical-align:2px;
  opacity:.6; transition:opacity .25s var(--ease), transform .25s var(--ease); display:inline-block; }
.partners .pd{ display:block; margin-top:7px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--titanium-grey); }
.partners .plist a:hover .pn::after, .partners .plist a:focus-visible .pn::after{ width:100%; }
.partners .plist a:hover .pn .ext, .partners .plist a:focus-visible .pn .ext{ opacity:1; transform:translate(2px,-2px); }
@media (max-width:720px){ .partners .partner-groups{ grid-template-columns:1fr; gap:34px; } .partners .pn{ font-size:21px; } }

/* App landing (app.html) — phone-screenshot tour */
.appshots{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px); align-items:start; }
.appshot{ display:flex; flex-direction:column; gap:16px; margin:0; }
.appshot .frame{ border-radius:26px; overflow:hidden; border:1px solid var(--hairline);
  background:var(--lumis-black); box-shadow:0 34px 64px -34px rgba(0,0,0,0.85); }
.appshot .frame img{ width:100%; height:auto; display:block; }
.appshot .cap .t{ font-family:var(--font); font-weight:600; font-size:14px; letter-spacing:.02em; color:var(--cloud-white); }
.appshot .cap .d{ font-family:var(--font); font-size:12.5px; line-height:1.55; color:var(--titanium-grey); margin-top:7px; }
@media (max-width:900px){ .appshots{ grid-template-columns:repeat(2,1fr); gap:34px 24px; } }
@media (max-width:480px){ .appshots{ gap:30px 16px; } .appshot .frame{ border-radius:20px; } }

/* Hero atmosphere (index) — a faint drifting haze over the photo, below the
   scrims (DOM order, no z-index). The cinematic cloud DRIFT itself lives in the
   hero JS, folded into the single image transform alongside the scroll-zoom, so
   there is only one transform per element. This layer only lightens: normal
   blend + GPU transform/opacity (no mix-blend-mode), so it stays smooth during
   scroll. Paused when the hero leaves the view. */
.hero-atmos { position:absolute; inset:-10% -14%; pointer-events:none; opacity:0.6;
  background:
    radial-gradient(60% 44% at 30% 34%, rgba(210,216,222,0.10), transparent 70%),
    radial-gradient(52% 46% at 76% 60%, rgba(150,166,178,0.075), transparent 72%),
    radial-gradient(44% 40% at 55% 16%, rgba(226,232,236,0.06), transparent 74%);
  will-change:transform,opacity; }
@keyframes atmosDrift {
  from { transform:translate3d(-2%,-1%,0) scale(1.04); opacity:.42; }
  to   { transform:translate3d(2%,1.2%,0) scale(1.08); opacity:.70; }
}
@media (prefers-reduced-motion:no-preference){
  .hero-atmos { animation:atmosDrift 60s ease-in-out infinite alternate; }
  #hero-sticky.hero-still .hero-atmos { animation-play-state:paused; }
}
@media (max-width:640px){
  .hero-atmos { opacity:.5; inset:-6% -10%; }
}

/* Lenis smooth scroll (index) — classes are added by Lenis JS at runtime, so
   these rules are inert on pages that don't initialise it. */
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior:contain; }
.lenis.lenis-stopped { overflow:hidden; }
.lenis.lenis-smooth iframe { pointer-events:none; }

/* Keyboard focus — a consistent, brand-tinted ring for interactive elements.
   Mouse/touch users are unaffected; :focus-visible only fires for keyboard nav. */
a:focus-visible, button:focus-visible, .btn:focus-visible,
summary:focus-visible, [tabindex]:focus-visible, [type="submit"]:focus-visible {
  outline:2px solid var(--aviation-blue); outline-offset:3px; border-radius:1px;
}