/* TOKENS */
  :root{

    --ink:#0A2854;
    --ink-soft:#1a3d6f;
    --concrete:#F5F7FA;
    --concrete-dark:#E8EDF5;
    --spray:#0080FF;
    --spray-deep:#0052A3;
    --spray-light:#4DB8FF;
    --grime:#A66A3B;
    --white:rgba(237,234,227,0.92);
    --line:rgba(10,40,84,0.14);
    --line-on-dark:rgba(255,255,255,0.16);
    --shadow:0 12px 32px rgba(10,40,84,0.16);
    --radius:4px;
    --radius-lg:6px;
    --radius2:10px;
    --space-1:.5rem;
    --space-2:1rem;
    --space-3:1.5rem;
    --space-4:2.25rem;
    --space-5:3.5rem;
    --space-6:5rem;
    --font-display:'Poppins', 'Arial', sans-serif;
    --font-body:'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --offwhite: #FAFAF9;
    --gold: #D4AF37;

  }

  *{box-sizing:border-box;
  }

  html{scroll-behavior:smooth;
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--concrete);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3{
    font-family:var(--font-display);
    font-weight:700;
    line-height:1.08;
    margin:0 0 var(--space-2);
    letter-spacing:0.01em;
    color:var(--ink);
  }

  p{margin:0 0 var(--space-2); 
    color:var(--ink-soft); 
    max-width:62ch;
  }

  .kw{
    color:var(--spray-deep);
    font-weight:700;
  }

  a{color:inherit;
  }

  img,svg{display:block; 
    max-width:100%;
  }

  button{font-family:inherit;
  }

  .wrap{max-width:1160px; 
    margin:0 auto; 
    padding:0 var(--space-3);
  }
  section{padding:var(--space-6) 0;

  }

  :focus-visible{outline:3px solid var(--spray); outline-offset:2px;

  }

  .btn{

    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    gap:.5rem;
    padding:.85rem 1.6rem;
    border-radius:var(--radius2);
    font-family:var(--font-display);
    font-weight:600;
    font-size:1rem;
    letter-spacing:0.02em;
    text-decoration:none;
    border:1.5px solid transparent;
    cursor:pointer;
    transition:transform .15s ease, background .15s ease, border-color .15s ease;

  }

  .btn:hover{transform:translateY(-2px);

  }

  .btn-primary{
    background:var(--spray); 
    color:var(--white);

  }

  .btn-primary:hover{
    background:var(--spray-deep);

  }

  .btn-ghost{
    background:transparent; 
    color:var(--white); 
    border-color:var(--line-on-dark);

  }

  .btn-ghost:hover
  {border-color:var(--white);

  }

  .btn-whatsapp{
    background:#25D366;
    color:var(--white);
  }

  .btn-whatsapp:hover{
    background:#1EBE5A;
  }

  .btn-whatsapp-icon{
    flex-shrink:0;
  }

  /* HEADER */

  header{
    position:sticky; top:0; z-index:1000;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom:1px solid transparent;

  }

  .nav{
    display:flex; 
    align-items:center; 
    justify-content:space-between;
    padding:.3rem var(--space-3);
    max-width:1160px; margin:0 auto;

  }

  .brand{
    font-family:var(--font-display); 
    font-weight:700; 
    font-size:1.4rem;
    text-decoration:none; 
    color:var(--ink); 
    display:flex; 
    align-items:center; 
    gap:.3rem;

  }

  .brand img{
    height:75px; 
    width:75px; 
    object-fit:cover; 
    border-radius:50%; 
    flex-shrink:0;

  }

  .nav-links{
    display:flex; 
    align-items:center; 
    gap:var(--space-2); 
    list-style:none; 
    margin:0; 
    padding:0;

  }

  .nav-links a{
    text-decoration:none; 
    font-weight:500; 
    font-size:.98rem; 
    color:var(--ink); 
    position:relative; 
    padding:.2rem 0;

  }

  .nav-links a::after{
    content:""; 
    position:absolute; 
    left:0; 
    right:0; 
    bottom:-4px; 
    height:2px; 
    background:var(--spray);
    transform:scaleX(0); 
    transform-origin:left; 
    transition:transform .2s ease;

  }

  .nav-links a:hover::after{transform:scaleX(1);
  }

  .nav-cta{
    display:flex; 
    align-items:center; 
    gap:var(--space-1);

  }

  .nav-phone{
    display:flex; 
    align-items:center; 
    gap:.4rem; 
    text-decoration:none; 
    font-weight:600; 
    color:var(--ink); 
    font-size:.95rem;

  }

  .burger{
    display:none; 
    background:none; 
    border:none; 
    padding:.4rem; 
    cursor:pointer;

  }

  .burger span{
    display:block; 
    width:24px; 
    height:2px; 
    background:var(--ink); 
    margin:5px 0; 
    transition:transform .2s ease, opacity .2s ease;

  }



.social-icons {
  display: flex;
  align-items: center;
  gap: 12px;

}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;

}

.social-icons img {
  width: 20px;
  height: 20px;
  object-fit: contain;

}











  /* HERO */

/* Premium hero video background */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Respect "reduce motion": kept as a general rule; no longer needed for
   the hero, which is now a single static image, but harmless if unused. */

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.65));
  z-index: -1;
}

.hero .wrap,
.hero .hero-description,
.hero .hero-quote-btn {
  position: relative;
  z-index: 2;
}

.hero {
  color: var(--white);
  text-align: center;
  padding: var(--space-4) var(--space-3);
  min-height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.hero-business-name {
  color: var(--white);
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: var(--space-2);
  text-shadow: 0 2px 14px rgba(0,0,0,.55);

}

.hero-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;

}

.hero-icons-row {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;

}

.hero-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 5px rgba(0,0,0,.5);

}

/* Small trust-point icons */

.hero-icon-item img,
.hero-icon-item svg {
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  object-fit: contain;
  display: block;
  color: var(--gold);

}

.hero .wrap {
  width: 100%;
}

.hero-description {
  max-width: 640px;
  margin: var(--space-3) auto 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(241, 241, 241, 0.85);
  text-wrap: balance;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  position: relative;
  z-index: 2;
}

