:root{
  --bg:#191919;
  --panel:#0f1621;
  --text:#0d1320;
  --muted:#6c757d;
  --white-75:rgba(255,255,255,.75);
  --accent:#b3131c;
  --accent-2:#f2c14e;
  --shadow:0 18px 60px rgba(0,0,0,.35);
  --anchor-gap:0px; /* nav-flush sections (no extra scroll gap) */
  /* Set by JS to match the real navbar height */
  /* --nav-h:5000px; */
}

@font-face{
  font-family:"MontserratLocal";
  src:url("../../Montserrat/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-display:swap;
}

html,body{height:100%}
/* Prevent horizontal white gutter from transformed "peek" slides */
html,body{ overflow-x:hidden; }
@supports (overflow: clip){
  html,body{ overflow-x: clip; }
}
body{
  font-family:MontserratLocal,Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:0;
  background:var(--bg);
}
html{ background:var(--bg); }
/* Prevent iOS Safari from auto-inflating text sizes */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* Make anchor jumps account for fixed navbar on all screens */
html{
  scroll-padding-top: calc(var(--nav-h, 72px));
}
section[id]{
  scroll-margin-top: calc(var(--nav-h, 72px));
}

/* Slightly larger side gutters (responsive) */
.container{
  padding-left:clamp(1rem, 4vw, 2.25rem);
  padding-right:clamp(1rem, 4vw, 2.25rem);
}

.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:1rem;top:1rem;
  width:auto;height:auto;
  z-index:1050;
  background:#fff;
  color:#000;
  padding:.5rem .75rem;
  border-radius:.5rem;
}

.nav-solid{
  background:#191919;
  border-bottom:4px solid var(--accent);
}
.navbar{
  padding-top:.35rem;
  padding-bottom:.35rem;
  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.navbar .nav-link{
  font-weight:600;
  letter-spacing:.02em;
  color:rgba(255,255,255,.78);
  transition: color .18s ease;
}
.navbar .nav-link.active{color:var(--accent)}
.navbar .nav-link:hover{color:var(--accent)}

/* Light navbar variant (used when Services is in view) */
.navbar.navbar--light{
  background:#fff !important;
  border-bottom:4px solid var(--accent) !important;
  box-shadow:0 10px 30px rgba(13,19,32,.10);
}
.navbar.navbar--light .nav-link{
  color:rgba(13,19,32,.78) !important;
}
.navbar.navbar--light .nav-link:hover{
  color:var(--accent) !important;
}
.navbar.navbar--light .nav-link.active{
  color:var(--accent) !important;
}

/* Navbar logo (inline SVG) */
.nav-logo{
  /* Responsive sizing: smaller on mobile, capped on desktop */
  height:clamp(2.05rem, 4.0vw, 3.05rem);
  width:auto;
  display:block;
  overflow:visible;
}

/* Encourage smooth vector rendering across browsers */
.nav-logo *{
  shape-rendering:geometricPrecision;
}

/* Keep the logo responsive (no mobile upscaling) */

/* SVG fill control:
   - red parts stay constant
   - everything tagged .logo-dynamic animates (white -> #191919) */
.nav-logo .logo-red{ fill:#EA1F25 !important; }
.nav-logo .logo-dynamic{
  fill:#fff !important;
  transition: fill .26s ease;
}

/* Prevent traced SVG outlines/edges */
.nav-logo .logo-red,
.nav-logo .logo-dynamic{
  stroke: none !important;
}

.navbar.nav-scrolled .nav-logo .logo-dynamic,
.navbar.navbar--light .nav-logo .logo-dynamic{
  fill:#191919 !important;
}

@media (prefers-reduced-motion: reduce){
  .nav-logo .logo-dynamic{
    transition: none;
  }
}

.eyebrow{
  font-weight:700;
  letter-spacing:.12em;
  color:rgba(255,255,255,.78);
  font-size:.82rem;
}
.section-light .eyebrow{color:rgba(13,19,32,.75)}

.btn-accent{
  --bs-btn-bg:var(--accent);
  --bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:#9f0f17;
  --bs-btn-hover-border-color:#9f0f17;
  --bs-btn-active-bg:#8d0c13;
  --bs-btn-active-border-color:#8d0c13;
  --bs-btn-color:#fff;
}

.hero{
  position:relative;
  color:#fff;
  background:var(--bg);
}
.hero--tall{min-height:calc(100svh - var(--nav-h))}
.hero--short{min-height:calc(100svh - var(--nav-h))}

/* Keep Who section exactly within the viewport below the fixed navbar */
#who{
  height:calc(100svh - var(--nav-h));
  max-height:calc(100svh - var(--nav-h));
  min-height:unset;
  overflow:hidden;
}
.hero-carousel,.hero-carousel .carousel-inner,.hero-carousel .carousel-item{height:100%}
.hero-media{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:radial-gradient(1200px 600px at 20% 20%, rgba(179,19,28,.35), transparent 60%),
             linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.7));
}

/* Home: fit media between fixed navbar and bottom of viewport */
#home.hero{min-height:100svh}
.hero-media--home{
  top:var(--nav-h);
  height:calc(100svh - var(--nav-h));
  background:none;
}

/* Transition: smooth gradient blend into "Who We Are" */
#home::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(120px, 32vh, 800px);
  background: linear-gradient(
    to bottom,
    rgba(25, 25, 25, 0) 0%,
    rgba(25, 25, 25, 0.08) 42%,
    rgba(25, 25, 25, 0.22) 68%,
    rgba(25, 25, 25, 0.46) 86%,
    rgba(25, 25, 25, 1) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Our Works: spacer hero between Home and Who */
.works-hero{
  background: rgb(25, 25, 25);
}
.works-hero--full{
  position:relative;
  padding:0;
  background: rgb(25, 25, 25);
}

/* Keep Our Works section exactly within the viewport below the fixed navbar */
#works{
  height:calc(100svh - var(--nav-h));
  max-height:calc(100svh - var(--nav-h));
  overflow:hidden;
}

/* Works structure:
   - top blend spacer (for Home -> Works transition)
   - viewport slide area (between navbar + bottom edge)
   - bottom blend spacer (for Works -> Who transition) */
.works-blank{
  position:relative;
  width:100%;
  background: rgb(25, 25, 25);
}

#works .works-blank{
  opacity:0;
  visibility:hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
#works.is-inview .works-blank{
  opacity:1;
  visibility:visible;
  transition: opacity .45s ease, visibility 0s;
}

.works-blend{
  height: clamp(50px, 7vh, 100px);
  background: rgb(25, 25, 25);
}

.works-carousel--blank{
  position:relative;
  width:100%;
  height:calc(100svh - var(--nav-h));
  opacity:0;
  transition: opacity .75s ease;
  will-change: opacity;
}

#works.is-inview .works-carousel--blank{
  opacity:1;
}

.works-track--blank{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden; /* prevent zoom seams/gaps */
}

