/* ------------------------------------------------------------------
 * 1. Theme header visibility
 *
 * Hide the default theme header on desktop so the custom hero/menu
 * can take its place.  On mobile we show the native header so the
 * hamburger menu works correctly.  These rules simply toggle the
 * display property on the theme header elements based on viewport
 * width.
 */
@media (min-width: 992px) {
  .top-header-bar,
  .header-block,
  .site-header--static-header-type,
  .site-header,
  header.site-header {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .top-header-bar,
  .header-block,
  .site-header--static-header-type,
  .site-header,
  header.site-header {
    display: block !important;
  }
}

/* ------------------------------------------------------------------
 * 2. Theme colours and small overrides
 *
 * Minor palette adjustments.  Highlight the active menu item, set
 * the footer background colour and customise the back‑to‑top button.
 */
li.current-menu-item a span {
  background: #922b28;
  color: #fff;
}
/* Footer base background colour */
footer.site-footer {
  background-color: #253367 !important;
}
/* Back to top button colours */
.go-to-top {
  color: #fff;
  background-color: #3b51a3;
}

/* ------------------------------------------------------------------
 * 3. Global background behaviour
 *
 * Parallax images are fixed on desktop and scroll normally on
 * mobile.  Aspect ratio and positioning remain centred.
 */
.ratio {
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 991.98px) {
  .ratio {
    background-attachment: scroll !important;
  }
}

/* ------------------------------------------------------------------
 * 4. Page‑builder section toggle
 *
 * The site uses separate hero sections for desktop and mobile.  Only
 * the appropriate section is displayed for a given viewport.  The
 * mobile section remains hidden because the native theme header is
 * used instead of a custom mobile hero.
 */
@media (min-width: 992px) {
  .desktop-hero {
    display: block !important;
  }
  .mobile-hero {
    display: none !important; /* safety: hide legacy mobile section */
  }
}
@media (max-width: 991.98px) {
  .desktop-hero {
    display: none !important;
  }
  .mobile-hero {
    display: none !important; /* safety */
  }
}

/* ------------------------------------------------------------------
 * 5. Custom desktop menu
 *
 * A bespoke horizontal menu used on desktop.  The layout uses flexbox
 * and clamps font sizes to scale gracefully.  Dropdowns are styled
 * with transparency and subtle spacing, and active items are
 * highlighted in red.  Note: additional refinements for narrow
 * desktops and dropdown behaviour live in sections 9–12.
 */
@media (min-width: 992px) {
  .custom-menu-style {
    background-color: transparent;
    padding: 1px;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 50; /* stacking context for dropdowns */
  }

  .custom-menu-style ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
  }

  .custom-menu-style li {
    position: relative;
    z-index: 60;
  }

  .custom-menu-style li > a {
    font-size: 48px;
    color: #fff;
    text-decoration: none;
    padding: 0 25px;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
    text-transform: uppercase;
  }

  /* Hover state for top‑level links */
  .custom-menu-style li:hover > a {
    color: #922b28;
  }

  /* Dropdown menus: hidden until parent li is hovered */
  .custom-menu-style li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 0;
    box-shadow: none;
    white-space: nowrap;
    min-width: 150px;
    z-index: 1000;
    padding: 4px 0 !important; /* tightened vertical rhythm */
  }

  .custom-menu-style li ul a {
    font-size: 24px;
    color: #fff;
    padding: 6px 14px;
    line-height: 1.15;
    white-space: nowrap;
  }
  .custom-menu-style li ul a:hover {
    color: #922b28;
  }

  .custom-menu-style li:hover > ul {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* Active link highlighting */
  .custom-menu-style .current-menu-item > a,
  .custom-menu-style .current_page_item > a {
    color: #922b28 !important;
  }
}

/* ------------------------------------------------------------------
 * 6. Shared components
 *
 * Elements reused across multiple templates are defined here.
 * This includes galleries, hover effects, the quote button, and
 * several utility classes.  Duplicate declarations from the original
 * stylesheet have been merged to centralise behaviour.
 */

/* Portfolio gallery slides maintain a 16:9 aspect ratio and fill the width */
.portfolio-gallery .wpb_gallery_slides img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Reset default styling on portfolio gallery wrapper */
.portfolio-gallery {
  background: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  border: none !important;
  box-shadow: none !important;
  display: block;
}

