/* ============================================================================
   FlightX — Landing page
   Photo-led editorial layout: heavy uppercase display type, large rounded
   image frames with circular arrow actions, and an oversized closing wordmark.
   ========================================================================= */

/* ---------------------------------------------------------------- Tokens */
:root {
  /* Colour */
  --ink:         #0B0B14;
  --ink-2:       #2A2740;
  --slate:       #5B5870;   /* body / secondary — 6.7:1 on paper */
  --paper:       #FFFFFF;
  --mist:        #F5F4FA;   /* cool off-white surface */
  --line:        #E6E4F0;
  --line-strong: #D3D0E4;
  /* Brand amber. #FFBC00 is only 1.7:1 on paper, so it is a *fill* colour that
     carries ink text — never white text, and never small text itself. The
     darker steps below cover text, borders and focus rings. */
  --brand:       #FFBC00;   /* primary fill — pairs with --ink, 11.2:1 */
  --brand-press: #E0A400;   /* hover / active fill */
  --brand-edge:  #B07E00;   /* borders + focus rings — 3.6:1 on paper */
  --brand-deep:  #8A5B00;   /* text on paper / on tint — 5.9:1 */
  --brand-soft:  #FFF3D1;   /* tint surface */
  --brand-lift:  #FFD24D;   /* accent on the dark footer — 12.4:1 */
  --danger:      #B3261E;   /* form errors — 6.2:1 on paper */
  --night:       #000000;   /* footer surface */
  --night-2:     #191138;
  --night-line:  rgba(255, 255, 255, .16);
  --invert-2:    rgba(255, 255, 255, .70);

  /* Type */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Public Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Space — 4pt rhythm */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px; --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* Shape & depth */
  --radius: 0;              /* square corners throughout — no rounding anywhere */
  --shadow-1: 0 1px 2px rgba(11, 11, 20, .05);
  --shadow-2: 0 14px 36px -14px rgba(11, 11, 20, .16), 0 2px 6px rgba(11, 11, 20, .04);
  --shadow-3: 0 30px 70px -26px rgba(48, 34, 0, .26), 0 2px 8px rgba(11, 11, 20, .05);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  220ms;

  /* Layout */
  --wrap: 1200px;
  --gutter: var(--s-5);
  --masthead-h: 70px;

  /* Layering */
  --z-head: 40; --z-skip: 100;
}

/* ------------------------------------------------------------- Base reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--masthead-h) + var(--s-5));
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand-edge);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.footer :focus-visible, .frame :focus-visible { outline-color: var(--brand-lift); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: var(--s-3); left: var(--s-3);
  z-index: var(--z-skip);
  padding: 10px 16px;
  background: var(--ink); color: #fff;
  border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 13px;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ------------------------------------------------------------- Typography */
/* Display type is set uppercase at normal width — expanded widths blow past
   the measure once the text is all caps. */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: normal;
  text-transform: uppercase;
  letter-spacing: -.018em;
  line-height: .97;
  text-wrap: balance;
}
/* Sized so the longer of the two lines ("BUILT BY PEOPLE", 8.8em) always fits
   the copy column — measured, not guessed. The <br> in the markup sets the
   break; text-wrap: normal stops `balance` from second-guessing it. */
.display--xl { font-size: min(9vw, 3.55rem); }
.display--2line { text-wrap: normal; }
.display--lg { font-size: clamp(1.95rem, 3.5vw, 3.05rem); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #FFBC01;
  margin-bottom: var(--s-4);
}
.eyebrow--invert { color: var(--brand-lift); }

/* Every paragraph on a light surface shares --ink-2, so a lede, a prose block
   and a card body never read as three different greys sitting side by side.
   --slate is left to nav and UI labels; the footer keeps its light-on-black. */
.lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
}
.lede--center { margin-inline: auto; text-align: center; }

/* This lede now trails the card grid instead of heading it, and the reset zeroes
   paragraph margins — without this it butts straight up against the cards. */
.cards + .lede { margin-top: clamp(var(--s-7), 6vw, var(--s-9)); }

.prose { color: var(--ink-2); max-width: 62ch; }
.prose + .prose { margin-top: var(--s-4); }
.prose--lead { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }

.chip {
  display: inline-block;
  padding: 7px 15px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .92);
  color: var(--brand-deep);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ---------------------------------------------------------------- Layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(var(--s-8), 8vw, var(--s-10)); }
/* Flight-path backdrop. Purely decorative, so it lives in the background layer
   rather than the DOM. The white gradient sits on top of the artwork to fade it
   out before the next section, and keeps contrast under the headline. */
