/* ==== css/fonts.css ==== */
/* Self-hosted OFL fonts (D8). Variable Inter/Inter Tight 100-900 (verified fvar);
   static IBM Plex Mono 400/500. font-display:swap + Arial metric fallbacks
   (ref override technique; Inter numbers verbatim). */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("../fonts/Inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("../fonts/Inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Fallback"; src: local("Arial");
  ascent-override: 90.49%; descent-override: 22.56%;
  line-gap-override: 0%; size-adjust: 107.06%;
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("../fonts/InterTight-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("../fonts/InterTight-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/IBMPlexMono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/IBMPlexMono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/IBMPlexMono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/IBMPlexMono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==== css/tokens.css ==== */
/* Design tokens. Measured from the reference capture. Desktop-first max-width.
   Tier cuts are bracket-interpolated between measured widths (D11); all VALUES
   are census-measured. Never invent a value: measure it or log a decision. */
:root {
  /* grey ramp (Tailwind utilities, verbatim) */
  --grey-1: #090a0c; --grey-2: #0c0c0d; --grey-5: #0b0c0e; --grey-10: #18191b;
  --grey-20: #303236; --grey-30: #4a4b50; --grey-40: #61656b; --grey-50: #797d86;
  --grey-60: #95979e; --grey-70: #b0b2b7; --grey-80: #c9cbcf; --grey-85: #d7d8db;
  --grey-90: #e5e5e7; --grey-94: #efeff0; --grey-98: #fafafa;
  /* grounds (D10 alternation) */
  --canvas: var(--grey-1);
  --band-github: #111;
  --paper: #fff;
  --paper-2: #f4f5f6; /* pixel-sampled together band */
  --paper-3: var(--grey-98); /* metabrain band */
  --band-s3: #f6f6f6; /* productivity band (measured bg-[#f6f6f6]) */
  --blue-soft: #5683da; /* CSS-mapped .text-blue/.bg-blue, S7 toolbar + nav hover */
  --orange: #ff8964; /* S7 pin/swap (CSS-mapped .text-orange), 15-10 */
  --cta-light: #f6f6f6;
  --cta-dark: #0b0c0e;
  /* gradient headline (dark bands, R1) */
  --grad-head: linear-gradient(to right bottom, #fff 30%, #d5d8f6 80%, #fdf7fe);
  /* hero cursor mask */
  --hero-mask-x: 0; --hero-mask-y: 0; --hero-mask-size: 28px;
  /* type families (D8 equivalents, OFL, self-hosted) */
  --font-display: "Inter Tight", "Inter", Arial, sans-serif;
  --font-text: "Inter", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* type scale (census-measured per tier) */
  --h1: 84px; --h1-lh: 75.6px;
  --h2: 80px; --h2-lh: 64px; /* leading-h2 .8 (S3-sourced; sections override) */
  --h3: 32px; --h3-lh: 32px;
  --cta-btn: 12px; --cta-btn-lh: 18px; --cta-h: 40px; --cta-pad: 64px;
  /* motion (measured) */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms; --t-med: 200ms; --t-slow: 300ms;
  --t-marquee: 60s;
  /* radii (measured) */
  --r-sm: 4px; --r-card: 18px; --r-pill: 999px;
  /* container (measured .container: 1280 + px32, px20 ≤767) + page base */
  --wrap: 1280px;
  --pad: 32px;
  --page-base: #f7f7f7;
  /* shell ink (body text + skip link) */
  --ink: #f2f4f7;
}
@media (max-width: 1280px) { :root { --hero-mask-size: 28px; } }
@media (max-width: 1279px) { :root { --h1: 72px; --h1-lh: 64.8px; --h2: 88px; --h2-lh: 70.4px; } }
@media (max-width: 1023px) {
  :root { --h1: 56px; --h1-lh: 50.4px; --h2: 64px; --h2-lh: 51.2px; }
}
@media (max-width: 767px) {
  :root {
    --pad: 20px;
    --h1: 32px; --h1-lh: 28.8px;
    --h2: 36px; --h2-lh: 32.4px;
  }
}

/* ==== css/scrollcraft.css ==== */
/* ============================================================================
   scrollcraft.css: the taste floor
   ----------------------------------------------------------------------------
   Two layers, and the split matters:

     TOKENS   what you override per brand. Colour roles, the type ramp, the
              spacing scale, elevation, motion. A brand is ~12 values.
     DEVICES  what the engine drives. Do not restyle these to taste; they are
              the mechanism. Style your own markup instead.

   Nothing here draws a "component". There are no card, badge, or pill classes,
   because a stylesheet that ships those is how every page built on it ends up
   with the same shapes. You get a floor and a vocabulary; the composition is
   yours.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* --- colour roles. Override these six and the page is rebranded. -------- */
  --sc-canvas:      #08090b;   /* the page ground. Drift interpolates this.   */
  --sc-surface:     #101217;   /* anything raised off the ground             */
  --sc-ink:         #f4f2ef;   /* primary text                               */
  --sc-ink-soft:    #9a9ba1;   /* secondary text. Tinted, never flat gray.   */
  --sc-accent:      #d8ff3e;   /* ONE accent. It owns a region, not confetti. */
  --sc-accent-ink:  #08090b;   /* text that sits on the accent               */

  --sc-hairline:    color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);

  /* --- type. Two families max. Display carries voice, text carries prose. - */
  --sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  /* Fluid ramp. Tracking tightens as size grows because a face set at 6rem
     with 0 tracking reads loose; this is optical correction, not decoration. */
  --sc-t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --sc-t-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --sc-t-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --sc-t-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --sc-t-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --sc-t-3xl:  clamp(2.8rem, 1.9rem + 4.2vw, 5rem);
  --sc-t-4xl:  clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem);

  --sc-track-tight:  -0.035em;
  --sc-track-snug:   -0.02em;
  --sc-track-normal: -0.005em;
  --sc-track-wide:    0.08em;

  --sc-leading-none: 0.94;
  --sc-leading-tight: 1.06;
  --sc-leading-body: 1.62;

  --sc-measure: 62ch;

  /* --- space. 4px base: the useful middle steps an 8-only scale misses. --- */
  --sc-1: 0.25rem;  --sc-2: 0.5rem;   --sc-3: 0.75rem;  --sc-4: 1rem;
  --sc-5: 1.5rem;   --sc-6: 2rem;     --sc-7: 3rem;     --sc-8: 4rem;
  --sc-9: 6rem;     --sc-10: 8rem;    --sc-11: 12rem;

  /* Section rhythm is fluid so a phone doesn't inherit desktop air. */
  --sc-section: clamp(4.5rem, 9vw, 11rem);
  --sc-gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --sc-maxw:    82rem;

  /* --- radius. Pick one scale for the page and hold it. ------------------- */
  --sc-r-sm: 6px;  --sc-r-md: 12px;  --sc-r-lg: 20px;  --sc-r-pill: 999px;

  /* --- elevation. Every shadow has an offset AND a soft blur, and is tinted
         to the canvas hue. A zero-offset coloured halo is decoration, not
         depth, so there isn't one here. ---------------------------------- */
  --sc-shadow-color: 220 40% 2%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22),
           0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30);

  /* Edge light: a 1px top highlight sells a raised surface better than any
     amount of blur, because real raised things catch light on their lip. */
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);

  /* --- motion. Built-in CSS easings are too weak for UI. ------------------ */
  --sc-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sc-d-fast: 160ms;  --sc-d-base: 240ms;  --sc-d-slow: 420ms;

  --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ------------------------------------------------- the browser surfaces --
   The parts you did not draw still carry the design. Selection, caret, focus
   ring, scrollbar and tabular numerals all ship with defaults that belong to no
   design system. Theming them is the cheapest signal that a page was built
   rather than assembled, and it is the step that gets skipped most reliably. */
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:root { caret-color: var(--sc-accent); accent-color: var(--sc-accent); }
:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: var(--sc-r-sm);
}
:where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; }
}
:where(table, .sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- typography -- */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 500;
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin: 0;
}
.sc-display--xl { font-size: var(--sc-t-4xl); }
.sc-display--lg { font-size: var(--sc-t-3xl); }
.sc-display--md { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); }
.sc-lede {
  font-size: var(--sc-t-lg);
  line-height: 1.44;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0;
}
.sc-body { max-width: var(--sc-measure); color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; }
.sc-label {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* ---------------------------------------------------------------- layout -- */
.sc-wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sc-section { padding-block: var(--sc-section); }
/* More space above a heading than below it: the gap belongs to the boundary,
   not to the pair. */
.sc-stack > * + * { margin-top: var(--sc-4); }
.sc-stack > :is(h1,h2,h3) { margin-top: var(--sc-7); }
.sc-stack > :is(h1,h2,h3):first-child { margin-top: 0; }
.sc-rule { height: 1px; border: 0; background: var(--sc-hairline); margin: 0; }

/* =============================================================== DEVICES ==
   Driven by the engine. Restyle your own markup, not these.                */

.sc-act--pinned { position: relative; }
.sc-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  z-index: var(--sc-z-stage);
}

