/* Sovryn for Manufacturing: a shop floor you scroll through.
 *
 * Layers, back to front: the scene (.stage, one WebGL canvas) → grading (.fx-layer: vignette,
 * grain) → the shade at the foot (.veil) → the words (.st, fixed, scrubbed by world.js) → nav
 * and the chapter index. Narrow screens and reduced motion let the words flow down the page
 * instead (.flow). The type is the proposal's: Avenir Next set light, labels bold and tracked,
 * mint for the mark.
 */
:root {
  --edge: clamp(24px, 5vw, 80px);
  --foot: clamp(28px, 4.5vh, 44px);
  --ink: #f2f7f5;
  --ink-dim: rgba(235, 245, 241, 0.8);
  --ink-muted: rgba(235, 245, 241, 0.52);
  --mint: #bdefd9;
  --mint-dim: rgba(189, 239, 217, 0.4);
  --deep: #11312e;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sans: 'Avenir Next', 'Figtree', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #040b0a; color: var(--ink); -webkit-font-smoothing: antialiased; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { font: 400 16px/1.6 var(--sans); overflow-x: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

/* ---------- stage + grading ---------- */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 70%, #16382f, #040b0a 70%); }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.8s var(--ease); }
.is-ready #scene { opacity: 1; }
.fx-layer { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.fx { position: absolute; inset: 0; }
.fx-vignette { background: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 52%, rgba(1, 4, 3, 0.62) 100%); }
.fx-grain {
  inset: -50%; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px var(--edge); }
/* a blur under the nav that fades out downwards, shown once you scroll: one masked layer */
.nav-blur {
  position: fixed; top: 0; left: 0; right: 0; height: 130px; z-index: 19; pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
  background: linear-gradient(to bottom, rgba(2, 7, 6, 0.72), rgba(2, 7, 6, 0.3) 55%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 45%, transparent); mask-image: linear-gradient(to bottom, #000 0 45%, transparent);
}
.nav.is-scrolled + .nav-blur { opacity: 1; }
.nav-brand { text-decoration: none; font-weight: 700; font-size: 13px; letter-spacing: 0.32em; }
.nav-brand svg { width: 14px; height: 14px; color: var(--mint); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-link, .nav-cta { font-size: 13px; font-weight: 500; text-decoration: none; color: var(--ink-dim); padding: 9px 14px; border-radius: 999px; transition: color .2s, background .25s; }
.nav-link:hover { color: var(--ink); }
.nav-cta { color: var(--deep); background: var(--mint); font-weight: 600; }
.nav-cta:hover { background: #fff; }
.loader { position: fixed; z-index: 6; top: 88px; left: var(--edge); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); transition: opacity .6s; }
.is-ready .loader { opacity: 0; }

/* the mark's sheen: rests at six tenths, full strength as the band passes */
.sheen {
  display: inline-flex; align-items: center; gap: 9px;
  -webkit-mask-image: linear-gradient(105deg, rgb(0 0 0 / .6) 0 36%, #000 50%, rgb(0 0 0 / .6) 64% 100%);
  mask-image: linear-gradient(105deg, rgb(0 0 0 / .6) 0 36%, #000 50%, rgb(0 0 0 / .6) 64% 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  animation: sheen 7s var(--ease) infinite;
}
@keyframes sheen { 0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 40%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--sans); padding: 15px 24px; border-radius: 999px; text-decoration: none; transition: background .25s, box-shadow .25s, border-color .25s; }
.btn-mint { background: var(--mint); color: var(--deep); }
.btn-mint:hover { background: #fff; box-shadow: 0 0 28px rgba(189, 239, 217, 0.45); }
.btn-line { border: 1px solid rgba(255, 255, 255, 0.4); color: var(--ink); background: rgba(4, 11, 10, 0.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-line:hover { border-color: var(--mint); }

/* ---------- chapters: each is only scroll length; its words are fixed and scrubbed ---------- */
main { position: relative; z-index: 2; }
.chapter { position: relative; height: 125vh; }
.chapter--hero { height: 100vh; }
.chapter--long { height: 150vh; }
.chapter--end { height: 115vh; }
/* the platform holds for four views, one step of 70vh each */
.chapter--show { height: calc(125vh + 3 * 70vh); }

.st {
  position: fixed; inset: 0; z-index: 3;
  display: grid; align-content: center; justify-items: start;
  padding: 120px var(--edge) 9vh;
  pointer-events: none; visibility: hidden;
}
.st.is-on { visibility: visible; }
.st a, .st details, .st summary { pointer-events: auto; }
.st--center { justify-items: center; text-align: center; }
.st--right { justify-items: end; text-align: right; padding-right: clamp(190px, 16vw, 250px); }
.st--top { align-content: start; padding-top: 16vh; }
.st--top.has-cols { align-content: stretch; grid-template-rows: auto auto 1fr; }
.st--top.has-cols .st-body { align-self: end; }
.st--left, .st--right { align-content: stretch; grid-template-rows: 1fr auto auto 1fr; }
.st--left .st-kicker, .st--right .st-kicker { grid-row: 2; }
.st--left .st-title, .st--right .st-title { grid-row: 3; }
.st--left .st-body, .st--right .st-body { grid-row: 4; align-self: end; }
.st--hero { align-content: end; grid-template-rows: none; padding-bottom: 14vh; }
.st--hero > * { grid-row: auto !important; }

.st-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--mint); margin-bottom: 22px; text-shadow: 0 0 18px rgba(189, 239, 217, 0.4), 0 1px 12px rgba(0, 0, 0, 0.6); }
.st-kicker svg { width: 13px; height: 13px; }
.st-title { font-weight: 300; color: var(--ink); font-size: clamp(30px, 4vw, 64px); line-height: 1.06; letter-spacing: -0.015em; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45); }
.st-title em { font-style: normal; color: var(--mint); }
.st-title--xl { font-size: clamp(34px, 5vw, 86px); line-height: 1.03; }
.st-title--xxl { font-size: clamp(42px, 7vw, 124px); line-height: 1; letter-spacing: -0.02em; }
.st-title--dim .st-line:not(:last-child) { color: var(--ink-muted); }
.st-line { display: block; white-space: nowrap; }
.st-word { display: inline-block; will-change: transform, opacity, filter; }
.st-kicker, .st-body, .st-col { will-change: transform, opacity, filter; }

.st-body { margin-top: 26px; max-width: 470px; }
.st-body p { color: var(--ink-dim); font-size: 18px; line-height: 1.55; text-shadow: 0 1px 20px rgba(0, 0, 0, 0.6); }
.st--hero .st-body p { font-size: clamp(17px, 1.4vw, 20px); color: var(--ink); }
.st-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.st--center .st-cta { justify-content: center; }
.st-also { margin-top: 36px; font-size: 13px; color: var(--mint); opacity: 0.7; }
.st-also a { color: inherit; text-underline-offset: 3px; }
.st-also a:hover { opacity: 1; color: #fff; }
.st-note { margin-top: 18px; font-size: 12px !important; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted) !important; }

/* columns: credits at the foot of the frame, hairlines between them, no boxes */
/* columns stop short of the chapter index on the right */
.has-cols .st-body { max-width: none; width: min(1180px, calc(100vw - 2 * var(--edge) - 190px)); }
.st-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 30px; text-align: left; }
.st-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-col { padding: 2px 28px 4px; border-left: 1px solid rgba(255, 255, 255, 0.16); }
.st-cols--4 > .st-col:nth-child(4n + 1), .st-cols--3 > .st-col:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
.st-col-k { font-size: 11px !important; font-weight: 700; letter-spacing: 0.22em; color: var(--mint) !important; }
.st-col h3 { margin: 10px 0 6px; font-weight: 500; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; color: #fff; }
.st-body .st-col p { font-size: 14.5px; line-height: 1.55; color: rgba(235, 245, 241, 0.68); text-shadow: none; }
.st-shots figure { padding-top: 0; }
.st-shots img { border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.12); }
.st-shots figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-dim); }
.st-lead { border: 0 !important; padding: 0 !important; max-width: 520px; font-size: 18px !important; color: var(--ink-dim) !important; }
.st-facts { display: flex; gap: 44px; margin: 26px 0 34px; padding: 18px 0 0 !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.18) !important; width: max-content; }
.st-facts b { display: block; font-weight: 300; font-size: clamp(32px, 3vw, 46px); line-height: 1; }
.st-facts span { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 6px; }
.st-cols--wins h3 { font-weight: 300; font-size: clamp(28px, 2.6vw, 40px); color: var(--mint); }
.st-nums { margin-top: 30px; }
.st-nums b { font-weight: 300; font-size: clamp(46px, 4.6vw, 72px); line-height: 1; }
.st-nums small { font-size: 15px; color: var(--mint); margin-left: 6px; }

