/*
Theme Name: DRM 2025
Theme URI: https://dubborepairs.com.au
Author: Dubbo Repairs & Maintenance
Author URI: https://dubborepairs.com.au
Description: Custom theme for Dubbo Repairs & Maintenance - commercial contractor positioning.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: drm-2025
*/

/* ===========================
   FONTS - self-hosted
   ===========================
   Inter variable (400-900), served from this theme instead of Google Fonts. Removes two
   third-party connections (fonts.googleapis.com + fonts.gstatic.com) from the critical path
   and replaces six static weight files with one variable file. Inter is SIL Open Font
   Licence 1.1. latin-ext only downloads if the page actually contains a character in its
   unicode-range, so English pages fetch just the 47 KB latin file. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext-var.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================
   RESET & BASE
=========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --yellow:    #F5C800;
  --yellow-dk: #D4A900;
  --black:     #111111;
  --dark:      #1A1A1A;
  --dark-2:    #222222;
  --mid:       #444444;
  --muted:     #777777;
  --border:    #E0E0E0;
  --light:     #F5F5F5;
  --white:     #FFFFFF;

  /* Secondary/hint text. Custom properties inherit, so a single token can resolve to a
     dark value on light surfaces and a light value on dark ones - see the override block
     below. Both sides clear WCAG AA 4.5:1: #6A6A6A on #FFF is 5.74:1 and on #F5F5F5 is
     5.30:1; #9A9A9A on #111 is 6.71:1 and on #0D0D0D is 6.91:1. The old #666/#777/#888
     failed on one side or the other depending on where they landed. */
  --text-dim:  #6A6A6A;

  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-head: 'Inter', 'Segoe UI', Arial, sans-serif;

  --max-w: 1160px;
  --section-pad: 80px;
  --radius: 4px;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Prose links must be identifiable without relying on colour alone. Buttons, navigation,
   cards and other component links retain their own visual treatment. */
#main p a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

/* ===========================
   TYPOGRAPHY
=========================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  color: var(--black);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
h4 { font-size: 1.1rem; }

p { margin-bottom: 1rem; color: var(--mid); }
p:last-child { margin-bottom: 0; }

/* ===========================
   LAYOUT
=========================== */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: var(--section-pad) 0; }
.section--dark { background: var(--dark); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark p { color: #AAAAAA; }
.section--black { background: var(--black); }
.section--light { background: var(--light); }
.section--yellow { background: var(--yellow); }
.section--yellow h2, .section--yellow h3, .section--yellow p { color: var(--black); }

/* ===========================
   BUTTONS
=========================== */
button.btn { font-family: inherit; font-size: inherit; appearance: none; -webkit-appearance: none; }

.btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.18s ease;
  border: 2px solid transparent;
  white-space: nowrap;
}

.btn--primary {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--yellow);
}
.btn--primary:hover { background: var(--yellow-dk); border-color: var(--yellow-dk); }

.btn--outline {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn--outline:hover { background: var(--white); color: var(--black); }

.btn--outline-dark {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
}
.btn--outline-dark:hover { background: var(--black); color: var(--white); }

.btn--ghost {
  background: transparent;
  color: var(--yellow);
  border-color: var(--yellow);
}
.btn--ghost:hover { background: var(--yellow); color: var(--black); }

/* ===========================
   SECTION LABELS
=========================== */
.section-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 12px;
}
.section--dark .section-label,
.section--black .section-label { color: var(--yellow); }
.section--yellow .section-label { color: var(--dark); }
.section--light .section-label { color: var(--dark); }

/* ===========================
   HEADER / NAV
=========================== */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--black);
  border-bottom: 3px solid var(--yellow);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

/* Brand lockup: DRM monogram + rule + wordmark. Mark is an image, wordmark is
   live text so it stays crisp at any size and costs no extra bytes.

   The HEADER shows the monogram alone. The primary nav needs ~827px of the
   1160px container, which leaves ~168px - less than the ~199px the wordmark
   needs. Because the container is capped, that slack does NOT grow on wider
   screens, so the wordmark can never fit here. It lives in the footer, which
   has room. Do not re-enable it in the header without shortening the nav. */
.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

