/* Home page only (index.html, body.home-page). Linked after site-navbar.css and site-footer.css.
   Layout: a fixed WebGL field (blue gradient + ASCII highlights + grain, assets/home.js) fills the page. On desktop a
   ruler of horizontal lines on the right edge carries the four business lines (the "line dial"); the line of the
   section in view grows. Under 900px the dial becomes a sticky row of logo tabs. Copy stays in plain HTML on the
   left and scrolls normally: no scroll hijacking, snapping or locked sections. Blue and white only, no per-brand
   colours. The shared footer (dark, with the halftone wordmark) comes from site-footer.css like every page. */

@font-face {
  font-family: "PP Monument Extended Black";
  src: url("/fonts/PPMonumentExtended-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Stand-ins while the heading font loads, scaled to Monument's widths and metrics (same as site-subpage.css). */
@font-face {
  font-family: "PP Monument Fallback Black";
  src: local("Arial Black"), local("Arial-Black");
  font-weight: 900;
  size-adjust: 130%;
  ascent-override: 80%;
  descent-override: 24.6%;
  line-gap-override: 7.7%;
}
@font-face {
  font-family: "PP Monument Fallback Bold";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Arimo-Bold"),
       local("Liberation Sans Bold"), local("LiberationSans-Bold");
  font-weight: 900;
  size-adjust: 144%;
  ascent-override: 72.223%;
  descent-override: 22.223%;
  line-gap-override: 6.945%;
}
@font-face {
  font-family: "PP Monument Fallback Roboto Black";
  src: local("Roboto Black"), local("Roboto-Black");
  font-weight: 900;
  size-adjust: 155%;
  ascent-override: 67.097%;
  descent-override: 20.646%;
  line-gap-override: 6.452%;
}
@font-face {
  font-family: "PP Monument Fallback Roboto";
  src: local("Roboto"), local("Roboto-Regular");
  font-weight: 900;
  size-adjust: 158%;
  ascent-override: 65.823%;
  descent-override: 20.254%;
  line-gap-override: 6.33%;
}

body.home-page {
  --home-blue: #2d60e2;
  --home-ink: #050e29;
  --home-base: #050e29;
  --home-mist: #bcd0ff;
  --white: #ffffff;
  --font-heading: "PP Monument Extended Black", "PP Monument Fallback Black", "PP Monument Fallback Bold", "PP Monument Fallback Roboto Black", "PP Monument Fallback Roboto", var(--font-body), system-ui, sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Roboto Mono", "Liberation Mono", monospace;
  /* Content sits in the same centred 1440px frame as the navbar (site-navbar.css: max-width 1440px, 32px
     padding), so wide screens never strand the copy at the far left. The line dial is pinned to the window's
     right edge; its width is kept free on the right of each section only where it would overlap. */
  --home-frame: 1440px;
  --home-pad: 32px;
  --home-dial-w: 228px;
  /* Window space on each side of the centred frame. */
  --home-side: max(0px, calc((100vw - var(--home-frame)) / 2));
  /* Right padding of the frame: room for the line dial only where it would overlap (0 when the dial is off). */
  --home-pad-r: max(var(--home-pad), calc(var(--home-dial-w) * 1.1 - var(--home-side)));
  margin: 0;
  /* The hero runs under the fixed navbar (site-navbar.css pads other pages). */
  padding-top: 0;
  background: var(--home-base);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* No WebGL (or the shader failed): a static gradient instead of the canvas, on a fixed layer the size of the window
   (iOS Safari ignores background-attachment: fixed and would stretch the gradient over the whole page). */
.no-gl body.home-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(90% 80% at 80% 30%, #3f75f5 0, #2d60e2 28%, #091a49 75%);
}

@media (prefers-reduced-motion: no-preference) {
  html:has(body.home-page) {
    scroll-behavior: smooth;
  }
}

/* :where() keeps this reset at zero specificity, so a component rule's own margin (auto, 12px...) always wins. */
:where(.home-page) :is(h1, h2, h3, p, ol, ul, dl, dd) {
  margin: 0;
}

.home-page main ul,
.home-page main ol {
  padding: 0;
  list-style: none;
}

.home-page main a {
  color: inherit;
}

.home-page main :focus-visible,
.home-page .home-dial :focus-visible,
.home-page .home-tabs :focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Background: WebGL canvas + CSS grain */
.home-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.no-gl .home-bg {
  display: none;
}

.home-grain {
  position: fixed;
  inset: -50%;
  z-index: 4;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.2 -.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Navbar on the home page: always white ink, plus a top scrim so scrolled copy never collides with it. */
.home-page .navbar::before {
  content: "";
  position: absolute;
  inset: 0 0 -28px 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(5, 14, 41, 0.88), rgba(5, 14, 41, 0.55) 60%, rgba(5, 14, 41, 0));
  pointer-events: none;
}

body.home-page.nav-open .navbar::before {
  display: none;
}

/* ---------- Line dial (desktop, 900px and wider). assets/home.js positions every row and tick each frame. */
/* Pinned to the window's right edge at every width. The box is wider than the space sections keep free for it
   (--home-dial-w), so its soft backdrop can fade out gradually instead of being cut by the box edge (the
   vertical mask below clips anything drawn outside the box). */
.home-dial {
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(var(--home-dial-w) + 150px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}

/* A soft navy wash behind the ruler, strongest at the window edge and easing to nothing well before the box's
   left edge, so it never shows a line. The shader also eases the field's brightness down there (uDial). */
.home-dial::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgba(5, 14, 41, 0.62) 0%,
    rgba(5, 14, 41, 0.5) 22%,
    rgba(5, 14, 41, 0.3) 45%,
    rgba(5, 14, 41, 0.12) 68%,
    rgba(5, 14, 41, 0) 100%
  );
}

/* The rail: four stops on a hairline. The line fills as the page scrolls, the stop in view gets a ring and its name,
   the others stay as quiet logos (their names appear on hover or keyboard focus). assets/home.js sets --rail-top,
   --rail-h and --p, and places each row on its stop. */
.home-dial__spine,
.home-dial__progress {
  position: absolute;
  top: var(--rail-top, 30%);
  right: 27px;
  width: 1px;
  height: var(--rail-h, 40%);
}

.home-dial__spine {
  background: rgba(255, 255, 255, 0.2);
}

.home-dial__progress {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), var(--white));
  transform-origin: 50% 0;
  transform: scaleY(var(--p, 0));
}

