/* ==========================================================================
   BLOCKS — services grid, team, rolling product rows, contact.
   Shared by every page, so a change here lands across the whole site.
   ========================================================================== */

/* --- Our Services ------------------------------------------------------ */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.8rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.svc {
  border-top: 1px solid var(--rule);
  padding-top: 1.2rem;
}

.svc__n { opacity: 0.45; }

.svc__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  line-height: 1.12;
  margin: 0.6rem 0 0.7rem;
}

.svc__body {
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.78;
  margin-bottom: 0.9rem;
}

/* --- Team -------------------------------------------------------------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
}

.team-card__media {
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
  background: var(--c-soft);
  margin-bottom: 0.9rem;
}

.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.team-card:hover .team-card__media img { transform: scale(1.05); }

.team-card__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  text-transform: uppercase;
  line-height: 1.15;
}

.team-card__role {
  opacity: 0.6;
  margin-top: 0.25rem;
}

/* --- Lead team member --------------------------------------------------
   The director carries a full write-up; everyone else is a portrait only. */

.lead {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.lead__media {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--c-soft);
}

.lead__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 18%;
}

.lead__eyebrow { opacity: 0.55; margin-bottom: 0.7rem; }

.lead__name {
  font-size: clamp(1.7rem, 3.2vw, 3rem);
  margin-bottom: 0.4rem;
}

.lead__role { opacity: 0.6; margin-bottom: 1.4rem; }

.lead__quote {
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.5;
  font-style: italic;
  max-width: 40ch;
  margin-bottom: 1.2rem;
}

.lead__text {
  font-size: 0.92rem;
  line-height: 1.65;
  opacity: 0.8;
  max-width: 46ch;
  margin-bottom: 1.8rem;
}

.lead__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0 0 1.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}

.lead__stats dt {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1;
}

.lead__stats dd {
  margin: 0.4rem 0 0;
  opacity: 0.6;
}

@media (max-width: 860px) {
  .lead { grid-template-columns: 1fr; }
  .lead__media { max-width: 320px; }
}

/* Compact variant: portraits and roles, no names. */
.team-grid--compact .team-card__role { margin-top: 0; }

/* --- Rolling product rows ---------------------------------------------- */

.roll { overflow: hidden; }

.roll__row {
  overflow: hidden;
  margin-top: clamp(0.75rem, 1.4vw, 1.4rem);
}

.roll__track {
  display: flex;
  gap: clamp(0.75rem, 1.4vw, 1.4rem);
  width: max-content;
  will-change: transform;
}

.roll__item {
  margin: 0;
  width: clamp(210px, 22vw, 320px);
  flex: none;
}

/* The product mockups are landscape shots on white. `contain` shows the whole
   garment rather than cropping its sleeves off, and the white tile makes the
   letterboxing invisible against the shot's own background. */
.roll__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--c-white);
}

.roll__item figcaption {
  margin-top: 0.6rem;
  opacity: 0.6;
}

/* --- Customer logos ---------------------------------------------------- */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /* Equal rows so every cell matches, whatever shape the logo is. */
  grid-auto-rows: clamp(112px, 12vw, 150px);
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--rule);
  border: 1px solid var(--rule);
}

/* Hairline gaps come from the grid background showing through the cells. */
.logo-tile {
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--bg);
  text-align: center;
}

/* Real logos show at full strength — the earlier 0.45 fade was for the text
   placeholders and left the marks looking washed out. */
.logo-tile img {
  width: auto;
  max-width: 100%;
  max-height: clamp(54px, 6.5vw, 78px);
  object-fit: contain;
  transition: transform var(--dur-fast) var(--ease-out);
}

.logo-tile:hover img { transform: scale(1.06); }

/* --- Certifications ---------------------------------------------------- */

.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.8rem);
}

.cert__doc {
  width: 40px;
  margin-bottom: 1rem;
  color: var(--c-soft);
}

.cert__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  line-height: 1.12;
  margin-bottom: 0.6rem;
}

.cert__body {
  font-size: 0.88rem;
  line-height: 1.6;
  opacity: 0.78;
}

/* --- Contact ----------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.contact__details {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  display: grid;
  gap: 1.4rem;
}

.contact__details dt { opacity: 0.55; margin-bottom: 0.3rem; }
.contact__details dd { margin: 0; font-size: 0.95rem; }

.contact__form {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}

.field { display: block; width: 100%; }

.field span {
  display: block;
  margin-bottom: 0.45rem;
  opacity: 0.6;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.field textarea { resize: vertical; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-soft);
}

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

/* --- Footer social ------------------------------------------------------ */

.footer__social {
  display: flex;
  gap: 1.1rem;
}

.footer__social a { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 620px) {
  .footer__base { flex-direction: column; gap: 0.7rem; }
}

/* --- Floating WhatsApp button ------------------------------------------- */

.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: calc(var(--z-header) + 1);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;              /* WhatsApp brand green, not a site token */
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(13, 53, 80, 0.28);
  transition: transform var(--dur-fast) var(--ease-out);
}

.wa-float:hover { transform: translateY(-3px); }
.wa-float svg { width: 30px; height: 30px; }

@media print {
  .wa-float { display: none; }
}