/* Direction 03: approved spatial studio composition; shared forms/dialogs remain in portfolio.css. */
:root{--ink:#10151b;--paper:#eef4fa;--muted:#586572;--line:#64738040;color-scheme:light;background:#dce9f4;color:#10151b;scroll-padding-top:88px}
.spatial-site{overflow-x:clip}.spatial-site h1,.spatial-site h2,.spatial-site h3{font-family:"Work Sans",sans-serif;font-weight:650}.spatial-site .eyebrow{font-size:11px;letter-spacing:.12em;color:inherit;text-transform:uppercase}
.spatial-site .site-header{height:86px;padding:0 4.2%;background:#e8f1f6ed;color:#10151b;border-bottom:1px solid #3d4c5d22;backdrop-filter:blur(16px);z-index:40;gap:20px}.spatial-site .wordmark{gap:7px;font-size:17px;letter-spacing:-.05em;font-weight:400;white-space:nowrap}.wordmark strong{font-size:30px;line-height:1;letter-spacing:-.1em;font-weight:850}.spatial-site .site-header nav:not(#mobile-menu){display:flex;gap:34px;margin-left:auto;font-size:14px}.site-header nav span{font-size:9px;vertical-align:super;margin-left:3px}.spatial-site .site-header a{min-height:44px;display:inline-flex;align-items:center}.spatial-site .menu-button{border-color:#10151b60;color:#10151b}.spatial-site .menu-button span{background:#10151b}.spatial-site #mobile-menu{top:85px;background:#e8f1f6;color:#10151b}.spatial-site #mobile-menu a{font-size:27px;border-color:#10151b35}
.spatial-site .button{background:#10151b;color:#fff;border:1px solid #10151b;border-radius:40px;min-height:52px;padding:16px 26px;font-size:14px;font-weight:550;line-height:1.25;gap:30px;box-shadow:inset 0 1px 1px #ffffff40;transition:background .2s,transform .2s}.spatial-site .button:hover{background:#294351;transform:translateY(-2px)}.spatial-site :focus-visible{outline:3px solid #0072ce;outline-offset:5px}.spatial-site .motion-toggle{color:inherit;border:1px solid currentColor;min-height:36px;padding:7px 12px;font-size:11px;border-radius:24px;background:transparent}
.spatial-hero{position:relative;min-height:860px;height:100svh;max-height:1250px;padding:160px 4.2% 32px;display:flex;flex-direction:column;isolation:isolate;overflow:clip;background:#dce9f4}.scene-wash{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 75% 25%,#f8fbff 0%,#c7dceeff 35%,transparent 67%),linear-gradient(128deg,#dae9f2 15%,#abc5da 70%,#e4edf4)}.scene-wash:after{content:"";position:absolute;left:-10%;right:-10%;bottom:14%;height:15%;background:#ffffffa1;filter:blur(28px);transform:rotate(-5deg)}.hero-type{position:relative;z-index:2;pointer-events:none}.hero-type .eyebrow{margin:0 0 28px}.hero-type h1{font-size:clamp(68px,9.1vw,162px);line-height:.89;letter-spacing:-.075em;margin:0;font-weight:800}.hero-type h1 span{display:block}.sculpture{position:absolute;right:-5%;top:6%;width:64%;height:83%;z-index:1;pointer-events:none}.sculpture canvas{display:block;width:100%;height:100%}.sculpture-fallback{display:flex;align-items:center;justify-content:center;font-size:clamp(300px,46vw,800px);font-weight:800;line-height:1;color:#315271;transform:rotate(-12deg);text-shadow:12px 9px #bfed39,25px 20px #a4bbcd,40px 36px 40px #18314a45}.sculpture[data-ready=true] .sculpture-fallback{display:none}.hero-bottom{position:relative;z-index:3;margin-top:auto;padding-top:44px;display:flex;justify-content:space-between;align-items:end;gap:24px}.hero-bottom p{font-size:16px;line-height:1.5;margin:0;max-width:360px}.hero-rule{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.025em;border-top:1px solid #17263540;margin-top:38px;padding-top:18px;gap:20px}
.project-chapter{position:relative;padding:36px 4.2% 50px;isolation:isolate;overflow:clip;min-height:930px}.chapter-top,.chapter-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px}.chapter-top{font-size:11px;letter-spacing:.025em;position:relative;z-index:3}.chapter-word{font-weight:800;letter-spacing:-.075em;font-size:clamp(70px,14.2vw,250px);line-height:.88;white-space:nowrap;margin:50px 0 -65px;position:relative;left:-.015em;z-index:0}.graphics-chapter{color:#ecf5ed;background:radial-gradient(ellipse at 60% 85%,#273b36 0%,#080f16 65%)}.graphics-chapter .chapter-word{color:#baff37}.graphics-chapter .button{background:#c1f947;color:#0c1715;border-color:#c1f947}.graphics-chapter .button:hover{background:#defda0}.graphics-chapter .chapter-screen{box-shadow:0 55px 80px -35px #9fdb5055,0 30px 80px #000a}.chapter-screen{position:relative;width:min(76%,1100px);margin:0 auto;z-index:2;transform-origin:50% 60%;border:1px solid #a6b3bd;border-radius:12px;background:#18222c;box-shadow:0 40px 80px -30px #102d5677;overflow:hidden;will-change:transform}.screen-bar{height:32px;padding:0 15px;display:flex;justify-content:space-between;align-items:center;background:#233038;color:#d7e3ed;font-size:9px;letter-spacing:.03em}.screen-bar span:first-child{letter-spacing:3px;color:#90a1aa}.screen-window{aspect-ratio:16/10;position:relative;overflow:hidden;background:#dce9f4}.screen-window img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}.screen-window iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;pointer-events:none;transition:opacity .5s}.screen-window iframe[data-loaded=true]{opacity:1}.screen-entry{position:absolute;inset:0;z-index:4;display:flex;justify-content:center;align-items:end;padding:20px}.screen-entry span{display:flex;gap:32px;align-items:center;background:#10151bf0;color:#fff;border:1px solid #a0b4b9;border-radius:99px;font-size:13px;padding:13px 22px;opacity:0;transform:translateY(5px);transition:.2s}.screen-entry:hover span,.screen-entry:focus-visible span{opacity:1;transform:none}.chapter-bottom{position:relative;margin-top:46px;z-index:3}.chapter-bottom h2{font-size:26px;letter-spacing:-.04em;margin:0 0 8px;line-height:1.2}.chapter-bottom p{font-size:14px;margin:0;line-height:1.5}.chapter-bottom .disclosure{font-size:11px;margin-top:10px;opacity:.8}.cleaning-chapter{background:radial-gradient(ellipse at 5% 25%,#c5e5f8,transparent 50%),linear-gradient(140deg,#f4faff,#d2e3f5);color:#102638}.cleaning-chapter .chapter-word{font-size:clamp(65px,12vw,210px);color:#3d6c88}.garage-chapter{background:radial-gradient(ellipse at 80% 25%,#f3faff 10%,#c4d8e9 75%);color:#10151b}.garage-chapter .chapter-word{font-size:clamp(65px,14.8vw,250px);color:#172737}.system-links{display:flex;align-items:center;justify-content:center;gap:18px;margin:35px auto 0;font-size:12px}.system-links span{padding:8px 16px;border:1px solid #76899b;border-radius:30px;background:#eaf2f8}.system-links i{color:#365263;font-style:normal}.garage-chapter .chapter-bottom{margin-top:28px}
.studio-section{background:#10151b;color:#edf4fa;padding:130px 4.2% 100px}.studio-intro{max-width:1000px}.studio-intro h2{font-size:clamp(42px,6.8vw,108px);line-height:1;letter-spacing:-.065em;margin:30px 0}.studio-intro h2 span{color:#c1f947}.studio-intro>p:last-child{max-width:580px;font-size:18px;line-height:1.7;margin:30px 0 70px}.studio-services a{display:grid;grid-template-columns:55px 1fr 1fr 45px;align-items:center;border-top:1px solid #65758380;padding:28px 0;gap:24px;min-height:110px}.studio-services a:last-child{border-bottom:1px solid #65758380}.studio-services a>span{font-size:12px;color:#b3c1cc}.studio-services h3{font-size:clamp(24px,3.6vw,56px);letter-spacing:-.045em;margin:0}.studio-services p{font-size:15px;color:#c0cbd3;margin:0}.studio-services b{font-size:30px;transition:transform .3s}.studio-services a:hover b{transform:translate(5px,-5px);color:#c1f947}.spatial-site .workflow-demo{background:transparent;color:#e6eef4;border:1px solid #607487;margin-top:70px;display:flex;flex-wrap:wrap;gap:24px;padding:30px;border-radius:12px}.spatial-site .workflow-demo p{font-family:inherit;font-size:16px;margin:0}.spatial-site .workflow-steps{flex:1;min-width:350px;gap:14px}.spatial-site .workflow-node{background:#1b2732;border-color:#697e8c;color:#fff;min-height:80px;font-size:12px}.spatial-site .workflow-node span{color:#b4c4d3}.spatial-site .workflow-node.is-active{background:#c1f947;border-color:#c1f947;color:#10151b}.spatial-site .workflow-node.is-active span{color:#284900}.spatial-site .workflow-play{color:#edf4fa;border-color:#8799a6;min-height:44px;padding:10px 15px;border-radius:25px}
.spatial-site .contact-section{background:#e8f0f6;color:#10151b;padding:100px 4.2%}.spatial-site .contact-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;max-width:1600px;margin:auto}.spatial-site .contact-copy h2{font-size:clamp(48px,5.6vw,90px);line-height:.96;letter-spacing:-.065em;margin:28px 0}.contact-copy h2 span{color:#417100}.spatial-site .contact-copy>p:not(.eyebrow){max-width:410px;font-size:17px;line-height:1.65;color:#364b5b}.spatial-site .contact-copy .contact-detail{font-size:14px;margin:28px 0}.contact-email{font-size:16px;display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:5px}.spatial-site .enquiry-form{padding:30px;background:#f8fbfe;border:1px solid #aebdca;border-radius:15px;box-shadow:0 20px 80px #253e5010;color:#10151b}.spatial-site label,.spatial-site legend{font-size:14px;color:#172635}.spatial-site label span,.spatial-site #contact-help{color:#526271;font-size:12px}.spatial-site input,.spatial-site textarea{background:#edf3f8;border:1px solid #9caebd;border-radius:7px;color:#10151b;font-size:16px;min-height:48px}.spatial-site textarea::placeholder{color:#526271}.spatial-site .contact-inputs label{font-size:13px}.spatial-site .form-privacy{font-size:12px;color:#526271}.spatial-site .field-error{color:#a32020}.spatial-site .site-footer{background:#e8f0f6;color:#10151b;padding:32px 4.2%;border-top:1px solid #6f84963d;max-width:none;width:100%;gap:25px}.spatial-site .site-footer p,.spatial-site .site-footer small{color:#41576a}.spatial-site .site-footer a{min-height:44px;display:inline-flex;align-items:center}.spatial-site .site-footer>div{gap:25px}.spatial-site .site-footer small{font-size:11px}
.spatial-site .project-dialog{background:#101b24;color:#edf4fa;border-color:#637685;border-radius:14px}.spatial-site .project-dialog h2{font-size:23px}.spatial-site .preview-header p,.spatial-site .preview-footer p,.spatial-site .preview-header .eyebrow{color:#c1d0db;font-size:12px}.spatial-site .preview-controls a{font-size:12px}.spatial-site .preview-footer .button{font-size:12px}.spatial-site .demo-badge{color:#c1d0db;border-color:#71889a}.spatial-site .viewport-controls button{color:#eaf3fa;border-color:#768b9b;font-size:12px;min-height:40px}.spatial-site .viewport-controls button[aria-pressed=true]{background:#c1f947;color:#10151b}.spatial-site .preview-error{background:#101b24;color:#fff;border-color:#879eaf}.spatial-site .preview-stage{background:#182733}.spatial-site .preview-skeleton span{background:linear-gradient(110deg,#21313e 30%,#3e5668 45%,#21313e 60%);background-size:250% 100%}.spatial-site .close-preview{color:#fff;background:#203443;border-color:#8da5b8}.spatial-site .text-link:after{background:currentColor}
@media(min-width:1600px){.spatial-hero{padding-top:190px}.project-chapter{min-height:1100px}.chapter-word{margin-bottom:-85px}}
@media(max-width:1000px){.spatial-hero{min-height:780px}.hero-type h1{font-size:10vw}.sculpture{right:-14%;width:74%;top:12%}.chapter-screen{width:88%}.project-chapter{min-height:760px}.chapter-word{margin-bottom:-40px}.chapter-bottom h2{font-size:23px}.spatial-site .contact-layout{gap:5%}.spatial-site .workflow-steps{min-width:100%}.studio-services a{grid-template-columns:30px 1fr 1fr 30px}}
@media(max-width:760px){.spatial-site .site-header{height:70px;padding:0 6%}.spatial-site .site-header nav:not(#mobile-menu){display:none}.spatial-site .menu-button{display:flex}.spatial-site #mobile-menu{top:69px}.spatial-site .wordmark{font-size:15px}.wordmark strong{font-size:27px}.spatial-hero{padding:118px 6% 22px;height:auto;min-height:950px;max-height:none}.hero-type .eyebrow{font-size:9px;margin-bottom:22px;max-width:220px}.hero-type h1{font-size:12vw;line-height:.94;letter-spacing:-.075em}.sculpture{top:290px;right:-5%;height:400px;width:110%}.hero-bottom{margin-top:405px;flex-direction:column;align-items:start;gap:24px;padding:0}.hero-bottom p{font-size:15px;max-width:320px}.hero-rule{font-size:10px;flex-wrap:wrap;margin-top:35px;gap:15px}.hero-rule>span:nth-child(2){display:none}.hero-rule .motion-toggle{margin-left:auto}.project-chapter{padding:28px 6% 40px;min-height:0}.chapter-top{font-size:9px;gap:18px;align-items:start}.chapter-top span:last-child{text-align:right;max-width:150px;line-height:1.5}.chapter-word{font-size:13.1vw;margin:40px 0 22px;left:0;letter-spacing:-.065em}.cleaning-chapter .chapter-word{font-size:10.9vw}.garage-chapter .chapter-word{font-size:12.7vw}.chapter-screen{width:100%;border-radius:8px}.screen-bar{height:26px;font-size:7px;padding:0 10px}.screen-window{aspect-ratio:4/3}.screen-window iframe{width:100%;height:100%}.screen-entry span{opacity:1;font-size:11px;padding:10px 16px;transform:none}.screen-entry{padding:15px}.chapter-bottom{margin-top:30px;flex-direction:column;align-items:start;gap:25px}.chapter-bottom h2{font-size:25px}.chapter-bottom p{font-size:14px}.chapter-bottom .disclosure{font-size:11px;max-width:290px}.chapter-bottom .button{font-size:13px;min-height:48px;padding:13px 22px}.system-links{flex-wrap:wrap;gap:6px;margin-top:24px}.system-links span{font-size:10px;padding:6px 9px}.system-links i{font-size:10px}.studio-section{padding:75px 6%}.studio-intro h2{font-size:clamp(35px,9vw,64px)}.studio-intro>p:last-child{font-size:16px;margin-bottom:45px}.studio-services a{grid-template-columns:24px 1fr 25px;gap:10px;padding:22px 0;min-height:100px}.studio-services a p{grid-column:2;font-size:12px}.studio-services a b{grid-column:3;grid-row:1/3}.studio-services h3{font-size:30px}.spatial-site .workflow-demo{padding:23px 17px;margin-top:40px}.spatial-site .workflow-steps{min-width:0;width:100%;flex-direction:column}.workflow-steps>b{transform:rotate(90deg)}.spatial-site .workflow-node{width:100%;min-height:62px}.spatial-site .contact-section{padding:65px 6%}.spatial-site .contact-layout{grid-template-columns:1fr;gap:35px}.spatial-site .contact-copy h2{font-size:clamp(42px,11.8vw,80px)}.spatial-site .enquiry-form{padding:25px 18px}.spatial-site .site-footer{padding:25px 6%;gap:18px}.spatial-site .site-footer>div{gap:22px}.spatial-site .project-dialog{border-radius:0}.spatial-site .preview-header h2{font-size:20px}.spatial-site .preview-header p,.spatial-site .preview-footer p{font-size:10px}.spatial-site .preview-footer .button{font-size:11px;padding:10px 14px;gap:10px}}
@media(max-width:380px){.spatial-hero{min-height:880px}.sculpture{top:260px;height:340px}.hero-bottom{margin-top:355px}.spatial-site .wordmark{font-size:13px}.spatial-site .contact-copy h2{font-size:39px}.system-links{gap:3px}.system-links span{padding:6px}.chapter-bottom h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.screen-window iframe{transition:none}}
[data-reduced-motion=true]{scroll-behavior:auto}[data-reduced-motion=true] .screen-window iframe,[data-reduced-motion=true] .button{transition:none}[data-reduced-motion=true] .preview-skeleton span{animation:none}
.graphics-chapter{background-color:#080f16}.cleaning-chapter{background-color:#f9f7f3}.garage-chapter{background-color:#0f1319}.spatial-site input,.spatial-site textarea{border-color:#718492}
.spatial-site .menu-button{flex-direction:column;align-items:center;justify-content:center;gap:6px}.spatial-site .menu-button span{margin:0;height:2px;width:25px}
.spatial-site .site-footer a:hover,.spatial-site .site-header nav a:hover{color:#254357}.screen-entry{color:#fff}

/* Enquiry form: one shape family (10px controls, 20px cards), 24px rhythm. */
.spatial-site .enquiry-form,.spatial-site .enquiry-card{border-radius:20px}
.spatial-site .enquiry-form input:not([type=radio]):not([type=checkbox]),.spatial-site .enquiry-form textarea,.spatial-site .submit-button{border-radius:10px}
.spatial-site .submit-button{min-height:56px;width:100%}
#challenge-container{margin:24px 0;min-height:65px}
#challenge-container.is-compact{display:flex;justify-content:center;min-height:140px}
.service-options{margin:0 0 24px;border:0;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.spatial-site .chip input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;opacity:0;cursor:pointer}
.spatial-site .chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid #728595;border-radius:999px;background:#edf3f8;color:#172635;font-size:14px;transition-property:background-color,border-color,color;transition-duration:.15s}
.chip input:checked+span{background:#10151b;border-color:#10151b;color:#f8fbfe}
.chip input:focus-visible+span{outline:2px solid #10151b;outline-offset:3px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:#172635;cursor:pointer}
.spatial-site .consent input{width:24px;height:24px;min-height:0;flex:none;margin-top:1px;accent-color:#10151b}
.spatial-site .consent span{font-size:14px;color:#172635}
.consent a{text-decoration:underline;text-underline-offset:3px}
.spatial-site legend span{font-weight:400;color:#3f5163;font-size:12px}
.enquiry-card{padding:44px 32px;background:#f8fbfe;border:1px solid #aebdca;box-shadow:0 20px 80px #253e5010;color:#10151b}
.enquiry-card h3{font-size:clamp(28px,3vw,40px);line-height:1.05;letter-spacing:-.03em;margin:0 0 14px;text-wrap:balance}
.enquiry-card p{font-size:16px;line-height:1.6;color:#364b5b;margin:0 0 28px;max-width:38ch;text-wrap:pretty}
.limit-icon{color:#10151b;margin-bottom:18px}
@media (max-width:1024px){.spatial-site .contact-layout{grid-template-columns:1fr;gap:40px}}
@media (max-width:560px){.spatial-site .contact-inputs{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){.spatial-site .submit-button{transition-property:scale;transition-duration:.12s}.spatial-site .submit-button:active{scale:.96}}
/* WCAG 1.4.11: control borders >=3:1 (measured 3.41-3.67:1); muted text and placeholders at AAA (measured 7.31-7.87:1). */
.spatial-site .enquiry-form input:not([type=radio]):not([type=checkbox]),.spatial-site .enquiry-form textarea{border-color:#728595}
.spatial-site .form-field>label:not(.consent)>span,.spatial-site #contact-help,.spatial-site .enquiry-form textarea::placeholder{color:#3f5163}
.notfound-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.spatial-site .notfound-actions a{text-decoration:none}

/* Chapter themes (29/09/2026): each project chapter wears its own product's palette.
   Garage = the demo's dark theme tokens (canvas #0f1319, surface #171b22, brand #33668f, brand-text #8cc3ea).
   Clearway = its site tokens (cream hsl(40 30% 97%), terracotta hsl(12 72% 42%), deep hsl(24 18% 12%)). */
.garage-chapter{background:radial-gradient(ellipse at 80% 18%,#1d2835 0%,#0f1319 68%);color:#e8ecf1}
.garage-chapter .chapter-word{color:#8cc3ea}
.garage-chapter .chapter-screen{border-color:#2a3039;box-shadow:0 55px 80px -35px #3d7fb566,0 30px 80px #000a}
.garage-chapter .screen-window{background:#0f1319}
.garage-chapter .system-links span{background:#171b22;border-color:#3a4452;color:#e8ecf1}
.garage-chapter .system-links i{color:#8cc3ea}
.spatial-site .garage-chapter .button{background:#33668f;border-color:#33668f;color:#fff}
.spatial-site .garage-chapter .button:hover{background:#295676}
.cleaning-chapter{background:radial-gradient(ellipse at 10% 22%,hsl(12 72% 91%) 0%,transparent 46%),radial-gradient(ellipse at 90% 82%,hsl(24 70% 90%) 0%,transparent 50%),hsl(40 30% 97%);color:hsl(24 18% 12%)}
.cleaning-chapter .chapter-word{color:hsl(12 72% 42%)}
.cleaning-chapter .chapter-screen{border-color:#e2cfc4;box-shadow:0 55px 80px -35px hsl(12 72% 42% / .35),0 30px 80px #5a2a1a22}
.cleaning-chapter .screen-window{background:hsl(40 30% 97%)}
.spatial-site .cleaning-chapter .button{background:hsl(12 72% 42%);border-color:hsl(12 72% 42%);color:#fff}
.spatial-site .cleaning-chapter .button:hover{background:hsl(12 64% 30%)}

/* Robot hero (30/09/2026). Default = static: the hero shows a still of the robot where the Z was, and Go All In Graphics
   follows as a normal chapter. This is what visitors get with reduced motion, without WebGL or without JavaScript.
   .is-live (set by robot-hero.js) pins hero + first chapter into one scroll scene: the robot sketches a website that
   grows into the real Go All In Graphics screen. */
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.spatial-site .button-ghost{background:transparent;color:#10151b;border-color:#10151b;box-shadow:none}
.spatial-site .button-ghost:hover{background:#ffffffa6;color:#10151b}
.spatial-site .hero-bottom{justify-content:flex-start;gap:48px;align-items:end}
.robot-stage{position:absolute;right:-2%;top:9%;width:58%;height:80%;z-index:1;pointer-events:none}
.robot-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:62% 88%}
.robot-canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.robot-night{position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;background:radial-gradient(ellipse at 60% 85%,#273b36 0%,#080f16 65%);background-color:#080f16}
.robot-scene.is-live{height:430vh;height:430svh}
.robot-scene.is-live .robot-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.robot-scene.is-live .spatial-hero{position:absolute;inset:0;height:auto;min-height:0;max-height:none}
.robot-scene.is-live .robot-canvas{display:block;opacity:0;transition:opacity .7s ease}
.robot-scene.is-live .robot-stage[data-ready=true] .robot-canvas{opacity:1}
.robot-scene.is-live .robot-stage{inset:0;width:auto;height:auto}
.robot-scene.is-live .robot-poster{display:none}
.robot-scene.is-live .robot-handoff{position:absolute;inset:0;z-index:5;min-height:0;padding:0;overflow:visible;background:none;pointer-events:none}
.robot-scene.is-live .robot-handoff>*{pointer-events:auto}
.robot-scene.is-live .robot-handoff .chapter-top{position:absolute;left:4.2%;right:4.2%;top:26px;opacity:0}
.robot-scene.is-live .robot-handoff .chapter-screen{position:absolute;left:0;top:0;margin:0;width:0;height:0;opacity:0;display:none;transform:none;will-change:auto}
.robot-scene.is-live .robot-handoff .screen-window{aspect-ratio:auto;height:calc(100% - 32px)}
.robot-scene.is-live .robot-handoff .chapter-bottom{position:absolute;margin:0;opacity:0}
.robot-scene.is-live .robot-handoff [inert]{pointer-events:none}
@media(max-width:1000px){.robot-stage{right:-12%;width:70%;top:14%}}
@media(max-width:760px){
  .robot-stage{top:290px;right:0;left:0;width:auto;height:400px}
  .robot-poster{object-position:50% 100%}
  .spatial-site .spatial-hero .hero-bottom{gap:22px;align-items:flex-start}
  .robot-scene.is-live .spatial-hero{min-height:0;height:auto}
  .robot-scene.is-live .spatial-hero .hero-bottom{margin-top:auto;padding-top:0}
  .robot-scene.is-live .robot-handoff .chapter-top{left:6%;right:6%;top:18px}
  .robot-scene.is-live .robot-handoff .chapter-bottom{flex-direction:column;align-items:flex-start;gap:16px}
}
@media(max-width:380px){.robot-stage{top:260px;height:340px}}
.robot-scene.is-live .robot-pin>.robot-stage{z-index:6}
/* Chapters fill the screen, and with motion on one shared background morphs garage -> Clearway -> studio colours
   (portfolio.js adds .is-morph; without it each section keeps its own solid background). */
.chapter-flow .project-chapter{min-height:100vh;min-height:100svh}
.chapter-flow.is-morph .garage-chapter{background:radial-gradient(ellipse at 80% 18%,#1d283599 0%,transparent 68%)}
.chapter-flow.is-morph .cleaning-chapter{background:radial-gradient(70% 38% at 12% 42%,hsl(12 72% 91% / .7) 0%,transparent 100%),radial-gradient(70% 40% at 88% 80%,hsl(24 70% 90% / .7) 0%,transparent 100%)}
.chapter-flow.is-morph .studio-section{background:transparent}
@media(max-width:760px){.chapter-flow .project-chapter{display:flex;flex-direction:column;justify-content:center;gap:0}}
/* Short phones (iPhone SE, small Android): make room for the robot between the headline and the buttons. */
@media(max-width:760px) and (max-height:700px){
  .spatial-site .spatial-hero{padding-top:88px}
  .spatial-site .hero-type .eyebrow{display:none}
  .spatial-site .hero-type h1{font-size:10.5vw}
  .spatial-site .hero-bottom p{font-size:14px}
  .spatial-site .spatial-hero .hero-bottom{gap:14px}
  .spatial-site .hero-ctas{gap:8px}
  .spatial-site .hero-ctas .button{min-height:44px;padding:10px 18px;gap:16px;font-size:13px}
  .spatial-site .hero-rule{margin-top:14px;padding-top:10px}
}
.robot-scene.is-live .robot-handoff .chapter-bottom .button{white-space:nowrap;flex:none}
/* Mid-width screens (landscape tablets, small laptops): stack the hero buttons under the intro so the robot has room. */
@media(min-width:761px) and (max-width:1279px){.spatial-site .hero-bottom{flex-direction:column;align-items:flex-start;gap:20px}}

.spatial-site #mobile-menu .menu-privacy{font:inherit;font-size:15px;color:#364b5b;background:none;border:0;padding:18px 0;min-height:44px;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.spatial-site #mobile-menu .menu-privacy:focus-visible{outline:2px solid #10151b;outline-offset:3px}

/* Phone polish (06/10/2026), from 600 scroll captures across six iPhone sizes (SE 3rd gen to 17 Pro Max).
   Phones read at arm's length, so labels never drop below 12px and body copy sits at 15-16px; side gutters are a
   fixed 24px minimum instead of 6% (22px on a 375px screen); chapter labels stack instead of wrapping raggedly;
   the "Step inside" cue sits in the screen's corner instead of over its middle; chapter buttons span the width. */
@media(max-width:760px){
  .spatial-site{--gutter:max(24px,6.4vw)}
  .spatial-site .site-header,.spatial-hero,.project-chapter,.studio-section,.spatial-site .contact-section,.spatial-site .site-footer{padding-left:var(--gutter);padding-right:var(--gutter)}
  .spatial-site .hero-type .eyebrow{font-size:11px;letter-spacing:.14em}
  .hero-rule{font-size:12px}
  .spatial-site .motion-toggle{min-height:44px;padding:0 16px;font-size:13px}
  .robot-scene.is-live{height:300vh;height:300svh}
  .project-chapter{padding-top:40px;padding-bottom:56px}
  .chapter-top{flex-direction:column;align-items:flex-start;gap:4px;font-size:12px;letter-spacing:.04em}
  .chapter-top span:last-child{text-align:left;max-width:none;line-height:1.45;opacity:.72}
  .robot-scene.is-live .robot-handoff .chapter-top{left:var(--gutter);right:var(--gutter)}
  .chapter-word{margin:36px 0 26px}
  .screen-bar{height:30px;font-size:10px;padding:0 12px}
  /* Phones preview each demo's own mobile layout (portfolio.js renders the live frame 390px wide), so the window is
     phone-shaped rather than a shrunken desktop. */
  .screen-window{aspect-ratio:4/5}
  .robot-scene.is-live .robot-handoff .screen-window{height:calc(100% - 30px)}
  .screen-bar span:first-child,.screen-bar span:last-child{flex:none;white-space:nowrap}
  .screen-bar span:nth-child(2){flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 10px}
  .screen-entry{justify-content:flex-end;padding:12px}
  .screen-entry span{font-size:12px;padding:9px 14px;gap:14px}
  .chapter-bottom{margin-top:32px;gap:22px}
  .chapter-bottom h2{font-size:28px;margin-bottom:10px}
  .chapter-bottom p{font-size:16px;text-wrap:balance}
  .chapter-bottom .disclosure{font-size:13px;max-width:none;margin-top:12px;line-height:1.5}
  .chapter-bottom{align-items:stretch}
  .chapter-bottom .button{font-size:15px;min-height:54px;padding:15px 24px;justify-content:space-between}
  .system-links{margin-top:28px;gap:8px}
  .system-links span{font-size:12px;padding:8px 12px}
  .system-links i{font-size:12px}
  .studio-section{padding-top:88px;padding-bottom:88px}
  .studio-intro>p:last-child{font-size:17px;line-height:1.65}
  .studio-services a{padding:24px 0}
  .studio-services a>span{font-size:13px}
  .studio-services a p{font-size:15px;margin-top:4px}
  .spatial-site .contact-section{padding-top:80px;padding-bottom:80px}
  .spatial-site .contact-copy .contact-detail{font-size:15px}
  .spatial-site .enquiry-form{padding:28px 20px}
  .spatial-site .site-footer{padding-top:32px;padding-bottom:32px}
  .spatial-site .site-footer small{font-size:12px}
  .spatial-site .site-footer>div{flex-wrap:wrap;column-gap:22px;row-gap:0;font-size:13px}
  .spatial-site .site-footer .footer-link{font-size:13px}
}
@media(max-width:380px){.chapter-bottom h2{font-size:26px}}
/* WhatsApp calls to action (src/js/whatsapp.js). The large contact button reuses .button; the mobile pill is fixed in the thumb zone.
   z-index: the pill sits under the header (40) and the consent banner (2147483000) is above everything, so it never covers the banner. */
.spatial-site .contact-whatsapp{min-height:60px;padding:18px 28px;font-size:17px;margin:34px 0 12px;max-width:100%}
.spatial-site .contact-reply{font-size:15px;line-height:1.5;color:#3f5163;margin:0 0 4px}
.spatial-site .form-lead{font-size:22px;line-height:1.2;letter-spacing:-.01em;margin:0 0 20px}
.whatsapp-sticky{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:30;display:none;align-items:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:999px;background:#10151b;color:#fff;font:600 15px/1.2 "Work Sans",sans-serif;text-decoration:none;box-shadow:0 10px 28px #10151b40}
.whatsapp-sticky[hidden]{display:none}
.whatsapp-sticky:focus-visible{outline:2px solid #10151b;outline-offset:3px}
@media(max-width:720px){.whatsapp-sticky{display:inline-flex}}
/* Below 420px the four workshop tools only fit on one row without the arrows between them. */
@media(max-width:419px){.system-links i{display:none}.system-links{gap:8px}}