/* 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. */

/* --muted and --deep are inherited from :root in styles.css. They used to be redeclared
   here as raw hex, which pinned this page to values the unified green family can no
   longer move. The page reads them from the tokens now. */

/* ---------- 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) }

/* ---------- RTL (Arabic edition) ---------- */
[dir="rtl"] .p-impact .im-list li{ padding:1rem 1.15rem 1rem 0 }
[dir="rtl"] .p-impact .im-list li::before{ left:auto; right:0 }
/* Fragment Mono has no Arabic: its wide space glyph made the labels look loose */
[dir="rtl"] .p-impact .im-figs dt, [dir="rtl"] .p-impact .im-rec dt, [dir="rtl"] .p-impact .im-rec dd,
[dir="rtl"] .p-impact .im-rc-sector, [dir="rtl"] .p-impact .im-rc-go{ font-family:var(--sans-ar) }

/* before and after, plainly (2026-09-09, Marlo): what the company had, what it has now,
   and how long it took, before any of the detail below it */
.ba{display:grid; grid-template-columns:1fr; gap:0; margin:0; border-top:1px solid var(--ink)}
@media (min-width:820px){ .ba{grid-template-columns:1fr 1fr auto} }
.ba-col{padding:1.5rem 0; border-bottom:1px solid var(--line)}
@media (min-width:820px){
  .ba-col{padding:1.6rem 2.2rem 1.6rem 0}
  .ba-col + .ba-col{border-inline-start:1px solid var(--line); padding-inline-start:2.2rem}
  .ba-col:last-child{min-width:14rem}
}
.ba dt{font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); margin-bottom:.7rem}
[dir="rtl"] .ba dt{letter-spacing:0; font-size:.8rem}
.ba dd{margin:0; font-size:clamp(1.02rem,1.4vw,1.22rem); line-height:1.45; max-width:38ch}

/* ---------- the study reads across the page, not down the left edge
   (2026-09-09, Marlo: "the design currently is left heavy in all the impacts and
   that is why it is made very long"). From 900px each section becomes a rail and a
   column: the heading holds the rail, everything else runs in the wide column, so
   the page fills its width and loses roughly a third of its height. The before /
   after band and the figures keep the full measure — they are the page's two
   feature bands, marked .im-wide in impact/_study.html. ---------- */
@media (min-width: 900px){
  .p-impact .im-sec:not(.im-wide){ display:grid; align-items:start;
    grid-template-columns:minmax(0, 13.5rem) minmax(0, 1fr); column-gap:clamp(2rem, 4.6vw, 4.4rem) }
  .p-impact .im-sec:not(.im-wide) > .im-h2{ grid-column:1; grid-row:1; margin:0; max-width:none;
    font-size:clamp(1.3rem, 2.1vw, 1.85rem); letter-spacing:-.018em }
  .p-impact .im-sec:not(.im-wide) > *:not(.im-h2){ grid-column:2 }
  .p-impact .im-sec:not(.im-wide) > .im-list{ margin-top:0 }
  .p-impact .im-sec:not(.im-wide) > .im-body{ margin-top:0 }
  .p-impact .im-sec{ padding-bottom:clamp(1.6rem, 4vh, 3rem) }
  .p-impact .im-body{ max-width:56ch }
  /* the rules run the width of the column: a list that stops at 58ch leaves the
     right third of the page empty, which is what made the page read left-heavy */
  .p-impact .im-sec:not(.im-wide) > .im-list,
  .p-impact .im-sec:not(.im-wide) > .im-rec{ max-width:none }
  .p-impact .im-rec > div{ grid-template-columns:12rem minmax(0,1fr) }
}