/* ==========================================================================
   Mongoose
   --------------------------------------------------------------------------
   The page is built from the final deck: a four-step method, four pillars,
   and the people, on the visual system the site already had. Two decisions carry it.

   1. Red marks the wait. Every operation Mongoose touches has dead time in
      it: an order sits unkeyed, a request waits for someone to notice. Red
      draws the interval and the not-yet, carbon draws work that is moving.
      So red gets the rules between sections, the eyebrow tick, and the
      approval boundary a person holds. It never marks state and never marks
      Mongoose's own output, so delivered work is carbon.

   2. Two families, three roles. Geist carries display and body; IBM Plex
      Mono carries every label, figure and interval, because measurement is
      the page's second voice and tabular figures do not jitter. Geist is a
      neo-grotesque that asserts nothing, which is what a page arguing
      restraint needs its type to do; the scale does the asserting.
   ========================================================================== */

:root {
  --carbon: #14110f;
  --graphite: #5a544f;
  --wait: #f0533c;
  --wait-ink: #c1301a;
  --rule: #e6e1dc;
  --page: #ffffff;
  --max: 1180px;
  --gutter: 48px;
  --read: 760px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--page);
  color: var(--carbon);
  /* Fallbacks are neo-grotesques only, so a missed webfont is a near miss
     rather than a change of voice. */
  font-family:
    "Geist",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: transparent;
}

:where(h1, h2, h3, p, ul, ol, dl, dd, figure) {
  margin: 0;
}

:where(ul, ol) {
  padding: 0;
  list-style: none;
}

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

img {
  max-width: 100%;
}

/* --- the smoke surface --------------------------------------------------- */

#smoke {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.masthead,
main,
.colophon {
  position: relative;
  z-index: 1;
}

/* --- shared layout ------------------------------------------------------- */

.measure {
  width: min(calc(100% - var(--gutter)), var(--max));
  margin: 0 auto;
}

/* The bar is transparent over the hero and only takes a scrim once content
   starts passing underneath it. The scrim is translucent so the smoke still
   shows through; the blur keeps the field and dissolves the text under it. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: 22px;
  border-bottom: 1px solid transparent;
}

.masthead.is-stuck {
  background: rgb(255 255 255 / 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rule);
}

.masthead-inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}

.nav {
  display: flex;
  gap: clamp(14px, 1.8vw, 26px);
  margin-right: auto;
  min-width: 0;
}

/* Sentence case, not mono caps: the wordmark beside it is already tracked
   uppercase. Mono is reserved for measurement, and a nav link is not one. */
.nav a {
  color: var(--graphite);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.008em;
  white-space: nowrap;
}

.nav a:hover,
.nav a:focus-visible,
.nav a.is-current {
  color: var(--carbon);
}

/* The same red that marks intervals marks the seams between sections. */
.section {
  padding-block: clamp(84px, 12vh, 144px);
  scroll-margin-top: 84px;
  border-top: 1px solid rgb(240 83 60 / 0.3);
}

/* --- brand -------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--carbon);
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: 40px;
  height: 34px;
  object-fit: contain;
  object-position: left center;
}

.brand-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.36em;
  line-height: 1;
  white-space: nowrap;
}

/* --- hero --------------------------------------------------------------- */

/* Padding is the minimum air above and below; the hero is centred in
   whatever is left, and the button still clears the fold on a 900px-tall
   display with the headline at its ceiling. */
.screen {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - 78px);
  padding: 7vh 0 9vh;
}

.screen > .measure {
  position: relative;
  z-index: 1;
}

/* The deck sets this directly under the wordmark. Here it sits above the
   headline in the mono voice, without the red tick: it is an attribution,
   not a section label. */
.attribution {
  margin-bottom: clamp(22px, 3vh, 34px);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--graphite);
}

/* The headline is the brand's line and it is fixed. Two lines at every
   width, broken at the rhetorical seam "Build forward / from within.": the
   max-width sits between the width of "Build forward" and the width of
   "Build forward from", which in Geist at -0.025em measure 5.946em and
   8.265em, so a plain greedy wrap lands on the seam and no balancer is
   needed. The words are fixed, so holding a stranger's eye falls to scale
   and motion: the ceiling is 128px and the leading 0.96, because neither
   line has a descender and the tighter block reads as one mark. Two ramps,
   the larger wins: 8.89vw reaches 128px at 1440; below about 713px,
   4.4vw + 32px takes over, 49px at 390 and 46px at 320, where "Build
   forward" needs 274px of a 286px column. */
