/* ─── Variables ─── */
:root {
  --dark: #0d0d0d;
  --dark-card: #1a1a1a;
  --dark-alt: #111111;
  --dark-border: rgba(255,255,255,0.06);
  --teal: #3cb0b2;
  --teal-hover: #2a9496;
  --teal-light: rgba(60,176,178,0.1);
  --yellow: #faed27;
  --yellow-hover: #e0d420;
  --yellow-dark: #0d0d0d;
  --white: #ffffff;
  --off-white: #f8f8f7;
  --gray: #e5e7eb;
  --text: #1f2937;
  --text-muted: rgba(255,255,255,0.65);
  --text-muted-light: rgba(0,0,0,0.65);
  --text-secondary: #6b7280;
  --text-light: #858481;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --container: 1200px;
  --radius: 4px;
  --radius-lg: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
input, textarea, select, button { font-family: inherit; }

/* ─── Containers ─── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.btn-primary {
  background: var(--yellow);
  color: var(--yellow-dark);
  border-color: var(--yellow);
}
.btn-primary:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(250,237,39,0.35); }
.btn-primary:active { transform: translateY(0); }
.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.5);
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn-dark {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
}
.btn-dark:hover { background: #1a2035; }
.btn-lg { padding: 16px 36px; font-size: 16px; }
.btn-sm { padding: 10px 20px; font-size: 14px; }

/* ─── Typography ─── */
.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
  display: block;
}
.h1 { font-family: var(--font-heading); font-size: clamp(42px, 6vw, 72px); font-weight: 800; line-height: 1.0; letter-spacing: -0.01em; text-transform: uppercase; }
.h2 { font-family: var(--font-heading); font-size: clamp(32px, 4vw, 52px); font-weight: 800; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; }
.h3 { font-family: var(--font-heading); font-size: clamp(22px, 2.5vw, 30px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.h4 { font-family: var(--font-heading); font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.lead { font-size: 18px; line-height: 1.7; color: var(--text-muted); }
.text-white { color: var(--white); }
.text-muted { color: var(--text-muted); }
.text-teal { color: var(--teal); }
.text-center { text-align: center; }

/* ─── Navigation ─── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dark);
  border-bottom: 1px solid var(--dark-border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.nav-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.nav-logo-main {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-logo-sub {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}
.nav-links {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 32px;
}
/* Each item fills the bar's full height: a taller hover target, and it makes
   `top: 100%` on a dropdown resolve to the bottom edge of the nav bar. */
.nav-links > li { display: flex; align-items: center; }
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  transition: color 0.15s;
  letter-spacing: 0.02em;
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links a.active { color: var(--yellow); }
a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 2px; }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-phone { font-size: 15px; font-weight: 600; color: var(--white); }
.nav-phone span { color: var(--yellow); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--white); transition: all 0.25s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--dark-card);
  border-top: 1px solid var(--dark-border);
  padding: 20px 24px;
  gap: 16px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.85); padding: 8px 0; border-bottom: 1px solid var(--dark-border); }
.mobile-menu .btn { align-self: flex-start; margin-top: 8px; }

/* ─── Hero actions (shared button row used by hero-photo) ─── */
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ─── Page Header (inner pages) ─── */
.page-header {
  background: var(--dark);
  color: var(--white);
  padding: 64px 0 56px;
}
.page-header .label { color: rgba(255,255,255,0.5); }
.page-header-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── Section Headers ─── */
.section-header { margin-bottom: 52px; }
.section-header-center { text-align: center; max-width: 640px; margin: 0 auto 52px; }

/* ─── Service Cards ─── */
.service-card {
  background: var(--white);
  border: 1px solid var(--gray);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: all 0.2s ease;
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-icon {
  width: 48px;
  height: 48px;
  background: var(--teal-light);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 22px;
}
.service-card h3 { font-size: 18px; font-weight: 700; text-transform: uppercase; font-family: var(--font-heading); letter-spacing: 0.03em; margin-bottom: 10px; }
.service-card p { font-size: 14px; color: var(--text-muted-light); line-height: 1.65; }
.service-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--teal); margin-top: 16px; transition: gap 0.15s; }
.service-card-link:hover { gap: 10px; }
.service-card-link::after { content: '→'; }

/* Services page full cards */
.service-full {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: start;
  padding: 40px;
  background: var(--white);
  border: 1px solid var(--gray);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}
.service-full:hover { box-shadow: var(--shadow-md); }
.service-full-icon { width: 72px; height: 72px; background: var(--off-white); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 32px; }
.service-full h2 { margin-bottom: 12px; }
.service-full p { color: var(--text-muted-light); line-height: 1.7; margin-bottom: 16px; }
.service-bullets { display: flex; flex-direction: column; gap: 8px; }
.service-bullets li { font-size: 14px; color: var(--text-muted-light); display: flex; align-items: flex-start; gap: 10px; }
.service-bullets li::before { content: '✓'; color: var(--teal); font-weight: 700; flex-shrink: 0; margin-top: 1px; }

/* ─── Emergency Section ─── */
.emergency-section {
  background: var(--dark);
  color: var(--white);
  padding: 80px 0;
}
.emergency-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.emergency-time {
  font-family: var(--font-heading);
  font-size: 88px;
  font-weight: 800;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 4px;
}
.emergency-time-label { font-size: 13px; font-weight: 500; letter-spacing: 0.12em; color: rgba(255,255,255,0.45); text-transform: uppercase; margin-bottom: 32px; }
.emergency-headline { margin-bottom: 20px; }
.emergency-body { font-size: 16px; color: rgba(255,255,255,0.65); line-height: 1.75; margin-bottom: 36px; }
.emergency-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.emergency-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: rgba(255,255,255,0.8);
}
.emergency-list li::before { content: '▸'; color: var(--teal); flex-shrink: 0; }

/* ─── About Section ─── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.about-stat { padding: 24px; background: var(--off-white); border-radius: var(--radius-lg); }
.about-stat-number { font-family: var(--font-heading); font-size: 40px; font-weight: 800; color: var(--teal); line-height: 1; margin-bottom: 6px; }
.about-stat-label { font-size: 13px; color: var(--text-muted-light); font-weight: 500; }
.trust-badges { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.trust-badge { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: var(--text-muted-light); }
.trust-badge::before { content: '✓'; width: 24px; height: 24px; background: var(--teal); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }

/* ─── Testimonials ─── */
.testimonials-section { background: var(--off-white); }
.testimonials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
  border: 1px solid var(--gray);
}
.testimonial-stars { color: #f59e0b; font-size: 18px; letter-spacing: 2px; margin-bottom: 16px; }
.testimonial-text { font-size: 15px; line-height: 1.7; color: var(--text); margin-bottom: 20px; font-style: italic; }
.testimonial-author { font-weight: 600; font-size: 14px; }
.testimonial-location { font-size: 13px; color: var(--text-muted-light); }

/* ─── Commercial CTA ─── */
.commercial-section { background: var(--dark); color: var(--white); }
.commercial-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.commercial-content { max-width: 600px; }
.commercial-content p { color: rgba(255,255,255,0.65); margin-top: 16px; font-size: 17px; line-height: 1.7; }
.commercial-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 18px;
}
.commercial-proof span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.commercial-proof strong {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
}

/* ─── Service Areas ─── */
.areas-section { background: var(--off-white); }
.areas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray); }
.area-tile { padding: 20px 24px; background: var(--white); border-right: 1px solid var(--gray); border-bottom: 1px solid var(--gray); font-size: 14px; font-weight: 500; color: var(--text); }
.area-tile:nth-child(4n) { border-right: none; }
.areas-regions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.area-badge { padding: 8px 16px; background: var(--dark); color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 500; border-radius: 100px; }

/* ─── Footer ─── */
.footer { background: var(--dark); color: rgba(255,255,255,0.65); padding: 60px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand-desc { font-size: 14px; line-height: 1.75; margin-top: 16px; }
.footer-license { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 12px; }
.footer-col h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14px; color: rgba(255,255,255,0.65); margin-bottom: 10px; transition: color 0.15s; }
.footer-col a:hover { color: var(--white); }
.footer-col .footer-phone { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.footer-bottom { border-top: 1px solid var(--dark-border); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 13px; }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 13px; color: rgba(255,255,255,0.45); }
.footer-bottom-links a:hover { color: var(--white); }

/* ─── Blog ─── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card {
  background: var(--white);
  border: 1px solid var(--gray);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.blog-thumb {
  height: 200px;
  background: var(--dark-card);
  overflow: hidden;
  position: relative;
}
.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-thumb img { transform: scale(1.04); }
.blog-card { cursor: pointer; }
.blog-body { padding: 28px; }
.blog-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-muted-light); margin-bottom: 12px; font-weight: 500; }
.blog-meta span { display: flex; align-items: center; gap: 4px; }
.blog-card h3 { font-size: 17px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; color: var(--text); }
.blog-card p { font-size: 14px; color: var(--text-muted-light); line-height: 1.65; margin-bottom: 16px; }
.blog-readmore { font-size: 13px; font-weight: 600; color: var(--teal); display: flex; align-items: center; gap: 4px; }
.blog-readmore::after { content: '→'; transition: transform 0.15s; }
.blog-readmore:hover::after { transform: translateX(4px); }

/* ─── Contact Form ─── */
.contact-grid { display: grid; grid-template-columns: 5fr 4fr; gap: 56px; align-items: start; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--gray);
  border-radius: var(--radius);
  /* 16px exactly, not 15: iOS Safari zooms the whole page in when a focused control is
     under 16px, so tapping Name on the contact or quote form shunts the layout sideways
     mid-entry. Same reason and same value as the field portal and the costing table. */
  font-size: 16px;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(60,176,178,0.1);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-submit-note { font-size: 13px; color: var(--text-secondary); margin-top: 12px; }
