/*
Theme Name: Emplastrum Drywall
Theme URI: https://emplastrumdrywall.ca
Author: Emplastrum Drywall
Description: Custom theme for Emplastrum Drywall (emplastrumdrywall.ca) — no Elementor, no page builders. Pure HTML/CSS/PHP. Built for fast, SEO-friendly residential drywall pages in Calgary and Cochrane.
Version: 1.0.0
License: Proprietary
Text Domain: af-custom
*/

/* ── CSS VARIABLES (Emplastrum Drywall — modern contractor restyle 2026-05-21) ── */
/* LIGHT palette 2026-05-26 (blue/grey/white) */
:root {
  --navy: #f6f9fc;
  --navy-mid: #e2eaf4;
  --red: #1d4ed8;
  --red-light: #4f84ff;
  --gold: #1d4ed8;
  --gold-light: #6fa0ff;
  --white: #0f1b2d;
  --gray: #3f4b59;
  --light-bg: #eef2f7;
  --line: #dde3ec;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* ── PHONE BANNER ── */
.phone-banner {
  background: var(--red);
  text-align: center;
  padding: 12px 5%;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.phone-banner a { color: #fff; text-decoration: none; }
.phone-banner a:hover { text-decoration: underline; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; width: 100%; z-index: 100;
  padding: 18px 5%;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(22,24,29,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(47,107,255,0.15);
}
.logo {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.logo span { color: var(--white); }
nav ul { list-style: none; display: flex; gap: 32px; }
nav ul li a {
  color: var(--gray);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s;
}
nav ul li a:hover { color: var(--gold); }
.nav-cta {
  background: var(--red);
  color: var(--white) !important;
  padding: 10px 22px;
  border-radius: 3px;
  transition: background 0.2s !important;
}
.nav-cta:hover { background: var(--red-light) !important; }
.nav-social {
  display: flex !important;
  align-items: center;
  color: var(--gray) !important;
  transition: color 0.2s !important;
}
.nav-social:hover { color: var(--gold) !important; }

/* ── NAV DROPDOWNS ── */
.has-dropdown { position: relative; }
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(22,24,29,0.97);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(47,107,255,0.15);
  border-radius: 8px;
  padding: 8px 0;
  min-width: 220px;
  z-index: 101;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  list-style: none;
}
.has-dropdown:hover .dropdown { display: block; }
.dropdown li { margin: 0; }
.dropdown li a {
  display: block;
  padding: 10px 20px;
  font-size: 0.82rem;
  color: var(--gray);
  text-transform: none;
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s;
}
.dropdown li a:hover {
  background: rgba(47,107,255,0.08);
  color: var(--gold);
}

/* ── MOBILE NAV ── */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--gold);
  font-size: 1.5rem;
  cursor: pointer;
}

/* ── HERO ── */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 100px 5% 60px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(47,107,255,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(47,107,255,0.05) 0%, transparent 60%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 80px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}
.urgency-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(47,107,255,0.15);
  border: 1px solid rgba(47,107,255,0.4);
  color: #4f84ff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
  animation: pulse-border 2.5s infinite;
}
@keyframes pulse-border {
  0%,100% { border-color: rgba(47,107,255,0.4); }
  50% { border-color: rgba(47,107,255,0.8); }
}
.urgency-tag::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--red-light);
  border-radius: 50%;
  animation: dot-pulse 1.5s infinite;
}
@keyframes dot-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.3; }
}
h1 {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2.6rem, 4.5vw, 4.2rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 24px;
}
h1 em {
  font-style: normal;
  color: var(--gold);
  display: block;
}
.hero-sub {
  font-size: 1.1rem;
  color: var(--gray);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 40px;
  font-weight: 300;
}
.hero-sub strong { color: var(--white); font-weight: 600; }
.cta-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.btn-primary {
  background: var(--red);
  color: #fff;
  padding: 16px 32px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(47,107,255,0.3);
  display: inline-block;
}
.btn-primary:hover {
  background: var(--red-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(47,107,255,0.45);
}
.btn-ghost {
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  display: flex; align-items: center; gap: 8px;
  transition: gap 0.2s;
}
.btn-ghost:hover { gap: 14px; }
.btn-ghost::after { content: '\2192'; }

/* Hero Stats */
.hero-stats {
  display: flex; gap: 32px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.stat-num {
  font-family: 'DM Sans', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
}
.stat-label {
  font-size: 0.78rem;
  color: var(--gray);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Hero Form Card */
.hero-card {
  background: var(--navy-mid);
  border: 1px solid rgba(47,107,255,0.2);
  border-radius: 12px;
  padding: 36px 32px;
  position: relative;
}
.hero-card::before {
  content: '';
  position: absolute;
  top: -1px; left: 24px; right: 24px; height: 3px;
  background: linear-gradient(90deg, var(--red), var(--gold));
  border-radius: 0 0 3px 3px;
}
.card-headline {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--white);
}
.card-sub {
  font-size: 0.83rem;
  color: var(--gray);
  margin-bottom: 24px;
}
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.1);
  color: var(--white);
  padding: 12px 14px;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  transition: border-color 0.2s;
  outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--gold);
}
.form-group select option { background: var(--navy-mid); }
.form-group input::placeholder { color: rgba(138,155,176,0.5); }
.submit-btn {
  width: 100%;
  background: var(--red);
  color: #fff;
  border: none;
  padding: 15px;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s, transform 0.2s;
  letter-spacing: 0.02em;
}
.submit-btn:hover { background: var(--red-light); transform: translateY(-1px); }
.card-disclaimer {
  text-align: center;
  font-size: 0.72rem;
  color: var(--gray);
  margin-top: 12px;
  line-height: 1.5;
}

/* ── TRUST BAR ── */
.trust-bar {
  background: var(--navy-mid);
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding: 24px 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.82rem;
  color: var(--gray);
  font-weight: 500;
}
.trust-icon {
  width: 20px; height: 20px;
  color: var(--gold);
  flex-shrink: 0;
}

/* ── CITY BLOCKS ── */
.city-block {
  display: block;
  background: var(--navy-mid);
  border: 1px solid rgba(47,107,255,0.1);
  border-radius: 6px;
  padding: 12px 14px;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.15s;
}
.city-block:hover {
  border-color: rgba(47,107,255,0.35);
  transform: translateY(-1px);
}
.city-name {
  display: block;
  color: var(--white);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.3;
}
.city-info {
  display: block;
  color: var(--gray);
  font-size: 0.7rem;
  margin-top: 2px;
}

/* ── LEGAL HERO BADGE ── */
.legal-badge-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(47,107,255,0.08);
  border: 1px solid rgba(47,107,255,0.25);
  padding: 8px 16px;
  border-radius: 6px;
  margin-bottom: 32px;
  font-size: 0.82rem;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.03em;
}
.legal-badge-hero svg {
  flex-shrink: 0;
  color: var(--gold);
}

