/* Montserrat - self-hosted (removes the Adobe Typekit render-blocking chain).
   font-display: swap means text paints immediately in a fallback and swaps
   to Montserrat when it arrives, so the font never blocks first paint. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/montserrat-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/montserrat-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat-latin-700-normal.woff2') format('woff2');
}

/* 

CSS STRUCTURE:

1. VARIABLES
2. GENERAL TYPOGRAPHY

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

/*  General Styles
/*----------------------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}

body {
  --heading-font: 'Montserrat', sans-serif;
  --heading-font-weight: 600;
  --heading-color: #111111;
  --heading-line-height: 1.24;

  /* Gillingham palette - orange, stone, navy. Every pair computed, see brand notes.
     orange fill ALWAYS takes ink text (5.96:1); white on orange is 3.17:1 and fails.
     accent-deep is the only orange allowed as text on light (6.60:1).
     highlight-light (stone) is for dark surfaces only. */
  --accent-color: #E2703F;   /* orange - CTA fill, ink text on it      5.96:1 */
  --accent-hover: #CF6132;   /*                                        4.86:1 */
  --accent-deep:  #9C4117;   /* orange-deep - text on light            6.60:1 */
  --highlight: #1E4160;      /* navy-mid - links on white             10.60:1 */
  --highlight-hover: #0F2438;
  --highlight-light: #E2D8CA;/* stone - text on navy                  12.07:1 */
  --ink: #111111;
  --stone: #E2D8CA;
  --dark-surface: #0F2438;   /* navy - white on it                    15.79:1 */
  --wash: #F3EEE6;
  --linear-gradient: linear-gradient(90deg, #0F2438 0%, #1E4160 100%);

  /* bootstrap */
  --bs-body-font-family: 'Montserrat', sans-serif;
  --bs-body-font-size: 18px;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6875rem;
  --bs-body-color: #5C5C5C;
  --bs-body-color-rgb: 143, 143, 143;

  --bs-primary: #E2703F;
  --bs-secondary: #6c757d;
  --bs-black: #313131;
  --bs-light: #FFFFFF;
  --bs-dark: #212529;
  --bs-gray: #D9D9D9;
  --bs-gray-dark: #51565b;

  --bs-primary-rgb: 105, 45, 115;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-black-rgb: 17, 17, 17;
  --bs-light-rgb: 241, 241, 240;
  --bs-dark-rgb: 33, 37, 41;

  --bs-link-color: #111;
  --bs-link-color-rgb: 17, 17, 17;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #111;
  --bs-link-hover-color-rgb: 17, 17, 17;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
  line-height: var(--heading-line-height);
  letter-spacing: 0.065rem;
  text-transform: uppercase;
}

h1, .h1 {
  font-size: calc(1.875rem + 1.8vw);
  letter-spacing: 0.12rem;
  font-weight: 600;
}

@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 3rem;
  }
}

h2, .h2 {
  font-size: calc(1.425rem + 0.9vw);
  letter-spacing: 0.08rem;
  font-weight: 600;
}

@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 1.8rem;
  }
}

h6 {
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.1rem;
}

.heading-color {
  color: var(--accent-color);
}

a {
  text-decoration: none;
}

/* bootstrap button style  */

.btn {
  --bs-btn-padding-x: 1.88em;
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-font-family: var(--heading-font);
  --bs-btn-font-size: 1.1875rem;
  --bs-btn-font-weight: 700;
  border-radius: 0;
  text-transform: uppercase;
}

.btn-primary {
  --bs-btn-color: #111111;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #111111;
  --bs-btn-hover-bg: #CF6132;
  --bs-btn-hover-border-color: #CF6132;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #111111;
  --bs-btn-active-bg: #CF6132;
  --bs-btn-active-border-color: #fff;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: #fff;
}

.btn-primary {
  background-color: #E2703F;
  border-color: #fff;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
  background-size: 200% auto;
  transition: 0.7s all;
  -webkit-transition: 0.7s all;
}

.btn-primary:hover {
  background-position: right center;
  background-color: #fff;
  color: #000;
}

.btn-secondary {
  border-color: #fff;
  border-width: 1px;
  border-style: solid;
  background-color: #1E4160;
  background-size: 200% auto;
  transition: 0.7s all;
  -webkit-transition: 0.7s all;
  border-radius: 3px;
}

.btn-secondary:hover {
  background-position: right center;
  color: #0F2438;
  background-color: #fff;
}

/*---- navigation section style start ----*/

.navbar {
  font-family: var(--heading-font);
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0.5rem;
  --bs-navbar-color: var(--bs-black);
  --bs-navbar-hover-color: var(--accent-color);
  --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
  --bs-navbar-active-color: var(--accent-color);
  --bs-navbar-brand-padding-y: 0.3125rem;
  --bs-navbar-brand-margin-end: 1rem;
  --bs-navbar-brand-font-size: 1.25rem;
  --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
}

.nav-link {
  font-size: 1rem;
  font-weight: 700;
}

/* Navy nav bar - stone text, orange hover, on-dark logo.
   Contrast (computed, WCAG 2.1): stone #E2D8CA on navy #0F2438 = 11.21:1
   orange #E2703F on navy = 4.98:1 | stone on navy-mid #1E4160 = 7.53:1
   ink #111111 on orange = 5.96:1 */