/* Monogram - horizontal mark, 3.08:1 */
.site-logo__img {
  display: block;
  height: 36px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.site-logo__img--footer { height: 46px; }

#site-header .site-logo__rule,
#site-header .site-logo__text { display: none; }

.site-logo__rule {
  width: 1px;
  height: 34px;
  background: #4A4A4A;
  flex-shrink: 0;
}
.site-logo--footer .site-logo__rule { height: 40px; }

.site-logo__text {
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-logo__name {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.site-logo__sub {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--yellow);
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-logo--footer .site-logo__name { font-size: 0.86rem; }
.site-logo--footer .site-logo__sub  { font-size: 0.95rem; }

@media (max-width: 420px) {
  .site-logo__img { height: 34px; }
  .site-logo--footer .site-logo__rule { display: none; }
}

/* Nav */
#primary-nav,
#primary-nav .primary-menu { display: flex; align-items: center; gap: 4px; }

#primary-nav a {
  font-size: 0.82rem;
  font-weight: 600;
  color: #CCCCCC;
  padding: 8px 11px;
  border-radius: var(--radius);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Never let a label break onto a second line. If the bar runs out of room the
     hamburger breakpoint should take over - a wrapping nav item is the symptom
     of a layout that is already broken. */
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
#primary-nav a:hover,
#primary-nav a.active { color: var(--white); background: rgba(255,255,255,0.06); }

.nav-cta {
  background: var(--yellow) !important;
  color: var(--black) !important;
  margin-left: 8px;
}
.nav-cta:hover { background: var(--yellow-dk) !important; }

/* Dropdown */
.nav-item { position: relative; }
.nav-item > a { display: flex; align-items: center; gap: 4px; }
.nav-item > a::after { content: '▾'; font-size: 0.7rem; }

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--dark-2);
  border: 1px solid #333;
  border-top: 3px solid var(--yellow);
  border-radius: 0 0 var(--radius) var(--radius);
  min-width: 240px;
  padding: 8px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  /* Bridge the 3px bottom border so hover doesn't break */
  margin-top: 0;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown { display: block; }
.dropdown a {
  display: block;
  padding: 10px 18px !important;
  font-size: 0.82rem !important;
  border-radius: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.dropdown a:hover { background: rgba(255,255,255,0.06) !important; }

/* Hamburger */
#nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--yellow);
  color: var(--yellow);
  padding: 6px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1.1rem;
}

/* ===========================
   HERO
=========================== */
#hero {
  background: var(--black);
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}

#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.015) 0px,
    rgba(255,255,255,0.015) 1px,
    transparent 1px,
    transparent 40px
  );
}

.hero-inner { position: relative; z-index: 1; max-width: 820px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245,200,0,0.12);
  border: 1px solid rgba(245,200,0,0.3);
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 28px;
}
.hero-badge span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--yellow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-badge__dot {
  width: 6px; height: 6px;
  background: var(--yellow);
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

#hero h1 { color: var(--white); margin-bottom: 24px; }
#hero h1 span { color: var(--yellow); }

.hero-sub {
  font-size: 1.1rem;
  color: #AAAAAA;
  max-width: 620px;
  margin-bottom: 40px;
  line-height: 1.7;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid #2A2A2A;
  padding-top: 32px;
}
.hero-trust__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 28px;
  margin-right: 28px;
  border-right: 1px solid #2A2A2A;
  padding-top: 16px;
}
.hero-trust__item:last-child { border-right: none; }
.hero-trust__icon {
  color: var(--yellow);
  font-size: 1rem;
  flex-shrink: 0;
}
.hero-trust__text {
  font-size: 0.78rem;
  color: #888;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* ===========================
   CLIENTS STRIP
=========================== */
#clients-strip {
  background: var(--yellow);
  padding: 0;
}
.clients-strip-inner {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}
.clients-strip__label {
  background: var(--black);
  color: var(--yellow);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.clients-strip__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.clients-strip__item {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--black);
  padding: 16px 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-left: 1px solid rgba(0,0,0,0.15);
}

/* ===========================
   WHO WE WORK WITH
=========================== */
.client-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }

.client-card {
  background: var(--white);
  padding: 36px 28px;
  transition: background 0.18s;
}
.client-card:hover { background: var(--light); }

.client-card__icon {
  width: 48px; height: 48px;
  background: var(--yellow);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.client-card h3 { margin-bottom: 10px; font-size: 1rem; }
.client-card p { font-size: 0.875rem; line-height: 1.6; }
.client-card__link {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 2px;
}

/* ===========================
   SERVICES
=========================== */
.section-header { margin-bottom: 48px; }
.section-header h2 { margin-bottom: 12px; }
.section-header p { font-size: 1rem; max-width: 600px; }

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }

.service-card {
  background: var(--dark-2);
  border: 1px solid #2D2D2D;
  border-radius: var(--radius);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.18s, transform 0.18s;
}
.service-card:hover { border-color: var(--yellow); transform: translateY(-2px); }
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.service-card:hover::before { transform: scaleX(1); }

.service-card__num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--yellow);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.service-card h3 { color: var(--white); margin-bottom: 12px; font-size: 1.05rem; }
.service-card p { font-size: 0.875rem; color: #999; line-height: 1.65; }
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--yellow);
}
.service-card__link::after { content: '→'; transition: transform 0.15s; }
.service-card:hover .service-card__link::after { transform: translateX(4px); }

/* ===========================
   PROCESS
=========================== */
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; position: relative; }

.process-step {
  padding: 40px 32px;
  border-right: 1px solid #2A2A2A;
  position: relative;
}
.process-step:last-child { border-right: none; }

.process-step__num {
  font-size: 3rem;
  font-weight: 900;
  color: var(--yellow);
  opacity: 0.5;
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.process-step__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 12px;
}
.process-step h3 { color: var(--white); font-size: 1rem; margin-bottom: 10px; }
.process-step p { font-size: 0.85rem; color: #888; line-height: 1.65; }

/* ===========================
   WHY CHOOSE US
=========================== */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }

.why-item { display: flex; gap: 18px; }
.why-item__icon {
  width: 42px; height: 42px;
  background: var(--yellow);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.why-item__body h3 { font-size: 1rem; margin-bottom: 8px; }
.why-item__body p { font-size: 0.875rem; }

/* ===========================
   CAPABILITIES
=========================== */
.capabilities-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--border);
}
.capability-item {
  background: var(--white);
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.capability-item__dot {
  width: 8px; height: 8px;
  background: var(--yellow);
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
}
.capability-item__body { line-height: 1.4; }
.capability-item__title { font-weight: 700; font-size: 0.9rem; color: var(--black); }
.capability-item__sub { font-size: 0.8rem; color: var(--text-dim); }

/* ===========================
   CTA BANNER
=========================== */
#cta-banner {
  background: var(--yellow);
  padding: 64px 0;
}
.cta-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-banner-inner h2 { color: var(--black); margin-bottom: 8px; }
.cta-banner-inner p { color: #444; max-width: 540px; }
.cta-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* ===========================
   EMERGENCY STRIP
=========================== */
.emergency-strip {
  background: var(--black);
  border-top: 3px solid #CC0000;
  padding: 14px 0;
}
.emergency-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.emergency-strip__label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.emergency-strip__icon {
  background: #CC0000;
  color: white;
  width: 28px; height: 28px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.emergency-strip__text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.03em;
}
.emergency-strip__phone {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: 0.04em;
}

/* ===========================
   CONTACT SECTION
=========================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}

.contact-info h2 { color: var(--white); margin-bottom: 16px; }
.contact-info p { color: #AAA; margin-bottom: 32px; }

.contact-details { display: flex; flex-direction: column; gap: 20px; }
.contact-detail {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.contact-detail__icon {
  width: 36px; height: 36px;
  background: var(--yellow);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.contact-detail__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.contact-detail__value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
}
.contact-detail__value a { color: var(--white); }
.contact-detail__value a:hover { color: var(--yellow); }

/* Contact form */
.contact-form { display: flex; flex-direction: column; gap: 16px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}
.form-group input,
.form-group select,
.form-group textarea {
  background: #1E1E1E;
  border: 1px solid #333;
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--white);
  font-size: 0.9rem;
  font-family: var(--font-body);
  transition: border-color 0.15s;
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  /* `outline: none` was here. It out-specified the global :focus-visible rule (0,2,1 beats
     0,1,0) and stripped the black outline, leaving only the yellow border. Removed so the
     designed indicator applies to form fields like everything else. */
  border-color: var(--yellow);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group select { appearance: none; cursor: pointer; }
.form-group select option { background: #1E1E1E; }

.form-submit .btn { width: 100%; justify-content: center; display: flex; }

.form-note {
  font-size: 0.78rem;
  color: #555;
  text-align: center;
}

/* ===========================
   FOOTER
=========================== */
#site-footer { background: #0D0D0D; border-top: 1px solid #222; padding: 56px 0 0; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid #222;
}

.footer-brand p { font-size: 0.85rem; color: #9A9A9A; margin-top: 16px; max-width: 280px; }

.footer-col h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a {
  font-size: 0.85rem;
  color: #9A9A9A; /* #666 measured 3.38:1 on the #0D0D0D footer - failed 1.4.3 */
  transition: color 0.15s;
}
.footer-col ul li a:hover { color: var(--white); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  flex-wrap: wrap;
  gap: 12px;
}
/* Footer greys raised to pass WCAG 1.4.3 against the #0D0D0D footer. Measured ratios:
   #8C8C8C = 5.78:1, #C9C9C9 = 11.7:1. The old #444 (2.00:1) and #555 (2.61:1) failed.
   Note: this `.footer-bottom p` rule is what actually paints the ABN line too - the
   `color` that used to sit on `.footer-abns` was outranked by this selector and never
   applied, so it has been dropped rather than left looking meaningful. */
.footer-bottom p { font-size: 0.78rem; color: #8C8C8C; margin: 0; }
.footer-bottom a {
  color: #C9C9C9;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.footer-bottom a:hover { color: var(--white); }
.footer-abns { font-size: 0.75rem; }

/* ===========================
   PAGE HERO (inner pages)
=========================== */
.page-hero {
  background: var(--black);
  padding: 72px 0 60px;
  border-bottom: 3px solid var(--yellow);
}
.page-hero__breadcrumb {
  font-size: 0.75rem;
  color: #9A9A9A; /* #555 measured 2.53:1 on the #111 hero - failed 1.4.3 */
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.page-hero__breadcrumb a { color: #9A9A9A; }
.page-hero__breadcrumb a:hover { color: var(--yellow); }
.page-hero__breadcrumb span { color: var(--yellow); }
.page-hero h1 { color: var(--white); margin-bottom: 16px; }
.page-hero p { color: #AAA; max-width: 640px; font-size: 1rem; }

/* ===========================
   SERVICE PAGE CONTENT
=========================== */
.service-content { max-width: 780px; }
.service-layout > *,
.service-content,
.service-sidebar { min-width: 0; }
.service-content h2 { margin: 48px 0 16px; font-size: 1.35rem; }
.service-content h2:first-child { margin-top: 0; }
.service-content p { font-size: 0.95rem; line-height: 1.75; margin-bottom: 1rem; }
.service-content ul { margin: 16px 0 24px 0; display: flex; flex-direction: column; gap: 8px; }
.service-content ul li {
  font-size: 0.9rem;
  color: var(--mid);
  padding-left: 20px;
  position: relative;
  line-height: 1.6;
}
.service-content ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 6px; height: 6px;
  background: var(--yellow);
  border-radius: 50%;
}

.service-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: start;
}

.service-sidebar {
  position: sticky;
  top: 90px;
}
.service-sidebar__box {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 20px;
}
.service-sidebar__box h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6A6A6A;
  margin-bottom: 16px;
}
.service-sidebar__box .btn { width: 100%; text-align: center; display: block; margin-bottom: 10px; padding-left: 16px; padding-right: 16px; white-space: normal; line-height: 1.3; }
.service-sidebar__box .btn:last-child { margin-bottom: 0; }

.capability-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 32px;
}
.capability-fact {
  min-width: 0;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--light);
}
.capability-fact__label {
  margin-bottom: 4px;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.capability-fact__value {
  color: var(--black);
  font-size: 0.9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.step-list { display: flex; flex-direction: column; gap: 16px; }
.step-item { display: flex; gap: 14px; align-items: flex-start; }
.step-item__num {
  width: 28px; height: 28px;
  background: var(--yellow);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--black);
  flex-shrink: 0;
}
.step-item__text { font-size: 0.85rem; color: var(--mid); padding-top: 4px; line-height: 1.5; }

/* Case studies */
.case-study {
  background: var(--light);
  border-left: 4px solid var(--yellow);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 28px 24px;
  margin: 32px 0;
}
.case-study__tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6A6A6A;
  margin-bottom: 8px;
}
.case-study h3 { font-size: 1rem; margin-bottom: 12px; }
.case-study p { font-size: 0.875rem; }

/* ===========================
   ABOUT PAGE
=========================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-photo {
  background: var(--dark);
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.about-photo__placeholder {
  font-size: 0.82rem;
  color: #444;
  text-align: center;
  padding: 24px;
}

.value-list { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.value-item { display: flex; gap: 14px; }
.value-item__mark {
  width: 20px; height: 20px;
  background: var(--yellow);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 3px;
  font-size: 0.6rem;
  font-weight: 900;
  color: var(--black);
}

/* ===========================
   SERVICE AREAS
=========================== */
.areas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.area-group h3 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6A6A6A; margin-bottom: 16px; }
.area-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.area-tag {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--dark);
}
.area-tag--core {
  background: #fff;
  border-color: var(--yellow-dk);
  font-weight: 600;
}
/* Towns that have their own location page become links. */
a.area-tag--linked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Faint tint plus the arrow, so "this one is clickable" is carried by more than
     one visual cue (WCAG 1.4.1). */
  background: #FFFAEB;
  border-color: var(--yellow-dk);
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
a.area-tag--linked:hover,
a.area-tag--linked:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--black);
}
.area-tag__arrow { font-size: 0.9em; opacity: .55; }
a.area-tag--linked:hover .area-tag__arrow,
a.area-tag--linked:focus-visible .area-tag__arrow { opacity: 1; }

