/* ==========================================================================
   Atllas — parent company site
   Additions on top of the AtllasX landing tokens (base.css).
   Nothing here overrides a base token; it only adds the brand-family layer.
   ========================================================================== */

:root {
  /* One accent per company, all sitting on the same paper/ink base.
     Blue is already AtllasX's; the other two are chosen to survive on both
     the paper and the night surfaces. */
  --brk:        #1590ad;   /* Atllas — the brokerage */
  --brk-soft:   #4fd0e8;
  --gold:       #b4791f;   /* HYZL — readable on paper */
  --gold-soft:  #ffd27a;   /* HYZL — on night */

  --shell-wide: 1200px;
}

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

/* Hero entrance. No opacity:0 in a base rule — if the animation is disabled
   (reduced motion, or an old browser) the content is simply already there. */
@keyframes axRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hero__body > * { animation: axRise .85s cubic-bezier(.22, .61, .36, 1) both; }
.hero__body > *:nth-child(1) { animation-delay: .08s; }
.hero__body > *:nth-child(2) { animation-delay: .18s; }
.hero__body > *:nth-child(3) { animation-delay: .30s; }
.hero__body > *:nth-child(4) { animation-delay: .42s; }
.hero .marquee { animation: axRise .9s cubic-bezier(.22, .61, .36, 1) .55s both; }

/* Scroll reveal. The hidden state is scoped to .js-reveal, which only exists
   once the script has run — so with no JS the page renders fully visible. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .7s cubic-bezier(.22, .61, .36, 1),
    transform .7s cubic-bezier(.22, .61, .36, 1);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* The accent rule on the win line fades up after its bucket has landed. The
   state lives on the bucket, which is the element that actually gets .is-in. */
.js-reveal .win { transition: border-left-color .55s ease .3s; }
.js-reveal .bucket:not(.is-in) .win { border-left-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
  .js-reveal .bucket:not(.is-in) .win { border-left-color: var(--accent); }
}

/* ------------------------------------------------------------- wordmark --- */

/* The parent wordmark is the bare word: no accent letter. The accent letter
   is what marks a product (AtllasX's blue X), so the parent stays neutral and
   the children stay distinct. */
.wordmark--parent { letter-spacing: -.035em; }
.wordmark--parent i { color: inherit; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
  margin-right: 4px;
  font: 500 13.5px var(--sans);
  color: rgba(255, 255, 255, .68);
}
.nav.is-scrolled .nav__links { color: var(--ink-2); }
.nav__links a:hover { color: #fff; }
.nav.is-scrolled .nav__links a:hover { color: var(--blue-dark); }

@media (max-width: 859px) { .nav__links { display: none; } }

/* Numbers in the hero deck lift to full white so the scale reads at a glance
   without turning the whole paragraph into bold. */
.hero__sub strong { color: #fff; font-weight: 600; }

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

/* Instead of the product site's two Connect buttons, the parent hero ends in
   a row naming what's inside the company. */
.holdings {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.holding {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px 11px 13px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-dark);
  color: #fff;
  transition: background .16s ease, border-color .16s ease;
}
.holding:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .3); color: #fff; }

.holding__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
}
.holding__name { font: 600 14.5px var(--sans); letter-spacing: -.02em; }
.holding__what {
  font: 400 11px var(--mono);
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .45);
}

@media (max-width: 559px) {
  .holding__what { display: none; }
}

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

.brands {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  margin-top: 38px;
}
.brands > * { min-width: 0; }

/* AtllasX is the platform, so it gets the full-height left column; the other
   two stack beside it. The grid says the hierarchy before the copy does. */
.brand-col {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  min-width: 0;
}

.brand {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 26px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -46px rgba(11, 12, 16, .5);
  overflow: hidden;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.brand:hover {
  border-color: rgba(12, 13, 16, .18);
  box-shadow: 0 26px 60px -40px rgba(11, 12, 16, .55);
}

/* The accent rule across the top is the only place the child's colour appears
   at full strength — everything else stays on the shared ink palette. */
.brand::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent, var(--blue));
}

