html {
  scroll-behavior: smooth;
}

body {
 min-height: 100vh;
 min-height: -webkit-fill-available;
 background-color: #F7F7F7;
}

h1{
  font-size: 6rem;
}

h2{
  font-size: 5rem;
}

h3{
/*  font-size: 3rem;*/
}

p{
  font-size: 1.5rem;
}

/*why choose us section*/
h5.subtitle {
    color: #a3b0b4;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 0px;
}

.sectionHeading{
  font-weight: 600;
}

.heading{
  color: #66c9f0;
}

.mainColor{
  color: #66c9f0;
}

.mainColor-bg{
  background-color: #66c9f0; 
}



/*Hamburger navigation Stat*/

.hamburger {
  position: fixed;
  right: 2rem;
  top: 2rem;
  z-index: 9000;
  width: 3.5rem;
  height: 3.5rem;
}
.hamburger:hover {
  cursor: pointer;
}

.hamburger__line {
  content: " ";
  display: block;
  width: 100%;
  height: 0.1875em;
  background: black;
  border-radius: 0.5em;
  margin-bottom: 0.5em;
}
.hamburger__line:last-child {
  margin-bottom: 0;
}

.hamburger--steps{
  background-color: #66c9f0;
  padding: 1rem;
  border-radius: 35px;
}

.hamburger--steps .hamburger__line {
  transition: width 0.12s ease-in-out;
  background-color: white;
}
.hamburger--steps .hamburger__line:nth-child(2) {
  width: 80%;
}
.hamburger--steps .hamburger__line:last-child {
  width: 55%;
}

.hamburger--steps-right .hamburger__line {
  float: right;
}

.hamburger--steps:hover .hamburger__line {
  width: 100%;
}

.hamburger--active.hamburger--steps .hamburger__line {
  transition: none;
  width: 100%;
}

.hamburger--active .hamburger__line {
  position: absolute;
  top: 2em;
  right: 0.1em;
  margin: 0;
  background: white;
}
.hamburger--active .hamburger__line:first-child {
  transform: rotate(-45deg);
}
.hamburger--active .hamburger__line:nth-child(2) {
  display: none;
}
.hamburger--active .hamburger__line:last-child {
  transform: rotate(45deg);
}

/*Hamburger navigation end*/


