/* ====================================================
   SERVICES / INNER PAGES STYLES — PSEC LUXURY
   All service page layout, cards, grids, photo display
   ==================================================== */

/* ── Custom LED Lighting Showcase (5 new real-install photos) ── */
.led-showcase-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Hero card: full-width wide panoramic photo */
.led-hero-card {
  width: 100%;
}
.led-hero-card .photo-card__inner {
  border-radius: 14px;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.07) inset,
    0 -1px 0 rgba(0,0,0,0.6) inset,
    5px 8px 0 rgba(0,0,0,0.4),
    10px 18px 40px rgba(0,0,0,0.7),
    0 0 0 1px rgba(198,168,90,0.22),
    0 0 60px rgba(80,255,120,0.06);  /* subtle green glow for green hero */
}

/* 6-photo grid below hero: 2 columns, large cards */
.led-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
.led-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  overflow: hidden;
}
/* When last card is alone on a row (at 2-col), center it */
@media (max-width: 900px) {
  .led-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .led-grid-3 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.6rem);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}
/* Mobile: keep 2-col so cards stay large enough to see; never collapse to 1 */
@media (max-width: 560px) {
  .led-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .led-grid-3 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.3rem);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* 4K image quality — GPU-accelerated, no pixelation */
.led-4k-img {
  image-rendering: auto;
  -webkit-filter: contrast(1.06) saturate(1.14);
  filter: contrast(1.06) saturate(1.14);
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* Responsive: stack grid to 1-col on mobile */
@media (max-width: 640px) {
  .led-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Lighting section: full width for image grid, no sticky */
#lighting .svc-two-col {
  grid-template-columns: 1fr 2fr;
  align-items: start;
}
#lighting .svc-media-col {
  position: static;
}
/* Mobile: lighting section stacks — media col gets full container width */
@media (max-width: 768px) {
  #lighting .svc-two-col {
    grid-template-columns: 1fr;
  }
  #lighting .svc-media-col {
    width: 100%;
  }
  #lighting .led-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
  }
  /* Feature row: 3-col on tablet, wraps cleanly */
  #lighting .svc-feature-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
  }
  @media (max-width: 420px) {
    #lighting .svc-feature-row {
      grid-template-columns: 1fr 1fr;
    }
  }
}

/* ── RGBW Showcase ── */
.rgbw-showcase {
  margin-top: 2rem;
}
.rgbw-showcase-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 1.6rem;
}
.rgbw-eyebrow {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 0.75rem;
}
.rgbw-showcase-header h2 {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
  line-height: 1.15;
}
.rgbw-showcase-header h2 em { color: var(--gold); font-style: italic; }
.rgbw-lead {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
}

/* Mosaic layout: hero left + 2 stacked right */
.rgbw-mosaic {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.4rem;
  align-items: stretch;
}
.rgbw-mosaic-col {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.rgbw-hero-card .photo-card__inner {
  /* Override 3D tilt to be more dramatic for hero */
  transform: perspective(1000px) translateZ(0);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(0,0,0,0.55) inset,
    6px 8px 0 rgba(0,0,0,0.4),
    12px 18px 40px rgba(0,0,0,0.65),
    0 0 0 1px rgba(198,168,90,0.2),
    0 0 60px rgba(0,200,255,0.06);
}
.rgbw-hero-card:hover .photo-card__inner {
  transform: perspective(1000px) rotateX(-1deg) rotateY(2deg) translateY(-6px) scale(1.012);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.09) inset,
    0 -1px 0 rgba(0,0,0,0.65) inset,
    8px 18px 0 rgba(0,0,0,0.3),
    18px 28px 50px rgba(0,0,0,0.7),
    0 0 0 1px rgba(198,168,90,0.38),
    0 0 40px rgba(198,168,90,0.1);
}

/* 4K image rendering for RGBW photos */
.rgbw-img-4k {
  image-rendering: auto;
  filter: contrast(1.08) saturate(1.18) brightness(0.97);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), filter 0.4s ease;
}
.photo-card:hover .rgbw-img-4k {
  filter: contrast(1.1) saturate(1.22) brightness(1.0);
}

/* New PSEC installation photos — quality polish matching RGBW standard */
.psec-install-img {
  image-rendering: auto;
  filter: contrast(1.09) saturate(1.15) brightness(1.02);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), filter 0.4s ease;
}
.photo-card:hover .psec-install-img {
  filter: contrast(1.13) saturate(1.2) brightness(1.04);
}

/* Bottom 2-photo row centered */
.rgbw-bottom-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  max-width: 860px;
  margin: 1.4rem auto 0;
}

/* Bottom 4-up grid spacing */
.rgbw-grid {
  margin-top: 1.4rem;
}

/* Responsive */
@media (max-width: 900px) {
  .rgbw-mosaic { grid-template-columns: 1fr; }
  .rgbw-mosaic-col { flex-direction: row; }
  .rgbw-bottom-row { max-width: 100%; }
}
@media (max-width: 560px) {
  .rgbw-mosaic-col { flex-direction: column; }
  .rgbw-grid { grid-template-columns: repeat(2, 1fr); }
  .rgbw-bottom-row { grid-template-columns: 1fr; }
}

/* ── Global rendering sharpness for inner pages ── */
.page-header,
.page-header h1,
.page-header p,
.svc-hero,
.marina-hero,
.elev-hero,
.comm-hero,
.gen-hero {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Page header (services.css overrides style.css) ── */
.page-header {
  position: relative;
  padding: 5.5rem 0 3rem;
  background: linear-gradient(135deg, var(--navy) 0%, #0d1f3a 60%, var(--navy-mid) 100%);
  overflow: hidden;
  margin-top: 108px;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center bottom, rgba(0,200,255,0.07) 0%, transparent 65%);
}
.page-header-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(8,10,15,0.82) 0%, rgba(10,22,40,0.65) 100%);
}
.page-header-content {
  position: relative;
  z-index: 1;
  text-align: center;
}
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(198,168,90,0.1);
  border: 1px solid rgba(198,168,90,0.28);
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 0.5rem 1.4rem;
  border-radius: 50px;
  margin-bottom: 1.2rem;
}
.page-header-content h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  color: var(--white);
  line-height: 1.08;
  margin-bottom: 1rem;
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 700;
  font-style: normal;
  text-shadow: 0 2px 0 rgba(255,255,255,0.06), 0 8px 40px rgba(0,0,0,0.6);
}
.page-header-content p {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: rgba(255,255,255,0.65);
  margin-bottom: 1.5rem;
}

/* ── Breadcrumb ── */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
}
.breadcrumb a { color: rgba(255,255,255,0.45); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: var(--gold); }
.breadcrumb span:last-child { color: rgba(255,255,255,0.55); }

/* ── Section background tokens ── */
.svc-dark     { background: var(--black); }
.svc-charcoal { background: var(--charcoal); }

/* ── Intro strip ── */
.svc-intro { background: var(--navy-mid); padding: 2.6rem 0; }
.svc-intro-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem;
  align-items: start;
}
.svc-intro-text p.eyebrow-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.svc-intro-text h2 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-style: normal;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1rem;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.svc-intro-text > p {
  font-size: 0.95rem;
  color: var(--mid-gray);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.svc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.svc-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.72);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 50px;
  transition: var(--transition);
}
.svc-badges span:hover { border-color: rgba(198,168,90,0.3); color: var(--white); }
.svc-badges span i { color: var(--electric); font-size: 0.72rem; }

/* ── Intro stat cards ── */
.svc-intro-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  min-width: 260px;
}
.svc-stat-card {
  background: rgba(198,168,90,0.06);
  border: 1px solid rgba(198,168,90,0.15);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1rem;
  text-align: center;
  transition: var(--transition);
}
.svc-stat-card:hover {
  border-color: rgba(198,168,90,0.35);
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold);
}
.svc-stat-card i { font-size: 1.2rem; color: var(--electric); display: block; margin-bottom: 0.6rem; }
.svc-stat-num {
  display: block;
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.2rem;
}
.svc-stat-lbl {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mid-gray);
}

/* ── Section wrapper ── */
.svc-section { padding: 1.8rem 0; }

/* ── Section head ── */
.svc-section-head {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}
.svc-icon-badge {
  width: 56px; height: 56px;
  flex-shrink: 0;
  background: rgba(0,200,255,0.1);
  border: 1px solid rgba(0,200,255,0.25);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--electric);
}
.svc-section-head p.eyebrow-label,
.svc-section-head .eyebrow-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.45rem;
  opacity: 0.9;
}
.svc-section-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  color: #fff;
  margin-bottom: 0.7rem;
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.svc-lead {
  font-size: 0.96rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.78;
  max-width: 700px;
}

/* ── Eyebrow label (standalone) ── */
.eyebrow-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

/* ══════════════════════════════════════════
   TWO-COLUMN LAYOUT
   ══════════════════════════════════════════ */
.svc-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

/* Reversed: image on left, content on right */
.svc-two-col-rev {
  grid-template-columns: 1fr 1fr;
}
.svc-two-col-rev .svc-content-col { order: 2; }
.svc-two-col-rev .svc-media-col   { order: 1; }

/* Content column */
.svc-content-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Ensure children (feature rows, lists) always fill the column */
  min-width: 0;
  width: 100%;
}
/* Feature row always fills its content column — no stray left margin */
.svc-content-col .svc-feature-row {
  width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

/* Media / photo column */
.svc-media-col {
  position: sticky;
  top: calc(96px + 2rem);
}

/* ── Service list ── */
.svc-list { list-style: none; margin: 0.5rem 0 1rem; padding: 0; }
.svc-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.8);
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.055);
}
.svc-list li:last-child { border-bottom: none; }
.svc-list li i { color: var(--electric); font-size: 0.8rem; flex-shrink: 0; margin-top: 3px; }

/* ── Subheading ── */
.svc-subhead {
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.7rem;
  opacity: 0.92;
}

/* ── Feature row ── */
.svc-feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-top: 0.9rem;
}
.svc-feat {
  background: var(--grad-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 1.1rem 0.9rem;
  transition: var(--transition);
}
@media (max-width: 768px) {
  .svc-feature-row {
    width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 480px) {
  .svc-feature-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
  }
  .svc-feat { padding: 0.75rem 0.5rem; text-align: center; }
  .svc-feat i { margin-bottom: 0.3rem; font-size: 0.95rem; }
  .svc-feat h4 { font-size: 0.72rem; line-height: 1.3; }
  .svc-feat p { font-size: 0.7rem; line-height: 1.4; }
  #lighting .led-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
}
.svc-feat:hover { border-color: rgba(0,200,255,0.25); transform: translateY(-3px); box-shadow: var(--shadow-elec); }
.svc-feat i { font-size: 1.1rem; color: var(--electric); display: block; margin-bottom: 0.5rem; }
.svc-feat h4 { font-size: 0.84rem; font-weight: 700; color: var(--white); margin-bottom: 0.28rem; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.svc-feat p { font-size: 0.78rem; color: var(--mid-gray); line-height: 1.5; margin: 0; }

/* ── Spec row ── */
.svc-spec-row { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.svc-spec { display: flex; align-items: flex-start; gap: 1rem; }
.svc-spec-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgba(198,168,90,0.1);
  border: 1px solid rgba(198,168,90,0.2);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.svc-spec-icon i { color: var(--gold); }
.svc-spec h4 { font-size: 0.85rem; font-weight: 700; color: var(--white); margin-bottom: 0.2rem; }
.svc-spec p { font-size: 0.8rem; color: var(--mid-gray); margin: 0; }

/* ── Info card ── */
.svc-info-card {
  background: var(--grad-card);
  border: 1px solid rgba(198,168,90,0.15);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
}
.svc-info-card h4 {
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.svc-info-card p { font-size: 0.88rem; color: var(--mid-gray); line-height: 1.7; margin: 0; }

/* ── Safety / warning box ── */
.svc-safety-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: rgba(198,168,90,0.05);
  border: 1px solid rgba(198,168,90,0.2);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.5rem;
  margin-top: 1rem;
}
.svc-safety-box > i { font-size: 1.3rem; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.svc-safety-box h4 { font-size: 0.85rem; font-weight: 700; color: var(--white); margin-bottom: 0.3rem; }
.svc-safety-box p { font-size: 0.82rem; color: var(--mid-gray); line-height: 1.6; margin: 0; }

/* ══════════════════════════════════════════
   PHOTO / MEDIA COMPONENTS
   ══════════════════════════════════════════ */

/* ── Hero photo badge wrap ── */
.svc-photo-badge-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(198,168,90,0.18);
  background: #06090f;
  /* Ensure the background fills any letterbox area around contained images */
  display: flex;
  flex-direction: column;
}
.svc-photo-badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  background: linear-gradient(135deg, #6b4e00 0%, #C6A85A 40%, #D4AD60 62%, #C6A85A 84%, #7a5800 100%);
  color: #07111D;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 50px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.12) inset;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ── Hero image ──
   • object-fit: cover fills the card — no letterboxing, no black bars
   • aspect-ratio: auto lets the image's natural ratio show without black bars
     (portrait panels look portrait, landscape shots look landscape)
   • object-position: center top keeps key content (panel, dock) in frame
   ── */
.svc-hero-img {
  width: 100%;
  height: auto;           /* natural ratio — no stretching */
  display: block;
  border-radius: 0;
  max-width: 100%;
  background: #06090f;
  /* Sharp rendering — GPU layer, no sub-pixel blur */
  image-rendering: auto;
  filter: brightness(1.04) contrast(1.12) saturate(1.08);
  transition: filter 0.4s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.svc-photo-badge-wrap:hover .svc-hero-img {
  filter: brightness(1.07) contrast(1.15) saturate(1.12);
}

.svc-photo-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(8,10,15,0.92));
  padding: 2.5rem 1rem 1rem;
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
}
.svc-photo-caption i { color: var(--gold); margin-right: 6px; }

/* ── Margin top helper ── */
.mt-section { margin-top: 2.2rem; }

/* ── Seawall day/night side-by-side portrait photos ── */
.svc-day-night {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

/* Full-width variant — centered, large */
.svc-day-night--fullwidth {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  gap: 2rem;
}

/* Portrait variant — respects the image's natural 3:4 ratio */
.svc-photo-item--portrait {
  aspect-ratio: 3 / 4;
}

/* Seawall text row — centered, readable width */
.seawall-content-row {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.seawall-content-row .svc-feature-row {
  width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

/* Centered caption label below the image */
.svc-photo-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 1.2rem 0.8rem 0.7rem;
}
.svc-photo-label i {
  margin-right: 5px;
  color: var(--gold);
}

/* On the seawall section specifically, give the media col equal weight */
#seawall-lighting .svc-two-col {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

/* ── Image sharpening for lower-res source photos ── */
.img-sharpen {
  image-rendering: auto;
  -webkit-filter: contrast(1.12) saturate(1.1) brightness(1.02);
  filter: contrast(1.12) saturate(1.1) brightness(1.02);
  transform: translateZ(0) scale(1.0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── Photo grids ── */
.svc-photo-grid {
  display: grid;
  gap: 1.2rem;
  justify-content: center; /* centres partial last rows */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.svc-photo-grid-1 { grid-template-columns: 1fr; }
.svc-photo-grid-2 { grid-template-columns: repeat(2, 1fr); }
.svc-photo-grid-3 { grid-template-columns: repeat(3, 1fr); }
.svc-photo-grid-4 { grid-template-columns: repeat(4, 1fr); }
.svc-photo-grid-5 { grid-template-columns: repeat(5, 1fr); }

/* ── Orphan centering: last card alone on its row ──
   At desktop: 2-col grids get explicit centering.
   At tablet/mobile: inherited from responsive rules below.
   If the total count is odd the last child spans both columns
   and is capped to 50% width so it reads as one centred card. ── */
/* Desktop 2-col grid orphan centering */
.svc-photo-grid-2 .svc-photo-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc(50% - 0.6rem);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
/* Desktop 3-col grid: last item alone centres itself */
.svc-photo-grid-3 .svc-photo-item:last-child:nth-child(3n+1) {
  grid-column: 2 / 3;
}

/* ── Photo card item ──
   aspect-ratio on the CONTAINER is the reliable way to enforce
   uniform card height. The img inside uses width/height 100% + cover.
   ── */
.svc-photo-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #06090f;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.07);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  /* Container aspect-ratio = consistent card height in every grid */
  aspect-ratio: 4 / 3;
  display: block;
}
.svc-photo-item:hover {
  border-color: rgba(198,168,90,0.45);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  transform: translateY(-3px);
}

/* ── Images inside photo cards ──
   The container (.svc-photo-item) sets aspect-ratio.
   The image uses position:absolute + inset:0 to fill it 100%.
   object-fit:cover ensures no letterboxing, no black bars.
   ── */
.svc-photo-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), filter 0.3s ease;
  image-rendering: auto;
  filter: brightness(1.05) contrast(1.1) saturate(1.12);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.svc-photo-item:hover img {
  filter: brightness(1.1) contrast(1.14) saturate(1.18);
  transform: translateZ(0) scale(1.04);
}

/* img-rotate-cw class reserved for future use if a genuinely sideways image is added */

/* Single-column: 4:3 with full cover fill, centred */
.svc-photo-grid-1 {
  justify-items: center;   /* center the single card horizontally */
}
.svc-photo-grid-1 .svc-photo-item {
  aspect-ratio: 4 / 3;
  max-height: 600px;
  max-width: 680px;        /* keep the single card from going full-width on wide screens */
  width: 100%;
}
.svc-photo-grid-1 .svc-photo-item img {
  object-fit: cover;
  object-position: center center;
}

/* Two-column: 4:3 landscape */
.svc-photo-grid-2 .svc-photo-item {
  aspect-ratio: 4 / 3;
}
.svc-photo-grid-2 .svc-photo-item img {
  object-fit: cover;
  object-position: center center;
}

/* Three-column: 4:3 landscape */
.svc-photo-grid-3 .svc-photo-item {
  aspect-ratio: 4 / 3;
}
.svc-photo-grid-3 .svc-photo-item img {
  object-fit: cover;
  object-position: center center;
}

/* Three-column portrait override — for 3:4 portrait images (boat hoists, tall subjects) */
.svc-photo-grid-portrait .svc-photo-item {
  aspect-ratio: 3 / 4;
}
.svc-photo-grid-portrait .svc-photo-item img {
  object-fit: cover;
  object-position: center top;
}

/* Four-column: 4:3 uniform — covers panel/electrical shots cleanly */
.svc-photo-grid-4 .svc-photo-item {
  aspect-ratio: 4 / 3;
}
.svc-photo-grid-4 .svc-photo-item img {
  object-fit: cover;
  object-position: center center;
}

/* Five-column: 4:3 uniform thumbnails */
.svc-photo-grid-5 .svc-photo-item {
  aspect-ratio: 4 / 3;
}
.svc-photo-grid-5 .svc-photo-item img {
  object-fit: cover;
  object-position: center center;
}

/* Smooth zoom on hover */
.svc-photo-item:hover img { transform: scale(1.05); }

/* Caption overlay strip — sits above the absolute-positioned image */
.svc-photo-item span {
  display: block;
  /* Deeper bottom gradient — ensures caption text reads on any photo */
  background: linear-gradient(to top,
    rgba(2,4,10,0.98) 0%,
    rgba(2,4,10,0.82) 45%,
    rgba(2,4,10,0.30) 72%,
    transparent 100%
  );
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 2.5rem 0.9rem 0.9rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: rgba(255,255,255,1);
  pointer-events: none;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 5px rgba(0,0,0,1), 0 2px 10px rgba(0,0,0,0.9);
}
.svc-photo-item span i { color: #D4B870; margin-right: 5px; text-shadow: 0 1px 6px rgba(0,0,0,1); }

/* ── Category label ── */
.svc-category-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(13,32,68,0.97);
  border-left: 3px solid var(--cat-color, var(--electric));
  color: var(--cat-color, var(--electric));
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.5rem 1.2rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 1rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* ── Project label ── */
.svc-project-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #060e1e, #0f2040);
  border-radius: var(--radius-md);
  padding: 0.6rem 1.8rem;
  color: #D4B870;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.7), 0 0 0 1px rgba(198,168,90,0.2);
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* ══════════════════════════════════════════
   BEFORE / AFTER COMPONENT
   ══════════════════════════════════════════ */
.svc-before-after {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.06);
}
.svc-ba-panel { display: flex; flex-direction: column; }
.svc-ba-before .svc-ba-header {
  background: linear-gradient(135deg, #6b0000, #b83232);
}
.svc-ba-after .svc-ba-header {
  background: linear-gradient(135deg, #084018, #1e8a4e);
}
.svc-ba-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
}
.svc-ba-header > i {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--white); flex-shrink: 0;
}
.svc-ba-header strong {
  display: block;
  color: var(--white);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.svc-ba-header span { font-size: 0.75rem; color: rgba(255,255,255,0.75); }
.svc-ba-img {
  background: #0d0d0d;
  padding: 10px;
  flex: 1;
}
.svc-ba-img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center center;
  background: #06090f;
  border-radius: var(--radius-sm);
  display: block;
  min-height: 320px;
  /* 4K crisp rendering — GPU compositor layer */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: high-quality;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
/* When the after-panel holds a sub-grid, let each item in it keep the standard card ratio */
.svc-ba-img .svc-photo-item img {
  aspect-ratio: 4 / 3;
}
.svc-ba-caption {
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.svc-ba-caption.before { background: #1a0000; color: #ff9090; }
.svc-ba-caption.after  { background: #001a0a; color: #80ffb0; }
.svc-ba-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  border-left: 1px solid rgba(255,255,255,0.06);
  border-right: 1px solid rgba(255,255,255,0.06);
  font-size: 1.4rem;
  color: var(--gold);
  min-height: 200px;
}

/* ══════════════════════════════════════════
   BEFORE / AFTER — NEW 3-CARD STRIP
   ══════════════════════════════════════════ */

/* Outer strip: 3 photo cards + 2 slim arrow dividers
   The arrow cols are narrow (28px) and visually unobtrusive */
.svc-ba-strip {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  gap: 0;
  align-items: stretch;        /* all cards same height */
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.07);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Two-card variant (Before + After only) */
.svc-ba-strip--two {
  grid-template-columns: 1fr 28px 1fr;
}

/* Each photo card */
.svc-ba-card {
  display: flex;
  flex-direction: column;
  background: #0a0d14;
  min-width: 0;
}

/* Header strip inside each card */
.svc-ba-card-header {
  padding: 10px 16px;
  display: flex;
  align-items: center;
}
.svc-ba-card--before .svc-ba-card-header {
  background: linear-gradient(90deg, #2a0505, #1a0a0a);
  border-bottom: 2px solid rgba(220, 80, 80, 0.35);
}
.svc-ba-card--after .svc-ba-card-header {
  background: linear-gradient(90deg, #052215, #0a1a0e);
  border-bottom: 2px solid rgba(60, 180, 100, 0.35);
}

/* Pill badge */
.svc-ba-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 3px;
}
.svc-ba-pill--before {
  background: rgba(180, 40, 40, 0.75);
  color: #ffe0e0;
  border: 1px solid rgba(220, 80, 80, 0.6);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.svc-ba-pill--after {
  background: rgba(20, 130, 60, 0.75);
  color: #c0ffd8;
  border: 1px solid rgba(60, 200, 100, 0.6);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Image wrapper — aspect-ratio locks every card's photo to 3:4 portrait */
.svc-ba-card-img {
  background: #080b10;
  padding: 0;
  overflow: hidden;
  position: relative;
  aspect-ratio: 3 / 4;         /* matches all 3 portrait photos exactly */
}
.svc-ba-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;           /* fills the 3:4 box — no stretching since ratio matches */
  object-position: center top; /* keep top of image (subject) in frame */
  background: #080b10;
  image-rendering: auto;
  filter: brightness(1.04) contrast(1.1) saturate(1.06);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* Step 3 meter bank grid — center the 3rd card when it wraps to a new row */
@media (max-width: 1024px) {
  #meter-step3-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  #meter-step3-grid .svc-photo-item:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.6rem);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* Before card — portrait 768×1024 photo: use same 3:4 as after cards */
.svc-ba-card--before .svc-ba-card-img {
  aspect-ratio: 3 / 4;
}
.svc-ba-card--before .svc-ba-card-img img {
  object-fit: cover;
  object-position: center top;
  background: #06090f;
}
/* Last After card — center vertically so full meter/mast is visible */
.svc-ba-card--after:last-of-type .svc-ba-card-img img {
  object-position: center center;
  object-fit: contain;
  background: #06090f;
}

/* ── Generator Before / After — 2-card centered layout ── */
.gen-ba-wrap {
  display: grid;
  grid-template-columns: 1fr 36px 1fr;
  gap: 0;
  align-items: stretch;
  max-width: 820px;          /* centered, not full width */
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.07);
}
.gen-ba-card {
  display: flex;
  flex-direction: column;
  background: #0a0d14;
  min-width: 0;
}
.gen-ba-card--before .svc-ba-card-header {
  background: linear-gradient(90deg, #2a0505, #1a0a0a);
  border-bottom: 2px solid rgba(220,80,80,0.35);
}
.gen-ba-card--after .svc-ba-card-header {
  background: linear-gradient(90deg, #052215, #0a1a0e);
  border-bottom: 2px solid rgba(60,180,100,0.35);
}
.gen-ba-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #06090f;
  color: var(--gold);
  font-size: 1.1rem;
  flex-shrink: 0;
}
/* Image containers — each sized to its own natural ratio */
.gen-ba-img {
  position: relative;
  background: #080b10;
  overflow: hidden;
}
.gen-ba-img--landscape { aspect-ratio: 3 / 4; }   /* same height as portrait after card */
.gen-ba-img--portrait  { aspect-ratio: 3 / 4; }   /* 768×1024 after photo — full image */
.gen-ba-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  image-rendering: auto;
  transform: translateZ(0);
  will-change: transform;
}

/* Landscape variant for 2-card strips where photos are wider than tall */
.svc-ba-strip--landscape .svc-ba-card-img {
  aspect-ratio: 4 / 3;
}

/* Caption bar at bottom of card */
.svc-ba-card-caption {
  padding: 9px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.4px;
  background: rgba(4,6,12,0.8);
  border-top: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Arrow divider column — kept very slim, no visible black bar */
.svc-ba-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,11,16,0.6);
  border-left: 1px solid rgba(255,255,255,0.04);
  border-right: 1px solid rgba(255,255,255,0.04);
  color: rgba(198,168,90,0.4);
  font-size: 0.7rem;
  width: 28px;
}

/* License badge below the strip */
.svc-ba-badge {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--gold);
  opacity: 0.75;
}
.svc-ba-badge i { font-size: 0.78rem; }

/* ══ CarFix Before/After — seamless 2-card layout ════════════════════════ */
.carfix-ba-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  align-items: stretch;
  max-width: 900px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(198,168,90,0.25);
  box-shadow: 0 24px 72px rgba(0,0,0,0.75), 0 0 0 1px rgba(198,168,90,0.2);
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
/* Arrow badge — centered overlay, no column */
.carfix-ba-arrow {
  display: none;
}
/* ::after uses absolute positioning + line-height for centering (no display:flex on pseudo) */
.carfix-ba-wrap::after {
  content: '\f054';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: rgba(10,13,20,0.92);
  border: 1px solid rgba(198,168,90,0.5);
  border-radius: 50%;
  font-size: 0.72rem;
  color: var(--gold);
  line-height: 32px;
  text-align: center;
  z-index: 10;
  pointer-events: none;
}
.carfix-ba-card {
  display: flex;
  flex-direction: column;
  background: #0a0d14;
  min-width: 0;
}
.carfix-ba-card--before .svc-ba-card-header {
  background: linear-gradient(90deg, #2a0505, #1a0a0a);
  border-bottom: 2px solid rgba(220,80,80,0.35);
}
.carfix-ba-card--after .svc-ba-card-header {
  background: linear-gradient(90deg, #052215, #0a1a0e);
  border-bottom: 2px solid rgba(60,180,100,0.35);
}
.carfix-ba-img {
  background: #0a0d14;     /* same as card — no dark gap */
  position: relative;
  flex: 1;                 /* fill remaining card height */
  min-height: 0;
  aspect-ratio: 3 / 4;
}
.carfix-ba-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  image-rendering: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Responsive — stack vertically on mobile */
@media (max-width: 640px) {
  .carfix-ba-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 3px;
    max-width: 480px;
  }
  .carfix-ba-wrap::after {
    top: 50%;
    font-size: 0.65rem;
    /* on mobile stacked, rotate arrow to point down */
    content: '\f078';   /* fa-chevron-down */
  }
}

/* ══ Full-width spotlight feature photo ══════════════════════════════════ */
.svc-spotlight-full {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(198,168,90,0.2);
}
.svc-spotlight-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #06090f;
  overflow: hidden;
}
.svc-spotlight-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  /* 4K GPU-accelerated sharp rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: high-quality;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  transition: transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.svc-spotlight-full:hover .svc-spotlight-img-wrap img {
  transform: translateZ(0) scale(1.025);
}
.svc-spotlight-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(6,9,15,0.95) 0%, rgba(6,9,15,0.5) 60%, transparent 100%);
  padding: 3rem 1.8rem 1.2rem;
  color: rgba(255,255,255,0.9);
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.svc-spotlight-caption i {
  color: var(--gold);
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* ══ Service Work — Before Solo + After Pair layout ═════════════════════
   The Before card sits full-width on top; two After cards sit side-by-side below.
   All photos are 768×1024 portrait. Cards use the same svc-ba-card styles.
   ═══════════════════════════════════════════════════════════════════════ */

/* Wrapper for the solo Before card — centered, max width matches two after cards */
.svc-ba-solo-before {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  width: 100%;
}
.svc-ba-solo-before .svc-ba-card {
  width: 100%;
  max-width: 560px;           /* single portrait card — not too wide */
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.07);
}
.svc-ba-solo-before .svc-ba-card-img {
  aspect-ratio: 3 / 4;       /* portrait 768×1024 */
}

/* Down-arrow between Before and After pair */
.svc-ba-solo-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  opacity: 0.6;
  font-size: 1.4rem;
  padding: 0.6rem 0;
}

/* Two After cards side-by-side, matching width of the solo Before card */
.svc-ba-after-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
  max-width: 560px;           /* same max as the Before card */
  margin: 0 auto;
}
.svc-ba-after-pair .svc-ba-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255,255,255,0.07);
  min-width: 0;
}
.svc-ba-after-pair .svc-ba-card-img {
  aspect-ratio: 3 / 4;       /* portrait — show full image */
}
.svc-ba-after-pair .svc-ba-card-img img {
  object-fit: cover;
  object-position: center top;  /* keep subjects in frame */
}

/* License badge below the after pair — centered to match */
.svc-ba-after-pair + .svc-ba-badge {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* On very small phones, stack the after pair vertically too */
@media (max-width: 400px) {
  .svc-ba-after-pair {
    grid-template-columns: 1fr;
  }
}

/* ── Before/After strip: responsive ── */

/* Tablet: keep all 3 cards visible side by side, just tighter */
@media (max-width: 900px) {
  .svc-ba-strip {
    grid-template-columns: 1fr 18px 1fr 18px 1fr;
  }
}

/* Mobile: stacked single column — clean 4:3 cards */
@media (max-width: 640px) {
  .svc-ba-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--radius-md);
  }
  /* Hide both arrow dividers on mobile */
  .svc-ba-arrow {
    display: none;
  }
  /* Restore the hidden 3rd card (show all 3 but in 2-col grid, 3rd wraps) */
  .svc-ba-card:nth-child(5) { display: flex; }
  /* First card spans full width as hero before, then 2 after cards side by side */
  .svc-ba-card--before:first-child {
    grid-column: 1 / -1;
  }
  .svc-ba-card-img {
    aspect-ratio: 3 / 4;
  }
  .svc-ba-card-img img {
    min-height: auto;
    object-position: center top;
  }
  .svc-ba-card-caption {
    white-space: normal;
    font-size: 0.7rem;
  }
}
/* ── PEDESTAL STEP-BY-STEP SEQUENCE GRID ──────────────────────────────
   4 cards per row. Large, photo-forward cards with portrait aspect ratio
   to match the 768×1024 construction photos.
   ──────────────────────────────────────────────────────────────────── */
.svc-sequence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 260px));
  gap: 1.4rem;
  width: 100%;
  justify-content: center;
}
/* All items natural flow — last orphan auto-centers because grid is center-justified */
.svc-seq-item { grid-column: auto; }
.svc-seq-item {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy-mid);
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}
.svc-seq-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.svc-seq-num {
  background: linear-gradient(135deg, var(--navy), #1a2e4a);
  color: var(--gold);
  font-weight: 900;
  font-size: 0.78rem;
  padding: 8px 12px;
  border-bottom: 2px solid rgba(198,168,90,0.25);
  display: flex;
  align-items: center;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.svc-seq-final .svc-seq-num {
  background: linear-gradient(135deg, var(--navy), #1a2e4a);
  color: var(--gold);
  border-color: rgba(198,168,90,0.35);
}
.svc-seq-body { position: relative; flex: 1; overflow: hidden; aspect-ratio: 3 / 4; min-height: 260px; }
.svc-seq-body img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #06090f;
  display: block;
  image-rendering: auto;
  filter: brightness(1.04) contrast(1.1) saturate(1.06);
  transition: filter 0.3s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.svc-seq-body span {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(8,10,15,0.92));
  padding: 1.2rem 0.6rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--white);
  pointer-events: none;
}
.svc-seq-body span i { color: var(--gold); margin-right: 4px; }

/* ── Sequence grid responsive rules: see MASTER BLOCK at end of file ── */

/* ══════════════════════════════════════════
   PROCESS STEPS
   ══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   METER BANK INSTALLATION PROCESS BOX
   ══════════════════════════════════════════ */
.meter-process-box {
  background: rgba(198,168,90,0.04);
  border: 1px solid rgba(198,168,90,0.22);
  border-top: 3px solid var(--gold);
  border-radius: 12px;
  padding: 2rem 2.4rem 2.2rem;
  position: relative;
  overflow: hidden;
}
.meter-process-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(198,168,90,0.03) 0%, transparent 60%);
  pointer-events: none;
}
.meter-process-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(198,168,90,0.15);
}
.meter-process-header i {
  font-size: 1.2rem;
  color: var(--gold);
}
.meter-process-header h3 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  margin: 0;
  letter-spacing: 0.01em;
}
.meter-process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.meter-proc-step {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 0.9rem 0;
}
.meter-proc-num {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: var(--gold);
  color: var(--black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: var(--font-head);
  flex-shrink: 0;
  margin-top: 1px;
}
.meter-proc-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.meter-proc-text strong {
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--white);
  font-family: var(--font-head);
}
.meter-proc-text span {
  font-size: 0.82rem;
  color: var(--mid-gray);
  line-height: 1.6;
}
.meter-proc-divider {
  height: 1px;
  background: rgba(198,168,90,0.1);
  margin: 0 0 0 3rem;
}