.form-success { display: none; background: #f0fdf4; border: 1.5px solid #86efac; border-radius: var(--radius-lg); padding: 20px 24px; color: #166534; font-weight: 500; }
.form-error { display: none; background: #fef2f2; border: 1.5px solid #fca5a5; border-radius: var(--radius-lg); padding: 16px 20px; color: #991b1b; font-weight: 500; margin-bottom: 20px; }
.lead-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.btn[disabled] { opacity: 0.65; cursor: not-allowed; transform: none; box-shadow: none; }
.contact-info-card {
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.contact-detail { margin-bottom: 28px; }
.contact-detail-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 6px; }
.contact-detail-value { font-size: 16px; font-weight: 600; color: var(--white); }
.contact-detail-value a { color: var(--teal); }
.contact-detail-sub { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 4px; }
.hours-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.hours-row { display: flex; justify-content: space-between; font-size: 14px; }
.hours-day { color: rgba(255,255,255,0.6); }
.hours-time { color: rgba(255,255,255,0.9); font-weight: 500; }
.emergency-badge {
  background: var(--teal);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.emergency-badge-text { font-size: 15px; font-weight: 600; color: var(--white); }
.emergency-badge-sub { font-size: 12px; color: rgba(255,255,255,0.8); }

/* ─── Values Grid (About page) ─── */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value-card { padding: 32px; background: var(--white); border: 1px solid var(--gray); border-radius: var(--radius-lg); }
.value-icon { font-size: 32px; margin-bottom: 16px; }
.value-card h3 { font-size: 17px; font-weight: 700; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 10px; }
.value-card p { font-size: 14px; color: var(--text-muted-light); line-height: 1.65; }

/* ─── CTA Strip ─── */
.cta-strip { background: var(--teal); color: var(--white); padding: 56px 0; }
.cta-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-strip h2 { margin-bottom: 8px; }
.cta-strip p { color: rgba(255,255,255,0.85); font-size: 16px; }
.cta-strip .btn-outline { border-color: rgba(255,255,255,0.6); }

/* ─── Utilities ─── */
.divider { height: 1px; background: var(--gray); margin: 0; }
.text-yellow { color: var(--yellow); }
.bg-yellow { background: var(--yellow); }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .areas-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .nav-links { display: none; }
  /* Keep the phone number in the sticky bar on mobile — only the
     "Get a Quote" button folds away into the hamburger menu. */
  .nav-cta .btn { display: none; }
  .nav-inner { gap: 12px; }
  .nav-phone { white-space: nowrap; }
  .hamburger { display: flex; }
  .emergency-grid { grid-template-columns: 1fr; }
  .emergency-time { font-size: 64px; }
  .about-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .commercial-inner { flex-direction: column; }
  .service-full { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .cta-strip-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .areas-grid { grid-template-columns: 1fr 1fr; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  /* .nav prefix needed: the per-page inline blocks also set .nav-phone font-size */
  .nav .nav-phone { font-size: 14px; gap: 5px; }
}

/* ─── Photo Hero ─── */
.hero-photo {
  position: relative;
  min-height: 65vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0d0d0d;
}
.hero-photo-bg {
  position: absolute;
  inset: 0;
}
.hero-photo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.4;
  display: block;
}
.hero-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13,13,13,0.96) 45%, rgba(13,13,13,0.45) 100%);
}
.hero-photo-inner {
  position: relative;
  z-index: 1;
  padding: 100px 0 80px;
  max-width: 660px;
}
.hero-photo-inner .h1 {
  font-size: clamp(52px, 8vw, 92px);
  line-height: 0.95;
  margin-bottom: 24px;
  color: #fff;
}
.hero-photo-inner .h1 em {
  font-style: normal;
  color: var(--yellow);
  display: block;
}
.hero-photo-lead {
  font-size: 17px;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 480px;
}
.hero-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
}
.hero-trust-dot {
  width: 18px;
  height: 18px;
  background: var(--teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}

/* ─── Stats Strip ─── */
.stats-strip {
  background: #111;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 36px 0;
}
.stats-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 24px;
  flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-link { color: inherit; transition: opacity 0.15s; }
.stat-link:hover { opacity: 0.8; }
.stat-number {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-number.yellow { color: var(--yellow); }
.stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-top: 6px;
}

/* ─── Dark Section ─── */
.section-dark {
  background: #0d0d0d;
  padding: 72px 0;
}
.section-dark .label { color: rgba(255,255,255,0.4); }

/* ─── Service Photo Cards ─── */
.service-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.05);
}
.service-photo-card {
  background: #111;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 0.25s ease, background 0.2s ease, box-shadow 0.25s ease;
  cursor: pointer;
  position: relative;
}
.service-photo-card:hover {
  background: #191919;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  transform: translateY(-4px);
  z-index: 1;
}
.service-photo-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
.service-photo-card:hover .service-photo-card-img { transform: scale(1.04); }
.service-photo-card-body {
  padding: 28px 28px 32px;
}
.service-photo-card-body h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: 10px;
}
.service-photo-card-body p {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 16px;
}
.service-photo-card-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--yellow);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.15s;
}
.service-photo-card-link:hover { gap: 10px; }
.service-photo-card-link::after { content: '→'; }

/* ─── Split Sections ─── */
.split-dark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #0d0d0d;
  min-height: 380px;
}
.split-dark-photo {
  overflow: hidden;
  position: relative;
}
.split-dark-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.split-dark-content {
  padding: 72px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #0d0d0d;
  color: #fff;
}
.split-dark-content.alt { background: #0d1120; }
.split-dark-content .label { color: rgba(255,255,255,0.35); }
.split-dark-content p { color: rgba(255,255,255,0.65); line-height: 1.75; font-size: 16px; margin: 16px 0; }

.emergency-time-big {
  font-family: var(--font-heading);
  font-size: clamp(72px, 10vw, 128px);
  font-weight: 800;
  color: var(--yellow);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.emergency-time-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-top: 4px;
  margin-bottom: 24px;
  display: block;
}

/* ─── Photo Stacks / Grids ─── */
.photo-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}
.photo-stack img {
  width: 100%;
  flex: 1;
  object-fit: cover;
  display: block;
  min-height: 0;
}
.photo-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.photo-grid-3 img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.photo-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.photo-grid-4 img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* ─── Alternating Service Sections (Services page) ─── */
.services-alt {
  background: #0d0d0d;
}
.service-alt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 340px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.service-alt-photo {
  overflow: hidden;
}
.service-alt-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.service-alt:hover .service-alt-photo img { transform: scale(1.03); }
.service-alt-content {
  padding: 64px 56px;
  background: #0d0d0d;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.service-alt.flipped .service-alt-photo { order: 2; }
.service-alt.flipped .service-alt-content { order: 1; background: #111; }
.service-alt-content .label { color: rgba(255,255,255,0.3); margin-bottom: 10px; }
.service-alt-content h2 {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
  margin-bottom: 16px;
}
.service-alt-content h2 em { font-style: normal; color: var(--yellow); }
.service-alt-content > p {
  font-size: 16px;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  margin-bottom: 20px;
}
.service-alt-content .service-proof {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  margin-top: -4px;
}
.service-alt-content .service-bullets li { color: rgba(255,255,255,0.7); font-size: 15px; }
.service-alt-content .btn { margin-top: 28px; align-self: flex-start; }

/* ─── Dark CTA Strip ─── */
.cta-final {
  background: #0d0d0d;
  padding: 80px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cta-final-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-final h2 { color: #fff; }
.cta-final p { color: rgba(255,255,255,0.55); margin-top: 12px; font-size: 17px; line-height: 1.7; }

/* ─── About Page ─── */
.about-hero {
  position: relative;
  background: #0d0d0d;
  color: #fff;
  padding: 80px 0 72px;
  overflow: hidden;
}
.about-hero-content { max-width: 720px; }
.about-hero-content .h1 em { font-style: normal; color: var(--yellow); display: block; }
.about-hero-content .h1 em.teal { color: var(--teal); }
.about-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.about-story-photo img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  border-radius: 4px;
}
.about-story-text p {
  color: var(--text-muted-light);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 16px;
}
.about-story-text .trust-badges { margin-top: 28px; }
.gemelec-diff {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(0,0,0,0.1);
  margin-top: 0;
}
.diff-card {
  background: #fff;
  padding: 40px 36px;
}
.diff-icon {
  width: 44px;
  height: 44px;
  background: var(--teal);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #fff;
  flex-shrink: 0;
}
.diff-icon svg { display: block; }
.diff-card h3 { font-size: 18px; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 10px; color: var(--text); }
.diff-card p { font-size: 14px; color: var(--text-muted-light); line-height: 1.65; }

/* ─── Responsive additions ─── */
@media (max-width: 1024px) {
  .service-photo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .hero-photo-inner { padding: 64px 0 56px; }
  .hero-photo-inner .h1 { font-size: clamp(44px, 10vw, 64px); }
  .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .split-dark { grid-template-columns: 1fr; }
  .split-dark-photo { height: 300px; }
  .split-dark-content { padding: 48px 32px; }
  .photo-grid-3 { grid-template-columns: 1fr 1fr; }
  .service-alt { grid-template-columns: 1fr; min-height: unset; }
  .service-alt.flipped .service-alt-photo { order: unset; }
  .service-alt.flipped .service-alt-content { order: unset; }
  .service-alt-photo { height: 280px; }
  .service-alt-content { padding: 40px 24px; }
  .about-story { grid-template-columns: 1fr; gap: 40px; }
  .about-story-photo img { height: 300px; }
  .gemelec-diff { grid-template-columns: 1fr; }
  .cta-final-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .service-photo-grid { grid-template-columns: 1fr; }
  .photo-grid-3 { grid-template-columns: 1fr; }
  .photo-grid-4 { grid-template-columns: 1fr; }
}

/* ─── Interaction improvements ─── */
.service-alt { cursor: default; }
.service-alt-content .btn { cursor: pointer; }
.blog-card a, .footer-col a, .nav-links a { cursor: pointer; }
.hamburger { cursor: pointer; }
.nav-phone { cursor: pointer; }
.service-photo-card-link { cursor: pointer; }

/* ─── Split section image pan on hover ─── */
.split-dark-photo img {
  transition: transform 0.6s ease;
}
.split-dark:hover .split-dark-photo img {
  transform: scale(1.02);
}

/* ─── Trust badge checkmarks align nicely ─── */
.trust-badge {
  line-height: 1.5;
}

/* ─── Blog card hover lift ─── */
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

/* ─── Reduce motion: respect user preference ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .service-photo-card:hover,
  .blog-card:hover {
    transform: none;
  }
  .split-dark:hover .split-dark-photo img,
  .service-photo-card:hover .service-photo-card-img,
  .blog-card:hover .blog-thumb img,
  .service-alt:hover .service-alt-photo img {
    transform: none;
  }
}

/* ─── Skip link for keyboard accessibility ─── */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--yellow);
  color: var(--dark);
  padding: 8px 16px;
  font-weight: 700;
  font-size: 14px;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ─── Form helper text ─── */
.form-help {
  font-size: 13px;
  color: var(--text-muted-light, #6b7280);
  margin-top: 6px;
  line-height: 1.4;
}

/* ─── Intermediate breakpoint: ease split-dark padding before mobile ─── */
@media (max-width: 1023px) {
  .split-dark-content { padding: 60px 48px; }
}

/* === ADDED 2026-05-14: components for /services/<slug> and /electrician/<suburb> pages === */

/* ─── Area grid (suburb chips) ─── */
.area-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.area-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--off-white);
  color: var(--dark);
  border: 1px solid var(--gray);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.area-chip:hover {
  border-color: var(--teal);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(60,176,178,0.15);
}
.area-chip:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.area-chip--dark {
  background: transparent;
  color: var(--off-white);
  border-color: var(--dark-border);
}
.area-chip--dark:hover {
  border-color: var(--teal);
  background: rgba(60,176,178,0.08);
}

/* ─── Breadcrumb ─── */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted-light);
  margin-bottom: 16px;
}
.breadcrumb a {
  color: var(--text-muted-light);
  transition: color 0.2s ease;
}
.breadcrumb a:hover {
  color: var(--teal);
  text-decoration: underline;
}
.breadcrumb a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}
.breadcrumb-sep {
  color: var(--text-muted-light);
  opacity: 0.6;
  padding: 0 2px;
}
.breadcrumb-current {
  color: var(--text);
  font-weight: 500;
}

