:root{
  --ink:#111315;
  --muted:#6f7478;
  --line:#e6e7e8;
  --paper:#f7f7f4;
  --accent:#b8d4df;
  --surface:#eef0ef;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Manrope,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

header{
  position:fixed;
  z-index:20;
  top:0;left:0;
  width:100%;
  height:88px;
  padding:0 5vw;
  display:flex;
  align-items:center;
  gap:34px;
  color:#fff;
  transition:.35s;
}
header.scrolled{
  height:72px;
  background:rgba(15,17,19,.88);
  backdrop-filter:blur(18px);
  box-shadow:0 8px 30px #0002;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:600;
  white-space:nowrap;
}
.brandLogo{
  width:39px;
  height:39px;
  border-radius:50%;
  object-fit:cover;
  background:#111;
  border:1px solid #ffffff70;
}
.brandMark{
  width:39px;
  height:39px;
  border:1px solid #ffffff70;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:12px;
  letter-spacing:-1px;
  background:#fff;
  color:#111;
}
nav{
  margin-left:auto;
  display:flex;
  gap:30px;
  font-size:14px;
}
nav a{opacity:.8}
nav a:hover{opacity:1}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 22px;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-weight:700;
  font-size:14px;
  transition:.25s;
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btnSmall{padding:11px 17px;font-size:13px}
.ghost{
  background:transparent;
  color:#fff;
  border-color:#ffffff66;
}
#menuBtn{
  display:none;
  margin-left:auto;
  border:0;
  background:none;
  color:#fff;
  font-size:26px;
}