/* Location hub - descriptive internal links to the town pages */
.location-hub { margin-bottom: 56px; }
.location-hub__intro { max-width: 62ch; margin-bottom: 24px; }
.location-hub__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.location-hub__list a {
  display: block;
  height: 100%;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  border-radius: 0 4px 4px 0;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.location-hub__list a:hover,
.location-hub__list a:focus-visible {
  border-color: var(--yellow-dk);
  border-left-color: var(--yellow-dk);
  box-shadow: 0 6px 18px rgba(17,17,17,.07);
}
.location-hub__town {
  display: block;
  margin-bottom: 5px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--black);
}
.location-hub__note {
  display: block;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--mid);
}

/* ===========================
   HOW WE WORK PAGE
=========================== */
.hww-steps { display: flex; flex-direction: column; }
.hww-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.hww-step:last-child { border-bottom: none; }
.hww-step__num {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--yellow);
  opacity: 0.2;
  line-height: 1;
  text-align: center;
}
.hww-step h2 { margin-bottom: 16px; font-size: 1.4rem; }
.hww-step p, .hww-step ul { font-size: 0.95rem; }

/* ===========================
   ACCORDION (FAQ)
=========================== */
.accordion { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-item:last-child { border-bottom: none; }
.accordion-toggle {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
}
.accordion-toggle:hover { background: var(--light); }
.accordion-toggle::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.accordion-item.open .accordion-toggle::after { content: '−'; }
.accordion-body { display: none; padding: 0 24px 20px; }
.accordion-item.open .accordion-body { display: block; }
.accordion-body p { font-size: 0.9rem; }

/* ===========================
   UTILITY
=========================== */
.text-yellow { color: var(--yellow); }
.text-center { text-align: center; }
.text-white { color: var(--white) !important; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; }

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 900px) {
  :root { --section-pad: 56px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .service-layout { grid-template-columns: 1fr; }
  .service-sidebar { position: static; }
  .about-grid { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: 1fr; }
  .hww-step { grid-template-columns: 1fr; gap: 8px; }
  .hww-step__num { font-size: 2rem; opacity: 0.15; }
}

@media (max-width: 768px) {
  #primary-nav { display: none; }
  #primary-nav.open { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 80px; left: 0; right: 0; background: var(--dark-2); border-top: 1px solid #333; padding: 16px; gap: 4px; }
  #site-header { position: relative; }
  #nav-toggle { display: block; }

  .dropdown { position: static; display: none; border: none; padding: 0 0 0 16px; }
  .nav-item:hover .dropdown,
  .nav-item:focus-within .dropdown { display: none; }
  .nav-item.open .dropdown { display: block; }

  .capabilities-wrap { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cta-banner-inner { flex-direction: column; text-align: center; }
  .cta-banner__actions { justify-content: center; }
  .clients-strip-inner { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-trust { flex-direction: column; }
  .hero-trust__item { border-right: none; border-bottom: 1px solid #2A2A2A; padding-bottom: 16px; margin-right: 0; }
  .hero-trust__item:last-child { border-bottom: none; }
}

@media (max-width: 480px) {
  :root { --section-pad: 44px; }
  #hero { padding: 64px 0 52px; }
  .page-hero { padding: 48px 0 40px; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; text-align: center; }
  .process-grid { grid-template-columns: 1fr; }
  .process-step { border-right: none; border-bottom: 1px solid #2A2A2A; }
  .process-step:last-child { border-bottom: none; }
}

/* ===========================
   TESTIMONIALS
=========================== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.testimonial-item {
  padding: 28px 24px;
  background: var(--light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--yellow);
  border-radius: 0 4px 4px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.testimonial-item__body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--dark);
  font-style: italic;
}

.testimonial-item__attr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.testimonial-item__role {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.testimonial-item__loc {
  font-size: 0.78rem;
  color: #6A6A6A;
}

@media (max-width: 768px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* ===========================
   PROJECT GALLERY
=========================== */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.project-gallery__item {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--dark-2);
}

.project-gallery__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.project-gallery__item:hover .project-gallery__img {
  transform: scale(1.04);
}

/* ===========================
   BEFORE / AFTER PHOTOS
=========================== */
.before-after-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0;
}

.before-after-pair {
  display: contents;
}

.before-after-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--dark-2);
}

.before-after-item__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.before-after-item--wide .before-after-item__img {
  aspect-ratio: 1600 / 747;
}

.before-after-item--portrait .before-after-item__img {
  aspect-ratio: 3 / 4;
  object-position: center top;
}

.before-after-item__label {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
}

.before-after-item__label--after {
  background: var(--yellow);
  color: var(--dark-1, #111);
}

.before-after-caption {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: #6A6A6A;
  font-style: italic;
  margin-top: -4px;
  margin-bottom: 12px;
}

/* Completed-work image with no before/after framing - one self-contained cell. */
.before-after-single { margin: 0; }
.before-after-single picture,
.before-after-item picture { display: block; }
.before-after-single .before-after-item__img {
  border-radius: var(--radius);
  background: var(--dark-2);
}
.before-after-single figcaption {
  margin-top: 8px;
  font-size: 0.8rem;
  color: #6A6A6A;
  font-style: italic;
}

@media (max-width: 600px) {
  .project-gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
  .before-after-grid { grid-template-columns: 1fr; }
  .before-after-caption { grid-column: 1; }
}

@media (max-width: 380px) {
  .project-gallery { grid-template-columns: 1fr; }
}

/* ===========================
   FORM TABS
=========================== */
.form-tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 24px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 4px;
}

.form-tab {
  flex: 1;
  padding: 10px 14px;
  background: none;
  border: none;
  color: #999;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
  line-height: 1.3;
}

.form-tab.active {
  background: var(--yellow);
  color: var(--black);
}

.form-tab-panel { display: none; }
.form-tab-panel.active { display: block; }

/* ===========================
   FILE UPLOAD
=========================== */
.file-upload-area {
  position: relative;
  border: 2px dashed #444;
  border-radius: var(--radius);
  padding: 20px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
  background: rgba(255,255,255,0.03);
}

.file-upload-area:hover,
.file-upload-area.drag-over { border-color: var(--yellow); }

.file-upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.file-upload-label {
  font-size: 0.85rem;
  color: #888;
  pointer-events: none;
  line-height: 1.5;
}

.file-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.file-list li {
  font-size: 0.8rem;
  color: #ddd;
  background: rgba(255,255,255,0.06);
  border: 1px solid #333;
  border-radius: var(--radius);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-list li::before { content: '📎'; }

/* ===========================
   EMERGENCY MESSAGE
=========================== */
.emergency-msg {
  margin-top: 10px;
  padding: 12px 16px;
  background: #7f1d1d;
  border: 1px solid #991b1b;
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: #fecaca;
  line-height: 1.5;
}

/* ===========================
   BEFORE / AFTER SLIDER
=========================== */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 40px;
}

.ba-grid__item--wide {
  grid-column: 1 / -1;
}

.ba-grid__item--wide .ba-before-img {
  aspect-ratio: 1600 / 747;
}

.ba-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.ba-before-img {
  display: block;
  width: 100%;
  /* drm_pic() emits real width/height attributes on this image. Without `height: auto`
     the 374px height attribute wins over aspect-ratio and the slider mis-sizes, worst at
     mobile widths. Same guard already present on .project-gallery__img. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.ba-after {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(0 50% 0 0);
}

/* drm_pic() wraps the img in <picture>. .ba-after is position:absolute/inset:0 and its img
   relies on height:100% - against an inline <picture> that resolves to auto and collapses
   the overlay to a strip, so the wrapper must be block and full-size too. pointer-events
   mirrors .ba-after img so it cannot intercept the range input. */
.ba-slider picture { display: block; }
.ba-after picture { display: block; width: 100%; height: 100%; pointer-events: none; }

.ba-after img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: rgba(255,255,255,0.85);
  z-index: 3;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ba-handle__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.ba-label {
  position: absolute;
  top: 12px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 3px;
  z-index: 4;
  pointer-events: none;
}

.ba-label--before {
  left: 12px;
  background: rgba(0,0,0,0.65);
  color: #fff;
}

.ba-label--after {
  right: 12px;
  background: var(--yellow);
  color: var(--black);
}

.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: col-resize;
  z-index: 5;
  margin: 0;
}

.ba-caption {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 10px;
  font-style: italic;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .ba-grid { grid-template-columns: 1fr; }
  .form-tab { font-size: 0.72rem; padding: 8px 10px; }
}


/* Perf/CLS: reserve image space (added 2026-06-20, DRM audit) */
.project-gallery__img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.before-after-item__img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }


/* Phase 0b: a11y + mobile CTA (2026-06-20) */
/* Focus ring must be visible on BOTH the dark surfaces and the yellow CTA banner. A plain
   yellow ring measured 1.00:1 against the yellow banner - literally invisible on the two
   primary conversion buttons. Black outline carries it there; the two yellow shadow layers
   (0-2px and 5-8px) carry it on dark surfaces. Two layers, not one: an outline paints on
   top of the element's own box-shadow, so a single wider shadow would be mostly hidden
   behind the outline. */
:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #F5C800, 0 0 0 8px #F5C800;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }
.mobile-cta-bar { display: none; }
@media (max-width: 768px) {
  .mobile-cta-bar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; padding: 8px; background: #111; border-top: 1px solid #2A2A2A; }
  .mobile-cta-bar__btn { flex: 1; text-align: center; padding: 12px 8px; border-radius: 4px; font-weight: 700; font-size: .9rem; text-decoration: none; }
  .mobile-cta-bar__btn--call { background: #1f1f1f; color: #fff; border: 1px solid #333; }
  .mobile-cta-bar__btn--primary { background: #F5C800; color: #111; }
  body { padding-bottom: 68px; }
}

/* ===========================
   2026 HOMEPAGE REFINEMENT
=========================== */
.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.section-header__muted { color: #999 !important; }

.section-action {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #2A2A2A;
}

.section-action--light {
  border-top-color: var(--border);
}

.home #cta-banner { display: none; }

#contact-form {
  scroll-margin-top: 104px;
}

.contact-info__urgent {
  margin-top: 8px;
  font-size: 0.875rem;
  color: #aaa !important;
}

/* Procurement commitments */
.commitments-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  background: var(--border);
  gap: 1px;
}

.commitment-card {
  background: var(--white);
  padding: 30px 26px;
}

.commitment-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.commitment-card h3 {
  margin-bottom: 10px;
  font-size: 1rem;
}

.commitment-card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
}