h1 {
  max-width: 7.2em;
  font-size: clamp(44px, max(4.4vw + 32px, 8.89vw), 128px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  font-weight: 500;
}

/* Each word is its own box so the entrance can move it. Inline-block keeps
   the words on the same line boxes as plain text, so the wrap above holds. */
h1 .w {
  display: inline-block;
}

.intro {
  margin-top: clamp(30px, 4vh, 44px);
  max-width: var(--read);
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.48;
  letter-spacing: -0.011em;
  color: var(--graphite);
  font-weight: 400;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--carbon);
  border-radius: 999px;
  color: var(--carbon);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.action:hover,
.action:focus-visible {
  background: var(--carbon);
  color: #fff;
}

.action-primary {
  background: var(--wait-ink);
  border-color: var(--wait-ink);
  color: #fff;
}

.action-primary:hover,
.action-primary:focus-visible {
  background: var(--carbon);
  border-color: var(--carbon);
}

.action-sm {
  min-height: 38px;
  padding: 0 16px;
  font-size: 13px;
  flex: none;
}

/* The nav links plus the brand plus this button exceed the measure from
   about 925px down. The hero carries the same action a few hundred pixels
   below. */
@media (max-width: 960px) {
  .action-sm {
    display: none;
  }
}

/* Below this the brand and the nowrap links outgrow the measure, so the bar
   stacks: brand on one row, the links wrapping beneath as a plain table of
   contents, every one legible and tappable from 320px up. It also stops
   sticking; a two-row header pinned to a phone covers more than it is worth.
   Relative rather than static so it keeps its z-index above the canvas. */
@media (max-width: 820px) {
  .masthead {
    position: relative;
    padding-block: 16px 8px;
  }

  .masthead-inner {
    flex-wrap: wrap;
    gap: 10px 0;
  }

  .nav {
    flex: 0 0 100%;
    flex-wrap: wrap;
    gap: 2px 18px;
    margin-right: 0;
  }

  .nav a {
    padding-block: 6px;
    line-height: 1.3;
  }

  .section {
    scroll-margin-top: 24px;
  }
}

/* --- section furniture -------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--graphite);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 0;
  border-top: 2px solid var(--wait);
}

.display {
  margin-top: 26px;
  max-width: 900px;
  font-size: clamp(30px, 4.15vw, 56px);
  line-height: 1.11;
  letter-spacing: -0.018em;
  font-weight: 500;
  text-wrap: balance;
}

.prose {
  margin-top: 34px;
  max-width: var(--read);
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.58;
  letter-spacing: -0.006em;
  color: var(--graphite);
}

.prose > p + p {
  margin-top: 1.1em;
}

.prose b {
  font-weight: 500;
  color: var(--carbon);
}

/* Sentence-case, one size above body. Not an eyebrow: eyebrows name
   sections, this names the structured block that follows the prose. */
.sub {
  margin-top: clamp(44px, 5.5vh, 64px);
  max-width: var(--read);
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: 500;
}

/* --- ledger --------------------------------------------------------------- */

/* A term and what it covers, one hairline per row: the three kinds of value,
   and where a model's reading stops and rule-based calculation begins.
   Hairlines are --rule, not red: nothing here is waiting. */
.ledger {
  margin-top: 26px;
  max-width: var(--read);
}

.sub + .ledger {
  margin-top: 18px;
}

.ledger > div {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 6px 32px;
  padding-block: 16px 17px;
  border-top: 1px solid var(--rule);
}

.ledger > div:last-child {
  border-bottom: 1px solid var(--rule);
}

.ledger dt {
  font-size: clamp(16.5px, 1.45vw, 19px);
  line-height: 1.45;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--carbon);
}

.ledger dd {
  font-size: clamp(16.5px, 1.45vw, 19px);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--graphite);
}

/* --- the method ----------------------------------------------------------- */

