/* Operating model: pinned, scroll-driven sequence (desktop). Stacked steps on small screens and with reduced motion. */
.model { position: relative; height: calc(var(--steps, 7) * 60vh + 100vh); height: calc(var(--steps, 7) * 60svh + 100svh); box-shadow: inset 0 1px 0 var(--rule); }
.om-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding: 0 var(--gutter); }

.om-copy { grid-column: 1 / span 5; display: flex; flex-direction: column; }
.om-label { font-size: 15px; color: var(--ink-3); margin-bottom: 40px; }
.om-steps { position: relative; min-height: 400px; list-style: none; }
.om-step { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.om-step.is-active { opacity: 1; transform: none; pointer-events: auto; transition: opacity .45s ease .12s, transform .45s ease .12s; }
.om-kicker { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); margin-bottom: 22px; }
.om-kicker::before { content: ""; width: 20px; height: 2px; background: var(--milk); }
.om-step--studios .om-kicker::before { background: var(--studios); }
.om-step--growth .om-kicker::before { background: var(--growth); }
.om-step--acq .om-kicker::before { background: var(--acq); }
.om-title { font-family: var(--display); font-stretch: 106%; font-weight: 400; font-size: clamp(44px, 4.8vw, 80px); line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; max-width: 12.5ch; }
.om-body { color: var(--ink-2); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; max-width: 25em; margin-top: 26px; }
.om-progress { display: flex; gap: 8px; margin-top: 48px; }
.om-progress span { width: 28px; height: 2px; background: var(--rule-2); transition: background .3s; }
.om-progress span.is-done { background: var(--milk); }