/* ─── Service detail hero ─── */
.service-detail-hero {
  background: var(--off-white);
  color: var(--text);
  padding: 80px 0;
}
.service-detail-hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.service-detail-hero__content { max-width: 640px; }
.service-detail-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}
.service-detail-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.service-detail-hero__subhead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 28px;
}
.service-detail-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.service-detail-hero__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.service-detail-hero--dark {
  background: var(--dark);
  color: var(--off-white);
}
.service-detail-hero--dark .service-detail-hero__title { color: var(--off-white); }
.service-detail-hero--dark .service-detail-hero__subhead { color: var(--text-muted); }

/* ─── Service included grid ─── */
.service-included-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.service-included-card {
  background: var(--off-white);
  border: 1px solid var(--gray);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.service-included-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.service-included-card__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-light);
  color: var(--teal);
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 20px;
}
.service-included-card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--dark);
}
.service-included-card p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ─── Process steps ─── */
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.process-step {
  padding: 8px 0;
}
.process-step .step-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: var(--yellow);
  margin-bottom: 12px;
}
.process-step h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--dark);
}
.process-step p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ─── FAQ list ─── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.faq-item {
  padding-top: 20px;
  border-top: 1px solid var(--gray);
}
.faq-item:first-child {
  border-top: none;
  padding-top: 0;
}
.faq-item h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--dark);
}
.faq-item p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ─── Related services grid ─── */
.related-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.related-service-card {
  display: block;
  background: var(--off-white);
  border: 1px solid var(--gray);
  border-radius: var(--radius-lg);
  padding: 24px;
  color: var(--dark);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.related-service-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.related-service-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.related-service-card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 8px;
}
.related-service-card p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.related-service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
}

/* ─── Nearby suburbs ─── */
.nearby-suburbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}

/* ─── Suburb hero ─── */
.suburb-hero {
  background: var(--off-white);
  color: var(--text);
  padding: 72px 0;
}
.suburb-hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.suburb-hero__content { max-width: 640px; }
.suburb-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
.suburb-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  color: var(--dark);
}
.suburb-hero__subhead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 24px;
}
.suburb-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.suburb-hero__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.suburb-hero--dark {
  background: var(--dark);
  color: var(--off-white);
}
.suburb-hero--dark .suburb-hero__title { color: var(--off-white); }
.suburb-hero--dark .suburb-hero__subhead { color: var(--text-muted); }

/* ─── Suburb services grid ─── */
.suburb-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.suburb-service-card {
  display: block;
  background: var(--off-white);
  border: 1px solid var(--gray);
  border-radius: var(--radius-lg);
  padding: 24px;
  color: var(--dark);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.suburb-service-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.suburb-service-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.suburb-service-card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 8px;
}
.suburb-service-card p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.suburb-service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
}
.suburb-service-card--dark {
  background: var(--dark-card);
  border-color: var(--dark-border);
  color: var(--off-white);
}
.suburb-service-card--dark p { color: var(--text-muted); }

/* ─── Trust bullets ─── */
.trust-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}
.trust-bullets li {
  position: relative;
  padding-left: 30px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}
.trust-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-light);
  color: var(--teal);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.trust-bullets--dark li { color: var(--off-white); }

/* ─── Local testimonial ─── */
.local-testimonial {
  position: relative;
  background: var(--off-white);
  border: 1px solid var(--gray);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
  max-width: 720px;
}
.local-testimonial::before {
  content: "\201C";
  position: absolute;
  top: 4px;
  left: 16px;
  font-family: var(--font-heading);
  font-size: 72px;
  line-height: 1;
  color: var(--teal);
  opacity: 0.35;
}
.local-testimonial__body {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.local-testimonial__attribution {
  display: block;
  text-align: right;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.local-testimonial__attribution span {
  color: var(--teal);
  font-weight: 700;
}

/* ─── Shared focus-visible for links inside new components ─── */
.service-included-card a:focus-visible,
.faq-item a:focus-visible,
.related-service-card__link:focus-visible,
.suburb-service-card__link:focus-visible,
.nearby-suburbs a:focus-visible,
.local-testimonial a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── Responsive: 480px and up (small mobile refinements) ─── */
@media (min-width: 480px) {
  .service-detail-hero__title { font-size: 48px; }
  .suburb-hero__title { font-size: 44px; }
  .process-step .step-num { font-size: 72px; }
}

/* ─── Responsive: 768px and up (tablet) ─── */
@media (min-width: 768px) {
  .service-detail-hero { padding: 96px 0; }
  .service-detail-hero .container {
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
  }
  .service-detail-hero__title { font-size: 56px; }

  .suburb-hero { padding: 88px 0; }
  .suburb-hero .container {
    grid-template-columns: 1fr;
  }
  .suburb-hero__title { font-size: 52px; }

  .service-included-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
  }

  .faq-list { gap: 24px; }

  .related-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .suburb-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .local-testimonial { padding: 40px 36px 32px; }
  .local-testimonial__body { font-size: 18px; }
}

/* ─── Responsive: 1024px and up (desktop) ─── */
@media (min-width: 1024px) {
  .service-detail-hero__title { font-size: 64px; }
  .suburb-hero__title { font-size: 56px; }

  .service-included-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .process-steps {
    grid-template-columns: repeat(4, 1fr);
  }
  .process-step .step-num { font-size: 64px; }

  .related-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .suburb-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* === ADDED 2026-05-14 PM: refined component system for main page rebuild === */

/* 1. Eyebrow label */
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}
.eyebrow--muted { color: var(--text-secondary); }

/* 2. Headline mixed case utility */
.headline-mixed {
  font-family: var(--font-heading);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-weight: 700;
}

/* 3-5. Refined heading sizes (mixed-case) */
.h1-refined {
  font-family: var(--font-heading);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 60px);
}
.h2-refined {
  font-family: var(--font-heading);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 40px);
}
.h3-refined {
  font-family: var(--font-heading);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 24px);
}

/* 6. Subhead */
.subhead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted-light);
  max-width: 60ch;
}
.subhead--dark { color: rgba(255,255,255,0.75); }

/* 7-9. Section rhythm utilities */
.section-rhythm { padding: 96px 0; }
.section-rhythm-sm { padding: 64px 0; }
.section-rhythm-lg { padding: 120px 0; }
@media (max-width: 480px) {
  .section-rhythm { padding: 64px 0; }
  .section-rhythm-sm { padding: 48px 0; }
  .section-rhythm-lg { padding: 80px 0; }
}

/* 10. Refined card */
.refined-card {
  background: #ffffff;
  border: 1px solid var(--gray);
  border-radius: 20px;
  padding: 40px 32px;
  transition: border-color 200ms ease;
}
.refined-card:hover { border-color: var(--teal); }
@media (max-width: 768px) {
  .refined-card { padding: 32px 24px; }
}