/* The one genuine sequence on the page, so the one place a numeral appears.
   Four columns on one rail; the rail is the argument that Observe leads,
   step by step, to a result in the P&L. */
.method {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
  margin-top: clamp(44px, 6vh, 72px);
}

.step {
  display: flex;
  flex-direction: column;
  padding-block: 20px 28px;
  border-top: 1px solid var(--carbon);
}

.step-n {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--graphite);
}

.step-name {
  margin-top: 14px;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.016em;
  font-weight: 500;
}

.step-body {
  margin-top: 14px;
  font-size: clamp(15.5px, 1.25vw, 17px);
  line-height: 1.52;
  letter-spacing: -0.005em;
  color: var(--graphite);
}

.step-outcome {
  margin-top: auto;
  padding-top: 22px;
  font-size: clamp(15.5px, 1.25vw, 17px);
  line-height: 1.45;
  letter-spacing: -0.006em;
  font-weight: 500;
  color: var(--carbon);
}

/* Where the browser can, each step shares the row tracks of the rail, so
   the numerals, names, bodies and outcomes each sit on one line across the
   four columns. Without subgrid the flex column above still holds. */
@supports (grid-template-rows: subgrid) {
  .method {
    grid-template-rows: auto auto auto auto;
  }

  .step {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    align-content: start;
  }

  .step-outcome {
    margin-top: 0;
  }
}

.step-outcome-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--graphite);
}

/* --- the approval gate --------------------------------------------------- */

/* The one animated figure on the page, and it says the one thing motion can
   say better than a sentence: a prepared case reaches a boundary a person
   holds, waits there, and is released only when that person opens it. One
   case, one bar, three labels that never move and never hide, so nothing
   needs a legend beyond the three words under the track.

   Authored state is the RELEASED one: the case sits past the boundary at
   88% and the bar is the open tick. That is what a reader with no JavaScript
   or with reduced motion receives, and it is a calm finished picture. The
   motion adds the arrival and the wait; it does not add the meaning of the
   resting frame. All motion is transform-only, in motion.js.

   The figure sits directly on the smoke field with no opaque ground. The bar
   is the ink red, which holds 3:1 against the darkest value the composite
   produces; the brighter red stays on the section rules. */
.scene {
  margin-top: clamp(44px, 6vh, 72px);
  max-width: var(--read);
}

.gate-track {
  position: relative;
  height: 88px;
  background:
    linear-gradient(var(--rule), var(--rule)) left 50% / 100% 1px no-repeat;
}

/* The case: a small document, three ruled lines inside a carbon frame on a
   paper ground so the track does not run through it. */
.gate-case {
  position: absolute;
  top: 50%;
  left: 88%;
  width: 28px;
  height: 36px;
  margin: -18px 0 0 -14px;
  padding: 10px 6px;
  border: 1.5px solid var(--carbon);
  background: var(--page);
}

.gate-case i {
  display: block;
  height: 1px;
  margin-bottom: 5px;
  background: var(--carbon);
}

.gate-case i:last-child {
  width: 65%;
}

/* The boundary. Open it is a tick on the track; closed, motion.js scales it
   up into a bar that spans the lane. */
.gate-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 56px;
  margin: -28px 0 0 -1px;
  background: var(--wait-ink);
  transform: scaleY(0.16);
  transform-origin: 50% 50%;
}

.gate-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* The middle label sits under the boundary, which is what it names. */
.gate-here {
  text-align: center;
  color: var(--carbon);
}

.gate-legend span:last-child {
  text-align: right;
}

/* --- pillars -------------------------------------------------------------- */

/* Four angles on one thesis: parallel, so a grid and no numerals. */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(40px, 5vw, 80px);
  margin-top: clamp(40px, 5vh, 60px);
}

.pillars > li {
  padding-block: 22px 28px;
  border-top: 1px solid var(--rule);
}

.pillar-title {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: 500;
}

.pillar-body {
  margin-top: 10px;
  max-width: 34em;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--graphite);
}

/* --- the people ----------------------------------------------------------- */

/* Two people side by side, each a photograph with real weight: it spans the
   name block and the record beside it, so the face is the size of the
   paragraph it vouches for rather than a thumbnail in a margin. */
