/* =============================================================================
   config module
   ============================================================================= */

:root {

  --font-heading: 'Montserrat';
  --font-text: 'Fira Sans';

  --primary: #ce3124;
  --primary-hover: #d2574d;
  --secondary: #2d2f34;
  --secondary-hover: #898b8d;
  --accent: #2d2f34;
  --accent-hover: #383a3e;
  --text: #6c6e70;
  --text-lighter: #898b8d;
  --dark: var(--accent);
  --med: #c4c5c6;
  --ultralight: #f8f8f8;
  --light: #e9e9ea;
  --med: #cacacc;
  --ultralight-secondary: #fff8f2;
  --light-secondary: #ffe9d9;
  --content-border-color: #f2f2f2;
  --form-active-color: var(--primary);
  --nav-top-hover-color: var(--accent);

  --border-radius: 0;
  --btn-border-radius: 0.125rem;

  --skew: -20deg;
  --skew-origin: top right;

  --standard-padding: 6rem;

}

/*  -------------------------------------------------------------------------- 
    END config module */

/*  =============================================================================
    bugfix for base CSS
    ============================================================================= */

.site-header-menu-row .logo {
  height: 100%; /* fix for height: auto not working */
}

/*  =============================================================================
    common styles
    ============================================================================= */

/* html {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
} */
/* body {
  overflow-x: hidden;
} */

/* a:visited,
a:active {
  color: inherit;
  text-decoration: inherit;
} */

/* .site-rtt */

.site-rtt {
  background: var(--primary);
  color: #fff;
  transition: 0.2s background;
  transform: skewx(var(--skew));
}
.site-rtt:hover {
  background: var(--accent);
}
.site-rtt i {
  transform: skewx(calc(-1 * var(--skew)));
}

/* use .img-cover on img wrapper divs */
.img-cover {
  overflow: hidden;
  position: relative;
}
.img-cover img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
  vertical-align: top;
}

/* standardize various .template-home headings */
.home-heading-label {
  font-size: var(--base-h6-size);
  color: var(--secondary);
  margin: 0 0 1rem 0;
}
.home-heading {
  color: var(--primary);
  font-size: var(--base-h2-size);
}
.home-section-intro {
  text-align: center;
  text-wrap: balance
}

/* heading leading */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  line-height: 1.6;
}

/* .site-btn fixes */
.site-btn > * {
  font-size: var(--font-size);
  border-radius: var(--btn-border-radius);
  font-family: var(--font-heading);
  font-weight: 600;
  border-color: transparent;
  color: #fff;
  padding: 0.75rem 1.5rem;
}
.site-btn.btn-outline > * {
  border-color: var(--primary);
  border-width: 2px;
}
.site-btn.cta * {
  background: var(--primary);
  color: #fff;
}
.site-btn.cta *:hover {
  background: var(--primary-hover);
}

