/* =========================================================
   7C's Contracting - user.css (Joomla Cassiopeia)
   SINGLE CONSOLIDATED BUILD
   Goals:
   - Desktop: logo left, menu right, no wrapping, clean spacing
   - Dropdowns: KEEP working (do not kill caret / metismenu behavior)
   - Nav: only active item bold, animated gold underline on hover + active
   - Parent of active dropdown stays underlined when inside submenu
   - CTA: Estimate styled as button (class OR URL fallback OR item id)
   - Mobile: tagline hidden small, crisp copper hamburger -> X
   ========================================================= */

/* -------------------------
   Global variables
   ------------------------- */
:root{
  --tc-accent: #b87333;        /* copper (hamburger etc.) */
  --tc-accent-rgb: 184,115,51;
  --tc-gold: #C6A75E;          /* underline + CTA */
  --tc-text: #1a1a1a;
}

/* =========================================================
   HEADER / TAGLINE
   ========================================================= */

/* Tagline under logo */
header.header.container-header.full-width .site-description,
header.header.container-header-full-width .site-description{
  display: block;
  margin-top: 0.25rem;
  font-size: 0.95rem;
  line-height: 1.2;
  font-weight: 500;
  color: #2b2b2b;
  opacity: 0.95;
  letter-spacing: 0.01em;
  max-width: none;
}

/* Optional left offset (tweak if you want) */
header.header.container-header.full-width .site-description,
header.header.container-header-full-width .site-description{
  margin-left: 32px;
}

/* Tablet tighten */
@media (max-width: 768px){
  header.header.container-header.full-width .site-description,
  header.header.container-header-full-width .site-description{
    margin-top: 0.2rem;
    font-size: 0.9rem;
    margin-left: 24px;
  }
}

/* Hide tagline on small screens */
@media (max-width: 576px){
  header.header.container-header.full-width .site-description,
  header.header.container-header-full-width .site-description{
    display: none !important;
  }
}

/* Sticky hide/show hook (only does something if your JS toggles .is-hidden) */
header.header{
  transition: transform 220ms ease;
  will-change: transform;
  z-index: 9999;
}
header.header.is-hidden{
  transform: translateY(-110%);
}

/* =========================================================
   DESKTOP LAYOUT (>= 992px)
   ========================================================= */
@media (min-width: 992px){

  /* Header bar height + padding */
  header.header.container-header.full-width,
  header.header.container-header-full-width{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 2rem;
  }

  /* The two header chunks */
  header.header.container-header.full-width > .grid-child,
  header.header.container-header-full-width > .grid-child{
    display: flex;
    align-items: center;
  }

  /* Nav chunk right aligned */
  header.header.container-header.full-width > .grid-child.container-nav,
  header.header.container-header-full-width > .grid-child.container-nav{
    margin-left: auto;
    padding-right: 1.5rem; /* DO NOT use huge padding-right (breaks alignment) */
  }

  /* Prevent wrapping anywhere in the main nav line */
  header.header.container-header.full-width .navbar-nav,
  header.header.container-header-full-width .navbar-nav,
  header.header.container-header.full-width .mod-menu ul,
  header.header.container-header-full-width .mod-menu ul,
  header.header.container-header.full-width ul.metismenu,
  header.header.container-header-full-width ul.metismenu{
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  /* Keep dropdowns functional: do NOT force display changes on dropdown containers */
  header.header.container-header.full-width .mod-menu,
  header.header.container-header-full-width .mod-menu{
    position: relative;
  }

  /* --- NAV TYPOGRAPHY (TOP LEVEL) --- */
  header.header.container-header.full-width .mod-menu ul.metismenu > li > a,
  header.header.container-header.full-width .mod-menu ul.metismenu > li > span,
  header.header.container-header.full-width .mod-menu ul.metismenu > li > .nav-header,
  header.header.container-header-full-width .mod-menu ul.metismenu > li > a,
  header.header.container-header-full-width .mod-menu ul.metismenu > li > span,
  header.header.container-header-full-width .mod-menu ul.metismenu > li > .nav-header{
    font-size: 0.98rem !important;
    font-weight: 500 !important;     /* normal by default */
    letter-spacing: 0.02em;
    padding: 0.45rem 0.55rem !important;
    color: var(--tc-text);
    text-decoration: none !important;
    position: relative;             /* underline pseudo */
    display: inline-block;          /* underline = word width */
    border-bottom: 0 !important;    /* kill any instant black line */
    box-shadow: none !important;
  }

  /* Keep the dropdown carets (triangles). If Cassiopeia uses ::after on toggles, do NOT remove it. */
  header.header.container-header.full-width .mod-menu .dropdown-toggle::after,
  header.header.container-header-full-width .mod-menu .dropdown-toggle::after{
    opacity: 1;
  }

  /* --- ANIMATED UNDERLINE (TOP LEVEL) --- */
  header.header.container-header.full-width .mod-menu ul.metismenu > li > a::after,
  header.header.container-header.full-width .mod-menu ul.metismenu > li > span::after,
  header.header.container-header.full-width .mod-menu ul.metismenu > li > .nav-header::after,
  header.header.container-header-full-width .mod-menu ul.metismenu > li > a::after,
  header.header.container-header-full-width .mod-menu ul.metismenu > li > span::after,
  header.header.container-header-full-width .mod-menu ul.metismenu > li > .nav-header::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--tc-gold);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms ease;
    pointer-events: none;
  }

  /* Hover underline */
  header.header.container-header.full-width .mod-menu ul.metismenu > li > a:hover::after,
  header.header.container-header.full-width .mod-menu ul.metismenu > li > span:hover::after,
  header.header.container-header.full-width .mod-menu ul.metismenu > li > .nav-header:hover::after,
  header.header.container-header-full-width .mod-menu ul.metismenu > li > a:hover::after,
  header.header.container-header-full-width .mod-menu ul.metismenu > li > span:hover::after,
  header.header.container-header-full-width .mod-menu ul.metismenu > li > .nav-header:hover::after{
    transform: scaleX(1);
  }

  /* --- ACTIVE STATES (TOP LEVEL) --- */
  /* Current page item */
  header.header.container-header.full-width .mod-menu ul.metismenu > li.current > a,
  header.header.container-header.full-width .mod-menu ul.metismenu > li.current > span,
  header.header.container-header.full-width .mod-menu ul.metismenu > li.current > .nav-header,
  header.header.container-header-full-width .mod-menu ul.metismenu > li.current > a,
  header.header.container-header-full-width .mod-menu ul.metismenu > li.current > span,
  header.header.container-header-full-width .mod-menu ul.metismenu > li.current > .nav-header{
    font-weight: 650 !important;
  }

  /* Also treat .active like current (some menu items use active) */
  header.header.container-header.full-width .mod-menu ul.metismenu > li.active > a,
  header.header.container-header-full-width .mod-menu ul.metismenu > li.active > a{
    font-weight: 650 !important;
  }

  /* Make underline stay ON for current/active */
  header.header.container-header.full-width .mod-menu ul.metismenu > li.current > a::after,
  header.header.container-header.full-width .mod-menu ul.metismenu > li.active > a::after,
  header.header.container-header-full-width .mod-menu ul.metismenu > li.current > a::after,
  header.header.container-header-full-width .mod-menu ul.metismenu > li.active > a::after{
    transform: scaleX(1);
  }

  /* Parent dropdown stays underlined when inside submenu:
     Cassiopeia often marks the parent as .active or .current or .deeper parent.
     We keep underline for those variants too. */
  header.header.container-header.full-width .mod-menu ul.metismenu > li.deeper.active > a::after,
  header.header.container-header.full-width .mod-menu ul.metismenu > li.deeper.current > a::after,
  header.header.container-header-full-width .mod-menu ul.metismenu > li.deeper.active > a::after,
  header.header.container-header-full-width .mod-menu ul.metismenu > li.deeper.current > a::after{
    transform: scaleX(1);
  }

  /* =====================================================
     DROPDOWN MENU LIST (SUB ITEMS)
     - Not bold unless active
     - Give the active sub-item the same underline
     ===================================================== */

  /* Make dropdown panel look clean */
  header.header.container-header.full-width .mod-menu .dropdown-menu,
  header.header.container-header-full-width .mod-menu .dropdown-menu{
    border-radius: 8px;
    padding: 10px 0;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  }

  /* Sub-links */
  header.header.container-header.full-width .mod-menu .dropdown-menu a,
  header.header.container-header-full-width .mod-menu .dropdown-menu a{
    font-weight: 500 !important;
    padding: 10px 18px !important;
    position: relative;
    text-decoration: none !important;
    border: 0 !important;
  }

  /* Sub-link underline animation (same idea) */
  header.header.container-header.full-width .mod-menu .dropdown-menu a::after,
  header.header.container-header-full-width .mod-menu .dropdown-menu a::after{
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 6px;
    height: 2px;
    background: var(--tc-gold);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms ease;
    pointer-events: none;
  }

  header.header.container-header.full-width .mod-menu .dropdown-menu a:hover::after,
  header.header.container-header-full-width .mod-menu .dropdown-menu a:hover::after{
    transform: scaleX(1);
  }

  /* Active/current sub-item bold + underline ON */
  header.header.container-header.full-width .mod-menu .dropdown-menu li.current > a,
  header.header.container-header.full-width .mod-menu .dropdown-menu li.active > a,
  header.header.container-header-full-width .mod-menu .dropdown-menu li.current > a,
  header.header.container-header-full-width .mod-menu .dropdown-menu li.active > a{
    font-weight: 650 !important;
  }
  header.header.container-header.full-width .mod-menu .dropdown-menu li.current > a::after,
  header.header.container-header.full-width .mod-menu .dropdown-menu li.active > a::after,
  header.header.container-header-full-width .mod-menu .dropdown-menu li.current > a::after,
  header.header.container-header-full-width .mod-menu .dropdown-menu li.active > a::after{
    transform: scaleX(1);
  }

  /* =====================================================
     CTA BUTTON: ESTIMATE
     Works 3 ways:
     1) You added Link CSS Style class "cta-estimate" on the <a>
     2) URL contains /estimate
     3) Menu item id (example: li.item-107)
     ===================================================== */

  /* Base CTA target (any one matching is fine) */
  header.header.container-header.full-width .mod-menu a.cta-estimate,
  header.header.container-header-full-width .mod-menu a.cta-estimate,
  header.header.container-header.full-width .mod-menu a[href*="/estimate"],
  header.header.container-header-full-width .mod-menu a[href*="/estimate"],
  header.header.container-header.full-width .mod-menu li.item-107 > a,
  header.header.container-header-full-width .mod-menu li.item-107 > a{
    border: 2px solid var(--tc-gold) !important;
    border-radius: 4px !important;
    padding: 8px 14px !important;
    margin-left: 10px !important;
    color: var(--tc-gold) !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    display: inline-block !important;
    text-decoration: none !important;
  }

  header.header.container-header.full-width .mod-menu a.cta-estimate:hover,
  header.header.container-header-full-width .mod-menu a.cta-estimate:hover,
  header.header.container-header.full-width .mod-menu a[href*="/estimate"]:hover,
  header.header.container-header-full-width .mod-menu a[href*="/estimate"]:hover,
  header.header.container-header.full-width .mod-menu li.item-107 > a:hover,
  header.header.container-header-full-width .mod-menu li.item-107 > a:hover{
    background: var(--tc-gold) !important;
    color: var(--tc-text) !important;
  }

  /* Ensure CTA does NOT get the underline bar */
  header.header.container-header.full-width .mod-menu a.cta-estimate::after,
  header.header.container-header-full-width .mod-menu a.cta-estimate::after,
  header.header.container-header.full-width .mod-menu a[href*="/estimate"]::after,
  header.header.container-header-full-width .mod-menu a[href*="/estimate"]::after,
  header.header.container-header.full-width .mod-menu li.item-107 > a::after,
  header.header.container-header-full-width .mod-menu li.item-107 > a::after{
    content: none !important;
  }

  /* Desktop: hide hamburger (menu is visible) */
  header.header.container-header.full-width .navbar-toggler,
  header.header.container-header-full-width .navbar-toggler{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  header.header.container-header.full-width .navbar-collapse,
  header.header.container-header-full-width .navbar-collapse{
    display: flex !important;
    flex-basis: auto !important;
  }
}