/* the shade behind the foot copy */
.veil { position: fixed; left: 0; right: 0; bottom: 0; height: 56vh; z-index: 2; pointer-events: none; opacity: var(--veil, 0); background: linear-gradient(to top, rgba(2, 6, 5, 0.88), rgba(2, 6, 5, 0.55) 34%, rgba(2, 6, 5, 0.18) 64%, transparent 92%); }

/* ---------- the chapter index, low on the right ---------- */
.tl { position: fixed; right: var(--edge); bottom: var(--foot); z-index: 21; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding: 12px 0 0 48px; }
:where(.tl button) { all: unset; cursor: pointer; }
.tl-item { --k: 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; height: 13px; }
.tl-item:focus-visible .tl-label { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.tl-label { font-size: 13px; line-height: 1; white-space: nowrap; color: rgba(245, 250, 248, 0.62); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); opacity: 0; transform: translateX(6px); transition: opacity .5s ease, transform .7s cubic-bezier(0.22, 1, 0.36, 1), color .4s ease; }
.tl-tick { display: block; height: 1px; width: calc(12px + var(--k) * 16px); background: rgb(189 239 217 / calc(0.3 + var(--k) * 0.65)); }
.tl-item.is-current .tl-label { opacity: 1; transform: none; color: #fff; }
.tl:hover .tl-label, .tl:focus-within .tl-label { opacity: 1; transform: none; }

.foot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--edge) var(--foot); font-size: 12px; font-weight: 700; letter-spacing: 0.3em; color: var(--ink-muted); }
.foot svg { width: 12px; height: 12px; color: var(--mint); }

