.vision-section{background:linear-gradient(#f4f5ed calc(100% - 72px),#ffffff75);padding:110px 48px}.vision-inner{max-width:1248px;margin:auto;display:grid;grid-template-columns:.7fr 1.3fr;gap:64px;align-items:center}
.vision-copy h2{font-size:clamp(2.8rem,5.4vw,4.8rem);font-weight:500;line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
.vision-copy>p{font-size:1rem;line-height:1.8;color:#4c5346;max-width:315px;margin-top:28px}.vision-switch{display:inline-flex;gap:2px;padding:4px;background:#e5e8dd;border-radius:999px;margin-top:32px}
.vision-switch button{min-height:44px;min-width:87px;border:0;border-radius:999px;background:none;color:#394333;font:inherit;font-size:.875rem;cursor:pointer;padding:10px 18px;transition:color var(--dur-hover) var(--ease-in-out) 60ms,transform var(--dur-press) var(--ease-out)}.vision-switch button[aria-pressed=true]{background:#263323;color:#f4f6e4}.vision-switch button[hidden]{display:none}.vision-switch:has(button[hidden]){display:none}
.vision-scene{position:relative;aspect-ratio:1.26;background:#303b36;overflow:hidden;border-radius:var(--radius-media,12px);touch-action:pan-y pinch-zoom}.vision-scene>img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
#vision-canvas{display:none;position:absolute;inset:0;width:100%;height:100%}.vision-ready #vision-canvas{display:block}
.vision-caption{display:flex;justify-content:space-between;gap:20px;font-size:.75rem;color:#4c5346;line-height:1.6;margin-top:14px}.vision-caption a{display:inline-flex;align-items:center;min-height:44px;margin-block:-14px;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}.vision-label{position:absolute;left:20px;top:20px;font-size:10px;letter-spacing:.06em;color:#edf4d9;background:#1c271d99;padding:6px 8px;pointer-events:none;font-family:ui-monospace,SFMono-Regular,monospace}
.project-preview:after{content:'';position:absolute;inset:12px;border:1px solid #ffffffa0;opacity:0;transform:scale(1.03);transition:opacity var(--dur-state) var(--ease-out),transform var(--dur-move) var(--ease-out);pointer-events:none}.project a:focus-visible .project-preview:after{opacity:1;transform:scale(1)}@media(hover:hover) and (pointer:fine){.project a:hover .project-preview:after{opacity:1;transform:scale(1)}}
@media(max-width:900px){.vision-section{padding:80px 28px}.vision-inner{gap:34px;grid-template-columns:.75fr 1.25fr}.vision-copy h2{font-size:3.2rem}.vision-copy>p{font-size:.9375rem;margin-top:22px}.vision-label{left:14px;top:14px}}
@media(max-width:650px){.vision-section{padding:72px 24px}.vision-inner{grid-template-columns:1fr;gap:30px}.vision-copy{display:grid;grid-template-columns:1fr}.vision-copy h2{font-size:2.85rem;max-width:290px}.vision-copy>p{max-width:440px;margin-top:24px}.vision-switch{justify-self:start;margin-top:24px}.vision-scene{aspect-ratio:1}.vision-caption{font-size:.6875rem;gap:12px}.vision-caption>span:last-child{max-width:145px;text-align:right}}
@media(prefers-reduced-motion:reduce){.project-preview:after{transition:none;transform:none}}
/* Image/Signal segmented control: vision.js sizes the thumb (--tx/--tw) once the buttons are shown; without JS the pressed button keeps its own fill. */
.vision-switch{position:relative;isolation:isolate}
.vision-switch.has-thumb:before{content:'';position:absolute;top:4px;bottom:4px;left:0;width:var(--tw,0px);transform:translateX(var(--tx,0px));border-radius:999px;background:#263323;z-index:-1;pointer-events:none}
.vision-switch.thumb-live:before{transition:transform var(--dur-slide) var(--ease-in-out),width var(--dur-slide) var(--ease-in-out)}
.vision-switch.has-thumb button[aria-pressed=true]{background:transparent}
.vision-switch button:active{transform:scale(var(--press-pill))}
@media(prefers-reduced-motion:reduce){.vision-switch button:active{transform:none}}
/* Label colours cross on the thumb's curve (60ms delay + 200ms in-out = midpoint at 160ms, when the 320ms thumb passes under the text), so neither label washes out over the wrong fill; hover responds immediately. */
@media(hover:hover) and (pointer:fine){.vision-switch button[aria-pressed=false]:hover{color:#16201b;transition:color var(--dur-hover) var(--ease-out),transform var(--dur-press) var(--ease-out)}}
@media(forced-colors:active){.vision-switch.has-thumb:before{display:none}.vision-switch button[aria-pressed=true]{outline:2px solid CanvasText}}