/* =============================================
   Relion Technical Services - Page components
   Extends style.css. Inherits all tokens from :root.
   ============================================= */

/* ---- Accessibility ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--primary-light);
  outline-offset: 2px;
}

/* ---- Top bar additions ---- */
.top-bar-emergency {
  font-weight: 600;
}
.top-bar-link {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- Hero: non-first slides keep the visual weight of an h1 ---- */
.hero-content .hero-title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.15;
  font-weight: 900;
  color: #fff;
  margin: 0 0 18px;
}
.hero-content .hero-text {
  max-width: 640px;
}

/* ---- Trust bar ---- */
.trust-bar {
  background: var(--secondary);
  padding: 22px 0;
}
.trust-bar-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-bar-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.4;
}
.trust-bar-list i {
  color: var(--primary-light);
  font-size: 1.35rem;
  flex-shrink: 0;
}
.trust-bar-list strong {
  color: #fff;
}

/* ---- Interior page hero ---- */
.page-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 150px 0 90px;
  color: #fff;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(27, 27, 47, 0.92) 0%,
    rgba(27, 27, 47, 0.75) 55%,
    rgba(27, 27, 47, 0.55) 100%
  );
}
.page-hero .container {
  position: relative;
  z-index: 2;
}
.page-hero-content {
  max-width: 820px;
}
.page-hero h1 {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.15;
  font-weight: 900;
  color: #fff;
  margin: 10px 0 18px;
}
.page-hero p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 720px;
  margin-bottom: 28px;
}
.page-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.section-subtitle.light {
  color: var(--primary-light);
}

/* ---- Breadcrumbs ---- */
.breadcrumbs {
  background: var(--off-white);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  font-size: 0.9rem;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumbs li + li::before {
  content: "/";
  color: var(--text-light);
  margin-right: 8px;
}
.breadcrumbs a {
  color: var(--text-body);
}
.breadcrumbs a:hover {
  color: var(--primary);
}
.breadcrumbs span {
  color: var(--text-light);
}

/* ---- Prose + aside layout ---- */
.prose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 56px;
  align-items: start;
}
.prose h2 {
  font-family: var(--font-primary);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 40px 0 16px;
}
.prose h2:first-of-type {
  margin-top: 34px;
}
.prose p {
  margin-bottom: 16px;
}
.prose a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.intro-block {
  max-width: 820px;
  margin: 0 auto 48px;
}

/* ---- Lists ---- */
.check-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  line-height: 1.6;
}
.check-list li i {
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--primary);
  font-size: 0.9rem;
}
.check-list.two-col {
  columns: 2;
  column-gap: 36px;
}
.check-list.two-col li {
  break-inside: avoid;
}

.process-list {
  counter-reset: step;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.process-list li {
  counter-increment: step;
  position: relative;
  padding: 0 0 20px 52px;
  line-height: 1.65;
}
.process-list li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-family: var(--font-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-list li::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 38px;
  bottom: 4px;
  width: 2px;
  background: var(--border);
}
.process-list li:last-child::after {
  display: none;
}
.process-list--wide {
  max-width: 860px;
  margin: 0 auto;
}

/* ---- Aside cards ---- */
.prose-aside {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.aside-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
}
.aside-card h2 {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.aside-card p {
  font-size: 0.95rem;
  margin-bottom: 16px;
}
.aside-emergency {
  background: var(--secondary);
  border-color: var(--secondary);
}
.aside-emergency h2 {
  color: #fff;
}
.aside-emergency p {
  color: rgba(255, 255, 255, 0.82);
}
.btn-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.aside-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.aside-links li + li {
  border-top: 1px solid var(--border);
}
.aside-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  color: var(--text-body);
  font-weight: 500;
}
.aside-links a:hover {
  color: var(--primary);
}
.aside-links i {
  color: var(--primary);
  width: 18px;
  text-align: center;
}
.aside-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.93rem;
}
.aside-facts li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.aside-facts li:last-child {
  border-bottom: 0;
}
.aside-facts span {
  display: block;
  color: var(--text-light);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.aside-facts strong {
  color: var(--text-dark);
  font-weight: 600;
}

/* ---- Service cards: full-card link ---- */
.service-card-link {
  display: block;
  color: inherit;
  height: 100%;
}
.service-card-title {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.service-card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.92rem;
}
.service-card-link:hover .service-card-more i {
  transform: translateX(4px);
}
.service-card-more i {
  transition: var(--transition);
}

/* ---- FAQ ---- */
.faq-list {
  max-width: 880px;
  margin: 0 auto;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  background: #fff;
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-dark);
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary i {
  color: var(--primary);
  flex-shrink: 0;
  transition: var(--transition);
}
.faq-item[open] summary {
  background: var(--primary-lighter);
}
.faq-item[open] summary i {
  transform: rotate(45deg);
}
.faq-answer {
  padding: 4px 24px 22px;
}
.faq-answer p {
  margin: 0;
}

/* ---- Service areas ---- */
.area-grid ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 1000px;
  margin-inline: auto;
}
.area-grid li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-weight: 500;
  color: var(--text-dark);
}
.area-grid li i {
  color: var(--primary);
}
.area-note {
  margin-top: 26px;
  color: var(--text-body);
}
.area-note a {
  color: var(--primary);
  font-weight: 700;
}
.area-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 34px 0;
}
.area-service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 18px;
  color: var(--text-dark);
  font-weight: 600;
  transition: var(--transition);
}
.area-service-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  color: var(--primary);
}
.area-service-card i {
  font-size: 1.7rem;
  color: var(--primary);
}

