/* ==========================================================================
   MK Auto Repairs
   Palette taken straight from the MK logo: brand green #0E822D on
   near black, with primer grey and off white doing the quiet work.
   A lighter cut of the same green is used for green text on dark
   backgrounds, where the brand green itself is too dark to read.
   ========================================================================== */

:root{
  --ink:#101214;
  --steel:#242A2C;
  --slate:#5C6672;      /* muted text on light grounds only */
  --slate-lt:#949DA6;   /* muted text on dark grounds, keeps AA */
  --primer:#DCDCD6;
  --paper:#F6F6F3;
  --white:#FFFFFF;

  /* MK brand green, straight off the logo */
  --green:#0E822D;
  --green-dk:#0A6623;
  /* lighter cut of the same green, used only for text on dark so it stays readable */
  --green-hi:#34B854;
  --line:rgba(22,24,27,.14);
  --line-lt:rgba(255,255,255,.16);

  --wrap:1180px;
  --display:"Barlow Condensed",Impact,"Haettenschweiler","Arial Narrow",sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:78px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

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

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--ink);color:var(--white);padding:12px 18px}

:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:.98;letter-spacing:-.005em;margin:0}

.eyebrow{
  font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-hi);
  margin:0 0 18px;
}
.eyebrow--dark{color:var(--green)}
.eyebrow--green{color:var(--green-hi)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;font-size:19px;
  letter-spacing:.03em;text-transform:uppercase;text-decoration:none;
  padding:13px 24px;border:2px solid transparent;border-radius:2px;
  cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease;
}
.btn--lg{font-size:21px;padding:16px 30px}
.btn--full{width:100%}
.btn--green{background:var(--green);color:var(--white);border-color:var(--green)}
.btn--green:hover{background:var(--green-dk);border-color:var(--green-dk);color:var(--white);transform:translateY(-2px)}
.btn--dark{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn--dark:hover{background:var(--steel);border-color:var(--steel);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--white);border-color:var(--line-lt)}
.btn--ghost:hover{border-color:var(--green-hi);color:var(--green-hi)}

/* ---------- Masthead ---------- */
.masthead{
  position:sticky;top:0;z-index:50;
  background:rgba(22,24,27,.96);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line-lt);
}
.masthead__inner{display:flex;align-items:center;gap:28px;height:78px}

.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:50px;width:auto}

.masthead__nav{display:flex;gap:26px;margin-left:auto}
.masthead__nav a{
  font-family:var(--display);font-weight:500;font-size:18px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--primer);
  text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent;
}
.masthead__nav a:hover{color:var(--white);border-bottom-color:var(--green-hi)}

.masthead__actions{display:flex;align-items:center;gap:16px}
.tel{
  font-family:var(--display);font-weight:600;font-size:22px;
  color:var(--white);text-decoration:none;white-space:nowrap;
}
.tel:hover{color:var(--green-hi)}

/* ---------- Hero ---------- */
.hero{
  background:var(--ink);color:var(--white);
  background-image:
    repeating-linear-gradient(115deg,rgba(255,255,255,.022) 0 2px,transparent 2px 9px);
  padding:72px 0;
  /* Fills the screen below the sticky masthead. min-height not height,
     so it still grows if the content needs more room on a short laptop.
     svh is the mobile-safe unit: it ignores the browser chrome that
     slides in and out, which is what makes 100vh jump on phones. */
  min-height:calc(100vh - 78px);
  min-height:calc(100svh - 78px);
  display:grid;
  align-content:center;
}
.hero__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}

.hero h1{font-size:clamp(3.1rem,6.6vw,5.4rem);text-transform:uppercase;letter-spacing:-.01em}
.hero h1 .hl{color:var(--green-hi)}

.lede{font-size:19px;color:var(--primer);max-width:46ch;margin:26px 0 34px}