/* ---------- flow: narrow screens, reduced motion, no script ---------- */
.flow .chapter, html:not(.js) .chapter { height: auto; min-height: 90vh; }
.flow .st, html:not(.js) .st { position: relative; inset: auto; visibility: visible; min-height: 90vh; padding: 110px var(--edge) 60px; background: linear-gradient(to bottom, transparent, rgba(2, 6, 5, 0.6) 22%, rgba(2, 6, 5, 0.6) 78%, transparent); }
.flow .st--left, .flow .st--right, .flow .st--top.has-cols { grid-template-rows: none; align-content: center; }
.flow .st > * { grid-row: auto !important; align-self: auto !important; max-width: 100%; min-width: 0; }
.flow .st--right { padding-right: var(--edge); }
.flow .st-line { white-space: normal; }
.flow .st-cols, html:not(.js) .st-cols { grid-template-columns: 1fr 1fr; }
.flow .st-col, .flow .st-cols > .st-col:nth-child(n) { border-left: 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.flow .has-cols .st-body { width: 100%; }
.flow .veil { display: none; }
.flow .tl { display: none; }
@media (max-width: 899.98px) { .nav-link { display: none; } .st-facts { gap: 28px; } }
@media (max-width: 520px) { .flow .st-cols { grid-template-columns: 1fr; } .st-shots { grid-template-columns: 1fr 1fr !important; } }

@media (prefers-reduced-motion: reduce) {
  .fx-grain, .sheen { animation: none; }
  .sheen { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- hero: a line of facts under the buttons ---------- */
.st-meta { display: flex; gap: 0; margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.16); width: max-content; max-width: 100%; }
.st-meta > div { padding: 0 28px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.st-meta > div:first-child { padding-left: 0; border-left: 0; }
.st-meta dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mint); }
.st-meta dd { font-size: 14px; color: var(--ink-dim); margin-top: 6px; }
.st--hero .st-body { max-width: 760px; }
.st--hero .st-title { margin-bottom: 4px; }

/* ---------- the platform: tabs on the left, one screen on the right ---------- */
.st--show .st-body { width: min(1240px, calc(100vw - 2 * var(--edge) - 190px)); }
.show { display: grid; grid-template-columns: minmax(240px, 0.36fr) 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; text-align: left; }
.st button { pointer-events: auto; }
.show-tabs { display: grid; gap: 4px; border: 0 !important; padding: 0 !important; }
.show-tab { all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; padding: 16px 16px 18px; border-radius: 14px; cursor: pointer; color: var(--ink-muted); transition: background .6s var(--ease), color .6s var(--ease); }
.show-tab:hover, .show-tab:focus-visible { background: rgba(255, 255, 255, 0.04); color: var(--ink-dim); }
.show-tab.is-on { background: rgba(189, 239, 217, 0.07); color: var(--ink); }
.show-n { grid-row: span 2; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--mint); padding-top: 4px; }
.show-tab b { font-weight: 500; font-size: 19px; letter-spacing: -0.01em; }
.show-tab > span:not(.show-n) { grid-column: 2; font-size: 13.5px; line-height: 1.5; margin-top: 6px; opacity: 0.45; transition: opacity .6s var(--ease), color .6s var(--ease); }
.show-tab.is-on > span:not(.show-n) { opacity: 1; color: var(--ink-dim); }
.show-bar { display: none; }
.show-tabs { position: relative; padding-left: 18px !important; }
.show-tabs::before, .show-tabs::after { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; }
.show-tabs::before { background: rgba(255, 255, 255, 0.08); }
.show-tabs::after { background: var(--mint); transform-origin: top; transform: scaleY(calc(0.06 + var(--prog, 0) * 0.94)); transition: transform .25s linear; }

