/* Conifer company page.
   Structure: product bar, header, hero, what we do, backers, footer.
   Content sits on a centred column; the opening photograph follows a centred 16:9 frame. */

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight.woff2") format("woff2");
  font-weight: 200 600;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("fonts/Newsreader-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;

  --white: #ffffff;
  --black: #000000;
  --night: #07090f;
  --panel: #101216;
  --ink: oklch(0.24 0.055 262);
  --ink-2: oklch(0.46 0.03 262);
  --line: oklch(0.24 0.055 262 / 0.16);
  --on-dark-2: oklch(1 0 0 / 0.72);
  --signal: oklch(0.44 0.095 168);

  --sans: "Inter Tight", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;

  --gutter: 2rem;
  --inset: clamp(1.25rem, 3vw, 2.75rem);
  --header-height: 3.75rem;
  --product-bar-height: 1.75rem;
  --section-gap: clamp(5rem, 11vw, 10.5rem);
  --heading-gap: clamp(2rem, 4.2vw, 4rem);
  --grid-gap: 1rem;
  --logo-mark: 2.25rem;
  --column: min(calc(100vw - var(--gutter) * 2), 73.5rem);
  --hero-max-width: 120rem;
  --hero-title-size: 2.625rem;
  /* The homepage tagline: halfway between the original 2.625rem and the larger fluid
     size, so about 53px on a laptop and 59px on a large monitor. Product pages keep
     --hero-title-size. */
  --home-title-size: calc((2.625rem + clamp(2.75rem, 4.3vw, 4.75rem)) / 2);
  --hero-inset: 5rem;
  --hero-card-width: 25rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

/* Keep the reading size stable across monitors, as on the RTX reference.
   Container widths and breakpoints handle layout; viewport height never scales type. */
html { font-size: 100%; }

/* No scrollbar gutter: a classic scrollbar drew a white strip down the right edge of the
   black bars and the hero. The page still scrolls by wheel, trackpad, keys and touch. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  letter-spacing: 0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, figure { margin: 0; padding: 0; font-weight: inherit; }
ul { list-style: none; }

/* 100vw includes a classic scrollbar and 100% does not, so this centres the column in
   the whole window while the black bar still runs edge to edge. */
.column {
  width: var(--column);
  margin-left: calc((100vw - var(--column)) / 2);
  margin-right: 0;
}

:focus-visible { outline: 2px solid var(--signal); outline-offset: 0.1875rem; }
.announce :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: var(--white); }

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -60px;
  z-index: 20;
  padding: 0.625rem 0.875rem;
  background: var(--white);
  color: var(--ink);
  font-size: 0.9375rem;
}

.skip-link:focus { top: 0.5rem; }

/* Announcement bar: one line of news, centred, with its link and a close button. The id in
   data-announce changes with each announcement, so closing one never hides the next. */
.announce { position: relative; background: var(--black); color: var(--white); }
.announce[hidden] { display: none; }
:root:has(.announce[hidden]):not(:has(.product-bar:not([hidden]))) { --product-bar-height: 0px; }
/* The product bar: shown once the announcement is closed (assets/nav.js). */
.product-bar { background: var(--black); color: var(--white); }
.product-bar[hidden] { display: none; }
.product-bar-inner { display: flex; align-items: center; gap: 1.75rem; height: var(--product-bar-height); font-size: 0.8125rem; }
.product-bar a { display: inline-flex; align-items: center; height: var(--product-bar-height); color: inherit; text-decoration: none; }
.product-bar a:hover { text-decoration: underline; text-underline-offset: 0.1875rem; text-decoration-thickness: 1px; }
.product-bar a:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.product-bar-label { font-weight: 600; }
.product-bar-rule { width: 1px; height: 0.8125rem; margin-inline: -0.875rem; background: oklch(1 0 0 / 0.55); }
@media (max-width: 809px) { .product-bar-inner { gap: 1.25rem; } .product-bar-rule { margin-inline: -0.625rem; } }
.announce-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: var(--product-bar-height);
  padding-inline: 2.5rem;
  font-size: 0.875rem;
  line-height: 1.3;
  text-align: center;
}
/* Links in the bar are aqua and underlined: the partner, the offer and Learn more. */
.announce a { color: oklch(0.86 0.11 192); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; white-space: nowrap; }
.announce-inner > a { font-size: 0.8125rem; }
.announce a:hover { color: oklch(0.93 0.08 192); text-decoration-thickness: 2px; }
.announce-close {
  position: absolute;
  top: 50%;
  right: max(0.5rem, calc((100vw - var(--column)) / 2 - 2.25rem));
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: oklch(1 0 0 / 0.7);
  cursor: pointer;
  translate: 0 -50%;
  transition: color 120ms linear, background-color 120ms linear;
}
.announce-close:hover { color: var(--white); background: oklch(1 0 0 / 0.1); }
.announce-close svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* Both black bars run flush left from a small inset, as on rtx.com, instead of sitting
   on the centred column. The close button keeps the same inset on the right. */
:root { --bar-inset: 2rem; }
.product-bar .column, .announce .column { width: auto; margin-left: 0; padding-inline: var(--bar-inset); }
.announce .announce-inner { justify-content: flex-start; padding-right: calc(var(--bar-inset) + 2.5rem); text-align: left; }
.announce .announce-close { right: calc(var(--bar-inset) - 0.75rem); left: auto; }
@media (max-width: 809px) { :root { --bar-inset: var(--gutter); } }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--white);
  box-shadow: 0 1px 0 var(--line); /* a shadow, so the header keeps its exact height */
}

/* The row sits low in the bar rather than floating at its centre: the logo rests on the
   bottom padding, and every link's baseline lands on the baseline of the "conifer"
   wordmark (measured: 0.5rem of padding below the link text). On a computer the row reaches 2rem past
   the column on each side, so the bar frames the hero beneath it. */
.site-header-inner {
  display: flex;
  align-items: flex-end;
  gap: 3.5rem;
  height: var(--header-height);
  padding-bottom: 0.875rem;
}
@media (min-width: 1100px) {
  :root { --row: min(calc(100vw - 3.75rem), 83.333333rem); }
  .site-header-inner { width: var(--row); margin-left: calc((100vw - var(--row)) / 2); }
  /* Positioned from the left with the same 100vw sum as the row, so a classic scrollbar
     cannot shift it: the icon's right edge meets the row's right edge (Contact). */
  .announce-close { right: auto; left: calc((100vw + var(--row)) / 2 - 1.5rem); }
}

.site-nav { display: flex; gap: 2rem; }

.site-nav a {
  display: inline-flex;
  align-items: flex-end;
  min-height: 2.75rem;
  padding-bottom: 0.5rem;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
}

.site-nav a:hover { text-decoration: underline; text-underline-offset: 0.375rem; text-decoration-thickness: 1px; }

/* Logo lockup: every proportion is its value on the conifer.build hero, at a 5.94rem
   mark (gap 20, rule 63.36 x 1 at 45%, word 4.5rem), scaled from --logo-mark. */
.logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: calc(var(--logo-mark) * 20 / 95.04);
  color: var(--ink);
  text-decoration: none;
}

.logo-on-dark { color: var(--white); }

.logo-mark {
  display: block;
  flex: 0 0 auto;
  width: var(--logo-mark);
  height: var(--logo-mark);
}