.home-dial__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-dial__item {
  position: absolute;
  top: 0;
  right: 22px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  color: var(--white);
  text-decoration: none;
  pointer-events: auto;
  /* Before home.js runs: stacked under the centre, one stop apart. */
  transform: translateY(calc(50vh + var(--i, 0) * 72px)) translateY(-50%);
  will-change: transform;
}

/* The stop */
.home-dial__line {
  display: block;
  flex: none;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(5, 14, 41, 0.92);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.home-dial__item.is-passed .home-dial__line {
  background: var(--white);
  border-color: var(--white);
}

.home-dial__item[aria-current="true"] .home-dial__line {
  background: var(--white);
  border-color: var(--white);
  transform: scale(1.15);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16);
}

.home-dial__logo {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
}

.home-dial__logo img {
  display: block;
  width: auto;
  height: 22px;
  max-width: 44px;
  opacity: 0.55;
  transition: opacity 0.35s ease;
}

.home-dial__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(5, 14, 41, 0.9);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.home-dial__item[aria-current="true"] .home-dial__logo img {
  opacity: 1;
}

.home-dial__item[aria-current="true"] .home-dial__label,
.home-dial__item:hover .home-dial__label,
.home-dial__item:focus-visible .home-dial__label {
  opacity: 1;
  transform: none;
}

.home-dial__item:hover .home-dial__logo img,
.home-dial__item:focus-visible .home-dial__logo img {
  opacity: 1;
}

/* ---------- Mobile logo tabs (under 900px). The whole <nav> is hidden on wider screens, so it is not a second, empty
   "Business lines" landmark next to the dial's. */
.home-tabs-nav {
  display: none;
}

/* ---------- Frame + story stops */
.home-main {
  position: relative;
  z-index: 2;
}

