:root{--navy:#243240;--navy-2:#18222C;--gold:#BAA25C;--gold-2:#d0bd78;--ink:#263038;--muted:#64707d;--line:#e4e8ec;--soft:#f4f6f8;--white:#fff;--max:1180px;--radius:18px;--shadow:0 18px 55px rgba(16,23,30,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}.container{width:min(var(--max),calc(100% - 40px));margin:0 auto}.topbar{background:var(--navy-2);color:#d5dde5;font-size:.89rem}.topbar .container{display:flex;justify-content:space-between;gap:18px;padding:9px 0;align-items:center}.topbar a{color:#fff}.site-header{position:sticky;top:0;z-index:1000;background:rgba(24,34,44,.97);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.09)}.nav{display:flex;align-items:center;justify-content:space-between;gap:26px;min-height:78px}.brand{display:flex;align-items:center}.brand img{width:232px;max-width:48vw;height:auto}.nav-links{display:flex;gap:24px;align-items:center;color:#fff;font-weight:650;font-size:.95rem}.nav-links a{opacity:.92}.nav-links a:hover,.nav-links a.active{color:var(--gold-2);opacity:1}.nav-cta{background:var(--gold);color:var(--navy)!important;padding:11px 16px;border-radius:999px;font-weight:800}.menu-btn{display:none;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:10px 12px;font-weight:750}.hero{position:relative;min-height:680px;background:var(--navy);color:#fff;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(16,23,30,.95),rgba(16,23,30,.72) 44%,rgba(16,23,30,.22)),url('/assets/img/hero-industrial-line.webp') center/cover no-repeat}.hero .container{position:relative;z-index:1;padding:112px 0 86px}.eyebrow{color:var(--gold-2);text-transform:uppercase;letter-spacing:.14em;font-size:.79rem;font-weight:850}.hero h1{font-size:clamp(2.4rem,5vw,5.25rem);line-height:.98;margin:18px 0 24px;max-width:940px;letter-spacing:-.055em}.hero p{font-size:clamp(1.05rem,1.7vw,1.32rem);max-width:780px;color:#e8eef4}.hero-actions,.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:13px 20px;font-weight:850;border:1px solid transparent;transition:.2s}.btn-primary{background:var(--gold);color:var(--navy)}.btn-primary:hover{transform:translateY(-1px);background:var(--gold-2)}.btn-secondary{border-color:rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.08)}.btn-secondary:hover{background:rgba(255,255,255,.15)}.btn-outline{border-color:rgba(36,50,64,.18);color:var(--navy);background:#fff}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);overflow:hidden;margin-top:66px;max-width:1000px}.stat{background:rgba(16,23,30,.65);padding:24px}.stat strong{display:block;color:#fff;font-size:1.55rem}.stat span{color:#c8d2dc;font-size:.92rem}.section{padding:86px 0}.section.alt{background:var(--soft)}.section.navy{background:var(--navy);color:#fff}.section.navy p,.section.navy .muted{color:#d5dde5}.section-head{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:34px}.section-head h2,.page-intro h1,.content h1{font-size:clamp(2rem,3.6vw,3.6rem);line-height:1.05;margin:0;letter-spacing:-.04em;max-width:850px}.section-head p{max-width:520px;color:var(--muted);margin:0}.grid{display:grid;gap:24px}.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{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 28px rgba(16,23,30,.05)}.card-body{padding:26px}.card h3{font-size:1.22rem;line-height:1.2;margin:0 0 10px;color:var(--navy)}.card p{margin:0;color:var(--muted)}.card .image,.service-card img,.project-card img{width:100%;height:230px;object-fit:cover}.service-card{transition:.18s}.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.link{display:inline-flex;margin-top:18px;color:var(--navy);font-weight:850}.link:after{content:"→";margin-left:8px;color:var(--gold)}.feature{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}.feature-media{border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}.feature-media img{width:100%;height:520px;object-fit:cover}.check-list{padding:0;margin:20px 0 0;list-style:none}.check-list li{position:relative;padding-left:30px;margin:12px 0}.check-list li:before{content:"";position:absolute;left:0;top:.48em;width:10px;height:10px;border-radius:50%;background:var(--gold)}.split-box{background:#fff;border-radius:24px;padding:34px;box-shadow:var(--shadow);border:1px solid var(--line)}.page-hero{background:linear-gradient(110deg,rgba(16,23,30,.97),rgba(16,23,30,.77)),url('/assets/img/factory-industrial-wide.webp') center/cover no-repeat;color:#fff;padding:96px 0 70px}.page-hero h1{font-size:clamp(2.35rem,4.8vw,4.7rem);line-height:1;margin:12px 0 18px;letter-spacing:-.05em;max-width:900px}.page-hero p{max-width:780px;color:#e8eef4;font-size:1.17rem}.breadcrumbs{font-size:.9rem;color:#d5dde5;margin-bottom:20px}.breadcrumbs a{color:#fff}.service-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:42px;align-items:start}.content{font-size:1.04rem}.content h2{font-size:2.1rem;line-height:1.12;letter-spacing:-.03em;margin:44px 0 14px;color:var(--navy)}.content p{color:#46525f}.content ul{padding-left:20px;color:#46525f}.aside{position:sticky;top:112px}.aside-card{background:var(--navy);color:#fff;border-radius:24px;padding:28px}.aside-card p{color:#d5dde5}.aside-card a{color:#fff}.service-list{display:grid;gap:9px;margin-top:18px}.service-list a{display:block;padding:10px 12px;border-radius:12px;background:#f6f8fa;border:1px solid var(--line);font-weight:650;color:#2e3a46}.service-list a:hover,.service-list a.active{background:var(--navy);color:#fff;border-color:var(--navy)}.banner{background:var(--navy);color:#fff;border-radius:28px;padding:44px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}.banner h2{margin:0 0 10px;font-size:2.2rem;line-height:1.08}.banner p{margin:0;color:#d5dde5}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:start}.contact-panel{background:var(--navy);color:#fff;border-radius:24px;padding:32px}.contact-panel p{color:#d5dde5}.form{background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:var(--shadow)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-weight:780;color:var(--navy);font-size:.92rem}.field input,.field textarea,.field select{width:100%;border:1px solid #d6dce2;border-radius:12px;padding:12px 13px;font:inherit;color:var(--ink);background:#fff}.field textarea{min-height:130px;resize:vertical}.notice{background:#fff8e4;border:1px solid rgba(186,162,92,.45);padding:16px;border-radius:14px;color:#514216}.footer{background:#18222C;color:#d5dde5;padding:58px 0 28px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr .8fr;gap:32px}.footer img{width:220px;margin-bottom:18px}.footer h4{color:#fff;margin:0 0 12px}.footer a{display:block;color:#d5dde5;margin:7px 0}.footer a:hover{color:var(--gold-2)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.12);padding-top:24px;margin-top:32px;font-size:.9rem;color:#a4b0bc}.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.pill{border:1px solid rgba(36,50,64,.13);background:#fff;border-radius:999px;padding:8px 12px;font-weight:700;color:#38444f}.dark-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:22px}.muted{color:var(--muted)}.legal-content{max-width:900px}.legal-content h2{margin-top:42px}.skip-link{position:absolute;left:-999px}.skip-link:focus{left:10px;top:10px;z-index:2000;background:#fff;color:#000;padding:10px;border-radius:8px}
@media(max-width:980px){.topbar .container{flex-direction:column;align-items:flex-start;gap:4px}.menu-btn{display:inline-flex}.nav-links{position:absolute;left:0;right:0;top:78px;background:var(--navy);flex-direction:column;align-items:flex-start;padding:22px 20px;border-top:1px solid rgba(255,255,255,.12);display:none}.nav-links.open{display:flex}.nav-links a{width:100%}.stats,.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}.feature,.service-layout,.contact-grid{grid-template-columns:1fr}.aside{position:static}.footer-grid{grid-template-columns:1fr 1fr}.banner{grid-template-columns:1fr}.hero{min-height:auto}.hero .container{padding:86px 0 70px}}
@media(max-width:640px){.container{width:min(var(--max),calc(100% - 28px))}.brand img{width:190px}.grid-2,.grid-3,.grid-4,.stats,.form-grid{grid-template-columns:1fr}.section{padding:64px 0}.section-head{display:block}.section-head p{margin-top:14px}.feature-media img{height:340px}.card .image,.service-card img,.project-card img{height:210px}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.hero-actions .btn,.actions .btn{width:100%}.banner{padding:30px}.page-hero{padding:72px 0 56px}}.section.navy .card {
  background: #ffffff;
  color: #263038;
}

