/* Brand fonts, self-hosted (latin subset, OFL; from Fontsource). Schibsted Grotesk is one variable file for all weights. */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/libre-caslon-text-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/libre-caslon-text-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/libre-caslon-text-latin-700-normal.woff2) format("woff2")}
/* Peregrine Howard Aviation — website draft. Tokens follow docs/brand-handoff.md. */
:root{
  --midnight:#13123A; --ivory:#F3EFE5; --forest:#0D1814; --air:#CBD9E6; --brown:#5B5148;
  --paper:#F3EFE5; --ink:#13123A; --rule:rgba(91,81,72,.35); --rule-dark:rgba(243,239,229,.18);
  --serif:"Libre Caslon Text",Georgia,serif; --sans:"Schibsted Grotesk",system-ui,sans-serif;
  --wrap:1240px; --gut:clamp(16px,4vw,48px); --sec:clamp(72px,10vw,140px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.08;text-wrap:balance}
p,li{text-wrap:pretty}
h1{font-size:clamp(42px,6.4vw,88px);letter-spacing:-.028em;line-height:1.1}  /* was 1.02: descenders touched the line below (Pike, 13 Oct) */
h2{font-size:clamp(32px,4.2vw,56px);letter-spacing:-.022em}
h3{font-size:clamp(22px,2vw,28px);line-height:1.2}
p+p{margin-top:1em}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.55;max-width:38em}
.label,.eyebrow{font:600 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.eyebrow{display:flex;gap:14px;align-items:center;margin-bottom:28px;color:var(--brown)}
.eyebrow:not(:has(b))::before{content:"";width:28px;height:1px;background:var(--brown)}
.dark .eyebrow:not(:has(b))::before,.navy .eyebrow:not(:has(b))::before,.blueprint .eyebrow:not(:has(b))::before{background:var(--air)}
.eyebrow b{font-weight:600;color:var(--brown)}
.eyebrow span{color:var(--ink)}
.dark .eyebrow span,.navy .eyebrow span,.blueprint .eyebrow span{color:var(--ivory)} .dark .eyebrow,.dark .eyebrow b,.navy .eyebrow,.navy .eyebrow b,.blueprint .eyebrow{color:var(--air)}
.muted{color:var(--brown)}

/* Draft ribbon */
.draft{background:var(--air);color:var(--midnight);font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:9px var(--gut)}

/* Placeholders: anything not client-verified */
.ph{background:repeating-linear-gradient(135deg,rgba(203,217,230,.55) 0 6px,rgba(203,217,230,.25) 6px 12px);outline:1px dashed #6b86a3;outline-offset:2px;padding:0 .2em}
.ph-tag{display:inline-block;font:700 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;background:var(--air);color:var(--midnight);padding:5px 7px;vertical-align:middle}
.dark .ph{background:rgba(203,217,230,.16);outline-color:var(--air)}

/* Buttons: square rectangles, uppercase, tracked */
.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:12px;font:600 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:17px 24px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;transition:background .2s,color .2s}
.btn::after{content:"→";font-size:15px;letter-spacing:0;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn:hover::after{transform:translateX(4px)}
.btn.solid{background:var(--midnight);color:var(--ivory);border-color:var(--midnight)}
.btn.solid:hover{background:var(--forest)}
.btn.light{background:var(--ivory);color:var(--midnight);border-color:var(--ivory)}
.btn.light:hover{background:var(--air);border-color:var(--air)}
.btn.ghost:hover{background:var(--midnight);color:var(--ivory)}
.dark .btn.ghost:hover,.hero .btn.ghost:hover{background:var(--ivory);color:var(--midnight)}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.link{font:600 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding-bottom:6px;background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;transition:background-size .4s cubic-bezier(.6,0,.2,1)}
.link:hover{background-size:0 1px;background-position:right bottom}

/* Header */
/* Header: the full mark (168 px; 30% under the guide's 240 px minimum, per Matt 8 Oct) sits inside the bar at the top of the page.
   On scroll the bar compresses to the falcon icon alone. The header is fixed and the page reserves
   its full height, so nothing below it moves when it compresses. */
:root{--head-h:108px;--head-h-min:64px}
html{scroll-padding-top:calc(var(--head-h-min) + 16px)}
body{padding-top:var(--head-h);background:linear-gradient(var(--forest),var(--forest)) top/100% var(--head-h) no-repeat,var(--paper)}
/* ^ the reserved space is painted Black Forest, so no ivory shows while the bar expands back at the top */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--forest);color:var(--ivory);border-bottom:1px solid var(--rule-dark)}
.site-head .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--head-h);gap:24px;transition:height .4s cubic-bezier(.6,0,.2,1)}
.site-head.scrolled .wrap{height:var(--head-h-min)}
.logo{position:relative;display:block;flex:none;width:168px;height:77px;transition:height .4s cubic-bezier(.6,0,.2,1)}
.logo img{position:absolute;left:0;top:50%;transition:opacity .3s ease,transform .4s cubic-bezier(.6,0,.2,1)}
.logo-full{width:168px;height:auto;transform:translateY(-50%);transform-origin:left center}
.logo-icon{height:32px;width:auto;opacity:0;transform:translateY(-50%) scale(1.6);transform-origin:left center}
.site-head.scrolled .logo{height:40px}
.site-head.scrolled .logo-full{transform:translateY(-50%) scale(.6)}
/* Phones and tablets: the slim bar with the falcon icon only (icon minimum is 24 px). */
@media (max-width:1180px){
  :root{--head-h:72px;--head-h-min:72px}
  .logo,.site-head.scrolled .logo{width:auto;height:auto}
  /* Full logo with the company name at every size (Patrick, 13 Oct); it sits in flow so it sizes the link */
  .logo .logo-icon{display:none}
  .logo img.logo-full,.site-head.scrolled .logo img.logo-full{position:static;display:block;opacity:1;transform:none;width:132px;height:auto}
}
.nav{display:flex;gap:clamp(16px,1.7vw,26px);list-style:none;align-items:center}
.nav a{font:500 12px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;text-decoration:none;opacity:.82;padding:8px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{opacity:1;border-color:var(--air)}
/* Services menu */
.has-menu{position:relative}
.menu-toggle{background:none;border:0;border-bottom:1px solid transparent;color:inherit;cursor:pointer;font:500 12px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;opacity:.82;padding:8px 0;display:flex;align-items:center;gap:8px}
.menu-toggle::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.menu-toggle:hover,.menu-toggle.current,.has-menu:focus-within .menu-toggle{opacity:1}
/* Links and the Services button share one box so their text sits on the same line */
.nav>li>a,.nav .menu-toggle{display:flex;align-items:center;height:30px;padding:0;line-height:1;white-space:nowrap}
.menu-toggle.current{border-color:var(--air)}
.submenu{list-style:none;position:absolute;top:calc(100% + 22px);left:-22px;width:300px;background:var(--forest);border:1px solid var(--rule-dark);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .25s,visibility 0s .25s}
.submenu::before{content:"";position:absolute;left:0;right:0;top:-23px;height:23px}
.has-menu:hover .submenu,.has-menu:focus-within .submenu,.has-menu.open .submenu{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
.has-menu:hover .menu-toggle::after,.has-menu.open .menu-toggle::after{transform:translateY(1px) rotate(225deg)}
.submenu a{display:block;padding:13px 22px;border:0;opacity:1;text-transform:none;letter-spacing:0}
.submenu a b{display:block;font:500 12.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;margin-bottom:6px}
.submenu a span{display:block;font:400 13px/1.3 var(--sans);opacity:.6}
.submenu a:hover,.submenu a[aria-current]{background:rgba(243,239,229,.06)}
.submenu a[aria-current] b{color:var(--air)}
.head-cta{padding:13px 16px}
.nav-portal{display:none}
.menu-btn{display:none;background:none;border:0;color:var(--ivory);width:44px;height:44px;cursor:pointer;font-size:18px}
@media (max-width:1180px){
  .nav,.head-cta{display:none}
  .menu-btn{display:block}
  .site-head.open .nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--forest);padding:12px var(--gut) 28px;gap:4px;border-bottom:1px solid var(--rule-dark)}
  .site-head.open .nav a{display:block;height:auto;padding:14px 0;font-size:14px;border-bottom:1px solid var(--rule-dark)}
  .site-head.open .nav{align-items:stretch}
  .site-head.open .nav-portal{display:list-item}
  .menu-toggle{display:none}
  .submenu{position:static;width:auto;opacity:1;visibility:visible;transform:none;background:none;border:0;padding:0}
  .submenu::before{display:none}
  .site-head.open .submenu a{padding:14px 0}
  .submenu a b{font-size:14px;margin:0}
  .submenu a span{display:none}
}

