.first-word {
    color: var(--primary); 
}
.other-words {
    color: var(--secondary); 
}
#waterford_div_page_contact_form {
  background-color: var(--accent);
}
.waterford_div_main_content_wrapper h2 {
  color: var(--accent);
}
.hero-description__first-word {
  display: inline-block;
  font-size: 2em;
  color: var(--accent);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 0.15em 0.1em;
  margin-right: 0rem;
  vertical-align: -0.1em;
}
strong {
  font-weight: 600;
}
/* Sticky mobile contact bar — fixed at bottom-RIGHT of viewport as a
   compact vertical stack (email above phone). Hidden until the user has
   scrolled past ~400px. Mobile only; hidden on desktop. */
#nav-wrapper-mob {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  left: auto;
  width: auto;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transform: translateX(120%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#nav-wrapper-mob.visible-nav {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
#nav-wrapper-mob .grid-4-mobile-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  grid-template-columns: none;
}
#nav-wrapper-mob .grid-4-mobile-bar > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
#nav-wrapper-mob .grid-4-mobile-bar > a svg {
  width: 22px;
  height: 22px;
  display: block;
}
@media (min-width: 993px) {
  #nav-wrapper-mob {
    display: none;
  }
}
img.hide-featured-image {
  margin: 0 0 0.5em 2em;
  width: 40%;
  border: 1px solid var(--primary);
}
.hide-featured-image {
  display: none;
}
.hero-text {
  line-height: 1;
}
.hero-text span {
  font-size: 2rem;
  display: block;
  color: var(--secondary);
}
.hero-intro-title {
  font-size: 5rem !important;
  color: var(--accent);
}
.clickable-parent:not(a) {
  position: static;
}
.clickable {
  padding-left: 1rem;
  padding-top: 1rem;
}
.clickable-parent:not(a) a {
  position: static;
}
.clickable a {
    position: relative;
}

.clickable a::after {
    content: "";
    position: absolute;
    inset: 0;
    cursor: pointer;
    display: block;
}

.clickable-parent:not(a) > a::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer !important;
  display: flex;
}

a.clickable-parent {
  position: static;
}

a.clickable-parent::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer !important;
  display: flex;
}
.related_row_service {
  position: relative;
}
#service-page-callouts {
  width:100%;
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  margin: 0;
  align-items: stretch;
}
.related_row {
  flex: 1 1 calc(25% - 20px);
  max-width: calc(25% - 20px);
  box-sizing: border-box;
  margin-bottom: 20px;
  margin-right: 20px;
}
ul.breadcrumbs {
  padding-left: 1rem;
}
@media (max-width: 600px) {
  ul.breadcrumbs {
    padding-left: 0;
  }
}
.breadcrumbs {
  flex-wrap: wrap;
  font-weight: 300;
  line-height: 1.2;

}
.review-wrapper {
  margin-bottom: 2rem;
}
.slanted {
  display: flex;
  font-family: sans-serif;
  white-space: nowrap;
  text-align: center;
}
.slanted .first {
  background-color: var(--accent);
  width: 45%;
}
.slanted .second {
  margin-left: 1rem;
  background-color: var(--contrast);
  width: 45%;
}
.slanted div {
  position: relative;
  padding: .5em;
  border: 1px solid white;
}
*, ::after, ::before {
  box-sizing: border-box;
}
.slanted {
  font-family: sans-serif;
  white-space: nowrap;
  text-align: center;
}
.breadcrumbs li {
  list-style-type: none;
  display: inline;
}
.breadcrumbs li {
  list-style-type: none;
}
.breadcrumbs li:not(:last-child)::after {
  content: " ⏵ ";
  padding: 0 5px;
}
.pad--lr {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}
.quote-button {
  width: 100%;
  background-color: var(--secondary);
  color: #fff !important;
  padding: 2rem;
  display: block;
  text-transform: uppercase;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
ul.top-cta-list {
    list-style-type: " ★ ";
    column-width: auto;
    column-count: 2;
}
#main_content_block .wp-caption-text {display:none;}
.center-content { align-items:center; }
#menu-services-menu .current_page_item {
  background-color: transparent !important;
}
.oxy-modal-backdrop .ct-modal {background-color:rgba(255,255,255,0) !important; }
.hidden-nav {
  display: none;

}
#gform_submit_button_1 {
  background-color: var(--secondary);
}
.style-title {
  background-color: var(--primary);
  color: #fff;
  padding:1rem;
}
#cookie-notice .cn-button {
  padding: 1rem;
  background-color: var(--secondary);
  color: #fff;
}
.shape-curve {
border-bottom-left-radius: 60px;
border-top-left-radius: 60px;
border-bottom-right-radius: 60px;
border-top-right-radius: 60px;
}
.h_button {
  width: 62px;
height: 64px;
background-color: #00aeef;
text-align: left;
position: relative;
z-index: 1;
cursor: pointer;
}
.h_button::after {
  position: absolute;
  right: -24px;
  border-top-color: #00aeef;
  border-top-width: 64px;
  border-top-style: solid;
  border-right-color: rgba(0,0,0,0);
  border-right-width: 24px;
  border-right-style: solid;
  content: "";
}
.service-main-posts {
  position: relative;
}