/* Works: top/bottom gradient blends (like Home/Who) */
.works-track--blank::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height: 80px;
  background: linear-gradient(
    to bottom,
    rgba(25, 25, 25, 1) 0%,
    rgba(25, 25, 25, 0.62) 32%,
    rgba(25, 25, 25, 0.28) 62%,
    rgba(25, 25, 25, 0.12) 82%,
    rgba(25, 25, 25, 0) 100%
  );
  z-index:4;
  pointer-events:none;
}
.works-track--blank::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 100px;
  background: linear-gradient(
    to top,
    rgba(25, 25, 25, 1) 0%,
    rgba(25, 25, 25, 0.72) 30%,
    rgba(25, 25, 25, 0.40) 58%,
    rgba(25, 25, 25, 0.16) 80%,
    rgba(25, 25, 25, 0) 100%
  );
  z-index:4;
  pointer-events:none;
}

/* Anchor target for navbar (scrolls to the slide area, not the blend) */
.works-view{
  position:relative;
  width:1px;
  height:0;
}
.works-slide{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(0);
  transition: opacity .45s ease, transform .45s ease;
  filter: blur(0px);
  overflow:hidden; /* clip ken-burns zoom */
}
.works-slide img{
  position:absolute;
  inset:-2px; /* avoid 1px edges during transforms */
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  /* Ken Burns: subtle slow zoom (doesn't affect gradient overlays) */
  transform: scale(1.03);
  transition: transform 10s linear;
  will-change: transform;
  transform-origin: center center;
  backface-visibility: hidden;
}

.works-slide.is-active img{
  transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce){
  .works-slide img,
  .works-slide.is-active img{
    transition:none;
    transform:none;
  }
}
.works-slide.is-active{
  opacity: 1;
  transform: translateX(0);
  z-index: 3;
}
.works-slide.is-prev,
.works-slide.is-next{
  opacity: 0;
  z-index: 1;
}
.works-slide.is-prev{
  transform: translateX(-2%);
}
.works-slide.is-next{
  transform: translateX(2%);
}
.works-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: rgba(255,255,255,.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: min(66vh, 18rem);
  line-height: 1;
  padding: .15rem .35rem;
  opacity: .78;
  transition: transform .18s ease, opacity .18s ease, color .18s ease;
  z-index: 5;
}
.works-arrow:hover,
.works-arrow:focus-visible{
  opacity: .95;
  color: rgba(255,255,255,.95);
  transform: translateY(-50%) scale(1.03);
}
.works-arrow:focus,
.works-arrow:active{
  outline:0;
  box-shadow:none;
}

.works-arrow--prev{ left: 12px; }
.works-arrow--next{ right: 12px; }

.works-top-title{
  position:absolute;
  top:1.15rem;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  color:rgba(255,255,255,.92);
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:clamp(1.05rem, 2.2vw, 1.45rem);
  text-shadow:0 12px 30px rgba(0,0,0,.55);
  pointer-events:none;
}

.works-caption{
  position:absolute;
  left:50%;
  bottom:2.3rem;
  transform:translateX(-50%);
  z-index:6;
  color:#fff;
  font-size:clamp(1.1rem, 2.8vw, 1.9rem);
  letter-spacing:.04em;
  text-shadow:
    /* dark outline + depth */
    0 1px 0 rgba(0,0,0,.75),
    0 3px 14px rgba(0,0,0,.65),
    /* visible light glow */
    0 0 6px rgba(255,255,255,.32),
    0 0 14px rgba(255,255,255,.22),
    0 0 26px rgba(255,255,255,.14);
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.16))
    drop-shadow(0 10px 28px rgba(0,0,0,.55));
  padding:0;
  text-align:center;
  pointer-events:none;
  white-space:nowrap;
  background:transparent;
  border:none;
  border-radius:0;
  backdrop-filter:none;
  transition: opacity .22s ease, transform .22s ease;
  will-change: opacity, transform;
}
.works-caption.is-changing{
  opacity:0;
  transform:translateX(-50%) translateY(10px);
}

.works-caption__name{
  font-weight:700;
}
.works-caption__sep{
  display:inline-block;
  margin:0 .65rem;
  opacity:.75;
  font-weight:500;
}
.works-caption__loc{
  font-weight:400;
  opacity:.95;
}

/* Home: only darken the bottom ~25% (no side tint) */
.hero-media--home::after{
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 70%,
    rgba(0,0,0,0.3) 100%
  );
}

/* Home: traditional slideshow */
.slideshow-container{
  position:relative;
  height:100%;
  min-height:100svh;
  overflow:hidden;
}

/* Primary sections: only active one should be visible */
#home .slideshow-container{
  opacity:0;
  visibility:hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
#home.is-inview .slideshow-container{
  opacity:1;
  visibility:visible;
  transition: opacity .45s ease, visibility 0s;
}
.slideshow-container .slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition: opacity .50s ease, visibility .50s ease;
}
.slideshow-container .slide.is-active{
  opacity:1;
  visibility:visible;
}

/* Slow zoom-in (Ken Burns) without snapping:
   - images sit at 1.02
   - active image transitions to 1.09 over time
   - leaving slide holds its zoom during fade-out */
.slideshow-container .slide img.hero-img{
  transform:scale(1.02);
  transition: transform 10s linear;
  will-change: transform;
}
.slideshow-container .slide.is-active img.hero-img{
  transform:scale(1.09);
}
.slideshow-container .slide.is-leaving img.hero-img{
  transform:scale(1.09);
}

@media (prefers-reduced-motion: reduce){
  .slideshow-container .slide img.hero-img{
    transition:none;
    transform:none;
  }
}
.slideshow-container .dots{
  position:absolute;
  left:50%;
  bottom:1.1rem;
  transform:translateX(-50%);
  display:flex;
  gap:.55rem;
  z-index:3;
}
.slideshow-container .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.18);
  padding:0;
  transform:scale(1);
  transition:
    width .50s ease,
    transform .50s ease,
    background-color .50s ease,
    border-color .50s ease;
}
.slideshow-container .dot.is-active{
  width:30px;
  border-color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.85);
  transform:scale(1.08);
}
.hero-img,.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
}
.hero-video{display:block}

/* Explicit stacking order: media < overlay < text */
.hero-img,.hero-video{z-index:0}
.hero-media::after{z-index:1}
.hero-media::after{
  content:none; /* remove dark overlay for brighter media */
}
.hero-overlay{
  position:relative;
  z-index:2;
  /* keep text clear of the fixed navbar */
  padding-top:calc(var(--nav-h) + 2rem);
  padding-bottom:4.5rem;
}

/* Home: fade content in/out based on in-view state */
#home .hero-overlay,
#home .home-label,
#home .home-hero-overlay{
  opacity:0;
  transform:translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
}
#home.is-inview .hero-overlay,
#home.is-inview .home-label,
#home.is-inview .home-hero-overlay{
  opacity:1;
  transform:none;
}

