/* ==========================================================================
   Bravo Delta Studios
   Aviation Commercial Strategy & Growth Systems
   Design system and site styles. No framework, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* --- Sky & Sand palette --------------------------------------------------
  Deep Blue   #0F2438    Sky Blue   #8FBDDC    Harbour  #205070
  Warm Sand   #DCC9AC    Clay       #B08C6A    Soft Ivory #F7F3EC
  Accent moved from champagne gold to sky blue; sand and clay carry the warmth.
  The --brass* token names are kept because 149 rules reference them; they now
  hold the sky-blue accent. Renaming them across the file was the riskier edit.
  ------------------------------------------------------------------------ */
  /* Air */
  --ivory:        #F7F3EC;
  --paper:        #EFE8DC;
  --limestone:    #E4DACB;
  --sky-pale:     #DDE8F1;
  --sky:          #8FB3CE;
  /* Earth */
  --sand:         #DCC9AC;
  --sand-deep:    #C4AC89;
  --clay:         #B08C6A;
  --taupe:        #A2937C;
  --stone:        #55636F;
  --warm-gray:    #5A6671;
  /* Ink */
  --ink:          #14202B;
  --ink-soft:     #2F404F;
  --ink-mute:     #56646F;
  /* Authority */
  --navy:         #0F2438;
  --navy-deep:    #091826;
  --petrol:       #1C4A60;
  --navy-line:    #1C3A55;
  --slate:        #58718A;
  --slate-light:  #7E95AC;
  /* Accent (sky blue) */
  --brass:        #205070;
  --brass-light:  #8FBDDC;
  --brass-pale:   #DCE9F2;
  /* Roles */
  --bg:           var(--ivory);
  --fg:           var(--ink);
  --rule:         rgba(20,32,43,.15);
  --rule-soft:    rgba(20,32,43,.085);
  --rule-brass:   rgba(143,189,220,.55);
  /* Type */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Measure */
  --shell:  1380px;
  --gutter: clamp(1.25rem, 4.2vw, 4.5rem);
  --section-y: clamp(5rem, 11vh, 9.5rem);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

/* The hidden attribute must win over any author display rule. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }

::selection { background: var(--brass-pale); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--ivory);
  padding: .85rem 1.4rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vh, 6rem); }
.section--rule { border-top: 1px solid var(--rule-soft); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
}

/* Section header: number, eyebrow, rule */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.25rem);
}
.sec-index {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--rule-brass);
}
.sec-index__num {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(.8rem, .95vw, .9rem);
  letter-spacing: .2em;
  color: var(--brass);
}
.sec-index__label {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(.8rem, .95vw, .9rem);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(.78rem, .92vw, .88rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow--brass { color: var(--brass); }

.display {
  font-family: var(--serif);
  font-weight: 550;
  font-size: clamp(2.55rem, 6.1vw, 5.1rem);
  line-height: .99;
  letter-spacing: -.021em;
  font-optical-sizing: auto;
}
.display--sm { font-size: clamp(2.1rem, 4.3vw, 3.5rem); line-height: 1.04; }
.display em { font-style: italic; }

.h2 {
  font-family: var(--serif);
  font-weight: 550;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.05;
  letter-spacing: -.018em;
}
.h3 {
  font-family: var(--serif);
  font-weight: 550;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.16;
  letter-spacing: -.012em;
}
.h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: -.006em;
}

.lede {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
  font-weight: 450;
}
.body { color: var(--ink-soft); font-weight: 400; }
.body--sm { font-size: .95rem; line-height: 1.66; }
.measure { max-width: 62ch; }
.measure-tight { max-width: 44ch; }

.mono-note {
  font-family: var(--mono);
  font-weight: 450;
  font-size: .74rem;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--stone);
}

.tag {
  font-family: var(--mono);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
}

/* --------------------------------------------------------------------------
   5. Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.02rem 1.6rem;
  border: 1px solid transparent;
  position: relative;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.btn__arrow {
  width: 22px; height: 1px; background: currentColor; position: relative;
  transition: width .5s var(--ease-out);
  flex: 0 0 auto;
}
.btn__arrow::after {
  content: ""; position: absolute; right: 0; top: -2.5px;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .btn__arrow { width: 34px; }

.btn--primary { background: var(--navy); color: var(--ivory); }
.btn--primary:hover { background: var(--navy-deep); }

.btn--ghost { color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass); }

.btn--light { color: var(--ivory); border-color: rgba(244,240,232,.28); }
.btn--light:hover { border-color: var(--brass-light); color: var(--brass-light); }

.btn--solid-light { background: var(--ivory); color: var(--navy); }
.btn--solid-light:hover { background: var(--brass-pale); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

.link-under {
  text-decoration: none;
  font-family: var(--mono);
  font-size: .73rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--rule-brass);
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.link-under:hover { border-color: var(--brass); color: var(--brass); }

/* --------------------------------------------------------------------------
   6. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(244,240,232,0);
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
}
.masthead.is-stuck {
  background: rgba(244,240,232,.93);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--rule-soft);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 84px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  flex: 0 0 auto;
}
.wordmark__mark { width: 40px; height: 40px; flex: 0 0 auto; color: var(--navy); }
.wordmark__type { display: grid; gap: .2rem; }
.wordmark__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--navy);
}
.wordmark__sub {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .585rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1;
  padding-left: .1em;
}
.wordmark:hover .wordmark__mark { color: var(--brass); transition: color .45s var(--ease); }
.close__mark { width: 62px; height: 62px; color: var(--ivory); }
.footer .wordmark__mark { width: 38px; height: 38px; }
.drawer .wordmark__mark, .masthead .wordmark__mark { color: var(--navy); }

.nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.6rem); }
.nav__link {
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .015em;
  text-decoration: none;
  color: var(--ink-soft);
  position: relative;
  padding-block: .35rem;
  transition: color .35s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--brass);
  transition: width .45s var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { width: 100%; }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { width: 100%; background: var(--rule-brass); }

.masthead__cta { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.masthead .btn { padding: .78rem 1.15rem; font-size: .69rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  margin-right: -10px;
}
.nav-toggle__bars { display: grid; gap: 6px; width: 22px; }
.nav-toggle__bars span {
  display: block; height: 1px; background: var(--ink);
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--ivory);
  padding: 110px var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-101%);
  transition: transform .72s var(--ease-out);
  overflow-y: auto;
}
.drawer.is-open { transform: translateY(0); }
.drawer__nav { display: grid; gap: .1rem; }
.drawer__link {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 2.1rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--rule-soft);
  padding-block: .5rem;
}
.drawer__link .tag { font-size: .6rem; }
.drawer__foot { display: grid; gap: 1.5rem; padding-top: 2.5rem; }

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; padding-top: clamp(3rem, 6vh, 5.5rem); padding-bottom: clamp(3rem, 7vh, 6rem); overflow: hidden; }




.hero__eyebrow {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: clamp(1.8rem, 3.5vw, 3rem);
}
.hero__eyebrow::after {
  content: ""; height: 2px; flex: 1; background: var(--rule-brass); max-width: 260px;
}

.hero__title { margin-bottom: 1.9rem; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.hero__title .accent { color: var(--brass); font-style: italic; }

.hero__lede { margin-bottom: 2.4rem; max-width: 52ch; }

.hero__meta {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 2px solid var(--rule-brass);
  display: flex; flex-wrap: wrap; gap: .55rem;
}
.hero__meta span {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(.72rem, .86vw, .8rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  padding: .55rem .8rem;
  display: inline-flex; align-items: center; gap: .55rem;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.hero__meta span::before {
  content: ""; width: 5px; height: 5px; transform: rotate(45deg);
  background: var(--brass-light); flex: 0 0 auto;
}
.hero__meta span:hover { border-color: var(--brass); color: var(--ink); }

/* Material panel: limestone card with technical drawing */
.panel {
  background: linear-gradient(163deg, var(--paper) 0%, var(--limestone) 62%, var(--sand) 100%);
  border: 1px solid var(--rule-brass);
  padding: 1.55rem 1.55rem 1.35rem;
  position: relative;
}
.panel::before {
  content: "";
  position: absolute; inset: 8px;
  border: 1px solid rgba(143,189,220,.16);
  pointer-events: none;
}
.panel__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: 1.15rem;
}
.panel__figure { position: relative; }
.panel__foot {
  margin-top: 1.3rem; padding-top: 1rem;
  border-top: 1px solid rgba(143,189,220,.28);
  display: grid; gap: .45rem;
}

/* --------------------------------------------------------------------------
   8. Marquee strip
   -------------------------------------------------------------------------- */

.strip {
  border-block: 1px solid var(--rule-soft);
  background: var(--paper);
  overflow: hidden;
  padding-block: 1.35rem;
}
.strip__track {
  display: flex; align-items: center; gap: 3.2rem;
  width: max-content;
  animation: drift 62s linear infinite;
}
.strip__item {
  font-family: var(--mono); font-weight: 600; font-size: .82rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-mute); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3.2rem;
}
.strip__item::after {
  content: ""; width: 4px; height: 4px; transform: rotate(45deg);
  border: 1px solid var(--brass); display: inline-block;
}
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .strip__track { animation: none; }
}

/* --------------------------------------------------------------------------
   9. The Disconnect
   -------------------------------------------------------------------------- */

.disconnect { background: var(--paper); }
.disconnect__grid { row-gap: 2.5rem; align-items: start; }
.disconnect__intro { grid-column: 1 / span 5; }
.disconnect__cols { grid-column: 7 / span 6; display: grid; gap: 0; }

.ledger { border-top: 1px solid var(--rule); }
.ledger__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-block: 1.1rem .95rem;
}
.ledger__title { font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; }
.ledger--actual .ledger__title { color: var(--navy); }
.ledger--seen .ledger__title { color: var(--brass); }
.ledger__list { display: grid; }
.ledger__item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-block: .72rem;
  border-top: 1px solid var(--rule-soft);
  font-size: .95rem;
  color: var(--ink-soft);
  font-weight: 400;
}
.ledger__item i {
  font-family: var(--mono); font-style: normal; font-size: .64rem;
  letter-spacing: .1em; color: var(--taupe);
}
.ledger--seen .ledger__item { color: var(--stone); }

.disconnect__gap {
  grid-column: 1 / span 5;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--rule-brass);
  padding-top: 1.6rem;
}

/* --------------------------------------------------------------------------
   10. Inside aviation
   -------------------------------------------------------------------------- */

.inside { background: var(--navy); color: var(--ivory); position: relative; overflow: hidden; }
.inside::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(200deg, var(--petrol) 0%, rgba(16,34,53,0) 58%),
    radial-gradient(80% 70% at 12% 100%, rgba(143,189,220,.16), transparent 60%);
  pointer-events: none;
}
.inside .shell { position: relative; z-index: 1; }
.inside .sec-index { border-bottom-color: rgba(143,189,220,.34); }
.inside .sec-index__label { color: rgba(238,234,225,.85); }
.inside .lede, .inside .body { color: rgba(238,234,225,.8); }
.inside .h2 { color: var(--ivory); }