/* scrub / sequence media */
.sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip video[data-sc-scrub] { opacity: 1; }
/* The poster is a live frame-holder, not a placeholder: it stays up until a
   real video frame has painted, which is what stops the blank-stage flash. */
.sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip .sc-stage__poster { opacity: 0; }

/* A scrim only where text sits. A full-frame darkening layer flattens the
   image everywhere to fix contrast in one corner. */
.sc-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(
    var(--sc-scrim-angle, 180deg),
    color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 68%);
}
/* Point the scrim at the copy. A scrim gradient that darkens the top while the
   copy sits at the bottom fixes contrast nowhere and flattens the image
   everywhere, which is the most common way text-over-video goes wrong. */
.sc-scrim--bottom { --sc-scrim-angle: 0deg; }
.sc-scrim--left   { --sc-scrim-angle: 90deg; }
.sc-scrim--right  { --sc-scrim-angle: 270deg; }

/* Corner scrims, for copy anchored to a corner. An edge gradient has to darken
   a whole band across the frame to cover one corner; a corner gradient puts the
   density where the text is and leaves the rest of the image alone. Pair with
   .sc-copy--lead / .sc-copy--trail. */
.sc-scrim--lead {
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
.sc-scrim--trail {
  background: linear-gradient(to top left,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
/* A band across the bottom, for copy that spans the full width of the frame.
   That is what both corner anchors become below 860px, and it is also the right
   shape whenever the copy block is wider than a corner. */
.sc-scrim--band {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 58%);
}
.sc-scrim--vignette {
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%,
              color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%);
}

/* copy over a stage.
   max-width is in rem, never ch. A `ch` on this container resolves against the
   CONTAINER's font-size (body size), not the display size of the heading inside
   it, so `max-width: 20ch` here silently produces a ~180px column and wraps a
   hero headline to six lines. Set a ch measure on the text element itself. */
.sc-copy {
  position: absolute; z-index: var(--sc-z-copy);
  inset-inline: var(--sc-gutter);
  max-width: min(46rem, 76vw);
  will-change: opacity, transform;
}
.sc-copy--lead   { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); }
/* inset-inline FIRST. It is the shorthand for left+right, so declaring it after
   `left: 50%` resets left to auto and the block drifts off the left edge. */
.sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; }
.sc-copy--trail  { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; }

/* cue defaults: the engine writes opacity/transform inline, these are the
   pre-paint state so nothing flashes before the first read() */
[data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.sc-ready [data-sc-cue] { transition: none; }

/* kinetic split */
.sc-split { display: inline-block; overflow: hidden; vertical-align: top; }
/* Descenders live below the baseline; a line mask clipped to the line box eats
   the tails off g, y, p, j. The padding buys them room back. */
.sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sc-split__i { display: inline-block; will-change: transform, opacity; }
.sc-is-split { opacity: 1 !important; }

/* horizontal rail */
[data-sc-pan] { display: flex; will-change: transform; }

/* reveal + parallax */
[data-sc-reveal] { will-change: clip-path; }
[data-sc-parallax] { will-change: transform; }

/* flow reveal (fires once) */
[data-sc-in], [data-sc-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
[data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }

/* pointer devices */
[data-sc-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-sc-magnet] { will-change: transform; }
/* isolation always; position only if nothing more specific already set it.
   Written with :where() (zero specificity) on purpose: a plain `position:
   relative` here has the same weight as `.sc-stage` and, being later in the
   file, silently wins. A stage carrying both attributes then stops being
   sticky and the whole act scrolls away instead of pinning. */
[data-sc-spotlight] { isolation: isolate; }
:where([data-sc-spotlight]) { position: relative; }
[data-sc-spotlight]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(
    28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
[data-sc-spotlight]:hover::after { opacity: 1; }

/* =========================================================== WORLDFLIGHT ==
   One fixed stage for the whole page. The only thing in document flow is the
   spacer, and it is empty. If you find yourself adding a section here, you want
   act mode instead: the moment a real block scrolls past the fixed stage, the
   page has a seam again and the whole point is gone.                        */

[data-sc-mode="worldflight"] { position: relative; }

.sc-world {
  position: fixed; inset: 0;
  overflow: clip;
  z-index: var(--sc-z-stage);
  background: var(--sc-canvas);
}

/* Every leg is mounted for the life of the page and stacked in the same box.
   The engine owns opacity, visibility and z-index here; do not set them. */
.sc-world__seg {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: opacity;
}
.sc-world__seg > :is(video, img, canvas) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The poster is the frame-holder AND the first camera move: the engine pushes
   it in slowly until a real decoded frame is available to replace it. */
.sc-world__poster {
  z-index: 0;
  transform-origin: 50% 50%;
  transition: opacity 420ms var(--sc-ease-out);
}
.sc-world__seg > video { z-index: 1; }
.sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; }
/* The act stylesheet lights a clip through its ancestor act. A worldflight leg
   has no act, so match the class the engine also writes on the clip itself. */
video[data-sc-scrub].sc-has-clip { opacity: 1; }

/* The copy layer is fixed too, and inert by default: the engine hands
   pointer-events back to a block only while it is actually legible. */
.sc-world__copy {
  position: fixed; inset: 0;
  z-index: var(--sc-z-copy);
  pointer-events: none;
}
.sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
[data-sc-copy] {
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.sc-ready [data-sc-copy] { transition: none; }

/* The track. Empty on purpose. */
.sc-world__spacer { pointer-events: none; }

/* scroll progress */
[data-sc-progress] {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome);
  background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0);
  will-change: transform;
}

/* ----------------------------------------------------------- atmosphere --
   Depth is not only shadow. Grain keeps a flat dark ground from banding, and
   it is the difference between "a dark page" and "a lit room". */
.sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; }
.sc-grain::before {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not zero. Opacity still carries the reveal so the page
     is comprehensible; every position change is dropped. */
  [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
  [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; }
  /* A wipe is a position change too. Show reveal content settled. */
  [data-sc-reveal] { clip-path: none !important; }
  /* A rail's transform IS its navigation, not decoration. Zeroing it the way
     parallax and kinetic type are zeroed parks the act on its first screenful
     and makes everything past the fold unreachable: a device degrading into
     missing content. Hand the travel back to the reader as an ordinary scroll
     region instead, so the same items are all still gettable without motion.
     A build that would rather re-lay the rail out as a grid can still do that;
     this is the floor, not the ceiling. */
  [data-sc-act="pan"] .sc-stage,
  [data-sc-act="pan"] [data-sc-stage] {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  [data-sc-pan] > * { scroll-snap-align: center; }
  [data-sc-spotlight]::after { display: none; }
  /* A worldflight keeps its whole story here. No clip is ever fetched, so the
     posters are the film, and they cross-dissolve through exactly the same
     seams at exactly the same scroll positions. The push-in and the copy drift
     are the only things that go. */
  .sc-world__poster, [data-sc-copy] { transform: none !important; }
}

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .sc-copy { inset-inline: var(--sc-gutter); max-width: none; }
  .sc-copy--trail { text-align: left; }
  .sc-stage { height: 100svh; }
  /* .sc-copy--trail re-anchors to the left and spans the full width here, so a
     bottom-RIGHT corner gradient darkens the one corner the copy just left and
     guarantees a contrast failure over any bright clip. Point the density at
     the copy: the same band .sc-scrim--band paints. */
  .sc-scrim--trail {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
      transparent 58%);
  }
}

/* ==== css/primitives.css ==== */
/* Primitives. Built from measured reference evidence. Class-based, token-driven.
   Sections compose these; nothing here knows page content. */