.home-frame {
  width: 100%;
  max-width: var(--home-frame);
  margin-inline: auto;
  /* Room is kept for the line dial on the right only where it would overlap the content: the window space
     beside the frame already clears it on wide screens, so there the block is centred on the page. */
  padding-inline: var(--home-pad) var(--home-pad-r);
}

.home-stop {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 112px 0 96px;
}

/* Old deep links (/#wwd) land on the top of the section that replaced them; out of the flex layout. */
.home-anchor {
  position: absolute;
  top: 0;
  left: 0;
}

/* Copy on the left, the section's own visual on the right. */
.home-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 5vw, 88px);
}

.home-split--hero {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr);
}

.home-panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 600px;
}

/* Hero only: a wider text measure so the two-sentence line sits on three lines instead of five (the headline keeps its
   own width). The column still can't grow past its grid cell, so the numbers card is never overlapped. */
.home-hero .home-panel {
  max-width: 760px;
}

/* Two-column hero (1200px and up): the headline is sized from its column, so "Capital and counsel / for ambitious /
   founders." always fits on three lines and its longest line meets the paragraph's width, at any screen size. */
@media (min-width: 1200px) {
  .home-split--hero {
    container-type: inline-size;
  }

  .home-page .home-hero h1.home-title {
    font-size: clamp(34px, 3.8cqw, 64px);
  }

  .home-hero .home-panel {
    max-width: 900px;
  }
}

/* The headline's cap scales with its own size (16em), so wherever the column is wide enough it breaks as three lines
   ("Capital and counsel / for ambitious / founders.") whose longest line matches the paragraph's width, instead of four
   short lines with a gap on the right. Narrower columns still break to four. */
.home-hero .home-title {
  max-width: 16em;
}

@media (min-width: 900px) {
  .home-page .home-hero h1.home-title {
    text-wrap: wrap;
  }
}

/* Tablets and small laptops (one column): the headline starts a little larger, so its three lines sit about as wide as
   the paragraph under it instead of leaving a gap on the right. */
@media (min-width: 600px) and (max-width: 1199px) {
  .home-page .home-hero h1.home-title {
    font-size: clamp(40px, 4.2vw, 54px);
  }
}

.home-hero .home-lede {
  max-width: min(72ch, 100%);
}

/* Small labels straight on the field are white: even under the shader's brightness cap the mist tint only reaches
   about 3.2:1, white about 4.8:1 (AA). The rule before it keeps the mist accent. */
.home-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}

.home-eyebrow::before {
  content: "";
  width: 28px;
  border-top: 1px solid var(--home-mist);
}

.home-page .home-title {
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(5, 14, 41, 0.35);
}

.home-page h1.home-title {
  font-size: clamp(34px, 4vw, 60px);
}

.home-page h2.home-title {
  font-size: clamp(28px, 3vw, 46px);
}

.home-lede {
  max-width: 46ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 16px rgba(5, 14, 41, 0.45);
}

/* White, as the word-by-word effect leaves it once lit (and as it shows without the effect: reduced motion, no JS); at
   78% it fell under 4.5:1 on phones. The link is told apart by its underline. */
.home-lede--note {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--white);
}

.home-lede--note a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.home-lede--note a:hover {
  text-decoration-color: var(--white);
}

.home-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-chips li {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(5, 14, 41, 0.4);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

/* Phones: the long second chip wrapped inside a capsule (999px radius) next to a short one. Stacked, with a softer corner,
   the pair reads as one tidy block. */
@media (max-width: 700px) {
  .home-chips {
    flex-direction: column;
    align-items: stretch;
  }

  .home-chips li {
    padding: 9px 14px;
    border-radius: 14px;
  }
}

.home-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: 4px;
}

.home-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid var(--white);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.home-page main a.home-btn {
  color: var(--home-blue);
}

.home-btn:hover {
  transform: translateY(-2px);
}

.home-btn:active {
  transform: translateY(0) scale(0.98);
}

.home-page main a.home-btn--ghost {
  background: rgba(5, 14, 41, 0.25);
  color: var(--white);
}

.home-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

.home-skip {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.home-skip:hover {
  border-color: var(--white);
}

/* On phones the numbers card sits right under the buttons, so the link is redundant:
   keep it for keyboard users, reveal it on focus. */
@media (max-width: 900px) {
  .home-skip:not(:focus-visible) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }
}