.service-main-wrapper {position:relative;}
.service-posts {
gap: 1rem;
display: grid;
}
.service-post-text {
  position: absolute;
  bottom: 0;
  text-align: left;
}
.service-image-overlay {
  background-image: linear-gradient(rgba(255,255,255,0),#00000080);
  position: absolute;
  width: 100%;
  height: 100%;
}
.service-image {
  position: relative;
  overflow: hidden;
  background-color: var(--secondary);
  max-height:300px;
}
.service-image::before {
  content: "Service";
  position: absolute;
  top: 0;
  right: 0;
  border-top: 50px solid white;
  border-left: 50px solid var(--secondary);
  width: 0;
  height: 0;
}
.border-round {border-radius:50px;}
.overflow-hidden {overflow:hidden;}
.fade-in {
  opacity: 0;
  animation: zoomer 1s 0.5s backwards;
}
.hero_title {
  overflow: hidden;
  font-size:3rem;
  color:var(--secondary);
}
.text-stroke-light {
  -webkit-text-stroke: 1px white;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.slide-in {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.5s, transform 0.5s;
}

.slide-in:not(.slide-in-visible) {
  transition-duration: 0s;
}

.slide-in-visible {
  opacity: 1;
  transform: translateX(0);
}
.slide-in-right {
  opacity: 0;
  transform: translateX(100%); /* Change to translateX(100%) */
  transition: opacity 0.5s, transform 0.5s;
}

.slide-in-right:not(.slide-in-right-visible) {
  transition-duration: 0s;
}

.slide-in-right-visible {
  opacity: 1;
  transform: translateX(0);
}
svg.oxy-slide-menu_dropdown-icon {
  width: 15px;
  height: 15px;
}

.hero-left {
 background-color: rgba(0,0,0,0.68);
width:50%;
height:100%;
position:relative;
  z-index:2;
}
.hero-inner {
  width: 100%;
  position:relative;
overflow: hidden;
}

.hero-inner-left {padding-left:3rem;}
.intro {
  font-weight: 300;
  color: var(--secondary);
}
.button-main {
  background-color: var(--primary);
}
.ct-link-button {
  border-top-right-radius: 32px;
border-bottom-left-radius: 32px;
  overflow: hidden;
  
}

.alignright {
  border: 2px solid var(--primary);
}
.intro-title {
  font-size: 4rem;
  font-weight: 200;
  color: var(--secondary);
}
.intro-number {
  color: var(--primary);
  font-weight: 700;
  font-size: 3rem;
}

.button-main { margin-top:1rem; margin-bottom:1rem;}
.star-list ul {
      list-style-type: ' ⏵ ';
		padding-left:2.5rem;

}
.ct-additional-number .button-main {
  display: block;
}
.star-list-secondary li::marker {
  color: var(--secondary);
}
.text-box-links a {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  font-weight: 500;
}
.gform_button {
  width: 100%;
  padding: 1rem;
  background-color: var(--primary);
  color: #fff;
}
.inline {display:inline;}
.title-underline {
  text-transform: uppercase;
  padding-bottom: .5rem;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: var(--secondary);
  margin-bottom: 1rem;
  color: #21282e;
}
.hero-box {
margin-top: 4rem;
  background-color:var(--accent);
}
.hero-button {
   display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.hero-line-button {
  padding-left: 0px;
  padding-right: 0px;
  flex-direction: row;
  display: flex;
text-align:left;
  align-items: center;
justify-content: space-between;
  width:100%;
}
.hero_button::after {
  background-image: url(/wp-content/uploads/2023/03/arrow-right.svg);
  background-size: 20px 20px;
  background-color: var(--accent);
  background-repeat: no-repeat;
  width: 60px;
  height: 50px;
  background-position: 90% 50%;
  content: "";
  -webkit-clip-path: polygon(47% 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(47% 0, 100% 0, 100% 100%, 0% 100%);

}
.center-column--middle {margin-top:auto; margin-bottom:auto;}
.hero_service_bg {
  background-color: var(--secondary);
  padding-right: 0px;
border:1px solid var(--dark);
    display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

  
.hero-service-text {padding-left:1rem; width:100%; text-transform:uppercase; color:#fff;}
.flex-gallery-container {
  max-width: 100%;
  width: 1400px;
   display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  gap:10px
}

.flex-gallery-item {
  width: calc(33.33% - 10px);
  position:relative;
  line-height:0;
  overflow:hidden;
  box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
  
 
}
.flex-gallery-item img { width:100%; object-fit:cover; height:300px; transition: transform 400ms ease-out;}
.flex-gallery-item img:hover {transform: scale(1.05);}
.flex-gallery-item a {
  height: 100%;
  display: block;
}

.flex-gallery-caption {
  background-color: var(--primary);
  color: #fff;
  padding: 2rem;
  position: absolute;
  bottom: 20%;
  width: 80%;
  text-transform: uppercase;
  box-shadow: 0 5px 8px rgba(0,0,0,.6);
}
.fancybox-caption__body {
  max-height: 50vh;
  overflow: auto;
  pointer-events: all;
  text-transform: uppercase;
  background-color: var(--primary);
  padding: 1rem;
}

.fancybox-caption__body {
  max-height: 50vh;
  overflow: auto;
  pointer-events: all;
  text-transform: uppercase;
  background-color: var(--primary);
  padding: 1rem;
}

.breadcrumbs {flex-wrap: wrap; font-weight:300; line-height:1.2; }
.breadcrumb.breadcrumb--last {
  font-weight: 800;
  color: var(--secondary);
}

.job-details {display:grid;}
.related-posts {width:100%;}
.related-post {
	overflow: hidden;
	position: relative;

  border: 2px solid var(--primary);
}
.related-post-image {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  max-height: 300px;
}
 .service-link-button {
flex-direction: row;
display: flex;
width: 100%;
align-items: center;
background-color: var(--secondary);
justify-content: space-between;
   position:absolute;
   bottom:0;
}
 .location-link-button {
flex-direction: row;
display: flex;
width: 100%;
align-items: center;
background-color: var(--secondary);
justify-content: space-between;
   bottom:0;
}
 .work-link-button {
flex-direction: row;
display: flex;
width: 100%;
align-items: center;
background-color: var(--secondary);
justify-content: space-between;
position:absolute;
   bottom:0;
}
.service-title-button {
  width: 80%;
  padding-left: 1rem;
  font-size:1.5rem;
  text-transform:uppercase;
  line-height:1;
}
.work-title-button {
  width: 80%;
  padding-left: 1rem;
  font-size:1.5rem;
  text-transform:uppercase;
  line-height:1;
}

.service-image-button {
  width: 40px;
  height: 50px;
  object-fit: contain;
  background-color: var(--primary);
}
.service-post-title-button {
  background-color: var(--secondary);
}
.work-image-button {
  width: 40px;
  height: 50px;
  object-fit: contain;
  background-color: var(--primary);
}
.related-works {
  width: 100%;
}

.work-image {max-height:250px;}
.related-work {width:100%;}
.related-work {
	overflow: hidden;
	position: relative;
  background-color: var(--accent);
color: var(--light);
}
.related-work-details {
  gap: 10px;
  display: grid;
}
.alignright {
    margin-left: 1rem !important;
    float: right !important;
    margin-bottom: 1rem;
    margin-top: 2rem;
    max-width: 30%;
}
img.alignright,
img.alignright.size-medium {
    margin: 0 0 0.5em 2em;
    margin-top:1rem;
    margin-left: 2em;
    max-width: 40%;
    height: auto;
    border:1px solid #fff;
}
@media only screen and (max-width: 480px) {
    .alignright,
    img.alignright,
    img.alignright.size-medium {
        float: right !important;
      
		margin-top:1rem;
        display: block;
        max-width: 30%;
    }
}
.pagination-wrap {
  justify-content: space-between;
  display: flex;
  width: 100%;
  background-color: var(--accent);
}
.page-numbers {
color:var(--light);
  padding:1rem;
}
.navigation.pagination {
  display: flex;
  width: 100%;
}
.page-numbers:hover {
  color: var(--secondary);
}
.nav-links {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.page-numbers.current { color: var(--secondary);}
/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.related-image {
  width: 100%;
 
}
#image-single {
  width: 100%;
}
.video-layout {
  display: flex;
        flex-wrap: wrap;
  width:100%;
}
video {
  width: 100% !important;
  height: auto !important;
}
.row-one-line {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.cta_choice {
  color: #ffffff;
  flex-direction: column;
  display: flex;
  text-align: left;
  width: 50%;
}
.contact_cta_right {
  width: 50%;
}
#call-popup .button-main {width:100%;}
.rt0 {
  fill: var(--light); !important;
}
.rt6 {
  fill: var(--accent);
}
.link-button {
  background-color: var(--accent);
  color: #fff;
  padding: 1rem;
}
.provenlocal-badge {
  max-width: 300px;
}
.gallery-columns-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 5px;
  margin-bottom: 3rem;
  margin-top: 3rem;
}
.gallery-columns-4 figure {
  margin: 0.5rem;
}
.gallery-columns-4 img {
  max-height: 250px;
  min-height:250px;
  object-fit:cover;
}

.quick-navigation {
  margin-left: auto;
  margin-right: auto;
}
.pill-width--100 {
  width: 100%;
  overflow-x: auto; /* Enable horizontal scrollbar on smaller screens */
}

.top-pill-container {
  display: flex;
  white-space: nowrap;
padding-left:0;
}

.top-pill-navigation {
  margin-right: 10px; /* Optional: Add some spacing between each pill */
}
	.top-pill-container ul {padding-left:0px;}
	.top-pill-container li {list-style-type:none;}

.pill-link {
  text-decoration: none;
  color: var(--light);
  display: block;
  padding: 0.5rem;
  background-color: var(--secondary);
  border-radius: 40px;
	font-size:12px;
}

.top-pill-container::-webkit-scrollbar {
  width: 8px;
}

.top-pill-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.top-pill-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.top-pill-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.postTitle li {
  list-style-type: none;
  text-align: left;
}
    .roofersContent {
        display: none; /* Start with the content collapsed */
        grid-template-columns: repeat(4, 1fr); /* Create a 4-column grid */
        gap: 10px; /* Add some space between the grid items */
    }
.postTitleHeader {
  font-weight: 800;
}
    .roofersTitle {
        cursor: pointer;
    }
ul.linkedPosts {
  margin-left: 0px;
  padding-left: 0px;
}
@media (max-width: 1300px) {
.oxy-nav-menu .oxy-nav-menu-list li.menu-item {
  font-size: 1.4rem;
}
}
  @media (min-width: 480px) and (max-width: 1200px) {
  .related-posts {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-column-gap: 1rem; /* add 1rem padding around each column */
  }
    .related-works {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-column-gap: 1rem; /* add 1rem padding around each column */
  }
}
@media (min-width: 992px) {
  .related-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4 columns */
    grid-column-gap: 1rem; /* add 1rem padding around each column */
  }
  .related-works {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4 columns */
    grid-column-gap: 1rem; /* add 1rem padding around each column */
  }
 
.cta-box-2 {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
  .cta-box-1 {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
}

@media (min-width: 1200px) {
  .related-posts {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    grid-column-gap: 1rem; /* add 1rem padding around each column */
  }
  .service-title-button {font-size:1.5rem;}
}
@media only screen and (max-width: 992px) {
  .visible-nav {
    opacity: 1 !important;
  transition: opacity 2s ease;
  display: block;
}
  .related_row {
    flex: 0 0 calc(33% - 20px);
    max-width: calc(33% - 20px);
  }
    .hide-featured-image {
    display: flex;
    float: right;
    margin-left: 1rem;
  }
.flex-gallery-item {
  width: calc(33.33% - 10px);
 }
  .text--hero {font-size: 3.5rem;   text-align: center;
  line-height: 1.1;
}
  .alignright {
  max-width: 40% !important;
  height: auto;
}
  .contact_cta_right {
  width: 100%;
}
  .hero-left { width:100%; background-color: #444;z-index: 1;}
  .inner-hero {flex-direction: column-reverse; }
  .hero-inner { border:none;border-bottom-right-radius: 0;
border-bottom-left-radius: 0;}
  .button-main {
  background-color: var(--primary);
  width: 100%;
  margin-bottom: 0px;
    display: block;
}
  .row-one-line {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(1,minmax(200px,1fr));
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
   .row-two-line {
  display: grid !important;
  align-items: stretch;
  grid-template-columns: repeat(2,minmax(200px,1fr));
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
  .responsive-50-width {
    width:100%;
  }

}

@media only screen and (max-width: 767px) {
   .roofersContent {
            grid-template-columns: 1fr; /* Create a single-column grid */
        }
    .related_row {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
   .flex-gallery-item {
  width: calc(50% - 5px);
 margin-bottom: 1rem;
}
  .hero-service-text {
  padding-left: 0.2rem;
    max-width: 70%;
    font-size: 1.3rem;
color:#fff;
}
  .service-main-posts {
    align-items: stretch;
    grid-template-columns: repeat(1,minmax(200px,1fr));
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    display: grid;
  }
  
  .work-image {max-height:300px;}
   .width--80 {width:100%;}
     .row-two-line {
  display: grid !important;
  align-items: stretch;
  grid-template-columns: repeat(1,minmax(250px,1fr));
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
  .cta-image-100 { width:100%; }
  .cta-image-100 img { width:100%; }
  }
@media only screen and (max-width: 480px) {
  .text--hero {
  font-size: 2.5rem;
  }
    .related_row {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .slanted {
    display: block;
    font-size: 2rem;
  }
    .slanted .second {
    width: 100%;
    margin-left: 0px;
    margin-top: 1rem;
  }
   .slanted .first {
    width: 100%;
  }
  .flex-gallery-container {
  max-width: 100%;
  width: 100%;
   display: block;
  }
  .flex-gallery-item {
  width: 100%;
 margin-bottom: 1rem;
    max-height:250px;
}
  .flex-gallery-item img {
    height:250px;
  }
   .related-post {
    width: 100%; /* 1 post per row */
  }
  .related-work {
    width: 100%; /* 1 post per row */
  }
  .hero-inner-left { padding-left:0.2rem; width:100%;}
  .hero_service_bg {max-width:100%;}
  .hero-box {
   border-top: 2px solid var(--secondary);
  }
  .hero_button::after {
  width: 40px;
  height: 40px;
  }
  .hero-service-text {
  padding-left: 0.2rem;
  max-width: 80%;
  font-size: 1.1rem;
}
  .grid-4-2-1 {
  grid-template-columns: repeat(1,1fr);
  gap: 1rem;
}
  
}


/* =========================================================================
   Visual polish pass — v0.9.0
   Layout/colour rules for hero, 3-up callout row, 4-up badge row,
   contact CTA, map wrapper, breadcrumb strip, and main content block.
   These nodes were not present in the Oxygen JSON extraction and are
   added here so the rendered DOM matches the live reference design.
   ========================================================================= */

/* Auto-injected footer logo block (sits at top of col 1, ABOVE any user
   widgets). White card with secondary-coloured headline. */
.waterford_div_footer_logo {
    background-color: var(--light);
    padding: 1.5rem 1.75rem;
    margin-bottom: 4rem;
    border-radius: 4px;
    text-align: center;
}
.waterford_div_footer_logo_svg {
    width: 100px;
    line-height: 0; /* removes inline-baseline whitespace below the svg */
}
.waterford_div_footer_logo_svg svg {
    display: block;
    width: 100%;
    height: auto;
}
.waterford_div_footer_logo .hero_title {
    color: var(--secondary);
    margin: 0.25rem 0 0; /* tight gap below the SVG */
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
}

/* --- Footer layout (3-up widget grid + heading + list styling) --- */
#waterford_div_main_footer {
    padding: 3rem 1rem 2rem !important;
}
#waterford_div_footer_row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    width: auto !important;
    max-width: 1400px !important;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
    align-items: start;
}
@media (max-width: 992px) {
    #waterford_div_footer_row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }
}
@media (max-width: 600px) {
    #waterford_div_footer_row {
        grid-template-columns: 1fr;
    }
}
.waterford_div_footer_col {
    min-width: 0;
    color: var(--light);
}
.waterford_div_footer_col .ct5-widget,
.waterford_div_footer_col .widget {
    margin-bottom: 4rem;
}
.waterford_div_footer_col .ct5-widget:last-child,
.waterford_div_footer_col .widget:last-child {
    margin-bottom: 0;
}
.waterford_div_footer_col .ct5-widget-title,
.waterford_div_footer_col .widget-title,
.waterford_div_footer_col h2,
.waterford_div_footer_col h3,
.waterford_div_footer_col h4 {
    color: var(--light);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: 0.04em;
    margin: 0 0 1.25rem;
    padding-bottom: 0;
    border-bottom: none;
}
.waterford_div_footer_col ul,
.waterford_div_footer_col .menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.waterford_div_footer_col li {
    list-style: none;
    margin-bottom: 0.5rem;
}
.waterford_div_footer_col a {
    color: var(--light);
    text-decoration: none;
}
.waterford_div_footer_col a:hover {
    text-decoration: none;
    opacity: 0.85;
}
.waterford_div_footer_col p {
    color: var(--light);
    margin: 0 0 1rem;
    line-height: 1.5;
}
.waterford_div_footer_col img {
    max-width: 100%;
    height: auto;
}
#waterford_div_footer_login {
    display: block;
    text-align: center;
    padding: 1rem;
    color: var(--light);
    opacity: 0.7;
    font-size: 0.9rem;
}
#waterford_div_footer_login:hover {
    opacity: 1;
}

/* --- Hero section (full coloured block, matches live layout) --- */
.waterford_div_page_hero {
    padding: clamp(2rem, 1rem + 3vw, 4rem) clamp(1rem, 0.5rem + 1.5vw, 2rem);
    text-align: center;
    background-color: var(--secondary);
    color: var(--light);
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box;
    overflow-wrap: break-word;
}
/* Anchor scroll offset (so #customer-reviews lands below sticky header if any). */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}
#customer-reviews {
    scroll-margin-top: 80px;
}
.waterford_div_page_hero .hero-intro-title {
    /* !important needed to beat the line-31 rule from the original
       custom-css.txt that hard-codes 5rem !important on .hero-intro-title.
       Floor raised to 2.6rem so the title always sits larger than the
       2rem .text--m description below it on narrow viewports. */
    font-size: clamp(2.6rem, 1.4rem + 3vw, 5rem) !important;
    color: var(--light);
    margin: 0 0 1rem;
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: break-word;
    max-width: 100%;
    text-align: center;
}

/* --- Hero title plaque (all viewports) ---
   Wraps the h1 in a contrast-coloured rectangle flush to the top of the
   hero, white rules above/below for clean separation, full-bleed break-out
   so it hits the viewport edges. Pure CSS, no markup change. */
.waterford_div_page_hero {
    padding-top: 0 !important;
}
.waterford_div_page_hero .hero-intro-title {
    display: block;
    background-color: var(--contrast);
    color: var(--light);
    padding: 1rem 1.25rem;
    /* Full-bleed break-out: negate the hero's horizontal padding so
       the title box hits the viewport edges. Safe because
       html/body have overflow-x:hidden globally. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 1.25rem;
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    border-top: 2px solid var(--light);
    border-bottom: 2px solid var(--light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}
.waterford_div_page_hero_description {
    /* Description always stays smaller than the title above. */
    font-size: clamp(1.7rem, 1.1rem + 1.3vw, 2.3rem);
    color: var(--light);
    max-width: 80ch;
    margin: 0 auto;
    text-align: center;
    opacity: 0.95;
    line-height: 1.4;
	margin-top:2rem;
}
/* Space between the "Customer Reviews and Feedback" heading and the
   star+count badge below it. */
.waterford_div_page_hero .ksm-reviews-summary-badge,
.waterford_div_page_hero_reviews .ksm-reviews-summary-badge {
    margin-top: var(--space-s);
}

/* Inside the hero block, override the default h3 size for the reviews
   summary title so it doesn't overflow on narrow viewports. */
.waterford_div_page_hero .ksm-summary-title,
.waterford_div_page_hero_reviews .ksm-summary-title {
    font-size: clamp(1.2rem, 0.9rem + 0.8vw, 1.9rem) !important;
    line-height: 1.2;
    margin: 0 0 0.75rem;
    word-break: break-word;
    overflow-wrap: break-word;
}
/* Call-to-click affordance — animated arrow after the reviews-summary
   link so the title reads as actively clickable. Applies wherever the
   summary renders (hero or standalone block). */
.ksm-summary-title a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
.ksm-summary-title a::after {
    content: "→";
    display: inline-block;
    font-weight: 700;
    transition: transform 0.2s ease;
}
.ksm-summary-title a:hover::after,
.ksm-summary-title a:focus-visible::after {
    transform: translateX(4px);
}
.waterford_div_page_hero_reviews {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    color: var(--light);
}
.waterford_div_page_hero_reviews .ksm-summary-star {
    color: rgba(255, 255, 255, 0.35);
    font-size: 1.5rem;
    line-height: 1;
}
.waterford_div_page_hero_reviews .ksm-summary-star.filled {
    color: #ffc107;
}
.waterford_div_page_hero_reviews .ksm-summary-rating,
.waterford_div_page_hero_reviews .ksm-platform-badge-rating,
.waterford_div_page_hero_reviews a {
    color: var(--light);
    font-weight: 600;
}

/* --- Callout row (3-up coloured tiles below hero) --- */
.waterford_div_page_callout_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2rem auto;
}
.waterford_div_page_callout_container > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 0.75rem;
    text-align: center;
    color: var(--light);
    min-height: 180px;
}
.waterford_div_page_callout_left   { background-color: var(--primary); }
.waterford_div_page_callout_center { background-color: var(--accent); }
.waterford_div_page_callout_right  { background-color: var(--secondary); }

.waterford_div_page_callout_container .callout-icon,
.waterford_div_page_callout_container img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: brightness(0) invert(1); /* force white icons regardless of source colour */
}
.waterford_div_page_callout_container .cta-text {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--light);
    margin: 0;
}

@media (max-width: 768px) {
    .waterford_div_page_callout_container {
        grid-template-columns: 1fr;
    }
}

/* --- Badge / partner-logo row (4-up fluid) ---
 * Layout rules (in priority order):
 *   1. Always honour the parent container (.set-width caps it to 1400px).
 *   2. 4 equal columns on desktop, 2 columns ≤768px, 1 column ≤480px.
 *   3. Cell width = grid track (1fr). Image fills cell up to its natural
 *      size, never overflows, never overrides the width="N" HTML attribute.
 *   4. Override .width--100 / inline width attrs that core srcset emits.
 */
.waterford_div_badge_wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: center;
    justify-items: stretch;
    padding: 3rem 1rem;
    margin: 2rem auto;
    width: 100% !important;
    max-width: 1400px;
    box-sizing: border-box;
}
.waterford_div_badge_wrapper > div {
    width: 100% !important;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.waterford_div_badge_wrapper img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 140px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

@media (max-width: 992px) {
    .waterford_div_badge_wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
        padding: 2rem 1rem;
    }
}
@media (max-width: 480px) {
    .waterford_div_badge_wrapper {
        /* No 1-column fallback — badges stay in the 2-column grid
           inherited from the ≤992px breakpoint at very narrow viewports. */
        gap: 1.25rem;
    }
}

/* --- Contact CTA section (final "Book Your Free Quote") ---
 * Brown background lives on the inner 1600px box; outer body is plain white. */
#get_a_free_quote {
    background: transparent !important;
    max-width: 1600px;
    margin: 3rem auto 0;
    padding: 4rem 2rem;
    background-color: var(--primary) !important;
    border-radius: 0;
}
#waterford_div_page_contact_text {
    text-align: center;
    margin-bottom: 2rem;
}
#waterford_div_page_contact_text h4 {
    color: var(--light);
}
#waterford_div_page_contact_text a {
    color: var(--light);
    text-decoration: none;
}