/* HERO — imagem original mantida */
.hero{
  height:100vh;
  min-height:680px;
  position:relative;
  color:#fff;
  display:flex;
  align-items:flex-end;
  padding:0 7vw 11vh;
}
.heroVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.heroBg{
  position:absolute;
  inset:0;
  background:url('../assets/images/portfolio-01.png') center/cover no-repeat;
  transform:scale(1.02);
  z-index:0;
}
.hero:has(.heroVideo[src]) .heroBg,
.hero:has(video.heroVideo) .heroBg{
  opacity:0;
  pointer-events:none;
}
.heroShade{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(5,7,8,.78) 0%,rgba(5,7,8,.42) 50%,rgba(5,7,8,.18) 100%),
    linear-gradient(0deg,rgba(5,7,8,.65),transparent 55%);
}
.heroContent{position:relative;z-index:2;max-width:780px}
.hero .scroll{z-index:2}
.eyebrow{
  font-size:12px;
  letter-spacing:.22em;
  font-weight:800;
}
.eyebrow.dark{color:#70828a}
.hero h1{
  font-size:clamp(52px,7vw,100px);
  line-height:.95;
  letter-spacing:-.055em;
  margin:20px 0 24px;
}
.hero h1 em{
  font-family:Georgia,serif;
  font-weight:400;
}
.hero p{
  font-size:18px;
  line-height:1.7;
  max-width:650px;
  color:#ffffffc9;
}
.actions{
  display:flex;
  gap:12px;
  margin-top:34px;
  flex-wrap:wrap;
}
.scroll{
  position:absolute;
  right:5vw;
  bottom:5vh;
  font-size:11px;
  letter-spacing:.16em;
  color:#ffffffaa;
}

.section{padding:120px 7vw}
.sectionHead{
  display:flex;
  align-items:flex-start;
  gap:5vw;
  margin-bottom:65px;
}
.sectionHead .eyebrow{
  min-width:120px;
  padding-top:12px;
}
.sectionHead h2{
  font-size:clamp(38px,5vw,68px);
  letter-spacing:-.045em;
  line-height:1.05;
  margin:0;
}
.sectionHead p{
  margin-left:auto;
  max-width:330px;
  color:var(--muted);
  line-height:1.7;
}

.aboutGrid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:7vw;
  align-items:center;
}
.aboutText>p{
  font-size:19px;
  line-height:1.8;
  color:#4e5357;
}
.features{
  margin-top:45px;
  border-top:1px solid var(--line);
}
.features div{
  display:grid;
  grid-template-columns:50px 1fr;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.features b{color:#87979d}
.aboutVisual{margin:0}
.aboutImg{
  width:100%;
  height:600px;
  object-fit:cover;
  border-radius:28px;
}
.aboutVisual figcaption{
  margin-top:14px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}

.services{background:var(--surface)}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.card{
  position:relative;
  isolation:isolate;
  background:#1a1d1f;
  padding:0;
  border-radius:16px;
  aspect-ratio:3/4;
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  box-shadow:0 16px 48px rgba(0,0,0,.12);
  transition:transform .35s ease, box-shadow .35s ease;
  overflow:hidden;
  color:#fff;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}
.card img{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s ease;
}
.card:hover img{transform:scale(1.04)}
.cardBody{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:36px 28px 28px;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.72) 42%,
    rgba(0,0,0,.18) 72%,
    rgba(0,0,0,0) 100%
  );
}
.card .num{
  display:flex;
  align-items:center;
  gap:.55em;
  color:rgba(255,255,255,.88);
  font-size:11px;
  letter-spacing:.16em;
  font-weight:500;
  text-transform:uppercase;
}
.card .num::before{
  content:"";
  width:18px;
  height:1px;
  background:currentColor;
  flex-shrink:0;
}
.card .num span{font-weight:800}
.card h3{
  font-size:clamp(26px,2.4vw,34px);
  line-height:1.1;
  letter-spacing:-.03em;
  margin:14px 0 12px;
  max-width:12ch;
}
.card p{
  color:rgba(255,255,255,.82);
  font-size:14px;
  line-height:1.65;
  margin:0 0 22px;
  max-width:34ch;
}
.cardCta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:auto;
  flex-shrink:0;
  padding:13px 20px;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-size:13px;
  font-weight:800;
  letter-spacing:.01em;
  transition:.25s;
}
.cardCta:hover{
  background:#f0f0f0;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.cardCta::after{
  content:"→";
  font-weight:700;
}
.cardActions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 22px;
}
.cardLink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.75);
  padding-bottom:2px;
  transition:.2s;
}
.cardLink::after{content:"→"}
.cardLink:hover{
  color:#fff;
  border-bottom-color:#fff;
  opacity:.85;
}

/* Portfolio by category */
.portfolioCats{padding-top:40px}
.catBlock{
  margin-top:70px;
  padding-top:40px;
  border-top:1px solid var(--line);
}
.catHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}
.catNum{
  display:block;
  font-size:12px;
  letter-spacing:.16em;
  font-weight:800;
  color:#87979d;
  margin-bottom:10px;
}
.catHead h3{
  font-size:clamp(28px,3.5vw,42px);
  letter-spacing:-.04em;
  margin:0 0 10px;
}
.catHead p{
  margin:0;
  max-width:520px;
  color:var(--muted);
  line-height:1.7;
}
.catOrcamento{
  flex-shrink:0;
  background:#111;
  color:#fff;
  white-space:nowrap;
}
.catOrcamento:hover{background:#1c2a30}
.catGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.catItem{
  position:relative;
  padding:0;
  border:0;
  border-radius:18px;
  overflow:hidden;
  background:#ddd;
  cursor:zoom-in;
  aspect-ratio:4/5;
}
.catItem img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .55s ease;
}
.catItem:hover img{transform:scale(1.04)}

.fadeImg{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .75s ease, transform .75s ease;
}
.fadeImg.visible{
  opacity:1;
  transform:none;
}
.fadeImg:nth-child(2){transition-delay:.06s}
.fadeImg:nth-child(3){transition-delay:.12s}
.fadeImg:nth-child(4){transition-delay:.18s}
.fadeImg:nth-child(5){transition-delay:.24s}
.fadeImg:nth-child(6){transition-delay:.3s}
.fadeImg:nth-child(7){transition-delay:.36s}
.fadeImg:nth-child(8){transition-delay:.42s}