/* Glass surface shared by the section visuals (numbers, services, deals, products, brand tile). */
.home-stats,
.home-services__item,
.home-deals,
.home-products a,
.home-brandtile {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(5, 14, 41, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 60px rgba(3, 9, 28, 0.28);
}

/* ---------- Numbers card (hero): one row per figure, number and label on one line */
.home-stats {
  /* The figures scale with the card (cqw), and labels may wrap, so nothing can run out of a narrow card. */
  container-type: inline-size;
  /* Darker than the shared glass, like the service and deal cards: the mist labels keep 4.5:1 over the brightest field. */
  background: rgba(5, 14, 41, 0.68);
  justify-self: end;
  width: 100%;
  max-width: 440px;
  padding: 10px 28px 24px;
  border-radius: 20px;
}

.home-stats__list {
  margin: 0;
}

.home-stats__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.home-stats__item dd {
  order: -1;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 30px;
  font-size: clamp(24px, 9.5cqw, 42px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.home-stats__item dt {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
  overflow-wrap: break-word;
  color: var(--home-mist);
}

.home-stats__caption {
  padding-top: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}

/* ---------- Portfolio strip (scripts/build-portfolio.mjs writes the tiles from data/portfolio.json "featured") */
.home-strip {
  position: relative;
  padding: 8px 0 56px;
}

.home-strip .home-frame {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.home-strip__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.home-page .home-strip__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: home-marquee 70s linear infinite;
}

/* Pauses on hover and on focus: the strip is focusable for keyboard users (and a tap focuses it on touch screens). */
.home-strip__viewport:hover .home-strip__track,
.home-strip__viewport:focus-within .home-strip__track {
  animation-play-state: paused;
}

/* The shared focus ring rounds to 4px; the strip keeps its own corners. */
.home-page main .home-strip__viewport:focus-visible {
  border-radius: 14px;
}

@keyframes home-marquee {
  to { transform: translateX(calc(-50% - 7px)); }
}

.home-strip__tile {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 22px;
  border-radius: 14px;
  background: var(--white);
}

.home-strip__tile--dark {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(5, 14, 41, 0.55);
}

.home-page .home-strip__tile img {
  display: block;
  width: auto;
  height: 34px;
  max-width: 130px;
  object-fit: contain;
}

/* ---------- Consulting: four services */
.home-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.home-services__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 168px;
  padding: 24px 24px 26px;
  border-radius: 18px;
  /* Darker than the shared glass so the copy keeps 7:1 or better even over the brightest part of the field. */
  background: rgba(5, 14, 41, 0.68);
}

.home-services__item:nth-child(1),
.home-services__item:nth-child(4) {
  background: rgba(14, 38, 110, 0.82);
}

.home-services__item h3 {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.home-services__item h3::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-bottom: 18px;
  background: var(--home-mist);
}

.home-services__item p {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- Curated: deal types, lit one by one while the section scrolls past */
.home-deals {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 34px 36px;
  border-radius: 22px;
  background: rgba(5, 14, 41, 0.68);
}

.home-deals__logo {
  display: block;
  width: auto;
  height: 72px;
  margin: -6px 0 2px -16px;
}

.home-deals__intro {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 8px rgba(5, 14, 41, 0.7);
}

.home-deals__list li {
  position: relative;
  padding: 12px 0 12px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-heading);
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-deals__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-deals__list li.is-active {
  color: var(--white);
  background: linear-gradient(90deg, rgba(5, 14, 41, 0.78), rgba(5, 14, 41, 0.45) 90%);
}

/* Mouse: all four are readable at rest and stay static (touch keeps the scroll stepper). */
@media (hover: hover) and (pointer: fine) {
  .home-deals__list li {
    color: var(--white);
    cursor: default;
  }
}

.home-deals__list li.is-active::before {
  transform: scaleX(1);
}

/* ---------- Rarible: brand tile */
.home-brandtile {
  position: relative;
  /* Sits on the column's outer edge like the other cards, so the copy + visual block spans the whole frame. */
  justify-self: end;
  display: grid;
  place-items: center;
  width: min(440px, 100%);
  aspect-ratio: 5 / 4;
  border-radius: 28px;
  overflow: hidden;
  /* Base as dark as the service and deal cards, so the mist host label keeps 4.5:1 over the brightest field. */
  background:
    radial-gradient(70% 70% at 50% 45%, rgba(45, 96, 226, 0.55), rgba(5, 14, 41, 0) 70%),
    rgba(5, 14, 41, 0.68);
}

.home-brandtile > img {
  position: relative;
  z-index: 1;
  width: 42%;
  height: auto;
  filter: drop-shadow(0 12px 40px rgba(5, 14, 41, 0.6));
}

.home-brandtile {
  transition: border-color 0.3s ease;
}

.home-brandtile:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

/* Collectible confetti (home.js): cards fall inside the tile, behind the mark, while the pointer is on it. */
.home-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.home-confetti__piece {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(3, 9, 28, 0.5);
  will-change: transform, opacity;
  opacity: 0;
}

.home-confetti__piece--pack {
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(3, 9, 28, 0.55);
}

.home-brandtile__host {
  z-index: 1;
  position: absolute;
  left: 24px;
  bottom: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--home-mist);
}

/* ---------- Impossibuild: products */
.home-products {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* On desktop this label sits right of the capped text column, over the brightest part of the field: white with the
   same kind of navy halo as the dial labels, so it keeps its contrast on the bright frames too. */
.home-products__title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 0 2px rgba(5, 14, 41, 0.9), 0 0 6px rgba(5, 14, 41, 0.9), 0 1px 14px rgba(5, 14, 41, 0.9);
}

.home-products__list {
  display: grid;
  gap: 14px;
}

.home-products a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 6px;
  padding: 24px 26px;
  border-radius: 18px;
  text-decoration: none;
}

/* The arrow nudges forward as the fill arrives. */
.home-products .ext-icon,
.home-rows .ext-icon {
  transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-products a.is-hot .ext-icon,
.home-rows a.is-hot .ext-icon {
  translate: 3px -3px;
}

.home-products__name {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.home-products__host {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--home-mist);
}

.home-products__desc {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

/* ---------- At a glance */
.home-glance {
  position: relative;
  padding: 112px 0 104px;
}

.home-glance::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Held at .62 out to the end of the rows' CTAs and the third step (the field is uncapped there), then easing off
     towards the dial, which has its own wash. */
  background: linear-gradient(90deg, rgba(5, 14, 41, 0.78), rgba(5, 14, 41, 0.66) 60%, rgba(5, 14, 41, 0.62) 84%, rgba(5, 14, 41, 0.25));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 140px);
  mask-image: linear-gradient(to bottom, transparent, #000 140px);
  pointer-events: none;
}

.home-glance .home-frame {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Centred pieces are centred on the page: their box is widened back over the room the frame keeps for the dial. */
.home-glance .home-frame > .home-eyebrow,
.home-page .home-glance .home-title,
.home-how {
  margin-right: calc(var(--home-pad) - var(--home-pad-r));
}

.home-glance .home-frame > .home-eyebrow {
  justify-content: center;
}

.home-page .home-glance .home-title {
  text-align: center;
  max-width: none;
}

.home-rows {
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.home-rows li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.home-rows a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 28px 200px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 24px;
  padding: 22px 8px;
  text-decoration: none;
}

.home-rows a > * {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-rows a.is-hot > * {
  transform: translateX(8px);
}

.home-rows img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.home-rows strong {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.home-rows span {
  color: rgba(255, 255, 255, 0.86);
}

.home-rows em {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-how {
  margin-top: 56px;
}

/* .home-page h3 { margin: 0 } outranks a bare class, so the margin needs the prefix. */
.home-page .home-how__title {
  margin-bottom: 36px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--home-mist);
}

.home-how__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  /* Never wider than the space between the dial's two possible positions, so it cannot run under the dial. */
  max-width: min(960px, calc(100vw - 2 * (var(--home-dial-w) + 24px)));
  margin-inline: auto;
}

.home-how__steps li {
  position: relative;
  text-align: center;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}

.home-how__steps li > :not(.home-how__num):not(strong) {
  display: inline;
}

.home-how__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 20px;
  border-radius: 10px;
  background: var(--white);
  color: var(--home-blue);
  font-family: var(--font-heading);
  font-size: 17px;
}

/* One rail joins the badges (centre to centre). ds.js (data-ds-rail) sets --p from the scroll position, so the line
   fills as you scroll and each badge lights as it reaches it; without the script the rail is simply full. */
.home-how__steps::before,
.home-how__steps::after {
  content: "";
  position: absolute;
  top: 20px;
  left: calc((100% - 56px) / 6);
  right: calc((100% - 56px) / 6);
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.home-how__steps::after {
  background: var(--white);
  transform-origin: left center;
  transform: scaleX(var(--p, 1));
}

.home-how__num {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.home-how__steps.ds-rail > li:not(.is-lit) .home-how__num {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--white);
}

.home-how__steps strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 900;
  color: var(--white);
}

.home-page .back-to-top {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(5, 14, 41, 0.75);
  color: var(--white);
}

.home-page .back-to-top:hover {
  background: rgba(5, 14, 41, 0.95);
  border-color: var(--white);
}

.home-page .back-to-top:focus-visible {
  outline-color: var(--white);
}

/* ---------- Numbers card: lift and settle (the lift is quick, the return settles with a small overshoot) */
.home-page .home-stats {
  transition: box-shadow 0.5s ease, border-color 0.3s ease;
}

.home-page .home-stats:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 36px 70px rgba(3, 9, 28, 0.45);
}

/* Rarible tile: the mark floats gently (the one looping motion on the page) */
@keyframes home-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-1.5deg); }
}

