/* ==========================================================================
   Bayman Capital Partners  ::  v3 "Sounding"
   ---------------------------------------------------------------------------
   The system is a bathymetric chart. A bayman sounded the bay before he
   trusted it: a weighted line dropped over the side, depth read off the
   knots. The site is built the same way. The page descends. Contour lines
   thicken as you go. Every figure is a sounding, not a decoration.

   Ground        cream and sand, from the mark and the film
   Ink           Bayman navy, the wordmark colour
   Deep          navy at full strength, where the two doors live
   Signal        Bayman gold, reserved for live marks and losses
   Type          IBM Plex Sans for prose, IBM Plex Mono for every readout

   No photography except the two founders. The grid is a measuring scale.
   Previous v2 "Instrument" system preserved at assets/styles.css
   ========================================================================== */

:root {
  /* ==========================================================
     BRAND PALETTE. Sampled from assets/logo.svg and the Comic
     Explainer end card, so the site, the mark and the film are
     one identity.
       navy   #16324e (logo)   #09172d (film ink)
       gold   #cbb98f light    #9f8156 mid    #6f5a2e dark
       cream  #f7f5f2          sand #ede5d9
     Every token below is one of those five hues or a tint of
     one, and every text pairing clears 4.5:1.
     ========================================================== */

  /* ---- ground: cream and sand ---- */
  --paper:    #f7f5f2;
  --paper-2:  #fdfcfa;
  --shoal:    #ede5d9;
  --shoal-2:  #e3d9c9;

  /* ---- depth: the navy band ---- */
  --deep:     #09172d;   /* film ink, the deepest water */
  --deep-2:   #12263f;
  --deep-3:   #16324e;   /* logo navy, used for the raised callout */
  --on-deep:  #eae5db;
  --on-deep-mute: #9aa4b2;   /* 7.10 on deep, 5.20 on logo navy */

  /* ---- ink ---- */
  --ink:      #09172d;
  --ink-2:    #2c3d52;
  /* Both muted tones clear 4.5:1 against cream AND sand, so grey small
     text can sit on either band without a second look. */
  --muted:    #5a6472;
  --muted-2:  #5f6675;

  /* ---- signal: gold ----
     --signal is the graphic gold: bars, marks, rules, fills.
     --signal-text is gold darkened to clear 4.5:1 as small type on cream
     and sand. --signal-on-deep is the light gold, for type on navy. */
  --signal:      #9f8156;
  --signal-text: #6f5a2e;
  --signal-on-deep: #cbb98f;

  /* ---- rules: warm sand greys, not neutral ---- */
  --line:      #d4cbba;
  --line-soft: #e3dbcd;
  --line-ink:  #09172d;
  --line-deep: #24405c;

  /* ---- contour strokes, read by the canvas script ---- */
  --contour-ink:  9, 23, 45;      /* navy, on cream */
  --contour-deep: 203, 185, 143;  /* light gold, on navy */

  --maxw: 1200px;
  --measure: 62ch;
  --rail: 84px;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { font-weight: 500; letter-spacing: -.024em; margin: 0; line-height: 1.1; }
h1 { font-size: clamp(2.35rem, 5.2vw, 4rem); letter-spacing: -.032em; }
h2 { font-size: clamp(1.6rem, 3.1vw, 2.35rem); }
h3 { font-size: 1.08rem; letter-spacing: -.012em; }
p  { margin: 0 0 1.05em; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 400; background: var(--ink); color: var(--paper); padding: 10px 16px; font-family: var(--mono); font-size: .78rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); position: relative; }
/* anchors land clear of the sticky header */
[id] { scroll-margin-top: 82px; }
.measure { max-width: var(--measure); }
.center { text-align: center; }
.mt-lg { margin-top: 40px; }

/* ==========================================================================
   1. SECTION SHELLS  ::  the descent
   Each band is a depth. Paper at the surface, shoal in mid-water, one deep
   band where the argument gets structural, paper again for the people.
   ========================================================================== */

