:root {
  /* This site has no dark theme. Without this, some mobile browsers (notably Android Chrome's
     "force dark" auto-theme) repaint gradients and buttons on their own, causing washed-out
     halos and inverted colors instead of what's actually authored below. */
  color-scheme: light;
  --navy: #000000;
  --navy-2: #173747;
  --navy-3: #000000;
  --mint: #eb642c;
  --mint-dark: #8a330f;
  --mint-wash: #fbeee6;
  --paper: #fffefa;
  --soft: #f5f6f2;
  --bone: #f0eee7;
  --muted: var(--navy);
  --line: rgba(16, 43, 58, 0.16);
  --edge-warm: rgba(235, 100, 44, .85);
  --edge-dark: rgba(0, 0, 0, .6);
  --edge-w: 2px;
  /* One shell width for every top-level box (heroes + .wrap) so their edges always line up.
     Raised the cap and eased the side-margin formula so boxes keep spreading out on wide desktop
     monitors instead of hard-stopping at 1600px and leaving big empty gutters (was ~160px per
     side at 1920px wide, then ~60px; now ~24px). */
  --shell: min(1900px, calc(100% - 1.5vw));
  --white-line: rgba(255,255,255,.17);
  --shadow: 0 28px 80px rgba(8, 31, 43, .12);
  --sans: "IBM Plex Sans", Arial, sans-serif;
  --mono: "DM Mono", monospace;
  --heading: "Poppins", var(--sans);
  /* Three tiers so a 40px-tall chip doesn't get the same radius as a full-width panel and turn
     into a blob. Tier by the box's own size, not by where it sits on the page. */
  --r-lg: clamp(24px, 2.4vw, 34px);
  --r-md: clamp(18px, 2vw, 26px);
  --r-sm: clamp(12px, 1.2vw, 16px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(80px + var(--announce-h, 0px)); overflow-anchor: none; }
body { overflow-anchor: none; }
/* Flat white background. The grid that was here is gone — when one section changes from white to
   dark, the grid lines that fell inside that section were white on dark and read as visible artifacts.
   On refresh, those lines would pop in briefly before the dark background painted, which read as a
   stray white stroke. Removing the grid from the whole page cleans both. */
body { margin: 0; overflow-x: hidden; background-color: var(--paper); color: var(--navy); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--heading); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
::selection { background: var(--mint); color: var(--navy); }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .8rem 1rem; background: var(--mint); color: var(--navy); }
.skip-link:focus { top: 1rem; }
.wrap { width: var(--shell); margin-inline: auto; }
.eyebrow { margin: 0; font: 500 .68rem/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.display { margin: .8rem 0 0; max-width: 12ch; font-size: clamp(3rem, 6vw, 6.4rem); font-weight: 500; letter-spacing: -.06em; line-height: .92; text-wrap: balance; }
.lede { max-width: 36rem; margin: 0; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: -.02em; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 48px; padding: .85rem 1.15rem; border: 1px solid var(--navy); border-radius: 999px; background: var(--navy); color: var(--paper); font: 600 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: transform .2s, background .2s, color .2s, border-color .2s; }
.button:focus-visible, .text-link:focus-visible, .nav-links a:focus-visible, input:focus-visible, textarea:focus-visible, .skip-link:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.section-dark .button:focus-visible, .section-dark .text-link:focus-visible, .hero-enterprise .button:focus-visible, .site-footer a:focus-visible, .contact-copy a:focus-visible { outline-color: var(--mint); }
.button:hover { transform: translateY(-2px); background: var(--mint); border-color: var(--mint); color: var(--navy); }
.button.light { background: var(--mint); border-color: var(--mint); color: var(--navy); }
.button.light:hover { background: var(--paper); border-color: var(--paper); }
.button.ghost { background: transparent; border-color: rgba(255,255,255,.42); color: var(--paper); }
.button.ghost:hover { background: var(--paper); color: var(--navy); }
.text-link { display: inline-flex; gap: .55rem; align-items: center; border-bottom: 1px solid currentColor; padding-bottom: .18rem; font: 600 .76rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.text-link[href^="http"]::after,
.text-link[href^="//"]::after { content: "↗"; }

.announce-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--mint); color: var(--paper); transform: translateY(0); }
.announce-inner { position: relative; display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .6rem 2.75rem; font: 600 .74rem var(--mono); letter-spacing: .04em; text-transform: uppercase; text-align: center; }
/* Bare glyph, no chrome. The box is kept purely as a thumb-sized tap target. */
.announce-close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: none; background: transparent; color: inherit; font-size: .9rem; line-height: 1; opacity: .75; cursor: pointer; }
.announce-close:hover { opacity: 1; }
/* Set by an inline head script so a bar dismissed earlier never flashes up before site.js runs. */
.announce-dismissed .announce-bar { display: none; }
/* Scrolled past the top: the bar slides out of view (site.js toggles this on scroll) and
   --announce-h drops to 0 in step, so the nav and every first-section padding that reads
   --announce-h re-settle together instead of leaving a dead gap where the bar used to be. */
.announce-bar.announce-hidden { transform: translateY(-100%); }
.ready .announce-bar { transition: transform .3s ease; }

/* Solid white, never translucent — page content scrolling under a see-through bar made
   the nav labels unreadable. Opaque also means there is nothing for a blur to act on. */
.site-nav { position: fixed; inset: 0 0 auto; top: var(--announce-h, 0px); z-index: 40; height: 72px; background: #fff; border-bottom: 1px solid var(--line); }
.site-nav.at-top { border-bottom-color: transparent; }
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; transition: gap .25s ease; }
.brand { display: inline-flex; align-items: center; font-size: 1.15rem; font-weight: 700; letter-spacing: -.055em; }
.brand::after { content: ""; width: 11px; height: 4px; margin-left: 7px; background: var(--mint); }
.brand-logo::after { display: none; }
.site-nav .wrap { transition: width .3s ease; }
@media (min-width: 761px) { .site-nav.at-top .wrap { width: min(1600px, calc(100% - 12vw)); } }
.brand-logo img { display: block; height: 44px; width: auto; transition: height .25s ease; }
/* The icon's arrow shapes taper to a point right at its left edge, so its bounding box reads
   as having more empty space than the nav-cta button's solid edge on the right, even though
   both sit the same distance from the container edge. This nudges it in to compensate. */