.om-visual { grid-column: 7 / span 6; display: flex; flex-direction: column; align-items: center; }
.om-svg { width: 100%; max-width: 560px; max-height: 74vh; max-height: 74svh; overflow: visible; }
.om-group rect { fill: var(--obsidian); stroke: rgba(250, 250, 248, 0.4); stroke-width: 1; transition: stroke .4s; }
.om-group text { fill: var(--milk); font-family: var(--display); font-stretch: 112%; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
.om-spine-base { stroke: rgba(250, 250, 248, 0.1); stroke-width: 1.5; }
.om-spine { stroke: var(--milk); stroke-width: 2; stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: 1; transition: opacity .15s linear; }
.om-arc { fill: none; stroke: var(--milk); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.om-box { fill: var(--obsidian); stroke: rgba(250, 250, 248, 0.16); stroke-width: 1; transition: stroke .4s; }
.om-bar { opacity: 0; transition: opacity .4s; }
.om-node--studios .om-bar { fill: var(--studios); }
.om-node--growth .om-bar { fill: var(--growth); }
.om-node--acq .om-bar { fill: var(--acq); }
.om-verb { font-family: var(--display); font-stretch: 106%; font-size: 40px; letter-spacing: -0.04em; fill: rgba(250, 250, 248, 0.32); transition: fill .4s; }
.om-name { font-family: var(--text); font-size: 15px; fill: rgba(250, 250, 248, 0.38); transition: fill .4s; }
/* Active engine: unmistakable. Completed engines: quietly marked. */
.om-node.is-done .om-bar { opacity: 0.4; }
.om-node.is-done .om-verb { fill: rgba(250, 250, 248, 0.58); }
.om-node.is-done .om-name { fill: rgba(250, 250, 248, 0.5); }
.om-node.is-active .om-bar { opacity: 1; }
.om-node.is-active .om-verb { fill: var(--milk); }
.om-node.is-active .om-name { fill: rgba(250, 250, 248, 0.8); }
.om-node--studios.is-active .om-box { stroke: var(--studios); }
.om-node--growth.is-active .om-box { stroke: var(--growth); }
.om-node--acq.is-active .om-box { stroke: var(--acq); }
.om-node--studios.is-done .om-box { stroke: rgba(255, 66, 0, 0.28); }
.om-node--growth.is-done .om-box { stroke: rgba(122, 244, 208, 0.28); }
.om-node--acq.is-done .om-box { stroke: rgba(106, 75, 242, 0.4); }
.model[data-step="4"] .om-group rect, .model[data-step="5"] .om-group rect, .model[data-step="6"] .om-group rect { stroke: var(--milk); }

.om-shared { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%; max-width: 560px; margin-top: 32px; padding-top: 18px; box-shadow: inset 0 1px 0 var(--rule-2); list-style: none; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.om-shared li { font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.model[data-step="5"] .om-shared, .model[data-step="6"] .om-shared { opacity: 1; transform: none; }

/* Reduced motion on desktop: two columns, steps listed, diagram held in its final state */
@media (min-width: 961px) and (prefers-reduced-motion: reduce) {
  .model { height: auto; padding: 120px var(--gutter); }
  .om-stage { display: grid !important; align-items: start; }
  .om-copy { grid-column: 1 / span 5; }
  .om-visual { grid-column: 7 / span 6; position: sticky; top: 64px; margin-top: 0 !important; padding-top: 0 !important; box-shadow: none !important; }
}

/* Fallback: stacked steps, final diagram shown once */
@media (prefers-reduced-motion: reduce) {
  .model { height: auto; padding: 72px var(--gutter) 80px; }
  .om-stage { position: static; height: auto; display: block; padding: 0; }
  .om-label { margin-bottom: 24px; }
  .om-steps { min-height: 0; }
  .om-step { position: static; opacity: 1; transform: none; pointer-events: auto; padding: 24px 0; box-shadow: inset 0 1px 0 var(--rule); transition: none; }
  .om-step:first-child { box-shadow: none; padding-top: 0; }
  .om-title { font-size: 40px; max-width: none; }
  .om-step:not(:first-child) .om-title { font-size: 30px; }
  .om-body { margin-top: 12px; font-size: 16px; }
  .om-kicker { margin-bottom: 12px; }
  .om-progress { display: none; }
  .om-visual { margin-top: 32px; padding-top: 32px; box-shadow: inset 0 1px 0 var(--rule); }
  .om-svg { max-height: none; }
  .om-spine { opacity: 0 !important; }
  .om-shared { opacity: 1; transform: none; grid-template-columns: 1fr; gap: 10px; transition: none; }
}
/* Phones: the diagram scales to ~60%, so drop the small engine names (they are in the steps above) and enlarge the rest */
@media (max-width: 600px) {
  .om-name { display: none; }
  .om-verb { font-size: 46px; }
  .om-group text { font-size: 19px; letter-spacing: 0.02em; }
}

/* ---------- Model diagram styling ---------- */
.om-label { display: none; }
.om-copy { --mono: "JetBrains Mono", ui-monospace, monospace; }
.om-kicker { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 22px; }
.om-kicker { display: block; }
.om-kicker::before { display: none; }
.om-step--studios .om-kicker { color: var(--studios); }
.om-step--growth .om-kicker { color: var(--growth); }
.om-step--acq .om-kicker { color: var(--acq); }
.om-title { font-family: var(--display); font-stretch: 100%; font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 3.1vw, 48px); line-height: 1; letter-spacing: -0.015em; max-width: none; white-space: nowrap; }
.om-step--studios .om-title, .om-step--growth .om-title, .om-step--acq .om-title { font-size: clamp(80px, 9vw, 140px); line-height: 0.9; letter-spacing: -0.03em; }
.om-step--studios .om-title { color: var(--studios); }
.om-step--growth .om-title { color: var(--growth); }
.om-step--acq .om-title { color: var(--acq); }
.om-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; list-style: none; }
.om-tags li { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); padding: 6px 10px; box-shadow: inset 0 0 0 1px var(--rule-2); }
.om-body { font-size: clamp(16px, 1.2vw, 18px); margin-top: 22px; }
.om-steps { min-height: 430px; }

/* progress dashes take the current engine's colour */
.om-progress span { width: 22px; }
.model[data-step="1"] .om-progress span.is-done { background: var(--studios); }
.model[data-step="2"] .om-progress span.is-done { background: var(--growth); }
.model[data-step="3"] .om-progress span.is-done { background: var(--acq); }

/* diagram: slim technical labels */
.om-svg { max-width: 470px; }
.om-group text { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 14px; letter-spacing: 0.2em; }
.om-num { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; fill: rgba(250, 250, 248, 0.32); }
.om-name { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 17px; letter-spacing: 0.16em; text-transform: uppercase; fill: rgba(250, 250, 248, 0.38); transition: fill .4s; }
.om-verb { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; fill: rgba(250, 250, 248, 0.3); }
.om-node.is-active .om-name { fill: var(--milk); }
.om-node.is-active .om-num { fill: rgba(250, 250, 248, 0.6); }
.om-node--studios.is-active .om-verb { fill: var(--studios); }
.om-node--growth.is-active .om-verb { fill: var(--growth); }
.om-node--acq.is-active .om-verb { fill: var(--acq); }
.om-node.is-done .om-verb { fill: rgba(250, 250, 248, 0.45); }

/* "what compounds": the compounding assets appear inside the diagram */
.om-assets text { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; fill: var(--milk); }
.om-assets text:nth-child(even) { fill: rgba(250, 250, 248, 0.6); }
.om-assets { opacity: 0; transition: opacity .5s ease; }
.om-node, .om-spine-base { transition: opacity .5s ease; }
.model[data-step="5"] .om-assets { opacity: 1; }
.model[data-step="5"] .om-node, .model[data-step="5"] .om-spine-base { opacity: 0; }
.om-shared { display: none; }

@media (prefers-reduced-motion: reduce) {
  .om-step:not(:first-child) .om-title { font-size: 34px; }
  .om-step--studios .om-title, .om-step--growth .om-title, .om-step--acq .om-title { font-size: 64px !important; }
  .om-title { font-size: 34px; white-space: normal; }
  .om-shared { display: flex; flex-wrap: wrap; gap: 8px; }
  .om-shared li { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; box-shadow: inset 0 0 0 1px var(--rule-2); }
  .om-shared li::before { display: none; }
}
@media (max-width: 600px) {
  .om-name { display: inline; font-size: 24px; }
  .om-verb { font-size: 18px; }
  .om-num { font-size: 16px; }
  .om-group text { font-size: 18px; letter-spacing: 0.12em; }
}

/* ---------- Polish ---------- */
.om-kicker { font-size: 13px; }
.om-tags { gap: 10px; }
.om-tags li { font-size: 13px; padding: 7px 12px; border-radius: 6px; background: rgba(250, 250, 248, 0.035); box-shadow: inset 0 0 0 1px rgba(250, 250, 248, 0.16); }
.om-step--studios .om-tags li { box-shadow: inset 0 0 0 1px rgba(255, 66, 0, 0.32); }
.om-step--growth .om-tags li { box-shadow: inset 0 0 0 1px rgba(122, 244, 208, 0.3); }
.om-step--acq .om-tags li { box-shadow: inset 0 0 0 1px rgba(106, 75, 242, 0.45); }
.om-step--studios .om-title { text-shadow: 0 0 60px rgba(255, 66, 0, 0.28); }
.om-step--growth .om-title { text-shadow: 0 0 60px rgba(122, 244, 208, 0.22); }
.om-step--acq .om-title { text-shadow: 0 0 60px rgba(106, 75, 242, 0.35); }
.om-body { color: rgba(250, 250, 248, 0.72); max-width: 28em; }
.om-progress { gap: 6px; }
.om-progress span { height: 2px; border-radius: 2px; transition: background .4s ease; }

/* a soft halo of the current engine's colour behind the diagram */
.om-visual { position: relative; }
.om-visual::before { content: ""; position: absolute; inset: 6% 2%; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: 0; transition: opacity .7s ease, background .7s ease; }
.model[data-step="1"] .om-visual::before { background: rgba(255, 66, 0, 0.16); opacity: 1; }
.model[data-step="2"] .om-visual::before { background: rgba(122, 244, 208, 0.12); opacity: 1; }
.model[data-step="3"] .om-visual::before { background: rgba(106, 75, 242, 0.2); opacity: 1; }
.model[data-step="4"] .om-visual::before, .model[data-step="5"] .om-visual::before, .model[data-step="6"] .om-visual::before { background: rgba(250, 250, 248, 0.06); opacity: 1; }

/* diagram finish: softer frames, glowing active box and line */
.om-group rect { fill: rgba(11, 11, 12, 0.9); stroke: rgba(250, 250, 248, 0.5); }
.om-box { fill: rgba(11, 11, 12, 0.88); stroke: rgba(250, 250, 248, 0.12); }
.om-spine { filter: drop-shadow(0 0 6px currentColor); }
.om-node--studios.is-active .om-box { filter: drop-shadow(0 0 14px rgba(255, 66, 0, 0.45)); }
.om-node--growth.is-active .om-box { filter: drop-shadow(0 0 14px rgba(122, 244, 208, 0.35)); }
.om-node--acq.is-active .om-box { filter: drop-shadow(0 0 14px rgba(106, 75, 242, 0.55)); }
.model[data-step="6"] .om-node .om-box { filter: none; }
.om-arc { stroke: rgba(250, 250, 248, 0.85); filter: drop-shadow(0 0 5px rgba(250, 250, 248, 0.35)); }
.om-num { font-size: 13px; }
.om-assets text { font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .om-visual::before { transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .om-shared li { font-size: 13px; border-radius: 6px; }
}


/* ---------- Phone: the same pinned animation, statement on top, diagram below ---------- */
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  .model { height: calc(var(--steps, 7) * 60vh + 100vh); }
  .om-stage { display: flex; flex-direction: column; justify-content: center; gap: 18px; height: 100svh; padding: 24px var(--gutter); }
  .om-copy, .om-visual { width: 100%; }
  .om-steps { min-height: 268px; }
  .om-kicker { font-size: 13px; margin-bottom: 12px; }
  .om-title { font-size: 30px; white-space: normal; line-height: 1.02; }
  .om-step--studios .om-title, .om-step--growth .om-title, .om-step--acq .om-title { font-size: 66px; }
  .om-tags { gap: 6px; margin-top: 16px; }
  .om-tags li { font-size: 13px; padding: 5px 9px; }
  .om-body { font-size: 15px; margin-top: 14px; }
  .om-progress { margin-top: 14px; }
  .om-visual { align-items: center; }
  .om-svg { max-height: 40svh; }
  .om-visual::before { inset: 0 6%; filter: blur(50px); }
}
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .om-name { font-size: 24px; letter-spacing: 0.06em; }
  .om-verb { font-size: 20px; }
  .om-num { font-size: 18px; }
  .om-group text { font-size: 20px; }
  .om-assets text { font-size: 25px; letter-spacing: 0.12em; }
}