/* ---- Emergency page ---- */
.emergency-strip {
  background: #b3241c;
  padding: 20px 0;
}
.emergency-strip .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}
.emergency-strip p {
  margin: 0;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 1.3rem;
  font-weight: 700;
}
.btn-emergency {
  background: #fff;
  color: #b3241c;
  border: 2px solid #fff;
  font-weight: 800;
}
.btn-emergency:hover {
  background: transparent;
  color: #fff;
}
.emergency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.emergency-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 4px solid #b3241c;
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  transition: var(--transition);
}
.emergency-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.emergency-card i {
  font-size: 1.9rem;
  color: #b3241c;
  margin-bottom: 14px;
  display: block;
}
.emergency-card h3 {
  font-family: var(--font-primary);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.emergency-card p {
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.emergency-card a {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.92rem;
}

/* ---- Contact ---- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}
.contact-block {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact-item-lg {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.contact-item-lg > i {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary-lighter);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-item-lg span {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-bottom: 3px;
}
.contact-item-lg a,
.contact-item-lg address,
.contact-item-lg p {
  font-style: normal;
  color: var(--text-dark);
  font-weight: 600;
  margin: 0;
  line-height: 1.55;
}
.contact-item-lg a:hover {
  color: var(--primary);
}

.contact-form-wrap {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 38px;
}
.contact-form-wrap h2 {
  font-family: var(--font-primary);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.form-intro {
  font-size: 0.95rem;
  margin-bottom: 24px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-field {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}
.form-field label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-secondary);
  font-size: 0.97rem;
  color: var(--text-dark);
  background: #fff;
  transition: var(--transition);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 122, 58, 0.12);
}
.contact-form textarea {
  resize: vertical;
}
.contact-form .field-error {
  border-color: #d13b32;
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-note {
  background: #fdf3f2;
  border-left: 3px solid #b3241c;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  margin-bottom: 20px;
}
.form-note i {
  color: #b3241c;
  margin-right: 6px;
}
.form-note a {
  color: #b3241c;
  font-weight: 700;
}
.form-status {
  margin-top: 14px;
  font-weight: 600;
  font-size: 0.95rem;
}
.form-status.is-error {
  color: #b3241c;
}
.form-status.is-success {
  color: var(--primary);
}

.map-section {
  line-height: 0;
  border-top: 1px solid var(--border);
}
.map-section iframe {
  display: block;
  filter: grayscale(0.25);
}

/* ---- Narrow utility pages ---- */
.narrow-page {
  min-height: 52vh;
  display: flex;
  align-items: center;
}
.narrow-page h1 {
  font-family: var(--font-primary);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 900;
  color: var(--text-dark);
  margin: 16px 0;
}
.narrow-page .lead-text {
  max-width: 640px;
  margin: 0 auto 20px;
}
.narrow-page .cta-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.success-icon {
  font-size: 3.4rem;
  color: var(--primary);
}
.error-code {
  display: block;
  font-family: var(--font-primary);
  font-size: 5rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
}

/* ---- Footer additions ---- */
.footer-heading {
  font-family: var(--font-primary);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
}
.footer-emergency {
  margin-top: 14px;
  color: #fff;
}
.footer-emergency a {
  color: var(--primary-light);
  font-weight: 700;
}

/* ---- Back to top + mobile call bar ---- */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 999;
  box-shadow: var(--shadow-lg);
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.mobile-call-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  background: var(--primary);
  color: #fff;
  text-align: center;
  padding: 15px 12px;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.18);
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .prose-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .prose-aside {
    position: static;
  }
  .trust-bar-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .check-list.two-col {
    columns: 1;
  }
}