.inside__grid { row-gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.inside__lead { grid-column: 1 / span 6; }
.inside__list { grid-column: 8 / span 5; }

.knows { display: grid; }
.knows__item {
  padding-block: 1.15rem;
  border-top: 1px solid rgba(223,231,238,.16);
  display: grid; grid-template-columns: 34px 1fr; gap: 1.1rem;
  align-items: start;
}
.knows__item:last-child { border-bottom: 1px solid rgba(223,231,238,.16); }
.knows__n { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; color: var(--brass-light); padding-top: .28rem; }
.knows__t { font-size: .97rem; color: var(--ivory); font-weight: 400; margin-bottom: .3rem; }
.knows__d { font-size: .875rem; line-height: 1.6; color: rgba(238,234,225,.66); font-weight: 400; }

.creed { display: grid; gap: 0; margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.creed__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: 1.05rem;
  border-top: 1px solid rgba(223,231,238,.14);
  align-items: baseline;
}
.creed__row:last-child { border-bottom: 1px solid rgba(223,231,238,.14); }
.creed__a { font-family: var(--mono); font-size: .705rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(223,231,238,.5); }
.creed__b { font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.32rem); line-height: 1.3; color: var(--ivory); }
.creed__b em { color: var(--brass-light); font-style: italic; }

/* --------------------------------------------------------------------------
   11. Commercial Flight Path
   -------------------------------------------------------------------------- */

.cfp { background: var(--ivory); }
.cfp__head { display: grid; gap: 1.4rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.path { position: relative; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }

.path__track {
  position: absolute;
  top: 10px;
  left: 11px;
  width: 87.5%;
  height: 1px;
}
.path__base { position: absolute; inset: 0; background: var(--rule); }
.path__live {
  position: absolute; left: 0; top: 0; height: 1px;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--brass-light), var(--brass));
  transition: width .85s var(--ease-out);
}
.path__tick {
  position: absolute; top: -3px; width: 1px; height: 7px;
  background: var(--rule); opacity: .8;
}

.path__stages {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0;
  margin-top: -11px;
}
.stage {
  display: grid;
  justify-items: start;
  gap: .85rem;
  padding: 0 .5rem 0 0;
  text-align: left;
  position: relative;
}
.stage__dot {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  position: relative;
}
.stage__dot::before {
  content: ""; width: 7px; height: 7px;
  background: var(--ivory);
  border: 1px solid var(--taupe);
  transform: rotate(45deg);
  transition: background-color .45s var(--ease), border-color .45s var(--ease), transform .55s var(--ease-out);
}
.stage__dot::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid transparent; border-radius: 50%;
  transition: border-color .45s var(--ease), transform .6s var(--ease-out);
  transform: scale(.55);
}
.stage__num { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; color: var(--taupe); transition: color .35s var(--ease); }
.stage__name {
  font-family: var(--sans); font-size: .795rem; font-weight: 450;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute);
  transition: color .35s var(--ease);
  line-height: 1.25;
}
.stage:hover .stage__dot::before { border-color: var(--brass); }
.stage:hover .stage__name { color: var(--ink); }
.stage[aria-selected="true"] .stage__dot::before { background: var(--brass); border-color: var(--brass); transform: rotate(45deg) scale(1.18); }
.stage[aria-selected="true"] .stage__dot::after { border-color: var(--rule-brass); transform: scale(1); }
.stage[aria-selected="true"] .stage__name { color: var(--ink); }
.stage[aria-selected="true"] .stage__num { color: var(--brass); }

.readout {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-top: 1px solid var(--rule-brass);
  padding: clamp(1.75rem, 3.5vw, 3rem);
}
.readout__grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr) minmax(0,1fr); gap: clamp(1.5rem, 3vw, 3.25rem); }
.readout__title { margin-bottom: .9rem; }
.readout__stage-name { font-family: var(--serif); font-weight: 550; font-size: clamp(1.85rem, 3vw, 2.6rem); line-height: 1.03; letter-spacing: -.015em; }
.readout__block { display: grid; gap: .8rem; align-content: start; }
.readout__label {
  font-family: var(--mono); font-size: .655rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass);
  padding-bottom: .7rem; border-bottom: 1px solid var(--rule-brass);
}
.readout__list { display: grid; gap: .55rem; }
.readout__list li {
  display: grid; grid-template-columns: 12px 1fr; gap: .7rem;
  font-size: .905rem; line-height: 1.55; color: var(--ink-soft); font-weight: 400;
}
.readout__list li::before { content: ""; width: 4px; height: 4px; border: 1px solid var(--taupe); transform: rotate(45deg); margin-top: .55rem; }
.readout__consequence {
  font-family: var(--serif); font-size: clamp(1.1rem, 1.7vw, 1.42rem);
  line-height: 1.32; color: var(--navy);
}
.readout__examines { font-size: .905rem; line-height: 1.6; color: var(--ink-soft); font-weight: 400; }
.is-swapping { opacity: 0; transform: translateY(6px); }
.readout__grid > * { transition: opacity .4s var(--ease), transform .4s var(--ease-out); }

/* --------------------------------------------------------------------------
   12. Not a marketing agency
   -------------------------------------------------------------------------- */

.cannot { display: grid; gap: 0; }
.cannot__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
  align-items: center;
  gap: clamp(.75rem, 2vw, 2rem);
  padding-block: clamp(1.05rem, 2vw, 1.5rem);
  border-top: 1px solid var(--rule-soft);
}
.cannot__row:last-child { border-bottom: 1px solid var(--rule-soft); }
.cannot__a { font-family: var(--serif); font-size: clamp(1.15rem, 2.1vw, 1.72rem); line-height: 1.2; }
.cannot__x { display: grid; place-items: center; }
.cannot__x svg { width: 20px; height: 20px; color: var(--brass); opacity: .75; }
.cannot__b { font-family: var(--sans); font-size: .95rem; color: var(--stone); font-weight: 400; }

.quadrant {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  border: 1px solid var(--rule-soft);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.quadrant__cell {
  padding: clamp(1.5rem, 2.6vw, 2.4rem) clamp(1.25rem, 2vw, 1.8rem);
  border-right: 1px solid var(--rule-soft);
  display: grid; gap: .8rem; align-content: start;
  transition: background-color .5s var(--ease);
}
.quadrant__cell:last-child { border-right: 0; }
.quadrant__cell:hover { background: var(--paper); }
.quadrant__num { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; color: var(--brass); }
.quadrant__name { font-family: var(--serif); font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.1; }
.quadrant__d { font-size: .87rem; line-height: 1.58; color: var(--stone); font-weight: 400; }

/* --------------------------------------------------------------------------
   13. Systems
   -------------------------------------------------------------------------- */

.systems { background: var(--paper); }
.systems__grid { row-gap: 2.5rem; align-items: start; }
.systems__nav { grid-column: 1 / span 5; }
.systems__body { grid-column: 7 / span 6; position: sticky; top: 120px; }

.syslist { display: grid; border-top: 1px solid var(--rule); }
.sysbtn {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding-block: clamp(1rem, 1.9vw, 1.45rem);
  border-bottom: 1px solid var(--rule-soft);
  transition: color .4s var(--ease);
}
.sysbtn__n { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; color: var(--taupe); transition: color .4s var(--ease); }
.sysbtn__name {
  font-family: var(--serif); font-weight: 550; font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.05; letter-spacing: -.012em; color: var(--ink-mute);
  transition: color .45s var(--ease), transform .55s var(--ease-out);
}
.sysbtn__mark { width: 9px; height: 9px; border: 1px solid var(--taupe); transform: rotate(45deg); transition: background-color .4s var(--ease), border-color .4s var(--ease); }
.sysbtn:hover .sysbtn__name { color: var(--ink); transform: translateX(5px); }
.sysbtn[aria-selected="true"] .sysbtn__name { color: var(--ink); }
.sysbtn[aria-selected="true"] .sysbtn__n { color: var(--brass); }
.sysbtn[aria-selected="true"] .sysbtn__mark { background: var(--brass); border-color: var(--brass); }

.syspanel { display: none; }
.syspanel.is-active { display: grid; gap: 1.4rem; }
.syspanel__kicker { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.syspanel__items { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 clamp(1rem,2.4vw,2.25rem); margin-top: .4rem; }
.syspanel__items li {
  padding-block: .68rem;
  border-top: 1px solid var(--rule-soft);
  font-size: .9rem; color: var(--ink-soft); font-weight: 400;
  display: grid; grid-template-columns: 14px 1fr; gap: .6rem; align-items: baseline;
}
.syspanel__items li::before { content: ""; width: 5px; height: 1px; background: var(--brass); }
.syspanel__feeds {
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--rule-brass);
  font-family: var(--mono); font-size: .7rem; line-height: 1.75;
  letter-spacing: .04em; color: var(--stone);
}
.syspanel__feeds b { color: var(--brass); font-weight: 400; }

/* --------------------------------------------------------------------------
   14. Buying paths
   -------------------------------------------------------------------------- */

.paths__tabs {
  display: flex; flex-wrap: wrap; gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.pathtab {
  font-family: var(--mono); font-size: .705rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--stone);
  padding: .85rem 1.2rem .95rem;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: color .35s var(--ease), border-color .35s var(--ease);
  white-space: nowrap;
}
.pathtab:first-child { padding-left: 0; }
.pathtab:hover { color: var(--ink); }
.pathtab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brass); }

.pathpanel { display: none; }
.pathpanel.is-active { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }

.chain { display: grid; gap: 0; }
.chain__node {
  display: grid; grid-template-columns: 40px 1fr; gap: 1.2rem;
  align-items: baseline; padding-block: 1.05rem;
  border-top: 1px solid var(--rule-soft);
  position: relative;
}
.chain__node:last-child { border-bottom: 1px solid var(--rule-soft); }
.chain__n { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; color: var(--brass); }
.chain__label { font-family: var(--serif); font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.12; }
.chain__note { font-size: .87rem; color: var(--stone); font-weight: 400; margin-top: .3rem; line-height: 1.55; }

.pathpanel__aside { display: grid; gap: 1.5rem; align-content: start; }
.aside-card {
  background: var(--paper); border: 1px solid var(--rule-soft);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: grid; gap: .85rem;
}
.aside-card__label { font-family: var(--mono); font-size: .655rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }

/* --------------------------------------------------------------------------
   15. Revenue leak
   -------------------------------------------------------------------------- */

.leak { background: var(--navy); color: var(--ivory); }
.leak .sec-index { border-bottom-color: rgba(143,189,220,.34); }
.leak .sec-index__label { color: rgba(238,234,225,.85); }
.leak .h2, .leak .display--sm { color: var(--ivory); }
.leak .lede { color: rgba(238,234,225,.78); }

.leak__grid { row-gap: 2.5rem; align-items: start; }
.leak__list { grid-column: 1 / span 5; }
.leak__panel { grid-column: 7 / span 6; }

.leaklist { display: grid; border-top: 1px solid rgba(223,231,238,.18); }
.leakbtn {
  display: grid; grid-template-columns: 38px 1fr 18px;
  align-items: center; gap: .9rem;
  width: 100%; text-align: left;
  padding-block: .95rem;
  border-bottom: 1px solid rgba(223,231,238,.13);
  color: rgba(238,234,225,.72);
  transition: color .4s var(--ease);
}
.leakbtn__n { font-family: var(--mono); font-size: .63rem; letter-spacing: .12em; color: rgba(143,189,220,.7); }
.leakbtn__t { font-family: var(--sans); font-size: .95rem; font-weight: 400; letter-spacing: .005em; transition: transform .5s var(--ease-out); }
.leakbtn__c { width: 7px; height: 7px; border: 1px solid rgba(143,189,220,.55); transform: rotate(45deg); transition: background-color .4s var(--ease); }
.leakbtn:hover { color: var(--ivory); }
.leakbtn:hover .leakbtn__t { transform: translateX(4px); }
.leakbtn[aria-selected="true"] { color: var(--ivory); }
.leakbtn[aria-selected="true"] .leakbtn__c { background: var(--brass-light); border-color: var(--brass-light); }
.leakbtn[aria-selected="true"] .leakbtn__n { color: var(--brass-light); }