.brand--lg { padding: 32px; }

.brand__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.brand__mark {
  font: 700 25px var(--sans);
  letter-spacing: -.035em;
  color: var(--ink);
}
.brand--lg .brand__mark { font-size: 34px; }
.brand__mark i { font-style: normal; color: var(--accent, var(--blue)); }

.brand__role {
  font: 400 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
  padding-top: 8px;
}

.brand__what {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
}
.brand--lg .brand__what { font-size: 16.5px; }

.brand__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.chip {
  font: 400 10.5px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-2);
  border-radius: 5px;
  padding: 4px 8px;
}
.chip--accent {
  color: var(--accent, var(--blue));
  background: color-mix(in srgb, var(--accent, var(--blue)) 10%, transparent);
}

/* Sits inside the platform card and absorbs the height the two stacked cards
   beside it create, so the column does not end in dead space. */
.brand__demo {
  margin-top: 6px;
  flex: none;
  border-color: rgba(12, 13, 16, .14);
  box-shadow: 0 14px 34px -28px rgba(11, 12, 16, .6);
}
.brand__demo .tally__k { font-size: 12px; }
.brand__demo .tally__v { font-size: 17px; }

.brand__go {
  margin-top: auto;
  padding-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 13.5px var(--sans);
  color: var(--accent, var(--blue));
}
.brand__go svg { transition: transform .16s ease; }
.brand:hover .brand__go svg { transform: translateX(3px); }

@media (max-width: 919px) {
  .brands { grid-template-columns: 1fr; }
  .brand-col { grid-template-rows: auto; }
}

/* ----------------------------------------------------------------- arc --- */

/* Reuses the funnel's step language, but read as a timeline: each beat is a
   year and the thing that was learned in it. */
.arc {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
  align-items: stretch;
  position: relative;
}

.beat {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-dark);
}
.beat--now { background: rgba(31, 91, 255, .1); border-color: rgba(31, 91, 255, .34); }

/* The last beat is HYZL, so it carries HYZL's gold — the timeline ends in the
   same colour the brand card uses. */
.beat--gold { background: rgba(255, 210, 122, .09); border-color: rgba(255, 210, 122, .32); }
.beat--gold .beat__year { color: var(--gold-soft); }

.beat__year {
  font: 400 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.beat--now .beat__year { color: var(--blue-soft); }

.beat__title {
  font: 700 18px var(--sans);
  letter-spacing: -.02em;
  line-height: 1.2;
}

.beat__body {
  font: 400 13.5px var(--sans);
  line-height: 1.55;
  color: rgba(255, 255, 255, .62);
}

.beat__learn {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--line-dark-2);
  font: 400 11.5px var(--mono);
  line-height: 1.45;
  color: rgba(255, 255, 255, .5);
}
.beat__learn b { color: rgba(255, 255, 255, .82); font-weight: 500; }

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

/* ------------------------------------------------------------ org tree --- */

/* The structure, drawn. This is the one place the parent/child relationship is
   stated literally instead of implied by layout — HYZL nests under AtllasX
   because it is built on it, and the brokerage sits beside, not below. */
.org { margin-top: 30px; }

.org__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 26px;
}
/* The root has no parent, so it gets no rail and no elbow. Scoped through .org
   so it outranks the generic `.org__list li::before` rules defined below. */
.org .org__list--root { padding-left: 0; }
.org .org__list--root > li { padding-left: 0; }
.org .org__list--root > li::before,
.org .org__list--root > li::after { content: none; }

.org__list li {
  position: relative;
  padding: 12px 0 0 22px;
}

/* Vertical rail down the group, and the elbow into each node. */
.org__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--line);
}
.org__list li:last-child::before { bottom: auto; height: 30px; }

.org__list li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 30px;
  width: 15px;
  border-top: 1px solid var(--line);
}