@media (max-width: 768px) {
  .page-hero {
    padding: 120px 0 60px;
  }
  .trust-bar-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .contact-form-wrap {
    padding: 26px 20px;
  }
  .mobile-call-bar {
    display: block;
  }
  body {
    padding-bottom: 56px;
  }
  .back-to-top {
    bottom: 74px;
    right: 16px;
  }
  .emergency-strip .container {
    flex-direction: column;
    text-align: center;
  }
}

@media print {
  .top-bar,
  .site-header,
  .mobile-call-bar,
  .back-to-top,
  .cta-section,
  .map-section {
    display: none !important;
  }
}

/* =============================================
   Regional coverage cards
   Image-led cards. Text blocks are line-clamped so every card
   aligns regardless of how long a county list runs.
   ============================================= */

.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
  margin-top: 14px;
}

.region-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--text-body);
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.35s ease, border-color 0.35s ease;
}
.region-card:hover,
.region-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 16px 38px rgba(20, 40, 28, 0.16);
  border-color: var(--primary-light);
}

/* --- Media --- */
.region-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #e8eee9;
  border-bottom: 1px solid var(--border);
}
/* ---- Map thumbnail ---- */
.region-map {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #e8eee9;
  /* inert: every click belongs to the card link, not the map */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 0;
}
.region-map.is-loaded {
  opacity: 1;
}
.region-card:hover .region-map.is-loaded {
  transform: scale(1.05);
}
.region-map .leaflet-container {
  background: #e8eee9;
  border-radius: 0;
  font-family: var(--font-secondary);
}
.region-map .leaflet-control-container {
  display: none;
}

.map-credit {
  margin: 18px 0 0;
  text-align: center;
  font-size: 0.76rem;
  color: var(--text-light);
}
.map-credit a {
  color: var(--text-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.map-credit a:hover {
  color: var(--primary);
}

.region-card-count {
  position: absolute;
  z-index: 3;
  left: 10px;
  top: 10px;
  background: var(--primary-dark);
  color: #fff;
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 20px;
  box-shadow: 0 1px 6px rgba(20, 40, 28, 0.22);
}

/* --- Body --- */
.region-card-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 20px 20px;
  flex: 1 1 auto;
  border-top: 3px solid var(--primary);
}
.region-card-name {
  font-family: var(--font-primary);
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.28;
  transition: color 0.25s ease;
  /* two lines keeps "Westchester & the Hudson Valley" from
     stretching its row taller than every neighbour */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.56em;
}
.region-card:hover .region-card-name {
  color: var(--primary);
}
.region-card-counties {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.region-card-towns {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.46em;
}
.region-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-primary);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.01em;
}
.region-card-cta i {
  transition: transform 0.3s ease;
}
.region-card:hover .region-card-cta i {
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
  .region-card,
  .region-map,
  .region-card-cta i {
    transition: none;
  }
  .region-card:hover {
    transform: none;
  }
  .region-card:hover .region-map.is-loaded {
    transform: none;
  }
}

/* =============================================
   Corrections to inherited rules
   style.css targets h4 in places where the rebuilt
   markup uses semantic h2/h3. Re-point those rules.
   ============================================= */

.value-block h3 {
  font-family: "Roboto", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: #fff;
}

.footer-col .footer-heading {
  color: var(--white);
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 12px;
}
.footer-col .footer-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--primary);
  border-radius: 3px;
}