/* HOME: center-bottom label overlay (for moved Who videos) */
.home-label{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:flex-end;
  pointer-events:none;
  padding-bottom:4rem;
  opacity:0;
  transform: translateY(10px);
  transition: opacity .22s ease-in-out, transform .22s ease-in-out;
  will-change: opacity, transform;
}
.home-label.is-visible{
  opacity:1;
  transform: translateY(0);
}
.home-label.is-changing{
  opacity:0;
  transform: translateY(10px);
}
.home-label__text{
  text-align:center;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  font-size:clamp(1.6rem, 4.8vw, 2.35rem);
  display:flex;
  flex-direction:column;
  gap:.35rem;
  line-height:1.15;
  text-shadow:
    /* dark outline + depth */
    0 1px 0 rgba(0,0,0,.75),
    0 3px 14px rgba(0,0,0,.65),
    /* visible light glow */
    0 0 6px rgba(255,255,255,.32),
    0 0 14px rgba(255,255,255,.22),
    0 0 26px rgba(255,255,255,.14);
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.16))
    drop-shadow(0 10px 28px rgba(0,0,0,.55));
}

.home-label__title{
  display:block;
  line-height:1.1;
}
.home-label__subtitle{
  display:block;
  font-weight:500;
  letter-spacing:.18em;
  font-size:clamp(1.05rem, 2.3vw, 1.55rem);
  color:rgba(255,255,255,.92);
  line-height:1.25;
}

/* HOME: slide-1 centered overlay text */
.home-hero-overlay{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:flex-end;
  pointer-events:none;
  padding-bottom:4.35rem;
  opacity:0;
  transition: opacity .22s ease-in-out, transform .22s ease-in-out;
  transform: translateY(10px);
  will-change: opacity, transform;
}
.home-hero-overlay.is-visible{
  opacity:1;
  transform: translateY(0);
}
.home-hero-overlay.is-changing{
  opacity:0;
  transform: translateY(10px);
}
.home-hero-overlay__inner{
  text-align:center;
  margin:0 auto;
  max-width:900px;
}
.home-hero-overlay__title{
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  font-size:clamp(1.35rem, 3.4vw, 2.25rem);
  text-shadow:0 12px 40px rgba(0,0,0,.55);
}
.home-hero-overlay__subtitle{
  margin-top:.35rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  font-size:clamp(1.05rem, 2.3vw, 1.55rem);
  text-shadow:0 12px 40px rgba(0,0,0,.55);
}

/* WHO slideshow overlay (text changes per slide) */
.who-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  pointer-events:none;
  padding-top:var(--nav-h);
}
.who-overlay__copy{
  width: min(62ch, 100%); /* increase to widen, decrease to narrow */
}
.who-overlay__inner{
  max-width:920px;
  padding:0 1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.who-overlay__title{
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 .35rem;
  font-size:clamp(2.05rem, 4.4vw, 3.05rem);
  text-shadow:0 12px 40px rgba(0,0,0,.55);
}
.who-overlay__para{
  margin:0 auto 1.15rem;
  color:rgba(255,255,255,.88);
  font-size:clamp(1.15rem, 1.9vw, 1.45rem);
  line-height:1.65;
  text-shadow:0 10px 30px rgba(0,0,0,.55);
  max-width:78ch;
}
.who-overlay__para:empty{display:none}
.who-overlay__softline{
  display:block;
}
.who-overlay__softline + .who-overlay__softline{
  margin-top:.1rem; /* small spacing within same paragraph */
}

/* WHO progress navigation (replaces dots) */
.progress-nav {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 5;
}

.progress-nav__item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.progress-nav__item.is-active {
  opacity: 1;
}

.progress-nav__item:hover {
  opacity: 0.85;
}

.progress-nav__index {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  min-width: 18px;
  user-select: none;
}
/* Hide the number labels (keep aria-label on buttons) */
.progress-nav__index{ display:none; }

.progress-nav__track {
  width: 48px;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  transition: width 0.25s ease;
}

.progress-nav__item.is-active .progress-nav__track {
  width: 72px;
}

.progress-nav__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 999px;
  transition: none;
}

.progress-nav__item.is-active .progress-nav__fill {
  animation: progressFill var(--slide-duration, 8s) linear forwards;
}

/* Pause progress bar when slideshow is paused/offscreen */
.slideshow-container.is-paused .progress-nav__fill{
  animation-play-state: paused !important;
}

@keyframes progressFill {
  from { width: 0%; }
  to { width: 100%; }
}

/* Footer social icons */
.footer-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:999px;
  background:transparent;
  border:1px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.62);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-social svg{
  width:22px;
  height:22px;
  display:block;
}
.footer-social:hover,
.footer-social:focus-visible{
  color:#fff !important;
  border-color:rgba(255,255,255,.5);
  transform: translateY(-1px);
}

/* Sticky WhatsApp button */
.wa-float{
  position:fixed;
  right:50px;
  bottom:40px;
  z-index:9999;
  width:64px;
  height:64px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* WhatsApp green (default) */
  color:#fff;
  background:#25D366;
  border:2px solid rgba(37, 211, 102, .9);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  text-decoration:none;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, background-color .22s ease, border-color .22s ease, color .22s ease;
}
.wa-float svg{
  width:34px;
  height:34px;
  display:block;
}
.wa-float:hover,
.wa-float:focus-visible{
  filter:none;
  color:#fff;
  background:#25D366;
  border-color:rgba(37, 211, 102, 1);
  transform: translateY(-1px);
  box-shadow:0 22px 54px rgba(0,0,0,.38);
}

/* Label slides (RESIDENTIAL/COMMERCIAL/CONSTRUCTION) */
.who-overlay.is-label{
  align-items:flex-end;
  padding-top:0;
  padding-bottom:5.25rem;
}
.who-overlay.is-label .who-overlay__title{
  font-size:clamp(1.6rem, 4.8vw, 2.35rem);
  letter-spacing:.18em;
  margin-bottom:0;
}

.who-overlay.is-changing .who-overlay__inner{
  opacity:0;
  transform:translateY(6px);
}
.who-overlay__inner{
  transition: opacity .24s ease, transform .24s ease;
  opacity:1;
  transform:none;
}

/* Who: show solid bg first, then fade in video when visible */
#who {
  background: var(--bg);
  margin-top: 0;
  padding-top: 0;
}
#whoSlideshow{
  background:var(--bg); /* paint behind video during blending */
}
#whoSlideshow::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.36);
  z-index:1;
  pointer-events:none;
}
#whoSlideshow,
#whoOverlay{
  opacity:0;
  transition: opacity .75s ease;
}
#who.is-inview #whoSlideshow,
#who.is-inview #whoOverlay{
  opacity:1;
}

