/* Home. Medidas de Figma (DESKTOP - HOME, 465:911) a 1440 px; los comentarios
   dicen de donde sale cada numero cuando no es obvio. Debajo de 1200 px no hay
   diseno: las reglas de los @media de abajo son decision nuestra. */

/* ------------------------------------------------------------------- hero */

.cw-hero--home .cw-hero__content { padding-top: 263px; padding-bottom: 80px; }
.cw-hero--home .cw-hero__title { max-width: 641px; margin-top: 18px !important; }
.cw-hero--home .cw-hero__text { max-width: 545px; margin-top: 17px !important; }
.cw-hero--home .cw-btn { margin-top: 34px; }

/* ----------------------------------------------------- need / accesos */

.cw-need { padding: 63px 0; background-color: #031b2f; color: var(--cw-beige); }
.cw-need__title { margin-top: 14px !important; text-align: center; }
.cw-need__title .cw-heading__light { display: block; color: var(--cw-beige); }
.cw-need__text { margin-top: 11px !important; font-size: 1rem; line-height: 1.25; text-align: center; }
.cw-need__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 61px 2px 0 !important;
}
.cw-need__card {
  position: relative;
  display: flex;
  align-items: center;
  height: 74px;
  margin-left: -1px;
  padding: 0 22px 0 24px;
  border: 1px solid rgb(229 228 226 / 0.2);
  color: var(--cw-beige);
  text-decoration: none;
  transition: background-color var(--cw-ease);
}
.cw-need__icon { flex: none; width: 30px; height: 30px; color: var(--cw-cement); }
.cw-need__label {
  margin-left: 20px;
  font-size: 11.2px;
  line-height: 13px;
  font-weight: 400;
  text-transform: uppercase;
}
.cw-need__arrow { flex: none; width: 11px; height: 11px; margin-left: auto; color: var(--cw-cement); }
.cw-need__card::after {
  content: "";
  position: absolute;
  inset: auto -1px -1px;
  height: 3px;
  background: var(--cw-cement);
  transform: scaleX(0);
  transition: transform var(--cw-ease);
}
/* Estado hover del diseno (la tarjeta 1 de Figma lo muestra fijo). */
.cw-need__card:hover,
.cw-need__card:focus-visible { background: rgb(113 134 154 / 0.2); }
.cw-need__card:hover .cw-need__label,
.cw-need__card:focus-visible .cw-need__label { font-weight: 900; }
.cw-need__card:hover::after,
.cw-need__card:focus-visible::after { transform: none; }

/* ------------------------------------------- approach + capabilities */