.hero-description .kw{
  color:var(--spray-light);
}









  /* SERVICES */

  .services{
    background:var(--offwhite);

  }

  .section-head-center{
    width:100%;
    max-width:none;
    margin:0 0 var(--space-4);
    text-align:center;
  }

  .section-head-center h2{
    margin:0;
    text-align:center;
    font-size:clamp(2rem,4vw,3rem);
  }

  .services-grid{
    display:grid; 
    grid-template-columns:repeat(2, 1fr); gap:var(--space-3);

  }

  .service-card{
    background:linear-gradient(160deg, #EFF7FC 0%, #E4F1FA 100%);
    border:1px solid #C9DEEE;
    border-radius:var(--radius-lg);
    padding:var(--space-3);
    box-shadow:0 2px 4px rgba(10, 40, 84, 0.06), 0 8px 20px rgba(10, 40, 84, 0.15);
    transition:transform .2s ease, box-shadow .2s ease;

  }

  .service-card:hover{
    transform:translateY(-4px);
    box-shadow:0 4px 8px rgba(10, 40, 84, 0.1), 0 12px 32px rgba(10, 40, 84, 0.2);

  }

  .service-media{
    width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius);
    background:var(--concrete-dark); margin-bottom:var(--space-2);

  }

  .service-media-wrap{
    position:relative;
    margin-bottom:var(--space-2);
  }

  .service-media-wrap .service-media{
    margin-bottom:0;
  }

  .media-play-btn{
    position:absolute;
    inset:0;
    margin:auto;
    width:56px;
    height:56px;
    border-radius:50%;
    border:none;
    background:rgba(10,40,84,.8);
    color:#fff;
    font-size:1.2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform .15s ease, background .15s ease;
  }

  .media-play-btn:hover{
    background:var(--spray-deep);
    transform:scale(1.06);
  }

  .media-play-btn.is-hidden{
    display:none;
  }

  .service-card h3{font-size:1.15rem; margin-bottom:.35rem;}
  .service-card p{font-size:1.05rem; margin:0;}













/* work showcase slider */

.work-slider-section {
  padding: var(--space-2) 0 var(--space-6);
  background:var(--offwhite);

}

.work-slider-head {
  text-align: center;
  margin-bottom: 2rem;

}

.work-slider-head h2 {
  margin-bottom: .5rem;

}

.work-slider-head p {
  margin: 0;
  color: #5c6b7a;

}


/* Showcase quick links */
.showcase-buttons {
  display:flex;
  justify-content:center;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:1rem;
}

.showcase-buttons a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem 1rem;
  border-radius:999px;
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
  border:1px solid rgba(10,40,84,.18);
}

/* Slider container */

.work-slider {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;

}

/* Window containing the images */

.work-slider-window {
  overflow: hidden;
  border-radius: 12px;
  touch-action: pan-y;

}

/* Row of images */

.work-slides {
  display: flex;
  gap: 12px;
  transition: transform .4s ease;
  will-change: transform;

}

/* Individual images */

.work-slide {
  flex: 0 0 calc((100% - 36px) / 4);
  aspect-ratio: 4 / 2.7;
  overflow: hidden;
  border-radius: 10px;

}

.work-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

}

/* Arrows */

.slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: none;
  border-radius: 50%;
  background: rgba(5, 29, 61, .9);
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;

}

.slider-arrow:hover {
  background: var(--spray);

}

.slider-prev {
  left: -20px;

}

.slider-next {
  right: -20px;

}

/* Tablet */

@media (max-width: 900px) {
  .work-slide {
    flex-basis: calc((100% - 12px) / 2);

  }

  .slider-prev {
    left: 10px;

  }

  .slider-next {
    right: 10px;

  }

}

/* Mobile */

@media (max-width: 600px) {
  .work-slider {
    margin: 0 10px;

  }

  .work-slide {
    flex-basis: 100%;
    aspect-ratio: 4 / 3;

  }

  .slider-arrow {
    width: 36px;
    height: 36px;
    font-size: 20px;

  }

}

/* Before & after comparison slider — lives inside a normal .work-slide box,
   so it's sized and moved by the carousel exactly like every other slide. */

.ba-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;

}

.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;

}

.ba-before {
  clip-path: inset(0 50% 0 0);

}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  transform: translateX(-50%);
  pointer-events: none;

}

.ba-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 6px rgba(0, 0, 0, .45);

}

.ba-handle-circle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);

}

.ba-label {
  position: absolute;
  top: 10px;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.7), 0 0 12px rgba(0,0,0,.5);
  pointer-events: none;

}

.ba-label-before { left: 10px; }
.ba-label-after { right: 10px; }

/* Standalone before/after grid — sits centered between the
   "Our recent work" heading and the swipeable gallery below it. */

.ba-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  max-width: 1100px;
  margin: 0 auto var(--space-4);

}

.ba-card {
  aspect-ratio: 4 / 2.7;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(10, 40, 84, 0.06), 0 8px 20px rgba(10, 40, 84, 0.15);

}

