/*
Theme Name: Import Mayhem
Description: Lightweight custom theme for Import Mayhem Inc. (staging build of approved Revision 3).
Version: 1.0.0
Author: KAI
Text Domain: import-mayhem
*/

:root{--char:#111315;--slate:#222A30;--green:#21ED42;--green-ink:#0E7A22;--blue:#4ABBE8;--blue-hi:#6FCDF2;--blue-ink:#0A6C94;--white:#fff;--gray-l:#F2F4F6;--bluegray:#E8EEF2;--gray-d:#343A40;--line:#D5DBE0}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font:400 17px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--gray-d);background:#fff;overflow-x:hidden}
a{color:var(--green-ink)}img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.btn{display:inline-block;padding:14px 26px;border-radius:8px;font-weight:700;text-decoration:none;font-size:16px;line-height:1.2;border:2px solid transparent;text-align:center;cursor:pointer;font-family:inherit}
.btn-blue{background:var(--blue);color:var(--char)}.btn-blue:hover{background:var(--blue-hi)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* header */
header{background:var(--char);position:sticky;top:0;z-index:20;border-bottom:1px solid #23272b}
.hd{display:flex;align-items:center;gap:20px;min-height:88px}
.logo{flex:0 1 auto;min-width:0}.logo img{height:58px;width:auto;max-width:100%}
nav.main{display:flex;gap:34px;margin-left:auto;margin-right:12px}
nav.main a{color:#e4e8eb;text-decoration:none;font-weight:500;font-size:16px;padding:8px 0;border-bottom:2px solid transparent}
nav.main a:hover{color:#fff;border-color:var(--green)}
.hd .btn{padding:12px 22px}
.menu-btn{display:none;width:44px;height:44px;border-radius:8px;border:1px solid #3a4046;background:transparent;cursor:pointer;padding:0;flex:none;align-items:center;justify-content:center}
.menu-btn span{display:block;width:20px;height:2px;background:#fff;position:relative;transition:.15s}
.menu-btn span:before,.menu-btn span:after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;transition:.15s}
.menu-btn span:before{top:-7px}.menu-btn span:after{top:7px}
.menu-btn[aria-expanded=true] span{background:transparent}
.menu-btn[aria-expanded=true] span:before{top:0;transform:rotate(45deg)}.menu-btn[aria-expanded=true] span:after{top:0;transform:rotate(-45deg)}
.mpanel{display:none;background:#16191b;border-top:1px solid #23272b}
.mpanel a{display:block;padding:15px 20px;color:#fff;text-decoration:none;font-weight:600;font-size:17px;border-bottom:1px solid #23272b;min-height:48px}
.mpanel a:last-child{border-bottom:0}.mpanel a:hover{background:#1d2124;color:var(--green)}
.mpanel.open{display:block}
/* hero */
.hero{background:var(--char);color:#fff;padding:44px 0 40px;position:relative;overflow:hidden;isolation:isolate}
.hero:before{content:"";position:absolute;left:0;bottom:0;width:18%;height:4px;background:var(--green);z-index:3}
.hero .wrap{position:relative;z-index:2}
.hero .hero-text>*{max-width:440px}
.hero .facts{max-width:470px}
/* Integrated photographic hero: one continuous charcoal composition, no card/frame. */
.hero-media{position:absolute;top:0;bottom:0;right:0;left:max(calc(50% - 130px),42%);margin:0;z-index:0;background:var(--char)}
.hero-media .hero-img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--hx,40%) var(--hy,55%)}
.hero-media:after{content:"";position:absolute;inset:0;pointer-events:none;background:
 linear-gradient(to right,#111315 0,rgba(17,19,21,.88) 2.5%,rgba(17,19,21,.5) 5.5%,rgba(17,19,21,.12) 8%,rgba(17,19,21,0) 10%),
 linear-gradient(to top,#111315 0,rgba(17,19,21,.75) 8%,rgba(17,19,21,0) 26%),
 linear-gradient(to bottom,rgba(17,19,21,.7) 0,rgba(17,19,21,.35) 22%,rgba(17,19,21,0) 46%),
 linear-gradient(to left,rgba(17,19,21,.5) 0,rgba(17,19,21,0) 24%),
 radial-gradient(ellipse 20% 16% at 80% 52%,rgba(17,19,21,.32),rgba(17,19,21,0))}
.eyebrow{color:var(--green);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;margin:0 0 14px}
h1{font-size:46px;line-height:1.1;margin:0 0 18px;letter-spacing:-.02em}
.lead{font-size:18px;color:#d5dade;margin:0 0 24px;max-width:560px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.facts{display:flex;gap:26px;flex-wrap:wrap;margin-top:32px;padding-top:22px;border-top:1px solid #2c3136;font-size:15px;color:#c3c9ce}
.facts strong{display:block;color:#fff;font-size:16px;font-weight:600}
.shot{margin:0;border-radius:14px;overflow:hidden;background:#1a1d20;position:relative}
.shot img{width:100%;height:100%;object-fit:cover}
/* sections */
section{padding:60px 0}
h2{font-size:34px;line-height:1.2;margin:0 0 10px;color:var(--char);letter-spacing:-.015em}
.sub{max-width:660px;color:#3f464c;margin:0 0 30px}
/* services */
.svc{background:var(--gray-l)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 22px 22px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(17,19,21,.06),0 6px 16px rgba(17,19,21,.05)}
.card .ico{width:46px;height:46px;border-radius:11px;background:var(--char);display:grid;place-items:center;margin-bottom:16px}
.card .ico svg{width:24px;height:24px;stroke:var(--green);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin:0 0 10px;font-size:21px;color:var(--char);line-height:1.25;font-weight:700}
.card p{margin:0 0 16px;font-size:16.5px;line-height:1.6;color:#3a4147}
.req{font-weight:700;font-size:15.5px;color:var(--blue-ink);text-decoration:none;margin-top:auto;padding:6px 0;border-bottom:2px solid transparent;align-self:flex-start}
.req:hover{border-color:var(--blue-ink)}
.brand{font-weight:700;color:inherit}
/* detailing */
.det-s{background:var(--slate);color:#d5dce1}
.det-s h2{color:#fff}
/* how it works */
.strip{background:var(--bluegray);padding:34px 0}
.strip .wrap{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:28px;align-items:start}
.strip h2{font-size:24px;margin:0;padding-top:2px}
.step{display:flex;gap:12px}
.step:before{content:attr(data-n);flex:none;width:36px;height:36px;border-radius:50%;background:var(--char);color:var(--green);display:grid;place-items:center;font-weight:700}
.step b{display:block;color:var(--char);line-height:1.3;font-size:17px}.step span{font-size:16px;line-height:1.5;display:block;color:#3a4147}
/* contact */
.dark{background:var(--char);color:#d5dade}
.dark h2{color:#fff}
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.addr{margin-top:26px;padding-top:20px;border-top:1px solid #2c3136;display:grid;gap:14px}
.addr dt{color:var(--blue);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.addr dd{margin:2px 0 0;color:#fff;font-size:17px}.addr a{color:#fff}
.formcard{background:#fff;border-radius:14px;padding:28px;color:var(--gray-d);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.formcard h3{margin:0 0 4px;font-size:22px;color:var(--char)}
.formcard .hint{margin:0 0 18px;font-size:15.5px;color:#4a5158}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{margin-bottom:14px}
.f label{display:block;font-weight:600;font-size:15px;color:var(--char);margin-bottom:5px}
.f label i{font-style:normal;color:#4a5158;font-weight:500}
.f input,.f select,.f textarea{width:100%;font:inherit;font-size:16px;padding:12px 13px;border:1.5px solid #aeb6bd;border-radius:8px;background:#fff;color:var(--char);min-height:48px}
.f textarea{min-height:120px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--blue-ink);outline:3px solid rgba(74,187,232,.45);outline-offset:0}
.f.bad input,.f.bad select,.f.bad textarea{border-color:#B42318}
.err{display:none;color:#B42318;font-size:14.5px;font-weight:600;margin-top:5px}
.f.bad .err{display:block}
.formcard .btn{width:100%;font-size:17px;padding:16px}
.priv{font-size:14px;line-height:1.5;color:#4a5158;margin:14px 0 0}
.ok{display:none;background:#E8F6EC;border:1px solid #9ad3a8;color:#14532d;border-radius:10px;padding:16px 18px;margin-bottom:16px;font-weight:600}
.ok.show{display:block}
.ok small{display:block;font-weight:500;margin-top:4px;color:#2f5a3c}
.prev{display:none;font-size:13px;margin-top:6px;color:#6b4f00;background:#fff4cc;border-radius:6px;padding:4px 8px}
.ok.show .prev{display:inline-block}
footer{background:#0b0c0d;color:#b6bcc1;padding:44px 0 26px;font-size:15.5px;border-top:1px solid #2c3136}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
footer img{height:40px;width:auto;margin-bottom:14px}footer a{color:#fff}
footer h4{color:#fff;margin:0 0 10px;font-size:16px}
footer .ph{font-size:20px;font-weight:700;text-decoration:none}
footer ul{list-style:none;margin:0;padding:0}footer li{margin-bottom:6px}
.fine{border-top:1px solid #23272b;margin-top:28px;padding-top:16px;font-size:14px;color:#8a9199}
@media(max-width:1099px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){
 .det,.contact{grid-template-columns:1fr;gap:32px}
 .hero{padding:36px 0 0}
 .hero-text>*,.hero .facts{max-width:none}
 .hero-media{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;aspect-ratio:2048/1000;max-height:340px;margin-top:22px}
 .hero-media .hero-img{object-position:var(--hxm,40%) var(--hym,55%)}
 .hero-media:after{background:
  linear-gradient(to bottom,#111315 0,rgba(17,19,21,.7) 10%,rgba(17,19,21,.25) 28%,rgba(17,19,21,0) 48%),
  linear-gradient(to top,#111315 0,rgba(17,19,21,.6) 9%,rgba(17,19,21,0) 28%),
  linear-gradient(to left,rgba(17,19,21,.45) 0,rgba(17,19,21,0) 18%),
  linear-gradient(to right,rgba(17,19,21,.45) 0,rgba(17,19,21,0) 14%)}
 .hero-facts-wrap{padding:6px 28px 36px}
 .strip .wrap{grid-template-columns:1fr;gap:18px}
 nav.main{display:none}.hd .btn{margin-left:auto}.menu-btn{display:flex}
}
@media(max-width:600px){
 body{font-size:16px}.wrap{padding:0 20px}
 .hd{min-height:68px;gap:10px}.logo{flex:1 1 0}.logo img{height:30px}
 .hd .btn{padding:0 16px;height:44px;line-height:40px;font-size:15px}.hd .num{display:none}
 .hero{padding:28px 0 0}h1{font-size:32px}.lead{font-size:17px;margin-bottom:22px}
 .cta .btn{flex:1 1 100%}.facts{gap:16px 28px;margin-top:0;padding-top:0;border-top:0}
 .hero-media{margin-top:20px}.hero-facts-wrap{padding:4px 20px 32px}
 section{padding:44px 0}h2{font-size:27px}.grid{grid-template-columns:1fr;gap:16px}
 .row{grid-template-columns:1fr;gap:0}.formcard{padding:22px 18px}
 footer .cols{grid-template-columns:1fr;gap:24px}
}

/* shop section */
.shop{background:#fff}
.shopg{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
.shopg .portrait{aspect-ratio:3/4;box-shadow:0 12px 28px rgba(17,19,21,.18)}
.shopg .wide{aspect-ratio:2048/1000;margin-top:24px;box-shadow:0 12px 28px rgba(17,19,21,.18)}
.shopg ul{margin:16px 0 0;padding:0;list-style:none}
.shopg li{padding:0 0 10px 28px;position:relative}
.shopg li:before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:3px;background:var(--green)}
.notice{border-radius:10px;padding:14px 16px;margin-bottom:16px;font-weight:600}
.notice.ok{display:block;background:#E8F6EC;border:1px solid #9ad3a8;color:#14532d}
.notice.err{background:#FDECEA;border:1px solid #f1aeb5;color:#8a1c1c}
@media(max-width:980px){.shopg{grid-template-columns:1fr;gap:28px}.shopg .portrait{max-width:420px}}

/* desktop: facts row sits in the left column under the CTAs */
@media(min-width:981px){
.hero-facts-wrap{padding:0 28px}
.hero-facts-wrap .facts{margin-top:20px;padding-top:0;border-top:0;gap:6px 24px;font-size:15px}
}
.hero .facts strong{display:inline;font-size:15px;margin-right:0}

/* ===== Revision 4 ===== */
/* Hero: longer, eased fade; the photo is inset from the left so the car clears the fade. */
@media(min-width:981px){
 .hero-media{left:max(calc(50% - 290px),33%)}
 .hero-media .hero-img{position:absolute;top:0;left:var(--hs,14%);width:calc(112% - var(--hs,14%));height:100%}
 .hero-media:after{background:
  linear-gradient(to right,#111315 0,#111315 12%,rgba(17,19,21,.97) 15%,rgba(17,19,21,.88) 18%,rgba(17,19,21,.72) 21%,rgba(17,19,21,.52) 24%,rgba(17,19,21,.34) 27%,rgba(17,19,21,.18) 30%,rgba(17,19,21,.07) 34%,rgba(17,19,21,0) 38%),
  radial-gradient(ellipse 34% 55% at 20% 8%,rgba(17,19,21,.72),rgba(17,19,21,0)),
  linear-gradient(to top,#111315 0,rgba(17,19,21,.8) 7%,rgba(17,19,21,.35) 16%,rgba(17,19,21,0) 30%),
  linear-gradient(to bottom,rgba(17,19,21,.75) 0,rgba(17,19,21,.4) 20%,rgba(17,19,21,0) 46%),
  linear-gradient(to left,rgba(17,19,21,.5) 0,rgba(17,19,21,0) 20%),
  radial-gradient(ellipse 18% 15% at 86% 50%,rgba(17,19,21,.3),rgba(17,19,21,0))}
}
/* Shop section: charcoal band, photo bleeds in from the right like the hero. */
.shop-s{background:var(--char);color:#d5dce1;position:relative;overflow:hidden;isolation:isolate;padding:56px 0}
.shop-s h2{color:#fff;font-size:28px;line-height:1.2}
.shop-grid{position:relative;z-index:2;display:grid;grid-template-columns:260px minmax(0,400px);gap:40px;align-items:start}
.shop-s .portrait{aspect-ratio:3/4;box-shadow:0 12px 28px rgba(0,0,0,.4);outline:1px solid rgba(255,255,255,.12);outline-offset:-1px}
.shop-s ul{margin:16px 0 0;padding:0;list-style:none}
.shop-s li{padding:0 0 10px 28px;position:relative}
.shop-s li:before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:3px;background:var(--green)}
.shop-s strong{color:#fff}
.shop-media{position:absolute;z-index:0;top:0;bottom:0;right:0;left:max(calc(50% + 90px),60%);margin:0;background:var(--char)}
.shop-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:88% 30%}
.shop-media:after{content:"";position:absolute;inset:0;pointer-events:none;background:
 linear-gradient(to right,#111315 0,rgba(17,19,21,.95) 6%,rgba(17,19,21,.78) 12%,rgba(17,19,21,.5) 19%,rgba(17,19,21,.24) 26%,rgba(17,19,21,.08) 32%,rgba(17,19,21,0) 38%),
 linear-gradient(to top,#111315 0,rgba(17,19,21,.5) 5%,rgba(17,19,21,0) 16%),
 linear-gradient(to bottom,#111315 0,rgba(17,19,21,.45) 6%,rgba(17,19,21,0) 18%)}
@media(max-width:980px){
 .shop-s{padding:40px 0 0}
 .shop-grid{grid-template-columns:1fr;gap:24px}
 .shop-s .portrait{max-width:420px}
 .shop-media{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;aspect-ratio:2048/1000;max-height:340px;margin-top:28px}
 .shop-media:after{background:
  linear-gradient(to bottom,#111315 0,rgba(17,19,21,.75) 12%,rgba(17,19,21,.3) 30%,rgba(17,19,21,0) 50%),
  linear-gradient(to top,#111315 0,rgba(17,19,21,.5) 8%,rgba(17,19,21,0) 24%)}
}
@media(max-width:600px){
 .shop-s h2{font-size:26px}
}

/* ===== Revision 5 ===== */
/* Hero contact info: two aligned cells, secondary to headline + CTAs */
.hero-facts-wrap .hero-contact{margin-top:22px}
.hero-contact{display:grid;grid-template-columns:repeat(2,max-content);column-gap:40px;justify-content:start;align-items:start;font-size:15px;line-height:1.5;color:#c3c9ce}
.hero-contact .hc{display:flex;flex-direction:column}
.hero-contact strong,.hero-contact .hc-phone{color:#fff;font-size:16px;font-weight:600;line-height:1.5;text-decoration:none}
.hero-contact .hc-phone:hover{text-decoration:underline}
.hero-contact span{font-size:15px;line-height:1.5}
@media(max-width:600px){
 .hero-contact{column-gap:28px}
}


/* ===== Revision 6: mobile/tablet hero order (stacked layout only, <=980px) =====
   Same markup as desktop. The photo component is moved first with CSS `order`:
   header > photo (blends into charcoal) > eyebrow + headline + lead + CTAs > address/phone. */
@media(max-width:980px){
 .hero{display:flex;flex-direction:column;padding:0}
 .hero-media{order:0;position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;aspect-ratio:auto;max-height:none;height:clamp(220px,60vw,340px);margin:0}
 .hero-media .hero-img{width:100%;height:100%;object-fit:cover;object-position:var(--hxm,30%) var(--hym,50%)}
 .hero-media:after{background:
  linear-gradient(to bottom,rgba(17,19,21,.55) 0,rgba(17,19,21,.2) 10%,rgba(17,19,21,0) 22%),
  linear-gradient(to top,#111315 0,rgba(17,19,21,.94) 7%,rgba(17,19,21,.74) 17%,rgba(17,19,21,.46) 29%,rgba(17,19,21,.2) 42%,rgba(17,19,21,.06) 54%,rgba(17,19,21,0) 66%)}
 .hero .hero-text{order:1;margin-top:-18px;padding-top:0}
 .hero .hero-facts-wrap{order:2;padding-top:4px}
 .hero>.wrap{width:100%}
 .hero-contact{grid-template-columns:repeat(2,minmax(0,max-content));column-gap:22px}
}

/* ===== Revision 8 ===== */
/* Our Services: light section + white cards. Each card is a subgrid of the 4-up grid
   (rows: icon / title / text / link / label), so every row lines up across the cards with no hardcoded spacing. */
.svc{background:#F2F4F6}
.svc h2{color:#111315}
.svc .sub{color:#3f464c}
.svc .card{background:#fff;border:1px solid #D0D9DF;box-shadow:0 1px 2px rgba(17,19,21,.06),0 4px 12px rgba(17,19,21,.05)}
.svc .card .ico{background:#111315;margin-left:auto;margin-right:auto}
.svc .card h3{color:#111315;text-align:center}
.svc .card p{color:#343A40;text-align:left}
.svc .brand{color:inherit;font-weight:700}
.svc .req{color:#0A6C94}
.svc .req:hover{border-color:#0A6C94}
@supports (grid-template-rows:subgrid){
 .svc .grid{row-gap:0;margin-bottom:-20px}
 .svc .card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;margin-bottom:20px}
 .svc .card .ico{margin-bottom:16px}
 .svc .card h3{margin:0 0 10px}
 .svc .card p{margin:0 0 16px}
 .svc .req{margin-top:0;align-self:end;justify-self:start}
}
@media(max-width:600px){ .svc .grid{margin-bottom:0} }

/* Detailing (final): one text group on the left, one photo group on the right.
   Photo columns follow each photo's proportions, so paired photos have equal heights and are never cropped. */
.det-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.det-info h2{margin:0 0 12px}
@media(min-width:901px){.det-info h2{font-size:30px}}
.det-lead{margin:0;max-width:560px;font-size:18px;line-height:1.6;color:#d5dce1}
.det-svc{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:22px}
.det-item{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:start}
.det-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(33,237,66,.45);background:rgba(33,237,66,.08)}
.det-ico svg{width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.det-item h3{margin:2px 0 4px;font-size:19px;line-height:1.3;color:#fff;font-weight:700}
.det-item p{margin:0;font-size:16.5px;line-height:1.6;color:#d5dce1}
.det-cta{margin:28px 0 0}
.det-cta p{margin:0 0 14px;font-size:17px;color:#d5dce1}
.det-media{display:grid;gap:16px;align-content:center}
/* Photo rows: a single-photo row is the wide lead image; a two-photo row splits by weight. Row proportions
   (not fixed heights) keep the group responsive; each photo crops with its own focal point (object-position). */
.det-row{display:grid;gap:16px;aspect-ratio:2/1}
.det-row.is-pair{aspect-ratio:8/3}
.det-media .shot{margin:0;min-width:0;min-height:0;overflow:hidden;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,.28);outline:1px solid rgba(255,255,255,.1);outline-offset:-1px}
.det-media .shot img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.det-layout{grid-template-columns:1fr;gap:32px}}
@media(max-width:600px){.det-lead{font-size:17px}.det-row,.det-media{gap:10px}.det-row{aspect-ratio:16/9}.det-row.is-pair{aspect-ratio:2/1}.det-cta .btn{display:block;text-align:center}}

/* Hero 981-1199 px: the side-by-side hero is too narrow here (text runs into the photo, car gets cropped),
   so this range uses the same photo-first stacked layout as mobile/tablet. >=1200 px is unchanged. */
@media(min-width:981px) and (max-width:1199px){
 .hero{display:flex;flex-direction:column;padding:0}
 .hero-media{order:0;position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:clamp(340px,40vw,460px);margin:0}
 .hero-media .hero-img{position:static;left:auto;top:auto;width:100%;height:100%;object-fit:cover;object-position:var(--hxm,24%) var(--hym,50%)}
 .hero-media:after{background:
  linear-gradient(to bottom,rgba(17,19,21,.55) 0,rgba(17,19,21,.2) 10%,rgba(17,19,21,0) 22%),
  linear-gradient(to top,#111315 0,rgba(17,19,21,.94) 7%,rgba(17,19,21,.74) 17%,rgba(17,19,21,.46) 29%,rgba(17,19,21,.2) 42%,rgba(17,19,21,.06) 54%,rgba(17,19,21,0) 66%)}
 .hero .hero-text{order:1;margin-top:-18px;padding-top:0}
 .hero .hero-text>*{max-width:560px}
 .hero .hero-facts-wrap{order:2;padding:6px 28px 36px}
 .hero>.wrap{width:100%}
}
@media(min-width:601px) and (max-width:980px){
 .hero-media{height:clamp(340px,40vw,460px)}
}

/* ===== Owner story + About page ===== */
.text-link{color:#4ABBE8;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(74,187,232,.4);padding-bottom:1px}
.text-link:hover{border-bottom-color:#4ABBE8}
.plain-link{color:inherit;font-weight:600}
.shop-sub{margin:16px 0 8px;font-size:19px;line-height:1.3;color:#fff;font-weight:700}
.shop-s p{margin:0 0 12px;color:#d5dce1;line-height:1.6}
.shop-s .shop-more{margin:6px 0 0}
.about-hero{background:var(--char);color:#fff;padding:56px 0 52px;border-bottom:4px solid transparent;position:relative}
.about-hero:after{content:"";position:absolute;left:0;bottom:0;width:18%;height:4px;background:var(--green)}
.about-hero h1{margin:0 0 14px;font-size:46px}
.about-deck{margin:0;font-size:19px;color:#cfd4d8;max-width:620px}
.about-sec{padding:60px 0}
.about-sec h2{margin:0 0 14px}
.prose{max-width:700px}
.prose p{margin:0 0 16px;font-size:17.5px;line-height:1.7}
.about-sub{margin:0 0 20px;font-size:21px;color:#111315;font-weight:700}
.about-meet{background:#fff;color:var(--gray-d)}
.about-goal{font-size:20px !important;line-height:1.55 !important;color:var(--char);font-weight:600;border-left:4px solid var(--green);padding-left:18px;margin-top:26px !important}
.about-approach{background:var(--gray-l);color:var(--gray-d)}
.about-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:56px;align-items:center}
.about-photo{margin:0;aspect-ratio:3/4;max-width:360px;justify-self:end;width:100%;box-shadow:0 12px 28px rgba(17,19,21,.18)}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-services{background:var(--slate);color:#d5dce1}
.about-services h2{color:#fff}
.about-services strong{color:#fff}
.about-services .about-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.about-van{margin:0;box-shadow:0 12px 28px rgba(0,0,0,.35);aspect-ratio:16/9}
.about-van img{width:100%;height:100%;object-fit:cover}
.about-svc{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.about-svc li{padding:22px 0;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;align-items:flex-start}
.about-svc h3{margin:0 0 6px;font-size:20px;color:#fff;line-height:1.3}
.about-svc p{margin:0 0 12px;font-size:16.5px;line-height:1.6;color:#d5dce1}
.about-contact{background:var(--char);color:#d5dade}
.about-contact h2{color:#fff}
.about-contact .cta{margin:20px 0 26px}
.about-address{font-style:normal;color:#fff;line-height:1.7;margin:0 0 18px}
.about-back{margin:0 !important;font-size:16px !important}
@media(max-width:900px){
 .about-two,.about-services .about-two{grid-template-columns:1fr;gap:32px}
 .about-photo{justify-self:start;max-width:340px}
 .about-svc{grid-template-columns:1fr}
}
@media(max-width:600px){
 .about-hero{padding:36px 0 40px}.about-hero h1{font-size:32px}.about-deck{font-size:17px}
 .about-sec{padding:44px 0}
 .prose p{font-size:16.5px}.about-goal{font-size:18px !important}
 .about-contact .cta .btn{flex:1 1 100%}
}
/* Repair section at 981-1199 px: narrower photo/text columns so the owner text clears the Viper photo's fade. */
@media(min-width:981px) and (max-width:1199px){
 .shop-grid{grid-template-columns:200px minmax(0,340px);gap:32px}
}
@media(max-width:600px){.shop-s .portrait{max-width:300px}}

/* ===== About page refinements: shop photo, tighter header, balanced biography ===== */
.about-meet-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px;align-items:center}
.about-meet .prose{max-width:640px}
.about-meet .about-goal{margin:0 !important;max-width:430px;font-size:22px !important;line-height:1.5 !important}
.about-services .about-two{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px}
.about-shop{margin:0;aspect-ratio:16/9;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.about-shop img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
 .about-meet-grid{grid-template-columns:1fr;gap:28px}
 .about-meet .about-goal{max-width:none;font-size:20px !important}
 .about-services .about-two{grid-template-columns:1fr;gap:32px}
}
@media(max-width:600px){.about-meet .about-goal{font-size:18px !important}}

/* ===== About: workshop photo beside "Meet Andrew Stagman"; compact Personal Approach section ===== */
.about-meet-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"head photo" "body photo";column-gap:72px;row-gap:0;align-items:start}
.about-meet .meet-head{grid-area:head;max-width:640px}
.about-meet .meet-body{grid-area:body;max-width:640px}
.about-meet .about-photo{grid-area:photo;margin:0;justify-self:end;align-self:start;width:100%;max-width:380px;aspect-ratio:3/4}
.about-meet .about-goal{margin:26px 0 0 !important;max-width:none;font-size:20px !important;line-height:1.55 !important}
.about-approach{padding:48px 0}
.about-approach-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.about-approach-grid h2{margin:0}
.about-approach .prose{max-width:none}
.about-approach .prose p:last-child{margin-bottom:0}
@media(max-width:900px){
 .about-meet-grid{grid-template-columns:1fr;grid-template-areas:"head" "photo" "body";row-gap:0}
 .about-meet .about-photo{justify-self:start;max-width:320px;margin:4px 0 26px}
 .about-approach-grid{grid-template-columns:1fr;gap:16px}
 .about-approach{padding:40px 0}
}
@media(max-width:600px){.about-meet .about-goal{font-size:18px !important}}

/* ===== Andrew portrait (4:5), About-sub charcoal, centered homepage workshop photo on mobile ===== */
.about-meet .about-photo{aspect-ratio:4/5}
@media(max-width:980px){.shop-s .portrait{margin-inline:auto;width:100%}}

/* ===== Mayhem Auto Spa logo under contact details (Request Service, left column) ===== */
.spa-logo{display:block;width:100%;max-width:280px;height:auto;aspect-ratio:1160/496;margin:26px 0 0;border-radius:6px}

/* ===== About in nav/footer; revised emphasis colors (blue; logo green untouched) ===== */
nav.main a[aria-current=page]{color:#fff;border-color:var(--green)}
.mpanel a[aria-current=page]{color:var(--green)}
.foot-about{margin:10px 0 0}
.about-sub{color:#0A6C94}
.shop-sub{color:#79D7F4}
.about-goal,.about-meet .about-goal{color:#234C5E;border-left-color:#4ABBE8}
nav.main a{white-space:nowrap}
@media(min-width:981px) and (max-width:1180px){nav.main{gap:22px}.hd .logo img{height:46px;width:auto}}

/* ===== About: compact horizontal contact CTA (replaces inquiry form) ===== */
.about-cta{background:var(--char);color:#d5dade;padding:38px 0}
.about-cta-in{display:flex;align-items:center;justify-content:space-between;gap:40px}
.about-cta-text{max-width:620px}
.about-cta h2{color:#fff;margin:0 0 8px;font-size:28px;line-height:1.2}
.about-cta p{margin:0;font-size:17px;line-height:1.55}
.about-cta-btns{display:flex;gap:14px;flex:none}
@media(max-width:980px){.about-cta{padding:34px 0}.about-cta-in{flex-direction:column;align-items:stretch;gap:22px}.about-cta-btns{flex-direction:column}.about-cta-btns .btn{width:100%}}

/* ===== Homepage: Pre-purchase inspection feature strip (under the four service cards) ===== */
.svc-feature{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:24px;padding:22px 26px;background:#fff;border:1px solid #D0D9DF;border-left:4px solid #4ABBE8;border-radius:14px;box-shadow:0 1px 2px rgba(17,19,21,.06),0 4px 12px rgba(17,19,21,.05)}
.svc-feature-text{max-width:660px}
.svc-eyebrow{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0A6C94}
.svc-feature h3{margin:0 0 6px;font-size:21px;line-height:1.25;color:#111315}
.svc-feature-text p:last-child{margin:0;font-size:16.5px;line-height:1.55;color:#343A40}
.svc-feature-cta{flex:none;display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:2px solid #0A6C94;border-radius:8px;color:#0A6C94;font-weight:700;text-decoration:none;background:#fff}
.svc-feature-cta:hover{background:#0A6C94;color:#fff}
@media(max-width:760px){.svc-feature{flex-direction:column;align-items:flex-start;gap:16px;padding:20px 18px}.svc-feature-cta{width:100%;justify-content:center}}
@media(max-width:600px){.svc-feature{margin-top:4px}}

/* Repair warranty highlight (homepage shop section) */
.warranty{display:flex;gap:12px;align-items:flex-start;margin:16px 0 14px;padding:12px 14px;border:1px solid rgba(74,187,232,.4);border-left:4px solid #4ABBE8;border-radius:10px;background:rgba(74,187,232,.08)}
.warranty svg{flex:none;width:24px;height:24px;margin-top:1px;fill:none;stroke:#4ABBE8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.warranty strong{display:block;color:#fff;font-size:16px;line-height:1.35}
.warranty span{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:#d5dce1}
.nw{white-space:nowrap}

/* About: grouped service list (Import Mayhem Inc. / Mayhem Auto Spa) */
.about-grp-label{margin:36px 0 0;font-size:13px;line-height:1.4;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4ABBE8}
.about-grp-label + .about-svc{margin-top:12px}
.about-grp-label ~ .about-grp-label{margin-top:24px}
@media(min-width:901px){.about-svc.is-grp{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Request Service: Mayhem Auto Spa supporting text */
.addr .addr-note{margin:6px 0 0;max-width:460px;font-size:15px;line-height:1.5;color:#c3cbd1}

/* ===== Repair section: Andrew's photo grows to the text column's height (desktop only; mobile/tablet stacking untouched) ===== */
@media(min-width:1200px){
 .shop-grid{grid-template-columns:280px minmax(0,400px);align-items:stretch}
 .shop-s .portrait{aspect-ratio:auto;height:100%;min-height:347px}
 .shop-s .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
}
@media(min-width:981px) and (max-width:1199px){
 .shop-s .portrait{aspect-ratio:2/3}
 .shop-s .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
}