/* ==========================================================================
   Frequency.M — site styles
   Brand: black #000000, ink #111111, white #FFFFFF, Plasma Cyan #0FF0FC
   Type:  Poppins (display), Inter (body), monospace (ticker only)
   ========================================================================== */

:root {
  --black: #000000;
  --ink: #111111;
  --white: #ffffff;
  --cyan: #0ff0fc;
  --gray: #b8b8b8;
  --line: #2a2a2a;

  --font-display: "Poppins", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-mono: "SF Mono", "Menlo", "Consolas", monospace;

  --gutter: 24px;
  --measure: 68ch;
  --header-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.1; letter-spacing: -0.005em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Layout ----------------------------------------------------------------- */
.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding: clamp(64px, 10vw, 128px) 0; }
.section--ink { background: var(--ink); }
.measure { max-width: var(--measure); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}
/* Section numbering: every eyebrow carries /01, /02 ... unless marked plain */
body { counter-reset: sec; }
.eyebrow:not(.eyebrow--plain) { counter-increment: sec; }
.eyebrow:not(.eyebrow--plain)::before { content: "/" counter(sec, decimal-leading-zero); font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.08em; color: rgba(15,240,252,0.6); margin-right: 12px; }
.h1 { font-size: clamp(36px, 6vw, 72px); font-weight: 700; }
.h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 700; }
.h3 { font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; }
.lead { font-size: clamp(18px, 2vw, 22px); color: var(--gray); max-width: var(--measure); }
.muted { color: var(--gray); }
.cyan { color: var(--cyan); }

/* Buttons: liquid glass pills ------------------------------------------ */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 26px;
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 999px;
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
  white-space: nowrap;
}
/* Glass body: bright rim at the top, shade at the bottom */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,0.18) 100%);
}
/* Liquid sheen that slides across on hover */
.btn::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 36%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-140%) skewX(-18deg); opacity: 0;
}
.btn:hover::after { opacity: 1; animation: sheen 760ms var(--ease) forwards; }
@keyframes sheen { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(420%) skewX(-18deg); } }
/* Primary button (9 Nov 2026): the "shiny call to action" (Ryan Mulligan, codepen.io/hexagoncircle/pen/MWMqXbK) in the
   brand. A solid black pill with white type; a thin cyan light sits on the rim and, on hover or focus, travels round it
   with a faint dot field trailing behind, a soft cyan shimmer turning inside and a cyan glow rising from the bottom edge.
   The shimmer runs at about a third of the original's strength because Plasma Cyan floods the pill at full. The glass
   body and sliding sheen of .btn are replaced here; the ghost button keeps them. Markup is unchanged. */
@property --ga { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gao { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gp { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --gs { syntax: "<color>"; initial-value: white; inherits: false; }
@property --glow { syntax: "<number>"; initial-value: 0; inherits: false; }
.btn--primary {
  --hi: var(--cyan); --hi2: rgba(15,240,252,0.55); --anim: shine-angle linear infinite; --dur: 3s; --tr: 800ms cubic-bezier(0.25, 1, 0.5, 1);
  color: var(--white); border-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(var(--black), var(--black)) padding-box,
    conic-gradient(from calc(var(--ga) - var(--gao)), transparent, var(--hi) var(--gp), var(--gs) calc(var(--gp) * 2), var(--hi) calc(var(--gp) * 3), transparent calc(var(--gp) * 4)) border-box;
  box-shadow: inset 0 0 0 1px var(--ink), inset 0 -1ex 2rem 2px rgba(15,240,252,var(--glow));
  transition: --gao var(--tr), --gp var(--tr), --gs var(--tr), --glow var(--tr);
}
.btn--primary:active { translate: 0 1px; }
/* dot field, masked to a wedge that follows the rim light */
.btn--primary::before {
  --size: calc(100% - 6px); --pos: 2px; --space: calc(var(--pos) * 2);
  inset: auto; left: 50%; top: 50%; translate: -50% -50%; width: var(--size); height: var(--size); z-index: -1;
  background: radial-gradient(circle at var(--pos) var(--pos), white calc(var(--pos) / 4), transparent 0) padding-box;
  background-size: var(--space) var(--space); background-repeat: space;
  -webkit-mask-image: conic-gradient(from calc(var(--ga) + 45deg), black, transparent 10% 90%, black); mask-image: conic-gradient(from calc(var(--ga) + 45deg), black, transparent 10% 90%, black);
  opacity: 0.4;
}
/* inner shimmer */
.btn--primary::after {
  --anim: shine-spin linear infinite;
  inset: auto; top: 50%; left: 50%; bottom: auto; translate: -50% -50%; width: 100%; aspect-ratio: 1; transform: none; z-index: -1;
  background: linear-gradient(-50deg, transparent, var(--hi), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, black); mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.22;
}
.btn--primary, .btn--primary::before, .btn--primary::after { animation: var(--anim) var(--dur), var(--anim) calc(var(--dur) / 0.4) reverse paused; animation-composition: add; }
.btn--primary:is(:hover, :focus-visible) { --gp: 20%; --gao: 95deg; --gs: var(--hi2); --glow: 0.5; color: var(--white); }
.btn--primary:is(:hover, :focus-visible), .btn--primary:is(:hover, :focus-visible)::before, .btn--primary:is(:hover, :focus-visible)::after {
  animation: var(--anim) var(--dur) running, var(--anim) calc(var(--dur) / 0.4) reverse running; animation-composition: add;
}
.btn--primary:is(:hover, :focus-visible)::after { opacity: 0.22; transform: none; }
@keyframes shine-angle { to { --ga: 360deg; } }
@keyframes shine-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn--primary, .btn--primary::before, .btn--primary::after { animation: none !important; transition: none; } }
.btn--ghost {
  background: rgba(255,255,255,0.06); color: var(--white); border-color: rgba(255,255,255,0.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.35);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.3), 0 10px 30px rgba(255,255,255,0.06);
}
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.btn--sm { height: 40px; padding: 0 18px; font-size: 12px; }

/* Header ----------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header__logo { flex: 0 0 auto; }
.header__logo img { height: 22px; width: auto; max-width: none; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav__link {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray);
  transition: color 160ms var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--white); }
.nav__cta { margin-left: 8px; }
.nav-toggle {
  display: none; background: none; border: 0; padding: 8px; cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--white); margin: 5px 0; transition: transform 200ms var(--ease), opacity 200ms; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 60;
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 28px; padding: 40px var(--gutter);
    background: var(--black);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 260ms var(--ease), visibility 0s linear 260ms;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
  .nav__link { font-size: 18px; letter-spacing: 0.12em; }
  .nav__cta { margin: 12px 0 0; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Footer ----------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); padding: 64px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.footer__logo img { height: 20px; width: auto; margin-bottom: 16px; }
.footer__tagline { color: var(--gray); font-size: 15px; }
.footer__heading { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; }
.footer__list li { margin: 0; line-height: 1.5; }
.footer__list a { color: var(--gray); font-size: 15px; transition: color 160ms; }
.footer__list a:hover { color: var(--white); }
.footer__bottom {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  color: var(--gray); font-size: 13px;
}
.footer__bottom a { color: var(--gray); }
.footer__bottom a:hover { color: var(--white); }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; gap: 36px; } }

/* Signup field (footer and Playbook) ------------------------------------- */
.signup { display: flex; gap: 8px; max-width: 420px; }
.signup input[type="email"] {
  flex: 1; min-width: 0; height: 48px; padding: 0 18px; color: var(--white);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.3);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.signup input[type="email"]::placeholder { color: #7a7a7a; }
.signup input[type="email"]:focus { outline: none; border-color: rgba(15,240,252,0.7); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 3px rgba(15,240,252,0.15); }
.signup__consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 13px; color: var(--gray); max-width: 420px; }
.signup__consent input { margin-top: 4px; accent-color: var(--cyan); }
.signup__consent a { text-decoration: underline; }

/* Home ------------------------------------------------------------------- */
.hero {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: grid; place-items: center; text-align: center;
  padding: 48px var(--gutter);
}
.hero__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.logo-anim { width: min(640px, 90vw); position: relative; }
.logo-anim__svg { width: 100%; height: auto; overflow: visible; }
.logo-anim__word { opacity: 0; }
.logo-anim__wave { stroke: var(--cyan); stroke-width: 26; stroke-linecap: round; fill: none; }
.logo-anim__dot { fill: var(--cyan); transform-origin: center; transform-box: fill-box; opacity: 0; }
.hero__logo { width: min(640px, 90vw); height: auto; }
.hero__tagline {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2.8vw, 30px); letter-spacing: -0.01em;
  opacity: 0; max-width: 48ch;
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; opacity: 0; }
.hero__tagline.is-on, .hero__actions.is-on { opacity: 1; }
@media (max-width: 560px) { .hero__actions { flex-direction: column; width: 100%; } .hero__actions .btn { width: 100%; } }
.hero__cue { position: absolute; bottom: 28px; left: 50%; width: 2px; height: 36px; background: var(--cyan); opacity: 0; transform: translateX(-50%); }