/* =========================================================
   MOBILE/TABLET (< 992px)
   - Keep Cassiopeia collapse behavior
   - Active underline color = gold
   ========================================================= */
@media (max-width: 991.98px){

  header.header.container-header.full-width,
  header.header.container-header-full-width{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  header.header.container-header.full-width .container-nav,
  header.header.container-header.full-width .grid-child.container-nav,
  header.header.container-header-full-width .container-nav,
  header.header.container-header-full-width .grid-child.container-nav{
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  header.header.container-header.full-width .navbar-collapse,
  header.header.container-header-full-width .navbar-collapse{
    width: 100% !important;
  }

  header.header.container-header.full-width .navbar-nav,
  header.header.container-header-full-width .navbar-nav{
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0.25rem !important;
    padding-top: 0.5rem !important;
  }

  header.header.container-header.full-width .navbar-nav .nav-link,
  header.header.container-header-full-width .navbar-nav .nav-link{
    padding: 0.6rem 0.25rem !important;
  }

  /* Active/current underline on mobile */
  header.header.container-header.full-width .navbar-nav .active > .nav-link,
  header.header.container-header.full-width .navbar-nav .current > a,
  header.header.container-header.full-width .navbar-nav a[aria-current="page"],
  header.header.container-header-full-width .navbar-nav .active > .nav-link,
  header.header.container-header-full-width .navbar-nav .current > a,
  header.header.container-header-full-width .navbar-nav a[aria-current="page"]{
    text-decoration-color: var(--tc-gold) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 6px !important;
    border-bottom-color: var(--tc-gold) !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   MOBILE HAMBURGER -> X (CRISPER RENDERING)
   ========================================================= */
@media (max-width: 991.98px){

  header.header.container-header.full-width .navbar-toggler .icon-menu,
  header.header.container-header.full-width .navbar-toggler .navbar-toggler-icon,
  header.header.container-header-full-width .navbar-toggler .icon-menu,
  header.header.container-header-full-width .navbar-toggler .navbar-toggler-icon{
    display: none !important;
  }

  header.header.container-header.full-width .navbar-toggler,
  header.header.container-header-full-width .navbar-toggler{
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,0.18) !important;
    background-color: transparent !important;

    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;

    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
  }

  header.header.container-header.full-width .navbar-toggler::before,
  header.header.container-header-full-width .navbar-toggler::before{
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 22px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: var(--tc-accent) !important;

    transform: translate3d(-50%, -50%, 0) !important;
    box-shadow: 0 -7px 0 var(--tc-accent), 0 7px 0 var(--tc-accent) !important;

    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  }

  header.header.container-header.full-width .navbar-toggler::after,
  header.header.container-header-full-width .navbar-toggler::after{
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 22px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: var(--tc-accent) !important;

    transform: translate3d(-50%, -50%, 0) rotate(0deg) !important;
    opacity: 0;

    transition: transform .18s ease, opacity .18s ease;
  }

  header.header.container-header.full-width .navbar-toggler:hover,
  header.header.container-header-full-width .navbar-toggler:hover{
    background-color: rgba(var(--tc-accent-rgb), 0.10) !important;
    border-color: rgba(var(--tc-accent-rgb), 0.45) !important;
    box-shadow: 0 0 0 3px rgba(var(--tc-accent-rgb), 0.12) !important;
  }

  header.header.container-header.full-width .navbar-toggler[aria-expanded="true"]::before,
  header.header.container-header-full-width .navbar-toggler[aria-expanded="true"]::before{
    box-shadow: none !important;
    transform: translate3d(-50%, -50%, 0) rotate(45deg) !important;
  }

  header.header.container-header.full-width .navbar-toggler[aria-expanded="true"]::after,
  header.header.container-header-full-width .navbar-toggler[aria-expanded="true"]::after{
    opacity: 1 !important;
    transform: translate3d(-50%, -50%, 0) rotate(-45deg) !important;
  }
}
/* =========================================
   FORCE ACTIVE MENU ITEMS TO BOLD
   (Catches all Joomla variations)
   ========================================= */

/* Top-level active item */
header.header .mod-menu ul.metismenu > li.current > a,
header.header .mod-menu ul.metismenu > li.active > a,
header.header .mod-menu ul.metismenu > li.current.active > a,
header.header .mod-menu ul.metismenu > li > a.current,
header.header .mod-menu ul.metismenu > li > a.active {
    font-weight: 700 !important;
}

/* Parent of active dropdown (Services when inside a service page) */
header.header .mod-menu ul.metismenu > li.deeper.current > a,
header.header .mod-menu ul.metismenu > li.deeper.active > a {
    font-weight: 700 !important;
}

/* Active dropdown item */
header.header .mod-menu .dropdown-menu li.current > a,
header.header .mod-menu .dropdown-menu li.active > a {
    font-weight: 700 !important;
}
/* =========================================================
   ACTIVE MENU TEXT = BOLD (bulletproof + font fallback)
   Put at VERY BOTTOM of user.css
   ========================================================= */

/* Catch both desktop + dropdown, and both <a> and <span> menu headings */
/* Active dropdown item */
header.header.container-header-full-width .mod-menu a[aria-current="page"],
header.header.container-header-full-width .mod-menu li.current > a,
header.header.container-header-full-width .mod-menu li.active > a,
header.header.container-header-full-width .mod-menu li.current > span,
header.header.container-header-full-width .mod-menu li.active > span,
header.header.container-header-full-width .mod-menu .dropdown-menu li.active > a,
header.header.container-header-full-width .mod-menu .dropdown-menu li.current > a{
  font-weight: 800 !important;
  font-synthesis: weight !important;
  -webkit-font-smoothing: auto !important;
  text-decoration: none !important;
}
/* Dropdown headings (Services, Gallery, etc.) should NOT be bold */
header.header.container-header-full-width .mod-menu button.mod-menu__heading.nav-header{
  font-weight: 400 !important;
}
/* Optional “nuclear” fallback: if your font STILL won’t visually bold,
   uncomment this to add a tiny stroke-like effect (looks clean on most screens). */
/*
header.header.container-header.full-width .mod-menu a[aria-current="page"],
header.header.container-header.full-width .mod-menu li.active > a,
header.header.container-header.full-width .mod-menu li.current > a{
  text-shadow: 0.3px 0 0 currentColor, -0.3px 0 0 currentColor;
}
*/
/* =========================================================
   FIX: "Whack-a-mole" bold
   - Bold ONLY the actual current page link (leaf item)
   - Do NOT bold dropdown parents (Services / Service Areas / etc.)
   Put at VERY BOTTOM of user.css
   ========================================================= */

@media (min-width: 992px){

  /* 1) Baseline: everything normal weight */
  header.header.container-header.full-width .mod-menu a,
  header.header.container-header-full-width .mod-menu a{
    font-weight: 500 !important;
  }

  /* 2) Bold ONLY leaf/current items (non-dropdown items) */
  header.header.container-header.full-width .mod-menu ul.metismenu li.current:not(.deeper):not(.parent) > a,
  header.header.container-header.full-width .mod-menu ul.metismenu li.active:not(.deeper):not(.parent) > a,
  header.header.container-header-full-width .mod-menu ul.metismenu li.current:not(.deeper):not(.parent) > a,
  header.header.container-header-full-width .mod-menu ul.metismenu li.active:not(.deeper):not(.parent) > a{
    font-weight: 700 !important;
  }

  /* 3) If Joomla marks the link itself as current, make it bold */
  header.header.container-header.full-width .mod-menu a[aria-current="page"],
  header.header.container-header-full-width .mod-menu a[aria-current="page"]{
    font-weight: 700 !important;
  }

  /* 4) HARD RULE: never bold dropdown parents */
  header.header.container-header.full-width .mod-menu ul.metismenu > li.deeper.current > a,
  header.header.container-header.full-width .mod-menu ul.metismenu > li.deeper.active > a,
  header.header.container-header-full-width .mod-menu ul.metismenu > li.deeper.current > a,
  header.header.container-header-full-width .mod-menu ul.metismenu > li.deeper.active > a{
    font-weight: 500 !important;
  }
}
/* =========================
   7C’s NAV: underline + active bold (no submenu underline)
   ========================= */

/* Change this color if you want the underline different */
:root{
  --tc-nav-underline: rgba(0,0,0,.30);
}

/* --- TOP LEVEL: baseline (NOT bold) --- */
header .navbar-nav > li > a,
header .navbar-nav > li > .nav-link,
header .navbar-nav > li > a.dropdown-toggle{
  font-weight: 400 !important;          /* key: stop dropdown parents from being bold */
  position: relative !important;        /* for underline */
  text-decoration: none !important;
}

/* --- TOP LEVEL UNDERLINE (hover + active/current) --- */
header .navbar-nav > li > a::after,
header .navbar-nav > li > .nav-link::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -6px !important;
  height: 2px !important;
  background: var(--tc-nav-underline) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .18s ease !important;
}

/* hover underline */
header .navbar-nav > li:hover > a::after,
header .navbar-nav > li:hover > .nav-link::after{
  transform: scaleX(1) !important;
}

/* active/current underline */
header .navbar-nav > li.active > a::after,
header .navbar-nav > li.current > a::after,
header .navbar-nav > li.current-menu-item > a::after,
header .navbar-nav > li.current_page_item > a::after,
header .navbar-nav > li.current-menu-ancestor > a::after,
header .navbar-nav > li.current-menu-parent > a::after,
header .navbar-nav > li.active > .nav-link::after,
header .navbar-nav > li.current > .nav-link::after,
header .navbar-nav > li.current-menu-item > .nav-link::after,
header .navbar-nav > li.current_page_item > .nav-link::after,
header .navbar-nav > li.current-menu-ancestor > .nav-link::after,
header .navbar-nav > li.current-menu-parent > .nav-link::after{
  transform: scaleX(1) !important;
}

/* --- TOP LEVEL: bold ONLY when active/current --- */
header .navbar-nav > li.active > a,
header .navbar-nav > li.current > a,
header .navbar-nav > li.current-menu-item > a,
header .navbar-nav > li.current_page_item > a,
header .navbar-nav > li.current-menu-ancestor > a,
header .navbar-nav > li.current-menu-parent > a,
header .navbar-nav > li.active > .nav-link,
header .navbar-nav > li.current > .nav-link,
header .navbar-nav > li.current-menu-item > .nav-link,
header .navbar-nav > li.current_page_item > .nav-link,
header .navbar-nav > li.current-menu-ancestor > .nav-link,
header .navbar-nav > li.current-menu-parent > .nav-link{
  font-weight: 700 !important;
}

/* IMPORTANT: when a dropdown is OPEN (show), do NOT auto-bold it unless it's actually current */
header .navbar-nav > li.dropdown.show > a,
header .navbar-nav > li.dropdown.show > .nav-link,
header .navbar-nav > li.dropdown.show > a.dropdown-toggle{
  font-weight: 400 !important;
}

/* ...but if the dropdown is the current section (ancestor/parent), keep it bold */
header .navbar-nav > li.dropdown.show.current-menu-ancestor > a,
header .navbar-nav > li.dropdown.show.current-menu-parent > a,
header .navbar-nav > li.dropdown.show.active > a,
header .navbar-nav > li.dropdown.show.current-menu-ancestor > .nav-link,
header .navbar-nav > li.dropdown.show.current-menu-parent > .nav-link,
header .navbar-nav > li.dropdown.show.active > .nav-link{
  font-weight: 700 !important;
}

/* --- SUBMENU: no underline, optional bold for active item --- */
header .dropdown-menu a{
  text-decoration: none !important;
  font-weight: 400 !important;
}

/* keep submenu active item bold (you said this looks fine) */
header .dropdown-menu li.active > a,
header .dropdown-menu a.active,
header .dropdown-menu .current-menu-item > a,
header .dropdown-menu .current_page_item > a{
  font-weight: 700 !important;
}

/* explicitly prevent underline on submenu items */
header .dropdown-menu a::after{
  display: none !important;
}
/* =========================================================
   FIX: Dropdown headings are <button> (not <a>)
   Stop parent headings from being bold by default,
   but keep ACTIVE/CURRENT top-level items bold.
   ========================================================= */

/* 1) Default: top-level links NOT bold */
header.header.container-header-full-width nav ul.mod-menu > li.metismenu-item.level-1 > a{
  font-weight: 400 !important;
}

/* 2) Default: top-level dropdown HEADINGS (buttons) NOT bold */
header.header.container-header-full-width nav ul.mod-menu > li.metismenu-item.level-1.deeper.parent > button.mod-menu_heading{
  font-weight: 400 !important;
}

/* 3) Active/current top-level LINKS: bold */
header.header.container-header-full-width nav ul.mod-menu > li.metismenu-item.level-1.current > a,
header.header.container-header-full-width nav ul.mod-menu > li.metismenu-item.level-1.active > a,
header.header.container-header-full-width nav ul.mod-menu > li.metismenu-item.level-1 > a[aria-current="page"]{
  font-weight: 700 !important;
}

/* 4) Active/current top-level DROPDOWN HEADINGS (when that section is current): bold */
header.header.container-header-full-width nav ul.mod-menu > li.metismenu-item.level-1.deeper.parent.current > button.mod-menu_heading,
header.header.container-header-full-width nav ul.mod-menu > li.metismenu-item.level-1.deeper.parent.active > button.mod-menu_heading{
  font-weight: 700 !important;
}
/* =========================================================
   KILL Cassiopeia Extended nav-header bold
   ========================================================= */

/* Reset ALL dropdown heading buttons to normal weight */
header .mod-menu .nav-header{
  font-weight: 400 !important;
}

/* But keep them bold ONLY when truly current/active */
header .mod-menu li.current > .nav-header,
header .mod-menu li.active > .nav-header{
  font-weight: 700 !important;
}
/* =========================================================
   FORCE dropdown headings (Services/Service Areas/Gallery/Resources)
   to NOT be bold unless they are current/active
   ========================================================= */

/* 1) Normalize the LI that wraps dropdown parents (prevents inheritance) */
header.header.container-header-full-width .mod-menu li.deeper.parent,
header.header.container-header-full-width .mod-menu li.level-1.deeper.parent{
  font-weight: 400 !important;
}

/* 2) Normalize the actual dropdown heading control (button.nav-header) */
header.header.container-header-full-width .mod-menu button.nav-header,
header.header.container-header-full-width .mod-menu button.mod-menu_heading.nav-header{
  font-weight: 400 !important;
}

/* 3) Only bold them when that parent is truly active/current */
header.header.container-header-full-width .mod-menu li.deeper.parent.active > button.nav-header,
header.header.container-header-full-width .mod-menu li.deeper.parent.current > button.nav-header,
header.header.container-header-full-width .mod-menu li.level-1.deeper.parent.active > button.nav-header,
header.header.container-header-full-width .mod-menu li.level-1.deeper.parent.current > button.nav-header{
  font-weight: 700 !important;
}
/* =========================================================
   FIX: Dropdown headings (Services/Service Areas/Gallery/Resources)
   should NOT be bold by default.
   Only bold when that dropdown section is current/active.
   Paste at VERY BOTTOM of user.css.
   ========================================================= */

/* Dropdown headings = normal weight (override the theme/user.css 800!important rule) */
header.header.container-header-full-width .mod-menu li.deeper.parent > button.nav-header,
header.header.container-header-full-width .mod-menu li.level-1.deeper.parent > button.nav-header,
header.header.container-header-full-width .mod-menu li.deeper.parent > button.mod-menu_heading.nav-header,
header.header.container-header-full-width .mod-menu li.level-1.deeper.parent > button.mod-menu_heading.nav-header{
  font-weight: 400 !important;
}

/* But if that dropdown section is active/current, make it bold */
header.header.container-header-full-width .mod-menu li.deeper.parent.active > button.nav-header,
header.header.container-header-full-width .mod-menu li.deeper.parent.current > button.nav-header,
header.header.container-header-full-width .mod-menu li.level-1.deeper.parent.active > button.nav-header,
header.header.container-header-full-width .mod-menu li.level-1.deeper.parent.current > button.nav-header,
header.header.container-header-full-width .mod-menu li.deeper.parent.active > button.mod-menu_heading.nav-header,
header.header.container-header-full-width .mod-menu li.deeper.parent.current > button.mod-menu_heading.nav-header,
header.header.container-header-full-width .mod-menu li.level-1.deeper.parent.active > button.mod-menu_heading.nav-header,
header.header.container-header-full-width .mod-menu li.level-1.deeper.parent.current > button.mod-menu_heading.nav-header{
  font-weight: 700 !important;
}
/* =========================================================
   FIX: Dropdown headings (buttons) should NOT be bold
   ========================================================= */

/* These are the top-level dropdown headings: Services, Gallery, etc. */
header.header.container-header-full-width .mod-menu li.deeper.parent > button.mod-menu__heading.nav-header,
header.header.container-header-full-width .mod-menu li.deeper.parent.mm-active > button.mod-menu__heading.nav-header,
header.header.container-header-full-width .mod-menu button.mod-menu__heading.nav-header{
  font-weight: 400 !important;
}

/* Keep actual "current page" LINKS bold (Home, Process, About, etc.) */
header.header.container-header-full-width .mod-menu a[aria-current="page"],
header.header.container-header-full-width .mod-menu li.current > a,
header.header.container-header-full-width .mod-menu li.active > a,
header.header.container-header-full-width .mod-menu li.current > span,
header.header.container-header-full-width .mod-menu li.active > span{
  font-weight: 800 !important;
}

/* ========================================================= */
/* ================= HEADER SECTION - LOCKED =============== */
/* ==== DO NOT MODIFY ABOVE THIS LINE UNLESS NECESSARY ==== */
/* ========================================================= */


/* ========================================================= */
/* ================= FOOTER SECTION START ================== */
/* ========================================================= */

footer.container-footer.footer.full-width{
  background: #fff !important;
  color: #222 !important;
  border-top: 1px solid rgba(0,0,0,.08);
  margin-top: 2rem;
}

/* Remove extra padding Cassiopeia sometimes adds */
footer.container-footer.footer.full-width .grid-child{
  padding-top: 0;
  padding-bottom: 0;
}

/* Hide the default Joomla/GPL line if it shows up */
footer.container-footer.footer.full-width .mod-footer .footer2{
  display: none;
}

/* Our footer module */
footer.container-footer.footer.full-width .ob-footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 18px;
}

footer.container-footer.footer.full-width .ob-footer-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: 18px 28px;
  align-items: start;
}

