/* ============================================================
   Next Leg Aircraft Detailing
   Apple-idiom surface: system type, translucent materials,
   spring-driven motion, everything interruptible.
   ============================================================ */

:root {
  /* materials */
  --ground: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f6f8;
  --surface-3: #e9edf1;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --ink-3: #6e6e73;
  --line: rgba(0, 0, 0, 0.10);
  --line-soft: rgba(0, 0, 0, 0.06);
  --accent: #14283F;
  --accent-ink: #ffffff;
  --accent-soft: #eef1f5;
  --link: #0a6bd6;
  --taxi: #B08D57;
  --taxi-deep: #6E5636;
  --ok: #1b8a53;
  --warn: #b3412a;

  --glass: rgba(251, 251, 253, 0.72);
  --glass-line: rgba(0, 0, 0, 0.08);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.14);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.05), 0 22px 60px -24px rgba(0, 0, 0, 0.28);

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --display: "Next Leg Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: var(--font);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* geometry */
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --pill: 980px;
  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 44px);
}

/* One theme. A company that sells clean does not get shown in black, however
   the visitor's phone is set. Dark mode was removed on purpose; if it ever
   comes back it should be an opt-in, not something the OS decides. */
:root { color-scheme: light; }

* { box-sizing: border-box; }
/* ---------- the display face ----------
   Instrument Serif, subset to the characters this site uses and served from
   our own origin so the CSP stays 'self' and nothing phones home. The sans
   stays the system font: native on the device, and nothing to download. */
@font-face {
  font-family: "Next Leg Display";
  src: url("/assets/display-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Next Leg Display";
  src: url("/assets/display-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
.icon { width: 1em; height: 1em; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--link) 70%, transparent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 1320px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); color: var(--ink); padding: 10px 14px; border-radius: var(--r-sm); z-index: 60; box-shadow: var(--shadow-1); }
.skip:focus { left: 10px; }

/* ---------- type: tracking is size-specific ---------- */
h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; }
/* The serif carries its own contrast, so it wants weight 400 and far less
   negative tracking than the grotesk did. Setting it tighter closes the
   counters and the whole thing turns to mud at display size. */
h1 {
  font-family: var(--display);
  font-size: clamp(2.9rem, 6.2vw, 5.1rem);
  line-height: 1.0;
  font-weight: 400;
  letter-spacing: -0.012em;
}
h2 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.008em;
}
h1 em, h2 em { font-style: italic; }
h3 { font-size: 1.16rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.014em; }
p { margin: 0; }
.eyebrow, .label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow span { color: var(--taxi-deep); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.5; letter-spacing: -0.012em; color: var(--ink-2); max-width: 34em; }
.small { font-size: 0.84rem; line-height: 1.5; letter-spacing: 0; color: var(--ink-3); }

/* ---------- buttons: pill, respond on press ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 1rem; font-weight: 500; letter-spacing: -0.01em;
  background: var(--accent); color: var(--accent-ink);
  padding: 13px 24px; border: 0; border-radius: var(--pill); cursor: pointer;
  text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform 120ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 180ms ease, box-shadow 180ms ease;
  will-change: transform;
}
.btn:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn:active, .btn.is-pressed { transform: scale(0.965); }
.btn--small { padding: 8px 17px; font-size: 0.92rem; }
.btn--ghost { background: transparent; color: var(--link); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--link) 42%, transparent); }
.btn--ghost:hover { background: color-mix(in srgb, var(--link) 8%, transparent); }
.textlink {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--link); font-weight: 500; text-decoration: none;
  transition: transform 140ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 140ms ease;
}
.textlink:hover { text-decoration: none; opacity: 0.75; }
.textlink:active { transform: scale(0.98); }

/* ---------- top bar: translucent material, scroll-edge ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 260ms ease, background-color 260ms ease, box-shadow 260ms ease;
}
.topbar.is-stuck { border-bottom-color: var(--glass-line); box-shadow: 0 1px 12px -6px rgba(0, 0, 0, 0.3); }
.topbar__row { display: flex; align-items: center; gap: 26px; min-height: 52px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 0.98rem; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; min-width: 0; }
.topbar .btn { flex: none; white-space: nowrap; }
@media (max-width: 560px) {
  .brand { font-size: 0.95rem; gap: 8px; }
  .brand__tail { display: none; }
  .topbar__row { gap: 12px; }
  .topbar .btn { padding: 8px 15px; font-size: 0.88rem; }
}
.brand:hover { text-decoration: none; }
.brand__mark { width: 24px; height: 24px; display: block; border-radius: 6px; flex: none; }
.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.topbar__call {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  color: var(--ink); font-size: 0.9rem; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
  text-decoration: none; min-height: 40px; padding-inline: 4px;
  transition: opacity 160ms ease, transform 120ms ease;
}
.topbar__call:hover { text-decoration: none; opacity: 0.7; }
.topbar__call:active { transform: scale(0.96); }
.topbar__call .icon { width: 17px; height: 17px; }
.topbar__num { font-variant-numeric: tabular-nums; }
@media (max-width: 1180px) { .topbar__num { display: none; } .topbar__call { width: 40px; justify-content: center; } }
@media (max-width: 1060px) { .nav { gap: 18px; } .brand__tail { display: none; } }
.nav a { color: var(--ink-2); font-size: 0.9rem; font-weight: 400; letter-spacing: -0.005em; text-decoration: none; transition: color 160ms ease; }
.nav a:hover { color: var(--ink); text-decoration: none; }
@media (max-width: 860px) { .nav { display: none; } .topbar__call { margin-left: auto; } }

/* ---------- hero ---------- */
.hero { padding-block: clamp(44px, 6.5vw, 82px) 0; text-align: center; }
section[id], figure[id] { scroll-margin-top: 66px; }
.hero__grid { display: grid; gap: 26px; justify-items: center; }
.hero__copy { display: grid; gap: 20px; }
.hero__copy .lede { max-width: 46ch; }
.hero h1 { max-width: 16ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; }
.facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin: 10px 0 0; width: min(680px, 100%);
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); overflow: hidden;
}
.facts div { padding: 18px 16px; text-align: center; }
.facts div + div { border-left: 1px solid var(--line-soft); }
.facts dt { font-size: 0.73rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 5px 0 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.018em; }
@media (max-width: 520px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts div + div { border-left: 0; border-top: 1px solid var(--line-soft); }
}

/* ---------- photography ---------- */
.shot { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--surface-3); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot--hero { margin-top: clamp(34px, 5vw, 62px); border-radius: clamp(18px, 2.6vw, 30px); box-shadow: var(--shadow-2); }
.shot--band { border-radius: 0; }
.shot--inline { box-shadow: var(--shadow-1); }
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 24px 16px; font-size: 0.76rem; color: rgba(255, 255, 255, 0.82); letter-spacing: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}
.herofig { position: relative; }
.herofig .report {
  position: absolute; right: clamp(14px, 3vw, 36px); bottom: clamp(14px, 3vw, 36px);
  width: min(420px, 46%); z-index: 2;
}
@media (max-width: 900px) {
  .herofig .report { position: static; width: 100%; margin-top: 18px; }
}