/* Sections */
section{padding:var(--sec) 0}
.dark{background:var(--forest);color:var(--ivory)}
.navy{background:var(--midnight);color:var(--ivory)}
.rule-top{border-top:1px solid var(--rule)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.sec-head p{max-width:34em}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}

/* Hero */
.hero{position:relative;min-height:min(calc(100vh - var(--head-h)),780px);display:flex;align-items:flex-end;color:var(--ivory);padding:0;overflow:hidden;background:var(--forest)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,24,20,.88) 0%,rgba(13,24,20,.6) 45%,rgba(13,24,20,.15) 80%),linear-gradient(180deg,rgba(13,24,20,0) 50%,rgba(13,24,20,.75) 100%);z-index:1}
@media (max-width:760px){.hero::before{background:linear-gradient(180deg,rgba(13,24,20,.5),rgba(13,24,20,.9))}}
.hero .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,7vw,96px);padding-top:140px}
.hero h1{max-width:13em}
.hero .lede{margin-top:26px;opacity:.92}
.hero .eyebrow,.hero .eyebrow b{color:var(--air)} .hero .eyebrow span{color:var(--ivory)}
.hero-foot{display:flex;justify-content:space-between;gap:20px;margin-top:56px;padding-top:20px;border-top:1px solid var(--rule-dark);font:500 11.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.page-hero{padding:clamp(80px,10vw,140px) 0 clamp(56px,7vw,96px)}
.page-hero h1{max-width:14em}
.page-hero .lede{margin-top:28px}
.page-hero.with-img{display:grid;grid-template-columns:1.1fr 1fr;gap:0;padding:0;overflow:hidden}
.page-hero.with-img .txt{padding:clamp(72px,9vw,128px) clamp(24px,5vw,72px) clamp(56px,7vw,96px) max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
/* The photo fills its column; the text sets the height, so tall photos can't stretch the hero */
.page-hero.with-img{position:relative;min-height:clamp(520px,68vh,680px)}
.page-hero.with-img>img{position:absolute;top:0;right:0;bottom:0;width:calc(100% / 2.1);height:100%;object-fit:cover}
/* Half-width column: scale the headline to the column, not the page */
.page-hero.with-img h1{font-size:clamp(38px,4.3vw,62px);line-height:1.05}
@media (max-width:860px){.page-hero.with-img{grid-template-columns:1fr;min-height:0}.page-hero.with-img .txt{padding:64px var(--gut) 48px}.page-hero.with-img>img{position:static;width:100%;height:340px}}

/* Chevron strip: Warm Ivory and Black Forest only, small */
.chev{height:26px;background:url(assets/brand/wing-chevron-tile-dark.svg) repeat-x center/26px auto}
.chev.light{background-image:url(assets/brand/wing-chevron-tile.svg)}

/* Grids */
.grid{display:grid;gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.grid>*{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:clamp(24px,3vw,40px)}
.dark .grid,.dark .grid>*,.navy .grid,.navy .grid>*{border-color:var(--rule-dark)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card .num{font:600 12px/1 var(--sans);letter-spacing:.16em;color:var(--brown);margin-bottom:44px;display:block}
.dark .card .num,.navy .card .num{color:var(--air)}
.card{display:flex;flex-direction:column}
.card h3{margin-bottom:14px}
.card .link{margin-top:auto;padding-top:26px;align-self:flex-start}
.state{display:inline-flex;align-items:center;gap:8px;font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brown);margin-bottom:44px}
.state::before{content:"";width:7px;height:7px;background:var(--midnight)}
.state.dev::before{background:transparent;border:1px solid var(--brown)}
.card p{font-size:15.5px}

.card.future{background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(91,81,72,.05) 10px 11px)}
.status{display:inline-block;font:700 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;border:1px solid currentColor;padding:5px 7px;margin-left:8px;vertical-align:4px;color:var(--brown)}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.split.top{align-items:start}
.split img.photo{width:100%;aspect-ratio:4/5;object-fit:cover}
.split img.wide{aspect-ratio:4/3}
.split .stack{display:grid;gap:28px}
.split .stack img.photo{aspect-ratio:3/2}
@media (max-width:860px){.split{grid-template-columns:1fr}}
figure figcaption,.figline{display:flex;gap:14px;font:500 12.5px/1.4 var(--sans);margin-top:12px}
.figline .n{color:var(--brown);font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.dark .figline .n{color:var(--air)}

/* Lists with hairlines */
.lines{list-style:none;border-top:1px solid var(--rule)}
.lines li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:22px 0;border-bottom:1px solid var(--rule)}
.lines li b{width:7px;height:7px;background:var(--brown);margin-top:9px}
.dark .lines,.dark .lines li{border-color:var(--rule-dark)} .dark .lines li b,.navy .lines li b{background:var(--air)}
.lines h3{font:600 17px/1.4 var(--sans);letter-spacing:normal;margin-bottom:4px}
.lines p{font-size:15.5px;opacity:.85}
.lines p.fine{font-size:13px;font-style:italic;opacity:.7;margin-top:8px}

/* Process steps */
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--rule)}
.steps>div{padding:26px 18px 0 0;position:relative}
.steps>div::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--midnight)}
.dark .steps{border-color:var(--rule-dark)} .dark .steps>div::before{background:var(--air)}
.steps .n{font:600 12px/1 var(--sans);letter-spacing:.14em;color:var(--brown);display:block;margin-bottom:14px}
.dark .steps .n{color:var(--air)}
.steps h3{font:400 21px/1.2 var(--serif);letter-spacing:normal;margin-bottom:8px}
.steps p{font-size:14.5px;opacity:.85}
.steps.s5{grid-template-columns:repeat(5,minmax(0,1fr))}
.steps.s4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.steps,.steps.s5,.steps.s4{grid-template-columns:1fr 1fr;row-gap:36px}}
@media (max-width:560px){.steps,.steps.s5,.steps.s4{grid-template-columns:1fr}}

