
:root{--red:#d71920;--red2:#ef272e;--black:#090909;--ink:#141414;--gray:#666;--light:#f5f5f5;--white:#fff;--max:1180px}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.5}
a{color:inherit;text-decoration:none} img{max-width:100%}
.topbar{background:#050505;color:#fff}.nav{max-width:var(--max);margin:auto;padding:16px 22px;display:flex;align-items:center;gap:24px}
.brand{font-weight:900;letter-spacing:2px;color:#fff;font-size:23px}.brand span{display:block;color:var(--red);font-size:12px;letter-spacing:3px}
.links{display:flex;gap:20px;align-items:center;margin-left:auto;font-size:13px;font-weight:800;text-transform:uppercase}.links a:hover,.links a.active{color:var(--red)}
.phone{font-weight:800;white-space:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:4px;font-weight:900;text-transform:uppercase;letter-spacing:.3px;border:1px solid transparent;cursor:pointer}.btn-red{background:var(--red);color:#fff}.btn-dark{background:#111;color:#fff;border-color:#444}.btn-outline{border-color:#aaa}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid #444;color:#fff;padding:8px 12px;font-size:20px}
.hero{min-height:500px;color:#fff;background-size:cover;background-position:center;position:relative}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 42%,rgba(0,0,0,.18) 72%)}
.hero-inner{position:relative;z-index:1;max-width:var(--max);margin:auto;padding:80px 22px 70px}.kicker{color:var(--red2);font-weight:900;text-transform:uppercase;letter-spacing:1px}
h1{font-size:56px;line-height:.98;margin:10px 0 20px;text-transform:uppercase;max-width:760px} h1 .red{color:var(--red2)}
.hero p{max-width:570px;font-size:18px;color:#eee}.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.trustbar{background:#0b0b0b;color:#fff}.trustgrid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(4,1fr);padding:22px;gap:18px}.trustitem{border-left:3px solid var(--red);padding-left:14px}.trustitem b{display:block;text-transform:uppercase}
.section{max-width:var(--max);margin:auto;padding:64px 22px}.section.center{text-align:center}.section h2{font-size:38px;line-height:1.05;margin:6px 0 16px;text-transform:uppercase}.lead{font-size:18px;color:#555;max-width:760px}
.grid{display:grid;gap:22px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid #ddd;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 7px 25px rgba(0,0,0,.05)}.card-art{height:185px;background-image:url('temp-project.jpg');background-size:cover;background-position:center;position:relative}.card-art:before{content:"MID-OHIO PAVING";position:absolute;left:18px;bottom:16px;color:#fff;font-weight:900;opacity:.35}.card-body{padding:20px}.card h3{margin:0 0 8px;text-transform:uppercase}.card p{margin:0;color:#555}
.dark{background:#101010;color:#fff}.dark .section{color:#fff}.dark p{color:#ccc}.dark .card{background:#171717;border-color:#333}.dark .card p{color:#bbb}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#333}.stat{background:#101010;color:#fff;padding:28px;text-align:center}.stat strong{display:block;color:#fff;font-size:36px}.stat span{color:#bbb;text-transform:uppercase;font-size:12px;font-weight:800}
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px;padding:0;list-style:none}.checks li:before{content:"✓";color:var(--red);font-weight:900;margin-right:9px}
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.step{text-align:center}.step .n{width:38px;height:38px;border-radius:50%;background:var(--red);display:grid;place-items:center;color:#fff;font-weight:900;margin:0 auto 10px}
.banner{background:linear-gradient(90deg,var(--red),#9d1116);color:#fff}.banner .section{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:35px;padding-bottom:35px}.banner h2{margin:0}
.form-wrap{display:grid;grid-template-columns:2fr 1fr;gap:28px}.form-card{border:1px solid #ddd;border-radius:10px;padding:26px;background:#fff}.fieldrow{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.field{margin-bottom:16px}.field label{display:block;font-size:13px;font-weight:900;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;padding:12px;border:1px solid #bbb;border-radius:4px;font:inherit}.field textarea{min-height:130px;resize:vertical}.notice{display:none;margin-top:16px;padding:12px;background:#f2f2f2;border-left:4px solid var(--red)}
.contact-box{background:#111;color:#fff;padding:24px;border-radius:10px}.contact-box h3{font-size:25px;margin-top:0;text-transform:uppercase}.contact-box p{color:#ddd}
.map{height:300px;background:linear-gradient(135deg,#e9e9e9,#cfcfcf);display:grid;place-items:center;font-weight:900;color:#555;text-align:center;padding:20px}
.footer{background:#060606;color:#fff}.footer-inner{max-width:var(--max);margin:auto;padding:45px 22px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px}.footer h4{color:var(--red);text-transform:uppercase;margin:0 0 10px}.footer p,.footer a{color:#ccc}.footer a:hover{color:#fff}.small{font-size:12px;color:#999}.copyright{border-top:1px solid #222;padding:18px 22px;text-align:center;color:#888;font-size:12px}
.tag{display:inline-block;background:#f5f5f5;border:1px solid #ddd;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;margin:4px}
.jobs .card-body{min-height:180px}.jobs ul{padding-left:18px;color:#555}.placeholder-note{background:#fff6d6;border:1px solid #ead27b;padding:14px 18px;border-radius:6px;margin-top:18px;color:#5d4b00}
@media(max-width:900px){h1{font-size:42px}.links{display:none;position:absolute;left:0;right:0;top:72px;background:#070707;padding:20px;flex-direction:column;z-index:10}.links.open{display:flex}.menu-btn{display:block}.phone{display:none}.trustgrid,.grid-4,.process,.stats{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr 1fr}.form-wrap{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr 1fr}}
@media(max-width:620px){h1{font-size:37px}.hero-inner{padding-top:60px}.trustgrid,.grid-2,.grid-3,.grid-4,.process,.stats,.fieldrow,.footer-inner{grid-template-columns:1fr}.banner .section{display:block}.banner .btn{margin-top:16px}.section{padding-top:46px;padding-bottom:46px}.section h2{font-size:31px}}

.card:nth-child(2) .card-art{background-image:url('temp-repair.jpg')}
.card:nth-child(3) .card-art{background-image:url('temp-plant.jpg')}
.card:nth-child(4) .card-art{background-image:url('temp-road.jpg')}
.card:nth-child(5) .card-art{background-image:url('temp-trucks.jpg')}
.card:nth-child(6) .card-art{background-image:url('temp-worker.jpg')}

/* Build 6: approved Mid-Ohio logo + dedicated repair service photos */
.brand-logo{display:flex;align-items:center;min-width:180px}
.brand-logo img{display:block;width:190px;max-height:88px;object-fit:contain}
.footer-logo img{width:175px}
.service-photo{display:block;width:100%;height:180px;object-fit:cover}
.repair-card{text-align:left}
.repair-card .card-body{min-height:165px}
.repair-card h3{font-size:18px}
@media(max-width:900px){
  .brand-logo img{width:155px;max-height:72px}
  .brand-logo{min-width:150px}
}
@media(max-width:620px){
  .brand-logo img{width:135px;max-height:64px}
  .brand-logo{min-width:130px}
  .service-photo{height:210px}
}

/* Final real-photo build */
.hero{background-position:center center}
@media(min-width:1000px){
  .hero{background-position:center 48%}
}