.show-stage { perspective: 1600px; border: 0 !important; padding: 0 !important; pointer-events: auto; }
.show-frame {
  position: relative; aspect-ratio: 954 / 633; border-radius: 16px; padding: 10px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.3) inset;
  transform-style: preserve-3d; will-change: transform;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* a soft light that follows the pointer across the glass */
.show-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(600px circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, 0.09), transparent 45%); }
.show-shot { position: absolute; inset: 10px; margin: 0; opacity: 0; filter: blur(6px); transition: opacity 1s var(--ease), filter 1s var(--ease); pointer-events: none; }
.show-shot.is-on { opacity: 1; filter: none; pointer-events: auto; }
.show-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; border-radius: 8px; }
/* marks on the screen: a pulsing point that names what it sits on when pointed at */
.spot { all: unset; position: absolute; left: var(--x); top: var(--y); width: 22px; height: 22px; margin: -11px 0 0 -11px; cursor: pointer; }
.spot::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(189, 239, 217, 0.25), 0 2px 10px rgba(0, 0, 0, 0.4); }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--mint); animation: spot 2.4s var(--ease) infinite; }
.show-shot .spot:nth-of-type(2)::after { animation-delay: .8s; }
.show-shot .spot:nth-of-type(3)::after { animation-delay: 1.6s; }
@keyframes spot { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.spot span {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px); white-space: nowrap;
  padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--deep); background: var(--mint);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); opacity: 0; filter: blur(4px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .4s var(--ease), filter .3s var(--ease);
}
.spot:hover span, .spot:focus-visible span { opacity: 1; transform: translate(-50%, 0); filter: none; }
.flow .show { grid-template-columns: 1fr; }
.flow .show-tabs { grid-template-columns: 1fr 1fr; }
@media (max-width: 899.98px) { .spot span { white-space: normal; width: 160px; } }

/* the platform: a smaller title and tighter tabs, so the four views and the screen fit one screen */
.st--show { padding-top: 12vh; padding-bottom: 6vh; }
.st--show .st-title { font-size: clamp(30px, 3.6vw, 60px); }
.st--show .st-kicker { margin-bottom: 14px; }
.show-tab { padding: 11px 14px 12px; }
.show-tab b { font-size: 17px; }
.show-tab > span:not(.show-n) { font-size: 13px; margin-top: 3px; }
.show-frame { max-height: 62vh; aspect-ratio: auto; height: min(62vh, calc((100vw - 2 * var(--edge) - 190px) * 0.64 * 633 / 954)); }

/* the wordmark as the Sovryn site sets it: Kode Mono, capitals, tracked wide */
.nav-brand { font-family: 'Kode Mono', ui-monospace, monospace; font-weight: 500; font-size: 15px; letter-spacing: 0; text-transform: uppercase; }
.nav-brand .sheen { gap: 11px; }
.nav-word { letter-spacing: 0.34em; margin-right: -0.34em; }
.st-foot { margin-top: 28px; font-size: 11.5px !important; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted) !important; text-align: left; }
.st--hero .st-body > p { max-width: 560px; }

