/* ==========================================================================
   Airparts — stylesheet

   Design language: pale, cool, exclusive. A near-white ground with near-black
   type, thin hairline rules and pill-shaped transparent controls. Photography
   and the technical drawing are the only heavy elements on the page — that
   contrast is what carries it.

   Type is small and widely tracked rather than large and bold. Restraint over
   scale.

   Layout: no fixed pixel widths, type scales with clamp(), every grid
   collapses. Tested from 320 px up.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wordmark — the real Eurostile Extended Black, repaired and subset to A–Z.
   Built by ./build-font.py from the supplied TTF; see that file for what the
   original needed fixing.

   Safari notes, learned the hard way:
     - WOFF is listed as a fallback after WOFF2.
     - No `unicode-range`. It is an optimisation with no value on a 1.8 KB
       subset, and it is a long-standing source of matching bugs in WebKit.
     - `font-weight: 700` matches the file's actual usWeightClass, so no
       engine synthesises a bold on top of an already-black face.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Eurostile Extended";
  src: url("../fonts/eurostile-extended-black.woff2") format("woff2"),
       url("../fonts/eurostile-extended-black.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: block;      /* the wordmark must not render in a fallback */
}

/* Body face, self-hosted — no Google CDN call, so no visitor IPs leave. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-300-normal.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* ---- Palette: pale cool grey and near-black. ---- */
  --paper:     #f2f3f4;
  --paper-2:   #ecedef;
  --paper-3:   #e5e7e9;
  --line:      #d7dadc;
  --line-soft: #e3e5e7;

  --ink:       #16181a;   /* wordmark, headings */
  --ink-2:     #43494d;   /* body copy */
  --ink-3:     #6e757a;   /* secondary */
  --muted:     #969da2;   /* labels, captions */

  /* ---- Type ---- */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --wordmark: "Eurostile Extended", var(--sans);

  --track-label: .34em;
  --track-display: .1em;
  --track-body: .012em;

  /* ---- Rhythm ---- */
  --gut: clamp(1.5rem, 5vw, 6rem);
  --rail: 0px;                 /* kept at 0: the menu is no longer a side column */
  --sect-y: clamp(5rem, 12vw, 12rem);
  --maxw: 1440px;
  --pill: 999px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* The menu now sits under the wordmark at the top rather than beside the
   content, so nothing needs to be reserved down the side. --rail stays at 0
   and the padding expressions below collapse to the plain gutter. */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 3rem;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(.875rem, .85rem + .18vw, .95rem);
  line-height: 1.8;
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  margin: 0;
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: var(--track-display);
  color: var(--ink);
  text-transform: uppercase;
  text-wrap: balance;
}
p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-underline-offset: 4px; }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.sr-only, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; inset: .75rem auto auto .75rem; z-index: 300;
  background: var(--ink); color: var(--paper); padding: .7rem 1.2rem;
  border-radius: var(--pill);
  font-size: .68rem; letter-spacing: var(--track-label); text-transform: uppercase;
}

/* --rail is 0; these expressions collapse to the plain gutter. */
.wrap {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding-left: calc(var(--gut) + var(--rail));
  padding-right: var(--gut);
}
.wrap--narrow { max-width: 820px; }
.wrap--mid { max-width: 1120px; }

/* ---------------------------------------------------------------- primitives */