@media (max-width: 900px) {
  .ba-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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









  /* REVIEWS */

  .reviews .wrap{max-width:1160px;}

  .reviews-head{
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    width:100%;
    margin-bottom:var(--space-4);
  }

  .reviews-head .rating-badge{
    margin-left:0;
    margin-right:auto;
  }

  .reviews-head .trustindex-widget-wrap{
    margin:0 auto 0 0;
    flex:1;
    min-width:0;
    max-width:640px;
  }

  .reviews-head .google-link{
    margin-left:auto;
  }

  .reviews-head-links{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:.5rem;
    margin-left:auto;
  }
  .reviews-head-links .google-link{
    margin-left:0;
  }

  .rating-badge{
    display:flex; 
    align-items:center; 
    gap:var(--space-3);}

  .rating-number{
    font-family:var(--font-display); 
    font-size:3rem; 
    font-weight:700; 
    line-height:1;}

  .rating-meta{
  font-size:.9rem; 
  color:var(--ink-soft);}

  .stars{
    color:var(--spray); 
    display:flex; gap:2px; 
    margin-bottom:.2rem;}

  .stars svg{
    width:16px; 
    height:16px;}

  .google-link{
    display:inline-flex; 
    align-items:center; 
    gap:.5rem; 
    text-decoration:none; 
    font-weight:600;
    color:var(--ink); 
    border-bottom:1.5px solid var(--spray); 
    padding-bottom:2px; 
    font-size:.95rem;

  }

  .review-grid{
    display:grid; 
    grid-template-columns:repeat(3, 1fr); 
    gap:var(--space-3);
  }

  .review-card{
    background:var(--offwhite); 
    border:1px solid #D0D7E3; 
    border-radius:var(--radius);
    padding:var(--space-3); 
    display:flex; 
    flex-direction:column; 
    gap:.7rem;
    box-shadow:0 2px 4px rgba(10, 40, 84, 0.06), 0 8px 20px rgba(10, 40, 84, 0.15);
    transition:transform .2s ease, box-shadow .2s ease;

  }

  .review-card:hover{
    transform:translateY(-4px);
    box-shadow:0 4px 8px rgba(10, 40, 84, 0.1), 0 12px 32px rgba(10, 40, 84, 0.2);

  }

  .review-card .stars{margin-bottom:0;}
  .review-card p{color:var(--ink); font-size:.98rem; margin:0;}
  .review-person{display:flex; align-items:center; gap:.7rem; margin-top:auto; padding-top:.5rem;}
  .review-avatar{
    width:36px; 
    height:36px; 
    border-radius:50%; 
    background:var(--concrete-dark);
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-family:var(--font-display);
    font-weight:600; 
    color:var(--ink-soft); 
    flex-shrink:0;

  }

  .review-name{font-weight:600; font-size:.9rem;}
  .review-sub{font-size:.8rem; color:var(--ink-soft);}



















  /* CONTACT */

  .contact{background:var(--concrete);}

  /* FAQ chat widget */
  .faqbot{position:fixed; right:1.25rem; bottom:1.25rem; z-index:1200;}

  .faqbot-toggle{
    width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
    background:var(--spray); color:#fff; box-shadow:var(--shadow);
    display:flex; align-items:center; justify-content:center;
    transition:background .15s ease, transform .15s ease;
  }
  .faqbot-toggle:hover{background:var(--spray-deep); transform:translateY(-2px);}
  .faqbot-toggle svg{width:26px; height:26px;}
  .faqbot-icon-close{display:none;}
  .faqbot-toggle[aria-expanded="true"] .faqbot-icon-open{display:none;}
  .faqbot-toggle[aria-expanded="true"] .faqbot-icon-close{display:block;}

  .faqbot-panel{
    position:absolute; right:0; bottom:72px;
    width:340px; max-width:calc(100vw - 2rem);
    height:min(480px, 70vh);
    background:var(--offwhite); border-radius:var(--radius-lg);
    box-shadow:var(--shadow); border:1px solid var(--line);
    display:flex; flex-direction:column; overflow:hidden;
  }
  .faqbot-panel[hidden]{display:none;}

  .faqbot-header{
    background:var(--ink); color:var(--white); padding:.9rem 1rem;
    display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem;
    flex-shrink:0;
  }
  .faqbot-header strong{display:block; font-family:var(--font-display); font-size:.98rem;}
  .faqbot-header span{display:block; font-size:.78rem; color:rgba(255,255,255,.7); margin-top:.1rem;}
  .faqbot-close{
    background:none; border:none; color:var(--white); font-size:1.4rem; line-height:1;
    cursor:pointer; padding:0 .2rem;
  }

  .faqbot-messages{
    flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem;
  }
  .faqbot-msg{
    max-width:85%; padding:.55rem .8rem; border-radius:12px; font-size:.9rem; line-height:1.45;
  }
  .faqbot-msg p{margin:0; font-size:inherit; color:inherit; max-width:none;}
  .faqbot-msg.bot{
    background:var(--concrete-dark); color:var(--ink); align-self:flex-start; border-bottom-left-radius:2px;
  }
  .faqbot-msg.user{
    background:var(--spray); color:#fff; align-self:flex-end; border-bottom-right-radius:2px;
  }
  .faqbot-msg a{color:inherit; font-weight:600; text-decoration:underline;}

  .faqbot-inline-chips{
    display:flex; flex-wrap:wrap; gap:.4rem; align-self:flex-start; max-width:100%;
  }
  .faqbot-chip{
    border:1px solid var(--line); background:#fff; color:var(--ink);
    border-radius:999px; padding:.35rem .75rem; font-size:.8rem; cursor:pointer;
    font-family:var(--font-body);
  }
  .faqbot-chip:hover{border-color:var(--spray); color:var(--spray-deep);}

  .faqbot-form{
    display:flex; gap:.5rem; padding:.75rem; border-top:1px solid var(--line); flex-shrink:0;
  }
  .faqbot-form input{
    flex:1; font-family:var(--font-body); font-size:.9rem; padding:.6rem .75rem;
    border:1.5px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink);
  }
  .faqbot-form input:focus{outline:2px solid var(--spray); outline-offset:1px; border-color:var(--spray);}
  .faqbot-form button{
    width:40px; height:40px; border-radius:50%; border:none; background:var(--spray); color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  .faqbot-form button:hover{background:var(--spray-deep);}
  .faqbot-form button svg{width:18px; height:18px;}

  @media (max-width:480px){
    .faqbot{right:.75rem; bottom:calc(.75rem + env(safe-area-inset-bottom));}
    .faqbot-panel{
      position:fixed; left:.5rem; right:.5rem; bottom:5.25rem;
      width:auto; max-width:none; height:min(460px, 65vh);
      height:min(560px, 72dvh);
      border-radius:16px;
    }
    .faqbot-header{ padding:.75rem .9rem; }
    .faqbot-messages{ padding:.85rem; gap:.5rem; }
    .faqbot-msg{ max-width:88%; font-size:.88rem; }
    .faqbot-chip{ font-size:.78rem; padding:.32rem .65rem; }
    .faqbot-form{ padding:.6rem .75rem; padding-bottom:max(.6rem, env(safe-area-inset-bottom)); }
    /* 16px prevents iOS Safari auto-zooming the page on focus */
    .faqbot-form input{ font-size:16px; }
  }

  .contact .wrap{max-width:1080px;}
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); align-items:flex-start; max-width:1080px; margin:0 auto;}
  .contact-card{background:rgba(77, 79, 85, 0.5); border:1px solid rgba(255,255,255,0.1); border-radius:18px; padding:var(--space-4); color:var(--white);}
  .contact-row{display:flex; gap:var(--space-2); align-items:flex-start; padding:var(--space-2) 0; border-bottom:1px solid rgba(255,255,255,0.1);}
  .contact-row:last-child{border-bottom:none;}
  .contact-row svg{width:22px; height:22px; color:var(--spray-light); flex-shrink:0; margin-top:.15rem;}
  .contact-row h3{font-size:1rem; margin-bottom:.15rem; font-family:var(--font-body); font-weight:600; color:var(--white);}
  .contact-row p{margin:0; font-size:.92rem; color:rgba(255,255,255,0.85);}
  .contact-row a{color:var(--gold); text-decoration:none; font-weight:600;}
  .contact-row a:hover{color:#e8c860; text-decoration:underline;}
  .hours-table{width:100%; border-collapse:collapse; margin-top:var(--space-1);}
  .hours-table td{padding:.35rem 0; font-size:.92rem; border-bottom:1px dashed var(--line);}
  .hours-table td:last-child{text-align:right; font-weight:600;}
  .hours-table td:first-child{padding-right:30px;}

  #coverageMap{
    width:100%;
    height:420px;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    display:block;

  }

  .subpage-map-wrap #coverageMap{
    border:none;
    box-shadow:none;
  }








  /* FOOTER */

  footer{
    position:relative;
    background: linear-gradient(160deg, var(--ink) 0%, var(--spray-deep) 140%);
    color:rgba(255,255,255,0.7);
    padding:var(--space-4) 0 var(--space-3);
    border-top:3px solid var(--gold);
  }

  .footer-grid{
    display:grid;
    grid-template-columns: 1.3fr 1fr 1.2fr;
    gap:var(--space-3);
    align-items:start;
    padding-bottom:var(--space-3);
  }

  .footer-brand img{
    display:block;
    margin-bottom:var(--space-2);
  }

  .footer-tagline{
    color:rgba(255,255,255,0.68);
    font-size:.92rem;
    line-height:1.6;
    max-width:26ch;
    margin:0 0 var(--space-2);
  }

  .footer-col-title{
    font-family:var(--font-display);
    font-weight:700;
    color:var(--white);
    font-size:.82rem;
    letter-spacing:.09em;
    text-transform:uppercase;
    margin:0 0 var(--space-2);
    position:relative;
    padding-bottom:.6rem;
  }

  .footer-col-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:28px;
    height:2px;
    background:var(--gold);
  }

  .footer-links{
    display:flex;
    flex-direction:column;
    gap:.65rem;
    list-style:none;
    padding:0;
    margin:0;
  }

  .footer-links a{
    color:rgba(255,255,255,0.7); 
    text-decoration:none; 
    font-size:.9rem;
    transition:color .15s ease, padding-left .15s ease;
  }

  .footer-links a:hover{
    color:var(--gold);
  }

  .footer-contact{
    display:flex;
    flex-direction:column;
    gap:.55rem;
    font-size:.9rem;
  }

  .footer-contact a{
    color:rgba(255,255,255,0.85);
    text-decoration:none;
    font-weight:600;
  }

  .footer-contact a:hover{
    color:var(--gold);
  }

  .footer-contact span.footer-label{
    display:block;
    color:rgba(255,255,255,0.5);
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:.15rem;
  }

  /* Compact variant: label + value share one line instead of stacking,
     to keep the footer shorter. */
  .footer-contact-compact div{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:.35rem;
  }

  .footer-contact-compact .footer-label{
    display:inline;
    margin-bottom:0;
    white-space:nowrap;
  }

  .footer-social{
    display:flex;
    gap:.7rem;
    margin-top:var(--space-2);
  }

  .footer-social a{
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .15s ease, opacity .15s ease;
  }

  .footer-social a:hover{
    transform:translateY(-2px);
    opacity:.8;
  }

  .footer-social img{
    width:30px;
    height:30px;
    object-fit:contain;
  }

  .footer-bottom{
    padding-top:var(--space-3); 
    border-top:1px solid rgba(255,255,255,0.14);
    font-size:.8rem; 
    color:rgba(255,255,255,0.55);
    display:flex; 
    justify-content:space-between; 
    flex-wrap:wrap; 
    gap:.5rem;

  }

  @media (max-width:760px){
    .footer-grid{
      grid-template-columns: repeat(2, 1fr);
      gap:var(--space-3);
    }
  }

  @media (max-width:560px){
    .footer-grid{
      grid-template-columns: 1fr;
      gap:var(--space-3);
    }
  }













  /* RESPONSIVE */

  @media (max-width: 960px){
    .services-grid{grid-template-columns:repeat(2,1fr);}
    .review-grid{grid-template-columns:1fr 1fr;}
    .quote-grid{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}

  }

  @media (max-width: 760px){
    .nav-links, .nav-phone-text{display:none;}
    .nav-links.open{

      display:flex; 
      position:absolute; 
      top:100%; 
      left:0; 
      right:0; 
      background:var(--white);
      flex-direction:column; 
      padding:var(--space-3); 
      border-bottom:1px solid var(--line); 
      gap:var(--space-2);

    }

    .burger{display:block;}
    section{padding:var(--space-5) 0;}
    .services-grid{grid-template-columns:1fr 1fr;}
    .review-grid{grid-template-columns:1fr;}
    .form-row{grid-template-columns:1fr;}
    .checkbox-grid{grid-template-columns:1fr;}

    .reviews-head{
      flex-direction:column;
      align-items:stretch;
      justify-content:flex-start;
      gap:var(--space-2);
    }

    .reviews-head .trustindex-widget-wrap{
      max-width:100%;
      margin:0;
    }

    .reviews-head-links{
      align-items:flex-start;
      margin-left:0;
    }

    .reviews-head .google-link{
      margin-left:0;
    }

  }

  @media (max-width: 480px){
    .services-grid{grid-template-columns:1fr;}
    .hero-actions{flex-direction:column; align-items:stretch;}
    .quote-form{padding:var(--space-3);}

  }




  /* MOBILE CONTACT / MAP FIX */
  @media (max-width: 760px){
    .contact .wrap{
      width:100%;
      max-width:100%;
      padding-left:var(--space-2);
      padding-right:var(--space-2);
    }
    .contact-grid{
      display:flex;
      flex-direction:column;
      width:100%;
      max-width:100%;
      gap:var(--space-4);
      margin:0;
    }
    .contact-grid > *,
    .contact-card{
      width:100%;
      max-width:100%;
      min-width:0;
    }
    .contact-card{
      overflow:hidden;
    }
    .contact-row{
      min-width:0;
    }
    .contact-row > div{
      min-width:0;
      max-width:100%;
    }
    .contact-row a,
    .contact-row p{
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    .contact-grid > div:last-child{
      width:100%;
      min-width:0;
    }
    #coverageMap{
      width:100%;
      max-width:100%;
      height:360px;
      margin:0;
    }
  }