@media (max-width: 600px) {
  .meter-process-box { padding: 1.4rem 1.2rem; }
  .meter-proc-step { gap: 0.9rem; }
}

.svc-process-steps { margin-top: 1rem; }
.svc-process-steps h4 {
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.svc-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.75);
}
.svc-step:last-child { border-bottom: none; }
.svc-step-num {
  width: 26px; height: 26px; flex-shrink: 0;
  background: var(--grad-gold);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 900;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(198,168,90,0.4);
}

/* ══════════════════════════════════════════
   SPOTLIGHT (stair lighting, featured product)
   ══════════════════════════════════════════ */
.svc-spotlight {
  background: var(--grad-card);
  border: 1px solid rgba(198,168,90,0.15);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 0;
}
.svc-spotlight-label {
  background: var(--grad-gold);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.6rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.svc-spotlight-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.svc-spotlight-inner > img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center center;
  background: #06090f;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}
.svc-spotlight-text {
  padding: 2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.svc-spotlight-text h3 { font-size: 1.3rem; color: var(--white); margin-bottom: 0.75rem; }
.svc-spotlight-text p { font-size: 0.9rem; color: var(--mid-gray); line-height: 1.7; }

/* ── ESD spotlight: 2 photos left + text right, fully centered, mobile-safe ── */
.esd-spotlight-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.esd-spotlight-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: #05070b;
  padding: 6px;
}

/* ── esd-photo-card: simple card, NO aspect-ratio, NO overflow:hidden, NO absolute children ── */
.esd-photo-card {
  position: relative;
  background: #05070b;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.esd-photo-card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: contain;
  object-position: center center;
  background: #05070b;
  image-rendering: -webkit-optimize-contrast;
}
.esd-photo-card span {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.75);
  text-align: center;
  background: rgba(0,0,0,0.5);
  letter-spacing: 0.3px;
  line-height: 1.4;
}
.esd-photo-card span i { color: #D4B870; margin-right: 0.3rem; }

.esd-spotlight-text {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.esd-spotlight-text h3 { font-size: 1.2rem; color: var(--white); margin-bottom: 0.75rem; }
.esd-spotlight-text p  { font-size: 0.88rem; color: var(--mid-gray); line-height: 1.7; }
@media (max-width: 768px) {
  .esd-spotlight-body { grid-template-columns: 1fr; }
  .esd-spotlight-photos { grid-template-columns: 1fr 1fr; }
  .esd-photo-card img { max-height: 260px; }
  .esd-spotlight-text { text-align: center; padding: 1.4rem 1rem; }
  .esd-spotlight-text .svc-list { text-align: left; display: inline-block; }
}
@media (max-width: 480px) {
  .esd-spotlight-photos { grid-template-columns: 1fr 1fr; gap: 4px; }
  .esd-photo-card img { max-height: 180px; }
}

/* ── Day/night photo pair ── */
.svc-day-night { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.svc-day-night .svc-photo-item img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center center;
  image-rendering: high-quality;
}

/* ══════════════════════════════════════════
   SERVICES CARD GRID
   ══════════════════════════════════════════ */
.svc-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}
.svc-service-card {
  background: var(--grad-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.4rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.svc-service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.svc-service-card:hover {
  border-color: rgba(0,200,255,0.25);
  transform: translateY(-6px);
  box-shadow: var(--shadow-elec);
}
.svc-service-card:hover::before { transform: scaleX(1); }
.svc-service-card i {
  font-size: 1.5rem;
  color: var(--electric);
  display: block;
  margin-bottom: 0.75rem;
}
.svc-service-card h4 {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.45rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.svc-service-card p {
  font-size: 0.83rem;
  color: var(--mid-gray);
  line-height: 1.6;
  margin: 0;
}

/* ══════════════════════════════════════════
   CTA SECTION
   ══════════════════════════════════════════ */
.svc-cta-section {
  background: var(--navy-mid);
  border-top: 1px solid rgba(198,168,90,0.15);
  border-bottom: 1px solid rgba(198,168,90,0.15);
  padding: 3rem 0;
  position: relative;
  overflow: hidden;
}
.svc-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,200,255,0.04) 0%, transparent 70%);
}
.svc-cta-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.svc-cta-inner h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--white);
  margin-bottom: 0.4rem;
}
.svc-cta-inner p { font-size: 0.9rem; color: var(--mid-gray); }
.svc-cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; flex-shrink: 0; }

/* ══════════════════════════════════════════
   SCROLL-TO-TOP BUTTON (id="scrollTop")
   ══════════════════════════════════════════ */
#scrollTop {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 999;
  background: rgba(8,10,15,0.85);
  border: 1px solid rgba(198,168,90,0.25);
  color: var(--gold);
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#scrollTop.visible {
  opacity: 1;
  pointer-events: all;
}
#scrollTop:hover {
  background: rgba(198,168,90,0.15);
  border-color: var(--gold);
  box-shadow: var(--glow-gold);
  transform: translateY(-3px);
}

/* ══════════════════════════════════════════
   LIGHTBOX (built by main.js)
   ══════════════════════════════════════════ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8,10,15,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.lightbox-overlay img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(198,168,90,0.2);
  /* 4K-quality rendering in lightbox */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: high-quality;
}
.lightbox-close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.lightbox-close:hover {
  background: rgba(198,168,90,0.2);
  border-color: var(--gold);
  color: var(--gold);
}

/* ══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════ */

/* ══ 1200px ══ */
@media (max-width: 1200px) {
  .svc-photo-grid-5 { grid-template-columns: repeat(3, 1fr); }
  /* Keep 8-virtual-col / 4-visible layout intact at 1200px — no change needed */
}

/* ══ 1024px — tablets ══ */
@media (max-width: 1024px) {
  .svc-intro-inner { grid-template-columns: 1fr; }
  .svc-intro-cards { grid-template-columns: repeat(4, 1fr); max-width: 520px; }
  .svc-two-col,
  .svc-two-col-rev { grid-template-columns: 1fr; gap: 2rem; }
  .svc-two-col-rev .svc-content-col,
  .svc-two-col-rev .svc-media-col { order: unset; }
  .svc-media-col { position: static; }
  /* Hero image: at full width just limit max-height */
  .svc-hero-img { max-height: 520px; }
  .svc-section-head { flex-direction: column; }
  .svc-spotlight-inner { grid-template-columns: 1fr; }
  /* Spotlight image on tablet: keep portrait ratio, full image visible */
  .svc-spotlight-inner > img { aspect-ratio: 4 / 3; max-height: 480px; object-fit: cover; }
  .svc-before-after { grid-template-columns: 1fr; }
  .svc-ba-divider { min-height: 48px; width: 100%; }
  .svc-services-grid { grid-template-columns: repeat(2, 1fr); }
  /* Sequence grid at 1024px — handled by the dedicated block below */
  .svc-photo-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .svc-photo-grid-4 { grid-template-columns: repeat(2, 1fr); }
  /* 4-col at 2-col: keep portrait ratio */
  .svc-photo-grid-4 .svc-photo-item { aspect-ratio: 3 / 4; }
  /* 5-col at 3-col: portrait */
  .svc-photo-grid-5 .svc-photo-item { aspect-ratio: 3 / 4; }

  /* ── Orphan centering at tablet (2-col grids) ── */
  /* grid-4 collapses to 2-col: odd last child → centre */
  .svc-photo-grid-4 .svc-photo-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.6rem);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  /* grid-5 collapses to 3-col: last child alone → centre in 3rd column naturally */
  /* service cards: 6 cards at 2-col = even, no orphan needed */
  /* elevator service cards: 6 at 2-col = even, no orphan needed */

  /* sequence-grid centering: handled by dedicated block below */
}

/* ══ 768px — mobile ══ */
@media (max-width: 768px) {
  .page-header { padding: 4rem 0 2.5rem; }
  .svc-intro { padding: 2.2rem 0; }
  .svc-intro-cards { grid-template-columns: repeat(2, 1fr); max-width: none; }
  .svc-section { padding: 1.6rem 0; }
  /* Photo grids: 3-col → 2-col; 4/5-col → 2-col */
  .svc-photo-grid { gap: 0.75rem; }
  .svc-photo-grid-3 { grid-template-columns: repeat(2, 1fr); }
  /* Elevator photo grids: collapse to 1-col on mobile so cards match other full-width cards */
  .elev-photo-grid { grid-template-columns: 1fr !important; }
  .elev-photo-grid .svc-photo-item { aspect-ratio: 3 / 4; max-width: 100%; width: 100%; }
  .svc-photo-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .svc-photo-grid-5 { grid-template-columns: repeat(2, 1fr); }
  /* Mobile grids: keep each grid's defined ratio, single col uses landscape */
  .svc-photo-grid-1 .svc-photo-item { aspect-ratio: 4 / 3; max-height: 400px; }
  /* grid-2 and grid-3 contain landscape marina/pedestal photos — keep 4:3 */
  .svc-photo-grid-2 .svc-photo-item,
  .svc-photo-grid-3 .svc-photo-item { aspect-ratio: 4 / 3; }
  /* grid-4 and grid-5 contain portrait panel photos — keep 3:4 */
  .svc-photo-grid-4 .svc-photo-item,
  .svc-photo-grid-5 .svc-photo-item { aspect-ratio: 3 / 4; }
  /* Hero image: cover fills card on mobile */
  .svc-hero-img { max-height: 420px; min-height: 180px; object-fit: cover; }
  /* Feature rows: 2 tiles → side by side centred; 3 tiles → 3-col */
  .svc-feature-row { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; justify-content: center; }
  .svc-feature-row:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
  .svc-services-grid { grid-template-columns: 1fr 1fr; }
  .svc-cta-inner { flex-direction: column; text-align: center; }
  /* Sequence grid at 768px — handled by the dedicated block below */
  .svc-day-night { grid-template-columns: 1fr 1fr; } /* keep side by side on mobile */
  .svc-day-night .svc-photo-item { aspect-ratio: 4 / 3; }
  .svc-cta-btns { justify-content: center; }
  /* Old ba-img: cover at mobile */
  .svc-ba-img img { aspect-ratio: 4 / 3; object-fit: cover; min-height: auto; }

  /* ── Orphan centering at mobile (all 2-col grids) ── */
  /* grid-3 → 2-col: odd last child centres */
  .svc-photo-grid-3 .svc-photo-item:last-child:nth-child(odd),
  .svc-photo-grid-4 .svc-photo-item:last-child:nth-child(odd),
  .svc-photo-grid-5 .svc-photo-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.375rem);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  /* service cards at 2-col: 6 cards = even rows, no orphan */
  /* elev-services-grid at 1-col: stacks naturally */
  .elev-services-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* Service inner page heroes — match 76px navbar at 768px */
  .svc-hero,
  .marina-hero,
  .elev-hero,
  .comm-hero,
  .gen-hero { margin-top: 80px; }

  /* page-header on service pages — match 80px navbar */
  .page-header { margin-top: 80px; }
}

/* ══ 480px — small phones ══ */
@media (max-width: 480px) {
  /* Service inner page heroes — match 62px navbar */
  .svc-hero,
  .marina-hero,
  .elev-hero,
  .comm-hero,
  .gen-hero { margin-top: 68px; }

  /* page-header on service pages — match 68px mobile navbar */
  .page-header { margin-top: 68px !important; }

  /* sequence grid at 480px — handled by dedicated block below */
  .svc-seq-item:nth-child(1),
  .svc-seq-item:nth-child(2),
  .svc-seq-item:nth-child(3),
  .svc-seq-item:nth-child(4),
  .svc-seq-item:nth-child(5),
  .svc-seq-item:nth-child(6),
  .svc-seq-item:nth-child(7) { grid-column: auto; }

  /* carfix before/after: stack to 1-col */
  .carfix-ba-wrap { max-width: 480px; }
  .svc-ba-strip { border-radius: var(--radius-md); }

  /* service grids: single column */
  .svc-services-grid { grid-template-columns: 1fr; }
  /* Step 3 photos: collapse to 1-col so they match Steps 1,2,4 full-width on mobile */
  .svc-photo-grid-3 { grid-template-columns: 1fr !important; }
  .svc-photo-grid-3 .svc-photo-item { aspect-ratio: 4 / 3; max-width: 100%; }
  /* Elevator photo grids stay 1-col at 480px too */
  .elev-photo-grid { grid-template-columns: 1fr !important; }
  .elev-photo-grid .svc-photo-item { aspect-ratio: 3 / 4; }
}

/* ══════════════════════════════════════════
   SERVICE WORK HERO (full-bleed, left-aligned)
   ══════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   UNIFIED SERVICE PAGE HERO — Logo-Centered Design
   Applied via: .svc-hero, .marina-hero, .elev-hero,
                .comm-hero, .gen-hero (all use same layout)
   ══════════════════════════════════════════════════════════════ */

/* ── Shared hero shell ── */
.svc-hero,
.marina-hero,
.elev-hero,
.comm-hero,
.gen-hero {
  position: relative;
  background: #05070b;
  margin-top: 108px;
  padding: 32px 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  min-height: auto;
}

/* Kill all overlays — clean background only */
.svc-hero-overlay,
.marina-hero-overlay,
.elev-hero-overlay,
.comm-hero-overlay,
.gen-hero-overlay {
  display: none !important;
}

/* Container: full width, centered column */
.svc-hero .container,
.marina-hero .container,
.elev-hero .container,
.comm-hero .container,
.gen-hero .container {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ── Centered logo block ── */
.psec-hero-logo {
  display: block;
  width: clamp(280px, 42vw, 480px);
  max-width: 480px;
  height: auto;
  object-fit: contain;
  margin: 0 auto 3rem;
  /* no box, border, shadow, or glow — clean on background */
  background: none;
  border: none;
  box-shadow: none;
  filter: none;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

/* ── Content block below logo ── */
.svc-hero-content,
.marina-hero-content,
.elev-hero-content,
.comm-hero-content,
.gen-hero-content {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}

/* ── Eyebrows — all hero pages ── */
.svc-hero-eyebrow,
.marina-hero-eyebrow,
.elev-hero-eyebrow,
.comm-hero-eyebrow,
.gen-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
  justify-content: center;
}
.svc-hero-eyebrow::before, .svc-hero-eyebrow::after,
.marina-hero-eyebrow::before, .marina-hero-eyebrow::after,
.elev-hero-eyebrow::before, .elev-hero-eyebrow::after,
.comm-hero-eyebrow::before, .comm-hero-eyebrow::after {
  content: '';
  display: block;
  width: 30px; height: 1px;
  background: var(--gold);
  opacity: 0.6;
}
.gen-hero-eyebrow span {
  display: block;
  width: 28px; height: 1px;
  background: var(--gold);
  opacity: 0.45;
}

/* ── H1 headlines ── */
.svc-hero h1,
.marina-hero h1,
.elev-hero h1,
.comm-hero h1,
.gen-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.08;
  line-height: 1.12;
  color: var(--white);
  margin-bottom: 1.2rem;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 0 rgba(255,255,255,0.05), 0 6px 40px rgba(0,0,0,0.7);
}

/* ── Dividers ── */
.svc-hero-divider,
.marina-hero-divider,
.elev-hero-divider,
.comm-hero-divider,
.gen-hero-divider {
  width: 56px; height: 1px;
  background: var(--grad-gold);
  opacity: 0.85;
  margin: 0 auto 1.2rem;
  box-shadow: 0 0 10px rgba(198,168,90,0.45);
}

/* ── Sub-lines ── */
.svc-hero-sub,
.marina-hero-sub,
.elev-hero-sub,
.comm-hero-sub,
.gen-hero-sub {
  font-size: clamp(0.82rem, 1.4vw, 0.92rem);
  color: rgba(255,255,255,0.55);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 2.4rem;
}

/* ── CTA button rows ── */
.svc-hero-btns,
.marina-hero-btns,
.elev-hero-btns,
.comm-hero-btns,
.gen-hero-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Breadcrumbs ── */
.svc-hero-breadcrumb,
.marina-breadcrumb,
.elev-hero-breadcrumb,
.comm-hero-breadcrumb,
.gen-breadcrumb {
  margin-top: 2.4rem;
  position: static;
  transform: none;
  left: auto;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
}
.svc-hero-breadcrumb a,
.marina-breadcrumb a,
.elev-hero-breadcrumb a,
.comm-hero-breadcrumb a,
.gen-breadcrumb a {
  color: rgba(255,255,255,0.35);
  transition: color 0.2s;
}
.svc-hero-breadcrumb a:hover,
.marina-breadcrumb a:hover,
.elev-hero-breadcrumb a:hover,
.comm-hero-breadcrumb a:hover,
.gen-breadcrumb a:hover { color: var(--gold); }
.svc-hero-breadcrumb span,
.marina-breadcrumb span,
.elev-hero-breadcrumb span,
.comm-hero-breadcrumb span,
.gen-breadcrumb span { color: rgba(255,255,255,0.45); }

/* ══════════════════════════════════════════
   SERVICE WORK — BRAND SHOWCASE
   ══════════════════════════════════════════ */
.svc-brand-showcase {
  background: #06080d;
  padding: 3rem 0 2.5rem;
  text-align: center;
  border-top: 1px solid rgba(198,168,90,0.1);
  border-bottom: 1px solid rgba(198,168,90,0.08);
  position: relative;
  overflow: hidden;
}
.svc-brand-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,22,40,0.45) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.svc-brand-eyebrow {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(198,168,90,0.5);
  margin-bottom: 1.8rem;
  position: relative;
  z-index: 2;
}
.svc-brand-logo {
  /* No stacking context — blend mode must reach the section background */
  display: block;
  text-align: center;
  margin: 0 auto;
  isolation: auto;
}
.svc-brand-logo img {
  width: min(440px, 70vw);
  height: auto;
  display: block;
  margin: 0 auto;
  mix-blend-mode: screen;
  filter: brightness(1.22) contrast(1.12) saturate(1.18);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transform: translateZ(0);
}
.svc-brand-tagline {
  position: relative;
  z-index: 2;
  font-family: var(--font-head);
  font-size: clamp(0.95rem, 2vw, 1.18rem);
  font-style: italic;
  font-weight: 400;
  color: rgba(198,168,90,0.65);
  letter-spacing: 1px;
  margin-top: 1.6rem;
}