/* Statement band */
.statement h2{font-size:clamp(36px,5.4vw,76px);max-width:15em}
.statement .lede{margin-top:28px;opacity:.88}

/* Stats */
.stats .stat .v{font:400 clamp(44px,5vw,72px)/1 var(--serif);display:block;margin-bottom:14px}
.stats .stat p{font-size:14.5px}

/* Schematic figures */
.fig-card{display:flex;flex-direction:column;background:var(--paper)}
.fig-card .draw{padding:8px 0 4px;color:var(--midnight)}
.fig-card.mini{padding:28px 24px 22px;min-height:0}
.fig-card.mini .figline{margin-top:18px}
/* Home: the four featured aircraft draw in sequence, left to right */
.fig-card.mini:nth-child(2) .draw-svg{--dd:.5s}
.fig-card.mini:nth-child(3) .draw-svg{--dd:1s}
.fig-card.mini:nth-child(4) .draw-svg{--dd:1.5s}
@media (max-width:620px){.fig-card.mini .draw-svg{--dd:0s}}
.fig-card.mini .draw-svg{color:var(--midnight)}
.fig-card .meta{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rule);padding-top:14px;margin-top:12px;gap:12px}
.fig-card h3{margin:18px 0 6px}
.specs{list-style:none;margin:16px 0 0;font-size:14px;border-top:1px solid var(--rule)}
.specs li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--rule);gap:12px;font-variant-numeric:tabular-nums}
.specs li span:last-child{text-align:right}
.specs li span:first-child{color:var(--brown);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11.5px}
.fig-card .btns{margin-top:auto;padding-top:28px}
.blueprint{background:var(--midnight);color:var(--ivory)}
.blueprint .fig-card{background:transparent}

