/* ==========================================================================
   Quits Aviation Group corporate theme (Phase 2)
   Aesthetic: bright, confident, conglomerate. Coral-red + deep navy + blue.
   Light surfaces, bold geometric display type. Matches the corporate profile.
   ========================================================================== */
:root{
  --bg:#f6f8fc; --surface:#ffffff; --surface-2:#eef2f9; --text:#101a30;
  --muted:#566178; --border:rgba(16,26,48,.10);
  --accent:#ee3b33; --accent-2:#2547e6; --accent-ink:#ffffff;
  --header-bg:rgba(255,255,255,.86); --nav-link:#101a30;
  --hero-overlay:linear-gradient(100deg,rgba(9,16,34,0.67) 6%,rgba(9,16,34,0.43) 52%,rgba(9,16,34,0.17) 100%);
  --hero-lead:rgba(255,255,255,.9);
  --input-bg:#f4f6fb; --input-bg-focus:#ffffff;
  --cta-bg:linear-gradient(120deg,#101a30,#1c2b4d);
  --footer-bg:#0c1526;
  --shadow-sm:0 2px 12px rgba(16,26,48,.08);
  --shadow:0 24px 60px -24px rgba(16,26,48,.28);
  --shadow-lg:0 50px 100px -34px rgba(16,26,48,.34);
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Sora","Inter",system-ui,sans-serif;
  --header-h:84px;
}
h1,.h1,h2,.h2,.display{font-weight:800;letter-spacing:-.025em}
h3,.h3{font-weight:700}

/* header sits on light hero: keep text readable before scroll on media heroes */
.site-header .brand{color:#fff}
.site-header .nav-links a{color:rgba(255,255,255,.9)}
.site-header .nav-toggle{border-color:rgba(255,255,255,.35)}
.site-header .nav-toggle span{background:#fff}
.site-header.is-scrolled .brand{color:var(--text)}
.site-header.is-scrolled .nav-links a{color:var(--text)}
.site-header.is-scrolled .nav-toggle{border-color:var(--border)}
.site-header.is-scrolled .nav-toggle span{background:var(--text)}
/* pages without a media hero use the solid header from the start */
body.header-solid .site-header{background:var(--header-bg);backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
body.header-solid .site-header .brand{color:var(--text)}
body.header-solid .site-header .nav-links a{color:var(--text)}
body.header-solid .site-header .nav-toggle{border-color:var(--border)}
body.header-solid .site-header .nav-toggle span{background:var(--text)}
@media (max-width:960px){.nav .nav-links a{color:var(--text)!important}}

/* Quits Aviation Group brand logo */
.brand__logo{height:42px;width:auto;max-width:min(340px,calc(100vw - 130px));object-fit:contain;display:block;transition:transform var(--t,.2s ease)}
.brand:hover .brand__logo{transform:translateY(-1px)}
.site-header .brand__logo{filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
.site-header.is-scrolled .brand__logo,
body.header-solid .site-header .brand__logo{filter:none}
html[data-theme="dark"] .site-header.is-scrolled .brand__logo,
html[data-theme="dark"] body.header-solid .site-header .brand__logo{filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
.footer-brand .brand__logo{height:48px;max-width:100%;margin-bottom:6px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
@media (max-width:640px){
  .brand__logo{height:34px;max-width:calc(100vw - 120px)}
  .footer-brand .brand__logo{height:40px}
}

/* media heroes sit on dark photography: force light text inside them */
.hero .display,.hero h1,.hero .h1,
.page-hero--media h1,.page-hero--media .h1{color:#fff}
.hero .hero-stats .stat__num{color:#fff}
.hero .hero-stats .stat__label{color:rgba(255,255,255,.78)}
.hero .btn-outline,.page-hero--media .btn-outline{border-color:rgba(255,255,255,.45);color:#fff}
.hero .btn-outline:hover,.page-hero--media .btn-outline:hover{border-color:#fff;color:#fff}
.page-hero--media .breadcrumb{color:rgba(255,255,255,.75)}
.page-hero--media .lead{color:rgba(255,255,255,.88)}

/* light-theme recolored icons (tick + accordion) to coral */
.ticks li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee3b33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.acc__q::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee3b33' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")}

/* non-media interior page hero: light with navy text */
.page-hero--plain{background:radial-gradient(1100px 520px at 88% -20%,rgba(37,71,230,.10),transparent 60%),
  radial-gradient(760px 420px at -6% 8%,rgba(238,59,51,.08),transparent 60%),var(--surface-2)}
.page-hero--plain .breadcrumb,.page-hero--plain h1,.page-hero--plain .lead{color:var(--text)}
.page-hero--plain .breadcrumb{color:var(--muted)}
.page-hero--plain .lead{color:var(--muted)}

/* The 760px column the heading and lead sit in was sized to stand in the
   left of a photograph. With no photograph behind them it leaves 312px of
   the 1072px the container gives standing empty down the right.

   Same remedy as the home page header: the breadcrumb keeps the full
   width, then the heading takes the left and the lead the right, so the
   row reaches both edges. These headings wrap freely - not one carries a
   manual line break - so the columns can be set as fractions here rather
   than measured off the longest line, as the home page needed.

   Covers Contact as well as the four pages that lost a photograph, since
   it is the same component and the odd page out would be the one left
   hugging the left. */
@media (min-width:1000px){
  .page-hero--plain .page-hero__content{max-width:none;display:grid;align-items:start;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:48px}
  .page-hero--plain .page-hero__content>.breadcrumb{grid-column:1/-1}
  .page-hero--plain .page-hero__content>h1{grid-column:1;grid-row:2}
  /* the heading's line box is tighter than its glyphs, so matching the
     16px it carries would drop the lead's first line 18px below it. This
     lands it ~10px under, which is where the two columns look level. */
  .page-hero--plain .page-hero__content>.lead{grid-column:2;grid-row:2;
    max-width:none;margin-top:16px}
  /* a stats row, where a page carries one, spans beneath both columns the
     way the home page header does */
  .page-hero--plain .page-hero__content>.hero-stats{grid-column:1/-1;grid-row:3}
}

/* ------- Leadership: keeping the Chairman out of the fold ---------------
   The portrait began 645px down the page, so a 900px window opened on its
   top 255px: the crown of his head and nothing else. A portrait cut by the
   fold always shows the scalp first, whatever the framing, so the only
   remedy is to start it below the fold on the window heights that matter.

   The stats row in the header carries most of that, and the rest comes
   from room beneath it and a deeper lead-in to the section. Together they
   put the portrait at 953px, clear of the 780, 880 and 950px viewports a
   maximised window gives on the usual laptop and 1080p screens. It cannot
   be guaranteed for every window: a taller one will always reach further
   down the page, and there is no height at which that stops being true. */
.page-hero--plain .hero-stats{margin-bottom:64px}
@media (min-width:1000px){
  .section--chairman{padding-top:clamp(120px,11vw,170px)}
}

/* group statement band: soft dual-tone glow, echoes the plain page-hero */
.statement-band{padding-block:clamp(32px,4vw,52px);background:radial-gradient(1100px 480px at 88% -30%,rgba(37,71,230,.10),transparent 60%),
  radial-gradient(760px 380px at -6% 4%,rgba(238,59,51,.08),transparent 60%),var(--surface-2)}
html[data-theme="dark"] .statement-band{background:
  radial-gradient(1100px 480px at 88% -30%,rgba(91,120,255,.12),transparent 60%),
  radial-gradient(760px 380px at -6% 4%,rgba(240,72,63,.1),transparent 60%),var(--surface-2)}

/* alternating section shading */
.section--alt{background:var(--surface-2)}
.section--dark{background:var(--footer-bg);color:#eaf0fb;--text:#eaf0fb;--muted:#9fb0c9;--border:rgba(255,255,255,.10);--surface:#132038;--surface-2:#182848}
.section--dark .eyebrow{color:#ff7a6b}
.section--dark .card{background:#132038}

/* the footer is always a dark navy band, in both light and dark theme: so it needs its own fixed light-on-dark palette rather than inheriting
   --text/--muted/--border, which flip to dark-on-light in light mode and
   would otherwise render as low-contrast dark text on the dark footer
   (this override already exists for the Executive Jets and Master Chef
   Supply themes; Quits Group was missing it). */
.site-footer{--text:#eaf0fb;--muted:#9fb0c9;--border:rgba(255,255,255,.10)}

/* CTA band sits on the navy gradient: force light text */
.cta{color:#eaf0fb}
.cta h2{color:#fff}
.cta .lead{color:rgba(255,255,255,.82)}
.cta .btn-outline{border-color:rgba(255,255,255,.45);color:#fff}
.cta .btn-outline:hover{border-color:#fff;color:#fff}
.cta .eyebrow{color:#ff8d7f}
.cta__glow{opacity:.35}

/* sector cards get a coral top-edge on hover */
.sector{position:relative}
.sector::before{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--accent);
  border-radius:4px 4px 0 0;transition:width .5s var(--ease)}
.sector:hover::before{width:100%}

/* red accent number */
.stat__num .suffix{color:var(--accent)}
.text-accent{color:var(--accent)}

/* pill on light */
.pill{background:var(--surface);box-shadow:var(--shadow-sm)}

/* big red quote mark */
.quote{font-family:var(--font-display);font-weight:600;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.4;letter-spacing:-.015em}

/* timeline dot on light */
.tl::before{background:var(--bg)}

/* selection */
::selection{background:var(--accent);color:#fff}

/* value badge */
.kbadge{display:inline-grid;place-items:center;min-width:60px;height:60px;padding:0 14px;border-radius:16px;
  background:linear-gradient(135deg,var(--accent),#c62b28);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.4rem;box-shadow:var(--shadow-sm)}

/* ==========================================================================
   Dark theme ("Night operations"): deep navy, luminous coral.
   Activated via <html data-theme="dark">. Light remains the brand default.
   ========================================================================== */
html[data-theme="dark"]{
  --bg:#0b1424; --surface:#12203a; --surface-2:#182a4c; --text:#e9effb;
  --muted:#9db0cd; --border:rgba(255,255,255,.11);
  --accent:#f0483f; --accent-2:#5b78ff; --accent-ink:#ffffff;
  --header-bg:rgba(10,17,32,.86); --nav-link:#e9effb;
  --input-bg:rgba(255,255,255,.05); --input-bg-focus:rgba(255,255,255,.08);
  --footer-bg:#081120;
  --shadow-sm:0 2px 12px rgba(2,8,23,.3);
  --shadow:0 24px 60px -24px rgba(2,8,23,.55);
  --shadow-lg:0 50px 100px -34px rgba(2,8,23,.6);
}
html[data-theme="dark"] body{background:
  radial-gradient(1100px 520px at 88% -20%,rgba(91,120,255,.09),transparent 60%),
  radial-gradient(760px 420px at -6% 8%,rgba(240,72,63,.07),transparent 60%),
  var(--bg)}
html[data-theme="dark"] .page-hero--plain{background:
  radial-gradient(1100px 520px at 88% -20%,rgba(91,120,255,.12),transparent 60%),
  radial-gradient(760px 420px at -6% 8%,rgba(240,72,63,.1),transparent 60%),var(--surface-2)}
html[data-theme="dark"] .section--dark{background:#060d1a}
html[data-theme="dark"] .pill{background:var(--surface);box-shadow:none}
html[data-theme="dark"] .person{box-shadow:none}
html[data-theme="dark"] .tl::before{background:var(--bg)}
html[data-theme="dark"] ::selection{background:var(--accent);color:#fff}

/* theme toggle icons: light default shows the moon (switch to dark) */
.theme-toggle .i-sun{display:none}
html[data-theme="dark"] .theme-toggle .i-moon{display:none}
html[data-theme="dark"] .theme-toggle .i-sun{display:block}

/* toggle follows the header's on-media / scrolled colour states */
.site-header .theme-toggle{color:#fff;border-color:rgba(255,255,255,.35)}
.site-header.is-scrolled .theme-toggle,
body.header-solid .site-header .theme-toggle{color:var(--text);border-color:var(--border)}
.site-header .theme-toggle:hover{color:var(--accent);border-color:var(--accent)}

/* leadership card */
/* overflow is clipped so the portrait banner can bleed to the card edges
   and still follow the card's corner radius */
.person{--person-pad:28px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--person-pad);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t)}
.person:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
/* Wide portrait banner across the top of the card. Negative margins cancel the
   card's padding so the image runs edge to edge without needing a wrapper
   around the text below it; the bleed is derived from --person-pad so the two
   can never drift apart. max-width:none is required because base.css sets
   img{max-width:100%}, which would otherwise clamp the banner back to the
   content box and leave it short on the right. */
/* The banner is square because every source portrait is taller than it is
   wide: a 4:3 band was too short to hold a head and shoulders, clipping the
   top of some faces and cutting others off at the chin. The portraits are
   pre-cropped to the same square framing, so this ratio matches them exactly
   and object-fit has nothing left to crop. */
.person__photo,.person__avatar{
  width:calc(100% + (var(--person-pad) * 2));max-width:none;
  margin:calc(var(--person-pad) * -1) calc(var(--person-pad) * -1) 22px;
  aspect-ratio:1/1;border-radius:0;display:block}
.person__photo{object-fit:cover;object-position:center;background:var(--surface-2)}
/* members without a photograph keep the initials treatment at the same size */
.person__avatar{display:grid;place-items:center;font-family:var(--font-display);font-weight:800;
  font-size:2.6rem;color:#fff;background:linear-gradient(135deg,var(--accent),#b62521)}
.person h3{font-size:1.15rem}
.person .role{color:var(--accent);font-weight:600;font-size:.9rem;margin:2px 0 12px}
.person p{color:var(--muted);font-size:.94rem}

/* chairman portrait in the spotlight block */
.person-portrait{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);
  box-shadow:var(--shadow);background:var(--surface-2)}
.person-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block;
  aspect-ratio:3/4}

/* ======================================================================
   Careers: vacancy list, filters and empty state
   ====================================================================== */
.careers-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.careers-filter{cursor:pointer;font:inherit;font-size:.86rem;font-weight:600;
  transition:background var(--t),color var(--t),border-color var(--t)}
.careers-filter.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}
.careers-list{display:grid;gap:16px}
.careers-list:empty{display:none}

.job{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px);transition:border-color var(--t),box-shadow var(--t)}
.job:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));box-shadow:var(--shadow-sm)}
.job__head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:space-between}
.job__division{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.job__head h3{margin:0;font-size:1.18rem;letter-spacing:-.01em}
.job__company{margin:4px 0 0;color:var(--muted);font-size:.92rem}
.job__apply{flex:none}
.job__summary{margin-top:14px;color:var(--muted);font-size:.98rem}
.job__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--border)}
.job__meta-item{font-size:.88rem;color:var(--muted)}
.job__meta-item b{color:var(--text);font-weight:600;margin-right:.35em}
.job__details{margin-top:16px}
.job__details summary{cursor:pointer;font-weight:600;font-size:.92rem;color:var(--accent);
  padding:6px 0;list-style:none}
.job__details summary::-webkit-details-marker{display:none}
.job__details summary::after{content:" +";font-weight:700}
.job__details[open] summary::after{content:" −"}
.job__block{margin-top:16px}
.job__block h4{margin-bottom:10px;font-size:.95rem}

.careers-empty{text-align:center;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:clamp(34px,5vw,58px) clamp(22px,4vw,44px)}
.careers-empty__icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 20px;
  border-radius:50%;background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}
.careers-empty__icon svg{width:28px;height:28px}
.careers-empty h3{margin-bottom:12px}
.careers-empty p{color:var(--muted);max-width:56ch;margin-inline:auto}

/* ======================================================================
   Division tabs (Our Divisions page)
   One division shown at a time; JS toggles [hidden] on the panels, so
   with JS off every panel stays visible and the page still reads.
   ====================================================================== */
.division-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding-block:26px}
.division-tabs .pill{text-decoration:none;cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t)}
.division-tabs .pill:hover{transform:translateY(-2px)}
.division-tabs .pill.is-active{background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:var(--shadow-sm)}
.division-tabs .pill:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.division-panel:focus{outline:none}

/* Long-copy divisions: let the media column match the text column's height
   instead of sitting centred and undersized next to it. */
.split.split--media-fill{align-items:stretch}
.split.split--media-fill .split__media{display:flex}
.split.split--media-fill .media-frame{flex:1;min-height:clamp(320px,40vw,540px)}
@media (max-width:860px){
  .split.split--media-fill .media-frame{min-height:clamp(240px,54vw,360px)}
}

/* ======================================================================
   Divisions & companies (merged "Our divisions" + "Our group companies")
   Five division panels, each holding its own operating companies.
   ====================================================================== */
.divisions-grid{display:grid;gap:clamp(18px,2.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.division{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:clamp(24px,2.6vw,30px);position:relative;overflow:hidden;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t)}
.division::before{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--accent);
  transition:width .55s var(--ease)}
.division:hover{transform:translateY(-6px);box-shadow:var(--shadow);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.division:hover::before{width:100%}
.division__head{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:20px;
  border-bottom:1px solid var(--border)}
.division__icon{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.division__icon svg{width:24px;height:24px}
.division__titles{display:flex;flex-direction:column;gap:3px;min-width:0}
.division__num{font-family:var(--font-display);font-weight:800;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);opacity:.75}
.division__head h3{margin:0;font-size:1.22rem;letter-spacing:-.01em}
.division__abbr{font-size:.78rem;color:var(--muted);font-weight:500}

/* company entries inside a division */
.division__companies{display:grid;gap:14px;flex:1;align-content:start}
.dco{background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-sm);
  padding:16px 18px;display:flex;flex-direction:column;gap:7px;transition:border-color var(--t),background var(--t)}
.dco:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.dco h4{margin:0;font-size:1rem;line-height:1.35}
.dco p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.dco__cta{margin-top:4px;display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.85rem;
  color:var(--accent);text-decoration:none;width:fit-content}
.dco__cta svg{width:.95em;height:.95em;transition:transform .3s var(--ease)}
.dco__cta:hover svg{transform:translate(3px,-3px)}
.dco__soon{margin-top:4px;display:inline-flex;align-items:center;gap:.45rem;width:fit-content;
  font-size:.78rem;font-weight:600;color:var(--muted);background:var(--surface);
  border:1px solid var(--border);border-radius:999px;padding:.34em .8em}
.dco__soon svg{width:.9em;height:.9em}
/* companies without their own site still get a destination (their division
   profile) alongside the note that a website is on the way */
.dco__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:6px}
.dco__actions .dco__cta,.dco__actions .dco__soon{margin-top:0}
.dco__actions .dco__cta svg{transition:transform .3s var(--ease)}
@media (max-width:520px){.divisions-grid{grid-template-columns:1fr}}

/* Full-width divisions section head & balanced grid */
#divisions .section-head{max-width:100%;margin-bottom:clamp(34px,4.5vw,52px)}
#divisions .section-head h2{max-width:100%;margin:8px 0 16px}
#divisions .section-head .lead{max-width:100%;font-size:clamp(1.08rem,1.35vw,1.24rem);line-height:1.65;margin:0}
#divisions .section-head p{max-width:100%}
.foundation .divisions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,26px)}
@media (max-width:960px){.foundation .divisions-grid{grid-template-columns:1fr}}
@media (min-width:1024px){
  #divisions .divisions-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(20px,2.4vw,28px)}
  #divisions .divisions-grid > .division:nth-child(1),
  #divisions .divisions-grid > .division:nth-child(2),
  #divisions .divisions-grid > .division:nth-child(3){grid-column:span 2}
  #divisions .divisions-grid > .division:nth-child(4),
  #divisions .divisions-grid > .division:nth-child(5){grid-column:span 3}
}

/* ======================================================================
   Milestones timeline: progressive reveal ("Our Journey")
   ====================================================================== */
.timeline--animated{position:relative}
/* the connecting rail draws itself downward once the timeline scrolls in */
.timeline--animated::after{content:"";position:absolute;left:8px;top:6px;width:2px;height:0;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent));
  transition:height 1.6s var(--ease);z-index:0}
.timeline--animated.is-in::after{height:calc(100% - 12px)}
.timeline--animated .tl{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.timeline--animated.is-in .tl{opacity:1;transform:none}
.timeline--animated.is-in .tl:nth-child(1){transition-delay:.15s}
.timeline--animated.is-in .tl:nth-child(2){transition-delay:.35s}
.timeline--animated.is-in .tl:nth-child(3){transition-delay:.55s}
.timeline--animated.is-in .tl:nth-child(4){transition-delay:.75s}
.timeline--animated.is-in .tl:nth-child(5){transition-delay:.95s}
.timeline--animated.is-in .tl:nth-child(6){transition-delay:1.15s}
.timeline--animated .tl::before{z-index:1;transition:transform .5s var(--ease),background .5s var(--ease)}
.timeline--animated.is-in .tl:hover::before{transform:scale(1.18);background:var(--accent)}
/* the closing "Today" node reads as the live state of the group */
.tl--now::before{background:var(--accent)!important;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent)}
.tl--now .tl__year{letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){
  .timeline--animated::after{transition:none;height:calc(100% - 12px)}
  .timeline--animated .tl{opacity:1;transform:none;transition:none}
}

/* ======================================================================
   Founder & Chairman feature block
   ====================================================================== */
.founder{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(26px,4vw,56px);align-items:center}
.founder__portrait{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:22px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(28px,3vw,38px)}
.founder__header{display:flex;align-items:center;gap:20px;width:100%}
.founder__avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:center 15%;
  border:3px solid var(--border);box-shadow:var(--shadow-sm);flex-shrink:0;display:block;transition:border-color var(--t)}
.founder__portrait:hover .founder__avatar{border-color:var(--accent)}
.founder__name{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.015em;margin:0}
.founder__role{color:var(--accent);font-weight:600;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;margin:6px 0 0}
.founder__facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:4px}
.founder__fact{background:var(--surface);border-radius:var(--r-sm);padding:14px 16px;box-shadow:var(--shadow-sm)}
.founder__fact b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--text)}
.founder__fact span{display:block;margin-top:3px;color:var(--muted);font-size:.8rem;line-height:1.4}
@media (max-width:900px){
  .founder{grid-template-columns:1fr}
  .founder__facts{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){.founder__facts{grid-template-columns:1fr}}

/* ------- Home page header, the 5N-FZE photograph ------------------------
   The photograph is 2.07:1 and its subject runs the full width: the
   registration sits on the engine nacelle at 27% of the width and the nose
   reaches almost to the right edge. It is shown at its own scale, whole,
   at every width.

   It did not used to be. The header was a full-height box with the copy
   laid over the picture, and the height of that box is set by the copy,
   not by the viewport: heading, lead, buttons and four stats stand 947px
   tall at every desktop width, taller than the 92vh the box asks for. The
   picture was then scaled up to cover it and the sides were cut off - 35%
   of the width gone at 1280, 30% at 1366, 27% at 1440, 18% at 1600.

   No crop or object-position setting recovers that, because the mismatch
   is the shape of the box rather than the framing. Nor can the two share
   the space: at 1440 the picture's own ratio gives a box 696px tall, and
   the copy needs 756px even with the stats row taken out of it.

   So the picture takes its own ratio as a band across the top, as it
   already did on phones, and the copy sits beneath it on the navy. The
   whole frame reads at its own scale - nose, registration, terminal and
   all - and nothing is enlarged below 1804px, which is the width of the
   file. The overlay goes with it: it existed to hold text off the picture,
   and there is no longer any text on the picture. The 6% zoom goes too,
   since it crops for its first 18 seconds, which is when a header is read.

   The cost is that the copy now starts below the fold on a short screen,
   which is the trade the client asked for: at 1440x900 the header bar and
   the whole picture fill 773px and the heading begins at 857px, so the
   eyebrow shows above the fold and the heading is cut by it. */
.hero--fze{display:block;min-height:0;overflow:visible;
  padding-block:var(--header-h,84px) 0;background:var(--cta-bg)}
.hero--fze .hero__media{position:relative;inset:auto;z-index:0;
  width:100%;aspect-ratio:1804/872}
.hero--fze .hero__media img{transform:none;animation:none;object-position:50% 50%}
.hero--fze .hero__overlay{display:none}
/* the cue is pinned to the bottom of the hero box, which is now the bottom
   of the copy rather than the bottom of the picture */
.hero--fze .hero__scroll{display:none}
.hero--fze .container{padding-block:clamp(30px,2.6vw,44px) clamp(54px,4.4vw,76px)}
/* a 1804px file stretched across a 2560px monitor is a 42% enlargement and
   it shows. Full width to 1920, where the enlargement is 6% and invisible,
   then centred on the navy rather than blown up further. */
@media (min-width:1921px){
  .hero--fze .hero__media{max-width:1920px;margin-inline:auto}
}
/* ------- The copy beneath the picture -----------------------------------
   Off the photograph, the copy is no longer standing in front of an
   aeroplane, and the 760px column that used to sit in the left of the
   frame just leaves a hole: 312px of the 1072px the container gives, most
   of a third of the line, empty down the right of every row.

   So it runs as two columns. The heading keeps the left, the lead and the
   buttons take the right, and the eyebrow and the stats span the full
   width top and bottom, so each row reaches both edges. The heading
   carries manual line breaks and must not wrap, so its column is sized to
   its longest line, "Endless altitude.", rather than to a fraction that
   might fall short of it.

   That line is 656px at the 80px the display clamp settles on, which is
   too much to take out of 1072: it left the lead 358px, a 32 character
   measure running to eight lines against a three line heading, which
   reads worse than the empty space did. The heading is set at 4rem here
   instead, where the long line comes to 525px and the lead gets about 45
   characters - near enough the 45 to 75 a paragraph wants, and close to
   the heading in depth so the two columns end together.

   Only above 1000px, which covers the 1024 laptop. Below that the two
   columns leave the lead under 40 characters, and the stacked order that
   the phone layout already uses is the better read. */
@media (min-width:1000px){
  .hero--fze .hero__content{max-width:none;display:grid;align-items:start;
    grid-template-columns:minmax(0,max-content) minmax(0,1fr);
    column-gap:48px}
  .hero--fze .hero__content>.display{font-size:clamp(2.6rem,5.1vw,4rem)}
  .hero--fze .hero__content>.eyebrow{grid-column:1/-1}
  .hero--fze .hero__content>.display{grid-column:1;grid-row:2/4}
  /* 16px, not the 22px the lead carries elsewhere: the heading's line box
     is tighter than its glyphs at line-height 1.02, so equal margins drop
     the lead's first line 24px below the heading's. This lands it ~10px
     under, which is where it looks level. */
  .hero--fze .hero__content>.lead{grid-column:2;grid-row:2;max-width:none;margin-top:16px}
  .hero--fze .hero__content>.btn-row{grid-column:2;grid-row:3}
  .hero--fze .hero__content>.hero-stats{grid-column:1/-1;grid-row:4}
  /* the eyebrow is one short line on a row of its own, so it carries the
     same rule that already leads into it back out to the right edge */
  .hero--fze .hero__content>.eyebrow::after{content:"";flex:1;height:1.5px;
    background:linear-gradient(90deg,currentColor,transparent);opacity:.4}
}

@media (max-width:899px){
  /* the markup pins four stat columns inline at every width, which leaves
     each one about 63px wide on a phone; two is the most that reads */
  .hero--fze .hero-stats{grid-template-columns:repeat(2,1fr)!important;
    gap:24px 18px!important;margin-top:32px;padding-top:26px}
}

/* ------- Division 01, Aviation ------------------------------------------
   The frame used to stretch to match the text column, about 500x1011 at
   desktop, which showed a third of a 3:2 photograph and cut the aircraft
   in half whichever third was chosen. The aircraft spans 96% of the frame,
   so nothing short of the full width holds it: a 4:3 frame still shows
   only 89%, and 5:4 just 83%.

   So the frame takes the photograph's own 3:2 instead and crops nothing.
   That leaves it 333px tall against 1011px of copy, and in two columns
   that is 678px of empty column below the picture. Making it stick only
   moved the emptiness around; the column was still two thirds bare.

   The copy wraps round the picture instead. The panel stops being a grid
   above 861px, the picture floats to the top right at 46%, and the eyebrow,
   heading and buttons sit beside it while the paragraphs run on beneath
   it at full width. Nothing is left standing empty, and the photograph is
   still shown whole. It needs the picture ahead of the copy in the source
   for the text to flow round it, so the stacked layout below 861px puts
   the order back with `order`, keeping the copy first as it was. */
.split.split--media-fill .split__media--float{display:block}
.split.split--media-fill .media-frame--aviation{flex:none;min-height:0;aspect-ratio:3/2}
.media-frame--aviation img{object-position:50% 50%}
@media (min-width:861px){
  .split.split--media-fill.split--media-float{display:block}
  .split--media-float .split__media--float{float:right;width:46%;
    margin:6px 0 30px clamp(32px,4vw,56px)}
  /* The lines that clear the picture would otherwise run the full 1072px,
     which measured 117 characters: past the 45 to 75 a paragraph wants,
     and worse reading than the gap this replaced. Capping the copy at
     680px holds them near 75 while still reaching beyond the picture's
     left edge, so the text goes on wrapping round it. The stats keep the
     full width, which closes the panel on a flush bottom edge. */
  .split--media-float>div:not(.split__media) :is(h2,p){max-width:680px}
}
@media (max-width:860px){
  .split--media-float .split__media--float{order:1}
}