.leakpanel {
  border: 1px solid rgba(223,231,238,.18);
  border-top: 1px solid rgba(143,189,220,.5);
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  background: rgba(255,255,255,.028);
  display: grid; gap: 1.75rem;
}
.leakpanel__title { font-family: var(--serif); font-weight: 550; font-size: clamp(1.7rem, 2.8vw, 2.35rem); line-height: 1.05; color: var(--ivory); }
.leakpanel__block { display: grid; gap: .7rem; }
.leakpanel__label {
  font-family: var(--mono); font-size: .645rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-light); padding-bottom: .6rem; border-bottom: 1px solid rgba(143,189,220,.28);
}
.leakpanel__text { font-size: .93rem; line-height: 1.62; color: rgba(238,234,225,.78); font-weight: 400; }
.leakpanel__cons { font-family: var(--serif); font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.3; color: var(--sky); }

/* --------------------------------------------------------------------------
   16. Method
   -------------------------------------------------------------------------- */

.method { display: grid; }
.method__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.6rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule-soft);
  align-items: start;
}
.method__row:last-child { border-bottom: 1px solid var(--rule-soft); }
.method__n { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; color: var(--brass); padding-top: .5rem; }
.method__name { font-family: var(--serif); font-weight: 550; font-size: clamp(1.65rem, 2.8vw, 2.35rem); line-height: 1.04; letter-spacing: -.014em; }
.method__body { display: grid; gap: 1rem; }
.method__d { font-size: .95rem; line-height: 1.62; color: var(--ink-soft); font-weight: 400; max-width: 58ch; }
.method__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.method__chips span {
  font-family: var(--mono); font-size: .645rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--stone); border: 1px solid var(--rule); padding: .38rem .6rem;
}

.pull {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding: clamp(1.75rem, 3.5vw, 3rem) 0;
  border-top: 1px solid var(--rule-brass);
  border-bottom: 1px solid var(--rule-brass);
}
.pull__q { font-family: var(--serif); font-weight: 550; font-size: clamp(1.6rem, 3.4vw, 2.85rem); line-height: 1.1; letter-spacing: -.015em; max-width: 22ch; }
.pull__q em { font-style: italic; color: var(--brass); }

/* --------------------------------------------------------------------------
   17. Review CTA
   -------------------------------------------------------------------------- */

.review { background: var(--paper); }
.review__grid { row-gap: 2.5rem; align-items: end; }
.review__copy { grid-column: 1 / span 6; }
.review__list { grid-column: 8 / span 5; }
.review__items { display: grid; border-top: 1px solid var(--rule-brass); }
.review__items li {
  display: grid; grid-template-columns: 32px 1fr; gap: 1rem;
  padding-block: .85rem; border-bottom: 1px solid var(--rule-soft);
  font-size: .93rem; color: var(--ink-soft); font-weight: 400;
}
.review__items i { font-family: var(--mono); font-style: normal; font-size: .63rem; color: var(--brass); letter-spacing: .1em; }

/* --------------------------------------------------------------------------
   18. Brand close
   -------------------------------------------------------------------------- */

.close {
  background: var(--navy-deep); color: var(--ivory);
  position: relative; overflow: hidden;
  padding-block: clamp(6rem, 15vh, 12rem);
}
.close::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--petrol) 0%, rgba(16,34,53,0) 62%);
  pointer-events: none;
}
.close .shell { position: relative; z-index: 1; }
.close__mark { width: 84px; height: 84px; color: var(--ivory); margin-bottom: 2.5rem; }
.close__line {
  font-family: var(--serif);
  font-weight: 550;
  font-size: clamp(2.5rem, 7.2vw, 6rem);
  line-height: 1; letter-spacing: -.024em;
  color: var(--ivory);
}
.close__line em { font-style: italic; color: var(--brass-light); }
.close__rule { height: 1px; background: rgba(143,189,220,.4); margin-block: clamp(2.5rem, 5vw, 4rem); }
.close__foot { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; align-items: baseline; }
.close__name { font-family: var(--sans); font-size: .9rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.close__sub { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(223,231,238,.6); }

/* --------------------------------------------------------------------------
   19. Page hero (interior)
   -------------------------------------------------------------------------- */

.phero { padding-top: clamp(3rem, 7vh, 6rem); padding-bottom: clamp(3rem, 6vh, 5rem); }
.phero__grid { align-items: end; row-gap: 2.25rem; }
.phero__copy { grid-column: 1 / span 7; }
.phero__aside { grid-column: 9 / span 4; }
.phero__title { margin-block: 1.6rem 1.6rem; }
.phero__aside-inner { border-top: 1px solid var(--rule-brass); padding-top: 1.25rem; display: grid; gap: .9rem; }

/* --------------------------------------------------------------------------
   20. Capability entries
   -------------------------------------------------------------------------- */

.cap { border-top: 1px solid var(--rule); }
.cap__entry {
  display: grid;
  grid-template-columns: 88px minmax(0, 330px) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(2rem, 3.6vw, 3.25rem);
  border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}
.cap__n { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; color: var(--brass); padding-top: .45rem; }
.cap__title { display: grid; gap: .8rem; }
.cap__name { font-family: var(--serif); font-weight: 550; font-size: clamp(1.55rem, 2.5vw, 2.15rem); line-height: 1.06; letter-spacing: -.014em; }
.cap__problem { font-size: .89rem; line-height: 1.6; color: var(--stone); font-weight: 400; }
.cap__body { display: grid; gap: 1.35rem; }
.cap__why { font-size: .98rem; line-height: 1.62; color: var(--ink-soft); font-weight: 400; max-width: 60ch; }
.cap__we { display: grid; gap: .7rem; }
.cap__we-label { font-family: var(--mono); font-size: .645rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); padding-bottom: .55rem; border-bottom: 1px solid var(--rule-brass); }
.cap__we-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 clamp(1rem,2.4vw,2.25rem); }
.cap__we-list li {
  padding-block: .6rem; border-bottom: 1px solid var(--rule-soft);
  font-size: .885rem; color: var(--ink-soft); font-weight: 400;
  display: grid; grid-template-columns: 14px 1fr; gap: .55rem; align-items: baseline;
}
.cap__we-list li::before { content: ""; width: 5px; height: 1px; background: var(--taupe); }

/* --------------------------------------------------------------------------
   21. Industries
   -------------------------------------------------------------------------- */

.ind { display: grid; border-top: 1px solid var(--rule); }
.ind__row {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3.5rem);
  padding-block: clamp(2rem, 3.6vw, 3rem);
  border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}
.ind__head { display: grid; gap: .75rem; }
.ind__name { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.05rem); line-height: 1.06; }
.ind__who { font-family: var(--mono); font-size: .655rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.ind__body { display: grid; gap: 1.2rem; }
.ind__flow { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .7rem; }
.ind__flow span {
  font-family: var(--mono); font-size: .655rem; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: .42rem .65rem; color: var(--ink-soft);
}
.ind__flow i { font-style: normal; color: var(--brass); font-size: .8rem; }

/* --------------------------------------------------------------------------
   22. Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 0; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 clamp(1.25rem, 3vw, 2.75rem); }
.field { display: grid; gap: .5rem; padding-block: 1.05rem; border-bottom: 1px solid var(--rule-soft); }
.field--full { grid-column: 1 / -1; }
.field > label {
  font-family: var(--mono); font-size: .645rem; letter-spacing: .19em;
  text-transform: uppercase; color: var(--stone);
}
.field > label .req { color: var(--brass); }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--sans); font-size: 1rem; font-weight: 400;
  color: var(--ink);
  background: transparent;
  border: 0; border-radius: 0;
  padding: .35rem 0;
  transition: color .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--taupe); }
.field textarea { resize: vertical; min-height: 108px; line-height: 1.6; }
.field select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23C6A46A' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .1rem center;
  padding-right: 1.75rem; cursor: pointer;
}
.field:focus-within { border-bottom-color: var(--brass); }
.field:focus-within > label { color: var(--brass); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }

.form__foot {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  justify-content: space-between; align-items: center;
  padding-top: 2rem;
}
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   23. Insights
   -------------------------------------------------------------------------- */

.notes { display: grid; border-top: 1px solid var(--rule); }
.note {
  display: grid;
  grid-template-columns: 132px minmax(0,1fr) 150px;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.note__cat { font-family: var(--mono); font-size: .655rem; letter-spacing: .17em; text-transform: uppercase; color: var(--brass); }
.note__title { font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.16; }
.note__d { font-size: .885rem; line-height: 1.58; color: var(--stone); font-weight: 400; margin-top: .5rem; max-width: 62ch; }
.note__status { font-family: var(--mono); font-size: .645rem; letter-spacing: .15em; text-transform: uppercase; color: var(--taupe); text-align: right; }

.subscribe {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--rule-soft);
  border-top: 1px solid var(--rule-brass);
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.5rem, 3vw, 3rem); align-items: start;
}

/* --------------------------------------------------------------------------
   24. About / contact blocks
   -------------------------------------------------------------------------- */