/* Full-bleed crew photograph, with the copy sitting on a white wash over its
   left half and the form card floating clear on the right. */
.section--hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Slides up under the transparent masthead, then pays that height back as top
     padding so the copy still clears the nav. */
  margin-top: calc(-1 * var(--masthead-h));
  padding-block: calc(var(--masthead-h) + clamp(var(--s-6), 4vw, var(--s-7)))
                 clamp(var(--s-7), 6vw, var(--s-8));
  background: var(--paper);
}
.section--hero > .wrap { position: relative; }

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% center;   /* holds the crew and the sun as the frame narrows */
}

/* Phones read the photo through a flat wash — a left-to-right fade has nowhere
   to go once the copy spans the full width. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 88%, #fff 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, .90), rgba(255, 255, 255, .84) 60%, rgba(255, 255, 255, .93));
}
.section--tight { padding-block: clamp(var(--s-8), 7vw, var(--s-9)); }
.section--mist { background: var(--mist); }

.lede-head {
  display: grid;
  justify-items: center;
  text-align: center;
  margin-bottom: clamp(var(--s-6), 4vw, var(--s-8));
}
.lede-head .lede { margin-top: var(--s-5); }

/* ---------------------------------------------------------------- Buttons */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--ink);   /* amber carries dark text, not white */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn__icon { width: 18px; height: 18px; flex: none; transition: transform var(--dur) var(--ease); }

/* Black fill, white label — 18.9:1. Hover lifts the fill rather than swapping to
   amber: white on #FFBC00 is only 1.7:1, so the label has to stay on a dark bg. */
.btn--primary {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  box-shadow: 0 10px 22px -12px rgba(11, 11, 20, .55);
}
.btn--primary:hover { --btn-bg: var(--ink-2); transform: translateY(-1px); }
.btn--primary:active { --btn-bg: #000; transform: translateY(0); }

/* Amber fill, black label — 11.2:1. Reserved for the single strongest action on
   the page (the form submit), so it stays distinct from the black primaries. */
.btn--accent {
  --btn-bg: var(--brand);
  --btn-fg: var(--ink);
  box-shadow: 0 10px 22px -12px rgba(176, 126, 0, .85);
}
.btn--accent:hover { --btn-bg: var(--brand-press); transform: translateY(-1px); }
.btn--accent:active { --btn-bg: #C89200; transform: translateY(0); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--brand-soft); border-color: var(--brand-edge); --btn-fg: var(--brand-deep); }

/* Same black-and-amber pairing, but the night surface is itself near-black, so
   these need an amber edge to read as a button at all. */
.btn--invert { --btn-bg: var(--ink); --btn-fg: #fff; border-color: var(--brand); }
.btn--invert:hover { --btn-bg: var(--ink-2); transform: translateY(-1px); }
.footer .btn--primary { border-color: var(--brand); }

.btn--sm { min-height: 42px; padding: 9px 18px; font-size: 14px; }
.btn--lg { min-height: 56px; padding: 16px 30px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }

.btn:hover .btn__icon { transform: translateX(3px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:disabled .btn__icon { transform: none; }

/* Circular arrow action — the recurring device on every image frame */
.orb {
  position: absolute;
  right: var(--s-5);
  bottom: var(--s-5);
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--ink);
  box-shadow: 0 12px 28px -10px rgba(40, 28, 0, .55);
  transition: background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.orb svg { width: 24px; height: 24px; }
.orb:hover { background: var(--brand-press); transform: scale(1.07); }
.orb--sm { width: 52px; height: 52px; right: var(--s-4); bottom: var(--s-4); }
.orb--sm svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------- Masthead */
/* Transparent at rest so the hero photograph runs up behind it — .section--hero
   is pulled up by --masthead-h to put the photo there. Once the page scrolls the
   frosted panel returns, or the nav would sit on live content. */
.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-head);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* The blur lives here rather than on .masthead: left in the resting state it
   would frost the photograph the transparency is meant to reveal. */
.masthead.is-stuck,
.masthead:has(.menu-toggle[aria-expanded='true']) {   /* open mobile menu needs a base */
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--line);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--s-3) var(--gutter);
  min-height: var(--masthead-h);
}

/* Supplied wordmark art: FlightX-dark on the light masthead, FlightX-light on
   the black footer. Height-driven so the 273x74 source scales cleanly. */
.wordmark { display: inline-flex; align-items: center; }
.wordmark__img { height: 26px; width: auto; }

/* At rest the links sit on the photograph, where slate is too weak — a mid-tone
   sky puts it near 2.5:1. Ink holds up over anything the photo does. On the
   frosted panel the lighter slate is correct, so this only applies untucked. */
.masthead:not(.is-stuck) .masthead__list a,
.masthead:not(.is-stuck) .masthead__trigger { color: var(--ink); }

.masthead__nav { display: none; }
.masthead__list { display: flex; align-items: center; gap: var(--s-6); }
.masthead__list a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--slate);
  padding-block: 6px;
  transition: color var(--dur) var(--ease);
}
.masthead__list a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: var(--brand-edge);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.masthead__list a:hover { color: var(--ink); }
.masthead__list a:hover::after { transform: scaleX(1); }