.navbar.navbar-navy {
  background-color: #0F2438 !important;
  border-bottom: 1px solid rgba(226,216,202,0.14);
  --bs-navbar-color: #E2D8CA;
  --bs-navbar-hover-color: #E2703F;
  --bs-navbar-active-color: #E2703F;
  --bs-navbar-brand-color: #E2D8CA;
  --bs-navbar-brand-hover-color: #E2D8CA;
}
.navbar.navbar-navy .nav-link {
  color: #E2D8CA;
}
.navbar.navbar-navy .nav-link:hover,
.navbar.navbar-navy .nav-link.active {
  color: #E2703F;
}
.navbar.navbar-navy .navbar-toggler {
  border-color: rgba(226,216,202,0.35);
}
.navbar.navbar-navy .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(226,112,63,0.45);
}
.navbar.navbar-navy .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(226, 216, 202, 0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown panels - navy-mid, held off the bar by a hairline border and shadow */
.navbar-navy .dropdown-menu {
  background-color: #1E4160;
  border: 1px solid rgba(226,216,202,0.22) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  padding: 0.25rem 0;
}
.navbar-navy .dropdown-item {
  color: #E2D8CA;
}
.navbar-navy .dropdown-item:hover,
.navbar-navy .dropdown-item:focus,
.navbar-navy .dropdown-item.active,
.navbar-navy .dropdown-item:active {
  background-color: #E2703F;
  color: #111111;
}

/* Mobile slide-in menu - navy to match the bar */
.navbar-navy .offcanvas {
  background-color: #0F2438;
  color: #E2D8CA;
}
.navbar-navy .offcanvas .offcanvas-header {
  border-bottom: 1px solid rgba(226,216,202,0.14);
}
.navbar-navy .offcanvas .offcanvas-title {
  color: #E2D8CA;
}
.navbar-navy .offcanvas .nav-link {
  color: #E2D8CA;
}
.navbar-navy .offcanvas .nav-link:hover,
.navbar-navy .offcanvas .nav-link.active {
  color: #E2703F;
}
.navbar-navy .offcanvas .btn-close {
  filter: invert(1) grayscale(100%) brightness(190%);
}
.navbar-navy .offcanvas .dropdown-menu {
  background-color: #1E4160;
  border: 1px solid rgba(226,216,202,0.18) !important;
  box-shadow: none;
}
.navbar-navy .offcanvas .dropdown-item {
  color: #E2D8CA;
}
.navbar-navy .offcanvas .dropdown-item:hover,
.navbar-navy .offcanvas .dropdown-item.active {
  background-color: #E2703F;
  color: #111111;
}

/* The black call strap only shows below 575px; this keeps it from
   merging into the navy bar underneath it. */
@media only screen and (max-width: 574.98px) {
  .navbar.navbar-navy {
    border-top: 2px solid #E2703F;
  }
}

nav.navbar {
  z-index: 999999;
}

/* dropdown style  */

.dropdown-menu {
  --bs-dropdown-border-radius: 0px;
  --bs-dropdown-border-width: 0px;
  text-align: left !important;
}

.dropdown-menu .dropdown-item {
  text-align: left !important;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--bs-gray);
  color: var(--bs-black);
}

.dropdown-item {
  font-weight: 600;
  color: var(--bs-black);
}

.phone-no {
  font-size: 1.5rem;
}
.navbar-navy .phone-no,
.navbar-navy a.phone-no {
  color: #E2D8CA !important;
}
.navbar-navy a.phone-no:hover {
  color: #E2703F !important;
}
.navbar-navy .phone-no svg path {
  fill: #E2D8CA !important;
}

@media only screen and (max-width: 1200px) {
  a.phone-no {
    display: none;
  }
}

@media only screen and (max-width: 1800px) {
  .pattern-overlay {
    display: none;
  }
}

.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: var(--accent-color) !important;
}

/*---- hero section style start ----*/

.pattern-overlay.pattern-right {
  top: 30%;
  right: 0px;
}

form.hero-form {
  background: rgba(255, 255, 255, 0.90);
}

.form-label {
  font-size: 1.1rem;
  color: var(--bs-black);
  text-transform: uppercase;
  font-weight: 400;
}

.form-control {
  border-radius: 0;
}

.form-control:disabled {
  background-color: #fff;
}

/*---- partner section style start ----*/

img.logo-image {
  filter: saturate(0);
  opacity: 50%;
  transition: ease-in 0.2s;
}

img.logo-image:hover {
  filter: saturate(100%);
  opacity: 1;
}

/*---- testimonial section style start ----*/

section#testimonial {
  background: linear-gradient(90deg, #0F2438 0%, #1E4160 100%);
}

.testimonial-pattern-overlay.pattern-right {
  top: 35%;
  right: 0px;
}

.testimonial-pattern-overlay.pattern-left {
  top: 20%;
  left: 0px;
}

.testimonial-content {
  background: #ffffff;
}

iconify-icon.rate {
  color: #FFD700;
}

/* swiper override
--------------------------------------------------------------*/

.swiper-pagination-bullet {
  background: var(--swiper-pagination-bullet-inactive-color, var(--bs-light));
}

/*---- services section style start ----*/

.services-heading {
  transition: all 0.5s ease-in;
}

.service-btn {
  transition: all 0.5s ease-in;
}

/*---- projects section style start ----*/

section#projects {
  background: var(--accent-color);
}

button.filter-button {
  font-family: var(--heading-font);
  border: 1px solid #FFF;
  background: transparent;
  color: var(--bs-light);
  text-transform: uppercase;
  font-size: 1rem;
  transition: all 0.3s ease-in;
}

button.filter-button.active {
  color: var(--bs-dark);
  background: var(--bs-light);
}

button.filter-button:hover {
  color: var(--bs-dark);
  background: var(--bs-light);
}

.item .description {
  width: 90%;
  height: 90%;
  position: absolute;
  bottom: 20px;
  left: 15px;
  z-index: 5;
  opacity: 0;
  background: rgba(255, 255, 255, 0.90);
  transition: all 0.5s ease-in;
}