.stack { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.prose { display: grid; gap: 1.15rem; max-width: 64ch; }
.prose p { font-size: 1.005rem; line-height: 1.68; color: var(--ink-soft); font-weight: 400; }
.prose p strong { font-weight: 500; color: var(--ink); }

.principles { display: grid; border-top: 1px solid var(--rule); }
.principle {
  display: grid; grid-template-columns: 72px minmax(0,1fr);
  gap: clamp(1rem, 2.5vw, 2.25rem);
  padding-block: clamp(1.35rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}
.principle__n { font-family: var(--mono); font-size: .68rem; letter-spacing: .15em; color: var(--brass); padding-top: .3rem; }
.principle__t { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.12; margin-bottom: .55rem; }
.principle__d { font-size: .945rem; line-height: 1.62; color: var(--ink-soft); font-weight: 400; max-width: 62ch; }

.contact-lines { display: grid; border-top: 1px solid var(--rule-brass); }
.contact-lines a, .contact-lines span.cl {
  display: grid; grid-template-columns: 120px 1fr;
  gap: 1rem; align-items: baseline;
  padding-block: 1rem; border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
}
.contact-lines .cl__k { font-family: var(--mono); font-size: .645rem; letter-spacing: .19em; text-transform: uppercase; color: var(--stone); }
.contact-lines .cl__v { font-size: 1rem; color: var(--ink); font-weight: 400; transition: color .35s var(--ease); }
.contact-lines a:hover .cl__v { color: var(--brass); }

/* --------------------------------------------------------------------------
   25. Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--ivory); border-top: 1px solid var(--rule-soft); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid { row-gap: 2.5rem; align-items: start; }
.footer__brand { grid-column: 1 / span 4; display: grid; gap: 1.1rem; align-content: start; }
.footer__cols { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; }
.footer__col { display: grid; gap: .85rem; align-content: start; }
.footer__h { font-family: var(--mono); font-size: .645rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); padding-bottom: .55rem; border-bottom: 1px solid var(--rule-soft); }
.footer__link { text-decoration: none; font-size: .9rem; color: var(--ink-soft); font-weight: 400; transition: color .35s var(--ease); }
.footer__link:hover { color: var(--brass); }
.footer__note { font-size: .89rem; line-height: 1.6; color: var(--stone); font-weight: 400; max-width: 34ch; }
.footer__base {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.4rem;
  border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
}
.footer__base p, .footer__base a { font-family: var(--mono); font-size: .645rem; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); text-decoration: none; }
.footer__base a:hover { color: var(--brass); }

/* --------------------------------------------------------------------------
   26. Reveal
   -------------------------------------------------------------------------- */

.rv { opacity: 0; transform: translateY(16px); }
.rv.is-in { opacity: 1; transform: none; transition: opacity .95s var(--ease-out), transform .95s var(--ease-out); }
.rv[data-d="1"].is-in { transition-delay: .08s; }
.rv[data-d="2"].is-in { transition-delay: .16s; }
.rv[data-d="3"].is-in { transition-delay: .24s; }
.rv[data-d="4"].is-in { transition-delay: .32s; }

.rvline { display: block; overflow: hidden; }
.rvline > span { display: block; transform: translateY(102%); }
.rvline.is-in > span { transform: none; transition: transform 1.05s var(--ease-out); }
.rvline[data-d="1"].is-in > span { transition-delay: .07s; }
.rvline[data-d="2"].is-in > span { transition-delay: .14s; }
.rvline[data-d="3"].is-in > span { transition-delay: .21s; }
.rvline[data-d="4"].is-in > span { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  .rv, .rvline > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .path__line--live { transition: none; }
  .readout__grid > * { transition: none; }
}

/* --------------------------------------------------------------------------
   27. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .disconnect__intro, .disconnect__gap { grid-column: 1 / span 12; }
  .disconnect__cols { grid-column: 1 / span 12; }
  .inside__lead { grid-column: 1 / span 12; }
  .inside__list { grid-column: 1 / span 12; }
  .systems__nav, .systems__body { grid-column: 1 / span 12; }
  .systems__body { position: static; }
  .leak__list, .leak__panel { grid-column: 1 / span 12; }
  .review__copy, .review__list { grid-column: 1 / span 12; }
  .phero__copy { grid-column: 1 / span 9; }
  .phero__aside { grid-column: 1 / span 7; }
  .footer__brand { grid-column: 1 / span 12; }
  .footer__cols { grid-column: 1 / span 12; }
  .readout__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .quadrant { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .quadrant__cell:nth-child(2) { border-right: 0; }
  .quadrant__cell:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
  .cap__entry { grid-template-columns: 60px minmax(0,1fr); }
  .cap__body { grid-column: 2; }
  .method__row { grid-template-columns: 60px minmax(0,1fr); }
  .method__body { grid-column: 2; }
  .pathpanel.is-active { grid-template-columns: 1fr; }
  .subscribe { grid-template-columns: 1fr; }
  .note { grid-template-columns: 110px minmax(0,1fr); }
  .note__status { grid-column: 2; text-align: left; }
}

@media (max-width: 860px) {
  .nav, .masthead__cta .btn { display: none; }
  .nav-toggle { display: flex; }
  .masthead__inner { min-height: 72px; }
  .path__stages { grid-template-columns: 1fr; margin-top: 0; }
  .path__track { display: none; }
  .path__stages {
    display: flex; gap: 0; overflow-x: auto; padding-bottom: .5rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--rule);
  }
  .stage {
    flex: 0 0 auto; scroll-snap-align: start;
    grid-template-columns: auto;
    padding: 1rem 1.5rem 1rem 0;
    border-bottom: 0;
  }
  .cannot__row { grid-template-columns: 1fr; gap: .5rem; }
  .cannot__x { display: none; }
  .cannot__b::before { content: "It cannot fix "; color: var(--taupe); }
  .quadrant { grid-template-columns: 1fr; }
  .quadrant__cell { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .quadrant__cell:last-child { border-bottom: 0; }
  .form__row { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; gap: 1.75rem; }
  .ind__row { grid-template-columns: 1fr; }
  .principle { grid-template-columns: 48px minmax(0,1fr); }
  .syspanel__items, .cap__we-list { grid-template-columns: 1fr; }
  .note { grid-template-columns: 1fr; gap: .5rem; }
  .note__status { grid-column: 1; }
  .close__foot { display: grid; gap: 1rem; }
}

@media (max-width: 560px) {
  .display { font-size: clamp(2.25rem, 11vw, 3rem); }
  .cap__entry, .method__row { grid-template-columns: 1fr; gap: .9rem; }
  .cap__body, .method__body { grid-column: 1; }
  .chain__node { grid-template-columns: 30px 1fr; gap: .85rem; }
  .drawer__link { font-size: 1.7rem; }
  .readout { padding: 1.5rem 1.25rem; }
  .leakpanel { padding: 1.5rem 1.25rem; }
}

@media print {
  .masthead, .drawer, .strip, .close { display: none; }
  body { background: #fff; }
}

/* ==========================================================================
   28. Scroll progress
   ========================================================================== */

.progress {
  position: fixed; top: 0; left: 0; z-index: 120;
  height: 2px; width: 100%;
  background: transparent; pointer-events: none;
}
.progress__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brass-light), var(--sand));
  transform-origin: left center;
}

/* ==========================================================================
   29. Plates (aviation imagery)
   ========================================================================== */

.plate {
  position: relative;
  background: var(--limestone);
  border: 1px solid var(--rule-brass);
  overflow: hidden;
}
.plate__img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 1.4s var(--ease-out);
}
.plate:hover .plate__img { transform: scale(1.035); }
.plate--tall .plate__img { aspect-ratio: 3 / 4; }
.plate--wide .plate__img { aspect-ratio: 16 / 9; }
.plate--pano .plate__img { aspect-ratio: 21 / 9; }
.plate__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem;
  background: linear-gradient(0deg, rgba(10,23,37,.82), rgba(10,23,37,0));
  font-family: var(--mono); font-size: .625rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(238,234,225,.9);
}
.plate__cap b { color: var(--brass-light); font-weight: 400; }
.plate__frame {
  position: absolute; inset: 9px;
  border: 1px solid rgba(143,189,220,.3);
  pointer-events: none;
}

/* Horizontal scroller of plates */
.gallery { position: relative; }
.gallery__track {
  display: flex; gap: clamp(.9rem, 1.6vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--sand-deep) transparent;
}
.gallery__track::-webkit-scrollbar { height: 3px; }
.gallery__track::-webkit-scrollbar-track { background: var(--rule-soft); }
.gallery__track::-webkit-scrollbar-thumb { background: var(--brass-light); }
.gallery__item {
  flex: 0 0 clamp(255px, 30vw, 400px);
  scroll-snap-align: start;
}
.gallery__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-top: .85rem;
  border-top: 1px solid var(--rule-soft); padding-top: .65rem;
}
.gallery__name { font-family: var(--sans); font-size: .875rem; font-weight: 450; }
.gallery__n { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; color: var(--brass); }
.gallery__hint {
  display: flex; align-items: center; gap: .7rem;
  margin-top: 1rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--taupe);
}
.gallery__hint::after { content: ""; height: 1px; width: 46px; background: var(--rule-brass); }

/* ==========================================================================
   30. What we do
   ========================================================================== */

.wwd { background: var(--paper); border-block: 1px solid var(--rule-soft); }
.wwd__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-left: 1px solid var(--rule-soft);
}
.wwd__cell {
  border-right: 1px solid var(--rule-soft);
  padding: clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.1rem, 1.8vw, 1.6rem);
  display: grid; gap: .85rem; align-content: start;
  transition: background-color .5s var(--ease);
}
.wwd__cell:hover { background: var(--ivory); }
.wwd__icon { width: 40px; height: 40px; color: var(--brass); }
.wwd__n { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; color: var(--taupe); }
.wwd__t { font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.42rem); line-height: 1.1; }
.wwd__d { font-size: .855rem; line-height: 1.55; color: var(--ink-soft); font-weight: 400; }
.wwd__out {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brass);
  padding-top: .6rem; border-top: 1px solid var(--rule-brass);
}

/* ==========================================================================
   31. Big CTA band
   ========================================================================== */

.bigcta {
  background: var(--navy);
  color: var(--ivory);
  position: relative; overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.bigcta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(150deg, var(--petrol) 0%, rgba(16,34,53,0) 62%),
    radial-gradient(70% 120% at 88% 0%, rgba(143,189,220,.22), transparent 60%);
}
.bigcta .shell { position: relative; z-index: 1; }
.bigcta__grid {
  display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  gap: clamp(1.75rem, 4vw, 4rem); align-items: center;
}
.bigcta__kicker {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brass-light); margin-bottom: 1.1rem;
}
.bigcta__h {
  font-family: var(--serif);
  font-weight: 550;
  font-size: clamp(2.1rem, 5.2vw, 4.15rem);
  line-height: 1.02; letter-spacing: -.022em; color: var(--ivory);
}
.bigcta__h em { font-style: italic; color: var(--brass-light); }
.bigcta__p {
  font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.6;
  color: rgba(238,234,225,.82); font-weight: 400; margin-top: 1.4rem; max-width: 46ch;
}
.bigcta__actions { display: grid; gap: 1rem; justify-items: start; }
.bigcta__actions .btn { width: 100%; justify-content: space-between; }
.bigcta__note {
  font-family: var(--mono); font-size: .655rem; line-height: 1.75;
  letter-spacing: .06em; color: rgba(223,231,238,.62);
  padding-top: 1rem; border-top: 1px solid rgba(143,189,220,.35);
  width: 100%;
}

/* ==========================================================================
   32. Sticky CTA bar
   ========================================================================== */

.stickycta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--navy);
  border-top: 1px solid rgba(143,189,220,.45);
  transform: translateY(110%);
  transition: transform .7s var(--ease-out);
}
.stickycta.is-up { transform: translateY(0); }
.stickycta__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; padding-block: .8rem;
}
.stickycta__copy { display: grid; gap: .18rem; min-width: 0; }
.stickycta__t {
  font-family: var(--serif); font-size: clamp(1rem, 1.6vw, 1.28rem);
  line-height: 1.15; color: var(--ivory);
}
.stickycta__t em { font-style: italic; color: var(--brass-light); }
.stickycta__s {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(223,231,238,.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stickycta__acts { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.stickycta .btn { padding: .78rem 1.1rem; font-size: .665rem; }
.stickycta__close {
  width: 28px; height: 28px; opacity: .5; display: grid; place-items: center;
  color: rgba(223,231,238,.55); flex: 0 0 auto;
  transition: color .35s var(--ease);
}
.stickycta__close:hover { color: var(--brass-light); opacity: 1; }
.stickycta__close svg { width: 13px; height: 13px; }

/* ==========================================================================
   33. Revenue model (calculator)
   ========================================================================== */

.calc {
  border: 1px solid var(--rule-soft);
  border-top: 1px solid var(--rule-brass);
  background: var(--ivory);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
}
.calc__inputs { padding: clamp(1.5rem, 3vw, 2.5rem); border-right: 1px solid var(--rule-soft); }
.calc__out { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--paper); display: grid; gap: 1.5rem; align-content: start; }
.calc__label {
  font-family: var(--mono); font-size: .645rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass);
  padding-bottom: .7rem; border-bottom: 1px solid var(--rule-brass); margin-bottom: 1.1rem;
}
.calc__field { display: grid; gap: .45rem; padding-block: .85rem; border-bottom: 1px solid var(--rule-soft); }
.calc__field label { font-size: .875rem; color: var(--ink-soft); font-weight: 400; }
.calc__row { display: flex; align-items: center; gap: .75rem; }
.calc__row input[type="number"] {
  flex: 0 0 118px;
  font-family: var(--mono); font-size: 1rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  padding: .3rem 0; -moz-appearance: textfield;
}
.calc__row input[type="range"] { flex: 1; accent-color: var(--brass-light); min-width: 90px; }
.calc__unit { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; color: var(--taupe); }
.calc__result { display: grid; gap: .4rem; }
.calc__rlabel { font-family: var(--mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); }
.calc__rvalue {
  font-family: var(--serif);
  font-weight: 550; font-size: clamp(2rem, 4.4vw, 3.35rem);
  line-height: 1; letter-spacing: -.02em; color: var(--navy);
}
.calc__rvalue small { font-size: .42em; color: var(--stone); letter-spacing: 0; }
.calc__bars { display: grid; gap: .7rem; margin-top: .35rem; }
.calc__bar { display: grid; grid-template-columns: 108px 1fr auto; gap: .8rem; align-items: center; }
.calc__bar span:first-child { font-family: var(--mono); font-size: .625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--stone); }
.calc__track { height: 8px; background: var(--limestone); position: relative; }
.calc__fill { position: absolute; inset: 0 auto 0 0; width: 0; transition: width .6s var(--ease-out); }
.calc__fill--now { background: var(--slate); }
.calc__fill--then { background: linear-gradient(90deg, var(--brass-light), var(--sand)); }
.calc__bar b { font-family: var(--mono); font-size: .72rem; font-weight: 500; color: var(--ink); }
.calc__note { font-family: var(--mono); font-size: .645rem; line-height: 1.75; color: var(--stone); padding-top: 1rem; border-top: 1px solid var(--rule-soft); }

