/* ==========================================================================
   Mustang Machines & Labour
   No frameworks, no trackers, no external requests. Two self-hosted fonts.
   Brand colours sampled from the logo artwork.
   ========================================================================== */

@font-face{
  font-family:'Oswald';
  src:url('fonts/oswald-latin.woff2') format('woff2');
  font-weight:200 700;
  font-style:normal;
  font-display:swap;
}
/* Mustang Display v0.4 — the logo's own face (3 - Pictures/Logos/Mustang typeface).
   Used for h1 and h2 only; everything smaller stays in Oswald. */
@font-face{
  font-family:'Mustang Display';
  src:url('fonts/MustangDisplay-Black.otf') format('opentype');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#14171a;          /* wordmark black */
  --ink-2:#3d454d;
  --muted:#78828c;
  --line:#e2e6e9;
  --paper:#ffffff;
  --panel:#f4f6f7;
  --panel-2:#eceff1;

  --red:#8c181b;          /* excavators / overalls */
  --red-dark:#6e1215;
  --red-tint:#fdf3f3;
  --amber:#f2a241;        /* hard hat */
  --amber-dark:#d2872b;

  --wrap:1180px;
  --head:'Oswald',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --display:'Mustang Display','Oswald',Impact,'Arial Narrow',sans-serif;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 10px 34px rgba(20,23,26,.13);
  --radius:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 1.1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

h1,h2,h3,h4{
  font-family:var(--head);font-weight:700;line-height:1.06;
  text-transform:uppercase;letter-spacing:.02em;margin:0 0 .45em;
}
/* Mustang Display runs ~1.7x wider than Oswald, so these sizes are smaller than the
   Oswald ones were. The h1 grows with the screen but never past what "EARTHWORKS."
   (10.2em) fits on a phone: (width - 44px gutters) / 10.5. */
h1,h2{font-family:var(--display);font-weight:900;letter-spacing:.01em;line-height:1.12}
h1{font-size:clamp(1.5rem,calc(9.5vw - 4.5px),3.9rem)}
h2{font-size:clamp(1.26rem,2.9vw,2.02rem)}
h3{font-size:1.15rem;letter-spacing:.04em}

/* section label — small tracked caps above a heading */
.eyebrow{
  font-family:var(--head);font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;font-size:.78rem;color:var(--red);
  margin:0 0 .9em;display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--amber);flex:none}
.on-dark .eyebrow{color:var(--amber)}

.lead{font-size:1.16rem;color:var(--ink-2);max-width:60ch}
.on-dark .lead{color:#c3cad1}

/* hi-vis rule — the repeating brand device */
.hivis{
  height:7px;
  background:repeating-linear-gradient(-45deg,
    var(--amber) 0 14px, #1a1e22 14px 28px);
}

/* ==========================================================  header  ===== */
.site-header{
  position:sticky;top:0;z-index:60;background:var(--ink);
  box-shadow:0 2px 14px rgba(0,0,0,.22);
}
/* padding-block only — a `padding` shorthand here would wipe out the
   horizontal padding .wrap sets, pushing the header flush to the edge */
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:11px;padding-bottom:11px}
.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand img{height:54px;width:auto}
/* the logo artwork already carries the company name, so the text beside it is
   only the positioning line — divided off with a hairline rule */
.brand .bt{
  padding-left:14px;border-left:1px solid rgba(255,255,255,.22);
  align-self:stretch;display:flex;align-items:center;
}
.brand i{
  color:var(--amber);font-size:.72rem;letter-spacing:.2em;font-style:normal;
  text-transform:uppercase;font-weight:600;font-family:var(--head);
  line-height:1.3;max-width:7em;
}
@media(max-width:900px){.brand .bt{display:none}}
@media(max-width:400px){.brand img{height:46px}}

.nav-right{display:flex;align-items:center;gap:10px}
.nav-links{display:flex;gap:2px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{
  font-family:var(--head);color:#c9d0d6;padding:10px 13px;font-size:.92rem;
  text-transform:uppercase;letter-spacing:.09em;font-weight:500;display:block;
  border-radius:var(--radius);transition:color .15s,background .15s;
}
.nav-links a:hover,.nav-links a:focus{color:#fff;background:rgba(255,255,255,.09);text-decoration:none}
.nav-links a[aria-current="page"]{color:#fff;box-shadow:inset 0 -3px 0 var(--amber)}

.call-btn{
  font-family:var(--head);background:var(--red);color:#fff;padding:11px 18px;
  border-radius:var(--radius);text-transform:uppercase;letter-spacing:.08em;
  font-size:.92rem;font-weight:600;white-space:nowrap;transition:background .15s;
}
.call-btn:hover{background:var(--amber);color:var(--ink);text-decoration:none}
@media(max-width:1040px){.call-btn{display:none}}

.nav-toggle{
  display:none;background:none;border:1px solid rgba(255,255,255,.32);color:#fff;
  border-radius:var(--radius);padding:8px 12px;font-size:1.15rem;cursor:pointer;line-height:1;
}
@media(max-width:820px){
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    gap:0;background:var(--ink);padding:6px 22px 14px;
    border-bottom:4px solid var(--amber);box-shadow:0 14px 26px rgba(0,0,0,.3);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.09);border-radius:0}
  .nav-links a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--amber);padding-left:12px}
}

