/* ==========================================================================
   AM Power Solutions — base stylesheet
   ========================================================================== */

:root{
  --ink:#15191d;
  --muted:#57626c;
  --line:#e1e7eb;
  --paper:#ffffff;
  --surface:#f5f8fa;
  --blue-900:#0f5c82;
  --blue-700:#146d98;
  --blue-500:#2c93c4;
  --blue-100:#e7f3f9;
  --focus:#0f5c82;

  --font-display:'Archivo', Arial, sans-serif;
  --font-body:'IBM Plex Sans', Arial, sans-serif;

  --radius:6px;
  --wrap:1180px;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
html, body{ overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:16px;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--blue-900); }
h1,h2,h3,h4{
  font-family:var(--font-display);
  line-height:1.15;
  margin:0 0 0.5em;
  text-wrap:balance;
  color:var(--ink);
}
p{ margin:0 0 1em; max-width:62ch; color:var(--muted); }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:0; top:-48px;
  background:var(--blue-900); color:#fff; padding:12px 18px;
  z-index:100; transition:top .15s ease;
}
.skip-link:focus{ top:0; }

:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  padding:12px 22px;
  border-radius:var(--radius);
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .12s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active{ transform:scale(0.98); }
.btn-lg{ padding:14px 26px; font-size:16px; }
.btn-primary{ background:var(--blue-900); color:#fff; }
.btn-primary:hover{ background:var(--blue-700); }
.btn-ghost{ border-color:var(--blue-900); color:var(--blue-900); background:transparent; }
.btn-ghost:hover{ background:var(--blue-100); }
.btn-on-dark{ background:#fff; color:var(--blue-900); }
.btn-on-dark:hover{ background:var(--blue-100); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-display); font-weight:600; font-size:14.5px;
  color:var(--blue-900); text-decoration:none;
}
.link-arrow::after{ content:"\2192"; transition:transform .15s ease; }
.link-arrow:hover::after{ transform:translateX(3px); }

/* ---------- Header ---------- */
.site-header{
  border-bottom:1px solid var(--line);
  background:#fff;
  position:sticky; top:0; z-index:50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-top:14px; padding-bottom:14px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.brand-mark{ display:block; }
.brand-name{
  font-family:var(--font-display); font-weight:800; font-size:16.5px;
  color:var(--ink); letter-spacing:-0.01em;
}

.main-nav > ul{ display:flex; gap:26px; }
.mobile-cta{ display:none; }
.main-nav a{
  color:var(--ink); text-decoration:none; font-weight:500; font-size:15px;
}
.main-nav a:hover{ color:var(--blue-900); }

/* ---------- Services mega-menu ---------- */
.has-mega{ position:relative; }
.mega-toggle{ display:inline-flex; align-items:center; gap:5px; }
.mega-caret{ transition:transform .18s ease; flex-shrink:0; }
.has-mega.is-open .mega-caret{ transform:rotate(180deg); }

.mega-panel{
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(21,25,29,0.12);
  padding:28px 30px;
  z-index:60;
  width:max-content; max-width:calc(100vw - 48px);
}
.mega-panel[hidden]{ display:none; }
/* The panel sits 14px below the nav item, which leaves a strip of dead space
   the cursor has to cross. Without this bridge the pointer leaves .has-mega
   mid-travel and the menu closes before you reach a link. */
.mega-panel::before{
  content:""; position:absolute;
  top:-16px; left:0; right:0; height:16px;
}
.mega-inner{ display:grid; grid-template-columns:repeat(3,minmax(210px,1fr)); gap:30px; }
.mega-head{
  display:block;
  font-family:var(--font-display); font-weight:700; font-size:14px;
  color:var(--ink); text-decoration:none;
  padding-bottom:9px; margin-bottom:10px;
  border-bottom:2px solid var(--blue-900);
}
.mega-head:hover{ color:var(--blue-900); }
.mega-col ul{ display:grid; gap:2px; }
.mega-col li a{
  display:block; padding:6px 8px; margin-left:-8px;
  font-size:14px; color:var(--muted); text-decoration:none;
  border-radius:4px;
}
.mega-col li a:hover{ background:var(--surface); color:var(--blue-900); }

@media (max-width:900px){
  .mega-panel::before{ display:none; }
  .mega-panel{
    position:static; transform:none; width:auto; max-width:none;
    box-shadow:none; border:0; border-top:1px solid var(--line);
    border-radius:0; padding:14px 0 4px;
  }
  .mega-inner{ grid-template-columns:1fr; gap:20px; }
  .mega-head{ font-size:13px; }
  .mega-col li a{ padding:11px 0; margin-left:0; font-size:15px; }
}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:0; padding:8px; cursor:pointer;
}
.nav-toggle span{ width:24px; height:2px; background:var(--ink); display:block; }

.header-cta{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
.header-phone{
  display:flex; align-items:center; gap:7px;
  color:var(--ink); text-decoration:none; font-weight:600; font-size:15px;
}
.header-phone:hover{ color:var(--blue-900); }

@media (max-width:900px){
  .main-nav > ul{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:8px 24px 16px;
  }
  .main-nav > ul.open{ display:flex; }
  .main-nav li{ border-top:1px solid var(--line); }
  .main-nav a{ display:block; padding:14px 0; }
  /* Higher specificity than .main-nav a, so the caret keeps its gap. */
  .main-nav .mega-toggle{ display:flex; align-items:center; gap:7px; }
  .nav-toggle{ display:flex; }
  .header-phone span{ display:none; }
  .header-cta .btn-primary{ display:none; }
  .header-inner{ flex-wrap:nowrap; }
  .mobile-cta{ display:block; margin-top:10px; }
  .mobile-cta .btn{ width:100%; }
}

/* ---------- Hero ---------- */
.hero{ padding:56px 0 48px; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center;
}
.badge{
  display:inline-block;
  font-family:var(--font-display); font-size:12.5px; font-weight:700;
  letter-spacing:0.02em;
  color:var(--blue-900); background:var(--blue-100);
  padding:7px 14px; border-radius:999px; margin:0 0 18px;
}
.hero h1{
  font-size:clamp(30px, 4vw, 44px);
  font-weight:800;
  letter-spacing:-0.01em;
  max-width:16ch;
}
.hero-lede{ font-size:17px; max-width:48ch; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.hero-media img{ border-radius:var(--radius); width:100%; aspect-ratio:4/3; object-fit:cover; }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:32px; }
  .hero-media{ order:-1; }
}

/* ---------- Trust strip ---------- */
.trust-strip{ background:var(--blue-900); padding:22px 0; }
.trust-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.trust-item{ display:flex; flex-direction:column; gap:2px; color:#fff; }
.trust-item strong{ font-family:var(--font-display); font-size:15px; }
.trust-item span{ font-size:13px; color:#cfe6f2; }
@media (max-width:760px){
  .trust-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- Sections ---------- */
.section{ padding:64px 0; }
.alt-bg{ background:var(--surface); }
.section-head{ max-width:60ch; margin-bottom:36px; }
.section-head h2{ font-size:clamp(24px,3vw,32px); }

/* About */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.why-grid{ display:grid; gap:22px; }
.why-grid li{ display:flex; gap:14px; align-items:flex-start; }
.why-grid svg{ color:var(--blue-900); flex-shrink:0; margin-top:2px; }
.why-grid strong{ display:block; font-family:var(--font-display); font-size:15.5px; margin-bottom:3px; color:var(--ink); }
.why-grid span{ font-size:14.5px; color:var(--muted); }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }

/* Card grids */
.card-grid{ display:grid; gap:22px; }
.card-grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .card-grid-3{ grid-template-columns:1fr; } }

.product-card, .service-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; text-decoration:none; color:inherit;
}
.product-card{ display:block; transition:border-color .15s ease, transform .12s ease; }
.product-card:hover{ border-color:var(--blue-500); transform:translateY(-2px); }
.product-card svg{ color:var(--blue-900); margin-bottom:14px; }
/* Cards use h3 in normal page flow, but h2 where they sit directly under
   the page h1 (the 404 signposts), so both need the same treatment. */
.product-card h2, .product-card h3,
.service-card h2, .service-card h3{ font-size:18px; margin-bottom:8px; }
.product-card p, .service-card p{ font-size:14.5px; margin-bottom:14px; }

.services-section .service-card{ background:#fff; }

.products-note{ margin-top:28px; font-size:15px; }

/* Industries */
.industries-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.industries-grid li{
  background:#fff; padding:20px 18px;
  font-family:var(--font-display); font-weight:600; font-size:15px;
  display:flex; align-items:center;
}
@media (max-width:760px){ .industries-grid{ grid-template-columns:1fr 1fr; } }

/* Work / gallery */
.work-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.work-grid figure{ margin:0; }
.work-grid img{ border-radius:var(--radius); width:100%; aspect-ratio:3/4; object-fit:cover; }
@media (max-width:760px){ .work-grid{ grid-template-columns:1fr; } }

/* Model gallery: product shots with a model caption under each */
.model-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.model-gallery figure{
  margin:0; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 18px 0; text-align:center;
}
.model-gallery img{
  width:100%; max-width:230px; height:auto; margin:0 auto; display:block;
  aspect-ratio:1/1; object-fit:contain;
}
.model-gallery figcaption{
  border-top:1px solid var(--line); margin-top:16px; padding:12px 0;
  font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink);
}
.model-gallery figcaption span{
  display:block; font-family:var(--font-body); font-weight:400;
  font-size:12.5px; color:var(--muted); margin-top:3px;
}
.model-gallery-2{ grid-template-columns:repeat(2,1fr); max-width:640px; margin:0 auto; }
@media (max-width:880px){ .model-gallery{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .model-gallery{ grid-template-columns:1fr; } }

/* CTA band */
.cta-band{ background:var(--ink); padding:56px 0; }
.cta-inner{
  display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;
}
.cta-inner h2{ color:#fff; font-size:clamp(22px,3vw,28px); max-width:20ch; margin-bottom:8px; }
.cta-inner p{ color:#c7ced4; margin-bottom:0; }
.cta-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.cta-phone{ color:#fff; font-family:var(--font-display); font-weight:700; text-decoration:none; font-size:16px; }
.cta-phone:hover{ text-decoration:underline; }

/* ---------- Interior page header ---------- */
.page-head{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:36px 0 44px;
}
.page-head h1{
  font-size:clamp(28px,3.6vw,40px);
  font-weight:800;
  letter-spacing:-0.01em;
  max-width:18ch;
  margin-bottom:14px;
}
.page-lede{ font-size:17px; max-width:56ch; margin-bottom:0; }

.breadcrumb{ margin-bottom:20px; }
.breadcrumb ol{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-size:13.5px; list-style:none; margin:0; padding:0;
}
.breadcrumb li{ color:var(--muted); }
.breadcrumb li + li::before{ content:"/"; margin-right:8px; color:var(--line); }
.breadcrumb a{ color:var(--muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--blue-900); text-decoration:underline; }
.breadcrumb [aria-current="page"]{ color:var(--ink); font-weight:500; }

.main-nav a[aria-current="page"]{ color:var(--blue-900); font-weight:600; }

/* ---------- About: overview ---------- */
.overview-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start; }
.overview-copy h2{ font-size:clamp(23px,2.6vw,29px); }
.overview-media{ margin:0; }
.overview-media img{ border-radius:var(--radius); width:100%; aspect-ratio:4/3; object-fit:cover; }
.overview-media figcaption{ font-size:13.5px; color:var(--muted); margin-top:10px; }
@media (max-width:880px){ .overview-grid{ grid-template-columns:1fr; gap:32px; } }

/* ---------- About: vision & mission ---------- */
.vm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.vm-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 28px;
}
.vm-card h2{ font-size:21px; margin-bottom:12px; }
.vm-vision{ background:var(--blue-900); border-color:var(--blue-900); }
.vm-vision h2{ color:#fff; }
.vm-vision p{ color:#d7ecf6; margin-bottom:0; }

.check-list{ display:grid; gap:12px; }
.check-list li{
  position:relative; padding-left:28px;
  font-size:15px; color:var(--muted);
}
.check-list li::before{
  content:""; position:absolute; left:0; top:7px;
  width:14px; height:8px;
  border-left:2px solid var(--blue-700);
  border-bottom:2px solid var(--blue-700);
  transform:rotate(-45deg);
}
@media (max-width:800px){ .vm-grid{ grid-template-columns:1fr; } }

/* ---------- About: reasons ---------- */
.reasons-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px 30px; }
.reasons-grid li{ border-top:2px solid var(--blue-900); padding-top:16px; }
.reasons-grid h3{ font-size:16.5px; margin-bottom:6px; }
.reasons-grid p{ font-size:14.5px; margin-bottom:0; }
@media (max-width:900px){ .reasons-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .reasons-grid{ grid-template-columns:1fr; } }

/* ---------- About: HSQ ---------- */
.hsq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.hsq-grid h2{ font-size:22px; }
@media (max-width:800px){ .hsq-grid{ grid-template-columns:1fr; gap:32px; } }

/* ---------- Products: hub rows ---------- */
.prod-list{ display:grid; gap:26px; }
.prod-row{
  display:grid; grid-template-columns:1.55fr 1fr; gap:40px; align-items:start;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 30px;
}
/* Grid children default to min-width:auto, which lets wide content (the spec
   tables) push the column past the viewport. Allow them to shrink instead. */
.prod-body{ min-width:0; }

.prod-eyebrow{
  font-family:var(--font-display); font-size:11.5px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--blue-700); margin:0 0 6px;
}
.prod-row h3{ font-size:22px; margin-bottom:10px; }
.prod-row h3 a{ color:var(--ink); text-decoration:none; }
.prod-row h3 a:hover{ color:var(--blue-900); }
.prod-row > .prod-body > p{ font-size:15px; }

.prod-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:20px; }

.prod-visual{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.prod-visual img{
  width:100%; max-width:260px; height:auto;
  border-radius:var(--radius);
}
.prod-visual-icon{
  background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius);
  color:var(--blue-500);
  padding:36px 20px; min-height:220px; align-self:stretch;
}
.visual-note{
  font-size:12.5px; color:var(--muted); margin:14px 0 0; text-align:center; max-width:none;
}
@media (max-width:880px){
  .prod-row{ grid-template-columns:1fr; gap:26px; padding:26px 22px; }
  .prod-visual{ order:-1; }
  .prod-visual-icon{ min-height:0; padding:26px 20px; }
}

/* ---------- Product detail pages ---------- */
.prod-hero{ display:grid; grid-template-columns:1.4fr 1fr; gap:44px; align-items:start; }
.prod-hero > div{ min-width:0; }
.prod-hero-media img{
  width:100%; max-width:300px; height:auto; margin:0 auto; display:block;
  border-radius:var(--radius);
}
@media (max-width:880px){
  .prod-hero{ grid-template-columns:1fr; gap:28px; }
  .prod-hero-media{ order:-1; }
}

.lead-copy p{ font-size:16.5px; max-width:68ch; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.two-col > div{ min-width:0; }
.two-col h3{ font-size:17px; margin-bottom:8px; }
.two-col img{ width:100%; height:auto; }
@media (max-width:800px){ .two-col{ grid-template-columns:1fr; gap:28px; } }

.enquiry-callout{
  background:var(--blue-100);
  border-left:3px solid var(--blue-900);
  border-radius:var(--radius);
  padding:22px 26px;
  margin-top:24px;
}
.enquiry-callout p{ margin:0; max-width:72ch; color:var(--ink); font-size:15.5px; }

/* ---------- Ordered process steps ----------
   Numbered because these genuinely run in sequence; each step depends on the
   one before it. Not decoration. */
.step-list{
  counter-reset:step;
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:26px 40px;
}
.step-list li{
  counter-increment:step;
  position:relative; padding-left:52px;
}
.step-list li::before{
  content:counter(step, decimal-leading-zero);
  position:absolute; left:0; top:-2px;
  font-family:var(--font-mono, var(--font-display)); font-weight:700; font-size:14px;
  color:var(--blue-700);
  border:2px solid var(--blue-100);
  border-radius:50%;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums;
}
.step-list h3{ font-size:16.5px; margin-bottom:5px; }
.step-list p{ font-size:14.5px; margin-bottom:0; }
@media (max-width:760px){ .step-list{ grid-template-columns:1fr; gap:22px; } }

/* ---------- Service scope checklist ---------- */
.scope-block{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 30px;
  max-width:640px;
}
.scope-block h2{ font-size:16px; margin-bottom:16px; }
.scope-block .check-list li{ font-size:15px; }

/* Spec tables use a row header, so style it like a data label not a column head */
.spec-table tbody th[scope="row"]{
  font-family:var(--font-body); font-weight:500; font-size:14px;
  color:var(--ink); text-transform:none; letter-spacing:0;
  border-bottom:1px solid var(--line);
}

/* ---------- Spec tables ---------- */
.spec-table-wrap{
  overflow-x:auto; margin:18px 0 0;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}
.spec-table{
  width:100%; border-collapse:collapse;
  font-size:14px; min-width:340px;
}
.spec-table th, .spec-table td{
  text-align:left; padding:9px 14px 9px 0;
  border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.spec-table thead th{
  font-family:var(--font-display); font-size:11.5px; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase;
  color:var(--muted); border-bottom:2px solid var(--line);
}
.spec-table tbody td:first-child{ color:var(--ink); font-weight:500; }
.spec-table tbody td{ color:var(--muted); }
.spec-table tbody tr:last-child td{ border-bottom:0; }
.spec-source{ font-size:12.5px; color:var(--muted); margin:12px 0 0; }

/* Cards whose media varies (icon vs photo) share one fixed media block so
   every heading in the row starts on the same line. */
.card-grid-aligned .product-card > svg,
.card-grid-aligned .product-card-photo img{
  height:76px; width:auto; max-width:100%;
  object-fit:contain;
  margin:0 0 16px; display:block;
}

/* ---------- Services hub: full index ---------- */
.svc-index{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.svc-group h3{ font-size:16px; margin-bottom:12px; padding-bottom:10px; border-bottom:2px solid var(--blue-900); }
.svc-group h3 a{ color:var(--ink); text-decoration:none; }
.svc-group h3 a:hover{ color:var(--blue-900); }
.svc-sublist{ display:grid; gap:7px; }
.svc-sublist a{ font-size:14.5px; color:var(--muted); text-decoration:none; }
.svc-sublist a:hover{ color:var(--blue-900); text-decoration:underline; }
@media (max-width:820px){ .svc-index{ grid-template-columns:1fr; gap:26px; } }

/* ---------- Related service links ---------- */
.related-links{ display:flex; flex-wrap:wrap; gap:10px 12px; }
.related-links a{
  display:inline-block;
  font-size:14.5px; color:var(--blue-900); text-decoration:none;
  border:1px solid var(--line); border-radius:999px;
  padding:9px 18px; background:#fff;
}
.related-links a:hover{ border-color:var(--blue-500); background:var(--blue-100); }

/* ---------- Downloads ---------- */
.download-list{ display:grid; gap:18px; }
.download-list li{
  display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px;
}
.dl-icon{ color:var(--blue-900); display:flex; align-items:center; }
.dl-body{ min-width:0; }
.dl-body h3{ font-size:17px; margin-bottom:6px; }
.dl-body p{ font-size:14.5px; margin-bottom:6px; }
.dl-meta{
  font-family:var(--font-mono, var(--font-body));
  font-size:12.5px; color:var(--muted); margin-bottom:0 !important;
  font-variant-numeric:tabular-nums;
}
.dl-action .btn{ white-space:nowrap; }
.dl-followup{ margin-top:18px; }
@media (max-width:720px){
  .download-list li{ grid-template-columns:1fr; gap:14px; }
  .dl-action .btn{ width:100%; }
}

/* ---------- FAQ ---------- */
.faq-layout{ display:grid; grid-template-columns:1fr 320px; gap:48px; align-items:start; }
.faq-main{ min-width:0; }
@media (max-width:900px){ .faq-layout{ grid-template-columns:1fr; gap:36px; } }

.faq-group-heading{
  font-size:14px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--muted); font-weight:700;
  margin:40px 0 16px; padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.faq-group-heading:first-child{ margin-top:0; }

.faq-item{
  border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; margin-bottom:12px;
}
.faq-item summary{
  cursor:pointer; padding:18px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  list-style:none;
  min-height:56px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary h3{
  font-size:16.5px; margin:0; flex:1; text-wrap:pretty;
}
.faq-item summary::after{
  content:""; flex-shrink:0;
  width:11px; height:11px;
  border-right:2px solid var(--blue-900);
  border-bottom:2px solid var(--blue-900);
  transform:rotate(45deg); margin-top:-4px;
  transition:transform .18s ease;
}
.faq-item[open] summary::after{ transform:rotate(-135deg); margin-top:2px; }
.faq-item summary:hover{ background:var(--surface); }
.faq-item summary:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; }
.faq-answer{ padding:0 22px 20px; border-top:1px solid var(--line); padding-top:16px; }
.faq-answer p{ font-size:15px; }
.faq-answer p:last-child{ margin-bottom:0; }

.faq-aside{ display:grid; gap:18px; position:sticky; top:96px; }
@media (max-width:900px){ .faq-aside{ position:static; } }
.aside-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 22px;
}
.aside-card h2{ font-size:16.5px; margin-bottom:10px; }
.aside-card p{ font-size:14.5px; }
.aside-phone a{
  font-family:var(--font-display); font-weight:700; font-size:19px;
  color:var(--blue-900); text-decoration:none;
}
.aside-phone a:hover{ text-decoration:underline; }
.aside-links ul{ display:grid; gap:9px; }
.aside-links a{ font-size:14.5px; color:var(--blue-900); text-decoration:none; }
.aside-links a:hover{ text-decoration:underline; }

/* ---------- Contact: detail cards ---------- */
.contact-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.contact-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px;
}
.contact-card h2{ font-size:16.5px; margin-bottom:6px; }
.contact-note{ font-size:13.5px; margin-bottom:14px; }
.contact-line{
  display:block; font-size:14.5px; color:var(--blue-900);
  text-decoration:none; font-weight:500; margin-bottom:6px; word-break:break-word;
}
.contact-line:hover{ text-decoration:underline; }
.contact-card address{ font-style:normal; font-size:14.5px; color:var(--muted); line-height:1.7; }
.hours-list{ display:grid; gap:8px; }
.hours-list li{
  display:flex; justify-content:space-between; gap:12px;
  font-size:14px; color:var(--muted);
  border-bottom:1px solid var(--line); padding-bottom:7px;
}
.hours-list li:last-child{ border-bottom:0; padding-bottom:0; }
.hours-list span:last-child{ color:var(--ink); font-weight:500; white-space:nowrap; }
@media (max-width:980px){ .contact-cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .contact-cards{ grid-template-columns:1fr; } }

/* ---------- Contact: form ---------- */
.form-layout{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:start; }
.form-intro h2{ font-size:clamp(23px,2.6vw,29px); }
.form-response-note{ font-size:14.5px; }
@media (max-width:900px){ .form-layout{ grid-template-columns:1fr; gap:32px; } }

.enquiry-form{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 28px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:620px){ .form-row{ grid-template-columns:1fr; } }

.field{ margin-bottom:18px; display:flex; flex-direction:column; }
.field label{
  font-family:var(--font-display); font-weight:600; font-size:14px;
  color:var(--ink); margin-bottom:6px;
}
.req{ color:#b3261e; }

.field input,
.field select,
.field textarea{
  font-family:var(--font-body);
  /* 16px prevents iOS Safari zooming the page on focus */
  font-size:16px;
  color:var(--ink);
  padding:12px 13px;
  /* 46px clears the 44px minimum touch target */
  min-height:46px;
  border:1px solid #c3ccd3;
  border-radius:var(--radius);
  background:#fff;
  width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:#9aa8b2; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--blue-900);
  box-shadow:0 0 0 3px rgba(15,92,130,0.15);
}
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid{
  border-color:#b3261e;
}
.field input.is-invalid:focus, .field select.is-invalid:focus, .field textarea.is-invalid:focus{
  box-shadow:0 0 0 3px rgba(179,38,30,0.15);
}
.field-hint{ font-size:13px; color:var(--muted); margin:6px 0 0; }
.field-error{ font-size:13px; color:#b3261e; margin:6px 0 0; font-weight:500; }

/* Honeypot: off-screen but still reachable by bots parsing the DOM. */
.hp-field{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.form-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:6px; }
.form-actions .btn:disabled{ opacity:.65; cursor:not-allowed; }
.privacy-note{ font-size:13px; color:var(--muted); margin:0; max-width:34ch; }

.form-status{
  margin:18px 0 0; padding:13px 16px; border-radius:var(--radius);
  font-size:14.5px; font-weight:500; max-width:none;
}
.form-status.is-success{ background:#e6f4ea; color:#12613a; border:1px solid #b7dfc6; }
.form-status.is-error{ background:#fdeceb; color:#8f1d16; border:1px solid #f3c4c0; }
.form-status.is-pending{ background:var(--blue-100); color:var(--blue-900); border:1px solid #bcdcec; }

.recaptcha-note{ font-size:12px; color:var(--muted); margin:18px 0 0; max-width:none; }
.recaptcha-note a{ color:var(--muted); text-decoration:underline; }
.recaptcha-note a:hover{ color:var(--blue-900); }

/* ---------- Contact: map ---------- */
.map-embed{
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; line-height:0;
}
.map-embed iframe{ display:block; width:100%; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--surface); border-top:1px solid var(--line); padding:52px 0 0; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px;
}
.footer-brand p{ font-size:13.5px; margin-top:12px; }
.footer-grid .footer-heading{ font-family:var(--font-display); font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.footer-grid a{ color:var(--ink); text-decoration:none; font-size:14.5px; }
.footer-grid a:hover{ color:var(--blue-900); }
.footer-grid nav ul li{ margin-bottom:10px; }
.footer-contact p, .footer-hours p{ font-size:14.5px; color:var(--muted); margin-bottom:10px; }
/* Longhand only. A `padding` shorthand here would reset the horizontal
   padding this element inherits from .wrap, pushing the text to the edge. */
.footer-bottom{ border-top:1px solid var(--line); padding-top:18px; padding-bottom:18px; }
.footer-bottom p{ font-size:13px; color:var(--muted); margin:0; max-width:none; }
@media (max-width:860px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
}