/* T'ASEES · "Why leaders engage us" (R13)
   One index of nine challenges, one feature panel, two related previews.
   Uses the page's own tokens (--fg, --bg, --muted, --line, --signal, --f-*, --ease), so light and dark both work. */

.engage{--eg-paper:#FBFAF7;--eg-paper-2:#F3F1EC;--eg-ink-2:color-mix(in srgb,var(--fg) 72%,var(--eg-paper));
  background:var(--eg-paper);padding-block:var(--sec-y,clamp(52px,5.6vw,80px));border-block:1px solid var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .engage{--eg-paper:var(--bg);--eg-paper-2:var(--surface)}}
:root[data-theme="dark"] .engage{--eg-paper:var(--bg);--eg-paper-2:var(--surface)}

/* ---------- head: heading + index ---------- */
.eg-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:28px var(--colgap,56px);align-items:end;padding-bottom:clamp(28px,3vw,40px);border-bottom:1px solid var(--line)}
.eg-title .h2{font-size:clamp(34px,3.5vw,54px);max-width:19ch}
.eg-index ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,2vw,28px)}
.eg-index li{display:flex;border-top:1px solid var(--line)}
.eg-tab{position:relative;flex:1;display:flex;flex-direction:column;gap:4px;min-height:48px;padding:12px 0 14px;color:var(--fg);text-decoration:none;transition:color .2s}
.eg-tl{display:inline-flex;align-items:baseline;gap:8px;font-size:clamp(16px,1.2vw,18px);letter-spacing:-.01em;line-height:1.2;font-weight:500}
.eg-tab .eg-num{font:400 12px/1 var(--f-mono);letter-spacing:.06em;color:var(--muted);transition:color .2s}
.eg-sum{font-size:14px;line-height:1.4;color:var(--muted);text-wrap:pretty;transition:color .2s}
.eg-tab::after{content:"";position:absolute;inset-inline:0;top:-1px;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:var(--eg-from,left);transition:transform .45s var(--ease)}
[dir=rtl] .eg-tab{--eg-from:right}
.eg-tab[aria-selected="true"] .eg-tl,.eg-tab[aria-selected="true"] .eg-num,.engage:not(.eg-js) .eg-tab[aria-current] .eg-tl{color:var(--signal)}
.eg-tab[aria-selected="true"] .eg-sum{color:var(--fg)}
.eg-tab[aria-selected="true"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.eg-tab:hover .eg-tl{color:var(--signal)}.eg-tab:hover .eg-sum{color:var(--fg)}.eg-tab:hover::after{transform:scaleX(.3)}.eg-tab[aria-selected="true"]:hover::after{transform:scaleX(1)}}
.eg-tab:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:4px}

