/* ==========================================================================
   Desert Ridge Bath Co. — header + hero
   Design reference: 2nd Fix Carpentry hero layout, adapted for
   "bathroom remodeling mesa, az".
   ========================================================================== */

:root{
  /* Brand green — the darker tone carries white text at AA contrast (4.99:1),
     the light tone is for decorative accents only. */
  --brand:        #1b8043;
  --brand-dark:   #146030;
  --brand-light:  #34a853;
  --star:         #f2a93b;   /* review stars stay gold — reads as a real rating */
  --ink:          #0e0e10;
  --white:        #ffffff;

  --header-h:     96px;
  --container:    1280px;
  --radius:       10px;

  --font: "Figtree", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

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

/* Media blocks paint a gradient fallback and lay a real <img> over it, so the
   photograph is indexable and carries alt text while still cropping to the box. */
.card__media img,
.ba__pane img,
.done__media img,
.about__photo img,
.design__photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.design__photo{ position:relative; overflow:hidden; }
.about__photo{ overflow:hidden; }
.card__media img{ border-radius:inherit; }
a{ text-decoration:none; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  border:0;
  border-radius:var(--radius);
  font:700 15px/1 var(--font);
  letter-spacing:.01em;
  padding:15px 24px;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease,
             transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn--lg{ font-size:16.5px; padding:19px 32px; }

.btn--primary{ background:var(--brand); color:#fff; }
.btn--primary:hover{ background:var(--brand-dark); transform:translateY(-1px);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.65); }

.btn--ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); }
.btn--ghost:hover{ background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1.5px #fff; transform:translateY(-1px); }

/* ── Announcement bar ────────────────────────────────────────────────── */

.promo{ background:var(--ink); color:#fff; }
.promo__inner{
  max-width:var(--container);
  margin-inline:auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  text-align:center;
}
.promo__badge{
  background:#fff; color:var(--ink);
  font-size:11.5px; font-weight:800; letter-spacing:.09em;
  padding:7px 16px; border-radius:999px; white-space:nowrap;
}
.promo__text{ font-size:14.5px; color:rgba(255,255,255,.82); }
.promo__text strong{ color:#fff; font-weight:800; }

/* ── Header ──────────────────────────────────────────────────────────── */

.site-header{ position:sticky; top:0; z-index:60; }
.site-header.is-stuck .site-header__bar{ box-shadow:0 10px 30px -18px rgba(0,0,0,.75); }

.site-header__bar{
  position:relative;
  display:flex;
  align-items:stretch;
  min-height:var(--header-h);
  background:var(--brand);
  padding-left:clamp(16px,3vw,44px);
}

.logo{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:5px;
  color:#fff;
  padding:14px 0;
}
.logo__row{ display:flex; align-items:center; gap:9px; }
.logo__name{
  font-size:clamp(22px,2vw,29px);
  font-weight:900;
  letter-spacing:-.01em;
  line-height:1;
}
.logo__houses{ height:clamp(22px,1.9vw,29px); width:auto; }
.logo__houses .house{
  fill:#fff;
  stroke:var(--brand);
  stroke-width:2.6;
  stroke-linejoin:round;
}
.logo__houses .win{ fill:var(--brand); }
.logo__sub{
  font-size:clamp(9px,.72vw,10.6px);
  font-weight:800;
  letter-spacing:.19em;
  color:rgba(255,255,255,.94);
  line-height:1;
}

.nav{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,1.85vw,34px);
}
.nav a{
  position:relative;
  color:#fff;
  font-size:15px;
  font-weight:600;
  padding:6px 0;
  opacity:.95;
}
.nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:#fff;
  transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.nav a:hover::after,.nav a:focus-visible::after{ transform:scaleX(1); }

.header-cta{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.6vw,26px);
  background:#fff;
  padding-inline:clamp(20px,2.4vw,36px);
  border-bottom-left-radius:34px;
}
.header-cta__phone{
  display:inline-flex; align-items:center; gap:9px;
  font-size:19px; font-weight:800; color:var(--ink); white-space:nowrap;
}
.header-cta__phone svg{ width:19px; height:19px; fill:var(--brand); }
.header-cta__phone:hover{ color:var(--brand); }
.header-cta__btn{ border-radius:999px; padding:14px 26px; }

/* burger — mobile only */
.burger{
  display:none;
  width:46px; height:46px;
  align-self:center;
  margin-left:auto; margin-right:14px;
  background:transparent; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; padding:0 10px;
}
.burger span{ height:2px; background:#fff; border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero{
  position:relative;
  isolation:isolate;
  min-height:min(84vh,760px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--ink);
}

.hero__slides{ position:absolute; inset:0; z-index:-2; }
.hero__slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 1.1s ease;
  background-size:cover;
  background-position:center;
}
.hero__slide.is-active{ opacity:1; }

/* PLACEHOLDER ARTWORK — swap these two for real project photographs
   (1920×1080, subject on the right half so the copy stays readable). */
.hero__slide[data-slide="0"]{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='2'%3E%3Crect x='0' y='0' width='70' height='35'/%3E%3Crect x='70' y='0' width='70' height='35'/%3E%3Crect x='-35' y='35' width='70' height='35'/%3E%3Crect x='35' y='35' width='70' height='35'/%3E%3Crect x='105' y='35' width='70' height='35'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 78% 42%, #2f6142 0%, #1a3324 42%, #0b120d 78%);
}
.hero__slide[data-slide="1"]{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='2'%3E%3Crect x='0' y='0' width='70' height='35'/%3E%3Crect x='70' y='0' width='70' height='35'/%3E%3Crect x='-35' y='35' width='70' height='35'/%3E%3Crect x='35' y='35' width='70' height='35'/%3E%3Crect x='105' y='35' width='70' height='35'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 72% 38%, #46655a 0%, #223330 44%, #0d1513 80%);
}

.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,
    rgba(8,8,10,.94) 0%,
    rgba(8,8,10,.86) 32%,
    rgba(8,8,10,.55) 62%,
    rgba(8,8,10,.22) 100%);
}

.hero__inner{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding:clamp(56px,7vw,96px) clamp(20px,3vw,44px);
  color:#fff;
}

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  margin:0 0 20px;
  font-size:12.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.hero__eyebrow::before{
  content:""; width:34px; height:2px; background:var(--brand); flex:none;
}

