/* ============================================================
   GRIT DIESEL MAINTENANCE & REPAIR — grit-diesel.com
   Design system: black / graphite / warm off-white / Grit red
   Signature: diagonal "seam" geometry echoing the italic logo,
   clipped-corner CTAs, ring motif from the logo mark.
   ============================================================ */

:root{
  --ink:#0e0f11;
  --graphite:#191b1e;
  --steel:#232529;
  --line:#2f3237;
  --paper:#f2efe9;
  --paper-dim:#e7e3da;
  --red:#d5382d;
  --red-dark:#a92417;
  --muted:#9b9ea3;
  --muted-dark:#5f6368;
  --max:1180px;
  --seam:3.2rem; /* height of diagonal section seams */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  font-family:'Archivo',system-ui,sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}

/* ---------- Type ---------- */
h1,h2,h3,.display{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.05;
}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.6rem)}
p{max-width:62ch}

.eyebrow{
  display:flex;align-items:center;gap:.6rem;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;font-style:italic;text-transform:uppercase;
  letter-spacing:.14em;font-size:.95rem;color:var(--red);
  margin-bottom:.9rem;
}
/* ring motif — echoes the wheel mark in the Grit logo */
.eyebrow::before{
  content:"";width:.85rem;height:.85rem;border-radius:50%;
  border:3px solid var(--red);box-shadow:0 0 0 2px var(--ink);
  flex:none;
}
.on-dark .eyebrow::before{box-shadow:0 0 0 2px var(--paper)}

.lead{font-size:1.15rem}
.tagline{
  font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;
}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
section{padding:4.5rem 0}
.on-dark{background:var(--ink);color:var(--paper)}
.on-dark p{color:#cfd1d4}
.on-graphite{background:var(--graphite);color:var(--paper)}
.on-graphite p{color:#cfd1d4}

/* Diagonal seam between bands — the signature move */
.seam-top{position:relative;padding-top:calc(4.5rem + var(--seam))}
.seam-top::before{
  content:"";position:absolute;top:0;left:0;right:0;height:var(--seam);
  background:inherit;
  clip-path:polygon(0 100%,100% 0,100% 100%);
  transform:translateY(calc(-1 * var(--seam) + 1px));
}
/* red hairline riding the seam */
.seam-top::after{
  content:"";position:absolute;left:0;right:0;top:0;height:var(--seam);
  transform:translateY(calc(-1 * var(--seam)));
  background:linear-gradient(to top right,transparent calc(50% - 2px),var(--red) calc(50% - 2px),var(--red) calc(50% + 2px),transparent calc(50% + 2px));
  pointer-events:none;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;position:relative;
  font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:1.15rem;
  padding:.85rem 1.6rem;text-decoration:none;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%); /* clipped corner */
  transition:background .15s,color .15s,transform .18s,filter .18s;
}
.btn:hover{transform:translateY(-2px);filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.btn:active{transform:translateY(0)}
/* sheen sweep — draws the eye to the primary CTA */
.btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.32) 50%,transparent 68%);
  transform:translateX(-130%);
}
.btn-red::after{animation:sheen 4.6s ease-in-out infinite}
.btn-ghost:hover::after,.btn-ink:hover::after{animation:sheen .7s ease-out 1}
@keyframes sheen{
  0%{transform:translateX(-130%)}
  18%{transform:translateX(130%)}
  100%{transform:translateX(130%)}
}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark);filter:drop-shadow(0 6px 14px rgba(213,56,45,.45))}
/* outline buttons: the frame is the button background, the fill is an inset
   layer with a matching clipped corner — the border now follows the notch */
.btn-ghost{background:var(--paper);color:var(--paper)}
.btn-ghost::before{
  content:"";position:absolute;inset:2px;z-index:-1;background:var(--btn-bg,var(--ink));
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
  transition:background .15s;
}
.btn-ghost:hover{color:var(--ink)}
.btn-ghost:hover::before{background:var(--paper)}
.on-graphite .btn-ghost::before,.on-graphite{--btn-bg:var(--graphite)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--graphite)}
.btn svg{flex:none}

