/* ===== Awqaf Excellence Index — v2 · CLIENT BRAND (Awqaf / Riyadah) ===== */
/* brand fonts (bundled from tajah-awqaf-website-beta): DIN Next Arabic = display, Ping AR+LT = body */
@font-face{font-family:'Ping-AR+LT';font-weight:300;font-style:normal;font-display:swap;src:url('fonts/ping-light.ttf') format('truetype')}
@font-face{font-family:'Ping-AR+LT';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/ping-regular.ttf') format('truetype')}
@font-face{font-family:'Ping-AR+LT';font-weight:500;font-style:normal;font-display:swap;src:url('fonts/ping-medium.ttf') format('truetype')}
@font-face{font-family:'Ping-AR+LT';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/ping-medium.ttf') format('truetype')}
@font-face{font-family:'Ping-AR+LT';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/ping-bold.ttf') format('truetype')}
@font-face{font-family:'DIN-Next-Arabic';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/din-regular.ttf') format('truetype')}
@font-face{font-family:'DIN-Next-Arabic';font-weight:500;font-style:normal;font-display:swap;src:url('fonts/din-medium.ttf') format('truetype')}
@font-face{font-family:'DIN-Next-Arabic';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/din-medium.ttf') format('truetype')}
@font-face{font-family:'DIN-Next-Arabic';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/din-bold.ttf') format('truetype')}
@font-face{font-family:'DIN-Next-Arabic';font-weight:900;font-style:normal;font-display:swap;src:url('fonts/din-black.ttf') format('truetype')}

:root{
  /* —— client brand palette (variables.scss) —— */
  --ink:#323232;           /* text-900 */
  --ink-soft:#717171;      /* text-700 */
  --ivory:#FCFCFC;         /* bg-100 */
  --ivory-2:#F3F6F5;       /* bg-200, tinted to teal */
  --surface:#FFFFFF;
  --green:#007062;         /* secondary-500 — brand teal-green */
  --green-deep:#00433A;    /* secondary-700 */
  --green-darkest:#001614; /* secondary-900 */
  --green-tint:#E4F0ED;    /* pale teal section bg */
  --mint:#2FD1AE;          /* secondary-400 — bright accent (the geometric motif) */
  --gold:#B88B2D;          /* primary-500 */
  --gold-deep:#936F24;     /* primary-600 */
  --gold-tint:#F1E8D5;     /* primary-100 */
  --line:#E6E7E4;
  --warm-gray:#969696;     /* text-600 */

  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.93rem);
  --step-0:  clamp(1rem, 0.96rem + 0.22vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.16rem + 0.45vw, 1.6rem);
  --step-2:  clamp(1.6rem, 1.42rem + 0.9vw, 2.3rem);
  --step-3:  clamp(2rem, 1.65rem + 1.7vw, 3.2rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.6vw, 4rem);

  --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px;
  --space-xl:32px; --space-2xl:48px; --space-3xl:64px; --space-4xl:96px;

  --measure:66ch;
  --disp-latin:'DIN-Next-Arabic','Ping-AR+LT',sans-serif;
  --body-latin:'Ping-AR+LT',system-ui,sans-serif;
  --disp-ar:'DIN-Next-Arabic','Ping-AR+LT',sans-serif;
  --body-ar:'Ping-AR+LT',system-ui,sans-serif;
}
/* header AEI logo (gold mark + wordmark) */
.wordmark{display:flex; align-items:center; gap:10px}
.wordmark .mark{height:34px; width:auto; display:block; flex-shrink:0}
.wordmark .wm-txt{font-family:var(--disp-latin); font-size:var(--step-0); line-height:1.05; color:var(--green-deep); font-weight:700; white-space:nowrap}
body.lang-ar .wordmark .wm-txt{font-family:var(--disp-ar)}
/* footer brand + partner lockup */
footer .brand{display:flex; align-items:center; gap:10px}
footer .brand .fmark{height:32px; width:auto; display:block; flex-shrink:0}
footer .brand .fwm{font-family:var(--disp-latin)}
body.lang-ar footer .brand .fwm{font-family:var(--disp-ar)}
.partners-row{display:flex; align-items:center; gap:var(--space-lg); flex-wrap:wrap; margin-block:var(--space-xs)}
.partners-row .pl-label{font-size:var(--step--1); color:color-mix(in oklab,var(--ivory) 58%, transparent)}
.partners-row .plogo{height:30px; width:auto; display:block}
.partners-row .chip{background:#fff; border-radius:6px; padding:7px 11px; display:inline-flex; align-items:center}
.partners-row .chip img{height:24px; width:auto; display:block}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--ivory); color:var(--ink); font-family:var(--body-latin);
  font-size:var(--step-0); line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
body[dir="rtl"]{font-family:var(--body-ar)}

/* bilingual */
.ar{display:none}
body.lang-ar .en{display:none}
body.lang-ar .ar{display:revert}
body.lang-ar :is(h1,h2,h3,.eyebrow,.wordmark,.lead){font-family:var(--disp-ar)}

h1,h2,h3{font-family:var(--disp-latin); font-weight:600; line-height:1.12; letter-spacing:-0.01em; color:var(--green-deep)}
h2{font-size:var(--step-2)} h3{font-size:var(--step-1); letter-spacing:0}
p{max-width:var(--measure)}
a{color:inherit}
.wrap{width:min(1080px, 92vw); margin-inline:auto}
section{padding-block:clamp(var(--space-3xl), 6vw, var(--space-4xl))}
.eyebrow{font-family:var(--body-latin); font-weight:600; font-size:var(--step--1);
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep)}
body.lang-ar .eyebrow{letter-spacing:.03em; font-family:var(--body-ar)}
.tint{background:var(--ivory-2)}
.dark{position:relative; overflow:hidden; background:var(--green-deep); color:var(--ivory)}
.dark::before{content:""; position:absolute; inset-block:-45% -45%; inset-inline-start:-10%; width:min(440px,50vw); z-index:0;
  background:url('assets/motif-star-white.svg') center/contain no-repeat; opacity:.07; pointer-events:none}
body[dir="rtl"] .dark::before{inset-inline-start:auto; inset-inline-end:-10%}
.dark .wrap{position:relative; z-index:1}
.dark h2,.dark h3{color:var(--ivory)}
.dark .eyebrow{color:var(--gold)}
.dark p{color:color-mix(in oklab,var(--ivory) 86%, transparent)}

/* buttons */
.btn{font-family:var(--body-latin); font-weight:600; font-size:var(--step--1); border-radius:3px; cursor:pointer;
  padding:12px 22px; border:1px solid transparent; text-decoration:none; display:inline-flex; gap:.5em; align-items:center;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background-color .25s, color .25s, border-color .25s}
body.lang-ar .btn{font-family:var(--body-ar)}
.btn-primary{background:var(--green-deep); color:var(--ivory)}
.btn-primary:hover{background:var(--green); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--green-deep); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green); color:var(--green)}
.dark .btn-ghost{color:var(--ivory); border-color:color-mix(in oklab,var(--ivory) 40%, transparent)}
.dark .btn-ghost:hover{border-color:var(--gold); color:var(--gold)}

/* header / footer (injected by site.js) */
header{position:sticky; top:0; z-index:50; background:color-mix(in oklab,var(--ivory) 97%, transparent);
  backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:var(--space-md); padding-block:var(--space-sm); min-height:62px}
.wordmark{font-family:var(--disp-latin); font-weight:600; font-size:var(--step-1); color:var(--green-deep);
  white-space:nowrap; letter-spacing:-0.02em; text-decoration:none}
.wordmark b{color:var(--gold-deep)}
.nav ul{display:flex; gap:var(--space-lg); list-style:none; font-size:var(--step--1); font-weight:500;
  margin-inline-start:auto}
.nav ul a{text-decoration:none; color:var(--ink-soft); padding-block:4px; border-bottom:2px solid transparent; white-space:nowrap}
.nav ul a:hover{color:var(--green)}
.nav ul a.current{color:var(--green-deep); border-bottom-color:var(--gold)}
.controls{display:flex; align-items:center; gap:var(--space-sm); flex-shrink:0}
.lang{font-family:var(--body-latin); font-weight:600; font-size:var(--step--1); background:transparent;
  border:1px solid var(--line); border-radius:3px; padding:8px 12px; cursor:pointer; color:var(--ink-soft)}
.lang:hover{border-color:var(--gold); color:var(--gold-deep)}
.menu-btn{display:none; background:transparent; border:1px solid var(--line); border-radius:3px; cursor:pointer;
  width:44px; height:40px; color:var(--green-deep); font-size:20px; line-height:1}
@media(max-width:1024px){
  .nav ul{display:none}
  .menu-btn{display:inline-flex; align-items:center; justify-content:center}
  .controls{margin-inline-start:auto}
  .wordmark{font-size:var(--step-0)}
  header.menu-open .nav ul{display:flex; position:absolute; inset-inline-end:4vw; top:100%; flex-direction:column;
    gap:var(--space-md); background:var(--surface); border:1px solid var(--line); border-radius:5px;
    padding:var(--space-lg); box-shadow:0 24px 48px -28px var(--ink); min-width:230px}
}
footer{background:var(--green-deep); color:color-mix(in oklab,var(--ivory) 82%, transparent); padding-block:var(--space-2xl)}
footer .wrap{display:grid; gap:var(--space-lg)}
footer .top{display:flex; justify-content:space-between; gap:var(--space-lg); flex-wrap:wrap; align-items:center}
footer .brand{font-family:var(--disp-latin); font-size:var(--step-1); color:var(--ivory)}
body.lang-ar footer .brand{font-family:var(--disp-ar)}
footer nav{display:flex; gap:var(--space-md); flex-wrap:wrap; font-size:var(--step--1)}
footer a{color:color-mix(in oklab,var(--ivory) 80%, transparent); text-decoration:none}
footer a:hover{color:var(--gold)}
footer .rule{height:1px; background:color-mix(in oklab,var(--ivory) 18%, transparent)}
footer .fine{font-size:var(--step--1); color:color-mix(in oklab,var(--ivory) 60%, transparent); display:flex;
  justify-content:space-between; gap:var(--space-md); flex-wrap:wrap}
.gov-badge{font-size:12px; color:color-mix(in oklab,var(--ivory) 70%, transparent)}

/* hero / opener — dark teal-green CANVAS (hybrid) */
.hero{position:relative; overflow:hidden; color:var(--ivory);
  background:radial-gradient(130% 100% at 88% -10%, var(--green) 0%, var(--green-deep) 55%), var(--green-deep)}
.hero::after{--m:min(700px,70vw); content:""; position:absolute; z-index:0; pointer-events:none; opacity:.2;
  width:var(--m); height:var(--m); top:50%; right:calc(var(--m) * -0.45); left:auto;
  transform:translateY(-50%);
  background:url('assets/motif-star.svg') center/contain no-repeat;
  animation:motif-spin 600s linear infinite}
/* Arabic (RTL): text is right-aligned, so the motif sits on the LEFT (physical props = unambiguous) */
body[dir="rtl"] .hero::after{right:auto; left:calc(var(--m) * -0.45)}
@keyframes motif-spin{from{transform:translateY(-50%) rotate(0)} to{transform:translateY(-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero::after{animation:none}}
.hero .wrap{display:grid; gap:var(--space-lg); position:relative; z-index:1}
.hero h1{font-size:var(--step-4); max-width:20ch; color:var(--ivory)}
.hero h1 .kw{color:var(--mint)}
.hero .eyebrow{color:var(--gold)}
.lead{font-size:var(--step-1); max-width:52ch; font-weight:400}
.hero .lead{color:color-mix(in oklab,var(--ivory) 86%, transparent)}
.cta-row{display:flex; gap:var(--space-md); flex-wrap:wrap; margin-top:var(--space-xs)}
.hero .btn-ghost{color:var(--ivory); border-color:color-mix(in oklab,var(--ivory) 40%, transparent)}
.hero .btn-ghost:hover{border-color:var(--gold); color:var(--gold)}
.partners{display:flex; gap:var(--space-md); align-items:center; margin-top:var(--space-md); font-size:var(--step--1); flex-wrap:wrap}
.hero .partners{color:color-mix(in oklab,var(--ivory) 80%, transparent)}
.pill{display:inline-flex; align-items:center; gap:.5em; padding:6px 12px; border:1px solid color-mix(in oklab,var(--ivory) 24%, transparent); border-radius:100px; background:color-mix(in oklab,var(--ivory) 8%, transparent); font-weight:500}
.pill .dot{width:7px;height:7px;border-radius:50%}
.hero-stats{display:flex; gap:var(--space-lg) var(--space-xl); flex-wrap:wrap; margin-top:var(--space-xs)}
.hero-stats .st{display:flex; align-items:baseline; gap:.45em; color:color-mix(in oklab,var(--ivory) 90%, transparent); font-size:var(--step--1)}
.hero-stats .st b{font-family:var(--disp-latin); font-size:var(--step-1); color:var(--gold); font-weight:700}
.hero-stats .st::before{content:"\2039"; color:var(--mint); font-weight:700; font-size:var(--step-0)}
body[dir="rtl"] .hero-stats .st::before{content:"\203A"}
.arch{height:5px; background:repeating-linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 22px); opacity:.7}

/* section head */
.shead{margin-bottom:var(--space-xl)}
.shead h2{margin-top:var(--space-xs); max-width:24ch}
.shead p{color:var(--ink-soft); margin-top:var(--space-sm)}

/* 3 guiding-question cards */
.q3{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--space-md)}
.q3 .card{background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:var(--space-lg); display:grid; gap:var(--space-xs)}
.q3 .q{font-family:var(--disp-latin); color:var(--green-deep); font-size:var(--step-1)}
body.lang-ar .q3 .q{font-family:var(--disp-ar)}
.q3 .a{color:var(--ink-soft); font-size:var(--step--1)}
.q3 .more{color:var(--green); font-weight:600; font-size:var(--step--1); text-decoration:none; margin-top:var(--space-xs)}
.q3 .more:hover{color:var(--gold-deep)}

/* objectives list */
.objectives{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-md) var(--space-xl)}
.objectives li{list-style:none; display:flex; gap:var(--space-sm); align-items:flex-start; font-size:var(--step-0);
  background:var(--surface); border-radius:12px; padding:var(--space-md) var(--space-lg); box-shadow:var(--shadow-sm)}
.objectives .mk{color:var(--gold-deep); font-weight:700; flex-shrink:0}

/* the journey — numbered step path */
.journey{display:grid; gap:var(--space-md); counter-reset:step}
.journey{display:grid; gap:var(--space-md)}
.jstep{display:grid; grid-template-columns:auto 1fr; gap:var(--space-lg); align-items:start;
  padding:var(--space-xl); background:var(--surface); border-radius:14px; box-shadow:var(--shadow-md)}
@media(hover:hover){.jstep{transition:transform .2s ease, box-shadow .2s ease}
  .jstep:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}}