.logo-rule {
  flex: 0 0 auto;
  width: 1px;
  height: calc(var(--logo-mark) * 2 / 3);
  background: currentColor;
  opacity: 0.45;
}

.logo-word {
  font-size: calc(var(--logo-mark) * 72 / 95.04);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.site-header .logo { margin-left: calc(var(--logo-mark) * -0.047); } /* optical: the outer scales sit inside their box */

/* Buttons */
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 1.375rem;
  border-radius: 62.4375rem;
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms linear;
}

.pill:hover { background: oklch(0.9 0.01 262); }

/* Hero */
.hero-section {
  width: min(100%, var(--hero-max-width));
  margin-inline: auto;
  container-type: inline-size;
  --hero-frame-height: 56.25cqw;
}

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  padding: 2.5rem var(--hero-inset);
  overflow: hidden;
  background: var(--night);
  color: var(--white);
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%; /* keep the banner in view as the screen's aspect ratio changes */
}

.hero::after { /* a calm ground for the copy, in the lower half only */
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to bottom, transparent, oklch(0.12 0.02 262 / 0.82));
}

.hero-copy, .hero-cards { position: relative; z-index: 1; }
.hero-copy { position: absolute; left: var(--hero-inset); bottom: 6.75rem; width: min(60rem, calc(100% - var(--hero-inset) * 2 - var(--hero-card-width) - 3rem)); max-width: none; }

@media (min-width: 810px) { .hero-section h1 { font-size: var(--home-title-size); } }

/* On a computer the opening frame never runs past the bottom of the window: it is 16:9
   when the window is tall enough, and otherwise exactly the height left under the bars,
   so the scroll cue and both product cards are always in view on first load. */
@media (min-width: 1100px) {
  .hero {
    aspect-ratio: auto;
    height: min(var(--hero-frame-height), calc(100svh - var(--header-height) - var(--product-bar-height)));
    min-height: 36rem;
  }
}

h1 {
  font-size: var(--hero-title-size);
  font-weight: 400;
  letter-spacing: -0.016em;
  line-height: 1.14;
  text-wrap: balance;
}

.hero-copy .pill { margin-top: 2.5rem; min-height: 2.75rem; padding-inline: 1.5rem; font-size: 0.8125rem; }

.scroll-cue {
  display: flex;
  position: absolute;
  z-index: 1;
  left: var(--hero-inset);
  bottom: 2.5rem; /* clear of the hero's bottom edge, level with the bottom of the cards */
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
  width: fit-content;
  margin: 0;
  color: oklch(1 0 0 / 0.78);
  font-size: 0.8125rem;
  text-decoration: none;
}

.scroll-cue span { display: block; width: 1px; height: 2rem; background: oklch(1 0 0 / 0.6); }
.scroll-cue:hover { color: var(--white); }

.hero-cards {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: absolute;
  right: var(--hero-inset);
  bottom: 2.5rem;
  gap: 1rem;
  width: var(--hero-card-width);
}

.hero-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.25rem 1rem 0.25rem 0.25rem;
  background: var(--panel);
  color: var(--white);
  font-size: 0.9375rem;
  line-height: 1.25;
  text-decoration: none;
}

.hero-card img { display: block; width: 100%; height: 9.125rem; object-fit: contain; }
.hero-card span { padding-block: 0.5rem; padding-right: 0.625rem; }
.hero-card small { display: block; margin-bottom: 0.5rem; padding-right: 1.625rem; color: var(--on-dark-2); font-size: 0.8125rem; }
.hero-card:hover span { text-decoration: underline; text-underline-offset: 0.1875rem; text-decoration-thickness: 1px; }

.card-arrow {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: var(--white);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 120ms linear, stroke 120ms linear;
}

.card-arrow circle { stroke-opacity: 0.45; }
.hero-card:hover .card-arrow { fill: var(--white); }
.hero-card:hover .card-arrow path { stroke: var(--panel); }

/* What we do */
.what {
  padding-top: var(--section-gap);
  text-align: center;
}

.what-label { color: var(--black); font-size: 1.0625rem; font-weight: 600; }

.what-title {
  margin-top: 1.25rem;
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  letter-spacing: -0.024em;
  line-height: 1.08;
  text-wrap: balance;
}

.what-images {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--heading-gap);
}

.what-images figure { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--night); }
.what-images img { display: block; width: 100%; height: 100%; object-fit: cover; }
.what-images .what-image-art { padding: 7% 7% 13%; object-fit: contain; }

.what-images figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem 1.125rem 0.875rem;
  background: linear-gradient(to bottom, transparent, rgb(5 8 18 / 0.82));
  color: var(--white);
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
}

/* The statement is a black panel in the brand banner's colours (the same ground,
   off-white and crescent mark as the investor sign-in page): the words sit left in the
   light serif, and the half mark rises from the panel's right edge, fading out at the
   top and bottom so it reads as part of the ground rather than a picture. */
.statement-frame {
  --st-white: #f4f3ef;
  position: relative;
  overflow: hidden;
  margin-top: var(--heading-gap);
  background: #000;
  color: var(--st-white);
  text-align: left;
}
.statement-mark {
  position: absolute;
  top: 50%;
  right: -9%;
  width: auto;
  height: 100%;
  translate: 0 -50%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  pointer-events: none;
}
.statement {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: clamp(20rem, 30vw, 27rem);
  padding: clamp(3rem, 5.5vw, 5.5rem) clamp(1.5rem, 5.5vw, 5.5rem);
}

.statement p {
  max-width: min(36rem, 56%);
  color: var(--st-white);
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2vw, 2rem);
  font-style: italic;
  line-height: 1.3;
  letter-spacing: 0;
  text-wrap: pretty;
}

/* Narrow screens: the mark becomes a quiet texture behind the words. */
@media (max-width: 809px) {
  .statement-mark { right: -40%; height: 100%; opacity: 0.22; }
  .statement { min-height: 0; }
  .statement p { max-width: none; }
}

/* Home sections below What we do. They sit on a tighter rhythm than the gap under the
   hero, so Performance follows the statement panel and the backers follow Performance
   without a band of empty page between them. */
.what-lead { max-width: 44em; margin: clamp(1.25rem, 2.4vw, 2rem) auto 0; color: var(--ink-2); font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.45; text-wrap: pretty; }
.home-section { --home-gap: clamp(4.5rem, 8.5vw, 8rem); padding-top: var(--home-gap); }
.home-backers { padding-bottom: var(--home-gap); text-align: center; }
@media (min-width: 900px) and (max-width: 1320px) { .home-backers .backers { --s: 0.84; gap: 0.5rem 1.5rem; } }
.section-title { font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 400; letter-spacing: -0.024em; line-height: 1.08; }
.numbers { text-align: center; }
.numbers .what-title { margin-top: 0; }
.numbers .stat-note { text-align: left; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: var(--heading-gap); }
.stat-grid > li { display: flex; flex-direction: column; padding: clamp(1.25rem, 2.2vw, 2rem); background: var(--night); color: var(--white); text-align: left; }
.stat-grid img { display: block; width: 100%; height: auto; }
.stat-grid strong { display: block; margin-top: clamp(1.25rem, 2.4vw, 2.25rem); font-size: clamp(2.75rem, 4.8vw, 4.5rem); font-weight: 300; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-grid span { display: block; margin: 0.75rem 0 0; color: var(--on-dark-2); font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); line-height: 1.35; text-wrap: pretty; }
.stat-note { max-width: 62em; margin-top: 0.875rem; color: var(--ink-2); font-size: 0.8438rem; line-height: 1.5; }
.stat-note a { color: inherit; text-underline-offset: 0.1875rem; text-decoration-thickness: 1px; }
@media (max-width: 899px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* Backers: the funds carry it, the angels are one quiet line */
.backers-title { font-size: 1.125rem; font-weight: 600; }

.backers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2.5rem;
  margin-top: clamp(1.25rem, 2.2vw, 1.875rem);
}