.hero__btns{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- Excess panel (the signature block) ----------
   Light panel lifted off the dark hero. Hard edges, and the same
   solid block label used on the before and after tags, so it reads
   as part of the same set rather than a generic accent card. */
.chip{
  position:relative;
  background:var(--paper);color:var(--ink);
  padding:38px 32px 30px;
  border-radius:2px;
  box-shadow:0 24px 48px rgba(0,0,0,.34);
}
.chip__tag{
  position:absolute;top:0;left:32px;transform:translateY(-50%);
  font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:.16em;text-transform:uppercase;
  background:var(--green);color:var(--white);padding:8px 15px 6px;
}
.chip__h{
  font-size:clamp(1.6rem,2.4vw,2.05rem);line-height:1.0;
  text-transform:uppercase;margin:6px 0 24px;
}

.chip__list{margin:0;padding:0;border-top:1px solid var(--line)}
.chip__list > div{padding:15px 0;border-bottom:1px solid var(--line)}
.chip__list dt{
  font-family:var(--display);font-weight:700;font-size:19px;
  letter-spacing:.05em;text-transform:uppercase;
}
.chip__list dd{margin:3px 0 0;font-size:15.5px;color:var(--slate);line-height:1.5}

.chip__note{font-size:16px;color:var(--ink);margin:22px 0 0;line-height:1.55;font-weight:500}

.hero__copy{min-width:0}

/* ---------- Trust strip ---------- */
.strip{background:var(--steel);color:var(--white);padding:30px 0}
.strip__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.strip__item strong{
  display:block;font-family:var(--display);font-weight:700;font-size:26px;
  text-transform:uppercase;letter-spacing:.02em;color:var(--green-hi);
}
.strip__item span{display:block;font-size:15px;color:var(--primer);margin-top:2px}

/* ---------- Generic section ---------- */
.section{padding:96px 0}
.section + .section{padding-top:0}
.section--form{background:var(--white);border-top:1px solid var(--line)}
.section__h{font-size:clamp(2.3rem,4.3vw,3.5rem);text-transform:uppercase;max-width:20ch}
.section__foot{
  margin:44px 0 0;padding-top:26px;border-top:1px solid var(--line);
  font-size:17px;color:var(--slate);max-width:70ch;
}

/* ---------- Services as paint swatches ---------- */
.swatches{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  margin-top:46px;background:var(--line);border:1px solid var(--line);
}
.swatch{background:var(--white);padding:32px 28px 34px;position:relative;transition:background .18s ease}
.swatch::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--green);opacity:0;transition:opacity .18s ease;
}
.swatch:hover{background:var(--paper)}
.swatch:hover::before{opacity:1}
.swatch h3{font-size:27px;text-transform:uppercase;margin-bottom:11px}
.swatch p{margin:0;font-size:16px;color:var(--slate);line-height:1.6}

/* ---------- Recent work ---------- */
.work__lede{max-width:60ch;color:var(--slate);margin:20px 0 0}

.ba{--ar:1/1;margin:46px 0 0}
.ba + .ba{margin-top:40px}
.ba__pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ba__side{position:relative;overflow:hidden;background:var(--ink);border:1px solid var(--line);border-radius:2px}
.ba__side img{display:block;width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover}
.ba--wide{--ar:5/2}
.ba--mid{--ar:11/5}
/* Inset from the corner so each tag reads as a label sitting on its own
   image, rather than floating against an edge you cannot see. */
.ba__tag{
  position:absolute;left:12px;bottom:12px;
  font-family:var(--display);font-weight:700;font-size:17px;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--steel);color:var(--white);padding:7px 16px 5px;
  border-radius:2px;
  box-shadow:0 3px 12px rgba(0,0,0,.35);
}
.ba__tag--a{background:var(--green);color:var(--white)}
.ba__cap{margin:15px 0 0;font-size:16px;color:var(--slate);max-width:66ch}