@media(prefers-reduced-motion:reduce){.jstep:hover{transform:none}}
.jstep .num{font-family:var(--disp-latin); font-size:var(--step-3); color:color-mix(in oklab,var(--green) 35%, var(--ivory)); line-height:.85; min-width:1.8ch}
body.lang-ar .jstep .num{font-family:var(--disp-ar)}
.jstep h3{font-size:var(--step-1); color:var(--green-deep)}
.jstep p{color:var(--ink-soft); font-size:var(--step-0); margin-top:4px}
.jstep .need{font-size:var(--step--1); color:var(--warm-gray); margin-top:var(--space-xs)}
.jstep .need b{color:var(--gold-deep); font-weight:600}
/* compact journey preview (home) */
.jmini{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-sm)}
.jmini .s{background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:var(--space-md); display:grid; gap:4px}
.jmini .n{font-family:var(--disp-latin); color:var(--gold-deep); font-size:var(--step-1)}
body.lang-ar .jmini .n{font-family:var(--disp-ar)}
.jmini .t{font-weight:600; color:var(--green-deep); font-size:var(--step--1)}

/* what you see / never see */
.seebox{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md)}
@media(max-width:640px){.seebox{grid-template-columns:1fr}}
.seebox .col{border:1px solid var(--line); border-radius:6px; padding:var(--space-lg); background:var(--surface)}
.seebox .col.no{background:var(--green-tint); border-color:var(--green)}
.seebox h3{font-size:var(--step-0)}
.seebox li{list-style:none; padding:6px 0; font-size:var(--step--1); color:var(--ink-soft); display:flex; gap:.5em}
.seebox .mk{flex-shrink:0; font-weight:700}
.seebox .col .mk{color:var(--green)} .seebox .col.no .mk{color:var(--gold-deep)}

