/* Design-review fixes (10 Nov 2026). Loaded LAST (after motion.css) so these rules win over the older layers.
   Each block names the review item it answers. New sections use var(--sec) from refine.css for their spacing. */

/* ---- P1.2 No button shadows: form buttons (Send, Notify me, Apply to join, Give with Paystack), in every state ---- */
html body:not(#z):not(#y) :is(a.btn,.btn,.sp-btn,a.pl,.nl button,form button[type=submit]),
html body:not(#z):not(#y) :is(a.btn,.btn,.sp-btn,a.pl,.nl button,form button[type=submit]):is(:hover,:active,:focus){box-shadow:none!important}
/* brochure page links: the 1px ring was drawn with a shadow; draw it as a border instead */
html body a.bk3-p{box-shadow:none!important;border:1px solid rgba(22,35,58,.08)}
/* play disc on video cards */
html body .lt-play{box-shadow:none!important}

/* ---- P1.3 Growth and progress bars: the bar keeps its final size and only its transform animates (.6s, from the left) ---- */
/* home, "Africa's fast-growing youth": age scale and the two workforce bars */
html body .age-f{width:23.75%!important;transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.22,1,.36,1)!important}
html body .age-t{container-type:inline-size}
html body .age-m{left:23.75%!important;transform:translateX(-23.75cqw);transition:transform .6s cubic-bezier(.22,1,.36,1)!important}
html body .b2 em{width:var(--w)!important;transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.22,1,.36,1)!important}
html body .b2 .e2{transition-delay:.12s!important}
html body .yth.go :is(.age-f,.age-m,.b2 em){transform:none}
/* Impact Labs charts: bars from the left, columns from the baseline */
html body .lc-bar i{width:var(--w)!important;transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.22,1,.36,1)!important}
html body .lc-cols i{height:calc(var(--h) * .72)!important;transform:scaleY(0);transform-origin:50% 100%;transition:transform .6s cubic-bezier(.22,1,.36,1)!important}
html body .lc.on :is(.lc-bar i,.lc-cols i){transform:none}
/* v7 graphs and the approach tabs' timer line (v7.js now moves transform, not width) */
html body .v7-bar i{transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.22,1,.36,1)!important}
html body .v7-bar i.on{transform:none}
html body .v7-prog i{width:100%!important;transform:scaleX(0);transform-origin:0 50%}
/* brochure: pages-read line */
html body .bk3-bar i{width:100%!important;transform:scaleX(.1);transform-origin:0 50%;transition:transform .25s ease!important}
/* scroll reveals: .9s was outside the .5 to .75s rule */
html body .rv:not(.cms-c,.dp-card,.nc,.ev-c,.chc,.pg-pc,.pg-card,.nm3-c,.lv){transition-duration:.65s!important}
html body .mx-zoom{transition:scale .7s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.22,1,.36,1)!important}
@media (prefers-reduced-motion:reduce){
  html body :is(.age-f,.age-m,.b2 em,.lc-bar i,.lc-cols i,.v7-bar i){transform:none!important;transition:none!important}
  html body .bk3-bar i{transition:none!important}
  html body .mx-zoom{transition:none!important}
}

/* ---- P1.5 Tap targets: 44px hit areas; the visible dot, link or icon keeps its size ---- */
/* hero slide dots: each button is 44x44, the dot inside stays 6px (24px for the current slide).
   The pill behind them stays 32px tall; nothing animates width any more (clip-path on a 24x6px shape). */