/* Footer: the inherited 1.2fr/2.8fr grid has no small-screen fallback,
   which pushed the footer wider than the viewport on phones. */
.footer-grid {
  align-items: start;
}
@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer-links {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-about,
  .footer-logo,
  .footer-about p {
    max-width: 100%;
  }
  .footer-logo-img {
    max-width: 180px;
  }
}

/* Marquee images: guarantee the frame is filled even while decoding,
   so the gallery never renders as a band of empty white. */
.marquee-card {
  background: var(--off-white);
}
.marquee-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.why-us-image img,
.about-img-main img {
  background: var(--off-white);
  object-fit: cover;
}

/* =============================================
   Header: six nav items plus a phone number and a
   button no longer fit the inherited spacing, so
   labels were wrapping onto two lines.
   ============================================= */

.main-nav ul {
  flex-wrap: nowrap;
}
.main-nav ul li a {
  white-space: nowrap;
}
.header-cta {
  flex-shrink: 0;
}
.header-phone,
.header-cta .btn {
  white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1360px) {
  .header-phone {
    font-size: 15px;
  }
}

/* Below 1200px the phone link and the button compete for the same room.
   The phone is already in the top bar and the sticky mobile bar. */
@media (min-width: 992px) and (max-width: 1199px) {
  .header-phone {
    display: none;
  }
}

.top-bar-left span,
.top-bar-right a {
  white-space: nowrap;
}

/* =============================================
   .btn-outline is defined white-on-transparent for use over
   dark hero imagery. On light surfaces that renders invisible.
   ============================================= */
.aside-card:not(.aside-emergency) .btn-outline,
.narrow-page .btn-outline,
.contact-form-wrap .btn-outline {
  color: var(--primary);
  border-color: var(--primary);
  background: transparent;
}
.aside-card:not(.aside-emergency) .btn-outline:hover,
.narrow-page .btn-outline:hover,
.contact-form-wrap .btn-outline:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

/* Prose underlines are right for inline links but wrong for card links. */
.prose .region-service-item,
.prose .region-service-item strong,
.prose .check-list a {
  text-decoration: none;
}
.prose .check-list a:hover {
  text-decoration: underline;
}

/* Eight service tiles in a four-column grid: two full rows, no orphan. */
.area-service-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .area-service-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* =============================================
   Contact form: style.css later redefines .contact-form as a
   two-column grid with a card of its own, which stacked the
   rebuilt form's rows four-across inside a nested card.
   ============================================= */
.contact-form-wrap .contact-form {
  display: block;
  max-width: none;
  margin: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  gap: 0;
}
.contact-form-wrap .form-row {
  margin-bottom: 0;
}
.contact-form-wrap .contact-form > button[type="submit"] {
  width: 100%;
  justify-content: center;
}

/* Map: keep the address readable even if the embed is blocked. */
.map-section {
  position: relative;
  background: var(--off-white);
}
.map-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: var(--secondary);
  color: #fff;
  line-height: 1.5;
  font-size: 0.95rem;
}
.map-caption address {
  font-style: normal;
  margin: 0;
}
.map-caption strong {
  color: #fff;
}
.map-caption a {
  color: var(--primary-light);
  font-weight: 700;
  white-space: nowrap;
}

/* =============================================
   Coverage map + location directory
   Leaflet map on the left, scrolling town list on the right.
   ============================================= */

.coverage-map-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: 28px;
  align-items: stretch;
}

.coverage-map {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.map-canvas {
  flex: 1 1 auto;
  min-height: 560px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #eaf0ec;
  z-index: 1;
}
.map-noscript {
  padding: 26px;
  color: var(--text-body);
}

/* Leaflet overrides */
.leaflet-container {
  font-family: var(--font-secondary);
  border-radius: var(--radius-lg);
}
.leaflet-popup-content {
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 12px 14px;
}
.leaflet-popup-content strong {
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--text-dark);
}
.leaflet-popup-content a {
  color: var(--primary);
  font-weight: 700;
}
.map-tip {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
  padding: 3px 8px;
}
.map-tip::before {
  display: none;
}
.map-tip.is-on {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}
.map-tip.is-hq {
  background: var(--accent);
  border-color: var(--accent);
  color: #3d2a02;
}

