/* ==========================================================================
   DryWorx site theme — /inc/theme.css
   Original stylesheet for dryworxwaterproofing.com.
   Written from scratch for the DryWorx static site generator.
   Loads after Bootstrap 4.6 (CDN) and styles the generated page templates
   plus the content-body class vocabulary used in data/content.csv.
   ========================================================================== */

:root {
  --dw-primary:        #c41230;   /* brand red — nav, buttons, accents     */
  --dw-primary-dark:   #a00f28;   /* hover state for primary               */
  --dw-accent:         #f4a020;   /* gold — CTAs, social hover             */
  --dw-accent-dark:    #d88c12;
  --dw-link:           #0056b3;
  --dw-link-hover:     #003d80;
  --dw-dark:           #1a1a1a;   /* header bar, footer, dark surfaces     */
  --dw-heading:        #222222;
  --dw-text:           #333333;
  --dw-text-soft:      #555555;
  --dw-card-bg:        #ffffff;
  --dw-card-tint:      #f0f4fa;   /* soft tinted card variant              */
  --dw-surface:        #f6f7f9;   /* section / accordion background        */
  --dw-line:           #e4e7ec;   /* hairline borders                      */
  --dw-radius:         8px;
  --dw-shadow:         0 2px 8px rgba(0, 0, 0, 0.1);
  --dw-font-heading:   "Barlow Condensed", "Arial Narrow", sans-serif;
  --dw-font-body:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                       "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. BASE
   The layout was built against a 10px root so Bootstrap's rem-based spacing
   utilities (mb-5, py-4, ...) land at the compact scale the pages assume.
   Body copy is restored to 16px below.
   -------------------------------------------------------------------------- */

html { font-size: 62.5%; }

body {
  font-family: var(--dw-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--dw-text);
  background: #fff;
  margin: 0;
}

body.menu-open { overflow: hidden; }

img { max-width: 100%; height: auto; min-height: 1px; }
img[data-broken="1"] { display: none !important; }

.img-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 120px; background: #e0e0e0;
  color: #fff; font-size: 42px;
}

a { color: var(--dw-link); }
a:hover { color: var(--dw-link-hover); }

input, select, textarea, button { font-size: inherit; }

address { font-style: normal; }

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY
   Headings use Barlow Condensed; the named heading classes form the scale
   the content bodies rely on.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.mega-heading, .large-heading, .medium-heading, .small-heading,
.large-title, .xs-heading, .section-heading, .common-heading,
.heading-four, .title-xs, .jobs-heading, .team-heading,
.relatedContentHeading {
  font-family: var(--dw-font-heading);
  font-weight: 700;
  color: var(--dw-heading);
  line-height: 1.15;
  margin-bottom: 12px;
}

h1, .large-title, .relatedContentHeading { font-size: 36px; }
h2, .large-heading                       { font-size: 32px; }
h3, .medium-heading, .section-heading    { font-size: 28px; }
h4, .small-heading                       { font-size: 22px; }
h5                                       { font-size: 18px; }
h6                                       { font-size: 16px; }

.mega-heading  { font-size: 45px; }
.xs-heading    { font-size: 18px; }
.heading-four  { font-size: 20px; }
.title-xs {
  font-size: 15px; text-transform: uppercase; letter-spacing: 1px;
}

/* Headings frequently wrap a link to their own page — keep them looking
   like headings, with a red hover cue. */
