/* 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;

  /* Eastbourne palette - Lighthouse amber and navy, from the logo files.
     A LIGHT site: white nav, warm wash bands, navy only in the footer and the
     one mid-page CTA band. Every pair computed from WCAG relative luminance.
     Amber #FFB04F is a FILL colour only. As text on white it is 1.81:1 and
     fails; as a thin rule on white it fails the 3:1 graphics floor too.
     Amber fills ALWAYS take navy text (9.77:1). White on amber is 1.81 and fails.
     Amber as text is allowed ONLY on the navy surface (9.77:1). */
  --accent-color:   #FFB04F; /* amber - CTA fill, NAVY text on it       9.77:1 */
  --accent-hover:   #E89A2E; /* fill hover, navy text on it             7.67:1 */
  --accent-deep:    #001B26; /* navy - the only accent for text on light 17.73:1 */
  --accent-on-dark: #FFB04F; /* accent as text on #001B26               6.65:1 */
  --highlight:      #0E3A4E; /* mid navy - links on white              12.11:1 */
  --highlight-hover:#001B26;
  --highlight-light:#FFF7EC; /* pale green - text on #001B26           11.29:1 */
  --ink: #111111;
  --stone: #FFF7EC;
  --dark-surface: #001B26;   /* navy - white on it                     17.73:1 */
  --wash: #FFF7EC;
  --linear-gradient: linear-gradient(90deg, #001B26 0%, #0E3A4E 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: #FFB04F;
  --bs-secondary: #6c757d;
  --bs-black: #313131;
  --bs-light: #FFFFFF;
  --bs-dark: #212529;
  --bs-gray: #D9D9D9;
  --bs-gray-dark: #51565b;

  --bs-primary-rgb: 46, 125, 91;
  --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: #E89A2E;
  --bs-btn-hover-border-color: #E89A2E;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #111111;
  --bs-btn-active-bg: #E89A2E;
  --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: #FFB04F;
  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: #001B26;
  background-size: 200% auto;
  transition: 0.7s all;
  -webkit-transition: 0.7s all;
  border-radius: 3px;
}

.btn-secondary:hover {
  background-position: right center;
  color: #001B26;
  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;
}

/* White nav bar - navy text, amber underline on hover, on-LIGHT logo.
   Contrast (computed, WCAG 2.1): #FFF7EC on #001B26 = 11.29:1
   hover #FFB04F on #001B26 = 6.65:1 | #FFF7EC on green-mid #0E3A4E = 6.42:1
   white #FFFFFF on green fill #FFB04F = 5.00:1 */
.navbar.navbar-navy {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid rgba(0,27,38,0.12);
  --bs-navbar-color: #001B26;
  --bs-navbar-hover-color: #0E3A4E;
  --bs-navbar-active-color: #0E3A4E;
  --bs-navbar-brand-color: #001B26;
  --bs-navbar-brand-hover-color: #001B26;
}
.navbar.navbar-navy .nav-link {
  color: #001B26;
}
.navbar.navbar-navy .nav-link:hover,
.navbar.navbar-navy .nav-link.active {
  color: #0E3A4E;
  text-decoration: underline;
  text-decoration-color: #FFB04F;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.navbar.navbar-navy .navbar-toggler {
  border-color: rgba(0,27,38,0.35);
}
.navbar.navbar-navy .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255,176,79,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='%23001B26' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown panels - white, held off the bar by a hairline border and shadow */
.navbar-navy .dropdown-menu {
  background-color: #FFFFFF;
  border: 1px solid rgba(0,27,38,0.14) !important;
  box-shadow: 0 10px 24px rgba(0,27,38,0.18);
  padding: 0.25rem 0;
}
.navbar-navy .dropdown-item {
  color: #001B26;
}
.navbar-navy .dropdown-item:hover,
.navbar-navy .dropdown-item:focus,
.navbar-navy .dropdown-item.active,
.navbar-navy .dropdown-item:active {
  background-color: #FFB04F;
  color: #001B26;
}