/* ---------- sample report: a glass card over the photo ---------- */
.report {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: var(--shadow-2);
  text-align: left;
}
.report__head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); }
.report__head .label { font-size: 0.68rem; }
.report__head .label:last-child { color: var(--taxi-deep); }
.report__meta { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 18px 10px; }
.report__meta strong { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
.report__meta span { color: var(--ink-3); font-size: 0.84rem; }
.report ol { list-style: none; margin: 0; padding: 0 18px 8px; }
.report li { display: grid; grid-template-columns: 16px 3.2em minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 0.86rem; }
.report .tick { width: 14px; height: 14px; border-radius: 50%; background: var(--ok); position: relative; top: 2px; }
.report .tick::after { content: ""; position: absolute; left: 4.5px; top: 2px; width: 3px; height: 7px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.report time, .report .val { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.report .val { text-align: right; }
.report__foot { padding: 11px 18px; border-top: 1px solid var(--line-soft); font-size: 0.76rem; color: var(--ink-3); }

/* ---------- sections ---------- */
.holdshort { display: none; }
.section { padding-block: clamp(64px, 9vw, 128px); }
.section--alt { background: var(--surface-2); }
.section__head { display: grid; gap: 14px; max-width: 44rem; margin-bottom: clamp(30px, 4vw, 48px); }
.section__head p { color: var(--ink-2); font-size: 1.08rem; letter-spacing: -0.01em; }

/* ---------- service menu ---------- */
/* ---------- the menu: four cards, not four letterbox bars ----------
   Each card reads top to bottom - what it is, what it involves, what it
   costs - with the number anchored under a rule so it is always the last
   thing the eye lands on. */
.menu {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.menu li {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 12px;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-1);
  /* A spring-shaped curve. The card lifts toward the pointer and settles. */
  transition: transform 420ms cubic-bezier(0.19, 1, 0.22, 1),
              box-shadow 420ms cubic-bezier(0.19, 1, 0.22, 1),
              border-color 300ms ease;
}
/* On a dark ground a flat fill has no edge. The inset highlight is the lit
   top lip of a real surface, which is what separates the card from the page. */
@media (hover: hover) {
  .menu li:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: var(--shadow-2);
    border-color: color-mix(in srgb, var(--taxi) 34%, var(--line-soft));
  }
    }
.menu li.is-pressed { transform: translate3d(0, -1px, 0) scale(0.992); transition-duration: 120ms; }

/* A specular highlight that follows the pointer across the card. */
.menu .sheen {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 360ms ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--taxi) 16%, transparent), transparent 62%);
}
@media (hover: hover) { .menu li:hover .sheen { opacity: 1; } }

.menu__top { display: grid; gap: 5px; }
.menu__link { color: inherit; text-decoration: none; }
.menu__link:hover { text-decoration: none; }
/* The whole card is the link; the heading keeps the accessible name. */
.menu__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.menu__link:focus-visible { outline: none; }
.menu__link:focus-visible::after { outline: 3px solid color-mix(in srgb, var(--link) 70%, transparent); outline-offset: 3px; }
.menu__more { font-size: 0.86rem; font-weight: 500; color: var(--link); letter-spacing: -0.005em; transition: transform 300ms cubic-bezier(0.19, 1, 0.22, 1); }
@media (hover: hover) { .menu li:hover .menu__more { transform: translateX(3px); } }
.menu h3 { font-size: 1.18rem; letter-spacing: -0.016em; }
.menu .dur { font-size: 0.78rem; color: var(--ink-3); letter-spacing: 0; }
.menu p { color: var(--ink-2); font-size: 0.97rem; line-height: 1.5; }
.menu__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.menu__from { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.price {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1;
  letter-spacing: -0.012em; white-space: nowrap;
  font-variant-numeric: tabular-nums; text-align: right;
}
.price small { display: block; font-family: var(--body); font-size: 0.68rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0.05em; text-transform: uppercase; }
@media (max-width: 860px) { .menu { grid-template-columns: minmax(0, 1fr); } }
.addons { margin-top: 24px; color: var(--ink-2); font-size: 0.97rem; max-width: 62rem; }
.fees { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { font-size: 0.8rem; padding: 6px 12px; border-radius: var(--pill); background: var(--surface-3); color: var(--ink-2); letter-spacing: -0.005em; }

/* ---------- method ---------- */
.method { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 940px) { .method { grid-template-columns: minmax(0, 1fr); } }
/* The sample report and the never-list share the right-hand column: the
   report is the evidence for step four, and it should sit beside it. */
.method__side { display: grid; gap: clamp(20px, 3vw, 30px); align-content: start; }
.method__side .report { width: 100%; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 4px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--line-soft); }
.steps li:first-child { border-top: 0; }
.steps li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2);
  font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.steps p { color: var(--ink-2); margin-top: 5px; font-size: 0.97rem; }
.never { align-self: start; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-1); }
.never h3 { margin-bottom: 16px; }
.never ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.never li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: 0.96rem; }
.never li::before, .never li::after { content: ""; position: absolute; left: 3px; top: 0.66em; width: 13px; height: 1.8px; border-radius: 2px; background: var(--warn); }
.never li::before { transform: rotate(45deg); }
.never li::after { transform: rotate(-45deg); }

/* ---------- audiences ---------- */
.who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.who > div { padding: 24px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); }
.who p { color: var(--ink-2); margin-top: 8px; font-size: 0.95rem; }
.who .label { display: block; margin-top: 16px; font-size: 0.72rem; color: var(--taxi-deep); }
@media (max-width: 940px) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .who { grid-template-columns: minmax(0, 1fr); } }

/* ---------- programs ---------- */
.tablewrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line-soft); background: var(--surface); }
.programs { width: 100%; border-collapse: collapse; min-width: 640px; }
.programs th, .programs td { text-align: left; padding: 18px 20px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.programs thead th { border-top: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
.programs td:last-child, .programs th:last-child { text-align: right; }
.programs .pname { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.02em; }
.programs .pprice { font-size: 1.26rem; font-weight: 600; letter-spacing: -0.026em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.programs .pprice small { font-size: 0.8rem; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.programs ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 0.95rem; }

/* ---------- quote ---------- */
.quote { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.82fr); gap: clamp(22px, 4vw, 44px); align-items: start; }
@media (max-width: 980px) { .quote { grid-template-columns: minmax(0, 1fr); } }
.panel { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 30px); box-shadow: var(--shadow-1); }
.panel + .panel { margin-top: 16px; }
.panel h3 { margin-bottom: 16px; }
.fieldgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 16px; }
@media (max-width: 580px) { .fieldgrid { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label, .field .label { font-size: 0.85rem; font-weight: 500; color: var(--ink-2); letter-spacing: -0.004em; text-transform: none; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea {
  width: 100%; font-size: 1rem; letter-spacing: -0.006em; color: var(--ink);
  background: var(--surface-2);
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 12px 14px; min-height: 46px;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  -webkit-appearance: none; appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 13px) 21px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 38px;
}
/* The ring overshoots once and settles, so focus lands rather than appears. */
input:focus, select:focus, textarea:focus {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--link) 60%, transparent);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--link) 17%, transparent);
  transition: background-color 160ms ease, border-color 160ms ease,
              box-shadow 380ms cubic-bezier(0.19, 1.5, 0.3, 1);
}
.field { position: relative; }
.field label { transition: color 200ms ease; }
.field:focus-within > label { color: var(--link); }
/* A field that has been left empty or wrong says so where it happened,
   once the person has moved on - never while they are still typing. */