section { padding: clamp(74px, 9vw, 130px) 0; position: relative; }
.band-shoal { background: var(--shoal); }
.band-deep  { background: var(--deep); color: var(--on-deep); }
.band-deep h1, .band-deep h2, .band-deep h3 { color: var(--on-deep); }
.band-deep p { color: var(--on-deep-mute); }
.hairline { border: 0; border-top: 1px solid var(--line-ink); margin: 0; }
.hairline-soft { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ==========================================================================
   2. CHART FURNITURE  ::  tick rule, depth rail, progress
   ========================================================================== */

/* The tick rule at the very top of the page: a ruler edge. */
.tickrule { display: flex; height: 10px; border-bottom: 1px solid var(--line-ink); background: var(--paper); position: relative; z-index: 3; }
.tickrule span { flex: 1; border-right: 1px solid var(--line); }
.tickrule span:nth-child(5n) { border-right-color: var(--line-ink); }
.tickrule span:last-child { border-right: 0; }

.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--signal); z-index: 200; transform: scaleX(0); transform-origin: 0 50%; }

/* The depth rail: fixed left edge, a sounding line paying out as you scroll. */
.depth-rail {
  position: fixed; left: 0; top: 96px; bottom: 28px; width: var(--rail);
  z-index: 90; pointer-events: none;
  display: none;
  font-family: var(--mono);
}
.depth-rail .spine { position: absolute; left: 30px; top: 0; bottom: 0; width: 1px; background: var(--line); opacity: .6; }
.depth-rail .paid  { position: absolute; left: 30px; top: 0; width: 1px; height: 0; background: var(--ink); }
.depth-rail .knot  { position: absolute; left: 24px; width: 13px; height: 1px; background: var(--line); }
.depth-rail .lead  { position: absolute; left: 26px; width: 9px; height: 9px; margin-left: -4px; background: var(--signal); transform: rotate(45deg); top: 0; }
.depth-rail .readout {
  position: absolute; left: 46px; top: 0; transform: translateY(-50%);
  font-size: .56rem; letter-spacing: .13em; color: var(--muted);
  white-space: nowrap; text-transform: uppercase;
}
.depth-rail[data-depth="deep"] .spine { background: var(--line-deep); }
.depth-rail[data-depth="deep"] .paid  { background: var(--on-deep); }
.depth-rail[data-depth="deep"] .knot  { background: var(--line-deep); }
.depth-rail[data-depth="deep"] .readout { color: var(--on-deep-mute); }
@media (min-width: 1180px) { .depth-rail { display: block; } }

/* ==========================================================================
   3. THE CONTOUR FIELD  ::  generative bathymetry
   A canvas draws iso-lines across a slow scalar field. It is decorative and
   entirely optional: the page is complete without it.
   ========================================================================== */

.contour-host { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.contour-host canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.contour-host::after {
  /* soft vignette so type always has ground to sit on */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(108% 78% at 24% 44%, rgba(247,245,242,.94) 0%, rgba(247,245,242,.66) 36%, rgba(247,245,242,.06) 72%);
}
.band-deep .contour-host::after,
.site-footer .contour-host::after {
  background: radial-gradient(112% 84% at 30% 46%, rgba(9,23,45,.94) 0%, rgba(9,23,45,.74) 40%, rgba(9,23,45,.16) 78%);
}
.hero > .wrap, section > .wrap, .site-footer > .wrap { position: relative; z-index: 2; }

/* Sounding marks: sparse tiny depth figures, the way a chart is annotated. */
.soundings { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.soundings b {
  position: absolute; font-family: var(--mono); font-weight: 400;
  font-size: .53rem; letter-spacing: .06em; color: var(--muted-2); opacity: .5;
}
.band-deep .soundings b { color: var(--on-deep-mute); opacity: .34; }
/* on a narrow screen the annotations land on top of the headline, so they go */
@media (max-width: 900px) { .soundings { display: none; } }

/* ==========================================================================
   4. MICRO TYPE
   ========================================================================== */

.eyebrow {
  font-family: var(--mono); font-size: .595rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--signal-text);
  margin: 0 0 18px; display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--signal-text); flex: none; }
.eyebrow.center { justify-content: center; }
.band-deep .eyebrow { color: var(--signal-on-deep); }
.band-deep .eyebrow::before { background: var(--signal-on-deep); }

.lbl { font-family: var(--mono); font-size: .6rem; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); margin: 0; }
.section-head { margin-bottom: 34px; }
.section-head.center { text-align: center; }
.section-head p.intro { color: var(--ink-2); max-width: var(--measure); margin-top: 16px; font-size: 1.04rem; }
.band-deep .section-head p.intro { color: var(--on-deep-mute); }
.section-head.center p.intro { margin-left: auto; margin-right: auto; }
.note { font-family: var(--mono); font-size: .655rem; line-height: 1.7; letter-spacing: .015em; color: var(--muted-2); max-width: 78ch; margin-top: 22px; }
.band-deep .note { color: var(--on-deep-mute); }
.note a { color: inherit; }

