*{box-sizing:border-box}html{background:#08090a;color:#eeeae3;font-family:Arial,Helvetica,sans-serif}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid #d2e7ff;outline-offset:5px}.skip{position:fixed;left:20px;top:-80px;z-index:10;padding:14px;background:#20272d}.skip:focus{top:16px}#experience{height:780svh}.stage{height:100svh;height:100lvh;position:sticky;top:0;overflow:hidden}canvas{display:block;width:100%;height:100%}header,footer{position:absolute;left:4.5vw;right:4.5vw;display:flex;justify-content:space-between;align-items:center;pointer-events:none}header{top:32px}header a{pointer-events:auto}.wordmark{font-size:19px;font-weight:700;letter-spacing:.1em}.wordmark>span:first-child{font-weight:400;color:#929291}.location{display:block;font-size:8px;letter-spacing:.35em;margin-top:8px}.edition,.eyebrow,footer,.service-tests>span{font-size:10px;letter-spacing:.19em}.edition{color:#8b8e91}footer{bottom:32px;color:#9c9fa1}.scroll-note{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}.scroll-note b{font-size:17px;font-weight:400;margin-left:20px}.copy{position:absolute;left:6vw;top:17%;pointer-events:none;opacity:0;transition:opacity .15s linear}.hero-copy{left:50%;transform:translateX(-50%);text-align:center;top:16%;width:90%}.copy .eyebrow{color:#acafb0;margin-bottom:20px}h1,h2{font-weight:400;line-height:1.02;letter-spacing:-.045em;margin:0;font-size:clamp(38px,5vw,76px)}h1 em,h2 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.045em}h2{font-size:clamp(32px,4vw,60px)}.description{color:#aeb0b2;font-size:12px;line-height:1.7;letter-spacing:.02em}.service-tests{position:absolute;left:6vw;bottom:15%;max-width:88vw}.service-tests>span{display:block;color:#979a9d;margin-bottom:10px}.service-tests button{border:1px solid #4c5157;background:#10151bbb;color:#a9afb6;border-radius:2px;padding:8px 12px;font-size:10px;margin:0 5px 4px 0;cursor:pointer}.service-tests button[aria-pressed=true]{color:#f1efea;border-color:#a3b2c3;background:#263547aa}.timeline-track{position:absolute;left:0;right:0;bottom:0;height:2px;background:#27292a}.timeline-track i{display:block;width:100%;height:100%;background:#a5b4c2;transform-origin:left;transform:scaleX(0)}#loading{position:absolute;left:50%;top:68%;transform:translateX(-50%);font-size:11px;color:#aaa;letter-spacing:.12em}#loading span{display:block;text-align:center;margin-top:10px;font-variant-numeric:tabular-nums}#fallback{position:absolute;inset:0;background:#0d1118;padding:25vh 8vw;z-index:5}#fallback h2{font-size:30px}#fallback p{max-width:520px;color:#bfc2c7;line-height:1.6}#fallback button{padding:12px 18px}.debug{position:absolute;right:12px;top:12px;z-index:8;background:#10151eef;border:1px solid #526174;padding:12px;width:290px;max-height:92vh;overflow:auto;font:10px/1.5 monospace;color:#d9e3ef}.debug pre{white-space:pre-wrap;margin:8px 0}.debug label{display:flex;align-items:center;justify-content:space-between;margin:5px 0}.debug select,.debug button{background:#26313e;color:#ddd;border:1px solid #617085;padding:3px;font:inherit}.debug input[type=range]{width:150px}.debug summary{cursor:pointer;color:#a9bfd7}[hidden]{display:none!important}body.reduced #experience{height:300svh}body.reduced .scroll-note{display:none}@media(max-width:650px){header{top:22px;left:6vw;right:6vw}.wordmark{font-size:15px}.edition{font-size:8px}.copy,.hero-copy{top:17%}h1{font-size:49px}h2{font-size:40px}.service-copy{top:18%}.service-tests{bottom:14%}.service-tests button{padding:8px 9px;font-size:9px}footer{font-size:8px;bottom:24px}.scroll-note{left:auto;right:0;transform:none}#progress-label{display:none}.debug{width:260px;max-height:60vh;top:auto;bottom:10px}}@media(prefers-reduced-motion:reduce){.copy{transition:none}}

#experience{height:940svh}body.reduced #experience{height:400svh}
.debug{max-height:82vh;overflow-y:auto;width:310px}.debug details{border-top:1px solid #ffffff26;padding:7px 0}.debug summary{cursor:pointer;color:#ded6c9}.debug details label{display:block;margin:8px 0}.debug output{float:right;font-variant-numeric:tabular-nums}.debug input[type=range]{width:100%}.debug input[type=color]{height:24px;width:50px;float:right}.debug pre{white-space:pre-wrap}
#experience{height:1300svh}body.reduced #experience{height:500svh}
.final-copy{left:50%;top:29%;transform:translateX(-50%);text-align:center;width:90%;transition:none}.final-copy .description{margin:22px 0 30px}.final-cta{display:inline-flex;gap:42px;align-items:center;border:1px solid #75736b;padding:15px 22px;font-size:11px;letter-spacing:.08em;pointer-events:auto;background:#18191acc}.final-cta:hover{background:#272724}.final-copy[inert] .final-cta{pointer-events:none}

/* Orange cyclorama revision. Copy movement is sampled from scroll, including reverse passes. */
:root{--ink:#eeeae3;--muted:#adafb0}html{color:var(--ink)}header{z-index:3;top:27px;gap:24px}header nav{display:flex;gap:4px;position:absolute;left:50%;transform:translateX(-50%);padding:6px;background:#141416ed;border:1px solid #ffffff16;border-radius:7px;pointer-events:auto;color:#f5f1e9;box-shadow:0 8px 26px #00000014}header nav a{padding:10px 20px;font-size:12px;letter-spacing:.02em;border-radius:4px}header nav a:hover,header nav a[aria-current=true]{background:#ffffff22}.header-cta{font-size:11px;letter-spacing:.06em;border-bottom:1px solid currentColor;padding:9px 0}.header-cta span{margin-left:22px}.wordmark>span:first-child,.copy .eyebrow,.description,footer{color:var(--muted)}.wordmark{font-size:17px}.copy{transition:none;top:18%;max-width:47vw}.copy>*{will-change:transform,opacity;transform-origin:left center}.copy .eyebrow{font-size:9px;letter-spacing:.23em;margin-bottom:18px}.hero-copy{max-width:none;top:15%;width:90%}.hero-copy h1{font-size:clamp(42px,5vw,72px)}.service-copy h2{font-size:clamp(34px,3.9vw,59px)}.description{max-width:300px;margin-top:20px}.final-copy{top:15%;max-width:none}.final-copy h2{font-size:clamp(40px,4.7vw,68px)}.final-copy .description{margin:16px auto 20px}.final-cta{color:#f5eee4;border-color:#ffffff40;background:#1c171380;padding:12px 20px}.final-cta:hover{background:#4b2b1ddd}.timeline-track{background:#ffffff12;height:1px}.timeline-track i{background:#e87933}footer{font-size:9px}.scroll-note{position:static;transform:none}.service-tests{z-index:4}
@media(max-width:650px){header{top:20px;gap:10px}.wordmark{font-size:12px;letter-spacing:.07em}.location{font-size:6px;margin-top:5px}header nav{position:static;transform:none;margin-left:auto;padding:4px;gap:0}header nav a{font-size:10px;padding:9px 10px}.header-cta{display:none}.copy,.hero-copy{top:16%;max-width:90vw}.copy .eyebrow{font-size:8px}.service-copy h2{font-size:35px}.hero-copy h1{font-size:47px}.description{font-size:11px;margin-top:14px}.final-copy{top:16%;max-width:90vw}.final-copy h2{font-size:44px}.final-copy .description{margin:15px auto}.final-cta{font-size:10px;padding:11px 17px}.scroll-note{position:static}.service-tests{bottom:9%}}

.copy[data-chapter=wheel]{color:#f3eee6;text-shadow:0 2px 18px #0009}.copy[data-chapter=wheel] .eyebrow,.copy[data-chapter=wheel] .description{color:#c8c5c0}

@media(max-width:650px){.copy[data-chapter=wheel]{color:var(--ink);text-shadow:none}.copy[data-chapter=wheel] .eyebrow,.copy[data-chapter=wheel] .description{color:var(--muted)}}
@media(min-width:651px){.final-copy{top:12%}}

/* Brand film gate, then the existing single-car story. */
#experience{height:1516svh}body.reduced #experience{height:600svh}
.brand-logo{display:block;position:relative;width:142px;height:49px;overflow:hidden}.brand-logo img{position:absolute;width:111%;height:auto;max-width:none;left:50%;top:50%;transform:translate(-50%,-50%)}
body.entry-locked{overflow:hidden;height:100svh;height:100lvh}body.entry-locked .skip{display:none}
#entry{position:fixed;inset:0;z-index:30;overflow:hidden;color:#faf7f0;background:transparent}
.entry-media,.entry-door{position:absolute;inset:0;overflow:hidden;background:#100c09}.entry-media video{width:100%;height:100%;object-fit:cover;display:block}
.entry-media:after,.entry-door:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0005,#0002 40%,#0009)}
.entry-door{display:none;width:50%;transition:transform 1.5s cubic-bezier(.76,0,.24,1);will-change:transform}.entry-door-left{right:auto}.entry-door-right{left:50%}.entry-door canvas{position:absolute;width:100vw;height:100%;max-width:none;top:0}.entry-door-left canvas{left:0}.entry-door-right canvas{right:0}
.entry-content{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90%;text-align:center;transition:opacity .3s,filter .3s;z-index:2}.entry-logo{width:280px;height:97px;margin:0 auto 27px}#entry-title{font-size:10px;letter-spacing:.28em;margin:0 0 34px;color:#e7e1d9}
#enter-studio{display:inline-flex;align-items:center;justify-content:space-between;min-width:246px;gap:46px;padding:18px 23px;border:1px solid #ffffff65;color:#fff;background:#17120b55;backdrop-filter:blur(12px);cursor:pointer;font-size:12px;letter-spacing:.04em;transition:background .2s,border-color .2s}#enter-studio:disabled{opacity:.55;cursor:wait}#enter-studio:not(:disabled):hover{background:#e77324;border-color:#e77324}#enter-studio span{font-size:18px}
#entry-status{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.15em;text-align:center;margin:0;color:#d8d1c7}#entry-status span{display:block;margin-top:8px;font-variant-numeric:tabular-nums}.entry-location{position:absolute;bottom:37px;left:4.5vw;font-size:9px;letter-spacing:.18em;color:#d8d1c7}#entry-motion{position:absolute;bottom:27px;right:4.5vw;background:transparent;border:1px solid #ffffff40;color:#eae5de;font-size:10px;padding:10px 14px;cursor:pointer;z-index:3}
#entry.opening .entry-media{visibility:hidden}#entry.opening .entry-door{display:block;animation-duration:1.5s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.76,0,.24,1)}#entry.opening .entry-door-left{animation-name:open-left}#entry.opening .entry-door-right{animation-name:open-right}#entry.opening .entry-content,#entry.opening #entry-status,#entry.opening #entry-motion,#entry.opening .entry-location{opacity:0;pointer-events:none}#entry.opening .entry-content{filter:blur(6px)}
@keyframes open-left{to{transform:translateX(-100%)}}@keyframes open-right{to{transform:translateX(100%)}}
@media(max-width:650px){.brand-logo{width:95px;height:33px}header nav a{font-size:10px;padding:9px 8px}.entry-logo{width:235px;height:82px}.entry-location{bottom:80px;left:50%;transform:translateX(-50%);white-space:nowrap}#entry-status{bottom:31px;left:6vw;transform:none;text-align:left;font-size:8px}#entry-motion{right:6vw}#entry-title{font-size:9px}}
@media(prefers-reduced-motion:reduce){#entry.opening{opacity:0;transition:opacity .18s}#entry.opening .entry-door{animation:none}.entry-content{transition:none}}
/* Service typography, finish selection and luminous detail controls. */
#experience{height:1780svh}body.reduced #experience{height:700svh}
.copy{top:15%;max-width:46vw;text-shadow:0 2px 24px #0008}
.copy .eyebrow{font-size:12px;letter-spacing:.18em;color:#ddd7cc;margin:0 0 14px}
.service-copy h2{font-size:clamp(42px,4.4vw,68px);line-height:1.01}
.hero-copy{max-width:none;top:14%}.hero-copy h1{font-size:clamp(54px,5.5vw,82px)}
.copy .description{font-size:16px;line-height:1.5;max-width:390px;color:#dedad2;margin:17px 0}
.explore-button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:46px;padding:12px 20px;border:1px solid #ebd6b54d;border-radius:4px;background:#121511d9;backdrop-filter:blur(12px);color:#fff7e9;font-size:13px;font-weight:600;letter-spacing:.025em;cursor:pointer;overflow:hidden;pointer-events:auto;text-shadow:none;box-shadow:0 5px 20px #0002}
.explore-button:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,#ffb15b0a 42%,#ffe4bb55 50%,#ffb15b0a 58%,transparent 70%);transform:translateX(-120%);animation:detail-sheen 4s ease-in-out infinite}
.explore-button:after{content:'';position:absolute;left:15%;right:15%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#ffd19a,transparent)}
.explore-button:hover{border-color:#e9b16f;background:#392517}.explore-button span{font-size:20px;transition:transform .2s}.explore-button:hover span{transform:translate(2px,-2px)}
.copy[inert] .explore-button{pointer-events:none}.copy[inert] .explore-button:before{animation-play-state:paused}
@keyframes detail-sheen{0%,15%{transform:translateX(-120%)}65%,100%{transform:translateX(120%)}}
.service-tests{bottom:10%;padding:15px 18px 11px;background:#0e1512d9;backdrop-filter:blur(16px);border:1px solid #ffffff24;border-radius:7px;box-shadow:0 10px 40px #0002}
.service-tests>span{font-size:11px;color:#d4d1c6;margin-bottom:12px;letter-spacing:.16em}
.service-tests button{display:inline-flex;align-items:center;gap:8px;font-size:13px;min-height:44px;min-width:65px;justify-content:center;padding:10px 15px;border-radius:4px;background:#ffffff05;color:#e1e1d6;border-color:#ffffff30}
.service-tests button[aria-pressed=true]{background:#eee8da;color:#141b15;border-color:#eee8da}.service-tests button:disabled{cursor:wait;opacity:.65}
.swatch{width:13px;height:13px;border-radius:50%;display:block;border:1px solid #ffffff50}.swatch.orange{background:#f56808}.swatch.commercial{background:linear-gradient(125deg,#087448 45%,#cdf048 45%,#cdf048 60%,#063329 60%)}.swatch.black{background:#060807}
.final-copy{top:12%;max-width:none}.final-copy .description{margin:18px auto}
#service-detail{width:min(580px,calc(100vw - 36px));max-height:85svh;padding:40px;border:1px solid #8f9b7250;border-radius:12px;background:linear-gradient(145deg,#1c2720,#101410);color:#f3f0e7;box-shadow:0 24px 100px #0009}
#service-detail::backdrop{background:#020503b8;backdrop-filter:blur(12px)}
#service-detail [data-close]{position:absolute;right:16px;top:12px;width:40px;height:40px;border:0;background:transparent;color:#eee;font-size:30px;cursor:pointer}
#service-detail .eyebrow{font-size:11px;letter-spacing:.15em;color:#bcd390;padding-right:20px;margin:16px 0 22px}
#service-detail h2{font-size:clamp(32px,4vw,46px);line-height:1.05}
#service-detail p.detail-description,#service-detail li{font-size:15px;line-height:1.65;color:#c9cec5}#service-detail ul{padding-left:20px;margin:24px 0}#service-detail li{margin:10px 0}
@media(max-width:650px){.copy{top:14%;max-width:88vw}.copy .eyebrow{font-size:10px;margin-bottom:10px}.service-copy h2{font-size:clamp(33px,9.5vw,43px)}.hero-copy h1{font-size:52px}.hero-copy{max-width:90vw}.copy .description{font-size:14px;line-height:1.4;margin:12px 0;max-width:310px}.explore-button{min-height:42px;padding:9px 15px;font-size:12px;gap:25px}.service-tests{left:6vw;right:auto;max-width:88vw;bottom:8%;padding:12px 12px 8px}.service-tests>span{font-size:10px}.service-tests button{font-size:12px;padding:9px 10px;gap:6px;margin-right:3px}.final-copy{top:14%;max-width:none}.final-copy h2{font-size:44px}#service-detail{padding:28px}}
@media(max-height:650px) and (min-width:651px){.copy{top:18%}.service-copy h2{font-size:38px}.copy .description{font-size:13px;margin:10px 0}.copy .eyebrow{font-size:10px;margin-bottom:10px}.service-tests{left:auto;right:5vw;bottom:8%}}
@media(prefers-reduced-motion:reduce){.explore-button:before{animation:none;transform:translateX(0)}.explore-button span{transition:none}}

/* Service names are the headline; the hero CTA leaves room for italic descenders. */
.hero-copy .explore-button{margin-top:26px;background:rgba(255,255,255,.045);border-color:rgba(255,239,214,.3);backdrop-filter:blur(3px);box-shadow:none}
.hero-copy .explore-button:hover{background:rgba(255,255,255,.11);border-color:rgba(255,239,214,.6)}
.service-copy h2{font-weight:500;letter-spacing:-.045em;line-height:1.06}
.service-abbreviation{font-size:.65em;letter-spacing:-.03em;white-space:nowrap}
@media(max-width:650px){.hero-copy .explore-button{margin-top:24px}.service-copy h2{font-size:clamp(30px,8.8vw,40px)}}

/* Hero CTA rests on the dark floor below the car. The car grows as it arrives,
   so a button stacked under the headline ended up on top of it. */
.hero-copy{bottom:0;display:flex;flex-direction:column;align-items:center}
.hero-copy .explore-button{margin-top:auto;margin-bottom:max(56px,8svh)}
@media(max-width:650px){.hero-copy .explore-button{margin-top:auto;margin-bottom:max(84px,13svh)}}
/* Loading state: the disabled Enter button fills with the model's download progress. */
/* Enter button in the brand gradient, like the header's Start a project. While the model
   loads, the gradient fills the button from the left with the download progress. */
#enter-studio{position:relative;isolation:isolate;overflow:hidden;border-radius:3px;border:1px solid #ffffff35;background:var(--brand-gradient,linear-gradient(405deg,#ea138f,#f59154));transition:background .2s,border-color .2s,opacity .2s}
#enter-studio:not(:disabled):hover{background:linear-gradient(405deg,#d61284,#e4844a);border-color:#ffffffaa}
#enter-studio:not(:disabled):before{content:'';position:absolute;inset:-100%;z-index:-1;background:linear-gradient(110deg,transparent 40%,#ffffff50 49%,#ffffff77 50%,transparent 59%);animation:cta-light 4.8s ease-in-out infinite;pointer-events:none}
#enter-studio[disabled]{opacity:1;cursor:progress;font-variant-numeric:tabular-nums;background:var(--brand-gradient,linear-gradient(405deg,#ea138f,#f59154)) left/var(--progress,0%) 100% no-repeat,#17120bb3}
@media(prefers-reduced-motion:reduce){#enter-studio:not(:disabled):before{animation:none;opacity:0}}


/* Detail dialogs: every chapter's card fits the viewport, centred, with no inner scroll
   (Jason, 2026-10-05). Wider on desktop so copy runs in fewer lines; type sizes are the
   shared scale, only the vertical rhythm inside the card is tighter. */
#service-detail{width:min(760px,calc(100vw - 32px));max-height:calc(100svh - 24px);overflow:auto;padding:32px 44px 34px;margin:auto}
html:not(#tw-type) #service-detail .eyebrow{margin:0 40px 10px 0;line-height:1.5}
html:not(#tw-type) #service-detail h2{margin:0 0 14px;line-height:1.05}
html:not(#tw-type) #service-detail p.detail-description{margin:0;line-height:1.6}
html:not(#tw-type) #service-detail ul{margin:14px 0 22px;padding-left:20px}
html:not(#tw-type) #service-detail ul li{margin:4px 0;line-height:1.5}
#service-detail [data-close]{top:14px;right:14px}
@media(max-width:650px){
  #service-detail{padding:24px 22px 26px}
  html:not(#tw-type) #service-detail ul{margin:12px 0 18px}
}
@media(max-height:640px){
  #service-detail{padding-top:22px;padding-bottom:24px}
  html:not(#tw-type) #service-detail h2{font-size:30px;margin-bottom:10px}
  html:not(#tw-type) #service-detail ul{margin:10px 0 16px}
  html:not(#tw-type) #service-detail ul li{margin:2px 0}
}
/* Detail cards in neutral black (Jason, 2026-10-05: no green). The label takes the site's kicker pink. */
#service-detail{background:linear-gradient(145deg,#161616,#070707);border-color:#ffffff1f}
#service-detail::backdrop{background:#000000b8}
html:not(#tw-type) #service-detail .eyebrow{color:#ee9fc7}
/* First paint: a 48px blur of the poster frame sits under the video until the poster
   (and then the film) arrive, so the entry never opens on black. */
.entry-media{isolation:isolate}
.entry-media:before{content:'';position:absolute;inset:-40px;z-index:-1;background:#100c09 url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gAQTGF2YzYyLjI4LjEwMgD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAbADADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDBvpf9CnzEGQ8Z4+X6ir9lhrSEtGpOwdR7Vh/bIGupLa7Rlt3LCRlHzCtCzaDT9tsL57tXAdH8tvlU9Bih72FbTmNNoYJCpeFTsORg4qpeaPZ3jxySW/KHIA4B+o71Df6nBA8iJqVrEAnG6J3fJ9hwD9T9axJvFl/HD9mhv42iU/fFsEdvqck01HqJvpc3X06yiyPska5HPyAZrPvrfTxE2+CE8HGUBP4VzU+qSzy+ZJcszdPuilTUiP8AloT+lPkQXZsXayS3LmLaCqBizHj05xXOXF7cSzPK8pLsTu+Y4x6AelaMmoXdrdS+TMV82Mo/AOVJwRzWOVAcgDoeKoS0Vi59heW1hl+1wKZM/JJKE2jJA69uKgnsHiheU3Vq4U/dScMx+g71XlJHGajyfWhjQnNHNFFIZ//Z) center/cover no-repeat;filter:blur(18px)}

/* Closing chapter: the sign-off line and its CTA in the brand gradient (Jason, 2026-10-05). */
#final-content .description{background:linear-gradient(100deg,#ff3fa4 0%,#f59154 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;font-weight:700;width:fit-content}
#final-content .final-cta{background:var(--brand-gradient,linear-gradient(405deg,#ea138f,#f59154));border-color:#ffffff40;color:#fff;box-shadow:0 14px 40px -18px #ea138f}
#final-content .final-cta:after{display:none}
#final-content .final-cta:hover{background:linear-gradient(405deg,#d61284,#e4844a);border-color:#ffffffaa}
html:not(#tw-type) #final-content .description{font-weight:700}

/* iOS: the stage is 100lvh (the screen with toolbars collapsed); whatever sits on its bottom edge moves up by
   the part a visible toolbar covers (100lvh - 100dvh, zero elsewhere). */
.stage>footer{bottom:calc(32px + 100lvh - 100dvh)}.stage .timeline-track{bottom:calc(100lvh - 100dvh)}
@media(max-width:650px){.stage>footer{bottom:calc(24px + 100lvh - 100dvh)}.hero-copy .explore-button{margin-bottom:calc(max(84px,13svh) + 100lvh - 100dvh)}}

/* The film's first frame sits over the film until it has played a few frames steadily, then fades: the
   decoder's first frames (often uneven) never show. */
.entry-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:opacity .35s ease}
.entry-media.live .entry-still{opacity:0}

/* Service cards (Jason, 2026-10-05: "the hero is too empty, visitors get lost"). The seven services float in
   the studio beside the car, each turned toward it at its own depth, and carry the shop's own photographs.
   They drift out as the story starts (window tint first) and float back for the closing "Start your project".
   main.js writes --svc (0 gone, 1 present); hover tilt and the sheen come from src/service-orbit.js. */
.svc-orbit{position:absolute;inset:0;z-index:2;perspective:1500px;perspective-origin:50% 54%;pointer-events:none;--svc:1;opacity:var(--svc)}
.svc-orbit[data-hidden]{visibility:hidden}
/* the closing view's car is larger: the cards stand further out */
.svc-orbit[data-phase=final]{--spread:1}
.svc-card{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:clamp(112px,9.6vw,168px);aspect-ratio:4/5;transform-style:preserve-3d;pointer-events:auto;text-decoration:none;color:#f4efe8;
  transform:translate(-50%,-50%) translateX(calc((1 - var(--svc)) * var(--side) * 16vw + var(--side) * var(--spread,0) * var(--out) * 1vw)) translateZ(calc(var(--z) - (1 - var(--svc)) * 320px)) rotateY(calc(var(--ry) * (1 + (1 - var(--svc)) * .6)))}
/* one slow breath, every card at rest within 5 s of the doors opening: endless motion would need a pause control */
.svc-float{display:block;width:100%;height:100%;transform-style:preserve-3d}
body.doors-open .svc-float{animation:svc-bob calc(2.4s + var(--i) * .1s) ease-in-out calc(1.1s + var(--i) * 70ms) 1}
@keyframes svc-bob{50%{transform:translateY(var(--bob,-9px))}}
.svc-face{position:relative;display:block;width:100%;height:100%;border-radius:6px;overflow:hidden;background:#14110f;
  border:1px solid #ffffff24;box-shadow:0 20px 26px -16px #000d,0 5px 10px -4px #000a;
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateZ(var(--lift,0px));transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,border-color .4s}
.svc-face img,.svc-face video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);filter:brightness(.84) saturate(.82) contrast(1.05);transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .5s}
.svc-card[data-depth=far] .svc-face img,.svc-card[data-depth=far] .svc-face video{filter:brightness(.72) saturate(.76) contrast(1.05)}
/* the studio's orange backlight: a warm cast over every print and a rim on the edge that faces the car */
.svc-face:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(var(--rim-dir,to left),#f591545e 0,#f5915400 24%),linear-gradient(to top,#050404f2 0%,#050404b8 30%,#05040400 62%),linear-gradient(#ff7a2a17,#ff7a2a17)}
.svc-card:nth-child(-n+4) .svc-face{--rim-dir:to left;border-right-color:#f59154a6}
.svc-card:nth-child(n+5) .svc-face{--rim-dir:to right;border-left-color:#f59154a6}
/* a soft light that follows the pointer across the print */
.svc-face:after{content:'';position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .4s;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),#ffffff2e,#ffffff00 55%)}
.svc-name{position:absolute;left:12px;right:34px;bottom:11px;z-index:3;font-family:var(--brand-heading);font-size:clamp(17px,1.45vw,22px);line-height:.98;letter-spacing:.015em;text-wrap:balance;text-shadow:0 1px 10px #000a}
.svc-arrow{position:absolute;right:10px;bottom:11px;z-index:3;width:18px;height:18px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.svc-card:hover .svc-face,.svc-card:focus-visible .svc-face{--lift:34px;border-color:#f5915499;box-shadow:0 46px 60px -24px #000e,0 14px 26px -10px #000c}
.svc-card:hover .svc-face:after{opacity:1}
.svc-card:hover img,.svc-card:focus-visible img,.svc-card:hover video,.svc-card:focus-visible video{transform:scale(1.1);filter:none}
.svc-card:hover .svc-arrow,.svc-card:focus-visible .svc-arrow{transform:translate(2px,-2px)}
.svc-card:focus-visible{outline:none}.svc-card:focus-visible .svc-face{outline:2px solid #f59154;outline-offset:3px}
/* Arrival: when the doors open the cards come forward out of the studio, one after another. */
/* the cue is the doors starting to part: the cards are still behind them until then, and arrive while they slide */
body.entry-locked:not(.doors-open) .svc-orbit{visibility:hidden}
/* the cards land with the doors (by 1.57 s), so nothing is still moving when the studio's first draws finish behind them */
body.doors-open .svc-face{animation:svc-arrive .85s cubic-bezier(.16,1,.3,1) calc(.3s + var(--i) * 70ms) backwards}
@keyframes svc-arrive{from{opacity:0;transform:translateZ(-260px) translateY(26px)}}
/* Tablets and phones: one swipeable row in the dark floor between the car and Explore details. */
@media(max-width:900px){
  .svc-orbit{inset:auto 0 calc(max(84px,13svh) + 62px + 100lvh - 100dvh) 0;height:168px;display:flex;align-items:center;gap:12px;padding:0 6vw;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:6vw;scrollbar-width:none;perspective:900px;perspective-origin:50% 0;pointer-events:auto;-webkit-overflow-scrolling:touch}
  .svc-orbit::-webkit-scrollbar{display:none}
  .svc-card{position:relative;left:auto;top:auto;flex:0 0 108px;width:108px;scroll-snap-align:start;transform:translateY(calc((1 - var(--svc)) * 40px)) rotateX(10deg)}
  .svc-name{left:9px;right:24px;bottom:8px;font-size:15px}.svc-arrow{right:6px;bottom:8px;width:15px;height:15px}
  .svc-card{--bob:-5px}
  /* the car is above the row here, so the light catches the top edge */
  .svc-orbit .svc-card:nth-child(n) .svc-face{--rim-dir:to bottom;border-color:#f59154a6 #ffffff24 #ffffff24}
}
@media(min-width:651px) and (max-width:900px){.svc-orbit{bottom:calc(max(56px,8svh) + 70px + 100lvh - 100dvh)}}
@media(max-width:900px){.svc-orbit[data-phase=final]{--spread:0;bottom:calc(max(40px,6svh) + 100lvh - 100dvh)}}
@media(prefers-reduced-motion:reduce){.svc-float,body.doors-open .svc-float,body.doors-open .svc-face{animation:none}.svc-face,.svc-face img,.svc-face video{transition:none}}

@media(max-width:650px){.final-copy .description{margin-inline:auto}}

/* The cards' clips are moving content: one control pauses them all (WCAG 2.2.2). It sits on the scroll note's
   line, bottom left, and leaves with the cards. */
.svc-pause{position:absolute;z-index:3;left:4.5vw;bottom:calc(22px + 100lvh - 100dvh);display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 14px 0 12px;border:1px solid #ffffff3d;border-radius:34px;background:#0b0908cc;color:#f4efe8;font:600 11px/1 var(--brand-body);letter-spacing:.08em;cursor:pointer;opacity:var(--svc,1);transition:border-color .3s}
.svc-pause:hover{border-color:#f59154}.svc-pause:focus-visible{outline:2px solid #f59154;outline-offset:3px}
.svc-pause i{width:10px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.svc-pause[aria-pressed=true] i{width:0;height:0;border-right:0;border-left:9px solid currentColor;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
@media(max-width:650px){.svc-pause{left:6vw;bottom:calc(16px + 100lvh - 100dvh);width:34px;padding:0;justify-content:center}.svc-pause span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* Short windows (laptop browsers under ~650px tall, phones in landscape): the closing line stays centred under
   the headline; the general short-window rule had pinned it to the left, under the service cards. */
@media(max-height:650px) and (min-width:651px){.final-copy .description{margin:10px auto}}

/* Phones and tablets: the card row is placed by the car, not by the screen bottom. The car is drawn on the
   100lvh canvas (its underside at about 60% of that height), so a toolbar coming or going no longer slides the
   row over it; Explore details sits right under the row. Each card fades on its own and the row leaves the page
   when hidden: iOS composites a horizontal scroller apart from its parent, so a fade on the row alone can fail. */
@media(max-width:900px){
  .svc-orbit{inset:auto 0;top:calc(61lvh + 2px);bottom:auto;height:136px;perspective:none;opacity:1}
  .svc-orbit[data-phase=final]{top:calc(71lvh);bottom:auto}
  .svc-orbit[data-hidden]{display:none}
  .svc-card{flex:0 0 96px;width:96px;opacity:var(--svc);transform:translateY(calc((1 - var(--svc)) * 30px))}
  .svc-name{font-size:14px;left:8px;bottom:7px}.svc-arrow{width:14px;height:14px;right:6px;bottom:7px}
  .hero-copy{top:17%}
  .hero-copy .explore-button{position:absolute;left:0;right:0;margin:0 auto;width:max-content;top:calc(44lvh + 150px)}
}

/* Service names on the cards in the brand gradient (Jason, 2026-10-05); the card's dark foot carries the contrast. */
.svc-name{background:linear-gradient(100deg,#ff3fa4 0%,#f59154 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;padding-bottom:1px}
@media(forced-colors:active){.svc-name,.svc-short{color:LinkText;-webkit-text-fill-color:LinkText;background:none}}
.svc-short,.svc-break{display:none}

/* Phones and tablets: no cards in the hero. The services are two short lines of gradient links under the car
   (Jason, 2026-10-05), fading out with the scroll and back at the close like the cards; no clips load here. */
@media(max-width:900px){
  .svc-orbit{top:calc(61lvh + 6px);height:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;padding:0 5vw;overflow:visible;scroll-snap-type:none}
  .svc-orbit[data-phase=final]{top:calc(77lvh)}
  .svc-card{flex:none;width:auto;aspect-ratio:auto;scroll-snap-align:none;transform:translateY(calc((1 - var(--svc)) * 14px))}
  .svc-float{display:none}
  .svc-break{display:block;flex-basis:100%;height:0}
  .svc-short{display:inline-flex;align-items:center;min-height:32px;font-family:var(--brand-heading);font-size:clamp(16px,4.6vw,20px);line-height:1;letter-spacing:.06em;text-transform:uppercase;
    background:linear-gradient(100deg,#ff3fa4 0%,#f59154 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  .svc-card:nth-child(-n+3) .svc-short:after,.svc-card:nth-child(6) .svc-short:after,.svc-card:nth-child(7) .svc-short:after{content:'';width:4px;height:4px;margin:0 9px;border-radius:50%;background:#f59154b3}
  .svc-card:focus-visible{outline:2px solid #f59154;outline-offset:2px;border-radius:2px}
  .hero-copy .explore-button{top:calc(44lvh + 84px)}
  .svc-pause{display:none}
}

/* Phones: in the opening and closing views the scroll hint follows the button / service links it sits under
   (both placed on the 100lvh stage), so a Safari toolbar can no longer slide it into them. */
@media(max-width:900px){
  body[data-chapter=hero] .stage>footer{visibility:hidden}
  body[data-chapter=final] .stage>footer{top:calc(77lvh + 78px);bottom:auto}
}

/* Phones: the opening scroll hint lives in the same block as Explore details, placed from the same reference,
   so the two can never meet whatever the browser's toolbars do. */
.hero-hint{display:none}
@media(max-width:900px){
  .hero-copy .hero-hint{display:block;position:absolute;left:0;right:0;margin:0 auto;width:max-content;top:calc(44lvh + 146px);
    font:500 9px/1 var(--brand-body);letter-spacing:.24em;text-transform:uppercase;color:#bab7b2;pointer-events:none}
  .hero-hint b{display:inline-block;margin-left:10px;font-size:13px;font-weight:400}
}
/* The entry film's first frame (and then the film) drift in slowly: the screen is alive before the film rolls. */
@media(prefers-reduced-motion:no-preference){.entry-media{animation:entry-push 26s cubic-bezier(.3,.1,.3,1) forwards}}
@keyframes entry-push{from{transform:scale(1)}to{transform:scale(1.08)}}

@media(max-width:900px){html:not(#tw-type) .hero-copy .hero-hint{font-size:10px;line-height:1;margin:0 auto}}

/* The stage lights up after Enter: until the studio's first frame exists the backlight is a CSS glow in the
   hero's own colours, and the canvas fades in over it. */
.stage{background:#08090a radial-gradient(ellipse 62% 30% at 50% 57%,#c4501c 0%,#7a260c 34%,#2a0c05 66%,#08090a 100%)}
#canvas{transition:opacity .45s ease}
#canvas:not(.lit){opacity:0}
@media(max-width:900px){.stage{background:#08090a radial-gradient(ellipse 120% 24% at 50% 55%,#c4501c 0%,#7a260c 36%,#2a0c05 68%,#08090a 100%)}}
@media(prefers-reduced-motion:reduce){#canvas{transition:none}}

/* While the entry film plays, the page under it is not painted at all (the first layout of the story's copy and
   cards stalled the film in Safari); it appears as the doors start to part. */
body.entry-locked:not(.doors-open) .stage{visibility:hidden}

/* The Enter button's glint exists (paused, invisible) from the first paint, so turning the button on does not
   build a new animated layer while the film plays; it only starts it. */
@media(prefers-reduced-motion:no-preference){
  #enter-studio:before{content:'';position:absolute;inset:-100%;z-index:-1;background:linear-gradient(110deg,transparent 40%,#ffffff50 49%,#ffffff77 50%,transparent 59%);animation:cta-light 4.8s ease-in-out infinite;animation-play-state:paused;opacity:0;pointer-events:none;will-change:transform}
  #enter-studio:not(:disabled):before{animation-play-state:running;opacity:1}
}

/* The Enter button carries its label only, centred (no arrow). */
#enter-studio:not(:disabled){justify-content:center}

/* Before the film rolls the screen holds its blurred first frame (.entry-media:before), and the film comes into
   focus as it starts: no sharp frozen frame of a hand mid-wipe. Only where autoplay is refused (iOS Low Power
   Mode) does the sharp first frame stand in until the first touch. */
.entry-media video{opacity:0;transition:opacity .5s ease}
.entry-media.live video{opacity:1}
.entry-still{opacity:0}
.entry-media.refused:not(.live) .entry-still{opacity:1}

/* Phones: no finish picker over the wrap chapter (Jason, 2026-10-05). */
@media(max-width:900px){#wrap-controls{display:none!important}}

/* Ceramic chapter: the copy sits on full-screen orange paint, where gradient words lose contrast. A soft dark
   pool behind the copy (no edge) keeps them readable. */
#ceramic-content{isolation:isolate}
#ceramic-content:before{content:'';position:absolute;z-index:-1;inset:-160px -260px -160px -240px;background:radial-gradient(closest-side,#0504045c 0%,#05040433 50%,#05040400 100%);pointer-events:none}
/* the pool alone read as a black patch (Jason, 2026-10-06): it is now faint, and each line carries its own shadow */
#ceramic-content .hl{filter:drop-shadow(0 1px 1px #000c) drop-shadow(0 0 10px #000a)}
#ceramic-content h2{text-shadow:0 2px 16px #000a}
/* First visit: while the studio's first draws run behind the car's still (main.js firstVisitGPU) the cards have
   arrived and hold still, as does the button's sheen; the float and sheen start with the live studio. */
body.tw-warming .svc-float,body.tw-warming .explore-button:before,body.tw-warming .site-quote:before,body.tw-warming .pill:before{animation-play-state:paused}
/* The car's first frame as an image (src/hero-still.js), between the stage's glow and the canvas: there as soon as the
   doors part, and covered by the live canvas as it fades in. */
.hero-still{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0}
/* The car's silhouette emerges as the doors part (Jason): slow enough to read as the opening, and the live studio has
   that long to get ready behind it on a first visit. The live canvas fades in at the same pace on a return visit. */
body.doors-open .hero-still{animation:still-in 1.2s cubic-bezier(.33,0,.2,1) .2s both}
@keyframes still-in{from{opacity:0}to{opacity:1}}
#canvas{transition:opacity 1.1s cubic-bezier(.33,0,.2,1)}
@media(prefers-reduced-motion:reduce){body.doors-open .hero-still{animation:none;opacity:1}#canvas{transition:none}}
.hero-still:not([src]){display:none}
/* Back on the homepage after Enter (index.html: tw-skip-intro): no entry film, straight to the studio. */
.tw-skip-intro #entry{display:none!important}
/* On a return the studio's first paint is the opening view: hero copy and header at once, no loading line. */
.tw-skip-intro .hero-copy{opacity:1}
.tw-skip-intro #loading{display:none}
.tw-skip-intro body>.site-header{animation:none!important}

/* Wheel chapter: each finish named in its own colour (Jason, 2026-10-06), on a chip that keeps it legible over the
   bright studio floor or the dark car alike: bright silver and champagne bronze on graphite, black on light silver. */
html:not(#tw-type) .stage .copy .description.finishes{display:flex;flex-wrap:wrap;gap:8px;max-width:340px;text-shadow:none}
.copy .fin{display:inline-block;padding:5px 12px 6px;border-radius:999px;font-weight:700;letter-spacing:.01em;line-height:1.25;text-shadow:none}
.copy .fin-silver{background:#121212e6;color:#eef1f5;box-shadow:inset 0 0 0 1px #ffffff2e}
.copy .fin-bronze{background:#121212e6;color:#dcb98a;box-shadow:inset 0 0 0 1px #dcb98a40}
.copy .fin-black{background:#ebe8e3f2;color:#0b0b0b;box-shadow:inset 0 0 0 1px #00000026}
@media (forced-colors:active){.copy .fin{background:Canvas;color:CanvasText}}