/* Animation sequence: wave draws, dot pops, wordmark, tagline, buttons */
.is-animating .logo-anim__wave { stroke-dasharray: 1800; stroke-dashoffset: 1800; animation: draw 1.6s ease-in-out forwards; }
.is-animating .logo-anim__dot { animation: pop 420ms var(--ease) 1.35s forwards; }
.is-animating .logo-anim__word { animation: rise 700ms var(--ease) 1.5s forwards; }
.is-animating .hero__logo { width: min(640px, 90vw); height: auto; }
.hero__tagline { animation: rise 700ms var(--ease) 2.0s forwards; }
.is-animating .hero__actions { animation: rise 700ms var(--ease) 2.3s forwards; }
.is-animating .hero__cue { animation: cue 1.6s ease-in-out 2.8s infinite; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { 0% { opacity: 0; transform: scale(0.2); } 70% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cue { 0%, 100% { opacity: 0; transform: translate(-50%, -8px); } 50% { opacity: 1; transform: translate(-50%, 0); } }

/* Static state: everything visible, nothing moves */
.is-static .logo-anim__wave { stroke-dasharray: none; stroke-dashoffset: 0; }
.is-static .logo-anim__dot, .is-static .logo-anim__word, .is-static .hero__tagline, .is-static .hero__actions { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn::after { display: none; }
  .panel--photo .scan { display: none; }
  .panel--photo img { clip-path: none !important; animation: none !important; }
  .is-animating .logo-anim__wave, .is-animating .logo-anim__dot, .is-animating .logo-anim__word,
  .is-animating .hero__tagline, .is-animating .hero__actions, .is-animating .hero__cue { animation: none; }
  .is-animating .logo-anim__wave { stroke-dasharray: none; stroke-dashoffset: 0; }
  .is-animating .logo-anim__dot, .is-animating .logo-anim__word, .is-animating .hero__tagline, .is-animating .hero__actions { opacity: 1; }
}

/* Page stubs ------------------------------------------------------------- */
.page-head { padding: clamp(64px, 10vw, 120px) 0 clamp(32px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.page-head--noline { border-bottom: 0; }
.stub { padding: 64px 0 128px; color: var(--gray); }
.stub__note { font-family: var(--font-mono); font-size: 13px; color: #6b6b6b; margin-top: 48px; }

/* Legal pages ------------------------------------------------------------ */
.legal { padding: 48px 0 128px; } .legal__body { max-width: 760px; }
.legal h2 { font-size: 22px; margin: 48px 0 16px; }
.legal p, .legal li { color: var(--gray); }
.legal ul { list-style: disc; padding-left: 20px; margin-bottom: 1em; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 16px 0 24px; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Utilities -------------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ==========================================================================
   Page components
   ========================================================================== */

/* Generic two column text block */
.cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; gap: 40px; } }
.prose p { color: var(--gray); max-width: var(--measure); }
.prose p strong { color: var(--white); font-weight: 500; }

/* Commitment tiles (About) */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { background: var(--ink); border: 1px solid var(--line); padding: 24px 24px 20px; }
.tile__big { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.1; }
.tile__small { color: var(--gray); font-size: 15px; margin-top: 4px; }

/* Signal Bar ticker (About) */
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--black); overflow: hidden; padding: 14px 0; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.ticker__track { display: inline-flex; gap: 0; will-change: transform; animation: ticker-scroll 60s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display: inline-flex; align-items: center; gap: 14px; padding-right: 40px; }
.ticker__sep { color: #444; }
.ticker__live { color: var(--cyan); font-weight: 700; }
.ticker__live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); margin-right: 8px; animation: blink 1.6s ease-in-out infinite; }
.ticker__num { color: var(--white); }
.ticker__total { color: var(--cyan); font-weight: 700; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Proof numbers */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
.proof__n { font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); font-weight: 700; color: var(--cyan); line-height: 1; }
.proof__l { color: var(--gray); margin-top: 8px; }
.names { color: var(--gray); font-size: 15px; line-height: 1.9; }
.names span { color: var(--white); }

/* Big closing line (About) */
.bigline { font-family: var(--font-display); font-size: clamp(36px, 6vw, 80px); font-weight: 700; letter-spacing: -0.01em; line-height: 1; margin-top: 48px; }
.sources { color: #6b6b6b; font-size: 13px; margin-top: 24px; }

/* Service rows (Services) */
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 56px 1fr 1.6fr; gap: 32px; padding: 36px 0; border-bottom: 1px solid var(--line); }
.row__n { font-family: var(--font-mono); color: var(--cyan); font-size: 13px; padding-top: 6px; }
.row__title { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.2; }
.row__body { color: var(--gray); }
@media (max-width: 760px) { .row { grid-template-columns: 1fr; gap: 10px; } .row__n { padding-top: 0; } }

/* Cards (working arrangements) */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card { background: var(--ink); border: 1px solid var(--line); padding: 36px; }
.card h3 { color: var(--cyan); font-size: 26px; margin-bottom: 8px; }
.card__sub { font-family: var(--font-display); font-weight: 600; color: var(--white); margin-bottom: 16px; }
.card p { color: var(--gray); }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }

/* How it works columns */
.how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.how > div { border-top: 1px solid var(--line); padding-top: 24px; }
.how h3 { font-size: 22px; margin-bottom: 12px; }
.how p { color: var(--gray); font-size: 16px; }
@media (max-width: 900px) { .how { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .how { grid-template-columns: 1fr; } }

/* Cover art wall (Releases) */
.wall { overflow: hidden; padding: 12px 0; background: var(--black); }
.wall__row { display: flex; gap: 12px; width: max-content; margin-bottom: 12px; will-change: transform; }
.wall__row--right { animation: wall-right 120s linear infinite; }
.wall__row--left { animation: wall-left 120s linear infinite; }
.wall__row:last-child { margin-bottom: 0; }
.wall__item { position: relative; flex: 0 0 auto; width: clamp(120px, 13.6vw, 187px); aspect-ratio: 1; overflow: hidden; background: var(--ink); border-radius: 6px; box-shadow: 0 0 0 1px rgba(255,255,255,0.06); }
.wall__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall__cap { display: none; position: absolute; inset: auto 0 0 0; padding: 10px 12px; background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0)); font-size: 12px; line-height: 1.3; opacity: 0; transition: opacity 200ms; }
.wall__cap strong { display: block; font-weight: 500; color: var(--white); }
.wall__cap span { color: var(--gray); }
@keyframes wall-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes wall-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .wall__row { animation: none; width: auto; flex-wrap: wrap; }
  .wall__row .wall__item:nth-child(n+7) { display: none; }
  .ticker__track { animation: none; }
}