/* charter statements */
.charter-list{display:grid; gap:var(--space-md); max-width:62ch}
.charter-item{display:grid; grid-template-columns:auto 1fr; gap:var(--space-md); align-items:start;
  background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:var(--space-lg)}
.charter-item .seal{width:34px; height:34px; border-radius:50%; background:var(--green-tint); color:var(--green-deep);
  display:grid; place-content:center; font-weight:700; flex-shrink:0}
.charter-item p{font-size:var(--step-0); color:var(--ink); max-width:none; margin:0}
.charter-item .en, .charter-item .ar{font-size:var(--step-0)}

/* pillar accordion (maturity, never a score) */
.pillar-list{display:grid; gap:var(--space-sm)}
.acc-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s cubic-bezier(.2,.7,.2,1)}
.acc-toggle[aria-expanded="true"] + .acc-body{grid-template-rows:1fr}
.acc-inner{overflow:hidden; min-height:0}
@media(prefers-reduced-motion:reduce){.acc-body,html{transition:none; scroll-behavior:auto}}
.pillar{border:1px solid var(--line); border-radius:6px; background:var(--surface); overflow:hidden}
.pillar:has(.acc-toggle[aria-expanded="true"]){border-color:var(--green)}
.pillar__toggle{width:100%; display:flex; align-items:center; gap:var(--space-md); padding:var(--space-lg);
  background:transparent; border:0; cursor:pointer; text-align:start; font-family:inherit; color:var(--ink)}