/* ------------------------------------------------------ Products dropdown */
.masthead__list .has-menu { position: relative; }

/* Matches .masthead__list a exactly — the trigger reads as a nav link that
   happens to open a panel, not as a button dropped into the row. */
.masthead__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--slate);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.masthead__trigger:hover,
.masthead__trigger[aria-expanded='true'] { color: var(--ink); }

.masthead__caret {
  width: 15px; height: 15px;
  transition: transform var(--dur) var(--ease);
}
[aria-expanded='true'] > .masthead__caret { transform: rotate(180deg); }

/* Transparent top border, background clipped to the padding box: the panel
   floats 10px clear of the trigger with no dead gap for the pointer to fall
   through on the way down. */
.submenu {
  position: absolute;
  top: 100%;
  left: -12px;
  min-width: 214px;
  padding: var(--s-1);
  border: 1px solid var(--line);
  border-top: 10px solid transparent;
  border-radius: var(--radius);
  background: var(--paper);
  background-clip: padding-box;
  box-shadow: var(--shadow-2);
}
.submenu[hidden] { display: none; }
.submenu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.submenu a::after { content: none; }   /* no sliding underline in the panel */
.submenu a:hover { background: var(--brand-soft); color: var(--brand-deep); }
.submenu__note {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
}

/* Mobile: the same submenu, inline and indented instead of floating */
.mobile-nav__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 12px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.mobile-nav__trigger:hover { background: var(--mist); }
.mobile-nav__sub {
  display: grid;
  gap: 2px;
  margin: 2px 0 var(--s-2);
  padding-left: var(--s-3);
  border-left: 2px solid var(--brand);
}
.mobile-nav__sub[hidden] { display: none; }
.mobile-nav__sub a { font-size: 15px; padding: 10px 12px; }

.masthead__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.masthead__actions .btn--primary { display: none; }