/* Release index */
.index { columns: 3; column-gap: 48px; }
.index__group { break-inside: avoid; margin-bottom: 28px; }
.index__artist { font-family: var(--font-display); font-weight: 600; margin-bottom: 6px; }
.index__list li { color: var(--gray); font-size: 15px; padding: 3px 0; }
.cert { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--cyan); border: 1px solid var(--cyan); padding: 1px 5px; margin-left: 8px; vertical-align: 1px; }
@media (max-width: 900px) { .index { columns: 2; } }
@media (max-width: 560px) { .index { columns: 1; } }

/* Founder */
.founder { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: stretch; }
.founder > * { min-width: 0; }
.founder__photo img { width: 100%; height: auto; }
.founder__name { font-size: clamp(36px, 5vw, 56px); margin-bottom: 18px; }
.founder__title { color: var(--gray); font-family: var(--font-display); font-weight: 600; margin: 8px 0 24px; }
.founder__stats { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 24px 0 12px; }
.quote { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 24px; }
.quote p { font-style: italic; font-size: 20px; margin-bottom: 4px; }
.quote cite { font-style: normal; color: var(--gray); font-size: 15px; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; gap: 40px; align-items: start; } .founder__photo { max-width: 420px; } .founder__photo.panel--photo { height: auto; } .founder__photo.panel--photo img { height: auto; } }

/* Playbook */
.pb { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.pb__cover { position: relative; display: grid; place-items: center; padding: 40px 0; }
.pb__cover::before { content: ""; position: absolute; inset: 10%; background: radial-gradient(closest-side, rgba(15,240,252,0.22), transparent 70%); filter: blur(40px); }
.pb__cover img { position: relative; width: min(247px, 52%); height: auto; box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06); transform: rotate(-2deg); }
.pb__title { font-size: clamp(40px, 6vw, 72px); line-height: 0.98; text-transform: uppercase; letter-spacing: -0.03em; }
.form { display: grid; gap: 12px; margin-top: 32px; max-width: 520px; }
.form input[type="text"], .form input[type="email"], .form input[type="url"], .form select, .form textarea {
  width: 100%; height: 52px; padding: 0 20px; color: var(--white);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.3);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.form textarea { height: auto; min-height: 140px; padding: 16px 20px; resize: vertical; border-radius: 22px; }
.form select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gray) 50%), linear-gradient(135deg, var(--gray) 50%, transparent 50%); background-position: calc(100% - 22px) 23px, calc(100% - 16px) 23px; background-size: 6px 6px; background-repeat: no-repeat; }
.form input::placeholder, .form textarea::placeholder { color: #7a7a7a; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: rgba(15,240,252,0.7); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 3px rgba(15,240,252,0.15); }
.form .btn { height: 52px; width: 100%; }
.form__fine { font-size: 12.5px; line-height: 1.5; color: #8a8a8a; }
.form__fine a { text-decoration: underline; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form__status { font-size: 14px; color: var(--cyan); min-height: 20px; }
.form__status.is-error { color: #ff6b6b; }
.pb__meta { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray); margin-top: 20px; }
@media (max-width: 860px) { .pb { grid-template-columns: 1fr; gap: 24px; } .pb__cover img { width: min(300px, 70%); } .form__row { grid-template-columns: 1fr; } }

/* Chapters list */
.chapters { counter-reset: ch; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--line); }
.chapters li { counter-increment: ch; display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.chapters li::before { content: counter(ch, decimal-leading-zero); font-family: var(--font-mono); color: var(--cyan); font-size: 13px; padding-top: 3px; }
.chapters strong { display: block; font-weight: 500; }
.chapters span { color: var(--gray); font-size: 15px; }
@media (max-width: 760px) { .chapters { grid-template-columns: 1fr; } }

/* Connect */
.connect { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.contact { font-size: 17px; }
.contact p { margin: 0 0 4px; }
.rule { height: 2px; background: var(--cyan); margin: 40px 0; }
@media (max-width: 860px) { .connect { grid-template-columns: 1fr; gap: 40px; } }


.iglink { display: inline-flex; align-items: center; gap: 8px; }
.iglink .ig { flex: 0 0 auto; }
.proof--count .proof__n { font-variant-numeric: tabular-nums; }

.h1--sm { font-size: clamp(31px, 5.1vw, 61px); }
.section--tight { padding-top: 8px; padding-bottom: 40px; }
.page-head--noline { padding-bottom: 16px; }

/* Centered logo header: ABOUT SERVICES RELEASES [logo] FOUNDER PLAYBOOK CONNECT */
.header__inner--center { justify-content: center; }
.header__inner--center .header__logo { display: none; }
.nav--split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px; width: 100%; }
.nav__side { display: flex; gap: 32px; align-items: center; }
.nav__side--l { justify-content: flex-end; }
.nav__side--r { justify-content: flex-start; }
.nav__logo img { height: 24px; width: auto; max-width: none; }
@media (max-width: 900px) {
  .header__inner--center { justify-content: space-between; }
  .header__inner--center .header__logo { display: block; }
  .nav--split { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
  .nav__side { flex-direction: column; align-items: flex-start; gap: 28px; }
  .nav__logo { display: none; }
}

/* Home hero signal grid */
.hero--grid { position: relative; overflow: hidden; isolation: isolate; }
.page-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.hero--grid ~ *, .hero--grid { position: relative; z-index: 1; }
body:has(.page-grid) .header, body:has(.page-grid) main, body:has(.page-grid) .footer { position: relative; z-index: 1; }
body:has(.page-grid) .footer { background: var(--black); }
.hero--grid .hero__inner { position: relative; }
.hero__logo-wrap { position: relative; display: block; width: min(640px, 90vw); }
.hero__logo-wrap .hero__logo { width: 100%; }
.hero__pulse { position: absolute; inset: 0; width: 100%; height: auto; opacity: 0; filter: blur(14px) saturate(1.6); animation: pulse 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes pulse { 0%, 100% { opacity: 0; } 50% { opacity: 0.45; } }
.hero--grid .hero__tagline, .hero--grid .hero__actions, .hero--grid .hero__logo-wrap { animation: rise 900ms var(--ease) both; }
.hero--grid .hero__logo-wrap { animation-delay: 0.9s; }
.hero--grid .hero__tagline { animation-delay: 1.15s; }
.hero--grid .hero__actions { animation-delay: 1.35s; }
@media (prefers-reduced-motion: reduce) {
  .hero__pulse { animation: none; }
  .hero--grid .hero__tagline, .hero--grid .hero__actions, .hero--grid .hero__logo-wrap { animation: none; }
}

/* Motion layer */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.wm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.22em; margin-bottom: -0.22em; }
.wm .w { display: inline-block; will-change: transform; }
.btn--primary { will-change: transform; }

/* Home sections sit on the page grid */
.section--glass { background: rgba(17,17,17,0.72); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
/* ==========================================================================
   Control room pass: outlined panels, dot field hero, Crevix style footer
   ========================================================================== */

/* Header back to logo left, nav right */
.header__inner { justify-content: space-between; }

/* Hero: headline led, dot field behind */
.hero--field { position: relative; overflow: hidden; min-height: calc(100svh - var(--header-h) - 150px); display: grid; align-items: end; padding: 40px var(--gutter) 88px; }
/* the dot wave canvas (dots.js) fades in behind the text; a shade over the lower part keeps the headline and lead clear */
.hero__dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; animation: dots-in 1.2s ease-out 0.2s forwards; }
@keyframes dots-in { to { opacity: 1; } }
.hero--field::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0) 55%); }
.hero--flat .hero__dots { display: none; }
@media (prefers-reduced-motion: reduce) { .hero__dots { animation: none; opacity: 1; } }
.hero__inner--left { position: relative; z-index: 1; align-items: flex-start; text-align: left; gap: 24px; max-width: 1200px; }
.hero__inner--bottom { width: 100%; align-items: flex-start; }
.hero__main { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.hero__kicker--corner { position: absolute; right: 0; bottom: 0; margin: 0; }
@media (max-width: 760px) { .hero__kicker--corner { position: static; margin-top: 8px; } }
.hero__kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--gray); border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; }
.hero__kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: blink 2.4s ease-in-out infinite; }
.hero__h1 { max-width: 100%; font-size: clamp(38px, 5.5vw, 80px); letter-spacing: 0; line-height: 1.04; }
.hero--field .lead { max-width: 52ch; }
.hero--field .hero__actions { justify-content: flex-start; }
.page-grid { display: none; }