/* ---------- the case: words on the left, the live floor in a panel on the right ---------- */
.st--case { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto auto 1fr; column-gap: clamp(32px, 4vw, 72px); align-content: center; padding-right: clamp(190px, 16vw, 250px); }
.st--case > .st-kicker, .st--case > .st-title, .st--case > .st-body { grid-column: 1; }
.st--case .st-body { width: auto; }
.st--case .st-lead { font-size: 17px !important; }
.st--case .st-facts { margin: 22px 0 26px; }
.st-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
.st-cols--2 > .st-col:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
.st--case .st-cols--wins h3 { font-size: clamp(24px, 2vw, 32px); }
/* the panel is a window onto the scene: everything outside it is shaded down */
.twin {
  grid-column: 2; grid-row: 1 / span 3; align-self: center; position: relative;
  height: min(68vh, 640px); border-radius: 20px; pointer-events: none;
  border: 1px solid rgba(189, 239, 217, 0.28);
  box-shadow: 0 0 0 100vmax rgba(3, 9, 8, 0.72), 0 0 60px rgba(189, 239, 217, 0.08) inset;
  opacity: 0; transition: opacity 1s var(--ease);
}
.st--case.is-on .twin { opacity: 1; }
.twin::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(rgba(189, 239, 217, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(189, 239, 217, 0.05) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at center, transparent 55%, #000); mask-image: radial-gradient(ellipse at center, transparent 55%, #000); }
.twin-head { position: absolute; left: 18px; right: 18px; top: 14px; display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); }
.twin-live { display: inline-flex; align-items: center; gap: 8px; color: var(--mint); }
.twin-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.twin-tag { position: absolute; left: 0; top: 0; display: grid; gap: 2px; padding: 7px 10px 8px; margin: -66px 0 0 -14px; border-radius: 10px; background: rgba(4, 11, 10, 0.78); border: 1px solid rgba(189, 239, 217, 0.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; transition: opacity .4s; will-change: transform; }
.twin-tag::after { content: ""; position: absolute; left: 14px; top: 100%; width: 1px; height: 22px; background: linear-gradient(rgba(189, 239, 217, 0.5), transparent); }
.twin-tag b { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.twin-tag span { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.twin-tag span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.twin-tag .ok { color: var(--mint); }
.twin-tag .qa { color: #f2d48a; }
.flow .st--case { grid-template-columns: 1fr; }
.flow .twin { grid-column: 1; grid-row: auto; height: 60vh; margin-top: 28px; box-shadow: none; opacity: 1; }
/* the panel fills its column; the words sit above its shade */
.twin { justify-self: stretch; width: 100%; z-index: 0; }
.st--case > :not(.twin) { position: relative; z-index: 1; }
.twin-tags { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.twin-tag { margin: -40px 0 0 -12px; padding: 5px 9px; border-radius: 8px; }
.twin-tag::after { height: 16px; left: 12px; }
.twin-tag b { font-size: 11.5px; }
.twin-tag.is-qc { border-color: rgba(242, 212, 138, 0.5); }
.twin-tag.is-qc b { color: #f2d48a; }

/* ---------- soft focus behind the words ----------
   One layer: a blur of the scene and a shade, both masked to fade out away from the text, so the
   frame goes out of focus where the words sit and stays sharp where the machine is. Which side is
   set on <html data-soft> by the page as the chapters change. */
.soft {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  -webkit-backdrop-filter: blur(10px) saturate(0.85) brightness(0.8); backdrop-filter: blur(10px) saturate(0.85) brightness(0.8);
  background: var(--soft-bg, transparent);
  -webkit-mask-image: var(--soft-mask, none); mask-image: var(--soft-mask, none);
  opacity: 0; transition: opacity .8s var(--ease);
}
.is-ready .soft { opacity: 1; }
[data-soft="none"] .soft { opacity: 0; }
[data-soft="left"] {
  --soft-mask: linear-gradient(90deg, #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.35) 46%, transparent 60%);
  --soft-bg: linear-gradient(90deg, rgba(3,9,8,.55), rgba(3,9,8,.25) 45%, transparent 62%);
}
[data-soft="right"] {
  --soft-mask: linear-gradient(270deg, #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.35) 46%, transparent 60%);
  --soft-bg: linear-gradient(270deg, rgba(3,9,8,.55), rgba(3,9,8,.25) 45%, transparent 62%);
}
[data-soft="center"] {
  --soft-mask: radial-gradient(ellipse 55% 45% at 50% 52%, #000 0%, rgba(0,0,0,.7) 55%, transparent 100%);
  --soft-bg: radial-gradient(ellipse 55% 45% at 50% 52%, rgba(3,9,8,.5), transparent 100%);
}
/* columns of copy: soft across the foot, and behind the heading at the top left */
[data-soft="cols"] {
  --soft-mask: linear-gradient(0deg, #000 0%, rgba(0,0,0,.9) 24%, transparent 40%), radial-gradient(ellipse 36% 18% at 20% 27%, #000 30%, transparent 100%);
  --soft-bg: linear-gradient(0deg, rgba(3,9,8,.7), rgba(3,9,8,.4) 26%, transparent 42%), radial-gradient(ellipse 36% 18% at 20% 27%, rgba(3,9,8,.4), transparent 100%);
}
.flow .soft { display: none; }
@media (prefers-reduced-motion: reduce) { .soft { transition: none; } }
/* no rail beside the views; the current view's own bar fills until the next one */
.show-tabs::before, .show-tabs::after { display: none; }
.show-tabs { padding-left: 0 !important; }
.show-tab .show-bar { display: block; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); opacity: 0; overflow: hidden; }
.show-tab.is-on .show-bar { opacity: 1; }
.show-tab .show-bar::after { content: ""; position: absolute; inset: 0; background: var(--mint); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--ease); }
.show-tab.is-on .show-bar::after { transform: scaleX(1); }

/* ---------- the case study in Limpahan's own colours ----------
   Their red #BD271B, ice-blue type on near-black, slate graphite, Space Mono labels, Inter text and
   near-square corners, from limpahan.engineering. Only this chapter; the page around it stays Sovryn. */
.st--case { --l-red: #bd271b; --l-red-bright: #dd4236; --l-ice: #b4d2f0; --l-head: #dcf0ff; --l-ink: rgba(200, 216, 228, 0.72); --l-line: rgba(180, 210, 240, 0.14); }
.st--case .st-kicker { font-family: "Space Mono", ui-monospace, monospace; font-weight: 400; letter-spacing: 0.14em; color: var(--l-ice); text-shadow: none; }
.case-logo { width: 28px; height: 28px; border-radius: 50%; margin-right: 4px; }
.st--case .st-title { color: var(--l-head); }
.st--case .st-title em { color: var(--l-red-bright); }
.st--case .st-lead { font-family: "Inter", var(--sans); font-weight: 300; color: var(--l-ink) !important; }
.st--case .st-facts { border-top-color: var(--l-line) !important; }
.st--case .st-facts b { color: var(--l-head); }
.st--case .st-facts span { font-family: "Space Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(180, 210, 240, 0.5); }
.st--case .st-col { border-left-color: var(--l-line); }
.st--case .st-cols--wins h3 { color: var(--l-ice); }
.st--case .st-body .st-col p { font-family: "Inter", var(--sans); font-weight: 300; color: var(--l-ink); }
.st--case .twin { border-radius: 2px; border-color: rgba(189, 39, 27, 0.45); box-shadow: 0 0 0 100vmax rgba(6, 8, 11, 0.74), 0 0 60px rgba(189, 39, 27, 0.08) inset; }
.st--case .twin::before { background-image: linear-gradient(rgba(180, 210, 240, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 210, 240, 0.04) 1px, transparent 1px); }
.st--case .twin-head { font-family: "Space Mono", ui-monospace, monospace; font-weight: 400; letter-spacing: 0.12em; color: rgba(180, 210, 240, 0.5); }
.st--case .twin-live { color: var(--l-ice); }
.st--case .twin-live i { background: var(--l-red); box-shadow: 0 0 10px var(--l-red); }
.st--case .twin-tag { border-radius: 1px; background: rgba(10, 12, 16, 0.85); border-color: rgba(180, 210, 240, 0.18); }
.st--case .twin-tag b { font-family: "Inter", var(--sans); color: #c8d8e4; }
.st--case .twin-tag::after { background: linear-gradient(rgba(180, 210, 240, 0.5), transparent); }
.st--case .twin-tag.is-qc { border-color: rgba(189, 39, 27, 0.7); }
.st--case .twin-tag.is-qc b { color: var(--l-red-bright); }

/* ---------- the chapter index stands on the chat launcher ----------
   The launcher keeps its own corner; the index moves into that corner with it, on the same axis:
   every tick is centred in a slot the launcher's width, so the column of ticks reads as one line
   rising out of the button. --svc-corner is the launcher's inset (assets/chat.css). */
:root { --svc-corner: clamp(16px, 3vw, 32px); --svc-size: 56px; }
.tl { right: var(--svc-corner); bottom: calc(var(--svc-corner) + var(--svc-size) + 22px); gap: 9px; }
.tl-tick { margin: 0 calc((var(--svc-size) - 12px - var(--k) * 16px) / 2); }

/* ============================================================ phones and narrow windows
   The words flow down the page over the same moving scene. Each chapter is a screen: the
   machine rides high in the frame, the words sit at the foot on a shade, and arrive out of a blur
   as they come into view. Long chapters lay their columns out for a thumb. */
.flow { --edge: clamp(20px, 6vw, 40px); }
.flow .nav { padding: 18px var(--edge); padding-top: max(18px, env(safe-area-inset-top)); }
.flow .nav-cta { padding: 8px 13px; font-size: 12.5px; }
.flow .nav-brand { font-size: 13px; }
.flow .nav-blur { opacity: 1; height: 96px; }
.flow .loader { top: 72px; }
.flow .stage { height: 100lvh; }

.flow .chapter { min-height: 0; height: auto; }
.flow .st {
  position: relative; inset: auto; visibility: visible; pointer-events: auto;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left;
  padding: 96px var(--edge) calc(var(--foot) + var(--svc-size) + 28px);
  background: linear-gradient(to bottom, transparent 0 38%, rgba(2, 6, 5, 0.62) 62%, rgba(2, 6, 5, 0.86) 100%);
}
.flow .st--center { align-items: flex-start; text-align: left; }
.flow .st--center .st-cta { justify-content: flex-start; }
.flow .st--right { padding-right: var(--edge); }
.flow .st.has-cols { padding-top: 112px; background: linear-gradient(to bottom, transparent, rgba(2, 6, 5, 0.66) 30%, rgba(2, 6, 5, 0.82) 70%, rgba(2, 6, 5, 0.86)); }
.flow .st > * { max-width: 100%; min-width: 0; }
.flow .st-line { white-space: normal; }
.flow .st-kicker { font-size: 11px; letter-spacing: 0.22em; margin-bottom: 16px; }
.flow .st-title { font-size: clamp(30px, 8.6vw, 44px); line-height: 1.06; }
.flow .st-title--xxl { font-size: clamp(36px, 10.8vw, 56px); line-height: 1.02; }
.flow .st-body { margin-top: 18px; max-width: 34em; width: 100%; }
.flow .st-body p { font-size: 16px; line-height: 1.55; }
.flow .st--hero .st-body p { font-size: 16.5px; }
.flow .st-cta { margin-top: 22px; }
.flow .btn { padding: 14px 20px; }
.flow .veil, .flow .soft, .flow .tl { display: none; }

/* the words arrive once, rising out of a blur, one after another */
.flow .st > * { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease), filter 0.9s var(--ease); }
.flow .st > :nth-child(2) { transition-delay: 0.08s; }
.flow .st > :nth-child(3) { transition-delay: 0.16s; }
.flow .st > :nth-child(4) { transition-delay: 0.24s; }
.flow .st.is-in > * { opacity: 1; transform: none; filter: none; }

/* hero: the facts as a short list, a hairline between each */
.flow .st--hero { padding-bottom: calc(var(--foot) + var(--svc-size) + 20px); }
.flow .st--hero .st-title--xxl { font-size: clamp(34px, 10vw, 54px); }
.flow .st--hero .st-cta { flex-wrap: nowrap; gap: 8px; }
.flow .st--hero .btn { flex: 1 1 auto; justify-content: center; padding: 13px 12px; font-size: 13.5px; white-space: nowrap; }
.flow .st--hero .st-meta { margin-top: 22px; }
.flow .st--hero .st-meta > div { padding: 9px 0; }
.flow .st-meta { display: grid; width: 100%; margin-top: 28px; padding-top: 0; border-top: 0; }
.flow .st-meta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.flow .st-meta dd { margin-top: 0; font-size: 13.5px; text-align: right; }
.flow .st-meta dt { font-size: 10px; flex: none; }

/* columns: one under another, a hairline above each */
.flow .has-cols .st-body { width: 100%; }
.flow .st-cols, .flow .st-cols--3, .flow .st-cols--2 { grid-template-columns: 1fr; row-gap: 0; }
.flow .st-col, .flow .st-cols > .st-col:nth-child(n) { border-left: 0; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.flow .st-col h3 { font-size: 18px; margin: 6px 0 4px; }
.flow .st-body .st-col p { font-size: 14px; }
/* the modules: a row of cards under the thumb, bleeding off the edge */
.flow .st-cols--4 {
  display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(76vw, 300px); gap: 12px;
  margin: 8px calc(-1 * var(--edge)) 0; padding: 4px var(--edge) 8px; scroll-padding-inline: var(--edge);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.flow .st-cols--4::-webkit-scrollbar { display: none; }
.flow .st-cols--4 > .st-col:nth-child(n) { scroll-snap-align: start; padding: 18px 18px 20px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(6, 16, 14, 0.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* the numbers stay in a row */
.flow .st-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; margin-top: 18px; }
.flow .st-nums .st-col:nth-child(n) { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 14px; }
.flow .st-nums b { font-size: 38px; }
.flow .st-nums small { font-size: 12px; margin-left: 3px; }
.flow .st-nums p { font-size: 12.5px !important; margin-top: 6px; }

/* the platform: the screen first, then the four views as a list; only the open one says more */
.flow .st--show .st-body { width: 100%; }
.flow .show { display: flex; flex-direction: column-reverse; gap: 18px; }
.flow .show-stage { width: 100%; }
.flow .show-frame { height: auto; max-height: none; aspect-ratio: 954 / 633; padding: 6px; border-radius: 14px; transform: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.flow .show-shot { inset: 6px; }
.flow .show-shot img { border-radius: 9px; }
.flow .show-tabs { display: grid; grid-template-columns: 1fr; gap: 2px; }
.flow .show-tab { padding: 12px 12px 14px; border-radius: 12px; grid-template-columns: 30px 1fr; }
.flow .show-tab b { font-size: 16px; }
.flow .show-tab > span:not(.show-n) { display: none; }
.flow .show-tab.is-on > span:not(.show-n) { display: block; font-size: 13.5px; }
.flow .show-tab .show-bar { left: 12px; right: 12px; bottom: 4px; }
.flow .spot { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.flow .spot::before { inset: 10px; }
.flow .spot span { width: max-content; max-width: 58vw; white-space: normal; font-size: 12.5px; padding: 7px 10px; }
.flow .spot.is-r span { left: auto; right: -6px; transform: translate(0, 6px); }
.flow .spot.is-l span { left: -6px; transform: translate(0, 6px); }
.spot:focus span { opacity: 1; transform: translate(-50%, 0); filter: none; }
.flow .spot.is-r:focus span, .flow .spot.is-l:focus span { transform: none; }

/* the case: the words, then the floor in its panel, a window onto the scene */
.flow .st--case { display: flex; padding-right: var(--edge); background: linear-gradient(to bottom, transparent, rgba(6, 8, 11, 0.7) 12%, rgba(6, 8, 11, 0.7) 50%, transparent 66%); }
.flow .st--case .st-facts { gap: 26px; width: 100%; }
.flow .st--case .st-facts b { font-size: 34px; }
.flow .st--case .st-cols--wins { grid-template-columns: 1fr 1fr; column-gap: 16px; }
.flow .st--case .st-cols--wins > .st-col:nth-child(n) { padding: 14px 0; }
.flow .st--case .st-cols--wins h3 { font-size: 24px; }
.flow .twin { width: 100%; height: min(52svh, 460px); margin-top: 26px; box-shadow: 0 0 60px rgba(189, 39, 27, 0.08) inset; }
.flow .st--case .twin { box-shadow: 0 0 60px rgba(189, 39, 27, 0.08) inset; }
.flow .twin-head { flex-direction: column; gap: 4px; font-size: 10px; }

@media (prefers-reduced-motion: reduce) {
  .flow .st > * { opacity: 1; transform: none; filter: none; transition: none; }
}

.flow .twin-tag { margin: -30px 0 0 -10px; padding: 3px 7px; }
.flow .twin-tag b { font-size: 10px; }
.flow .twin-tag::after { height: 12px; left: 10px; }