/*Hamburger screen start*/
.nav-fullscreen {
  position: fixed;
  display: flex;
  z-index: 800;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  justify-content: center;
  align-items: center;
  background-color: rgba(102, 201, 240, .9);
  transition: opacity 0.2s, visibility 0.2s;
}
.nav-fullscreen--open {
  opacity: 1;
  visibility: visible;
}
.nav-fullscreen__items {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 3rem;
  line-height: 6rem;
}
@media (max-width: 375px) {
  .nav-fullscreen__items {
    font-size: 2rem;
    line-height: 4rem;
  }
}
.nav-fullscreen__item a {
  text-decoration: none;
  color: white;
  transition: color 0.1s ease-in-out;
}
.nav-fullscreen__item a:hover {
  color: #27498b;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -30%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -30%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -30%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -30%, 0);
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*Hamburger screen end*/


/*Hero, subpages*/
.mainHero{
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.subPageHero{
  height: 60vh;
}

.heading-primary-main{
  animation-name: moveInLeft;
  animation-duration: .9s;

  /*animation-delay: 3s;
  animation-iteration-count: 3;
  animation-timing-function: ease-out;*/
}

.heading-primary-sub{
  animation-name: moveInRight;
  animation-duration: .9s;
  font-size: 2em;
}

@keyframes moveInLeft{
  0%{
    opacity: 0;
    transform: translateX(-10rem);
  }

  80%{
    transform: translateX(2rem);
  }

  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes moveInRight{
  0%{
    opacity: 0;
    transform: translateX(10rem);
  }

  80%{
    transform: translateX(-2rem);
  }

  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes moveInBottom{
  0%{
    opacity: 0;
    transform: translateY(10em);
  }

  80%{
    transform: translateY(-1rem);
  }

  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

.ctaEffect{
  animation: contact-text 5s ease-in-out infinite;
}


@keyframes contact-text {
  0% {
    transform: rotateZ(0);
  } 2.5% {
    transform: rotateZ(2deg);
  } 5% {
    transform: rotateZ(-4deg);
  } 7.5% {
    transform: rotateZ(6deg);
  } 10% {
    transform: rotateZ(-8deg);
  } 12.5% {
    transform: rotateZ(6deg);
  } 15% {
    transform: rotateZ(-4deg);
  } 17.5% {
    transform: rotateZ(2deg);
  } 20% {
    transform: rotateZ(0);
  } 100% {
    transform: rotateZ(0);
  }
}

.heroBtn:link,
.heroBtn:visited {
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  display: inline-block;
  border-radius: 10rem;
  transition: all .2s;
  position: relative;
  font-size: 2em;
  color:#66c9f0;
}

.heroBtn:hover{
  color: #777;
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.2);
}

.heroBtn:active{
  transform: translateY(-1px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.2);
}

.heroBtn-white{
  background-color: #fff;
  color: #777;
}

.heroBtn::after{
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s;
}

.heroBtn-white::after{
  background-color: #fff;
}

.heroBtn:hover::after{
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

.heroBtn-animated{
  animation: moveInBottom .5s ease-out .75s;
  animation-fill-mode: backwards;
  /* ANIMATION-NAME, ANIMATION-DURATION, ANIMATION-TIMEING-FUNCTION, ANIMATION-DELAY */
}

/*Hero, subpages end*/


/*Hero v2 - forside (2026-07), evolution af .mainHero: samme baggrund/farver/logo,
  strammere informationshierarki, mere luft, ingen animationer/gradients/glass. */
.hero-v2{
  position: relative;
  min-height: clamp(520px, 68vh, 800px);
  padding-block: 3rem;
  /* .mainHero's 85% cut was tuned for a min-vh-100 hero, where 15% of the
     height is a lot of pixels. This hero is content-height and much
     shorter, so the same diagonal is softened proportionally to keep the
     identity without slicing into the content near the bottom edge. */
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
  /* Below "lg" the text column spans the full width and sits directly
     over the photo, so the crop is aimed at the right side of the frame
     (where the person is) instead of the geometric center - otherwise
     "cover" crops him out entirely on narrow screens. */
  background-position: 78% center;
}

/* Below "lg", text overlaps the photo directly (no separate image zone),
   so a flat, moderate scrim keeps it legible without hiding the person -
   much lighter than the desktop gradient's darkest point, since there's
   no "clear" zone to preserve here. */
.hero-v2::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5,8,12,.4);
  pointer-events: none;
  z-index: 1;
}
.hero-v2 > .container-fluid{
  position: relative;
  z-index: 2;
}

/* On wide screens the text column only spans ~58% of the width, leaving
   the image genuinely visible on the right (like the reference layout),
   so the crop can go back to centered and the flat mobile scrim is
   replaced by the left-to-right gradient instead. */
@media (min-width: 992px){
  .hero-v2{
    background-position: center;
  }
  .hero-v2::before{
    background: linear-gradient(to right,
      rgba(5,8,12,.92) 0%,
      rgba(5,8,12,.88) 50%,
      rgba(5,8,12,.35) 72%,
      rgba(5,8,12,0) 95%);
  }
}

.hero-v2-logo{
  width: 220px;
  min-height: 0;
}

.hero-v2-title{
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
}

.hero-v2-location{
  color: #66c9f0;
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.35rem);
}

.hero-v2-location i{
  font-size: 1.25em;
  vertical-align: -0.05em;
}

.hero-v2-desc{
  max-width: 46rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: rgba(255,255,255,.92);
}

.hero-v2-usps{
  font-size: 1rem;
  font-weight: 600;
}

.hero-v2-usps i{
  color: #66c9f0;
  margin-right: .4rem;
  font-size: 1.3em;
  vertical-align: -0.1em;
}

.btn-hero-primary,
.btn-hero-secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .9rem 2rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease, background-color .15s ease, color .15s ease;
}

.btn-hero-primary{
  background-color: #66c9f0;
  color: #0b2a4a;
  border: 2px solid #66c9f0;
}
.btn-hero-primary:hover{
  filter: brightness(.95);
  color: #0b2a4a;
  transform: translateY(-2px);
}

.btn-hero-secondary{
  background-color: rgba(255,255,255,.15);
  color: #fff;
  border: 3px solid #fff;
}
.btn-hero-secondary:hover{
  background-color: #fff;
  color: #27498b;
  transform: translateY(-2px);
}

.hero-v2-trust{
  font-size: .95rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .3rem .6rem;
}

.hero-v2-trust-label{
  color: #fff;
  font-weight: 700;
}

/* Reuses the same gold already used for review stars elsewhere on the
   site (.bp-bubbles .bp-stars), instead of introducing a new color. */
.hero-v2-trust-stars{
  color: #FBC02D;
}

.hero-v2-trust-score{
  color: rgba(255,255,255,.85);
  text-decoration: underline;
}
.hero-v2-trust-score:hover{
  color: #fff;
}

@media (max-width: 575.98px){
  .hero-v2{
    min-height: auto;
    /* A little extra bottom padding, on top of the softened clip-path
       above, keeps the diagonal comfortably clear of the trust line. */
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }
  .hero-v2-logo{
    width: 150px;
  }
  /* Left-align the 3 USP rows to each other (icons + text all start at the
     same x) instead of each row centering independently. The hero itself
     is left-aligned now, so the block stays flush left too. */
  .hero-v2-usps{
    align-items: flex-start;
  }
}
/*Hero v2 end*/


/*Service areas - forside (2026-07): "Vi pudser vinduer i hele Storkøbenhavn".
  Colors/shadows/radius reuse the same values already used by .service-card
  and .icon-badge.results elsewhere on this page - no new palette. */
.service-areas-badge{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(102,201,240,.12);
  color: #27498b;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .5rem 1.25rem;
  border-radius: 999px;
}
.service-areas-badge i{
  color: #66c9f0;
}

.service-areas-title{
  font-weight: 800;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-top: 1rem;
}
.service-areas-title-accent{
  color: #66c9f0;
}

.service-areas-subtitle{
  color: #5b6b78;
  font-size: 1.05rem;
  max-width: 42rem;
  margin-inline: auto;
  margin-top: .5rem;
}

.service-areas-groups{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
}

.service-areas-group-header{
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.service-areas-group-header h3{
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: #1e2b38;
}

/* Same circular icon-badge treatment as .icon-badge.results, just sized
   down a bit for a section header instead of a feature card. */
.service-areas-group-icon{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  color: #66c9f0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.service-areas-cities{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .85rem;
}

.service-area-card{
  display: flex;
  align-items: center;
  gap: .65rem;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: .85rem 1rem;
  text-decoration: none;
  color: #1e2b38;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-area-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  color: #1e2b38;
}
.service-area-card-icon{
  color: #66c9f0;
  flex-shrink: 0;
}
.service-area-card-title{
  flex: 1 1 auto;
}
.service-area-card-arrow{
  color: #c3cdd6;
  font-size: .8rem;
  flex-shrink: 0;
}

/* Cards without a url yet (see ServiceLocations::featuredByRegion()) render
   as a plain div instead of an <a> - same look, just not interactive. */
.service-area-card--static{
  cursor: default;
}
.service-area-card--static:hover{
  transform: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* ---- "Kan du ikke finde din by?" search + result card ---- */
.service-locations-search-section{
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid #e9edf1;
}

.service-locations-search-title{
  font-weight: 800;
  font-size: 1.5rem;
  margin: 0;
}

.service-locations-search{
  position: relative;
  max-width: 30rem;
  margin: 1.5rem auto 0;
}

.service-locations-search-field{
  position: relative;
  display: flex;
  align-items: center;
}
.service-locations-search-field i{
  position: absolute;
  left: 1.15rem;
  color: #66c9f0;
  pointer-events: none;
}

.service-locations-input{
  width: 100%;
  border: 1px solid #e5ebf1;
  border-radius: 999px;
  padding: .9rem 1.25rem .9rem 2.75rem;
  font-size: 1rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}
.service-locations-input:focus{
  outline: none;
  border-color: #66c9f0;
  box-shadow: 0 0 0 .2rem rgba(102,201,240,.25);
}

.service-locations-listbox{
  list-style: none;
  margin: .5rem 0 0;
  padding: .4rem;
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  text-align: left;
  max-height: 280px;
  overflow-y: auto;
}

.service-locations-option{
  padding: .65rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  color: #1e2b38;
}
.service-locations-option.is-active,
.service-locations-option:hover{
  background: rgba(102,201,240,.12);
}

.service-locations-result{
  max-width: 30rem;
  margin: 1.5rem auto 0;
}

.location-result-card{
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: 1.5rem;
  text-align: left;
}
.location-result-icon{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(102,201,240,.15);
  color: #66c9f0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.location-result-city{
  margin: 0 0 .35rem;
  font-size: 1.15rem;
  font-weight: 700;
}
.location-result-status{
  margin: 0 0 .75rem;
  color: #5b6b78;
}
.location-result-status--ok{
  color: #1d9a6c;
  font-weight: 700;
}
.location-result-note{
  margin: 0 0 .9rem;
  color: #5b6b78;
  font-size: .95rem;
}
.location-result-link{
  display: block;
  margin-top: .75rem;
  color: #27498b;
  font-weight: 700;
  text-decoration: none;
}
.location-result-link:hover{
  color: #66c9f0;
}

/* Same brand pill buttons as the hero, just smaller for an inline card. */
.btn-sm-pill{
  padding: .55rem 1.25rem;
  font-size: .95rem;
}

@media (max-width: 991.98px){
  .service-areas-groups{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px){
  .service-areas-groups{
    grid-template-columns: 1fr;
  }
  /* Same "nothing side by side on mobile" rule already used by the hero -
     the auto-fill grid otherwise still fits 2 cards per row here. */
  .service-areas-cities{
    grid-template-columns: 1fr;
  }
}
/*Service areas end*/

#logo{
  width: 400px;
  min-height: 250px;
}

.icon {
    margin-bottom: 15px !important;
}

.underline{
  border-bottom: 2px solid #eee;
}

.underline:before {
    content: "";
    background: #66c9f0;
    float: right;
    position: absolute;
    margin-top: 3rem;
    width: 3rem;
    z-index: 10;
    height: .2rem;
}


.social{
  background-color: #ECECEC;
}


body .lc-block .fa.fa-phone.cta-phone#cta-phone{
  color:#66c9f0 !important;
  background-color: #fff;
  padding: 0;
  margin: 0;
}

.fa-facebook,
.fa-envelope,
.fa-instagram
{
  font-size: 2rem;
  color: white !important;
  background-color: #66c9f0;
  padding: 1rem;
  border-radius: 2rem;
  margin-left: 1rem;
  margin-right: 1rem;
}


.social .fab,
.social .fas{
  font-size: 4rem;
  border-radius: 4rem;
}


/*Instagram Gallery*/
/* aspect ratios */
.ratio-1x1 { --bs-aspect-ratio: 100%; }
.ratio-4x3 { --bs-aspect-ratio: calc(3 / 4 * 100%); } /* landscape (short) */
.ratio-3x4 { --bs-aspect-ratio: calc(4 / 3 * 100%); } /* portrait (tall) */

/* Cover images inside ratio boxes */
.img-cover{ width:100%; height:100%; object-fit:cover; display:block; }

/* Hover micro-interaction */
.gl-card{ transition: transform .15s ease, box-shadow .15s ease; }
.gl-card:hover{ transform: translateY(-2px); }

/* Spacing tune on small screens */
@media (max-width: 575.98px){
  .gl-card.mt-3{ margin-top: .75rem !important; }
}


/*Contact start*/

@media (min-width: 992px) {
  .left_gallery img{
    width: 6.5rem;
  }
}

@media (max-width: 991px) {
  .left_gallery img{
    width: 4.5rem;
  }
}


@media (max-width: 767px) {
  .left_gallery img{
    width: 100%;
  }
}

/*Contact end*/


@media (max-width: 576px) {
  .heading-primary-sub{
    font-size: 1.5rem;
  }

  .heroBtn:link,
  .heroBtn:visited {
    padding: 1rem 1.5rem;
    font-size: 2rem;
  }
}

@media (max-width: 350px) {
  #heading{
    font-size: 1.4em;
  }
}





/*FAQ start*/
.section_padding_130 {
    padding-top: 130px;
    padding-bottom: 130px;
}
.faq_area {
    position: relative;
    z-index: 1;
    background-color: #f5f5ff;
}

.faq-accordian {
    position: relative;
    z-index: 1;
}
.faq-accordian .card {
    position: relative;
    z-index: 1;
    margin-bottom: 1.5rem;
}
.faq-accordian .card:last-child {
    margin-bottom: 0;
}
.faq-accordian .card .card-header {
    background-color: #ffffff;
    padding: 0;
    border-bottom-color: #ebebeb;
}
.faq-accordian .card .card-header h3 {
    cursor: pointer;
    padding: 1.75rem 2rem;
    color: #66c9f0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 1em;
}
.faq-accordian .card .card-header h3 span {
    font-size: 1.5rem;
}
.faq-accordian .card .card-header h3.collapsed {
    color: #070a57;
}
.faq-accordian .card .card-header h3.collapsed span {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
.faq-accordian .card .card-body {
    padding: 1.75rem 2rem;
}
.faq-accordian .card .card-body p:last-child {
    margin-bottom: 0;
}

@media only screen and (max-width: 575px) {
    .support-button p {
        font-size: 14px;
    }
}

.support-button i {
    color: #66c9f0;
    font-size: 1.25rem;
}
@media only screen and (max-width: 575px) {
    .support-button i {
        font-size: 1rem;
    }
}

.support-button a {
    text-transform: capitalize;
    color: #66c9f0;
    font-size: 1.4em;
}
@media only screen and (max-width: 575px) {
    .support-button a {
        font-size: 13px;
    }
}
/*FAQ End*/


.grecaptcha-badge { 
    visibility: hidden;
}


/*GDPR*/
.gdpr{
    margin-top:-15%;
    padding: 10%;
}
.gdpr h4{
    color: #66c9f0;
    font-weight: bold;
    font-size: 30px;
}
.gdpr .subheading{
    color: #27498b;
    font-size: 20px;
}
.gdpr .row
{
    margin-top: 10%;
}
.how-img 
{
    text-align: center;
}
.how-img i{
    font-size: 4em;
    background-color: #66c9f0;
    color:white;
}

/*TESTIMONIAL START*/

/* ==============================
   Bo Polering – Bubble Testimonials (equal-height)
   Namespace: .bp-bubbles
   ============================== */
.bp-bubbles {
  --bp-deep:  #27498b;
  --bp-brand: #66c9f0;
  --bp-bg:    #f3f6f9;
  --bp-text:  #2f3a45;
  --bp-muted: #6f7d8a;
  --bp-star:  #FBC02D;

  /* equal-height controls */
  --lines: 5;          /* how many lines to show */
  --lh: 1.6;           /* line-height for the text */
  --chrome: 84px;      /* space used by stars + paddings + tail + quote etc. */
}
.bp-bubbles { background: var(--bp-bg); }

/* Carousel track spacing */
.bp-bubbles .owl-stage-outer { padding: 12px 4px 24px; }

/* Hide dots completely (just in case) */
.bp-bubbles .owl-dots { display: none !important; }

/* Card wrapper */
.bp-bubbles .bp-card {
  display:flex; flex-direction:column; height:100%;
  background: transparent; border:0;
}

/* Speech bubble (EQUAL HEIGHT) */
.bp-bubbles .bp-bubble {
  position: relative;
  background:#fff;
  border-radius: 8px;
  padding: 28px 26px 26px;
  box-shadow: 0 18px 38px rgba(39,73,139,.10);
  border:1px solid rgba(39,73,139,.07);

  /* equal height magic:
     min-height = (line-height * lines * font-size) + chrome */
  min-height: calc( (1rem * var(--lh) * var(--lines)) + var(--chrome) );
}
.bp-bubbles .bp-bubble::after{
  /* tail pointing to avatar */
  content:"";
  position:absolute; left:56px; bottom:-14px;
  width: 22px; height: 22px;
  background:#fff; transform: rotate(45deg);
  border-right:1px solid rgba(39,73,139,.07);
  border-bottom:1px solid rgba(39,73,139,.07);
  box-shadow: 8px 8px 18px rgba(39,73,139,.06);
}

/* Decorative quote & subtle brand line */
.bp-bubbles .bp-quote{
  position:absolute; right:16px; top:14px;
  color: rgba(39,73,139,.18); font-size:18px;
}
.bp-bubbles .bp-bubble::before{
  content:""; position:absolute; left:0; top:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--bp-brand),rgba(102,201,240,.35));
  border-top-left-radius:8px; border-top-right-radius:8px;
}