.pillar__toggle:hover{background:var(--green-tint)}
.pillar__toggle:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}
.pillar__num{font-family:var(--disp-latin); color:var(--gold-deep); font-size:var(--step-2); flex-shrink:0; min-width:1.4ch}
body.lang-ar .pillar__num{font-family:var(--disp-ar)}
.pillar__name{font-family:var(--disp-latin); color:var(--green-deep); font-size:var(--step-1); flex:1; line-height:1.15}
body.lang-ar .pillar__name{font-family:var(--disp-ar)}
.pillar__meta{font-weight:700; color:var(--green); font-size:var(--step--1); white-space:nowrap}
.pillar__chev{flex-shrink:0; color:var(--gold-deep); font-size:var(--step-1); transition:transform .25s}
.pillar__toggle[aria-expanded="true"] .pillar__chev{transform:rotate(45deg)}
.pillar__inner{padding:0 var(--space-lg) var(--space-lg)}
.pillar__why{color:var(--ink); margin-bottom:var(--space-sm); max-width:62ch}
body.lang-ar .pillar__why{font-family:var(--body-ar)}
.pillar__measure{font-size:var(--step--1); color:var(--warm-gray); margin-bottom:var(--space-md)}
.pillar__measure b{color:var(--gold-deep)}
.dim{display:flex; gap:var(--space-sm); align-items:baseline; font-size:var(--step--1); color:var(--ink-soft); padding:7px 0; border-top:1px solid var(--line)}
.dim .dc{font-family:var(--disp-latin); color:var(--gold-deep); font-weight:600; flex-shrink:0}
.dim .dn-ar{color:var(--green-deep); font-family:var(--body-ar)}

/* FAQ accordion (reuses .acc + .pillar styles, lighter) */
.faq{display:grid; gap:var(--space-xs); max-width:72ch}
.faq .pillar__toggle{padding:var(--space-md) var(--space-lg)}
.faq .pillar__name{font-size:var(--step-0)}
.faq .pillar__inner{padding-top:0}
.faq .pillar__inner p{color:var(--ink-soft); font-size:var(--step--1)}

/* prepare cards */
.prep{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-md)}
.prep .card{border:1px solid var(--line); border-radius:6px; padding:var(--space-lg); background:var(--surface)}
.prep h3{font-size:var(--step-0); margin-bottom:var(--space-xs)}
.prep li{list-style:none; font-size:var(--step--1); color:var(--ink-soft); padding:4px 0; display:flex; gap:.5em}
.prep .mk{color:var(--gold-deep); flex-shrink:0}

/* trust banner */
.trust-banner{border:1px solid var(--green); background:var(--green-tint); border-radius:8px; padding:var(--space-xl);
  display:flex; gap:var(--space-lg); align-items:center; flex-wrap:wrap; justify-content:space-between}
.trust-banner .t{max-width:46ch}
.trust-banner h3{color:var(--green-deep)}
.trust-banner p{color:var(--ink-soft); font-size:var(--step--1); margin-top:4px}

/* reveal */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none}}

/* ===== make-interfaces-feel-better polish ===== */
/* #10 text wrapping — balance headings, avoid orphans in body */
h1,h2,h3{text-wrap:balance}
p,.lead{text-wrap:pretty}
/* #8 font smoothing — grayscale on macOS pairs with antialiased */
body{-moz-osx-font-smoothing:grayscale}
/* #9 tabular numbers on numeric callouts (consistent width, no jiggle) */
.hero-stats .st b,.pillar__num,.pillar__meta,.spanel__head .pw,.seg .sw,.dims .dc,.dim .dc,
.lvl .lb,.sdg b,.sdgp__n,.jstep .num,.jmini .n,.idcard__rows dd{font-variant-numeric:tabular-nums}
/* #12 tactile scale on press — independent `scale` composes with hover transforms; #14 no transition:all */
.btn,.seg,.sdg,.lvl,.pillar__toggle,.rfilter button,.lang,.menu-btn{
  transition-property:background-color,border-color,color,transform,scale,opacity,box-shadow;
  transition-duration:.2s; transition-timing-function:cubic-bezier(.2,.7,.2,1)}
.btn:active,.seg:active,.sdg:active,.lvl:active,.pillar__toggle:active,.rfilter button:active,.lang:active,.menu-btn:active{scale:.97}
@media(prefers-reduced-motion:reduce){
  .btn:active,.seg:active,.sdg:active,.lvl:active,.pillar__toggle:active,.rfilter button:active,.lang:active,.menu-btn:active{scale:1}}

/* prototype ribbon */
.draft{position:fixed; bottom:12px; inset-inline-end:12px; z-index:80; background:color-mix(in oklab,var(--gold) 92%, transparent);
  color:var(--green-deep); font-family:var(--body-latin); font-weight:700; font-size:10px; letter-spacing:.04em;
  padding:5px 9px; border-radius:3px; box-shadow:0 8px 24px -14px var(--ink)}

