/* Portrait phones use the shared LED engine; wide layouts retain the mosaic. */
.hero-front{display:contents}.phone-hero{display:none}#heroContent:focus{outline:none}
@media(max-width:600px) and (pointer:coarse) and (orientation:portrait){
 .hero>.portal-base{padding:0 20px 26px!important;min-height:0}
 .hero-front{display:flex;flex-direction:column;align-items:center;position:relative;gap:0;padding:20px 0 0;isolation:isolate}
 .hero-front:before{content:'';position:absolute;inset:15% -20px 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,#193d721f,transparent 60%)}
 body[data-portal-mode=off] .hero-brand{font-size:20px;line-height:1.2;margin:0;letter-spacing:-.7px;text-align:center}
 .hero-front>.hero-stage{display:none!important}
 .phone-hero{display:block;width:calc(100% + 40px);margin:0 -20px}
 .phone-display{display:block;position:relative;width:100%;height:clamp(320px,104vw,540px);padding:0;margin:0;overflow:hidden;border:0;border-radius:0;background:transparent;color:#edf3ff;cursor:grab;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent;user-select:none;isolation:isolate}
 .phone-display:active{cursor:grabbing}.phone-display:focus-visible{outline:1px solid #8fbcff;outline-offset:-8px}
 .phone-display.has-touch-handler{touch-action:auto}
 .phone-display-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
 .phone-display-fallback{position:absolute;inset:13% 0;display:flex;flex-direction:column;justify-content:center;gap:3px;background:linear-gradient(150deg,#0c2351,#030c1c 60%,#123b48);border:1px solid #4387ff99;transform:perspective(700px) rotateY(10deg);font-size:clamp(38px,12vw,68px);font-weight:450;letter-spacing:-.04em;line-height:1}
 .phone-display-fallback strong{font-size:1.45em;letter-spacing:-.055em;line-height:1;font-weight:780;color:#4387ff}.phone-display-fallback small{font-size:clamp(14px,3.7vw,22px);line-height:1.3;letter-spacing:-.018em;margin-top:22px}
 .phone-display.scene-ready .phone-display-fallback,.phone-display.title-hidden .phone-display-fallback{display:none}
 body[data-portal-mode=off] .hero-content{padding-top:0;scroll-margin-top:24px}
 body[data-portal-mode=off] .hero-description{max-width:420px;font-size:14px;line-height:1.42;margin:0 auto;color:#b5c3da}
 body[data-portal-mode=off] .hero-actions{margin-top:14px;gap:8px;display:flex;flex-wrap:nowrap}
 body[data-portal-mode=off] .hero-actions .button{flex:1;min-width:0;min-height:var(--mobile-control-bar-size);max-width:none;padding:10px 9px;justify-content:center;font-size:13px}
 body[data-portal-mode=off] .hero-meta{margin-top:12px;font-size:11px;gap:7px 11px;line-height:1.35}
}
@media(max-width:360px) and (pointer:coarse) and (orientation:portrait){.hero-front{padding-top:18px}body[data-portal-mode=off] .hero-actions .button{font-size:12px}body[data-portal-mode=off] .hero-meta{font-size:10px}}
@media(forced-colors:active){.phone-display-canvas{display:none}.phone-display.scene-ready .phone-display-fallback{display:flex;border-color:CanvasText;color:CanvasText}.phone-display-fallback strong{color:CanvasText}}

/* Compact portrait rhythm: spacing belongs to each section once. */
@media(max-width:600px) and (pointer:coarse) and (orientation:portrait){
 .directions>.portal-base{padding-top:24px;padding-bottom:28px}
 .section-heading,.directions .section-heading,.process .section-heading,.contact .section-heading,.gallery-heading{margin:12px auto 18px}
 .section-heading>p,.directions .section-heading p,.process .section-heading p,.gallery-heading p{margin-top:14px;font-size:15px;line-height:1.4}
 .section-heading h2,.directions .section-heading h2,.gallery-heading h2{line-height:.98}
 .direction-studios{gap:30px}
 .direction-art{width:100%;max-width:none;height:var(--mobile-screen-height,clamp(150px,46vw,205px));min-height:0;margin:0 auto 8px}
 .direction-studio .direction-art,.direction-studio[data-direction=digital] .direction-art,.direction-studio.is-pointed .direction-art{transform:none;transition:none}
 .direction-content{gap:0}
 .direction-studio h3{margin-bottom:12px}
 .direction-studio p{line-height:1.4}
 .direction-deliverables{margin-top:13px;margin-bottom:0;gap:5px}
 .direction-cta.button{margin-top:16px}
 .works{padding-top:30px;padding-bottom:18px}
 .case-filters{margin-top:16px;margin-bottom:10px}
 .gallery-controls{margin-top:12px;margin-bottom:0}
 .gallery-instruction{margin-top:10px}
 .process{padding-top:26px;padding-bottom:30px}
 .experience-strip{padding-top:20px;gap:12px}
 .experience-strip>div{padding:12px 0}
 .contact>.portal-base{padding-top:28px;padding-bottom:26px}
 .contact-visual{min-height:0;height:var(--mobile-screen-height,clamp(124px,39vw,180px));margin:0}
 .contact-grid{gap:12px}
 footer{padding-top:26px;gap:22px}
 .hero-actions,.direction-cta,.gallery-controls,.contact-card{scroll-margin-bottom:100px}
}
/* One compact control scale for phones; desktop capsules keep their proportions. */
@media(max-width:600px){
 .direction-cta.button{min-height:var(--mobile-control-bar-size);padding:10px 18px;font-size:13px;line-height:1.3}
 .case-filters{gap:2px;padding:4px;max-width:calc(100% - 32px)}
 .case-filters button{min-height:var(--mobile-control-size);padding:6px 12px;font-size:12px;line-height:1.25}
 .gallery-controls{gap:10px;padding:4px}
 .gallery-controls .round-button{width:var(--mobile-control-size);height:var(--mobile-control-size);flex:none}
 .gallery-controls .round-button svg{width:18px;height:18px;stroke-width:2}
 .case-counter{gap:8px;font-size:12px;line-height:1}
 .works .case-card-action{min-height:var(--mobile-control-size);padding:6px 15px;font-size:13px}
 .contact-card{gap:9px}
 .contact .contact-card>a{min-height:76px;padding:14px 16px;gap:14px;border-radius:18px!important}
 .contact .contact-card strong{font-size:18px;line-height:1.2}
 .contact .contact-card small{font-size:12px;line-height:1.35;margin-top:4px;overflow-wrap:anywhere}
 .contact .contact-card svg{width:20px;height:20px;flex:none}
 .process-orbit[data-compact=true]{padding:14px 10px}
 .process-orbit[data-compact=true] .orbit-layout{gap:12px}
 .process-orbit[data-compact=true] .node-detail{padding:18px;grid-template-rows:auto auto}
 .process-orbit[data-compact=true] .orbit-content:not(.is-active){display:none}
 .process-orbit[data-compact=true] .node-detail h3{font-size:22px;line-height:1.17;margin:10px 0 12px}
 .process-orbit[data-compact=true] .node-detail .orbit-paragraph{font-size:15px;line-height:1.4;margin-bottom:8px}
 .process-orbit[data-compact=true] .stage-result{margin-top:13px;padding-top:11px}
 .process-orbit[data-compact=true] .stage-result>p{font-size:13px;line-height:1.4}
 .process-orbit[data-compact=true] .orbit-progress{width:32px;height:32px}
 .process-orbit[data-compact=true] .orbit-nodes{gap:8px}
 .process-orbit[data-compact=true] .process-node{min-height:var(--mobile-control-bar-size);padding:7px 12px;gap:8px}
 .process-orbit[data-compact=true] .process-node .node-label{white-space:nowrap}
 .process-orbit[data-compact=true] .process-node .node-label{font-size:13px;line-height:1.25}
 .process-orbit[data-compact=true] .process-node:after{font-size:36px;opacity:.05}
}
/* Both docks stay absent until the complete hero, including its actions, is passed. */
@media(hover:none) and (pointer:coarse){
 .contact-dock:not(.is-past-hero){opacity:0!important;visibility:hidden;pointer-events:none}
}