/* Smooth top blend for Who videos */
#whoSlideshow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 190px;
  background: linear-gradient(
    to bottom,
    rgba(25, 25, 25, 1) 0%,
    rgba(25, 25, 25, 0.75) 30%,
    rgba(25, 25, 25, 0.42) 58%,
    rgba(25, 25, 25, 0.18) 80%,
    rgba(25, 25, 25, 0) 100%
  );
  z-index: 2;
  pointer-events: none;
}
.text-white-75{color:var(--white-75)!important}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .75rem;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
  font-weight:600;
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;
  max-width:520px;
}
.stat{
  padding:.75rem .85rem;
  border-radius:1rem;
  background:rgba(15,22,33,.62);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.stat__value{font-weight:800; letter-spacing:.02em}
.stat__label{color:rgba(255,255,255,.7); font-size:.9rem}

.section-pad{
  padding:3.5rem 0;
  min-height:calc(100svh - var(--nav-h));
  display:flex;
  align-items:center;
}

.section-pad > .container{width:100%}
.section-head{max-width:820px}

/* Viewport-fitted sections: exactly fill the space below the fixed navbar */
#reviews.section-pad{
  height:calc(100svh - var(--nav-h));
  max-height:calc(100svh - var(--nav-h));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
  padding:0;
}

/* Center the section content block itself */
#reviews > .container{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* Contact section includes footer bar; keep the footer pinned at the bottom */
#contact.section-pad.contact-section{
  height:auto;
  max-height:none;
  display:block;
  overflow:visible;
  position:relative;
  padding:inherit;
}

#contact > .container{ width:100%; }
.section-dark{background:var(--bg); color:#fff}
.section-light{background:#fff; color:var(--text)}

/* Section separators with side gaps (Reviews -> Why -> FAQ) */

#why,
#faq,
#contact{
  position:relative;
}

#why::before,
#faq::before,
#contact::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  height:1px;
  background:rgba(13,19,32,.18);
  width:min(1100px, calc(100% - (2 * clamp(1rem, 4vw, 2.25rem))));
}


.purpose-split{
  position:relative;
  height:calc(100svh - var(--nav-h));
  max-height:calc(100svh - var(--nav-h));
  display:flex;
  align-items:center;
  padding:5.25rem 0;
  color:#0d1320;
  overflow:hidden;
  background:#fff; /* fallback while bg fades in */
}

/* Purpose background fades in first */
.purpose-split::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 40%, rgba(255,255,255,.92) 62%, #fff 100%),
    url("https://pub-77c488299e824272a7e3be8e546bca69.r2.dev/our-purpose/our-purpose.png");
  background-size:cover;
  background-position:left center;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.01);
  transition: opacity .55s ease, transform .9s ease;
  will-change: opacity, transform;
  z-index:0;
}
#purpose.is-inview::before{
  opacity:1;
  transform:none;
}

.purpose-split > .container{ position:relative; z-index:1; }
.purpose-card{
  max-width:640px;
  padding:2.25rem 2.25rem;
}
.purpose-title{
  font-weight:800;
  letter-spacing:.14em;
  color:var(--accent);
  font-size:clamp(1.5rem, 3.4vw, 2.25rem);
}
.purpose-subtitle{
  font-weight:500;
  color:#0d1320;
  font-size:1.15rem;
}
.purpose-intro{
  color:#0d1320;
  font-size:1.05rem;
  line-height:1.55;
  max-width:56ch;
}
.purpose-points{
  display:grid;
  gap:1.05rem;
}
.purpose-point__title{
  margin:0 0 .3rem;
  font-size:.95rem;
  font-weight:800;
  color:rgba(13,19,32,.86);
}
.purpose-point__text{
  font-size:1rem;
  line-height:1.5;
  color:#0d1320;
  max-width:62ch;
}

.why-clean{
  padding:5.25rem 0;
}
.why-head{max-width:920px}
.why-title{
  font-weight:800;
  letter-spacing:.16em;
  color:var(--accent);
  font-size:clamp(1.5rem, 3.6vw, 2.35rem);
}
.why-lead{
  color:#0b0f18;
  font-size:clamp(1.15rem, 1.35vw, 1.28rem);
  font-weight:500;
  line-height:1.65;
}
.why-body{
  color:rgba(11,15,24,.92);
  font-size:clamp(1.1rem, 1.25vw, 1.22rem);
  font-weight:500;
  line-height:1.7;
}
.why-tile{
  height:100%;
  min-height:118px;
  border-radius:1.25rem;
  border:1.5px solid rgba(13,19,32,.65);
  background:#fff;
  display:grid;
  place-items:center;
  gap:.35rem;
  padding:1.1rem .9rem;
  text-align:center;
}
.why-tile__num{
  font-size:1.45rem;
  color:rgba(13,19,32,.92);
  font-weight:600;
  line-height:1;
}
.why-tile__label{
  font-size:.95rem;
  color:rgba(13,19,32,.88);
  line-height:1.28;
  font-weight:400;
}

/* Fade-in on scroll (Purpose / Why / Reviews) */
#purpose .container,
#why .container,
#reviews .container{
  opacity:0;
  transform:translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
#purpose.is-inview .container,
#why.is-inview .container,
#reviews.is-inview .container{
  opacity:1;
  transform:none;
}

/* Purpose: let bg appear first, then text */
#purpose .container{
  transition-delay: 220ms;
}
@media (prefers-reduced-motion: reduce){
  #purpose .container,
  #why .container,
  #reviews .container{
    opacity:1;
    transform:none;
    transition:none;
  }
}

.soft-panel{
  border-radius:1.25rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:1.25rem;
  box-shadow:var(--shadow);
}
.section-light .soft-panel{
  background:#fff;
  border:1px solid rgba(13,19,32,.08);
  box-shadow:0 12px 40px rgba(13,19,32,.12);
}

.service-transition{
  background:white;
  width: 100%;
  height: 2rem;
}
.service-card{
  border:1px solid rgba(13,19,32,.08);
  border-radius:1.25rem;
  overflow:hidden;
  box-shadow:0 12px 40px rgba(13,19,32,.12);
}
.service-card img{
  height:210px;
  object-fit:cover;
  background:#e9ecef;
}

/* SERVICES (match layout: 3 tiles per slide + dot navigation) */
/* #services.section-pad{
  padding:2.25rem 0;
} */
#services .section-head{
  text-align:center;
  max-width:none;
}
  /* Narrow title + copy slightly so it lines up with the image card */
