.crab-about{--about-muted:#b8bfb0;--about-line:rgba(190,209,170,.22)}
.about-hero,.about-journey{background:var(--surface-inverse);color:var(--text-inverse)}
.about-hero{overflow:hidden;background:radial-gradient(ellipse at 85% 36%,#2c3520 0%,#1c2218 28%,var(--surface-inverse) 66%)}
.about-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;min-height:min(720px,90svh);padding-block:clamp(70px,8vw,118px);position:relative;isolation:isolate}
.about-hero-copy{z-index:1}
.about-kicker{color:var(--action-accent);display:flex;align-items:center;gap:10px;margin:0 0 25px}
.about-kicker>span{width:7px;height:7px;border-radius:50%;background:currentColor}
.about-hero h1{margin:0;font-size:clamp(50px,6.45vw,94px);line-height:1.08;letter-spacing:-.07em;word-break:keep-all}
.about-hero h1 em{color:var(--action-accent);font-style:normal}
.about-lead{color:var(--about-muted);font-size:clamp(16px,1.65vw,21px);line-height:1.75;margin:28px 0 0;word-break:keep-all}
.about-scroll{display:inline-flex;align-items:center;gap:12px;margin-top:42px;font-size:16px;font-weight:650}
.about-scroll>span{display:grid;place-items:center;width:37px;height:37px;border:1px solid var(--about-line);border-radius:50%;transition:color .2s,background .2s}
.about-scroll:hover>span,.about-scroll:focus-visible>span{background:var(--action-accent);color:var(--text-primary)}
.about-hero-visual{position:relative;min-width:0;color:var(--about-muted);margin-left:-24px;margin-right:-42px}
.about-trace,.about-map svg{display:block;width:100%;height:auto}
.about-svg-label{font-family:var(--font-body);font-size:11px;letter-spacing:.13em}
.about-trace-fibers{animation:about-fibers 1.35s ease-out both}
.about-signal{animation:about-signal 1.1s cubic-bezier(.18,.75,.25,1) var(--delay) both}
@keyframes about-signal{from{transform:translate(var(--dx),var(--dy));opacity:.08}}
@keyframes about-fibers{from{opacity:0;transform:translateX(-20px)}}
.about-motion-layer{visibility:hidden}
.about-hero-visual[data-hero-motion] .about-motion-layer{visibility:visible}
.about-light,.about-checkpoint-wave{opacity:0;animation-duration:5.6s;animation-iteration-count:infinite}
.about-light{stroke:var(--action-accent);stroke-width:2.1;stroke-dasharray:14 100;stroke-dashoffset:15;filter:drop-shadow(0 0 4px #d9ff3a)}
.about-light-in{animation-name:about-flow-in}
.about-light-out{animation-name:about-flow-out}
.about-light-echo{stroke-width:1.25;animation-delay:.14s}
.about-light-late{animation-delay:.29s}
.about-checkpoint-wave{stroke:var(--action-accent);stroke-width:1.4;transform-origin:319px 257px;animation-name:about-gate-wave}
.about-hero-visual:not([data-hero-running]) :is(.about-light,.about-checkpoint-wave){animation-play-state:paused}
@keyframes about-flow-in{
  0%,7%{stroke-dashoffset:15;opacity:0}
  14%{opacity:.85}
  42%,49%{stroke-dashoffset:-86;opacity:1}
  55%,100%{stroke-dashoffset:-101;opacity:0}
}
@keyframes about-flow-out{
  0%,49%{stroke-dashoffset:15;opacity:0}
  56%{opacity:.95}
  86%,100%{stroke-dashoffset:-101;opacity:0}
}
@keyframes about-gate-wave{
  0%,40%{transform:scale(.8);opacity:0}
  46%{opacity:.85}
  67%,100%{transform:scale(2.9);opacity:0}
}
.about-motion-control{position:absolute;right:clamp(14px,4vw,48px);bottom:12px;border:1px solid var(--about-line);border-radius:var(--radius-small);background:var(--surface-inverse);color:var(--about-muted);padding:5px 10px;font:inherit;font-size:13px;cursor:pointer}
.about-motion-control:hover{color:var(--action-accent);border-color:currentColor}
.about-journey{padding:100px 0 112px;border-top:1px solid var(--about-line);scroll-margin-top:85px}
.about-journey .eyebrow{color:var(--about-muted)}
.about-journey-heading h2{font-size:clamp(36px,5vw,68px);line-height:1.15;margin:12px 0 46px;word-break:keep-all}
.about-journey-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,7vw,104px);align-items:start}
.about-stages{list-style:none;margin:0;padding:0}
.about-stages>.about-stage{margin:0;min-height:232px;padding:28px 0 40px;border-top:1px solid var(--about-line)}
.about-stage:nth-child(2){border-top-color:var(--action-accent)}
.about-stage:nth-child(2) .eyebrow,.about-stage.is-current .eyebrow{color:var(--action-accent)}
.about-stage h3{font-family:var(--font-display);font-size:clamp(27px,3vw,39px);line-height:1.3;margin:10px 0 12px;word-break:keep-all}
.about-stage-copy{color:var(--about-muted);font-size:17px;line-height:1.7;max-width:36ch;word-break:keep-all;margin:0 0 14px}
.about-stage .text-link{color:var(--text-inverse)}
.about-stage .text-link:hover{color:var(--action-accent)}
.about-map-column{position:sticky;top:112px}
.about-map{margin:0;background:#1b2118;color:var(--about-muted);border:1px solid var(--about-line);border-radius:var(--radius-card);overflow:hidden}
.about-map-caption{display:flex;justify-content:space-between;gap:14px;padding:16px 20px;border-bottom:1px solid var(--about-line);font-size:13px;letter-spacing:.075em}
.about-map-foot{border:0;border-top:1px solid var(--about-line)}
.about-map-progress{stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .72s cubic-bezier(.22,.7,.25,1)}
.about-map[data-stage="0"] .about-map-progress{stroke-dashoffset:99.8}
.about-map[data-stage="1"] .about-map-progress{stroke-dashoffset:50}
.about-map-node circle{fill:#1b2118;stroke:currentColor;stroke-width:1.2}
.about-map-node circle:last-child{fill:currentColor}
.about-map-gate,.about-map[data-stage="0"] [data-node="0"],.about-map[data-stage="2"] [data-node="2"]{color:var(--action-accent)}
.about-map[data-stage="1"] .about-map-gate circle:first-child{fill:#d9ff3a22;animation:about-checkpoint .85s ease-out both}
@keyframes about-checkpoint{from{transform:scale(.78);opacity:.25}}
.about-close{padding:clamp(72px,11vw,148px) 0;background:var(--surface-page)}
.about-close h2{font-size:clamp(33px,5.2vw,76px);line-height:1.23;margin:17px 0 0;letter-spacing:-.065em;word-break:keep-all}
.about-close [data-typewriter-accent]{background:linear-gradient(transparent 50%,var(--action-accent) 50% 93%,transparent 93%);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.crab-about a:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
.crab-about :is(.about-hero,.about-journey) a:focus-visible{outline-color:var(--action-accent)}
@media(max-width:1000px){
  .about-hero-visual{margin-right:-20px}
  .about-hero h1{font-size:clamp(43px,6.3vw,66px)}
}
@media(max-width:760px){
  .about-hero-grid,.about-journey-grid{grid-template-columns:minmax(0,1fr)}
  .about-hero-grid{min-height:0;padding-block:64px 16px}
  .about-hero h1{font-size:clamp(38px,10vw,65px)}
  .about-kicker{margin-bottom:20px}
  .about-lead{margin-top:20px}
  .about-scroll{margin-top:24px}
  .about-hero-visual{margin:0}
  .about-journey{padding:66px 0 72px}
  .about-journey-heading h2{margin-bottom:30px}
  .about-journey-grid{gap:28px}
  .about-map-column{position:static;grid-row:1}
  .about-stages>.about-stage{min-height:0;padding:22px 0 28px}
}
@media(prefers-reduced-motion:reduce){
  .crab-about *,.crab-about *::before,.crab-about *::after{animation:none!important;transition:none!important}
  .about-motion-layer,.about-motion-control{visibility:hidden}
}