h1 a, h2 a, h3 a, h4 a,
.common-heading a, .medium-heading a, .large-heading a,
.small-heading a, .large-title a, .relatedContentHeading a {
  color: inherit; text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover,
.common-heading a:hover, .medium-heading a:hover, .large-heading a:hover,
.small-heading a:hover, .large-title a:hover {
  color: var(--dw-primary);
}

.lead { font-size: 18px; }

/* Legacy CMS tag that the live design never rendered */
.section-tag { display: none !important; }

/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */

.common-btn,
a.common-btn,
.btn.common-btn,
.btn.red,
.more-btn {
  display: inline-block;
  background: var(--dw-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 12px 28px;
  border: 0;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.common-btn:hover,
a.common-btn:hover,
.btn.common-btn:hover,
.btn.red:hover,
.more-btn:hover {
  background: var(--dw-primary-dark);
  color: #fff;
  text-decoration: none;
}

/* Empty decorative spans the markup carries inside buttons */
.common-btn > span:empty { display: none; }

.more-btn { font-size: 14px; padding: 8px 18px; }

.read-btn { margin-top: 10px; }

/* --------------------------------------------------------------------------
   4. HEADER — white bar: logo, free-inspection link, contact/phone stacks
   -------------------------------------------------------------------------- */

.header-area {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #fff;
}

.header-top {
  background: #fff;
  padding: 6px 0;
}
.header-top .logo img { height: 89px; width: auto; }

/* Middle column — "Request For A Free Inspection", with "Free" popped red */
.header-top .middle-text a {
  font-family: var(--dw-font-heading);
  color: var(--dw-heading);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  white-space: nowrap;
}
.header-top .middle-text a:hover { color: var(--dw-primary); }
.header-top .middle-text a span {
  font-size: 26px;
  font-weight: 700;
  color: var(--dw-primary);
}

/* Right column — dark labels over red contact/phone links */
.header-top .top-cta .cta-phone {
  font-family: var(--dw-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--dw-heading);
  line-height: 1.5;
  white-space: nowrap;
}
.header-top .top-cta .cta-phone a {
  color: var(--dw-primary);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
}
.header-top .top-cta .cta-phone a:hover { color: var(--dw-primary-dark); }
.header-top .top-cta .cta-phone.mr-5 { margin-right: 3rem; }
.header-top .top-cta .cta-phone a i.fa,
.header-top .top-cta .cta-phone a i.fas {
  font-size: 18px;
  margin-right: 5px;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   5. HAMBURGER (mobile trigger lives in the dark bar)
   -------------------------------------------------------------------------- */

.hamburger.menu-icon {
  cursor: pointer;
  padding: 8px;
  z-index: 10002;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-width: 44px;
  overflow: visible;
}
.hamburger.menu-icon, .hamburger.menu-icon * { overflow: visible !important; }
.menu-icon-in {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.menu-icon-in span {
  display: block; width: 28px; height: 3px; min-height: 3px;
  background: var(--dw-primary);
  transition: all 0.3s; border-radius: 2px;
}
.hamburger.active .menu-icon-in span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.hamburger.active .menu-icon-in span:nth-child(2) { opacity: 0; }
.hamburger.active .menu-icon-in span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* --------------------------------------------------------------------------
   6. MAIN NAV — red bar, white links, hover dropdowns
   -------------------------------------------------------------------------- */

.main-menu { background: var(--dw-primary); }
.main-menu .navbar { padding: 0; }
/* Centered as a group: bootstrap's ml-auto supplies margin-left:auto */
.main-menu .navbar-nav {
  padding-right: 0 !important;
  margin-right: auto !important;
}

.main-menu .navbar-nav > li > a {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  padding: 12px 16px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease;
}
.main-menu .navbar-nav > li > a:hover,
.main-menu .navbar-nav > li.active > a {
  color: rgba(255, 255, 255, 0.85);
}

.main-menu .hasChild { position: relative; }

/* HTML-based expand indicator for the mobile drawer (hidden on desktop) */
.main-menu .expand-icon {
  position: absolute;
  right: 18px; top: 12px;
  width: 28px; height: 28px;
  line-height: 26px; text-align: center;
  font-size: 22px; font-weight: 400;
  color: var(--dw-primary);
  border: 1px solid #eef0f4; border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  z-index: 2;
  display: none;
  user-select: none;
}
.main-menu .dropdown-submenu > .expand-icon { top: 8px; }

/* Desktop: hover dropdowns, three levels, our own single caret */
@media (min-width: 992px) {
  .main-menu .dropdown,
  .main-menu .dropdown-submenu { position: relative !important; }

  /* Caret sits inline, right of the label, on the same line */
  .main-menu .navbar-nav > li.hasChild > a::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    vertical-align: 2px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
  }

  .main-menu .dropdown > .dropdown-menu,
  .main-menu .dropdown-submenu > .dropdown-menu {
    display: none !important; position: absolute !important;
    visibility: hidden; opacity: 0;
    min-width: 240px !important; width: max-content !important;
    margin: 0; padding: 0;
    background: #fff !important; border: 1px solid #ddd !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 2px; list-style: none;
  }
  /* Flush under the nav item — no gap */
  .main-menu .dropdown > .dropdown-menu {
    top: 100% !important; left: 0 !important; z-index: 1000;
  }
  .main-menu .dropdown:hover > .dropdown-menu {
    display: block !important;
    visibility: visible !important; opacity: 1 !important;
  }

  .main-menu .dropdown-menu li { list-style: none; position: relative; }
  .main-menu .dropdown-menu li + li { border-top: 1px solid #eee; }
  .main-menu .dropdown-menu li a {
    display: block; padding: 10px 16px; color: #333;
    text-decoration: none; font-size: 15px; white-space: nowrap;
  }
  .main-menu .dropdown-menu li a:hover { background: #f5f5f5; color: var(--dw-primary); }

  /* Level 3 flyout — opens to the right of its parent item */
  .main-menu .dropdown-submenu > a { padding-right: 32px; }
  .main-menu .dropdown-submenu > a::after {
    content: "";
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #999;
  }
  .main-menu .dropdown-submenu > .dropdown-menu {
    top: -1px !important; left: 100% !important; z-index: 1001;
  }
  .main-menu .dropdown-submenu:hover > .dropdown-menu {
    display: block !important;
    visibility: visible !important; opacity: 1 !important;
  }
}

/* Sticky mobile call bar — two-button (Call · Free Inspection), phones only.
   Hidden on desktop; the dark/red split bar pins to the bottom of the viewport. */
.fixed-contact { display: none; }
@media (max-width: 767px) {
  .fixed-contact {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9998;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
  }
  .fixed-contact .fc-btn {
    flex: 1 1 50%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 8px;
    font-family: var(--dw-font-heading);
    font-size: 16px; font-weight: 700; letter-spacing: 0.3px;
    color: #fff; text-decoration: none;
    min-height: 52px;
  }
  .fixed-contact .fc-call  { background: var(--dw-dark); }
  .fixed-contact .fc-quote { background: var(--dw-primary); }
  .fixed-contact .fc-btn i { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   7. HERO — full-width background video with overlay and centered text
   -------------------------------------------------------------------------- */

.main-slider-video {
  position: relative; overflow: hidden; min-height: 420px;
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: 0; padding-right: 0;
}
.main-slider-video .video-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
}
.main-slider-video .video-bg video { width: 100%; height: 100%; object-fit: cover; }
.main-slider-video > .container { position: relative; z-index: 2; }
.main-slider-video .slide-text { padding: 60px 0; text-align: center; }
/* The video stays at natural brightness; a contained panel carries the text */
.main-slider-video .slider-text {
  background: rgba(0, 0, 0, 0.55);
  padding: 36px 40px;
}
.main-slider-video .mega-heading {
  color: #fff; font-size: 45px; font-weight: 700; margin-bottom: 10px;
}
.main-slider-video .small-heading {
  color: var(--dw-primary); font-size: 20px; margin-bottom: 12px;
  text-align: center; letter-spacing: 0.5px; line-height: normal;
}
.main-slider-video p { color: rgba(255, 255, 255, 0.85); font-size: 16px; }

/* The text wrapper must never block taps outside the CTA (iOS) */
.main-slider-video .slide-content { pointer-events: none; }
.main-slider-video .slide-content a,
.main-slider-video .slide-content .common-btn { pointer-events: auto; }

/* --------------------------------------------------------------------------
   8. BREADCRUMB BAND (inner pages without a hero)
   -------------------------------------------------------------------------- */

.inner-no-banner {
  background: #eef0f3;
  border-bottom: 1px solid var(--dw-line);
}
.inner-no-banner .breadcrumb {
  background: transparent;
  margin: 0;
  padding: 13px 0;
  font-size: 14px;
}
.inner-no-banner .breadcrumb ul {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.inner-no-banner .breadcrumb li + li::before {
  content: "/";
  color: #9aa0a8;
  margin: 0 8px;
}
.inner-no-banner .breadcrumb li a {
  color: var(--dw-link); text-decoration: none;
}
.inner-no-banner .breadcrumb li a:hover { text-decoration: underline; }
.inner-no-banner .breadcrumb li.active em {
  font-style: normal; color: var(--dw-text-soft);
}

/* --------------------------------------------------------------------------
   9. SECTIONS — shared rhythm
   -------------------------------------------------------------------------- */

.common-sec,
.secPadding { padding-top: 50px; padding-bottom: 50px; }
.common-sec .secPadding { padding: 0; }

.secPaddingBottomReduce,
.contentContentBottomReduce { padding-bottom: 15px; }

.area-padding-60 { padding-top: 30px; padding-bottom: 30px; }
.py-100 { padding-top: 100px; padding-bottom: 100px; }

/* --------------------------------------------------------------------------
   10. IMAGES INSIDE CONTENT
   -------------------------------------------------------------------------- */

.img-box { text-align: center; margin-bottom: 10px; }
.img-box img { max-width: 100%; height: auto; }
.common-box > .img-box { margin-bottom: 0; }
.common-box > .img-box img { width: 100%; display: block; }

/* Icon artwork is SVG — keep it at badge size, not photo size */
.img-box img[src$=".svg"],
.img-box img[data-src$=".svg"] {
  width: auto;
  max-width: 72px;
  max-height: 72px;
  margin-top: 24px;
}

@media (min-width: 992px) {
  .img-box-float-lg-right {
    float: right;
    max-width: 48%;
    margin: 0 0 15px 20px;
  }
}

.mapImage img { width: 100%; height: auto; border-radius: var(--dw-radius); }

.thumb { max-width: 100%; }

/* --------------------------------------------------------------------------
   11. CARDS
   -------------------------------------------------------------------------- */

.common-box {
  background: var(--dw-card-bg);
  border-radius: var(--dw-radius);
  box-shadow: var(--dw-shadow);
  height: 100%;
  overflow: hidden;
}

.common-box--primary,
.site-primary--bg {
  background: var(--dw-card-tint);
  border-radius: var(--dw-radius);
  height: 100%;
}

/* Horizontal split card (image | text) on large screens */
@media (min-width: 992px) {
  .common-box--lg-hz { display: grid; grid-template-columns: 2fr 3fr; }
  .common-box--lg-hz > .img-box { height: 100%; overflow: hidden; }
  .common-box--lg-hz > .img-box img { height: 100%; object-fit: cover; }
}

/* Feature card with image, floating icon badge, and copy */
.custom-card-wrap {
  background: var(--dw-card-tint);
  border-radius: var(--dw-radius);
  box-shadow: var(--dw-shadow);
  height: 100%;
}
.custom-img-wrapper { position: relative; max-width: 100%; }
.custom-img {
  width: 100%; height: auto; display: block;
  border-radius: var(--dw-radius);
}
.custom-icon-badge {
  position: absolute;
  left: 16px; bottom: -14px;
  width: 52px; height: 52px;
  background: var(--dw-primary);
  border-radius: 6px;
  box-shadow: var(--dw-shadow);
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
}
.custom-icon-badge img { max-width: 100%; max-height: 100%; }

/* Stacked icon + copy rows in a single panel */
.card-13 {
  background: var(--dw-card-bg);
  border-radius: var(--dw-radius);
  box-shadow: var(--dw-shadow);
  overflow: hidden;
}
.card-13-body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 24px;
}
.card-13-body + .card-13-body { border-top: 1px solid #eee; }
.card-13-body .icon { flex: 0 0 56px; }
.card-13-body .icon img { width: 56px; height: 56px; }
.card-13-body .content { flex: 1; }
.card-13-active { background: #fdf3f5; box-shadow: inset 3px 0 0 var(--dw-primary); }
.card-13 .card-link { text-decoration: underline; }

/* Image-led link cards (two naming generations exist in the content) */
.card-16 { height: 100%; }
.card-16__wrapper {
  display: block;
  background: var(--dw-card-bg);
  border-radius: var(--dw-radius);
  box-shadow: var(--dw-shadow);
  overflow: hidden;
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-16__wrapper:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
}
.card-16__thumb img,
.card-16-thumb img {
  width: 100%; height: 170px; object-fit: cover; display: block;
}
.card-16__title,
.card-16-title {
  font-size: 18px;
  text-align: center;
  padding: 14px 16px;
  margin: 0;
}
.card-16-body { padding: 0 16px 16px; }

/* Thumb + title + body link cards */
.card--17-22 {
  background: var(--dw-card-bg);
  border: 1px solid var(--dw-line);
  border-radius: var(--dw-radius);
  overflow: hidden;
  height: 100%;
  text-align: center;
}
.card--17-22__start {
  display: block; color: inherit; text-decoration: none;
}
.card--17-22__start:hover { color: var(--dw-primary); text-decoration: none; }
.card--17-22 .thumb {
  width: 100%; height: 180px; object-fit: cover; display: block;
}
.card--17-22__title {
  display: block;
  font-family: var(--dw-font-heading);
  font-size: 19px;
  font-weight: 700;
  padding: 14px 16px 0;
}
.card--17-22__body {
  padding: 8px 18px 20px;
  font-size: 15px;
  color: var(--dw-text-soft);
  margin: 0;
}

/* Responsive 3 / 2 / 1 card row */
.item-3-2-1 { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.item-3-2-1 > div {
  flex: 0 0 100%; max-width: 100%;
  padding: 0 15px; margin-bottom: 30px;
}
@media (min-width: 768px) {
  .item-3-2-1 > div { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 992px) {
  .item-3-2-1 > div { flex: 0 0 33.3333%; max-width: 33.3333%; }
}
.awardCard { width: 100%; }

/* Multi-column text/list helpers */
.count-2 { column-count: 2; column-gap: 30px; }
@media (min-width: 768px) {
  .count-md-2 { column-count: 2; column-gap: 30px; }
}
@media (min-width: 992px) {
  .count-lg-2 { column-count: 2; column-gap: 30px; }
  .count-lg-3 { column-count: 3; column-gap: 30px; }
}

/* Related-content tiles (awards, article cross-links) */
.custom-row { display: flex; flex-wrap: wrap; margin: 0 -15px; width: 100%; }
.relatedContentCard {
  background: var(--dw-card-bg);
  border: 1px solid var(--dw-line);
  border-radius: var(--dw-radius);
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.relatedContentCard:hover {
  border-color: var(--dw-primary);
  box-shadow: var(--dw-shadow);
}
.relatedContentThumbnail { padding: 18px; text-align: center; }
.relatedContentThumbnail img {
  max-height: 140px; width: auto; max-width: 100%;
}
.relatedContent { padding: 0 18px 18px; }
.relatedContentTitle a {
  font-family: var(--dw-font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--dw-heading);
  text-decoration: none;
}
.relatedContentTitle a:hover { color: var(--dw-primary); }
.relatedContentDesc { font-size: 14px; color: var(--dw-text-soft); }

/* Blog index cards */
.list-card {
  background: var(--dw-card-bg);
  border-radius: var(--dw-radius);
  box-shadow: var(--dw-shadow);
  overflow: hidden;
  margin-bottom: 25px;
}
.list-card .list-thumb {
  position: relative; height: 200px; margin: 0;
}
.list-card .photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.list-card .photo-link { position: absolute; inset: 0; z-index: 1; }
.list-card .list-description { padding: 20px 22px; }
.list-card .list-text { font-size: 15px; color: var(--dw-text-soft); }

/* Review-site badge tiles on the write-a-review page */
.write-a-review-box {
  background: var(--dw-card-bg);
  border-radius: var(--dw-radius);
  box-shadow: var(--dw-shadow);
  height: 100%;
}
.write-a-review-box a {
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; padding: 15px;
}

/* City link cards on the service-area hub */
.city-card {
  border: 1px solid #e0e0e0; border-radius: var(--dw-radius);
  padding: 14px 16px;
  text-decoration: none; display: block; color: #333;
  transition: all 0.2s; font-size: 15px;
  margin-bottom: 16px;
}
.city-card:hover {
  border-color: var(--dw-primary);
  box-shadow: 0 4px 12px rgba(196, 18, 48, 0.15);
  color: var(--dw-primary); transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   12. LISTS, CHECKS, STEPS, FAQ
   -------------------------------------------------------------------------- */

.check-mark,
.check-square {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.check-mark > li,
.check-square > li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
}
.check-mark > li::before,
.check-square > li::before {
  content: "\2713";
  position: absolute;
  left: 0; top: 0;
  color: var(--dw-primary);
  font-weight: 700;
}

/* Vertical numbered process timeline */
.steps-flow { position: relative; padding-left: 30px; }
.steps-flow::before {
  content: "";
  position: absolute;
  top: 6px; bottom: 6px; left: 5px;
  width: 2px;
  background: var(--dw-line);
}
.steps-flow .step { position: relative; margin-bottom: 26px; }
.steps-flow .step:last-child { margin-bottom: 0; }
.steps-flow .step::before {
  content: "";
  position: absolute;
  left: -30px; top: 5px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--dw-primary);
}
.steps-flow .step > span {
  display: inline-block;
  background: var(--dw-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
  padding: 2px 10px;
  margin-bottom: 8px;
}
.steps-flow .step .title {
  font-family: var(--dw-font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--dw-heading);
  margin-bottom: 4px;
}

/* Standalone step label between content blocks */
.step-box {
  display: inline-block;
  background: var(--dw-primary);
  color: #fff;
  font-family: var(--dw-font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 6px 16px;
  border-radius: 4px;
  margin: 12px 0 4px;
}

/* FAQ / details accordions (native <details>) */
.faq-block details,
.details-block details {
  background: var(--dw-surface);
  border: 1px solid var(--dw-line);
  border-radius: var(--dw-radius);
}
.faq-block details + details,
.details-block details + details { margin-top: 12px; }
.faq-block summary,
.details-block summary {
  padding: 14px 18px;
  font-family: var(--dw-font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--dw-heading);
  cursor: pointer;
}
.faq-block summary:hover,
.details-block summary:hover { color: var(--dw-primary); }
.faq-block .expand,
.details-block .expand {
  margin: 0 18px 16px;
  padding-left: 15px;
  border-left: 3px solid var(--dw-primary);
  font-size: 15px;
  color: var(--dw-text-soft);
}

/* --------------------------------------------------------------------------
   13. WHY-CHOOSE — photo background, dark overlay, white intro text
   -------------------------------------------------------------------------- */

.why-choose-sec { position: relative; overflow: hidden; }
.why-choose-sec .bg-image {
  position: absolute; inset: 0; z-index: 0;
}
.why-choose-sec .bg-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.why-choose-sec .bg-image::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(20, 20, 20, 0.72);
}
.why-choose-sec > .container { position: relative; z-index: 1; }
.why-choose-sec > .container > .common-heading,
.why-choose-sec > .container > p { color: #fff; }

/* Icon-left cards inside the section stay light for legibility */
.why-choose-sec .common-box {
  display: flex;
  align-items: center;
  text-align: left;
}
.why-choose-sec .common-box > .img-box {
  flex: 0 0 110px;
  padding: 16px;
}
.why-choose-sec .common-box > .img-box img[src$=".svg"],
.why-choose-sec .common-box > .img-box img[data-src$=".svg"] { margin-top: 0; }

/* Generic photo-band fallback for any other bg-image use */
.bg-image img { max-width: 100%; }

/* --------------------------------------------------------------------------
   14. VIDEO EMBED
   -------------------------------------------------------------------------- */

.video-box { position: relative; display: block; }
.video-box img { width: 100%; display: block; border-radius: var(--dw-radius); }
.video-btn-round {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(196, 18, 48, 0.92);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.video-btn-round::before {
  content: "";
  margin-left: 6px;
  border-left: 22px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}
.video-btn-round:hover {
  background: var(--dw-primary-dark);
  transform: translate(-50%, -50%) scale(1.08);
}

/* --------------------------------------------------------------------------
   15. REVIEWS — featured band, cards, stars, detail page
   -------------------------------------------------------------------------- */

.reviewSection { background: #f4f5f7; }
.reviewSection .title-part span {
  display: inline-block;
  color: var(--dw-primary);
  font-family: var(--dw-font-heading);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.reviewSection .btn-home { margin-top: 30px; }

/* Staggered two-column layout for the featured band */
@media (min-width: 992px) {
  .review-body-box.top { transform: translateY(-40px); }
  .review-body-box.bottom { transform: translateY(40px); }
}

.review-content {
  background: var(--dw-card-bg);
  border-radius: var(--dw-radius);
  box-shadow: var(--dw-shadow);
  padding: 24px;
}
.review-content p { font-size: 15px; color: var(--dw-text); }
.review-star i { color: var(--dw-accent); font-size: 15px; }
.review-img img { width: 30px; height: 30px; }
.review-info a {
  color: var(--dw-heading);
  font-weight: 700;
  text-decoration: none;
}
.review-info a:hover { color: var(--dw-primary); }

/* Review source icons rendered as Font Awesome glyphs */
.review-source-icon { font-size: 28px; vertical-align: middle; }
.review-source-icon.fa-facebook { color: #1877f2; }

/* Five-star widget (review detail page) */
.starRatings {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: #eeeeee;
  overflow: hidden;
}
.emptyStars::before,
.fullStars::before {
  content: "★★★★★";
  font-size: 24pt;
}
.emptyStars::before { -webkit-text-stroke: 1px #848484; }
.fullStars::before { -webkit-text-stroke: 1px orange; }
.fullStars {
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #f7da10;
}
@-moz-document url-prefix() {
  .fullStars { color: #ecbe24; }
}

.review-details ul.dvReviewsData {
  list-style-type: none;
  background-color: #ffffff;
  box-shadow: 0 9px 35px 0 rgba(26, 47, 106, 0.07);
  margin-bottom: 20px;
  padding: 10px 20px;
  border: 1px solid #f3f3f3;
}
.review-details ul.reviewby {
  list-style-type: none;
  padding: 0;
  margin: 0 0 20px 0;
}

/* --------------------------------------------------------------------------
   16. JOBS (completed projects)
   -------------------------------------------------------------------------- */

.jobs-hero { padding: 50px 0 30px; background: #f8f9fa; }
.jobs-heading { font-size: 36px; margin-bottom: 10px; }
.jobs-lead { color: var(--dw-text-soft); font-size: 16px; max-width: 820px; }
.jobs-section { padding: 40px 0 60px; }
.jobs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 991px) { .jobs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .jobs-grid { grid-template-columns: 1fr; } }

.job-card {
  background: #fff; border: 1px solid #e6e6e6; border-radius: var(--dw-radius);
  overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  display: flex; flex-direction: column;
}
.job-media { width: 100%; aspect-ratio: 4 / 3; background: #eef0f2; overflow: hidden; }
.job-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.job-media-placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--dw-primary); font-size: 48px;
}
.job-body { padding: 18px 20px; }
.job-title { font-size: 18px; margin: 0 0 8px; }
.job-meta {
  font-size: 13px; color: var(--dw-text-soft); margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px;
}
.job-meta i { color: var(--dw-primary); width: 14px; text-align: center; }
.job-summary { font-size: 14px; color: #444; line-height: 1.5; margin: 10px 0 0; }

.badge-veteran {
  background: var(--dw-primary); color: #fff; padding: 4px 12px;
  border-radius: 20px; font-size: 12px; font-weight: 600;
}

/* --------------------------------------------------------------------------
   17. TEAM
   -------------------------------------------------------------------------- */

.team-hero { padding: 50px 0 30px; background: #f8f9fa; }
.team-heading { font-size: 36px; margin-bottom: 10px; }
.team-lead { color: var(--dw-text-soft); font-size: 16px; }
.team-section { padding: 40px 0 60px; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 991px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; } }

.team-card {
  background: #fff; border: 1px solid #e6e6e6; border-radius: var(--dw-radius);
  overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  text-align: center;
}
.team-photo { width: 100%; aspect-ratio: 1 / 1; background: #eef0f2; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 72px; color: #fff; background: #e0e0e0;
}
.team-photo-placeholder i { color: #fff; }
/* Headshots aren't in yet (see TODO(jason-photos) in build_team_page): hide the
   empty placeholder box on mobile so the team reads as a clean name/title list.
   Placed after the base rule so it wins on source order. Real photos
   (.team-photo carrying an <img>) are unaffected and still show. */
@media (max-width: 767px) { .team-photo-placeholder { display: none; } }
.team-card-body { padding: 16px 12px 20px; }
.team-name { font-size: 16px; font-weight: 700; color: var(--dw-heading); }
.team-title {
  font-size: 13px; color: #6b7280; margin-top: 4px;
  text-transform: uppercase; letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   18. SERVICE AREA — map band + city columns
   -------------------------------------------------------------------------- */

.service-map-section { padding: 40px 0; background: #fff; }
.service-map-head { text-align: center; margin-bottom: 24px; }
.service-map-heading { font-size: 30px; margin-bottom: 8px; }
.service-map-lead { color: var(--dw-text-soft); font-size: 16px; }
.service-map-frame {
  position: relative; width: 100%; height: 400px;
  border-radius: var(--dw-radius); overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.service-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 767px) {
  .service-map-frame { height: 320px; }
  .service-map-heading { font-size: 24px; }
}

.dvService-area {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: var(--dw-radius);
  padding: 16px 20px;
}
ul.cities {
  list-style: none;
  margin: 0; padding: 0;
  column-count: 2;
  column-gap: 24px;
}
ul.cities li { margin: 6px 0; break-inside: avoid; }
ul.cities li a { color: var(--dw-link); text-decoration: none; font-size: 15px; }
ul.cities li a:hover { color: var(--dw-link-hover); text-decoration: underline; }

/* Bottom service-area band — text/chip layout (replaces the old static map) */
.service-area-bottom .sa-band { max-width: 900px; margin: 0 auto; }
.service-area-bottom .sa-intro {
  color: var(--dw-text-soft);
  max-width: 640px;
  margin: 0 auto 22px;
}
.city-chips {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.city-chips li { margin: 0; break-inside: avoid; }
.city-chips li a {
  display: inline-block;
  padding: 7px 16px;
  background: var(--dw-surface);
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  color: var(--dw-link);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.3;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.city-chips li a:hover,
.city-chips li a:focus {
  background: var(--dw-primary);
  border-color: var(--dw-primary);
  color: #fff;
}
.service-area-bottom .sa-cta { margin-top: 4px; }

/* --------------------------------------------------------------------------
   19. AWARDS STRIP
   -------------------------------------------------------------------------- */

.awards-sec .medium-heading a { color: var(--dw-link); }
.awards-sec .medium-heading a:hover { color: var(--dw-link-hover); }

.awards-sec .grid {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: stretch;
  gap: 24px;
}
.awards-sec .grid > a { display: block; text-decoration: none; }
.awards-sec .common-box { padding: 18px 28px; }
.awards-sec .img-box { margin: 0; }
.awards-sec .img-box img {
  width: auto; max-height: 80px; max-width: 160px; display: inline-block;
}

/* --------------------------------------------------------------------------
   20. CTA BANNER (above the footer)
   -------------------------------------------------------------------------- */

.cta {
  background: var(--dw-dark);
  min-height: 390px;
  display: flex;
  align-items: center;
  padding: 50px 0;
}
.cta > .container { width: 100%; }
.cta.pattern-bg {
  background-image: url("/images/assets/background/cta-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;   /* parallax: photo holds while page scrolls */
}
/* Fixed backgrounds are broken on iOS/touch devices */
@media (hover: none), (pointer: coarse) {
  .cta.pattern-bg { background-attachment: scroll; }
}
.cta .large-heading {
  color: #fff;
  font-size: 42px;
  text-align: left;
}
.cta .cta-div { display: flex; flex-wrap: wrap; gap: 14px; }

/* White pill buttons with red icon + red bold label */
.cta .common-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--dw-primary);
  font-weight: 700;
  border-radius: 50px;
  padding: 12px 26px;
}
.cta .common-btn:hover {
  background: #f3f3f3;
  color: var(--dw-primary-dark);
}
.cta .cta-contact.common-btn { padding: 8px 26px 8px 8px; }
.cta .cta-contact i {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--dw-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.cta .cta-phone i { color: var(--dw-primary); font-size: 18px; }

.cta-logo { text-align: center; }
.cta-logo img { width: 100%; max-width: 350px; height: auto; }

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */

.footer { font-size: 15px; }
.footer-upper {
  background: #fff;
  color: var(--dw-text);
  border-top: 3px solid var(--dw-primary);
  padding: 50px 0 40px;
}
.footer-upper a {
  color: var(--dw-text);
  text-decoration: underline;
}
.footer-upper a:hover { color: var(--dw-primary); }
.footer-upper .links-widget i { color: var(--dw-primary); }
.footer-widget .widget-title {
  font-family: var(--dw-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--dw-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.footer-widget.footer-logo { text-align: center; }
.footer-logo a { text-decoration: none; }
.footer-logo img { max-width: 230px; height: auto; }
.footer-widget address { margin-bottom: 10px; }

/* Brand-colored icons in white squares with a hairline border */
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 20px;
  margin-right: 10px;
  text-decoration: none;
  transition: all 0.3s;
}
.footer-social a:hover {
  border-color: var(--dw-primary);
  box-shadow: var(--dw-shadow);
}
.footer-social .fa-facebook-f { color: #1877f2; }
.footer-social img { width: 22px; height: 22px; }

.footer-bottom {
  background: #f8f9fa;
  color: #777;
  border-top: 1px solid #e9ecef;
  padding: 24px 0;
  font-size: 14px;
}
.footer-bottom a { color: var(--dw-primary); text-decoration: none; }
.footer-bottom a:hover { color: var(--dw-primary-dark); text-decoration: underline; }
.footer-copyright { margin-top: 6px; color: #777; }

/* --------------------------------------------------------------------------
   22. HOURS & LOCATION
   -------------------------------------------------------------------------- */

.hours-location-table-wrapper {
  width: 100%;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: var(--dw-radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.hours-location-table {
  width: 100%;
  font-size: 15px;
  border-collapse: collapse;
  margin: 0;
}
table.hours-location-table th {
  background: var(--dw-dark);
  color: #fff;
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
}
table.hours-location-table td {
  padding: 12px 16px;
  border-top: 1px solid #eee;
}
.closing-time, .opening-time { white-space: nowrap; }
.closed { color: var(--dw-primary); font-weight: 600; }

.hours-location-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: var(--dw-radius);
  padding: 20px;
  height: 100%;
}
.hours-location-name {
  font-family: var(--dw-font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--dw-heading);
  margin-bottom: 6px;
}
.hours-location-link { color: var(--dw-link); }

/* --------------------------------------------------------------------------
   23. MOBILE — tablets and below
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .header-top .logo img { height: 52px; width: auto; max-width: none; }
  .header-area { min-height: 72px; }
  .main-slider-video .mega-heading { font-size: 30px !important; }
  .main-slider-video .small-heading { font-size: 14px !important; font-weight: 700 !important; }

  /* Slide-out drawer below the fixed header */
  .main-menu {
    position: fixed !important;
    top: 135px !important; left: 0 !important; right: auto !important;
    width: 300px; max-width: 85vw; height: calc(100vh - 135px);
    background: #fff !important;
    z-index: 10001;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.15);
    padding: 12px 0 24px;
    display: block !important;
  }
  .main-menu.mobile-open { transform: translateX(0); }
  .main-menu .container,
  .main-menu .row,
  .main-menu .col { padding: 0 !important; margin: 0 !important; max-width: none !important; flex: 1 1 100%; }
  .main-menu .navbar-collapse { display: block !important; padding: 0 !important; }
  .main-menu .custom-menu .navbar { padding: 0 !important; }
  .main-menu .navbar-nav {
    flex-direction: column !important; padding: 0; margin: 0; width: 100%;
  }
  .main-menu .navbar-nav > li {
    border-bottom: 1px solid #eef0f4;
    position: relative;
  }
  .main-menu .navbar-nav > li > a {
    display: block !important; padding: 14px 48px 14px 20px !important;
    color: #343a40 !important; font-size: 15px !important;
    font-weight: 600 !important; text-decoration: none !important;
    background: transparent !important;
  }
  .main-menu .navbar-nav > li.active > a,
  .main-menu .navbar-nav > li > a:hover { color: var(--dw-primary) !important; }

  /* The drawer uses the HTML .expand-icon instead of CSS carets */
  .main-menu .hasChild > a::after,
  .main-menu .dropdown > a::after,
  .main-menu .dropdown-submenu > a::after {
    display: none !important;
    content: none !important;
  }
  .main-menu .expand-icon { display: block; }

  /* Level 2 & 3 submenus — accordion */
  .main-menu .dropdown-menu {
    position: static !important; display: none !important;
    float: none !important; background: #f7f8fa !important;
    border: 0 !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important;
    border-radius: 0 !important; min-width: 100% !important;
    width: 100% !important; list-style: none;
  }
  .main-menu .hasChild.open > .dropdown-menu { display: block !important; }
  .main-menu .dropdown-menu li {
    border-top: 1px solid #eef0f4; position: relative;
  }
  .main-menu .dropdown-menu li a {
    padding: 12px 48px 12px 36px !important; font-size: 14px !important;
    color: #343a40 !important; display: block !important;
    text-decoration: none !important; font-weight: 500 !important;
  }
  .main-menu .dropdown-menu li a:hover { color: var(--dw-primary) !important; }
  .main-menu .dropdown-submenu > .dropdown-menu { background: #eef0f4 !important; }
  .main-menu .dropdown-submenu > .dropdown-menu li a {
    padding-left: 52px !important; font-size: 13px !important;
  }

  /* Dark page overlay behind the drawer */
  .nav-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5);
    z-index: 10000; opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .nav-overlay.active { opacity: 1; pointer-events: auto; }

  body { padding-bottom: 0 !important; }
}

@media (min-width: 992px) {
  .nav-overlay { display: none; }
}

/* --------------------------------------------------------------------------
   24. MOBILE — phones
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .header-area { min-height: 126px; }
  .header-top .logo img { height: 52px; width: auto; max-width: none; }

  /* Top-bar text shrinks aggressively to keep one compact block */
  .header-top .middle-text { text-align: center !important; }
  .header-top .middle-text a { font-size: 12px !important; line-height: 1.2 !important; }
  .header-top .middle-text a span { font-size: 14px !important; }
  .header-top .top-cta .cta-phone { font-size: 10px !important; line-height: 1.3 !important; }
  .header-top .top-cta .cta-phone a { font-size: 12px !important; line-height: 1.3 !important; }
  .header-top .top-cta .cta-phone a i.fa,
  .header-top .top-cta .cta-phone a i.fas {
    font-size: 11px !important; margin-right: 3px !important;
  }
  .header-top .top-cta .cta-phone.mr-5 { margin-right: 1rem !important; }

  .main-slider-video { min-height: 280px; }
  .main-slider-video .mega-heading {
    font-size: 25px !important; font-weight: 700 !important; line-height: normal !important;
  }
  .main-slider-video p { font-size: 13px !important; }
  .slide-text { padding: 20px 0 !important; }
  .main-slider-video .slider-text { padding: 20px 16px; }

  .common-btn, .btn.common-btn {
    font-size: 14px;
    padding: 10px 20px;
  }
  .btn.red { font-size: 13px !important; }

  .py-100 { padding-top: 50px; padding-bottom: 50px; }

  .cta.pattern-bg {
    background-image: url("/images/assets/background/cta-bg-sm.jpg");
    background-attachment: scroll;
  }
  .cta { min-height: 0; }
  .cta .large-heading {
    font-size: 30px !important; margin-bottom: 0 !important;
    text-align: center;
  }
  .cta .cta-div { flex-direction: column; gap: 10px; }
  .cta .cta-div a { justify-content: center; width: 100%; }

  .footer .row > div { margin-bottom: 20px; }
  .footer-logo img { width: auto; max-height: 60px; }

  .common-box, .site-primary--bg { margin-bottom: 0 !important; }
  img[src$=".svg"] { max-width: 50px !important; max-height: 50px !important; }

  .count-2 { column-count: 1; }

  /* Reserve space for the sticky mobile call bar (overrides the 991px reset) */
  body { padding-bottom: 56px !important; }
}

/* --------------------------------------------------------------------------
   25. MOBILE — small phones
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  .header-top .logo img { height: 52px; width: auto; max-width: none; }
  .main-slider-video .mega-heading { font-size: 25px !important; }
}

@media (max-width: 360px) {
  .header-top .top-cta { display: none !important; }
  .header-top .middle-text {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center !important;
    margin-top: 4px;
  }
}

/* ==========================================================================
   26. HOMEPAGE COMPONENTS
   Conversion-focused homepage redesign: symptom hero + lead form, badge strip,
   scroll-snap carousels (problem-signs / services / case-studies / reviews),
   stats band, lazy time-lapse feature, process steps, FAQ, service area, and a
   final CTA. Only affects the homepage markup — interior pages are untouched.
   ========================================================================== */

/* -- shared section + carousel scaffolding -------------------------------- */
.home-sec { padding: 56px 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--dw-font-heading);
  font-size: 14px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--dw-accent-dark);
  margin-bottom: 8px;
}
.sec-title { font-size: 36px; font-weight: 700; line-height: 1.15; margin: 0 0 10px; }
.sec-sub { color: var(--dw-text); font-size: 18px; font-weight: 500; line-height: 1.5; margin: 0; }

.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 26px;
}
.sec-head-text { max-width: 720px; }
.sec-foot { text-align: center; margin-top: 30px; }

.carousel-nav { display: flex; gap: 10px; flex: 0 0 auto; }
.carousel-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--dw-line); background: #fff;
  color: var(--dw-primary); font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s ease;
}
.carousel-arrow:hover:not(:disabled) {
  background: var(--dw-primary); color: #fff; border-color: var(--dw-primary);
}
.carousel-arrow:disabled { opacity: 0.35; cursor: default; }

.carousel { position: relative; }
.carousel-track {
  display: flex; gap: 20px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 2px 12px;
  scroll-padding-left: 2px;
}
.carousel-track::-webkit-scrollbar { display: none; }

.snap-card {
  flex: 0 0 330px; max-width: 85vw;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--dw-line);
  border-radius: var(--dw-radius);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  display: flex; flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.snap-card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12); }

.card-media { position: relative; aspect-ratio: 4 / 3; background: #eef0f2; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title { font-size: 20px; margin: 0; }
.card-body > p { font-size: 14.5px; color: var(--dw-text-soft); margin: 0; line-height: 1.55; }
.card-more {
  margin-top: auto; padding-top: 6px;
  font-family: var(--dw-font-heading); font-weight: 700;
  color: var(--dw-primary); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.card-more i { transition: transform 0.2s ease; }

/* Brand-grey photo placeholder (names the shot that belongs here) */
.ph-media {
  width: 100%; aspect-ratio: var(--ratio, 4 / 3);
  background:
    repeating-linear-gradient(45deg, #e7eaee 0 12px, #e1e5ea 12px 24px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px; text-align: center; color: #8a929c;
}
.ph-media i { font-size: 26px; opacity: 0.55; }
.ph-media span {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; line-height: 1.3;
}
/* Warning-sign cards without a real photo (see TODO(jason-photos) in
   build_home_problem_signs): the labelled placeholder stays on desktop but is
   hidden on mobile so those cards read as clean text with no weak grey tile.
   Cards WITH a real photo (.card-media without .card-media-ph) are unaffected. */
@media (max-width: 767px) {
  .card-media-ph { display: none; }
}

/* -- hero ----------------------------------------------------------------- */
.home-hero {
  position: relative;
  background:
    linear-gradient(rgba(16, 16, 19, 0.88), rgba(16, 16, 19, 0.70)),
    var(--hero-img, none) center / cover no-repeat,
    var(--dw-dark);
  color: #fff;
  padding: 66px 0 74px;
}
.home-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.home-hero-copy { max-width: 940px; margin: 0 auto; text-align: center; }
.home-hero .eyebrow { color: var(--dw-accent); }
.home-hero-title { color: #fff; font-size: 50px; line-height: 1.05; margin: 0 0 16px; }
.home-hero-sub { color: rgba(255, 255, 255, 0.85); font-size: 18px; max-width: 720px; margin: 0 auto 22px; }
.hero-trust {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px;
}
.hero-trust li {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; color: #fff;
}
.hero-trust li i { color: var(--dw-accent); }

/* ── Homepage hero split (Phase 2): headline left, Jobber intake form right ──
   The background photo sits behind both columns; the form is a light card for
   contrast. .jobber-embed-wrap reserves a fixed height so the async Jobber
   iframe mount causes zero layout shift. Stacks to one column (headline first,
   form below) under 992px — no side-by-side mobile. */
.home-hero-split .home-hero-grid {
  /* Balance tilted toward the form so the intake card is the hero's focus:
     ~615px card at 1440px desktop. Headline column stays wide enough to wrap
     cleanly at 1440/1280. */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 40px;
  align-items: start;
}
.home-hero-split .home-hero-copy { max-width: 620px; margin: 0; text-align: left; }
.home-hero-split .home-hero-sub { max-width: none; margin: 0 0 22px; }
.home-hero-split .hero-trust { justify-content: flex-start; }

.home-hero-form {
  background: #fff; color: var(--dw-text);
  border-radius: 14px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.38);
  padding: 26px 24px 22px;
  scroll-margin-top: 160px;   /* clear the sticky header when /#quote is hit */
}
.home-hero-form .quote-embed-head { text-align: left; max-width: none; margin: 0 0 16px; }
.home-hero-form .quote-embed-head .eyebrow { color: var(--dw-accent-dark); margin-bottom: 6px; }
.home-hero-form .quote-embed-head .sec-title {
  color: var(--dw-heading); font-size: 25px; line-height: 1.15;
}
.home-hero-form .quote-embed-sub { color: var(--dw-text-soft); font-size: 14.5px; margin: 0; }
/* Reserved height matches the trimmed form's actual rendered height (Jobber
   posts a fixed ~1170px for form 530855, measured stable across column widths),
   so the async iframe mount causes zero layout shift and leaves no empty slack.
   The 820px floor from the old long form was shorter than the real content and
   caused an 820->1170 jump on mount. Category-page embeds use .quote-card and
   are unaffected. */
.home-hero-form .jobber-embed-wrap {
  position: relative; width: 100%; max-width: none; margin: 0; min-height: 1170px;
}
.home-hero-form .jobber-embed { width: 100%; }
.home-hero-form .jobber-embed-wrap iframe {
  width: 100% !important; min-height: 1170px; border: 0; display: block; margin: 0 auto;
}
.home-hero-form .jobber-loading { text-align: center; color: var(--dw-text-soft); margin: 20px 0; }
.home-hero-form .jobber-fallback { text-align: center; margin-top: 14px; color: var(--dw-text-soft); }

@media (max-width: 991px) {
  .home-hero-split .home-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .home-hero-split .home-hero-copy { max-width: none; margin: 0 auto; text-align: center; }
  .home-hero-split .hero-trust { justify-content: center; }
  .home-hero-form { scroll-margin-top: 96px; }
}
@media (max-width: 575px) {
  .home-hero-form { padding: 20px 16px 18px; }
}

/* ── Category-landing intake section (Phase 3) ───────────────────────────────
   The shared Jobber form (build_category_quote_section) rendered as a full-width
   band below the category hero/intro and above related services. Reuses the
   homepage form card's inner styles; .jobber-embed-wrap reserves a fixed height
   so the async iframe mount causes zero layout shift. scroll-margin-top clears
   the sticky header when a same-page #quote CTA is clicked. Stacks cleanly on
   mobile — the card is single-column with its own padding; no horizontal
   overflow (the .container owns the gutter). */
.quote-sec {
  padding: 56px 0;
  background: var(--dw-surface, #f4f7fa);
  scroll-margin-top: 120px;
}
.quote-card {
  background: #fff; color: var(--dw-text);
  max-width: 720px; margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.14);
  padding: 30px 28px 26px;
}
.quote-card .quote-embed-head { text-align: center; max-width: none; margin: 0 0 18px; }
.quote-card .quote-embed-head .eyebrow { color: var(--dw-accent-dark); margin-bottom: 6px; display: block; }
.quote-card .quote-embed-head .sec-title { color: var(--dw-heading); font-size: 26px; line-height: 1.15; }
.quote-card .quote-embed-sub { color: var(--dw-text-soft); font-size: 14.5px; margin: 8px 0 0; }
.quote-card .jobber-embed-wrap {
  position: relative; width: 100%; max-width: none; margin: 0; min-height: 820px;
}
.quote-card .jobber-embed { width: 100%; }
.quote-card .jobber-embed-wrap iframe {
  width: 100% !important; min-height: 820px; border: 0; display: block; margin: 0 auto;
}
.quote-card .jobber-loading { text-align: center; color: var(--dw-text-soft); margin: 20px 0; }
.quote-card .jobber-fallback { text-align: center; margin-top: 14px; color: var(--dw-text-soft); }

@media (max-width: 991px) {
  .quote-sec { scroll-margin-top: 88px; }
}
@media (max-width: 575px) {
  .quote-sec { padding: 40px 0; }
  .quote-card { padding: 22px 16px 20px; border-radius: 12px; }
}

/* lead-form card */
.lead-form {
  background: #fff; color: var(--dw-text);
  border-radius: 12px; padding: 26px 26px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.lead-form-head { margin-bottom: 16px; }
.lead-form-title { font-size: 24px; margin: 0 0 4px; color: var(--dw-heading); }
.lead-form-tag { font-size: 14px; color: var(--dw-text-soft); margin: 0; }
.lead-field { display: block; margin-bottom: 12px; }
.lead-field > span { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 5px; }
.lead-field input,
.lead-field select {
  width: 100%; padding: 11px 12px;
  border: 1px solid #ccd1d8; border-radius: 6px;
  font-size: 15px; background: #fff; color: var(--dw-text);
}
.lead-field input:focus,
.lead-field select:focus {
  outline: none; border-color: var(--dw-primary);
  box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.15);
}
.lead-submit { width: 100%; margin-top: 4px; font-size: 17px; padding: 13px; }
.lead-form-note { font-size: 13px; color: var(--dw-text-soft); margin: 12px 0 0; text-align: center; }
.lead-form-note a { color: var(--dw-primary); font-weight: 700; }

/* -- badge strip ---------------------------------------------------------- */
.badge-strip { background: var(--dw-surface); border-bottom: 1px solid var(--dw-line); }
.badge-strip ul {
  list-style: none; margin: 0; padding: 18px 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 42px;
}
.badge-strip li {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--dw-font-heading); font-weight: 700; font-size: 17px;
  color: var(--dw-heading);
}
.badge-strip li i { color: var(--dw-primary); font-size: 18px; }

/* -- service cards (linked) ---------------------------------------------- */
.service-card-link {
  display: flex; flex-direction: column; height: 100%;
  color: inherit; text-decoration: none;
}
.service-card-link:hover { color: inherit; text-decoration: none; }
.service-card:hover { transform: translateY(-3px); }
.service-card-link:hover .card-more i { transform: translateX(4px); }

/* -- stats band ----------------------------------------------------------- */
.stats-band { background: var(--dw-dark); color: #fff; padding: 50px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-num {
  font-family: var(--dw-font-heading); font-size: 46px; font-weight: 700;
  color: var(--dw-accent); line-height: 1;
}
.stat-label { font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-top: 8px; }

/* -- case studies --------------------------------------------------------- */
.case-count {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0, 0, 0, 0.7); color: #fff;
  font-size: 12px; padding: 3px 9px; border-radius: 20px;
}
.case-loc { font-size: 13px; color: var(--dw-text-soft); display: flex; align-items: center; gap: 6px; }
.case-loc i { color: var(--dw-primary); }
.case-problem, .case-solution { font-size: 14px; margin: 0; line-height: 1.5; }
.case-problem strong, .case-solution strong { color: var(--dw-heading); }

/* -- lazy time-lapse feature ---------------------------------------------- */
.video-feature { background: var(--dw-dark); color: #fff; padding: 58px 0; }
.video-feature-head { text-align: center; max-width: 720px; margin: 0 auto 26px; }
.video-feature .eyebrow { color: var(--dw-accent); }
.video-feature .sec-title { color: #fff; }
.video-feature .sec-sub { color: rgba(255, 255, 255, 0.8); }
.video-frame {
  position: relative; max-width: 900px; margin: 0 auto;
  aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: #000; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}
.video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border: 0; border-radius: 50%;
  background: rgba(196, 18, 48, 0.92); color: #fff; font-size: 26px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.video-play:hover { background: var(--dw-primary-dark); transform: scale(1.08); }
.video-frame.is-playing .video-play { display: none; }

/* -- process -------------------------------------------------------------- */
.process-sec { padding: 58px 0; background: #fff; }
.process-head { text-align: center; max-width: 680px; margin: 0 auto 34px; }
.proc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.proc-step { text-align: center; padding: 0 12px; }
.proc-num {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--dw-primary); color: #fff;
  font-family: var(--dw-font-heading); font-size: 26px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.proc-title { font-size: 21px; margin: 0 0 8px; }
.proc-step p { color: var(--dw-text-soft); font-size: 15px; margin: 0; }

/* -- reviews -------------------------------------------------------------- */
.rev-card { padding: 24px; }
.rev-stars { font-size: 15px; margin-bottom: 10px; letter-spacing: 1px; }
.rev-stars i { color: var(--dw-accent); }
.rev-text { font-size: 15px; color: var(--dw-text); line-height: 1.6; margin: 0 0 16px; flex: 1; }
.rev-author { font-family: var(--dw-font-heading); font-weight: 700; color: var(--dw-heading); }
.rev-loc {
  display: block; font-family: var(--dw-font-body); font-weight: 400;
  font-size: 13px; color: var(--dw-text-soft); margin-top: 2px;
}

/* -- FAQ ------------------------------------------------------------------ */
.faq-sec { padding: 58px 0; background: var(--dw-surface); }
.faq-head { text-align: center; max-width: 680px; margin: 0 auto 28px; }
.faq-home { max-width: 820px; margin: 0 auto; }
.faq-home details { background: #fff; }

/* -- service area --------------------------------------------------------- */
.area-sec { padding: 58px 0; }
.area-head { text-align: center; max-width: 680px; margin: 0 auto 28px; }
.area-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.area-grid a {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border: 1px solid var(--dw-line); border-radius: 8px;
  color: var(--dw-text); text-decoration: none; font-size: 14.5px;
  transition: all 0.2s ease;
}
.area-grid a:hover {
  border-color: var(--dw-primary); color: var(--dw-primary);
  box-shadow: 0 4px 12px rgba(196, 18, 48, 0.12); transform: translateY(-2px);
}
.area-grid a i { color: var(--dw-primary); }

/* -- final CTA ------------------------------------------------------------ */
.final-cta { background: var(--dw-primary); color: #fff; padding: 58px 0; text-align: center; }
.final-cta-title { color: #fff; font-size: 34px; margin: 0 0 10px; }
.final-cta-sub { color: rgba(255, 255, 255, 0.92); font-size: 17px; max-width: 640px; margin: 0 auto 24px; }
.final-cta-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.final-cta-btns .common-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--dw-primary);
  border-radius: 50px; padding: 13px 28px; font-size: 17px; font-weight: 700;
}
.final-cta-btns .common-btn:hover { background: #f3f3f3; color: var(--dw-primary-dark); }
.final-cta-form { background: var(--dw-dark); color: #fff; }
.final-cta-form:hover { background: #000; color: #fff; }

/* -- preserved CSV prose (lower SEO block) -------------------------------- */
/* Calmer, secondary text section sitting below the new homepage sections.
   Spacing + muted typography only — all content stays visible and indexable. */
.home-prose {
  border-top: 1px solid var(--dw-line);
  margin-top: 16px;
  padding-top: 44px;
  padding-bottom: 12px;
  color: var(--dw-text-soft);
  line-height: 1.75;
}
.home-prose p, .home-prose li { color: var(--dw-text-soft); }
/* Pull the reused prose headings down a notch so they read as sub-content,
   not competing section titles. */
.home-prose h2 { font-size: 24px; }
.home-prose h3 { font-size: 20px; }
.home-prose h4 { font-size: 18px; }
.home-prose h2, .home-prose h3, .home-prose h4 { color: var(--dw-heading); }

/* -- rebuilt service pages (FIX 6) ---------------------------------------- */
/* Reuses .home-hero (dark bg/overlay) and .common-btn; adds only single-column
   hero copy width, a centered CTA row, a ghost button, and body/list spacing.
   No divergent component styles. */
.service-hero .home-hero-copy { max-width: 720px; }
/* Phase 4 Bug 1: the eyebrow/H1/intro above are text-align:center, so the CTA
   flex row must justify-content:center too — otherwise it defaults to flex-start
   and sits left of the heading's axis. */
.service-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 24px; }
.service-hero-cta .common-btn { display: inline-flex; align-items: center; gap: 9px; }
.btn-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Alternating section bands (Jason): even body sections carry .svc-sec-band and
   get the palette's light neutral (--dw-surface, same as FAQ/quote/reviews) as a
   full-bleed background — the <section> spans the viewport while .svc-body stays
   in the centered column. Symmetric padding (vs the old 48/8) so each band reads
   as a balanced, intentional block. The render-time class (service_pages.py)
   keeps the final section white when a same-colour band follows, so bands never
   merge into one. */
.svc-sec { padding: 40px 0; }
.svc-sec-band { background: var(--dw-surface); }
/* Phase 4 Bug 2: center the body column on the container axis (matching the
   centered hero copy) while keeping its text left-aligned. */
.svc-body { max-width: 820px; margin-inline: auto; }
.svc-body > p { margin: 0 0 16px; line-height: 1.7; color: var(--dw-text); }
.svc-list-lead { margin: 0 0 10px; font-weight: 600; }
.svc-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 11px; }
.svc-list li { display: flex; gap: 11px; align-items: flex-start; line-height: 1.55; }
.svc-list li i { color: var(--dw-primary); margin-top: 5px; flex: 0 0 auto; font-size: 14px; }

/* -- homepage responsive -------------------------------------------------- */
@media (max-width: 991px) {
  .home-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .home-hero-sub { max-width: none; }
  .area-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .home-hero { padding: 42px 0 50px; }
  .home-hero-title { font-size: 32px; }
  .home-hero-sub { font-size: 16px; }
  .home-sec, .process-sec, .faq-sec, .area-sec, .video-feature { padding: 42px 0; }
  .stats-band { padding: 40px 0; }
  .sec-title { font-size: 28px; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .carousel-nav { display: none; }   /* native swipe on touch */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .stat-num { font-size: 38px; }
  .proc-grid { grid-template-columns: 1fr; gap: 22px; }
  .final-cta-title { font-size: 28px; }
  .final-cta-btns .common-btn { width: 100%; justify-content: center; }
}
@media (max-width: 575px) {
  .area-grid { grid-template-columns: repeat(2, 1fr); }
  .snap-card { flex-basis: 85vw; }
}

/* Respect reduced-motion: drop hover lifts and transitions */
@media (prefers-reduced-motion: reduce) {
  .snap-card, .carousel-arrow, .area-grid a, .card-more i, .video-play { transition: none; }
  .snap-card:hover, .service-card:hover, .area-grid a:hover { transform: none; }
}

/* ── Homepage photo visibility (Batch A follow-up) ──────────────────────────
   Scoped to homepage-only classes so service/category heroes are untouched. */

/* 1. Lighten the homepage split-hero scrim so the encapsulation photo is
   recognizable; white copy stays legible via a soft text-shadow. */
.home-hero.home-hero-split {
  background:
    linear-gradient(rgba(16, 16, 19, 0.62), rgba(16, 16, 19, 0.46)),
    var(--hero-img, none) center / cover no-repeat,
    var(--dw-dark);
}
.home-hero-split .home-hero-title { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72); }
.home-hero-split .home-hero-sub   { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }

/* 1b. Service/category heroes (.home-hero.service-hero, rendered by
   service_pages.py with a per-page --hero-img) get the same lighter scrim so
   Jason's hero photos are identifiable instead of a near-black band. Scoped to
   .service-hero only; the base .home-hero rule and the homepage are untouched.
   Same text-shadow treatment keeps the centered white copy readable. */
.home-hero.service-hero {
  background:
    linear-gradient(rgba(16, 16, 19, 0.62), rgba(16, 16, 19, 0.46)),
    var(--hero-img, none) center / cover no-repeat,
    var(--dw-dark);
}
.service-hero .home-hero-title { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72); }
.service-hero .home-hero-sub   { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }

/* 2. Show all six service-card photos at once on desktop (static grid instead of
   a scroll carousel) so the real photos are visible without swiping. Mobile keeps
   the swipe carousel. Homepage services section only (.service-sec). */
@media (min-width: 992px) {
  .home-services .carousel-nav { display: none; }
  .home-services .carousel-track {
    flex-wrap: wrap;
    overflow: visible;
    scroll-snap-type: none;
  }
  .home-services .snap-card { flex: 0 0 calc(33.333% - 14px); max-width: none; }
}

/* ── In-content service/category photo panel (Batch B) ──────────────────────
   A lead figure at the top of a service-body section. Full column width, fixed
   16:9 crop so tall source photos never blow out the layout on mobile. */
.svc-figure {
  margin: 0 0 26px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
  background: #eef0f2;
}
.svc-figure img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; }