.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */:root {
  --scpr-navy: #1a1a1a;
  --scpr-navy-light: #2b2b2b;
  --scpr-steel: #3a3a3a;
  --scpr-steel-dark: #232323;
  --scpr-amber: #f0b323;
  --scpr-amber-dark: #cf9410;
  --scpr-off-white: #f6f4ef;
  --scpr-white: #ffffff;
  --scpr-ink: #1c1c1c;
  --scpr-ink-soft: #52504b;
  --scpr-border: #e2e0da;
  --scpr-success-bg: #f6f4ef;

  --scpr-radius-sm: 6px;
  --scpr-radius-md: 12px;
  --scpr-radius-lg: 20px;

  --scpr-shadow-sm: 0 2px 8px rgba(24, 36, 48, 0.08);
  --scpr-shadow-md: 0 8px 24px rgba(24, 36, 48, 0.12);
  --scpr-shadow-lg: 0 16px 48px rgba(24, 36, 48, 0.18);

  --scpr-space-1: 8px;
  --scpr-space-2: 16px;
  --scpr-space-3: 24px;
  --scpr-space-4: 32px;
  --scpr-space-5: 48px;
  --scpr-space-6: 64px;
  --scpr-space-7: 96px;

  --scpr-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --scpr-font-head: "Poppins", "Inter", -apple-system, sans-serif;

  --scpr-max-width: 1200px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--scpr-font-body);
  color: var(--scpr-ink);
  background: var(--scpr-white);
  line-height: 1.6;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--scpr-font-head);
  color: var(--scpr-navy);
  line-height: 1.2;
  margin: 0 0 var(--scpr-space-2);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 600; }
p  { margin: 0 0 var(--scpr-space-2); color: var(--scpr-ink-soft); }

a { color: var(--scpr-steel); text-decoration: none; }
a:hover { color: var(--scpr-steel-dark); }

img { max-width: 100%; display: block; }

.scpr-container {
  max-width: var(--scpr-max-width);
  margin: 0 auto;
  padding: 0 var(--scpr-space-3);
}

.scpr-eyebrow {
  display: inline-block;
  font-family: var(--scpr-font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--scpr-steel);
  margin-bottom: var(--scpr-space-1);
}

.scpr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--scpr-font-head);
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: var(--scpr-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
}

.scpr-btn:hover { transform: translateY(-2px); }

.scpr-btn-primary {
  background: var(--scpr-amber);
  color: var(--scpr-navy);
  box-shadow: var(--scpr-shadow-sm);
}
.scpr-btn-primary:hover { background: var(--scpr-amber-dark); color: var(--scpr-white); }

.scpr-btn-secondary {
  background: transparent;
  border-color: var(--scpr-white);
  color: var(--scpr-white);
}
.scpr-btn-secondary:hover { background: var(--scpr-white); color: var(--scpr-navy); }

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

.scpr-section {
  padding: var(--scpr-space-6) 0;
}

.scpr-section-tight {
  padding: var(--scpr-space-5) 0;
}

@media (max-width: 782px) {
  .scpr-section { padding: var(--scpr-space-5) 0; }
  .scpr-section-tight { padding: var(--scpr-space-4) 0; }
}

.scpr-card {
  background: var(--scpr-white);
  border: 1px solid var(--scpr-border);
  border-radius: var(--scpr-radius-md);
  box-shadow: var(--scpr-shadow-sm);
}

.scpr-text-center { text-align: center; }
.scpr-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.scpr-dark-hero {
  background: linear-gradient(135deg, var(--scpr-navy) 0%, var(--scpr-navy-light) 100%);
  color: var(--scpr-white);
}

.scpr-dark-band {
  background: var(--scpr-navy);
  color: var(--scpr-white);
}

