/* Shared finishing details: restrained geometry, consistent spacing and clearer hierarchy. */
:root{--ink:#152d30;--muted:#5d7071;--paper:#f7f8f5;--line:#dce5df;--surface-radius:8px}
html{scrollbar-gutter:stable;scroll-padding-top:106px}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#b3eee4;color:#123e3c}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.container{width:min(1220px,calc(100% - 112px))}
.site-header{background:#fafbf8f5;border-bottom-color:#dfe7e0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.site-header.scrolled{box-shadow:0 8px 30px #133c3710}
.header-inner{height:88px;gap:28px}
.brand-mark{width:43px;height:43px}
.brand-name strong{letter-spacing:-1.1px}
.desktop-nav{gap:30px;font-size:12px}
.desktop-nav a{padding:12px 0}
.desktop-nav a:after{bottom:4px;height:1px}
.button{border-radius:4px;font-size:13px;letter-spacing:.05px;transition:background .2s,box-shadow .25s,transform .25s}
.button-small{font-size:12px;min-height:46px;padding:12px 19px}
.button:hover{box-shadow:0 6px 18px #1d9d8b20;transform:translateY(-1px)}
.button:active{transform:translateY(0)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-offset:4px}
.hero-copy p{color:#d2dfdb;max-width:420px}
.hero-eyebrow{letter-spacing:2.3px;font-weight:700}
.hero-actions{gap:30px}
.hero-actions .text-link{font-size:12px}
.hero-address{color:#b6cbc5}
.hero-bottom{border-top-color:#e1fff326}
.hero-bottom>span{color:#c5d7d1}
.hero-bottom svg{width:16px;height:16px}
.slide-choice{font-size:10px;letter-spacing:.2px}
.slide-track{height:1px}
.slide-choice.is-active .slide-track{height:2px}
.slider-buttons .circle-button{border-color:#d0e6e13d}
.section{padding:94px 0}
.section-intro{gap:70px;margin-bottom:40px;grid-template-columns:1.2fr 1fr}
.section-intro>p{max-width:365px;margin-bottom:4px;line-height:1.85}
.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700}
h2{font-size:58px;line-height:1.06;letter-spacing:-.5px;margin-top:18px}
.services{background:#fafbf8}
.service-grid{gap:18px;padding-bottom:10px}
.service{border-radius:var(--surface-radius);border-color:#dce5df!important;padding-bottom:24px}
.service-image{aspect-ratio:1.5}
.service-image img{filter:saturate(.85)}
.service-top{height:24px}
.service-top>span{top:15px;right:15px;width:30px;height:30px;font-size:13px;background:#073033d9}
.service h3,.service p,.service-link{margin-left:23px;margin-right:23px}
.service h3{font-size:31px;letter-spacing:-.1px;margin-bottom:12px}
.service p{font-size:13px;line-height:1.85;min-height:120px;margin-bottom:22px}
.service-link{font-size:11px;border-top-color:#e3eae4;padding-top:18px}
.service-link svg{width:19px;height:19px}
.service-controls{margin-top:16px}
.service-controls>p{font-weight:600;font-size:12px}
.service-controls .circle-button{background:transparent;color:var(--teal);border-color:#bbcec6}
.service-controls .circle-button:hover{color:white}
.service-controls .circle-button:disabled:hover{background:transparent;border-color:#bbcec6}
.service-note{margin-top:25px;padding:23px 0 0;gap:16px;font-size:12px}
.service-note a{gap:16px}
.approach{background:linear-gradient(115deg,#e9efea,#f0f3ee);border-top:1px solid #dde7de;border-bottom:1px solid #dde7de}
.approach-layout{gap:90px;align-items:start}
.approach-heading>p{max-width:375px;line-height:1.9}
.approach-heading>.text-link{font-size:13px}
.approach-signature{max-width:375px;border-color:#cddbd1;margin-top:34px}
.steps{padding-top:5px}
.steps li{gap:24px;padding:30px 0;border-color:#ccdacf}
.steps li:first-child{padding-top:0}
.step-number{width:43px;height:43px;border:1px solid #adc8bb;border-radius:50%;display:grid;place-items:center;font-size:21px;line-height:1;background:#ffffff55;margin-top:2px}
.steps h3{font-size:29px;line-height:1.2;margin-bottom:10px}
.steps p{font-size:13px;line-height:1.9;max-width:390px}
.garage-gallery{background:#f7f8f5}
.garage-gallery .section-intro{grid-template-columns:1.2fr 1fr;gap:70px}
.garage-gallery h2{font-size:58px}
.garage-overview{gap:18px;grid-template-columns:1.8fr 1fr}
.garage-overview>.garage-photo{height:390px}
.garage-photo{border-radius:var(--surface-radius);outline:1px solid #102e2c0d;outline-offset:-1px;box-shadow:0 3px 14px #173b3306;transition:box-shadow .3s}
.garage-photo>.photo-expand{width:34px;height:34px;background:#f8fffbeb;color:#153e3a;border:1px solid #ffffffad;box-shadow:0 2px 12px #0b2e3026;font-size:23px;right:16px;bottom:16px}
.garage-photo:hover{box-shadow:0 10px 26px #123c3315}
.garage-photo:hover img{transform:scale(1.025)}
.garage-details{gap:14px;margin-top:18px}
.garage-details>.garage-photo{aspect-ratio:3/4}
.garage-details .photo-expand{width:28px;height:28px;font-size:20px;right:12px;bottom:12px}
.gallery-hint{font-size:12px;margin-top:24px;color:#61776d}
.contact{background:#fff;border-top:1px solid #e3e9e2}
.contact-layout{grid-template-columns:1.15fr 1fr;gap:110px}
.contact-main h2{font-size:70px}
.contact-main>p{margin:24px 0 28px}
.contact-actions{gap:25px}
.email-link{font-size:14px}
.contact-number{font-size:12px;margin-top:20px}
.visit-card{padding:35px 36px 32px;border-radius:var(--surface-radius);background:linear-gradient(135deg,#103b3c,#082b2e 75%);border:1px solid #164b48;box-shadow:0 18px 45px #153a3012}
.visit-card-top{font-size:9px;letter-spacing:1.7px}
.opening-status{border:1px solid #c6e7dc30;padding:5px 9px;border-radius:30px;background:#ffffff05;font-size:10px;letter-spacing:0}
.opening-status.open{background:#43d7cb0c}
.visit-pin{margin-top:27px}
.visit-card h3{font-size:43px}
.route-link{font-size:12px}
.hours{margin-top:30px;padding-top:24px}
.hours h4{font-size:13px;margin-bottom:20px}
.hours dl>div{margin-bottom:13px;align-items:baseline}
.hours dl{font-size:13px}
.hours dd{font-variant-numeric:tabular-nums;letter-spacing:.15px}
.hours>p{font-size:11px;margin-top:21px}
.faq{padding:82px 0;background:#f2f5f0}
.faq-layout{grid-template-columns:.8fr 1.2fr;gap:90px}
.faq h2{font-size:54px}
.faq-items{border-top-color:#cbd9ce}
.faq details{border-bottom-color:#cbd9ce}
.faq summary{font-size:14px;font-weight:600;padding:22px 0;gap:22px;transition:color .2s}
.faq summary:hover,.faq details[open] summary{color:var(--teal)}
.faq .plus{width:25px;height:25px;border:1px solid #bfcec3;border-radius:50%}
.faq .plus:before,.faq .plus:after{width:9px;left:7px;top:11px}
.faq details[open] .plus{background:#dcece2;border-color:#a9c5b6}
.faq details p{font-size:13px;line-height:1.9;max-width:600px;margin-bottom:24px}
.footer{background:#09282b;padding:42px 0 23px}
.footer-top{padding-bottom:32px}
.footer-top>p{font-size:12px;color:#a2bab2}
.footer-contact{font-size:12px}
.footer-bottom{font-size:11px;color:#a2bab2;gap:26px}
.privacy-trigger{font-size:11px}
.whatsapp-float{right:22px;bottom:max(22px,env(safe-area-inset-bottom));padding:12px 18px;min-height:48px;box-shadow:0 6px 24px #082e2924;font-size:11px}
.photo-dialog{border-radius:10px;border-color:#51756a65;box-shadow:0 30px 90px #0004}
.photo-dialog figure img{border-radius:3px}
body:has(dialog[open]){overflow:hidden}
@media(min-width:1180px){
 .service{flex-basis:calc((100% - 54px)/4)}
 .service p{min-height:120px}
 .service-controls>div{display:none}
 .service-controls{margin-top:14px}
}
@media(min-width:801px) and (max-height:800px){
 .hero{height:calc(100svh - 88px);min-height:590px}
}
@media(max-width:1100px){
 .container{width:calc(100% - 64px)}
 .desktop-nav{gap:23px}.header-inner{gap:23px}
 .section{padding:80px 0}
 .section-intro,.garage-gallery .section-intro{gap:45px}
 .approach-layout{gap:55px}
 .contact-layout{gap:60px}
 .garage-overview>.garage-photo{height:345px}
 .visit-card{padding:30px}
}
@media(max-width:800px){
 html{scroll-padding-top:94px}
 .header-inner{height:80px}
 .section{padding:72px 0}
 .service-grid{gap:16px}.service p{min-height:132px}
 .section-intro,.garage-gallery .section-intro{gap:30px}
 h2,.garage-gallery h2{font-size:51px}
 .approach-layout{gap:38px}
 .steps li{gap:18px}
 .step-number{width:36px;height:36px;font-size:19px}
 .steps h3{font-size:26px}
 .contact-layout{gap:30px}
 .contact-main h2{font-size:60px}
 .visit-card{padding:26px 23px}
 .visit-card-top{letter-spacing:.5px;font-size:8px}
 .opening-status{font-size:9px;padding:4px 7px}
 .hours dl{font-size:12px}
 .garage-overview>.garage-photo{height:300px}
 .garage-details{gap:14px}
 .faq-layout{gap:35px}
}
@media(max-width:560px){
 html{scroll-padding-top:90px}
 .container{width:calc(100% - 40px)}
 .header-inner{height:76px;gap:9px}
 .brand-mark{width:36px;height:36px}
 .header-cta{min-height:42px;padding:10px 12px;font-size:11px}
 .mobile-nav{background:#fafbf8;padding:8px 20px 22px}
 .mobile-nav a{font-size:14px;padding:14px 0;border-bottom:1px solid #dfe7e0}
 .mobile-nav a:last-child{border-bottom:0;color:var(--teal)}
 .hero-content{padding-top:47px}
 .hero-copy p{max-width:320px}
 .hero-eyebrow{font-size:8px;letter-spacing:1.6px}
 .hero-actions{gap:19px}
 .hero-actions .text-link{font-size:12px}
 .hero-bottom>span{font-size:10px}
 .section{padding:62px 0}
 .eyebrow{font-size:9px;letter-spacing:1.8px}
 h2,.garage-gallery h2{font-size:47px;line-height:1.07}
 .section-intro{margin-bottom:30px}
 .section-intro>p{max-width:100%;font-size:14px;line-height:1.85;margin-top:22px}
 .service-grid{padding-bottom:10px;padding-right:20px}
 .service{flex-basis:86%;padding-bottom:23px}
 .service p{font-size:14px;min-height:130px}
 .service h3{font-size:32px}
 .service-controls>p{font-size:11px}
 .service-note{margin-top:22px;padding-top:22px;gap:7px;font-size:12px}
 .approach-heading>p{font-size:14px}
 .steps{margin-top:35px;padding-top:0}
 .steps li{gap:18px;padding:25px 0}
 .step-number{width:36px;height:36px;font-size:19px}
 .steps h3{font-size:27px}
 .steps p{font-size:14px;line-height:1.85}
 .garage-overview{grid-template-columns:1fr;gap:14px}
 .garage-overview>.garage-photo-wide{height:auto;aspect-ratio:1.45}
 .garage-overview>.garage-photo:not(.garage-photo-wide){height:auto;aspect-ratio:1.22}
 .garage-details{gap:12px;margin-top:14px}
 .garage-details>.garage-photo{aspect-ratio:3/4.2}
 .garage-details>.garage-photo:last-child{aspect-ratio:1.35}
 .garage-photo>.photo-expand{right:12px;bottom:12px;width:30px;height:30px;font-size:21px}
 .garage-details .photo-expand{width:26px;height:26px;font-size:19px}
 .gallery-hint{font-size:11px;line-height:1.75;margin-top:20px}
 .contact-main h2{font-size:61px}
 .contact-main>p{margin:23px 0 27px}
 .contact-actions .button{font-size:12px}
 .visit-card{margin-top:36px;padding:28px}
 .visit-card-top{font-size:9px;letter-spacing:1.2px}
 .opening-status{font-size:10px;padding:5px 8px}
 .visit-card h3{font-size:41px}
 .hours dl{font-size:13px}
 .faq h2{font-size:47px}
 .faq summary{font-size:14px;padding:22px 0}
 .faq details p{font-size:14px;padding-right:12px}
 .footer{padding-top:34px}
 .footer-top{gap:20px;padding-bottom:26px}
 .footer-contact{font-size:11px}
 .footer-bottom,.privacy-trigger{font-size:10px}
 .whatsapp-float{width:48px;min-height:48px;padding:0;right:15px;bottom:max(16px,env(safe-area-inset-bottom))}
 .photo-dialog{border-radius:8px}
}
@media(max-width:360px){
 .contact-main h2{font-size:54px}
 .hero-content h1{font-size:56px}
 .hero-copy p{font-size:13px}
 .hero-bottom>span{font-size:9px}
 .service{flex-basis:91%}
 .visit-card{padding:24px}
 .hours dl{font-size:12px}
 .footer-contact{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .garage-photo,.button,.faq summary{transition:none}
}