/* Section + container: full-bleed bands, px gutters (104/32/20 measured) */
body { font-family: var(--font-text); } /* Inter everywhere (overrides scrollcraft Geist) */
.section { position: relative; overflow: clip; }
.wrap { padding-inline: var(--pad); max-width: var(--wrap); margin-inline: auto; }
@media (max-width: 1279px) { .wrap { max-width: 960px; } }
@media (max-width: 1023px) { .wrap { max-width: 768px; } }
@media (max-width: 767px) { .wrap { max-width: none; } }
@media (max-width: 639px) { .wrap { max-width: 448px; } }
.band-dark { background: var(--canvas); color: #fff; }
.band-github { background: var(--band-github); color: #fff; }
.band-light { background: var(--paper); color: var(--grey-5); }
.band-tint { background: var(--paper-2); color: var(--grey-5); }
.band-paper3 { background: var(--paper-3); color: var(--grey-5); }
/* Visually hidden (a11y names; G4 brand fix) */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Gradient headline (R1, dark bands) + flat (light bands) */
.grad-text {
  background: var(--grad-head);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.display {
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: -0.03em; text-wrap: balance;
}
.h1 { font-size: var(--h1); line-height: var(--h1-lh); }
.h2 { font-size: var(--h2); line-height: var(--h2-lh); }
.h3 { font-size: var(--h3); line-height: var(--h3-lh); }
.lede { font-size: 18px; line-height: 1.5; font-weight: 300; }
.prose { font-size: var(--body); line-height: var(--body-lh); font-weight: 300; }

/* Eyebrow + pill/badge */
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--grey-60);
}
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--grey-20); border-radius: var(--r-pill);
  padding: 0.45rem 1rem; font-size: 14px; font-weight: 500;
}
.pill--dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* Buttons: light glow pill / dark pill / ghost (measured) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  height: var(--cta-h); padding: 0 var(--cta-pad);
  border-radius: var(--r-pill); font-weight: 700;
  font-size: var(--cta-btn); line-height: var(--cta-btn-lh);
  text-decoration: none; border: 0; cursor: pointer;
  transition: color var(--t-med) var(--ease), background-color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease), opacity var(--t-slow) var(--ease);
}
.btn--light { position: relative; background: var(--cta-light); color: #0b0d10; }
.btn--light::after { /* D58: whisper glow tucked at the edge (user: no loud bloom) */
  content: ""; position: absolute; top: 50%; right: -14px;
  width: 56px; height: 56px; transform: translateY(-50%);
  background: radial-gradient(50% 50%, rgba(255,255,245,.9) 3.5%, rgba(255,170,129,.55) 26.5%, rgba(255,218,159,.4) 37.5%, rgba(255,170,129,.22) 49%, rgba(210,106,58,0) 92.5%);
  pointer-events: none;
}
.btn--dark { background: var(--cta-dark); color: #fff; border: 1px solid var(--grey-20); }
.btn--ghost { background: transparent; color: inherit; border: 1px solid var(--grey-20); }
/* D18: no hover lift/delta on pills (measured none) */
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.btn--sm { font-size: 14px; line-height: 21px; padding: 0.55rem 1.2rem; }

/* Cards: dark glow card (R8) + chromeless grid cell (S5) */
.card {
  position: relative; border-radius: 12px;
  background: var(--grey-2); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: clip;
}
/* D24: cards have no hover delta (measured identical) */
.card::before { /* 1px top-light */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  pointer-events: none;
}
.card__glow { position: absolute; inset: 0; pointer-events: none; }
.card__body { position: relative; padding: 1.75rem; }
.card__title { font-size: 18px; font-weight: 600; margin: 0 0 0.5rem; }
.card__copy { font-size: var(--body); font-weight: 300; color: var(--grey-70); margin: 0; }
.cell { color: inherit; }
.cell__icon {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--blue), #7aa5ff);
}
.cell__title { font-size: 28px; line-height: 1; font-weight: 600; margin: 0 0 0.75rem; }
.cell__copy { font-size: var(--body); font-weight: 300; color: var(--grey-60); margin: 0; }
.band-dark .cell__copy, .band-github .cell__copy { color: var(--grey-60); }

/* Glow layer / grid backdrop / noise overlay / dot grain */
.glow-layer { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.glow-orb { position: absolute; border-radius: 50%; filter: blur(60px); }
.dotgrain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.2px);
  background-size: 7px 7px;
}
.band-light .dotgrain, .band-tint .dotgrain, .band-paper3 .dotgrain {
  background-image: radial-gradient(rgba(9, 10, 12, 0.1) 1px, transparent 1.2px);
}
.noise {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scrim-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 340px;
  background: linear-gradient(rgba(9, 10, 12, 0), var(--grey-1) 50%);
  pointer-events: none;
}