.org__node {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 13px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
}
.org__node--root {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.org__nm { font: 600 14.5px var(--sans); letter-spacing: -.02em; }
.org__node--root .org__nm { font-weight: 700; }
.org__nm i { font-style: normal; color: var(--accent, var(--blue)); }

.org__rl {
  font: 400 10px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.org__node--root .org__rl { color: rgba(255, 255, 255, .5); }

.org__pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent, var(--blue));
  align-self: center;
  flex: none;
}

.org__note {
  font: 400 11.5px var(--mono);
  line-height: 1.5;
  color: var(--ink-4);
  margin-top: 22px;
  max-width: 34ch;
}

/* ---------------------------------------------------------- thesis band --- */

.thesis {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 56px;
  align-items: start;
}
.thesis > * { min-width: 0; }

.thesis__big {
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.14;
  font-size: clamp(1.35rem, 2.3vw, 1.72rem);
  color: var(--ink);
  max-width: 28ch;
}

.thesis__body { display: flex; flex-direction: column; gap: 16px; }
.thesis__body p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.thesis__body strong { color: var(--ink); font-weight: 600; }

@media (max-width: 919px) { .thesis { grid-template-columns: 1fr; gap: 28px; } }

/* --------------------------------------------------------------- stack --- */

/* The holding-company argument, drawn: three market-facing businesses sitting
   on one shared engineering core. The arrows point down into the core because
   the core is what they all draw from. */
.stack { margin-top: 38px; }

.stack__apps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.stack__app {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 20px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}

.stack__pip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.stack__nm { font: 700 18px var(--sans); letter-spacing: -.02em; }
.stack__use { font: 400 13px var(--sans); line-height: 1.45; color: rgba(255, 255, 255, .6); }

.stack__arrows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  height: 30px;
}
.stack__arrows span {
  position: relative;
  justify-self: center;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, var(--line-dark), rgba(255, 255, 255, .3));
}
.stack__arrows span::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 5px; height: 5px;
  border-right: 1px solid rgba(255, 255, 255, .34);
  border-bottom: 1px solid rgba(255, 255, 255, .34);
  transform: translate(-50%, 1px) rotate(45deg);
}

.stack__core {
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-dark);
  overflow: hidden;
}

.stack__core-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-dark-2);
  background: rgba(255, 255, 255, .03);
}
.stack__core-t { font: 700 18px var(--sans); letter-spacing: -.02em; }
.stack__core-k {
  font: 400 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.stack__layers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.layer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line-dark-2);
}
.layer:nth-child(odd) { border-right: 1px solid var(--line-dark-2); }
.layer:nth-last-child(-n+2) { border-bottom: 0; }

.layer__n { font: 600 15px var(--sans); letter-spacing: -.01em; }
.layer__d { font: 400 13px var(--sans); line-height: 1.55; color: rgba(255, 255, 255, .58); }

@media (max-width: 919px) {
  .stack__apps { grid-template-columns: 1fr; }
  .stack__arrows { grid-template-columns: 1fr; height: 22px; }
  .stack__arrows span:not(:first-child) { display: none; }
  .stack__layers { grid-template-columns: 1fr; }
  .layer:nth-child(odd) { border-right: 0; }
  .layer:nth-last-child(2) { border-bottom: 1px solid var(--line-dark-2); }
}

/* ---------------------------------------------------------------- play --- */

/* Numbered because it genuinely is a sequence — step three does not work
   before step two. This is the method, not a history. */
.play {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--line-dark);
}

.step-p {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 26px 24px 26px 0;
  border-right: 1px solid var(--line-dark-2);
}
.step-p:last-child { border-right: 0; }
.step-p:not(:first-child) { padding-left: 24px; }

.step-p__n {
  font: 500 11px var(--mono);
  letter-spacing: .16em;
  color: var(--blue-soft);
}
.step-p__t { font: 700 19px var(--sans); letter-spacing: -.02em; line-height: 1.2; }
.step-p__b { font: 400 13.5px var(--sans); line-height: 1.55; color: rgba(255, 255, 255, .62); }

