/* OtherLine Studio — Forest Protocol */
:root {
  --forest-black: #08100d;
  --pine-graphite: #17221d;
  --sage-steel: #78877f;
  --chalk: #f1f3ef;
  --mineral-green: #5d9678;
  --mist-sage: #b7cdbf;
  --font-display: "Sora", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: clamp(2rem, 4vw, 4rem);
  --space-xl: clamp(5rem, 10vw, 10rem);
  --radius-sm: .35rem;
  --radius-md: .75rem;
  --radius-lg: 1.25rem;
  --duration-fast: 160ms;
  --duration-normal: 360ms;
  --duration-slow: 900ms;
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-cinematic: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --shell: min(1280px, 92%);
  --nav-height: 64px;
  --scene-safe-top: clamp(7.75rem, 14vh, 9rem);
}

html[data-theme="dark"] {
  --color-background: #08100d;
  --color-background-alt: #0d1712;
  --color-surface: #121d18;
  --color-surface-elevated: #17221d;
  --color-surface-hover: #1d2b24;
  --color-text-primary: #f1f3ef;
  --color-text-secondary: #b7c0ba;
  --color-text-muted: #78877f;
  --color-accent: #6ba485;
  --color-accent-hover: #83b99c;
  --color-accent-soft: rgba(93, 150, 120, .14);
  --color-accent-contrast: #08100d;
  --color-border: rgba(183, 205, 191, .14);
  --color-border-strong: rgba(183, 205, 191, .32);
  --color-focus: #b7cdbf;
  --color-success: #72aa8b;
  --color-warning: #c9a96b;
  --color-shadow: rgba(0, 0, 0, .32);
  --color-overlay: rgba(4, 9, 7, .78);
  --color-nav: rgba(8, 16, 13, .82);
  --color-line: rgba(183, 205, 191, .16);
  --color-node: #5d9678;
  --color-glow: rgba(93, 150, 120, .13);
  --color-selection: rgba(93, 150, 120, .35);
  --logo-symbol: var(--mist-sage);
  --logo-line-secondary: rgba(120, 135, 127, .34);
  --logo-connection: var(--mineral-green);
  --section-deep: #08100d;
  --section-deep-surface: #121d18;
  --section-deep-text: #f1f3ef;
  --section-deep-muted: #8d9b94;
  --manifest-bg: #dfe7e1;
  --manifest-text: #08100d;
}

html[data-theme="light"] {
  --color-background: #e9eee9;
  --color-background-alt: #dfe7e1;
  --color-surface: #f1f3ef;
  --color-surface-elevated: #f6f7f3;
  --color-surface-hover: #d7e3da;
  --color-text-primary: #08100d;
  --color-text-secondary: #34423b;
  --color-text-muted: #66746d;
  --color-accent: #477c61;
  --color-accent-hover: #396b52;
  --color-accent-soft: rgba(71, 124, 97, .12);
  --color-accent-contrast: #f1f3ef;
  --color-border: rgba(23, 34, 29, .14);
  --color-border-strong: rgba(23, 34, 29, .3);
  --color-focus: #315f49;
  --color-success: #477c61;
  --color-warning: #8b6a2e;
  --color-shadow: rgba(8, 16, 13, .12);
  --color-overlay: rgba(8, 16, 13, .72);
  --color-nav: rgba(233, 238, 233, .86);
  --color-line: rgba(23, 34, 29, .14);
  --color-node: #477c61;
  --color-glow: rgba(93, 150, 120, .1);
  --color-selection: rgba(93, 150, 120, .25);
  --logo-symbol: var(--forest-black);
  --logo-line-secondary: rgba(23, 34, 29, .24);
  --logo-connection: var(--mineral-green);
  --section-deep: #0b1511;
  --section-deep-surface: #15221c;
  --section-deep-text: #f1f3ef;
  --section-deep-muted: #91a097;
  --manifest-bg: #17221d;
  --manifest-text: #f1f3ef;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; background: var(--color-background); }
body { margin: 0; background: var(--color-background); color: var(--color-text-primary); font-family: var(--font-body); font-size: 16px; line-height: 1.6; text-rendering: optimizeLegibility; transition: background-color var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard); }
body.menu-open { overflow: hidden; }
::selection { background: var(--color-selection); color: var(--color-text-primary); }
button, input, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.shell { width: var(--shell); margin-inline: auto; }
.scene { position: relative; isolation: isolate; }
.scene-dark { background: var(--section-deep); color: var(--section-deep-text); }
.skip-link { position: fixed; top: .8rem; left: .8rem; z-index: 1000; padding: .8rem 1rem; background: var(--color-accent); color: var(--color-accent-contrast); transform: translateY(-160%); transition: transform var(--duration-fast) var(--ease-out); }
.skip-link:focus { transform: translateY(0); }
.noscript { position: fixed; z-index: 1000; bottom: 1rem; left: 50%; translate: -50%; width: min(680px, calc(100% - 2rem)); padding: 1rem; background: #c9a96b; color: #08100d; border-radius: var(--radius-sm); }
.no-js .reveal-on-scroll { opacity: 1; transform: none; }
.no-js-nav { position: relative; z-index: 5; width: var(--shell); margin: 0 auto; padding-top: 6rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: var(--color-text-secondary); font-size: .78rem; }
.no-js-nav a { min-height: 44px; display: inline-flex; align-items: center; }

.page-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 1000; background: transparent; }
.page-progress span { display: block; width: 100%; height: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left; }
.cursor-halo { display: none; position: fixed; z-index: 1; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, var(--color-glow), transparent 68%); pointer-events: none; translate: -50% -50%; }

.site-header { position: fixed; z-index: 100; inset: max(1.1rem, env(safe-area-inset-top)) max(1rem, 2vw) auto; height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 0 1rem 0 1.15rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-nav); backdrop-filter: blur(18px); box-shadow: 0 10px 35px transparent; transition: transform var(--duration-normal) var(--ease-standard), background-color var(--duration-normal), border-color var(--duration-normal), box-shadow var(--duration-normal); }
.site-header.scrolled { box-shadow: 0 12px 40px var(--color-shadow); }
.symbol-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.otherline-symbol { display: block; width: 100%; height: auto; overflow: visible; color: inherit; fill: currentColor; }
.brand { min-width: 0; justify-self: start; display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-size: clamp(.76rem, .9vw, .92rem); letter-spacing: -.02em; white-space: nowrap; }
.brand__symbol { position: relative; width: 44px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; overflow: visible; color: var(--color-text-primary); opacity: 1; visibility: visible; }
.brand__symbol .otherline-symbol { width: 100%; height: auto; }
.brand-symbol__svg { grid-area: 1 / 1; opacity: 1; visibility: visible; clip-path: inset(0); transform: none; transform-origin: center; }
.js .brand-symbol__svg { animation: brand-symbol-in .68s .08s var(--ease-cinematic) both; }
.brand__signal { position: absolute; z-index: 1; top: calc(50% - 2px); left: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--mineral-green); opacity: 0; pointer-events: none; }
.js .brand__signal { animation: brand-signal-in .5s .4s var(--ease-standard) both; }
html.is-ready .brand__symbol, html.is-ready .hero-symbol { opacity: 1; visibility: visible; }
.brand__wordmark { min-width: 0; display: inline-flex; gap: .28rem; }
.brand__name { color: var(--color-text-primary); font-weight: 500; }
.brand__studio { color: var(--color-accent-hover); font-family: var(--font-body); font-weight: 500; }
.desktop-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.desktop-nav a { position: relative; font-size: .75rem; font-weight: 500; color: var(--color-text-secondary); transition: color var(--duration-fast); }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.55rem; height: 1px; background: var(--color-accent); transition: right var(--duration-normal) var(--ease-standard); }
.desktop-nav a:hover, .desktop-nav a[aria-current="true"] { color: var(--color-text-primary); }
.desktop-nav a[aria-current="true"]::after { right: 0; }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: .5rem; }
.language-switcher { display: inline-flex; align-items: center; gap: .2rem; min-height: 44px; padding-inline: .4rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: .6rem var(--font-mono); letter-spacing: .09em; }
.language-switcher > span { color: var(--color-text-muted); }
.language-switcher a { position: relative; min-width: 30px; min-height: 44px; display: grid; place-items: center; color: var(--color-text-muted); font-weight: 400; }
.language-switcher a:hover, .language-switcher a:focus-visible { color: var(--color-text-primary); }
.language-switcher a[aria-current="page"] { color: var(--color-text-primary); font-weight: 600; }
.language-switcher a[aria-current="page"]::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 7px; height: 1px; background: var(--color-accent); }
.language-switcher a[aria-current="page"]::before { content: ""; position: absolute; top: 7px; right: 5px; width: 3px; height: 3px; border-radius: 50%; background: var(--color-node); }
.theme-control { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 0 .65rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; cursor: pointer; transition: border-color var(--duration-fast), background-color var(--duration-fast); }
.theme-control:hover { border-color: var(--color-border-strong); background: var(--color-accent-soft); }
.theme-track { position: relative; width: 25px; height: 10px; display: flex; justify-content: space-between; align-items: center; }
.theme-track::after { content: ""; position: absolute; top: 50%; left: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); translate: 0 -50%; transition: translate var(--duration-normal) var(--ease-cinematic); }
html[data-theme="light"] .theme-track::after { translate: 16px -50%; }
.theme-track i { width: 2px; height: 10px; background: var(--color-border-strong); }
.theme-text { font-family: var(--font-mono); font-size: .61rem; text-transform: uppercase; letter-spacing: .08em; }
.menu-button { display: none; width: 44px; height: 44px; place-content: center; gap: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; cursor: pointer; }
.menu-button span { display: block; width: 17px; height: 1px; background: currentColor; transition: transform var(--duration-normal), translate var(--duration-normal); }
.menu-button[aria-expanded="true"] span:first-child { transform: rotate(45deg); translate: 0 3.5px; }
.menu-button[aria-expanded="true"] span:last-child { transform: rotate(-45deg); translate: 0 -3.5px; }
.mobile-menu { position: fixed; z-index: 90; inset: 0; min-height: 100svh; height: 100dvh; display: grid; grid-template-rows: 1fr auto; align-content: stretch; padding: calc(6.5rem + env(safe-area-inset-top)) max(1rem, calc(6vw + env(safe-area-inset-right))) max(1.25rem, calc(1.25rem + env(safe-area-inset-bottom))) max(1rem, calc(6vw + env(safe-area-inset-left))); background: var(--color-background); opacity: 0; visibility: hidden; transform: translateY(-2rem); transition: opacity var(--duration-normal), visibility var(--duration-normal), transform var(--duration-normal) var(--ease-cinematic); }
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu nav { display: grid; align-content: center; }
.mobile-menu nav a { min-height: 52px; display: flex; align-items: baseline; gap: 1rem; padding: clamp(.6rem, 2.2vh, 1rem) 0; border-bottom: 1px solid var(--color-border); font-family: var(--font-display); font-size: clamp(1.8rem, 7.5vw, 3.5rem); letter-spacing: -.05em; }
.mobile-menu nav a[aria-current="true"]::after { content: "•"; margin-left: auto; color: var(--color-accent); }
.mobile-menu nav span, .mobile-menu__footer p { font-family: var(--font-mono); font-size: .68rem; color: var(--color-text-muted); letter-spacing: .08em; text-transform: uppercase; }
.mobile-menu__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding-top: 1rem; }
.mobile-menu__footer p { flex: 1 1 100%; max-width: 32ch; margin: 0; }
.mobile-menu .language-switcher { display: inline-flex; align-content: initial; padding-inline: .35rem; }
.mobile-menu .language-switcher a { min-width: 34px; min-height: 44px; display: grid; place-items: center; gap: 0; padding: 0; border: 0; font: 600 .64rem var(--font-mono); letter-spacing: .09em; }
.mobile-menu .language-switcher a[aria-current="page"]::after { content: ""; margin: 0; left: 8px; right: 8px; bottom: 7px; color: inherit; }
.mobile-theme-control { flex: 0 0 auto; }

.eyebrow, .section-meta, .card-code, .product-status, .product-number { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .67rem; }
.eyebrow { color: var(--color-accent); }
.scene-dark .eyebrow { color: #79ae91; }
.display, h1, h2, h3, blockquote { font-family: var(--font-display); font-weight: 400; letter-spacing: -.055em; line-height: 1.03; }
.section-meta { display: flex; justify-content: space-between; padding-top: 2rem; border-top: 1px solid currentColor; color: var(--color-text-muted); opacity: .78; }
.scene-dark .section-meta { color: var(--section-deep-muted); }
.section-heading { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: end; gap: 2rem; padding: 7rem 0 5rem; }
.section-heading .eyebrow { align-self: start; margin: .5rem 0 0; }
.section-heading h2 { margin: 0; font-size: clamp(3rem, 6.5vw, 6.7rem); }
.section-heading h2 span { color: var(--color-accent); }
.scene-dark .section-heading h2 span { color: #7ca98f; }
.section-heading > p:last-child { margin: 0 0 .65rem; color: currentColor; opacity: .68; font-size: .95rem; max-width: 36ch; }

.hero { min-height: 100svh; overflow: hidden; }
.hero-grid { position: absolute; inset: 0; opacity: .38; background-image: linear-gradient(rgba(183,205,191,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(183,205,191,.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 88%); }
.hero::before { content: ""; position: absolute; width: 60vw; height: 60vw; right: -20vw; top: -28vw; border-radius: 50%; border: 1px solid rgba(183,205,191,.06); box-shadow: 0 0 0 7vw rgba(183,205,191,.015), 0 0 0 14vw rgba(183,205,191,.012); }
.hero-routes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-logo-bridge { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: var(--logo-bridge-opacity, 0); }
.hero-logo-bridge path { fill: none; vector-effect: non-scaling-stroke; }
.hero-logo-bridge__track { stroke: var(--logo-line-secondary); stroke-width: 1; }
.hero-logo-bridge__active { stroke: var(--logo-connection); stroke-width: 1.35; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero-logo-bridge__pulse { fill: var(--logo-connection); opacity: 0; transform-box: view-box; transform-origin: center; }
.routes-muted path { fill: none; stroke: rgba(183,205,191,.09); stroke-width: 1; }
.route-live { fill: none; stroke: #5d9678; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .7; animation: route-draw 2.2s .35s var(--ease-cinematic) forwards; }
.route-nodes circle { fill: #5d9678; opacity: 0; animation: node-in .5s 1.8s forwards; }
.hero-content { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: 8.5rem 0 2rem; position: relative; z-index: 2; }
.hero-mark { position: relative; justify-self: end; width: clamp(210px, 21vw, 310px); color: var(--logo-symbol); }
.hero-symbol-visual { position: relative; display: block; width: 100%; aspect-ratio: 804 / 468; }
.hero-symbol__svg { width: 100%; height: 100%; opacity: 1; visibility: visible; }
.hero-symbol-layer { opacity: 1; transform: none; transform-box: fill-box; transform-origin: center; }
.hero-symbol-scroll-layer { transform-box: fill-box; transform-origin: center; }
.hero-symbol-scroll-layer--curve { opacity: calc(1 - var(--logo-retire, 0) * .28); clip-path: inset(calc(var(--logo-arc, 0) * 78%) calc(var(--logo-arc, 0) * 4%) 0 calc(var(--logo-arc, 0) * 26%)); transform: translate3d(calc(var(--logo-engage, 0) * -4px), 0, 0); }
.hero-symbol-scroll-layer--diagonal { opacity: calc(1 - var(--logo-retire, 0) * .68); transform: translate3d(calc(var(--logo-engage, 0) * 14px), calc(var(--logo-engage, 0) * 8px), 0); }
.js .hero-symbol-layer--curve { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(6px); animation: hero-symbol-curve .9s .18s var(--ease-cinematic) forwards; }
.js .hero-symbol-layer--diagonal { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(6px); animation: hero-symbol-diagonal .68s .72s var(--ease-cinematic) forwards; }
.hero-symbol-connector { position: absolute; top: 57%; right: calc(100% - 8px); width: clamp(72px, 10vw, 150px); height: 1px; background: rgba(183,205,191,.24); transform-origin: right; animation: hero-connector-in .58s .86s var(--ease-cinematic) both; }
.hero-symbol-connector::after { content: ""; position: absolute; top: -3px; right: -1px; width: 7px; height: 7px; border-radius: 50%; background: var(--mineral-green); opacity: 0; animation: node-in .22s 1.2s forwards; }
.hero-symbol-connector i { position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--mineral-green); opacity: 0; animation: hero-signal-travel .58s .9s var(--ease-standard) both; }
.hero-symbol-status { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid rgba(183,205,191,.18); color: #78877f; font: .58rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.hero-symbol-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--mineral-green); }
.hero-symbol-status b, .hero-symbol-status em { font: inherit; }
.hero-symbol-status b { color: #9eaaa3; }
.hero-symbol-status em { justify-self: end; font-style: normal; }
html[data-theme="light"] .hero { background: var(--color-background); color: var(--forest-black); }
html[data-theme="light"] .hero::before { border-color: rgba(23,34,29,.08); box-shadow: 0 0 0 7vw rgba(23,34,29,.018), 0 0 0 14vw rgba(23,34,29,.012); }
html[data-theme="light"] .hero-grid { background-image: linear-gradient(rgba(23,34,29,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(23,34,29,.045) 1px, transparent 1px); }
html[data-theme="light"] .hero .routes-muted path { stroke: rgba(23,34,29,.11); }
html[data-theme="light"] .hero-mark { color: var(--logo-symbol); }
html[data-theme="light"] .hero-symbol-connector { background: rgba(23,34,29,.24); }
html[data-theme="light"] .hero-symbol-status { border-color: rgba(23,34,29,.18); color: var(--color-text-muted); }
html[data-theme="light"] .hero-symbol-status b { color: var(--color-text-secondary); }
html[data-theme="light"] .hero-copy > .eyebrow span,
html[data-theme="light"] .hero-lower > p,
html[data-theme="light"] .hero-footer { color: var(--color-text-muted); }
html[data-theme="light"] .hero .button-secondary { color: var(--forest-black); border-color: var(--color-border-strong); background: rgba(23,34,29,.02); }
html[data-theme="light"] .hero .button-secondary:hover { border-color: var(--forest-black); background: var(--color-accent-soft); }
.hero-copy { align-self: center; margin-top: -2rem; }
.hero-copy > .eyebrow { display: flex; justify-content: space-between; width: min(760px, 70%); margin: 0 0 1.5rem; }
.hero-copy .eyebrow span { color: #78877f; }
.hero h1 { margin: 0; font-size: clamp(3.7rem, 8.1vw, 8.8rem); max-width: 12ch; }
.hero h1 > span { display: block; overflow: hidden; }
.hero h1 em { font-style: normal; color: #7ca98f; }
.hero-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; width: min(760px, 65%); margin: 2.3rem 0 0 auto; }
.hero-lower > p { max-width: 48ch; margin: 0; color: #9eaaa3; font-size: .95rem; }
.button-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .65rem; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 1.25rem; padding: .8rem 1.2rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: .78rem; font-weight: 500; line-height: 1; cursor: pointer; transition: color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-normal) var(--ease-standard); }
.button span { font-size: 1rem; }
.button-primary { background: var(--color-accent); color: var(--color-accent-contrast); border-color: var(--color-accent); }
.scene-dark .button-primary { background: #6ba485; color: #08100d; border-color: #6ba485; }
.button-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.button-secondary { color: #f1f3ef; border-color: rgba(183,205,191,.2); background: rgba(183,205,191,.025); }
.button-secondary:hover { border-color: rgba(183,205,191,.5); background: rgba(183,205,191,.06); }
.hero-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; color: #78877f; font: .61rem var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.hero-footer p { margin: 0; }
.hero-index { justify-self: end; }
.scroll-cue { display: grid; gap: .6rem; text-align: center; }
.scroll-cue i { position: relative; width: 1px; height: 28px; margin: auto; background: rgba(183,205,191,.2); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: #6ba485; transform: translateY(-100%); animation: scroll-cue 2s 2s infinite var(--ease-standard); }

.studio-intro { min-height: 110vh; padding: var(--space-xl) 0; background: var(--color-background); }
.scene-line { position: absolute; z-index: 2; top: 0; left: 50%; width: 1px; height: 8rem; background: var(--color-line); }
.scene-line i { display: block; height: 50%; background: var(--color-accent); transform-origin: top; }
.scene-line span { position: absolute; bottom: -4px; left: -4px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--color-background); background: var(--color-node); }
.studio-layout { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 2rem; }
.studio-layout .section-meta { grid-column: 1 / -1; }
.studio-statement { grid-column: 1 / 3; padding-top: 7rem; }
.studio-statement h2 { margin: 1.5rem 0 0; max-width: 14ch; font-size: clamp(3.2rem, 7vw, 7rem); }
.studio-statement h2 span { color: var(--color-text-muted); }
.studio-copy { grid-column: 3; align-self: end; padding-bottom: 1rem; color: var(--color-text-secondary); }
.studio-copy p:first-child { font-size: 1.15rem; color: var(--color-text-primary); }
.assembly { grid-column: 1 / -1; min-height: 280px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 7rem; border-block: 1px solid var(--color-border); }
.assembly > div { position: relative; min-height: 200px; display: grid; align-content: center; padding: 2rem; }
.assembly-input, .assembly-output { font-family: var(--font-mono); }
.assembly-input span, .assembly-output span { margin-bottom: 1.5rem; color: var(--color-text-muted); font-size: .62rem; letter-spacing: .1em; }
.assembly-input i { display: block; height: 1px; margin: .45rem 0; background: var(--color-border-strong); }
.assembly-input i:nth-child(2) { width: 80%; }.assembly-input i:nth-child(3) { width: 55%; }.assembly-input i:nth-child(4) { width: 68%; }
.assembly-core { width: 240px; text-align: center; border-inline: 1px solid var(--color-border); background: var(--color-accent-soft); }
.assembly-core::before, .assembly-core::after { content: ""; position: absolute; top: 50%; width: 5vw; height: 1px; background: var(--color-accent); }
.assembly-core::before { right: 100%; }.assembly-core::after { left: 100%; }
.official-symbol--assembly { width: 80px; height: 48px; margin: 0 auto 1.2rem; display: grid; place-items: center; color: var(--color-text-primary); }
.assembly-core span { font: .62rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
.assembly-core .official-symbol--assembly { display: block; color: var(--color-text-primary); }
.assembly-output b { display: block; margin: .25rem 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; }

.capabilities { padding: var(--space-xl) 0; }
.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(183,205,191,.16); border-left: 1px solid rgba(183,205,191,.16); }
.capability-card { min-height: 390px; position: relative; display: flex; flex-direction: column; padding: 1.5rem; border-right: 1px solid rgba(183,205,191,.16); border-bottom: 1px solid rgba(183,205,191,.16); background: rgba(183,205,191,.015); transform-style: preserve-3d; transition: background-color var(--duration-normal), border-color var(--duration-normal), transform var(--duration-normal) var(--ease-standard); }
.capability-card:hover { background: rgba(183,205,191,.045); border-color: rgba(183,205,191,.32); }
.card-code { color: #78877f; }
.capability-card svg { width: 62px; margin: auto 0; fill: none; stroke: #7ca98f; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.capability-card h3 { margin: 0 0 .75rem; font-size: 1.6rem; letter-spacing: -.035em; }
.capability-card > p { min-height: 4.8em; margin: 0; color: #8d9b94; font-size: .86rem; }
.capability-wide { grid-column: span 4; min-height: 260px; display: grid; grid-template-columns: 1fr 1fr 2fr; grid-template-rows: auto 1fr; gap: 1rem 3rem; }
.capability-wide .card-code { grid-column: 1 / -1; }
.capability-wide svg { align-self: center; margin: 0; }
.capability-wide h3 { align-self: center; }
.capability-wide > p { align-self: center; max-width: 38ch; }
.card-signal { position: absolute; right: 1.5rem; top: 1.5rem; display: flex; align-items: center; gap: .5rem; color: #78877f; font: .6rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.card-signal i { width: 6px; height: 6px; border-radius: 50%; background: #6ba485; }

.products { padding: var(--space-xl) 0 0; background: var(--color-background-alt); }
.products .section-heading { grid-template-columns: 1fr 3fr; }
.product-stage { height: 332svh; position: relative; }
.product-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); align-content: center; gap: clamp(1.5rem, 3vw, 3.75rem); padding-top: 6rem; }
.product-nav { display: grid; align-content: center; }
.product-nav button { position: relative; min-width: 0; display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: .75rem; min-height: 58px; padding: 0; border: 0; border-bottom: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); text-align: left; cursor: pointer; transition: color var(--duration-normal), padding-left var(--duration-normal) var(--ease-standard); }
.product-nav button span { font: .61rem var(--font-mono); }
.product-nav button i { position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-slow) var(--ease-cinematic); }
.product-nav button[aria-selected="true"] { color: var(--color-text-primary); padding-left: .5rem; }
.product-nav button[aria-selected="true"] i { transform: scaleX(1); }
.product-panel { container-type: inline-size; min-width: 0; min-height: 610px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: clip; background: var(--color-surface); box-shadow: 0 30px 70px var(--color-shadow); }
.product-copy, .product-visual { min-width: 0; }
.product-copy { display: flex; flex-direction: column; padding: clamp(1.75rem, 3.2vw, 3.25rem); border-right: 1px solid var(--color-border); }
.product-status { color: var(--color-accent); }
.product-number { margin: auto 0 1rem; color: var(--color-text-muted); }
.product-copy h3 { max-width: 100%; margin: 0 0 1.5rem; overflow: visible; font-size: clamp(2.65rem, 3.9vw, 4.6rem); line-height: .98; text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: none; }
.product-copy > p:not([class]) { margin: 0; color: var(--color-text-secondary); max-width: 38ch; }
.product-signature { margin: 3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font: .65rem var(--font-mono); }
.product-visual { margin: 1.2rem; overflow: hidden; position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--section-deep); color: var(--section-deep-text); }
.product-visual::before { content: ""; position: absolute; inset: 0; opacity: .75; background-image: linear-gradient(rgba(183,205,191,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(183,205,191,.045) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(135deg, black, transparent 75%); }
.visual-top { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .8rem; height: 48px; padding: 0 1rem; border-bottom: 1px solid rgba(183,205,191,.12); font: .55rem var(--font-mono); letter-spacing: .1em; color: #8d9b94; }
.visual-top i { width: 6px; height: 6px; border-radius: 50%; background: #6ba485; }
.visual-top b { font-weight: 400; color: #b7cdbf; }
.visual-grid { position: relative; z-index: 1; height: calc(100% - 48px); display: grid; grid-template-columns: 1fr 1.3fr; grid-template-rows: 1fr 1fr; gap: 1px; background: rgba(183,205,191,.1); }
.visual-grid > div { background: #0b1511; }
.metric { padding: 2rem; display: flex; flex-direction: column; }
.metric span, .metric small { font: .58rem var(--font-mono); color: #78877f; letter-spacing: .08em; }
.metric strong { margin: auto 0 .5rem; font: 300 clamp(3rem, 6vw, 6rem) var(--font-display); color: #b7cdbf; }
.signal-map { grid-row: span 2; position: relative; display: grid; place-content: center; }
.signal-map::before, .signal-map::after { content: ""; position: absolute; inset: 18%; border: 1px solid rgba(183,205,191,.12); border-radius: 50%; }
.signal-map::after { inset: 32%; }
.signal-map span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #5d9678; box-shadow: 0 0 0 5px rgba(93,150,120,.1); }
.signal-map span:nth-child(1) { top: 18%; left: 48%; }.signal-map span:nth-child(2) { top: 42%; left: 23%; }.signal-map span:nth-child(3) { top: 62%; right: 18%; }.signal-map span:nth-child(4) { bottom: 23%; left: 42%; }
.signal-map i { width: 80px; height: 80px; border: 1px solid #5d9678; border-radius: 50%; }
.signal-map i::after { content: ""; display: block; width: 9px; height: 9px; margin: 34px auto; border-radius: 50%; background: #b7cdbf; }
.mini-list { display: grid; padding: 1rem 1.5rem; }
.mini-list span { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(183,205,191,.1); font: .62rem var(--font-mono); color: #8d9b94; }
.mini-list i { width: 32px; height: 2px; background: #5d9678; }
.product-visual[data-product-visual="organi"] .signal-map i { border-radius: 8px; transform: rotate(45deg); }
.product-visual[data-product-visual="archibald"] .visual-grid { grid-template-columns: 1.2fr 1fr; }
.product-visual[data-product-visual="travel"] .signal-map::before, .product-visual[data-product-visual="travel"] .signal-map::after { border-radius: 0; transform: rotate(30deg); }
.web-canvas { display: none; position: relative; z-index: 1; height: calc(100% - 48px); min-height: 0; padding: clamp(1rem, 2.2vw, 2rem); overflow: hidden; }
.product-visual[data-product-visual="web"] .visual-grid { display: none; }
.product-visual[data-product-visual="web"] .web-canvas { display: grid; align-items: center; }
.web-desktop { position: relative; width: 86%; height: 72%; overflow: hidden; border: 1px solid rgba(183,205,191,.24); border-radius: 7px; background: #101c16; box-shadow: 0 25px 55px rgba(0,0,0,.28); }
.browser-bar { height: 34px; display: flex; align-items: center; gap: 5px; padding: 0 .65rem; border-bottom: 1px solid rgba(183,205,191,.12); }
.browser-bar span { width: 5px; height: 5px; border-radius: 50%; background: #78877f; }
.browser-bar i { margin-left: auto; font: normal .48rem var(--font-mono); color: #78877f; text-transform: uppercase; letter-spacing: .08em; }
.web-layout { height: calc(100% - 34px); display: grid; grid-template-rows: auto auto auto 1fr; align-content: center; padding: clamp(1rem, 3vw, 2rem); background: linear-gradient(135deg, rgba(93,150,120,.08), transparent 55%); }
.web-kicker { color: #6ba485; font: .48rem var(--font-mono); letter-spacing: .12em; }
.web-headline { display: grid; gap: 7px; margin: 1rem 0; }
.web-headline i { height: clamp(7px, 1.1vw, 12px); border-radius: 2px; background: #d9dfda; }.web-headline i:nth-child(1) { width: 84%; }.web-headline i:nth-child(2) { width: 68%; }.web-headline i:nth-child(3) { width: 42%; background: #6ba485; }
.web-action { width: 68px; height: 20px; margin-bottom: 1.5rem; border: 1px solid #6ba485; border-radius: 3px; }
.web-modules { align-self: end; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: .45rem; }
.web-modules span { min-height: 48px; border: 1px solid rgba(183,205,191,.14); border-radius: 3px; background: rgba(183,205,191,.035); }
.web-mobile { position: absolute; z-index: 2; right: clamp(.8rem, 2vw, 1.8rem); bottom: clamp(2.8rem, 5vw, 4.2rem); width: clamp(72px, 20%, 105px); aspect-ratio: 9 / 17; display: grid; align-content: start; gap: 7px; padding: 1rem .55rem .55rem; border: 1px solid rgba(183,205,191,.3); border-radius: 10px; background: #0b1511; box-shadow: 0 18px 38px rgba(0,0,0,.4); }
.mobile-speaker { position: absolute; top: 5px; left: 50%; width: 18px; height: 2px; translate: -50%; border-radius: 2px; background: #435148; }
.web-mobile i { height: 5px; border-radius: 1px; background: #d9dfda; }.web-mobile i:nth-of-type(2) { width: 72%; background: #6ba485; }
.web-mobile b { width: 38px; height: 13px; border: 1px solid #6ba485; border-radius: 2px; }
.web-mobile span { min-height: 30px; border: 1px solid rgba(183,205,191,.12); border-radius: 2px; }
.web-signals { position: absolute; left: clamp(1rem, 2.2vw, 2rem); right: clamp(1rem, 2.2vw, 2rem); bottom: .65rem; display: flex; gap: .55rem; flex-wrap: wrap; color: #78877f; font: .47rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.web-signals span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: .35rem; border-radius: 50%; background: #5d9678; vertical-align: middle; }
.product-progress { position: absolute; left: 0; bottom: 2rem; width: 100%; height: 1px; background: var(--color-border); }
.product-progress span { display: block; height: 100%; background: var(--color-accent); transform-origin: left; }

@container (max-width: 820px) {
  .product-copy { padding: clamp(1.75rem, 4cqw, 2.5rem); }
  .product-copy h3 { font-size: clamp(2.45rem, 6.2cqw, 3.35rem); }
}

.principles { padding: var(--space-xl) 0; overflow: hidden; }
.principles::after { content: ""; position: absolute; right: -15vw; top: 30%; width: 40vw; height: 40vw; border: 1px solid rgba(183,205,191,.06); border-radius: 50%; box-shadow: 0 0 0 8vw rgba(183,205,191,.018); }
.principles-heading { display: grid; grid-template-columns: 1fr 3fr; padding: 7rem 0; }
.principles-heading h2 { margin: 0; font-size: clamp(3rem, 6.5vw, 6.5rem); }
.principle-list { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(183,205,191,.16); }
.principle-list li { position: relative; display: grid; grid-template-columns: 70px 1.3fr 1fr 80px; align-items: center; min-height: 145px; border-bottom: 1px solid rgba(183,205,191,.16); transition: padding-left var(--duration-normal) var(--ease-standard), background-color var(--duration-normal); }
.principle-list li:hover { padding-left: 1rem; background: rgba(183,205,191,.025); }
.principle-list li > span { font: .62rem var(--font-mono); color: #78877f; }
.principle-list h3 { margin: 0; font-size: clamp(2.2rem, 4vw, 4.5rem); }
.principle-list p { max-width: 34ch; color: #8d9b94; font-size: .88rem; }
.principle-list i { justify-self: end; position: relative; width: 52px; height: 1px; background: rgba(183,205,191,.25); }
.principle-list i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #5d9678; }

.manifesto { min-height: 110vh; display: grid; align-items: center; padding: var(--space-xl) 0; background: var(--manifest-bg); color: var(--manifest-text); transition: background-color var(--duration-normal), color var(--duration-normal); }
.manifesto .section-meta { color: currentColor; opacity: .55; }
.manifesto-layout { position: relative; }
.manifesto blockquote { margin: 8rem 0 4rem; font-size: clamp(3.5rem, 8vw, 8.5rem); }
.manifesto blockquote span { opacity: .48; }
.manifesto-copy { width: min(590px, 60%); margin-left: auto; font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.5; letter-spacing: -.025em; }
.manifesto-note { width: 290px; margin-top: 7rem; padding-top: 1rem; border-top: 1px solid currentColor; }
.manifesto-note span { font: .6rem var(--font-mono); opacity: .55; letter-spacing: .1em; }
.manifesto-note p { font-size: .76rem; opacity: .7; }
.manifesto-path { position: absolute; top: 0; right: 18%; height: 7rem; width: 1px; background: currentColor; opacity: .25; }
.manifesto-path span { display: block; height: 55%; background: var(--color-accent); }
.manifesto-path i { position: absolute; bottom: 0; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); }

.final-cta { min-height: 100svh; overflow: hidden; display: grid; align-items: center; }
.final-routes { position: absolute; inset: 0; width: 100%; height: 100%; }
.final-route { fill: none; stroke: rgba(183,205,191,.13); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.final-cta.is-visible .final-route { animation: final-route 1.8s var(--ease-cinematic) forwards; }
.final-cta.is-visible .final-route-b { animation-delay: .2s; }.final-cta.is-visible .final-route-c { animation-delay: .4s; }
.final-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 3fr; align-items: center; gap: 5vw; padding: clamp(7.75rem, 14vh, 9rem) 0 clamp(2.5rem, 5vh, 4rem); }
.final-symbol { width: min(260px, 100%); }
.official-symbol--final { width: 100%; height: 150px; display: grid; place-items: center; color: #b7cdbf; opacity: 1; visibility: visible; }
.final-symbol span { display: block; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid rgba(183,205,191,.18); color: #78877f; font: .61rem var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.final-symbol .official-symbol--final { margin-top: 0; padding-top: 0; border-top: 0; }
.final-copy { min-width: 0; max-width: 900px; }
.final-copy h2 { max-width: 13ch; margin: 1.25rem 0 1.5rem; font-size: clamp(3.25rem, 6.4vw, 6.6rem); line-height: .97; text-wrap: balance; }
.final-copy h2 span { color: #7ca98f; }
.final-copy > p:not(.eyebrow) { max-width: 46ch; color: #8d9b94; }
.final-copy .button { margin-top: 1.5rem; }
.final-tagline { grid-column: 1 / -1; align-self: end; margin: clamp(3rem, 7vh, 5rem) 0 0; padding-top: 1rem; border-top: 1px solid rgba(183,205,191,.16); color: #78877f; font: .62rem var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }

/* Visual Chapters V1 — one film, seven connected atmospheres */
.chapter {
  --chapter-bg: var(--color-background);
  --chapter-enter: var(--chapter-bg);
  --chapter-exit: var(--chapter-bg);
  --chapter-surface: var(--color-surface);
  --chapter-line: var(--color-line);
  --chapter-accent: var(--color-accent);
  --chapter-grid-opacity: .035;
  --chapter-glow-opacity: .08;
  --chapter-glow-color: color-mix(in srgb, var(--chapter-accent) 8%, transparent);
  --chapter-progress: 0;
  --chapter-threshold: clamp(4rem, 7vh, 6.25rem);
  background-color: var(--chapter-bg);
  background-image:
    radial-gradient(circle at calc(12% + var(--chapter-progress) * 54%) 38%, var(--chapter-glow-color), transparent 32%),
    linear-gradient(180deg, var(--chapter-enter) 0, var(--chapter-bg) var(--chapter-threshold), var(--chapter-bg) calc(100% - var(--chapter-threshold)), var(--chapter-exit) 100%);
  transition: background-color var(--duration-normal), color var(--duration-normal);
}
.chapter-meta { align-items: center; padding-top: 0; border-top: 0; }
.chapter-marker { width: min(230px, 100%); display: inline-grid; grid-template-columns: auto minmax(28px, 1fr) auto; align-items: center; gap: .7rem; color: currentColor; font: .58rem var(--font-mono); letter-spacing: .12em; line-height: 1; text-transform: uppercase; opacity: .72; }
.chapter-marker b, .chapter-marker em { font: inherit; font-style: normal; }
.chapter-marker b { color: var(--chapter-accent); }
.chapter-marker i { height: 1px; background: linear-gradient(90deg, var(--chapter-accent), var(--chapter-line)); transform: scaleX(calc(.28 + var(--chapter-progress) * .72)); transform-origin: left; transition: transform .7s var(--ease-cinematic); }
.chapter-marker--hero { position: absolute; z-index: 3; top: var(--scene-safe-top); left: 0; }
.chapter-marker--contact { grid-column: 1 / -1; align-self: start; width: min(260px, 100%); }
.chapter.is-current .chapter-marker { opacity: 1; }
.chapter.is-current .chapter-marker i { transform: scaleX(1); }

html[data-theme="dark"] .chapter--hero { --chapter-bg: var(--forest-black); --chapter-enter: var(--forest-black); --chapter-exit: color-mix(in srgb, var(--pine-graphite) 38%, var(--forest-black)); }
html[data-theme="dark"] .chapter--studio { --chapter-bg: color-mix(in srgb, var(--chalk) 4%, var(--forest-black)); --chapter-enter: var(--forest-black); --chapter-exit: color-mix(in srgb, var(--pine-graphite) 76%, var(--forest-black)); --chapter-glow-opacity: .045; }
html[data-theme="dark"] .chapter--systems { --chapter-bg: color-mix(in srgb, var(--pine-graphite) 76%, var(--forest-black)); --chapter-enter: color-mix(in srgb, var(--chalk) 4%, var(--forest-black)); --chapter-exit: color-mix(in srgb, var(--pine-graphite) 58%, var(--forest-black)); --chapter-grid-opacity: .07; }
html[data-theme="dark"] .chapter--products { --chapter-bg: color-mix(in srgb, var(--pine-graphite) 58%, var(--forest-black)); --chapter-enter: color-mix(in srgb, var(--pine-graphite) 76%, var(--forest-black)); --chapter-exit: var(--pine-graphite); --chapter-surface: #121d18; --chapter-glow-opacity: .11; }
html[data-theme="dark"] .chapter--principles { --chapter-bg: var(--pine-graphite); --chapter-enter: color-mix(in srgb, var(--pine-graphite) 58%, var(--forest-black)); --chapter-exit: var(--manifest-bg); --chapter-glow-opacity: .045; }
html[data-theme="dark"] .chapter--manifesto { --chapter-bg: var(--manifest-bg); --chapter-enter: var(--pine-graphite); --chapter-exit: var(--forest-black); --chapter-line: rgba(8,16,13,.24); --chapter-accent: var(--mineral-green); --chapter-glow-opacity: .035; }
html[data-theme="dark"] .chapter--contact { --chapter-bg: var(--forest-black); --chapter-enter: var(--manifest-bg); --chapter-exit: var(--forest-black); --chapter-glow-opacity: .12; }

html[data-theme="light"] .chapter--hero { --chapter-bg: var(--color-background); --chapter-enter: var(--color-background); --chapter-exit: var(--chalk); }
html[data-theme="light"] .chapter--studio { --chapter-bg: var(--chalk); --chapter-enter: var(--color-background); --chapter-exit: var(--section-deep); --chapter-glow-opacity: .035; }
html[data-theme="light"] .chapter--systems { --chapter-bg: var(--section-deep); --chapter-enter: var(--chalk); --chapter-exit: color-mix(in srgb, var(--mist-sage) 30%, var(--chalk)); --chapter-grid-opacity: .075; }
html[data-theme="light"] .chapter--products { --chapter-bg: color-mix(in srgb, var(--mist-sage) 30%, var(--chalk)); --chapter-enter: var(--section-deep); --chapter-exit: color-mix(in srgb, var(--mist-sage) 52%, var(--chalk)); --chapter-glow-opacity: .08; }
html[data-theme="light"] .chapter--principles { --chapter-bg: color-mix(in srgb, var(--mist-sage) 52%, var(--chalk)); --chapter-enter: color-mix(in srgb, var(--mist-sage) 30%, var(--chalk)); --chapter-exit: var(--manifest-bg); --chapter-line: rgba(23,34,29,.18); --chapter-glow-opacity: .03; color: var(--forest-black); }
html[data-theme="light"] .chapter--manifesto { --chapter-bg: var(--manifest-bg); --chapter-enter: color-mix(in srgb, var(--mist-sage) 52%, var(--chalk)); --chapter-exit: var(--section-deep); --chapter-line: rgba(183,205,191,.18); --chapter-glow-opacity: .04; }
html[data-theme="light"] .chapter--contact { --chapter-bg: var(--section-deep); --chapter-enter: var(--manifest-bg); --chapter-exit: var(--section-deep); --chapter-glow-opacity: .13; }

.chapter--studio::after { content: "01"; position: absolute; z-index: -1; right: 3vw; top: 13%; color: var(--chapter-line); font: 300 clamp(11rem, 24vw, 25rem)/.8 var(--font-display); letter-spacing: -.1em; opacity: calc(.24 + var(--chapter-progress) * .14); pointer-events: none; }
.chapter--systems::before { content: ""; position: absolute; z-index: -1; inset: clamp(6rem, 12vh, 10rem) 0 8%; opacity: var(--chapter-grid-opacity); background-image: linear-gradient(var(--mist-sage) 1px, transparent 1px), linear-gradient(90deg, var(--mist-sage) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent); pointer-events: none; }
.chapter--products .products-intro { position: relative; }
.chapter--products .products-intro::after { content: ""; position: absolute; left: 25%; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--chapter-accent), var(--chapter-line) 42%, transparent); transform: scaleX(calc(.2 + var(--chapter-progress) * .8)); transform-origin: right; }
.chapter--products .product-sticky { isolation: isolate; }
.chapter--products .product-sticky::before { background: linear-gradient(90deg, var(--chapter-accent), var(--chapter-line) 35%, transparent 82%); }
.chapter--products .product-panel { border-color: color-mix(in srgb, var(--chapter-accent) 28%, var(--chapter-line)); background: var(--chapter-surface); box-shadow: 0 30px 70px var(--color-shadow), inset 0 0 0 1px color-mix(in srgb, var(--chapter-accent) 8%, transparent); }
.chapter--principles::before { content: "PROTOCOL"; position: absolute; z-index: -1; left: 4vw; top: 23%; color: var(--chapter-line); font: 400 clamp(5rem, 14vw, 14rem)/1 var(--font-display); letter-spacing: -.08em; opacity: .2; writing-mode: vertical-rl; pointer-events: none; }
.chapter--principles .principle-list { border-color: var(--chapter-line); }
.chapter--principles .principle-list li { border-color: var(--chapter-line); }
.chapter--principles .principle-list i { background: var(--chapter-line); }
html[data-theme="light"] .chapter--principles .principle-list p { color: var(--color-text-secondary); }
.chapter--manifesto .manifesto-path { background: var(--chapter-line); }
.chapter--manifesto .manifesto-path span { background: var(--chapter-accent); }
.chapter--contact .final-route { stroke: color-mix(in srgb, var(--mist-sage) 18%, transparent); }
.chapter--contact .final-layout { padding-top: var(--scene-safe-top); }
.scene-line, .studio-keywords i, .product-progress { background-color: var(--chapter-line); }
.scene-line i, .manifesto-path span, .product-progress span { background-color: var(--chapter-accent); }

.site-footer { padding: 3rem 0; border-top: 1px solid rgba(183,205,191,.12); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr auto; align-items: start; gap: 2rem; color: #78877f; font-size: .72rem; }
.footer-brand { display: flex; align-items: center; gap: .75rem; color: #f1f3ef; font-family: var(--font-display); }
.official-symbol--footer { width: 32px; height: 20px; display: grid; place-items: center; color: #b7cdbf; }
.footer-brand p { margin: 0; }.footer-brand b { font: 400 .76rem var(--font-body); color: #83b99c; }
.footer-grid > p { margin: .3rem 0 0; }
.footer-grid nav { display: grid; gap: .35rem; }
.footer-grid nav a:hover, .back-top:hover { color: #f1f3ef; }
.footer-meta span { opacity: .6; }.back-top { display: flex; gap: 1rem; white-space: nowrap; }

.brief-dialog { width: min(720px, calc(100% - 2rem)); padding: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-elevated); color: var(--color-text-primary); box-shadow: 0 40px 100px rgba(0,0,0,.45); }
.brief-dialog::backdrop { background: var(--color-overlay); backdrop-filter: blur(8px); }
.dialog-shell { position: relative; display: grid; gap: 1rem; padding: clamp(2rem, 6vw, 4rem); }
.dialog-shell h2 { margin: .5rem 0; font-size: clamp(2rem, 5vw, 4rem); }
.dialog-shell > p:not(.eyebrow) { margin: 0 0 1rem; color: var(--color-text-secondary); font-size: .86rem; max-width: 60ch; }
.dialog-shell label { display: grid; gap: .4rem; font-size: .72rem; font-weight: 500; }
.dialog-shell input, .dialog-shell textarea { width: 100%; padding: .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-background); color: var(--color-text-primary); resize: vertical; transition: border-color var(--duration-fast), background-color var(--duration-fast); }
.dialog-shell input:focus, .dialog-shell textarea:focus { border-color: var(--color-focus); }
.dialog-close { position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px; display: grid; place-content: center; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; cursor: pointer; }
.dialog-close span { grid-area: 1 / 1; width: 16px; height: 1px; background: currentColor; transform: rotate(45deg); }.dialog-close span:last-child { transform: rotate(-45deg); }
.dialog-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.dialog-actions > span { color: var(--color-success); font-size: .72rem; }

.reveal-on-scroll { opacity: 0; transform: translateY(32px); transition: opacity var(--duration-slow) var(--ease-cinematic), transform var(--duration-slow) var(--ease-cinematic); }
.reveal-on-scroll.is-visible { opacity: 1; transform: none; }
.hero .reveal { opacity: 0; transform: translateY(28px); animation: hero-reveal .8s var(--ease-cinematic) forwards; }
.hero .hero-copy > .eyebrow { animation-delay: .8s; }.hero h1 { animation-delay: .95s; }.hero-lower { animation-delay: 1.15s; }.hero-footer { animation-delay: 1.35s; }

@keyframes route-draw { to { stroke-dashoffset: 0; } }
@keyframes node-in { to { opacity: 1; } }
@keyframes brand-symbol-in {
  from { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateY(2px) scale(.985); }
  72% { opacity: 1; transform: translateY(0) scale(1.012); }
  to { clip-path: inset(0); opacity: 1; transform: none; }
}
@keyframes brand-signal-in {
  0% { opacity: 0; transform: translateX(-3px); }
  24%, 72% { opacity: 1; }
  100% { opacity: 0; transform: translateX(29px); }
}
@keyframes hero-symbol-curve {
  to { clip-path: inset(0); opacity: 1; transform: none; }
}
@keyframes hero-symbol-diagonal {
  to { clip-path: inset(0); opacity: 1; transform: none; }
}
@keyframes hero-connector-in { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes hero-signal-travel { 0% { left: 0; opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } }
@keyframes hero-reveal { to { opacity: 1; transform: none; } }
@keyframes scroll-cue { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }
@keyframes final-route { to { stroke-dashoffset: 0; } }

@media (pointer: fine) and (min-width: 769px) {
  .cursor-halo { display: block; }
}

@media (max-width: 1100px) {
  .desktop-nav { gap: 1rem; }
  .section-heading { grid-template-columns: 1fr 3fr; }
  .section-heading > p:last-child { grid-column: 2; }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .capability-wide { grid-column: span 2; }
  .product-sticky { grid-template-columns: minmax(150px, 170px) minmax(0, 1fr); gap: 1.5rem; }
  .product-panel { grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); min-height: 560px; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }.footer-grid > *:nth-child(n+4) { margin-top: 1rem; }
}

@media (max-width: 900px) {
  .product-stage { height: auto; padding-bottom: 5rem; }
  .product-sticky { position: relative; height: auto; display: block; padding-top: 0; }
  .product-nav { display: flex; overflow-x: auto; scrollbar-width: none; margin-bottom: 1rem; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; touch-action: pan-x; }
  .product-nav::-webkit-scrollbar { display: none; }
  .product-nav button { flex: 0 0 auto; min-width: 155px; scroll-snap-align: start; }
  .product-panel { min-height: 0; grid-template-columns: minmax(0, 1fr); overflow: clip; }
  .product-copy { min-height: 390px; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .product-copy h3 { font-size: clamp(2.65rem, 8vw, 4rem); }
  .product-number { margin-top: auto; }
  .product-visual { min-height: 470px; }
  .product-progress { display: none; }
}

@media (max-width: 820px) {
  :root { --shell: min(100% - 2rem, 700px); }
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav, .language-switcher--header { display: none; }.menu-button { display: grid; }.theme-text { display: none; }
  .mobile-theme-control .theme-text { display: inline; }
  .hero-content { padding-top: 7.5rem; }
  .hero-mark { width: 150px; }
  .hero-copy { margin-top: 1rem; }
  .hero-copy > .eyebrow { width: 100%; }
  .hero h1 { font-size: clamp(3.5rem, 12vw, 6.2rem); }
  .hero-lower { width: 100%; grid-template-columns: 1fr; margin-top: 2rem; }
  .hero-footer { grid-template-columns: 1fr 1fr; }.scroll-cue { display: none; }
  .studio-layout { grid-template-columns: 1fr 1fr; }.studio-statement { grid-column: 1 / -1; }.studio-copy { grid-column: 2; }
  .assembly { grid-template-columns: 1fr; }.assembly > div { min-height: 150px; }.assembly-core { width: 100%; border-inline: 0; border-block: 1px solid var(--color-border); }.assembly-core::before, .assembly-core::after { display: none; }
  .section-heading, .principles-heading { grid-template-columns: 1fr; padding: 5rem 0 3rem; }.section-heading > p:last-child { grid-column: auto; }
  .capability-card { min-height: 330px; }.capability-wide { display: flex; }
  .product-stage { height: auto; padding-bottom: 5rem; }.product-sticky { position: relative; height: auto; display: block; padding-top: 0; }
  .product-nav { display: flex; overflow-x: auto; scrollbar-width: none; margin-bottom: 1rem; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; touch-action: pan-x; }.product-nav::-webkit-scrollbar { display: none; }.product-nav button { flex: 0 0 auto; min-width: 155px; scroll-snap-align: start; }
  .product-panel { min-height: 0; grid-template-columns: minmax(0, 1fr); overflow: clip; }.product-copy { min-height: 390px; border-right: 0; border-bottom: 1px solid var(--color-border); }.product-copy h3 { font-size: clamp(2.65rem, 8vw, 4rem); }.product-number { margin-top: auto; }.product-visual { min-height: 470px; }
  .product-progress { display: none; }
  .principle-list li { grid-template-columns: 45px 1fr 40px; padding: 1.5rem 0; }.principle-list li p { grid-column: 2; }.principle-list li i { grid-column: 3; grid-row: 1 / 3; }
  .manifesto-copy { width: 80%; }.manifesto blockquote { margin-top: 6rem; }
  .final-layout { grid-template-columns: 1fr; padding-top: 7rem; }.final-symbol { width: 130px; }.official-symbol--final { height: 76px; }.final-tagline { margin-top: 3rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }.footer-grid > *:nth-child(n+3) { margin-top: 1rem; }
}

@media (max-width: 520px) {
  :root { --shell: min(100% - 1.5rem, 480px); }
  .site-header { inset: max(.7rem, env(safe-area-inset-top)) max(.7rem, env(safe-area-inset-right)) auto max(.7rem, env(safe-area-inset-left)); height: 58px; padding-inline: .65rem; }
  .brand { gap: .38rem; font-size: .73rem; }.brand__symbol { width: 34px; height: 22px; }.brand__wordmark { gap: .2rem; }
  .js .brand-symbol__svg { animation-duration: .48s; animation-delay: .04s; }
  .js .brand__signal { animation-duration: .38s; animation-delay: .28s; }
  .hero { min-height: max(680px, 100svh); }.hero-content { min-height: max(680px, 100svh); padding-top: 6.75rem; }
  .hero-mark { justify-self: end; width: 108px; opacity: .82; }.hero-symbol-connector { display: none; }.hero-symbol-status { grid-template-columns: auto 1fr; font-size: .5rem; }.hero-symbol-status em { display: none; }
  .js .hero-symbol-layer--curve { animation-duration: .55s; animation-delay: .08s; }
  .js .hero-symbol-layer--diagonal { animation-duration: .44s; animation-delay: .36s; }
  .hero-copy > .eyebrow span { display: none; }.hero h1 { font-size: clamp(3.1rem, 15vw, 5rem); }
  .button-row { display: grid; }.button { width: 100%; }.hero-footer { display: block; }.hero-index { display: none; }
  .section-meta { gap: .75rem; font-size: .58rem; }.section-meta span { min-width: 0; max-width: 50%; overflow-wrap: anywhere; }.section-meta span:last-child { text-align: right; }
  .studio-copy { grid-column: 1 / -1; }.studio-statement { padding-top: 4rem; }.studio-statement h2 { font-size: clamp(2.75rem, 13vw, 3.2rem); }
  .capability-grid { grid-template-columns: 1fr; }.capability-wide { grid-column: span 1; }.capability-card { min-height: 300px; }
  .products .section-heading { grid-template-columns: 1fr; }.product-nav { margin-inline: -.75rem; padding-inline: .75rem; }.product-nav button { min-width: 142px; }.product-panel { border-radius: var(--radius-sm); }.product-copy { padding: 1.5rem; min-height: 360px; }.product-copy h3 { font-size: clamp(2.35rem, 12.5vw, 3.3rem); }.product-visual { min-height: 350px; margin: .7rem; }.visual-grid { grid-template-columns: 1fr; }.signal-map { display: none; }
  .principle-list li { grid-template-columns: 34px 1fr; }.principle-list li i { display: none; }.principle-list li p { grid-column: 2; }
  .manifesto { min-height: max(720px, 100svh); }.manifesto blockquote { font-size: clamp(2.6rem, 12.5vw, 3.25rem); }.manifesto-copy { width: 100%; }.manifesto-note { width: 75%; }
  .final-cta { min-height: max(720px, 100svh); }.final-copy h2 { max-width: 100%; font-size: clamp(2.6rem, 12vw, 3.4rem); }.final-copy h2 br { display: none; }
  .footer-grid { grid-template-columns: 1fr; }.footer-grid > * { margin-top: 1rem; }
  .dialog-shell { padding: 2rem 1.25rem; }.dialog-actions { align-items: stretch; flex-direction: column; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .mobile-menu { padding-top: calc(5.2rem + env(safe-area-inset-top)); }
  .mobile-menu nav { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .mobile-menu nav a { min-height: 44px; padding: .35rem 0; font-size: clamp(1.35rem, 5.5vh, 2rem); }
  .mobile-menu__footer p { display: none; }
  .hero, .hero-content { min-height: 620px; }
}

@media (hover: none), (pointer: coarse) {
  .button, .theme-control, .menu-button, .dialog-close, .product-nav button, .mobile-menu a { min-height: 44px; }
  .capability-card:hover { transform: none; background: rgba(183,205,191,.015); border-color: rgba(183,205,191,.16); }
  .principle-list li:hover { padding-left: initial; background: transparent; }
  .button:active, .theme-control:active, .menu-button:active, .product-nav button:active { opacity: .72; }
}

/* Cinematic Experience V1 — one visual system, four measured sticky scenes */
.narrative-rail { --rail-progress: 0; position: fixed; z-index: 80; top: 96px; right: max(.65rem, 1.2vw); bottom: 2rem; width: 28px; display: none; pointer-events: none; }
.rail-track, .rail-travel { position: absolute; top: 0; bottom: 0; left: 13px; width: 1px; transform-origin: top; }
.rail-track { background: var(--color-line); }
.rail-travel { background: var(--color-accent); transform: scaleY(var(--rail-progress)); }
.rail-signal { position: absolute; z-index: 2; top: 0; left: 10px; width: 7px; height: 7px; border: 2px solid var(--color-background); border-radius: 50%; background: var(--color-node); transform: translateY(var(--rail-position, 0px)); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.narrative-rail ol { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.narrative-rail li { position: absolute; left: 10px; width: 7px; height: 7px; border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-background); transition: background-color var(--duration-normal), border-color var(--duration-normal), transform var(--duration-normal); }
.narrative-rail li:nth-child(1) { top: 0; }.narrative-rail li:nth-child(2) { top: 16.66%; }.narrative-rail li:nth-child(3) { top: 33.33%; }.narrative-rail li:nth-child(4) { top: 50%; }.narrative-rail li:nth-child(5) { top: 66.66%; }.narrative-rail li:nth-child(6) { top: 83.33%; }.narrative-rail li:nth-child(7) { top: calc(100% - 7px); }
.narrative-rail li.is-active { border-color: var(--color-accent); background: var(--color-accent); transform: scale(1.35); }
.narrative-rail li span { position: absolute; right: 14px; top: -5px; opacity: 0; color: var(--color-text-muted); font: .48rem var(--font-mono); transition: opacity var(--duration-fast); }
.narrative-rail li.is-active span { opacity: 1; }

.hero { --hero-progress: 0; --hero-exit: 0; --logo-engage: 0; --logo-arc: 0; --logo-transfer: 0; --logo-retire: 0; --logo-bridge-opacity: 0; overflow: clip; }
.hero-sticky { position: relative; min-height: inherit; overflow: hidden; }
.hero-copy, .hero-mark, .hero-footer { will-change: auto; }
.hero.is-current .hero-copy, .hero.is-current .hero-mark, .hero.is-current .hero-footer { will-change: transform, opacity; }
.hero-copy { opacity: calc(1 - var(--hero-exit)); transform: translate3d(0, calc(var(--hero-exit) * -32px), 0) scale(calc(1 - var(--hero-exit) * .018)); transform-origin: left center; }
.hero-mark { opacity: 1; }
.hero-symbol-status { opacity: calc(1 - var(--logo-engage)); transform: translate3d(0, calc(var(--logo-engage) * -4px), 0); }
.hero-symbol-connector { filter: opacity(calc(1 - var(--logo-engage))); }
.hero-footer { opacity: calc(1 - var(--hero-exit) * 1.35); }
.hero-routes { transform: translate3d(0, calc(var(--hero-progress) * 55px), 0) scale(calc(1 + var(--hero-progress) * .025)); transform-origin: center; }
.hero h1 > span { opacity: 0; clip-path: inset(100% 0 0); transform: translateY(28px); animation: title-line-in .9s var(--ease-cinematic) forwards; }
.hero h1 > span:nth-child(1) { animation-delay: .88s; }.hero h1 > span:nth-child(2) { animation-delay: 1s; }.hero h1 > span:nth-child(3) { animation-delay: 1.12s; }

.studio-keywords { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; margin-top: 4rem; padding-block: 1rem; border-block: 1px solid var(--color-border); color: var(--color-text-muted); font: .61rem var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.studio-keywords i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--color-accent), var(--color-border)); transform: scaleX(calc(.2 + var(--studio-progress, 0) * .8)); transform-origin: left; }
.studio-intro { --studio-progress: 0; }
.studio-statement { transform: translate3d(0, calc((1 - var(--studio-progress)) * 20px), 0); }
.assembly-core { transform: none; }

.capability-grid { position: relative; overflow: hidden; }
.capability-rail { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.capability-rail path { fill: none; stroke: rgba(93,150,120,.38); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-cinematic); }
.capability-rail circle { fill: #6ba485; opacity: 0; transition: opacity .4s 1.1s; }
.capabilities.is-current .capability-rail path { stroke-dashoffset: 0; }.capabilities.is-current .capability-rail circle { opacity: 1; }
.capability-card { z-index: 1; }
.capability-card.is-visible svg path, .capability-card.is-visible svg rect { stroke-dasharray: 150; stroke-dashoffset: 150; animation: icon-draw 1.1s .18s var(--ease-cinematic) forwards; }

.product-sticky { --product-progress: 0; }
.product-sticky::before { content: ""; position: absolute; z-index: -1; left: 170px; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, var(--color-accent), var(--color-line) 35%, transparent 80%); opacity: .42; }
.product-sticky::after { content: ""; position: absolute; z-index: 2; top: calc(50% - 3px); left: var(--product-signal-x, 170px); width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 5px var(--color-accent-soft); }
.product-copy, .product-visual { will-change: auto; }
.products.is-current .product-copy, .products.is-current .product-visual { will-change: transform, opacity, clip-path; }
.product-nav button[aria-selected="true"] { text-shadow: 0 0 24px var(--color-glow); }

.principles.is-sequenced .principle-list li { opacity: .34; transform: translateX(0); transition: opacity .55s var(--ease-standard), transform .65s var(--ease-cinematic), padding-left var(--duration-normal) var(--ease-standard), background-color var(--duration-normal); }
.principles.is-sequenced .principle-list li.is-past { opacity: .55; }
.principles.is-sequenced .principle-list li.is-active { opacity: 1; transform: translateX(1rem); }
.principles.is-sequenced .principle-list li.is-active h3 { color: #b7cdbf; }
.principles.is-sequenced .principle-list li i { transform: scaleX(.35); transform-origin: right; transition: transform .6s var(--ease-cinematic); }
.principles.is-sequenced .principle-list li.is-active i { transform: scaleX(1); }

.manifesto { --manifest-progress: 0; overflow: clip; }
.manifesto-shade { position: absolute; inset: 0; pointer-events: none; opacity: calc(.08 + var(--manifest-progress) * .18); background: radial-gradient(circle at calc(20% + var(--manifest-progress) * 45%) 45%, transparent 0, transparent 22%, currentColor 95%); mix-blend-mode: soft-light; }
.manifesto blockquote { transform: translate3d(calc((.5 - var(--manifest-progress)) * 26px), 0, 0); }
.manifesto-copy { transform: translate3d(0, calc((.5 - var(--manifest-progress)) * 24px), 0); }
.manifesto-path span { height: calc(20% + var(--manifest-progress) * 80%); }

.final-cta { --final-progress: 0; overflow: clip; }
.final-cta.is-scroll-driven .final-route { animation: none; }
.final-copy { opacity: 1; transform: none; }
.final-symbol { transform: none; }
.final-cta.is-scroll-driven .final-copy { opacity: var(--final-copy-opacity, .12); transform: translate3d(0, var(--final-copy-shift, 28px), 0); }
.final-cta.is-scroll-driven .final-symbol { transform: none; }

@keyframes title-line-in { to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes icon-draw { to { stroke-dashoffset: 0; } }

@media (min-width: 1180px) {
  .narrative-rail { display: block; }
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hero { min-height: 160svh; }
  .hero-sticky { position: sticky; top: 0; height: 100svh; min-height: 100svh; }
  .manifesto { min-height: 175svh; padding: 0; align-items: start; }
  .manifesto-layout { position: sticky; top: 0; min-height: 100svh; display: grid; align-content: center; padding-block: 4rem; }
  .manifesto blockquote { margin: 4rem 0 2.5rem; }
  .manifesto-note { margin-top: 3.5rem; }
  .final-cta { min-height: 134svh; align-items: start; }
  .final-layout { position: sticky; top: 0; min-height: 100svh; align-content: center; }
}

@media (max-width: 1179px) {
  .narrative-rail { display: none; }
}

@media (max-width: 900px) {
  .hero-copy, .hero-mark, .hero-footer, .hero-routes, .studio-statement, .assembly-core, .manifesto blockquote, .manifesto-copy, .final-copy, .final-symbol { transform: none; }
  .hero-copy, .hero-mark, .hero-footer, .final-copy { opacity: 1; }
  .hero-copy, .hero-mark, .hero-footer, .product-copy, .product-visual { will-change: auto; }
  .hero-symbol-scroll-layer--curve { transform: translate3d(calc(var(--logo-engage, 0) * -2px), 0, 0); }
  .hero-symbol-scroll-layer--diagonal { transform: translate3d(calc(var(--logo-engage, 0) * 7px), calc(var(--logo-engage, 0) * 4px), 0); }
  .hero-logo-bridge__active { stroke-width: 1.15; }
  .final-symbol-mark { clip-path: inset(0) !important; }
  .product-sticky::before, .product-sticky::after { display: none; }
  .principles.is-sequenced .principle-list li, .principles.is-sequenced .principle-list li.is-active { opacity: 1; transform: none; }
  .capability-rail { opacity: .55; }
  .studio-keywords { overflow-x: auto; gap: .75rem; }.studio-keywords span { white-space: nowrap; }.studio-keywords i { min-width: 34px; }
  .chapter { --chapter-threshold: 4rem; background-image: linear-gradient(180deg, var(--chapter-enter), var(--chapter-bg) var(--chapter-threshold), var(--chapter-bg) calc(100% - var(--chapter-threshold)), var(--chapter-exit)); }
  .chapter-meta { gap: 1rem; }
  .chapter-marker { width: min(200px, 100%); font-size: .54rem; }
  .chapter-marker--hero { top: 7rem; }
  .chapter--studio::after, .chapter--principles::before { display: none; }
  .chapter--systems::before { inset: 7rem 0 5%; background-size: 48px 48px; opacity: calc(var(--chapter-grid-opacity) * .65); }
  .chapter--products .products-intro::after { left: 0; }
}

@media (max-width: 520px) {
  .chapter-marker--hero { width: 135px; }
}

html.is-low-power .cursor-halo { display: none; }
html.is-low-power .capability-rail path { transition-duration: .7s; }
html.is-low-power .hero-routes { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal-on-scroll, .hero .reveal { opacity: 1; transform: none; }
  .route-live, .final-route { stroke-dashoffset: 0; }
  .cursor-halo { display: none; }
  .narrative-rail { display: none; }
  .hero, .manifesto, .final-cta { min-height: auto; }
  .hero-sticky, .manifesto-layout, .final-layout { position: relative; top: auto; min-height: auto; }
  .hero-content, .final-layout { min-height: 100svh; }
  .product-stage { height: auto; padding-bottom: 5rem; }
  .product-sticky { position: relative; height: auto; padding-block: 5rem; }
  .product-progress, .product-sticky::before, .product-sticky::after { display: none; }
  .hero-copy, .hero-mark, .hero-footer, .hero-routes, .studio-statement, .assembly-core, .manifesto blockquote, .manifesto-copy, .final-copy, .final-symbol { opacity: 1; transform: none; }
  .hero-copy, .hero-mark, .hero-footer, .product-copy, .product-visual { will-change: auto; }
  .hero-symbol-layer, .hero-symbol-layer--curve, .hero-symbol-layer--diagonal { opacity: 1; visibility: visible; clip-path: inset(0); transform: none; }
  .hero-symbol-scroll-layer, .hero-symbol-scroll-layer--curve, .hero-symbol-scroll-layer--diagonal { opacity: 1; clip-path: inset(0); transform: none; }
  .hero-symbol-connector { opacity: 1; transform: none; }
  .hero-symbol-status { opacity: 1; transform: none; }
  .hero-logo-bridge { opacity: .28; }
  .hero-logo-bridge__active { stroke-dashoffset: 0 !important; opacity: .45; }
  .hero-logo-bridge__pulse { display: none; }
  .brand-symbol__svg { animation: none !important; opacity: 1; visibility: visible; clip-path: inset(0); transform: none; }
  .brand__signal { display: none; }
  .hero-symbol-connector::after { animation: none !important; opacity: 1; }
  .hero-symbol-connector i { display: none; }
  .final-symbol-mark { clip-path: inset(0) !important; }
  .principles.is-sequenced .principle-list li { opacity: 1; transform: none; }
  .capability-rail path { stroke-dashoffset: 0; }
  .chapter-marker, .chapter-marker i { opacity: 1; transform: none; }
  .chapter { --chapter-progress: 1; }
}

@media print {
  .site-header, .page-progress, .cursor-halo, .scroll-cue, .mobile-menu { display: none !important; }
  .scene, .scene-dark, .manifesto { min-height: auto; background: white !important; color: black !important; break-inside: avoid; }
  .product-stage { height: auto; }.product-sticky { position: static; height: auto; }
  .reveal-on-scroll { opacity: 1; transform: none; }
}