/* ============ PREMIUM QUALITY PASS — depth · clearer sections · refined panels ============ */
:root{
  --shadow-sm:0 1px 2px -1px rgba(28,67,76,.12);
  --shadow-md:0 1px 2px -1px rgba(28,67,76,.07), 0 10px 26px -16px rgba(28,67,76,.22);
  --shadow-lg:0 2px 6px -3px rgba(28,67,76,.10), 0 26px 60px -30px rgba(28,67,76,.30);
}
/* clearer section rhythm — the tint is now perceptible, with a hairline lift */
.tint{background:#E9F1ED; box-shadow:inset 0 1px 0 rgba(28,67,76,.05)}
/* refined content panels: soft depth instead of thin hairline borders (mifb: shadows over borders) */
.q3 .card,.rcard,.stdg,.cdetail,.formcard,.prep .card,.idcard,.jmini .s,.spanel,.lpanel,.sdgp,.charter-item,.seebox .col,.checklist label,.lvl{
  border-color:rgba(28,67,76,.07); box-shadow:var(--shadow-md)}
.q3 .card,.rcard,.stdg,.idcard,.formcard{border-radius:14px}
.q3 .card,.prep .card{padding:var(--space-xl)}
.jmini .s{border-radius:12px; padding:var(--space-lg)}
.jmini .ic{display:block; color:var(--green); margin-bottom:10px}
.jmini .ic svg{width:30px; height:30px; display:block}
.spanel,.lpanel,.sdgp{border-radius:14px}
/* premium callout — no thin border, soft lift, a refined gold accent tab */
.trust-banner{position:relative; border:0; background:var(--surface); border-radius:18px;
  box-shadow:var(--shadow-lg); padding:var(--space-2xl)}
.trust-banner::before{content:""; position:absolute; top:0; inset-inline-start:var(--space-2xl);
  width:54px; height:4px; background:var(--gold); border-radius:0 0 4px 4px}
.trust-banner .t{max-width:64ch}
.trust-banner h3{font-size:var(--step-1)}
/* refined standard chips + local-frameworks panel */
.chips span{background:#fff; border-color:rgba(28,67,76,.08); box-shadow:var(--shadow-sm); padding:6px 14px}
.stdg--local{background:#E9F1ED; box-shadow:var(--shadow-md)}
/* language-aware arrows: the forward arrow flips in Arabic (down arrows are symmetric) */
.dir-arrow{display:inline-block}
body[dir="rtl"] .dir-arrow{transform:scaleX(-1)}

/* ===== pillars: weight caption + "measured across N dimensions" label + rows ===== */
/* the weight % carries a small caption (what it is a share of) — no repeated box */
.spanel__head .pw{display:inline-flex; flex-direction:column; line-height:1.02}
.pw-cap{font-size:var(--step--2); font-weight:600; color:var(--warm-gray);
  text-transform:uppercase; letter-spacing:.04em; margin-top:3px}
body.lang-ar .pw-cap{font-family:var(--body-ar); letter-spacing:0; text-transform:none}
/* a quiet labelled divider that introduces — and explains — the dimensions */
.dims-label{display:flex; align-items:center; gap:var(--space-md);
  font-size:var(--step--1); font-weight:600; color:var(--warm-gray);
  margin:var(--space-md) 0 var(--space-sm)}
.dims-label b{color:var(--gold-deep); font-variant-numeric:tabular-nums; font-weight:700}
.dims-label::after{content:""; flex:1; height:1px;
  background:linear-gradient(to right, rgba(28,67,76,.14), transparent)}
body[dir="rtl"] .dims-label::after{background:linear-gradient(to left, rgba(28,67,76,.14), transparent)}
body.lang-ar .dims-label{font-family:var(--body-ar)}
.dims{grid-template-columns:1fr; gap:0}
.dims .dim-item{display:block; padding:0; border-top:1px solid rgba(28,67,76,.08)}
.dims .dim-item:first-child{border-top:0}
.dim-row{width:100%; display:flex; align-items:center; gap:var(--space-sm); padding:12px 4px; background:transparent;
  border:0; cursor:pointer; text-align:start; font-family:inherit; font-size:var(--step--1); color:var(--ink-soft); transition:color .2s}
.dim-row:hover,.dim-row[aria-expanded="true"]{color:var(--green-deep)}
.dim-row .dc{font-family:var(--disp-latin); color:var(--gold-deep); font-weight:700; flex-shrink:0; min-width:2.6ch}
.dim-row .dim-name{flex:1}
body.lang-ar .dim-row .dim-name{font-family:var(--body-ar)}
.dim-row .dim-chev{color:var(--gold-deep); font-weight:700; flex-shrink:0; transition:transform .25s; font-size:var(--step-0); line-height:1}
.dim-row[aria-expanded="true"] .dim-chev{transform:rotate(45deg)}
.dim-q{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s cubic-bezier(.2,.7,.2,1)}
.dim-row[aria-expanded="true"] + .dim-q{grid-template-rows:1fr}
.dim-q-i{overflow:hidden; min-height:0}
.dim-q-i>div{padding-inline-start:calc(2.6ch + var(--space-sm)); padding-bottom:13px; color:var(--ink); font-size:var(--step--1); line-height:1.6}
body.lang-ar .dim-q-i>div{font-family:var(--body-ar)}
.dim-q .ql{color:var(--green); font-weight:700}

/* ===== Measurement Method page ===== */
/* two-tone keyword on light sections (gold) + gov source-attribution line */
.kw2{color:var(--gold-deep)}
.srcline{font-size:var(--step--1); color:var(--warm-gray); margin-top:var(--space-md)}
.srcline::before{content:"\2014\00a0"; color:var(--mint); font-weight:700}

/* «تعريف» identity card */
.idcard{display:grid; grid-template-columns:auto 1fr; gap:var(--space-xl); align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:var(--space-xl)}
.idcard__mark{width:84px; height:84px; display:grid; place-content:center; background:var(--green-tint); border-radius:14px; flex-shrink:0}
.idcard__mark img{width:54px; height:54px; display:block}
.idcard__rows{display:grid; gap:2px}
.idcard__rows>div{display:grid; grid-template-columns:170px 1fr; gap:var(--space-md); padding-block:10px; border-top:1px solid var(--line)}
.idcard__rows>div:first-child{border-top:0}
.idcard__rows dt{font-weight:700; color:var(--green); font-size:var(--step--1)}
.idcard__rows dd{color:var(--ink); font-size:var(--step-0)}
body.lang-ar .idcard__rows dt{font-family:var(--body-ar)}
@media(max-width:680px){.idcard{grid-template-columns:1fr; gap:var(--space-lg)} .idcard__rows>div{grid-template-columns:1fr; gap:2px}}

/* pillars — weighted spectrum */
.spectrum{display:flex; gap:4px; margin-bottom:var(--space-lg)}
.seg{position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-md);
  min-height:130px; padding:var(--space-md); border:0; cursor:pointer; text-align:start; color:var(--ivory);
  background:var(--green); border-radius:6px; overflow:hidden; transition:background-color .25s, transform .2s}
.seg .sn{font-family:var(--disp-latin); font-size:var(--step-1); font-weight:700; opacity:.65}
.seg .snm{font-size:var(--step--1); font-weight:600; line-height:1.12; opacity:.92}
body.lang-ar .seg .snm{font-family:var(--body-ar)}
.seg .sw{font-family:var(--disp-latin); font-size:var(--step-2); font-weight:700}
.seg:hover{background:var(--green-deep)}
.seg[aria-selected="true"]{background:var(--green-deep)}
.seg[aria-selected="true"]::after{content:""; position:absolute; inset-inline:0; bottom:0; height:4px; background:var(--gold)}
/* mobile: keep the SAME weighted-bar concept as desktop — stack the segments
   vertically and let each one's HEIGHT reflect its weight. The inline
   style="flex:18/20/.." (unchanged) now distributes the column's height instead
   of the row's width, so it stays a weighted spectrum/progress bar — NOT boxes. */
@media(max-width:760px){
  .spectrum{flex-direction:column; height:clamp(460px,96vw,560px); gap:4px}
  .seg{min-height:0; flex-direction:row; align-items:center; justify-content:space-between;
    gap:var(--space-sm); padding:var(--space-sm) var(--space-lg)}
  .seg .sn{font-size:var(--step-0)}
  .seg .snm{flex:1; opacity:.92}
  /* selected marker: a gold strip on the leading edge instead of the bottom */
  .seg[aria-selected="true"]::after{inset-inline:0 auto; inset-block:0; width:4px; height:auto}
}

.spanel{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:var(--space-xl)}
.spanel__head{display:flex; align-items:center; gap:var(--space-md); flex-wrap:wrap; margin-bottom:var(--space-sm)}
.spanel__head h3{flex:1; min-width:220px}
.spanel__head .pw{font-family:var(--disp-latin); font-size:var(--step-2); font-weight:700; color:var(--gold-deep)}
.spanel__head .pd{font-size:var(--step--1); color:var(--warm-gray); font-weight:600}
.spanel__why{color:var(--ink); max-width:72ch; margin-bottom:var(--space-md)}
body.lang-ar .spanel__why{font-family:var(--body-ar)}
.dims{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--space-xl); list-style:none}
@media(max-width:640px){.dims{grid-template-columns:1fr}}
.dims li{display:flex; gap:var(--space-sm); align-items:baseline; font-size:var(--step--1); color:var(--ink-soft); padding:7px 0; border-top:1px solid var(--line)}
.dims .dc{font-family:var(--disp-latin); color:var(--gold-deep); font-weight:700; flex-shrink:0; min-width:2.2ch}
body.lang-ar .dims li>span:last-child{font-family:var(--body-ar)}

/* maturity — pathway */
.mpath{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-sm); margin-bottom:var(--space-md)}
@media(max-width:640px){.mpath{grid-template-columns:repeat(2,1fr)}}
.lvl{position:relative; display:flex; flex-direction:column; gap:4px; align-items:flex-start; padding:var(--space-md) var(--space-lg);
  border:1px solid var(--line); border-radius:8px; background:var(--surface); cursor:pointer; text-align:start;
  transition:border-color .2s, background-color .2s}