/* ── LEGAL AUTHORITY SECTION ── */
.legal-authority-section {
  padding: 50px 5%;
  background: linear-gradient(180deg, var(--navy) 0%, rgba(33,38,46,0.6) 50%, var(--navy) 100%);
  border-top: 1px solid rgba(47,107,255,0.1);
  border-bottom: 1px solid rgba(47,107,255,0.1);
}
.legal-authority-bar {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 40px;
  flex-wrap: wrap;
}
.legal-auth-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 300px;
  text-align: left;
}
.legal-auth-item svg { flex-shrink: 0; margin-top: 2px; }
.legal-auth-item strong {
  display: block;
  font-size: 0.92rem;
  color: var(--white);
  font-weight: 600;
  margin-bottom: 4px;
}
.legal-auth-item span {
  display: block;
  font-size: 0.78rem;
  color: var(--gray);
  line-height: 1.5;
}
.legal-auth-divider {
  width: 1px;
  background: rgba(47,107,255,0.2);
  align-self: stretch;
}
@media (max-width: 768px) {
  .legal-auth-divider { display: none; }
  .legal-authority-bar { flex-direction: column; align-items: center; gap: 28px; }
  .legal-auth-item { max-width: 100%; }
}

/* ── SECTION SHARED ── */
section { padding: 90px 5%; }
.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 900;
  line-height: 1.2;
  max-width: 720px;
}
.section-intro {
  font-size: 1.05rem;
  color: var(--gray);
  line-height: 1.7;
  max-width: 600px;
  margin-top: 16px;
  font-weight: 300;
}

/* ── CRISIS SECTION ── */
.crisis-section {
  background: var(--light-bg);
  color: var(--navy);
}
.crisis-section h2 { color: var(--navy); }
.crisis-section .section-label { color: var(--red); }
.crisis-section .section-intro { color: #445; }
.crisis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 52px;
}
.crisis-card {
  background: #fff;
  border-radius: 10px;
  padding: 28px 26px;
  border-left: 4px solid var(--red);
  box-shadow: 0 2px 20px rgba(0,0,0,0.07);
}
.crisis-card h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.crisis-card p { font-size: 0.88rem; color: #556; line-height: 1.65; }

/* ── SOLUTIONS ── */
.solutions-section { background: var(--navy); }
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 52px;
}
.solution-card {
  background: var(--navy-mid);
  border: 1px solid rgba(47,107,255,0.15);
  border-radius: 10px;
  padding: 32px 28px;
  transition: border-color 0.2s, transform 0.2s;
}
.solution-card:hover {
  border-color: rgba(47,107,255,0.5);
  transform: translateY(-4px);
}
.solution-icon { font-size: 1.8rem; margin-bottom: 18px; }
.solution-icon svg { width: 34px; height: 34px; display: block; }
.solution-card h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}
.solution-card p { font-size: 0.88rem; color: var(--gray); line-height: 1.65; }
.solution-tag {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(47,107,255,0.1);
  padding: 4px 10px;
  border-radius: 3px;
}

/* ── PROCESS ── */
.process-section { background: var(--navy-mid); }
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  margin-top: 52px;
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 32px; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47,107,255,0.3), transparent);
}
.step { text-align: center; padding: 0 20px; position: relative; }
.step-num {
  width: 64px; height: 64px;
  background: var(--navy);
  border: 2px solid rgba(47,107,255,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  position: relative;
  z-index: 1;
}
.step h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}
.step p { font-size: 0.85rem; color: var(--gray); line-height: 1.6; }