.menu-toggle {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.menu-toggle:hover { border-color: var(--brand-edge); background: var(--brand-soft); }
.menu-toggle__bars { display: grid; gap: 5px; width: 18px; }
.menu-toggle__bars span {
  height: 1.5px; background: var(--ink);
  transition: transform var(--dur) var(--ease);
}
.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-nav {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: var(--s-4) var(--gutter) var(--s-5);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__list { display: grid; gap: 2px; margin-bottom: var(--s-4); }
.mobile-nav__list a {
  display: block;
  padding: 13px 12px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mobile-nav__list a:hover { background: var(--mist); color: var(--brand-deep); }

/* ------------------------------------------------------------------- Hero */
.hero { display: grid; gap: clamp(var(--s-6), 5vw, var(--s-8)); align-items: start; }
/* Narrower than the default 56ch so the copy stays inside the washed band and
   never runs out over the exposed photograph */
.hero__copy .lede { margin-top: var(--s-5); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* A transparent outline would dissolve into the photograph behind it */
.section--hero .btn--ghost { --btn-bg: #fff; }
.section--hero .btn--ghost:hover { --btn-bg: var(--brand-soft); }

.checks { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.checks li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: var(--s-3);
  font-size: 15.5px;
  color: var(--ink-2);
}
.checks__tick {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 1px solid var(--brand);
  border-radius: 2px;
  background: var(--brand);
  color: var(--ink);
  margin-top: 1px;
}
.checks__tick svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------------- Form */
.form {
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-3);
}
.form__head { margin-bottom: var(--s-3); }
.form__title {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.02em;
}
.form__sub {  font-size: 1.0625rem; color: var(--ink-2); }

.req { color: var(--brand-deep); }

/* Only pairs and top-level fields carry the gap — fields nested in a pair are
   spaced by the pair's own grid gap instead. */
.form__pair { display: grid; gap: var(--s-4); margin-bottom: var(--s-3); }
.form > .field { margin-bottom: var(--s-4); }
.field { display: grid; gap: 7px; }

.field__label { font-size: 14px; font-weight: 600; }

.input {
  width: 100%;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;              /* 16px keeps iOS from zooming on focus */
  line-height: 1.5;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:hover { border-color: #B9B5CE; }
.input:focus {
  outline: none;
  border-color: var(--brand-edge);
  box-shadow: 0 0 0 3px rgba(255, 188, 0, .32);
}
.input:focus-visible { outline: none; }
.input[aria-invalid='true'] { border-color: var(--danger); }
.input[aria-invalid='true']:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .15); }

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5870' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 18px 18px;
  cursor: pointer;
}
.textarea { min-height: 64px; resize: vertical; }

.form__foot { margin-top: var(--s-5); }
.form__note {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .04em;
  color: var(--ink-2);
  text-align: center;
}

/* ------------------------------------------------------- Image frames */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--mist);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* No bottom padding — the following section's top padding is the whole gap */
.band { padding-bottom: 0; }
/* Taller on small screens so the overlaid caption has room to breathe */
.frame--band { aspect-ratio: 4 / 3; }
.frame--tall { aspect-ratio: 4 / 5; }

.frame__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  padding-right: clamp(96px, 12vw, 150px);
  background: linear-gradient(to top, rgba(10, 6, 28, .82), rgba(10, 6, 28, .30) 55%, transparent);
}
.frame__title {
  margin-top: var(--s-4);
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  letter-spacing: -.02em;
  line-height: 1.1;
  color: #fff;
}
.frame__tag {
  position: absolute;
  top: var(--s-5); left: var(--s-5);
  padding: 7px 14px;
  border-radius: var(--radius);
  background: rgba(10, 6, 28, .72);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}

/* -------------------------------------------------------------- Statement */
/* Measured in px, not ch — ch resolves against this element's 17px body size,
   not the quote's display size, and lands far too narrow. */
.statement { max-width: 1080px; margin-inline: auto; text-align: center; }
.statement__quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 5.2vw, 4.25rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  color: var(--ink);
  text-wrap: balance;
}

/* Reading highlight: words ink in as the quote scrolls through the viewport.
   The unlit tone still clears 3:1 against paper, and this text is always
   large-scale, so the dim state stays readable on its own. */
.statement__quote .w {
  color: #8B87A3;
  transition: color 260ms var(--ease);
}
.statement__quote .w.is-lit { color: var(--ink); }
.statement__by {
  max-width: 56ch;
  margin: var(--s-6) auto 0;
  color: var(--ink-2);
  font-size: 1.0625rem;   /* one paragraph size across the page — 17px */
}

/* ------------------------------------------------------------------ Cards */
.cards { display: grid; gap: clamp(var(--s-5), 3vw, var(--s-6)); }

/* Grey-bordered boxes. Padding comes with the border — without it the rule
   would sit tight against the text. White fill lifts them off the mist. */
.card {
  padding: clamp(var(--s-5), 3vw, var(--s-6));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
}
.card .frame { aspect-ratio: 5 / 4; margin-bottom: var(--s-5); }

/* Inverted against the hero ticks: black tile, amber glyph — 11.2:1 either way */
.card__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--s-5);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--brand);
}
.card__icon svg { width: 22px; height: 22px; }
.card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3125rem;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: var(--s-3);
}
.card__text { color: var(--ink-2); font-size: 1.0625rem; }

/* --------------------------------------------------------------- Flagship */
.flagship { display: grid; gap: clamp(var(--s-6), 5vw, var(--s-8)); align-items: center; }
.flagship__copy .prose { margin-top: var(--s-5); }

/* --------------------------------------------------------------- Products */
.products { display: grid; gap: var(--s-4); }
.product {
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.product:hover { border-color: var(--brand-edge); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.product__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--s-5);
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.product__icon svg { width: 22px; height: 22px; }
.product__name {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 700;
  letter-spacing: -.02em;
}
.product__role {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-deep);
  margin: 5px 0 var(--s-3);
}
.product__text { font-size: 1.0625rem; color: var(--ink-2); }

/* ----------------------------------------------------------------- Footer */
.footer {
  position: relative;
  margin-top: clamp(var(--s-7), 6vw, var(--s-9));
  padding-top: clamp(var(--s-8), 7vw, var(--s-9));
  background: var(--night);
  color: #fff;
  overflow: hidden;
}