/* MOBILE FIXES */

html,

body{
  width:100%;
  max-width:100%;
  overflow-x:clip;

}

*,
*::before,
*::after{
  box-sizing:border-box;
}

.contact-card,
.contact-grid,
.contact .wrap{
  max-width:100%;
}

.hero-actions .btn{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;

}

.hero-actions img{
  width:20px;
  height:20px;
  object-fit:contain;

}





  /* WATERY FULL-PAGE GRADIENT */

html, body {
  min-height: 100%;

}

body {
  background-image: url("../Design/newbg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;

}

/* Let the gradient show through, with a faint tint per section for gentle
   separation without breaking the single continuous feel. */

.services {
  background: rgba(255,255,255,.32);

}

.work-slider-section {
  background: rgba(255,255,255,.32);

}

.reviews {
  background: rgba(255,255,255,.32);

}

.trustindex-widget-wrap {
  max-width: 1100px;
  margin: var(--space-3) auto 0;
}

.contact {
  background: rgba(10,40,84,.05);

}

  .quote {
    color: var(--ink);

  }

  .quote h2,
  .quote p.section-lead,
  .quote p,
  .quote-list li {
    color: var(--ink);

  }

  footer {
    background: linear-gradient(160deg, rgba(10,40,84,0.94) 0%, rgba(0,82,163,0.90) 140%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

  }

  @media (max-width: 760px) {
    body::before {
      background-attachment: scroll;

    }

  }





/* Premium header/logo updates */
.brand img {
  max-width: 180px;
  height: auto;
}

.hero-business-name {
  color: var(--white);
  font-size: clamp(2.5rem, 6vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 auto var(--space-1);
  text-align: center;
}

.hero-actions {
  display:none;
}


/* Premium header refinements */
header {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav {
  min-height: 92px;
}

.brand img {
  height: 82px;
  width: 82px;
  object-fit: contain;
  border-radius: 0;
}

.nav-links {
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}

.nav-links li {
  display:flex;
  align-items:center;
}

.nav-links li:not(:last-child)::after {
  content:"";
  height:24px;
  width:1px;
  background:rgba(0,0,0,.18);
}

.nav-links a {
  padding: .65rem 1rem;
}

.social-icons {
  order: -1;
}

.hero {
  position:relative;
  overflow:hidden;
}

.hero-business-name {
  font-size:clamp(2.4rem,5vw,4.2rem);
  font-weight:800;
  letter-spacing:-.04em;
}

.hero-quote-btn {
  margin-top:0;
}

.hero-cta-row{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:1.8rem;
  position:relative;
  z-index:2;
}

.hero-trust-row {
  position:relative;
  z-index:2;
  margin-top:1.25rem;
  gap:1.5rem;
}

.hero-trust-row .hero-icon-item {
  min-width:120px;
}

@media (max-width: 760px) {
  .hero-trust-row {
    gap:.9rem;
  }
  .hero-trust-row .hero-icon-item {
    min-width:90px;
    font-size:.75rem;
  }
  .showcase-buttons {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  /* Shorten the feel of the mobile hero: put the contact buttons
     right after the headline/icons, ahead of the longer description
     paragraph, instead of visitors having to scroll past it first. */
  .hero .wrap { order:0; }
  .hero-cta-row {
    order:1;
    margin-top:1.4rem;
  }
  .hero-description {
    order:2;
    margin-top:1.4rem;
  }
  .hero-trust-row { order:3; }
}

@media (max-width: 480px) {
  .showcase-buttons {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}



/* Fix Driveways & Patios featured card sizing */
.service-card {
  overflow: hidden;
}

.service-card p {
  overflow-wrap: break-word;
  word-wrap: break-word;
  line-height: 1.5;
}

.service-card h3 {
  margin-top: 1rem;
}

.ba-slider {
  width: 100%;
  max-width: 100%;
}

/* Final premium header tuning */
header {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav {
  min-height: 78px;
}

.brand img {
  height: 68px;
  width: auto;
}

.nav-links {
  background: transparent;
  border: none;
  border-radius: 0;
  gap: 0;
}

.nav-links a {
  padding: .5rem .9rem;
  font-weight: 600;
}

.nav-links li:not(:last-child)::after {
  height: 20px;
  background: rgba(0,0,0,.22);
}

.social-icons {
  order: initial;
  display:flex;
  align-items:center;
  gap:.55rem;
}

.social-icons img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}


/* Scroll reactive transparent header */
header {
  background: transparent;
  box-shadow: none;
  transition: background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}
header.scrolled {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
}
.social-icons img {
  width: 28px;
  height: 28px;
}

/* Keep before/after cards contained */
.service-ba {
  height: 260px;
  max-height: 260px;
  overflow: hidden;
}
.service-ba img {
  height: 260px;
  object-fit: cover;
}
.service-card:has(.service-ba) {
  overflow: hidden;
}
.service-card:has(.service-ba) p {
  margin-bottom: 1rem;
}


/* Showcase featured split layout */
.showcase-container{
  max-width:1160px;
  margin:0 auto;
  padding:0 var(--space-3);
}
.showcase-featured{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2.5rem;
  margin-top:var(--space-5);
  margin-bottom:1.5rem;
}
.showcase-intro{
  max-width:640px;
  text-align:center;
}
.showcase-eyebrow{
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--spray-deep);
  margin-bottom:.7rem;
}
.showcase-intro h2{
  font-size:clamp(2.2rem,4vw,3.2rem);
  margin-bottom:1rem;
}
.showcase-intro p{
  max-width:52ch;
  font-size:1rem;
  line-height:1.7;
  margin:0 auto 1rem;
}
.showcase-buttons a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:.5rem .9rem;
  border:1px solid rgba(10,40,84,.16);
  border-radius:999px;
  background:rgba(255,255,255,.5);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:.75rem;
  line-height:1.1;
  font-weight:700;
  text-decoration:none;
  text-align:center;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.showcase-buttons a:hover{
  transform:translateY(-2px);
  background:var(--white);
  border-color:var(--spray);
}
.showcase-featured-sliders{
  display:flex;
  flex-direction:row;
  gap:1.5rem;
  min-width:0;
  width:100%;
}
.showcase-featured-sliders .ba-card{
  flex:1 1 0;
  min-width:0;
  aspect-ratio:4 / 2.35;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(10,40,84,.14);
}
.showcase-gallery-heading{
  text-align:center;
  margin:0 auto 1.5rem;
}
.showcase-gallery-heading h3{
  font-size:1.7rem;
  margin-bottom:.35rem;
}
.showcase-gallery-heading p{
  margin:0 auto;
  color:#5c6b7a;
}
@media (max-width:900px){
  .showcase-intro{
    max-width:720px;
  }
  .showcase-featured-sliders{
    max-width:900px;
    width:100%;
  }
}
@media (max-width:600px){
  .showcase-container{
    padding:0 var(--space-2);
  }
  .showcase-featured{
    margin-bottom:1.5rem;
  }
  .showcase-buttons{
    grid-template-columns:1fr 1fr;
  }
  .showcase-featured-sliders{
    flex-direction:column;
  }
  .showcase-featured-sliders .ba-card{
    aspect-ratio:4 / 3;
    flex:0 0 auto;
    width:100%;
  }
}


/* ======================================================
   FLOATING WHATSAPP BUTTON
   Stacked directly above the FAQ chat bubble (bottom-right)
   so the two never overlap on any screen size.
====================================================== */
.whatsapp-float{
  position:fixed;
  right:1.25rem;
  bottom:5.25rem;
  z-index:1150;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow);
  transition:transform .15s ease, background .15s ease;
}
.whatsapp-float:hover{
  background:#1EBE5A;
  transform:translateY(-2px);
}
.whatsapp-float svg{ width:28px; height:28px; }

@media (max-width:480px){
  .whatsapp-float{
    right:.75rem;
    bottom:calc(4.75rem + env(safe-area-inset-bottom));
    width:52px;
    height:52px;
  }
}

/* ======================================================
   DESKTOP HERO — bigger, closer to square.
   Mobile (<=760px) is left exactly as-is.
====================================================== */
@media (min-width:900px){
  .hero{
    min-height: min(86vh, 820px);
  }
}

/* ======================================================
   SUBPAGE HERO — used by Services and Areas Covered pages
====================================================== */
.subpage-hero{
  background: linear-gradient(160deg, var(--ink) 0%, var(--spray-deep) 140%);
  color: var(--white);
  text-align:center;
  padding: var(--space-6) var(--space-3) var(--space-5);
}
.subpage-eyebrow{
  display:inline-block;
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: var(--space-2);
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.subpage-hero h1{
  color:var(--white);
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: var(--space-2);
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.subpage-hero .subpage-lead{
  max-width:640px;
  margin:0 auto;
  color:rgba(255,255,255,.8);
  font-size:1.05rem;
  line-height:1.65;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}

.area-hero-contact{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.1rem;
  margin-top:1.6rem;
}
.area-hero-whatsapp-line{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--white);
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.area-hero-whatsapp-line:hover{
  text-decoration:underline;
}
.area-hero-contact-box{
  display:inline-flex;
  align-items:center;
  padding:.55rem 1.1rem;
  border:1.5px solid var(--line-on-dark);
  border-radius:999px;
  background:rgba(10,40,84,.35);
  color:var(--white);
  font-family:var(--font-display);
  font-weight:600;
  font-size:.82rem;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.area-hero-contact-box:hover{
  background:rgba(255,255,255,.18);
  border-color:var(--white);
  transform:translateY(-2px);
}
@media (max-width:600px){
  .area-hero-contact{
    flex-direction:column;
    gap:.9rem;
  }
}

/* ======================================================
   SERVICE HERO — individual service detail pages
   (photo background, rating badge, contact CTAs)
====================================================== */
.service-hero{
  position:relative;
  background-size:cover;
  background-position:center;
  background-color:var(--ink);
  color:var(--white);
  overflow:hidden;
}
.service-hero-scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(160deg, rgba(10,40,84,.32) 0%, rgba(0,82,163,.2) 140%);
}
.service-hero-inner{
  position:relative;
  z-index:1;
  text-align:center;
  padding: var(--space-6) var(--space-3) var(--space-5);
}
.service-hero-eyebrow{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
  margin-bottom: var(--space-2);
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}
.service-hero-eyebrow-line{
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: rgba(255,255,255,.82);
}
.service-hero-eyebrow-location{
  color: var(--gold);
}
.service-hero-inner h1{
  color:var(--white);
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: var(--space-3);
}
.service-hero-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.rating-badge--light .rating-number{ color:var(--white); }
.rating-badge--light .rating-meta{ color:rgba(255,255,255,.75); }
.rating-badge--light .stars{ color:var(--spray-light); }
.service-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center;
}
@media (max-width:600px){
  .service-hero-meta{ flex-direction:column; gap:var(--space-3); }
}

/* ======================================================
   SERVICE DETAIL — two column text + image layout
   (used below the service-hero on each service page)
====================================================== */
.service-detail-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-5);
  align-items:center;
  text-align:left;
}
.service-detail-text p{ max-width:none; }
.service-detail-grid .service-detail-media{
  width:100%;
  max-width:none;
  margin:0 0 .75rem;
}
.service-detail-grid .service-detail-caption{
  text-align:left;
  margin:0;
}
.service-detail-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  margin-top:var(--space-2);
}
@media (max-width:860px){
  .service-detail-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
  .service-detail-text{ order:2; }
  .service-detail-grid .service-detail-media{ margin:0 auto .75rem; }
  .service-detail-grid .service-detail-caption{ text-align:center; }
}

/* ======================================================
   AREAS COVERED — hub grid
====================================================== */
.areas-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-3);
}
.area-card{
  background:var(--offwhite);
  border:1px solid #D0D7E3;
  border-radius:var(--radius-lg);
  padding:var(--space-3);
  box-shadow:0 2px 4px rgba(10,40,84,.06), 0 8px 20px rgba(10,40,84,.15);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex;
  flex-direction:column;
  scroll-margin-top:110px;
}
.area-card:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 8px rgba(10,40,84,.1), 0 12px 32px rgba(10,40,84,.2);
}
.area-card .area-postcode{
  display:block;
  font-family:var(--font-display);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--spray-deep);
  margin-bottom:.5rem;
}
.area-card h3{ font-size:1.2rem; margin-bottom:.4rem; }
.area-card p{ font-size:.95rem; flex:1; }
.area-card .btn{ align-self:flex-start; margin-top:.5rem; }

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