.backers li { display: flex; align-items: center; }

.backers a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  color: inherit;
  text-decoration: none;
  transition: opacity 120ms linear;
}

.backers a:hover { opacity: 0.65; }
.backers img { display: block; width: auto; height: calc(var(--h) * var(--s, 1)); }
.backers span { color: #111111; font-size: calc(1.375rem * var(--s, 1)); font-weight: 500; letter-spacing: -0.015em; }

.angels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  margin-top: clamp(1.125rem, 2vw, 1.625rem);
  color: var(--ink-2);
  font-size: 0.875rem;
}

.angel-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 1.125rem; }
.angel-logos li { display: flex; align-items: center; gap: 0.375rem; }
.angel-logos img { display: block; width: 1rem; height: 1rem; }
.angel-logos img[alt="X"] { width: 0.875rem; height: 0.875rem; }
.angel-logos span { letter-spacing: 0; }

/* Home: the funds sit on one evenly spaced line, with the same open space above them
   (from "Backed by") and below them (to the angels line). */
.home-backers { --backers-gap: clamp(2.25rem, 3.6vw, 3.5rem); }
.home-backers .backers { margin-top: var(--backers-gap); }
.home-backers .angels { margin-top: var(--backers-gap); }
/* On one line the six logos at full size (about 66.5rem together) are wider than the
   column on a laptop, which pushed UpScaleX past the right edge. Each width band scales
   them so the row fits inside the column with at least 1.5rem between logos; the gaps
   come out even because the row is spread edge to edge. */
@media (min-width: 900px) {
  .home-backers .backers { --s: 0.66; flex-wrap: nowrap; gap: 0 1.5rem; }
  .home-backers .backers li { flex: 0 0 auto; }
}
@media (min-width: 1100px) { .home-backers .backers { --s: 0.8; } }
@media (min-width: 1240px) { .home-backers .backers { --s: 0.9; } }

/* Footer: a full-width black band, closing the page the way the product bar opens it */
.site-footer { background: var(--black); color: var(--white); }

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  font-size: 0.875rem;
}

.site-footer-inner p { color: var(--on-dark-2); }

/* Narrow layouts use a portrait photograph and normal-flow content. The image
   ratio, rather than screen height or JavaScript, controls the opening frame. */
@media (max-width: 1099px) {
  .hero-section { --hero-frame-height: 56.25cqw; }
  .backers { justify-content: center; }
  .scroll-cue { display: none; }
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--hero-frame-height) auto; gap: 0; aspect-ratio: auto; height: auto; padding: 0; }
  .hero-image { inset: 0; width: 100%; height: var(--hero-frame-height); object-fit: cover; }
  .hero::after { inset: 0 0 auto; height: var(--hero-frame-height); background: linear-gradient(to bottom, transparent 45%, oklch(0.12 0.02 262 / 0.82)); }
  .hero-copy { position: relative; left: auto; bottom: auto; grid-row: 1; align-self: end; width: auto; max-width: none; margin: 0; padding: 2rem var(--inset); }
  .hero-cards { position: relative; right: auto; bottom: auto; grid-row: 2; width: 100%; margin: 0; padding: 1.25rem var(--inset); }
}

@media (min-width: 810px) and (max-width: 1099px) {
  .hero-cards { flex-direction: row; }
  .hero-card { flex: 1 1 0; min-width: 0; }
}

@media (max-width: 809px) {
  :root { --gutter: 1.25rem; --header-height: 4rem; --logo-mark: 1.875rem; --product-bar-height: 2.75rem; }

  .announce-inner { justify-content: flex-start; padding-block: 0.5rem; padding-inline: 0 2.5rem; text-align: left; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
  .site-header-inner { gap: 1.25rem; }

  h1 { font-size: clamp(1.5rem, 7.4vw, 2.125rem); } /* holds "critical AI operations" on one line, down to 20rem */
  .hero-card { grid-template-columns: clamp(6.5rem, 34vw, 8.25rem) 1fr; }
  .hero-card img { height: 5.8125rem; }

  .what-images { grid-template-columns: minmax(0, 1fr); }
  .what-images figure { aspect-ratio: 16 / 10; }

  .backers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 0.75rem; justify-items: center; }
  .backers li, .backers a { min-width: 0; max-width: 100%; }
  .backers img { max-width: 100%; height: calc(var(--h) * 0.8); object-fit: contain; }
  .backers span { font-size: 1.125rem; }
}

@media (max-width: 768px) {
  .hero-section { --hero-frame-height: 184.871795cqw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill, .card-arrow, .backers a { transition: none; }
}

/* Subpages */
.page-head { padding-block: clamp(4rem, 8vw, 7.5rem) var(--heading-gap); }
.page-label { font-size: 1.0625rem; font-weight: 600; color: var(--black); margin-bottom: 1rem; }
.page-head h1 { max-width: 20em; color: var(--ink); font-size: clamp(2.375rem, 5vw, 4.5rem); letter-spacing: -0.028em; line-height: 1.05; }
.page-line a { color: inherit; text-underline-offset: 0.1875rem; text-decoration-thickness: 1px; }
.page-line { max-width: 34em; margin-top: 1.25rem; color: var(--ink-2); font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.4; }
.dark-pill { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 1.75rem; padding-inline: 1.375rem; border-radius: 62.4375rem; background: var(--ink); color: var(--white); font-size: 1rem; font-weight: 500; text-decoration: none; }
.dark-pill:hover { background: oklch(0.33 0.06 262); }
.block { padding-block: 0 clamp(3.5rem, 7vw, 7rem); }
.block:last-of-type { padding-bottom: var(--section-gap); }
.block > h2 { font-size: clamp(1.625rem, 2.6vw, 2.25rem); font-weight: 400; letter-spacing: -0.02em; }
.block-line { max-width: 44em; margin-top: 1.125rem; font-size: 1.125rem; line-height: 1.45; }
.block a, .rows a { color: inherit; text-underline-offset: 0.1875rem; text-decoration-thickness: 1px; }
.rows { margin: clamp(1.25rem, 2vw, 1.75rem) 0 0; }
.rows > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr); gap: 1.5rem; padding-block: 1.25rem; border-top: 1px solid var(--line); }
.rows > div:last-child { border-bottom: 1px solid var(--line); }
.rows dt { font-size: 1.125rem; font-weight: 500; }
.rows dd { margin: 0; max-width: 44em; color: var(--ink-2); font-size: 1.125rem; line-height: 1.45; }
.rows code { font-size: 0.92em; }
.block .backers { margin-top: 1.25rem; }
.block .angels { justify-content: flex-start; }