.field.is-bad input, .field.is-bad select, .field.is-bad textarea {
  border-color: color-mix(in srgb, var(--warn) 62%, transparent);
  background: color-mix(in srgb, var(--warn) 7%, var(--surface-2));
}
.fielderr {
  font-size: 0.8rem; color: var(--warn); letter-spacing: -0.004em;
  margin: 0; overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height 320ms cubic-bezier(0.19, 1, 0.22, 1), opacity 240ms ease;
}
.field.is-bad .fielderr { max-height: 3em; opacity: 1; }
textarea { min-height: 104px; resize: vertical; }
/* ---------- picking services ----------
   The native checkbox still does the work - it just stops being the thing
   you look at. The tick is drawn, so it can be given a stroke that runs. */
.svc { display: grid; gap: 8px; }
.svc label {
  position: relative;
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: var(--r); cursor: pointer;
  background: var(--surface-2);
  border: 1px solid transparent;
  transition: background-color 220ms ease, border-color 220ms ease,
              transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
}
@media (hover: hover) { .svc label:hover { background: var(--surface-3); } }
.svc label:active, .svc label.is-pressed { transform: scale(0.988); transition-duration: 110ms; }
.svc label:has(input:checked) {
  background: color-mix(in srgb, var(--taxi) 10%, var(--surface-2));
  border-color: color-mix(in srgb, var(--taxi) 38%, transparent);
}
.svc label:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.svc input[type="checkbox"] {
  position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer;
}
.tickbox {
  width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
  transition: background-color 240ms cubic-bezier(0.19, 1, 0.22, 1),
              border-color 240ms ease, transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
}
.tickbox svg { width: 16px; height: 16px; display: block; }
.tickbox path {
  fill: none; stroke: var(--accent-ink); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22;
  transition: stroke-dashoffset 260ms cubic-bezier(0.19, 1, 0.22, 1);
}
.svc input:checked ~ .tickbox,
label:has(input:checked) > .tickbox {
  background: var(--taxi-deep); border-color: var(--taxi-deep); transform: scale(1.04);
}
label:has(input:checked) > .tickbox path { stroke: #fff; stroke-dashoffset: 0; transition-delay: 60ms; }

/* No :has() - the tick still draws, the row just does not tint. */
@supports not selector(:has(*)) {
  .svc input[type="checkbox"] { position: static; opacity: 1; }
  .tickbox { display: none; }
}
.svc .svcname { font-weight: 500; font-size: 0.97rem; letter-spacing: -0.008em; }
.svc .svcnote { display: block; font-weight: 400; font-size: 0.81rem; color: var(--ink-3); letter-spacing: 0; }
.svc .svcprice { font-size: 0.9rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* The quantity gets its own cell beside the price, not a line of its own
   under the description. */
.qty {
  width: 64px !important; min-height: 36px !important; padding: 6px 9px !important;
  text-align: center; font-variant-numeric: tabular-nums;
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.qty:focus { border-color: color-mix(in srgb, var(--link) 60%, transparent) !important; }
.svc label:not(:has(.qty)) .svcprice { grid-column: 3 / -1; }
.estimate { position: sticky; top: 72px; }
.estimate__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 0 4px; border-top: 1px solid var(--line); margin-top: 14px; }
.estimate__total strong { font-size: clamp(2rem, 4.2vw, 2.7rem); font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 0.92rem; color: var(--ink-2); }
.lines li:first-child { border-top: 0; }
.lines li span:last-child { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.lines li.muted { color: var(--ink-3); }
.estimate .small + .small { margin-top: 7px; }
.notice { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--ink); font-size: 0.89rem; }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px; align-items: start; font-size: 0.86rem; color: var(--ink-2); }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--link); }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.formstatus { margin-top: 14px; font-size: 0.93rem; min-height: 1.4em; }
.formstatus.ok { color: var(--ok); font-weight: 600; }
.formstatus.err { color: var(--warn); font-weight: 600; }


/* ---------- the standard: nine rules, each with the reason ---------- */
.rules {
  list-style: none; margin: 0; padding: 0; counter-reset: rule;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.rules li {
  counter-increment: rule;
  position: relative;
  display: grid; grid-template-rows: auto auto 1fr; gap: 10px;
  padding: clamp(22px, 2.4vw, 28px);
  padding-top: clamp(30px, 3vw, 36px);
  border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-1);
}
.rules li::before {
  content: counter(rule, decimal-leading-zero);
  position: absolute; top: 18px; right: 22px;
  font-family: var(--display); font-size: 1.15rem; color: var(--taxi-deep);
  letter-spacing: 0.02em;
}
.rules h3 { font-size: 1.1rem; letter-spacing: -0.014em; padding-right: 40px; }
.rules p { color: var(--ink-2); font-size: 0.94rem; line-height: 1.5; }
.rules__why {
  align-self: end;
  padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-family: var(--display); font-style: italic;
  font-size: 1.02rem; line-height: 1.35; color: var(--ink-3);
}
@media (max-width: 1000px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rules { grid-template-columns: minmax(0, 1fr); } }

/* ---------- what touches what ---------- */
.manifest {
  margin-top: clamp(28px, 4vw, 44px);
  border-radius: var(--r-xl); background: var(--surface);
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-1);
  padding: clamp(20px, 2.6vw, 30px); overflow: hidden;
}
.manifest h3 { margin-bottom: 14px; }
.manifest table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.manifest th, .manifest td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-top: 1px solid var(--line-soft); }
.manifest thead th { border-top: 0; padding-top: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.manifest tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; padding-right: 22px; }
.manifest td { color: var(--ink-2); }
.manifest td:last-child { color: var(--ink-3); }
.manifest .small { margin-top: 12px; }
@media (max-width: 760px) {
  .manifest table, .manifest thead, .manifest tbody, .manifest tr, .manifest th, .manifest td { display: block; }
  .manifest thead { display: none; }
  .manifest tr { padding: 12px 0; border-top: 1px solid var(--line-soft); }
  .manifest th, .manifest td { border: 0; padding: 2px 0; white-space: normal; }
  .manifest tbody th { padding-bottom: 4px; }
}