.cw-capabilities {
  padding: 66px 0 0;
  background-color: #f4f5f6;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.cw-approach { display: grid; grid-template-columns: 343px 1fr; }
.cw-approach__head { padding-top: 7px; }
.cw-approach .cw-heading { max-width: 344px; margin-top: 13px !important; }
.cw-approach .cw-text { margin-top: 18px !important; line-height: 1.5; }

.cw-capabilities__main { margin-top: 74px; }
.cw-capabilities__title { margin-top: 13px !important; text-align: center; }
.cw-capabilities__grid {
  display: grid;
  grid-template-columns: 651px 306px;
  gap: 37px;
  justify-content: center;
  margin: 43px 0 67px;
}

.cw-cap {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 19px 29px 49px;
  border-radius: var(--cw-radius-card);
  overflow: hidden;
  color: var(--cw-mist);
}
.cw-cap__media { position: absolute; inset: 0; z-index: -2; }
.cw-cap__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cw-cap::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.cw-cap--restoration::after { background: rgb(24 33 42 / 0.4); box-shadow: inset 0 0 0 1px rgb(24 33 42 / 0.4); border-radius: inherit; }
.cw-cap--services::after { background: rgb(155 161 171 / 0.1); }

/* Rotacion del fondo: fundido entre imagenes apiladas. */
.cw-cap--restoration .cw-cap__media img { opacity: 0; transition: opacity 1.2s ease; }
.cw-cap--restoration .cw-cap__media img.is-active { opacity: 1; }

.cw-cap__title {
  margin-top: auto !important;
  font-size: 22px;
  line-height: 28px;
  font-weight: 900;
  text-transform: uppercase;
}
.cw-cap__sub { max-width: 386px; margin-top: 9px !important; font-size: 20px; line-height: 26px; font-weight: 300; }
.cw-cap__text { max-width: 338px; margin-top: 11px !important; font-size: 1rem; line-height: 1.25; font-weight: 300; }
.cw-cap__btns { gap: 7px; margin-top: 22px; }

.cw-cap--services { padding-left: 24px; padding-right: 24px; color: var(--cw-cement); }
.cw-cap--services .cw-cap__title { max-width: 180px; }
.cw-cap--services .cw-cap__text { max-width: 180px; margin-top: 14px !important; color: var(--cw-navy); }

/* ----------------------------------------------------------- restoration */

.cw-restoration { padding: 45px 0 55px; }
.cw-restoration .cw-heading { max-width: 501px; margin-top: 22px !important; }
.cw-restoration .cw-text { max-width: 519px; margin-top: 12px !important; }

.cw-restoration__list {
  display: grid;
  grid-template-columns: repeat(4, 281px);
  justify-content: space-between;
  margin-top: 23px !important;
}
.cw-restoration__item {
  display: flex;
  align-items: center;
  height: 88px;
  padding: 0 27px 0 28px;
  border-radius: 15px;
  background: var(--cw-mist);
  color: var(--cw-navy);
  text-decoration: none;
  transition: background-color var(--cw-ease), box-shadow var(--cw-ease);
}
.cw-restoration__icon { display: grid; place-items: center; width: 41px; height: 51px; color: var(--cw-cement); transition: color var(--cw-ease); }
.cw-restoration__icon .cw-icon { width: auto; height: 34px; }
.cw-restoration__item:nth-child(n) .cw-icon--mold { height: 51px; }
.cw-restoration__item .cw-icon--fire { height: 37px; }
.cw-restoration__label {
  margin-left: 24px;
  font-size: 0.875rem;
  line-height: 16px;
  font-weight: 900;
  text-transform: uppercase;
}
.cw-restoration__arrow { width: 13px; height: 13px; margin-left: auto; color: var(--cw-cement); }
.cw-restoration__item:hover,
.cw-restoration__item:focus-visible {
  background: var(--cw-cement-gray);
  box-shadow: 0 2px 2px rgb(0 0 0 / 0.15);
}
.cw-restoration__item:hover :is(.cw-restoration__icon, .cw-restoration__arrow),
.cw-restoration__item:focus-visible :is(.cw-restoration__icon, .cw-restoration__arrow) { color: var(--cw-beige); }

/* ------------------------------------------------------------ operate */

.cw-operate__people { padding: 63px 0 65px; background: var(--cw-mist); }
.cw-operate__inner { display: grid; grid-template-columns: 1fr 612px; gap: 24px; }
.cw-operate .cw-heading { max-width: 398px; margin-top: 22px !important; }
.cw-operate .cw-lead { margin-top: 17px !important; }
.cw-operate .cw-text { max-width: 509px; margin-top: 18px; }
.cw-operate__media { border-radius: var(--cw-radius-card); overflow: hidden; line-height: 0; align-self: start; }
.cw-operate__media img { width: 612px; height: 482px; object-fit: cover; }

.cw-operate__tiles { display: flex; gap: 20px; margin-top: 37px !important; }

.cw-teamband { position: relative; isolation: isolate; color: var(--cw-beige); }
.cw-teamband__media { position: absolute; inset: 0; z-index: -2; }
.cw-teamband__media img { width: 100%; height: 100%; object-fit: cover; }
.cw-teamband::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(113 134 154 / 0.5); }
.cw-teamband__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 212px; }
.cw-teamband__title { font-size: var(--cw-fs-band); line-height: 1.125; font-weight: 900; text-transform: capitalize; }

/* ------------------------------------------------------------- numbers */

