/* Cinematic presentation; booking and order contracts live in existing scripts. */
:root { --maxw:1240px; }
:root[data-theme="dark"] { --paper:#050c17; --surface:#0c192b; --surface-2:#081322; --ink:#f4f7fd; --ink-2:#b6c5da; --ink-3:#9eb1cd; --line:#273b55; --accent:#83bdff; --accent-bright:#b5d9ff; }
body { background:var(--paper); }
.section { padding-block:clamp(64px,8vw,106px); }
.section-head { max-width:720px; }
h2 { font-size:clamp(34px,4.3vw,58px); line-height:1.06; }
.eyebrow { color:var(--accent); }
.site-header { background:#050d1bed; backdrop-filter:blur(18px); }
.site-header .wrap { min-height:78px; gap:18px; }
.site-header .logo { margin-right:auto; }
.motion-toggle { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border:1px solid #34435a; border-radius:8px; background:transparent; color:#d9e7fb; cursor:pointer; font:inherit; }
.motion-toggle svg { width:17px; height:17px; }
.motion-toggle:focus-visible,.hero-text-link:focus-visible { outline:3px solid #96ceff; outline-offset:5px; }
.remodel-hero { position:relative; padding:55px 0 0; background:radial-gradient(ellipse at 76% 43%,#12396a88,transparent 45%),#050d1b; isolation:isolate; }
.remodel-hero .hero-grid { grid-template-columns:1fr 1.15fr; min-height:550px; gap:0; }
.remodel-hero .hero-copy { position:relative; z-index:2; padding-bottom:30px; }
.remodel-hero h1 { font-size:clamp(58px,6.5vw,92px); font-weight:740; max-width:11ch; letter-spacing:-.065em; margin:22px 0; }
.remodel-hero .hero-accent { color:#60aaff; }
.remodel-hero .lede { font-size:19px; line-height:1.65; max-width:39ch; }
.remodel-hero .btn-row { margin-top:28px; align-items:center; gap:24px; }
.hero-text-link { color:#d3e4fa; font-size:14px; padding:12px 0; text-decoration:none; border-bottom:1px solid #48668c; }
.hero-timing { color:#9fb4ce; font-size:12px; max-width:43ch; margin-top:22px; line-height:1.65; }
.remodel-hero .hero-visual { width:108%; margin-left:-8%; background:none; border:0; box-shadow:none; transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .3s ease-out; }
.remodel-hero .hero-visual img { display:block; width:100%; height:auto; object-fit:contain; border-radius:0; filter:drop-shadow(0 36px 35px #0009); }
.remodel-hero .hero-visual figcaption { justify-content:center; gap:8px; align-items:center; padding:6px 30px 20px; font-size:11px; }
.art-disclaimer { color:#9fb1c9; font-size:10px; letter-spacing:.02em; }
.hero-visual .art-disclaimer { margin-left:18px; }
.seal-dot { flex-shrink:0; margin:0; box-shadow:0 0 14px #70b9ff; }
.hero-benefits { display:flex; justify-content:center; flex-wrap:wrap; gap:24px 60px; border-top:1px solid #284364; padding:25px 0; margin-top:20px; font-size:13px; color:#b7cce6; }
.hero-benefits>span { display:inline-flex; align-items:center; gap:9px; }
.hero-benefits>span>span[aria-hidden] { font-size:21px; color:#76b9ff; }
.light-ribbon { position:absolute; z-index:-1; width:130%; height:220px; border-top:2px solid #2b8cff; border-radius:50%; left:-12%; top:65%; transform:rotate(-14deg); box-shadow:0 -8px 35px #147fff44,inset 0 14px 25px #147fff1a; animation:ribbon-drift 10s ease-in-out infinite alternate; pointer-events:none; }
#pricing { background:linear-gradient(180deg,var(--surface-2),var(--paper)); }
.configurator { border-radius:24px; background:var(--surface); box-shadow:0 20px 70px #0002; }
.config-controls,.config-summary { padding:38px; }
.config-summary { background:radial-gradient(ellipse at 100% 0,#1754a166,transparent 65%),#0b203d; }
.config-summary .btn,.btn-primary { background:#126ae4; border-color:#126ae4; color:white; }
.btn-primary:hover,.config-summary .btn:hover { background:#0757c5; border-color:#0757c5; color:white; }
.payment-explainer { margin-top:28px; }
.payment-explainer summary { cursor:pointer; font-size:14px; padding:14px 0; }
.payment-explainer .notice { margin-top:12px; }
#how.process-section { background:var(--paper); color:var(--ink); }
.process-section .lede { color:var(--ink-2); }
.process-cards { gap:22px; }
.process-card { background:linear-gradient(140deg,var(--surface),var(--surface-2)); border-color:var(--line); box-shadow:0 22px 40px #0001; }
.process-scene { aspect-ratio:3/2; max-width:none; position:relative; }
.process-scene img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .6s ease; }
.process-card:hover .process-scene img { transform:translateY(-5px) scale(1.025); }
.process-copy { padding:5px 28px 30px; }
.process-number { font-size:11px; width:31px; height:31px; margin-bottom:17px; }
.process-copy h3 { color:var(--ink); font-size:25px; }
.process-copy p { color:var(--ink-2); min-height:100px; }
.process-copy a { font-size:12px; color:var(--accent); text-decoration:none; }
.process-note { color:var(--ink-3); }
.repairs-overview { background:var(--surface-2); position:relative; overflow:hidden; }
.tool-detail { position:absolute; top:28px; right:max(20px,calc((100% - 1240px)/2)); width:255px; opacity:.7; pointer-events:none; animation:tool-drift 9s ease-in-out infinite alternate; }
.tool-detail img { width:100%; height:auto; display:block; }
.repairs-overview .section-head { max-width:660px; position:relative; }
.repair-links { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin:38px 0 26px; }
.repair-links a { min-width:0; position:relative; isolation:isolate; display:flex; flex-direction:column; padding:16px 20px 24px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(150deg,var(--surface),var(--paper)); border-radius:22px; color:var(--ink); text-decoration:none; box-shadow:0 14px 32px #0000000d; transition:border-color .25s,transform .25s,box-shadow .25s; }
.repair-art { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1; margin-bottom:12px; }
.repair-art::before { content:""; position:absolute; z-index:-1; inset:15% 0 0; background:radial-gradient(ellipse,#167de532,transparent 68%); transition:opacity .3s; opacity:.7; }
.repair-links img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 16px 12px #0004); transition:transform .4s ease; }
.repair-copy { display:flex; flex-direction:column; gap:9px; padding-right:8px; }
.repair-copy strong { font-size:20px; line-height:1.2; letter-spacing:-.035em; font-weight:650; }
.repair-copy>span { color:var(--ink-2); font-size:13px; line-height:1.6; max-width:19ch; }
.repair-arrow { display:grid; place-items:center; width:28px; height:28px; position:absolute; right:14px; top:14px; border:1px solid var(--line); border-radius:50%; color:var(--accent); font-size:15px; background:var(--surface); }
.repair-links a:focus-visible { outline:3px solid var(--accent); outline-offset:5px; border-color:var(--accent); }
@media(hover:hover) and (pointer:fine) { .repair-links a:hover { border-color:var(--accent); transform:translateY(-6px); box-shadow:0 22px 42px #0003,0 0 26px #168bff12; } .repair-links a:hover img { transform:translateY(-4px) rotate(-3deg) scale(1.045); } .repair-links a:hover .repair-art::before { opacity:1; } }
.repairs-overview .small { max-width:85ch; }
.proof-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:60px; align-items:center; }
.proof-layout .ba { width:100%; max-width:none; margin:0; border:1px solid var(--line); border-radius:26px; overflow:hidden; background:var(--surface); box-shadow:0 25px 70px #0002; }
.proof-section .ba-stage { aspect-ratio:4/3; border:0; border-radius:0; background:#071322; cursor:ew-resize; touch-action:pan-y pinch-zoom; user-select:none; }
.proof-section .ba-stage>* { pointer-events:none; }
.proof-section .ba-layer { position:absolute; inset:0; }
.proof-section .ba-layer img { width:100%; height:100%; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none; }
.proof-section .ba-tag { top:18px; bottom:auto; padding:7px 12px; border:1px solid #48698f; border-radius:30px; color:#e0edff; background:#071322e6; font-size:10px; letter-spacing:.08em; }
.proof-section .ba-tag-before { left:18px; }
.proof-section .ba-tag-after { right:18px; }
.proof-section .ba-handle { background:#8bcaff; box-shadow:0 0 18px #209bff88; }
.proof-section .ba-handle span { width:48px; height:48px; margin:-24px 0 0 -24px; background:#126ae4; border:2px solid #c5e5ff; box-shadow:0 0 0 7px #1b86ef22,0 8px 24px #0006; }
.proof-section .ba-handle span::before { left:10px; }
.proof-section .ba-handle span::after { right:10px; }
.proof-section .ba:focus-within { outline:3px solid var(--accent); outline-offset:5px; }
.ba-controls { padding:19px 24px 10px; border-top:1px solid var(--line); }
.ba-controls label { display:flex; align-items:center; justify-content:space-between; color:var(--ink); font-size:14px; font-weight:650; }
.ba-controls label>span { color:var(--accent); font-size:23px; line-height:1; }
.proof-section #ba-range { margin:10px 0 0; min-height:32px; width:100%; padding:0; }
.ba-controls p,.ba-note { font-size:11px; color:var(--ink-2); line-height:1.65; margin:5px 0 0; }
.ba-note { border-top:1px solid var(--line); padding:13px 24px 16px; margin:0; }
.proof-copy { display:grid; gap:24px; }
.proof-copy .eyebrow { margin-bottom:12px; }
.proof-copy h3 { font-size:clamp(30px,3vw,42px); letter-spacing:-.045em; line-height:1.1; margin:0; }
.proof-copy p { max-width:48ch; color:var(--ink-2); }
.repair-record { list-style:none; padding:0; margin:0; display:grid; gap:19px; }
.repair-record li { display:flex; gap:16px; align-items:flex-start; }
.repair-record li>span { display:grid; place-items:center; flex:0 0 33px; height:33px; border:1px solid var(--line); border-radius:10px; color:var(--accent); font-size:10px; font-family:var(--mono); background:var(--surface); }
.repair-record h4 { font-size:16px; margin:0 0 5px; letter-spacing:-.02em; }
.repair-record p { font-size:13px; line-height:1.65; margin:0; }
.review-note { border-top:1px solid var(--line); padding-top:20px; }
.review-note h4 { font-size:13px; margin:0 0 7px; }
.review-note p { font-size:12px; line-height:1.7; margin:0; }
.care-standard { background:var(--surface-2); }
.care-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin:40px 0; }
.care-grid article { border-top:1px solid var(--line); padding-top:23px; }
.care-grid article>span { font-family:var(--mono); font-size:12px; color:var(--accent); }
.care-grid h3 { font-size:24px; margin:22px 0 12px; }
.care-grid p { color:var(--ink-2); font-size:15px; }
.care-grid a { font-size:13px; }
.closing-section { overflow:hidden; }
#contact.closing-section .wrap { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; text-align:left; }
#contact.closing-section h2 { margin-inline:0; max-width:none; }
.closing-section p { color:#b6cae4; }
.closing-section img { width:120%; max-width:none; margin-left:-5%; height:auto; }
.booking-wrap { max-width:1000px; }
.booking-intro { display:grid; grid-template-columns:1fr 300px; align-items:center; text-align:left; gap:30px; margin-bottom:28px; }
.booking-intro h1 { font-size:clamp(34px,4vw,52px); line-height:1.1; letter-spacing:-.055em; margin:14px 0; }
.booking-intro h1 span,.policy-intro h1 span { color:var(--accent); }
.booking-intro p { color:var(--ink-2); }
.booking-art img { width:100%; height:auto; filter:drop-shadow(0 20px 20px #0004); }
.booking-wrap .panel { max-width:900px; margin-inline:auto; }
.panel:not([hidden]) { animation:panel-enter .3s ease-out both; }
.stepper { max-width:900px; margin-inline:auto; }
.booking-summary { top:78px; }
.utility-layout { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:70px; align-items:start; }
.utility-content { min-width:0; }
.utility-content h1 { font-size:clamp(38px,4.2vw,58px); line-height:1.08; letter-spacing:-.055em; }
.utility-content h2 { font-size:27px; }
.utility-art { position:sticky; top:130px; text-align:center; min-width:0; padding-top:20px; }
.utility-art img { width:100%; height:auto; margin:0; }
.utility-art>p:not(.eyebrow) { color:var(--ink-2); font-size:14px; max-width:35ch; margin:8px auto 15px; }
.utility-art .eyebrow { margin-top:25px; letter-spacing:.03em; font-size:18px; }
.policy-intro { max-width:800px; }
.policy-intro h1 { font-size:clamp(44px,6vw,76px); line-height:1.04; letter-spacing:-.06em; }
.policy-layout { display:grid; grid-template-columns:235px minmax(0,1fr); gap:65px; }
.policy-nav { position:sticky; top:115px; align-self:start; display:grid; gap:6px; }
.policy-nav>a { padding:12px 0; border-bottom:1px solid var(--line); color:var(--ink-2); text-decoration:none; font-size:14px; }
.policy-support { margin-top:30px; font-size:13px; }
.policy-support a { font-size:12px; }
.policy-body { min-width:0; max-width:790px; }
.policy-body h2 { font-size:36px; }
.policy-body .prose { max-width:none; }
.policy-tool { width:190px; height:auto; opacity:.65; margin-top:28px; pointer-events:none; }
.has-tool-accent { position:relative; overflow:hidden; }
.footer-tool { position:absolute; width:145px; height:auto; right:25px; top:12px; opacity:.25; pointer-events:none; }
.has-tool-accent>.wrap { position:relative; }
.art-float { animation:art-bob 7s ease-in-out infinite; }
[data-tilt] { transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .3s ease-out; }
[data-reveal].reveal-pending { opacity:0; transform:translateY(22px); }
[data-reveal] { transition:opacity .65s ease,transform .65s ease; }
[data-reveal]:nth-child(2) { transition-delay:.08s; }
[data-reveal]:nth-child(3) { transition-delay:.16s; }
@keyframes art-bob { 0%,100% { transform:translateY(0) rotate(-.3deg); } 50% { transform:translateY(-12px) rotate(.3deg); } }
@keyframes tool-drift { from { transform:translateY(0) rotate(-2deg); } to { transform:translateY(-7px) rotate(1deg); } }
@keyframes ribbon-drift { from { transform:translateY(0) rotate(-14deg); opacity:.6; } to { transform:translateY(-20px) rotate(-10deg); opacity:1; } }
@keyframes panel-enter { from { opacity:.3; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
html[data-motion="paused"] *,html[data-motion="paused"] *::before,html[data-motion="paused"] *::after { animation:none!important; scroll-behavior:auto!important; transition:none!important; }
html[data-motion="paused"] { scroll-behavior:auto!important; }
html[data-motion="paused"] [data-tilt] { transform:none!important; }
html[data-motion="paused"] .reveal-pending { opacity:1; transform:none; }
html[data-motion="paused"] .repair-links a,html[data-motion="paused"] .repair-links img { transform:none!important; }
@media(max-width:1100px) and (min-width:760px) { .repair-links a { padding:20px 24px 26px; } .repair-art { max-width:210px; margin-inline:auto; } }
@media(max-width:759px) { .repair-links { gap:12px; } .repair-links a { padding:12px 14px 20px; border-radius:18px; } .repair-copy strong { font-size:19px; } .repair-copy>span { font-size:12px; } .repair-arrow { right:10px; top:10px; width:25px; height:25px; } .repair-links a:last-child { grid-column:1/-1; flex-direction:row; align-items:center; gap:20px; } .repair-links a:last-child .repair-art { flex:0 0 40%; max-width:165px; margin-bottom:0; } }
@media(max-width:1100px) { .site-header .nav { gap:16px; } .site-header .wrap { gap:12px; } .site-header .header-cta { display:none; } .repair-links { grid-template-columns:repeat(3,1fr); } .tool-detail { width:200px; opacity:.5; } .policy-layout { gap:35px; grid-template-columns:190px minmax(0,1fr); } }
@media(max-width:1000px) { .site-header .wrap { min-height:72px; } .booking-summary { top:72px; } .remodel-hero .hero-grid { min-height:470px; } .remodel-hero h1 { font-size:clamp(52px,7vw,78px); } .remodel-hero .lede { font-size:17px; } .remodel-hero .hero-visual { width:115%; margin-left:0; } .process-copy { padding-inline:20px; } .proof-layout { gap:30px; } .utility-layout { gap:35px; } }
@media(max-width:759px) { .remodel-hero { padding-top:35px; } .remodel-hero .hero-grid { grid-template-columns:1fr; min-height:0; } .remodel-hero h1 { font-size:clamp(52px,12vw,78px); } .remodel-hero .hero-copy { padding-bottom:0; } .remodel-hero .hero-visual { width:110%; max-width:580px; margin:0 auto 0 -5%; } .hero-benefits { gap:12px 24px; padding:20px 0; font-size:11px; margin-top:10px; } .hero-timing { max-width:48ch; } .light-ribbon { top:60%; } .config-controls,.config-summary { padding:26px; } .process-cards,.care-grid,.proof-layout { grid-template-columns:1fr; } .process-copy p { min-height:0; } .process-scene { aspect-ratio:1.8; max-width:500px; } .repair-links { grid-template-columns:repeat(2,1fr); } .repairs-overview .section-head { max-width:100%; padding-right:0; } .tool-detail { position:relative; top:auto; right:auto; width:160px; margin:0 0 -25px auto; opacity:.7; } .care-grid { gap:26px; margin-block:30px; } #contact.closing-section .wrap { grid-template-columns:1fr; } .closing-section img { max-width:530px; margin:0 auto; width:100%; } .booking-intro { grid-template-columns:1fr 120px; gap:10px; } .booking-intro h1 { font-size:34px; } .booking-art img { width:140%; max-width:none; margin-left:-15%; } .booking-intro>div:first-child { z-index:1; } .booking-intro p { font-size:14px; } .utility-layout { grid-template-columns:1fr; gap:20px; } .utility-art { position:relative; top:0; max-width:380px; margin-inline:auto; width:100%; } .policy-layout { grid-template-columns:1fr; gap:35px; } .policy-nav { position:relative; top:auto; grid-template-columns:repeat(2,1fr); gap:6px 20px; } .policy-nav>.eyebrow { grid-column:1/-1; } .policy-support,.policy-tool { display:none; } .policy-body h2 { font-size:32px; } }
@media(max-width:420px) { .site-header .wrap { gap:6px; } .site-header .logo { font-size:14px; } .site-header .logo-mark { width:25px; height:25px; } .page-quote .site-header .header-cta,.page-status .site-header .header-cta,.page-success .site-header .header-cta,.page-policies .site-header .header-cta { display:none; } .booking-intro { grid-template-columns:1fr; } .booking-art { display:none; } .hero-text-link { font-size:12px; } .remodel-hero .btn-row { gap:17px; } }
@media(prefers-reduced-motion:reduce) { [data-tilt],.reveal-pending { transform:none!important; opacity:1!important; } .art-float,.light-ribbon,.tool-detail,.panel { animation:none!important; } }
@media(prefers-reduced-motion:reduce) { .repair-links a,.repair-links img { transform:none!important; transition:none!important; } }
@media print { .motion-toggle,.light-ribbon,.tool-detail,.utility-art,.policy-tool,.booking-art { display:none; } .policy-layout,.utility-layout { display:block; } .policy-nav { position:static; } .reveal-pending { opacity:1!important; transform:none!important; } }