/* ── TESTIMONIALS ── */
.testimonials-section { background: var(--navy); }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 52px;
}
.testimonial-card {
  background: var(--navy-mid);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 10px;
  padding: 30px 26px;
  position: relative;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 16px; right: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 5rem;
  color: rgba(47,107,255,0.1);
  line-height: 1;
}
.stars {
  color: var(--gold);
  font-size: 0.9rem;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.testimonial-card p {
  font-size: 0.9rem;
  color: var(--gray);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 18px;
}
.testimonial-author { font-weight: 600; font-size: 0.85rem; color: var(--white); }
.testimonial-location { font-size: 0.78rem; color: var(--gray); margin-top: 2px; }

/* ── FAQ ── */
.faq-section { background: var(--light-bg); color: var(--navy); }
.faq-section h2 { color: var(--navy); }
.faq-section .section-label { color: var(--red); }
.faq-section .section-intro { color: #445; }
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  margin-top: 52px;
}
.faq-item {
  background: #fff;
  border-radius: 8px;
  padding: 24px 22px;
  border-left: 3px solid var(--red);
}
.faq-item h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.faq-item p { font-size: 0.86rem; color: #445; line-height: 1.65; }

/* ── FINAL CTA ── */
.final-cta {
  background: linear-gradient(135deg, #1a0a0a 0%, var(--navy) 50%, #0a1a2a 100%);
  text-align: center;
  padding: 100px 5%;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(47,107,255,0.12) 0%, transparent 70%);
}
.final-cta h2 { margin: 0 auto 20px; text-align: center; position: relative; }
.final-cta p {
  color: var(--gray);
  max-width: 560px;
  margin: 0 auto 40px;
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 300;
  position: relative;
}
.final-cta .cta-row { justify-content: center; position: relative; }

/* ── FOOTER ── */
footer {
  background: #050e1c;
  padding: 48px 5% 32px;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto 40px;
}
.footer-logo {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 14px;
}
.footer-logo span { color: var(--white); }
.footer-about {
  font-size: 0.83rem;
  color: var(--gray);
  line-height: 1.7;
  max-width: 300px;
}
footer h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
footer ul { list-style: none; }
footer ul li { margin-bottom: 9px; }
footer ul li a {
  color: var(--gray);
  text-decoration: none;
  font-size: 0.83rem;
  transition: color 0.2s;
}
footer ul li a:hover { color: var(--white); }
.footer-legal-strip {
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 16px 20px;
  background: rgba(47,107,255,0.04);
  border: 1px solid rgba(47,107,255,0.12);
  border-radius: 8px;
  font-size: 0.76rem;
  color: var(--gray);
  text-align: center;
  line-height: 1.6;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 24px;
  font-size: 0.76rem;
  color: var(--gray);
  max-width: 1200px;
  margin: 56px auto 0;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── BLOG STYLES ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.blog-card {
  background: var(--navy-mid);
  border: 1px solid rgba(47,107,255,0.12);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.blog-card:hover {
  border-color: rgba(47,107,255,0.4);
  transform: translateY(-3px);
}
.blog-card-body { padding: 24px; }
.blog-card h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.3;
}
.blog-card h3 a { color: inherit; text-decoration: none; }
.blog-card h3 a:hover { color: var(--gold); }
.blog-card p { font-size: 0.86rem; color: var(--gray); line-height: 1.65; }
.blog-card-meta {
  font-size: 0.75rem;
  color: var(--gray);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.blog-read-more {
  display: inline-block;
  margin-top: 14px;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── SINGLE POST ── */
.post-content {
  max-width: 780px;
  margin: 0 auto;
}
.post-content h1 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  margin-bottom: 16px;
}
.post-meta {
  font-size: 0.82rem;
  color: var(--gray);
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.post-body {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--gray);
}
.post-body h2 {
  color: var(--white);
  font-size: 1.6rem;
  margin: 48px 0 16px;
}
.post-body h3 {
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem;
  margin: 36px 0 12px;
}
.post-body p { margin-bottom: 20px; }
.post-body ul, .post-body ol { margin: 16px 0; padding-left: 24px; }
.post-body li { margin-bottom: 8px; }
.post-body a { color: var(--gold); text-decoration: underline; }
.post-body strong { color: var(--white); }
.post-body blockquote {
  border-left: 3px solid var(--gold);
  padding: 16px 24px;
  margin: 24px 0;
  background: rgba(47,107,255,0.05);
  font-style: italic;
}

/* ── PAGE STYLES ── */
.page-header {
  background: var(--navy-mid);
  padding: 140px 5% 60px;
  text-align: center;
  border-bottom: 1px solid rgba(47,107,255,0.15);
}
.page-header h1 { margin: 0 auto; }
.page-body {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 5%;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--gray);
}
.page-body h2 { color: var(--white); margin: 40px 0 16px; }
.page-body p { margin-bottom: 20px; }
.page-body a { color: var(--gold); }

/* ── FADE ANIMATION ── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 0.7s ease forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: none; }
}
.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.2s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }
.fade-in:nth-child(4) { animation-delay: 0.4s; }
.fade-in:nth-child(5) { animation-delay: 0.5s; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-card { max-width: 500px; }
  nav { flex-wrap: wrap; }
  nav ul {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding: 12px 0 0;
    order: 3;
  }
  nav ul li { width: 100%; }
  nav ul li a {
    display: block;
    padding: 14px 0;
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 0.9rem;
  }
  nav ul li:last-child a.nav-cta {
    text-align: center;
    margin-top: 8px;
  }
  .mobile-toggle { display: block; }
  .dropdown {
    position: static;
    border: none;
    background: rgba(0,0,0,0.03);
    box-shadow: none;
    min-width: auto;
    padding: 0;
    border-radius: 0;
  }
  .has-dropdown:hover .dropdown { display: none; }
  .has-dropdown.open .dropdown { display: block; }
  .dropdown li a { padding: 10px 0 10px 16px; border-top: 1px solid rgba(0,0,0,0.04); }
  footer > div:first-child { grid-template-columns: 1fr 1fr !important; }
  .process-steps::before { display: none; }
  .hero-stats { flex-wrap: wrap; gap: 20px; }
  .hero { padding: 80px 5% 40px; min-height: auto; }
  h1 { font-size: 2.2rem; }
  section { padding: 60px 5%; }
  .trust-bar { padding: 20px 5%; gap: 16px; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .trust-bar { gap: 12px; justify-content: flex-start; flex-direction: column; align-items: flex-start; padding: 16px 5%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .faq-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 32px; }
  .hero-card { padding: 24px 20px; }
  .solutions-grid { grid-template-columns: 1fr; }
  .crisis-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr 1fr; gap: 32px; }
  footer > div:first-child { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .phone-banner { font-size: 0.78rem; padding: 10px 4%; }
  .btn-primary { width: 100%; text-align: center; }
  .cta-row { flex-direction: column; }
}


/* ===== Emplastrum Drywall — modern polish 2026-05-21 ===== */
h1,h2,h3,h4,h5,h6,.logo,.footer-logo{font-family:'DM Sans','Segoe UI',Arial,sans-serif !important;letter-spacing:-0.015em;}
.logo span{color:var(--white);}
.btn-primary,.nav-cta,.submit-btn{border-radius:8px !important;font-weight:700 !important;}
.solution-card{transition:transform .15s ease,box-shadow .15s ease;border-radius:12px !important;}
.solution-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.35);}
.city-block{border-radius:10px;transition:transform .12s ease,background .12s ease;}
.city-block:hover{transform:translateY(-2px);}
.hero-card{border-radius:14px !important;}
.trust-item{font-weight:600;}


/* ── Service/Location page template components (added 2026-05-26) ── */
.emp-k1{font-size:2.6rem;font-weight:900;line-height:1.1;margin:0}
.emp-k2{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700;color:var(--gold);margin-top:2px}
.emp-k3{font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:700;color:var(--gray)}
.emp-btn{display:inline-block;padding:13px 24px;border-radius:8px;font-weight:600;text-decoration:none;margin:4px}
.emp-btn.p{background:var(--gold);color:#fff}
.emp-btn.s{border:1px solid var(--gray);color:var(--white)}
.emp-trust{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;padding:20px;color:var(--gray);font-size:.9rem;border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.emp-chk{list-style:none;margin-top:16px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.emp-chk li{position:relative;padding-left:26px;color:#2c3a4a}
.emp-chk li:before{content:'\2713';color:var(--gold);position:absolute;left:0;font-weight:700}
.emp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:10px}
.emp-step{background:var(--navy);border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:22px}
.emp-step .n{color:var(--gold);font-family:'Playfair Display',serif;font-size:1.7rem;font-weight:900;display:block}
.emp-step h3{font-size:1.05rem;margin:8px 0 6px}
.emp-step p{color:var(--gray);font-size:.9rem}
.emp-video iframe{width:100%;aspect-ratio:16/9;border-radius:14px;display:block;border:0}
.emp-video-ph{display:flex;align-items:center;gap:16px;background:var(--navy-mid);border-radius:14px;padding:28px;text-decoration:none;color:var(--gray)}
.emp-video-ph .play{width:58px;height:58px;border-radius:50%;background:var(--gold);flex:none;position:relative}
.emp-video-ph .play:after{content:'';position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.emp-faq dt{font-weight:600;color:var(--white);padding:16px 0 6px;border-top:1px solid rgba(0,0,0,.08)}
.emp-faq dd{color:var(--gray);padding-bottom:12px;margin:0}
@media(max-width:760px){.emp-steps{grid-template-columns:1fr 1fr}.emp-chk{grid-template-columns:1fr}.emp-k1{font-size:2.1rem}}


/* ════════ LIGHT THEME (blue / grey / white) — applied 2026-05-26 ════════ */
nav{background:#ffffff !important;border-bottom:1px solid #dde3ec !important;box-shadow:0 1px 10px rgba(20,40,80,.06)}
nav ul li a{color:#46535f}
.phone-banner{color:#ffffff !important}
.phone-banner a{color:#ffffff !important;text-decoration:underline}
.nav-cta{color:#ffffff !important}
.dropdown{background:#ffffff !important;border:1px solid #dde3ec;box-shadow:0 10px 28px rgba(20,40,80,.12)}
.dropdown li a{border-top:1px solid #eef2f7 !important;color:#46535f}
.form-group input,.form-group select,.form-group textarea{background:#ffffff;border:1px solid #c7cfdb;color:#16202c}
.btn-primary,.emp-btn.p{color:#ffffff !important}
.emp-btn.s,.btn-secondary{color:#16202c}
/* footer stays dark slate with light text */
footer{background:#16202c !important;border-top:1px solid #243246 !important;color:#9aa6b4}
footer a,footer p,footer li,footer span,.footer-about,.footer-links a,.footer-col a{color:#9aa6b4 !important}
footer h3,footer h4,footer h5,.footer-title{color:#ffffff !important}
.footer-bottom{border-top:1px solid rgba(255,255,255,.10) !important;color:rgba(255,255,255,0.50) !important}
.footer-logo{color:#2563eb !important}
.footer-social a{color:#9aa6b4 !important;transition:color .18s ease;}
/* Footer social: original gray default, brand color on hover (Dustin 2026-07-19). Home Depot = static orange via its own SVG fills. */
.footer-social a[href*="facebook.com"]:hover{color:#1877F2 !important}
.footer-social a[href*="instagram.com"]:hover{color:#E4405F !important}
.footer-social a[href*="youtube.com"]:hover{color:#FF0000 !important}
.footer-social a[href*="tiktok.com"]:hover{color:#ffffff !important}
.footer-social a[href*="yelp.com"]:hover{color:#FF1A1A !important}
.footer-social a[href*="nextdoor.com"]:hover{color:#8ED500 !important}
.footer-social a[href*="pinterest"]:hover{color:#E60023 !important}
.footer-social a[href*="yellowpages"]:hover{color:#FFD226 !important}
.footer-social a[href*="reddit.com"]:hover{color:#FF4500 !important}  /* added 2026-08-01 - Reddit icon had no hover colour, so it stayed grey while every sibling lit up */
.footer-social a[href*="linkedin.com"]:hover{color:#0A66C2 !important}  /* staged: LinkedIn account is live but has no footer icon yet */



/* ── light theme DEPTH tuning 2026-05-26b (less flat white) ── */
body{background:#edf2f9}
.page-header{background:linear-gradient(165deg,#e1ebf8,#edf2f9) !important}
.emp-step,.step,.card,.testimonial-card,.r,.dropdown,.emp-video-ph,.emp-video,.video,.form-group input,.form-group select,.form-group textarea{background:#ffffff !important}
.emp-step,.step,.card,.r{box-shadow:0 2px 14px rgba(20,40,80,.06);border:1px solid #e2e8f1 !important}
.emp-trust{background:#ffffff}


/* ── light theme CONTRAST tuning 2026-05-26c ── */
body{background:#f6f9fc}
h1,h2,h3,.k1,.emp-k1,.emp-faq dt{color:#0f1b2d}
.page-header{background:linear-gradient(165deg,#d7e3f4,#f6f9fc) !important;border-bottom:1px solid #cdd9e9 !important}
.emp-step,.step,.card,.r{background:#ffffff !important;border:1px solid #d4dde9 !important;box-shadow:0 4px 18px rgba(15,30,60,.10) !important}
.emp-trust{background:#ffffff;border-top:1px solid #d4dde9;border-bottom:1px solid #d4dde9}
.section-label,.sec-label{color:#1d4ed8}

/* ── recent-work gallery ── */
.emp-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.emp-gallery .emp-shot{display:block;border-radius:10px;overflow:hidden;border:1px solid #d4dde9;box-shadow:0 4px 18px rgba(15,30,60,.10)}
.emp-gallery img{width:100%;height:220px;object-fit:cover;display:block}
@media(max-width:760px){.emp-gallery{grid-template-columns:1fr 1fr}.emp-gallery img{height:160px}}


/* ── final-cta clean blue band + header sticky fix 2026-05-26e ── */
.final-cta{background:linear-gradient(120deg,#1d4ed8,#2563eb) !important}
.final-cta::before,.final-cta::after{display:none !important;background:none !important}
.final-cta h2{color:#ffffff !important}
.final-cta p{color:#dbe7ff !important}
.final-cta .btn-primary{background:#ffffff !important;color:#1d4ed8 !important;box-shadow:0 6px 22px rgba(0,0,0,.18) !important}
.final-cta .btn-ghost{color:#ffffff !important}
nav{position:sticky !important;top:0}
.page-header{padding-top:56px !important}


/* ── final-cta toned: soft light band, blue only on the button 2026-05-26f ── */
.final-cta{background:#e9f0fa !important;border-top:1px solid #d4dde9;border-bottom:1px solid #d4dde9;padding:72px 5% !important}
.final-cta h2{color:#0f1b2d !important}
.final-cta p{color:#46535f !important}
.final-cta .btn-primary{background:#1d4ed8 !important;color:#ffffff !important;box-shadow:0 6px 20px rgba(29,78,216,.25) !important}
.final-cta .btn-ghost{color:#1d4ed8 !important}


/* ── menu stacking fix: dropdowns above breadcrumb/content 2026-05-26g ── */
nav{z-index:1000 !important}
.has-dropdown{position:relative;z-index:1001}
.dropdown{z-index:1002 !important}


/* ── breadcrumb is a <nav> too: stop it inheriting main-nav fixed/sticky/z-index 2026-05-26h ── */
nav.breadcrumbs{position:static !important;z-index:auto !important;top:auto !important;width:auto !important;
  background:#eef2f7 !important;border-top:none !important;border-bottom:1px solid #d4dde9 !important;
  box-shadow:none !important;backdrop-filter:none !important;display:block !important;padding:11px 5% !important}
nav.breadcrumbs a{color:#5b6672 !important}
nav.breadcrumbs span{color:#1d4ed8 !important}


/* ── dark-grey nav + footer bookends 2026-05-27 ── */
nav{background:#262b31 !important;border-bottom:1px solid #333a42 !important;box-shadow:0 2px 14px rgba(0,0,0,.22)}
nav .logo{color:#ffffff !important}
nav .logo span{color:#60a5fa !important}/* WCAG AA 5.9:1 on #262b31 — was var(--gold) 2.4:1 fail */
nav ul li a{color:#cfd6de !important}
nav ul li a:hover{color:#ffffff !important}
nav ul li.nav-social a{color:#cfd6de !important}
/* Main-menu social icons: gray default, brand color on hover (Dustin 2026-07-19) — matches footer. Header is dark, so TikTok hovers white. */
nav ul li.nav-social a[href*="facebook.com"]:hover{color:#1877F2 !important}
nav ul li.nav-social a[href*="instagram.com"]:hover{color:#E4405F !important}
nav ul li.nav-social a[href*="youtube.com"]:hover{color:#FF0000 !important}
nav ul li.nav-social a[href*="tiktok.com"]:hover{color:#ffffff !important}
nav ul li.nav-social a[href*="share.google"]:hover{color:#4285F4 !important}

.nav-cta{color:#ffffff !important}
footer{background:#262b31 !important;border-top:1px solid #333a42 !important;color:#aeb6bf !important}
footer a,footer p,footer li,footer span,.footer-about{color:#aeb6bf !important}
footer h3,footer h4,footer h5,.footer-title,.footer-logo{color:#ffffff !important}
.footer-logo span{color:#60a5fa !important}/* WCAG AA 5.9:1 on #262b31 */
.footer-social a{color:#aeb6bf !important}


/* ── dark dropdowns to match dark nav (fix faint menus) 2026-05-27 ── */
.dropdown{background:#2f353d !important;border:1px solid #3a414a !important;box-shadow:0 14px 32px rgba(0,0,0,.38) !important;backdrop-filter:none !important}
.dropdown li a{color:#dfe5ec !important;border-top:1px solid rgba(255,255,255,.06) !important}
.dropdown li a:hover{color:#ffffff !important;background:rgba(255,255,255,.07) !important}


/* ── larger brand logo header + footer 2026-05-27 ── */
nav .logo{font-size:1.8rem !important}
.footer-logo{font-size:1.7rem !important}

/* ── related-areas internal links 2026-05-27 ── */
.emp-related{display:flex;flex-wrap:wrap;gap:9px 12px;margin-top:6px}
.emp-related a{color:#1d4ed8;text-decoration:none;font-size:.9rem;border:1px solid #d4dde9;border-radius:6px;padding:6px 12px;background:#fff;transition:background .15s,color .15s}
.emp-related a:hover{background:#1d4ed8;color:#fff;border-color:#1d4ed8}

/* Playlist nav buttons */
.emp-playlist-nav{display:flex;gap:12px;margin-top:14px;justify-content:center;}
.emp-pl-btn{background:var(--gold);color:var(--navy);border:none;border-radius:6px;padding:10px 28px;font-size:1rem;font-weight:700;cursor:pointer;letter-spacing:.02em;transition:opacity .15s;}
.emp-pl-btn:hover{opacity:.82;}

/* ============================================================
   Google Reviews Carousel
   ============================================================ */
.emp-reviews-section { background: var(--navy-mid); padding: 60px 24px; }

/* Aggregate rating row */
.emp-agg-rating { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:32px; flex-wrap:wrap; }
.emp-agg-num { font-size:3rem; font-weight:900; color:var(--white); line-height:1; }
.emp-agg-stars { display:flex; gap:3px; }
.emp-star { font-size:1.4rem; color:var(--gray); }
.emp-star.on { color:#f5c518; }
.emp-agg-count { color:var(--gray); font-size:.95rem; }

/* Scrollable track */
.emp-reviews-wrap {
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -8px;
    padding: 4px 8px 12px;
}
.emp-reviews-wrap::-webkit-scrollbar { display: none; }
.emp-reviews-track { display: flex; gap: 20px; }

/* Review cards */
.emp-rev-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 24px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.emp-rev-stars { display:flex; gap:2px; }
.emp-rev-stars .emp-star { font-size:1.1rem; }
.emp-rev-text { color:var(--gray); line-height:1.75; font-size:.95rem; flex:1; margin:0; }
.emp-rev-footer { display:flex; align-items:center; gap:12px; margin-top:auto; }
.emp-rev-avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; }
.emp-rev-meta strong { display:block; color:var(--white); font-size:.9rem; }
.emp-rev-meta span { color:var(--gray); font-size:.82rem; }

/* Nav below carousel */
.emp-reviews-nav { display:flex; gap:12px; justify-content:center; margin-top:20px; margin-bottom:28px; }

@media (max-width: 768px) {
    .emp-rev-card { flex: 0 0 calc(100vw - 64px); }
    .emp-agg-num { font-size:2.4rem; }
}


/* ── Service page hero header — matches homepage hero image 2026-06-05 ── */
.emp-svc-header {
    background-image: linear-gradient(rgba(15,27,45,0.88),rgba(15,27,45,0.88)),
                      url('/wp-content/uploads/2026/05/hero-basement-drywall.jpg')  /* root-relative 2026-08-01: CSS can't call PHP; this resolves per-domain so a clone loads its own asset, not Calgary's */ !important;
    background-size: cover !important;
    background-position: center 30% !important;
    background-repeat: no-repeat !important;
    border-bottom: none !important;
    padding: 100px 5% 64px !important;
}
.emp-svc-header h1,
.emp-svc-header .emp-k1 { color: #ffffff !important; }
.emp-svc-header .emp-k2 { color: var(--gold) !important; }
.emp-svc-header .emp-k3 { color: rgba(255,255,255,0.75) !important; }
.emp-svc-header .section-label { color: var(--gold) !important; }
.emp-svc-header p,
.emp-svc-header .section-intro { color: rgba(255,255,255,0.82) !important; }
.emp-svc-header .emp-btn.s { border-color: rgba(255,255,255,0.5) !important; color: #ffffff !important; }
@media(max-width:760px) {
    .emp-svc-header { padding: 80px 5% 48px !important; }
}


/* ===== S59 Structural improvements 2026-06-05 ===== */

/* -- Breadcrumb -- */
.emp-breadcrumb{font-size:.78rem;color:rgba(255,255,255,0.55);padding:0 0 18px;text-align:left;width:100%}
.emp-breadcrumb a{color:rgba(255,255,255,0.55);text-decoration:none}
.emp-breadcrumb a:hover{color:#fff}
.emp-bc-sep{margin:0 5px;opacity:.6}
.emp-bc-cur{color:rgba(255,255,255,0.85)}

/* -- FAQ accordion -- */
/* FAQ always-open, non-collapsible (SEO: no content hidden behind interaction) — Dustin 2026-07-12 */
.emp-faq dt{display:block;padding-right:4px}
.emp-faq dd{display:block;padding-top:4px}
.emp-faq dt.emp-open + dd{display:block}
.emp-faq-chev{display:none}
.emp-faq dt.emp-open .emp-faq-chev{display:none}

/* -- Sticky mobile call bar -- */
.emp-sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9990;
    background:#0f1b2d;padding:10px 14px;gap:10px;
    border-top:2px solid #1d4ed8;box-shadow:0 -4px 24px rgba(0,0,0,0.3)}
.emp-sticky-call{flex:2;background:#1d4ed8;color:#fff;text-align:center;padding:13px 10px;
    border-radius:8px;font-weight:700;font-size:.95rem;text-decoration:none;white-space:nowrap}
.emp-sticky-quote{flex:1;background:rgba(255,255,255,0.08);color:#fff;text-align:center;
    padding:13px 10px;border-radius:8px;font-weight:600;font-size:.85rem;text-decoration:none;
    border:1px solid rgba(255,255,255,0.18);white-space:nowrap}
.emp-sticky-call:hover{opacity:.92}
.emp-sticky-quote:hover{background:rgba(255,255,255,0.14)}
@media(max-width:767px){
    .emp-sticky-cta{display:flex}
    body{padding-bottom:70px}
}

/* -- H3 subheadings inside content sections -- */
.emp-svc-content h3{font-size:1.05rem;font-weight:700;color:#0f1b2d;margin:22px 0 8px}

/* -- hero-google-badge global -- */
.hero-google-badge{display:inline-block;line-height:0;text-decoration:none !important;cursor:pointer}
.hero-google-badge img{display:block;width:100px;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.35))}
.footer-google-badge{margin-top:20px}

/* -- service/location page hero badge row: Google + Trustpilot side by side (2026-07-06) --
   NOTE: .hero-google-badge img actually renders at 160px/130px (mobile) due to the later,
   higher-priority .hero-google-badge rule further down this file — matching that size here
   so the two badges sit proportionately. */
.emp-hero-badges-row{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:18px}
.emp-hero-badges-row .hero-google-badge{margin-top:0 !important}
.hero-trustpilot-badge-svc{display:inline-block;line-height:0;text-decoration:none !important;cursor:pointer}
.hero-trustpilot-badge-svc svg{display:block;width:160px;height:160px;filter:drop-shadow(0 6px 14px rgba(0,0,0,0.30))}
@media (max-width: 480px) {
    .hero-trustpilot-badge-svc svg { width: 130px; height: 130px; }
}

/* === Map + service links section === */
.emp-more-section{background:var(--navy);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 5%;}
/* -- STACKED 2026-08-11 (Dustin: "it just looks long on the right of the map, maybe we put it
   below the map"). Measured before changing: the 40-link categorised menu ran ~880px beside a
   409px map, so the section ended in a tall column of links against empty space.
   Full-width map on top, services beneath in 4 columns -- each column gets ~250px, which is
   enough for the longest label ("Acoustical Ceiling Installation") on ONE line. Three columns
   in the old ~450px side panel wrapped those labels and stayed too tall; a fixed-height scroll
   panel balanced but pushed half the services below a fold. This keeps every link visible with
   no scrolling -- same standing rule as the column pass: don't remove links, position them better. -- */
.emp-map-services-wrap{display:flex;flex-direction:column;gap:20px;align-items:stretch}
.emp-map-frame{flex:none;width:100%;min-width:0}
.emp-map-clip{position:relative;width:100%;height:409px;border-radius:12px;border:1px solid var(--line);overflow:hidden;box-sizing:border-box;}
.emp-map-clip iframe{position:absolute;top:-60px;left:0;width:100%;height:calc(100% + 60px);border:0;display:block;}
.emp-service-links{flex:1;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;}
.emp-svc-link{display:flex;align-items:center;justify-content:space-between;color:var(--red);text-decoration:none;font-size:.9rem;padding:10px 15px;border-bottom:1px solid var(--line);transition:background .12s,color .12s;}
.emp-svc-link:last-child{border-bottom:0}
.emp-svc-link:hover{background:var(--red);color:#fff;}
.emp-svc-link:hover .emp-svc-arrow{color:#fff}
.emp-svc-link-all{font-weight:700;color:var(--white);background:var(--light-bg);}
.emp-svc-link-all:hover{background:var(--red);color:#fff;}
.emp-svc-arrow{font-size:1.1rem;color:var(--gray);transition:color .12s}
@media(max-width:768px){.emp-map-services-wrap{flex-direction:column}.emp-map-frame{flex:none;width:100%}}


/* ---------------------------------------------------------------
   HOMEPAGE STYLES - migrated from front-page.php inline blocks
   Date: 20260607 | Reason: eliminate LCP element render delay
   --------------------------------------------------------------- */

/* -- homepage-youtube-styles -- */
.hero {
    position: relative;
    color: #fff;
    isolation: isolate;
}
.hero h1,
.hero .hero-sub,
.hero .stat-num,
.hero .stat-label { color: #fff; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero .legal-badge-hero { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.25); }
.hero .legal-badge-hero svg { color: var(--gold); }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
.hero .btn-ghost:hover { background: rgba(255,255,255,0.1); }
.hero-stats { border-top-color: rgba(255,255,255,0.18); }
.hero-card { /* form card stays its own bg for contrast */ }
@media (max-width: 768px) {
    .hero-bg-img { object-position: center right; }
}

/* -- homepage-youtube-styles -- */
/* Stacked hero: text top, form below — centered, full width */
.hero {
    /* keep existing bg, just override grid */
}
/* .hero-top removed — replaced by hero-title-row + hero-split */
.hero-card {
    max-width: 720px;
    margin: 0 auto;
}
/* 2-col rows inside the form */
.hero-card .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 600px) {
    .hero-card .form-row { grid-template-columns: 1fr; gap: 0; }
}
/* Restore visible labels (small, white over hero bg) */
.hero-card .form-group label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f1b2d;
    margin-bottom: 4px;
    text-transform: none;
    letter-spacing: 0.01em;
}

/* -- homepage-youtube-styles -- */
/* Force the .hero section to stack children vertically (theme has display:flex) */
.hero { display: block !important; align-items: initial !important; min-height: auto !important; padding-top: 80px !important; padding-bottom: 40px !important; }
.hero > * { width: 100%; }
.hero-card { max-width: 720px; margin-left: auto; margin-right: auto; }

/* TOP: title centered */
.hero-title-row {
    max-width: 1100px;
    margin: 0 auto 28px;
    text-align: center;
}
.hero-title-row h1 { text-align: center; margin: 0; }

/* MIDDLE: badge + text pair, centered as a unit between title and form */
.hero-split {
    margin: 0 auto 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}
.hero-split-left { display: flex; align-items: center; flex: 0 0 auto; }
.hero-split-right {
    display: flex; flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 460px;
    text-align: center;
}
.hero-split-right .hero-sub { margin: 0; text-align: center; line-height: 1.55; }
.hero-split-right .legal-badge-hero { margin: 0; align-self: center; }
@media (max-width: 768px) {
    .hero-split { gap: 18px; }
}

/* Form already centered via .hero-card max-width below this block */

/* -- homepage-youtube-styles -- */
/* Tighter form spacing */
.hero-card .form-group { margin-bottom: 10px; }
.hero-card .form-group label { font-size: 0.78rem; margin-bottom: 3px; display: block; font-weight: 600; }
.hero-card .form-group input[type="text"],
.hero-card .form-group input[type="tel"],
.hero-card .form-group input[type="email"] {
    padding: 9px 12px;
    font-size: 0.95rem;
    border-radius: 8px;
}
.hero-card .card-headline { font-size: 1.2rem; margin-bottom: 6px; }
.hero-card .card-sub { font-size: 0.85rem; margin-bottom: 14px; }
.hero-card .submit-btn { padding: 12px 18px; font-size: 0.98rem; margin-top: 6px; }
.hero-card .card-disclaimer { font-size: 0.75rem; margin-top: 8px; }

/* Tighten select dropdowns to match inputs */
.hero-card .form-group select {
    padding: 9px 12px;
    font-size: 0.95rem;
    border-radius: 8px;
}
/* PIPEDA consent text — force readable black */
.hero-card form > label,
.hero-card form > label span {
    color: #0f1b2d !important;
}

/* -- homepage-youtube-styles -- */
.hero-google-badge {
    display: inline-block;
    line-height: 0;
    text-decoration: none !important;
    cursor: pointer;
}
.hero-google-badge img {
    display: block;
    width: 160px;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.30));
}
@media (max-width: 480px) {
    .hero-google-badge img { width: 130px; }
}

/* -- homepage-youtube-styles -- */
.where-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;   /* right column tops-out with the map */
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 900px) {
    .where-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
.where-left { display: flex; flex-direction: column; gap: 12px; }
.where-left .section-label { margin: 0; }
.where-text { padding-top: 0; }
.where-map {
    position: relative;
    width: 100%;
    height: 360px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    background: #1a2740;
}
.where-map iframe { width: 100% !important; height: 100% !important; border: 0; display: block; }
@media (max-width: 899px) {
    .where-map { height: 280px; }
}
.where-map iframe { width: 100%; height: 100%; border: 0; }
@supports not (aspect-ratio: 4/3) { .where-map { height: 320px; } }
.where-text { order: 1; align-self: center; }
@media (min-width: 900px) { .where-text { order: 2; padding-left: 8px; } }
.where-city-grid {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* fixed 3-col so the 9 area cards read as a clean 3x3 (Dustin 2026-07-19) */
    gap: 10px;
}
@media (max-width: 720px) { .where-city-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .where-city-grid { grid-template-columns: 1fr; } }

/* Hub neighbourhood link stack (Domination pass 2026-07-19) -- compact multi-column TEXT
   link layout for the full 220-neighbourhood Calgary hub list (and reusable on the
   satellite city hubs' "every neighbourhood" grids). Deliberately its own class, NOT
   .where-city-grid, since a 220-link block of big 3-col cards would be unwieldy -- this
   is small text links, column-count based, same technique as the nav mega-dropdown's
   .dropdown-2col (house style). */
.hub-nbhd-quads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; margin-top: 8px; }
.hub-nbhd-quad h4 { color: var(--gold); font-size: .92rem; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 6px; }
.hub-nbhd-count { color: var(--gray); font-weight: 400; text-transform: none; letter-spacing: 0; }
.hub-nbhd-links { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 20px; }
.hub-nbhd-links li { break-inside: avoid; margin-bottom: 6px; font-size: .85rem; line-height: 1.4; }
.hub-nbhd-links a { color: var(--gray); text-decoration: none; }
.hub-nbhd-links a:hover { color: var(--gold); text-decoration: underline; }
@media (max-width: 900px) { .hub-nbhd-quads { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .hub-nbhd-links { column-count: 1; } }

/* -- homepage-youtube-styles -- */
.homepage-faq {
    background: var(--navy-mid, #e2eaf4);
    padding: 56px 24px;
}
.homepage-faq h2 { text-align: center; margin: 0; }
.faq-item {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    margin-bottom: 6px;
    overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.faq-item[open] {
    border-color: var(--gold);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.faq-q {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 0.96rem;
    color: #0f1b2d;
    cursor: default;
    list-style: none;
    gap: 14px;
    line-height: 1.35;
}
/* FAQ always-open, non-collapsible (SEO) — Dustin 2026-07-12 */
.faq-item.faq-static { border-color: var(--gold); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--gold); }
.faq-chevron {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(251, 188, 5, 0.15);
    color: var(--gold);
    border-radius: 50%;
    font-size: 1.15rem; font-weight: 700; line-height: 1;
    transition: transform .2s ease;
}
.faq-item[open] .faq-chevron { transform: rotate(45deg); }
.faq-a {
    padding: 0 16px 12px 16px;
    color: #3f4b59;
    line-height: 1.55;
    font-size: 0.92rem;
}
@media (max-width: 600px) {
    .homepage-faq { padding: 40px 14px; }
    .faq-q { font-size: 0.92rem; padding: 11px 14px; }
    .faq-a { padding: 0 14px 11px 14px; font-size: 0.9rem; }
}

/* -- homepage-youtube-styles -- */
.youtube-section { padding: 48px 24px; background: #0f1b2d; color: #fff; }
.youtube-section .section-label,
.youtube-section h2,
.youtube-section .section-intro,
.youtube-section .yt-counter { color: #fff !important; }
.youtube-section .section-label { background: rgba(255,255,255,0.12); color: #fff !important; }
.youtube-section .section-intro { opacity: 0.92; }
.youtube-section h2 { text-align: center; }

.yt-pill-row {
    display: flex; gap: 8px;
    padding: 4px 4px 16px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .yt-pill-row {
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        justify-content: flex-start;
        scrollbar-width: none;
    }
    .yt-pill-row::-webkit-scrollbar { display: none; }
}

.yt-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff; color: var(--gray);
    border: 1px solid rgba(0,0,0,0.08);
    font-size: 0.88rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.yt-pill:hover { border-color: var(--gold); color: var(--gold); }
.yt-pill.active { background: var(--gold); color: #fff; border-color: var(--gold); box-shadow: 0 4px 12px rgba(29,78,216,0.25); }

/* Player + overlay arrows */
.yt-embed-wrap {
    position: relative;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.yt-embed-wrap iframe, .yt-embed-wrap > div#ytPlayer {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
@supports not (aspect-ratio: 16/9) {
    .yt-embed-wrap { padding-top: 56.25%; height: 0; }
}
.yt-arrow-ov {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    z-index: 3;
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(15, 27, 45, 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.28);
    transition: background .18s, opacity .18s, transform .12s;
}
.yt-arrow-ov svg { width: 26px; height: 26px; display: block; }
.yt-arrow-ov-prev { left: 12px; }
.yt-arrow-ov-next { right: 12px; }
.yt-arrow-ov:hover { background: var(--gold); transform: translateY(-50%) scale(1.06); }
.yt-arrow-ov:active { transform: translateY(-50%) scale(0.96); }
.yt-arrow-ov:disabled { opacity: 0.28; cursor: not-allowed; transform: translateY(-50%); pointer-events: none; }

/* Desktop: fade in only on player hover (cleaner, like Netflix). Always on mobile. */
@media (min-width: 900px) {
    .yt-arrow-ov { opacity: 0; }
    .yt-embed-wrap:hover .yt-arrow-ov,
    .yt-embed-wrap:focus-within .yt-arrow-ov { opacity: 1; }
}

.yt-counter {
    margin-top: 14px;
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}
.youtube-section .yt-counter { color: var(--gray); }

@media (max-width: 768px) {
    .youtube-section { padding: 32px 14px; }
    .yt-arrow-ov { width: 44px; height: 44px; }
    .yt-arrow-ov svg { width: 22px; height: 22px; }
    .yt-arrow-ov-prev { left: 8px; }
    .yt-arrow-ov-next { right: 8px; }
}

/* ---------------------------------------------------------------
   HERO IMG CONVERSION - LCP optimization
   Date: 20260607_113117 | LCP: CSS background-image -> <img fetchpriority=high>
   Expected: element render delay 1760ms -> near 0ms
   --------------------------------------------------------------- */

/* Hero background image — discovered by HTML parser, not CSS */
.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    pointer-events: none;
}

/* Dark overlay (replaces the linear-gradient that was in background-image) */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 27, 45, 0.78);
    z-index: 1;
    pointer-events: none;
}

/* Radial gradients (::before) stay above the dark overlay */
.hero::before { z-index: 2; }

/* Hero content elements stack above overlay */
.hero-title-row,
.hero-split,
.hero-card {
    position: relative;
    z-index: 3;
}

/* ══════════════════════════════════════════════════════════
   TRUST BADGES — Trustpilot + Google Reviews (added 2026-07-05)
   Footer (sitewide, dark) + content-page (light) + hero variant.
   NOTE: no BBB badge/text rendered anywhere yet (not accredited);
   footer.php leaves a commented, non-rendering slot for later.
   ══════════════════════════════════════════════════════════ */
.trust-badges-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
    max-width: 1200px;
    margin: 4px auto 28px;
    padding: 22px 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none !important;
    color: #cfd6de !important;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    opacity: 0.94;
    transition: opacity 0.2s, transform 0.15s;
}
.trust-badge:hover { opacity: 1; transform: translateY(-1px); }
.trust-badge img { width: 26px; height: 26px; display: block; border-radius: 5px; }
.trust-badge svg { flex-shrink: 0; width: 26px; height: 26px; display: block; }
.trust-badge .trust-badge-text { display: flex; flex-direction: column; line-height: 1.2; }
.trust-badge .trust-badge-sub { font-size: 0.66rem; font-weight: 500; color: #93a0ac; letter-spacing: 0.02em; text-transform: uppercase; }
/* Trustpilot footer badge — official-style green square + white star, brand wordmark (2026-07-05) */
.trust-badge-wordmark { color: #00b67a !important; font-weight: 800; }

/* Light-background variant — used on content pages (services/testimonials/city hubs) */
.trust-badges-row.trust-badges-light {
    border-top-color: rgba(15,27,45,0.10);
    border-bottom-color: rgba(15,27,45,0.10);
}
.trust-badges-light .trust-badge { color: var(--white,#0f1b2d) !important; opacity: 1; }
.trust-badges-light .trust-badge .trust-badge-sub { color: var(--gray,#3f4b59); }

@media (max-width: 640px) {
    .trust-badges-row { gap: 20px; padding: 16px 16px; }
}

/* Footer-only spread layout (2026-07-06) — Trustpilot left-center, Google right-center,
   scoped via .trust-badges-footer so any future .trust-badges-row usage elsewhere
   (e.g. content-page .trust-badges-light) is unaffected. */
.trust-badges-row.trust-badges-footer {
    justify-content: space-between;
    gap: 64px;
    padding: 34px 8px;
}
.trust-badges-footer .trust-badge { font-size: 1.15rem; font-weight: 700; }
.trust-badges-footer .trust-badge svg,
.trust-badges-footer .trust-badge img { width: 46px; height: 46px; border-radius: 8px; }
.trust-badges-footer .trust-badge-wordmark { font-size: 1.3rem; }
@media (max-width: 640px) {
    .trust-badges-row.trust-badges-footer { justify-content: center; gap: 36px; }
    .trust-badges-footer .trust-badge svg, .trust-badges-footer .trust-badge img { width: 38px; height: 38px; }
}

/* Hero trust badges (Google + Trustpilot side by side, floating over hero image) */
.hero-trust-badges {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.hero-trustpilot-badge {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}
.hero-trustpilot-badge svg { width: 46px; height: 46px; flex-shrink: 0; }
.hero-trustpilot-badge span.tp-word { font-size: 1.25rem; font-weight: 800; color: #cfd6de; letter-spacing: 0.01em; }
.hero-trustpilot-badge span.tp-cta { font-size: 0.62rem; font-weight: 600; color: #3f4b59; text-transform: uppercase; letter-spacing: 0.05em; }

/* ══════════════════════════════════════════════════════════
   HOW IT WORKS v2 — elevated icon cards + connector (2026-07-05)
   ══════════════════════════════════════════════════════════ */
.how-it-works-v2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 56px;
}
@media (min-width: 640px) { .how-it-works-v2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .how-it-works-v2 { grid-template-columns: repeat(4,1fr); } }
.how-step {
    background: #ffffff;
    border: 1px solid #e2e8f1;
    border-radius: 14px;
    padding: 34px 22px 28px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 18px rgba(15,30,60,0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.how-step:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(15,30,60,0.12); }
.how-step-num {
    position: absolute;
    top: 14px; right: 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    color: rgba(29,78,216,0.75);
    letter-spacing: 0.05em;
}
.how-step-icon {
    width: 60px; height: 60px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg,#1d4ed8,#4f84ff);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(29,78,216,0.28);
}
.how-step-icon svg { width: 28px; height: 28px; color: #fff; }
.how-step h3 { font-family: 'DM Sans', sans-serif; font-size: 1.08rem; font-weight: 800; color: #0f1b2d; margin-bottom: 10px; }
.how-step p { font-size: 0.9rem; font-weight: 500; color: #2b2b2b; line-height: 1.65; margin: 0; }
@media (min-width: 1000px) {
    .how-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 44px;
        right: -22px;
        width: 22px; height: 2px;
        background: repeating-linear-gradient(90deg, rgba(29,78,216,0.35) 0 6px, transparent 6px 10px);
        z-index: 2;
    }
}

/* Footer review badges — spread in the band, Trustpilot left / Google right (Dustin ref 2026-07-06) */
.footer-reviews{display:flex;justify-content:center;align-items:center;gap:40px;max-width:1200px;margin:0 auto;padding:8px 20px 24px;flex-wrap:wrap;}  /* 2026-08-01: dropped the 140px left pad - it was cancelling justify-content:center and holding the band off to the right. Dustin: centre it until BBB lands (5th badge, free listing being done the weekend of 2026-08-02). Re-check the optical centre once BBB is in. */
@media(max-width:900px){.footer-reviews{margin:8px auto 0;padding-right:0;justify-content:center;}}
@media(max-width:900px){.footer-reviews{justify-content:center;padding-left:0;padding-right:0;}}
.footer-reviews .fr-tp-word{color:#cfd6de;font-weight:800;font-size:1.25rem;letter-spacing:0.01em;}
.footer-reviews .fr-item{display:inline-flex;align-items:center;gap:12px;text-decoration:none !important;opacity:0.95;transition:opacity .2s;}
.footer-reviews .fr-item:hover{opacity:1;}
.footer-reviews .fr-item img,.footer-reviews .fr-item svg{width:46px;height:46px;border-radius:6px;display:block;flex-shrink:0;}
.footer-reviews .fr-text{display:flex;flex-direction:column;line-height:1.25;}
.footer-reviews .fr-text strong{font-size:1.2rem;font-weight:800;color:#cfd6de;}
.footer-reviews .fr-text .fr-tp{color:#00b67a !important;}
.footer-reviews .fr-text em{font-size:0.74rem;font-style:normal;text-transform:uppercase;letter-spacing:0.04em;color:#93a0ac;}
@media(max-width:640px){.footer-reviews{justify-content:center;gap:30px;}}

/* ══════════════════════════════════════════════════════════
   07-19 LAYOUT UNIFORMITY SYSTEM (Dustin 2026-07-19)
   Root-cause fixes shipped alongside this block: 22 inline <h2 style="margin:
   Xpx 0 Ypx"> instances across inc/emp_service_render.php (9,100+ pages),
   4 city-contractor hubs, both contact pages and emp_video_pages.php had a
   3-value margin shorthand that zeroed left/right, silently defeating the
   header.php `section h2{margin-left:auto;margin-right:auto}` centering rule
   (inline style always wins over a stylesheet rule of equal/lower priority)
   — the actual mechanism behind "shifted left / shifted right" headings.
   Fixed at the source (0 -> auto) rather than papered over with !important
   here, so this file stays the templating source of truth. See
   EMP_WORK_ORDER_20260718.md "07-19 LAYOUT UNIFORMITY SYSTEM" for the full
   before/after inventory. Also fixed: class="solution-grid" typo (missing
   the "s") on page-drywall-services.php + page-services.php, which fell
   through to zero grid CSS and rendered the painting cross-sell as a single
   full-width card stack instead of matching the site's 3-col card rhythm.
   ══════════════════════════════════════════════════════════ */

/* -- LINK MESH: "Other drywall services" panel was one 25-30 row column of
   plain link rows towering far past its paired map (409px) — the page's
   worst "wall of links". Reuses the site's existing multi-column technique
   (same mechanism as .dropdown-2col in the nav) so the panel balances into
   two columns and roughly matches the map's height, with the "All services"
   row spanning full width above it. Every link is kept — this only changes
   how they flow, per Dustin: don't remove links, position them better. -- */
/* Column count now scales with the FULL content width, not a 45% side panel.
   4 up on desktop (~250px/column, longest label fits on one line), 3 on tablet, 2 on small
   tablet, single column on phones (the base flex-column rule above). */
@media(min-width:640px){
  .emp-service-links{display:block;column-count:2;column-gap:0;}
  .emp-service-links .emp-svc-link{break-inside:avoid;}
  .emp-service-links .emp-svc-link-all{-webkit-column-span:all;column-span:all;}
}
@media(min-width:820px){ .emp-service-links{column-count:3;} }
@media(min-width:1040px){ .emp-service-links{column-count:4;} }

/* -- SERVICE MENU CATEGORY HEADINGS (Dustin 2026-08-11: "clean up this link menu ... with our
   categories drywall, framing, insulation, painting"). 39 links in registry order is no order
   at all to a homeowner; the groups come from EMP_META_REGISTRY.json.
   Still every link kept -- same rule as the column pass above: don't remove links, position
   them better.
   break-after:avoid matters here: this is a column-count layout, so without it a heading can
   land at the foot of column 1 with its services stranded at the top of column 2. -- */
.emp-svc-cat{
  padding:10px 15px 8px;
  font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gray);background:var(--light-bg);
  border-bottom:1px solid var(--line);
  break-inside:avoid;break-after:avoid;-webkit-column-break-after:avoid;
}
.emp-svc-cat:first-of-type{border-top:0}

/* -- PHOTO-READY: drop-in utility classes for the incoming photo batch, so
   every image lands uniform (rounded corners, full-bleed within its centered
   max-width container, optional caption) without a one-off style per photo.
   .emp-photo = single image; .emp-photo-grid = auto-fit multi-photo grid
   (mirrors the .emp-gallery pattern already used for the recent-work
   sections, exposed here as a general-purpose utility for content sections). -- */
.emp-photo{display:block;width:100%;max-width:100%;height:auto;border-radius:12px;box-shadow:0 4px 18px rgba(15,30,60,0.10);}
.emp-photo-cap{display:block;margin-top:10px;font-size:0.82rem;color:var(--gray);text-align:center;}
.emp-photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px;}
.emp-photo-grid .emp-photo{height:220px;object-fit:cover;}
@media(max-width:600px){.emp-photo-grid{grid-template-columns:1fr 1fr;gap:10px;}.emp-photo-grid .emp-photo{height:150px;}}