/* ================= Hero overall ================= */
.hero-wrap{
  position:relative;
  min-height:100vh;
  /* more breathing room below fixed navbar */
  padding:clamp(64px, 3vw + 28px, 92px) 0 28px;
}

/* Floating brand pill (optional older element) */
.brand-pill{
  position:fixed;
  top:22px; left:22px;
  z-index:5;
  background:#fff;
  border:1px solid #eee;
  border-radius:999px;
  padding:.55rem 1rem;
  color:#1d1d1d;
  font-weight:600;
  text-decoration:none;
}

/* Floating action icons by the split */
.floating-actions{
  position:fixed;
  top:22px; right:50%;
  transform:translateX(110px);
  display:flex; gap:.6rem;
  z-index:5;
}
.circle-btn{
  width:42px;height:42px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent); border:1px solid var(--accent); color:#fff;
}
.circle-btn:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }

/* ================= Left column content ================= */
.left-content{
  position:relative;
  padding:48px 32px 120px; /* extra bottom space for stats bar */
  max-width:680px;
  margin-left:auto;
}

.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;border:1px solid #eee;color:#333;
  border-radius:999px;padding:.6rem 1rem;font-size:.95rem;
}

.display-heading{
  font-size:clamp(2.2rem, 1.5rem + 2.6vw, 4.2rem);
  line-height:1.08;
  margin:.6rem 0 1rem;
  letter-spacing:.2px;
}

/* ======= New: avatar images (placeholders) ======= */
.trust-line .avatars{
  display:flex; align-items:center;
}
.trust-line .avatars img{
  width:32px; height:32px;
  border-radius:50%;
  border:2px solid #fff;
  object-fit:cover;
  margin-left:-8px;
}
.trust-line .avatars img:first-child{ margin-left:0; }

/* ======= CTA form (Web3Forms) — responsive & polished ======= */
.cta-form{
  display:grid;
  grid-template-columns: 1fr auto;   /* input grows, button fits */
  align-items:center;
  gap:.75rem;
  max-width:640px;
  margin-bottom:clamp(36px, 6vw, 72px); /* space before stats cards */
}

/* Email input */
.email-input{
  height: clamp(48px, 4.2vw, 56px);
  border:1px solid #eee;
  border-radius:999px;
  padding:0 1.1rem;
  font-size:clamp(.95rem, .25vw + .9rem, 1rem);
  background:#fff;
}
.email-input:focus{
  outline:none; border-color:#ddd;
  box-shadow:0 0 0 3px rgba(241,196,15,.15);
}
.email-input::placeholder{ color:#9aa0a6; }

/* CTA button (accent + white), matched height with input */
.cta-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  height: clamp(48px, 4.2vw, 56px);
  padding:0 clamp(16px, 2.2vw, 22px);
  border-radius:999px;
  background:var(--accent); border:1px solid var(--accent); color:#fff;
  font-weight:800;
  white-space:nowrap;
}
.cta-btn:hover{ background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; }

/* Arrow circle stays white for contrast */
.circle-arrow{
  display:inline-grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  background:#fff; color:#000;
}

/* Stack neatly on phones */
@media (max-width:575.98px){
  .cta-form{
    display: grid;
    grid-template-columns: 1fr;  /* input above button */
    gap: .75rem;
  }
  .cta-btn{ width:100%; justify-content:center; }
}


/* Stats bar (floating at bottom of left column) */
.stats-bar{
  position:absolute; left:32px; right:32px; bottom:24px;
  background:#fff; border:1px solid #eee; padding:14px 10px;
}
.stat{ padding:6px 8px; }
.stat-k{ font-size:.9rem; color:#666; }
.stat-v{
  font-family:'Roboto Condensed',sans-serif;
  font-weight:800; font-size:1.3rem; color:#111;
}

@media (max-width: 1199.98px){
  /* left column no longer needs big bottom padding because
     the stats bar won't be absolute here */
  .left-content{
    padding-bottom: 40px;
  }

  .stats-bar{
    position: static;          /* out of absolute position */
    left: auto; right: auto;   /* clear absolute offsets */
    bottom: auto;
    margin-top: clamp(20px, 3.5vw, 32px);  /* spacing under the CTA */
    border-radius: 16px;       /* keep a nice rounded look */
  }
}


/* ================= Right column image ================= */
.hero-img-outer{
  position:relative;
  height:min(86vh, 820px);
  margin:24px 0;
  padding-left:24px; /* reveal rounded top-left corner */
}
.hero-img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-top-left-radius:28px;
  border-bottom-right-radius:28px;
  box-shadow:var(--shadow-soft);
  background:#ddd;
}

