/* ============================================================
   PERFECTO CLINIC — pages.css
   Secondary pages only: contact, about, customers, news, results,
   legal, thank-you, 404. Loaded after site.css, never instead of it.
   Nothing here starts at opacity 0. Every page reads with JS off.
   ============================================================ */

/* ---- oversized typographic opening for a trust page ---------- */
.page-hero .h-kicker{
  display:block;font-family:var(--latin);font-size:clamp(1.1rem,2.2vw,1.7rem);
  color:var(--gold);line-height:1;margin-bottom:.7rem;
}
.page-hero h1 .lift{color:var(--gold-lift)}

/* ---- the verified numbers, set large ------------------------- */
.figures{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--hair-dark);border-block:1px solid var(--hair-dark);
}
.figures > div{background:var(--void);padding:clamp(26px,3.2vw,52px) clamp(14px,2vw,30px)}
.band .figures > div,.band-deep .figures > div{background:var(--void-2)}
.figures .n{
  font-family:var(--numeral);font-weight:400;line-height:.86;letter-spacing:0;
  font-size:clamp(2.6rem,5.2vw,4.6rem);color:var(--gold-lift);
  display:block;font-variant-numeric:tabular-nums;
}
.figures .t{display:block;margin-top:.6rem;font-size:.92rem;color:var(--on-dark)}
.figures .s{display:block;margin-top:.3rem;font-size:.8rem;color:var(--on-dark-2);line-height:1.5}
.figures a{color:var(--gold-lift)}
@media(max-width:880px){.figures{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.figures{grid-template-columns:1fr}}

/* ---- contact: opening hours as a designed block -------------- */
.hours-plate{
  margin-top:0;border:1px solid var(--hair-gold);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
}
.hours-plate div{padding:clamp(18px,2.2vw,30px) clamp(16px,2vw,26px)}
.hours-plate b{font-size:.8rem;color:var(--gold)}
.hours-plate .h-time{
  display:block;font-family:var(--numeral);font-size:clamp(1.3rem,2.2vw,1.85rem);
  line-height:1.05;color:var(--on-dark);margin-top:.15rem;
}
.hours-plate .h-note{display:block;margin-top:.35rem;font-size:.82rem;color:var(--on-dark-2)}
.hours-plate .h-closed .h-time{color:var(--on-dark-2)}
.hours-plate .h-act{background:var(--ink)}
.band .hours-plate .h-act{background:var(--void-3)}
.hours-plate .h-act a{color:var(--gold-lift);font-size:1.05rem;text-decoration:none;border-bottom:1px solid var(--hair-gold)}

.place-cap{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:baseline;
  margin:.9rem 0 0;font-size:.88rem;color:var(--on-dark-2);
}
.place-cap strong{color:var(--on-dark);font-weight:600}

/* ---- a caption-free media card (news, customers) -------------
   The client rejected an identical machine-written line under every
   film. Where we have no real programme name we show no caption. ---- */
.mc.is-bare{display:block}
.mc.is-bare .yt{height:100%}
.video-wall .yt-item.is-bare figcaption{display:none}

/* ---- a distinct, human caption where we actually have one ----- */
.film-cap{
  display:block;margin-top:.7rem;font-size:.9rem;line-height:1.5;color:var(--on-dark-2);
}
.film-cap b{color:var(--on-dark);font-weight:600}

/* ---- reviews: break the uniform tile wall -------------------- */
.rev-plate{background:var(--void);position:relative;overflow:hidden;min-height:240px}
.rev-plate img{width:100%;height:100%;min-height:240px;object-fit:cover;display:block;filter:grayscale(.2)}
.rev-plate figcaption{
  position:absolute;inset-inline:0;bottom:0;padding:1.1rem 1.2rem;
  background:linear-gradient(to top,rgba(12,10,9,.92),rgba(12,10,9,0));
  font-size:.86rem;color:var(--on-dark);
}
@media(max-width:760px){.rev-plate,.rev-plate img{min-height:200px}}

.rev-link{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.2rem;
  margin-top:clamp(20px,2.4vw,32px);font-size:.92rem;color:var(--on-dark-2);
}
.rev-link a{color:var(--gold-lift)}

/* ---- a wide editorial pull between bands --------------------- */
.pull{
  border-inline-start:2px solid var(--gold);
  padding-inline-start:clamp(18px,2.4vw,34px);
  margin:clamp(30px,3.6vw,56px) 0 0;max-width:34ch;
}
.pull p{
  font-family:var(--display);font-weight:500;line-height:1.3;
  font-size:clamp(1.15rem,2vw,1.6rem);color:var(--on-dark);margin:0;
}
.pull cite{display:block;margin-top:.7rem;font-style:normal;font-size:.85rem;color:var(--on-dark-2)}

/* ---- results: gallery legend --------------------------------- */
.gal-legend{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:baseline;
  margin-top:clamp(18px,2.2vw,28px);padding-top:1rem;
  border-top:1px solid var(--hair-dark);font-size:.86rem;color:var(--on-dark-2);
}
.gal-legend b{color:var(--gold);font-weight:700}

/* ---- full-bleed photograph used on the trust pages ----------- */
.page-bleed{margin-block:clamp(34px,4vw,66px)}
.page-bleed img{
  width:100%;height:clamp(240px,34vw,520px);object-fit:cover;display:block;background:var(--void-2);
}
.page-bleed figcaption{
  max-width:var(--shell);margin:.8rem auto 0;padding-inline:var(--gut);
  font-size:.85rem;color:var(--on-dark-2);
}

@media (prefers-reduced-motion:reduce){
  .rev-plate img{filter:none}
}