/* Generic gallery within services (rl-gallery) uses 16:10 ratio and caps width */
.rl-gallery img {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* CES (commercial electrical services) row styling */
.ces-inner-row {
  display: flex;
  justify-content: space-around;
  position: relative;
}
.ces-inner-row .ces-icon-1 {
  transition: transform 0.3s ease, background 0.3s ease !important;
  width: 30%;
  position: relative;
}
.ces-inner-row .ces-icon-1:hover {
  transform: scale(1.1) !important;
  background-image: url('https://denverelectrical.com/wp-content/uploads/2024/06/f00a6f_20b662a8a4964c849f3ab57084ced561mv2.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  z-index: 2;
}
.ces-row:hover {
  background-color: #D9B84F !important;
}
.ces-inner-row .ces-icon-1:hover ~ .ces-row {
  background-color: #D9B84F !important;
}
.ces-inner-row .ces-icon-1:hover .ces-icon-image-1,
.ces-inner-row .ces-icon-1:hover .ces-icon-heading-1 {
  color: #D9B84F !important;
}

/* Portfolio text within a column is forced white */
.portfolio {
  color: #fff;
}

/* Subtle scaling on floating-head elements */
.floating-head {
  transition: transform 0.3s ease !important;
}
.floating-head:hover {
  transform: scale(1.05) !important;
  z-index: 10 !important;
  position: relative !important;
}

/* Social sharing widgets are disabled site‑wide */
.sharedaddy,
.sd-block,
.sd-social,
.sd-content,
#jp-post-flair {
  display: none !important;
}

/* Prevent enlarge‑on‑hover elements from scaling unexpectedly */
.enlarge-on-hover,
.enlarge-on-hover:hover {
  transform: none !important;
}

/* Quote button component
 *
 * The quote button comprises a text overlay (quote‑text) that fades
 * out on hover and a button overlay (quote‑button) that fades in.
 * The default button uses a white background with black text.  A
 * separate rule later targets specific page IDs to recolour the
 * button green for sustainability pages.
 */
.quote-button-container {
  position: relative;
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  height: auto;
  display: grid;
  place-items: center;
}
.quote-text,
.quote-button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: opacity 0.5s ease;
}
.quote-text {
  color: #fff;
  font-size: 40px;
  z-index: 2;
  opacity: 1;
}
.quote-button {
  text-decoration: none !important;
  color: #000 !important;
  background-color: #fff !important;
  font-size: 64px;
  padding: 20px 40px;
  border-radius: 10px;
  z-index: 3;
  opacity: 0;
  cursor: pointer;
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.quote-button-container:hover .quote-text {
  opacity: 0;
}
.quote-button-container:hover .quote-button {
  opacity: 1;
}
/* Ensure link states do not introduce underlines or colour changes */
.quote-button:hover,
.quote-button:focus,
.quote-button:active {
  color: #000 !important;
  background-color: #fff !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ------------------------------------------------------------------
 * 7. Forms
 *
 * The full‑size contact form lives inside a translucent panel with
 * consistent spacing, border radii and typography.  A pseudo‑element
 * inserts a heading above the form.  Individual fields are sized and
 * spaced uniformly and the submit button uses the brand red.
 */
.full-size-contact-form {
  background: rgba(255, 255, 255, 0.8) !important;
  padding: 20px !important;
  border-radius: 10px !important;
  max-width: calc(100% - 100px) !important;
  margin: 0 auto !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
}
.full-size-contact-form::before {
  content: "Contact Us for Commercial Electrical Contracting Services";
  display: block;
  text-align: center;
  font-size: 36px !important;
  font-weight: 700;
  color: #253367 !important;
  margin-bottom: 10px !important;
  padding: 10px !important;
}
.full-size-contact-form input[type="text"],
.full-size-contact-form input[type="email"],
.full-size-contact-form input[type="tel"],
.full-size-contact-form textarea,
.full-size-contact-form select {
  width: calc(100% - 30px) !important;
  margin: 5px 15px !important;
  padding: 5px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid #ccc !important;
  border-radius: 5px !important;
  color: #000 !important;
  font-size: 16px !important;
}
.full-size-contact-form textarea {
  height: 50px !important;
}
.full-size-contact-form ::placeholder {
  color: #777 !important;
  opacity: 1 !important;
}
.full-size-contact-form input[type="submit"] {
  background: #922b28 !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border: none !important;
  border-radius: 5px !important;
  font-size: 16px !important;
  cursor: pointer !important;
  margin-top: 10px !important;
}
.full-size-contact-form input[type="submit"]:hover {
  background: #751d1b !important;
}
.full-size-contact-form label {
  color: #253367 !important;
  font-size: 16px !important;
  display: block !important;
  margin-bottom: 5px !important;
}
.full-size-contact-form .gform_wrapper .gfield {
  margin-bottom: 10px !important;
}
.full-size-contact-form .gform_wrapper .gfield_label {
  margin-bottom: 5px !important;
}
.full-size-contact-form select {
  height: 30px !important;
}

/* ------------------------------------------------------------------
 * 8. Desktop hero layout
 *
 * The desktop hero section fills the viewport height and sets up
 * spacing and background behaviour.  Inner column padding is
 * stripped to align content flush, and the rightmost column is
 * translated upward slightly for visual rhythm.  The custom menu is
 * nudged upward.  Background containers are forced to match the
 * height of the row.
 */
@media (min-width: 992px) {
  .desktop-hero .home-hero-row {
    min-height: 100svh;
    display: flex;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    background-size: cover !important;
    background-position: center center !important;
    padding-top: 0vh;
    padding-bottom: 6vh;
  }
  .desktop-hero .home-hero-row .vc_column-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .desktop-hero .home-hero-row > .wpb_column:last-child {
    transform: translateY(-5vh);
  }
  .desktop-hero .home-hero-row .custom-menu-style {
    margin-top: -1rem !important;
  }
  .desktop-hero .home-hero-row .jarallax-container,
  .desktop-hero .home-hero-row .awb-row,
  .desktop-hero .home-hero-row .vc_row-bg {
    height: 100% !important;
    min-height: 100% !important;
  }
}

/* ------------------------------------------------------------------
 * 9. Desktop menu — smoother behaviour
 *
 * Fine‑tune typography and spacing for the custom menu on larger
 * screens.  Font sizes clamp between minimum and maximum values and
 * horizontal gaps adapt to viewport width.  For extremely wide
 * screens a wrap is allowed, and narrower desktops gain horizontal
 * scrolling.  Additional transforms adjust call buttons.
 */
@media (min-width: 992px) {
  .custom-menu-style li > a {
    font-size: clamp(20px, 2.6vw, 44px) !important;
    padding: 0 clamp(6px, 1.2vw, 20px) !important;
    line-height: 1.15;
    white-space: nowrap;
  }
  .custom-menu-style ul {
    gap: clamp(6px, 0.9vw, 18px) !important;
  }
}
@media (min-width: 1200px) and (max-width: 1360px) {
  .custom-menu-style ul {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 8px !important;
  }
  .custom-menu-style li {
    flex: 0 1 auto !important;
  }
  /* Extra flex item acts as spacer to center items when line wraps */
  .custom-menu-style ul::after {
    content: "";
    flex: 0 0 180px;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .custom-menu-style ul {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .custom-menu-style ul::-webkit-scrollbar {
    display: none;
  }
  .custom-menu-style li {
    flex: 0 0 auto !important;
  }
}
/* Call button easing on desktop for different viewport widths */
@media (min-width: 1500px) {
  .desktop-hero .home-hero-row h2.call-button {
    transform: translateY(-14px) !important;
  }
}
@media (min-width: 1200px) and (max-width: 1499.98px) {
  .desktop-hero .home-hero-row h2.call-button {
    transform: translateY(-12px) !important;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .desktop-hero .home-hero-row h2.call-button {
    transform: translateY(-8px) !important;
  }
}

/* ------------------------------------------------------------------
 * 10. Desktop menu — dropdown sizing, spacing and z‑order
 *
 * Additional adjustments to submenu font sizes, paddings and z‑order.
 * Dropdowns fade in/out using opacity and transform.  Submenus
 * inherit from the parent menu but keep their own max width and wrap
 * long labels gracefully.  Another rule later (section 12) ensures
 * submenus remain inside the viewport.
 */
@media (min-width: 992px) {
  /* Normalise submenu item size */
  .custom-menu-style ul ul li > a {
    font-size: 24px !important;
    padding: 8px 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  /* Restore original top‑level size ceiling and padding */
  .custom-menu-style > ul > li > a {
    font-size: clamp(20px, 2.6vw, 48px) !important;
    padding: 0 clamp(6px, 1.2vw, 25px) !important;
  }
  /* Tighten vertical spacing in dropdowns */
  .custom-menu-style ul ul {
    padding: 4px 0 !important;
  }
  .custom-menu-style ul ul li > a {
    line-height: 1.15 !important;
    padding: 6px 14px !important;
  }
  /* Hover visibility / stacking safety for submenus */
  .custom-menu-style ul {
    overflow: visible !important;
  }
  .custom-menu-style li ul {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
    overflow: visible !important;
    max-width: 90vw;
    overflow-wrap: break-word;
  }
  .custom-menu-style li:hover > ul {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }
}

/* ------------------------------------------------------------------
 * 11. Desktop narrow range — wrap to avoid odd zooms
 *
 * When space is tight, the menu wraps to additional rows without
 * enabling horizontal scrolling.  Flex items are allowed to shrink.
 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .custom-menu-style ul {
    flex-wrap: wrap !important;
    overflow: visible !important;
    row-gap: 6px !important;
  }
  .custom-menu-style li {
    flex: 0 1 auto !important;
  }
}

/* ------------------------------------------------------------------
 * 12. Desktop — keep submenus inside viewport
 *
 * Align nested dropdowns to the right of the parent so they never
 * extend beyond the screen.  Additional nested submenus cascade to
 * the left of their parents.  Max width is constrained via section
 * 10.
 */
@media (min-width: 992px) {
  .custom-menu-style ul ul {
    right: auto;
    left: auto;
  }
  .custom-menu-style ul li:hover > ul {
    display: block;
    position: absolute;
    left: auto;
    right: 0;
  }
  .custom-menu-style ul li ul li:hover > ul {
    left: auto;
    right: 100%;
  }
}

/* ------------------------------------------------------------------
 * 13. Mobile header — simplify and style
 *
 * On screens below 992px the header is reduced to a simple bar with
 * logo, call button and hamburger.  Search/social elements are
 * hidden and spacing is compact.  The call button is red by
 * default.  Additional overrides for certain page IDs (see section
 * 23) recolour the call button.
 */
@media (max-width: 991.98px) {
  /* Remove any top info bar / blue strip */
  .top-header-bar,
  .top-header-bar__row,
  .header-top,
  .top-area,
  .header-top-area {
    display: none !important;
  }
  /* Hide search and social icons in the header */
  .site-header .header-search,
  .site-header .header-search-toggle,
  .site-header .search-button,
  .site-header .header-element--search,
  .site-header .header-element--socials,
  .site-header .social-networks,
  .site-header .socials,
  .site-header .social-icon,
  .site-header .linkedin,
  .site-header [class*="icon-linkedin"] {
    display: none !important;
  }
  /* Make the header a simple left–center–right bar */
  .main-header,
  .site-header {
    background: #ffffff !important;
    background-image: none !important;
  }
  /* Flex container for logo, call button and hamburger */
  .site-header .header-wrapper,
  .site-header .site-header-wrapper,
  .site-header .site-header__container,
  .main-header .header-wrapper,
  .main-header .standard-menu-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    background: transparent !important;
  }
  /* Logo sizing */
  .site-header .site-logo img,
  .main-header .site-logo img {
    max-height: 48px !important;
    height: auto !important;
    width: auto !important;
  }
  /* Style telephone links as red buttons */
  .site-header a[href^="tel:"],
  .main-header a[href^="tel:"] {
    display: inline-block !important;
    background: #922b28 !important;
    border: 1px solid #922c29 !important;
    color: #fff !important;
    text-decoration: none !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    font-size: 14px !important;
  }
  /* Order: logo (left) – call (centre) – hamburger (right) */
  .site-header .site-logo,
  .main-header .site-logo {
    order: 1 !important;
  }
  .site-header a[href^="tel:"],
  .main-header a[href^="tel:"] {
    order: 2 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .site-header .menu-toggle,
  .site-header .hamburger,
  .site-header .hamburger-holder,
  .main-header .menu-toggle,
  .main-header .hamburger,
  .main-header .hamburger-holder {
    order: 3 !important;
  }
  /* Larger tap target for menu toggle */
  .site-header .menu-toggle,
  .main-header .menu-toggle {
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------
 * 14. Super‑narrow phones
 *
 * Allow the call button to wrap onto two lines on extremely small
 * screens (≤400px) while maintaining legibility.
 */
@media (max-width: 400px) {
  .site-header a[href^="tel:"],
  .main-header a[href^="tel:"] {
    white-space: normal !important;
    text-align: center !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    padding: 6px 8px !important;
    max-width: 110px !important;
  }
}

/* ------------------------------------------------------------------
 * 15. Portfolio title row
 *
 * Fixes the hero title row height to 350px on desktop and centres
 * contents both vertically and horizontally.  On mobile the row
 * flows naturally.  Additional rules force white text in the right
 * column.  Separate overrides handle sustainability and other
 * portfolio titles.
 */
@media (min-width: 992px) {
  /* When class is on the row itself */
  .portfolio-title-row,
  .portfolio-title-row.wpb_row,
  .portfolio-title-row.vc_row {
    height: 350px !important;
    min-height: 350px !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 10px !important;
  }
  /* When class is on a wrapper and the row is inside */
  .portfolio-title-row .wpb_row,
  .portfolio-title-row .vc_row {
    height: 350px !important;
    min-height: 350px !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 10px !important;
  }
  /* Columns fill the full height */
  .portfolio-title-row > .wpb_column,
  .portfolio-title-row > .vc_column_container,
  .portfolio-title-row .wpb_row > .wpb_column,
  .portfolio-title-row .vc_row > .vc_column_container {
    display: flex !important;
    align-items: stretch !important;
    height: 100% !important;
  }
  .portfolio-title-column,
  .portfolio-description-column {
    height: 100% !important;
  }
  /* Inner wrappers centre content vertically */
  .portfolio-title-row > .wpb_column > .vc_column-inner,
  .portfolio-title-row > .vc_column_container > .vc_column-inner,
  .portfolio-title-row .wpb_row > .wpb_column > .vc_column-inner,
  .portfolio-title-row .vc_row > .vc_column_container > .vc_column-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }
  /* Centre the title column content; left align description */
  .portfolio-title-column > .vc_column-inner {
    align-items: center !important;
    text-align: center !important;
  }
  .portfolio-description-column > .vc_column-inner {
    align-items: flex-start !important;
    text-align: left !important;
  }
  /* The title pill uses brand red */
  .portfolio-title {
    display: block;
    width: 100%;
    margin: 0 !important;
    color: #fff !important;
    background: #922b28 !important;
    padding: 12px 14px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: clamp(32px, 3.2vw, 55px) !important;
    line-height: 1.15 !important;
  }
  /* Description copy styling */
  .portfolio-description {
    margin: 0 !important;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
  }
  /* Force white text in the right column */
  .portfolio-title-row .portfolio-description,
  .portfolio-title-row .portfolio-description p,
  .portfolio-title-row .portfolio-description a,
  .portfolio-title-row .portfolio-description span,
  .portfolio-title-row .portfolio-description-column,
  .portfolio-title-row .portfolio-description-column p,
  .portfolio-title-row .portfolio-description-column a,
  .portfolio-title-row .portfolio-description-column span {
    color: #fff !important;
  }
}
@media (max-width: 991.98px) {
  .portfolio-title-row {
    display: block !important;
    height: auto !important;
    padding: 0 8px !important;
  }
  .portfolio-title {
    font-size: 34px !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
  .portfolio-description {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

/* ------------------------------------------------------------------
 * 16. Sustainability portfolio title override
 *
 * On sustainability portfolio pages the title uses a green background
 * instead of red.  This applies to both desktop and mobile.  Font
 * sizing mirrors the default portfolio title.
 */
@media (min-width: 992px) {
  .sustainability-portfolio-title {
    display: block;
    width: 100%;
    margin: 0 !important;
    color: #fff !important;
    background: #07581d !important;
    padding: 12px 14px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: clamp(32px, 3.2vw, 55px) !important;
    line-height: 1.15 !important;
  }
}
@media (max-width: 991.98px) {
  .sustainability-portfolio-title {
    font-size: 34px !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    background: #07581d !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
  }
}

/* ------------------------------------------------------------------
 * 17. Reusable page title pill
 *
 * A pill used for desktop page titles elsewhere.  It centres itself
 * within its container.  Mobile adapts the padding and radius.  The
 * class names remain from the original; the description clarifies
 * purpose.  Inline CSS variables are not used since this is static.
 */
@media (min-width: 992px) {
  .styled-desktop-page-title {
    display: inline-block !important;
    margin: 0 auto 12px auto !important;
    padding: 14px 22px !important;
    color: #fff !important;
    background: #922b28 !important;
    border: 1px solid #922c29 !important;
    border-radius: 10px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    text-align: center !important;
    font-family: inherit !important;
  }
  /* Ensure parent wrappers centre the pill */
  .styled-desktop-page-title-wrapper,
  .wpb_wrapper:has(.styled-desktop-page-title),
  .vc_column-inner:has(.styled-desktop-page-title) {
    text-align: center !important;
  }
}
@media (max-width: 991.98px) {
  .styled-desktop-page-title {
    display: inline-block !important;
    margin: 0 auto 12px auto !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    background: #922b28 !important;
    border: 1px solid #922c29 !important;
    font-family: inherit !important;
    text-align: center !important;
  }
  .styled-desktop-page-title-wrapper,
  .wpb_wrapper:has(.styled-desktop-page-title),
  .vc_column-inner:has(.styled-desktop-page-title) {
    text-align: center !important;
  }
}

/* ------------------------------------------------------------------
 * 18. Large buttons (portfolio & about‑us)
 *
 * Any button marked with class `portfolio-buttons` or `about-us-button`
 * will be significantly larger on desktop.  On mobile the font size
 * and padding are reduced.  Hover states scale the element slightly
 * for a gentle interaction effect (see section 20).
 */
a.portfolio-buttons,
button.portfolio-buttons,
.portfolio-buttons .wp-block-button__link,
.portfolio-buttons a,
.portfolio-buttons .vc_btn3,
.portfolio-buttons .vc_general,
.portfolio-buttons .btn {
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  font-family: inherit !important;
  padding: 12px 22px !important;
  border-radius: 6px !important;
  text-transform: none !important;
}
@media (max-width: 991.98px) {
  a.portfolio-buttons,
  button.portfolio-buttons,
  .portfolio-buttons .wp-block-button__link,
  .portfolio-buttons a,
  .portfolio-buttons .vc_btn3,
  .portfolio-buttons .vc_general,
  .portfolio-buttons .btn {
    font-size: 22px !important;
    padding: 10px 18px !important;
  }
}

/* ------------------------------------------------------------------
 * 19. Utility classes to show/hide content based on viewport
 */
@media (max-width: 991.98px) {
  .desktop {
    display: none !important;
  }
  .mobile {
    display: block !important;
  }
}
@media (min-width: 992px) {
  .mobile {
    display: none !important;
  }
  .desktop {
    display: block !important;
  }
}

/* ------------------------------------------------------------------
 * 20. Contact forms and responsive layouts
 *
 * The desktop contact form sits in a 350px high white band that
 * overlaps the hero.  On mobile the form flows naturally.  Separate
 * rules control which version (desktop or mobile) is visible.  Two‑
 * column rows collapse into one column on very small screens and
 * arrange side‑by‑side on tablets.
 */
@media (min-width: 992px) {
  .desktop-contact-form-section {
    background: #fff !important;
    height: 350px !important;
    min-height: 350px !important;
    margin-top: -350px !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 20 !important;
  }
  .desktop-contact-form-row {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .desktop-contact-form-column,
  .desktop-contact-form-column > .vc_column-inner,
  .desktop-contact-form-column > .vc_column-inner > .wpb_wrapper {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .desktop-contact-form-section .contact-form {
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    overflow: auto !important;
    background: #fff !important;
  }
}
@media (max-width: 991.98px) {
  .desktop-contact-form-section {
    height: auto !important;
    min-height: auto !important;
    margin-top: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
}
@media (min-width: 992px) {
  .desktop-contact-form-section,
  .desktop-contact-form-row,
  .desktop-contact-form-column,
  .desktop-contact-form {
    display: block !important;
  }
  .mobile-contact-form-section,
  .mobile-contact-form-row,
  .mobile-contact-form-column,
  .mobile-contact-form {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  .desktop-contact-form-section,
  .desktop-contact-form-row,
  .desktop-contact-form-column,
  .desktop-contact-form {
    display: none !important;
  }
  .mobile-contact-form-section,
  .mobile-contact-form-row,
  .mobile-contact-form-column,
  .mobile-contact-form {
    display: block !important;
  }
}
/* Two‑column rows collapse to one column on small screens */
@media (max-width: 599.98px) {
  .two-col-row {
    display: block !important;
  }
  .two-col-row > .wpb_column,
  .two-col-row > .vc_column_container {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}
/* Two‑column rows display side‑by‑side on tablets */
@media (min-width: 600px) and (max-width: 991.98px) {
  .two-col-row {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  .two-col-row > .wpb_column,
  .two-col-row > .vc_column_container {
    width: 50% !important;
    flex: 0 0 50% !important;
  }
}

/* Safety banner and icons rows maintain a fixed aspect ratio (276 / 1895) and
 * remove padding/margins.  Both rows use the same ratio and rules but
 * retain unique class names.  A pseudo element sets the height by
 * width.  Adjacent rows have margins removed to avoid gaps.
 */
.safety-banner-row,
.icons-row {
  position: relative;
  padding: 0 !important;
  margin: 0 auto !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  min-height: 0 !important;
}
.safety-banner-row::before,
.icons-row::before {
  content: "";
  display: block;
  padding-top: 14.56%; /* 276 / 1895 × 100 */
}
.safety-banner-row > .vc_column_container > .vc_column-inner,
.icons-row > .vc_column_container > .vc_column-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
 .safety-banner-row + .vc_row,
 .vc_row + .safety-banner-row,
 .icons-row + .vc_row,
 .vc_row + .icons-row,
 /* Retain original typo selector for backward compatibility */
 .incons-row + .vc_row {
  margin-top: 0 !important;
}

/* Subtle hover zoom for portfolio and about‑us buttons on desktop only */
@media (min-width: 992px) {
  a.portfolio-buttons,
  button.portfolio-buttons,
  .portfolio-buttons .wp-block-button__link,
  .portfolio-buttons .vc_btn3,
  .portfolio-buttons .vc_general,
  .portfolio-buttons .btn,
  a.about-us-button,
  button.about-us-button,
  .about-us-button .wp-block-button__link,
  .about-us-button .vc_btn3,
  .about-us-button .vc_general,
  .about-us-button .btn {
    display: inline-block;
    transition: transform 0.14s ease-in-out;
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform;
  }
  a.portfolio-buttons:hover,
  button.portfolio-buttons:hover,
  .portfolio-buttons .wp-block-button__link:hover,
  .portfolio-buttons .vc_btn3:hover,
  .portfolio-buttons .vc_general:hover,
  .portfolio-buttons .btn:hover,
  a.about-us-button:hover,
  button.about-us-button:hover,
  .about-us-button .wp-block-button__link:hover,
  .about-us-button .vc_btn3:hover,
  .about-us-button .vc_general:hover,
  .about-us-button .btn:hover {
    transform: scale(1.015) !important;
  }
  /* A slightly stronger zoom on hover for standard buttons */
  a.portfolio-buttons,
  button.portfolio-buttons,
  .portfolio-buttons .wp-block-button__link,
  .portfolio-buttons a,
  .portfolio-buttons .vc_btn3,
  .portfolio-buttons .vc_general,
  .portfolio-buttons .btn,
  a.about-us-button,
  button.about-us-button {
    transition: transform 0.2s ease-in-out;
  }
  a.portfolio-buttons:hover,
  button.portfolio-buttons:hover,
  .portfolio-buttons .wp-block-button__link:hover,
  .portfolio-buttons a:hover,
  .portfolio-buttons .vc_btn3:hover,
  .portfolio-buttons .vc_general:hover,
  .portfolio-buttons .btn:hover,
  a.about-us-button:hover,
  button.about-us-button:hover {
    transform: scale(1.03);
  }
}

/* Progress bar adjustments: increase height and font size
 * The unmatched brace in the original file has been resolved by
 * placing these rules at top level.  They apply globally.
 */
.Progress-Bar {
  height: 60px !important;
  width: 100% !important;
  font-size: 28px !important;
  border-radius: 12px !important;
}
.Progress-Bar .vc_bar {
  height: 60px !important;
  line-height: 60px !important;
  font-size: 28px !important;
}

/* ------------------------------------------------------------------
 * 21. Page‑specific enhancements
 *
 * Several pages require unique styling.  These rules are scoped
 * using body classes so they only activate on their respective
 * pages.  Sustainability pages change link colours, selection
 * highlights, logo and telephone button colours.  About Us pages swap
 * the logo colour.  Services icons on the About page receive a
 * hover zoom.  These rules were originally scattered but have been
 * consolidated here.
 */

/* Sustainability page (ID 27): green menu hover and active colours */
.page-id-27 .custom-menu-style li > a:hover,
.page-id-27 .custom-menu-style li:hover > a,
.page-id-27 .custom-menu-style .current-menu-item > a,
.page-id-27 .custom-menu-style .current_page_item > a,
.page-id-27 .custom-menu-style li ul a:hover,
.page-id-27 .custom-menu-style li ul li:hover > a,
.page-id-27 .custom-menu-style li ul .current-menu-item > a,
.page-id-27 .custom-menu-style li ul .current_page_item > a {
  color: #07581d !important;
}
/* Sustainability page selection highlight */
.page-id-27 ::selection,
.page-id-27 *::selection,
.page-id-27 *::-moz-selection {
  background: #23336b;
  color: #fff;
}

/* Sustainability pages only (IDs 27 & 4326) — mobile logo swap and green call button */
@media (max-width: 991.98px) {
  /* Ensure logo container is flex aligned */
  body.page-id-27  .site-header .site-logo,
  body.page-id-4326 .site-header .site-logo,
  body.page-id-27  .main-header .site-logo,
  body.page-id-4326 .main-header .site-logo {
    display: flex !important;
    align-items: center !important;
    line-height: 0 !important;
  }
  /* Swap to green logo and enlarge */
  body.page-id-27  .site-header .site-logo img,
  body.page-id-4326 .site-header .site-logo img,
  body.page-id-27  .main-header .site-logo img,
  body.page-id-4326 .main-header .site-logo img,
  body.page-id-27  .site-header .site-branding img,
  body.page-id-4326 .site-header .site-branding img,
  body.page-id-27  .main-header .site-branding img,
  body.page-id-4326 .main-header .site-branding img,
  body.page-id-27  .mobile-logo img,
  body.page-id-4326 .mobile-logo img,
  body.page-id-27  .header-logo img,
  body.page-id-4326 .header-logo img,
  body.page-id-27  .logo img,
  body.page-id-4326 .logo img {
    content: url("https://denverelectrical.com/wp-content/uploads/2025/08/Green-DEC-LOGO.png") !important;
    height: 82px !important;
    max-height: 82px !important;
    width: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* Keep the call button green on these pages */
  body.page-id-27  .site-header a[href^="tel:"],
  body.page-id-4326 .site-header a[href^="tel:"],
  body.page-id-27  .main-header a[href^="tel:"],
  body.page-id-4326 .main-header a[href^="tel:"] {
    background: #07581d !important;
    border: 1px solid #064d18 !important;
    color: #fff !important;
  }
  /* Quote button variant: green background and white text */
  body.page-id-27  .quote-button,
  body.page-id-4326 .quote-button {
    color: #ffffff !important;
    background-color: #07581d !important;
  }
  body.page-id-27  .quote-button:hover,
  body.page-id-4326 .quote-button:hover,
  body.page-id-27  .quote-button:focus,
  body.page-id-4326 .quote-button:focus,
  body.page-id-27  .quote-button:active,
  body.page-id-4326 .quote-button:active {
    color: #ffffff !important;
    background-color: #07581d !important;
  }
}

/* About Us page only (ID 336) — hover effects and logo swap */
.page-id-336 [class*="services-icons"] {
  transition: transform 0.3s ease !important;
}
.page-id-336 [class*="services-icons"]:hover {
  transform: scale(1.2) !important;
  z-index: 10 !important;
  position: relative !important;
}
.page-id-336 .p-titles,
.page-id-336 .p-titles strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}
@media (max-width: 991.98px) {
  body.page-id-336 .site-header .site-logo,
  body.page-id-336 .main-header .site-logo {
    display: flex !important;
    align-items: center !important;
    line-height: 0 !important;
  }
  body.page-id-336 .site-header .site-logo img,
  body.page-id-336 .main-header .site-logo img,
  body.page-id-336 .site-header .site-branding img,
  body.page-id-336 .main-header .site-branding img,
  body.page-id-336 .mobile-logo img,
  body.page-id-336 .header-logo img,
  body.page-id-336 .logo img {
    content: url("//srv/htdocs/wp-content/uploads/2022/12/DEC-LOGO.png") !important;
    height: 82px !important;
    max-height: 82px !important;
    width: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ------------------------------------------------------------------
 * 22. Footer — cleanup and simple layout
 *
 * A refined footer with consistent spacing, typographic colour and
 * layout behaviours.  Links invert colour on hover, widgets are
 * arranged in a grid and contact details receive underlines on
 * hover.  On narrow devices the footer stacks and centres.
 */
/* Base footer visuals; background colour is defined in section 2 */
footer.site-footer {
  color: #ffffff !important;
}
/* Footer links */
footer.site-footer a {
  color: #ffffff !important;
  text-decoration: none !important;
}
footer.site-footer a:hover {
  color: #FAA32F !important;
}
/* Common inner wrappers */
footer.site-footer .container,
footer.site-footer .footer-container,
footer.site-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 16px;
  box-sizing: border-box;
}
/* Footer bottom bar arrangement */
footer.site-footer .footer-bottom,
footer.site-footer .site-info,
footer.site-footer .footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
/* Left/right regions if available */
footer.site-footer .footer-left {
  text-align: left !important;
  order: 1;
  flex: 1 1 auto;
}
footer.site-footer .footer-right {
  text-align: right !important;
  order: 2;
  flex: 0 0 auto;
}
/* Fallback: push first and last children to edges */
footer.site-footer .footer-bottom > *:first-child,
footer.site-footer .site-info > *:first-child,
footer.site-footer .footer-bar > *:first-child {
  margin-right: auto !important;
}
footer.site-footer .footer-bottom > *:last-child,
footer.site-footer .site-info > *:last-child,
footer.site-footer .footer-bar > *:last-child {
  margin-left: auto !important;
}
/* Footer menus inline and tidy */
footer.site-footer .menu,
footer.site-footer .menu > ul,
footer.site-footer nav ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}
footer.site-footer .menu li {
  margin: 0 !important;
  padding: 0 !important;
}
footer.site-footer .menu a {
  line-height: 1.4;
}
/* Contact line styling */
footer.site-footer .contact,
footer.site-footer .contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
footer.site-footer a[href^="tel:"],
footer.site-footer a[href^="mailto:"] {
  border-bottom: 1px dotted rgba(255, 255, 255, 0.35);
}
footer.site-footer a[href^="tel:"]:hover,
footer.site-footer a[href^="mailto:"]:hover {
  border-bottom-color: #FAA32F;
}
/* Footer logo sizing */
footer.site-footer .footer-logo img,
footer.site-footer .site-logo img,
footer.site-footer .brand img {
  max-height: 44px;
  height: auto;
  width: auto;
}
/* Footer widgets grid */
footer.site-footer .footer-widgets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 8px 0 0 0;
}
@media (max-width: 991.98px) {
  footer.site-footer .footer-widgets {
    grid-template-columns: 1fr;
  }
}
/* Resume button style */
footer.site-footer .resume-button {
  display: inline-block;
  background: #922b28;
  color: #fff !important;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  border: 1px solid #922c29;
}
footer.site-footer .resume-button:hover {
  background: #751d1b;
}
/* Compact footer on phones */
@media (max-width: 640px) {
  footer.site-footer .footer-bottom,
  footer.site-footer .site-info,
  footer.site-footer .footer-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  footer.site-footer .footer-left,
  footer.site-footer .footer-right {
    text-align: center !important;
  }
  footer.site-footer .menu,
  footer.site-footer nav ul {
    justify-content: center;
  }
}

/* === Sustainability pages ONLY (IDs 27 & 4326) — force hamburger icon green === */
@media (max-width: 991.98px){

  /* Generic button container */
  body.page-id-27  .site-header .menu-toggle,
  body.page-id-4326 .site-header .menu-toggle,
  body.page-id-27  .main-header .menu-toggle,
  body.page-id-4326 .main-header .menu-toggle,
  body.page-id-27  .site-header .hamburger,
  body.page-id-4326 .site-header .hamburger,
  body.page-id-27  .main-header .hamburger,
  body.page-id-4326 .main-header .hamburger {
    color:#07581d !important;
  }

  /* “3 line” styles (common hamburger lines/pseudo elements) */
  body.page-id-27  .menu-toggle span,
  body.page-id-4326 .menu-toggle span,
  body.page-id-27  .hamburger .hamburger-inner,
  body.page-id-4326 .hamburger .hamburger-inner,
  body.page-id-27  .hamburger .hamburger-inner::before,
  body.page-id-4326 .hamburger .hamburger-inner::before,
  body.page-id-27  .hamburger .hamburger-inner::after,
  body.page-id-4326 .hamburger .hamburger-inner::after {
    background-color:#07581d !important;
  }

  /* SVG-based hamburgers */
  body.page-id-27  .menu-toggle svg,
  body.page-id-4326 .menu-toggle svg,
  body.page-id-27  .hamburger svg,
  body.page-id-4326 .hamburger svg {
    fill:#07581d !important;
    stroke:#07581d !important;
  }
  body.page-id-27  .menu-toggle svg *,
  body.page-id-4326 .menu-toggle svg *,
  body.page-id-27  .hamburger svg *,
  body.page-id-4326 .hamburger svg * {
    fill:#07581d !important;
    stroke:#07581d !important;
  }
}





/* Kill all footers site-wide */
footer,
.site-footer,
#site-footer,
.footer,
#footer,
.footer-widgets,
.footer-container,
.footer-inner,
.footer-bar,
.footer-bottom,
.site-info {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}






.p-titles, 
.p-titles strong {
    color: #ffffff !important;
    font-weight: bold !important;
}

.floating-head {
    transition: transform 0.3s ease !important; /* Smooth transition */
}

.floating-head:hover {
    transform: scale(1.05) !important; /* Increase the size by 5% */
    z-index: 10 !important; /* Ensure it stays on top of other elements */
    position: relative !important; /* Necessary for z-index to work */
}

.custom-image-bullets {
    list-style-type: none;
    padding-left: 0;
}

.custom-image-bullets li {
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* Increase space between list items */
}

.custom-image-bullets img {
    width: 80px; /* Increase the size of the image bullets */
    height: 80px;
    margin-right: 15px; /* Space between image and text */
}
/* Hide social sharing buttons */
.sharedaddy, 
.sharedaddy .sd-block {
    display: none !important;
	
	
	
	
	.careers-form {
  color: #ffffff !important;
}

.careers-form input[type="text"],
.careers-form input[type="email"],
.careers-form input[type="tel"],
.careers-form textarea,
.careers-form select,
.careers-form label,
.careers-form p,
.careers-form span {
  color: #ffffff !important;
}

.careers-form input[type="submit"],
.careers-form button[type="submit"] {
  background-color: #253367 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 5px !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
}

.careers-form input[type="submit"]:hover,
.careers-form button[type="submit"]:hover {
  background-color: #1c2954 !important; /* slightly darker shade on hover */
}

	
	
	
	
	
	/* === Global reveal animation (desktop + mobile) === */
.reveal{
  opacity: 0;
  transform: translateY(8px);                 /* tiny drift; change to 'none' for pure fade */
  transition: opacity .45s ease, transform .45s ease;
  transition-delay: var(--d, 0ms);            /* supports style="--d: 240ms" */
  will-change: opacity, transform;
}
.reveal.is-inview{
  opacity: 1;
  transform: none;
}

/* If you happen to use slide-left anywhere (you do in the 2 working blocks) */
.reveal.slide-left{ transform: translateX(-14px); }
.reveal.slide-left.is-inview{ transform: none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}
/* Scroll-triggered reveals (all viewports) */
body .reveal:not(.is-inview){
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}

/* optional slide-from-left variant */
body .reveal.slide-left:not(.is-inview){
  transform: translateX(-14px);
}

/* when in view */
body .reveal.is-inview{
  opacity: 1 !important;
  transform: none !important;
  transition-delay: var(--d, 0ms);
}