.closing {
  display: grid;
  justify-items: center;
  text-align: center;
  padding-bottom: clamp(var(--s-8), 7vw, var(--s-9));
  border-bottom: 1px solid var(--night-line);
}
.closing__title { max-width: 20ch; }
.closing__text {
  margin: var(--s-5) 0 var(--s-6);
  max-width: 58ch;
  color: var(--invert-2);
}

.footer__nav {
  display: grid;
  gap: var(--s-6);
  padding-block: clamp(var(--s-6), 4vw, var(--s-8));
}
.footer__heading {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-lift);
  margin-bottom: var(--s-4);
}
/* The light wordmark art — white lettering, so it belongs on the black footer */
.footer__logo { width: auto; height: 30px; margin-bottom: var(--s-4); }
.footer__blurb { max-width: 30ch; font-size: 15px; color: var(--invert-2); }

.footer__col ul { display: grid; gap: 11px; }
.footer__col a {
  font-size: 15px;
  color: var(--invert-2);
  transition: color var(--dur) var(--ease);
}
.footer__col a:hover { color: #fff; }
/* .footer__col a paints links --invert-2, which would bleach the CTA label —
   these need to outrank it, hover included. */
.footer__col a.footer__cta,
.footer__col a.footer__cta:hover { margin-top: var(--s-5); color: #fff; }

.footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: 1px solid var(--night-line);
  font-size: 14px;
  color: var(--invert-2);
}
.footer__legal { display: flex; gap: var(--s-5); }
.footer__legal a { transition: color var(--dur) var(--ease); }
.footer__legal a:hover { color: #fff; }

/* Oversized closing wordmark. Clamped so seven caps never exceed the gutter. */
.megamark {
  margin: 0;
  padding-inline: var(--gutter);
  font-family: var(--font-display);
  font-weight: 800;
  padding-bottom: clamp(var(--s-4), 2vw, var(--s-6));
  font-size: clamp(3rem, 15.5vw, 12rem);
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, .13);
  user-select: none;
}

/* ------------------------------------------------------------ Scroll reveal */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------- Breakpoints */
@media (min-width: 600px) {
  :root { --gutter: var(--s-6); }
  .form { padding: var(--s-5); }
  .form__pair { grid-template-columns: 1fr 1fr; }
  .products { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  .footer__nav { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 700px) {
  .frame--band { aspect-ratio: 16 / 9; }
}

@media (min-width: 860px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 940px) {
  :root { --gutter: var(--s-7); }
  /* Three tracks with equal 1fr sides, so the nav is centred against the header
     itself rather than against the leftover space — the wordmark and the CTA are
     different widths, and `margin-inline: auto` in flex would sit it off-centre. */
  .masthead__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .wordmark { justify-self: start; }
  .masthead__nav { display: block; margin-left: 0; }
  .masthead__actions { margin-left: 0; justify-self: end; }
  .masthead__actions .btn--primary { display: inline-flex; }
  .menu-toggle { display: none; }
  .mobile-nav { display: none !important; }

  /* Two-column hero: wash the left half so the black headline reads, and let
     the photograph come through clean under the form card on the right. */
  /* Capped: uncapped vh turns into a 2000px hero on a tall portrait monitor.
     This is what sets the hero's height — the content is centred inside it, so
     trimming padding alone would change nothing until it exceeds this. */
  .section--hero { min-height: min(76vh, 720px); display: flex; align-items: center; }
  .section--hero > .wrap { width: 100%; }
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 30%),
      linear-gradient(to right,
        #fff 0%,
        rgba(255, 255, 255, .93) 20%,
        rgba(255, 255, 255, .62) 36%,
        rgba(255, 255, 255, .18) 50%,
        rgba(255, 255, 255, 0) 62%);
  }

  /* The copy column is narrower than the full width the base size assumes */
  .display--xl { font-size: min(4.6vw, 3.55rem); }

  .hero { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; }
  .flagship { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .footer__nav { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s-7); }
}

/* --------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .statement__quote .w { color: var(--ink); }
  .btn:hover, .product:hover, .orb:hover { transform: none; }
}

/* ------------------------------------------------------------------ Print */
@media print {
  .masthead, .skip-link, .mobile-nav, .orb, .megamark { display: none !important; }
  body { color: #000; background: #fff; }
  .section { padding-block: 24pt; }
  .footer { background: #fff; color: #000; }
  .closing__text, .footer__col a, .footer__base { color: #000; }
}