/* ---------- the vendor packet ---------- */
.packet {
  margin-top: clamp(16px, 2vw, 22px);
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: clamp(20px, 4vw, 48px);
  padding: clamp(22px, 2.8vw, 34px);
  border-radius: var(--r-xl);
  background: var(--accent); color: #fff;
  box-shadow: var(--shadow-2);
}
.packet__head .eyebrow { color: var(--taxi); }
.packet__head h3 { color: #fff; font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -0.01em; margin-top: 8px; }
.packet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.packet__list li { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 6px 20px; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.packet__list li:first-child { border-top: 0; padding-top: 0; }
.packet__list strong { font-weight: 600; letter-spacing: -0.008em; }
.packet__list strong a { color: #fff; text-decoration: underline; text-decoration-color: var(--taxi); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color 180ms ease, color 180ms ease; }
.packet__list strong a:hover { color: var(--taxi); }
.packet__list strong a:focus-visible { outline: 2px solid var(--taxi); outline-offset: 3px; border-radius: 3px; }
.packet__list span { color: rgba(255, 255, 255, 0.76); font-size: 0.93rem; line-height: 1.5; }
@media (max-width: 860px) {
  .packet { grid-template-columns: minmax(0, 1fr); }
  .packet__list li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

/* ---------- faq ---------- */
.faq { display: grid; gap: 0; max-width: 60rem; border-radius: var(--r-lg); border: 1px solid var(--line-soft); background: var(--surface); overflow: hidden; }
.faq details { border-top: 1px solid var(--line-soft); }
.faq details:first-child { border-top: 0; }
.faq summary {
  cursor: pointer; list-style: none; padding: 19px 54px 19px 22px; position: relative;
  font-size: 1.03rem; font-weight: 500; letter-spacing: -0.014em;
  transition: background-color 160ms ease;
}
.faq summary:hover { background: var(--surface-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 13px; height: 1.8px; border-radius: 2px; background: var(--ink-3);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 54px 20px 22px; color: var(--ink-2); font-size: 0.97rem; max-width: 46rem; }

/* ---------- footer ---------- */
.footer { padding-block: clamp(44px, 6vw, 64px) 28px; background: var(--surface-2); color: var(--ink-3); font-size: 0.87rem; letter-spacing: -0.003em; }
.footer a { color: var(--ink-2); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px 36px; }
.footer__about p { margin-top: 12px; max-width: 30ch; color: var(--ink-2); }
.footer__nap { display: grid; gap: 2px; }
.footer__col { display: grid; align-content: start; gap: 8px; }
.footer__col a span { color: var(--ink-3); font-size: 0.78rem; }
.footer__h { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 0.8rem; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__about { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }
.placeholder { background: color-mix(in srgb, var(--taxi) 26%, transparent); padding: 0 4px; border-radius: 4px; }

/* ---------- motion: materialize on enter ---------- */
/* Visible by default. The script adds .js to <html> immediately before it
   starts watching, so if anything upstream of that fails the page still
   reads - it just does not animate. A blank page is a worse bug than a
   missing flourish. */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.986); filter: blur(7px); }
.js .reveal.is-in {
  opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0);
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ============================================================
   THE STAGE
   The hero is one held frame you look into, not a band of photo
   under some text. A shader hazes the whole image and clears a
   soft region under the pointer - the business, literally: a
   surface going from filmed-over to right. The haze doubles as
   the scrim that keeps the type legible, so the two jobs are
   the same job.
   ============================================================ */
.hero { padding: 0; text-align: left; }
.hero__stage {
  position: relative;
  min-height: min(86svh, 800px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #eef1f4;
  isolation: isolate;
}
.hero__canvas,
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
.hero__canvas { opacity: 0; transition: opacity 700ms ease; z-index: 1; }
.hero__stage.is-shaded .hero__canvas { opacity: 1; }
/* The photo stays under the canvas as the fallback. If WebGL never starts,
   this is what people see, and the veil below still carries the type. */
.hero__stage.is-shaded .hero__img { opacity: 0; transition: opacity 700ms ease; }

/* Always present, shader or no shader. White, because the whole point is
   that the frame reads as clean air; the copy sits on a soft bank of it. */
.hero__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.82) 0%,
                              rgba(255, 255, 255, 0.64) 34%,
                              rgba(255, 255, 255, 0.26) 52%,
                              rgba(255, 255, 255, 0) 66%),
    linear-gradient(to top, rgba(255, 255, 255, 0.4) 0%,
                            rgba(255, 255, 255, 0) 22%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.28) 0%,
                               rgba(255, 255, 255, 0) 18%);
}

.hero__copy {
  position: relative; z-index: 3;
  width: 100%;
  padding-block: clamp(84px, 11vw, 132px) clamp(48px, 7vw, 84px);
  display: grid; gap: clamp(16px, 2vw, 22px);
  justify-items: start;
  color: var(--ink);
}
.hero__copy .eyebrow { color: var(--ink-3); }
.hero__copy .eyebrow span { color: var(--taxi-deep); }
.hero__copy h1 {
  color: var(--accent);
  font-size: clamp(3rem, 7.4vw, 6.4rem);
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* The H1 carries the search phrase in small caps above the display line, so
   the page says what it is to a crawler without the headline changing. */
.hero__kicker {
  display: block; margin-bottom: clamp(16px, 2vw, 22px);
  font-family: var(--body); font-size: 0.78rem; line-height: 1.4; font-weight: 600;
  letter-spacing: 0.055em; text-transform: uppercase; color: var(--ink-3);
}
.hero__kicker span { color: var(--taxi-deep); }
.hero__display { display: block; max-width: 11ch; }
.hero__copy .lede { color: var(--ink-2); max-width: 36ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* A line of instruction, once, then it gets out of the way. */
.hero__hint {
  position: absolute; z-index: 3;
  right: clamp(16px, 3vw, 38px); top: clamp(76px, 9vw, 104px);
  margin: 0;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0; transition: opacity 900ms ease;
}
.hero__stage.is-shaded .hero__hint { opacity: 1; }
.hero__stage.is-touched .hero__hint { opacity: 0; }

.hero .facts {
  width: 100%; max-width: none; margin: 0;
  border-radius: 0; border: 0; box-shadow: none;
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

/* A phone stacks it: the photograph and its clean patch in a band up top,
   the copy on white underneath. Nothing has to be read through the picture.
   Same for a portrait tablet, where the nav has already folded away. */
@media (max-width: 860px) {
  .hero__stage { --band: min(46svh, 440px); min-height: 0; display: block; background: var(--ground); }
  .hero__canvas, .hero__img, .hero__veil { inset: 0 0 auto 0; height: var(--band); }
  .hero__img { object-position: 62% 50%; }
  .hero__veil {
    background:
      linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0.62) 12%, rgba(255, 255, 255, 0) 32%),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 30%);
  }
  .hero__copy { margin-top: var(--band); padding-block: 4px 40px; }
  .hero__copy h1 { max-width: 100%; }
  .hero__hint { display: none; }
}

/* ============================================================
   THE FRAME
   Corner furniture that stays put while the page moves under it.
   ============================================================ */
.corner {
  position: fixed; z-index: 45; pointer-events: none;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0; transform: translateY(6px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.js .corner { opacity: 1; transform: none; }
.corner--right { right: clamp(14px, 2.4vw, 26px); bottom: clamp(14px, 2.4vw, 22px); }
/* Held back until the hero's own button has scrolled away, so the two are
   never on screen asking for the same click. */
.js .corner { opacity: 0; transform: translateY(10px); pointer-events: none; }
.js .corner.is-on { opacity: 1; transform: none; }
.js .corner.is-on .corner__pill { pointer-events: auto; }
.corner .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); margin-right: 7px; vertical-align: 1px;
}
.corner__pill {
  pointer-events: auto;
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: var(--pill);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-1);
  color: var(--ink-2); text-decoration: none;
}
.corner__pill:hover { text-decoration: none; color: var(--ink); }
@media (max-width: 900px) { .corner { display: none; } }


