/* ============================================================
   Mandurah Trade Hire, machine and suburb pages
   Layers on styles.css (tokens, header, footer, buttons, faq,
   breadcrumb, areas, related cards, cta band).
   ============================================================ */

.mhero{position:relative;overflow:hidden;
  padding:clamp(40px,5vw,72px) 0 clamp(44px,5vw,76px);
  background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 82%)}
.mhero-in{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,60px);align-items:center}
.mhero h1{font-size:clamp(30px,4.6vw,52px);letter-spacing:-.034em;line-height:1.08}
.mhero-copy>p{margin-top:18px;font-size:clamp(16px,1.6vw,18.2px);color:var(--tx-2);max-width:54ch}
.mhero .hero-btns{margin-top:26px}
.mhero-text .mhero-copy{max-width:760px}
.bhero-ticks{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:26px;
  font-size:14.2px;font-weight:600;color:var(--tx-2)}
.bhero-ticks li{display:flex;align-items:center;gap:8px}
.bhero-ticks .ic{font-size:17px;color:var(--cyan)}

/* machine picture frame, the same treatment as the fleet cards */
.mart{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);
  background:radial-gradient(70% 80% at 50% 22%,rgba(48,168,228,.17),transparent 62%),
    linear-gradient(160deg,var(--panel-2),var(--bg-2))}
.mart img{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px);
  object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.42))}
.mart-photo img{inset:0;width:100%;height:100%;filter:none}
.mart-badge{position:absolute;z-index:2;top:14px;right:14px;padding:7px 13px;border-radius:999px;
  font-size:12.2px;font-weight:800;background:rgba(10,16,26,.82);
  border:1px solid var(--line-2);color:var(--tx-2)}

.mhero+.sec{padding-top:clamp(36px,4vw,56px)}
.mfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;
  margin-bottom:clamp(34px,4vw,54px)}
.mfacts li{display:flex;gap:14px;align-items:center;padding:16px 18px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r)}
.mfacts .ic{font-size:24px;color:var(--cyan);flex:none}
.mfacts b{display:block;font-size:17px;font-weight:800}
.mfacts span{display:block;font-size:13px;color:var(--tx-3);font-weight:600;margin-top:2px}

.mtwo{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4.6vw,64px);align-items:start}
.mtwo h2,.mh3{font-size:clamp(21px,2.4vw,27px);letter-spacing:-.025em}
.svc-page-copy h2{margin-bottom:16px}
.mtwo .incl-one{grid-template-columns:1fr;margin-top:18px}
.mh3{margin:34px 0 0}
.mtwo .mh3{margin-top:0}

.mnotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mnote{padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.mnote h3{font-size:17px}
.mnote p{margin-top:10px;font-size:14.8px;color:var(--tx-2);line-height:1.66}

.mspecs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mspecs div{display:flex;justify-content:space-between;gap:14px;padding:13px 17px;
  font-size:14.4px;border-bottom:1px solid var(--line)}
.mspecs dt{color:var(--tx-3)}
.mspecs dd{margin:0;font-weight:700;text-align:right}
.mspec-env{margin:28px 0 0;text-align:center;padding:20px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line)}
.mspec-env img{width:100%;max-width:400px;margin:0 auto;display:block}
.mspec-env figcaption{margin-top:12px;font-size:13px;color:var(--tx-3)}
.mspec-src{margin-top:22px;font-size:13px;color:var(--tx-3)}
.mspec-src a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.mpending{display:flex;gap:16px;align-items:flex-start;padding:24px 26px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line)}
.mpending .ic{font-size:24px;color:var(--cyan);flex:none;margin-top:2px}
.mpending .mh3{margin:0}
.mpending p{margin-top:10px;font-size:15px;color:var(--tx-2);line-height:1.66;max-width:70ch}

.areas a{color:inherit}
.areas li:has(a){padding:0}
.areas li a{display:block;padding:11px 20px}

/* suburb page machine cards */
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.mcard:hover{transform:translateY(-6px);border-color:rgba(48,168,228,.55);box-shadow:var(--shadow)}
.mcard-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:radial-gradient(70% 80% at 50% 22%,rgba(48,168,228,.17),transparent 62%),
    linear-gradient(160deg,var(--panel-2),var(--bg-2))}
.mcard-img img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);
  object-fit:contain;filter:drop-shadow(0 16px 24px rgba(0,0,0,.4))}
.mcard-photo img{inset:0;width:100%;height:100%;filter:none}
.mcard-body{display:flex;flex-direction:column;gap:5px;padding:20px 22px 24px}
.mcard-body i{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cyan)}
.mcard-body b{font-size:18px;font-weight:800}
.mcard-body span{font-size:14px;color:var(--tx-2)}

.related{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

@media (max-width:900px){
  .mhero-in,.mtwo{grid-template-columns:1fr}
  .mnotes{grid-template-columns:1fr}
  .mgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .mgrid{grid-template-columns:1fr}
  .mhero .hero-btns .btn{width:100%}
}