.postcode-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 var(--space-4);
  list-style:none;
  padding:0;
  margin:0 auto;
  max-width:760px;
}
.postcode-list li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--space-2);
  padding:.65rem 0;
  border-bottom:1px solid var(--line);
  font-size:1rem;
}
.postcode-list li strong{
  color:var(--ink);
  font-weight:600;
}
.postcode-list li strong a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px dashed rgba(10,40,84,.35);
  transition:color .15s ease, border-color .15s ease;
}
.postcode-list li strong a:hover{
  color:var(--spray-deep);
  border-bottom-color:var(--spray-deep);
}
.postcode-list li span{
  color:var(--ink-soft);
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
}
@media (max-width:600px){
  .postcode-list{ grid-template-columns:1fr; }
}

.coverage-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-4);
  align-items:start;
  max-width:1080px;
  margin:0 auto var(--space-5);
}
.coverage-split .postcode-list{
  grid-template-columns:1fr;
  max-width:none;
  margin:0;
}
.coverage-split .postcode-list li{
  padding:.4rem 0;
  font-size:.85rem;
  gap:.75rem;
}
.coverage-split .postcode-list li strong{
  font-size:.85rem;
}
.coverage-split .postcode-list li span{
  font-size:.75rem;
}
.coverage-map-wrap{
  max-width:460px;
  margin:0 auto;
  width:100%;
}
.location-service-list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.5rem 1.5rem;
  max-width:820px;
  margin:1.1rem auto 0;
  padding:0;
  list-style:none;
  text-align:left;
}
.location-service-list li{
  border-bottom:1px solid var(--line);
  padding:.5rem 0;
}
.location-service-list a{
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
  font-size:.9rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.4rem;
  transition:color .15s ease;
}
.location-service-list a:hover{
  color:var(--spray-deep);
}
.location-service-list a svg{
  width:14px;
  height:14px;
  flex-shrink:0;
  opacity:.6;
}
@media (max-width:760px){
  .location-service-list{
    grid-template-columns:1fr;
  }
}