footer.container-footer.footer.full-width .ob-footer-title{
  font-weight: 700;
  margin: 0 0 10px 0;
}

footer.container-footer.footer.full-width .ob-footer-tagline{
  margin-top: 10px;
  color: rgba(0,0,0,.70);
  line-height: 1.35;
}

footer.container-footer.footer.full-width .ob-footer-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

footer.container-footer.footer.full-width .ob-footer-list li{
  margin: 0 0 8px 0;
}

footer.container-footer.footer.full-width .ob-footer a{
  color: #222;
  text-decoration: none;
}

footer.container-footer.footer.full-width .ob-footer a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Bottom bar */
footer.container-footer.footer.full-width .ob-footer-bottom{
  border-top: 1px solid rgba(0,0,0,.08);
}

footer.container-footer.footer.full-width .ob-footer-bottom-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 18px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  color: rgba(0,0,0,.60);
  font-size: 13px;
}

footer.container-footer.footer.full-width .ob-footer-credit{
  color: rgba(0,0,0,.45);
}

/* Mobile */
@media (max-width: 820px){
  footer.container-footer.footer.full-width .ob-footer-grid{
    grid-template-columns: 1fr;
  }
  footer.container-footer.footer.full-width .ob-footer-bottom-inner{
    flex-direction: column;
    align-items: flex-start;
  }
}
/* Footer credit link polish */
footer.container-footer.footer.full-width .ob-footer-credit a{
  color: inherit;
  text-decoration: none;
}