/* ══════════════════════════════════════════
   SERVICE WORK — PAGE STATS BAR
   ══════════════════════════════════════════ */
.svc-page-stats {
  background: var(--navy-mid);
  border-bottom: 1px solid rgba(198,168,90,0.1);
  padding: 2.5rem 0;
}
.svc-page-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.svc-page-stat {
  text-align: center;
  padding: 1.2rem 2rem;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.svc-page-stat:last-child { border-right: none; }
.svc-page-stat-num {
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 700;
  font-style: italic;
  color: var(--gold);
  display: block;
  line-height: 1.1;
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}
.svc-page-stat-lbl {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mid-gray);
}

/* ══════════════════════════════════════════
   SERVICE WORK — REAL WORK SHOWCASE GRID
   ══════════════════════════════════════════ */
.svc-work-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-top: 2rem;
}
.svc-work-item {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
  background: var(--navy);
}
.svc-work-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #06090f;
  transition: transform 0.8s cubic-bezier(0.4,0,0.2,1), filter 0.3s ease;
  image-rendering: auto;
  filter: brightness(1.04) contrast(1.1) saturate(1.06);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.svc-work-item:hover img {
  filter: brightness(1.08) contrast(1.14) saturate(1.1);
  transform: scale(1.06);
}
.svc-work-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,10,15,0.92) 0%, transparent 55%);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: var(--transition);
}
.svc-work-item:hover .svc-work-overlay { opacity: 1; }
.svc-work-item:hover img { transform: scale(1.06); }
.svc-work-overlay h4 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.2rem;
}
.svc-work-overlay p {
  font-size: 0.78rem;
  color: var(--gold);
  font-weight: 500;
}

/* ══════════════════════════════════════════
   SERVICE WORK — HOW WE WORK PROCESS GRID
   ══════════════════════════════════════════ */
.svc-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem;
  margin-top: 3.5rem;
  justify-content: center;
}
.svc-process-card {
  background: var(--grad-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: 2.4rem 1.8rem;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.svc-process-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.svc-process-card:hover { border-color: rgba(198,168,90,0.2); transform: translateY(-5px); box-shadow: var(--shadow-gold); }
.svc-process-card:hover::before { transform: scaleX(1); }
.svc-process-num {
  font-family: var(--font-head);
  font-size: 3.5rem;
  font-weight: 700;
  font-style: italic;
  color: rgba(198,168,90,0.70);  /* clearly visible gold */
  line-height: 1;
  margin-bottom: 1rem;
  letter-spacing: -1px;
}
.svc-process-icon {
  width: 48px; height: 48px;
  background: rgba(0,200,255,0.08);
  border: 1px solid rgba(0,200,255,0.2);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  color: var(--electric);
  margin-bottom: 1.2rem;
}
.svc-process-card h3 {
  font-family: var(--font-head);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.75rem;
  letter-spacing: 0.2px;
}
.svc-process-card p {
  font-size: 0.83rem;
  color: var(--mid-gray);
  line-height: 1.7;
  margin: 0;
}

/* ══════════════════════════════════════════
   SERVICE WORK — TRUST BAR
   ══════════════════════════════════════════ */
.svc-trust-bar {
  background: var(--black);
  border-top: 1px solid rgba(198,168,90,0.12);
  border-bottom: 1px solid rgba(198,168,90,0.1);
  padding: 2.5rem 0;
}
.svc-trust-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.svc-trust-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0 2.8rem;
}
.svc-trust-divider {
  width: 1px;
  height: 50px;
  background: rgba(198,168,90,0.2);
  flex-shrink: 0;
}
.svc-trust-icon {
  width: 48px; height: 48px;
  background: rgba(198,168,90,0.08);
  border: 1px solid rgba(198,168,90,0.2);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.svc-trust-icon i { font-size: 1.15rem; color: var(--gold); }
.svc-trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.svc-trust-text strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.1px;
}
.svc-trust-text span {
  font-size: 0.75rem;
  color: var(--mid-gray);
  letter-spacing: 0.2px;
}

/* ══════════════════════════════════════════
   SERVICE WORK — PAGE CTA
   ══════════════════════════════════════════ */
.svc-page-cta {
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, #0d1f3a 60%, var(--navy-mid) 100%);
  padding: 3.5rem 0;
  text-align: center;
  overflow: hidden;
}
.svc-page-cta-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,200,255,0.04) 0%, transparent 65%);
}
.svc-page-cta-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
}
.svc-page-cta h2 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 3rem);
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 1.2rem;
  letter-spacing: 0.02em;
}
.svc-page-cta p {
  font-size: 1rem;
  color: var(--mid-gray);
  margin-bottom: 2.8rem;
  line-height: 1.75;
}
.svc-page-cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════
   SERVICE WORK — RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .svc-page-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-page-stat:nth-child(2) { border-right: none; }
  .svc-page-stat:nth-child(3),
  .svc-page-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.06); }
  .svc-process-grid { grid-template-columns: repeat(2, 1fr); }
  /* svc-process-grid: 4 cards at 2-col = even rows, no orphan needed */
  /* svc-sequence-grid at tablet (3-col): 5-item generator orphan on row 2 — centre it */
  /* The nth-child reset for marina (7-item) is already handled */
  /* Generator 5-item sequence at 3-col: item 4+5 on row 2, 2 items = no orphan */
  .svc-work-showcase { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .svc-hero { text-align: center; padding: 60px 0; }
  .svc-hero-content { padding: 0; }
  .svc-hero-eyebrow { justify-content: center; }
  .svc-hero-btns { justify-content: center; }
  .svc-hero-divider { margin: 0 auto 1.2rem; }
  /* Hero logo: scale down on mobile */
  .psec-hero-logo { width: clamp(220px, 68vw, 300px); margin-bottom: 1.8rem; }
  .svc-brand-showcase { padding: 2.5rem 0 2rem; }
  .svc-brand-logo img { width: min(320px, 80vw); }
  .svc-page-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-process-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .svc-work-showcase { grid-template-columns: repeat(2, 1fr); }
  .svc-work-item { aspect-ratio: 3/4; }
  .svc-trust-grid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .svc-trust-divider { display: none; }
  .svc-trust-item {
    padding: 1.2rem 1.5rem;
    flex: 1 1 140px;
    border-bottom: 1px solid rgba(198,168,90,0.08);
  }
  .svc-trust-text strong,
  .svc-trust-text span { white-space: normal; }
  .svc-page-cta { padding: 3rem 0; }
}

@media (max-width: 480px) {
  .svc-hero h1 { font-size: 2rem; }
  .svc-hero-sub { font-size: 0.82rem; letter-spacing: 1px; }
  .svc-page-stat-num { font-size: 1.9rem; }
  .svc-brand-logo img { width: min(270px, 88vw); }
  .svc-process-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   MARINA HERO (full-bleed, left-aligned)
   ══════════════════════════════════════════ */
/* Marina hero — handled by unified rule above (.marina-hero) */
/* Individual rules below are deprecated; kept as no-ops for safety */
.marina-hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ══════════════════════════════════════════
   MARINA PAGE — SECTION HEADING PROMINENCE
   Stronger contrast, sharper rendering for the
   marina-services.html interior sections
   ══════════════════════════════════════════ */
.marina-services-page .section-header h2,
#services-overview .section-header h2,
.marine-authority .section-header h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 28px rgba(0,0,0,0.55), 0 0 2px rgba(255,255,255,0.06);
  color: #fff;
}

/* Svc-section interior h2 headings — lift contrast */
.svc-section .svc-section-head h2 em,
.svc-section .section-header h2 em {
  color: var(--gold);
  font-style: italic;
}

/* Category labels — tighter micro-spacing */
.svc-category-label {
  margin-bottom: 0.85rem;
  margin-top: 0;
}

/* Two-col layout — tighten gap slightly */
.svc-two-col { gap: 2.6rem; }

/* ══════════════════════════════════════════
   MARINA BRAND SHOWCASE
   ══════════════════════════════════════════ */
.marina-brand-showcase {
  background: #06080d;
  padding: 3rem 0 2.5rem;
  text-align: center;
  border-top: 1px solid rgba(198,168,90,0.1);
  border-bottom: 1px solid rgba(198,168,90,0.08);
  position: relative;
  overflow: hidden;
}
.marina-brand-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,22,40,0.45) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.marina-brand-eyebrow {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(198,168,90,0.5);
  margin-bottom: 1.8rem;
  position: relative;
  z-index: 2;
}
.marina-brand-logo {
  display: block;
  text-align: center;
  margin: 0 auto;
  isolation: auto;
}
.marina-brand-logo img {
  width: min(440px, 70vw);
  height: auto;
  display: block;
  margin: 0 auto;
  mix-blend-mode: screen;
  filter: brightness(1.22) contrast(1.12) saturate(1.18);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transform: translateZ(0);
}
.marina-brand-tagline {
  position: relative;
  z-index: 2;
  font-family: var(--font-head);
  font-size: clamp(0.95rem, 2vw, 1.18rem);
  font-style: italic;
  font-weight: 400;
  color: rgba(198,168,90,0.65);
  letter-spacing: 1px;
  margin-top: 1.6rem;
}

/* ══════════════════════════════════════════
   MARINE AUTHORITY SECTION
   ══════════════════════════════════════════ */
.marine-authority-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 1.6rem;
}
.marine-auth-card {
  background: var(--grad-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.marine-auth-card:hover {
  border-color: rgba(0,180,255,0.28);
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,160,255,0.12);
}
.marine-auth-icon {
  width: 48px;
  height: 48px;
  background: rgba(0,160,255,0.09);
  border: 1px solid rgba(0,160,255,0.22);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--electric);
  font-size: 1.1rem;
  margin-bottom: 1rem;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.marine-auth-card:hover .marine-auth-icon {
  background: rgba(0,180,255,0.15);
  border-color: rgba(0,180,255,0.38);
}
.marine-auth-card h3 {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.55rem;
  line-height: 1.18;
}
.marine-auth-card p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.72;
}

/* Full-width marina showcase image */
.marina-full-img-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 50px rgba(0,0,0,0.68), 0 0 0 1px rgba(198,168,90,0.14);
  border: 1px solid rgba(198,168,90,0.14);
  background: #000;
}
.marina-full-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 52vh;
  object-fit: cover;
  object-position: center;
  filter: brightness(1.08) contrast(1.22) saturate(1.28);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: filter 0.4s ease;
}
.marina-full-img-wrap:hover .marina-full-img {
  filter: brightness(1.12) contrast(1.26) saturate(1.32);
}
.marina-full-img-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.84) 0%, rgba(0,0,0,0.36) 60%, transparent 100%);
  padding: 1.8rem 1.6rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(255,255,255,0.88);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.marina-full-img-caption .photo-card__cat {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(198,168,90,0.1);
  border: 1px solid rgba(198,168,90,0.2);
  border-radius: 30px;
  padding: 0.25rem 0.75rem;
}

@media (max-width: 900px) {
  .marine-authority-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .marine-authority-grid { grid-template-columns: 1fr; gap: 1rem; }
  .marina-full-img { max-height: 48vw; }
}

/* ══════════════════════════════════════════
   MARINA STATS
   ══════════════════════════════════════════ */
.marina-stats {
  background: var(--navy-mid);
  border-top: 1px solid rgba(198,168,90,0.08);
  border-bottom: 1px solid rgba(198,168,90,0.12);
  padding: 1.4rem 0;
}
.marina-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.marina-stat {
  text-align: center;
  padding: 0.85rem 1.5rem;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.marina-stat:last-child { border-right: none; }
.marina-stat-num {
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 700;
  font-style: italic;
  color: var(--gold);
  display: block;
  line-height: 1.1;
  margin-bottom: 0.3rem;
  letter-spacing: 0.02em;
  text-shadow: 0 0 20px rgba(198,168,90,0.25);
}
.marina-stat-lbl {
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* ══════════════════════════════════════════
   MARINA PROJECT SHOWCASE
   ══════════════════════════════════════════ */
.marina-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-bottom: 3rem;
}
.marina-showcase-item {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
  background: #06090f;
}
.marina-showcase-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #06090f;
  transition: transform 0.8s cubic-bezier(0.4,0,0.2,1);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: high-quality;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.marina-showcase-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,10,15,0.92) 0%, transparent 55%);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: var(--transition);
}
.marina-showcase-item:hover .marina-showcase-overlay { opacity: 1; }
.marina-showcase-item:hover img { transform: scale(1.06); }
.marina-showcase-overlay h4 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.25rem;
}
.marina-showcase-overlay p {
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 500;
}
.marina-showcase-cta { text-align: center; }

/* ══════════════════════════════════════════
   ESD / GROUND-FAULT SECTION COMPONENTS
   ══════════════════════════════════════════ */

/* Warning Banner */
.esd-warning-banner {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  background: rgba(255, 60, 60, 0.07);
  border: 1px solid rgba(255, 80, 80, 0.28);
  border-left: 4px solid #ff4040;
  border-radius: 10px;
  padding: 1.6rem 2rem;
  margin: 2.5rem 0;
}
.esd-banner-icon {
  flex-shrink: 0;
  font-size: 2.2rem;
  color: #ff4040;
  margin-top: 0.1rem;
}
.esd-banner-body h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ff7070;
  margin: 0 0 0.55rem;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.01em;
}
.esd-banner-body p {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.75;
  margin: 0;
}
.esd-banner-body strong {
  color: #ff8080;
}

/* Risk Cards Grid */
.esd-risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}
.esd-risk-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 80, 80, 0.15);
  border-top: 3px solid rgba(255, 80, 80, 0.4);
  border-radius: 10px;
  padding: 1.6rem 1.4rem;
}
.esd-risk-card--florida {
  border-top-color: #ff4040;
  background: rgba(255, 60, 60, 0.05);
}
.esd-risk-icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 80, 80, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #ff6060;
  margin-bottom: 1rem;
}
.esd-risk-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #ff8080;
  margin: 0 0 0.6rem;
  font-family: 'Inter', sans-serif;
}
.esd-risk-card p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  margin: 0;
}
.esd-risk-card strong { color: rgba(255,255,255,0.92); }

/* PSEC Commitment Block */
.esd-commitment-block {
  background: linear-gradient(135deg, rgba(255,60,60,0.06) 0%, rgba(10,12,18,0.9) 100%);
  border: 1px solid rgba(255, 80, 80, 0.2);
  border-radius: 14px;
  padding: 2.2rem 2.5rem;
  margin: 2rem 0;
  position: relative;
  overflow: hidden;
}
.esd-commitment-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff4040, #ff8080, #ff4040);
}
.esd-commitment-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,80,80,0.12);
  border: 1px solid rgba(255,80,80,0.3);
  color: #ff8080;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}
.esd-commitment-block h3 {
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1rem;
  font-family: 'Playfair Display', serif;
}
.esd-commitment-block p {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.8;
  margin: 0;
}
.esd-commitment-block em { color: rgba(255,255,255,0.95); font-style: italic; }
.esd-commitment-block strong { color: #fff; }
.esd-commitment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.esd-commitment-tags span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,80,80,0.1);
  border: 1px solid rgba(255,80,80,0.25);
  color: rgba(255,255,255,0.85);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
}
.esd-commitment-tags span i { color: #ff7070; font-size: 0.75rem; }

/* Responsive */
@media (max-width: 860px) {
  .esd-risk-grid { grid-template-columns: 1fr; gap: 1rem; }
  .esd-warning-banner { flex-direction: column; gap: 0.8rem; }
  .esd-commitment-block { padding: 1.6rem 1.4rem; }
}

/* ══════════════════════════════════════════
   MARINA TRUST BAR
   ══════════════════════════════════════════ */
.marina-trust {
  background: #05070b;
  border-top: 1px solid rgba(198,168,90,0.18);
  border-bottom: 1px solid rgba(198,168,90,0.1);
  padding: 2rem 0;
}
.marina-trust-grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.marina-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  padding: 0.9rem 2.4rem;
  flex: 1 1 180px;
  min-width: 160px;
}
.marina-trust-divider {
  width: 1px;
  background: rgba(198,168,90,0.2);
  flex-shrink: 0;
  align-self: stretch;
  min-height: 60px;
}
.marina-trust-icon {
  width: 52px;
  height: 52px;
  background: rgba(198,168,90,0.08);
  border: 1px solid rgba(198,168,90,0.22);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.marina-trust-icon i {
  font-size: 1.25rem;
  color: var(--gold);
}
.marina-trust-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.marina-trust-text strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1px;
  white-space: nowrap;
}
.marina-trust-text span {
  font-size: 0.76rem;
  color: var(--mid-gray);
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════
   MARINA CTA (full-bleed dark)
   ══════════════════════════════════════════ */
.marina-cta {
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, #0d1f3a 60%, var(--navy-mid) 100%);
  border-top: 1px solid rgba(198,168,90,0.12);
  border-bottom: 1px solid rgba(198,168,90,0.08);
  padding: 2.4rem 0;
  text-align: center;
  overflow: hidden;
}
.marina-cta-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,200,255,0.04) 0%, transparent 65%);
  pointer-events: none;
}
.marina-cta-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
}
.marina-cta h2 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-style: normal;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 0.9rem;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.marina-cta p {
  font-size: 1rem;
  color: rgba(255,255,255,0.62);
  margin-bottom: 2rem;
  line-height: 1.7;
}
.marina-cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════
   MARINA — RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .marina-trust-item { padding: 0.8rem 1.5rem; }
  .marina-trust-text strong,
  .marina-trust-text span { white-space: normal; }
  .marina-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .marina-stat:nth-child(2) { border-right: none; }
  .marina-stat:nth-child(3),
  .marina-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.06); }
  .marina-showcase-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .marina-hero { text-align: center; padding: 60px 0; }
  .marina-hero-content { padding: 0; }
  .marina-hero-eyebrow { justify-content: center; }
  .marina-hero-btns { justify-content: center; }
  .marina-hero-divider { margin: 0 auto 1.6rem; }
  .marina-brand-showcase { padding: 2.5rem 0; }
  .marina-brand-logo img { width: min(320px, 80vw); }
  .marina-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .marina-trust-grid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    align-items: stretch;
    padding: 0;
  }
  .marina-trust-divider { display: none; }
  .marina-trust-item {
    padding: 1.2rem 1.5rem;
    flex: 1 1 140px;
    border-bottom: 1px solid rgba(198,168,90,0.08);
  }
  .marina-showcase-grid { grid-template-columns: 1fr; }
  .marina-cta { padding: 3rem 0; }
}

@media (max-width: 480px) {
  .marina-hero h1 { font-size: 1.9rem; }
  .marina-hero-sub { font-size: 0.72rem; letter-spacing: 1.5px; }
  .marina-stat-num { font-size: 1.8rem; }
  .marina-brand-logo img { width: min(270px, 88vw); }
}

/* ══ 480px — small phones ══ */
@media (max-width: 480px) {
  .page-header { padding: 3.5rem 0 2rem; }
  /* Grid columns on very small screens */
  .svc-photo-grid-2 { grid-template-columns: 1fr; }
  .svc-photo-grid-3 { grid-template-columns: 1fr; }
  .svc-photo-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .svc-photo-grid-5 { grid-template-columns: repeat(2, 1fr); }
  /* Container aspect ratios at 480px */
  .svc-photo-grid-1 .svc-photo-item { aspect-ratio: 16 / 9; }
  .svc-photo-grid-2 .svc-photo-item { aspect-ratio: 4 / 3; }
  .svc-services-grid { grid-template-columns: 1fr; }
  /* Sequence: 2-col on small phones for compact step view */
  .svc-sequence-grid { grid-template-columns: repeat(2, 1fr); }
  /* Feature row: 2 tiles → 2-col; 3 tiles → 3-col */
  .svc-feature-row { grid-template-columns: repeat(2, 1fr); gap: 0.45rem; justify-content: center; }
  .svc-feature-row:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
  .svc-feat { padding: 0.8rem 0.5rem; text-align: center; }
  .svc-feat i { margin-bottom: 0.3rem; font-size: 1rem; }
  .svc-feat h4 { font-size: 0.73rem; }
  .svc-feat p { font-size: 0.68rem; line-height: 1.4; }
  .svc-intro-cards { grid-template-columns: 1fr 1fr; }
  .svc-section-head { gap: 1rem; }
  .svc-before-after { border-radius: var(--radius-md); }
  #scrollTop { bottom: 1.2rem; left: 1.2rem; }

  /* ── Orphan centering at 480px ── */
  /* grid-2 collapses to 1-col: no orphan issue */
  /* grid-3/4/5 stay at 2-col: odd last child centres */
  .svc-photo-grid-3 .svc-photo-item:last-child:nth-child(odd),
  .svc-photo-grid-4 .svc-photo-item:last-child:nth-child(odd),
  .svc-photo-grid-5 .svc-photo-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.375rem);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  /* ── Service/elevator cards: single column, full width ── */
  .svc-services-grid { grid-template-columns: 1fr; }
  .elev-services-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   SERVICE WORK PAGE — PREMIUM REFINEMENTS (FINAL)
   ══════════════════════════════════════════════════════════ */

/* ── Section headings — stronger contrast, sharper presence ── */
.svc-section-head h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: #fff;
  text-shadow: 0 2px 22px rgba(0,0,0,0.65), 0 0 40px rgba(0,180,255,0.07);
  letter-spacing: -0.015em;
  line-height: 1.12;
}

/* ── Lead text — readable, balanced opacity ── */
.svc-lead {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.70);
  line-height: 1.82;
  max-width: 680px;
}

/* ── Section spacing — tightened ~9% ── */
.svc-section { padding: 1.65rem 0; }
.svc-section-head { margin-bottom: 1.3rem; }
.mt-section { margin-top: 2rem; }

/* ── Stats bar — tighten numbers ── */
.svc-page-stats { padding: 1.6rem 0; }
.svc-page-stat-num {
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: -0.02em;
}
.svc-page-stat-lbl {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 0.62;
  text-transform: uppercase;
}

/* ── Service cards — crisper, premium feel ── */
.svc-service-card {
  border-color: rgba(255,255,255,0.055);
  transition: border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}
.svc-service-card:hover {
  border-color: rgba(0,200,255,0.2);
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.42), 0 0 0 1px rgba(0,200,255,0.09);
}
.svc-service-card h4 {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  letter-spacing: 0.01em;
  font-size: 0.92rem;
}
.svc-service-card p {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.65;
}

/* ── Photo items — sharper, higher contrast, subtle hover zoom ── */
.svc-photo-item img {
  filter: brightness(1.06) contrast(1.13) saturate(1.1);
  transition: transform 0.45s cubic-bezier(0.23,1,0.32,1), filter 0.35s ease;
}
.svc-photo-item:hover img {
  filter: brightness(1.11) contrast(1.18) saturate(1.2);
  transform: scale(1.04);
}
.svc-photo-item span {
  font-size: 0.76rem !important;  /* restored — was shrinking labels */
  letter-spacing: 0.4px !important;
  opacity: 1 !important;          /* was 0.78 — killing label readability */
}

/* ── Hero / badge images — sharper render with smooth hover ── */
.svc-hero-img {
  filter: brightness(1.05) contrast(1.12) saturate(1.08);
  transition: filter 0.32s ease, transform 0.42s cubic-bezier(0.23,1,0.32,1);
}
.svc-photo-badge-wrap:hover .svc-hero-img {
  filter: brightness(1.09) contrast(1.16) saturate(1.14);
  transform: scale(1.025);
}

/* ── Before/after images — enhanced clarity ── */
.svc-ba-card-img img {
  filter: brightness(1.06) contrast(1.12) saturate(1.08);
  transition: filter 0.32s ease;
}
.svc-ba-card:hover .svc-ba-card-img img {
  filter: brightness(1.11) contrast(1.17) saturate(1.15);
}

/* ── Process cards — stronger heading contrast, lift on hover ── */
.svc-process-card h3 {
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
  font-size: clamp(0.92rem, 1.6vw, 1.05rem);
}
.svc-process-card p {
  color: rgba(255,255,255,0.66);
  font-size: 0.83rem;
  line-height: 1.68;
}
.svc-process-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
}

/* ── Trust bar — clean, legible hierarchy ── */
.svc-trust-text strong {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: block;
  margin-bottom: 0.15rem;
}
.svc-trust-text span {
  color: rgba(255,255,255,0.58);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* ── CTA section — impactful headline ── */
.svc-page-cta-content h2 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  text-shadow: 0 2px 28px rgba(0,0,0,0.75);
  letter-spacing: -0.022em;
  line-height: 1.1;
}
.svc-page-cta-content p {
  color: rgba(255,255,255,0.76);
  font-size: 1rem;
  max-width: 520px;
  margin: 0 auto 1.8rem;
  line-height: 1.78;
}