.scpr-page-hero {
  padding: var(--scpr-space-6) 0;
}
.scpr-page-hero-eyebrow { color: var(--scpr-amber); }
.scpr-page-hero h1 { color: var(--scpr-white); }
.scpr-page-hero-sub { color: #d3dae0; font-size: 1.08rem; }

.scpr-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #a9b4bf;
  margin-bottom: var(--scpr-space-3);
}
.scpr-breadcrumb a { color: #a9b4bf; }
.scpr-breadcrumb a:hover { color: var(--scpr-white); }
.scpr-breadcrumb span[aria-current] { color: var(--scpr-amber); font-weight: 600; }

.scpr-media-badge {
  position: absolute;
  left: var(--scpr-space-2);
  bottom: var(--scpr-space-2);
  z-index: 3;
  background: rgba(24, 36, 48, 0.88);
  color: var(--scpr-white);
  padding: 10px 16px;
  border-radius: var(--scpr-radius-sm);
  font-family: var(--scpr-font-head);
}
.scpr-media-badge span { display: block; font-weight: 700; font-size: 0.9rem; }
.scpr-media-badge small { color: #c9d2da; font-size: 0.75rem; }

.scpr-faq-head { max-width: 620px; margin: 0 auto var(--scpr-space-4); }

.scpr-faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scpr-faq-item {
  border: 1px solid var(--scpr-border);
  border-radius: var(--scpr-radius-md);
  overflow: hidden;
}

.scpr-faq-question,
.scpr-faq-question:hover,
.scpr-faq-question:focus,
.scpr-faq-question:active,
.scpr-faq-question:visited {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--scpr-space-2);
  background: var(--scpr-white) !important;
  border: none;
  text-align: left;
  padding: var(--scpr-space-2) var(--scpr-space-3);
  font-family: var(--scpr-font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--scpr-navy) !important;
  cursor: pointer;
  outline: none;
  box-shadow: none !important;
  transition: background-color 0.15s ease;
}

.scpr-faq-question:hover,
.scpr-faq-question:focus-visible {
  background: var(--scpr-off-white) !important;
}

.scpr-faq-item.is-open .scpr-faq-question {
  background: var(--scpr-off-white) !important;
  color: var(--scpr-navy) !important;
}

.scpr-faq-icon {
  flex-shrink: 0;
  font-size: 1.3rem;
  color: var(--scpr-amber-dark) !important;
  transition: transform 0.15s ease;
}

.scpr-faq-item.is-open .scpr-faq-icon { transform: rotate(45deg); }

.scpr-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
  padding: 0 var(--scpr-space-3);
}

.scpr-faq-answer p { padding-bottom: var(--scpr-space-2); margin: 0; }

.scpr-faq-item.is-open .scpr-faq-answer { max-height: 400px; }

.scpr-svc-hero { padding: var(--scpr-space-7) 0; overflow: hidden; }
.scpr-svc-hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--scpr-space-5);
  align-items: center;
}
.scpr-svc-hero-eyebrow { color: var(--scpr-amber); }
.scpr-svc-hero-copy h1 { color: var(--scpr-white); margin-bottom: var(--scpr-space-2); }
.scpr-svc-hero-sub { color: #d3dae0; font-size: 1.05rem; max-width: 52ch; }
.scpr-svc-hero-actions { display: flex; flex-wrap: wrap; gap: var(--scpr-space-2); margin: var(--scpr-space-3) 0; }
.scpr-svc-hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 0; margin: var(--scpr-space-3) 0 0; }
.scpr-svc-hero-chips li { position: relative; padding-left: 22px; font-size: 0.9rem; color: #d3dae0; }
.scpr-svc-hero-chips li::before { content: "\2713"; position: absolute; left: 0; color: var(--scpr-amber); font-weight: 800; }
.scpr-svc-hero-media-frame { position: relative; border-radius: var(--scpr-radius-lg); overflow: hidden; box-shadow: var(--scpr-shadow-lg); }
.scpr-svc-hero-media-frame img { width: 100%; height: 420px; object-fit: cover; }

.scpr-svc-overview-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--scpr-space-5); align-items: start; }
.scpr-svc-overview-media { display: flex; flex-direction: column; gap: var(--scpr-space-3); position: sticky; top: var(--scpr-space-3); }
.scpr-svc-overview-frame { overflow: hidden; }
.scpr-svc-overview-frame img { aspect-ratio: 4 / 3; object-fit: cover; }
.scpr-svc-overview-lab-card { padding: var(--scpr-space-3); }
.scpr-svc-overview-lab-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.scpr-svc-overview-lab-card p { font-size: 0.9rem; margin: 0; }
.scpr-svc-overview-copy h2 { max-width: 22ch; }