/* Panels: one hairline, soft inner light at the top, faint corner ticks */
.panels { display: grid; gap: 16px; margin-top: 40px; }
.panels--2 { grid-template-columns: repeat(2, 1fr); }
.panels--3 { grid-template-columns: repeat(3, 1fr); }
.panels--4 { grid-template-columns: repeat(4, 1fr); }
.panels--services { grid-template-columns: repeat(3, 1fr); }
.panels--services .panel:nth-child(4), .panels--services .panel:nth-child(5) { grid-column: span 1; }
.panel {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 200px;
  padding: 28px 26px;
  background: linear-gradient(180deg, rgba(15,240,252,0.08) 0%, rgba(17,17,17,0.6) 46%, rgba(0,0,0,0.6) 100%);
  border: 1px solid rgba(15,240,252,0.22);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(15,240,252,0.18), 0 0 0 1px rgba(0,0,0,0.6);
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease), transform 220ms var(--ease);
}
.panel::before, .panel::after { content: ""; position: absolute; width: 10px; height: 10px; border-color: rgba(15,240,252,0.55); border-style: solid; opacity: 0; transition: opacity 220ms; }
.panel::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; border-top-left-radius: 10px; }
.panel::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; border-bottom-right-radius: 10px; }
.panel:hover { border-color: rgba(15,240,252,0.5); box-shadow: inset 0 1px 0 rgba(15,240,252,0.35), 0 0 24px rgba(15,240,252,0.08); transform: translateY(-2px); }
.panel:hover::before, .panel:hover::after { opacity: 1; }
.panel__t { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--white); }
.panel__b { color: var(--gray); font-size: 15px; margin: 0; }
.panel__sub { font-family: var(--font-display); font-weight: 600; color: var(--white); }
.panel--big { min-height: 0; padding: 36px; }
.panel--big .panel__t { color: var(--cyan); font-size: 26px; }
.panel--big .panel__b { margin-top: 0; font-size: 17px; }
.panel__icon { width: 40px; height: 40px; color: var(--cyan); display: grid; place-items: center; border: 1px solid rgba(15,240,252,0.25); border-radius: 8px; background: rgba(15,240,252,0.06); }
.panel__icon svg { width: 22px; height: 22px; }
.panel--service { min-height: 280px; }
.panel--service .panel__t { font-size: 22px; margin-top: 6px; }
.panel--service .panel__b { margin-top: 0; }
@media (max-width: 1000px) { .panels--4, .panels--services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .panels--2, .panels--3, .panels--4, .panels--services { grid-template-columns: 1fr; } .panel { min-height: 0; } }