/* ==========================================================================
   34. Navy marquee
   ========================================================================== */

.strip--navy { background: var(--navy); border-color: var(--navy-line); }
.strip--navy .strip__item { color: rgba(238,234,225,.9); }
.strip--navy .strip__item::after { border-color: var(--brass-light); }

/* ==========================================================================
   35. Trajectory chart block
   ========================================================================== */

.traj { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(1.5rem,3.5vw,3.5rem); align-items: center; }
.traj__fig { border: 1px solid var(--rule-soft); background: var(--paper); padding: clamp(1.1rem,2vw,1.75rem); }
.traj__legend { display: flex; flex-wrap: wrap; gap: .55rem 1.6rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--rule-soft); }
.traj__key { display: flex; align-items: center; gap: .55rem; font-family: var(--mono); font-size: .635rem; letter-spacing: .13em; text-transform: uppercase; color: var(--stone); }
.traj__swatch { width: 18px; height: 2px; }

/* ==========================================================================
   36. Responsive additions
   ========================================================================== */

@media (max-width: 1080px) {
  .wwd__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wwd__cell { border-bottom: 1px solid var(--rule-soft); }
  .bigcta__grid { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .calc__inputs { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .traj { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .wwd__grid { grid-template-columns: 1fr; }
  .stickycta__inner { gap: .75rem; }
  .stickycta__s { display: none; }
  .stickycta .btn { padding: .72rem .85rem; font-size: .615rem; }
  .stickycta .btn__arrow { display: none; }
  .calc__bar { grid-template-columns: 84px 1fr auto; }
}

@media (max-width: 560px) {
  .stickycta__t { font-size: .95rem; }
  .calc__row input[type="range"] { display: none; }
}

@media print { .stickycta, .progress { display: none; } }

/* ==========================================================================
   37. Quote scope checkboxes and masthead text link
   ========================================================================== */

.nav__link--alt { white-space: nowrap; }
@media (max-width: 1180px) { .nav__link--alt { display: none; } }

.scopes { border-bottom: 1px solid var(--rule-soft); border-top: 0; padding-block: 1.35rem; margin: 0; border-inline: 0; }
.scopes legend {
  font-family: var(--mono); font-size: .645rem; letter-spacing: .19em;
  text-transform: uppercase; color: var(--stone); padding: 0; margin-bottom: .9rem;
}
.scopes legend .req { color: var(--brass); }
.scopes__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 clamp(1rem,2.4vw,2.25rem); }
.scope {
  display: grid; grid-template-columns: 18px 1fr; gap: .75rem;
  align-items: center; padding-block: .62rem;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  font-size: .9rem; color: var(--ink-soft); font-weight: 400;
  transition: color .3s var(--ease);
}
.scope:hover { color: var(--ink); }
.scope input {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin: 0;
  border: 1px solid var(--taupe); background: transparent;
  display: grid; place-items: center;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.scope input::after {
  content: ""; width: 7px; height: 7px; transform: rotate(45deg) scale(0);
  background: var(--ivory); transition: transform .3s var(--ease-out);
}
.scope input:checked { background: var(--brass); border-color: var(--brass); }
.scope input:checked::after { transform: rotate(45deg) scale(1); }
.scope input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

@media (max-width: 860px) { .scopes__grid { grid-template-columns: 1fr; } }

/* Sticky bar clearance so it never covers the footer's last line */
body.has-sticky .footer { padding-bottom: 6.5rem; }

/* ==========================================================================
   38. Sticky bar: short form on small screens
   ========================================================================== */

.sc-short { display: none; }

@media (max-width: 860px) {
  .sc-long { display: none; }
  .sc-short { display: inline; }
  .stickycta__t { white-space: nowrap; }
}

@media (max-width: 620px) {
  .stickycta__inner { padding-block: .7rem; }
  .stickycta .btn { padding: .8rem 1rem; font-size: .655rem; }
  .stickycta .btn__arrow { display: inline-block; width: 16px; }
}

/* ==========================================================================
   39. Who we help
   ========================================================================== */

.whohelp { padding-bottom: 0; }
.whohelp__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 3vw, 3.5rem);
  align-items: end;
  margin: 1.5rem 0 clamp(1.75rem, 3.5vw, 2.75rem);
}
.whohelp__banner { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.whohelp__banner .plate { box-shadow: 0 30px 70px -40px rgba(16,34,53,.5); }
.whohelp__banner .plate__cap { padding: 1rem 1.25rem; }
.whohelp__strip { border-top: 1px solid var(--navy-line); }

@media (max-width: 860px) {
  .whohelp__head { grid-template-columns: 1fr; align-items: start; gap: 1.1rem; }
  .whohelp__banner .plate--pano .plate__img { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   40. Photographic plates
   A real photograph is graded into the palette so it sits with the rest of
   the site instead of looking pasted on. The source file is never altered.
   ========================================================================== */

.plate--photo { background: var(--navy); }
.plate--photo .plate__img {
  object-position: center;
  filter: saturate(.86) contrast(1.02) brightness(1.1);
}
.plate__grade {
  position: absolute; inset: 0; pointer-events: none;
}
.plate__grade::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(16,34,53,.4) 0%, rgba(143,189,220,.45) 100%);
  mix-blend-mode: soft-light;
  opacity: .38;
}
.plate__grade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,23,37,.58) 0%, rgba(10,23,37,0) 28%);
}
.plate--photo:hover .plate__img { transform: scale(1.035); }

@media (max-width: 860px) {
  .plate--photo .plate__img { object-position: 40% 60%; }
}

/* ==========================================================================
   41. What you actually get
   ========================================================================== */

.deliver { background: var(--navy); color: var(--ivory); position: relative; overflow: hidden; }
.deliver::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(205deg, var(--petrol) 0%, rgba(16,34,53,0) 60%),
    radial-gradient(80% 90% at 92% 4%, rgba(143,189,220,.22), transparent 58%);
}
.deliver .shell { position: relative; z-index: 1; }
.deliver .sec-index { border-bottom-color: rgba(143,189,220,.4); }
.deliver .sec-index__label, .deliver .sec-index__num { color: var(--brass-light); }
.deliver .lede { color: rgba(238,234,225,.84); }
.deliver .display--sm { color: var(--ivory); }
.deliver .display--sm em { font-style: italic; color: var(--brass-light); }

.deliver__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
  margin: 1.75rem 0 clamp(2.5rem, 5vw, 4rem);
}
.deliver__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 4.5rem);
  border-top: 1px solid rgba(238,234,225,.2);
}
.deliver__row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr);
  gap: .35rem 1.1rem; align-content: start;
  padding-block: clamp(1.25rem, 2.2vw, 1.75rem);
  border-bottom: 1px solid rgba(238,234,225,.14);
}
.deliver__n {
  grid-row: span 2;
  font-family: var(--mono); font-weight: 500; font-size: .8rem;
  letter-spacing: .1em; color: var(--brass-light); padding-top: .45rem;
}
.deliver__t {
  font-family: var(--serif); font-weight: 550;
  font-size: clamp(1.28rem, 2.05vw, 1.72rem);
  line-height: 1.14; letter-spacing: -.012em; color: var(--ivory);
}
.deliver__d {
  font-size: .95rem; line-height: 1.58; font-weight: 400;
  color: rgba(238,234,225,.7);
}
.deliver__foot {
  display: flex; flex-wrap: wrap; gap: .85rem;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

@media (max-width: 900px) {
  .deliver__head { grid-template-columns: 1fr; align-items: start; }
  .deliver__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   42. By the numbers
   Published industry figures, each carrying its source on the page.
   ========================================================================== */

.stats { background: var(--paper); }
.stats__head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
  margin: 1.75rem 0 clamp(2.5rem, 5vw, 3.75rem);
}
.stats__head .h2 em { font-style: italic; color: var(--brass); }

.stats__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--rule-brass);
}
.stat {
  padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.1rem, 1.8vw, 1.75rem);
  border-right: 1px solid var(--rule-soft);
  display: grid; gap: .55rem; align-content: start;
  transition: background-color .5s var(--ease);
}
.stat:last-child { border-right: 0; }
.stat:hover { background: var(--ivory); }
.stat__n {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.75rem, 5.4vw, 4.4rem);
  line-height: .92; letter-spacing: -.03em; color: var(--navy);
}
.stat__k {
  font-family: var(--mono); font-weight: 600; font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brass);
  padding-bottom: .7rem; border-bottom: 1px solid var(--rule-brass);
}
.stat__d { font-size: .95rem; line-height: 1.55; color: var(--ink-soft); font-weight: 400; }
.stat__src {
  font-family: var(--mono); font-weight: 450; font-size: .655rem; line-height: 1.6;
  letter-spacing: .04em; color: var(--stone); margin-top: .35rem;
}
.stats__note {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--mono); font-weight: 450; font-size: .72rem; line-height: 1.75;
  color: var(--stone); max-width: 74ch;
}

@media (max-width: 1080px) {
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
  .stats__head { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 620px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .stat:last-child { border-bottom: 0; }
}

/* Interior hero plates sit above the aside note */
.phero__aside .plate { margin-bottom: 1.5rem; box-shadow: 0 26px 60px -38px rgba(16,34,53,.5); }


/* ==========================================================================
   43. Dark hero
   ========================================================================== */

.hero--dark {
  background: var(--navy-deep);
  color: var(--ivory);
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: min(92vh, 940px);
  display: flex;
  align-items: center;
}
.hero--dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(158deg, var(--petrol) 0%, var(--navy) 46%, var(--navy-deep) 100%),
    radial-gradient(70% 80% at 96% 92%, rgba(143,189,220,.2), transparent 60%);
}
.hero__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(5rem, 12vh, 8rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.hero--dark .hero__eyebrow {
  display: flex; align-items: center; gap: 1.1rem;
  color: rgba(238,234,225,.72);
  margin-bottom: clamp(1.6rem, 3vw, 2.5rem);
}
.hero--dark .hero__eyebrow::after { display: none; }
.hero__num {
  font-family: var(--mono); font-weight: 600; color: var(--brass-light);
  padding-right: 1.1rem; border-right: 1px solid rgba(143,189,220,.5);
}
.hero--dark .hero__title { color: var(--ivory); margin-bottom: 2rem; }
.hero--dark .hero__title .accent { color: var(--brass-light); }
.hero--dark .hero__lede {
  color: rgba(238,234,225,.84);
  border-left: 2px solid var(--brass-light);
  padding-left: clamp(1rem, 1.6vw, 1.5rem);
  margin-bottom: 2.5rem;
  max-width: 54ch;
}
.hero--dark .hero__meta { border-top-color: rgba(143,189,220,.45); }
.hero--dark .hero__meta span {
  color: rgba(238,234,225,.88);
  border-color: rgba(238,234,225,.24);
}
.hero--dark .hero__meta span:hover { border-color: var(--brass-light); color: var(--ivory); }

.hero__media { position: relative; opacity: 1 !important; transform: none !important; }
.hero__media .plate {
  border-color: rgba(143,189,220,.45);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.75);
}
.hero__media .plate__img { aspect-ratio: 4 / 5; }
.hero__caption {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem;
  align-items: start;
  margin-top: 1.1rem;
  font-family: var(--mono); font-weight: 450; font-size: .72rem; line-height: 1.7;
  color: rgba(223,231,238,.62);
}
.hero__caption span {
  color: var(--brass-light); letter-spacing: .18em; font-weight: 600;
  padding-right: .9rem; border-right: 1px solid rgba(143,189,220,.45);
}