/* Mobile slide-in menu - white to match the bar */
.navbar-navy .offcanvas {
  background-color: #FFFFFF;
  color: #001B26;
}
.navbar-navy .offcanvas .offcanvas-header {
  border-bottom: 1px solid rgba(0,27,38,0.12);
}
.navbar-navy .offcanvas .offcanvas-title {
  color: #001B26;
}
.navbar-navy .offcanvas .nav-link {
  color: #001B26;
}
.navbar-navy .offcanvas .nav-link:hover,
.navbar-navy .offcanvas .nav-link.active {
  color: #0E3A4E;
}
.navbar-navy .offcanvas .dropdown-menu {
  background-color: #FFF7EC;
  border: 1px solid rgba(0,27,38,0.12) !important;
  box-shadow: none;
}
.navbar-navy .offcanvas .dropdown-item {
  color: #001B26;
}
.navbar-navy .offcanvas .dropdown-item:hover,
.navbar-navy .offcanvas .dropdown-item.active {
  background-color: #FFB04F;
  color: #001B26;
}

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

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: #001B26 !important;
}
.navbar-navy a.phone-no:hover {
  color: #0E3A4E !important;
}
.navbar-navy .phone-no svg path {
  fill: #001B26 !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, #001B26 0%, #0E3A4E 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="%23001B26" 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="%23001B26" 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: #001B26;
}
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: #FFB04F;
}

/*--------------------------------------------------------------
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: #FFB04F;
}

/*--------------------------------------------------------------
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;
  /* Two layers, measured on the actual hero image, not estimated.
     This full-image overlay is deliberately LIGHT (0.30) so the roof reads.
     Legibility comes from a second, local scrim behind the text block only
     (#hero .hero-scrim below). Composited alpha where text sits is
     1-(1-0.30)(1-0.45) = 0.615, which clears white text at 4.5:1 against the
     brightest pixels under the text band (the white render walls, lum 0.98).
     Away from the text the image is only 30% darkened. */
  background: linear-gradient(
    180deg,
    rgba(2,24,34,0.32) 0%,
    rgba(2,24,34,0.30) 35%,
    rgba(2,24,34,0.30) 66%,
    rgba(2,24,34,0.22) 100%
  );
  z-index: 1;
}

/* Local scrim: sits behind the hero text only, fades out well before the
   edges so the roof around it stays light. */
#hero .container { position: relative; z-index: 2; }
#hero .container::before {
  content: "";
  position: absolute;
  inset: -6% -4%;
  background: radial-gradient(ellipse 88% 84% at 50% 48%,
    rgba(2,24,34,0.50) 0%,
    rgba(2,24,34,0.48) 62%,
    rgba(2,24,34,0.30) 80%,
    rgba(2,24,34,0.00) 100%);
  z-index: -1;
  pointer-events: none;
}

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

section#projects {
  background: linear-gradient(90deg, #001B26 0%, #0E3A4E 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: #0E3A4E;
}

.aqua-color:hover {
  color: #0E3A4E;
}

.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: #0E3A4E; }
.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: #FFB04F;
}

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

.responsive-logo {
  /* logo is now the stacked lighthouse mark, 1369x901 (1.52:1). Height 92px
     renders ~140px wide on desktop, which is what makes it read at a glance. */
  height: clamp(70px, 7vw, 92px);
  width: auto;
  transition: 0.3s ease;
}

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

.background-overlay {
  opacity: 0.85;
  background-color: #001B26;
}

.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: #FFB04F;
  color: #001B26 !important;
  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 #FFB04F solid;
}

.services-icon iconify-icon {
  color: #001B26;
  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: #001B26;
}

/* 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-eastbourne.webp");
}

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

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

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

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

#services .service-bg-6 {
  background-image: url("images/leadwork-eastbourne.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: #FFB04F;
  z-index: 3;
  transition: 0.25s;
}

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

/* why us */

.why-icon {
  font-size: 32px;
  color: #001B26;
  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: #001B26;
  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: #FFB04F;
}