.cw-numbers { padding: 55px 0 41px; }
.cw-numbers__grid {
  display: grid;
  grid-template-columns: 242px 242px;
  margin: 25px 0 0 354px !important;
}
.cw-numbers__item { padding: 35px 0 28px 26px; }
.cw-numbers__item + .cw-numbers__item { box-shadow: inset 1px 0 0 rgb(113 134 154 / 0.25); }
.cw-numbers__value {
  font-family: var(--wp--preset--font-family--display);
  font-size: 40.18px;
  line-height: 43.5px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--cw-cement);
}
.cw-numbers__value strong { font-weight: 700; }
.cw-numbers__label { margin-top: 3px !important; font-size: 0.875rem; line-height: 17px; color: var(--cw-bordo); }

/* ----------------------------------------------------------------- who */

.cw-who { padding: 42px 0 44px; background-color: #f0f0f0; }
.cw-who__title { max-width: 501px; margin-top: 22px !important; }
.cw-who__text { max-width: 509px; margin-top: 12px !important; }
.cw-who__grid {
  display: grid;
  grid-template-columns: 382px 382px;
  gap: 27px 128px;
  margin: 24px 0 0 204px !important;
}
.cw-who__item { padding: 17px 0 16px; border-bottom: 0.25px solid var(--cw-cement); }
.cw-who__item dt { font-size: 0.875rem; line-height: 17px; font-weight: 900; text-transform: none; color: var(--cw-cement); }
.cw-who__item dd { margin: 7px 0 0; max-width: 300px; font-size: 0.875rem; line-height: 16px; }
.cw-who__item:is(:nth-child(4), :nth-child(7), :nth-child(8)) dd { max-width: none; }
.cw-who__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 130px;
  margin-top: 43px;
  padding: 0 102px 0 105px;
  border-radius: var(--cw-radius-card);
  background: var(--cw-navy);
  color: var(--cw-beige);
}
.cw-who__cta-title { max-width: 327px; font-size: 26px; line-height: 30px; font-weight: 900; }

/* -------------------------------------------------------- testimonials */