/* Editorial completed-work gallery */
/* Square cells, not fixed-height rows. Most of the work photography is a 1:1
   before/after composite, and a fixed 220px row against a ~265px column cropped ~17%
   off the bottom -- which on a top/bottom split silently removed the "after" half and
   left the image showing only the damage. Square cells mean nothing is cut. The two
   landscape photos crop instead, which is harmless: they are single room shots. */
.project-gallery {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.project-gallery__item {
  position: relative;
  min-width: 0;
  margin: 0;
  border: 1px solid #333;
  aspect-ratio: 1 / 1;
}

.project-gallery__item--featured {
  grid-column: span 2;
  grid-row: span 2;
}

.project-gallery__item picture {
  display: block;
  width: 100%;
  height: 100%;
}

.project-gallery__img,
.project-gallery__item--featured .project-gallery__img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.project-gallery__item figcaption {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 38px 16px 14px;
  color: var(--white);
  background: linear-gradient(transparent, rgba(0,0,0,0.86));
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Case-study proof */
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.result-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--yellow);
  background: var(--white);
  box-shadow: 0 10px 28px rgba(17,17,17,0.05);
}

.result-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.result-card__metric {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -0.03em;
}

.result-card__type {
  padding: 5px 8px;
  border-radius: 3px;
  background: var(--light);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.result-card h3 {
  min-height: 3.2em;
  margin-bottom: 12px;
  font-size: 1.05rem;
}

.result-card > p {
  font-size: 0.875rem;
  line-height: 1.65;
}

.result-card__outcomes {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.result-card__outcomes li {
  position: relative;
  padding-left: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dark);
}

.result-card__outcomes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #7a6500;
  font-weight: 800;
}

/* Single verified case study - the only place on the site that asserts a
   specific past job, so it carries only what can be evidenced. */
.recent-work {
  margin-top: 30px;
  padding: 28px 30px;
  background: var(--light);
  border-left: 4px solid var(--yellow);
}
.recent-work__label {
  display: inline-block;
  margin-bottom: 8px;
  color: #6A5400;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.recent-work__head h3 {
  margin: 0 0 14px;
  font-size: 1.1rem;
}
.recent-work__body > p {
  margin: 0 0 20px;
  max-width: 68ch;
  font-size: 0.9rem;
  line-height: 1.7;
}
.recent-work__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  list-style: none;
  margin: 0;
}
.recent-work__facts li { display: flex; flex-direction: column; gap: 3px; }
.recent-work__facts strong {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -0.02em;
}
.recent-work__facts span {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}
@media (max-width: 640px) {
  .recent-work { padding: 22px 20px; }
  .recent-work__facts { grid-template-columns: 1fr; gap: 14px; }
}