/* Footer, Crevix structure */
.footer { padding: 72px 0 32px; }
.footer__grid--4 { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
.footer__h { font-size: 24px; font-weight: 600; margin-bottom: 12px; }
.footer__about .footer__tagline { max-width: 36ch; margin-bottom: 24px; }
.footer__follow { display: flex; align-items: center; gap: 12px; margin-top: 24px; color: var(--gray); font-size: 14px; }
.footer__follow .iglink { width: 36px; height: 36px; display: inline-grid; place-items: center; color: var(--white); }
.footer__heading { font-size: 16px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.footer__list li { line-height: 1.55; }
.footer__bottom--center { justify-content: center; text-align: center; }
@media (max-width: 860px) { .footer__top, .footer__grid--4 { grid-template-columns: 1fr; } .footer__signup { justify-self: start; } }

/* ==========================================================================
   Elevation pass (Nov 2026): Founder motion, name tickers
   ========================================================================== */
.founder__photo.panel--photo { padding: 0; min-height: 0; overflow: hidden; display: block; height: 100%; }
.founder__photo.panel--photo img { height: 100%; object-fit: cover; object-position: center top; }
.panel--photo img { display: block; width: 100%; height: auto; will-change: transform, clip-path; }
.panel--photo .scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--cyan); box-shadow: 0 0 18px 3px rgba(15,240,252,0.55); opacity: 0; pointer-events: none; z-index: 2; }
.panel--photo.is-pending img { clip-path: inset(0 0 100% 0); }
.panel--photo.is-scanned img { animation: scan-reveal 2600ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.panel--photo.is-scanned .scan { animation: scan-line 2600ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes scan-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes scan-line { 0% { top: 0; opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.proof--founder { margin-top: 32px; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.proof--founder .proof__n { font-size: clamp(30px, 3.6vw, 44px); }
.proof--founder .proof__n--text { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; }
.ticker--names { border-top: 1px solid rgba(15,240,252,0.18); border-bottom: 1px solid rgba(15,240,252,0.18); }
.ticker--names .ticker__track { animation-duration: 90s; }
.ticker__tag { color: var(--cyan); font-weight: 700; }
.ticker__name { color: var(--white); }

/* Readouts: stat panels (Founder) */
.readouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; }
@media (max-width: 1000px) { .readouts { grid-template-columns: 1fr 1fr; } }
.panel.readout { min-height: 0; padding: 14px 18px 12px; gap: 4px; }
.readout__n { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; color: var(--cyan); line-height: 1; font-variant-numeric: tabular-nums; }
.readout__l { color: var(--gray); font-size: 13px; }
@media (max-width: 420px) { .readouts { grid-template-columns: 1fr; } }

/* Inline name reel inside a column */
.ticker--inline { margin-top: 14px; padding: 10px 0; font-size: 12px; border-color: rgba(255,255,255,0.1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }

/* Commitment and chapter panels */
.panel__idx { font-family: var(--font-mono); font-size: 12px; color: rgba(15,240,252,0.7); letter-spacing: 0.08em; }
.panel--commit { min-height: 0; padding: 22px 22px 20px; gap: 4px; }
.panel--commit .tile__big { margin-top: 10px; }
.cols--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .cols--even { grid-template-columns: 1fr; } }
.chapters--panels { list-style: none; padding: 0; margin: 40px 0 0; border: 0; counter-reset: none; }
.chapters--panels .panel--chapter { min-height: 0; padding: 20px 22px; gap: 10px; counter-increment: none; display: flex; }
.chapters--panels .panel--chapter::before { display: none; }
.chapters--panels .panel--chapter strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.25; color: var(--white); }

/* Artist chips (About receipts) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 7px 14px; background: rgba(255,255,255,0.04); }

/* Playbook top, v2 */
.pb--v2 { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; gap: 48px; }
.pb__h1 { font-size: clamp(34px, 3.9vw, 56px); max-width: none; }
.pb__sub { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.2vw, 26px); margin-top: 16px; }
.marks { margin: 24px 0 8px; display: grid; gap: 10px; color: var(--gray); font-size: 15px; }
.marks li { display: grid; grid-template-columns: 36px 1fr; align-items: baseline; }
.marks__n { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); letter-spacing: 0.08em; }
.pb__object { min-height: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; align-self: center; justify-self: end; width: min(100%, 420px); }
.pb__body { display: grid; place-items: center; padding: 32px; }
.pb__strip { display: flex; gap: 14px; align-items: center; white-space: nowrap; overflow: hidden; padding: 14px 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); border-bottom: 1px solid rgba(15,240,252,0.18); }
.pb__object img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .pb--v2 { grid-template-columns: 1fr; } .pb__object { justify-self: start; } .pb__body { padding: 24px; } .pb__strip { gap: 10px; font-size: 11px; padding: 12px 16px; } .chapters--panels { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .chapters--panels { grid-template-columns: 1fr; } }

/* Playbook, Inside */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px; }
.figure { border-top: 1px solid rgba(15,240,252,0.35); padding-top: 18px; }
.figure__n { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4vw, 56px); color: var(--cyan); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.figure__u { font-size: 0.38em; margin-left: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(15,240,252,0.75); font-weight: 600; }
.figure__l { color: var(--gray); font-size: 15px; margin-top: 12px; max-width: 28ch; }
@media (max-width: 1000px) { .figures { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .figures { grid-template-columns: 1fr; gap: 24px; } }
.pull { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.12; letter-spacing: -0.02em; max-width: 24ch; margin: 0; border-left: 2px solid var(--cyan); padding-left: 28px; }
.pull__cite { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); margin-top: 20px; padding-left: 30px; }
.rows--tight .row { grid-template-columns: 40px 1fr; gap: 6px 16px; padding: 22px 0; }
.rows--tight .row__title { font-size: 20px; }
.rows--tight .row__body { grid-column: 2; font-size: 15px; margin: 0; }
.timeline { list-style: none; margin: 0; padding: 4px 0 0 24px; border-left: 1px solid rgba(15,240,252,0.35); display: grid; gap: 24px; }
.timeline li { position: relative; display: grid; gap: 4px; }
.timeline li::before { content: ""; position: absolute; left: -29px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--black); border: 1px solid var(--cyan); box-shadow: 0 0 10px rgba(15,240,252,0.5); }
.timeline__t { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); }
.timeline__b { color: var(--gray); font-size: 15px; }
.ticker--chapters { border-color: rgba(15,240,252,0.18); }
.ticker__idx { color: rgba(15,240,252,0.7); margin-right: 10px; }
.pb__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 48px; font-size: 14px; }

/* Playbook table of contents */
.toc .row { padding: 28px 0; transition: border-color 220ms var(--ease); }
.toc .row:hover { border-bottom-color: rgba(15,240,252,0.5); }
.toc .row__title { font-size: 22px; }
.toc .row__body { margin: 0; }
.toc__plus { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); margin-top: 24px; }