/* ==========================================================================
   5. HEADER
   ========================================================================== */

.site-header { position: sticky; top: 0; z-index: 150; background: rgba(247,245,242,.9); backdrop-filter: saturate(150%) blur(9px); border-bottom: 1px solid var(--line-ink); }
.site-header.scrolled { box-shadow: 0 1px 0 rgba(9,23,45,.10); }
.nav { max-width: var(--maxw); margin: 0 auto; padding: 15px clamp(20px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; }
.brand { display: flex; align-items: baseline; gap: 11px; text-decoration: none; }
.brand-name { font-family: var(--mono); font-weight: 500; font-size: .93rem; letter-spacing: .14em; }
.brand-sub  { font-family: var(--mono); font-size: .615rem; letter-spacing: .18em; color: var(--muted); }
.nav-links { list-style: none; display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; }
.nav-links a { font-family: var(--mono); font-size: .625rem; letter-spacing: .155em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; transition: color .18s, border-color .18s; }
.nav-links a:hover, .nav-links a.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.nav-links .nav-cta { color: var(--paper); background: var(--ink); border: 1px solid var(--ink); padding: 8px 15px; }
.nav-links .nav-cta:hover { background: var(--signal-text); border-color: var(--signal-text); color: var(--paper); }
.nav-toggle { display: none; font-family: var(--mono); font-size: .64rem; letter-spacing: .15em; text-transform: uppercase; background: none; border: 1px solid var(--line-ink); padding: 8px 13px; cursor: pointer; color: var(--ink); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line-ink); display: none; }
  .nav[data-open="true"] .nav-links { display: flex; }
  .nav-links li { border-top: 1px solid var(--line-soft); }
  .nav-links a { display: block; padding: 15px clamp(20px, 4vw, 48px); border-bottom: 0; }
  .nav-links .nav-cta { background: none; border: 0; color: var(--signal-text); }
  .brand-sub { display: none; }
}

/* ==========================================================================
   6. HERO  ::  the surface
   ========================================================================== */

.hero { padding: clamp(72px, 10vw, 128px) 0 0; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 5vw, 74px); align-items: start; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } }

h1 .sub { display: block; color: var(--muted); margin-top: .18em; }
.lede { font-size: 1.1rem; line-height: 1.6; color: var(--ink-2); max-width: 54ch; margin-top: 28px; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 36px; }

.btn { display: inline-block; font-family: var(--mono); font-size: .67rem; letter-spacing: .155em; text-transform: uppercase; padding: 14px 25px; text-decoration: none; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); transition: background .18s, border-color .18s, color .18s; cursor: pointer; }
.btn:hover { background: var(--signal-text); border-color: var(--signal-text); }
.btn-ghost { background: none; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.band-deep .btn { background: var(--on-deep); border-color: var(--on-deep); color: var(--deep); }
.band-deep .btn:hover { background: var(--signal-on-deep); border-color: var(--signal-on-deep); color: var(--deep); }
.band-deep .btn-ghost { background: none; color: var(--on-deep); }
.band-deep .btn-ghost:hover { background: var(--on-deep); color: var(--deep); }

.arrow-link { font-family: var(--mono); font-size: .67rem; letter-spacing: .155em; text-transform: uppercase; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: border-color .18s, color .18s; }
.arrow-link::after { content: " \2192"; }
.arrow-link:hover { color: var(--signal-text); border-bottom-color: var(--signal-text); }
.band-deep .arrow-link { color: var(--on-deep); border-bottom-color: var(--line-deep); }
.band-deep .arrow-link:hover { color: var(--signal-on-deep); border-bottom-color: var(--signal-on-deep); }

.provenance { font-family: var(--mono); font-size: .68rem; line-height: 1.75; color: var(--muted); max-width: 74ch; margin: clamp(52px, 6vw, 82px) 0 0; padding: 18px 0 clamp(52px, 6vw, 78px); border-top: 1px solid var(--line); }

/* ---- the sounding card: hero-right instrument ---- */
.sounder { border: 1px solid var(--line-ink); background: var(--paper-2); }
.sounder .cap { display: flex; justify-content: space-between; gap: 14px; font-family: var(--mono); font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); padding: 11px 16px; border-bottom: 1px solid var(--line-ink); }
.sounder .cap span:last-child { color: var(--signal-text); }
.sound-blend { padding: 22px 16px 18px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.sound-blend .n { font-family: var(--mono); font-size: clamp(2.6rem, 6vw, 3.5rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.sound-blend .n small { font-size: .38em; letter-spacing: 0; margin-left: 2px; color: var(--muted); }
.sound-rows { padding: 8px 16px 18px; }
.mrow { display: grid; grid-template-columns: 22px minmax(0,1fr) minmax(96px, 1.35fr) 46px; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dotted var(--line); }
.mrow:last-of-type { border-bottom: 0; }
.mrow .i  { font-family: var(--mono); font-size: .58rem; color: var(--muted-2); }
.mrow .nm { font-size: .8rem; color: var(--ink-2); line-height: 1.32; }
.mrow .track { position: relative; height: 9px; background: repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 100%) 0 0 / 12.5% 100%; border-bottom: 1px solid var(--line); }
.mrow .track i { position: absolute; top: 1px; bottom: 1px; left: 25%; width: 0; display: block; transition: width .95s var(--ease); }
.is-visible .mrow .track i.gain { width: var(--w); }
.is-visible .mrow .track i.loss { width: var(--w); left: auto; right: 75%; }
.mrow .track i.gain { background: var(--ink); }
.mrow .track i.loss { background: var(--signal); }
.mrow .v { font-family: var(--mono); font-size: .68rem; text-align: right; }
.mrow .v.neg { color: var(--signal-text); }
.sound-scale { position: relative; height: 15px; margin-top: 8px; }
.sound-scale span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--mono); font-size: .53rem; color: var(--muted-2); }
.sounder .foot { font-family: var(--mono); font-size: .625rem; line-height: 1.68; color: var(--muted-2); padding: 13px 16px; border-top: 1px solid var(--line-ink); background: var(--paper); }