.item:hover .description {
  opacity: 1;
}

@media only screen and (min-width:770px) and (max-width: 1400px) {
  .item .description {
    text-align: start;
  }

  .project-date,
  .project-heading {
    display: none;
  }
}

@media only screen and (min-width:770px) and (max-width: 1200px) {
  .item .description {
    left: -5px;
    background: none;
  }
}

/*---- process section style start ----*/

.process-components {
  border-bottom: 2px dotted var(--accent-color);
  transition: ease-in 0.3s;
}

img.arrow {
  opacity: 0;
}

iconify-icon.process-icon {
  color: var(--accent-color);
  font-size: 110px;
}

/*---- faq section style start ----*/

/* accordion style override  */

.accordion {
  --bs-accordion-border-color: var(--accent-color);
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-btn-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="30" height="30"><path fill="%23C58838" d="M98 190.06l139.78 163.12a24 24 0 0036.44 0L414 190.06c13.34-15.57 2.28-39.62-18.22-39.62H116.18c-20.5 0-31.56 24.05-18.18 39.62z"/></svg>');
  --bs-accordion-btn-active-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="30" height="30"><path fill="%23C58838" d="M98 190.06l139.78 163.12a24 24 0 0036.44 0L414 190.06c13.34-15.57 2.28-39.62-18.22-39.62H116.18c-20.5 0-31.56 24.05-18.18 39.62z"/></svg>');
  --bs-accordion-border-radius: 0px;
}

.accordion-header {
  margin-bottom: 0;
  border-top: 1px solid var(--accent-color);
}

.accordion-button {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
  line-height: var(--heading-line-height);
  letter-spacing: 0.065rem;
  text-transform: uppercase;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: var(--heading-color);
  background-color: var(--bs-light);
  box-shadow: none;
}

/*---- cta section style start ----*/

section#cta {
  background: var(--linear-gradient);
}
section#cta h2,
section#cta p {
  color: #ffffff;
}

.cta-button {
  background: var(--bs-light);
  color: var(--bs-black);
}

.cta-button:hover,
.cta-button:active,
.cta-button:focus {
  background: var(--bs-light);
  color: var(--bs-black);
}

@media only screen and (max-width: 770px) {
  .cta-pattern-overlay {
    display: none;
  }
}

/*---- footer section style start ----*/

iconify-icon.contact-icon {
  font-size: 50px;
}

iconify-icon.contact-icon-top {
  font-size: 24px;
}

iconify-icon.social-link-icon {
  color: rgba(0, 113, 188, 0.60);
  font-size: 24px;
}

iconify-icon.social-link-icon.active,
iconify-icon.social-link-icon:hover {
  color: #E2703F;
}

/*--------------------------------------------------------------
About page style
--------------------------------------------------------------*/

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--bs-light);
}

/*--------------------------------------------------------------
Blog page style
--------------------------------------------------------------*/

.active > .page-link,
.page-link.active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.form-control:focus {
  border-color: var(--bs-black);
  box-shadow: none;
}

/*--------------------------------------------------------------
Price page style
--------------------------------------------------------------*/

.plan-post {
  border: 1px solid var(--accent-color);
}

span.price-tick {
  color: var(--accent-color);
}

.price-option {
  height: 320px;
}

.recommend-price {
  background: #E2703F;
}

/*--------------------------------------------------------------
Project page style
--------------------------------------------------------------*/

button.filter-button.gallery-btn {
  letter-spacing: 0.075rem;
  border: 1px solid var(--bs-border-color);
  background: transparent;
  color: var(--bs-black);
  text-transform: uppercase;
  font-size: 1rem;
  transition: all 0.3s ease-in;
}

button.filter-button.gallery-btn.active {
  color: var(--bs-light);
  background: var(--accent-color);
}

button.filter-button.gallery-btn:hover {
  color: var(--bs-light);
  background: var(--accent-color);
}

/*--------------------------------------------------------------
reviews section style start
--------------------------------------------------------------*/

.reviews-components {
  border: 2px solid #FAFAFA;
  box-shadow: 0px 12px 90px rgba(12, 12, 12, 0.06);
  border-radius: 9px;
}

iconify-icon.quote {
  font-size: 60px;
  color: var(--accent-color);
}

.rate {
  color: var(--accent-color);
}

.bgimage {
  width: 100%;
  background: url('images/banner-img-mobile.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: scroll;
}

.bgimage::before {
  content: "";
  position: absolute;
  inset: 0;
  /* top-weighted so white text stays legible against a blown-out sky,
     easing off lower down so the roof detail is not lost.
     Lightened 15 Sep 2026. Measured off the rendered hero, not estimated:
     h1 8.37:1, subhead 7.73:1, CTA headings 7.71:1, tagline 6.13:1,
     body copy 5.89:1 - all clear of AA (4.5 normal / 3.0 large). */
  background: linear-gradient(
    180deg,
    rgba(12,24,30,0.64) 0%,
    rgba(12,24,30,0.58) 30%,
    rgba(12,24,30,0.45) 62%,
    rgba(12,24,30,0.37) 100%
  );
  z-index: 1;
}

#hero .container {
  position: relative;
  z-index: 2;
}

section#projects {
  background: linear-gradient(90deg, #0F2438 0%, #1E4160 100%);
}

.copyright {
  font-size: 0.8rem;
}

.footer-copyright {
  border-top: 1px solid #fff;
}

.projects-icon-text {
  font-size: 2rem;
  font-weight: 700;
}