/* Native, keyboard-friendly FAQ disclosure */
.faq-list {
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid var(--border);
  background: var(--white);
}

.faq-item + .faq-item {
  border-top: 1px solid var(--border);
}

.faq-item summary {
  position: relative;
  padding: 21px 56px 21px 24px;
  color: var(--black);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  color: #6b5900;
  font-size: 1.4rem;
  font-weight: 500;
}

.faq-item[open] summary::after { content: '−'; }
.faq-item[open] summary { background: #fffbed; }

.faq-item__answer {
  padding: 0 56px 22px 24px;
  background: #fffbed;
}

.faq-item__answer p {
  margin: 0;
  color: #444;
  font-size: 0.9rem;
  line-height: 1.7;
}

.form-tab:focus-visible {
  outline-color: var(--white);
}

.form-tab-panel[hidden] {
  display: none;
}

.emergency-msg a {
  color: #fca5a5;
  font-weight: 700;
  text-decoration: underline;
}

/* Switch the dense desktop nav before it can wrap. The bar needs roughly
   1020px (monogram + seven nav items, none of which may wrap); the container
   only reaches its full 1112px inner width at a 1160px viewport, so collapse
   to the hamburger below that rather than letting items overlap the logo. */
@media (max-width: 1160px) {
  #site-header { position: sticky; }
  #nav-toggle { display: block; min-width: 44px; min-height: 44px; }

  #primary-nav { display: none; }
  #primary-nav.open {
    display: block;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 146px);
    max-height: calc(100dvh - 146px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 20px 24px;
    border-top: 1px solid #333;
    border-bottom: 3px solid var(--yellow);
    background: var(--dark-2);
    box-shadow: 0 16px 32px rgba(0,0,0,0.35);
  }

  #primary-nav .primary-menu {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  #primary-nav .primary-menu > li > a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
  }

  #primary-nav .nav-cta {
    justify-content: center;
    margin: 10px 0 0;
    text-align: center;
  }

  .dropdown { position: static; display: none; margin: 0; padding: 6px 0 8px 14px; border: 0; box-shadow: none; }
  .dropdown a { display: flex; align-items: center; min-height: 44px; }
  .nav-item:hover .dropdown { display: none; }
  .nav-item.open .dropdown { display: block; }
  .nav-item.open > a::after { transform: rotate(180deg); }
}