html body .hx-dots{gap:0!important;padding:0!important;height:32px!important;align-items:center}
html body .hx-dot,html body .hx-dot[aria-current=true]{width:44px!important;height:44px!important;margin:-6px 0;position:relative;display:grid;place-items:center;transition:none!important}
html body .hx-dot::after{content:"";position:static!important;width:24px!important;height:6px!important;border-radius:0!important;background:rgba(255,255,255,.5)!important;transform:none!important;clip-path:inset(0 9px round 3px);transition:clip-path .45s cubic-bezier(.22,1,.36,1),background-color .3s!important}
html body .hx-dot[aria-current=true]::after{clip-path:inset(0 0 round 3px);background:rgba(255,255,255,.35)!important}
html body .hx-dot::before{content:"";position:absolute;left:10px!important;top:50%;width:24px!important;height:6px!important;margin-top:-3px!important;border-radius:0!important;background:#fff;z-index:1;clip-path:inset(0 24px 0 0 round 3px);animation:none}
html body .hx-dot[aria-current=true]::before{animation:rv-hx-fill 6s linear forwards!important}
@keyframes rv-hx-fill{from{clip-path:inset(0 18px 0 0 round 3px)}to{clip-path:inset(0 0 0 0 round 3px)}}
html body .hx-card:has(.hx-pause[aria-pressed=true]) .hx-dot[aria-current=true]::before,html body .hx-card:focus-within .hx-dot[aria-current=true]::before{animation:none!important;clip-path:inset(0 0 0 0 round 3px)}
@media (prefers-reduced-motion:reduce){html body .hx-dot[aria-current=true]::before{animation:none!important;clip-path:inset(0 0 0 0 round 3px)}html body .hx-dot::after{transition:none!important}}
html body .hx-pause{width:44px!important;height:44px!important;min-width:44px;min-height:44px}
/* header: Donate and the logo link */
html body nav#nav .btn.y{min-height:44px!important}
html body nav#nav .bar>a:first-child{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
/* footer links: 44px rows (was 30px), and room around the short social links in the sentence */
html body footer .g li{margin-bottom:0!important}
html body footer .g li a,html body footer .g p>a[href^="mailto:"],html body footer .g p>a[href*="maps"],html body footer .g a.ft-tel{display:inline-flex!important;align-items:center;min-height:44px;min-width:44px;padding:0!important;margin:0!important}
html body footer .g p>a:is([href*="twitter.com"],[href*="facebook.com"],[href*="instagram.com"],[href*="linkedin.com"]){display:inline!important;padding:13px 17px!important;margin:-13px -17px!important;position:relative}
/* careers: back link */
html body .jb-back{min-height:44px;margin-bottom:8px!important}

/* ---- P1.6 YouTube thumbnails (latest.js): maxresdefault is already 16:9, so it needs no zoom; with no thumbnail the tile stays blue ---- */
html body .lt-m img[src*="maxresdefault"]{transform:none}
html body .lt-c:hover .lt-m img[src*="maxresdefault"]{transform:scale(1.04)}
html body .lt-m.yt-off img{visibility:hidden}
/* header links narrower than 44px (Home, News) get a 44px-wide hit area; the words stay where they were */
html body nav#nav ul.dn>li>a{min-width:44px;justify-content:center;text-align:center}

/* ---- Who we are: six focus areas as icon rows (no cards), on the page background with a hairline over each ---- */
.fa-rows{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:40px}
.fa-rows>li.fa-r{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:start;margin:0;padding:24px 0 26px;border-top:1px solid rgba(22,35,58,.12);background:none!important;color:inherit}
.fa-rows .fa-i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--t-blue);color:#0D3C87}
.fa-rows .fa-i svg{width:24px;height:24px;stroke-width:1.8}
.fa-rows .t-green .fa-i{background:#E8F5EB;color:#0B5E1B}
.fa-rows .t-sky .fa-i{background:#E6F1FC;color:#0D3C87}
.fa-rows .t-gold .fa-i{background:#FFF4D6;color:#7A5200}
.fa-rows .t-wine .fa-i{background:#F7E9EC;color:#8E1B3A}
html body .fa-rows h3{margin:2px 0 6px!important;font-size:20px!important;line-height:1.3!important;color:#16233A}
html body .fa-rows p{margin:0!important;font-size:16px!important;line-height:1.6!important;color:#33404F;max-width:46ch}
@media(min-width:700px){.fa-rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.fa-rows{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px}}

/* ---- Who we are: "How we lead" as one diagram. Two roots, S (who a leader is) and G (how a leader acts), joined by an
   arrow; each principle hangs off its root's rail. Lines are 2px throughout; text is live HTML. ---- */
.hl{--ln:2px;--node:56px;--ic:44px;--pt:22px;display:grid;grid-template-columns:minmax(0,1fr);margin-top:36px}
.hl-g{--c:#0D3C87;--ci:#0D3C87;--cb:#EAF0FA;min-width:0}
.hl-gg{--c:#E5A823;--ci:#7A5200;--cb:#FFF4D6}
.hl-root{display:flex;align-items:center;gap:16px;min-height:var(--node)}
.hl-node{flex:none;width:var(--node);height:var(--node);border-radius:50%;display:grid;place-items:center;background:#0D3C87;color:#fff;font:600 26px/1 var(--hd,Inter),Inter,sans-serif;letter-spacing:-.02em}
.hl-gg .hl-node{background:#FFBF37;color:#0D3C87}
html body .hl-k{margin:0!important;display:grid;gap:3px;max-width:none!important}
.hl-k b{font:600 20px/1.2 var(--hd,Inter),Inter,sans-serif;letter-spacing:-.01em;color:#16233A}
.hl-k span{font:400 15px/1.35 Inter,sans-serif;color:#4A5568}
.hl-arrow{display:none}
.hl-list{list-style:none;margin:0 0 0 calc(var(--node)/2 - var(--ln)/2);padding:0}
.hl-list>li{position:relative;display:grid;grid-template-columns:var(--ic) minmax(0,1fr);gap:14px;align-items:start;margin:0;padding:var(--pt) 0 0 34px}
/* rail segment beside each row, and the branch into its icon */
.hl-list>li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--ln);background:var(--c)}
.hl-list>li::after{content:"";position:absolute;left:0;top:calc(var(--pt) + var(--ic)/2 - var(--ln)/2);width:34px;height:var(--ln);background:var(--c)}
/* the last branch turns the corner instead of running on */
.hl-list>li:last-child::before{bottom:auto;width:34px;height:calc(var(--pt) + var(--ic)/2 + var(--ln)/2);background:none;border-left:var(--ln) solid var(--c);border-bottom:var(--ln) solid var(--c);border-bottom-left-radius:14px;box-sizing:border-box}
.hl-list>li:last-child::after{display:none}
.hl-ic{position:relative;z-index:1;width:var(--ic);height:var(--ic);border-radius:50%;display:grid;place-items:center;background:var(--cb);color:var(--ci)}
.hl-ic svg{width:22px;height:22px;stroke-width:1.8}
html body .hl-list h3{margin:1px 0 3px!important;font-size:19px!important;line-height:1.3!important;color:#16233A}
html body .hl-list p{margin:0!important;font-size:16px!important;line-height:1.5!important;color:#33404F;max-width:38ch}
/* phone and tablet: one rail; the S group hands down to the G root */
.hl-gg{position:relative;margin-top:44px}
.hl-gg::before{content:"";position:absolute;left:calc(var(--node)/2 - var(--ln)/2);top:-36px;height:26px;width:var(--ln);background:#0D3C87}
.hl-gg::after{content:"";position:absolute;left:calc(var(--node)/2 - 6px);top:-14px;width:12px;height:12px;box-sizing:border-box;border-right:var(--ln) solid #0D3C87;border-bottom:var(--ln) solid #0D3C87;transform:rotate(45deg);transform-origin:50% 50%;margin-top:-6px}
@media(min-width:900px){
  .hl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:0}
  .hl-g{padding-right:56px}
  .hl-gg{margin-top:0;padding-right:0}
  .hl-gg::before,.hl-gg::after{display:none}
  /* the arrow runs from the S label to the G root, across the column gap */
  .hl-s .hl-root{margin-right:-48px}
  .hl-arrow{display:flex;align-items:center;justify-content:flex-end;flex:1;min-width:40px;height:var(--ln);background:#0D3C87;color:#0D3C87;margin-left:8px;border-radius:1px}
  .hl-arrow svg{flex:none;margin-right:-1px;overflow:visible}
}

/* ---- P2.2 The ending: the closing call opens the footer instead of sitting on it as a second strip.
   The cream panel becomes the top of the blue footer card (one surface); the links, the "We Are TGLC" band and the
   ribbon below are unchanged. Pages without a closing call keep the footer exactly as it was. ---- */
html body:not(#z):not(#y) section.tb-cta{background:#0D3C87!important;border-radius:32px 32px 0 0!important;margin-top:var(--sec)!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important}
html body:not(#z):not(#y) section.tb-cta>.w{padding-top:clamp(40px,5vw,64px)!important;padding-bottom:clamp(36px,4.6vw,56px)!important;border-bottom:1px solid rgba(255,255,255,.16)}
html body:not(#z):not(#y) section.tb-cta h2{color:#fff!important}
html body:not(#z):not(#y) section.tb-cta p{color:rgba(255,255,255,.78)!important}
html body:not(#z):not(#y) section.tb-cta .btn{background:#fff!important;color:#0D3C87!important;border:1px solid #fff!important}
html body:not(#z):not(#y) section.tb-cta .btn.o{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.45)!important}
html body:not(#z):not(#y) section.tb-cta+footer{margin-top:0!important;border-radius:0 0 32px 32px!important}
html body:not(#z):not(#y) section.tb-cta+footer .g{padding-top:clamp(40px,5vw,56px)!important}
/* the section before the closing call no longer needs its own bottom space: the call brings var(--sec) */
html body:not(#z):not(#y) :is(section,div):has(+section.tb-cta){padding-bottom:0!important;margin-bottom:0!important}
/* a closing call with a supporting line (Impact Labs): the line sits under the heading, the buttons stay on the right */
html body:not(#z):not(#y) section.tb-cta>.w>p{margin:12px 0 0!important;max-width:52ch;font-size:17px;line-height:1.55}
@media(min-width:900px){
  html body:not(#z):not(#y) section.tb-cta>.w:has(>p){display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:center}
  html body:not(#z):not(#y) section.tb-cta>.w:has(>p)>h2{grid-column:1;max-width:24ch}
  html body:not(#z):not(#y) section.tb-cta>.w:has(>p)>p{grid-column:1}
  html body:not(#z):not(#y) section.tb-cta>.w:has(>p)>.r{grid-column:2;grid-row:1/span 2}
}

/* ---- Home announcements: wide cards. The flyer on the left opens full size; title, date, place and action are live
   text on the right. One card per row on phones and tablets, two per row from 1024px (one alone stays 820px wide). ---- */
html body:not(#z):not(#y):not(#x) #ev-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:clamp(16px,1.6vw,24px)!important;max-width:none!important;overflow:visible!important;margin-left:0!important;margin-right:0!important;padding:0!important}
html body:not(#z):not(#y):not(#x) #ev-grid[data-n="1"]{max-width:820px!important}
@media(min-width:1024px){html body:not(#z):not(#y):not(#x) #ev-grid:not([data-n="1"]){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
html body:not(#z):not(#y):not(#x) #ev-grid>.ev-c{width:auto!important;flex:none!important;display:grid!important;grid-template-columns:clamp(112px,36%,250px) minmax(0,1fr);gap:clamp(14px,2.2vw,28px);align-items:start;padding:12px!important}
html body #ev-grid .ev-f{position:relative;display:block;margin:0!important;aspect-ratio:auto!important;border-radius:14px;overflow:hidden;background:#EEF1F6}
html body #ev-grid a.ev-f{cursor:zoom-in}
html body #ev-grid a.ev-f:focus-visible{outline:2px solid #0D3C87;outline-offset:3px}
html body #ev-grid .ev-f:not(.tx) img{position:static!important;display:block;width:100%!important;height:auto!important;object-fit:contain;border-radius:0!important}
html body #ev-grid .ev-f.tx{aspect-ratio:4/5!important;padding:16px}
/* "Open the flyer full size": read out by screen readers, shown as a small corner mark */
.ev-z{position:absolute;right:8px;bottom:8px;width:32px;height:32px;border-radius:50%;background:rgba(13,60,135,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5M19 5l-6 6M10 19H5v-5M5 19l6-6'/%3E%3C/svg%3E") center/16px no-repeat;overflow:hidden;text-indent:-999px;white-space:nowrap;color:transparent;font-size:0}
html body #ev-grid .ev-b{padding:6px 10px 4px 0!important;gap:6px;min-width:0}
html body #ev-grid .ev-b :is(h3,p,.ev-m,.rm,a.rm){padding-left:0!important;padding-right:0!important}
html body #ev-grid .ev-b h3{font-size:clamp(19px,2vw,26px)!important;line-height:1.2!important;margin:6px 0 2px!important}
html body #ev-grid .ev-b .rm{margin-top:auto}
@media(max-width:599px){
  html body #ev-grid .ev-b h3{font-size:18px!important}
  html body #ev-grid .ev-m{font-size:14.5px!important}
}

/* ---- Dialogs (review.js): the flyer viewer here and the leader sheet on Meet our leaders. Native <dialog>, so focus
   stays inside, Escape closes and the page behind is inert; the page does not scroll while one is open. ---- */
/* --rv-sw is the width of the scrollbar that the lock removes (0 on phones), so nothing moves sideways */
html.rv-lock{overflow:hidden!important;padding-right:var(--rv-sw,0px)}
html.rv-lock nav#nav{right:var(--rv-sw,0px)!important}
dialog.rv-dlg{border:0;padding:0;margin:auto;background:#fff;color:#16233A;border-radius:24px;max-width:min(920px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
dialog.rv-dlg::backdrop{background:rgba(9,22,48,.62)}
dialog.rv-dlg[open]{animation:rv-pop .3s cubic-bezier(.22,1,.36,1)}
dialog.rv-dlg[open]::backdrop{animation:rv-fade .3s ease}
@keyframes rv-pop{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes rv-fade{from{opacity:0}to{opacity:1}}
.rv-x{position:absolute;top:10px;right:10px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#16233A;display:grid;place-items:center;cursor:pointer;padding:0}
.rv-x:hover{background:#EEF1F6}
.rv-x:focus-visible{outline:2px solid #0D3C87;outline-offset:2px}
.rv-x svg{width:20px;height:20px}
dialog.rv-lb{background:#fff;overflow:hidden}
dialog.rv-lb img{display:block;width:auto;height:auto;max-width:min(920px,calc(100vw - 32px));max-height:calc(100dvh - 32px);object-fit:contain}
@media (prefers-reduced-motion:reduce){dialog.rv-dlg[open],dialog.rv-dlg[open]::backdrop{animation:none}}
html body #ev-grid a.ev-f{border:1px solid rgba(22,35,58,.08)}
html body #ev-grid .ev-b{align-self:stretch}

/* ---- Meet our leaders: filter chips, compact cards (photo, name, Lab) and the bio in a sheet (review.js).
   Every leader and every bio stays in the page's HTML; without scripting the cards show the bio as before. ---- */
.ldf{--ldgut:32px;display:grid;gap:14px;margin:0 0 4px}
.ldf-g{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:start;gap:12px}
.ldf-k{padding-top:16px;font:600 12.5px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#4A5568}
.ldf-r{display:flex;flex-wrap:wrap;gap:8px}
.ldf-c{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(13,60,135,.22);background:#fff;color:#0D3C87;font:600 14.5px/1 Inter,sans-serif;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.ldf-c[aria-pressed=true]{background:#0D3C87;border-color:#0D3C87;color:#fff}
@media(hover:hover){.ldf-c:not([aria-pressed=true]):hover{border-color:#0D3C87;background:#EAF0FA}}
html body .ldf-n{margin:4px 0 0!important;font:500 14px/1.4 Inter,sans-serif!important;color:#4A5568}
html body .ldf-e{margin:32px 0 0!important;font-size:17px!important;color:#33404F}
.ldf-x{min-height:44px;padding:0 4px;border:0;background:none;color:#0D3C87;font:600 16px/1 Inter,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media(max-width:699px){
  .ldf-g{grid-template-columns:minmax(0,1fr);gap:8px}
  .ldf-k{padding-top:0}
  /* one swipe row per group, starting on the page gutter; no edge fade */
  .ldf-r{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 calc(var(--ldgut,20px) * -1);padding:0 var(--ldgut,20px);scroll-padding:0 var(--ldgut,20px)}
  .ldf-r::-webkit-scrollbar{display:none}
  .ldf-c{flex:none;scroll-snap-align:start}
}
html body:not(#z):not(#y) .ldg.ldx{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin-top:24px!important}
@media(min-width:600px){html body:not(#z):not(#y) .ldg.ldx{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}}
@media(min-width:900px){html body:not(#z):not(#y) .ldg.ldx{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:20px!important}}
@media(min-width:1200px){html body:not(#z):not(#y) .ldg.ldx{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
html body:not(#z):not(#y) .ldx .ldc{position:relative;padding:10px 10px 16px!important;cursor:pointer}
html body .ldx .ldc[hidden]{display:none!important}
html body .ldx .ldc-i{border-radius:14px}
html body .ldx .ldc-i img{border-radius:0!important}
html body .ldx .ldc-b{padding:12px 6px 0!important}
html body:not(#z):not(#y) .ldx .ldc h3{margin:0 0 4px!important;padding:0!important;font-size:16px!important;line-height:1.3!important}
html body .ldx .ldc-l{display:none}
html body .ldx .ldc .ldc-m{margin:0!important;padding:0!important;border:0!important;font:500 13px/1.4 Inter,sans-serif!important;color:#0D3C87!important}
html body .ldx .ldc-m span:first-child{display:none}
/* the name is the button; its hit area is the whole card */
.ldc-o{appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;letter-spacing:inherit;color:inherit;text-align:left;cursor:pointer}
.ldc-o::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.ldc-o:focus-visible{outline:none}
.ldc-o:focus-visible::after{outline:2px solid #0D3C87;outline-offset:2px;border-radius:20px}
html body .ldc-o:active{transform:none!important}
@media(max-width:599px){html body:not(#z):not(#y) .ldx .ldc h3{font-size:15px!important}html body .ldx .ldc .ldc-m{font-size:12.5px!important}html body:not(#z):not(#y) .ldx .ldc{padding:8px 8px 14px!important}}
@media (scripting:none){
  .ldf{display:none}
  html body .ldx .ldc-l{display:block}
  html body .ldx .ldc-m span:first-child{display:block}
  .ldc-o{pointer-events:none}.ldc-o::after{display:none}
  html body:not(#z):not(#y) .ldx .ldc{cursor:auto}
}
/* the sheet: a centred dialog on laptops, a bottom sheet on phones */
dialog.rv-sheet{width:min(780px,calc(100vw - 32px))}
.ls{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.ls-i{background:#E9E4D6;aspect-ratio:4/5;overflow:hidden}
.ls-i img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.ls-b{align-self:center;padding:64px 40px 40px 36px;min-width:0}
.ls-b h2{margin:0 0 14px;font:600 28px/1.15 var(--hd,Inter),Inter,sans-serif;letter-spacing:-.02em;color:#16233A;text-wrap:balance}
.ls-m{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.ls-m span{font:600 13px/1.3 Inter,sans-serif;padding:7px 12px;border-radius:999px;background:#EAF0FA;color:#0D3C87}
.ls-m span:first-child{background:#FFF4D6;color:#7A5200}
.ls-l{margin:0;font:400 17px/1.6 Inter,sans-serif;color:#33404F}
@media(max-width:639px){
  dialog.rv-sheet{margin:auto 0 0;width:100%;max-width:100%;border-radius:24px 24px 0 0;max-height:88dvh}
  .ls{grid-template-columns:96px minmax(0,1fr);column-gap:16px;padding:24px 20px calc(28px + env(safe-area-inset-bottom));align-items:start}
  .ls-b{display:contents}
  .ls-i{grid-column:1;grid-row:1/span 2;border-radius:14px}
  .ls-b h2{grid-column:2;margin:2px 44px 10px 0;font-size:22px}
  .ls-m{grid-column:2;margin:0}
  .ls-l{grid-column:1/-1;margin-top:20px;font-size:16.5px}
}
/* ---- Footer illustration: the Impact Labs art (its top is flat #0D3C87, the card's own blue, so it has no edge) fills the
   foot of the blue card, edge to edge and flush to its bottom, clipped by its rounded corners. Links, the "We Are TGLC"
   band and the copyright row stay above it. Lab names are real text on the buildings' name boards from 700px (boxes in %
   of the 2400x800 art, type in cqw of the art box); below that the 640x650 phone crop at (1760,150) carries the last
   lab's name on its board and a short "Impact Labs" list follows. A gold glow over the sun breathes (opacity only);
   the once-only entrance is set in FooterArt.tsx. Reduced motion: still. ---- */
html body:not(#z):not(#y) footer{padding-bottom:0!important;overflow:hidden!important}
footer .ft-art{position:relative;background:#0D3C87}
footer .ft-art-box{position:relative;container-type:inline-size;overflow:hidden}
footer .ft-art picture,footer .ft-art img{display:block;width:100%;height:auto;max-width:none;border-radius:0}
footer .ft-sun{position:absolute;left:94.125%;top:33.5%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;opacity:.2;
 background:radial-gradient(circle closest-side,rgba(255,194,51,.85) 0,rgba(255,194,51,.42) 18%,rgba(255,194,51,.12) 38%,rgba(255,194,51,0) 62%)}
html body:not(#z):not(#y) footer .ft-labs{margin:0;padding:0;list-style:none}
html body:not(#z):not(#y) footer .ft-labs li,html body:not(#z):not(#y) footer .ft-board-ph{position:absolute;left:var(--x);top:47.66%;width:12.19%;height:5.94%;
 transform:translate(-50%,-50%);box-sizing:border-box;margin:0!important;padding:0 .4cqw;display:flex;align-items:center;justify-content:center;
 text-align:center;text-wrap:balance;font-weight:600;font-size:.74cqw;line-height:1.12;letter-spacing:0;color:#0D3C87!important}
html body:not(#z):not(#y) footer .ft-board-ph{display:none}
html body:not(#z):not(#y) footer .ft-labs-cap{display:none}
@media(max-width:1199px){
 footer .ft-sun{left:91.05%;width:36.55%}
 html body:not(#z):not(#y) footer .ft-labs li{left:var(--xt);width:18.57%;padding:0 .6cqw;font-size:1.2cqw;line-height:1.05}
 html body:not(#z):not(#y) footer .ft-labs li.ft-wide{display:none}
 html body:not(#z):not(#y) footer .ft-labs-cap{display:block;padding:24px 24px 40px}
 html body:not(#z):not(#y) footer .ft-labs-cap h4{margin:0 0 12px}
 html body:not(#z):not(#y) footer .ft-labs-cap ul{margin:0;padding:0;list-style:none}
 html body:not(#z):not(#y) footer .ft-labs-cap li{margin:0 0 6px!important;font-size:14px;line-height:1.5;color:#FAF9F6!important}
}
@media(max-width:699px){
 footer .ft-sun{left:77.969%;width:90%}
 html body:not(#z):not(#y) footer .ft-labs{display:none}
 html body:not(#z):not(#y) footer .ft-board-ph{display:flex;left:62.688%;width:45.713%;padding:0 1.5cqw;font-size:2.775cqw}
 html body:not(#z):not(#y) footer .ft-labs-cap{padding:20px 20px 36px}
}
@media (prefers-reduced-motion:no-preference){
 footer .ft-sun{animation:ft-sun 5.5s ease-in-out infinite alternate}
 footer .ft-wait>*{opacity:0;transform:translateY(16px)}
 footer .ft-in>*{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
}
@keyframes ft-sun{from{opacity:.15}to{opacity:.6}}