footer.container-footer.footer.full-width .ob-footer-credit a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Category List title cell: thumbnail + title */
.joblist-row{
  display: flex;
  align-items: center;
  gap: 12px;
}

.joblist-thumb{
  width: 96px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  flex: 0 0 auto;
}

.joblist-title-link{
  line-height: 1.2;
}
/* HOME ONLY: stack top-a modules vertically */
body.itemid-101 .container-top-a {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px;
}

/* Ensure each module spans full width */
body.itemid-101 .container-top-a > * {
  width: 100% !important;
}
/* HOME ONLY: force TOP-A to stack vertically (Cassiopeia Extended) */
body.itemid-101 .grid-child.container-top-a,
body.itemid-101 .container-top-a,
body.itemid-101 .container-top-a > .grid-child,
body.itemid-101 .container-top-a > .grid-child > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}

/* HOME ONLY: make each module full width */
body.itemid-101 .grid-child.container-top-a > *,
body.itemid-101 .container-top-a > *,
body.itemid-101 .container-top-a .moduletable {
  width: 100% !important;
  max-width: 100% !important;
}
/* Intro panel (Homepage) */
body.itemid-101 .home-intro {
  background: #7a7a7a;
  color: #fff;
  text-align: center;
  padding: 46px 32px;
  border-radius: 6px;
}

/* Typography */
body.itemid-101 .home-intro h1 {
  margin: 0 0 12px;
  font-weight: 800;
  line-height: 1.15;
}

body.itemid-101 .home-intro p {
  margin: 0 auto 18px;
  max-width: 900px;
  line-height: 1.6;
  font-size: 1.05rem;
  opacity: 0.95;
}

/* Buttons */
body.itemid-101 .home-intro__buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

body.itemid-101 .home-btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
}

body.itemid-101 .home-btn--primary {
  background: #c9a227;
  color: #000;
}