/* ken burns animation */
@keyframes kenburns {
  0% {
    transform-origin: bottom right;
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.kenburns {
    animation: kenburns 45s ease infinite;
}

/* gradient effects */

.gradient-background {
  background-image: linear-gradient(90deg,
    #895da9 0%,
    #2d959f 33%,
    #895da9 66%,
    #2d959f 100%);
  background-size: 400% 100%;
  animation: gradient-animation 4s linear infinite;
}
.gradient-background.slower {
  animation: gradient-animation 8s linear infinite;
}
.gradient-strip {
  width: 100%;
  height: 0.5rem;
}
.site-btn > *.gradient-background {
  background-image: linear-gradient(90deg,
    #2d959f 0%,
    #895da9 33%,
    #2d959f 66%,
    #895da9 100%);
  background-size: 400% 100%;
  animation: gradient-animation 8s linear infinite;
}
@keyframes gradient-animation {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 15% 100%;
  }
}

/*  =============================================================================
    header + nav module

    • based on board store + colorwheel
    • updated menu with flex alignment options
    ============================================================================= */

/*  .site-header-top-row
    --------------------------------------------------------------------------  */

.site-header-top-row {
  background: white;
}
.site-header-top-row ul.contact-info li::before, .site-header-top-row ul.menu li::before, .site-header-top-row ul.menu li i.menu-icon {
  color: var(--primary);
  font-weight: 900;
}
.site-header-top-row li, .site-header-top-row li a {
  color: var(--text);
  font-weight: 500;
  font-family: var(--font-heading);
  font-size: calc(var(--font-size) - 2px);
}
.site-header-top-row li, .site-header-top-row li a:hover {
  color: var(--primary);
}
.site-header-top-row .phone-number a {
  color: var(--accent);
  font-weight: 700;
}
.site-header-top-row li.cta {
  background: var(--primary);
  transform: skewx(var(--skew));
}
.site-header-top-row li.cta a {
  color: #fff;
  transform: skewx(calc(-1 * var(--skew)));
}
.site-header-top-row ul.menu li.cta i.menu-icon {
  color: var(--accent);
}
.site-header-top-row li.cta::after {
  background: var(--primary);
}

/*  .site-header-menu-row (desktop)
    --------------------------------------------------------------------------  */

/* ensure logo renders correctly */

.site-header-menu-row .logo img {
  object-fit: contain;
  height: 100%;
  width: auto;
}
.site-header-menu-row .site-container {
  justify-content: center;
}

/* cap the width of the logo parent? */

.site-header-menu-row .logo {
  max-width: 12rem;
}

@media(min-width: 81.93rem) {

  /* the phone number */
  .site-header-menu-row .phone {
    line-height: 1.75;
  }
  .site-header-menu-row .number {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: var(--base-h5-size);
    color: var(--primary);
  }
  .site-header-menu-row .label {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: var(--font-size);
    color: var(--text);
  }
  .site-header-menu-row .phone a i {
    font-weight: 400;
    color: var(--accent);
  }

  /* stretch the nav menu to fill the container height? */
  .site-header-menu-row .site-nav-menu,
  .site-header-menu-row .site-nav-menu > ul,
  .site-header-menu-row .site-nav-menu > ul > li  {
    height: auto; /* 100% to stretch */
  }

  /* stretch the top-level menu items to fill the container width? */
  .site-header-menu-row .site-nav-menu > ul > li {
    flex-grow: 0; /* 1 to grow */
  }

  /* add a gap between the top-level menu items */
  /* which way to align the menu within its container? */
  .site-header-menu-row .site-nav-menu > ul {
    gap: 1rem;
    justify-content: flex-end;
  }

  /* which way to align the top-level menu items within their cells? */
  .site-header-menu-row .site-nav-menu > ul > li {
    justify-content: flex-start;
  }



  /* the active top-level links */
  .site-header-menu-row .site-nav-menu > ul > li.active {
    background: var(--primary);
  }
  .site-header-menu-row .site-nav-menu > ul > li.active > a  {
    background: var(--primary);
  }
  .home .site-nav-menu>ul>li.active>a:hover /* fix from base css */ {
    color: #fff;
    background: var(--primary);
  }
  /* base css fix */
  .home .site-nav-menu>ul>li.active>a:hover {
    background: none;
  }

  /* the hover top-level links */
  .site-header-menu-row .site-nav-menu > ul > li:not(.active) > a:hover  {
    background: var(--ultralight);
    color: var(--accent);
  }

  /* the drop-down menus */
  .site-nav-menu>ul>li.menu-item-has-children>ul, .site-nav-menu>ul>li.grid-menu>ul, .site-nav-menu>ul>li.grid-menu>.cta-menu-container, .site-nav-menu>li.menu-item-has-children>ul {
    top: calc(100% + 0.5rem);
    border-radius: var(--border-radius);
  }
  /* the drop-down menu symbols */
  .site-nav-menu ul>li:not(.active).menu-item-has-children>a:not(:hover)::after {
    color: var(--primary);
  }
  /* the drop-down menu children */
  .site-nav-menu li.menu-item-has-children > ul li a {
    border: none;
    transition: 0.2s background, 0.2s color;
  }
  .site-nav-menu li.menu-item-has-children > ul li a:hover {
    background: #f7f7f7;
  }

} /* end @media(min-width: 62rem) */

@media (min-width: 62rem) {
	  /* pad the top-level menu items? */
  .site-header-menu-row .site-nav-menu > ul > li > a {
    color: var(--accent);
    display: inline-flex;
    width: auto;
    padding: 0.5rem 1rem;
    border-radius: var(--btn-border-radius);
    font-weight: 600;
    font-size: calc(var(--font-size) - 1px);
    position: relative;
    z-index: 2;
  }
}

/*  ----------------------------------------------------------------------------- */


/*  =============================================================================
    hero module: hero image with form

    • based off of existing static image w/ form banner
    ============================================================================= */

/* parent class */
.home-hero {
  position: relative;
  margin: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  max-height: calc( 100vh - var(--header-height) );
}

/* cap the hero height to the viewport, but also specify a reasonable minimum height to prevent shrinking if the console is open */

@media(min-width: 75rem) {
  .home-hero {
    min-height: 720px;
  }
}

/* module class */
.home-hero.img-with-form {
  background: #fff;
  overflow: hidden;
}

/* skew effects */

.skew-lower {
  position: absolute;
  height: 100%;
  width: 100%;
  left: -5%;
  top: 0;
  background: var(--ultralight) url('/wp-content/uploads/2026/07/wisconsin-exteriors-skew-lower.webp');
  background-size: cover;
  background-position: right;
  transform: skewx(var(--skew));
  transform-origin: top right;
  aspect-ratio: 3/2;
}
.skew-lower::after {}
.skew-upper {
  position: absolute;
  width: 100%;
  height: calc( 100% - 12rem );
  top: 6rem;
  right: -70%;
  background: var(--primary);
  transform: skewx(var(--skew));
  transform-origin: top left;
}
.emerge-img {
  position: absolute;
  width: 30%;
  height: calc( 100% - 20rem );
  top: 10rem;
  right: 5%;
  background: var(--secondary);
  transform: skewx(var(--skew));
  transform-origin: top left;
  overflow: hidden;
}
.emerge-img::after {
  position: absolute;
  display: block;
  content: '';
  width: 0.5rem;
  left: calc(25% - 0.25rem);
  top: 0;
  height: 100%;
  background: var(--primary);
  z-index: 2;
}
.emerge-img .img-container {
  width: 150%;
  height: 100%;
  left: -25%;
  transform: skew(calc(-1*var(--skew)));
  transform-origin: center;
  position: relative;
  z-index: 1;
}
.emerge-img img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* the hero grid proportions */
.home-hero.img-with-form .site-grid {
  grid-template-columns: repeat(6, 6fr);
}
.home-hero.img-with-form .hero-text {
  grid-column: span 4;
}
.home-hero.img-with-form .hero-form {
  grid-column: span 2;
}

/* QoL for logged-in testing */
.admin-bar .home-hero.img-with-form {
  max-height: calc( 100vh - ( var(--header-height) ) );
}

/* sync the hero contents with the dimensions of the image */
.home-hero.img-with-form .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* the hero background overlay color */
  background: none;
}
.home-hero.img-with-form .hero-contents {
  position: absolute;
  top: 0;
  left: 0;
  width: 65%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  align-items: flex-start;
  padding: 0 var(--container-margin);
}
.home-hero.img-with-form h1 {
  font-size: var(--base-h1-size);
  color: var(--accent);
  margin: 0;
  font-weight: 800;
}
.home-hero.img-with-form h2 {
  font-size: var(--base-h5-size);
  color: var(--text);
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}
.home-hero.img-with-form p:not(.st) {
  color: #fff;
  margin: 0;
  text-shadow: 0.125rem 0.125rem 0.125rem rgba(25, 25, 30, 0.66);
}
/* hide the prefix button icon? */
.home-hero.img-with-form .site-btn > a > i {
  display: none;
}
.home-hero.img-with-form .site-btn > a {
  text-transform: uppercase;
  font-weight: 600;
}

/* the hero form */
.home-hero.img-with-form .hero-form {
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  padding: 0 var(--container-margin) 0 0;
  display: none;
}
.home-hero.img-with-form .hero-form .form-heading {
  padding: 0.75rem 0;
  background: rgba(50, 150, 160, 0.66);
  backdrop-filter: blur(4px);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.home-hero.img-with-form .hero-form .form-heading h3 {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: var(--base-h5-size);
}
.home-hero.img-with-form .hero-form .form-body {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  background: rgba(36, 35, 40, 0.66);
  backdrop-filter: blur(4px);
  padding: 1.25rem;
}

/* .home-hero.img-with-form media queries */

@media(max-width:60rem) {

}

/*  ----------------------------------------------------------------------------- */


/*  =============================================================================
    hero form module + sidebarform module

    • resets and styles some gravity form elements
    ============================================================================= */

/* reset hero form styles */
.gform_wrapper.gravity-theme .gform_footer,
.gform_wrapper.gravity-theme .gform_page_footer {
  margin: 0.75rem 0 0 0 !important;
  padding: 0;
}
.gform_wrapper.gravity-theme .gform_fields{
  gap: 0.75rem !important;
}
.gform_wrapper.gravity-theme .gfield textarea.small {
  display: block; /* fix gravity forms textarea rendering */
}
.gfield textarea.small,
.ginput_container input,
/* this needs investigating and potential fixing in the base css file */
input:not(.ginput_container.ginput_container_fileupload input,.gform_footer input.button):not(.before-after-slider .slider,.modal-content input,.seek-bar,.volume-bar) {
  resize: none !important;
  border-radius: var(--btn-border-radius) !important;
  font-size: var(--font-size) !important;
  padding: 0.5rem !important;
  border: none !important;
  transition: 0.2s outline;
  outline: 1px solid rgba(15, 15, 15, 0.15); /* semitransparent input outline to blend with hero background */
}
/* brighten active hero form fields */
.gfield textarea.small:focus,
.ginput_container input:focus,.home-hero.img-with-form input:not(.ginput_container.ginput_container_fileupload input,.gform_footer input.button):not(.before-after-slider .slider,.modal-content input):focus {
  outline: 3px solid var(--form-active-color) !important;
  background: #fff !important;
}
/* reset hero form input heights to auto */
.ginput_container input,
input:not(.ginput_container.ginput_container_fileupload input,.gform_footer input.button):not(.before-after-slider .slider,.modal-content input) {
  height: auto !important;
}
.gform_wrapper.gravity-theme .gform_footer input {
  border-radius: var(--btn-border-radius) !important;
  margin: 0 !important;
}
input[type=submit] {
  transition: 0.2s background !important;
  font-size: var(--font-size) !important;
  padding: 0.5rem 1.5rem !important;
  line-height: inherit !important;
  width: 100% !important;
}
@media(max-width: 62rem) {
  .gform_wrapper.gravity-theme input:not([type=radio]):not([type=checkbox]):not([type=image]):not([type=file]) {
    line-height: inherit !important;
  }
}
/* darken placeholder strings */
.gform_wrapper ::placeholder {
  color: var(--text) !important;
  opacity: 0.66 !important;
}

/* sidebar gravity form */
#sidebar .sidebar-form {
  border-color: var(--med);
  background: #fafafa;
}
#sidebar .sidebar-form-header {
  background: var(--primary);
  padding: 0.75rem 0;
  justify-content: center;
}
#sidebar .sidebar-form-header i {
  display: none;
}
.site-form .gform_wrapper .gform_footer input.button {
  background: var(--accent);
}
.site-form .gform_wrapper .gform_footer input[type=submit]:hover {
  background: var(--accent-hover);
}