.scpr-svc-process-head { max-width: 620px; margin: 0 auto var(--scpr-space-5); }
.scpr-svc-process-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--scpr-space-4) var(--scpr-space-5); }
.scpr-svc-process-item { display: flex; gap: var(--scpr-space-2); }
.scpr-svc-process-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--scpr-navy);
  color: var(--scpr-amber);
  font-family: var(--scpr-font-head);
  font-weight: 800;
  font-size: 1.1rem;
}
.scpr-svc-process-item h3 { margin-bottom: 6px; font-size: 1.1rem; }
.scpr-svc-process-item p { margin: 0; font-size: 0.92rem; }

.scpr-svc-related-card { padding: var(--scpr-space-3); }
.scpr-svc-related-card h3 { font-size: 1.1rem; margin-bottom: var(--scpr-space-2); }
.scpr-svc-related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.scpr-svc-related-list li { border-bottom: 1px solid var(--scpr-border); }
.scpr-svc-related-list li:last-child { border-bottom: none; }
.scpr-svc-related-list a {
  display: block;
  padding: 10px 2px;
  font-family: var(--scpr-font-head);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--scpr-navy);
}
.scpr-svc-related-list a:hover { color: var(--scpr-amber-dark); }

.scpr-svc-floating-related {
  position: fixed;
  right: var(--scpr-space-3);
  top: 50%;
  z-index: 40;
  width: 230px;
  padding: var(--scpr-space-3);
  opacity: 0;
  transform: translateY(-50%) translateX(120%);
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.scpr-svc-floating-related.is-visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}
.scpr-svc-floating-related h3 { font-size: 0.95rem; margin-bottom: var(--scpr-space-2); }

@media (max-width: 1100px) {
  .scpr-svc-floating-related { display: none; }
}

.scpr-svc-specialties { background: var(--scpr-off-white); }
.scpr-svc-specialties-head { max-width: 620px; margin: 0 auto var(--scpr-space-5); }
.scpr-svc-specialties-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--scpr-space-3); }
.scpr-svc-specialty-card { background: var(--scpr-white); padding: var(--scpr-space-3); }
.scpr-svc-specialty-card h3 { margin-bottom: 8px; font-size: 1.1rem; }
.scpr-svc-specialty-card p { margin: 0; font-size: 0.92rem; }

.scpr-svc-why-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--scpr-space-5); align-items: center; }
.scpr-svc-why-copy h2 { max-width: 18ch; }
.scpr-svc-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--scpr-space-3); text-align: center; }
.scpr-svc-why-item { display: flex; flex-direction: column; gap: 4px; padding: var(--scpr-space-2); background: var(--scpr-off-white); border-radius: var(--scpr-radius-md); }
.scpr-svc-why-num { font-family: var(--scpr-font-head); font-weight: 800; font-size: 1.6rem; color: var(--scpr-navy); }
.scpr-svc-why-label { font-size: 0.8rem; color: var(--scpr-ink-soft); line-height: 1.3; }