/* Releases, elevated */
.wall { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.wall__item img { filter: saturate(calc(0.25 + 0.75 * var(--lit, 1))) brightness(calc(0.75 + 0.25 * var(--lit, 1))); transition: filter 320ms linear; }
@media (prefers-reduced-motion: reduce) { .wall__item img { filter: none; } }
/* Hero text link, span panel, How it works panels */
.hero__link { color: var(--gray); font-size: 15px; text-decoration: none; text-underline-offset: 4px; transition: color 160ms var(--ease); }
.hero__link:hover { text-decoration: underline; color: var(--white); }
.panel--span { grid-column: 1 / -1; min-height: 0; }
.panels--how { grid-template-columns: repeat(3, 1fr); }
.panels--how .panel--big { padding: 32px 28px; }
.panels--how .panel--big .panel__t, .panels--how .panel--big h3 { font-size: 24px; }
.panel__cta { margin-top: auto; padding-top: 20px; }
.panels--how .btn { width: 100%; }
@media (max-width: 1000px) { .panels--how { grid-template-columns: 1fr; } }

/* Playbook spacing */
.pb-section { padding-bottom: 40px; }
.pb-inside { padding-top: 56px; }
.form__status:empty { display: none; }

/* Home: the problem, the solution (four stage loop), the proof */
.panels--problem { grid-template-columns: repeat(2, 1fr); }
.panel--problem { min-height: 0; padding: 24px 26px 26px; gap: 8px; }
.panel--problem .panel__t { font-size: 22px; margin-top: 4px; }
.panel--problem .panel__b { font-size: 15.5px; line-height: 1.6; }
@media (max-width: 860px) { .panels--problem { grid-template-columns: 1fr; } }

/* The loop: four nodes in a row, connectors drawn by loop.js into .loop__wire, dashed return path under the row.
   Lines are 1px cyan at low alpha; the only solid cyan is the 8px dot on each node and the travelling pulse. */
.loop { position: relative; margin: 72px 0 0; }
.loop__wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.loop__seg { fill: none; stroke: var(--cyan); stroke-opacity: 0.32; stroke-width: 1; transition: stroke-opacity 360ms; }
.loop__seg--return { stroke-dasharray: 3 7; stroke-opacity: 0.26; }
.loop__head { fill: none; stroke: var(--cyan); stroke-opacity: 0.55; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; transition: stroke-opacity 360ms; }
.loop__pulse { fill: var(--cyan); filter: drop-shadow(0 0 6px rgba(15,240,252,0.9)); opacity: 0; transition: opacity 240ms; }
.loop__nodes { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 36px; margin: 0; padding: 0; list-style: none; }
.loop__node { position: relative; padding: 24px 0 0 18px; transition: opacity 360ms; }
.loop__dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(15,240,252,0); transition: box-shadow 360ms, transform 360ms; }
.loop__t { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.005em; line-height: 1.2; color: var(--white); margin: 0; }
.loop__d { font-size: 15px; line-height: 1.6; color: var(--gray); margin: 10px 0 0; max-width: 30ch; }
.loop__return { margin: 58px 0 0; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: #7a7a7a; }
.loop__ret-icon { display: none; }
.loop.is-hover .loop__node { opacity: 0.5; }
.loop.is-hover .loop__node.is-on { opacity: 1; }
.loop.is-hover .loop__seg { stroke-opacity: 0.14; }
.loop.is-hover .loop__head { stroke-opacity: 0.25; }
.loop.is-hover .loop__seg.is-on { stroke-opacity: 0.95; }
.loop.is-hover .loop__head.is-on { stroke-opacity: 1; }
.loop__node.is-on .loop__dot, .loop__node.is-lit .loop__dot { box-shadow: 0 0 0 5px rgba(15,240,252,0.16), 0 0 14px rgba(15,240,252,0.7); }
.loop__node.is-on .loop__dot { transform: scale(1.25); }
@media (max-width: 860px) {
  .loop__nodes { gap: 0 24px; }
  .loop__t { font-size: 19px; }
  .loop__d { font-size: 14px; }
}
@media (max-width: 640px) {
  .loop { margin-top: 48px; }
  .loop__nodes { grid-template-columns: 1fr; gap: 36px 0; }
  .loop__node { padding: 0 0 0 22px; }
  .loop__dot { top: 7px; }
  .loop__t { font-size: 20px; }
  .loop__d { max-width: none; }
  .loop__return { position: relative; margin-top: 40px; padding-left: 22px; text-align: left; font-size: 12px; line-height: 1.5; }
  .loop__ret-icon { display: block; position: absolute; left: -7px; top: 1px; width: 14px; height: 14px; color: rgba(15,240,252,0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .loop__pulse { display: none; }
  .loop__seg, .loop__head, .loop__node, .loop__dot { transition: none; }
}

.proof--wall { margin-top: 40px; gap: 0; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof--wall li { padding: 40px 28px 36px; border-left: 1px solid var(--line); }
.proof--wall li:first-child { border-left: 0; padding-left: 0; }
.proof--wall .proof__n { font-size: clamp(44px, 5.4vw, 80px); letter-spacing: -0.005em; }
.proof--wall .proof__l { margin-top: 14px; font-size: 15px; }
@media (max-width: 860px) {
  .proof--wall { grid-template-columns: 1fr 1fr; }
  .proof--wall li { padding: 28px 20px 26px; }
  .proof--wall li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .proof--wall li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 420px) {
  .proof--wall { grid-template-columns: 1fr; }
  .proof--wall li { border-left: 0; padding-left: 0; }
  .proof--wall li:nth-child(n+2) { border-top: 1px solid var(--line); }
}

/* ==========================================================================
   Notes pass (6 Nov 2026): nav hover line, close card, releases stats, connect
   ========================================================================== */

/* Nav: a cyan line draws left to right under the hovered link */
.nav__link { position: relative; padding-bottom: 4px; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cyan); transform: scaleX(0); transform-origin: left center; transition: transform 360ms var(--ease); }
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); }

/* Footer: two social marks side by side */
.footer__follow .iglink + .iglink { margin-left: -4px; }

/* Close CTA: one rounded, shaded card. Dot field glow at both edges, headline centered, one button. */
.close { padding: clamp(24px, 4vw, 48px) 0 clamp(64px, 8vw, 112px); }
.close__card {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding: clamp(64px, 9vw, 128px) clamp(24px, 6vw, 96px);
  border-radius: 28px; border: 1px solid rgba(15,240,252,0.22);
  background: linear-gradient(180deg, #171717 0%, #0d0d0d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(0,0,0,0.5), 0 40px 120px rgba(0,0,0,0.6), 0 0 80px rgba(15,240,252,0.05);
}
/* Dots at the edges, like the hero field, fading to nothing before the text */
.close__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55;
  background-image: radial-gradient(circle, rgba(15,240,252,0.55) 0.8px, transparent 1.4px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 32%, transparent 68%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 32%, transparent 68%, #000 100%);
}
/* Soft cyan light behind each edge */
.close__card::after {
  content: ""; position: absolute; inset: -20%; z-index: -2; pointer-events: none;
  background: radial-gradient(40% 70% at 4% 50%, rgba(15,240,252,0.18), transparent 70%), radial-gradient(40% 70% at 96% 50%, rgba(15,240,252,0.18), transparent 70%);
  filter: blur(30px);
}
/* Close headline: two lines on desktop with the break forced after "be," (the <br> survives the word split),
   sized so the first line fits the card at every desktop width; the body sits on one line from about 1000px up */
.close__h { font-size: 26px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.1; margin: 0 auto; }
.close__br { display: none; }
@media (min-width: 900px) { .close__h { font-size: clamp(26px, 2.6vw, 36px); } .close__br { display: inline; } }   /* 36px cap: at 38px the first line no longer fit the card on wide screens and left "be," alone on a line */
.close__sub { color: var(--gray); font-size: clamp(15px, 1.25vw, 18px); margin: 22px auto 0; }
@media (max-width: 640px) { .close__sub { font-size: 16px; } }
.close__cta { margin-top: 36px; display: flex; justify-content: center; }
@media (max-width: 640px) {
  .close__card { border-radius: 20px; padding: 56px 24px; }
  .close__card::before { -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%); mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%); }
  .close__cta .btn { width: 100%; }
}

/* Releases: the four stats under the lead, outlined, then the wall */
.readouts--page { margin-top: 40px; gap: 12px; max-width: 980px; }
.readouts--page .panel.readout { padding: 22px 24px 20px; gap: 6px; }
.readouts--page .readout__n { font-size: clamp(30px, 3.4vw, 44px); }
.readouts--page .readout__l { font-size: 14px; }
.wall--page { margin-top: clamp(40px, 6vw, 72px); }
.releases-wall + .close { padding-top: clamp(48px, 7vw, 96px); }
@media (max-width: 640px) { .readouts--page { grid-template-columns: 1fr 1fr; } }

