/* Touch layout is a separate reading and interaction flow, not a scaled desktop scene. */
.mobile-contact-bar,.crm-pagination,.mobile-mode-label,.dialog-original-image,.mobile-more-projects{display:none}
.phone-layout{scroll-padding-top:82px}
.phone-layout body{padding-bottom:calc(78px + env(safe-area-inset-bottom));font-size:17px}
.phone-layout .wrap{padding-inline:20px;max-width:680px}
.phone-layout .site-header{height:64px;padding-inline:20px}
.phone-layout .site-header nav,.phone-layout .header-contact{display:none}
.phone-layout .menu-button{display:grid;place-items:center;width:44px;height:44px;background:transparent}
.phone-layout .brand{gap:8px;min-height:44px}.phone-layout .brand img{width:27px;height:27px}.phone-layout .brand .wordmark{font-size:25px}
.phone-layout .mobile-nav{inset:64px 0 auto;padding:8px 20px 16px;max-height:calc(100dvh - 150px);overflow:auto}
.phone-layout .mobile-nav a{padding:12px 4px;min-height:48px;font-size:18px}
.phone-layout .intro{padding-top:24px;padding-bottom:26px}
.phone-layout .intro-top{font-size:13px}.phone-layout .intro-note{display:none}
.phone-layout .intro h1{font-size:76px;line-height:1.1;padding-block:15px 20px;text-align:left}
.phone-layout .intro-bottom{display:block}.phone-layout .intro-line{font-size:35px;line-height:1.12}
.phone-layout .intro-side{display:block;margin-top:18px}.phone-layout .intro-side p{font-size:17px;line-height:1.55;max-width:none}
.phone-layout .intro-side .text-link{display:none}
.phone-layout .section-top{gap:12px;padding-block:17px}.phone-layout .section-top h2{font-size:17px;line-height:1.4}
.phone-layout .section-top .mono{display:none}.phone-layout .section-index{font-size:11px;margin-left:8px}
.phone-layout .lead-project{display:flex;flex-direction:column}
.phone-layout .lead-caption{order:-1;display:grid;grid-template-columns:1fr auto;gap:13px;align-items:center;padding-block:17px 24px}
.phone-layout .lead-caption h3[dir=ltr]{font-size:30px}.phone-layout .lead-caption .index{font-size:12px;margin-bottom:6px}
.phone-layout .lead-caption p{grid-column:1/-1;font-size:18px;line-height:1.5}.phone-layout .lead-caption p br{display:initial}
.phone-layout .lead-caption .text-link{grid-column:2;grid-row:1;font-size:15px;min-height:44px;align-self:center}
.phone-layout .lead-art,.phone-layout .lead-art[data-features-open=true]{height:auto!important;min-height:0;padding:22px 0 18px;overflow:hidden}
.phone-layout .lead-art .lead-desktop,.phone-layout .lead-art .art-word,.phone-layout .lead-tag,.phone-layout .lead-art .art-caption,.phone-layout .lead-art .project-open,.phone-layout .crm-gallery-toggle{display:none!important}
.phone-layout .crm-feature-gallery{position:relative;inset:auto;display:flex;align-items:start;gap:12px;width:100%;padding:0 20px 12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;overscroll-behavior-x:contain;opacity:1!important;visibility:visible!important;transform:none!important;scrollbar-width:none;touch-action:pan-x pan-y}
.phone-layout .crm-feature-gallery::-webkit-scrollbar{display:none}
.phone-layout .crm-feature-gallery{touch-action:pan-x pan-y pinch-zoom}
.phone-layout .crm-feature-gallery figure{flex:0 0 calc(100% - 24px);scroll-snap-align:center;min-width:0}
.phone-layout .crm-feature-image{height:min(430px,47svh);width:100%;background:transparent}
.phone-layout .crm-feature-image img{height:100%;width:auto;max-width:100%;border-width:7px;border-radius:28px;transform:none!important}
.phone-layout .crm-feature-gallery figcaption{padding:17px 5px 0;max-width:340px;line-height:1.4}
.phone-layout .crm-feature-gallery figcaption strong{font-size:21px}.phone-layout .crm-feature-gallery figcaption span{font-size:16px;margin-top:6px;color:#d2dfd5}
.phone-layout .crm-pagination{display:flex;flex-direction:column;align-items:center;gap:0;padding-inline:20px;color:#e2eee4;margin-top:8px}
.crm-pagination-count{font:13px 'Manrope',sans-serif;min-height:20px}.crm-pagination-dots{display:flex;direction:rtl;justify-content:center;max-width:100%}
.crm-pagination-dots button{display:grid;place-items:center;width:44px;height:44px;background:transparent;padding:0;flex:none}
.crm-pagination-dots button::before{content:'';width:7px;height:7px;border-radius:50%;background:#9ab4a2}
.crm-pagination-dots button[aria-current=true]::before{width:20px;border-radius:8px;background:#d9f289}
.phone-layout .collection-heading{display:block;padding-top:37px;padding-bottom:12px;border-top:0}
.phone-layout .collection-heading h3{font-size:33px;line-height:1.13}.phone-layout .collection-heading p{margin-top:15px;font-size:17px;line-height:1.5;max-width:none}
.phone-layout .collection-mark{display:none}
.phone-layout .more-work,.phone-layout .desktop-work{display:block;padding-top:0;padding-bottom:0}
.phone-layout .project-item{display:flex;flex-direction:column;margin:0;padding:25px 0 30px;border-bottom:1px solid var(--line)}
.phone-layout .project-caption,.phone-layout .more-work .project-caption,.phone-layout .desktop-work .project-caption{order:-1;display:block;min-height:0;padding:0 0 19px;border:0}
.phone-layout .project-caption h3,.phone-layout .project-caption h3[dir=ltr]{font-size:28px;line-height:1.2}
.phone-layout .project-caption .index{font-size:12px;margin-bottom:8px}.phone-layout .project-caption p,.phone-layout .more-work .project-caption p{font-size:17px;line-height:1.5;max-width:none;margin-top:12px}
.phone-layout .project-caption p br{display:initial}
.phone-layout .project-media{width:100%}.phone-layout .project-visual,.phone-layout .more-work .project-visual,.phone-layout .desktop-work .project-visual{height:390px;padding:0;border-radius:4px}
.phone-layout .stage-word,.phone-layout .stage-kicker,.phone-layout .stage-subline,.phone-layout .project-cursor,.phone-layout .peek-divider,.phone-layout .expand-preview,.phone-layout .reveal-control{display:none!important}
.phone-layout .project-visual .phone-shot{height:345px!important;width:190px!important;top:22px!important;left:calc(50% - 95px)!important;right:auto!important;transform:none!important;opacity:1!important;object-fit:contain}
.phone-layout .poolcleaner .phone-shot,.phone-layout .budafeast .phone-shot{height:345px!important;width:163px!important;left:calc(50% - 81.5px)!important;object-fit:contain!important;border:5px solid #21392d;border-radius:24px;background:#21392d;box-shadow:0 12px 22px #1e2e2315}
.phone-layout .project-visual .desktop-shot{height:calc(100% - 40px)!important;width:calc(100% - 26px)!important;left:13px!important;top:20px!important;object-fit:contain;clip-path:none!important;transform:none!important;opacity:1!important}
.phone-layout .project-visual[data-preview=mobile] .desktop-shot{display:none!important}.phone-layout .project-visual[data-preview=desktop] .phone-shot{display:none!important}
.phone-layout .project-visual[data-preview=mobile] .phone-shot,.phone-layout .project-visual[data-preview=desktop] .desktop-shot{display:block!important}
.phone-layout .mobile-peek{clip-path:none!important;background:transparent;transition:none;z-index:1}.phone-layout .project-visual[data-preview=desktop] .mobile-peek{display:none!important}
.phone-layout .desktop-work .mobile-peek .phone-shot{height:345px!important;width:190px!important;left:calc(50% - 95px)!important;top:22px!important;right:auto!important}
.phone-layout .media-toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 0;border:0;min-height:0}
.phone-layout .preview-views{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:4px;background:#e8ece5;padding:4px;border-radius:6px}
.phone-layout .preview-views button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:auto;min-height:44px;padding:8px;font-size:15px;border-radius:3px}
.phone-layout .mobile-mode-label{display:inline}.phone-layout .preview-views svg{width:18px;height:18px}
.phone-layout .preview-open{justify-content:center;width:100%;font-size:16px;min-height:46px;padding:10px 0;border-bottom:1px solid var(--ink)}
.phone-layout .work-end{display:block;padding-block:30px 40px}.phone-layout .work-end p{font-size:18px;line-height:1.5}.phone-layout .work-end .text-link{margin-top:15px;min-height:44px;font-size:16px}
.phone-layout .mobile-more-projects{display:block;padding-top:20px;padding-bottom:4px}.mobile-more-projects button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;border:1px solid var(--ink);border-radius:4px;background:transparent;font-size:17px;font-weight:600}.mobile-more-projects button[aria-expanded=true] svg{transform:rotate(45deg)}
.phone-layout .action-band{padding-block:13px 35px}.phone-layout .action-layout{display:block;padding-top:20px}
.phone-layout .action-copy h2{font-size:38px;line-height:1.12;margin-bottom:18px}.phone-layout .action-copy>p{font-size:19px}
.phone-layout .action-copy p.action-note{font-size:16px;max-width:none}.phone-layout .action-copy .text-link{font-size:16px;min-height:44px;margin-bottom:27px}
.phone-layout .workflow-tabs button{min-height:52px;font-size:16px}.phone-layout .workflow-tool [role=tabpanel]{padding:22px 16px;min-height:450px}
.phone-layout .tool-heading h3{font-size:24px}.phone-layout .tool-label{font-size:13px}.phone-layout .reset-demo{width:44px;height:44px}
.phone-layout .work-stats{gap:25px;padding-block:18px}.phone-layout .work-stats>div{display:flex;flex-direction:column;align-items:start;gap:3px}.phone-layout .work-stats span{font-size:14px}
.phone-layout .task-list li{min-height:95px;gap:12px}.phone-layout .task-list h4{font-size:17px}.phone-layout .task-list p{font-size:13px}
.phone-layout .task-status{min-height:44px;min-width:95px;font-size:13px}.phone-layout .tool-footer{font-size:12px;align-items:start;flex-wrap:wrap}
.phone-layout #booking-service{min-height:48px;font-size:17px}.phone-layout fieldset legend,.phone-layout .field-label{font-size:16px}
.phone-layout .day-options span,.phone-layout .time-options span{min-height:44px;font-size:16px}.phone-layout .booking-submit{min-height:48px;font-size:17px}
.phone-layout .services{padding-block:37px 48px}.phone-layout .services-layout{display:block;padding-top:20px}.phone-layout .services-layout>h2{font-size:38px;margin-bottom:27px}
.phone-layout details{padding-block:21px}.phone-layout summary{min-height:44px;gap:14px}.phone-layout summary h3{font-size:23px}
.phone-layout details p{font-size:18px;padding-right:28px;margin-top:14px}
.phone-layout .studio-inner{display:block}.phone-layout .studio-band{padding-top:35px}.phone-layout .studio-inner h2{font-size:48px;line-height:1.06;margin-top:23px}
.phone-layout .studio-copy{padding-top:27px}.phone-layout .studio-copy .large-copy{font-size:24px;line-height:1.5}.phone-layout .studio-copy>p:not(.large-copy){font-size:18px}
.phone-layout .studio-bottom{font-size:14px;gap:20px;align-items:start;margin-top:36px}.phone-layout .studio-copy .text-link{font-size:16px;min-height:44px}
.phone-layout .process{padding-block:45px}.phone-layout .process ol{display:block;margin-top:16px}.phone-layout .process li{display:grid;grid-template-columns:26px 1fr;gap:8px 13px;padding-block:18px}
.phone-layout .process li>span{grid-row:1/3;margin:3px 0 0}.phone-layout .process h3{font-size:23px;margin:0}.phone-layout .process p{font-size:18px;max-width:none}
.phone-layout .contact{padding-block:30px 35px}.phone-layout .contact h2{font-size:68px;line-height:1.08}.phone-layout .contact-bottom{display:block}
.phone-layout .contact-bottom p{font-size:19px}.phone-layout .contact-cta{margin-top:24px;min-height:54px;font-size:19px}
.phone-layout .email{font-size:16px;min-height:44px;padding-block:10px;margin-top:16px}
.phone-layout .text-link,.phone-layout .booking-reset{min-height:44px}.phone-layout .footer-brand{display:flex;align-items:center;min-height:44px}
.phone-layout .site-footer{flex-wrap:wrap;padding-block:24px;gap:18px;font-size:14px}.phone-layout .site-footer>div{width:100%;justify-content:space-between;padding-top:16px;border-top:1px solid var(--line)}
.phone-layout .site-footer>div a{display:flex;align-items:center;min-height:44px}
.phone-layout .mobile-contact-bar{position:fixed;inset:auto 0 0;z-index:30;background:#f8f8f5;border-top:1px solid var(--line);padding:9px 16px calc(9px + env(safe-area-inset-bottom));display:grid;grid-template-columns:.7fr 1.3fr;gap:10px}
.mobile-contact-bar a{min-height:44px;display:flex;justify-content:center;align-items:center;gap:9px;font-size:16px;font-weight:700;border-radius:4px}
.mobile-contact-bar a:first-child{background:#e8ece5}.mobile-contact-bar a:last-child{background:var(--ink);color:white}.mobile-contact-bar svg{width:19px;height:19px}
.phone-layout body:has(dialog[open]) .mobile-contact-bar{visibility:hidden}
.phone-layout dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;padding:18px 20px calc(24px + env(safe-area-inset-bottom));border-radius:0;overscroll-behavior:contain}
.phone-layout .dialog-close{position:sticky;float:left;top:0;left:0;z-index:5;width:44px;height:44px;box-shadow:0 0 0 5px var(--paper)}
.phone-layout .dialog-header{padding-left:54px;padding-top:4px}.phone-layout .dialog-header h2{font-size:28px;line-height:1.15;margin-top:7px;margin-bottom:14px}
.phone-layout .dialog-header>p{font-size:18px;line-height:1.5}.phone-layout .view-switch{clear:both;margin-block:20px 14px}
.phone-layout .view-switch button{min-height:46px;flex:1;justify-content:center;font-size:16px}
.phone-layout .dialog-image-wrap{clear:both;height:auto;min-height:230px;margin-top:22px;padding:10px;background:#e8ece7}
.phone-layout .dialog-image-wrap img{width:100%;height:auto;max-height:65dvh;object-fit:contain}
.phone-layout .dialog-original-image{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;min-height:44px;border-bottom:1px solid var(--line);margin-top:5px}
.phone-layout .dialog-bottom{display:block;padding-top:20px}.phone-layout .dialog-bottom p{font-size:18px;line-height:1.5}
.phone-layout .dialog-links{display:flex;flex-direction:column;gap:8px;margin-top:17px}.phone-layout .dialog-links a{width:100%;justify-content:center;min-height:46px;font-size:17px}
.phone-layout .project-pagination{margin-top:25px;padding-top:12px}.phone-layout .project-pagination button{min-height:46px;padding:10px 15px;font-size:16px}
@media(max-width:370px){.phone-layout .intro h1{font-size:64px}.phone-layout .intro-line{font-size:33px}.phone-layout .wrap{padding-inline:18px}.phone-layout .tool-heading h3{font-size:21px}.phone-layout .task-status{min-width:87px;padding-inline:6px;font-size:12px}.phone-layout .task-list h4{font-size:16px}.phone-layout .task-list p{font-size:12px}}
@media(pointer:coarse){.crm-gallery-toggle,.preview-views button,.icon-button,.menu-button{min-width:44px;min-height:44px}}