body.itemid-101 .home-btn--secondary {
  background: #fff;
  color: #000;
}
/* Remove box styling for the Intro module only */
body.itemid-101 .intro-wrapless{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.itemid-101 .intro-wrapless .module-content{
  padding: 0 !important;
}
/* TRUST STRIP (dark, premium) */
body.itemid-101 .trust-strip{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 0;            /* keep it clean */
  background: transparent;
  border: none;
}

/* Each trust item becomes a “pill” that can animate */
body.itemid-101 .trust-item{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;

  background: #6f6f6f;           /* lighter “intro-ish” gray */
  color: #fff;                   /* white text */
  border: 1px solid rgba(0,0,0,.08);

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* Text */
body.itemid-101 .trust-text{
  color: inherit;
  font-weight: 700;
}

/* Icon */
body.itemid-101 .trust-icon{
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(201,162,39,.18);   /* your gold accent, subtle */
  color: #f0d36b;                     /* soft gold */
  font-size: 14px;
  flex: 0 0 auto;
  transition: transform .18s ease;
}

/* Hover = “pop” without being goofy */
body.itemid-101 .trust-item:hover{
  transform: translateY(-2px);
  background: #7a7a7a; /* slightly lighter on hover, not white */
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  color: #fff;
}

body.itemid-101 .trust-item:hover .trust-icon{
  transform: scale(1.07);
}

/* Responsive */
@media (max-width: 900px){
  body.itemid-101 .trust-strip{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.itemid-101 .trust-item{
    justify-content: flex-start;
  }
}

@media (max-width: 520px){
  body.itemid-101 .trust-strip{
    grid-template-columns: 1fr;
  }
}
/* HOME ONLY: remove module “box” around Trust Strip */
body.itemid-101 .moduletable:has(.trust-strip){
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.itemid-101 .moduletable:has(.trust-strip) .module-content{
  padding: 0 !important;
}
/* Remove the module "box" only for the Trust Strip module */
body.itemid-101 .trust-strip-wrapless{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.itemid-101 .trust-strip-wrapless .module-content{
  padding: 0 !important;
}
/* Why Section */
body.itemid-101 .why-section {
  text-align: center;
  padding: 10px 0 20px;
}

body.itemid-101 .why-section h2 {
  margin-bottom: 28px;
  font-weight: 800;
}

/* Grid layout */
body.itemid-101 .why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Cards */
body.itemid-101 .why-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 24px 20px;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.itemid-101 .why-card h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 700;
}

body.itemid-101 .why-card p {
  margin: 0;
  line-height: 1.6;
  font-size: 0.98rem;
}

/* Subtle hover lift */
body.itemid-101 .why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

/* Responsive */
@media (max-width: 900px) {
  body.itemid-101 .why-grid {
    grid-template-columns: 1fr;
  }
}
/* Add breathing room to Why section */
body.itemid-101 .why-section {
  padding-top: 10px;
  padding-bottom: 20px;
}

/* Slightly increase space above heading */
body.itemid-101 .why-section h2 {
  margin-bottom: 32px;
}
/* Services Section */
body.itemid-101 .services-section {
  text-align: center;
  padding: 10px 0 20px;
}

body.itemid-101 .services-section h2 {
  color: #000000;
  margin-bottom: 30px;
  font-weight: 800;
}

body.itemid-101 .services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Service Cards */
body.itemid-101 .service-card {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 26px 22px;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.itemid-101 .service-card h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: 700;
}

body.itemid-101 .service-card p {
  margin-bottom: 16px;
  line-height: 1.6;
  font-size: 0.98rem;
}

body.itemid-101 .service-link {
  font-weight: 700;
  text-decoration: none;
  color: #c9a227;
}

body.itemid-101 .service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

/* Responsive */
@media (max-width: 900px) {
  body.itemid-101 .services-grid {
    grid-template-columns: 1fr;
  }
}
/* Make Services section stand out slightly */
body.itemid-101 .services-section {
  background: #ffffff;
  padding: 20px 0 20px;
  border-radius: 0;
}
body.itemid-101 .service-link {
  color: #c9a227;
  transition: letter-spacing 0.2s ease;
}

body.itemid-101 .service-link:hover {
  letter-spacing: 0.5px;
}
/* HOME ONLY: remove the default module wrapper "boxes" */
body.itemid-101 .grid-child.container-component .moduletable{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* HOME ONLY: remove inner padding that makes it look boxed */
body.itemid-101 .grid-child.container-component .moduletable .module-content{
  padding: 0 !important;
}
/* HOME: allow specific modules to "float" by removing the home-box chrome */
body.itemid-101 .home-box.wrapless{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.itemid-101 .home-box.wrapless .module-content{
  padding: 0 !important;
}
/* HOME: tighten overall vertical rhythm */
body.itemid-101 .moduletable{
  margin-bottom: 20px !important;
}
/* HOME: tighten the inside spacing of module content a bit */
body.itemid-101 .module-content{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* =========================================================
   HOME (itemid-101) — Vertical rhythm / spacing polish
   ========================================================= */

/* Global spacing knobs (easy to tweak) */
body.itemid-101{
  --home-gap: 28px;        /* space between major blocks */
  --home-gap-tight: 16px;  /* space between a heading and its content */
}

/* Consistent spacing between each homepage module block */
body.itemid-101 .home-dash-block{
  margin-top: var(--home-gap) !important;
  margin-bottom: 0 !important;
}

/* Keep the hero from pushing too far down */
body.itemid-101 .home-dash-block:first-of-type{
  margin-top: 16px !important;
}

/* Consistent heading-to-content spacing inside blocks */
body.itemid-101 .home-dash-block h2,
body.itemid-101 .home-dash-block h3{
  margin: 0 0 var(--home-gap-tight) 0 !important;
}

/* If your block headings are not h2/h3 (some are p/div), this still helps */
body.itemid-101 .home-dash-block .module-title{
  margin: 0 0 var(--home-gap-tight) 0 !important;
}

/* Tighten “Our Core Services” block a hair (often has extra padding) */
body.itemid-101 .home-services{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Trust strip: reduce extra space above/below so it sits “in the flow” */
body.itemid-101 .trust-strip{
  margin-top: calc(var(--home-gap) - 6px) !important;
  margin-bottom: calc(var(--home-gap) - 6px) !important;
}

/* Reduce the big gap before the footer if one module is still leaving air */
body.itemid-101 main .home-dash-block:last-of-type{
  margin-bottom: 22px !important;
}
/* Tighten specific section spacing */

body.itemid-101 .home-intro{
  margin-bottom: 14px !important;
}

body.itemid-101 .home-services{
  margin-top: 18px !important;
  margin-bottom: 14px !important;
}

body.itemid-101 .trust-strip{
  margin-top: 14px !important;
  margin-bottom: 18px !important;
}
body.itemid-101 .trust-strip{
  margin-bottom: 12px !important;
}
/* =======================================================================
   ⚠️  WARNING — DO NOT MODIFY ANYTHING ABOVE THIS LINE  ⚠️

   The code above this marker is a stabilized, production-tuned layout.
   It has been carefully spaced, rhythm-balanced, hover-tested, and
   cross-device verified.

   Any changes above this line may result in:

   - Broken layout spacing
   - Collapsing margins
   - Hover states disappearing
   - Buttons turning into chaos
   - Trust pills rebelling
   - Joomla awakening ancient template demons

   If you feel compelled to edit something above this line,
   STOP. Duplicate the rule below this marker and override it instead.

   This boundary exists to protect Future You from Past You.

      Disturbing the code above this line may unleash
   the Spirit of Margin Collapse, the Ghost of Specificity,
   and the Curse of !important.

   Do not break the seal.

   You have been warned.
   ======================================================================= */
/* Gallery "mini hero" cards */
.gallery-hero-wrap{
  max-width: 1120px;          /* <-- makes it a little narrower than full width */
  margin: 0 auto;
  padding: 0 18px;
}

.gallery-hero-list{
  display: grid;
  gap: 28px;
}

/* One big image card */
.gallery-hero-card{
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  background: #000;
}

/* Maintain a nice "hero-ish" height without being enormous */
.gallery-hero-card{
  height: clamp(260px, 34vw, 420px);
}

/* Image fill */
.gallery-hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
}

/* Dark fade at bottom like the hero caption area */
.gallery-hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.60) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,0) 70%);
  pointer-events:none;
}

/* Gold pill top-left */
.gallery-hero-pill{
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  background: var(--tc-gold, #b08b2e);
  color: #111;
}

/* Optional: tweak per category if you want slightly different shades */
.gallery-hero-pill.is-commercial{ background: var(--tc-gold, #b08b2e); }
.gallery-hero-pill.is-municipal{ background: var(--tc-gold, #b08b2e); }

/* Caption bottom-left */
.gallery-hero-caption{
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  max-width: 85%;
}

.gallery-hero-title{
  display: inline-block;
  color: #fff;
  font-weight: 900;
  /* This is the “hero caption” look — adjust if you want tighter match */
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.05;
  text-shadow: 0 2px 18px rgba(0,0,0,.65);
}

/* Subtle hover polish */
.gallery-hero-card:hover .gallery-hero-img{
  transform: scale(1.035);
  transition: transform .18s ease;
}
.gallery-hero-card:hover{
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  transition: box-shadow .18s ease;
}
/* === Gallery "Mini Hero" Cards === */
.gallery-hero-wrap{
  max-width: 1280px;          /* slightly narrower than full page */
  margin: 0 auto;
  padding: 0 18px;
}

.gallery-hero-list{
  display: grid;
  gap: 28px;
}

/* The card */
.gallery-hero-card{
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  background: #000;
  height: clamp(260px, 34vw, 420px);
}

/* Image fill */
.gallery-hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
}

/* bottom fade for text readability */
.gallery-hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.22) 42%,
    rgba(0,0,0,0) 74%
  );
  pointer-events:none;
}

/* Gold pill top-left */
.gallery-hero-pill{
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  background: var(--tc-gold, #b08b2e);
  color: #111;
}

/* Caption bottom-left */
.gallery-hero-caption{
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  max-width: 85%;
}

/* Gallery card title -> match Hero caption title */
.gallery-hero-title{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 24.8px;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: rgba(0,0,0,.45) 0 2px 18px;
}

/* Hover polish */
.gallery-hero-card:hover .gallery-hero-img{
  transform: scale(1.035);
  transition: transform .18s ease;
}
.gallery-hero-card:hover{
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  transition: box-shadow .18s ease;
}
.cc-backwrap{
  margin: 0 0 18px 0;
}

.cc-backlink{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
}

.cc-backlink:hover{
  border-color: rgba(0,0,0,.22);
  text-decoration: none;
}
/* Back button (gallery articles) — calmer + smaller */
.cc-backlink{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  /* smaller pill */
  padding: 7px 12px;
  border-radius: 999px;

  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(6px);

  /* default text = black */
  color: #111;
  font-weight: 700;
  font-size: .90rem;
  text-decoration: none;

  /* gentler hover lift */
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);

  /* smoother transitions */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease, letter-spacing .18s ease;
  letter-spacing: 0;
}

.cc-backlink:hover{
  /* less jump */
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  border-color: rgba(198,167,94,.55);

  /* hover text = gold */
  color: #c6a75e;

  /* subtle spread, not loud */
  letter-spacing: .4px;
}

.cc-backlink:active{
  transform: translateY(-1px);
}
/* ===== Contact Form Styling (Joomla com_contact) ===== */
.com_contact .contact-form,
.com_contact form#contact-form {
  max-width: 760px;
  margin: 0 auto;
}

.com_contact .control-group,
.com_contact .form-group {
  margin-bottom: 16px;
}

.com_contact label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}

.com_contact input[type="text"],
.com_contact input[type="email"],
.com_contact input[type="tel"],
.com_contact input[type="subject"],
.com_contact textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.18);
  padding: 12px 14px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.com_contact textarea {
  min-height: 170px;
  resize: vertical;
}

.com_contact input:focus,
.com_contact textarea:focus {
  outline: none;
  border-color: rgba(0,0,0,0.35);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}

/* Submit button “pill” */
.com_contact button[type="submit"],
.com_contact .btn-primary {
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;

  /* Match your “pill” vibe */
  background: var(--accent-gold, #d4af37);
  color: #000;

  transition: transform 160ms ease, box-shadow 160ms ease, letter-spacing 200ms ease, color 160ms ease, background 160ms ease;
  box-shadow: 0 10px 20px rgba(0,0,0,0.18);
}

.com_contact button[type="submit"]:hover,
.com_contact .btn-primary:hover {
  transform: translateY(-2px);     /* smaller, less erratic jump */
  letter-spacing: 0.06em;         /* subtle “spread” */
  color: var(--accent-gold, #d4af37);
  background: #000;
  box-shadow: 0 14px 26px rgba(0,0,0,0.22);
}

.com_contact button[type="submit"]:active,
.com_contact .btn-primary:active {
  transform: translateY(-1px);
}
/* Desktop hover dropdown behavior for Cassiopeia */
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}
/* Residential landing image crop */

.res-hero-img,
.res-section-img {
  position: relative;
  overflow: hidden;
  border-radius: 14px; /* match your carousel */
  border: 3px solid #000; /* black outline like homepage */
}

.res-hero-img img,
.res-section-img img {
  width: 100%;
  height: 420px; /* adjust if you want slightly taller/shorter */
  object-fit: cover;
  display: block;
}
/* Center logo + tagline together (responsive) */
header .navbar-brand{
  width: fit-content;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Make sure the logo itself is centered */
header .navbar-brand .brand-logo{
  display: block;
  margin: 0 auto;
}

/* Center the tagline and remove any left offsets */
header .site-description{
  margin: .25rem 0 0;
  text-align: center;
  width: 100%;
}

/* IMPORTANT: remove the old nudge */
header .header.container-header.full-width .site-description{
  margin-left: 0 !important;
}
/* === FIX: keep tagline centered under logo (override old 32px rule) === */
header.header.container-header.full-width .navbar-brand{
  display: flex;
  flex-direction: column;
  align-items: center;
}

header.header.container-header.full-width .site-description{
  margin-left: 0 !important;   /* nukes the old 32px */
  width: auto !important;      /* don't force a weird width */
  text-align: center;
}
/* --- Mobile sticky call bar (mobile only) --- */
.mobile-callbar { display: none; }

@media (max-width: 991px){
  .mobile-callbar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;

    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;

    padding: 10px 12px;
    background: rgba(255,255,255,.96);
    border-top: 1px solid rgba(0,0,0,.12);
    backdrop-filter: blur(8px);
  }

  .mobile-callbar .callbar-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
  }

  :root {
  --brand-gold: #c9a227;
}

.mobile-callbar .callbar-call{
  background: #111;
  color: var(--brand-gold) !important;
  flex: 1;
  text-align: center;
  border: 1px solid var(--brand-gold);
}

.mobile-callbar .callbar-call:hover{
  background: #111;
  color: #fff !important;
  border-color: #fff;
}

.mobile-callbar .callbar-estimate{
  background: var(--brand-gold);
  color: #111;
  border: 1px solid #111;
}

.mobile-callbar .callbar-estimate:hover{
  background: #b8921f;
  color: #111;
}

  /* Prevent overlap at the bottom */
  body{ padding-bottom: 72px; }
}
/* ===== Top announcement bar ===== */
.top-announce {
  width: 100%;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  padding: 10px 14px;
  background: #111;
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
}

.top-announce a {
  color: rgba(201,162,39,.95); /* your pill gold */
  text-decoration: none;
  font-weight: 900;
}

.top-announce a:hover {
  text-decoration: underline;
}

.top-announce__btn {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(201,162,39,.95);
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.15);
  text-decoration: none;
  font-weight: 900;
}