/* Stars */
.bp-bubbles .bp-stars{ color: var(--bp-star); margin-bottom:8px; }
.bp-bubbles .bp-stars .fa-star-o{ color: rgba(0,0,0,.18); }

/* Review text — clamp to X lines so all cards can equalize */
.bp-bubbles .bp-text{
  color: var(--bp-text);
  font-size: 0.98rem;
  line-height: var(--lh);
  margin:0;

  display: -webkit-box;
  -webkit-line-clamp: var(--lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Author row */
.bp-bubbles .bp-author{
  display:flex; align-items:center; gap:14px;
  margin-top:28px; padding-left:20px;
}
.bp-bubbles .bp-avatar{
  width:72px; height:72px; border-radius:50%;
  background:#fff; box-shadow: 0 8px 22px rgba(39,73,139,.12);
  overflow:hidden; display:grid; place-items:center;
  border:2px solid #fff;
}
.bp-bubbles .bp-avatar img{ width:100%; height:100%; object-fit:cover; }
.bp-bubbles .bp-avatar span{
  font-weight:800; color:var(--bp-deep); letter-spacing:.5px;
}

.bp-bubbles .bp-meta .bp-name{
  color:#1e2b38; font-weight:800; font-size:1.05rem; line-height:1.15;
}
.bp-bubbles .bp-meta .bp-role{
  color:var(--bp-deep); font-weight:600; font-size:.9rem;
}

/* Tune equal height per breakpoint if you want a tighter fit */
@media (max-width: 575.98px){
  .bp-bubbles { --chrome: 78px; }      /* slightly smaller chrome on mobile */
  .bp-bubbles .bp-bubble{ padding:22px 18px; }
  .bp-bubbles .bp-author{ padding-left:6px; }
  .bp-bubbles .bp-avatar{ width:64px; height:64px; }
}


.fa-heart{
  color: #66c9f0;
  font-size: 3em
}
/*TESTIMONIAL END*/


/*The 3 services images + we offer*/
.text-brand{ color: #66c9f0 !important; }

/* Stop the uniform gap */
.clean-card{
  display:flex;
  flex-direction:column;
  gap: 0;                /* was 1rem */
  padding-bottom: 2.75rem;
}

/* Space under the image only */
.clean-card .position-relative {  /* the div wrapping the img */
  margin-bottom: 1rem;            /* adjust to taste */
}

/* Tighten title → desc */
.clean-card .service-title { margin-bottom: .25rem; }
.clean-card .clean-desc     { margin-top: 0; }

/* IMAGE: larger, rounder, subtle shadow + lift */
.clean-media{
  height: 320px;               /* was 260 — closer to reference */
  width: 100%;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transform: translateZ(0);
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.clean-card:hover .clean-media{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  filter: saturate(1.03);
}

/* PILL: bigger, left-aligned, OVERHANGS below the image */
.clean-pill{
  position: absolute;
  left: 36px;
  right: auto;
  bottom: 0px;                /* default for in-image variant */
  background: #fff;
  border: 1px solid #e8edf2;
  padding: 1.1rem 1.6rem;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 72px);
}

/* Modifier: make pill hang OUTSIDE the image (like the reference) */
.clean-pill--out{
  bottom: -28px;               /* pulls it below the image edge */
}

/* Optional: small brand accent bar under pill on hover */
.clean-pill::after{
  content:""; position:absolute; left:14px; bottom:-2px; height:4px; width:0;
  border-radius:4px; background: #66c9f0;
  transition: width .3s ease;
}
.clean-card:hover .clean-pill::after{ width:64px; }

/* Description: more spacing because pill sits lower */
.clean-desc{
  /*margin: 2.2rem 8px 0 8px;    /* creates the gap the pill occupies */*/
  color:#6b7280; line-height:1.7; ;
}

/* Shine sweep */
.clean-shine{
  position:absolute; inset:0; border-radius: 22px;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.18) 22%, transparent 45%);
  transform: translateX(-120%) skewX(-12deg);
  transition: transform .6s ease; pointer-events:none;
}
.clean-card:hover .clean-shine{ transform: translateX(120%) skewX(-12deg); }

/* Responsive tweaks */
@media (max-width: 991.98px){
  .clean-media{ height: 280px; }
}
@media (max-width: 575.98px){
  .clean-media{ height: 220px; }
  .clean-pill{ left: 18px; max-width: calc(100% - 36px); }
  .clean-pill--out{ bottom: -22px; }
  .clean-desc{ margin-top: 1.9rem; }
}


.service-card{
  border: 0;
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* ikon-cirklen med dobbelt ring */
.icon-badge.results{
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  margin-inline: auto;
  box-shadow: 0 2px 0 rgba(0,0,0,.02) inset;
  position: relative;
}
.icon-badge.results::before{
  content:""; position:absolute; inset:-10px;
  border-radius: 50%;
  border: 5px solid #66c9f0;   /* ydre ring */
}
.icon-badge.results i{
  font-size: 30px;
  color: #66c9f0;
  z-index: 1;
}

.service-title{ color: #66c9f0; }

.service-card .card-text{
  max-width: 34ch;
  margin-inline: auto;
  color:#5b6b62;
}

.btn-svc{
  background: #66c9f0;
  border-color: #66c9f0;
  color:#fff;
  padding:.65rem 1.25rem;
  border-radius:.5rem;
  font-weight:600;
}


/* tighten spacing only between your title and desc */
.service-title + .clean-desc { margin-top: .25rem !important; padding-top: 0; }

/* if you still have the old pill version that set a big margin-top on .clean-desc,
   this will also neutralize it inside the clean cards */
.clean-card .clean-desc { margin-top: .25rem !important; padding-top: 0; }






/*newsletter_subscribe*/

.text-brand{ color: #27498b !important; }
.link-brand{ color: #27498b; text-decoration: underline; }
.link-brand:hover{ color:#1d3670; }

/* Card look that matches your site */
.nl-card{
  background:#fff;
  border:1px solid #eef2f5;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

/* Circle icon with brand ring */
.nl-icon{
  width:76px; height:76px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff;
  border:6px solid rgba(102,201,240,.25);
  color: #27498b;
  font-size: 28px;
}

/* Big pill input */
.form-control-nl{
  height: 56px;
  border-radius: 999px;
  border:1px solid #e5ebf1;
  padding: .75rem 1.25rem;
  box-shadow: none;
}
.form-control-nl:focus{
  border-color: #66c9f0;
  box-shadow: 0 0 0 .25rem rgba(102,201,240,.25);
}

/* Brand CTA */
.btn-brand{
  background: #66c9f0;
  border-color: #66c9f0;
  color:#fff;
  border-radius: 999px;
  padding: .85rem 1.5rem;
  font-weight: 700;
}
.btn-brand:hover{ filter: brightness(.95); color:#fff; }

/* Tighter on small screens */
@media (max-width: 575.98px){
  .form-control-nl{ height: 52px; }
  .btn-brand{ padding: .8rem 1.2rem; }
}

/*Cookies*/
.cookie-box {
    position: fixed;
    background: rgba(10, 75, 157, .9);
    color: rgb(255, 255, 255);
    text-align: center;
    width: 100%;
    bottom: 0;
    animation: popin .4s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
    transform-origin: center 100%;
    z-index: 9999;
}

#cookies{
  width: 80px;
  height: auto;
  margin-right: 10px;
}

.cookie-box span {
    display: inline-block;
    padding: 20px;
}

.cookie-box span a{
  color: white;
}

.cookie-box button {
    border: none;
    padding: 10px 20px;
    z-index: 10;
    color: #3E3E3E;
}

/*FOOTER*/
.footer{
  color: #66c9f0;
  font-size: 1em;
}


:root{
  --bp-brand:#66c9f0;   /* light blue */
  --bp-deep:#27498b;    /* deep blue */
}

/* Base editorial styles (from the light version) */
.contact-editorial{ position:relative; }
.eyebrow{ letter-spacing:.12em; text-transform:uppercase; font-weight:700; font-size:.78rem; }
.rule{ height:2px; width:80px; border-radius:2px; }
.phone-link{ font-weight:900; text-decoration:none; line-height:1; font-size: clamp(2rem, 5vw, 3.25rem); }

/* BLUE theme */
.contact-editorial--blue{
  color:#fff;
  background:#66c9f0;
    
  overflow:hidden;
}

/* Light variants on blue */
.eyebrow--light{ color: rgba(255,255,255,.75); }
.rule--light{ background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.35)); }
.phone-link--light{ color:#fff; }
.phone-link--light:hover{ color:#f2f6ff; }

/* Glass cards for dark bg */
.contact-card--glass{
  border-radius:18px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.35);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  color:#fff;
}
.contact-card--glass:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.text-white-75{ color: rgba(255,255,255,.82) !important; }

/* Small brand dot rendered for dark background */
.contact-dot{
  width:12px; height:12px; border-radius:50%;
  margin-top:.35rem;
}
.contact-dot--light{
  background: radial-gradient(circle at 40% 40%, #ffffff, rgba(255,255,255,.6));
}

/* Buttons tuned for blue bg */
.btn-ghost-light{
  color:#fff; border:1px solid #fff; background: transparent;
}
.btn-ghost-light:hover{
  background:#fff; color:#0b2545;
}
.btn-white{
  background:#fff; color:#0b2545; border:1px solid #fff; font-weight:700;
}
.btn-white:hover{
  filter: brightness(.95); 
  color:white;
  border: 1px solid white;
  border-radius: 5px;
}


/* =========================
   Bo Polering — 404 page
   ========================= */
.bp-404{
  --bp-brand:#66c9f0;      /* light blue */
  --bp-deep:#27498b;       /* deep blue  */
  --bp-bg:#f3f6f9;         /* page tint  */
  background: radial-gradient(1200px 800px at 10% -10%, #e9f7fe 0%, transparent 60%),
              radial-gradient(1000px 700px at 110% 20%, #e8f0ff 0%, transparent 60%),
              var(--bp-bg);
  padding: 3rem 0;
}

.text-deep{ color: var(--bp-deep); }
.link-deep{ color: var(--bp-deep); text-decoration: none; }
.link-deep:hover{ text-decoration: underline; }

.btn-brand{
  background: var(--bp-brand);
  color:#0b2a4a; border: none;
  box-shadow: 0 10px 24px rgba(102,201,240,.35);
}
.btn-brand:hover{ filter: brightness(.95); }

.btn-deep{
  background: var(--bp-deep); color:#fff; border:none;
}
.btn-deep:hover{ filter: brightness(1.05); }

/* top pill badge */
.bp-badge{
  display:inline-block;
  font-weight:700;
  color:#0b2a4a;
  background:#fff;
  border:1px solid rgba(39,73,139,.12);
  padding:.35rem .9rem;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(39,73,139,.08);
}

/* hero “glass” card */
.bp-hero{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.9));
  border:1px solid rgba(39,73,139,.08);
}

/* subtle top accent */
.bp-hero::before{
  content:"";
  position:absolute; left:0; top:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--bp-brand), rgba(102,201,240,.4));
}

/* animated sheen */
.bp-sheen{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%);
  transform: translateX(-100%);
  animation: sheen 5s ease-in-out infinite;
}
@keyframes sheen{
  0%{ transform: translateX(-120%); }
  30%{ transform: translateX(120%); }
  100%{ transform: translateX(120%); }
}

.bp-hero-inner{
  padding: clamp(1.5rem, 2.5vw + 1rem, 3rem);
}

.bp-code{
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--bp-deep);
  text-shadow: 0 12px 34px rgba(39,73,139,.18);
  margin-bottom:.25rem;
}

/* search */
.bp-search .form-control{
  background:#fff; box-shadow:none;
}
.bp-search .input-group-text{
  border-right:0;
}
.bp-search .form-control:focus{
  box-shadow: none;
}

/* links line */
.bp-links{ color:#6c7a86; }

/* =========================================================================
   Location Pages Engine - app/views/location.php
   New design, evaluated on Valby first (see docs/architecture/location-pages.md).
   Reuses the same brand colors as the rest of the site (#66c9f0, #27498b)
   and the same shadow/radius language as .service-card/.clean-card - no
   new palette, no new shape language.
   ========================================================================= */

/* Full-bleed photo hero, same technique as the homepage's .hero-v2 (see
   above): a background photo + a dark scrim so white text stays legible,
   instead of a boxed <img> in a separate column. Reuses that pattern
   rather than inventing a new one. */
.location-hero{
  position: relative;
  min-height: clamp(500px, 78vh, 820px);
  display: flex;
  align-items: center;
  padding-block: 3rem;
  background-size: cover;
  background-position: 78% center;
  background-repeat: no-repeat;
  background-color: #555;
}
.location-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5,8,12,.45);
  pointer-events: none;
  z-index: 1;
}
.location-hero > .container{
  position: relative;
  z-index: 2;
}

/* 768px, not 992px: at typical Windows display scaling (125-150%), a
   physically-wide monitor still reports a *logical* CSS viewport under
   992px, which was silently falling back to the flat mobile scrim below
   and reading as "no gradient, just a dark photo" instead of the
   left-to-right fade. 768px leaves far more real desktop widths inside
   the gradient branch. */
@media (min-width: 768px){
  .location-hero{
    background-position: center;
  }
  .location-hero::before{
    background: linear-gradient(to right,
      rgba(5,8,12,.78) 0%,
      rgba(5,8,12,.6) 38%,
      rgba(5,8,12,.15) 62%,
      rgba(5,8,12,0) 85%);
  }
}

/* Light-photo variant (ServiceLocations' 'heroLightPhoto', e.g. Valby's
   real street photo): the photo itself already fades to a bright, hazy
   left side, so there's nothing for a dark scrim to do except muddy that
   fade and make white text unreadable against it. Drop the scrim, switch
   to dark text (the same colors the hero used before it became a
   full-bleed photo), and center the crop instead of favoring one side -
   the built-in fade reads fine regardless of exactly how it's cropped. */
.location-hero--light{
  background-position: center;
}
/* Relying purely on the photo's own built-in light fade (no scrim at
   all) only worked where the text column stays narrower than that
   fade's width - at other sizes the text runs across whatever the photo
   happens to show there (window glass, bricks, dark frames), and dark
   text has no reliable contrast against a background that varies that
   much. A light wash behind the text - fading out before the far right,
   where the photo should read clearly - fixes that at every width,
   mirroring the dark-hero variant's scrim but inverted to white. */
.location-hero--light::before{
  /* .55 still let bright spots in the photo itself (sunlit window glass,
     reflections) show through too strongly for the gray/navy text over
     them to stay readable - a flat wash only guarantees contrast against
     the photo's *average* brightness, not its brightest points. Strong
     enough to flatten those highlights too. */
  background: rgba(255,255,255,.8);
}
@media (min-width: 768px){
  /* Pixel stops, not percentages: the text column's width is fixed
     (.location-hero-desc's max-width: 34rem = 544px), but percentage
     stops are relative to the *section's* full width - as the section
     grew from 768px to 991px (still one full-width column below the
     992px breakpoint where it splits into two), that fixed-width text's
     right edge landed at a *smaller* percentage of the section, drifting
     into a weaker part of the gradient specifically in that range, even
     though it worked fine just outside it. Fixed pixel stops keep the
     strong-wash zone sized to the text regardless of how wide the
     section itself is. */
  .location-hero--light::before{
    background: linear-gradient(to right,
      rgba(255,255,255,.92) 0px,
      rgba(255,255,255,.85) 560px,
      rgba(255,255,255,.3) 760px,
      rgba(255,255,255,0) 960px);
  }
}
/* logo.webp's wordmark is white, meant for the dark-photo hero elsewhere
   - a soft dark halo keeps it legible here too, instead of it nearly
   disappearing into this photo's light fog. */
.location-hero--light .hero-v2-logo{
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(0,0,0,.25));
}
.location-hero--light .location-hero-title{
  color: #1e2b38;
}
.location-hero--light .location-hero-desc{
  color: #5b6b78;
}
.location-hero--light .location-hero-usps{
  color: #1e2b38;
}
.location-hero--light .location-hero-actions .btn-hero-secondary{
  /* Solid, not transparent: a transparent button here reads fine over
     the photo's light fog on desktop, but on narrower crops (more
     phone/tablet widths favor the darker building over the fog) dark
     navy text over a transparent background became unreadable against
     the dark brick behind it. A solid background is legible regardless
     of what part of the photo ends up behind it. */
  background: rgba(255,255,255,.92);
  color: #27498b;
  border-color: #27498b;
}
.location-hero--light .location-hero-actions .btn-hero-secondary:hover{
  background: #27498b;
  color: #fff;
}

.location-hero-title{
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  color: #fff;
  margin-bottom: .75rem;
}
.location-hero-title-accent{
  color: #66c9f0;
}

.location-hero-tagline{
  color: #66c9f0;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.location-hero-desc{
  color: rgba(255,255,255,.9);
  font-size: 1.05rem;
  max-width: 34rem;
}

.location-hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0;
}