.projects-h4-text {
  font-weight: 400;
  text-transform: lowercase;
}

.aqua-color {
  color: #1E4160;
}

.aqua-color:hover {
  color: #1E4160;
}

.aqua-color-background {
  background: rgba(0, 174, 239, 0.80);
}

.background-color-darker {
  background: rgba(0, 174, 239, 0.80);
}

/* Bootstrap carousel */

.carousel {
  position: relative;
}

.carousel.pointer-event {
  touch-action: pan-y;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  transform: translateX(-100%);
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  z-index: 1;
  opacity: 1;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  z-index: 0;
  opacity: 0;
  transition: opacity 0s 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-start,
  .carousel-fade .active.carousel-item-end {
    transition: none;
  }
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  padding: 0;
  color: #fff;
  text-align: center;
  background: none;
  border: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}

.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-right: 15%;
  margin-bottom: 1rem;
  margin-left: 15%;
  list-style: none;
}

.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-indicators [data-bs-target] {
    transition: none;
  }
}

.carousel-indicators .active {
  opacity: 1;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 1.25rem;
  left: 15%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: center;
}

.carousel-dark .carousel-control-prev-icon,
.carousel-dark .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
}

.carousel-dark .carousel-indicators [data-bs-target] {
  background-color: #000;
}

.carousel-dark .carousel-caption {
  color: #000;
}

.reviewer {
  display: flex !important;
  flex-wrap: nowrap !important;
}

.review-avitar {
  width: 44px;
  height: 44px;
  padding-top: 5px;
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
  font-size: 24px;
  color: #fff;
  margin-right: 15px;
  margin-bottom: 15px;
}

