@font-face{font-family:Archivo;src:url("fonts/archivo-latin.woff2") format("woff2");font-weight:400 900;font-stretch:100%;font-display:swap}
@font-face{font-family:Inter;src:url("fonts/inter-latin.woff2") format("woff2");font-weight:400 800;font-display:swap}
:root{--charcoal:#15171A;--orange:#FF5A1F;--gray:#3A3F45;--body:#C9CDD2;--off:#F4F2EE;--line:#2A2E33;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--charcoal);color:var(--white);font-family:Inter,Arial,sans-serif;line-height:1.5}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:50;background:var(--orange);color:#111;padding:.7rem 1rem}
.skip-link:focus{top:1rem}
:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem clamp(1rem,3vw,2rem);background:linear-gradient(135deg,#060709,#171a1e);border-bottom:1px solid var(--line)}
.logo{text-decoration:none;font-family:Archivo,sans-serif;font-weight:900;line-height:1}
.logo span{display:block;font-size:clamp(1.45rem,3vw,2.2rem)}
.logo small{display:block;font-weight:600;color:var(--body);font-size:.9rem;margin-top:.22rem}
.topbar-actions{display:flex;align-items:center;gap:.85rem;font-weight:800}
.topbar-actions span{font-weight:600;color:var(--body)}
.top-phone{text-decoration:none;font-size:clamp(1.05rem,2vw,1.45rem)}
.phone-symbol{display:none}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.85rem 1.15rem;border:1px solid transparent;border-radius:4px;text-decoration:none;font-weight:900;cursor:pointer;font-family:Archivo,Inter,sans-serif}
.button-orange{background:linear-gradient(135deg,var(--orange),#ff3b00);color:#fff}
.button-orange:hover{filter:brightness(1.08)}
.button-outline{border-color:rgba(255,255,255,.7);color:#fff;background:rgba(0,0,0,.12)}
.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:720px;background:#08090b;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0 auto 0 0;z-index:2;width:min(760px,62vw);background:linear-gradient(90deg,rgba(6,7,9,.94) 0%,rgba(6,7,9,.88) 70%,rgba(6,7,9,.58) 90%,rgba(6,7,9,0) 100%);pointer-events:none}
.hero-media{position:relative;min-height:440px}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:contrast(1.08) saturate(.85)}
.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,.18) 48%,rgba(0,0,0,.05))}
.hero-media span{position:absolute;z-index:4;top:1.6rem;left:1.6rem;background:#050607;color:#fff;font-family:Archivo,sans-serif;font-weight:900;font-size:1.25rem;padding:.35rem .65rem}
.hero-media.after span{left:auto;right:1.6rem;background:var(--orange)}
.hero-copy{position:absolute;z-index:3;left:clamp(1rem,2.6vw,2.4rem);top:6rem;bottom:auto;max-width:700px}
.eyebrow{color:var(--orange);font-family:Archivo,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin:0 0 .45rem}
h1,h2,h3{font-family:Archivo,Inter,sans-serif;margin:0;line-height:.96;font-weight:900}
.hero-copy h1{font-size:clamp(3.55rem,6vw,5rem)}
h1{font-size:clamp(3.6rem,8vw,6rem)}
h2{font-size:clamp(2.4rem,5vw,4.2rem)}
h3{font-size:1.25rem}
.hero-copy p:not(.eyebrow){max-width:640px;color:#f2f2f2;font-size:1.08rem}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.2rem 0}
.trust-line{font-weight:700;color:var(--body)}
.proof-band{text-align:center;padding:1.35rem 1rem;background:linear-gradient(135deg,#1b1d20,#0b0d0f);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-band h2{font-size:clamp(1.35rem,3vw,2.05rem);color:#fff}
.proof-band p{margin:.35rem 0 0;color:var(--body)}
.flake-picker{padding:clamp(2.8rem,6vw,5rem) 1rem;background:var(--off);color:#151515;text-align:center}
.flake-picker>p:not(.eyebrow){max-width:760px;margin:.6rem auto 1.4rem;color:#333}
.swatches{display:grid;grid-template-columns:repeat(8,minmax(118px,1fr));gap:.9rem;max-width:1420px;margin:0 auto;overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem}
.swatch{appearance:none;border:2px solid #1b1b1b;background:#161719;color:#fff;padding:0;border-radius:9px;overflow:hidden;text-align:left;cursor:pointer;scroll-snap-align:start;min-width:140px}
.swatch img{width:100%;aspect-ratio:1.32/1;object-fit:cover}
.swatch span{display:block;font-family:Archivo,sans-serif;font-weight:900;text-align:center;padding:.45rem .25rem}
.swatch small{display:block;color:#d5d5d5;padding:0 .65rem .75rem;font-size:.76rem;line-height:1.25}
.swatch.is-selected{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,90,31,.25)}
.swatch.is-selected span{background:var(--orange)}
.picker-note{margin-top:1rem}
.picker-cta{margin-top:.5rem}
.process{padding:clamp(3rem,6vw,5rem) clamp(1rem,4vw,2rem);background:#0f1113;background-image:radial-gradient(circle at 20% 10%,rgba(255,255,255,.05),transparent 34%)}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:2rem 0}
.process-grid article{border-left:1px solid rgba(255,255,255,.35);padding-left:1.2rem}
.process-grid span{color:var(--orange);font-family:Archivo,sans-serif;font-size:2rem;font-weight:900}
.process-grid p{color:var(--body)}
.process picture{display:block;max-width:880px;margin:0 auto 1rem}
.process img{border:1px solid var(--line)}
.strip-closing{text-align:center;font-family:Archivo,sans-serif;font-weight:900;font-size:1.25rem;margin:0}
.quote-section{display:grid;grid-template-columns:.75fr 1fr;gap:2rem;padding:clamp(3rem,6vw,5rem) clamp(1rem,5vw,4rem);background:var(--off);color:#151515}
.quote-section p{color:#333}
.iron-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;align-content:start}
.iron-form h3{grid-column:1/-1}
label{display:block;font-weight:900;margin-bottom:.25rem;font-size:.9rem}
input,select,textarea{width:100%;min-height:44px;border:1px solid #a9adb1;background:#fff;color:#111;font:inherit;padding:.68rem .75rem;border-radius:3px}
textarea{min-height:116px;resize:vertical}
.iron-form button,.iron-form .form-micro,.iron-form .alt-contact,.iron-form .form-status{grid-column:1/-1}
.form-micro,.alt-contact,.form-status{font-size:.9rem;text-align:center;margin:.1rem 0;color:#34383d}
.website-field{position:absolute;left:-10000px;width:1px;height:1px}
.template-copy[hidden]{display:none}
.gallery-section{padding:clamp(3rem,6vw,5rem) clamp(1rem,4vw,2rem);background:#070809}
.gallery-section>p:not(.eyebrow){color:var(--body);margin-top:.2rem}
.garage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;margin:1.4rem 0 1.6rem}
figure{margin:0;background:#111;border:1px solid var(--line)}
figure img{width:100%;aspect-ratio:1.55/1;object-fit:cover}
figcaption{padding:.55rem .7rem;color:#f5f5f5;font-size:.9rem}
.gallery-section .button{display:flex;max-width:360px;margin:0 auto}
.trust{padding:clamp(3rem,6vw,5rem) clamp(1rem,5vw,4rem);background:var(--off);color:#151515}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#c9c9c9;margin:1.4rem 0}
.trust-grid article{background:var(--off);padding:1.2rem}
.trust-grid p{color:#34383d}
.owner-line{text-align:center;font-style:italic;font-weight:800}
.testimonials{padding:clamp(3rem,6vw,5rem) clamp(1rem,4vw,2rem);background:#111315}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.4rem}
blockquote{margin:0;border-left:1px solid rgba(255,255,255,.35);padding-left:1rem}
blockquote p{color:#efefef}
blockquote footer{color:var(--body);font-style:italic}
.final-cta{display:grid;grid-template-columns:.8fr 1.2fr;gap:2rem;padding:clamp(3rem,6vw,5rem) clamp(1rem,5vw,4rem);background:#090a0c;border-top:1px solid var(--line)}
.hours-block{text-align:center;background:#1f2328;padding:1rem;color:#e6e6e6;font-family:Archivo,sans-serif;font-weight:800}
.hours-block p{margin:.2rem}
.site-footer{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1.4rem 1rem;background:#0b0d0f;border-top:1px solid var(--line);color:var(--body);font-size:.9rem;text-align:center}
.site-footer p{margin:0}
.site-footer a{text-decoration:none;color:#fff}
@media (max-width:900px){
  .topbar{position:relative;align-items:flex-start}
  .topbar-actions{display:grid;grid-template-columns:1fr;justify-items:end;gap:.25rem}
  .hero{display:block;min-height:auto}
  .hero:before{display:none}
  .hero-media{min-height:260px;width:50%;float:left}
  .hero-copy{position:relative;clear:both;left:auto;top:auto;bottom:auto;padding:2rem 1.2rem;background:#111}
  .hero-copy h1,h1{font-size:clamp(3rem,13vw,4.8rem)}
  .swatches{display:flex}
  .swatch{flex:0 0 190px}
  .quote-section,.final-cta{grid-template-columns:1fr}
  .process-grid,.garage-grid,.trust-grid,.quote-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .topbar{display:block}
  .topbar-actions{margin-top:.8rem;justify-items:start}
  .hero-media{float:none;width:100%;min-height:220px}
  .hero-media.after{display:none}
  .iron-form{grid-template-columns:1fr}
  .site-footer{grid-template-columns:1fr}
}
@media (max-width:480px){
  .topbar{position:sticky;display:flex;align-items:center;justify-content:space-between;gap:.65rem;min-height:68px;padding:.5rem .65rem}
  .logo{min-width:0;max-width:calc(100vw - 208px);flex:0 1 auto;margin-right:.35rem}
  .logo span{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .logo small,.topbar-actions>span,.phone-text{display:none}
  .topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:.45rem;flex:0 0 auto;margin:0}
  .top-phone{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.55);border-radius:999px;font-family:Inter,Arial,sans-serif}
  .phone-symbol{display:inline;font-size:.95rem;line-height:1}
  .topbar .button-orange{min-height:38px;padding:.46rem .38rem;font-size:.66rem;white-space:nowrap}
  .hero-media{min-height:210px}
  .hero-copy{padding:1.4rem .95rem}
}