/* Phone and tablet composition. Every component remains available in both styles. */
@media(max-width:960px){
 html{scroll-padding-top:84px;scroll-padding-bottom:112px;-webkit-text-size-adjust:100%}
 body:not(.resume-page){padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
 body{overflow-x:clip}
 button,a,input,summary{touch-action:manipulation}
 input,textarea,select{font-size:16px}
 :root[data-style] .top-actions{position:fixed;z-index:100;top:env(safe-area-inset-top,0px);left:0;right:0;width:100%;height:64px;margin:0;padding:8px 12px;gap:6px;justify-content:flex-end;background:var(--site-solid);border-bottom:1px solid var(--site-line);transform:none!important;filter:none!important;will-change:auto!important;pointer-events:none}
 .top-actions::before{content:none}
 .top-actions .site-signature{display:flex;align-items:center;justify-content:flex-start;flex:none;width:190px;max-width:calc(100% - 106px);height:44px;margin-right:auto}
 .top-actions .site-signature .signature-logo{width:100%;height:auto;max-height:44px}
 .top-actions>*{pointer-events:auto}
 :root[data-style] .nav-dock{position:fixed;z-index:130;left:10px;right:10px;bottom:calc(9px + env(safe-area-inset-bottom,0px));width:auto;height:69px;display:flex;justify-content:space-between;gap:0;padding:5px;border:1px solid var(--site-line);border-radius:18px;background:var(--site-surface);box-shadow:0 7px 30px #0002}
 :root[data-style] .nav-dock :is(a,button){display:flex;flex:1 1 0;min-width:0;width:auto;height:57px;padding:5px 2px;gap:5px;flex-direction:column;justify-content:center;border-radius:12px;color:var(--site-muted)}
 .nav-dock svg{width:20px;height:20px}
 :root[data-style] .nav-dock:has([aria-expanded="true"]) .active:not([aria-expanded="true"]){background:transparent;color:var(--site-muted)}
 :root[data-style] .nav-dock .nav-label{display:block!important;width:auto;max-width:none;margin:0;opacity:1;font:500 9.5px/1.1 'RagInter',Inter,sans-serif;white-space:nowrap}
 :root[data-style] .nav-dock :is(.active,[aria-expanded="true"]){background:var(--site-subtle);color:var(--site-ink)}
 :root[data-style="sketch"] .nav-dock{border-radius:7px 18px 8px 15px;box-shadow:3px 4px 0 var(--site-line)}
 .top-actions .theme-button{flex:none;width:44px;height:44px;min-width:44px;min-height:44px}
 .top-actions .theme-button svg{width:19px;height:19px}
 .top-actions .call-button{height:44px;min-height:44px;padding:5px 10px 5px 5px;font-size:11px;gap:5px;white-space:nowrap}
 .top-actions .call-mark{width:30px;height:30px;flex-basis:30px}
 body:not(.resume-page) .appearance-trigger{left:12px;bottom:calc(89px + env(safe-area-inset-bottom,0px));width:44px;height:44px}
 .hero .portrait-toggle{position:absolute;top:auto;right:17px;bottom:20px;width:46px;height:46px}
 :root[data-style] .mega-menu{position:fixed;top:calc(72px + env(safe-area-inset-top,0px));bottom:auto;left:10px;right:10px;width:auto;max-height:calc(100dvh - 164px - env(safe-area-inset-bottom,0px));height:auto;min-height:0;display:block;overflow-y:auto;overscroll-behavior:contain;transform:translateY(-8px) scale(.99)}
 .top-actions.menu-open .mega-menu{transform:none}
 .mega-menu .menu-header{position:sticky;top:0;z-index:3;padding:10px 12px;background:var(--site-surface);gap:10px}
 .mega-menu .menu-header h2{font-size:23px;min-width:0}
 .mega-menu .menu-header .menu-browse{font-size:11px}
 :root[data-style] .mega-menu .mega-projects{max-height:none;overflow:visible;padding:12px;border-right:0}
 .menu-categories{gap:6px;padding-bottom:12px;margin-bottom:6px}
 .menu-categories button{min-height:44px;padding:9px 10px;font-size:12px}
 :root[data-style] .mega-menu .project-item{min-height:48px;padding:10px;font-size:14px}
 :root[data-style] .mega-menu .mega-preview{display:flex;min-height:0;padding:16px 12px;border-top:1px solid var(--site-line)}
 .mega-preview .menu-preview-heading{display:block;margin-bottom:10px}
 .mega-menu .mega-preview .preview-frame{flex:none;height:clamp(180px,58vw,290px);min-height:0;max-height:none;padding:7px}
 .menu-preview-heading h3{font-size:24px}
 .menu-view-controls{display:flex;min-height:44px;margin-top:10px}
 .menu-view-controls[hidden]{display:none}
 .menu-view-controls button{min-width:44px;min-height:44px}
 .menu-view-controls span{font-size:12px}
 .menu-preview-actions a:first-child{min-height:46px;font-size:13px;padding:11px 13px}
 .hero{height:auto;min-height:100svh;padding:92px 0 38px;overflow:hidden}
 .left-copy,.face-stage,.right-copy{position:relative;left:auto;right:auto;top:auto;transform:none}
 .left-copy{width:auto;margin:0 20px}
 .skill-text{height:auto;min-height:2.35em;font-size:clamp(30px,8vw,44px);line-height:1.12;letter-spacing:-.045em}
 .hero-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
 .hero-buttons .pill-button{display:flex;align-items:center;justify-content:center;min-height:48px;height:auto;padding:13px 12px;font-size:13px}
 .face-stage{width:min(91vw,450px);height:min(92vw,440px);margin:18px auto 14px;z-index:2}
 .right-copy{width:auto;max-width:560px;margin:0 20px 38px;z-index:3;font-size:16px;line-height:1.6}
 .right-copy .statement{font-size:21px;line-height:1.35;margin-bottom:10px}
 .right-copy .greeting{margin-bottom:8px;font-size:14px}
 .right-copy .description{font-size:16px;line-height:1.65}
 .right-copy .specialty{margin-top:15px;font-size:13px;line-height:1.6}
 .explore-capabilities{position:relative;display:flex;left:auto;bottom:auto;width:fit-content;margin:20px auto 0;transform:none;font-size:12px;min-height:44px}
 .info-panel{position:fixed;z-index:140;left:16px;right:16px;bottom:calc(96px + env(safe-area-inset-bottom,0px));width:auto;max-width:none}
 /* Five capabilities, with readable text and all their controls. */
 html{font-size:calc((min(100vw,560px) - 32px)/375)}
 .capabilities{min-height:0;padding:20px 16px 45px;overflow:visible}
 .mosaic-stage{width:100%;max-width:528px;height:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:16px}
 .mosaic-stage .card{grid-area:auto;width:100%;border-width:1px;border-radius:18px}
 .mosaic-stage .notif{height:154px;padding:28px 15px 0}
 .mosaic-toast{height:78px;padding:10px;gap:10px}
 .toast-copy strong{font-size:13px}.toast-copy p{font-size:12px;max-width:none}.toast-time{font-size:10px;margin-top:1px}
 .mosaic-stage .connect{height:auto;min-height:430px;padding:25px 20px}
 .connect h2{font-size:28px}.connect .sub{max-width:none;margin-top:12px;font-size:16px;line-height:1.55}
 .integration-chips{position:relative;left:auto;right:auto;bottom:auto;gap:12px;margin-top:32px}
 .chip-row,.chip-row.r2{display:flex;flex-wrap:wrap;gap:10px;padding-left:0}
 .tech-chip{height:42px;min-height:42px;padding:0 13px;font-size:15px;gap:8px}.tech-chip svg{width:20px;height:20px}
 .connect .chip-slack{position:relative;right:auto;bottom:auto;margin:20px 0 4px;rotate:-7deg}
 .mosaic-stage .automate{height:max(360px,350rem)}
 .automate-copy{padding:25px 22px 0}
 .automate h2{font-size:26px;line-height:1.25}.automate .sub{max-width:none;font-size:15px;line-height:1.55;margin-top:12px}
 .mosaic-illo{top:54px;scale:.5981;transform-origin:0 0}
 .mosaic-stage .insights{height:460px;padding:25px 20px}
 .insights .tag{font-size:12px;min-height:30px;padding:0 12px}
 .insights h2{font-size:32px;line-height:1.12;margin-top:22px}.insights .sub{font-size:15px;margin-top:12px}
 .delivery-chart{height:270px;gap:10px}.delivery-bar{max-height:245px;font-size:13px}.delivery-day{font-size:11px}
 .delivery-status{font-size:12px}.workflow-label{font-size:12px}.workflow-replay{min-height:44px;min-width:44px}
 .mosaic-stage .search{height:auto;min-height:210px;flex-direction:column;align-items:stretch;padding:25px 20px}
 .search h2{font-size:24px;line-height:1.25}.search h2 br{display:none}
 .bar-search{width:100%;height:56px;margin:22px 0 0;padding:0 8px;gap:9px}
 .bar-search input{font-size:16px}.bar-search button{min-width:44px;min-height:44px}.search-disc{width:36px;height:36px}.search-disc svg{width:22px;height:22px}
 /* Keep the original desk composition and one project per gallery page. */
 .work-section{padding:28px 16px;scroll-margin-top:72px}
 .work-viewport{height:auto;min-height:0;gap:16px}
 .collage-header{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
 .work-kicker{font-size:11px}
 .work-filters{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;gap:7px;padding-bottom:3px;scrollbar-width:thin}
 .work-filters button{flex:none;min-height:42px;padding:9px 13px;font-size:13px}
 .work-stage-slot{flex:none;width:100%;height:min(112vw,570px);min-height:350px}
 .work-collage{width:min(100cqw,95cqh);aspect-ratio:.95}
 .project-cutout,.work-collage[data-visible-count="1"] .project-cutout{left:10%;right:auto;top:5%;width:80%;--tilt:-1.5deg}
 .cutout-label{font-size:4cqw;margin:0 1cqw 2cqw}.cutout-caption{padding:2cqw 1.3cqw;margin-top:2cqw}.cutout-caption h3{font-size:6.6cqw}.cutout-caption p{font-size:3.3cqw}.cutout-tags span{font-size:2.3cqw}
 .work-pager{min-height:48px;gap:7px;padding:5px;flex-wrap:wrap}
 .work-pager>button{width:44px;height:44px;flex:none}
 .work-directory>summary{min-height:40px;padding:8px;font-size:12px}
 .work-directory-panel{position:absolute;right:0;width:min(420px,calc(100vw - 32px));max-height:65dvh;overflow:auto;padding:12px}
 .work-directory-search{min-height:46px;font-size:16px}
 .work-directory .work-index{grid-template-columns:1fr;max-height:45dvh;gap:4px}
 .work-directory .work-index-item{min-height:44px;font-size:14px;padding:10px}
 .work-bottom{flex-wrap:wrap;gap:12px;padding-top:18px;margin-top:18px;font-size:12px}
 .work-bottom a,.work-bottom button,.work-menu-link{min-height:44px;display:inline-flex;align-items:center;font-size:12px}
 .work-section.case-open,.portfolio-dark .work-section.case-open{padding:82px 16px 28px}
 .case-signature{display:none}
 .work-case-toolbar{top:72px;min-height:52px;padding:6px 8px;margin-bottom:30px;gap:10px}
 .work-case-toolbar>span{font-size:10px;min-width:0;overflow-wrap:anywhere}
 .work-case-toolbar .work-case-close{flex:none;min-height:44px;font-size:12px;padding:9px 12px}
 .case-page-heading{display:block;margin-bottom:25px}.case-editorial .case-page-heading h3{font-size:clamp(35px,9vw,55px);line-height:1.07;overflow-wrap:anywhere}
 .case-editorial .case-page-heading .case-deck{font-size:27px;line-height:1.25;margin-top:17px}
 .case-topic-tags{gap:7px;margin-top:18px}.case-topic-tags span{font-size:11px;padding:6px 9px}
 .case-product-stage{padding:18px 9px;border-radius:14px}
 .case-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
 .case-facts>div{padding:14px 12px;min-width:0}.case-facts dt{font-size:17px}.case-facts dd{font-size:13px;line-height:1.6;overflow-wrap:anywhere}
 .case-reader{display:block;margin-top:15px}
 .case-chapter-nav{position:sticky;top:132px;z-index:20;display:flex;flex-direction:row;overflow-x:auto;gap:5px;padding:9px 0;background:var(--site-bg);margin:0 0 20px;scrollbar-width:thin}
 .case-chapter-nav button{flex:none;min-height:44px;padding:8px 12px;font-size:14px;white-space:nowrap}
 .case-chapter{scroll-margin-top:194px;padding-bottom:28px}
 .case-editorial .case-chapter>h4{font-size:32px}.case-editorial .case-chapter-lead{font-size:16px;line-height:1.8}
 .case-feature-grid{grid-template-columns:1fr;gap:12px}.case-feature{min-height:0;padding:22px}.case-feature h5{font-size:25px}.case-editorial .case-feature p{font-size:14px;line-height:1.75}
 .case-interface-board{margin-inline:0;padding:18px 10px}.case-interface-heading h5{font-size:28px}.case-editorial .case-interface-heading>p:last-child{font-size:14px}
 .interface-section h6{font-size:18px}.case-editorial .interface-section-description{font-size:14px;line-height:1.7}
 .case-next-project,.case-return{min-height:48px}.case-next-project{padding:14px 16px;font-size:14px}
 .case-related-card{min-width:0}.case-related-card h5{font-size:29px}.case-editorial .case-related-card>p{font-size:14px}
 .work-demo .rag-lab{--rag-cw:84cqw;--rag-ch:54cqw;--rag-gap:7cqw;--rag-top:165px;height:calc(54cqw + 240px)}
 .work-demo .rag-copy-right p{font-size:12px;line-height:1.6}.rag-mode-toggle button,.rag-nav button,.rag-cta button{min-height:44px}
 /* The full About composition flows as readable cards. */
 .about-back{position:relative;top:auto;right:auto;display:flex;align-items:center;min-height:44px;margin:20px 20px 0;width:fit-content;font-size:12px}
 .about-viewport{height:auto;overflow:visible;padding:22px 20px 35px}
 .about-stage{position:relative;left:auto;top:auto;width:100%;height:auto;transform:none!important;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
 .about-stage .about-block,.about-stage .about-section-label{position:relative;inset:auto;width:auto;grid-column:1/-1;grid-row:auto;min-width:0}
 .about-section-label{font-size:11px}.about-avatar{width:140px!important;height:140px!important}
 .about-heading{font-size:34px;line-height:1.15}.about-heading br{display:none}.about-bio{font-size:16px;line-height:1.75}.about-bio br{display:none}
 .about-voice-group{width:100%;max-width:none}.about-voice-pill{height:58px;padding:0 12px;gap:10px}.about-wave{gap:2px;min-width:0}.about-voice-caption{font-size:10px;line-height:1.5}
 .about-conversation{width:100%!important;min-height:50px!important;height:auto!important;font-size:13px}
 .about-transcript{width:min(495px,calc(100vw - 40px));left:0;right:auto;font-size:13px;line-height:1.7}
 .about-card{border-radius:16px}.about-experience,.about-principle{height:310px!important}.about-focus{height:280px!important}.about-map,.about-photo{height:270px!important}.about-process{height:285px!important}
 .about-timeline strong{font-size:12px;max-width:190px}.about-timeline li>div>span,.about-timeline time{font-size:11px}
 .about-principle-copy{width:58%}.about-principle-copy h3{font-size:28px;line-height:1.2}.about-principle-copy p{font-size:13px;line-height:1.65}
 .about-notebook{width:38%;right:12px}.about-process-copy{max-width:100%;left:20px;right:20px}.about-process-copy h3{font-size:27px}.about-process-copy p{font-size:14px;line-height:1.7}
 .about-step-control{left:12px;right:12px;bottom:14px;height:48px}.about-step-control button{min-height:46px;font-size:11px}
 .about-footer{flex-wrap:wrap;font-size:12px;line-height:1.7;gap:13px}.about-footer a{min-height:44px;display:inline-flex;align-items:center}
 .about-constellation{padding:38px 20px}.about-network-header{gap:13px}.about-network-header h2{font-size:35px}.about-network-header span{font-size:21px}.about-network-header button{min-height:44px}
 .about-network-filters button{min-height:44px;font-size:18px}.about-network-stage{height:460px}.about-network-node{font-size:18px}.about-network-detail a{min-height:44px;font-size:20px}
 .about-notebook-section{padding:40px 20px 50px}.about-notebook-heading{margin-bottom:24px}.about-notebook-heading h2{font-size:42px}.about-notebook-heading>span{font-size:24px}
 .about-notebook-scene{display:block}.about-character-track{height:auto;min-height:0;margin-top:16px}.about-character-figure{position:relative;top:auto;height:auto;max-height:none}
 .about-character-art{flex:none;height:clamp(340px,65svh,520px);max-height:none}
 .about-character-figure figcaption{padding:0 5px}.about-character-note{font-size:25px}.about-character-angle{font-size:10px;max-width:130px}
 .about-character-controls{margin:20px 5px 25px;flex-wrap:wrap}.about-character-controls button{width:46px;height:46px}.about-character-controls>span{font-size:21px;max-width:220px}
 .about-notebook-pages{padding-top:15px}.about-note-paper{width:100%;margin:0 0 28px;padding:32px 25px;rotate:0deg}.about-note-paper h3{font-size:32px}.about-note-paper p{font-size:15px;line-height:1.8}
 .about-note-snapshot{max-width:80%;left:auto;right:0}.about-notebook-contact>a{font-size:clamp(22px,5.7vw,34px);overflow-wrap:anywhere}.about-notebook-contact>div{gap:16px;flex-wrap:wrap}.about-notebook-contact a{min-height:44px}
 .site-footer{height:auto;min-height:100svh;padding:50px 20px 110px}
 .site-footer h2{font-size:clamp(48px,12vw,76px)}.site-footer-subtitle{font-size:21px;margin-top:20px}
 .site-footer-email{font-size:clamp(18px,5vw,32px);margin-top:30px;max-width:100%;overflow-wrap:anywhere;line-height:1.5}
 .site-footer-copy .site-footer-phone{font-size:16px;min-height:44px;display:flex;align-items:center}
 .site-footer-links{position:relative;left:auto;bottom:auto;width:100%;display:grid;grid-template-columns:1fr 1fr;margin-top:24px;gap:20px}.site-footer-links a{font-size:25px;min-height:44px;display:flex;align-items:center}
 .site-footer-portrait{position:relative;right:auto;width:100%;height:430px;margin:18px 0 0}
 .site-footer-toys{position:relative;left:auto;bottom:auto;gap:14px;flex-wrap:wrap;margin:12px 0 0}.site-footer-toys button{min-height:44px;font-size:13px}
 .site-footer-meta{left:20px;bottom:30px;right:80px;font-size:11px}.site-footer-play{right:20px;bottom:24px;width:46px;height:46px}
 /* Résumé content and every source/download/contact component are retained. */
 .resume-header{padding:15px 16px;gap:12px;flex-wrap:wrap}.resume-header nav{gap:5px;flex-wrap:wrap;justify-content:flex-end}.resume-header nav a{display:flex;align-items:center;min-height:44px;padding:6px 12px;font-size:20px}
 .resume-home svg{display:block;width:32px;height:32px}.resume-home span{width:36px;height:36px;font-size:22px}.resume-home{flex-wrap:wrap;max-width:90px;gap:3px}
 .resume-footer{padding-bottom:90px}
 .resume-main{padding:18px 20px 75px}.resume-toolbar{flex-wrap:wrap;gap:12px;margin-bottom:30px}.resume-back{display:flex;align-items:center;min-height:44px;font-size:12px}
 .resume-download{min-height:48px;font-size:13px;padding:11px 13px}.resume-download span{display:block;font-size:9px}
 .resume-intro h1{font-size:clamp(43px,10.3vw,66px)}.resume-role{font-size:17px;line-height:1.6}.resume-focus{font-size:13px;line-height:1.75}
 .resume-notebook{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}.resume-sidebar-sticky{position:static;max-height:none;overflow:visible;padding:0}
 .resume-contact-note{display:block;padding:22px 0;font-size:13px}.resume-contact-note a{min-height:44px;display:flex;align-items:center}
 .resume-index{grid-template-columns:1fr 1fr;gap:7px}.resume-index a{min-height:44px;display:flex;align-items:center;font-size:12px;padding:8px}
 .resume-pages{padding:0}.resume-paper{padding:30px 23px;rotate:0deg}.resume-paper:nth-child(2n){rotate:0deg}.resume-paper h2{font-size:33px}
 .resume-profile-copy,.resume-list li{font-size:15px;line-height:1.8}.resume-eyebrow{font-size:10px}.resume-job-meta p{font-size:14px}.resume-job-meta span{font-size:12px}
 .resume-portfolio-grid,.resume-skills{display:grid;grid-template-columns:1fr;gap:32px}.resume-portfolio-paper .resume-list li{font-size:14px;line-height:1.8}
 .resume-skill-list li{font-size:12px;padding:6px 9px}.resume-footer-links{flex-wrap:wrap;gap:20px;font-size:12px}.resume-footer-links a{min-height:44px;display:flex;align-items:center}
 .resume-seals{gap:10px}.resume-seals span{width:clamp(76px,23vw,108px);height:clamp(76px,23vw,108px);font-size:20px}.resume-phone{min-height:44px;display:flex;align-items:center}
 body.resume-page .appearance-trigger{bottom:max(16px,env(safe-area-inset-bottom,0px));left:16px}
}
@media(min-width:481px) and (max-width:960px){
 .about-stage{grid-template-columns:1fr 1fr}.about-stage .about-card{grid-column:auto}.about-stage .about-focus,.about-stage .about-process{grid-column:1/-1}
 .about-stage .about-avatar{grid-column:1/-1}.case-feature-grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(max-width:960px){.top-actions .call-button{position:relative;display:grid;place-items:center;width:44px;min-width:44px;height:44px;padding:0;border-radius:50%}.top-actions .call-mark{width:32px;height:32px;flex-basis:32px}.top-actions .call-button>span:last-child{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
@media(max-width:960px){input,textarea,select{font-size:16px!important}.work-filters button{min-height:44px}.about-network-node{min-height:44px}.about-network-node.is-hub{min-height:48px}.about-voice-pill button,.about-focus-controls button{min-width:44px;min-height:44px}}
/* Keep sheets, sticky controls and headings clear of notches and gesture areas. */
@media(max-width:960px){
 html{scroll-padding-top:calc(84px + env(safe-area-inset-top,0px))}
 .hero{padding-top:calc(92px + env(safe-area-inset-top,0px))}
 :root[data-style] .mega-menu{max-height:calc(100dvh - 164px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
 .work-section.case-open,.portfolio-dark .work-section.case-open{padding-top:calc(82px + env(safe-area-inset-top,0px))}
 .work-case-toolbar{top:calc(72px + env(safe-area-inset-top,0px))}
 .case-chapter-nav{top:calc(132px + env(safe-area-inset-top,0px))}
 .case-chapter{scroll-margin-top:calc(194px + env(safe-area-inset-top,0px))}
 .resume-header{padding-top:calc(15px + env(safe-area-inset-top,0px))}
 .interface-sketch-dialog{position:fixed;inset:calc(8px + env(safe-area-inset-top,0px)) 8px calc(8px + env(safe-area-inset-bottom,0px));width:auto;max-height:none;margin:0}
 .interface-sketch-dialog[open]{display:flex;flex-direction:column}
 .interface-sketch-dialog .sketch-dialog-viewport{flex:1;min-height:0;max-height:none}
}