/* ProPaint — service-page content typography and rhythm.
   Layered on top of the Tailwind utilities already in the markup: this file only
   corrects readability problems that utility classes had baked in, so no markup
   has to be rewritten and no CMS hook moves. */

/* ── Lead ──────────────────────────────────────────────────────────
   The lead was centred at text-2xl across the full column width. Centred body
   copy forces the eye to hunt for each new line start, and an uncapped measure
   at that size ran past 100 characters. Left-aligned, capped near 68ch. */
.ppc-lead-zone p{
  text-align:left !important;
  max-width:68ch;
  margin-left:0 !important;
  margin-right:0 !important;
}
.ppc-lead-zone p:first-of-type{
  font-size:clamp(1.075rem,1.6vw,1.3rem);
  line-height:1.6;
  color:#0C2237;
}
/* the recovered capability detail reads as supporting copy, not a second lede */
.ppc-lead-zone p[data-pp-specifics]{
  font-size:1rem;
  line-height:1.7;
  color:rgba(12,34,55,.78);
  padding-left:1rem;
  border-left:3px solid rgba(212,175,55,.55);
}
/* the centred eyebrow + rule belong left with the copy they introduce */
.ppc-lead-zone > div > div:first-child{text-align:left !important}
.ppc-lead-zone .mx-auto{margin-left:0 !important}

/* ── Section rhythm ────────────────────────────────────────────────
   Sections previously ran together at inconsistent spacing. */
.ppc-specs-wrap{margin-top:3.5rem}
.ppc-head{
  font-size:clamp(1.35rem,2.4vw,1.9rem);
  letter-spacing:-.01em;
  text-wrap:balance;
}
.ppc-rule-accent{
  height:3px;border:0;width:64px;margin:.85rem 0 1.75rem;
  background:linear-gradient(90deg,#9E1B1B,#d4af37);border-radius:2px;
}

/* ── Trust credentials ─────────────────────────────────────────────
   These are the qualifier a facility manager scans for. They were 12px
   grey-400 on white — under 3:1 contrast and effectively invisible. */
.ppc-creds{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1rem;
  margin:2rem 0;
}
.ppc-cred{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(212,175,55,.3);
  border-top:3px solid #d4af37;
  border-radius:6px;
  padding:1.1rem 1.15rem;
}
.ppc-cred-desc{margin:0}

/* ── Capability cards ──────────────────────────────────────────────
   Replaces hover:scale on a full-bleed card (which repaints the whole image)
   with a cheap border/shadow change. */
.ppc-card{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(212,175,55,.22);
  border-radius:8px;
  padding:1.4rem 1.5rem;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.ppc-card:hover{
  border-color:rgba(158,27,27,.4);
  box-shadow:0 6px 22px rgba(12,34,55,.09);
}
.ppc-card ul li{
  position:relative;padding-left:1.4rem;
}
.ppc-card ul li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;background:#d4af37;
}

/* ── Figure ────────────────────────────────────────────────────────── */
.ppc-figure{border-radius:8px;overflow:hidden}
.ppc-figcaption{
  font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(12,34,55,.55);margin-top:.6rem;
}

/* ── Accessibility ─────────────────────────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid #d4af37;outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}