/* ============================================================
   Birch Carbon Program: Flipbook Engine v1
   Reusable across every resource in the Knowledge Centre.
   Brand tokens mirror css/style.css on birchcarbonprogram.com
   ============================================================ */

:root{
  --navy-deep:#051428;
  --navy:#0a1f3d;
  --navy-light:#122e57;
  --blue-ring:#4fafd9;
  --blue-glow:#93d2ec;
  --blue-globe:#1d6fb2;
  --blue-deep:#0e3a5f;

  --leaf:#7bc74d;
  --leaf-deep:#4a9b3a;
  --forest:#1f6e3d;
  --forest-deep:#0d4423;

  --birch-white:#f4f9fc;
  --birch-light:#d4e5ee;

  --paper:#f4f1ea;
  --paper-deep:#e8e2d3;

  --gold:#c9a356;

  --ink:#051428;
  --ink-soft:#1a2438;
  --muted:#5a6478;

  --page-w:520px;               /* driven by JS */
  --turn:640ms;
  --ease:cubic-bezier(.28,.72,.22,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at 18% -10%, rgba(79,175,217,.16), transparent 60%),
    radial-gradient(900px 700px at 88% 8%, rgba(123,199,77,.09), transparent 60%),
    radial-gradient(1000px 900px at 50% 110%, rgba(29,111,178,.14), transparent 60%),
    #03101f;
  color:var(--birch-white);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Stage ---------- */
.stage{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:74px 18px 92px;
}
.book-wrap{ perspective:2800px; perspective-origin:50% 46%; }

.book{
  position:relative;
  width:calc(var(--page-w) * 2);
  aspect-ratio:4/3;
  transform-style:preserve-3d;
  transition:transform var(--turn) var(--ease);
}
.book[data-shift="left"]{ transform:translateX(calc(var(--page-w) / 2)); }
.book[data-shift="right"]{ transform:translateX(calc(var(--page-w) / -2)); }

.leaf{
  position:absolute; top:0; left:50%;
  width:var(--page-w); height:100%;
  transform-style:preserve-3d;
  transform-origin:left center;
  transition:transform var(--turn) var(--ease);
}
.leaf{ transform:translateZ(var(--depth,0px)); }
.leaf.flipped{ transform:translateZ(var(--depth,0px)) rotateY(-180deg); }

.face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
  background:var(--paper);
  color:var(--ink);
}
.face.back{ transform:rotateY(180deg); }

/* gutter shading */
.face.front .gutter,
.face.back .gutter{ position:absolute; top:0; bottom:0; width:52px; pointer-events:none; z-index:8 }
.face.front .gutter{ left:0; background:linear-gradient(90deg, rgba(5,20,40,.32), transparent) }
.face.back  .gutter{ right:0; background:linear-gradient(270deg, rgba(5,20,40,.32), transparent) }

/* ---------- Page canvas ---------- */
.pg{
  position:absolute; inset:0;
  container-type:inline-size;
  display:flex; flex-direction:column;
  /* NB: .pg is the query container, so cqw here would resolve against the
     viewport, not the page. Everything the page owns is sized off --page-w. */
  padding:var(--pad-t) var(--pad-x) var(--pad-b);
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), transparent 30%),
    var(--paper);
}
.pg--art{ padding:0; background:none }
.pg--art img{ width:100%; height:100%; object-fit:cover; display:block }

.pg--navy{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(79,175,217,.18), transparent 60%),
    linear-gradient(170deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:var(--birch-white);
}

/* running head */
.rh{
  display:flex; align-items:center; gap:2cqw;
  font-size:clamp(9.5px,2.6cqw,18px); letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--blue-globe);
  padding-bottom:1.4cqw; margin-bottom:2.4cqw;
  border-bottom:1px solid rgba(10,31,61,.14);
  flex:none;
}
.rh .dot{ width:1.3cqw;height:1.3cqw;min-width:4px;min-height:4px;border-radius:50%;background:var(--leaf);flex:none }
.pg--navy .rh{ color:var(--blue-glow); border-bottom-color:rgba(147,210,236,.22) }

