:root{--navy:#031b38;--ink:#08152e;--blue:#00b9eb;--paper:#f5f7f9;--muted:#62738c}*{box-sizing:border-box}body{margin:0;font:16px/1.6 Arial,sans-serif;background:var(--paper);color:var(--ink)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}.test{background:#e6edf3;text-align:center;padding:6px;font-size:11px;letter-spacing:1px}header{background:var(--navy);color:white;display:flex;align-items:center;gap:35px;padding:20px max(5vw,20px);position:sticky;top:0;z-index:10}.logo{width:190px;display:block}nav{display:flex;gap:25px;margin-left:auto;font-size:14px}nav a:hover,nav a.active{color:var(--blue)}.wa{background:#20ae60;color:#fff;padding:10px 18px;border-radius:5px;font-weight:bold;white-space:nowrap}.wrap{max-width:1200px;margin:auto;padding:60px 28px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(36px,4.4vw,64px);line-height:1.08;letter-spacing:-2px;margin-bottom:22px}h2{font-size:36px;line-height:1.18;letter-spacing:-1px}h3{line-height:1.3}small,.muted{color:var(--muted)}.eyebrow{font-size:11px;letter-spacing:2.5px;font-weight:bold;text-transform:uppercase;margin-bottom:18px}.cyan{color:var(--blue)}.btn,button{display:inline-block;border:0;background:var(--blue);color:var(--navy);padding:13px 24px;border-radius:4px;cursor:pointer;font-weight:bold}.secondary{background:transparent;border:1px solid #8c9cad;color:inherit}.darkbtn{background:var(--navy);color:white}.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.hero{min-height:510px;background:linear-gradient(90deg,#031525 2%,#031525e8 30%,#03152515 75%),url('assets/hero.jpg') center right/cover;color:white;display:flex;align-items:center}.hero .wrap{width:100%}.hero p{max-width:420px;font-size:18px}.hero h1{max-width:570px}.search{background:white;display:flex;gap:18px;padding:24px;align-items:end}.search label{flex:1}.search label span,label span{display:block;font-size:12px;margin-bottom:6px}input,select,textarea{width:100%;border:1px solid #d6dfe8;border-radius:4px;background:#fff;padding:11px;color:var(--ink)}.searchwrap{max-width:1144px;margin:0 auto}.sectionhead{display:flex;justify-content:space-between;align-items:center}.textlink{color:#008bb9;border-bottom:1px solid var(--blue);font-size:14px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.card{background:white;display:block}.card img{width:100%;aspect-ratio:1.45;object-fit:cover;display:block}.cardbody{padding:18px}.card h3{font-size:18px;margin-bottom:5px}.price{font-size:23px;font-weight:bold;line-height:1.4}.card .muted{font-size:13px;margin:10px 0 15px}.tiles{display:grid;grid-template-columns:1fr 1fr;gap:24px}.tile{padding:50px;color:white;background:linear-gradient(90deg,#031b38eb,#031b3860),url('assets/hero.jpg') center/cover;min-height:230px}.tile h2{font-size:30px}.titleband{background:linear-gradient(110deg,#142332,#031b38);color:white}.titleband .wrap{padding-top:48px;padding-bottom:48px}.titleband h1{font-size:48px}.tabs{display:flex;gap:26px;margin:25px 0;border-bottom:1px solid #d6dfe8}.tabs button{background:none;padding:10px 0;border-radius:0}.tabs .selected{border-bottom:3px solid var(--blue)}.stockhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.stockhead select{width:auto}.detailgrid{display:grid;grid-template-columns:2fr 1fr;gap:25px}.gallery img{width:100%;aspect-ratio:1.5;object-fit:cover}.thumbs{display:flex;gap:10px;margin-top:10px}.thumbs button{width:22%;padding:0;background:none}.thumbs img{width:100%;aspect-ratio:1.5;object-fit:cover}.panel{background:white;padding:28px;border:1px solid #e3e9ef;border-radius:5px}.panel .btn,.panel button{width:100%;text-align:center;margin:8px 0}.facts{display:flex;justify-content:space-between;gap:20px;padding:24px;background:white;margin:30px 0}.facts small{display:block}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:24px}details{border-bottom:1px solid #dce3e9;padding:14px 0}summary{cursor:pointer;font-weight:bold}details p{padding-top:12px;margin-bottom:0}.services{margin-top:24px}.services h3{font-size:19px}.split{display:grid;grid-template-columns:1fr 1fr;min-height:370px;background:white}.splitcopy{padding:65px max(28px,5vw)}.splitphoto{background:url('assets/hero.jpg') center/cover;min-height:320px}.sellform{max-width:780px;margin:-35px auto 65px;position:relative;box-shadow:0 15px 45px #031b3809}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}form label{display:block;margin-bottom:18px;font-size:14px}textarea{min-height:110px;resize:vertical}.contactsplit{display:grid;grid-template-columns:1fr 1fr;max-width:1200px;margin:45px auto}.contactphoto{padding:50px;display:flex;flex-direction:column;justify-content:space-between;color:white;background:linear-gradient(#031b3850,#031b38ed),url('assets/hero.jpg') center/cover;min-height:550px}.contactphoto a{display:block;margin-top:10px}.contactphoto h1{font-size:44px}.contactform{padding:45px;background:white}.stars{color:#ff9a00;font-size:25px;letter-spacing:3px}.review{background:white;border:1px solid #e1e7ee;padding:24px;border-radius:6px}.review blockquote{margin:15px 0 28px;font-size:20px;font-weight:bold;min-height:65px}.review small{display:block}.reviewfooter{border-top:1px solid #e1e7ee;padding-top:15px}.center{text-align:center}.notice{font-size:13px;background:#e8eff5;padding:14px;border-radius:4px}.financephoto{width:100%;height:280px;object-fit:cover}.footgrid{display:grid;grid-template-columns:1.2fr .8fr 1fr 1.3fr;gap:40px}footer{background:var(--navy);color:#d5deeb;padding:60px max(5vw,25px) 25px;font-size:13px}footer h3{color:white;font-size:15px}footer a{display:block;margin:7px 0}footer p{margin:20px 0}.footbottom{border-top:1px solid #324255;display:flex;justify-content:space-between;margin-top:35px;padding-top:20px}.footbottom a{display:inline}dialog{border:0;border-radius:8px;max-width:550px;width:90%;padding:38px;color:var(--ink)}dialog::backdrop{background:#031525aa}.close{position:absolute;right:10px;top:4px;background:none;font-size:25px;padding:5px}#modal form{margin-top:25px}@media(max-width:850px){header{flex-wrap:wrap;gap:14px;padding:15px 20px}.logo{width:145px}.wa{margin-left:auto;font-size:13px;padding:8px 12px}nav{order:3;width:100%;margin:0;justify-content:space-between;gap:10px;font-size:12px}.hero{min-height:480px;background-position:60%}.hero h1{max-width:350px}.hero p{max-width:300px}.grid{grid-template-columns:repeat(2,1fr)}.search{flex-wrap:wrap}.search label{flex:1 1 40%}.wrap{padding:38px 20px}.detailgrid,.twocol,.split,.contactsplit{grid-template-columns:1fr}.facts{flex-wrap:wrap}.footgrid{grid-template-columns:1fr 1fr}.tiles{grid-template-columns:1fr}.contactsplit{margin:0}.contactphoto{min-height:380px}.contactform{padding:30px 22px}.sellform{margin:20px}.splitcopy{padding:40px 25px}.titleband h1{font-size:38px}.footbottom{display:block}.services{grid-template-columns:1fr}.sectionhead h2{font-size:29px}}@media(max-width:480px){.grid{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr;gap:0}.footgrid{grid-template-columns:1fr}.hero{background-position:55%}.hero h1{font-size:43px}.hero .wrap{background:#03152550}.tiles .tile{padding:32px}.stockhead{gap:15px}.review blockquote{min-height:0}}
/* Approved image assets, extracted without changing the photographed scene. */
.hero{background:var(--navy);position:relative;isolation:isolate;overflow:hidden;min-height:440px}.hero:before{content:'';position:absolute;inset:0 0 0 36%;background:url('assets/hero-exact.webp') center/contain no-repeat;z-index:-2}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#031b38 26%,#031b38cc 38%,transparent 57%);z-index:-1}.hero h1{font-size:clamp(38px,4vw,58px);max-width:520px}.hero p{max-width:380px}.hero .wrap{padding-top:65px;padding-bottom:65px}.splitphoto{background-image:url('assets/sell.webp');background-position:center;background-size:cover}.contactphoto{background:url('assets/contact.webp') center/cover;position:relative;min-height:570px}.contactphoto>div{visibility:hidden}.contactphoto>div:last-child{visibility:visible;position:absolute;inset:0}.contactphoto>div:last-child a{position:absolute;color:transparent;left:4%;width:90%;height:8%;margin:0}.contactphoto>div:last-child a:nth-child(1){top:75%}.contactphoto>div:last-child a:nth-child(2){top:82%}.contactphoto>div:last-child a:nth-child(3){top:89%}.contactphoto>div:last-child a:focus{outline:3px solid var(--blue)}.loadtile{background:url('assets/loadbay.webp') center/cover;position:relative}.interiortile{background:url('assets/interior.webp') center/cover;position:relative}.loadtile>*,.interiortile>*{visibility:hidden}.loadtile>a,.interiortile>a{visibility:visible;position:absolute;inset:0;color:transparent;border:0;font-size:0}.loadtile>a:focus,.interiortile>a:focus{outline:3px solid var(--blue)}#app[data-page="reviews"] .titleband{background:linear-gradient(90deg,#031b38 44%,transparent),url('assets/reviews-hero.webp') right center/auto 100% no-repeat,var(--navy)}#app[data-page="reviews"] .titleband h1{max-width:650px}#app[data-page="reviews"] .wrap{position:relative}.financephoto{object-fit:cover}.card img{image-rendering:auto}@media(max-width:850px){.hero{min-height:650px;align-items:start}.hero:before{inset:300px 0 0;background-size:contain;background-position:center bottom}.hero:after{background:linear-gradient(#031b38 0%,#031b38 35%,transparent 65%)}.hero .wrap{padding-top:35px;background:none}.hero h1{font-size:43px;max-width:100%}.hero p{max-width:100%}.contactphoto{min-height:600px;max-width:510px;width:100%;margin:auto}.tiles .tile{min-height:210px}.hero .actions{gap:10px}.hero .btn{padding:10px 15px}}
/* Blend editorial photography into the surrounding page. */
.hero:before{inset:0 0 0 30%;background-size:cover;background-position:center;mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 91%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 91%,transparent 100%)}.hero:after{background:linear-gradient(90deg,#031b38 18%,#031b38c9 33%,transparent 65%),linear-gradient(0deg,#031b38,transparent 14%,transparent 86%,#031b38)}
.split{background:var(--paper)}.splitphoto{mask-image:linear-gradient(90deg,transparent,#000 20%),linear-gradient(0deg,transparent,#000 25%);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%),linear-gradient(0deg,transparent,#000 25%);-webkit-mask-composite:source-in}
.contactsplit{background:var(--paper)}.contactphoto{mask-image:linear-gradient(90deg,#000 82%,transparent),linear-gradient(0deg,transparent,#000 8%,#000 94%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent),linear-gradient(0deg,transparent,#000 8%,#000 94%,transparent);-webkit-mask-composite:source-in}.contactform{background:transparent}
.financephoto{mask-image:linear-gradient(90deg,transparent,#000 10%,#000 85%,transparent),linear-gradient(0deg,transparent,#000 15%,#000 90%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 85%,transparent),linear-gradient(0deg,transparent,#000 15%,#000 90%,transparent);-webkit-mask-composite:source-in}
.tiles{background:var(--navy);gap:0}.tile{min-height:250px}.loadtile,.interiortile{mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in}
@media(max-width:850px){.hero:before{inset:270px 0 0;background-size:contain;background-position:center bottom;mask-image:linear-gradient(0deg,transparent,#000 12%,#000 82%,transparent);-webkit-mask-image:linear-gradient(0deg,transparent,#000 12%,#000 82%,transparent)}.hero:after{background:linear-gradient(#031b38 0%,#031b38 35%,transparent 65%)}.splitphoto{mask-image:linear-gradient(0deg,transparent,#000 20%,#000 85%,transparent);-webkit-mask-image:linear-gradient(0deg,transparent,#000 20%,#000 85%,transparent)}.contactphoto{mask-image:linear-gradient(0deg,transparent,#000 10%,#000 94%,transparent);-webkit-mask-image:linear-gradient(0deg,transparent,#000 10%,#000 94%,transparent)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sellstart{background:radial-gradient(ellipse at 80% 95%,#153952 0%,transparent 65%),linear-gradient(120deg,#283137,#102333);color:white;min-height:570px;text-align:center;display:flex;align-items:center}.sellstart .wrap{width:100%;padding-top:70px;padding-bottom:75px}.sellstart h1{font-weight:500;font-size:clamp(34px,4vw,55px);letter-spacing:-1.2px}.sellintro{font-size:23px;color:#c8cfd7;margin-bottom:45px}.regbar{max-width:900px;margin:0 auto 28px;border:2px solid #29b4db;border-radius:22px;padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:15px;background:#ffffff03}.regbar label{margin:0;display:flex;border-radius:9px;overflow:hidden}.reglabel{border-left:22px solid #278aa6;background:#ffea63}.reglabel input{background:#ffea63;border:0;border-radius:0;font-size:27px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;color:#1a2833;padding:18px 22px;min-width:0}.reglabel input::placeholder{color:#5f582d;opacity:1}.milelabel{border:1px solid #64717b;display:flex;background:#ffffff04}.milelabel input{background:transparent;border:0;color:white;font-size:26px;min-width:0;padding:18px 20px}.milelabel input::placeholder{color:#b6bdc5;opacity:1}.mileunit{background:#0002;padding:20px;font-size:22px;display:flex!important;align-items:center;margin:0!important;font-weight:bold}.startbtn{border-radius:40px;padding:17px 35px;font-size:21px;min-width:260px}.startbtn span{display:inline-block;border-left:1px solid #00344d55;padding-left:22px;margin-left:22px}.sellnote{font-size:13px;color:#b7c6d2;margin:22px 0 0}.sellstart #sellsteps>.demoform{background:white;color:var(--ink);max-width:700px;margin:auto;padding:30px;border-radius:8px;text-align:left}.sellstart #sellsteps>h2{margin-bottom:25px}.sellstart .notice{color:var(--ink);max-width:650px;margin:auto}@media(max-width:600px){.sellintro{font-size:18px;margin-bottom:28px}.regbar{grid-template-columns:1fr;padding:14px;border-radius:16px}.reglabel input,.milelabel input{font-size:23px}.sellstart .wrap{padding:50px 20px}.sellstart{min-height:560px}.mileunit{padding:15px}}
.searchwrap{max-width:1200px}.search{padding:34px 30px;gap:26px;min-height:150px}.search label span{font-size:16px;margin-bottom:12px}.search select{min-height:58px;font-size:19px;padding:14px 18px}.search button{min-height:58px;font-size:18px;padding:14px 30px}.search label{min-width:0}@media(max-width:600px){.search{padding:25px 20px;gap:20px}.search label{flex-basis:100%}.search button{width:100%}.search select{font-size:18px}}
header .wa{display:inline-flex;align-items:center;justify-content:center;gap:13px;background:linear-gradient(110deg,#48d979,#21cf61);color:#12372b;border-radius:999px;padding:12px 26px;font-size:19px;font-weight:700;line-height:1.3;min-width:130px;box-shadow:none}header .wa:hover{background:#48e080}header .wa svg{flex-shrink:0}@media(max-width:850px){header .wa{padding:10px 20px;min-width:108px;font-size:17px;gap:10px}header .wa svg{width:22px;height:22px}}
.contactbar{background:#112943;color:#e6edf4;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px max(5vw,20px);font-size:12px}.contactbar>div{display:flex;gap:25px}.contactbar a:first-child{font-weight:bold;color:white}.contactbar a:hover{color:var(--blue)}@media(max-width:600px){.contactbar{justify-content:center;font-size:12px;padding:8px 15px}.contactbar>span{display:none}.contactbar>div{gap:18px;flex-wrap:wrap;justify-content:center}}
/* Standalone approved-scene hero: preserve detail and a wider camera view. */
.hero{min-height:520px}.hero:before{inset:0;background-image:url('assets/hero-sharp.webp');background-size:auto 100%;background-position:right center;background-repeat:no-repeat;mask-image:linear-gradient(90deg,transparent 0%,#000 35%,#000 96%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 35%,#000 96%,transparent 100%)}.hero:after{background:linear-gradient(90deg,#031b38 5%,#031b38d9 27%,#031b3855 42%,transparent 62%),linear-gradient(0deg,#031b38 0%,transparent 7%,transparent 94%,#031b38)}@media(min-width:1600px){.hero{min-height:600px}}@media(max-width:850px){.hero{min-height:670px}.hero:before{inset:280px 0 0;background-size:contain;background-position:right center;mask-image:linear-gradient(0deg,transparent,#000 10%,#000 87%,transparent);-webkit-mask-image:linear-gradient(0deg,transparent,#000 10%,#000 87%,transparent)}.hero:after{background:linear-gradient(#031b38 0%,#031b38 36%,transparent 62%)}}
#app[data-page="finance"] .facts{margin-top:60px;margin-bottom:38px;padding:36px 30px;gap:35px}#app[data-page="finance"] .facts small{margin-bottom:10px}@media(max-width:600px){#app[data-page="finance"] .facts{margin-top:40px;padding:28px 24px;gap:26px;flex-direction:column}}
.search button.darkbtn{background:var(--blue);color:var(--navy)}.search button.darkbtn:hover{background:#28c8f2}
/* Consistent pill-shaped primary and secondary action buttons. */
.btn,button:not(.close):not([data-type]):not([data-photo]),.search button.darkbtn,.panel button,.startbtn{border-radius:999px}.tabs button{border-radius:0}.thumbs button{border-radius:0}
/* Align masthead branding with the main content grid. */
header,.contactbar{padding-left:max(28px,calc((100% - 1144px)/2));padding-right:max(28px,calc((100% - 1144px)/2))}header .logo{width:220px;max-width:none}header>a:first-child{flex-shrink:0}@media(max-width:1000px){header{gap:20px}header .logo{width:200px}nav{gap:16px}}@media(max-width:850px){header,.contactbar{padding-left:20px;padding-right:20px}header .logo{width:165px}header{gap:14px}}@media(max-width:380px){header .logo{width:150px}}
/* Slightly more compact homepage hero. */
.hero{min-height:460px}.hero .wrap{padding-top:48px;padding-bottom:48px}@media(min-width:1600px){.hero{min-height:520px}}@media(max-width:850px){.hero{min-height:610px}.hero .wrap{padding-top:32px;padding-bottom:32px}.hero:before{inset:260px 0 0}}
/* Footer follows the masthead and main content alignment. */
footer{padding-left:max(28px,calc((100% - 1144px)/2));padding-right:max(28px,calc((100% - 1144px)/2))}footer .logo{width:220px}@media(max-width:850px){footer{padding-left:20px;padding-right:20px}footer .logo{width:165px}}
/* Fade at the photograph's actual left edge, including wide screens. */
.hero:before{left:auto;right:0;top:0;bottom:0;width:min(100%,818px);background-size:100% 100%;mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 96%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 96%,transparent 100%)}.hero:after{background:linear-gradient(0deg,#031b38 0%,transparent 9%,transparent 91%,#031b38)}@media(min-width:1600px){.hero:before{width:924px}}@media(max-width:850px){.hero:before{top:260px;bottom:0;width:100%;background-size:contain;background-position:right center;mask-image:linear-gradient(90deg,transparent,#000 15%),linear-gradient(0deg,transparent,#000 12%,#000 85%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%),linear-gradient(0deg,transparent,#000 12%,#000 85%,transparent);-webkit-mask-composite:source-in}.hero:after{background:linear-gradient(#031b38 0%,#031b38 32%,transparent 58%)}}
/* Refined stock search controls; remove native bevels and spinner arrows. */
.search{border-radius:18px;background:#fff;box-shadow:0 8px 28px #031b3806;align-items:end}.search label span{font-size:14px;font-weight:600;letter-spacing:.2px;margin-left:4px;margin-bottom:10px;color:#31435b}.search select{-webkit-appearance:none;appearance:none;border:1px solid #d6e0e9;border-radius:15px;background-color:#f7f9fb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23031b38' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-position:right 20px center;background-repeat:no-repeat;padding:17px 54px 17px 22px;min-height:62px;font-size:18px;font-weight:500;box-shadow:none;cursor:pointer;transition:border-color .15s,box-shadow .15s,background-color .15s}.search select:hover{border-color:#84bfd0;background-color:#f0f7fa}.search select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #00b9eb22;background-color:#fff}.search button.darkbtn{min-height:62px}@media(max-width:600px){.search{border-radius:14px}.search select{font-size:17px;min-height:58px}.search button.darkbtn{min-height:58px}}
/* Give the vans more breathing room at the right edge. */
@media(min-width:851px){.hero:before{right:clamp(35px,4vw,100px)}}
/* Trial cyan outline on vehicle cards, matching the search treatment. */
.card{border:1px solid var(--blue);border-radius:15px;overflow:hidden;transition:box-shadow .18s,border-color .18s}.card:hover{border-color:#009aca;box-shadow:0 8px 25px #00b9eb18}.card:focus-visible{outline:3px solid #00b9eb55;outline-offset:4px}
/* Slightly smaller controls with a shared baseline. */
.search{align-items:flex-end;padding-top:28px;padding-bottom:28px}.search label{margin-bottom:0}.search select{height:54px;min-height:54px;padding-top:12px;padding-bottom:12px;font-size:17px}.search button.darkbtn{height:54px;min-height:54px;padding:12px 26px;font-size:17px;margin:0;flex-shrink:0}@media(max-width:600px){.search select,.search button.darkbtn{height:54px;min-height:54px}}
/* Homepage trial: soft grey canvas with white vehicle cards. */
#app[data-page="home"]{background:#eaf0f4}#app[data-page="home"] .searchwrap{padding-top:22px}#app[data-page="home"] .search{background:#f8fafb}#app[data-page="home"] .card{background:#fff}#app[data-page="home"]>.wrap{background:transparent}
#app[data-page="home"]{background:#e0e7ed}
#app[data-page="home"]{background:#cbd5df}
/* Bring the homepage hero scene slightly closer without moving the text. */
@media(min-width:851px){.hero:before{background-size:112% 112%;background-position:74% 66%}}
/* Shared page canvas: one shade lighter than the homepage grey trial. */
:root{--paper:#d5dee6}body,#app,#app[data-page="home"]{background:var(--paper)}#app .split,#app .contactsplit{background:var(--paper)}#app[data-page="home"]>.wrap{background:transparent}.card,.panel,.review,.search{background:#fff}
/* Sell page uses the same grey canvas as the other pages. */
.sellstart{background:var(--paper);color:var(--ink)}.sellstart .sellintro,.sellstart .sellnote{color:var(--muted)}.sellstart .regbar{background:#ffffff65}.sellstart .milelabel{background:#f7f9fb;border-color:#becbd7}.sellstart .milelabel input{color:var(--ink)}.sellstart .milelabel input::placeholder{color:#62738c}.sellstart .mileunit{background:#e7edf2;color:var(--ink)}
#app[data-page="finance"] .financephoto{height:auto;aspect-ratio:16/9;object-fit:cover}
.financehero{background:var(--paper);text-align:center}.financehero .wrap{padding-top:48px;padding-bottom:45px}.financehero h1{font-size:clamp(38px,5vw,68px);margin-bottom:15px}.financehero .eyebrow{margin-bottom:20px}.financestrap{font-size:22px;color:#435773;margin-bottom:10px}.financevehicles{display:block;width:min(100%,1100px);height:auto;margin:0 auto 15px;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in}.financecta{padding:17px 30px;font-size:19px}.financecta span{margin-left:18px}.financereasons{display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap;margin:25px 0 16px;font-weight:600}.financereasons i{font-style:normal;color:var(--blue)}.financeterms{font-size:12px;color:#52657d;margin:0}@media(max-width:600px){.financehero .wrap{padding-top:35px}.financestrap{font-size:18px}.financecta{font-size:16px;padding:15px 20px}.financereasons{gap:10px;font-size:13px}.financevehicles{width:100%;margin-top:15px}}
/* Lighter homepage canvas; other pages retain the shared grey. */
#app[data-page="home"]{background:#e8edf2}
/* Approved light grey shared consistently across all pages. */
:root{--paper:#e8edf2}body,#app,#app[data-page="home"],.financehero,.sellstart,#app .split,#app .contactsplit{background:var(--paper)}
/* Real image assets with crisp HTML headings and action links. */
.tiles{gap:24px;background:transparent}.tile.loadtile,.tile.interiortile{mask-image:none;-webkit-mask-image:none;border-radius:16px;overflow:hidden;min-height:300px;padding:34px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;isolation:isolate;background-size:cover;background-position:center}.tile.loadtile{background-image:linear-gradient(0deg,#031b38ed,transparent 90%),url('assets/loadbay-sharp.webp')}.tile.interiortile{background-image:linear-gradient(0deg,#031b38ed,transparent 90%),url('assets/cabin-sharp.webp')}.tile.loadtile>*,.tile.interiortile>*{visibility:visible;position:static}.tile h2{font-size:28px;letter-spacing:-.7px;margin-bottom:10px;color:#fff}.tile p{font-size:16px;color:#e4edf5;margin-bottom:19px}.tile.loadtile>a,.tile.interiortile>a{position:static;inset:auto;font-size:14px;color:#fff;border:1px solid var(--blue);border-radius:999px;padding:10px 19px;display:inline-flex;align-items:center;min-height:44px;background:#031b3840}.tile a:hover{background:var(--blue);color:var(--navy)}@media(max-width:600px){.tiles{gap:20px}.tile.loadtile,.tile.interiortile{min-height:300px;padding:26px}.tile h2{font-size:25px}}
.tile.loadtile{background-image:linear-gradient(0deg,#031b38f2,transparent 95%),url('assets/sell-exterior.webp');background-position:center 42%}.tile.interiortile{background-image:linear-gradient(0deg,#031b38f2,transparent 95%),url('assets/hero-sharp.webp');background-position:75% 63%}
/* Approved dusk images for the two homepage action panels. */
.tile.loadtile{background-image:linear-gradient(0deg,#031b38ed,transparent 95%),url('assets/sell-dusk-audi.webp');background-position:center 48%}.tile.interiortile{background-image:linear-gradient(0deg,#031b38ed,transparent 95%),url('assets/view-dusk-van.webp');background-position:center 48%}
/* Approved lighter dusk photography, with a restrained text overlay. */
.tile.loadtile{background-image:linear-gradient(0deg,#031b38d9,transparent 82%),url('assets/sell-dusk-audi-light.webp')}.tile.interiortile{background-image:linear-gradient(0deg,#031b38d9,transparent 82%),url('assets/view-dusk-van-light.webp')}
/* Contact: genuine imagery, live text, clear WhatsApp-first hierarchy. */
.contactpage{padding-top:44px;padding-bottom:60px}.contactintro{margin-bottom:34px}.contactintro h1{font-size:clamp(38px,4vw,56px);line-height:1.08;margin-bottom:15px}.contactintro p{font-size:18px;color:#52647d;margin-bottom:0}.contactintro .eyebrow{margin-bottom:15px}.contactlayout{display:grid;grid-template-columns:1.12fr 1fr;gap:32px;align-items:start}.contactleft{border-radius:18px;overflow:hidden;background:var(--navy);color:white}.contactscene{height:230px;background:linear-gradient(0deg,#031b38,transparent 70%),url('assets/finance-premium.webp') center 46%/cover;position:relative}.contactscene>span{position:absolute;bottom:20px;left:30px;font-size:23px;font-weight:600;letter-spacing:-.4px}.contactinfo{padding:4px 30px 30px}.contactwhatsapp{display:flex;align-items:center;justify-content:space-between;background:#26cf69;color:#082c20;border-radius:999px;padding:14px 22px;font-size:17px;font-weight:bold;margin-bottom:25px;transition:background .15s}.contactwhatsapp:hover{background:#49df81}.directcontact{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:25px;border-bottom:1px solid #ffffff26}.directcontact a{min-width:0}.directcontact small{display:block;color:#aebed2;font-size:12px;margin-bottom:5px}.directcontact strong{font-size:15px;font-weight:500;overflow-wrap:anywhere}.directcontact a:hover strong{color:var(--blue)}.contactvisit{padding-top:24px;display:flex;gap:15px;align-items:end;justify-content:space-between}.contactvisit h3{font-size:20px;margin-bottom:12px;letter-spacing:-.3px}.contactvisit p{font-size:13px;line-height:1.8;color:#d9e3ee;margin-bottom:10px}.contactvisit small{color:#afc0d3;font-size:12px}.contactvisit .textlink{color:var(--blue);font-size:12px;white-space:nowrap;margin-bottom:3px}.contactenquiry{background:white;border-radius:18px;padding:35px;box-shadow:0 8px 30px #031b3805}.contactenquiry .eyebrow{font-size:10px;margin-bottom:12px;color:#66758a}.contactenquiry h2{font-size:30px;margin-bottom:12px}.contactenquiry>p{font-size:15px;color:#62738c;margin-bottom:25px}.contactenquiry label{font-weight:600;font-size:13px;margin-bottom:18px}.contactenquiry input,.contactenquiry textarea{display:block;margin-top:7px;border:1px solid #d4dfe8;background:#f7f9fb;border-radius:11px;padding:13px 15px;font-size:16px;font-weight:400}.contactenquiry input:focus,.contactenquiry textarea:focus{outline:2px solid #00b9eb45;border-color:var(--blue)}.contactenquiry textarea{min-height:135px}.contactenquiry button{width:100%;padding:14px 20px;font-size:16px}.contactenquiry .notice{font-weight:400}@media(max-width:850px){.contactlayout{grid-template-columns:1fr;gap:24px}.contactintro h1{font-size:42px}.contactscene{height:230px}.contactpage{padding-top:32px}.contactenquiry{padding:28px}.contactvisit{align-items:start;flex-direction:column;gap:12px}}@media(max-width:420px){.contactinfo{padding:4px 23px 25px}.directcontact{grid-template-columns:1fr;gap:15px}.contactscene>span{left:23px;font-size:21px}}
/* Approved uppercase main navigation. */
header nav a{text-transform:uppercase;letter-spacing:.65px;font-size:13px;font-weight:500}@media(max-width:850px){header nav a{font-size:11px;letter-spacing:.35px}}
.browseall{display:flex;justify-content:center;padding-top:20px}.browseall .btn{padding:14px 30px;font-size:17px;min-height:54px}
.milelabel input[type="number"]{-moz-appearance:textfield;appearance:textfield}.milelabel input[type="number"]::-webkit-inner-spin-button,.milelabel input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.contactbar>span{line-height:1.5}.contactbar>div{flex-shrink:0}@media(min-width:601px) and (max-width:1000px){.contactbar{align-items:flex-start}.contactbar>span{max-width:55%}.contactbar>div{flex-direction:column;gap:2px}}@media(max-width:600px){.contactbar{flex-direction:column;gap:5px;text-align:center}.contactbar>span{display:block;font-size:10px}.contactbar>div{gap:15px}}
.socialfooter{border-top:1px solid #324255;margin-top:32px;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.socialfooter>span{font-weight:600;color:#fff}.sociallinks{display:flex;align-items:center;gap:22px}.sociallinks a{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:14px}.sociallinks a:hover{color:var(--blue)}.sociallinks svg{flex-shrink:0}.contactsocial{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:30px;padding-top:24px;border-top:1px solid #cdd7e0}.contactsocial>span{font-weight:600;font-size:14px}.contactsocial small{display:block;font-weight:400;font-size:12px;margin-top:4px}.socialfooter+.footbottom{margin-top:22px}@media(max-width:500px){.contactsocial,.socialfooter{align-items:flex-start;flex-direction:column;gap:16px}}

/* Home page additions from the approved mockup: rating badge, Buy with confidence, reviews, Peace of mind. */
.ratingbadge{display:inline-flex;align-items:center;gap:12px;margin-top:16px;background:#0b2a50;border:1px solid #1d4372;border-radius:12px;padding:9px 14px;color:#fff;font-size:14px;line-height:1.3;transition:border-color .15s}
/* Negative bottom margin = badge height + top margin, so the banner text stays exactly where it was. */
.ratingbadge{display:flex;width:fit-content;margin-bottom:-54px}
.ratingbadge:hover{border-color:var(--blue)}
.ratingstars{color:#ffc940;font-size:16px;letter-spacing:2px;line-height:1}
.whysection{padding-bottom:0}
.whysection h2{margin-bottom:28px}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature{background:#fff;border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:12px}
.feature h3{margin:0;font-size:20px}
.feature p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.homereviews{background:#fff}
.homereviews .sectionhead{flex-wrap:wrap;gap:24px 48px;align-items:flex-end;margin-bottom:32px}
.homereviews h2{margin-bottom:0}
.scorebox{display:flex;align-items:center;gap:16px;background:var(--paper);border-radius:16px;padding:16px 22px}
.scorebox .score{font-size:40px;font-weight:700;line-height:1;color:var(--navy)}
.scorebox .ratingstars{color:#c98a00;font-size:20px;display:block;margin-bottom:4px}
.scorebox small{font-size:14px;color:#3a4a61}
.homereviews .review{margin:0;background:var(--paper);border:0;border-radius:18px;padding:28px}
.homereviews .review .stars{color:#c98a00;font-size:18px;letter-spacing:2px}
.homereviews .review blockquote{font-size:22px;line-height:1.35;color:var(--navy);min-height:0}
.homereviews .reviewfooter{border-top:0;padding-top:0}
.homereviews .readall{margin:28px 0 0}
.peaceband{background:var(--navy);color:#fff}
.peaceband .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;padding-top:72px;padding-bottom:72px}
.peaceband .eyebrow{color:#c9d3e0}
.peaceband h2{margin-bottom:16px}
.peaceband p{font-size:17px;color:#dde4ee;margin-bottom:24px}
.peacelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.peacelist li{display:flex;gap:14px;align-items:center;background:#0b2a50;border-radius:14px;padding:18px 20px;font-size:17px}
.peacelist svg{flex-shrink:0}
@media(max-width:1000px){.features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.peaceband .wrap{grid-template-columns:1fr;padding-top:50px;padding-bottom:50px}.homereviews .review blockquote{font-size:20px}}
@media(max-width:600px){.features{grid-template-columns:1fr}.feature{padding:24px}.ratingbadge{font-size:14px;padding:10px 14px;gap:10px}.ratingbadge .ratingstars{font-size:16px}.scorebox{padding:14px 18px}.scorebox .score{font-size:34px}.peacelist li{font-size:16px;padding:16px 18px}}
/* On phones the banner photo sits under the text, so the badge goes in the banner's empty bottom strip instead of over the vans. */
@media(max-width:850px){.ratingbadge{position:absolute;left:20px;bottom:14px;margin:0;font-size:13px;padding:8px 12px;gap:8px;white-space:nowrap;max-width:calc(100% - 40px)}.ratingbadge .ratingstars{font-size:14px;letter-spacing:1px}}
@media(max-width:360px){.ratingbadge{font-size:12px}.ratingbadge .ratingstars{font-size:12px}}
/* Phone banner: text and buttons first, then the van photo underneath (computer layout above 850px is unchanged). */
@media(max-width:850px){
.hero{display:flex;flex-direction:column;align-items:stretch;min-height:0}
.hero .wrap{order:1;padding-top:32px;padding-bottom:8px}
.hero:after{display:none}
.hero:before{order:2;position:relative;inset:auto;top:auto;bottom:auto;right:auto;z-index:0;display:block;width:100%;aspect-ratio:1.64;background-image:url('assets/hero-sharp.webp');background-size:166.7% auto;background-position:95% 71.4%;background-repeat:no-repeat;mask-image:linear-gradient(0deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(0deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in}
.ratingbadge{position:static;margin:16px 0 0;max-width:100%}
}
@media(max-width:400px){.ratingbadge{font-size:12px;padding:8px 9px;gap:6px;white-space:normal}.ratingbadge .ratingstars{font-size:12px;letter-spacing:.5px;flex-shrink:0}}
/* Peace of mind now sits directly above the navy footer: a divider matching the footer's own lines, with even spacing either side. */
.peaceband{position:relative}
.peaceband .wrap{padding-bottom:60px}
.peaceband:after{content:'';position:absolute;bottom:0;left:max(28px,calc((100% - 1144px)/2));right:max(28px,calc((100% - 1144px)/2));border-top:1px solid #324255}
@media(max-width:850px){.peaceband .wrap{padding-bottom:60px}.peaceband:after{left:20px;right:20px}}
/* Keep the phone banner photo a whole number of pixels tall, so everything below it stays pixel-sharp. */
@media(max-width:850px){@supports (height:round(down,1px,1px)){.hero:before{aspect-ratio:auto;height:round(down,calc(100vw / 1.64),1px)}}}
/* Vehicle pages while finance is switched off: two panels (Part exchange, Ask about this vehicle) share the row. */
.services.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:850px){.services.two{grid-template-columns:1fr}}
/* Forms: the spam "honeypot" box is kept out of sight; problems show in a red-tinted notice. */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.notice.error{background:#fdecec;color:#7a1a1a;margin-bottom:14px}
button:disabled{opacity:.6;cursor:wait}
/* Privacy, Cookies and Reservation terms pages. */
.legal>*{max-width:800px}
.legal h2{font-size:24px;letter-spacing:-.4px;margin:36px 0 12px}
.legal p,.legal li{font-size:16px;line-height:1.65}
.legal ul{padding-left:22px;margin:0 0 16px}
.legal li{margin-bottom:6px}
.draftnote{background:#fff4d6;color:#5c4300;border:1px solid #f0d58a;font-size:14px;margin-bottom:28px}
/* "Buy with confidence" with three cards (while reservations and finance are both switched off). */
.features.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:850px){.features.three{grid-template-columns:1fr}}
/* Vehicle gallery with real Auto Trader photos (often 30–60): the thumbnails scroll sideways instead of shrinking. */
.thumbs{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.thumbs button{flex:0 0 22%;scroll-snap-align:start}
.thumbs button[aria-current="true"]{outline:3px solid #00b9eb;outline-offset:-3px}
.gallery{min-width:0}
.photoframe{position:relative}
.photoframe .photostep{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;padding:0;border-radius:50%;background:rgba(3,27,56,.65);color:#fff;font-size:30px;line-height:44px;text-align:center}
.photoframe .photostep:hover{background:rgba(3,27,56,.85)}
.photoframe .prev{left:12px}
.photoframe .next{right:12px}
.photocount{position:absolute;right:12px;bottom:12px;background:rgba(3,27,56,.7);color:#fff;padding:4px 11px;border-radius:999px;font-size:13px;font-weight:bold}
@media(max-width:600px){.thumbs button{flex-basis:30%}.photoframe .photostep{width:38px;height:38px;font-size:24px;line-height:36px}}