.background-1 { background-color: #5c6bc0; }
.background-2 { background-color: #ab47bc; }
.background-3 { background-color: #01579b; }
.background-4 { background-color: #455a64; }
.background-5 { background-color: #689f38; }
.background-6 { background-color: #8d6e63; }
.background-7 { background-color: #33691e; }
.background-8 { background-color: #78909c; }
.background-9 { background-color: #1E4160; }
.background-10 { background-color: #0097a7; }
.background-11 { background-color: #512da8; }
.background-12 { background-color: #0288d1; }
.background-trustatrader { background-color: #308bb4; }

.review-name p {
  font-size: 1.2rem;
  font-style: italic;
}

.review-date {
  margin-left: 0.5rem;
}

.gold {
  color: rgb(252, 191, 2) !important;
}

.grey {
  color: #DDDDDD !important;
}

.star-percent {
  clip-path: inset(0px 50% 0px 0px);
}

.review-rating {
  font-size: 1.3rem;
}

.review-rating img {
  padding-right: 10px;
  width: 100px;
}

.review-posted {
  font-size: 0.7rem;
  margin-bottom: 0rem;
}

.review-on p {
  margin-right: 5rem;
}

.review-on a {
  color: rgb(25, 123, 255);
}

.alert-success {
  --bs-alert-color: #000;
  --bs-alert-bg: #fff;
  --bs-alert-border-color: #fff;
}

.bg-window::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
}

.bg-window * {
  position: relative;
  z-index: 2;
}

.bg-gutter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
}

.bg-gutter * {
  position: relative;
  z-index: 2;
}

.bg-conservatory::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
}

.bg-conservatory * {
  position: relative;
  z-index: 2;
}

.bg-soffits::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
}

.bg-soffits * {
  position: relative;
  z-index: 2;
}

.call-now a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
}

.call-now {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

@media only screen and (min-width: 575px) {
  .call-now {
    display: none;
  }
}

.bg-pink {
  background-color: #E2703F;
}

.bg-black {
  background-color: #000;
}

.responsive-logo {
  /* logo is 2111x575 (3.671:1) - heights set so rendered WIDTH stays ~190-250px */
  height: clamp(52px, 5.2vw, 68px);
  width: auto;
  transition: 0.3s ease;
}

@media (max-width: 400px) {
  .responsive-logo {
    height: min(58px, 14vw);
  }
}

.background-overlay {
  opacity: 0.85;
  background-color: #0F2438;
}

.hero-button-headline {
  font-weight: 700;
  font-size: 1.4rem;
}

.hero-button-text {
  padding-bottom: 10px;
  font-weight: 400;
}

.hero-p p {
  margin-bottom: 0 !important;
}

#hero .col-md-12 {
  text-align: center;
}

.hero-p {
  justify-content: center;
  text-align: center;
}

.hero-p .col-md-6 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-white-70 {
  color: #DADADA;
}

.text-white-30 {
  color: #9a9a9a;
}

.min-vh-70 {
  min-height: 70svh;
}

#hero {
  display: flex;
  align-items: center;
}

#hero .container {
  display: flex;
  align-items: center;
  height: 100%;
}

#hero .container,
#hero .row {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width:768px) {
  #hero {
    align-items: flex-start;
    padding-top: 30px;
  }
}

/* ---- Hero entrance -------------------------------------------------
   These elements ARE the LCP element. Anything that starts at opacity 0
   is not counted as painted, so a 1s fade plus a delay was being added
   straight onto LCP: PSI measured 1,970 ms of "element render delay"
   against 180 ms of actual resource load.
   They now paint immediately at full opacity and only the transform is
   animated, which keeps the movement without gating the paint. ---- */
.hero-tagline {
  opacity: 1;
  transform: translateY(-20px);
  animation: heroSlideDown 0.55s ease-out forwards;
}

@keyframes heroSlideDown {
  from { transform: translateY(-20px); }
  to   { transform: translateY(0); }
}

.hero-title {
  opacity: 1;
  transform: translateY(25px);
  animation: heroSlideUp 0.55s ease-out forwards;
}

.hero-slogan {
  font-family: var(--heading-font, 'Montserrat', sans-serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  line-height: 1.15;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  opacity: 1;
  transform: translateY(20px);
  animation: heroSlideUp 0.55s ease-out forwards;
  animation-delay: 0.05s;
}

@keyframes heroSlideUp {
  from { transform: translateY(25px); }
  to   { transform: translateY(0); }
}

.hero-desc {
  opacity: 1;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-cta {
  opacity: 1;
  transform: scale(0.94);
  animation: heroPopIn 0.5s ease-out forwards;
  animation-delay: 0.1s;
}

@keyframes heroPopIn {
  from { transform: scale(0.94); }
  to   { transform: scale(1); }
}

@keyframes zoomFadeIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hero-cta-urgent {
  animation: pulseUrgent 0.8s ease-in-out 1.75s 1;
}

@keyframes pulseUrgent {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

.cta-shake {
  display: inline-flex;
  align-items: center;
  animation: shakeX 5s infinite;
}

@keyframes shakeX {
  0%, 90%, 100% { transform: translateX(0); }
  92% { transform: translateX(-4px); }
  94% { transform: translateX(4px); }
  96% { transform: translateX(-3px); }
  98% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
}

/* ===== MOBILE TRUST TICKER ===== */

.trust-ticker {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 28px;
}

.trust-ticker__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  white-space: nowrap;
  transform: translateX(120vw);
}

.trust-ticker__item:nth-child(1) {
  animation: trustTicker 10.5s linear infinite;
  animation-delay: -0.5s;
}

.trust-ticker__item:nth-child(2) {
  animation: trustTicker 10.5s linear infinite;
  animation-delay: 3.0s;
}

.trust-ticker__item:nth-child(3) {
  animation: trustTicker 10.5s linear infinite;
  animation-delay: 6.5s;
}

@keyframes trustTicker {
  0%   { transform: translateX(120vw); }
  5%   { transform: translateX(0); }
  33%  { transform: translateX(0); }
  38%  { transform: translateX(-120vw); }
  100% { transform: translateX(-120vw); }
}

@media (prefers-reduced-motion: reduce) {
  .trust-ticker__item {
    position: relative;
    transform: none !important;
    animation: none !important;
  }
}

.trust-strip {
  background-color: #1E4160;
  font-size: calc(0.975rem + 0.90vw);
  font-weight: 700;
}

@media (min-width: 500px) {
  .trust-strip {
    font-size: calc(1.375rem + 1.3vw);
    letter-spacing: 0.29rem;
    font-weight: 700;
  }
}

@media (min-width: 768px) {
  .trust-strip {
    font-size: 1rem;
    letter-spacing: 0.29rem;
    font-weight: 600;
  }
}

@media (min-width: 992px) {
  .trust-strip {
    font-size: 1.2rem;
    letter-spacing: 0.29rem;
    font-weight: 400;
  }
}

@media (min-width: 768px) {
  .strap-icons {
    font-size: 1.9rem;
  }
}

@media (min-width: 992px) {
  .strap-icons {
    font-size: 1rem;
  }
}

/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.75);
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: white;
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  pointer-events: none;
}

.flickity-button-icon {
  fill: currentColor;
}

.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }

.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots {
  direction: rtl;
}

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

.carousel-cell {
  width: 48%;
  margin-right: 20px;
  border-radius: 3px;
  counter-increment: carousel-cell;
}

@media (max-width: 767px) {
  .carousel-cell {
    width: 94%;
  }
}

@media (min-width: 1200px) {
  .carousel-cell {
    width: 32%;
  }
}

.review-stars {
  display: inline-flex;
  gap: 2px;
}

.review-stars iconify-icon {
  color: #FFD700;
  font-size: 25px;
}

.reviews-border {
  border: 1px #E2703F solid;
}

.services-icon iconify-icon {
  color: #9C4117;
  font-size: 80px;
}

/* contact form */

.contact-form {
  overflow: hidden;
  background: #ffffff;
  padding: 30px 30px 10px 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  position: relative;
  z-index: 5;
}

label {
  color: #666666;
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
  max-width: 100%;
  text-transform: capitalize;
  font-size: 14px;
}

.contact-form textarea {
  border: 1px solid #bbb;
  border-radius: 4px;
  height: 168px;
  margin-bottom: 20px;
  padding: 6px 15px;
  resize: none;
  width: 100%;
}

.contact-form input {
  height: 36px;
  padding: 0 8px;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  width: 100%;
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  margin-top: 15px;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  margin-top: 5px;
}

.contact-form .row {
  display: flex;
  align-items: stretch;
}

.contact-form-title {
  font-size: 1.2rem;
}

.contact-form .col-md-6 {
  display: flex;
  flex-direction: column;
}

.contact-area {
  margin-bottom: -100px;
  position: relative;
  z-index: 10;
}

.contact-area-top {
  margin-top: -100px;
  position: relative;
  z-index: 10;
}

/* purchase-area */

.purchase-area {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.purchase-content {
  position: relative;
  z-index: 99;
}





.purchase-content > p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin: auto auto 15px;
  width: 75%;
}

.bg-opacity {
  position: relative;
}

.bg-opacity:before {
  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  left: 0;
  top: 0;
  opacity: 0.5;
  background: #000;
  z-index: 0;
  pointer-events: none;
}

.bg-opacity > * {
  position: relative;
  z-index: 1;
}

.bg-opacitydark {
  position: relative;
}

.bg-opacitydark:before {
  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  left: 0;
  top: 0;
  opacity: 0.85;
  background: #000;
  z-index: 0;
  pointer-events: none;
}

.bg-opacitydark > * {
  position: relative;
  z-index: 1;
}

.pt-80 { padding-top: 100px; }
.pb-20 { padding-bottom: 20px; }
.pb-80 { padding-bottom: 80px; }
.pt-20 { padding-top: 20px; }
.pt-50 { padding-top: 50px; }

@media (max-width: 991.98px) {
  .about-image img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

.reveal-zoom {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.reveal-zoom.in-view {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-zoom,
  .reveal-zoom.in-view {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
#footer {
  background-color: #0F2438;
}

/* Hidden on desktop */
.wa-float {
  display: none;
}

/* Mobile only */
@media (max-width: 767.98px) {
  .wa-float {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2147483647;
    width: 56px;
    height: 56px;
    text-decoration: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .wa-float.wa-show {
    opacity: 1;
    transform: translateY(0);
  }

  .wa-float.shake {
    animation: wa-shake 1.2s ease-in-out;
  }

  @keyframes wa-shake {
    0% { transform: translateY(0) rotate(0); }
    15% { transform: translateY(0) rotate(-12deg); }
    30% { transform: translateY(0) rotate(10deg); }
    45% { transform: translateY(0) rotate(-8deg); }
    60% { transform: translateY(0) rotate(6deg); }
    75% { transform: translateY(0) rotate(-4deg); }
    100% { transform: translateY(0) rotate(0); }
  }
}

.flickity-prev-next-button {
  display: none;
}

.reviewinsert {
  background-color: #f5f5f7;
}

.map-col {
  display: flex;
}

.map-image-wrap {
  width: 100%;
  height: 100%;
  display: flex;
}

.coverage-map-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* services cards */

#services .service-card-link {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

#services .services-components {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  border-radius: 0;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  opacity: 1;
  transform: none;
}

#services .service-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.38);
  transition: 0.35s;
  z-index: 1;
}

#services .service-content {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 92%;
  margin: 0 auto;
}

#services .services-components:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 55px rgba(0,0,0,0.18);
}

#services .services-components:hover .service-overlay {
  background: rgba(0,0,0,0.30);
}

#services .services-icon {
  font-size: 2.4rem;
  line-height: 1;
}

#services .services-icon iconify-icon {
  color: #ffffff;
}