/* ---------- Utility bar ---------- */
.utility{
  background:var(--red);color:#fff;font-size:.9rem;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-style:italic;
  text-transform:uppercase;letter-spacing:.08em;
}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.45rem;padding-bottom:.45rem}
.utility a{color:#fff;text-decoration:none;white-space:nowrap}
.utility a:hover{text-decoration:underline}
.utility .hours{opacity:.95}
@media (max-width:640px){.utility .hours{display:none}}

/* ---------- Header / nav ---------- */
header.site{
  background:var(--ink);color:var(--paper);
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;gap:2rem;padding-top:.9rem;padding-bottom:.9rem}
.brand{display:flex;align-items:baseline;gap:.4rem;text-decoration:none;color:var(--paper)}
.brand .logo{height:48px;width:auto;display:block}
.brand .logo-sm{height:36px}
@media (max-width:640px){.brand .logo{height:40px}}
nav.primary{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
nav.primary a{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-style:italic;
  text-transform:uppercase;letter-spacing:.08em;font-size:1.05rem;
  color:var(--paper);text-decoration:none;padding:.3rem 0;
  border-bottom:2px solid transparent;
}
nav.primary a:hover,nav.primary a[aria-current="page"]{border-bottom-color:var(--red)}
nav.primary .btn{font-size:1rem;padding:.6rem 1.1rem}

.nav-toggle{display:none;margin-left:auto;background:none;border:2px solid var(--paper);color:var(--paper);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-style:italic;text-transform:uppercase;
  letter-spacing:.08em;padding:.45rem .9rem;cursor:pointer}
@media (max-width:860px){
  .nav-toggle{display:block}
  nav.primary{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--ink);flex-direction:column;align-items:stretch;gap:0;
    border-bottom:3px solid var(--red);
  }
  nav.primary.open{display:flex}
  nav.primary a{padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
  nav.primary .btn{margin:1rem 1.25rem;clip-path:none;justify-content:center}
}

/* ---------- Hero ---------- */
.hero{
  background:
    linear-gradient(100deg,rgba(14,15,17,.97) 0%,rgba(14,15,17,.86) 40%,rgba(14,15,17,.40) 78%,rgba(14,15,17,.25) 100%),
    var(--graphite) url("../img/shop-exterior.jpg") center right/cover no-repeat;
  /* Grit shop exterior photo (client-supplied) */
  color:var(--paper);
  padding:5.5rem 0 6.5rem;
  position:relative;overflow:hidden;
}
.hero::after{ /* diagonal red blade on the right, echoing the flyer geometry */
  content:"";position:absolute;top:-10%;right:-18%;width:44%;height:130%;
  background:linear-gradient(to right,var(--red),var(--red-dark));
  transform:skewX(-14deg);
  opacity:.14;pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;max-width:900px;margin-left:max(1.25rem,calc((100vw - var(--max))/2))}
.hero h1{max-width:16ch}
.hero .tagline{color:var(--red);font-size:clamp(1.15rem,2.2vw,1.5rem);margin:1.1rem 0 .9rem;letter-spacing:.05em}
.hero p{margin-bottom:1.8rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem}

/* ---------- Trust strip ---------- */
.trust{background:var(--graphite);color:var(--paper);padding:0;border-top:3px solid var(--red)}
.trust ul{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  max-width:var(--max);margin:0 auto;
}
.trust li{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-style:italic;
  text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;
  padding:1.15rem 1.25rem;text-align:center;position:relative;
}
.trust li + li::before{ /* diagonal slash dividers */
  content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;
  background:var(--red);transform:skewX(-14deg);
}
@media (max-width:760px){
  .trust ul{grid-template-columns:1fr 1fr}
  .trust li:nth-child(odd)::before{display:none}
}

/* ---------- Service categories ---------- */
.svc-cat{
  display:grid;grid-template-columns:minmax(240px,.9fr) 2fr;gap:2.5rem;
  padding:2.6rem 0;border-top:1px solid var(--paper-dim);
  align-items:start;
}
.svc-cat:first-of-type{border-top:0}
.svc-cat .num{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-style:italic;
  color:var(--red);letter-spacing:.12em;font-size:.95rem;text-transform:uppercase;
  display:block;margin-bottom:.35rem;
}
.svc-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.3rem 2rem;margin-top:.9rem}
.svc-list li{
  padding:.42rem 0 .42rem 1.75rem;position:relative;
  font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;font-size:1.08rem;line-height:1.35;
}
.svc-list li::before{ /* hex-nut marker */
  content:"";position:absolute;left:0;top:.52rem;width:1.05rem;height:1.05rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d5382d' fill-rule='evenodd' d='M12 1.5 21.1 6.75v10.5L12 22.5 2.9 17.25V6.75zM12 16.2a4.2 4.2 0 1 0 0-8.4 4.2 4.2 0 0 0 0 8.4z'/%3E%3C/svg%3E") no-repeat center/contain;
}
@media (max-width:760px){
  .svc-cat{grid-template-columns:1fr;gap:1rem}
  .svc-list{grid-template-columns:1fr}
}

/* ---------- Big phone treatment ---------- */
.phone-big{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
  font-size:clamp(2rem,6vw,3.4rem);letter-spacing:.02em;line-height:1.15;
  color:#fff;text-decoration:none;display:inline-block;
}
.phone-big:hover{color:var(--red)}
.phone-big .ext{font-size:.45em;font-weight:600;letter-spacing:.1em;vertical-align:.35em;color:var(--muted)}
.phone-label{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-style:italic;
  text-transform:uppercase;letter-spacing:.14em;font-size:.9rem;color:var(--red);
  display:block;margin-bottom:.15rem;
}
.phone-set{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:2rem 0}

/* ---------- Roadside band ---------- */
.roadside-band{position:relative;overflow:hidden}
.roadside-band::before{
  content:"24/7";position:absolute;right:-1rem;bottom:-3.5rem;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
  font-size:clamp(10rem,24vw,20rem);line-height:1;color:var(--graphite);
  z-index:0;pointer-events:none;user-select:none;
}
.roadside-band .wrap{position:relative;z-index:1}

/* ---------- Split feature (brand story / fleet) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.split .panel{
  background:var(--graphite) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTIwIDEyMCI+CiAgPGcgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC4wMzUiIHN0cm9rZS13aWR0aD0iNiIgZmlsbD0ibm9uZSI+CiAgICA8cGF0aCBkPSJNLTEwIDMwIEw0MCAtMjAiLz4KICAgIDxwYXRoIGQ9Ik0tMTAgNzAgTDgwIC0yMCIvPgogICAgPHBhdGggZD0iTS0xMCAxMTAgTDEyMCAtMjAiLz4KICAgIDxwYXRoIGQ9Ik0zMCAxMzAgTDE1MCAxMCIvPgogICAgPHBhdGggZD0iTTcwIDEzMCBMMTUwIDUwIi8+CiAgPC9nPgo8L3N2Zz4K");
  /* PHOTO SLOT: replace with real Grit photography (technician under truck,
     wheel assembly, diagnostics laptop). */
  min-height:340px;position:relative;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 2.4rem),calc(100% - 2.4rem) 100%,0 100%);
}
.split .panel::after{
  content:"";position:absolute;inset:auto 0 0 0;height:6px;background:var(--red);
}
@media (max-width:860px){.split{grid-template-columns:1fr}.split .panel{min-height:220px}}

