/* Motion and palette review layer. Header brand artwork stays unchanged. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-head{height:142px;padding-top:48px}
.palette-island{position:fixed;z-index:150;top:9px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;padding:8px 13px 8px 21px;background:#101010f5;border:1px solid #ffffff24;border-radius:30px;color:#fff;box-shadow:0 8px 26px #0003;backdrop-filter:blur(22px);max-width:calc(100% - 24px)}
.palette-caption{min-width:88px;line-height:1.3;flex-shrink:0}.palette-caption>span{display:block;font-size:7px;letter-spacing:.14em;color:#8e8e8e;margin-bottom:3px}.palette-caption strong{display:block;font-size:10px;font-weight:600}
.palette-swatches{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none;padding:3px;scroll-behavior:smooth}.palette-swatches::-webkit-scrollbar{display:none}
.palette-swatch{position:relative;flex:0 0 30px;width:30px;height:30px;border-radius:50%;padding:6px;background:transparent;transition:background .3s,transform .45s var(--motion-ease)}
.palette-swatch i{display:block;width:100%;height:100%;background:var(--swatch);border-radius:50%;transition:transform .45s var(--motion-ease)}
.palette-swatch:after{content:'';position:absolute;inset:2px;border:1px solid #fff;border-radius:50%;opacity:0;transform:scale(.65);transition:opacity .3s,transform .45s var(--motion-ease)}
.palette-swatch:hover{background:#ffffff14;transform:translateY(-1px)}.palette-swatch[aria-pressed=true]:after{opacity:.9;transform:scale(1)}.palette-swatch[aria-pressed=true] i{transform:scale(.8)}.palette-swatch:focus-visible{outline:2px solid white;outline-offset:0}
.hero:before,.page-intro:before,.site-head,.contact-band,.bento-brand,.bento-slogan,.bento-words,.accent-text,.hero h1,.section-head h2 span,.process h2 span,.sum strong,.eyebrow,.footer .brand{transition:background-color .65s ease,color .65s ease,box-shadow .65s ease}
.nav-cta,.hero-link,.outline-btn,.black-cta,.cta,.download{transition:background-color .35s,color .35s,border-color .35s,transform .5s var(--motion-ease)}
.hero-link:hover,.black-cta:hover,.cta:hover{transform:translateY(-3px)}.hero-link span,.black-cta span,.round-arrow,.service-cta span{transition:transform .5s var(--motion-ease)}
.hero-link:hover span,.black-cta:hover span,.cta:hover .round-arrow,.service-cta:hover span{transform:rotate(45deg)}
.hero-link:active,.black-cta:active,.cta:active,.download:active{transform:scale(.98)}

/* Loop: A enters, R joins, the signature assembles, then rolls through. */
.bento-brand{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.logo-loop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:100%;font-family:'Golos Text',sans-serif;color:var(--accent);transition:color .65s ease}
.logo-letters{height:82px;width:134px;position:relative;overflow:hidden;font-size:91px;font-weight:900;letter-spacing:-.12em;line-height:.86}
.logo-a,.logo-r,.logo-echo{position:absolute;display:block;top:0;will-change:transform,opacity}
.logo-a{left:0;animation:logo-a-cycle 8s var(--motion-ease) infinite}
.logo-r{left:57px;animation:logo-r-cycle 8s var(--motion-ease) infinite}
.logo-echo{left:0;opacity:0;animation:logo-echo-cycle 8s var(--motion-ease) infinite}
.logo-lockup{text-align:center;animation:logo-lockup-cycle 8s var(--motion-ease) infinite}
.logo-lockup strong{display:block;font-size:12px;font-weight:700;letter-spacing:.28em;padding-left:.28em}
.logo-lockup>span{display:block;font-size:7px;letter-spacing:.16em;margin-top:4px;font-weight:500}
@keyframes logo-a-cycle{0%,5%{opacity:0;transform:translateY(100%) rotate(8deg)}16%,61%{opacity:1;transform:translateY(0) rotate(0)}76%,100%{opacity:0;transform:translateY(-110%) rotate(-7deg)}}
@keyframes logo-r-cycle{0%,13%{opacity:0;transform:translateY(110%) rotate(-8deg)}25%,64%{opacity:1;transform:translateY(0) rotate(0)}79%,100%{opacity:0;transform:translateY(-110%) rotate(7deg)}}
@keyframes logo-echo-cycle{0%,65%{opacity:0;transform:translateY(110%) scaleX(.85)}78%,86%{opacity:1;transform:translateY(0) scaleX(1)}98%,100%{opacity:0;transform:translateY(-110%) scaleX(.85)}}
@keyframes logo-lockup-cycle{0%,20%{opacity:0;transform:translateY(9px);letter-spacing:.4em}33%,81%{opacity:1;transform:translateY(0)}95%,100%{opacity:0;transform:translateY(-8px)}}
.motion-paused *{animation-play-state:paused!important}
.bento-props,.bento-live,.bento-motion{padding:0!important;background:#111;position:relative;overflow:hidden}
.media-placeholder{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;height:100%;min-height:100px;overflow:hidden;background:#121212}
.placeholder-frame{position:absolute;inset:27px;border:1px solid #ffffff0e;border-radius:9px;transition:border-color .6s,transform .8s var(--motion-ease)}
.placeholder-frame:before,.placeholder-frame:after{content:'';position:absolute;width:13px;height:13px;border-color:#ffffff48;border-style:solid;transition:border-color .5s}
.placeholder-frame:before{top:-1px;left:-1px;border-width:1px 0 0 1px;border-radius:8px 0 0 0}.placeholder-frame:after{bottom:-1px;right:-1px;border-width:0 1px 1px 0;border-radius:0 0 8px 0}
.placeholder-copy{position:relative;z-index:1;display:flex;align-items:center;flex-direction:column;gap:12px;text-align:center;padding:20px}
.placeholder-plus{font-family:'Golos Text',sans-serif;font-weight:300;font-size:22px;font-style:normal;color:#777;display:grid;place-items:center;width:36px;height:36px;border:1px solid #ffffff20;border-radius:50%;line-height:1;transition:color .4s,border-color .4s,transform .7s var(--motion-ease)}
.placeholder-copy strong{font-size:12px;font-weight:500;color:#a3a3a3;letter-spacing:0}
.placeholder-copy small{font-size:8px;line-height:1.7;color:#646464;letter-spacing:.04em}
.showreel-placeholder .placeholder-copy strong{font-size:17px}.showreel-placeholder .placeholder-plus{width:47px;height:47px;font-size:29px}.showreel-placeholder .placeholder-copy small{font-size:8px;letter-spacing:.18em}
.showreel-placeholder .placeholder-frame{inset:23px}
.equipment-placeholder .placeholder-copy{gap:8px}.equipment-placeholder .placeholder-plus{width:28px;height:28px;font-size:18px}.equipment-placeholder .placeholder-frame{inset:17px}
.bento-motion .placeholder-copy{gap:8px}.bento-motion .placeholder-copy small{font-size:7px;letter-spacing:.13em}
.media-placeholder:hover .placeholder-plus{color:var(--accent);border-color:var(--accent);transform:rotate(90deg)}.media-placeholder:hover .placeholder-frame{border-color:#ffffff20;transform:scale(.975)}
.word-strip{animation-timing-function:linear}.bento-slogan strong{display:block;min-height:1.1em}

/* Cards enter in small groups; interactions stay separate from scroll reveals. */
.service-card{transition:opacity .8s ease,translate 1s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.service-card.reveal-card{opacity:0;translate:0 32px}.service-card.is-revealed{opacity:1;translate:0 0}
.service-media{transition:transform .7s var(--motion-ease),border-color .5s,box-shadow .6s}
.service-card:hover .service-media,.service-card:focus-within .service-media{transform:translateY(-7px);border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 14px 34px #0003}
.service-card:hover .placeholder-plus{color:var(--accent);border-color:var(--accent);transform:rotate(90deg)}
.service-copy h3{transition:color .4s}.service-card:hover .service-copy h3{color:var(--accent)}
.service-placeholder .placeholder-frame{inset:70px 24px 49px}.service-placeholder .placeholder-copy{padding-top:30px}
.service-cta{transition:background .4s,color .4s,border-color .4s,transform .5s var(--motion-ease)}.service-cta:active{transform:scale(.96)}

/* Only the selected production stage takes up space. */
.process-list{display:flex;flex-direction:column;gap:7px;align-items:flex-end;align-self:start}
.process-item{width:95%;padding:12px 17px;margin:0;gap:14px;border-radius:11px;align-items:flex-start;background:#0c0c0c;border-color:#242424;color:#9b9b9b;transition:width .65s var(--motion-ease),padding .65s var(--motion-ease),background .6s,border-color .6s,color .4s}
.process-num{font-size:9px;line-height:21px;padding:0;color:#666;transition:color .5s}
.process-text{min-width:0}.process-text strong{font-size:13px;line-height:21px;font-weight:600;letter-spacing:-.015em;transition:font-size .6s var(--motion-ease),color .4s}
.process-item .process-body{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(6px);margin:0;font-size:12px;line-height:1.75;color:#a4a4a4;transition:grid-template-rows .65s var(--motion-ease),opacity .35s ease,transform .5s var(--motion-ease),margin .6s var(--motion-ease)}
.process-body>span{overflow:hidden;min-height:0;display:block}
.process-item>i{font-size:15px;font-style:normal;line-height:21px;color:#666;transition:transform .6s var(--motion-ease),color .5s}
.process-item[aria-expanded=true]{width:100%;padding:23px 22px;background:#151515;color:#f0f0f0;border-color:#3b3b3b}
.process-item[aria-expanded=true] .process-text strong{font-size:19px}.process-item[aria-expanded=true] .process-num{color:var(--accent)}
.process-item[aria-expanded=true] .process-body{display:grid;grid-template-rows:1fr;margin-top:12px;color:#aaa;opacity:1;transform:translateY(0);transition:grid-template-rows .65s var(--motion-ease),opacity .5s ease .12s,transform .65s var(--motion-ease),margin .6s var(--motion-ease)}
.process-item[aria-expanded=true]>i{transform:rotate(90deg);color:var(--accent)}.process-item:hover{border-color:#515151;color:white}

/* Native inputs remain focusable; only their appearance is custom. */
.extra{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:13px;padding:17px 18px;border-color:#2c2c2c;transition:background .45s,border-color .45s,transform .5s var(--motion-ease)}
.extra>input{position:absolute;left:18px;top:50%;width:24px;height:24px;margin-top:-12px;opacity:0;z-index:2;cursor:pointer}
.extra>span{margin:0;white-space:normal}.extra .extra-label{color:#bcbcbc;font-size:12px;transition:color .4s}.extra .extra-price{color:#888;font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .4s}
.extra .extra-check{width:24px;height:24px;border:1px solid #484848;border-radius:7px;background:#181818;display:grid;place-items:center;transition:background .35s,border-color .35s,transform .5s var(--motion-ease)}
.extra-check svg{display:block;width:20px;height:20px;overflow:visible;fill:none;stroke:var(--onaccent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.extra-check path{stroke-dasharray:15;stroke-dashoffset:15;transition:stroke-dashoffset .4s var(--motion-ease)}
.extra:has(input:checked){background:color-mix(in srgb,var(--accent) 5%,#111);border-color:color-mix(in srgb,var(--accent) 36%,#252525)}
.extra input:checked+.extra-check{background:var(--accent);border-color:var(--accent)}.extra input:checked+.extra-check path{stroke-dashoffset:0;transition-delay:.08s}
.extra:has(input:checked) .extra-label{color:#f3f3f3}.extra:has(input:checked) .extra-price{color:var(--accent)}
.extra:hover{border-color:#555}.extra:active .extra-check{transform:scale(.9)}.extra:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:4px}
.hour{transition:background .45s,border-color .45s,color .45s,transform .4s var(--motion-ease)}.hour:hover{border-color:var(--accent);transform:translateY(-2px)}.hour:active{transform:scale(.94)}
.format{transition:background .45s,border-color .45s,color .45s,transform .5s var(--motion-ease)}.format:active{transform:scale(.985)}
#summary-lines{display:flex;flex-direction:column}
.estimate-line{display:grid;grid-template-rows:0fr;opacity:0;translate:0 7px;transition:grid-template-rows .6s var(--motion-ease),opacity .35s ease,translate .6s var(--motion-ease)}
.estimate-line.is-present{grid-template-rows:1fr;opacity:1;translate:0 0}
.estimate-inner{overflow:hidden;min-height:0}
.summary-row{margin:0;padding:9px 0;gap:14px;line-height:1.6}
.summary-row b{font-variant-numeric:tabular-nums;min-width:82px;text-align:right;font-weight:500}
.sum{margin-top:18px}.sum strong{font-family:'Golos Text',Arial,sans-serif;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.055em}
.summary h2{min-height:1.5em}.summary{overflow:hidden;top:84px}

@media(max-width:850px){.palette-island{gap:10px;padding-left:16px}.palette-caption{min-width:75px}.palette-swatch{flex-basis:28px;width:28px;height:28px}.site-head{height:140px;padding-top:47px}.logo-letters{height:80px}.process-item{width:97%}}
@media(max-width:600px){
 .site-head{height:125px;padding-top:47px}.palette-island{top:7px;max-width:calc(100% - 24px);width:auto;padding:5px 9px;gap:0;border-radius:24px}
 .palette-caption{display:none}.palette-swatches{padding:2px;gap:1px}.palette-swatch{flex-basis:24px;width:24px;height:27px;padding:5px 4px}.palette-swatch:after{inset:2px 0;border-radius:50%}
 .logo-loop{gap:8px}.logo-letters{height:62px;width:98px;font-size:68px}.logo-r{left:42px}.logo-lockup strong{font-size:8px;letter-spacing:.23em}.logo-lockup>span{font-size:5px;letter-spacing:.1em}
 .placeholder-frame{inset:15px}.placeholder-copy{gap:8px;padding:16px}.placeholder-copy strong{font-size:10px}.placeholder-copy small{font-size:6px;line-height:1.6}.placeholder-plus{height:27px;width:27px;font-size:18px}
 .equipment-placeholder .placeholder-frame{inset:11px}.equipment-placeholder .placeholder-copy{padding:15px 9px;gap:6px}.equipment-placeholder .placeholder-plus{width:23px;height:23px;font-size:16px}
 .equipment-placeholder .placeholder-copy strong{font-size:9px}.bento-motion .placeholder-copy small{font-size:5px;letter-spacing:.04em}.showreel-placeholder .placeholder-copy strong{font-size:16px}
 .process-item{width:95%;padding:10px 14px;gap:12px;border-radius:10px}.process-text strong{font-size:11px}.process-num{font-size:8px}.process-item>i{font-size:13px}
 .process-item[aria-expanded=true]{padding:20px 17px}.process-item[aria-expanded=true] .process-text strong{font-size:16px}.process-item .process-body{font-size:11px}
 .extra{grid-template-columns:22px minmax(0,1fr) auto;gap:9px;padding:15px 12px}.extra .extra-check{width:22px;height:22px;border-radius:6px}.extra>input{left:12px;width:22px;height:22px;margin-top:-11px}.extra .extra-label{font-size:10px}.extra .extra-price{font-size:9px}
 .summary-row{font-size:11px}.service-card{transition-delay:0ms}.service-placeholder .placeholder-copy strong{font-size:13px}.service-placeholder .placeholder-plus{width:36px;height:36px;font-size:24px}
}
@media(max-width:370px){.palette-swatches{max-width:calc(100vw - 48px)}.palette-swatch{flex-basis:24px}.palette-island{max-width:calc(100% - 20px)}}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .logo-a,.logo-r,.logo-lockup{opacity:1;transform:none}.logo-echo{display:none}.service-card.reveal-card{opacity:1;translate:none}
}