#postcodes{
  scroll-margin-top:110px;
}
@media (max-width:900px){
  .coverage-split{
    grid-template-columns:1fr;
    max-width:560px;
    gap:var(--space-3);
  }
  .coverage-map-wrap{
    max-width:100%;
  }
}

/* ======================================================
   OUR SERVICES — hub grid
====================================================== */
.services-hub-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-3);
}
.service-hub-card{
  background:var(--offwhite);
  border:1px solid #D0D7E3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 2px 4px rgba(10,40,84,.06), 0 8px 20px rgba(10,40,84,.15);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex;
  flex-direction:column;
}
.service-hub-card:hover{ transform:translateY(-4px); }
.service-hub-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
}
.service-hub-card-body{
  padding:var(--space-3);
  display:flex;
  flex-direction:column;
  flex:1;
}
.service-hub-card h3{ font-size:1.2rem; margin-bottom:.4rem; }
.service-hub-card p{ font-size:.95rem; flex:1; }
.service-hub-card .btn{ align-self:flex-start; margin-top:1rem; }

@media (max-width:760px){ .services-hub-grid{ grid-template-columns:1fr; } }

/* ======================================================
   SERVICE / AREA DETAIL PAGES
====================================================== */
.service-detail-media{
  width:100%;
  max-width:900px;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:var(--radius-lg);
  margin:0 auto var(--space-2);
  box-shadow:var(--shadow);
  display:block;
}
.service-detail-caption{
  text-align:center;
  font-size:.85rem;
  color:var(--ink-soft);
  margin:0 auto var(--space-4);
}

.subpage-map-section{ padding: var(--space-2) 0 var(--space-6); }
.subpage-map-wrap{ max-width:1080px; margin:0 auto; }
.subpage-map-wrap p{ max-width:none; }

/* Mini reviews / social / contact strip — reused on every
   service and area subpage so visitors are never more than
   one section away from getting in touch. */
.mini-cta{
  background:var(--concrete);
  padding:var(--space-5) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.mini-cta-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:var(--space-3);
  max-width:1080px;
  margin:0 auto;
  align-items:stretch;
}
.mini-cta-block{
  background:var(--offwhite);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-3);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow:0 2px 4px rgba(10,40,84,.05), 0 8px 20px rgba(10,40,84,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.mini-cta-block:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 10px rgba(10,40,84,.08), 0 14px 30px rgba(10,40,84,.14);
}
.mini-cta-block h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 var(--space-2);
  position:relative;
  padding-bottom:.65rem;
  width:auto;
}
.mini-cta-block h3::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:26px;
  height:2px;
  background:var(--spray);
}