/* ---------- feature ---------- */
.eg-stage{display:grid;padding-block:clamp(28px,3.4vw,52px);border-bottom:1px solid var(--line)}
.eg-panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center;min-width:0}
.eg-js .eg-panel:not(.is-on){visibility:hidden}
.engage:not(.eg-js) .eg-stage{gap:64px}
.engage:not(.eg-js) .eg-panel{grid-area:auto}
.eg-art{margin:0;min-width:0}
.eg-svg{display:block;width:100%;height:auto;overflow:visible}
.eg-copy{position:relative;padding-inline-start:clamp(24px,3vw,48px);border-inline-start:1px solid var(--line);align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0}
.eg-k{margin:0 0 18px;font:400 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.eg-h{margin:0 0 20px;font-size:clamp(30px,3.3vw,50px);line-height:1.04;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.eg-p{margin:0;font-size:clamp(17px,1.35vw,20px);line-height:1.45;letter-spacing:-.01em;max-width:40ch;color:var(--eg-ink-2)}
.eg-dk{margin:28px 0 8px;font:400 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eg-dq{margin:0 0 22px;font-size:clamp(19px,1.6vw,24px);line-height:1.3;letter-spacing:-.02em;font-weight:500;text-wrap:balance}
.eg-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--signal);font-size:clamp(17px,1.3vw,19px);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.eg-arr{display:inline-block;transition:transform .3s var(--ease)}
.eg-cta:hover .eg-arr{transform:translateX(4px)}
[dir=rtl] .eg-cta:hover .eg-arr{transform:translateX(-4px)}
.eg-cta:focus-visible{outline:2px solid var(--signal);outline-offset:4px;border-radius:4px}

/* ---------- related previews ---------- */
.eg-previews{display:grid;grid-template-columns:1fr 1fr}
.eg-previews[hidden]{display:none}
.eg-pv{appearance:none;background:none;border:0;margin:0;color:var(--fg);font:inherit;text-align:start;cursor:pointer;display:grid;grid-template-rows:auto auto auto auto;gap:10px;padding:clamp(24px,3vw,40px) clamp(4px,1vw,12px) 8px;padding-inline-start:0;min-width:0}
.eg-pv + .eg-pv{border-inline-start:1px solid var(--line);padding-inline-start:clamp(24px,3vw,48px)}
.eg-pv-k{font:400 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.eg-pv-art{display:block;max-width:440px;opacity:.92;transition:opacity .3s,transform .5s var(--ease)}
.eg-pv-art svg{display:block;width:100%;height:auto}
.eg-pv-h{font-size:clamp(22px,2.2vw,32px);line-height:1.1;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
.eg-pv-s{color:var(--muted);font-size:16px;line-height:1.45}
.eg-pv-h span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease)}
[dir=rtl] .eg-pv-h span{background-position:100% 100%}
@media (hover:hover) and (pointer:fine){.eg-pv:hover .eg-pv-art{opacity:1;transform:translateY(-3px)}.eg-pv:hover .eg-pv-h span{background-size:100% 1px}}
.eg-pv:focus-visible{outline:2px solid var(--signal);outline-offset:4px;border-radius:6px}

/* ---------- illustration language ---------- */
.eg-svg text{font-family:var(--f-sans);fill:var(--fg)}
[dir=rtl] .eg-svg text{direction:rtl}   /* the page sets svg text to ltr; these labels are Arabic */
.eg-t{font-size:18px;font-weight:450}
.eg-t-s{font-size:15px}
.eg-muted{fill:var(--muted)!important}
.eg-red-t{fill:var(--signal)!important}
.eg-em{font-style:italic}
[dir=rtl] .eg-em{font-style:normal}
.eg-strong{font-weight:600;letter-spacing:.02em}
.eg-ink,.eg-thin,.eg-ghost,.eg-guide,.eg-red,.eg-open,.eg-fibre{fill:none;stroke-linecap:round;stroke-linejoin:round}
.eg-ink{stroke:var(--fg);stroke-width:1.4}
.eg-w2{stroke-width:2.2}
.eg-w3{stroke-width:3}
.eg-thin{stroke:var(--fg);stroke-width:.9;opacity:.55}
.eg-ghost{stroke:var(--fg);stroke-width:.8;opacity:.22}
.eg-back{opacity:.4}
.eg-guide{stroke:var(--line);stroke-width:1.2}
.eg-dash{stroke-dasharray:5 6}
.eg-dot{stroke-dasharray:1.5 5;opacity:.8}
.eg-red{stroke:var(--signal);stroke-width:1.6}
.eg-open{stroke:var(--fg);stroke-width:1.4}
.eg-bg{fill:var(--eg-paper)}
.eg-redf{fill:var(--signal)}
.eg-inkf{fill:var(--fg)}
.eg-gap{fill:var(--signal);opacity:.12}
.eg-shadow{fill:var(--fg);opacity:.05}
.eg-floor{fill:var(--fg);opacity:.045}
.eg-coin-t{fill:var(--signal)}
.eg-coin-s{fill:color-mix(in srgb,var(--signal) 68%,#000)}
.eg-cube-f{fill:var(--eg-paper);stroke:var(--fg);stroke-width:1.1}
.eg-cube-t{fill:var(--eg-paper-2);stroke:var(--fg);stroke-width:1.1;stroke-linejoin:round}
.eg-cube-s{fill:color-mix(in srgb,var(--fg) 12%,var(--eg-paper));stroke:var(--fg);stroke-width:1.1;stroke-linejoin:round}
.eg-block{fill:var(--eg-paper);stroke:var(--fg);stroke-width:1.2}
.eg-slabf{fill:var(--eg-paper);stroke:var(--fg);stroke-width:1.4}
.eg-gapbox{fill:none;stroke:var(--signal);stroke-width:1.4;stroke-dasharray:4 4}
.eg-slab{fill:var(--signal);opacity:.1}
.eg-sheet{fill:var(--eg-paper);stroke:var(--fg);stroke-width:1.1}
.eg-sheet-strong{stroke-width:1.5}
.eg-card{fill:var(--eg-paper);stroke:var(--fg);stroke-width:1.2}
.eg-node{fill:var(--eg-paper);stroke:var(--fg);stroke-width:1.3}
.eg-node-strong{fill:var(--fg)}
.eg-fibre{stroke:var(--fg);stroke-width:.7;opacity:.5}
.eg-frame{stroke-width:1.2}
.eg-ring-t,.eg-ring-s{fill:var(--signal)}
.eg-ring-s{fill:color-mix(in srgb,var(--signal) 72%,#000)}
.eg-ring-b{fill:color-mix(in srgb,var(--signal) 60%,#000)}
.eg-ring-h{fill:var(--eg-paper)}

/* ---------- motion: brief, on selection only, then still ---------- */
.eg-svg [class*="a-"]{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .is-play .a-fade{animation:egFade .6s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 120ms)}
  .is-play .a-draw{stroke-dasharray:1;animation:egDraw .9s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 80ms)}
  .is-play .a-draw-g .eg-fibre{stroke-dasharray:1;animation:egDraw 1.1s var(--ease) both;animation-delay:calc(var(--i,0) * 110ms)}
  .is-play .a-drop{animation:egDrop .55s cubic-bezier(.3,1.35,.5,1) both;animation-delay:calc(var(--i,0) * 55ms + 120ms)}
  .is-play .a-slide{animation:egSlide .7s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms + 160ms)}
  .is-play .a-rise{animation:egRise .5s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms + 80ms)}
  .is-play .a-pop{animation:egPop .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i,0) * 90ms + 120ms)}
  .is-play .eg-copy > *{animation:egCopy .55s var(--ease) both}
  .is-play .eg-copy > :nth-child(2){animation-delay:40ms}.is-play .eg-copy > :nth-child(3){animation-delay:90ms}
  .is-play .eg-copy > :nth-child(n+4){animation-delay:140ms}
}
@keyframes egFade{from{opacity:0}}
@keyframes egDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes egDrop{from{opacity:0;transform:translateY(-34px)}}
@keyframes egSlide{from{opacity:0;transform:translateX(-26px)}}
@keyframes egRise{from{opacity:0;transform:translateY(12px)}}
@keyframes egPop{from{opacity:0;transform:scale(.4)}}
@keyframes egCopy{from{opacity:0;transform:translateY(10px)}}
.eg-pv-art *{animation:none!important}

/* ---------- Arabic ---------- */
[dir=rtl] .eg-k,[dir=rtl] .eg-dk,[dir=rtl] .eg-pv-k{font-family:var(--f-sans);font-size:14px;text-transform:none}
[dir=rtl] .eg-k .eg-num,[dir=rtl] .eg-pv-k .eg-num,[dir=rtl] .eg-tab .eg-num{font-family:var(--f-mono)}
[dir=rtl] .eg-h,[dir=rtl] .eg-pv-h{font-family:var(--f-display);line-height:1.4;font-weight:600}
[dir=rtl] .eg-p,[dir=rtl] .eg-dq,[dir=rtl] .eg-pv-s{line-height:1.75}
[dir=rtl] .eg-dq{line-height:1.6}
[dir=rtl] .eg-tl{font-size:clamp(16px,1.2vw,18px)}
[dir=rtl] .eg-sum{font-size:14.5px;line-height:1.6}
[dir=rtl] .eg-t{font-weight:500}

/* ---------- smaller screens ---------- */
@media (max-width:1180px){
  .eg-head{grid-template-columns:1fr}
  .eg-title .h2{max-width:20ch}
}
@media (max-width:900px){
  .eg-panel{grid-template-columns:1fr;gap:20px;align-items:start;align-content:start}
  .eg-copy{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--line);padding-top:24px}
  .eg-art{max-width:640px}
}
@media (max-width:760px){
  .eg-previews{grid-template-columns:1fr}
  .eg-pv + .eg-pv{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--line)}
  .eg-pv-art{max-width:360px}
}
@media (max-width:700px){
  .eg-index ol{display:flex;flex-wrap:wrap;gap:0 20px}
  .eg-index li{border-top:0}
  .eg-tab{padding:10px 0;min-height:44px;justify-content:center}
  .eg-tab::after{top:auto;bottom:6px}
  .eg-sum{display:none}
  .eg-head{padding-bottom:16px}
}
@media (max-width:600px){
  .eg-t{font-size:23px}
  .eg-t-s{font-size:22px}
  [dir=rtl] .eg-t{font-size:23px}
  [dir=rtl] .eg-t-s{font-size:21px}
  .eg-h{font-size:clamp(28px,8vw,36px)}
}
.engage .eyebrow .dot{animation:none}   /* still in this section: no endless pulse */