/* ==========================================================  hero  ======= */
.hero{
  position:relative;background:var(--ink);display:flex;align-items:center;
  min-height:clamp(500px,76vh,760px);overflow:hidden;
}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.40}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,23,26,.94) 0%,rgba(20,23,26,.72) 45%,rgba(20,23,26,.30) 100%);
}
.hero .wrap{position:relative;z-index:2;padding-top:74px;padding-bottom:80px}
.hero h1{color:#fff;max-width:16ch;margin-bottom:.3em;text-shadow:0 3px 26px rgba(0,0,0,.5)}
.hero h1 em{color:var(--amber);font-style:normal}
.hero .sub{
  color:#dfe4e8;font-size:clamp(1.08rem,2.1vw,1.4rem);max-width:50ch;
  margin-bottom:1.7em;text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* trust chips under the hero copy */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:2.4em;padding:0;list-style:none}
.chips li{
  font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;
  font-weight:500;color:#fff;border:1px solid rgba(255,255,255,.32);
  padding:8px 14px;border-radius:100px;backdrop-filter:blur(3px);
  background:rgba(255,255,255,.06);
}

/* inner-page banner */
.banner{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.banner-bg{position:absolute;inset:0}
.banner-bg img{width:100%;height:100%;object-fit:cover;opacity:.26}
.banner-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,23,26,.92),rgba(20,23,26,.55))}
.banner .wrap{position:relative;z-index:2;padding-top:62px;padding-bottom:58px}
.banner h1{color:#fff;margin:0}
.banner p{color:#c9d0d6;margin:.7em 0 0;max-width:58ch;font-size:1.1rem}

/* ==========================================================  buttons  ==== */
.btn{
  display:inline-block;font-family:var(--head);background:var(--red);color:#fff;
  padding:15px 30px;border-radius:var(--radius);font-weight:600;font-size:1rem;
  text-transform:uppercase;letter-spacing:.09em;transition:background .15s,transform .1s;
}
.btn:hover{background:var(--red-dark);text-decoration:none;color:#fff;transform:translateY(-1px)}
.btn-amber{background:var(--amber);color:var(--ink)}
.btn-amber:hover{background:var(--amber-dark);color:var(--ink)}
.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,.5);color:#fff;padding:13px 28px}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-outline{background:transparent;border:2px solid var(--red);color:var(--red);padding:13px 28px}
.btn-outline:hover{background:var(--red);color:#fff}

/* ==========================================================  sections  === */
section{padding:76px 0}
section.tint{background:var(--panel)}
section.dark{background:var(--ink);color:#dbe0e5}
section.dark h2,section.dark h3{color:#fff}
section.tight{padding:54px 0}

/* the statement band — the positioning line, given room to breathe */
.statement{
  background:var(--red);color:#fff;padding:66px 0;position:relative;overflow:hidden;
}
.statement::after{
  content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;
  border:34px solid rgba(255,255,255,.07);border-radius:50%;
}
.statement .wrap{position:relative;z-index:2}
.statement h2{
  color:#fff;font-size:clamp(1.22rem,2.6vw,1.94rem);max-width:22ch;margin-bottom:.5em;
}
.statement p{color:#f6dede;max-width:56ch;font-size:1.12rem;margin:0}

.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split.rev .txt{order:2}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:30px}.split.rev .txt{order:0}}
.split img{border-radius:var(--radius);box-shadow:var(--shadow)}

/* ==========================================  capability cards  =========== */
.caps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2px;margin-top:2.2em;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.cap{
  background:#fff;padding:32px 28px 30px;position:relative;
  transition:background .2s;
}
.cap:hover{background:var(--red-tint)}
.cap .n{
  font-family:var(--head);font-size:.8rem;font-weight:600;color:var(--amber-dark);
  letter-spacing:.18em;display:block;margin-bottom:.9em;
}
.cap h3{margin-bottom:.5em;font-size:1.14rem;color:var(--ink)}
.cap p{margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.6}
.cap::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:4px;
  background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s;
}
.cap:hover::after{transform:scaleX(1)}

/* three-step "how we work" */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:34px;margin-top:2.4em}
.step .num{
  font-family:var(--head);font-size:3.4rem;line-height:1;color:var(--amber);
  font-weight:700;display:block;margin-bottom:.15em;
}
.step h3{margin-bottom:.4em}
.step p{color:var(--ink-2);margin:0;font-size:.99rem}
section.dark .step p{color:#b8c0c8}

/* stat row */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:2px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);overflow:hidden;margin-top:2.4em;
}
.stat{background:var(--ink);padding:28px 24px;text-align:center}
.stat b{
  display:block;font-family:var(--head);font-size:2.5rem;line-height:1;
  color:var(--amber);font-weight:700;margin-bottom:.2em;
}
.stat span{
  display:block;font-size:.79rem;text-transform:uppercase;letter-spacing:.13em;
  color:#a8b2bb;font-family:var(--head);font-weight:500;
}

/* plain list of what we can put on site */
.kit{display:flex;flex-wrap:wrap;gap:9px;margin:1.6em 0 0;padding:0;list-style:none}
.kit li{
  font-family:var(--head);text-transform:uppercase;letter-spacing:.09em;
  font-size:.82rem;font-weight:500;background:#fff;border:1px solid var(--line);
  padding:10px 16px;border-radius:100px;color:var(--ink);
}
section.dark .kit li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#fff}

/* client names */
.clients{
  display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;
  margin-top:1.6em;padding:0;list-style:none;
}
.clients li{
  font-family:var(--head);text-transform:uppercase;letter-spacing:.11em;
  font-size:1.05rem;font-weight:600;color:var(--ink-2);
}
section.dark .clients li{color:#dfe4e8}

/* ==========================================================  projects  === */
.proj-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:1.4em}
.proj-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 26px 24px;border-top:4px solid var(--red);
}
.proj-card h3{margin-bottom:.35em;font-size:1.05rem}
.proj-card .when{
  color:var(--muted);font-size:.8rem;font-weight:600;margin:0;
  font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;
}
.proj-card p:not(.when){margin:.7em 0 0;color:var(--ink-2);font-size:.96rem}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:1.4em}
.gallery button{
  padding:0;border:0;background:#e9ecee;cursor:zoom-in;border-radius:var(--radius);
  overflow:hidden;aspect-ratio:4/3;display:block;position:relative;
}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.gallery button:hover img,.gallery button:focus img{transform:scale(1.06)}
.gallery button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.lb{position:fixed;inset:0;background:rgba(12,14,16,.96);display:none;
  align-items:center;justify-content:center;z-index:120;padding:26px}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:var(--radius)}