/* Map button -> accent + white */
.map-btn{
  position:absolute; right:18px; bottom:18px;
  width:44px; height:44px; border-radius:50%;
  background:var(--accent); border:1px solid var(--accent); color:#fff;
}
.map-btn:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }

/* ================= Responsive ================= */
@media (max-width: 991.98px){
  .floating-actions{ right:18px; transform:none; }
  .left-content{ padding:40px 20px 120px; margin-left:0; }
  .stats-bar{ left:20px; right:20px; }
  .hero-img-outer{ height:44vh; padding-left:16px; }

  .cta-form{ flex-direction:column; align-items:stretch; }
  .cta-btn{ width:100%; justify-content:center; }
}

@media (max-width: 575.98px){
  .brand-pill{ left:12px; top:12px; }
  .left-content{ padding:28px 16px 120px; }
  .stat-v{ font-size:1.1rem; }
  .hero-wrap{ padding-top:clamp(84px, 5.5vw + 44px, 104px); }
}

/* ======== SERVICES (Main) ======== */
.services-section{
  padding: clamp(36px, 6vw, 96px) 0;
}

/* Head copy */
.services-head .sv-sub{
  color:#6b7280;
  font-size: clamp(.95rem, .2vw + .95rem, 1.05rem);
  max-width: 980px;
  margin-left:auto; margin-right:auto;
}



/* Grid with centered highlight */
.sv-main{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(12px, 1.6vw, 24px);
    grid-auto-flow: dense; /* <— let items back-fill earlier empty cells */

}

/* Shared card style */
.sv-card{
  position:relative;
  border:1px solid #eee;
  border-radius: var(--radius-card);
  background:#fff;
  box-shadow: var(--shadow-soft);
  padding: clamp(16px, 2.2vw, 22px);
  background-image: radial-gradient(#00000006 1px, transparent 1px);
  background-size: 14px 14px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sv-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.06);
}

/* Small service items (left/right stacks) */
.sv-item{
  display:flex; align-items:center; justify-content:space-between;
  /* >>> consistent card height so Rendering & General Building match */
  min-height: 148px;
}
.sv-item .sv-item-text{ padding-right: 14px; }
.sv-title{
  margin:0 0 6px; font-weight:800; color:var(--primary-dark);
  font-size: clamp(1.1rem, .5vw + 1.05rem, 1.35rem);
  font-family:'Roboto Condensed',sans-serif;
}
.sv-desc{ margin:0; color:#667085; font-size:.98rem; }

/* >>> Uniform icon pill — perfectly round, identical size, white icons */
.sv-ico,
.sv-highlight-ico{
  flex: 0 0 auto;                 /* don’t shrink */
  width:58px; height:58px;
  border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(180deg, var(--accent), var(--accent-dark));
  color:#fff;
  box-shadow: 0 10px 22px rgba(241,196,15,.35);
}
.sv-ico i,
.sv-highlight-ico i{
  font-size: 22px;                /* consistent inner glyph size */
  line-height: 1;                 /* remove baseline quirks */
}

.sv-left  { grid-column: 1 / span 4; }
.sv-center{ grid-column: 5 / span 4; grid-row: 1 / span 2; }
.sv-right { grid-column: 9 / span 4; }  /* stays 9–12 */

/* Center highlight spans two rows in the middle column */
.sv-center{
  grid-column: 5 / span 4;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;      /* vertically center */
  justify-content: center;  /* horizontally center */
  text-align: center;
}

.sv-highlight-inner {
  max-width: 520px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* make content block centered */
  align-items: center;
  height: 100%;             /* let it stretch and center properly */
}

.sv-highlight-inner{ max-width: 520px; margin-inline:auto; }
.sv-highlight-ico{ margin: 0 auto 12px; }
.sv-highlight-title{
  margin:.25rem 0 .35rem;
  font-family:'Roboto Condensed',sans-serif;
  font-weight:800; color:var(--primary-dark);
  font-size: clamp(1.25rem, .7vw + 1.2rem, 1.6rem);
}
.sv-highlight-desc{ color:#515764; margin:0 0 14px; }

/* Responsive behavior */
@media (max-width: 1199.98px){
  /* 2 columns; center card spans 2 cols and sits between stacks */
  .sv-left, .sv-right{ grid-column: span 6; }
  .sv-center{ grid-column: span 12; grid-row: auto; }

  /* slightly lower min-height for medium screens */
  .sv-item{ min-height: 136px; }
}
@media (max-width: 575.98px){
  /* Single column; compact height */
  .sv-left, .sv-right, .sv-center{ grid-column: span 12; }
  .sv-item{ min-height: 126px; }
}


/* ============ ABOUT / INTRO (no floating card) ============ */
.about-intro-section{
  position:relative;
  overflow:hidden;
  border-radius:0;
}

/* Large photo */
.intro-img{
  width:100%;
  height:min(78vh, 880px);
  min-height:520px;
  display:block;
  object-fit:cover;
  background:#ddd;
  position:relative;
  z-index:1;
}

/* Dark overlay over the image */
.about-intro-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.48) 0%,
    rgba(0,0,0,.36) 50%,
    rgba(0,0,0,.28) 100%
  );
}