/* 11. Refined card dark variant */
.refined-card-dark {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: 20px;
  padding: 40px 32px;
  color: inherit;
  transition: border-color 200ms ease;
}
.refined-card-dark:hover { border-color: var(--teal); }
@media (max-width: 768px) {
  .refined-card-dark { padding: 32px 24px; }
}

/* 12. Trust strip */
.trust-strip {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  padding: 40px 0;
  border-top: 1px solid var(--gray);
  border-bottom: 1px solid var(--gray);
}
.trust-strip__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.trust-strip__item__icon {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  color: var(--teal);
}
.trust-strip__item__label {
  font-weight: 600;
  font-size: 16px;
  color: var(--dark);
}
.trust-strip__item__subtext {
  font-size: 14px;
  color: var(--text-muted-light);
}
@media (max-width: 768px) {
  .trust-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .trust-strip__item {
    position: relative;
    padding-left: 16px;
  }
  .trust-strip__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: 24px;
    background: var(--teal);
  }
  .trust-strip__item__icon { display: none; }
}

/* 13. Services grid refined */
.services-grid-refined {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
  .services-grid-refined { grid-template-columns: 1fr; }
}

/* 14. Service card refined */
.service-card-refined {
  background: #ffffff;
  border: 1px solid var(--gray);
  border-radius: 20px;
  padding: 40px 32px;
  transition: border-color 200ms ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.service-card-refined:hover { border-color: var(--teal); }
.service-card-refined img {
  width: 100%;
  border-radius: 16px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: 8px;
}
.service-card-refined .eyebrow { margin-bottom: 4px; }
.service-card-refined h3,
.service-card-refined .h3-refined {
  font-family: var(--font-heading);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-weight: 700;
  font-size: 24px;
  margin: 0;
}
.service-card-refined p {
  color: var(--text-muted-light);
  line-height: 1.6;
  margin: 0;
}
.service-card-refined .learn-more {
  margin-top: auto;
  padding-top: 12px;
  color: var(--teal);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  align-self: flex-start;
}
.service-card-refined .learn-more::after {
  content: " \2192";
  color: inherit;
  transition: transform 200ms ease;
  display: inline-block;
}
.service-card-refined .learn-more:hover::after { transform: translateX(3px); }
@media (max-width: 768px) {
  .service-card-refined { padding: 32px 24px; }
}

/* 15. Process grid refined */
.process-grid-refined {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.process-step-refined h3,
.process-step-refined .h3-refined {
  font-family: var(--font-heading);
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 8px;
}
.process-step-refined p {
  color: var(--text-muted-light);
  line-height: 1.6;
  margin: 0;
}
.process-num {
  font-family: var(--font-heading);
  font-size: clamp(56px, 7vw, 84px);
  color: var(--yellow);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 16px;
  display: block;
}
@media (max-width: 768px) {
  .process-grid-refined { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .process-grid-refined { grid-template-columns: 1fr; }
}

/* 16. Work grid */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.work-grid figure { margin: 0; }
.work-grid img {
  width: 100%;
  border-radius: 16px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.work-grid figcaption {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-top: 12px;
}
@media (max-width: 768px) {
  .work-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .work-grid { grid-template-columns: 1fr; }
}

/* 17. Testimonial card refined */
.testimonial-card-refined {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--gray);
  border-radius: 20px;
  padding: 40px 32px;
  transition: border-color 200ms ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testimonial-card-refined:hover { border-color: var(--teal); }
.testimonial-card-refined::before {
  content: "\201C";
  position: absolute;
  top: 24px;
  left: 24px;
  font-size: 64px;
  color: var(--teal);
  line-height: 0.5;
  font-family: Georgia, serif;
}
.testimonial-card-refined blockquote {
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  margin: 32px 0 0;
  color: var(--dark);
}
.testimonial-card-refined .attribution {
  margin-top: auto;
  align-self: flex-end;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted-light);
  font-style: normal;
}
@media (max-width: 768px) {
  .testimonial-card-refined { padding: 32px 24px; }
}

/* 18. Testimonial grid refined */
.testimonial-grid-refined {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
  .testimonial-grid-refined { grid-template-columns: 1fr; }
}

/* 19. Founder block */
.founder-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.founder-block img {
  width: 100%;
  border-radius: 24px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.founder-block__text { align-self: center; }
@media (max-width: 768px) {
  .founder-block { grid-template-columns: 1fr; gap: 32px; }
}

/* 20. Credentials strip */
.credentials-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.credential-pill {
  display: inline-block;
  border: 1px solid var(--gray);
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--dark);
  background: transparent;
  text-decoration: none;
}

/* 21. Contact grid */
.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
}
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* 22. Info card */
.info-card {
  background: #ffffff;
  border: 1px solid var(--gray);
  border-radius: 16px;
  padding: 24px;
}
.contact-grid > .info-card-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 23. Info card label */
.info-card__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-muted-light);
  margin-bottom: 8px;
  text-transform: uppercase;
  display: block;
}

/* 24. Info card heading */
.info-card__heading {
  font-family: var(--font-heading);
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 8px;
  line-height: 1.2;
}

/* 25. Info card value */
.info-card__value {
  font-size: 22px;
  font-weight: 600;
  color: var(--dark);
  display: block;
  line-height: 1.3;
  text-decoration: none;
}
.info-card__value:hover { color: var(--teal); }

/* 26. Contact form card */
.contact-form-card {
  background: #ffffff;
  border: 1px solid var(--gray);
  border-radius: 24px;
  padding: 48px 40px;
}
@media (max-width: 768px) {
  .contact-form-card { padding: 32px 24px; }
}

/* 27. Map section */
.map-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.map-section iframe {
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: 16px;
  display: block;
}

/* 28. FAQ refined */
.faq-refined {
  display: flex;
  flex-direction: column;
}
.faq-refined__item {
  border-bottom: 1px solid var(--gray);
}
.faq-refined__item > summary {
  list-style: none;
  font-weight: 600;
  font-size: 18px;
  padding: 20px 0;
  cursor: pointer;
  position: relative;
  padding-right: 32px;
  color: var(--dark);
}
.faq-refined__item > summary::-webkit-details-marker { display: none; }
.faq-refined__item > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--dark);
  border-bottom: 2px solid var(--dark);
  transform: translateY(-75%) rotate(45deg);
  transition: transform 200ms ease;
}
.faq-refined__item[open] > summary::after {
  transform: translateY(-25%) rotate(-135deg);
}
.faq-refined__item > div,
.faq-refined__item > p {
  padding: 0 0 20px 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted-light);
  margin: 0;
}