.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(40px, 5vw, 80px);
  margin-top: clamp(44px, 6vh, 72px);
}

.person {
  display: grid;
  grid-template-columns: clamp(170px, 18vw, 230px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0 clamp(22px, 2.6vw, 34px);
  padding-block: 28px 32px;
  border-top: 1px solid var(--rule);
}

.person-photo {
  grid-row: 1 / 3;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1);
}

.person-name {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.016em;
  font-weight: 500;
}

.person-title {
  margin-top: 8px;
  font-size: clamp(15.5px, 1.25vw, 17px);
  line-height: 1.4;
  letter-spacing: -0.006em;
  color: var(--carbon);
}

.person-prior {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--graphite);
}

.person-bio {
  margin-top: 18px;
  font-size: clamp(15px, 1.2vw, 16.5px);
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: var(--graphite);
}

.people-team {
  margin-top: 30px;
  max-width: var(--read);
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.45;
  letter-spacing: -0.008em;
  font-weight: 500;
}

/* --- fair questions --------------------------------------------------------- */

.asks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(40px, 5vw, 80px);
  margin-top: clamp(40px, 5vh, 60px);
}

.asks > div {
  padding-block: 22px 26px;
  border-top: 1px solid var(--rule);
}

.asks dt {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 500;
}

.asks dd {
  margin-top: 12px;
  max-width: 34em;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--graphite);
}

/* --- the close --------------------------------------------------------------- */

/* The operating principle closes the page under the one heavy red rule, the
   way the deck closes on it alone. */
.principle {
  margin-top: clamp(56px, 8vh, 96px);
  padding-top: clamp(26px, 3vh, 38px);
  max-width: 860px;
  border-top: 2px solid var(--wait);
  font-size: clamp(20px, 2.3vw, 31px);
  line-height: 1.32;
  letter-spacing: -0.014em;
  font-weight: 500;
}

.principle-label {
  display: block;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--graphite);
}

/* --- colophon ----------------------------------------------------------- */

.colophon {
  padding-block: 0 30px;
}

.colophon-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  color: var(--graphite);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.colophon-links {
  display: flex;
  gap: 24px;
}

.colophon a {
  color: inherit;
  text-decoration: none;
}

.colophon a:hover,
.colophon a:focus-visible {
  color: var(--carbon);
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 960px) {
  .method {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .people {
    grid-template-columns: minmax(0, 1fr);
  }

  .person {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .asks {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--read);
  }
}

@media (max-width: 700px) {
  :root {
    --gutter: 34px;
  }

  .brand {
    gap: 11px;
  }

  .brand-mark {
    width: 34px;
    height: 30px;
  }

  .brand-name {
    font-size: 12px;
    letter-spacing: 0.32em;
  }

  .screen {
    align-items: flex-start;
    min-height: 0;
    padding: 15vh 0 16vh;
  }

  .attribution {
    margin-bottom: 20px;
  }

  .intro {
    margin-top: 28px;
    font-size: 18px;
  }

  .actions {
    margin-top: 30px;
  }

  .pillars,
  .method {
    grid-template-columns: minmax(0, 1fr);
  }

  .step {
    padding-block: 18px 24px;
  }

  .step-outcome {
    padding-top: 16px;
  }

  /* The photograph keeps the name beside it; the record drops below both. */
  .person {
    grid-template-columns: 136px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0 18px;
  }

  .person-photo {
    grid-row: 1;
  }

  .person-bio {
    grid-column: 1 / -1;
    margin-top: 20px;
  }

  .ledger > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .colophon-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}

/* --- motion ------------------------------------------------------------- */

/* Everything that moves lives behind this query or inside motion.js's
   matchMedia, so a reader who prefers reduced motion gets the authored frames
   with nothing running. The hero entrance and the gate are in
   motion.js and never have a hidden state in CSS. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .masthead {
    transition:
      background-color 220ms ease,
      border-color 220ms ease;
  }

  .nav a {
    transition: color 140ms ease;
  }

  .action {
    transition:
      background 140ms ease,
      border-color 140ms ease,
      color 140ms ease,
      transform 140ms ease;
  }

  .action:hover,
  .action:focus-visible {
    transform: translateY(-1px);
  }
}