/* Screen-reader only utility */
.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}

/* Glassy hero form to match cards */
.hero-form{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  width: min(760px, 100%);
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: 14px;
  padding: .8rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}


.hero-form input,
.hero-form select{
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  padding: .85rem .9rem;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}

.hero-form button.btn{
  padding: .9rem 1.2rem;
  border-radius: 12px;
}

/* Make service + address split row 2 */
.hero-form select#service{
  grid-column: span 2;
}

.hero-form input#address{
  grid-column: span 1;
}

.hero-form button{
  grid-column: span 1;
  justify-self: stretch; /* make button full width */
}

.hero-form input#email{
  grid-column: span 1;
}

.hero-form select#service{
  grid-column: span 1; 
}
.hero-form button{
  display: flex;
  justify-content: center !important;
  align-items: center;
  text-align: center;
}


/* Stack nicely on mobile */
@media (max-width: 720px){
  .hero-form{ grid-template-columns: 1fr; }
}

/* Pill container */
.trust-pill{
  display:flex;
  flex-direction:column;           /* stack logo above content */
  align-items:center;              /* center everything */
  gap:.55rem;
  padding:1rem 1.1rem;
  min-width:260px;
}

/* Top Trustpilot block */
.trustpilot-top{
  display:flex;
  flex-direction:column;           /* logo above "Rated Excellent" */
  align-items:center;
  gap:.3rem;
  text-decoration:none;
}
.trustpilot-top:hover{ opacity:.9; }

.tp-logo{ height:50px; display:block; }

/* "Rated Excellent" chip (no numbers) */
.tp-excellent{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight:700;
  color:#00B67A;                   /* Trustpilot green */
  background:#E9F7F1;              /* soft green chip bg */
  border:1px solid rgba(0,0,0,.06);
  padding:.2rem .55rem;
  border-radius:999px;
  font-size:.8rem;
  line-height:1;
}

/* Bottom row with avatars + copy */
.trust-content{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-align:center;
}
.trust-content .pill-text{ white-space:nowrap; font-size:.95rem; }
.trust-content .avatars img{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid #fff; margin-left:-6px; }
.trust-content .avatars img:first-child{ margin-left:0; }

/* Make sure previous left-alignment rules don’t override this */
.talk-pill{ justify-content:flex-start; }   /* keep existing look but center via .trust-pill */


/* =============== SERVICES =============== */
.services-section {
  padding: 80px 0;
}

.section-title {
  font-family: "Quicksand", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.section-description {
  max-width: 780px;
  margin-bottom: 40px;
  font-size: 1.05rem;
  color: #555;
}

.services-grid .service-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 26px;
  border-radius: 14px;
  text-decoration: none;
  transition: 0.2s;
  display: block;
  height: 100%;
}

.services-grid .service-card:hover {
  box-shadow: 0 6px 26px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}

.services-grid .service-card.core {
  border-top: 6px solid #feda3e;
}

.service-card .icon {
  width: 64px;
  height: 64px;
  background: #f4f4f4;
  color: #53c704;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 2rem;
  margin-bottom: 12px;
}

.service-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #111;
}

.service-card p {
  font-size: 0.95rem;
  color: #555;
  margin: 0;
}


/* SECTION LIGHTNING SEPARATOR */
.section-separator {
  text-align: center;
  margin: 60px auto 0;
}
.section-separator i {
  font-size: 46px;
  color: var(--yellow);
}

/* ABOUT SECTION */
.about-section {
  background: #fff8d6; /* Soft yellow (brand tone) */
  padding: 120px 0;
}
.about-wrapper {
  max-width: 1200px;
}

/* About Text Styling */
.about-label {
  display: inline-block;
  font-size: 0.95rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #111;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.about-title {
  font-size: 2.4rem;
  font-weight: 800;
  margin-bottom: 15px;
}
.about-text {
  font-size: 1.05rem;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.75;
}

/* Image */
.about-img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.15);
  margin-top: 20px;
}


/* Responsive */
@media (max-width: 768px) {
  .about-title {
    font-size: 2rem;
  }
  .section-separator {
    margin-top: 30px;
  }
}


/* Lightning divider between sections */
.lightning-divider {
  margin-bottom: -50px;
  position: relative;
  z-index: 5;
}

.lightning-divider i {
  font-size: 90px;            /* bigger icon */
  color: var(--yellow);       /* your brand yellow */
  display: inline-block;
  line-height: 1;
}


/* ===== Gallery section ===== */
.gallery-section{
  padding: clamp(48px, 6vw, 84px) 0;
  background: #fff;
}

.gallery-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(20px, 3vw, 28px);
  padding-top: 50px;
}

.gallery-title{
  font-family: "Quicksand", ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  margin: 0;
}



/* Space below gallery so the bolt has room to overlap */
.gallery-section { padding-bottom: 90px; }



/* Optional: if the bolt looks too low/high, tweak only this: */
/* .lightning-between i { transform: translate(-50%, -54%); } */
/* Patterned mosaic like your sample (wide/square/stack/portrait) */
.gallery-pattern{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows: 150px;          /* base row height (tweak to taste) */
  gap:22px;
}

/* column spans + row spans */
.span-3{ grid-column:span 3; }
.r1    { grid-row:span 1; }
.r2    { grid-row:span 2; }

/* card shell */
.tile{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:#eee;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease;
  display:block;
  height:100%;
}

.tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.02);
  transition:transform .3s ease, object-position .3s ease;
}