/* ── CTA buttons — clearly stand out with consistent alignment ── */
.svc-page-cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.svc-page-cta-btns .btn {
  min-width: 160px;
  text-align: center;
  padding: 0.9rem 1.8rem;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: var(--radius-md);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.svc-page-cta-btns .btn-gold {
  box-shadow: 0 4px 22px rgba(198,168,90,0.38), 0 0 0 1px rgba(198,168,90,0.22);
}
.svc-page-cta-btns .btn-gold:hover {
  box-shadow: 0 7px 30px rgba(198,168,90,0.55), 0 0 0 1px rgba(198,168,90,0.38);
  transform: translateY(-2px);
}
.svc-page-cta-btns .btn-outline {
  border: 1.5px solid rgba(255,255,255,0.28);
}
.svc-page-cta-btns .btn-outline:hover {
  border-color: rgba(255,255,255,0.52);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* ── Service list items — tighter, consistent ── */
.svc-list li {
  font-size: 0.875rem;
  padding: 0.45rem 0;
  color: rgba(255,255,255,0.8);
}

/* ── Info card / Safety box ── */
.svc-info-card h4 {
  font-size: 0.88rem;
  letter-spacing: 0.04em;
}
.svc-info-card p {
  font-size: 0.85rem;
  line-height: 1.72;
  color: rgba(255,255,255,0.65);
}

/* ── Feature tiles ── */
.svc-feat h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}
.svc-feat p {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.55;
}

/* ── Photo category / project labels — keep full opacity & readable size ── */
.svc-category-label,
.svc-project-label {
  font-size: 0.78rem;      /* matches base definition — don't shrink */
  letter-spacing: 1.5px;   /* matches base letter-spacing */
  text-transform: uppercase;
  opacity: 1;              /* was 0.72 — restores full readability */
}

/* ── Meter process box ── */
.meter-process-box { margin-top: 1.9rem; }
.meter-proc-text strong { font-size: 0.87rem; }
.meter-proc-text span { font-size: 0.8rem; color: rgba(255,255,255,0.6); }

/* ── Responsive: tablet 768-1024px ── */
@media (max-width: 1024px) {
  .svc-section { padding: 1.4rem 0; }
  .mt-section { margin-top: 1.7rem; }
  .svc-section-head { margin-bottom: 1.1rem; }
  .svc-page-cta-btns .btn { min-width: 140px; padding: 0.8rem 1.4rem; }
}

/* ── Responsive: mobile ≤ 768px ── */
@media (max-width: 768px) {
  .svc-section { padding: 1.2rem 0; }
  .mt-section { margin-top: 1.4rem; }
  .svc-section-head h2 { font-size: clamp(1.7rem, 5.5vw, 2.4rem); }
  .svc-lead { font-size: 0.9rem; line-height: 1.72; }
  .svc-page-cta-content h2 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
  .svc-page-cta-btns { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .svc-page-cta-btns .btn { width: 100%; text-align: center; }
  .svc-trust-text strong { font-size: 0.85rem; }
  .svc-trust-text span { font-size: 0.74rem; }
  .svc-service-card h4 { font-size: 0.88rem; }
  .svc-service-card p { font-size: 0.8rem; }
}

/* ── Responsive: small mobile ≤ 480px ── */
@media (max-width: 480px) {
  .svc-section-head { flex-direction: column; gap: 0.7rem; }
  .svc-icon-badge { width: 44px; height: 44px; font-size: 1.1rem; }
  .svc-lead { font-size: 0.87rem; }
  .svc-list li { font-size: 0.83rem; }
  .meter-proc-text strong { font-size: 0.83rem; }
  .meter-proc-text span { font-size: 0.76rem; }
}

/* ══════════════════════════════════════════════════════════
   ELEVATOR PAGE — PREMIUM REFINEMENTS (FINAL)
   ══════════════════════════════════════════════════════════ */

/* ── Hero eyebrow — technical authority ── */
.elev-hero-eyebrow {
  letter-spacing: 3.5px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.9;
}

/* ── Hero H1 — sharper weight, tighter tracking ── */
.elev-hero h1 {
  letter-spacing: -0.02em;
  text-shadow: 0 2px 28px rgba(0,0,0,0.7), 0 0 60px rgba(0,160,255,0.08);
  line-height: 1.08;
}

/* ── Hero buttons — aligned, consistent ── */
.elev-hero-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.elev-hero-btns .btn {
  min-width: 158px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.elev-hero-btns .btn-gold {
  box-shadow: 0 4px 22px rgba(198,168,90,0.4), 0 0 0 1px rgba(198,168,90,0.22);
}
.elev-hero-btns .btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 30px rgba(198,168,90,0.55), 0 0 0 1px rgba(198,168,90,0.38);
}
.elev-hero-btns .btn-outline {
  border: 1.5px solid rgba(255,255,255,0.28);
}
.elev-hero-btns .btn-outline:hover {
  border-color: rgba(255,255,255,0.52);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* ── Stats bar — slightly more compact, crisper labels ── */
.elev-stats { padding: 3rem 0; }
.elev-stat-num {
  font-size: 2.1rem;
  letter-spacing: -0.01em;
}
.elev-stat-lbl {
  font-size: 0.66rem;
  letter-spacing: 2.8px;
  opacity: 0.72;
}

/* ── Services grid — tighter top gap ── */
.elev-services-grid { margin-top: 3rem; gap: 1.4rem; }

/* ── Service cards — stronger heading hierarchy, sharper hover ── */
.elev-service-card {
  padding: 2rem 1.6rem;
  border-color: rgba(255,255,255,0.055);
  transition: border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}
.elev-service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(198,168,90,0.24);
  box-shadow: 0 12px 36px rgba(0,0,0,0.45), 0 0 0 1px rgba(198,168,90,0.1);
}
.elev-service-card h4 {
  font-size: 0.97rem;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
}
.elev-service-card p {
  font-size: 0.82rem;
  line-height: 1.68;
  color: rgba(255,255,255,0.6);
}
.elev-service-icon {
  margin-bottom: 1rem;
  width: 48px; height: 48px;
}

/* ── Section heads — stronger H2 contrast ── */
.elev-section-h2-override {
  font-size: clamp(1.95rem, 3.5vw, 2.9rem);
  color: #fff;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 22px rgba(0,0,0,0.65);
  line-height: 1.12;
}

/* ── Photo items — sharper clarity, smooth hover zoom ── */
.elev-hero .svc-photo-item img,
.svc-section .svc-photo-item img {
  filter: brightness(1.07) contrast(1.13) saturate(1.1);
  transition: transform 0.45s cubic-bezier(0.23,1,0.32,1), filter 0.35s ease;
}
.elev-hero .svc-photo-item:hover img,
.svc-section .svc-photo-item:hover img {
  filter: brightness(1.11) contrast(1.18) saturate(1.2);
  transform: scale(1.04);
}

/* ── Badge/hero images — crisp, smooth zoom ── */
.elev-hero-img {
  filter: brightness(1.06) contrast(1.13) saturate(1.08);
  transition: filter 0.32s ease, transform 0.42s cubic-bezier(0.23,1,0.32,1);
}
.svc-photo-badge-wrap:hover .elev-hero-img {
  filter: brightness(1.1) contrast(1.17) saturate(1.14);
  transform: scale(1.025);
}

/* ── Expertise section — tighter gap, more compact ── */
.elev-expertise-grid { gap: 4rem; }
.elev-expertise-header h2 {
  font-size: clamp(1.85rem, 3.3vw, 2.75rem);
  letter-spacing: -0.015em;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}
.elev-expertise-header p {
  font-size: 0.91rem;
  line-height: 1.84;
  color: rgba(255,255,255,0.62);
}
.elev-expertise-cards { gap: 1.2rem; }
.elev-expertise-card {
  padding: 1.6rem 1.8rem;
  border-color: rgba(255,255,255,0.055);
  transition: border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}
.elev-expertise-card:hover {
  border-color: rgba(198,168,90,0.22);
  transform: translateX(5px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
.elev-expertise-card h4 {
  font-size: 0.93rem;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  letter-spacing: 0.01em;
}
.elev-expertise-card p {
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
}

/* ── Process cards — stronger headings, lift hover ── */
.svc-process-card h3 {
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
  font-size: clamp(0.92rem, 1.6vw, 1.05rem);
}
.svc-process-card p {
  color: rgba(255,255,255,0.66);
  font-size: 0.83rem;
  line-height: 1.68;
}
.svc-process-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
}

/* ── Trust bar — clean, legible ── */
.svc-trust-text strong {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: block;
  margin-bottom: 0.15rem;
}
.svc-trust-text span {
  color: rgba(255,255,255,0.58);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* ── CTA — impactful headline, consistent buttons ── */
.svc-page-cta-content h2 {
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  text-shadow: 0 2px 28px rgba(0,0,0,0.75);
  letter-spacing: -0.022em;
  line-height: 1.1;
}
.svc-page-cta-content p {
  color: rgba(255,255,255,0.76);
  font-size: 1rem;
  max-width: 520px;
  margin: 0 auto 1.8rem;
  line-height: 1.78;
}
.svc-page-cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.svc-page-cta-btns .btn {
  min-width: 160px;
  text-align: center;
  padding: 0.9rem 1.8rem;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: var(--radius-md);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.svc-page-cta-btns .btn-gold {
  box-shadow: 0 4px 22px rgba(198,168,90,0.38), 0 0 0 1px rgba(198,168,90,0.22);
}
.svc-page-cta-btns .btn-gold:hover {
  box-shadow: 0 7px 30px rgba(198,168,90,0.55), 0 0 0 1px rgba(198,168,90,0.38);
  transform: translateY(-2px);
}
.svc-page-cta-btns .btn-outline {
  border: 1.5px solid rgba(255,255,255,0.28);
}
.svc-page-cta-btns .btn-outline:hover {
  border-color: rgba(255,255,255,0.52);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* ── Info card — consistent sizing ── */
.svc-info-card h4 {
  font-size: 0.88rem;
  letter-spacing: 0.04em;
}
.svc-info-card p {
  font-size: 0.84rem;
  line-height: 1.74;
  color: rgba(255,255,255,0.64);
}

/* ── Service list items — elevator page ── */
.svc-list li {
  font-size: 0.875rem;
  padding: 0.45rem 0;
  color: rgba(255,255,255,0.8);
}

/* ── Feature tiles ── */
.svc-feat h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}
.svc-feat p {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.55;
}

/* ── Photo item captions — keep full opacity ── */
.svc-photo-item span {
  font-size: 0.76rem !important;  /* restored — was shrinking labels */
  letter-spacing: 0.4px !important;
  opacity: 1 !important;          /* was 0.76 — killing label readability */
}

/* ── Responsive: elevator tablet 768-1024px ── */
@media (max-width: 1024px) {
  .elev-expertise-grid { gap: 2.8rem; }
  .elev-services-grid { margin-top: 2.5rem; }
  .elev-hero-btns .btn { min-width: 138px; }
  .svc-page-cta-btns .btn { min-width: 140px; padding: 0.8rem 1.4rem; }
}

/* ── Responsive: elevator mobile ≤ 768px ── */
@media (max-width: 768px) {
  .elev-hero h1 { letter-spacing: -0.01em; }
  .elev-expertise-grid { gap: 2rem; }
  .elev-services-grid { gap: 1rem; margin-top: 2rem; }
  .elev-expertise-cards { gap: 1rem; }
  .svc-page-cta-content h2 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
  .svc-page-cta-btns { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .svc-page-cta-btns .btn { width: 100%; text-align: center; }
  .elev-hero-btns { justify-content: center; }
  .elev-hero-btns .btn { min-width: 0; width: 100%; max-width: 280px; }
}

/* ── Responsive: small mobile ≤ 480px ── */
@media (max-width: 480px) {
  .elev-service-card { padding: 1.6rem 1.2rem; }
  .elev-expertise-card { padding: 1.3rem 1.4rem; gap: 0.9rem; }
  .elev-stat-num { font-size: 1.75rem; }
  .elev-service-card h4 { font-size: 0.9rem; }
  .elev-expertise-card h4 { font-size: 0.88rem; }
}

/* ══════════════════════════════════════════════════════════
   ELEVATOR PAGE — HERO (full-bleed, left-aligned text)
   ══════════════════════════════════════════════════════════ */
/* Elevator hero — handled by unified rule above (.elev-hero) */
.elev-hero-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Breadcrumb — inline below content (position handled by unified rule) */
.elev-hero-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.30);
  white-space: nowrap;
}
.elev-hero-breadcrumb a {
  color: rgba(255,255,255,0.35);
  transition: color 0.2s;
}
.elev-hero-breadcrumb a:hover { color: var(--gold); }
.elev-hero-breadcrumb span { color: rgba(255,255,255,0.52); }

/* ══════════════════════════════════════════════════════════
   ELEVATOR — BRAND SHOWCASE
   ══════════════════════════════════════════════════════════ */
.elev-brand-showcase {
  background: #06080d;
  padding: 3rem 0 2.5rem;
  text-align: center;
  border-top: 1px solid rgba(198,168,90,0.1);
  border-bottom: 1px solid rgba(198,168,90,0.08);
  position: relative;
  overflow: hidden;
}
.elev-brand-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,22,40,0.45) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.elev-brand-eyebrow {
  position: relative;
  z-index: 2;
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(198,168,90,0.5);
  margin-bottom: 3rem;
}
.elev-brand-logo {
  display: block;
  text-align: center;
  margin: 0 auto;
  isolation: auto;
}
.elev-brand-logo img {
  width: min(440px, 70vw);
  height: auto;
  display: block;
  margin: 0 auto;
  mix-blend-mode: screen;
  filter: brightness(1.22) contrast(1.12) saturate(1.18);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transform: translateZ(0);
}
.elev-brand-tagline {
  position: relative;
  z-index: 2;
  font-family: var(--font-head);
  font-size: clamp(0.95rem, 2vw, 1.18rem);
  font-style: italic;
  font-weight: 400;
  color: rgba(198,168,90,0.62);
  letter-spacing: 1px;
  margin-top: 2.8rem;
}

/* ══════════════════════════════════════════════════════════
   ELEVATOR — STATS BAR
   ══════════════════════════════════════════════════════════ */
.elev-stats {
  background: var(--navy-mid);
  border-bottom: 1px solid rgba(198,168,90,0.1);
  padding: 3.5rem 0;
}
.elev-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.elev-stat {
  text-align: center;
  padding: 1.2rem 2rem;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.elev-stat:last-child { border-right: none; }
.elev-stat-num {
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 700;
  font-style: italic;
  color: var(--gold);
  display: block;
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.elev-stat-lbl {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mid-gray);
}

/* ══════════════════════════════════════════════════════════
   ELEVATOR — SERVICES GRID (6-card, 3-col)
   ══════════════════════════════════════════════════════════ */
.elev-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 3.5rem;
  justify-content: center;
}
.elev-service-card {
  background: var(--grad-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: 2.2rem 1.8rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
/* Gold accent bar — top edge, appears on hover */
.elev-service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.elev-service-card:hover {
  border-color: rgba(198,168,90,0.22);
  transform: translateY(-6px);
  box-shadow: var(--shadow-gold);
}
.elev-service-card:hover::before { transform: scaleX(1); }

.elev-service-icon {
  width: 52px; height: 52px;
  background: rgba(0,200,255,0.08);
  border: 1px solid rgba(0,200,255,0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--electric);
  margin-bottom: 1.2rem;
  transition: var(--transition);
}
.elev-service-card:hover .elev-service-icon {
  background: rgba(0,200,255,0.14);
  border-color: rgba(0,200,255,0.35);
  box-shadow: var(--shadow-elec);
}
.elev-service-card h4 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.6rem;
  letter-spacing: 0.1px;
}
.elev-service-card p {
  font-size: 0.83rem;
  color: var(--mid-gray);
  line-height: 1.65;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   ELEVATOR — REAL WORK SHOWCASE (3×2 grid)
   ══════════════════════════════════════════════════════════ */
.elev-work-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 3rem;
}
.elev-work-item {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  background: var(--navy);
}
.elev-work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #06090f;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: high-quality;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.elev-work-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,10,15,0.92) 0%, transparent 55%);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: var(--transition);
}
.elev-work-item:hover .elev-work-overlay { opacity: 1; }
.elev-work-item:hover img { transform: scale(1.06); }
.elev-work-overlay h4 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.2rem;
}
.elev-work-overlay p {
  font-size: 0.78rem;
  color: var(--gold);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   ELEVATOR — TECHNICAL EXPERTISE SECTION
   ══════════════════════════════════════════════════════════ */
.elev-expertise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.elev-expertise-header {
  position: sticky;
  top: calc(96px + 2rem);
}
.elev-expertise-header h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  color: var(--white);
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.08;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.elev-expertise-header p {
  font-size: 0.93rem;
  color: var(--mid-gray);
  line-height: 1.82;
  max-width: 480px;
}
.elev-expertise-cards {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.elev-expertise-card {
  background: var(--grad-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: 1.8rem 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  transition: var(--transition);
}
.elev-expertise-card:hover {
  border-color: rgba(198,168,90,0.2);
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
}
.elev-expertise-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  background: rgba(198,168,90,0.08);
  border: 1px solid rgba(198,168,90,0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--gold);
  transition: var(--transition);
}
.elev-expertise-card:hover .elev-expertise-icon {
  background: rgba(198,168,90,0.14);
  border-color: rgba(198,168,90,0.35);
}
.elev-expertise-card h4 {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.45rem;
  letter-spacing: 0.1px;
}
.elev-expertise-card p {
  font-size: 0.83rem;
  color: var(--mid-gray);
  line-height: 1.68;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   ELEVATOR — STICKY PHONE BUTTON
   ══════════════════════════════════════════════════════════ */
.sticky-phone {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 998;
  width: 56px; height: 56px;
  background: var(--grad-gold);
  color: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 6px 24px rgba(198,168,90,0.45);
  transition: var(--transition);
}
.sticky-phone:hover {
  transform: scale(1.1);
  box-shadow: var(--glow-gold);
  color: var(--navy);
}

/* ══════════════════════════════════════════════════════════
   ELEVATOR PAGE — RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════ */

/* ── 1024px tablets ── */
@media (max-width: 1024px) {
  /* Stats: 2×2 */
  .elev-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .elev-stat:nth-child(2) { border-right: none; }
  .elev-stat:nth-child(3),
  .elev-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.06); }

  /* Services: 2-col */
  .elev-services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Work showcase: 2-col */
  .elev-work-showcase { grid-template-columns: repeat(2, 1fr); }

  /* Expertise: stack */
  .elev-expertise-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .elev-expertise-header { position: static; }
  .elev-expertise-header p { max-width: 100%; }
}

/* ── 768px mobile ── */
@media (max-width: 768px) {
  /* Hero: center text */
  .elev-hero { text-align: center; padding: 60px 0; }
  .elev-hero-content { padding: 0; }
  .elev-hero-eyebrow { justify-content: center; }
  .elev-hero-btns { justify-content: center; }
  .elev-hero-divider { margin: 0 auto 1.6rem; }

  /* Brand showcase compact */
  .elev-brand-showcase { padding: 2.5rem 0; }
  .elev-brand-logo img { width: min(300px, 80vw); }

  /* Stats: 2-col */
  .elev-stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Services: 1-col */
  .elev-services-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* Work showcase: 1-col */
  .elev-work-showcase {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .elev-work-item { aspect-ratio: 4 / 3; }

  /* Trust: wrap to 2-per-row at tablet */
  .svc-trust-grid {
    flex-wrap: wrap;
    justify-content: center;
  }
  .svc-trust-item {
    flex: 1 1 44%;
    padding: 0.9rem 1.5rem;
  }
  .svc-trust-divider { display: none; }

}

/* ── 480px small phones ── */
@media (max-width: 480px) {
  .elev-hero h1 { font-size: 2rem; }
  .elev-hero-sub { font-size: 0.72rem; letter-spacing: 1.5px; }
  .elev-stat-num { font-size: 1.8rem; }
  .elev-brand-logo img { width: min(260px, 88vw); }
  .elev-expertise-card { flex-direction: column; gap: 1rem; }
}

/* ══════════════════════════════════════════════════════════
   ELEVATOR PAGE — LUXURY POLISH
   Scoped to elevator page only. No cross-page side effects.
   ══════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────
   SECTION HEADS — H2 contrast & scale
   ──────────────────────────────────────────────── */
/* svc-section-head blocks (all detail sections) */
#disconnect-systems .svc-section-head h2,
#during-installation .svc-section-head h2,
#house-panel-final .svc-section-head h2,
#main-disconnect .svc-section-head h2,
#pit-pipework .svc-section-head h2 {
  color: #ffffff;
  font-size: clamp(1.85rem, 3.3vw, 2.7rem);
  letter-spacing: -0.02em;
  line-height: 1.09;
  text-shadow: 0 2px 28px rgba(0,0,0,0.72), 0 0 50px rgba(0,140,255,0.06);
  font-weight: 700;
}

/* section-header blocks (services grid + expertise + process) */
#elev-services .section-header h2,
.elev-expertise-header h2,
.svc-section.svc-charcoal .section-header h2 {
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.09;
  text-shadow: 0 2px 28px rgba(0,0,0,0.72), 0 0 50px rgba(0,140,255,0.05);
}

/* ────────────────────────────────────────────────
   SECTION INTRO PARAGRAPHS — slightly lighter, readable
   ──────────────────────────────────────────────── */
#elev-services .section-header > p,
.elev-expertise-header > p,
.svc-section.svc-charcoal .section-header > p {
  color: rgba(255,255,255,0.62);
  font-size: 0.96rem;
  line-height: 1.82;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ────────────────────────────────────────────────
   EYEBROW LABELS — sharper, gold-tinted, more authority
   ──────────────────────────────────────────────── */
.eyebrow-label {
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.9;
  display: block;
  margin-bottom: 0.45rem;
}

/* ────────────────────────────────────────────────
   LEAD TEXT — lighter body, wider breathing room
   ──────────────────────────────────────────────── */
.svc-lead {
  color: rgba(255,255,255,0.65);
  line-height: 1.82;
  font-size: 0.96rem;
  max-width: 660px;
}

/* ────────────────────────────────────────────────
   SUB-HEADS (within two-col content) — bolder, crisper
   ──────────────────────────────────────────────── */
.svc-subhead {
  font-size: 1.02rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.008em;
  line-height: 1.25;
  margin-bottom: 1rem;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

/* ────────────────────────────────────────────────
   LIST ITEMS — brighter, consistent
   ──────────────────────────────────────────────── */
.svc-list li {
  color: rgba(255,255,255,0.82);
  font-size: 0.875rem;
  line-height: 1.6;
  padding: 0.42rem 0;
}
.svc-list li span { color: rgba(255,255,255,0.82); }

/* ────────────────────────────────────────────────
   INFO CARDS — stronger heading, lighter body
   ──────────────────────────────────────────────── */
.svc-info-card {
  border-left: 2px solid rgba(198,168,90,0.35);
}
.svc-info-card h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.03em;
  margin-bottom: 0.45rem;
}
.svc-info-card p {
  font-size: 0.845rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.76;
}

/* ────────────────────────────────────────────────
   SAFETY BOX — stronger heading
   ──────────────────────────────────────────────── */
.svc-safety-box h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
}
.svc-safety-box p {
  font-size: 0.835rem;
  color: rgba(255,255,255,0.64);
  line-height: 1.74;
}

/* ────────────────────────────────────────────────
   BADGE IMAGES — sharpness + hover zoom
   Both .svc-hero-img and .elev-hero-img classes covered
   (layout/position unchanged — only filter & scale)
   ──────────────────────────────────────────────── */
.svc-photo-badge-wrap .svc-hero-img,
.svc-photo-badge-wrap .elev-hero-img {
  filter: brightness(1.07) contrast(1.15) saturate(1.09);
  transition: filter 0.38s ease,
              transform 0.52s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
  transform-origin: center center;
}
.svc-photo-badge-wrap:hover .svc-hero-img,
.svc-photo-badge-wrap:hover .elev-hero-img {
  filter: brightness(1.11) contrast(1.19) saturate(1.14);
  transform: scale(1.032);
}

/* ────────────────────────────────────────────────
   PHOTO GRID ITEMS — sharpness + hover zoom
   (overflow already set on .svc-photo-item)
   ──────────────────────────────────────────────── */
.svc-photo-item img {
  filter: brightness(1.07) contrast(1.13) saturate(1.1);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              filter 0.34s ease;
  will-change: transform;
  transform-origin: center center;
}
.svc-photo-item:hover img {
  filter: brightness(1.11) contrast(1.18) saturate(1.19);
  transform: scale(1.042);
}

/* ────────────────────────────────────────────────
   PHOTO CAPTIONS — legible, subtle
   ──────────────────────────────────────────────── */
.svc-photo-item span {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.72);
  font-weight: 500;
}
.svc-photo-caption {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.68);
  font-weight: 500;
}

/* ────────────────────────────────────────────────
   SERVICE CARDS (6-card grid) — body text lighter for contrast
   ──────────────────────────────────────────────── */
.elev-service-card p {
  color: rgba(255,255,255,0.58);
  line-height: 1.7;
}
.elev-service-card h4 {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.005em;
}

/* ────────────────────────────────────────────────
   EXPERTISE CARDS — cleaner body hierarchy
   ──────────────────────────────────────────────── */
.elev-expertise-card h4 {
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
}
.elev-expertise-card p {
  color: rgba(255,255,255,0.58);
  font-size: 0.83rem;
  line-height: 1.72;
}

/* ────────────────────────────────────────────────
   PROCESS CARDS — heading white, body lighter
   ──────────────────────────────────────────────── */
.svc-process-card h3 {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
.svc-process-card p {
  color: rgba(255,255,255,0.58);
  font-size: 0.84rem;
  line-height: 1.7;
}
.svc-process-num {
  /* Overrides for elevator section context — raised from 0.55 → kept as is (already visible) */
  color: rgba(198,168,90,0.55);
  letter-spacing: -0.02em;
}

/* ────────────────────────────────────────────────
   TRUST BAR — clean two-line hierarchy
   ──────────────────────────────────────────────── */
.svc-trust-bar { padding: 2.8rem 0; }
.svc-trust-text strong {
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: block;
  margin-bottom: 0.18rem;
}
.svc-trust-text span {
  color: rgba(255,255,255,0.52);
  font-size: 0.77rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.svc-trust-icon i {
  color: var(--gold);
  opacity: 0.85;
}

/* ────────────────────────────────────────────────
   CTA SECTION — headline, subtext, buttons
   ──────────────────────────────────────────────── */
.svc-page-cta-content h2 {
  font-size: clamp(2.15rem, 4.2vw, 3.4rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-shadow: 0 3px 32px rgba(0,0,0,0.78);
  color: #ffffff;
}
.svc-page-cta-content p {
  color: rgba(255,255,255,0.72);
  font-size: 1.01rem;
  line-height: 1.78;
  max-width: 520px;
  margin: 0 auto 2rem;
}
.svc-page-cta-content .section-label {
  font-size: 0.69rem;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  opacity: 0.78;
  margin-bottom: 1.1rem;
}

/* CTA buttons — perfectly aligned, clear visual weight */
.svc-page-cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.svc-page-cta-btns .btn {
  min-width: 168px;
  text-align: center;
  padding: 0.92rem 1.9rem;
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-md);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
.svc-page-cta-btns .btn-gold {
  box-shadow: 0 5px 24px rgba(198,168,90,0.42), 0 0 0 1px rgba(198,168,90,0.24);
}
.svc-page-cta-btns .btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 32px rgba(198,168,90,0.58), 0 0 0 1px rgba(198,168,90,0.4);
}
.svc-page-cta-btns .btn-outline {
  border: 1.5px solid rgba(255,255,255,0.3);
  color: #fff;
}
.svc-page-cta-btns .btn-outline:hover {
  border-color: rgba(255,255,255,0.58);
  background: rgba(255,255,255,0.06);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.32);
}

/* ────────────────────────────────────────────────
   SECTION SPACING — tighter, intentional (~8% reduction)
   Scoped to elevator-specific sections only
   ──────────────────────────────────────────────── */
#elev-services,
#disconnect-systems,
#during-installation,
#house-panel-final,
#main-disconnect,
#pit-pipework {
  padding-top: 4.2rem;
  padding-bottom: 4.2rem;
}

/* Section with Technical Expertise & Process (no id — use structural selector) */
#elev-services ~ .svc-section {
  padding-top: 4.2rem;
  padding-bottom: 4.2rem;
}

