/* Official Chicco branding and current business details */
.brand > img {
  display: block;
  width: 205px;
  height: 96px;
  object-fit: contain;
  mix-blend-mode: screen;
}

.service-grid.three-cards {
  grid-template-columns: repeat(3, 1fr);
  max-width: 980px;
  margin: 0 auto;
}

.img-maintenance {
  background-size: 390%;
  background-position: 79% 65%;
}

.mini-brand img {
  width: 220px;
  height: 132px;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: screen;
}

.about-copy {
  max-width: 650px !important;
  margin-top: 4px !important;
  position: relative;
  z-index: 2;
}

.stats b {
  font-family: var(--display);
  font-size: 1.35rem;
}

.form-status.error { color: #ff646b !important; }
.quote-form button:disabled { opacity: .65; cursor: wait; transform: none; }

.quote-wrap { grid-template-columns: 1.25fr .75fr; align-items: stretch; }
.quote-form { padding: 34px; }
.form-section-title {
  margin: 14px 0 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid #3a3a3c;
  color: #fff;
  font-family: var(--display);
  font-size: 1.12rem;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.quote-field { display: flex; flex-direction: column; gap: 7px; }
.quote-field > span {
  position: static;
  clip: auto;
  width: auto;
  height: auto;
  overflow: visible;
  color: #d2d2d2;
  font-size: .78rem;
  font-weight: 600;
}
.quote-field input,
.quote-field select,
.quote-field textarea { font-size: .88rem; }
.measurement-note {
  margin: 2px 0 8px !important;
  color: #aaa !important;
  font-size: .76rem !important;
}

.catalog { background: radial-gradient(circle at 50% 0, #181818 0, #090909 54%, #050505 100%); }
.catalog-intro { max-width: 720px; margin: -12px auto 30px; color: #aaa; text-align: center; line-height: 1.6; }
.catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.catalog-card { overflow: hidden; border: 1px solid #343436; border-radius: 10px; background: #0c0c0d; transition: transform .25s, border-color .25s, box-shadow .25s; }
.catalog-card:hover { transform: translateY(-5px); border-color: var(--red); box-shadow: 0 16px 34px #000; }
.catalog-image { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #e9e9e9; cursor: zoom-in; }
.catalog-image img { display: block; width: 100%; height: 310px; object-fit: cover; object-position: top center; transition: transform .3s; }
.catalog-image span { position: absolute; right: 10px; bottom: 10px; padding: 6px 9px; border-radius: 4px; background: #000d; color: #fff; font-family: var(--display); font-size: .72rem; font-weight: 700; text-transform: uppercase; opacity: 0; transition: opacity .2s; }
.catalog-card:hover .catalog-image img { transform: scale(1.025); }
.catalog-card:hover .catalog-image span,.catalog-image:focus-visible span { opacity: 1; }
.catalog-body { padding: 18px; }
.catalog-body p { margin: 0 0 5px; color: var(--red); font-size: .7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.catalog-body h3 { min-height: 48px; margin: 0 0 5px; color: #fff; font-family: var(--display); font-size: 1.2rem; text-transform: uppercase; }
.catalog-body strong { display: block; min-height: 35px; color: #aaa; font-size: .72rem; }
.catalog-select { width: 100%; margin-top: 13px; padding: 11px 8px; border: 1px solid var(--red); border-radius: 4px; background: transparent; color: #fff; font-family: var(--display); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.catalog-select:hover,.catalog-select:focus-visible { background: var(--red); }
.selected-design { margin: 2px 0 10px !important; padding: 12px 14px; border-left: 3px solid var(--red); border-radius: 4px; background: #291012; color: #fff !important; font-weight: 700; }

@media (max-width: 1050px) { .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gallery-intro {
  max-width: 650px;
  margin: -12px auto 28px;
  text-align: center;
  color: #aaa;
  line-height: 1.6;
}
.projects-gallery {
  height: auto;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 15px;
}
.project-card {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #313133;
  border-radius: 9px;
  background: #0d0d0e;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.project-card.featured { grid-column: span 2; }
.project-card:hover { transform: translateY(-5px); border-color: var(--red); box-shadow: 0 16px 34px #000; }
.project-card button { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #080808; cursor: zoom-in; overflow: hidden; }
.project-card img { display: block; width: 100%; height: 230px; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.project-card.featured img { height: 300px; }
.project-card.portrait img { object-position: center 42%; }
.project-card button span { position: absolute; inset: auto 12px 12px auto; padding: 7px 10px; border-radius: 4px; background: #000c; color: #fff; font-family: var(--display); font-size: .76rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; opacity: 0; transform: translateY(5px); transition: .25s; }
.project-card:hover img { transform: scale(1.035); filter: brightness(.86); }
.project-card:hover button span,.project-card button:focus-visible span { opacity: 1; transform: none; }
.project-card figcaption { min-height: 49px; padding: 14px 15px; color: #ddd; font-family: var(--display); font-size: .95rem; font-weight: 600; letter-spacing: .2px; text-transform: uppercase; }
.gallery-lightbox { width: min(92vw, 1100px); max-width: none; padding: 0; overflow: visible; border: 1px solid #5d171a; border-radius: 10px; background: #080808; color: white; box-shadow: 0 24px 90px #000; }
.gallery-lightbox::backdrop { background: #000d; backdrop-filter: blur(5px); }
.gallery-lightbox img { display: block; width: 100%; max-height: 78vh; object-fit: contain; border-radius: 9px 9px 0 0; }
.gallery-lightbox p { margin: 0; padding: 15px 52px 17px 18px; font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; }
.lightbox-close { position: absolute; z-index: 2; top: -14px; right: -14px; width: 42px; height: 42px; border: 1px solid #ff4e54; border-radius: 50%; background: var(--red); color: white; font-size: 1.8rem; line-height: 1; cursor: pointer; }

.socials a svg { width: 18px; height: 18px; fill: currentColor; }
.whatsapp-social { border-color: #20b957 !important; color: #20b957 !important; }
.whatsapp-contact { display: inline-flex; margin-top: 8px; padding: 9px 13px; border: 1px solid #20b957; border-radius: 4px; color: #fff !important; background: #168f45; font-family: var(--display); font-size: .82rem; font-weight: 700; letter-spacing: .3px; text-decoration: none; text-transform: uppercase; }
.whatsapp-contact:hover,.whatsapp-contact:focus-visible { background: #20b957; }
.whatsapp-float {
  position: fixed;
  z-index: 40;
  right: 22px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px 11px 11px;
  border: 1px solid #5cf08e;
  border-radius: 999px;
  background: #20b957;
  color: #fff;
  box-shadow: 0 12px 32px #0009;
  font-family: var(--display);
  font-size: .9rem;
  letter-spacing: .3px;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease;
}
.whatsapp-float span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #fff; color: #159447; font-size: 1.25rem; }
.whatsapp-float svg { width: 19px; height: 19px; fill: currentColor; }
.whatsapp-float:hover,.whatsapp-float:focus-visible { transform: translateY(-3px); background: #159447; }

@media (max-width: 760px) {
  .brand > img { width: 150px; height: 72px; }
  .service-grid.three-cards { grid-template-columns: 1fr; }
  .mini-brand img { width: 190px; height: 105px; }
  .stats b { font-size: 1rem; }
  .quote-wrap { grid-template-columns: 1fr; }
  .quote-form { padding: 27px 20px; }
  .projects-gallery { grid-template-columns: 1fr; }
  .project-card.featured { grid-column: auto; }
  .project-card img,.project-card.featured img { height: 260px; }
  .project-card button span { opacity: 1; transform: none; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-image img { height: auto; }
  .catalog-image span { opacity: 1; }
  .whatsapp-float { right: 14px; bottom: 14px; padding: 9px; }
  .whatsapp-float strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}