/* Three-dimensional repair experience; original photos retain their full frame. */
.home-experience { background: #090c12; color: #f0f3fa; --muted: #a4adbd; --line: #29303c; --blue: #719bff; --blue-hover: #aac3ff; }
.home-experience .site-header { background: #090c12; border-color: #252b35; }
.home-experience .nav-wrap { min-height: 94px; }
.home-experience .hero-shell { position: relative; isolation: isolate; overflow: hidden; background: #090c12; }
.home-experience .hero-shell::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 79% 43%,#254ea42b,transparent 45%),linear-gradient(90deg,transparent calc(50% - 1px),#7c97c00a 50%,transparent calc(50% + 1px)); }
.home-experience .hero { grid-template-columns: .95fr 1.15fr; gap: 12px; min-height: 740px; padding-block: 25px 35px; }
.home-experience .hero-copy { position: relative; z-index: 2; padding-block: 36px; }
.home-experience .location-label { display: flex; align-items: center; gap: 10px; font-size: .875rem; margin-bottom: 35px; color: #bcc5d5; }
.home-experience .location-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #89aeff; box-shadow: 0 0 13px #5c89ff9c; }
.home-experience .hero h1 { font-size: clamp(3.7rem,6.8vw,6.35rem); font-weight: 600; letter-spacing: -.067em; line-height: 1.02; }
.home-experience .hero-title-bottom { color: #a8bde2; }
.home-experience .hero .lead { color: #b3bdcd; max-width: 410px; font-size: 1.0625rem; margin-top: 28px; }
.home-experience .hero .button-row { gap: 20px; margin-top: 32px; }
.home-experience .button { color: #fff; background: #3564e4; border: 1px solid #628afa; border-radius: 8px; box-shadow: inset 0 1px 0 #ffffff30,0 5px 22px #0c1d5545; transition: transform .2s,background .2s,box-shadow .2s; }
.home-experience .button:hover { background: #4978f3; transform: translateY(-2px); box-shadow: inset 0 1px 0 #ffffff40,0 7px 28px #325de43d; }
.home-experience .nav-contact { background: #eaf0ff; color: #111a2f; border-color: #f3f6ff; }
.home-experience .hero .plain-link { color: #c9d5eb; font-size: .875rem; }
.home-experience .hero-other { color: #8390a4; border: 0; max-width: 380px; padding-top: 0; margin-top: 24px; font-size: .875rem; }
.phone-stage { min-width: 0; position: relative; width: 100%; height: 670px; isolation: isolate; }
.phone-stage::before { content: ''; position: absolute; z-index: -1; width: 66%; height: 65%; left: 18%; top: 13%; background: radial-gradient(ellipse,#416edd26,transparent 69%); filter: blur(20px); }
.phone-stage::after { content: ''; position: absolute; z-index: -1; width: 60%; height: 23px; bottom: 85px; left: 20%; border-radius: 50%; background: #000; filter: blur(17px); opacity: .65; }
.phone-stage canvas { width: 100%; height: 575px; display: block; cursor: grab; touch-action: pan-y; outline-offset: -5px; }
.phone-stage canvas.is-dragging { cursor: grabbing; }
.phone-stage canvas[hidden],.scene-controls[hidden],.scene-fallback[hidden] { display: none; }
.scene-fallback { max-width: 370px; margin: 10px auto; }
.scene-fallback img { max-height: 570px; width: 100%; height: auto; object-fit: contain; }
.scene-fallback figcaption { color: #a4adbd; }
.scene-top { opacity: 0; position: absolute; top: 4px; inset-inline: 24px; display: flex; justify-content: space-between; gap: 16px; color: #8e9bb1; font-size: .75rem; letter-spacing: .04em; pointer-events: none; }
.scene-ready .scene-top { opacity: 1; }
.scene-top span:last-child { color: #69788e; }
.scene-controls { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 15px; }
.scene-controls-main { display: flex; align-items: center; justify-content: center; gap: 12px; }
.scene-open { min-height: 48px; border: 1px solid #7286b271; background: linear-gradient(165deg,#303c58,#151e31); color: #f0f4ff; border-radius: 8px; padding: 12px 20px; font-size: .9375rem; box-shadow: inset 0 1px 0 #ffffff18,0 8px 20px #0004; transition: background .2s,transform .2s; }
.scene-open:hover { background: #334970; transform: translateY(-2px); }
.scene-open[aria-pressed=true] { border-color: #729bff; background: #20376a; }
.scene-reset { color: #b6c4dc; border: 1px solid #354055; background: #121925; border-radius: 8px; min-height: 48px; padding: 10px 14px; font-size: .875rem; }
.scene-reset:hover { background: #26334a; color: #fff; }
.scene-help { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: .75rem; color: #8b99af; }
.scene-pause { color: #9caac0; padding: 7px 0; background: none; border: 0; font-size: .875rem; text-decoration: underline; text-underline-offset: 4px; }
.bench-strip { border-block: 1px solid #252d3c; background: #0c1018; }
.bench-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 18px; font-size: .875rem; color: #b2bed2; }
.bench-strip a { color: #d8e4ff; }
.bench-strip .strip-note { color: #8492a9; }
.home-experience .repairs-section { padding-block: 75px 85px; }
.section-index { display: block; color: #7b8fac; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 15px; }
.home-experience .section-heading h2 { font-size: clamp(2rem,3.4vw,3rem); color: #f0f3fa; }
.home-experience .repair-list { border: 0; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.home-experience .repair-list > a { position: relative; padding: 28px 24px; border: 1px solid #2b3445; border-radius: 12px; background: linear-gradient(145deg,#1c2535 -30%,#10151f 80%); box-shadow: inset 0 1px 0 #ffffff06,0 10px 30px #0002; transition: transform .25s,border-color .25s,box-shadow .25s; }
.home-experience .repair-list > a:hover { transform: translateY(-7px); border-color: #607ea9; box-shadow: 0 18px 30px #0004; color: #fff; }
.home-experience .repair-list h3 { font-size: 1.125rem; color: #e9effa; }
.home-experience .repair-list p { font-size: 1rem; color: #98a7bf; }
.home-experience .repair-list > a > span { font-size: .875rem; color: #a7c0ff; margin-top: 28px; }
.home-experience .service-icon { width: 38px; height: 38px; color: #8cb0ff; margin-bottom: 30px; filter: drop-shadow(0 5px 10px #6197ff33); }
.home-experience .about-section { background: #e7e9ed; color: #151b25; padding-block: 80px; }
.home-experience .about-layout { grid-template-columns: 1.1fr .9fr; gap: 75px; }
.home-experience .about-layout p,.home-experience .about-layout figcaption { color: #4e5b6c; }
.home-experience .about-layout .plain-link { color: #264cb4; }
.home-experience .about-layout .section-index { color: #526179; }
.home-experience .about-layout .photo-link { box-shadow: 0 22px 45px #13244024; border: 5px solid #fff; border-radius: 10px; }
.home-experience .work-section { padding-block: 85px; }
.home-experience .gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; }
.home-experience .gallery figure:last-child { grid-column: auto; width: auto; max-width: none; }
.home-experience .gallery figure { background: #111721; border: 1px solid #2c3544; border-radius: 10px; overflow: hidden; }
.home-experience .gallery .photo-link { border-radius: 0; background: #19202c; }
.home-experience .gallery img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.home-experience .gallery figcaption { margin: 0; padding: 18px 20px; color: #c2cee2; display: flex; align-items: center; justify-content: space-between; }
.home-experience .gallery figcaption::after { content: '↗'; color: #8ea9da; }
.home-experience .photo-expand { color: #e9f0ff; background: #101828e6; border: 1px solid #77859e73; border-radius: 6px; backdrop-filter: blur(8px); }
.home-experience .contact-line { border-top: 1px solid #34415a; padding-block: 56px 70px; }
.home-experience .contact-line h2 { font-size: clamp(2.2rem,4.5vw,4rem); font-weight: 550; }
.home-experience .contact-line p { color: #99a7bd; }
.home-experience .site-footer { background: #070a0f; border-top: 1px solid #252d3a; }
.home-experience .footer-bottom { border-color: #273041; }
@media (min-width:801px) and (max-width:1100px) {
 .home-experience .hero { grid-template-columns: 1fr 1fr; gap: 0; min-height: 655px; }
 .phone-stage { height: 605px; }.phone-stage canvas { height: 510px; }
 .scene-top { inset-inline: 12px; }.scene-top span:last-child { display: none; }
 .home-experience .hero h1 { font-size: 4.4rem; }
 .home-experience .repair-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .home-experience .about-layout { gap: 38px; }
}
@media (max-width:800px) {
 .home-experience .nav-wrap { min-height: 82px; }
 .home-experience nav { background: #090c12; }
 .home-experience .hero { grid-template-columns: 1fr; padding-top: 32px; gap: 0; }
 .home-experience .hero-copy { padding-block: 10px 0; }
 .home-experience .hero h1 { font-size: clamp(3.8rem,10vw,5.5rem); }
 .home-experience .hero h1 > span { display: inline; }.home-experience .hero h1 > span + span::before { content: ' '; }
 .home-experience .hero .lead { max-width: 560px; margin-top: 20px; }
 .home-experience .hero .button-row { flex-direction: row; align-items: center; margin-top: 25px; }
 .home-experience .location-label { margin-bottom: 24px; }
 .phone-stage { height: 620px; max-width: 620px; margin: 20px auto 0; }.phone-stage canvas { height: 525px; }
 .home-experience .repair-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .home-experience .about-layout { gap: 35px; }
 .bench-strip .strip-note { display: none; }
}
@media (max-width:540px) {
 .home-experience .hero h1 { font-size: clamp(3.1rem,12.6vw,4.5rem); }
 .home-experience .hero h1 > span { display: block; }.home-experience .hero h1 > span + span::before { content: none; }
 .home-experience .hero .plain-link { font-size: .875rem; }
 .phone-stage { height: 535px; margin-top: 25px; width: calc(100% + 24px); margin-left: -12px; }.phone-stage canvas { height: 440px; }
 .scene-top { inset-inline: 14px; }.scene-top span:last-child { display: none; }
 .scene-controls { padding: 0 8px; }.scene-open { padding-inline: 15px; }
 .scene-help { gap: 8px 14px; }
 .bench-strip .wrap { flex-wrap: wrap; gap: 8px; font-size: .8125rem; }
 .home-experience .repairs-section,.home-experience .work-section { padding-block: 55px; }
 .home-experience .repair-list { grid-template-columns: 1fr; gap: 12px; }
 .home-experience .repair-list > a { padding: 24px; display: grid; grid-template-columns: 42px 1fr; column-gap: 18px; }
 .home-experience .service-icon { grid-row: 1 / 4; margin: 2px 0 0; width: 32px; height: 32px; }
 .home-experience .repair-list p { margin-top: 8px; }.home-experience .repair-list > a > span { margin-top: 16px; }
 .home-experience .about-section { padding-block: 50px; }
 .home-experience .gallery { grid-template-columns: 1fr; gap: 24px; }
 .home-experience .gallery figure:last-child { width: 100%; }
 .home-experience .contact-line { padding-block: 35px 50px; }
}
@media (prefers-reduced-motion: reduce) {
 .home-experience * { scroll-behavior: auto; transition: none !important; }
 .home-experience .repair-list > a:hover,.home-experience .button:hover,.scene-open:hover { transform: none; }
}

.scene-credit { color: #9caac0; font-size: .75rem; text-decoration: underline; text-underline-offset: 4px; }

/* Compact controls for the separated display, frame, and rear assembly. */
.scene-controls-main { flex-wrap: wrap; gap: 8px; }
.scene-top { font-size: .75rem; letter-spacing: 0; }
@media (max-width: 540px) { .scene-controls-main .scene-open { padding-inline: 16px; } .scene-controls-main .scene-reset { padding-inline: 12px; } }

/* Display comparison: all three choices and their quote links stay visible. */
.display-options { padding-block: 20px 86px; scroll-margin-top: 24px; }
.display-intro { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 34px; }
.display-eyebrow { display: block; color: #b1c5eb; font-size: .875rem; margin-bottom: 16px; }
.display-intro h2 { font-size: clamp(2.1rem,4.2vw,3.6rem); line-height: 1.07; letter-spacing: -.05em; }
.display-intro > p { max-width: 365px; color: #abb7cb; font-size: 1rem; padding-bottom: 4px; }
.display-options-panel { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.display-card { --display-accent: #93baff; --display-tint: #192940; position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #354155; border-radius: 18px; background: #111720; transition: border-color .25s,transform .25s,box-shadow .25s; }
.display-card--premium { --display-accent: #c0acff; --display-tint: #27233b; }
.display-card--apple { --display-accent: #a4dacc; --display-tint: #1b302e; }
.display-card:hover,.display-card:focus-within { border-color: var(--display-accent); transform: translateY(-4px); box-shadow: 0 16px 35px #0004; }
.display-card-visual { position: relative; color: var(--display-accent); background: radial-gradient(ellipse at 50% 75%,var(--display-tint),#111720 75%); border-bottom: 1px solid #ffffff0c; }
.display-card-index { position: absolute; top: 20px; left: 24px; color: var(--display-accent); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.display-diagram { width: 100%; height: 190px; display: block; overflow: visible; }
.display-visual-caption { display: block; text-align: center; font-size: .8125rem; color: #bac6d9; padding-bottom: 16px; }
.display-card-body { display: flex; flex-direction: column; flex: 1; padding: 25px; }
.display-card h3 { color: #f3f6fc; font-size: 1.65rem; line-height: 1.2; letter-spacing: -.04em; }
.display-card-tagline { font-size: .9375rem; color: var(--display-accent); margin-top: 9px; }
.display-description { color: #b4bfd0; margin-top: 19px; font-size: 1rem; flex: 1; }
.display-detail { font-size: .875rem; line-height: 1.55; color: #9caac0; border-top: 1px solid #303947; padding-top: 17px; margin-top: 24px; }
.display-quote { min-height: 48px; margin-top: 22px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--display-accent); border: 1px solid transparent; border-radius: 8px; color: #101721; font-weight: 650; font-size: .9375rem; transition: filter .2s; }
.display-quote:hover { color: #101721; filter: brightness(1.1); }
.display-quote span { font-size: 1.2rem; transition: transform .2s; }
.display-quote:hover span { transform: translate(2px,-2px); }
.display-help { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 25px 28px; margin-top: 22px; border: 1px solid #323f54; background: #121c2b; border-radius: 12px; }
.display-help-copy { display: flex; gap: 18px; align-items: center; }
.display-help-copy > svg { width: 34px; height: 34px; flex-shrink: 0; color: #a9c7ff; }
.display-help h3 { font-size: 1.0625rem; color: #edf3ff; }
.display-help p { color: #abbad0; font-size: .9375rem; margin-top: 4px; }
.display-help-link { flex-shrink: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; color: #dae7ff; border: 1px solid #62779c; padding: 10px 16px; border-radius: 8px; font-size: .9375rem; }
.display-help-link:hover { background: #233858; color: #fff; }
.display-options-note { color: #99a7bc; font-size: .875rem; margin-top: 18px; text-align: center; }
/* Short SVG sequences give the icons a Lottie-like motion without a player download. */
.diagram-glass { transform: translate(9px,14px); }
.diagram-crack,.diagram-guide { opacity: 0; }
.motion-playing .diagram-glass { animation: replace-glass 2.8s cubic-bezier(.22,.7,.25,1) both; }
.motion-playing .diagram-crack { animation: glass-crack 2.8s both; }
.motion-playing .diagram-repaired { animation: glass-confirm 2.8s both; }
.motion-playing .diagram-guide { animation: glass-guide 2.8s both; }
.motion-playing .diagram-check { stroke-dasharray: 1; animation: draw-confirm 2.8s both; }
.home-experience .repair-list .motion-playing .service-icon { animation: service-nod 1.1s ease both; transform-origin: 50% 80%; }
@keyframes replace-glass { 0%,12% { transform: translate(9px,14px); } 40%,57% { transform: translate(-5px,-7px); } 85%,100% { transform: translate(9px,14px); } }
@keyframes glass-crack { 0%,28% { opacity: 1; } 43%,100% { opacity: 0; } }
@keyframes glass-confirm { 0%,55% { opacity: 0; } 82%,100% { opacity: 1; } }
@keyframes glass-guide { 0%,25%,85%,100% { opacity: 0; } 40%,63% { opacity: 1; } }
@keyframes draw-confirm { 0%,70% { stroke-dashoffset: 1; } 92%,100% { stroke-dashoffset: 0; } }
@keyframes service-nod { 0%,100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-5px) rotate(-7deg); } 65% { transform: translateY(-2px) rotate(4deg); } }
@media (max-width:900px) {
 .display-intro { align-items: start; gap: 24px; }.display-intro > p { max-width: 280px; }
 .display-options-panel { gap: 12px; }.display-card-body { padding: 20px; }.display-card h3 { font-size: 1.4rem; }
}
@media (max-width:700px) {
 .display-options { padding-block: 0 55px; }.display-intro { display: block; margin-bottom: 25px; }.display-intro > p { max-width: none; margin-top: 20px; }
 .display-options-panel { grid-template-columns: 1fr; gap: 18px; }
 .display-card { display: flex; flex-direction: column; }
 .display-card-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 1px solid #ffffff0c; }
 .display-card-index { top: 16px; left: 16px; }
 .display-diagram { width: 100%; height: 175px; flex-shrink: 0; }
 .display-visual-caption { display: none; }.display-card-body { padding: 22px 20px; }
 .display-description { margin-top: 14px; }.display-detail { padding-top: 12px; margin-top: 16px; }.display-quote { margin-top: 17px; }
 .display-help { align-items: stretch; flex-direction: column; gap: 20px; padding: 24px; }.display-help-link { justify-content: space-between; }
 .display-options-note { text-align: left; }
}
@media (max-width:400px) { .display-card-body { padding: 20px; }.display-help-copy { gap: 12px; } }
@media (prefers-reduced-motion:reduce) {
 .display-options *, .home-experience .service-icon { animation: none !important; transition: none !important; }
 .display-card:hover,.display-card:focus-within,.display-quote:hover span { transform: none; }
}

/* Keep the current device name compact while preserving the heading height. */
.home-experience .hero-copy { container-type: inline-size; }
.home-experience .hero h1.rotating-headline { font-size: clamp(1.9rem,12.5cqi,6.35rem); }
.home-experience .hero h1 .headline-rotation { position: relative; display: block; overflow: hidden; transition: width .42s cubic-bezier(.2,.7,.2,1); padding-block: .08em .15em; margin-block: -.08em -.15em; }
.headline-phrase { position: absolute; top: .08em; left: 0; width: max-content; display: block; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(.5em); transition: opacity .42s ease,transform .42s cubic-bezier(.2,.7,.2,1),visibility .42s; pointer-events: none; }
.headline-phrase.is-current { position: relative; top: auto; opacity: 1; visibility: visible; transform: translateY(0); }
.headline-phrase.is-leaving { transform: translateY(-.5em); }
.home-experience .hero h1.rotating-headline > .hero-title-bottom { display: block; }
.home-experience .hero h1.rotating-headline > .hero-title-bottom::before { content: none; }
.headline-motion { padding: 6px 0; margin-top: 16px; border: 0; background: transparent; color: #a4b3ca; font-size: .875rem; text-decoration: underline; text-underline-offset: 4px; min-height: 32px; }
.headline-motion:hover { color: #e5edff; }.headline-motion[hidden] { display: none; }
.home-experience .headline-motion + .lead { margin-top: 16px; }
@media (prefers-reduced-motion:reduce) { .home-experience .hero h1 .headline-rotation, .headline-phrase { transition: none; transform: none; }.headline-phrase.is-leaving { transform: none; } }

.home-experience .hero h1 > .headline-line { display: flex; align-items: baseline; gap: .18em; white-space: nowrap; }
.headline-line .headline-rotation { flex: 0 0 auto; }
.headline-line .headline-phrase { text-align: left; }
.headline-suffix { display: block; }

.scene-reset[aria-pressed="true"] { background: #2b405e; border-color: #90addb; color: #fff; }
@media (max-width:540px) { .phone-stage { height: 610px; }.phone-stage::after { bottom: 160px; } }

/* Each display option has a separate visual and motion sequence. */
.premium-light { opacity: 0; }
.premium-glint { opacity: .65; }
.motion-playing .premium-surface { animation: premium-expand 3.2s cubic-bezier(.22,.7,.25,1) both; }
.motion-playing .premium-layer-mid { animation: premium-middle 3.2s cubic-bezier(.22,.7,.25,1) both; }
.motion-playing .premium-light { animation: premium-sweep 3.2s ease-in-out both; }
.motion-playing .premium-glint { animation: premium-spark 3.2s ease both; }
@keyframes premium-expand { 0%,100% { transform: translate(0,0); } 35%,65% { transform: translate(-8px,-13px); } }
@keyframes premium-middle { 0%,100% { transform: translate(0,0); } 35%,65% { transform: translate(-4px,-6px); } }
@keyframes premium-sweep { 0%,25% { opacity: 0; transform: translateX(-35px) rotate(12deg); } 35% { opacity: .8; } 68% { opacity: .8; transform: translateX(140px) rotate(12deg); } 75%,100% { opacity: 0; transform: translateX(140px) rotate(12deg); } }
@keyframes premium-spark { 0%,25%,100% { opacity: .65; } 50% { opacity: 1; } 70% { opacity: .3; } }
.apple-alignment { opacity: .38; }
.motion-playing .apple-display-module { animation: apple-seat 2.9s cubic-bezier(.22,.7,.25,1) both; }
.motion-playing .apple-alignment { animation: apple-align 2.9s ease both; }
.motion-playing .apple-alignment path { stroke-dasharray: 1; animation: apple-trace 2.9s ease both; }
@keyframes apple-seat { 0% { transform: translate(-7px,-10px); } 40%,65% { transform: translate(10px,14px); } 100% { transform: translate(0,0); } }
@keyframes apple-align { 0% { opacity: .15; } 35%,65% { opacity: 1; } 100% { opacity: .38; } }
@keyframes apple-trace { 0% { stroke-dashoffset: 1; } 38%,100% { stroke-dashoffset: 0; } }