.label {
  margin: 0 0 1.8rem;
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}
.label--num { display: flex; align-items: center; gap: .9rem; }
.label--num::before {
  content: attr(data-num);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.label--num::after {
  content: ""; flex: 1 1 3rem; max-width: 4rem;
  height: 1px; background: var(--line);
}

.brand {
  font-family: var(--wordmark);
  font-weight: 700;
  color: var(--ink);
  /* Eurostile Extended is already very wide — tracking it out further makes it
     read as generic bold and loses the letterforms. Almost none. */
  letter-spacing: .015em;
  line-height: 1;
  -webkit-font-synthesis: none;
  font-synthesis: none;
}

/* ---- Controls -----------------------------------------------------------
 * No containers at all. Each action is tracked-out text with a trailing arrow
 * and a hairline rule beneath it that draws in from the left on hover. The
 * type is the button; nothing is boxed.
 * ------------------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .8rem;
  min-height: 44px;
  padding: .7rem 0;
  border: 0; background: none;
  color: var(--ink-2);
  font: 400 .68rem/1 var(--sans);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color .45s var(--ease);
}
/* Trailing arrow, nudging forward on hover. */
.btn::after {
  content: "\2192";
  font-size: .95em; line-height: 1;
  letter-spacing: 0;
  opacity: .55;
  transform: translateX(0);
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
/* The rule, drawn in from the left. */
.btn::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: .55rem;
  height: 1px;
  background: currentColor;
  opacity: .22;
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease), opacity .45s var(--ease);
}
.btn:hover { color: var(--ink); }
.btn:hover::before { transform: scaleX(1); opacity: .4; }
.btn:hover::after { transform: translateX(5px); opacity: 1; }
.btn:active::after { transform: translateX(2px); }

/* Primary action: the rule is already drawn, and the type is a touch darker. */
.btn--dark { color: var(--ink); }
.btn--dark::before { transform: scaleX(1); opacity: .45; }
.btn--dark:hover::before { opacity: .8; }

/* Buttons sitting on the hero photograph. No arrow here — these are three
   peer links under the title, not forward actions. */
.hero .btn::after { content: none; }
.hero .btn { color: rgba(255, 255, 255, .82); }
.hero .btn:hover { color: #fff; }
.hero .btn::before { opacity: .3; }
.hero .btn:hover::before { opacity: .6; }

/* -------------------------------------------------------------------- dock */
/*
 * Bottom-left: a burger and a Contact button side by side. Tapping the burger
 * expands the section links upward, above the row. Same frosted-glass
 * treatment throughout — translucent fill, heavy blur, no border.
 */

.mark {
  position: fixed; z-index: 200;
  top: clamp(1.25rem, 3vw, 2.5rem);
  left: var(--gut);
  font-size: clamp(1.05rem, .9rem + .55vw, 1.5rem);
  text-decoration: none;
  color: #fff;
  transition: color .5s var(--ease);
}
.is-past-hero .mark { color: var(--ink); }

.dock {
  position: fixed; z-index: 200;
  left: var(--gut);
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .45rem;
}

/* ---- The shared glass pill -------------------------------------------- */
.dock a, .dock button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px;
  padding: .6rem 1.35rem;
  border: 0;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .17);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  color: rgba(255, 255, 255, .92);
  font: 400 .62rem/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.dock a:hover, .dock button:hover {
  background: rgba(255, 255, 255, .3); color: #fff;
}
/* Past the hero the page is pale, so a white frost would vanish. */
.is-past-hero .dock a,
.is-past-hero .dock button {
  background: rgba(22, 24, 26, .07); color: var(--ink-2);
}
.is-past-hero .dock a:hover,
.is-past-hero .dock button:hover {
  background: rgba(22, 24, 26, .13); color: var(--ink);
}

/* ---- The expanding panel, stacked above the row ------------------------ */
.dock__panel {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .4rem;
  margin-bottom: .2rem;
}
.dock__panel[hidden] { display: none; }
.dock__panel a {
  opacity: 0; transform: translateY(8px);
  animation: dockIn .45s var(--ease) forwards;
}
/* Stagger upward: the item nearest the burger arrives first. */
.dock__panel a:nth-last-child(1) { animation-delay: .00s; }
.dock__panel a:nth-last-child(2) { animation-delay: .05s; }
.dock__panel a:nth-last-child(3) { animation-delay: .10s; }
.dock__panel a:nth-last-child(4) { animation-delay: .15s; }
@keyframes dockIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .dock__panel a { opacity: 1; transform: none; animation: none; }
}

.dock__row { display: flex; gap: .45rem; align-items: center; }