/* Centered overlay copy on desktop/laptop */
.intro-content{
  position:absolute;
  left:0; right:0;
  top:50%;
  transform: translateY(-45%);       /* “a bit in the middle” */
  z-index:3;
  color:#fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.28);
  max-width: 960px;                   /* comfortable reading width */
}

/* Typography */
.eyebrow{
  margin:0 0 .5rem;
  font-weight:700;
  opacity:.95;
}
.intro-title{
  font-family:'Roboto Condensed', sans-serif;
  font-weight:800;
  line-height:1.05;
  font-size:clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  margin:0 0 1rem;
  color:#fff;
}
.intro-copy{
  max-width: 60ch;
  font-size:clamp(.98rem, .2vw + .96rem, 1.05rem);
  margin:0 0 1.1rem;
}
.intro-cta{
  font-weight:800;
  padding:.75rem 1.15rem;
  color:#fff !important;
}

/* Tablet/phone: place text below the image, remove overlay contrast */
@media (max-width: 991.98px){
  .about-intro-section::after{ display:none; }
  .intro-content{
    position:static;
    transform:none;
    color:var(--primary-dark);
    text-shadow:none;
    padding: 18px 16px 6px;
    max-width: 720px;
  }
  .intro-title{ color:var(--primary-dark); }
}
@media (max-width: 575.98px){
  .intro-img{ min-height:420px; height:56vh; }
}
/* Keep it compact by default (phones) */
.intro-cta { 
  margin-bottom: 12px; 
}

/* MD and up (tablets/laptops/desktops): give the button more breathing room */
@media (min-width: 768px){
  .intro-cta{
    margin-bottom: clamp(32px, 5vh, 80px); /* ~32–80px depending on viewport */
  }
}


/* ========== GALLERY ========== */
.gallery-section{ padding: clamp(36px, 6vw, 80px) 0; }
.gallery-head .intro-title{ color: var(--primary-dark); }
.gallery-head .btn{ color:#fff; }

/* Grid */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(12px, 1.6vw, 24px);
}

/* Spans (12-col grid) */
.g-item{ position:relative; border-radius:24px; overflow:hidden; background:#ddd; }
.span-12{ grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }

/* Aspect ratios for the mosaic feel */
.ratio-1x1 { aspect-ratio:1/1; }
.ratio-4x3 { aspect-ratio:4/3; }
.ratio-3x4 { aspect-ratio:3/4; }
.ratio-3x2 { aspect-ratio:3/2; }
.ratio-16x9{ aspect-ratio:16/9; }

/* Media: collapse columns */
@media (max-width: 1199.98px){
  .gallery-grid{ grid-template-columns: repeat(8, minmax(0,1fr)); }
  .span-8{ grid-column: span 8; }
  .span-6{ grid-column: span 8; } /* make big tiles full width nicely */
  .span-4{ grid-column: span 4; }
}
@media (max-width: 575.98px){
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .span-8, .span-6, .span-4{ grid-column: span 2; }
}

/* Image + light overlay + subtle hover */
.g-item img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform:scale(1.01);
  transition: transform .45s ease;
}
.g-item::after{
  /* light overlay so titles pop, like reference */
  content:""; position:absolute; inset:0;
  background: rgba(255,255,255,.06);
  pointer-events:none;
}
.g-item:hover img{ transform:scale(1.05); }

/* Caption (top-left), with a soft gradient for readability */
.g-cap{
  position:absolute; left:0; top:0; z-index:2;
  width:100%;
  padding: 12px 16px 40px;
  color:#fff;
  display:flex; align-items:flex-end; gap:8px;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 60%);
}
.g-num{
  display:inline-block;
  font-weight:800; opacity:.95;
  font-size:.9rem;
}
.g-title{
  font-weight:800;
  font-size: clamp(1rem, .35vw + 1rem, 1.15rem);
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}

/* Rounded corner polish on small screens */
@media (max-width:575.98px){
  .g-item{ border-radius:20px; }
}