#services .service-tile > *:not(.service-tile__media){
  padding-left:clamp(.5rem, 2.6vw, .95rem);
  padding-right:clamp(.5rem, 2.6vw, .95rem);
  box-sizing:border-box;
}
#servicesCarousel{
  margin-top:0;
  padding-bottom:0;
  width:100%;
  flex:1 1 auto;
  min-height:0; /* allow inner to shrink to available height */
  display:flex;
  align-items:stretch;
}
/* Services: replace dots with arrow navigation */
#servicesCarousel .carousel-indicators.services-dots{ display:none; }
#servicesCarousel{ padding-bottom:0; }
/* Prevent height jump between slides, but keep it responsive */
#servicesCarousel .carousel-inner{
  flex:1 1 auto;
  height:100%;
  min-height:0;
}
#servicesCarousel .carousel-item{
  height:100%;
  min-height:0;
}
#servicesCarousel .carousel-item > .row{
  height:100%;
  min-height:0;
  align-items:stretch;
}
#servicesCarousel .carousel-indicators.services-dots{
  margin-bottom:0;
  gap:.55rem;
}
#servicesCarousel .carousel-indicators.services-dots [data-bs-target]{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(179,19,28,.18);
  border:1px solid rgba(179,19,28,.35);
  opacity:1;
  margin:0;
  position:relative;
  overflow:hidden;
  transform:scale(1);
  transition:
    width .50s ease,
    transform .50s ease,
    background-color .50s ease,
    border-color .50s ease;
}
#servicesCarousel .carousel-indicators.services-dots .active{
  width:30px;
  background:rgba(179,19,28,1);
  border-color:rgba(179,19,28,1);
  transform:scale(1.08);
}
#servicesCarousel .carousel-indicators.services-dots [data-bs-target]::after{
  content:"";
  position:absolute;
  inset:0;
  width:0%;
  background:rgba(179,19,28,1);
}
#servicesCarousel .carousel-indicators.services-dots .active::after{
  animation: carouselDotFill var(--services-interval, 5s) linear forwards;
}

.service-tile{
  text-align:center;
  max-width:340px;
  margin:0 auto;
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* Services: reveal animation (stagger 1 -> 2 -> 3) */
#services .service-tile{
  opacity:0;
  transform:translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
}
#services.is-inview:not(.services-revealed) .carousel-item.active.services-animate .service-tile{
  opacity:1;
  transform:none;
}
#services.is-inview:not(.services-revealed) .carousel-item.active.services-animate .col-md-4:nth-child(1) .service-tile{ transition-delay: 0ms; }
#services.is-inview:not(.services-revealed) .carousel-item.active.services-animate .col-md-4:nth-child(2) .service-tile{ transition-delay: 80ms; }
#services.is-inview:not(.services-revealed) .carousel-item.active.services-animate .col-md-4:nth-child(3) .service-tile{ transition-delay: 160ms; }

/* After the first reveal, keep all slides visible (no re-animation on carousel switch) */
#services.services-revealed .service-tile{
  opacity:1;
  transform:none;
  transition-delay:0ms;
}

@media (prefers-reduced-motion: reduce){
  #services .service-tile{
    opacity:1;
    transform:none;
    transition:none;
  }
}
.service-tile__media{
  border-radius:1.25rem;
  overflow:hidden;
  border:1px solid rgba(13,19,32,.18);
  box-shadow:0 14px 40px rgba(13,19,32,.12);
  background:#fff;
  aspect-ratio: 16 / 10;
  /* Image stays prominent, but shrinks on short viewports */
  max-height:clamp(170px, 26vh, 300px);
  flex:0 0 auto;
}
.service-tile__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.service-tile__title{
  margin:clamp(.55rem, 1.4vh, .95rem) 0 clamp(.35rem, .9vh, .6rem);
  font-weight:700;
  /* Scale down slightly on shorter screens to keep all copy visible */
  font-size:clamp(.78rem, 0.98vh + .36rem, .98rem);
  color:#0d1320;
}
.service-tile__text{
  color:#0d1320;
  font-size:clamp(.66rem, .92vh + .35rem, .89rem);
  line-height:clamp(1.22, 0.95vh + 0.95, 1.5);
  text-align: left;
  margin-bottom:clamp(.38rem, .95vh, .62rem);
  font-weight: 500;
}

.feature{
  border-radius:1.25rem;
  border:1px solid rgba(13,19,32,.08);
  padding:1.25rem;
  background:#fff;
  box-shadow:0 12px 40px rgba(13,19,32,.12);
  height:100%;
}
.feature__icon{
  width:40px;height:40px;
  border-radius:12px;
  display:grid;place-items:center;
  background:rgba(179,19,28,.12);
  color:var(--accent);
  font-weight:900;
  margin-bottom:.75rem;
}

.review-card{
  border-radius:1.25rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:1.25rem;
  box-shadow:var(--shadow);
}
.review-card__top{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-bottom:.85rem;
}
.review-card__avatar{
  width:56px;height:56px;
  border-radius:50%;
  object-fit:cover;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
}
.stars{color:var(--accent-2); letter-spacing:.06em; font-size:.95rem}

/* REVIEWS (match layout: light section, 3 tiles per slide, dots) */
#reviews .section-head{
  text-align:center;
  max-width:none;
  width:100%;
}
.reviews-title{
  font-weight:800;
  letter-spacing:.12em;
  color:var(--accent);
  font-size:clamp(1.5rem, 3.4vw, 2.2rem);
}

/* Unified section-title style (match OUR SERVICES) */
.services-title,
.reviews-title,
.why-title,
.contact-form-title,
.faq-title{
  font-weight:800;
  letter-spacing:.1em;
  color:var(--accent);
  font-size:clamp(1.5rem, 3.4vw, 2.2rem);
  text-align:center;
}

/* Title alignment + tighter spacing (reduced gaps between title/subtitle blocks) */
#faq .section-head{
  text-align:center;
  max-width:none; /* match accordion width (not the global .section-head max-width) */
  width:100%;
}
#faq .section-head .h1{
  width:100%;
  display:block;
  margin-left:auto;
  margin-right:auto;
}

/* Add consistent spacing under each section title */
#reviews .reviews-title,
#why .why-title,
#faq .section-head .h1,
#contact .contact-form-title{
  margin-bottom:2.5rem;
}

/* Services is a viewport-fitted section: spacing is controlled by flex `gap`,
   so don't stack extra title margin that can break vertical centering. */
#services .services-title{
  margin-bottom:1.9rem;
}

#purpose .purpose-title{ margin-bottom:.15rem !important; }
#purpose .purpose-subtitle{ margin-bottom:1.5rem !important; }


.reviews-carousel{
  margin-top:2.25rem;
  padding-bottom:2.75rem; /* dots */
}
/* Reviews: replace dots with arrow navigation */
#reviewsCarousel .carousel-indicators.reviews-dots{ display:none; }
.reviews-carousel{ padding-bottom:0; }

/* Shared: position arrows inside Bootstrap carousels */
.carousel-arrow.works-arrow{
  pointer-events:auto;
}
#servicesCarousel .carousel-arrow,
#reviewsCarousel .carousel-arrow{
  position:absolute;
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
  z-index:5;
}

/* Side arrow layout (like reference): big arrows in side whitespace */
#servicesCarousel .carousel-arrow.works-arrow--prev,
#reviewsCarousel .carousel-arrow.works-arrow--prev{
  left:-8.5rem; /* push into the white side space */
  right:auto;
}
#servicesCarousel .carousel-arrow.works-arrow--next,
#reviewsCarousel .carousel-arrow.works-arrow--next{
  right:-8.5rem; /* push into the white side space */
  left:auto;
}

/* Desktop: make Services/Reviews arrows match Works (big chevrons),
   but use a dark transparent color for white sections. */