/* Dark-section overrides — FAQ sits inside .gx-section which has a dark background */
.gx-section .faq-refined__item { border-bottom-color: rgba(255,255,255,0.1); }
.gx-section .faq-refined__item > summary { color: #fff; transition: color 0.15s; }
.gx-section .faq-refined__item > summary:hover { color: #3cb0b2; }
.gx-section .faq-refined__item[open] > summary { color: #3cb0b2; }
.gx-section .faq-refined__item > summary::after { border-right-color: rgba(255,255,255,0.55); border-bottom-color: rgba(255,255,255,0.55); }
.gx-section .faq-refined__item[open] > summary::after { border-right-color: #3cb0b2; border-bottom-color: #3cb0b2; }
.gx-section .faq-refined__item > div,
.gx-section .faq-refined__item > p { color: rgba(255,255,255,0.75); }

/* 29. CTA band */
.cta-band {
  background: var(--dark);
  padding: 96px 0;
  text-align: center;
  color: #ffffff;
}
.cta-band .h2-refined { color: #ffffff; }
.cta-band .subhead--dark { margin: 16px auto 32px; }
.cta-band .cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .cta-band { padding: 64px 0; }
}

/* 30. Hero refined */
.hero-refined {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero-refined__text { align-self: center; }
.hero-refined img {
  width: 100%;
  border-radius: 24px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .hero-refined { grid-template-columns: 1fr; gap: 32px; }
  .hero-refined img { aspect-ratio: 1 / 1; }
}

/* 31. Rating chip */
.rating-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}
.rating-chip__star {
  color: var(--yellow);
  font-size: 14px;
  line-height: 1;
}

/* Shared focus-visible for new components */
.refined-card a:focus-visible,
.refined-card button:focus-visible,
.refined-card-dark a:focus-visible,
.refined-card-dark button:focus-visible,
.service-card-refined a:focus-visible,
.service-card-refined button:focus-visible,
.testimonial-card-refined a:focus-visible,
.info-card a:focus-visible,
.info-card button:focus-visible,
.contact-form-card a:focus-visible,
.contact-form-card button:focus-visible,
.cta-band a:focus-visible,
.cta-band button:focus-visible,
.hero-refined a:focus-visible,
.hero-refined button:focus-visible,
.credential-pill:focus-visible,
.faq-refined__item > summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Mixed-case override for headings inside new components */
.refined-card h1, .refined-card h2, .refined-card h3, .refined-card h4,
.refined-card-dark h1, .refined-card-dark h2, .refined-card-dark h3, .refined-card-dark h4,
.service-card-refined h1, .service-card-refined h2, .service-card-refined h3, .service-card-refined h4,
.testimonial-card-refined h1, .testimonial-card-refined h2, .testimonial-card-refined h3, .testimonial-card-refined h4,
.info-card h1, .info-card h2, .info-card h3, .info-card h4,
.hero-refined h1, .hero-refined h2, .hero-refined h3, .hero-refined h4,
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4,
.founder-block h1, .founder-block h2, .founder-block h3, .founder-block h4 {
  text-transform: none;
}

/* ============================================================
   Manus 2.0 design system: hero, stats, services photo cards,
   4:11AM emergency, Manny about, testimonials, commercial CTA
   ============================================================ */
  /* Logo + nav */
  .nav-logo-wordmark { display: flex; align-items: center; gap: 1px; line-height: 1; }
  .logo-gem { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; color: #3cb0b2; letter-spacing: -0.02em; }
  .logo-lec { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; color: #faed27; letter-spacing: -0.02em; }
  .logo-bolt { margin-bottom: 1px; flex-shrink: 0; }
  .nav-logo-sub { font-size: 9px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #666; margin-top: 3px; display: block; }
  .nav-logo { text-decoration: none; display: flex; flex-direction: column; }
  .nav-dropdown { position: relative; }
  .nav-dropdown-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; }
  /* The panel floats 10px below the nav bar. That gap is not hoverable on its
     own, so ::before bridges it — without the bridge the menu closes the moment
     the pointer leaves the link on its way to a sub-item. */
  .nav-dropdown-menu { display: flex; flex-direction: column; position: absolute; top: calc(100% + 10px); left: -16px; width: 220px; background: #1a1a1a; border: 1px solid rgba(60,176,178,0.2); border-radius: 8px; padding: 8px 0; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
  .nav-dropdown-menu::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px; }
  /* Hidden by default, and on close it stays interactive for 220ms before
     fading — enough slack to slip off the panel edge and come back. */
  .nav-dropdown-menu { visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity 0.15s ease 0.22s, transform 0.15s ease 0.22s, visibility 0s linear 0.37s; }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu { visibility: visible; opacity: 1; transform: none; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s; }
  @media (prefers-reduced-motion: reduce) { .nav-dropdown-menu { transform: none; transition: opacity 0.01s linear 0.22s, visibility 0s linear 0.22s; } }
  .nav-dropdown-menu a { padding: 10px 16px; font-size: 14px; color: rgba(255,255,255,0.75); transition: color 0.15s, background 0.15s; }
  .nav-dropdown-menu a:hover { color: #3cb0b2; background: rgba(60,176,178,0.05); }
  .nav-dropdown-all { border-top: 1px solid rgba(255,255,255,0.06); margin-top: 4px; padding-top: 12px !important; color: #3cb0b2 !important; font-weight: 600 !important; }
  .btn-primary { background: #faed27 !important; color: #0d0d0d !important; border-color: #faed27 !important; }
  .btn-primary:hover { background: #e0d420 !important; border-color: #e0d420 !important; }
  .nav-phone { color: rgba(255,255,255,0.8); font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
  .nav-phone svg { flex-shrink: 0; }

  /* Buttons + eyebrow shared */
  .gx-eyebrow { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #3cb0b2; margin: 0 0 20px; display: inline-block; }
  .gx-eyebrow.yellow { color: #faed27; }
  .gx-btn-primary { background: #faed27; color: #0d0d0d; padding: 16px 28px; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 15px; border: 1px solid #faed27; border-radius: 6px; text-decoration: none; transition: background 0.15s, border-color 0.15s; display: inline-flex; align-items: center; gap: 8px; }
  .gx-btn-primary:hover { background: #e0d420; border-color: #e0d420; }
  .gx-btn-outline { background: transparent; color: #fff; padding: 16px 28px; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 15px; border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; text-decoration: none; transition: border-color 0.15s, color 0.15s; display: inline-flex; align-items: center; gap: 8px; }
  .gx-btn-outline:hover { border-color: #3cb0b2; color: #3cb0b2; }
  .gx-btn-whatsapp { background: #25d366; color: #0d0d0d; padding: 16px 28px; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 15px; border: 1px solid #25d366; border-radius: 6px; text-decoration: none; transition: background 0.15s, border-color 0.15s; display: inline-flex; align-items: center; gap: 8px; }
  .gx-btn-whatsapp:hover { background: #1ebd5a; border-color: #1ebd5a; }

  /* ============ HERO (image bg) ============ */
  .gx-hero-bg { position: relative; background: #0d0d0d; color: #fff; padding: 120px 0 100px; overflow: hidden; min-height: 80vh; display: flex; align-items: center; }
  .gx-hero-bg::before { content: ''; position: absolute; inset: 0; background-image: image-set(url('../images/hero-fleet.webp') type('image/webp'), url('../images/hero-fleet.jpg') type('image/jpeg')); background-size: cover; background-position: 70% center; z-index: 0; }
  .gx-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,13,13,0.95) 0%, rgba(13,13,13,0.88) 30%, rgba(13,13,13,0.65) 55%, rgba(13,13,13,0.3) 85%, rgba(13,13,13,0.25) 100%), linear-gradient(180deg, rgba(13,13,13,0) 55%, rgba(13,13,13,0.55) 100%); z-index: 0; }
  .gx-hero-bg .gx-hero-inner { margin-left: 0; margin-right: auto; }
  @media (max-width: 900px) {
    .gx-hero-bg::before { background-image: image-set(url('../images/hero-fleet-900.webp') type('image/webp'), url('../images/hero-fleet-900.jpg') type('image/jpeg')); background-position: center; }
    .gx-hero-bg::after { background: linear-gradient(180deg, rgba(13,13,13,0.78) 0%, rgba(13,13,13,0.7) 40%, rgba(13,13,13,0.92) 100%); }
  }
  .gx-hero-bg .container { position: relative; z-index: 1; width: 100%; }
  .gx-hero-bg .gx-hero-inner { max-width: 620px; margin-left: 0; margin-right: auto; }
  .gx-hero-bg h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(48px, 6vw, 78px); line-height: 1.0; letter-spacing: -0.01em; margin: 0 0 24px; color: #fff; text-transform: uppercase; }
  .gx-hero-bg h1 .accent-teal { color: #3cb0b2; display: block; }
  .gx-hero-bg h1 .line { display: block; }
  .gx-hero-bg .gx-hero-sub { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 540px; margin: 0 0 28px; }
  .gx-hero-bg .gx-hero-sub strong { color: #fff; font-weight: 700; }
  .gx-hero-chips-row { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 36px; }
  .gx-hero-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.72); }
  .gx-hero-chip svg { color: #3cb0b2; flex-shrink: 0; }
  .gx-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
  @media (max-width: 900px) { .gx-hero-bg { padding: 80px 0 64px; min-height: 70vh; } }

  /* ============ STATS DARK STRIP ============ */
  .gx-stats-dark { background: #0d0d0d; padding: 48px 0; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
  .gx-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
  .gx-stat-item { padding: 12px 32px; border-right: 1px solid rgba(255,255,255,0.08); text-align: left; }
  .gx-stat-item:last-child { border-right: none; }
  .gx-stat-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 44px; line-height: 1; color: #fff; margin-bottom: 8px; }
  .gx-stat-num .star { color: #faed27; }
  .gx-stat-num.zero { color: #faed27; }
  .gx-stat-label { font-family: 'DM Sans', sans-serif; font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.3; }
  @media (max-width: 700px) {
    .gx-stats-row { grid-template-columns: 1fr 1fr; }
    .gx-stat-item { padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .gx-stat-item:nth-child(2) { border-right: none; }
    .gx-stat-item:nth-child(3), .gx-stat-item:nth-child(4) { border-bottom: none; }
    .gx-stat-item:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.08); }
    .gx-stat-num { font-size: 36px; }
  }

  /* ============ SECTIONS (dark) ============ */
  .gx-section { background: #1a1a19; padding: 100px 0; color: #fff; }
  .gx-section.darker { background: #0d0d0d; }
  .gx-section.light { background: #f7f6f3; color: #0d0d0d; }
  @media (max-width: 700px) { .gx-section { padding: 64px 0; } }
  .gx-section-head { margin-bottom: 56px; max-width: 760px; }
  .gx-section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
  .gx-h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(36px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 16px; text-transform: uppercase; color: #fff; }
  .gx-section.light .gx-h2 { color: #0d0d0d; }
  .gx-h2 .accent-teal { color: #3cb0b2; display: block; }
  .gx-h2 .accent-yellow { color: #faed27; display: block; }
  .gx-section-sub { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.65); margin: 0; max-width: 620px; }
  .gx-section.light .gx-section-sub { color: #555; }

  /* ============ SERVICE PHOTO CARDS ============ */
  .gx-services-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 900px) { .gx-services-photo-grid { grid-template-columns: 1fr; } }
  .gx-pcard { position: relative; aspect-ratio: 16 / 11; border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; display: block; isolation: isolate; }
  .gx-pcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.4s ease; }
  .gx-pcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,13,0.15) 0%, rgba(13,13,13,0.55) 50%, rgba(13,13,13,0.92) 100%); z-index: 1; }
  .gx-pcard:hover img { transform: scale(1.03); }
  .gx-pcard-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 26px 22px; z-index: 2; color: #fff; }
  .gx-pcard-body h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.1; margin: 0 0 8px; text-transform: uppercase; }
  .gx-pcard-body p { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.75); margin: 0 0 14px; }
  .gx-pcard-link { font-size: 13px; font-weight: 600; color: #3cb0b2; display: inline-flex; align-items: center; gap: 6px; }

  /* ============ 4:11AM EMERGENCY ============ */
  .gx-411 { position: relative; background: #0d0d0d; padding: 110px 0; overflow: hidden; }
  .gx-411::before { content: ''; position: absolute; inset: 0; background-image: url('../images/manus/177688B0-4585-4E36-BAEB-C7F10B7C834D_1_105_c_f57ad175.webp'); background-size: cover; background-position: right center; opacity: 0.18; z-index: 0; }
  .gx-411::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,13,13,0.96) 0%, rgba(13,13,13,0.7) 60%, rgba(13,13,13,0.9) 100%); z-index: 0; }
  .gx-411 .container { position: relative; z-index: 1; max-width: 720px; }
  .gx-411 h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(40px, 5.4vw, 64px); line-height: 1.0; letter-spacing: -0.01em; margin: 0 0 24px; color: #fff; text-transform: uppercase; }
  .gx-411 h2 .accent-yellow { color: #faed27; display: block; }
  .gx-411 p { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.78); margin: 0 0 28px; max-width: 540px; }
  .gx-411 p strong { color: #fff; font-weight: 700; }
  .gx-411-list { list-style: none; padding: 0; margin: 0 0 36px; }
  .gx-411-list li { font-size: 14px; color: rgba(255,255,255,0.65); padding-left: 18px; position: relative; margin-bottom: 10px; }
  .gx-411-list li::before { content: '—'; position: absolute; left: 0; color: #3cb0b2; }
  @media (max-width: 700px) { .gx-411 { padding: 72px 0; } }

  /* ============ MANNY ABOUT (dark) ============ */
  .gx-manny-dark-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
  @media (max-width: 900px) { .gx-manny-dark-grid { grid-template-columns: 1fr; gap: 40px; } }
  .gx-manny-photo-wrap { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; }
  .gx-manny-photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gx-manny-badge { position: absolute; left: 24px; bottom: 24px; background: #faed27; color: #0d0d0d; font-family: 'Barlow Condensed', sans-serif; padding: 14px 20px; border-radius: 6px; }
  .gx-manny-badge .num { font-size: 28px; font-weight: 700; line-height: 1; }
  .gx-manny-badge .lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; display: block; }
  .gx-manny p { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.7); margin: 0 0 16px; }
  .gx-manny-checks { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; gap: 12px; }
  .gx-manny-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: rgba(255,255,255,0.85); }
  .gx-manny-checks svg { flex-shrink: 0; color: #3cb0b2; margin-top: 2px; }
  .gx-manny-link { font-size: 14px; font-weight: 600; color: #faed27; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }

  /* ============ TESTIMONIALS (dark, 4 cards) ============ */
  .gx-testimonials-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  @media (max-width: 900px) { .gx-testimonials-4 { grid-template-columns: 1fr; } }
  .gx-tcard-dark { background: #0d0d0d; border-left: 3px solid #faed27; padding: 28px 28px 24px; border-radius: 0 8px 8px 0; }
  .gx-tcard-stars { color: #faed27; font-size: 14px; letter-spacing: 3px; margin-bottom: 14px; }
  .gx-tcard-dark p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.85); margin: 0 0 18px; }
  .gx-tcard-name { font-size: 14px; font-weight: 700; color: #fff; }
  .gx-tcard-where { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 2px; }

  /* ============ COMMERCIAL CTA STRIP ============ */
  .gx-commercial { position: relative; background: #0d0d0d; padding: 100px 0; overflow: hidden; }
  .gx-commercial::before { content: ''; position: absolute; inset: 0; background-image: url('../images/manus/GemelecFactoryCables_931edd4a.webp'); background-size: cover; background-position: center; opacity: 0.22; z-index: 0; }
  .gx-commercial::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,13,0.85) 0%, rgba(13,13,13,0.7) 100%); z-index: 0; }
  .gx-commercial .container { position: relative; z-index: 1; max-width: 760px; }
  .gx-commercial h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.0; margin: 0 0 18px; color: #fff; text-transform: uppercase; }
  .gx-commercial p { font-size: 17px; color: rgba(255,255,255,0.78); margin: 0 0 30px; max-width: 580px; line-height: 1.6; }
  .gx-commercial-actions { display: flex; gap: 14px; flex-wrap: wrap; }

  /* ============ SERVICE AREAS (dark variant) ============ */
  .gx-area-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .gx-area-chip { display: inline-block; padding: 10px 16px; font-size: 14px; color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; text-decoration: none; transition: border-color 0.15s, color 0.15s, background 0.15s; }
  .gx-area-chip:hover { border-color: #3cb0b2; color: #3cb0b2; background: rgba(60,176,178,0.06); }

  /* ============ FINAL CTA ============ */
  .gx-final-cta { text-align: center; }
  .gx-final-cta .gx-h2 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 16px; }
  .gx-final-cta .gx-h2 .accent-yellow { display: inline; }
  .gx-final-sub { font-size: 17px; color: rgba(255,255,255,0.7); margin: 0 auto 32px; max-width: 540px; }
  .gx-final-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

  .nav { background: #0d0d0d; }
  .footer { background: #0d0d0d; }

  /* ============ REVIEWS CAROUSEL ============ */
  .gx-reviews-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
  .gx-reviews-head .gx-eyebrow { margin-bottom: 16px; }
  .gx-reviews-head .gx-h2 { margin: 0; }
  .gx-google-badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; text-decoration: none; color: #fff; transition: border-color 0.15s, background 0.15s; }
  .gx-google-badge:hover { border-color: #3cb0b2; background: rgba(60,176,178,0.06); }
  .gx-google-text { display: flex; flex-direction: column; line-height: 1.25; font-family: 'DM Sans', sans-serif; }
  .gx-google-text span { font-size: 12px; color: rgba(255,255,255,0.65); letter-spacing: 0.04em; }
  .gx-google-text strong { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.04em; }
  .gx-google-text strong small { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.55); margin-left: 4px; }

  .gx-reviews-swiper { padding: 4px 4px 12px; overflow: hidden; }
  .gx-reviews-swiper .swiper-wrapper { align-items: stretch; }
  .gx-reviews-swiper .swiper-slide { height: auto; display: flex; }
  .gx-rcard { display: flex; flex-direction: column; background: #0d0d0d; border: 1px solid rgba(255,255,255,0.08); border-left: 3px solid #faed27; border-radius: 0 10px 10px 0; padding: 26px 26px 22px; width: 100%; min-height: 100%; transition: border-color 0.2s, transform 0.2s; }
  .gx-rcard:hover { border-left-color: #3cb0b2; transform: translateY(-2px); }
  .gx-rcard-stars { color: #faed27; font-size: 14px; letter-spacing: 3px; margin-bottom: 14px; }
  .gx-rcard-text { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.85); margin: 0 0 22px; flex: 1; }
  .gx-rcard-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
  .gx-rcard-name { font-size: 14px; font-weight: 700; color: #fff; }
  .gx-rcard-when { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }
  .gx-rcard-source { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.55); white-space: nowrap; }
  .gx-rcard-source svg { flex-shrink: 0; }

  .gx-swiper-nav { display: flex; gap: 10px; justify-content: center; margin-top: 28px; }
  .gx-prev, .gx-next { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; display: flex; align-items: center; justify-content: center; padding: 0; }
  .gx-prev:hover, .gx-next:hover { border-color: #3cb0b2; background: rgba(60,176,178,0.08); color: #3cb0b2; }
  .gx-prev:focus-visible, .gx-next:focus-visible { outline: 2px solid #3cb0b2; outline-offset: 2px; }

  @media (max-width: 720px) {
    .gx-reviews-head { align-items: flex-start; }
    .gx-google-badge { width: 100%; justify-content: flex-start; }
  }

/* === ADDED 2026-06-04: footer logo aspect-ratio fix === */
/* .nav-logo is a flex-direction:column container; its default align-items:stretch
   was stretching the footer logo <img> to the width of the wide brand column.
   Pin alignment so the footer logo keeps the same intrinsic size as the header. */
.footer .nav-logo { align-items: flex-start; }

/* === ADDED 2026-07-29: WhatsApp floating button === */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 6px 18px rgba(0,0,0,0.32); }
.whatsapp-float:focus-visible { outline: 2px solid #128c7e; outline-offset: 3px; }
.whatsapp-float svg { width: 28px; height: 28px; }
@media (max-width: 480px) {
  .whatsapp-float { right: 16px; bottom: 16px; width: 50px; height: 50px; }
  .whatsapp-float svg { width: 25px; height: 25px; }
}

/* === ADDED 2026-07-29: job request photo upload === */
.job-photo-preview { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.job-photo-thumb { position: relative; width: 84px; height: 84px; border-radius: var(--radius-lg); overflow: hidden; border: 1.5px solid var(--gray); }
.job-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.job-photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(13,13,13,0.75);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.job-photo-remove:hover { background: #0d0d0d; }
.job-photo-remove:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* === ADDED 2026-08-31: review timestamps render from datetime attr === */
  .gx-rcard-when { display: block; }

/* === ADDED 2026-09-01 — Field portal (/tech) ============================== */
/* Mobile-first and deliberately not reusing the marketing page chrome: this is a tool used
   one-handed, in a switchboard cupboard, often in gloves. Big targets, high contrast, no
   decoration. 16px minimum on inputs because anything smaller makes iOS zoom on focus. */

.tech-body {
  background: #f4f4f2;
  margin: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.tech-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px calc(48px + env(safe-area-inset-bottom));
}

.tech-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: calc(14px + env(safe-area-inset-top)) 0 14px;
  border-bottom: 2px solid #1a1a1a;
  margin-bottom: 22px;
}

.tech-logo {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: #1a1a1a;
}

.tech-header-sub {
  font-size: 13px;
  color: #6b6b66;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tech-who {
  margin-left: auto;
  background: #e8e8e4;
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  color: #3d3d38;
  cursor: pointer;
}

.tech-panel h1 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 30px; margin: 0 0 6px; }
.tech-lede { color: #55554f; margin: 0 0 22px; line-height: 1.5; }

.tech-section-title {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 30px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #d8d8d2;
}
.tech-section-title:first-of-type { margin-top: 6px; }

.tech-panel label {
  display: block;
  font-weight: 500;
  font-size: 14px;
  margin: 14px 0 6px;
  color: #1a1a1a;
}

.tech-panel input[type="text"],
.tech-panel input[type="tel"],
.tech-panel input[type="email"],
.tech-panel input[type="password"],
.tech-panel textarea {
  width: 100%;
  box-sizing: border-box;
  /* 16px exactly: iOS Safari zooms the viewport on focus below this, and a zoomed page in
     one hand on a ladder is how a tool stops being used. */
  font: 400 16px/1.45 'DM Sans', system-ui, sans-serif;
  padding: 13px 14px;
  border: 1.5px solid #c9c9c2;
  border-radius: 10px;
  background: #fff;
  color: #1a1a1a;
}

.tech-panel textarea { resize: vertical; min-height: 150px; }

.tech-panel input:focus,
.tech-panel textarea:focus {
  outline: none;
  border-color: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.12);
}

.tech-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .tech-row { grid-template-columns: 1fr; gap: 0; } }

.tech-hint { font-size: 13.5px; color: #6b6b66; line-height: 1.5; margin: 0 0 10px; }
.tech-hint-centre { text-align: center; margin-top: 12px; }
.tech-counter { font-size: 12px; color: #8a8a83; text-align: right; margin-top: 5px; }

.tech-error {
  background: #fdecea;
  border-left: 3px solid #c0392b;
  color: #8c2418;
  padding: 11px 13px;
  border-radius: 6px;
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.45;
}

.tech-btn-block {
  display: block;
  width: 100%;
  margin-top: 20px;
  /* 54px: a gloved thumb on a moving ute seat, not a mouse pointer. */
  min-height: 54px;
  font-size: 17px;
}

.tech-submit { margin-top: 26px; }

.tech-panel input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  /* 16px here too. At 15px iOS zooms the viewport the moment the tech taps Photos, which is
     the one control they are guaranteed to tap on every job. Caught by rendering at 390px
     rather than by reading the rule above and assuming it covered this. */
  font-size: 16px;
  padding: 14px;
  border: 1.5px dashed #b6b6ad;
  border-radius: 10px;
  background: #fff;
}

.tech-success { text-align: center; padding: 40px 0; }
.tech-success-tick {
  width: 74px; height: 74px; line-height: 74px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #1d6f52;
  color: #fff;
  font-size: 38px;
}
.tech-success h2 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 30px; margin: 0 0 8px; }
.tech-success p { color: #55554f; margin: 0 0 8px; line-height: 1.5; }

/* Marks a card that came from the field portal rather than a web enquiry. Rendered only
   when source is not 'website', so existing customer enquiries look exactly as before. */
.job-source {
  display: inline-block;
  background: #1a1a1a;
  color: #faed27;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin: 0 0 10px;
}

/* Field portal: sent banner + read-back overlay (added 2026-09-01) */
.tech-sent {
  background: #e7f4ee;
  border-left: 4px solid #1d6f52;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #1d4536;
}
.tech-sent strong { display: block; font-size: 16px; margin-bottom: 4px; }
.tech-sent-clear {
  display: inline-block;
  margin-top: 10px;
  background: none;
  border: 0;
  padding: 6px 0;
  font: inherit;
  font-weight: 700;
  color: #1d6f52;
  text-decoration: underline;
  cursor: pointer;
}

/* Every element on this page that carries an explicit `display` outranks the browser's own
   `[hidden] { display: none }`, so `el.hidden = true` stops hiding it. That has now bitten
   twice — the review overlay covered the whole page from load and swallowed every tap, and
   the read-more button showed on descriptions short enough not to need it. Both times the
   CSS looked right in isolation and only a real browser found it. This one rule closes the
   class for the whole portal; do not remove it when adding a `display` below.
   Scoped to .tech-body so the dashboard and marketing pages are untouched. */
.tech-body [hidden] { display: none !important; }

.tech-review {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 16, 0.72);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.tech-review-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 560px;
  margin: auto 0 0;
}
@media (min-width: 560px) { .tech-review { align-items: center; } .tech-review-card { margin: auto; } }

.tech-review-card h2 {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 26px;
  margin: 0 0 10px;
}
.tech-review-warn {
  background: #fdf6d8;
  border-left: 3px solid #caa60a;
  padding: 11px 13px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #5c4a05;
  margin: 0 0 18px;
}
.tech-review-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  margin: 0 0 18px;
  font-size: 14.5px;
}
.tech-review-list dt { color: #6b6b66; }
.tech-review-list dd { margin: 0; color: #1a1a1a; font-weight: 500; }
.tech-review-label { font-size: 13px; color: #6b6b66; margin: 0 0 6px; }
.tech-review-desc {
  margin: 0;
  padding: 13px 15px;
  background: #f4f4f2;
  border-radius: 10px;
  font-size: 15.5px;
  line-height: 1.55;
  color: #1a1a1a;
  /* Dictation produces long unbroken runs; keep them inside the card. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  /* Collapsed to roughly six lines with the last one fading, so it is obvious at a glance
     that the text continues. Expanding is handled by .is-expanded, and the card itself
     scrolls once it does. */
  max-height: 9.6em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.tech-review-desc.is-expanded {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.tech-review-more {
  display: block;
  width: 100%;
  margin-top: 8px;
  background: #f4f4f2;
  border: 1.5px solid #d8d8d2;
  border-radius: 8px;
  padding: 11px 0;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
}
.tech-review-back {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: none;
  border: 0;
  padding: 14px 0;
  font: inherit;
  font-size: 15px;
  color: #55554f;
  text-decoration: underline;
  cursor: pointer;
}

/* Field portal: checkboxes, commercial block, cross-links (added 2026-09-01) */
.tech-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 18px 0 0;
  padding: 14px;
  background: #fff;
  border: 1.5px solid #c9c9c2;
  border-radius: 10px;
  font-weight: 400;
  cursor: pointer;
}
.tech-check input[type="checkbox"] {
  /* 24px so it is a thumb target, not a mouse target. */
  width: 24px; height: 24px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  accent-color: #1a1a1a;
}
.tech-check span { font-size: 14px; line-height: 1.45; color: #55554f; }
.tech-check strong { display: block; font-size: 15.5px; color: #1a1a1a; margin-bottom: 2px; }

#t_commercial_fields {
  margin-top: 4px;
  padding: 4px 0 8px 14px;
  border-left: 3px solid #faed27;
}
.tech-optional { font-weight: 400; color: #8a8a83; font-size: 13px; }

.tech-nav-link {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 2px solid #faed27;
  padding-bottom: 1px;
}
/* Only one of the two gets the auto margin, or they both push and separate. */
.tech-nav-link:not([hidden]) ~ .tech-who { margin-left: 10px; }

.dash-back { margin: 0 0 14px; font-size: 14px; }
.dash-back a { color: var(--text-secondary, #55554f); text-decoration: none; border-bottom: 2px solid #faed27; padding-bottom: 1px; }

/* === ADDED 2026-09-01 — Google Places dropdown (.pac-*) ==================== */
/* Google injects this dropdown and gives it almost no styling of its own: no background,
   no border, no z-index. It is positioned ABSOLUTELY over the page, so without a background
   it renders as bare text sitting on top of whatever is underneath — on /tech that was the
   address input, with the suggestion text and marker icons colliding with what the tech had
   just typed.
   contact.html and job-request.html each carry their own copy of these rules in a <style>
   block, which is why only the field portal was affected. Defining them here means the next
   page to use an address field is styled by default rather than by remembering. */
.pac-container {
  background: #fff;
  border: 1px solid #e6e4dd;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 20, 15, 0.14);
  /* Above everything on the page. The portal's review overlay sits at 50; this has to clear
     it and anything else, because a dropdown behind another element is unusable. */
  z-index: 10000;
  margin-top: 4px;
  overflow: hidden;
  font-family: 'DM Sans', system-ui, sans-serif;
}

.pac-item {
  /* 15px and roomy padding: this is tapped with a thumb on a phone, not clicked. */
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.35;
  color: #55554f;
  cursor: pointer;
  border-top: 1px solid #f0eee7;
}
.pac-item:first-child { border-top: 0; }
.pac-item:hover,
.pac-item-selected { background: #faf9f5; }

.pac-item-query { font-size: 15px; color: #1a1a1a; margin-right: 6px; }
.pac-matched { font-weight: 700; }

/* Google's marker sprite. Without a width it collapses and the icon overlaps the text. */
.pac-icon { margin-right: 8px; }

/* Since 1 Nov 2026 js/address-suggest.js draws this list itself (Places API (New)); Google's own
   widget, which brought its own positioning and one-line rows, is gone. The .pac-* look above
   still applies. "Google Maps" at the foot: Google's terms, for suggestions without its map. */
.gx-suggest { position: absolute; box-sizing: border-box; }
.gx-suggest .pac-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-suggest-by { padding: 6px 14px; font-size: 11px; line-height: 1.3; color: #6b6b63; text-align: right; border-top: 1px solid #f0eee7; }

/* === ADDED 2026-09-28 — WeChat button and QR dialog (dialog built by js/main.js) === */
/* Dark text on WeChat green: white on #07c160 is 2.4:1, #0d0d0d is about 8:1. */
.gx-btn-wechat { background: #07c160; color: #0d0d0d; padding: 16px 28px; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 15px; border: 1px solid #07c160; border-radius: 6px; text-decoration: none; transition: background 0.15s, border-color 0.15s; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.gx-btn-wechat:hover { background: #06ad56; border-color: #06ad56; }
.wechat-dialog { border: none; border-radius: 12px; padding: 28px 24px 20px; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; text-align: center; color: #0d0d0d; background: #fff; }
.wechat-dialog::backdrop { background: rgba(0, 0, 0, 0.65); }
.wechat-dialog h2 { font-family: var(--font-heading); font-size: 28px; font-weight: 800; text-transform: uppercase; line-height: 1; margin: 0 0 14px; }
.wechat-dialog img { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto 14px; }
.wechat-dialog p { font-size: 14px; line-height: 1.5; margin: 0 0 8px; color: rgba(0, 0, 0, 0.7); }
.wechat-close { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: none; background: none; font-size: 30px; line-height: 1; color: #0d0d0d; cursor: pointer; }
.wechat-close:focus-visible { outline: 2px solid #0d0d0d; outline-offset: -4px; }
.wechat-dialog .wechat-id { color: #0d0d0d; font-size: 15px; }
.wechat-copy { margin-left: 6px; padding: 6px 12px; min-height: 32px; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 6px; background: #fff; font: 600 13px 'DM Sans', sans-serif; color: #0d0d0d; cursor: pointer; }
.wechat-copy:hover { border-color: #0d0d0d; }

/* === ADDED 2026-09-28 — Field portal: add-to-home-screen box (js/tech-portal.js) === */
.tech-install {
  background: #1a1a1a;
  color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.5;
}
.tech-install strong { font-weight: 700; }
.tech-install > strong { display: block; font-size: 16px; margin-bottom: 4px; }
.tech-install p { margin: 0 0 10px; color: rgba(255, 255, 255, 0.8); }
.tech-install-steps { margin: 0 0 12px; padding-left: 22px; }
.tech-install-steps li { margin-bottom: 6px; }
.tech-install-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tech-install-actions .btn { min-height: 48px; }
.tech-install-dismiss {
  background: none;
  border: 0;
  padding: 12px 4px;
  min-height: 44px;
  font: inherit;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
  cursor: pointer;
}

/* === ADDED 2026-09-29 — Staff new-enquiry notifications box (js/staff-push.js), both staff pages === */
.staff-push {
  background: #fff;
  border: 1px solid #e6e4dd;
  border-left: 4px solid #faed27;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #1a1a1a;
}
.staff-push-lead { margin: 0 0 10px; }
.staff-push-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.staff-push-actions .btn { min-height: 48px; }
.staff-push-link {
  background: none;
  border: 0;
  padding: 10px 2px;
  min-height: 44px;
  font: inherit;
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: underline;
  cursor: pointer;
}
.staff-push-note { margin: 10px 0 0; font-size: 13.5px; color: #55554f; }
/* Compact: the "on" state (and "off" after Not now) is one small line, not a card. */
.staff-push.is-compact { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 14px; font-size: 13.5px; color: #55554f; }
.staff-push-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.staff-push.is-compact .staff-push-link { min-height: 36px; padding: 6px 0; font-weight: 600; color: #55554f; }
.staff-push.is-compact .staff-push-note { margin-top: 4px; }

/* === ADDED 2026-09-29 — Price-book picker (js/pricebook-picker.js) === */
/* The dropdown is appended to <body> and placed in page coordinates by the script, so no
   table cell or scroll box on either staff page can clip it. Same z-index as the Google
   Places dropdown above: clear of the portal's review overlay (50) and everything else. */
.gx-pb-list {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e6e4dd;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 20, 15, 0.14);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  font-family: 'DM Sans', system-ui, sans-serif;
  text-align: left;
}
.gx-pb-list[hidden] { display: none; }
/* 44px minimum: these get tapped with a thumb on site. */
.gx-pb-option {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 8px 14px;
  border-top: 1px solid #f0eee7;
  line-height: 1.3;
  color: #1a1a1a;
  cursor: pointer;
}
.gx-pb-option:first-child { border-top: 0; }
.gx-pb-option:hover { background: #faf9f5; }
/* The option highlighted with the arrow keys (aria-activedescendant on the input). */
.gx-pb-option[aria-selected="true"] { background: #fffbe0; box-shadow: inset 3px 0 0 #faed27; }
.gx-pb-desc { font-size: 15px; }
.gx-pb-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; color: #55554f; }
.gx-pb-code { font-family: 'IBM Plex Mono', ui-monospace, monospace; overflow-wrap: anywhere; }
.gx-pb-price { font-variant-numeric: tabular-nums; font-weight: 700; color: #0d0d0d; white-space: nowrap; }
/* The list's only line when there is nothing to pick: no match, still loading, or no price
   book. Not an option to tap, so no hover and no pointer. */
.gx-pb-message {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.4;
  color: #55554f;
  cursor: default;
}

/* 16px stops iOS zooming the page when the box is tapped. The dashboard's costing inputs are
   13px on a wide screen and 16px only in its phone layout (700px and under), so this covers
   any touch screen, an iPad included, without enlarging them for a mouse. The attribute is
   only there to outrank the dashboard's own `.job-costing-table input`. */
@media (pointer: coarse), (max-width: 700px) {
  input.gx-pb-input[role="combobox"] { font-size: 16px; }
}

/* "Often added with:" chips, under the costing table after a pick. */
.gx-pb-often { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.gx-pb-often[hidden] { display: none; }
.gx-pb-often-label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #55554f; margin-right: 2px; }
.gx-pb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid #e6e4dd;
  border-radius: 10px;
  background: #fff;
  font: 500 13.5px/1.3 'DM Sans', system-ui, sans-serif;
  color: #1a1a1a;
  text-align: left;
  cursor: pointer;
}
.gx-pb-chip:hover { border-color: #faed27; background: #fffdf0; }
.gx-pb-chip:focus-visible { outline: 2px solid #0d0d0d; outline-offset: 2px; }
.gx-pb-chip-desc { min-width: 0; overflow-wrap: anywhere; }
.gx-pb-chip-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: #0d0d0d; }
/* One chip per line on a phone, price on the right, like the stacked costing rows above. */
@media (max-width: 700px) {
  .gx-pb-often-label { flex: 1 1 100%; }
  .gx-pb-chip { width: 100%; justify-content: space-between; font-size: 14px; }
}

/* === ADDED 2026-09-29 — Field portal: price-book items, and the dashboard's "picked on site" label === */
/* The tech's list under the job description (js/tech-portal.js). RRP only: no discount is
   ever shown on a tech's phone. 44px on every button, 16px on the quantity box (iOS zooms
   below that), same card look as the checkboxes above. */
.tech-items-note {
  margin: 10px 0 0;
  padding: 9px 12px;
  background: #fdf6d8;
  border-left: 3px solid #caa60a;
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #5c4a05;
}
/* The same box confirming a pick ("Added: ... (now 2)"), so a tap that changed nothing on
   screen above a phone's keyboard still says what it did. Green: news, not a warning. */
.tech-items-note.is-added { background: #e7f4ee; border-left-color: #2f7a57; color: #1d4536; }
.tech-items { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tech-item {
  background: #fff;
  border: 1.5px solid #c9c9c2;
  border-radius: 10px;
  padding: 12px 14px;
}
.tech-item-desc { display: block; font-size: 15.5px; line-height: 1.4; color: #1a1a1a; overflow-wrap: anywhere; }
.tech-item-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 3px; font-size: 13px; color: #6b6b66; font-variant-numeric: tabular-nums; }
.tech-item-code { font-family: 'IBM Plex Mono', ui-monospace, monospace; overflow-wrap: anywhere; }
.tech-item-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.tech-qty { display: inline-flex; align-items: center; gap: 6px; }
.tech-qty-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid #c9c9c2;
  border-radius: 10px;
  background: #f4f4f2;
  font: 700 22px/1 'DM Sans', system-ui, sans-serif;
  color: #1a1a1a;
  cursor: pointer;
}
.tech-qty-btn:disabled { opacity: 0.35; cursor: default; }
.tech-qty-btn:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
/* Outranks `.tech-panel input[type="text"]`, which would make it full width. */
.tech-panel .tech-qty input.tech-qty-input {
  width: 64px;
  height: 44px;
  padding: 0 6px;
  text-align: center;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.tech-item-remove {
  background: none;
  border: 0;
  min-height: 44px;
  padding: 10px 2px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: #8c2418;
  text-decoration: underline;
  cursor: pointer;
}
.tech-items-often { margin: 12px 0 0; }
.tech-items-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  background: #fff;
  border-left: 4px solid #faed27;
  border-radius: 8px;
  font-size: 14.5px;
  color: #55554f;
}
.tech-items-total strong {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 24px;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The same list on the read-back sheet. */
.tech-review-items-label { margin-top: 18px; }
.tech-review-items { list-style: none; margin: 0; padding: 0; font-size: 14.5px; color: #1a1a1a; }
.tech-review-items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #ecebe6;
}
.tech-review-items li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.tech-review-items li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tech-review-items .tech-review-items-total { border-bottom: 0; font-weight: 700; }

/* Dashboard: a costing a tech picked on site, not an AI draft, so not the AI's amber. */
.job-ai-label.is-picked { color: #1d4536; background: #e7f4ee; border-color: #b7dcc9; }

/* === ADDED 2026-10-02: "At a glance" fact box (index, about, electrician/matraville) ===
   The plain facts in one place, as visible text, so a reader or an AI assistant can
   quote them without piecing them together from the footer and llms.txt. The three
   copies are hand-kept in sync (no templating); see CLAUDE.md. */
.gx-glance {
  max-width: 820px;
  margin: 32px 0 0;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid #ececea;
  border-left: 4px solid #3cb0b2;
  border-radius: 8px;
  text-align: left;
}
.gx-glance h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0 0 16px;
  color: #0d0d0d;
}
.gx-glance dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 24px;
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 15.5px;
  line-height: 1.5;
}
.gx-glance dt { font-weight: 700; color: #0d0d0d; }
.gx-glance dd { margin: 0; color: #3a3a38; }
.gx-glance a { color: #2d8587; font-weight: 600; text-decoration: none; }
.gx-glance a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .gx-glance { padding: 22px 20px; }
  .gx-glance dl { grid-template-columns: 1fr; gap: 2px; }
  .gx-glance dd { margin-bottom: 10px; }
}