.eyebrow{
  font-size:clamp(10.8px,3.08cqw,21px); letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--leaf-deep); margin-bottom:1.2cqw;
}
.pg--navy .eyebrow{ color:var(--blue-ring) }

h1.t,h2.t,h3.t{
  font-family:"Fraunces",Georgia,serif;
  font-weight:600; letter-spacing:-.02em; line-height:1.04; color:var(--navy);
}
.pg--navy h1.t,.pg--navy h2.t,.pg--navy h3.t{ color:#fff }
h1.t{ font-size:clamp(31.5px,13.18cqw,92px) }
h2.t{ font-size:clamp(25.4px,10.25cqw,70px) }
h3.t{ font-size:clamp(18.2px,6.44cqw,44px) }

.rule{
  width:11cqw;min-width:44px;height:3px;border-radius:2px;margin:1.9cqw 0 2cqw;
  background:linear-gradient(90deg,var(--leaf),var(--blue-ring));
}

.pg p{ font-size:clamp(14px,4.54cqw,30px); line-height:1.48; color:var(--ink-soft); margin-bottom:.62em }
.pg--navy p{ color:rgba(244,249,252,.9) }
.pg p.lead{ font-size:clamp(15.8px,5.56cqw,37px); line-height:1.32; color:var(--navy) }
.pg--navy p.lead{ color:#eaf4fa }
.pg p:last-child{ margin-bottom:0 }
.pg strong{ color:var(--navy); font-weight:650 }
.pg--navy strong{ color:#fff }

.body{ flex:1; min-height:0; display:flex; flex-direction:column }
.spacer{ flex:1 }

ul.ticks{ list-style:none; display:grid; gap:1cqw; margin:.4cqw 0 .4cqw }
ul.ticks li{
  position:relative; padding-left:4.2cqw;
  font-size:clamp(13.4px,4.4cqw,29px); line-height:1.38; color:var(--ink-soft);
}
ul.ticks li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:1.75cqw;height:1.75cqw;min-width:6px;min-height:6px;border-radius:50%;
  background:var(--leaf); box-shadow:0 0 0 .6cqw rgba(123,199,77,.18);
}
.pg--navy ul.ticks li{ color:rgba(244,249,252,.88) }
.pg--navy ul.ticks li::before{ background:var(--blue-ring); box-shadow:0 0 0 .6cqw rgba(79,175,217,.2) }

/* signature callout */
.callout{
  margin-top:auto;
  background:linear-gradient(140deg, rgba(123,199,77,.14), rgba(79,175,217,.10));
  border-left:4px solid var(--leaf);
  border-radius:0 3cqw 3cqw 0;
  padding:2.4cqw 2.8cqw;
}
.callout .lbl{
  display:block; font-size:clamp(10.3px,2.93cqw,21px); letter-spacing:.15em; text-transform:uppercase;
  font-weight:700; color:var(--forest); margin-bottom:1cqw;
}
.callout p{ font-size:clamp(13.4px,4.24cqw,28px); line-height:1.4; color:var(--navy) }
.pg--navy .callout{
  background:linear-gradient(140deg, rgba(79,175,217,.18), rgba(123,199,77,.10));
  border-left-color:var(--blue-ring);
}
.pg--navy .callout .lbl{ color:var(--blue-glow) }
.pg--navy .callout p{ color:#eaf4fa }

/* two-column split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:1.8cqw; margin:.4cqw 0 .4cqw }
.split .cell{
  background:#fff; border:1px solid rgba(10,31,61,.10);
  border-radius:2.4cqw; padding:2.5cqw;
  box-shadow:0 6px 18px rgba(10,31,61,.06);
}
.split .cell h4{
  font-family:"Fraunces",Georgia,serif; font-size:clamp(14.6px,4.98cqw,32px);
  color:var(--navy); margin-bottom:.9cqw; font-weight:600; line-height:1.12;
}
.split .cell p{ font-size:clamp(12.7px,4.03cqw,27px); line-height:1.36; margin:0 }

/* definition block */
.define{
  background:var(--navy); color:#fff; border-radius:3.4cqw;
  padding:3.1cqw; margin:.4cqw 0 1cqw; position:relative; overflow:hidden;
}
.define::before{
  content:""; position:absolute; right:-8cqw; top:-8cqw; width:30cqw;height:30cqw;
  border-radius:50%; background:radial-gradient(circle,rgba(79,175,217,.38),transparent 70%);
}
.define .num{
  font-family:"Fraunces",Georgia,serif; font-size:clamp(36.4px,16.1cqw,112px);
  line-height:1; color:var(--blue-glow); font-weight:600; position:relative;
}
.define .num small{
  font-size:clamp(10.8px,3.37cqw,22px); letter-spacing:.16em; text-transform:uppercase;
  color:var(--leaf); display:block; margin-top:1.2cqw;
  font-family:"Inter",sans-serif; font-weight:700;
}
.define p{ color:rgba(244,249,252,.92); margin:1.8cqw 0 0; line-height:1.4; font-size:clamp(13.4px,4.24cqw,28px); position:relative }

/* value drivers */
.drivers{ display:grid; grid-template-columns:1fr 1fr; gap:1.2cqw; margin:.4cqw 0 .4cqw }
.drivers .d{
  background:#fff; border:1px solid rgba(10,31,61,.09); border-radius:2.2cqw;
  padding:2cqw 2.3cqw;
  font-size:clamp(12.7px,4.03cqw,27px); color:var(--navy); font-weight:550; line-height:1.32;
  display:flex; align-items:center; gap:1.8cqw;
}
.drivers .d i{
  width:1.5cqw;height:1.5cqw;min-width:5px;min-height:5px;border-radius:50%;flex:none;
  background:var(--blue-ring);
}
.drivers .d:nth-child(2n) i{ background:var(--leaf) }

/* contents */
.toc{ display:grid; margin-top:1cqw }
.toc .row{
  display:flex; align-items:baseline; gap:2.2cqw;
  padding:1.5cqw .4cqw; border-bottom:1px solid rgba(10,31,61,.09);
  color:var(--navy); cursor:pointer; background:none; border-left:0; border-right:0; border-top:0;
  text-align:left; font-family:inherit; width:100%;
}
.toc .row:hover{ background:rgba(79,175,217,.08) }
.toc .n{ font-family:"Fraunces",Georgia,serif; font-size:clamp(13.4px,4.4cqw,29px); color:var(--blue-globe); width:5cqw; flex:none }
.toc .ttl{ flex:1; font-size:clamp(13.4px,4.4cqw,29px); font-weight:550; color:var(--navy) }
.toc .pgn{ font-size:clamp(12.2px,3.8cqw,24px); color:var(--muted); font-variant-numeric:tabular-nums }
.toc .grp{
  font-size:clamp(10.3px,3.08cqw,21px); letter-spacing:.17em; text-transform:uppercase; font-weight:700;
  color:var(--leaf-deep); margin:2.2cqw 0 .4cqw;
}
.toc .grp:first-child{ margin-top:0 }

/* source card */
.srccard{
  background:#fff; border:1px solid rgba(10,31,61,.12); border-radius:3.4cqw;
  padding:2.7cqw; margin-bottom:1.6cqw;
  box-shadow:0 8px 22px rgba(10,31,61,.07);
  display:flex; gap:3cqw; align-items:flex-start;
}
.srccard .mark{
  width:12cqw; min-width:38px; flex:none; aspect-ratio:1;
  border-radius:2.2cqw; background:#fff; border:1px solid rgba(10,31,61,.12);
  display:grid; place-items:center; overflow:hidden;
}
.srccard .mark svg{ width:64%; height:64% }
.srccard .meta{ flex:1; min-width:0 }
.srccard .org{ font-size:clamp(10.3px,3.08cqw,21px); letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:1.2cqw; line-height:1.4 }
.srccard .name{ font-family:"Fraunces",Georgia,serif; font-size:clamp(15.8px,5.56cqw,37px); color:var(--navy); line-height:1.18; margin-bottom:1.4cqw; font-weight:600 }
.srccard a.lnk{
  display:inline-block; font-size:clamp(11.5px,3.66cqw,23px); font-weight:600; color:var(--blue-globe);
  text-decoration:none; word-break:break-all; line-height:1.4;
}
.srccard a.lnk:hover{ text-decoration:underline }
.attrib{
  font-size:clamp(11.5px,3.66cqw,23px); line-height:1.42; color:var(--muted);
  padding-top:1.8cqw; border-top:1px solid rgba(10,31,61,.11);
}
.attrib b{ color:var(--navy) }
.attrib + .attrib{ border-top:0; padding-top:1.4cqw }

/* logo lockups */
.brandline{ display:flex; align-items:center; gap:2.4cqw; margin-bottom:4cqw; flex:none }
.brandline img{ width:11cqw; min-width:34px; height:auto; flex:none }
.brandline .txt{ font-size:clamp(10.3px,3.08cqw,21px); letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:var(--blue-globe); line-height:1.5 }
.pg--navy .brandline .txt{ color:var(--blue-glow) }

/* back cover */
.backcover{ align-items:center; justify-content:center; text-align:center }
.backcover img.logo{ width:26cqw; min-width:96px; margin-bottom:4.4cqw }
.backcover .tag{
  font-size:clamp(12.2px,3.95cqw,27px); letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue-glow); font-weight:600; line-height:2.1;
}
.backcover .url{
  margin-top:6cqw; padding-top:3.4cqw; border-top:1px solid rgba(147,210,236,.25);
  font-size:clamp(12.7px,4.1cqw,27px); letter-spacing:.16em; text-transform:uppercase;
  color:#fff; font-weight:600; text-decoration:none; display:block;
}
.backcover p{ max-width:80%; }

/* folio */
.folio{
  position:absolute; bottom:calc(var(--pad-b) * .54); z-index:9;
  font-size:clamp(9px,2.2cqw,14px); letter-spacing:.02em; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.face.front .folio{ right:var(--pad-x) }
.face.back  .folio{ left:var(--pad-x) }
.folio.light{ color:rgba(244,249,252,.62) }

/* ---------- Chrome ---------- */
.bar{
  position:fixed; left:0; right:0; z-index:40;
  display:flex; align-items:center; gap:12px;
  padding:13px clamp(12px,3vw,28px);
}
.bar.top{ top:0; background:linear-gradient(180deg,rgba(3,16,31,.94),rgba(3,16,31,0)) }
.bar.bottom{ bottom:0; justify-content:center; background:linear-gradient(0deg,rgba(3,16,31,.95),rgba(3,16,31,0)) }

.bar .title{ display:flex; align-items:center; gap:10px; min-width:0 }
.bar .title img{ width:34px;height:34px;flex:none }
.bar .title .k{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue-ring); font-weight:700 }
.bar .title .n{ font-family:"Fraunces",Georgia,serif; font-size:15px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bar .grow{ flex:1 }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 15px; border-radius:999px; border:1px solid rgba(147,210,236,.26);
  background:rgba(18,46,87,.5); color:var(--birch-white);
  font:600 12px/1 "Inter",sans-serif; letter-spacing:.03em;
  cursor:pointer; transition:.2s ease; text-decoration:none; white-space:nowrap;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn:hover:not(:disabled){ background:rgba(79,175,217,.24); border-color:var(--blue-ring); transform:translateY(-1px) }
.btn:disabled{ opacity:.28; cursor:default }
.btn.icon{ width:38px; padding:0 }
.btn svg{ width:17px;height:17px; flex:none }
.btn.primary{ background:linear-gradient(135deg,var(--leaf-deep),var(--forest)); border-color:transparent; color:#fff }
.btn.primary:hover{ background:linear-gradient(135deg,var(--leaf),var(--leaf-deep)) }

.counter{
  font:600 12px/1 "Inter",sans-serif; letter-spacing:.09em; color:var(--birch-light);
  min-width:88px; text-align:center; font-variant-numeric:tabular-nums;
}
.progress{
  position:fixed; left:0; top:0; height:2px; z-index:60; width:0;
  background:linear-gradient(90deg,var(--leaf),var(--blue-ring));
  transition:width .45s var(--ease);
}

/* contents drawer */
.drawer{
  position:fixed; inset:0; z-index:70; display:none;
  background:rgba(3,16,31,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:24px clamp(14px,4vw,40px) 40px; overflow:auto;
}
.drawer.open{ display:block }
.drawer .dhead{ display:flex; align-items:center; margin-bottom:18px; gap:14px }
.drawer h3{ font-family:"Fraunces",Georgia,serif; font-size:21px; color:#fff; font-weight:600 }
.thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:14px }
.thumb{ cursor:pointer; border:0; background:none; padding:0; text-align:left; font-family:inherit }
.thumb .box{
  aspect-ratio:2/3; border-radius:8px; overflow:hidden; border:2px solid transparent;
  background:var(--paper); transition:.2s; position:relative;
}
.thumb:hover .box{ border-color:var(--blue-ring); transform:translateY(-3px) }
.thumb.cur .box{ border-color:var(--leaf) }
.thumb .box img{ width:100%;height:100%;object-fit:cover }
.thumb .mini{
  position:absolute; inset:0; padding:9px; display:flex; flex-direction:column; justify-content:center;
  gap:5px; background:linear-gradient(170deg,#0a1f3d,#051428);
}
.thumb .mini.paper{ background:var(--paper) }
.thumb .mini b{ font-family:"Fraunces",Georgia,serif; font-size:9.5px; line-height:1.2; color:#fff; font-weight:600 }
.thumb .mini.paper b{ color:var(--navy) }
.thumb .mini i{ display:block; height:2px; width:56%; background:var(--leaf); border-radius:2px }
.thumb .cap{ font-size:10.5px; color:var(--birch-light); margin-top:7px; line-height:1.3 }
.thumb .cap em{ font-style:normal; color:var(--muted); display:block; font-size:9.5px; margin-top:2px }

.hint{
  position:fixed; bottom:66px; left:50%; transform:translateX(-50%);
  font-size:10.5px; letter-spacing:.12em; color:rgba(147,210,236,.5); z-index:35;
  pointer-events:none; transition:opacity .6s; text-transform:uppercase;
}

@media (max-width:860px){
  .stage{ padding:64px 8px 82px }
  .bar .title .k{ display:none }
  .bar .title .n{ font-size:14px }
  .bar.top{ gap:8px }
  .bar.top .btn span{ display:none }
  .bar.top .btn{ width:38px; padding:0 }
  .hint{ display:none }
  .counter{ min-width:72px; font-size:11px }
}
@media print{ .bar,.drawer,.hint,.progress{ display:none !important } }

/* single-page (mobile) mode: bring the flipped back-face into the visible slot */
.book[data-single="1"] .leaf.flipped{ transform:translateX(100%) rotateY(-180deg) }
.book[data-single="1"] .leaf{ transform:none }
.book[data-single="1"] .face .gutter{ display:none }

/* head stays put; flow centres in the remaining space */
.head{ flex:none }
.flow{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-start; gap:2.2cqw }
.flow > .callout{ margin-top:1.5cqw; flex:none }
.txt{ display:flex; flex-direction:column }
.flow > .txt:only-child{ }
.rh{ white-space:nowrap; overflow:hidden }
.rh-l{ flex:0 1 auto; overflow:hidden; text-overflow:ellipsis }
.rh-r{ flex:0 1 auto; overflow:hidden; text-overflow:ellipsis }
.rh-gap{ flex:1 1 2cqw; min-width:2cqw }

/* shadow only on the faces actually on top, so the stack doesn't pile up */
.leaf.sh-front > .face.front,
.leaf.sh-back  > .face.back{
  box-shadow:0 34px 76px rgba(0,0,0,.52), 0 6px 18px rgba(0,0,0,.32);
}
.backcover img.logo{ width:34cqw; min-width:120px }
.pg p.lead{ font-weight:500 }

/* narrow pages: trim the fluid step so long pages still fit */
@container (max-width: 620px){
  h1.t{ font-size:clamp(24.7px,9.29cqw,63px) }
  .split .cell{ padding:2.6cqw }
  .define{ padding:3.2cqw }
  h2.t{ font-size:clamp(21.6px,9.72cqw,65px) }
  ul.ticks{ gap:1cqw }
  .flow{ gap:2.2cqw }
  .pg p{ font-size:clamp(13.4px,4.04cqw,30px) }
  ul.ticks li{ font-size:clamp(12.4px,3.91cqw,29px) }
  ul.ticks{ gap:.9cqw }
  .callout p{ font-size:clamp(12.4px,3.8cqw,28px) }
  .callout{ padding:2.2cqw 2.6cqw }
  .split .cell p{ font-size:clamp(11.3px,3.73cqw,27px) }
  .split .cell h4{ font-size:clamp(12.4px,4.37cqw,28px) }
  .rh{ margin-bottom:2.4cqw }
  .attrib{ font-size:clamp(10.3px,3.08cqw,21px); line-height:1.45; padding-top:1.6cqw }
  .attrib + .attrib{ padding-top:1cqw }
  .srccard{ padding:2.2cqw; margin-bottom:1.2cqw; gap:2.4cqw }
  .srccard .name{ font-size:clamp(13.4px,4.32cqw,28px); margin-bottom:1cqw }
  .srccard .org{ margin-bottom:.8cqw }
}

/* ---------- chapter rail (long books) ---------- */
#chapters[hidden]{ display:none }
#chapters{ margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid rgba(147,210,236,.14) }
.chap-h{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--blue-ring); margin-bottom:12px;
}
.chap-row{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(147,210,236,.22); background:rgba(18,46,87,.45);
  color:var(--birch-white); font:600 12.5px/1 "Inter",sans-serif; letter-spacing:.01em;
  transition:.2s ease;
}
.chip:hover{ background:rgba(79,175,217,.24); border-color:var(--blue-ring); transform:translateY(-1px) }
.chip i{
  font-style:normal; font-size:10.5px; font-weight:700; color:var(--navy-deep);
  background:var(--leaf); border-radius:999px; min-width:19px; height:19px;
  display:grid; place-items:center; padding:0 5px;
}
.chip em{ font-style:normal; font-size:11px; color:var(--blue-glow); opacity:.75 }

/* ---------- numbered principles (Greenhouse Gas Offset Projects) ---------- */
ol.principles{ list-style:none; display:grid; gap:2.2cqw; margin:.4cqw 0 .4cqw }
ol.principles li{ display:flex; gap:2.6cqw; align-items:flex-start }
ol.principles .pn{
  flex:none; width:6.4cqw; height:6.4cqw; min-width:24px; min-height:24px;
  border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--leaf),var(--leaf-deep)); color:#fff;
  font-family:"Fraunces",Georgia,serif; font-weight:600;
  font-size:clamp(12px,3.4cqw,22px); line-height:1;
}
ol.principles h4{
  font-family:"Fraunces",Georgia,serif; font-weight:600; color:var(--navy);
  font-size:clamp(13px,3.9cqw,25px); line-height:1.12; margin-bottom:.5cqw;
}
ol.principles p{ font-size:clamp(11px,3.2cqw,21px); line-height:1.36; margin:0 }
ol.principles p.why{
  margin-top:.7cqw; color:var(--forest); font-weight:550;
  font-size:clamp(10px,2.95cqw,19px); line-height:1.34;
}
@container (max-width: 620px){
  ol.principles{ gap:1.8cqw }
  .drivers{ gap:1cqw }
  .drivers .d{ padding:1.7cqw 2cqw; font-size:clamp(10px,3.2cqw,20px) }
  ul.ticks{ gap:.85cqw }
}

/* stacked variant of the two-up cards, for the three benefit families */
.split.stack{ grid-template-columns:1fr; gap:1.6cqw }
.split.stack .cell{ padding:2.6cqw 3cqw }
.split.stack .cell h4{ margin-bottom:.6cqw }