/* ==========================================================================
   home.css — layout "home" (página /)
   Todo seletor prefixado com body.page-home (sem vazamento).

   Anatomia (conferida em extraction/screenshots/home--desktop.png e
   home--mobile.png):
     .hm-hero        — faixa full-bleed com slideshow de 4 imagens, 2 h1 e
                       card de form translúcido escuro (oculto no phone)
     .hm-about       — watermark "Welcome" + Why Choose Us? + lista + slideshow
     .hm-logos       — marquee de 11 logos (autoscroll, pausa no hover)
     .hm-cta         — banner "Free Design Consultation" (imagem + overlay)
     .hm-process     — watermark "Our Process" + 3 cards (sticky stacking
                       no desktop; cinza #7d7d7d / vermelho #c23030 / navy)
     .hm-gallery-cta — banda "Our Gallery" full-bleed (proporção da imagem)
     .hm-reviews     — fundo #f2f2f2, slider de 6 cards + badges de rating
   Breakpoints: mobile <=809.98px · tablet 810–1199.98px · desktop >=1200px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Slideshow crossfade (hero, about, gallery-cta)
   -------------------------------------------------------------------------- */
body.page-home .hm-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
}
body.page-home .hm-hero-bg .hm-slide {
  animation: hm-fade4 20s linear infinite;
}
body.page-home .hm-hero-bg .hm-slide:nth-child(2) { animation-delay: 5s; }
body.page-home .hm-hero-bg .hm-slide:nth-child(3) { animation-delay: 10s; }
body.page-home .hm-hero-bg .hm-slide:nth-child(4) { animation-delay: 15s; }

body.page-home .hm-about-media .hm-slide,
body.page-home .hm-gcta-bg .hm-slide {
  animation: hm-fade3 15s linear infinite;
}
body.page-home .hm-about-media .hm-slide:nth-child(2),
body.page-home .hm-gcta-bg .hm-slide:nth-child(2) { animation-delay: 5s; }
body.page-home .hm-about-media .hm-slide:nth-child(3),
body.page-home .hm-gcta-bg .hm-slide:nth-child(3) { animation-delay: 10s; }
/* Gallery-cta: 1º slide é camada-base sempre visível (slides 2-3 fazem o
   crossfade por cima). A banda nunca fica só com a cor placeholder, mesmo
   se os slides lazy ainda não carregaram (ex.: captura full-page). */
body.page-home .hm-gcta-bg .hm-slide:first-child {
  opacity: 1;
  animation: none;
}

