/* CTS site.

   Structure is the Threshold: a clearance profile you scroll through, which
   opens into the page and changes the axis of travel. Palette is the paper
   half of the brand. Built for risk managers and security directors, so the
   motion is precise rather than playful: long eases, hairlines, no bounce
   where bounce would read as marketing. */

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

/* ======================================================= act one: the gate */
.track { height: 400svh; position: relative; }
.stage { position: sticky; top: 0; height: 100svh; overflow: clip; background: var(--desk-2); }

.approach {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(92% 72% at 50% 44%, #ffffff 0%, var(--desk) 48%, var(--desk-2) 100%);
}

/* Once you are through the gate the approach is finished, but the card is only
   faded to opacity 0, and opacity does not remove an element from hit-testing.
   It stayed on top of the hero and swallowed clicks on the CTAs. Nothing in the
   approach is interactive, so it stops taking pointer events once inside.
   Reinstated automatically if you scroll back up, because is-inside is a pure
   function of scroll position. */
body.is-inside .approach { pointer-events: none; }

/* Hairline gates. They ride above the opening view so you watch them pass. */
.frames { position: absolute; inset: 0; display: grid; place-items: center; z-index: 7; pointer-events: none; }
.gframe {
  position: absolute;
  width: min(580px, 86vw);
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(19, 26, 44, .13);
  border-radius: 18px;
  opacity: 0;
  will-change: transform, opacity;
}
.gframe::before, .gframe::after {
  content: ''; position: absolute;
  width: 26px; height: 26px;
  border: 1px solid var(--gold); opacity: .65;
}
.gframe::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; border-radius: 18px 0 0 0; }
.gframe::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-radius: 0 0 18px 0; }

/* The capability profile. */
.card {
  position: relative; z-index: 6;
  width: min(580px, 86vw);
  padding: 26px clamp(20px, 3.4vw, 34px) 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 1px 2px rgba(19, 26, 44, .06), 0 28px 70px rgba(19, 26, 44, .13);
  will-change: transform, opacity;
  overflow: hidden;
}
/* The lockup at the head of the entry card. A first-time visitor should know
   whose site this is before reading a single row, so the brand sits above the
   credentials rather than only in the small print at the foot. It lives inside
   .card deliberately: the card is scaled and faded by the scroll handler, so
   anything inside it inherits that animation instead of floating over the
   opening view the way .vow and .enter have to be driven separately. */
.card-brand { display: flex; justify-content: center; padding: 4px 0 22px; }
.entry-lockup { gap: clamp(10px, 1.4vw, 16px); }
.entry-lockup .lockup-mark { width: clamp(38px, 5vw, 52px); }
.entry-lockup .lockup-cts { font-size: clamp(40px, 5.4vw, 56px); }
.entry-lockup .lockup-words { font-size: clamp(9.5px, 1.05vw, 12px); }
.entry-lockup .lockup-type { gap: clamp(8px, 1vw, 12px); }

.card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.card-ttl {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink);
}
.card-stat {
  font-family: var(--f-display); font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .5s var(--ease);
}
.card-stat::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; animation: blip 1.6s var(--ease) infinite;
}
@keyframes blip { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.card-stat.cleared { color: var(--gold-deep); }
.card-stat.cleared::before { animation: none; opacity: 1; box-shadow: 0 0 0 3px rgba(190, 150, 72, .22); }

.card-rows { margin: 0; padding: 4px 0 0; }
.crow {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: baseline; gap: 0 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.crow dt {
  font-family: var(--f-display); font-weight: 500; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.crow dd {
  margin: 0; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(14px, 1.4vw, 17px); letter-spacing: .04em; color: var(--navy);
}
.crow .chk {
  font-family: var(--f-display); font-weight: 600; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 3px 9px;
  transition: color .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.crow.ok .chk { color: #fff; background: var(--gold-deep); border-color: var(--gold-deep); }

.card-foot { display: flex; align-items: center; gap: 10px; padding-top: 16px; }
.card-mark { width: 18px; color: var(--gold); flex: none; display: block; }
.card-mark svg { display: block; }
.card-legal {
  font-family: var(--f-display); font-weight: 500; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.card-legal i { font-style: normal; text-transform: none; letter-spacing: .04em; }

/* The line you pass through. */
.vow {
  position: absolute; z-index: 8; left: 50%; top: 50%; margin: 0;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(16px, 1.9vw, 24px);
  text-transform: uppercase; letter-spacing: .3em;
  color: var(--gold-deep);
  white-space: nowrap; opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  text-shadow: 0 0 24px rgba(255, 255, 255, .95);
  pointer-events: none;
}
.enter {
  position: absolute; z-index: 8; bottom: clamp(40px, 7vh, 72px); margin: 0;
  display: flex; align-items: center; gap: 16px;
  font-family: var(--f-display); font-weight: 600; font-size: clamp(13px, 1.5vw, 17px);
  letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
  transition: opacity .5s var(--ease);
}
.enter-bar {
  width: 72px; height: 1px; background: currentColor;
  transform-origin: left; animation: hint 2.6s var(--ease) infinite;
}
@keyframes hint {
  0%, 100% { transform: scaleX(.3); opacity: .4; }
  50%      { transform: scaleX(1);  opacity: 1; }
}

/* The doorway. */
.window {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  background: radial-gradient(110% 86% at 50% 6%, #ffffff 0%, var(--desk) 56%, var(--desk-2) 100%);
  clip-path: inset(50% 50% 50% 50% round 18px);
  will-change: clip-path;
  pointer-events: none;
}
.window.open { pointer-events: auto; }
.win-bg { position: absolute; inset: 0; pointer-events: none; }
.win-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(19, 26, 44, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 26, 44, .04) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(76% 66% at 50% 42%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(76% 66% at 50% 42%, #000, transparent 76%);
}
.win-in {
  position: relative; text-align: center;
  padding-inline: var(--gutter); max-width: 980px;
  will-change: transform, opacity;
}
.win-title {
  /* One line. The headline measures 8.185x its font-size and .win-in gives it
     836px of content at desktop, so 100px is the largest that still fits.
     Deliberately NOT white-space:nowrap: if Barlow Condensed fails to load the
     wider Arial fallback should wrap rather than overflow the page. */
  font-size: clamp(44px, 7.6vw, 100px);
  line-height: .9; margin: 16px 0 0;
}
.win-title span:last-child { color: var(--gold-deep); }
.win-lede {
  margin: 22px auto 0; max-width: 62ch;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 400; color: var(--ink-2);
}
.win-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }

/* ==================================================================== chrome */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  height: var(--bar-h);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line);
  translate: 0 -100%; opacity: 0;
  transition: translate .7s var(--ease-out), opacity .5s var(--ease);
}
body.is-inside .topbar { translate: 0; opacity: 1; }
.topbar-in {
  height: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 18px;
}
.topbar-brand { display: grid; gap: 3px; justify-items: start; }
/* Licence and ownership belong next to the name, not only in the footer:
   this audience checks them before they read anything else. */
.topbar-cred {
  font-family: var(--f-display); font-weight: 600;
  font-size: 9px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.topbar-cred .dot { color: var(--gold); opacity: 1; margin-inline: .25em; }
.topbar .lockup-mark { width: 22px; }
.topbar .lockup-cts { font-size: 24px; }
.topbar .lockup-words { font-size: 7.5px; }

.topnav { margin-left: auto; display: flex; gap: 1px; }
.tn {
  position: relative; text-decoration: none;
  font-family: var(--f-display); font-weight: 500; font-size: 13.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  padding: 9px 12px; border-radius: 999px;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.tn:hover { color: var(--navy); background: rgba(19, 26, 44, .05); }
.tn[aria-current='true'] { color: var(--gold-deep); }

.cmdbtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--line-2); border-radius: 999px;
  padding: 6px 10px; cursor: pointer; color: var(--muted);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.cmdbtn:hover { border-color: var(--gold); color: var(--navy); }
.cmdbtn svg { width: 15px; display: block; }
.cmdbtn kbd {
  font-family: var(--f-display); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; color: var(--faint);
}
.topbar-cta {
  font-family: var(--f-display); font-weight: 600; font-size: 13px;
  letter-spacing: .15em; text-transform: uppercase; text-decoration: none;
  color: #fff; background: var(--navy);
  padding: 9px 18px; border-radius: 999px;
  transition: background .3s var(--ease), transform .3s var(--spring);
}
.topbar-cta:hover { background: var(--gold-deep); transform: translateY(-1px); }
.topbar-prog {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  width: 0%; background: var(--gold); transition: width .12s linear;
}
.burger { display: none; }

/* Axis readout: depth on the approach, descent once you are through. */
.axis {
  position: fixed; left: clamp(12px, 2vw, 26px); top: 50%;
  translate: 0 -50%; z-index: 65;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-display); font-weight: 600; font-size: 10.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--faint);
  transition: color .5s var(--ease);
}
.axis-lbl { writing-mode: vertical-rl; }
.axis-glyph { display: grid; gap: 4px; transition: rotate .9s var(--spring); }
.axis-glyph i { display: block; width: 14px; height: 1px; background: currentColor; opacity: .5; }
.axis-glyph i:nth-child(2) { width: 20px; opacity: .75; }
.axis-glyph i:nth-child(3) { width: 26px; opacity: 1; }
body.is-inside .axis-glyph { rotate: 90deg; }
body.is-inside .axis { color: var(--gold-deep); }

/* Section ladder. */
.ladder-nav {
  position: fixed; right: clamp(12px, 2vw, 26px); top: 50%;
  translate: 0 -50%; z-index: 65;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; pointer-events: none;
  transition: opacity .6s var(--ease) .15s;
}
body.is-inside .ladder-nav { opacity: 1; pointer-events: auto; }
.lad {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 7px 0; color: var(--faint); text-decoration: none;
}
.lad-txt {
  font-family: var(--f-display); font-weight: 600; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; translate: 8px 0;
  transition: opacity .34s var(--ease), translate .44s var(--spring), color .3s var(--ease);
}
.lad-dash {
  display: block; width: 18px; height: 1px; background: currentColor;
  transition: width .44s var(--spring), background .3s var(--ease);
}
.lad:hover, .lad:focus-visible { color: var(--ink); }
.lad:hover .lad-txt, .lad:focus-visible .lad-txt { opacity: 1; translate: 0; }
.lad[aria-current='true'] { color: var(--gold-deep); }
.lad[aria-current='true'] .lad-dash { width: 34px; background: var(--gold-deep); }
.lad[aria-current='true'] .lad-txt { opacity: 1; translate: 0; }

/* ===================================================================== bands */
main { position: relative; z-index: 6; }
.band { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.band-paper { background: var(--paper); }
.band-desk  { background: var(--desk); }
.band-wash  { background: var(--wash); }
.band-ink   { background: var(--navy); color: #cfd6e2; }
.band + .band { border-top: 1px solid var(--line); }

.band-title { font-size: clamp(32px, 5.2vw, 70px); max-width: 20ch; margin: 14px 0 0; }
.band-lede { font-size: clamp(16px, 1.3vw, 19px); max-width: 64ch; margin: 22px 0 0; color: var(--ink-2); }
.band-foot { margin: clamp(28px, 4vw, 48px) 0 0; font-style: italic; color: var(--muted); }

[data-reveal] > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease-out) var(--d, 0ms), transform .7s var(--ease-out) var(--d, 0ms);
}
[data-reveal].is-revealed > * { opacity: 1; transform: none; }

/* Stats strip. */
.proof {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  background: var(--line); gap: 1px;
  border-block: 1px solid var(--line);
}
.proof-i { background: var(--paper); padding: 24px clamp(18px, 2.4vw, 30px) 26px; transition: background .35s var(--ease); }
.proof-i:hover { background: var(--desk-2); }
.proof-v { font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); line-height: .9; color: var(--gold-deep); display: block; }
.proof-k { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); display: block; margin-top: 10px; }
.proof-d { font-size: 13.5px; line-height: 1.45; color: var(--muted); display: block; margin-top: 5px; }

/* Buttons. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  font-family: var(--f-display); font-weight: 600; font-size: 15px;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .28s var(--spring);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 17px 34px; font-size: 16px; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--gold-deep); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.band-ink .btn-primary { background: var(--gold); color: var(--navy); }
.band-ink .btn-primary:hover { background: var(--gold-hi); }

/* Pillars. */
.pillars { margin: clamp(34px, 5vw, 58px) 0 0; }
.pillar {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 8px 40px; padding-block: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--line);
}
.pillar:first-child { border-top: 0; }
.pillar-label {
  font-family: var(--f-display); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep);
  padding-top: .55em;
}
.pillar-body { margin: 0; color: var(--ink-2); }
.pillar-head { font-size: clamp(21px, 2.1vw, 30px); margin: 0 0 12px; }
.pillar-quote { margin: 18px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--gold); }
.pillar-quote p { font-style: italic; margin: 0 0 4px; color: var(--gold-deep); }
.pillar-quote cite {
  font-family: var(--f-display); font-style: normal; font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}