/*  ----------------------------------------------------------------------------- */

/*  =============================================================================
    recent post module: .home-recent posts, #l10-post-widget
    ============================================================================= */

.home-recent-posts {
  background: var(--ultralight);
  padding: 6rem 0;
}
.home #l10-post-widget .posts .post-list,
.home #l10-post-widget .posts ul {
  padding: 0;
  gap: 2rem;
}
.home #l10-post-widget .tabs .tab.active::after {
  display: none !important; /* glitch fix */
}
.home #l10-post-widget .posts {
  border: none;
  background: none;
}
.home #l10-post-widget .tabs {
  margin: 0 0 1rem 0;
  border: none;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.home #l10-post-widget .tabs .tab::after {
  display: none;
}
.home #l10-post-widget .tabs .tab {
  border-radius: var(--btn-border-radius);
  background: var(--ultralight);
  border: 1px solid transparent;
  color: var(--text);
  margin: 0;
  font-weight: 500;
  font-family: var(--font-heading);
  letter-spacing: 0;
  display: flex;
  align-items: center;
  transition: 0.5s all;
}
.home #l10-post-widget .tabs .tab:not(.active):hover {
  background: var(--ultralight-secondary);
}
.home #l10-post-widget .tabs .tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  position: inherit;
}
#l10-post-widget .tabs .tab i {
  color: var(--secondary);
}
.home #l10-post-widget .tabs .tab.active i {
    color: #fff
}
#l10-post-widget .posts {
  border-color: var(--med);
}
.home-blog h5 {
  color: var(--text);
  transition: 0.5s all;
  font-weight: 800;
}
.home-blog h5:hover {
  color: var(--primary);
}
.home #l10-post-widget .category, .home #l10-post-widget .popular {
  font-family: var(--font-heading);
  padding: 2px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}
.home #l10-post-widget .tabs .tab {
  font-family: var(--font-heading);
}
#l10-post-widget .posts ul li a.title, #l10-post-widget .posts ul li a.title:visited {
  color: var(--secondary);
}
.home #l10-post-widget .posts ul li {
  border: 1px solid var(--med);
  background: #fff;
  border-radius: var(--btn-border-radius);
}
.home-recent-posts .site-featured-img {
  background: var(--secondary);
  overflow: hidden;
}
.home-recent-posts .site-featured-img img {
  opacity: 0.75;
  transition: 1s opacity, 1s transform;
}
.home-recent-posts li:hover .site-featured-img img {
  opacity: 1;
  transform: scale(1.1);
}
.site-featured-img .date {
  background: var(--accent);
  color: #fff;
  border-radius: var(--btn-border-radius) 0 0 var(--btn-border-radius);
  font-weight: 600;
  font-family: var(--font-heading);
}
#l10-post-widget .posts ul li .text:hover {
  background: #fff;
}
ul.post-categories li a {
  color: var(--text);
  font-weight: 600;
  font-family: var(--font-heading);
}
ul.post-categories li a i {
  color: var(--accent);
  transition: 0.2s color;
}
ul.post-categories li a:hover i {
  color: #fff;
}
@media(max-width: 40rem) {
  .home #l10-post-widget .tabs .tab i {
    margin: 0 1rem 0 0;
  }
}

/* #sidebar #l10-post-widget */


#sidebar #l10-post-widget .tabs .tab, #sidebar #l10-post-widget .tabs .tab:last-child {
  border-color: var(--med);
}
#sidebar #l10-post-widget .tabs .tab, #sidebar #l10-post-widget .tabs .tab,
#sidebar #l10-post-widget .tabs .tab, #sidebar #l10-post-widget .tabs .tab:last-child {
  background: var(--light);
  color: var(--text-lighter);
  border-color: var(--light);
}
#sidebar #l10-post-widget .tabs .tab.active {
  border-color: var(--med);
}
#sidebar #l10-post-widget .tabs .tab:last-child.active {
  background: #fff;
  color: var(--primary);
}
#l10-post-widget .tabs .tab i {
  color: var(--text-lighter);
}
#sidebar #l10-post-widget .tab:not(.tab.active):hover {
  background: var(--primary) !important;
  color: #fff;
}
#sidebar #l10-post-widget .tab:not(.tab.active):hover i {
  color: #fff;
}
#sidebar #l10-post-widget .posts {
  border-color: var(--med);
}
#sidebar #l10-post-widget .posts ul li a.title,
#sidebar #l10-post-widget .posts ul li a.title:visited {
  color: var(--text);
}
#sidebar #l10-post-widget .posts ul li a.title:hover,
#sidebar #l10-post-widget .posts ul li a.title:active {
  color: var(--primary);
}

/*  ----------------------------------------------------------------------------- 

/*  =============================================================================
    footer module
    ============================================================================= */