.kicker-pair{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
  text-transform:uppercase;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;
}
.kicker-pair .alt{color:var(--red)}

/* ---------- Checklist / audience list ---------- */
.check-list{list-style:none;display:grid;gap:.55rem;margin:1.2rem 0}
.check-list li{padding-left:1.6rem;position:relative}
.check-list li::before{
  content:"";position:absolute;left:0;top:.5rem;width:.85rem;height:.5rem;
  border-left:3px solid var(--red);border-bottom:3px solid var(--red);
  transform:rotate(-45deg);
}

/* ---------- Location ---------- */
.loc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:start}
@media (max-width:860px){.loc-grid{grid-template-columns:1fr;gap:1.6rem}}
.map-frame{border:1px solid var(--line);width:100%;height:380px;filter:grayscale(.35) contrast(1.05);background:var(--steel)}
@media (max-width:860px){.map-frame{height:240px}}
.addr{font-style:normal;line-height:1.8}
.flagged{border-left:3px solid var(--red);padding-left:.9rem;color:var(--muted-dark);font-size:.9rem;margin-top:.8rem}
.on-dark .flagged,.on-graphite .flagged{color:var(--muted)}

/* ---------- Final CTA ---------- */
.final-cta{text-align:center}
.final-cta h2{font-size:clamp(2.2rem,5vw,3.6rem);max-width:20ch;margin:0 auto 1.6rem}
.final-cta .cta-row{justify-content:center}

