/* ZAZA v74 — SINGLE MOBILE RESPONSIVE AUTHORITY
Layout mode is established synchronously by mobile-bootstrap.js.
This file intentionally contains the mobile cascade in one place. */
/* ==================== MOBILE EXPERIENCE BASE ==================== */
/* ========================================================================
ZAZA v46 — authored phone experience
The phone version is NOT a reduced desktop layout. Portrait is an optional
fallback; the primary phone experience is landscape, where the desktop
compositions and interaction ideas are re-authored for touch.
======================================================================== */
.mobile-touch-hint,.mobile-key-controls,.mobile-break-pad,.mobile-speed-pad{display:none}
/* ------------------------------------------------------------------------
LANDSCAPE PHONE FOUNDATION
------------------------------------------------------------------------ */
body.is-phone-experience.is-landscape{
--pad:max(24px,env(safe-area-inset-left));
--header-h:52px;
--dock-clearance:66px;
overflow-x:clip!important;
}
body.is-phone-experience.is-landscape .site-header{height:52px!important;padding-left:max(24px,env(safe-area-inset-left))!important;padding-right:max(24px,env(safe-area-inset-right))!important}
body.is-phone-experience.is-landscape .site-header__meta,body.is-phone-experience.is-landscape .site-header__edge{display:none!important}
body.is-phone-experience.is-landscape .brand__word{font-size:9px!important}
body.is-phone-experience.is-landscape .site-dock-shell{bottom:max(6px,env(safe-area-inset-bottom))!important}
body.is-phone-experience.is-landscape .site-dock{min-height:48px!important;padding:5px 6px 6px!important;gap:4px!important;border-radius:15px!important}
body.is-phone-experience.is-landscape .dock-app,body.is-phone-experience.is-landscape .dock-app.menu-button{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;flex-basis:38px!important}
body.is-phone-experience.is-landscape .dock-app__icon{width:19px!important;height:19px!important}
body.is-phone-experience.is-landscape .dock-app__label{display:none!important}
/* Gravity menu remains physical on touch, but launches inside a usable field. */
body.is-phone-experience.is-landscape .menu-overlay--gravity .gravity-menu{
inset:58px max(24px,env(safe-area-inset-right)) 50px max(24px,env(safe-area-inset-left))!important;
width:auto!important;height:auto!important
}
body.is-phone-experience.is-landscape .menu-overlay--gravity .gravity-menu__item{font-size:clamp(46px,9vw,78px)!important;line-height:.72!important;max-width:72vw!important;touch-action:none!important}
body.is-phone-experience.is-landscape .menu-overlay--gravity::after{bottom:8px!important;font-size:6px!important}
/* Reusable phone-touch affordance — deliberately editorial rather than app UI. */
body.is-phone-experience.is-landscape .mobile-touch-hint{display:flex;align-items:center;gap:8px;font:600 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.48}
body.is-phone-experience.is-landscape .mobile-touch-hint::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
/* ------------------------------------------------------------------------
HOMEPAGE — preserve desktop compositions in a short landscape viewport.
------------------------------------------------------------------------ */
body.is-phone-experience.is-landscape:not(.inner-page) .entry-scene{min-height:100dvh!important;height:100dvh!important}
body.is-phone-experience.is-landscape:not(.inner-page) .hero-copy__main,body.is-phone-experience.is-landscape:not(.inner-page) .hero-copy__after{font-size:clamp(56px,18vh,96px)!important;line-height:.72!important}
body.is-phone-experience.is-landscape:not(.inner-page) .hero-ui--top{top:58px!important}.is-phone-experience.is-landscape:not(.inner-page) .hero-ui--bottom{bottom:62px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .skip-intro{bottom:66px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-scene__inner{
grid-template-columns:58px minmax(0,1fr) 120px!important;gap:3vw!important;padding:11vh max(28px,env(safe-area-inset-left)) 12vh!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-scene__copy{min-height:62vh!important;width:100%!important}
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-turn{font-size:clamp(56px,19vh,108px)!important;line-height:.72!important;letter-spacing:-.078em!important}
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-turn--aside{font-size:clamp(42px,14vh,78px)!important;max-width:12ch!important}
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-scene__signature{width:min(14vw,120px)!important;justify-self:end}
body.is-phone-experience.is-landscape:not(.inner-page) .work-scene__sticky{
grid-template-columns:minmax(270px,.78fr) minmax(0,1.22fr)!important;
grid-template-rows:25vh minmax(0,1fr)!important;column-gap:5vw!important;
padding:58px max(28px,env(safe-area-inset-left)) 66px!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .work-scene__head h2{font-size:clamp(64px,19vh,106px)!important;line-height:.68!important}
body.is-phone-experience.is-landscape:not(.inner-page) .work-scene__head p{font-size:13px!important;margin-top:8px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .work-index__item{padding:6px 0 7px!important;grid-template-columns:25px minmax(0,1fr)!important;gap:3px 9px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .work-index__item>span:not(.work-index__number){font-size:clamp(24px,7.3vh,42px)!important;line-height:.85!important}
body.is-phone-experience.is-landscape:not(.inner-page) .work-index__item small{font-size:7px!important;max-width:28ch!important}
body.is-phone-experience.is-landscape:not(.inner-page) .work-visual{height:min(54vh,240px)!important;max-height:none!important;aspect-ratio:1.9/1!important;border-radius:16px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .work-scene .mobile-touch-hint{position:absolute;left:max(28px,env(safe-area-inset-left));bottom:68px;z-index:5}
/* Trailers stay like desktop two-column spreads. They do not become vertical cards. */
body.is-phone-experience.is-landscape:not(.inner-page) .project-trailer{
min-height:112dvh!important;display:grid!important;grid-template-columns:minmax(270px,.8fr) minmax(0,1.2fr)!important;
gap:5vw!important;align-items:center!important;padding:62px max(28px,env(safe-area-inset-left)) 70px!important;overflow:hidden!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-copy{align-self:center!important;padding:0!important;max-width:none!important}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-meta{gap:12px!important;font-size:7px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-copy h2{font-size:clamp(54px,15.5vh,88px)!important;line-height:.70!important;letter-spacing:-.078em!important;margin:12px 0 14px!important;white-space:normal!important}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-copy p{font-size:clamp(15px,4.4vh,22px)!important;line-height:1!important;margin:7px 0!important}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-copy .trailer-joke{font-size:11px!important;opacity:.48!important}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-visual{height:min(68vh,270px)!important;width:100%!important;min-width:0!important;overflow:visible!important}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-visual--ayamen{overflow:hidden!important}
body.is-phone-experience.is-landscape:not(.inner-page) .p1-depth-plane{width:23vw!important}
/* Capability conversation: desktop proof occupies the right; touch copy occupies left. */
body.is-phone-experience.is-landscape:not(.inner-page) .capability-demo::after{
background:linear-gradient(90deg,color-mix(in srgb,var(--stage-bg) 98%,transparent) 0 37%,color-mix(in srgb,var(--stage-bg) 76%,transparent) 48%,transparent 64%)!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .demo-layer{inset:7% 4% 9% 41%!important}
body.is-phone-experience.is-landscape:not(.inner-page) .capability-demo__meta{right:max(24px,env(safe-area-inset-right))!important;bottom:64px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .cap-turn{min-height:100dvh!important;padding:14vh 55vw 13vh max(28px,env(safe-area-inset-left))!important;justify-content:center!important;align-items:flex-start!important;text-align:left!important}
body.is-phone-experience.is-landscape:not(.inner-page) .cap-turn--reply{padding-right:55vw!important;padding-left:max(28px,env(safe-area-inset-left))!important;text-align:left!important;align-items:flex-start!important}
body.is-phone-experience.is-landscape:not(.inner-page) .cap-turn--aside{padding-right:55vw!important;padding-left:max(28px,env(safe-area-inset-left))!important;text-align:left!important;align-items:flex-start!important}
body.is-phone-experience.is-landscape:not(.inner-page) .cap-turn h2{font-size:clamp(48px,14vh,82px)!important;line-height:.72!important;max-width:6ch!important}
body.is-phone-experience.is-landscape:not(.inner-page) .cap-turn p{font-size:clamp(58px,17vh,98px)!important;line-height:.72!important;max-width:5ch!important}
body.is-phone-experience.is-landscape:not(.inner-page) .cap-turn small{font-size:clamp(18px,5vh,28px)!important;line-height:.92!important;max-width:16ch!important}
body.is-phone-experience.is-landscape:not(.inner-page) .cap-turn--main p{font-size:clamp(54px,15vh,88px)!important;width:42vw!important;max-width:none!important}
body.is-phone-experience.is-landscape:not(.inner-page) .demo-device{height:64vh!important;width:min(24vw,220px)!important}
body.is-phone-experience.is-landscape:not(.inner-page) .normal-site{width:88%!important;height:74%!important}
/* Real on-screen keyboard, not a fake note saying keyboards do not exist. */
body.is-phone-experience.is-landscape .mobile-key-controls{
display:flex;position:absolute;z-index:12;right:max(24px,env(safe-area-inset-right));bottom:16px;gap:8px;pointer-events:auto
}
body.is-phone-experience.is-landscape .mobile-key-controls button,
body.is-phone-experience.is-landscape .mobile-break-pad button{
width:52px;height:42px;border:1px solid currentColor;border-radius:10px;background:color-mix(in srgb,var(--stage-bg,#101010) 72%,transparent);color:inherit;
font:700 20px/1 Arial,sans-serif;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);touch-action:manipulation
}
body.is-phone-experience.is-landscape .mobile-key-controls button:active,body.is-phone-experience.is-landscape .mobile-break-pad button:active{transform:translateY(2px);background:currentColor;color:var(--stage-bg,#101010)}
body.is-phone-experience.is-landscape .keyboard-sequence__label{font-size:0!important}
body.is-phone-experience.is-landscape .keyboard-sequence__label::after{content:"SWIPE OR TAP ← / →";font:600 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em}
body.is-phone-experience.is-landscape .keyboard-sequence__word{font-size:clamp(56px,15vh,90px)!important}
/* Responsive/Browsers/System Reel keep the desktop split-screen argument. */
body.is-phone-experience.is-landscape:not(.inner-page) .responsive-story,
body.is-phone-experience.is-landscape:not(.inner-page) .browser-story{
grid-template-columns:.78fr 1.22fr!important;gap:5vw!important;padding:62px max(28px,env(safe-area-inset-left)) 68px!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .responsive-story__copy h2,
body.is-phone-experience.is-landscape:not(.inner-page) .browser-story__copy h2{font-size:clamp(52px,15vh,86px)!important;line-height:.71!important}
body.is-phone-experience.is-landscape:not(.inner-page) .responsive-story__copy p,
body.is-phone-experience.is-landscape:not(.inner-page) .browser-story__copy p{font-size:15px!important;max-width:30ch!important}
body.is-phone-experience.is-landscape:not(.inner-page) .responsive-stage,body.is-phone-experience.is-landscape:not(.inner-page) .browser-stage{min-width:0!important}
body.is-phone-experience.is-landscape:not(.inner-page) .responsive-browser{width:100%!important;max-width:none!important}
body.is-phone-experience.is-landscape:not(.inner-page) .system-reel__stage{padding:60px max(28px,env(safe-area-inset-left)) 68px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .system-reel__copy{width:52vw!important;max-width:none!important}
body.is-phone-experience.is-landscape:not(.inner-page) .system-reel__copy h2{font-size:clamp(52px,14vh,82px)!important;line-height:.71!important;max-width:10ch!important}
body.is-phone-experience.is-landscape:not(.inner-page) .system-reel__track{top:48%!important;left:28px!important;gap:2.8vw!important}
body.is-phone-experience.is-landscape:not(.inner-page) .system-reel figure,body.is-phone-experience.is-landscape:not(.inner-page) .system-reel figure:nth-child(even){width:48vw!important;margin-top:0!important}
body.is-phone-experience.is-landscape:not(.inner-page) .system-reel img{height:min(43vh,180px)!important}
/* BREAK IT — desktop input ideas become equivalent touch challenges. */
body.is-phone-experience.is-landscape .break-turn>p{font-size:clamp(44px,14vh,80px)!important;line-height:.72!important}
body.is-phone-experience.is-landscape .break-turn h2{font-size:clamp(60px,18vh,100px)!important;line-height:.68!important}
body.is-phone-experience.is-landscape .mobile-break-pad{
display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,42px);gap:6px;position:absolute;left:50%;top:63%;transform:translate(-50%,-50%);z-index:12;pointer-events:auto
}
body.is-phone-experience.is-landscape .mobile-break-pad button{width:48px;height:42px;background:rgba(5,5,5,.62)}
body.is-phone-experience.is-landscape .mobile-break-pad [data-mobile-break-key="ArrowUp"]{grid-column:2}.is-phone-experience.is-landscape .mobile-break-pad [data-mobile-break-key="ArrowLeft"]{grid-column:1;grid-row:2}.is-phone-experience.is-landscape .mobile-break-pad [data-mobile-break-key="ArrowDown"]{grid-column:2;grid-row:2}.is-phone-experience.is-landscape .mobile-break-pad [data-mobile-break-key="ArrowRight"]{grid-column:3;grid-row:2}
body.is-phone-experience.is-landscape .break-keys{transform:translateY(-44px) scale(.82)!important}
body.is-phone-experience.is-landscape .mobile-speed-pad{display:grid;place-items:center;position:absolute;right:7vw;top:50%;transform:translateY(-50%);width:35vw;height:40vh;border:1px dashed rgba(240,237,231,.26);font:600 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.5;touch-action:none;pointer-events:auto}
body.is-phone-experience.is-landscape .break-site:not([data-break-step="3"]) .mobile-speed-pad,body.is-phone-experience.is-landscape .break-site:not([data-break-step="2"]) .mobile-break-pad{display:none!important}
/* The ending keeps the fullscreen dialogue but respects the short phone height. */
body.is-phone-experience.is-landscape:not(.inner-page) .exit-turn h2{font-size:clamp(62px,20vh,110px)!important;line-height:.68!important}
body.is-phone-experience.is-landscape:not(.inner-page) .exit-turn p{font-size:clamp(56px,18vh,100px)!important;line-height:.7!important}
body.is-phone-experience.is-landscape:not(.inner-page) .pf-contact{padding:56px max(28px,env(safe-area-inset-right)) 70px max(28px,env(safe-area-inset-left))!important;gap:9px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .pf-text{font-size:clamp(21px,6.2vh,34px)!important}
body.is-phone-experience.is-landscape:not(.inner-page) .pf-input-wrap input{font-size:clamp(19px,5.2vh,29px)!important}
body.is-phone-experience.is-landscape:not(.inner-page) .pf-btns button{min-height:38px!important;padding:0 14px!important;font-size:clamp(13px,3.7vh,19px)!important;border-radius:10px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .pf-send{font-size:clamp(36px,10vh,56px)!important}
/* ------------------------------------------------------------------------
ABOUT — the landscape composition was already close to the desktop artwork;
preserve it, but replace hover-only inspection with tap state.
------------------------------------------------------------------------ */
body.is-phone-experience.is-landscape.about-page [data-skill-node]{touch-action:manipulation!important;cursor:pointer!important}
body.is-phone-experience.is-landscape.about-page [data-skill-node].is-touch-selected{opacity:1!important;filter:none!important;transform:translate3d(0,-2px,0)!important}
body.is-phone-experience.is-landscape.about-page .skill-router__bank.has-touch-selection [data-skill-node]:not(.is-touch-selected){opacity:.18!important}
body.is-phone-experience.is-landscape.about-page .skill-router__inspector{pointer-events:none}
/* ------------------------------------------------------------------------
PROJECT LISTING — preserve the designed horizontal compositions. The desk
remains tap-to-open on phone; it is not collapsed into cards.
------------------------------------------------------------------------ */
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__sticky{grid-template-columns:.78fr 1.22fr!important;gap:4vw!important;padding:58px max(28px,env(safe-area-inset-left)) 66px!important}
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38 h2{font-size:clamp(46px,13vh,76px)!important;line-height:.75!important}
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__copy p{font-size:15px!important;max-width:31ch!important}
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__device,body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__sticky--reverse .feature-v38__device{width:min(56vw,66vh,600px)!important}
body.is-phone-experience.is-landscape.projects-page-v38 .artifact-desk-v37{touch-action:pan-y!important}
/* ------------------------------------------------------------------------
CONTACT — keep desktop's wide typography and two-point bridge.
------------------------------------------------------------------------ */
body.is-phone-experience.is-landscape.contact-page .contact-v40-hero__sticky{padding:58px max(28px,env(safe-area-inset-left)) 68px!important}
body.is-phone-experience.is-landscape.contact-page .contact-v40-hero__copy{height:52vh!important}
body.is-phone-experience.is-landscape.contact-page .contact-v40-hero__copy>span{font-size:clamp(58px,18vh,98px)!important}
body.is-phone-experience.is-landscape.contact-page .contact-bridge__sticky{padding:56px max(28px,env(safe-area-inset-left)) 66px!important}
body.is-phone-experience.is-landscape.contact-page .contact-bridge__points strong{font-size:clamp(58px,18vh,98px)!important}
body.is-phone-experience.is-landscape.contact-page .contact-letter{padding-left:max(28px,env(safe-area-inset-left))!important;padding-right:max(28px,env(safe-area-inset-right))!important}
body.is-phone-experience.is-landscape.contact-page .contact-email>span{font-size:clamp(44px,13vh,76px)!important;line-height:.75!important}
/* Touch keyboard challenge: keep the instruction and the control field separate. */
body.is-phone-experience.is-landscape .break-turn[data-break-turn="2"]{padding-left:max(34px,env(safe-area-inset-left))!important;padding-right:54vw!important}
body.is-phone-experience.is-landscape .break-turn[data-break-turn="2"]>p{font-size:clamp(44px,13vh,74px)!important;max-width:5.5ch!important}
body.is-phone-experience.is-landscape .break-turn[data-break-turn="2"] .mobile-break-pad{left:auto!important;right:max(9vw,env(safe-area-inset-right))!important;top:49%!important;transform:translateY(-50%)!important}
body.is-phone-experience.is-landscape .break-turn[data-break-turn="2"]~.mobile-break-pad{left:auto!important;right:max(9vw,env(safe-area-inset-right))!important;top:49%!important;transform:translateY(-50%)!important}
body.is-phone-experience.is-landscape .break-site[data-break-step="2"] .break-keys{right:max(9vw,env(safe-area-inset-right))!important;bottom:7vh!important;display:block!important;width:162px!important;text-align:right!important}
body.is-phone-experience.is-landscape .break-site[data-break-step="2"] .break-keys kbd{display:none!important}
body.is-phone-experience.is-landscape .break-site[data-break-step="2"] .break-keys span{display:block!important;text-align:right!important;font-size:7px!important}
body.is-phone-experience.is-landscape .break-site[data-break-step="3"] .break-turn[data-break-turn="3"]{padding-right:52vw!important}
body.is-phone-experience.is-landscape .break-site[data-break-step="3"] .break-speed{right:max(9vw,env(safe-area-inset-right))!important;bottom:8vh!important;width:35vw!important}
body.is-phone-experience.is-landscape .break-site[data-break-step="3"] .mobile-speed-pad{right:max(9vw,env(safe-area-inset-right))!important;width:35vw!important;height:38vh!important}
/* ========================================================================
ZAZA v48 — PHONE COMPOSITION QA / NO SHRINKING
These rules deliberately undo old <=700/<=980 "stack it" breakpoints when
the authored phone experience is active. They solve clipping at the scene
level rather than hiding overflow globally.
======================================================================== */
body.is-phone-experience.is-landscape{
--phone-inline:max(22px,env(safe-area-inset-left));
--phone-inline-r:max(22px,env(safe-area-inset-right));
}
body.is-phone-experience.is-landscape :is(h1,h2,h3,.quiet-turn,.work-index__item>span,.trailer-copy h2,.cap-turn h2,.cap-turn p,.about-signal__line,.dual-system__plane h2,.dual-system__merge strong,.direction-v38__a,.direction-v38__b,.direction-v38__c,.distance-v38__a,.distance-v38__b,.distance-v38__answer,.simple-v38__looks,.simple-v38__good,.weird-v38__one,.weird-v38__two,.other-bridge-v38 p,.other-bridge-v38 span,.projects-end-v38 p,.contact-v40-hero__copy>span,.contact-v40-hero__thought,.contact-bridge__conversation p,.contact-bridge__point strong,.contact-letter h2,.contact-message__line,.contact-message__message,.contact-close__copy strong){
overflow-wrap:normal!important;word-break:normal!important;
}
/* HOME / 01 — keep the quiet thought as a horizontal composition. */
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-scene,
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-scene__inner{height:100dvh!important;min-height:100dvh!important}
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-scene__inner{
position:relative!important;display:grid!important;
grid-template-columns:44px minmax(0,1fr) 86px!important;
grid-template-rows:1fr!important;align-items:center!important;
gap:clamp(12px,2.2vw,24px)!important;
padding:58px var(--phone-inline-r) 64px var(--phone-inline)!important;
overflow:hidden!important;
}
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-scene__index{
position:relative!important;left:auto!important;top:auto!important;
grid-column:1!important;grid-row:1!important;align-self:start!important;
padding-top:2vh!important;min-width:0!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-scene__copy{
grid-column:2!important;grid-row:1!important;min-width:0!important;width:100%!important;
min-height:58vh!important;display:grid!important;align-items:center!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-turn,
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-turn:nth-child(2),
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-turn:nth-child(3),
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-turn--aside{
justify-self:start!important;text-align:left!important;width:100%!important;max-width:100%!important;
white-space:normal!important;font-size:clamp(43px,min(8.6vw,19vh),78px)!important;
line-height:.76!important;letter-spacing:-.073em!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-turn--aside{font-size:clamp(36px,min(7.2vw,15vh),66px)!important;max-width:11ch!important}
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-scene__signature{
position:relative!important;right:auto!important;bottom:auto!important;
grid-column:3!important;grid-row:1!important;justify-self:end!important;align-self:center!important;
width:min(11vw,78px)!important;max-width:100%!important
}
/* HOME / 02 — restore the desktop two-part work stage after old max-width rules
turned it into a long block. */
body.is-phone-experience.is-landscape:not(.inner-page) .work-scene{min-height:175dvh!important;padding:0!important}
body.is-phone-experience.is-landscape:not(.inner-page) .work-scene__sticky{
position:sticky!important;top:0!important;height:100dvh!important;min-height:100dvh!important;
display:grid!important;grid-template-columns:minmax(190px,.82fr) minmax(0,1.18fr)!important;
grid-template-rows:minmax(66px,23vh) minmax(0,1fr)!important;
column-gap:clamp(18px,4vw,42px)!important;align-items:stretch!important;
padding:56px var(--phone-inline-r) 65px var(--phone-inline)!important;overflow:hidden!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .work-scene__head{
grid-column:1/-1!important;grid-row:1!important;min-width:0!important;align-self:start!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .work-scene__head h2{
margin:0!important;white-space:nowrap!important;font-size:clamp(49px,min(9vw,18vh),76px)!important;line-height:.7!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .work-scene__head p{margin:5px 0 0!important;font-size:clamp(10px,2.8vh,13px)!important}
body.is-phone-experience.is-landscape:not(.inner-page) .work-index{
grid-column:1!important;grid-row:2!important;align-self:center!important;min-width:0!important;
margin:0!important;padding:0!important;transform:none!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .work-index__item{
grid-template-columns:20px minmax(0,1fr)!important;grid-template-rows:auto auto!important;
gap:2px 7px!important;padding:4px 0 5px!important;transform:none
}
body.is-phone-experience.is-landscape:not(.inner-page) .work-index__item>span:not(.work-index__number){font-size:clamp(20px,min(4.5vw,8.8vh),34px)!important;line-height:.86!important;min-width:0!important}
body.is-phone-experience.is-landscape:not(.inner-page) .work-index__number{font-size:6px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .work-index__item small{grid-column:2!important;font-size:6px!important;line-height:1.15!important;white-space:normal!important}
body.is-phone-experience.is-landscape:not(.inner-page) .work-visual{
grid-column:2!important;grid-row:2!important;align-self:center!important;width:100%!important;
height:auto!important;max-height:49vh!important;aspect-ratio:1.88/1!important;margin:0!important;transform:none!important;
min-width:0!important;overflow:hidden!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .work-scene .mobile-touch-hint{left:var(--phone-inline)!important;bottom:59px!important;font-size:6px!important}
/* HOME / project trailers — wide spread, but with fluid columns all the way
down to a 568px landscape phone. */
body.is-phone-experience.is-landscape:not(.inner-page) .project-trailer{
display:grid!important;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)!important;
min-height:100dvh!important;gap:clamp(18px,4vw,40px)!important;
padding:58px var(--phone-inline-r) 64px var(--phone-inline)!important;overflow:hidden!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-copy,
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-visual{min-width:0!important}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-meta{display:flex!important;flex-wrap:wrap!important;gap:4px 10px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-copy h2{
font-size:clamp(37px,min(7.4vw,14vh),68px)!important;line-height:.73!important;margin:8px 0 9px!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-copy p{font-size:clamp(12px,min(2.9vw,4.7vh),18px)!important;line-height:1.05!important;margin:5px 0!important}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-visual{height:min(60vh,230px)!important;max-width:100%!important}
body.is-phone-experience.is-landscape:not(.inner-page) .p1-depth-plane{width:min(20vw,120px)!important}
/* HOME / capability proof — copy owns the left 42%, proof owns the right 58%. */
body.is-phone-experience.is-landscape:not(.inner-page) .cap-turn,
body.is-phone-experience.is-landscape:not(.inner-page) .cap-turn--reply,
body.is-phone-experience.is-landscape:not(.inner-page) .cap-turn--aside{
padding:60px 57vw 64px var(--phone-inline)!important;min-width:0!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .cap-turn h2{font-size:clamp(38px,min(7.3vw,14vh),66px)!important;max-width:6ch!important}
body.is-phone-experience.is-landscape:not(.inner-page) .cap-turn p,
body.is-phone-experience.is-landscape:not(.inner-page) .cap-turn--main p{font-size:clamp(42px,min(8vw,15vh),72px)!important;width:auto!important;max-width:5.4ch!important}
body.is-phone-experience.is-landscape:not(.inner-page) .cap-turn small{font-size:clamp(15px,min(3.5vw,6vh),24px)!important;max-width:15ch!important}
body.is-phone-experience.is-landscape:not(.inner-page) .demo-layer{inset:8% 3% 17% 43%!important}
body.is-phone-experience.is-landscape:not(.inner-page) .capability-demo__meta{bottom:59px!important}
body.is-phone-experience.is-landscape .mobile-key-controls{bottom:57px!important}
body.is-phone-experience.is-landscape .mobile-key-controls button,
body.is-phone-experience.is-landscape .mobile-break-pad button{width:46px!important;height:38px!important}
/* HOME / later proof chapters — keep split-screen, constrain copy by both width
and height so it cannot hit the dock. */
body.is-phone-experience.is-landscape:not(.inner-page) .responsive-story,
body.is-phone-experience.is-landscape:not(.inner-page) .browser-story{
grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important;gap:clamp(18px,4vw,40px)!important;
padding:58px var(--phone-inline-r) 66px var(--phone-inline)!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .responsive-story__copy,
body.is-phone-experience.is-landscape:not(.inner-page) .browser-story__copy{min-width:0!important}
body.is-phone-experience.is-landscape:not(.inner-page) .responsive-story__copy h2,
body.is-phone-experience.is-landscape:not(.inner-page) .browser-story__copy h2{font-size:clamp(38px,min(7.1vw,13.5vh),64px)!important;line-height:.74!important}
body.is-phone-experience.is-landscape:not(.inner-page) .responsive-story__copy p,
body.is-phone-experience.is-landscape:not(.inner-page) .browser-story__copy p{font-size:clamp(11px,min(2.5vw,4.2vh),15px)!important;line-height:1.15!important}
body.is-phone-experience.is-landscape:not(.inner-page) .system-reel__stage{padding:58px var(--phone-inline-r) 66px var(--phone-inline)!important}
body.is-phone-experience.is-landscape:not(.inner-page) .system-reel__copy{width:min(48vw,390px)!important}
body.is-phone-experience.is-landscape:not(.inner-page) .system-reel__copy h2{font-size:clamp(38px,min(7.1vw,13.5vh),64px)!important}
/* ABOUT / operating-system sentence — retain motion, constrain its travel so
neither line leaves the stage on a phone. */
body.is-phone-experience.is-landscape.about-page .about-signal__sticky{padding:58px var(--phone-inline-r) 64px var(--phone-inline)!important}
body.is-phone-experience.is-landscape.about-page .about-signal__sticky .page-kicker{left:var(--phone-inline)!important;top:60px!important}
body.is-phone-experience.is-landscape.about-page .about-signal__line{
width:100%!important;max-width:100%!important;white-space:normal!important;gap:.12em .2em!important;
font-size:clamp(34px,min(6.4vw,12.8vh),58px)!important;line-height:.78!important
}
body.is-phone-experience.is-landscape.about-page .about-signal__line:nth-child(3){margin-top:2vh!important}
body.is-phone-experience.is-landscape.about-page .about-signal__cursor{font-size:6px!important;padding:6px 8px!important}
/* ABOUT / two systems — same two-plane idea, explicitly sized around the short
phone viewport instead of allowing 8vw desktop headings to collide. */
body.is-phone-experience.is-landscape.about-page .dual-system__head{top:58px!important;left:var(--phone-inline)!important;right:var(--phone-inline-r)!important}
body.is-phone-experience.is-landscape.about-page .dual-system__plane{
top:82px!important;bottom:66px!important;width:calc(50% - 28px)!important;
padding:18px clamp(14px,2.8vw,24px)!important
}
body.is-phone-experience.is-landscape.about-page .dual-system__plane--left{left:var(--phone-inline)!important}
body.is-phone-experience.is-landscape.about-page .dual-system__plane--right{right:var(--phone-inline-r)!important}
body.is-phone-experience.is-landscape.about-page .dual-system__plane h2{
margin:clamp(20px,7vh,34px) 0 0!important;font-size:clamp(28px,min(5.6vw,10.8vh),48px)!important;
line-height:.77!important;max-width:7ch!important
}
body.is-phone-experience.is-landscape.about-page .dual-system__facts{left:clamp(14px,2.8vw,24px)!important;right:clamp(14px,2.8vw,24px)!important;bottom:14px!important;gap:4px!important;font-size:6px!important}
body.is-phone-experience.is-landscape.about-page .dual-system__facts span{padding-top:4px!important}
body.is-phone-experience.is-landscape.about-page .dual-system__merge strong{font-size:clamp(42px,min(8vw,15vh),72px)!important;line-height:.73!important}
body.is-phone-experience.is-landscape.about-page .dual-system__meter{left:var(--phone-inline)!important;right:var(--phone-inline-r)!important;bottom:56px!important}
/* ABOUT / technical router — keep cases + tools + live inspector visible. */
body.is-phone-experience.is-landscape.about-page .skill-router__head{top:58px!important;left:var(--phone-inline)!important;right:var(--phone-inline-r)!important}
body.is-phone-experience.is-landscape.about-page .skill-router__aside{left:var(--phone-inline)!important;top:78px!important;font-size:9px!important;max-width:32ch!important}
body.is-phone-experience.is-landscape.about-page .skill-router__cases{
left:var(--phone-inline)!important;top:104px!important;width:33vw!important;height:31vh!important;right:auto!important
}
body.is-phone-experience.is-landscape.about-page .skill-router__cases h3{font-size:clamp(24px,min(4.6vw,9vh),40px)!important;line-height:.82!important}
body.is-phone-experience.is-landscape.about-page .skill-router__cases p{font-size:9px!important;line-height:1.2!important}
body.is-phone-experience.is-landscape.about-page .skill-router__bank{
left:40vw!important;right:var(--phone-inline-r)!important;top:92px!important;bottom:94px!important;width:auto!important;gap:5px!important
}
body.is-phone-experience.is-landscape.about-page .skill-group{grid-template-columns:64px 1fr!important;gap:6px!important}
body.is-phone-experience.is-landscape.about-page .skill-group>b{font-size:6px!important;padding-top:4px!important}
body.is-phone-experience.is-landscape.about-page .skill-group>div{gap:4px!important}
body.is-phone-experience.is-landscape.about-page .skill-group span{min-height:22px!important;padding:4px 6px!important;font-size:6.5px!important}
body.is-phone-experience.is-landscape.about-page .skill-router__inspector{
display:grid!important;left:var(--phone-inline)!important;bottom:62px!important;width:34vw!important;
gap:3px 8px!important
}
body.is-phone-experience.is-landscape.about-page .skill-router__inspector strong{font-size:13px!important}
body.is-phone-experience.is-landscape.about-page .skill-router__inspector span{font-size:8px!important}
body.is-phone-experience.is-landscape.about-page .skill-router__flow{bottom:58px!important;font-size:6px!important}
/* PROJECTS / feature chapters — old <=700 flex stack is explicitly replaced
with the original wide project/device relationship. */
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38{height:155dvh!important;min-height:0!important}
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__sticky,
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__sticky--reverse{
position:sticky!important;top:0!important;height:100dvh!important;min-height:100dvh!important;
display:grid!important;grid-template-columns:minmax(160px,.72fr) minmax(0,1.28fr)!important;
grid-template-rows:1fr!important;gap:clamp(16px,3.5vw,36px)!important;
padding:58px var(--phone-inline-r) 66px var(--phone-inline)!important;
align-items:center!important;overflow:hidden!important
}
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__copy,
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__sticky--reverse .feature-v38__copy{
grid-column:1!important;grid-row:1!important;order:initial!important;justify-self:start!important;text-align:left!important;
max-width:100%!important;min-width:0!important
}
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__device,
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__sticky--reverse .feature-v38__device{
grid-column:2!important;grid-row:1!important;order:initial!important;width:100%!important;max-width:100%!important;
margin:0!important;justify-self:stretch!important;min-width:0!important
}
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38 h2{font-size:clamp(36px,min(6.7vw,12.5vh),60px)!important;line-height:.76!important}
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__eyebrow{font-size:7px!important;margin-bottom:10px!important}
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__copy p{font-size:clamp(11px,min(2.3vw,4vh),15px)!important;line-height:1.15!important;margin-top:12px!important}
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__copy small{font-size:7px!important;line-height:1.3!important;margin-top:7px!important}
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__copy a{font-size:7px!important;margin-top:12px!important;padding-bottom:4px!important}
/* PROJECTS / experimental interludes. Desktop scale relationship remains, but
width and height caps prevent labels from colliding in 568×320. */
body.is-phone-experience.is-landscape.projects-page-v38 .interlude-v38__sticky,
body.is-phone-experience.is-landscape.projects-page-v38 .other-bridge-v38__sticky{padding:56px var(--phone-inline-r) 64px var(--phone-inline)!important}
body.is-phone-experience.is-landscape.projects-page-v38 .direction-v38__a,
body.is-phone-experience.is-landscape.projects-page-v38 .direction-v38__b{font-size:clamp(40px,min(8vw,14.5vh),68px)!important}
body.is-phone-experience.is-landscape.projects-page-v38 .direction-v38__c{font-size:clamp(34px,min(6.6vw,12vh),58px)!important;width:88vw!important}
body.is-phone-experience.is-landscape.projects-page-v38 .distance-v38__a,
body.is-phone-experience.is-landscape.projects-page-v38 .distance-v38__b{
top:39%!important;font-size:clamp(38px,min(7.5vw,14vh),64px)!important;max-width:42vw!important;white-space:nowrap!important
}
body.is-phone-experience.is-landscape.projects-page-v38 .distance-v38__a{left:var(--phone-inline)!important}
body.is-phone-experience.is-landscape.projects-page-v38 .distance-v38__b{right:var(--phone-inline-r)!important}
body.is-phone-experience.is-landscape.projects-page-v38 .distance-v38__line{left:var(--phone-inline)!important;right:var(--phone-inline-r)!important;top:58%!important}
body.is-phone-experience.is-landscape.projects-page-v38 .distance-v38__answer{font-size:clamp(34px,min(6.5vw,12.5vh),56px)!important;width:84vw!important}
body.is-phone-experience.is-landscape.projects-page-v38 .simple-v38__looks,
body.is-phone-experience.is-landscape.projects-page-v38 .simple-v38__good{font-size:clamp(46px,min(9vw,17vh),76px)!important;width:90vw!important}
body.is-phone-experience.is-landscape.projects-page-v38 .simple-v38__under{inset:72px var(--phone-inline-r) 68px var(--phone-inline)!important;gap:12px!important}
body.is-phone-experience.is-landscape.projects-page-v38 .simple-v38__under span{font-size:6px!important;padding-top:5px!important}
body.is-phone-experience.is-landscape.projects-page-v38 .weird-v38__one,
body.is-phone-experience.is-landscape.projects-page-v38 .weird-v38__two{font-size:clamp(36px,min(7vw,13vh),60px)!important;width:90vw!important;white-space:normal!important}
body.is-phone-experience.is-landscape.projects-page-v38 .weird-v38__three{top:68%!important;font-size:8px!important}
body.is-phone-experience.is-landscape.projects-page-v38 .other-bridge-v38 p{font-size:clamp(48px,min(9.4vw,17vh),80px)!important;line-height:.72!important;max-width:9ch!important}
body.is-phone-experience.is-landscape.projects-page-v38 .other-bridge-v38 span{font-size:clamp(38px,min(7.4vw,13.7vh),64px)!important;width:86vw!important;line-height:.78!important}
/* PROJECTS / artifact desk — landscape phone gets a two-column physical desk,
not the portrait single-file card feed. */
body.is-phone-experience.is-landscape.projects-page-v38 .other-things-v37{padding:64px var(--phone-inline-r) 72px var(--phone-inline)!important;min-height:0!important}
body.is-phone-experience.is-landscape.projects-page-v38 .other-things-v37__head{
display:grid!important;grid-template-columns:.55fr 1.1fr .72fr!important;gap:18px!important;align-items:end!important;margin-bottom:28px!important
}
body.is-phone-experience.is-landscape.projects-page-v38 .other-things-v37__head h2{font-size:clamp(44px,min(8vw,15vh),70px)!important;line-height:.77!important;margin:0!important}
body.is-phone-experience.is-landscape.projects-page-v38 .other-things-v37__head p{font-size:11px!important;line-height:1.25!important;margin:0!important}
body.is-phone-experience.is-landscape.projects-page-v38 .other-things-v37__head>span{font-size:6px!important}
body.is-phone-experience.is-landscape.projects-page-v38 .artifact-desk-v37{
height:auto!important;min-height:0!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:10px!important;overflow:visible!important;background:transparent!important;box-shadow:none!important
}
body.is-phone-experience.is-landscape.projects-page-v38 .artifact-desk-v37::before{display:none!important}
body.is-phone-experience.is-landscape.projects-page-v38 .artifact-cluster-v37{
position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
width:100%!important;min-height:150px!important;height:auto!important;transform:none!important
}
body.is-phone-experience.is-landscape.projects-page-v38 .artifact-detail-v37{grid-column:1/-1!important;position:relative!important;right:auto!important;bottom:auto!important;width:100%!important;margin:0!important}
body.is-phone-experience.is-landscape.projects-page-v38 .projects-end-v38{min-height:100dvh!important;padding:58px var(--phone-inline-r) 68px var(--phone-inline)!important}
body.is-phone-experience.is-landscape.projects-page-v38 .projects-end-v38 p{font-size:clamp(78px,min(18vw,31vh),150px)!important;line-height:.65!important}
body.is-phone-experience.is-landscape.projects-page-v38 .projects-end-v38 span{margin-top:7vh!important;font-size:8px!important}
/* CONTACT / hero — undo the old <=700 absolute portrait typography. */
body.is-phone-experience.is-landscape.contact-page .contact-v40-hero__sticky{
padding:58px var(--phone-inline-r) 64px var(--phone-inline)!important;grid-template-rows:auto 1fr auto!important
}
body.is-phone-experience.is-landscape.contact-page .contact-v40-hero__copy{
align-self:center!important;position:relative!important;height:42vh!important;display:flex!important;align-items:center!important;
gap:3vw!important;white-space:nowrap!important;min-width:0!important
}
body.is-phone-experience.is-landscape.contact-page .contact-v40-hero__copy>span{
position:relative!important;left:auto!important;top:auto!important;
font-size:clamp(52px,min(11vw,20vh),86px)!important;line-height:.69!important
}
body.is-phone-experience.is-landscape.contact-page .contact-v40-hero__aside{
left:auto!important;right:var(--phone-inline-r)!important;bottom:78px!important;width:min(34vw,250px)!important;
font-size:clamp(11px,min(2.3vw,4vh),15px)!important;line-height:1.08!important
}
body.is-phone-experience.is-landscape.contact-page .contact-v40-hero__thought{
width:min(84vw,690px)!important;white-space:normal!important;
font-size:clamp(42px,min(9vw,17vh),74px)!important;line-height:.78!important
}
body.is-phone-experience.is-landscape.contact-page .contact-v40-hero__top,
body.is-phone-experience.is-landscape.contact-page .contact-v40-hero__bottom{font-size:6px!important;gap:10px!important}
/* CONTACT / bridge — a conversation above the two points, never through them. */
body.is-phone-experience.is-landscape.contact-page .contact-bridge__sticky{padding:56px var(--phone-inline-r) 64px var(--phone-inline)!important}
body.is-phone-experience.is-landscape.contact-page .contact-bridge__label{left:var(--phone-inline)!important;top:60px!important;font-size:6px!important}
body.is-phone-experience.is-landscape.contact-page .contact-bridge__conversation{
top:82px!important;width:min(78vw,650px)!important;height:31vh!important
}
body.is-phone-experience.is-landscape.contact-page .contact-bridge__conversation p{
font-size:clamp(38px,min(7.4vw,14vh),62px)!important;line-height:.74!important
}
body.is-phone-experience.is-landscape.contact-page .contact-bridge__point{top:69%!important;gap:4px!important}
body.is-phone-experience.is-landscape.contact-page .contact-bridge__point--you{left:var(--phone-inline)!important}
body.is-phone-experience.is-landscape.contact-page .contact-bridge__point--me{right:var(--phone-inline-r)!important}
body.is-phone-experience.is-landscape.contact-page .contact-bridge__point strong{font-size:clamp(42px,min(8.3vw,15.5vh),70px)!important;line-height:.76!important}
body.is-phone-experience.is-landscape.contact-page .contact-bridge__point small{font-size:6px!important}
body.is-phone-experience.is-landscape.contact-page .contact-bridge__hint{right:var(--phone-inline-r)!important;bottom:58px!important;font-size:6px!important}
/* CONTACT / letter — still a giant physical note, but its fields are rebuilt as
a landscape writing surface rather than portrait lines magnified to 11vw. */
body.is-phone-experience.is-landscape.contact-page .contact-letter-wrap{padding:8vh 12px 11vh!important}
body.is-phone-experience.is-landscape.contact-page .contact-letter{
min-height:115dvh!important;padding:24px max(24px,4vw) 72px!important;overflow:hidden!important
}
body.is-phone-experience.is-landscape.contact-page .contact-letter__head{font-size:6px!important;padding-bottom:7px!important}
body.is-phone-experience.is-landscape.contact-page .contact-letter h2{
margin:7vh 0 0!important;font-size:clamp(54px,min(11vw,20vh),90px)!important;line-height:.69!important;max-width:5ch!important
}
body.is-phone-experience.is-landscape.contact-page .contact-letter__intro{
position:absolute!important;right:max(24px,4vw)!important;top:18vh!important;width:min(38vw,290px)!important;
margin:0!important;font-size:clamp(12px,min(2.5vw,4.5vh),17px)!important;line-height:1.08!important
}
body.is-phone-experience.is-landscape.contact-page .contact-message{margin-top:8vh!important;gap:4vh!important}
body.is-phone-experience.is-landscape.contact-page .contact-message__line,
body.is-phone-experience.is-landscape.contact-page .contact-message__message{
font-size:clamp(28px,min(5.3vw,9.8vh),44px)!important;line-height:.9!important;letter-spacing:-.055em!important
}
body.is-phone-experience.is-landscape.contact-page .contact-message__line{display:flex!important;flex-wrap:nowrap!important;align-items:baseline!important;gap:.16em!important}
body.is-phone-experience.is-landscape.contact-page .contact-message__line label{flex:1 1 auto!important;min-width:90px!important}
body.is-phone-experience.is-landscape.contact-page .contact-message__message{display:grid!important;gap:8px!important;margin-top:1vh!important}
body.is-phone-experience.is-landscape.contact-page .contact-message textarea{height:1.9em!important}
body.is-phone-experience.is-landscape.contact-page .contact-message__footer{
margin-top:2vh!important;padding-top:12px!important;gap:18px!important;flex-direction:row!important;align-items:flex-end!important
}
body.is-phone-experience.is-landscape.contact-page .contact-message__footer p{font-size:9px!important;max-width:42ch!important}
body.is-phone-experience.is-landscape.contact-page .contact-send{width:82px!important;min-width:82px!important;align-self:auto!important;font-size:7px!important}
body.is-phone-experience.is-landscape.contact-page .contact-letter__scribble{width:min(18vw,120px)!important;top:12vh!important}
body.is-phone-experience.is-landscape.contact-page .contact-direct{
min-height:100dvh!important;padding:58px var(--phone-inline-r) 68px var(--phone-inline)!important
}
body.is-phone-experience.is-landscape.contact-page .contact-direct__top{font-size:6px!important}
body.is-phone-experience.is-landscape.contact-page .contact-direct__lead{font-size:14px!important;margin:7vh 0 1vh!important}
body.is-phone-experience.is-landscape.contact-page .contact-email>span{font-size:clamp(34px,min(7.2vw,13.5vh),60px)!important;line-height:.8!important;overflow-wrap:normal!important;word-break:normal!important}
body.is-phone-experience.is-landscape.contact-page .contact-email small{font-size:6px!important}
body.is-phone-experience.is-landscape.contact-page .contact-direct__links{padding-top:6vh!important}
body.is-phone-experience.is-landscape.contact-page .contact-direct__links a{font-size:clamp(24px,min(4.8vw,9vh),40px)!important;padding:9px 0!important}
body.is-phone-experience.is-landscape.contact-page .contact-close{min-height:100dvh!important;padding:58px var(--phone-inline-r) 68px var(--phone-inline)!important}
body.is-phone-experience.is-landscape.contact-page .contact-close__copy strong{font-size:clamp(56px,min(11.5vw,21vh),94px)!important;line-height:.75!important}
body.is-phone-experience.is-landscape.contact-page .contact-close__copy>span{margin-bottom:2vh!important;font-size:7px!important}
body.is-phone-experience.is-landscape.contact-page .contact-close__work{margin-top:4vh!important;font-size:7px!important}
/* Compact landscape: 568–700px is its own authored class, not a scaled 844. */
@media(max-width:700px) and (orientation:landscape){
body.is-phone-experience.is-landscape{--phone-inline:18px;--phone-inline-r:18px}
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-scene__inner{grid-template-columns:32px minmax(0,1fr) 58px!important;gap:10px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-turn,
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-turn:nth-child(2),
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-turn:nth-child(3){font-size:clamp(40px,min(8.2vw,18vh),58px)!important}
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-turn--aside{font-size:clamp(32px,min(6.8vw,14vh),48px)!important}
body.is-phone-experience.is-landscape:not(.inner-page) .work-scene__sticky{grid-template-columns:minmax(165px,.8fr) minmax(0,1.2fr)!important;column-gap:16px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .project-trailer{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)!important;gap:16px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-copy h2{font-size:clamp(34px,min(6.8vw,13vh),48px)!important}
body.is-phone-experience.is-landscape.about-page .dual-system__plane{width:calc(50% - 22px)!important}
body.is-phone-experience.is-landscape.about-page .dual-system__plane h2{font-size:clamp(27px,min(5.2vw,10vh),38px)!important}
body.is-phone-experience.is-landscape.about-page .dual-system__facts span:nth-child(n+4){display:none!important}
body.is-phone-experience.is-landscape.about-page .skill-router__bank{left:39vw!important}
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__sticky,
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__sticky--reverse{grid-template-columns:minmax(145px,.68fr) minmax(0,1.32fr)!important;gap:14px!important}
body.is-phone-experience.is-landscape.projects-page-v38 .other-things-v37__head{grid-template-columns:.5fr 1fr .7fr!important;gap:10px!important}
body.is-phone-experience.is-landscape.contact-page .contact-v40-hero__aside{width:30vw!important;font-size:11px!important}
body.is-phone-experience.is-landscape.contact-page .contact-bridge__conversation{top:76px!important;height:28vh!important}
body.is-phone-experience.is-landscape.contact-page .contact-bridge__point{top:71%!important}
body.is-phone-experience.is-landscape.contact-page .contact-letter h2{font-size:clamp(52px,min(10.5vw,19vh),72px)!important}
body.is-phone-experience.is-landscape.contact-page .contact-letter__intro{top:17vh!important;width:34vw!important;font-size:11px!important}
body.is-phone-experience.is-landscape.contact-page .contact-message{margin-top:6vh!important;gap:3vh!important}
body.is-phone-experience.is-landscape.contact-page .contact-message__line,
body.is-phone-experience.is-landscape.contact-page .contact-message__message{font-size:clamp(26px,min(4.8vw,9vh),36px)!important}
body.is-phone-experience.is-landscape.contact-page .contact-email>span{font-size:clamp(31px,min(6.4vw,12vh),44px)!important}
}
/* Portrait bypass is not the designed mode, but it still must be safe and
readable for visitors who cannot rotate. */
body.is-phone-experience.is-portrait.phone-portrait-bypass :is(h1,h2,h3,p,strong,span,a,label){max-width:100%}
body.is-phone-experience.is-portrait.phone-portrait-bypass .contact-message__line,
body.is-phone-experience.is-portrait.phone-portrait-bypass .contact-message__message{overflow-wrap:normal!important;word-break:normal!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass .contact-email>span{overflow-wrap:anywhere!important}
/* v48 QA follow-up — short landscape career cards must physically fit between
the header and dock; keeping the horizontal tape is more important than the
desktop card height. */
body.is-phone-experience.is-landscape.about-page .career-tape__head{top:58px!important;left:var(--phone-inline)!important;right:var(--phone-inline-r)!important}
body.is-phone-experience.is-landscape.about-page .career-tape__title{left:var(--phone-inline)!important;top:82px!important;font-size:clamp(38px,min(7vw,13vh),60px)!important}
body.is-phone-experience.is-landscape.about-page .career-tape__rail{
top:112px!important;gap:14px!important;padding-left:var(--phone-inline)!important;padding-right:14vw!important
}
body.is-phone-experience.is-landscape.about-page .career-card{
width:min(54vw,410px)!important;height:calc(100dvh - 188px)!important;min-height:0!important;
padding:12px 14px!important;grid-template-columns:62px minmax(0,1fr)!important;
grid-template-rows:auto auto 1fr!important;gap:6px 12px!important
}
body.is-phone-experience.is-landscape.about-page .career-card>span,
body.is-phone-experience.is-landscape.about-page .career-card>small{font-size:6px!important;line-height:1.25!important}
body.is-phone-experience.is-landscape.about-page .career-card h3{font-size:clamp(24px,min(4.8vw,9.2vh),40px)!important;line-height:.82!important;max-width:9ch!important}
body.is-phone-experience.is-landscape.about-page .career-card p{font-size:8px!important;line-height:1.18!important;max-width:38ch!important}
body.is-phone-experience.is-landscape.about-page .career-tape__yearline{left:var(--phone-inline)!important;right:var(--phone-inline-r)!important;bottom:58px!important}
@media(max-width:700px) and (orientation:landscape){
body.is-phone-experience.is-landscape.about-page .career-tape__rail{top:104px!important}
body.is-phone-experience.is-landscape.about-page .career-card{width:52vw!important;height:calc(100dvh - 174px)!important;padding:10px 12px!important;grid-template-columns:54px minmax(0,1fr)!important}
body.is-phone-experience.is-landscape.about-page .career-card h3{font-size:clamp(22px,min(4.6vw,8.8vh),32px)!important}
body.is-phone-experience.is-landscape.about-page .career-card p{font-size:7px!important}
}
/* About's actual v26 career implementation uses career-step/career-evolution,
not the retired career-card structure above. Recompose it as a wide dossier:
narrative left, generated system visual right. */
body.is-phone-experience.is-landscape.about-page .career-evolution__copy{
left:var(--phone-inline)!important;right:auto!important;top:104px!important;
width:34vw!important;height:calc(100dvh - 174px)!important
}
body.is-phone-experience.is-landscape.about-page .career-step{
display:block!important;inset:0!important;min-width:0!important;overflow:hidden!important
}
body.is-phone-experience.is-landscape.about-page .career-step>span,
body.is-phone-experience.is-landscape.about-page .career-step>small{
display:block!important;font-size:6px!important;line-height:1.25!important;margin:0 0 4px!important
}
body.is-phone-experience.is-landscape.about-page .career-step h3{
margin:9px 0 0!important;font-size:clamp(26px,min(5vw,9.6vh),42px)!important;
line-height:.81!important;max-width:9ch!important
}
body.is-phone-experience.is-landscape.about-page .career-step p{
margin:9px 0 0!important;font-size:clamp(7px,min(1.45vw,2.65vh),10px)!important;
line-height:1.17!important;max-width:31ch!important
}
body.is-phone-experience.is-landscape.about-page .career-evolution__machine{
left:auto!important;right:var(--phone-inline-r)!important;top:68px!important;bottom:60px!important;
width:52vw!important;height:auto!important
}
body.is-phone-experience.is-landscape.about-page .ocr-document{padding:14px!important}
body.is-phone-experience.is-landscape.about-page .ocr-document p{margin-top:8vh!important;font-size:8px!important;line-height:1.45!important}
@media(max-width:700px) and (orientation:landscape){
body.is-phone-experience.is-landscape.about-page .career-evolution__copy{top:96px!important;width:35vw!important;height:calc(100dvh - 160px)!important}
body.is-phone-experience.is-landscape.about-page .career-step h3{font-size:clamp(24px,min(4.6vw,8.8vh),32px)!important;margin-top:7px!important}
body.is-phone-experience.is-landscape.about-page .career-step p{font-size:7px!important;line-height:1.12!important;margin-top:6px!important}
body.is-phone-experience.is-landscape.about-page .career-evolution__machine{top:66px!important;bottom:60px!important;width:50vw!important}
}
/* Phone sentence changes should read as discrete thoughts, not two translucent
posters sitting on top of each other during a quick finger gesture. */
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-turn{filter:none!important}
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-turn:not(.is-current){
opacity:0!important;visibility:hidden!important;transform:translate3d(0,14px,0)!important;
transition:opacity .10s ease,transform .16s ease,visibility 0s linear .10s!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .quiet-turn.is-current{
opacity:1!important;visibility:visible!important;transform:none!important;
transition:opacity .18s ease .09s,transform .28s cubic-bezier(.16,1,.3,1) .06s,visibility 0s!important
}
/* v48 bound fixes found at 844×390. */
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-visual--ayamen .ayamen-pin{
width:26px!important;height:26px!important;font-size:7px!important;box-shadow:0 0 0 6px rgba(201,113,67,.14)!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-visual--ayamen .ayamen-pin--1{left:24%!important;top:60%!important}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-visual--ayamen .ayamen-pin--2{right:20%!important;top:24%!important}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-visual--ayamen .ayamen-pin--3{right:10%!important;bottom:24%!important}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-visual--ayamen .ayamen-pin--4{left:49%!important;top:42%!important}
body.is-phone-experience.is-landscape:not(.inner-page) .demo-layer--rtl{bottom:21%!important}
body.is-phone-experience.is-landscape:not(.inner-page) .rtl-stage{width:92%!important;min-height:0!important;height:auto!important;padding:12px 0 14px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .rtl-stage__layout{margin-top:3vh!important;grid-template-columns:42px minmax(0,1fr)!important;gap:3vw!important}
body.is-phone-experience.is-landscape:not(.inner-page) .capability-demo[data-demo-mode="rtl"] .rtl-stage__layout{grid-template-columns:minmax(0,1fr) 42px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .rtl-stage__copy{gap:7px!important;min-width:0!important}
body.is-phone-experience.is-landscape:not(.inner-page) .rtl-stage__copy strong{font-size:clamp(22px,min(4.2vw,7.6vh),36px)!important;line-height:1.05!important}
body.is-phone-experience.is-landscape:not(.inner-page) .rtl-stage__copy p{font-size:7px!important;line-height:1.1!important}
body.is-phone-experience.is-landscape:not(.inner-page) .rtl-stage__copy small{font-size:6px!important}
body.is-phone-experience.is-landscape.about-page .za-apparatus{right:1.5vw!important;width:min(48vw,360px)!important;opacity:.62!important}
@media(max-width:700px) and (orientation:landscape){body.is-phone-experience.is-landscape.about-page .za-apparatus{right:-2vw!important;width:50vw!important;opacity:.5!important}}
body.is-phone-experience.is-landscape:not(.inner-page) .chaos-note{right:var(--phone-inline-r)!important;left:auto!important;max-width:20ch!important;text-align:right!important}
/* v48 final phone QA: conversation lines are discrete on a short touch
viewport. Their scroll runways remain intact, but retired lines do not leave
clipped letter fragments at the frame edge. */
body.is-phone-experience.is-landscape:not(.inner-page) .cap-turn:not(.is-current){
opacity:0!important;visibility:hidden!important;filter:none!important;
transition:opacity .12s ease,visibility 0s linear .12s!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .cap-turn.is-current{
opacity:1!important;visibility:visible!important;filter:none!important;
transition:opacity .18s ease .04s,visibility 0s!important
}
/* The reel is supposed to travel beyond the viewport. Mask the authored entry
and exit edges so moving captions read as a carousel transition rather than
accidental clipped text. */
body.is-phone-experience.is-landscape:not(.inner-page) .system-reel__stage{
overflow:hidden!important;isolation:isolate!important
}
body.is-phone-experience.is-landscape:not(.inner-page) .system-reel__stage::before,
body.is-phone-experience.is-landscape:not(.inner-page) .system-reel__stage::after{
content:"";position:absolute;z-index:8;top:0;bottom:0;width:clamp(18px,4.8vw,44px);
pointer-events:none
}
body.is-phone-experience.is-landscape:not(.inner-page) .system-reel__stage::before{
left:0;background:linear-gradient(90deg,var(--stage-bg,#111820),transparent)
}
body.is-phone-experience.is-landscape:not(.inner-page) .system-reel__stage::after{
right:0;background:linear-gradient(270deg,var(--stage-bg,#111820),transparent)
}
body.is-phone-experience.is-portrait.phone-portrait-bypass{overflow-x:clip!important;max-width:100vw!important}
/* ==================== PORTRAIT / COMPONENT ADAPTATIONS ==================== */
/* ======================================================================
ZAZA v49 — PHONE EXPERIENCE REBUILD
Loaded last. Phone portrait + landscape are authored layouts, not a
compressed desktop cascade. Desktop remains untouched.
====================================================================== */
html.is-phone-experience,
body.is-phone-experience{
--phone-safe-top:max(10px,env(safe-area-inset-top));
--phone-safe-right:max(14px,env(safe-area-inset-right));
--phone-safe-bottom:max(10px,env(safe-area-inset-bottom));
--phone-safe-left:max(14px,env(safe-area-inset-left));
--phone-pad-x:max(18px,var(--phone-safe-left));
--phone-pad-r:max(18px,var(--phone-safe-right));
--phone-dock-space:86px;
overflow-x:clip!important;
}
body.is-phone-experience:not(.about-page) main{overflow-x:clip!important}
body.is-phone-experience.about-page main,body.is-phone-experience.about-page .about-story,body.is-phone-experience.about-page .about-chapter{overflow-x:visible!important}
body.is-phone-experience .mobile-fit-text{
white-space:nowrap!important;
overflow-wrap:normal!important;
word-break:keep-all!important;
hyphens:none!important;
text-wrap:nowrap!important;
max-width:none!important;
}
body.is-phone-experience .mobile-fit-text br{display:block!important}
/* ----------------------------------------------------------------------
Dock + iOS-like long-press liquid glass preview
---------------------------------------------------------------------- */
body.is-phone-experience .site-dock-shell{
bottom:max(10px,env(safe-area-inset-bottom))!important;
max-width:calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 16px)!important;
z-index:950!important;
}
body.is-phone-experience .site-dock{
max-width:100%!important;
-webkit-touch-callout:none;
user-select:none;
}
body.is-phone-experience .dock-app{
-webkit-touch-callout:none;
touch-action:manipulation;
}
body.is-phone-experience .dock-app.is-liquid-held{
transform:translateY(-3px) scale(.94)!important;
filter:brightness(1.14)!important;
}
.mobile-liquid-popover{
position:fixed;z-index:20000;left:0;top:0;width:94px;min-height:78px;
padding:12px 10px 10px;border-radius:25px;
display:grid;place-items:center;gap:7px;
color:#fff;background:linear-gradient(145deg,rgba(255,255,255,.25),rgba(255,255,255,.08));
border:1px solid rgba(255,255,255,.38);
box-shadow:0 18px 52px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.11);
-webkit-backdrop-filter:blur(24px) saturate(190%);backdrop-filter:blur(24px) saturate(190%);
opacity:0;transform:translate3d(-50%,10px,0) scale(.74);transform-origin:50% 100%;
pointer-events:none;transition:opacity .16s ease,transform .34s cubic-bezier(.2,.9,.2,1);
overflow:hidden;
}
.mobile-liquid-popover::before{
content:"";position:absolute;inset:-35%;pointer-events:none;
background:radial-gradient(circle at 36% 14%,rgba(255,255,255,.58),transparent 30%),radial-gradient(circle at 82% 82%,rgba(180,210,255,.20),transparent 34%);
filter:blur(7px);transform:rotate(-13deg)
}
.mobile-liquid-popover::after{
content:"";position:absolute;width:18px;height:18px;left:50%;bottom:-8px;transform:translateX(-50%) rotate(45deg);
border-right:1px solid rgba(255,255,255,.31);border-bottom:1px solid rgba(255,255,255,.31);
background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)
}
.mobile-liquid-popover.is-visible{opacity:1;transform:translate3d(-50%,0,0) scale(1)}
.mobile-liquid-popover__icon{position:relative;z-index:1;width:33px;height:33px;display:grid;place-items:center}
.mobile-liquid-popover__icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.mobile-liquid-popover__label{position:relative;z-index:1;font:600 8px/1.05 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em;text-transform:uppercase;text-align:center}
/* ----------------------------------------------------------------------
HOME — universal phone fixes
---------------------------------------------------------------------- */
body.is-phone-experience:not(.inner-page) .quiet-scene,
body.is-phone-experience:not(.inner-page) .work-scene,
body.is-phone-experience:not(.inner-page) .project-trailer,
body.is-phone-experience:not(.inner-page) .responsive-story,
body.is-phone-experience:not(.inner-page) .browser-story,
body.is-phone-experience:not(.inner-page) .system-reel,
body.is-phone-experience:not(.inner-page) .break-site,
body.is-phone-experience:not(.inner-page) .landing-exit{
overflow:clip!important;
}
body.is-phone-experience:not(.inner-page) .p1-depth-overlay{padding:16px!important;overflow:hidden!important}
body.is-phone-experience:not(.inner-page) .p1-depth-overlay h3{width:100%!important;text-align:center!important;line-height:.82!important}
/* Capability conversations: only one current thought is allowed to occupy the stage. */
body.is-phone-experience:not(.inner-page) .cap-turn:not(.is-current){opacity:0!important;visibility:hidden!important;pointer-events:none!important}
body.is-phone-experience:not(.inner-page) .cap-turn.is-current{opacity:1!important;visibility:visible!important}
body.is-phone-experience:not(.inner-page) .break-turn:not(.is-current),
body.is-phone-experience:not(.inner-page) .exit-turn:not(.is-current){opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:none!important}
body.is-phone-experience:not(.inner-page) .break-turn.is-current,
body.is-phone-experience:not(.inner-page) .exit-turn.is-current{opacity:1!important;visibility:visible!important}
/* MOBILE? must actually move on mobile. This explicitly wins over the legacy
<=980 rule that disabled the animation. */
body.is-phone-experience:not(.inner-page) .capability-demo[data-demo-mode="mobile"] .demo-layer--mobile{
opacity:1!important;transform:none!important;display:grid!important;place-items:center!important
}
body.is-phone-experience:not(.inner-page) .capability-demo[data-demo-mode="mobile"] .demo-device{
animation:zazaPhoneMorph 2.9s cubic-bezier(.68,-.15,.22,1.15) infinite alternate!important;
animation-play-state:running!important;
transform-origin:center!important;
}
@keyframes zazaPhoneMorph{
0%{width:min(33vw,138px);height:min(46vh,270px);border-radius:30px;transform:rotate(-3deg)}
48%{width:min(42vw,178px);height:min(40vh,224px);border-radius:23px;transform:rotate(2deg)}
100%{width:min(72vw,330px);height:min(25vh,160px);border-radius:14px;transform:rotate(0)}
}
body.is-phone-experience.is-landscape:not(.inner-page) .capability-demo[data-demo-mode="mobile"] .demo-device{
animation-name:zazaPhoneMorphLandscape!important
}
@keyframes zazaPhoneMorphLandscape{
0%{width:min(17vw,145px);height:min(56vh,250px);border-radius:28px;transform:rotate(-3deg)}
100%{width:min(43vw,390px);height:min(38vh,170px);border-radius:14px;transform:rotate(0)}
}
body.is-phone-experience:not(.inner-page) .demo-device i{margin-top:clamp(7px,2vh,14px)!important}
/* A NORMAL WEBSITE must show the entire browser-like object, not a cropped
fragment of the desktop proof. */
body.is-phone-experience:not(.inner-page) .demo-layer--normal{display:grid!important;place-items:center!important;inset:5%!important}
body.is-phone-experience:not(.inner-page) .normal-site{
width:min(88vw,430px)!important;height:min(45vh,360px)!important;min-height:210px!important;
padding:14px!important;grid-template-columns:1fr auto!important;grid-template-rows:auto 1fr!important;
overflow:hidden!important
}
body.is-phone-experience:not(.inner-page) .normal-site nav{display:block!important;font-size:6px!important;white-space:nowrap!important}
body.is-phone-experience:not(.inner-page) .normal-site h3{align-self:center!important;margin:0!important;line-height:.82!important;width:100%!important}
body.is-phone-experience.is-landscape:not(.inner-page) .normal-site{width:min(58vw,510px)!important;height:min(62vh,270px)!important;min-height:0!important}
/* Homepage final form — phone reveal is progressive and persistent. */
body.is-phone-experience:not(.inner-page) .post-footer-story{height:100dvh!important;min-height:100dvh!important}
body.is-phone-experience:not(.inner-page) .post-footer-stage{overflow-y:auto!important;overscroll-behavior:contain!important}
body.is-phone-experience:not(.inner-page) .pf-contact{
height:auto!important;min-height:100dvh!important;justify-content:flex-start!important;
overflow-y:auto!important;padding:calc(var(--phone-safe-top) + 52px) var(--phone-pad-r) calc(var(--phone-dock-space) + var(--phone-safe-bottom) + 24px) var(--phone-pad-x)!important;
gap:22px!important
}
body.is-phone-experience:not(.inner-page) .pf-row{gap:10px!important;align-items:center!important}
body.is-phone-experience:not(.inner-page) .pf-text{line-height:.93!important}
body.is-phone-experience:not(.inner-page) .pf-fragment.mobile-persist-visible{opacity:1!important;transform:none!important;pointer-events:auto!important}
body.is-phone-experience:not(.inner-page) .pf-input-wrap{min-width:0!important}
body.is-phone-experience:not(.inner-page) .pf-input-wrap input{min-width:0!important}
body.is-phone-experience:not(.inner-page) .pf-btns{min-width:0!important}
body.is-phone-experience:not(.inner-page) .pf-btns button{white-space:nowrap!important}
body.is-phone-experience:not(.inner-page) .pf-btns--social{display:grid!important;grid-template-columns:minmax(0,1.8fr) minmax(76px,.8fr)!important;gap:8px!important;flex:1 1 360px!important}
body.is-phone-experience:not(.inner-page) .pf-btns--social button{width:100%!important;min-width:0!important;padding-inline:10px!important}
/* Desktop form regression: keep WhatsApp / LinkedIn and Email in the same
bounded control group without changing the desktop art direction. */
@media (hover:hover) and (pointer:fine) and (min-width:981px){
.pf-row--detail .pf-input-wrap--email{flex:1 1 20vw;min-width:190px}
.pf-row--detail .pf-btns--social{flex:0 1 min(39vw,650px);display:grid;grid-template-columns:minmax(220px,1.65fr) minmax(120px,.75fr);gap:clamp(10px,1vw,18px)}
.pf-row--detail .pf-btns--social button{width:100%;min-width:0;padding-inline:clamp(16px,1.5vw,28px);font-size:clamp(18px,1.45vw,28px)}
}
/* ----------------------------------------------------------------------
PORTRAIT — first-class phone layout
---------------------------------------------------------------------- */
body.is-phone-experience.is-portrait.phone-portrait-bypass{
--phone-dock-space:92px;
}
body.is-phone-experience.is-portrait.phone-portrait-bypass .site-header{padding-left:var(--phone-pad-x)!important;padding-right:var(--phone-pad-r)!important}
/* Quiet */
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .quiet-scene{min-height:390dvh!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .quiet-scene__sticky{height:100dvh!important;padding:64px var(--phone-pad-r) calc(var(--phone-dock-space) + 18px) var(--phone-pad-x)!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .quiet-turn{width:calc(100vw - var(--phone-pad-x) - var(--phone-pad-r))!important;text-align:left!important;line-height:.78!important}
/* Selected work: composition rather than mobile list. */
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .work-scene{min-height:100dvh!important;padding:0!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .work-scene__sticky{
position:relative!important;height:auto!important;min-height:100dvh!important;padding:68px var(--phone-pad-r) calc(var(--phone-dock-space) + 22px) var(--phone-pad-x)!important;
display:grid!important;grid-template-rows:auto auto minmax(210px,36dvh)!important;gap:18px!important;overflow:hidden!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .work-scene__head{min-width:0!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .work-scene__head h2{margin:8px 0 5px!important;line-height:.76!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .work-scene__head p{font-size:11px!important;margin:0!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .work-index{margin:0!important;min-width:0!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .work-index__item{min-height:42px!important;padding:5px 0!important;grid-template-columns:24px minmax(0,1fr) auto!important;gap:8px!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .work-index__item>span:not(.work-index__number){line-height:.8!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .work-index__item small{font-size:6px!important;white-space:nowrap!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .work-visual{margin:0!important;width:100%!important;height:100%!important;min-height:210px!important;overflow:hidden!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .work-preview{inset:0!important}
/* Project trailers: text and visual both stay in the viewport. */
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .project-trailer{
min-height:100dvh!important;padding:68px var(--phone-pad-r) calc(var(--phone-dock-space) + 18px) var(--phone-pad-x)!important;
display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto minmax(245px,47dvh)!important;align-content:center!important;gap:18px!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .trailer-copy{min-width:0!important;z-index:4!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .trailer-copy h2{margin:9px 0 7px!important;line-height:.76!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .trailer-copy p{font-size:13px!important;line-height:1.06!important;margin:4px 0!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .trailer-copy .trailer-joke{font-size:8px!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .trailer-copy a{margin-top:12px!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .trailer-visual{order:initial!important;height:100%!important;min-height:245px!important;width:100%!important;overflow:hidden!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .ayamen-frame{width:62%!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .p1-depth-plane{width:min(38vw,155px)!important}
/* Capabilities */
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .capability-demo{height:46dvh!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .capability-beats{margin-top:0!important;padding-top:46dvh!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .cap-turn,
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .cap-turn--question,
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .cap-turn--reply,
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .cap-turn--aside{
min-height:54dvh!important;padding:14dvh var(--phone-pad-r) calc(var(--phone-dock-space) + 12px) var(--phone-pad-x)!important;
align-items:flex-start!important;justify-content:center!important;text-align:left!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .cap-turn h2,
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .cap-turn p{line-height:.76!important;margin:8px 0!important;width:auto!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .cap-turn small{font-size:20px!important;line-height:.92!important;max-width:88vw!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .cap-turn--main{min-height:85dvh!important;padding:14dvh var(--phone-pad-r) var(--phone-dock-space) var(--phone-pad-x)!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .cap-turn--main p{width:100%!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .rtl-stage{width:92%!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .rtl-stage__copy strong{font-size:clamp(22px,7vw,34px)!important;line-height:1.05!important}
/* Responsive / browser chapters */
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) :is(.responsive-story,.browser-story){
min-height:110dvh!important;padding:70px var(--phone-pad-r) calc(var(--phone-dock-space) + 20px) var(--phone-pad-x)!important;
display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto minmax(310px,50dvh)!important;gap:18px!important;align-content:center!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) :is(.responsive-story__copy,.browser-story__copy){align-self:end!important;min-width:0!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) :is(.responsive-story h2,.browser-story h2){margin:8px 0 10px!important;line-height:.77!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) :is(.responsive-story p,.browser-story p){font-size:13px!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .responsive-stage{height:100%!important;min-height:310px!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .responsive-browser{width:94%!important;height:84%!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .browser-story__stage{height:100%!important;min-height:310px!important}
/* System reel: title is always exactly its authored 2 lines. */
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .system-reel{
min-height:120dvh!important;padding:72px var(--phone-pad-r) calc(var(--phone-dock-space) + 20px) var(--phone-pad-x)!important;display:block!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .system-reel__copy{width:100%!important;max-width:none!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .system-reel__copy h2{margin:8px 0!important;line-height:.75!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .system-reel__track{margin-top:5dvh!important;gap:14px!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .system-reel figure,
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .system-reel figure:nth-child(even){width:76vw!important;margin-top:0!important}
/* Break / Anyway */
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .break-site__stage,
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .landing-exit__stage{padding:64px var(--phone-pad-r) calc(var(--phone-dock-space) + 18px) var(--phone-pad-x)!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .break-turn,
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .exit-turn{inset:64px var(--phone-pad-r) calc(var(--phone-dock-space) + 18px) var(--phone-pad-x)!important;display:grid!important;place-items:center!important;text-align:center!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .break-turn h2,
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .break-turn p,
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .exit-turn h2,
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .exit-turn p{line-height:.76!important;text-align:center!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .break-site__debris{opacity:.34!important;transform:scale(.76)!important}
/* Form portrait */
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .pf-row{flex-wrap:wrap!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .pf-text{font-size:clamp(23px,7.2vw,31px)!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .pf-input-wrap{flex:1 1 44%!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .pf-input-wrap input{font-size:clamp(20px,5.6vw,26px)!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .pf-btns--topic{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .pf-btns--topic button:last-child{grid-column:1/-1!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .pf-btns button{min-height:46px!important;font-size:13px!important;padding-inline:9px!important;border-radius:13px!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .pf-send{font-size:clamp(38px,11vw,54px)!important;margin-top:8px!important}
/* ----------------------------------------------------------------------
ABOUT — portrait + phone-wide source-level corrections
---------------------------------------------------------------------- */
body.is-phone-experience.about-page .dual-system{overflow:clip!important}
body.is-phone-experience.about-page .dual-system__stage{overflow:hidden!important}
body.is-phone-experience.about-page .dual-system__plane{overflow:hidden!important}
body.is-phone-experience.about-page .dual-system__plane h2{white-space:nowrap!important;max-width:none!important;word-break:keep-all!important;overflow-wrap:normal!important}
body.is-phone-experience.about-page .dual-system__facts span{white-space:nowrap!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system{height:175dvh!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__stage{height:100dvh!important;padding:0!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__head{top:64px!important;left:var(--phone-pad-x)!important;right:var(--phone-pad-r)!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__plane{
top:25dvh!important;bottom:20dvh!important;width:calc(50% - 22px)!important;margin:0!important;padding:18px 8px!important;
transform:none!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__plane--left{left:var(--phone-pad-x)!important;right:auto!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__plane--right{right:var(--phone-pad-r)!important;left:auto!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__plane small{font-size:5px!important;letter-spacing:.12em!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__plane h2{font-size:clamp(22px,6.25vw,30px)!important;line-height:.81!important;letter-spacing:-.07em!important;margin:10px 0!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__facts{left:8px!important;right:8px!important;bottom:10px!important;gap:3px!important;font-size:5px!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__facts span{padding-top:3px!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__merge{left:var(--phone-pad-x)!important;right:var(--phone-pad-r)!important;width:auto!important;text-align:center!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__merge strong{line-height:.77!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__meter{left:var(--phone-pad-x)!important;right:var(--phone-pad-r)!important;bottom:calc(var(--phone-dock-space) + 4px)!important;font-size:5px!important}
/* Career: narrative gets its own readable half; animation remains present. */
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .career-tape{overflow:hidden!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .career-tape__stage{padding:68px var(--phone-pad-r) calc(var(--phone-dock-space) + 16px) var(--phone-pad-x)!important;overflow:hidden!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .career-step{
left:var(--phone-pad-x)!important;right:var(--phone-pad-r)!important;top:13dvh!important;width:auto!important;max-width:none!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .career-step h3{line-height:.78!important;margin:8px 0!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .career-step p{font-size:11px!important;line-height:1.16!important;max-width:42ch!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .career-evolution{left:var(--phone-pad-x)!important;right:var(--phone-pad-r)!important;top:auto!important;bottom:calc(var(--phone-dock-space) + 18px)!important;height:31dvh!important;width:auto!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .detail-selftest h2,
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .detail-callout,
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .detail-expense p,
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .skill-router__intro p,
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .human-part__copy h2,
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .seam-copy p{line-height:.78!important}
/* Skill inspector works in portrait too and stays in-frame. */
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .skill-router__stage{overflow:hidden!important;padding-left:var(--phone-pad-x)!important;padding-right:var(--phone-pad-r)!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .skill-router__inspector{max-width:calc(100vw - var(--phone-pad-x) - var(--phone-pad-r))!important}
/* ----------------------------------------------------------------------
PROJECTS — phone transitions are discrete and readable
---------------------------------------------------------------------- */
body.is-phone-experience.projects-page-v38 .interlude-v38__sticky,
body.is-phone-experience.projects-page-v38 .other-bridge-v38__sticky{overflow:hidden!important}
body.is-phone-experience.projects-page-v38 .interlude-v38 p,
body.is-phone-experience.projects-page-v38 .other-bridge-v38 p,
body.is-phone-experience.projects-page-v38 .other-bridge-v38 span,
body.is-phone-experience.projects-page-v38 .projects-end-v38 p{word-break:keep-all!important;overflow-wrap:normal!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .work-open-v38__sticky{padding:64px var(--phone-pad-r) calc(var(--phone-dock-space) + 12px) var(--phone-pad-x)!important;overflow:hidden!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .work-open-v38__title{line-height:.72!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .feature-v38__sticky,
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .feature-v38__sticky--reverse{
padding:66px var(--phone-pad-r) calc(var(--phone-dock-space) + 20px) var(--phone-pad-x)!important;gap:18px!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .feature-v38 h2{line-height:.76!important;margin:8px 0!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .feature-v38__device,
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .feature-v38__sticky--reverse .feature-v38__device{width:100%!important;margin-left:0!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .interlude-v38__sticky,
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .other-bridge-v38__sticky{padding:64px var(--phone-pad-r) calc(var(--phone-dock-space) + 18px) var(--phone-pad-x)!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .direction-v38__a,
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .direction-v38__b,
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .direction-v38__c,
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .distance-v38__a,
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .distance-v38__b,
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .distance-v38__answer,
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .simple-v38__looks,
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .simple-v38__good,
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .weird-v38__one,
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .weird-v38__two,
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .other-bridge-v38 p,
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .other-bridge-v38 span{line-height:.76!important;text-align:center!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .other-things-v37{padding:72px var(--phone-pad-r) calc(var(--phone-dock-space) + 22px) var(--phone-pad-x)!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .other-things-v37__head h2{line-height:.77!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .projects-end-v38{overflow:hidden!important;padding-inline:var(--phone-pad-x)!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.projects-page-v38 .projects-end-v38 p{line-height:.73!important}
/* ----------------------------------------------------------------------
CONTACT — portrait + landscape are both composed
---------------------------------------------------------------------- */
body.is-phone-experience.contact-page .contact-v40-hero,
body.is-phone-experience.contact-page .contact-bridge,
body.is-phone-experience.contact-page .contact-letter-wrap,
body.is-phone-experience.contact-page .contact-direct,
body.is-phone-experience.contact-page .contact-close{overflow:clip!important}
body.is-phone-experience.contact-page .contact-email>span{overflow-wrap:normal!important;word-break:keep-all!important;white-space:nowrap!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-v40-hero{height:165dvh!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-v40-hero__sticky{padding:64px var(--phone-pad-r) calc(var(--phone-dock-space) + 14px) var(--phone-pad-x)!important;overflow:hidden!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-v40-hero__copy{height:42dvh!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:1fr 1fr!important;align-self:center!important;gap:0!important;overflow:hidden!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-v40-hero__copy>span{position:relative!important;left:auto!important;top:auto!important;display:flex!important;align-items:flex-end!important;line-height:.72!important;transform:none!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-v40-hero__hi{justify-content:flex-end!important;align-items:flex-start!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-v40-hero__aside{left:var(--phone-pad-x)!important;right:var(--phone-pad-r)!important;bottom:calc(var(--phone-dock-space) + 32px)!important;width:auto!important;font-size:13px!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-v40-hero__thought{width:calc(100vw - var(--phone-pad-x) - var(--phone-pad-r))!important;white-space:nowrap!important;line-height:.76!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-v40-hero__bottom{bottom:calc(var(--phone-dock-space) + 8px)!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-bridge__sticky{padding:64px var(--phone-pad-r) calc(var(--phone-dock-space) + 18px) var(--phone-pad-x)!important;overflow:hidden!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-bridge__conversation p,
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-bridge__point strong{width:100%!important;line-height:.76!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-letter{padding-left:var(--phone-pad-x)!important;padding-right:var(--phone-pad-r)!important;max-width:100vw!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-letter h2{line-height:.76!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-direct{padding:72px var(--phone-pad-r) calc(var(--phone-dock-space) + 24px) var(--phone-pad-x)!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-email>span{line-height:.84!important;letter-spacing:-.07em!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-direct__links a{font-size:clamp(33px,9vw,44px)!important;line-height:.88!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-close{padding-left:var(--phone-pad-x)!important;padding-right:var(--phone-pad-r)!important;padding-bottom:var(--phone-dock-space)!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-close__copy strong{line-height:.74!important}
/* ----------------------------------------------------------------------
LANDSCAPE — clean short-height authored mode
---------------------------------------------------------------------- */
body.is-phone-experience.is-landscape{--phone-dock-space:66px}
body.is-phone-experience.is-landscape .site-dock-shell{bottom:max(5px,env(safe-area-inset-bottom))!important}
body.is-phone-experience.is-landscape .dock-app{min-height:38px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .project-trailer{padding-top:54px!important;padding-bottom:64px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-copy h2,
body.is-phone-experience.is-landscape:not(.inner-page) .work-scene__head h2,
body.is-phone-experience.is-landscape:not(.inner-page) .system-reel__copy h2,
body.is-phone-experience.is-landscape:not(.inner-page) .responsive-story h2,
body.is-phone-experience.is-landscape:not(.inner-page) .browser-story h2{line-height:.74!important}
body.is-phone-experience.is-landscape:not(.inner-page) .p1-depth-overlay h3{line-height:.78!important}
body.is-phone-experience.is-landscape:not(.inner-page) .normal-site h3{line-height:.78!important}
body.is-phone-experience.is-landscape:not(.inner-page) .break-turn,
body.is-phone-experience.is-landscape:not(.inner-page) .exit-turn{overflow:hidden!important;padding-inline:var(--phone-pad-x)!important}
body.is-phone-experience.is-landscape:not(.inner-page) .pf-contact{padding-top:48px!important;padding-bottom:72px!important;gap:12px!important;overflow-y:auto!important}
body.is-phone-experience.is-landscape:not(.inner-page) .pf-row{gap:8px 10px!important;flex-wrap:nowrap!important}
body.is-phone-experience.is-landscape:not(.inner-page) .pf-text{font-size:clamp(18px,4.3vh,27px)!important}
body.is-phone-experience.is-landscape:not(.inner-page) .pf-input-wrap input{font-size:clamp(16px,3.7vh,23px)!important}
body.is-phone-experience.is-landscape:not(.inner-page) .pf-btns button{min-height:38px!important;font-size:clamp(10px,2.7vh,14px)!important;padding-inline:9px!important;border-radius:10px!important}
body.is-phone-experience.is-landscape:not(.inner-page) .pf-send{font-size:clamp(31px,8vh,48px)!important}
body.is-phone-experience.is-landscape.about-page .dual-system__plane h2{line-height:.78!important}
body.is-phone-experience.is-landscape.about-page .career-step h3{line-height:.76!important}
body.is-phone-experience.is-landscape.about-page .detail-selftest h2,
body.is-phone-experience.is-landscape.about-page .detail-expense p,
body.is-phone-experience.is-landscape.about-page .skill-router__intro p,
body.is-phone-experience.is-landscape.about-page .human-part__copy h2,
body.is-phone-experience.is-landscape.about-page .seam-copy p{line-height:.76!important}
body.is-phone-experience.is-landscape.projects-page-v38 .interlude-v38 p,
body.is-phone-experience.is-landscape.projects-page-v38 .other-bridge-v38 p,
body.is-phone-experience.is-landscape.projects-page-v38 .other-bridge-v38 span,
body.is-phone-experience.is-landscape.projects-page-v38 .projects-end-v38 p{line-height:.74!important}
body.is-phone-experience.is-landscape.contact-page .contact-v40-hero__copy>span,
body.is-phone-experience.is-landscape.contact-page .contact-v40-hero__thought,
body.is-phone-experience.is-landscape.contact-page .contact-bridge__conversation p,
body.is-phone-experience.is-landscape.contact-page .contact-bridge__point strong,
body.is-phone-experience.is-landscape.contact-page .contact-letter h2,
body.is-phone-experience.is-landscape.contact-page .contact-close__copy strong{line-height:.74!important}
body.is-phone-experience.is-landscape.contact-page .contact-email>span{white-space:nowrap!important;line-height:.8!important}
/* Very short landscape: preserve every text beat and dock. */
@media (max-height:360px) and (orientation:landscape){
body.is-phone-experience{--phone-dock-space:58px}
body.is-phone-experience .site-header{height:44px!important}
body.is-phone-experience:not(.inner-page) .project-trailer{padding-top:46px!important;padding-bottom:56px!important}
body.is-phone-experience:not(.inner-page) .trailer-copy p{font-size:9px!important}
body.is-phone-experience:not(.inner-page) .trailer-copy .trailer-joke{font-size:6px!important}
body.is-phone-experience.about-page .career-step p{font-size:6.4px!important;line-height:1.08!important}
body.is-phone-experience.projects-page-v38 .feature-v38__copy p{font-size:9px!important;line-height:1.05!important}
body.is-phone-experience.contact-page .contact-v40-hero__aside{font-size:9px!important;line-height:1.08!important}
}
/* ======================================================================
v49.1 — final phone composition corrections
====================================================================== */
/* The homepage form needs a real scroll runway. The stage stays pinned;
fragments reveal once and remain visible on phone until the terminal handoff. */
body.is-phone-experience:not(.inner-page) .post-footer-story{
height:auto!important;
min-height:calc(var(--screen-h) * 6.4)!important;
overflow:visible!important;
}
body.is-phone-experience:not(.inner-page) .post-footer-stage{
position:sticky!important;top:0!important;
width:100%!important;height:var(--screen-h)!important;min-height:var(--screen-h)!important;
overflow:hidden!important;
}
body.is-phone-experience:not(.inner-page) .pf-contact{
position:absolute!important;inset:0!important;
width:100%!important;height:var(--screen-h)!important;min-height:0!important;
overscroll-behavior:contain!important;
}
/* Desktop detail/contact line: the social-method control is one bounded box. */
@media (hover:hover) and (pointer:fine) and (min-width:981px){
.pf-row--detail{display:grid!important;grid-template-columns:max-content minmax(180px,1fr) minmax(350px,.72fr)!important;align-items:center!important;column-gap:clamp(16px,1.5vw,28px)!important}
.pf-row--detail .pf-text{min-width:0!important}
.pf-row--detail .pf-input-wrap--email{width:100%!important;min-width:0!important;max-width:none!important}
.pf-row--detail .pf-btns--social{width:100%!important;min-width:0!important;display:grid!important;grid-template-columns:minmax(0,1.55fr) minmax(104px,.65fr)!important;gap:10px!important}
.pf-row--detail .pf-btns--social button{width:100%!important;min-width:0!important;padding-inline:clamp(12px,1vw,22px)!important;font-size:clamp(16px,1.2vw,23px)!important}
}
/* About / Career — portrait is a real native chapter deck, not the desktop
sticky timeline forced into a tall narrow viewport. */
.mobile-career-deck{display:none}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .career-tape{
height:auto!important;min-height:0!important;overflow:visible!important;background:#0a0d12!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .career-tape>.career-tape__stage{display:none!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-deck{display:block;background:#0a0d12;color:#dce5f0}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-deck__intro,
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card{
position:relative;min-height:100dvh;padding:calc(var(--phone-safe-top) + 62px) var(--phone-pad-r) calc(var(--phone-dock-space) + 24px) var(--phone-pad-x);
overflow:hidden;border-bottom:1px solid rgba(220,229,240,.09)
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-deck__intro{display:flex;flex-direction:column;justify-content:center;gap:18px}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-deck__intro>span,
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-deck__intro>small,
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__copy>span,
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__copy>small,
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__meta{
font:500 7px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:rgba(220,229,240,.45)
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-deck__intro>strong{
display:block;margin:0;font-size:clamp(48px,14.2vw,68px);line-height:.73;letter-spacing:-.085em;font-weight:580;color:#e4ebf4
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card{display:grid;grid-template-rows:auto minmax(210px,38dvh) auto;gap:18px;align-content:center}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__copy{display:grid;grid-template-columns:74px 1fr;gap:6px 12px;align-content:start;min-width:0}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__copy>span{grid-column:1;grid-row:1/4}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__copy>small{grid-column:2}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__copy h3{grid-column:2;margin:4px 0 0;font-size:clamp(31px,9.3vw,44px);line-height:.78;letter-spacing:-.068em;font-weight:570;white-space:nowrap;color:#e4ebf4}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__copy p{grid-column:2;margin:6px 0 0;font-size:11px;line-height:1.28;color:rgba(220,229,240,.58);max-width:34ch}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__visual{position:relative;width:100%;height:100%;min-height:210px;border:1px solid rgba(220,229,240,.14);overflow:hidden;background:rgba(6,9,13,.68)}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__visual>.career-visual{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:1!important;visibility:visible!important;filter:none!important;transform:none!important;pointer-events:none!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__visual>.career-visual .sensor-readout b{font-size:8vw!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__visual>.career-visual .ocr-document{left:12%!important;top:10%!important;width:76%!important;height:80%!important;padding:14px!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__visual>.career-visual .ocr-document p{margin-top:8dvh!important;font-size:9px!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__visual>.career-visual .browser-origin{inset:7%!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__visual>.career-visual .browser-origin strong{font-size:13vw!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__meta{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__meta i{height:1px;background:linear-gradient(90deg,#c8d8ef 0 38%,rgba(220,229,240,.12) 38%)}
/* Projects: keep A/B labels in their own halves, and make transition handoffs
intentionally overlap by a few frames so there are no empty phone screens. */
body.is-phone-experience.projects-page-v38 .distance-v38__a{left:var(--phone-pad-x)!important;right:auto!important;width:42vw!important;max-width:42vw!important;text-align:left!important}
body.is-phone-experience.projects-page-v38 .distance-v38__b{right:var(--phone-pad-r)!important;left:auto!important;width:42vw!important;max-width:42vw!important;text-align:right!important}
body.is-phone-experience.projects-page-v38 .distance-v38__a,
body.is-phone-experience.projects-page-v38 .distance-v38__b{white-space:nowrap!important}
/* Contact hero on phones is a three-beat sequence. The thought cannot overlap
SAY/HI even while the scroll controller is between steps. */
body.is-phone-experience.contact-page .contact-v40-hero__copy,
body.is-phone-experience.contact-page .contact-v40-hero__thought{overflow:hidden!important}
body.is-phone-experience.contact-page .contact-v40-hero__copy>span,
body.is-phone-experience.contact-page .contact-v40-hero__thought{white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important}
/* Keep the contact paper usable on short landscape rather than clipping the
social controls below the fold. */
body.is-phone-experience.is-landscape.contact-page .contact-letter{height:auto!important;min-height:max(100dvh,390px)!important;padding-bottom:calc(var(--phone-dock-space) + 24px)!important}
body.is-phone-experience.is-landscape.contact-page .contact-letter__form{padding-bottom:18px!important}
/* Lowest-width phone safety: preserve designed line breaks, never accidental
third lines caused by a few missing pixels. */
@media (max-width:360px) and (orientation:portrait){
body.is-phone-experience.phone-portrait-bypass .mobile-career-card__copy{grid-template-columns:62px 1fr;gap-inline:9px}
body.is-phone-experience.phone-portrait-bypass .mobile-career-card__copy p{font-size:10px!important}
body.is-phone-experience.phone-portrait-bypass .pf-btns button{font-size:11px!important}
}
/* ======================================================================
v49.1 — final phone typography / one-way form corrections
====================================================================== */
/* Intro copy is staged as separate lines. Keep each staged line fully inside
the portrait viewport instead of letting WEBSITES. bleed a few pixels out. */
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .hero-copy__main{
font-size:clamp(52px,18.4vw,78px)!important;
}
body.is-phone-experience:not(.inner-page) .hero-copy__main .hero-copy__step{
white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;
}
/* About / operating-system statement: preserve the desktop idea as two wide
lines with two weights, but never let the flex items wrap into four lines. */
body.is-phone-experience.about-page .about-signal__line{
flex-wrap:nowrap!important;
transform:none!important;
width:calc(100% - var(--phone-pad-x) - var(--phone-pad-r))!important;
max-width:calc(100% - var(--phone-pad-x) - var(--phone-pad-r))!important;
margin-left:var(--phone-pad-x)!important;
margin-right:var(--phone-pad-r)!important;
gap:.12em!important;
}
body.is-phone-experience.about-page .about-signal__line:nth-child(3){
justify-content:flex-end!important;
}
body.is-phone-experience.about-page .about-signal__line>span,
body.is-phone-experience.about-page .about-signal__line>b{
flex:0 0 auto!important;
white-space:nowrap!important;
}
/* The portrait career chapter grid must not let a nowrap heading establish a
min-content column wider than the phone. The fitter can then scale the title
against the real remaining column width. */
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__copy{
grid-template-columns:74px minmax(0,1fr)!important;
width:100%!important;
min-width:0!important;
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__copy h3{
width:100%!important;min-width:0!important;max-width:100%!important;
white-space:nowrap!important;overflow:visible!important;
}
@media (max-width:360px) and (orientation:portrait){
body.is-phone-experience.phone-portrait-bypass.about-page .mobile-career-card__copy{
grid-template-columns:62px minmax(0,1fr)!important;
}
}
/* Artifact inspector titles are interaction copy too. Do not let a selected
item suddenly create an extra line on a narrow phone. */
body.is-phone-experience.projects-page-v38 [data-artifact-title]{
white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;
}
/* The conversational contact form uses short sentence fragments; on phones
they have enough width to stay as authored single lines. */
body.is-phone-experience:not(.inner-page) .pf-text{
white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;
}
/* Mobile form is one-way: once the chapter enters, the complete form reveals
in a short stagger and remains available. The terminal handoff may fade the
whole form, but individual rows never reverse/de-reveal. */
body.is-phone-experience:not(.inner-page) .post-footer-story.mobile-form-active .pf-fragment{
opacity:1!important;
transform:none!important;
pointer-events:auto!important;
transition-delay:calc(var(--pf-step,0) * 42ms)!important;
}
body.is-phone-experience:not(.inner-page) .post-footer-story.mobile-form-active .pf-input-wrap i{
transform:scaleX(1)!important;
}
/* The signal stage already has phone padding. Let the line consume that content
box once—not a second inset on top of it. */
body.is-phone-experience.about-page .about-signal__line{
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
}
/* Give career chapter titles the full phone width. The chapter index becomes a
compact meta row above the title instead of consuming a permanent left rail. */
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__copy{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
gap:6px 10px!important;
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__copy>span{
grid-column:1!important;grid-row:1!important;
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__copy>small{
grid-column:2!important;grid-row:1!important;text-align:right!important;
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__copy h3{
grid-column:1/-1!important;grid-row:2!important;
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__copy p{
grid-column:1/-1!important;grid-row:3!important;max-width:36ch!important;
}
@media (max-width:360px) and (orientation:portrait){
body.is-phone-experience.phone-portrait-bypass.about-page .mobile-career-card__copy{
grid-template-columns:minmax(0,1fr) auto!important;
}
}
/* ======================================================================
v49.2 — production phone lock: authored lines, real portrait scrolling,
bounded forms, and short-landscape safeguards.
====================================================================== */
/* Continue-portrait truly unlocks the document at both root levels. */
html.is-phone-experience.phone-portrait-bypass,
body.is-phone-experience.phone-portrait-bypass{
overflow-y:auto!important;
touch-action:auto!important;
max-width:100vw!important;
}
html.is-phone-experience.phone-portrait-bypass{overflow-x:clip!important}
/* Any display text selected by the phone fitter may only break where the
markup explicitly contains a
. Browser-created extra lines are forbidden. */
body.is-phone-experience .mobile-fit-text{
white-space:nowrap!important;
word-break:keep-all!important;
overflow-wrap:normal!important;
hyphens:none!important;
text-wrap:nowrap!important;
}
body.is-phone-experience .mobile-fit-text br{display:block!important}
/* Homepage proof: the mobile morph and normal-site proof must stay visible even
if old <=980 rules try to collapse/disable them. */
body.is-phone-experience:not(.inner-page) .capability-demo[data-demo-mode="mobile"] .demo-layer--mobile{
display:grid!important;visibility:visible!important;opacity:1!important;overflow:visible!important
}
body.is-phone-experience:not(.inner-page) .capability-demo[data-demo-mode="mobile"] .demo-device{
display:block!important;visibility:visible!important;opacity:1!important;will-change:width,height,transform!important
}
body.is-phone-experience:not(.inner-page) .capability-demo[data-demo-mode="normal"] .demo-layer--normal{
display:grid!important;visibility:visible!important;opacity:1!important;overflow:hidden!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .normal-site{
width:min(90vw,440px)!important;
height:min(43dvh,340px)!important;
min-height:205px!important;
border-radius:18px!important;
}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .normal-site h3{
max-width:100%!important;margin:0!important;align-self:center!important
}
/* Two Sides is a true split-stage on portrait. Nothing is translated beyond
the phone; each authored two-line title lives inside its own half. */
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__stage{
display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:1fr!important;
gap:1px!important;background:rgba(220,229,240,.12)!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__plane{
position:relative!important;inset:auto!important;top:auto!important;bottom:auto!important;
width:auto!important;height:calc(100dvh - var(--phone-dock-space) - 112px)!important;
align-self:center!important;margin-top:46px!important;min-width:0!important;
padding:18px 8px 12px!important;background:#080b10!important;transform:none!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__plane--left{grid-column:1!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__plane--right{grid-column:2!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__plane h2{
width:100%!important;max-width:100%!important;font-size:clamp(19px,5.8vw,27px)!important;
letter-spacing:-.075em!important;line-height:.82!important;overflow:visible!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__head,
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__meter,
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__merge{
position:absolute!important;z-index:6!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .dual-system__seam{left:50%!important;z-index:5!important}
/* Portrait career cards: every card is one complete phone chapter. */
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card{
min-height:100dvh!important;height:auto!important;
grid-template-rows:auto minmax(190px,34dvh) auto!important;
padding-top:calc(var(--phone-safe-top) + 58px)!important;
padding-bottom:calc(var(--phone-dock-space) + var(--phone-safe-bottom) + 18px)!important;
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__copy h3{
width:100%!important;max-width:100%!important;overflow:visible!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.about-page .mobile-career-card__visual{min-height:190px!important}
/* Phone form: reveal progressively, never reverse individual rows. */
body.is-phone-experience:not(.inner-page) .post-footer-story.mobile-form-active .pf-fragment:not(.is-visible):not(.mobile-persist-visible){
opacity:0!important;transform:translate3d(0,12px,0)!important;pointer-events:none!important
}
body.is-phone-experience:not(.inner-page) .post-footer-story .pf-fragment:is(.is-visible,.mobile-persist-visible){
opacity:1!important;transform:none!important;pointer-events:auto!important
}
body.is-phone-experience:not(.inner-page) .post-footer-story .pf-input-wrap:is(.is-visible,.mobile-persist-visible) i{
transform:scaleX(1)!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .pf-contact{
overflow-y:auto!important;align-content:start!important;
padding-top:calc(var(--phone-safe-top) + 58px)!important;
padding-bottom:calc(var(--phone-dock-space) + var(--phone-safe-bottom) + 24px)!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .pf-row{
width:100%!important;max-width:100%!important;min-width:0!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .pf-btns{width:100%!important;max-width:100%!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass:not(.inner-page) .pf-btns--social{
grid-template-columns:minmax(0,1.7fr) minmax(68px,.7fr)!important;width:100%!important
}
/* Desktop detail row: guarantee the email field + method buttons share one box. */
@media (hover:hover) and (pointer:fine) and (min-width:981px){
.pf-row--detail{width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important}
.pf-row--detail .pf-btns--social{box-sizing:border-box!important;max-width:100%!important;overflow:hidden!important}
.pf-row--detail .pf-btns--social button{overflow:hidden!important;text-overflow:clip!important;white-space:nowrap!important}
}
/* Contact page phone form — preserve sentence structure but keep each field in
frame. The text label never gets split into arbitrary extra lines. */
body.is-phone-experience.contact-page .contact-message__line>span,
body.is-phone-experience.contact-page .contact-message__message>span{white-space:nowrap!important;word-break:keep-all!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-message__line{
display:grid!important;grid-template-columns:max-content minmax(0,1fr) max-content!important;
align-items:baseline!important;gap:8px!important;font-size:clamp(24px,8vw,34px)!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-message__line label{min-width:0!important;flex-basis:auto!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-message__message{font-size:clamp(24px,8vw,34px)!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-message textarea{height:2.8em!important}
/* Short landscape is a separate composition class. Keep all display copy above
the dock and inside its content column. */
@media (orientation:landscape) and (max-height:430px){
body.is-phone-experience{--phone-dock-space:60px!important}
body.is-phone-experience .mobile-fit-text{max-width:100%!important}
body.is-phone-experience:not(.inner-page) .break-turn,
body.is-phone-experience:not(.inner-page) .exit-turn{inset:48px var(--phone-pad-r) 62px var(--phone-pad-x)!important}
body.is-phone-experience:not(.inner-page) .break-turn>p,
body.is-phone-experience:not(.inner-page) .exit-turn>p,
body.is-phone-experience:not(.inner-page) .break-turn h2,
body.is-phone-experience:not(.inner-page) .exit-turn h2{max-width:100%!important}
body.is-phone-experience.about-page .career-evolution__copy{bottom:60px!important;height:auto!important}
body.is-phone-experience.about-page .career-evolution__machine{bottom:60px!important}
body.is-phone-experience.projects-page-v38 .feature-v38__sticky,
body.is-phone-experience.projects-page-v38 .feature-v38__sticky--reverse{padding-top:50px!important;padding-bottom:62px!important}
body.is-phone-experience.contact-page .contact-letter{padding-bottom:70px!important}
}
/* About had one early exception that intentionally left horizontal overflow
visible. With the v49.2 layouts/fitter in place, clip the page boundary so
no transformed text can create a real off-screen document column. */
body.is-phone-experience.about-page main,
body.is-phone-experience.about-page .about-story{overflow-x:clip!important}
body.is-phone-experience.about-page .about-chapter{max-width:100vw!important}
/* ==================== FINAL PRODUCTION AUTHORITY ==================== */
/* ======================================================================
ZAZA v70 — MOBILE STABILITY + CONVERSION FIX
Final responsive authority. Loaded after every previous mobile/work layer.
Desktop (>980px fine-pointer layouts) is intentionally untouched.
====================================================================== */
html.is-phone-experience,
body.is-phone-experience{
--phone-safe-top:max(10px,env(safe-area-inset-top));
--phone-safe-right:max(14px,env(safe-area-inset-right));
--phone-safe-bottom:max(10px,env(safe-area-inset-bottom));
--phone-safe-left:max(14px,env(safe-area-inset-left));
--phone-pad-x:max(18px,var(--phone-safe-left));
--phone-pad-r:max(18px,var(--phone-safe-right));
max-width:100%;
overflow-x:hidden!important;
touch-action:pan-y pinch-zoom!important;
}
body.is-phone-experience main{max-width:100%;overflow-x:hidden!important}
/* Runtime shrinking was removed in v70. Authored breaks remain via
, but
the browser is allowed to wrap when a phone genuinely needs another line. */
body.is-phone-experience .mobile-fit-text{
white-space:normal!important;
overflow-wrap:normal!important;
word-break:normal!important;
hyphens:none!important;
text-wrap:balance!important;
max-width:100%!important;
}
body.is-phone-experience .mobile-fit-text br{display:block!important}
/* Navigation and all repeated controls get a genuine finger target. */
body.is-phone-experience .site-dock{min-height:54px!important;padding:5px 6px!important}
body.is-phone-experience .dock-app,
body.is-phone-experience .dock-app.menu-button{
width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;flex-basis:44px!important
}
body.is-phone-experience .brand{min-width:44px!important;min-height:44px!important;display:flex!important;align-items:center!important}
body.is-phone-experience :is(.mobile-key-controls button,.mobile-break-pad button,.project-choice__close,.contact-send,.grove-tree__actions a,.grove-tree__actions button){min-width:44px!important;min-height:44px!important}
body.is-phone-experience .skip-intro{min-height:44px!important;padding:10px 4px!important;display:flex!important;align-items:center!important}
body.is-phone-experience .inner-footer a,
body.is-phone-experience .contact-close__work,
body.is-phone-experience .feature-v38__links a{min-height:44px!important;display:inline-flex!important;align-items:center!important}
/* Metadata must stay legible. Tiny editorial labels can be compact, not 5–7px. */
body.is-phone-experience :is(.page-kicker,.scene-kicker,.work-index__number,.work-index__item small,.trailer-meta,.about-machine__readout,.dual-system__plane>small,.dual-system__facts span,.dual-system__meter,.skill-group>b,.skill-group [data-skill-node],.career-step>span,.career-step>small,.mobile-career-card__copy>span,.mobile-career-card__copy>small,.mobile-career-card__meta,.contact-letter__head,.contact-bridge__label,.contact-bridge__point small,.contact-direct__top,.contact-email small,.contact-close__copy>span,.projects-top-v38,.feature-v38 small,.feature-v38__links a,.other-things-v37 small){
font-size:max(10px,.68rem)!important;
line-height:1.25!important;
}
body.is-phone-experience .skill-group [data-skill-node]{min-height:36px!important;padding:8px 9px!important;display:inline-flex!important;align-items:center!important}
/* -------------------- HOMEPAGE / SELECTED WORK -------------------- */
body.is-phone-experience.is-portrait:not(.inner-page) .work-scene{
min-height:auto!important;height:auto!important;padding:0!important
}
body.is-phone-experience.is-portrait:not(.inner-page) .work-scene__sticky{
position:relative!important;top:auto!important;height:auto!important;min-height:100svh!important;
display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto minmax(220px,40svh)!important;
gap:16px!important;padding:calc(var(--phone-safe-top) + 62px) var(--phone-pad-r) calc(92px + var(--phone-safe-bottom)) var(--phone-pad-x)!important;
overflow:hidden!important
}
body.is-phone-experience.is-portrait:not(.inner-page) .work-scene__head{grid-column:1!important;grid-row:1!important}
body.is-phone-experience.is-portrait:not(.inner-page) .work-index{grid-column:1!important;grid-row:2!important;width:100%!important;margin:0!important}
body.is-phone-experience.is-portrait:not(.inner-page) .work-visual{
grid-column:1!important;grid-row:3!important;width:100%!important;height:100%!important;min-height:220px!important;
margin:0!important;aspect-ratio:auto!important;border-radius:16px!important;overflow:hidden!important
}
body.is-phone-experience.is-portrait:not(.inner-page) .work-index__item{
min-height:48px!important;padding:7px 0!important;grid-template-columns:26px minmax(0,1fr) auto!important;gap:7px 9px!important
}
body.is-phone-experience.is-portrait:not(.inner-page) .work-index__item>span:not(.work-index__number){font-size:clamp(28px,8.7vw,42px)!important;line-height:.84!important;white-space:normal!important}
body.is-phone-experience.is-portrait:not(.inner-page) .work-index__item small{white-space:normal!important;text-align:right!important;max-width:12ch!important}
body.is-phone-experience.is-portrait:not(.inner-page) .work-scene__head h2{font-size:clamp(62px,19vw,90px)!important;white-space:normal!important}
body.is-phone-experience .project-choice__close{font-size:24px!important}
/* Police video / large visual: retain cinematic crop without leaking outside. */
body.is-phone-experience :is(.alpha-video-wrap,.demo-layer--video,.demo-layer--video video,[data-alpha-video]){max-width:100%!important}
body.is-phone-experience [data-alpha-video]{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}
/* Final homepage form: native page flow on portrait, no nested scroll trap. */
body.is-phone-experience.is-portrait:not(.inner-page) .post-footer-story{
height:auto!important;min-height:100svh!important;overflow:visible!important
}
body.is-phone-experience.is-portrait:not(.inner-page) .post-footer-stage{
position:relative!important;inset:auto!important;height:auto!important;min-height:100svh!important;overflow:visible!important
}
body.is-phone-experience.is-portrait:not(.inner-page) .pf-contact{
position:relative!important;inset:auto!important;height:auto!important;min-height:100svh!important;overflow:visible!important;
padding:calc(var(--phone-safe-top) + 68px) var(--phone-pad-r) calc(100px + var(--phone-safe-bottom)) var(--phone-pad-x)!important
}
body.is-phone-experience.is-portrait:not(.inner-page) .pf-row{flex-wrap:wrap!important;align-items:flex-start!important}
body.is-phone-experience.is-portrait:not(.inner-page) .post-footer-story .pf-fragment{
opacity:1!important;transform:none!important;pointer-events:auto!important
}
body.is-phone-experience.is-portrait:not(.inner-page) .post-footer-story .pf-input-wrap i{transform:scaleX(1)!important}
body.is-phone-experience.is-portrait:not(.inner-page) .pf-text{white-space:normal!important;font-size:clamp(26px,7.6vw,38px)!important}
body.is-phone-experience.is-portrait:not(.inner-page) .pf-input-wrap{flex:1 1 100%!important;min-width:100%!important}
body.is-phone-experience.is-portrait:not(.inner-page) .pf-btns{flex:1 1 100%!important;width:100%!important}
body.is-phone-experience.is-portrait:not(.inner-page) .pf-btns button{min-height:52px!important;font-size:16px!important}
body.is-phone-experience.is-portrait:not(.inner-page) .pf-btns--social{grid-template-columns:1fr 1fr!important}
/* -------------------- ABOUT -------------------- */
body.is-phone-experience.about-page .about-story,
body.is-phone-experience.about-page .about-chapter{overflow-x:hidden!important}
body.is-phone-experience.is-portrait.about-page .za-apparatus{
right:50%!important;top:58%!important;width:min(86vw,390px)!important;max-width:calc(100vw - 24px)!important;
transform:translate(50%,-50%) rotateX(var(--about-rx,0deg)) rotateY(var(--about-ry,0deg))!important;opacity:.3!important
}
body.is-phone-experience.is-portrait.about-page .za-apparatus .axis-x{width:100%!important}
body.is-phone-experience.is-portrait.about-page .za-apparatus .axis-y{height:100%!important}
body.is-phone-experience.about-page .za-apparatus__piece i{font-size:9px!important}
/* Two sides becomes a vertical authored phone sequence instead of two 50% slivers. */
body.is-phone-experience.is-portrait.about-page .dual-system__stage{
position:relative!important;height:auto!important;min-height:100svh!important;display:grid!important;
grid-template-columns:1fr!important;grid-template-rows:auto auto auto auto!important;gap:12px!important;
padding:calc(var(--phone-safe-top) + 64px) var(--phone-pad-r) calc(96px + var(--phone-safe-bottom)) var(--phone-pad-x)!important;
background:#080b10!important;overflow:hidden!important
}
body.is-phone-experience.is-portrait.about-page .dual-system__head{position:relative!important;inset:auto!important;grid-row:1!important}
body.is-phone-experience.is-portrait.about-page .dual-system__plane{
position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:31svh!important;margin:0!important;
padding:18px 16px!important;border:1px solid rgba(220,229,240,.13)!important;transform:none!important
}
body.is-phone-experience.is-portrait.about-page .dual-system__plane--left{grid-column:1!important;grid-row:2!important}
body.is-phone-experience.is-portrait.about-page .dual-system__plane--right{grid-column:1!important;grid-row:3!important}
body.is-phone-experience.is-portrait.about-page .dual-system__plane h2{font-size:clamp(34px,10.5vw,54px)!important;line-height:.78!important}
body.is-phone-experience.is-portrait.about-page .dual-system__facts{display:flex!important;flex-wrap:wrap!important;gap:7px 9px!important}
body.is-phone-experience.is-portrait.about-page .dual-system__merge{position:relative!important;inset:auto!important;grid-row:4!important;padding:16px 0 0!important;text-align:left!important}
body.is-phone-experience.is-portrait.about-page .dual-system__merge strong{font-size:clamp(31px,9.4vw,48px)!important;line-height:.8!important}
body.is-phone-experience.is-portrait.about-page :is(.dual-system__seam,.dual-system__meter){display:none!important}
/* Career cards use readable top metadata instead of a narrow left rail. */
body.is-phone-experience.is-portrait.about-page .mobile-career-card{
grid-template-rows:auto minmax(190px,32svh) auto!important;gap:16px!important
}
body.is-phone-experience.is-portrait.about-page .mobile-career-card__copy{
display:grid!important;grid-template-columns:1fr auto!important;grid-template-rows:auto auto auto!important;gap:6px 10px!important
}
body.is-phone-experience.is-portrait.about-page .mobile-career-card__copy>span{grid-column:1!important;grid-row:1!important}
body.is-phone-experience.is-portrait.about-page .mobile-career-card__copy>small{grid-column:2!important;grid-row:1!important;text-align:right!important}
body.is-phone-experience.is-portrait.about-page .mobile-career-card__copy h3{grid-column:1/-1!important;grid-row:2!important;font-size:clamp(30px,9.2vw,46px)!important;white-space:normal!important;line-height:.79!important}
body.is-phone-experience.is-portrait.about-page .mobile-career-card__copy p{grid-column:1/-1!important;grid-row:3!important;font-size:13px!important;line-height:1.35!important;max-width:42ch!important}
body.is-phone-experience.is-portrait.about-page .career-tape__stage>.career-evolution{visibility:hidden!important;pointer-events:none!important}
/* Skill router: readable bank and cards, with wrapping chips. */
body.is-phone-experience.about-page .skill-router__bank{overflow:visible!important}
body.is-phone-experience.about-page .skill-group>div{gap:7px!important;display:flex!important;flex-wrap:wrap!important}
body.is-phone-experience.is-portrait.about-page .skill-router__stage{overflow-y:auto!important;overflow-x:hidden!important}
body.is-phone-experience.is-portrait.about-page .skill-router__cases article p{font-size:12px!important;line-height:1.35!important}
body.is-phone-experience.is-portrait.about-page .skill-router__inspector{font-size:10px!important}
/* -------------------- CONTACT -------------------- */
body.is-phone-experience.is-portrait.contact-page .contact-message__line{
display:grid!important;grid-template-columns:1fr!important;gap:7px!important;align-items:start!important;
font-size:clamp(25px,8vw,34px)!important;line-height:.9!important
}
body.is-phone-experience.is-portrait.contact-page .contact-message__line>span{white-space:normal!important}
body.is-phone-experience.is-portrait.contact-page .contact-message__line>span:last-child{display:none!important}
body.is-phone-experience.is-portrait.contact-page .contact-message__line label{display:block!important;width:100%!important;min-width:0!important}
body.is-phone-experience.is-portrait.contact-page .contact-message input{
width:100%!important;min-width:0!important;font-size:clamp(22px,7vw,30px)!important;padding:7px 0 9px!important
}
body.is-phone-experience.is-portrait.contact-page .contact-message__message{font-size:clamp(25px,8vw,34px)!important;line-height:.9!important}
body.is-phone-experience.is-portrait.contact-page .contact-message__message>span{white-space:normal!important}
body.is-phone-experience.is-portrait.contact-page .contact-message textarea{height:4.2em!important;font-size:20px!important;line-height:1.15!important}
body.is-phone-experience.contact-page .contact-letter__scribble{max-width:calc(100vw - 36px)!important;right:18px!important}
body.is-phone-experience.contact-page .contact-direct__links a{min-height:52px!important}
body.is-phone-experience.contact-page .contact-email{min-height:52px!important;max-width:100%!important}
body.is-phone-experience.contact-page .contact-email>span{white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important}
body.is-phone-experience.contact-page .contact-close__work{font-size:10px!important;padding:8px 0!important}
body.is-phone-experience.contact-page .contact-message__footer p{font-size:11px!important;line-height:1.35!important}
/* Landscape: keep the wide compositions, but stop unreadably tiny labels. */
body.is-phone-experience.is-landscape .work-index__item small,
body.is-phone-experience.is-landscape .trailer-meta,
body.is-phone-experience.is-landscape.contact-page :is(.contact-letter__head,.contact-direct__top,.contact-email small,.contact-close__copy>span,.contact-close__work),
body.is-phone-experience.is-landscape.projects-page-v38 :is(.feature-v38 small,.feature-v38__links a,.projects-top-v38){font-size:10px!important;line-height:1.2!important}
body.is-phone-experience.is-landscape.contact-page .contact-message__footer p{font-size:10px!important}
body.is-phone-experience.is-landscape.contact-page .contact-send{min-width:88px!important;min-height:44px!important;font-size:10px!important}
body.is-phone-experience.is-landscape .mobile-touch-hint{font-size:9px!important}
/* Projects page interludes are clipped by their own stage rather than leaking
beyond the viewport; headlines get an actual phone-width budget. */
body.is-phone-experience.projects-page-v38 :is(.interlude-v38,.interlude-v38__sticky){overflow:hidden!important;max-width:100vw!important}
body.is-phone-experience.is-portrait.projects-page-v38 :is(.direction-v38__a,.direction-v38__b,.direction-v38__c,.distance-v38__a,.distance-v38__b,.simple-v38__looks,.simple-v38__good,.weird-v38__one,.weird-v38__two){
max-width:calc(100vw - 36px)!important;white-space:normal!important;overflow-wrap:normal!important
}
body.is-phone-experience.projects-page-v38 .laptop-v38__screen{background:#111!important}
body.is-phone-experience.projects-page-v38 .laptop-v38__poster{opacity:1}
/* Reduced motion wins over every later animation declaration. */
@media(prefers-reduced-motion:reduce){
html.is-phone-experience *,html.is-phone-experience *::before,html.is-phone-experience *::after{
scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important
}
body.is-phone-experience .demo-device{animation:none!important}
body.is-phone-experience :is(.move-trail-sprite,.mobile-liquid-popover){animation:none!important;transition:none!important}
}
/* Very narrow portrait gets an extra-safe form / type treatment. */
@media(max-width:360px) and (orientation:portrait){
body.is-phone-experience{--phone-pad-x:max(16px,var(--phone-safe-left));--phone-pad-r:max(16px,var(--phone-safe-right))}
body.is-phone-experience.is-portrait:not(.inner-page) .work-index__item small{display:none!important}
body.is-phone-experience.is-portrait.contact-page .contact-message__line,
body.is-phone-experience.is-portrait.contact-page .contact-message__message{font-size:24px!important}
body.is-phone-experience.is-portrait.about-page .dual-system__plane h2{font-size:32px!important}
}
/* ======================================================================
v71 audit closure — appended to the existing final authority rather than
creating another responsive stylesheet.
====================================================================== */
html.is-phone-experience{
--app-vh:var(--mobile-stable-vh,100svh);
}
body.is-phone-experience{
--screen-h:var(--mobile-stable-vh,100svh);
}
/* Every real control keeps a comfortable finger target in BOTH orientations. */
body.is-phone-experience :is(
.work-index__item,
.pf-btns button,
.project-choice__live,
.project-choice__portfolio,
.feature-v38__links a,
.projects-end-v38 a
){min-height:44px!important}
body.is-phone-experience.is-landscape .work-index__item{padding-top:6px!important;padding-bottom:6px!important}
/* Landscape readability floor. Preserve the wide composition, but never make
informational/body copy microscopic just to keep desktop geometry. */
body.is-phone-experience.is-landscape:not(.inner-page) :is(
.work-index__number,
.work-index__item small,
.trailer-meta,
.trailer-joke,
.mobile-touch-hint,
.rtl-stage__copy small,
.normal-site nav,
.break-site[data-break-step="2"] .break-keys span
){font-size:10px!important;line-height:1.25!important}
body.is-phone-experience.is-landscape:not(.inner-page) .rtl-stage__copy p{font-size:11px!important;line-height:1.3!important}
body.is-phone-experience.is-landscape:not(.inner-page) .trailer-copy p{font-size:max(12px,3vh)!important;line-height:1.18!important}
body.is-phone-experience.is-landscape.about-page :is(
.career-step>span,.career-step>small,.career-card>small,
.skill-router__flow,.skill-router__aside,.skill-group>b
){font-size:10px!important;line-height:1.3!important}
body.is-phone-experience.is-landscape.about-page :is(.career-step p,.career-card p,.ocr-document p,.skill-router__cases article p){
font-size:11px!important;line-height:1.35!important
}
body.is-phone-experience.is-landscape.about-page .skill-group [data-skill-node]{font-size:10px!important;min-height:36px!important}
body.is-phone-experience.is-landscape.projects-page-v38 :is(
.feature-v38__eyebrow,.feature-v38 small,.feature-v38__links a,
.simple-v38__under span,.weird-v38__three,.other-things-v37__head>span,
.projects-end-v38 span,.projects-top-v38
){font-size:10px!important;line-height:1.3!important}
body.is-phone-experience.is-landscape.projects-page-v38 .feature-v38__copy p{font-size:12px!important;line-height:1.35!important}
body.is-phone-experience.is-landscape.contact-page :is(
.contact-v40-hero__aside,.contact-letter__head,.contact-bridge__label,
.contact-bridge__hint,.contact-bridge__point small,.contact-direct__top,
.contact-email small,.contact-close__copy>span,.contact-close__work,
.contact-message__footer p
){font-size:10px!important;line-height:1.3!important}
/* Stable viewport source for sticky stage CSS. Live visual viewport remains
available separately as --vvh for keyboard-aware overlays. */
body.is-phone-experience :is(
.detail-problem__stage,.skill-router__stage,.human-part__stage,.about-seam__stage,
.other-bridge-v38__sticky
){min-height:var(--mobile-stable-vh,100svh)!important}
@media(prefers-reduced-motion:reduce){
body.is-phone-experience .gravity-menu__item{transition:none!important}
}
/* Data-saver / reduced-motion REFCON fallback: retain the authored visual
without parsing the 11.7MB animation payload. */
.trailer-visual--refcon.is-static-fallback .refcon-lottie{display:none!important}
.trailer-visual--refcon.is-static-fallback .refcon-lottie-fallback{inset:4%!important;opacity:.82!important}
.trailer-visual--refcon.is-static-fallback .refcon-lottie-fallback img{filter:grayscale(.2) contrast(.98)!important}
/* Remaining microcopy caught by the audit. */
body.is-phone-experience :is(.trailer-joke,.normal-site nav,.system-reel figcaption){font-size:10px!important;line-height:1.3!important}
body.is-phone-experience.is-landscape.about-page :is(.about-signal__cursor,.skill-router__inspector span){font-size:10px!important;line-height:1.3!important}
body.is-phone-experience.is-landscape.contact-page .contact-v40-hero__bottom{font-size:10px!important;line-height:1.3!important}
/* ======================================================================
v74 production mobile closure — this section becomes part of the single
mobile-responsive.css authority during packaging.
====================================================================== */
/* Technical chrome remains compact, but no visible UI relies on 5–8px text. */
body.is-phone-experience :is(
.site-header__meta,.site-header__edge,.hero-ui,.hero-ui span,.skip-intro,
.preview-tag,.quiet-scene__index,.trailer-meta,.trailer-joke,
.project-choice small,.project-choice__number,.project-choice__body p,
.work-open-v38__meta,.simple-v38__under span,.weird-v38__three,
.inner-footer div,.inner-footer a,.inner-footer span,
.contact-v40-hero__top,.contact-v40-hero__bottom,.contact-bridge__hint,
.about-signal__cursor,.dual-system__plane small,.dual-system__facts,
.dual-system__facts span,.dual-system__merge p,.career-tape__yearline,
.skill-router__inspector,.skill-router__inspector small,.skill-router__flow,
.ml-axis,.sensor-readout small,.ocr-document small
){font-size:max(10px,.68rem)!important;line-height:1.3!important}
/* Decorative labels may be compact, but keep them at a visible 9px floor. */
body.is-phone-experience :is(.story-meter,.loader__topline,.loader__bottomline,.loader__systems,.menu-overlay__tiny,.menu-overlay__bottom){font-size:9px!important}
/* Usable target boxes without visually inflating the typographic controls. */
body.is-phone-experience :is(
.dock-app,.brand,.skip-intro,.skip-link,.redo-intro,.redo-quiet,
.mobile-key-controls button,.mobile-break-pad button,
.work-index__item,.project-choice__action,.project-choice__close,
.site-footer__content>a,.inner-footer a,.feature-v38__links a,
.projects-end-v38 a,.artifact-detail-v37__close,.contact-send,
.contact-email,.contact-direct__links a,.contact-close__work,
.grove-tree__actions a,.grove-tree__actions button,.pf-btns button,.pf-send
){min-height:44px!important}
body.is-phone-experience .skill-group [data-skill-node]{min-height:44px!important;padding:9px 10px!important;cursor:pointer!important}
body.is-phone-experience .artifact-detail-v37__close{min-width:76px!important;padding:11px 10px!important}
body.is-phone-experience .site-footer__content>a{display:inline-flex!important;align-items:center!important;padding-block:8px!important}
body.is-phone-experience .inner-footer a{padding-inline:6px!important;margin-inline:-6px!important}
/* Homepage portrait: headings get a real width budget instead of being clipped. */
body.is-phone-experience.is-portrait:not(.inner-page) :is(
.p1-depth-overlay h3,.landing-exit h2,.exit-turn p,.cap-turn h2,.cap-turn p,
.system-reel__copy h2,.browser-story__copy h2,.responsive-story__copy h2,
.underhood-story__copy h2
){max-width:calc(100vw - 36px)!important;width:auto!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important}
body.is-phone-experience.is-portrait:not(.inner-page) .p1-depth-overlay h3{font-size:clamp(42px,13vw,68px)!important;line-height:.76!important;text-align:center!important}
body.is-phone-experience.is-portrait:not(.inner-page) .landing-exit h2{font-size:clamp(70px,23vw,108px)!important;line-height:.72!important}
body.is-phone-experience.is-portrait:not(.inner-page) .system-reel__track{max-width:none!important}
body.is-phone-experience.is-portrait:not(.inner-page) .system-reel{overflow:hidden!important}
/* Police-car transparent video: preserve alpha and frame the actual content. */
body.is-phone-experience .demo-layer--video{overflow:hidden!important}
body.is-phone-experience .demo-layer--video video,
body.is-phone-experience [data-alpha-video]{background:transparent!important;object-fit:contain!important;object-position:center!important;max-width:100%!important}
/* About portrait is native-flow content. Never let the desktop timeline mutate it. */
body.is-phone-experience.is-portrait.about-page .career-tape__stage>.career-evolution{display:none!important}
body.is-phone-experience.is-portrait.about-page .mobile-career-deck{display:block!important}
body.is-phone-experience.is-portrait.about-page .dual-system__plane{opacity:1!important;filter:none!important}
body.is-phone-experience.is-portrait.about-page .dual-system__merge{opacity:1!important;filter:none!important}
body.is-phone-experience.about-page .skill-router__bank [role="button"]:focus-visible{outline:2px solid currentColor!important;outline-offset:3px!important}
/* Project interludes: transforms may animate from beyond the frame, but the text
box itself stays inside the viewport so no glyph is permanently inaccessible. */
body.is-phone-experience.is-portrait.projects-page-v38 .direction-v38__a{
left:18px!important;right:auto!important;width:calc(100vw - 36px)!important
}
body.is-phone-experience.is-portrait.projects-page-v38 .direction-v38__b{
left:18px!important;right:auto!important;width:calc(100vw - 36px)!important;text-align:right!important
}
body.is-phone-experience.is-portrait.projects-page-v38 .direction-v38__c{width:calc(100vw - 36px)!important}
body.is-phone-experience.projects-page-v38 .artifact-cluster-v37{max-width:calc(100vw - 32px)!important}
/* Contact: the letter form becomes one deliberate vertical sentence at narrow
widths instead of sacrificing the editable field to max-content labels. */
body.is-phone-experience.is-portrait.contact-page .contact-message{width:100%!important;max-width:100%!important}
body.is-phone-experience.is-portrait.contact-page .contact-message__line{grid-template-columns:minmax(0,1fr)!important;width:100%!important}
body.is-phone-experience.is-portrait.contact-page .contact-message__line label,
body.is-phone-experience.is-portrait.contact-page .contact-message__line input{width:100%!important;max-width:100%!important}
body.is-phone-experience.contact-page .form-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important}
/* Keyboard-aware clearance is only applied while an actual editable control has
reduced the visual viewport; normal page flow never becomes nested scrolling. */
body.is-phone-experience.is-keyboard-open .site-dock{opacity:.18!important;pointer-events:none!important;transform:translate3d(-50%,calc(100% + 28px),0)!important}
body.is-phone-experience.is-keyboard-open :is(.pf-contact,.contact-letter){padding-bottom:max(24px,var(--phone-safe-bottom))!important}
/* Short landscape phones need width-driven rather than height-starved microcopy. */
@media (orientation:landscape) and (max-height:430px){
body.is-phone-experience :is(.site-header__meta,.site-header__edge,.hero-ui,.preview-tag,.page-kicker,.scene-kicker,.trailer-meta,.trailer-joke,.work-index__number,.work-index__item small,.feature-v38__eyebrow,.feature-v38 small,.feature-v38__links a,.contact-v40-hero__top,.contact-v40-hero__bottom,.contact-letter__head,.contact-bridge__label,.contact-bridge__hint,.contact-direct__top,.contact-email small,.contact-close__copy>span){font-size:10px!important;line-height:1.2!important}
body.is-phone-experience .dock-app{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
}
@media(prefers-reduced-motion:reduce){
body.is-phone-experience .mobile-speed-pad{display:none!important}
body.is-phone-experience .move-trail-sprite{display:none!important}
body.is-phone-experience .footer-lottie-bg__lottie,
body.is-phone-experience .hero-lottie-bg__lottie{animation:none!important}
}
/* v74 QA specificity closure -------------------------------------------------
These selectors intentionally match the older phone rules' specificity so
the final production authority wins without relying on a fifth stylesheet. */
body.is-phone-experience .loader__percent sup{font-size:max(9px,.62rem)!important}
body.is-phone-experience.is-landscape .dock-app,
body.is-phone-experience.is-landscape .dock-app.menu-button{
width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;flex-basis:44px!important
}
body.is-phone-experience.is-landscape.about-page .skill-group [data-skill-node]{
min-height:44px!important;padding:9px 10px!important;font-size:10px!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-message__line{
display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:7px!important;align-items:start!important;width:100%!important
}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-message__line>span{white-space:normal!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-message__line>span:last-child{display:none!important}
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-message__line label,
body.is-phone-experience.is-portrait.phone-portrait-bypass.contact-page .contact-message__line input{
display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;flex-basis:auto!important
}
body.is-phone-experience.is-landscape.contact-page .contact-v40-hero__top>span,
body.is-phone-experience.is-landscape.contact-page .contact-v40-hero__bottom>span{
font-size:10px!important;line-height:1.2!important
}