/* Shared styles for the VSS service pages and mobile navigation. */
:root{--vss-blue:#066cff;--vss-ink:#080a0d;--vss-muted:#b7bec8;--vss-line:#292f38}
[hidden]{display:none!important}
html{scroll-padding-top:106px}
body{overflow-wrap:break-word}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #6eb1ff;outline-offset:5px}
section[id]{scroll-margin-top:106px}
.skip-link{position:fixed;top:-100px;left:16px;background:#fff;color:#050505;padding:14px 20px;z-index:120;font-weight:700}
.skip-link:focus{top:12px}
.site-header{gap:24px}
.site-header .brand{flex-shrink:0}
.site-header nav{gap:24px;font-size:12px;letter-spacing:.025em}
.site-header nav a{white-space:nowrap;padding-top:10px;padding-bottom:10px}
.site-header nav a[aria-current="page"]{color:#62a7ff}
.site-header nav a:hover{color:#8bc0ff}
.site-header nav a.nav-book{color:#fff;padding:14px 17px}
.menu-toggle{display:none}
.btn{min-height:49px;line-height:1.35;font-size:13px;letter-spacing:.015em}
.btn:hover{filter:brightness(1.12)}
.text-link{font-weight:700;color:#78b4ff;line-height:1.6}
.text-link:hover{text-decoration:underline;text-underline-offset:4px}
.hero-service-link{font-size:14px;max-width:590px;color:#c6cbd4;line-height:1.65;margin:22px 0 0}
.hero-service-link a{display:inline-block;color:#8bbdff;font-weight:700}
.hero-service-link + .hero-points{margin-top:30px}
.service-choice{padding:66px 6.5%;background:#080b10}
.section-heading{max-width:800px;margin:0 0 34px}
.section-heading .kicker{margin:0 0 12px}
.section-heading h2,.page-section h2,.page-cta h2,.service-choice h2{font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-1px;margin:0 0 18px;text-transform:none}
.section-heading p{line-height:1.75;color:#b7bec8;font-size:17px;margin-bottom:0}
.service-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.service-tile{padding:32px;border:1px solid #303b4a;border-radius:8px;background:#0e141d;display:flex;flex-direction:column;align-items:flex-start}
.service-tag{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#89bcff;line-height:1.6}
.service-tile h3{font-size:25px;line-height:1.12;letter-spacing:-.4px;margin:16px 0 10px}
.service-tile p{line-height:1.75;color:#bdc6d1;margin:0 0 24px}
.service-tile .text-link{margin-top:auto}
.page-hero{padding:126px 6.5% 66px;background:radial-gradient(ellipse at 100% 20%,#13243b 0,transparent 65%),#05070b}
.breadcrumbs{font-size:12px;display:flex;flex-wrap:wrap;gap:12px;color:#aab4c3;margin:0 0 40px;line-height:1.5}
.breadcrumbs a:hover{color:#fff}
.page-hero h1{font-size:clamp(38px,4.4vw,64px);line-height:1.01;letter-spacing:-2px;margin:18px 0 23px;max-width:990px;text-transform:uppercase}
.page-hero h1 span{color:#2786ff;display:block}
.page-hero .kicker{color:#79b3ff;font-size:12px;letter-spacing:.12em;line-height:1.6}
.page-lead{font-size:18px;line-height:1.75;color:#ccd3df;max-width:750px}
.page-hero-split{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:64px}
.page-hero-split .page-lead{max-width:600px}
.page-hero-split h1{font-size:clamp(38px,4.1vw,59px)}
.micro-proof{font-size:13px;color:#bac4d1;line-height:1.7;margin:23px 0 0}
.service-photo{margin:40px 0 0;position:relative;border-radius:10px;overflow:hidden;background:#11171d;border:1px solid #334050}
.service-photo img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.service-photo figcaption{padding:15px 18px;font-size:13px;line-height:1.5;color:#b4bfcc}
.page-section{padding:72px 6.5%;background:#090c11;color:#fff}
.page-section p{line-height:1.75}
.page-section p:not(.kicker):not(.service-tag):not(.quote-price){color:#bfc8d5}
.light-section{background:#f5f6f8;color:var(--vss-ink)}
.light-section p:not(.kicker):not(.service-tag):not(.quote-price){color:#434c59}
.light-section .text-link,.light-section p a{color:#0758c5}
.light-section p a{text-decoration:underline;text-underline-offset:3px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.feature-grid article{border-top:1px solid #c9d0d9;padding-top:24px}
.feature-grid h3{font-size:20px;line-height:1.3;margin:16px 0 10px}
.feature-grid p{font-size:16px;margin-bottom:0}
.step-number{font-size:14px;color:#0758c5;font-weight:800}
.two-column-copy{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.two-column-copy .kicker{font-size:12px;letter-spacing:.1em;line-height:1.6}
.two-column-copy p:first-child{margin-top:0}
.two-column-copy p{font-size:17px}
.two-column-copy p a{color:#83b9ff;text-decoration:underline;text-underline-offset:3px}
.light-section.two-column-copy p a{color:#0758c5}
.notice-card{padding:36px;border:1px solid #c5d6ea;border-left:4px solid #066cff;background:#fff;display:flex;align-items:center;gap:50px;border-radius:7px}
.notice-card h2{font-size:30px}
.notice-card .btn{flex-shrink:0}
.notice-card p:last-child{margin-bottom:0}
.page-cta{padding:48px 6.5%;display:flex;gap:45px;align-items:center;justify-content:space-between;background:#142238;border-top:1px solid #274268}
.page-cta h2{font-size:31px;max-width:850px;margin-bottom:12px}
.page-cta p{font-size:16px;color:#c0ccdc;line-height:1.65;margin:0}
.page-cta>.btn{flex-shrink:0}
.hero-summary{padding:36px;background:linear-gradient(140deg,#152338,#0b111b);border:1px solid #334661;border-radius:10px;margin-top:48px;max-width:480px;width:100%;justify-self:end}
.hero-summary h2{font-size:43px;letter-spacing:-1.5px;line-height:1.05;margin:22px 0 30px}
.hero-summary ul{padding:0;margin:0;list-style:none}
.hero-summary li{display:flex;gap:20px;padding:18px 0;border-top:1px solid #2d3a4d}
.hero-summary li>span{color:#82b9ff;font-weight:700;font-size:13px;padding-top:4px}
.hero-summary strong{font-size:16px}
.hero-summary li p{font-size:14px;color:#b4c0d1;margin:6px 0 0;line-height:1.5}
.inline-note{padding:18px 20px;background:#e9eef5;border-left:3px solid #066cff;border-radius:4px;font-size:15px!important}
.quote-section{background:#edf2f8;display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:start;color:#0a1018}
.quote-info{position:sticky;top:112px}
.quote-section .quote-info p{color:#455263;font-size:17px}
.quote-section .quote-info p.kicker{color:#0758c5;font-size:12px;letter-spacing:.1em}
.quote-process{border-top:1px solid #c5cfdb;border-bottom:1px solid #c5cfdb;padding:20px 0;margin:28px 0}
.quote-process h3{font-size:16px;margin:0 0 18px}
.quote-process ol{margin:0;padding-left:23px;color:#455263;font-size:15px;line-height:1.75}
.quote-process li{padding:0 0 12px 5px}
.quote-process li:last-child{padding-bottom:0}
.quote-process li::marker{color:#0758c5;font-weight:bold}
.quote-info .quote-contact{font-size:14px!important;line-height:1.9}
.quote-contact a{color:#0758c5;overflow-wrap:anywhere;font-weight:700}
.quote-form{padding:36px;border:1px solid #cdd6e1;border-radius:12px;background:#fff;box-shadow:0 12px 40px rgba(22,44,75,.07);min-width:0}
.quote-form h3{font-size:25px;letter-spacing:-.5px;margin:0 0 8px}
.quote-form .required-note{font-size:13px;color:#586375!important;margin:0 0 28px}
.quote-form fieldset{border:0;border-top:1px solid #e0e5ec;padding:24px 0 0;margin:0 0 30px;min-width:0}
.quote-form legend{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#0758c5;font-weight:800;padding:0 12px 0 0}
.quote-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
.form-field{min-width:0}
.form-field label{display:block;font-size:13px;font-weight:700;color:#1e2937;line-height:1.5;margin-bottom:7px}
.form-field label span{font-weight:400;color:#616b79;font-size:12px}
.form-field input,.form-field select,.form-field textarea{display:block;width:100%;max-width:100%;border:1px solid #b9c4d1;border-radius:5px;background:#fcfdff;color:#111c29;padding:12px 13px;line-height:1.5;min-height:49px;font-size:16px}
.form-field input::placeholder,.form-field textarea::placeholder{color:#727d8c;opacity:1}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:3px solid #cee1ff;outline-offset:0;border-color:#066cff}
.form-field textarea{resize:vertical;min-height:125px}
.form-field small{display:block;font-size:12px;color:#616b79;line-height:1.6;margin-top:8px}
.full-width{grid-column:1/-1}
.quote-form .quote-privacy{color:#5b6573!important;font-size:12px;line-height:1.65;margin:0}
.quote-form .form-submit{margin-top:20px;min-height:53px;font-size:13px}
.quote-form .form-submit:disabled{opacity:.7;cursor:wait}
.quote-form .form-reassurance{color:#596677!important;text-align:center;font-size:12px;margin:12px 0 0}
.quote-form .form-status{color:#244b71!important;font-size:14px;background:#ecf4ff;border-radius:5px;padding:14px;margin:16px 0 0;line-height:1.6}
.quote-form .form-status.is-error{color:#8a2929!important;background:#fff0f0;border:1px solid #eac4c4}
.quote-form .form-fallback{font-size:14px;margin:12px 0 0;color:#0758c5!important;text-decoration:underline;text-underline-offset:3px}
.faq-section .section-heading,.faq-list{max-width:900px;margin-left:auto;margin-right:auto}
.faq-section>.text-link{display:block;max-width:900px;margin:24px auto 0}
.faq-list details{border-bottom:1px solid #2e3948;padding:22px 0}
.faq-list details:first-child{border-top:1px solid #2e3948}
.faq-list summary{font-size:18px;line-height:1.5;font-weight:700;cursor:pointer;padding-right:10px}
.faq-list details p{font-size:16px;max-width:820px;padding-right:15px;margin:16px 0 0}
.faq-list details a{color:#88bdff;text-decoration:underline;text-underline-offset:3px}
.light-section .faq-list details{border-color:#c8d0db}
.light-section .faq-list details a{color:#0758c5}
.compact-hero{padding-bottom:56px}
.compact-hero .page-lead{max-width:750px}
.faq-jumps{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.faq-jumps a{font-size:13px;padding:13px 17px;border:1px solid #3c4c63;border-radius:4px;font-weight:700;background:#131e2f}
.faq-jumps a:hover{border-color:#5a9cff}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.price-option{background:#fff;border:1px solid #c7d1de;border-radius:8px;padding:32px 28px;display:flex;flex-direction:column}
.price-option .service-tag{color:#0758c5;font-size:12px;margin:0}
.price-option h2{font-size:64px;letter-spacing:-3px;margin:24px 0 10px;white-space:nowrap}
.price-option h2 small{font-size:12px;letter-spacing:.03em;color:#5e6875;margin-left:10px;font-weight:600}
.price-option>p:not(.service-tag){font-size:14px;margin:0}
.check-list{list-style:none;padding:0;margin:25px 0 30px;line-height:1.7;color:#434c59;font-size:14px}
.check-list li{padding-left:22px;position:relative;margin-bottom:9px}
.check-list li:before{content:'✓';position:absolute;left:0;color:#066cff;font-weight:bold}
.price-option .btn{width:100%;margin-top:auto}
.travel-strip{display:grid;grid-template-columns:1fr 1fr;gap:35px;background:#e6edf5;border:1px solid #cbd7e7;border-radius:8px;padding:27px 30px;margin-top:26px}
.travel-strip h3{font-size:16px;margin:0 0 8px}
.travel-strip p{font-size:14px;margin:0}
.pricing-note{font-size:14px;line-height:1.75;margin-top:24px}
.quote-price-panel{display:grid;grid-template-columns:1.15fr .85fr;gap:65px;align-items:center;border:1px solid #35475f;background:#111d2e;border-radius:9px;padding:42px}
.quote-price-panel h2{margin-top:15px;font-size:33px}
.quote-price-panel p{font-size:16px;max-width:630px}
.quote-price-panel>div:last-child{border-left:1px solid #35475f;padding-left:50px}
.quote-price-panel .quote-price{font-size:42px;font-weight:800;letter-spacing:-1px;color:#83b9ff;margin:0 0 24px;line-height:1.2}
.quote-price-panel .text-link{display:block;font-size:13px;margin-top:16px}
.receipt-page{padding-top:160px;min-height:75vh;text-align:center}
.receipt-page .page-lead,.receipt-page h1{margin-left:auto;margin-right:auto}
.receipt-page .actions{justify-content:center}
.receipt-mark{display:inline-grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#173963;color:#a5ceff;font-size:30px;margin-bottom:12px}
.receipt-note{color:#afbbcb;font-size:14px;line-height:1.7;max-width:660px;margin:20px auto}
footer{line-height:1.65;padding-bottom:100px;font-size:14px;gap:30px;grid-template-columns:.9fr 1fr 1fr 1.1fr}
footer img{max-width:100%}
footer p{margin:14px 0 20px}
footer a:hover{color:#86bcff}
footer .footer-links{display:grid;gap:10px;margin-top:14px}
footer .footer-brand p{max-width:260px}
footer a[href^="mailto:"]{overflow-wrap:anywhere}
.floating{font-size:12px;letter-spacing:.01em}
@media(min-width:1600px){.page-hero,.page-section,.service-choice,.page-cta{padding-left:max(6.5%,calc((100% - 1440px)/2));padding-right:max(6.5%,calc((100% - 1440px)/2))}}
@media(max-width:1180px){.site-header nav{gap:15px;font-size:11px}.site-header{padding:0 5%}.page-hero-split{gap:35px}.quote-section{gap:38px}.two-column-copy{gap:45px}.price-option{padding:28px 22px}.price-option h2{font-size:55px}.quote-price-panel{gap:35px;padding:32px}.quote-price-panel>div:last-child{padding-left:30px}}
@media(max-width:1050px){
 .site-header{height:auto;min-height:78px;flex-wrap:wrap;gap:0;padding:0 5%}
 .site-header:not(.has-navigation-js){position:relative}
 .site-header .brand{height:78px}
 .site-header .brand img{width:128px}
 .site-header nav{width:100%;flex-wrap:wrap;padding:0 0 18px;gap:8px 18px;font-size:12px}
 .site-header nav a:not(.nav-book){display:block}
 .site-header.has-navigation-js .menu-toggle{display:flex;align-items:center;gap:14px;margin-left:auto;border:1px solid #536176;background:#101923;color:#fff;border-radius:4px;padding:11px 15px;font-size:13px;font-weight:700;cursor:pointer}
 .site-header.has-navigation-js nav{display:none}
 .site-header.has-navigation-js nav.is-open{display:flex}
 .site-header nav .nav-book{padding:12px 16px}
 .page-hero-split{grid-template-columns:1fr 1fr;gap:30px}
 .page-hero-split h1{font-size:42px}
 .page-hero .actions{flex-direction:column;gap:12px}
 .hero-summary{padding:28px}
 .hero-summary h2{font-size:37px}
 .page-section,.service-choice{padding:58px 5%}
 .quote-section{grid-template-columns:1fr 1.4fr;gap:30px}
 .quote-form{padding:25px}
 .quote-form-grid{grid-template-columns:1fr;gap:18px}
 .notice-card{gap:30px;flex-direction:column;align-items:flex-start}
 .page-cta{padding:40px 5%;gap:25px}
 .feature-grid{gap:24px}
 footer{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
 html{scroll-padding-top:94px}
 section[id]{scroll-margin-top:94px}
 .page-hero{padding:105px 5% 45px}
 .breadcrumbs{margin-bottom:28px}
 .page-hero h1,.page-hero-split h1{font-size:clamp(34px,8vw,48px);letter-spacing:-1.4px;line-height:1.06}
 .page-hero-split{grid-template-columns:1fr;gap:25px}
 .page-lead{font-size:17px}
 .page-hero .actions{max-width:460px}
 .hero-summary{max-width:none;margin:12px 0 0;justify-self:stretch}
 .hero-summary h2{font-size:35px;margin-bottom:22px}
 .hero-summary h2 br{display:none}
 .hero-summary h2 br:after{content:' '}
 .hero-summary li{padding:16px 0}
 .service-photo{margin-top:8px;max-width:500px}
 .service-photo img{aspect-ratio:4/3}
 .service-choice-grid,.feature-grid,.two-column-copy,.quote-section,.pricing-grid,.travel-strip,.quote-price-panel{grid-template-columns:1fr}
 .service-choice-grid{gap:18px}
 .service-tile{padding:27px 24px}
 .service-choice h2,.page-section h2{font-size:31px;letter-spacing:-.8px}
 .section-heading{margin-bottom:28px}
 .two-column-copy{gap:10px}
 .page-section,.service-choice{padding:45px 5%}
 .feature-grid{gap:30px}
 .quote-section{gap:25px}
 .quote-info{position:static}
 .quote-info .quote-process{margin:23px 0 20px}
 .quote-form{padding:26px 21px}
 .quote-form-grid{grid-template-columns:1fr 1fr}
 .notice-card{padding:26px 23px}
 .notice-card h2{font-size:27px}
 .notice-card .btn{width:100%}
 .page-cta{flex-direction:column;align-items:flex-start;gap:25px}
 .page-cta h2{font-size:28px}
 .page-cta>.btn{width:100%}
 .faq-list summary{font-size:16px}
 .faq-list details p{font-size:15px}
 .faq-jumps{gap:9px}
 .faq-jumps a{padding:11px 12px;font-size:12px}
 .pricing-grid{gap:18px}
 .price-option{padding:29px}
 .price-option h2{font-size:62px;margin-top:18px}
 .travel-strip{gap:23px;padding:25px}
 .quote-price-panel{padding:29px 25px;gap:24px}
 .quote-price-panel>div:last-child{border-left:0;border-top:1px solid #35475f;padding:24px 0 0}
 .receipt-page{padding-top:130px}
 .receipt-page .actions{margin-left:auto;margin-right:auto}
 .floating{left:16px;right:16px;bottom:14px;font-size:12px;text-align:center;padding:16px 14px}
 footer{padding:32px 5% 100px;gap:22px}
 .dark-grid{padding:35px 5%}
}
@media(max-width:480px){.quote-form-grid{grid-template-columns:1fr}.quote-info h2{font-size:30px}.site-header nav{flex-direction:column;align-items:stretch;gap:4px}.site-header nav a{padding:11px 0}.site-header nav a.nav-book{text-align:center;margin-top:6px}footer{grid-template-columns:1fr;gap:14px}.hero h1{font-size:41px}.hero-points{margin-top:25px}.service-tile h3{font-size:24px}.page-hero .kicker{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Dedicated gallery and uncropped portrait before/after photos. */
.before-after{max-width:900px}
.before-after figure{aspect-ratio:3/4}
.before-after img{object-fit:contain}
.gallery-cta{margin:8px auto 32px}
.gallery-cta p{color:#bec8d6;line-height:1.6}
.gallery-cta .btn{min-width:180px}
.gallery-page .install-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:0}
.gallery-page .gallery-item{aspect-ratio:3/4}
.gallery-page .gallery-item img{object-fit:contain;background:#0b1017}
.site-header nav{gap:18px}
@media(min-width:1051px) and (max-width:1180px){.site-header nav{gap:11px;font-size:10px}}
@media(max-width:760px){.gallery-page .install-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:420px){.gallery-page .install-gallery{grid-template-columns:1fr}}

/* Show the full supplied cabin-upgrade photo. */
.service-photo img{aspect-ratio:3/4;object-fit:contain}

/* Keep the wider wordmark clear of navigation on smaller screens. */
@media(min-width:1051px) and (max-width:1320px){.site-header .brand img{width:210px}.site-header nav{gap:15px;font-size:11px}}
@media(max-width:1050px){.site-header .brand img{width:180px;height:auto;max-height:66px}}
@media(max-width:360px){.site-header .brand img{width:160px}}