/* Quotes */
.quotes{position:relative}
.quotes{display:grid}
.quote{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .5s}
.quote.on{visibility:visible;opacity:1}
dialog .quote{visibility:visible;opacity:1}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.quote blockquote{font:400 clamp(24px,3vw,40px)/1.3 var(--serif);max-width:28em;text-indent:-.42em;letter-spacing:-.01em}
.quote cite{display:block;font:500 14px/1.5 var(--sans);font-style:normal;margin-top:28px}
.quote cite b{display:block;font-weight:600}
.quote .src{display:block;font-size:12px;color:var(--brown);margin-top:6px}
.dark .quote .src{color:var(--air)}
.q-ctrl{display:flex;gap:10px;margin-top:40px;align-items:center}
.q-ctrl button{width:44px;height:44px;border:1px solid currentColor;background:none;color:inherit;cursor:pointer;font-size:16px}
/* Pressed (paused) state: explicit colours, because currentColor equals the background on dark sections */
.q-ctrl [data-pause][aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.dark .q-ctrl [data-pause][aria-pressed="true"],.navy .q-ctrl [data-pause][aria-pressed="true"]{background:var(--ivory);border-color:var(--ivory);color:var(--midnight)}
.q-ctrl .count{font:600 12px/1 var(--sans);letter-spacing:.14em;margin-left:10px}

/* Partner logo grid, WorkOS style. One color, even sizes. */
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.logos>*{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;padding:22px;position:relative;background:var(--paper)}
.logos img{max-height:46px;max-width:78%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.78;transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.logos>*:hover img{opacity:1;transform:scale(1.04)}
.logos button{border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);cursor:pointer;font:inherit;color:inherit}
.logos button::after{content:"Read quote";position:absolute;bottom:10px;left:0;right:0;text-align:center;font:600 9.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brown);opacity:0;transition:opacity .2s}
.logos button:hover::after,.logos button:focus-visible::after{opacity:1}
.logos button:hover{background:#ebe5d7}
.logos .oem{background:#ece7da}
.logos .join{flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;text-decoration:none;font:400 20px/1.2 var(--serif);padding:22px;background:var(--midnight);color:var(--ivory);transition:background .3s}
.logos .join span{font:600 12px/1 var(--sans);white-space:nowrap;letter-spacing:.14em;text-transform:uppercase;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.logos .join:hover{background:var(--forest)}
.logos .join:hover span{transform:translateX(4px)}
.logos-label{margin-bottom:18px}
.logos.makers{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:980px){.logos,.logos.makers{grid-template-columns:repeat(4,minmax(0,1fr))}.logos.makers{max-width:none}}
@media (max-width:560px){.logos,.logos.makers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.logo-note{display:flex;justify-content:space-between;gap:20px;margin-top:18px;font-size:13px;color:var(--brown);flex-wrap:wrap}
dialog.q-pop{border:0;max-width:620px;width:calc(100% - 32px);padding:44px;background:var(--ivory);color:var(--midnight)}
dialog.q-pop::backdrop{background:rgba(13,24,20,.7)}
dialog.q-pop blockquote{font:400 24px/1.35 var(--serif)}
dialog.q-pop cite{display:block;font:500 14px/1.5 var(--sans);font-style:normal;margin-top:22px}
dialog.q-pop .src{display:block;font-size:12px;color:var(--brown);margin-top:4px}
dialog.q-pop form{margin-top:28px}

/* Doors (audience routing) */
.door{display:flex;flex-direction:column;text-decoration:none;min-height:280px;transition:background .2s}
.door:hover{background:rgba(203,217,230,.25)}
.dark .door:hover{background:rgba(243,239,229,.05)}
.door .label{color:var(--brown);margin-bottom:auto}
.dark .door .label{color:var(--air)}
.door h3{margin:40px 0 10px}
.door .go{margin-top:auto;padding-top:22px;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.door:hover .go{transform:translateX(4px)}
.door h3{transition:color .3s}

/* Forms (not wired) */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px}
.form .full{grid-column:1/-1}
.form label{display:block;font:600 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px;color:var(--brown)}
.dark .form label{color:var(--air)}
.form input,.form select,.form textarea{width:100%;font:400 16px/1.4 var(--sans);padding:14px 14px;border:1px solid var(--rule);background:transparent;color:inherit;border-radius:0;-webkit-appearance:none;appearance:none}
.dark .form input,.dark .form select,.dark .form textarea{border-color:rgba(243,239,229,.3)}
.dark .form option{color:var(--midnight)}
.form textarea{min-height:110px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--air);outline-offset:0}
.form .choice{display:flex;flex-wrap:wrap;gap:10px}
.form .choice label{display:flex;align-items:center;gap:8px;border:1px solid var(--rule);padding:12px 14px;margin:0;cursor:pointer;color:inherit;letter-spacing:.1em}
.form .choice input{width:auto}
.form-note{font-size:12.5px;color:var(--brown);margin-top:14px}
.dark .form-note{color:var(--air)}
.form-done{display:none;padding:24px;border:1px solid var(--rule);margin-top:20px}
@media (max-width:620px){.form{grid-template-columns:1fr}}

/* Tabs (I have / I need) */
.tabs{display:flex;border-bottom:1px solid var(--rule);margin-bottom:40px}
.tabs button{font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:20px 28px;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;color:var(--brown)}
.tabs button[aria-selected=true]{color:var(--midnight);border-color:var(--midnight)}
.tab-panel{display:none} .tab-panel.on{display:block}

/* Flywheel figure */
/* Flywheel, drawn as a heading indicator */
.fw{max-width:520px;margin:0 auto}
.flywheel{display:block;width:100%;height:auto}
.flywheel .bezel{fill:none;stroke:var(--midnight);stroke-width:1.2}
.flywheel .ticks{fill:none;stroke:var(--brown);stroke-width:1}
.flywheel .lubber,.flywheel .arrow{fill:var(--midnight)}
.flywheel .arc{fill:none;stroke:var(--midnight);stroke-width:1.6}
.flywheel .st{fill:var(--midnight);stroke:var(--midnight);stroke-width:1.4;transform-box:fill-box;transform-origin:center;transition:fill .3s,scale .3s}
.flywheel .lb{font:600 11.5px var(--sans);letter-spacing:.2em;fill:var(--midnight);transition:fill .3s}
.fw .figline{justify-content:center;margin-top:6px}
.fw-legend{list-style:none;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);margin-top:26px}
.fw-legend li{display:grid;grid-template-columns:34px 1fr;gap:6px;padding:14px 12px 14px 0;border-bottom:1px solid var(--rule);font-size:14px;line-height:1.45;cursor:default;transition:background .3s}
.fw-legend li:nth-child(odd){border-right:1px solid var(--rule)}
.fw-legend li:nth-child(even){padding-left:14px}
.fw-legend b{font:600 11px/1.9 var(--sans);letter-spacing:.14em;color:var(--brown)}
.fw-legend strong{display:block;font-weight:600}
.fw-legend li.on{background:rgba(203,217,230,.4)}
.fw[data-active="0"] .st0,.fw[data-active="1"] .st1,.fw[data-active="2"] .st2,.fw[data-active="3"] .st3{scale:1.5}
.fw[data-active] .lb{fill:rgba(19,18,58,.35)}
.fw[data-active="0"] .lb0,.fw[data-active="1"] .lb1,.fw[data-active="2"] .lb2,.fw[data-active="3"] .lb3{fill:var(--midnight)}
@media (max-width:420px){.fw-legend{grid-template-columns:1fr}.fw-legend li:nth-child(odd){border-right:0}.fw-legend li:nth-child(even){padding-left:0}}
/* Sequence: dial appears, then each leg of the loop draws in turn and its next station lights */
.flywheel .bezel,.flywheel .ticks,.flywheel .lubber,.flywheel .lb{transition:opacity .9s ease}
.flywheel .ln.arc{transition:stroke-dashoffset .7s cubic-bezier(.5,0,.3,1);transition-delay:calc(.5s + var(--i) * .75s)}
.flywheel .arrow{transition:opacity .2s;transition-delay:calc(1.15s + var(--i) * .75s)}
.flywheel .st{transition:fill .3s,scale .3s;transition-delay:calc(.35s + var(--i) * .75s),0s}
html.js .flywheel:not(.drawn) .bezel,html.js .flywheel:not(.drawn) .ticks,html.js .flywheel:not(.drawn) .lubber,html.js .flywheel:not(.drawn) .lb,html.js .flywheel:not(.drawn) .arrow{opacity:0;transition:none}
html.js .flywheel:not(.drawn) .st{fill:var(--paper);transition:none}

/* Team */
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:22px;background:#e6e0d2}
.person h3{margin-bottom:6px}
.person .label{color:var(--brown);margin-bottom:16px;display:block}
.person p{font-size:15px}
.person .contact{margin-top:18px;font-size:14px;line-height:1.8}
.portrait-ph{aspect-ratio:4/5;margin-bottom:22px;display:flex;align-items:center;justify-content:center;background:#e6e0d2;color:var(--brown);font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}

/* Insights */
.post{display:flex;flex-direction:column;text-decoration:none}
.post .thumb{aspect-ratio:3/2;background:#e6e0d2;margin-bottom:22px;overflow:hidden}
.post .thumb img{width:100%;height:100%;object-fit:cover}
.post .label{color:var(--brown);margin-bottom:12px}
.post h3{margin-bottom:10px}
.post p{font-size:15px}

/* Crest */
.crest-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:center}
.crest-wrap img{max-width:360px;width:100%;margin:0 auto}
@media (max-width:860px){.crest-wrap{grid-template-columns:1fr}}
.values{list-style:none;border-top:1px solid var(--rule);margin-top:30px}
.values li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:16px}
.values li span{color:var(--brown);font-size:13px;text-align:right}

/* Disclaimer */
.disclaimer{font-size:13px;line-height:1.6;border:1px solid var(--rule);padding:18px 20px;max-width:58em}
.dark .disclaimer{border-color:var(--rule-dark);opacity:.85}

/* Gate */
.gate{border:1px solid var(--rule-dark);padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
.gate .lock{width:48px;height:48px;border:1px solid var(--air);display:flex;align-items:center;justify-content:center;font-size:20px}
@media (max-width:760px){.gate{grid-template-columns:1fr}}

/* Footer */
.site-foot{background:var(--forest);color:var(--ivory);padding:clamp(64px,8vw,104px) 0 36px}
.foot-top{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:40px;padding-bottom:56px;border-bottom:1px solid var(--rule-dark)}
.foot-top img{height:56px;width:auto;margin-bottom:24px}
.foot-top h2{font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--air);margin-bottom:18px}
.foot-top ul{list-style:none;font-size:14.5px;line-height:2.1}
.foot-top a{text-decoration:none;opacity:.85} .foot-top a:hover{opacity:1;text-decoration:underline}
.foot-top p{font-size:14.5px;opacity:.85;max-width:22em}
.ig{display:inline-flex;align-items:center;gap:8px}
.ig svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
.ig svg .dot{fill:currentColor;stroke:none}
.foot-bot{display:flex;justify-content:space-between;gap:20px;padding-top:28px;font-size:12.5px;opacity:.7;flex-wrap:wrap}
@media (max-width:860px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-top{grid-template-columns:1fr}}

/* Review notes drawer: draft-only annotations for the client */
.note{border-left:3px solid var(--air);background:rgba(203,217,230,.22);padding:14px 18px;font-size:13.5px;line-height:1.55;margin-top:28px;max-width:52em}
.note b{font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:10.5px;display:block;margin-bottom:4px;color:#3e5a78}
.dark .note,.navy .note{background:rgba(203,217,230,.08)} .dark .note b,.navy .note b{color:var(--air)}

.mt-s{margin-top:20px}.mt-m{margin-top:40px}.mt-l{margin-top:72px}
.center{text-align:center}
.narrow{max-width:46em}
:focus-visible{outline:2px solid var(--air);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
.form input[type=radio],.form input[type=checkbox]{-webkit-appearance:auto;appearance:auto;width:auto;padding:0;accent-color:var(--midnight)}
.dark .form input[type=radio],.dark .form input[type=checkbox],.navy .form input[type=checkbox]{accent-color:var(--air)}
.dark .portrait-ph{background:rgba(203,217,230,.08);color:var(--air);border:1px dashed rgba(203,217,230,.35);aspect-ratio:1/1}


/* ===== Schematics that draw themselves ===== */
[data-drawing]{width:100%}
[data-drawing]:not(.is-loaded){aspect-ratio:var(--draw-ar, 620 / 200)}
.plate-fig [data-drawing]{color:var(--ivory);max-width:940px;margin:0 auto}
.plate-fig [data-drawing] noscript img{width:100%;height:auto;filter:brightness(0) invert(1)}
.draw-svg{width:100%;height:auto;overflow:visible}
.draw-svg .ln{stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.6,0,.2,1);transition-delay:calc(var(--dd,0s) + var(--i,0) * 70ms)}
.draw-svg .dim{opacity:1;transition:opacity .7s ease 1.3s}
.draw-svg .dim .ln,.draw-svg .dim path{stroke-dasharray:none}
html.js .draw-svg:not(.drawn) .ln{stroke-dashoffset:1;stroke-linecap:butt;transition:none}
html.js .draw-svg:not(.drawn) .dim{opacity:0;transition:none}

/* ===== Drafting plate (Aircraft page signature) ===== */
.blueprint{background:var(--midnight);color:var(--ivory)}
.plate-sheet{position:relative;border:1px solid rgba(243,239,229,.28);padding:clamp(28px,5vw,64px) clamp(20px,5vw,72px) 0;
  background-image:linear-gradient(rgba(203,217,230,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(203,217,230,.06) 1px,transparent 1px);
  background-size:32px 32px;background-position:-1px -1px}
.plate-sheet::before,.plate-sheet::after{content:"";position:absolute;width:18px;height:18px;border:0 solid var(--air)}
.plate-sheet::before{top:10px;left:10px;border-top-width:1px;border-left-width:1px}
.plate-sheet::after{bottom:10px;right:10px;border-bottom-width:1px;border-right-width:1px}
.plate-fig{display:none}
.plate-fig.on{display:block;animation:plateIn .5s ease}
@keyframes plateIn{from{opacity:.2}to{opacity:1}}
.plate-fig .draw-svg{color:var(--ivory);max-width:940px;margin:0 auto}
.title-block{display:grid;grid-template-columns:2fr 1.2fr 1fr .8fr 1fr;margin:clamp(24px,4vw,48px) calc(-1 * clamp(20px,5vw,72px)) 0;border-top:1px solid rgba(243,239,229,.28)}
.title-block div{padding:14px 18px;border-right:1px solid rgba(243,239,229,.28)}
.title-block div:last-child{border-right:0}
.title-block dt{font:600 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--air);margin-bottom:8px}
.title-block dd{font:500 14px/1.3 var(--sans);font-variant-numeric:tabular-nums}
.title-block div:first-child dd{font:400 19px/1.2 var(--serif)}
@media (max-width:760px){.title-block{grid-template-columns:1fr 1fr}.title-block div:first-child{grid-column:1/-1}.title-block div{border-bottom:1px solid rgba(243,239,229,.28)}}
.plate-tabs{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(243,239,229,.28);border-top:0}
.plate-tabs button{background:none;border:0;border-right:1px solid rgba(243,239,229,.28);color:var(--ivory);padding:18px 20px;text-align:left;cursor:pointer;font:400 14px/1.3 var(--sans);opacity:.6;position:relative;transition:opacity .25s,background .25s}
.plate-tabs button:last-child{border-right:0}
.plate-tabs button b{display:block;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px;color:var(--air)}
.plate-tabs button::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--air);transition:width .5s cubic-bezier(.6,0,.2,1)}
.plate-tabs button[aria-selected=true]{opacity:1;background:rgba(243,239,229,.04)}
.plate-tabs button[aria-selected=true]::before{width:100%}
.plate-tabs button:hover{opacity:1}
@media (max-width:620px){.plate-tabs{grid-template-columns:1fr 1fr}.plate-tabs button:nth-child(2){border-right:0}.plate-tabs button:nth-child(-n+2){border-bottom:1px solid rgba(243,239,229,.28)}}

/* ===== Page-load and scroll motion ===== */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:scale(1.07)}to{transform:scale(1)}}
main>.hero:first-child>img{animation:settle 2.6s cubic-bezier(.2,.7,.2,1) both}
main>section:first-child .eyebrow,main>section:first-child h1,main>section:first-child .lede,main>section:first-child .btns,main>section:first-child .hero-foot{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
main>section:first-child h1{animation-delay:.12s}
main>section:first-child .lede{animation-delay:.28s}
main>section:first-child .btns{animation-delay:.4s}
main>section:first-child .hero-foot{animation-delay:.6s}
main>section.with-img:first-child>img{animation:settle 2.6s cubic-bezier(.2,.7,.2,1) both}
.hero-foot{position:relative;border-top-color:transparent}
.hero-foot::before{content:"";position:absolute;top:-1px;left:0;height:1px;background:rgba(243,239,229,.35);width:100%;transform-origin:left;animation:grow 1.4s cubic-bezier(.6,0,.2,1) .7s both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

html.js .rv{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
html.js .rv.in{opacity:1;transform:none}


@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  html.js .draw-svg:not(.drawn) .ln{stroke-dashoffset:0}
  html.js .draw-svg:not(.drawn) .dim{opacity:1}
  html.js .flywheel:not(.drawn) *{opacity:1!important}
  html.js .flywheel:not(.drawn) .st{fill:var(--midnight)}
  .hero-foot::before{animation:none}
}


/* ===== Patrick's structure (7 Oct) ===== */
/* Insights menu: three image cards, after Shwood's "Explore" */
.submenu.cards{display:grid;grid-template-columns:repeat(3,200px);gap:0;width:auto;left:50%;translate:-50% 0;padding:14px}
.submenu.cards a{padding:10px}
.submenu.cards img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:12px;opacity:.9;transition:opacity .3s}
.submenu.cards a:hover img{opacity:1}
@media (max-width:1180px){.submenu.cards{display:block;translate:none;padding:0}.submenu.cards img{display:none}.submenu.cards a{padding:0}}

/* Investor portal: placeholder until the client sends the login URL */
.head-cta.portal{position:relative}
.portal-tip{position:absolute;top:calc(100% + 10px);right:0;white-space:nowrap;background:var(--air);color:var(--midnight);font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:10px 12px;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;pointer-events:none}
.portal-tip.on{opacity:1;transform:none}

/* What we do: numbered service cards that link through */
.card.svc{text-decoration:none;color:inherit;transition:background .25s}
.card.svc:hover{background:rgba(203,217,230,.25)}
.card.svc .num{display:flex;align-items:center;gap:6px}
.card.svc .status{margin:0}
.card.svc .link{margin-top:auto;padding-top:26px;align-self:flex-start}
.card.svc:hover .link{background-size:0 1px;background-position:right bottom}
.numbers>.label{margin-bottom:18px}

/* Who we serve: OEM logos */
.oem-grid>div{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2}
.oem-grid img{max-height:54px;max-width:70%;filter:grayscale(1);opacity:.85}

/* Home: team strip on ivory */
.team .portrait-ph{aspect-ratio:1/1}
.team .person .label{color:var(--brown)}
.team .person h3{margin-bottom:4px}

/* Insights: three doors, after Shwood */
.explore{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.explore a{text-decoration:none;display:block}
.explore .thumb{aspect-ratio:3/2;overflow:hidden;margin-bottom:16px;background:#e6e0d2}
.explore img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.explore a:hover img{transform:scale(1.03)}
.explore h2{font-size:24px;line-height:1.2;letter-spacing:-.015em;margin-bottom:4px}
.explore p{font-size:14.5px;color:var(--brown)}
@media (max-width:760px){.explore{grid-template-columns:1fr}}

/* The logbook: year list with hairlines, after KREWE's "Our Story" */
.logbook{display:grid;grid-template-columns:40px 1fr;gap:clamp(12px,2vw,28px)}
.vlabel{writing-mode:vertical-rl;transform:rotate(180deg);font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brown);align-self:start;padding-bottom:4px}
.years{border-top:1px solid var(--midnight)}
.year{border-bottom:1px solid var(--rule)}
.year summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:20px 0;cursor:pointer}
.year summary::-webkit-details-marker{display:none}
.year .yr{font:600 15px/1 var(--sans);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.year .count{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--brown)}
.year .count::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--midnight);border-bottom:1.5px solid var(--midnight);transform:translateY(-3px) rotate(45deg);transition:transform .3s}
.year[open] .count::after{transform:translateY(2px) rotate(225deg)}
.year summary:hover .yr{color:var(--brown)}
.year .entries{padding:4px 0 32px}
.entries{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.entry .thumb{aspect-ratio:3/2;overflow:hidden;margin-bottom:16px;background:#e6e0d2}
.entry .thumb img{width:100%;height:100%;object-fit:cover}
.entry .label{color:var(--brown);display:block;margin-bottom:10px}
.entry h3{font-size:22px;margin-bottom:8px}
.entry p{font-size:15px}
@media (max-width:860px){.entries{grid-template-columns:1fr}}
@media (max-width:560px){.logbook{grid-template-columns:1fr}.vlabel{writing-mode:horizontal-tb;transform:none}}


/* Partner logo grid: tiles drop in left to right (see site.js) */
html.js .logos.wave>*{opacity:0;transform:translateY(-18px);transition:opacity .55s ease,transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
html.js .logos.wave.in>*{opacity:1;transform:none}

/* Team bios: longer bios open with "Read more". */
.person details.more{margin-top:10px}
.person details.more summary{cursor:pointer;list-style:none;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--air);padding:6px 0}
.person details.more summary::-webkit-details-marker{display:none}
.person details.more summary::after{content:" +"}
.person details.more[open] summary::after{content:" –"}
.person details.more[open] summary{margin-bottom:8px}
.person details.more p+p{margin-top:12px}

/* Logbook entries still waiting on a photo. */
.photo-ph{display:flex;align-items:center;justify-content:center;border:1px dashed rgba(91,81,72,.35)}
.photo-ph span{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}

/* Insight articles. */
.prose{max-width:44em}
.prose h2{font-size:clamp(26px,2.6vw,34px);margin:48px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;margin:26px 0 6px}
.prose p,.prose li{font-size:17px;line-height:1.65}
.prose ul{padding-left:1.2em;margin:10px 0 16px}
.prose li{margin:8px 0}
.prose .src{font-size:14px;color:var(--brown)}

/* Team portraits: 4:5 on About (Tori's placeholder matches), square on Home. */
.dark .person .portrait-ph{aspect-ratio:4/5}
.team .person img{aspect-ratio:1/1;object-position:center 22%}
/* Pike: the cockpit shot fades in over his portrait on hover (or keyboard focus / tap) */
.person .swap{position:relative;margin-bottom:22px;outline-offset:3px}
.person .swap img{margin-bottom:0;display:block}
.person .swap .alt{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:center;opacity:0;transition:opacity .45s ease}
.person:hover .swap .alt,.person .swap:focus .alt{opacity:1}
@media (prefers-reduced-motion:reduce){.person .swap .alt{transition:none}}
/* Eight aircraft: tabs wrap to two rows of four (two columns on phones) */
.plate-tabs button:nth-child(4n){border-right:0}
.plate-tabs button:nth-child(-n+4){border-bottom:1px solid rgba(243,239,229,.28)}
@media (max-width:620px){.plate-tabs button:nth-child(4n){border-right:0}.plate-tabs button:nth-child(2n){border-right:0}.plate-tabs button:nth-child(odd){border-right:1px solid rgba(243,239,229,.28)}.plate-tabs button:nth-child(-n+6){border-bottom:1px solid rgba(243,239,229,.28)}}

/* Aircraft selector: light, obviously clickable buttons; the selected one fills in Country Air (Patrick and AJ, 13 Oct) */
.plate-hint{display:flex;justify-content:space-between;align-items:baseline;margin:22px 0 10px;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--air)}
.plate-hint span{color:var(--ivory);opacity:.55;letter-spacing:.12em}
.plate-tabs{gap:8px;border:0;background:none}
.plate-tabs button,.plate-tabs button:last-child{border:1px solid rgba(203,217,230,.45);background:rgba(203,217,230,.1);opacity:1;padding:16px 18px 16px 18px}
.plate-tabs button::after{content:"→";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:15px;opacity:.55;transition:transform .25s,opacity .25s}
.plate-tabs button:hover{background:rgba(203,217,230,.2);border-color:var(--air)}
.plate-tabs button:hover::after{opacity:1;transform:translate(3px,-50%)}
.plate-tabs button[aria-selected=true]{background:var(--air);border-color:var(--air);color:var(--midnight)}
.plate-tabs button[aria-selected=true] b{color:var(--midnight);opacity:.75}
.plate-tabs button[aria-selected=true]::after{content:"●";font-size:9px;opacity:.8}
.plate-tabs button::before{display:none}
.plate-tabs button:nth-child(n),.plate-tabs button:nth-child(-n+4){border:1px solid rgba(203,217,230,.45)}
.plate-tabs button[aria-selected=true]:nth-child(n){border-color:var(--air)}
@media (max-width:620px){.plate-tabs button:nth-child(n){border:1px solid rgba(203,217,230,.45)}}

/* Forms: spam trap stays off-screen; error message under the button */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-note.form-error{opacity:1;font-weight:600}