footer {
  background: white;
  border: none;
  font-weight: 500;

}
footer::after {
  background: url('img/wisconsin-bg2.webp');
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  width: 100%;
  height: 100%;
  transform: skewx(var(--skew));
}

footer .site-container {
  position: relative;
  z-index: 2;
}

footer .site-grid {
  grid-template-columns: repeat(3, 3fr);
  position: relative;
}

/* footer headings */
footer .site-grid h5 {
  color: var(--accent);
  font-size: var(--base-h5-size);
  font-weight: 800;
  text-transform: uppercase;
}
footer .site-grid h5::after {
    display: block;
    width: 2.5rem;
    height: .25rem;
    background: var(--primary);
    content: '';
    margin: .5rem 0 1.5rem; 
}

/* .footer-text */
footer .footer-text {
  grid-column: span 4;
}
footer .footer-text p {
  text-wrap: balance;
  color: var(--text);
  font-family: var(--font-heading);
}
footer li {
  color: var(--text);
  font-family: var(--font-heading);
}

/* footer links */
footer .legal {
  position: relative;
  z-index: 2;
  opacity: 1;
  font-weight: 400;
  color: var(--text);
}
footer .site-grid a,
footer .legal a,
footer .footer-socials li a {
  color: var(--accent);
  transition: 0.2s color;
}
footer .site-grid a:hover,
footer .legal a:hover,
footer .footer-socials li a:hover {
  color: var(--primary);
}

/* footer icons */

footer .site-grid i {
  font-weight: 900;
  color: var(--primary);
}

/* footer menu */
footer #menu-footer-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* footer socials */
footer .footer-socials ul {
  gap: 1rem;
  text-wrap: balance;
}
footer .footer-socials li a {
  font-size: 1.25rem;
}

@media(max-width: 48rem) {
  footer .site-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  footer .footer-text {
    grid-column: span 1;
  }
}

/*  ----------------------------------------------------------------------------- 

/*  =============================================================================
    accordion module
    ============================================================================= */

.home-accordion,
.home-cta {
  padding: 0;
  background: var(--accent);
  color: rgba(255, 255, 255, 0.66);
  position: relative;
  overflow: hidden;
}
.home-accordion .site-container,
.home-cta .site-container {
  position: relative;
  z-index: 2;
}
.home-accordion h6,
.home-cta h6 {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--primary);
}
.home-accordion h2 {
  text-align: left;
  /* color: #fff; */
  font-weight: 800;
  margin-bottom: 3rem;
}
.home-cta h2 {
  text-align: left;
  /* color: #fff; */
  font-weight: 800;
  margin-bottom: 1.5rem;
}
.home-accordion p,
.home-cta p {
  text-wrap: balance;
}
.home-accordion .site-grid,
.home-cta .site-grid {
  gap: 3rem;
  grid-template-columns: repeat(2, 2fr);
}
.home-cta .site-grid {
  gap: 0;
}
.home-accordion .site-grid .img,
.home-cta .site-grid .img {
  position: relative;
}
.home-accordion .site-grid .img-cover,
.home-cta .site-grid .img-cover {
  position: relative;
  top: 0;
  left: 0;
  width: 125%;
  height: 100%;
  background: var(--primary);
}
.home-accordion .site-grid .img-fade,
.home-cta .site-grid .img-fade {
  position: absolute;
  top: 0;
  left: 50%;
  /* width: 125%; */
  width: 110%;
  height: 100%;
  transform: skewx(var(--skew));
  background: pink;
  transform-origin: center;
  background: linear-gradient(to right, transparent 0%, var(--accent) 33%);
}
.home-accordion .site-grid img,
.home-cta .site-grid img {
  position: absolute;
  top: 0;
  left: 0;
}
.home-accordion .site-grid img {
  object-position: right;
}
.home-accordion .text,
.home-cta .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  padding: var(--standard-padding) var(--container-margin) var(--standard-padding) 0;
  position: relative;
  z-index: 2;
}
.home-accordion .section p,
.home-cta .section p {
  text-wrap: balance;
}

/* .home-accordionmedia queries */