/* No overflow, nice shadow on hover (optional) */
.g-item{ box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.g-item:hover{ box-shadow: 0 10px 28px rgba(0,0,0,.10); }

/* ====== Gallery: section header ====== */
.gallery-section{ padding: clamp(36px, 6vw, 80px) 0; }
.gallery-head .intro-title{
  font-family:'Roboto Condensed',sans-serif;
  font-weight:800; color:var(--primary-dark);
}
.gallery-head .btn{ background:var(--accent); border:1px solid var(--accent); color:#fff; }

/* ====== Masonry layout (no fixed aspect ratios) ======
   Uses CSS multi-columns so each image keeps its real height. */
.masonry{
  column-count: 3;
  column-gap: clamp(12px, 1.6vw, 24px);
}
@media (max-width:1199.98px){ .masonry{ column-count:2; } }
@media (max-width:575.98px){  .masonry{ column-count:1; } }

/* Each card is an atomic block inside the column flow */
.m-item{
  display:inline-block;
  width:100%;
  margin:0 0 clamp(12px, 1.6vw, 24px);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
}

/* Card + image */
.m-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:#ddd;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition: box-shadow .3s ease, transform .3s ease;
}
.m-card img{
  display:block;
  width:100%;
  height:auto;             /* natural height drives the mosaic */
}

/* Light overlay for readability */
.m-card::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,.06);
  pointer-events:none;
}

/* Caption at the bottom with soft gradient */
.m-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  color:#fff;
  padding:16px 16px 18px;
  display:flex; align-items:flex-end; gap:10px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 78%);
}
.g-num{ font-weight:800; opacity:.95; font-size:.9rem; }
.g-title{
  font-weight:800;
  font-size:clamp(1rem, .35vw + 1rem, 1.15rem);
  text-shadow:0 2px 14px rgba(0,0,0,.3);
}

/* Hover polish */
.m-card:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 28px rgba(0,0,0,.10);
}

/* Tighter rounding on phones */
@media (max-width:575.98px){
  .m-card{ border-radius:20px; }
}

/* Space between the CTA button and the masonry grid */
.gallery-section .gallery-head{
  margin-bottom: clamp(24px, 4vw, 64px); /* pushes the whole header block down */
}

/* Optional: a little extra bottom margin on the button itself */
.gallery-section .gallery-head .btn{
  margin-bottom: clamp(12px, 2.5vw, 28px);
}

/* === Gallery: compact snap carousel on small devices === */
@media (max-width: 575.98px){
  /* Turn masonry into a horizontal carousel */
  .masonry{
    display: flex !important;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 2px 4px 10px;        /* a little breathing room */
  }
  .masonry::-webkit-scrollbar{ height: 6px; }
  .masonry::-webkit-scrollbar-thumb{ background:#d9d9d9; border-radius: 999px; }

  /* Each slide */
  .masonry .m-item{
    flex: 0 0 78vw;               /* slide width */
    margin: 0;                    /* cancel masonry margin */
    scroll-snap-align: start;
  }

  /* Keep cards short & neat */
  .masonry .m-card{
    height: clamp(220px, 48vh, 320px);   /* compact vertical footprint */
    border-radius: 18px;
  }
  .masonry .m-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;            /* fill card nicely */
  }

  /* Tweak caption for small screens */
  .masonry .m-cap{
    padding: 10px 12px 12px;
    gap: 8px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 80%);
  }
  .masonry .g-title{ font-size: 0.98rem; }
  .masonry .g-num{ font-size: 0.8rem; }
}

/* Extra space below the CTA above the gallery (keeps distance from carousel) */
.gallery-section .gallery-head{
  margin-bottom: clamp(28px, 5vw, 72px);
}

/* ===== Coverage / Areas section ===== */
:root{
  /* softer accent tint for the pills */
  --accent-soft: rgba(241,196,15,.18);
}

.coverage-section{
  padding: clamp(48px, 7vw, 96px) 0;
}

.cov-title{
  font-family:'Roboto Condensed',sans-serif;
  font-weight: 900;
  line-height: 1.06;
  letter-spacing:.2px;
  color: var(--primary-dark);
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.2rem);
  margin: 0 0 .35rem;
}

.cov-sub{
  font-weight: 800;
}

.cov-lede{
  max-width: 60ch;
  margin: .5rem auto 1.4rem;
  color:#43484e;
}

.coverage-pills{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: clamp(10px, 1.2vw, 14px) clamp(12px, 1.4vw, 16px);
  margin-top: clamp(12px, 1.6vw, 18px);
}

.loc-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .65rem 1.15rem;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid rgba(241,196,15,.28);
  color: #4b4f55;
  font-weight: 800;
  text-decoration:none;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

.loc-pill:hover,
.loc-pill:focus{
  background: var(--accent);
  color:#fff;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  outline: none;
}

/* Keep the same centered width as other thin sections */
.container-thin{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}