/* Final scene: the whole model settles back to black and white, no engine colours */
.model[data-step="6"] .om-node .om-box { stroke: rgba(250, 250, 248, 0.3); filter: none; }
.model[data-step="6"] .om-node .om-bar { fill: rgba(250, 250, 248, 0.45); opacity: 1; }
.model[data-step="6"] .om-node .om-verb { fill: rgba(250, 250, 248, 0.6); }
.model[data-step="6"] .om-node .om-name { fill: var(--milk); }
.model[data-step="6"] .om-progress span.is-done { background: var(--milk); }
.model[data-step="6"] .om-visual::before { background: rgba(250, 250, 248, 0.06); }
.om-node .om-box, .om-node .om-bar, .om-node .om-verb { transition: stroke .6s ease, fill .6s ease; }

/* Phones: no live filters (iPhone Safari redraws them every scroll frame); the glow behind the diagram is a plain soft gradient */
@media (max-width: 860px) {
  .om-spine, .om-arc, .om-node .om-box, .om-node--studios.is-active .om-box, .om-node--growth.is-active .om-box, .om-node--acq.is-active .om-box { filter: none; }
  .om-visual::before { filter: none; inset: -4% 0; background: none; }
  .model[data-step] .om-visual::before { background: none; }
  .model[data-step="1"] .om-visual::before { background: radial-gradient(closest-side, rgba(255, 66, 0, 0.14), transparent); }
  .model[data-step="2"] .om-visual::before { background: radial-gradient(closest-side, rgba(122, 244, 208, 0.10), transparent); }
  .model[data-step="3"] .om-visual::before { background: radial-gradient(closest-side, rgba(106, 75, 242, 0.18), transparent); }
}