.location-hero-usps{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 0;
  font-weight: 600;
  color: #fff;
}
.location-hero-usps i{
  color: #66c9f0;
  margin-right: .35rem;
}

/* Floating "we cover this area" card, over the photo on desktop (like the
   reference design), stacked below the text on narrower screens where
   there's no separate photo zone to float over. */
.location-hero-badge{
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  padding: 1rem 1.25rem;
  max-width: 300px;
  margin-top: 1.5rem;
}
.location-hero-badge-icon{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(102,201,240,.15);
  color: #66c9f0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.location-hero-badge strong{
  display: block;
  color: #1e2b38;
  font-size: .95rem;
}
.location-hero-badge-text{
  color: #5b6b78;
  font-size: .85rem;
}

/* 992px (lg), not 768px: the text column itself is only col-lg-7 - below
   that it's still full width (col-12), so floating the badge absolute
   any earlier landed it directly on top of the buttons/USP text instead
   of over the clear photo area on the right, which only exists once the
   text column actually narrows. */
@media (min-width: 992px){
  .location-hero-badge{
    position: absolute;
    right: 3rem;
    bottom: 2.5rem;
    margin-top: 0;
  }
}

/* Alternating subtle backgrounds so each section reads as its own band
   instead of one long white page - same light blue-gray tint already
   used for .bp-bubbles (reviews) elsewhere, alternated with plain white
   rather than introducing more new colors. */
