/* Colour floods, one per band, all from the mark: vermilion (KODE Immersive's single-colour field), ice, white,
   then space black for the product. The name runs edge to edge (KOBU), the words step down (Studio Freight),
   the product sits inline in a sentence (Butter). */
:root {
  --shu: #e4572e; --ice: #9db7e8; --white: #f4f6fb; --black: #000000; --grey-1: #1c1c1e; --grey-2: #2c2c2e; --silver: #d1d1d6;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --max: 1360px;
}
* { box-sizing: border-box; }
html, body { background: var(--shu); overflow-x: clip; }
body { margin: 0; color: var(--black); font: 400 17px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; }
h1, h2, .turn, .lead { text-wrap: balance; }
.told, .note, .debt p { text-wrap: pretty; }
.lead-title { font: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.btn { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 999px; background: var(--black); color: #ffffff; font: 600 15px var(--sans); white-space: nowrap; }

.band { position: relative; min-height: 100svh; overflow: clip; display: grid; align-items: center; }
.band > .wrap { width: 100%; }
.shu { background: var(--shu); color: var(--black); }
.ice { background: var(--ice); color: var(--black); }
.white { background: linear-gradient(115deg, #f2f2f5 0%, #c9c9ce 22%, #eeeef1 40%, #a9a9ae 62%, #dcdce0 80%, #b9b9be 100%); color: var(--black); }
.night .btn { background: var(--silver); color: var(--black); }
.night :focus-visible { outline-color: var(--white); }
.night { background: var(--black); color: var(--white); }

/* 1. Vermilion flood: the name, a black cut-out of the mark, one line, one button */
.nav { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; padding-top: max(18px, env(safe-area-inset-top, 0px)); font: 500 14px var(--mono); }
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.hero .cut { position: absolute; right: 3vw; top: 7%; width: min(32vw, 400px); }
.hero .cut svg { display: block; width: 100%; height: auto; fill: var(--black); }
.hero .cut svg { opacity: 0; transition: opacity 0.3s; }
.hero .cut.still svg { opacity: 1; }
[data-metal] canvas { animation: metal-in 0.8s ease-out both; }
@keyframes metal-in { from { opacity: 0; } }
/* Liquid metal (Paper Shaders) replaces the black cut-out and the brushed band once WebGL is up; CSS stays as fallback */
.hero .lead { align-self: center; font: 500 clamp(28px, 3.2vw, 44px)/1.08 var(--sans); letter-spacing: -0.03em; max-width: 13ch; position: relative; }
.hero .lead .btn { margin-top: 28px; letter-spacing: 0; font-size: 15px; }
.hero .name { padding-block: 0 26px; position: relative; }
.hero .name .word { width: 100%; height: auto; display: block; color: var(--black); }

/* 1b. Paper white: why it exists, told as it happened */
.paper { background: var(--white); color: var(--black); }
.story { padding-block: 120px; display: grid; gap: 48px; }
.story h2 { font: 500 clamp(36px, 5.2vw, 76px)/1.02 var(--sans); letter-spacing: -0.035em; max-width: 16ch; }
.story .told { font: 400 clamp(20px, 2vw, 28px)/1.45 var(--sans); letter-spacing: -0.012em; max-width: 46ch; border-top: 2px solid var(--black); padding-top: 28px; }
.story .footnote { font: 500 13px/1.4 var(--mono); margin-top: -12px; }
.story .turn { font: 600 clamp(32px, 4.6vw, 68px)/1 var(--mono); text-transform: uppercase; letter-spacing: -0.045em; }

/* 2. Silver flood: speed, the product inline in one sentence (Butter) */
.sentence { padding-block: 120px; }
.sentence p { font: 500 clamp(30px, 4.4vw, 64px)/1.22 var(--sans); letter-spacing: -0.035em; max-width: 22ch; }
.chip { display: inline-block; vertical-align: baseline; position: relative; top: -0.2em; margin-block: -0.6em; margin-inline: 0.1em; font: 500 0.44em/1 var(--mono); letter-spacing: 0; padding: 0.62em 0.9em; border-radius: 999px; background: var(--black); color: var(--white); white-space: nowrap; }
.kicker { display: block; font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 28px; }

/* 3. Ice flood: agents of different people talk to each other (Studio Freight's stepped words) */
.team { padding-block: 120px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: center; }
.steps { font: 600 clamp(44px, 5.6vw, 92px)/0.92 var(--mono); text-transform: uppercase; letter-spacing: -0.045em; }
.steps .l2 { padding-left: 1.2em; }
.steps .l3 { padding-left: 2.4em; }
.steps .l4 { padding-left: 1.2em; }
.steps > div { white-space: nowrap; }
.team .note { grid-column: 1 / -1; font: 500 clamp(20px, 1.8vw, 26px)/1.3 var(--sans); letter-spacing: -0.02em; max-width: 34ch; }

/* A real crop of the board, then the morning brief card */
.crop { margin: 0; width: min(440px, 100%); display: grid; gap: 12px; }
.crop img { width: 100%; border-radius: 18px; padding: 10px 14px; background: #0b0b0c; }
.crop figcaption { font: 500 13px var(--mono); }
.card { width: min(380px, 100%); background: var(--black); color: var(--white); border-radius: 18px; padding: 18px; display: grid; gap: 14px; font: 400 15px/1.42 var(--sans); }
.card .head { display: flex; justify-content: space-between; gap: 12px; font: 500 12px var(--mono); color: #8e8e93; }
.card dl { margin: 0; display: grid; gap: 12px; }
.card dt { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: #8e8e93; margin-bottom: 2px; }
.card dd { margin: 0; }

/* 4. Space black: comprehension debt, the brief, the real product */
.product { padding-block: 120px 96px; }
.night .kicker { color: var(--ice); }
.debt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px 64px; align-items: center; margin-bottom: 96px; }
.debt h2 { font: 500 clamp(34px, 4.4vw, 64px)/1.02 var(--sans); letter-spacing: -0.035em; max-width: 14ch; }
.debt p { margin-top: 24px; color: #c7c7cc; font-size: 18px; max-width: 40ch; }
.debt .card { border: 1px solid var(--grey-2); background: #0b0b0c; }
.product .shot img { border-radius: 14px; box-shadow: 0 0 0 1px var(--grey-2); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; margin-top: 56px; }
.facts b { display: block; font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ice); margin-bottom: 8px; }
.facts p { color: #c7c7cc; font-size: 16px; }

/* 5. Vermilion again to close */
.close { padding-block: 120px 40px; }
.close h2 { font: 600 clamp(44px, 7vw, 112px)/0.95 var(--mono); text-transform: uppercase; letter-spacing: -0.045em; max-width: 12ch; }
.close .btn { margin-top: 36px; }
.foot { display: flex; justify-content: space-between; padding-top: 96px; padding-bottom: max(22px, env(safe-area-inset-bottom, 0px)); font: 500 13px var(--mono); }

/* Phone: everything in the flow, nothing overlaps, one button per screen, tighter bands */
@media (max-width: 860px) {
  .nav .btn { display: none; }
  .nav { padding-block: 14px; padding-top: max(14px, env(safe-area-inset-top, 0px)); }
  .hero { min-height: 100svh; grid-template-rows: auto 1fr auto auto; gap: 24px; }
  .hero .cut { position: relative; right: auto; top: auto; justify-self: end; align-self: center; width: 70vw; max-width: 340px; }
  .hero .lead { font-size: clamp(34px, 9.4vw, 44px); max-width: 11ch; }
  .hero .lead .btn { margin-top: 24px; }
  .hero .name { padding-block: 0 20px; }
  .story { padding-block: 72px; gap: 36px; }
  .story .told { font: 400 clamp(20px, 2vw, 28px)/1.45 var(--sans); letter-spacing: -0.012em; max-width: 46ch; border-top: 2px solid var(--black); padding-top: 28px; }
    .sentence { padding-block: 72px; }
  .sentence p { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.28; }
  .team { padding-block: 72px; grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .steps { font-size: clamp(38px, 11vw, 60px); }
  .steps .l2 { padding-left: 0.6em; }
  .steps .l3 { padding-left: 0; }
  .product { padding-block: 72px; }
  .debt { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-bottom: 64px; }
  .product .shot { display: none; }
  .card { width: 100%; }
  .product .shot img { border-radius: 28px; }
  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 40px; }
  .close { padding-block: 72px 0; }
  .close h2 { font-size: 9.6vw; max-width: none; }
  .product .shot img { border-radius: 14px; box-shadow: none; }
}
@media (max-width: 480px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
}
/* Tablet: keep the side-by-side compositions instead of a stretched phone column */
@media (min-width: 600px) and (max-width: 860px) {
  .team, .debt { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
  .team .note { grid-column: 1 / -1; }
  .product .shot { display: block; max-width: none; }
  .product .shot img { border-radius: 14px; }
  .foot { padding-top: 64px; }
}

/* Motion runs on GSAP (ScrollTrigger, SplitText) with Lenis smooth scroll; see the script at the end.
   Bands stack: each one holds while the next slides up over it. Fine grain on every band, moving only on silver. */
:root { --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html { -webkit-tap-highlight-color: transparent; }
.band { z-index: 1; }
.band::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--noise) 0 0 / 220px; opacity: 0.07; }
.night::after { opacity: 0.05; }
.white::after { inset: -220px; opacity: 0.1; will-change: transform; animation: grain 0.7s steps(4) infinite; }
@keyframes grain { 25% { transform: translate(-60px, 40px); } 50% { transform: translate(80px, -70px); } 75% { transform: translate(-30px, -110px); } 100% { transform: translate(50px, 90px); } }
.band > .shade { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: #000000; opacity: 0; will-change: opacity; }
.btn { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.95); transition-duration: 0.08s; }
.hero .name { overflow: clip; }
.hero .name .word { cursor: pointer; transform-origin: 50% 100%; }
.fired { position: relative; display: inline-block; transform-origin: 0 100%; --strike: 0; }
.fired::after { content: ""; position: absolute; left: -0.05em; right: -0.05em; top: 52%; height: 0.09em; background: var(--shu); transform: scaleX(var(--strike)); transform-origin: left; }
/* SplitText masks clip at the line box; give descenders (g, p, y) room without moving the layout */
.sl-mask { padding-bottom: 0.2em; margin-bottom: -0.2em; }
.chip { will-change: transform; }
/* Brand colors: Claude orange (#D97757), Codex logo blue (middle stop of its gradient, #7A9DFF) */
.chip.a { color: #D97757; }
.chip.b { color: #7A9DFF; }
.curtain { position: fixed; inset: 0; z-index: 50; background: #000000; pointer-events: none; display: none; }
html.intro .curtain { display: block; }
html.intro .hero .lead, html.intro .hero .name .word, html.intro .nav, html.intro .hero .cut { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .white::after { animation: none; }
  .fired { opacity: 0.45; transform: translateY(0.12em) rotate(5deg); --strike: 1; }
}
.access { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; max-width: 540px; }
.access input[type="email"] { flex: 1 1 240px; min-width: 0; height: 46px; padding: 0 20px; border-radius: 999px; border: 1.5px solid #000000; background: transparent; color: #000000; font: 500 16px var(--sans); }
.access input[type="email"]::placeholder { color: rgb(0 0 0 / 0.5); }
.access input[type="email"]:focus-visible { outline: 2px solid #000000; outline-offset: 3px; }
.access .btn { margin-top: 0; border: 0; cursor: pointer; }
.access .btn[disabled] { opacity: 0.6; cursor: progress; }
.access .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.access-note { flex-basis: 100%; margin-top: 4px; font: 500 13px var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }