/* About only. Complete, resolved composition is the no-script default. */
.about-page { --about-blue: var(--gold-deep, #29358f); --about-muted: #555d6c; --about-line: #d7dce5; color: var(--ink, #222936); background: var(--bg, #fafafa); }
.about-page .eng-shell { width: min(1180px, calc(100% - 64px)); }
.about-page p { color: var(--about-muted); line-height: 2.05; font-size: 1.05rem; }
.about-page h1, .about-page h2 { color: var(--ink, #222936); letter-spacing: -.025em; }
.about-page h2 { font-size: clamp(1.5rem, 2.6vw, 2.45rem); line-height: 1.6; margin: 0 0 22px; }
.about-page .about-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding-block: 72px 88px; }
.about-eyebrow { display: block; color: var(--about-blue); font-weight: 800; margin-bottom: 22px; font-size: .9rem; }
.about-page .about-intro h1 { margin: 0 0 24px; font-size: clamp(2rem, 3.25vw, 3.25rem); line-height: 1.55; font-weight: 900; }
.about-intro p { margin: 0; }
.about-page .eng-actions { gap: 24px; margin-top: 30px; }
.about-page .eng-btn { min-height: 48px; font-size: .95rem; border-radius: 12px; text-align: center; line-height: 1.8; }
.about-page .eng-btn-primary { background: var(--about-blue); color: #fff; }
.about-link { color: var(--about-blue); font-size: .95rem; font-weight: 750; text-decoration: underline; text-underline-offset: 6px; display: inline-flex; align-items: center; min-height: 48px; }
.about-page a:focus-visible { outline: 3px solid var(--about-blue); outline-offset: 5px; }
.about-visual { position: relative; height: 580px; overflow: hidden; border-radius: 24px; isolation: isolate; background: #edf0f4; perspective: 1000px; perspective-origin: 50% 42%; --about-assembly: 1; --about-gap: calc(115px - var(--about-assembly) * 71px); }
.about-background, .about-background img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-background { opacity: .72; }
.about-model { position: absolute; left: 50%; top: 60%; width: 340px; height: 240px; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(calc(58deg - var(--about-assembly) * 26deg)) rotateZ(calc(-26deg + var(--about-assembly) * 16deg)); }
.about-plane { position: absolute; inset: 0; border-radius: 16px; border: 1px solid rgb(255 255 255 / .8); transform-style: preserve-3d; box-shadow: 10px 14px 24px rgb(12 24 56 / .14); backface-visibility: hidden; }
.about-plane::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--about-edge); transform: translateZ(-9px); }
.about-plane > span { position: absolute; right: 24px; top: 22px; font-size: 19px; font-weight: 850; }
.about-plane-base { background: linear-gradient(145deg, #404a61, #182134); --about-edge: #101829; color: #fff; transform: translateZ(0); }
.about-plane-logic { background: linear-gradient(140deg, #6174d7, #29358f 65%); --about-edge: #202a78; color: #fff; transform: translateZ(var(--about-gap)); }
.about-plane-interface { background: linear-gradient(125deg, rgb(255 255 255 / .94), rgb(227 235 255 / .87)); --about-edge: #b7c4e2; color: #29358f; transform: translateZ(calc(var(--about-gap) * 2)); }
.about-substrate { position: absolute; inset: 80px 24px 24px; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.about-substrate i { border: 1px solid #738399; background: #293447; border-radius: 7px; box-shadow: inset 0 2px 0 #71839b; }
.about-logic-trace { position: absolute; inset: 90px 32px 38px; border: 2px solid #c1cbff; border-radius: 16px; }
.about-logic-trace i { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 4px solid #edf0ff; background: #5267cf; top: 50%; transform: translateY(-50%); }
.about-logic-trace i:nth-child(1) { right: -12px; } .about-logic-trace i:nth-child(2) { left: 50%; } .about-logic-trace i:nth-child(3) { left: -12px; }
.about-interface-surface { position: absolute; inset: 83px 24px 24px; display: grid; grid-template-columns: .7fr 1.3fr; gap: 12px; }
.about-interface-surface i { background: #d8e0f5; border: 1px solid #bfcce8; border-radius: 9px; }
.about-interface-surface i:first-child { grid-row: span 2; background: #29358f; border-color: #6678c6; }
.about-model-rod { position: absolute; width: 3px; height: 230px; background: #a0b0ca; transform-origin: top center; transform: rotateX(90deg) scaleY(calc(var(--about-gap) / 115px)); }
.about-rod-one { left: 14px; top: 14px; } .about-rod-two { right: 14px; top: 14px; } .about-rod-three { left: 14px; bottom: -216px; } .about-rod-four { right: 14px; bottom: -216px; }
.about-model-shadow { position: absolute; left: 50%; top: 75%; width: 330px; height: 75px; border-radius: 50%; background: #283c66; opacity: .18; filter: blur(22px); transform: translateX(-50%) scaleX(calc(1.1 - var(--about-assembly) * .15)); }
.about-model-caption { position: absolute; bottom: 24px; width: 100%; text-align: center; color: #29358f; font-size: .9rem; font-weight: 750; }
.about-goal { padding: 64px 0 72px; background: #f0f3f9; }
.about-goal-copy { max-width: 770px; margin-inline: auto; text-align: center; }
.about-goal-copy p { margin: 0; }
.about-connections { direction: ltr; position: relative; height: 400px; margin-top: 48px; --about-path: 0; --about-sales: 1; --about-operations: 1; --about-development: 1; --about-connected: 1; }
.about-paths { position: absolute; width: 100%; height: 100%; inset: 0; overflow: visible; }
.about-paths path { fill: none; stroke-width: 3; }
.about-path-ground { stroke: #cbd3e3; }
.about-path-ink { stroke: var(--about-blue); }
.about-path-ink path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--about-channel)); stroke-linecap: round; }
.about-path-ink path:nth-child(1), .about-node-sales { --about-channel: var(--about-sales); }
.about-path-ink path:nth-child(2), .about-node-operations { --about-channel: var(--about-operations); }
.about-path-ink path:nth-child(3), .about-node-development { --about-channel: var(--about-development); }
.about-node { direction: rtl; position: absolute; left: 8%; width: 18%; padding: 12px 10px; text-align: center; color: var(--about-blue); background: #fff; border: 1px solid #d8dfec; border-radius: 12px; font-weight: 800; transform: translate(calc((1 - var(--about-channel)) * -16px), -50%); }
.about-node-sales { top: 20.5%; }
.about-node-operations { top: 50%; }
.about-node-development { top: 79.5%; }
.about-system { direction: rtl; position: absolute; left: 51%; top: 50%; transform: translate(calc((1 - var(--about-connected)) * 20px), -50%) scale(calc(.94 + var(--about-connected) * .06)); transform-origin: left center; width: 41%; padding: 44px 24px; text-align: center; background: var(--about-blue); border-radius: 24px; color: #fff; box-shadow: 14px 18px 40px rgb(41 53 143 / .14); }
.about-system strong { display: block; font-size: clamp(1.2rem, 2vw, 1.8rem); margin: 24px 0 10px; }
.about-system > span:last-child { font-size: .95rem; color: #e3e8ff; }
.about-system-mark { display: flex; justify-content: center; gap: 7px; height: 36px; align-items: flex-end; }
.about-system-mark i { display: block; width: 16px; height: 24px; background: #d3dcff; border-radius: 3px; }
.about-system-mark i:nth-child(2) { height: 36px; }
.about-system-mark i:nth-child(3) { height: 29px; }
.about-method { padding-block: 88px; background: #fff; }
.about-method-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 88px; }
.about-method-heading p { margin-bottom: 24px; }
.about-commitments { margin: 0; }
.about-commitments > div { padding-block: 24px; border-top: 1px solid var(--about-line); }
.about-commitments > div:first-child { padding-top: 0; border: 0; }
.about-commitments > div:last-child { padding-bottom: 0; }
.about-commitments dt { color: var(--ink, #222936); font-size: 1.15rem; font-weight: 850; margin-bottom: 8px; }
.about-commitments dd { margin: 0; color: var(--about-muted); line-height: 2; }
.about-founder { display: grid; grid-template-columns: .42fr 1fr; gap: 48px; padding-block: 64px; }
.about-founder-label { color: var(--about-blue); font-size: .95rem; border-top: 3px solid var(--about-blue); padding-top: 18px; font-weight: 800; align-self: start; }
.about-founder h2 { font-size: clamp(1.25rem, 1.9vw, 1.65rem); margin-bottom: 14px; }
.about-founder p { margin: 0; }
.about-inquiry { padding-block: 56px; background: #e9edf8; }
.about-inquiry-grid { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
.about-inquiry h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: 14px; }
.about-inquiry p { margin: 0; max-width: 650px; }
.about-inquiry-grid > div:last-child { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.about-page .about-feedback { padding-block: 64px 80px; }
.about-feedback .eng-section-head { max-width: 740px; }
.about-feedback .eng-section-head h2 { font-size: 1.6rem; }
body.trn-ds .about-feedback .eng-band, .about-feedback .eng-band { padding: 0; box-shadow: none; background: transparent; border-radius: 0; column-gap: 24px; }
body.trn-ds .about-feedback .eng-form-card, .about-feedback .eng-form-card { padding: 32px; border: 1px solid var(--about-line); box-shadow: none; border-radius: 20px; }
.about-feedback .eng-actions { margin-top: 8px; }
.about-feedback .eng-alert { margin-bottom: 24px; }
@media (max-width: 1000px) { .about-page .about-hero { gap: 32px; } .about-visual { height: 460px; } .about-method-grid { gap: 48px; } }
@media (max-width: 760px) {
    .about-page .eng-shell { width: calc(100% - 40px); }
    .about-page .about-hero { grid-template-columns: 1fr; padding-block: 36px 48px; gap: 32px; }
    .about-page .about-intro h1 { font-size: clamp(1.8rem, 7.3vw, 2.5rem); line-height: 1.6; }
    .about-page p { font-size: 1rem; line-height: 2; }
    .about-eyebrow { margin-bottom: 16px; }
    .about-page .eng-actions { gap: 12px 20px; margin-top: 22px; }
    .about-visual { height: 420px; border-radius: 20px; --about-gap: calc(88px - var(--about-assembly) * 56px); }
    .about-model { width: 270px; height: 190px; top: 57%; }
    .about-plane > span { font-size: 16px; right: 18px; top: 18px; }
    .about-substrate { inset: 66px 18px 18px; gap: 10px; }
    .about-logic-trace { inset: 72px 26px 30px; }
    .about-interface-surface { inset: 66px 18px 18px; }
    .about-model-shadow { width: 240px; height: 60px; }
    .about-goal { padding-block: 48px 36px; }
    .about-goal-copy { text-align: right; }
    .about-connections { height: 300px; margin-top: 24px; }
    .about-paths path { stroke-width: 5; }
    .about-node { left: 0; width: 28%; padding-inline: 4px; font-size: .95rem; }
    .about-node { transform: translate(calc((1 - var(--about-channel)) * 8px), -50%); }
    .about-system { left: 51%; width: 49%; padding: 32px 12px; border-radius: 18px; }
    .about-system strong { font-size: 1.1rem; margin-top: 20px; }
    .about-system > span:last-child { font-size: .8rem; line-height: 1.9; display: block; }
    .about-method { padding-block: 48px; }
    .about-method-grid { grid-template-columns: 1fr; gap: 32px; }
    .about-method-heading p { margin-bottom: 8px; }
    .about-founder { grid-template-columns: 1fr; gap: 20px; padding-block: 40px; }
    .about-founder-label { border-top-width: 2px; padding-top: 14px; }
    .about-inquiry { padding-block: 40px; }
    .about-inquiry-grid { grid-template-columns: 1fr; gap: 24px; }
    .about-inquiry-grid > div:last-child { flex-direction: row; flex-wrap: wrap; gap: 12px 20px; }
    .about-page .about-feedback { padding-block: 40px 48px; }
    body.trn-ds .about-feedback .eng-form-card, .about-feedback .eng-form-card { padding: 20px; }
    body.trn-ds .about-feedback .eng-band, .about-feedback .eng-band { grid-template-columns: 1fr; }
}
body.trn-ds .about-page .eng-btn { min-height: 48px; font-size: .95rem; line-height: 1.8; }
.about-page a, .about-page input, .about-page textarea, .about-page button { scroll-margin-block: 110px; }
html:has(.about-page) { scroll-padding-block: 110px 40px; }
@media (max-width: 760px) { html:has(.about-page) { scroll-padding-block: 100px 110px; } }
@media (prefers-reduced-motion: reduce) {
    .about-page .about-node { transform: translateY(-50%); }
    .about-page .about-system { transform: translateY(-50%); }
    .about-path-ink path { stroke-dashoffset: 0; }
}

/* Motion is enabled only after JS and viewport checks. Static flow is the default. */
.about-page.is-desktop-story .about-hero-track { height: calc(100svh - 140px + 720px); }
.about-page.is-desktop-story .about-hero { position: sticky; top: 110px; height: calc(100svh - 140px); padding-block: 24px; }
.about-page.is-desktop-story .about-visual { height: min(580px, calc(100svh - 200px)); }
.about-page.is-desktop-story .about-goal { padding: 0; height: calc(100svh - 140px + 1000px); }
.about-page.is-desktop-story .about-goal-stage { position: sticky; top: 110px; height: calc(100svh - 140px); display: flex; flex-direction: column; justify-content: center; padding-block: 28px; }
.about-page.is-desktop-story .about-connections { height: min(340px, 35svh); margin-top: 32px; }
.about-page.is-scene-story .about-scene-track { height: calc(420px + 520px); }
.about-page.is-scene-story .about-visual { position: sticky; top: max(100px, calc((100svh - 420px) / 2)); }
.about-page.is-scene-story .about-diagram-track { height: calc(300px + 620px); margin-top: 24px; }
.about-page.is-scene-story .about-connections { position: sticky; top: max(100px, calc((100svh - 300px) / 2)); margin-top: 0; }
@media (min-width: 761px) and (max-height: 759px) {
    .about-page .about-hero { grid-template-columns: 1fr; }
    .about-page .about-intro { max-width: 780px; }
    .about-page .about-visual { height: 420px; max-width: 620px; margin-inline: auto; }
}
@media (max-height: 700px) and (max-width: 999px) {
    .about-page .about-visual { height: 330px; }
    .about-page .about-model { width: 250px; height: 175px; --about-gap: calc(80px - var(--about-assembly) * 50px); }
    .about-page .about-model-caption { bottom: 14px; font-size: .8rem; }
    .about-page.is-scene-story .about-scene-track { height: calc(330px + 520px); }
    .about-page.is-scene-story .about-visual { top: max(95px, calc((100svh - 330px) / 2)); }
    .about-page .about-connections { height: 280px; }
    .about-page.is-scene-story .about-diagram-track { height: calc(280px + 620px); }
    .about-page.is-scene-story .about-connections { top: max(95px, calc((100svh - 280px) / 2)); }
}