@keyframes hm-fade4 {
  0%, 22% { opacity: 1; }
  30%, 92% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes hm-fade3 {
  0%, 28% { opacity: 1; }
  38%, 90% { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .hm-slide { animation: none !important; }
  body.page-home .hm-slide:first-child { opacity: 1; }
  body.page-home .hm-logos-track { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
body.page-home .hm-hero {
  position: relative;
  overflow: hidden;
}
body.page-home .hm-hero-bg {
  position: absolute;
  inset: 0;
}
body.page-home .hm-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .28);
}
body.page-home .hm-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items: center;
  min-height: min(calc(100vh - 130px), 800px);
  padding: 60px 40px;
}
body.page-home .hm-hero-eyebrow {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  text-transform: capitalize;
  margin-bottom: 14px;
}
body.page-home .hm-hero-title {
  color: #fff;
}
body.page-home .hm-hero-title span { color: #fff; }
body.page-home .hm-hero-cta { margin-top: 32px; }

/* Card de formulário translúcido (oculto no phone via .only-desktop) */
body.page-home .hm-hero-form {
  background: rgba(0, 0, 0, .38);
  border-radius: var(--radius-card);
  padding: 30px 28px;
  max-width: 560px;
  width: 100%;
  justify-self: end;
}
body.page-home .hm-hero-form-title {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
body.page-home .hm-hero-form-sub {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 18px;
}
body.page-home .hm-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.page-home .hm-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* Inputs brancos sólidos com placeholder cinza (como no original);
   só o card externo é translúcido escuro. */
body.page-home .hm-form input,
body.page-home .hm-form textarea {
  width: 100%;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: 500;
  color: #222;
  outline: none;
}
body.page-home .hm-form input::placeholder,
body.page-home .hm-form textarea::placeholder { color: #8c8c8c; }
body.page-home .hm-form input:focus,
body.page-home .hm-form textarea:focus { border-color: #999; }
body.page-home .hm-form textarea { min-height: 96px; resize: vertical; }
body.page-home .hm-form .form-submit {
  width: 100%;
  border-radius: 10px;
  padding: 14px;
  font-size: 14px;
}
body.page-home .hm-form .form-status.err { color: #ffb3b3; }
body.page-home .hm-form .form-status.ok { color: #b8f5c9; }

@media (min-width: 810px) and (max-width: 1199.98px) {
  body.page-home .hm-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    min-height: 560px;
  }
}
@media (max-width: 809.98px) {
  body.page-home .hm-hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 440px;
    padding: 56px 20px;
  }
  body.page-home .hm-hero-eyebrow { font-size: 15px; margin-bottom: 10px; }
  body.page-home .hm-hero-cta { margin-top: 26px; }
}

/* --------------------------------------------------------------------------
   Watermark + heading sobreposto (About / Our Process / Reviews)
   -------------------------------------------------------------------------- */
body.page-home .hm-watermark {
  font-family: var(--font-system);
  font-size: 100px;
  font-weight: 900;
  line-height: 1;
  color: var(--c-grey);
  text-transform: capitalize;
  white-space: nowrap;
}
body.page-home .hm-watermark-rev { color: #dedede; }
body.page-home .hm-wm-heading {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: capitalize;
  color: #222;
  margin: -52px 0 0 40px;
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  body.page-home .hm-watermark { font-size: 90px; }
  body.page-home .hm-wm-heading { font-size: 34px; }
}
@media (max-width: 809.98px) {
  body.page-home .hm-watermark { font-size: 60px; white-space: normal; }
  body.page-home .hm-wm-heading { font-size: 29px; margin: -30px 0 0 20px; }
}

/* --------------------------------------------------------------------------
   About (Why Choose Us?)
   -------------------------------------------------------------------------- */
body.page-home .hm-about-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items: center;
}
body.page-home .hm-about-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin: 34px 0 26px;
}
body.page-home .hm-about-list li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 500;
  color: var(--c-body);
}
body.page-home .hm-about-list svg { flex: 0 0 22px; color: #222; }
body.page-home .hm-about-para { margin-bottom: 34px; }
body.page-home .hm-about-media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  min-height: 460px;
  align-self: stretch;
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  body.page-home .hm-about-grid { gap: 40px; }
  body.page-home .hm-about-media { min-height: 380px; }
}
@media (max-width: 809.98px) {
  body.page-home .hm-about-grid { grid-template-columns: 1fr; gap: 40px; }
  body.page-home .hm-about-text { text-align: left; }
  body.page-home .hm-about-text .hm-watermark,
  body.page-home .hm-about-text .hm-wm-heading { text-align: center; margin-left: 0; }
  body.page-home .hm-about-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin: 28px 0 22px;
  }
  body.page-home .hm-about-btn { text-align: center; }
  body.page-home .hm-about-media { min-height: 0; height: 230px; align-self: auto; }
}

/* --------------------------------------------------------------------------
   Marquee de logos (autoscroll CSS, pausa no hover)
   -------------------------------------------------------------------------- */
body.page-home .hm-logos {
  overflow: hidden;
  padding: 50px 0 60px;
}
body.page-home .hm-logos-track {
  display: flex;
  width: max-content;
  animation: hm-marquee 35s linear infinite;
}
body.page-home .hm-logos:hover .hm-logos-track { animation-play-state: paused; }
/* Slots fixos por item (como o original): desktop ~4 logos visíveis em
   1440px (pitch ~292px), mobile ~3 visíveis em 390px (pitch ~162px). */
body.page-home .hm-logos-row {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-right: 32px;
}
body.page-home .hm-logos-row li {
  flex: 0 0 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-home .hm-logos-row img {
  max-height: 88px;
  max-width: 240px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@keyframes hm-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 809.98px) {
  body.page-home .hm-logos { padding: 36px 0 44px; }
  body.page-home .hm-logos-row { gap: 12px; padding-right: 12px; }
  body.page-home .hm-logos-row li { flex-basis: 150px; }
  body.page-home .hm-logos-row img { max-height: 60px; max-width: 140px; }
}

/* --------------------------------------------------------------------------
   CTA banner (Free Design Consultation)
   -------------------------------------------------------------------------- */
body.page-home .hm-cta {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
body.page-home .hm-cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.page-home .hm-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
}
body.page-home .hm-cta-overlay {
  position: relative;
  text-align: center;
  padding: 60px 20px 48px;
  max-width: 720px;
}
body.page-home .hm-cta-overlay h2 { color: #fff; }
body.page-home .hm-cta-overlay p {
  color: #fff;
  margin: 10px 0 22px;
}
body.page-home .hm-btn-white {
  background: #fff;
  color: #000;
  border-radius: var(--radius-btn);
  padding: 15px 30px;
}
body.page-home .hm-btn-white:hover { background: var(--c-grey); }
body.page-home .hm-btn-white-small {
  border-radius: var(--radius-btn-small);
  padding: 11px 22px;
  font-size: 13px;
}
@media (max-width: 809.98px) {
  body.page-home .hm-cta { min-height: 325px; }
  body.page-home .hm-cta-overlay { padding: 48px 20px 20px; }
}

/* --------------------------------------------------------------------------
   Our Process (3 cards, sticky stacking no desktop)
   -------------------------------------------------------------------------- */
body.page-home .hm-wm-header { margin-bottom: 56px; }
body.page-home .hm-steps {
  max-width: 1160px;
  margin: 0 auto;
}
body.page-home .hm-step {
  display: flex;
  gap: 33px;
  align-items: stretch;
  border-radius: var(--radius-section);
  padding: 40px;
  overflow: hidden;
}
/* respiro grande entre cards = distância de scroll do efeito de stack */
body.page-home .hm-step + .hm-step { margin-top: 332px; }
body.page-home .hm-step-1 { background: #7d7d7d; }
body.page-home .hm-step-2 { background: #c23030; }
body.page-home .hm-step-3 { background: var(--c-navy); }
body.page-home .hm-step-text {
  flex: 1 1 0;
  padding-top: 33px;
}
body.page-home .hm-step-kicker {
  font-size: 21px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 10px;
}
body.page-home .hm-step-title {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 18px;
}
body.page-home .hm-step-text p {
  color: #fff;
}
body.page-home .hm-step-text p + p { margin-top: 14px; }
body.page-home .hm-step-media {
  flex: 1 1 0;
  min-height: 486px;
  border-radius: var(--radius-card);
  overflow: hidden;
}
body.page-home .hm-step-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1200px) {
  /* sticky stacking: cada card "gruda" e o seguinte desliza por cima */
  body.page-home .hm-step {
    position: sticky;
    top: 130px;
  }
  /* gap de ~200px entre o último card e a banda Our Gallery (original) */
  body.page-home .hm-process .container { padding-bottom: 200px; }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  body.page-home .hm-step { flex-direction: column; gap: 28px; }
  body.page-home .hm-step-text { flex: none; padding-top: 0; }
  body.page-home .hm-step-title { font-size: 35px; }
  body.page-home .hm-step-media { flex: none; min-height: 0; height: 420px; }
  body.page-home .hm-step + .hm-step { margin-top: 60px; }
}
@media (max-width: 809.98px) {
  body.page-home .hm-wm-header { margin-bottom: 40px; }
  body.page-home .hm-step {
    flex-direction: column;
    gap: 22px;
    border-radius: 40px;
    padding: 24px 20px 20px;
  }
  body.page-home .hm-step + .hm-step { margin-top: 100px; }
  body.page-home .hm-step-text { flex: none; padding-top: 0; }
  body.page-home .hm-step-kicker { font-size: 17px; }
  body.page-home .hm-step-title { font-size: 28px; margin-bottom: 14px; }
  body.page-home .hm-step-media { flex: none; min-height: 0; height: 205px; }
}

/* --------------------------------------------------------------------------
   Our Gallery (banda full-bleed na proporção da imagem)
   -------------------------------------------------------------------------- */
body.page-home .hm-gallery-cta {
  position: relative;
  overflow: hidden;
  aspect-ratio: 906 / 587;
  max-height: 980px;
  display: flex;
  /* o bloco de texto fica ABAIXO do centro da banda (~59% no original);
     o offset em vw escala junto com a banda full-bleed */
  align-items: flex-start;
  justify-content: center;
}
body.page-home .hm-gcta-bg { position: absolute; inset: 0; }
body.page-home .hm-gallery-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .22);
}
body.page-home .hm-gcta-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px;
  margin-top: min(32vw, 560px); /* cap p/ quando max-height trava a banda */
}
body.page-home .hm-gcta-overlay h2 {
  color: #fff;
  margin-bottom: 16px;
}
@media (max-width: 809.98px) {
  body.page-home .hm-gallery-cta {
    /* no phone o original não usa a proporção da imagem: banda ~365px,
       com o heading ancorado na base (topo do h2 a ~321px do topo da banda)
       e SEM o botão SEE GALLERY */
    aspect-ratio: auto;
    height: 365px;
    align-items: flex-end;
  }
  body.page-home .hm-gcta-overlay { margin-top: 0; padding-bottom: 16px; }
  body.page-home .hm-gcta-overlay h2 { margin-bottom: 0; }
  body.page-home .hm-gcta-overlay .btn { display: none; }
}

/* --------------------------------------------------------------------------
   Reviews (fundo cinza, slider de 6 cards + ratings)
   -------------------------------------------------------------------------- */
body.page-home .hm-reviews { background: #f2f2f2; }
body.page-home .hm-rev-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 48px;
}
body.page-home .hm-rev-head-mobile {
  font-size: 29px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: capitalize;
  color: #222;
}
/* "80+ Reviews" centralizado sobre a fileira de 5 estrelas grandes */
body.page-home .hm-rev-score { text-align: center; }
body.page-home .hm-rev-score p {
  font-size: 22px;
  font-weight: 500;
  color: #222;
  margin-bottom: 8px;
}
body.page-home .hm-rev-score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* o logo Google não renderiza no header do original (fica só no DOM) */
body.page-home .hm-rev-google { display: none; }
body.page-home .hm-rev-score-stars { width: 185px; height: auto; }

/* slider */
body.page-home .hm-rev-slider { position: relative; }
body.page-home .hm-rev-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.page-home .hm-rev-track::-webkit-scrollbar { display: none; }
body.page-home .hm-rev-card {
  flex: 0 0 calc((100% - 40px) / 3);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #fff;
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
body.page-home .hm-rev-id {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
body.page-home .hm-rev-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 44px;
}
body.page-home .hm-rev-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  color: #222;
  margin-bottom: 6px;
}
body.page-home .hm-rev-stars { width: 108px; height: auto; }
body.page-home .hm-rev-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: #222;
}
body.page-home .hm-rev-swipe {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 400;
  color: #222;
  opacity: .75;
}
@media (max-width: 809.98px) {
  body.page-home .hm-rev-swipe { display: flex !important; }
}

/* setas Previous/Next */
body.page-home .hm-rev-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e4e4e4;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-home .hm-rev-btn:hover { background: var(--c-grey); }
body.page-home .hm-rev-btn img {
  width: 16px;
  height: 16px;
  /* o svg original tem traço branco; sobre o botão branco vira chevron escuro */
  filter: invert(1);
  opacity: .8;
}
body.page-home .hm-rev-prev { left: -50px; }
body.page-home .hm-rev-next { right: -50px; }

/* ratings (Facebook / Yelp / Houzz / Angi) */
body.page-home .hm-ratings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 60px;
}
body.page-home .hm-rating {
  background: #fff;
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
body.page-home .hm-rating-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 44px;
}
/* no original só Houzz e Angi mostram logo; Facebook/Yelp ficam sem */
body.page-home .hm-rating-facebook .hm-rating-logo,
body.page-home .hm-rating-yelp .hm-rating-logo { display: none; }
body.page-home .hm-rating-info { text-align: left; }
/* tira de 5 estrelas (95px) clipada na fração do rating (width inline) */
body.page-home .hm-rating-starclip {
  display: block;
  overflow: hidden;
  margin-bottom: 2px;
}
body.page-home .hm-rating-starclip .hm-rating-stars {
  display: block;
  width: 95px;
  max-width: none;
  height: auto;
}
body.page-home .hm-rating-info p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: #1a1a1a;
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  body.page-home .hm-rev-card { flex-basis: calc((100% - 20px) / 2); }
  body.page-home .hm-rev-prev { left: -16px; }
  body.page-home .hm-rev-next { right: -16px; }
  body.page-home .hm-ratings { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 809.98px) {
  body.page-home .hm-rev-head { margin-bottom: 32px; }
  body.page-home .hm-rev-card { flex-basis: 100%; scroll-snap-align: center; }
  body.page-home .hm-rev-btn { display: none; }
}