/* ---------- the bar sits on the stage until the stage is gone ----------
   Over the hero there is no chrome at all: brand, nav and the quote button
   float on the photograph. The glass only arrives once the bar has
   something behind it that needs separating. */
/* Fixed, not sticky, so the stage starts at the very top of the window and
   the bar floats on it. Everything below is full-bleed too, so nothing
   needs padding to make up for the height that leaves the flow. */
.topbar--over { position: fixed; top: 0; left: 0; right: 0; }
.topbar--over:not(.is-stuck) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.topbar--over:not(.is-stuck) .btn--small {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
}
.topbar--over:not(.is-stuck) .btn--small:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 62%, transparent);
}
.topbar--over .brand, .topbar--over .nav a, .topbar--over .topbar__call, .topbar--over .btn--small {
  transition: color 260ms ease, background-color 260ms ease, box-shadow 260ms ease;
}
/* The skip link lands on the photograph, so it keeps its own surface. */
.topbar--over .skip { color: var(--ink); }

/* ---------- the cursor becomes the cloth ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 90;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 1px solid color-mix(in srgb, var(--ink) 42%, transparent);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease, width 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
              height 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
              margin 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 260ms ease, background-color 260ms ease;
}
.cursor.is-on { opacity: 1; }
.cursor.is-link { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.cursor.is-stage { width: 74px; height: 74px; margin: -37px 0 0 -37px; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- grain ---------- */
/* One 140px tile of turbulence, tiled and held still. Enough to take the
   plastic off the flat fills without anyone noticing it is there. */
.grain {
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
  opacity: 0.14; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}

/* ---------- nav: the serif leans in on hover ---------- */
.nav a { position: relative; }
.nav a em, .nav a span { display: block; }
.nav a .ital {
  position: absolute; inset: 0;
  font-family: var(--display); font-style: italic; font-size: 1.06em;
  line-height: inherit; letter-spacing: 0;
  opacity: 0; transform: translateY(3px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.nav a .plain { transition: opacity 200ms ease, transform 200ms ease; }
.nav a:hover .plain, .nav a:focus-visible .plain { opacity: 0; transform: translateY(-3px); }
.nav a:hover .ital, .nav a:focus-visible .ital { opacity: 1; transform: none; }

/* ---------- a hairline that draws itself across a section edge ---------- */
.section--alt { position: relative; }
.section--alt::before {
  content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%;
  background: linear-gradient(to right, transparent, var(--taxi), transparent);
  transform: scaleX(0); transform-origin: 50% 50%;
  opacity: 0.55;
}
.js .section--alt.is-in::before {
  transform: scaleX(1);
  transition: transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- headline words rise ---------- */
.js .wordwrap { display: inline-block; overflow: hidden; vertical-align: top; }
.js .word {
  display: inline-block;
  transform: translateY(102%) rotate(2deg);
  opacity: 0;
}
.js .is-in .word, .js .word.is-in {
  transform: none; opacity: 1;
  transition: transform 900ms cubic-bezier(0.19, 1, 0.22, 1),
              opacity 700ms cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: var(--d, 0ms);
}

/* ---------- price cards cascade ----------
   The entrance uses `translate`, not `transform`, so it composes with the
   hover lift instead of overriding it. Two properties, two jobs. */
.js .menu li { opacity: 0; translate: 0 16px; }
.js .menu.is-in li {
  opacity: 1; translate: none;
  transition: opacity 560ms ease, translate 700ms cubic-bezier(0.19, 1, 0.22, 1),
              transform 420ms cubic-bezier(0.19, 1, 0.22, 1),
              box-shadow 420ms cubic-bezier(0.19, 1, 0.22, 1),
              border-color 300ms ease;
  transition-delay: calc(var(--i, 0) * 55ms), calc(var(--i, 0) * 55ms), 0ms, 0ms, 0ms;
}

/* ---------- the job steps light up one at a time ---------- */
.js .steps li { transition: opacity 420ms ease, color 420ms ease; }
.js .steps.is-tracking li { opacity: 0.34; }
.js .steps.is-tracking li.is-current { opacity: 1; }


/* ---------- the send button says what it is doing ----------
   Three states in one element: the label cross-fades and the width springs
   between them, so the button never jumps or goes dead under the finger. */
.btn { position: relative; overflow: hidden; }
.btn__label { display: inline-flex; align-items: center; gap: 9px; transition: opacity 200ms ease, transform 280ms cubic-bezier(0.19, 1, 0.22, 1); }
.btn.is-busy .btn__label, .btn.is-done .btn__label { opacity: 0; transform: translateY(-120%); }
.btn__state {
  position: absolute; inset: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  opacity: 0; transform: translateY(120%);
  transition: opacity 200ms ease, transform 280ms cubic-bezier(0.19, 1, 0.22, 1);
}
.btn.is-busy .btn__busy, .btn.is-done .btn__done { opacity: 1; transform: none; }
.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  animation: spin 720ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-done { background: var(--ok); }

/* ---------- estimate lines arrive and leave ---------- */
.lines li { transition: opacity 300ms ease, transform 380ms cubic-bezier(0.19, 1, 0.22, 1); }
.js .lines li.is-new { opacity: 0; transform: translateY(-7px); }
.js .lines li.is-settled { opacity: 1; transform: none; }

/* ---------- scroll position, as a hairline ---------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 46;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(to right, var(--taxi-deep), var(--taxi));
  pointer-events: none; opacity: 0; transition: opacity 400ms ease;
}
.js .progress { opacity: 1; }

/* ---------- photography arrives as a wipe, and drifts on scroll ---------- */
/* The wipe goes on the image, never on the <figure>.
   IntersectionObserver folds the target's own clip-path into the
   intersection rect, so clipping the watched element to zero height means
   it never reports as intersecting, never gets .is-in, and never unclips
   itself. The figure stays measurable; the picture inside it wipes up. */
.js .shot.reveal img { clip-path: inset(0 0 100% 0); }
.js .shot.reveal.is-in img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1000ms cubic-bezier(0.19, 1, 0.22, 1), transform 60ms linear;
}
.js .shot img { transform: scale(1.12) translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* ---------- fee chips arrive in order ---------- */
.js .fees .chip { opacity: 0; translate: 0 8px; }
.js .fees.is-in .chip {
  opacity: 1; translate: none;
  transition: opacity 420ms ease, translate 520ms cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--i, 0) * 40ms);
}
.chip { transition: background-color 200ms ease, color 200ms ease; }
@media (hover: hover) { .chip:hover { background: color-mix(in srgb, var(--taxi) 18%, var(--surface-3)); color: var(--ink); } }

/* ---------- accessibility preferences ---------- */

/* ============================================================
   THE AIRCRAFT PICKER
   A list you read top to bottom, not a strip of words. Each size is drawn
   to scale, so the list itself shows how the aircraft grow; a finder takes
   the model name people actually know; the panel follows the choice.
   ============================================================ */
.fleet {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1.46fr);
  gap: clamp(22px, 3.4vw, 46px); align-items: start;
}
.fleet__side { display: grid; gap: 12px; }
.fleet__or { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 6px 2px -2px; }