/* ================================================================== console */
.console {
  margin: clamp(32px, 4.5vw, 54px) 0 0;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper); overflow: hidden;
}
.console-tabs {
  position: relative; display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}
.ctab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 16px clamp(12px, 1.6vw, 22px) 15px;
  background: none; border: 0; border-right: 1px solid var(--line);
  cursor: pointer; text-align: left; color: var(--muted);
  transition: color .3s var(--ease), background .3s var(--ease);
}
.ctab:last-of-type { border-right: 0; }
.ctab:hover { background: var(--desk); color: var(--ink); }
.ctab-n { font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .16em; color: var(--gold-deep); }
.ctab-k {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.1;
}
.ctab[aria-selected='true'] { color: var(--navy); background: var(--desk); }
.ctab-marker {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  background: var(--gold-deep); width: 25%;
  transition: transform .5s var(--spring);
}

.console-panels { position: relative; }
.cpanel { padding: clamp(22px, 3vw, 34px) clamp(18px, 2.6vw, 34px); }
.cpanel[hidden] { display: none; }
.cpanel-claim {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(17px, 1.8vw, 23px);
  letter-spacing: .02em; color: var(--gold-deep); margin: 0 0 18px;
}
.cpanel-cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(20px, 2.6vw, 30px);
}
.cpanel-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 0 clamp(20px, 3vw, 44px);
}
.cpanel-list li {
  position: relative; padding: 11px 0 11px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px; line-height: 1.45; color: var(--ink-2);
}
.cpanel-list li::before {
  content: ''; position: absolute; left: 0; top: 1.05em;
  width: 7px; height: 7px; background: var(--gold);
}
.cpanel.is-live li { animation: liftin .45s var(--ease-out) both; animation-delay: calc(var(--j) * 38ms); }
@keyframes liftin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ====================================================================== why */
.reasons {
  margin: clamp(30px, 4vw, 48px) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.reason { background: var(--paper); padding: 22px clamp(18px, 2.2vw, 26px); }
.reason-k { font-size: clamp(16px, 1.5vw, 19px); margin: 0 0 8px; }
.reason-v { margin: 0; font-size: 15px; color: var(--ink-2); }

.floor {
  margin: clamp(30px, 4vw, 52px) 0 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  background: var(--wash);
  border: 1px solid #ece4d2; border-radius: 14px;
  padding: clamp(22px, 3vw, 36px);
}
.floor-head { font-size: clamp(20px, 2vw, 27px); margin: 0 0 12px; }
.floor-text p { color: var(--ink-2); }
.floor-quote { margin: 20px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--gold); }
.floor-quote p { margin: 0 0 4px; font-style: italic; font-size: 17px; color: var(--navy); }
.floor-quote cite {
  font-family: var(--f-display); font-style: normal; font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}