@media (max-width: 809px) {
  .rows > div { grid-template-columns: 1fr; gap: 0.375rem; }
}



.page-head h1 + .page-line { margin-top: 1.25rem; }

/* Short pages: the footer sits at the bottom of the window. */
body { display: flex; flex-direction: column; min-height: 100dvh; }
main { flex: 1 0 auto; }

/* One row while it fits; on phones, two rows, so every item stays visible. */
.site-nav-right { margin-left: auto; }
@media (max-width: 899px) {
  .site-header-inner { gap: 1.5rem; }
  .site-nav { gap: 1.25rem; }
  .site-nav a, .nav-dropdown summary { font-size: 0.9375rem; }
}
@media (max-width: 679px) {
  .site-header-inner { flex-wrap: wrap; gap: 0 0.75rem; height: auto; padding-block: 0.5rem 0.25rem; }
  .site-nav-right { gap: 0.875rem; }
  .site-nav-left { order: 3; flex-basis: 100%; gap: 1.25rem; }
  .site-nav a, .nav-dropdown summary { min-height: 2.25rem; }
}
@media (max-width: 379px) {
  .site-header .logo-rule, .site-header .logo-word { display: none; }
}

/* Page map */
.doc-map { columns: 3 16.25rem; column-gap: 2rem; margin-top: 1.25rem; }
.doc-map li { break-inside: avoid; padding-block: 0.4375rem; font-size: 1rem; }
.doc-map span { display: block; color: var(--ink-2); font-size: 0.8125rem; }

/* Products dropdown */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown summary { display: inline-flex; align-items: flex-end; gap: 0.375rem; min-height: 2.75rem; padding-bottom: 0.5rem; color: var(--ink); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1; cursor: pointer; list-style: none; }
.nav-dropdown summary svg { margin-bottom: 0.3em; }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary:hover { text-decoration: underline; text-underline-offset: 0.375rem; text-decoration-thickness: 1px; }
.nav-dropdown svg { width: 0.625rem; height: 0.375rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 120ms linear; }
.nav-dropdown[open] svg { transform: rotate(180deg); }
.nav-dropdown-panel { position: absolute; top: calc(100% + 0.875rem); left: -0.875rem; z-index: 30; display: flex; flex-direction: column; width: max-content; min-width: calc(100% + 1.75rem); padding: 0.5rem 0; background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 0.75rem 1.75rem rgb(0 0 0 / 0.1); }
.site-nav .nav-dropdown-panel a { min-height: 2.25rem; padding-inline: 0.875rem; }
.site-nav .nav-dropdown-panel a:hover { background: oklch(0.97 0.004 262); text-decoration: none; }
@media (max-width: 809px) {
  .nav-dropdown summary { font-size: 0.9375rem; }
  .nav-dropdown-panel { top: calc(100% + 0.625rem); }
}
@media (max-width: 679px) {
  .nav-dropdown-panel { top: calc(100% + 0.25rem); }
}
@media (prefers-reduced-motion: reduce) { .nav-dropdown svg { transition: none; } }

/* News */
.news-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; color: inherit; text-decoration: none; }
.news-feature img { display: block; width: 100%; height: auto; }
.news-date { color: var(--ink-2); font-size: 1rem; }
.news-feature h2 { margin-top: 0.625rem; color: var(--ink); font-size: clamp(1.875rem, 3.4vw, 3rem); font-weight: 400; letter-spacing: -0.024em; line-height: 1.08; }
.news-feature:hover h2 { text-decoration: underline; text-underline-offset: 0.375rem; text-decoration-thickness: 1px; }
.news-line { margin-top: 0.875rem; color: var(--ink-2); font-size: 1.125rem; line-height: 1.45; }
/* Clear room between stories, so each reads as its own item. */
.news-feature + .news-feature { margin-top: clamp(4.5rem, 9vw, 8.5rem); }

/* Careers */
.roles { margin-top: 0; }
.roles > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; padding-block: 1.625rem; }
.roles dt { font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 400; letter-spacing: -0.015em; }
.roles dd { color: var(--ink-2); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.careers-apply { margin-top: 2rem; font-size: 1.125rem; line-height: 1.45; }

/* Careers opens on a full-width photograph of someone at work, with the title over its
   lower edge, the way RTX and Palantir open their careers pages. The picture is a
   placeholder: replace careers-hero-image's src with the final photo. */
.careers-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(22rem, 64svh, 40rem); overflow: hidden; background: var(--night); color: var(--white); }
.careers-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.careers-hero::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(to bottom, transparent, oklch(0.12 0.02 262 / 0.82)); }
.careers-hero-copy { position: relative; z-index: 1; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.careers-hero h1 { color: var(--white); font-size: clamp(2.375rem, 5vw, 4.5rem); letter-spacing: -0.028em; line-height: 1.05; }
.careers-hero .page-line { color: var(--on-dark-2); }
.careers-roles { padding-top: var(--heading-gap); }
.motion .careers-hero-image { animation: photo-settle 1800ms var(--ease-settle) both; }
@keyframes photo-settle { from { opacity: 0; scale: 1.04; } }

/* Investors: a sharp wall of cells, one per fund */
.backer-wall .backers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 1.5rem; padding: 1px; background: var(--line); }
.backer-wall .backers li { justify-content: center; min-height: clamp(7.5rem, 12vw, 10.75rem); background: var(--white); }
.backer-wall .backers a { padding: 1rem; }
.block .angels { margin-top: 1.5rem; }

/* Forms: contact and investor login */
.form-row input, .form-row select, .form-row textarea { display: block; width: 100%; min-height: 3rem; padding: 0.6875rem 0.875rem; border: 1px solid oklch(0.24 0.055 262 / 0.34); border-radius: 0; background: var(--white); color: var(--ink); font: inherit; font-size: 1.0625rem; line-height: 1.4; }
.form-row textarea { resize: vertical; }
.form-row input:focus-visible, .form-row select:focus-visible, .form-row textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: -1px; }
.form-row [aria-invalid] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.form-row label { color: var(--ink); font-size: 1.0625rem; font-weight: 500; }
.form-error { margin-top: 0.375rem; color: var(--ink); font-size: 0.9375rem; font-weight: 500; }
.form-hint { margin-top: 0.375rem; color: var(--ink-2); font-size: 0.9375rem; }
.form-status { color: var(--ink); font-size: 1rem; line-height: 1.4; }
button.dark-pill { border: 0; font-family: inherit; cursor: pointer; }
button.dark-pill:disabled { opacity: 0.6; cursor: default; }
.contact-form { display: block; }
.topics { min-width: 0; margin: 0; padding: 0; border: 0; }
.topics legend { padding: 0; font-size: clamp(1.625rem, 2.6vw, 2.25rem); font-weight: 400; letter-spacing: -0.02em; }
.topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 1.5rem; padding: 1px; background: var(--line); }
.topic-grid label { position: relative; display: block; background: var(--white); cursor: pointer; }
.topic-grid input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.topic-grid span { display: flex; align-items: center; min-height: clamp(4.5rem, 7vw, 6rem); padding: 0.75rem clamp(1rem, 2vw, 1.75rem); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); }
.topic-grid label:hover span { background: oklch(0.97 0.004 262); }
.topic-grid input:checked + span { background: var(--black); color: var(--white); }
.topic-grid input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.contact-fields { margin-top: clamp(2rem, 4vw, 3rem); }
.contact-fields .form-row, .form-actions { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr); gap: 0.5rem 1.5rem; padding-block: 0.875rem; }
.contact-fields .form-row[hidden], .contact-fields[hidden] { display: none; }
.contact-fields .form-row label { padding-top: 0.75rem; }
.contact-fields .form-row > div { max-width: 42.5rem; }
.form-actions { align-items: center; padding-top: 1.125rem; }
.form-actions button { grid-column: 2; justify-self: start; margin-top: 0; }
.form-actions .form-status { grid-column: 2; max-width: 42.5rem; }
.form-trap { position: absolute; left: -624.9375rem; width: 1px; height: 1px; overflow: hidden; }
.login-form { display: grid; gap: 1.25rem; width: min(100%, 27.5rem); }
.login-form .form-row label { display: block; margin-bottom: 0.5rem; }
.login-form button { justify-self: start; margin-top: 0.25rem; }
.login-help { color: var(--ink-2); font-size: 1rem; }