.scpr-svc-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--scpr-space-3); flex-wrap: wrap; }
.scpr-svc-cta h2 { color: var(--scpr-white); margin-bottom: 6px; }
.scpr-svc-cta p { color: #c9d2da; margin: 0; max-width: 52ch; }
.scpr-svc-cta-actions { display: flex; gap: var(--scpr-space-2); flex-wrap: wrap; }
.scpr-svc-cta-actions .scpr-btn-outline { border-color: var(--scpr-white); color: var(--scpr-white); }
.scpr-svc-cta-actions .scpr-btn-outline:hover { background: var(--scpr-white); color: var(--scpr-navy); }

@media (max-width: 900px) {
  .scpr-svc-hero-inner { grid-template-columns: 1fr; }
  .scpr-svc-hero-media { order: -1; }
  .scpr-svc-hero-media-frame img { height: 280px; }
  .scpr-svc-overview-grid { grid-template-columns: 1fr; }
  .scpr-svc-overview-media { position: static; }
  .scpr-svc-why-inner { grid-template-columns: 1fr; }
}

@media (max-width: 782px) {
  .scpr-svc-specialties-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .scpr-svc-process-list { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .scpr-svc-specialties-grid { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  .scpr-svc-why-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Location page template (Service Area county pages)
   Shared by the hero, overview, services-in-county, and why-us sections on
   every individual county page under /service-area. Mirrors the structure
   of the Services-page template above (.scpr-svc-*), kept under its own
   .scpr-loc-* namespace since it's a separate repeating page type with its
   own 7-page rollout. The FAQ accordion and closing dark-band CTA layout
   reuse the already-shared .scpr-faq-* and .scpr-dark-band classes rather
   than duplicating them under a third name. */

.scpr-loc-hero { padding: var(--scpr-space-7) 0; overflow: hidden; }
.scpr-loc-hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--scpr-space-5);
  align-items: center;
}
.scpr-loc-hero-eyebrow { color: var(--scpr-amber); }
.scpr-loc-hero-copy h1 { color: var(--scpr-white); margin-bottom: var(--scpr-space-2); }
.scpr-loc-hero-sub { color: #d3dae0; font-size: 1.05rem; max-width: 54ch; }
.scpr-loc-hero-actions { display: flex; flex-wrap: wrap; gap: var(--scpr-space-2); margin: var(--scpr-space-3) 0; }
.scpr-loc-hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 0; margin: var(--scpr-space-3) 0 0; }
.scpr-loc-hero-chips li { position: relative; padding-left: 22px; font-size: 0.9rem; color: #d3dae0; }
.scpr-loc-hero-chips li::before { content: "\2713"; position: absolute; left: 0; color: var(--scpr-amber); font-weight: 800; }
.scpr-loc-hero-media-frame { position: relative; border-radius: var(--scpr-radius-lg); overflow: hidden; box-shadow: var(--scpr-shadow-lg); }
.scpr-loc-hero-media-frame img { width: 100%; height: 420px; object-fit: cover; }

.scpr-loc-overview-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--scpr-space-5); align-items: start; }
.scpr-loc-overview-media { display: flex; flex-direction: column; gap: var(--scpr-space-3); position: sticky; top: var(--scpr-space-3); }
.scpr-loc-overview-frame { overflow: hidden; }
.scpr-loc-overview-frame img { aspect-ratio: 4 / 3; object-fit: cover; }
.scpr-loc-overview-fact-card { padding: var(--scpr-space-3); }
.scpr-loc-overview-fact-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.scpr-loc-overview-fact-card p { font-size: 0.9rem; margin: 0; }
.scpr-loc-overview-copy h2 { max-width: 26ch; }

.scpr-loc-services { background: var(--scpr-off-white); }
.scpr-loc-services-head { max-width: 680px; margin: 0 auto var(--scpr-space-5); }
.scpr-loc-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--scpr-space-3); }
.scpr-loc-service-card { background: var(--scpr-white); padding: var(--scpr-space-3); display: flex; flex-direction: column; }
.scpr-loc-service-card h3 { margin-bottom: 8px; font-size: 1.05rem; }
.scpr-loc-service-card p { margin: 0 0 var(--scpr-space-2); font-size: 0.9rem; flex-grow: 1; }
.scpr-loc-service-link { font-family: var(--scpr-font-head); font-weight: 600; font-size: 0.88rem; color: var(--scpr-steel); }

