/* One uninterrupted opening story: Tokyo → building → continuous diamond. */
.design-process { position:relative; padding:24px 7vw clamp(130px,15vw,210px); color:var(--ink); background:var(--paper); }
.infinity-stage { position:relative; z-index:4; width:min(1160px,100%); height:clamp(320px,38vw,500px); margin:0 auto; isolation:isolate; }
.infinity-still { display:grid; height:100%; place-items:center; font:400 clamp(180px,34vw,420px)/1 Georgia,serif; color:#79979c; }
.process-orbit { position:absolute; z-index:6; inset:0; margin:0; padding:0; list-style:none; pointer-events:none; }
.process-step { --step-accent:#7fd8df; position:absolute; width:min(220px,22vw); pointer-events:auto; }
.process-step-plan { top:50%; left:1%; width:min(150px,16vw); transform:translateY(-50%); }
.process-step-discover { --step-accent:#d7c45b; top:83%; left:24%; transform:translate(-50%,-50%); }
.process-step-define { --step-accent:#ef7f69; top:17%; left:76%; transform:translate(-50%,-50%); }
.process-step-build { --step-accent:#63baa4; top:83%; left:76%; transform:translate(-50%,-50%); }
.process-step-learn { --step-accent:#9b91d5; top:17%; left:24%; transform:translate(-50%,-50%); }
.process-step-button { --glass-x:50%; --glass-y:50%; --glass-tilt-x:0deg; --glass-tilt-y:0deg; --glass-lift:0px; --glass-scale:1; position:relative; width:100%; min-height:64px; padding:11px 17px 11px 47px; display:grid; align-content:center; gap:2px; overflow:hidden; border:1px solid rgba(255,255,255,.88); border-radius:999px; color:#15252a; background:rgba(220,235,237,.62); background:radial-gradient(145px circle at var(--glass-x) var(--glass-y),rgba(255,255,255,.88),rgba(205,238,242,.34) 38%,transparent 65%),linear-gradient(140deg,rgba(255,255,255,.76),rgba(198,220,223,.43) 52%,rgba(239,246,245,.62)); box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(111,177,188,.32),inset 8px 8px 24px rgba(255,255,255,.2),0 15px 38px rgba(33,63,68,.15),0 0 0 1px rgba(89,159,170,.08); font:inherit; text-align:left; cursor:pointer; opacity:.8; backdrop-filter:blur(18px) saturate(1.3) brightness(1.07); -webkit-backdrop-filter:blur(18px) saturate(1.3) brightness(1.07); transform:perspective(520px) translate3d(0,var(--glass-lift),0) rotateX(var(--glass-tilt-x)) rotateY(var(--glass-tilt-y)) scale(var(--glass-scale)); transform-style:preserve-3d; transition:opacity .32s ease,transform .22s ease-out,box-shadow .32s ease,border-color .32s ease; }
.process-step-button::before { content:""; position:absolute; top:50%; left:18px; width:13px; height:13px; border:2px solid rgba(255,255,255,.74); border-radius:50%; background:var(--step-accent); box-shadow:0 0 18px rgba(127,216,223,.5); box-shadow:0 0 18px color-mix(in srgb,var(--step-accent) 76%,transparent); transform:translateY(-50%) translateZ(18px); }
.process-step-button::after { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; background:radial-gradient(105px circle at var(--glass-x) var(--glass-y),#fff 0,#b9edf3 22%,rgba(143,209,219,.52) 47%,rgba(121,184,195,.12) 64%,transparent 75%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.96; pointer-events:none; }
.process-step-index { position:absolute; top:9px; right:17px; color:#446d72; color:color-mix(in srgb,var(--step-accent) 62%,#38575c); font:500 10px/1 'DM Mono',monospace; letter-spacing:.08em; }
.process-step-name { font-size:clamp(16px,1.55vw,21px); font-weight:700; line-height:1.08; letter-spacing:-.035em; }
.process-step-detail { color:rgba(21,43,48,.68); font:500 12px/1.35 'DM Mono',monospace; letter-spacing:-.025em; }
.process-step-button:is(:hover,:focus-visible),.process-step-button.is-active,.process-step-button.is-returning { --glass-lift:-5px; border-color:#fff; background:rgba(229,244,245,.78); background:radial-gradient(165px circle at var(--glass-x) var(--glass-y),rgba(255,255,255,.98),color-mix(in srgb,var(--step-accent) 24%,rgba(205,238,242,.46)) 42%,transparent 68%),linear-gradient(140deg,rgba(255,255,255,.86),rgba(190,220,224,.52)); box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(86,163,176,.42),0 21px 50px rgba(33,63,68,.2),0 0 25px rgba(111,203,216,.2); opacity:1; }
.process-step-button:active { --glass-scale:.97; }
.process-step-button:is(:hover,:focus-visible) .process-step-detail,.process-step-button.is-active .process-step-detail,.process-step-button.is-returning .process-step-detail { color:rgba(21,43,48,.82); }
.process-step-button:focus-visible { outline:3px solid var(--step-accent); outline-offset:4px; }
.process-step-button[aria-pressed="true"] { box-shadow:0 0 0 2px var(--step-accent),0 20px 50px rgba(23,32,24,.2); }
.process-feedback { position:absolute; z-index:7; top:50%; left:50%; margin:0; padding:9px 16px 9px 11px; display:flex; align-items:center; gap:9px; border:1px solid rgba(23,32,24,.14); border-radius:999px; color:#59675f; background:rgba(244,241,233,.88); box-shadow:0 8px 26px rgba(23,32,24,.08); font:500 12px/1.3 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase; opacity:.68; transform:translate(-50%,-50%); transition:color .35s ease,opacity .35s ease,box-shadow .35s ease; pointer-events:none; }
.process-feedback::before { content:""; position:absolute; z-index:-1; top:50%; left:50%; width:clamp(300px,66vw,810px); height:clamp(120px,17vw,210px); border-radius:50%; background:radial-gradient(ellipse at 27% 50%,rgba(155,145,213,.22),rgba(127,216,223,.11) 36%,transparent 64%),radial-gradient(ellipse at 73% 50%,rgba(239,127,105,.2),rgba(215,196,91,.1) 36%,transparent 64%); opacity:.35; filter:blur(9px); mix-blend-mode:multiply; transform:translate(-50%,-50%); transition:opacity .35s ease,filter .35s ease; }
.process-feedback-mark { display:inline-grid; width:26px; height:26px; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:16px; }
.process-direction-map { display:none; position:absolute; z-index:7; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.process-direction-arrow { --arrow-accent:#7fd8df; fill:none; stroke:#59675f; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:.42; transition:stroke .3s ease,stroke-width .3s ease,opacity .3s ease; }
.process-direction-arrow[data-process-arrow="1"] { --arrow-accent:#d7c45b; }
.process-direction-arrow[data-process-arrow="2"] { --arrow-accent:#ef7f69; }
.process-direction-arrow[data-process-arrow="3"] { --arrow-accent:#63baa4; }
.process-direction-arrow[data-process-arrow="4"] { --arrow-accent:#9b91d5; }
.process-direction-map marker path { fill:context-stroke; }
.process-feedback-flow { fill:#172018; stroke:rgba(244,241,233,.94); stroke-width:7px; stroke-linejoin:round; paint-order:stroke fill; font-family:Montserrat,Arial,sans-serif; font-size:14px; font-weight:600; letter-spacing:.08em; }
.infinity-stage.is-feedback-return .process-feedback { color:#ef7f69; box-shadow:0 10px 30px rgba(239,127,105,.14); opacity:1; }
.infinity-stage.is-feedback-return .process-feedback::before { filter:blur(5px) drop-shadow(0 0 10px rgba(127,216,223,.58)); opacity:1; }
.infinity-stage.is-feedback-return .process-feedback-mark { animation:process-feedback-return 1.6s linear infinite; }
@keyframes process-feedback-return { to { transform:rotate(-1turn); } }
.design-process-copy { position:relative; z-index:4; max-width:1160px; margin:clamp(48px,5vw,72px) auto 0; text-align:left; }
.design-process-body { margin:0; font-size:16px; line-height:1.7; text-align:left; }
.design-process-body p { margin:0; }
.design-process-intro { display:grid; }
.design-process-kicker { width:100%; padding-top:13px; display:flex; justify-content:space-between; border-top:1px solid rgba(23,32,24,.42); color:#59675f; font:700 11px/1 Montserrat,Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.design-process h2 { max-width:1060px; margin:clamp(25px,3vw,42px) 0 0; font-size:clamp(56px,7.2vw,106px); font-weight:600; line-height:.91; letter-spacing:-.065em; text-wrap:balance; }
.design-process h2 em { display:inline; letter-spacing:-.035em; }
.design-process-lede { max-width:720px; margin:clamp(36px,4.3vw,60px) 0 0!important; font-family:Montserrat,Arial,sans-serif; font-size:clamp(17px,1.45vw,21px); font-weight:500; line-height:1.62; letter-spacing:-.018em; text-align:left; text-wrap:pretty; }
.design-process-argument { position:relative; margin-top:clamp(70px,8vw,110px); padding-top:24px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(40px,6vw,90px); border-top:1px solid rgba(23,32,24,.28); }
.design-process-argument::before { display:none; }
.design-process-argument p,
.design-process-coda p:last-child { max-width:510px; font-family:Montserrat,Arial,sans-serif; font-size:clamp(16px,1.25vw,18px); font-weight:500; line-height:1.72; letter-spacing:-.015em; }
.design-process-argument p:last-child { margin:0; }
.design-process-coda { max-width:1160px; margin-top:clamp(76px,9vw,124px)!important; padding-top:26px; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.65fr); gap:clamp(48px,7vw,112px); overflow:visible; border-top:1px solid #172018; border-radius:0; color:#172018; background:none; box-shadow:none; }
.design-process-coda p { margin:0; }
.design-process-coda p + p { margin-top:0; }
.design-process-coda::after { display:none; }
.design-process-thesis { max-width:760px; font-family:'Playfair Display',Georgia,serif; font-size:clamp(29px,3.2vw,46px); font-weight:500; line-height:1.13; letter-spacing:-.045em; text-wrap:balance; }
.design-process-thesis em { color:#b75e54; }
.design-process-coda p:last-child { align-self:start; }
.design-story { position:relative; isolation:isolate; display:flow-root; background:var(--paper); }
html[data-experience="full"] .design-story>.hero-ai-bridge {
  display:block; position:sticky; z-index:3; top:0; left:auto; width:100%; height:100svh;
  margin-bottom:-100svh; pointer-events:none; mix-blend-mode:normal; mask-image:none; -webkit-mask-image:none;
}
html[data-experience="full"] .design-story[data-particle-canvas="document"]>.hero-ai-bridge {
  position:absolute; top:var(--design-current-anchor-top,0px);
}
.design-story>.hero,.design-story>.manifesto,.design-story>.design-process { isolation:auto; content-visibility:visible; }
.design-story>.hero { overflow:visible; }
.design-story>.hero #hero-night-scene { overflow:hidden; }
.design-story>.hero[data-hero-study="lightways"] { padding-bottom:clamp(180px,24vh,280px); }
.design-story>.hero[data-hero-study="lightways"]::before {
  background:linear-gradient(180deg,rgba(1,7,20,.12),transparent 34%,transparent 80%,#11152e 100%);
}
.design-story>.hero .hero-heading-panel,.design-story>.hero .hero-bottom { z-index:4; opacity:1; }
.design-story>.manifesto {
  overflow:visible; padding-top:clamp(230px,30vh,360px); padding-bottom:clamp(160px,21vh,240px);
  background:linear-gradient(180deg,#11152e 0,#282846 90px,#747287 200px,var(--paper) 380px);
}
.design-story>.manifesto::before { display:none; }
.design-story>.manifesto::after { display:none; }
.design-story .manifesto-copy,.design-story .ai-phone { z-index:4; }
.design-story .ai-phone { opacity:1; transform:none; }
.design-story .ai-phone-spark { display:none; }
.design-story .infinity-still { visibility:hidden; }
.design-story .design-process { background:transparent; }

/* Wayfinding is the default. The other preview studies retain the same
   accessible sequence and interaction for comparison. */
html[data-process-study] .process-step { width:auto; }
html[data-process-study] .process-step-plan { width:auto; }

/* Study A: quiet editorial signposts, with the loop doing the visual work. */
html[data-process-study="signpost"] .infinity-stage { margin:0 auto; }
html[data-process-study="signpost"] .process-step { z-index:8; }
html[data-process-study="signpost"] .process-step-plan { top:50%; left:0; transform:translate(-100%,-50%); }
html[data-process-study="signpost"] .process-step-discover { top:87%; left:25%; transform:translate(-50%,0); }
html[data-process-study="signpost"] .process-step-define { top:13%; left:75%; transform:translate(-50%,-100%); }
html[data-process-study="signpost"] .process-step-build { top:87%; left:75%; transform:translate(-50%,0); }
html[data-process-study="signpost"] .process-step-learn { top:13%; left:25%; transform:translate(-50%,-100%); }
html[data-process-study="signpost"] .process-step-button { width:max-content; min-height:0; padding:0 0 0 16px; display:grid; gap:3px; overflow:visible; border:0; border-radius:0; color:#172018; background:none; box-shadow:none; font:inherit; text-align:left; opacity:1; backdrop-filter:none; -webkit-backdrop-filter:none; transform:none; transition:color .22s ease,letter-spacing .22s ease; }
html[data-process-study="signpost"] .process-step-button::before { top:.58em; left:0; width:6px; height:6px; border:0; border-radius:50%; background:var(--step-accent); box-shadow:none; transform:none; }
html[data-process-study="signpost"] .process-step-button::after { display:none; }
html[data-process-study="signpost"] .process-step-index { position:static; order:1; color:#68766e; font-size:10px; }
html[data-process-study="signpost"] .process-step-name { order:2; font-family:'Playfair Display',Georgia,serif; font-size:clamp(19px,2vw,28px); font-weight:500; line-height:.95; letter-spacing:-.045em; }
html[data-process-study="signpost"] .process-step-detail { order:3; color:#59675f; font-size:11px; }
html[data-process-study="signpost"] .process-step-button:is(:hover,:focus-visible),html[data-process-study="signpost"] .process-step-button.is-active,html[data-process-study="signpost"] .process-step-button.is-returning { --glass-lift:0px; border:0; color:var(--step-accent); background:none; box-shadow:none; letter-spacing:-.02em; }
html[data-process-study="signpost"] .process-step-button[aria-pressed="true"] { box-shadow:none; }
html[data-process-study="signpost"] .process-feedback { padding:0; display:block; border:0; border-radius:0; color:#59675f; background:none; box-shadow:none; font-size:10px; letter-spacing:.14em; opacity:1; white-space:nowrap; }
html[data-process-study="signpost"] .process-feedback::before { width:clamp(150px,20vw,240px); height:1px; background:currentColor; filter:none; mix-blend-mode:normal; opacity:.3; }
html[data-process-study="signpost"] .process-feedback-mark { display:none; }
html[data-process-study="signpost"] .infinity-stage.is-feedback-return .process-feedback { color:#ef7f69; box-shadow:none; }
html[data-process-study="signpost"] .infinity-stage.is-feedback-return .process-feedback::before { filter:none; opacity:.6; }

/* Study B: a precise diagram of numbered points, with no enclosing controls. */
html[data-process-study="markers"] .process-step-button { width:max-content; min-height:0; padding:0 0 0 30px; display:grid; gap:2px; overflow:visible; border:0; border-radius:0; color:#172018; background:none; box-shadow:none; font:inherit; text-align:left; opacity:1; backdrop-filter:none; -webkit-backdrop-filter:none; transform:none; transition:color .22s ease; }
html[data-process-study="markers"] .process-step-button::before { top:50%; left:0; width:17px; height:17px; border:1.5px solid var(--step-accent); border-radius:50%; background:rgba(244,241,233,.74); box-shadow:0 0 0 4px rgba(244,241,233,.55); transform:translateY(-50%); }
html[data-process-study="markers"] .process-step-button::after { display:none; }
html[data-process-study="markers"] .process-step-index { position:static; order:1; color:#68766e; font-size:9px; }
html[data-process-study="markers"] .process-step-name { order:2; font-size:15px; font-weight:700; line-height:1; letter-spacing:-.025em; text-transform:uppercase; }
html[data-process-study="markers"] .process-step-detail { order:3; color:#59675f; font-size:10px; letter-spacing:-.02em; }
html[data-process-study="markers"] .process-step-button:is(:hover,:focus-visible),html[data-process-study="markers"] .process-step-button.is-active,html[data-process-study="markers"] .process-step-button.is-returning { --glass-lift:0px; border:0; color:#172018; background:none; box-shadow:none; }
html[data-process-study="markers"] .process-step-button:is(:hover,:focus-visible)::before,html[data-process-study="markers"] .process-step-button.is-active::before,html[data-process-study="markers"] .process-step-button.is-returning::before { background:var(--step-accent); box-shadow:0 0 0 4px rgba(244,241,233,.55),0 0 0 7px color-mix(in srgb,var(--step-accent) 28%,transparent); }
html[data-process-study="markers"] .process-step-button[aria-pressed="true"] { box-shadow:none; }
html[data-process-study="markers"] .process-feedback { width:118px; height:118px; padding:0 20px; display:grid; place-items:center; border:0; border-radius:50%; color:#59675f; background:rgba(244,241,233,.48); box-shadow:none; font-size:9px; letter-spacing:.09em; line-height:1.45; text-align:center; opacity:1; white-space:normal; }
html[data-process-study="markers"] .process-feedback::before { width:100%; height:100%; border:1px solid currentColor; border-radius:50%; background:none; filter:none; mix-blend-mode:normal; opacity:.35; }
html[data-process-study="markers"] .process-feedback-mark { display:none; }
html[data-process-study="markers"] .infinity-stage.is-feedback-return .process-feedback { color:#ef7f69; box-shadow:none; }
html[data-process-study="markers"] .infinity-stage.is-feedback-return .process-feedback::before { filter:none; opacity:.8; }

/* Study C: a compact editorial index in strong, squared-off contrast. */
html[data-process-study="index"] .process-step-button { width:max-content; min-height:42px; padding:8px 12px; display:grid; grid-template-columns:auto 1fr; column-gap:9px; align-content:center; overflow:hidden; border:1px solid #172018; border-radius:2px; color:#f4f1e9; background:#172018; box-shadow:none; font:inherit; text-align:left; opacity:1; backdrop-filter:none; -webkit-backdrop-filter:none; transform:none; transition:background .22s ease,color .22s ease,border-color .22s ease; }
html[data-process-study="index"] .process-step-button::before,html[data-process-study="index"] .process-step-button::after { display:none; }
html[data-process-study="index"] .process-step-index { position:static; grid-row:1 / span 2; color:var(--step-accent); font-size:10px; }
html[data-process-study="index"] .process-step-name { grid-column:2; font-size:15px; font-weight:700; line-height:1; letter-spacing:-.025em; }
html[data-process-study="index"] .process-step-detail { grid-column:2; color:rgba(244,241,233,.7); font-size:10px; }
html[data-process-study="index"] .process-step-button:is(:hover,:focus-visible),html[data-process-study="index"] .process-step-button.is-active,html[data-process-study="index"] .process-step-button.is-returning { --glass-lift:0px; border-color:var(--step-accent); color:#172018; background:var(--step-accent); box-shadow:none; }
html[data-process-study="index"] .process-step-button:is(:hover,:focus-visible) .process-step-detail,html[data-process-study="index"] .process-step-button.is-active .process-step-detail,html[data-process-study="index"] .process-step-button.is-returning .process-step-detail { color:rgba(23,32,24,.7); }
html[data-process-study="index"] .process-step-button[aria-pressed="true"] { box-shadow:0 0 0 3px rgba(23,32,24,.16); }
html[data-process-study="index"] .process-feedback { padding:8px 12px; border:1px solid #172018; border-radius:2px; color:#f4f1e9; background:#172018; box-shadow:none; font-size:9px; letter-spacing:.1em; opacity:1; white-space:nowrap; }
html[data-process-study="index"] .process-feedback::before { display:none; }
html[data-process-study="index"] .process-feedback-mark { display:none; }
html[data-process-study="index"] .infinity-stage.is-feedback-return .process-feedback { border-color:#ef7f69; color:#172018; background:#ef7f69; box-shadow:none; }

/* Study D: editorial wayfinding — quiet annotations around the living diagram. */
html[data-process-study="wayfinding"] .process-direction-map,
html[data-process-study="editorial"] .process-direction-map { display:block; }
html[data-process-study="wayfinding"] .process-orbit,
html[data-process-study="editorial"] .process-orbit { z-index:8; }
html[data-process-study="wayfinding"] .process-step-plan,
html[data-process-study="editorial"] .process-step-plan { top:50%; left:0; transform:translate(-22%,-50%); }
html[data-process-study="wayfinding"] .process-step-discover,
html[data-process-study="editorial"] .process-step-discover { top:87%; left:25%; transform:translate(-50%,0); }
html[data-process-study="wayfinding"] .process-step-define,
html[data-process-study="editorial"] .process-step-define { top:13%; left:75%; transform:translate(-50%,-100%); }
html[data-process-study="wayfinding"] .process-step-build,
html[data-process-study="editorial"] .process-step-build { top:87%; left:75%; transform:translate(-50%,0); }
html[data-process-study="wayfinding"] .process-step-learn,
html[data-process-study="editorial"] .process-step-learn { top:13%; left:25%; transform:translate(-50%,-100%); }
html[data-process-study="wayfinding"] .process-step-button { position:relative; isolation:isolate; width:clamp(150px,15vw,210px); min-height:0; padding:10px 0 9px; display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:9px; align-items:start; overflow:visible; border:0; border-top:1px solid rgba(23,32,24,.34); border-radius:0; color:#172018; background:none; box-shadow:none; text-align:left; opacity:.72; backdrop-filter:none; -webkit-backdrop-filter:none; transform:none; transition:opacity .3s ease,transform .38s cubic-bezier(.22,1,.36,1),border-color .3s ease; }
html[data-process-study="wayfinding"] .process-step-button::before,
html[data-process-study="wayfinding"] .process-step-button::after { display:none; }
html[data-process-study="wayfinding"] .process-step-index { position:static; grid-row:1; width:auto; height:auto; display:block; overflow:visible; border:0; border-radius:0; color:var(--step-accent); background:none; font:700 10px/1 Montserrat,Arial,sans-serif; letter-spacing:.08em; text-indent:0; transition:color .28s ease; }
html[data-process-study="wayfinding"] .process-step-index::before { display:none; }
html[data-process-study="wayfinding"] .process-step-copy { grid-column:2; grid-row:1; display:grid; align-content:start; gap:4px; }
html[data-process-study="wayfinding"] .process-step-name { position:relative; height:.98em; display:block; overflow:hidden; font:500 clamp(20px,2vw,28px)/.96 'Playfair Display',Georgia,serif; letter-spacing:-.045em; text-transform:none; }
html[data-process-study="wayfinding"] .process-step-name::after { content:attr(data-label); position:absolute; top:100%; left:0; color:var(--step-accent); white-space:nowrap; transform:translateY(0); transition:transform .42s cubic-bezier(.22,1,.36,1); }
html[data-process-study="wayfinding"] .process-step-name-text { display:block; transform:translateY(0); transition:transform .42s cubic-bezier(.22,1,.36,1); }
html[data-process-study="wayfinding"] .process-step-detail { color:#59675f; font:500 11px/1.35 Montserrat,Arial,sans-serif; letter-spacing:-.01em; transition:color .28s ease; }
html[data-process-study="wayfinding"] .process-step-button:is(:hover,:focus-visible),
html[data-process-study="wayfinding"] .process-step-button.is-active,
html[data-process-study="wayfinding"] .process-step-button.is-returning { border:0; border-top:1px solid var(--step-accent); color:#172018; background:none; box-shadow:none; opacity:1; transform:none; }
html[data-process-study="wayfinding"] .process-step-button:is(:hover,:focus-visible) .process-step-index,
html[data-process-study="wayfinding"] .process-step-button.is-active .process-step-index,
html[data-process-study="wayfinding"] .process-step-button.is-returning .process-step-index { color:#172018; }
html[data-process-study="wayfinding"] .process-step-button:is(:hover,:focus-visible) .process-step-name-text { transform:translateY(-112%); }
html[data-process-study="wayfinding"] .process-step-button:is(:hover,:focus-visible) .process-step-name::after { transform:translateY(-100%); }
html[data-process-study="wayfinding"] .process-step-button:is(:hover,:focus-visible) .process-step-detail { color:color-mix(in srgb,var(--step-accent) 72%,#172018); }
html[data-process-study="wayfinding"] .process-step-button[aria-pressed="true"] { box-shadow:none; }
html[data-process-study="wayfinding"] .process-direction-arrow { stroke:#59675f; stroke-width:1.35; opacity:.42; }
html[data-process-study="wayfinding"] .process-feedback-flow { font:600 13px/1 Montserrat,Arial,sans-serif; letter-spacing:.035em; text-transform:none; }
html[data-process-study="wayfinding"] .process-feedback-flow-outline { fill:none; stroke:rgba(244,241,233,.96); stroke-width:7px; }
html[data-process-study="wayfinding"] .process-feedback-flow-fill { fill:#59675f; stroke:none; }

/* Study E: an expressive editorial index with oversized serif numerals. */
html[data-process-study="editorial"] .process-step-button { width:max-content; min-height:0; padding:4px 8px 8px; display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:10px; align-items:center; overflow:visible; border:0; border-bottom:3px solid var(--step-accent); border-radius:0; color:#172018; background:linear-gradient(90deg,color-mix(in srgb,var(--step-accent) 14%,transparent),transparent 78%); box-shadow:none; text-align:left; opacity:1; backdrop-filter:none; -webkit-backdrop-filter:none; transform:none; transition:background .28s ease,border-color .28s ease; }
html[data-process-study="editorial"] .process-step-button::before,
html[data-process-study="editorial"] .process-step-button::after { display:none; }
html[data-process-study="editorial"] .process-step-index { position:static; grid-row:1 / span 2; color:var(--step-accent); font:500 italic clamp(52px,5.6vw,82px)/.72 'Playfair Display',Georgia,serif; letter-spacing:-.09em; transition:color .28s ease,transform .28s ease; }
html[data-process-study="editorial"] .process-step-name { grid-column:2; align-self:end; font:700 clamp(14px,1.2vw,17px)/1 Montserrat,Arial,sans-serif; letter-spacing:-.02em; }
html[data-process-study="editorial"] .process-step-detail { grid-column:2; align-self:start; color:#59675f; font:500 10px/1.3 'DM Mono',monospace; letter-spacing:-.025em; }
html[data-process-study="editorial"] .process-step-button:is(:hover,:focus-visible),
html[data-process-study="editorial"] .process-step-button.is-active,
html[data-process-study="editorial"] .process-step-button.is-returning { border-color:#172018; color:#172018; background:linear-gradient(90deg,color-mix(in srgb,var(--step-accent) 34%,transparent),transparent 82%); box-shadow:none; }
html[data-process-study="editorial"] .process-step-button:is(:hover,:focus-visible) .process-step-index,
html[data-process-study="editorial"] .process-step-button.is-active .process-step-index,
html[data-process-study="editorial"] .process-step-button.is-returning .process-step-index { color:#172018; transform:translateY(-3px); }
html[data-process-study="editorial"] .process-step-button[aria-pressed="true"] { box-shadow:none; }
html[data-process-study="editorial"] .process-direction-arrow { stroke:var(--arrow-accent); stroke-width:2.6; stroke-dasharray:1 9; opacity:.72; }
html[data-process-study="editorial"] .process-feedback-flow { font:500 italic 17px/1 'Playfair Display',Georgia,serif; letter-spacing:.035em; }
html[data-process-study="editorial"] .process-feedback-flow-outline { fill:none; stroke:rgba(244,241,233,.98); stroke-width:8px; }
html[data-process-study="editorial"] .process-feedback-flow-fill { fill:#ef7f69; stroke:none; }
html[data-process-study="wayfinding"] .process-feedback,
html[data-process-study="editorial"] .process-feedback { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
html[data-process-study="wayfinding"] .infinity-stage[data-active-step="0"] .process-direction-arrow[data-process-arrow="0"],
html[data-process-study="wayfinding"] .infinity-stage[data-active-step="1"] .process-direction-arrow[data-process-arrow="1"],
html[data-process-study="wayfinding"] .infinity-stage[data-active-step="2"] .process-direction-arrow[data-process-arrow="2"],
html[data-process-study="wayfinding"] .infinity-stage[data-active-step="3"] .process-direction-arrow[data-process-arrow="3"],
html[data-process-study="wayfinding"] .infinity-stage[data-active-step="4"] .process-direction-arrow[data-process-arrow="4"],
html[data-process-study="editorial"] .infinity-stage[data-active-step="0"] .process-direction-arrow[data-process-arrow="0"],
html[data-process-study="editorial"] .infinity-stage[data-active-step="1"] .process-direction-arrow[data-process-arrow="1"],
html[data-process-study="editorial"] .infinity-stage[data-active-step="2"] .process-direction-arrow[data-process-arrow="2"],
html[data-process-study="editorial"] .infinity-stage[data-active-step="3"] .process-direction-arrow[data-process-arrow="3"],
html[data-process-study="editorial"] .infinity-stage[data-active-step="4"] .process-direction-arrow[data-process-arrow="4"] { stroke:var(--arrow-accent); stroke-width:3; opacity:1; }

@media(max-width:850px) {
  .design-story>.manifesto { padding-top:260px; padding-bottom:160px; gap:80px; }
  .design-story>.hero[data-hero-study="lightways"] { padding-bottom:150px; }
  .design-story .ai-phone { width:min(65vw,310px); }
  .infinity-stage { height:clamp(400px,68vw,480px); width:100%; }
  .process-step { width:min(190px,26vw); }
  .process-step-plan { width:min(130px,20vw); }
  .process-step-button { min-height:58px; padding:10px 13px 10px 40px; }
  .process-step-button::before { left:14px; width:11px; height:11px; }
  .process-step-detail { font-size:11px; }
  .design-process { padding:12px 6vw 110px; }
  .design-process h2 { max-width:720px; font-size:clamp(52px,11vw,82px); }
  .design-process-body { margin-top:0; }
  .design-process-lede { margin-left:0!important; }
  .design-process-argument { grid-template-columns:1fr; gap:34px; }
  .design-process-argument p,.design-process-argument p:last-child { max-width:680px; }
  .design-process-coda { grid-template-columns:1fr; gap:34px; border-radius:0; }
  .design-process-coda p:last-child { max-width:680px; }
}
@media(max-width:650px) {
  .infinity-stage { height:500px; }
  .process-step { width:145px; }
  .process-step-plan { left:0; width:112px; }
  .process-step-discover { top:82%; left:0; transform:translateY(-50%); }
  .process-step-define { top:18%; left:100%; transform:translate(-100%,-50%); }
  .process-step-build { top:82%; left:100%; transform:translate(-100%,-50%); }
  .process-step-learn { top:18%; left:0; transform:translateY(-50%); }
  .process-step-button { min-height:58px; padding:10px 11px 10px 36px; border-radius:999px; }
  .process-step-button::before { left:12px; width:10px; height:10px; border-width:2px; }
  .process-step-index { top:7px; right:8px; font-size:9px; }
  .process-step-name { font-size:17px; }
  .process-step-detail { max-width:100px; font-size:10.5px; }
  .process-feedback { top:50%; left:50%; max-width:180px; padding:8px 12px 8px 9px; font-size:10px; white-space:nowrap; }
  .process-feedback::before { width:min(82vw,320px); }
  .design-process h2 { font-size:clamp(48px,15vw,72px); }
  .design-process-kicker { font-size:9px; }
  .design-process-lede { margin-left:0!important; font-size:clamp(16px,4.5vw,19px); }
  .design-process-argument { margin-top:44px; padding-top:22px; }
  .design-process-coda { margin-top:54px!important; padding:22px 0 0; border-radius:0; }
  .design-process-thesis { font-size:clamp(28px,8vw,38px); }
  html[data-process-study="signpost"] .process-step-name { font-size:clamp(16px,5.3vw,21px); }
  html[data-process-study="signpost"] .process-step-detail { font-size:10px; }
  html[data-process-study="signpost"] .process-feedback { font-size:9px; letter-spacing:.1em; }
  html[data-process-study="wayfinding"] .infinity-stage { height:400px; margin:56px auto 0; }
  html[data-process-study="wayfinding"] .process-step-plan { transform:translate(0,-50%); }
  html[data-process-study="wayfinding"] .process-step-button { width:clamp(112px,31vw,142px); grid-template-columns:21px minmax(0,1fr); column-gap:6px; justify-items:start; text-align:left; }
  html[data-process-study="wayfinding"] .process-step-plan .process-step-button { width:112px; grid-template-columns:21px minmax(0,1fr); column-gap:6px; }
  html[data-process-study="wayfinding"] .process-step-index { width:auto; height:auto; font-size:9px; }
  html[data-process-study="wayfinding"] .process-step-copy,
  html[data-process-study="wayfinding"] .process-step-plan .process-step-copy { grid-column:2; grid-row:1; justify-items:start; }
  html[data-process-study="wayfinding"] .process-step-name { font-size:17px; }
  html[data-process-study="wayfinding"] .process-step-detail { max-width:110px; font-size:10px; line-height:1.35; text-wrap:balance; }
  html[data-process-study="wayfinding"] .design-process-copy { margin-top:54px; }
  html[data-process-study="editorial"] .process-step-button { padding:2px 4px 6px; column-gap:6px; }
  html[data-process-study="editorial"] .process-step-index { font-size:48px; }
  html[data-process-study="editorial"] .process-step-name { font-size:12px; }
  html[data-process-study="editorial"] .process-step-detail { max-width:86px; font-size:8px; }
  html[data-process-study="wayfinding"] .process-feedback-flow { font-size:10px; }
  html[data-process-study="editorial"] .process-feedback-flow { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-experience="full"] .design-story>.hero-ai-bridge { visibility:hidden; }
  .design-story .infinity-still { visibility:visible; }
  .process-step-button,.process-feedback { transition:none; }
  .process-direction-arrow { transition:none; }
  html[data-process-study="wayfinding"] .process-step-index,
  html[data-process-study="wayfinding"] .process-step-index::before,
  html[data-process-study="wayfinding"] .process-step-name::after,
  html[data-process-study="wayfinding"] .process-step-name-text,
  html[data-process-study="wayfinding"] .process-step-detail { transition:none; }
  .infinity-stage.is-feedback-return .process-feedback-mark { animation:none; }
}
html:not(.js)[data-process-study="wayfinding"] .process-feedback { top:74%; width:auto; height:auto; padding:0; overflow:visible; clip:auto; border:0; border-radius:0; background:none; box-shadow:none; opacity:1; }
html[data-motion-capture] #design-process { display:none; }

/* Slow the opening story down around its major ideas. */
@media(min-width:851px) {
  .design-story>.manifesto { padding-bottom:clamp(230px,28vh,340px); }
  .design-story>.design-process { padding-top:clamp(100px,12vh,160px); padding-bottom:clamp(210px,25vh,310px); }
}
@media(max-width:850px) {
  .design-story>.manifesto { padding-bottom:clamp(180px,24vh,250px); }
  .design-story>.design-process { padding-top:clamp(80px,12vh,120px); padding-bottom:clamp(150px,22vh,220px); }
}