/* Impact study pages · one structure for all six anonymised studies.
   Built on styles.css tokens. Reuses .eyebrow, .rv, .living, .mono, .ref.
   Same plain idiom as css/iso-standard.css and css/page-plain.css, scoped
   under main.p-impact. Rendered by scripts/build-impact.mjs from
   impact/_study.html and data/impact/<slug>.json.
   POSITIONING RULE 0b: no client names, no logos, no client photographs.
   The plate that used to carry a photograph carries the numbers instead. */

main.p-impact{ --muted:#5c655f; --deep:#2a3a35; }

/* ---------- section rhythm ---------- */
.p-impact .im-sec{ padding-bottom:clamp(.5rem,2vh,1.5rem) }
.p-impact .eyebrow{ margin:clamp(3.2rem,7vh,5rem) 0 clamp(1.6rem,3vh,2.5rem) }
.p-impact .im-h2{ font-size:clamp(1.55rem,3.4vw,2.6rem); font-weight:500; letter-spacing:-.025em;
  line-height:1.06; max-width:22ch; margin-bottom:1.6rem }
.p-impact .im-body{ font-size:clamp(1.02rem,1.6vw,1.28rem); line-height:1.5; max-width:62ch }

/* ---------- 1 · hero ---------- */
.p-impact .im-hero{ padding-top:clamp(7.5rem,13vh,9.5rem); padding-bottom:clamp(2.5rem,6vh,4.5rem) }
.p-impact .im-crumb{ color:var(--muted); margin-bottom:clamp(1.6rem,4vh,2.6rem) }
.p-impact .im-crumb a{ color:var(--teal); text-decoration:none }
.p-impact .im-crumb a:hover{ text-decoration:underline; text-underline-offset:3px }
.p-impact .im-eyebrow{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  border-top:1px solid var(--ink); padding-top:.6rem; margin-bottom:1.5rem }
.p-impact .im-h1{ font-size:clamp(2.1rem,5.6vw,4.4rem); font-weight:500; letter-spacing:-.03em;
  line-height:1.04; max-width:20ch }
.p-impact .im-meta{ margin-top:clamp(1.6rem,3.5vh,2.4rem); color:var(--muted); line-height:1.8 }
@media (min-width:1024px){
  .p-impact .im-crumb,
  .p-impact .im-eyebrow{ max-width:60% }
}

/* ---------- buttons ---------- */
.p-impact .im-btns{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:clamp(1.8rem,4vh,2.4rem) }
.p-impact .im-btn{ display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; padding:1rem 1.7rem; text-decoration:none; transition:background .3s, color .3s }
.p-impact .im-solid{ background:var(--teal); color:var(--white) }
.p-impact .im-solid:hover{ background:var(--teal-deep) }
.p-impact .im-out{ border:1px solid var(--teal); color:var(--teal) }
.p-impact .im-out:hover{ background:var(--teal); color:var(--white) }

/* ---------- 2 · the data box, large ----------
   The listing card box (css/impact.css) at page scale: the first stat as the
   big numeral with its mono label, every other stat as a mono row on a
   hairline, the core service as a mono chip in the top right corner. */
.p-impact .im-box{ position:relative; color:var(--paper); background:var(--teal-deep);
  padding:clamp(3.4rem,7vw,4.8rem) clamp(1.4rem,4vw,3.2rem) clamp(1.8rem,4vw,3.2rem);
  display:grid; grid-template-columns:1fr; gap:clamp(1.6rem,3vw,2.6rem) clamp(2rem,5vw,4rem) }
@media (min-width:820px){
  .p-impact .im-box{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end }
}
.p-impact .im-box-chip{ position:absolute; top:clamp(1.2rem,2.6vw,1.9rem); right:clamp(1.2rem,2.6vw,1.9rem);
  font-size:.68rem; line-height:1; padding:.55rem .95rem; color:var(--paper);
  border:1px solid color-mix(in srgb, var(--paper) 42%, transparent) }
.p-impact .im-box-val{ display:block; font-family:var(--sans); font-weight:500;
  font-size:clamp(3rem,8.5vw,6.6rem); line-height:.92; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums }
.p-impact .im-box-lab{ display:block; margin-top:clamp(.8rem,1.6vw,1.2rem); font-size:.72rem;
  line-height:1.5; opacity:.82; max-width:24ch }
.p-impact .im-box-rows{ list-style:none; margin:0; padding:0; align-self:end }
.p-impact .im-box-rows li{ display:flex; align-items:baseline; justify-content:space-between; gap:1.2rem;
  border-top:1px solid color-mix(in srgb, var(--paper) 28%, transparent);
  padding:.85rem 0 .7rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.4 }
.p-impact .im-box-rows b{ font-weight:400; flex:none }
.p-impact .im-box-rows span{ opacity:.7; text-align:right }

/* ---------- 3 · service chips ---------- */
.p-impact .im-svc{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:.6rem }
.p-impact .im-svc a,
.p-impact .im-svc span{ display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase; padding:.6rem 1.1rem; text-decoration:none }
.p-impact .im-svc a{ color:var(--teal); border:1px solid var(--teal); transition:background .3s, color .3s }
.p-impact .im-svc a:hover{ background:var(--teal); color:var(--white) }
.p-impact .im-svc span{ color:var(--muted); border:1px solid var(--line) }

/* ---------- 4 · hairline rows ---------- */
.p-impact .im-list{ list-style:none; padding:0; margin:1.3rem 0 0; border-top:1px solid var(--ink) }
.p-impact .im-list li{ position:relative; padding:1rem 0 1rem 1.15rem; border-bottom:1px solid var(--line);
  font-size:1rem; line-height:1.55; max-width:74ch }
.p-impact .im-list li::before{ content:""; position:absolute; left:0; top:1.55rem; width:.5rem; height:1px;
  background:var(--teal) }

/* ---------- 5 · more impact ---------- */
.p-impact .im-relgrid{ display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line); border:1px solid var(--line) }
@media (min-width:640px){ .p-impact .im-relgrid{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .p-impact .im-relgrid{ grid-template-columns:repeat(3,1fr) } }
.p-impact .im-relcard{ background:var(--paper); padding:1.35rem; min-height:11.5rem; display:flex;
  flex-direction:column; gap:.6rem; text-decoration:none; color:var(--ink); transition:background .3s }
.p-impact .im-relcard:hover{ background:var(--white) }
.p-impact .im-rc-sector{ color:var(--teal) }
.p-impact .im-rc-head{ font-size:1.02rem; font-weight:500; color:var(--teal); line-height:1.22 }
.p-impact .im-rc-go{ margin-top:auto; font-family:var(--mono); font-size:.64rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--teal) }
.p-impact .im-anon{ display:block; margin-top:clamp(1.4rem,3vh,2rem); color:var(--muted); line-height:1.6 }

/* ---------- 6 · cta band ---------- */
.p-impact .im-cta{ color:var(--paper); margin-top:clamp(3.5rem,8vh,6rem);
  padding:clamp(3.5rem,9vh,6.5rem) clamp(1rem,3vw,2.5rem) }
.p-impact .im-cta-in{ max-width:58rem }
.p-impact .im-cta-ref{ display:block; opacity:.75; margin-bottom:1.3rem }
.p-impact .im-cta-h{ font-size:clamp(1.5rem,3.4vw,2.8rem); font-weight:500; letter-spacing:-.022em;
  line-height:1.14; max-width:26ch }
.p-impact .im-cta-btn{ margin-top:clamp(1.8rem,4vh,2.4rem); background:var(--paper); color:var(--teal-deep) }
.p-impact .im-cta-btn:hover{ background:var(--white) }