/* Connect: form in an outlined panel beside the live option */
.connect--v2 { grid-template-columns: 1.15fr 0.85fr; gap: 24px; margin-top: 48px; align-items: start; }
.form--panel { display: grid; gap: 16px; margin-top: 0; max-width: none; min-height: 0; padding: 32px; }
.panel--static:hover { transform: none; }
.field { display: block; }
.field__l { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; }
.form select:invalid { color: #7a7a7a; }
.form select option { color: var(--white); background: var(--ink); }
.form--panel .form__fine { margin: 0; }
.connect__side { display: grid; gap: 16px; }
.panel--live { min-height: 0; padding: 32px; gap: 10px; }
.panel--live .panel__t { font-size: 24px; }
.panel--live .panel__b { font-size: 15.5px; line-height: 1.6; }
.panel--live .panel__cta { padding-top: 16px; }
.panel--live .btn { width: 100%; }
.connect__meta { margin: 0; padding: 4px 8px 0; display: grid; gap: 12px; }
.connect__meta div { display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: baseline; font-size: 15px; }
.connect__meta dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }
.connect__meta dd { margin: 0; color: var(--white); }
.connect__meta a:hover { color: var(--cyan); }
@media (max-width: 900px) { .connect--v2 { grid-template-columns: 1fr; } .form--panel, .panel--live { padding: 26px 22px; } }

@media (prefers-reduced-motion: reduce) {
  .nav__link::after { transition: none; }
}

/* Founder photo strip: four shots with artists under the founder block, outlined, mono captions */
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 48px; }
.panel.shot { padding: 0; min-height: 0; gap: 0; overflow: hidden; display: block; margin: 0; }
.shot__img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink); }
.shot__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
.shot__cap { display: flex; gap: 10px; align-items: baseline; padding: 12px 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); border-top: 1px solid rgba(15,240,252,0.18); white-space: nowrap; overflow: hidden; }
.shot__cap > span:last-child { white-space: normal; line-height: 1.5; }   /* the real captions are long, so they wrap instead of being cut short (10 Nov 2026) */
.shot__who { color: var(--cyan); flex: 0 0 auto; }
@media (max-width: 860px) { .shots { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 36px; } .shot__cap { font-size: 10px; padding: 10px 12px; white-space: normal; flex-wrap: wrap; gap: 4px 8px; line-height: 1.5; } }

/* Footer (9 Nov 2026): logo and one line left, Site / Start here / Contact, legal links right of the copyright */
.footer__logo { display: inline-block; }
.footer__logo img { height: 22px; width: auto; margin-bottom: 18px; max-width: none; }
.footer__about .footer__tagline { font-weight: 400; margin-bottom: 0; }
.footer__list li { color: var(--gray); font-size: 15px; }
.footer__legal { display: flex; gap: 20px; }
@media (max-width: 760px) { .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; } }


/* Home /01: the four commitments in one row under the prose */
.panels--commit-row { grid-template-columns: repeat(4, 1fr); margin-top: 20px; }
.company--stack .prose { max-width: var(--measure); }
@media (max-width: 1000px) { .panels--commit-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .panels--commit-row { grid-template-columns: repeat(2, 1fr); } }

/* Releases lab (Nov 2026): the cover drum. A tall section whose stage sticks to the viewport while the
   WebGL drum (drum.js) runs its camera path; captions sit over the canvas and fade through in turn. */
.drum { position: relative; height: 560vh; background: var(--black); }
.drum__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.drum__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s ease; }
.drum--ready .drum__canvas { opacity: 1; }
.drum__caps { position: absolute; inset: 0; pointer-events: none; }
.drum__cap { position: absolute; left: var(--gutter); right: var(--gutter); opacity: 0; text-align: center; }
.drum__cap .h1, .drum__cap .h2 { text-shadow: 0 2px 40px rgba(0,0,0,0.7); }
.drum__cap .lead { margin: 18px auto 0; text-shadow: 0 2px 24px rgba(0,0,0,0.8); }
.drum__cap--top { top: clamp(110px, 16.1vh, 172px); }   /* 15 percent lower than before, closer to the wheel (Michael, 10 Nov 2026) */
.drum__cap--center { top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.drum__cap--low { bottom: clamp(72px, 12vh, 120px); text-align: left; }
.drum__cap--low .lead { margin-left: 0; }
.drum__cap .readouts { width: min(980px, 100%); margin-top: 32px; pointer-events: auto; }
.drum__cap .panel.readout { background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); }
.drum__hint { position: absolute; right: var(--gutter); bottom: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); opacity: 0.6; }
.drum__hint::after { content: ""; display: block; width: 1px; height: 28px; margin: 10px auto 0; background: linear-gradient(var(--cyan), transparent); }
@media (max-width: 760px) {
  .drum { height: 480vh; }
  .drum__cap--top { top: 96px; }
  .drum__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .drum { height: auto; }
  .drum__stage { position: relative; height: auto; overflow: visible; }
  .drum__canvas { position: relative; height: 64vh; }
  .drum__caps { position: relative; inset: auto; padding: 40px var(--gutter) 24px; display: grid; gap: 40px; }
  .drum__cap { position: static; opacity: 1; text-align: left; display: block; }
  .drum__cap .lead { margin-left: 0; }
  .drum__hint { display: none; }
}
}
.drum--flat .drum__stage { display: none; }
.drum--flat .drum__caps { position: relative; padding: 80px var(--gutter); display: grid; gap: 40px; }
.drum--flat .drum__cap { position: static; opacity: 1; text-align: left; }

/* Playbook (9 Nov 2026): the cover is a 3D book, after the Codrops 3D Book Showcase hover. Front cover, spine,
   page edges, top, bottom and back are six faces around a 22px block. It rests turned a little toward the
   spine and sways slowly; hover turns it further, like the demo's 35 degree turn. The panel fades in after the text beside it
   (data-reveal with data-reveal-delay); .book__clip carries the perspective. */
