/* Sorenson Auto Body — archetype D, before-and-after led.
   The page is nothing but paired images; the words sit beside them and stay
   short. Distinct from the Kingdom Construction build (the only other D) by
   pairing side-by-side rather than stacked, by keeping a light ground instead
   of navy, and by giving the last pair a different, larger treatment.

   Paint-booth white, panel grey, and a single hazard red. */

:root{
  --ink:#17191b; --ink-2:#525a61; --line:#dfe2e5;
  --paper:#fbfbfc; --panel:#eceef0;
  --steel:#2b3238; --red:#c8342c;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--sans);
     padding-bottom:70px}
h1,h2{font-weight:750;letter-spacing:-.022em;line-height:1.13;margin:0 0 .5em}
a{color:inherit}
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:600;
     font-size:16px;padding:14px 26px;border:0;border-radius:2px;cursor:pointer}
.btn:hover{background:#dc4038}

header{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
       padding:18px 40px;background:var(--steel);color:#fff}
.id b{display:block;font-size:23px;font-weight:800;letter-spacing:-.02em}
.id span{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:#9aa4ac}
.tel{font-size:21px;font-weight:700;text-decoration:none;color:#fff}
.tel:hover{color:#ff8079}

.opener{max-width:980px;margin:0 auto;padding:70px 40px 34px}
h1{font-size:clamp(2.1rem,4.8vw,3.3rem);max-width:17ch}
.opener p{font-size:19px;color:var(--ink-2);max-width:52ch}

.pairs{max-width:1120px;margin:0 auto;padding:0 40px 30px}
.pair{border-top:1px solid var(--line);padding:44px 0;
      display:grid;grid-template-columns:1.45fr 1fr;gap:44px;align-items:center}
.imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.imgs figure{margin:0}
.ph{background:repeating-linear-gradient(45deg,#e2e5e8 0 13px,#dadde1 13px 26px);
    border:1px solid var(--line);aspect-ratio:4/3;display:grid;place-items:center;
    padding:16px;text-align:center;font-size:12.5px;color:#868e96;letter-spacing:.04em}
.ph::after{content:attr(data-ph)}
.imgs figcaption{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
                 color:var(--ink-2);padding-top:8px;font-weight:600}
.imgs figure:last-child figcaption{color:var(--red)}
.cap h2{font-size:clamp(1.4rem,2.6vw,1.95rem)}
.cap p{color:var(--ink-2);font-size:16px}
.pointed{background:var(--panel);border-left:4px solid var(--red);padding:15px 18px;
         font-size:15px;margin-top:18px}
.pointed b{color:var(--ink)}

/* the restoration pair gets more room — it is the strongest argument */
.pair.feature{grid-template-columns:1fr;gap:28px;background:var(--panel);
              margin:0 -40px;padding:52px 40px;border-top:3px solid var(--red)}
.pair.feature .imgs{grid-template-columns:1fr 1fr;gap:16px}
.pair.feature .ph{aspect-ratio:16/10}
.pair.feature .cap{max-width:70ch}

.areas{max-width:980px;margin:0 auto;padding:44px 40px;border-top:1px solid var(--line)}
.areas h2{font-size:1.3rem}
.areas ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:16px 0 0}
.areas li{background:var(--panel);padding:9px 18px;border-radius:999px;font-size:15px}

.get{max-width:980px;margin:0 auto;padding:56px 40px 70px;border-top:1px solid var(--line);
     display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:start}
.get p{color:var(--ink-2)}
.direct{font-size:16px;line-height:2;margin-top:18px}
.direct a{color:var(--red);font-weight:600}
form{background:#fff;border:1px solid var(--line);border-radius:3px;padding:26px}
label{display:block;font-size:12px;letter-spacing:.11em;text-transform:uppercase;
      color:var(--ink-2);margin-bottom:15px}
input,textarea{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid var(--line);
      border-radius:2px;font:inherit;font-size:16px;background:var(--paper)}
input:focus,textarea:focus{outline:2px solid var(--steel);border-color:transparent}
.sent{grid-column:1/-1;background:#eaf2ea;border:1px solid #bcd6bc;padding:16px;border-radius:2px}

footer{background:var(--steel);color:#a8b2b9;padding:30px 40px;font-size:14px}
footer b{color:#fff}footer a{color:#fff}
.demo{font-size:12.5px;color:#79838b;margin-top:8px}

.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--red);color:#fff;
     text-align:center;text-decoration:none;font-weight:700;font-size:17px;padding:18px;display:none}

@media (max-width:880px){
  header{padding:16px 20px}
  .opener,.pairs,.areas,.get,footer{padding-left:20px;padding-right:20px}
  .pair,.get{grid-template-columns:1fr;gap:26px}
  .pair.feature{margin:0 -20px;padding:40px 20px}
  .bar{display:block}
  body{padding-bottom:66px}
}