/* Masthead reversed while it sits over the dark hero */
body.dark-top .masthead { position: fixed; top: 0; left: 0; right: 0; }
body.dark-top .hero--dark { padding-top: 84px; }
body.dark-top .masthead:not(.is-stuck) .wordmark__mark { color: var(--ivory); }
body.dark-top .masthead:not(.is-stuck) .wordmark__name { color: var(--ivory); }
body.dark-top .masthead:not(.is-stuck) .wordmark__sub { color: var(--brass-light); }
body.dark-top .masthead:not(.is-stuck) .nav__link { color: rgba(238,234,225,.88); }
body.dark-top .masthead:not(.is-stuck) .nav__link:hover,
body.dark-top .masthead:not(.is-stuck) .nav__link[aria-current="page"] { color: var(--ivory); }
body.dark-top .masthead:not(.is-stuck) .btn--primary {
  background: var(--ivory); color: var(--navy);
}
body.dark-top .masthead:not(.is-stuck) .nav-toggle__bars span { background: var(--ivory); }

@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero--dark { min-height: 0; }
  .hero__media .plate__img { aspect-ratio: 16 / 10; }
}


/* Mobile: the fixed masthead still needs clearance */
@media (max-width: 860px) {
  body.dark-top .hero--dark { padding-top: 72px; }
}


/* The dark hero owns its own two-column layout */
.hero--dark .hero__copy { grid-column: 1; grid-row: 1; }
.hero--dark .hero__media { grid-column: 2; grid-row: 1; }
@media (max-width: 1080px) {
  .hero--dark .hero__copy,
  .hero--dark .hero__media { grid-column: 1; grid-row: auto; }
}


/* ==========================================================================
   44. Flyby marks and the moving flight line
   ========================================================================== */

.flyby {
  display: inline-block; vertical-align: middle;
  width: clamp(80px, 9vw, 132px); margin-left: .7em;
  color: var(--brass);
}
.flyby svg { width: 100%; height: auto; overflow: visible; }
.flyby__line { opacity: .55; }
.flyby__jet { transform-box: fill-box; transform-origin: center; }

.flightline {
  position: relative;
  height: 46px;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(.5rem, 1vw, 1rem);
}
.flightline__rail {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--rule-brass);
}
.flightline__craft {
  position: absolute; top: 50%; left: 0;
  width: clamp(52px, 5vw, 74px);
  color: var(--navy);
  transform: translate(0, -50%);
  animation: patrol 13s cubic-bezier(.5,0,.5,1) infinite;
}
.flightline__craft svg { width: 100%; height: auto; display: block; }

@keyframes patrol {
  0%   { left: 0;    transform: translate(0, -50%) scaleX(1); }
  46%  { left: 100%; transform: translate(-100%, -50%) scaleX(1); }
  50%  { left: 100%; transform: translate(-100%, -50%) scaleX(-1); }
  96%  { left: 0;    transform: translate(0, -50%) scaleX(-1); }
  100% { left: 0;    transform: translate(0, -50%) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .flightline__craft { animation: none; left: 50%; transform: translate(-50%, -50%); }
}

/* ==========================================================================
   45. Flight path readout: let the words breathe
   ========================================================================== */

.readout { padding: clamp(2rem, 4vw, 3.5rem); }
.readout__grid {
  grid-template-columns: minmax(0,.72fr) minmax(0,1.25fr) minmax(0,1.15fr);
  gap: clamp(1.75rem, 4vw, 4rem);
}
.readout__list li { font-size: .95rem; line-height: 1.62; }
.readout__examines { font-size: .95rem; line-height: 1.65; }
.readout__consequence { font-size: clamp(1.2rem, 1.85vw, 1.55rem); }

@media (max-width: 1080px) {
  .readout__grid { grid-template-columns: 1fr; }
}

/* Two source photographs are much darker than the rest. Lift only those. */
.plate__img[src$="hangar.jpg"] { filter: saturate(.42) contrast(1.04) brightness(1.34) hue-rotate(-12deg); }
.plate__img[src$="avionics.jpg"] { filter: saturate(.9) contrast(1) brightness(1.24); }

/* Keep the flyby on the same line as the heading it follows */
.whohelp__head .h2 { display: flex; align-items: center; gap: .2em; }
.whohelp__head .flyby { margin-left: .3em; flex: 0 0 auto; }
@media (max-width: 620px) {
  .whohelp__head .h2 { display: block; }
  .whohelp__head .flyby { display: block; margin: .6rem 0 0; width: 120px; }
}

/* Gallery lead-in emphasis */
#gal-h em { font-style: italic; color: var(--brass); }

/* ==========================================================================
   46. Commercial gap figure
   ========================================================================== */

.gapcard {
  border: 1px solid var(--rule-brass);
  background: var(--navy-deep);
  overflow: hidden;
  box-shadow: 0 30px 66px -40px rgba(16,34,53,.6);
}
.gapcard__cap {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: .95rem 1.25rem .85rem;
  border-bottom: 1px solid rgba(143,189,220,.35);
}
.gapcard__cap .tag { color: var(--brass-light); }
.gapcard__cap .mono-note { color: rgba(223,231,238,.7); }
.gapcard .gapfig { display: block; width: 100%; height: auto; }

/* Hero: give the copy more room and size the headline so no line ever
   wraps twice. Stretched, not stacked. */
.hero--dark .hero__inner { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
.hero--dark .hero__title {
  font-size: clamp(2.35rem, 5.85vw, 5rem);
  line-height: 1.0;
}
.hero--dark .hero__lede { max-width: 60ch; }

@media (max-width: 1080px) {
  .hero--dark .hero__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   47. The gap: two columns, one gutter
   ========================================================================== */

.gap { background: var(--paper); }
.gap__head {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
  margin: 1.75rem 0 clamp(2.5rem, 5vw, 3.75rem);
}
.gap__head .h2 em { font-style: italic; color: var(--brass); }

.gap__cols {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: clamp(1rem, 2.4vw, 2.5rem);
  align-items: start;
}

.gapcol { border-top: 2px solid var(--rule-brass); }
.gapcol__head {
  display: grid; gap: .3rem;
  padding-block: 1.1rem 1rem;
  border-bottom: 1px solid var(--rule-soft);
}
.gapcol__title {
  font-family: var(--mono); font-weight: 600; font-size: .8rem;
  letter-spacing: .22em; text-transform: uppercase;
}
.gapcol__note { font-family: var(--mono); font-size: .7rem; color: var(--stone); }
.gapcol__list { display: grid; }
.gapcol__list li {
  display: grid; grid-template-columns: 34px 1fr; gap: 1rem;
  align-items: baseline; padding-block: .95rem;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 1rem; line-height: 1.45; font-weight: 400;
}
.gapcol__list i {
  font-family: var(--mono); font-style: normal; font-weight: 600;
  font-size: .68rem; letter-spacing: .1em;
}

.gapcol--real .gapcol__title { color: var(--navy); }
.gapcol--real .gapcol__list li { color: var(--ink); }
.gapcol--real .gapcol__list i { color: var(--brass); }

.gapcol--seen { border-top-color: var(--rule); }
.gapcol--seen .gapcol__title { color: var(--stone); }
.gapcol--seen .gapcol__list li { color: var(--stone); }
.gapcol--seen .gapcol__list i { color: var(--taupe); }
.gapcol--seen .gapcol__list li span { text-decoration: line-through; text-decoration-color: rgba(169,155,132,.55); text-decoration-thickness: 1px; }

.gapdiv {
  display: grid; justify-items: center; align-content: stretch;
  grid-template-rows: 1fr auto 1fr;
  gap: 1rem; align-self: stretch; padding-top: 1.1rem;
}
.gapdiv__rule { width: 1px; background: var(--rule-brass); justify-self: center; height: 100%; }
.gapdiv__label {
  font-family: var(--mono); font-weight: 600; font-size: .72rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--brass);
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding-block: .5rem;
}

.gap__close {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem; border-top: 1px solid var(--rule-brass);
  font-family: var(--serif); font-weight: 550;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.25;
  max-width: 58ch;
}

@media (max-width: 900px) {
  .gap__head { grid-template-columns: 1fr; align-items: start; }
  .gap__cols { grid-template-columns: 1fr; gap: 2rem; }
  .gapdiv {
    grid-template-rows: none; grid-template-columns: 1fr auto 1fr;
    align-content: center; padding-top: 0;
  }
  .gapdiv__rule { width: 100%; height: 1px; }
  .gapdiv__label { writing-mode: horizontal-tb; transform: none; }
}

/* ==========================================================================
   48. Retainer, and the call button
   ========================================================================== */

.retain { background: var(--paper); }
.retain__grid {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(1.75rem, 4vw, 4.5rem); align-items: start;
  margin-top: 1.75rem;
}
.retain__copy .h2 em { font-style: italic; color: var(--brass); }
.retain__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem; }

.retain__list { border-top: 2px solid var(--rule-brass); padding-top: 1.4rem; }
.retain__label {
  font-family: var(--mono); font-weight: 600; font-size: .74rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--brass);
  margin-bottom: .4rem;
}
.retain__items { display: grid; }
.retain__items li {
  display: grid; grid-template-columns: 34px 1fr; gap: 1rem;
  align-items: baseline; padding-block: .9rem;
  border-bottom: 1px solid var(--rule-soft);
  font-size: .98rem; line-height: 1.5; color: var(--ink-soft); font-weight: 400;
}
.retain__items i {
  font-family: var(--mono); font-style: normal; font-weight: 600;
  font-size: .68rem; letter-spacing: .1em; color: var(--brass);
}
.retain__note {
  margin-top: 1.2rem;
  font-family: var(--mono); font-weight: 450; font-size: .72rem; line-height: 1.75;
  color: var(--stone);
}

/* Call button: shows the number on hover, focus, or tap. Dials on a phone. */
.callbtn {
  display: inline-flex; align-items: center; gap: .62rem;
  background: var(--navy); color: var(--ivory);
  font-family: var(--mono); font-weight: 500; font-size: .75rem;
  letter-spacing: .17em; text-transform: uppercase; text-decoration: none;
  padding: 1.02rem 1.6rem;
  border: 1px solid var(--navy);
  transition: background-color .45s var(--ease), border-color .45s var(--ease);
}
.callbtn:hover, .callbtn:focus-visible, .callbtn.is-open {
  background: var(--brass); border-color: var(--brass); color: var(--navy-deep);
}
.callbtn__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1em; height: 1em; flex: 0 0 auto;
}
.callbtn__icon svg { width: 1em; height: 1em; display: block; }
.callbtn__num {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width .55s var(--ease-out), opacity .35s var(--ease), margin-left .55s var(--ease-out);
}
.callbtn:hover .callbtn__num,
.callbtn:focus-visible .callbtn__num,
.callbtn.is-open .callbtn__num { max-width: 12rem; opacity: 1; margin-left: -.35rem; }
.callbtn:hover .callbtn__label,
.callbtn.is-open .callbtn__label { opacity: .55; }
.callbtn__label { transition: opacity .35s var(--ease); }