@media (max-width: 900px) {
  .commitments-grid,
  .results-grid { grid-template-columns: 1fr 1fr; }

  .project-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .project-gallery__item--featured {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (max-width: 768px) {
  .clients-strip-inner { flex-direction: column; }
  .clients-strip__label { width: 100%; padding: 12px 20px; }
  .clients-strip__items {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .clients-strip__items::-webkit-scrollbar { display: none; }
  .clients-strip__item { flex: 0 0 auto; padding: 14px 18px; }

  .hero-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hero-trust__item {
    margin: 0;
    padding: 14px 12px;
    border-right: 0;
    border-bottom: 1px solid #2A2A2A;
  }

  .hero-trust__item:nth-child(odd) { border-right: 1px solid #2A2A2A; }
  .hero-trust__item:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 640px) {
  .capability-facts { grid-template-columns: 1fr; }

  .commitments-grid,
  .results-grid { grid-template-columns: 1fr; }

  .project-gallery {
    grid-template-columns: 1fr;
  }

  .project-gallery__item--featured {
    grid-column: auto;
    grid-row: auto;
  }

  .result-card h3 { min-height: 0; }
}

@media (max-width: 480px) {
  .section-header { margin-bottom: 34px; }
  .commitment-card,
  .result-card { padding: 24px 20px; }
  .faq-item summary { padding: 19px 50px 19px 18px; }
  .faq-item summary::after { right: 18px; }
  .faq-item__answer { padding: 0 18px 20px; }
}

/* ===========================
   PRINT
   ===========================
   Procurement officers, loss adjusters and NDIS providers print these pages into tender,
   claim and asset files. Strip the navigation chrome, force legible black-on-white, keep
   cards whole across page breaks, open the FAQ disclosures so nothing is missing, and put
   the business identity on the sheet. */
.print-identity { display: none; }

@media print {
  #site-header,
  #nav-toggle,
  #primary-nav,
  #cta-banner,
  .emergency-strip,
  #site-footer,
  .mobile-cta-bar,
  .service-sidebar,
  .skip-link,
  .hero-ctas,
  .section-action,
  .contact-form-wrap,
  .ba-range,
  .ba-handle { display: none !important; }

  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html, body { background: #fff !important; }
  body { font-size: 11pt; line-height: 1.45; padding-bottom: 0 !important; }
  .container { max-width: none; padding: 0; }
  .section, .page-hero, #hero { padding: 10pt 0 !important; border: 0 !important; }

  .print-identity {
    display: block;
    margin-bottom: 12pt;
    padding-bottom: 6pt;
    border-bottom: 1.5pt solid #000;
    font-size: 9.5pt;
    line-height: 1.5;
  }
  .print-identity strong { font-size: 12pt; }

  h1 { font-size: 19pt; }
  h2 { font-size: 14pt; }
  h3 { font-size: 11.5pt; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* Never split a card, figure or FAQ item across a page break */
  .result-card,
  .commitment-card,
  .service-card,
  .process-step,
  .recent-work,
  .capability-item,
  .location-hub__list li,
  .faq-item,
  figure,
  table { break-inside: avoid; page-break-inside: avoid; }

  /* Collapsed <details> would otherwise print empty */
  details { display: block !important; }
  details > summary { list-style: none; font-weight: 700; }
  details > summary::after { content: '' !important; }
  .faq-item__answer { display: block !important; }

  /* Single column: printed pages are narrow */
  .service-layout,
  .contact-grid,
  .areas-grid,
  .ba-grid,
  .capabilities-wrap { grid-template-columns: 1fr !important; }
  .results-grid,
  .commitments-grid,
  .services-grid,
  .location-hub__list { grid-template-columns: 1fr 1fr !important; }

  /* Before/after panes both need to be visible on paper, not clipped by the slider */
  .ba-slider { height: auto !important; }
  .ba-after { position: static !important; width: auto !important; clip-path: none !important; }
  .ba-label { position: static !important; display: inline-block; border: 1pt solid #000; }

  img, picture { max-width: 100% !important; break-inside: avoid; }
  a { text-decoration: underline; }
  /* Show where prose links point - a printed link is otherwise dead. Excluded: buttons,
     breadcrumbs, town tags and card links, where the visible text already says where it
     goes and the URL would just be noise. */
  #main a[href^="http"]:not(.btn):not(.area-tag):not(.service-card__link)::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    word-break: break-all;
  }
  .page-hero__breadcrumb a::after,
  .location-hub__list a::after { content: "" !important; }
  .btn { border: 1pt solid #000 !important; padding: 4pt 8pt !important; min-height: 0 !important; }

  @page { margin: 14mm; }
}

/* Result notice for the no-JS form path (see partials/contact-form.php). */
.form-notice {
  margin-bottom: 20px;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
}
.form-notice--ok {
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid #4CAF50;
  color: #A5D6A7;
}
.form-notice--err {
  background: rgba(244, 67, 54, 0.12);
  border: 1px solid #f44336;
  color: #EF9A9A;
}

/* ===========================
   CONTRAST CORRECTIONS
   ===========================
   Measured with real computed styles against real composited backgrounds; every value
   below was failing WCAG 1.4.3 (4.5:1 for body text, 3:1 for large text).

   --text-dim flips to the light value inside any dark container, so all the secondary
   text that inherits it is corrected in one place instead of per element. */
.section--dark,
.section--black,
#hero,
.page-hero,
#site-footer,
.emergency-strip,
.contact-form-wrap,
#cta-banner.section--dark { --text-dim: #9A9A9A; }

/* Section labels are yellow, which is correct on dark surfaces (12:1) but measured 1.60:1
   on white and 1.47:1 on the light-grey sections. The theme already overrides --light and
   --yellow sections; a plain `.section` (white) had no override, so it is handled here.
   Listed as :not() rather than a new class so no template markup has to change. */
.section:not(.section--dark):not(.section--black):not(.section--light):not(.section--yellow) .section-label {
  color: #6A5400; /* 7.02:1 on white, still reads as the brand yellow family */
}

/* These sit on dark panels where --muted (#777, 3.89:1) and #555 (2.61:1) were too dark. */
.contact-detail__label { color: #9A9A9A; }
.form-note { color: #9A9A9A; }
.form-note a { color: #C9C9C9; }

/* On the light-grey cards #777 measured 4.11:1. */
.result-card__type { color: #6A6A6A; }
.recent-work__facts span { color: #6A6A6A; }

/* ===========================
   FOCUS FOR VISUALLY-HIDDEN CONTROLS
   ===========================
   Two operable controls are opacity:0 with a styled element painted underneath, so their
   own focus ring is invisible. Project the ring onto the visible wrapper instead.

   :has(… :focus-visible) rather than :focus-within on purpose - :focus-within would also
   fire on a mouse drag and paint a large ring on every interaction. In browsers without
   :has() support this simply leaves today's behaviour, so it is not a regression. */
.ba-slider:has(.ba-range:focus-visible) {
  outline: 3px solid #111111;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #F5C800, 0 0 0 8px #F5C800;
}
.ba-slider:has(.ba-range:focus-visible) .ba-handle__btn {
  box-shadow: 0 0 0 3px #111111, 0 0 0 6px #F5C800;
}

.file-upload-area:has(.file-upload-input:focus-visible) {
  border-color: var(--yellow);
  outline: 3px solid #111111;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #F5C800, 0 0 0 8px #F5C800;
}

/* The skip link now moves focus to <main>, and in-page links focus their target. Those are
   non-interactive containers - they need the focus for keyboard order, not a ring drawn
   around a whole page section. The form tabs keep theirs: activateFormTab() sets
   tabindex="0" on the tab it focuses, so this -1 selector does not match them. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Anchor targets were landing flush under the 83px sticky header. */
html { scroll-padding-top: 104px; }

/* Business hours sit next to the urgent-works phone number. The phone is not attended
   outside these hours and there is no voicemail yet, so the hours have to be visible
   wherever the number is presented as an urgent-response route. */
.emergency-strip__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.emergency-strip__hours {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: #C9C9C9; /* 11.7:1 on the #111 strip */
}
@media (max-width: 640px) {
  .emergency-strip__action { align-items: flex-start; }
}