#services .services-heading {
  color: #fff;
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.2px;
}

#services .services-components p {
  color: rgba(255,255,255,0.92);
  font-size: 1rem;
  line-height: 1.7;
}

#services .service-link-text {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
}

#services .service-bg-1 {
  background-image: url("images/roof-repairs-medway.webp");
}

#services .service-bg-2 {
  background-image: url("images/new-roofs-medway.webp");
}

#services .service-bg-3 {
  background-image: url("images/flat-roofing-medway.webp");
}

#services .service-bg-4 {
  background-image: url("images/guttering-fascias-soffits-medway.webp");
}

#services .service-bg-5 {
  background-image: url("images/chimney-repairs-medway.webp");
}

#services .service-bg-6 {
  background-image: url("images/leadwork-medway.webp");
}

@media (max-width: 991.98px) {
  #services .services-components {
    min-height: 380px;
  }

  #services .services-heading {
    font-size: 1.4rem;
  }
}

@media (max-width: 767.98px) {
  #services .services-components {
    min-height: 340px;
    border-radius: 0;
  }

  #services .service-content {
    max-width: 100%;
  }

  #services .services-heading {
    font-size: 1.3rem;
  }

  #services .services-components p {
    line-height: 1.6;
  }
}

#services .service-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: #E2703F;
  z-index: 3;
  transition: 0.25s;
}

#services .services-components:hover .service-accent {
  height: 8px;
}

/* why us */

.why-icon {
  font-size: 32px;
  color: #9C4117;
  line-height: 1;
  margin-top: 4px;
}

.why-point h5 {
  font-weight: 700;
  letter-spacing: 0.2px;
}

.why-point p {
  color: #555;
  line-height: 1.7;
}

/* Inside the charcoal why-us section, descriptions must be light (overrides #555 above) */
.why-charcoal .why-point p {
  color: #f2f2f2;
}

/* footer */

.footer-main {
  background: #0F2438;
  position: relative;
}

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

.footer-logo {
  max-width: 280px;
  width: 100%;
  height: auto;
}

.footer-title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.2rem;
  color: #fff;
  position: relative;
  padding-bottom: 12px;
}

.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  background: #fff;
}

.footer-intro {
  color: rgba(255,255,255,0.74);
  line-height: 1.8;
  font-size: 0.98rem;
}

.footer-links li {
  margin-bottom: 0.85rem;
}

.footer-links a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  transition: all 0.25s ease;
}

.footer-links a:hover {
  color: #fff;
}

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.25s ease;
}

.footer-contact-item:hover {
  opacity: 0.85;
}

.footer-contact-item iconify-icon {
  font-size: 1.2rem;
  color: #fff;
  flex-shrink: 0;
}

.footer-small {
  color: rgba(255,255,255,0.74);
  line-height: 1.7;
}

.footer-btn {
  min-width: 190px;
}

.footer-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-trust-item {
  color: rgba(255,255,255,0.82);
  font-size: 0.92rem;
  padding-left: 16px;
  position: relative;
}

.footer-trust-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E2703F;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
}

.footer-copy {
  color: rgba(255,255,255,0.62);
  font-size: 0.92rem;
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}

.footer-bottom-links a {
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.25s ease;
}

.footer-bottom-links a:hover {
  color: #fff;
}

@media (min-width: 768px) {
  .footer-bottom-links {
    justify-content: flex-end;
  }
}