/* The chart. One measure, three jurisdictions, CTS as an annotation. */
.chart { margin: 0; }
.chart-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-2);
}
.chart-title { font-family: var(--f-display); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.chart-unit { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

.bars { display: grid; gap: 4px; margin-top: 16px; }
.bar-row {
  display: grid; grid-template-columns: minmax(96px, 34%) 1fr;
  align-items: center; gap: 14px;
  padding: 8px 6px; border-radius: 8px;
  transition: background .25s var(--ease);
  position: relative; cursor: default;
}
.bar-row:hover, .bar-row:focus-visible { background: rgba(19, 26, 44, .045); }
.bar-k { font-size: 13.5px; color: var(--ink-2); line-height: 1.25; }
.bar-track { position: relative; display: flex; align-items: center; gap: 10px; min-height: 22px; }
.bar-fill {
  height: 14px; border-radius: 0 4px 4px 0;
  background: var(--chart-bar);
  width: 0;
  transition: width .9s var(--ease-out);
}
.chart.is-live .bar-fill { width: var(--w); }
/* A zero bar is the whole argument, so it is drawn rather than left blank. */
.bar-fill.is-zero {
  width: 3px !important; min-width: 3px;
  background: repeating-linear-gradient(90deg, var(--chart-bar) 0 1px, transparent 1px 3px);
  border-radius: 0;
}
.bar-v { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--navy); }
.bar-row[data-v='0'] .bar-v { color: var(--chart-accent); }

.chart-note {
  display: flex; align-items: center; gap: 9px;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line-2);
  font-family: var(--f-display); font-weight: 600; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--chart-accent);
}
.chart-flag { width: 14px; height: 3px; background: var(--chart-accent); border-radius: 2px; flex: none; }
.chart-src { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* Tooltip for the bars. */
.tip {
  position: fixed; z-index: 120; pointer-events: none;
  background: var(--navy); color: #fff;
  font-size: 12.5px; line-height: 1.4;
  padding: 7px 10px; border-radius: 7px;
  box-shadow: 0 10px 30px rgba(19, 26, 44, .3);
  opacity: 0; transition: opacity .16s var(--ease);
  max-width: 240px;
}
.tip.on { opacity: 1; }
.tip b { font-family: var(--f-display); letter-spacing: .08em; text-transform: uppercase; font-size: 11px; display: block; color: var(--gold-hi); }

/* =================================================================== values */
.values { list-style: none; margin: clamp(32px, 5vw, 54px) 0 0; padding: 0; }
/* Three columns on one baseline: index, value, and the line that says what it
   looks like in action. The third arrives on rollover and then stays put, so
   running down the list builds a complete page rather than a peep-show. */
.value {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 4px 22px;
  align-items: baseline;
  padding: 20px 12px; border-top: 1px solid var(--line);
  transition: background .4s var(--ease), padding-left .45s var(--spring);
}
.value:last-child { border-bottom: 1px solid var(--line); }
.value:hover, .value:focus-within { background: var(--paper); padding-left: 26px; }
.value-n {
  grid-column: 1; grid-row: 1;
  font-family: var(--f-display); font-weight: 700; font-size: 13px;
  letter-spacing: .12em; color: var(--gold);
}
.value-k { grid-column: 2; grid-row: 1; font-size: clamp(26px, 3.4vw, 42px); }

.value-v {
  grid-column: 3; grid-row: 1;
  margin: 0;
  /* Sized against the heading rather than the body so the pair reads as one
     line, and capped so a long value never crowds the column. */
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.35;
  color: var(--ink-2);
  /* Flex, so the dash is laid out rather than absolutely positioned: its gap
     and its offset from the baseline are then fixed at every viewport. */
  display: flex;
  align-items: baseline;
  gap: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .45s var(--ease-out), transform .55s var(--ease-out);
}
/* The rule draws out of the heading and the text follows it in. Sitting it
   a third of an em above the baseline centres it on the lower-case height,
   which is where the eye expects a dash between two words. */
.value-v::before {
  content: '';
  flex: none;
  width: 0;
  height: 1px;
  margin-right: 0;
  background: var(--gold);
  transform: translateY(-.34em);
  transition: width .45s var(--ease-out), margin-right .45s var(--ease-out);
}
.value:hover .value-v,
.value:focus-within .value-v,
.value.seen .value-v { opacity: 1; transform: none; }
.value:hover .value-v::before,
.value:focus-within .value-v::before,
.value.seen .value-v::before { width: 18px; margin-right: 14px; }

/* ===================================================================== team */
.callout {
  margin: clamp(26px, 4vw, 42px) 0 0; padding: 20px 24px;
  background: var(--desk); border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0; color: var(--ink-2);
}
.callout p { margin: 0; }
.callout b { color: var(--navy); }

.creds, .split {
  margin: clamp(26px, 4vw, 42px) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: clamp(22px, 4vw, 52px);
}
.cred-head {
  font-family: var(--f-display); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 6px;
}
.cred-list { list-style: none; margin: 0; padding: 0; }
.cred-list li {
  position: relative; padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px; line-height: 1.45; color: var(--ink-2);
}
.cred-list li::before {
  content: ''; position: absolute; left: 0; top: 1.05em;
  width: 7px; height: 7px; background: var(--gold);
}

.founder {
  margin: clamp(26px, 4vw, 42px) 0 0; padding: clamp(20px, 2.6vw, 30px);
  background: var(--desk); border-radius: 14px;
  /* Flex rather than a grid with a breakpoint: the portrait sits beside the
     text and drops above it on its own when there is no room for both. */
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: clamp(16px, 2.4vw, 30px);
}
.founder-photo {
  /* height:auto is required: the width/height attributes on the img are a
     presentational hint, and with a fixed height aspect-ratio is ignored and
     the box renders 150x560. */
  flex: none; width: clamp(104px, 12vw, 150px); height: auto;
  /* No aspect-ratio: the portrait takes the height of the text column beside
     it and object-fit crops the sides rather than squashing him. When the row
     wraps on a phone it is alone on its line, so it falls back to its natural
     square. */
  align-self: stretch; object-fit: cover;
  border-radius: 12px; display: block;
}
.founder-text { flex: 1 1 320px; min-width: 0; }
.founder-head { font-size: clamp(19px, 1.9vw, 26px); margin: 10px 0 12px; }
.founder-text p { color: var(--ink-2); }
.founder-bio { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.founder-bio b { color: var(--navy); }

.trusted { margin: 0; }
.trust {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.trust dt { font-size: 15.5px; color: var(--ink); }
.trust dd {
  margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); white-space: nowrap;
}

/* ===================================================================== join */
.roles {
  margin: clamp(26px, 4vw, 42px) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.role { background: var(--paper); border: 1px solid #ece4d2; border-radius: 12px; padding: 20px 22px; }
.role-k { font-size: clamp(17px, 1.6vw, 21px); margin: 0 0 8px; }
.role p { margin: 0; color: var(--ink-2); font-size: 15px; }

.ladder-head { margin: clamp(32px, 4.5vw, 52px) 0 0; font-size: clamp(19px, 1.9vw, 26px); }
.ladder-lede { margin: 10px 0 0; max-width: 60ch; color: var(--ink-2); }

.ladder { list-style: none; margin: clamp(20px, 2.6vw, 30px) 0 0; padding: 0; position: relative; }
.ladder::before {
  content: ''; position: absolute; left: 39px; top: 18px; bottom: 18px;
  width: 1px; background: var(--line-2);
}
.rung {
  position: relative; display: grid;
  grid-template-columns: 80px 1fr; gap: 18px; align-items: start;
  padding: 14px 12px; border-radius: 10px;
  transition: background .3s var(--ease), transform .4s var(--spring);
}
.rung:hover, .rung:focus-visible { background: var(--paper); transform: translateX(4px); }
.rung-tier {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 0; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--paper);
}
.rung-tier[data-tier='blue']  { color: #2f4a7a; border-color: #b9c7de; }
.rung-tier[data-tier='green'] { color: #2f6a4a; border-color: #b4d2c2; }
.rung-tier[data-tier='tan']   { color: #8f6f2f; border-color: #e0cda6; }
.rung-tier[data-tier='black'] { color: #fff; background: var(--navy); border-color: var(--navy); }
.rung-k { font-size: clamp(16px, 1.5vw, 20px); margin: 0 0 5px; }
.rung-v { margin: 0; font-size: 15px; color: var(--ink-2); }

.conditions { margin: clamp(30px, 4vw, 48px) 0 0; }
.conditions .btn { margin-top: 20px; }

/* ================================================================== contact */
.band-ink .band-title { color: #fff; }
.band-ink .band-lede { color: #b9c4d6; }
.band-ink .kicker { color: var(--gold-hi); }
.band-ink .kicker .idx { color: var(--gold); }

.contact-grid {
  margin: clamp(30px, 4vw, 50px) 0 0;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 56px); align-items: start;
}

.cform { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field { display: grid; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.cform label {
  font-family: var(--f-display); font-weight: 600; font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase; color: #b9c4d6;
}
.req { color: var(--gold); }
.cform input, .cform select, .cform textarea {
  /* 16px floor: anything smaller makes iOS zoom the page on focus. */
  font-family: var(--f-body); font-size: 16px;
  color: #fff; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px;
  padding: 12px 14px; width: 100%;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.cform textarea { resize: vertical; min-height: 120px; }
.cform select { appearance: none; cursor: pointer; }
.cform select option { color: #111; }
.cform input:focus, .cform select:focus, .cform textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(255, 255, 255, .1);
}
.cform input[aria-invalid='true'], .cform select[aria-invalid='true'], .cform textarea[aria-invalid='true'] {
  border-color: #e2857a;
}
.err { margin: 0; font-size: 12.5px; color: #f0a79d; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-note { margin: 0; font-size: 12.5px; color: #8f9db4; }
.btn-spin {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(19, 26, 44, .3); border-top-color: var(--navy);
  display: none; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cform.is-sending .btn-spin { display: block; }
.cform.is-sending button[type='submit'] { pointer-events: none; opacity: .75; }

.form-status {
  grid-column: 1 / -1; margin: 0; padding: 13px 16px; border-radius: 10px;
  font-size: 15px; border: 1px solid transparent;
}
.form-status.ok { background: rgba(190, 150, 72, .16); border-color: var(--gold); color: #f0e2c4; }
.form-status.bad { background: rgba(226, 133, 122, .14); border-color: #e2857a; color: #f6c9c2; }

.cside { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: clamp(20px, 2.6vw, 34px); }
.cside-person { display: grid; gap: 3px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.cside-name { font-family: var(--f-display); font-weight: 700; font-size: 23px; text-transform: uppercase; color: #fff; }
.cside-role { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi); }
.cside-lines { margin: 0; }
.cline { padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.cline dt { font-family: var(--f-display); font-weight: 600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: 4px; }
.cline dd { margin: 0; font-size: 15px; color: #e6eaf1; }
.cline a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* =================================================================== footer */
.foot { background: #0e1422; color: #8f9db4; padding-block: clamp(34px, 4.5vw, 56px); }
.foot-wrap { display: grid; gap: 10px; }
.foot .lockup-cts { color: var(--gold); }
.foot .lockup-words { color: #b9c4d6; }
.foot .lockup-rule { background: #39435c; }
.foot-tag { font-family: var(--f-display); font-weight: 600; font-size: clamp(13px, 1.1vw, 15px); letter-spacing: .26em; color: var(--gold); margin: 6px 0 0; }
.foot-values { font-family: var(--f-display); font-weight: 500; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; margin: 2px 0 0; }
.foot-meta { font-size: 12.5px; line-height: 1.7; margin: 10px 0 0; color: #8e9ab0; }
.foot-meta i { font-style: normal; }

/* ================================================================== palette */
.pal { position: fixed; inset: 0; z-index: 200; }
.pal[hidden] { display: none; }
.pal-scrim {
  position: absolute; inset: 0; background: rgba(19, 26, 44, .4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade .2s var(--ease) both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.pal-box {
  position: relative; width: min(640px, calc(100vw - 32px));
  margin: clamp(56px, 12vh, 130px) auto 0;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 36px 90px rgba(19, 26, 44, .3); overflow: hidden;
  animation: palin .4s var(--spring) both;
}
@keyframes palin { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
.pal-field { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.pal-ico { width: 18px; flex: none; color: var(--gold-deep); }
#pal-input { flex: 1; border: 0; outline: none; font-family: var(--f-body); font-size: 17px; padding: 17px 0; color: var(--ink); }
#pal-input::placeholder { color: var(--faint); }
.pal-esc { font-family: var(--f-display); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: var(--faint); border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 6px; }
.pal-list { list-style: none; margin: 0; padding: 8px; max-height: min(52vh, 420px); overflow-y: auto; }
.pal-i { display: flex; align-items: center; gap: 14px; padding: 10px 13px; border-radius: 9px; cursor: pointer; color: var(--ink-2); }
.pal-i[aria-selected='true'] { background: rgba(190, 150, 72, .16); color: var(--navy); }
.pal-i-n { font-family: var(--f-display); font-weight: 700; font-size: 11.5px; letter-spacing: .12em; color: var(--gold-deep); width: 24px; flex: none; }
.pal-i-t { font-family: var(--f-display); font-weight: 600; font-size: 15.5px; letter-spacing: .06em; text-transform: uppercase; display: block; }
.pal-i-d { font-size: 12.5px; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-i-tag { margin-left: auto; font-family: var(--f-display); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); flex: none; }
.pal-empty { padding: 24px 14px; text-align: center; color: var(--faint); font-size: 14px; }

/* =================================================================== narrow */
@media (max-width: 1080px) {
  .floor { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .cside { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); padding-left: 0; padding-top: 22px; }
}

@media (max-width: 900px) {
  .axis, .ladder-nav, .topnav, .cmdbtn { display: none; }
  .topbar-cta { margin-left: auto; }
  .burger {
    display: block;
    position: relative; flex: none;
    width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0;
  }
  .burger span {
    position: absolute; left: 12px; top: 50%;
    width: 20px; height: 1.5px; background: currentColor;
    transition: translate .4s var(--spring), rotate .4s var(--spring);
  }
  .burger span:first-of-type { translate: 0 -4px; }
  .burger span:last-of-type { translate: 0 4px; }
  .burger[aria-expanded='true'] span:first-of-type { translate: 0 0; rotate: 45deg; }
  .burger[aria-expanded='true'] span:last-of-type { translate: 0 0; rotate: -45deg; }
  /* The label does not fit beside the lockup and the CTA at 390px. */
  .burger em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sheet {
    position: fixed; inset: var(--bar-h) 0 auto 0; z-index: 68;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    padding: 6px var(--gutter) 18px;
    animation: sheetin .36s var(--ease-out) both;
    max-height: calc(100svh - var(--bar-h)); overflow-y: auto;
  }
  @keyframes sheetin { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0; } }
  .sheet[hidden] { display: none; }
  .sh { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
  .sh-n { font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; color: var(--gold-deep); }
  .sh-t { font-family: var(--f-display); font-weight: 600; font-size: 21px; letter-spacing: .05em; text-transform: uppercase; }

  .track { height: 320svh; }
  .console-tabs { grid-template-columns: repeat(2, 1fr); }
  .ctab { border-bottom: 1px solid var(--line); }
  .ctab-marker { display: none; }
  .pillar { grid-template-columns: 1fr; gap: 6px; }
  .pillar-label { padding-top: 0; }
  .value { grid-template-columns: 1fr; }
  .value-v { grid-column: 1; }
  .cform { grid-template-columns: 1fr; }
  .rung { grid-template-columns: 70px 1fr; gap: 14px; }
  .ladder::before { left: 35px; }
}

@media (max-width: 560px) {
  .bar-row { grid-template-columns: 1fr; gap: 4px; }
  .vow { font-size: 13px; letter-spacing: .18em; }
}

/* ===================================================== intro: the card build */
/* The capability profile assembles itself on load: the frame settles, a gold
   scan passes down it, and each row stamps in as the scan clears it. The
   scroll-driven verification that follows is a separate layer, so the two
   never fight. */
.js-anim .card { opacity: 0; }
.card.intro { animation: cardIn .85s var(--spring) both; }
/* Once .intro is removed the card falls back to these, which inline styles
   from the scroll layer can override. */
.card.built { opacity: 1; transform: none; }
@keyframes cardIn {
  from { opacity: 0; transform: scale(.955) translateY(10px); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.card-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 34%;
  pointer-events: none; opacity: 0; border-radius: 18px;
  background: linear-gradient(180deg,
    transparent 0%, rgba(190, 150, 72, .13) 55%, rgba(190, 150, 72, .38) 92%, transparent 100%);
}
.card.intro .card-scan { animation: scanDown 1.25s var(--ease) .45s both; }
@keyframes scanDown {
  0%   { opacity: 0; transform: translateY(-36%); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(300%); }
}

/* Header, rows and footer arrive behind the scan. */
.card.intro .card-head { animation: stamp .5s var(--ease-out) .3s both; }
.card.intro .crow      { animation: stamp .55s var(--ease-out) both; animation-delay: calc(.62s + var(--r) * .13s); }
.card.intro .card-foot { animation: stamp .5s var(--ease-out) 1.25s both; }
@keyframes stamp {
  from { opacity: 0; transform: translateY(7px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
.enter { opacity: 0; transition: opacity .6s var(--ease-out); }

/* ============================================== titles that reveal by line */
.band-title.is-split { display: grid; }
.tl { display: block; overflow: hidden; }
.tl > span {
  display: block;
  transform: translateY(104%);
  transition: transform .82s var(--ease-out);
  transition-delay: calc(var(--l, 0) * 90ms);
}
.is-revealed .tl > span { transform: none; }
/* The parent reveal already fades the block; keep titles opaque so the mask
   does the work rather than a double fade. */
[data-reveal] > .band-title.is-split { opacity: 1; transform: none; }

/* ======================================================= section 03 diagram */
.converge {
  margin: clamp(26px, 3.4vw, 42px) 0 0;
  padding: clamp(22px, 3vw, 34px) clamp(18px, 2.4vw, 30px) clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper);
  display: grid; justify-items: center; gap: 0;
  overflow: hidden;
}
.cv-row { display: flex; gap: clamp(8px, 1.4vw, 18px); flex-wrap: wrap; justify-content: center; }
.cv-card {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: clamp(96px, 12vw, 150px);
  padding: 12px 14px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--desk);
  font-family: var(--f-display); font-weight: 600; font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  opacity: 0; transform: translateY(-14px) rotate(var(--rot, 0deg));
  transition: opacity .5s var(--ease-out), transform .8s var(--spring), border-color .5s var(--ease), color .5s var(--ease);
  transition-delay: calc(var(--i) * 90ms);
}
.cv-card:nth-child(1) { --rot: -2.5deg; }
.cv-card:nth-child(2) { --rot: 1.5deg; }
.cv-card:nth-child(3) { --rot: -1deg; }
.cv-card:nth-child(4) { --rot: 2deg; }
.cv-card i { font-style: normal; }
.is-revealed .cv-card { opacity: 1; transform: translateY(0) rotate(0deg); }
/* Once converged they stop reading as four separate purchases. */
.is-revealed .cv-card { border-color: var(--gold); color: var(--ink); }

.cv-funnel {
  display: block; width: 2px; height: 0;
  background: linear-gradient(180deg, var(--line-2), var(--gold));
  margin: 14px 0 0;
  transition: height .7s var(--ease-out) .55s;
}
.is-revealed .cv-funnel { height: clamp(28px, 4vw, 46px); }

.cv-one {
  display: grid; justify-items: center; gap: 2px;
  margin-top: 12px; padding: 14px 26px;
  border-radius: 999px; background: var(--navy); color: #fff;
  opacity: 0; transform: scale(.9);
  transition: opacity .5s var(--ease-out) .9s, transform .7s var(--spring) .9s;
}
.is-revealed .cv-one { opacity: 1; transform: none; }
.cv-one b {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(15px, 1.5vw, 19px); letter-spacing: .12em; text-transform: uppercase;
}
.cv-one em {
  font-style: normal; font-family: var(--f-display); font-weight: 500;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi);
}

/* ============================================== chart and counters, livelier */
.bar-fill { transition: width .95s var(--ease-out); transition-delay: calc(var(--b, 0) * 170ms); }
.bar-row .bar-v { opacity: 0; transition: opacity .4s var(--ease) calc(.35s + var(--b, 0) * .17s); }
.chart.is-live .bar-row .bar-v { opacity: 1; }
.chart.is-live .bar-fill.is-zero { animation: zeroPulse 1s var(--ease) .9s 2; }
@keyframes zeroPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(160, 108, 0, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(160, 108, 0, .22); }
}
.chart-note { opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease) .95s, transform .6s var(--ease-out) .95s; }
.chart.is-live .chart-note { opacity: 1; transform: none; }

/* The gold row rule was removed: it overlapped each row's own border and
   animated on a different stagger, which read as the lines glitching. The
   per-row dash now carries that accent instead. */
.value { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .card { opacity: 1; }
  .tl > span { transform: none; }
  .cv-card, .cv-one { opacity: 1; transform: none; }
  .cv-funnel { height: 32px; }
  .enter { opacity: 1; }
  .bar-row .bar-v { opacity: 1; }
  .chart-note { opacity: 1; transform: none; }
}

/* ==================================================== section 01: the spine */
/* Vision, mission and niche are one standard in three parts, so they hang off
   a single drawn line. The same spine motif carries the Join ladder and the
   section 03 funnel, which is what makes those three sections feel related. */
.pillars { position: relative; padding-left: clamp(26px, 3vw, 36px); }
.pillars::before {
  content: '';
  position: absolute; left: 7px;
  top: clamp(26px, 3.2vw, 38px); bottom: clamp(26px, 3.2vw, 38px);
  width: 1px; background: var(--line-2);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.15s var(--ease-out) .15s;
}
.is-revealed .pillars::before { transform: scaleY(1); }

.pillar { position: relative; }
/* The node on the spine. Fills gold as its pillar reaches the reading line. */
.pillar::before {
  content: '';
  position: absolute;
  left: calc(2px - clamp(26px, 3vw, 36px));
  top: calc(clamp(22px, 3vw, 34px) + .62em);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line-2);
  transition: background .5s var(--ease), border-color .5s var(--ease),
              transform .55s var(--spring), box-shadow .5s var(--ease);
}
.pillar.lit::before {
  background: var(--gold); border-color: var(--gold);
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(190, 150, 72, .16);
}

/* The label slides in and draws its own hairline. */
.pillar-label { position: relative; opacity: 0; transform: translateX(-10px); }
.is-revealed .pillar-label {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease-out) calc(var(--p) * 140ms + 120ms),
              transform .7s var(--ease-out) calc(var(--p) * 140ms + 120ms);
}
.pillar-label::after {
  content: ''; position: absolute; left: 0; bottom: -7px;
  height: 1px; width: 0; background: var(--gold);
  transition: width .75s var(--ease-out) calc(var(--p) * 140ms + 320ms);
}
.is-revealed .pillar-label::after { width: 42px; }

/* The head reveals behind its mask, staggered per pillar. */
.pillar-head.is-split { display: grid; }
.pillar-head .tl > span { transition-delay: calc(var(--p, 0) * 140ms + 200ms); }

/* Body copy follows the head. */
.pillar-body p, .pillar-quote { opacity: 0; transform: translateY(10px); }
.is-revealed .pillar-body p, .is-revealed .pillar-quote {
  opacity: 1; transform: none;
  transition: opacity .65s var(--ease-out) calc(var(--p) * 140ms + 340ms),
              transform .65s var(--ease-out) calc(var(--p) * 140ms + 340ms);
}
/* The Seabee quote's gold rule draws down rather than appearing. */
.pillar-quote { border-left-color: transparent; }
.is-revealed .pillar-quote {
  border-left-color: var(--gold);
  transition: opacity .65s var(--ease-out) calc(var(--p) * 140ms + 340ms),
              transform .65s var(--ease-out) calc(var(--p) * 140ms + 340ms),
              border-left-color .7s var(--ease) calc(var(--p) * 140ms + 540ms);
}

@media (max-width: 900px) {
  .pillars { padding-left: 26px; }
  .pillar::before { left: -26px; top: calc(clamp(22px, 3vw, 34px) + .3em); }
}

@media (prefers-reduced-motion: reduce) {
  .pillars::before { transform: scaleY(1); }
  .pillar-label, .pillar-body p, .pillar-quote { opacity: 1; transform: none; }
  .pillar-label::after { width: 42px; }
  .pillar-quote { border-left-color: var(--gold); }
}

/* ======================================================= mobile refinements */
@media (max-width: 900px) {
  /* The bar has to hold a lockup, a CTA and a menu control inside 390px.
     Drop the three-line wordmark and tighten everything else. */
  .topbar-in { gap: 10px; }
  .topbar .lockup-type .lockup-words,
  .topbar .lockup-type .lockup-rule { display: none; }
  .topbar .lockup-cts { font-size: 24px; }
  .topbar .lockup { gap: 7px; }
  .topbar-brand { gap: 2px; }
  .topbar-cred { font-size: 8px; letter-spacing: .1em; }
  .topbar-cta {
    font-size: 12px; letter-spacing: .12em;
    padding: 0 16px; height: 44px;
    display: inline-flex; align-items: center;
  }

  /* Two by two reads better than three plus an orphan. */
  .cv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .cv-card { min-width: 0; }

  /* Contact details are links; give them a thumb-sized target. */
  .cline { padding: 10px 0; }
  .cline dd a { display: inline-block; padding: 7px 0; }
  .foot-wrap .lockup { padding: 6px 0; }

  /* The gate is the signature moment, but three full swipes before any
     content is too much on a phone. Two is enough to read the sequence. */
  .track { height: 240svh; }

  /* Blur is the most expensive thing on the page and the card is transformed
     every scroll frame. Drop it here; the card is opaque enough without it. */
  .card { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }

  .band { padding-block: clamp(52px, 11vw, 80px); }
  .band-title { font-size: clamp(29px, 8.4vw, 42px); }
  /* 350px of content at 390px wide, so 10.4vw keeps it on one line. */
  .win-title { font-size: clamp(26px, 10.4vw, 58px); }
}

/* The chart tooltip follows a pointer, which a finger is not. On touch the
   value and its note are already in the markup and read out by the label. */
@media (hover: none) {
  .tip { display: none; }
}

@media (max-width: 420px) {
  .cv-one { padding: 12px 18px; text-align: center; }
  .cv-one em { font-size: 9.5px; letter-spacing: .12em; }
  .rung { grid-template-columns: 62px 1fr; gap: 12px; padding: 12px 8px; }
  .ladder::before { left: 31px; }
  .rung-tier { font-size: 10.5px; letter-spacing: .12em; }
  .proof-i { padding: 20px 18px 22px; }
}

@media (max-width: 900px) {
  /* Remaining thumb targets: the home lockup and the contact links. */
  .topbar .lockup { min-height: 44px; align-items: center; }
  .cline dd a { padding: 11px 0; min-height: 44px; display: inline-flex; align-items: center; }
}


/* ===================================================== motion primitives */
/* The vocabulary the reference spells out: SlideUp, Stagger, FadeIn were
   already here. These add BlurIn, ScaleIn, Typewriter and a redaction wipe.
   Used where each earns its place, not everywhere. */

/* --- BlurIn: headlines resolve as they rise ----------------------------- */
/* Combined with the existing mask, so a line arrives and comes into focus
   rather than simply sliding. */
.tl > span {
  filter: blur(7px);
  transition: transform .82s var(--ease-out), filter .7s var(--ease-out);
  transition-delay: calc(var(--l, 0) * 90ms);
}
.is-revealed .tl > span { filter: blur(0); }

/* --- Word stagger: ledes arrive word by word ---------------------------- */
.w {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--w, 0) * 14ms + 80ms);
}
.is-revealed .w { opacity: 1; transform: none; }

/* --- ScaleIn: the proof tiles settle ------------------------------------ */
.proof-i {
  opacity: 0;
  transform: scale(.955);
  transition: opacity .55s var(--ease-out), transform .7s var(--spring),
              background .35s var(--ease);
  transition-delay: calc(var(--s, 0) * 90ms);
}
.proof.is-in .proof-i { opacity: 1; transform: none; }

/* --- Typewriter: the clearance status types itself ---------------------- */
.card-stat .tw { white-space: pre; }
.card-stat .tw::after {
  content: '';
  display: inline-block;
  width: 1px; height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -.12em;
  animation: caret 1s steps(1) infinite;
}
.card-stat.cleared .tw::after { animation: none; opacity: 0; }
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* --- Redaction wipe ------------------------------------------------------ */
/* A classified bar passes over the line and leaves the words behind. The one
   motion idea here that is about security rather than about motion. */
.redact .tl { position: relative; }
.redact .tl::after {
  content: '';
  position: absolute; inset: 2% -2px 8% -2px;
  background: var(--navy);
  transform-origin: left;
  transform: scaleX(0);
}
.redact.is-revealed .tl::after {
  animation: redactWipe 1.05s var(--ease) both;
  animation-delay: calc(var(--l, 0) * 140ms + 160ms);
}
@keyframes redactWipe {
  0%   { transform: scaleX(0);   transform-origin: left; }
  45%  { transform: scaleX(1);   transform-origin: left; }
  55%  { transform: scaleX(1);   transform-origin: right; }
  100% { transform: scaleX(0);   transform-origin: right; }
}
/* The words sit under the bar until it has passed them. */
.redact .tl > span { transition-delay: calc(var(--l, 0) * 140ms + 520ms); }

@media (prefers-reduced-motion: reduce) {
  .tl > span, .w { filter: none; opacity: 1; transform: none; }
  .proof-i { opacity: 1; transform: none; }
  .redact .tl::after { display: none; }
  .card-stat .tw::after { display: none; }
}

/* Requirements sit under their own ladder, indented to read as belonging to
   it rather than as a new top-level section. */
.requires {
  margin: clamp(16px, 2vw, 24px) 0 clamp(30px, 4vw, 46px);
  padding-left: clamp(0px, 2vw, 26px);
  max-width: 78ch;
}
.requires .cred-head { margin-bottom: 2px; }
@media (max-width: 900px) { .requires { padding-left: 0; } }

/* Draft notice. Visible on the page so placeholder copy is never mistaken for
   approved wording. Delete the rule with the last .draft paragraph. */
.draft {
  margin: 18px 0 0;
  padding: 11px 16px;
  border-radius: 8px;
  background: rgba(190, 150, 72, .13);
  border: 1px solid rgba(190, 150, 72, .36);
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 72ch;
}
.draft b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-right: .8em;
}

/* ------------------------------------------- converge cards, expandable --- */
/* Each card carries the approach for its line and hands off to section 02.
   They grow downward only, with the row aligned to the top, so expanding one
   never resizes its neighbours. */
.cv-row { align-items: start; }

.cv-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0;
  cursor: pointer;
  text-align: center;
  width: clamp(130px, 15vw, 182px);
  min-width: 0;
}
.cv-card i { font-style: normal; }

.cv-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s var(--ease-out), opacity .35s var(--ease),
              margin-top .5s var(--ease-out);
  margin-top: 0;
  text-align: left;
}
.cv-detail > span {
  overflow: hidden;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}
.cv-detail em {
  display: block;
  margin-top: 8px;
  font-family: var(--f-display); font-style: normal; font-weight: 600;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep);
  opacity: 0;
  transition: opacity .3s var(--ease) .18s;
}
.cv-card:hover .cv-detail,
.cv-card:focus-visible .cv-detail,
.cv-card[aria-expanded='true'] .cv-detail {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 11px;
}
.cv-card:hover .cv-detail em,
.cv-card:focus-visible .cv-detail em,
.cv-card[aria-expanded='true'] .cv-detail em { opacity: 1; }

.cv-card:hover,
.cv-card:focus-visible,
.cv-card[aria-expanded='true'] {
  background: var(--paper);
  border-color: var(--gold-deep);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(19, 26, 44, .09);
}

@media (max-width: 900px) {
  .cv-card { width: 100%; }
  .cv-detail > span { font-size: 12px; }
}

/* ----------------------------------------------------- interior pages --- */
/* Pages without the gate have no entrance sequence to reveal the chrome, so
   the bar is simply present, and the first band clears it. */
body[data-page] .topbar { translate: 0; opacity: 1; }
body[data-page] .band-top { padding-top: calc(var(--bar-h) + clamp(42px, 7vw, 86px)); }
.tn-page[aria-current='page'] { color: var(--gold-deep); background: rgba(190, 150, 72, .12); }

/* No hover to roll over with, so the lines are simply present. */
@media (hover: none) {
  .value-v { opacity: 1; transform: none; }
  .value-v::before { width: 18px; margin-right: 14px; }
}

@media (max-width: 900px) {
  /* Stacked: the line sits under its value and is always shown. */
  .value { grid-template-columns: auto 1fr; }
  .value-k { grid-column: 2; }
  .value-v {
    grid-column: 2; grid-row: 2;
    padding-left: 0; opacity: 1; transform: none;
  }
  .value-v::before { display: none; }
}

/* ---------------------------------------------------------- legal pages --
   A privacy notice has to be readable with JavaScript off, so the legal body
   deliberately sits outside [data-reveal], which starts at opacity:0.
   .svc-h2 is capped at 20ch for short service titles and wraps a sentence
   heading badly, so legal pages get their own heading scale and real space
   above each one. */
.legal { max-width: 74ch; }
.legal-h {
  font-family: var(--f-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.05;
  font-size: clamp(21px, 2.4vw, 30px);
  margin: clamp(34px, 4.4vw, 54px) 0 0; max-width: none;
}
.legal-h:first-child { margin-top: 0; }
.legal p { margin: 15px 0 0; font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.7; color: var(--ink-2); }
.legal .cred-list { margin-top: 20px; }
.legal address {
  font-style: normal; margin: 15px 0 0;
  font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.8; color: var(--ink-2);
}

/* ===================================================== 2026-10 revamp: B-roll */
/* The entry gate is retired. The page opens on a dark photographic hero with
   a slow video loop, the trust list sits on the hero's bottom edge, and each
   line of work carries its own photograph. */

.btn-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
.btn-line { border-color: rgba(255,255,255,.45); color: #fff; }
.btn-line:hover { border-color: var(--gold-hi); color: var(--gold-hi); }

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr);
  background: var(--navy); color: #fff;
}
.hero-media, .hero-scrim { position: absolute; inset: 0; z-index: 0; }
.hero-in, .hero-trust { position: relative; z-index: 2; }
.hero-video, .hero-still {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 30% 60%;
}
.hero-still { display: none; }
.hero-scrim {
  background:
    linear-gradient(90deg, rgba(10,14,26,.86) 0%, rgba(10,14,26,.58) 42%, rgba(10,14,26,.18) 78%),
    linear-gradient(0deg, rgba(10,14,26,.85) 0%, rgba(10,14,26,0) 34%);
}
.hero-in {
  align-self: end;
  padding-top: calc(var(--bar-h) + clamp(32px, 6vh, 80px));
  padding-bottom: clamp(28px, 5vh, 56px);
  display: grid; gap: clamp(16px, 2.2vw, 24px); justify-items: start;
}
.hero-kicker { color: var(--gold-hi); }
.hero-title {
  color: #fff; font-size: clamp(54px, min(6.6vw, 11.5vh), 112px); line-height: .86;
  letter-spacing: -.005em; max-width: 12ch; text-wrap: balance;
}
.hero-title span:last-child { color: var(--gold); }
.hero-lede { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; max-width: 46ch; color: #d6dce7; margin: 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.hero-trust {
  position: relative; display: flex; align-items: center;
  border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(10,14,26,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-trust-k {
  flex: none; align-self: stretch; display: flex; align-items: center;
  padding-inline: var(--gutter) 22px;
  font-family: var(--f-display); font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hi); white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.14);
}
.marquee {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; width: max-content;
  animation: marquee 38s linear infinite;
}
.hero-trust:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo {
  flex: none; height: 76px; padding-inline: clamp(26px, 3.4vw, 48px);
  display: flex; align-items: center;
}
.logo img {
  max-height: 40px; max-width: 160px; width: auto;
  filter: brightness(0) invert(1); opacity: .78; transition: opacity .3s var(--ease);
}
.logo:hover img { opacity: 1; }
.logo-word { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; color: #fff; opacity: .82; }
.logo-word b {
  font-family: var(--f-display); font-weight: 700; font-size: 24px; line-height: .9;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.logo-word i {
  font-style: normal; font-family: var(--f-display); font-weight: 500; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: #aeb8ca; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee-track [aria-hidden="true"] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-still { display: block; }
}
@media (max-width: 720px) {
  .hero { min-height: 100svh; }
  .hero-video, .hero-still { object-position: 22% 50%; }
  .hero-scrim {
    background: linear-gradient(0deg, rgba(10,14,26,.96) 0%, rgba(10,14,26,.78) 48%, rgba(10,14,26,.25) 100%);
  }
  .hero-in { padding-left: var(--gutter); }
  .hero-cta .btn { flex: 1 1 auto; text-align: center; }
  .hero-trust-k { padding-inline: var(--gutter) 14px; font-size: 10px; }
  .logo { height: 64px; }
  .logo-word b { font-size: 19px; }
}

/* How it works: four steps, each a photograph. */
.band-how { padding-block: clamp(72px, 10vw, 140px); }
.band-how .band-lede { color: #b9c4d6; }
.steps {
  list-style: none; margin: clamp(36px, 5vw, 60px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px);
}
.step-link {
  display: grid; gap: 10px; text-decoration: none; color: inherit; height: 100%;
}
.step-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: #0b1020; }
.step-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.92) contrast(1.02);
  transition: transform 1.2s var(--ease-out), filter .6s var(--ease);
}
.step-link:hover .step-img img { transform: scale(1.04); filter: saturate(1.05); }
.step-n { font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--gold); margin-top: 6px; }
.step-k {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 2.6vw, 38px); line-height: .9; color: #fff;
}
.step-v { color: #b9c4d6; font-size: 15px; line-height: 1.55; }
.step-link:hover .step-k { color: var(--gold-hi); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
  .step-img { aspect-ratio: 16 / 10; }
}

/* Service console: the photograph leads each panel. */
.cpanel-photo { margin: 0 0 clamp(18px, 2.4vw, 28px); aspect-ratio: 16 / 7; overflow: hidden; border-radius: 3px; background: var(--desk-2); }
.cpanel-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpanel.is-live .cpanel-photo img { animation: photoin .9s var(--ease-out) both; }
@keyframes photoin { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }

/* Full-bleed photo break with a single line. */
.pbreak { position: relative; margin: 0; isolation: isolate; min-height: clamp(320px, 52vw, 640px); display: grid; align-items: end; background: var(--navy); overflow: hidden; }
.pbreak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pbreak::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,14,26,.82) 0%, rgba(10,14,26,.25) 45%, rgba(10,14,26,0) 70%); }
.pbreak figcaption { padding-block: clamp(28px, 5vw, 64px); display: grid; gap: 10px; }
.pbreak-line {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 64px); line-height: .92; color: #fff; max-width: 18ch; text-wrap: balance;
}
.pbreak cite {
  font-style: normal; font-family: var(--f-display); font-weight: 600; font-size: 13px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hi);
}
.band + .pbreak, .pbreak + .band { border-top: 0; }

/* Service pages: a second photograph beside the approach, replacing the drawn plate. */
.svc-photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--desk-2); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Step crops: keep each photo's subject centred in the 4:5 card. */
.step-img img { object-position: var(--fx, 50%) 50%; }

/* The left-hand section rail is retired; the right-hand ladder and the top
   progress bar do that job. */
.axis { display: none; }

/* ============================================ 2026-10 pass two: conversion */

/* Service tabs: the open one is unmistakable. */
.ctab { transition: color .3s var(--ease), background .35s var(--ease); }
.ctab[aria-selected='true'] { background: var(--navy); color: #fff; }
.ctab[aria-selected='true'] .ctab-n { color: var(--gold-hi); }
.ctab[aria-selected='true']:hover { background: var(--navy); color: #fff; }
.ctab-marker { height: 4px; background: var(--gold); bottom: -2px; }
.cpanel-claim { color: var(--navy); font-size: clamp(22px, 2.2vw, 30px); }

/* Four vendors or one. */
.cmp {
  margin-top: clamp(32px, 4.5vw, 52px);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--paper);
}
.cmp-head, .cmp-row {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .8fr);
  align-items: center;
}
.cmp-head > span {
  padding: 14px clamp(14px, 2vw, 26px);
  font-family: var(--f-display); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.cmp-head .cmp-b { background: var(--navy); color: var(--gold-hi); border-bottom-color: var(--navy); }
.cmp-row > span { padding: 18px clamp(14px, 2vw, 26px); border-bottom: 1px solid var(--line); height: 100%; display: flex; align-items: center; }
.cmp-row:last-child > span { border-bottom: 0; }
.cmp-k { font-weight: 500; color: var(--ink); font-size: clamp(15px, 1.15vw, 17px); }
.cmp-a { color: var(--muted); font-size: 15px; }
.cmp-a s { -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: none; background: linear-gradient(var(--chart-accent), var(--chart-accent)) 0 55% / 0% 1.5px no-repeat; transition: background-size .5s var(--ease-out); transition-delay: calc(var(--r) * 160ms + 300ms); }
.cmp-b { background: var(--navy); color: #fff; }
.cmp-b b {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: .04em; text-transform: uppercase; color: #fff;
  opacity: 0; transform: translateX(-12px);
  transition: opacity .45s var(--ease-out), transform .55s var(--spring);
  transition-delay: calc(var(--r) * 160ms + 450ms);
}
.cmp-row.is-last .cmp-k { font-weight: 700; color: var(--navy); }
.cmp-row.is-last .cmp-a { color: var(--chart-accent); font-weight: 600; }
.cmp-row.is-last .cmp-b b { color: var(--gold-hi); font-size: clamp(22px, 2.1vw, 30px); }
.is-revealed .cmp-a s { background-size: 100% 1.5px; }
.is-revealed .cmp-b b { opacity: 1; transform: none; }
@media (max-width: 720px) {
  .cmp-head { display: none; }
  .cmp-row { grid-template-columns: 1fr 1fr; }
  .cmp-row .cmp-k { grid-column: 1 / -1; padding-bottom: 6px; border-bottom: 0; }
  .cmp-row .cmp-a > span::before { content: 'Usual: '; color: var(--faint); }
}

.outcomes {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px);
}
.outcome { border-top: 3px solid var(--gold); padding-top: 18px; }
.outcome-n { font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--gold-deep); }
.outcome-k { font-size: clamp(24px, 2.4vw, 34px); margin: 8px 0 10px; line-height: .95; }
.outcome-v { color: var(--ink-2); margin: 0; }
@media (max-width: 860px) { .outcomes { grid-template-columns: 1fr; } }

/* Audiences. */
.aud { margin-top: clamp(30px, 4vw, 48px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.aud-i {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
  padding: clamp(20px, 2.2vw, 28px); border: 1px solid var(--line); border-radius: 4px; background: var(--paper);
  transition: border-color .3s var(--ease), transform .45s var(--spring), box-shadow .4s var(--ease);
}
.aud-i:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(19,26,44,.45); }
.aud-k { font-size: clamp(22px, 2vw, 28px); line-height: .95; }
.aud-v { color: var(--ink-2); font-size: 15px; margin: 0; flex: 1; }
.aud-proof { font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); margin: 0; }
.aud-go { font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.aud-go::after { content: ' \2192'; transition: margin .3s var(--ease); }
.aud-i:hover .aud-go::after { margin-left: 6px; }
@media (max-width: 980px) { .aud { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .aud { grid-template-columns: 1fr; } }

/* Core values, lit one at a time as you scroll. */
.band-values .band-foot { color: #9aa6bb; }
.band-values .value { border-top-color: rgba(255,255,255,.1); padding-block: clamp(18px, 2.6vw, 30px); }
.band-values .value:last-child { border-bottom-color: rgba(255,255,255,.1); }
.band-values .value:hover, .band-values .value:focus-within { background: transparent; }
.band-values .value-k {
  color: #fff; font-size: clamp(34px, 6vw, 88px);
  opacity: .22; transition: opacity .5s var(--ease), color .5s var(--ease), transform .6s var(--spring);
  transform-origin: left center;
}
.band-values .value-n { font-size: 15px; opacity: .4; transition: opacity .5s var(--ease); }
.band-values .value-v { color: #cfd6e2; font-size: clamp(16px, 1.5vw, 22px); }
.band-values .value-v::before { background: var(--gold); }
.band-values .value.is-active .value-k { opacity: 1; color: var(--gold-hi); transform: translateX(10px); }
.band-values .value.is-active .value-n { opacity: 1; }
.band-values .value.is-active .value-v { opacity: 1; transform: none; }
.band-values .value.is-active .value-v::before { width: 28px; margin-right: 16px; }
.band-values .value.is-past .value-k { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  .band-values .value-k { opacity: 1; }
}

/* Photo breaks: show the whole frame on wide screens instead of cropping heads. */
.pbreak { min-height: 0; width: 100%; height: min(56.25vw, 92vh); }
.pbreak img { object-position: 50% 18%; }
@media (max-width: 720px) { .pbreak { height: 75vw; } }

/* Service pages. */
.svc-steps-band { padding-block: clamp(64px, 8vw, 110px); }
.svc-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); counter-reset: s; }
.svc-step { border-top: 2px solid rgba(255,255,255,.16); padding-top: 18px; position: relative; }
.svc-step::before { content: ''; position: absolute; left: 0; top: -2px; height: 2px; width: 0; background: var(--gold); transition: width .8s var(--ease-out); transition-delay: calc(var(--i) * 180ms + 200ms); }
.is-revealed .svc-step::before { width: 100%; }
.svc-step-n { font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 4vw, 60px); line-height: 1; color: var(--gold); }
.svc-step-k { color: #fff; font-size: clamp(22px, 2vw, 28px); margin: 10px 0 8px; }
.svc-step-v { color: #b9c4d6; margin: 0; font-size: 15px; }
@media (max-width: 900px) { .svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .svc-steps { grid-template-columns: 1fr; } }

.svc-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
@media (max-width: 860px) { .svc-two { grid-template-columns: 1fr; } }
.svc-who { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-who li { border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 14px; font-size: 14px; color: var(--ink); background: var(--desk); }
.svc-proof-h { margin-top: 30px; }
.svc-proof { list-style: none; margin: 10px 0 0; padding: 0; }
.svc-proof li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.svc-proof b { font-weight: 500; }
.svc-proof i { font-style: normal; font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); white-space: nowrap; }

.svc-faq { max-width: 900px; }
.svc-faq { margin-top: 22px; display: grid; gap: 10px; }
.faq { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 22px; display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--f-display); font-weight: 600; font-size: clamp(17px, 1.4vw, 20px); letter-spacing: .02em; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--gold-deep); font-size: 1.3em; line-height: .8; transition: transform .3s var(--ease); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 22px 20px; margin: 0; color: var(--ink-2); max-width: 64ch; }

/* Mid-page call to action. */
.midcta { background: var(--gold); color: var(--navy); }
.midcta-in { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; padding-block: clamp(36px, 5vw, 60px); }
.midcta-h { color: var(--navy); font-size: clamp(30px, 3.6vw, 52px); }
.midcta-p { margin: 10px 0 0; max-width: 54ch; color: #2a2210; font-size: clamp(16px, 1.25vw, 19px); }
.midcta-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.midcta .btn-gold { background: var(--navy); color: #fff; border-color: var(--navy); }
.midcta .btn-gold:hover { background: #0b1020; border-color: #0b1020; }
.midcta-tel { font-family: var(--f-display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); text-decoration: none; border-bottom: 2px solid rgba(19,26,44,.35); }
.midcta-tel:hover { border-bottom-color: var(--navy); }
.band + .midcta, .midcta + .band { border-top: 0; }
.join-cta { margin-top: 26px; }

/* Photographs sit above any background texture layer, always. */
.step-img, .cpanel-photo, .svc-photo, .founder-photo { position: relative; z-index: 1; }
.step-img img, .cpanel-photo img, .svc-photo img { image-rendering: auto; }

/* Join: open positions. */
.openpos {
  margin-top: clamp(28px, 4vw, 48px); padding: clamp(24px, 3vw, 40px);
  background: var(--navy); color: #fff; border-radius: 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap;
}
.openpos .svc-h2 { color: #fff; }
.openpos .band-lede { color: #b9c4d6; margin-top: 10px; }
.openpos .btn-primary { background: var(--gold); color: var(--navy); }
.openpos { padding-block: clamp(20px, 2.4vw, 30px); }
.openpos .btn-primary:hover { background: var(--gold-hi); }
.openpos-req { margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
@media (max-width: 760px) { .openpos-req { grid-template-columns: 1fr; } }

/* ===== Four vendors or one, drawn: separate chips vs one continuous column. */
.cmp2 {
  margin-top: clamp(32px, 4.5vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .85fr);
  grid-template-rows: auto repeat(5, minmax(84px, auto));
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--paper);
}
.c2-h {
  grid-row: 1; display: flex; align-items: center; height: 56px;
  padding-inline: clamp(16px, 2vw, 28px);
  font-family: var(--f-display); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.c2-h-k { grid-column: 1; }
.c2-h-a { grid-column: 2; }
.c2-h-b { grid-column: 3; background: var(--navy); color: var(--gold-hi); border-bottom-color: rgba(255,255,255,.12); }
.c2-k, .c2-a { display: flex; align-items: center; padding-inline: clamp(16px, 2vw, 28px); border-bottom: 1px solid var(--line); }
.c2-k { grid-column: 1; font-weight: 500; color: var(--ink); font-size: clamp(15px, 1.15vw, 17px); }
.c2-a { grid-column: 2; position: relative; }
.c2-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 999px;
  background: var(--desk); border: 1px solid var(--line-2);
  font-size: 15px; color: var(--ink-2);
  opacity: 0; transform: translateX(-10px);
  transition: opacity .45s var(--ease-out), transform .5s var(--spring);
  transition-delay: calc(var(--r) * 140ms + 150ms);
}
.c2-chip i {
  font-style: normal; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--f-display); font-weight: 700; font-size: 13px; color: #fff;
}
.c2-chip-0 i { background: #7a8597; }
.c2-chip-1 i { background: #8d7b6a; }
.c2-chip-2 i { background: #6f8a7e; }
.c2-chip-3 i { background: #8a6f86; }
.c2-seam {
  position: absolute; left: clamp(16px, 2vw, 28px); bottom: -9px; z-index: 1;
  font-family: var(--f-display); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--chart-accent); background: var(--paper); padding: 0 6px;
  border: 1px dashed var(--chart-accent); border-radius: 3px; line-height: 16px;
  opacity: 0; transition: opacity .4s var(--ease); transition-delay: calc(var(--r) * 140ms + 700ms);
}
.c2-b {
  grid-column: 3; position: relative; background: var(--navy);
  display: grid; grid-template-rows: repeat(4, 1fr);
}
.c2-line {
  position: absolute; left: calc(clamp(16px, 2vw, 28px) + 13px); top: 42px; bottom: 42px; width: 2px;
  background: var(--gold); transform-origin: top; transform: scaleY(0);
  transition: transform 1.1s var(--ease-out) .5s;
}
.c2-check {
  display: flex; align-items: center; gap: 14px; padding-inline: clamp(16px, 2vw, 28px);
  position: relative; z-index: 1;
}
.c2-check::before {
  content: '\2713'; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold); color: var(--navy); font-weight: 700; font-size: 15px;
  transform: scale(0); transition: transform .45s var(--spring); transition-delay: calc(var(--r) * 180ms + 600ms);
}
.c2-check b {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: .04em; color: #fff;
  opacity: 0; transition: opacity .4s var(--ease); transition-delay: calc(var(--r) * 180ms + 700ms);
}
.c2-last { border-bottom: 0; }
.c2-k.c2-last { font-weight: 700; color: var(--navy); }
.c2-blame { color: var(--chart-accent); font-weight: 600; font-size: 15px; }
.c2-one {
  grid-column: 3; display: flex; align-items: center; padding-inline: clamp(16px, 2vw, 28px);
  background: var(--gold); color: var(--navy);
  font-family: var(--f-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: .04em; text-transform: uppercase;
}
.is-revealed .c2-chip { opacity: 1; transform: none; }
.is-revealed .c2-seam { opacity: 1; }
.is-revealed .c2-line { transform: scaleY(1); }
.is-revealed .c2-check::before { transform: scale(1); }
.is-revealed .c2-check b { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .c2-chip, .c2-seam, .c2-check b { opacity: 1; transform: none; }
  .c2-line { transform: none; }
  .c2-check::before { transform: none; }
}
@media (max-width: 760px) {
  .cmp2 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: none; }
  .c2-h-k { display: none; }
  .c2-h-a { grid-column: 1; } .c2-h-b { grid-column: 2; }
  .c2-k { grid-column: 1 / -1; grid-row: auto !important; border-bottom: 0; padding-top: 16px; font-size: 14px; }
  .c2-a { grid-column: 1 / -1; grid-row: auto !important; padding-block: 6px 16px; justify-content: space-between; gap: 10px; }
  .c2-a:not(.c2-last)::after {
    content: '\2713  CTS'; white-space: pre; flex: none; padding: 7px 12px; border-radius: 999px;
    background: var(--navy); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: .04em;
  }
  .c2-b, .c2-seam { display: none; }
  .c2-chip { font-size: 13px; }
  .c2-a.c2-last { grid-column: 1; }
  .c2-one { grid-column: 2; grid-row: auto !important; padding-block: 16px; font-size: 22px; }
}

/* Phones in portrait get a vertical cut of the reel, framed centre. */
@media (max-width: 760px) and (orientation: portrait) {
  .hero-video { object-position: 50% 50%; }
}

/* Join: two pads, officers and instructors. */
.pads { margin-top: 22px; scroll-margin-top: calc(var(--bar-h) + 24px); }
.pad-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pad-tab {
  text-align: left; cursor: pointer; padding: 22px 24px; border-radius: 6px;
  border: 2px solid var(--line-2); background: var(--paper); color: var(--navy);
  display: grid; gap: 6px; transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.pad-tab:hover { border-color: var(--gold); }
.pad-tab[aria-selected='true'] { background: var(--navy); border-color: var(--navy); color: #fff; }
.pad-tab-k { font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); text-transform: uppercase; line-height: 1; }
.pad-tab-n { font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.pad-tab[aria-selected='true'] .pad-tab-n { color: var(--gold-hi); }
.pad { margin-top: 16px; padding: clamp(20px, 2.6vw, 32px); border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.job {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
  padding: 20px 22px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--desk);
  text-decoration: none; color: inherit; transition: border-color .25s var(--ease), transform .35s var(--spring);
}
a.job:hover { border-color: var(--gold); transform: translateY(-2px); }
.job-text { display: grid; gap: 4px; min-width: 0; }
.job-text b { font-family: var(--f-display); font-weight: 700; font-size: clamp(19px, 1.7vw, 24px); color: var(--navy); }
.job-text i { font-style: normal; font-size: 14px; color: var(--muted); }
.job-empty .job-text b { font-family: var(--f-body); font-weight: 500; font-size: 16px; color: var(--ink-2); max-width: 60ch; }
.pad-req-h { margin-top: 26px; }

/* Header: the full official lockup (spartan mark, CTS, rule, three words),
   matching brand/logo/cts-lockup-horizontal. Credentials live in the hero
   and footer instead of under the logo. */
.topbar .topbar-lockup { gap: 12px; }
.topbar .topbar-lockup .lockup-mark { width: 34px; }
.topbar .topbar-lockup .lockup-cts { font-size: 31px; }
.topbar .topbar-lockup .lockup-type { gap: 10px; }
.topbar .topbar-lockup .lockup-rule { background: var(--line-2); }
.topbar .topbar-lockup .lockup-words { font-size: 8.6px; line-height: 1.22; letter-spacing: .2em; color: var(--ink-2); }
@media (max-width: 520px) {
  .topbar .topbar-lockup .lockup-mark { width: 28px; }
  .topbar .topbar-lockup .lockup-cts { font-size: 26px; }
  .topbar .topbar-lockup .lockup-words { font-size: 7.4px; }
}
@media (max-width: 900px) {
  .topbar .topbar-lockup .lockup-words { display: flex; }
  .topbar .topbar-lockup .lockup-rule { display: block; }
}

/* The real CTS logo artwork (same file as the welcome packet and uniform). */
.brandlogo { display: block; line-height: 0; }
.brandlogo img { height: 34px; width: auto; display: block; }
.foot-logo { height: 52px; width: auto; display: block; }
@media (max-width: 520px) { .brandlogo img { height: 28px; } }

/* What We Do overview: two by two, each card led by its photo. */
.svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(16px, 2vw, 24px); }
@media (max-width: 700px) { .svc-cards { grid-template-columns: 1fr !important; } }
.svc-card-photo { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--desk-2); }
.svc-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease-out); }
.svc-card:hover .svc-card-photo img { transform: scale(1.03); }

/* Tap targets: at least 44px tall on touch screens, with no visual change. */
.brandlogo { padding-block: 8px; margin-block: -8px; }
.midcta-tel { display: inline-block; padding-block: 10px; }
@media (pointer: coarse) {
  main p a, main li a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}

/* ------------------------------------------------------------- Turnstile */
/* The widget is a fixed-size iframe. Reserve its height so the form does not
   jump when it finishes loading, and let it sit left with the fields. */
.cf-wrap { min-height: 68px; }
.cf-wrap .cf-turnstile { display: block; }
.cf-wrap iframe { max-width: 100%; }

@media (max-width: 420px) {
  /* Below the widget's own 300px floor there is nothing to scale, so let it
     shrink from its own origin rather than overflow the page. */
  .cf-wrap .cf-turnstile { transform: scale(.92); transform-origin: left top; }
}