/* clarity.css — the readability pass, loaded after pearl.css on every page.
   Who reads this site: homeowners planning a $10k–$60k bathroom, many of them 50+, half on a phone. The look stays
   (pearl, ink, amber, Clash + Satoshi); what changes is how easy it is to read and how settled it feels:
   - text a size up and darker, lines kept to a comfortable length, headings that break where a person would
   - labels in plain sentence case, no template dash in front of every section
   - phones: headings that fit in two or three lines, tighter section rhythm, nothing hidden under the call bar
   - photos arrive on a warm sand ground and fade in once loaded, instead of flat grey boxes
   Remove this one <link> in templates/layout.mjs to go back to the previous look. */
:root{--cl-text:#2E3439;--cl-soft:#454C53;--cl-sand:linear-gradient(135deg,#EEE9E1 0%,#E4DED4 100%)}

/* ---- text: one size up, darker, comfortable measure ---- */
body{font-size:18px;line-height:1.65}
p,li,dd{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.px-lede,.lede{font-size:clamp(1.1rem,1.35vw,1.28rem);line-height:1.62;color:var(--cl-soft);max-width:60ch}
.px-flow-step h3{font-size:1.18rem;margin-bottom:6px}
.px-flow-step p{font-size:1rem;line-height:1.6;color:var(--cl-soft)}
.px-room-in p,.px-room p,.px-checks li,.px-faq p,.px-faq dd{color:var(--cl-text)}
.px-room-meta{font-size:.95rem}
.px-note,.form-fine{font-size:.86rem;color:var(--cl-soft);opacity:1}
.form-sub{font-size:1rem;color:var(--cl-soft)}

/* ---- labels: plain words, no dash ---- */
.px-label,.eyebrow{text-transform:none;letter-spacing:.005em;font-size:.98rem;font-weight:600}
.px-label::before,.eyebrow::before{display:none}
h4{text-transform:none;letter-spacing:.005em;font-size:1rem;font-weight:600;color:var(--px-amber)}
.footer h4{color:var(--px-ink)}
.field label{text-transform:none;letter-spacing:0;font-size:.98rem;font-weight:600;color:var(--px-ink)}
.consent{font-size:.9rem;line-height:1.5;color:var(--cl-soft)}
.field-hint{font-size:.88rem;line-height:1.45;color:var(--cl-soft)}

/* ---- photos: warm ground while loading, a quiet fade when they arrive ---- */
.px-room figure,.px-work figure,.px-split-media,.px-flow-step figure,.px-style-media{background:var(--cl-sand)}
html.cl-js img.cl-wait{opacity:0}
html.cl-js img.cl-in{opacity:1;transition:opacity .6s ease}

/* ---- phones ---- */
@media (max-width:640px){
  body{font-size:17px;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  h2{font-size:clamp(1.9rem,7.6vw,2.4rem);line-height:1.08}
  .px-sec{padding:60px 0}
  .px-creds + .px-sec{padding-top:44px}
  .section{padding:64px 0}
  .section-tight{padding:44px 0}
  .px-flow-step{grid-template-columns:96px minmax(0,1fr);gap:14px}
  .px-flow-step p{font-size:.97rem}
  .px-room figure{aspect-ratio:16/9}
  .px-room-in{padding:16px 18px 18px}
  .px-rooms{gap:14px}
}

@media (prefers-reduced-motion:reduce){html.cl-js img.cl-wait{opacity:1}html.cl-js img.cl-in{transition:none}}
html.is-thumb img.cl-wait{opacity:1!important}