/* mt-section spacing within elevator sections */
#disconnect-systems .mt-section,
#during-installation .mt-section,
#house-panel-final .mt-section,
#main-disconnect .mt-section,
#pit-pipework .mt-section {
  margin-top: 2.8rem;
}

/* section-head bottom gap */
#disconnect-systems .svc-section-head,
#during-installation .svc-section-head,
#house-panel-final .svc-section-head,
#main-disconnect .svc-section-head,
#pit-pipework .svc-section-head {
  margin-bottom: 1.6rem;
  gap: 1.2rem;
  align-items: flex-start;
}

/* ────────────────────────────────────────────────
   FEATURE TILES (Inspection Ready / Fully Labeled)
   ──────────────────────────────────────────────── */
.svc-feat h4 {
  color: #ffffff;
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.svc-feat p {
  color: rgba(255,255,255,0.56);
  font-size: 0.76rem;
  line-height: 1.58;
}
.svc-feat i {
  color: var(--gold);
  opacity: 0.88;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

/* ────────────────────────────────────────────────
   RESPONSIVE — tablet ≤ 1024px
   ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #elev-services,
  #disconnect-systems,
  #during-installation,
  #house-panel-final,
  #main-disconnect,
  #pit-pipework,
  #elev-services ~ .svc-section {
    padding-top: 3.4rem;
    padding-bottom: 3.4rem;
  }
  #disconnect-systems .mt-section,
  #during-installation .mt-section,
  #house-panel-final .mt-section,
  #main-disconnect .mt-section,
  #pit-pipework .mt-section {
    margin-top: 2.2rem;
  }
  .svc-lead { font-size: 0.91rem; }
  #disconnect-systems .svc-section-head h2,
  #during-installation .svc-section-head h2,
  #house-panel-final .svc-section-head h2,
  #main-disconnect .svc-section-head h2,
  #pit-pipework .svc-section-head h2 {
    font-size: clamp(1.65rem, 4.2vw, 2.35rem);
  }
  .svc-page-cta-btns .btn {
    min-width: 148px;
    padding: 0.82rem 1.5rem;
  }
}

/* ────────────────────────────────────────────────
   RESPONSIVE — mobile ≤ 768px
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  #elev-services,
  #disconnect-systems,
  #during-installation,
  #house-panel-final,
  #main-disconnect,
  #pit-pipework,
  #elev-services ~ .svc-section {
    padding-top: 2.6rem;
    padding-bottom: 2.6rem;
  }
  #disconnect-systems .mt-section,
  #during-installation .mt-section,
  #house-panel-final .mt-section,
  #main-disconnect .mt-section,
  #pit-pipework .mt-section {
    margin-top: 1.8rem;
  }
  .svc-lead {
    font-size: 0.89rem;
    max-width: 100%;
  }
  .svc-subhead { font-size: 0.96rem; }
  .svc-page-cta-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
  }
  .svc-page-cta-btns .btn {
    width: 100%;
    min-width: 0;
    text-align: center;
  }
  /* Disable badge image zoom on touch — prevents layout shift */
  .svc-photo-badge-wrap .svc-hero-img,
  .svc-photo-badge-wrap .elev-hero-img {
    transform: none !important;
    transition: filter 0.3s ease;
  }
  .svc-trust-bar { padding: 2rem 0; }
  .svc-page-cta-content h2 { font-size: clamp(1.85rem, 6.5vw, 2.6rem); }
  .svc-page-cta-content p { font-size: 0.93rem; }
}

/* ────────────────────────────────────────────────
   RESPONSIVE — small mobile ≤ 480px
   ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  #elev-services,
  #disconnect-systems,
  #during-installation,
  #house-panel-final,
  #main-disconnect,
  #pit-pipework,
  #elev-services ~ .svc-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .svc-lead { font-size: 0.86rem; line-height: 1.74; }
  .eyebrow-label { font-size: 0.67rem; letter-spacing: 2.8px; }
  .svc-info-card h4 { font-size: 0.85rem; }
  .svc-safety-box h4 { font-size: 0.85rem; }
  .svc-subhead { font-size: 0.91rem; }
  .svc-trust-bar { padding: 1.6rem 0; }
  .svc-trust-text strong { font-size: 0.86rem; }
  .svc-trust-text span { font-size: 0.74rem; }
  .svc-page-cta-content h2 { font-size: clamp(1.65rem, 7vw, 2.2rem); }
  .svc-page-cta-content p { font-size: 0.88rem; }
  .svc-list li { font-size: 0.845rem; }
}

/* ══════════════════════════════════════════════════════════
   COMMERCIAL PAGE — HERO (full-bleed, left-aligned text)
   ══════════════════════════════════════════════════════════ */
/* Commercial hero — handled by unified rule (.comm-hero) */
.comm-hero-legacy-placeholder { display: none; }

/* Thin gold separator */
.comm-hero-divider {
  width: 44px;
  height: 1px;
  background: var(--gold);
  opacity: 0.45;
  margin-bottom: 1.6rem;
}

/* Sub-headline — muted uppercase tracking */
.comm-hero-sub {
  font-size: clamp(0.78rem, 1.4vw, 0.9rem);
  color: rgba(255,255,255,0.50);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 3rem;
}

/* CTA button row */
.comm-hero-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Breadcrumb — inline (unified rule handles positioning) */
.comm-hero-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.30);
}
.comm-hero-breadcrumb a { color: rgba(255,255,255,0.35); transition: color 0.2s; }
.comm-hero-breadcrumb a:hover { color: var(--gold); }
.comm-hero-breadcrumb span { color: rgba(255,255,255,0.48); }

/* ══════════════════════════════════════════════════════════
   COMMERCIAL — BRAND SHOWCASE
   ══════════════════════════════════════════════════════════ */
.comm-brand-showcase {
  background: #06080d;
  padding: 3rem 0 2.5rem;
  text-align: center;
  border-top: 1px solid rgba(198,168,90,0.1);
  border-bottom: 1px solid rgba(198,168,90,0.08);
  position: relative;
  overflow: hidden;
}
.comm-brand-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,22,40,0.45) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.comm-brand-eyebrow {
  position: relative;
  z-index: 2;
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(198,168,90,0.5);
  margin-bottom: 3rem;
}

.comm-brand-logo {
  display: block;
  text-align: center;
  margin: 0 auto;
  isolation: auto;
}
.comm-brand-logo img {
  width: min(440px, 70vw);
  height: auto;
  display: block;
  margin: 0 auto;
  mix-blend-mode: screen;
  filter: brightness(1.22) contrast(1.12) saturate(1.18);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transform: translateZ(0);
}

.comm-brand-tagline {
  position: relative;
  z-index: 2;
  font-family: var(--font-head);
  font-size: clamp(0.95rem, 2vw, 1.18rem);
  font-style: italic;
  font-weight: 400;
  color: rgba(198,168,90,0.62);
  letter-spacing: 1px;
  margin-top: 2.8rem;
}

/* ══════════════════════════════════════════════════════════
   COMMERCIAL — STATS BAR
   ══════════════════════════════════════════════════════════ */
.comm-stats {
  background: var(--navy-mid);
  border-bottom: 1px solid rgba(198,168,90,0.1);
  padding: 3.5rem 0;
}
.comm-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.comm-stat {
  text-align: center;
  padding: 1.2rem 2rem;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.comm-stat:last-child { border-right: none; }
.comm-stat-num {
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 700;
  font-style: italic;
  color: var(--gold);
  display: block;
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.comm-stat-lbl {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mid-gray);
}

/* ══════════════════════════════════════════════════════════
   COMMERCIAL — SERVICES GRID (3-column)
   ══════════════════════════════════════════════════════════ */
.comm-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 3.5rem;
}

.comm-service-card {
  background: var(--grad-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: 2.2rem 1.8rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
/* Gold top bar — slides in on hover */
.comm-service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.comm-service-card:hover {
  border-color: rgba(198,168,90,0.22);
  transform: translateY(-6px);
  box-shadow: var(--shadow-gold);
}
.comm-service-card:hover::before { transform: scaleX(1); }

.comm-service-icon {
  width: 52px; height: 52px;
  background: rgba(0,200,255,0.08);
  border: 1px solid rgba(0,200,255,0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--electric);
  margin-bottom: 1.2rem;
  transition: var(--transition);
}
.comm-service-card:hover .comm-service-icon {
  background: rgba(0,200,255,0.14);
  border-color: rgba(0,200,255,0.35);
  box-shadow: var(--shadow-elec);
}
.comm-service-card h4 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.6rem;
  letter-spacing: 0.1px;
}
.comm-service-card p {
  font-size: 0.83rem;
  color: var(--mid-gray);
  line-height: 1.65;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   COMMERCIAL — CAPABILITY / SCALE SECTION
   ══════════════════════════════════════════════════════════ */
.comm-capability-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.comm-capability-header {
  position: sticky;
  top: calc(96px + 2rem);
}
.comm-capability-header h2 {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-style: normal;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin-bottom: 1rem;
}
.comm-capability-header p {
  font-size: 0.93rem;
  color: var(--mid-gray);
  line-height: 1.82;
  max-width: 460px;
}

.comm-capability-cards {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.comm-cap-card {
  background: var(--grad-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: 1.8rem 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  transition: var(--transition);
}
.comm-cap-card:hover {
  border-color: rgba(198,168,90,0.2);
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
}

.comm-cap-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  background: rgba(198,168,90,0.08);
  border: 1px solid rgba(198,168,90,0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--gold);
  transition: var(--transition);
}
.comm-cap-card:hover .comm-cap-icon {
  background: rgba(198,168,90,0.14);
  border-color: rgba(198,168,90,0.35);
}

.comm-cap-card h4 {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.45rem;
  letter-spacing: 0.1px;
}
.comm-cap-card p {
  font-size: 0.83rem;
  color: var(--mid-gray);
  line-height: 1.68;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   COMMERCIAL — REAL WORK SHOWCASE (3×2 grid)
   ══════════════════════════════════════════════════════════ */
.comm-work-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 3rem;
}

.comm-work-item {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  background: var(--navy);
}
.comm-work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #06090f;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: high-quality;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.comm-work-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,10,15,0.92) 0%, transparent 55%);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: var(--transition);
}
.comm-work-item:hover .comm-work-overlay { opacity: 1; }
.comm-work-item:hover img { transform: scale(1.06); }

.comm-work-overlay h4 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.2rem;
}
.comm-work-overlay p {
  font-size: 0.78rem;
  color: var(--gold);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   COMMERCIAL PAGE — RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════ */

/* ── 1024px — tablets ── */
@media (max-width: 1024px) {
  /* Stats: 2×2 */
  .comm-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .comm-stat:nth-child(2) { border-right: none; }
  .comm-stat:nth-child(3),
  .comm-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.06); }

  /* Services: 2-col */
  .comm-services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Capability: stack */
  .comm-capability-grid { grid-template-columns: 1fr; gap: 3rem; }
  .comm-capability-header { position: static; }
  .comm-capability-header p { max-width: 100%; }

  /* Work showcase: 2-col */
  .comm-work-showcase { grid-template-columns: repeat(2, 1fr); }
}

/* ── 768px — mobile ── */
@media (max-width: 768px) {
  /* Hero */
  .comm-hero { text-align: center; padding: 60px 0; }
  .comm-hero-content { padding: 0; }
  .comm-hero-eyebrow { justify-content: center; }
  .comm-hero-btns { justify-content: center; }
  .comm-hero-divider { margin: 0 auto 1.6rem; }

  /* Brand showcase */
  .comm-brand-showcase { padding: 2.5rem 0; }
  .comm-brand-logo img { width: min(300px, 80vw); }

  /* Stats */
  .comm-stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Services: 1-col */
  .comm-services-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* Work showcase: 2-col grid — portraits display well side by side */
  .comm-work-showcase { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .comm-work-item { aspect-ratio: 3 / 4; }

  /* Capability cards: remove sticky */
  .comm-capability-header { position: static; }
}

/* ── 480px — small phones ── */
@media (max-width: 480px) {
  .comm-hero h1 { font-size: 2.1rem; }
  .comm-hero-sub { font-size: 0.72rem; letter-spacing: 1.5px; }
  .comm-stat-num { font-size: 1.8rem; }
  .comm-brand-logo img { width: min(260px, 88vw); }
  .comm-cap-card { flex-direction: column; gap: 1rem; }
}

/* ══════════════════════════════════════════════════════════
   COMMERCIAL PAGE — LUXURY POLISH (v3 — Definitive Final)
   All rules scoped to commercial garage selectors only.
   Zero cross-page bleed. Images locked — zoom via scale only.
   ══════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────
   1. HERO — eyebrow · H1 · sub-headline · buttons
   ──────────────────────────────────────────────────────── */
.comm-hero-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 3.8px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.88;
  margin-bottom: 1.1rem;
}
.comm-hero h1 {
  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.07;
  text-shadow:
    0 2px 0 rgba(255,255,255,0.04),
    0 4px 32px rgba(0,0,0,0.78),
    0 0 70px rgba(0,150,255,0.06);
}
.comm-hero-btns {
  gap: 0.9rem;
}
.comm-hero-btns .btn {
  min-width: 165px;
  text-align: center;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  padding: 0.9rem 1.9rem;
  border-radius: 6px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.comm-hero-btns .btn-gold {
  box-shadow: 0 4px 22px rgba(198,168,90,0.46), 0 0 0 1px rgba(198,168,90,0.22);
}
.comm-hero-btns .btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(198,168,90,0.62), 0 0 0 1px rgba(198,168,90,0.38);
}
.comm-hero-btns .btn-outline {
  border: 1.5px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.88);
}
.comm-hero-btns .btn-outline:hover {
  border-color: rgba(255,255,255,0.58);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.38);
}

/* ────────────────────────────────────────────────────────
   2. STATS BAR — numbers bold & crisp, labels airy
   ──────────────────────────────────────────────────────── */
.comm-stats {
  padding: 2.6rem 0;            /* ~5% tighter than 2.8 */
}
.comm-stat {
  padding: 1rem 1.8rem;
}
.comm-stat-num {
  font-size: 2.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-shadow: 0 0 22px rgba(198,168,90,0.2);
}
.comm-stat-lbl {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 3px;
  opacity: 0.65;
  text-transform: uppercase;
}

/* ────────────────────────────────────────────────────────
   3. SERVICES SECTION — section head, grid, cards
   ──────────────────────────────────────────────────────── */
#comm-services {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
#comm-services .section-header .section-label {
  font-size: 0.67rem;
  letter-spacing: 3.5px;
  opacity: 0.78;
  margin-bottom: 0.9rem;
}
#comm-services .section-header h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.024em;
  line-height: 1.09;
  text-shadow: 0 2px 28px rgba(0,0,0,0.72), 0 0 52px rgba(0,140,255,0.05);
  margin-bottom: 0.9rem;
}
#comm-services .section-header > p {
  font-size: 0.94rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.88;
  max-width: 600px;
  margin: 0 auto;
}
.comm-services-grid {
  margin-top: 2.8rem;
  gap: 1.3rem;
}
.comm-service-card {
  padding: 1.9rem 1.65rem;
  transition: border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}
.comm-service-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
  margin-bottom: 0.55rem;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
.comm-service-card p {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.74;
  margin: 0;
}
.comm-service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(198,168,90,0.28);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(198,168,90,0.14);
}

/* ────────────────────────────────────────────────────────
   4. PROJECT SECTION HEADS — CarFix & Peterbilt
   ──────────────────────────────────────────────────────── */
#carfix {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
#peterbilt-compressor {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
#carfix .svc-section-head,
#peterbilt-compressor .svc-section-head {
  margin-bottom: 1.5rem;
  gap: 1.2rem;
  align-items: flex-start;
}
#carfix .svc-section-head h2,
#peterbilt-compressor .svc-section-head h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.65rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.024em;
  line-height: 1.09;
  text-shadow: 0 2px 28px rgba(0,0,0,0.75), 0 0 52px rgba(0,140,255,0.06);
  margin-bottom: 0.6rem;
}
#carfix .eyebrow-label,
#peterbilt-compressor .eyebrow-label {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 3.6px;
  color: var(--gold);
  opacity: 0.88;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}
#carfix .svc-lead,
#peterbilt-compressor .svc-lead {
  font-size: 0.94rem;
  color: rgba(255,255,255,0.58);
  line-height: 1.86;
  max-width: 680px;
}

/* ────────────────────────────────────────────────────────
   5. SPOTLIGHT IMAGES — sharpness · contrast · hover zoom
      Position LOCKED. Zoom is scale-only, overflow:hidden.
   ──────────────────────────────────────────────────────── */
.svc-spotlight-img-wrap {
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* subtle gold border on hover */
  transition: box-shadow 0.35s ease;
}
.svc-spotlight-img-wrap:hover {
  box-shadow: 0 0 0 1px rgba(198,168,90,0.18), 0 12px 40px rgba(0,0,0,0.45);
}
.svc-spotlight-img-wrap img {
  display: block;
  width: 100%;
  filter: brightness(1.08) contrast(1.15) saturate(1.1);
  transition:
    filter 0.38s ease,
    transform 0.58s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
  transform-origin: center center;
  backface-visibility: hidden;
}
.svc-spotlight-img-wrap:hover img {
  filter: brightness(1.12) contrast(1.2) saturate(1.15);
  transform: scale(1.032);
}

/* ────────────────────────────────────────────────────────
   6. BEFORE/AFTER IMAGES — sharpness · contrast · hover zoom
   ──────────────────────────────────────────────────────── */
.carfix-ba-img {
  overflow: hidden;
  border-radius: var(--radius-md);
}
.carfix-ba-img img {
  filter: brightness(1.07) contrast(1.15) saturate(1.09);
  transition:
    filter 0.38s ease,
    transform 0.52s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
  transform-origin: center center;
  backface-visibility: hidden;
}
.carfix-ba-card:hover .carfix-ba-img img {
  filter: brightness(1.12) contrast(1.2) saturate(1.14);
  transform: scale(1.035);
}

/* ────────────────────────────────────────────────────────
   7. PHOTO GRIDS — sharpness · contrast · hover zoom
   ──────────────────────────────────────────────────────── */
#carfix .svc-photo-item,
#peterbilt-compressor .svc-photo-item {
  overflow: hidden;
  border-radius: var(--radius-sm);
}
#carfix .svc-photo-item img,
#peterbilt-compressor .svc-photo-item img {
  filter: brightness(1.07) contrast(1.14) saturate(1.08);
  transition:
    filter 0.35s ease,
    transform 0.52s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: center center;
}
#carfix .svc-photo-item:hover img,
#peterbilt-compressor .svc-photo-item:hover img {
  filter: brightness(1.12) contrast(1.19) saturate(1.14);
  transform: scale(1.045);
}

/* ────────────────────────────────────────────────────────
   8. PETERBILT — sub-heads · list · feat tiles · info/safety cards
   ──────────────────────────────────────────────────────── */
#peterbilt-compressor .svc-subhead {
  font-size: 1.02rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
  margin-bottom: 0.95rem;
}
#peterbilt-compressor .svc-list li {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.78);
  padding: 0.44rem 0;
  line-height: 1.6;
}
#peterbilt-compressor .svc-list li i {
  color: var(--gold);
  opacity: 0.8;
}
#peterbilt-compressor .svc-safety-box h4 {
  font-size: 0.97rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
#peterbilt-compressor .svc-safety-box p {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.56);
  line-height: 1.74;
  margin: 0;
}
#peterbilt-compressor .svc-info-card h4 {
  font-size: 0.97rem;
  font-weight: 700;
  color: #ffffff;
}
#peterbilt-compressor .svc-info-card p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.56);
  line-height: 1.76;
}
#peterbilt-compressor .svc-feat h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}
#peterbilt-compressor .svc-feat p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.72;
}

/* ────────────────────────────────────────────────────────
   9. CAPABILITY SECTION — header · body · cards
   ──────────────────────────────────────────────────────── */
#comm-services ~ .svc-section.svc-dark {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.comm-capability-header .section-label {
  font-size: 0.67rem;
  letter-spacing: 3.5px;
  opacity: 0.78;
  margin-bottom: 0.85rem;
}
.comm-capability-header h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.024em;
  line-height: 1.09;
  text-shadow: 0 2px 30px rgba(0,0,0,0.74), 0 0 52px rgba(0,140,255,0.05);
  margin-bottom: 1.1rem;
}
.comm-capability-header p {
  font-size: 0.93rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.86;
  max-width: 460px;
}
.comm-capability-cards {
  gap: 1.2rem;
}
.comm-cap-card {
  padding: 1.65rem 1.8rem;
  gap: 1.2rem;
}
.comm-cap-card h4 {
  font-size: 0.97rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.42);
  margin-bottom: 0.35rem;
}
.comm-cap-card p {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.72;
  margin: 0;
}
.comm-cap-card:hover {
  border-color: rgba(198,168,90,0.26);
  transform: translateX(5px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.46);
}

/* ────────────────────────────────────────────────────────
   10. PROCESS SECTION — section head · cards
   ──────────────────────────────────────────────────────── */
.svc-section.svc-dark .section-header .section-label {
  font-size: 0.67rem;
  letter-spacing: 3.5px;
  opacity: 0.78;
  margin-bottom: 0.85rem;
}
.svc-section.svc-dark .section-header h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.024em;
  line-height: 1.09;
  text-shadow: 0 2px 28px rgba(0,0,0,0.72);
  margin-bottom: 0.9rem;
}
.svc-section.svc-dark .section-header > p {
  font-size: 0.94rem;
  color: rgba(255,255,255,0.54);
  line-height: 1.84;
}
/* Process cards — tighter padding, stronger heading contrast */
.svc-section.svc-dark .svc-process-card {
  padding: 2.1rem 1.65rem;
}
.svc-section.svc-dark .svc-process-card h3 {
  font-size: 0.98rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
  margin-bottom: 0.65rem;
}
.svc-section.svc-dark .svc-process-card p {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.76;
}
.svc-section.svc-dark .svc-process-num {
  font-size: 3.2rem;
  /* Raised from 0.12 → 0.24 — dark section bg makes it safe to push further */
  color: rgba(198,168,90,0.24);
  margin-bottom: 0.85rem;
}

/* ────────────────────────────────────────────────────────
   11. TRUST BAR — contrast · spacing · text sizes
   ──────────────────────────────────────────────────────── */
.svc-trust-bar {
  padding: 2.6rem 0;
}
.svc-trust-item {
  gap: 0.9rem;
}
.svc-trust-text strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}
.svc-trust-text span {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.5;
}

/* ────────────────────────────────────────────────────────
   12. CTA SECTION — headline · subtext · both buttons
   ──────────────────────────────────────────────────────── */
.svc-page-cta {
  padding: 3.2rem 0;
}
.svc-page-cta .svc-page-cta-content .section-label {
  font-size: 0.67rem;
  letter-spacing: 3.5px;
  opacity: 0.72;
  margin-bottom: 1rem;
}
.svc-page-cta .svc-page-cta-content h2 {
  font-size: clamp(1.95rem, 4vw, 3.1rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.024em;
  line-height: 1.1;
  text-shadow:
    0 2px 32px rgba(0,0,0,0.72),
    0 0 64px rgba(0,120,255,0.07);
  margin-bottom: 1rem;
}
.svc-page-cta .svc-page-cta-content > p {
  font-size: 1rem;
  color: rgba(255,255,255,0.64);
  line-height: 1.76;
  margin-bottom: 2rem;
}
.svc-page-cta-btns {
  gap: 0.9rem;
}
.svc-page-cta-btns .btn {
  min-width: 168px;
  padding: 0.92rem 1.95rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 6px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.svc-page-cta-btns .btn-gold {
  box-shadow: 0 4px 22px rgba(198,168,90,0.46), 0 0 0 1px rgba(198,168,90,0.22);
}
.svc-page-cta-btns .btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(198,168,90,0.64), 0 0 0 1px rgba(198,168,90,0.4);
}
.svc-page-cta-btns .btn-outline {
  border: 1.5px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.9);
}
.svc-page-cta-btns .btn-outline:hover {
  border-color: rgba(255,255,255,0.58);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.38);
}

/* ────────────────────────────────────────────────────────
   13. MT-SECTION inner spacing
   ──────────────────────────────────────────────────────── */
#carfix .mt-section,
#peterbilt-compressor .mt-section {
  margin-top: 2.6rem;
}