.lvl .lb{font-family:var(--disp-latin); font-size:var(--step--1); color:var(--warm-gray); font-weight:600}
.lvl .ln{font-family:var(--disp-latin); font-size:var(--step-1); color:var(--green-deep)}
body.lang-ar .lvl .ln{font-family:var(--disp-ar)}
.lvl:hover{background:var(--green-tint)}
.lvl[aria-selected="true"]{border-color:var(--green); background:var(--green-tint)}
.lvl[aria-selected="true"]::after{content:""; position:absolute; inset-inline:16px; bottom:-1px; height:3px; background:var(--gold)}
.lpanel{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:var(--space-lg)}
.lpanel p{max-width:74ch; color:var(--ink)}
body.lang-ar .lpanel p{font-family:var(--body-ar)}

/* development cycle (on dark) */
.cycle{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xl)}
@media(max-width:760px){.cycle{grid-template-columns:1fr; gap:var(--space-lg)}}
.cyc{position:relative; padding:var(--space-lg); border:1px solid color-mix(in oklab,var(--ivory) 22%, transparent);
  border-radius:8px; background:color-mix(in oklab,var(--ivory) 6%, transparent)}
.cyc__n{font-family:var(--disp-ar); font-size:var(--step-3); color:var(--mint); line-height:1; display:block; margin-bottom:var(--space-xs)}
.cyc h3{color:var(--ivory); font-size:var(--step-1)}
.cyc p{color:color-mix(in oklab,var(--ivory) 82%, transparent); font-size:var(--step--1); margin-top:4px}
.cyc+.cyc::before{content:"\203A"; position:absolute; inset-inline-start:-26px; top:50%; transform:translateY(-50%);
  color:var(--gold); font-size:var(--step-2); font-weight:700}
body[dir="rtl"] .cyc+.cyc::before{content:"\2039"}
@media(max-width:760px){.cyc+.cyc::before{display:none}}