/* ==========================================================================
   7. MANDATE STRIP  ::  the dark ruler
   ========================================================================== */

.mandate { background: var(--ink); color: var(--paper); padding: 0; }
.mandate .row { display: grid; grid-template-columns: repeat(5, 1fr); }
.mandate .cell { padding: 26px clamp(14px, 2vw, 26px); border-right: 1px solid rgba(234,229,219,.18); }
.mandate .cell:last-child { border-right: 0; }
.mandate .l { display: block; font-family: var(--mono); font-size: .565rem; letter-spacing: .19em; text-transform: uppercase; color: var(--on-deep-mute); margin-bottom: 9px; }
.mandate .n { display: block; font-family: var(--mono); font-size: clamp(.92rem, 1.5vw, 1.14rem); letter-spacing: -.01em; }
.mandate .n.sm { font-size: clamp(.72rem, 1.1vw, .84rem); letter-spacing: .04em; }
@media (max-width: 900px) {
  .mandate .row { grid-template-columns: repeat(2, 1fr); }
  .mandate .cell { border-bottom: 1px solid rgba(234,229,219,.18); }
  .mandate .cell:nth-child(2n) { border-right: 0; }
  .mandate .cell:last-child { grid-column: 1 / -1; border-bottom: 0; }
}

/* ==========================================================================
   8. LAYOUT PRIMITIVES
   ========================================================================== */

.two-col { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 28px; } }
.two-col .aside .intro { font-size: 1.1rem; line-height: 1.55; color: var(--ink); }
.two-col .main p { max-width: var(--measure); color: var(--ink-2); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.5vw, 62px); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 44px; } }