/* ---------- Motion (everything here is off under prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes home-rise {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes home-word {
    from { transform: translateY(112%); }
    to { transform: none; }
  }

  @keyframes home-card-in {
    from { opacity: 0; transform: translateY(34px) scale(0.97); }
    to { opacity: 1; transform: none; }
  }

  /* Hero: plays on load, no script needed. */
  .home-hero .home-eyebrow,
  .home-hero .home-lede,
  .home-hero .home-ctas {
    animation: home-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .home-hero .home-eyebrow { animation-delay: 0.05s; }
  .home-hero .home-lede { animation-delay: 0.55s; }
  .home-hero .home-ctas { animation-delay: 0.7s; }

  .home-hero .home-title .w > span {
    animation: home-word 1s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(0.15s + var(--i) * 0.08s);
  }

  .home-hero .home-stats {
    animation: home-card-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
  }

  .home-hero .home-stats__item {
    animation: home-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .home-hero .home-stats__item:nth-child(1) { animation-delay: 0.75s; }
  .home-hero .home-stats__item:nth-child(2) { animation-delay: 0.87s; }
  .home-hero .home-stats__item:nth-child(3) { animation-delay: 0.99s; }

  /* Everything below the hero starts hidden and is revealed by ds.js (.rv rules in ds.css). The two effects below are
     wired by home.js: html.home-js is set in the head and dropped after 4s if home.js never ran (the head snippet then
     sets ds-fail too, since home.js also wires the .rv reveals here), and home.js sets html.home-still when it wires
     no reveals (reduced motion, or ds.js missing), so nothing stays hidden. */

  /* How we work: badges pop in, then the line to the next one draws. */
  html.home-js:not(.ds-fail):not(.home-still) .home-how__num {
    transform: scale(0.4);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d, 0s) + 0.15s), opacity 0.4s ease calc(var(--d, 0s) + 0.15s);
  }

  html.home-js:not(.ds-fail):not(.home-still) .is-in .home-how__num {
    transform: none;
    opacity: 1;
  }

  /* At a glance: each row's rule draws across as it arrives. */
  .home-rows li {
    position: relative;
  }

  html.home-js:not(.ds-fail):not(.home-still) .home-rows li {
    border-bottom-color: transparent;
  }

  html.home-js:not(.ds-fail):not(.home-still) .home-rows li::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--d, 0s) + 0.1s);
  }

  html.home-js:not(.ds-fail):not(.home-still) .home-rows li.is-in::after {
    transform: scaleX(1);
  }

  /* Lift uses the separate `translate` property so it composes with the hero entrance's transform. */
  .home-page .home-stats {
    transition: translate 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease, border-color 0.3s ease;
  }

  .home-page .home-stats:hover {
    translate: 0 -8px;
    transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.3s ease;
  }

  .home-brandtile > img {
    animation: home-float 7s ease-in-out infinite;
  }
}