@media (max-width: 919px) {
  .play { grid-template-columns: 1fr; }
  .step-p { border-right: 0; border-bottom: 1px solid var(--line-dark-2); padding: 22px 0; }
  .step-p:not(:first-child) { padding-left: 0; }
  .step-p:last-child { border-bottom: 0; }
}

/* -------------------------------------------------------------- origin --- */

/* The dogfooding moment: the first thing the calling AI ever sold was the
   brokerage itself. The script is quoted verbatim because the specificity is
   the proof — it is the single most convincing artefact the company has. */
.origin {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 52px;
  align-items: center;
}
.origin > * { min-width: 0; }

/* Explicitly dark rather than inheriting a dark band — it sits on paper, and
   the contrast is the point: this is the machine talking. */
.script {
  border-radius: 16px;
  background: var(--night);
  border: 1px solid rgba(12, 13, 16, .14);
  box-shadow: 0 30px 70px -46px rgba(11, 12, 16, .7);
  color: #fff;
  overflow: hidden;
}

.script__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-dark-2);
  background: rgba(255, 255, 255, .03);
}
.script__live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: axpulse 2.4s ease-out infinite;
  flex: none;
}
.script__who { font: 500 12.5px var(--sans); }
.script__meta {
  margin-left: auto;
  font: 400 10.5px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}

.script__body { padding: 22px 20px; }

.script__line {
  font: 500 17px var(--sans);
  line-height: 1.6;
  letter-spacing: -.01em;
  color: #fff;
}
.script__line b { color: var(--blue-soft); font-weight: 600; }

.script__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 20px;
}

.script__tag {
  font: 400 10.5px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .07);
  border-radius: 5px;
  padding: 5px 9px;
}

/* The quote is a historical artefact and prices have moved since; saying so
   here stops the 7K in the script reading as a contradiction of today's 5K. */
.script__note {
  padding: 0 20px 20px;
  font: 400 11.5px var(--mono);
  line-height: 1.5;
  color: rgba(255, 255, 255, .42);
}

@media (max-width: 919px) { .origin { grid-template-columns: 1fr; gap: 30px; } }

/* --------------------------------------------------------------- flip --- */

/* The whole argument for one business, in one glance: what the industry does
   today, and what we replaced it with. Everything else is supporting detail. */
.flip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.flip__side { padding: 26px 28px; display: flex; flex-direction: column; gap: 11px; }

/* The old way is deliberately drained of colour — it reads as the past. */
.flip__side--old { background: var(--paper-2); }