/* standards groups */
.stdgroups{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:var(--space-md)}
.stdg{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:var(--space-lg)}
.stdg h3{font-size:var(--step-0); color:var(--green-deep); margin-bottom:var(--space-sm)}
.stdg--local{grid-column:1/-1; background:var(--green-tint); border-color:var(--green)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips span{font-size:var(--step--1); font-weight:600; color:var(--green-deep); background:var(--surface);
  border:0; border-radius:100px; padding:7px 15px}
.stdg--local .chips span{background:var(--surface)}
body.lang-ar .chips span{font-family:var(--body-ar)}

/* SDG tiles */
.sdgs{display:grid; grid-template-columns:repeat(8,1fr); gap:var(--space-sm); margin-bottom:var(--space-md)}
@media(max-width:900px){.sdgs{grid-template-columns:repeat(4,1fr)}}
@media(max-width:480px){.sdgs{grid-template-columns:repeat(2,1fr)}}
.sdg{display:block; padding:0; border:0; border-radius:8px; overflow:hidden; cursor:pointer; background:var(--c);
  aspect-ratio:1; opacity:.92; transition:transform .2s, opacity .2s, box-shadow .2s}
.sdg img{width:100%; height:100%; object-fit:cover; vertical-align:top}
/* bilingual tile: official EN svg / official AR png, swapped by language */
.sdg img.en{display:block} .sdg img.ar{display:none}
body.lang-ar .sdg img.en{display:none} body.lang-ar .sdg img.ar{display:block}
.sdg:hover{transform:translateY(-2px); opacity:1}
.sdg[aria-selected="true"]{opacity:1; box-shadow:0 0 0 3px var(--ivory-2), 0 0 0 5px var(--c)}
/* official-icon attribution (UN SDG guidelines) */
.sdg-note{font-size:11px; line-height:1.5; color:var(--warm-gray); margin-top:var(--space-sm); max-width:74ch}
body.lang-ar .sdg-note{font-family:var(--body-ar)}
.sdgp{display:flex; gap:var(--space-md); align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:var(--space-lg)}
.sdgp[hidden]{display:none}
.sdgp__n{width:46px; height:46px; border-radius:8px; color:#fff; display:grid; place-content:center;
  font-family:var(--disp-latin); font-weight:700; font-size:var(--step-1); flex-shrink:0}
.sdgp p{font-size:var(--step-0); color:var(--ink); margin:0}
body.lang-ar .sdgp p{font-family:var(--body-ar)}

/* ===== Knowledge Hub ===== */
.rfilter{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--space-lg)}
.rfilter button{font-family:var(--body-latin); font-weight:600; font-size:var(--step--1); cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:8px 16px; color:var(--ink-soft); transition:all .2s}
body.lang-ar .rfilter button{font-family:var(--body-ar)}
.rfilter button:hover{border-color:var(--green); color:var(--green)}
.rfilter button[aria-selected="true"]{background:var(--green-deep); border-color:var(--green-deep); color:var(--ivory)}
.reshub{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--space-md)}
.rcard{display:flex; flex-direction:column; gap:var(--space-xs); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:var(--space-lg)}
.rcard[hidden]{display:none}
.rcard__top{display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); margin-bottom:4px}
.rcat{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep)}
body.lang-ar .rcat{letter-spacing:0}
.rchip{font-size:11px; font-weight:700; border-radius:100px; padding:3px 10px; white-space:nowrap; flex-shrink:0}
.rchip.ok{background:var(--green-tint); color:var(--green-deep)}
.rchip.soon{background:var(--gold-tint); color:var(--gold-deep)}
.rchip.tbc{background:var(--ivory-2); color:var(--warm-gray); border:1px solid var(--line)}
.rcard h3{font-size:var(--step-0); color:var(--green-deep)}
.rcard p{font-size:var(--step--1); color:var(--ink-soft); flex:1; max-width:none}
.rlink{margin-top:var(--space-xs); color:var(--green); font-weight:600; font-size:var(--step--1); text-decoration:none}
.rlink:hover{color:var(--gold-deep)}

/* ===== Prepare — tickable checklist ===== */
.checklist{display:grid; gap:10px; max-width:66ch; list-style:none}
.checklist label{display:flex; gap:var(--space-sm); align-items:flex-start; cursor:pointer;
  padding:13px var(--space-md); border:1px solid var(--line); border-radius:8px; background:var(--surface); transition:border-color .2s}
.checklist label:hover{border-color:var(--green)}
.checklist input{margin-top:3px; width:18px; height:18px; accent-color:var(--green); flex-shrink:0; cursor:pointer}
.checklist span{font-size:var(--step--1); color:var(--ink-soft)}
.checklist b{color:var(--green-deep)}
body.lang-ar .checklist span{font-family:var(--body-ar)}
.checklist input:checked ~ span{color:var(--warm-gray)}
.checklist input:checked ~ span b{color:var(--warm-gray); text-decoration:line-through}

/* ===== Contact — forms ===== */
.forms{display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-xl); align-items:start}
@media(max-width:820px){.forms{grid-template-columns:1fr}}
.formcard{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:var(--space-xl)}
.formcard h3{font-size:var(--step-1); color:var(--green-deep); margin-bottom:var(--space-md)}
body.lang-ar .formcard h3{font-family:var(--disp-ar)}
.field{display:grid; gap:6px; margin-bottom:var(--space-md)}
.field label{font-size:var(--step--1); font-weight:600; color:var(--ink)}
body.lang-ar .field label{font-family:var(--body-ar)}
.field input, .field textarea, .field select{font-family:var(--body-latin); font-size:var(--step-0); padding:11px 13px;
  border:1px solid var(--line); border-radius:6px; background:var(--ivory-2); color:var(--ink); width:100%}
body.lang-ar .field input, body.lang-ar .field textarea, body.lang-ar .field select{font-family:var(--body-ar)}
.field input:focus, .field textarea:focus, .field select:focus{outline:2px solid var(--gold); outline-offset:-1px; border-color:var(--green); background:#fff}
.field textarea{resize:vertical; min-height:120px}
.formcard .btn{margin-top:4px}
.form-note{font-size:var(--step--1); color:var(--warm-gray); margin-top:var(--space-sm)}
.form-ok{display:none; margin-top:var(--space-sm); padding:10px 14px; border-radius:6px;
  background:var(--green-tint); color:var(--green-deep); font-size:var(--step--1); font-weight:600}
.form-ok.show{display:block}
.contact-aside{display:grid; gap:var(--space-md)}
.cdetail{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:var(--space-lg)}
.cdetail h4{font-size:var(--step-0); color:var(--green-deep); margin-bottom:6px}
.cdetail p{font-size:var(--step--1); color:var(--ink-soft); margin:0; max-width:none}
body.lang-ar .cdetail p{font-family:var(--body-ar)}
.cdetail .tbc{color:var(--gold-deep); font-weight:600}

/* ============ PREMIUM PASS — Standards architecture (method.html) ============ */
/* Reframes the flat chip-grid as a numbered "standards architecture": gold index
   numerals + per-domain counts + a count-cue strip + a distinct foundation card and
   a full-width local-frameworks base band. Depth via existing --shadow tokens. */

/* count-cue strip above the grid */
.stdcue{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-xs) var(--space-md);
  margin-bottom:var(--space-lg); color:var(--ink-soft); font-size:var(--step--1)}