.seq__h{
  font-size:30px;text-transform:uppercase;letter-spacing:.01em;
  margin:64px 0 0;padding-top:34px;border-top:1px solid var(--line);
}
.seq{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.seq li{margin:0}
.seq__n{
  display:block;font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:.2em;color:var(--green);margin-bottom:9px;
}
.seq img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--primer);border-radius:2px}
.seq__cap{display:block;margin-top:10px;font-size:15px;color:var(--slate);line-height:1.5}

/* ---------- Excess band ---------- */
.band{background:var(--steel);color:var(--white);padding:88px 0}
.band__inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.band h2{font-size:clamp(2.2rem,4vw,3.2rem);text-transform:uppercase;max-width:16ch}
.band__body p{color:var(--primer);margin:0 0 20px;max-width:56ch}
.band__body .btn{margin-top:10px}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.about__body p{margin:0 0 20px;color:var(--slate);max-width:58ch}
.about__body p:last-child{margin-bottom:0}

/* ---------- Reviews ---------- */
.reviews{background:var(--ink);color:var(--white);padding:76px 0;text-align:center}
.reviews__inner{max-width:640px}
.stars{color:var(--green-hi);font-size:32px;letter-spacing:.14em;line-height:1}
.reviews__score{font-size:21px;margin:16px 0 6px}
.reviews__score strong{font-family:var(--display);font-size:30px;letter-spacing:.02em}
.reviews__sub{color:var(--primer);margin:0 0 26px}
.reviews .btn--dark{background:var(--green);color:var(--white);border-color:var(--green)}
.reviews .btn--dark:hover{background:var(--green-dk);border-color:var(--green-dk)}

/* ---------- Estimate form ---------- */
.price{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.price__intro p{color:var(--slate);max-width:44ch}
.price__intro .section__h{margin-bottom:18px}

.details{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:22px}
.details li{font-size:16px;line-height:1.55}
.details a{color:var(--ink);text-decoration-color:var(--green);text-underline-offset:3px}
.details a:hover{color:var(--green-dk)}
.details__k{
  display:block;font-family:var(--display);font-weight:600;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:4px;
}

.price__form{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:34px}

.field{margin-bottom:20px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field label{
  display:block;font-family:var(--display);font-weight:600;font-size:16px;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:7px;
}
.field .opt{font-weight:500;color:var(--slate);letter-spacing:.05em;text-transform:none}
.field input,.field textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:2px;
  padding:12px 14px;transition:border-color .15s ease;
}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(14,130,45,.20)}
.field input[type=file]{padding:10px;background:var(--white);cursor:pointer}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.smallprint{font-size:13.5px;color:var(--slate);text-align:center;margin:14px 0 0}

.alert{display:block;padding:16px 18px;border-radius:2px;margin-bottom:24px;font-size:16px}
/* Author styles beat the browser's built-in [hidden] rule, so display:block
   above would un-hide both alerts. This puts hidden back in charge. */
.alert[hidden]{display:none}
.price__form form[hidden]{display:none}
.alert strong{display:block;font-family:var(--display);font-size:21px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px}
.alert--ok{background:#E7F1E3;border-left:5px solid #4C7B3A;color:#2C4A22}
.alert--bad{background:#F8E5E2;border-left:5px solid #B23B27;color:#772416}

/* ---------- Inline call to action ----------
   Same language as the hero and the dark bands: near black ground,
   the faint diagonal rule texture, condensed caps, hard edges. */
.cta{
  display:flex;align-items:center;justify-content:space-between;gap:38px;flex-wrap:wrap;
  margin:56px 0 0;padding:36px 38px;
  background:var(--ink);color:var(--white);border-radius:2px;
  background-image:
    repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,transparent 2px 9px);
}
.cta__copy{min-width:0}
.cta__h{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,3vw,2.5rem);line-height:.99;letter-spacing:-.004em;
  text-transform:uppercase;margin:0;
}
.cta__h .hl{color:var(--green-hi)}
.cta__sub{margin:14px 0 0;font-size:17px;color:var(--primer);max-width:44ch}