.hero__title{
  margin:0 0 22px;
  font-size:clamp(34px,4.9vw,66px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.022em;
  max-width:15ch;
}
.hero__title mark{
  background:var(--brand);
  color:#fff;
  padding:.02em .2em .1em;
  border-radius:3px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

.hero__lede{
  margin:0 0 34px;
  max-width:56ch;
  font-size:clamp(15.5px,1.15vw,18px);
  line-height:1.65;
  color:rgba(255,255,255,.84);
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:38px; }

/* social proof */
.proof{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.proof__avatars{ display:flex; }
.proof__avatars li{
  width:38px; height:38px; border-radius:50%;
  background:var(--c);
  color:#fff; font-size:14px; font-weight:800;
  display:grid; place-items:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}
.proof__avatars li + li{ margin-left:-11px; }
.proof__stars{ color:var(--star); font-size:18px; letter-spacing:2px; }
.proof__score{ font-weight:800; font-size:15.5px; }
.proof__sep{ width:1px; height:18px; background:rgba(255,255,255,.32); }
.proof__count{ font-size:15px; color:rgba(255,255,255,.82); }

.hero__rule{
  max-width:660px; height:1px;
  background:rgba(255,255,255,.18);
  margin:32px 0 20px;
}

.badges{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.badges li{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
.badges li svg{ width:16px; height:16px; fill:rgba(255,255,255,.65); }
.badges__dot{ color:rgba(255,255,255,.35); }

.hero__dots{
  position:absolute; left:clamp(20px,3vw,44px); bottom:26px;
  display:flex; gap:9px;
}
.hero__dots button{
  width:10px; height:10px; padding:0;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.35);
  cursor:pointer; transition:background-color .2s ease, width .2s ease;
}
.hero__dots button.is-active{ background:var(--brand); width:26px; border-radius:999px; }

/* ── Services ────────────────────────────────────────────────────────── */

.services{
  background:linear-gradient(180deg,#f7fbf8 0%,#eaf2ec 100%);
  padding:clamp(64px,7vw,104px) clamp(20px,3vw,44px);
}
.services__inner{ max-width:1140px; margin-inline:auto; }

.eyebrow{
  margin:0 0 18px;
  font-size:12px; font-weight:800;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--brand);
}
.eyebrow--center{ display:flex; align-items:center; justify-content:center; gap:12px; }
.eyebrow__mark{
  width:9px; height:9px; flex:none;
  border:2px solid var(--brand-light);
  border-radius:50%;
}

.section-title{
  margin:0 auto 20px;
  max-width:19ch;
  text-align:center;
  font-size:clamp(27px,3.5vw,44px);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.022em;
}
.section-title mark{
  background:#d7ecdd;
  color:var(--brand-dark);
  padding:.02em .22em .1em;
  border-radius:4px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

.section-lede{
  margin:0 auto 26px;
  max-width:64ch;
  text-align:center;
  font-size:clamp(14.5px,1.05vw,16px);
  line-height:1.7;
  color:#4c6455;
}

.ticks{
  display:flex; flex-wrap:wrap;
  justify-content:center;
  gap:14px clamp(18px,2.6vw,38px);
  margin-bottom:clamp(34px,4vw,52px);
}
.ticks li{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14.5px; font-weight:700; color:#1d2b23;
}
.ticks li::before{
  content:"";
  width:17px; height:17px; flex:none;
  background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* cards */
.services__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.7vw,24px);
}

.card{
  position:relative;
  background:#fff;
  border:1px solid #e3ece6;
  border-radius:16px;
  padding:14px 16px 20px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:#cfe3d6;
  box-shadow:0 22px 40px -28px rgba(16,48,30,.55);
}

.card__media{
  position:relative;
  aspect-ratio:16/10;
  border-radius:11px;
  overflow:hidden;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2'%3E%3Crect x='0' y='0' width='60' height='30'/%3E%3Crect x='60' y='0' width='60' height='30'/%3E%3Crect x='-30' y='30' width='60' height='30'/%3E%3Crect x='30' y='30' width='60' height='30'/%3E%3Crect x='90' y='30' width='60' height='30'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(150deg, var(--a) 0%, var(--b) 100%);
}

.card__badge{
  position:absolute; top:11px; right:11px;
  width:38px; height:38px;
  display:grid; place-items:center;
  background:#fff;
  border-radius:11px;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.5);
}
.card__badge svg{
  width:19px; height:19px;
  fill:none; stroke:var(--brand);
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}

.card__title{
  margin:16px 0 8px;
  font-size:17.5px; font-weight:800;
  letter-spacing:-.01em;
}
.card__text{
  margin:0 0 16px;
  font-size:13.6px; line-height:1.62;
  color:#5b6f63;
}

.card__cta{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.4px; font-weight:800;
  color:var(--brand);
  transition:gap .18s ease, color .18s ease;
}
.card__cta:hover{ gap:11px; color:var(--brand-dark); }

.card__go{
  position:absolute; right:16px; bottom:16px;
  width:40px; height:40px;
  display:grid; place-items:center;
  background:var(--brand);
  border-radius:50%;
  transition:background-color .18s ease, transform .18s ease;
}
.card__go svg{
  width:16px; height:16px;
  fill:none; stroke:#fff; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.card__go:hover{ background:var(--brand-dark); transform:translate(1px,-2px); }

/* footer strip */
.services__foot{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap;
  gap:clamp(14px,2vw,26px);
  margin-top:clamp(34px,4vw,52px);
}
.services__note{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14.5px; color:#4c6455;
}
.services__note svg{
  width:20px; height:20px; flex:none;
  fill:none; stroke:var(--brand); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}

.btn--pill{ border-radius:999px; padding:12px 12px 12px 28px; font-size:15.5px; }
.btn__circle{
  width:34px; height:34px;
  display:grid; place-items:center;
  background:#fff; border-radius:50%;
}
.btn__circle svg{
  width:16px; height:16px;
  fill:none; stroke:var(--brand); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width:1180px){
  .header-cta__phone{ font-size:17px; }
  .nav{ gap:14px; }
  .nav a{ font-size:14px; }
}

@media (max-width:1024px){
  :root{ --header-h:78px; }

  .burger{ display:flex; }

  .nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch;
    gap:0;
    background:var(--brand-dark);
    padding:8px 0 14px;
    box-shadow:0 18px 30px -20px rgba(0,0,0,.8);
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:14px clamp(20px,5vw,44px); font-size:16px; }
  .nav a::after{ display:none; }
  .nav a:hover{ background:rgba(0,0,0,.14); }

  .header-cta{ border-bottom-left-radius:26px; }
  .header-cta__phone span{ display:none; }
}

@media (max-width:760px){
  .promo__inner{ padding:11px 16px; gap:10px; }
  .promo__text{ font-size:13px; }
  .promo__badge{ font-size:10.5px; padding:6px 13px; }

  .header-cta{ gap:12px; padding-inline:16px; }
  .header-cta__phone{ font-size:0; gap:0; }        /* icon-only call button */
  .header-cta__phone svg{ width:22px; height:22px; }
  .header-cta__btn{ padding:12px 18px; font-size:14px; }

  .hero{ min-height:auto; }
  .hero__inner{ padding-block:clamp(48px,12vw,72px) 96px; }
  .hero__title{ max-width:none; }
  .hero__actions .btn{ flex:1 1 100%; }
  .proof{ gap:12px; }
  .hero__rule{ margin:26px 0 18px; }
  .badges__dot{ display:none; }
  .badges{ gap:10px 18px; }
}

/* ── About ───────────────────────────────────────────────────────────── */

.about{
  background:#f4efe9;
  padding:clamp(60px,7vw,100px) clamp(20px,3vw,44px);
}
.about__inner{
  max-width:1140px; margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,4vw,60px);
  align-items:center;
}

.about__media{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:stretch;
}
.about__photo{
  position:relative;
  border-radius:16px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2'%3E%3Crect x='0' y='0' width='60' height='30'/%3E%3Crect x='60' y='0' width='60' height='30'/%3E%3Crect x='-30' y='30' width='60' height='30'/%3E%3Crect x='30' y='30' width='60' height='30'/%3E%3Crect x='90' y='30' width='60' height='30'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(155deg, var(--a) 0%, var(--b) 100%);
}
.about__photo--tall{ min-height:340px; }
.about__stack{ display:flex; flex-direction:column; gap:16px; }
.about__photo--small{ min-height:170px; }

.seal{
  position:absolute;
  left:50%; bottom:-46px;
  transform:translateX(-50%);
  width:92px; height:92px;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.22));
}
.seal__ring{
  font:700 9.4px var(--font);
  letter-spacing:.13em;
  fill:var(--brand);
  text-transform:uppercase;
}
.seal__num{
  font:900 25px var(--font);
  fill:var(--brand-dark);
}