.site-nav .brand-logo img { margin-left: 6px; transition: height .25s ease, margin-left .25s ease; }
.site-nav.scrolled .brand-logo img { margin-left: 4px; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links > a:not(.nav-cta) { position: relative; color: var(--navy); font: 500 .68rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.nav-links > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.5rem; height: 2px; background: var(--mint-dark); transition: right .22s; }
.nav-links > a:hover::after, .nav-links > a.active::after { right: 0; }
.nav-cta { padding: .7rem 1rem; border-radius: 999px; background: var(--mint); color: var(--paper); font: 600 .68rem var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: padding .25s ease; }
.nav-cta:hover { background: var(--navy); color: var(--paper); }
.nav-toggle { display: none; border: 0; background: none; color: var(--navy); font: 600 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.nav-progress { position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: transparent; transition: background .2s ease; }
.site-nav.scrolled .nav-progress { background: var(--navy); }
.nav-progress::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: var(--scroll,0%); background: var(--mint); }
@media (min-width: 761px) {
  .site-nav.scrolled { height: 54px; }
  .site-nav.scrolled .brand-logo img { height: 32px; }
  .site-nav.scrolled .nav-inner { gap: 1.4rem; }
  .site-nav.scrolled .nav-cta { padding: .55rem .85rem; }
}

/* Shorter min-height so the copy fills more of the box instead of floating in a tall
   centered column with a big empty band above and below it. */
.hero-enterprise { position: relative; display: grid; align-items: center; min-height: clamp(19rem, 40vh, 27rem); padding: clamp(1.75rem, 2.75vw, 2.25rem) 0; overflow: hidden; color: var(--paper); background: var(--navy-3); isolation: isolate; width: var(--shell); margin: calc(80px + var(--announce-h, 0px)) auto 0; border-radius: var(--r-lg); }
/* --announce-h is measured by script, so it is 0 on first paint and corrects a frame later.
   These transitions stay disarmed until .ready or that correction animates as a 34px lurch
   on every page load. Once armed they only serve the announce bar being dismissed. */
.ready .site-nav { transition: border-color .3s ease, top .25s ease, height .25s ease; }
.ready .hero-enterprise { transition: margin-top .25s ease; }
.hero-enterprise::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 84% 19%,rgba(235,100,44,.16),transparent 24%),linear-gradient(135deg,#000000 0%,#000000 48%,#000000 100%); }
.hero-enterprise::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .24; background-image: linear-gradient(rgba(255,255,255,.44) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.44) 1px,transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(90deg,#000,rgba(0,0,0,.6) 58%,transparent 96%); }
.hero-enterprise .wrap { width: 100%; margin-inline: 0; }
.hero-layout { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; padding-inline: clamp(20px, 4vw, 48px); }
.hero-layout > *, .section-head > *, .pattern-layout > *, .leadership-layout > *, .contact-card > *, .page-title-row > * { min-width: 0; }
.hero-copy { width: fit-content; max-width: 100%; margin-inline: auto; }
.hero-copy h1 { margin: .9rem auto clamp(1.5rem, 2.6vw, 2.25rem); max-width: 22ch; font-size: clamp(3.2rem, 6.2vw, 7.6rem); font-weight: 500; letter-spacing: -.062em; line-height: .9; text-align: center; text-wrap: balance; }
.hero-copy h1 em { color: var(--mint); font-style: normal; }
.hero-copy .eyebrow { color: var(--paper); }
.hero-copy .lede { max-width: 27em; margin-inline: auto; padding-inline: 1rem; color: var(--paper); font-size: clamp(1.25rem, 2.2vw, 2rem); font-family: var(--heading); font-weight: 400; text-align: center; line-height: 1.3; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }
.hero-visual { display: none; align-self: stretch; min-height: 20rem; }
.hero-net { position: absolute; top: 0; right: 0; z-index: -1; display: block; width: 56%; height: 100%; mask-image: linear-gradient(90deg, transparent 0, #000 42%); }
@media (min-width: 981px) {
  .hero-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; padding-inline: clamp(32px, 4.5vw, 72px); }
  .hero-copy { width: auto; margin-inline: 0; }
  .hero-copy h1 { margin-inline: 0; max-width: none; font-size: clamp(2.6rem, 4.5vw, 5rem); text-align: left; text-wrap: nowrap; }
  .hero-copy .lede { margin-inline: 0; padding-inline: 0; max-width: 36ch; font-size: clamp(1rem, 1.28vw, 1.22rem); text-align: left; text-wrap: pretty; }
  .hero-actions { justify-content: flex-start; }
  .hero-visual { display: block; }
}
.hero-cta-note { margin: 1rem 0 0; max-width: 28rem; color: var(--paper); font: 400 .72rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.risk-stack { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.risk-stack li { padding: .45rem .75rem; border-radius: 999px; background: rgba(235, 100, 44, 0.14); color: #f0d6c2; font: 500 .68rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.risk-stack-dark li { background: rgba(16, 43, 58, 0.12); color: var(--navy); }
.risk-stack-contact { margin-top: 1.5rem; }
.risk-stack-contact li { background: rgba(235, 100, 44, 0.12); color: #f0d6c2; }
.risk-stack-engage { margin-top: 1.5rem; }
.risk-stack-engage li { background: rgba(255, 255, 255, 0.08); color: var(--paper); }
.cta-band-copy-block { flex: 1; min-width: 0; }
.cta-band { background: var(--mint); color: var(--navy); border-bottom: 1px solid rgba(16, 43, 58, 0.12); }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 88px; padding: 1.25rem 0; }
.cta-band-copy { margin: 0; max-width: 42rem; font-size: 1.02rem; line-height: 1.45; }
.cta-band .button { flex-shrink: 0; background: var(--navy); border-color: var(--navy); color: var(--paper); }
.cta-band .button:hover { background: var(--paper); color: var(--navy); border-color: var(--paper); }

.icp-fit { padding: clamp(2.5rem, 5vw, 3.5rem) 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.icp-fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.icp-card { padding: 1.1rem 1.25rem; border-radius: var(--r-md); border: 1px solid var(--line); }
.icp-card .eyebrow { margin-bottom: .5rem; }
.icp-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.icp-yes { background: var(--mint-wash); border-color: rgba(23, 122, 75, 0.2); }
.icp-yes .eyebrow { color: var(--mint-dark); }
.icp-no { background: var(--soft); }
.icp-list { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .88rem; }
.icp-list li { margin-bottom: .35rem; }

.next-steps { padding: clamp(2.5rem, 5vw, 3.5rem) 0; background: var(--soft); border-bottom: 1px solid var(--line); }
.next-steps-label { margin-bottom: 1.25rem; color: var(--mint-dark); }
.next-steps-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.next-steps-list li { display: grid; grid-template-columns: 42px 1fr; gap: .85rem; align-items: start; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.next-steps-list li > span { color: var(--mint-dark); font: 500 .68rem var(--mono); }
.next-steps-list h3 { margin: 0 0 .35rem; font-size: 1.05rem; letter-spacing: -.03em; }
.next-steps-list p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }

.contact-enterprise { padding-top: clamp(3rem, 6vw, 4rem); }



.section { padding: clamp(3rem, 6vw, 5rem) 0; }
.section-head { display: grid; grid-template-columns: 1fr .55fr; gap: 4rem; align-items: end; margin-bottom: 3.75rem; }
/* When a head has no supporting paragraph, let the title use the whole row instead of
   sitting in a 1fr column with an empty gap beside it. */
.section-head > :only-child { grid-column: 1 / -1; }
.section-head-compact { margin-bottom: 3rem; }
.section-head-compact .display { max-width: 13ch; font-size: clamp(2.8rem,5vw,5.4rem); }
.section-head .lede { justify-self: end; }
.section-dark { background: var(--navy); color: var(--paper); }
.section-dark .lede,
.section-dark .page-title-row p { color: var(--paper); }
.section-dark .eyebrow { color: var(--paper); }
.section-dark .page-title-row h1,
.section-dark .page-title-row h2,
.section-dark .section-head .display { color: var(--paper); }
.section-soft { background: var(--soft); }
/* Intro section on philosophy, approach, company, and newsletter pages — orange base instead of the default soft-grey. */
#start.section-soft, #stages.section-soft, #principles.section-soft, #investment.section-soft { background: var(--mint); }
/* Overrides .section-soft's grey for this one section specifically, running dark grey so the
   area around the orange .build-box is grey rather than white. Bottom padding large enough to
   reach all the way to #systems-built with no white gap in between.
   Top padding tightened (was clamp(1.25rem,2.4vw,2rem)) so the grid-background gap above this box's
   own top rounded box isn't wider than it needs to be. */
.build-section { padding-top: clamp(.25rem, .5vw, .4rem); padding-bottom: clamp(.5rem, 1vw, .85rem); background: #f0f0f0; }

/* Separate webinar section below hero. Transparent so it shows the shared page background
   (see body, above) instead of its own flat white — keeps it visually identical to
   .build-section right below it. The "how we build it" preview sits above the heading/button
   as a full-width horizontal band on desktop (four boxes in a row); on narrow screens the
   same boxes stack in a single column instead.
   Padding tightened (was clamp(2rem,4vw,3.25rem) both sides) so the header/webinar and
   webinar/build gutters read as intentional breathing room instead of dead empty grid space. */
.webinar-section { padding: clamp(.5rem, 1vw, .85rem) 0 0; background: transparent; }
/* Everything (the four flow cards + the webinar CTA) now lives inside one continuous panel
   that fades from black at the top to orange at the bottom, instead of two separately
   boxed pieces stacked on the page background. */
/* Stops are tuned so the black holds through the full card row and the orange is fully
   resolved before the webinar copy starts — the copy's heading/button text is pure black
   (--navy), so it needs solid orange behind it, not a still-dark part of the ramp. */
/* Full-bleed edge-to-edge, not a floating rounded card: overrides .wrap's shell width/centering
   (this element carries both classes) and drops the corner radius/outline/shadow that made it
   read as a boxed-in panel. Horizontal breathing room now comes from this rule's own padding
   instead of from being narrower than the viewport. */
.webinar-layout { position: relative; width: 100%; margin-inline: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(2rem, 4vw, 2.75rem); padding: clamp(2rem, 4vw, 3rem); border-top: var(--edge-w) solid var(--edge-warm); border-radius: 0; background: linear-gradient(180deg, #000 0%, #000 58%, var(--mint) 66%, var(--mint) 100%); }
/* This box spans edge to edge, so the page's fixed side rails cut across its own background —
   patch them out here with the box's own background so only its top edge carries the line. */
.webinar-layout::before,
.webinar-layout::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--edge-w); background: inherit; z-index: 46; }
.webinar-layout::before { left: 0; }
.webinar-layout::after { right: 0; }
@media (max-width: 860px) {
  /* Cards are opaque (#1a1a1a), so a longer fade can safely creep up behind the lower cards
     without washing them out — only the thin gaps between cards pick up the transitioning color,
     which reads as a nice long ambient fade rather than a last-second cut to orange.
     Anchored from the BOTTOM in fixed px, not from the top in %: the stuff below the heading
     (h2 + gap + button + padding) is a fixed height, but the stuff above it grows whenever
     padding-top changes — a %-from-top stop moves with that growth (since % is of the whole,
     ever-changing box height), which silently cancels out most of any padding-top increase.
     Anchoring from the bottom keeps the visible solid-orange gap above the heading fixed and
     independent of padding-top, so it can be tuned directly to match the solid-orange gap below
     the button (48px) instead of fighting the gradient math. Solid point stays at 195px (tuned to
     balance against that 48px gap below the button) — only the fade's start moved, to stretch the
     transition out over much more vertical distance instead of a quick 31px cut. */
  .webinar-layout { background: linear-gradient(180deg, #000 0%, #000 calc(100% - 600px), var(--mint) calc(100% - 195px), var(--mint) 100%); }
  /* Default .button:hover turns orange, which disappears against this section's orange
     background — go white here instead, same as the desktop override below. */
  .webinar-copy .button:hover { background: var(--paper); border-color: var(--paper); color: var(--navy); }
}
.webinar-layout .system-visual { width: 100%; max-width: 340px; }
/* Full-width banner instead of a capped, centered card — stacked and centered on mobile,
   heading-left/button-right on desktop so it reads as a wide CTA rather than a boxed-in aside.
   No background of its own any more — it sits on the orange end of the shared gradient above. */
.webinar-copy { width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 3vw, 2rem); padding: clamp(1rem, 3vw, 1.5rem) clamp(.5rem, 3vw, 1rem); color: var(--navy); text-align: center; }
.webinar-copy h2 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: .9; letter-spacing: -.05em; font-weight: 500; }
.webinar-copy .button { display: inline-flex; flex: none; white-space: nowrap; padding: 1.1rem 2.5rem; min-width: 240px; justify-content: center; }
@media (min-width: 861px) {
  .webinar-layout .system-visual { max-width: none; }
  .webinar-layout .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
  /* A bit more solid-orange room on desktop specifically (flow cards end well before this point,
     so there's headroom to start the ramp later without it creeping onto the cards) so the heading
     below has clean orange to sit on instead of straddling the ramp. */
  .webinar-layout { background: linear-gradient(180deg, #000 0%, #000 54%, var(--mint) 61%, var(--mint) 100%); }
  /* Centered instead of split heading-left/button-right, and pushed further down so it lands
     fully past the ramp on solid orange instead of straddling the black/orange transition;
     switched from navy to white/white so it reads clearly against the orange background
     (mobile already reads fine as-is, so this block is desktop-only). Margin-top is tuned to
     match the orange space below the button, given the ramp position above. */
  .webinar-copy { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.75rem; margin-top: 7.25rem; color: var(--paper); }
  .webinar-copy .button { background: var(--paper); border-color: var(--paper); color: var(--navy); }
  .webinar-copy .button:hover { background: var(--navy); border-color: var(--navy); color: var(--paper); }
}
/* Buyer-fit section with black background */
.buyer-fit { background: var(--navy) !important; }
.buyer-fit > .wrap > .section-head .display { color: var(--paper); }
.buyer-fit .icp-card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.buyer-fit .icp-card .eyebrow { color: var(--mint); }
.buyer-fit .icp-card p { color: var(--paper); }
/* Shrunk this section specifically: smaller heading, tighter head spacing, much less
   top/bottom padding than the default .section rhythm (bottom padding was already
   reduced separately below; this adds a matching top reduction). */
.buyer-fit { padding-top: clamp(1.25rem, 2.5vw, 2rem) !important; }
.buyer-fit .section-head-compact { margin-bottom: 1.5rem; }
.buyer-fit .section-head-compact .display { font-size: clamp(1.9rem, 3.2vw, 2.75rem); }
/* The constraint-map preview that used to live in this box's top-right corner now sits up
   next to the webinar CTA instead, so this is just a plain rounded panel. */
/* Tighter outer frame — the old padding left a wide, mostly-empty orange margin around the
   dark quote box inside it. */
.build-box { --pad: clamp(1rem, 1.8vw, 1.5rem); --r: var(--r-lg); position: relative; isolation: isolate; padding: var(--pad); border-radius: var(--r); color: var(--navy); background: var(--mint); }
/* "How we think" statement now lives inside the top of the build-box itself (used to be its
   own full-bleed section above this one), styled as its own dark card so it still reads as a
   distinct statement instead of blending into the orange panel around it. */
.bridge-intro { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); padding: clamp(1.1rem, 2vw, 1.6rem); border-radius: var(--r-lg); background: var(--navy); }
.bridge-intro p { max-width: 56rem; margin: 0 auto; text-align: center; color: var(--paper); font-family: var(--heading); font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.85rem); line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
.belt-text strong { font-weight: 500; color: var(--mint); }
/* The per-word roll-up that used to live here is gone. Each word was wrapped in its own
   overflow:hidden inline-block mask, which clipped descenders (the g in "imagination", the y in
   "why") and fought text-wrap:balance — the line breaks shifted as the words landed, so the
   paragraph visibly reflowed while you read it. The statement now just renders with the section's
   own .reveal fade, which is what every other block on the page does. */
.build-top { min-height: 0; }
.build-head { max-width: 60ch; margin-inline: auto; text-align: center; }
.build-head .eyebrow { color: var(--navy); }
.build-head .display { margin: .5rem auto .75rem; max-width: 26ch; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 500; line-height: .96; letter-spacing: -.05em; }
.build-head .lede { max-width: 48ch; margin-inline: auto; color: var(--navy); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.5; }
.stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.2vw, 1.1rem); margin: clamp(1.5rem, 2.6vw, 2.25rem) 0 0; padding: 0; list-style: none; }
/* Stages stagger in when scrolled into view. Each one uses its reveal delay. */
.stage { display: flex; flex-direction: column; padding: .9rem 1rem 1.05rem; border: 1px solid rgba(0,0,0,.14); border-radius: var(--r-md); background: rgba(0,0,0,.15); opacity: 0; transform: translateY(20px); transition: opacity .75s cubic-bezier(.22,.9,.3,1), transform .75s cubic-bezier(.22,.9,.3,1); transition-delay: var(--stage-delay, 0s); }
.stage.active { opacity: 1; transform: translateY(0); }
.stage:nth-child(1) { --stage-delay: 0s; }
.stage:nth-child(2) { --stage-delay: .08s; }
.stage:nth-child(3) { --stage-delay: .16s; }
.stage:nth-child(4) { --stage-delay: .24s; }
.stage:nth-child(5) { --stage-delay: .32s; }
.stage:nth-child(6) { --stage-delay: .4s; }
.stage:nth-child(7) { --stage-delay: .48s; }
.stage:nth-child(8) { --stage-delay: .56s; }
/* Disable animation in reduced motion. */
@media (prefers-reduced-motion: reduce) { .stage { transition: none !important; opacity: 1 !important; transform: none !important; } }
.stage-num { font: 500 .68rem var(--mono); letter-spacing: .1em; color: var(--navy); }
.stage h3 { margin: .55rem 0 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
/* Short stage titles carry a manual break so they sit on two lines in the narrow mobile
   columns like the longer ones do. The wide columns have room, so the break is dropped. */
.stage h3 br { display: none; }
/* Both the heading and the four cards now sit on the shared black-to-orange panel (see
   .webinar-layout above) instead of the page's paper background, so the heading needs to be
   light, and the cards are lightly-tinted glass chips (bordered, no fill of their own) rather
   than separate solid black boxes — a solid fill would just disappear into the black end of
   the shared gradient behind them. */
.system-top { margin: 0 0 1.25rem; color: var(--paper); font: 500 clamp(1.6rem, 3.4vw, 2.5rem) var(--heading); letter-spacing: -.02em; line-height: 1.05; text-align: center; }
.flow { display: grid; gap: 1.1rem; margin: .5rem 0 0; }
.flow-node { display: flex; flex-direction: column; gap: .85rem; padding: clamp(1.5rem, 2.4vw, 1.85rem) clamp(1.35rem, 2.2vw, 1.6rem); border: 0; border-radius: var(--r-md); background: #1a1a1a; color: var(--paper); }
/* The four cards land with a noticeable, slightly bouncy pop as the section scrolls into
   view — bigger movement and a longer stagger than the .stage-grid cards elsewhere. The entrance
   delay is baked into the opacity/transform entries only, so hover feedback (background/border,
   below) stays instant instead of inheriting the same per-card stagger. */
.flow-node { opacity: 0; transform: translateY(34px) scale(.92); transition: opacity .9s cubic-bezier(.34,1.56,.64,1) var(--flow-delay, 0s), transform .9s cubic-bezier(.34,1.56,.64,1) var(--flow-delay, 0s), background .3s ease; }
.flow-node.active { opacity: 1; transform: translateY(0) scale(1); }
.flow-node:hover { background: #232323; }
.flow-node:nth-child(1) { --flow-delay: 0s; }
.flow-node:nth-child(2) { --flow-delay: .2s; }
.flow-node:nth-child(3) { --flow-delay: .4s; }
.flow-node:nth-child(4) { --flow-delay: .6s; }
@media (prefers-reduced-motion: reduce) { .flow-node { transition: none !important; opacity: 1 !important; transform: none !important; } }
.flow-head { display: flex; align-items: center; gap: .7rem; }
.flow-node b { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(235,100,44,.18); color: var(--mint); font: 600 .78rem var(--mono); }
.flow-node-title { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.flow-node p { margin: 0; font-size: .84rem; line-height: 1.6; color: var(--paper); }
/* Same black panel the document mockups use, so stage 01 no longer reads as the odd one
   out. margin-top:auto pins it to the bottom edge like the docs in the taller cards. */
.stage-icon { margin-top: auto; padding: .6rem; border: 1px solid var(--edge-warm); border-radius: var(--r-sm); background: var(--navy); box-shadow: 0 14px 30px rgba(0,0,0,.24); }
/* Height is pinned to match the .doc mockups exactly — otherwise the icon card is taller
   and the two stage rows stop lining up. The sum mirrors how .doc builds its own height:
   four 4px bars + four .32rem gaps, then that card's vertical padding and borders. */
.stage-icon { box-sizing: border-box; height: calc(16px + 1.28rem + 1.1rem + 2px); }
/* The drawing scales to fit and centres itself in the spare width. */
.stage-icon svg { display: block; width: 100%; height: 100%; color: var(--paper); }
.stage-icon-card h3 { margin-bottom: 1rem; }
/* The star used to pulse on an infinite 3.6s loop. Removed — it was the only thing on the page
   that never settled, so it kept pulling the eye back to two cards out of eight. */

.stage-doc .doc { margin-top: .7rem; padding: .55rem .65rem .55rem; border: 1px solid rgba(0,0,0,.10); border-radius: var(--r-sm); background: #fff; box-shadow: 0 14px 30px rgba(0,0,0,.14); }
.stage-doc .doc b { display: none; }
.stage-doc .doc i { display: block; height: 4px; margin-top: .32rem; border-radius: 2px; background: rgba(0,0,0,.10); }
.stage-doc .doc i:first-of-type { background: #3b82f6; width: 42%; }
.stage-doc .doc i:nth-of-type(2) { width: 100%; }
.stage-doc .doc i:nth-of-type(3) { width: 88%; }
.stage-doc .doc i:nth-of-type(4) { width: 64%; }
@media (max-width: 1100px) { .stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1.5rem; }
  .stage { padding: .75rem .8rem .9rem; border-radius: var(--r-md); }
  .stage h3 { font-size: .82rem; margin-top: .35rem; }
  .stage h3 br { display: inline; }
  .stage-num { font-size: .62rem; }
  .stage-icon { height: calc(16px + 1.28rem + 1.1rem + 2px); }
  .stage-doc .doc { padding: .5rem .55rem .6rem; margin-top: .7rem; }
  .stage-doc .doc b { font-size: .54rem; }
  .stage-icon-card h3 { margin-bottom: 0; }
}
.pattern-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 6vw; align-items: center; }
.pattern-story { padding-right: 2rem; }
.pattern-story h2 { margin: .9rem 0 1.35rem; font-size: clamp(2.8rem,5vw,5.8rem); font-weight: 500; line-height: .9; letter-spacing: -.06em; }
.pattern-story p { color: var(--paper); font-size: 1.05rem; }
.pattern-note { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--white-line); color: var(--paper); font: 400 .66rem var(--mono); line-height: 1.6; text-transform: uppercase; letter-spacing: .06em; }
.teaser-link { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.section-dark .teaser-link .text-link { color: var(--mint); border-color: var(--mint); }
/* .button.light is an orange fill, which disappears on this section now that the panel itself is
   orange — invert it to the black fill the other orange sections use for their CTA. */
#principles .teaser-link .button.light,
#investment .teaser-link .button.light { background: var(--navy-3); border-color: var(--navy-3); color: var(--paper); }
#principles .teaser-link .button.light:hover,
#investment .teaser-link .button.light:hover { background: #232323; border-color: #232323; }
.pattern-map { padding: .8rem; border: 1px solid var(--white-line); border-radius: var(--r-lg); background: rgba(255,255,255,.04); }
.pattern-scenario { margin: 0 1.2rem 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .92rem; line-height: 1.45; }
.pattern-scenario strong { color: var(--navy); }
.map-row { display: grid; grid-template-columns: 68px 1fr auto; gap: 1rem; align-items: center; min-height: 96px; padding: 1rem 1.2rem; border-bottom: 1px solid var(--white-line); }
.map-row:last-child { border-bottom: 0; }
.map-row > span { color: var(--mint); font: 500 .66rem var(--mono); }
.map-row h3 { margin: 0 0 .25rem; font-size: 1.2rem; letter-spacing: -.035em; }
.map-row p { margin: 0; color: var(--paper); font-size: .88rem; }
.map-row em { padding: .4rem .55rem; border-radius: 999px; background: rgba(235,100,44,.12); color: var(--mint); font: normal 500 .68rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.page-section:not(.section-dark) .pattern-map,
.section:not(.section-dark) .pattern-map { border-color: var(--line); background: var(--paper); box-shadow: var(--shadow); }
.page-section:not(.section-dark) .pattern-map .map-row,
.section:not(.section-dark) .pattern-map .map-row { border-bottom-color: var(--line); }
.page-section:not(.section-dark) .pattern-map .map-row > span,
.section:not(.section-dark) .pattern-map .map-row > span { color: var(--mint-dark); }
.page-section:not(.section-dark) .pattern-map .map-row p,
.section:not(.section-dark) .pattern-map .map-row p { color: var(--muted); }
.page-section:not(.section-dark) .pattern-map .map-row em,
.section:not(.section-dark) .pattern-map .map-row em { background: var(--mint-wash); color: var(--mint-dark); }

.capability-grid { display: grid; grid-template-columns: repeat(2,1fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); box-shadow: var(--shadow); }
.capability-card { position: relative; display: flex; flex-direction: column; min-height: 240px; padding: clamp(2rem,4vw,3.5rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .25s, transform .25s; }
.capability-card:nth-child(even) { border-right: 0; }
.capability-card:nth-last-child(-n+2) { border-bottom: 0; }
.capability-card:hover { z-index: 1; background: var(--mint-wash); }
.capability-card > span { color: var(--mint-dark); font: 500 .68rem var(--mono); }
.capability-card h3 { max-width: 10ch; margin: 3rem 0 1rem; font-size: clamp(2rem,3.5vw,3.8rem); font-weight: 500; line-height: .92; letter-spacing: -.07em; }
.capability-card p { max-width: 29rem; margin: 0; color: var(--muted); }
.capability-card .text-link { align-self: flex-start; margin-top: auto; padding-top: 2.3rem; }

.capability-domains { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.capability-domain { padding: clamp(1.5rem,3vw,2.5rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow); }
.capability-domain-head .eyebrow { color: var(--mint-dark); }
.capability-domain-head h3 { margin: .75rem 0; font-size: clamp(1.5rem,2.5vw,2rem); font-weight: 500; letter-spacing: -.05em; }
.capability-domain-head p { margin: 0; color: var(--muted); font-size: .95rem; }
.capability-bullets { margin: 1.25rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .92rem; }
.capability-bullets li { margin-bottom: .45rem; }
.capability-bullets li:last-child { margin-bottom: 0; }

@keyframes method-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.method { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.method article { position: relative; min-height: 170px; padding: 1.5rem 1.4rem 1.6rem; border: 0; border-radius: var(--r-lg); background: #1a1a1a; text-align: center; transition: transform .25s ease, background .25s ease; }
.method article:hover { transform: translateY(-3px); background: #232323; }
.js .reveal.in .method article { animation: method-rise .9s cubic-bezier(.22,.61,.36,1) both; }
.js .reveal.in .method article:nth-child(1) { animation-delay: .22s; }
.js .reveal.in .method article:nth-child(2) { animation-delay: .42s; }
.js .reveal.in .method article:nth-child(3) { animation-delay: .62s; }
.js .reveal.in .method article:nth-child(4) { animation-delay: .82s; }
.method span { display: block; margin-bottom: 1.1rem; color: var(--mint); font: 500 .68rem var(--mono); letter-spacing: .08em; }
.method h3 { margin: 0 0 .6rem; color: var(--paper); font-size: 1.25rem; letter-spacing: -.04em; }
.method p { margin: 0; color: rgba(255, 254, 250, .78); font-size: .88rem; }

.leadership-band { background: var(--bone); }
.leadership-layout { display: flex; justify-content: center; }
.leadership-images { display: grid; grid-template-columns: repeat(2,1fr); gap: 2.5rem; width: 100%; max-width: 640px; margin: 0 auto; }
.leader-mini { display: flex; align-items: center; gap: 1rem; color: var(--navy); }
.leader-mini picture { position: relative; display: block; width: 84px; height: 84px; flex-shrink: 0; border-radius: var(--r-sm); overflow: hidden; }
.leader-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(1) contrast(1.04); }
.leader-mini h3 { margin: .25rem 0 0; font-size: 1.15rem; letter-spacing: -.03em; }
.leader-mini span { color: var(--muted); font: 500 .64rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* Bottom padding tightened (was clamp(2rem,3vw,3rem)) — that much space below the contact
   card read as a big dead gap before the build-section box right beneath it. */
.contact-enterprise { background: #1b1b1b; padding: clamp(1rem,1.5vw,1.5rem) 0 clamp(.5rem,1vw,1rem); }
.buyer-fit { padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important; }
.contact-card { display: grid; grid-template-columns: .85fr 1.15fr; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
/* Centered both ways — top/left-aligned left the heading and meta line stranded in the
   corner of a box this tall, instead of sitting in the middle of it. */
.contact-copy { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: clamp(1.75rem,2.75vw,2.25rem) clamp(1.5rem,2.5vw,2.25rem); background: var(--navy); color: var(--paper); }
.contact-copy h2 { margin: 0 0 1.3rem; max-width: 16ch; font-size: clamp(2.4rem,3.2vw,3.6rem); line-height: .95; letter-spacing: -.05em; font-weight: 500; }
.contact-copy p { max-width: 28rem; color: var(--paper); }
.value-stack { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.value-stack li { position: relative; margin-bottom: .85rem; padding-left: 1.35rem; color: var(--paper); font-size: .95rem; }
.value-stack li::before { content: "✓"; position: absolute; left: 0; color: var(--mint); font-weight: 700; }
.form-intro { grid-column: 1 / -1; margin: 0 0 -.25rem; color: var(--muted); font-size: .92rem; }
.label-optional { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.field input::placeholder, .field textarea::placeholder { color: var(--navy); opacity: 1; }
.contact-meta { display: grid; gap: .85rem; margin-top: 1.1rem; padding-top: .85rem; border-top: 1px solid var(--white-line); font: 400 .68rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.contact-meta span::before { content: "•"; margin-right: .65rem; color: var(--mint); }
.form-shell { padding: clamp(1.5rem,2.5vw,2.25rem); background: var(--soft); border-left: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.field { display: block; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: .3rem; color: var(--navy); font: 600 .64rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.field input, .field textarea, .field select { width: 100%; border: 0; border-bottom: 1px solid rgba(16, 43, 58, 0.28); border-radius: 0; outline: 0; padding: .5rem 0; background: transparent; color: var(--navy); font-size: .92rem; }
.field textarea { min-height: 72px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23102b3a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; background-size: .8rem; }
.field select:invalid { color: rgba(16, 43, 58, .55); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--navy); box-shadow: 0 2px 0 var(--mint-dark); }
.form-footer { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .3rem; }
.form-footer small { max-width: 22rem; color: var(--muted); line-height: 1.45; }
.form-footer small a { color: var(--navy); border-bottom: 1px solid rgba(16, 43, 58, 0.28); }
.form-footer small a:hover { color: var(--mint-dark); border-color: var(--mint-dark); }
.form-status { grid-column: 1/-1; margin: 0; font-size: .9rem; }
.form-status-success { color: var(--mint-dark); font-weight: 600; }
.form-status-error { color: #9b3b3b; font-weight: 600; }
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }


.page-section { padding: clamp(4.5rem,7.5vw,7.5rem) 0; }
/* Subpages no longer have a subnav owning the fixed-nav clearance, so the first section does. */
#main > .page-section:first-child { padding-top: calc(clamp(4.5rem,7.5vw,7.5rem) + var(--announce-h, 0px)); }
.page-title-row { display: grid; grid-template-columns: 1fr .5fr; gap: 4rem; align-items: end; margin-bottom: 4rem; }
.page-title-row h1,
.page-title-row h2 { margin: .7rem 0 0; max-width: 13ch; font-size: clamp(2.8rem,5vw,5.5rem); line-height: .92; letter-spacing: -.07em; font-weight: 500; color: var(--navy); }
.page-title-row p { color: var(--muted); }
/* Company page ("who we are") ran noticeably larger type/spacing than its content warrants.
   Scoped to its two section IDs so the shared .page-section/.page-title-row rhythm used by
   other subpages (approach, philosophy, newsletter, privacy) is untouched. */
#leadership { padding-bottom: clamp(2.5rem,4vw,4rem); }
#main > #leadership:first-child { padding-top: calc(clamp(5.5rem,9vw,9rem) + var(--announce-h, 0px)); }
#principles { padding: clamp(2.5rem,4vw,4rem) 0; }
#leadership .page-title-row, #principles .page-title-row { gap: 2.5rem; margin-bottom: 2rem; }
#leadership .page-title-row, #principles .page-title-row { grid-template-columns: 1fr; text-align: center; justify-items: center; }
#principles .teaser-link { justify-content: center; }
#leadership .page-title-row h1, #principles .page-title-row h2 { font-size: clamp(1.9rem,3.2vw,3.1rem); }
#leadership .page-title-row h1, #principles .page-title-row h2 { max-width: none; }
/* Philosophy and approach pages ran the same oversized rhythm as the company page. Same fix:
   generous top clearance under the fixed nav on each page's first section (so it doesn't
   repeat the too-tight mistake made on company.html initially), tighter padding and smaller
   title type everywhere else. */
#start, #infrastructure, #systems,
#stages, #confidence, #investment { padding: clamp(2.5rem,4vw,4rem) 0; }
#main > #start:first-child, #main > #confidence:first-child {
  padding-top: calc(clamp(5.5rem,9vw,9rem) + var(--announce-h, 0px));
}
#start .page-title-row, #systems .page-title-row,
#stages .page-title-row, #investment .page-title-row {
  grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 2rem; text-align: center; justify-items: center;
}
#investment .page-title-row h1, #systems .page-title-row h2 { max-width: none; }
#investment .pricing-note { text-align: center; }
#investment .teaser-link, #systems .teaser-link { justify-content: center; }
#investment .detail-grid { justify-items: center; }
/* Tightened: five short steps don't need a full-height band. Less padding top and bottom, and a
   shorter gap under the headline, so the timeline reads as one strip rather than a whole screen. */
#confidence { padding: clamp(1.75rem,2.6vw,2.5rem) 0; }
/* Nothing above the timeline now that the headline is gone, so this has to carry the whole gap
   between the fixed nav and the first dot — the dots sit on the top rule and their halo would
   otherwise crowd the nav. */
#main > #confidence:first-child { padding-top: calc(72px + var(--announce-h, 0px) + clamp(2.75rem,4.5vw,4.25rem)); }
#start .page-title-row h1, #systems .page-title-row h2,
#investment .page-title-row h1 {
  font-size: clamp(1.9rem,3.2vw,3.1rem);
}
#infrastructure .section-head { margin-bottom: 1.75rem; justify-items: center; text-align: center; }
#infrastructure .section-head .display { max-width: none; font-size: clamp(1.9rem,3.2vw,2.75rem); }
.detail-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
#investment .detail-grid { gap: .85rem; }
#investment .detail-card { min-height: 220px; padding: 1.4rem; border: 0; border-radius: var(--r-lg); background: #1a1a1a; text-align: center; }
#investment .detail-card span { color: var(--mint); font: 500 .63rem var(--mono); }
#investment .detail-card h3 { margin: 2.25rem 0 .6rem; color: var(--paper); font-size: 1.35rem; line-height: 1; letter-spacing: -.05em; }
#investment .detail-card p { margin: 0; color: rgba(255, 254, 250, .78); font-size: .9rem; }
/* The accent card was an orange fill, which has nothing to stand against now that the panel
   itself is orange. Flipped to paper so the free first step is still the one card that reads
   differently from the other two. */
#investment .detail-card.accent { background: var(--paper); color: var(--navy); }
#investment .detail-card.accent span { color: var(--mint-dark); }
#investment .detail-card.accent h3 { color: var(--navy); }
#investment .detail-card.accent p { color: rgba(0,0,0,.72); }
/* Webinar landing page (webinar-funnel.html) is a two-panel screen: the orange #webinar-hero
   pitch occupies the top half and the #register Luma embed the bottom half, so the form is
   visible without hunting for it. Everything in the hero is sized off vh so the pitch
   (headline, agenda, date/time, host, CTA) still compresses to fit its half. This is an
   Instagram-traffic funnel page: the announce bar ("Join free live webinar") is redundant once
   you're already on this page, and the shared site footer's nav links just give people an exit
   path instead of the sign-up button, so both are hidden here (.webinar-page on <body>). */
.webinar-page .announce-bar, .webinar-page .site-footer { display: none; }
/* Panels swapped: the pitch panel is now the orange one and the registration panel is black.
   Orange leads because it's the brand's loudest surface and the pitch is what has to stop the
   scroll; the form then sits on black, which reads as the quieter "do the thing" half. */
#webinar-hero { box-sizing: border-box; display: flex; min-height: 50vh; background: var(--mint); color: var(--navy); overflow: hidden; }
#main > #webinar-hero:first-child { padding: calc(72px + var(--announce-h, 0px)) 0 clamp(1rem, 2vh, 1.5rem); }
#webinar-hero .wrap { display: flex; flex-direction: column; justify-content: center; gap: clamp(.7rem, 1.6vh, 1.3rem); }
#webinar-hero .page-title-row { grid-template-columns: 1fr; gap: .3rem 3rem; align-items: center; margin-bottom: 0; margin-top: clamp(1.75rem, 4.5vh, 3.5rem); text-align: center; }
#webinar-hero .page-title-row h1 { margin: 0 auto; max-width: none; color: var(--navy); font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.06; }
#webinar-hero .page-title-row h1 strong { display: block; font-weight: 700; }
#webinar-hero .page-title-row h1 .hero-title-lite { display: block; font-weight: 400; }
#webinar-hero .page-title-row > p { color: var(--navy); opacity: .74; font-size: 1rem; }
/* Columns sized to their own content (not equal 1fr) and the bar shrunk to fit that content,
   instead of equal thirds stretched to a fixed width — equal thirds left a big dead gap after
   "Virtual" since that column's text is much shorter than "Wed, Oct 21" or "10–11 AM MDT". */
#webinar-hero .detail-grid { grid-template-columns: repeat(3, auto); width: fit-content; max-width: 100%; gap: .8rem; margin: 0 auto; }
/* Charcoal grey boxes on the orange field, with the type itself carrying the orange — the same
   grey card the rest of the site uses, so these read as objects sitting on the panel rather than
   as orange-on-orange outlines, which is what they'd be now that the panel is the brand orange.
   No orange edge on the boxes themselves — the orange lives in the type. */
#webinar-hero .detail-item { padding: .7rem 2.2rem; background: #1c1c1c; border: 1px solid rgba(255,254,250,.14); border-radius: 4px; box-shadow: 0 14px 30px -18px rgba(0,0,0,.55); }
#webinar-hero .detail-item h3 { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -.03em; color: var(--mint); }
#webinar-hero .hero-agenda { border-top: 1px solid rgba(0,0,0,.22); padding-top: clamp(.9rem, 2vh, 1.4rem); border-bottom: 1px solid rgba(0,0,0,.22); padding-bottom: clamp(.8rem, 1.8vh, 1.2rem); text-align: center; }
#webinar-hero .hero-agenda-label { display: block; margin: 0 auto .75rem; max-width: 30ch; color: var(--navy); font: 500 clamp(1.3rem, 2.1vw, 1.9rem)/1.05 var(--heading); letter-spacing: -.05em; text-transform: none; opacity: 1; }
/* Capped column width + centered, instead of 1fr stretching each card edge-to-edge across
   this very wide shell — the cards only need to be as wide as their copy. */
#webinar-hero .hero-agenda ul { display: grid; grid-template-columns: repeat(3, minmax(0, 350px)); justify-content: center; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
@keyframes agenda-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Solid grey, same as the other restyled cards site-wide — the old faint orange-on-orange
   tint read as almost no box at all against this section's orange background. */
#webinar-hero .hero-agenda li { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 0; text-align: left; background: #1c1c1c; border: 1px solid rgba(255,254,250,.14); border-radius: 4px; padding: .95rem 1.2rem; color: var(--paper); transition: transform .25s ease, background .25s ease; }
#webinar-hero .hero-agenda li:hover { transform: translateY(-3px); background: #262626; }
.js .reveal.in #webinar-hero .hero-agenda li { animation: agenda-rise .9s cubic-bezier(.22,.61,.36,1) both; }
.js .reveal.in #webinar-hero .hero-agenda li:nth-child(1) { animation-delay: .22s; }
.js .reveal.in #webinar-hero .hero-agenda li:nth-child(2) { animation-delay: .45s; }
.js .reveal.in #webinar-hero .hero-agenda li:nth-child(3) { animation-delay: .68s; }
#webinar-hero .hero-agenda li strong { display: block; font-size: .95rem; font-weight: 500; line-height: 1.35; letter-spacing: -.015em; }
#webinar-hero .hero-footer { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.4rem 2rem; border-top: 1px solid rgba(0,0,0,.22); padding-top: clamp(.8rem, 1.8vh, 1.3rem); text-align: center; }
#webinar-hero .hero-host { display: flex; align-items: center; gap: .85rem; }
#webinar-hero .hero-host img { width: 46px; height: 46px; border-radius: 999px; object-fit: cover; filter: grayscale(1); flex-shrink: 0; }
#webinar-hero .hero-host p { margin: 0; color: var(--navy); font-size: 1rem; text-align: left; }
#webinar-hero .hero-host-role { display: block; }
@media (max-width: 760px) {
  /* Same single-viewport goal as desktop: an Instagram visitor should see the entire pitch
     (headline, agenda, date/time, host, CTA) without scrolling, so every block below is
     compacted hard — smaller type, inline agenda rows instead of stacked cards, a 3-up
     detail strip instead of 3 stacked rows, and a smaller host/button footer. */
  #main > #webinar-hero:first-child { padding: 72px 0 .85rem; }
  #webinar-hero .wrap { gap: .85rem; }
  #webinar-hero .page-title-row { margin-top: .4rem; gap: .1rem; }
  #webinar-hero .page-title-row h1 { font-size: 1.7rem; line-height: 1.14; }
  #webinar-hero .hero-agenda { padding-top: .9rem; padding-bottom: .8rem; }
  #webinar-hero .hero-agenda-label { font-size: 1.05rem; margin-bottom: .6rem; }
  #webinar-hero .hero-agenda ul { grid-template-columns: 1fr; gap: .5rem; }
  #webinar-hero .hero-agenda li { flex-direction: row; align-items: center; min-height: 0; gap: .7rem; padding: .7rem .9rem; border-radius: 4px; }
  #webinar-hero .hero-agenda li strong { font-size: .8rem; line-height: 1.25; font-weight: 600; }
  #webinar-hero .detail-grid { grid-template-columns: repeat(3,1fr); gap: .5rem; margin-top: 0; }
  #webinar-hero .detail-item { padding: .55rem .4rem; text-align: center; }
  #webinar-hero .detail-item h3 { margin: 0; font-size: .78rem; }
  #webinar-hero .hero-footer { flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding-top: .85rem; text-align: center; }
  #webinar-hero .hero-host img { width: 36px; height: 36px; }
  #webinar-hero .hero-host p { font-size: .82rem; }
}
/* Landing-page variants: no nav links, no footer columns. The only way off this page
   should be registering, so every competing exit link is dropped. */
.site-nav-bare .nav-inner { justify-content: center; }
.site-footer-bare .footer-bottom { border-top: 0; justify-content: center; gap: 1.5rem; }
.site-footer-bare .footer-bottom a { color: var(--paper); text-decoration: underline; }

#register { display: flex; align-items: center; min-height: 50vh; padding: clamp(1.5rem, 3.5vh, 2.75rem) 0; background: var(--navy-3); color: var(--paper); }
.register-block { max-width: 46rem; margin-inline: auto; text-align: center; }
/* Fixed, not vh-based: the Luma card is a fixed-height document, so any height that flexes with
   the viewport either clips it or leaves the iframe with its own scrollbar nested inside the page
   scroll. Measured at ~704px in the desktop column and ~716px on mobile (the square event image
   is what drives the difference), so 730px clears both with a little slack. */
/* Hairline light border now that the panel behind it is black — a black border on black left the
   Luma card floating with no edge at all. */
.register-embed { display: block; width: 100%; height: 730px; border: 1px solid rgba(255,254,250,.16); border-radius: 4px; background: #1a1a1a; }
.register-fallback { margin: .9rem 0 0; font-size: .85rem; color: rgba(255,254,250,.72); }
.register-fallback a { color: var(--mint); text-decoration: underline; }
@media (max-width: 760px) { #register { min-height: 0; } }

/* Desktop: the pitch and the registration form sit side by side in one non-scrolling screen,
   so the form is never something you have to scroll to find. Below this width the two stack
   (pitch on top, form underneath) because a half-width column can't hold either comfortably. */
@media (min-width: 1100px) {
  .webinar-page #main { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
  .webinar-page #main > section { min-height: 0; }
  .webinar-page #main .wrap { width: min(100% - 4rem, 40rem); }
  #main > #webinar-hero:first-child { padding: calc(72px + var(--announce-h, 0px)) 0 72px; }
  #webinar-hero .hero-agenda ul { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  #webinar-hero .hero-agenda li { flex-direction: row; align-items: center; gap: .9rem; }
  #webinar-hero .detail-grid { grid-template-columns: repeat(3, 1fr); }
  #webinar-hero .detail-item { padding: .7rem .5rem; text-align: center; }
  #register { padding: calc(72px + var(--announce-h, 0px)) 0 72px; }
}

.stage-list { border-top: 1px solid var(--line); }
.stage-item { display: grid; grid-template-columns: .25fr .75fr 1.3fr; gap: 1.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.stage-item span { color: var(--mint-dark); font: 500 .66rem var(--mono); }
.stage-item h3 { margin: 0; font-size: 1.25rem; letter-spacing: -.045em; }
.stage-item p { margin: 0; color: var(--muted); font-size: .92rem; }
.stage-item .stage-sub { display: block; margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--line); font-size: .85rem; line-height: 1.5; }
.stage-item .stage-sub strong { color: var(--navy); font-weight: 600; }
.pricing-note { margin-top: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--r-md); background: #1a1a1a; color: rgba(255, 254, 250, .78); font-size: .92rem; line-height: 1.45; }
.pricing-note strong { color: var(--paper); }
.pricing-note + .pricing-note { margin-top: .75rem; }
.team-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 1140px; margin-inline: auto; }
/* Grey, not pure black: the founders section is now the dark panel, so a black card on a black
   ground would have no edge at all. Same #1a1a1a as the method/system cards elsewhere, with the
   orange carried by the name alone — no edge on the card. */
.team-card { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center; padding: clamp(1.1rem,2vw,1.6rem); overflow: hidden; border-radius: var(--r-lg); background: #1a1a1a; color: var(--paper); transition: background .25s ease; }
.team-card:hover { background: #232323; }
@media (prefers-reduced-motion: reduce) { .team-card { transition: none; } }
.team-photo { width: 120px; height: 120px; align-self: center; border-radius: var(--r-sm); overflow: hidden; }
.team-photo picture { display: block; width: 100%; height: 100%; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: grayscale(1); }
.team-copy { align-self: center; padding: 0; }
.team-copy h2 { margin: 0; color: var(--mint); font-size: clamp(1.5rem,2.2vw,2rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.05; }
.team-bio { margin: .6rem 0 0; color: var(--paper); font-size: .9rem; line-height: 1.55; opacity: .82; }
.legal { max-width: 48rem; }
.legal h2 { margin-top: 2.5rem; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.legal p, .legal li { color: var(--muted); }
.legal a:not(.text-link) { border-bottom: 1px solid rgba(16, 43, 58, 0.28); }
.legal a:not(.text-link):hover { color: var(--mint-dark); border-color: var(--mint-dark); }

/* Shrunk from the default .section rhythm: this section was running noticeably taller than
   its neighbors, so padding, the head spacing/heading size, and the card sizing are all
   scaled down together here. */
/* Sits above the fixed page-edge lines (z-index 45) and covers them edge-to-edge with its own
   navy background, then re-draws the accent as a top/bottom rule instead of side rails —
   this section reads as a horizontal band, not a continuation of the vertical page frame. */
/* Top border and top padding are gone — the dark .build-section flows directly into the black
   #systems-built with no gap. Bottom border stays. */
.systems-built { position: relative; z-index: 46; padding: clamp(2.75rem, 5.5vw, 4.5rem) 0 clamp(2.75rem, 5.5vw, 4.5rem); border-bottom: var(--edge-w) solid var(--edge-warm); background: var(--navy); color: var(--paper); }
.systems-built .section-head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); text-align: center; }
.systems-built .section-head .display { max-width: none; margin-inline: auto; font-size: clamp(1.9rem, 3.2vw, 2.75rem); color: var(--paper); }
/* The note below the cards inherits body copy color by default, which is unreadable once this
   section's background goes dark — the cards themselves stay white/paper regardless. */
.systems-built-note { color: var(--paper); }
.systems-built-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); }
.systems-built-grid-home { grid-template-columns: repeat(2, 1fr); }
.systems-built-grid-home .system-built-card { text-align: center; align-items: center; }
/* Flat grey cards. The section behind them is pure black, so a single solid fill one step lighter
   than the background is enough separation — no gradient, glow, or shadow. */
.system-built-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(1.5rem, 2.6vw, 2.1rem); border: 0; border-radius: var(--r-lg); background: #1a1a1a; transition: transform .5s cubic-bezier(.22,.9,.3,1), background .5s ease; }
.system-built-card:hover { transform: translateY(-5px); background: #232323; }
@media (prefers-reduced-motion: reduce) { .system-built-card { transition: none; } }
.system-built-card .eyebrow { color: var(--mint); margin-bottom: .5rem; }
.system-built-card h3 { margin: 0 0 .75rem; color: var(--paper); font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }
.system-built-card p { margin: 0; color: rgba(255, 254, 250, .78); font-size: .85rem; line-height: 1.55; }
.system-built-card ul { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .88rem; }
.system-built-card ul li { margin-bottom: .35rem; }
.system-built-card ul li:last-child { margin-bottom: 0; }
.system-built-card.capability { border-style: dashed; background: var(--soft); }
.system-built-note { margin: 1.5rem 0 0; color: var(--muted); font: 400 .68rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.systems-built-note .text-link { display: inline; margin-left: .35rem; font-size: inherit; letter-spacing: inherit; text-transform: inherit; }
.page-title-row .text-link { display: inline-flex; margin-top: .5rem; }

.mobile-cta-bar {
  display: none;
  position: fixed;
  inset: auto 0 0;
  z-index: 35;
  padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 254, 250, .96);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px);
  transform: translateY(110%);
  transition: transform .25s ease;
}
.mobile-cta-bar.visible { transform: translateY(0); }
.mobile-cta-bar .button { width: 100%; min-height: 44px; }

.philosophy-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; }
.philosophy-pillar { padding: clamp(1.3rem, 2.2vw, 1.85rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow); }
.philosophy-pillar span { color: var(--mint-dark); font: 500 .66rem var(--mono); }
.philosophy-pillar h3 { margin: 1.5rem 0 .55rem; font-size: 1.4rem; letter-spacing: -.045em; }
.philosophy-pillar p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
@keyframes build-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.build-eyebrow { margin: 0 0 1.25rem; color: var(--mint); text-align: center; }
.build-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; max-width: 64rem; margin: 0 auto; padding: 0; list-style: none; }
.build-grid li { position: relative; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.3rem 1.5rem; overflow: hidden; border: 0; border-radius: var(--r-md); background: #1a1a1a; color: var(--paper); font-size: 1rem; line-height: 1.35; text-align: center; transition: transform .25s ease, background .25s ease; }
.build-grid li::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(235,100,44,.16); }
.build-grid li:hover { transform: translateY(-3px); background: #232323; }
.js .reveal.in .build-grid li { animation: build-rise .85s cubic-bezier(.22,.61,.36,1) both; }
.js .reveal.in .build-grid li:nth-child(1) { animation-delay: .15s; }
.js .reveal.in .build-grid li:nth-child(2) { animation-delay: .3s; }
.js .reveal.in .build-grid li:nth-child(3) { animation-delay: .45s; }
.js .reveal.in .build-grid li:nth-child(4) { animation-delay: .6s; }

@keyframes system-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.system-types-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.system-type { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.4rem clamp(1.1rem,1.8vw,1.4rem) 1.5rem; overflow: hidden; border: 1px solid rgba(235,100,44,.22); border-radius: var(--r-lg); background: var(--navy); text-align: center; box-shadow: 0 18px 38px -26px rgba(0,0,0,.6); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.system-type::after { content: ""; position: absolute; left: 50%; top: -170px; width: 260px; height: 260px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(235,100,44,.3), transparent 68%); pointer-events: none; }
.system-type:hover { transform: translateY(-4px); border-color: rgba(235,100,44,.55); box-shadow: 0 26px 48px -22px rgba(235,100,44,.42); }
.js .reveal.in .system-type { animation: system-rise .9s cubic-bezier(.22,.61,.36,1) both; }
.js .reveal.in .system-type:nth-child(1) { animation-delay: .15s; }
.js .reveal.in .system-type:nth-child(2) { animation-delay: .27s; }
.js .reveal.in .system-type:nth-child(3) { animation-delay: .39s; }
.js .reveal.in .system-type:nth-child(4) { animation-delay: .51s; }
.js .reveal.in .system-type:nth-child(5) { animation-delay: .63s; }
.js .reveal.in .system-type:nth-child(6) { animation-delay: .75s; }
.system-type span { position: relative; z-index: 1; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid rgba(235,100,44,.45); border-radius: 50%; background: rgba(235,100,44,.14); color: var(--mint); font: 500 .66rem var(--mono); }
.system-type h3 { position: relative; z-index: 1; margin: .85rem 0 0; font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.05; letter-spacing: -.045em; font-weight: 500; color: var(--paper); white-space: nowrap; }
.system-type p { position: relative; z-index: 1; margin: .6rem 0 0; color: rgba(255,254,250,.68); font-size: .88rem; line-height: 1.5; }
/* Touch devices get the descriptions outright — there is no hover to reveal them with. */
@media (hover: hover) and (pointer: fine) {
  .system-type p { margin-top: 0; max-height: 0; opacity: 0; transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease; }
  .system-type:hover p, .system-type:focus-within p { margin-top: .6rem; max-height: 9rem; opacity: 1; }
}

/* ---- Newsletter: broadsheet front page (newsletter.html #feed) ----
   Set as newsprint rather than as cards: paper ground, black ink, orange as the spot colour a
   press would run as its second plate. Nothing here gets a radius, a fill or a shadow — hairline
   rules do all the separating, which is what makes it read as print instead of as UI. */
/* Newsprint faces are scoped to this section so the Poppins/IBM Plex brand type is untouched
   everywhere else. Playfair Display is a Didone — the high-contrast serif a broadsheet sets its
   nameplate and headlines in. Source Serif 4 is the text face: a real newspaper never sets body
   copy in its display face. Georgia is the fallback, so a failed webfont still lands on a serif
   rather than dropping the whole page back to sans. */
#feed { --news-display: "Playfair Display", Georgia, "Times New Roman", serif;
        --news-text: "Source Serif 4", Georgia, "Times New Roman", serif;
        background: var(--paper); padding-bottom: clamp(3rem, 6vw, 5.5rem);
        font-family: var(--news-text); }
#feed h1, #feed h3 { font-family: var(--news-display); }
/* The generic first-section padding (7.5vw, ~147px on a wide screen) strands the folio line in
   open space. A newspaper runs its folio tight under the top of the sheet, so this clears the
   72px fixed nav plus the announce bar and little else. */
#main > #feed:first-child { padding-top: calc(72px + var(--announce-h, 0px) + 1.25rem); }
/* The page-wide blueprint grid reads as a printing defect under newsprint, so this one section
   lays down a clean sheet over it. */
#feed .wrap { position: relative; background: var(--paper); }

.masthead { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); text-align: center; }
/* Folio line: place · dateline · desk, the strip a broadsheet runs above its nameplate. The
   rules sit on the row itself so they close up against the nameplate below. */
.masthead-folio { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); font: 600 .72rem var(--news-text); letter-spacing: .16em; text-transform: uppercase; }
.masthead-folio .masthead-dateline { color: var(--mint); }
/* Set heavy and near-neutral: a Didone's thin strokes close up and break if you track it as
   tightly as the Poppins headlines elsewhere on the site. */
.masthead-name { margin: clamp(1.1rem, 2.4vw, 1.9rem) auto clamp(.9rem, 1.8vw, 1.3rem); max-width: 22ch; font-size: clamp(2.4rem, 5.6vw, 4.9rem); font-weight: 800; line-height: .97; letter-spacing: -.02em; text-wrap: balance; }
/* The double rule — one heavy, one hairline, with daylight between — is the most recognisable
   piece of newspaper furniture, so it closes the masthead. Painted as two background gradients
   rather than borders: an element only has one border-top, and an outer box-shadow gets clipped
   to the border-box, which collapses the pair into a single thick bar. */
.news-feed-status { margin: 0; padding-top: 1.1rem; background-repeat: no-repeat; background-image: linear-gradient(var(--navy), var(--navy)), linear-gradient(var(--navy), var(--navy)); background-size: 100% 3px, 100% 1px; background-position: 0 0, 0 6px; font: 600 .74rem var(--news-text); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }

.news-card-link { display: block; color: inherit; }
.news-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; font: 700 .68rem var(--news-text); letter-spacing: .11em; text-transform: uppercase; }
.news-meta .news-source { color: var(--mint); }
.news-meta .news-dot, .news-meta time { color: rgba(0,0,0,.45); font-weight: 400; }
.news-summary { color: rgba(0,0,0,.7); font-family: var(--news-text); }
.news-empty { color: var(--muted); }

/* Lead story: runs the full measure above the rack, headline left and summary set beside it so
   the eye lands on it before the columns. */
.news-lead { padding-bottom: clamp(1.4rem, 2.6vw, 2.1rem); margin-bottom: clamp(1.4rem, 2.6vw, 2.1rem); border-bottom: 3px solid var(--navy); }
.news-lead .news-card-link { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1rem, 3vw, 3rem); align-items: start; }
.news-lead .news-meta { grid-column: 1 / -1; }
.news-lead h3 { margin: .7rem 0 0; font-size: clamp(1.95rem, 4.1vw, 3.4rem); font-weight: 700; line-height: 1.06; letter-spacing: -.015em; text-wrap: balance; }
.news-lead .news-summary { margin: .85rem 0 0; font-size: 1.05rem; line-height: 1.58; }
/* No summary on this item, so the headline takes the whole measure instead of leaving a hole. */
.news-lead .news-card-link:not(:has(.news-summary)) h3 { grid-column: 1 / -1; max-width: 26ch; }

/* The rack. Real multi-columns, so stories flow top-to-bottom down one column and continue in
   the next — newsprint reading order, not a row-wise card grid. */
.news-columns { columns: 4; column-gap: clamp(1.4rem, 2.6vw, 2.4rem); column-rule: 1px solid rgba(0,0,0,.22); }
.news-card { break-inside: avoid; padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid rgba(0,0,0,.18); }
.news-card h3 { margin: .45rem 0 0; font-size: 1.06rem; font-weight: 600; line-height: 1.22; letter-spacing: -.025em; }
.news-card .news-summary { margin: .45rem 0 0; font-size: .84rem; line-height: 1.5; }

/* Ink-press hover: the headline takes an orange rule and the story warms, like a marked-up
   proof. Transform/lift would break the illusion of a flat printed sheet. */
.news-lead .news-card-link h3, .news-card .news-card-link h3 { box-shadow: inset 0 -.08em 0 transparent; transition: box-shadow .2s ease, color .2s ease; }
.news-lead:hover h3, .news-card:hover h3 { color: var(--mint); box-shadow: inset 0 -.08em 0 var(--mint); }
@media (prefers-reduced-motion: reduce) { .news-lead h3, .news-card h3 { transition: none; } }

@media (max-width: 1280px) { .news-columns { columns: 3; } }
@media (max-width: 900px) {
  .news-columns { columns: 2; }
  .news-lead .news-card-link { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 620px) {
  .news-columns { columns: 1; column-rule: 0; }
  /* The folio can't hold three items across a phone, so the desk name drops and the dateline
     centres under the place line. */
  .masthead-folio { flex-direction: column; gap: .3rem; letter-spacing: .14em; }
  .masthead-folio span:last-child { display: none; }
}
.private-system-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.private-system-copy h2 { max-width: 9ch; margin: .8rem 0 1.4rem; font-size: clamp(3rem, 6vw, 6.3rem); line-height: .9; letter-spacing: -.06em; font-weight: 500; }
.private-system-copy > p:not(.eyebrow):not(.pattern-note) { max-width: 34rem; color: var(--paper); font-size: 1.05rem; }
.architecture-stack { display: grid; gap: .7rem; perspective: 900px; }
.architecture-stack > div { display: grid; grid-template-columns: .6fr 1fr; gap: 1.25rem; align-items: center; min-height: 90px; padding: 1.25rem 1.5rem; border: 1px solid var(--white-line); border-radius: var(--r-md); background: rgba(255,255,255,.07); box-shadow: 0 18px 45px rgba(0,0,0,.12); transform: translateX(calc(var(--level, 0) * 8px)); }
.architecture-stack > div:nth-child(1) { --level: 3; }
.architecture-stack > div:nth-child(2) { --level: 2; }
.architecture-stack > div:nth-child(3) { --level: 1; }
.architecture-stack > div span { color: var(--paper); font: 500 .68rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.architecture-stack > div strong { color: var(--paper); font-size: .96rem; font-weight: 500; }
.architecture-stack .architecture-foundation { border-color: rgba(235,100,44,.4); background: var(--mint); }
.architecture-stack .architecture-foundation span, .architecture-stack .architecture-foundation strong { color: var(--navy); }

@keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 7px rgba(235,100,44,.1); } 50% { box-shadow: 0 0 0 14px rgba(235,100,44,.25), 0 0 18px rgba(235,100,44,.35); } }
@keyframes line-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Drawn in light ink: this timeline only ever runs inside #confidence, which is now the dark
   panel, so the rules/dots/type that used to be black-on-orange are inverted wholesale. */
.assurance-path { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); max-width: 72rem; margin-inline: auto; border-top: 1px solid var(--white-line); }
.assurance-path::after { content: ""; position: absolute; top: -1px; left: 1.1rem; right: 1.1rem; height: 2px; background: var(--mint); transform-origin: left; }
.js .reveal.in .assurance-path::after { animation: line-draw 1.8s cubic-bezier(.22,.61,.36,1) .3s both; }
.assurance-step { position: relative; min-height: 0; padding: .9rem 1.1rem 1.1rem; border-right: 1px solid var(--white-line); text-align: center; }
.assurance-step:last-child { border-right: 0; }
.assurance-step::before { content: ""; position: absolute; top: -5px; left: 50%; margin-left: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 7px rgba(235,100,44,.1); z-index: 1; }
.js .reveal.in .assurance-step:nth-child(1)::before { animation: dot-pulse 2.4s ease .5s infinite; }
.js .reveal.in .assurance-step:nth-child(2)::before { animation: dot-pulse 2.4s ease .9s infinite; }
.js .reveal.in .assurance-step:nth-child(3)::before { animation: dot-pulse 2.4s ease 1.3s infinite; }
.js .reveal.in .assurance-step:nth-child(4)::before { animation: dot-pulse 2.4s ease 1.7s infinite; }
.js .reveal.in .assurance-step:nth-child(5)::before { animation: dot-pulse 2.4s ease 2.1s infinite; }
.assurance-step span { color: var(--mint); font: 500 .66rem var(--mono); }
.assurance-step h3 { margin: 1.5rem 0 .45rem; color: var(--paper); font-size: 1.1rem; letter-spacing: -.035em; }
.assurance-step p { margin: 0; color: rgba(255,254,250,.78); font-size: .82rem; line-height: 1.45; }

.privacy-shell { display: grid; grid-template-columns: .62fr 1.38fr; gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.privacy-summary { position: sticky; top: 110px; padding: clamp(1.6rem, 3vw, 2.25rem); border-radius: var(--r-lg); background: var(--navy); color: var(--paper); box-shadow: var(--shadow); }
.privacy-summary h2 { margin: .75rem 0 1.75rem; max-width: 8ch; font-size: clamp(2rem, 3.5vw, 3.4rem); line-height: .94; letter-spacing: -.055em; font-weight: 500; }
.privacy-facts { border-top: 1px solid var(--white-line); }
.privacy-facts p { display: grid; grid-template-columns: .55fr 1fr; gap: 1rem; margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--white-line); }
.privacy-facts strong { color: var(--mint); font: 500 .68rem var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.privacy-facts span { color: var(--paper); font-size: .88rem; }
.legal { max-width: none; }
.legal-intro { margin: 0 0 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); font-size: 1.2rem; line-height: 1.55; }
.legal-section { padding: 1rem 0 2.75rem; scroll-margin-top: 155px; }
.legal-section + .legal-section { border-top: 1px solid var(--line); padding-top: 2.75rem; }
.legal-section h2 { margin: .8rem 0 1rem; color: var(--navy); font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.04em; text-transform: none; font-weight: 500; }
.legal-section p { max-width: 48rem; }
.privacy-contact { padding: 2rem; border: 0 !important; border-radius: var(--r-lg); background: var(--mint-wash); }
.legal-updated { margin: 2rem 0 0; font: 400 .68rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }

/* Closes off the bottom of the two vertical page-edge lines (body::before/::after) — they run
   top to bottom with no cap at either end by design, but the very bottom of the site reads
   better with a line across it, same as the top/bottom rule added to #systems-built. */
.site-footer { position: relative; overflow: hidden; border-bottom: var(--edge-w) solid var(--edge-warm); background: var(--navy-3); color: var(--paper); }
/* Same node-and-line canvas as the hero, just dimmer and non-interactive — a quiet
   echo of the hero visual rather than a second focal point. */
.footer-net { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .55; }
.footer-main, .footer-bottom { position: relative; z-index: 1; }
/* auto columns + justify-content:center cluster the three blocks together in the middle of the
   shell, instead of the old fr-unit columns stretching to fill it and stranding brand/contact
   at the far edges on wide screens. */
.footer-main { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: clamp(3rem, 8vw, 7rem); padding: 4rem 0; }
.footer-brand p { max-width: 19rem; color: var(--paper); font-size: .88rem; }
.footer-col strong { display: block; margin-bottom: 1rem; color: var(--paper); font: 500 .68rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.footer-col a { display: block; width: fit-content; margin: .65rem 0; color: var(--paper); font-size: .88rem; }
.footer-col a:hover { color: var(--mint); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.3rem 0; border-top: 1px solid var(--white-line); color: var(--paper); font: 400 .68rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
/* Dark boxes carry a warm edge; orange boxes carry a dark one. Inset so the line
   follows the rounded corner and never paints outside an overflow-hidden box. */
.hero-enterprise,
.contact-card,
.webinar-box,
.privacy-summary { outline: var(--edge-w) solid var(--edge-warm); outline-offset: calc(var(--edge-w) * -1); }

/* One continuous orange line down each side of the whole page, top to bottom —
   no top rail above the hero, since these are two independent verticals, not a box. */
body::before,
body::after { content: ""; position: fixed; top: 0; bottom: 0; width: var(--edge-w); background: var(--edge-warm); z-index: 45; pointer-events: none; }
body::before { left: 0; }
body::after { right: 0; }
/* Both rails drop on this page. One of them always lands on a black panel, where an orange
   vertical line reads as a stray border rather than a page edge, and the other lands on the
   orange panel where it's invisible anyway — so there's nothing to keep. */
body.webinar-page::before,
body.webinar-page::after { display: none; }

.detail-card.accent,
.architecture-stack .architecture-foundation { outline: var(--edge-w) solid var(--edge-dark); outline-offset: calc(var(--edge-w) * -1); }

/* A plain rise and fade. No scale — scaling text resamples it mid-flight, which is what
   read as a flicker rather than a settle. Slowed down (was .7s/14px) so sections glide into
   place with room to actually read them as they arrive, instead of snapping in. */
.reveal { transition: opacity 1.15s ease, transform 1.15s cubic-bezier(.22,.61,.36,1); transition-delay: var(--reveal-delay, 0s); }
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.in { opacity: 1; transform: none; }

/* The hero gets its own entrance instead of the plain rise-and-fade above: a cascade of the
   background sweep, the particle canvas zooming to rest, and the copy staggering in line by
   line. The outer .hero-enterprise box itself only ever fades — no transform — because that
   box sits at the very top of the page, and giving it a translateY like the generic .reveal
   treatment is what caused the browser to visibly nudge scroll position on load. Everything
   that actually moves is a child, clipped by this box's own overflow: hidden, so nothing here
   can affect layout or scroll. */
.js .hero-enterprise.reveal { opacity: 0; transform: none; transition: opacity .5s ease; }
.js .hero-enterprise.reveal.in { opacity: 1; }

/* This section's box is full-bleed and masks the page's fixed side rails using z-index, via
   .webinar-layout's own ::before/::after. A `transform` in transit (the generic .reveal
   slide-up) makes the browser promote this element to its own stacking context, which traps
   those z-indexed masks below the page-level rails until the transform finishes — the rails
   flash through in the meantime. Dropping the transform keeps this section out of its own
   stacking context entirely, so the masks always out-rank the rails. It only ever fades. */
.js .webinar-section.reveal { opacity: 1; transform: none; }
/* The diagonal glare sweep that used to cross the hero is gone — it read as a stray bright line
   travelling over the panel rather than as a shine. The div stays in the markup but paints
   nothing, so no HTML had to change. */
.hero-sweep { display: none; }
.js .hero-enterprise .hero-net { opacity: 0; transform: scale(1.08); transition: opacity 1.1s ease .15s, transform 1.5s cubic-bezier(.16,1,.3,1) .15s; }
.js .hero-enterprise.reveal.in .hero-net { opacity: 1; transform: scale(1); }
.js .hero-enterprise .hero-copy > * { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.js .hero-enterprise.reveal.in .hero-copy > * { opacity: 1; transform: none; }
.js .hero-enterprise.reveal.in .hero-copy > *:nth-child(1) { transition-delay: .1s; }
.js .hero-enterprise.reveal.in .hero-copy > *:nth-child(2) { transition-delay: .22s; }
.js .hero-enterprise.reveal.in .hero-copy > *:nth-child(3) { transition-delay: .34s; }
.js .hero-enterprise.reveal.in .hero-copy h1 em { animation: hero-em-glow 1.6s ease .55s both; }
@keyframes hero-em-glow {
  0% { text-shadow: 0 0 0 rgba(235,100,44,0); }
  40% { text-shadow: 0 0 28px rgba(235,100,44,.8); }
  100% { text-shadow: 0 0 0 rgba(235,100,44,0); }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-enterprise.reveal.in .hero-copy h1 em { animation: none; }
}

@media (max-width: 980px) {
  .nav-links { gap: .85rem; }
  .hero-layout, .section-head, .pattern-layout, .contact-card, .page-title-row, .private-system-layout, .privacy-shell { grid-template-columns: 1fr; }
  /* Top padding keeps its full 3rem — the heading itself fills a lot of that visual space, so it
     doesn't read as empty. Bottom padding is pure dead air after the "Colorado Based" line with
     nothing else below it, so it gets trimmed down to feel less heavy. */
  .contact-copy { padding-top: 3rem; padding-bottom: 1.75rem; }
  .form-shell { border-left: 0; border-top: 1px solid var(--line); }
  .hero-layout { gap: 5rem; }
  .hero-copy h1 { max-width: 10ch; }
  .section-head .lede { justify-self: start; }
  .method { grid-template-columns: repeat(2,1fr); }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .systems-built-grid { grid-template-columns: 1fr; }
  .philosophy-pillars, .build-grid { grid-template-columns: 1fr; }
  .system-types-grid { grid-template-columns: repeat(2, 1fr); }
  .assurance-path { grid-template-columns: repeat(2, 1fr); }
  .assurance-step { min-height: 0; padding-bottom: 1.6rem; border-bottom: 1px solid var(--white-line); }
  .privacy-summary { position: static; }
}

@media (max-width: 760px) {
  /* Retune the shared shell instead of just .wrap, so the heroes narrow by the same amount. */
  :root { --shell: min(calc(100% - 2.2rem), 1220px); }
  .site-nav { height: 64px; }
  .site-nav.scrolled { height: 50px; }
  .site-nav.scrolled .brand-logo img { height: 20px; }
  .brand-logo img { height: 26px; }
  .nav-toggle { display: block; }
  .nav-links { display: flex; position: fixed; top: calc(var(--announce-h, 0px) + var(--nav-h, 64px)); left: 0; right: 0; bottom: 0; z-index: 35; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; padding: 2rem 1.5rem; background: var(--paper); color: var(--navy); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .4s cubic-bezier(.4,0,.2,1), visibility 0s linear .4s; }
  .nav-links.open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .4s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s; }
  .nav-links.closing { visibility: visible; clip-path: inset(100% 0 0 0); transition: clip-path .4s cubic-bezier(.4,0,.2,1), visibility 0s linear .4s; }
  .nav-links.no-transition { transition: none !important; }
  .nav-links > a:not(.nav-cta) { padding: .5rem 0; color: var(--navy); border-bottom: 0; font: 600 1.3rem var(--mono); letter-spacing: .04em; text-transform: uppercase; text-align: center; }
  .nav-cta { margin-top: .5rem; padding: 1rem 2.2rem; font-size: .78rem; text-align: center; background: var(--mint); color: var(--paper); }
  body.nav-open { overflow: hidden; }
  .icp-fit-grid, .next-steps-list { grid-template-columns: 1fr; }
  .cta-band-inner { flex-direction: column; align-items: stretch; text-align: left; }
  .cta-band .button { width: 100%; }
  .hero-enterprise { margin-top: calc(68px + var(--announce-h, 0px)); min-height: 0; padding: 3rem 0 3.25rem; }
  .build-box { border-radius: var(--r-lg); }
  .webinar-box { border-radius: var(--r-lg); align-items: flex-start; }
  .webinar-box .button { width: 100%; }
  /* Only the teasers carrying a button — those stack on a phone and read as ragged when the
     link sits hard left under a much wider button. Plain link-only teasers stay left with the copy. */
  .teaser-link:has(.button) { justify-content: center; text-align: center; }
  .hero-copy h1 { max-width: none; font-size: clamp(2.6rem,11vw,3.6rem); }
  .hero-layout { gap: 4rem; }
  .capability-grid, .capability-domains, .method, .leadership-images, .detail-grid, .systems-built-grid { grid-template-columns: 1fr; }
  .mobile-cta-bar { display: block; }
  body.has-mobile-cta { padding-bottom: 5rem; }
  .capability-card { min-height: 320px; border-right: 0; border-bottom: 1px solid var(--line) !important; }
  .capability-card:last-child { border-bottom: 0 !important; }
  .method { grid-template-columns: 1fr; }
  .method article { min-height: 0; padding: 1.4rem 1.3rem 1.6rem; }
  .contact-copy h2 { max-width: none; white-space: nowrap; font-size: clamp(1.5rem, 7.2vw, 2.4rem); }
  .form-grid { grid-template-columns: 1fr; }
  .field.full, .form-footer, .form-status { grid-column: auto; }
  .form-footer { align-items: stretch; flex-direction: column; }
  .form-footer .button { width: 100%; }
  .stage-item { grid-template-columns: 42px 1fr; gap: .75rem; }
  .stage-item p { grid-column: 2; }
  .team-detail { grid-template-columns: 1fr; }
  .team-photo { width: 90px; height: 90px; }
  .system-types-grid, .assurance-path { grid-template-columns: 1fr; }
  .assurance-step { min-height: 0; padding: 1.5rem 0 1.75rem; border-right: 0; text-align: center; }
  .assurance-step::before { left: 50%; margin-left: -4.5px; }
  .assurance-step h3 { margin-top: 2.5rem; }
  .architecture-stack > div { grid-template-columns: 1fr; transform: none; }
  .privacy-facts p { grid-template-columns: 1fr; gap: .35rem; }
  /* Desktop's 3-column grid left-aligns its content by default (fine when columns sit side by
     side), but stacked to 2 columns on mobile that reads as randomly off-center — center
     everything instead: the grid items themselves, their text, and the column links (which are
     `display:block; width:fit-content`, so text-align alone won't center the link box itself). */
  .footer-main { grid-template-columns: 1fr 1fr; justify-items: center; text-align: center; }
  .footer-brand { grid-column: 1/-1; }
  .footer-col a { margin-inline: auto; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; }
}