.location-section--intro{
  background: #fff;
}
.location-section--why-us{
  background: #f4f8fb;
}
.location-section--services{
  background: #fff;
}
.location-section--reviews-faq{
  background: #f4f8fb;
}
.location-section--related{
  background: #fff;
}

.location-eyebrow{
  color: #66c9f0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .85rem;
  margin-bottom: .5rem;
}

/* Two-tone "Dark text Accent" centered section heading, with a short
   underline accent beneath - used above whyUs/services/relatedCities via
   render_location_section_heading(). Reuses the same dark/accent colors
   as the hero title's city-name accent, just applied here instead of a
   plain single-color heading. */
.location-heading-title{
  font-weight: 800;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.2;
  color: #1e2b38;
  margin: 0;
}
.location-heading-accent{
  color: #66c9f0;
}
.location-heading-underline{
  display: inline-block;
  width: 3rem;
  height: 4px;
  border-radius: 2px;
  background: #66c9f0;
  margin-top: .85rem;
}

/* "Why us" card - its own look (not the homepage's .service-card, which
   stays untouched): centered, a ringed circular icon badge, a small
   underline under each title, and a soft decorative corner accent in the
   bottom-right corner - all in the one brand blue rather than a
   different color per card, plus a gentle hover lift. */
.location-why-card{
  position: relative;
  overflow: hidden;
  text-align: center;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #eef1f5;
  box-shadow: 0 4px 16px rgba(15,23,42,.05);
  padding: 2.25rem 1.5rem 2rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.location-why-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15,23,42,.09);
}
.location-why-icon-wrap{
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 1.25rem;
}
.location-why-icon-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(102,201,240,.35);
}
.location-why-icon{
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: rgba(102,201,240,.15);
  color: #1f7fbd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.location-why-title{
  font-weight: 800;
  font-size: 1.15rem;
  color: #1e2b38;
  margin-bottom: .5rem;
}
.location-why-underline{
  display: inline-block;
  width: 1.75rem;
  height: 3px;
  border-radius: 2px;
  background: #66c9f0;
  margin-bottom: 1rem;
}
.location-why-text{
  color: #5b6b78;
  font-size: .95rem;
  line-height: 1.65;
}

