/* The display and chassis share a canvas; scroll moves the display in 3D. */
.scroll-hero { overflow:clip; padding:16px 0 0; background:radial-gradient(ellipse at 76% 42%,#153d715e,transparent 52%),#050d1b; }
.scroll-hero .hero-scroll-pin { position:relative; isolation:isolate; }
/* The backdrop drifts against the phone and softens while the phone is open,
   so the two sit at different depths instead of on one flat plane. */
.scroll-hero .hero-scroll-pin::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translate(calc(-50% + var(--parallax,0)*-24px),calc(var(--parallax,0)*-12px)) scale(1.05); z-index:-2; pointer-events:none; background:linear-gradient(90deg,#050d1be8 0%,#050d1ba3 38%,#050d1b33 72%,#050d1b2b),url("../img/remodel/space-background.webp") right top/cover no-repeat; }
.scroll-hero .hero-grid { min-height:0; gap:16px; }
.scroll-hero .hero-visual { width:100%; margin:0; transform:none; transition:none; }
.scroll-hero .hero-copy { padding-block:26px; }
.scroll-hero .hero-accent { color:#72b6ff; text-shadow:0 0 42px #2a83ed30; }
.scroll-hero .hero-benefits { margin-top:0; padding-block:22px; }
.scroll-hero .light-ribbon { width:100%; left:0; top:62%; opacity:.22; }
.phone-stage { --open:0; --old-lift:0; --old-exit:0; --new-enter:0; --new-lift:1; --pose-x:48; --pose-y:0; --pose-z:-30; --pose-lift:0; --pose-scale:1; position:relative; height:clamp(420px,63svh,570px); perspective:1100px; isolation:isolate; clip-path:inset(-100px -25px -35px); }
.phone-float { position:absolute; inset:0; transform-style:preserve-3d; animation:phone-hover 8s ease-in-out infinite; }
.phone-stage::before { content:""; position:absolute; inset:12% 4% 4%; z-index:-1; border-radius:50%; background:radial-gradient(ellipse,#3a99f238,transparent 65%); opacity:calc(.2 + var(--inspection-glow,0)*.8 + var(--depth,0)*.3); transform:translateX(calc(var(--pose-shift,0)*1px)) scale(calc(.86 + var(--inspection-glow,0)*.18 + var(--depth,0)*.1)); pointer-events:none; }
/* A key light tracks the beat, so the phone is lit by something that moves
   instead of sitting under a flat fill. --settle-pop flares it for the frame
   a part clicks home.
   No mix-blend-mode here, and no `transparent` stop. Both leaked: blending
   turned the whole stage into one compositing group and the gradient's
   near-zero tail lifted every pixel inside it by a level or two, which then
   stopped dead at the box edge and read as a faint rectangle hanging in the
   space to the left of the phone. Plain alpha compositing of a translucent
   blue looks the same against this backdrop and cannot touch a pixel the
   gradient does not cover. The last stop is a clear version of the gradient's
   OWN colour, because `transparent` is rgba(0,0,0,0) and interpolates
   through grey. */
   The sweep is also kept inside the box on purpose. The light fades out at
   70% of the ellipse radius, so the centre must stay at least .7*radius away
   from every edge or the ellipse is cut off by the element bounds and the cut
   IS the straight edge. 32%/38% radii fade at 22.4%/26.6%; the centre travels
   36%-66% across and 30%-54% down, which leaves 13.6% and 3.4% of clearance at
   the tightest point. */
.phone-stage::after { content:""; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:calc(.3 + var(--depth,0)*.4 + var(--settle-pop,0)*.55); background:radial-gradient(ellipse 32% 38% at calc(36% + var(--key-sweep,0)*30%) calc(30% + var(--key-sweep,0)*24%),#9fd3ff40,#4a9cf220 38%,#4a9cf200 70%); }
.phone-assembly { --display-seat:4px; position:absolute; width:64%; max-width:360px; aspect-ratio:2/3; left:50%; top:35px; transform-style:preserve-3d; transform:translate3d(calc(-50% + var(--pose-shift,0)*1px),calc(var(--pose-lift)*1px),0) rotateY(calc(var(--pose-y)*1deg + var(--phone-turn,0deg) + var(--rear-turn,0)*180deg)) rotateX(calc(var(--pose-x)*1deg + var(--phone-lean,0deg))) rotateZ(calc(var(--pose-z)*1deg)) scale(var(--pose-scale)); }
.phone-chassis,.phone-display { position:absolute; inset:0; transform-style:preserve-3d; backface-visibility:hidden; }
.scroll-hero .phone-assembly img { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:2/3; display:block; object-fit:contain; filter:none; border-radius:0; user-select:none; -webkit-user-drag:none; transform:translateZ(calc(1*var(--zs,1)*1px)); }
.phone-chassis { transform:translateZ(calc(-1*var(--zs,1)*1px)); clip-path:inset(7.5% 20.1% 8.1% round 9.2% / 6.2%); }
.phone-display { transform-origin:50% 7.2%; }
.phone-lock-screen { position:absolute; inset:0; width:100%; height:100%; color:#fff; transform:translateZ(calc(2*var(--zs,1)*1px)); pointer-events:none; }
.lock-screen-type { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI Variable Display","Segoe UI",Arial,sans-serif; }
.phone-lock-screen [data-lock-time] { font-weight:300; letter-spacing:-4px; }
.phone-lock-screen [data-lock-date] { font-weight:400; letter-spacing:-.3px; }
.phone-old .phone-lock-screen { visibility:var(--old-visible,visible); opacity:calc((.45 + var(--screen-wake,0)*.5)*(1 - var(--screen-off,0))); }
.phone-aod-shade { position:absolute; inset:0; background:rgb(0 0 0 / calc(.62 - var(--screen-wake,0)*.54)); transform:translateZ(calc(1.1*var(--zs,1)*1px)); }
.scroll-hero .phone-assembly .phone-damage-cracks { opacity:.78; mix-blend-mode:screen; transform:translateZ(calc(1.2*var(--zs,1)*1px)); animation:none!important; }
.phone-fault-lines { position:absolute; inset:0; width:100%; height:100%; opacity:calc(.95*(1 - var(--screen-off,0))); transform:translateZ(calc(1.3*var(--zs,1)*1px)); pointer-events:none; }
.phone-power-off { position:absolute; inset:0; background:#04070a; clip-path:inset(8.15% 21.15% 10.5% 21.25% round 6% / 3.4%); transform:translateZ(calc(2.2*var(--zs,1)*1px)); visibility:hidden; opacity:var(--screen-off,0); }
.scroll-hero .phone-assembly .phone-off-cracks { filter:none; opacity:.8; animation:none!important; }
.phone-sequence[data-phone-power="off"] .phone-power-off { visibility:inherit; }
.phone-new .phone-lock-screen { visibility:hidden; }
.phone-sequence[data-phone-power="off"] .phone-damage::after { display:none; }
.phone-sequence[data-phone-power="off"] .phone-damage>img { animation:none; }
.phone-sequence[data-repair-stage="fixed"] .phone-new .phone-lock-screen { visibility:visible; opacity:.95; }
.phone-complete-badge { position:absolute; left:50%; top:55%; width:25%; color:#bafadd; text-align:center; opacity:0; transform:translate(-50%,-50%) translateZ(calc(3*var(--zs,1)*1px)) scale(.82); transition:opacity .35s ease,transform .5s ease; pointer-events:none; }
.phone-complete-badge svg { display:block; width:100%; filter:drop-shadow(0 0 7px #45e8a52b); }
.phone-complete-badge span { display:block; font:500 clamp(8px,.9vw,11px)/1.3 Arial,Helvetica,sans-serif; letter-spacing:.03em; margin-top:3px; }
.phone-sequence[data-repair-stage="fixed"] .phone-complete-badge { opacity:1; transform:translate(-50%,-50%) translateZ(calc(3*var(--zs,1)*1px)) scale(1); animation:repair-check-reveal 2.8s ease-out both; }
@keyframes repair-check-reveal { 0% { opacity:0; transform:translate(-50%,-50%) translateZ(calc(3*var(--zs,1)*1px)) scale(.65); } 12% { opacity:1; transform:translate(-50%,-50%) translateZ(calc(3*var(--zs,1)*1px)) scale(1.09); } 22%,68% { opacity:1; transform:translate(-50%,-50%) translateZ(calc(3*var(--zs,1)*1px)) scale(1); } 100% { opacity:0; transform:translate(-50%,-50%) translateZ(calc(3*var(--zs,1)*1px)) scale(.97); } }
.phone-finish-sheen { position:absolute; inset:0; clip-path:inset(8.15% 21.15% 10.5% 21.25% round 6% / 3.4%); transform:translateZ(calc(2.5*var(--zs,1)*1px)); pointer-events:none; }
.phone-finish-sheen::after { content:""; position:absolute; inset:0; opacity:0; background:linear-gradient(115deg,transparent 33%,#e1fff533 50%,transparent 65%); }
.phone-sequence[data-repair-stage="fixed"] .phone-finish-sheen::after { animation:repair-glass-sheen 1.1s ease-out .15s both; }
@keyframes repair-glass-sheen { 0% { opacity:0; transform:translateX(-100%); } 25% { opacity:.9; } 100% { opacity:0; transform:translateX(100%); } }
.repair-celebration { --burst-spread:1; position:absolute; inset:0; transform:translateZ(-38px); pointer-events:none; }
.repair-celebration::before { content:""; position:absolute; inset:25% 20% 20%; border:1px solid #8af4c066; border-radius:50%; opacity:0; box-shadow:0 0 25px #4eefac22; }
.phone-sequence[data-repair-stage="fixed"] .repair-celebration::before { animation:repair-complete-ring 1.3s ease-out both; }
@keyframes repair-complete-ring { 0% { opacity:0; transform:scale(.65); } 20% { opacity:.55; } 100% { opacity:0; transform:scale(1.4); } }
.repair-celebration i { position:absolute; left:50%; top:52%; width:10px; height:10px; opacity:0; --burst-spin:50deg; }
.repair-spark::before,.repair-spark::after { content:""; position:absolute; border-radius:50%; background:#b3f7e0; box-shadow:0 0 8px #65eabf66; }
.repair-spark::before { left:4px; top:0; width:2px; height:10px; }
.repair-spark::after { left:0; top:4px; width:10px; height:2px; }
.repair-celebration .repair-confetti { width:4px; height:8px; border-radius:1px; background:#6be2b2; }
.repair-confetti:nth-child(even) { background:#79b9ff; }
.phone-sequence[data-repair-stage="fixed"] .repair-celebration i { animation:repair-complete-burst 1.45s cubic-bezier(.18,.7,.3,1) var(--burst-delay,0ms) both; }
@keyframes repair-complete-burst { 0% { opacity:0; transform:translate3d(calc(var(--burst-x)*var(--burst-spread)*.4),calc(var(--burst-y)*var(--burst-spread)*.4),0) scale(.3) rotate(0deg); } 15% { opacity:.95; } 65% { opacity:.75; } 100% { opacity:0; transform:translate3d(calc(var(--burst-x)*var(--burst-spread)),calc(var(--burst-y)*var(--burst-spread) + 18px),0) scale(.7) rotate(var(--burst-spin)); } }
.phone-old { visibility:var(--old-visible,visible); transform:translate3d(calc(var(--old-exit)*-145% + var(--old-arc,0)*10%),calc(var(--old-lift)*-18px + var(--old-exit)*-80px - var(--old-arc,0)*var(--screen-arc,45px)),calc(var(--display-seat,4px) + var(--old-lift)*var(--screen-lift,190px) + var(--old-arc,0)*25px)) rotateY(calc(var(--old-exit)*-32deg + var(--old-arc,0)*15deg)) rotateZ(calc(var(--old-exit)*-48deg - var(--old-arc,0)*14deg)) rotateX(calc(var(--old-lift)*-5deg + var(--old-hinge,0)*10deg - var(--old-arc,0)*8deg)) scaleY(1.022); }
.phone-new { visibility:var(--new-visible,hidden); transform:translate3d(calc((1 - var(--new-enter))*145% - var(--new-arc,0)*10%),calc(var(--new-lift)*var(--install-rise,-15px) + (1 - var(--new-enter))*var(--install-entry-rise,-35px) - var(--new-arc,0)*var(--install-arc,35px)),calc(var(--display-seat,4px) + var(--new-lift)*var(--install-lift,110px) + var(--new-arc,0)*var(--install-arc-depth,20px))) rotateY(calc((1 - var(--new-enter))*32deg - var(--new-arc,0)*12deg)) rotateZ(calc((1 - var(--new-enter))*-38deg + var(--new-arc,0)*22deg)) rotateX(calc(var(--new-lift)*-5deg + var(--new-arc,0)*8deg)) scaleY(1.022); }
/* Tucked inside the panel silhouette, not hanging off its edge: the display
   flex is folded in behind the screen before the screen goes near the phone,
   so a tab sticking out sideways during the descent is wrong. */
.display-flex { position:absolute; left:17%; top:44%; width:14%; height:6%; visibility:var(--display-flex-visible,hidden); transform:translateZ(calc(-1.1*var(--zs,1)*1px)); pointer-events:none; }
.phone-shell,.phone-panel-shell { position:absolute; left:19.25%; top:6.9%; width:61.5%; height:85.8%; transform-style:preserve-3d; transform:translateZ(calc(-1*var(--zs,1)*1px)); pointer-events:none; }
.phone-panel-shell { height:83.93%; }
.phone-display>img { clip-path:inset(6.9% 19.25% 7.3% round 10% / 6.65%); }
.phone-shell::before { content:""; position:absolute; inset:0; border:.8px solid #969d9c; border-radius:inherit; box-shadow:inset 0 0 0 .5px #555e5e; pointer-events:none; }
.phone-battery-depth { position:absolute; inset:0; transform-style:preserve-3d; }
.phone-battery-depth .phone-shell-back { background:#191c20; border:0; box-shadow:none; }
.phone-battery-depth .phone-wall { background:linear-gradient(#50545a,#24272c 20%,#111418 70%,#3b3f45); border:0; }
.phone-rear { position:absolute; inset:0; transform-style:preserve-3d; transform:translateZ(calc(-1*var(--body-depth,22px) - 3px)) rotateY(180deg); backface-visibility:hidden; }
.phone-housing-old .phone-rear { visibility:var(--old-rear-visible,hidden); }
.phone-housing-new .phone-rear { visibility:var(--new-rear-visible,hidden); }
.scroll-hero .phone-assembly .phone-rear img { transform:translateZ(calc(1*var(--zs,1)*1px)) scaleY(1.022); transform-origin:50% 7%; clip-path:inset(6.9% 19.25% 7.3% round 10% / 6.65%); }
.scroll-hero .phone-assembly .phone-rear .rear-housing-old { clip-path:none; transform:translateZ(calc(1*var(--zs,1)*1px)) translateY(-.2%) scale(.8913,.89); transform-origin:50% 50%; }
.phone-housing { position:absolute; inset:0; transform-style:preserve-3d; }
.phone-housing-old { visibility:var(--housing-old-visible,visible); transform:translate3d(calc(var(--housing-old-exit,0)*-120%),calc(var(--housing-old-exit,0)*-20px),calc(var(--housing-old-exit,0)*-15px)) rotateZ(calc(var(--housing-old-exit,0)*-18deg)); }
.phone-housing-new { visibility:var(--housing-new-visible,hidden); transform:translate3d(calc((1 - var(--housing-new-enter,0))*120%),calc((1 - var(--housing-new-enter,0))*-20px),calc((1 - var(--housing-new-enter,0))*-15px)) rotateZ(calc((1 - var(--housing-new-enter,0))*18deg)); }
.scroll-hero .phone-assembly .housing-transfer-art { opacity:1; transform:translateZ(calc(1.3*var(--zs,1)*1px)); }
.phone-component { position:absolute; inset:0; transform-style:preserve-3d; backface-visibility:hidden; visibility:var(--part-visible,visible); transform:translate3d(calc(var(--part-travel,0)*var(--part-x)*1%),calc(var(--part-travel,0)*var(--part-y)*1px),calc(var(--part-seat,1.5px) + var(--part-lift,0)*var(--component-lift,65px))) rotateZ(calc(var(--part-travel,0)*var(--part-bank)*1deg)); }
.component-face { position:absolute; inset:0; clip-path:var(--part-mask); }
.phone-component::before { content:""; position:absolute; inset:0; clip-path:var(--part-mask); background:#252a31; transform:translateZ(calc(-.8*var(--zs,1)*1px)); }
.component-front-speaker { --part-mask:polygon(22% 12%,25% 10.5%,38% 10.5%,38% 21.2%,25.3% 21.2%,25.3% 19.5%,22% 19.5%); --part-x:-95; --part-y:-38; --part-bank:-16; }
.component-front-sensors { --part-mask:polygon(39% 8.5%,58.8% 8.5%,58.8% 16%,44.8% 16%,44.8% 21.2%,39.5% 21.2%,39.5% 23%,38% 23%,38% 10.5%,39% 10.5%); --part-x:-65; --part-y:-90; --part-bank:18; }
.component-front-sensors::before,.component-rear-camera::before,.component-motherboard::before,.component-board-shield::before { display:none; }
.component-board-shield { --part-seat:2.7px; --part-x:-90; --part-y:-30; --part-bank:-14; }
.scroll-hero .phone-assembly .board-shield-art { inset:auto; left:3.1%; top:19.2%; width:56.5%; height:42.1%; aspect-ratio:auto; object-fit:fill; transform:translateZ(calc(.1*var(--zs,1)*1px)); }
/* Camera flex runs over the board and beneath the earpiece; plugged ends stay visible. */
.component-front-speaker .component-face { transform:translateZ(calc(.4*var(--zs,1)*1px)); }
.scroll-hero .phone-assembly .front-camera-connectors { inset:auto; left:28.25%; top:8.5%; width:30.5%; height:20%; aspect-ratio:auto; object-fit:fill; transform:translateZ(calc(.1*var(--zs,1)*1px)); }
.rear-camera-carrier { position:absolute; inset:0; background:#191d22; clip-path:polygon(61% 12.33%,75.5% 12.33%,75.5% 20.33%,78.25% 20.33%,78.25% 32.5%,58.25% 32.5%,58.25% 26.58%,47.5% 26.58%,45.375% 25.17%,45.375% 18.5%,47.5% 17.08%,61% 17.08%); transform:translateZ(calc(.05*var(--zs,1)*1px)); }
.scroll-hero .phone-assembly .rear-camera-connectors,.scroll-hero .phone-assembly .rear-camera-pod { inset:auto; aspect-ratio:auto; object-fit:fill; transform:translateZ(calc(.2*var(--zs,1)*1px)); }
.scroll-hero .phone-assembly .rear-camera-upper { left:38.42%; top:11.333%; width:40.244%; height:26.689%; clip-path:inset(3.747% 7.863% 62.531% 56.107%); }
.scroll-hero .phone-assembly .rear-camera-lower { left:41.63%; top:10.728%; width:37.86%; height:24.03%; clip-path:inset(39.967% 3.282% 9.409% 43.893%); }
.scroll-hero .phone-assembly .rear-camera-third { left:35.458%; top:9.912%; width:46.9%; height:27.964%; clip-path:inset(25.646% 48.473% 40.383% 21.145%); }
.rear-flex-ribbon { position:absolute; inset:0; background:linear-gradient(110deg,#ffffff08,transparent 35%,#0002),url("../img/remodel/scroll-phone-rear-camera-real-flex.webp"); background-size:auto,4093.75% 3753.125%; background-position:0 0,18.78% 72.71%; transform:translateZ(calc(.15*var(--zs,1)*1px)); }
.rear-flex-one { clip-path:polygon(45.6% 22.6%,46.8% 23.6%,43.6% 25.2%,41.9% 25.9%,41.9% 28.5%,40% 28.5%,40% 25.6%,42.3% 24.3%,43.6% 23.2%); }
.rear-flex-two { clip-path:polygon(46.3% 22.6%,48% 24%,43.3% 27%,38.9% 28.3%,38.9% 31.7%,36.5% 31.7%,36.5% 27.4%,41.5% 25.8%,44.1% 23.7%); }
.rear-flex-three { clip-path:polygon(47% 23%,48.5% 23.9%,45.6% 26.8%,42% 28.5%,42% 32.3%,39.9% 32.3%,39.9% 27.9%,43.8% 25.8%,45.4% 24%); }
.scroll-hero .phone-assembly .rear-camera-real-plug { inset:auto; aspect-ratio:auto; object-fit:fill; transform:translateZ(calc(.25*var(--zs,1)*1px)); }
.scroll-hero .phone-assembly .rear-plug-one { left:36.78%; top:18.33%; width:30.1%; height:18.44%; clip-path:inset(45.2% 83.2% 36.4% 10.5%); }
.scroll-hero .phone-assembly .rear-plug-two { left:35.1%; top:16.24%; width:36.38%; height:19.52%; clip-path:inset(65.2% 88.85% 9.24% 3.44%); }
.scroll-hero .phone-assembly .rear-plug-three { left:31.61%; top:17.18%; width:31%; height:18.6%; clip-path:inset(70.9% 62.3% 7.2% 26.2%); }
.scroll-hero .phone-assembly .bare-motherboard { inset:auto; left:13.4%; top:19%; width:37%; height:42.7%; aspect-ratio:auto; object-fit:fill; transform:translateZ(0); }
.component-rear-camera { --part-mask:polygon(58.8% 8%,78% 8%,78% 32.8%,43.3% 32.8%,43.3% 21.2%,44.8% 21.2%,44.8% 16%,58.8% 16%); --part-x:95; --part-y:-38; --part-bank:20; }
.component-motherboard { --part-mask:polygon(22% 19.5%,25.3% 19.5%,25.3% 21.2%,38% 21.2%,38% 23%,39.5% 23%,39.5% 21.2%,43.3% 21.2%,43.3% 60.1%,22% 60.1%); --part-x:-100; --part-y:24; --part-bank:-12; }
.component-lidar { --part-x:-80; --part-y:6; --part-bank:-16; --part-seat:1.45px; }
.component-rear-bracket { --part-x:95; --part-y:-24; --part-bank:16; --part-seat:2.1px; }
.component-lidar::before,.component-rear-bracket::before { display:none; }
.lidar-piece { position:absolute; left:47.5%; top:27%; width:10.8%; height:6.3%; transform-style:preserve-3d; transform:rotateY(calc(var(--part-lift,0)*180deg)); }
.scroll-hero .phone-assembly .lidar-piece img { inset:0; width:100%; height:100%; aspect-ratio:auto; object-fit:fill; backface-visibility:hidden; transform:translateZ(calc(.1*var(--zs,1)*1px)); }
.scroll-hero .phone-assembly .lidar-piece .lidar-optics { transform:rotateY(180deg) translateZ(calc(.1*var(--zs,1)*1px)); }
.scroll-hero .phone-assembly .rear-bracket-art { inset:auto; left:43.5%; top:10.5%; width:37%; height:23%; aspect-ratio:auto; object-fit:fill; transform:translateZ(calc(.1*var(--zs,1)*1px)); }
.component-taptic-engine { --part-x:-80; --part-y:40; --part-bank:-12; --part-mask:polygon(23.75% 81.25%,43.125% 81.25%,43.125% 82.08%,46.125% 82.08%,46.125% 83.83%,43.125% 83.83%,43.125% 86.67%,23.75% 86.67%); }
.component-loudspeaker { --part-x:80; --part-y:42; --part-bank:14; --part-mask:polygon(43.75% 81.25%,72.5% 81.25%,74.75% 82.67%,74.75% 89.83%,72.625% 91.17%,58.625% 91.17%,58.625% 87.08%,43.75% 87.08%); }
.component-taptic-engine::before,.component-loudspeaker::before { transform:translateZ(calc(-2*var(--zs,1)*1px)); }
.scroll-hero .phone-assembly .bottom-component-bays { transform:translateZ(calc(1.4*var(--zs,1)*1px)); }

.scroll-hero .phone-housing .housing-internals { clip-path:polygon(evenodd,0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,22% 8%,78% 8%,78% 32.8%,43.3% 32.8%,43.3% 60.1%,22% 60.1%,22% 8%,0% 0%,45% 33.1%,74.8% 33.1%,76.5% 34.2%,76.5% 78.8%,75.2% 80.5%,25.2% 80.5%,23.8% 79.1%,23.8% 61.6%,25.2% 60.1%,41.8% 60.1%,43.3% 58.7%,43.3% 34.7%,45% 33.1%,0% 0%); }
.phone-shell-back { position:absolute; inset:0; background:#858c8b; border:.5px solid #666e6e; box-shadow:0 24px 32px #0007; }
.phone-wall { position:absolute; left:0; top:0; transform-origin:0 0; transform-style:preserve-3d; background:linear-gradient(rgb(0 0 0 / var(--wall-shade,.05)),rgb(0 0 0 / var(--wall-shade,.05))),linear-gradient(180deg,#b1b6b4 0%,#929a98 8%,#828b89 22%,#8c9492 70%,#7b8583 94%,#a5adaa 100%); border:none; box-sizing:border-box; backface-visibility:hidden; }
.phone-antenna { position:absolute; top:0; height:100%; width:1px; background:#c1c5c0; opacity:.8; }
.phone-fastener { position:absolute; top:50%; width:2px; height:2px; background:#303b44; border:.4px solid #acb7c0; border-radius:50%; transform:translateY(-50%); }

.phone-panel-shell .phone-wall { background:linear-gradient(180deg,#8f9795,#343d3d); }
.phone-port { position:absolute; left:50%; top:50%; width:19%; height:52%; transform:translate(-50%,-50%); border:.7px solid #4d5654; border-radius:999px; background:#101614; box-shadow:inset 0 .6px 1px #000,0 .4px 0 #a2aaa6; }
.phone-port::after { content:""; position:absolute; width:72%; height:22%; left:14%; top:39%; background:#8e9084; border-radius:1px; }
.phone-speakers { position:absolute; top:50%; display:flex; justify-content:space-between; transform:translateY(-50%); }
/* The bottom wall runs right-to-left in the upright phone's coordinates. */
.phone-speakers.left { right:7%; width:18%; }
.phone-speakers.right { left:6%; width:27%; }
.phone-speakers i { display:block; flex:none; width:var(--hole-size,2.8px); height:var(--hole-size,2.8px); background:#202824; border-radius:50%; box-shadow:inset 0 .4px .5px #000,0 .4px 0 #a9b0aa; }
.phone-side-button { position:absolute; top:28%; height:42%; transform-style:preserve-3d; transform:translateZ(var(--button-projection,.6px)); background:linear-gradient(#a1aaa6,#87928d 65%,#7b8781); border:.55px solid #56635c; border-radius:999px; box-shadow:0 .35px .5px #18231b66; }
.phone-side-button::before { content:""; position:absolute; inset:-.5px; background:#5b6860; border-radius:inherit; transform:translateZ(calc(-1*var(--button-projection,.6px))); }
.phone-antenna-window { position:absolute; top:25%; height:50%; background:#737f79; border:.4px solid #929d96; border-radius:999px; }

.phone-damage { position:absolute; inset:0; transform:translateZ(calc(1*var(--zs,1)*1px)); clip-path:inset(8.15% 21.15% 10.5% 21.25% round 6% / 3.4%); }
.scroll-hero .phone-internals { clip-path:polygon(evenodd,0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,45% 33.1%,74.8% 33.1%,76.5% 34.2%,76.5% 78.8%,75.2% 80.5%,25.2% 80.5%,23.8% 79.1%,23.8% 61.6%,25.2% 60.1%,41.8% 60.1%,43.3% 58.7%,43.3% 34.7%,45% 33.1%,0% 0%); }
.phone-battery { position:absolute; inset:0; transform-style:preserve-3d; backface-visibility:hidden; }
.scroll-hero .phone-assembly .battery-connector { inset:auto; left:34.6%; top:56%; width:13%; height:6.52%; aspect-ratio:auto; object-fit:fill; transform-origin:91% 93%; transform:translateZ(calc(2.1*var(--zs,1)*1px)) rotateX(calc(var(--connector-lift,0)*-35deg)); }
.phone-battery-old { --connector-lift:var(--battery-old-lift,0); }
.phone-battery-new { --connector-lift:var(--battery-new-lift,0); }
.phone-battery-face { position:absolute; inset:0; clip-path:polygon(45% 33.1%,74.8% 33.1%,76.5% 34.2%,76.5% 78.8%,75.2% 80.5%,25.2% 80.5%,23.8% 79.1%,23.8% 61.6%,25.2% 60.1%,41.8% 60.1%,43.3% 58.7%,43.3% 34.7%); }
.phone-battery-well { transform:translateZ(calc(1.1*var(--zs,1)*1px)); }
.phone-inspection-scan { position:absolute; inset:0; transform:translateZ(calc(1.5*var(--zs,1)*1px)); clip-path:inset(7% 20% 8% round 8%); opacity:calc(var(--inspection-glow,0)*(1 - var(--parts-open,0))); pointer-events:none; }
.phone-inspection-scan svg { width:100%; height:100%; }
.inspection-sweep { transform:translateY(calc(var(--scan,0)*560px)); }
.inspection-coil { transform-origin:424px 614px; transform:rotate(calc(var(--scan,0)*100deg)); opacity:.65; }
.phone-shell::after { content:""; position:absolute; inset:-2px; border:1px solid #a6eaff; border-radius:14% / 7%; opacity:var(--seat-flash,0); box-shadow:0 0 13px #4dc9ff80,inset 0 0 9px #4dc9ff50; }
.phone-battery-old { visibility:var(--battery-old-visible,visible); transform:translate3d(calc(var(--battery-old-exit,0)*-120% + var(--battery-old-arc,0)*8%),calc(var(--battery-old-lift,0)*-8px + var(--battery-old-exit,0)*-32px - var(--battery-old-arc,0)*var(--battery-arc,12px)),calc(-.5px + var(--battery-old-lift,0)*var(--battery-travel,85px) + var(--battery-old-arc,0)*15px)) rotateY(calc(var(--battery-old-exit,0)*-24deg + var(--battery-old-arc,0)*10deg)) rotateZ(calc(var(--battery-old-exit,0)*-22deg - var(--battery-old-arc,0)*12deg)); }
.scroll-hero .phone-battery-old img { left:12.93%; top:20%; width:74.43%; height:66.39%; object-fit:fill; aspect-ratio:auto; }
.phone-battery-upper { clip-path:polygon(45% 33.1%,74.8% 33.1%,76.5% 34.2%,76.5% 60.2%,43.3% 60.2%,43.3% 34.7%); }
.phone-battery-foot { clip-path:polygon(43.3% 60.1%,76.5% 60.1%,76.5% 78.8%,75.2% 80.5%,25.2% 80.5%,23.8% 79.1%,23.8% 61.6%,25.2% 60.1%); }
.scroll-hero .phone-battery-upper img { left:14.18%; top:25.68%; width:72.97%; height:56.97%; }
.scroll-hero .phone-battery-well img { top:2%; }
.phone-battery-new { visibility:var(--battery-new-visible,hidden); transform:translate3d(calc((1 - var(--battery-new-enter,0))*120% - var(--battery-new-arc,0)*12%),calc(var(--battery-new-lift,1)*-8px + var(--battery-new-arc,0)*var(--battery-arc,12px)),calc(-.5px + var(--battery-new-lift,1)*var(--battery-travel,85px) + var(--battery-new-arc,0)*15px)) rotateY(calc((1 - var(--battery-new-enter,0))*24deg - var(--battery-new-arc,0)*15deg)) rotateZ(calc((1 - var(--battery-new-enter,0))*-32deg + var(--battery-new-arc,0)*20deg)); }
.has-scroll-phone .phone-damage img { animation:oled-flicker 4.8s steps(1,end) infinite; }
.phone-damage::after { content:""; position:absolute; inset:8% 21% 10.5%; background:linear-gradient(90deg,transparent 27.5%,#63ff7870 27.5% 28%,transparent 28% 73%,#ff4ada70 73% 73.5%,transparent 73.5%); mix-blend-mode:screen; animation:oled-lines 2.9s ease-in-out infinite alternate; }
.phone-sequence[data-repair-stage="fixed"] .phone-damage { visibility:hidden; }
.phone-orbit { position:absolute; width:88%; height:38%; left:6%; top:38%; border:1px solid #3e91ee4d; border-radius:50%; transform:rotate(-24deg); box-shadow:0 0 30px #237fff0d; pointer-events:none; }
.phone-orbit::after { content:""; position:absolute; left:14%; top:10%; width:5px; height:5px; border-radius:50%; background:#8bcfff; box-shadow:0 0 15px #3399ff; }
.phone-orbit-one { animation:phone-orbit 18s ease-in-out infinite alternate; }
.phone-orbit-two { top:30%; width:100%; left:0; height:55%; border-style:dashed; border-color:#3b84d32b; transform:rotate(35deg); animation:phone-orbit-outer 24s ease-in-out infinite alternate; }
.phone-particles { position:absolute; inset:0; pointer-events:none; }
.phone-particles i { position:absolute; width:3px; height:3px; border-radius:50%; background:#a5d9ff; box-shadow:0 0 17px #168bff; animation:phone-spark 6s ease-in-out infinite alternate; }
.phone-particles i:nth-child(1) { left:10%; top:25%; }
.phone-particles i:nth-child(2) { left:85%; top:16%; animation-delay:-2s; }
.phone-particles i:nth-child(3) { left:88%; top:77%; animation-delay:-4s; }
.phone-detail { position:absolute; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:#bcd7f8; border-left:1px solid #64afff; padding:8px 11px; background:#071425b3; pointer-events:none; }
.phone-detail-display { right:0; top:13%; opacity:calc(var(--open)*.9); transform:translateY(calc((1 - var(--open))*12px)); }
.phone-detail-inside { left:0; bottom:16%; opacity:calc(var(--open)*.9); transform:translateY(calc((1 - var(--open))*-12px)); }
.scroll-hero .phone-caption { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 0 12px; flex-wrap:wrap; font-size:10px; color:#b7cae2; }
/* The prices sit under the animation as a footnote, not in the headline:
   they are the reason to choose this shop, but they are not the first
   thing anyone should have shouted at them. */
.scroll-hero .phone-prices { margin:0; padding:0 0 4px; text-align:center; font-size:11px; line-height:1.6; color:#9fb6d2; max-width:46ch; margin-inline:auto; }
.scroll-hero .phone-prices strong { color:#cfe4ff; font-weight:600; }
.scroll-hero .hero-visual .art-disclaimer { margin-left:8px; }
.phone-scroll-cue { display:flex; gap:12px; align-items:center; justify-content:center; color:#a9c6e9; font-size:10px; letter-spacing:.02em; padding:0 0 18px; }
.phone-scroll-arrow { font-size:18px; animation:phone-cue 2s ease-in-out infinite; }
/* Six ticks name the repair as it happens, so the sequence reads as a job
   with a beginning and an end rather than a loop of moving parts. */
.phone-beat-label { min-width:104px; text-align:right; color:#d3e6ff; }
.phone-beat-rail { position:relative; display:flex; align-items:center; justify-content:space-between; width:124px; height:9px; }
.phone-progress { position:absolute; left:0; right:0; top:50%; margin-top:-1px; height:2px; background:#29405e; overflow:hidden; }
.phone-progress>span { display:block; width:100%; height:100%; background:#8dcfff; transform-origin:left; transform:scaleX(var(--progress,0)); }
.phone-beat-rail i { position:relative; width:5px; height:5px; border-radius:50%; background:#29405e; box-shadow:0 0 0 2px #050d1b; transition:background .18s linear,transform .18s ease-out; }
.phone-sequence[data-beat="1"] .phone-beat-rail i:nth-of-type(-n+2),
.phone-sequence[data-beat="2"] .phone-beat-rail i:nth-of-type(-n+3),
.phone-sequence[data-beat="3"] .phone-beat-rail i:nth-of-type(-n+4),
.phone-sequence[data-beat="4"] .phone-beat-rail i:nth-of-type(-n+5),
.phone-sequence[data-beat="5"] .phone-beat-rail i { background:#8dcfff; }
.phone-sequence[data-beat="0"] .phone-beat-rail i:nth-of-type(1),
.phone-sequence[data-beat="1"] .phone-beat-rail i:nth-of-type(2),
.phone-sequence[data-beat="2"] .phone-beat-rail i:nth-of-type(3),
.phone-sequence[data-beat="3"] .phone-beat-rail i:nth-of-type(4),
.phone-sequence[data-beat="4"] .phone-beat-rail i:nth-of-type(5),
.phone-sequence[data-beat="5"] .phone-beat-rail i:nth-of-type(6) { background:#cdeaff; transform:scale(1.85); box-shadow:0 0 0 2px #050d1b,0 0 9px #4aa8ff; }
.has-scroll-phone .phone-sequence { --open:0; }
@media(min-width:900px) {
  .has-scroll-phone .scroll-hero { height:calc(100svh + 1250px); }
  .scroll-hero .hero-scroll-pin::before { filter:blur(calc(var(--depth,0)*1.8px)); }
  .has-scroll-phone .scroll-hero .hero-scroll-pin { position:sticky; top:78px; min-height:calc(100svh - 78px); display:flex; flex-direction:column; justify-content:center; padding-top:8px; }
  .has-scroll-phone .scroll-hero .hero-grid { flex:1; width:100%; }
}
@media(min-width:900px) and (max-height:740px) { .scroll-hero h1 { font-size:68px; } .scroll-hero .hero-copy { padding-block:10px; } .phone-stage { height:420px; --screen-lift:120px; --install-lift:60px; --install-rise:-6px; --install-entry-rise:-12px; --install-arc:12px; --install-arc-depth:12px; } .phone-assembly { width:52%; max-width:300px; top:15px; } }
@media(max-width:899px) {
  .scroll-hero .hero-scroll-pin::before { bottom:auto; height:min(950px,115svh); background-image:linear-gradient(180deg,#050d1b26,#050d1bb3 55%,#050d1b 100%),url("../img/remodel/space-background.webp"); background-size:auto,auto 180%; background-position:center,center bottom; }
  .hero-device-pin { position:relative; isolation:isolate; }
  .hero-device-pin::before { content:""; position:absolute; inset:-16px auto -8px; left:50%; width:100vw; transform:translateX(-50%); z-index:-2; pointer-events:none; background:linear-gradient(180deg,#050d1b 0,#050d1bd9 7%,#050d1b8c 16%,#050d1b45 26%,#050d1b55 70%,#050d1b 100%),url("../img/remodel/space-background.webp") right top/cover no-repeat; }
  .repair-celebration { --burst-spread:.8; }
  .phone-component { --component-lift:40px; }
  .scroll-hero { padding-top:26px; }
  .scroll-hero .hero-grid { grid-template-columns:1fr; gap:6px; }
  .scroll-hero .hero-copy { padding-block:8px 12px; }
  .scroll-hero .hero-visual { max-width:620px; margin-inline:auto; }
  .phone-stage { height:470px; --screen-lift:110px; --install-lift:70px; --install-rise:-8px; --install-entry-rise:-12px; --install-arc:12px; --install-arc-depth:10px; }
  .phone-assembly { width:66%; max-width:260px; top:40px; }
  .has-scroll-phone .phone-sequence { height:calc(950px + 100svh - var(--phone-pin-top,88px)); }
  .has-scroll-phone .hero-device-pin { position:sticky; top:var(--phone-pin-top,88px); min-height:calc(100svh - var(--phone-pin-top,88px)); display:flex; flex-direction:column; justify-content:center; }
  .phone-detail { font-size:9px; }
  .scroll-hero .hero-benefits { margin-top:0; }
  /* Keep the repair movement, without continuous mobile compositing effects. */
  .phone-float,.phone-scroll-arrow,.has-scroll-phone .phone-damage img { animation:none!important; }
  .phone-orbit,.phone-particles,.repair-celebration,.phone-finish-sheen { display:none; }
  /* The key light is a blended full-stage layer; skip the compositing cost on
     phones and let the stage glow carry the lighting instead. */
  .phone-stage::after { display:none; }
  .phone-beat-label { min-width:92px; }
  .phone-beat-rail { width:104px; }
  .phone-damage::after { animation:none; }
  .scroll-hero .hero-accent { text-shadow:none; }
  .phone-complete-badge svg { filter:none; }
  .rear-flex-ribbon { background:#202327; }
  /* iOS z-fights layers that sit a fraction of a pixel apart in a
     preserve-3d scene: the internals strobe as the depth test flips each
     frame. Two fixes, neither visible on a flat-ish phone pose: overlays
     inside one part (screen glass, lock screen, cracks; a camera carrier
     and its ribbons) paint in DOM order instead of by depth, and the parts
     that must stay 3D sit four times further apart. */
  .phone-display,.phone-component,.phone-chassis { transform-style:flat; }
  .phone-assembly { --zs:4; --display-seat:10px; }
  .phone-component { --part-seat:5px; }
}
@media(max-width:480px) {
  .repair-celebration { --burst-spread:.68; }
  .phone-stage { height:min(410px,calc(100svh - 190px)); --screen-lift:95px; --screen-arc:24px; --install-lift:50px; --install-rise:-8px; --install-entry-rise:-8px; --install-arc:6px; --install-arc-depth:8px; --battery-travel:55px; --battery-arc:7px; }
  .phone-assembly { width:76%; max-width:min(230px,calc((100svh - 230px)*.53)); top:32px; }
  .phone-detail-display { top:9%; right:1%; }
  .phone-detail-inside { bottom:8%; left:1%; }
  .phone-orbit { width:94%; left:3%; }
  .scroll-hero .phone-caption { gap:6px; font-size:9px; }
  .scroll-hero .phone-prices { font-size:10px; }
  .scroll-hero .hero-visual .art-disclaimer { font-size:9px; }
}
html[data-motion="paused"] .phone-float { animation:none; }
html[data-motion="paused"] .phone-scroll-cue { visibility:hidden; }
html[data-motion="paused"] .repair-celebration { display:none; }
html[data-motion="paused"] .phone-finish-sheen,html[data-motion="paused"] .phone-inspection-scan { display:none; }
html[data-motion="paused"] .phone-complete-badge { display:none; }
@keyframes phone-hover { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes phone-orbit { from { transform:rotate(calc(-24deg + var(--repair-progress,0)*80deg)) scale(.98); opacity:.6; } to { transform:rotate(calc(-12deg + var(--repair-progress,0)*80deg)) scale(1.03); opacity:1; } }
@keyframes phone-orbit-outer { from { transform:rotate(calc(35deg - var(--repair-progress,0)*100deg)); opacity:.4; } to { transform:rotate(calc(50deg - var(--repair-progress,0)*100deg)); opacity:.8; } }
@keyframes phone-spark { from { opacity:.25; transform:translateY(0); } to { opacity:.9; transform:translateY(-18px); } }
@keyframes phone-cue { 0%,100% { transform:translateY(0); opacity:.6; } 50% { transform:translateY(4px); opacity:1; } }
@keyframes oled-flicker { 0%,30%,74%,100% { filter:brightness(1); } 24%,29% { filter:brightness(.73); } 67%,73% { filter:brightness(.84); } }
@keyframes oled-lines { from { opacity:.15; } to { opacity:.7; } }
@media(prefers-reduced-motion:reduce) {
  .repair-celebration { display:none; }
  .phone-complete-badge { display:none; }
  .phone-finish-sheen { display:none; }
  .has-scroll-phone .scroll-hero { height:auto; }
  .has-scroll-phone .scroll-hero .hero-scroll-pin { position:relative; top:auto; min-height:0; }
  .has-scroll-phone .phone-sequence { height:auto; }
  .has-scroll-phone .hero-device-pin { position:relative; top:auto; }
  .phone-float,.phone-orbit,.phone-particles i,.phone-scroll-arrow,.phone-damage img,.phone-damage::after { animation:none!important; }
  .phone-scroll-cue { display:none; }
}
@media print { .has-scroll-phone .scroll-hero,.has-scroll-phone .phone-sequence { height:auto; } .has-scroll-phone .scroll-hero .hero-scroll-pin,.has-scroll-phone .hero-device-pin { position:static; min-height:0; } .phone-scroll-cue,.phone-orbit,.phone-particles { display:none; } }