/* --- Contact section: form + map side-by-side on desktop --- */
.waterford_div_page_contact_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    width: 100%;
    margin: 2rem auto 0;
    padding: 0;
    align-items: start;
    box-sizing: border-box;
}
.waterford_div_page_contact_row > div {
    min-width: 0;
    width: 100%;
}
@media (max-width: 900px) {
    .waterford_div_page_contact_row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* --- Contact page template: hero two-column split --- */
.ct5-contact-hero {
    align-items: center;
}
.ct5-contact-hero__left {
    text-align: left;
}
.ct5-contact-hero__details {
    line-height: 1.7;
}
.ct5-contact-hero__company {
    font-weight: 600;
    margin: 0 0 .25rem;
}
.ct5-contact-hero__address,
.ct5-contact-hero__tel {
    margin: 0 0 .25rem;
}
.ct5-contact-hero__tel a {
    color: var(--accent);
    text-decoration: none;
}
.ct5-contact-hero__right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#waterford_div_page_contact_form_div {
    width: 100%;
}
#waterford_div_page_contact_form {
    width: 100% !important;
    max-width: none !important;
}

/* --- Map wrapper sizing --- */
#waterford_div_page_contact_map {
    width: 100% !important;
    margin: 0;
}
#waterford_div_page_contact_map .ksm-map {
    width: 100% !important;
    height: 100% !important;
    min-height: 450px;
}

