/* Rutherford Lot Striping
   Amber on asphalt, taken from the logo and the work itself.
   Brand colours from H:\Dev\clients\rutherford-lot-striping\RLS.txt */

:root{
  --asphalt:#17181A;
  --asphalt-2:#1F2124;
  --asphalt-3:#2A2D31;
  --paint:#F4F4F2;
  --amber:#EDB059;
  --amber-hot:#F0C000;
  --line:#3A3E43;
  --muted:#9BA0A6;
  --ok:#5FBF8F;
  --bad:#E4796E;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;animation:none!important;}
}
body{
  margin:0;background:var(--asphalt);color:var(--paint);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
a{color:var(--amber);}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

.skip{position:absolute;left:-9999px;background:var(--amber);color:#241A05;
  padding:10px 16px;font-weight:700;z-index:200;}
.skip:focus{left:12px;top:12px;}

/* the painted line motif: this business paints lines for a living */
.rule{height:4px;background:repeating-linear-gradient(90deg,var(--amber) 0 44px,transparent 44px 76px);}

header.site{background:var(--asphalt-2);border-bottom:1px solid var(--line);}
.bar{display:flex;align-items:center;gap:20px;padding:14px 0;flex-wrap:wrap;}
.logo{display:flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none;color:inherit;}
.logo img{width:44px;height:44px;object-fit:contain;}
.logo b{font-family:Archivo,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1.15;display:block;}
.logo small{display:block;font-weight:500;font-size:11px;color:var(--amber);letter-spacing:.13em;text-transform:uppercase;}
nav{display:flex;gap:22px;flex-wrap:wrap;}
nav a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500;padding:4px 0;}
nav a:hover{color:var(--paint);}
nav a[aria-current="page"]{color:var(--amber);box-shadow:inset 0 -2px 0 var(--amber);}
.callbtn{background:var(--amber);color:#241A05;font-weight:700;font-size:14px;
  padding:10px 16px;text-decoration:none;white-space:nowrap;}
.callbtn:hover{background:var(--amber-hot);}
a:focus-visible,button:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}

.hero{padding:74px 0 62px;}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;}
.eyebrow{font-family:Archivo,sans-serif;font-size:12px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--amber);margin:0 0 16px;}
h1{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(38px,6vw,62px);
  line-height:1.03;letter-spacing:-.025em;margin:0 0 18px;text-wrap:balance;}
h1 em{font-style:normal;color:var(--amber);}
.lede{font-size:19px;color:var(--muted);margin:0 0 30px;max-width:46ch;}
.cta{display:flex;gap:12px;flex-wrap:wrap;}
.btn{font-family:Archivo,sans-serif;font-weight:700;font-size:15px;padding:14px 22px;
  text-decoration:none;display:inline-block;border:2px solid transparent;cursor:pointer;}
.btn.primary{background:var(--amber);color:#241A05;}
.btn.primary:hover{background:var(--amber-hot);}
.btn.ghost{border-color:var(--line);color:var(--paint);}
.btn.ghost:hover{border-color:var(--amber);}
.heroimg{border:1px solid var(--line);}
.heroimg img{display:block;width:100%;height:auto;}

section{padding:60px 0;}
section.tight{padding-top:0;}
h2{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(27px,3.4vw,36px);
  letter-spacing:-.015em;margin:0 0 10px;text-wrap:balance;}
h3{font-family:Archivo,sans-serif;font-size:19px;font-weight:700;margin:0 0 8px;letter-spacing:-.01em;}
.sub{color:var(--muted);margin:0 0 32px;max-width:60ch;}
.prose{max-width:64ch;color:var(--muted);}
.prose p{margin:0 0 16px;}
.prose strong{color:var(--paint);}

.svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);}
.svc{background:var(--asphalt-2);padding:26px 24px 28px;}
.svc .n{font-family:Archivo,sans-serif;font-size:12px;font-weight:700;color:var(--amber);
  letter-spacing:.15em;margin-bottom:12px;}
.svc p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6;}

/* gallery */
.gwrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.gitem{position:relative;margin:0;border:1px solid var(--line);background:var(--asphalt-2);
  cursor:zoom-in;overflow:hidden;padding:0;display:block;width:100%;text-align:left;
  font:inherit;color:inherit;}
.gitem img{display:block;width:100%;height:190px;object-fit:cover;transition:transform .35s ease;background:var(--asphalt-3);}
.gitem:hover img,.gitem:focus-visible img{transform:scale(1.04);}
.gitem figcaption{padding:10px 12px;font-size:13px;color:var(--muted);}
.gempty{color:var(--muted);padding:26px;border:1px dashed var(--line);text-align:center;}

.lb{position:fixed;inset:0;background:rgba(10,10,11,.95);display:none;
  align-items:center;justify-content:center;z-index:99;padding:26px;}
.lb.open{display:flex;}
.lb img{max-width:min(1200px,94vw);max-height:82vh;object-fit:contain;border:1px solid var(--line);}
.lb .cap{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:var(--muted);
  font-size:14px;padding:0 24px;}
.lb button{background:rgba(0,0,0,.5);border:1px solid var(--line);color:var(--paint);
  cursor:pointer;font-family:inherit;line-height:1;}
.lb .x{position:absolute;top:16px;right:20px;font-size:28px;padding:8px 13px;border:0;background:none;}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);font-size:26px;padding:13px 17px;}
.lb .nav:hover{border-color:var(--amber);}
.lb .prev{left:18px;} .lb .next{right:18px;}

/* quote form */
.quote{background:var(--asphalt-2);border:1px solid var(--line);padding:32px;}
.quote .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
input,textarea{width:100%;background:var(--asphalt);border:1px solid var(--line);
  color:var(--paint);padding:11px 13px;font:inherit;font-size:15px;}
input:focus,textarea:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber);}
.field{margin-bottom:16px;}
.formnote{font-size:13px;color:var(--muted);margin:14px 0 0;}
.msg{display:none;padding:13px 15px;font-size:14.5px;margin-top:16px;border:1px solid;}
.msg.show{display:block;}
.msg.ok{background:rgba(95,191,143,.1);border-color:var(--ok);color:var(--ok);}
.msg.err{background:rgba(228,121,110,.1);border-color:var(--bad);color:var(--bad);}
.hp{position:absolute;left:-9999px;}

footer.site{background:var(--asphalt-2);border-top:1px solid var(--line);
  padding:34px 0;font-size:14.5px;color:var(--muted);margin-top:20px;}
.fgrid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.fcontact{text-align:right;}

@media (max-width:820px){
  .hero .grid,.quote .grid2{grid-template-columns:1fr;}
  .hero{padding:48px 0 40px;}
  nav{order:3;width:100%;gap:16px;}
  .fcontact{text-align:left;}
}