.stdcue span{display:inline-flex; align-items:baseline; gap:6px}
.stdcue span+span{padding-inline-start:var(--space-md); border-inline-start:1px solid rgba(28,67,76,.14)}
.stdcue b{font-family:var(--disp-latin); font-weight:700; font-size:var(--step-0);
  color:var(--gold-deep); font-variant-numeric:tabular-nums; letter-spacing:-0.01em}
body.lang-ar .stdcue{font-family:var(--body-ar)}

/* the grid: a touch more breathing room than the old flat layout */
.stdgroups{gap:var(--space-lg)}
/* refined domain card — no thin border; soft brand-tinted depth + larger radius */
.stdg{position:relative; border:0; border-radius:16px; padding:var(--space-lg) var(--space-lg) calc(var(--space-lg) + 2px);
  box-shadow:var(--shadow-md); transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease}
/* head row: gold index numeral · domain name · count pill */
.stdg__head{display:flex; align-items:flex-start; gap:var(--space-sm); margin-bottom:var(--space-md);
  padding-bottom:var(--space-sm); border-bottom:1px solid rgba(28,67,76,.08)}
.stdg__head h3{flex:1; margin:0; font-size:var(--step-0); line-height:1.25; color:var(--green-deep)}
.stdg__num{font-family:var(--disp-latin); font-weight:700; font-size:var(--step-1); line-height:1;
  color:var(--gold); font-variant-numeric:tabular-nums; letter-spacing:-0.02em; transition:color .25s ease}
.stdg__count{flex-shrink:0; min-width:26px; height:26px; padding:0 7px; border-radius:100px;
  display:inline-flex; align-items:center; justify-content:center; background:var(--green-tint);
  color:var(--green-deep); font-family:var(--disp-latin); font-weight:700; font-size:var(--step--1);
  font-variant-numeric:tabular-nums; margin-top:2px}
/* micro-interaction: calm institutional lift; numeral deepens */
@media(hover:hover){
  .stdg:not(.stdg--local):hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
  .stdg:not(.stdg--local):hover .stdg__num{color:var(--gold-deep)}
  .chips span{transition:background .2s ease, transform .2s ease, box-shadow .2s ease}
  .chips span:hover{background:var(--green-tint); transform:translateY(-1px); box-shadow:var(--shadow-md)}
}
@media(prefers-reduced-motion:reduce){
  .stdg,.stdg__num,.chips span{transition:none}
  .stdg:not(.stdg--local):hover{transform:none}
}
/* foundation card — faint gold wash marks the Shariah base */
.stdg--found{background:linear-gradient(180deg, var(--gold-tint) 0%, var(--surface) 46%)}
.stdg--found .stdg__count{background:var(--gold-tint); color:var(--gold-deep)}
/* full-width regulatory base band, set apart from the domain cards */
.stdg--local{grid-column:1/-1; background:#E9F1ED; box-shadow:var(--shadow-md); padding:var(--space-lg) var(--space-xl)}
.stdg--local .stdg__head{border-bottom-color:rgba(28,67,76,.12)}
.stdg--local .stdg__head h3{color:var(--green-deep)}
.stdg--local .chips span{background:var(--surface)}

/* ===== REFINEMENTS (Jun 25 b): hero logo lockup · panel alignment · reading measure ===== */
/* home hero: partner logos replace the text credit line (on the dark canvas) */
.hero-partners{display:flex; align-items:center; gap:var(--space-lg); flex-wrap:wrap; margin-bottom:2px}
.hero-partners img{width:auto; opacity:.96}
.hero-partners .undp{height:40px}
.hero-partners .rc{height:30px}
@media(max-width:520px){.hero-partners .undp{height:34px} .hero-partners .rc{height:26px}}

/* standards reuse the home pillar-accordion; the local band sits apart, full width */
.stdg--local{margin-top:var(--space-md)}

/* pillar panel head: anchor the big weight to the title's top line, not vertical centre */
.spanel__head{align-items:flex-start}
.spanel__head .pw{padding-top:2px}

/* one comfortable reading measure across the site (was 52/72/74ch in places) */
.spanel__why,.lpanel p{max-width:var(--measure)}
.shead p{max-width:62ch; line-height:1.7}
.hero .lead{max-width:50ch}

/* consistency: hover-lift on content cards that lacked one (matches .stdg:hover) */
@media(hover:hover){
  .rcard,.charter-item{transition:transform .2s ease, box-shadow .2s ease}
  .rcard:hover,.charter-item:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
}
@media(prefers-reduced-motion:reduce){.rcard:hover,.charter-item:hover{transform:none}}
/* contact: the "(optional)" tag had no rule */
.opt{color:var(--warm-gray); font-weight:400; font-size:var(--step--2)}

/* about: demote 2 of 3 trust-banners to calm panels so the gold-tab callout isn't overused */
.trust-banner.tb-plain::before{display:none}
.trust-banner.tb-plain{box-shadow:var(--shadow-md)}
/* charter: the aggregate-reporting prose gets a clean elevated panel */
.aggpanel{background:var(--surface); border-radius:16px; box-shadow:var(--shadow-md);
  padding:var(--space-2xl); display:grid; gap:var(--space-sm); max-width:64ch}