.rating-card{
  background:#fff;
  border-radius:16px;
  padding:26px 18px 22px;
  text-align:center;
  margin-top:34px;
  flex:1;
  display:flex; flex-direction:column; justify-content:center;
}
.rating-card__score{
  margin:0; font-size:30px; font-weight:900; letter-spacing:-.02em;
}
.rating-card__score span{ font-size:15px; font-weight:700; color:#7d8f84; }
.rating-card__stars{ margin:6px 0 10px; color:var(--star); font-size:15px; letter-spacing:2px; }
.rating-card__label{ margin:0; font-size:13px; line-height:1.5; color:#6b7d72; }

.eyebrow--left{ display:flex; align-items:center; gap:10px; }

.section-title--left{
  margin-inline:0;
  max-width:22ch;
  text-align:left;
}

.about__text{
  margin:0 0 16px;
  max-width:58ch;
  font-size:15.2px; line-height:1.72; color:#4c6455;
}

.ticks--grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  justify-content:start;
  gap:12px 22px;
  margin:22px 0 28px;
}
.ticks--grid li{ font-size:14px; }

.about__actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.about__actions .btn{ padding:17px 30px; }

.phone-pill{
  display:inline-flex; align-items:center; gap:12px;
  background:#fff;
  border-radius:999px;
  padding:9px 22px 9px 9px;
}
.phone-pill__icon{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  background:#e6f2ea; border-radius:50%;
}
.phone-pill__icon svg{ width:17px; height:17px; fill:var(--brand); }
.phone-pill__text{ display:flex; flex-direction:column; line-height:1.25; }
.phone-pill__label{
  font-size:10.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:#8b9a91;
}
.phone-pill__num{ font-size:15.5px; font-weight:800; color:var(--ink); }
.phone-pill:hover .phone-pill__num{ color:var(--brand); }

/* stats strip */
.stats{
  max-width:1140px;
  margin:clamp(38px,5vw,64px) auto 0;
  padding-top:clamp(28px,3.4vw,42px);
  border-top:1px solid #ddd2c6;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  text-align:center;
}
.stat{ display:flex; flex-direction:column; gap:8px; }
.stat__label{ font-size:13px; font-weight:600; color:#7d8b81; }
.stat__num{
  font-size:clamp(26px,3vw,38px);
  font-weight:900; letter-spacing:-.03em;
  color:var(--ink);
}

/* ── Projects: before / after ────────────────────────────────────────── */

.projects{
  background:#fff;
  padding:clamp(64px,7vw,104px) clamp(20px,3vw,44px);
}
.projects__inner{ max-width:1140px; margin-inline:auto; }

.projects__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.8vw,26px);
  margin-top:clamp(30px,3.5vw,46px);
}

.ba{
  --pos:50%;
  position:relative;
  margin:0;
  aspect-ratio:4/4.05;
  border-radius:16px;
  overflow:hidden;
  background:#333;
  box-shadow:0 20px 38px -30px rgba(16,48,30,.7);
}
.ba__pane{
  position:absolute; inset:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='2'%3E%3Crect x='0' y='0' width='60' height='30'/%3E%3Crect x='60' y='0' width='60' height='30'/%3E%3Crect x='-30' y='30' width='60' height='30'/%3E%3Crect x='30' y='30' width='60' height='30'/%3E%3Crect x='90' y='30' width='60' height='30'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(150deg, var(--a) 0%, var(--b) 100%);
}
.ba__pane--before{ filter:saturate(.55); }
.ba__pane--after{ clip-path:inset(0 0 0 var(--pos)); }

.ba__tag{
  position:absolute; top:14px;
  background:#fff;
  border-radius:9px;
  padding:8px 15px;
  font-size:13.5px; font-weight:700;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.5);
  pointer-events:none;
}
.ba__tag--left{ left:14px; }
.ba__tag--right{ right:14px; }