/* Same button, reversed, for dark bands */
.bigcta .callbtn, .close .callbtn, .deliver .callbtn {
  background: transparent; color: var(--ivory); border-color: rgba(238,234,225,.28);
}
.bigcta .callbtn:hover, .close .callbtn:hover, .deliver .callbtn:hover {
  background: var(--brass-light); border-color: var(--brass-light); color: var(--navy-deep);
}

@media (max-width: 900px) {
  .retain__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .callbtn { width: 100%; justify-content: center; }
  .callbtn__num { max-width: 12rem; opacity: 1; margin-left: -.35rem; }
  .callbtn__label { display: none; }
}

/* Big CTA: one white line, one gold line, neither allowed to wrap */
.bigcta__grid { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); }
.bigcta__h { font-size: clamp(1.95rem, 4.25vw, 3.4rem); line-height: 1.06; }
@media (max-width: 1080px) { .bigcta__grid { grid-template-columns: 1fr; } }


/* Inline icons are sized by their box, never by the page width */
.callbtn__icon svg, .wwd__icon, .flyby svg, .cannot__x svg { max-width: none; }

/* ==========================================================================
   49. Mobile pass
   On a phone nothing drops below 12px and every tap target clears 44px.
   ========================================================================== */

@media (max-width: 860px) {

  /* --- legibility floor ------------------------------------------------- */
  .mono-note,
  .stat__k,
  .retain__label,
  .creed__b { font-size: .82rem; }

  .eyebrow,
  .sec-index__num,
  .sec-index__label,
  .tag,
  .strip__item,
  .btn,
  .callbtn,
  .link-under,
  .stat__src,
  .stats__note,
  .wwd__out,
  .plate__cap,
  .gallery__n,
  .gallery__hint,
  .footer__h,
  .footer__base p,
  .footer__base a,
  .close__sub,
  .close__name,
  .creed__a,
  .gapcol__title,
  .gapcol__note,
  .gapdiv__label,
  .hero__caption,
  .hero__meta span,
  .leakpanel__label,
  .leakbtn__n,
  .readout__label,
  .stage__num,
  .stage__name,
  .retain__note,
  .retain__items i,
  .syspanel__kicker,
  .syspanel__feeds,
  .aside-card__label,
  .bigcta__kicker,
  .bigcta__note,
  .cap__we-label,
  .cap__n,
  .chain__n,
  .method__n,
  .method__chips span,
  .principle__n,
  .deliver__n,
  .note__cat,
  .note__status,
  .ind__who,
  .ledger__title,
  .pathtab,
  .sysbtn__n,
  .calc__label,
  .calc__note,
  .calc__rlabel,
  .calc__unit,
  .calc__bar span:first-child,
  .scopes legend,
  .field > label,
  .form__foot .mono-note,
  .gapcol__list i,
  .review__items i,
  .wordmark__sub { font-size: .78rem; letter-spacing: .16em; }

  .wordmark__sub { font-size: .68rem; letter-spacing: .3em; }
  .stat__src { letter-spacing: .02em; line-height: 1.55; }
  .stats__note, .retain__note, .calc__note, .bigcta__note { letter-spacing: .01em; line-height: 1.7; }
  .syspanel__feeds { letter-spacing: .01em; }

  /* --- tap targets ------------------------------------------------------ */
  .footer__link {
    display: flex; align-items: center;
    min-height: 44px; font-size: 1rem;
  }
  .footer__base a, .footer__base p {
    display: inline-flex; align-items: center; min-height: 36px;
  }
  .drawer__foot .mono-note {
    display: flex; align-items: center; min-height: 44px;
  }
  .wordmark { min-height: 44px; }
  .btn, .callbtn { min-height: 48px; }
  .stickycta__close { width: 40px; height: 40px; }
  .calc__row input[type="number"] { min-height: 44px; font-size: 1rem; }
  .field input, .field select, .field textarea { min-height: 44px; font-size: 1rem; }
  .scope { min-height: 44px; }
  .leakbtn, .sysbtn, .pathtab, .stage { min-height: 48px; }
}

@media (max-width: 560px) {
  /* Section headers should not run to four or five lines on a narrow screen */
  .h2 { font-size: clamp(1.75rem, 8.4vw, 2.35rem); }
  .display--sm { font-size: clamp(1.9rem, 9vw, 2.5rem); }
  .gap__close, .pull__q { font-size: 1.2rem; }
  .stat__n { font-size: 3.1rem; }
  .deliver__t { font-size: 1.2rem; }

  /* Give every band room to breathe */
  .section { padding-block: 3.4rem; }
  .gapcol__list li, .retain__items li, .review__items li { grid-template-columns: 30px 1fr; gap: .8rem; }
}

@media (max-width: 860px) {
  .wordmark__sub { font-size: .72rem; }
  .plate__cap b, .calc__bar b, .syspanel__feeds b { font-size: .78rem; }
  .stickycta .btn { font-size: .76rem; min-height: 46px; }
  .footer__base a, .footer__base p { min-height: 44px; }
}

@media (max-width: 860px) {
  /* The bar's text must yield to the button, never run underneath it */
  .stickycta__copy { min-width: 0; flex: 1 1 auto; }
  .stickycta__t {
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
    font-size: 1rem;
  }
  .stickycta__acts { flex: 0 0 auto; }
}
@media (max-width: 430px) {
  .stickycta__t { font-size: .95rem; }
  .stickycta .btn { padding: .8rem .85rem; font-size: .72rem; }
}

/* ==========================================================================
   50. Mobile drawer containment
   Closed, it must not exist for layout, width or screen readers.
   ========================================================================== */

.drawer {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  visibility: hidden;
}
.drawer.is-open { visibility: visible; }

.drawer__nav, .drawer__foot { width: 100%; min-width: 0; }
.drawer__link { min-width: 0; }
.drawer__link > span { min-width: 0; overflow-wrap: anywhere; }
.drawer .btn {
  width: 100%; justify-content: space-between;
  white-space: normal; text-align: left;
}
.drawer .mono-note { overflow-wrap: anywhere; }

/* ==========================================================================
   51. Grid collapse on small screens
   Interior pages place children with explicit column spans. Below this width
   there is only one column, so every child takes the full row. This overrides
   inline spans, which is why it carries !important.
   ========================================================================== */

@media (max-width: 900px) {
  .grid > * { grid-column: 1 / -1 !important; }
  .grid { row-gap: clamp(1.75rem, 5vw, 2.5rem); }
}

@media (max-width: 620px) {
  /* The email address is one unbreakable string. Stack the row and let it wrap. */
  .contact-lines a, .contact-lines span.cl {
    grid-template-columns: 1fr; gap: .3rem; padding-block: .95rem;
  }
  .contact-lines .cl__v { overflow-wrap: anywhere; font-size: 1rem; }
  .footer__link, .mono-note, .form__foot .mono-note a { overflow-wrap: anywhere; }
}

/* The drawer is ivory, so the masthead must drop its reversed colours
   while it is open, even on a page with a dark hero behind it. The selector
   carries one more class than the dark-hero rule so it wins without !important. */
body.dark-top.nav-open .masthead:not(.is-stuck) .wordmark__mark,
body.dark-top.nav-open .masthead:not(.is-stuck) .wordmark__name,
body.nav-open .masthead .wordmark__mark,
body.nav-open .masthead .wordmark__name { color: var(--navy); }

body.dark-top.nav-open .masthead:not(.is-stuck) .wordmark__sub,
body.nav-open .masthead .wordmark__sub { color: var(--brass); }

body.dark-top.nav-open .masthead:not(.is-stuck) .nav-toggle__bars span,
body.nav-open .masthead .nav-toggle__bars span { background: var(--ink); }

/* Who we work with: statement left, supporting copy and actions right */
.whohelp__head {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
}
.whohelp__head .h2 { display: block; }
.whohelp__head .flyby { display: inline-block; margin-left: .35em; width: clamp(64px, 6vw, 96px); }
.whohelp__body { display: grid; gap: 1.1rem; }
.whohelp__body .btn-row { margin-top: .9rem; }

@media (max-width: 900px) {
  .whohelp__head { grid-template-columns: 1fr; }
  .whohelp__head .flyby { width: 72px; }
}

/* ==========================================================================
   52. Full-width page banner
   ========================================================================== */

.phero__solo { max-width: 62ch; }
.phero__solo .phero__title { margin-block: 1.6rem 1.6rem; }

.pherobanner {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  width: 100%;
  max-width: 100%;
  border-inline: 0;
  border-top: 1px solid var(--rule-brass);
  border-bottom: 1px solid var(--rule-brass);
}
.pherobanner .plate__img {
  aspect-ratio: 21 / 8;
  object-position: center 46%;
}
.pherobanner .plate__cap { padding: 1.1rem clamp(1.25rem, 4.2vw, 4.5rem); }

@media (max-width: 860px) {
  .pherobanner .plate__img { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   53. Contact cards
   Big tappable targets. On a phone they dial and open mail directly.
   ========================================================================== */

.contactcard {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.1rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.contactcard__item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  text-decoration: none;
  border: 1px solid var(--rule);
  background: var(--ivory);
  color: var(--ink);
  min-height: 76px;
  transition: border-color .45s var(--ease), background-color .45s var(--ease), transform .45s var(--ease-out);
}
.contactcard__item:hover {
  border-color: var(--brass);
  background: var(--brass-pale);
  transform: translateY(-2px);
}
.contactcard__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--rule-brass);
  border-radius: 50%;
  color: var(--brass);
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.contactcard__item:hover .contactcard__icon { background: var(--brass); color: var(--ivory); }
.contactcard__text { display: grid; gap: .2rem; min-width: 0; }
.contactcard__label {
  font-family: var(--mono); font-weight: 600; font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--stone);
}
.contactcard__value {
  font-family: var(--sans); font-weight: 500; font-size: 1.02rem;
  letter-spacing: -.005em; overflow-wrap: anywhere;
}
.contactcard__go {
  width: 18px; height: 1px; background: var(--brass); position: relative;
  transition: width .45s var(--ease-out);
}
.contactcard__go::after {
  content: ""; position: absolute; right: 0; top: -2.5px;
  width: 6px; height: 6px;
  border-top: 1px solid var(--brass); border-right: 1px solid var(--brass);
  transform: rotate(45deg);
}
.contactcard__item:hover .contactcard__go { width: 26px; }

/* Reversed for dark bands */
.contactcard--dark .contactcard__item {
  background: rgba(255,255,255,.04);
  border-color: rgba(238,234,225,.24);
  color: var(--ivory);
}
.contactcard--dark .contactcard__item:hover {
  background: rgba(143,189,220,.16); border-color: var(--brass-light);
}
.contactcard--dark .contactcard__icon { border-color: rgba(143,189,220,.5); color: var(--brass-light); }
.contactcard--dark .contactcard__item:hover .contactcard__icon { background: var(--brass-light); color: var(--navy-deep); }
.contactcard--dark .contactcard__label { color: rgba(223,231,238,.66); }
.contactcard--dark .contactcard__go, .contactcard--dark .contactcard__go::after {
  background: var(--brass-light); border-color: var(--brass-light);
}
.close .contactcard { margin-top: clamp(2rem, 4vw, 3rem); max-width: 760px; }