/* ---------- Map ---------- */
.map{margin-top:36px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--ink)}
.map iframe{display:block;width:100%;height:340px;border:0}
.map__holder{
  display:flex;align-items:center;min-height:340px;color:var(--white);
  background:var(--ink);
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 46px);
}
.map__inner{padding:30px 28px}
.map__addr{
  font-family:var(--display);font-weight:700;font-size:27px;line-height:1.06;
  text-transform:uppercase;letter-spacing:.02em;margin:0 0 10px;
}
.map__hint{color:var(--primer);font-size:16px;margin:0 0 20px;max-width:42ch}
.map__btns{display:flex;flex-wrap:wrap;gap:12px}
.btn--ghost-dk{background:transparent;color:var(--white);border-color:var(--line-lt)}
.btn--ghost-dk:hover{border-color:var(--green-hi);color:var(--green-hi)}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:var(--primer);padding:46px 0;font-size:15px}
.foot__inner{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot p{margin:0 0 4px}
.foot a{color:var(--primer);text-decoration-color:var(--slate-lt);text-underline-offset:3px}
.foot a:hover{color:var(--green-hi)}
.foot__logo{height:56px;width:auto;margin-bottom:14px}
.foot__credit{
  align-self:flex-end;color:var(--slate-lt);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.foot__po{display:inline-flex;align-items:center;line-height:0;opacity:.85;transition:opacity .15s ease}
.foot__po:hover{opacity:1}
.foot__po img{height:26px;width:auto}
.foot__credit a{color:var(--primer)}

/* ---------- Motion ---------- */
.rise{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .btn:hover,.swatch:hover{transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .hero__inner,.band__inner,.about,.price{grid-template-columns:1fr;gap:44px}
  .swatches{grid-template-columns:repeat(2,1fr)}
  .strip__inner{grid-template-columns:repeat(2,1fr);gap:22px}
  .masthead__nav{display:none}
  .section__h,.band h2{max-width:none}
}

@media (max-width:640px){
  body{font-size:16px}
  .masthead__inner{height:66px;gap:12px}
  html{scroll-padding-top:66px}
  .logo img{height:38px}
  .tel{display:none}
  .masthead__actions{margin-left:auto}
  .btn{font-size:17px;padding:11px 17px}
  .btn--lg{font-size:19px;padding:14px 22px}
  .hero{
    padding:48px 0 56px;
    min-height:calc(100vh - 66px);
    min-height:calc(100svh - 66px);
  }
  .hero h1{font-size:clamp(2.5rem,10vw,3.4rem)}
  .hero__btns .btn{width:100%}
  .section,.band{padding:64px 0}
  .swatches{grid-template-columns:1fr}
  .strip__inner{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr;gap:0}
  .price__form{padding:24px 20px}
  .chip{padding:34px 22px 24px}
  .chip__tag{left:22px}
  .chip__h{font-size:25px}
  .foot__inner{flex-direction:column;gap:18px}
  .foot__credit{align-self:flex-start}
}

@media (max-width:1020px){
  .seq{grid-template-columns:repeat(2,1fr);gap:22px}
  .seq__h{font-size:26px}
}
@media (max-width:640px){
  .cta{padding:26px 22px;gap:24px}
  .cta__sub{font-size:16px}
  .cta .btn{width:100%}
  .map iframe,.map__holder{height:270px;min-height:270px}
  .map__inner{padding:24px 20px}
  .map__addr{font-size:23px}
  .map__btns .btn{width:100%}
  .seq{grid-template-columns:1fr;gap:26px}
  .ba__pair{grid-template-columns:1fr;gap:12px}
  .ba__tag{left:10px;bottom:10px}
  .ba__tag{font-size:15px}
  .ba + .ba{margin-top:34px}
}