/* Consulting and CURATED cards lift on hover exactly like the numbers card (the lift uses `translate`, which composes
   with the reveal's transform and the unfold's rotate/scale). Mouse only; nothing is drawn over the text. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .ds-js:not(.ds-fail) .home-page :is(.home-services__item, .home-deals).rv:not(.rv--words) {
    transition: opacity 0.9s var(--ds-ease) var(--d, 0s), transform 0.9s var(--ds-ease) var(--d, 0s),
      translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.3s ease;
  }

  .home-page :is(.home-services__item, .home-deals):hover {
    translate: 0 -8px;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 36px 70px rgba(3, 9, 28, 0.45);
  }
}

/* ---------- 900-1199px: the visual moves under the copy */
@media (max-width: 1199px) {
  /* Too narrow for three centred columns beside the dial: stack the steps. */
  .home-how__steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
    gap: 28px;
  }

  .home-how__steps::before,
  .home-how__steps::after {
    display: none;
  }

  .home-split,
  .home-split--hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .home-stats {
    justify-self: start;
  }

  .home-services,
  .home-deals,
  .home-products,
  .home-brandtile {
    max-width: 640px;
  }

  .home-brandtile {
    justify-self: start;
    aspect-ratio: 16 / 9;
  }

  .home-rows a {
    grid-template-columns: 28px 170px minmax(0, 1fr) auto;
  }
}

