.interactive-chrome{display:flex;justify-content:space-between;gap:12px;padding:11px 15px;background:linear-gradient(#3b474e,#263138);color:#d6dfd9;font:10px/1.4 var(--ui);border-bottom:1px solid #8faaa744}
.interactive-chrome>span:first-child{font-size:7px;letter-spacing:3px}
.visual-controls{display:flex;gap:6px;padding:12px;flex-wrap:wrap}
.visual-controls button{flex:1;padding:9px 12px;border:1px solid #829993;border-radius:5px;background:transparent;color:inherit;font:12px var(--ui);min-height:36px;cursor:pointer}
.visual-controls button[aria-pressed=true]{background:#d9e3d8;color:#233c40;border-color:#d9e3d8}
.visual-controls button:hover{border-color:#cbb997}
.visual-controls button:focus-visible{outline:2px solid #d0b88e;outline-offset:3px}
.bridge-demo,.website-inspector,.process-studio,.concept-shelf-screen{border:1px solid #829794;border-radius:10px;background:#202e35;color:#e4ece5;overflow:hidden;box-shadow:inset 0 1px #edf5e833,0 3px 4px #091b2233,0 20px 40px #0a182944}
/* The redesign message now has a website visitors can inspect. */
body:has(.digital-evolution) .bridge-stage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;align-content:center;align-items:center;column-gap:7%;row-gap:20px;text-align:left}
body:has(.digital-evolution) .bridge-stage>.eyebrow{grid-column:1;grid-row:1}
body:has(.digital-evolution) .bridge-stage h2{grid-column:1;grid-row:2;font-size:clamp(31px,4.5vw,63px);margin:0;max-width:none;line-height:1.1}
body:has(.digital-evolution) .bridge-stage>.text-link{grid-column:1;grid-row:3;justify-self:start;font-size:16px;max-width:100%}
.bridge-demo{grid-column:2;grid-row:1/4;align-self:center;position:relative;transform:perspective(1400px) rotateY(-5deg)}
.bridge-screen,.inspector-screen{position:relative;aspect-ratio:1.6;overflow:hidden;background:#eeeade}
.bridge-screen>img,.inspector-screen>img{width:100%;height:100%;object-fit:cover}
.bridge-wire{position:absolute;inset:0;padding:9% 5%;background:#e4e9e2;display:grid;grid-template-rows:10% 1fr 10%;gap:9%;opacity:0;transition:opacity .65s}
.bridge-wire>i{background:#b4c5be;border:1px solid #829992}.bridge-wire>i:last-child{width:33%;background:#4d686d}.bridge-wire>div{display:grid;grid-template-columns:1fr 1fr;gap:12%}.bridge-wire b{background:repeating-linear-gradient(0deg,transparent 0 11px,#a0b5ac 12px 18px);border:1px solid #a0b5ac}.bridge-wire b:last-child{background:linear-gradient(135deg,#c2cfc5,#7b9993)}
.bridge-demo[data-inspect=structure] .bridge-wire{opacity:1}
.bridge-target{position:absolute;left:4%;top:66%;width:24%;height:12%;border:2px solid #d0b88e;box-shadow:0 0 0 200px #15232950;opacity:0;transition:opacity .6s;pointer-events:none}
.bridge-demo[data-inspect=action] .bridge-target{opacity:1}
.inspect-caption,.inspector-caption,.process-caption{font:12px/1.5 var(--ui);padding:0 15px 14px;margin:0;min-height:50px;text-align:left;color:#c9d9d3}
/* A useful visual counterpart to the existing four-question assessment. */
.website-inspector{grid-column:1;grid-row:2;align-self:start;max-width:600px;width:100%}
.inspector-focus{position:absolute;border:2px solid #d0b88e;border-radius:3px;left:4%;top:25%;width:44%;height:35%;box-shadow:0 0 0 500px #101f2a44;pointer-events:none;transition:left .7s,top .7s,width .7s,height .7s}
.website-inspector[data-area=navigation] .inspector-focus{left:73%;top:7%;width:24%;height:7%}
.website-inspector[data-area=action] .inspector-focus{left:4%;top:67%;width:25%;height:10%}
.website-inspector>small,.process-studio>small{display:block;padding:0 15px 13px;font:10px/1.4 var(--ui);color:#aac0b7}
/* Images lead the two exploration doors; the existing destinations remain real. */
.explore-doors>a{position:relative;overflow:hidden}
.door-photo{width:100%;height:210px;object-fit:cover;border-radius:6px;margin-bottom:18px;border:1px solid #a7b8aa55;transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.explore-doors>a:first-child .door-photo{object-position:center 83%}
.explore-doors>a:hover .door-photo,.explore-doors>a:focus-visible .door-photo{transform:scale(1.035)}
.explore-doors .door-interface{display:none}
/* The visitor chooses how to explore the brief, design and build. */
.process-studio{width:100%;text-align:left}
.process-visual{position:relative;height:270px;overflow:hidden;margin:0 12px 13px;border:1px solid #8ca29d55;border-radius:6px;background:#e6e9df}
.process-visual>[data-process-panel]{height:100%;position:relative;overflow:hidden}
.process-visual img{height:100%;width:100%;object-fit:cover;object-position:top}
.process-visual [data-process-panel=brief]>img{object-position:center 83%;filter:brightness(.8)}
.brief-notes{position:absolute;left:5%;top:10%;width:64%;display:grid;gap:13px;background:#edf0e5eb;border:1px solid #fff8;padding:20px;color:#284247;box-shadow:0 14px 35px #142a3055;transform:rotate(-3deg)}
.brief-notes>span{font:11px var(--ui)}.brief-notes>b{font:500 25px/1.12 var(--serif)}
.process-swatches{position:absolute;right:5%;bottom:8%;display:flex;gap:9px;align-items:center;background:#f7f1e8;padding:13px;border:1px solid #acb8a9;box-shadow:0 9px 22px #152b3544;transform:rotate(4deg)}
.process-swatches>i{display:block;width:26px;height:26px;border-radius:50%;background:#542d42}.process-swatches>i:nth-child(2){background:#ead6d2}.process-swatches>i:nth-child(3){background:#eae6db}.process-swatches>span{font:28px var(--serif);color:#542d42}
.process-open{position:absolute;bottom:10px;left:12px;right:12px;display:block;padding:11px;background:#233840ed;color:#f1eee4;font:12px var(--ui);text-align:center;border:1px solid #91aaa2;border-radius:4px}
.process-open:hover{background:#344e55}
.process-caption{min-height:44px}
.project-invitation .continuum-stage>div:last-of-type>.text-link{margin-top:12px}
.project-invitation .continuum-stage>div>p:not(.eyebrow){margin-bottom:16px}
/* End with a working concept picker, not decorative empty windows. */
.concept-shelf{width:min(620px,88%);margin:0 auto 35px;position:relative;z-index:2}
.concept-shelf-screen{transform:perspective(1200px) rotateX(3deg)}
.concept-shelf-screen a{display:block;position:relative}
.concept-shelf-screen img{width:100%;aspect-ratio:1.9;object-fit:cover;object-position:top}
.concept-shelf-screen a>span{position:absolute;left:12px;bottom:12px;right:12px;background:#1d3339ee;padding:12px;font:12px var(--ui);color:#f3f0e5;border:1px solid #d1dcd477;border-radius:4px;text-align:center}
.concept-shelf .visual-controls{padding-inline:0}.concept-shelf>p{font:12px var(--ui);text-align:center;margin:0 auto;color:#b5cbc5}
@media(max-width:999px){
 body:has(.digital-evolution) .bridge-stage{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:12px;padding:25px 6%;justify-items:center;text-align:center}
 body:has(.digital-evolution) .bridge-stage>.eyebrow{grid-row:1}
 body:has(.digital-evolution) .bridge-stage h2{grid-row:2;font-size:30px}
 .bridge-demo{grid-column:1;grid-row:3;max-width:390px;width:100%;transform:none}
 body:has(.digital-evolution) .bridge-stage>.text-link{grid-row:4;justify-self:center;font-size:14px}
 .bridge-demo .inspect-caption{min-height:40px;padding-bottom:9px;font-size:10px}
 .bridge-demo .visual-controls{padding:8px}.bridge-demo .visual-controls button{font-size:11px;padding:6px;min-height:30px}
 .website-inspector{grid-column:1;grid-row:auto;max-width:none}
 .process-visual{height:220px}
 .continuum-live .project-invitation>.continuum-stage{gap:16px}
 .project-invitation .continuum-stage h2{font-size:31px}
 .process-tabs{padding:8px}.process-tabs button{padding:6px;font-size:11px;min-height:32px}
 .project-invitation .process-caption{font-size:11px;min-height:36px}
 .project-invitation .process-studio>small{font-size:9px}
}
@media(max-width:480px){
 body:has(.digital-evolution) .bridge-stage h2{font-size:25px}
 .bridge-demo{max-width:310px}.bridge-demo .interactive-chrome{font-size:8px;padding:8px}
 .door-photo{height:175px}
 .process-visual{height:190px}.brief-notes{padding:13px}.brief-notes>b{font-size:20px}
 .project-invitation .continuum-stage h2{font-size:26px}
 .process-caption{font-size:11px}.visual-controls button{font-size:11px;padding:8px}
 .concept-shelf{width:92%;margin-bottom:25px}.concept-shelf-screen img{aspect-ratio:1.6}
}
.motion-disabled :is(.bridge-wire,.bridge-target,.inspector-focus,.door-photo){transition:none}
@media(prefers-reduced-motion:reduce){.bridge-demo,.concept-shelf-screen{transform:none}.bridge-wire,.bridge-target,.inspector-focus,.door-photo{transition:none!important}}