/* left/right cropping so the one big landscape looks 'split' */
.crop-left  img{ object-position:left center;  }
.crop-right img{ object-position:right center; }

/* subtle overlay + caption like your reference */
.tile::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 55%);
  pointer-events:none;
}
.tile .caption{
  position:absolute; left:16px; bottom:14px;
  color:#fff; font-weight:800; letter-spacing:.2px;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* hover */
.tile:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.12); }
.tile:hover img{ transform:scale(1.06); }

/* responsive */
@media (max-width: 992px){
  .gallery-pattern{ grid-template-columns:repeat(4,1fr); grid-auto-rows: 140px; }
  .span-3{ grid-column:span 2; }   /* keep the look but in 4-col grid */
}
@media (max-width: 576px){
  .gallery-pattern{ grid-template-columns:1fr; grid-auto-rows: 180px; }
  .span-3, .r1, .r2{ grid-column:span 1; grid-row:auto; }
  .tile{ height:auto; aspect-ratio:16/9; } /* simple/tall enough for phones */
  .tile img{ position:static; width:100%; height:100%; object-fit:cover; }
}

.masonry-gallery {
  column-count: 3;
  column-gap: 18px;
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.1);
}

.gallery-item img {
  width: 100%;
  border-radius: 14px;
  display: block;
}

.gallery-item.tall img {
  height: auto;
}

@media (max-width: 992px) {
  .masonry-gallery { column-count: 2; }
}
@media (max-width: 576px) {
  .masonry-gallery { column-count: 1; }
}

/* Masonry (unchanged structure) */
.masonry-gallery{ column-count:3; column-gap:18px; }
@media (max-width:992px){ .masonry-gallery{ column-count:2; } }
@media (max-width:576px){ .masonry-gallery{ column-count:1; } }

.gallery-item{
  display:block; break-inside:avoid; margin-bottom:18px;
  position:relative; overflow:hidden; border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.08);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.gallery-item img{
  width:100%; display:block; border-radius:var(--radius);
  transform:scale(1.02); transition:transform .3s ease;
}

/* Hover overlay + caption from attribute */
.gallery-item::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 60%);
  opacity:0; transition:opacity .2s ease;
}
.gallery-item::before{
  content:attr(data-caption);
  position:absolute; left:14px; bottom:12px; right:14px;
  color:#fff; font-weight:800; letter-spacing:.2px;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
  opacity:0; transform:translateY(6px); transition:.22s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.gallery-item:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:rgba(0,0,0,.12); }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item:hover::after{ opacity:1; }
.gallery-item:hover::before{ opacity:1; transform:translateY(0); }

/* Show masonry on desktop, swiper on mobile */
.desktop-gallery { display: block; }
.mobile-gallery { display: none; }

@media (max-width: 768px) {
  .desktop-gallery { display: none; }
  .mobile-gallery { display: block; }
}

/* Mobile swiper gallery style */
.gallery-swiper .swiper-slide img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  object-fit: cover;
}


/* Desktop grid shown by default */
.mobile-services  { display: none; }

@media (max-width: 768px){
  .desktop-services { display: none; }
  .mobile-services  { display: block; }
}

/* Swiper slide sizing for cards */
.services-swiper .swiper-slide { height: auto; }
.services-swiper .service-card { height: 100%; display: block; }

/* Tighter spacing on mobile like you wanted */
.services-swiper { padding-bottom: 8px; }             /* room for dots */

/* Don't clip everything Swiper-wide (remove the !important) */
.swiper { overflow: hidden; }

/* Ensure container is positioned so absolute pagination sits inside */
.services-swiper { 
  position: relative;
  padding-bottom: 28px; /* room for bullets */
}

/* Let bullets sit visibly inside the container bottom */
.services-pagination {
  position: absolute;
  left: 0; right: 0;
  bottom: 6px;
  text-align: center;
  pointer-events: auto; /* taps on bullets work */
}

/* Optional: make bullets a bit bigger/touch-friendly */
.services-pagination .swiper-pagination-bullet {
  width: 8px; height: 8px;
  margin: 0 4px;
  opacity: .4;
}
.services-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

/* 1) Give all service cards a border, not just the desktop grid */
.service-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
}

/* Keep the yellow accent for “core” cards everywhere */
.service-card.core{ border-top: 6px solid var(--yellow); }

/* Optional: only elevate on hover for non-touch devices */
@media (hover:hover){
  .services-grid .service-card:hover{
    box-shadow: 0 6px 26px rgba(0,0,0,.12);
    transform: translateY(-3px);
  }
}

/* 2) Add space between cards and pagination dots on mobile */
.services-swiper{
  position: relative;
  padding-bottom: 44px;   /* was 8px — gives room for dots */
}

/* 3) Place the dots neatly and make them tappable */
.services-pagination{
  position: absolute;
  left: 0; right: 0;
  bottom: 10px;
  text-align: center;
  pointer-events: auto;
}

/* 4) Little inner padding so card borders don’t touch slide edges */
.services-swiper .swiper-slide{ padding: 2px; }

/* 5) Touch-friendly dots (optional) */
.services-pagination .swiper-pagination-bullet{
  width: 8px; height: 8px; margin: 0 5px; opacity: .4;
}
.services-pagination .swiper-pagination-bullet-active{ opacity: 1; }

/* Add proper spacing inside service cards */
.service-card {
  padding: 20px; /* top/right/bottom/left space */
}

/* Optional: slightly more breathing room on mobile */
@media (max-width: 768px) {
  .service-card {
    padding: 22px 18px;
  }
}