/* ---------- Footer ---------- */
footer.site{background:var(--ink);color:var(--paper);padding:3.5rem 0 6.5rem;border-top:3px solid var(--red)}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
footer.site h3{font-size:1.05rem;letter-spacing:.1em;margin-bottom:.9rem;color:var(--red)}
footer.site ul{list-style:none;display:grid;gap:.45rem}
footer.site a{color:#cfd1d4;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .legal{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
@media (max-width:860px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer.site .cols{grid-template-columns:1fr}}

/* ---------- Sticky mobile call bar ---------- */
.callbar{display:none}
@media (max-width:860px){
  .callbar{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;
    box-shadow:0 -4px 14px rgba(0,0,0,.35);
  }
  .callbar a{
    font-family:'Barlow Condensed',sans-serif;font-weight:700;font-style:italic;
    text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;
    text-align:center;padding:1rem .5rem;text-decoration:none;
  }
  .callbar .shop{background:var(--ink);color:#fff}
  .callbar .road{background:var(--red);color:#fff}
}

/* ---------- Forms ---------- */
form.contact{display:grid;gap:1rem;grid-template-columns:1fr 1fr;max-width:640px}
form.contact .full{grid-column:1/-1}
form.contact label{
  display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-style:italic;
  text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;margin-bottom:.3rem;
}
form.contact input,form.contact textarea{
  width:100%;padding:.75rem .9rem;font:inherit;background:#fff;
  border:1px solid #c9c5bb;border-left:3px solid var(--ink);
}
form.contact input:focus,form.contact textarea:focus{outline:2px solid var(--red);outline-offset:1px;border-left-color:var(--red)}
form.contact button{border:0;cursor:pointer}
@media (max-width:560px){form.contact{grid-template-columns:1fr}}

/* ---------- Focus visibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--red);outline-offset:2px;
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  background:linear-gradient(100deg,rgba(14,15,17,.97),rgba(14,15,17,.82)),var(--graphite) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTIwIDEyMCI+CiAgPGcgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC4wMzUiIHN0cm9rZS13aWR0aD0iNiIgZmlsbD0ibm9uZSI+CiAgICA8cGF0aCBkPSJNLTEwIDMwIEw0MCAtMjAiLz4KICAgIDxwYXRoIGQ9Ik0tMTAgNzAgTDgwIC0yMCIvPgogICAgPHBhdGggZD0iTS0xMCAxMTAgTDEyMCAtMjAiLz4KICAgIDxwYXRoIGQ9Ik0zMCAxMzAgTDE1MCAxMCIvPgogICAgPHBhdGggZD0iTTcwIDEzMCBMMTUwIDUwIi8+CiAgPC9nPgo8L3N2Zz4K");
  color:var(--paper);padding:4rem 0;
}
.page-hero p{margin-top:1rem}

/* ---------- Detail sections (services page) ---------- */
.svc-detail{padding:2.8rem 0;border-top:1px solid var(--paper-dim)}
.svc-detail:first-of-type{border-top:0}
.svc-detail h3{margin-bottom:.6rem}
.svc-detail .tag{
  display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-style:italic;
  text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:#fff;background:var(--ink);
  padding:.2rem .6rem;margin-left:.6rem;vertical-align:middle;
}
.verify{background:var(--paper-dim);padding:1.2rem 1.4rem;border-left:4px solid var(--red);margin-top:2rem;font-size:.95rem}


/* ---------- Photography (deployment build) ---------- */
.panel{position:relative;overflow:hidden}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.roadside-band.has-photo{
  background:linear-gradient(rgba(10,11,12,.80),rgba(10,11,12,.90)),
             url("../img/roadside-night.jpg") center/cover no-repeat;
}
.page-hero.bg-photo{background-size:cover;background-position:center}
.page-hero.bg-night{background-image:linear-gradient(100deg,rgba(14,15,17,.95) 0%,rgba(14,15,17,.62) 100%),url("../img/roadside-night.jpg")}
.page-hero.bg-tech{background-image:linear-gradient(100deg,rgba(14,15,17,.95) 0%,rgba(14,15,17,.62) 100%),url("../img/tech-truck.jpg")}
.page-hero.bg-shop{background-image:linear-gradient(100deg,rgba(14,15,17,.95) 0%,rgba(14,15,17,.55) 100%),url("../img/shop-exterior.jpg")}
.photo-band{margin:2.6rem 0;position:relative;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 2rem),calc(100% - 2rem) 100%,0 100%)}
.photo-band img{width:100%;height:auto;max-height:440px;object-fit:cover;display:block}
.photo-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--red)}