/* --- Breadcrumb strip polish --- */
.background-secondary .breadcrumbs {
    padding: 0.75rem 1rem;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    color: var(--light);
}
.background-secondary .breadcrumbs li {
    list-style: none;
    /* Override .breadcrumbs li { display:inline } from earlier in this file so
       flex-wrap actually works at narrow viewports. */
    display: list-item;
}
/* Separator already provided by .breadcrumbs li:not(:last-child)::after at line 142
   from the original Custom-css.txt — adding another here would double-chevron. */

/* Centre the breadcrumb list inside its strip on every page/screen.
   !important is required to beat the line-95 `ul.breadcrumbs{padding-left:1rem}`
   and line-135 `.breadcrumbs li{display:inline}` rules from the original CSS.
   The .set-width wrappers (width:1400px !important) inside the strip don't
   self-centre at viewports >1400px — force margin auto here. */
.background-secondary > .set-width,
.background-secondary .breadcrumbs.set-width,
.background-secondary .set-width {
    margin-left: auto !important;
    margin-right: auto !important;
}
.background-secondary .waterford_div_breadcrumb {
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: block;
}
.background-secondary ul.breadcrumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.25rem !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100%;
}
.background-secondary ul.breadcrumbs li {
    display: list-item !important;
}
.background-secondary .breadcrumbs a {
    color: var(--light);
    text-decoration: none;
}
.background-secondary .breadcrumbs a:hover {
    text-decoration: none;
    opacity: 0.85;
}

