/* Self-hosted Archivo + Inter (latin, latin-ext). Replaces the Google Fonts
stylesheet: no third-party request, no IP disclosure, no render-blocking
round-trip to fonts.googleapis.com. unicode-range means latin-ext is only
fetched when a page actually uses those characters. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/archivo-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/archivo-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/archivo-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/archivo-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/archivo-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/archivo-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/archivo-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/archivo-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/inter-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/inter-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ============================================================
Marathon Airlines — Commercial (ACMI) website
Shared design system
Colours: navy #0F1A2F · brand #365FA7 · accent #2C6CDD (from logo)
Type: Archivo (display sans) · Inter (body/UI)
Fonts are loaded via a single in each page's (Fraunces + Inter).
============================================================ */
:root{
--navy:#0F1A2F;
--navy-2:#172845;
--navy-3:#0A1222;
--ink:#101820;
--sky:#365FA7;
--sky-2:#6BA0EC;
--gold:#2C6CDD;
--gold-2:#4E86E6;
--white:#FFFFFF;
--mist:#AFC3D6;
--panel:#F4F7FC;
/* Body copy set over photography. Brighter than --mist so the hero scrims
can sit lighter without dropping the paragraph below 4.5:1. */
--mist-bright:#DCE8F5;
--line:#E4EAF4;
--slate:#5A6B7C;
--brand:#365FA7;
--accent:#2C6CDD;
--accent-2:#4E86E6;
--maxw:1200px;
--radius:18px;
--radius-sm:12px;
--shadow-card:0 24px 50px rgba(10,29,51,.10);
--shadow-nav:0 8px 30px rgba(0,0,0,.25);
--font:'Inter','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
--display:'Archivo','Inter','Segoe UI',system-ui,sans-serif;
--ease:cubic-bezier(.2,.7,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
font-family:var(--font);
color:var(--ink);
background:var(--white);
line-height:1.6;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--sky)}
:focus-visible{outline:3px solid var(--sky-2);outline-offset:3px;border-radius:4px}
/* Skip link for accessibility */
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#fff;padding:.7rem 1.2rem;
border-radius:0 0 8px 0;z-index:200;font-weight:700}
.skip:focus{left:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:4vw}
/* ---------- Type ----------
Display headlines use Fraunces (editorial serif) for warmth + gravitas;
body, UI, eyebrows and h3/h4 stay Inter for a clean modern contrast. */
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.01em;color:var(--navy)}
h1,h2{font-family:var(--display);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
h1 em,h2 em{font-style:normal}
h1{font-size:clamp(2.5rem,5.6vw,4.4rem);line-height:1.04;font-weight:700}
h2{font-size:clamp(1.95rem,3.5vw,2.75rem);font-weight:600;line-height:1.14;max-width:34ch}
h3,h4{text-wrap:balance}
h3{font-size:1.2rem;font-weight:700}
/* Body copy gets `pretty`, not `balance`. They solve different problems:
`balance` evens every line and suits short blocks (it's on the headings
above, and caps out at a handful of lines), while `pretty` leaves the rag
alone except to stop a paragraph stranding a short final line — the
"three full lines and a runt fourth" case. It also makes the browser
weigh break points rather than taking the first that fits, which clears
up some of the dangling short words. Ignored safely where unsupported. */
p,li,figcaption,dd,.lead{text-wrap:pretty}
.eyebrow,.k{display:inline-flex;align-items:center;gap:.6rem;color:var(--gold);font-weight:700;
font-size:.76rem;letter-spacing:.22em;text-transform:uppercase}
.k{margin-bottom:1.1rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);display:inline-block}
.lead{color:var(--slate);font-size:1.1rem;line-height:1.72;max-width:60ch;margin-top:1.15rem}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font:inherit;font-weight:700;font-size:1rem;
padding:.95rem 2.05rem;border-radius:100px;transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s;
cursor:pointer;border:1.5px solid transparent;background:transparent;appearance:none;-webkit-appearance:none}
.btn-primary{background:var(--gold);color:#fff;box-shadow:0 10px 30px rgba(44,108,221,.32)}
.btn-primary:hover{background:var(--gold-2);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{border-color:var(--sky-2);color:var(--sky-2)}
.btn-outline{border-color:var(--sky);color:var(--sky)}
.btn-outline:hover{background:var(--sky);color:#fff}
.link-arrow{display:inline-flex;align-items:center;gap:.35rem;color:var(--sky);font-weight:700;
text-decoration:none;font-size:.92rem}
.link-arrow:hover{gap:.6rem}
/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;
gap:1rem;padding:1.35rem clamp(1rem,4vw,2.4rem);max-width:100vw;
transition:background .35s var(--ease),padding .35s var(--ease),box-shadow .35s var(--ease)}
/* readability scrim over bright hero skies at top; fades once solid bar appears */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(10,18,34,.72) 0%,rgba(10,18,34,.28) 60%,rgba(10,18,34,0) 100%);
opacity:1;transition:opacity .35s var(--ease)}
.nav.scrolled::before{opacity:0}
.nav.scrolled{background:rgba(15,26,47,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
padding:.8rem clamp(1rem,4vw,2.4rem);box-shadow:var(--shadow-nav)}
.nav__logo{display:inline-flex;align-items:center;flex:0 0 auto}
.nav__logo img{height:54px;width:auto;filter:drop-shadow(0 1px 8px rgba(0,0,0,.25))}
.nav__links{display:flex;gap:.15rem;align-items:center;flex-wrap:nowrap;min-width:0}
.nav__links a{color:#E7F0F9;text-decoration:none;font-size:.9rem;font-weight:600;letter-spacing:.01em;
white-space:nowrap;padding:.5rem .72rem;border-radius:9px;transition:color .2s,background .2s}
.nav__links a:hover{color:#fff;background:rgba(255,255,255,.1)}
.nav__links a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.07);box-shadow:inset 0 -2px 0 var(--gold)}
/* CTA — needs 2-class specificity to beat `.nav__links a`; sits clear of the edge, never clipped */
.nav .nav__cta{flex:0 0 auto;background:var(--gold);color:#fff !important;margin-left:.55rem;
padding:.62rem 1.4rem;border-radius:100px;font-weight:700;white-space:nowrap;box-shadow:0 8px 20px rgba(44,108,221,.32);
transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.nav .nav__cta:hover{background:var(--gold-2);color:#fff !important;transform:translateY(-1px);
box-shadow:0 11px 26px rgba(44,108,221,.45)}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem;flex:0 0 auto;border-radius:8px}
.nav__toggle:hover{background:rgba(255,255,255,.1)}
.nav__toggle span{display:block;width:26px;height:2.5px;background:#fff;border-radius:3px;margin:5px 0;transition:.3s var(--ease)}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
/* Mobile drawer */
.nav__drawer{position:fixed;inset:0;z-index:99;background:rgba(10,18,34,.98);backdrop-filter:blur(6px);
display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding:5rem 8vw;
transform:translateX(100%);transition:transform .4s var(--ease);visibility:hidden}
.nav__drawer.open{transform:none;visibility:visible}
.nav__drawer a{color:#EAF2FB;text-decoration:none;font-size:1.25rem;font-weight:700;padding:.75rem 0;
border-bottom:1px solid rgba(255,255,255,.08)}
.nav__drawer a:hover{color:var(--sky-2)}
.nav__drawer .nav__cta{margin-top:1.5rem;text-align:center;border-bottom:0;font-size:1.05rem}
/* ---------- Hero ---------- */
/* Was a full 100svh, which left the headline floating in a lot of empty
space above and below on tall screens. */
.hero{position:relative;min-height:86svh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.hero__scrim{position:absolute;inset:0;z-index:1;background:
linear-gradient(100deg,rgba(4,15,28,.88) 0%,rgba(8,24,44,.82) 38%,rgba(10,32,58,.58) 65%,rgba(12,40,72,.32) 100%)}
.hero__glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:
radial-gradient(ellipse 60% 40% at 78% 18%,rgba(30,155,233,.26),transparent 60%),
radial-gradient(ellipse 50% 35% at 12% 88%,rgba(95,194,255,.1),transparent 60%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:8rem;padding-bottom:3rem}
.hero h1{color:#fff;max-width:18ch;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--gold);font-weight:700}
.hero__sub{color:var(--mist);font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:58ch;margin:1.6rem 0 2.4rem;line-height:1.7}
.hero__ctas{display:flex;gap:1rem;flex-wrap:wrap}
/* Credibility bar */
.credbar{position:relative;z-index:2;margin-top:4rem;background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-radius:var(--radius);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.credbar>div{padding:1.35rem 1.5rem;border-right:1px solid rgba(255,255,255,.1)}
.credbar>div:last-child{border-right:none}
.credbar b{display:block;color:#fff;font-size:1rem;margin-bottom:.3rem;text-wrap:balance}
.credbar span{color:var(--mist);font-size:.8rem;line-height:1.45}
/* ---------- Sections ---------- */
section{padding:clamp(4rem,7vw,6.5rem) 0}
.section--panel{background:var(--panel)}
.section--navy{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff}
.section--navy h2{color:#fff}
.section--navy .lead{color:var(--mist)}
.section__head{max-width:var(--maxw)}
/* Stats */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem}
.stat{border-left:3px solid var(--sky);padding-left:1.4rem}
.stat .num{font-size:clamp(2.1rem,3.8vw,3.1rem);font-weight:800;color:var(--navy);
font-variant-numeric:tabular-nums;line-height:1}
.stat .lab{color:var(--slate);font-size:.95rem;margin-top:.5rem;line-height:1.5}
/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem}
/* A 4-card section (fits one line, narrower columns) instead of the default 3 —
used by /clients/ and /acmi-leasing/, all four items in a row rather than a
3+1 split. Falls back to the same 2-col/1-col rules as .cards below. */
.cards--4{grid-template-columns:repeat(4,1fr)}
/* A 2x2 grid — used by /services/ "When capacity matters": four text-only
cards read as cramped/uneven at 4-narrow-columns width once one heading
wraps to 3 lines, so this gives each card real breathing room instead. */
.cards--2{grid-template-columns:repeat(2,1fr)}
/* Safety net for any OTHER .cards section that ends up with a stray 4th/7th/10th
item instead of being explicitly given .cards--4: center it under the middle
column rather than stranding it flush-left. Desktop (3-col) only. */
@media(min-width:901px){
.cards:not(.cards--4):not(.cards--2)>.card:last-child:nth-child(3n+1){grid-column:2}
}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2.1rem;
transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;position:relative;
display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);border-color:var(--sky)}
.card .ic{width:56px;height:56px;border-radius:15px;
background:linear-gradient(160deg,rgba(14,111,196,.09),rgba(95,178,255,.15));
border:1px solid rgba(14,111,196,.15);
display:flex;align-items:center;justify-content:center;margin-bottom:1.4rem;color:var(--sky);
font-size:1.15rem;font-weight:700}
.card .ic svg{width:27px;height:27px;stroke:currentColor;stroke-width:1.6;fill:none;
stroke-linecap:round;stroke-linejoin:round}
/* No-icon variant: a colored left-border accent carries the card instead of a
decorative badge — bold typography does the rest. */
.card--accent{border-left:3px solid var(--gold);padding-left:1.9rem}
.card--accent:hover{border-left-color:var(--gold)}
.card h3{margin-bottom:.6rem}
.card p{color:var(--slate);font-size:.96rem;line-height:1.65}
/* Pins the CTA to a shared baseline across cards in the same row, regardless
of how many lines the heading/body above it wrap to (auto-margin eats the
slack in the flex column; .card is display:flex now). */
.card .link-arrow:last-child{margin-top:auto;padding-top:1.15rem}
/* Fleet */
.fleetgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:3rem}
.tail{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);
padding:1.7rem;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.tail:hover{background:rgba(30,155,233,.12);border-color:var(--sky);transform:translateY(-4px)}
.tail .plane{height:52px;margin-bottom:1rem;opacity:.92}
.tail small{color:var(--sky-2);font-weight:700;letter-spacing:.05em;font-size:.72rem;text-transform:uppercase}
.tail b{font-size:1.3rem;display:block;color:#fff;margin:.35rem 0 .1rem}
.tail p{color:var(--mist);font-size:.86rem;margin-top:.5rem;line-height:1.5}
.tail--future{border-style:dashed;border-color:rgba(44,108,221,.5);background:rgba(44,108,221,.05)}
.tail--future small{color:var(--gold)}
/* Grouped-by-type fleet cards */
.fleetgrid--types{grid-template-columns:1fr 1fr;gap:1.6rem}
.fleetgrid--types .tail{padding:2.1rem}
.tail__regs{display:flex;flex-wrap:wrap;gap:.5rem;margin:.55rem 0 .3rem}
.tail__regs span{display:inline-block;font-weight:800;font-size:1.02rem;color:#fff;letter-spacing:.02em;
background:rgba(95,178,255,.14);border:1px solid rgba(95,178,255,.38);border-radius:8px;padding:.3rem .75rem}
/* Process steps — a flight path above the row whose plane position tracks
scroll progress through .steps-group (set as an inline "left" percentage
by the [data-flight-steps] handler in site.js), with each step's marker
lighting up once the plane has passed its column. Replaces a bare
"01 02 03 04" and a one-shot fly-once animation that just stopped dead. */
.steps-group{margin-top:2.6rem}
.steps__flightpath{position:relative;height:32px;overflow:hidden}
.steps__flightpath::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;
transform:translateY(-50%);
background:repeating-linear-gradient(to right,var(--line) 0 8px,transparent 8px 16px)}
/* Solid track behind the plane, growing to match — reinforces "distance
covered" alongside the plane's own position so progress reads at a glance
even before you consciously track the icon. */
.steps__flightpath__fill{position:absolute;left:0;top:50%;height:2px;width:0;
transform:translateY(-50%);background:var(--gold);
transition:width .5s var(--ease)}
.steps__plane{position:absolute;top:50%;left:4%;width:30px;height:30px;color:var(--gold);
transform:translate(-50%,-50%) rotate(90deg);
filter:drop-shadow(0 3px 8px rgba(44,108,221,.55));
transition:left .5s var(--ease)}
.steps__plane svg{width:100%;height:100%;fill:currentColor}
html.js .steps__plane{animation:planeHover 2.6s ease-in-out infinite}
@keyframes planeHover{
0%,100%{transform:translate(-50%,-50%) rotate(90deg) translateY(0)}
50%{transform:translate(-50%,-50%) rotate(90deg) translateY(-4px)}
}
@media (prefers-reduced-motion:reduce){
.steps__plane{left:96% !important;transition:none;animation:none;
transform:translate(-50%,-50%) rotate(90deg)}
.steps__flightpath__fill{transition:none;width:100%}
}
/* The plane's left % is measured against a single 4-column row — once .steps
wraps to 2 or 1 columns the horizontal metaphor no longer lines up with the
cards underneath it, so hide the track rather than show it pointing at the
wrong card. The step numbers still light up on their own as you scroll. */
@media(max-width:900px){.steps__flightpath{display:none}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:1.4rem}
.step{position:relative;padding:1.8rem;border-radius:var(--radius-sm);background:var(--panel);border:1px solid var(--line)}
.step__num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
border-radius:50%;border:2px solid var(--sky);color:var(--sky);background:#fff;
font-weight:800;font-size:.95rem;margin-bottom:1rem;
transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),
box-shadow .4s var(--ease)}
.step.is-active .step__num{background:var(--gold);border-color:var(--gold);color:#fff;
box-shadow:0 0 0 5px rgba(44,108,221,.14)}
.step b{display:block;margin-bottom:.4rem;font-size:1.02rem;color:var(--navy);text-wrap:balance}
.step p{color:var(--slate);font-size:.88rem;line-height:1.55}
/* Credentials / IOSA */
.creds{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.creds__media{display:flex;gap:1.8rem;align-items:center;justify-content:center;flex-wrap:wrap}
.cert{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
box-shadow:0 14px 34px rgba(10,29,51,.14);max-width:300px;background:#fff}
.cert img{width:100%;height:auto}
.badge{width:132px;height:132px;flex:0 0 auto}
.creds__links{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.4rem}
/* IATA Client Recognition stamps — see IATA-Guidelines_Client-Recognition-Stamps.pdf (Apr 2021).
Fixed artwork: NEVER recolour, filter, rotate, stretch or add shadow/glow. Keep the built-in
transparent protection zone clear. Light backgrounds only (the stamps are IATA blue #1E32FA).
Authorized on CORPORATE pages only — never on product pages (ACMI / services / charter).
Must sit smaller than the Marathon logo (guideline: roughly 50% of it). */
.stamps{display:flex;gap:2rem;align-items:center;flex-wrap:wrap;margin:1.8rem 0 0}
.stamps img{width:104px;height:104px;flex:0 0 auto;display:block}
/* Non-IATA membership marks (e.g. ERA) are wordmarks, not square stamps: keep their
aspect ratio and sit them optically level with the 104px IATA stamps. */
.stamps img.stamp--wide{width:auto;height:56px}
@media (max-width:760px){.stamps{gap:1.4rem;justify-content:center}.stamps img{width:88px;height:88px}
.stamps img.stamp--wide{width:auto;height:46px}}
/* Homepage credentials plaque */
.credpanel{display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,5vw,4rem);align-items:center;
background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
padding:clamp(2rem,4vw,3.2rem)}
.credpanel h2{font-size:clamp(1.5rem,2.6vw,1.95rem)}
.credpanel p{color:var(--slate);line-height:1.7;margin-top:1rem;max-width:56ch}
.credpanel__links{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.5rem}
.credpanel .stamps{margin:0;gap:1.6rem;flex-wrap:nowrap}
.credpanel .stamps img{width:120px;height:120px}
.credpanel .stamps img.stamp--wide{width:auto;height:64px}
/* Stacks a little earlier than it used to: three stamps (two square + the ERA
wordmark) no longer fit beside the text on mid-width screens. */
@media (max-width:980px){
.credpanel{grid-template-columns:1fr;gap:2rem}
.credpanel .stamps{justify-content:flex-start}
.credpanel .stamps img{width:96px;height:96px}
.credpanel .stamps img.stamp--wide{width:auto;height:56px}
}
.note{font-size:.82rem;color:var(--slate);margin-top:1.1rem;line-height:1.5}
/* Banner — real SX-ASK photo with readable navy overlay */
.band{position:relative;color:#fff;text-align:left;display:flex;align-items:center;
overflow:hidden;background-color:#061222;
/* Near-opaque under the text column, clearing by 62% so the aircraft still reads.
A white fuselage crosses this band, and the old .92->.6 ramp left white type
sitting on white metal. The photo layer is sized "contain" and packed to the
right — "cover" was cropping into the nose/tail on most viewport widths, and
letterboxing (filled by background-color above) beats cutting the aircraft off. */
background-image:linear-gradient(90deg,rgba(6,18,34,.9) 0%,rgba(6,18,34,.84) 36%,rgba(6,18,34,.68) 56%,rgba(6,18,34,.3) 78%,rgba(6,18,34,.06) 100%),
url('/assets/img/band-takeoff.jpg');
background-image:linear-gradient(90deg,rgba(6,18,34,.9) 0%,rgba(6,18,34,.84) 36%,rgba(6,18,34,.68) 56%,rgba(6,18,34,.3) 78%,rgba(6,18,34,.06) 100%),
image-set(url('/assets/img/band-takeoff.webp') type('image/webp'), url('/assets/img/band-takeoff.jpg') type('image/jpeg'));
background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat;
min-height:340px}
/* From 900px up the band takes the photograph's own aspect ratio, which is
the only way to get both things asked for at once: match the ratio and
`cover` neither crops the aircraft nor leaves letterbox bars. `contain`
showed the whole frame but banded top and bottom on any window under
~1486px; `cover` alone never bands but cuts into the nose and tail.
Below 900px the box would be too short for the copy, so it falls back to
`cover` on a min-height and accepts a side crop. If the text ever outgrows
the ratio-derived height the box just grows, degrading to that same crop
rather than banding. */
@media(min-width:900px){.band{aspect-ratio:2400/744;min-height:0}}
/* width:100% for the same reason .pagehero--photo>.wrap needs it — .band is a
flex container, so without it .wrap shrink-wraps to its content instead of
spanning the row, and margin:auto then centres that narrow box, pushing the
heading right of where every other section's heading starts. */
.band .wrap{position:relative;z-index:1;width:100%;padding-top:clamp(3.5rem,6vw,5rem);padding-bottom:clamp(3.5rem,6vw,5rem)}
.band h2{color:#fff;max-width:20ch}
.band p{color:#E4EEF7;max-width:46ch;margin-top:1rem;line-height:1.6}
/* News */
.newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem}
.news{border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);background:#fff;
transition:transform .3s var(--ease),box-shadow .3s;text-decoration:none;color:inherit;display:block}
.news:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.news .thumb{height:150px;display:flex;align-items:center;justify-content:center;color:var(--sky-2);
font-weight:800;font-size:1.05rem;letter-spacing:.12em;
background:linear-gradient(135deg,var(--navy) 0%,#155084 100%)}
.news .body{padding:1.4rem}
.news .tag{color:var(--sky);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.news h3{font-size:1.03rem;margin:.55rem 0;line-height:1.4}
.news p{color:var(--slate);font-size:.88rem}
/* Trust strip */
.trust{margin-top:3rem}
.trust__label{text-align:center;color:var(--slate);font-size:.78rem;letter-spacing:.16em;
text-transform:uppercase;font-weight:700;margin-bottom:1.6rem}
.trust__logos{display:flex;gap:1rem 2.6rem;align-items:center;justify-content:center;flex-wrap:wrap}
.trust__logos span{font-weight:800;font-size:1.05rem;color:var(--navy);opacity:.62;letter-spacing:.02em;
transition:opacity .2s}
.trust__logos span:hover{opacity:1}
/* Sustainability variant */
.section--green{background:linear-gradient(160deg,#07231C 0%,#0B3A2E 55%,#0F5140 100%);color:#fff}
.section--green h2{color:#fff}
.section--green .k{color:#7BD8B0}
.section--green .lead{color:#BFE3D2}
.section--green .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.section--green .card h3{color:#fff}
.section--green .card p{color:#BFE3D2}
.section--green .card .ic{background:linear-gradient(160deg,rgba(47,165,123,.16),rgba(123,216,176,.14));
border-color:rgba(123,216,176,.28);color:#8FE3BE}
/* Big CTA */
.bigcta{background:linear-gradient(135deg,#0A1D33,#155084);text-align:center;color:#fff}
.bigcta h2{color:#fff;margin:0 auto}
.bigcta p{color:var(--mist);margin:1.1rem auto 2rem;max-width:60ch;line-height:1.6}
.bigcta .sub{margin-top:1.3rem;font-size:.95rem;color:var(--mist)}
/* ---------- Footer ---------- */
.footer{background:var(--navy-3);color:var(--mist);padding:3.5rem 0 2rem}
.footer .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.4rem}
.footer__brand img{height:42px;width:auto;margin-bottom:1.3rem}
.footer p{font-size:.9rem;line-height:1.7;color:var(--mist)}
.footer h4,.footer h2{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem;
font-family:var(--font);font-weight:700;line-height:1.2;max-width:none}
.footer a{display:block;color:var(--mist);text-decoration:none;font-size:.9rem;margin-bottom:.55rem;width:fit-content}
.footer a:hover{color:var(--sky-2)}
/* Social row in the footer identity block */
.social{display:flex;gap:.55rem;margin-top:1rem}
.social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;
border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#C9DAF0;
transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.social a:hover{background:rgba(255,255,255,.12);border-color:var(--sky-2);color:#fff;transform:translateY(-2px)}
.social__ic{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.social__ic--solid{fill:currentColor;stroke:none}
@media(max-width:520px){.social a{width:34px;height:34px}.social__ic{width:17px;height:17px}}
.footer__bot{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);
display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem}
/* ---------- Page hero for interior/stub pages ---------- */
.pagehero{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 65%,#12365e 100%);color:#fff;
padding:10.2rem 0 3.5rem}
.pagehero .eyebrow{margin-bottom:1rem}
.pagehero h1{color:#fff;font-size:clamp(2rem,4.5vw,3.2rem)}
.pagehero p{color:var(--mist);max-width:60ch;margin-top:1rem;font-size:1.05rem;line-height:1.6}
.breadcrumb{font-size:.82rem;color:var(--mist);margin-bottom:1.4rem}
.breadcrumb a{color:var(--sky-2);text-decoration:none}
/* No cap of its own — fills whatever container it's in (.article's 920px,
or .wrap directly on legal pages), so it lines up with the other
full-width elements on the same page (TOC boxes, tables, lede
paragraphs) instead of narrowing to a different column partway down. */
.prose{max-width:none}
.prose p{color:var(--slate);margin-bottom:1.1rem;font-size:1.02rem}
.prose h2{margin:2rem 0 .8rem}
.prose ul{margin:0 0 1.2rem 1.2rem;color:var(--slate)}
.prose li{margin-bottom:.5rem}
/* ---------- Reveal animation (progressive enhancement) ----------
Content is visible by default. Only when JS is present (html.js) do we
hide-then-reveal, so a JS/scroll hiccup can never leave a section blank.
The selector list below is what gets revealed site-wide — KEEP IT IN SYNC
with AUTO_REVEAL in site.js, which observes the same elements. The hidden
state has to live here in CSS rather than being applied by the script:
site.js is deferred, so tagging elements from JS would let them paint
visible first and then blink out. Wrapped in :where() so the whole list
carries zero specificity and the per-component variants below (and .in)
can override it without a specificity fight.
Deliberately NOT in the list: .hero and .pagehero content. They're above
the fold, and starting the largest text on the page at opacity:0 would
push out LCP for no visual gain. */
@media (prefers-reduced-motion:no-preference){
html.js :where(.reveal,
main section:not(.pagehero)>.wrap>.k,
main section:not(.pagehero)>.wrap>h2,
main section:not(.pagehero)>.wrap>.lead,
main section:not(.pagehero)>.wrap>.section-center>:is(.k,h2,.lead),
.cards>.card,
.roles>.role,
.steps>.step,
.newsgrid>.news,
.statgrid>.stat,
.fleetgrid>.tail,
.photorow>figure,
.split__media,
.split__body,
.credpanel,
.fleet-glance,
.logowall,
.contact-primary__intro,
.contact-actions,
.article){opacity:0}
/* Keyframes rather than transitions, animating the independent translate/
scale properties rather than `transform`: components own `transform` for
their hover states (.card lifts 6px, .news lifts 4px) and own the
`transition` shorthand to time them. A transition-based reveal would
overwrite both and leave hovers either sluggish or instant. */
html.js :where(.reveal,
main section:not(.pagehero)>.wrap>.k,
main section:not(.pagehero)>.wrap>h2,
main section:not(.pagehero)>.wrap>.lead,
main section:not(.pagehero)>.wrap>.section-center>:is(.k,h2,.lead),
.cards>.card,
.roles>.role,
.steps>.step,
.newsgrid>.news,
.statgrid>.stat,
.fleetgrid>.tail,
.photorow>figure,
.split__media,
.split__body,
.credpanel,
.fleet-glance,
.logowall,
.contact-primary__intro,
.contact-actions,
.article).in{animation:revealUp .7s var(--ease) both}
/* Per-component character, so a page doesn't read as one uniform slide:
the eyebrow/heading pair travels less than the body under it, grid items
settle up with a touch of scale, and photo/text splits come in from their
own side of the row. Order matters — these all tie on specificity. */
html.js :where(main section>.wrap>.k,main section>.wrap>h2,
main section>.wrap>.section-center>:is(.k,h2)).in{animation-name:revealShort}
html.js :where(.cards>.card,.roles>.role,.newsgrid>.news,.fleetgrid>.tail,
.statgrid>.stat,.steps>.step,.photorow>figure).in{animation-name:revealPop}
html.js :where(.split__media).in{animation-name:revealFromLeft}
html.js :where(.split__body).in{animation-name:revealFromRight}
html.js :where(.split--flip .split__media).in{animation-name:revealFromRight}
html.js :where(.split--flip .split__body).in{animation-name:revealFromLeft}
@media(max-width:860px){
/* Stacked layouts read better rising than sliding in sideways. */
html.js :where(.split__media,.split__body,
.split--flip .split__media,.split--flip .split__body).in{animation-name:revealUp}
}
/* Photographs settle out of a slight push-in as their frame arrives — the
one motion treatment that's near-universal on operator sites for aircraft
imagery. On the independent `scale` property so it composes with, rather
than overwrites, the `transform:scale()` hover these same images use. */
html.js :where(.split__media,.photorow>figure,.card--photo).in img{
animation:photoSettle 1.3s var(--ease) both}
}
@keyframes photoSettle{from{scale:1.06}to{scale:1}}
@keyframes revealUp{from{opacity:0;translate:0 24px}to{opacity:1;translate:none}}
@keyframes revealShort{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}}
@keyframes revealPop{from{opacity:0;translate:0 22px;scale:.985}to{opacity:1;translate:none;scale:none}}
@keyframes revealFromLeft{from{opacity:0;translate:-30px 0}to{opacity:1;translate:none}}
@keyframes revealFromRight{from{opacity:0;translate:30px 0}to{opacity:1;translate:none}}
/* ---------- Responsive ---------- */
@media(max-width:1220px){
.nav__links{display:none}
.nav__toggle{display:block}
}
@media(max-width:900px){
.credbar,.statgrid,.cards,.fleetgrid,.steps,.newsgrid{grid-template-columns:1fr 1fr}
.creds{grid-template-columns:1fr;gap:2rem}
.footer .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
.credbar,.statgrid,.cards,.fleetgrid,.steps,.newsgrid,.footer .fgrid{grid-template-columns:1fr}
.credbar>div{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}
.credbar>div:last-child{border-bottom:none}
.hero .wrap{padding-top:7rem}
.footer__bot{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
*{animation:none !important;transition:none !important;scroll-behavior:auto !important}
.reveal{opacity:1;transform:none}
}
/* ============================================================
Long-form / knowledge-hub + article pages
============================================================ */
.article{max-width:920px;margin:0 auto}
.article--flush{margin:0}
.article__meta{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;color:var(--slate);
font-size:.88rem;margin-top:1rem}
.article__meta .dot{width:4px;height:4px;border-radius:50%;background:#C7D4DF;display:inline-block}
.lede{font-size:1.18rem;line-height:1.65;color:var(--ink);margin:1.6rem 0 0}
/* Prose scale for real articles */
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:2.6rem 0 .9rem;scroll-margin-top:6rem}
/* An h2 straight after a kicker inside .prose was stacking the kicker's
1.1rem bottom margin on top of the h2's own 2.6rem, so that pair sat much
further apart than the same pair outside .prose (Fleet "Why E-Jets"). */
.prose .k+h2{margin-top:0}
.prose h3{font-size:1.2rem;margin:1.8rem 0 .6rem;color:var(--navy)}
.prose p{color:#33414F;font-size:1.05rem;line-height:1.75;margin-bottom:1.15rem}
.prose ul,.prose ol{margin:0 0 1.2rem 1.3rem;color:#33414F}
.prose li{margin-bottom:.55rem;line-height:1.65}
.prose strong{color:var(--navy)}
.prose a{color:var(--sky);text-decoration:underline;text-underline-offset:2px}
/* A .btn inside .prose is still a button, not a text link — .prose a's higher
specificity (class+element) was beating .btn-primary's plain-class color/underline
reset, so "Get in touch"-style CTAs read as low-contrast blue-on-blue until :hover
(only .btn-primary:hover had enough specificity to win). Fixes /about-us/ and
/acmi-leasing/'s inline CTAs. */
.prose a.btn{text-decoration:none}
.prose a.btn-primary{color:#fff}
/* Table of contents */
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
padding:1.3rem 1.5rem;margin:2rem 0}
.toc h4,.toc h2{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
margin-bottom:.8rem;font-family:var(--font);font-weight:700;max-width:none;line-height:1.3}
.toc ol{margin:0;padding-left:1.1rem;columns:2;column-gap:2rem}
.toc li{margin-bottom:.5rem;break-inside:avoid}
.toc a{color:var(--sky);text-decoration:none;font-size:.95rem}
.toc a:hover{text-decoration:underline}
@media(max-width:600px){.toc ol{columns:1}}
/* Comparison tables */
.table-scroll{overflow-x:auto;margin:1.6rem 0;border:1px solid var(--line);border-radius:var(--radius-sm)}
table.compare{border-collapse:collapse;width:100%;min-width:640px;font-size:.95rem}
table.compare caption{caption-side:bottom;text-align:left;color:var(--slate);font-size:.82rem;padding:.7rem}
table.compare th,table.compare td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.compare thead th{background:var(--navy);color:#fff;font-size:.85rem;letter-spacing:.02em;position:sticky;top:0}
table.compare tbody th{background:var(--panel);color:var(--navy);font-weight:700;white-space:nowrap}
table.compare tbody tr:nth-child(even) td{background:#FbFcFe}
table.compare td strong{color:var(--navy)}
/* Callout / scenario box */
.callout{background:linear-gradient(135deg,#F5F8FB,#EEF4FA);border:1px solid var(--line);
border-left:4px solid var(--sky);border-radius:10px;padding:1.3rem 1.5rem;margin:1.6rem 0}
.callout h4{color:var(--navy);margin-bottom:.5rem;font-size:1.05rem}
.callout p{margin-bottom:.5rem;font-size:1rem}
.callout--gold{border-left-color:var(--gold)}
/* Key figure chips */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.8rem 0}
.fig{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.3rem}
.fig b{display:block;font-size:1.6rem;color:var(--navy);font-weight:800;line-height:1}
.fig span{display:block;color:var(--slate);font-size:.85rem;margin-top:.4rem;line-height:1.4}
@media(max-width:700px){.figs{grid-template-columns:1fr}}
/* Content pillars */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:2rem}
.pillar{display:flex;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.4rem}
.pillar .n{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--sky),var(--sky-2));
color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1rem}
.pillar h3{font-size:1.05rem;margin-bottom:.3rem}
.pillar p{color:var(--slate);font-size:.93rem;line-height:1.55;margin:0}
@media(max-width:700px){.pillars{grid-template-columns:1fr}}
/* A-C-M-I as a list, not a four-column matrix: inside the 920px article column
four cards left ~200px each and the text was unreadable. */
.acmi-parts{margin:1.6rem 0 0}
.acmi-parts dt{display:flex;align-items:center;gap:.75rem;font-family:var(--display);font-weight:700;
color:var(--navy);font-size:1.06rem;margin-top:1.15rem}
.acmi-parts dt:first-of-type{margin-top:0}
.acmi-parts dt b{flex:0 0 auto;width:34px;height:34px;border-radius:10px;
background:linear-gradient(135deg,var(--sky),var(--sky-2));color:#fff;
display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800}
.acmi-parts dd{margin:.35rem 0 0 calc(34px + .75rem);color:var(--slate);line-height:1.65}
@media(max-width:520px){.acmi-parts dd{margin-left:0}}
/* Pillars carrying only a title sit tighter and centre on the number. Five items
in a two-column grid strands the last one, so it runs the full width. */
.pillars--compact{margin-bottom:1.9rem}
.pillars--compact .pillar{align-items:center;padding:1.1rem 1.25rem}
.pillars--compact .pillar h3{margin-bottom:0}
.pillars--compact .pillar:last-child:nth-child(odd){grid-column:1 / -1}
/* Photographs inside a prose article (the ACMI hub) */
.prose-figure{margin:2.2rem 0 0}
.prose-figure img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow-card)}
.prose-figure figcaption{margin-top:.75rem;color:var(--slate);font-size:.87rem;line-height:1.55}
/* Article cards (hub) */
.artcards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin-top:2rem}
.artcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:1.8rem;text-decoration:none;color:inherit;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.artcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-card);border-color:var(--sky)}
.artcard .tag{color:var(--sky);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.artcard h3{margin:.6rem 0;font-size:1.18rem;line-height:1.35;color:var(--navy)}
.artcard p{color:var(--slate);font-size:.95rem;line-height:1.6;margin:0 0 1rem}
.artcard .more{margin-top:auto;color:var(--sky);font-weight:700;font-size:.92rem}
@media(max-width:700px){.artcards{grid-template-columns:1fr}}
/* FAQ accordion (native details) */
.faq{margin-top:1.5rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 2.2rem 1.1rem 0;position:relative;
font-weight:700;color:var(--navy);font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
font-size:1.5rem;color:var(--sky);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq details p{color:#33414F;line-height:1.7;padding:0 0 1.2rem;margin:0;font-size:1rem}
/* Inline CTA band for content pages */
.inlinecta{background:linear-gradient(135deg,var(--navy),#155084);color:#fff;border-radius:var(--radius);
padding:2.4rem;margin:2.6rem 0;text-align:center}
.inlinecta h3{color:#fff;font-size:1.4rem;margin-bottom:.6rem}
.inlinecta p{color:var(--mist);margin:0 auto 1.4rem;max-width:52ch}
/* ============================================================
Home — enriched fleet section + partner logo wall
============================================================ */
/* Fleet at a glance */
.fleet-glance{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.6rem;
border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13);padding:1.5rem 0}
.fleet-glance>div{text-align:center}
.fleet-glance b{display:block;font-size:clamp(1.6rem,2.6vw,2.1rem);color:#fff;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.fleet-glance span{color:var(--mist);font-size:.82rem;margin-top:.4rem;display:block;line-height:1.35}
@media(max-width:600px){.fleet-glance{grid-template-columns:1fr 1fr;gap:1.4rem 1rem}}
/* Fleet page showcase — inverted relative to the Home fleet section: light
section, solid navy cards.
The driver is the artwork. The aircraft illustrations are transparent
cutouts of a mostly-WHITE aircraft, so they need a dark surface directly
behind them or the fuselage dissolves into the page. Keeping the cards
navy does that, while letting the section around them go light — which in
turn lets the stat band actually be white-with-dark-numbers rather than a
white slab floating on a navy field, and gives the dark cards something to
contrast against instead of sitting dark-on-dark. */
.fleet-showcase{background:var(--panel)}
/* First thing in the section, so its own top margin just doubles the section padding. */
.fleet-showcase .fleet-glance{margin-top:0;background:#fff;border:1px solid var(--line);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
border-radius:var(--radius-sm);padding:1.7rem 1.5rem;box-shadow:0 10px 30px rgba(10,29,51,.05)}
.fleet-showcase .fleet-glance b{color:var(--navy)}
/* --sky rather than --sky-2: the lighter steel blue only clears ~2.6:1 on
white, which fails AA for label-sized text. */
.fleet-showcase .fleet-glance span{color:var(--sky)}
.fleet-showcase .tail{background:linear-gradient(168deg,var(--navy) 0%,var(--navy-2) 100%);
border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 44px rgba(10,29,51,.16)}
.fleet-showcase .tail:hover{background:linear-gradient(168deg,var(--navy-2) 0%,#1D3A63 100%);
border-color:var(--sky);box-shadow:0 26px 58px rgba(10,29,51,.24)}
/* Richer type cards */
.tail__head{display:flex;align-items:center;gap:1rem;margin-bottom:.4rem}
.tail__head .plane{height:40px;margin:0;flex:0 0 auto;opacity:.95}
.tail__head small{margin:0}
.tail__specs{list-style:none;margin:1.1rem 0 0;padding:1rem 0 0;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:.6rem}
.tail__specs li{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;align-items:baseline}
.tail__specs li span{color:var(--mist)}
.tail__specs li b{color:#fff;text-align:right;font-weight:700}
.tail p{margin-top:1rem}
/* Partner logo wall */
.section-center{text-align:center}
.section-center .k{justify-content:center}
.section-center h2{margin-left:auto;margin-right:auto}
.section-center .lead{margin-left:auto;margin-right:auto;text-wrap:balance}
/* ===== Photo row — three equal photographs with captions underneath.
Captions sit below the image rather than over it: on the light sections these
run on, the overlay scrim that works on navy would be dead weight. */
.photorow{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.5rem}
.photorow--2{grid-template-columns:repeat(2,1fr);max-width:640px;margin-inline:0}
.photorow figure{margin:0}
.photorow__frame{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--panel);
box-shadow:var(--shadow-card)}
.photorow img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.photorow figure:hover img{transform:scale(1.04)}
.photorow figcaption{padding:.85rem .15rem 0;color:var(--slate);font-size:.86rem;line-height:1.45}
.photorow figcaption b{display:block;color:var(--navy);font-size:.96rem;font-weight:700}
@media(max-width:860px){.photorow{grid-template-columns:1fr;gap:1.6rem;max-width:520px}}
@media (prefers-reduced-motion:reduce){.photorow img{transition:none}.photorow figure:hover img{transform:none}}
/* Full-bleed photo strip — page furniture between two text sections, for frames
too wide (2.35:1 here) to crop into a split without losing the aircraft. */
.photostrip{position:relative;margin:0;overflow:hidden}
.photostrip img{display:block;width:100%;height:clamp(200px,24vw,340px);object-fit:cover}
.photostrip figcaption{position:absolute;left:0;right:0;bottom:0;color:#fff;
padding:3rem clamp(1.2rem,5vw,3rem) 1.1rem;font-size:.88rem;line-height:1.5;
background:linear-gradient(180deg,rgba(6,14,28,0) 0%,rgba(6,14,28,.55) 50%,rgba(6,14,28,.88) 100%)}
.photostrip figcaption span{display:block;max-width:62ch} /* scrim spans the strip, text does not */
/* ===== Photo cards — the client types on /clients/.
Two up, not three: at a third of the wrap the photograph was mostly sky, with
everything worth seeing behind the caption. At half the wrap the frame is big
enough that the subject clears the text band, which only covers the bottom
third and fades from nothing. */
.cards--photo{grid-template-columns:repeat(2,1fr);gap:1.25rem}
.card--photo{position:relative;overflow:hidden;padding:0;border:0;aspect-ratio:3/2;
display:flex;flex-direction:row;align-items:flex-end;background:#0B1424;color:#fff}
.card--photo picture{position:absolute;inset:0}
.card--photo img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .8s var(--ease)}
/* Same treatment as the hero type: a wide, low-opacity shadow so the copy
holds up wherever the photograph is busiest behind it, rather than
relying on the scrim below alone. */
.card--photo h3,.card--photo p{text-shadow:0 2px 14px rgba(4,12,24,.7)}
.card--photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;
background:linear-gradient(180deg,rgba(6,14,28,0) 0%,rgba(6,14,28,.55) 42%,rgba(6,14,28,.93) 100%)}
.card--photo .card__body{position:relative;z-index:1;padding:1.6rem 1.6rem 1.5rem;max-width:44ch}
.card--photo h3{color:#fff;margin-bottom:.45rem;font-size:1.28rem}
.card--photo p{color:#D8E5F4;font-size:.95rem;line-height:1.55}
.card--photo:hover{transform:none}
.card--photo:hover img{transform:scale(1.045)}
@media(max-width:860px){.cards--photo{grid-template-columns:1fr}}
@media(max-width:520px){.card--photo{aspect-ratio:4/3}.card--photo .card__body{padding:1.2rem}}
@media (prefers-reduced-motion:reduce){.card--photo img{transition:none}.card--photo:hover img{transform:none}}
/* ===== Livery carousel (/clients/) =====
Every slide is the same HEIGHT and takes whatever width its photograph needs
(--ar per figure), so nothing is cropped to fit a card — the frames run from
1.48 to 1.78 and all of them arrive whole. Still a scroll-snap strip
underneath: with no JS it drags and swipes the same. */
.liveries{padding-bottom:3.4rem;overflow:hidden}
.liveries .lead{max-width:56ch}
.lcar{--lcar-h:clamp(220px,32vw,430px);position:relative;margin-top:2.7rem}
.lcar__track{display:flex;gap:1.6rem;overflow-x:auto;scroll-snap-type:x mandatory;
scroll-behavior:smooth;
/* Left-aligned on marketing's request (2026-09-25), and specifically to the
text column, NOT to the viewport edge: the first slide starts on the same
vertical line as the heading and paragraph above it. .lcar is a sibling of
.wrap rather than a child, so it spans the full width and has to reproduce
.wrap's own offset — the centring gap plus its 4vw gutter — by hand. The
trailing pad is what lets the final slide still snap to that same line. */
padding-inline:calc(max((100vw - var(--maxw)) / 2, 0px) + 4vw) clamp(1rem,22vw,16rem);
/* And the snapport has to move with it. Mandatory snapping aligns a slide to
the scrollport's padding box, which sits OUTSIDE the padding above — so
without this the browser helpfully scrolls the offset straight back off
again and slide one returns to the window edge. */
scroll-padding-inline-start:calc(max((100vw - var(--maxw)) / 2, 0px) + 4vw);
scrollbar-width:none;-ms-overflow-style:none}
.lcar__track::-webkit-scrollbar{display:none}
.lcar__slide{position:relative;flex:0 0 auto;height:var(--lcar-h);width:calc(var(--lcar-h) * var(--ar,1.5));
max-width:88vw;scroll-snap-align:start;margin:0;
border-radius:16px;overflow:hidden;background:#0B1424;cursor:pointer;
opacity:.38;transform:scale(.94);transition:opacity .6s var(--ease),transform .6s var(--ease);
box-shadow:0 30px 70px rgba(0,0,0,.45)}
.lcar__slide.is-active{opacity:1;transform:scale(1);cursor:default}
.lcar__slide img{display:block;width:100%;height:100%;object-fit:cover;
transform:scale(1.001);transition:transform 9s linear}
.lcar__slide.is-active img{transform:scale(1.04)}
/* MedSky's source photo runs edge-to-edge (the nose sits flush against the left
frame edge already), so the slow zoom-in on activation crops it. Skip the
zoom for this slide only — the other slides have margin to spare. */
.lcar__slide--tight img{transition:none}
.lcar__slide--tight.is-active img{transform:none}
.lcar__slide figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;
align-items:baseline;gap:.2rem 1rem;color:#fff;
padding:3.4rem 1.15rem 1.05rem;
background:linear-gradient(180deg,rgba(6,14,28,0) 0%,rgba(6,14,28,.6) 50%,rgba(6,14,28,.93) 100%);
opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease) .15s,transform .5s var(--ease) .15s}
.lcar__slide.is-active figcaption{opacity:1;transform:none}
.lcar__slide figcaption strong{font-family:var(--display);font-weight:700;
font-size:1.12rem;letter-spacing:.01em}
.lcar__slide figcaption span{font-size:.85rem;color:#C8D8EE}
.lcar__credit{margin-left:auto;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#8CA3C2}
.lcar__nav{position:absolute;top:calc(50% - 1.6rem);transform:translateY(-50%);z-index:3;
width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
background:rgba(8,18,34,.55);color:#fff;display:flex;align-items:center;justify-content:center;
cursor:pointer;backdrop-filter:blur(8px);transition:background .2s,border-color .2s,opacity .2s}
.lcar__nav[hidden]{display:none}
.lcar__nav:hover{background:rgba(8,18,34,.92);border-color:var(--sky-2)}
.lcar__nav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.lcar__nav--prev{left:calc(50% - (var(--lcar-h) * 1.6) / 2 + .75rem)}
.lcar__nav--next{right:calc(50% - (var(--lcar-h) * 1.6) / 2 + .75rem)}
.lcar__dots{display:flex;justify-content:center;gap:.45rem;margin-top:1.5rem}
.lcar__dots button{width:26px;height:4px;padding:0;border:0;border-radius:2px;cursor:pointer;
background:rgba(255,255,255,.22);overflow:hidden;position:relative;transition:background .3s}
.lcar__dots button[aria-selected="true"]{background:rgba(255,255,255,.28)}
.lcar__dots button span{position:absolute;inset:0;width:0;background:var(--sky-2);border-radius:2px}
.lcar__dots button[aria-selected="true"] span{width:100%;transition:width 6s linear}
@media(max-width:900px){
.lcar{--lcar-h:clamp(180px,46vw,300px)}
.lcar__track{gap:1rem;padding-inline:4vw 40vw;scroll-padding-inline-start:4vw}
.lcar__slide{border-radius:14px}
.lcar__nav{width:38px;height:38px}
.lcar__nav--prev{left:.6rem}.lcar__nav--next{right:.6rem}
}
@media (prefers-reduced-motion:reduce){
.lcar__track{scroll-behavior:auto}
.lcar__slide,.lcar__slide img,.lcar__slide figcaption{transition:none}
.lcar__slide.is-active img{transform:none}
.lcar__dots button[aria-selected="true"] span{transition:none;width:100%}
}
/* Region cards on /clients/: no icon chip — a globe glyph repeated four
times says nothing, and initials in a box looked like a placeholder. An accent
rule over the region name keeps them in the card system without faking an icon. */
.card--region{padding-top:1.9rem}
.card--region::before{content:"";display:block;width:36px;height:3px;border-radius:2px;
background:var(--accent);margin-bottom:1.3rem}
.card--region h3{margin-bottom:.55rem}
.logowall{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1rem;margin-top:2.6rem}
.logo-tile{display:flex;align-items:center;justify-content:center;text-align:center;min-height:92px;padding:1.1rem 1.2rem;
background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--navy);
font-weight:800;font-size:1rem;letter-spacing:.01em;line-height:1.2;
transition:transform .25s var(--ease),box-shadow .25s,border-color .2s}
.logo-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--sky)}
.logo-tile img{max-height:48px;max-width:100%;width:auto;object-fit:contain;display:block}
/* ============================================================
Contact form + News/Careers helpers
============================================================ */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.5rem;max-width:680px}
.form .full{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-size:.85rem;font-weight:700;color:var(--navy)}
.field input,.field textarea,.field select{font:inherit;color:var(--ink);background:#fff;
border:1px solid var(--line);border-radius:10px;padding:.75rem .9rem;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--sky);
box-shadow:0 0 0 3px rgba(14,111,196,.15)}
.field textarea{min-height:130px;resize:vertical}
.form .actions{grid-column:1 / -1;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.form-note{font-size:.85rem;color:var(--slate)}
@media(max-width:600px){.form{grid-template-columns:1fr}}
.contact-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:3rem;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:2rem}}
.contact-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem}
.contact-card h3{font-size:1.05rem;margin-bottom:.3rem}
.contact-card p{color:var(--slate);font-size:.95rem;line-height:1.6;margin-bottom:1.1rem}
.contact-card a{font-weight:700}
/* News list */
.newslist{display:grid;gap:1.4rem;margin-top:2.4rem}
.newsitem{display:grid;grid-template-columns:130px 1fr;gap:1.6rem;background:#fff;border:1px solid var(--line);
border-radius:var(--radius-sm);padding:1.5rem;align-items:start}
.newsitem time{color:var(--sky);font-weight:700;font-size:.85rem;letter-spacing:.02em}
.newsitem .tag{display:inline-block;margin-top:.35rem;font-size:.7rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--slate)}
.newsitem h3{font-size:1.15rem;margin-bottom:.4rem}
.newsitem p{color:var(--slate);font-size:.95rem;line-height:1.6;margin:0}
@media(max-width:600px){.newsitem{grid-template-columns:1fr;gap:.5rem}}
/* Roles */
.roles{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:2rem}
.role{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.5rem}
.role h3{font-size:1.08rem;margin-bottom:.4rem}
.role p{color:var(--slate);font-size:.93rem;line-height:1.55;margin:0}
@media(max-width:700px){.roles{grid-template-columns:1fr}}
/* ============================================================
Onboard / cabin split + editorial polish
============================================================ */
.onboard{background:var(--panel)}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split__media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);
aspect-ratio:3/2;background:var(--navy)}
.split__media img{width:100%;height:100%;object-fit:cover;display:block}
.split__media::after{content:"";position:absolute;inset:0;
background:linear-gradient(120deg,rgba(10,29,51,.18),transparent 55%)}
.split__body .lead{margin-bottom:.6rem}
.split--flip .split__media{order:2} /* alternate the photo side down the page */
.split__body.prose{max-width:none}
.split__body.prose h2{margin-top:0}
.feature-list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1.05rem}
.feature-list li{display:flex;gap:.85rem;align-items:flex-start;color:var(--slate);font-size:.98rem;line-height:1.55}
.feature-list svg{flex:0 0 auto;width:22px;height:22px;stroke:var(--sky);stroke-width:1.7;fill:none;
stroke-linecap:round;stroke-linejoin:round;margin-top:.12rem}
.feature-list b{color:var(--navy);font-weight:700}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:2rem}.split__media{aspect-ratio:16/10}
.split--flip .split__media{order:0}} /* stacked, the photo always leads */
/* Tighter section rhythm — consecutive sections were reading too far apart */
section{padding:clamp(2.8rem,5vw,4.5rem) 0}
/* Refined hairline above section labels on light panels for a considered feel */
.section--panel .k,#partners .k,.onboard .k{position:relative}
/* Cards feel a touch lighter and more premium */
.card{border-radius:16px}
.card:hover{box-shadow:0 26px 55px rgba(10,29,51,.12)}
/* ============================================================
Interaction layer (progress bar, back-to-top, stagger, hero motion)
All motion is gated on prefers-reduced-motion.
============================================================ */
/* Scroll progress bar */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:101;transform:scaleX(0);
transform-origin:0 50%;background:linear-gradient(90deg,var(--gold),var(--gold-2) 60%,var(--sky-2));
will-change:transform;pointer-events:none}
/* Back-to-top */
.to-top{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:90;
width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
background:var(--navy);color:#fff;box-shadow:0 10px 26px rgba(10,29,51,.35);
opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);
transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s,visibility .3s}
.to-top:hover{background:var(--gold);transform:translateY(0) scale(1.05)}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.to-top svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Cookie consent banner — inert until ANALYTICS is configured in site.js */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--navy);
box-shadow:0 -6px 26px rgba(10,29,51,.35)}
.cookiebar__body{max-width:1180px;margin:0 auto;padding:1.1rem 1.4rem;display:flex;
align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap}
.cookiebar__body p{margin:0;font-size:.9rem;line-height:1.55;color:#fff;max-width:64ch}
.cookiebar__body a{color:var(--sky-2)}
.cookiebar__actions{display:flex;gap:.7rem;flex-shrink:0}
@media(max-width:640px){
.cookiebar__body{flex-direction:column;align-items:stretch;text-align:center}
.cookiebar__actions{justify-content:center}
/* Centred text is fine for one line; this paragraph wraps to three or four on
a phone, where a ragged left edge makes it markedly harder to read. Buttons
stay centred. */
.cookiebar__body p{text-align:left}
}
/* Subtle hero motion — a slow settle, one time */
@media (prefers-reduced-motion:no-preference){
.hero__bg{animation:heroSettle 20s var(--ease) forwards}
@keyframes heroSettle{from{transform:scale(1.09)}to{transform:scale(1)}}
}
/* Staggered reveal delays are applied per-element in site.js (transition-delay). */
@media (prefers-reduced-motion:reduce){
.progress{display:none}
.to-top{transition:opacity .2s}
}
/* ============================================================
Audit fixes — accessibility contrast (WCAG AA) + polish
============================================================ */
:root{--gold-ink:#285396} /* dark brand blue: AA on white/panel */
/* Solid brand-blue buttons: white text passes AA (~4.5:1) on the accent blue */
.btn-primary,.btn-primary:hover{color:#fff}
.nav .nav__cta,.nav .nav__cta:hover{color:#fff !important}
/* Kicker labels: dark brand blue on light sections (bright blue stays on dark sections) */
.k{color:var(--gold-ink)}
.section--navy .k{color:var(--sky-2)}
.section--green .k{color:#8FE3BE}
/* Two-tone heading accent — the one phrase each heading calls out in the
brand blue; on the dark green Sustainability section it switches to the
section's own light-green accent so it stays legible against the green bg. */
.hl{color:var(--gold)}
.section--green .hl{color:#7BD8B0}
/* The medium brand blue reads fine on white/light panels but washes out
against navy/photo backdrops — switch to the lighter sky accent already
used for .k labels on those sections. */
.section--navy .hl,.band .hl{color:var(--sky-2)}
/* Focus ring: two-tone, so it stays visible on ANY surface.
A single colour cannot work here: --sky-2 cleared 3:1 on navy but only
2.67:1 on white; --sky fixed white (6.27:1) and dropped navy to 2.86:1;
and on a --gold primary button a blue ring is 1.14:1 whatever shade it is.
A white inner ring plus a --sky outer halo always presents one boundary
at >=3:1 — white-on-navy 17:1, white-on-button 4.89:1, halo-on-white
6.27:1 — and the white/--sky boundary between the two rings is 6.27:1
regardless of what is behind it. WCAG 2.1 SC 1.4.11. */
:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--sky)}
/* Form controls: visible boundary (was 1.19:1) */
.field input,.field textarea,.field select{border-color:#7C8B99}
/* ...and the same two-tone ring on keyboard focus. Without this, the earlier
`.field input:focus{outline:none}` rule wins on specificity and form fields
keep a much weaker indicator than the rest of the site — on the contact
form, which is the page where keyboard focus matters most. */
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--sky)}
/* Primary-button hover: --gold-2 (#4E86E6) put white label text at 3.57:1,
under the 4.5:1 SC 1.4.3 needs. --gold itself only clears 4.89:1, so there
is no headroom to lighten at all — hover darkens instead. The decorative
gradient on .progress still uses --gold-2; no text sits on it. */
.btn-primary:hover,.nav .nav__cta:hover{background:#2760C4}
/* Hero credbar: darker glass keeps the right-hand cells legible over bright photo */
.credbar{background:rgba(8,20,37,.36)}
/* Photo band: shrink the min-height on narrow viewports to match the shorter
text column there — the "contain" sizing on .band already keeps the whole
aircraft in frame at any height. */
@media(max-width:760px){.band{min-height:320px}}
/* Fleet spec label shouldn't wrap to two lines */
.tail__specs li span{white-space:nowrap}
/* Interior page hero: subtle koru motif fills the empty right side */
.pagehero{position:relative;overflow:hidden}
.pagehero>.wrap{position:relative;z-index:1}
.pagehero::after{content:"";position:absolute;right:-3%;top:50%;transform:translateY(-50%);
width:min(44vw,500px);aspect-ratio:1;pointer-events:none;opacity:.07;
background:url('/assets/img/icon-mark.png') center/contain no-repeat;filter:brightness(0) invert(1)}
@media(max-width:760px){.pagehero::after{opacity:.05;right:-22%;width:72vw}}
/* Home news teaser: branded koru motif instead of placeholder text */
.news .thumb{position:relative;color:transparent;font-size:0}
.news .thumb::after{content:"";position:absolute;inset:0;opacity:.5;
background:url('/assets/img/icon-mark.png') center/54px no-repeat;filter:brightness(0) invert(1)}
/* News list meta: separate the year and the category tag */
.newsitem>div:first-child{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.newsitem time{display:block}
/* Contact enquiry form: honeypot + submit status */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-status{margin:.9rem 0 0;padding:.7rem .9rem;border-radius:9px;font-size:.95rem;line-height:1.45}
.form-status.is-success{background:#eaf5ec;border:1px solid #bfe0c6;color:#1c5a2b}
.form-status.is-error{background:#fdeceb;border:1px solid #f2c4c0;color:#8a2620}
.cf-turnstile{margin-top:.2rem}
/* Legal pages: table of contents + meta */
.legal-toc{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.35rem;margin:0 0 2.2rem}
.legal-toc h2{font-size:.82rem!important;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin:0 0 .6rem!important}
.legal-toc ol{margin:0 0 0 1.2rem;color:var(--slate)}
.legal-toc li{margin-bottom:.35rem;line-height:1.5}
.legal-toc a{color:var(--sky);text-decoration:none}
.legal-toc a:hover{text-decoration:underline}
.prose h3{scroll-margin-top:6rem}
/* Anchor targets clear the fixed nav — the Home service cards deep-link into
the Services page sections. */
section[id]{scroll-margin-top:6rem}
.legal-note{background:#fbfaf6;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:8px;padding:.8rem 1rem;margin:0 0 1.6rem;font-size:.92rem;color:var(--slate)}
/* Fleet page: full-bleed aircraft banner under the hero */
.fleet-banner{background:var(--navy);line-height:0}
.fleet-banner img{width:100%;height:clamp(260px,44vw,560px);object-fit:cover;object-position:center 55%;display:block}
/* Fleet page: photo hero (aircraft image behind the heading, replaces the separate banner) */
/* Photo page hero. The photograph and the scrim are SEPARATE layers (::before
and ::after) rather than two background-images on one box, because a filter
on the box applies to the composite: the old
`filter:saturate() contrast() brightness()` was lifting the dark scrim just
as much as the photo, so the photo never actually got brighter — it just
greyed out the overlay that protects the headline. Split apart, --hero-filter
hits only the photograph and --scrim stays exactly as dark as it was.
Per-page photo: --hero + --hero-pos. Both inherit into the pseudo-elements. */
.pagehero--photo{
--hero:url('/assets/img/fleet-hero.jpg');
/* Fleet is the only page on the bare default (no --sunset/--coast/etc. modifier).
Shorter min-height means less of this 1.5:1 photo gets cropped top/bottom
at typical desktop heights; the position keeps the tail-to-wing cluster
in frame instead of centering on empty sky/tarmac. */
--hero-pos:center 36%;
/* Near-neutral on purpose: the lift now comes from the lighter scrim, not
from pushing the photograph. Saturation above ~1.1 starts recolouring
the livery blue and the sky rather than just brightening the frame. */
--hero-filter:saturate(1.06) contrast(1.02) brightness(1.1);
/* Heavy under the text column (which caps at 54ch ≈ the left half), then
clearing hard so the photograph actually reads on the right.
The binding constraint is the paragraph, not the heading: headings are
large white type and clear 3:1 easily, while the body copy needs 4.5:1.
Lifting that copy to --mist-bright is what lets this ramp sit lighter
than it used to — worst case over a sunlit white fuselage measures
~5.4:1, better than the heavier scrim it replaces. */
--scrim:linear-gradient(98deg,rgba(4,12,24,.88) 0%,rgba(5,14,28,.8) 32%,rgba(6,18,34,.66) 50%,rgba(8,22,42,.26) 70%,rgba(10,28,52,.05) 100%);
background:#06121F;
padding:11rem 0 3.5rem;min-height:56vh;display:flex;align-items:center}
.pagehero--photo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:var(--hero);background-size:cover;background-position:var(--hero-pos);
background-repeat:no-repeat;filter:var(--hero-filter)}
/* .wrap has no explicit width, so as a flex item (needed above for vertical
centering) it shrink-wraps to its content's natural width on the main axis
instead of spanning the row like it does everywhere else in normal block
flow — margin:auto then centers that narrower box, pushing the heading
right of the padding edge instead of flush against it. Forcing it back to
full width restores the same left edge every other section uses. */
.pagehero--photo>.wrap{width:100%}
/* Daylight cockpit shot (SX-ASK) — already bright throughout, so it needs the
least help of any of them. */
.pagehero--flightdeck{--hero:url('/assets/img/careers/flight-deck-hero.jpg');
--hero-pos:center 40%;--hero-filter:saturate(1.02) contrast(1.01) brightness(1.03)}
.pagehero--sunset{--hero:url('/assets/img/heroes/about-sunset.jpg');--hero-pos:center 60%}
/* ACMI hub: marketing asked for frames where the aircraft faces right rather
than showing the tail first (2026-09-25). SX-ASK in full livery, rolling. */
.pagehero--climb{--hero:url('/assets/img/heroes/acmi-hub-1920.jpg');--hero-pos:center 42%;
/* This heading is the longest of any hero and now runs out over the fuselage,
which is mid-grey: white on it measures about 3:1, exactly the large-text
floor, with nothing to spare. The scrim holds further right than the shared
one so the last two words are not riding the threshold. */
--scrim:linear-gradient(98deg,rgba(4,12,24,.9) 0%,rgba(5,14,28,.86) 38%,rgba(6,18,34,.76) 58%,rgba(8,22,42,.58) 78%,rgba(10,28,52,.3) 100%)}
.pagehero--coast{--hero:url('/assets/img/heroes/services-corfu.jpg');--hero-pos:center 55%}
/* Clients hero: night ramp shot of SX-RMA (our E195), by Eros Picari, supplied
by marketing 2026-09-25 — registration read off the airframe, not the file
name, which says SX-PTM and is wrong. Unlike the other photo heroes this one
is already near-black across the left two thirds, so the default scrim would
bury the photograph rather than protect the type. It runs lighter, and a
small brightness lift on the photo alone keeps the airframe readable without
touching the scrim's contrast. */
.pagehero--clients{--hero:url('/assets/img/heroes/clients-sx-rma-night-1920.jpg');
--hero-pos:center 52%;
--hero-filter:brightness(1.12) saturate(1.04);
--scrim:linear-gradient(98deg,rgba(4,12,24,.74) 0%,rgba(5,14,28,.62) 34%,rgba(6,18,34,.44) 52%,rgba(8,22,42,.18) 72%,rgba(10,28,52,.02) 100%)}
/* Below the wide breakpoint `cover` crops this frame to its lit centre, so the
paragraph lands on floodlit concrete and the gear bay rather than night sky.
The horizontal falloff above has nothing left to protect there, so narrow
viewports get a near-even scrim instead: the photo loses depth, the body
copy keeps 4.5:1. */
@media(max-width:900px){
.pagehero--clients{
--scrim:linear-gradient(98deg,rgba(4,12,24,.9) 0%,rgba(5,14,28,.86) 45%,rgba(6,18,34,.8) 75%,rgba(8,22,42,.72) 100%)}
}
/* Contact hero reuses the tail-fin shot from the Clients "who we fly for"
cards — a closer, busier frame than the others, so it keeps the heavier
text-dense scrim below. */
.pagehero--contact{--hero:url('/assets/img/client-types/airlines-1180.jpg');--hero-pos:center 40%}
.pagehero--photo p{max-width:54ch}
/* ACMI knowledge-hub articles: long two-line titles plus a byline, so these
three hold the scrim heavier across the text column than the default —
still clearing far more on the right than they used to. */
.pagehero--acmi-what{--hero:url('/assets/img/acmi/hero-what.jpg');--hero-pos:center 46%}
/* Marketing's rule again (2026-09-26): the aircraft must fly to the RIGHT.
The previous frame here ran nose-left, tail first. SX-ASK on approach. */
.pagehero--acmi-compare{--hero:url('/assets/img/acmi/hero-compare-sx-ask-1920.jpg');--hero-pos:center 46%}
.pagehero--acmi-what,.pagehero--acmi-compare,.pagehero--contact{
--scrim:linear-gradient(98deg,rgba(4,12,24,.9) 0%,rgba(5,14,28,.85) 40%,rgba(7,20,38,.7) 60%,rgba(9,26,48,.32) 80%,rgba(10,28,52,.08) 100%)}
/* Body copy over photography rides brighter than the --mist used on solid
navy, so the lighter scrims above still clear AA. */
.pagehero--photo p,.hero .hero__sub,.band p{color:var(--mist-bright)}
/* News index. The takeoff frame from the home band was tried here first and
does not work as a hero: it is a 3.2:1 letterbox strip with the aircraft
running edge to edge, so a hero box of any proportion has to cut into it,
sideways on mid-width screens and top-to-bottom on wide ones. No
background-position setting fixes a shape mismatch. This 2:1 frame has the
aircraft centred with margin on all sides, so cropping takes sky and
hillside instead. It is shared with the ACMI comparison article until a
dedicated news photo arrives. */
/* News finally has its own frame rather than borrowing the ACMI comparison
article's: SX-KAA on short final at Lübeck (2026-09-25). */
.pagehero--news{--hero:url('/assets/img/heroes/news-sx-kaa-1920.jpg');--hero-pos:center 44%}
/* Fleet: taller frame, and the crop sits high enough that the wing's diagonal
isn't sliced by the bottom edge — at the old position the cut landed at
~57% of the frame, straight through the middle of the wing. */
.pagehero--fleet{--hero:url('/assets/img/fleet-hero.jpg');--hero-pos:center 30%;min-height:76vh}
/* Accents over photography use the lighter steel blue, not the mid brand
blue. Both hero photographs put blue on the aircraft exactly where the
headline falls — the fin on /fleet/, the fuselage titles on the home
shot — and mid-blue on mid-blue drops to ~2:1 once the scrim has cleared.
Same substitution already used for .section--navy and .band.
Plain .pagehero (no photo) gets it too: the mid blue only reaches ~3.4:1
on that navy gradient, and it should match the photo heroes anyway. */
.hero .hl,.hero .eyebrow,
.pagehero .hl,.pagehero .eyebrow{color:var(--sky-2)}
.hero .eyebrow::before,.pagehero .eyebrow::before{background:var(--sky-2)}
/* A wide, low-opacity shadow behind type that sits over a photograph. It
reads as separation rather than as a glow, and unlike a scrim tuned to one
composition it holds wherever the photo happens to land behind a given
line at a given window width. Applies to the page-top heroes and to the
mid-page photo bands equally. */
.hero h1,.hero .hero__sub,.hero .eyebrow,
.pagehero--photo h1,.pagehero--photo h2,.pagehero--photo p,
.pagehero--photo .eyebrow,.pagehero--photo .breadcrumb,
.band h2,.band p{text-shadow:0 2px 20px rgba(4,12,24,.6)}
/* Buttons sit on their own solid fill — they don't need it. */
.hero .btn,.pagehero--photo .btn,.band .btn{text-shadow:none}
.pagehero--photo .news-meta{color:#C3D6EE}
/* ::after carries the scrim — it has to fully reset the koru motif that
.pagehero::after sets up, since that rule still matches. */
.pagehero--photo::after{content:"";display:block;position:absolute;inset:0;z-index:0;
width:auto;height:auto;aspect-ratio:auto;transform:none;opacity:1;filter:none;
pointer-events:none;background:var(--scrim)}
@media(max-width:760px){.pagehero--photo{min-height:auto}.pagehero--photo{--hero-pos:center 50%}}
/* Section transitions: fades removed — sections meet with clean, hard edges. */
/* Fleet cards: real per-type aircraft illustration in the header */
.tail__photo{margin:-.6rem -.4rem .2rem;text-align:center}
.tail__photo img{width:100%;max-width:460px;height:auto;display:inline-block;
filter:drop-shadow(0 14px 22px rgba(0,0,0,.4))}
.tail__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:.2rem 0 .2rem}
.tail__reg{font-weight:800;font-size:1.05rem;color:#fff;letter-spacing:.03em}
/* Home fleet teaser: compact 4-up aircraft tiles (illustration + type/reg, no spec table) */
.fleetgrid--mini{grid-template-columns:repeat(4,1fr);gap:1.1rem}
.fleetgrid--mini .tail{padding:1.1rem 1.1rem 1.25rem}
.fleetgrid--mini .tail__photo{margin:-.3rem -.2rem .2rem}
.fleetgrid--mini .tail__head{flex-wrap:wrap;gap:.3rem}
.fleetgrid--mini .tail__reg{font-size:.98rem}
@media(max-width:900px){.fleetgrid--mini{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fleetgrid--mini{grid-template-columns:1fr}}
/* ---- News index cards + article layout (news transfer) ---- */
.newscards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:2.8rem}
.ncard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
border-radius:16px;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.ncard:hover{transform:translateY(-6px);box-shadow:0 26px 55px rgba(10,29,51,.12);border-color:var(--sky)}
.ncard a.ncard__imglink{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--navy)}
.ncard__imglink img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.ncard:hover .ncard__imglink img{transform:scale(1.04)}
.ncard__body{padding:1.5rem 1.5rem 1.7rem;display:flex;flex-direction:column;flex:1}
.ncard__meta{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem}
.ncard__meta time{color:var(--sky);font-weight:700;font-size:.82rem}
.ncard__meta .tag{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--gold);border:1px solid rgba(44,108,221,.32);border-radius:999px;padding:.15rem .55rem}
.ncard__body h3{font-size:1.12rem;line-height:1.35;margin-bottom:.55rem}
.ncard__body h3 a{color:var(--navy);text-decoration:none}
.ncard__body h3 a:hover{color:var(--sky)}
.ncard__body p{color:var(--slate);font-size:.93rem;line-height:1.6;margin:0 0 1.15rem}
.ncard__body .link-arrow{margin-top:auto}
@media(max-width:960px){.newscards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.newscards{grid-template-columns:1fr}}
.news-meta{display:flex;align-items:center;gap:.8rem;margin-top:1.2rem;color:var(--mist);font-size:.9rem}
.news-meta .tag{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--sky-2);border:1px solid rgba(120,190,240,.4);border-radius:999px;padding:.15rem .6rem}
.article__hero{margin:0 auto 2.4rem;max-width:920px}
.article__hero img{width:100%;height:auto;border-radius:16px;display:block;box-shadow:var(--shadow-card)}
/* News heroes are wrapped in by render.js for the WebP swap.
is inline by default, which would break the card's height:100% image. */
.ncard__imglink picture{display:block;height:100%}
.article__hero picture{display:block}
.prose figure{margin:1.8rem 0}
.prose figure img{max-width:100%;height:auto;border-radius:12px;display:block}
.prose figure.alignnone,.prose figure.alignleft,.prose figure.alignright{width:auto!important}
.prose figcaption{font-size:.85rem;color:var(--slate);margin-top:.5rem;font-style:italic}
.prose img{max-width:100%;height:auto;border-radius:10px}
.news-back{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line)}
/* Homepage latest-news cards: real photos */
.news .thumb.has-photo{background:var(--navy)}
.news .thumb.has-photo::after{display:none}
.news .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* ===== Client logo marquee (#partners) ===== */
#partners{padding-block:4.2rem}
#partners .k{justify-content:center}
#partners h2,#partners .lead{text-align:center}
#partners .lead{max-width:640px;margin-inline:auto}
.marquee{position:relative;overflow:hidden;margin-top:2.6rem;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__row{display:flex;align-items:center;gap:4rem;width:max-content;
animation:marq 100s linear infinite;will-change:transform}
.marquee:hover .marquee__row{animation-play-state:paused}
.marquee__row img{height:40px;width:auto;display:block;opacity:.96;
transition:opacity .3s ease}
.marquee__row img:hover{opacity:1}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
.marquee{-webkit-mask-image:none;mask-image:none}
.marquee__row{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:2.4rem 3.4rem}
.marquee__row--dup{display:none}
}
@media (max-width:640px){.marquee__row img{height:30px}.marquee__row{gap:2.6rem}}
/* ===== Contact page ===== */
.contact-primary{display:grid;grid-template-columns:1.15fr .85fr;gap:2.6rem;align-items:center;
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:2.6rem;box-shadow:var(--shadow-card);margin-bottom:1.4rem}
@media(max-width:820px){.contact-primary{grid-template-columns:1fr;gap:1.8rem;padding:2.1rem}}
.contact-primary__intro{min-width:0}
.contact-primary .k{margin-bottom:.6rem}
.contact-primary h2{margin:0 0 .6rem}
.contact-primary .lead{margin:0;max-width:46ch}
.contact-actions{display:flex;flex-direction:column;gap:.85rem}
.ca{display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--navy);
padding:.85rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--panel);
transition:border-color .2s var(--ease),transform .2s var(--ease),background .2s}
.ca:hover{border-color:var(--accent);transform:translateY(-2px);background:#fff}
.ca__ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--brand);color:#fff;
display:flex;align-items:center;justify-content:center}
.ca__ic svg{width:22px;height:22px}
.ca__tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ca__tx small{font-family:var(--font);font-weight:700;font-size:.68rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold-ink);margin-bottom:.1rem}
.ca__tx b{font-family:var(--display);font-weight:700;font-size:clamp(1.02rem,1.9vw,1.3rem);
letter-spacing:-.01em;word-break:break-word}
.contact-primary__note{color:var(--slate);font-size:.9rem;margin-top:1.2rem}
.contact-depts{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media(max-width:840px){.contact-depts{grid-template-columns:1fr}}
.dept{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;
box-shadow:var(--shadow-card);transition:transform .2s var(--ease),border-color .2s}
.dept:hover{transform:translateY(-3px);border-color:var(--accent)}
.dept__ic{width:44px;height:44px;border-radius:12px;background:var(--panel);border:1px solid var(--line);
color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.dept__ic svg{width:22px;height:22px}
.dept h3{margin-bottom:.35rem}
.dept p{color:var(--slate);margin-bottom:.9rem}
.dept .muted{font-size:.9rem}
.dept a{word-break:break-word}
.contact-depts--single{grid-template-columns:1fr}
/* ===== RFQ / requirement intake (/contact-us/) ===== */
.rfq__required-note{color:var(--slate);font-size:.85rem;margin-top:.6rem}
.rfq__hint{color:var(--slate);font-size:.8rem;line-height:1.5}
.rfq{margin-top:2.4rem}
.rfq__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem}
.rfq .f{margin:0;display:flex;flex-direction:column;gap:.4rem}
.rfq .f--wide{grid-column:1 / -1}
.rfq label{font-size:.82rem;font-weight:700;color:var(--navy);letter-spacing:.01em}
.rfq label span{color:var(--gold)}
.rfq input,.rfq select,.rfq textarea{font:inherit;font-size:.95rem;color:var(--navy);
background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
padding:.72rem .85rem;width:100%;transition:border-color .2s,box-shadow .2s}
.rfq input:focus,.rfq select:focus,.rfq textarea:focus{outline:none;border-color:var(--sky);
box-shadow:0 0 0 3px rgba(54,95,167,.14)}
.rfq input:user-invalid,.rfq textarea:user-invalid{border-color:#B4402F}
.rfq textarea{resize:vertical;min-height:120px;line-height:1.6}
.rfq__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rfq__foot{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-top:1.6rem}
.rfq__note{color:var(--slate);font-size:.8rem;line-height:1.55;max-width:46ch;margin:0}
.rfq__status{margin:1.2rem 0 0;font-size:.92rem;font-weight:600;line-height:1.55}
.rfq__status:empty{display:none}
.rfq__status.ok{color:#1C7A4E}
.rfq__status.err{color:#B4402F}
.rfq[data-busy] button[type=submit]{opacity:.6;pointer-events:none}
@media(max-width:720px){.rfq__grid{grid-template-columns:1fr}}
/* Dangerous goods: permission markers, key and limit tables.
The markers replace the icon images the draft arrived as, so the cabin/hold
answer is real text — searchable, translatable and read out by screen
readers rather than locked inside a PNG. */
.dgsprite{position:absolute;width:0;height:0;overflow:hidden}
.dgperm,.dgkey{list-style:none;margin:0 0 1.3rem;padding:0}
.dgperm{background:var(--panel);border-radius:12px;padding:1rem 1.2rem}
.dgperm li,.dgkey li{position:relative;padding-left:2.4rem;margin-bottom:.55rem;color:var(--ink);
font-weight:600;font-size:.95rem;line-height:1.5}
.dgperm li:last-child,.dgkey li:last-child{margin-bottom:0}
.dgperm__ic{position:absolute;left:0;top:.05rem;width:1.5rem;height:1.5rem;fill:none;
stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* A crossed marker is the negative of the same symbol, so the badge sits on the
base icon rather than needing a second set of artwork. */
.dgperm li.is-no::after,.dgkey li.is-no::after{content:"";position:absolute;left:.85rem;top:.72rem;
width:.85rem;height:.85rem;border-radius:50%;background:#fff no-repeat center/contain;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232C6CDD'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.dgkey{background:none;padding:0}
.dgformula{font-family:'Archivo',system-ui,sans-serif;font-weight:600;letter-spacing:.01em;
background:var(--panel);border-radius:10px;padding:.85rem 1.1rem;display:inline-block}
.dgtable-wrap{overflow-x:auto;margin:0 0 1.3rem;-webkit-overflow-scrolling:touch}
.dgtable{border-collapse:collapse;width:100%;min-width:34rem;font-size:.92rem}
.dgtable caption{text-align:left;font-weight:700;color:var(--ink);padding-bottom:.6rem}
.dgtable th,.dgtable td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line);
color:var(--slate);vertical-align:top}
.dgtable thead th{color:var(--ink);font-weight:700;border-bottom-width:2px}
.dgtable tbody tr:nth-child(odd){background:rgba(44,108,221,.045)}
@media(max-width:560px){.dgperm li,.dgkey li{padding-left:2.1rem;font-size:.9rem}}
/* Footnote markers inside a limits table sit against a number ("20*"), so the
underline .prose a would give them reads as part of the figure. */
.dgtable sup a{text-decoration:none;font-weight:700;padding-left:.1em}
.dgtable sup a:hover,.dgtable sup a:focus-visible{text-decoration:underline}
/* A photograph used as a breather between two sections. Full-bleed was tried
first and marketing read it as heavy: it now sits in the text column, left
aligned and well under its width, so the section has air on three sides.
No text over it, so no scrim and no contrast problem to manage. */
/* Marketing read the original spacing as too airy. The section keeps no top
padding and pulls up into the section above, so the gap there is that
section's rhythm minus a touch rather than its rhythm plus ours. The bottom
is padding, NOT a negative margin: the next section has a different
background, and pulling into it ran the grey up across the photo's lower
edge. */
.photoband-sec{padding:0 0 2.6rem;margin-top:-2rem}
.photoband{max-width:min(640px,100%);margin:0 auto 0 0;line-height:0;
border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-card)}
.photoband img{display:block;width:100%;height:auto}
@media(max-width:700px){.photoband-sec{padding:0 0 1.6rem;margin-top:-1rem}}
/* A credential card that is itself a link to its certificate. An anchor
inherits none of .card's typography, so the colour and underline are reset
here, and the affordance is spelled out: a card that downloads a document
should say so, with the format and weight, before it is clicked. */
a.card--doc{text-decoration:none;color:inherit}
a.card--doc h3,a.card--doc p{color:inherit}
a.card--doc p{color:var(--slate)}
.card__doc{margin-top:auto;padding-top:1.2rem;font-weight:700;color:var(--gold);
display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.card__doc::after{content:"\2197";font-weight:700}
.card__doc-meta{font-weight:500;font-size:.82rem;color:var(--slate);order:3;flex-basis:100%}
a.card--doc:hover .card__doc,a.card--doc:focus-visible .card__doc{text-decoration:underline}
a.card--doc:focus-visible{outline:3px solid var(--gold);outline-offset:3px}