.pb__body { padding: 44px 32px 40px; }
.book__clip { perspective: 1400px; perspective-origin: 50% 40%; width: min(100%, 300px); }
.book { position: relative; width: 100%; aspect-ratio: 900 / 1164; transform-style: preserve-3d; transform: rotate3d(0,1,0,14deg); transition: transform 700ms var(--ease); --bt: 22px; }
.pb__object:hover .book { transform: rotate3d(0,1,0,34deg) rotate3d(1,0,0,-3deg); }
.book__body { position: absolute; inset: 0; transform-style: preserve-3d; animation: book-sway 9s ease-in-out infinite alternate; }
@keyframes book-sway { from { transform: rotate3d(0,1,0,-3deg) rotate3d(1,0,0,1deg); } to { transform: rotate3d(0,1,0,4deg) rotate3d(1,0,0,-1.5deg); } }
.book__face { position: absolute; backface-visibility: hidden; }
.book__front { inset: 0; transform: translate3d(0,0,calc(var(--bt) / 2)); border-radius: 0 3px 3px 0; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.08); }
.book__front::after { content: ""; position: absolute; top: 0; bottom: 0; left: 8px; width: 3px; background: rgba(0,0,0,0.22); box-shadow: 1px 0 3px rgba(255,255,255,0.08); }
.book__back { inset: 0; transform: rotate3d(0,1,0,180deg) translate3d(0,0,calc(var(--bt) / 2)); background: #0d0d0d; border-radius: 3px 0 0 3px; box-shadow: 0 0 0 1px rgba(255,255,255,0.06); }
.book__spine { top: 0; bottom: 0; left: calc(var(--bt) / -2); width: var(--bt); transform: rotate3d(0,1,0,-90deg); background: linear-gradient(90deg, #050505, #141414 50%, #050505); box-shadow: inset 0 0 0 1px rgba(15,240,252,0.18); display: flex; align-items: center; justify-content: center; }
.book__title { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); white-space: nowrap; transform: rotate(90deg); }
.book__pages { top: 3px; bottom: 3px; right: calc(var(--bt) / -2); width: var(--bt); transform: rotate3d(0,1,0,90deg); background: repeating-linear-gradient(90deg, #d9d9d9 0 1px, #f2f2f2 1px 3px); }
.book__top, .book__bottom { left: 2px; right: 1px; height: var(--bt); background: repeating-linear-gradient(0deg, #d9d9d9 0 1px, #f2f2f2 1px 3px); }
.book__top { top: calc(var(--bt) / -2); transform: rotate3d(1,0,0,90deg); }
.book__bottom { bottom: calc(var(--bt) / -2); transform: rotate3d(1,0,0,-90deg); }
@media (prefers-reduced-motion: reduce) { .book, .book__body { animation: none; transition: none; } .pb__object:hover .book { transform: rotate3d(0,1,0,14deg); } }
@media (max-width: 860px) { .book__clip { width: min(100%, 260px); } }

/* Services: the five services as a stack of sticky cards (after the Pririty services section, 10 Nov 2026).
   Every card sticks just under the header, each one 52px lower than the last, so as the page scrolls the next
   card slides up over the current one and only the previous cards' header lines stay in view, piled up. The
   cards are opaque black so the covered card disappears behind the new one. Plain scrolling, no script. */
.section--stack { padding-top: 24px; padding-bottom: 0; }
.section--after-stack { padding-top: clamp(40px, 5vw, 64px); }   /* How it works follows the stack closely */
/* A stuck card is released when its bottom margin edge reaches the end of the stack, so the five cards get bottom
   margins that line all their bottom edges up (each card sits one header row lower than the last, so each gets one
   row less margin; the last has none). Then the pile holds until the last card lands and all five leave together,
   instead of 04 and 05 letting go first and sliding over the rest (Michael, 10 Nov 2026). Five cards, so 4 minus i. */
.stack__card { margin-bottom: calc((4 - var(--i, 0)) * 52px); }
.stack { position: relative; }
.stack__card { position: sticky; top: calc(var(--header-h) + var(--i, 0) * 52px); background: var(--black); border-top: 1px solid rgba(15,240,252,0.35); min-height: max(56vh, 480px); }   /* the floor keeps every card the same height even where a description wraps to an extra line, so all five release together */
.stack__head { display: flex; align-items: center; gap: 18px; height: 52px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); }
.stack__n { color: var(--cyan); }
.stack__body { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding: 40px 0 72px; }
.stack__t { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.005em; white-space: nowrap; }   /* every title on one line (Michael, 10 Nov 2026) */
.stack__b { margin-top: 22px; color: var(--gray); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; max-width: 54ch; }
/* the service graphic (Michael's five images, black with a cyan figure, so they sit on the black card with no edge);
   motion.js [data-drift] settles it from a little large, soft and tilted as the card slides into place */
.stack__art { display: grid; place-items: center; }
.stack__art img { display: block; width: min(100%, 440px); height: auto; will-change: transform; animation: art-drift 11s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -2.6s); }
/* the continuous drift while a card is in view: a slow float, lean and breath, each card at a different point of the cycle (Michael: more, stronger and continuous, 10 Nov 2026) */
@keyframes art-drift {
  0% { transform: translate3d(0, 10px, 0) rotate(-3deg) scale(1); }
  50% { transform: translate3d(10px, -14px, 0) rotate(3deg) scale(1.08); }
  100% { transform: translate3d(-10px, 8px, 0) rotate(-1deg) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .stack__art img { animation: none; } }
@media (max-width: 760px) {
  .stack__card { top: calc(var(--header-h) + var(--i, 0) * 44px); min-height: max(64vh, 620px); margin-bottom: calc((4 - var(--i, 0)) * 44px); }
  .stack__head { height: 44px; gap: 14px; }
  .stack__body { grid-template-columns: 1fr; gap: 28px; padding: 20px 0 56px; }
  .stack__art { justify-items: start; }
  .stack__art img { width: min(100%, 200px); }
}

/* About /01 (10 Nov 2026 spec): eyebrow and headline across the full width (in the left column alone the headline ran four
   lines at 1440), then copy left and the four commitments right, 7/5 split with a 64px gutter from 1024px, no boxes.
   Spacing on the 8px scale: eyebrow to headline 16, headline to lead 32, lead to support 24. */
.about-co { display: grid; grid-template-columns: 1fr; gap: 32px 64px; align-items: start; }
.about-co__head { grid-column: 1 / -1; }
.about-co .eyebrow { margin-bottom: 16px; }
.about-co__h { margin: 0; }
.about-co__lead { color: var(--white); font-size: clamp(18px, 2vw, 22px); line-height: 1.5; max-width: 60ch; margin: 0; }   /* the 32px from the headline is the grid's row gap */
.about-co__support { color: var(--gray); max-width: 60ch; margin: 24px 0 0; }
.about-co__side .eyebrow { margin-bottom: 16px; }
.commits { display: grid; grid-template-columns: 1fr; gap: 24px; }
.commit { border-top: 1px solid #2A2A2A; padding: 24px 0 0; transition: border-top-color 200ms ease; }
.commit__n { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--cyan); margin-bottom: 12px; }
.commit__t { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; color: var(--white); margin: 0; white-space: nowrap; }
.commit__rest { color: var(--gray); }
@media (hover: hover) and (pointer: fine) { .commit:hover { border-top-color: var(--cyan); } }
@media (min-width: 1024px) {
  .about-co { grid-template-columns: 7fr 5fr; }
  .commits { grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .commit { padding: 24px 0 32px; }
}

/* Home /03 holds the Services card stack (Michael matched it to the Services page, 10 Nov 2026) */
.section--holds-stack { padding-bottom: 0; }

/* the line under the founder readouts: the numbers are career totals (Michael, 10 Nov 2026, after an outside review) */
.readouts__note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: #6b6b6b; margin: 10px 0 0; max-width: none; width: 100%; }
/* Home /04 How it works: three small steps, the full version lives on Services */
.panels--steps .panel { min-height: 0; padding: 24px; gap: 6px; }
.panels--steps .panel__t { font-size: 20px; margin-top: 4px; }
.panels--steps .panel__b { margin-top: 0; font-size: 15px; }

/* anchor links to the How it works section land under the sticky header, not beneath it */
#how { scroll-margin-top: 88px; }

/* Netlify's Powered by Netlify badge, an iframe its edge script adds to every page on the Free plan (10 Nov 2026).
   Netlify's docs say the project setting to turn it off is still rolling out to Free; the UI gates it behind the
   Personal plan for now, so it is hidden here. If the badge reappears, Netlify changed the element: check the id. */
#nl-badge-frame { display: none !important; }