/* --- Main content text block polish --- */
#waterford_div_main_content_wrapper {
    padding: 3rem 1rem;
    background-color: var(--dark);
    color: var(--light);
}
#waterford_div_page_content_text {
    max-width: 1100px;
    margin: 0 auto;
}
#waterford_div_page_content_text h1,
#waterford_div_page_content_text h2,
#waterford_div_page_content_text h3 {
    color: var(--accent);
}
#waterford_div_page_content_text a {
    color: var(--accent);
}

/* --- Gallery CPT — inline [gallery] grid + archive listing ---
   Lightbox CSS itself lives in assets/css/lightbox.css and is enqueued
   conditionally for is_singular('gallery') || is_post_type_archive('gallery'). */
.ct5-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}
.ct5-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ct5-gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.ct5-gallery-item a {
    display: block;
    line-height: 0;
}
.ct5-gallery-item img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}
/* Captions intentionally removed from CT5 gallery lightbox. */
.ksm-lightbox-caption { display: none !important; }

.ct5-gallery-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}
.ct5-gallery-archive-item {
    display: block;
    background-color: var(--primary);
    color: var(--light);
    text-decoration: none;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ct5-gallery-archive-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.ct5-gallery-archive-thumb img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}
.ct5-gallery-archive-title {
    margin: 0;
    padding: 1rem 1.25rem;
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--light);
}