/* ────────────────────────────────────────────────────────
   14. RESPONSIVE — tablet ≤ 1024px
   ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #comm-services,
  #carfix,
  #peterbilt-compressor,
  #comm-services ~ .svc-section.svc-dark {
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
  }
  #carfix .mt-section,
  #peterbilt-compressor .mt-section {
    margin-top: 2rem;
  }
  #carfix .svc-section-head h2,
  #peterbilt-compressor .svc-section-head h2 {
    font-size: clamp(1.6rem, 4.2vw, 2.3rem);
  }
  .comm-capability-header h2,
  .svc-section.svc-dark .section-header h2 {
    font-size: clamp(1.6rem, 4.2vw, 2.3rem);
  }
  .comm-hero-btns .btn {
    min-width: 140px;
    padding: 0.82rem 1.55rem;
  }
  .comm-services-grid { gap: 1.1rem; }
  .svc-page-cta-btns .btn {
    min-width: 148px;
    padding: 0.82rem 1.5rem;
  }
  .comm-stats { padding: 2.2rem 0; }
  .svc-trust-bar { padding: 2.2rem 0; }
  .svc-page-cta { padding: 2.8rem 0; }
}

/* ────────────────────────────────────────────────────────
   15. RESPONSIVE — mobile ≤ 768px
   ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #comm-services,
  #carfix,
  #peterbilt-compressor,
  #comm-services ~ .svc-section.svc-dark {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }
  #carfix .mt-section,
  #peterbilt-compressor .mt-section {
    margin-top: 1.6rem;
  }
  .comm-capability-header h2,
  .svc-section.svc-dark .section-header h2 {
    font-size: clamp(1.65rem, 5.5vw, 2.1rem);
  }
  /* Kill zoom on touch devices — prevents content shift */
  .svc-spotlight-img-wrap img,
  .carfix-ba-img img,
  #carfix .svc-photo-item img,
  #peterbilt-compressor .svc-photo-item img {
    transform: none !important;
    filter: brightness(1.07) contrast(1.14) saturate(1.09);
    transition: filter 0.3s ease;
  }
  /* Hero buttons — stacked full width */
  .comm-hero-btns {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .comm-hero-btns .btn {
    width: 100%;
    max-width: 300px;
  }
  /* CTA buttons — stacked full width */
  .svc-page-cta-btns {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .svc-page-cta-btns .btn {
    width: 100%;
    max-width: 300px;
  }
  .svc-page-cta .svc-page-cta-content h2 {
    font-size: clamp(1.7rem, 6vw, 2.3rem);
  }
  .comm-stats { padding: 2rem 0; }
  .svc-trust-bar { padding: 2rem 0; }
  .svc-page-cta { padding: 2.4rem 0; }
  /* Spotlight border glow off on mobile */
  .svc-spotlight-img-wrap:hover { box-shadow: none; }
}

/* ────────────────────────────────────────────────────────
   16. RESPONSIVE — small phones ≤ 480px
   ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #comm-services,
  #carfix,
  #peterbilt-compressor,
  #comm-services ~ .svc-section.svc-dark {
    padding-top: 1.9rem;
    padding-bottom: 1.9rem;
  }
  .comm-hero h1          { font-size: 2rem; }
  .comm-hero-sub         { font-size: 0.7rem; letter-spacing: 1.8px; }
  .comm-stat-num         { font-size: 1.8rem; }
  .comm-stat-lbl         { font-size: 0.6rem; letter-spacing: 2px; }
  .comm-service-card     { padding: 1.6rem 1.25rem; }
  .comm-service-card h4  { font-size: 0.96rem; }
  .comm-service-card p   { font-size: 0.82rem; }
  #carfix .svc-section-head h2,
  #peterbilt-compressor .svc-section-head h2 {
    font-size: clamp(1.5rem, 6.5vw, 1.95rem);
  }
  .comm-capability-header h2,
  .svc-section.svc-dark .section-header h2 {
    font-size: clamp(1.45rem, 7vw, 1.85rem);
  }
  .comm-cap-card         { flex-direction: column; gap: 0.9rem; padding: 1.4rem 1.2rem; }
  .svc-page-cta .svc-page-cta-content h2 { font-size: clamp(1.55rem, 7vw, 2rem); }
  .svc-page-cta { padding: 2rem 0; }
  .svc-trust-bar { padding: 1.8rem 0; }
  .comm-stats { padding: 1.8rem 0; }
}

/* ═══════════════════════════════════════════════════════════════
   GENERATORS PAGE  —  gen-* component styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
/* Generator hero — handled by unified rule (.gen-hero) */
.gen-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.30);
  white-space: nowrap;
}
.gen-breadcrumb a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.2s;
}
.gen-breadcrumb a:hover { color: var(--gold); }
.gen-breadcrumb span { color: rgba(255,255,255,0.25); }

/* ── Brand Showcase ── */
.gen-brand-showcase {
  position: relative;
  background: #06080d;
  padding: 3rem 0 2.5rem;
  border-top: 1px solid rgba(198,168,90,0.1);
  border-bottom: 1px solid rgba(198,168,90,0.1);
  overflow: hidden;
  text-align: center;
}
.gen-brand-showcase-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(10,22,40,0.5) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.gen-brand-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
}
.gen-brand-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(198,168,90,0.55);
}
.gen-brand-logo img {
  width: min(440px, 72vw);
  height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}
.gen-brand-tagline {
  font-family: var(--font-head);
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-style: italic;
  color: rgba(198,168,90,0.65);
}

/* ── Stats Bar ── */
.gen-stats {
  background: var(--navy-mid);
  border-bottom: 1px solid rgba(198,168,90,0.1);
}
.gen-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
  align-items: center;
  padding: 3.2rem 0;
}
.gen-stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0 1.5rem;
  text-align: center;
}
.gen-stat-num {
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-style: italic;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.gen-stat-lbl {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mid-gray);
}
.gen-stat-divider {
  width: 1px;
  height: 52px;
  background: rgba(198,168,90,0.2);
}

/* ── Section Shared Header ── */
.gen-section-header {
  text-align: center;
  margin-bottom: 2.5rem;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.gen-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.gen-section-header h2 {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-style: normal;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin-bottom: 1rem;
}
.gen-section-lead {
  font-size: 0.95rem;
  color: var(--mid-gray);
  line-height: 1.8;
}

/* ── Core Services Grid ── */
.gen-services-section {
  background: var(--black);
  padding: 4.5rem 0;
}
.gen-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.gen-service-card {
  position: relative;
  background: linear-gradient(135deg, rgba(13,32,68,0.5) 0%, rgba(8,10,15,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: 2.2rem 1.8rem;
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}
.gen-service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(to right, var(--electric), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.gen-service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(198,168,90,0.2);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), var(--shadow-gold);
}
.gen-service-card:hover::before {
  transform: scaleX(1);
}
.gen-service-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: rgba(0,200,255,0.08);
  border: 1px solid rgba(0,200,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--electric);
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
  transition: background 0.3s, border-color 0.3s;
}
.gen-service-card:hover .gen-service-icon {
  background: rgba(0,200,255,0.14);
  border-color: rgba(0,200,255,0.35);
}
.gen-service-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.7rem;
  letter-spacing: 0.02em;
}
.gen-service-card p {
  font-size: 0.86rem;
  color: var(--mid-gray);
  line-height: 1.7;
}

/* ── Technical Expertise ── */
.gen-expertise-section {
  background: var(--navy);
  padding: 4.5rem 0;
  border-top: 1px solid rgba(198,168,90,0.08);
  border-bottom: 1px solid rgba(198,168,90,0.08);
}
.gen-expertise-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: start;
}
.gen-expertise-header {
  position: sticky;
  top: calc(96px + 2rem);
}
.gen-expertise-header h2 {
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-style: normal;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin-bottom: 1.2rem;
}
.gen-expertise-header p {
  font-size: 0.9rem;
  color: var(--mid-gray);
  line-height: 1.85;
}
.gen-expertise-cards {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.gen-exp-card {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(13,32,68,0.45) 0%, rgba(8,10,15,0.9) 100%);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  transition: border-color 0.3s, transform 0.3s;
}
.gen-exp-card:hover {
  border-color: rgba(198,168,90,0.2);
  transform: translateX(6px);
}
.gen-exp-icon {
  width: 46px; height: 46px;
  min-width: 46px;
  border-radius: var(--radius-sm);
  background: rgba(198,168,90,0.08);
  border: 1px solid rgba(198,168,90,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.05rem;
  margin-top: 2px;
}
.gen-exp-card h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
}
.gen-exp-card p {
  font-size: 0.85rem;
  color: var(--mid-gray);
  line-height: 1.75;
}

/* ── Real Work Showcase ── */
.gen-work-showcase-section {
  background: var(--black);
  padding: 4.5rem 0;
}
.gen-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.gen-work-item {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--navy);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.gen-work-item img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  background: #06090f;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transition: transform 0.5s var(--ease);
}
.gen-work-item:hover img {
  transform: scale(1.06);
}
.gen-work-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(8,10,15,0.92) 0%, transparent 100%);
  padding: 2rem 1.2rem 1rem;
  transform: translateY(100%);
  transition: transform 0.35s var(--ease);
}
.gen-work-item:hover .gen-work-caption {
  transform: translateY(0);
}
.gen-work-caption strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.2rem;
}
.gen-work-caption span {
  font-size: 0.72rem;
  color: var(--gold);
  letter-spacing: 0.5px;
}

/* ── Process Section ── */
.gen-process-section {
  background: var(--navy);
  padding: 4.5rem 0;
}
.gen-process-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
}
.gen-process-step {
  flex: 0 0 calc(33.333% - 1rem);
  max-width: calc(33.333% - 1rem);
}
.gen-process-step {
  position: relative;
  background: linear-gradient(145deg, rgba(13,32,68,0.6) 0%, rgba(8,10,15,0.9) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: 2rem 1.4rem 1.8rem;
  text-align: center;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
}
.gen-process-step:hover {
  border-color: rgba(198,168,90,0.2);
  transform: translateY(-4px);
}
.gen-process-num {
  position: absolute;
  top: -0.8rem;
  right: 1rem;
  font-family: var(--font-head);
  font-size: 5rem;
  font-style: italic;
  font-weight: 700;
  color: rgba(198,168,90,0.55);  /* gold, clearly visible */
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.gen-process-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(0,200,255,0.08);
  border: 1px solid rgba(0,200,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--electric);
  font-size: 1.15rem;
  margin: 0 auto 1.2rem;
  transition: background 0.3s, border-color 0.3s;
}
.gen-process-step:hover .gen-process-icon {
  background: rgba(0,200,255,0.14);
  border-color: rgba(0,200,255,0.4);
}
.gen-process-step h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.7rem;
  letter-spacing: 0.3px;
  line-height: 1.35;
}
.gen-process-step p {
  font-size: 0.8rem;
  color: var(--mid-gray);
  line-height: 1.7;
}

/* ── Trust Section ── */
.gen-trust-section {
  background: var(--black);
  border-top: 1px solid rgba(198,168,90,0.1);
  border-bottom: 1px solid rgba(198,168,90,0.1);
  padding: 3.5rem 0;
}
.gen-trust-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.gen-trust-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2.2rem;
  flex: 1 1 160px;
  min-width: 160px;
}
.gen-trust-icon {
  width: 44px; height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: rgba(198,168,90,0.06);
  border: 1px solid rgba(198,168,90,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1rem;
}
.gen-trust-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.gen-trust-text strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}
.gen-trust-text span {
  font-size: 0.74rem;
  color: var(--mid-gray);
  line-height: 1.4;
}
.gen-trust-div {
  width: 1px;
  height: 48px;
  background: rgba(198,168,90,0.15);
  flex-shrink: 0;
}

/* ── CTA Section ── */
.gen-cta-section {
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, #0d1f3a 60%, var(--navy-mid) 100%);
  border-top: 1px solid rgba(198,168,90,0.12);
  border-bottom: 1px solid rgba(198,168,90,0.08);
  padding: 3.5rem 0;
  overflow: hidden;
  text-align: center;
}
.gen-cta-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(0,200,255,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.gen-cta-overlay::after {
  display: none;
}
.gen-cta-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
}
.gen-cta-content h2 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.08;
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 1.4rem;
}
.gen-cta-content p {
  font-size: 1rem;
  color: var(--mid-gray);
  line-height: 1.8;
  margin-bottom: 2.8rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.gen-cta-btns {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ══════════════════════════════
   GENERATORS — RESPONSIVE
   ══════════════════════════════ */

/* ── 1200px — large tablets ── */
@media (max-width: 1200px) {
  .gen-process-step {
    flex: 0 0 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
  }
}

/* ── 1024px — tablets ── */
@media (max-width: 1024px) {
  /* Stats: 2 dividers hidden, 2-col */
  .gen-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .gen-stat-divider { display: none; }
  .gen-stat-block { padding: 1.5rem 1rem; }

  /* Services: 2-col */
  .gen-services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Expertise: stack */
  .gen-expertise-inner { grid-template-columns: 1fr; gap: 3rem; }
  .gen-expertise-header { position: static; }

  /* Work: 2-col */
  .gen-work-grid { grid-template-columns: repeat(2, 1fr); }

  /* Process: 2-col at tablet, bottom card centered */
  .gen-process-step {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }

  /* Trust: wrap */
  .gen-trust-div { display: none; }
  .gen-trust-grid { gap: 1rem; justify-content: flex-start; }
  .gen-trust-item { flex: 1 1 200px; }
}

/* ── 768px — mobile ── */
@media (max-width: 768px) {
  /* Hero */
  .gen-hero { text-align: center; padding: 60px 0; min-height: auto; }
  .gen-hero-content {
    max-width: 100%;
    text-align: center;
    padding: 0;
  }
  .gen-hero-btns { justify-content: center; }
  .gen-breadcrumb { display: none; }

  /* Brand */
  .gen-brand-logo img { width: min(320px, 82vw); }

  /* Stats */
  .gen-stats-grid { grid-template-columns: 1fr 1fr; }

  /* Services: 1-col */
  .gen-services-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* Work: 1-col */
  .gen-work-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* Process: 1-col on mobile */
  .gen-process-step {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Trust: stack */
  .gen-trust-grid { flex-direction: column; align-items: flex-start; padding: 0 1rem; }
  .gen-trust-item { padding: 0.8rem 0; width: 100%; }

  /* CTA */
  .gen-cta-section { padding: 3rem 0; }
}

/* ── 480px — small phones ── */
@media (max-width: 480px) {
  .gen-hero h1 { font-size: 2rem; }
  .gen-hero-sub { font-size: 0.68rem; letter-spacing: 2px; }
  .gen-stat-num { font-size: 1.7rem; }
  .gen-brand-logo img { width: min(270px, 88vw); }
  .gen-process-step {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .gen-services-grid { grid-template-columns: 1fr; }
  .gen-expertise-section { padding: 5rem 0; }
  .gen-work-grid { grid-template-columns: 1fr; }
  .gen-exp-card { flex-direction: column; gap: 1rem; }
}

/* ══════════════════════════════════════════════════════════════
   GENERATORS — CINEMATIC LUXURY REFINEMENT v3
   Precise overrides only — base rules above untouched.
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   HERO — cinematic depth & atmosphere
───────────────────────────────────────── */
.gen-hero {
  padding: 36px 0 28px;
  /* Deep cinematic background: near-black with a faint cool-blue depth */
  background: radial-gradient(
    ellipse 120% 80% at 50% 110%,
    rgba(6,18,42,0.72) 0%,
    rgba(4,6,10,1) 55%
  ), #04060a;
}
/* Re-enable the overlay for cinematic vignette — gen-hero only */
.gen-hero-overlay {
  display: block !important;
  position: absolute;
  inset: 0;
  /* Dual-layer: deep black vignette edges + subtle upward blue bloom */
  background:
    radial-gradient(ellipse 85% 55% at 50% 100%,
      rgba(10,40,90,0.28) 0%, transparent 65%),
    radial-gradient(ellipse 100% 100% at 50% 50%,
      transparent 45%, rgba(2,4,8,0.55) 100%);
  pointer-events: none;
  z-index: 0;
}

/* ─────────────────────────────────────────
   HERO TYPOGRAPHY
───────────────────────────────────────── */
.gen-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  /* Cinematic: sharp near shadow + deep atmospheric glow */
  text-shadow:
    0 1px 0 rgba(255,255,255,0.04),
    0 2px 8px rgba(0,0,0,0.7),
    0 12px 60px rgba(0,0,0,0.75);
  margin-bottom: 0.95rem;
}
.gen-hero h1 em {
  font-style: italic;
  color: var(--gold);
  /* Whisper of gold depth under the italic */
  text-shadow:
    0 0 28px rgba(198,168,90,0.22),
    0 2px 10px rgba(0,0,0,0.6);
}
.gen-hero-eyebrow span {
  background: var(--gold);
  opacity: 0.5;
}
.gen-hero-sub {
  color: rgba(255,255,255,0.48);
  letter-spacing: 2.8px;
  font-size: 0.82rem;
}
.gen-hero-divider {
  opacity: 0.7;
  box-shadow: 0 0 12px rgba(198,168,90,0.35);
}
.gen-hero-btns {
  gap: 0.85rem;
  margin-top: 1.8rem;
}
.gen-hero-btns .btn {
  padding: 0.8rem 1.9rem;
  font-size: 0.78rem;
  letter-spacing: 1.6px;
  min-width: 172px;
  justify-content: center;
}

/* ─────────────────────────────────────────
   STATS BAR — refined
───────────────────────────────────────── */
.gen-stats-grid {
  padding: 2.4rem 0;
}
.gen-stats {
  /* Barely-visible top blue edge — feels lit from above */
  border-top: 1px solid rgba(0,120,255,0.08);
}
.gen-stat-num {
  font-size: 1.95rem;
  letter-spacing: -0.01em;
}
.gen-stat-lbl {
  color: rgba(255,255,255,0.42);
}

/* ─────────────────────────────────────────
   SECTION HEADERS
───────────────────────────────────────── */
.gen-section-header {
  margin-bottom: 2.1rem;
}
.gen-section-header h2 {
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.05;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
  margin-bottom: 0.85rem;
}
.gen-section-header h2 em {
  color: var(--gold);
  font-style: italic;
}
.gen-section-lead {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.8;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
.gen-section-eyebrow {
  color: rgba(198,168,90,0.85);
  letter-spacing: 3.5px;
  margin-bottom: 0.85rem;
}

/* ─────────────────────────────────────────
   CORE SERVICES CARDS
───────────────────────────────────────── */
#gen-services {
  padding: 4rem 0 3.8rem;
}
.gen-services-grid {
  gap: 1.35rem;
}
.gen-service-card {
  padding: 1.75rem 1.5rem 1.6rem;
  /* Darker, deeper card background for cinematic feel */
  background: linear-gradient(
    145deg,
    rgba(10,22,50,0.55) 0%,
    rgba(5,7,12,0.96) 100%
  );
  border-color: rgba(255,255,255,0.045);
}
.gen-service-card:hover {
  border-color: rgba(198,168,90,0.18);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(198,168,90,0.08);
}
.gen-service-icon {
  margin-bottom: 1rem;
  background: rgba(0,180,255,0.06);
  border-color: rgba(0,180,255,0.12);
}
.gen-service-card h4 {
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: 0.012em;
  color: rgba(255,255,255,0.96);
  margin-bottom: 0.48rem;
}
.gen-service-card p {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.74;
}

/* ─────────────────────────────────────────
   SVC-SECTIONS (standby · transfer · commercial)
───────────────────────────────────────── */
#standby .svc-section-head h2,
#transfer-switch .svc-section-head h2,
#commercial .svc-section-head h2 {
  font-weight: 800;
  letter-spacing: -0.022em;
  font-size: clamp(1.75rem, 3.2vw, 2.65rem);
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
#standby .svc-lead,
#transfer-switch .svc-lead,
#commercial .svc-lead {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.8;
}
#standby .svc-list li,
#transfer-switch .svc-list li,
#commercial .svc-list li {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  padding: 0.38rem 0;
}
#standby .svc-feat h4,
#transfer-switch .svc-feat h4,
#commercial .svc-feat h4 {
  font-size: 0.82rem;
  font-weight: 700;
}
#standby .svc-feat p,
#transfer-switch .svc-feat p,
#commercial .svc-feat p {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.46);
  line-height: 1.5;
}
.svc-safety-box h4 {
  font-weight: 700;
  font-size: 0.84rem;
}
.svc-safety-box p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.56);
  line-height: 1.7;
}

/* ─────────────────────────────────────────
   IMAGE POLISH — cinematic color grade
   Deeper blacks · blue highlight lift · sharp
   Applied to: svc-hero-img, seq images, B/A
───────────────────────────────────────── */

/* Main section hero images (Generac, ATS, commercial) */
.svc-photo-badge-wrap {
  overflow: hidden;
  border-radius: var(--radius-sm);
  /* Faint cool-blue inner glow around the image frame */
  box-shadow: 0 0 0 1px rgba(0,120,220,0.08), 0 12px 40px rgba(0,0,0,0.55);
}
.svc-hero-img {
  /* Cinematic grade: darken slightly, boost contrast, cool-tint blues */
  filter:
    contrast(1.1)
    saturate(1.08)
    brightness(0.95)
    hue-rotate(-2deg);
  transition:
    filter   0.5s cubic-bezier(0.25,0.46,0.45,0.94),
    transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: filter, transform;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transform: scale(1);
}
.svc-photo-badge-wrap:hover .svc-hero-img {
  filter:
    contrast(1.14)
    saturate(1.12)
    brightness(1.02)
    hue-rotate(0deg);
  transform: scale(1.032);
}

/* Installation sequence steps */
.svc-seq-body {
  overflow: hidden;
  border-radius: calc(var(--radius-sm) - 1px);
}
.svc-seq-body img {
  filter:
    contrast(1.09)
    saturate(1.07)
    brightness(0.94);
  transition:
    filter   0.45s cubic-bezier(0.25,0.46,0.45,0.94),
    transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: filter, transform;
  transform: scale(1);
}
.svc-seq-item:hover .svc-seq-body img {
  filter:
    contrast(1.13)
    saturate(1.11)
    brightness(1.03);
  transform: scale(1.045);
}

/* Before / After images */
.gen-ba-img {
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.gen-ba-img img {
  filter:
    contrast(1.09)
    saturate(1.08)
    brightness(0.95)
    hue-rotate(-1deg);
  transition:
    filter   0.45s cubic-bezier(0.25,0.46,0.45,0.94),
    transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: filter, transform;
  transform: scale(1);
}
.gen-ba-card:hover .gen-ba-img img {
  filter:
    contrast(1.13)
    saturate(1.12)
    brightness(1.02);
  transform: scale(1.03);
}

/* Work grid images (if present) */
.gen-work-item img {
  filter: contrast(1.08) saturate(1.07) brightness(0.94);
  transition: filter 0.45s ease, transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
}
.gen-work-item:hover img {
  filter: contrast(1.12) saturate(1.1) brightness(1.02);
  transform: scale(1.06);
}

/* ─────────────────────────────────────────
   PROJECT SHOWCASE CAPTIONS & LABELS
───────────────────────────────────────── */
.svc-ba-card-caption {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.04em;
  padding-top: 0.55rem;
}
.svc-ba-badge {
  font-size: 0.73rem;
  letter-spacing: 1.8px;
  color: rgba(198,168,90,0.7);
  margin-top: 1.4rem;
}
.svc-photo-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(198,168,90,0.85);
}
.svc-photo-caption {
  font-size: 0.73rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
  padding: 0.5rem 0.8rem 0.35rem;
}
.svc-seq-num {
  font-family: var(--font-head);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(198,168,90,0.8);
}
.svc-seq-body span {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.5px;
}

/* ─────────────────────────────────────────
   TECHNICAL EXPERTISE
───────────────────────────────────────── */
.gen-expertise-section {
  padding: 4rem 0;
}
.gen-expertise-header h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.024em;
  line-height: 1.08;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.gen-expertise-header p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.84;
}
.gen-expertise-cards { gap: 1.15rem; }
.gen-exp-card {
  padding: 1.55rem 1.45rem;
  gap: 1.15rem;
  background: linear-gradient(
    135deg,
    rgba(10,22,50,0.5) 0%,
    rgba(5,7,12,0.92) 100%
  );
  border-color: rgba(255,255,255,0.045);
}
.gen-exp-card:hover {
  border-color: rgba(198,168,90,0.18);
}
.gen-exp-card h4 {
  font-size: 0.87rem;
  font-weight: 700;
  letter-spacing: 0.012em;
  color: rgba(255,255,255,0.96);
  margin-bottom: 0.38rem;
}
.gen-exp-card p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.76;
}

/* ─────────────────────────────────────────
   PROCESS SECTION
───────────────────────────────────────── */
.gen-process-section {
  padding: 4rem 0;
}
.gen-process-grid { gap: 1.15rem; }
.gen-process-step {
  flex: 0 0 calc(33.333% - 0.8rem);
  max-width: calc(33.333% - 0.8rem);
  padding: 1.75rem 1.15rem 1.55rem;
  background: linear-gradient(
    155deg,
    rgba(10,24,52,0.6) 0%,
    rgba(5,7,12,0.92) 100%
  );
  border-color: rgba(255,255,255,0.045);
}
.gen-process-step:hover {
  border-color: rgba(198,168,90,0.16);
  transform: translateY(-3px);
}
/* gen-process-num second stub — authoritative rule is at bottom of file */
.gen-process-step h4 {
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.012em;
  color: rgba(255,255,255,0.96);
  line-height: 1.32;
  margin-bottom: 0.55rem;
}
.gen-process-step p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.46);
  line-height: 1.74;
}

/* ─────────────────────────────────────────
   TRUST BAR
───────────────────────────────────────── */
.gen-trust-section {
  padding: 2.8rem 0;
  border-top-color: rgba(198,168,90,0.08);
  border-bottom-color: rgba(198,168,90,0.08);
}
.gen-trust-icon {
  width: 40px; height: 40px;
  min-width: 40px;
  background: rgba(198,168,90,0.05);
  border-color: rgba(198,168,90,0.12);
}
.gen-trust-text strong {
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.012em;
  color: rgba(255,255,255,0.9);
}
.gen-trust-text span {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.44);
  line-height: 1.4;
}
.gen-trust-div {
  background: rgba(198,168,90,0.1);
}