.map-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 14px 2px 0;
  font-size: 0.83rem;
  color: var(--text-light);
}
.map-key span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.map-key-swatch {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.map-key-swatch.zone {
  background: rgba(26, 122, 58, 0.22);
  border: 1.5px solid rgba(26, 122, 58, 0.85);
}
.map-key-swatch.pin {
  background: var(--primary-dark);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
}
.map-key-swatch.hq {
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
}

/* ---- Location directory ---- */
.coverage-locations {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 0;
}
.locations-head {
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--off-white);
}
.locations-title {
  font-family: var(--font-primary);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 6px;
  line-height: 1.25;
}
.locations-sub {
  font-size: 0.86rem;
  color: var(--text-body);
  margin: 0;
  line-height: 1.5;
}
.locations-sub strong {
  color: var(--primary);
}

.locations-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 496px;
  padding: 0 22px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule, #c9d2cc) transparent;
}
.locations-scroll::-webkit-scrollbar {
  width: 8px;
}
.locations-scroll::-webkit-scrollbar-thumb {
  background: #c9d2cc;
  border-radius: 4px;
}
.locations-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.locations-region {
  padding-top: 4px;
}
.locations-region + .locations-region {
  margin-top: 6px;
}
.locations-region-name {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 12px 0 8px;
  background: #fff;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  border-bottom: 2px solid var(--primary);
}
.locations-region-name a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-dark);
}
.locations-region-name a:hover {
  color: var(--primary);
}
.locations-region-name span {
  font-family: var(--font-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-lighter);
  border-radius: 20px;
  padding: 2px 9px;
  flex-shrink: 0;
}
.locations-region-counties {
  font-size: 0.75rem;
  color: var(--text-light);
  margin: 8px 0 6px;
  line-height: 1.45;
}
.locations-region ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 18px;
}
.locations-region li {
  font-size: 0.85rem;
  color: var(--text-body);
  padding: 4px 0;
  break-inside: avoid;
}
.locations-region.is-active .locations-region-name a {
  color: var(--primary);
}

.locations-foot {
  margin: 0;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--off-white);
  font-size: 0.83rem;
  color: var(--text-body);
}
.locations-foot a {
  color: var(--primary);
  font-weight: 700;
  white-space: nowrap;
}

/* ---- Compact variant on region pages ---- */
.coverage-map-wrap.is-compact {
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 18px 0 10px;
}
.coverage-map-wrap.is-compact .map-canvas {
  height: 420px;
}
.coverage-map-wrap.is-compact .locations-scroll {
  max-height: 320px;
}
.coverage-map-wrap.is-compact .locations-region ul {
  columns: 3;
}
.prose .coverage-map-wrap a {
  text-decoration: none;
}

@media (max-width: 991px) {
  .coverage-map-wrap {
    grid-template-columns: 1fr;
  }
  .map-canvas {
    height: 460px;
  }
  .locations-scroll {
    max-height: 420px;
  }
}
@media (max-width: 560px) {
  .map-canvas {
    height: 380px;
  }
  .locations-region ul,
  .coverage-map-wrap.is-compact .locations-region ul {
    columns: 1;
  }
}

/* =============================================
   Reveal animations: .reveal-left/right translate 50px sideways before
   they animate in. On narrow screens that pushed un-revealed blocks past
   the viewport edge and gave the page a horizontal scrollbar.
   ============================================= */
html {
  overflow-x: clip; /* clip, not hidden - keeps position:sticky working */
}

@media (max-width: 991px) {
  .reveal-left,
  .reveal-right {
    transform: translateY(40px);
  }
}

/* On phones the eight permanent map labels collapse into an unreadable
   stack. Hide them there; markers stay tappable and the directory
   underneath carries every name in full. */
@media (max-width: 767px) {
  .coverage-map .leaflet-tooltip.map-tip {
    display: none;
  }
  .map-canvas {
    min-height: 420px;
  }
}


/* =============================================
   Header alignment
   The logo asset carried ~60% transparent margin, so style.css scaled it
   to 200px tall and pulled it back with negative margins. That left a
   300x120 box in an 80px header and overflowed the row, pushing the CTA
   past the container edge. The asset is now cropped, so it can be sized
   honestly and the row fits.
   ============================================= */