@media (max-width: 720px) {
  .contactcard { grid-template-columns: 1fr; }
  .contactcard__item { min-height: 72px; }
}

/* ==========================================================================
   54. Quote banner: smaller, graded, faded into the page
   ========================================================================== */

.pherobanner {
  border: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.pherobanner .plate__img {
  aspect-ratio: 32 / 9;
  object-position: center 44%;
  filter: saturate(.5) contrast(1.06) brightness(1.06);
}
.pherobanner .plate__grade::before { opacity: .5; }
.pherobanner .plate__grade::after {
  background:
    linear-gradient(90deg, var(--ivory) 0%, rgba(244,240,232,0) 22%),
    linear-gradient(270deg, var(--ivory) 0%, rgba(244,240,232,0) 22%);
}
.pherobanner .plate__cap {
  background: none;
  color: var(--stone);
}
.pherobanner .plate__cap b { color: var(--brass); }

@media (max-width: 860px) {
  .pherobanner .plate__img { aspect-ratio: 21 / 9; }
}

/* Build credit */
.footer__by { color: var(--taupe); }
.footer__by:hover { color: var(--brass); }

/* ---------------------------------------------------------------------------
   AUDIT VISUALISATION
   Replaces the hero photograph. One dot per company in the audit set, grouped
   so the eye reads the three states as bands rather than noise. The point of
   the piece is that the field is mostly hollow.
   ------------------------------------------------------------------------- */
.auditviz{margin:0;display:grid;gap:1.35rem}
.auditviz__head{display:flex;align-items:baseline;gap:.9rem}
.auditviz__n{font-family:var(--serif);font-size:clamp(2.6rem,4.6vw,3.9rem);line-height:.9;
  color:var(--ivory);letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.auditviz__t{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-light);line-height:1.65}
.auditviz__t span{color:var(--slate-light);letter-spacing:.1em;font-size:.64rem;text-transform:none}
.auditviz__grid{display:block;width:100%;height:auto;overflow:visible}
.auditviz__key{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.auditviz__key li{display:flex;align-items:center;gap:.65rem;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.07em;color:var(--slate-light)}
.auditviz__key b{color:var(--ivory);font-weight:500;font-variant-numeric:tabular-nums;
  min-width:2.6em;display:inline-block}
.k{width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:inline-block}
.k--none{border:1.1px solid rgba(247,243,236,.20)}
.k--half{border:1.4px solid rgba(143,189,220,.60)}
.k--full{background:var(--brass-light)}
.auditviz__src{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--slate);margin:0;padding-top:.9rem;border-top:1px solid rgba(247,243,236,.10)}
@media (max-width:900px){
  .auditviz{gap:1.1rem}
  .auditviz__head{flex-direction:column;gap:.35rem}
}

/* ---------------------------------------------------------------------------
   WORDMARK, TYPE ONLY
   No symbol: a triangle collides with Delta Air Lines and a stacked rule reads
   as a hamburger. STUDIOS is centred under the name and set heavier, and the
   rule under it descends to the dot like an aircraft on final approach. The
   line is currentColor so it reverses correctly on the dark hero.
   ------------------------------------------------------------------------- */
.wordmark{gap:0}
.wordmark__type{gap:.32rem;position:relative;padding-bottom:.15rem}
.wordmark__name{letter-spacing:.2em}
.wordmark__sub{display:flex;align-items:center;justify-content:center;
  font-weight:700;letter-spacing:.42em;text-indent:.42em}

/* a straight rule with a jet at the end, painted through a mask so the
   whole thing takes currentColor and reverses with the masthead */
.wordmark__type::after{content:"";display:block;height:9px;width:100%;background-color:currentColor;opacity:.5;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%2014%22%3E%3Crect%20x%3D%220%22%20y%3D%226.35%22%20width%3D%2290%22%20height%3D%221.3%22%2F%3E%3Cpath%20d%3D%22M128%207%20L114%205.1%20L107%200.6%20L104.2%200.6%20L108%205.4%20L100.5%205.9%20L97.4%203.1%20L95.2%203.1%20L96.9%206.2%20L93%206.4%20L93%207.6%20L96.9%207.8%20L95.2%2010.9%20L97.4%2010.9%20L100.5%208.1%20L108%208.6%20L104.2%2013.4%20L107%2013.4%20L114%208.9%20Z%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%2014%22%3E%3Crect%20x%3D%220%22%20y%3D%226.35%22%20width%3D%2290%22%20height%3D%221.3%22%2F%3E%3Cpath%20d%3D%22M128%207%20L114%205.1%20L107%200.6%20L104.2%200.6%20L108%205.4%20L100.5%205.9%20L97.4%203.1%20L95.2%203.1%20L96.9%206.2%20L93%206.4%20L93%207.6%20L96.9%207.8%20L95.2%2010.9%20L97.4%2010.9%20L100.5%208.1%20L108%208.6%20L104.2%2013.4%20L107%2013.4%20L114%208.9%20Z%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
.close__line{margin-top:0}

/* ---------------------------------------------------------------------------
   THE GAP, INTERACTIVE
   Both lists occupy the same space. The buyer's view is clipped and wipes
   across your reality as the handle moves, so the gap is something you do
   rather than something you read. The range input is the real control, which
   keeps it keyboard and screen-reader operable; the handle is decoration.
   ------------------------------------------------------------------------- */
.gapx{--wipe:38%;margin:3rem 0 0;display:grid;gap:1.6rem}
.gapx__stage{position:relative;isolation:isolate;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);background:
  linear-gradient(90deg,transparent 0 calc(var(--wipe) - 1px),var(--rule-brass) calc(var(--wipe) - 1px) var(--wipe),transparent var(--wipe))}
.gapx__layer{padding:1.9rem 0 1.4rem}
.gapx__layer--seen{position:absolute;inset:0;background:var(--bg);
  clip-path:inset(0 calc(100% - var(--wipe)) 0 0);
  border-right:1px solid var(--rule-brass)}
.gapx__head{display:grid;gap:.3rem;padding-bottom:1.15rem;margin-bottom:.4rem;
  border-bottom:1px solid var(--rule-soft)}
.gapx__title{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--navy)}
.gapx__note{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--ink-mute)}
.gapx__list{list-style:none;margin:0;padding:0}
.gapx__list li{display:flex;align-items:center;gap:1rem;min-height:3.45rem;
  border-bottom:1px solid var(--rule-soft);white-space:nowrap}
.gapx__list li:last-child{border-bottom:0}
.gapx__list i{font-family:var(--mono);font-size:.66rem;font-style:normal;color:var(--brass);min-width:1.6em}
.gapx__list span{font-size:clamp(.92rem,1.35vw,1.08rem);color:var(--ink)}
.gapx__layer--seen .gapx__list span{color:var(--ink-mute);text-decoration:line-through;
  text-decoration-color:var(--rule-brass);text-decoration-thickness:1px}
.gapx__layer--seen .gapx__title{color:var(--brass)}

.gapx__handle{position:absolute;top:0;bottom:0;left:var(--wipe);width:1px;
  background:var(--brass);z-index:3;pointer-events:none;display:flex;align-items:center;justify-content:center}
.gapx__handle b{position:absolute;writing-mode:vertical-rl;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.3em;color:var(--brass);background:var(--bg);padding:.75rem .15rem;font-weight:500}
.gapx__range{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:4;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.gapx__range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%;cursor:ew-resize}
.gapx__range::-moz-range-thumb{width:44px;height:100%;border:0;background:transparent;cursor:ew-resize}
.gapx__range:focus-visible{outline:none}
.gapx__range:focus-visible ~ .gapx__handle{box-shadow:0 0 0 2px var(--brass)}

.gapx__readout{display:flex;align-items:baseline;gap:.85rem;margin:0;max-width:46ch}
.gapx__readout b{font-family:var(--serif);font-size:clamp(2.2rem,3.6vw,3rem);line-height:.9;
  color:var(--brass);font-weight:500;font-variant-numeric:tabular-nums;min-width:1.2em}
.gapx__readout span{font-size:.98rem;color:var(--ink-soft);line-height:1.5}

@media (max-width:760px){
  .gapx__list li{min-height:3.1rem;white-space:normal}
  .gapx__list span{font-size:.88rem;line-height:1.3}
  .gapx__handle b{display:none}
}
@media (prefers-reduced-motion:reduce){.gapx__layer--seen{transition:none}}

/* ---------------------------------------------------------------------------
   APPROACH PATH
   The buying sequence drawn as an instrument approach: the glideslope draws
   itself, the aircraft flies the path, and each waypoint lights as it is
   passed. Runs once when the section scrolls into view, not on a loop, so it
   reads as a diagram rather than an ornament. Honours reduced-motion by
   jumping straight to the finished state.
   ------------------------------------------------------------------------- */
.appr{margin:clamp(1.5rem,3vw,2.6rem) 0 0;display:grid;gap:1.1rem}
.appr__svg{display:block;width:100%;height:auto;overflow:visible}
.appr__ground{stroke:var(--rule);stroke-width:1}
.appr__path{fill:none;stroke:var(--rule);stroke-width:1;stroke-dasharray:3 5}
.appr__trace{fill:none;stroke:var(--brass);stroke-width:1.6;
  stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}
.appr__craft{stroke:var(--brass);stroke-width:1.6;fill:none;stroke-linecap:round;opacity:0}
.appr__tick{stroke:var(--rule);stroke-width:1}
.appr__dot{fill:var(--bg);stroke:var(--brass);stroke-width:1.6}
.appr__name{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  fill:var(--navy);text-anchor:middle}
.appr__sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;fill:var(--ink-mute);text-anchor:middle}
.appr__node{opacity:0}
.appr__cap{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--ink-mute);
  max-width:60ch;margin:0;padding-top:1rem;border-top:1px solid var(--rule-soft)}

.appr.is-flying .appr__trace{animation:apprDraw 2.1s var(--ease-out) forwards}
.appr.is-flying .appr__craft{animation:apprFly 2.1s var(--ease-out) forwards}
.appr.is-flying .appr__node{animation:apprNode .5s var(--ease-out) forwards;
  animation-delay:calc(.34s + var(--i) * .38s)}
@keyframes apprDraw{to{stroke-dashoffset:0}}
@keyframes apprNode{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes apprFly{
  0%{opacity:0;offset-distance:0%}
  8%{opacity:1}
  92%{opacity:1}
  100%{opacity:0;offset-distance:100%}
}
.appr__craft{offset-path:path("M 118 60 L 642 224");offset-rotate:auto}
.appr__node{transform-box:fill-box;transform-origin:center}

@media (max-width:820px){
  .appr__sub{display:none}
  .appr__name{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .appr .appr__trace{stroke-dashoffset:0;animation:none}
  .appr .appr__node{opacity:1;animation:none}
  .appr .appr__craft{display:none}
}

/* ---------------------------------------------------------------------------
   WORDMARK RULE, COLOUR BY CONTEXT
   The theme rules only recolour .wordmark__name and .wordmark__sub, so the
   rule was inheriting the page ink and painting navy on the navy hero. Set it
   explicitly for each surface instead of relying on currentColor.
   ------------------------------------------------------------------------- */
.wordmark__type::after{background-color:var(--navy);opacity:.6}
body.dark-top .masthead:not(.is-stuck) .wordmark__type::after,
.footer .wordmark__type::after,
.drawer--dark .wordmark__type::after{background-color:var(--ivory);opacity:.8}
body.dark-top.nav-open .masthead:not(.is-stuck) .wordmark__type::after,
body.nav-open .masthead .wordmark__type::after{background-color:var(--navy);opacity:.6}
.wordmark:hover .wordmark__type::after{opacity:1}