.location-section-title{
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #1e2b38;
}

.location-stats-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.location-stat-card{
  display: flex;
  align-items: center;
  gap: .85rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: 1.25rem;
  /* Grid/flex items default to min-width:auto, which refuses to shrink
     below the label text's intrinsic width - right around the 992px
     breakpoint (where the stats column itself is narrowest relative to
     its 2-column grid) that pushed the card wider than its cell and
     off the right edge of the page. min-width:0 lets it shrink and wrap
     normally instead. */
  min-width: 0;
}
.location-stat-card > div{
  min-width: 0;
}
.location-stat-icon{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(102,201,240,.15);
  color: #66c9f0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}
.location-stat-value{
  font-weight: 800;
  color: #27498b;
  font-size: 1.1rem;
  line-height: 1.2;
}
.location-stat-label{
  color: #5b6b78;
  font-size: .85rem;
}

@media (max-width: 575.98px){
  .location-stats-grid{
    grid-template-columns: 1fr;
  }
}

/* Service card - its own look (not the homepage's .clean-card, which
   stays untouched): a soft circular icon badge floats half-over the top
   of the card, image below it, then a centered title/underline/
   description, matching the "why us" cards' visual language. */
.location-service-card{
  position: relative;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #eef1f5;
  box-shadow: 0 4px 16px rgba(15,23,42,.05);
  padding: 2.75rem 1.5rem 2rem;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.location-service-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15,23,42,.09);
}
.location-service-icon-badge{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(102,201,240,.15);
  color: #1f7fbd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 6px 16px rgba(15,23,42,.08);
}
.location-service-media{
  margin: 1.5rem 0 1.25rem;
  border-radius: 14px;
  overflow: hidden;
}
.location-service-media img{
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.location-service-title{
  font-weight: 800;
  font-size: 1.2rem;
  color: #1e2b38;
  margin-bottom: .5rem;
}
.location-service-underline{
  display: inline-block;
  width: 1.75rem;
  height: 3px;
  border-radius: 2px;
  background: #66c9f0;
  margin-bottom: 1rem;
}
.location-service-desc{
  color: #5b6b78;
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.location-service-btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.4rem;
  border-radius: 999px;
  border: 1.5px solid #66c9f0;
  color: #27498b;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.location-service-btn:hover{
  background: #66c9f0;
  color: #fff;
}
/* Extra clearance above the row so the icon badges (which overlap
   upward, out of the card) don't crowd the section heading above them. */
.location-section--services .row{
  margin-top: 1.5rem;
}

/* ---- Reviews + FAQ, side by side (location-only; testimonials.php's
   default/homepage layout is untouched - see $reviewsCompact) ---- */
.location-reviews-compact .bp-bubbles{
  background: transparent;
  padding: 0 !important;
}
.location-reviews-compact-heading{
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  color: #1e2b38;
  margin-bottom: .35rem;
}
.location-reviews-compact-rating{
  color: #5b6b78;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.location-reviews-compact-rating a{
  color: #27498b;
  text-decoration: underline;
}
.location-reviews-compact .bp-card{
  padding: 0;
}
.location-reviews-compact .bp-bubble{
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.location-faq-compact-heading{
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  color: #1e2b38;
  text-align: left;
  margin-bottom: 1.25rem;
}

/* Reuses .service-area-card's chip look (added inline in location.php) so
   it blends into the grid of nearby-city chips; just recolored to read
   as the "see everything" link rather than one more city. */
.location-related-more{
  color: #27498b;
  justify-content: center;
}
.location-related-more:hover{
  color: #66c9f0;
}

/* ---- Location CTA banner (cta_location.php) ---- */
.location-cta{
  background: #66c9f0;
  padding-block: 3rem;
}
.location-cta-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
.location-cta-icon{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.location-cta-body{
  flex: 1 1 320px;
}
.location-cta-body h2{
  color: #fff;
  font-weight: 800;
  font-size: 1.6rem;
  margin-bottom: .35rem;
}
.location-cta-body p{
  color: rgba(255,255,255,.9);
  margin: 0;
}
.location-cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.location-cta-actions .btn-hero-secondary{
  background-color: #fff;
  color: #27498b;
  border-color: #fff;
}
.location-cta-actions .btn-hero-secondary:hover{
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}

/* ---- Location footer (footer_location.php) ---- */
.location-footer{
  /* #27498b (the site's "deep blue", --bp-deep) is almost exactly the
     squeegee handle color in logo.webp, so the logo was nearly
     disappearing into the footer. This is a darker shade of the same
     blue family instead - still reads as "blue"/on-brand, but dark
     enough that both the logo's cyan blade and navy handle stand out
     against it, the same way they already do on the homepage hero's
     dark photo. */
  background: #14264a;
  color: rgba(255,255,255,.75);
  padding-block: 3.5rem 1.5rem;
}
.location-footer-heading{
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.location-footer-tagline,
.location-footer-note{
  color: rgba(255,255,255,.65);
  font-size: .9rem;
}
.location-footer-list{
  margin: 0 0 .75rem;
}
.location-footer-list li{
  margin-bottom: .5rem;
}
.location-footer-list i{
  /* Resets the sitewide .fa-envelope/.fa-facebook/.fa-instagram rule
     (meant for the big round social-icon buttons elsewhere) - it was
     bleeding into this plain inline mail icon and inflating it into a
     colored circular badge, unlike the phone icon next to it which
     isn't targeted by that rule. */
  font-size: inherit;
  background: none;
  padding: 0;
  border-radius: 0;
  margin: 0 0 0 0;
  color: #66c9f0;
  width: 1.25rem;
  display: inline-block;
}
.location-footer-list a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
}
.location-footer-list a:hover{
  color: #66c9f0;
}
.location-footer-bottom{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .85rem;
  color: rgba(255,255,255,.55);
}
.location-footer-bottom-links{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
}
.location-footer-bottom a{
  color: rgba(255,255,255,.75);
  text-decoration: none;
}
.location-footer-bottom a:hover{
  color: #66c9f0;
}