.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 warm wash (was a dark band) */
.why-charcoal {
  background-color: #FFF7EC;
  color: #313131;
}
.why-charcoal .aqua-color {
  color: #0E3A4E !important;
}
.why-charcoal .text-uppercase.aqua-color {
  color: #0E3A4E !important;
}
.why-charcoal h2, .why-charcoal h3, .why-charcoal .why-point h3 { color: #001B26 !important; }
.why-charcoal p, .why-charcoal .text-white, .why-charcoal .text-white-bright, .why-charcoal .text-white-70 { color: #313131 !important; }
.why-charcoal .why-icon iconify-icon {
  color: #0E3A4E;
  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: #0E3A4E; }
.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: #FFF7EC;
}
.other-services-purple h2, .other-services-purple .h6, .other-services-purple p { color: #001B26; }

/* ---- Light bands: kill inherited on-dark text ------------------------------
   These two bands were DARK before the amber rebrand and their markup still
   carries Bootstrap .text-white / .text-white-70 / .text-white-bright, which
   are !important utilities. Anything less than !important loses to them and
   the text renders white on a light background. Fixing it here rather than
   stripping the classes out of 90 places in 11 files. -------------------- */
.why-charcoal .text-white,
.why-charcoal .text-white-70,
.why-charcoal .text-white-bright,
.other-services-purple .text-white,
.other-services-purple .text-white-70,
.other-services-purple .text-white-bright { color: #313131 !important; }

.why-charcoal h1, .why-charcoal h2, .why-charcoal h3, .why-charcoal h4,
.why-charcoal .h6,
.other-services-purple h1, .other-services-purple h2, .other-services-purple h3,
.other-services-purple h4, .other-services-purple .h6 { color: #001B26 !important; }

.why-charcoal a:not(.btn), .other-services-purple a:not(.btn) { color: #0E3A4E; }
.why-charcoal .why-icon iconify-icon,
.other-services-purple .other-service-card iconify-icon { color: #0E3A4E !important; }
.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: #0E3A4E;
  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: #FFB04F;
}
.location-panel-body {
  padding: 2rem 2.25rem;
}
.location-panel-body h2 {
  color: #001B26;
}
@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: #0E3A4E;
  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: #0E3A4E;
}


/* ---- Brand: amber never carries white text (1.81:1). Navy on amber = 9.77:1 ---- */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.recommend-price,
.recommend-price *,
.bg-pink,
.bg-pink *,
.location-panel-accent { color: #001B26; }

.btn-primary { background-color: #FFB04F; border-color: #FFB04F; }
.btn-primary:hover,
.btn-primary:focus { background-color: #E89A2E; border-color: #E89A2E; }
.btn-primary:focus-visible { outline: 3px solid #001B26; outline-offset: 2px; }

/* highlight colour for links in body copy */
a.highlight, .highlight-link { color: #0E3A4E; }
a.highlight:hover, .highlight-link:hover { color: #001B26; }


/* ---- 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(84px, 18vw); max-width: 100%; }
}

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

@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: 84px; }
}


/* ---- Brand: navy surfaces - footer and CTA band only ---- */
/* footer #001B26  - white 13.10:1, pale green #FFF7EC 11.29:1 */
/* bars   #0E3A4E  - white 9.08:1 */
.footer-main,
.why-charcoal { background-color: #FFF7EC; }
.other-services-purple { background-color: #FFF7EC; }
.trust-strip { background-color: #FFB04F; }

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

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

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

/* rules separating the bars from the content above */
.trust-strip { border-top: 3px solid #001B26; }
.trust-strip, .trust-strip .trust-strip-text, .trust-strip .trust-ticker__item { color: #001B26 !important; }
.footer-main { border-top: 3px solid #FFB04F; }


/* ==========================================================================
   FOOTER - wide logo band
   ground #001B26 : white 11.29:1, gold #FFB04F 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(84px, 9vw, 140px);
  width: auto;
  display: block;
}

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

.footer-phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #FFFFFF;
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 44px);
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.footer-main .footer-phone { color: #FFFFFF; }          /* 13.51:1 */
.footer-main .footer-phone:hover,
.footer-main .footer-phone:focus { color: #FFB04F; }    /*  8.02:1 */
.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: #FFB04F; }

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

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

@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 is pure white - a 70% tint cannot clear AA over a bright sky at any
   overlay alpha this design will tolerate. Outside the hero the tint is fine,
   because there it sits on a solid known surface. */
#hero .text-white-70 { color: #FFFFFF; }

/* 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(2,24,34,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: #001B26;
}
.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. Navy on amber = 9.77: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 inert: a visibility:hidden element is already out of the
     tab order and out of the accessibility tree, in every browser, with no
     JavaScript involved. inert did the same job but only while a script
     remembered to remove it - and this is the call button. */
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #FFB04F;
  box-shadow: 0 -6px 18px rgba(0,27,38,0.28);
  border-top: 2px solid #001B26;
  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: #001B26;
  font-family: var(--heading-font, 'Montserrat', sans-serif);
  min-height: 56px;
}
.call-bar__icon { font-size: 22px; color: #001B26; }
.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; }
}