#servicesCarousel .carousel-arrow.works-arrow,
#reviewsCarousel .carousel-arrow.works-arrow{
  width:auto;
  height:auto;
  border-radius:0;
  background:transparent;
  padding:.15rem .35rem;
  color:rgba(13,19,32,.28);
  opacity:.9;
}
#servicesCarousel .carousel-arrow.works-arrow:hover,
#servicesCarousel .carousel-arrow.works-arrow:focus-visible,
#reviewsCarousel .carousel-arrow.works-arrow:hover,
#reviewsCarousel .carousel-arrow.works-arrow:focus-visible{
  background:transparent;
  color:rgba(13,19,32,.42);
  opacity:1;
  transform:translateY(-50%) scale(1.03);
}
/* Prevent height jump between review slides */
#reviewsCarousel .carousel-inner{
  min-height:220px;
}
#reviewsCarousel .carousel-item{
  min-height:220px;
}
#reviewsCarousel .carousel-item > .row{
  min-height:220px;
  align-items:flex-start;
}
#reviewsCarousel .carousel-indicators.reviews-dots{
  margin-bottom:0;
  gap:.55rem;
}
#reviewsCarousel .carousel-indicators.reviews-dots [data-bs-target]{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(179,19,28,.18);
  border:1px solid rgba(179,19,28,.35);
  opacity:1;
  margin:0;
  position:relative;
  overflow:hidden;
  transform:scale(1);
  transition:
    width .50s ease,
    transform .50s ease,
    background-color .50s ease,
    border-color .50s ease;
}
#reviewsCarousel .carousel-indicators.reviews-dots .active{
  width:30px;
  background:rgba(179,19,28,1);
  border-color:rgba(179,19,28,1);
  transform:scale(1.08);
}
#reviewsCarousel .carousel-indicators.reviews-dots [data-bs-target]::after{
  content:"";
  position:absolute;
  inset:0;
  width:0%;
  background:rgba(179,19,28,1);
}
#reviewsCarousel .carousel-indicators.reviews-dots .active::after{
  animation: carouselDotFill var(--reviews-interval, 5s) linear forwards;
}

@keyframes carouselDotFill{
  from{ width:0%; }
  to{ width:100%; }
}