.ba__divider{
  position:absolute; top:0; bottom:0;
  left:var(--pos);
  width:2px;
  background:rgba(255,255,255,.9);
  pointer-events:none;
}
.ba__handle{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  display:grid; place-items:center;
  background:var(--brand);
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 8px 18px -8px rgba(0,0,0,.6);
}
.ba__handle svg{
  width:18px; height:18px;
  fill:none; stroke:#fff; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}

.ba__range{
  position:absolute; inset:0;
  width:100%; height:100%;
  margin:0; padding:0;
  opacity:0;
  cursor:ew-resize;
  -webkit-appearance:none; appearance:none;
  background:transparent;
}
.ba__range:focus-visible ~ .ba__divider .ba__handle{
  box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--brand-light);
}

.ba__caption{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; gap:5px;
  padding:52px 16px 16px;
  color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55) 45%,rgba(0,0,0,.85));
  pointer-events:none;
}
.ba__caption strong{ font-size:14.6px; font-weight:800; letter-spacing:-.01em; }
.ba__caption span{ font-size:12.3px; line-height:1.5; color:rgba(255,255,255,.8); }

.projects__foot{ display:flex; justify-content:center; margin-top:clamp(30px,3.6vw,46px); }

@media (max-width:1024px){
  .services__grid{ grid-template-columns:repeat(2,1fr); }
  .about__inner{ grid-template-columns:1fr; }
  .section-title--left{ max-width:none; }
  .projects__grid{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
}

/* ── Trust bar ───────────────────────────────────────────────────────── */

.trustbar{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  background:#fff;
  border-bottom:1px solid #e9eeea;
}
.trustbar li{
  display:grid; place-items:center;
  padding:20px 10px;
  text-align:center;
  font-size:12px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase;
  color:#8c9a92;
  border-right:1px solid #eef2f0;
}
.trustbar li:last-child{ border-right:0; }

/* ── Reviews ─────────────────────────────────────────────────────────── */

.reviews{
  background-color:#111a15;
  background-image:repeating-linear-gradient(115deg,
    rgba(255,255,255,0) 0 70px,
    rgba(255,255,255,.028) 70px 72px);
  color:#fff;
  padding:clamp(56px,6vw,88px) clamp(20px,3vw,44px);
}
.reviews__inner{ max-width:1140px; margin-inline:auto; }

.reviews__head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  margin-bottom:clamp(26px,3.4vw,42px);
}
.reviews__title{ margin:0; max-width:none; }