/* the finder */
.finder { position: relative; }
.finder__label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; color: var(--ink-3); margin: 0 2px 8px; }
.finder__field { position: relative; }
.finder__field input {
  width: 100%; height: 52px; padding: 0 44px 0 44px;
  font-size: 1rem; letter-spacing: -0.01em; color: var(--ink);
  background: var(--surface-2); border: 1px solid transparent; border-radius: 14px;
  outline: none; -webkit-appearance: none; appearance: none;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 380ms cubic-bezier(0.19, 1.5, 0.3, 1);
}
.finder__field input::placeholder { color: #8a8a90; }
.finder__field input:hover { background: var(--surface-3); }
.finder__field input:focus { background: var(--surface); border-color: color-mix(in srgb, var(--link) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--link) 16%, transparent); }
.finder__glass { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.finder__clear {
  position: absolute; right: 8px; top: 50%; width: 32px; height: 32px; margin-top: -16px;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); cursor: pointer;
}
.finder__clear svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.finder__clear:active { transform: scale(0.92); }
.finder__clear[hidden] { display: none; }
.finder__list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px);
  list-style: none; margin: 0; padding: 6px; max-height: 336px; overflow-y: auto;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow-2);
  transform-origin: top center; animation: finder-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes finder-in { from { opacity: 0; transform: translateY(-4px) scale(0.985); } }
.finder__list [role="option"] {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  padding: 11px 12px; border-radius: 10px; cursor: pointer;
}
.finder__list [role="option"]:hover, .finder__list [aria-selected="true"] { background: var(--surface-2); }
.finder__model { font-size: 0.95rem; color: var(--ink); letter-spacing: -0.01em; }
.finder__model mark { background: none; color: inherit; font-weight: 650; }
.finder__cls { font-size: 0.76rem; color: var(--ink-3); white-space: nowrap; }
.finder__none { padding: 12px; font-size: 0.9rem; color: var(--ink-2); }