/* ---------- Under 900px: no dial; logo tabs under the header */
@media (max-width: 899px) {
  body.home-page {
    --home-dial-w: 0px;
    --home-pad: 20px;
  }

  .home-dial {
    display: none;
  }

  .home-tabs-nav {
    display: block;
  }

  .home-tabs {
    position: fixed;
    z-index: 6;
    top: var(--site-navbar-height, 64px);
    left: 0;
    right: 0;
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 8px 20px 12px;
    overflow-x: auto;
    list-style: none;
    background: linear-gradient(to bottom, rgba(5, 14, 41, 0.85), rgba(5, 14, 41, 0));
    scrollbar-width: none;
    transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .home-tabs::-webkit-scrollbar {
    display: none;
  }

  /* The navbar slides away while scrolling down; the tabs move up into its place. */
  .home-tabs.is-raised {
    top: 0;
  }

  .home-tabs a {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background: rgba(5, 14, 41, 0.5);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .home-tabs img {
    display: block;
    width: auto;
    height: 16px;
  }

  .home-tabs .home-tabs__blue,
  .home-tabs a[aria-current="true"] .home-tabs__white {
    display: none;
  }

  .home-tabs a[aria-current="true"] {
    border-color: var(--white);
    background: var(--white);
    color: var(--home-blue);
  }

  .home-tabs a[aria-current="true"] .home-tabs__blue {
    display: block;
  }

  .home-stop {
    min-height: 0;
    padding: 96px 0 72px;
  }

  .home-hero {
    min-height: 100svh;
    padding-top: 150px;
  }

  .home-glance {
    padding: 88px 0 80px;
  }

  .home-rows a {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 6px 14px;
  }

  .home-rows img {
    width: 24px;
    height: 24px;
  }

  .home-rows a span {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .home-how__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .home-how__steps::before,
  .home-how__steps::after {
    display: none;
  }
}

@media (max-width: 520px) {
  .home-services {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-services__item {
    min-height: 0;
  }

  .home-stats {
    padding: 4px 20px 20px;
  }

  .home-stats__item dd {
    font-size: 28px;
  }

  .home-stats__item dt {
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  .home-deals {
    padding: 26px 22px 28px;
  }

  .home-btn {
    padding: 12px 20px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-btn:hover {
    transform: none;
  }

  /* Reduced motion: the fill and the nudge happen instantly. */
  .home-products a::before,
  .home-rows a::before,
  .home-products .ext-icon,
  .home-rows .ext-icon,
  .home-rows a > * {
    transition: none;
  }

  .home-page .home-strip__track {
    animation: none;
  }

  .home-strip__viewport {
    overflow-x: auto;
  }

  /* No loop, so the second (aria-hidden) copy of the list is not needed. */
  .home-strip__tile[aria-hidden="true"] {
    display: none;
  }

  .home-deals__list li,
  .home-deals__list li::before {
    transition: none;
  }
}

/* Solid fallback where the platform asks for less transparency. */
@media (prefers-reduced-transparency: reduce) {
  .home-stats,
  .home-services__item,
  .home-deals,
  .home-products a,
  .home-brandtile {
    background: #050e29;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Wide screens: the logo strip scales with the window (it was a thin 64px row inside a 1440px frame, which read
   as small beyond about 1600px). Same look, larger chips; phones and laptops keep the original sizes. */
@media (min-width: 1500px) {
  .home-strip { padding-bottom: 72px; }
  .home-strip .home-frame { gap: 24px; }
  .home-strip__track { gap: clamp(14px, 1vw, 22px); }
  .home-strip__tile {
    height: clamp(64px, 4.4vw, 104px);
    padding: 0 clamp(22px, 1.6vw, 36px);
    border-radius: clamp(14px, 1vw, 20px);
  }
  .home-page .home-strip__tile img { height: clamp(34px, 2.3vw, 56px); max-width: clamp(130px, 9vw, 200px); }
}

/* The WebGL field fades in once it has drawn its first frame, instead of popping over the CSS gradient behind it */
.home-bg { opacity: 0; transition: opacity 0.7s ease; }
.home-bg.is-live { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .home-bg { transition: none; } }

/* Phones and small tablets: the business-line chips (the dial's mobile form) stay hidden at the top of the page and
   fade in once the first screen has scrolled past, and the inactive chips shrink to their logo so all four fit
   without a sideways scroll. (No JS, or home.js never ran: they stay visible; see html.home-js above.) While hidden
   they are also out of the tab order and the accessibility tree (visibility switches once the fade-out is over), and
   keyboard focus already inside keeps the row on screen. */
@media (max-width: 899px) {
  html.home-js .home-tabs {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    translate: 0 -6px;
    transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, translate 0.3s ease, visibility 0s linear 0.3s;
  }
  html.home-js .home-tabs.is-shown { opacity: 1; visibility: visible; pointer-events: auto; translate: 0 0; transition-delay: 0s; }
  html.home-js .home-tabs:has(a:focus-visible) { opacity: 1; visibility: visible; pointer-events: auto; translate: 0 0; transition-delay: 0s; }
}
/* Landscape phones: the navbar plus the chip row would cover over a third of the short screen; the chips duplicate the
   section links, so they stay off there. */
@media (max-width: 899px) and (max-height: 500px) {
  .home-page .home-tabs-nav { display: none; }
}
@media (max-width: 640px) {
  .home-tabs { justify-content: center; gap: 6px; padding-inline: 12px; }
  .home-tabs a { padding: 7px 10px; }
  .home-tabs a:not([aria-current="true"]) { gap: 0; }
  .home-tabs a:not([aria-current="true"]) .home-tabs__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) { .home-tabs { transition: none !important; } }

/* Phones: a clear gap between the header pill and the chips (they were touching), and the same gap from the screen
   top when the header has slid away. */
@media (max-width: 899px) {
  .home-page .home-tabs { top: calc(var(--site-navbar-height, 64px) + 10px); }
  .home-page .home-tabs.is-raised { top: max(10px, env(safe-area-inset-top)); }
}

/* Tablets and phones: the chip row is centred with side padding (it sat hard against the left edge), and each
   chip blurs and darkens what scrolls underneath it (no strip behind the row, so no dark band over the sections). */
@media (max-width: 899px) {
  .home-page .home-tabs {
    justify-content: center;
    padding: 8px 20px 14px;
    background: none;
  }
  .home-page .home-tabs a {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(5, 14, 41, 0.72);
  }
  .home-page .home-tabs a[aria-current="true"] { background: var(--white); }
}