.statement{
  position:relative;
  color:#fff;
  min-height:75vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:100px 6vw;
  overflow:hidden;
}
.statementBg{
  position:absolute;
  inset:0;
  background:url('../assets/media/guarda-corpo-varanda.webp') center/cover no-repeat;
  transform:scale(1.04);
}
.statementShade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(8,10,12,.72),rgba(8,10,12,.82));
}
.statement > .reveal{position:relative;z-index:1}
.statement span{
  font-size:11px;
  letter-spacing:.2em;
  color:#a6adb0;
}
.statement h2{
  font-size:clamp(48px,7vw,96px);
  line-height:1.02;
  letter-spacing:-.055em;
  margin:24px 0;
}
.statement i{
  font-family:Georgia,serif;
  font-weight:400;
  color:#c9dce3;
}

/* Zoom Parallax (vanilla port of zoom-parallax) */
.zoomBlock{
  background:var(--paper);
  color:var(--ink);
}
.zoomIntro{
  min-height:42vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:80px 7vw 40px;
  position:relative;
}
.zoomIntro::before{
  content:"";
  position:absolute;
  width:70vmin;
  height:70vmin;
  border-radius:50%;
  background:radial-gradient(circle,rgba(155,184,194,.2),transparent 65%);
  pointer-events:none;
}
.zoomIntro .eyebrow{
  position:relative;
  margin-bottom:18px;
}
.zoomIntro h2{
  position:relative;
  font-size:clamp(42px,7vw,84px);
  line-height:.95;
  letter-spacing:-.055em;
  margin:0;
}
.zoomIntro h2 em{
  font-family:Georgia,serif;
  font-weight:400;
  font-style:italic;
  color:#5f7f8c;
}
.sectionHeadWrap{
  padding:100px 7vw 20px;
}
.galleryZoom .sectionHeadWrap{
  padding-bottom:10px;
}
.zoomParallax{
  position:relative;
}
.zoomTrack{
  height:300vh;
  position:relative;
}
.zoomSticky{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  background:var(--paper);
}
.zoomItem{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  will-change:transform;
}
.zoomFrame{
  position:relative;
  height:25vh;
  width:25vw;
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  background:#ddd;
}
.zoomFrame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
/* Center zoom photo — larger frame so Full HD stays sharp while scaling */
.zoomItem0 .zoomFrame{
  height:28vh;
  width:28vw;
  border-radius:20px;
  box-shadow:0 28px 70px rgba(0,0,0,.22);
}
.zoomItem0 .zoomFrame img{
  image-rendering:auto;
}
/* Spread positions so cards breathe / overlap less */
.zoomItem1 .zoomFrame{top:-34vh;left:8vw;height:26vh;width:30vw}
.zoomItem2 .zoomFrame{top:-14vh;left:-32vw;height:38vh;width:18vw}
.zoomItem3 .zoomFrame{top:-2vh;left:34vw;height:24vh;width:22vw}
.zoomItem4 .zoomFrame{top:32vh;left:10vw;height:22vh;width:18vw}
.zoomItem5 .zoomFrame{top:32vh;left:-30vw;height:22vh;width:26vw}
.zoomItem6 .zoomFrame{top:28vh;left:30vw;height:16vh;width:16vw}
@media(max-width:850px){
  .zoomTrack{height:260vh}
  .zoomIntro{min-height:36vh;padding:70px 24px 28px}
  .zoomIntro h2{font-size:42px}
  .sectionHeadWrap{padding:85px 24px 10px}
  .zoomFrame{width:38vw;height:20vh;border-radius:14px}
  .zoomItem0 .zoomFrame{width:40vw;height:24vh}
  .zoomItem1 .zoomFrame{top:-30vh;left:6vw;height:22vh;width:42vw}
  .zoomItem2 .zoomFrame{top:-12vh;left:-34vw;height:30vh;width:28vw}
  .zoomItem3 .zoomFrame{top:0;left:30vw;height:18vh;width:32vw}
  .zoomItem4 .zoomFrame{top:28vh;left:8vw;height:18vh;width:28vw}
  .zoomItem5 .zoomFrame{top:28vh;left:-32vw;height:18vh;width:34vw}
  .zoomItem6 .zoomFrame{top:24vh;left:28vw;height:14vh;width:20vw}
}