/* ---- spec table ---- */
.spec { border-top: 1px solid var(--line-ink); }
.spec .r { display: grid; grid-template-columns: minmax(140px, 210px) 1fr; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.spec .k { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.spec .v { color: var(--ink-2); font-size: .96rem; }
@media (max-width: 620px) { .spec .r { grid-template-columns: 1fr; gap: 5px; } }

/* ==========================================================================
   9. THE LADDER  ::  depth tiers
   ========================================================================== */

.ladder { margin-top: 12px; }
.lrow { display: grid; grid-template-columns: minmax(150px, 230px) 1fr 92px; align-items: center; gap: clamp(14px, 2.5vw, 30px); padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.lrow:first-child { border-top: 1px solid var(--line-ink); }
.lrow .lk { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.lrow .lk em { display: block; font-style: normal; font-size: .58rem; letter-spacing: .17em; color: var(--signal-text); margin-top: 5px; }
.lrow .lbar { position: relative; height: 16px; background: repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 100%) 0 0 / 5% 100%; }
.lrow .lbar i { position: absolute; top: 0; bottom: 0; left: var(--a); width: 0; background: var(--muted-2); transition: width 1s var(--ease); }
.is-visible .lrow .lbar i { width: var(--w); }
.lrow.us .lbar i { background: var(--signal); }
.lrow.us .lk { color: var(--ink); }
.lrow .lv { font-family: var(--mono); font-size: .72rem; text-align: right; color: var(--ink-2); }
.lrow.us .lv { color: var(--signal-text); }
/* the axis reuses the ladder grid so it can never drift out of register */
.lrow.axis { padding: 6px 0 0; border-bottom: 0; }
.lrow.axis .lbar { background: none; height: 16px; }
.lrow.axis .lbar span { position: absolute; top: 2px; transform: translateX(-50%); font-family: var(--mono); font-size: .55rem; color: var(--muted-2); }
@media (max-width: 760px) {
  .lrow { grid-template-columns: 1fr 76px; grid-template-areas: "k v" "b b"; row-gap: 9px; }
  .lrow .lk { grid-area: k; } .lrow .lv { grid-area: v; } .lrow .lbar { grid-area: b; }
}

/* ==========================================================================
   10. THE HUNDRED GRID  ::  ownership window
   ========================================================================== */

.grid100 { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; max-width: 460px; }
.grid100 i { display: block; aspect-ratio: 1; background: #cfc4b1; }
.grid100 i.on { background: var(--ink-2); }
.gkey { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-family: var(--mono); font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.gkey span { display: flex; align-items: center; gap: 8px; }
.gkey b { width: 9px; height: 9px; background: var(--ink-2); display: block; }
.gkey b.off { background: #cfc4b1; }
.statline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; border-top: 1px solid var(--line-ink); padding-top: 20px; }
.statline .sn { display: block; font-family: var(--mono); font-size: clamp(1.05rem, 2vw, 1.4rem); letter-spacing: -.02em; }
.statline .sl { display: block; font-size: .76rem; line-height: 1.45; color: var(--muted); margin-top: 7px; }
@media (max-width: 620px) { .statline { grid-template-columns: 1fr; gap: 16px; } }

/* ==========================================================================
   11. THE TWO DOORS  ::  deep band
   ========================================================================== */

.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-deep); border: 1px solid var(--line-deep); margin-top: 40px; }
@media (max-width: 900px) { .doors { grid-template-columns: 1fr; } }
.door { background: var(--deep-2); padding: clamp(26px, 3.4vw, 42px); position: relative; }
.door .dn { font-family: var(--mono); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--signal-on-deep); display: block; margin-bottom: 18px; }
.door h3 { font-size: 1.32rem; letter-spacing: -.02em; margin-bottom: 14px; }
.door p { font-size: .93rem; }
.door ul { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line-deep); }
.door li { font-family: var(--mono); font-size: .68rem; letter-spacing: .05em; color: var(--on-deep-mute); padding: 10px 0 10px 20px; border-bottom: 1px solid var(--line-deep); position: relative; }
.door li::before { content: ""; position: absolute; left: 0; top: 17px; width: 7px; height: 1px; background: var(--signal-on-deep); }
.door .go { margin-top: 26px; display: block; }
.engine {
  margin-top: 44px; border: 1px solid var(--line-deep); background: var(--deep-3);
  padding: clamp(22px, 3vw, 34px); display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
}
@media (max-width: 700px) { .engine { grid-template-columns: 1fr; } }
.engine .tag { font-family: var(--mono); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--signal-on-deep); border: 1px solid var(--signal-on-deep); padding: 8px 12px; white-space: nowrap; }
.engine p { margin: 0; color: var(--on-deep); font-size: 1rem; }

/* ==========================================================================
   12. ENUMERATED ITEMS, PHASES, CONVICTIONS
   ========================================================================== */

.enum { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line-ink); }
@media (max-width: 820px) { .enum { grid-template-columns: 1fr; } }
.enum .item { background: var(--paper); padding: clamp(24px, 3vw, 36px); }
.band-shoal .enum .item { background: var(--shoal); }
.band-shoal .contour-host::after { background: radial-gradient(108% 78% at 30% 46%, rgba(237,229,217,.94) 0%, rgba(237,229,217,.7) 38%, rgba(237,229,217,.1) 74%); }
.enum .idx { font-family: var(--mono); font-size: .6rem; letter-spacing: .19em; color: var(--signal-text); display: block; margin-bottom: 16px; }
.enum h3 { margin-bottom: 11px; font-size: 1.12rem; }
.enum p { color: var(--ink-2); font-size: .93rem; margin: 0; }