.lb-close{position:absolute;top:14px;right:20px;background:none;border:0;color:#fff;
  font-size:2.6rem;line-height:1;cursor:pointer;padding:4px 12px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);
  border:0;color:#fff;font-size:2.2rem;cursor:pointer;padding:16px 20px;border-radius:var(--radius)}
.lb-nav:hover{background:var(--red)}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-count{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#9aa4ad;
  font-family:var(--head);letter-spacing:.16em;font-size:.8rem}

/* ==========================================================  contact  ==== */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;margin-top:1.2em}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px}
.card h3{margin-bottom:.2em;font-size:1.2rem}
.card .role{
  color:var(--red);font-weight:600;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.16em;margin:0 0 .8em;font-family:var(--head);
}
.card a{display:block;font-weight:600;margin-bottom:.35em;word-break:break-word}
.card .addr{color:var(--ink-2);margin:0}

.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin-top:1.6em}
.faq .proj-card{border-top-color:var(--amber)}

/* ==========================================================  footer  ===== */
.site-footer{background:var(--ink);color:#b9c1c9;padding:56px 0 32px;font-size:.95rem}
.site-footer a{color:#fff}
.foot-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px}
@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}
.site-footer h4{color:#fff;margin:0 0 .8em;font-size:.78rem;letter-spacing:.18em}
.site-footer p{margin:0 0 .4em}
.foot-logo{height:52px;width:auto;margin-bottom:1em}
.legal{border-top:1px solid rgba(255,255,255,.13);margin-top:34px;padding-top:20px;
  color:var(--muted);font-size:.85rem;display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between}

/* ====================================  sticky mobile call bar  =========== */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:rgba(0,0,0,.2);
  box-shadow:0 -4px 20px rgba(0,0,0,.28);
}
.callbar a{
  font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:.92rem;
  font-weight:600;padding:15px 8px;text-align:center;color:#fff;background:var(--red);
}
.callbar a:last-child{background:var(--ink)}
.callbar a:hover{text-decoration:none}
@media(max-width:820px){
  .callbar{display:grid}
  body{padding-bottom:54px}
  .lb{padding-bottom:70px}
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;color:var(--ink);padding:10px 16px;z-index:200;border-radius:var(--radius)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}