/* Mobile: stack nicely */
@media (max-width: 991px) {
  .top-announce {
    flex-direction: column;
    text-align: center;
  }
}
/* ===== Desktop sticky call bar (Banner position) ===== */

/* Make the banner row sticky at the top (desktop only) */
@media (min-width: 992px){
  .site-grid .container-banner.full-width{
    position: sticky;
    top: 0;
    z-index: 998;
  }

  /* Keep the header above the banner when it reappears */
  header.header.container-header.position-sticky{
    z-index: 999;
  }
}

/* Hide the banner call bar on mobile/tablet (you have bottom CTA already) */
@media (max-width: 991.98px){
  .site-grid .container-banner.full-width{
    display: none !important;
  }
}
/* ===== Stage Pill (Before/During/After) on job detail carousel images ===== */

/* Wrap created by JS so pill can be positioned */
.fg-stage-wrap{
  position: relative;
  display: block;
}

/* The pill itself */
.fg-stage-pill{
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  z-index: 50;
  pointer-events: none;
}

/* Stage colors */
/* Match the gold style used elsewhere on the site */

.fg-stage-pill.before,
.fg-stage-pill.during,
.fg-stage-pill.after {
  background: #c9a227;   /* gold */
  color: #000;           /* black text */
  border: 2px solid rgba(0,0,0,0.25);
}
/* ===== Commercial Landing: Hero + Trust Bar + Cards ===== */

.svc-hero{
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  background-image: var(--hero);
  background-size: cover;
  background-position: center 60%; /* keeps pavement detail in view */
  border-radius: 18px;
  overflow: hidden;
  margin: 18px 0 26px;
}

/* dark overlay so text always readable */
.svc-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.46) 46%, rgba(0,0,0,.12) 100%);
}

.svc-hero__inner{
  position: relative;
  width: 100%;
  padding: clamp(20px, 4vw, 44px);
}

.svc-hero__content{
  max-width: 820px;
  color: #fff;
}

.svc-hero h1{
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.08;
  margin: 0 0 12px;
}

.svc-hero p{
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  margin: 0 0 18px;
  opacity: .95;
}

/* Buttons */
.svc-hero__buttons{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0 18px;
}

.btn-gold{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 800;
  letter-spacing: .2px;
  background: #d6b04c;
  color: #111 !important;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-gold:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  filter: brightness(1.02);
}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.18);
  transition: transform .18s ease, background .18s ease;
}
.btn-ghost:hover{
  transform: translateY(-2px);
  background: rgba(0,0,0,.26);
}

/* Trust bar */
.trust-bar{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 8px;
}
.trust-item{
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 10px 12px;
  backdrop-filter: blur(6px);
}
.trust-title{
  font-weight: 900;
  letter-spacing: .2px;
}
.trust-sub{
  font-size: 13px;
  opacity: .9;
  margin-top: 2px;
}

/* Wrap + headings */
.svc-wrap{
  padding: 6px 0 10px;
}
.svc-grid-head{
  max-width: 980px;
  margin: 0 auto 14px;
  padding: 0 6px;
}
.svc-grid-head h2{
  font-size: clamp(22px, 2.1vw, 32px);
  margin: 0 0 6px;
}
.svc-grid-head p{
  margin: 0;
  opacity: .85;
}

/* Cards */
.svc-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin: 16px 0 18px;
}
.svc-card{
  display:block;
  text-decoration:none;
  border-radius: 18px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
  color: inherit;
}
.svc-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
}
.svc-card h3{
  margin: 0 0 8px;
  font-size: 18px;
}
.svc-card p{
  margin: 0 0 10px;
  opacity: .82;
  line-height: 1.5;
}
.svc-link{
  font-weight: 900;
  color: #b08f2f;
}

/* Split section */
.svc-split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  margin-top: 12px;
  align-items: start;
}
.svc-list{
  margin: 10px 0 0;
  padding-left: 18px;
  line-height: 1.7;
}
.svc-ctaBox{
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.btn-block{ width: 100%; }
.svc-note{
  font-size: 13px;
  opacity: .75;
  margin-top: 10px;
  text-align: center;
}

/* Responsive */
@media (max-width: 980px){
  .svc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .trust-bar{ grid-template-columns: 1fr; }
  .svc-split{ grid-template-columns: 1fr; }
  .svc-hero{ min-height: 56vh; }
}

@media (max-width: 560px){
  .svc-grid{ grid-template-columns: 1fr; }
  .svc-hero{ border-radius: 14px; }
}
.footer-review{
max-width:200px;
text-align:center;
margin-left:auto;
}

.footer-review-title{
font-weight:600;
margin-bottom:4px;
}

.footer-review-text{
margin-bottom:10px;
}

.footer-review-qr{
width:150px;
height:auto;
}

.footer-review-note{
font-size:12px;
opacity:.8;
margin-top:6px;
}
.footer-review{
height:100%;
display:flex;
align-items:flex-end;
justify-content:flex-end;
}

.footer-review-inner{
text-align:center;
max-width:180px;
}

.footer-review-qr{
width:150px;
height:auto;
}
.footer .container,
.footer-bottom .container {
    max-width: 100%;
}
.review-footer{
display:flex;
align-items:center;
gap:12px;
}

.review-text{
font-size:16px;
line-height:1.3;
}

.review-qr img{
max-width:120px;
height:auto;
}

.review-caption{
font-size:12px;
text-align:center;
margin-top:4px;
}
/* --- Review QR footer module --- */
.review-footer{
  display:flex;
  align-items:flex-start;        /* <-- fixes the “padding above” look */
  justify-content:flex-end;
  gap:14px;
}

.review-text{
  text-align:right;
  line-height:1.25;
  margin-top:0;
}

.review-title{
  font-weight:700;
  margin:0 0 4px 0;
}

.review-link{
  display:inline-block;
  text-decoration:none;
}

.review-sub{
  font-size:12px;
  opacity:.8;
  margin-top:4px;
}

.review-qr{
  text-decoration:none;
  color:inherit;
  display:block;
  text-align:center;
}

.review-qr img{
  display:block;
  width:120px;                  /* tweak to 130–150 if you want bigger */
  height:auto;
  margin:0 auto;
}

.review-caption{
  font-size:12px;
  opacity:.8;
  margin-top:6px;
}

/* --- FULL-WIDTH divider fix for Cassiopeia Extended footer/subfooter --- */
.footer-bottom{
  position:relative;
}

.footer-bottom::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0;
  width:100vw;                  /* <-- forces full-bleed line */
  border-top:1px solid rgba(0,0,0,.12);
}
/* === Review QR module: remove template padding & align to top === */
.reviewQR{
  margin-top:0 !important;
  padding-top:0 !important;
}

.reviewQR .moduletable,
.reviewQR .module-body,
.reviewQR .card,
.reviewQR .card-body{
  margin-top:0 !important;
  padding-top:0 !important;
}

.reviewQR .review-footer{
  align-items:flex-start !important; /* keep top aligned */
}

.reviewQR .review-qr{
  align-self:flex-start;
  padding-top:0 !important;
  margin-top:0 !important;
}

.reviewQR .review-qr img{
  display:block;
  margin-top:0 !important;
}
/* === Full-width divider above the sub-footer/copyright row === */
footer{
  position:relative;
}

/* FULL-WIDTH divider at the top of the sub-footer */
footer.container-footer.footer.full-width .ob-footer-bottom{
  border-top: none !important;          /* kill the short line */
  position: relative;
}

footer.container-footer.footer.full-width .ob-footer-bottom::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0;
  width:100vw;                          /* full width across the screen */
  border-top:1px solid rgba(0,0,0,.08);
  pointer-events:none;
}
/* Lift the review/QR module up inside the footer grid */
footer.container-footer.footer.full-width #mod-custom128{
  margin-top: -10px;
}
footer.container-footer.footer.full-width .ob-footer-bottom{
  z-index: 1;
}