/* ─────────────────────────────────────────
   CTA SECTION
───────────────────────────────────────── */
.gen-cta-section {
  padding: 5rem 0;
  /* Deeper, more cinematic gradient */
  background: linear-gradient(
    160deg,
    #060c1a 0%,
    #0b1830 45%,
    #060c1a 100%
  );
  border-top-color: rgba(198,168,90,0.1);
}
.gen-cta-overlay {
  background: radial-gradient(
    ellipse 55% 65% at 50% 50%,
    rgba(0,160,255,0.035) 0%,
    transparent 68%
  );
}
.gen-cta-content h2 {
  font-size: clamp(2.3rem, 4.8vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.65),
    0 16px 60px rgba(0,0,0,0.5);
  margin-bottom: 1.15rem;
}
.gen-cta-content h2 em {
  color: var(--gold);
  font-style: italic;
  text-shadow:
    0 0 30px rgba(198,168,90,0.2),
    0 2px 12px rgba(0,0,0,0.6);
}
.gen-cta-content p {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.86;
  margin-bottom: 2.2rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.gen-cta-btns {
  gap: 0.85rem;
}
.gen-cta-btns .btn {
  padding: 0.85rem 2.1rem;
  font-size: 0.79rem;
  letter-spacing: 1.6px;
  min-width: 182px;
  justify-content: center;
}

/* ─────────────────────────────────────────
   RESPONSIVE — GENERATOR CINEMATIC
───────────────────────────────────────── */
@media (max-width: 1024px) {
  .gen-hero { padding: 30px 0 22px; }
  .gen-cta-section { padding: 4rem 0; }
  .gen-expertise-section { padding: 3.6rem 0; }
  .gen-process-section { padding: 3.6rem 0; }
  #gen-services { padding: 3.6rem 0 3.4rem; }
}

@media (max-width: 768px) {
  .gen-hero { padding: 24px 0 18px; }
  .gen-hero h1 {
    font-size: clamp(1.85rem, 6.5vw, 2.6rem);
    letter-spacing: -0.02em;
  }
  .gen-hero-btns {
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1.4rem;
  }
  .gen-hero-btns .btn {
    min-width: 0;
    width: 100%;
    max-width: 300px;
  }
  .gen-section-header h2 {
    font-size: clamp(1.65rem, 6.2vw, 2.3rem);
    letter-spacing: -0.02em;
  }
  .gen-cta-content h2 {
    font-size: clamp(1.85rem, 7vw, 2.7rem);
    letter-spacing: -0.02em;
  }
  .gen-cta-btns {
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
  }
  .gen-cta-btns .btn {
    width: 100%;
    max-width: 300px;
    min-width: 0;
  }
  .gen-expertise-section { padding: 3rem 0; }
  .gen-process-section { padding: 3rem 0; }
  .gen-trust-section { padding: 2.2rem 0; }
}

@media (max-width: 480px) {
  .gen-section-header { margin-bottom: 1.7rem; }
  .gen-service-card { padding: 1.45rem 1.15rem 1.35rem; }
  .gen-exp-card { padding: 1.25rem 1.05rem; gap: 0.9rem; }
  .gen-process-step { padding: 1.45rem 0.95rem 1.3rem; }
  .gen-stats-grid { padding: 1.9rem 0; }
  .gen-cta-section { padding: 3rem 0; }
  .gen-cta-content h2 { font-size: clamp(1.6rem, 8.5vw, 2.2rem); }
}


/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.gen-hero {
  padding: 28px 0 20px;          /* ~8% tighter than base 32/24 */
}
.gen-hero h1 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.07;
  text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 10px 50px rgba(0,0,0,0.65);
  margin-bottom: 1rem;
}
.gen-hero h1 em {
  font-style: italic;
  color: var(--gold);
}
.gen-hero-sub {
  color: rgba(255,255,255,0.52);
  letter-spacing: 2.5px;
}
.gen-hero-btns {
  gap: 0.9rem;
  margin-top: 1.6rem;
}
/* Ensure both hero buttons have identical padding */
.gen-hero-btns .btn {
  padding: 0.78rem 1.8rem;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  min-width: 168px;
  justify-content: center;
}

/* ─────────────────────────────────────────
   STATS BAR
───────────────────────────────────────── */
.gen-stats-grid {
  padding: 2.6rem 0;             /* tighter — was 3.2rem */
}
.gen-stat-num {
  font-size: 2rem;               /* slightly tighter than base 2.2rem */
}

/* ─────────────────────────────────────────
   SECTION HEADERS (shared gen-section-header)
───────────────────────────────────────── */
.gen-section-header {
  margin-bottom: 2.2rem;         /* tighter — was 2.5rem */
}
.gen-section-header h2 {
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.06;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
  margin-bottom: 0.9rem;
}
.gen-section-header h2 em {
  color: var(--gold);
  font-style: italic;
}
.gen-section-lead {
  font-size: 0.93rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.78;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ─────────────────────────────────────────
   CORE SERVICES SECTION
───────────────────────────────────────── */
#gen-services {
  padding: 4.2rem 0 4rem;
}
.gen-services-grid {
  gap: 1.4rem;                   /* tighter — was 1.6rem */
}
.gen-service-card {
  padding: 1.8rem 1.6rem 1.6rem;
  border-color: rgba(255,255,255,0.05);
}
.gen-service-card h4 {
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  color: rgba(255,255,255,0.95);
  margin-bottom: 0.5rem;
}
.gen-service-card p {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.72;
}
.gen-service-icon {
  margin-bottom: 1rem;
}

/* ─────────────────────────────────────────
   SVC-SECTION (standby · transfer · commercial)
   Headings, lead text, list items
───────────────────────────────────────── */
#standby .svc-section-head h2,
#transfer-switch .svc-section-head h2,
#commercial .svc-section-head h2 {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
}
#standby .svc-lead,
#transfer-switch .svc-lead,
#commercial .svc-lead {
  font-size: 0.93rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.78;
}
#standby .svc-list li,
#transfer-switch .svc-list li,
#commercial .svc-list li {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.62);
  padding: 0.4rem 0;
}
#standby .svc-subhead,
#transfer-switch .svc-subhead,
#commercial .svc-subhead {
  font-size: 0.8rem;
  letter-spacing: 2px;
  margin-bottom: 0.8rem;
}
/* Feature badges inside svc-sections */
#standby .svc-feat h4,
#transfer-switch .svc-feat h4,
#commercial .svc-feat h4 {
  font-size: 0.82rem;
  font-weight: 700;
}
#standby .svc-feat p,
#transfer-switch .svc-feat p,
#commercial .svc-feat p {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}
/* Safety box */
.svc-safety-box h4 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.svc-safety-box p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
}

/* ─────────────────────────────────────────
   IMAGE POLISH — svc-hero-img
   (standby, transfer switch, commercial)
───────────────────────────────────────── */
.svc-hero-img {
  filter: contrast(1.08) saturate(1.12) brightness(0.97);
  transition:
    filter   0.45s cubic-bezier(0.25,0.46,0.45,0.94),
    transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: filter, transform;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transform: scale(1);
}
.svc-photo-badge-wrap {
  overflow: hidden;              /* clips the zoom so it doesn't bleed */
  border-radius: var(--radius-sm);
}
.svc-photo-badge-wrap:hover .svc-hero-img {
  filter: contrast(1.12) saturate(1.16) brightness(1.02);
  transform: scale(1.03);
}

/* ─────────────────────────────────────────
   IMAGE POLISH — installation sequence steps
───────────────────────────────────────── */
.svc-seq-body {
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.svc-seq-body img {
  filter: contrast(1.07) saturate(1.1) brightness(0.96);
  transition:
    filter   0.4s cubic-bezier(0.25,0.46,0.45,0.94),
    transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: filter, transform;
  transform: scale(1);
}
.svc-seq-item:hover .svc-seq-body img {
  filter: contrast(1.11) saturate(1.14) brightness(1.02);
  transform: scale(1.04);
}

/* ─────────────────────────────────────────
   IMAGE POLISH — before/after cards
───────────────────────────────────────── */
.gen-ba-img {
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.gen-ba-img img {
  filter: contrast(1.07) saturate(1.1) brightness(0.97);
  transition:
    filter   0.4s cubic-bezier(0.25,0.46,0.45,0.94),
    transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: filter, transform;
  transform: scale(1);
}
.gen-ba-card:hover .gen-ba-img img {
  filter: contrast(1.11) saturate(1.14) brightness(1.02);
  transform: scale(1.03);
}

/* ─────────────────────────────────────────
   PROJECT SHOWCASE SECTION
───────────────────────────────────────── */
#project-showcase .gen-section-header {
  margin-bottom: 2.4rem;
}
.svc-ba-card-caption {
  font-size: 0.77rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.03em;
  padding-top: 0.6rem;
}
.svc-ba-badge {
  font-size: 0.74rem;
  letter-spacing: 1.5px;
  margin-top: 1.4rem;
}
.svc-photo-badge {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.svc-photo-caption {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  padding: 0.5rem 0.8rem 0.4rem;
}

/* Sequence step number & label */
.svc-seq-num {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
}
.svc-seq-body span {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.5px;
}

/* ─────────────────────────────────────────
   TECHNICAL EXPERTISE SECTION
───────────────────────────────────────── */
.gen-expertise-section {
  padding: 4.2rem 0;
}
.gen-expertise-header h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.1;
}
.gen-expertise-header p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.82;
}
.gen-expertise-cards {
  gap: 1.2rem;                   /* tighter — was 1.4rem */
}
.gen-exp-card {
  padding: 1.6rem 1.5rem;
  gap: 1.2rem;
}
.gen-exp-card h4 {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  color: rgba(255,255,255,0.95);
  margin-bottom: 0.4rem;
}
.gen-exp-card p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.74;
}

/* ─────────────────────────────────────────
   PROCESS SECTION
───────────────────────────────────────── */
.gen-process-section {
  padding: 4.2rem 0;
}
.gen-process-grid {
  gap: 1.2rem;                   /* tighter — was 1.4rem */
}
.gen-process-step {
  padding: 1.8rem 1.2rem 1.6rem;
}
.gen-process-step h4 {
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.95);
  line-height: 1.35;
  margin-bottom: 0.6rem;
}
.gen-process-step p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.72;
}

/* ─────────────────────────────────────────
   TRUST BAR
───────────────────────────────────────── */
.gen-trust-section {
  padding: 3rem 0;               /* tighter — was 3.5rem */
}
.gen-trust-text strong {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.92);
}
.gen-trust-text span {
  font-size: 0.73rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.4;
}
.gen-trust-icon {
  width: 42px; height: 42px;
  min-width: 42px;
}

/* ─────────────────────────────────────────
   CTA SECTION
───────────────────────────────────────── */
.gen-cta-section {
  padding: 4.5rem 0;
}
.gen-cta-content h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.06;
  text-shadow: 0 4px 32px rgba(0,0,0,0.55);
  margin-bottom: 1.2rem;
}
.gen-cta-content h2 em {
  color: var(--gold);
  font-style: italic;
}
.gen-cta-content p {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.82;
  margin-bottom: 2.2rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
/* Both CTA buttons — identical sizing */
.gen-cta-btns .btn {
  padding: 0.85rem 2rem;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  min-width: 180px;
  justify-content: center;
}

/* ─────────────────────────────────────────
   RESPONSIVE — GENERATOR LUXURY OVERRIDES
───────────────────────────────────────── */
@media (max-width: 1024px) {
  .gen-hero {
    padding: 24px 0 18px;
  }
  .gen-cta-section { padding: 3.8rem 0; }
  .gen-expertise-section { padding: 3.8rem 0; }
  .gen-process-section { padding: 3.8rem 0; }
  #gen-services { padding: 3.8rem 0 3.6rem; }
}

@media (max-width: 768px) {
  .gen-hero h1 {
    font-size: clamp(1.9rem, 6vw, 2.6rem);
    letter-spacing: -0.02em;
  }
  .gen-hero-btns .btn {
    min-width: 0;
    width: 100%;
    max-width: 320px;
    padding: 0.82rem 1.4rem;
  }
  .gen-hero-btns {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .gen-section-header h2 {
    font-size: clamp(1.7rem, 6vw, 2.4rem);
  }
  .gen-cta-content h2 {
    font-size: clamp(1.9rem, 7vw, 2.8rem);
  }
  .gen-cta-btns .btn {
    width: 100%;
    max-width: 320px;
  }
  .gen-cta-btns {
    flex-direction: column;
    align-items: center;
  }
  .gen-expertise-section { padding: 3.2rem 0; }
  .gen-process-section { padding: 3.2rem 0; }
  .gen-trust-section { padding: 2.4rem 0; }
}

@media (max-width: 480px) {
  .gen-section-header { margin-bottom: 1.8rem; }
  .gen-service-card { padding: 1.5rem 1.2rem 1.4rem; }
  .gen-exp-card { padding: 1.3rem 1.1rem; gap: 1rem; }
  .gen-process-step { padding: 1.5rem 1rem 1.3rem; }
  .gen-stats-grid { padding: 2rem 0; }
  .gen-cta-section { padding: 3rem 0; }
  .gen-cta-content h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
}


/* ══════════════════════════════════════════════════════════════
   GENERATORS — FINAL LUXURY POLISH v4
   Cinematic hero depth · type contrast · spacing tighten · image clarity
   No layout, image placement, or section order changes.
   ══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────
   HERO — deeper black + richer blue depth
───────────────────────────────────────── */
.gen-hero {
  /* Deeper cinematic base: near-absolute black with subtle deep-navy lift at bottom */
  background:
    radial-gradient(
      ellipse 110% 70% at 50% 115%,
      rgba(4,14,36,0.85) 0%,
      rgba(2,4,8,1) 50%
    ),
    #020406;
  padding: 28px 0 20px;
}

/* Re-affirm overlay: crisp edge vignette + deeper blue bloom */
.gen-hero-overlay {
  display: block !important;
  background:
    /* Edge vignette — black in corners */
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(1,3,6,0.65) 100%),
    /* Cool blue atmospheric breath at base */
    radial-gradient(ellipse 75% 45% at 50% 105%, rgba(8,32,80,0.32) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}

/* Hero headline — sharper atmospheric depth */
.gen-hero h1 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.06;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.035),
    0 3px 10px rgba(0,0,0,0.82),
    0 14px 65px rgba(0,0,0,0.78);
  margin-bottom: 0.95rem;
}
/* Gold italic — deeper warm glow without neon */
.gen-hero h1 em {
  color: var(--gold);
  font-style: italic;
  text-shadow:
    0 0 22px rgba(198,168,90,0.18),
    0 3px 14px rgba(0,0,0,0.72);
}

/* Hero sub-line and eyebrow — sharper readability */
.gen-hero-eyebrow {
  letter-spacing: 4px;
  font-size: 0.68rem;
}
.gen-hero-sub {
  color: rgba(255,255,255,0.46);
  letter-spacing: 2.8px;
  font-size: 0.81rem;
}
.gen-hero-divider {
  opacity: 0.68;
  box-shadow: 0 0 10px rgba(198,168,90,0.28);
}

/* ────────────────────────────────────────
   TYPOGRAPHY — heading/body contrast uplift
───────────────────────────────────────── */

/* Section h2 — stronger weight + deeper shadow = premium authority */
.gen-section-header h2 {
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.04;
  color: #fff;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.04),
    0 3px 22px rgba(0,0,0,0.5);
  margin-bottom: 0.85rem;
}

/* Lead text — lighter, easier to scan */
.gen-section-lead {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.78;
}

/* Eyebrow — slightly more visible gold */
.gen-section-eyebrow {
  color: rgba(198,168,90,0.88);
  font-size: 0.66rem;
  letter-spacing: 3.8px;
  margin-bottom: 0.9rem;
}

/* Standby / Transfer / Commercial section h2 — authority boost */
#standby .svc-section-head h2,
#transfer-switch .svc-section-head h2,
#commercial .svc-section-head h2 {
  font-size: clamp(1.78rem, 3.2vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -0.024em;
  text-shadow:
    0 2px 16px rgba(0,0,0,0.45);
}

/* Lead paragraphs — cleaner, lighter body tone */
#standby .svc-lead,
#transfer-switch .svc-lead,
#commercial .svc-lead {
  font-size: 0.91rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.8;
}

/* List items — slightly more legible */
#standby .svc-list li,
#transfer-switch .svc-list li,
#commercial .svc-list li {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.6);
}

/* Expertise left-panel header */
.gen-expertise-header h2 {
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  font-weight: 800;
  letter-spacing: -0.024em;
  line-height: 1.08;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.gen-expertise-header p {
  font-size: 0.87rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.84;
}

/* CTA headline — bold, clean, cinematic */
.gen-cta-content h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.05;
  text-shadow:
    0 3px 10px rgba(0,0,0,0.7),
    0 18px 70px rgba(0,0,0,0.55);
  margin-bottom: 1.15rem;
}
.gen-cta-content p {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.84;
  margin-bottom: 2.1rem;
  max-width: 500px;
}

/* ────────────────────────────────────────
   SPACING — 3-5% tighter, no cramping
───────────────────────────────────────── */

/* Stats bar */
.gen-stats-grid { padding: 2.5rem 0; }

/* Core services section */
#gen-services { padding: 4rem 0 3.8rem; }
.gen-services-grid { gap: 1.32rem; }
.gen-service-card { padding: 1.72rem 1.55rem 1.55rem; }

/* Expertise section */
.gen-expertise-section { padding: 4rem 0; }
.gen-expertise-cards { gap: 1.12rem; }
.gen-exp-card { padding: 1.55rem 1.45rem; gap: 1.1rem; }

/* Process section */
.gen-process-section { padding: 4rem 0; }
.gen-process-grid { gap: 1.1rem; }
.gen-process-step {
  flex: 0 0 calc(33.333% - 0.75rem);
  max-width: calc(33.333% - 0.75rem);
}
.gen-process-step { padding: 1.72rem 1.1rem 1.5rem; }

/* Trust bar */
.gen-trust-section { padding: 2.7rem 0; }

/* CTA section */
.gen-cta-section { padding: 4.4rem 0; }

/* Project showcase */
#project-showcase { padding-top: 4rem; padding-bottom: 4rem; }

/* Section header bottom margin */
.gen-section-header { margin-bottom: 2.1rem; }

/* ────────────────────────────────────────
   IMAGE POLISH — clarity, contrast, sharpness
   No repositioning, resizing, or replacement.
   Slightly deeper darks, crisper highlights.
───────────────────────────────────────── */

/* Main hero images (Generac unit, ATS, commercial) */
.svc-hero-img {
  filter:
    contrast(1.12)
    saturate(1.1)
    brightness(0.95)
    hue-rotate(-2deg);
  transition:
    filter   0.5s cubic-bezier(0.25,0.46,0.45,0.94),
    transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}
.svc-photo-badge-wrap:hover .svc-hero-img {
  filter:
    contrast(1.16)
    saturate(1.14)
    brightness(1.02)
    hue-rotate(0deg);
  transform: scale(1.03);
}

/* Installation sequence images */
.svc-seq-body img {
  filter:
    contrast(1.1)
    saturate(1.09)
    brightness(0.94);
  transition:
    filter   0.44s cubic-bezier(0.25,0.46,0.45,0.94),
    transform 0.54s cubic-bezier(0.25,0.46,0.45,0.94);
}
.svc-seq-item:hover .svc-seq-body img {
  filter:
    contrast(1.14)
    saturate(1.13)
    brightness(1.03);
  transform: scale(1.042);
}

/* Before / After images */
.gen-ba-img img {
  filter:
    contrast(1.1)
    saturate(1.1)
    brightness(0.95)
    hue-rotate(-1deg);
  transition:
    filter   0.44s cubic-bezier(0.25,0.46,0.45,0.94),
    transform 0.54s cubic-bezier(0.25,0.46,0.45,0.94);
}
.gen-ba-card:hover .gen-ba-img img {
  filter:
    contrast(1.14)
    saturate(1.14)
    brightness(1.02);
  transform: scale(1.032);
}

/* Work grid images */
.gen-work-item img {
  filter: contrast(1.1) saturate(1.09) brightness(0.94);
  transition: filter 0.44s ease, transform 0.54s cubic-bezier(0.25,0.46,0.45,0.94);
}
.gen-work-item:hover img {
  filter: contrast(1.14) saturate(1.12) brightness(1.02);
  transform: scale(1.055);
}

/* ────────────────────────────────────────
   BUTTON / CTA POLISH
───────────────────────────────────────── */
.gen-hero-btns .btn,
.gen-cta-btns .btn {
  /* Perfect alignment, identical sizing */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.82rem 2rem;
  font-size: 0.79rem;
  letter-spacing: 1.6px;
  min-width: 178px;
  border-radius: 3px;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s, box-shadow 0.25s;
}

/* ────────────────────────────────────────
   RESPONSIVE QA — Final pass
───────────────────────────────────────── */
@media (max-width: 1200px) {
  .gen-section-header h2 { font-size: clamp(1.85rem, 3.5vw, 2.8rem); }
  .gen-cta-content h2    { font-size: clamp(2rem, 4.2vw, 3.2rem); }
}

@media (max-width: 1024px) {
  .gen-hero    { padding: 24px 0 18px; }
  #gen-services { padding: 3.6rem 0 3.4rem; }
  .gen-expertise-section { padding: 3.5rem 0; }
  .gen-process-section   { padding: 3.5rem 0; }
  .gen-cta-section       { padding: 3.8rem 0; }
  .gen-stats-grid        { padding: 2.2rem 0; }
}

@media (max-width: 768px) {
  .gen-hero { padding: 22px 0 16px; }
  .gen-hero h1 {
    font-size: clamp(1.9rem, 6vw, 2.6rem);
    letter-spacing: -0.02em;
  }
  .gen-hero-btns {
    flex-direction: column;
    align-items: center;
    gap: 0.72rem;
    margin-top: 1.4rem;
  }
  .gen-hero-btns .btn {
    width: 100%;
    max-width: 310px;
    min-width: 0;
    padding: 0.8rem 1.4rem;
  }
  .gen-section-header h2 { font-size: clamp(1.7rem, 6vw, 2.4rem); }
  .gen-cta-content h2    { font-size: clamp(1.9rem, 7vw, 2.8rem); }
  .gen-cta-btns {
    flex-direction: column;
    align-items: center;
    gap: 0.72rem;
  }
  .gen-cta-btns .btn {
    width: 100%;
    max-width: 310px;
    min-width: 0;
  }
  .gen-trust-section  { padding: 2.2rem 0; }
  .gen-process-section { padding: 3rem 0; }
  .gen-expertise-section { padding: 3rem 0; }
  .gen-stats-grid { padding: 2rem 0; }
  /* Ensure no image overflow on mobile */
  .svc-photo-badge-wrap,
  .gen-ba-img,
  .svc-seq-body,
  .gen-work-item { overflow: hidden; }
}

@media (max-width: 480px) {
  .gen-hero h1 { font-size: clamp(1.75rem, 7.5vw, 2.2rem); letter-spacing: -0.015em; }
  .gen-section-header { margin-bottom: 1.75rem; }
  .gen-section-header h2 { font-size: clamp(1.6rem, 7.5vw, 2.1rem); }
  .gen-service-card  { padding: 1.45rem 1.15rem 1.3rem; }
  .gen-exp-card      { padding: 1.25rem 1.05rem; gap: 0.9rem; }
  .gen-process-step  { padding: 1.45rem 0.95rem 1.25rem; }
  .gen-stats-grid    { padding: 1.85rem 0; }
  .gen-stat-num      { font-size: 1.75rem; }
  .gen-cta-section   { padding: 2.8rem 0; }
  .gen-cta-content h2 { font-size: clamp(1.65rem, 8.5vw, 2.3rem); }
  .gen-trust-section { padding: 2rem 0; }
}

/* ══════════════════════════════════════════════════════════
   TRUST BAR UNIFICATION — makes all trust bars look the same
   Applies to: .svc-trust-*, .marina-trust-*, .gen-trust-*
   ══════════════════════════════════════════════════════════ */

/* ── Outer section wrappers ── */
.svc-trust-bar,
.marina-trust,
.gen-trust-section {
  background: var(--black);
  border-top: 1px solid rgba(198,168,90,0.14);
  border-bottom: 1px solid rgba(198,168,90,0.1);
  padding: 2.4rem 0;
}

/* ── Grid (flex row, centered, wrapping) ── */
.svc-trust-grid,
.marina-trust-grid,
.gen-trust-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

/* ── Individual items ── */
.svc-trust-item,
.marina-trust-item,
.gen-trust-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.1rem;
  padding: 0.8rem 2.4rem;
  flex: 1 1 180px;
  min-width: 160px;
}

/* ── Dividers ── */
.svc-trust-divider,
.marina-trust-divider,
.gen-trust-div {
  width: 1px;
  height: 52px;
  background: rgba(198,168,90,0.2);
  flex-shrink: 0;
  align-self: center;
}

/* ── Icon circles ── */
.svc-trust-icon,
.marina-trust-icon,
.gen-trust-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: rgba(198,168,90,0.07);
  border: 1px solid rgba(198,168,90,0.22);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.svc-trust-icon i,
.marina-trust-icon i,
.gen-trust-icon { /* gen-trust-icon styles its own i via color: var(--gold) */
  font-size: 1.15rem;
  color: var(--gold);
}
.gen-trust-icon {
  font-size: inherit; /* reset the icon rule applied directly to wrapper */
}

/* ── Text block ── */
.svc-trust-text,
.marina-trust-text,
.gen-trust-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.svc-trust-text strong,
.marina-trust-text strong,
.gen-trust-text strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.1px;
  white-space: nowrap;
}
.svc-trust-text span,
.marina-trust-text span,
.gen-trust-text span {
  font-size: 0.75rem;
  color: var(--mid-gray);
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* ── Tablet ≤768px: wrap items 2-per-row ── */
@media (max-width: 768px) {
  .svc-trust-grid,
  .marina-trust-grid,
  .gen-trust-grid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }
  .svc-trust-divider,
  .marina-trust-divider,
  .gen-trust-div { display: none; }
  .svc-trust-item,
  .marina-trust-item,
  .gen-trust-item {
    flex: 1 1 44%;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid rgba(198,168,90,0.07);
  }
  .svc-trust-text strong,
  .marina-trust-text strong,
  .gen-trust-text strong { white-space: normal; }
  .svc-trust-text span,
  .marina-trust-text span,
  .gen-trust-text span { white-space: normal; }
}

/* ── Mobile ≤480px: stack single column ── */
@media (max-width: 480px) {
  .svc-trust-item,
  .marina-trust-item,
  .gen-trust-item {
    flex: 1 1 100%;
    padding: 0.85rem 1.2rem;
  }
  .svc-trust-bar,
  .marina-trust,
  .gen-trust-section { padding: 1.8rem 0; }
}

/* ══════════════════════════════════════════════════════════════
   SERVICES.CSS PRODUCTION AUDIT REPAIR — Full Sitewide QA
   ══════════════════════════════════════════════════════════════ */

/* ── Generator process background numbers: visibility override (deferred to bottom block) ── */