/* Marquee: CSS loop ≤639px (ref xs:); static row above (D17, measured) */
.marquee { overflow: clip; }
.marquee__track {
  display: flex; gap: 0; width: max-content; will-change: transform;
}
.marquee__group { display: flex; align-items: center; flex-shrink: 0; }
@media (max-width: 639px) {
  .marquee__track { animation: infinityScroll var(--t-marquee) linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes infinityScroll {
  0% { transform: translateX(0); }
  to { transform: translateX(-50%); } /* 2 identical groups incl. trailing dots: seamless (R1.1) */
}

/* Masked image + avatar stack */
.masked-img {
  overflow: clip; border-radius: var(--r-card);
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
}
.masked-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatars { display: flex; }
.avatars img {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--canvas); margin-left: -10px;
}
.avatars img:first-child { margin-left: 0; }

/* Nav + footer primitives (D14: absolute, transparent, scrolls away, measured) */
.navx { position: absolute; top: 0; left: 0; right: 0; z-index: 40; }
.navx__in {
  display: flex; align-items: center;
  height: 64px; padding-inline: var(--pad);
  max-width: var(--wrap); margin-inline: auto;
}
.navx__brand { display: inline-flex; align-items: center; height: 25px; text-decoration: none; margin-left: -12px; } /* D78: wordmark docks nearer the left edge */
/* D68: wordmark replaces the AK badge; links go muted with an underline grow on hover */
.navx__word { font-family: var(--font-display); font-weight: 600; font-size: 17px;
  letter-spacing: -0.01em; color: #fff; white-space: nowrap; }
.navx { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.navx__links { display: flex; align-items: center; margin-left: 77px; }
.navx__links > a, .navx__links > .navx__drop > button {
  position: relative; color: var(--grey-70); text-decoration: none; font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em; padding: 12px 10px; background: none; border: 0; cursor: pointer; font-family: inherit;
  transition: color var(--t-med) var(--ease);
  min-height: 44px; display: inline-flex; align-items: center;
}
.navx__links > a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 7px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.navx__links > a:hover, .navx__links > .navx__drop > button:hover { color: #fff; }
.navx__links > a:hover::after { transform: scaleX(1); }
.navx__links > a[aria-current="page"] { color: #fff; }
.navx__links > a[aria-current="page"]::after { transform: scaleX(1); }
@media (min-width: 768px) { .navx__in { padding-right: 20px; } } /* D68: CTA cluster docks closer to the right edge */
@media (min-width: 1280px) { .navx__links { margin-left: 250px; } } /* D78: links centered on the bar (measured 678 vs mid 715, +40 corrected) */
.navx__drop { position: relative; }
.navx__drop > button .chev {
  display: inline-block; margin-left: 6px; font-size: 10px;
  transition: transform var(--t-med) var(--ease);
}
.navx__drop[data-open="true"] > button .chev { transform: rotate(180deg); }
.navx__panel {
  position: absolute; top: calc(100% + 2px); left: 0; width: 278px;
  background: var(--grey-10); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px; padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.navx__drop[data-open="true"] .navx__panel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.navx__panel a {
  display: block; padding: 8px; border-radius: 8px;
  text-decoration: none; color: #fff;
}
.navx__panel a:hover { background: rgba(255, 255, 255, 0.06); }
.navx__panel strong { display: block; font-size: 16px; font-weight: 500; }
.navx__panel span { display: block; font-size: 13px; color: var(--grey-60); }
.navx__cta { margin-left: auto; display: flex; gap: 0.75rem; align-items: center; }
.navx__pill {
  display: inline-flex; align-items: center; height: 32px; padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--r-pill);
  color: #fff; text-decoration: none; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
}
.navx__burger {
  display: none; margin-left: auto; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; color: #fff;
}
.navx__burger svg { display: block; width: 24px; height: 24px; }
.navx__menu { display: none; }
@media (max-width: 767px) {
  .navx__links, .navx__cta { display: none; }
  .navx__burger { display: block; }
  .navx[data-menu="open"] .navx__menu {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 60; background: var(--grey-1);
    padding: 20px 20px 32px;
  }
  .navx__menu-top { display: flex; align-items: center; height: 25px; margin-bottom: 24px; }
  .navx__menu-close {
    margin-left: auto; background: none; border: 0; color: #fff; cursor: pointer;
    width: 44px; height: 44px; font-size: 22px; line-height: 1;
  }
  .navx__menu a.navx__mitem {
    display: flex; align-items: center; color: #fff; text-decoration: none;
    font-size: 17px; padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 48px;
  }
  .navx__menu a.navx__mitem .chev { margin-left: auto; font-size: 12px; color: var(--grey-60); }
  .navx__menu-cta { margin-top: auto; display: grid; gap: 12px; padding-top: 24px; }
  .navx__menu-cta .navx__pill {
    justify-content: center; height: 48px; font-size: 14px;
  }
}
.footerx {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: 17px; font-size: 13px; color: var(--grey-50);
}
.footerx__in {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding-inline: var(--pad); max-width: var(--wrap); margin-inline: auto;
}
.footerx a { color: var(--grey-60); text-decoration: none; }
.footerx a:hover { color: #fff; }

/* Scrollcraft hook defaults: reveal presets ride the engine (no custom CSS needed
   beyond keeping pre-reveal content accessible when JS is off) */
.no-js [data-sc-in], .no-js [data-sc-cue] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .btn { transition: none; }
}

/* ==== css/hero.css ==== */
/* Hero. Measured from ref S1. Desktop-first. Static text (D19);
   motion = mask spotlight (SCX-003) + marquee ≤639px. */
.hero {
  position: relative; overflow: clip;
  background: var(--grey-1); color: #fff;
  height: 1438px;
}
.hero__beam {
  position: absolute; left: -344px; bottom: 0; z-index: 0;
  width: 1920px; height: 1438px; max-width: none;
  pointer-events: none;
}
.hero__masklayer {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: overlay;
  clip-path: circle(var(--hero-mask-size) at var(--hero-mask-x) var(--hero-mask-y));
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 70%);
}
.hero__in { position: relative; z-index: 10; padding-top: 184px; max-width: none; /* D22: hero stays full+pad */ }
.hero__title { max-width: 616px; margin: 0; }
.hero__sub {
  max-width: 448px; margin: 20px 0 0;
  font-size: 18px; line-height: 1.5; font-weight: 400; color: var(--grey-70);
}
.hero__cta { margin-top: 44px; }
.hero__panel {
  position: absolute; z-index: 10;
  left: calc(50% - 640px + 32px); bottom: 141px;
  width: 1024px; border-radius: 10px 10px 0 0; overflow: clip;
}
.hero__panel img { display: block; width: 100%; height: auto; }
.hero__strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  padding-bottom: 88px;
}
.hero__strip-label {
  font-size: 14px; line-height: 14px; color: var(--grey-60); margin: 0 0 14px;
}
.hero__strip .marquee__group span {
  font-size: 15px; line-height: 16px; font-weight: 600; color: #fff; white-space: nowrap;
}
.hero__strip .marquee__group span + span::before {
  content: "·"; margin: 0 9px; color: var(--grey-50); font-weight: 400;
}
/* R1.1: trailing separator closes the group seam (desktop static + loop) */
.hero__strip .marquee__group::after {
  content: "·"; margin: 0 9px; color: var(--grey-50); font-weight: 400;
  font-size: 15px; line-height: 16px;
}
@media (max-width: 1279px) { .hero { height: 1078px; } .hero__in { padding-top: 112px; } .hero__title { max-width: 528px; } }
@media (max-width: 1023px) {
  .hero { height: 873px; }
  .hero__in { padding-top: 96px; }
  .hero__title { max-width: 441px; }
}
@media (max-width: 767px) {
  .hero { height: 743px; }
  .hero__in { padding-top: 92px; }
  .hero__title { max-width: 260px; }
  .hero__sub { font-size: 15px; margin-top: 12px; }
  .hero__cta { margin-top: 19px; }
  .hero__panel { left: 20px; right: -21px; width: auto; bottom: 73px; }
  .hero__strip { padding-bottom: 35px; }
  .hero__strip .wrap { padding-inline: 0; }
  .hero__strip-label { font-size: 12px; line-height: 12px; text-align: center; margin-bottom: 12px; }
  .hero__strip .marquee__group span { font-size: 14px; line-height: 14px; }
  .hero__strip .marquee__group span + span::before { margin: 0 6px; }
  .hero__strip .marquee__group::after { margin: 0 6px; font-size: 14px; line-height: 14px; }
}
@media (max-width: 639px) { .hero { height: 708px; } }
@media (max-width: 413px) { .hero { height: 641px; } }
/* neutral replica stand-ins (calibrate only) */
.cal-beam { background: linear-gradient(100deg, #101216 40%, #1c1e24 62%, #2a2c36 74%, #14161b 88%); }
.cal-panel { background: var(--grey-20); aspect-ratio: 1024 / 569; }

/* ---- personal hero (D21): portrait + rebuilt beam, same strip/type/mask ---- */
.hero--mine { height: 960px; } /* D79: text + portrait pair on top, quote band below */
.hero--mine::before { /* R1.10: ambient wash fills the bottom-left void */
  content: ""; position: absolute; left: -200px; bottom: -120px; z-index: 0;
  width: 760px; height: 620px; pointer-events: none;
  background:
    radial-gradient(340px 300px at 45% 55%, rgba(139, 92, 246, 0.20), transparent 70%),
    radial-gradient(420px 340px at 60% 65%, rgba(61, 126, 255, 0.14), transparent 70%);
}
.hero--mine .hero__beam {
  left: auto; right: -240px; width: 1100px; height: 1100px;
  background:
    radial-gradient(560px 480px at 62% 32%, rgba(61, 126, 255, 0.32), transparent 70%),
    radial-gradient(480px 560px at 78% 62%, rgba(139, 92, 246, 0.26), transparent 70%),
    linear-gradient(90deg, transparent 52%, rgba(255, 255, 255, 0.05) 72%, rgba(255, 255, 255, 0.13) 79%, rgba(213, 216, 246, 0.05) 86%, transparent 94%);
}
.hero__portrait {
  position: absolute; z-index: 5; margin: 0;
  top: 104px; right: calc(50vw - 640px + 32px);
  width: 420px; aspect-ratio: 3 / 4; /* D79: 420 clears the quote band below */
  border-radius: var(--r-card); overflow: clip;
  border: 1px solid rgba(255, 255, 255, 0.06); /* D60: hairline nearly gone, masks do the blend */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(0deg, transparent 0, #000 16%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(0deg, transparent 0, #000 16%);
}
.hero__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__portrait::after { /* top-light */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}
@media (max-width: 1279px) {
  .hero--mine { height: 940px; }
  .hero--mine .hero__title { max-width: 528px; }
  .hero--mine .hero__portrait { width: 400px; top: 96px; }
}
@media (max-width: 1023px) {
  .hero--mine { height: 920px; }
  .hero--mine .hero__title { max-width: 441px; }
  .hero--mine .hero__portrait { width: 320px; top: 96px; right: 32px; }
}
@media (max-width: 767px) {
  .hero--mine { height: auto; min-height: 0; padding: 92px 20px 40px; display: flex; flex-direction: column; }
  .hero--mine .hero__in { display: contents; } /* D79: children join hero flex so the portrait slots between CTAs and quotes */
  .hero--mine .hero__in > * { position: relative; z-index: 10; }
  .hero--mine .hero__eyebrow { align-self: flex-start; }
  .hero--mine .hero__portrait {
    position: relative; top: auto; right: auto; order: 4;
    width: 100%; margin: 24px 0 0;
  }
  .hero--mine .hero__strip { position: relative; margin-top: 24px; }
  .hero--mine::after { display: none; }
}

/* ---- D60: hero kick. Eyebrow, text nudge off the left edge, portrait halo ---- */
.hero--mine .hero__in { padding-top: 192px; } /* D79: text centers on the portrait (eyebrow removed); left offset lives on the text elements so the quote band spans full width */
.hero--mine .hero__eyebrow { margin-top: 0; margin-bottom: 18px; } /* D93: name eyebrow restored for identity + name search */
.hero--mine .hero__eyebrow, .hero--mine .hero__title, .hero--mine .hero__cta { margin-left: 104px; }
/* D79: 76px three-line lockup; the long line is split into spans in markup */
.hero--mine .hero__title { font-size: 76px; line-height: 76px; max-width: 640px; letter-spacing: -0.045em; }
.hero__rl { display: block; }
.hero__blue { background: none; color: #6aa6ff; -webkit-text-fill-color: #6aa6ff; } /* D80: solid blue word inside the gradient H1 */
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 24px; padding: 9px 16px 9px 13px;
  font-size: 12px; line-height: 1; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-70);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(8px);
}
.hero__pulse {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #34d399; box-shadow: 0 0 12px 2px rgba(52, 211, 153, 0.55);
}
.hero--mine .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero--mine::after { /* whisper halo behind the portrait, tucks its edges into the bg */
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  top: 14px; right: calc(50vw - 640px + 32px - 90px);
  width: 620px; height: 760px;
  background:
    radial-gradient(300px 340px at 50% 42%, rgba(139, 92, 246, 0.22), transparent 70%),
    radial-gradient(360px 400px at 58% 58%, rgba(61, 126, 255, 0.16), transparent 70%);
  filter: blur(20px);
}
@media (max-width: 1279px) {
  .hero--mine .hero__in { padding-top: 188px; }
  .hero__quotes { margin-top: 150px; margin-left: 68px; }
  .hero--mine .hero__eyebrow, .hero--mine .hero__title, .hero--mine .hero__cta { margin-left: 68px; }
  .hero--mine .hero__title { font-size: 64px; line-height: 64px; }
  .hero--mine::after { top: 6px; }
}
@media (max-width: 1023px) {
  .hero--mine .hero__in { padding-top: 154px; }
  .hero__quotes { margin-left: 56px; }
  .hero--mine .hero__eyebrow, .hero--mine .hero__title, .hero--mine .hero__cta { margin-left: 56px; }
  .hero--mine .hero__title { font-size: 52px; line-height: 52px; }
  .hero--mine::after { right: -58px; top: 6px; width: 500px; height: 620px; }
}
@media (max-width: 767px) {
  .hero--mine .hero__eyebrow, .hero--mine .hero__title, .hero--mine .hero__cta { margin-left: 0; }
  .hero--mine .hero__title { font-size: 40px; line-height: 40px; max-width: none; }
}

/* ---- D79: quote band. Two glass stakeholder cards cap the hero ---- */
.hero__quotes {
  list-style: none; padding: 0; /* D79: left edge rides the H1 line, right edge rides the portrait line */
  margin: 142px max(0px, calc(50vw - 640px)) 0 104px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  position: relative; z-index: 10;
}
.hquote {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  border-radius: 18px; padding: 22px 24px 20px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.hquote::before { /* oversized ghost quote mark, top-left clear of the text */
  content: "\201C"; position: absolute; top: 8px; left: 20px; right: auto;
  font-family: Georgia, "Times New Roman", serif; font-size: 56px; line-height: 1;
  color: rgba(255, 255, 255, 0.1); pointer-events: none;
}
.hquote::after { /* top-light hairline */
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}
.hquote:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); }
.hquote__text {
  margin: 0; max-width: 44ch; padding-top: 30px;
  font-size: 16.5px; line-height: 1.55; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.92);
}
.hquote__by { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--grey-60); }
.hquote__by strong { color: #fff; font-weight: 600; }
.hquote__by a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ---- D79: ambient orbs. Slow transform-only drift behind everything ---- */
.hero__orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.hero__orb--a {
  width: 480px; height: 480px; left: -160px; top: 120px;
  background: radial-gradient(circle, rgba(61, 126, 255, 0.16), transparent 70%);
  animation: hero-drift 16s ease-in-out infinite alternate;
}
.hero__orb--b {
  width: 420px; height: 420px; right: -120px; bottom: -80px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.14), transparent 70%);
  animation: hero-drift 20s ease-in-out infinite alternate-reverse;
}
@keyframes hero-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(40px, -30px, 0) scale(1.08); }
}