footer.container-footer.footer.full-width .ob-footer-bottom::before{
  z-index: 10;       /* force divider above footer content */
}
footer.container-footer.footer.full-width .review-footer{
  position: relative;
  z-index: 0;
}
/* Keep divider visible across the QR column */
footer.container-footer.footer.full-width .ob-footer-bottom{
  z-index: 1;
}
footer.container-footer.footer.full-width .ob-footer-bottom::before{
  z-index: 999;
}

/* Lift review block and prevent it from covering the divider */
footer.container-footer.footer.full-width .review-footer{
  position: relative;
  z-index: 0;
  margin-top: -10px; /* tweak: -6 to -14 */
}
/* ==== FINAL FOOTER FIX – overrides all earlier attempts ==== */

/* remove the short divider */
footer.container-footer.footer.full-width .ob-footer-bottom {
  border-top: none !important;
  position: relative;
}

/* draw a full width divider that cannot be covered */
footer.container-footer.footer.full-width .ob-footer-bottom::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 100vw;
  border-top: 1px solid rgba(0,0,0,.08);
  z-index: 9999;
  pointer-events: none;
}

/* raise the QR review block slightly */
footer.container-footer.footer.full-width .review-footer {
  margin-top: -14px;
}
/* ===== FINAL FIX: divider belongs to the footer wrapper, not ob-footer-bottom ===== */

/* 1) Kill any existing short divider(s) */
footer.container-footer.footer.full-width .ob-footer-bottom{
  border-top: none !important;
}

/* 2) Give the footer content breathing room so the QR can't sit on the divider */
footer.container-footer.footer.full-width .ob-footer-inner{
  padding-bottom: 22px; /* adjust 18–30 if you want */
}

/* 3) Draw the divider on the footer wrapper (full width, above everything) */
footer.container-footer.footer.full-width .ob-footer{
  position: relative;
}

footer.container-footer.footer.full-width .ob-footer::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;                 /* bottom of the footer content */
  width:100vw;
  border-top:1px solid rgba(0,0,0,.08);
  z-index:9999;
  pointer-events:none;
}

/* 4) Optional: lift the review block a bit if you still want it higher */
footer.container-footer.footer.full-width .review-footer{
  margin-top:-12px;         /* tweak -6 to -16 */
  margin-bottom:10px;       /* keeps it off the divider */
}
.review-stars{
  color:#d4af37;
  letter-spacing:3px;
  font-size:18px;
}
/* Footer link hover color = site gold */
footer a,
footer a:visited{
  color:#000; /* keeps your normal state black */
}

footer a:hover,
footer a:focus{
  color: var(--gold, #c9a227) !important; /* uses your gold if you have a CSS var, else fallback */
  text-decoration: none;
}
/* =========================
   FINAL: Footer divider + QR module (#mod-custom128)
   ========================= */

/* 1) Kill the weird partial divider that comes from ob-footer-bottom */
footer.container-footer.footer.full-width .ob-footer-bottom,
footer.container-footer.footer.full-width .ob-footer-bottom::before,
footer.container-footer.footer.full-width .ob-footer-bottom::after{
  border: 0 !important;
  content: none !important;
}

/* 2) Draw ONE clean divider at the bottom of the main footer content (full width) */
footer.container-footer.footer.full-width .ob-footer{
  position: relative;
  padding-bottom: 18px; /* space so the divider doesn't touch anything */
}

footer.container-footer.footer.full-width .ob-footer::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid rgba(0,0,0,.08);
  pointer-events: none;
}

/* 3) Make the QR module behave like a true "4th column" in the footer area */
footer.container-footer.footer.full-width #mod-custom128{
  margin-top: -10px;      /* lifts it to align with the other footer headings */
  padding-top: 0;
  position: relative;
  z-index: 2;
}

/* 4) Ensure the QR module never causes a “cut” illusion on the divider */
footer.container-footer.footer.full-width #mod-custom128,
footer.container-footer.footer.full-width #mod-custom128 *{
  background: transparent !important;
}
/* Put back ONE clean full-width footer divider */
footer.container-footer.footer.full-width .ob-footer::after{
  content:"";
  display:block;
  border-top:1px solid rgba(0,0,0,.10);
  margin-top: 22px;
}
/* Fallback divider if ob-footer::after doesn't render */
footer.container-footer.footer.full-width .grid-child{
  border-top:1px solid rgba(0,0,0,.10);
  padding-top: 18px;
}
/* Subtle star pulse animation */
.review-stars{
  display:inline-block;
  color:#d4af37;
  letter-spacing:3px;
  animation: starPulse 3.5s ease-in-out infinite;
}

@keyframes starPulse{
  0%   { transform: scale(1); opacity:.9; }
  50%  { transform: scale(1.08); opacity:1; }
  100% { transform: scale(1); opacity:.9; }
}
/* QR code hover lift */
.review-qr img{
  transition: transform .25s ease;
}

.review-qr img:hover{
  transform: translateY(-6px);
}
.about-page-section {
  padding: 70px 20px;
  background: linear-gradient(to bottom, #f8f8f8, #ffffff);
}

.about-page-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.about-page-top {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 45px;
}

.about-page-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  object-fit: cover;
}

.about-eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #b08a2e;
}

.about-page-intro h1 {
  margin: 0 0 16px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  color: #111;
}

.about-lead {
  margin: 0 0 24px;
  font-size: 1.08rem;
  line-height: 1.8;
  color: #444;
  max-width: 700px;
}

.about-highlight-box {
  background: #111;
  color: #fff;
  padding: 22px 24px;
  border-left: 4px solid #b08a2e;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.about-highlight-box p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.75;
}

.about-page-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 35px;
}

.about-detail-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-detail-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.12);
}

.about-detail-card h3 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  color: #111;
}

.about-detail-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: #444;
}

.about-detail-card-full {
  grid-column: 1 / -1;
}

.about-page-closer {
  margin-top: 10px;
  padding: 28px 30px;
  border-radius: 18px;
  background: #f3f3f3;
  border: 1px solid rgba(0,0,0,0.06);
}

.about-page-closer p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.85;
  color: #333;
}

.about-work-gallery {
  margin-top: 35px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.about-work-gallery img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}

@media (max-width: 991px) {
  .about-page-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-page-details {
    grid-template-columns: 1fr;
  }

  .about-detail-card-full {
    grid-column: auto;
  }

  .about-work-gallery {
    grid-template-columns: 1fr;
  }
}
.about-work-showcase {
  margin-top: 45px;
  padding-top: 10px;
}

.about-work-header {
  text-align: center;
  margin-bottom: 22px;
}

.about-work-header h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: #111;
}

.about-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

.about-work-item {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}

.about-work-item img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.about-work-item:hover img {
  transform: scale(1.04);
}

.about-work-item-large img {
  min-height: 540px;
}

@media (max-width: 991px) {
  .about-work-grid {
    grid-template-columns: 1fr;
  }

  .about-work-item-large img,
  .about-work-item img {
    min-height: 260px;
  }
}
.about-work-item img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.section-divider {
  width: 60px;
  height: 3px;
  background: #c79c2d;
  margin: 40px auto;
  border-radius: 2px;
}
.about-cta {
  margin-top: 60px;
  padding: 50px 20px;
  text-align: center;
  background: linear-gradient(to bottom,#ffffff,#f5f5f5);
}

.about-cta-wrap {
  max-width: 700px;
  margin: 0 auto;
}

.about-cta h2 {
  font-size: 2rem;
  margin-bottom: 12px;
}

.about-cta p {
  font-size: 1.05rem;
  margin-bottom: 22px;
  color: #444;
}

.about-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.about-call-btn {
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  background: #111;
  color: #fff;
  font-weight: 600;
}

.about-estimate-btn {
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  background: #c79c2d;
  color: #111;
  font-weight: 600;
}
.section-divider {
  width: 60px;
  height: 3px;
  background: #c79c2d;
  margin: 55px auto 35px auto;
  border-radius: 2px;
}
/* =========================================================
   MUNICIPAL LANDING PAGE
   ========================================================= */

.municipal-landing {
  color: #1a1a1a;
}

.municipal-container {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

.municipal-section {
  padding: 80px 0;
  position: relative;
}

.municipal-section-heading {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.municipal-kicker,
.municipal-eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #c8a63b;
  margin-bottom: 14px;
}

.municipal-section-heading h2,
.municipal-cta-box h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 0 0 18px;
  color: #111;
}

.municipal-section-heading p,
.municipal-cta-box p,
.municipal-card p,
.municipal-feature p,
.municipal-hero p {
  font-size: 1.02rem;
  line-height: 1.8;
  margin: 0;
}

/* HERO */
.municipal-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;
  overflow: hidden;
  background:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.62)),
    url("/images/municipal/municipal-hero.jpg") center center / cover no-repeat;
  border-radius: 0 0 28px 28px;
}

.municipal-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45));
  pointer-events: none;
}

.municipal-hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  text-align: center;
  color: #fff;
}

.municipal-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1.08;
  margin: 0 0 20px;
  color: #fff;
}

.municipal-hero p {
  max-width: 720px;
  margin: 0 auto 30px;
  color: rgba(255,255,255,0.92);
}

/* BUTTON */
.municipal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 999px;
  background: #c8a63b;
  color: #111;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,0.16);
}

.municipal-btn:hover,
.municipal-btn:focus {
  transform: translateY(-3px);
  background: #111;
  color: #c8a63b;
  text-decoration: none;
  box-shadow: 0 16px 36px rgba(0,0,0,0.22);
}

/* INTRO */
.municipal-intro {
  background: #fff;
}

/* SERVICES */
.municipal-services {
  background:
    linear-gradient(180deg, #f8f8f8 0%, #f2f2f2 100%);
}

.municipal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.municipal-card {
  background: #fff;
  border-radius: 22px;
  padding: 30px 26px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.05);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.municipal-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(0,0,0,0.12);
  border-color: rgba(200,166,59,0.35);
}