.review-tile{
  text-align:center;
  max-width:340px;
  margin:0 auto;
  color:rgba(13,19,32,.78);
}
.review-tile__top{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:center;
  margin-bottom:.35rem;
}
.review-tile__avatar{
  --review-avatar:72px;
  width:var(--review-avatar);
  height:var(--review-avatar);
  border-radius:50%;
  object-fit:cover;
  border:3px solid rgba(13,19,32,.08);
  background:#e9ecef;
}
.review-tile__meta{
  text-align:left;
  height:var(--review-avatar, 72px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.review-tile__name{
  font-weight:800;
  letter-spacing:.14em;
  font-size:.78rem;
  color:rgba(13,19,32,.85);
  line-height:1.15;
}
.review-tile__time{
  font-size:.85rem;
  color:#0d1320;
  margin-top:.3rem;
  line-height:1.2;
}
.review-tile__stars{
  margin-top:.4rem;
  color:#f2c14e;
  letter-spacing:.12em;
  font-size:1.25rem;
  line-height:1;
}
.review-tile__headline{
  margin:.85rem 0 .55rem;
  font-weight:800;
  color:#0d1320;
}
.review-tile__text{
  font-size:1rem;
  line-height:1.55;
  color:#0d1320;
  max-width:44ch;
  margin:0 auto;
}

/* Mobile: allow instant collapse when clicking a nav link */
.navbar-collapse.is-instant,
.navbar-collapse.is-instant.collapsing{
  transition: none !important;
}

.accordion-button{
  font-weight:700;
  color:rgba(13,19,32,.92);
  font-size:1rem;
  line-height:1.65;
}

.accordion-button:not(.collapsed){
  background:transparent;
}

.accordion-button:focus,
.accordion-button:focus-visible{
  outline:0;
  box-shadow:none;
}

.accordion-button:active{
  box-shadow:none;
}

.accordion-body{
  color:rgba(13,19,32,.92);
  font-weight:500;
  font-size:1rem;
  line-height:1.9;
  background:rgba(13,19,32,.04);
  border-top:1px solid rgba(13,19,32,.10);
  border-radius:0 0 .75rem .75rem;
}

/* CONTACT (match provided layout) */
.contact-section{
  display:block; /* override .section-pad flex so footer stacks below */
  padding-top:4rem; /* matches original contact spacing */
  padding-bottom:0; /* footer bar sits inside the section */
  min-height:auto;
}
.contact-grid{
  padding-top:3rem;
  padding-bottom:2.5rem;
}
.contact-info{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.contact-item{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
}
.contact-item__icon{
  width:28px;
  height:28px;
  color:var(--accent);
  flex:0 0 auto;
  margin-top:.2rem;
}
.contact-item__icon svg{
  width:100%;
  height:100%;
  display:block;
}
.contact-item__title{
  font-weight:800;
  letter-spacing:.14em;
  color:rgba(13,19,32,.85);
  font-size:.78rem;
  margin-bottom:.25rem;
}
.contact-item__text{
  color:rgba(13,19,32,.78);
  line-height:1.55;
  font-size:1rem;
}
.contact-link{
  color:rgba(13,19,32,.78);
  text-decoration:none;
}
.contact-link:hover,
.contact-link:focus-visible{
  color:rgba(13,19,32,.95);
  text-decoration:underline;
}

.contact-form-card{
  max-width:620px;
  margin-left:auto;
}
.contact-form-title{
  text-align:center;
}
.contact-label{
  color:rgba(13,19,32,.78);
  font-weight:500;
  margin:0;
  padding-top:.55rem;
}
.contact-control{
  border-radius:12px;
  border:1.5px solid rgba(13,19,32,.28);
  background:#fff;
  padding:.72rem .9rem;
  min-height:46px;
  box-shadow:none !important;
}

.contact-control--message{
  resize:none;
  height:140px;
}

.contact-help{
  margin-top:.35rem;
  font-size:.85rem;
  color:rgba(13,19,32,.6);
}

/* Select dropdown arrow (Type/Budget) */
select.contact-control{
  appearance:none;
  padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgba(13,19,32,0.6)' d='M5.25 7.5 10 12.25 14.75 7.5 16 8.75 10 14.75 4 8.75z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .85rem center;
  background-size:18px 18px;
}

/* Mobile prefix */
.contact-prefix{
  border-radius:12px;
  border:1.5px solid rgba(13,19,32,.28);
  background:#fff;
  color:rgba(13,19,32,.78);
  font-weight:600;
  padding:.72rem .9rem;
  min-height:46px;
}
.contact-control.is-prefixed{
  border-top-left-radius:0;
  border-bottom-left-radius:0;
}
.contact-control:focus{
  border-color:rgba(179,19,28,.6);
  box-shadow:0 0 0 .2rem rgba(179,19,28,.12) !important;
}
.contact-submit{
  border-radius:12px;
  padding:.65rem 1.25rem;
  font-weight:700;
}
.contact-status{
  color:rgba(13,19,32,.65);
}

.contact-social-row{
  margin-top:2.25rem;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
}
.contact-social{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(13,19,32,.22);
  background:transparent;
  color:rgba(13,19,32,.55);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, background-color .22s ease, border-color .22s ease, box-shadow .18s ease;
}
.contact-social svg{
  width:22px;
  height:22px;
  display:block;
}
/* Xiaohongshu is a wide wordmark — give it a bit more room than the silhouette icons */
.contact-social[aria-label="Little Red Book"] svg{
  width:30px;
  height:30px;
}
.contact-social:hover,
.contact-social:focus-visible{
  box-shadow:0 14px 34px rgba(13,19,32,.12);
  transform: translateY(-1px);
}

/* Brand colors on hover (contact row) */
.contact-social[aria-label="Facebook"]:hover,
.contact-social[aria-label="Facebook"]:focus-visible{ background-color:#1877F2; border-color:#1877F2; color:#fff; }
.contact-social[aria-label="WhatsApp"]:hover,
.contact-social[aria-label="WhatsApp"]:focus-visible{ background-color:#25D366; border-color:#25D366; color:#fff; }
.contact-social[aria-label="Little Red Book"]:hover,
.contact-social[aria-label="Little Red Book"]:focus-visible{ background-color:#E60023; border-color:#E60023; color:#fff; }
.contact-social[aria-label="TikTok"]:hover,
.contact-social[aria-label="TikTok"]:focus-visible{ background-color:#111; border-color:#111; color:#fff; }
.contact-social[aria-label="LinkedIn"]:hover,
.contact-social[aria-label="LinkedIn"]:focus-visible{ background-color:#0A66C2; border-color:#0A66C2; color:#fff; }

/* Instagram signature gradient */
.contact-social[aria-label="Instagram"]::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  opacity:0;
  transition: opacity .22s ease;
  z-index:0;
}
.contact-social[aria-label="Instagram"]:hover,
.contact-social[aria-label="Instagram"]:focus-visible{
  border-color: transparent;
  color:#fff;
}
.contact-social[aria-label="Instagram"]:hover::before,
.contact-social[aria-label="Instagram"]:focus-visible::before{
  opacity:1;
}
.contact-social svg{
  position:relative;
  z-index:1;
}

.footer-bar{
  background:var(--bg);
  border-top:4px solid var(--accent);
  padding:1.1rem 0;
  text-align:center;
  color:rgba(255,255,255,.78);
  font-size:.9rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.contact-list a{color:#fff; text-decoration:none}
.contact-list a:hover{text-decoration:underline}
.contact-list li{
  padding:.35rem 0;
  display:flex;
  gap:.75rem;
  justify-content:space-between;
}
.contact-list__value{
  text-align:right;
}
.border-white-10{border-color:rgba(255,255,255,.1)!important}

/* ============================================================
   RESPONSIVE (mobile/tablet) — consolidated at bottom
   ============================================================ */

@media (max-width: 991.98px){
  .contact-form-card{ margin-left:0; max-width:none; }
  .contact-label{ padding-top:0; }

  .hero-overlay{padding-top:6.25rem}
  .hero--short{min-height:64vh}
  .hero-stats{grid-template-columns:1fr}
  .who-overlay.is-label{padding-bottom:4.25rem}

  .purpose-split{
    padding:4.25rem 0;
  }
  .purpose-split::before{
    background:
      linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.92) 100%),
      url("https://pub-77c488299e824272a7e3be8e546bca69.r2.dev/our-purpose/our-purpose.png");
    background-size:cover;
    background-position:left top;
    background-repeat:no-repeat;
  }
  .purpose-card{padding:1.5rem 0}

  .service-transition{
    background:white;
    height:3%;
  }
}

@media (max-width: 767.98px){
  .works-track--blank::before{ height: 130px; }
  .works-track--blank::after{ height: 150px; }

  /* Why PPC (mobile): keep 2-column grid but cap tile width */
  #why .row.g-4 > .col-6{
    flex:0 0 50%;
    max-width:50%;
    display:flex;
    justify-content:center;
    padding-left:.5rem;
    padding-right:.5rem;
  }
  #why .why-tile{
    width:min(170px, 100%);
  }
  /* Center the last tile (number 5) on its own row */
  #why .row.g-4 > .col-6:last-child{
    flex:0 0 100%;
    max-width:100%;
    width:100%;
    display:flex;
    justify-content:center;
  }

  /* Mobile: allow internal scrolling and top-padding for viewport-fitted sections */
  #services,
  #reviews{
    scrollbar-gutter: stable;
    overflow-y:auto;
    justify-content:flex-start;
    padding-top:2rem;
    padding-bottom:2rem;
  }
  #services > .container,
  #reviews > .container{
    justify-content:flex-start;
  }

  /* Mobile: nudge Reviews title upward a bit */
  #reviews .section-head{
    margin-top:-1.5rem;
  }

  /* Keep section titles consistent on mobile */
  #purpose .purpose-title,
  #why .why-title,
  #contact .contact-form-title,
  #faq .section-head .h1{
    font-size:clamp(1.5rem, 3.4vw, 2.2rem);
    letter-spacing:.12em;
    color:var(--accent);
  }
  #purpose .purpose-subtitle,
  #purpose .purpose-intro,
  #purpose .purpose-point__title,
  #purpose .purpose-point__text{
    font-size:clamp(.88rem, 3.2vw, .96rem);
    line-height:1.55;
  }

  /* Why PPC: match Our Purpose mobile type scale (intro copy) */
  #why .why-lead,
  #why .why-body{
    font-size:clamp(.88rem, 3.2vw, .96rem);
    line-height:1.55;
  }

  /* Our Purpose: viewport-tall block + vertical center (nav jump lands on balanced layout) */
  .purpose-split{
    height:calc(100svh - var(--nav-h));
    max-height:calc(100svh - var(--nav-h));
    min-height:unset;
    align-items:center;
    padding:2rem 0 2.5rem;
  }
  .purpose-card{
    padding:1rem 0;
  }

  /* Mobile: small circular arrows */
  .works-arrow{
    width:56px;
    height:56px;
    border-radius:999px;
    background:rgba(0,0,0,.32);
    color:#fff;
    font-size:40px;
    padding:0;
    opacity:1;
  }
  .works-top-title{ top:.95rem; }
  .works-caption{
    bottom:3.5rem;
    left:clamp(1rem, 4vw, 1.5rem);
    transform:none;
    text-align:left;
    font-size:clamp(.9rem, 2.6vw, 1.25rem);
    white-space:normal;
    /* max-width:calc(100% - (2 * clamp(1rem, 4vw, 1.5rem))); */
  }

  .who-overlay__copy{ width: min(30ch, 100%); }

  .progress-nav { gap: 8px; }
  .progress-nav__track { width: 36px; }
  .progress-nav__item.is-active .progress-nav__track { width: 52px; }
  .progress-nav__index { font-size: 12px; }

  /* Mobile: allow carousel swipe while still allowing vertical scroll */
  #servicesCarousel,
  #reviewsCarousel{
    touch-action: pan-y;
  }

  #servicesCarousel{ padding-bottom:0; }
  #servicesCarousel .carousel-inner,
  #servicesCarousel .carousel-item,
  #servicesCarousel .carousel-item > .row{
    min-height:auto;
  }
  /* Mobile: make slide thinner + add side whitespace */
  #servicesCarousel .carousel-inner{ padding:0 clamp(.75rem, 4vw, 1.25rem); }
  /* Remove Bootstrap row negative margins (prevents horizontal overflow on narrow screens) */
  #servicesCarousel .carousel-item > .row{ margin-left:0; margin-right:0; }
  #servicesCarousel .carousel-item > .row > [class*="col-"]{ padding-left:0; padding-right:0; }

  .service-tile{
    width:100%;
    max-width:min(21rem, 100%); /* 340px ÷ 16 = 21.25rem */
    margin:0 auto;
  }
  .service-tile__title{
    font-weight:700;
    font-size:clamp(.80rem, 1.02vh + .39rem, .98rem);
  }
  .service-tile__text{
    text-align:left;
    font-size:clamp(.74rem, .95vh + .38rem, .91rem);
    line-height:clamp(1.22, 0.95vh + 0.95, 1.5);
    margin-bottom:clamp(.38rem, .95vh, .62rem);
  }
  .service-tile__media{
    width:100%;
    border-radius:1.15rem;
    overflow:hidden;
    max-height:clamp(170px, 26vh, 300px);
  }

  /* Reviews: keep original layout (do not tighten like Services) */
  .review-tile{ max-width:420px; }
  /* Mobile reviews: keep the same left-right structure, but center the whole card */
  #reviewsCarousel .carousel-item > .row{ justify-content:center; }
  .review-tile{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
  .review-tile__top{
    justify-content:center;
    flex-direction:row;
    align-items:center;
  }
  .review-tile__meta{ text-align:left; }
  .review-tile__text{ margin:0; max-width:none; }
  #reviewsCarousel .carousel-inner,
  #reviewsCarousel .carousel-item,
  #reviewsCarousel .carousel-item > .row{
    min-height:auto;
  }

  /* Mobile: Services arrows inside the image */
  #servicesCarousel .carousel-arrow.works-arrow--prev{
    /* Anchor arrows to the centered card width (prevents circle sticking out) */
    left:var(--services-arrow-left, calc(50% - (21.25rem / 2) + .65rem));
    right:auto;
  }
  #servicesCarousel .carousel-arrow.works-arrow--next{
    left:auto;
    right:var(--services-arrow-right, calc(50% - (21.25rem / 2) + .65rem));
  }
  #servicesCarousel .carousel-arrow.works-arrow{
    /* Center arrows within the (fixed-height) service image */
    top:var(--services-arrow-top, 105px);
    transform:translateY(-50%);
    transition:none; /* prevent "flying" when top updates per slide */
  }

  /* Mobile Services: circular dark bg + white arrow */
  #servicesCarousel .carousel-arrow.works-arrow{
    width:45px;
    height:45px;
    border-radius:999px;
    background:rgba(0,0,0,.32);
    color:#fff;
    font-size:40px;
    padding:0;
    opacity:1;
    transition:none;
  }

  /* Mobile Services: keep arrow + circle fixed (no focus/active changes) */
  #servicesCarousel .carousel-arrow.works-arrow:hover,
  #servicesCarousel .carousel-arrow.works-arrow:active,
  #servicesCarousel .carousel-arrow.works-arrow:focus,
  #servicesCarousel .carousel-arrow.works-arrow:focus-visible{
    background:rgba(0,0,0,.32);
    color:#fff;
    opacity:1;
    transform:translateY(-50%);
    outline:0;
    box-shadow:none;
  }

  /* Mobile: Reviews arrows (stable, not inside image) */
  #reviewsCarousel{ --reviews-card-w: 340px; }
  .review-tile{ max-width:min(var(--reviews-card-w), 100%); }

  #reviewsCarousel .carousel-arrow.works-arrow--prev{
    left:calc(50% - (var(--reviews-card-w) / 2) - .2rem);
    right:auto;
    opacity:1;
  }
  #reviewsCarousel .carousel-arrow.works-arrow--next{
    left:auto;
    right:calc(50% - (var(--reviews-card-w) / 2) - .2rem);
    opacity:1;
  }
  #reviewsCarousel .carousel-arrow.works-arrow{
    top:var(--reviews-arrow-top, 50%);
    transform:translateY(-50%);
    transition:none;
    /* Revert to simple black arrows (no circle) for mobile reviews */
    width:auto;
    height:auto;
    background:transparent;
    border-radius:0;
    color:rgba(13,19,32,.65);
    font-size:3.25rem;
    box-shadow:none;
    -webkit-tap-highlight-color: transparent;
    appearance:none;
  }

  #reviewsCarousel .carousel-arrow.works-arrow:active,
  #reviewsCarousel .carousel-arrow.works-arrow:focus,
  #reviewsCarousel .carousel-arrow.works-arrow:focus-visible{
    color:rgba(13,19,32,.65);
    opacity:1;
    transform:translateY(-50%);
    outline:0;
    box-shadow:none;
    background:transparent;
    -webkit-tap-highlight-color: transparent;
  }

  .who-overlay__title{
    font-size:clamp(1.55rem, 7.2vw, 2.15rem);
    letter-spacing:.10em;
  }
  .who-overlay__para{
    font-size:clamp(.98rem, 3.8vw, 1.15rem);
    line-height:1.55;
    max-width:44ch;
    margin-bottom:.95rem;
  }

  .accordion-button{
    font-size:.7rem;
    line-height:1.6;
  }
  .accordion-button::after{
    margin-left:.45rem; /* mobile: space between text and chevron */
  }
  .accordion-body{
    font-size:.7rem;
    line-height:1.85;
  }
}

@media (max-width: 575.98px){
  .works-caption{
    font-size:clamp(.85rem, 3.4vw, 1.1rem);
  }

  .wa-float{
    right:18px;
    bottom:40px;
    width:60px;
    height:60px;
  }
  .wa-float svg{ width:30px; height:30px; }

  .home-label{ padding-bottom:4rem; }
  .home-label__text{
    font-size:clamp(1.15rem, 4.2vw, 1.65rem);
    max-width:calc(100% - 5.75rem); /* leave room for bottom-right WA button */
    margin:0 auto;
    letter-spacing:.16em;
  }
  .home-label__subtitle{
    font-size:clamp(.9rem, 3.2vw, 1.15rem);
    letter-spacing:.16em;
  }

  #home .progress-nav{ bottom: 1.35rem; }
}