.phases { border-top: 1px solid var(--line-ink); }
.phase { display: grid; grid-template-columns: minmax(160px, 230px) 1fr; gap: clamp(18px, 3vw, 44px); padding: 26px 0; border-bottom: 1px solid var(--line-soft); }
@media (max-width: 760px) { .phase { grid-template-columns: 1fr; gap: 12px; } }
.phase .when { font-family: var(--mono); font-size: .63rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: flex; align-items: baseline; gap: 12px; }
.phase .when .step-no { color: var(--signal-text); }
.phase h3 { margin-bottom: 8px; }
.phase p { margin: 0; color: var(--ink-2); font-size: .93rem; max-width: 66ch; }

.why { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
@media (max-width: 820px) { .why { grid-template-columns: 1fr; gap: 34px; } }
.why .w { border-top: 1px solid var(--line-ink); padding-top: 20px; }
.why .wn { font-family: var(--mono); font-size: .6rem; letter-spacing: .19em; color: var(--signal-text); display: block; margin-bottom: 14px; }
.why h3 { font-size: 1.1rem; margin-bottom: 10px; line-height: 1.28; }
.why p { color: var(--ink-2); font-size: .93rem; margin: 0; }

/* ==========================================================================
   13. TEAM
   ========================================================================== */

.team { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
@media (max-width: 760px) { .team { grid-template-columns: 1fr; gap: 34px; } }
.member { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start; border-top: 1px solid var(--line-ink); padding-top: 24px; }
.headshot { width: 96px; height: 96px; object-fit: cover; filter: grayscale(1) contrast(1.06); border: 1px solid var(--line); }
.member h3 { margin-bottom: 4px; }
.member .role { font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--signal-text); margin: 0 0 12px; }
.member p { color: var(--ink-2); font-size: .91rem; margin: 0; }
@media (max-width: 460px) { .member { grid-template-columns: 1fr; } }

/* ==========================================================================
   14. FORMS
   ========================================================================== */

.contact .col h3 { font-size: 1.22rem; margin-bottom: 10px; }
.contact .col > p { color: var(--ink-2); font-size: .95rem; max-width: 46ch; }
.field { margin-bottom: 15px; }
.field label { display: block; font-family: var(--mono); font-size: .585rem; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: .95rem; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line); padding: 11px 13px; border-radius: 0;
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--signal); outline-offset: -1px; border-color: var(--signal); }
.form-note { font-family: var(--mono); font-size: .615rem; line-height: 1.65; color: var(--muted-2); margin-top: 14px; }
.hp { position: absolute; left: -9999px; }

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.site-footer { background: var(--deep); color: var(--on-deep-mute); padding: clamp(56px, 6vw, 84px) 0 34px; position: relative; overflow: hidden; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 40px; border-bottom: 1px solid var(--line-deep); }
@media (max-width: 820px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
.logo-lockup { width: 148px; height: auto; }
.motto { font-family: var(--mono); font-size: .68rem; letter-spacing: .17em; text-transform: uppercase; color: var(--signal-on-deep); margin: 18px 0 0; }
.footer-col h4 { font-family: var(--mono); font-size: .585rem; letter-spacing: .19em; text-transform: uppercase; color: var(--on-deep); margin: 0 0 16px; font-weight: 500; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; font-size: .85rem; }
.footer-col a { color: var(--on-deep-mute); text-decoration: none; border-bottom: 1px solid transparent; }
.footer-col a:hover { color: var(--on-deep); border-bottom-color: var(--line-deep); }
.footer-bottom { padding-top: 26px; }
.footer-bottom p { font-size: .705rem; line-height: 1.72; color: #8791a0; max-width: 108ch; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 14px; }
.footer-legal-links a { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-deep-mute); text-decoration: none; }
.footer-legal-links a:hover { color: var(--signal-on-deep); }

/* ==========================================================================
   16. REVEAL  ::  scoped to .js so the page is complete without scripting
   ========================================================================== */

.js [data-reveal] { opacity: 0; transform: translateY(16px); }
.js [data-reveal].is-visible { opacity: 1; transform: none; transition: opacity .72s var(--ease) var(--reveal-delay, 0ms), transform .72s var(--ease) var(--reveal-delay, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Band blocks in the mandate section (Sounding 08). */
.two-col .aside h3.band-name { font-size: clamp(1.35rem, 2.1vw, 1.75rem); letter-spacing: -.02em; margin: 6px 0 14px; }
.two-col.band-gap { margin-top: clamp(36px, 5vw, 62px); padding-top: clamp(36px, 5vw, 62px); border-top: 1px solid var(--line-soft); }