@media(max-width:48rem) {
  .home-accordion .site-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* .site-accordion updates */

.home .site-accordion {
  margin: 0;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.home  .site-accordion {
  margin-top: 3rem;
}
.home .site-accordion .section {
  border: none;
}
.home .site-accordion .title {
  border-radius: var(--border-radius);
  color: var(--secondary);
}
.home .site-accordion .section:not(.open) .title {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
}
.home .site-accordion .section:not(.open):hover .title {
  color: #fff;
  background: var(--accent-hover);
}
.home .site-accordion .title::after {
  font-size: 1.25rem;
  color: #fff;
  transition: 0.2s color, .2s transform;
}
.home .site-accordion .section:not(.open):hover .title::after {
  color: var(--primary);
}

/*  ----------------------------------------------------------------------------- */

/*  =============================================================================
    home page services module .home-service-grid
    ============================================================================= */

/* baseline service grid styles */
.home-services {
  padding: 6rem 0;
  background: #fff;
}
.home-services .site-grid {
  gap: 3rem;
}
.home-services .grid-item {
  border: none;
}
.home-services .img {
  width: 100%;
  aspect-ratio: 3/2;
  height: auto;
  background: var(--light-secondary);
  overflow: hidden;
  margin: 0 0 2rem 0;
  border-radius: var(--border-radius);
  border: none !important; /* fix inheritance */
}
.home-services .img-cover img {
  position: absolute;
  top: 0;
  left: 0;
  transition: 2s transform;
  transform: none;
  z-index: 1;
}
.home-services .img-cover:hover img {
  transform: scale(1.1);
}
.home-services a.text {
  text-wrap: pretty;
  color: var(--text);
}
.home-services a.text > h3 {
  font-size: var(--base-h5-size);
  color: var(--secondary);
  transition: 0.2s color;
  line-height: 1.75;
}
.home-services a.text:hover > h3 {
  color: var(--primary);
}
.home-services a.text > p.link {
  color: var(--secondary);
  font-family: var(--font-heading);
  font-weight: 500;
}
.home-services a.text > p.link::after {
  font-family: 'Font Awesome 7 Pro';
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  content: '\f061';
  color: var(--accent);
  font-weight: 600;
  transition: 0.2s margin, 0.2s color;
}
.home-services a.text:hover > p.link {
  color: var(--primary);
}
.home-services a.text:hover > p.link::after {
  margin-left: 1rem;
  color: var(--primary);
}

/* service grid extensions for client */

.home-services {
}
.home-services .intro {
  text-align: center;
  text-wrap: balance;
}
.home-services .site-grid {
  grid-template-columns: repeat(2, 2fr);
}
.home-services .grid-item {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.home-services .grid-item .img {
  flex-shrink: 0;
  width: 100%; /* 24rem for vertical layout */
  max-width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  margin: 0;
}
.home-services .grid-item a.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}
.home-services .grid-item a.text p {
  text-wrap: pretty;
}
.home-services .grid-item a.text p.link {
  text-wrap: balance;
}

/* .home-services media queries */

@media(max-width:48rem) {
  .home-services .site-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/*  ----------------------------------------------------------------------------- */

/*  =============================================================================
    home icon boxes module | .home-icon-boxes
    ============================================================================= */

.home-icon-boxes {
  background: var(--ultralight);
  padding: 6rem 0;
}
.home-icon-boxes .site-grid {
  margin-top: 3rem;
  grid-template-columns: repeat(2, 2fr);
  gap: 2rem;
}
.home-icon-boxes .site-grid a.grid-item {
  padding: 2rem;
  background: #fff;
  position: relative;
  display: flex;
  gap: 2rem;
}
.home-icon-boxes .grid-item .icon {
  order: 2;
  width: 12rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.home-icon-boxes .grid-item .icon i {
  font-size: 8rem;
  text-align: center;
  font-weight: 200;
  color: var(--primary);
}
.home-icon-boxes .grid-item .text {
  width: auto;
}
.home-icon-boxes .grid-item h3 {
  color: var(--accent);
  font-size: var(--base-h4-size);
  font-weight: 600;
  margin-bottom: 1rem;
}
.home-icon-boxes .site-grid a.grid-item p {
  text-wrap: balance;
  color: var(--text);
  margin: 0 0 0.5rem 0;
}
.home-icon-boxes .site-grid a.grid-item p.link {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--secondary);
  margin: 0;
  transition: 0.2s color;
}
.home-icon-boxes .site-grid a.grid-item p.link::after {
  font-family: 'Font Awesome 7 Pro';
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  content: '\f061';
  color: var(--accent);
  font-weight: 600;
  transition: 0.2s margin, 0.2s color;
}

/* .home-icon-box hovers */

.home-icon-boxes a.grid-item:hover {
  border-color: var(--secondary);
}
.home-icon-boxes a.grid-item:hover h3,
.home-icon-boxes a.grid-item:hover p.link {
  color: var(--primary);
}
.home-icon-boxes .site-grid a.grid-item:hover p.link::after {
  margin-left: 1rem;
  color: var(--primary);
}

/* curb appeal customizations for .home-icon-boxes */
.home-icon-boxes .img-cover {
}

/* .home-icon-boxes media queries */

@media(max-width:48rem) {
  .home-icon-boxes .site-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/*  ----------------------------------------------------------------------------- */

/*  =============================================================================
    .home-reviews-slider module

    • designed for use with a single-column slider to rotate reviews
    • both grid cells are vertically-centered, allowing them to be sized indepently 
    ============================================================================= */

.home-reviews-slider {
  padding: 6rem 0;
}
.home-reviews-slider .site-grid {
  gap: 3rem;
  grid-template-columns: repeat(2, 2fr);
  margin-top: 3rem;
}
.home-reviews-slider .site-grid .img {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-reviews-slider .site-grid .img-cover {
  aspect-ratio: 3/2;
  width: 100%;
  height: auto;
  background: var(--light-secondary);
  border-radius: var(--border-radius);
}
.home-reviews-slider .reviews {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
}

/* individual review styles */
.home-reviews-slider .review h3 {
  font-size: var(--base-h5-size);
  text-transform: capitalize;
}
.home-reviews-slider .review p {
  text-wrap: pretty;
  margin: 0 0 1rem 0;
}
.home-reviews-slider .review-user {
  color: var(--secondary);
  font-weight: 500;
  font-family: var(--font-heading);
  margin: 0;
}

/* flickity buttons */
.flickity-button {
  position: relative;
  background: var(--accent);
  border-radius: var(--border-radius);
  margin-top: 2rem;
  transition: 0.2s background, 0.2s color;
}
.flickity-prev-next-button {
  top: 0;
  width: 3rem;
  height: 3rem;
  transform: none;
}
.flickity-prev-next-button.previous {
  left: 0;
  margin-right: 1rem;
}
.flickity-button:hover {
  background: var(--accent-hover);
}

/* replace flickity's default chevrons with FontAwesome */
.flickity-button svg {
  display: none !important;
}
.flickity-button::after {
  content: '\f105';
  font-family: 'Font Awesome 7 Pro';
  color: #fff;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 1.25rem;
}
.flickity-button.previous::after {
  content: '\f104';
}

/* .home-reviews-slider media queries */

@media(max-width:48rem) {
  .home-reviews-slider .site-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/*  ----------------------------------------------------------------------------- */


/*  =============================================================================
    footer map module (WIP; might want to refactor the markup)
    ============================================================================= */

.home-map:not(.home-cta) {
  padding: 6rem var(--container-margin);
  background: #fff;
}
.home-map:not(.home-cta) .text {
  border-radius: var(--border-radius);
  padding: 6rem 3rem;
}
.home-map:not(.home-cta) .map {
  border-radius: var(--border-radius);
  box-shadow: none;
}
.home-map:not(.home-cta) .non-interactive {
  pointer-events: none !important;
}

/* .home-map:not(.home-cta) media queries */

@media(max-width:48rem) {
  .home-map:not(.home-cta) .site-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .home-map:not(.home-cta) .site-grid .map {
    min-height: none;
    aspect-ratio: 1;
  }
}

/*  ----------------------------------------------------------------------------- */


/*  =============================================================================
    curb appeal specific CSS

    • quick and dirty edits for pages and posts
      need to implement a more comprehensive title bar module later
    ============================================================================= */

/* decouple the bg image from the title bar */

.site-title-bar.title-bar--outer {
  /* padding: 9rem 0; */
  padding: 4rem 0;
  height: auto;
  border: none;
  background: #393a3d;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.site-title-bar.title-bar--outer .title-bar-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
/* the title bar overlay */

.site-title-bar.title-bar--outer .title-bar-img::after {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  z-index: 1;
  background: linear-gradient(to right, rgba(45, 45, 50, 1), rgba(45, 45, 50, 0.33));
}
.site-title-bar.title-bar--outer .site-container {
  position: relative;
  z-index: 2;
}
.site-title-bar.title-bar--outer h2 {
  color: #fff;
  font-size: var(--base-h4-size);
}


/* bread crumbs */

.site-breadcrumbs.breadcrumbs--outer {
  background: #fff;
  border: none;
  padding: 0.75rem 0;
}
.site-breadcrumbs nav {
  font-weight: 500;
  font-family: var(--font-heading);
  color: var(--text);
}
.site-breadcrumbs nav::before {
  font-weight: 900;
  color: var(--accent);
}
.site-title-bar.title-bar--outer+.site-breadcrumbs nav p a {
  color: var(--text);
}
.site-title-bar.title-bar--outer+.site-breadcrumbs nav p a:hover {
  text-decoration: underline;
}
.site-breadcrumbs.breadcrumbs--outer .last {
  color: var(--text-lighter);
}

/* soften sidebar borders */

#sidebar .widget-reviews {
  border-color: var(--med);
}
#sidebar .widget-area {
  border-color: var(--med);
}

/*  =============================================================================
    emerge electric modules
    ============================================================================= */

/* .home-numbers */

.home-numbers {
  background: var(--accent);
  padding: var(--standard-padding) 0;
}

/* .home-owner */

.home-owner {
  position: relative;
  background: white;
  padding: var(--standard-padding) 0;
}
.home-owner::after {
  /* background: url('img/emerge-electric-hero-bg.jpg'); */
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  mix-blend-mode: overlay;
  width: 100%;
  height: 100%;
  transform: skewx(var(--skew));
  display: none;
}
.home-owner .site-container {
  position: relative;
  z-index: 2;
}
.home-owner .site-grid {
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
}
.home-owner .icons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  order: 1;
}
.home-owner .icon-group {
  text-align: center;
  background: linear-gradient(to top right, var(--ultralight), #fff);
  border-radius: var(--btn-border-radius);
  padding: 1rem;
  width: 100%;
  height: 10rem;
  max-width: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-owner .icon-group .icon,
.home-owner .icon-group .icon-text {
}
.home-owner .icon-group .icon {
  margin-bottom: 1rem;
  font-size: 3rem;
}
.home-owner .icon-group .icon i {
    font-weight: 300;
    background: linear-gradient(to bottom, #fe9a4d, var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.home-owner .icon-group .number {
  color: var(--accent);
  font-weight: 600;
  font-size: var(--base-h5-size);
  font-family: var(--font-heading);
}
.home-owner .icon-group .caption {
  color: var(--text);
  font-weight: 600;
  font-family: var(--font-heading);
}
.home-owner .text {
  /* grid-column: span 2; */
  order: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-owner .text .text-to-expand {
  display: none;
}
.home-owner .text .text-to-expand p:last-child {
  margin-bottom: 1.5rem;
}

.home-owner .video {
  width: 100%;
  height: 100%;
}

.home-owner .video video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.home-owner h6 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
/* .home-owner h2 {
  color: var(--accent);
  font-weight: 800;
  margin-bottom: 1.5rem;
} */
.home-owner .text p {
  text-wrap: balance;
  max-width: 90%;
}
.home-owner .skew {
  position: relative;
}
.home-owner .skew::after {
  position: absolute;
  top: 0;
  left: 25%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to top, var(--light) 0%, var(--ultralight) 100%);
  background-size: cover;
  opacity: 0.66;
  transform: skewx(var(--skew));
  transform-origin: center;
  content: '';
  display: block;
  z-index: 1;
}
.home-owner .img {
  width: 6em;
  aspect-ratio: 1;
  height: auto;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.home-owner .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%);
  display: block;
  vertical-align: top;
}

/* .home-reverse | a dark mode text + image section with a decorative skew behind the image */

.home-reverse {
  position: relative;
}
.home-reverse .skew-lower {
}
.home-reverse .site-grid {
  grid-template-columns: repeat(2, 2fr);
  gap: 2rem;
}
.home-reverse .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--standard-padding) 3rem var(--standard-padding) 0;
  position: relative;
  z-index: 2;
}
.home-reverse h6 {
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.home-reverse h2 {
  /* color: var(--accent); */
  margin: 0 0 1.5rem 0;
  /* font-size: var(--base-h3-size);
  font-weight: 800; */
} 
.home-reverse p {
  text-wrap: balance;
}
.home-reverse .img {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.home-reverse .img .img-cover {
  height: 100%;
  width: 100%;
  background: #727272;
  transform: skewx(var(--skew));
  transform-origin: center;
  position: relative;
}
.home-reverse .img .img-cover::after {
    position: absolute;
    display: block;
    content: '';
    width: .5rem;
    left: calc(50% - .25rem);
    top: 0;
    height: 100%;
    background: var(--primary);
    z-index: 2;
}
/* .home-service-icons | large service section with services and sub-service grids */

.home-service-icons {
  padding: var(--standard-padding) 0;
}
.home-service-icons h6 {
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.home-service-icons h2 {
  /* color: var(--accent);
  font-weight: 800;
  font-size: var(--base-h1-size); */
  max-width: 75%;
}
.home-service-icons hr {
  display: none;
}
.home-service-icons h3 {
  margin: 0;
  font-weight: 600;
  color: var(--secondary);
  text-transform: uppercase;
  font-size: var(--base-h4-size);
  margin-top: 3rem;
}
.home-service-icons h3::after {
  display: block;
  width: 2.5rem;
  height: 0.25rem;
  background: var(--primary);
  content: '';
  margin: 0.5rem 0 1.5rem 0;
}
.home-service-icons .site-grid {
  gap: 2rem;
  grid-template-columns: repeat(3, 3fr);
}
.home-service-icons .site-grid .grid-item {
  border: 1px solid var(--light);
  border-radius: var(--btn-border-radius);
  overflow: hidden;
  /* padding: 2rem; */
  position: relative;
  display: flex;
  flex-direction: column;
}
.home-service-icons .site-grid .grid-item::after {
  position: absolute;
  top: 0;
  right: -25%;
  width: 50%;
  height: 100%;
  transform: skewx(var(--skew));
  transform-origin: top right;
  background: linear-gradient(to bottom, var(--light), var(--ultralight));
  opacity: 0.33;
  z-index: 1;
  content: '';
  display: block;
}
.home-service-icons .site-grid .grid-item a {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.home-service-icons .site-grid .grid-item a .content {
  padding: 2rem;
  flex: 1;
}

.home-service-icons .site-grid .grid-item a .content .text {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.home-service-icons .site-grid .grid-item a .content .text p {
  flex: 1;
}

.home-service-icons .site-grid .grid-item .img {
  max-height: 14rem;
}

.home-service-icons .site-grid .grid-item img {
  height: 14rem;
  object-fit: cover;
  width: 100%;
  min-height: 14rem;
}

.home-service-icons a h4 {
  color: var(--accent);  
  font-size: var(--base-h5-size);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.home-service-icons a .icon {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}
.home-service-icons a .icon i {
  font-weight: 300;
  background: linear-gradient(to bottom, #fe9a4d, var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; /* Ensures full transparency to see the gradient */
}
.home-service-icons .site-grid a p {
  text-wrap: balance;
  color: var(--text);
}

/* .home-reviews | a review grid */

.home-reviews {
  padding: var(--standard-padding) 0;
  background: white;
}
.home-reviews h6 {
  margin-bottom: 0.5rem;
  font-weight: 600;
}
/* .home-reviews h2 {
  color: var(--accent);
  font-weight: 800;
  font-size: var(--base-h1-size);
  margin-bottom: 1.5rem;
} */
.home-reviews h3 {
  color: var(--text);
  font-weight: 600;
  font-size: var(--base-h5-size);
}
.home-reviews p {
  text-wrap: balance;
}
.home-reviews .site-grid {
  gap: 2rem;
  grid-template-columns: repeat(3, 3fr);
}
.home-reviews .site-grid .grid-item {
  border: 1px solid var(--light);
  border-radius: var(--btn-border-radius);
  overflow: hidden;
  padding: 2rem;
  position: relative;
}
.home-reviews .site-grid .grid-item::after {
  position: absolute;
  top: 0;
  right: -25%;
  width: 50%;
  height: 100%;
  transform: skewx(var(--skew));
  transform-origin: top right;
  background: linear-gradient(to bottom, var(--light), var(--ultralight));
  opacity: 0.33;
  z-index: 1;
  content: '';
  display: block;
}
.home-reviews * {
  position: relative;
  z-index: 2;
}
.home-reviews h4 {
  color: var(--accent);  
  font-size: var(--base-h5-size);
  text-transform: capitalize;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.home-reviews .icon {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}
.home-reviews .icon i {
  font-weight: 300;
  background: linear-gradient(to bottom, var(--primary-hover), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; /* Ensures full transparency to see the gradient */
}
.home-reviews .site-grid p {
  text-wrap: balance;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.home-reviews .review-name {
  font-weight: 600;
  text-transform: uppercase;
  font-family: var(--font-heading);
}

/* .home-recent-posts */

.home-recent-posts {
  background: white;
  padding: var(--standard-padding) 0;
}
.home-recent-posts h6 {
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.home-recent-posts h2 {
  color: var(--accent);
  font-size: var(--base-h1-size);
  font-weight: 800;
}
.home #l10-post-widget .posts h5 {
  font-weight: 600;
  color: var(--accent);
}
.home #l10-post-widget .posts hr {
  display: none;
}
.home #l10-post-widget .posts p {
  text-wrap: balance;
}
.home #l10-post-widget .site-btn a {
  background: none;
}

/* .home-map:not(.home-cta) */

.home-map:not(.home-cta) {
  padding: 0;
}
.home-map:not(.home-cta) .text {
  border-radius: none;
  background: white;
  padding: 0 var(--container-margin);
  margin-bottom: 3rem;
}
.home-map:not(.home-cta) h6 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.home-map:not(.home-cta) h2 {
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 2rem;
  font-size: var(--base-h1-size);
}
.home-map:not(.home-cta) ul.angles {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 4fr);
  margin-bottom: 2rem;
}
.home-map:not(.home-cta) ul.angles li::before {
  color: var(--primary);
  content: '\f3c5';
  font-family: 'Font Awesome 7 Sharp';
}
.home-map:not(.home-cta) ul.angles li a:hover {
  color: var(--primary);
}

/* map embed styling */

.home-map:not(.home-cta) .map {
  position: relative;
  background: var(--primary);
}
.home-map:not(.home-cta) .map::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary);
    content: '';
    display: none;
    mix-blend-mode: hard-light;
    z-index: 2;
    opacity: .5;
}
.home-map:not(.home-cta) iframe {
    position: relative;
    display: block;
    filter: grayscale(100%);
    object-fit: cover;
    width: 100%;
    height: 100%;
    vertical-align: top;
    opacity: 1;
    border-radius: 0 !important;
}

/*  =============================================================================
    emerge electric media queries
    ============================================================================= */

@media(max-width: 1280px) {
  .search-btn {
    display: none;
  }

}
@media(max-width: 1199px) {

  .home-hero {
    max-height: none;
    aspect-ratio: inherit;
  }
  .skew-upper {
    display: none;
  }
  .skew-lower {
    width: 100%;
    height: 100%;
  }
  .emerge-img {
    position: relative; 
    right: 0; 
    width: 66%; 
    height: auto; 
    aspect-ratio: 3 / 2; 
    top: 0; 
    margin: 2rem 0 4rem; 
    margin-left: 31%; 
    box-shadow: -2rem 2rem 0 var(--primary); 
  }
  .home-hero.img-with-form .hero-contents {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: var(--standard-padding);
  }
  .home-service-icons .site-grid {
    grid-template-columns: repeat(2, 2fr);
  }
  .home-reviews .site-grid {
    grid-template-columns: repeat(2, 2fr);
  }
  .home-accordion .site-grid, .home-cta .site-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .home-accordion .text, .home-cta .text {
    padding: var(--standard-padding) var(--container-margin);
  }
  .home-accordion .site-grid .img, .home-cta .site-grid .img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
  }
  .home-reverse .site-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
  }
  .home-reverse .text {
    padding: var(--standard-padding) 0;
  }
  .home-reverse .emerge-img {
    margin-top: 0;
    margin-bottom: var(--standard-padding);
  }

}
@media(max-width: 720px) {
  :root {
    --standard-padding: 4rem;
  }
  .home-owner .site-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .home-owner .text {
    grid-column: span 1;
    order: 1;
    align-items: center;
    text-align: center;
  }
  .home-owner .icons {
    order: 2;
  }
  .home-owner .icon-group {
    max-width: 100%;
    height: auto;
    padding: 1rem;
  }
  .home-service-icons .site-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .home-reviews .site-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .home-map:not(.home-cta) ul.angles {
    grid-template-columns: repeat(2, 2fr);
  }
}
@media(max-width: 480px) {
  .home-map:not(.home-cta) ul.angles {
    grid-template-columns: repeat(1, 1fr);
  }

}

/* mobile phone # */

@media(max-width: 81.93rem) {

  .site-header-mobile-row {
    height: auto;
    padding: 1.5rem 0 1.5rem;
  }
  .site-header-menu-row .phone a i, .site-header-mobile-row .phone a i {
    font-family: 'Font Awesome 7 Sharp';
    font-weight: 400;
    color: var(--primary);
  }
  .site-header-mobile-row .label {
    display: none;
  }
  .site-header-mobile-row .number {
    color: var(--accent);
    font-family: var(--font-heading);
    font-weight: 700;
  }

}

/*  =============================================================================
    specials banner | added march '25'
    ============================================================================= */

.specials-banner {
  background: linear-gradient(to right, var(--primary) 0, var(--primary) 50%, var(--accent) 50%);
  /* top: calc( var(--header-menu-height) - 1px );
  position: -webkit-sticky;
  position: sticky; */
  z-index: 9; /* 1 below .quick-links-sticky for testing */
  border-bottom: 0.5rem solid white;
}
.specials-banner ul {
  background: var(--accent);
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(16rem, 1fr) );
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
}
.specials-banner li {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--base-h6-size);
  padding: 1rem;
  height: 100%;
}
.specials-banner li:first-child {
  position: relative;
  left: -1px; /* fix render bug */
  background: var(--primary);
  color: white;
  text-transform: uppercase;
  font-weight: 800;
  padding-right: 3rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 2rem) 100%, 0% 100%);
  padding-left: 0;
}
.specials-banner li > a {
  color: var(--light);
  transition: 0.2s color;
}
.specials-banner li > a::after {
  position: relative;
  font-family: "Font Awesome 7 Sharp";
  content: '\f105';
  display: inline-flex;
  margin-left: 0.5rem;
  transition: 0.2s color, 0.2s margin;
}
.specials-banner li > a:hover {
  color: white;
}
.specials-banner li > a:hover::after {
  margin-left: 1rem;
  margin-right: -0.5rem;
  color: var(--primary);
}
@media(max-width:720px) {
  .specials-banner {
    position: relative;
  }
  .specials-banner ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .specials-banner li {
    width: 100%;
    height: auto;
  }
}

/*  =============================================================================
    special offers page | added march '25
    ============================================================================= */

.specials {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.specials .special {
  padding: 4rem 2rem;
  background: #393a3d;
  overflow: hidden;
  position: relative;
  z-index: 2;
  border: 1px solid var(--med);
}
.specials .special::after {
    position: absolute;
    top: 0;
    right: -25%;
    width: 50%;
    aspect-ratio: 2;
    height: auto;
    transform: skewx(var(--skew));
    transform-origin: top right;
    background: linear-gradient(to bottom, var(--light), transparent);
    opacity: .66;
    z-index: 1;
    content: '';
    display: block;
}
.specials .special * {
  position: relative;
  z-index: 3;
}
.specials .site-grid {
  grid-template-columns: repeat(2, 2fr);
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.specials .site-grid .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.specials .site-grid .img {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.specials .site-grid .img .img-cover {
  aspect-ratio: 3/2;
  width: 100%;
  height: auto;
}
.specials h1 {
  font-weight: 800;
  color: var(--accent);
  margin: 0;
  text-wrap: balance;
}
.specials h2 {
  color: var(--secondary);
  font-size: var(--base-h3-size);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
.specials .special h3 {
  font-weight: 800;
  font-size: var(--base-h3-size);
  text-wrap: balance;
  color: var(--primary);
}
.specials .special h5 {
  color: white;
  font-weight: 800;
  text-transform: uppercase;
}
.specials .special h5::after {
    display: block;
    width: 2.5rem;
    height: .25rem;
    background: var(--primary);
    content: '';
    margin: .5rem 0 1.5rem;
}
.specials .special-sub-content {
  margin-bottom: 1.5rem;
}
.specials .special p {
  text-wrap: pretty;
  color: white;
}
.specials .special ul {
  margin: 0 0 1.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.specials .special ul li {
  margin: 0;
  color: white;
}
.specials .special ul li::before {
  content: '\f105';
  font-family: 'Font Awesome 7 Sharp';
  color: var(--primary);
  margin-right: 1rem;
  display: inline-flex;
}
.page-template-templatestemplate-special-offers-php .site-title-bar.title-bar--outer {
background: url('/wp-content/uploads/2026/06/residential-roof-repair-kaukauna-wisconsin-exteriors.webp');
background-size: cover;
background-position: left;
}
.page-template-templatestemplate-special-offers-php .site-title-bar.title-bar--outer h2 {
color: #2d2f34;
font-weight: bold;
text-transform: uppercase;
}
.page-template-templatestemplate-special-offers-php .site-title-bar.title-bar--outer:after {
display: none;
}

.text-to-expand > .site-btn {
  margin-bottom: 2rem;
}

.home-hero.img-with-form h1 + .st {
  color: var(--text);
  font-size: var(--base-h5-size);
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}

.home-hero.img-with-form h1 + .st + .st {
    font-weight: 400;
    color: var(--text);
    font-size: 1rem;
    text-transform: capitalize;
    max-width: 30rem;
}

/* html {
  overflow: hidden
} */

.video-container,
.video-container .video {
  position: relative;
}

.video-container:not(.playing)::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
  cursor: pointer;
}

.video-container:not(.playing)::after {
  content: '\f04b';
  color: var(--primary);
  font-family: 'Font Awesome 7 Pro';
  font-size: 4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 400;
  cursor: pointer;
}

.video-container video {
  width: 100%;
  display: block; /* Removes baseline spacing gap */
}

.video-container .video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7); /* Translucent dark background */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px 0 10px;
  gap: 15px;
  transition: opacity 0.3s ease;
  opacity: 1;
}

/* Optional: Hide controls until user hovers over player */
.video-container.playing:hover .video-controls {
  opacity: 1;
}

/* Style custom range sliders for seek/volume */
.video-container input[type="range"] {
  cursor: pointer;
  accent-color: var(--primary)
}

.seek-outer {
  width: 100%;
  position: absolute;
  top: -18px;
  border: 0;
}

.seek-bar {
  --progress: 0%;

  width: 100%;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
    border: none !important;
  outline: none !important
}

/* Chrome / Edge / Safari track */
.seek-bar::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 0;
  background:
    linear-gradient(
      to right,
      var(--primary) 0%,
      var(--primary) var(--progress),
      rgba(255, 255, 255, 0.35) var(--progress),
      rgba(255, 255, 255, 0.35) 100%
    );
}

.seek-outer > .seek-bar.seek-bar.seek-bar {
  margin: 0 !important;
  padding: 0 !important;
}

/* Firefox track */
.seek-bar::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}

.seek-bar::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--primary);
}

/* Thumb - hidden until hover/focus like YouTube */
.seek-bar::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.seek-bar::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  position: relative;
}

.seek-bar:hover::-webkit-slider-thumb,
.seek-bar:focus-visible::-webkit-slider-thumb {
  opacity: 1;
  transform: scale(1.1);
  right: 2px;
}

.seek-bar:hover::-moz-range-thumb,
.seek-bar:focus-visible::-moz-range-thumb {
  opacity: 1;
  transform: scale(1.1);
}

/* Slightly taller on hover */
.seek-bar:hover::-webkit-slider-runnable-track,
.seek-bar:focus-visible::-webkit-slider-runnable-track {
  height: 8px;
}

.seek-bar:hover::-moz-range-track,
.seek-bar:focus-visible::-moz-range-track,
.seek-bar:hover::-moz-range-progress,
.seek-bar:focus-visible::-moz-range-progress {
  height: 8px;
}

.hidden {
  display: none !important;
}

.video-container .controls-outer .control-button {
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  transition: 0.2s color;
}

.video-container .controls-outer {
  margin-top: .5rem;
}

.home-hero.img-with-form:not(.video-bg) {
  background: none !important;
}

.fast-online-roof-quote-content {
	color: var(--ultralight);
}