/* Final phone-first pass shared by the Studio, each demo site and both live apps. */ @media (max-width:760px){ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} html,body{width:100%;max-width:100%;overflow-x:clip!important} *,*::before,*::after{min-width:0} img,svg,canvas,video{max-width:100%;height:auto} [data-srb-t],p,h1,h2,h3,h4,li,blockquote{overflow-wrap:anywhere} input,select,textarea{font-size:16px!important} .srb-contact-dock{right:10px!important;bottom:14px!important;gap:8px!important} .srb-contact-button{width:44px!important;height:44px!important} /* Studio home: clear reading order and a real mobile card rail. */ /* Phone hero: retain the original atelier photograph, cropped from the empty left side. */ body:has(.nav-center) .hero{min-height:790px!important;padding-top:96px!important;padding-bottom:58px!important;background-color:#03060b!important;background-image:url('assets/brand/srb-atelier-hero-v3.png')!important;background-repeat:no-repeat!important;background-size:auto 420px!important;background-position:70% 92px!important} body:has(.nav-center) .hero:before{background:linear-gradient(90deg,rgba(2,5,11,.98) 0%,rgba(2,5,11,.94) 46%,rgba(2,5,11,.48) 63%,rgba(2,5,11,.08) 100%),linear-gradient(180deg,rgba(2,5,11,.32) 0%,rgba(2,5,11,.12) 54%,rgba(2,5,11,.9) 100%)!important} body:has(.nav-center) .hero-art{transform:none!important} body:has(.nav-center) .hero-art:before{display:none!important} body:has(.nav-center) .hero-art:after{display:none!important} body:has(.nav-center) .hero h1{max-width:100%;font-size:clamp(30px,8.4vw,33px)!important;line-height:.98!important;letter-spacing:-1.45px!important;white-space:normal!important} body:has(.nav-center) .nav-cta{font-size:0!important;white-space:nowrap} body:has(.nav-center) .nav-cta:before{content:'Talk'!important;font-size:10px!important} body:has(.nav-center) .nav-cta span{font-size:13px!important} body:has(.nav-center) .hero-copy{max-width:55%!important;margin-top:62px!important} body:has(.nav-center) .hero-bottom p{max-width:22ch!important;font-size:13px!important;line-height:1.6!important} body:has(.nav-center) .team-orbit{display:none!important} body:has(.nav-center) .stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important} body:has(.nav-center) .stats>div{min-height:66px!important} body:has(.nav-center) .stats>div:nth-child(1) b{font-size:43px!important} body:has(.nav-center) .stats>div:nth-child(2) b{font-size:27px!important} body:has(.nav-center) .stats>div:nth-child(3) b{font-size:35px!important} body:has(.nav-center) .stats span{margin-top:8px!important;font-size:6.5px!important;letter-spacing:.45px!important} body:has(.nav-center) .graphics-grid{display:flex!important;width:100%!important;height:auto!important;gap:14px!important;padding:18px calc((100% - 176px)/2) 34px!important;overflow-x:auto!important;overflow-y:visible!important;scroll-snap-type:x mandatory;scrollbar-width:none} body:has(.nav-center) .graphics-grid::-webkit-scrollbar{display:none} body:has(.nav-center) .graphic-card{position:relative!important;top:auto!important;left:auto!important;right:auto!important;flex:0 0 176px!important;width:176px!important;min-height:228px!important;opacity:1!important;pointer-events:auto!important;transform:none!important;scroll-snap-align:center} body:has(.nav-center) .menu-real,body:has(.nav-center) .flyer-real,body:has(.nav-center) .social-mock{width:176px!important;height:228px!important} body:has(.nav-center) .menu-card,body:has(.nav-center) .flyer-card,body:has(.nav-center) .social-card{transform:none!important} /* Shared navigation and controls across the six business websites. */ body:has(.mobile-nav) header{height:64px!important;padding-inline:14px!important} body:has(.mobile-nav) .mobile-nav{top:72px!important;left:10px!important;right:10px!important;max-height:calc(100svh - 86px);overflow:auto;border-radius:12px} body:has(.mobile-nav) .mobile-nav a{min-height:44px;display:flex;align-items:center} body:has(.mobile-nav) footer{gap:14px!important;padding:24px 18px 88px!important} body:has(.mobile-nav) form{width:100%;max-width:100%} body:has(.mobile-nav) form input,body:has(.mobile-nav) form select,body:has(.mobile-nav) form textarea,body:has(.mobile-nav) form button{width:100%;max-width:100%} /* Barber */ body:has(.hero-image .arch) .hero{padding:104px 18px 34px!important;gap:24px!important} body:has(.hero-image .arch) .hero h1{font-size:clamp(44px,13vw,54px)!important;letter-spacing:-2.2px!important} body:has(.hero-image .arch) .hero-image{height:52svh!important;min-height:330px} body:has(.hero-image .arch) .work-grid{grid-template-columns:1fr!important} body:has(.hero-image .arch) .work-grid>div,body:has(.hero-image .arch) .w1{grid-column:auto!important;height:260px!important} /* Automotive */ body:has(.hero-architecture) .hero{min-height:720px!important} body:has(.hero-architecture) .hero-copy{left:18px!important;right:18px!important;bottom:105px!important;max-width:calc(100% - 36px)!important} body:has(.hero-architecture) .hero h1{font-size:clamp(43px,12.5vw,54px)!important;line-height:.92!important;letter-spacing:-3px!important} body:has(.hero-architecture) .ticker{padding:12px 18px!important;font-size:9px!important} body:has(.hero-architecture) .stats{grid-template-columns:repeat(3,minmax(0,1fr))!important} /* Fitness */ body:has(.motion-marquee) .hero{min-height:760px!important} body:has(.motion-marquee) .hero-copy{top:118px!important;left:18px!important;right:18px!important} body:has(.motion-marquee) .hero h1{font-size:clamp(50px,14vw,65px)!important;letter-spacing:-2px!important} body:has(.motion-marquee) .hero-stats{left:10px!important;right:10px!important;bottom:22px!important;overflow-x:auto} body:has(.motion-marquee) .hero-stats div{flex:1 0 100px;padding-inline:12px!important} /* Hotel */ body:has(.availability) .hero{min-height:760px!important;padding:105px 18px 176px!important} body:has(.availability) .hero h1{font-size:clamp(44px,13vw,57px)!important;letter-spacing:-2px!important} body:has(.availability) .availability{left:12px!important;right:12px!important;bottom:16px!important} body:has(.availability) .room-scroll{margin-inline:-2px!important;padding-right:18px!important} body:has(.availability) .room-scroll article{flex-basis:82%!important} /* Local cleaning */ body:has(.quote-estimator) .hero-left{padding:102px 18px 52px!important} body:has(.quote-estimator) .hero h1{font-size:clamp(42px,12.5vw,54px)!important;letter-spacing:-2.5px!important} body:has(.quote-estimator) .hero-right{height:370px!important} body:has(.quote-estimator) .team-card,body:has(.quote-estimator) .coverage{max-width:calc(100% - 36px);padding:13px!important} body:has(.quote-estimator) .before-after{height:330px!important} body:has(.quote-estimator) .slider-label{max-width:calc(100% - 32px);text-align:center} /* Restaurant website */ body:has(.traditional-crest) .nav{top:8px!important;left:8px!important;right:8px!important} body:has(.traditional-crest) .hero{min-height:780px!important;padding:108px 18px 184px!important} body:has(.traditional-crest) .hero h1{font-size:clamp(45px,13vw,58px)!important;letter-spacing:-2.5px!important} body:has(.traditional-crest) .hero-actions{grid-template-columns:1fr!important} body:has(.traditional-crest) .hero-meta{left:12px!important;right:12px!important;bottom:54px!important} body:has(.traditional-crest) .hero-meta div{padding:9px!important} body:has(.traditional-crest) .hero-meta span{font-size:6px!important} body:has(.traditional-crest) .special-list>div{gap:12px!important} /* Restaurant ordering app */ body:has(.order-shell) .hero{grid-template-columns:minmax(0,1fr)!important} body:has(.order-shell) .app-header{gap:7px!important} body:has(.order-shell) .brand{min-width:0} body:has(.order-shell) .brand small{white-space:normal} body:has(.order-shell) .hero h1{font-size:clamp(50px,13.4vw,64px)!important;line-height:.84!important} body:has(.order-shell) .template-hero-meta{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:0} body:has(.order-shell) .template-hero-meta>div{min-width:0!important;padding-inline:8px!important} body:has(.order-shell) .template-hero-meta span{max-width:100%!important} body:has(.order-shell) .category-bar{padding-bottom:4px;overflow-x:auto;-webkit-overflow-scrolling:touch} body:has(.order-shell) .notification-stack{grid-template-columns:1fr 1fr!important} body:has(.order-shell) .notification-stack article:last-child{grid-column:1/-1;min-height:0!important} body:has(.order-shell) .cart-panel{width:min(100%,430px)!important} body:has(.order-shell) .tracker-modal{align-items:start!important;padding-top:12px!important} /* Shared booking apps */ body:has(.booking-section) .app-header{gap:8px!important} body:has(.booking-section) .brand{min-width:0} body:has(.booking-section) .brand small{white-space:normal} body:has(.booking-section) .hero{min-height:680px!important;padding:132px 18px 54px!important} body:has(.booking-section) .hero h1{font-size:clamp(48px,13vw,62px)!important;line-height:.88!important;letter-spacing:-2.5px!important} body:has(.booking-section) .hero-stats{gap:0!important;overflow-x:auto} body:has(.booking-section) .hero-stats>div{min-width:76px!important;padding-inline:9px!important} body:has(.booking-section) .choice{padding:12px!important} body:has(.booking-section) .dashboard-details{grid-template-columns:86px minmax(0,1fr)!important;gap:8px!important} } @media (max-width:380px){ body:has(.nav-center) .hero h1{font-size:31px!important} body:has(.nav-center) .stats span{font-size:6px!important;letter-spacing:.25px!important} body:has(.hero-architecture) .hero h1,body:has(.traditional-crest) .hero h1{font-size:42px!important} body:has(.order-shell) .hero{padding-inline:18px!important} body:has(.order-shell) .template-hero-meta b{font-size:16px!important} body:has(.booking-section) .people-grid,body:has(.booking-section) .time-grid{grid-template-columns:1fr 1fr!important} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* ------------------------------------------------------------------------- MOBILE EXPERIENCE — final phone composition This layer deliberately lives behind a phone-only breakpoint. Desktop is left exactly as designed; phones get a shorter, touch-first composition. ------------------------------------------------------------------------- */ @media (max-width:760px){ :root{--phone-gutter:17px} html{scroll-padding-top:78px} body{overflow-x:clip!important;-webkit-tap-highlight-color:transparent} a,button,select,input,textarea{touch-action:manipulation} /* Keep the Studio landing page cinematic without asking a visitor to scroll through a large empty hero area before seeing the demos. */ body:has(.nav-center) .hero{ min-height:560px!important; padding:94px var(--phone-gutter) 34px!important; background-size:auto 410px!important; /* The left crop stays calm for copy; the SRB mark remains a visual, not something text sits on top of. */ background-position:100% 78px!important; } body:has(.nav-center) .hero:before{ background: linear-gradient(90deg,#02050b 0%,#02050b 72%,rgba(2,5,11,.77) 84%,rgba(2,5,11,.14) 100%), linear-gradient(180deg,rgba(2,5,11,.24),rgba(2,5,11,.05) 48%,rgba(2,5,11,.88) 100%)!important; } body:has(.nav-center) .hero:after{ display:block!important; z-index:2!important; width:66vw!important; height:66vw!important; right:-37vw!important; top:122px!important; border:1px solid rgba(224,194,129,.17)!important; background:radial-gradient(circle,rgba(221,190,126,.10),transparent 62%)!important; filter:none!important; opacity:1!important; animation:phoneHeroHalo 8s ease-in-out infinite alternate!important; pointer-events:none; } /* Keep the real SRB Studio atelier visible on the right. The actual background is intentionally cropped on the left, so the copy has its own clear surface instead of sitting on top of the SRB mark. */ body:has(.nav-center) .hero-art{ position:absolute!important; z-index:3!important; inset:86px -4px 0 51%!important; width:auto!important; height:auto!important; margin:0!important; display:block!important; background:url('assets/brand/srb-atelier-hero-v3.png') 84% 56%/auto 67% no-repeat!important; opacity:.96!important; /* A long feather joins the real atelier photo to the reading area. It avoids the hard vertical crop that looked like an extra graphic. */ mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.48) 26%,#000 48%,#000 100%)!important; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.48) 26%,#000 48%,#000 100%)!important; pointer-events:none!important; } body:has(.nav-center) .hero-art .wall-rain{display:none!important} @keyframes phoneHeroHalo{to{transform:translate(-12px,14px) scale(1.08);opacity:.58}} /* On the smaller composition the desktop grid reads as a stray box behind the copy, so the original studio photograph carries the first screen. */ body:has(.nav-center) .hero-grid{display:none!important} body:has(.nav-center) .hero-copy{max-width:61%!important;margin-top:54px!important} body:has(.nav-center) .eyebrow{ max-width:25ch!important; font-size:7.6px!important; line-height:1.35!important; letter-spacing:1.15px!important; } body:has(.nav-center) .hero h1{ max-width:10.2ch!important; font-size:clamp(31px,8.3vw,36px)!important; line-height:.98!important; letter-spacing:-1.45px!important; } body:has(.nav-center) .hero-bottom p{max-width:22ch!important;font-size:13px!important;line-height:1.53!important} body:has(.nav-center) .hero-bottom a{margin-top:18px!important;font-size:10px!important} body:has(.nav-center) .demo-showcase{padding-bottom:34px!important} body:has(.nav-center) .demo-intro{top:auto!important;bottom:auto!important;position:relative!important;left:auto!important;right:auto!important;margin:0 var(--phone-gutter) 10px!important;padding-top:19px!important} body:has(.nav-center) .hero-demo-deck{ position:relative!important; top:auto!important; left:auto!important; right:auto!important; bottom:auto!important; width:calc(100% - (var(--phone-gutter) * 2))!important; margin:0 var(--phone-gutter)!important; border-radius:16px!important; } body:has(.nav-center) .deck-card{min-height:116px!important;padding:12px 10px!important} body:has(.nav-center) .deck-card b{font-size:12px!important;line-height:1.08!important} body:has(.nav-center) .deck-card small{font-size:6.3px!important;letter-spacing:.7px!important} body:has(.nav-center) .restaurant-system{margin-top:15px!important;padding-top:43px!important;padding-bottom:24px!important} body:has(.nav-center) .restaurant-system-stage.restaurant-order-story{min-height:494px!important} body:has(.nav-center) .restaurant-system-story{gap:18px!important;margin-top:22px!important} body:has(.nav-center) .restaurant-system-story p{font-size:15px!important;line-height:1.46!important} body:has(.nav-center) .restaurant-system-story b{font-size:19px!important} body:has(.nav-center) .services{padding-top:48px!important;padding-bottom:58px!important} body:has(.nav-center) .brand-graphics{padding-top:58px!important;padding-bottom:58px!important} body:has(.nav-center) .materials-head{margin-bottom:30px!important} body:has(.nav-center) .materials-layout{gap:30px!important} body:has(.nav-center) .materials-stage{min-height:342px!important} body:has(.nav-center) .materials-stage-surface{min-height:278px!important} body:has(.nav-center) .material-piece{height:278px!important} body:has(.nav-center) .atelier-material{height:278px!important} body:has(.nav-center) .materials-note{margin-top:19px!important;font-size:12px!important;line-height:1.5!important} body:has(.nav-center) .pricing{padding-top:58px!important;padding-bottom:58px!important} body:has(.nav-center) .statement{padding-top:58px!important;padding-bottom:58px!important} body:has(.nav-center) .contact{padding-top:58px!important;padding-bottom:76px!important} /* On a touch screen, the materials list is a real tap control—not a desktop-only hover instruction. */ body:has(.nav-center) .materials-note{font-size:0!important} body:has(.nav-center) .materials-note:after{content:'Tap a line to explore each creative direction.';font-size:12px!important} body:has(.nav-center) .material-choice{min-height:76px!important;padding-block:13px!important} body:has(.nav-center) .material-choice>b{font-size:18px!important;line-height:1.1!important} body:has(.nav-center) .material-choice>small{font-size:10px!important;line-height:1.4!important} /* A compact, edge-aligned switcher keeps the website/app shortcut useful while never sitting across the booking or order content. */ .experience-switcher{ left:auto!important; right:10px!important; bottom:68px!important; display:grid!important; place-items:center!important; width:52px!important; min-width:52px!important; height:52px!important; padding:0!important; border-radius:16px 16px 4px 16px!important; box-shadow:0 12px 28px rgba(0,0,0,.38),inset 0 1px rgba(255,237,201,.1)!important; } .experience-switcher-kicker,.experience-switcher>b{display:none!important} .experience-switcher a{display:grid!important;place-items:center!important;width:100%!important;height:100%!important;font-size:0!important;text-decoration:none!important} .experience-switcher a:before{content:'APP';font:700 8px/1 "DM Sans",Arial,sans-serif;letter-spacing:.45px;color:#efd18d} .experience-switcher.app-theme a:before{content:'WEB'} .experience-switcher a span{display:none!important} .experience-switcher-close{right:5px!important;top:5px!important;width:20px!important;height:20px!important;font-size:15px!important} .experience-choice-popover{ left:10px!important; right:10px!important; top:auto!important; bottom:10px!important; width:auto!important; max-height:calc(100svh - 20px)!important; overflow:auto!important; border-radius:16px 16px 5px 16px!important; } /* Every booking / ordering app keeps controls generously touch-sized and its animated customer journey visible at the narrowest common width. */ body:has(.order-shell) .app-header, body:has(.booking-section) .app-header{min-height:70px!important;padding-inline:12px!important} body:has(.order-shell) .header-actions, body:has(.booking-section) .header-actions{gap:8px!important} body:has(.order-shell) .language select, body:has(.booking-section) .language select{min-height:42px!important;padding-inline:11px!important} body:has(.order-shell) .cart-trigger, body:has(.booking-section) .header-action{min-height:42px!important;padding-inline:12px!important} body:has(.order-shell) .hero{min-height:735px!important;padding:126px 20px 34px!important} body:has(.order-shell) .hero-copy{max-width:100%!important} body:has(.order-shell) .hero h1{font-size:clamp(46px,12.5vw,57px)!important;max-width:330px!important} body:has(.order-shell) .hero-text{max-width:330px!important;font-size:14px!important;line-height:1.58!important} body:has(.order-shell) .gold-button, body:has(.booking-section) .primary-button{min-height:52px!important;padding-inline:20px!important} body:has(.order-shell) .order-shell, body:has(.booking-section) .booking-section{padding-inline:14px!important} body:has(.order-shell) .order-heading, body:has(.booking-section) .section-heading{gap:15px!important} body:has(.order-shell) .menu-grid{grid-template-columns:1fr!important;gap:13px!important} body:has(.order-shell) .menu-card{min-height:176px!important} body:has(.order-shell) .cart-panel{width:100%!important;max-width:none!important} body:has(.order-shell) .tracker-card{max-height:calc(100svh - 20px)!important;overflow-y:auto!important} body:has(.order-shell) .tracker-map{min-height:190px!important} body:has(.booking-section) .hero{min-height:630px!important;padding:112px 18px 36px!important} body:has(.booking-section) .hero-copy{max-width:100%!important} body:has(.booking-section) .hero h1{font-size:clamp(44px,12vw,55px)!important;max-width:9ch!important} body:has(.booking-section) .hero-copy>p:not(.kicker){max-width:326px!important;font-size:14px!important;line-height:1.55!important} body:has(.booking-section) .booking-layout{gap:15px!important} body:has(.booking-section) .journey-panel, body:has(.booking-section) .booking-summary, body:has(.booking-section) .booking-form{border-radius:15px!important} body:has(.booking-section) .choice-grid{grid-template-columns:1fr!important} body:has(.booking-section) .people-grid, body:has(.booking-section) .time-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} body:has(.booking-section) .choice{min-height:74px!important} body:has(.booking-section) .team-dashboard, body:has(.booking-section) .service-proof{padding-inline:18px!important} /* The business concept websites keep their photo, header and action readable above the fold, with cards becoming clean single-column stacks. */ body:has(.mobile-nav) .hero{min-height:650px!important} body:has(.mobile-nav) .hero-copy{max-width:min(100%,350px)!important} body:has(.mobile-nav) .hero h1{line-height:.91!important} body:has(.mobile-nav) .section{padding:62px 18px!important} body:has(.mobile-nav) .section-head{margin-bottom:35px!important} body:has(.mobile-nav) .section-head h2{font-size:clamp(38px,10.5vw,47px)!important;letter-spacing:-1.8px!important} body:has(.mobile-nav) .feature-strip{grid-template-columns:1fr 1fr!important} body:has(.mobile-nav) .feature-strip>div{min-height:90px!important} body:has(.mobile-nav) .review-grid{gap:12px!important} body:has(.mobile-nav) blockquote{padding:23px!important;font-size:23px!important} } @media (max-width:390px){ body:has(.nav-center) .hero{min-height:550px!important;background-size:auto 392px!important;background-position:100% 79px!important} body:has(.nav-center) .hero-art{inset:83px -5px 0 50%!important;background-position:84% 56%!important;background-size:auto 67%!important} body:has(.nav-center) .hero-copy{max-width:64%!important} body:has(.nav-center) .hero h1{font-size:32px!important} body:has(.nav-center) .deck-card{min-height:108px!important;padding:10px 8px!important} body:has(.nav-center) .deck-card b{font-size:10.5px!important} body:has(.nav-center) .restaurant-system-stage.restaurant-order-story{min-height:476px!important} body:has(.order-shell) .hero h1{font-size:44px!important} body:has(.booking-section) .hero h1{font-size:42px!important} } /* Some mobile browsers report a 768–900px CSS width in portrait mode. Keep this as a compact mobile composition too: it removes the empty 100vh tail before the demo cards without changing desktop or landscape layouts. */ @media (min-width:761px) and (max-width:1000px) and (orientation:portrait){ body:has(.nav-center) .hero{ min-height:650px!important; padding:112px clamp(26px,5vw,46px) 34px!important; align-items:center!important; } body:has(.nav-center) .hero-copy{ max-width:min(54%,455px)!important; margin-top:0!important; } body:has(.nav-center) .eyebrow{ max-width:30ch!important; gap:8px!important; font-size:8px!important; line-height:1.35!important; letter-spacing:1.28px!important; } body:has(.nav-center) .hero h1{ max-width:10ch!important; margin:17px 0 18px!important; font-size:clamp(46px,6vw,52px)!important; line-height:.95!important; letter-spacing:-2.6px!important; } body:has(.nav-center) .hero-bottom{display:block!important;max-width:31ch!important} body:has(.nav-center) .hero-bottom p{max-width:31ch!important;font-size:13px!important;line-height:1.54!important} body:has(.nav-center) .hero-bottom a{display:inline-block!important;margin-top:15px!important;font-size:9px!important} body:has(.nav-center) .demo-showcase{margin-top:0!important;padding-top:0!important} } /* Final mobile hero composition: use one uninterrupted crop of the same atelier photograph as desktop. The empty left side becomes the reading area; the SRB wall remains naturally visible on the right. */ @media (max-width:1000px) and (orientation:portrait){ body:has(.nav-center) .hero{ background-image:url('assets/brand/srb-atelier-hero-v3.png')!important; background-size:auto 100%!important; /* Keep the full SRB mark inside the phone frame instead of enlarging it past the edge; the dark canvas around it is part of the composition. */ background-size:auto 62%!important; background-position:66% center!important; } body:has(.nav-center) .hero:before{ background:linear-gradient(90deg,rgba(2,5,11,.98) 0%,rgba(2,5,11,.94) 47%,rgba(2,5,11,.70) 58%,rgba(2,5,11,.19) 78%,rgba(2,5,11,.03) 100%)!important; } body:has(.nav-center) .hero:after{display:none!important} body:has(.nav-center) .hero-art{display:none!important} } /* A tablet portrait has enough room for a larger version of the same single photograph, so retain the desktop-like scale without changing desktop. */ @media (min-width:761px) and (max-width:1000px) and (orientation:portrait){ body:has(.nav-center) .hero{ background-size:auto 92%!important; background-position:60% center!important; } /* The restaurant reservation card used a desktop width at this exact portrait breakpoint, creating a small horizontal overflow. */ body:has(.traditional-crest) .reserve-content{ width:calc(100% - 40px)!important; max-width:calc(100% - 40px)!important; margin-inline:auto!important; } } /* ------------------------------------------------------------------------- MOBILE REPAIR — compact, alive, and without decorative "click" arrows. This is deliberately the final mobile-only layer: it resolves the earlier experimental phone rules without touching the approved desktop composition. ------------------------------------------------------------------------- */ @media (max-width:760px){ /* Keep the call-to-action as plain, readable wording. The small diagonal arrow was making the header and demo cards feel like generic AI controls. */ body:has(.nav-center) .nav-cta{ display:inline-flex!important; align-items:center!important; min-height:38px!important; padding:0 12px!important; font-size:10px!important; line-height:1!important; } body:has(.nav-center) .nav-cta:before{content:none!important;display:none!important} body:has(.nav-center) .nav-cta span, body:has(.nav-center) .deck-arrow, body:has(.nav-center) .brand-graphics .graphic-card:after{display:none!important} body:has(.nav-center) .deck-card{grid-template-columns:21px minmax(0,1fr)!important} /* First screen: one compact frame with the real atelier photo, a subtle moving grid and a quiet light pulse—not a static Word-style cover. */ body:has(.nav-center) .hero{ min-height:526px!important; padding:88px var(--phone-gutter) 30px!important; background-size:auto 84%!important; background-position:67% 53%!important; } body:has(.nav-center) .hero-grid{ display:block!important; z-index:2!important; opacity:.16!important; background-size:34px 34px!important; animation:phoneGridDrift 18s linear infinite!important; } body:has(.nav-center) .hero:after{ display:block!important; z-index:2!important; width:42vw!important; height:42vw!important; right:-20vw!important; top:155px!important; border:1px solid rgba(224,194,129,.18)!important; background:radial-gradient(circle,rgba(221,190,126,.12),transparent 67%)!important; filter:none!important; opacity:.82!important; animation:phoneStudioGlow 6.8s ease-in-out infinite alternate!important; } body:has(.nav-center) .hero-copy{max-width:62%!important;margin-top:40px!important} body:has(.nav-center) .hero h1{max-width:9.8ch!important;font-size:clamp(32px,8.8vw,37px)!important} body:has(.nav-center) .hero-bottom p{max-width:21ch!important;font-size:12.5px!important;line-height:1.52!important} body:has(.nav-center) .hero-bottom a b{display:inline-block!important;animation:phoneScrollNudge 1.7s ease-in-out infinite!important} /* Demos stay easy to scan, but now have a small live glow rather than looking like a long list of inert boxes. */ body:has(.nav-center) .demo-showcase{padding-bottom:38px!important} body:has(.nav-center) .deck-card{min-height:112px!important;animation:phoneDeckGlow 6s ease-in-out infinite!important} body:has(.nav-center) .deck-card:nth-child(2){animation-delay:-1s!important} body:has(.nav-center) .deck-card:nth-child(3){animation-delay:-2s!important} body:has(.nav-center) .deck-card:nth-child(4){animation-delay:-3s!important} body:has(.nav-center) .deck-card:nth-child(5){animation-delay:-4s!important} body:has(.nav-center) .deck-card:nth-child(6){animation-delay:-5s!important} /* Use swipe rails for visual work and pricing. This removes several long full-height blocks while preserving every example and package. */ body:has(.nav-center) .brand-graphics, body:has(.nav-center) .pricing{padding-top:48px!important;padding-bottom:50px!important} body:has(.nav-center) .brand-graphics .graphics-grid, body:has(.nav-center) .price-grid{ display:flex!important; width:calc(100% + var(--phone-gutter))!important; height:auto!important; min-height:0!important; gap:12px!important; margin-right:calc(var(--phone-gutter) * -1)!important; padding:9px var(--phone-gutter) 17px 0!important; overflow-x:auto!important; overflow-y:visible!important; scroll-snap-type:x mandatory!important; scrollbar-width:none!important; } body:has(.nav-center) .brand-graphics .graphics-grid::-webkit-scrollbar, body:has(.nav-center) .price-grid::-webkit-scrollbar{display:none!important} body:has(.nav-center) .brand-graphics .graphic-card{ flex:0 0 min(78vw,290px)!important; width:min(78vw,290px)!important; min-height:322px!important; height:322px!important; scroll-snap-align:start!important; pointer-events:auto!important; } body:has(.nav-center) .brand-graphics .menu-real, body:has(.nav-center) .brand-graphics .flyer-real, body:has(.nav-center) .brand-graphics .social-mock{height:220px!important;margin-top:14px!important} body:has(.nav-center) .price-grid article{ flex:0 0 min(80vw,306px)!important; min-height:412px!important; scroll-snap-align:start!important; } body:has(.nav-center) .price-grid article>p{min-height:0!important} body:has(.nav-center) .price-grid ul{margin:18px 0!important} /* Restore movement in the operation example and the content system in a battery-friendly way. */ body:has(.nav-center) .materials-stage:before{animation:phoneMaterialsGlow 7s ease-in-out infinite alternate!important} body:has(.nav-center) .restaurant-order-story .order-customer-card{animation:phoneOrderFloat 5.8s ease-in-out infinite!important} body:has(.nav-center) .restaurant-order-story .kitchen-ticket{animation:phoneTicketFeed 5.8s ease-in-out infinite!important} body:has(.nav-center) .team-signal:before{animation:teamSignalA 7s ease-in-out infinite alternate!important} body:has(.nav-center) .team-signal:after{animation:teamSignalB 5.5s ease-in-out infinite alternate!important} body:has(.nav-center) .statement, body:has(.nav-center) .services, body:has(.nav-center) .contact{padding-top:54px!important;padding-bottom:58px!important} /* The six live websites and apps keep a visible, gentle motion cue too. */ body:has(.mobile-nav) .hero:before, body:has(.order-shell) .hero:before, body:has(.booking-section) .hero:before{animation:phoneSurfaceShift 8s ease-in-out infinite alternate!important} @keyframes phoneGridDrift{to{background-position:34px 34px}} @keyframes phoneStudioGlow{to{transform:translate(-10px,10px) scale(1.12);opacity:.38}} @keyframes phoneScrollNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} @keyframes phoneDeckGlow{0%,100%{border-color:rgba(220,229,239,.17);box-shadow:inset 0 1px rgba(255,255,255,.06),0 12px 24px rgba(0,0,0,.16)}50%{border-color:color-mix(in srgb,var(--deck) 62%,white);box-shadow:inset 0 1px rgba(255,255,255,.11),0 18px 30px rgba(0,0,0,.23)}} @keyframes phoneMaterialsGlow{to{transform:scale(1.08);opacity:.55}} @keyframes phoneOrderFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} @keyframes phoneTicketFeed{0%,18%,100%{transform:translateY(0)}35%,48%{transform:translateY(8px)}} @keyframes phoneSurfaceShift{0%{opacity:.78}100%{opacity:1}} } /* Phone motion pass for every live project. The original desktop art stays in place; these are compact, low-key movements so the mobile versions feel like working sites instead of a long static document. */ @media (max-width:760px){ /* Keep individual demo home screens short enough to reach the real content quickly, while leaving enough height for the text and the artwork. */ body:has(.traditional-crest) .hero{min-height:650px!important;padding-bottom:148px!important} body:has(.hero-image .arch) .hero{min-height:610px!important;padding-top:88px!important} body:has(.hero-image .arch) .hero-image{min-height:300px!important;height:42svh!important} body:has(.hero-architecture) .hero{min-height:620px!important} body:has(.motion-marquee) .hero{min-height:640px!important} body:has(.availability) .hero{min-height:630px!important;padding-bottom:146px!important} body:has(.quote-estimator) .hero-left{padding-top:86px!important;padding-bottom:36px!important} body:has(.quote-estimator) .hero-right{height:322px!important} body:has(.order-shell) .hero{min-height:650px!important;padding-top:102px!important} body:has(.booking-section) .hero{min-height:570px!important;padding-top:104px!important;padding-bottom:38px!important} /* A short visual loop belongs to every concept—never a large spinning novelty and never an arrow that pretends the whole card is a button. */ body:has(.traditional-crest) .hero-overlay{animation:phoneRestaurantAtmosphere 8s ease-in-out infinite alternate!important} body:has(.traditional-crest) .hero-meta{animation:phoneMetaLift 5.5s ease-in-out infinite!important} body:has(.hero-image .arch) .hero-image .arch{animation:phoneArchBreathe 7s ease-in-out infinite alternate!important} body:has(.hero-architecture) .hero-architecture{animation:phoneArchitectureDrift 11s ease-in-out infinite alternate!important} body:has(.motion-marquee){animation:phoneMarqueePulse 6s linear infinite!important} body:has(.availability) .availability{animation:phoneAvailabilityLift 5s ease-in-out infinite!important} body:has(.quote-estimator) .team-card, body:has(.estimator-card) .team-card{animation:phoneInfoLift 5.2s ease-in-out infinite!important} body:has(.quote-estimator) .coverage, body:has(.estimator-card) .coverage{animation:phoneInfoLift 5.2s ease-in-out -2.4s infinite!important} body:has(.estimator-card) .hero-left>span{display:inline-block!important;animation:phoneKickerBreath 3.8s ease-in-out infinite!important} body:has(.order-shell) .food-orbit{animation:phoneFoodOrbit 12s linear infinite!important} body:has(.order-shell) .hero-dish{animation:phoneDishFloat 6s ease-in-out infinite!important} body:has(.booking-section) .hero-media{animation:phoneServiceMedia 10s ease-in-out infinite alternate!important} body:has(.booking-section) .hero-stats{animation:phoneMetaLift 5.5s ease-in-out infinite!important} /* Make below-the-fold pages read as grouped experiences rather than an endless stack. These selectors only target the six individual sites. */ body:has(.hero-image .arch) .services, body:has(.hero-image .arch) .studio, body:has(.hero-image .arch) .work, body:has(.hero-architecture) .stock, body:has(.hero-architecture) .showroom, body:has(.hero-architecture) .finance, body:has(.motion-marquee) .classes, body:has(.motion-marquee) .coaching, body:has(.motion-marquee) .join, body:has(.availability) .rooms, body:has(.availability) .story, body:has(.availability) .booking, body:has(.quote-estimator) .services, body:has(.quote-estimator) .proof, body:has(.quote-estimator) .work, body:has(.quote-estimator) .estimator{padding-top:48px!important;padding-bottom:48px!important} @keyframes phoneRestaurantAtmosphere{to{opacity:.7;filter:saturate(1.08)}} @keyframes phoneMetaLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @keyframes phoneArchBreathe{to{transform:scale(1.035) translateY(-4px)}} @keyframes phoneArchitectureDrift{to{transform:scale(1.025) translateX(-6px);filter:brightness(1.08)}} @keyframes phoneMarqueePulse{0%,100%{opacity:.74;transform:translateX(0)}50%{opacity:1;transform:translateX(-14px)}} @keyframes phoneAvailabilityLift{0%,100%{transform:translateY(0);box-shadow:0 14px 30px rgba(0,0,0,.16)}50%{transform:translateY(-4px);box-shadow:0 20px 36px rgba(0,0,0,.25)}} @keyframes phoneInfoLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} @keyframes phoneKickerBreath{0%,100%{opacity:.62;transform:translateX(0)}50%{opacity:1;transform:translateX(4px)}} @keyframes phoneFoodOrbit{to{transform:rotate(360deg)}} @keyframes phoneDishFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}} @keyframes phoneServiceMedia{to{transform:scale(1.045);filter:brightness(1.08)}} } /* MOBILE SERVICES + ORBITS — the services become a compact swipe rail like pricing, while both visual systems show unmistakable live movement. */ @media (max-width:760px){ body:has(.nav-center) .system-map{display:block!important;width:252px!important;height:202px!important;margin:24px auto 4px!important;transform-origin:50% 48%!important;animation:phoneSystemHover 5.8s ease-in-out infinite!important} body:has(.nav-center) .system-map svg{height:178px!important;transform-origin:50% 50%!important;animation:phoneSystemTurn 16s linear infinite!important} body:has(.nav-center) .system-map path{animation:phoneMapDash 7.5s linear infinite!important} body:has(.nav-center) .system-map circle{transform-box:fill-box!important;transform-origin:center!important;animation:phoneMapNode 2.4s ease-in-out infinite alternate!important} body:has(.nav-center) .system-map circle:nth-of-type(2){animation-delay:-.45s!important} body:has(.nav-center) .system-map circle:nth-of-type(3){animation-delay:-.9s!important} body:has(.nav-center) .system-map circle:nth-of-type(4){animation-delay:-1.35s!important} body:has(.nav-center) .system-map circle:nth-of-type(5){animation-delay:-1.8s!important} body:has(.nav-center) .contact-orbit{animation:phoneContactHover 5.5s ease-in-out infinite!important} body:has(.nav-center) .contact-orbit:before{animation:phoneContactRingOne 7.5s linear infinite!important} body:has(.nav-center) .contact-orbit:after{animation:phoneContactRingTwo 6.2s linear infinite reverse!important} body:has(.nav-center) .contact-orbit i:first-child{animation:phoneContactRingThree 9s linear infinite!important} body:has(.nav-center) .contact-orbit i:last-child{animation:phoneContactDot 4.1s ease-in-out infinite alternate!important} body:has(.nav-center) .services{display:block!important;padding-top:54px!important;padding-bottom:54px!important} body:has(.nav-center) .services-title{max-width:100%!important} body:has(.nav-center) .services-title h2{max-width:10ch!important;margin-bottom:0!important} body:has(.nav-center) .service-list{display:flex!important;width:calc(100% + var(--phone-gutter))!important;margin:27px calc(var(--phone-gutter) * -1) 0 0!important;padding:0 var(--phone-gutter) 16px 0!important;gap:12px!important;overflow-x:auto!important;overflow-y:visible!important;scroll-snap-type:x mandatory!important;border:0!important;scrollbar-width:none!important} body:has(.nav-center) .service-list::-webkit-scrollbar{display:none!important} body:has(.nav-center) .service-list article.service-item{flex:0 0 min(79vw,305px)!important;min-height:250px!important;padding:0!important;overflow:hidden!important;border:1px solid rgba(210,222,230,.16)!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(25,32,40,.95),rgba(8,12,18,.98))!important;box-shadow:inset 0 1px rgba(255,255,255,.05),0 14px 28px rgba(0,0,0,.17)!important;scroll-snap-align:start!important} body:has(.nav-center) .service-item>button{display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;gap:10px!important;align-content:start!important;min-height:0!important;padding:20px 18px 10px!important;pointer-events:none!important} body:has(.nav-center) .service-item>button span{font-size:9px!important;padding-top:3px!important} body:has(.nav-center) .service-item>button h3{font-size:22px!important;line-height:1.04!important} body:has(.nav-center) .service-item>button p{grid-column:1/-1!important;margin:7px 0 0 38px!important;font-size:12px!important;line-height:1.55!important} body:has(.nav-center) .service-item>button b{display:none!important} body:has(.nav-center) .service-detail{display:block!important;max-height:none!important;min-height:0!important;opacity:1!important;padding:10px 18px 20px 56px!important;overflow:visible!important;border:0!important} body:has(.nav-center) .service-detail p{display:none!important} body:has(.nav-center) .service-detail a{display:inline-block!important;font-size:10px!important;letter-spacing:.1px!important} @keyframes phoneSystemHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes phoneSystemTurn{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(1.8deg) scale(1.025)}} @keyframes phoneMapDash{to{stroke-dashoffset:-56}} @keyframes phoneMapNode{to{transform:scale(1.42);filter:drop-shadow(0 0 12px rgba(220,188,119,.95))}} @keyframes phoneContactHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes phoneContactRingOne{to{transform:translate(-50%,-50%) rotate(348deg)}} @keyframes phoneContactRingTwo{to{transform:translate(-50%,-50%) rotate(395deg)}} @keyframes phoneContactRingThree{to{transform:translate(-50%,-50%) rotate(418deg)}} @keyframes phoneContactDot{to{transform:translate(90px,-38px) scale(1.25)}} } /* Remove generic AI-style action glyphs from portfolio columns. Direct web and app buttons remain, so the demos are still just as easy to open. */ body:has(.nav-center) .nav-cta span, body:has(.nav-center) .deck-arrow, body:has(.nav-center) .app-demo-link b, body:has(.nav-center) .restaurant-system-actions b, body:has(.nav-center) .contact form button span, body:has(.nav-center) .price-grid a i{display:none!important} body:has(.nav-center) .deck-card{grid-template-columns:18px minmax(0,1fr)!important} body:has(.nav-center) .service-item>button{grid-template-columns:45px 1fr 1fr!important} body:has(.nav-center) .service-item>button b{display:none!important} @media (max-width:760px){body:has(.nav-center) .service-item>button{grid-template-columns:28px minmax(0,1fr)!important}} /* ------------------------------------------------------------------------- MOBILE COMPOSITION REFINEMENT — photograph, services and materials ------------------------------------------------------------------------- */ @media (max-width:760px){ /* Keep the full SRB Studio mark inside the first-screen crop. The left side of the photograph stays dark for readable copy, while the right side now uses the complete logo wall rather than cutting off “STUDIO”. */ body:has(.nav-center) .hero{ min-height:538px!important; background-size:auto 72%!important; background-position:100% 57%!important; } body:has(.nav-center) .hero:before{ background: linear-gradient(90deg,#02050b 0%,#02050b 46%,rgba(2,5,11,.93) 60%,rgba(2,5,11,.52) 78%,rgba(2,5,11,.10) 100%), linear-gradient(180deg,rgba(2,5,11,.20),rgba(2,5,11,.06) 48%,rgba(2,5,11,.84) 100%)!important; } body:has(.nav-center) .hero-copy{max-width:61%!important;margin-top:37px!important} body:has(.nav-center) .hero h1{max-width:9.2ch!important;font-size:clamp(31px,8.55vw,36px)!important} body:has(.nav-center) .hero-bottom p{max-width:20.5ch!important} /* The Services rail is now a compact gallery of useful panels instead of large empty cards. Each panel gets a different, quiet visual texture, while the real destination stays readable and touch friendly. */ body:has(.nav-center) .service-list{ gap:13px!important; margin-top:23px!important; padding-bottom:20px!important; } body:has(.nav-center) .service-list article.service-item{ position:relative!important; flex-basis:min(78vw,294px)!important; min-height:212px!important; border-radius:18px!important; background: radial-gradient(circle at 88% 16%,rgba(215,183,112,.18),transparent 24%), linear-gradient(148deg,rgba(29,38,47,.98),rgba(8,13,19,.98))!important; box-shadow:inset 0 1px rgba(255,255,255,.07),0 16px 34px rgba(0,0,0,.22)!important; } body:has(.nav-center) .service-list article.service-item:before{ content:''!important; position:absolute!important; right:17px!important; top:17px!important; width:74px!important; height:58px!important; border:1px solid rgba(222,230,233,.20)!important; border-radius:11px!important; background: linear-gradient(90deg,transparent 0 30%,rgba(218,187,115,.42) 30% 32%,transparent 32% 67%,rgba(218,187,115,.24) 67% 69%,transparent 69%), linear-gradient(180deg,transparent 0 39%,rgba(222,230,233,.17) 39% 41%,transparent 41% 70%,rgba(222,230,233,.11) 70% 72%,transparent 72%)!important; box-shadow:10px 10px 0 -9px rgba(214,183,111,.76),inset 0 0 26px rgba(214,183,111,.04)!important; opacity:.92!important; } body:has(.nav-center) .service-list article.service-item:after{ content:''!important; position:absolute!important; left:18px!important; right:18px!important; bottom:14px!important; height:2px!important; background:linear-gradient(90deg,#d6b76f 0 30%,rgba(214,183,111,.20) 30% 68%,rgba(214,183,111,.06) 68%)!important; } body:has(.nav-center) .service-list article.service-item:nth-child(2){background:radial-gradient(circle at 84% 18%,rgba(87,173,134,.22),transparent 26%),linear-gradient(148deg,rgba(20,43,39,.98),rgba(7,16,16,.98))!important} body:has(.nav-center) .service-list article.service-item:nth-child(2):before{border-radius:50% 50% 10px 10px!important;transform:rotate(-9deg)!important} body:has(.nav-center) .service-list article.service-item:nth-child(3){background:radial-gradient(circle at 86% 15%,rgba(157,189,202,.18),transparent 25%),linear-gradient(148deg,rgba(27,34,44,.98),rgba(8,11,16,.98))!important} body:has(.nav-center) .service-list article.service-item:nth-child(3):before{border-radius:28px 7px 28px 7px!important;transform:rotate(7deg)!important} body:has(.nav-center) .service-list article.service-item:nth-child(4){background:radial-gradient(circle at 87% 17%,rgba(111,166,119,.20),transparent 26%),linear-gradient(148deg,rgba(19,39,29,.98),rgba(6,13,10,.98))!important} body:has(.nav-center) .service-list article.service-item:nth-child(5){background:radial-gradient(circle at 87% 15%,rgba(224,158,95,.19),transparent 25%),linear-gradient(148deg,rgba(42,31,29,.98),rgba(13,10,11,.98))!important} body:has(.nav-center) .service-list article.service-item:nth-child(6){background:radial-gradient(circle at 87% 15%,rgba(104,181,161,.20),transparent 25%),linear-gradient(148deg,rgba(18,37,38,.98),rgba(7,13,15,.98))!important} body:has(.nav-center) .service-item>button{position:relative!important;z-index:2!important;padding:20px 18px 6px!important} body:has(.nav-center) .service-item>button h3{max-width:7ch!important;font-size:21px!important} body:has(.nav-center) .service-item>button p{max-width:19ch!important;margin-top:8px!important;font-size:11px!important;line-height:1.5!important} body:has(.nav-center) .service-detail{position:relative!important;z-index:2!important;padding:6px 18px 28px 56px!important} body:has(.nav-center) .service-detail:before{content:''!important;display:inline-block!important;width:34px!important;height:7px!important;margin:0 0 8px!important;background:radial-gradient(circle,#d6b76f 0 2px,transparent 2.8px) 0 0/12px 7px repeat-x!important} body:has(.nav-center) .service-detail a{display:block!important;width:max-content!important;max-width:100%!important;padding:8px 10px!important;border:1px solid rgba(218,187,115,.34)!important;border-radius:999px!important;background:rgba(3,7,10,.34)!important;color:#efd294!important;font-size:9px!important} /* Materials explain themselves before a visitor touches anything. The selected example’s title is repeated in the stage, so a flyer, menu or identity board never looks like an unexplained picture. */ body:has(.nav-center) .materials-layout{gap:18px!important} body:has(.nav-center) .materials-index{order:1!important} body:has(.nav-center) .materials-stage{order:2!important;min-height:344px!important;padding:14px!important} body:has(.nav-center) .materials-stage-top{ position:relative!important; z-index:5!important; display:grid!important; grid-template-columns:1fr!important; gap:5px!important; min-height:43px!important; padding:2px 2px 8px!important; border-bottom:1px solid rgba(222,230,233,.13)!important; } body:has(.nav-center) .materials-stage-top span{font-size:8px!important;letter-spacing:1.2px!important} body:has(.nav-center) .materials-stage-top b{max-width:100%!important;color:#e7ecea!important;text-align:left!important;font-size:11px!important;line-height:1.35!important} body:has(.nav-center) .materials-stage-surface{min-height:259px!important;padding:8px 0 0!important} body:has(.nav-center) .material-piece, body:has(.nav-center) .atelier-material{height:252px!important} body:has(.nav-center) .materials-index .material-choice{min-height:68px!important;padding:11px 2px!important} body:has(.nav-center) .materials-index .material-choice.is-active{padding-left:9px!important;background:linear-gradient(90deg,rgba(214,183,111,.16),transparent 88%)!important} body:has(.nav-center) .materials-index .material-choice>b{font-size:17px!important} body:has(.nav-center) .materials-index .material-choice>small{font-size:9px!important;line-height:1.35!important} body:has(.nav-center) .materials-note{display:none!important} } @media (max-width:390px){ body:has(.nav-center) .hero{background-size:auto 69%!important;background-position:100% 57%!important} body:has(.nav-center) .hero-copy{max-width:62%!important} body:has(.nav-center) .service-list article.service-item{flex-basis:79vw!important} } /* The hero photograph is deliberately one clean right-hand crop on phones. Separating it from the copy background means the complete SRB Studio wall can be seen without forcing the logo off the right edge. */ @media (max-width:760px){ body:has(.nav-center) .hero{background-image:none!important;background-color:#03060b!important} body:has(.nav-center) .hero-art{ display:block!important; position:absolute!important; z-index:3!important; inset:122px -2px 53px 39%!important; width:auto!important; height:auto!important; margin:0!important; background:url('assets/brand/srb-atelier-hero-v3.png') 86% 56%/auto 100% no-repeat!important; opacity:1!important; mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 19%,#000 48%,#000 100%)!important; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 19%,#000 48%,#000 100%)!important; } body:has(.nav-center) .hero-art:before, body:has(.nav-center) .hero-art:after{display:none!important} body:has(.nav-center) .hero-art .wall-rain{display:none!important} body:has(.nav-center) .hero:before{ z-index:2!important; background:linear-gradient(90deg,#02050b 0%,#02050b 42%,rgba(2,5,11,.82) 61%,rgba(2,5,11,.24) 84%,rgba(2,5,11,.02) 100%)!important; } body:has(.nav-center) .hero-copy{z-index:4!important} } /* FINAL PHONE HERO — the studio wall stays visible as one continuous scene. Copy sits comfortably below the light/frame, with no artificial grid box cutting across the headline and no empty black strip before the demos. */ @media (max-width:760px){ body:has(.nav-center) .hero{ min-height:650px!important; padding:108px var(--phone-gutter) 0!important; overflow:hidden!important; background:#03060b!important; } body:has(.nav-center) .hero-grid{display:none!important} body:has(.nav-center) .hero-art{ inset:88px -1px 0 37%!important; background-position:86% 55%!important; background-size:auto 100%!important; } body:has(.nav-center) .hero:before{ background:linear-gradient(90deg,#02050b 0%,#02050b 39%,rgba(2,5,11,.9) 61%,rgba(2,5,11,.36) 82%,rgba(2,5,11,.04) 100%)!important; } body:has(.nav-center) .hero-copy{ width:62%!important; max-width:62%!important; margin-top:58px!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; transform:none!important; } body:has(.nav-center) .hero .eyebrow{max-width:20ch!important;font-size:8px!important;line-height:1.42!important;letter-spacing:1.15px!important} body:has(.nav-center) .hero h1{max-width:8.7ch!important;margin:19px 0 17px!important;font-size:clamp(32px,8.55vw,37px)!important;line-height:.92!important;letter-spacing:-1.55px!important} body:has(.nav-center) .hero-bottom p{max-width:21ch!important;margin:0!important;font-size:13px!important;line-height:1.55!important} body:has(.nav-center) .hero-bottom a{margin-top:17px!important;font-size:10px!important} body:has(.nav-center) .demo-showcase{margin-top:0!important;padding-top:42px!important} } /* FINAL MOBILE HERO RESET ------------------------------------------------- Keep this composition deliberately simple: one real Studio photograph, a calm dark reading area and no independent grid, glow-orb or panel around the words. It is the same scene as desktop, cropped for a phone rather than rebuilt as a separate poster. */ @media (max-width:760px){ body:has(.nav-center) .hero{ min-height:640px!important; padding:94px var(--phone-gutter) 38px!important; background-color:#02050b!important; background-image:url('assets/brand/srb-atelier-hero-v3.png')!important; background-repeat:no-repeat!important; background-size:auto 560px!important; background-position:80% 68px!important; } body:has(.nav-center) .hero-grid, body:has(.nav-center) .hero-art, body:has(.nav-center) .hero:after{display:none!important} body:has(.nav-center) .hero:before{ z-index:1!important; background: linear-gradient(90deg,#02050b 0%,#02050b 43%,rgba(2,5,11,.93) 59%,rgba(2,5,11,.55) 76%,rgba(2,5,11,.08) 100%), linear-gradient(180deg,rgba(2,5,11,.76) 0%,rgba(2,5,11,.14) 28%,rgba(2,5,11,.08) 58%,rgba(2,5,11,.86) 100%)!important; } body:has(.nav-center) .hero-copy{ position:relative!important; z-index:3!important; width:min(59%,238px)!important; max-width:min(59%,238px)!important; margin-top:66px!important; padding:0!important; background:none!important; border:0!important; box-shadow:none!important; } body:has(.nav-center) .hero .eyebrow{ max-width:21ch!important; font-size:7.7px!important; line-height:1.42!important; letter-spacing:1.1px!important; } body:has(.nav-center) .hero h1{ max-width:8.8ch!important; margin:18px 0 17px!important; font-size:clamp(32px,8.7vw,37px)!important; line-height:.94!important; letter-spacing:-1.5px!important; } body:has(.nav-center) .hero-bottom p{ max-width:21ch!important; font-size:12.8px!important; line-height:1.55!important; } body:has(.nav-center) .hero-bottom a{margin-top:18px!important} body:has(.nav-center) .demo-showcase{margin-top:0!important;padding-top:34px!important} } /* MOBILE HERO BALANCE — the copy lives in the open lower-left of the real studio scene. It stays deliberately smaller than desktop so the SRB wall remains part of the first impression instead of being covered by words. */ @media (max-width:760px){ body:has(.nav-center) .hero{ min-height:604px!important; padding-bottom:24px!important; background-size:auto 548px!important; background-position:80% 56px!important; } body:has(.nav-center) .hero-copy{ width:min(54%,218px)!important; max-width:min(54%,218px)!important; margin-top:108px!important; } body:has(.nav-center) .hero .eyebrow{ max-width:23ch!important; font-size:7.2px!important; line-height:1.45!important; letter-spacing:1px!important; } body:has(.nav-center) .hero h1{ max-width:10.5ch!important; margin:14px 0 14px!important; font-size:clamp(28px,7.45vw,32px)!important; line-height:.98!important; letter-spacing:-1.25px!important; } body:has(.nav-center) .hero-bottom p{ max-width:24ch!important; font-size:11.8px!important; line-height:1.52!important; } body:has(.nav-center) .hero-bottom a{ margin-top:14px!important; font-size:9.2px!important; } body:has(.nav-center) .demo-showcase{padding-top:30px!important} } /* No empty strip between the hero call-to-action and the live demos. */ @media (max-width:760px){ body:has(.nav-center) .hero{ min-height:512px!important; padding-bottom:10px!important; } body:has(.nav-center) .demo-showcase{ margin-top:0!important; padding-top:14px!important; } body:has(.nav-center) .demo-intro{padding-top:0!important} } /* Keep the shared website/app shortcut clear of the contact dock on phones. */ @media (max-width:760px){ .experience-switcher{ right:12px!important; bottom:calc(env(safe-area-inset-bottom, 0px) + 126px)!important; width:76px!important; min-width:76px!important; height:42px!important; border-radius:999px!important; } .experience-switcher-close{display:none!important} }