/* Coverflow carousel — Inspirações e acabamentos (full width) */
.gallery{
  background:var(--paper);
  overflow:hidden;
  padding-left:0;
  padding-right:0;
}
.gallery .sectionHead{
  padding-left:7vw;
  padding-right:7vw;
}
.coverflowWrap{
  width:100vw;
  max-width:100%;
  margin:0;
  padding:20px 0 40px;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
.CarouselCoverflow{
  width:100%;
  padding-bottom:64px !important;
}
.CarouselCoverflow .swiper-slide{
  width:min(420px, 72vw);
  height:min(540px, 70vh);
  border-radius:22px;
  overflow:hidden;
  background:#ddd;
  box-shadow:0 22px 50px rgba(0,0,0,.16);
}
.CarouselCoverflow .swiper-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  cursor:zoom-in;
}
.CarouselCoverflow .swiper-pagination-bullet{
  background:#111 !important;
  opacity:.25;
}
.CarouselCoverflow .swiper-pagination-bullet-active{
  opacity:1;
  background:#5f7f8c !important;
}
.coverNav{
  position:absolute;
  top:44%;
  z-index:5;
  width:52px;
  height:52px;
  border:0;
  border-radius:50%;
  background:#111315;
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
  transition:.25s;
}
.coverNav:hover{
  transform:scale(1.06);
  background:#1c2a30;
}
.coverPrev{left:max(16px, 3vw)}
.coverNext{right:max(16px, 3vw)}
@media(max-width:850px){
  .gallery .sectionHead{padding-left:24px;padding-right:24px}
  .CarouselCoverflow .swiper-slide{
    width:min(280px, 78vw);
    height:min(380px, 58vh);
  }
  .coverNav{width:44px;height:44px}
  .coverPrev{left:10px}
  .coverNext{right:10px}
}

.process{
  background:#fff;
  position:relative;
  overflow:hidden;
}
.process::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-120px;
  top:-80px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(155,184,194,.28),transparent 70%);
  pointer-events:none;
}
.processWrap{position:relative}
.processLine{
  position:absolute;
  top:34px;
  left:8%;
  right:8%;
  height:2px;
  background:var(--line);
  z-index:0;
  overflow:hidden;
}
.processLine i{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#9bb8c2,#5f7f8c);
  transition:width .6s ease;
}
.processSteps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  position:relative;
  z-index:1;
}
.processSteps li{
  padding:28px 24px 32px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(247,247,244,.92);
  backdrop-filter:blur(8px);
  transition:.35s;
  transform:translateY(18px);
  opacity:.55;
}
.processSteps li.visible{
  opacity:1;
  transform:none;
}
.processSteps li.isActive{
  opacity:1;
  transform:none;
  border-color:#9bb8c2;
  background:#fff;
  box-shadow:0 18px 48px rgba(95,127,140,.16);
}
.processSteps li.isDone{
  opacity:1;
  transform:none;
  border-color:#b7c9cf;
  background:#fff;
}
.processSteps li:hover{
  border-color:#c5d5db;
  background:#fff;
  box-shadow:0 16px 40px #0000000a;
}
.stepBadge{
  position:relative;
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#111315;
  color:#fff;
  margin-bottom:8px;
  box-shadow:0 0 0 0 rgba(155,184,194,.45);
  transition:.35s;
}
.stepNum,
.stepCheck{
  grid-area:1/1;
  transition:.3s ease;
}
.stepNum{
  font-size:12px;
  letter-spacing:.12em;
  font-weight:800;
}
.stepCheck{
  display:grid;
  place-items:center;
  opacity:0;
  transform:scale(.6);
}
.processSteps li.isActive .stepBadge{
  background:#5f7f8c;
  box-shadow:0 0 0 10px rgba(155,184,194,.22);
}
.processSteps li.isDone .stepBadge{
  background:#2f6b4f;
  box-shadow:0 0 0 8px rgba(47,107,79,.16);
}
.processSteps li.isDone .stepNum{
  opacity:0;
  transform:scale(.6);
}
.processSteps li.isDone .stepCheck{
  opacity:1;
  transform:scale(1);
}
.processSteps h3{
  font-size:22px;
  margin:18px 0 10px;
  letter-spacing:-.03em;
}
.processSteps p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
  font-size:15px;
}