@media (max-width: 991.98px) {
  .footer-logo {
    max-width: 240px;
  }
}

@media (max-width: 767.98px) {
  .footer-main {
    text-align: left;
  }

  .footer-btn {
    width: 100%;
  }

  .footer-bottom-links {
    gap: 12px;
  }
}
#materials {;
}

.materials-logos {
  row-gap: 2rem;
}

.material-logo {
  max-height: 58px;
  width: auto;
  opacity: 0.9;
  filter: grayscale(100%);
  transition: 0.3s ease;
}


@media (max-width: 767.98px) {
  .material-logo {
    max-height: 60px;
  }
}

/* ===== Service page section variants (iteration on chimney page) ===== */

/* Hero CTA button spacing so it never overlaps the trust strip */
.hero-cta-btn {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Why-us section on charcoal */
.why-charcoal {
  background-color: #0F2438;
}
.why-charcoal .aqua-color {
  color: #E2703F !important;
}
.why-charcoal .text-uppercase.aqua-color {
  color: #E2703F !important;
}
.why-charcoal .why-icon iconify-icon {
  color: #fff;
  font-size: 1.6rem;
}

/* Form card sitting in the charcoal why-us section */
.why-form-card {
  background: #fff;
  padding: 2rem;
  color: #313131;
}
.why-form-card--shadow {
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.why-form-card h3 { color: #313131; }
.why-form-card a { color: #1E4160; }
.why-form-card .form-label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Other-services cross-link section on purple with white cards */
.other-services-purple {
  background-color: #1E4160;
}
.other-services-purple .other-service-card {
  background: #fff;
  border: none !important;
  border-radius: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.other-services-purple .other-service-card iconify-icon {
  color: #E2703F;
  font-size: 4rem;
}
.other-services-purple .other-service-card h3 {
  color: #313131;
}
.other-services-purple .service-card-link:hover .other-service-card {
  transform: translateY(-5px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

/* Bright description text for the charcoal why-us section */
.text-white-bright {
  color: #f2f2f2;
}


/* Locations page - text-led town panels */
.location-panel {
  display: flex;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  overflow: hidden;
}
.location-panel-accent {
  flex: 0 0 6px;
  background: #E2703F;
}
.location-panel-body {
  padding: 2rem 2.25rem;
}
.location-panel-body h2 {
  color: #0F2438;
}
@media (max-width: 575px) {
  .location-panel-body { padding: 1.5rem 1.25rem; }
}

/* Area page styles */
.bg-light-grey {
  background-color: #f5f5f5;
}
.area-service {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.area-service:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.service-hero-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Hero focal point shifted up for interior pages (not homepage) */
.bgimage.hero-focus-top {
  background-position: center 25%;
}

/* Visible breadcrumbs */
.breadcrumb-nav {
  background-color: transparent;
  padding: 0.65rem 0;
  font-size: 0.9rem;
  border-bottom: 1px solid #e6e6e6;
}
.breadcrumb-nav .breadcrumb {
  margin-bottom: 0;
}
.breadcrumb-nav a {
  color: #1E4160;
  text-decoration: none;
}
.breadcrumb-nav a:hover {
  text-decoration: underline;
}
.breadcrumb-nav .breadcrumb-item.active {
  color: #6c757d;
}

/* Footer operator credit */
.footer-operator {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.62);
  margin-top: 0.4rem !important;
  line-height: 1.5;
}
.footer-operator a {
  color: rgba(255,255,255,0.62);
  text-decoration: underline;
}
.footer-operator a:hover {
  color: #ffffff;
}

/* Enquiry form disclosure */
.form-disclosure {
  font-size: 0.78rem;
  line-height: 1.5;
  color: #6b6b6b;
}
.form-disclosure a {
  color: #6b6b6b;
  text-decoration: underline;
}
.form-disclosure a:hover {
  color: #1E4160;
}


/* ---- Brand: gold never carries white text (2.28:1). Ink on gold = 8.27:1 ---- */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.recommend-price,
.recommend-price *,
.bg-pink,
.bg-pink *,
.location-panel-accent { color: #111111; }

.btn-primary { background-color: #E2703F; border-color: #E2703F; }
.btn-primary:hover,
.btn-primary:focus { background-color: #CF6132; border-color: #CF6132; }
.btn-primary:focus-visible { outline: 3px solid #9C4117; outline-offset: 2px; }

/* highlight colour for links in body copy */
a.highlight, .highlight-link { color: #1E4160; }
a.highlight:hover, .highlight-link:hover { color: #0F2438; }


/* ---- Nav: stop items and the phone number wrapping ---- */
.navbar .navbar-nav .nav-link { white-space: nowrap; }
.navbar .phone-no { white-space: nowrap; }

@media (max-width: 1199.98px) {
  /* burger layout: logo gets the room, toggler stays on the same row */
  .navbar .container { flex-wrap: nowrap; }
  .navbar-brand { flex: 1 1 auto; min-width: 0; margin-right: .5rem; }
  .navbar-toggler { flex: 0 0 auto; }
  .responsive-logo { height: min(62px, 14.5vw); max-width: 100%; }
}

@media (max-width: 575.98px) {
  .responsive-logo { height: min(58px, 15vw); }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* tightest desktop band - trim padding before anything wraps */
  .navbar .navbar-nav .nav-link { padding-left: .6rem !important; padding-right: .6rem !important; font-size: .92rem; }
  .navbar .phone-no { font-size: 1.15rem; }
  .responsive-logo { height: 58px; }
}


/* ---- Brand: petrol surfaces replace the dark greys ---- */
/* footer #0F2438  - white 11.29:1, gold 4.94:1 (gold is safe as body text here) */
/* bars   #1E4160  - white 9.08:1 */
.footer-main,
.why-charcoal { background-color: #0F2438; }
.trust-strip,
.other-services-purple { background-color: #1E4160; }

.footer-main .footer-title,
.why-charcoal .why-point h3 { color: #E2703F; }

.footer-main a { color: #FFFFFF; }
.footer-main a:hover,
.footer-main a:focus { color: #E2703F; }

.footer-trust-item::before { background: #E2703F; }

/* thin gold rule separating the bars from the content above */
.trust-strip { border-top: 3px solid #E2703F; }
.footer-main { border-top: 3px solid #E2703F; }


/* ==========================================================================
   FOOTER - wide logo band
   ground #0F2438 : white 11.29:1, gold #E2703F 4.94:1
   ========================================================================== */

.footer-wide { padding-block: 0; }

/* --- band 1: logo, strapline, phone, CTA --- */
.footer-band {
  padding-block: 56px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.footer-logo-lg {
  height: clamp(54px, 6.4vw, 92px);
  width: auto;
  display: block;
}

.footer-strap {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: #E4EDF1;
}

.footer-phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #E2703F;
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 44px);
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.footer-phone:hover,
.footer-phone:focus { color: #E2BC88; }
.footer-phone iconify-icon { font-size: 0.72em; }

/* --- band 2: two deliberate rows, no orphan wrapping --- */
.footer-linkrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-block: 22px;
  border-top: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.footer-linkrow-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 780px;
  row-gap: 6px;
}
.footer-linkrow-inner a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 14px;
  padding: 3px 14px;
  position: relative;
  white-space: nowrap;
}
.footer-linkrow-inner a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 13px;
  background: rgba(255,255,255,.28);
}
.footer-linkrow-inner a:hover,
.footer-linkrow-inner a:focus { color: #E2703F; }

/* site row sits quieter than the services row */
.footer-linkrow-site a { font-size: 13px; color: #C3D2D9; }
.footer-linkrow-site a:hover,
.footer-linkrow-site a:focus { color: #E2703F; }

/* --- band 3: bottom bar --- */
.footer-bottom {
  padding-block: 20px 26px;
  border-top: 0;
}
.footer-copy {
  font-size: 12.5px;
  color: #C3D2D9;
  line-height: 1.6;
}
.footer-operator a { color: #C3D2D9; text-decoration: underline; }
.footer-operator a:hover,
.footer-operator a:focus { color: #E2703F; }

@media (max-width: 767.98px) {
  .footer-band { padding-block: 40px 32px; gap: 18px; }
  .footer-linkrow { padding-block: 16px; gap: 8px; }
  .footer-linkrow-inner a { padding: 3px 10px; font-size: 13px; }
  .footer-linkrow-site a { font-size: 12.5px; }
  .footer-linkrow-inner a + a::before { height: 11px; }
}

@media (max-width: 420px) {
  /* separators get messy once links wrap heavily */
  .footer-linkrow-inner a + a::before { display: none; }
  .footer-linkrow-inner { row-gap: 2px; }
}


/* hero text: a soft shadow as a second line of defence over bright patches */
#hero .hero-title,
#hero .hero-slogan,
#hero .hero-tagline,
#hero .hero-desc,
#hero .hero-button-headline,
#hero .hero-button-text {
  text-shadow: 0 1px 14px rgba(8,18,24,0.55);
}


/* ---- hero: full-size image only where the screen can use it ----
   phone gets 900x506 / 56KB, desktop gets 1920x1080 / 143KB.
   the browser only downloads the rule that matches. ---- */
@media (min-width: 768px) {
  .bgimage { background-image: url('images/banner-img.webp'); }
}


/* CTA band: was pulling a second copy of the hero photo just to sit behind text.
   brand gradient instead - zero bytes, white reads 9-11:1 on it. */
.bg-img-1 {
  background: linear-gradient(135deg, #0F2438 0%, #1E4160 55%, #22596C 100%);
}
.bg-img-1.bg-opacity::before { background: transparent; }


/* ---- Sticky mobile call bar ----------------------------------------
   Phone-width only; the navbar already carries the number on desktop.
   Revealed once the hero CTA has scrolled away, so it never duplicates
   a button already on screen. Ink on orange = 5.96:1.
   Evidence note: sticky CTAs won 9 of 33 published A/B tests and lost 6
   (Online Dialogue), so this is a candidate to measure, not a certainty. */
.call-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  transform: translateY(110%);
  /* visibility (not aria-hidden) is what takes the bar out of the tab order
     and the accessibility tree while it is off-screen. Delaying it by the
     length of the slide keeps the animation visible on the way out. */
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #E2703F;
  box-shadow: 0 -6px 18px rgba(15,36,56,0.28);
  display: none;
}
.call-bar.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform .25s ease, visibility 0s;
}
.call-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1rem;
  text-decoration: none;
  color: #111111;
  font-family: var(--heading-font, 'Montserrat', sans-serif);
  min-height: 56px;
}
.call-bar__icon { font-size: 22px; color: #111111; }
.call-bar__label { font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; }
.call-bar__sub {
  font-weight: 500;
  font-size: .85rem;
  opacity: .78;
  border-left: 1px solid rgba(17,17,17,0.35);
  padding-left: .55rem;
}
@media only screen and (max-width: 991.98px) {
  .call-bar { display: block; }
  /* keeps the bar off the footer text and the form button */
  body.has-call-bar { padding-bottom: 72px; }
}
@media only screen and (max-width: 360px) {
  .call-bar__sub { display: none; }
}