/* Progressive Engineering Co — site stylesheet */
:root{
  --bg:#F7F2E8; --panel:#EFE7D6; --card:#FFFFFF; --border:#E2D8C4;
  --text:#3A332A; --muted:#6C6152; --soft:#8A7E6C;
  --accent:#C9821E; --accent-deep:#8F5610; --on-accent:#2E2413; --on-accent-soft:#4A3A14;
  --dark:#2A241B; --dark-text:#D8D1C2; --dark-muted:#B3AA97; --dark-soft:#8A7E6C; --dark-border:#423A2C; --dark-bright:#F2EDE1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Archivo',Verdana,sans-serif;font-size:17px;line-height:1.6}
img{max-width:100%;display:block}
picture{display:contents}
a{color:var(--accent-deep);text-decoration:none}
a:hover{color:#6E4209}
h1,h2,h3{font-family:'Oswald',Verdana,sans-serif;text-transform:uppercase;line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:clamp(30px,5vw,52px);font-weight:700}
h2{font-size:clamp(24px,3.2vw,36px);font-weight:700}
h3{font-size:20px;font-weight:600}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:3px;color:var(--accent-deep);text-transform:uppercase}
.lead{font-size:19px;color:var(--muted);max-width:70ch}
.muted{color:var(--muted)}
.small{font-size:14px;color:var(--soft)}

/* header */
.top{background:var(--bg);border-bottom:1px solid var(--border)}
.top .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text)}
.brand svg{flex-shrink:0}
.brand b{font-family:'Oswald',Verdana,sans-serif;font-size:18px;font-weight:600;letter-spacing:1.2px;display:block}
.brand span{font-size:10px;font-weight:600;letter-spacing:2.5px;color:var(--soft);display:block}
nav.main{display:flex;flex-wrap:wrap;gap:4px 18px;margin-left:auto;font-size:15px;font-weight:600}
nav.main a{color:var(--text);padding:4px 2px;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--accent-deep)}
nav.main a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent-deep)}
.top .cta{margin-left:auto}
@media(min-width:980px){.top .cta{margin-left:0}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 26px;background:var(--accent);color:var(--on-accent);font-family:'Oswald',Verdana,sans-serif;font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border:none;cursor:pointer}
.btn:hover{background:#B87415;color:var(--on-accent)}
.btn.ghost{background:transparent;border:2px solid var(--text);color:var(--text)}
.btn.ghost:hover{border-color:var(--accent-deep);color:var(--accent-deep);background:transparent}
.btn.dark{background:var(--on-accent);color:var(--bg)}
.btn.dark:hover{background:#191307;color:var(--bg)}

/* hero */
.hero{background:var(--bg);background-image:repeating-linear-gradient(135deg,rgba(120,90,40,.045) 0 1px,transparent 1px 14px)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-block:56px}
.hero .copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hero img{width:100%;height:100%;max-height:460px;object-fit:cover}
.badge{display:inline-flex;align-items:center;border:1.5px solid var(--accent);padding:7px 16px;font-size:14px;font-weight:700;letter-spacing:2.5px;color:var(--accent-deep);text-transform:uppercase}
.ticks{display:flex;flex-direction:column;gap:10px}
.ticks li{list-style:none;display:flex;gap:12px;align-items:flex-start;font-weight:600;color:#4A4238}
.ticks{padding:0;margin:0}
.tick{flex-shrink:0;width:20px;height:20px;margin-top:3px}
.btnrow{display:flex;flex-wrap:wrap;gap:14px}

/* sections */
section{padding-block:64px}
section.alt{background:var(--card);border-block:1px solid var(--border)}
section.panel{background:var(--panel);border-block:1px solid var(--border)}
.sec-head{display:flex;flex-direction:column;gap:10px;max-width:820px;margin-bottom:34px}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--border);padding:26px;display:flex;flex-direction:column;gap:12px}
.panel .card,.alt .card{background:var(--bg)}
.card h3{color:var(--text)}
.card p{font-size:15.5px;color:var(--muted)}
.card .more{margin-top:auto;font-size:15px;font-weight:700;color:var(--accent-deep)}
a.card{color:var(--text)}
a.card:hover{border-color:var(--accent)}
.card img{width:100%;height:170px;object-fit:cover}
.stat b{font-family:'Oswald',Verdana,sans-serif;font-size:34px;font-weight:700;color:var(--accent-deep);display:block}
.stat span{font-size:15px;font-weight:600;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chips a,.chips span{background:var(--card);border:1px solid var(--border);padding:11px 17px;font-size:15.5px;font-weight:600;color:var(--text)}
.chips a:hover{border-color:var(--accent);color:var(--accent-deep)}
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.step{border-top:3px solid var(--accent);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.step b{font-family:'Oswald',Verdana,sans-serif;font-size:26px;color:var(--accent-deep)}
.step h3{font-size:17px}
.step p{font-size:14px;color:var(--muted)}

/* spec table */
.spec{border-top:1px solid var(--border)}
.spec div{display:flex;gap:24px;padding-block:13px;border-bottom:1px solid var(--border)}
.spec dt{width:280px;flex-shrink:0;font-weight:700;color:#4A4238;font-size:15.5px}
.spec dd{margin:0;color:var(--muted);font-size:15.5px}
dl{margin:0}

/* gallery */
.gallery{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.gallery .main{width:100%;height:420px;object-fit:cover}
.gallery .side{display:grid;gap:16px}
.gallery .side img{width:100%;height:129px;object-fit:cover}

/* CTA band */
.band{background:var(--accent);padding-block:44px}
.band .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px}
.band h2{color:var(--on-accent)}
.band p{color:var(--on-accent-soft);font-weight:500}
.band .actions{display:flex;flex-wrap:wrap;gap:14px;margin-left:auto}
.note-band{background:var(--panel);border-block:1px solid var(--border);padding-block:18px}
.note-band .wrap{display:flex;gap:14px;align-items:center;font-weight:600;color:#4A4238}

/* breadcrumbs */
.crumbs{font-size:14px;color:var(--soft);padding-block:14px}
.crumbs a{color:var(--soft)}
.crumbs a:hover{color:var(--accent-deep)}

/* case study */
.case{background:var(--card);border:1px solid var(--border);border-top:4px solid var(--accent);padding:30px;display:flex;flex-direction:column;gap:14px}
.case .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;font-size:15px}
.case .facts div{background:var(--bg);border:1px solid var(--border);padding:12px 14px}
.case .facts b{display:block;font-size:12px;letter-spacing:2px;color:var(--accent-deep);text-transform:uppercase;margin-bottom:3px}

/* form */
form.enquiry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
form.enquiry .full{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700;color:#4A4238}
input,select,textarea{font:inherit;font-size:16px;color:var(--text);background:#FBF8F1;border:1px solid #D8CDB6;padding:11px 14px;width:100%}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus,.btn:focus,a:focus{outline:2px solid var(--accent);outline-offset:2px}

/* footer */
footer{background:var(--dark);color:var(--dark-muted);margin-top:0}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-block:56px 36px}
footer h4{font-size:12px;font-weight:700;letter-spacing:2.5px;color:var(--dark-soft);text-transform:uppercase;margin:0 0 12px}
footer a{color:var(--dark-text);display:block;font-size:15px;padding-block:3px}
footer a:hover{color:var(--dark-bright)}
footer .brand b{color:var(--dark-bright)}
footer .brand span{color:var(--dark-soft)}
footer p{font-size:14.5px;line-height:1.6}
footer .base{border-top:1px solid var(--dark-border);padding-block:18px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:13px;color:var(--dark-soft)}
.contact-strong{color:var(--dark-bright);font-weight:700;font-size:16px}

/* responsive */
@media(max-width:960px){
  .g4,.steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero .wrap{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .gallery .side{grid-template-columns:repeat(3,1fr)}
  .gallery .main{height:320px}
  footer .cols{grid-template-columns:1fr 1fr}
}
footer a,footer p{overflow-wrap:break-word}
@media(max-width:680px){
  .g2,.g3,.g4,.steps,form.enquiry,.case .facts{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr;gap:26px}
  section{padding-block:44px}
  nav.main{font-size:14px;gap:2px 14px}
  .spec div{flex-direction:column;gap:2px}
  .spec dt{width:auto}
  .gallery .side{grid-template-columns:repeat(3,1fr)}
  .gallery .side img{height:90px}
  .gallery .main{height:240px}
}
@media(max-width:960px){[data-hero]{grid-template-columns:1fr !important;gap:28px}}