.flip__k {
  font: 400 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.flip__side--new .flip__k { color: var(--accent); }

.flip__t {
  font: 600 20px var(--sans);
  letter-spacing: -.022em;
  line-height: 1.32;
  color: var(--ink-3);
  text-wrap: balance;
}
.flip__side--new .flip__t { color: var(--ink); }
.flip__t b { font-weight: 700; color: var(--ink); }
.flip__side--new .flip__t b { color: var(--accent); }

.flip__mid {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  background: var(--paper-2);
  border-right: 1px solid var(--line);
}
.flip__mid svg { color: var(--accent); }

@media (max-width: 759px) {
  .flip { grid-template-columns: 1fr; }
  .flip__mid {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 9px 0;
  }
  /* Rotate the glyph only. Rotating the cell turns a full-width bar into a
     full-height one and it lands on top of both panels. */
  .flip__mid svg { transform: rotate(90deg); }
  .flip__side { padding: 22px 20px; }
  .flip__t { font-size: 18px; }
}

/* ----------------------------------------------------------------- win --- */

/* The outcome line. The flip explains what changed; this says what it was
   worth, which is the part a reader actually repeats to somebody else. */
.win {
  margin-top: 18px;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--accent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.win__k {
  font: 400 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.win__t {
  font: 600 18px var(--sans);
  letter-spacing: -.02em;
  line-height: 1.42;
  color: var(--ink);
  max-width: 68ch;
  text-wrap: balance;
}

/* ------------------------------------------------------------ receipts --- */

.receipts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
}

/* -------------------------------------------------------------- buckets --- */

/* One block per business, each answering the same four questions in the same
   order, so the three read as the same play rather than three stories. */
.buckets { margin-top: 34px; }

.bucket { padding: 38px 0; border-top: 1px solid var(--line); }
.bucket:last-child { border-bottom: 1px solid var(--line); }

/* Name on its own line, then one meta line underneath. Three different type
   treatments sharing a single baseline read as clutter, not hierarchy. */
.bucket__id { display: flex; flex-direction: column; gap: 9px; }

.bucket__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.bucket__sep { color: var(--line); }

.bucket__top { display: flex; align-items: center; gap: 11px; }
.bucket__pip { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.bucket__mark { font: 700 27px var(--sans); letter-spacing: -.035em; }

/* The brokerage keeps its original mark — it is the one piece of the company
   with real brand equity behind it, so it is shown rather than re-typeset. */
.bucket__logo { height: 40px; width: auto; flex: none; }
.bucket__mark i { font-style: normal; color: var(--accent); }

.bucket__role {
  font: 400 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.bucket__when { font: 400 12.5px var(--mono); color: var(--ink-4); }

.bucket__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.bucket__rows { display: flex; flex-direction: column; }

.brow {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.brow:last-child { border-bottom: 0; }

.brow__k {
  font: 400 10.5px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 3px;
}
.brow__v { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.brow__v strong { color: var(--ink); font-weight: 600; }

/* The payoff row is the one people scan for, so it gets the accent. */
.brow--out .brow__k { color: var(--accent); }
.brow--out .brow__v { color: var(--ink); font-weight: 500; }

@media (max-width: 919px) {
  .bucket { grid-template-columns: 1fr; gap: 22px; }
  .brow { grid-template-columns: 1fr; gap: 5px; }
}

/* ------------------------------------------------------- destinations --- */

/* The whole job of the page: three doors out. Big, obviously clickable, and
   each one ends in the domain it goes to so the destination is never a guess. */
.dests {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.dest {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 28px 26px;
  min-height: 290px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -46px rgba(11, 12, 16, .5);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dest:hover {
  transform: translateY(-3px);
  border-color: rgba(12, 13, 16, .18);
  box-shadow: 0 30px 64px -40px rgba(11, 12, 16, .58);
}

.dest::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
}

.dest__mark {
  font: 700 30px var(--sans);
  letter-spacing: -.038em;
  color: var(--ink);
  line-height: 1;
}
.dest__mark i { font-style: normal; color: var(--accent); }

.dest__sector {
  font: 400 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.dest__what {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.dest__go {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 14.5px var(--sans);
  color: var(--ink);
  border-top: 1px solid var(--line-soft);
}
.dest__go svg { color: var(--accent); transition: transform .18s ease; }
.dest:hover .dest__go svg { transform: translateX(4px); }

@media (max-width: 919px) {
  .dests { grid-template-columns: 1fr; gap: 14px; }
  .dest { min-height: 0; padding: 26px 24px 22px; }
}

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

/* One quiet line of credibility. Anything more turns a routing page back into
   the essay it is replacing. */
.ledger {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 24px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.ledger__k {
  font: 400 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.ledger__n { font: 600 15px var(--sans); letter-spacing: -.02em; color: var(--ink); }
.ledger__sep { color: var(--line); }

/* ---------------------------------------------------------------- cols --- */

/* Generic bordered columns. Used for the thesis claims and for the team, which
   are the same shape: a label, a short headline, one supporting line. */
.cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--line);
}

/* Four across for the team; the claims stay at three. */
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols--4 .col:nth-child(2n) { border-right: 0; }
  .cols--4 .col:nth-child(-n+2) { border-bottom: 1px solid var(--line); padding-bottom: 22px; }
}

.col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 22px 24px 0 0;
  border-right: 1px solid var(--line);
}
.col:last-child { border-right: 0; }
.col:not(:first-child) { padding-left: 24px; }

.col__k {
  font: 400 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.col__t { font: 700 19px var(--sans); letter-spacing: -.025em; }
.col__v { font-size: 14px; line-height: 1.55; color: var(--ink-2); }

@media (max-width: 759px) {
  .cols { grid-template-columns: 1fr; }
  .col { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 0; }
  .col:not(:first-child) { padding-left: 0; }
  .col:last-child { border-bottom: 0; }
}

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

.people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

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

.person {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 26px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -46px rgba(11, 12, 16, .5);
}

.person__head { display: flex; flex-direction: column; gap: 4px; }
.person__nm { font: 700 22px var(--sans); letter-spacing: -.03em; }
.person__rl {
  font: 400 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.person__bio { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.person__bio em { color: var(--ink); font-style: italic; }

.person__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }

.team__note {
  font: 400 12.5px var(--mono);
  line-height: 1.6;
  color: var(--ink-4);
  margin-top: 20px;
  max-width: 68ch;
}

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

/* ------------------------------------------------------------- numbers --- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.stat { padding: 20px 0 0; border-top: 1px solid var(--line); }
.stat__n {
  font: 700 clamp(1.9rem, 3.4vw, 2.5rem) var(--sans);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Name-based stats (investors) need a smaller size than figures do. */
.stats--names .stat__n {
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  letter-spacing: -.025em;
  line-height: 1.15;
}

/* A phrase rather than a figure needs to come down a step to sit on the same
   baseline grid as the numbers beside it. */
.stat__n--sm {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  letter-spacing: -.025em;
  line-height: 1.15;
}

.stat__plus { color: var(--blue); }

.stat__k {
  font: 400 11px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 10px;
}
.stat__note { font-size: 13px; line-height: 1.45; color: var(--ink-3); margin-top: 8px; }
.stat__note a { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 2px; }
.stat__note a:hover { color: var(--ink); }

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

/* ------------------------------------------------------------- backers --- */

.backers {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 26px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.backers__k {
  font: 400 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.backers__n { font: 600 16px var(--sans); letter-spacing: -.02em; color: var(--ink); }

/* ------------------------------------------------------------- careers --- */

.two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 760px;
  text-align: left;
}

.door {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-dark);
  color: #fff;
  transition: background .16s ease, border-color .16s ease;
}
.door:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .32); color: #fff; }

.door__k {
  font: 400 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.door__t { font: 700 20px var(--sans); letter-spacing: -.02em; }
.door__b { font: 400 13.5px var(--sans); line-height: 1.5; color: rgba(255, 255, 255, .62); }
.door__go {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 13.5px var(--sans);
  color: var(--blue-soft);
}

@media (max-width: 559px) { .two-up { grid-template-columns: 1fr; } }

/* -------------------------------------------------------- footer family --- */

.footer__fam {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  font: 400 13px var(--sans);
  color: var(--ink-3);
}
.footer__fam a { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; }
.footer__fam a:hover { color: var(--ink); }
.footer__fam .holding__dot { width: 6px; height: 6px; }

/* The hyzl card carries hyzl's own lockup rather than re-typesetting its name. */
.dest__lock { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.dest__lock svg { flex: none; }
.dest__lock .dest__mark { font-size: 27px; letter-spacing: -.04em; }


/* The hyzl and AtllasRE cards carry their own lockups rather than re-typesetting
   their names, so a visitor sees the same mark here and on the destination. */
.dest__lock { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.dest__lock svg { flex: none; }
.dest__lock .dest__mark { font-size: 27px; letter-spacing: -.04em; }
.dest__logo { height: 25px; width: auto; flex: none; }