@media (max-width: 809px) {
  .news-feature { grid-template-columns: 1fr; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-fields .form-row, .form-actions { grid-template-columns: 1fr; }
  .contact-fields .form-row label { padding-top: 0; }
  .form-actions button, .form-actions .form-status { grid-column: 1; }
  .backer-wall .backers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .backer-wall .backers li { min-height: 6.5rem; }
}

/* Footer legal links */
.site-footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; }
.site-footer-meta nav { display: flex; gap: 1.25rem; }
.site-footer-meta a { color: inherit; text-decoration: none; }
.site-footer-meta a:hover { text-decoration: underline; text-underline-offset: 0.1875rem; text-decoration-thickness: 1px; }

/* Legal documents */
.legal { padding-block: clamp(4rem, 8vw, 7.5rem) var(--section-gap); }
.legal-kicker { margin-bottom: 1rem; color: var(--black); font-size: 1.0625rem; font-weight: 600; }
.legal-title { color: var(--ink); font-size: clamp(2.375rem, 5vw, 4.5rem); font-weight: 400; letter-spacing: -0.028em; line-height: 1.05; }
.legal-meta { margin-top: 1.125rem; color: var(--ink-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.legal-summary { max-width: 34em; margin-top: 0.875rem; color: var(--ink-2); font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.4; text-wrap: pretty; }
.legal-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); column-gap: clamp(2rem, 5vw, 5.5rem); margin-top: var(--heading-gap); padding-top: var(--heading-gap); border-top: 1px solid var(--line); }
.legal-body:not(:has(.legal-toc)) { grid-template-columns: minmax(0, 1fr); }
.legal-preamble, .legal-sec { grid-column: -2 / -1; min-width: 0; }
.legal-toc { position: sticky; top: calc(var(--header-height) + 1.5rem); grid-column: 1; grid-row: 1 / span 40; align-self: start; max-height: calc(100dvh - var(--header-height) - 3rem); overflow-y: auto; font-size: 0.9062rem; }
.legal-toc ol { padding: 0; list-style: none; }
.legal-toc-title { margin-bottom: 0.625rem; color: var(--black); font-weight: 600; }
.legal-toc li { padding-block: 0.3125rem; line-height: 1.3; }
.legal-toc a { display: flex; gap: 0.5rem; color: var(--ink-2); text-decoration: none; }
.legal-toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.1875rem; text-decoration-thickness: 1px; }
.legal-sec { margin-top: clamp(2.5rem, 4.4vw, 4rem); scroll-margin-top: calc(var(--header-height) + 1.5rem); }
.legal-h { display: flex; gap: 0.5em; color: var(--ink); font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 400; letter-spacing: -0.018em; line-height: 1.2; }
.legal-h .legal-num { color: var(--ink-2); }
.legal-sub { margin-top: 1.625rem; color: var(--ink); font-size: 1.125rem; font-weight: 500; line-height: 1.3; }
.legal-prose { max-width: 46em; color: var(--ink-2); font-size: 1.0312rem; line-height: 1.6; }
.legal-body:not(:has(.legal-toc)) .legal-prose { max-width: none; }
.legal-prose > * + *, .legal-sec > .legal-prose { margin-top: 0.875rem; }
.legal-prose strong { color: var(--ink); font-weight: 500; }
.legal-prose a { color: var(--ink); text-underline-offset: 0.1875rem; text-decoration-thickness: 1px; }
.legal-prose ul, .legal-prose ol { padding-left: 1.25em; }
.legal-prose ul { list-style: disc; }
.legal-prose ol { list-style: decimal; }
.legal-prose li + li { margin-top: 0.375rem; }
.legal-prose code { color: var(--ink); font-size: 0.9em; overflow-wrap: anywhere; }
.legal-table-wrap { overflow-x: auto; }
.legal-table-wrap table { width: 100%; min-width: 35rem; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.legal-table-wrap th { padding: 0.625rem 1rem 0.625rem 0; color: var(--ink); font-weight: 500; text-align: left; vertical-align: bottom; border-bottom: 1px solid oklch(0.24 0.055 262 / 0.34); }
.legal-table-wrap td { padding: 0.75rem 1rem 0.75rem 0; vertical-align: top; border-bottom: 1px solid var(--line); }
@media (max-width: 899px) {
  .legal-body { grid-template-columns: minmax(0, 1fr); }
  .legal-preamble, .legal-sec, .legal-toc { grid-column: 1; grid-row: auto; }
  .legal-toc { position: static; max-height: none; margin-top: 1.75rem; padding: 1rem 1.125rem; box-shadow: inset 0 0 0 1px var(--line); }
}

/* ---------- Motion ----------
   assets/motion.js sets .motion on <html> only when it runs and the reader has not
   asked for reduced motion, so every hidden start state is scoped to .motion: without
   the script the page is simply there. Each effect is drawn from Conifer's own visual
   language (the golden-angle mark and the 4px cell grid); one easing curve throughout. */
:root {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-quick: 450ms;
  --t-reveal: 1000ms;
}

:root { --ease-settle: cubic-bezier(0.33, 0, 0.2, 1); }

/* The mark, inlined by motion.js, builds in generation order: scale i of the spiral
   appears after scale i-1, from the centre outward. */
.mark-inline path { vector-effect: non-scaling-stroke; }
.motion .mark-inline:not(.is-built) path { opacity: 0; }
.motion .mark-inline.is-built path { animation: mark-scale 380ms var(--ease) backwards; animation-delay: calc(var(--i) * 7ms); }
@keyframes mark-scale { from { opacity: 0; } }

/* Hero: the photo fades in from night while it settles from a slight zoom; then the
   headline rises, then the button and the cards. */
.motion .hero-image { opacity: 0; scale: 1.04; transition: opacity 1400ms cubic-bezier(0.33, 0, 0.2, 1), scale 2400ms var(--ease); }
.motion .hero.is-resolving .hero-image { opacity: 1; scale: 1; }

.w { display: inline-block; overflow: clip; overflow-clip-margin: 0.12em; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.w > span { display: inline-block; }
.motion .hero h1 .w > span,
.motion [data-reveal="words"] .w > span {
  translate: 0 108%;
  transition: translate var(--t-reveal) var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.motion .hero h1 .w > span { transition-delay: calc(200ms + var(--i, 0) * 55ms); }
.motion .hero.is-ready h1 .w > span,
.motion [data-reveal="words"].in .w > span { translate: 0 0; }

.motion .hero-copy .pill,
.motion .hero-card {
  opacity: 0;
  translate: 0 18px;
  transition: opacity var(--t-reveal) var(--ease), translate var(--t-reveal) var(--ease);
}
.motion .hero-copy .pill { transition-delay: 650ms; }
.motion .hero-card { translate: 24px 0; }
.motion .hero-card:nth-child(1) { transition-delay: 750ms; }
.motion .hero-card:nth-child(2) { transition-delay: 870ms; }
.motion .hero.is-ready .pill,
.motion .hero.is-ready .hero-card { opacity: 1; translate: 0 0; }

/* Scroll cue: a light travels down the line; motion.js fades and lifts the cue as the
   page scrolls, and the link glides to What we do. */
.scroll-cue span { position: relative; overflow: hidden; background: oklch(1 0 0 / 0.28); }
.scroll-cue span::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 40%;
  background: linear-gradient(to bottom, transparent, var(--white));
  translate: 0 -100%;
  animation: cue-travel 2.4s var(--ease) infinite;
}
@keyframes cue-travel { 0% { translate: 0 -100%; } 70%, 100% { translate: 0 250%; } }
.motion .scroll-cue { opacity: 0; transition: opacity 800ms linear 1000ms, color 120ms linear; }
.motion .hero.is-ready .scroll-cue { opacity: 1; }
.motion .hero.is-ready .scroll-cue[style*="opacity"] { transition: color 120ms linear; }

/* Text and groups. */
.motion [data-reveal="up"],
.motion [data-reveal="stagger"] > * {
  opacity: 0;
  translate: 0 24px;
  transition: opacity var(--t-reveal) var(--ease), translate var(--t-reveal) var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.motion [data-reveal="up"].in,
.motion [data-reveal="stagger"].in > * { opacity: 1; translate: 0 0; }

/* Cell veil: the canvas motion.js lays over a photograph and dissolves cell by cell. */
.cell-veil { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

/* The three images resolve out of cells, rising from the bottom edge, one after another
   (motion.js draws the veil; the image appears in the same frame, under it). */
.motion [data-reveal="cells"] figure > :not(.cell-veil) { opacity: 0; }
.motion [data-reveal="cells"].in figure > :not(.cell-veil) { opacity: 1; }
.motion [data-reveal="cells"] figcaption { transition: opacity 600ms linear; }
.motion [data-reveal="cells"].in figure:nth-child(1) figcaption { transition-delay: 800ms; }
.motion [data-reveal="cells"].in figure:nth-child(2) figcaption { transition-delay: 960ms; }
.motion [data-reveal="cells"].in figure:nth-child(3) figcaption { transition-delay: 1120ms; }

/* The statement panel fades up from white, the half mark drifts in from the right edge
   while it turns a few degrees into place, and then the words rise. */
.motion [data-reveal="box"] { opacity: 0; transition: opacity 1000ms var(--ease-settle); }
.motion [data-reveal="box"] .statement-mark { opacity: 0; translate: 12% -50%; rotate: 14deg; transition: opacity 1600ms var(--ease-settle) 200ms, translate 2400ms var(--ease) 200ms, rotate 2400ms var(--ease) 200ms; }
.motion [data-reveal="box"] .statement p { opacity: 0; translate: 0 0.75rem; transition: opacity var(--t-reveal) var(--ease) 500ms, translate var(--t-reveal) var(--ease) 500ms; }
.motion [data-reveal="box"].in { opacity: 1; }
.motion [data-reveal="box"].in .statement-mark { opacity: 1; translate: 0 -50%; rotate: 0deg; }
.motion [data-reveal="box"].in .statement p { opacity: 1; translate: 0 0; }
@media (max-width: 809px) { .motion [data-reveal="box"].in .statement-mark { opacity: 0.22; } }

/* Performance cards. motion.js inlines each graphic (.chart) so its squares can move, and
   each card has its own entrance; the cards start 220ms apart (--card). If inlining
   fails, the plain image fades in instead. The transitions sit on the .in state only,
   so hiding before the reveal is instant. */
.stat-grid .chart { display: block; width: 100%; height: auto; aspect-ratio: 800 / 520; overflow: visible; }
.stat-grid > li:nth-child(2) { --card: 220ms; }
.stat-grid > li:nth-child(3) { --card: 440ms; }
.stat-grid strong span { display: inline; margin: 0; color: inherit; font-size: inherit; line-height: inherit; }

.motion [data-reveal="build"] > li img { opacity: 0; scale: 1.04; }
.motion [data-reveal="build"].in > li img { opacity: 1; scale: 1; transition: opacity 1500ms var(--ease-settle), scale 2400ms var(--ease); transition-delay: var(--card, 0ms); }

/* #1: the 23 bars rise from the baseline in rank order, Parallax's first. */
.chart-recall .bar { transform-box: fill-box; transform-origin: 50% 100%; }
.motion [data-reveal="build"] .chart-recall .bar { scale: 1 0; }
.motion [data-reveal="build"].in .chart-recall .bar { scale: 1 1; transition: scale 900ms var(--ease); transition-delay: calc(var(--card, 0ms) + var(--i) * 40ms); }

/* 230+: one square per model, flying out from the centre of the spiral (nearest first)
   while the whole lattice turns into place, like the mark above. */
.chart-models rect { transform-box: fill-box; transform-origin: center; }
.chart-models .spin { transform-box: view-box; }
.motion [data-reveal="build"] .chart-models .spin { rotate: -110deg; }
.motion [data-reveal="build"] .chart-models rect { opacity: 0; translate: var(--dx) var(--dy); scale: 0.2; }
.motion [data-reveal="build"].in .chart-models .spin { rotate: 0deg; transition: rotate 1400ms var(--ease) var(--card, 0ms); }
.motion [data-reveal="build"].in .chart-models rect {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition: translate 950ms var(--ease), scale 950ms var(--ease), opacity 250ms linear;
  transition-delay: calc(var(--card, 0ms) + var(--d, 0ms));
}

/* 99.99%: the 90 days light up from the oldest to today, a soft light sweeping ahead. */
.motion [data-reveal="build"] .chart-uptime .day { opacity: 0.07; }
.motion [data-reveal="build"].in .chart-uptime .day { opacity: 1; transition: opacity 380ms var(--ease-settle); transition-delay: calc(var(--card, 0ms) + var(--i) * 14ms); }
.chart-uptime .sweep { fill: oklch(0.93 0.09 168); opacity: 0; }
.motion [data-reveal="build"].in .chart-uptime .sweep { animation: uptime-sweep 1300ms linear var(--card, 0ms) both; }
@keyframes uptime-sweep { 0% { opacity: 0; translate: 0 0; } 8%, 88% { opacity: 0.8; } 100% { opacity: 0; translate: 806px 0; } }

/* Each figure and its line arrive as the graphic starts; the figure then counts up. */
.motion [data-reveal="build"] > li > :is(strong, span) { opacity: 0; translate: 0 0.875rem; transition: opacity 700ms var(--ease), translate 700ms var(--ease); transition-delay: calc(var(--card, 0ms) + 100ms); }
.motion [data-reveal="build"] > li > span { transition-delay: calc(var(--card, 0ms) + 250ms); }
.motion [data-reveal="build"].in > li > :is(strong, span) { opacity: 1; translate: 0 0; }

/* Hover: underlines draw in from the left and leave to the right; images ease in. */
.site-nav > a, .nav-dropdown summary, .site-footer-meta a { position: relative; }
.site-nav > a::after, .nav-dropdown summary::after, .site-footer-meta a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% - 0.85em);
  height: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: right;
  transition: scale var(--t-quick) var(--ease);
}
.nav-dropdown summary::after { right: 16px; }
.site-header .site-nav > a::after, .site-header .nav-dropdown summary::after { bottom: 0.05rem; }
.site-nav > a:hover, .nav-dropdown summary:hover, .site-footer-meta a:hover { text-decoration: none; }
.site-nav > a:hover::after, .nav-dropdown summary:hover::after, .site-footer-meta a:hover::after { scale: 1 1; transform-origin: left; }

.what-images img { transition: scale 1200ms var(--ease); }
.what-images figure:hover img { scale: 1.035; }
.hero-card img { transition: scale var(--t-quick) var(--ease); }
.hero-card:hover img { scale: 1.04; }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue span::after { animation: none; display: none; }
  .site-nav > a::after, .nav-dropdown summary::after, .site-footer-meta a::after,
  .what-images img, .hero-card img { transition: none; }
}

/* Investor portal (2026-11-05) */
.portal-me { padding-block-end: clamp(1.5rem, 3vw, 2.5rem); }
.portal-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; font-size: 1.125rem; }
.portal-who #me-name { font-weight: 500; }
.portal-email { color: var(--ink-2); }
.text-button { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 1rem; text-decoration: underline; text-underline-offset: 0.1875rem; text-decoration-thickness: 1px; cursor: pointer; min-height: 2.75rem; }
.portal-empty { margin-top: 1.25rem; color: var(--ink-2); font-size: 1.125rem; }
.asks { margin: clamp(1.25rem, 2vw, 1.75rem) 0 0; padding: 0; list-style: none; }
.asks > li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr); gap: 0.5rem 1.5rem; padding-block: 1.25rem; border-top: 1px solid var(--line); }
.asks > li:last-child { border-bottom: 1px solid var(--line); }
.ask-title { font-size: 1.125rem; font-weight: 500; }
.ask-body { max-width: 44em; color: var(--ink-2); font-size: 1.125rem; line-height: 1.45; }
.ask-body p + p, .ask-body .ask-actions { margin-top: 0.75rem; }
.ask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.ask-actions .dark-pill { margin-top: 0; }
.ask-done .ask-title, .ask-done .ask-body { color: var(--ink-2); }
.ask-tag { display: inline-block; margin-left: 0.5rem; padding: 0.125rem 0.5rem; border: 1px solid var(--line); font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); vertical-align: 0.15em; }
.ask-help { display: grid; gap: 0.75rem; margin-top: 0.75rem; max-width: 36rem; }
.ask-help textarea { display: block; width: 100%; min-height: 6rem; padding: 0.6875rem 0.875rem; border: 1px solid oklch(0.24 0.055 262 / 0.34); border-radius: 0; background: var(--white); color: var(--ink); font: inherit; font-size: 1.0625rem; line-height: 1.4; resize: vertical; }
.ask-help .dark-pill { justify-self: start; margin-top: 0; }
.updates { margin-top: clamp(1.25rem, 2vw, 1.75rem); }
.update { padding-block: 1.75rem; border-top: 1px solid var(--line); scroll-margin-top: 6rem; }
.update:last-child { border-bottom: 1px solid var(--line); }
.update-date { color: var(--ink-2); font-size: 1rem; }
.update h3 { margin-top: 0.375rem; font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 500; letter-spacing: -0.01em; }
.update-body { max-width: 40em; margin-top: 0.875rem; font-size: 1.125rem; line-height: 1.55; }
.update-body p + p { margin-top: 1em; }
.update-body a { color: inherit; text-underline-offset: 0.1875rem; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.update-meta { margin-top: 0.75rem; color: var(--ink-2); font-size: 0.9375rem; }
.check-row { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; margin-top: 1rem; font-size: 1.125rem; cursor: pointer; }
.check-row input { width: 1.25rem; height: 1.25rem; accent-color: var(--ink); }
#portal-status, #invite-status { margin-top: 1rem; }
.admin-mode { padding: 0.875rem 1rem; border: 1px solid var(--line); font-size: 1rem; }
.admin-form .form-row, .admin-form .form-actions { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr); gap: 0.5rem 1.5rem; padding-block: 0.875rem; }
.admin-form .form-row label { padding-top: 0.75rem; }
.admin-form .form-row > div { max-width: 42.5rem; }
.admin-form .form-row .check-row { margin-top: 0; padding-top: 0; }
.admin-form .form-actions button { grid-column: 2; justify-self: start; margin-top: 0; }
.admin-form .form-actions .form-status { grid-column: 2; max-width: 42.5rem; overflow-wrap: anywhere; }
.admin-sub { margin-top: 2.25rem; font-size: 1.25rem; font-weight: 500; }
.outbox { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.outbox > li { padding-block: 1rem; border-top: 1px solid var(--line); }
.outbox > li:last-child { border-bottom: 1px solid var(--line); }
.outbox summary { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; cursor: pointer; font-size: 1.0625rem; min-height: 2.75rem; align-content: center; }
.outbox .ob-subject { font-weight: 500; }
.outbox .ob-meta { color: var(--ink-2); font-size: 0.9375rem; }
.outbox iframe { display: block; width: 100%; max-width: 40rem; height: 38rem; margin-top: 0.75rem; border: 1px solid var(--line); background: var(--white); }
@media (max-width: 760px) {
  .asks > li, .admin-form .form-row, .admin-form .form-actions { grid-template-columns: 1fr; }
  .admin-form .form-row label { padding-top: 0; }
  .admin-form .form-actions button, .admin-form .form-actions .form-status { grid-column: 1; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 4.75rem; }
.pw-toggle { position: absolute; top: 0; right: 0; height: 100%; display: flex; align-items: center; justify-content: center; min-width: 4.25rem; padding: 0 0.875rem; border: 0; background: none; color: var(--ink); font: inherit; font-size: 0.9375rem; font-weight: 500; text-decoration: underline; text-underline-offset: 0.1875rem; text-decoration-thickness: 1px; cursor: pointer; }
.pw-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.pw-caps { margin-top: 0.375rem; color: var(--ink); font-size: 0.9375rem; }
.portal-note { margin-top: 0.5rem; color: var(--ink-2); font-size: 0.9375rem; }
.update-body h4 { margin-top: 1.75rem; font-size: 1.1875rem; font-weight: 600; }
.update-body h4:first-child { margin-top: 0; }
.update-body h4 + p, .update-body h4 + ol, .update-body h4 + ul { margin-top: 0.625rem; }
.update-body ol, .update-body ul { margin: 1em 0 0; padding-left: 1.375rem; }
.update-body li + li { margin-top: 0.625rem; }
.update-body li::marker { color: var(--ink-2); }
.update-body strong { font-weight: 600; }
.update-body p + ol, .update-body p + ul, .update-body ol + p, .update-body ul + p { margin-top: 1em; }
.people { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.people > li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) auto; gap: 0.25rem 1.5rem; align-items: baseline; padding-block: 1rem; border-top: 1px solid var(--line); }
.people > li:last-child { border-bottom: 1px solid var(--line); }
.person-name { font-size: 1.0625rem; font-weight: 500; }
.person-firm { display: block; color: var(--ink-2); font-weight: 400; font-size: 0.9375rem; }
.person-info { color: var(--ink-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.invite-results { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.text-button.is-armed { font-weight: 600; }
.form-actions .text-button { grid-column: 2; justify-self: start; }
@media (max-width: 760px) { .people > li { grid-template-columns: 1fr; } }
.google-g { width: 1.25rem; height: 1.25rem; flex: none; }


/* Investor sign-in (2026-11-05, owner's brand banner): black ground, the light
   "conifer" weight for the title, the crescent mark bleeding off the right edge,
   and plain square buttons. Colours are the banner's own. */
.gate { --g-white: #f4f3ef; --g-blue: #4abde7; --g-grey: #9a9a9f; position: relative; overflow: hidden; display: flex; align-items: center; min-height: calc(100svh - var(--header-height)); background: #000; color: var(--g-white); }
.gate-mark { position: absolute; top: 50%; right: 0; height: clamp(20rem, 66vh, 31.25rem); width: auto; transform: translateY(-50%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); pointer-events: none; }
.gate-inner { position: relative; z-index: 1; padding-block: clamp(3rem, 8vh, 6rem); }
.gate-copy { width: min(100%, 34rem); }
.gate h1 { font-size: clamp(3rem, 5.6vw, 5.25rem); font-weight: 300; line-height: 1; letter-spacing: -0.035em; white-space: nowrap; }
.gate-line { margin-top: 1rem; color: var(--g-grey); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.4; }
.gate-form { display: grid; gap: 0.75rem; max-width: 24rem; margin-top: clamp(2.5rem, 5vh, 3.5rem); }
.gate-form[hidden] { display: none; }
.gate-email { display: grid; gap: 0.75rem; }
.gate-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; height: 3rem; padding: 0 1.25rem; border: 1px solid oklch(0.96 0.005 90 / 0.38); border-radius: 4px; background: transparent; color: var(--g-white); font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; }
.gate-btn:hover { border-color: var(--g-white); }
.gate-btn-light { border-color: var(--g-white); background: var(--g-white); color: #000; }
.gate-btn-light:hover { background: #ffffff; }
.gate-btn:focus-visible, .gate .text-button:focus-visible, .gate a:focus-visible { outline: 2px solid var(--g-blue); outline-offset: 2px; }
.gate-btn:disabled { opacity: 0.55; cursor: default; }
.google-g { width: 1.125rem; height: 1.125rem; flex: none; }
.gate-or { display: flex; align-items: center; gap: 0.875rem; color: var(--g-grey); font-size: 0.875rem; }
.gate-or::before, .gate-or::after { content: ""; flex: 1; border-top: 1px solid oklch(0.96 0.005 90 / 0.16); }
.gate-or[hidden] { display: none; }
.gate .form-row input { height: 3rem; min-height: 0; border: 1px solid oklch(0.96 0.005 90 / 0.24); border-radius: 4px; background: transparent; color: var(--g-white); }
.gate .form-row input::placeholder { color: var(--g-grey); }
.gate .form-row input:focus-visible { outline: none; border-color: var(--g-blue); box-shadow: 0 0 0 1px var(--g-blue); }
.gate .form-row [aria-invalid] { border-color: var(--g-white); box-shadow: none; }
.gate .form-error { color: var(--g-white); }
.gate-h { font-size: 1.75rem; font-weight: 400; letter-spacing: -0.02em; }
.gate-h:focus { outline: none; }
.gate-sent { color: var(--g-grey); font-size: 1.0625rem; line-height: 1.45; overflow-wrap: anywhere; }
.gate-sent strong { color: var(--g-white); font-weight: 500; }
.gate-pending { padding: 0.75rem 0.875rem; border-left: 2px solid var(--g-blue); background: oklch(1 0 0 / 0.05); color: var(--g-white); font-size: 0.9375rem; line-height: 1.45; }
.gate-actions { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.gate .text-button { color: var(--g-white); }
.gate-status { max-width: 24rem; margin-top: 1rem; color: var(--g-white); }
.gate-help { margin-top: 2rem; color: var(--g-grey); font-size: 0.9375rem; }
.gate-help a { color: var(--g-white); text-underline-offset: 0.1875rem; text-decoration-thickness: 1px; }
@media (max-width: 860px) {
  .gate { align-items: flex-start; min-height: calc(100svh - var(--header-height)); }
  .gate-mark { top: 0; right: -45%; height: 16rem; transform: none; opacity: 0.22; }
  .gate-inner { padding-block: 3rem 4rem; }
  .gate-copy { width: 100%; max-width: 30rem; }
  .gate h1 { white-space: normal; }
}

/* Footer in the brand banner's black and off-white (2026-11-05). The header stays white. */
.site-footer { background: #000; color: #f4f3ef; box-shadow: 0 -1px 0 oklch(1 0 0 / 0.12); }
.site-footer .logo { color: #f4f3ef; }

/* Investor calls (2026-11-05): days, then that day's times, then one confirm row. */
.cal { margin-top: clamp(1.25rem, 2vw, 1.75rem); padding-top: 1.5rem; border-top: 1px solid var(--line); }
.cal-days { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: thin; }
.cal-day, .cal-time { flex: none; min-height: 2.75rem; padding: 0 1rem; border: 1px solid oklch(0.24 0.055 262 / 0.24); border-radius: 4px; background: var(--white); color: var(--ink); font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer; }
.cal-day:hover, .cal-time:hover { border-color: var(--ink); }
.cal-day[aria-selected="true"], .cal-time[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--white); }
.cal-day:focus-visible, .cal-time:focus-visible { outline: 2px solid #4abde7; outline-offset: 2px; }
.cal-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.5rem; max-width: 44rem; margin-top: 1rem; }
.cal-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; max-width: 44rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.cal-confirm[hidden] { display: none; }
.cal-pick { flex: 1 0 100%; font-size: 1.0625rem; font-weight: 500; }
.cal-confirm input { flex: 1 1 16rem; height: 2.75rem; padding: 0 0.875rem; border: 1px solid oklch(0.24 0.055 262 / 0.34); border-radius: 4px; background: var(--white); color: var(--ink); font: inherit; font-size: 1rem; }
.cal-confirm input:focus-visible { outline: none; border-color: #4abde7; box-shadow: 0 0 0 1px #4abde7; }
.cal-confirm .dark-pill { margin-top: 0; }
.cal-tz { margin-top: 1rem; color: var(--ink-2); font-size: 0.875rem; }
.cal-mine { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.cal-mine[hidden] { display: none; }
.cal-booked { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; max-width: 44rem; padding: 0.875rem 1rem; border-left: 2px solid #4abde7; background: oklch(0.97 0.01 230); font-size: 1rem; }
.cal-booked + .cal-booked { margin-top: 0.5rem; }
.cal-booked-when { font-weight: 500; }
#cal-status { margin-top: 0.75rem; }