/* the list of sizes */
.fleet__list { display: grid; gap: 4px; }
.fleet__opt {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 16px;
  width: 100%; min-height: 62px; padding: 10px 16px 10px 12px; text-align: left;
  border: 0; border-radius: 16px; background: transparent; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 220ms ease, box-shadow 260ms cubic-bezier(0.19, 1, 0.22, 1), transform 140ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media (hover: hover) { .fleet__opt:hover { background: var(--surface-2); } }
.fleet__opt.is-pressed { transform: scale(0.985); }
.fleet__opt[aria-checked="true"] {
  background: var(--surface);
  box-shadow: 0 0 0 1.5px var(--taxi), 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 26px -14px rgba(20, 40, 63, 0.35);
}
.fleet__opt:focus-visible { outline-offset: 2px; }
.fleet__icon { display: flex; align-items: flex-end; justify-content: flex-end; height: 30px; color: #a2acb8; transition: color 220ms ease; }
.fleet__icon svg { display: block; height: auto; max-height: 30px; }
.fleet__opt[aria-checked="true"] .fleet__icon { color: var(--accent); }
.fleet__txt { display: grid; gap: 2px; min-width: 0; }
.fleet__name { font-size: 0.98rem; font-weight: 600; letter-spacing: -0.014em; color: var(--ink); }
.fleet__eg { font-size: 0.8rem; line-height: 1.35; color: var(--ink-3); text-wrap: pretty; }

/* the panel */
.fleet__panel { display: grid; gap: clamp(16px, 2vw, 22px); min-width: 0; scroll-margin-top: 72px; }
.fleet__stage {
  position: relative; overflow: hidden;
  height: clamp(132px, 15.5vw, 200px);
  border-radius: var(--r-xl);
  background: radial-gradient(120% 90% at 50% 100%, #ffffff 0%, #f3f5f8 55%, #eceff3 100%);
  border: 1px solid var(--line-soft);
}
.fleet__craft { position: absolute; left: 50%; bottom: 23%; transform: translateX(-50%); }
.fleet__art { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; opacity: 0; transition: opacity 260ms ease; }
.fleet__art.is-front { opacity: 1; }
.fleet__craft.is-custom .fleet__art { opacity: 0.18; }
.fleet__shadow {
  position: absolute; left: 6%; right: 6%; bottom: -14px; height: 16px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 40, 63, 0.16), rgba(20, 40, 63, 0));
}
.fleet__scale { position: absolute; right: 16px; bottom: 12px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9aa3ad; }
.fleet__head { display: grid; gap: 4px; }
.fleet__kicker { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.fleet__title { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--accent); }
.fleet__sub { color: var(--ink-2); font-size: 0.95rem; }
.fleet__more { margin-top: 2px; }
.fleet .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fleet .menu li { padding: clamp(20px, 2.2vw, 26px); }

@media (max-width: 980px) {
  .fleet { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .fleet__list { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fleet__opt { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; min-height: 0; align-content: start; background: var(--surface-2); }
  .fleet__opt[aria-checked="true"] { background: var(--surface); }
  .fleet__icon { justify-content: flex-start; height: 24px; }
  .fleet__icon svg { max-height: 24px; }
  .fleet__name { font-size: 0.9rem; }
  .fleet__eg { font-size: 0.74rem; }
  .fleet .menu { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the quote section's phone line ---------- */
.quote__call { font-size: 1rem; color: var(--ink-2); }
.quote__call a { font-weight: 500; white-space: nowrap; }

/* ============================================================
   ABOUT AND SERVICE AREAS
   ============================================================ */
.about { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.about__copy { display: grid; gap: 16px; }
.about__copy p { color: var(--ink-2); font-size: 1.04rem; max-width: 36rem; }
.about__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 10px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.about__facts dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.about__facts dd { margin: 4px 0 0; font-size: 0.95rem; color: var(--ink); }
.about__areas { display: grid; gap: 14px; }
@media (max-width: 900px) { .about { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .about__facts { grid-template-columns: minmax(0, 1fr); } }

.areagrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.areagrid--home { grid-template-columns: 1fr 1fr; }
.areacard {
  position: relative; display: grid; gap: 4px; padding: 18px 44px 18px 18px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none;
  transition: transform 420ms cubic-bezier(0.19, 1, 0.22, 1), box-shadow 420ms cubic-bezier(0.19, 1, 0.22, 1), border-color 300ms ease;
}
.areacard:hover { text-decoration: none; }
@media (hover: hover) { .areacard:hover { transform: translate3d(0, -3px, 0); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--taxi) 34%, var(--line-soft)); } }
.areacard:active { transform: scale(0.985); }
.areacard__codes { display: flex; flex-wrap: wrap; gap: 2px 12px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--taxi-deep); }
.areacard__name { font-family: var(--display); font-size: 1.45rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--accent); }
.areacard__meta { font-size: 0.82rem; color: var(--ink-3); }
.areacard__go { position: absolute; right: 18px; top: 50%; margin-top: -0.6em; color: var(--ink-3); transition: transform 300ms cubic-bezier(0.19, 1, 0.22, 1); }
.areacard:hover .areacard__go { transform: translateX(3px); color: var(--accent); }
@media (max-width: 900px) { .areagrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .areagrid, .areagrid--home { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   INNER PAGES
   ============================================================ */
.sub .topbar { position: sticky; }
.section--tight { padding-block: clamp(36px, 5vw, 64px); }
.pagehead { padding-block: clamp(44px, 7vw, 92px) clamp(24px, 3.5vw, 40px); background: linear-gradient(180deg, #f5f7f9 0%, var(--ground) 100%); }
.pagehead h1 { font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.02; color: var(--accent); max-width: 20ch; margin-top: 10px; }
.pagehead__lede { margin-top: 18px; max-width: 42rem; font-size: clamp(1.06rem, 1.4vw, 1.22rem); line-height: 1.55; color: var(--ink-2); letter-spacing: -0.01em; }
.pagehead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 26px; }
.pagehead__actions .icon, .cta__actions .icon { width: 15px; height: 15px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0; font-size: 0.8rem; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: #b8bfc8; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }

.apgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.apgrid--1 { grid-template-columns: minmax(0, 560px); }
@media (min-width: 641px) { .apgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split--after { margin-top: clamp(48px, 6vw, 80px); }
.hub__h2 { margin-top: clamp(48px, 6vw, 80px); }
.codes { white-space: nowrap; }
.apcard { padding: 22px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.apcard__code { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--taxi-deep); }
.apcard h3 { margin-top: 4px; font-size: 1.12rem; }
.apcard dl { margin: 14px 0 0; display: grid; gap: 8px; }
.apcard dl div { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.apcard dt { font-size: 0.78rem; color: var(--ink-3); }
.apcard dd { margin: 0; font-size: 0.88rem; color: var(--ink); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.prose { max-width: 46rem; }
.prose--wide { max-width: 52rem; margin-top: clamp(28px, 4vw, 44px); }
.prose h2 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); margin: 34px 0 12px; color: var(--accent); }
.prose > h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.62; margin-bottom: 14px; }
.prose__note { color: var(--ink-2); font-size: 0.97rem; margin: 18px 0 8px; max-width: 48rem; }
.h2--sm { font-size: clamp(1.55rem, 2.6vw, 2.05rem); color: var(--accent); margin: 38px 0 14px; }
.h2--sm:first-child { margin-top: 0; }
.ticks { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: 0.99rem; line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 12px; height: 7px; border: solid var(--taxi); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.steps--static li { opacity: 1 !important; }
.sidecard { position: sticky; top: 80px; display: grid; gap: 8px; padding: 22px; background: var(--surface-2); border-radius: var(--r-lg); font-size: 0.9rem; }
.sidecard ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.sidecard li span { color: var(--ink-3); font-size: 0.78rem; }
@media (max-width: 900px) { .sidecard { position: static; } }

.ratewrap { margin: 6px 0 10px; }
.ratecard { width: 100%; border-collapse: collapse; min-width: 560px; font-variant-numeric: tabular-nums; }
.ratecard--narrow { min-width: 0; }
.ratecard tbody th:first-child { min-width: 13.5rem; }
/* on a phone the size column stays put while the prices scroll under it */
@media (max-width: 700px) {
  .ratecard tbody th:first-child { min-width: 9.5rem; }
  .ratecard:not(.ratecard--narrow) th:first-child, .ratecard:not(.ratecard--narrow) td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line-soft);
  }
  .ratecard:not(.ratecard--narrow) thead th:first-child { background: var(--surface-2); }
  .ratecard--narrow tbody th:first-child { min-width: 0; width: 56%; }
  .ratecard th, .ratecard td { padding: 12px 14px; }
  .ratecard caption { padding: 12px 14px 8px; }
}
.ratecard caption { caption-side: top; text-align: left; padding: 14px 18px 10px; font-size: 0.8rem; color: var(--ink-3); }
.ratecard th, .ratecard td { text-align: right; padding: 13px 18px; border-top: 1px solid var(--line-soft); font-size: 0.95rem; white-space: nowrap; }
.ratecard thead th { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); white-space: normal; }
.ratecard th:first-child, .ratecard td:first-child { text-align: left; }
.ratecard tbody th { font-weight: 400; white-space: normal; }
.ratecard td { color: var(--ink); }
.rt__size { display: block; font-weight: 600; letter-spacing: -0.012em; }
.rt__eg { display: block; font-size: 0.76rem; color: var(--ink-3); }
.ratecard--airports td, .ratecard--airports th { text-align: left; white-space: normal; }
.ratecard--airports td:nth-child(5), .ratecard--airports td:nth-child(6) { white-space: nowrap; }
/* on a phone each airport becomes a short card instead of a six-column row */
@media (max-width: 700px) {
  .ratecard--airports { min-width: 0; }
  .ratecard--airports thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ratecard--airports tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 14px 18px; border-top: 1px solid var(--line-soft); }
  .ratecard--airports tbody tr:first-child { border-top: 0; }
  .ratecard--airports th, .ratecard--airports td { display: block; padding: 0; border: 0; white-space: normal !important; position: static !important; box-shadow: none !important; background: none !important; min-width: 0 !important; }
  .ratecard--airports tbody th { grid-row: 1; align-self: baseline; }
  .ratecard--airports .ap__name { grid-row: 1; font-weight: 600; }
  .ratecard--airports td[data-label] { grid-column: 1 / -1; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; font-size: 0.9rem; color: var(--ink-2); }
  .ratecard--airports td[data-label]::before { content: attr(data-label); color: var(--ink-3); font-size: 0.8rem; }
}
.ratecard--airports tbody th { font-family: var(--mono); font-weight: 500; color: var(--taxi-deep); }
.ratecard--stain td, .ratecard--stain th { text-align: left; white-space: normal; vertical-align: top; }
.ratecard--stain td:last-child { color: var(--warn); }
/* the stain guide reads as cards on a phone: three columns of prose don't fit */
@media (max-width: 640px) {
  .ratecard--stain thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ratecard--stain tr { display: grid; gap: 6px; padding: 14px 18px; border-top: 1px solid var(--line-soft); }
  .ratecard--stain tbody tr:first-child { border-top: 0; }
  .ratecard--stain th, .ratecard--stain td { display: block; padding: 0; border: 0; }
  .ratecard--stain tbody th { font-weight: 600; }
  .ratecard--stain td::before { content: attr(data-label); display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
}

.feegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 10px; }
.feegrid > div { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); }
.feegrid__v { font-family: var(--display); font-size: 1.9rem; line-height: 1.1; color: var(--accent); }
@media (max-width: 720px) { .feegrid { grid-template-columns: 1fr 1fr; } }

.cta { padding-block: clamp(44px, 6vw, 72px); background: var(--accent); color: #fff; }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; }
.cta h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.cta p { color: rgba(255, 255, 255, 0.78); margin-top: 8px; max-width: 34rem; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.cta .btn { background: #fff; color: var(--accent); }
.cta .btn:hover { background: #eef1f5; }
.cta .textlink { color: #fff; }
.center-404 { text-align: center; }
.center-404 p { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 14px 22px; justify-content: center; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .finder__list { animation: none; }
  .areacard, .areacard:hover, .fleet__opt.is-pressed { transform: none; }
  .fleet__art { transition: opacity 120ms linear; }
  html { scroll-behavior: auto; }
  /* .js raised the specificity of the reveal rules, so these have to match it
     or reduced motion silently stops working. */
  .js .reveal { transform: none; filter: none; }
  .js .reveal.is-in { transform: none; filter: none; transition: opacity 260ms ease; }
  .btn, .textlink, .fleet__opt { transition: background-color 180ms ease, color 180ms ease; }
  .btn:active, .btn.is-pressed, .textlink:active, .fleet__opt:active, .fleet__opt.is-pressed { transform: none; }
  .faq summary::before, .faq summary::after { transition: none; }
  /* Everything the stage and the choreography add is decoration. With
     reduced motion on, it all resolves to its finished state at once. */
  .js .word { transform: none; opacity: 1; }
  .js .wordwrap { overflow: visible; }
  .js .menu li { opacity: 1; translate: none; }
  .menu li, .menu li:hover { transform: none; }
  .menu .sheen { display: none; }
  .js .shot.reveal img, .js .shot.reveal.is-in img { clip-path: none; }
  .js .shot img { transform: none; }
  .js .fees .chip { opacity: 1; translate: none; }
  .js .lines li.is-new { opacity: 1; transform: none; }
  .spinner { animation: none; border-top-color: transparent; }
  .progress { transition: none; }
  input:focus, select:focus, textarea:focus { transition: box-shadow 140ms ease; }
  .js .section--alt::before { transform: scaleX(1); transition: none; }
  .js .steps.is-tracking li { opacity: 1; }
  .cursor { display: none; }
  .hero__canvas { transition: none; }
  .grain { display: none; }
  * { scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--line); }
  .report { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .corner__pill { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topbar--over:not(.is-stuck) { background: rgba(255, 255, 255, 0.92); border-bottom-color: var(--glass-line); }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(0, 0, 0, 0.38); --line-soft: rgba(0, 0, 0, 0.26); --ink-2: #2b2b2e; --ink-3: #4a4a4f; }
  .topbar { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .report { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu li, .panel, .who > div, .never, .facts, .tablewrap, .faq { border-color: var(--line); }
  .grain { display: none; }
  .hero__veil { background: linear-gradient(to right, #fff 0%, #fff 55%, rgba(255, 255, 255, 0.7) 100%); }
  .hero__copy .lede { color: var(--ink); }
  .topbar--over:not(.is-stuck) { background: #fff; }
}
@media print {
  .topbar, .hero__actions, .quote, .finder, .fleet__stage, .cursor, .grain, .corner, .hero__canvas, .hero__hint { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- photo layout helpers ---------- */
.shot--hero { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .shot--hero { aspect-ratio: 4 / 3; } }
.shotgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(26px, 4vw, 44px); }
.shotgrid .shot { aspect-ratio: 3 / 2; }
@media (max-width: 720px) { .shotgrid { grid-template-columns: minmax(0, 1fr); } }
.shot--wide { aspect-ratio: 21 / 8; margin-bottom: clamp(30px, 4vw, 52px); }
@media (max-width: 760px) { .shot--wide { aspect-ratio: 3 / 2; } }
.shot--band { aspect-ratio: 16 / 5; border-radius: 0; }
@media (max-width: 760px) { .shot--band { aspect-ratio: 4 / 3; } }
.shot img { transform: scale(1.001); }

/* generated: to-scale widths for the aircraft drawings */
.fleet__opt[data-cls="C1"] .fleet__icon svg{width:47.4%}.fleet__craft[data-cls="C1"]{width:39.79%}
.fleet__opt[data-cls="C2"] .fleet__icon svg{width:51.3%}.fleet__craft[data-cls="C2"]{width:43.11%}
.fleet__opt[data-cls="C3"] .fleet__icon svg{width:58.9%}.fleet__craft[data-cls="C3"]{width:49.46%}
.fleet__opt[data-cls="C4"] .fleet__icon svg{width:68.8%}.fleet__craft[data-cls="C4"]{width:57.75%}
.fleet__opt[data-cls="C5"] .fleet__icon svg{width:79.0%}.fleet__craft[data-cls="C5"]{width:66.32%}
.fleet__opt[data-cls="C6"] .fleet__icon svg{width:100.0%}.fleet__craft[data-cls="C6"]{width:84.0%}
.fleet__opt[data-cls="H1"] .fleet__icon svg{width:40.8%}.fleet__craft[data-cls="H1"]{width:34.26%}
.fleet__opt[data-cls="H2"] .fleet__icon svg{width:44.7%}.fleet__craft[data-cls="H2"]{width:37.58%}

#legal{max-width:760px}.legal-h1{font-size:clamp(2rem,5vw,3rem);margin:10px 0 24px}.legal-h2{font-size:1.3rem;margin:28px 0 8px}.legal-back{margin-top:32px}#legal p{color:var(--ink-2);margin-bottom:10px}
.center-404{text-align:center}