/* ---- The burger: three plain lines ------------------------------------ */
.dock__burger { width: 52px; padding: .6rem 0; }
.dock__burger .bars {
  display: grid; gap: 4px; place-items: center;
}
.dock__burger .bars i {
  display: block; width: 17px; height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
/* Open state: top and bottom rules cross, middle fades. */
.dock__burger[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.dock__burger[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.dock__burger[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* --------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid; align-items: end;
  padding-bottom: clamp(3rem, 9vh, 7rem);
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
/* Full bleed. The source is 2.23:1, so a tall viewport still crops — hold the
   canopy and the formation in frame. */
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 48%; }
/* No scrim over the photograph: the hero files are darkened at build time
   instead (see BRIGHTNESS in build-images.py). */

/* Photo credit, bottom-right of the hero. */
.hero__cred {
  position: absolute; z-index: 1;
  right: var(--gut); bottom: clamp(1.25rem, 3vw, 2.25rem);
  margin: 0;
  font-size: .54rem; letter-spacing: .16em;
  color: rgba(255, 255, 255, .5);
}

.hero__in {
  max-width: var(--maxw); width: 100%;
  margin-inline: auto;
  padding-left: calc(var(--gut) + var(--rail));
  padding-right: var(--gut);
}
/* Was too faint to read over the photograph — brighter and a touch larger. */
.hero .label {
  color: rgba(255, 255, 255, .95);
  font-size: .7rem; font-weight: 500;
}

/* Small and widely tracked, not a big display line. */
.hero__h1 {
  font-size: clamp(1.05rem, .9rem + 1.15vw, 1.85rem);
  font-weight: 300;
  letter-spacing: .17em;
  line-height: 1.5;
  color: #fff;
  max-width: 30ch;
  margin-bottom: 1.9rem;
}
.hero__h1 em { font-style: normal; color: rgba(255, 255, 255, .62); }

.hero__sub {
  max-width: 42ch;
  color: rgba(255, 255, 255, .78);
  font-size: .9rem;
  margin-bottom: 2.4rem;
}

/* ----------------------------------------------------------------- sections */

.sect { padding-block: var(--sect-y); }
.sect--alt { background: var(--paper-2); }
.sect--tight { padding-block: clamp(3rem, 7vw, 6rem); }

.sect__head { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.sect__head h2 {
  font-size: clamp(.95rem, .88rem + .55vw, 1.3rem);
  letter-spacing: .17em;
  line-height: 1.55;
  max-width: 38ch;
}
.sect__sub {
  margin-top: 1.5rem; max-width: 56ch;
  color: var(--ink-3); font-size: .875rem;
}

/* Wide, small statement paragraph — sits under the model. */
.statement {
  max-width: 78ch;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(.9rem, .86rem + .3vw, 1.02rem);
  font-weight: 300;
  line-height: 1.95;
  letter-spacing: .05em;
  color: var(--ink-2);
}
.statement em { font-style: normal; color: var(--ink); }

/* ------------------------------------------------------------ 3D wireframe */

.stage {
  position: relative;
  width: 100%;
  height: clamp(280px, 46vh, 540px);
}
.stage canvas { width: 100% !important; height: 100% !important; }

.stage__fallback {
  position: absolute; inset: 0; margin: auto;
  max-height: 100%; width: auto; object-fit: contain;
  opacity: .9;
  transition: opacity .8s var(--ease);
}
.stage.is-ready .stage__fallback { opacity: 0; pointer-events: none; }
.stage.no-webgl .stage__fallback { opacity: 1; }

.stage__hint {
  position: absolute; left: 50%; bottom: -.5rem; transform: translateX(-50%);
  margin: 0;
  font-size: .56rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted);
  opacity: 0; transition: opacity .9s var(--ease);
  white-space: nowrap;
}
.stage.is-ready .stage__hint { opacity: 1; }
.stage.no-webgl .stage__hint { display: none; }

/* Variant switch — two pills in a track. */
.vswitch {
  display: flex; justify-content: center;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.vswitch__track {
  display: inline-flex; gap: 2rem;
  padding: 0; border: 0; background: none;
}
.vswitch button {
  position: relative;
  min-height: 44px;
  padding: .55rem 0;
  border: 0; background: none;
  color: var(--muted);
  font: 400 .62rem/1 var(--sans);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color .4s var(--ease);
}
.vswitch button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .35rem;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: center;
  transition: transform .5s var(--ease);
}
.vswitch button:hover { color: var(--ink-2); }
.vswitch button[aria-selected="true"] { color: var(--ink); }
.vswitch button[aria-selected="true"]::after { transform: scaleX(1); }

/* Live dimension readout. */
.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 140px), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.readout > div {
  background: var(--paper);
  padding: 1.35rem clamp(1rem, 2.5vw, 1.75rem);
  display: grid; gap: .55rem;
}
.sect--alt .readout > div { background: var(--paper-2); }
.readout dt {
  font-size: .56rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted);
}
.readout dd {
  margin: 0;
  font: 300 clamp(1rem, .92rem + .45vw, 1.3rem)/1 var(--sans);
  letter-spacing: .04em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Sits below the readout, not inside it — <dl> may not contain <p>. */
.readout__note {
  margin: .9rem 0 0;
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.readout__note[hidden] { display: none; }

/* ---------------------------------------------------------- feature blocks */

.feats {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.feat {
  background: var(--paper);
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.35rem, 2.5vw, 2rem);
  display: grid; align-content: start; gap: 1.15rem;
  transition: background-color .5s var(--ease);
}
.sect--alt .feat { background: var(--paper-2); }
.feat:hover, .sect--alt .feat:hover { background: var(--paper-3); }
.feat__k {
  margin: 0;
  font-size: .66rem; font-weight: 400;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink);
}
.feat__d { margin: 0; color: var(--ink-3); font-size: .84rem; line-height: 1.8; }
.feat dl { margin: auto 0 0; padding-top: 1.35rem; border-top: 1px solid var(--line); }
.feat dt {
  font-size: .54rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted); margin-bottom: .55rem;
}
.feat dd {
  margin: 0;
  font: 300 clamp(.95rem, .9rem + .35vw, 1.15rem)/1.4 var(--sans);
  letter-spacing: .03em; color: var(--ink);
}

/* ------------------------------------------------------------- blueprint svg */

.bp {
  margin: 0;
  padding: clamp(1.25rem, 3.5vw, 3rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.sect--alt .bp { background: var(--paper-2); }
.bp__svg { width: 100%; height: auto; }
.bp figcaption {
  margin-top: 1.1rem;
  font-size: .6rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted);
}

.bp__grid path { stroke: #e6e8ea; stroke-width: .5; fill: none; }
.bp__line { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.bp__outline { stroke-width: 1.7; }
.bp__frame { stroke: var(--ink-3); stroke-width: 1; }
.bp__ball  { stroke: var(--ink-3); stroke-width: 1; fill: none; }
.bp__axis {
  stroke: var(--muted); stroke-width: .7; fill: none;
  stroke-dasharray: 16 4 3 4;
}
.bp__dim path { stroke: var(--ink-3); stroke-width: .8; fill: none; }
.bp__dim text {
  fill: var(--ink-2); font-family: var(--mono); font-size: 14px;
  letter-spacing: .06em;
}
.bp__dim--r path { stroke: var(--ink-3); }
.bp__dim--r text { fill: var(--ink-3); font-size: 13px; }
.bp__note {
  fill: var(--muted); font-family: var(--mono); font-size: 12px;
  letter-spacing: .26em;
}
.bp__stamp {
  fill: #c8cccf; font-family: var(--mono); font-size: 11px;
  letter-spacing: .3em;
}

.bp.js-anim .bp__line,
.bp.js-anim .bp__dim path,
.bp.js-anim .bp__axis {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.bp.js-anim .bp__dim text,
.bp.js-anim .bp__note,
.bp.js-anim .bp__stamp { opacity: 0; }

/* ------------------------------------------------------------------ gallery */

.gal { position: relative; }
.gal__track {
  list-style: none; margin: 0;
  padding: 0 var(--gut) 1.5rem calc(var(--gut) + var(--rail));
  display: flex; gap: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gal__track::-webkit-scrollbar { display: none; }
.gal__item { flex: 0 0 min(86vw, 660px); scroll-snap-align: center; }
.gal__item img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 2px;
  filter: saturate(.78);
  transition: filter .7s var(--ease);
}
.gal__item:hover img { filter: saturate(1); }
.gal__item p {
  margin: 1.1rem 0 0;
  font-size: .6rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted);
}
/* Photo credit, set quieter than the caption it follows. */
.cred {
  display: block; margin-top: .45rem;
  font-size: .54rem; letter-spacing: .16em;
  color: #b3b9bd; text-transform: none;
}
.gal__ctrl {
  display: flex; gap: 2rem;
  max-width: var(--maxw); margin: 0 auto;
  padding-left: calc(var(--gut) + var(--rail));
  padding-right: var(--gut);
}
.gal__ctrl button {
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  border: 0; background: none;
  color: var(--muted);
  font-size: 1rem; cursor: pointer;
  transition: color .4s var(--ease), transform .4s var(--ease);
}
.gal__ctrl button:hover { color: var(--ink); }
.gal__ctrl button:first-child:hover { transform: translateX(-4px); }
.gal__ctrl button:last-child:hover { transform: translateX(4px); }

/* ------------------------------------------------------------------ clients */

.clients {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
/* Eight entries, so pin the column count rather than letting auto-fit choose:
   two rows of four on desktop, two of two on tablet. */
@media (min-width: 560px) { .clients { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .clients { grid-template-columns: repeat(4, 1fr); } }
.clients li {
  background: var(--paper);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  display: grid; gap: .6rem; align-content: start;
}
.sect--alt .clients li { background: var(--paper-2); }
.clients__geo {
  font-size: .54rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted);
}
.clients b {
  font-weight: 400; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
}
.clients__pl { font-size: .74rem; color: var(--ink-3); letter-spacing: .06em; }
/* Aircraft models link out to Wikipedia. Grey like the surrounding text, with
   a faint underline so the link is discoverable before you hover, firming up
   when you do. Entries that are not aircraft carry no link. */
.clients__pl a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(110, 117, 122, .3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.clients__pl a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.units { text-align: center; margin: clamp(3rem, 7vw, 5rem) 0 0; }
.units b {
  display: block;
  font-size: clamp(1.9rem, 1.3rem + 3.2vw, 4rem);
  font-weight: 200; letter-spacing: .04em; color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.units span {
  display: block; margin-top: 1.2rem;
  font-size: .6rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted);
}

/* --------------------------------------------------------------------- form */

.form { display: grid; gap: 1.9rem; }
.field { display: grid; gap: .65rem; }
.field label {
  font-size: .56rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted);
}
.field input, .field textarea {
  width: 100%;
  padding: .85rem 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit; font-weight: 300;
  font-size: 1rem;                    /* >=16px stops iOS zoom-on-focus */
  letter-spacing: var(--track-body);
  border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0;
  transition: border-color .35s var(--ease);
}
.field textarea { resize: vertical; min-height: 5.5rem; line-height: 1.8; }
.field input:hover, .field textarea:hover { border-bottom-color: var(--ink-3); }
.field input:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--ink);
}
.field input::placeholder, .field textarea::placeholder { color: #b6bcc0; }

.field__err { margin: 0; font-size: .7rem; letter-spacing: .04em; color: #9c5442; }
.field.is-bad input, .field.is-bad textarea { border-bottom-color: #9c5442; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.15rem 1.9rem; margin-top: .5rem;
}
.form__note { margin: 0; font-size: .72rem; color: var(--muted); }
.form__status {
  margin: 0; padding: 1rem 0 0;
  border: 0; border-top: 1px solid var(--line);
  background: none;
  font-size: .8rem; display: none;
}
.form__status.is-shown { display: block; }
.form__status.is-ok { color: var(--ink); }
.form__status.is-bad { border-top-color: #c09a8e; color: #9c5442; }

/* ------------------------------------------------------------- legal pages */

.doc { max-width: 68ch; }
.doc h1 {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  margin-bottom: 1.6rem;
}
.doc h2 {
  font-size: .78rem; letter-spacing: var(--track-label);
  margin: 3rem 0 1rem;
}
.doc__lede {
  font-size: clamp(.95rem, .92rem + .3vw, 1.05rem);
  color: var(--ink-2); line-height: 1.9;
}
.doc__date {
  margin-top: 1.5rem;
  font-size: .58rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted);
}
.doc p, .doc li { color: var(--ink-2); }
.doc ul {
  padding-left: 1.1rem; margin: 0 0 1.2em;
  display: grid; gap: .55rem;
}
.doc li::marker { color: var(--muted); }
.doc strong { color: var(--ink); font-weight: 500; }
.doc a { color: var(--ink); text-decoration-color: rgba(110,117,122,.4); }
.doc a:hover { text-decoration-color: var(--ink); }
.doc__addr {
  font-style: normal; margin: 0 0 1.2em;
  padding-left: 1.1rem; border-left: 1px solid var(--line);
  color: var(--ink-2);
}
.doc__quote {
  margin: 0 0 1.4em;
  padding: 1.4rem 1.6rem;
  background: var(--paper-2);
  border-left: 2px solid var(--line);
}
.doc__quote p { font-size: .86rem; line-height: 1.85; }
.doc__quote p:last-child { margin-bottom: 0; }
.doc__back { margin-top: 3.5rem; }

/* Legal pages have no hero, so the wordmark needs to sit in the flow. */
body.is-past-hero .mark { position: fixed; }
.doc { padding-top: clamp(2rem, 5vw, 3.5rem); }

/* ------------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 7vw, 5rem) 7rem;   /* clearance for the dock */
}

.foot__in {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  justify-content: space-between; align-items: start;
}
.foot__brand { margin: 0 0 .9rem; font-size: clamp(1rem, .9rem + .4vw, 1.3rem); }
.foot__made {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 .55rem;
  font-size: .58rem; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-3);
}
.foot__flag { width: 13px; height: 13px; flex: 0 0 auto; border-radius: 1px; }
.foot__tag {
  margin: 0; color: var(--muted);
  font-size: .58rem; letter-spacing: var(--track-label); text-transform: uppercase;
}
.foot__links {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, auto));
  gap: .85rem 2.5rem;
}
.foot__links a {
  color: var(--ink-3); text-decoration: none;
  font-size: .6rem; letter-spacing: var(--track-label); text-transform: uppercase;
  transition: color .3s var(--ease);
}
.foot__links a:hover { color: var(--ink); }
.foot__copy {
  max-width: var(--maxw); margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding-left: calc(var(--gut) + var(--rail));
  padding-right: var(--gut);
  font-size: .58rem; letter-spacing: .12em; color: #b0b6ba;
}

/* ------------------------------------------------------- reveal on scroll */

.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 600px) {
  .hero { min-height: auto; padding-top: 7rem; padding-bottom: 3rem; }
  .stage { height: clamp(230px, 40vh, 320px); }
  .gal__item { flex-basis: 88vw; }
  .bp { padding: 1rem; }
  .bp__dim text { font-size: 17px; }
  .bp__note { font-size: 15px; }
  .bp__stamp { font-size: 13px; }
}

@media print {
  .mark, .dock, .stage, .gal__ctrl, .hero__bg,
  .vswitch { display: none !important; }
  body { background: #fff; color: #000; }
  .hero__h1, .hero__sub, .hero .label { color: #000; }
  .sect, .hero { padding-block: 1rem; }
}