.demo-screen-cover>a{pointer-events:auto;font-size:14px;padding:16px 24px;box-shadow:0 12px 35px #0004;gap:20px}
/* Lock the portfolio while the original laptop owns the viewport. */
html.demo-focused,html.demo-focused body{overflow:hidden!important;overscroll-behavior:none}
html.demo-focused .concept-switch{display:none}
html.demo-focused .demo-reveal.interactive .demo-sticky{position:fixed;inset:0;z-index:100;height:100svh;min-height:0;padding:12px 3%;background:var(--surface);display:flex;justify-content:flex-start;overflow:hidden}
html.demo-focused .demo-intro{width:100%;max-width:none;min-height:44px;gap:12px;flex-wrap:nowrap;margin:0}
html.demo-focused .demo-intro>div{margin-right:auto}
html.demo-focused .demo-intro .eyebrow,html.demo-focused .demo-caption{display:none}
html.demo-focused .demo-intro h2{font-size:20px;margin:0}
html.demo-focused .demo-intro .demo-expand{padding:10px 16px;font-size:14px;gap:12px;min-height:44px}
html.demo-focused .demo-reveal.interactive .laptop-rig{width:min(94vw,calc((100svh - 80px)*1.23));aspect-ratio:1.23;margin:auto;flex:none}
.demo-mode-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.demo-mode-options .button{width:100%;min-height:52px;justify-content:center;gap:16px;padding:16px 20px;line-height:1.3}
@media(max-width:650px){.demo-mode-options{grid-template-columns:1fr}html.demo-focused .demo-intro h2{font-size:16px}html.demo-focused .demo-intro>.demo-expand:not(.demo-exit){display:none}}
/* Expand the actual MacBook in place, keeping its original live iframe. */
.demo-reveal.interactive{height:auto;min-height:100svh;scroll-margin-top:0}
.demo-reveal.interactive .demo-sticky{position:relative;height:auto;min-height:100svh;padding:24px 3%;overflow:clip}
.demo-reveal.interactive .laptop-rig{display:block;width:min(1400px,100%,calc(160svh - 180px));aspect-ratio:1.5;transition:width .55s ease}
.demo-reveal.interactive .demo-intro{flex-wrap:wrap;margin-bottom:0}
.demo-reveal.interactive .demo-intro h2{font-size:28px}
.demo-reveal.interactive .demo-intro>div>p:last-child{display:none}
.demo-reveal.interactive .demo-mobile{display:none}
.demo-reveal.interactive .demo-exit{display:block;background:var(--surface);color:var(--ink);min-height:44px}
.demo-reveal.interactive .demo-caption{margin-top:24px}
@media(prefers-reduced-motion:reduce){.demo-reveal.interactive .laptop-rig{transition:none}}
/* Keep the complete Clay scene inside its column, including floating cards. */
@media (min-width:1001px){
  html[data-theme=clay] .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
  html[data-theme=clay] .hero-stage{min-width:0;margin-left:0}
  html[data-theme=clay] .scene{width:100%;max-width:620px;right:0;left:auto;top:65px;transform-origin:center;--scene-base:rotateX(10deg) rotateY(-16deg) rotateZ(3deg) scale(.8)}
  html[data-theme=clay] .float-a,html[data-theme=clay] .float-c{right:0}
  html[data-theme=clay] .float-b{left:0}
  html[data-theme=clay] .stage-caption{left:0;right:0}
}
/* A touch-first composition; desktop keeps its existing layout. */
@media (max-width:650px){
  html{scroll-padding-top:24px}
  .nav{height:88px;padding:0 22px}
  .nav nav{gap:12px;font-size:14px}
  .nav nav>a:not(.nav-cta){display:none}
  .nav-cta{padding:13px 18px;min-height:44px}
  .hero,html[data-theme=clay] .hero{padding:30px 22px 0;overflow:clip}
  .eyebrow{font-size:12px;line-height:1.6;letter-spacing:.09em}
  .hero .eyebrow{max-width:270px}
  .hero h1,html[data-theme=clay] .hero h1{font-size:clamp(34px,9vw,56px);line-height:1.08;letter-spacing:-.055em;margin:20px 0 24px;text-wrap:initial}
  .hero-description{font-size:16px;line-height:1.65;max-width:360px}
  .hero-description br{display:none}
  .button{font-size:15px;min-height:50px;padding:16px 22px}
  .hero-stage,html[data-theme=ember] .hero-stage,html[data-theme=clay] .hero-stage{height:365px;margin:40px 0 0}
  html[data-theme=ember] .scene,html[data-theme=clay] .scene{--scene-base:rotateZ(-3deg);width:100%;height:290px;left:0;right:auto;top:0;margin:0;transform-origin:center}
  .hero-dashboard{top:22px;border-radius:16px;box-shadow:0 22px 40px #0004}
  .dash-sidebar,.float-a,.float-b,.sample-label,.round-icon{display:none}
  .dash-bar{height:42px;padding:0 15px;font-size:12px;justify-content:space-between}
  .dash-content{padding:18px 15px}
  .dash-heading h3{font-size:25px;margin:7px 0 16px}
  .dash-heading small{font-size:10px}
  .metric-row{gap:22px;padding-bottom:14px}
  .metric-row strong{font-size:18px}.metric-row small{font-size:12px}
  .chart-head{font-size:11px;margin-top:14px}.chart-head .muted{display:none}
  .bars{height:65px;gap:6px;margin-top:12px}.chart-foot{display:none}
  .float-c{right:4px;bottom:-19px;padding:12px 18px;gap:18px;border-radius:16px;transform:rotateZ(3deg)}
  .float-c span{font-size:13px}.float-c b{font-size:30px}
  .stage-caption,html[data-theme=clay] .stage-caption{left:0;right:0;bottom:0;font-size:12px}
  .intro-line{padding:56px 22px}.intro-line>span{font-size:12px}
  .intro-line p{font-size:clamp(34px,9vw,46px);line-height:1.12}
  .assembly-sticky{padding:56px 22px}
  .assembly h2{font-size:32px;line-height:1.15;text-wrap:initial}
  .assembly-heading p,.assembly-tile p,.assembly-resolution{font-size:16px;line-height:1.6}
  .assembly-board{gap:18px}.assembly-tile{padding:24px;min-height:0;box-shadow:none}
  .assembly-tile small{font-size:12px}.assembly-tile h3{font-size:27px;line-height:1.15}
  .task-line>span:last-child{font-size:12px}.intelligence-steps span,.tile-footnote{font-size:14px}
  .work{padding:60px 22px 30px}.section-heading h2,.about h2{font-size:40px;line-height:1.1}
  .section-heading>p,.project-copy p,.about-copy>p:not(.eyebrow),.capability-list p{font-size:16px;line-height:1.65}
  .project-category,.work-note{font-size:12px;line-height:1.65}
  .project-visual{min-height:300px;padding:25px}.project-copy h3{font-size:32px;line-height:1.15}
  .about{padding:20px 22px 60px}.skill-row span{font-size:14px}
  .contact{padding:45px 22px 36px}.contact h2{font-size:clamp(38px,10vw,58px);line-height:1.08}
  footer{font-size:12px;line-height:1.5}
  .concept-switch{position:relative;left:auto;bottom:auto;transform:none;width:fit-content;max-width:100%;margin:22px auto;padding:5px;box-shadow:none;z-index:1}
  .concept-switch button{min-height:44px;padding:12px 22px;font-size:14px}
  .switch-label{display:none}
}