/* ---- D79: load choreography. Rise + stagger, transform/opacity only ---- */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.hero--mine .hero__eyebrow { animation: hero-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero__rl { animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero__rl:nth-child(2) { animation-delay: 0.1s; }
.hero__rl:nth-child(3) { animation-delay: 0.2s; }
.hero--mine .hero__cta { animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
.hero__quotes { animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.42s both; }
.hero--mine .hero__portrait { animation: hero-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
@media (prefers-reduced-motion: reduce) {
  .hero__rl, .hero--mine .hero__eyebrow, .hero--mine .hero__cta,
  .hero__quotes, .hero--mine .hero__portrait, .hero__orb { animation: none !important; }
}
@media (max-width: 767px) {
  .hero__quotes { grid-template-columns: 1fr; margin: 32px 0 0; order: 5; }
  .hquote__text { font-size: 15.5px; }
}

/* ==== css/pillars.css ==== */
/* Pillars (S3). Full spec from live-DOM probes (probe-wrap/batch1/batch2):
   UL flex-wrap + explicit LI widths (order-1..4 checkerboard), NOT grid.
   Tiers: lg=1279 md=1023 sm=767 xs=639 (CSS-measured variant map).
   section pt 160/128/96/64 · pb 0 · band #f6f6f6. Static (D23); no hover (D24). */
.pillars { background: var(--band-s3); color: var(--grey-5); padding-top: 160px; }
.pillars__title {
  margin: 0; color: #000; text-wrap: wrap;
  font-family: var(--font-display); font-weight: 600;
  font-size: 80px; line-height: 64px; letter-spacing: -0.05em; /* leading-h2 .8, tracking-tighter */
}
.pillars__sub {
  margin: 24px 0 0; max-width: 100%; font-weight: 400;
  font-size: 18px; line-height: 27px; letter-spacing: -0.02em; color: var(--grey-20);
}
.pillars__grid {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
/* D73: six perfect squares. Bento spans retired; aspect-ratio keeps every
   tier square, badge reverts to the shared size. */
.pillar {
  position: relative; display: grid; aspect-ratio: 1 / 1;
  overflow: hidden; border-radius: 12px; background: var(--grey-2);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4); /* ring-[6px] ring-white/40 */
}
/* D71: uniform 3x2. The staggered checkerboard fought the photos; identical
   cells let the six visuals read as one geometric set. */
.pillar__visual { grid-area: 1 / 1; position: relative; overflow: hidden; }
.pillar__visual canvas[data-ambient] {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.pillar__capwrap {
  grid-area: 1 / 1; align-self: end; z-index: 2; position: relative;
  display: flex; align-items: flex-end; padding: 0 24px 24px;
}
.pillar__cap {
  position: relative; z-index: 1; margin: 0;
  font-size: 16px; line-height: 22px; font-weight: 300; letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.65);
}
.pillar__cap .pillar__lead { font-weight: 500; color: #fff; } /* SPAN.font-medium */
.pillar__cap a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.pillar__cap--sm { font-size: 14.5px; line-height: 20px; } /* D75: reveals more photo, one step under 16px */
.pillar__cap--w4 { max-width: 272px; line-height: 20px; } /* D77: wraps box1 to 4 lines; 4x20px matches boxes 2-3 tops */
/* D71: caption max-widths retired with the checkerboard; uniform cells share one measure */
@media (max-width: 1279px) {
  .pillars { padding-top: 128px; }
  .pillars__title { font-size: 88px; line-height: 70.4px; }
  .pillars__sub { margin-top: 20px; }
  .pillars__grid { margin-top: 36px; gap: 16px; }
  .pillar__capwrap { padding: 0 20px 20px; }
}
@media (max-width: 1023px) {
  .pillars { padding-top: 96px; }
  .pillars__title { font-size: 64px; line-height: 51.2px; }
  .pillars__grid { margin-top: 24px; }
  .pillar__capwrap { padding: 0 16px 16px; }
  .pillar__capwrap::after { /* md:after scrim, blur-md(12px) */
    content: ""; position: absolute; left: 0; bottom: 0; z-index: 0;
    width: 100%; height: 180%;
    background: linear-gradient(180deg, rgba(9, 10, 12, 0) 0%, #090a0c 40.76%);
    filter: blur(12px); pointer-events: none;
  }
  .pillar__cap { line-height: 19.2px; } /* md:leading-[1.2] */
}
@media (max-width: 767px) {
  .pillars { padding-top: 64px; }
  .pillars__title { font-size: 36px; line-height: 28.8px; }
  .pillars__sub { font-size: 15px; line-height: 18.75px; margin-top: 12px; max-width: 512px; }
  .pillars__grid { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .pillars__grid > .pillar:nth-child(n) { width: auto; grid-column: span 1; }
  .pillar__capwrap { padding: 0 20px 20px; }
  .pillar__cap { font-size: 15px; line-height: 18px; }
  .pillar__cap--sm { font-size: 14px; line-height: 17px; }
}
@media (max-width: 639px) {
  .pillars__grid { grid-template-columns: 1fr; }
}
/* D68: photo visuals. Cover photo base, ambient canvas as living light above it,
   scrim keeps captions legible at every tier. Logo rides a white badge. */
.pillar__visual picture img.pillar__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.pillar__visual canvas[data-ambient] { opacity: 0.2; mix-blend-mode: screen; }
.pillar__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 10, 12, 0.28), transparent 32%, transparent 42%, rgba(9, 10, 12, 0.84));
}
/* .pillar__badge retired: box1 logo now fills its square full-bleed (D74) */

/* ==== css/venture.css ==== */
/* Venture (S4). Full spec from live-DOM probes (probe-venture[2-6]).
   Indented column: container 1344 + pl-320; video-mock visual; pull-quote;
   UL grid-3 features. Tiers lg=1279 md=1023 sm=767. Static (D23); no hover. */
.venture { background: var(--band-s3); color: var(--grey-20); padding: 240px 0; overflow: clip; }
.venture__wrap { max-width: 1344px; margin-inline: auto; padding-inline: 32px; }
.venture__in { padding-left: 320px; padding-right: 64px; position: relative; }
.venture__title {
  margin: 0; max-width: 640px; color: #000; /* D78: fits the longer "& domain" header in 2 lines */
  font-family: var(--font-display); font-weight: 600;
  font-size: 80px; line-height: 72px; letter-spacing: -0.05em;
}
.venture__sub {
  margin: 14px 0 0; max-width: 648px; font-weight: 400;
  font-size: 18px; line-height: 22.5px; letter-spacing: -0.04em; color: var(--grey-20);
}
.venture__waves { /* ambient wash in waves.mp4 geometry (mine: canvas, D31) */
  position: absolute; left: -69.792%; top: -69.136%;
  width: 222.222%; max-width: none; aspect-ratio: 1.62025;
  pointer-events: none;
}
.venture__waves canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.venture__visual {
  position: relative; z-index: 0; margin-top: 60px;
  width: 864px; height: 486px;
}
.venture__panel {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 10px; background: var(--grey-2);
}
/* D78: ambient demo videos inside the panels (same data-auto behaviour as projects) */
.venture__panel video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; cursor: pointer;
}
.venture__panel video:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
/* D80: pip install chip + learn-more line */
.venture__pip { margin: 28px 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--grey-20); }
.venture__code { font-family: var(--font-mono); font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.12); background: #fff; color: #111; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.venture__code:hover { border-color: #3d7eff; box-shadow: 0 2px 8px rgba(61, 126, 255, 0.15); }
.venture__code code { font: inherit; }
.venture__copied { display: none; color: #1a7f4b; font-size: 12px; }
.venture__code[data-done="true"] .venture__copied { display: inline; }
.venture__code:focus-visible { outline: 2px solid #3d7eff; outline-offset: 2px; }
.venture__more { margin: 40px 0 0; font-size: 17px; color: var(--grey-20); }
.venture__more a { color: #2f5fd0; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
/* D78: mirror twin. Same system, bulged left for symmetry with the right-bulged venture */
.venture--mirror .venture__in { padding-left: 64px; padding-right: 320px; }
.venture--mirror .venture__waves { left: auto; right: -69.792%; }
.venture__quote {
  margin: 66px 0 0; max-width: 864px; font-weight: 500; /* D80b: quote + feats end flush with the 864px visual */
  font-size: 24px; line-height: 33px; letter-spacing: -0.02em; color: var(--grey-20);
}
.venture__feats {
  list-style: none; margin: 40px 0 0; padding: 0; position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 64px; max-width: 864px;
}
.venture__icon { width: 40px; height: 40px; display: block; }
.venture__feat h3 {
  margin: 20px 0 0; max-width: 264px; min-height: 56px; font-weight: 400;
  font-family: var(--font-display); font-size: 28px; line-height: 28px;
  letter-spacing: -0.02em; color: var(--grey-20);
}
.venture__feat p {
  margin: 14px 0 0; max-width: none; font-weight: 300;
  font-size: 15px; line-height: 20.625px; letter-spacing: -0.02em; color: var(--grey-20);
}
/* Genuity viewer mock (mine, code-built): dark panel UI over ambient canvas */
.gview { position: absolute; inset: 0; display: flex; flex-direction: column; color: #e5e5e7;
  font-family: var(--font-mono); }
.gview__top { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.09); font-size: 12px; }
.gview__dots { display: inline-flex; gap: 6px; }
.gview__dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a3d43; }
.gview__dots i:first-child { background: #ff8964; }
.gview__name { color: var(--grey-70); }
.gview__live { margin-left: auto; color: #7aa5ff; font-size: 11px; letter-spacing: .08em; display: inline-flex; align-items: center; gap: 7px; }
.gview__live i { width: 7px; height: 7px; border-radius: 50%; background: #7aa5ff; animation: livepulse 2.4s ease-in-out infinite; }
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.gview__main { flex: 1; display: flex; gap: 12px; padding: 12px 16px; min-height: 0; }
.gview__viewport { position: relative; flex: 1; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.09); }
.gview__viewport canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gview__viewport::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(122,165,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(122,165,255,.09) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: linear-gradient(#000 30%, transparent 95%); }
.gview__box { position: absolute; border: 1.5px solid rgba(122,165,255,.85); border-radius: 3px; }
.gview__box b { position: absolute; left: -1.5px; bottom: calc(100% + 3px); font-weight: 400;
  font-size: 10px; letter-spacing: .04em; color: #bcd2ff; white-space: nowrap; }
.gview__side { display: flex; flex-direction: column; gap: 12px; width: 132px; flex-shrink: 0; }
.gview__tile { flex: 1; border: 1px solid rgba(255,255,255,.09); border-radius: 8px;
  background: rgba(255,255,255,.03); padding: 10px 12px; display: flex; flex-direction: column;
  justify-content: center; gap: 2px; }
.gview__tile span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-60); }
.gview__tile strong { font-size: 16px; font-weight: 500; color: #fff; }
.gview__bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px 14px; font-size: 11px; }
.gview__stat { color: var(--grey-60); }
@media (max-width: 767px) { /* R1.12: top-bar never wraps */
  .gview__top { gap: 8px; }
  .gview__name { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gview__live { white-space: nowrap; flex-shrink: 0; }
}
.gview__stat--ok { margin-left: auto; color: #8fd0a4; }
@media (prefers-reduced-motion: reduce) { .gview__live i { animation: none; } }





@media (max-width: 1023px) {
  .gview__side { width: 104px; }
  .gview__tile strong { font-size: 13px; }
}
@media (max-width: 767px) {
  .gview__side { display: none; }
  .gview__stat--ok { display: none; }
}
@media (max-width: 1279px) {
  .venture { padding: 128px 0; }
  .venture__wrap { max-width: 960px; }
  .venture__in { padding-left: 0; padding-right: 0; }
  .venture__title { font-size: 72px; line-height: 64.8px; }
  .venture__sub { margin-top: 10px; }
  .venture__visual { width: 768px; height: 432px; }
  .venture__panel { border-radius: 8px; }
  .venture__quote { margin-top: 60px; max-width: 768px; font-size: 20px; line-height: 27.5px; }
  .venture__feats { margin-top: 36px; max-width: 768px; }
  .venture__feat h3 { margin-top: 16px; max-width: 240px; min-height: 48px; font-size: 24px; line-height: 24px; }
  .venture__feat p { margin-top: 10px; }
}
@media (max-width: 1023px) {
  .venture { padding: 96px 0; }
  .venture__wrap { max-width: 768px; padding-inline: 0; }
  .venture__in { padding-left: 96px; padding-right: 36px; }
  .venture--mirror .venture__in { padding-left: 36px; padding-right: 96px; }
  .venture__title { font-size: 56px; line-height: 50.4px; max-width: 470px; }
  .venture__sub { max-width: 450px; font-size: 16px; line-height: 20px; }
  .venture__visual { margin: 48px 0 0 8px; width: 562px; height: 316px; }
  .venture--mirror .venture__visual { margin: 48px 8px 0 0; }
  .venture__panel { border-radius: 7px; }
  .venture__quote { margin-top: 72px; max-width: 570px; }
  .venture__feats { gap: 32px; max-width: 570px; }
  .venture__icon { width: 36px; height: 36px; }
  .venture__feat h3 { margin-top: 14px; }
  .venture__feat p { margin-top: 8px; line-height: 18.75px; }
}
@media (max-width: 767px) {
  .venture { padding-top: 80px; padding-bottom: 68px; }
  .venture__wrap { max-width: none; padding-inline: 20px; }
  .venture__in { padding-left: 0; padding-right: 0; }
  .venture--mirror .venture__in { padding-left: 0; padding-right: 0; } /* D90: 1023 mirror pad (0,2,0) beat the reset above */
  .venture__title { font-size: 36px; line-height: 32.4px; max-width: 250px; }
  .venture__sub { margin-top: 12px; }
  .venture__visual { margin: 24px 5px 0; width: calc(100% - 10px); height: auto; aspect-ratio: 16 / 9; }
  .venture__panel { border-radius: 4px; }
  .venture__quote { margin-top: 28px; font-size: 18px; line-height: 24.75px; }
  .venture__feats { margin-top: 32px; grid-template-columns: 1fr; row-gap: 28px; }
  .venture__icon { width: 32px; height: 32px; }
  .venture__feat h3 { margin-top: 10px; max-width: none; min-height: 0; font-size: 20px; line-height: 20px; }
  .venture__feat p { margin-top: 4px; max-width: none; }
}

/* ==== css/grid6.css ==== */
/* Grid6 (S5). Full spec from live-DOM probes (probe-grid6, probe-grid6b).
   Dark band: H2 + sub + canvas visual + UL 3x2 chromeless cells.
   Tiers lg=1279 md=1023 sm=767. Static (D23); no hover. Wrap z-1 over bg canvas z-0 (D36). */
.grid6 { background: var(--band-github); color: #fff; padding-top: 131px; padding-bottom: 180px;
  position: relative; z-index: 20; overflow: clip; }
.grid6__wrap { max-width: 1024px; margin-inline: auto; padding-inline: 32px; position: relative; z-index: 1; }
.grid6__bg { /* alpha-video slot (mine: ambient canvas, same geometry) */
  position: absolute; left: -255px; top: -204px; width: 1472px; aspect-ratio: 1.39393939;
  background: var(--band-github); pointer-events: none; z-index: 0;
}
.grid6__bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.grid6__title {
  margin: 0; max-width: 672px; color: #fff;
  font-family: var(--font-display); font-weight: 500;
  font-size: 80px; line-height: 72px; letter-spacing: -0.02em;
}
.grid6__sub {
  margin: 16px 0 0; max-width: 580px; font-weight: 400;
  font-size: 16px; line-height: 22px; letter-spacing: -0.04em; color: var(--grey-60);
}
.grid6__visual { position: relative; margin-top: 108px; aspect-ratio: 1.732851; }
.grid6__panel { position: absolute; inset: 0; overflow: hidden; border-radius: 12px;
  background: #16181c; border: 1px solid rgba(255, 255, 255, 0.08); }
.grid6__panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* D65: founder photo blended into the panel. Photo base, ambient canvas kept as
   living light above it, scrim feathers edges into the band, caption chip. */
.grid6__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; } /* D67: shifted down so the shirt logo shows */
.grid6__panel canvas[data-ambient] { opacity: 0.16; mix-blend-mode: screen; }
.grid6__scrim { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 12, 15, 0.62), transparent 26%, transparent 70%, rgba(11, 12, 15, 0.6)),
    linear-gradient(90deg, rgba(11, 12, 15, 0.58), transparent 22%, transparent 78%, rgba(11, 12, 15, 0.58));
}
.grid6__panel::after { /* top-light hairline */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}
.grid6__cap { /* D67: quiet line under the panel, photo stays clean */
  margin: 14px 4px 0; font-size: 13px; line-height: 1.5; color: var(--grey-60);
  max-width: none;
}
@media (max-width: 767px) {
  .grid6__cap { font-size: 12px; }
}
.grid6__cells {
  list-style: none; margin: 160px 0 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 96px; row-gap: 80px;
}
.grid6__cell { position: relative; }
.grid6__icon { height: 40px; width: auto; display: block; }
.grid6__cell h3 {
  margin: 20px 0 0; font-weight: 400;
  font-family: var(--font-display); font-size: 32px; line-height: 32px;
  letter-spacing: -0.02em; color: #fff;
}
.grid6__cell p {
  margin: 12px 0 0; font-weight: 300;
  font-size: 15px; line-height: 20.625px; letter-spacing: -0.02em; color: var(--grey-60);
}
@media (max-width: 1279px) {
  .grid6 { padding-top: 96px; padding-bottom: 131px; }
  .grid6__wrap { padding-inline: 64px; }
  .grid6__bg { left: -60px; top: -191px; width: 1376px; }
  .grid6__title { font-size: 72px; line-height: 64.8px; }
  .grid6__visual { margin-top: 80px; }
  .grid6__panel { border-radius: 10px; }
  .grid6__cells { margin-top: 102px; column-gap: 76px; row-gap: 56px; }
  .grid6__cell h3 { font-size: 28px; line-height: 28px; }
}
@media (max-width: 1023px) {
  .grid6 { padding-top: 96px; padding-bottom: 96px; }
  .grid6__wrap { padding-inline: 32px; }
  .grid6__bg { left: -26.705%; top: -36.921%; width: 153.409%; }
  .grid6__title { font-size: 56px; line-height: 50.4px; max-width: 448px; }
  .grid6__visual { margin-top: 48px; }
  .grid6__panel { border-radius: 8px; }
  .grid6__cells { margin-top: 64px; column-gap: 64px; row-gap: 48px; }
  .grid6__icon { height: 36px; }
  .grid6__cell h3 { margin-top: 16px; font-size: 24px; line-height: 24px; }
  .grid6__cell p { margin-top: 8px; line-height: 18.75px; }
}
@media (max-width: 767px) {
  .grid6 { padding-top: 64px; padding-bottom: 64px; }
  .grid6__wrap { padding-inline: 20px; }
  .grid6__title { font-size: 36px; line-height: 32.4px; max-width: 384px; }
  .grid6__visual { margin-top: 40px; }
  .grid6__panel { border-radius: 4px; }
  .grid6__cells { margin-top: 48px; grid-template-columns: 1fr; row-gap: 32px; }
  .grid6__icon { height: 32px; }
  .grid6__cell h3 { margin-top: 10px; font-size: 20px; line-height: 20px; }
  .grid6__cell p { margin-top: 4px; }
}

/* ==== css/cta.css ==== */
/* CTA (S8 join). Measured spec, probes s8/s8b/s8c, 15-10.
   Shared by the calibration replica and personalised #contact.
   Ghost circle div renders nothing on ref, SKIPPED (D48); personalised medallion is own art. */

.cta { background: #090a0c; padding-top: 152px; padding-bottom: 294px;
  position: relative; overflow: hidden; }
.cta__wrap { max-width: 1280px; margin-inline: auto; padding-inline: 32px;
  display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.cta__content { grid-column: 2; margin-left: -64px; position: relative; z-index: 10; }
.cta__h2 { margin: 0; max-width: 510px; font-family: var(--font-display);
  font-weight: 500; font-size: 80px; line-height: 0.8; letter-spacing: -0.03em;
  background: var(--grad-head); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta__p { position: relative; z-index: 10; margin: 8px 0 28px; font-family: var(--font-text);
  font-size: 16px; line-height: 22px; letter-spacing: -0.04em; color: var(--grey-90); }
.cta__row { position: relative; z-index: 10; display: inline-flex; align-items: center; gap: 31px; }
.cta__btn { display: flex; align-items: center; justify-content: center; height: 40px; width: 174px;
  border-radius: 999px; font-family: var(--font-text); font-size: 12px; font-weight: 700;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.cta__btn--light { position: relative; z-index: 1; overflow: hidden; background: #d1d1d1; color: #0b0d10;
  border: 1px solid rgba(255,255,255,.6); letter-spacing: -0.015em; padding: 0; }
.cta__btn--dark { background: #0B0C0F; color: #fff; border: 1px solid rgba(255,255,255,.1);
  letter-spacing: -0.01em; gap: 6px; padding: 0 24px 0 20px; transition: border-color .2s; }
.cta__btn--dark:hover { border-color: rgba(255,255,255,.15); }
.cta__btn--dark svg { width: 22px; height: 22px; flex: none; }

/* light-button glow stack (own build of measured recipe) */
.cta__btnglow { position: relative; }
.cta__btnglow::before, .cta__btnglow::after { content: ""; position: absolute;
  left: 50%; top: 50%; width: calc(100% + 9px); height: calc(100% + 9px);
  transform: translate(-50%,-50%); border-radius: 999px; pointer-events: none; }
.cta__btnglow::before { z-index: 0; filter: blur(15px); opacity: .4; /* D78: halo stepped down */
  background: linear-gradient(transparent,transparent) padding-box,
    linear-gradient(91.88deg, rgba(255,137,100,.2) 46.45%, #cd3100 98.59%) border-box;
  border: 3px solid transparent; }
.cta__btnglow::after { z-index: 0; filter: blur(2px); opacity: .4; /* D78: halo stepped down */
  background: linear-gradient(transparent,transparent) padding-box,
    linear-gradient(97.68deg, rgba(255,177,153,0) 38.1%, rgba(255,177,153,.2) 82.47%, #ff7950 93.3%) border-box;
  border: 2px solid transparent; }
.cta__sun { position: absolute; z-index: 0; left: calc(100% - 6px); top: 50%; width: 84px; height: 84px; opacity: .15; /* D78: whisper only */
  transform: translate(-50%,-50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, #FFFFF5 3.5%, #FFAA81 26.5%, #FFDA9F 37.5%, rgba(255,170,129,.5) 49%, rgba(210,106,58,0) 92.5%); }
.cta__ellipse { position: absolute; z-index: 0; left: calc(100% - 6px); top: 50%; width: 140px; height: 70px; opacity: .2; /* D78: whisper only */
  transform: translate(-50%,-50%); pointer-events: none; filter: blur(5px);
  background: radial-gradient(43.3% 44.23% at 50% 49.51%, #FFFFF7 29%, #FFFAcd 48.5%, #f4d2bf 60.71%, rgba(214,211,209,0) 100%); }

/* personalised: medallion + beams (own art, S8 geometry) */
.build__med { position: absolute; top: -28px; left: 80px; width: 403px; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; pointer-events: none; }
.build__med img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; transform: scale(1.28); transform-origin: 50% 46%; }
/* NEC handshake caption under the medallion (user order: name the moment, keep it quiet) */
.build__cap { position: absolute; left: 80px; top: 389px; width: 403px; margin: 0;
  text-align: center; font-family: var(--font-text); font-size: 12.5px; line-height: 1.55;
  letter-spacing: -0.01em; color: var(--grey-60); }
.build__rim { position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.14), inset -38px 28px 90px rgba(255,122,60,.32), inset 34px -20px 90px rgba(70,110,255,.36), inset 0 0 120px rgba(9,10,12,.42); }
.build__beam { position: absolute; pointer-events: none; }
.build__beam--orange { left: -300px; top: 30%; width: 660px; height: 150px; transform: rotate(-14deg);
  background: linear-gradient(to right, rgba(255,122,60,0), rgba(255,122,60,.29) 45%, rgba(255,170,129,.42) 75%, rgba(255,170,129,0));
  filter: blur(10px); }
.build__beam--blue { right: -190px; bottom: 16%; width: 640px; height: 170px; transform: rotate(16deg);
  background: linear-gradient(to left, rgba(70,110,255,0), rgba(70,110,255,.27) 45%, rgba(150,180,255,.40) 75%, rgba(150,180,255,0));
  filter: blur(10px); }
.build__vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 10%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%); }

@media (max-width: 1279px) {
  .cta { padding-top: 109px; padding-bottom: 251px; }
  .cta__content { margin-left: 0; }
  .build__med { width: 332px; left: 96px; top: 0; }
  .build__cap { left: 96px; top: 346px; width: 332px; }
}
@media (max-width: 1023px) {
  .cta { padding-top: 77px; padding-bottom: 190px; }
  .cta__h2 { font-size: 56px; max-width: 320px; }
  .cta__p { margin-bottom: 18px; }
  .cta__content { margin-left: 10px; }
  .build__med { width: 284px; left: 56px; top: 3px; }
  .build__cap { left: 56px; top: 301px; width: 284px; }
}
@media (max-width: 767px) {
  .cta { padding-top: 322px; padding-bottom: 235px; }
  .cta__wrap { grid-template-columns: 1fr; position: static; }
  .cta__content { grid-column: 1; margin-left: 0; display: flex; flex-direction: column;
    align-items: center; text-align: center; }
  .cta__h2 { font-size: 44px; }
  .cta__p { margin-bottom: 18px; }
  .cta__row { flex-direction: column; gap: 16px; }
  .build__med { width: 208px; left: 49%; top: 28px; transform: translateX(-50%); }
  .build__cap { left: 50%; top: 244px; width: 240px; transform: translateX(-50%); font-size: 12px; }
  .build__beam--orange { left: -40%; top: 6%; width: 90%; }
  .build__beam--blue { right: -40%; bottom: 30%; width: 90%; }
}

/* ==== css/footer.css ==== */
/* Footer (ref footer). Measured spec, probes footer/footerb/footerc, 15-10.
   Shared by the calibration replica and personalised footer.
   Ref footer is absolute bottom-0 INSIDE S8; personalised likewise inside #contact. */

.foot { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
  padding-top: 17px; padding-bottom: 17px; overflow: hidden; }
.foot--static { position: relative; background: #090a0c; } /* cal only */
.foot__wrap { max-width: 1280px; margin-inline: auto; padding-inline: 32px;
  display: flex; align-items: center; font-family: var(--font-text);
  font-size: 14px; line-height: 1; letter-spacing: -0.02em; }
.foot__cr { margin: 0; color: var(--grey-60); white-space: nowrap; } /* D52: grey-40 (3.38) fails AA; grey-60 passes, ref-exact otherwise */
.foot__cr a { color: inherit; text-decoration: none; transition: color .2s; padding-block: 14px; }
.foot__cr a:hover { color: #fff; }
.foot__legal { margin: 0 0 0 70px; padding: 0; list-style: none; display: flex;
  align-items: center; gap: 26px; }
.foot__legal a { color: var(--grey-80); text-decoration: none; white-space: nowrap;
  transition: color .2s; padding-block: 14px; margin-block: -14px; }
.foot__legal a:hover { color: #fff; }
.foot__social { margin: 0 0 0 70px; padding: 0; list-style: none; display: flex; gap: 18px; }
.foot__social a { display: block; padding: 13px; margin: -13px; }
.foot__social svg { width: 18px; height: 18px; display: block; opacity: .8;
  transition: opacity .3s; }
.foot__social a:hover svg { opacity: 1; }
.foot__sign { margin-left: auto; display: flex; height: 48px; align-items: center; gap: 18px;

  white-space: nowrap; }
.foot__top { color: var(--grey-80); font-size: 13px; text-decoration: none; }
.foot__top:hover { color: #fff; }
.foot__sign img, .foot__sign svg { width: 68px; height: 68px; flex: none; }

@media (max-width: 1279px) {
  .foot__wrap { flex-wrap: wrap; justify-content: space-between; row-gap: 12px; }
  .foot__social { order: 1; margin-left: 0; width: 50%; margin-bottom: -6px; }
  .foot__legal { order: 2; margin-left: 0; width: 50%; justify-content: flex-end;
    gap: 24px; margin-bottom: -6px; }
  .foot__cr { order: 3; }
  .foot__sign { order: 4; }
}
@media (max-width: 1023px) {
  .foot { padding-top: 14px; padding-bottom: 14px; }
  .foot__wrap { justify-content: flex-start; row-gap: 8px; }
  .foot__social { margin-bottom: 0; }
  .foot__legal { gap: 16px; margin-bottom: 0; }
  .foot__sign { order: 3; height: 44px; }
}
@media (max-width: 767px) {
  .foot__wrap { justify-content: center; text-align: center; row-gap: 0; }
  .foot__social { order: 1; width: 100%; justify-content: center; }
  .foot__legal { order: 2; width: 100%; justify-content: center; margin-top: 44px; }
  .foot__cr { order: 3; width: 100%; margin-top: 14px; }
  .foot__cr span + span { display: block; } /* sm 2-line break (ref mechanism unprobed) */
  .foot__cr a { line-height: 1.2; } /* sm first-line 16.8 measured */
  .foot__sign { order: 4; margin-left: 0; width: 100%; justify-content: center; margin-top: 16px; flex-direction: column; gap: 8px; height: auto; }
  .foot__sign img, .foot__sign svg { width: 44px; height: 44px; } /* R1.7: sm stack for longer signoff (desktop heart68 kept: measured) */
}

/* ==== css/site.css ==== */
/* Scaffold shell. Replaced section by section in Phase 3. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page-base);
  color: var(--ink);
  font-family: var(--font-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* .wrap lives in primitives.css now (scaffold rule retired with the nav) */
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--ink); color: var(--canvas); padding: 0.5rem 1rem; border-radius: 0.5rem;
}
.skip:focus { top: 1rem; }
/* .brandlock retired 15-10: wordmark (.navx__word) replaces the AK badge (D68) */
.navx__util {
  color: #fff; text-decoration: none; font-size: 14px; padding: 0 6px;
  transition: color var(--t-med) var(--ease);
  min-height: 44px; display: inline-flex; align-items: center;
}
.navx__util:hover { color: var(--blue-soft); }
/* D62: 6 links + 2 utils + pill exceed 768px; park the utils on tablet (still in footer + mobile menu) */
@media (max-width: 1023px) {
  .navx__links { margin-left: 32px; }
  .navx__cta .navx__util { display: none; }
}
/* .btn lives in primitives.css now (scaffold rules retired with the hero) */
/* scaffold section padding retired 15-10: every section now owns its rhythm (cta/feat were overridden) */
/* .footer + .stub retired 15-10 with the personalised footer (G2 hygiene) */
h1, h2 { line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5vw + 1rem, 4rem); margin: 0; }
/* D63: one non-latin glyph (U+20B9) forced the whole 88KB latin-ext subset; system stack instead */
.sys-glyph { font-family: Arial, "Segoe UI Symbol", "Noto Sans Symbols", sans-serif; }
/* Dual contact emails under every contact block (user order: both inboxes reachable) */
.mails { margin: 20px 0 0; font-size: 14px; letter-spacing: -0.01em; color: var(--grey-60); }
.mails a { color: var(--grey-90); text-decoration: underline; text-underline-offset: 3px; }
.mails a:hover { color: #fff; }
/* R5: selection + scrollbar, on-palette */
::selection { background: rgba(255, 122, 41, 0.35); color: #fff; }
html { scrollbar-color: #2a2d34 #090a0c; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #090a0c; }
::-webkit-scrollbar-thumb { background: #2a2d34; border-radius: 8px; border: 2px solid #090a0c; }
h2 { font-size: clamp(1.6rem, 3vw + 1rem, 2.6rem); margin: 0; }