.section.navy .card h3 {
  color: #243240;
}

.section.navy .card p {
  color: #46525f;
  font-weight: 500;
}
.topbar {
  font-size: 14px;
  line-height: 1.4;
  color: #ffffff;
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar span,
.topbar a {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-weight: 400;
  text-decoration: none;
}

.topbar a:hover {
  text-decoration: underline;
}
/* Mobile layout improvements */
@media (max-width: 640px) {
  .topbar .container span:first-child {
    display: none;
  }

  .topbar .container {
    align-items: center;
    text-align: center;
    justify-content: center;
  }

  .topbar {
    font-size: 13px;
  }

  .hero {
    padding: 64px 0 48px;
  }

  .hero h1 {
    font-size: 2.25rem;
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin-bottom: 18px;
  }

  .hero p {
    font-size: 1rem;
    line-height: 1.55;
  }

  .hero-actions {
    margin-top: 24px;
  }

  .hero .stats {
    display: none;
  }

  .section {
    padding: 46px 0;
  }

  .page-hero {
    padding: 54px 0 44px;
  }

  .section-head {
    margin-bottom: 22px;
  }

  .section-head h2 {
    font-size: 2rem;
  }

  .section-head p {
    font-size: 0.98rem;
  }

  .feature-media img {
    height: 240px;
  }

  .card .image,
  .service-card img,
  .project-card img {
    height: 185px;
  }

  .mobile-hide {
    display: none;
  }

  .home-services .service-card:nth-of-type(n+5) {
    display: none;
  }

  .btn {
    min-height: 46px;
    padding: 13px 18px;
  }

  .field input,
  .field select,
  .field textarea {
    min-height: 46px;
    font-size: 16px;
  }

  .field textarea {
    min-height: 150px;
  }

  .form,
  .contact-panel {
    padding: 24px;
  }

  #form-status {
    font-size: 0.95rem;
  }
}