/* Reviews block */
.mini-cta-reviews .rating-number{
  font-family:var(--font-display);
  font-size:2.1rem;
  font-weight:700;
  color:var(--ink);
  line-height:1;
  margin-bottom:.35rem;
}
.mini-cta-reviews .stars{
  justify-content:center;
  margin-bottom:.35rem;
}
.mini-cta-reviews .rating-meta{
  margin-bottom:var(--space-2);
}
.mini-cta-reviews .google-link{
  margin-top:auto;
}

/* Social block */
.mini-cta-social p{
  font-size:.87rem;
  color:var(--ink-soft);
  margin:0 0 var(--space-2);
}
.mini-cta-social-icons{
  display:flex;
  gap:.85rem;
  justify-content:center;
  margin-top:auto;
}
.mini-cta-social-icons a{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(10,40,84,.08);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mini-cta-social-icons a:hover{
  transform:translateY(-3px);
  border-color:var(--spray);
  box-shadow:0 8px 16px rgba(10,40,84,.16);
}
.mini-cta-social-icons img{ width:20px; height:20px; object-fit:contain; }

/* Contact block */
.mini-cta-contact-list{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  width:100%;
  margin-top:auto;
}
.mini-cta-contact-list a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  color:var(--spray-deep);
  font-weight:600;
  text-decoration:none;
  font-size:.92rem;
  transition:color .15s ease;
}
.mini-cta-contact-list a:hover{
  color:var(--ink);
}
.mini-cta-contact-list svg{
  width:16px;
  height:16px;
  flex-shrink:0;
  color:var(--spray);
}

@media (max-width:760px){
  .mini-cta-grid{ grid-template-columns:1fr; gap:var(--space-3); }
}

/* ======================================================
   BREADCRUMBS — visible nav on every subpage
====================================================== */
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  align-items:center;
  padding-top:var(--space-2);
  font-size:.85rem;
  color:var(--ink-soft);
}
.breadcrumbs a{
  color:var(--spray-deep);
  text-decoration:none;
  font-weight:600;
}
.breadcrumbs a:hover{ text-decoration:underline; }
.breadcrumbs .crumb-sep{ color:var(--line); }
.breadcrumbs [aria-current="page"]{ color:var(--ink-soft); }

/* Areas page now uses a real h2 per town inside the card grid */
.area-card h2{
  font-size:1.2rem;
  margin-bottom:.4rem;
}

/* ======================================================
   FAQ ACCORDION — used on Areas Covered page (and reusable
   on the homepage) with native <details>/<summary>
====================================================== */
.faq-list{
  max-width:720px;
  margin:0 auto;
}
.faq-item{
  border-bottom:1px solid var(--line);
  padding:1rem 0;
}
.faq-item summary{
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.02rem;
  color:var(--ink);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-size:1.3rem;
  color:var(--spray-deep);
  flex-shrink:0;
  transition:transform .15s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{
  margin:.75rem 0 0;
  font-size:.95rem;
}

/* ======================================================
   SERVICE TILES — 3x3 image + overlay grid on the
   "Our Services" hub page
====================================================== */
.service-tiles-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-3);
  width:100%;
}
.service-tile{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  border-radius:20px;
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 2px 4px rgba(10,40,84,.06), 0 8px 20px rgba(10,40,84,.15);
  transition:transform .2s ease, box-shadow .2s ease;
  background:var(--concrete-dark);
}
.service-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 8px rgba(10,40,84,.1), 0 14px 34px rgba(10,40,84,.22);
}
.service-tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.service-tile:hover img{
  transform:scale(1.06);
}
.service-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,29,61,0) 28%, rgba(5,29,61,.55) 62%, rgba(5,29,61,.94) 100%);
}
.service-tile-desc{
  position:absolute;
  left:0; right:0; bottom:58px;
  padding:0 1.1rem;
  color:rgba(255,255,255,.94);
  font-size:.85rem;
  line-height:1.45;
  z-index:2;
}
.service-tile-name{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  background:transparent;
  color:#fff;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.92rem;
  padding:.85rem 1.1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  transition:color .15s ease;
}
.service-tile:hover .service-tile-name{
  background:transparent;
  color:var(--spray-light);
}
.service-tile-name svg{ width:16px; height:16px; flex-shrink:0; }

@media (max-width:900px){
  .service-tiles-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .service-tiles-grid{ grid-template-columns:1fr; }
  .service-tile{ aspect-ratio:4/3; }
  .service-tile-desc{ bottom:52px; }
}

/* ======================================================
   HOME HERO — servicing location badge (above main heading)
====================================================== */
.hero-location-badge{
  display:inline-block;
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--gold);
  margin:0 0 var(--space-1);
  position:relative;
  z-index:2;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}

/* ======================================================
   NAV — "Our Services" dropdown
====================================================== */
.nav-links{
  overflow:visible;
}
.nav-dropdown{
  position:relative;
}
.nav-dropdown-toggle{
  display:flex;
  align-items:center;
  gap:.3rem;
  cursor:pointer;
}
.nav-caret{
  width:11px;
  height:11px;
  flex-shrink:0;
  transition:transform .2s ease;
}
.nav-dropdown:hover .nav-caret{
  transform:rotate(180deg);
}
.nav-dropdown-menu{
  display:none;
  flex-direction:column;
  gap:.1rem;
  list-style:none;
  margin:0;
  padding:.4rem;
  position:absolute;
  top:100%;
  left:0;
  min-width:250px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  z-index:1001;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open-dropdown .nav-dropdown-menu{
  display:flex;
}
.nav-dropdown-menu li{
  list-style:none;
}
.nav-dropdown-menu li::after{
  content:none !important;
}
.nav-dropdown-menu a{
  display:block;
  padding:.55rem .7rem;
  border-radius:6px;
  font-size:.9rem;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.nav-dropdown-menu a::after{
  content:none !important;
}
.nav-dropdown-menu a:hover{
  background:var(--concrete-dark);
  color:var(--spray-deep);
}

@media (max-width:760px){
  .nav-links li.nav-dropdown{
    display:block;
  }
  .nav-dropdown-menu{
    display:none;
    position:static;
    box-shadow:none;
    border:none;
    background:transparent;
    padding:.2rem 0 .2rem .9rem;
    min-width:0;
  }
  .nav-dropdown:hover .nav-dropdown-menu{
    display:none;
  }
  .nav-dropdown.open-dropdown .nav-dropdown-menu{
    display:flex;
  }
  .nav-dropdown.open-dropdown .nav-caret{
    transform:rotate(180deg);
  }
}

/* ======================================================
   PORTFOLIO PAGE — "5 most recent jobs" feature:
   one large image slot + a smaller sliding slot cycling
   through 4 more recent-job photos, side by side on
   desktop and stacked on mobile.
====================================================== */
.recent-jobs-layout{
  display:flex;
  gap:1.75rem;
  align-items:stretch;
  max-width:1100px;
  margin:var(--space-4) auto 0;
}

.recent-job-large{
  position:relative;
  flex:1 1 60%;
  min-width:0;
  aspect-ratio:4 / 2.7;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(10,40,84,.14);
}

.recent-job-large img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.recent-job-badge{
  position:absolute;
  top:1rem;
  left:1.1rem;
  color:var(--white);
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 1px 4px rgba(0,0,0,.7), 0 0 14px rgba(0,0,0,.5);
}

/* Editable caption placeholder at the bottom of each large "recent job"
   photo — T fills this in with the real job type &amp; location per job. */
.recent-job-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  padding:1.4rem 1.1rem .9rem;
  background:linear-gradient(0deg, rgba(5,29,61,.88) 0%, rgba(5,29,61,0) 100%);
  color:var(--white);
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
}

.recent-jobs-slider{
  flex:1 1 40%;
  min-width:0;
  max-width:none;
  margin:0;
  height:auto;
}

.recent-jobs-slider .work-slider-window,
.recent-jobs-slider .work-slides,
.recent-jobs-slider .work-slide{
  height:100%;
}

.recent-jobs-slider .work-slide{
  flex:0 0 100%;
  aspect-ratio:auto;
  border-radius:16px;
}

.recent-jobs-slider .slider-arrow{
  width:32px;
  height:32px;
  font-size:16px;
}

.recent-jobs-slider .slider-prev{ left:10px; }
.recent-jobs-slider .slider-next{ right:10px; }

@media (max-width:760px){
  .recent-jobs-layout{
    flex-direction:column;
  }
  .recent-job-large{
    aspect-ratio:4 / 3;
  }
  .recent-jobs-slider{
    aspect-ratio:4 / 3;
  }
}

/* Tighten the gap between the homepage "See our portfolio" teaser and the
   Testimonials section below it — scoped to #services (the homepage's main
   section id) and .portfolio-teaser only, so no other section's spacing
   sitewide is affected. */
#services{
  padding-bottom:var(--space-2);
}
.portfolio-teaser{
  padding-bottom:0;
}