.cw-testimonials {
  position: relative;
  isolation: isolate;
  padding: 38px 0 86px;
  overflow: hidden;
  /* En Figma el degradado (465:1050) es la mascara del grupo, no se pinta: lo
     que se ve es la textura al 70% sobre blanco. */
  background: #fff;
}
.cw-testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cw-bg) center bottom / cover no-repeat;
  opacity: 0.7;
}
.cw-testimonials__head { display: flex; justify-content: space-between; align-items: flex-start; }
.cw-testimonials__title { margin-top: 22px !important; color: var(--cw-navy); }
.cw-testimonials__title .cw-heading__bold { color: var(--cw-navy); }
.cw-carousel__nav { display: flex; gap: 9px; margin-top: 94px; }
.cw-carousel__btn {
  display: grid;
  place-items: center;
  width: 56px; height: 27px;
  padding: 0;
  border: 0;
  border-radius: 13.5px;
  background: var(--cw-mist);
  box-shadow: inset 0 0 0 0.25px var(--cw-navy);
  color: var(--cw-navy);
  cursor: pointer;
}
.cw-carousel__btn .cw-icon { width: 16px; height: 16px; }
.cw-carousel__btn--prev .cw-icon { transform: rotate(180deg); }
.cw-carousel__btn:disabled { background: #d9d9d9; box-shadow: none; color: #797e81; cursor: default; }

.cw-carousel__track {
  display: flex;
  gap: 24px;
  margin-top: 39px !important;
  padding-inline: max(var(--cw-margin), (100% - var(--cw-narrow)) / 2) var(--cw-margin) !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--cw-margin), (100% - var(--cw-narrow)) / 2);
  scrollbar-width: none;
}
.cw-carousel__track::-webkit-scrollbar { display: none; }
.cw-quote {
  position: relative;
  isolation: isolate;
  flex: none;
  display: flex;
  flex-direction: column;
  width: 282px;
  height: 304px;
  padding: 28px 25px 36px;
  border-radius: 14.7px;
  overflow: hidden;
  background: var(--cw-navy);
  box-shadow: inset 0 0 0 0.25px var(--cw-cement);
  color: var(--cw-mist);
  scroll-snap-align: start;
}
.cw-quote__avatar { width: 52px; height: 54px; border-radius: 50%; object-fit: cover; }
.cw-quote__initials { display: grid; place-items: center; flex: none; background: var(--cw-cement); color: var(--cw-beige); font-size: 1rem; font-weight: 900; }
/* Un solo testimonio: tarjeta del ancho de dos, con el texto mas grande. */
.cw-quote--wide { width: min(588px, 100%); height: auto; min-height: 304px; }
.cw-quote--wide .cw-quote__text { margin-bottom: 24px; font-size: 0.9375rem; line-height: 22px; }
.cw-quote__text { margin: 17px 0 0; font-size: 0.75rem; line-height: 16px; font-weight: 300; }
.cw-quote__name { margin-top: auto !important; font-size: 0.875rem; line-height: 13px; font-weight: 900; color: var(--cw-cement); }
.cw-quote__role { margin-top: 4px !important; font-size: 0.75rem; line-height: 13px; font-style: italic; font-weight: 300; }
.cw-quote__media { position: absolute; inset: 0; z-index: -2; }
.cw-quote__media img { width: 100%; height: 100%; object-fit: cover; }
.cw-quote--video::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(24 33 42 / 0.6); }
.cw-quote__play { position: absolute; left: 50%; top: 150px; translate: -50% -50%; color: #fff; }
.cw-quote__play .cw-icon { width: 24px; height: 24px; }

/* ------------------------------------------- tablets y mobile (sin diseno) */

@media (max-width: 1199px) {
  .cw-hero--home .cw-hero__content { padding-top: calc(var(--cw-header-h) + 96px); padding-bottom: 96px; }

  .cw-need__grid { grid-template-columns: repeat(2, 1fr); margin-inline: 0 !important; }
  .cw-need__card { margin-top: -1px; }

  .cw-approach { grid-template-columns: 1fr; gap: 32px; }
  .cw-capabilities__grid { grid-template-columns: 1fr; max-width: 651px; margin-inline: auto; }
  .cw-cap--services .cw-cap__title, .cw-cap--services .cw-cap__text { max-width: 60%; }

  .cw-restoration__list { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .cw-operate__inner { grid-template-columns: 1fr; gap: 48px; }
  .cw-operate__media img { width: 100%; height: auto; aspect-ratio: 612 / 482; }
  .cw-teamband__inner { flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 48px; }

  .cw-numbers__grid { grid-template-columns: repeat(2, 1fr); margin-left: 0 !important; }

  .cw-who__grid { grid-template-columns: 1fr 1fr; gap: 24px 48px; margin-left: 0 !important; }
  .cw-who__cta { flex-direction: column; align-items: flex-start; justify-content: center; padding: 32px; }

}

@media (max-width: 781px) {
  .cw-restoration__list { grid-template-columns: 1fr; }
  .cw-hero--home .cw-hero__content { padding-top: calc(var(--cw-header-h) + 64px); padding-bottom: 72px; }
  .cw-need__grid { grid-template-columns: 1fr; }
  .cw-need__card { margin-left: 0; }
  .cw-cap { min-height: 460px; }
  .cw-cap--services .cw-cap__title, .cw-cap--services .cw-cap__text { max-width: 70%; }
  .cw-operate__tiles { flex-wrap: wrap; gap: 12px; }
  .cw-numbers__item { padding: 20px 0 20px 16px; }
  .cw-numbers__value { font-size: 26px; line-height: 30px; }
  .cw-who__grid { grid-template-columns: 1fr; }
  .cw-carousel__nav { margin-top: 24px; }
  .cw-testimonials__head { flex-direction: column; }
}

/* Mobile: el fondo con textura de los testimonios queda claro arriba cuando la
   seccion se alarga; el eyebrow beige no se leia. Y el <br> del hero, pensado
   para el ancho de desktop, cortaba mal la frase. */
@media (max-width: 781px) {
  .cw-testimonials .cw-eyebrow--light { color: var(--cw-bordo); }
  .cw-hero--home .cw-hero__text br { display: none; }
}