.logo-img {
  height: 42px;
  width: auto;
  max-width: none;
  margin: 0;
  mix-blend-mode: normal;
  object-fit: contain;
}

/* Desktop only: below 992px responsive.css hides the CTA and turns the nav
   into a fixed off-canvas panel, and those rules must keep winning. */
@media (min-width: 992px) {
  .header-inner {
    gap: 20px;
  }
  .logo {
    flex: 0 0 auto;
  }
  .logo a {
    height: 80px;
  }

  /* Nav fills the header height exactly, so the active underline sits on
     the header's bottom edge instead of 1.5px below it. */
  .main-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
  }
  .main-nav > ul {
    align-items: stretch;
  }
  .main-nav > ul > li > a {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 14px;
  }
  .main-nav > ul > li > a::after {
    left: 14px;
    right: 14px;
  }
  .header-cta {
    flex: 0 0 auto;
    align-items: center;
    gap: 18px;
  }
}

/* Footer logo had the same negative-margin workaround. */
.footer-logo-img {
  height: 46px;
  width: auto;
  max-width: 100%;
  margin-top: 0;
  object-fit: contain;
}

@media (min-width: 992px) and (max-width: 1300px) {
  .main-nav > ul > li > a {
    padding: 0 10px;
  }
  .main-nav > ul > li > a::after {
    left: 10px;
    right: 10px;
  }
}

@media (max-width: 991px) {
  .logo-img {
    height: 38px;
  }
}

/* The footer logo wrapper was another workaround for the uncropped asset
   (negative margin, fixed 60px height, overflow hidden). With a cropped
   logo it can just size itself. */
.footer-logo {
  height: auto;
  overflow: visible;
  margin-top: 0;
  margin-bottom: 18px;
}

/* =============================================
   FM partner page
   ============================================= */

.partner-strip {
  background: var(--secondary);
  padding: 26px 0;
}
.partner-strip ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.partner-strip li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  border-left: 3px solid var(--primary);
}
.partner-strip strong {
  font-family: var(--font-primary);
  font-size: 1.9rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.partner-strip span {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
}

.table-scroll {
  overflow-x: auto;
  margin: 16px 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.capability-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.capability-table th,
.capability-table td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.5;
}
.capability-table tr:last-child th,
.capability-table tr:last-child td {
  border-bottom: 0;
}
.capability-table th {
  width: 32%;
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--text-dark);
  background: var(--off-white);
  white-space: nowrap;
}
.capability-table td {
  color: var(--text-body);
}
.capability-table tr:hover td {
  background: var(--primary-lighter);
}

@media (max-width: 900px) {
  .partner-strip ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .partner-strip ul {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   Service list inside prose (region pages + FM partner page).
   These rules were lost when the region-card block was rewritten;
   without them the list renders as a run-on line of link text.
   ============================================= */

.region-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 18px 0 10px;
}
.region-service-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px 18px;
  color: var(--text-body);
  transition: var(--transition);
}
.region-service-item:hover {
  background: var(--primary-lighter);
  border-color: var(--primary);
  transform: translateY(-2px);
}
.region-service-item i {
  color: var(--primary);
  font-size: 1.15rem;
  margin-top: 3px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.region-service-item span {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-light);
}
.region-service-item strong {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.98rem;
  color: var(--text-dark);
  font-weight: 600;
  margin-bottom: 3px;
}
.region-service-item:hover strong {
  color: var(--primary-dark);
}

/* =============================================
   Numbered process lists
   The connector was drawn inside each item as top:38px/bottom:4px, so a
   single-line step left only 4px of rail and the chain looked broken.
   The rail now runs from the bottom of each marker to the top of the next,
   and markers are optically centred on their first line of text.
   ============================================= */

.process-list li {
  padding: 0 0 26px 56px;
}
.process-list li:last-child {
  padding-bottom: 0;
}
.process-list li::before {
  top: -4px;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--white);
}
.process-list li::after {
  top: 32px;
  bottom: 0;
  left: 16px;
  width: 2px;
  background: var(--border);
}

/* On tinted sections the marker halo must match the section, not white. */
.bg-light .process-list li::before,
.faq-section .process-list li::before {
  box-shadow: 0 0 0 4px var(--off-white);
}