.scpr-loc-why-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--scpr-space-5); align-items: center; }
.scpr-loc-why-copy h2 { max-width: 20ch; }
.scpr-loc-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--scpr-space-3); text-align: center; }
.scpr-loc-why-item { display: flex; flex-direction: column; gap: 4px; padding: var(--scpr-space-2); background: var(--scpr-off-white); border-radius: var(--scpr-radius-md); }
.scpr-loc-why-num { font-family: var(--scpr-font-head); font-weight: 800; font-size: 1.6rem; color: var(--scpr-navy); }
.scpr-loc-why-label { font-size: 0.8rem; color: var(--scpr-ink-soft); line-height: 1.3; }

.scpr-loc-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--scpr-space-3); flex-wrap: wrap; }
.scpr-loc-cta h2 { color: var(--scpr-white); margin-bottom: 6px; }
.scpr-loc-cta p { color: #c9d2da; margin: 0; max-width: 52ch; }
.scpr-loc-cta-actions { display: flex; gap: var(--scpr-space-2); flex-wrap: wrap; }
.scpr-loc-cta-actions .scpr-btn-outline { border-color: var(--scpr-white); color: var(--scpr-white); }
.scpr-loc-cta-actions .scpr-btn-outline:hover { background: var(--scpr-white); color: var(--scpr-navy); }

@media (max-width: 900px) {
  .scpr-loc-hero-inner { grid-template-columns: 1fr; }
  .scpr-loc-hero-media { order: -1; }
  .scpr-loc-hero-media-frame img { height: 280px; }
  .scpr-loc-overview-grid { grid-template-columns: 1fr; }
  .scpr-loc-overview-media { position: static; }
  .scpr-loc-why-inner { grid-template-columns: 1fr; }
  .scpr-loc-services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .scpr-loc-services-grid { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  .scpr-loc-why-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Gallery page lightbox (added 9/3/26)
   Shared by both photo sections on the Gallery page: the before/after
   section (website/gallery/02-before-after.html) and the general project
   grid (website/gallery/03-gallery-grid.html). Every enlargeable photo on
   the page is a .scpr-lightbox-trigger button; the single overlay markup
   and its open/close/prev/next JS live in 03-gallery-grid.html since it's
   the last photo section on the page. Kept here rather than local to either
   section file because the same classes are needed in both. */

.scpr-lightbox-trigger,
.scpr-lightbox-trigger:hover,
.scpr-lightbox-trigger:focus,
.scpr-lightbox-trigger:active,
.scpr-lightbox-trigger:visited {
  all: unset;
  box-sizing: border-box;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.scpr-lightbox-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scpr-lightbox-zoom-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--scpr-white);
  background: rgba(24, 36, 48, 0);
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  pointer-events: none;
}

.scpr-lightbox-trigger:hover .scpr-lightbox-zoom-icon,
.scpr-lightbox-trigger:focus-visible .scpr-lightbox-zoom-icon {
  opacity: 1;
  background: rgba(24, 36, 48, 0.35);
}

.scpr-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: var(--scpr-space-4);
  background: rgba(12, 18, 24, 0.92);
}

.scpr-lightbox.is-open {
  display: flex;
}

.scpr-lightbox-figure {
  margin: 0;
  max-width: min(1000px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--scpr-space-2);
}

.scpr-lightbox-img {
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  height: auto;
  border-radius: var(--scpr-radius-sm);
  box-shadow: var(--scpr-shadow-lg);
}

.scpr-lightbox-caption {
  color: #d3dae0;
  font-size: 0.88rem;
  text-align: center;
  max-width: 70ch;
}

.scpr-lightbox-counter {
  color: #8b97a3;
  font-size: 0.8rem;
}

.scpr-lightbox-close,
.scpr-lightbox-close:hover,
.scpr-lightbox-close:focus,
.scpr-lightbox-close:active,
.scpr-lightbox-close:visited {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: var(--scpr-space-3);
  right: var(--scpr-space-3);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--scpr-white);
  cursor: pointer;
}
.scpr-lightbox-close:hover,
.scpr-lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.22);
}