.cta{
  background:#fff;
  padding:90px 7vw 110px;
  color:var(--ink);
}
.matchGrid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:56px;
  align-items:stretch;
  max-width:1180px;
  margin:0 auto;
}
.matchForm h2{
  font-size:clamp(28px,3.4vw,40px);
  letter-spacing:-.04em;
  line-height:1.15;
  margin:0 0 28px;
  max-width:18ch;
}
.formPair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.matchForm > label,
.matchForm .formPair label{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
  font-size:13px;
  font-weight:700;
  color:#344054;
}
.matchForm input,
.matchForm textarea{
  width:100%;
  border:1px solid #d0d5dd;
  border-radius:10px;
  padding:12px 14px;
  font:inherit;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  background:#fff;
  outline:none;
  transition:.2s;
  resize:vertical;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.matchForm input:focus,
.matchForm textarea:focus{
  border-color:#98a2b3;
  box-shadow:0 0 0 4px rgba(152,162,179,.18);
}
.phoneField{
  display:flex;
  align-items:center;
  gap:0;
  border:1px solid #d0d5dd;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.phonePrefix{
  flex-shrink:0;
  padding:12px 12px 12px 14px;
  border-right:1px solid #eaecf0;
  font-size:14px;
  font-weight:600;
  color:#475467;
  background:#f9fafb;
  white-space:nowrap;
}
.phoneField input{
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.serviceFieldset{
  border:0;
  margin:8px 0 20px;
  padding:0;
}
.serviceFieldset legend{
  font-size:13px;
  font-weight:700;
  color:#344054;
  margin-bottom:12px;
  padding:0;
}
.serviceChecks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 18px;
}
.check{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:10px !important;
  margin:0 !important;
  font-size:14px !important;
  font-weight:500 !important;
  color:#475467;
  cursor:pointer;
}
.check input{
  width:18px;
  height:18px;
  accent-color:#111315;
  flex-shrink:0;
  box-shadow:none;
  padding:0;
}
.matchSubmit{
  width:100%;
  border:0;
  border-radius:10px;
  padding:14px 18px;
  background:#111315;
  color:#fff;
  font:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:.25s;
}
.matchSubmit:hover{
  background:#1d2939;
  transform:translateY(-1px);
}
.formNotice{
  margin:14px 0 0;
  font-size:13px;
  line-height:1.6;
  color:#667085;
}
.formNotice a{
  color:#111;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
#formStatus{
  min-height:1.2em;
  margin:8px 0 0;
  font-size:13px;
  font-weight:700;
  color:#027a48;
}
.matchVisual{
  position:relative;
  min-height:640px;
  border-radius:32px;
  overflow:hidden;
  background:#111;
}
.matchVisual img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
}
.matchVisualShade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.72) 100%);
}
.matchBadge{
  position:absolute;
  top:28px;
  left:28px;
  z-index:2;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(17,19,21,.55);
  color:#fff;
  font-size:12px;
  font-weight:600;
  backdrop-filter:blur(10px);
}
.matchQuote{
  position:absolute;
  left:28px;
  right:28px;
  bottom:110px;
  z-index:2;
  margin:0;
  color:#fff;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.25;
  letter-spacing:-.02em;
}
.matchStats{
  position:absolute;
  left:20px;
  right:20px;
  bottom:20px;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.matchStats div{
  padding:14px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  color:#fff;
}
.matchStats strong{
  display:block;
  font-size:13px;
  margin-bottom:4px;
}
.matchStats span{
  font-size:12px;
  opacity:.8;
  line-height:1.4;
}
.light{background:#111;color:#fff}
.lightGhost{border-color:#1115;color:#111}

footer{
  padding:38px 5vw;
  background:#0d0f10;
  color:#fff;
  display:flex;
  align-items:center;
  gap:30px;
  font-size:12px;
}
footer .brandLogo{border-color:#ffffff30}
footer p{margin:auto;color:#ffffff80}
footer>div{display:flex;gap:20px}

.modal{
  position:fixed;
  z-index:50;
  inset:0;
  background:#000e;
  display:none;
  place-items:center;
  padding:4vw;
}
.modal.open{display:grid}
.modal img{
  max-width:94vw;
  max-height:90vh;
  border-radius:16px;
}
.modal button{
  position:absolute;
  right:25px;
  top:20px;
  border:0;
  background:none;
  color:#fff;
  font-size:40px;
  cursor:pointer;
}

.floatingWa{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:30;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#111;
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 12px 32px #00000040;
  transition:.25s;
}
.floatingWa:hover{
  transform:translateY(-3px) scale(1.04);
  background:#1c2428;
}

.reveal{
  opacity:0;
  transform:translateY(25px);
  transition:.8s ease;
}
.reveal.visible{
  opacity:1;
  transform:none;
}

@media(max-width:1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .processSteps{grid-template-columns:repeat(2,1fr)}
  .processLine{display:none}
  .matchGrid{grid-template-columns:1fr;gap:36px}
  .matchVisual{min-height:420px;border-radius:28px;order:-1}
  .catGrid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:850px){
  header{height:72px;padding:0 22px}
  .desktopCta,nav{display:none}
  #menuBtn{display:block}
  nav.open{
    position:absolute;
    display:flex;
    flex-direction:column;
    top:72px;
    left:0;
    width:100%;
    padding:25px;
    background:#111;
    gap:20px;
  }
  .hero{padding:0 24px 11vh;min-height:650px}
  .hero h1{font-size:54px}
  .hero p{font-size:16px}
  .scroll{display:none}
  .section{padding:85px 24px}
  .sectionHead{display:block;margin-bottom:42px}
  .sectionHead .eyebrow{display:block;margin-bottom:16px}
  .sectionHead p{margin:20px 0 0}
  .aboutGrid,.cards,.processSteps{grid-template-columns:1fr}
  .aboutImg{height:430px}
  .aboutVisual{order:-1}
  .card{
    aspect-ratio:4/5;
    min-height:380px;
  }
  .cardBody{padding:32px 22px 24px}
  .card h3{max-width:none}
  .catHead{flex-direction:column;align-items:flex-start}
  .catGrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .catItem{border-radius:14px}
  .cta{padding:70px 24px 90px}
  .formPair,.serviceChecks{grid-template-columns:1fr}
  .matchForm h2{max-width:none}
  .matchVisual{min-height:360px;border-radius:24px}
  .matchQuote{bottom:100px;font-size:22px}
  .matchStats{grid-template-columns:1fr}
  footer{
    align-items:flex-start;
    flex-direction:column;
  }
  footer p{margin:0}
  footer>div{flex-wrap:wrap}
  .floatingWa{right:16px;bottom:16px}
}