/* Safety Training Oz — reconstruction stylesheet (matches original design system) */
:root {
  --black: #1d1d1f;
  --teal: #06686e;
  --teal-btn: #0b686e;
  --teal-dark: #054247;
  --orange: #ff8606;
  --ink: #1a1a1a;
  --gray-bg: #f5f5f7;
  --gray-line: #e2e4e4;
  --white: #ffffff;
  --max: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Bai Jamjuree', 'Segoe UI', Arial, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  background: var(--white);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 40px; }
h1, h2, h3, h4 { font-weight: 600; margin: 0; }

/* ---------- Header ---------- */
.site-header {
  background: var(--black);
  position: relative;
  z-index: 1005;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 116px;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 93px; width: auto; flex-shrink: 0; }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 34px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  transition: 0.2s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Nav panel (right slide-in, all breakpoints) ---------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }

nav.primary-nav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 360px;
  max-width: 88vw;
  background: var(--black);
  z-index: 1010;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  padding: 100px 0 40px;
}
nav.primary-nav.open { transform: translateX(0); }

.nav-close {
  position: absolute;
  top: 32px; right: 32px;
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

nav.primary-nav > ul { list-style: none; margin: 0; padding: 0; }
nav.primary-nav > ul > li {
  border-left: 3px solid transparent;
  padding-left: 29px;
  padding-right: 32px;
}
nav.primary-nav > ul > li.current-top,
nav.primary-nav > ul > li.has-dropdown.open {
  border-left-color: var(--orange);
}
nav.primary-nav .top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
nav.primary-nav > ul > li > a,
nav.primary-nav > ul > li > .top-row > a,
nav.primary-nav > ul > li > .top-row > span {
  display: block;
  color: #f2f2f2;
  font-style: italic;
  font-size: 19.6px;
  font-weight: 400;
  text-transform: capitalize;
  padding: 10px 0;
  line-height: 39px;
}
nav.primary-nav > ul > li:hover > a,
nav.primary-nav > ul > li:hover > .top-row > a,
nav.primary-nav > ul > li:hover > .top-row > span,
nav.primary-nav > ul > li.current-top > a,
nav.primary-nav > ul > li.current-top > .top-row > span,
nav.primary-nav > ul > li.has-dropdown.open > .top-row > span {
  color: var(--orange);
}
nav.primary-nav .toggle-icon {
  color: #f2f2f2;
  font-size: 20px;
  font-style: normal;
  padding-right: 4px;
}
nav.primary-nav > ul > li:hover > .top-row .toggle-icon,
nav.primary-nav > ul > li.has-dropdown.open > .top-row .toggle-icon {
  color: var(--orange);
}
nav.primary-nav .dropdown {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
nav.primary-nav li.has-dropdown.open .dropdown { max-height: 500px; }
nav.primary-nav .dropdown li a {
  display: block;
  padding: 7px 0 7px 4px;
  font-size: 15px;
  font-style: italic;
  color: #b7bcbc;
}
nav.primary-nav .dropdown li a:hover,
nav.primary-nav .dropdown li a.current { color: var(--orange); }
nav.primary-nav .dropdown li.dropdown-overview a { font-style: normal; font-weight: 500; color: #d7dada; }

/* Contact Us — styled to match the other plain primary nav items (HOME, WHO WE ARE,
   OUR SERVICES, etc.) rather than as a standalone green pill/button, per the live site.
   Same border-left/padding treatment as a top-level <li>, same link typography as its <a>. */
.nav-cta-row {
  border-left: 3px solid transparent;
  padding-left: 29px;
  padding-right: 32px;
}
.nav-cta {
  display: block;
  background: none;
  color: #f2f2f2;
  font-style: italic;
  font-size: 19.6px;
  font-weight: 400;
  text-transform: capitalize;
  padding: 10px 0;
  line-height: 39px;
  border-radius: 0;
}
.nav-cta:hover { background: none; color: var(--orange); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  background-color: var(--teal);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 100%);
}
.hero .container { position: relative; }

/* Homepage-style big hero */
.hero.home {
  min-height: 800px;
  display: flex;
  align-items: flex-end;
}
.hero.home .container { padding-bottom: 70px; padding-top: 70px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.hero-title-wrap { width: 100%; display: flex; justify-content: flex-end; }
.hero.home h1 {
  font-size: clamp(46px, 6.4vw, 82px);
  font-weight: 700;
  text-align: right;
  line-height: 1.05;
  margin: 0 0 30px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
}
.hero.home p.tagline {
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 500;
  max-width: 820px;
  margin: 0 0 34px;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.hero.home .btn { align-self: center; }

/* Inner-page small hero */
.hero.small {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero.small h1 {
  font-size: clamp(30px, 4.2vw, 48px);
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.hero.small.no-image { background-image: none !important; background-color: var(--teal); }

.btn {
  display: inline-block;
  background: var(--teal-btn);
  color: #fff;
  padding: 12px 38px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 18px;
  border: none;
  cursor: pointer;
}
.btn:hover { background: var(--teal-dark); }
.btn-outline { background: transparent; border: 2px solid #fff; color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,0.15); }

/* ---------- Bands / sections ---------- */
section.band { padding: 60px 0; }
section.band.teal { background: var(--teal); color: #fff; }
section.band.gray { background: var(--gray-bg); }
section.band h2 { font-size: 30px; margin: 0 0 20px; }
section.band.teal h2, section.band.teal h3 { color: #fff; }
section.band p { max-width: 900px; }
section.band.teal p { color: #eaf5f5; }

.content-block { padding: 56px 0; }
.content-block.gray { background: var(--gray-bg); }
.content-block h2 { font-size: 28px; margin: 36px 0 14px; }
.content-block h2:first-child { margin-top: 0; }
.content-block h3 { font-size: 20px; margin: 26px 0 10px; color: var(--teal); }
.content-block p { margin: 0 0 16px; color: #333; }
.content-block ul { margin: 0 0 20px; padding-left: 22px; list-style: none; }
.content-block ul li { margin-bottom: 8px; color: #333; position: relative; padding-left: 22px; }
.content-block ul li::before {
  content: '\2714';
  position: absolute; left: 0; top: 1px;
  color: var(--orange);
  font-size: 13px;
}

/* Prominent section leads (Training, Job Ready Program, Industries intro) — a stronger
   heading than the default .content-block h2, with its supporting sentence rendered as
   plain body text directly underneath rather than run together in one paragraph. */
.training-lead, .jobready-lead, .industries-lead,
.projects-lead, .agriculture-lead, .solarfarming-lead, .transmission-lead, .testimonials-lead {
  font-size: 32px;
  margin: 0 0 14px;
  color: var(--teal);
}
/* Testimonials' lead heading is often two lines (company name wraps) — a touch tighter
   line-height keeps it from looking loose. */
.testimonials-lead { line-height: 1.15; }

/* Centred section headings ("Our projects", "Our projects — Downer") used above a
   project-card grid. Additive only — content-block h2's default (left-aligned) styling
   for every other page is unaffected. */
.section-heading-center { text-align: center; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.two-col img { border-radius: 2px; width: 100%; height: auto; max-height: 480px; object-fit: cover; align-self: start; }
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
}

.img-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin: 30px 0 10px;
}
.img-row figure { margin: 0; background: var(--gray-bg); border-radius: 2px; overflow: hidden; }
.img-row img { width: 100%; height: 240px; object-fit: cover; }
.img-row figcaption { padding: 12px 14px; font-size: 13.5px; color: #555; }

/* Composite designed graphics (brochures/flyers/ads that contain their own text) — must
   always show the complete source artwork, never cropped or stretched. Scoped to this
   class only so .img-row/.gallery-row's ordinary cropped-thumbnail treatment elsewhere is
   unaffected. */
.composite-graphic { margin: 30px 0; }
.composite-graphic img {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 2px;
}

/* Industry / certification cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin-top: 10px;
}
/* Homepage Industries — two fixed equal-width columns per row (Oil & Gas / Transmission
   Power, then Agriculture & Farming / Project Management, with the Key Clients logos
   sandwiched between the two rows), collapsing to one column on mobile. */
.industry-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 10px 0 36px;
}
@media (max-width: 700px) {
  .industry-row { grid-template-columns: 1fr; }
}
.card { background: var(--white); }
.card img { width: 100%; height: 200px; object-fit: cover; border-radius: 2px; }
.card .card-body { padding: 18px 20px 0 0; }
.card h3 { margin: 0 0 12px; font-size: 24px; }
.card p { color: #444; font-size: 15px; margin: 0 0 10px; }
.card .key-clients { font-size: 14px; color: #666; font-style: italic; }

.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin: 24px 0 44px;
}
.cert-card {
  background: var(--gray-bg);
  border-radius: 2px;
  overflow: hidden;
  text-align: center;
}
.cert-card img { width: 100%; height: 130px; object-fit: cover; }
.cert-card .cert-label { padding: 18px 14px; font-size: 15px; font-weight: 500; }

/* Client / membership logo rows */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  align-items: center;
  margin: 24px 0 10px;
}
.logo-grid .logo-box {
  border: 1px solid var(--gray-line);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
}
.logo-grid .logo-box img { max-height: 90px; width: auto; max-width: 100%; }

.membership-list { margin: 24px 0 10px; }
/* Centred/balanced membership block — reusable wrapper for pages outside Who We Are
   (Projects, Agriculture, Solar Farming, Transmission, Testimonials, Contact). Purely
   additive: .membership-list/.membership-row defaults above are untouched, so any
   existing unwrapped usage is unaffected. */
.membership-centered { text-align: left; }
.membership-centered .membership-list { max-width: 760px; margin: 0 auto; }
.membership-centered .membership-row { grid-template-columns: 190px 1fr; }
.membership-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--gray-line);
}
.membership-row:last-child { border-bottom: none; }
.membership-row img { max-height: 70px; width: auto; }
.membership-row .m-title { font-weight: 600; font-size: 16px; margin: 0 0 4px; }
.membership-row .m-sub { font-size: 13.5px; color: #777; }

/* CTA band */
.cta-band {
  background: var(--teal);
  color: #fff;
  padding: 54px 0;
  text-align: center;
}
.cta-band h2 { margin: 0 0 10px; font-size: 26px; }
.cta-band p { margin: 0 0 24px; color: #eaf5f5; }
.cta-band.photo {
  background-size: cover;
  background-position: center;
  position: relative;
}
.cta-band.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  /* A subtle neutral-dark overlay for white-text readability only — the previous
     72%-opacity teal wash effectively recoloured the whole photo and hid its real
     colours. This keeps the photograph natural while still reading clearly. */
  background: linear-gradient(rgba(0,0,0,0.38), rgba(0,0,0,0.5));
}
.cta-band.photo .container { position: relative; z-index: 1; }

/* Small inline photo-gallery rows (Our Services / Local Government) */
.gallery-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  margin: 18px 0 30px;
}
.gallery-row img { width: 100%; height: 130px; object-fit: cover; border-radius: 2px; }
/* Small hazard-type icon graphics (Our Services, above Emergency Response Training) —
   contain rather than cover so the icon artwork isn't cropped/stretched like a photo. */
.gallery-row.icon-row {
  grid-template-columns: repeat(auto-fit, minmax(90px, 120px));
  gap: 20px;
  margin: 24px 0 30px;
}
.gallery-row.icon-row img { height: 100px; object-fit: contain; border-radius: 0; background: transparent; }

/* Responsive video embed (YouTube) */
.video-embed { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: 2px; overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Testimonial cards */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin: 24px 0 10px;
}
.testi-card { background: var(--white); padding: 24px; border-radius: 2px; border: 1px solid var(--gray-line); }
.testi-card h3 { margin: 0 0 12px; font-size: 18px; color: var(--teal); }
.testi-quote { font-style: italic; color: #333; font-size: 14.5px; margin: 0 0 14px; }
.testi-signer { font-size: 13px; color: #777; margin: 8px 0 0; }
.testi-link { margin: 12px 0 0; font-size: 13.5px; }
.testi-letter { max-width: 760px; }
.testi-letter p { margin: 0 0 14px; line-height: 1.6; }
.testi-letter .testi-signer { margin-top: 18px; }
.testi-letter ul { margin: 0 0 16px; padding-left: 22px; list-style: none; }
.testi-letter ul li { margin-bottom: 6px; color: #333; position: relative; padding-left: 20px; line-height: 1.5; }
.testi-letter ul li::before { content: '\2714'; position: absolute; left: 0; top: 2px; color: var(--orange); font-size: 12px; }

/* Reference-letter letterhead / signature structure (sender & address blocks, company
   identity blocks, bottom signature/contact blocks, logos) — restores real letter
   formatting instead of flattening everything into run-on paragraphs. */
.testi-sender-block, .testi-letterhead, .testi-sig-block {
  font-size: 14.5px;
  line-height: 1.7;
  color: #333;
  margin: 0 0 20px;
}
.testi-sig-block { margin: 22px 0 20px; }
.testi-letterhead { text-align: center; margin-bottom: 26px; }
.testi-letterhead .testi-letterhead-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  text-align: left;
  max-width: 640px;
  margin: 10px auto 0;
  font-size: 13.5px;
  color: #444;
}
.testi-company-name { font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.testi-logo { display: block; max-height: 60px; width: auto; margin: 0 0 18px; }
.testi-logo.center { margin-left: auto; margin-right: auto; }
.testi-photo { display: block; max-width: 340px; width: 100%; height: auto; border-radius: 2px; margin: 22px 0 0; }

/* TransGrid — two letters side-by-side on desktop, stacked on mobile. */
.testi-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.testi-two-col .testi-sig-block { border-top: 1px solid var(--gray-line); padding-top: 14px; }
@media (max-width: 860px) {
  .testi-two-col { grid-template-columns: 1fr; gap: 40px; }
  .testi-letterhead .testi-letterhead-cols { grid-template-columns: 1fr; text-align: center; }
}

/* Testimonials overview — six plain client-name links through to each reference-letter
   sub-page (matches the live page's compact icon+name link layout, rather than showing
   the full letters inline). */
.testi-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px 24px;
  margin: 30px 0 10px;
}
.testi-link-card { display: block; text-decoration: none; color: inherit; }
.testi-link-icon {
  display: block;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--orange);
  margin-bottom: 12px;
}
.testi-link-name { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.testi-link-card:hover .testi-link-name { color: var(--teal); }

/* Project / named-block grids (Industries, Transmission, Solar Farming, Testimonials) */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin: 24px 0 10px;
}
.proj-card { background: var(--white); }
.proj-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 2px; }
.proj-card-body { padding: 16px 4px 0 0; }
.proj-card-body h3 { margin: 0 0 8px; font-size: 20px; color: var(--teal); }
.proj-card-body p { margin: 0 0 8px; font-size: 14.5px; color: #444; }

/* Homepage "Safety on the job!" full-bleed photo carousel */
.carousel { position: relative; height: 480px; overflow: hidden; border-radius: 2px; }
.car-track { position: relative; width: 100%; height: 100%; }
.car-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.car-slide.active { opacity: 1; }
.car-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0) 55%);
}
.car-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 32px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  z-index: 1;
}
.car-slide .car-cta {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  white-space: nowrap;
}
.car-slide .car-caption { padding-bottom: 70px; text-align: center; }
.small-rotator .carousel { height: 480px; max-height: 480px; }
.council-logo-row { margin: 28px 0; }
.proj-card.no-image .proj-card-body { padding: 16px 4px; }
.proj-card.no-image { background: var(--white); border: 1px solid #e5e5e5; border-radius: 2px; }

/* Solar Farming — Lightsource bp: a single wide aerial photo, not a square card thumbnail.
   Natural aspect ratio, no forced height/crop, so it doesn't look stretched or distorted. */
.wide-photo-block { margin: 24px 0 10px; }
.wide-photo-block img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  border-radius: 2px;
  background: #eef0f0;
}
.wide-photo-block .proj-card-body { padding: 16px 4px 0; }
.car-dots {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.car-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: rgba(255,255,255,0.35);
  padding: 0;
  cursor: pointer;
}
.car-dot.active { background: #fff; }
@media (max-width: 700px) {
  .carousel { height: 340px; }
  .car-caption { font-size: 16px; padding: 18px 20px; }
}

/* Homepage "Safety on the job!" single-slide horizontal-sliding carousel. Scoped strictly
   under the extra "carousel--slide" modifier class (added only to the homepage instance),
   so the Agriculture/Transmission cross-fade rotators above are completely unaffected. */
.carousel--slide .car-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s ease;
}
.carousel--slide .car-slide {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  height: 100%;
  opacity: 1;
  transition: none;
}
.carousel--slide .car-caption { text-align: center; }
.car-heading {
  display: block;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
}
.car-cap-text { display: block; font-size: 18px; font-weight: 500; }
@media (max-width: 700px) {
  .car-heading { font-size: 20px; }
  .car-cap-text { font-size: 15px; }
  .carousel--slide .car-caption { padding-bottom: 96px; }
}

/* Homepage "Safety on the job!" — six static sequential blocks (no carousel/rotator
   behaviour), one per live-site slide, in the live site's real order. Superseded by the
   single-slide carousel above (render_safety_blocks() is no longer called), left in place
   as unused/dead CSS since removing it isn't necessary for this fix. */
.safety-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin: 10px 0;
}
.safety-block { background: var(--white); border: 1px solid #e5e5e5; border-radius: 2px; overflow: hidden; }
.safety-block img { width: 100%; height: 200px; object-fit: cover; display: block; }
.safety-block-body { padding: 18px 20px 22px; }
.safety-block-body h3 { margin: 0 0 8px; font-size: 18px; color: var(--teal); }
.safety-block-body p { margin: 0 0 14px; font-size: 14.5px; color: #444; }
.safety-block-body .safety-cta { display: inline-block; }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--teal); color: #fff; padding: 54px 0 26px; }
footer.site-footer .foot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 32px;
  align-items: start;
  margin-bottom: 30px;
}
footer.site-footer h4 { font-size: 17px; margin: 0 0 14px; font-weight: 600; }
footer.site-footer .foot-item { display: flex; align-items: center; gap: 10px; font-size: 15px; }
footer.site-footer .foot-icon { color: var(--orange); }
footer.site-footer .socials { display: flex; gap: 12px; justify-self: end; }
footer.site-footer .socials a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
footer.site-footer .socials a:hover { background: rgba(255,255,255,0.28); }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 20px;
  font-size: 13px;
  text-align: center;
  color: #d6ecec;
}
@media (max-width: 700px) {
  footer.site-footer .foot-grid { grid-template-columns: 1fr; }
  footer.site-footer .socials { justify-self: start; }
}

/* ---------- Contact form ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
.contact-info h3 { color: var(--teal); margin: 26px 0 8px; font-size: 17px; }
.contact-info h3:first-child { margin-top: 0; }
.contact-info p { margin: 0; color: #333; }
/* A clearly-visible pale tinted panel behind the enquiry form, distinct from the page's
   white background (the previous near-white --gray-bg blended into it). */
.contact-form-box { background: #f7eeee; padding: 32px; border-radius: 4px; border: 1px solid #ecdcdc; }
.contact-form-box h3 { margin: 0 0 22px; font-size: 26px; }
form.enquiry-form { display: grid; gap: 14px; }
form.enquiry-form input, form.enquiry-form select, form.enquiry-form textarea {
  padding: 12px 14px;
  border: 1px solid #c9bcbc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14.5px;
  background: #fff;
}
form.enquiry-form textarea { min-height: 120px; resize: vertical; }
form.enquiry-form button { justify-self: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.form-success {
  margin-top: 18px;
  padding: 18px 20px;
  background: var(--teal);
  color: #fff;
  border-radius: 2px;
  font-weight: 500;
}
.form-success.hidden { display: none; }

/* ---------- Homepage: industry "supporting" subheadings ----------
   Scoped to .card-body (only used by the homepage industry cards) so this cannot affect
   any other page. The card's own name is always the first child (rendered directly by
   industry_card()); any later <h3> comes from parse_blocks() picking up a line like "We
   have provided health and safety support including:" as a heading — visually that's
   supporting text under the industry name, not a peer heading, so it's styled smaller. */
.card-body h3:not(:first-child) {
  font-size: 15px;
  font-weight: 600;
  color: var(--teal);
  margin: 16px 0 8px;
}

/* ---------- Who We Are: Education and Qualifications (teal, 3-column) ---------- */
.wwa-edu { background: var(--teal); color: #fff; padding: 60px 0; }
.wwa-edu h2 { color: #fff; text-align: center; font-size: 30px; margin: 0 0 40px; }
.wwa-edu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  align-items: start;
}
.wwa-icon {
  width: 62px;
  height: 62px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.wwa-col-title { font-size: 21px; font-weight: 700; margin: 0 0 12px; color: #fff; }
.wwa-col h3 { color: #fff; font-size: 16px; margin: 22px 0 8px; }
.wwa-col p { color: #eaf5f5; font-size: 14px; }
.wwa-col ul { margin: 0 0 14px; padding-left: 20px; list-style: none; }
.wwa-col ul li {
  color: #eaf5f5;
  font-size: 13.5px;
  margin-bottom: 7px;
  position: relative;
  padding-left: 20px;
}
.wwa-col ul li::before {
  content: '\2714';
  position: absolute; left: 0; top: 0;
  color: var(--orange);
  font-size: 11px;
}
.wwa-hse-graphic {
  width: 100%;
  max-width: 260px;
  height: auto;
  object-fit: contain;
  margin-top: 18px;
  border-radius: 2px;
  background: #fff;
  padding: 6px;
}
.wwa-accreditation {
  text-align: center;
  font-size: 13.5px;
  color: #cfe9ea;
  font-style: italic;
  max-width: 760px;
  margin: 44px auto 0;
}
@media (max-width: 900px) {
  .wwa-edu-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Who We Are: Why choose us (rotating photo + checklist) ---------- */
.wwa-why { align-items: center; }
.wwa-why-rotator .carousel { height: 360px; }
@media (max-width: 900px) {
  .wwa-why-rotator .carousel { height: 300px; }
}

/* ---------- Who We Are: membership — centred/balanced, scoped to this page only ---------- */
.wwa-membership .membership-list { max-width: 720px; margin: 0 auto; }
.wwa-membership .membership-row { grid-template-columns: 170px 1fr; }

/* ---------- Personal Profile: structured contact block ---------- */
.pp-eyebrow {
  color: var(--teal);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
}
.pp-name { font-size: 34px; margin: 0 0 22px; }
.pp-rows { display: grid; gap: 14px; }
.pp-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-line);
}
.pp-label { font-weight: 600; color: var(--teal); font-size: 14px; }
.pp-value { color: #333; font-size: 14.5px; }
.pp-value a { text-decoration: underline; }
@media (max-width: 600px) {
  .pp-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Personal Profile: References — 4 distinct entries, 2x2 on desktop ---------- */
.pp-refs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 48px;
  margin-top: 10px;
}
.pp-ref-name { font-weight: 700; color: var(--teal); font-size: 16px; margin-bottom: 4px; }
.pp-ref-line { color: #444; font-size: 14px; }
@media (max-width: 640px) {
  .pp-refs-grid { grid-template-columns: 1fr; }
}

/* ---------- Homepage carousel: clearer separation between heading / caption / button ---------- */
.car-slide .car-caption { padding-bottom: 92px; }
.car-slide .car-cta { bottom: 18px; }
.car-heading { margin-bottom: 10px; }
@media (max-width: 700px) {
  .carousel--slide .car-caption { padding-bottom: 118px; }
  .carousel--slide .car-slide .car-cta { bottom: 14px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .site-header .container { height: 84px; }
  .brand img { height: 60px; }
  .hero.home { min-height: 560px; }
  .hero.home h1 { text-align: left; }
  .container { padding: 0 22px; }
}