.scpr-lightbox-nav,
.scpr-lightbox-nav:hover,
.scpr-lightbox-nav:focus,
.scpr-lightbox-nav:active,
.scpr-lightbox-nav:visited {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--scpr-white);
  cursor: pointer;
}
.scpr-lightbox-nav:hover,
.scpr-lightbox-nav:focus-visible {
  background: rgba(255, 255, 255, 0.22);
}
/* Matches .scpr-lightbox-nav's own specificity (class + pseudo-class) so
   that clicking/focusing an arrow can't fall back to the :focus variant of
   the base rule above and reset this positioning to "auto", which used to
   make the button jump to the center of the modal the instant it was
   clicked. */
.scpr-lightbox-nav.scpr-lightbox-prev { left: var(--scpr-space-3); }
.scpr-lightbox-nav.scpr-lightbox-next { right: var(--scpr-space-3); }

@media (max-width: 600px) {
  .scpr-lightbox-nav { width: 40px; height: 40px; }
  .scpr-lightbox-nav.scpr-lightbox-prev { left: var(--scpr-space-2); }
  .scpr-lightbox-nav.scpr-lightbox-next { right: var(--scpr-space-2); }
  .scpr-lightbox-close { top: var(--scpr-space-2); right: var(--scpr-space-2); }
}

/* Before/after pairs open as two images side by side in one lightbox slide,
   instead of as two separate single-image slides. */
.scpr-lightbox-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--scpr-space-2);
  width: 100%;
}
/* Without this, the browser's default [hidden] { display: none } rule (a
   user-agent style) loses to the author rule above at equal specificity,
   since author styles always beat user-agent styles regardless of source
   order. That let a single (non before/after) photo's lightbox slide set
   pairWrap.hidden = true in JS and still have the pair block render as a
   grid, showing empty before/after frames alongside the single image. */
.scpr-lightbox-pair[hidden] {
  display: none;
}
/* Before/after pairs get a wider lightbox stage than a single photo, since
   two side-by-side frames inside the single-photo width read as small on a
   normal screen. :has() is well supported by the browsers this site targets
   as of 2026; if that ever changes, the pair still renders correctly at the
   single-photo width, just smaller. */
.scpr-lightbox-figure:has(#scpr-lightbox-pair:not([hidden])) {
  max-width: min(1500px, 96vw);
}
.scpr-lightbox-pair-frame {
  position: relative;
  margin: 0;
  border-radius: var(--scpr-radius-sm);
  overflow: hidden;
  /* A fixed ratio reserves real space for the frame even before its image has
     loaded (or if a placeholder image fails to load), so the pair never
     collapses to a sliver that leaves the nav arrows sitting on the backdrop. */
  aspect-ratio: 4 / 3;
  max-height: 82vh;
  background: rgba(255, 255, 255, 0.03);
}
.scpr-lightbox-pair-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.scpr-lightbox-pair-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--scpr-font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--scpr-white);
}
.scpr-lightbox-pair-tag-before { background: rgba(24, 36, 48, 0.82); }
.scpr-lightbox-pair-tag-after { background: var(--scpr-amber-dark); color: var(--scpr-navy); }

@media (max-width: 700px) {
  .scpr-lightbox-pair { grid-template-columns: 1fr; }
}

/* --- Elementor / theme default overrides --- */
/* The FAQ accordion buttons sit inside Elementor's Custom HTML widget, which
   inherits Elementor/theme global link + button hover/active colors (often a
   bright pink/magenta accent). These rules pin the FAQ question button to our
   own palette so Elementor's default hover/active/focus states never show
   through. */
.elementor-widget-html .scpr-faq-question,
.elementor-widget-html .scpr-faq-question:hover,
.elementor-widget-html .scpr-faq-question:focus,
.elementor-widget-html .scpr-faq-question:active,
.elementor-widget-html .scpr-faq-question:visited,
.elementor-widget-html a.scpr-faq-question {
  background-color: var(--scpr-white) !important;
  color: var(--scpr-navy) !important;
  border-color: transparent !important;
}

.elementor-widget-html .scpr-faq-item.is-open .scpr-faq-question,
.elementor-widget-html .scpr-faq-question:hover,
.elementor-widget-html .scpr-faq-question:focus-visible {
  background-color: var(--scpr-off-white) !important;
}/* End custom CSS */