:root{
--paper:#FAFAF8; --paper-2:#F2EEEA; --ink:#1F1A18; --ink-soft:#5E5551;
--red:#C0271F; --red-dark:#8E1B15; --sun:#F2B705; --dirt:#A63D2F; --line:#E2DCD7;
--sand:#F2EEEA; --muted:#5E5551;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Karla','Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;line-height:1.06;letter-spacing:-.022em}
h1{font-size:clamp(2.2rem,5.6vw,3.9rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.6vw,2.6rem);font-weight:800;margin-bottom:.65rem}
h3{font-size:1.18rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.35rem}
p{margin-bottom:1rem}
a{color:var(--red-dark)}
img,svg{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.eyebrow{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:.6rem}
section{padding:60px 0}
section.alt{background:var(--paper-2)}
.grid{display:grid;gap:22px}
@media(min-width:760px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.muted{color:var(--ink-soft)}
.small{font-size:.9rem}
/* topbar + header */
.topbar{background:var(--ink);color:#C4BAB5;font-size:.85rem;padding:7px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;font-weight:700}
header.site{position:sticky;top:0;z-index:50;background:rgba(250,250,248,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:18px;padding-top:13px;padding-bottom:13px}
.brand{text-decoration:none;color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-.03em;line-height:1.1}
.brand span{display:block;font-family:'Karla',sans-serif;font-weight:500;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
nav.main{margin-left:auto;display:flex;gap:2px;overflow-x:auto}
nav.main a{white-space:nowrap;text-decoration:none;color:var(--ink);font-weight:700;font-size:.92rem;padding:8px 11px;border-radius:999px}
nav.main a:hover{background:var(--paper-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Karla',sans-serif;font-weight:700;font-size:1rem;text-decoration:none;border-radius:999px;padding:14px 26px;border:2px solid transparent;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn.gold{background:var(--red);color:#fff}
.btn.gold:hover{background:var(--red-dark)}
.btn.ghost{border-color:var(--ink);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.call{background:var(--ink);color:var(--paper)}
.header-call{margin-left:8px;flex:none;font-size:.92rem;padding:10px 18px;background:var(--red);color:#fff}
.header-call:hover{background:var(--red-dark)}
@media(max-width:700px){.header-call span.lbl{display:none}}
/* hero: light paper, red emphasis, like the main site */
.hero{background:var(--paper);border-bottom:1px solid var(--line)}
.hero .wrap{padding-top:clamp(48px,7vw,84px);padding-bottom:clamp(44px,6vw,72px);max-width:900px}
.hero h1{color:var(--ink);margin:.5rem 0 1.1rem}
.hero h1 em{font-style:normal;color:var(--red);display:block}
.hero p.lead{font-size:clamp(1.05rem,1.9vw,1.2rem);color:var(--ink-soft);max-width:36em}
.proof{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 26px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:.87rem;font-weight:700;color:var(--ink)}
.stars{color:var(--sun);letter-spacing:.08em}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
/* dry-time signature: dark ink band styling, sun accent */
.drybar{background:var(--ink);color:var(--paper);border-radius:18px;padding:28px 26px 22px}
.drybar h3{color:var(--paper);margin-bottom:14px}
.dt-row{margin-bottom:14px}
.dt-row .lbl{display:flex;justify-content:space-between;font-size:.85rem;font-weight:700;margin-bottom:5px;color:#C4BAB5}
.dt-us .lbl{color:var(--paper)}
.dt-track{height:16px;border-radius:999px;background:#4C4340;overflow:hidden}
.dt-fill{height:100%;border-radius:999px}
.dt-them .dt-fill{width:100%;background:#8E817B}
.dt-us .dt-fill{width:8%;min-width:64px;background:linear-gradient(90deg,var(--sun),#f7ca3e)}
.drybar .small{margin:6px 0 0;color:#B8ADA8}
/* cards */
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;display:block;text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
a.card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(31,26,24,.10)}
.card .ic{width:42px;height:42px;margin-bottom:12px;color:var(--red)}
.card p{margin-bottom:0;color:var(--ink-soft);font-size:.95rem}
.card .go{display:inline-block;margin-top:10px;font-weight:700;color:var(--red-dark);font-size:.92rem}
/* checklist */
ul.check{list-style:none;margin:12px 0 18px}
ul.check li{padding:7px 0 7px 32px;position:relative;border-bottom:1px dashed var(--line)}
ul.check li:before{content:"";position:absolute;left:2px;top:13px;width:18px;height:18px;border-radius:50%;
background:var(--red);-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat}
/* faq */
details.faq{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:10px}
details.faq summary{cursor:pointer;font-weight:700;padding:15px 18px;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:after{content:"+";font-weight:800;color:var(--red)}
details.faq[open] summary:after{content:"2"}
details.faq .a{padding:0 18px 15px;color:var(--ink-soft)}
/* testimonials */
.tst{background:#fff;border:1px solid var(--line);border-left:4px solid var(--sun);border-radius:0 14px 14px 0;padding:18px 20px}
.tst p{font-size:.98rem;margin-bottom:8px}
.tst .who{font-size:.8rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
/* areas */
.areas{display:flex;flex-wrap:wrap;gap:9px}
.areas a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;text-decoration:none;color:var(--ink);font-weight:700;font-size:.9rem}
.areas a:hover{border-color:var(--red);color:var(--red-dark)}
.areas a.here{background:var(--red);color:#fff;border-color:var(--red)}
/* band cta: red, white button like the price block on the main site */
.band{background:linear-gradient(150deg,var(--red),var(--red-dark));color:#fff;border-radius:22px;padding:44px 30px;text-align:center}
.band h2{color:#fff}
.band p{color:#F6D5D2;max-width:44em;margin:0 auto 22px}
.band .btn.gold{background:#fff;color:var(--red-dark)}
.band .btn.gold:hover{background:var(--paper-2)}
.band .btn.ghost{border-color:#fff;color:#fff}
.band .btn.ghost:hover{background:#fff;color:var(--red-dark)}
/* breadcrumbs */
.crumbs{font-size:.85rem;color:var(--ink-soft);padding:16px 0 0}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--red-dark)}
/* footer: dark ink like the main site */
footer.site{background:var(--ink);color:#C4BAB5;margin-top:64px;font-size:.93rem}
footer.site .wrap{padding:48px 20px 24px}
footer.site h4{color:var(--paper);font-family:'Bricolage Grotesque',sans-serif;font-size:1rem;font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
footer.site a{color:#E5DDD7;text-decoration:none}
footer.site a:hover{text-decoration:underline;color:#fff}
footer.site ul{list-style:none}
footer.site li{margin-bottom:7px}
.fgrid{display:grid;gap:30px}
@media(min-width:820px){.fgrid{grid-template-columns:1.3fr 1fr 1fr 1.3fr}}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:18px;font-size:.82rem;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#8E817B}
.foot-nap b{color:var(--paper)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* trustindex placeholder */
.ti-placeholder{background:#fff;border:2px dashed var(--line);border-radius:14px;padding:26px;color:var(--ink-soft);font-size:.95rem}
/* before/after */
.ba-grid{display:grid;gap:20px;margin:14px 0}
@media(min-width:820px){.ba-grid{grid-template-columns:1fr 1fr}}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px}
.ba-side{position:relative}
.ba img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px}
.ba-tag{position:absolute;top:10px;left:10px;background:var(--ink);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px;z-index:2}
.ba-tag.after{background:var(--red)}
.ba-feature{grid-column:1/-1}
.ba-feature img{aspect-ratio:4/3}
.gal-singles{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.gal-singles img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
/* review slots + photos */
.tst .slot em{color:#8E817B;font-size:.92rem}
.tst .src{font-weight:700;color:var(--red);margin-left:6px}
.tst-feature{grid-column:1/-1;border-left-width:6px}
.rev-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:10px 0}
.rev-photos img{border-radius:10px;aspect-ratio:1;object-fit:cover;width:100%}
/* quote form */
.qform{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 12px 30px rgba(31,26,24,.07)}
.qform h3{font-size:1.4rem;margin-bottom:6px}
.qform label{display:block;font-weight:700;font-size:.88rem;margin-bottom:12px}
.qform input,.qform select,.qform textarea{display:block;width:100%;margin-top:5px;padding:12px 13px;border:1.5px solid var(--line);border-radius:10px;font:inherit;background:var(--paper)}
.qform input:focus,.qform select:focus,.qform textarea:focus{border-color:var(--red);outline:none}
.frow{display:grid;gap:0 14px}
@media(min-width:560px){.frow{grid-template-columns:1fr 1fr}}
.qform .hp{position:absolute;left:-9999px}
.qform.compact{padding:20px}
.qform.compact h3{font-size:1.15rem}
/* mobile sticky bar */
.mobile-bar{display:none}
@media(max-width:700px){
.mobile-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;bottom:0;left:0;right:0;z-index:60;background:rgba(250,250,248,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.mobile-bar .btn{padding:12px 10px;font-size:.95rem}
body{padding-bottom:74px}
}
/* ============ mobile hamburger + slide-in nav ============ */
.nav-toggle,.nav-close,.nav-scrim{display:none}
.hamburger{
display:none;margin-left:auto;flex:none;
width:46px;height:46px;border:1px solid var(--line);border-radius:12px;
background:var(--paper);cursor:pointer;align-items:center;justify-content:center;
}
.hamburger span{
display:block;width:22px;height:2.5px;background:var(--ink);border-radius:2px;
position:relative;transition:.2s;
}
.hamburger span::before,.hamburger span::after{
content:"";position:absolute;left:0;width:22px;height:2.5px;background:var(--ink);border-radius:2px;transition:.2s;
}
.hamburger span::before{top:-7px}
.hamburger span::after{top:7px}
@media(max-width:860px){
/* hide the inline desktop nav + desktop call button on phones */
nav.main{display:none}
.header-call{display:none}
.hamburger{display:flex}
/* the slide-in panel */
nav.main.mobile{
display:flex;flex-direction:column;gap:0;overflow:visible;
position:fixed;top:0;right:0;height:100dvh;width:min(82vw,340px);
background:var(--paper);z-index:120;
box-shadow:-8px 0 40px rgba(0,0,0,.18);
padding:22px 20px calc(22px + env(safe-area-inset-bottom));
transform:translateX(100%);transition:transform .28s ease;
margin-left:0;
}
.nav-toggle:checked ~ nav.main.mobile{transform:translateX(0)}
/* dark backdrop behind the panel */
.nav-toggle:checked ~ .nav-scrim{
display:block;position:fixed;inset:0;background:rgba(20,16,14,.5);z-index:110;
}
nav.main.mobile a{
white-space:normal;font-size:1.08rem;padding:15px 14px;border-radius:12px;
border-bottom:1px solid var(--line);
}
nav.main.mobile a:last-of-type{border-bottom:none}
nav.main.mobile a:hover,nav.main.mobile a:active{background:var(--paper-2)}
/* panel header row with close button */
.nav-panel-head{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:10px;padding-bottom:12px;border-bottom:2px solid var(--red);
}
.nav-panel-head strong{
font-family:'Bricolage Grotesque',sans-serif;font-size:1.05rem;color:var(--red);letter-spacing:-.02em;
}
.nav-close{
display:flex;width:38px;height:38px;border:none;background:none;cursor:pointer;
align-items:center;justify-content:center;font-size:1.7rem;line-height:1;color:var(--ink);
}
/* call button inside the panel */
.nav-mobile-call{
display:block;margin-top:16px;text-align:center;background:var(--red);color:#fff;
padding:15px;border-radius:999px;text-decoration:none;font-weight:700;font-size:1.05rem;
}
.nav-mobile-hours{text-align:center;margin-top:12px;color:var(--ink-soft);font-size:.9rem}
}
/* lock body scroll when menu open (works via the checkbox) */
/* ============ hero banner with van image ============ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .hero-media{
position:absolute;inset:0;z-index:0;
background:url('/assets/photos/aaa-superior-vans-oahu.jpg') center 38% / cover no-repeat;
}
/* light scrim so dark text stays readable over the photo */
.hero .hero-media::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg, rgba(250,249,246,.97) 0%, rgba(250,249,246,.92) 38%, rgba(250,249,246,.55) 70%, rgba(250,249,246,.25) 100%);
}
.hero .wrap{position:relative;z-index:1}
@media(max-width:860px){
/* on phones: photo as a band on top, text below on solid paper */
.hero .hero-media{height:190px;bottom:auto}
.hero .hero-media::after{
background:linear-gradient(180deg, rgba(250,249,246,.15) 0%, rgba(250,249,246,.15) 55%, rgba(250,249,246,1) 100%);
}
.hero .wrap{padding-top:206px}
}