.municipal-card h3 {
  font-size: 1.28rem;
  line-height: 1.25;
  margin: 0 0 14px;
  color: #111;
}

/* BENEFITS */
.municipal-benefits {
  background: #fff;
}

.municipal-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.municipal-feature {
  background: #111;
  color: #fff;
  border-radius: 22px;
  padding: 28px 24px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.16);
}

.municipal-feature h3 {
  font-size: 1.18rem;
  margin: 0 0 12px;
  color: #c8a63b;
}

.municipal-feature p {
  color: rgba(255,255,255,0.88);
}

/* CTA */
.municipal-cta {
  padding-top: 20px;
  padding-bottom: 90px;
}

.municipal-cta-box {
  background:
    linear-gradient(135deg, #111 0%, #1f1f1f 100%);
  color: #fff;
  text-align: center;
  padding: 54px 32px;
  border-radius: 28px;
  box-shadow: 0 24px 50px rgba(0,0,0,0.18);
}

.municipal-cta-box h2 {
  color: #fff;
}

.municipal-cta-box p {
  max-width: 740px;
  margin: 0 auto 28px;
  color: rgba(255,255,255,0.9);
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .municipal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .municipal-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .municipal-section {
    padding: 64px 0;
  }

  .municipal-hero {
    min-height: 480px;
    border-radius: 0 0 22px 22px;
    padding: 80px 18px;
  }

  .municipal-grid,
  .municipal-feature-grid {
    grid-template-columns: 1fr;
  }

  .municipal-card,
  .municipal-feature,
  .municipal-cta-box {
    border-radius: 18px;
  }

  .municipal-btn {
    width: 100%;
    max-width: 280px;
  }
}
/* =========================================================
   MUNICIPAL PAGE — MATCHED CLOSER TO COMMERCIAL PAGE
   ========================================================= */

.municipal-page {
  padding: 48px 0 10px;
}

.municipal-shell {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
}

/* HERO */
.municipal-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.46)),
    url("/images/municipal/municipal-hero.jpg") center center / cover no-repeat;
  box-shadow: none;
}

.municipal-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.48) 0%,
    rgba(0, 0, 0, 0.30) 38%,
    rgba(0, 0, 0, 0.10) 100%
  );
  pointer-events: none;
}

.municipal-hero__content {
  position: relative;
  z-index: 2;
  width: min(680px, 100%);
  padding: 56px 44px;
  color: #fff;
}

.municipal-hero__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #d4af37;
}

.municipal-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.06;
  color: #fff;
}

.municipal-hero p {
  max-width: 900px;
  margin: 0 0 24px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
}

.municipal-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}

/* BUTTONS */
.municipal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.municipal-btn:hover,
.municipal-btn:focus {
  text-decoration: none;
  transform: translateY(-2px);
}

.municipal-btn--gold {
  background: #d4af37;
  color: #111;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.municipal-btn--gold:hover,
.municipal-btn--gold:focus {
  background: #e0bc4a;
  color: #111;
}

.municipal-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(2px);
}

.municipal-btn--ghost:hover,
.municipal-btn--ghost:focus {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}

.municipal-btn--full {
  width: 100%;
}

/* HERO HIGHLIGHTS */
.municipal-hero__highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 980px;
}

.municipal-highlight {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(40, 32, 26, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.municipal-highlight strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.02rem;
  line-height: 1.2;
  color: #fff;
}

.municipal-highlight span {
  display: block;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.84);
}

/* GENERAL SECTIONS */
.municipal-section {
  padding: 26px 0 0;
}

.municipal-section--tight {
  padding-top: 20px;
}

.municipal-heading {
  max-width: 960px;
  margin: 0 auto 20px;
}

.municipal-heading--left {
  max-width: 980px;
}

.municipal-heading h2 {
  margin: 0 0 8px;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.14;
  color: #111;
}

.municipal-heading p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: #555;
}

/* SERVICES GRID */
.municipal-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.municipal-service-card {
  background: #fff;
  border: 1px solid #dddddd;
  border-radius: 18px;
  padding: 20px 20px 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.municipal-service-card h3 {
  margin: 0 0 10px;
  font-size: 1.45rem;
  line-height: 1.2;
  color: #111;
}

.municipal-service-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: #555;
}

/* BOTTOM SECTION */
.municipal-bottom {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  align-items: start;
  padding: 18px 0 0;
}

.municipal-bottom__main h2 {
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.14;
  color: #111;
}

.municipal-bottom__main ul {
  margin: 0;
  padding-left: 22px;
}

.municipal-bottom__main li {
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 1.6;
  color: #222;
}

.municipal-bottom__cta {
  background: #fff;
  border: 1px solid #dddddd;
  border-radius: 22px;
  padding: 22px 22px 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.municipal-bottom__cta h3 {
  margin: 0 0 12px;
  font-size: 1.9rem;
  line-height: 1.2;
  color: #111;
}

.municipal-bottom__cta p {
  margin: 0 0 18px;
  font-size: 1rem;
  line-height: 1.65;
  color: #444;
}

.municipal-bottom__meta {
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
  color: #777;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .municipal-hero__highlights,
  .municipal-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .municipal-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .municipal-page {
    padding-top: 28px;
  }

  .municipal-shell {
    width: min(100%, calc(100% - 24px));
  }

  .municipal-hero {
    min-height: auto;
    border-radius: 20px;
  }

  .municipal-hero__content {
    width: 100%;
    padding: 34px 22px 24px;
  }

  .municipal-hero__actions,
  .municipal-hero__highlights,
  .municipal-services-grid {
    grid-template-columns: 1fr;
  }

  .municipal-hero__actions {
    display: grid;
  }

  .municipal-btn {
    width: 100%;
  }

  .municipal-service-card,
  .municipal-bottom__cta {
    border-radius: 18px;
  }
}
/* ===== Municipal page tweaks using commercial layout ===== */

.municipal-hero {
  background-position: center center;
}

.municipal-hero .svc-hero__content {
  max-width: 760px;
}
/* ===== Municipal page refinements ===== */

.municipal-hero {
  min-height: 440px;
  background-position: center 58%;
}

.municipal-hero__inner {
  display: flex;
  align-items: center;
  min-height: 440px;
}

.municipal-hero__layout {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 22px;
  width: 100%;
  max-width: 1080px;
}

.municipal-hero__content {
  max-width: 620px;
  flex: 0 1 620px;
}

.municipal-eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d6b04c;
}

.municipal-hero .svc-hero__content h1 {
  max-width: 560px;
  margin-bottom: 12px;
}

.municipal-hero .svc-hero__content p {
  max-width: 560px;
  margin-bottom: 16px;
}

.municipal-trust-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 250px;
  min-width: 250px;
  margin-top: 0;
}

.municipal-trust-bar .trust-item {
  padding: 12px 14px;
}

.municipal-trust-bar .trust-title {
  font-size: 16px;
}

.municipal-trust-bar .trust-sub {
  font-size: 13px;
  line-height: 1.45;
}

/* Card hover animation */
.svc-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
  border-color: rgba(176,143,47,.28);
}

/* Mobile / tablet cleanup */
@media (max-width: 980px) {
  .municipal-hero {
    min-height: auto;
    background-position: center center;
  }

  .municipal-hero__inner {
    min-height: auto;
  }

  .municipal-hero__layout {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 760px;
  }

  .municipal-trust-bar {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 767px) {
  .municipal-hero {
    min-height: auto;
  }

  .municipal-hero__content {
    max-width: 100%;
    flex: 1 1 auto;
  }

  .municipal-trust-bar {
    grid-template-columns: 1fr;
  }
}
/* ==========================================
   Gallery job card before/after slider
   ========================================== */

.gallery-hero-card--slider {
  position: relative;
}

.gallery-hero-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gallery-hero-card--slider .gallery-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: none;
}

.gallery-hero-slider__after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.gallery-hero-slider__after .gallery-hero-img {
  width: 100%;
  height: 100%;
}

/* Center divider line */
.gallery-hero-slider__handle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 10px rgba(0,0,0,.28);
  z-index: 2;
  pointer-events: none;
}

/* Center knob */
.gallery-hero-slider__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  border: 2px solid rgba(0,0,0,.10);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

/* Optional tiny arrows inside knob */
.gallery-hero-slider__handle::before {
  content: "↔";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  color: #111;
  z-index: 3;
}

/* Prevent old image hover scale from fighting slider */
.gallery-hero-card--slider:hover .gallery-hero-img {
  transform: none;
}

/* Slight card polish remains */
.gallery-hero-card--slider:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  transition: box-shadow .18s ease;
}
/* ==========================================
   Gallery job card before/after slider
   ========================================== */

.gallery-hero-card--slider {
  position: relative;
}

.gallery-hero-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gallery-hero-card--slider .gallery-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: none;
}

.gallery-hero-slider__after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.gallery-hero-slider__after .gallery-hero-img {
  width: 100%;
  height: 100%;
}

/* Vertical divider */
.gallery-hero-slider__handle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 10px rgba(0,0,0,.28);
  z-index: 2;
  pointer-events: none;
}

/* Center knob */
.gallery-hero-slider__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  border: 2px solid rgba(0,0,0,.10);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

/* Tiny arrows in knob */
.gallery-hero-slider__handle::before {
  content: "↔";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  color: #111;
  z-index: 3;
}

/* Keep old hover polish from fighting slider */
.gallery-hero-card--slider:hover .gallery-hero-img {
  transform: none;
}

.gallery-hero-card--slider:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  transition: box-shadow .18s ease;
}