.reviews__nav{
  width:48px; height:48px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.reviews__nav svg{
  width:18px; height:18px;
  fill:none; stroke:#fff; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.reviews__nav:hover{ background:var(--brand); border-color:var(--brand); transform:scale(1.05); }

.reviews__track{
  display:flex;
  gap:clamp(14px,1.6vw,22px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:6px;
  scrollbar-width:none;
}
.reviews__track::-webkit-scrollbar{ display:none; }

.review{
  flex:0 0 clamp(258px,31.6%,356px);
  scroll-snap-align:start;
  background:#18231d;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:26px 22px 22px;
  text-align:center;
}

.review__avatar{
  position:relative;
  width:66px; height:66px;
  margin:0 auto 14px;
  display:grid; place-items:center;
  background:linear-gradient(150deg,#2f6142,#16231b);
  border-radius:50%;
  font-size:22px; font-weight:800;
  color:rgba(255,255,255,.5);
}
.review__src{
  position:absolute; right:-2px; bottom:-2px;
  width:24px; height:24px;
  display:grid; place-items:center;
  background:#fff; border-radius:50%;
  font:900 13px/1 var(--font); font-style:normal;
  color:#1a73e8;
  box-shadow:0 0 0 2px #18231d;
}
.review__src--fb{ color:#1877f2; }

.review__name{
  margin:0 0 6px;
  font-size:14.4px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
}
.review__rating{
  margin:0 0 4px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:800;
}
.review__stars{ color:var(--star); letter-spacing:1.5px; }
.review__meta{ margin:0 0 14px; font-size:12.4px; color:rgba(255,255,255,.5); }
.review__text{ margin:0; font-size:13.6px; line-height:1.66; color:rgba(255,255,255,.72); }

.review__foot{ position:relative; height:1px; background:rgba(255,255,255,.12); margin-top:22px; }
.review__foot span{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:32px; height:27px;
  display:grid; place-items:center;
  padding-top:7px;
  background:var(--brand); border-radius:7px;
  font:900 18px/1 var(--font); color:#fff;
}

.reviews__foot{ display:flex; justify-content:center; margin-top:clamp(26px,3vw,38px); }

/* ── Process ─────────────────────────────────────────────────────────── */

.process{
  background:#fff;
  padding:clamp(64px,7vw,104px) clamp(20px,3vw,44px);
}
.process__inner{
  max-width:1140px; margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4vw,64px);
  align-items:start;
}

.steps{ margin:26px 0 0; }
.step{ display:flex; gap:16px; padding-bottom:22px; }
.step__icon{
  position:relative;
  width:48px; height:48px; flex:none;
  display:grid; place-items:center;
  background:#e9f3ed; border-radius:50%;
}
.step__icon svg{
  width:21px; height:21px;
  fill:none; stroke:var(--brand); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.step:not(:last-child) .step__icon::after{
  content:"";
  position:absolute; top:calc(100% + 3px); left:50%;
  width:1px; height:20px;
  background:linear-gradient(#c7ddce,rgba(199,221,206,0));
}
.step__title{ margin:3px 0 6px; font-size:16.5px; font-weight:800; letter-spacing:-.01em; }
.step__title span{ color:var(--brand); margin-right:7px; }
.step__text{ margin:0; font-size:14px; line-height:1.62; color:#5b6f63; }

.mini-badges{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid #e3ece6; border-radius:14px; overflow:hidden;
  margin-top:12px;
}
.mini-badges li{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 10px; text-align:center;
  font-size:11.6px; line-height:1.4; color:#5b6f63;
  border-right:1px solid #e3ece6;
}
.mini-badges li:last-child{ border-right:0; }
.mini-badges svg{
  width:21px; height:21px;
  fill:none; stroke:var(--brand); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.mini-badges strong{ color:var(--ink); font-size:13px; font-weight:900; }

.process__rail{ display:flex; flex-direction:column; }
.process__rail li{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 46%;
  gap:2px 14px;
  align-items:center;
  padding:14px 0;
  border-top:1px solid #e9eeea;
}
.process__rail li:last-child{ border-bottom:1px solid #e9eeea; }
.rail__num{ grid-area:1/1/3/2; align-self:center; font-size:20px; font-weight:900; color:#bccdc3; }
.rail__label{ grid-area:1/2/2/3; font-size:13.6px; font-weight:800; color:var(--brand-dark); line-height:1.35; }
.rail__arrow{ grid-area:2/2/3/3; color:var(--brand); font-size:15px; }
.rail__img{
  grid-area:1/3/3/4;
  aspect-ratio:16/6.4;
  border-radius:10px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2'%3E%3Crect x='0' y='0' width='60' height='30'/%3E%3Crect x='60' y='0' width='60' height='30'/%3E%3Crect x='-30' y='30' width='60' height='30'/%3E%3Crect x='30' y='30' width='60' height='30'/%3E%3Crect x='90' y='30' width='60' height='30'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(150deg, var(--a) 0%, var(--b) 100%);
}

/* ── Why us (dark) ───────────────────────────────────────────────────── */

.why{
  background:#0e1712;
  color:#fff;
  padding:clamp(64px,7vw,104px) clamp(20px,3vw,44px);
}
.why__inner{ max-width:1140px; margin-inline:auto; }

.eyebrow--on-dark{ color:var(--brand-light); }
.eyebrow__rule{ width:34px; height:2px; background:var(--brand-light); flex:none; }
.section-title--on-dark{ color:#fff; max-width:22ch; }
.section-title--on-dark mark{ background:transparent; color:var(--brand-light); padding:0; }
.section-lede--on-dark{ color:rgba(255,255,255,.68); }

.why__grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(18px,2.2vw,28px);
  margin-top:clamp(30px,3.6vw,44px);
  text-align:left;
}

.why__tabs{ display:flex; flex-direction:column; gap:10px; }
.why__tab{
  display:flex; align-items:center; gap:14px;
  text-align:left;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:16px 18px;
  color:#fff;
  font:700 14.4px var(--font);
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.why__tab span{ font-size:12px; font-weight:800; color:rgba(255,255,255,.42); }
.why__tab:hover{ background:rgba(255,255,255,.09); transform:translateX(2px); }
.why__tab.is-active{ background:var(--brand); border-color:var(--brand); }
.why__tab.is-active span{ color:rgba(255,255,255,.78); }

.why__panel{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:18px 18px 24px;
}
.why__panel[hidden]{ display:none; }
.why__media{
  position:relative;
  aspect-ratio:16/8;
  border-radius:12px;
  margin-bottom:18px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2'%3E%3Crect x='0' y='0' width='60' height='30'/%3E%3Crect x='60' y='0' width='60' height='30'/%3E%3Crect x='-30' y='30' width='60' height='30'/%3E%3Crect x='30' y='30' width='60' height='30'/%3E%3Crect x='90' y='30' width='60' height='30'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(150deg, var(--a) 0%, var(--b) 100%);
}
.why__chip{
  position:absolute; left:14px; bottom:14px;
  background:var(--brand); color:#fff;
  font-size:10.8px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase;
  padding:7px 12px; border-radius:7px;
}
.why__panel h3{ margin:0 0 10px; font-size:19.5px; font-weight:800; letter-spacing:-.015em; }
.why__panel p{ margin:0 0 20px; font-size:14.2px; line-height:1.68; color:rgba(255,255,255,.72); }

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq{
  background:#f4efe9;
  padding:clamp(64px,7vw,104px) clamp(20px,3vw,44px);
}
.faq__inner{
  max-width:1140px; margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.faq__more{ margin:18px 0 0; font-size:14px; color:#4c6455; }
.faq__more a{ color:var(--brand); font-weight:800; text-decoration:underline; text-underline-offset:3px; }

.faq__list{ display:flex; flex-direction:column; gap:10px; }
.qa{
  background:#fff;
  border:1px solid #e7ded4;
  border-radius:12px;
  overflow:hidden;
}
.qa summary{
  position:relative;
  display:flex; align-items:center; gap:9px;
  padding:16px 46px 16px 18px;
  font-size:14.6px; font-weight:700;
  cursor:pointer;
  list-style:none;
  transition:background-color .18s ease, color .18s ease;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:"";
  position:absolute; right:18px; top:50%;
  width:9px; height:9px;
  margin-top:-5px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.qa__n{ color:var(--brand); font-weight:800; }
.qa[open] summary{ background:var(--brand-dark); color:#fff; }
.qa[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.qa[open] .qa__n{ color:rgba(255,255,255,.86); }
.qa__body{ padding:16px 18px 18px; }
.qa__body p{ margin:0; font-size:14px; line-height:1.72; color:#5b6f63; }
.qa__body strong{ color:var(--ink); }

/* ── Custom design ───────────────────────────────────────────────────── */

.design{
  background:#f4efe9;
  padding:clamp(60px,7vw,100px) clamp(20px,3vw,44px);
}
.design__inner{
  max-width:1140px; margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,60px);
  align-items:center;
}
.design__photo{
  min-height:360px;
  border-radius:20px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2'%3E%3Crect x='0' y='0' width='60' height='30'/%3E%3Crect x='60' y='0' width='60' height='30'/%3E%3Crect x='-30' y='30' width='60' height='30'/%3E%3Crect x='30' y='30' width='60' height='30'/%3E%3Crect x='90' y='30' width='60' height='30'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(150deg, var(--a) 0%, var(--b) 100%);
}
.design__body .btn{ margin-top:8px; }

/* ── Bathroom types ──────────────────────────────────────────────────── */

.types{
  background:#fff;
  padding:clamp(60px,7vw,100px) clamp(20px,3vw,44px);
}
.types__inner{ max-width:1140px; margin-inline:auto; }
.types__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(26px,3vw,42px);
}
.type{
  background:#f7fbf8;
  border:1px solid #e3ece6;
  border-radius:16px;
  padding:24px 20px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.type:hover{
  transform:translateY(-4px);
  border-color:#cfe3d6;
  box-shadow:0 22px 40px -30px rgba(16,48,30,.55);
}
.type__icon{
  width:46px; height:46px;
  display:grid; place-items:center;
  background:#e9f3ed; border-radius:12px;
  margin-bottom:14px;
}
.type__icon svg{
  width:21px; height:21px;
  fill:none; stroke:var(--brand); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.type h3{ margin:0 0 8px; font-size:16.4px; font-weight:800; letter-spacing:-.01em; }
.type p{ margin:0; font-size:13.4px; line-height:1.62; color:#5b6f63; }

/* ── Planning ────────────────────────────────────────────────────────── */

.planning{
  background:linear-gradient(180deg,#f7fbf8 0%,#eaf2ec 100%);
  padding:clamp(60px,7vw,100px) clamp(20px,3vw,44px);
}
.planning__inner{
  max-width:1140px; margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
.elements{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.elements li{
  display:flex; align-items:center; gap:10px;
  background:#fff;
  border:1px solid #e3ece6;
  border-radius:10px;
  padding:13px 15px;
  font-size:13.6px; font-weight:700; color:#1d2b23;
}
.elements li::before{
  content:"";
  width:16px; height:16px; flex:none;
  background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Local relevance ─────────────────────────────────────────────────── */

.local{
  background:#fff;
  padding:clamp(60px,7vw,96px) clamp(20px,3vw,44px);
}
.local__inner{ max-width:900px; margin-inline:auto; }
.local__cta{ display:flex; justify-content:center; margin-top:clamp(24px,3vw,34px); }

/* ── Certifications beside the FAQ ───────────────────────────────────── */

.proof-faq{
  background:#f4efe9;
  padding:clamp(56px,6vw,96px) clamp(20px,3vw,44px);
}
.proof-faq__inner{
  max-width:1140px; margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(22px,3vw,46px);
  align-items:start;
}
.proof-faq .certs__card{ padding:clamp(20px,2.4vw,32px); }
.proof-faq .certs__grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
.proof-faq .certs__title{ font-size:clamp(20px,2.2vw,27px); }
.proof-faq .certs__lede{ font-size:14px; margin-bottom:22px; }
.proof-faq .faq__list{ margin-top:20px; }
.proof-faq .faq__more{ margin-top:18px; }

@media (max-width:1024px){
  .proof-faq__inner{ grid-template-columns:1fr; }
}

/* ── Certifications ──────────────────────────────────────────────────── */

.certs{
  background:#f4efe9;
  padding:clamp(56px,6vw,90px) clamp(20px,3vw,44px);
}
.certs__card{
  position:relative;
  max-width:1140px; margin-inline:auto;
  background:#f7f8fa;
  border-radius:26px;
  overflow:hidden;
  padding:clamp(30px,4vw,58px);
}

/* Faded stars-and-stripes backdrop, drawn entirely in CSS. */
.certs__flag{
  position:absolute; inset:0;
  background-image:
    radial-gradient(115% 95% at 10% 6%, rgba(58,72,140,.26) 0 24%, rgba(58,72,140,0) 56%),
    repeating-linear-gradient(-9deg,
      rgba(190,40,60,.12) 0 30px,
      rgba(255,255,255,0) 30px 60px);
}
.certs__flag::after{
  content:"";
  position:absolute; left:1%; top:0; width:38%; height:34%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath fill='%23ffffff' fill-opacity='.55' d='M23 9l2.7 5.5 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E") repeat;
  opacity:.75;
}

.certs__content{ position:relative; text-align:center; }
.certs__title{
  margin:0 0 14px;
  font-size:clamp(24px,3vw,34px);
  font-weight:800; letter-spacing:-.02em;
}
.certs__lede{
  max-width:56ch; margin:0 auto clamp(24px,3vw,34px);
  font-size:15px; line-height:1.65; color:#4b5560;
}

.certs__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.cert{
  margin:0;
  background:#fff;
  border-radius:14px;
  padding:16px;
  box-shadow:0 12px 28px -22px rgba(20,30,45,.5);
}
.cert[hidden]{ display:none; }
.cert__doc{
  aspect-ratio:1/1.22;
  border:1px solid #e7eaef;
  border-radius:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 122'%3E%3Crect width='100' height='122' fill='%23ffffff'/%3E%3Crect x='32' y='12' width='36' height='16' rx='2' fill='%23cbd5e1'/%3E%3Cg fill='%23e5e9ef'%3E%3Crect x='18' y='40' width='64' height='4' rx='2'/%3E%3Crect x='26' y='51' width='48' height='4' rx='2'/%3E%3Crect x='18' y='63' width='64' height='3' rx='1.5'/%3E%3Crect x='18' y='71' width='64' height='3' rx='1.5'/%3E%3Crect x='18' y='79' width='44' height='3' rx='1.5'/%3E%3C/g%3E%3Ccircle cx='30' cy='100' r='8' fill='%23dde4ec'/%3E%3Crect x='48' y='99' width='34' height='3' rx='1.5' fill='%23e5e9ef'/%3E%3C/svg%3E") center/cover no-repeat;
}
.cert figcaption{
  margin-top:12px;
  font-size:12.7px; line-height:1.45; font-weight:600;
  color:#5a6672;
}

.certs__more{
  display:flex; align-items:center; gap:8px;
  margin:clamp(22px,2.6vw,30px) auto 0;
  background:transparent; border:0;
  font:700 14px var(--font); color:#5a6672;
  cursor:pointer;
}
.certs__more:hover{ color:var(--brand); }
.certs__more span{ transition:transform .2s ease; }
.certs__more[aria-expanded="true"] span{ transform:rotate(180deg); }

/* ── Final CTA ───────────────────────────────────────────────────────── */

.final-cta{
  background-color:#0e1712;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='2'%3E%3Crect x='0' y='0' width='70' height='35'/%3E%3Crect x='70' y='0' width='70' height='35'/%3E%3Crect x='-35' y='35' width='70' height='35'/%3E%3Crect x='35' y='35' width='70' height='35'/%3E%3Crect x='105' y='35' width='70' height='35'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(110% 120% at 75% 20%, #2f6142 0%, #16281d 45%, #0b120e 85%);
  color:#fff;
  padding:clamp(64px,7vw,104px) clamp(20px,3vw,44px);
  text-align:center;
}
.final-cta__inner{ max-width:900px; margin-inline:auto; }
.final-cta .section-title{ margin-inline:auto; max-width:20ch; }
.final-cta__actions{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:14px;
  margin-top:clamp(24px,3vw,34px);
}

/* ── Contact ─────────────────────────────────────────────────────────── */

.contact{
  background:#fff;
  padding:clamp(56px,6vw,90px) clamp(20px,3vw,44px);
}
.contact__card{
  max-width:1140px; margin-inline:auto;
  background:#f1ece6;
  border-radius:26px;
  padding:clamp(26px,4vw,56px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,52px);
  align-items:center;
}

.contact__info{
  margin:22px 0 26px;
  padding-left:16px;
  border-left:3px solid var(--brand);
  display:flex; flex-direction:column; gap:10px;
  font-size:14.5px; color:#4c6455;
}
.contact__info span{ font-weight:800; color:var(--ink); }

.call-pill{
  display:inline-flex; align-items:center; gap:12px;
  background:#17251d; color:#fff;
  border-radius:11px;
  padding:9px 24px 9px 9px;
  font-size:15px; font-weight:800;
}
.call-pill__icon{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  background:var(--brand); border-radius:8px;
}
.call-pill__icon svg{ width:17px; height:17px; fill:#fff; }
.call-pill:hover{ background:#0e1712; }

.quote-form{
  background:#fff;
  border-radius:18px;
  padding:clamp(22px,2.6vw,34px);
  box-shadow:0 24px 44px -34px rgba(16,48,30,.5);
}
.quote-form__title{ margin:0 0 6px; text-align:center; font-size:22px; font-weight:800; }
.quote-form__sub{ margin:0 0 22px; text-align:center; font-size:13.4px; color:var(--brand); }
.quote-form input,
.quote-form select,
.quote-form textarea{
  width:100%;
  margin-bottom:14px;
  padding:15px 16px;
  border:1px solid #e2e8e4;
  border-radius:10px;
  font:15px var(--font);
  color:var(--ink);
  background:#fff;
}
.quote-form select{
  -webkit-appearance:none; appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%235b6f63' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:16px 16px;
}
.quote-form select:invalid{ color:#8b9a91; }
.quote-form textarea{ resize:vertical; min-height:118px; }
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(27,128,67,.16);
}
.quote-form__submit{ display:block; margin:6px auto 0; padding:16px 36px; }

.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;
}

/* Honeypot — visible to bots, never to people. */
.br-hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

.quote-form__done,
.quote-form__error{
  margin:0 0 18px;
  padding:14px 16px;
  border-radius:10px;
  font-size:14px; line-height:1.6;
}
.quote-form__done{ background:#e6f2ea; color:var(--brand-dark); border:1px solid #bfdfcb; }
.quote-form__error{ background:#fdecec; color:#9b2c2c; border:1px solid #f3c9c9; }

/* ── Landing page hero ───────────────────────────────────────────────── */

.page-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#0e1712;
  color:#fff;
  padding:clamp(46px,5.5vw,80px) clamp(20px,3vw,44px) clamp(42px,5vw,66px);
}
.page-hero__bg{
  position:absolute; inset:0; z-index:-2;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='2'%3E%3Crect x='0' y='0' width='70' height='35'/%3E%3Crect x='70' y='0' width='70' height='35'/%3E%3Crect x='-35' y='35' width='70' height='35'/%3E%3Crect x='35' y='35' width='70' height='35'/%3E%3Crect x='105' y='35' width='70' height='35'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(110% 130% at 80% 25%, #2f6142 0%, #17291d 45%, #0b120e 85%);
}
.page-hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,.7) 45%, rgba(8,8,10,.3) 100%);
}
.page-hero__inner{ max-width:1140px; margin-inline:auto; }
.page-hero__title{
  margin:0 0 18px;
  max-width:20ch;
  font-size:clamp(29px,4.1vw,50px);
  font-weight:800; line-height:1.08; letter-spacing:-.022em;
}
.page-hero .hero__lede{ margin-bottom:28px; }
.page-hero--plain{ padding-bottom:clamp(34px,4vw,54px); }

.crumbs{
  display:flex; align-items:center; gap:9px;
  margin-bottom:18px;
  font-size:13px; color:rgba(255,255,255,.6);
}
.crumbs a{ color:rgba(255,255,255,.85); }
.crumbs a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ── Long-form content ───────────────────────────────────────────────── */

.prose-section{
  background:#fff;
  padding:clamp(46px,6vw,84px) clamp(20px,3vw,44px);
}
.prose{
  max-width:760px; margin-inline:auto;
  font-size:16px; line-height:1.75; color:#3f5347;
}
.prose > *:first-child{ margin-top:0; }
.prose h2{
  margin:38px 0 14px;
  font-size:clamp(22px,2.4vw,30px);
  font-weight:800; letter-spacing:-.02em; color:var(--ink);
}
.prose h3{ margin:28px 0 10px; font-size:19px; font-weight:800; color:var(--ink); }
.prose p{ margin:0 0 18px; }
.prose ul,
.prose ol{ display:grid; gap:11px; margin:0 0 22px; padding:0; }
.prose li{ position:relative; padding-left:29px; list-style:none; }
.prose ul li::before{
  content:"";
  position:absolute; left:0; top:.42em;
  width:16px; height:16px;
  background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.prose ol{ counter-reset:br-step; }
.prose ol li{ counter-increment:br-step; }
.prose ol li::before{
  content:counter(br-step) ".";
  position:absolute; left:0; top:0;
  color:var(--brand); font-weight:800;
}
.prose a{ color:var(--brand); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.prose a:hover{ color:var(--brand-dark); }
.prose strong{ color:var(--ink); font-weight:700; }
.prose img{ border-radius:14px; margin:8px 0 20px; }

/* ── Completed projects ──────────────────────────────────────────────── */

.completed{
  background:#f4efe9;
  padding:clamp(56px,6vw,96px) clamp(20px,3vw,44px);
}
.completed__inner{ max-width:1140px; margin-inline:auto; }
.completed__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.7vw,24px);
  margin-top:clamp(28px,3.2vw,44px);
}

.done{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid #e7ded4;
  border-radius:16px;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.done:hover{
  transform:translateY(-4px);
  border-color:#dcd0c2;
  box-shadow:0 22px 40px -30px rgba(40,30,20,.5);
}
.done__media{
  position:relative;
  aspect-ratio:16/10;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2'%3E%3Crect x='0' y='0' width='60' height='30'/%3E%3Crect x='60' y='0' width='60' height='30'/%3E%3Crect x='-30' y='30' width='60' height='30'/%3E%3Crect x='30' y='30' width='60' height='30'/%3E%3Crect x='90' y='30' width='60' height='30'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(150deg, var(--a) 0%, var(--b) 100%);
}
.done__badge{
  position:absolute; top:12px; right:12px;
  width:34px; height:34px;
  display:grid; place-items:center;
  background:var(--brand);
  border-radius:50%;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.5);
}
.done__badge svg{
  width:16px; height:16px;
  fill:none; stroke:#fff; stroke-width:2.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.done__body{ display:flex; flex-direction:column; gap:10px; padding:18px 20px 22px; }
.done__title{ margin:0; font-size:17px; font-weight:800; letter-spacing:-.01em; }
.done__meta{
  display:flex; align-items:center; gap:8px;
  margin:0;
  font-size:12.2px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--brand);
}
.done__dot{ color:#c3d3c9; }
.done__text{ margin:0; font-size:13.6px; line-height:1.62; color:#5b6f63; }
.done__scope{ display:grid; gap:7px; margin-top:2px; }
.done__scope li{
  position:relative;
  padding-left:22px;
  font-size:12.7px; line-height:1.5; color:#4c6455;
}
.done__scope li::before{
  content:"";
  position:absolute; left:0; top:.3em;
  width:14px; height:14px;
  background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Related / interlink cards ───────────────────────────────────────── */

.related{
  background:linear-gradient(180deg,#f7fbf8 0%,#eaf2ec 100%);
  padding:clamp(54px,6vw,92px) clamp(20px,3vw,44px);
}
.related--light{ background:#f4efe9; }
.related__inner{ max-width:1140px; margin-inline:auto; }
.related__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(26px,3vw,40px);
}
.related__card{
  position:relative;
  display:flex; flex-direction:column; gap:9px;
  background:#fff;
  border:1px solid #e3ece6;
  border-radius:16px;
  padding:24px 22px 48px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.related__card:hover{
  transform:translateY(-4px);
  border-color:#cfe3d6;
  box-shadow:0 22px 40px -28px rgba(16,48,30,.55);
}
.related__kicker{
  font-size:11.4px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand);
}
.related__title{ font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.related__text{ font-size:13.6px; line-height:1.62; color:#5b6f63; }
.related__go{
  position:absolute; left:22px; bottom:20px;
  color:var(--brand); font-weight:800;
  transition:transform .18s ease;
}
.related__card:hover .related__go{ transform:translateX(4px); }

/* ── Footer ──────────────────────────────────────────────────────────── */

.site-footer{
  background:#0e1712;
  color:rgba(255,255,255,.72);
  padding:clamp(44px,5vw,70px) clamp(20px,3vw,44px) 0;
}
.site-footer__inner{
  max-width:1140px; margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto auto;
  gap:clamp(22px,2.6vw,44px);
  align-items:start;
}
.site-footer__heading{
  margin-bottom:3px;
  color:#fff; font-size:11.5px; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase;
}
.site-footer .logo{ color:#fff; padding:0; }
.site-footer .logo__houses .house{ stroke:#0e1712; }
.site-footer .logo__houses .win{ fill:#0e1712; }
.site-footer__blurb{
  margin:16px 0 0; max-width:44ch;
  font-size:13.8px; line-height:1.65;
}
.site-footer__details{ display:flex; flex-direction:column; gap:9px; font-size:13.8px; }
.site-footer__details span{ color:#fff; font-weight:700; }
.site-footer__details a{ color:inherit; }
.site-footer__details a:hover{ color:var(--brand-light); }
.site-footer__nav{ display:flex; flex-direction:column; gap:9px; font-size:13.8px; font-weight:600; }
.site-footer__nav a:hover{ color:var(--brand-light); }
.site-footer__legal{
  max-width:1140px;
  margin:clamp(30px,3.6vw,46px) auto 0;
  padding:20px 0 26px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12.8px;
  color:rgba(255,255,255,.5);
}

.logo--image img{ max-height:56px; width:auto; }

@media (max-width:860px){
  .site-footer__inner{ grid-template-columns:1fr; }
}

@media (max-width:1024px){
  .process__inner,
  .faq__inner,
  .contact__card,
  .why__grid{ grid-template-columns:1fr; }
  .section-title--on-dark{ max-width:none; }
  .trustbar{ grid-template-columns:repeat(3,1fr); }
  .trustbar li:nth-child(3n){ border-right:0; }
  .trustbar li:nth-child(-n+3){ border-bottom:1px solid #eef2f0; }
  .review{ flex-basis:clamp(250px,46%,340px); }
  .design__inner,
  .planning__inner{ grid-template-columns:1fr; }
  .design__photo{ min-height:260px; order:-1; }
  .types__grid{ grid-template-columns:repeat(2,1fr); }
}

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

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

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

@media (max-width:640px){
  .services__grid{ grid-template-columns:1fr; }
  .mini-badges{ grid-template-columns:repeat(2,1fr); }
  .mini-badges li:nth-child(2){ border-right:0; }
  .mini-badges li:nth-child(-n+2){ border-bottom:1px solid #e3ece6; }
  .process__rail li{ grid-template-columns:40px minmax(0,1fr) 38%; }
  .why__tab{ font-size:13.6px; padding:14px 15px; }
  .contact__card{ border-radius:20px; }
  .call-pill{ width:100%; justify-content:center; }
  .trustbar{ grid-template-columns:repeat(2,1fr); }
  .trustbar li{ font-size:11px; padding:16px 8px; }
  .trustbar li:nth-child(2n){ border-right:0; }
  .trustbar li:nth-child(-n+4){ border-bottom:1px solid #eef2f0; }
  .reviews__head{ grid-template-columns:1fr; }
  .reviews__head .reviews__nav{ display:none; }
  .review{ flex-basis:86%; }
  .types__grid{ grid-template-columns:1fr; }
  .certs__grid{ grid-template-columns:1fr; }
  .final-cta__actions .btn{ width:100%; }
  .projects__grid{ grid-template-columns:1fr; }
  .about__media{ grid-template-columns:1fr; }
  .about__photo--tall{ min-height:220px; }
  .seal{ width:78px; height:78px; bottom:-38px; }
  .rating-card{ margin-top:30px; }
  .ticks--grid{ grid-template-columns:1fr; }
  .about__actions{ flex-direction:column; align-items:stretch; }
  .about__actions .btn{ justify-content:center; }
  .phone-pill{ justify-content:center; }
  .section-title{ max-width:none; }
  .ticks{ gap:12px 20px; }
  .ticks li{ font-size:13.5px; }
  .services__foot{ flex-direction:column; }
  .services__foot .btn{ width:100%; justify-content:space-between; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}