/* Contact form status message */
#form-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f4f6f8;
  border: 1px solid #e4e8ec;
}
@media (max-width: 640px) {
  .footer-grid {
    gap: 20px;
  }

  .footer-grid > div:nth-child(2),
  .footer-grid > div:nth-child(3) {
    display: none;
  }

  .footer-grid > div:first-child p:first-of-type {
    display: none;
  }

  .footer-grid > div:first-child img {
    max-width: 150px;
  }

  .footer-bottom {
    gap: 10px;
    text-align: center;
  }

  .footer-bottom span {
    display: block;
  }
}
@media (max-width: 640px) {
  .home-intro .feature-media {
    display: none;
  }

  .home-intro .check-list {
    display: none;
  }

  .home-industries .card:nth-of-type(n+4) {
    display: none;
  }
}
.form-security {
  margin-top: -4px;
}

.form-security .cf-turnstile {
  max-width: 100%;
}

@media (max-width: 640px) {
  .form-security {
    margin-top: -6px;
  }
}
/* MA rebrand additions */
.nav-links{gap:18px;font-size:.92rem}
.brand img{width:210px}
details.faq{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:10px 0;background:#fff}
details.faq summary{font-weight:800;color:var(--navy);cursor:pointer}
details.faq p{margin:10px 0 0;color:#46525f}
.brand-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.brand-strip .pill{background:#fff}
.svc-tile .card-body{padding:30px}
.svc-tile h3{font-size:1.45rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
.step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;counter-increment:step}
.step:before{content:counter(step);display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--navy);font-weight:850;align-items:center;justify-content:center;margin-bottom:12px}
.step h3{margin:0 0 8px;font-size:1.05rem;color:var(--navy)}
.step p{margin:0;color:var(--muted);font-size:.95rem}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.steps{grid-template-columns:1fr}}
.quote-card{background:#fff;border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:16px;padding:26px}
.quote-card p{color:#46525f;margin:0 0 14px;font-style:italic}
.quote-card cite{font-style:normal;font-weight:800;color:var(--navy);font-size:.95rem}

/* Mobile call bar + mobile trimming */
.mobile-callbar{display:none}
@media (max-width:640px){
  .mobile-callbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:1500;box-shadow:0 -8px 24px rgba(16,23,30,.25)}
  .mobile-callbar a{flex:1;text-align:center;padding:15px 8px;font-weight:850;font-size:.98rem}
  .cb-call{background:var(--gold);color:var(--navy)}
  .cb-quote{background:var(--navy);color:#fff}
  body{padding-bottom:52px}
  .aside > div:not(.aside-card){display:none}
  .steps{gap:12px}
  .quote-card:nth-of-type(n+2){display:none}
  .pill-row{display:none}
  .brand-strip{display:none}
  details.faq{padding:13px 14px}
  .breadcrumbs{display:none}
  .page-hero p{font-size:1.02rem}
}
/* Client logo wall (text wordmarks until official files supplied) */
.client-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.client-wall span{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:12px;background:#fff;padding:18px 10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#66727e;font-size:.82rem;text-align:center}
@media(max-width:980px){.client-wall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.client-wall{grid-template-columns:repeat(2,1fr)}.client-wall span:nth-of-type(n+7){display:none}}


/* Services dropdown nav */
.nav-links{gap:26px;font-size:.96rem}
.brand img{width:220px}
.nav-item{position:relative}
.drop-toggle:after{content:" \25BE";font-size:.75em;opacity:.8}
.dropdown{display:none;position:absolute;top:calc(100% + 10px);left:-14px;background:var(--navy);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px;min-width:250px;box-shadow:0 18px 45px rgba(0,0,0,.35);z-index:1200}
.dropdown a{display:block;padding:10px 14px;border-radius:9px;white-space:nowrap}
.dropdown a:hover{background:rgba(255,255,255,.09);color:var(--gold-2)}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{display:block}
.nav-item:before{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
@media(max-width:980px){
  .nav-item{position:static}
  .dropdown{display:block;position:static;background:none;border:none;box-shadow:none;padding:2px 0 6px 16px;min-width:0}
  .drop-toggle:after{content:""}
}


/* refinement: smaller brand logo */
.brand img{width:184px}
@media(max-width:640px){.brand img{width:152px}}
.footer img{width:190px}


/* Typography refinement — crisper weights */
.site-header{background:#18222C !important}
.btn{font-weight:600;letter-spacing:.01em;font-size:1rem;padding:14px 22px}
.nav-cta{font-weight:700}
.nav-links{font-weight:600}
.stat strong{font-weight:700;font-size:1.62rem}
.eyebrow{font-weight:700;letter-spacing:.16em}
.card h3{font-weight:700}
.link{font-weight:700}
.check-list li{font-weight:400}
.pill{font-weight:600}
.step:before{font-weight:700}
.footer h4{font-weight:700;letter-spacing:.02em}
.field label{font-weight:600}
.quote-card cite{font-weight:700}
.section-head h2,.content h2,.hero h1,.page-hero h1{font-weight:750}


/* Client logo wall — clean, uniform, small */
.client-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:20px 28px;align-items:center}
.client-logo{display:flex;align-items:center;justify-content:center;min-height:70px;padding:6px 10px}
.client-logo img{max-height:52px;max-width:140px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:.2s}
.client-logo:hover img{filter:none;opacity:1}
.client-logo em{font-style:normal;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7a8794;font-size:.8rem;text-align:center}
@media(max-width:980px){.client-wall{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(max-width:640px){.client-wall{grid-template-columns:repeat(2,1fr)}.client-logo{min-height:56px}.client-logo img{max-height:42px}}

/* Client wall — full-colour on clean white tiles (override greyscale) */
.client-wall{gap:18px}
.client-logo{background:#fff;border:1px solid var(--line);border-radius:12px;min-height:96px;padding:16px 20px;box-shadow:0 4px 14px rgba(16,23,30,.04)}
.client-logo img{filter:none !important;opacity:1 !important;max-height:56px;max-width:150px}

/* Careers — file inputs + role cards */
.field input[type="file"]{padding:10px 12px;background:#fff;border:1px dashed #c8d2dc;cursor:pointer;font-size:.92rem}
.field input[type="file"]::file-selector-button{margin-right:12px;border:none;background:var(--navy);color:#fff;padding:8px 14px;border-radius:8px;font-weight:600;cursor:pointer}
#apply-status{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--soft);border:1px solid var(--line)}
.service-card .eyebrow{margin-bottom:6px}

/* ============================================================
   Mobile UX refinements — reveal key content on phones
   (later rules override earlier @640 display:none)
   ============================================================ */
@media (max-width:640px){
  /* Trust stats: show as tidy 2x2 instead of hidden */
  .hero .stats{display:grid !important;grid-template-columns:1fr 1fr;gap:1px;margin-top:26px}
  .hero .stat{padding:16px 14px}
  .hero .stat strong{font-size:1.15rem}
  .hero .stat span{font-size:.8rem}

  /* Homepage selling points: keep visible (REC 8904, in-house engineers, etc.) */
  .home-intro .check-list{display:block !important;margin-top:20px}

  /* Show all six industries, not three */
  .home-industries .card:nth-of-type(n+4){display:block !important}

  /* Footer: keep Services + Company link columns on mobile */
  .footer-grid > div:nth-child(2),
  .footer-grid > div:nth-child(3){display:block !important}
  .footer-grid{gap:26px}

  /* Show more client logos (up to 12) */
  .client-wall span:nth-of-type(n+7){display:flex !important}
  .client-wall span:nth-of-type(n+13){display:none}

  /* Breadcrumbs aid orientation — show them, compact */
  .breadcrumbs{display:block !important;font-size:.8rem;margin-bottom:14px}
}

/* ============ Horizontal scroll carousels (capabilities + testimonials) ============ */
.hscroll{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 20px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--gold) rgba(0,0,0,.08)}
.hscroll > *{scroll-snap-align:start;flex:0 0 360px;max-width:86vw}
.hscroll::-webkit-scrollbar{height:8px}
.hscroll::-webkit-scrollbar-thumb{background:var(--gold);border-radius:8px}
.hscroll::-webkit-scrollbar-track{background:rgba(0,0,0,.08);border-radius:8px}
.cap-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 28px rgba(16,23,30,.05);display:flex;flex-direction:column}
.cap-card .image{width:100%;height:210px;object-fit:cover}
.cap-body{padding:26px;display:flex;flex-direction:column;gap:10px;flex:1}
.cap-body h3{margin:0;color:var(--navy);font-size:1.25rem;font-weight:700}
.cap-body p{margin:0;color:var(--muted);flex:1}
.cap-body .btn{align-self:flex-start;margin-top:6px}
.hscroll .quote-card{background:#fff}
.section.alt .hscroll .quote-card{background:#fff}

/* Footer social icons — small, subtle */
.footer-social{display:flex;gap:12px;margin-top:16px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.08);color:#c8d2dc;transition:.18s}
.footer-social a:hover{background:var(--gold);color:var(--navy)}

/* FAQ 'more questions' CTA */
.faq-more{margin-top:20px;padding:16px 18px;background:var(--soft);border:1px solid var(--line);border-radius:12px;color:#43516a;font-weight:600}
.faq-more a{color:var(--navy);font-weight:800;text-decoration:underline}

@media (max-width:640px){.hscroll .quote-card{display:block !important}}

/* ============ Testimonial marquee — quiet continuous auto-scroll ============ */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:22px;width:max-content;animation:ma-marquee 90s linear infinite}
.marquee-dup{display:flex;gap:22px}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee .quote-card{flex:0 0 380px;max-width:86vw;white-space:normal}
@keyframes ma-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 11px))}}
@media (prefers-reduced-motion: reduce){
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none}
}
@media (max-width:640px){
  .marquee-track{animation-duration:70s}
  .marquee .quote-card{flex:0 0 300px;display:block !important}
}

/* ============ Industries we serve — icon cards ============ */
.home-industries .grid{gap:20px}
.ind-card{position:relative;overflow:hidden;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.ind-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.ind-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(7,20,45,.22);border-color:rgba(186,162,92,.55)}
.ind-card:hover:before{transform:scaleX(1)}
.ind-card .card-body{padding:26px 26px 22px}
.ind-icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;
  background:rgba(186,162,92,.12);color:var(--gold);margin-bottom:14px;transition:.25s}
.ind-icon svg{width:24px;height:24px}
.ind-card:hover .ind-icon{background:var(--gold);color:#fff}
.ind-card h3{margin:0 0 8px}
.ind-card p{margin:0}
.ind-go{display:inline-block;margin-top:14px;font-weight:700;font-size:.9rem;color:var(--navy);opacity:0;transform:translateY(-4px);transition:.25s}
.ind-go:after{content:" →";color:var(--gold)}
.ind-card:hover .ind-go,.ind-card:focus-visible .ind-go{opacity:1;transform:translateY(0)}
.home-industries .actions{justify-content:center;margin-top:34px}
@media (hover:none){ .ind-go{opacity:1;transform:none} }
@media (max-width:640px){
  .ind-card .card-body{padding:20px}
  .ind-icon{width:40px;height:40px;margin-bottom:10px}
  .ind-icon svg{width:21px;height:21px}
  .home-industries .actions{margin-top:24px}
}

/* ============ Related projects on service pages ============ */
.related-projects .grid{gap:20px}
.proj-card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.proj-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(186,162,92,.55)}
.proj-card .card-body{padding:24px}
.proj-card h3{font-size:1.1rem;line-height:1.25;margin:0 0 9px}
.proj-card p{margin:0;font-size:.95rem}
.proj-card .link{margin-top:14px;font-size:.9rem}
.related-projects .actions{justify-content:center;margin-top:30px}
@media (max-width:640px){
  .proj-card .card-body{padding:20px}
  .related-projects .actions{margin-top:22px}
}

/* ============ Services used on this project (chips) ============ */
.chip-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.svc-chip{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:11px 20px;font-weight:650;color:var(--navy);font-size:.95rem;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease}
.svc-chip:after{content:" →";margin-left:8px;color:var(--gold);transition:transform .18s ease}
.svc-chip:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 8px 20px rgba(16,23,30,.10)}
.svc-chip:hover:after{transform:translateX(3px)}
@media (max-width:640px){
  .chip-row{gap:9px;justify-content:flex-start}
  .svc-chip{padding:9px 15px;font-size:.88rem}
}

/* ---- Industries: compact tiles (icon inline with name) ---- */
.home-industries{padding:56px 0}
.home-industries .section-head{margin-bottom:24px}
.home-industries .grid{gap:14px}
.ind-card .card-body{display:flex;align-items:center;gap:14px;padding:16px 18px}
.ind-icon{width:38px;height:38px;min-width:38px;border-radius:10px;margin-bottom:0}
.ind-icon svg{width:20px;height:20px}
.ind-card h3{margin:0;font-size:1.02rem;line-height:1.25}
.ind-card:hover{transform:translateY(-3px)}
.home-industries .actions{margin-top:26px}
@media (max-width:640px){
  .home-industries{padding:40px 0}
  .ind-card .card-body{padding:13px 15px;gap:12px}
  .ind-icon{width:34px;height:34px;min-width:34px}
  .ind-icon svg{width:18px;height:18px}
  .ind-card h3{font-size:.96rem}
  .home-industries .actions{margin-top:20px}
}


/* ============================================================
   MOBILE PASS — accordion navigation, thumb-zone actions,
   opaque chrome, progressive disclosure.
   Content is never removed on mobile, only collapsed.
   ============================================================ */

/* Opaque sticky header (NN/g: translucent sticky headers create
   unreadable overlaps as content scrolls beneath them) */
.site-header{background:#18222C;backdrop-filter:none}

/* Caret buttons — hidden on desktop, the nav there uses hover */
.drop-caret,.sub-toggle{display:none}
.sub-list{display:none}   /* desktop dropdown shows the 4 service groups only, as before */
.sub-all{display:none}

@media(max-width:980px){
  /* --- the panel --- */
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    display:none;flex-direction:column;align-items:stretch;
    gap:0;padding:8px 0 14px;
    background:#18222C;border-top:1px solid rgba(255,255,255,.12);
    max-height:78dvh;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    box-shadow:0 22px 40px rgba(0,0,0,.4);
  }
  .nav-links.open{display:flex}

  /* --- top-level rows --- */
  .nav-links>a,.nav-item>a{
    display:flex;align-items:center;
    min-height:52px;padding:0 20px;
    font-size:1rem;font-weight:700;width:100%;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .nav-links>a:last-of-type{border-bottom:0}

  /* --- Services row: link + caret share the row --- */
  .nav-item{position:relative;display:block;width:100%;
    border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-item>a{border-bottom:0;padding-right:64px}
  .drop-caret,.sub-toggle{
    display:block;position:absolute;top:0;right:8px;
    width:52px;height:52px;padding:0;
    background:transparent;border:0;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .drop-caret:before,.sub-toggle:before{
    content:"";position:absolute;top:50%;left:50%;
    width:9px;height:9px;margin:-6px 0 0 -5px;
    border-right:2px solid rgba(255,255,255,.85);
    border-bottom:2px solid rgba(255,255,255,.85);
    transform:rotate(45deg);transition:transform .18s ease;
  }
  .drop-caret[aria-expanded="true"]:before,
  .sub-toggle[aria-expanded="true"]:before{transform:rotate(-135deg);margin-top:-2px}

  /* --- level 2: the four service groups --- */
  .dropdown{display:none;position:static;background:rgba(255,255,255,.04);
    border:0;border-radius:0;box-shadow:none;padding:0;min-width:0}
  .dropdown.open{display:block}
  .nav-sub{position:relative;border-top:1px solid rgba(255,255,255,.07)}
  .nav-sub>a{
    display:flex;align-items:center;min-height:50px;
    padding:0 64px 0 34px;font-size:.97rem;font-weight:650;
    color:#e8eef4;white-space:normal;border-radius:0;
  }
  .sub-toggle{height:50px}

  /* --- level 3: services --- */
  .sub-list{display:none;background:rgba(0,0,0,.22)}
  .sub-list.open{display:block}
  .sub-list a{
    display:flex;align-items:center;min-height:48px;
    padding:0 20px 0 48px;font-size:.94rem;font-weight:550;
    color:#cfd9e3;white-space:normal;border-radius:0;
    border-top:1px solid rgba(255,255,255,.05);
  }
  .sub-all{display:flex;color:var(--gold-2)!important;font-weight:750!important;
    white-space:normal;min-height:48px;align-items:center}
  .sub-all.top{padding-left:34px;border-top:1px solid rgba(255,255,255,.07)}
  .dropdown a{white-space:normal}

  /* --- quote button pinned at the end of the panel --- */
  .nav-cta{margin:14px 20px 4px;justify-content:center;
    min-height:52px;display:flex;align-items:center;border-bottom:0!important}

  .menu-btn{min-height:44px;padding:10px 14px}
}

/* ---- Sticky thumb-zone action bar ---- */
@media(max-width:640px){
  .mobile-callbar{
    background:#18222C;
    padding-bottom:env(safe-area-inset-bottom);
    border-top:1px solid rgba(255,255,255,.12);
  }
  .mobile-callbar a{
    min-height:56px;display:flex;align-items:center;justify-content:center;
    font-size:1rem;letter-spacing:-.01em;
  }
  .mobile-callbar .cb-call{background:var(--gold);color:var(--navy)}
  .mobile-callbar .cb-quote{background:transparent;color:#fff;
    border-left:1px solid rgba(255,255,255,.14)}
  /* extend the navy footer so the bar never covers its last line */
  .footer{padding-bottom:calc(28px + 56px + env(safe-area-inset-bottom))}
}

/* ---- Progressive disclosure (mobile only) ---- */
.m-panel.m-collapsed{display:none}
.m-capped>*:nth-child(n+5){display:none}
@media(max-width:640px){
  .content h2.m-head{
    position:relative;display:flex;align-items:center;
    min-height:52px;padding:14px 46px 14px 0;margin:8px 0 0;
    border-top:1px solid var(--line);cursor:pointer;
    font-size:1.32rem;line-height:1.25;
  }
  .m-toggle{
    position:absolute;top:50%;right:0;transform:translateY(-50%);
    width:44px;height:44px;background:transparent;border:0;padding:0;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .m-toggle:before{
    content:"";position:absolute;top:50%;left:50%;
    width:10px;height:10px;margin:-7px 0 0 -5px;
    border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);
    transform:rotate(45deg);transition:transform .18s ease;
  }
  .m-toggle[aria-expanded="true"]:before{transform:rotate(-135deg);margin-top:-2px}
  .m-more{width:100%;margin-top:18px;min-height:48px}
}

/* ---- Mobile typography, spacing and touch targets ---- */
@media(max-width:640px){
  /* iOS zooms the whole viewport if an input is under 16px */
  .field input,.field textarea,.field select{font-size:16px}

  /* tighter vertical rhythm — the desktop spacing is ~2 screenfuls of air */
  .section{padding:44px 0}
  .hero .container{padding:56px 0 44px}
  .page-hero{padding:52px 0 38px}
  .stats{margin-top:34px}
  .stat{padding:18px}
  .content h2{font-size:1.5rem;margin:30px 0 12px}
  .section-head{margin-bottom:22px}
  .banner{padding:26px;border-radius:20px}
  .banner h2{font-size:1.6rem}
  .card-body{padding:20px}
  .form,.split-box,.aside-card,.contact-panel{padding:22px;border-radius:18px}

  /* readable line length and size */
  .content{font-size:1.02rem}
  .page-hero p,.hero p{font-size:1.05rem}

  /* shorter media so copy is reachable */
  .feature-media img{height:230px}
  .card .image,.service-card img,.project-card img{height:180px}

  /* touch targets: 48px min with real spacing (WCAG AAA + Material) */
  .btn{min-height:48px;padding:13px 20px}
  .service-list a{min-height:48px;display:flex;align-items:center}
  .footer a{min-height:44px;display:flex;align-items:center;margin:0}
  .footer-bottom a{display:inline-flex}
  .pill{min-height:40px;display:inline-flex;align-items:center}
}

/* ---- Stop layout shift from unsized media (CLS) ---- */
.card .image,.service-card img,.project-card img{aspect-ratio:16/10}
.feature-media img{aspect-ratio:4/3}
@media(max-width:640px){
  .card .image,.service-card img,.project-card img{aspect-ratio:16/9}
}

/* ============================================================
   MOBILE REFINEMENTS — round 2
   ============================================================ */

/* Shared gutter so the menu lines up with the logo and page content.
   .container is 100%-40px (20px each side), and 100%-28px (14px) under 640. */
:root{--gutter:20px}
@media(max-width:640px){:root{--gutter:14px}}

@media(max-width:980px){
  /* 1. FIX: the desktop hover/focus rule has no media query, so after tapping
     the caret the button kept focus and :focus-within (0,2,1) beat
     .dropdown.open (0,2,0) — the menu could open but never close. */
  .nav-item:hover .dropdown,
  .nav-item:focus-within .dropdown{display:none}
  .nav-item .dropdown.open{display:block}

  /* 2. Alignment: every row now starts on the same vertical line as the logo,
     with each level indented a consistent 16px from its parent. */
  .nav-links>a,.nav-item>a{padding-left:var(--gutter);padding-right:64px}
  .nav-sub>a{padding-left:calc(var(--gutter) + 16px);padding-right:64px}
  .sub-list a{padding-left:calc(var(--gutter) + 32px);padding-right:var(--gutter)}
  .sub-all.top{padding-left:calc(var(--gutter) + 16px)}
  .nav-cta{margin-left:var(--gutter);margin-right:var(--gutter)}
  .menu-btn{margin-right:0}
}

/* 3. Client logo wall — all 15 visible, evenly sized, properly centred.
   Supersedes the four overlapping rule sets above. */
@media(max-width:640px){
  .client-wall{grid-template-columns:repeat(2,1fr);gap:12px}
  .client-wall span,
  .client-wall span:nth-of-type(n+7),
  .client-wall span:nth-of-type(n+13){
    display:flex!important;align-items:center;justify-content:center;
    min-height:76px;padding:12px 14px;
  }
  .client-logo img{max-height:38px;max-width:100%;width:auto;object-fit:contain}
}

/* 4. The action bar now slides in once the hero has been scrolled past, so the
   first screen isn't showing the same phone number and quote button twice.
   Transform only — never animate layout properties (CLS). */
@media(max-width:640px){
  .mobile-callbar{transform:translateY(100%);transition:transform .25s ease}
  .mobile-callbar.cb-show{transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){.mobile-callbar{transition:none}}

/* 5. First screen: one phone number, one quote button.
   The topbar wrapped to two lines on a phone and repeated the number that the
   hero and the sticky bar already carry. Hidden under 640px only — desktop and
   tablet keep it. Email and REC 8904 remain in the footer. */
@media(max-width:640px){
  .topbar{display:none}
}

/* 6. Call becomes the primary hero action on phones.
   Done in CSS against the href so the desktop markup and ordering are
   untouched, and so it applies to every hero sitewide without editing pages. */
@media(max-width:640px){
  .hero-actions{flex-direction:column;gap:12px}
  .hero-actions .btn[href^="tel:"]{
    order:-1;
    background:var(--gold);color:var(--navy);border-color:transparent;
  }
  /* Only demote the quote button where a Call button exists to take its place.
     Nine pages carry just one hero action; those keep their primary styling. */
  .hero-actions:has(a[href^="tel:"]) .btn[href="/contact/"]{
    background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28);
  }
}

/* ============================================================
   MOBILE REFINEMENTS — round 3
   Footer, Industries we serve, How we work.
   ============================================================ */
@media(max-width:640px){

  /* --- 1. FOOTER -------------------------------------------------
     Was ~960px tall stacked in a single column. The two link columns
     now share a row, which halves the tallest part of it. Brand block
     and contact block still span full width. --- */
  .footer{padding:38px 0 24px;padding-bottom:calc(24px + 56px + env(safe-area-inset-bottom))}
  .footer-grid{grid-template-columns:1fr 1fr;gap:22px 18px}
  .footer-grid>div:first-child,
  .footer-grid>div:nth-child(4){grid-column:1/-1}

  .footer img{width:148px;margin-bottom:12px}
  .footer h4{font-size:.95rem;margin:0 0 4px;letter-spacing:.02em}
  .footer a{min-height:44px;font-size:.94rem}
  .footer-grid>div:first-child p{font-size:.86rem;line-height:1.5;margin:0 0 6px}
  .footer-grid>div:nth-child(4) p{font-size:.9rem;margin:6px 0 0}
  .footer-social{margin-top:12px}

  .footer-bottom{font-size:.8rem;padding-top:16px;margin-top:20px;gap:6px}

  /* --- 2. INDUSTRIES WE SERVE -------------------------------------
     Nine full-width rows became nine two-up tiles: same nine
     industries, roughly half the scroll. --- */
  .home-industries{padding:34px 0}
  .home-industries .grid{grid-template-columns:1fr 1fr;gap:10px}
  .ind-card .card-body{display:flex;align-items:center;gap:10px;padding:12px}
  .ind-icon{width:30px;height:30px;min-width:30px;border-radius:8px}
  .ind-icon svg{width:16px;height:16px}
  .ind-card h3{font-size:.85rem;line-height:1.25;margin:0}
  .home-industries .actions{margin-top:18px}

  /* --- 3. HOW WE WORK ---------------------------------------------
     The step number sat above the heading, so each card ran three
     blocks deep. It now sits beside the text as one compact row. --- */
  .steps{gap:10px}
  .step{display:grid;grid-template-columns:auto 1fr;gap:0 13px;padding:14px 16px;align-items:start}
  .step:before{grid-row:1/3;width:30px;height:30px;min-width:30px;margin-bottom:0;font-size:.9rem}
  .step h3{font-size:1rem;margin:3px 0 3px}
  .step p{font-size:.9rem;line-height:1.45}

  /* --- 4. Clear an old conflicting rule -----------------------------
     A previous pass added body padding for the call bar; the footer
     now carries that padding itself, and both together left a white
     strip beneath the navy footer. --- */
  body{padding-bottom:0}
}

/* --- Restore the aside link blocks on mobile ---------------------
   An earlier pass hid everything in .aside except the contact card,
   which also hid "Popular services" and the "Nearby areas" suburb
   cross-links added later. Mobile is what Google indexes, so those
   links were invisible to both phone visitors and the mobile crawl.
   They come back as a wrapped row of chips rather than full-width
   rows, so nine links cost about 180px instead of 430px. --- */
@media(max-width:640px){
  .aside>div:not(.aside-card){display:block;margin-top:20px}
  .aside h4{font-size:.95rem;margin:0 0 10px;color:var(--navy)}
  .aside .service-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:0}
  .aside .service-list a{
    display:inline-flex;align-items:center;min-height:44px;
    padding:0 14px;border-radius:999px;font-size:.88rem;
    background:#f4f6f8;border:1px solid var(--line);color:#2e3a46;
  }
}

/* Hero images set as custom properties so a phone can be served a smaller file.
   Scoped by attribute selector, so pages still using an inline background-image
   are untouched. */
.page-hero[style*="--hero"]{
  background-image:linear-gradient(110deg,rgba(16,23,30,.97),rgba(16,23,30,.77)),var(--hero);
}
@media(max-width:640px){
  .page-hero[style*="--hero-sm"]{
    background-image:linear-gradient(110deg,rgba(16,23,30,.97),rgba(16,23,30,.77)),var(--hero-sm);
  }
}

/* Hero note — the response-time line lifted out of the old "How we work" strip.
   No competitor in this market claims anything about response time, so it earns
   its place above the fold rather than buried in a process section. */
.hero-note{max-width:620px;margin:18px 0 4px;padding:12px 16px;border-left:3px solid var(--gold);
  background:rgba(255,255,255,.06);border-radius:0 8px 8px 0;font-size:.98rem;line-height:1.5}
.hero-note strong{color:var(--gold)}
@media(max-width:640px){.hero-note{font-size:.92rem;padding:10px 13px;margin:14px 0 2px}}



/* ---------------------------------------------------------------------------
   Footer bottom row.
   .footer a is display:block, which stacked the legal links vertically.
   Override to inline so Privacy | Terms | Credit Application sit on one line.
   ------------------------------------------------------------------------- */
.footer-bottom a{display:inline;margin:0}
.footer-bottom .sep{opacity:.45;margin:0 8px;-webkit-user-select:none;user-select:none}
@media(max-width:640px){
  .footer-bottom{flex-direction:column;gap:10px}
  .footer-bottom .sep{margin:0 6px}
}

/* ---------------------------------------------------------------------------
   Inline links in body copy.
   The global rule a{color:inherit;text-decoration:none} was never overridden
   for prose, so every inline link rendered as plain body text. These now match
   the site's existing link language — the .link class is navy with a gold
   accent — rather than introducing a new colour. Brand gold on white is only
   ~2.2:1 contrast and fails WCAG AA, so it is used as the underline rather
   than the text colour.
   Buttons (.btn) and card links (.link) style themselves and are excluded.
   ------------------------------------------------------------------------- */
.content a:not(.btn):not(.link):not(.sub-all),
.legal-content a:not(.btn),
.faq-more a,
.notice a{
  color:var(--navy);
  font-weight:750;
  text-decoration:underline;
  text-decoration-color:var(--gold);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.content a:not(.btn):not(.link):not(.sub-all):hover,
.legal-content a:not(.btn):hover,
.faq-more a:hover,
.notice a:hover{color:#000;text-decoration-color:var(--gold-2)}

/* Dark panels — lighter gold reads well on navy */
.contact-panel a:not(.btn),
.aside-card a:not(.btn){
  color:var(--gold-2);
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.contact-panel a:not(.btn):hover,
.aside-card a:not(.btn):hover{color:#fff}