/* "Looking for a trusted ... ?" heading on each service page — smaller than
   the default .section-head-center h2 size, with the location highlighted
   in gold. Scoped to this specific class so no other section heading
   sitewide is affected. */
.section-head-center h2.service-trust-heading{
  font-size:clamp(1rem, 1.7vw, 1.3rem);
  line-height:1.4;
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}
.service-trust-heading .loc{
  color:var(--gold);
}

/* ======================================================
   SKIP LINK — accessibility: lets keyboard users jump past
   the header/nav straight to <main>. Visually hidden until
   focused (i.e. tabbed to), then drops into view.
====================================================== */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:9999;
}
.skip-link:focus{
  left:var(--space-2);
  top:var(--space-2);
  width:auto;
  height:auto;
  padding:.7rem 1.2rem;
  background:var(--ink);
  color:var(--white);
  border-radius:var(--radius);
  font-family:var(--font-display);
  font-weight:600;
  text-decoration:none;
}

/* ======================================================
   BEFORE/AFTER CAPTIONS — short label under each ba-card
   identifying what's shown, the way a portfolio caption does.
====================================================== */
.ba-card{ position:relative; }
.ba-caption{
  display:block;
  margin-top:.6rem;
  text-align:center;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.88rem;
  color:var(--ink-soft);
}

/* ======================================================
   AREA / SERVICE CROSS-LINK CHIPS — reuses .showcase-buttons'
   pill look for "Also serving" and "Popular services" blocks.
====================================================== */
.cross-links-heading{
  text-align:center;
  margin-bottom:1rem;
}

/* ======================================================
   PORTFOLIO FILTER — pill toggles above "More From Our
   Portfolio" that show/hide slides by data-service.
====================================================== */
.portfolio-filter{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  justify-content:center;
  margin-bottom:1.5rem;
}
.portfolio-filter-btn{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.85rem;
  padding:.5rem 1.1rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.portfolio-filter-btn:hover{
  border-color:var(--spray-deep);
}
.portfolio-filter-btn.is-active{
  background:var(--spray-deep);
  border-color:var(--spray-deep);
  color:var(--white);
}
.work-slide.is-filtered-out{
  display:none;
}

/* Single static "process shot" card — same footprint as .ba-card/.ba-slider
   for services where we have a genuine action photo but not a true
   before/after PAIR of the same spot, so we don't fake one. */
.ba-card-static img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:var(--radius2);
}

/* ======================================================
   HEADER SIZE — shrink the header bar and logo further
   than the earlier "final premium header tuning" pass.
====================================================== */
.nav{
  min-height:58px;
}
.brand img{
  height:48px;
  width:auto;
}
.nav-links a{
  padding:.4rem .8rem;
  font-size:.92rem;
}
.nav-phone{
  font-size:.88rem;
}
.nav-phone svg{
  width:16px;
  height:16px;
}

/* ======================================================
   COOKIE CONSENT BANNER
====================================================== */
.cookie-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:2000;
  background:linear-gradient(160deg, rgba(10,40,84,.97) 0%, rgba(0,82,163,.95) 140%);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:1rem var(--space-3);
  box-shadow:0 -4px 20px rgba(10,40,84,.25);
}
.cookie-banner[hidden]{
  display:none;
}
.cookie-banner-inner{
  max-width:1160px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  flex-wrap:wrap;
}
.cookie-banner-inner p{
  margin:0;
  color:rgba(255,255,255,.9);
  font-size:.9rem;
  line-height:1.5;
  max-width:640px;
}
.cookie-banner-inner a{
  color:var(--gold);
  font-weight:600;
}
.cookie-banner-actions{
  display:flex;
  gap:.75rem;
  flex-shrink:0;
}
.cookie-banner-actions .btn{
  padding:.6rem 1.1rem;
  font-size:.88rem;
}
.cookie-banner-actions .btn-ghost{
  border-color:rgba(255,255,255,.4);
  color:var(--white);
}
@media (max-width:600px){
  .cookie-banner-inner{
    flex-direction:column;
    align-items:stretch;
  }
  .cookie-banner-actions{
    justify-content:stretch;
  }
  .cookie-banner-actions .btn{
    flex:1;
  }
}

.cookie-gated-placeholder{
  text-align:center;
  font-size:.88rem;
  color:var(--ink-soft);
  padding:2rem 1rem;
  background:rgba(10,40,84,.04);
  border:1px dashed var(--line);
  border-radius:var(--radius);
  margin:0;
}
.map-gated-placeholder{
  margin-top:-2px;
}
.cookie-inline-accept{
  background:none;
  border:none;
  padding:0;
  font:inherit;
  font-weight:600;
  color:var(--spray-deep);
  text-decoration:underline;
  cursor:pointer;
}

/* The short widget is a small decorative rating badge in every hero —
   too little room for a full explanatory sentence, and it was
   overlapping the eyebrow text. Leave that space empty when blocked
   rather than showing the placeholder there. */
.hero-short-widget .cookie-gated-placeholder{
  display:none !important;
}

/* LEGAL PAGES (Terms & Conditions, Privacy Policy) — smaller body text */
.legal-copy p,
.legal-copy li{
  font-size:.9rem;
  line-height:1.7;
}
.legal-copy h2{
  font-size:1.1rem;
}