/* ── Svc-photo-item span: absolute guaranteed override ── */
.svc-photo-item span {
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 4 !important;
  opacity: 1 !important;
  display: block !important;
  background: linear-gradient(to top,
    rgba(2,4,10,0.98) 0%,
    rgba(2,4,10,0.85) 38%,
    rgba(2,4,10,0.30) 68%,
    transparent 100%) !important;
  padding: 2.4rem 0.9rem 0.85rem !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,1) !important;
  text-shadow: 0 1px 5px rgba(0,0,0,1), 0 2px 10px rgba(0,0,0,0.9) !important;
  pointer-events: none !important;
  letter-spacing: 0.4px !important;
}
.svc-photo-item span i {
  color: #D4B870 !important;
  margin-right: 5px !important;
  text-shadow: 0 1px 6px rgba(0,0,0,1) !important;
}

/* ── Before/After strip — mobile: keep gen-ba and carfix stacking ── */
@media (max-width: 600px) {
  .gen-ba-wrap {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
  .gen-ba-arrow { display: none !important; }
  .carfix-ba-wrap {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
}

/* ── Photo grids: overflow guard ── */
.svc-photo-grid,
.svc-photo-grid-1,
.svc-photo-grid-2,
.svc-photo-grid-3,
.svc-photo-grid-4,
.svc-photo-grid-5 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   MASTER SEQUENCE GRID — single authoritative source of truth.
   All other .svc-sequence-grid rules in this file are stubs that defer here.
   HOW IT WORKS: grid uses minmax(0, 260px) columns + justify-content:center.
   This means each column is AT MOST 260px wide. When a lone "Done" card sits
   on its own row, it occupies exactly one 260px column — same width as every
   other card — and the row is centered by justify-content. No nth-child hacks.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Desktop: 4 columns ── */
.svc-sequence-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 260px)) !important;
  gap: 1rem !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Every item: natural auto-flow */
.svc-seq-item {
  grid-column: auto !important;
  width: 100% !important;
}
/*
  Centering the lone last card on desktop (4-col grid):
  — 5-item grid (generator):  item 5 is alone on row 2 → place it in col 2-3 (center)
  — 7-item grid (marina):     item 7 is alone on row 2 → place it in col 2-3 (center)
  Both cases: last child that falls on column 1 of a new row → push to col 2/span 2
*/
.svc-sequence-grid .svc-seq-item:last-child:nth-child(4n+1) {
  grid-column: 2 / 4 !important;   /* spans cols 2–3 out of 4 = visually centered */
  justify-self: center !important;
  width: minmax(0, 260px) !important;
  max-width: 260px !important;
}

/* ── Tablet (≤900px): 2 columns, fixed width ── */
@media (max-width: 900px) {
  .svc-sequence-grid {
    grid-template-columns: repeat(2, minmax(0, 260px)) !important;
    gap: 0.9rem !important;
  }
  /* lone last card on 2-col grid: center it in col 1-2 */
  .svc-sequence-grid .svc-seq-item:last-child:nth-child(2n+1) {
    grid-column: 1 / 3 !important;
    justify-self: center !important;
    max-width: 260px !important;
    width: 100% !important;
  }
}

/* ── Mobile (≤600px): 2 columns, fixed width ── */
@media (max-width: 600px) {
  .svc-sequence-grid {
    grid-template-columns: repeat(2, minmax(0, 44vw)) !important;
    gap: 0.75rem !important;
  }
  .svc-seq-body { min-height: 180px !important; }
  /* lone last card on mobile 2-col */
  .svc-sequence-grid .svc-seq-item:last-child:nth-child(2n+1) {
    grid-column: 1 / 3 !important;
    justify-self: center !important;
    max-width: 44vw !important;
    width: 100% !important;
  }
}

/* ── Service intro / two-col layouts ── */
.svc-intro-inner,
.svc-two-col,
.svc-two-col-rev {
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .svc-intro-inner { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .svc-two-col,
  .svc-two-col-rev { grid-template-columns: 1fr !important; }
  .svc-media-col { position: static !important; width: 100% !important; }
  .svc-day-night { grid-template-columns: 1fr 1fr !important; }
  .svc-intro-cards { grid-template-columns: repeat(2,1fr) !important; }
  .svc-services-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 480px) {
  .svc-day-night { grid-template-columns: 1fr !important; }
  .svc-services-grid { grid-template-columns: 1fr !important; }
  .svc-intro-cards { grid-template-columns: 1fr !important; }
  .svc-page-stats-grid { grid-template-columns: repeat(2,1fr) !important; }
  .svc-photo-grid-2 { grid-template-columns: 1fr !important; }
  .svc-photo-grid-3 { grid-template-columns: repeat(2,1fr) !important; }
}

/* ── Hero sections: consistent margin-top across all pages ── */
.svc-hero,
.marina-hero,
.elev-hero,
.comm-hero,
.gen-hero,
.page-header,
.abt-hero,
.glry-hero {
  margin-top: 96px !important;
}
@media (max-width: 768px) {
  .svc-hero,
  .marina-hero,
  .elev-hero,
  .comm-hero,
  .gen-hero,
  .page-header,
  .abt-hero,
  .glry-hero {
    margin-top: 76px !important;
  }
}
@media (max-width: 480px) {
  .svc-hero,
  .marina-hero,
  .elev-hero,
  .comm-hero,
  .gen-hero,
  .page-header,
  .abt-hero,
  .glry-hero {
    margin-top: 62px !important;
  }
}

/* ── Trust bars: final unified responsive ── */
@media (max-width: 600px) {
  .svc-trust-item,
  .marina-trust-item,
  .gen-trust-item {
    flex: 1 1 100%;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(198,168,90,0.07);
  }
  .svc-trust-text strong,
  .marina-trust-text strong,
  .gen-trust-text strong { font-size: 0.84rem; white-space: normal; }
  .svc-trust-text span,
  .marina-trust-text span,
  .gen-trust-text span { white-space: normal; }
}

/* ── Gallery tile labels — always readable ── */
.glry-tile-cat {
  color: #D4B870 !important;
  text-shadow: 0 1px 5px rgba(0,0,0,1), 0 2px 12px rgba(0,0,0,0.9) !important;
  opacity: 1 !important;
}
.glry-tile-caption {
  color: rgba(255,255,255,1) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,1) !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   SEQUENCE GRID VARIANTS
   --7  Marina pedestal: 4 cols row 1 (items 1-4), 3 cols row 2 (items 5-7) centered
   --5  Generator:       3 cols row 1 (items 1-3), 2 cols row 2 (items 4-5) centered
   ══════════════════════════════════════════════════════════════════════ */

/* Marina — 7 items, 4-col desktop: items 1-4 row 1, items 5-7 row 2 centered */
.svc-sequence-grid--7 {
  grid-template-columns: repeat(4, minmax(0, 260px)) !important;
}
/* Desktop: items 5,6,7 land in cols 1,2,3 of row 2.
   Force item 5 to start at col 2 so the 3 items occupy cols 2,3,4 — wait, that clips item 7.
   Better: use the sub-grid trick — wrap row 2 in col 1/5, then flex-center inside.
   Cleanest pure-CSS solution: nudge item 5 to col-start 1 and accept the slight
   left-bias OR use a 3-col grid for desktop too (3+3+1 = 7). Use 3-col for --7: */
.svc-sequence-grid--7 {
  grid-template-columns: repeat(3, minmax(0, 260px)) !important;
}
/* 7 items in 3 cols: row1=1-3, row2=4-6, row3=item7 alone → center it */
.svc-sequence-grid--7 .svc-seq-item:last-child:nth-child(3n+1) {
  grid-column: 2 / 3 !important;
  justify-self: center !important;
  max-width: 260px !important;
  width: 100% !important;
}

/* --5 class no longer used in HTML (replaced by gen-seq-row layout above).
   Kept as empty stub so any stray reference doesn't error. */

/* Responsive overrides for --7 (grid only) */
@media (max-width: 900px) {
  .svc-sequence-grid--7 {
    grid-template-columns: repeat(2, minmax(0, 260px)) !important;
  }
  .svc-sequence-grid--7 .svc-seq-item:last-child:nth-child(2n+1) {
    grid-column: 1 / 3 !important;
    justify-self: center !important;
    max-width: 260px !important;
    width: 100% !important;
  }
}
@media (max-width: 600px) {
  .svc-sequence-grid--7 {
    grid-template-columns: repeat(2, minmax(0, 44vw)) !important;
  }
  .svc-sequence-grid--7 .svc-seq-item:last-child:nth-child(2n+1) {
    grid-column: 1 / 3 !important;
    justify-self: center !important;
    max-width: 44vw !important;
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   GENERATOR SEQUENCE — 2-ROW LAYOUT (3 top + 2 bottom centered)
   Completely independent of svc-sequence-grid to avoid cascade conflicts.
   ══════════════════════════════════════════════════════════════════════ */

/* Shared row wrapper */
.gen-seq-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  margin-top: 1rem;
}

/* Row 1: 3 equal cards */
.gen-seq-row--3 .svc-seq-item {
  flex: 0 0 calc(33.333% - 0.68rem);
  max-width: calc(33.333% - 0.68rem);
  /* Override any grid-column rules from master block */
  grid-column: unset !important;
  width: auto !important;
}

/* Row 2: 2 equal cards, same width as row 1 cards — perfectly centered */
.gen-seq-row--2 .svc-seq-item {
  flex: 0 0 calc(33.333% - 0.68rem);
  max-width: calc(33.333% - 0.68rem);
  grid-column: unset !important;
  width: auto !important;
}

/* Tablet ≤900px: 2 per row */
@media (max-width: 900px) {
  .gen-seq-row--3 .svc-seq-item,
  .gen-seq-row--2 .svc-seq-item {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
  }
}

/* Mobile ≤600px: 1 per row full width */
@media (max-width: 600px) {
  .gen-seq-row--3 .svc-seq-item,
  .gen-seq-row--2 .svc-seq-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   GENERATOR PROCESS CARDS — fix large background number overlapping icon
   Move the decorative number fully behind content with z-index layering
   ══════════════════════════════════════════════════════════════════════ */
.gen-process-num {
  position: absolute !important;
  top: -1.2rem !important;
  right: 0.6rem !important;
  font-size: 4rem !important;
  line-height: 1 !important;
  color: rgba(198,168,90,0.75) !important;  /* raised: clearly visible gold */
  z-index: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
}
.gen-process-icon {
  position: relative !important;
  z-index: 1 !important;           /* icon sits above the number */
}
.gen-process-step h4,
.gen-process-step p {
  position: relative !important;
  z-index: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   TRUST BAR — prevent text wrapping/overlapping on desktop
   Reduce padding, ensure items shrink gracefully, text doesn't overflow
   ══════════════════════════════════════════════════════════════════════ */
.svc-trust-item,
.marina-trust-item,
.gen-trust-item {
  padding: 0.7rem 1rem !important;
  flex: 1 1 160px !important;
  min-width: 140px !important;
  gap: 0.7rem !important;
}
.svc-trust-text strong,
.marina-trust-text strong,
.gen-trust-text strong {
  font-size: 0.82rem !important;
  white-space: normal !important;   /* allow wrap rather than overflow */
  line-height: 1.3 !important;
}
.svc-trust-text span,
.marina-trust-text span,
.gen-trust-text span {
  font-size: 0.71rem !important;
  white-space: normal !important;
  line-height: 1.3 !important;
}
.svc-trust-icon,
.marina-trust-icon {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
}
.svc-trust-icon i,
.marina-trust-icon i {
  font-size: 1.1rem !important;
}

/* ══════════════════════════════════════════════════════════════════════
   ALL SERVICE PAGE IMAGES — crisp, sharp rendering (fixes blurry photos)
   Applied to every img inside service sections
   ══════════════════════════════════════════════════════════════════════ */
.svc-hero-img,
.svc-photo-item img,
.svc-seq-body img,
.svc-ba-card-img img,
.gen-ba-img img,
.carfix-ba-img img,
.elev-hero-img,
.svc-spotlight-img-wrap img {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: high-quality !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
}

/* ── Svc-ba-card-caption: readable ── */
.svc-ba-card-caption {
  background: rgba(4,6,14,0.88) !important;
  color: rgba(255,255,255,0.88) !important;
  font-size: 0.76rem !important;
  padding: 9px 14px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  white-space: normal !important;
  line-height: 1.4 !important;
}

/* ── Service page stats grid ── */
.svc-page-stats-grid {
  width: 100%;
  box-sizing: border-box;
}

/* ── Marina showcase grid: even cards ── */
.marina-showcase-grid {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.marina-showcase-item {
  overflow: hidden;
  border-radius: var(--radius-md);
}
.marina-showcase-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Elevator / commercial work grids ── */
.elev-work-showcase,
.comm-work-grid,
.svc-work-showcase {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Svc-photo-grid-1: single card centered ── */
.svc-photo-grid-1 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
}
.svc-photo-grid-1 .svc-photo-item {
  max-width: 680px !important;
  width: 100% !important;
}

/* ── Orphan card centering — all grids ── */
.svc-photo-grid-2 .svc-photo-item:last-child:nth-child(odd),
.svc-photo-grid-4 .svc-photo-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc(50% - 0.375rem);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.svc-photo-grid-3 .svc-photo-item:last-child:nth-child(3n+1) {
  grid-column: 2 / 3;
}

/* ── Mobile: ensure no element exceeds viewport ── */
@media (max-width: 768px) {
  .svc-photo-grid-2 .svc-photo-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.375rem);
    margin-left: auto;
    margin-right: auto;
  }
  .svc-ba-badge { text-align: center; display: block; }
}

/* ══════════════════════════════════════════════════════════════
   FINAL QA v2026c — targeted production fixes
   ══════════════════════════════════════════════════════════════ */

/* ── Svc hero sections: guaranteed margin-top on all pages ── */
.svc-hero, .marina-hero, .elev-hero, .comm-hero, .gen-hero {
  margin-top: 96px;
}
@media (max-width: 768px) {
  .svc-hero, .marina-hero, .elev-hero, .comm-hero, .gen-hero { margin-top: 76px; }
}
@media (max-width: 480px) {
  .svc-hero, .marina-hero, .elev-hero, .comm-hero, .gen-hero { margin-top: 62px; }
}

/* ── Service page section rhythm ── */
.svc-section { padding: 2.6rem 0; }
@media (max-width: 768px) { .svc-section { padding: 1.8rem 0; } }
@media (max-width: 480px) { .svc-section { padding: 1.4rem 0; } }

/* ── Photo grids: all items fill container cleanly ── */
.svc-photo-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #06090f;
}
.svc-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}

/* ── svc-photo-item span: always on top with dark gradient ── */
.svc-photo-item > span {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 5 !important;
  opacity: 1 !important;
  background: linear-gradient(to top,
    rgba(2,4,10,0.98) 0%,
    rgba(2,4,10,0.88) 38%,
    rgba(2,4,10,0.32) 68%,
    transparent 100%
  ) !important;
  padding: 2.8rem 0.9rem 0.85rem !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,1), 0 2px 12px rgba(0,0,0,0.95) !important;
  pointer-events: none !important;
  letter-spacing: 0.4px !important;
  line-height: 1.4 !important;
}

/* ── Gold badge: darker gradient for readability ── */
.svc-photo-badge,
.svc-ba-pill,
.photo-card__badge {
  opacity: 1 !important;
}
.svc-photo-badge {
  background: linear-gradient(135deg,
    #3a2500 0%,
    #7a5c18 30%,
    #b89030 52%,
    #7a5c18 75%,
    #3a2500 100%
  ) !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* ── Before/After card: portrait before-card fix ── */
.svc-ba-card--before .svc-ba-card-img {
  aspect-ratio: 3 / 4 !important;
}
.svc-ba-card--before .svc-ba-card-img img {
  object-fit: cover !important;
  object-position: center top !important;
}

/* ── Elevator trust-bar responsive: horizontal not column ── */
@media (max-width: 768px) {
  .svc-trust-grid {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }
  .svc-trust-item {
    flex: 1 1 45% !important;
    min-width: 140px !important;
    padding: 0.75rem 0.8rem !important;
  }
}

/* ── Card heights on service grids — equal height rows ── */
.svc-services-grid,
.gen-services-grid,
.comm-services-grid,
.elev-services-grid {
  display: grid;
  align-items: stretch;
}
.svc-service-card,
.gen-service-card,
.comm-service-card,
.elev-service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.svc-service-card p,
.gen-service-card p,
.comm-service-card p {
  flex: 1;
}

/* ── Section head spacing ── */
.svc-section-head { margin-bottom: 1.5rem; }
.svc-section-head h2 { margin-bottom: 0.55rem; }
.svc-section-head .svc-lead { margin-top: 0.5rem; }

/* ── Svc-intro-cards: always equal height ── */
.svc-intro-cards {
  display: grid;
  align-items: stretch;
}
.svc-intro-card {
  display: flex;
  flex-direction: column;
}
.svc-intro-card p { flex: 1; }

/* ── Mobile: footer stays readable (single col handled by style.css) ── */
@media (max-width: 480px) {
  .footer-col { text-align: center; }
  .footer-contact-list li { flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; }
}

/* ── Preload hint for gallery tiles (rendering optimization) ── */
.glry-grid {
  content-visibility: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MULTI-FAMILY METER BANK PROJECT SHOWCASE  ·  services.css v2026aj
   ─────────────────────────────────────────────────────────────────────────
   All selectors prefixed .mb-  to avoid collisions with existing patterns.
   Images are all portrait 3:4 — aspect-ratio enforced on containers.
   Image quality: filter + image-rendering + GPU-layer hints on every photo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Section wrapper ─── */
.mb-showcase-section {
  background: var(--black);
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* ─── Showcase header ─── */
.mb-showcase-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 3.5rem;
}
.mb-showcase-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(198,168,90,0.1);
  border: 1px solid rgba(198,168,90,0.35);
  padding: 0.4rem 1.1rem;
  border-radius: 100px;
  margin-bottom: 1.4rem;
}
.mb-showcase-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.18;
  margin-bottom: 0.85rem;
}
.mb-showcase-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  font-style: italic;
  line-height: 1.55;
  margin-bottom: 1.6rem;
}
.mb-showcase-title-rule {
  width: 72px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--electric) 100%);
  border-radius: 2px;
  margin: 0 auto;
}

/* ─── Project description block ─── */
.mb-showcase-desc-wrap {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-lg, 12px);
  padding: 2.2rem 2.4rem;
  margin-bottom: 1rem;
}
.mb-showcase-desc-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(198,168,90,0.2), rgba(0,200,255,0.1));
  border: 1px solid rgba(198,168,90,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.25rem;
  margin-top: 0.15rem;
}
.mb-showcase-desc-text { flex: 1; }
.mb-showcase-desc-text p {
  font-family: 'Inter', sans-serif;
  font-size: 0.975rem;
  line-height: 1.78;
  color: rgba(255,255,255,0.75);
  margin: 0 0 1rem;
}
.mb-showcase-desc-text p:last-child { margin-bottom: 0; }

/* ─── Gallery section label ─── */
.mb-gallery-label { margin-bottom: 0.5rem; }
.mb-gallery-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 600;
  color: var(--white);
  margin: 0.6rem 0 0.4rem;
}
.mb-gallery-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  max-width: 680px;
  margin: 0;
}

/* ─── Gallery pills ─── */
.mb-gallery-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
}
.mb-gallery-pill--before {
  background: rgba(239,68,68,0.14);
  border: 1px solid rgba(239,68,68,0.35);
  color: #f87171;
}
.mb-gallery-pill--process {
  background: rgba(0,200,255,0.12);
  border: 1px solid rgba(0,200,255,0.3);
  color: var(--electric);
}
.mb-gallery-pill--complete {
  background: rgba(198,168,90,0.14);
  border: 1px solid rgba(198,168,90,0.35);
  color: var(--gold);
}

/* ─── Portrait photo item
   All 10 images are portrait (3:4). We enforce that ratio on the
   container so the card is NEVER taller than the photo content.
   The image fills the container perfectly — no black bars, no crop overflow. ─── */
.mb-photo-item {
  position: relative;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: #06090f;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.07);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  /* Portrait containers: height driven by width × 4/3 */
  aspect-ratio: 3 / 4;
  display: block;
  width: 100%;
}
.mb-photo-item--portrait {
  aspect-ratio: 3 / 4;
}
/* Single centered portrait — constrain max width so it doesn't stretch full container */
.mb-photo-item--center {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.mb-photo-item:hover {
  border-color: rgba(198,168,90,0.45);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  transform: translateY(-3px);
}
.mb-photo-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  filter: brightness(1.06) contrast(1.13) saturate(1.1);
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.45s ease, filter 0.45s ease;
}
.mb-photo-item:hover img {
  transform: scale(1.025) translateZ(0);
  filter: brightness(1.1) contrast(1.18) saturate(1.15);
}
/* Caption label inside photo card */
.mb-photo-item span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 100%);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 1.5rem 0.9rem 0.75rem;
  line-height: 1.4;
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
}
.mb-photo-item span i { color: var(--gold); flex-shrink: 0; font-size: 0.7rem; }

/* ─── Portrait grid layouts (replaces svc-photo-grid for portrait photos) ─── */
.mb-portrait-grid {
  display: grid;
  gap: 1.2rem;
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.mb-portrait-grid-1 { grid-template-columns: 1fr; }
.mb-portrait-grid-2 { grid-template-columns: repeat(2, 1fr); }
.mb-portrait-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ─── FPL photo wrap — constrain the portrait photo width in the spotlight ─── */
.mb-fpl-photo-wrap {
  width: 100%;
  max-width: 360px;
}

/* ─── Process spotlight: photo + callout side by side ─── */
.mb-process-spotlight {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 2.5rem;
  align-items: start;
}
.mb-process-callout {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--electric);
  border-radius: var(--radius-lg, 12px);
  padding: 2rem 2.2rem;
  align-self: center;
}
.mb-process-callout-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,200,255,0.12);
  border: 1px solid rgba(0,200,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--electric);
  font-size: 1.15rem;
  margin-bottom: 1rem;
}
.mb-process-callout h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 0.85rem;
}
.mb-process-callout > p {
  font-family: 'Inter', sans-serif;
  font-size: 0.93rem;
  line-height: 1.72;
  color: rgba(255,255,255,0.68);
  margin: 0 0 1.2rem;
}
.mb-process-callout-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.mb-process-callout-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.5;
}
.mb-process-callout-list li .fa-check-circle {
  color: var(--electric);
  font-size: 0.85rem;
  margin-top: 0.18rem;
  flex-shrink: 0;
}

/* ─── Install block separator ─── */
.mb-install-block {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 3rem;
}
.mb-install-header {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}
.mb-install-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  margin-top: -0.3rem;
  text-shadow: 0 0 30px rgba(198,168,90,0.4);
}
.mb-install-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.mb-install-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin: 0;
}

/* ─── Before/After comparison row ─── */
.mb-ba-row { }
.mb-ba-compare-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mb-ba-compare-label i { color: var(--gold); }
.mb-ba-cards {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 1.2rem;
  align-items: center;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.mb-ba-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.mb-ba-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28rem 0.8rem;
  border-radius: 100px;
  align-self: flex-start;
}
.mb-ba-pill--before {
  background: rgba(239,68,68,0.14);
  border: 1px solid rgba(239,68,68,0.35);
  color: #f87171;
}
.mb-ba-pill--after {
  background: rgba(198,168,90,0.14);
  border: 1px solid rgba(198,168,90,0.35);
  color: var(--gold);
}
.mb-ba-caption {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.55;
  margin: 0;
}
.mb-ba-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(198,168,90,0.2), rgba(0,200,255,0.1));
  border: 2px solid rgba(198,168,90,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.1rem;
  flex-shrink: 0;
  justify-self: center;
}

/* ─── Project Highlights ─── */
.mb-highlights-wrap { padding-top: 1rem; }
.mb-highlights-header { margin-bottom: 2rem; }
.mb-highlights-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.5);
  margin: 0.6rem 0 0;
  line-height: 1.6;
}
.mb-highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.mb-highlight-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid transparent;
  border-radius: var(--radius-md, 8px);
  padding: 1.6rem 1.4rem;
  transition: border-top-color 0.3s, transform 0.3s, background 0.3s;
}
.mb-highlight-card:hover {
  border-top-color: var(--gold);
  transform: translateY(-4px);
  background: rgba(255,255,255,0.055);
}
.mb-highlight-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(198,168,90,0.12);
  border: 1px solid rgba(198,168,90,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.mb-highlight-card h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 0.55rem;
  line-height: 1.3;
}
.mb-highlight-card p {
  font-family: 'Inter', sans-serif;
  font-size: 0.855rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.58);
  margin: 0;
}

/* ══════════════ RESPONSIVE ══════════════ */

/* Tablet: 1024px */
@media (max-width: 1024px) {
  .mb-highlights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mb-process-spotlight {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .mb-fpl-photo-wrap {
    max-width: 100%;
  }
  .mb-portrait-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .mb-install-number {
    font-size: 2.5rem;
  }
}

/* Mobile: 768px */
@media (max-width: 768px) {
  .mb-showcase-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .mb-showcase-desc-wrap {
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.5rem 1.4rem;
  }
  /* Portrait grids: single column on mobile */
  .mb-portrait-grid-2,
  .mb-portrait-grid-3 {
    grid-template-columns: 1fr;
  }
  /* On mobile, portrait photos use full width but cap at a
     reasonable height so you don't scroll forever on one image */
  .mb-photo-item,
  .mb-photo-item--portrait {
    aspect-ratio: 3 / 4;
    max-height: 75vw;  /* cap: never taller than 75% of viewport width */
  }
  /* Before/after: stack vertically on mobile */
  .mb-ba-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .mb-ba-arrow {
    transform: rotate(90deg);
    margin: 0 auto;
  }
  .mb-highlights-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .mb-showcase-title { font-size: 1.75rem; }
  .mb-install-header {
    flex-direction: column;
    gap: 0.75rem;
  }
  .mb-install-number {
    font-size: 2rem;
    line-height: 1;
  }
  .mb-fpl-photo-wrap {
    max-width: 100%;
  }
}

/* Small phone: 480px */
@media (max-width: 480px) {
  .mb-highlights-grid {
    grid-template-columns: 1fr;
  }
  .mb-highlight-card { padding: 1.3rem 1.2rem; }
  .mb-showcase-desc-wrap { padding: 1.2rem 1rem; }
  .mb-process-callout { padding: 1.4rem 1.2rem; }
  .mb-photo-item,
  .mb-photo-item--portrait {
    max-height: none; /* allow full portrait on small phones */
  }
}