/* --- Town-hub related list (section 10 of page.php) ---
   Compact chip row — replaces the legacy 4-up image card grid so the
   block reads as supporting navigation rather than a hero feature. */
.ct5-town-related {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}
.ct5-town-related__heading {
    font-size: clamp(1.4rem, 1.1rem + 0.4vw, 1.7rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--secondary);
    margin: 0 0 1rem;
    padding: 0 0 0.5rem;
    border-bottom: 2px solid var(--accent);
}
.ct5-town-related__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ct5-town-related__list li { list-style: none; margin: 0; }
.ct5-town-related__chip {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.4rem;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: capitalize;
    color: var(--light);
    background-color: var(--accent);
    border-radius: 6px;
    text-decoration: none;
    transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.ct5-town-related__chip:hover,
.ct5-town-related__chip:focus-visible {
    transform: translateY(-2px);
    background-color: var(--primary);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    color: var(--light);
    text-decoration: none;
}
.ct5-town-related__chip-arrow {
    font-size: 1.1em;
    line-height: 1;
    transition: transform 0.18s ease;
}
.ct5-town-related__chip:hover .ct5-town-related__chip-arrow,
.ct5-town-related__chip:focus-visible .ct5-town-related__chip-arrow {
    transform: translateX(3px);
}

/* Mobile: stack chips one per row, full width. */
@media (max-width: 600px) {
    .ct5-town-related__list {
        flex-direction: column;
        gap: 0.5rem;
    }
    .ct5-town-related__list li {
        width: 100%;
    }
    .ct5-town-related__chip {
        display: flex;
        width: 100%;
    }
}

/* --- Local Information badge (template-parts/local-badge.php) ---
   Inline horizontal strip on desktop — fields sit shoulder-to-shoulder
   in a single row, badge auto-sizes to its content. Wraps to fewer
   columns / stacks on mobile. */
.ct5-local-badge {
    width: fit-content;
    max-width: 100%;
    margin: 1.5rem auto;
    padding: 0.85rem 1.25rem;
    background-color: var(--light);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    font-size: 1.2rem;
}
.ct5-local-badge__heading {
    margin: 0 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--primary);
}
.ct5-local-badge__list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    line-height: 1.3;
}
.ct5-local-badge__row {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 0 0 auto;
}
.ct5-local-badge__row dt {
    margin: 0;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
    opacity: 0.7;
}
.ct5-local-badge__row dd {
    margin: 0;
    color: var(--dark);
    font-size: 1.1rem;
    white-space: nowrap;
}
.ct5-local-badge__row dd a {
    color: var(--accent);
    text-decoration: underline;
}
.ct5-local-badge__row dd a:hover,
.ct5-local-badge__row dd a:focus-visible {
    color: var(--primary);
}
.ct5-local-badge__wiki-icon {
    font-size: 0.85em;
    margin-left: 0.15em;
    opacity: 0.7;
}
.ct5-local-badge__mentions {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
}
.ct5-local-badge__mentions li {
    margin: 0;
    list-style: none;
}

/* Mobile: full-width, stacked rows, allow value wrapping. */
@media (max-width: 600px) {
    .ct5-local-badge {
        width: 100%;
    }
    .ct5-local-badge__list {
        flex-direction: column;
        gap: 0.4rem;
    }
    .ct5-local-badge__row dd {
        white-space: normal;
        word-break: break-word;
    }
}