/* ============================================================================
   IAFA — Intercultural Association For All · shared stylesheet (Direction B)
   Custom static site (no WordPress). Jovial · type-forward · vibrant · EU-star motif.
   ============================================================================ */
:root{
  /* LOGO PALETTE — black, white, blue, yellow. Other hues only as tiny accents. */
  --ink:#14161C; --ink-soft:#5A6172; --paper:#FBFAF7; --surface:#FFFFFF; --line:#E7E6E0;
  --blue:#1E357F; --blue-700:#132456; --blue-100:#E2E6F2;   /* logo blue #183078 family */
  --gold:#F2CE00; --gold-700:#8A6D00;                        /* logo yellow #F0D800 */
  /* micro-accents ONLY (never large fields): a single number, a dot, a spark */
  --coral:#FF5A4D; --green:#1BAE6E; --violet:#7A5CFF;
  --d:"Bricolage Grotesque",system-ui,sans-serif; --b:"Spline Sans",system-ui,sans-serif;
  --container:1180px; --ease:cubic-bezier(.22,.61,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--b);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--d);font-weight:800;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
a{color:inherit;text-decoration:none}
.star{display:inline-block;background:var(--gold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.eyebrow{font-family:var(--b);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;color:var(--blue);display:inline-flex;align-items:center;gap:.6em}
.eyebrow .star{width:15px;height:15px}
.hl{position:relative;white-space:nowrap;color:var(--ink)}
.hl::before{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.05em;height:.4em;background:var(--gold);z-index:-1;transform:rotate(-1.6deg);border-radius:3px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--b);font-weight:700;font-size:.92rem;padding:.9em 1.6em;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .25s var(--spring),box-shadow .25s,background .2s,color .2s}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(34,51,166,.26)}
.btn-coral{background:var(--ink);color:#fff;box-shadow:0 10px 26px rgba(20,22,28,.28)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:0 10px 26px rgba(20,22,28,.28)}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 10px 26px rgba(242,206,0,.4)}
.btn-out{border-color:var(--ink);color:var(--ink)}
.btn:hover{transform:translateY(-3px) scale(1.02)}
.btn .ar{transition:transform .25s var(--spring)} .btn:hover .ar{transform:translateX(5px)}

/* header */
/* Solid opaque header — NO backdrop-filter (that would make the header the containing block for the
   fixed mobile menu → iOS Safari collapses it) and NO negative-z pseudo (left an empty band on iOS). */
header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
:root{--navh:96px}
.nav{display:flex;align-items:center;gap:26px;height:var(--navh)}
.nav .brand{display:flex;flex-direction:column;align-items:center;gap:5px;line-height:1}
.nav .brand img{height:46px;width:auto}
.nav .brand .bt{display:inline-flex;align-items:center;gap:.45em;font-family:var(--b);font-weight:700;font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.nav .brand .bt .star{width:10px;height:10px;flex:none}
.nav .brand .bt-en{font-family:var(--b);font-weight:600;font-size:.53rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
/* compact mobile header */
@media(max-width:860px){
  :root{--navh:72px}
  .nav{gap:14px}
  .nav .brand img{height:34px}
  .nav .brand .bt{font-size:.5rem;letter-spacing:.09em}
  .nav .brand .bt-en{display:none}
}
@media(max-width:600px){.nav .brand .bt{display:none}.nav .brand img{height:42px}}
/* hero brand lockup (home): big IAFA mark + PT wordmark + EN subtitle */
/* hero brand lockup (home page) — big mark + PT name, EN below (owner's choice: lives here AND in the header) */
.hero-brand{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.hero-brand .hmark{height:clamp(84px,6vw + 52px,116px);width:auto}
.hname{display:flex;flex-direction:column;gap:7px}
.hname .pt{font-family:var(--b);font-weight:700;text-transform:uppercase;color:var(--blue);font-size:clamp(.92rem,.7rem + .7vw,1.12rem);line-height:1.14;letter-spacing:.03em}
.hname .en{font-family:var(--b);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:var(--ink-soft);display:inline-flex;align-items:center;gap:.5em}
.hname .en .star{width:12px;height:12px;flex:none}
@media(max-width:560px){.hero-brand{gap:13px}.hero-brand .hmark{height:70px}.hname .en{letter-spacing:.08em}}
.nav .links{display:flex;gap:24px;margin-left:auto;font-family:var(--b);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em}
.nav .links a{position:relative;padding:6px 0}
.nav .links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2.5px;border-radius:2px;background:var(--gold);transition:right .28s var(--ease)}
.nav .links a:hover::after,.nav .links a.active::after{right:0}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--blue)}
@media(max-width:860px){
  .nav .links{position:fixed;inset:var(--navh) 0 auto 0;flex-direction:column;background:var(--surface);padding:20px 24px;gap:6px;border-bottom:1px solid var(--line);transform:translateY(-120%);visibility:hidden;transition:transform .3s var(--ease),visibility .3s;box-shadow:0 20px 40px rgba(0,0,0,.1)}
  .nav .links.open{transform:none;visibility:visible}
  .nav .links a{padding:12px 0;font-size:.92rem;border-bottom:1px solid var(--line)}
  .nav .links a:last-child{border-bottom:0}
  .nav-toggle{display:block;order:3;margin-left:0}
  .nav .cta{display:inline-flex;order:2;margin-left:auto;padding:.62em 1.1em;font-size:.8rem}
}

/* footer */
footer{background:var(--ink);color:rgba(255,255,255,.72);padding:70px 0 32px;font-size:.92rem}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr}}
footer .flogo{height:46px;width:auto;filter:brightness(0) invert(1);opacity:.92;margin-bottom:16px}
footer h3{font-family:var(--b);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:#fff;margin-bottom:16px}
footer a{color:rgba(255,255,255,.72);display:block;padding:4px 0}
footer a:hover{color:var(--gold)}
.fbar{margin-top:46px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;color:rgba(255,255,255,.5)}
.fbar b{color:var(--gold)}

/* marquee */
.marq{background:var(--blue);overflow:hidden;padding:22px 0}
.marq.ink{background:var(--ink)} .marq.coral{background:var(--ink)}
.marq .row{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--d);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,1rem + 1.9vw,2.6rem);color:#fff;animation:marq 24s linear infinite;will-change:transform}
/* owner's choice: the strip NEVER pauses (not even on hover) */
.marq .row span{padding:0 .55em}
.marq .row span:nth-of-type(even){color:var(--gold)}   /* EU blue+yellow rhythm */
.marq .row i{width:20px;height:20px;margin:0 .5em;background:var(--gold);flex:none;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@keyframes marq{to{transform:translateX(-50%)}}

/* type-forward hero (home) */
.hero{position:relative;padding:66px 0 92px;overflow:hidden}
.hero .s1{position:absolute;width:30px;height:30px;top:15%;right:44%;animation:tw 4s ease-in-out infinite}
.hero .s2{display:none}   /* removed: was overlapping the stats now anchored bottom-left */
@keyframes tw{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.2) rotate(14deg)}}
.hgrid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:stretch}
.hgrid>.rv:first-child{display:flex;flex-direction:column;justify-content:center}
@media(max-width:900px){.hgrid{grid-template-columns:1fr;gap:40px;align-items:start}}
.hero h1{font-size:clamp(3rem,1.6rem + 6vw,6rem);color:var(--blue);margin:.26em 0 .3em}
.hero h1{color:var(--ink)} .hero h1 .co{color:var(--blue)} .hero h1 .gr{color:var(--blue)}
.hero .lead{font-size:clamp(1.08rem,1rem + .5vw,1.3rem);color:var(--ink-soft);max-width:48ch;margin-bottom:1.8em}
.hero .btns{display:flex;gap:14px;flex-wrap:wrap}
.hero .mini{display:flex;gap:clamp(24px,3.5vw,44px);margin-top:38px}
.hero .mini>div{position:relative;padding-left:16px}
.hero .mini>div::before{content:"";position:absolute;left:0;top:4px;bottom:14px;width:3px;border-radius:3px;background:var(--gold)}
.hero .mini>div:nth-child(2)::before{background:var(--blue)} .hero .mini>div:nth-child(3)::before{background:var(--green)}
.hero .mini b{font-family:var(--d);font-weight:800;font-size:clamp(2.2rem,1.6rem + 1.9vw,3rem);display:block;line-height:.95;letter-spacing:-.02em}
.hero .mini span{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);margin-top:.45em;display:block}
.hmedia{position:relative}
.hmedia .frame{position:relative;z-index:2;border-radius:26px;overflow:hidden;transform:rotate(2.2deg);box-shadow:0 30px 60px rgba(30,40,90,.22)}
.hmedia .frame img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
@media(min-width:901px){.hmedia{align-self:stretch}.hmedia .frame{height:100%}.hmedia .frame img{height:100%;aspect-ratio:auto}}
.hmedia::before{content:"";position:absolute;inset:0;border-radius:26px;background:var(--gold);transform:rotate(-3.5deg) scale(.98);z-index:1}
.hmedia .star{position:absolute;z-index:3;width:52px;height:52px;top:-18px;left:-14px;animation:tw 5s ease-in-out infinite}
.hmedia .tagpill{position:absolute;z-index:3;bottom:14px;right:-10px;background:#fff;border-radius:14px;padding:10px 16px;font-family:var(--d);font-weight:800;color:var(--blue);box-shadow:0 14px 30px rgba(0,0,0,.14);transform:rotate(-4deg)}
.hmedia .tagpill small{display:block;font-family:var(--b);font-weight:600;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}

/* stat band */
.stats{background:var(--blue);color:#fff}
.stats .grid{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{padding:54px 28px;text-align:center}
.stat+.stat{border-left:1px solid rgba(255,255,255,.16)}
.stat .num{font-family:var(--d);font-weight:800;font-size:clamp(2.8rem,2rem + 3.4vw,4.4rem);line-height:1;color:var(--gold)}
.stat:nth-child(2) .num{color:#fff}
.stat .lbl{font-family:var(--b);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:rgba(255,255,255,.8);margin-top:10px}
@media(max-width:720px){.stats .grid{grid-template-columns:1fr}.stat+.stat{border-left:0;border-top:1px solid rgba(255,255,255,.16)}}

/* sections + color-block cards */
section{padding:clamp(72px,9vw,128px) 0;position:relative}
.sec-head{max-width:640px;margin-bottom:50px}
.sec-head h2{font-size:clamp(2.1rem,1.4rem + 2.8vw,3.6rem);margin:.3em 0 .4em;color:var(--blue)}
.sec-head .eyebrow{color:var(--blue)}
.sec-head p{color:var(--ink-soft)}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.cards3{grid-template-columns:1fr}}
.cblock{position:relative;border-radius:22px;padding:34px 28px;color:#fff;overflow:hidden;isolation:isolate;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;transition:transform .38s var(--spring),box-shadow .38s}
.cblock.b1{background:var(--blue)} .cblock.b2{background:var(--ink)} .cblock.b3{background:var(--gold);color:var(--ink)}
.cblock.b3 p{color:rgba(20,22,28,.82)} .cblock.b3 .st{background:var(--ink)} .cblock.b3 .big{opacity:.16}
.cblock:hover{transform:translateY(-10px) rotate(-1deg);box-shadow:0 26px 54px rgba(30,40,90,.22)}
.cblock.b2:hover{transform:translateY(-10px) rotate(1deg)}
.cblock .st{width:38px;height:38px;background:rgba(255,255,255,.92);margin-bottom:4px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
/* logo tile inside home cards */
.cblock .cico-emblem{width:58px;height:58px;fill:var(--gold);margin-bottom:16px;display:block}
.cblock.b3 .cico-emblem{fill:var(--ink)}   /* dark emblem on the yellow card */
.cblock h3{font-size:1.5rem} .cblock p{color:rgba(255,255,255,.9);font-size:.96rem;flex:1}
.cblock .more{font-family:var(--b);font-weight:700;display:inline-flex;gap:.4em;align-items:center}
.cblock:hover .more .ar{transform:translateX(6px)} .cblock .more .ar{transition:transform .25s var(--spring)}
.cblock .big{position:absolute;top:-8px;right:14px;font-family:var(--d);font-weight:800;font-size:5rem;opacity:.14;z-index:-1}

/* prose (content pages) */
.prose{max-width:720px}
.prose h2{font-size:clamp(1.8rem,1.3rem + 1.9vw,2.7rem);color:var(--blue);margin:0 0 .5em}
.prose h3{font-size:1.3rem;color:var(--blue);margin:1.6em 0 .3em}
.prose p{color:var(--ink-soft);margin-bottom:1em}
.prose p strong,.prose li strong{color:var(--ink)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,68px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split .media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:22px;position:relative;z-index:1;display:block}
.split .media{position:relative}
.split .media::before{content:"";position:absolute;inset:0;border-radius:22px;transform:translate(20px,20px);background:var(--blue);z-index:0}

/* reveal — uses the `translate` property so it NEVER fights the hover `transform` on cards */
.rv{opacity:0;translate:0 30px;transition:opacity .8s var(--ease),translate .8s var(--spring)}
.rv.in{opacity:1;translate:none}
/* NOTE (owner's explicit choice): animations & hovers stay ON even under prefers-reduced-motion */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ============================================================================
   PAGE HERO (about/programs/contact/projects) + BREADCRUMB
   ============================================================================ */
.pagehero{background:var(--blue);color:#fff;position:relative;overflow:hidden;padding:72px 0 84px}
.pagehero.ink{background:var(--ink)} .pagehero.coral,.pagehero.green{background:var(--ink)}
.pagehero .star{position:absolute;width:150px;height:150px;top:-30px;right:7%;opacity:.16}
.pagehero .eyebrow{color:var(--gold)} .pagehero .eyebrow .star{position:static;opacity:1;width:15px;height:15px}
.pagehero h1{font-size:clamp(2.3rem,1.4rem + 3.8vw,4.2rem);color:#fff;margin:.28em 0 .3em}
.pagehero p{color:rgba(255,255,255,.9);max-width:60ch;font-size:1.12rem}
.crumb{font-family:var(--b);font-size:.82rem;color:rgba(255,255,255,.72);margin-bottom:18px;letter-spacing:.03em}
.crumb a:hover{color:var(--gold)}

/* PROJECT LISTING */
.grp{padding:clamp(46px,6vw,80px) 0}
.grp-h{display:flex;align-items:center;gap:.55em;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);margin-bottom:28px;color:var(--blue)}
.grp-h .star{width:23px;height:23px}
.grp-h b{font-family:var(--b);font-weight:700;font-size:.85rem;color:#fff;background:var(--blue);border-radius:999px;padding:.15em .7em}
/* all programme groups share the blue header + yellow star (logo palette) */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.pgrid{grid-template-columns:1fr}}
.pc{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 2px 6px rgba(30,40,90,.05),0 10px 26px rgba(30,40,90,.06);transition:transform .38s var(--spring),box-shadow .38s var(--ease);isolation:isolate}
.pc:hover{transform:translateY(-10px);box-shadow:0 26px 54px rgba(30,40,90,.18)}
.pc::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);z-index:3}
.pc:hover::before{transform:scaleX(1)}
.pc .pc-ph{aspect-ratio:16/10;background-size:cover;background-position:center;transition:transform .6s var(--ease)}
.pc:hover .pc-ph{transform:scale(1.07)}
.pc .pc-noph{aspect-ratio:16/10;display:grid;place-items:center}
.pc .pc-noph .star{width:54px;height:54px;opacity:.92}
.pc-noph{background:var(--ink)}  /* no-photo card = near-black block + yellow star */
.pc-b{padding:22px 22px 24px;display:flex;flex-direction:column;gap:11px;flex:1}
.pc-tag{align-self:flex-start;font-family:var(--b);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:.6rem;padding:.45em .85em;border-radius:999px;color:#fff;background:var(--blue)}
/* all card tags use the blue pill (logo palette) */
.pc h3{font-size:1.14rem;letter-spacing:-.02em;line-height:1.2}
.pc-meta{list-style:none;display:flex;flex-direction:column;gap:5px;flex:1}
.pc-meta li{font-size:.8rem;color:var(--ink-soft);display:flex;gap:8px}
.pc-meta li span{font-family:var(--b);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.6rem;color:var(--blue);min-width:44px;padding-top:1px}
.pc-more{font-family:var(--b);font-weight:700;color:var(--blue);display:inline-flex;gap:.4em;align-items:center;font-size:.9rem}
.pc:hover .pc-more .ar{transform:translateX(6px)} .pc-more .ar{transition:transform .25s var(--spring)}

/* PROJECT PAGE */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.16);border-radius:16px;overflow:hidden;margin-top:36px}
.facts .fact{background:var(--blue-700);padding:20px}
.facts .k{font-family:var(--b);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;color:var(--gold);margin-bottom:6px}
.facts .v{font-family:var(--d);font-weight:800;font-size:1.08rem;color:#fff;line-height:1.15}
@media(max-width:760px){.facts{grid-template-columns:repeat(2,1fr)}}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.tag{font-family:var(--b);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.64rem;padding:.5em 1em;border-radius:999px}
.tag.k{background:var(--gold);color:var(--ink)} .tag.t{background:rgba(255,255,255,.14);color:#fff}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal figure{margin:0;border-radius:16px;overflow:hidden;position:relative;aspect-ratio:4/3;box-shadow:0 8px 22px rgba(30,40,90,.08)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gal figure:hover img{transform:scale(1.08)}
.gal figure::after{content:"";position:absolute;inset:0;background:var(--blue);opacity:0;mix-blend-mode:multiply;transition:opacity .3s}
.gal figure:hover::after{opacity:.18}
.gal figure:nth-child(3n+2)::after{background:var(--ink)} .gal figure:nth-child(3n)::after{background:var(--blue)}
.gal-wrap{background:#EFEEEA}
/* per-activity galleries (IVA 2025) */
.actblock{margin-top:34px}
.actblock:first-of-type{margin-top:26px}
.acthd{display:flex;align-items:baseline;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid rgba(30,40,90,.14)}
.acthd h3{font-family:var(--d);font-weight:800;letter-spacing:-.02em;font-size:clamp(1.12rem,2.4vw,1.5rem);margin:0;color:var(--ink)}
.actlink{font-family:var(--b);font-weight:700;font-size:.86rem;color:var(--blue);white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:.4em}
.actlink:hover{text-decoration:underline}
.actlink .ar{transition:transform .3s var(--ease)}
.actlink:hover .ar{transform:translateX(4px)}
/* consortium / partner organisations */
.consort{margin-top:4px}
.cst-blk{margin-top:20px}
.cst-blk:first-child{margin-top:0}
.cst-lbl{display:block;font-family:var(--b);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:.7rem;color:var(--ink-soft);margin-bottom:10px}
.pchips{display:flex;flex-wrap:wrap;gap:9px}
.pchip{display:inline-flex;align-items:center;gap:.5em;background:#fff;border:1px solid rgba(30,40,90,.15);border-radius:999px;padding:.5em .95em;font-size:.9rem;font-weight:600;color:var(--ink);box-shadow:0 3px 10px rgba(30,40,90,.05);transition:transform .2s var(--ease),box-shadow .2s}
.pchip:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(30,40,90,.12)}
.pchip .cc{color:var(--ink-soft);font-weight:600;font-size:.82em}
.pchip .cc::before{content:"·";margin:0 .45em;opacity:.5}
.pchip.lead{background:var(--blue);color:#fff;border-color:var(--blue)}
.pchip.lead .cc{color:rgba(255,255,255,.8)}
.pchip.iafa{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.pchip.iafa .cc{color:rgba(20,22,28,.65)}

/* CONTACT FORM */
.cform{display:grid;gap:16px;max-width:640px}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:560px){.cform .row{grid-template-columns:1fr}}
.cform label{font-family:var(--b);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;color:var(--blue);display:block;margin-bottom:6px}
.cform input,.cform textarea{width:100%;font-family:var(--b);font-size:1rem;color:var(--ink);background:var(--surface);border:2px solid rgba(30,53,127,.28);border-radius:12px;padding:.8em .9em;box-shadow:inset 0 1px 3px rgba(30,53,127,.06);transition:border-color .18s,box-shadow .18s}
.cform input:hover,.cform textarea:hover{border-color:rgba(30,53,127,.5)}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100)}
.cform textarea{min-height:150px;resize:vertical}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px)} @media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.cinfo li{list-style:none;margin-bottom:18px}
.cinfo .k{font-family:var(--b);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;color:var(--blue);margin-bottom:3px}
.cinfo .v{font-size:1.05rem}

/* hero color variants + translucent facts (work on any hero bg) */
.pagehero.violet{background:var(--ink)}
.facts{background:rgba(255,255,255,.16)}
.facts .fact{background:rgba(12,16,40,.22)}
.pagehero.gold{background:var(--gold);color:var(--ink)}
.pagehero.gold h1,.pagehero.gold p{color:var(--ink)}
.pagehero.gold .crumb,.pagehero.gold .eyebrow{color:var(--blue-700)}
.pagehero.gold .facts .fact{background:rgba(12,16,40,.14)}

/* project hero 2-col (text + tilted photo) */
.phero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,56px);align-items:center}
.phero-grid.solo{grid-template-columns:1fr;max-width:56ch}
@media(max-width:820px){.phero-grid{grid-template-columns:1fr}}
.phero-media{position:relative}
.phero-media .frame{border-radius:22px;overflow:hidden;transform:rotate(2deg);box-shadow:0 26px 54px rgba(0,0,0,.3);border:5px solid #fff;position:relative;z-index:2}
.phero-media .frame img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.phero-media::before{content:"";position:absolute;inset:0;border-radius:22px;background:var(--gold);transform:rotate(-3.4deg) scale(.97);z-index:1}
.phero-media .st{position:absolute;z-index:3;width:46px;height:46px;background:var(--gold);top:-16px;right:-12px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
/* highlight chips + partners */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chip{font-family:var(--b);font-weight:600;font-size:.82rem;background:var(--blue-100);color:var(--blue-700);border-radius:999px;padding:.5em 1em}
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:20px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.pcard .fl{font-size:1.3rem} .pcard b{display:block;font-family:var(--d);font-size:.95rem;margin-top:4px} .pcard span{font-size:.82rem;color:var(--ink-soft)}
.callout{background:var(--blue);color:#fff;border-radius:22px;padding:clamp(28px,4vw,44px);position:relative;overflow:hidden}
.callout.ink{background:var(--ink)} .callout.coral,.callout.green,.callout.violet{background:var(--ink)}
.callout .star{position:absolute;width:120px;height:120px;opacity:.15;bottom:-24px;right:4%}
.callout h2,.callout h3{color:#fff;font-size:clamp(1.4rem,1rem + 1.6vw,2rem)} .callout p{color:rgba(255,255,255,.9);max-width:52ch;margin-top:.4em}
.callout .btn{margin-top:18px}
.subgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:820px){.subgrid{grid-template-columns:1fr}}
.subcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .35s var(--spring),box-shadow .35s}
.subcard:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(30,40,90,.16)}
.subcard .ph{aspect-ratio:16/10;background-size:cover;background-position:center}
.subcard .nb{aspect-ratio:16/10;display:grid;place-items:center;background:var(--ink)} .subcard .nb .star{width:46px;height:46px}
.subcard .bd{padding:16px 18px} .subcard .bd b{font-family:var(--d);font-size:1.05rem;color:var(--ink);display:block} .subcard .bd span{font-size:.82rem;color:var(--ink-soft)}

/* ============================================================================
   AUDIT FIXES — focus visibility, responsive grids
   ============================================================================ */
/* visible keyboard focus (gold reads on both paper and dark blue/ink) */
a:focus-visible,.btn:focus-visible,button:focus-visible,.nav-toggle:focus-visible,
.pc:focus-visible,.subcard:focus-visible,.cblock:focus-visible,.cblock a:focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.cform input:focus-visible,.cform textarea:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

/* project-body two-column grid (prose + aside) — collapses on mobile */
.pbody{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,64px)}
.pbody.solo{grid-template-columns:1fr;max-width:70ch}
@media(max-width:820px){.pbody{grid-template-columns:1fr}}

/* four-up card row (programs "at a glance") — 4 -> 2 -> 1 */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:900px){.cards4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards4{grid-template-columns:1fr}}

/* four-stat band (about) — 4 -> 2 -> 1 (overrides the base 3-col + inline) */
.stats .grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.stats .grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stats .grid.four{grid-template-columns:1fr}}

/* ============================================================================
   FOOTER FUNDER LOGOS + marquee always-on (owner request)
   ============================================================================ */
.funders{margin-top:44px;padding-top:30px;border-top:1px solid rgba(255,255,255,.12);text-align:center}
.funders-lbl{display:block;font-family:var(--b);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.64rem;color:rgba(255,255,255,.5);margin-bottom:18px}
.funders-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.funders-row span{background:#fff;border-radius:12px;padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;height:58px;box-shadow:0 6px 16px rgba(0,0,0,.14)}
.funders-row img{height:36px;width:auto;display:block}
@media(max-width:560px){.funders-row span{height:50px;padding:8px 12px}.funders-row img{height:30px}}

/* (marquee runs at full speed everywhere — owner's choice) */

/* mobile: hide the floating hero star (overlapped text) + tuck the photo star in */
@media(max-width:900px){
  .hero .s1{display:none}
  .hmedia{margin:2px 8px 0}
  .hmedia .star{width:40px;height:40px;top:-14px;left:4px}
  .hmedia .tagpill{right:10px;bottom:14px;transform:rotate(-2.5deg)}
}

/* responsive video embed (Vimeo) */
.videobox{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(30,40,90,.18);background:#000}
.videobox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============================================================================
   CONTACT MAP — playful tilted frame with the gold offset + address pill
   ============================================================================ */
.maparea{position:relative;margin-top:clamp(40px,6vw,64px)}
.mapframe{position:relative;z-index:2;border-radius:24px;overflow:hidden;box-shadow:0 24px 54px rgba(30,40,90,.18);transform:rotate(-1.2deg);border:5px solid #fff;background:#e8e6e0}
.mapframe iframe{display:block;width:100%;height:min(56vw,440px);border:0}
.maparea::before{content:"";position:absolute;inset:0;border-radius:24px;background:var(--gold);transform:rotate(1.6deg) scale(.985);z-index:1}
.maparea .star{position:absolute;z-index:3;width:44px;height:44px;top:-16px;right:22px;animation:tw 5s ease-in-out infinite}
.mappill{position:absolute;z-index:3;bottom:-16px;left:24px;background:var(--blue);color:#fff;border-radius:14px;padding:10px 18px;font-family:var(--d);font-weight:800;box-shadow:0 14px 30px rgba(0,0,0,.22);transform:rotate(-2deg)}
.mappill small{display:block;font-family:var(--b);font-weight:600;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
@media(max-width:560px){.mappill{left:12px;padding:8px 14px;font-size:.9rem}}

/* ============================================================================
   MOBILE EXPERIENCE POLISH
   ============================================================================ */
@media(max-width:860px){
  /* hero: generous room to breathe on phones */
  .hero{padding:50px 0 80px}
  .hero h1{margin:.34em 0 .66em}
  .hero .lead{margin-bottom:1.8em}
  .hero .mini{flex-wrap:wrap;row-gap:24px;margin-top:48px}
  .hero-brand{gap:12px;margin-bottom:26px}
  .hero-brand .hmark{height:64px}
  .hname .pt{font-size:.88rem}
  .hname .en{font-size:.6rem;letter-spacing:.08em}
  /* sections: generous separation between stacked blocks on phones (mobile only — desktop unchanged) */
  section{padding:clamp(84px,12vw,136px) 0}
  .sec-head{margin-bottom:56px}
  .grp{padding:clamp(60px,9vw,86px) 0}
  /* comfy tap targets */
  footer a{padding:9px 0}
  .fbar{gap:16px}
  /* marquee slightly calmer */
  .marq{padding:16px 0}
  /* facts strip: bigger touch-friendly cells */
  .facts .fact{padding:16px}
  /* gallery gaps tighter so photos get more width */
  .gal{gap:10px}
}
@media(max-width:480px){
  .hero .btns .btn{width:100%;justify-content:center}
  .pgrid{gap:16px}
}

/* ============================================================================
   AUDIT FIXES (v6) — accessibility · palette discipline · polish
   ============================================================================ */
/* #1 no-JavaScript fallback: content + menu must work without JS */
.no-js .rv{opacity:1;translate:none}
.no-js .nav .links{position:static;transform:none;visibility:visible;flex-direction:row;background:none;box-shadow:none;border:0;padding:0;inset:auto}
.no-js .nav-toggle{display:none}

/* #22 skip-to-content link */
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--blue);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;font-family:var(--b);font-weight:700;font-size:.9rem}
.skip:focus{left:0}

/* #7 header language switch — a real, reachable target (not just the footer link) */
.langsw{display:inline-flex;align-items:center;gap:.48em;order:1;border:1.5px solid var(--line);border-radius:999px;padding:.5em .92em;background:var(--surface);color:var(--blue);font-family:var(--b);font-weight:700;font-size:.82rem;letter-spacing:.02em;line-height:1;transition:border-color .18s,background .18s,color .18s}
.langsw:hover{border-color:var(--blue);background:var(--blue-100)}
.langsw .glb{color:var(--blue);flex:none}
.langsw .lg-short{display:none}
@media(max-width:860px){.langsw{margin-left:auto;font-size:.78rem;padding:.46em .7em;gap:.4em}.langsw .lg-full{display:none}.langsw .lg-short{display:inline}}

/* #24 mobile hamburger — 44x44 minimum touch target */
@media(max-width:860px){.nav-toggle{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;line-height:1;margin-right:-6px}}

/* #32 scrim behind the open mobile menu */
body.menu-open::after{content:"";position:fixed;inset:var(--navh) 0 0 0;background:rgba(20,22,28,.45);z-index:40;animation:scrimin .25s ease}
@keyframes scrimin{from{opacity:0}to{opacity:1}}
/* iOS Safari fix: the close-on-outside-tap is a document-level click delegate (js/main.js).
   iOS/WebKit only bubbles a `click` to document from a non-interactive element if it (or an
   ancestor) is "clickable" — i.e. carries cursor:pointer. The scrim is body::after on the bare
   <body>, so without this the dark overlay swallows the tap and the menu can't be dismissed on
   iPhone (it works in Chrome/Blink, which has no such gate). Mobile-scoped; cursor is invisible
   on touch, so no visual change. Desktop (>860px) is untouched. */
@media(max-width:860px){body.menu-open{cursor:pointer}}

/* #25 palette discipline: hero mini-stat #3 uses gold/blue, never the lone green */
.hero .mini>div:nth-child(3)::before{background:var(--gold)}
.hero .mini b[style*="--green"]{color:var(--blue)!important}

/* #26 hero watermark star: softer so it doesn't read as a dark blob */
.pagehero .star{opacity:.10}

/* #5 richer fallback for image-less cards (blue→ink gradient + star, not flat black) */
.pc-noph{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-700) 55%,var(--ink) 100%);position:relative;overflow:hidden}
.subcard .nb{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-700) 55%,var(--ink) 100%);position:relative;overflow:hidden}
.pc-noph::before,.subcard .nb::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 22%,rgba(242,206,0,.20),transparent 42%),radial-gradient(circle at 20% 85%,rgba(242,206,0,.10),transparent 40%)}
.pc .pc-noph .star,.subcard .nb .star{position:relative;z-index:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}

/* #27 reserve title height so meta + "See project" align across a row */
.pc h3{min-height:2.5em}
/* #28 small project groups shouldn't leave a big empty right side */
.grp .pgrid:has(> .pc:only-child){grid-template-columns:minmax(0,420px)}
.grp .pgrid:has(> .pc:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));max-width:780px}

/* #31 eyebrow / group heading: star aligns to the first line when text wraps */
.eyebrow{align-items:flex-start}.eyebrow .star{margin-top:.18em}
.grp-h{align-items:flex-start}.grp-h .star{margin-top:.14em}.grp-h b{align-self:flex-start}

/* #52 footer: lift small low-opacity text above AA contrast */
.fbar{color:rgba(255,255,255,.72)}
.funders-lbl{color:rgba(255,255,255,.7)}

/* footer social icons */
.fsocial{display:flex;gap:10px;margin-top:16px}
.fsocial a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);padding:0;transition:background .15s,color .15s}
.fsocial a:hover{background:var(--gold);color:var(--ink)}

/* #4 contact map: styled fallback so a slow/blocked embed never looks broken */
.mapframe{background:var(--blue-100)}
.mapfallback{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;color:var(--blue)}
.mapfallback .btn{margin-top:4px}
.mapframe iframe{position:relative;z-index:2}

/* #6 resource pages (articles / interviews): centre the solo hero */
.phero-grid.solo{margin-inline:auto;text-align:center;align-items:center}
.phero-grid.solo .crumb,.phero-grid.solo .eyebrow{justify-content:center}

/* contact page — social icon buttons (recognisable, on-brand by default) */
.csocial{display:flex;gap:12px;margin-top:4px}
.csocial a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;transition:transform .22s var(--spring),background .22s,box-shadow .22s}
.csocial a svg{width:20px;height:20px}
.csocial a:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(20,22,28,.22)}
.csocial a.ig:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.csocial a.fb:hover{background:#1877F2}

/* ============================================================================
   EURODESK — "we are a Eurodesk point" (programs) + activities (projects)
   ============================================================================ */
/* Eurodesk "official point" chip — logo + label, sits inside the split prose */
.edtag{display:flex;width:fit-content;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 18px;margin:8px 0 22px;box-shadow:0 4px 14px rgba(30,40,90,.06)}
.edtag img{height:22px;width:auto}
.edtag .div{width:1px;height:20px;background:rgba(30,53,127,.22)}
.edtag .lbl{display:inline-flex;align-items:center;gap:.5em;font-family:var(--b);font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--blue)}
.edtag .lbl .star{width:11px;height:11px}

.edact{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,48px);align-items:center;background:var(--ink);color:#fff;border-radius:24px;padding:clamp(28px,4vw,48px);position:relative;overflow:hidden}
.edact .eyebrow{color:var(--gold)}
.edact h2{color:#fff;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.3rem);margin:.15em 0 .5em}
.edact>div>p{color:rgba(255,255,255,.82);max-width:56ch}
.edact .ed-items{display:grid;gap:15px;margin:24px 0 26px}
.edact .ed-items>div{position:relative;padding-left:22px}
.edact .ed-items>div::before{content:"";position:absolute;left:0;top:.35em;width:12px;height:12px;background:var(--gold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.edact .ed-items b{display:block;font-family:var(--b);font-weight:700;color:#fff}
.edact .ed-items span{font-size:.9rem;color:rgba(255,255,255,.7)}
.edact .ed-logo-panel{display:flex;align-items:center;justify-content:center;padding:8px}
.edact .ed-logo-panel img{width:100%;max-width:250px;height:auto}
@media(max-width:760px){.edact{grid-template-columns:1fr}.edact .ed-logo-panel{order:-1}}

/* ============================================================================
   PROJECTS — full archive (all IAFA projects, filter: coordinator vs partner)
   ============================================================================ */
.arch{margin-top:6px}
.archbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.archbar .fb{font:inherit;font-size:.8rem;font-weight:700;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:.45em .9em;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.archbar .fb b{opacity:.5}
.archbar .fb.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.archbar .fb.gold.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.archbar .asearch{font:inherit;font-size:.82rem;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:.5em 1em;min-width:200px;flex:1}
.archbar .asearch:focus{outline:none;border-color:var(--blue)}
.archcount{font-size:.76rem;color:var(--ink-soft);width:100%;text-align:right}
.archlist{display:flex;flex-direction:column;gap:8px;max-height:620px;overflow-y:auto;padding:8px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--line) 20%,transparent)}
.arow{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:11px;padding:11px 15px;text-decoration:none;color:inherit}
a.arow:hover{border-color:var(--blue);translate:2px 0}
.arow.rc{border-left-color:var(--gold)} .arow.rp{border-left-color:var(--blue)}
.arow .ay{font-family:var(--d);font-weight:800;color:var(--ink-soft);font-size:1rem}
.arow .at{font-weight:600;font-size:.92rem;letter-spacing:-.01em;line-height:1.25}
.arow .at .fa{color:var(--blue);font-weight:700}
.arow .asub{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:3px;font-size:.72rem;color:var(--ink-soft)}
.arow .asub .code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:color-mix(in srgb,var(--line) 55%,transparent);padding:.1em .45em;border-radius:5px}
.arow .asub .prog{color:var(--blue)}
.arow .arole{font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.26em .6em;border-radius:6px;white-space:nowrap}
.arow .arole.rc{background:rgba(242,206,0,.22);color:var(--gold-700)}
.arow .arole.rp{background:var(--blue-100);color:var(--blue)}
@media(max-width:600px){.arow{grid-template-columns:40px 1fr}.arow .arole{grid-column:2;justify-self:start}}

.archbar .flbl{font-size:.72rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-right:2px}

/* archive as a card grid (each project has its own page) */
.acards{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px;margin-top:8px}
.acard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 2px 6px rgba(30,40,90,.05);transition:transform .32s var(--spring),box-shadow .32s,border-color .2s;color:inherit}
.acard.rc{border-left-color:var(--gold)} .acard.rp{border-left-color:var(--blue)}
.acard:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(30,40,90,.13);border-color:var(--blue)}
.acard .ac-ph{aspect-ratio:16/10;background-size:cover;background-position:center}
.acard .ac-nb{aspect-ratio:16/10;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-700) 55%,var(--ink) 100%);position:relative;overflow:hidden}
.acard .ac-nb::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 22%,rgba(242,206,0,.18),transparent 42%),radial-gradient(circle at 18% 88%,rgba(242,206,0,.09),transparent 40%)}
.acard .ac-nb .star{width:38px;height:38px;position:relative;z-index:1;filter:drop-shadow(0 3px 10px rgba(0,0,0,.3))}
.acard .ac-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.acard .ac-role{align-self:flex-start;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.24em .6em;border-radius:6px}
.acard .ac-role.rc{background:rgba(242,206,0,.22);color:var(--gold-700)} .acard .ac-role.rp{background:var(--blue-100);color:var(--blue)}
.acard h3{font-size:1rem;font-weight:700;letter-spacing:-.01em;line-height:1.22}
.acard .ac-meta{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--ink-soft);margin-top:auto}
.acard .ac-meta i{width:3px;height:3px;border-radius:50%;background:var(--ink-soft);opacity:.55;flex:none}

/* unified project cards (featured + archive together, grouped by programme) */
.pgrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:18px}
.projcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 2px 6px rgba(30,40,90,.05),0 10px 26px rgba(30,40,90,.05);transition:transform .34s var(--spring),box-shadow .34s,border-color .2s;color:inherit}
.projcard.rc{border-left-color:var(--gold)} .projcard.rp{border-left-color:var(--blue)}
.projcard:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(30,40,90,.13);border-color:var(--blue)}
.projcard .pj-ph{aspect-ratio:16/10;background-size:cover;background-position:center}
.projcard .pj-nb{aspect-ratio:16/10;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-700) 55%,var(--ink) 100%);position:relative;overflow:hidden}
.projcard .pj-nb::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 22%,rgba(242,206,0,.18),transparent 42%),radial-gradient(circle at 18% 88%,rgba(242,206,0,.09),transparent 40%)}
.projcard .pj-nb .star{width:40px;height:40px;position:relative;z-index:1;filter:drop-shadow(0 3px 10px rgba(0,0,0,.3))}
.projcard .pj-b{padding:15px 17px 17px;display:flex;flex-direction:column;gap:9px;flex:1}
.projcard .pj-role{align-self:flex-start;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.24em .6em;border-radius:6px}
.projcard .pj-role.rc{background:rgba(242,206,0,.22);color:var(--gold-700)} .projcard .pj-role.rp{background:var(--blue-100);color:var(--blue)}
.projcard h3{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;line-height:1.22}
.projcard .pj-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:.73rem;color:var(--ink-soft)}
.projcard .pj-meta i{width:3px;height:3px;border-radius:50%;background:var(--ink-soft);opacity:.55;flex:none}
.projcard .pj-co{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.projcard .pj-more{margin-top:auto;padding-top:2px;font-family:var(--b);font-weight:700;color:var(--blue);font-size:.85rem;display:inline-flex;gap:.4em;align-items:center}
.projcard:hover .pj-more .ar{transform:translateX(5px)} .projcard .pj-more .ar{transition:transform .25s var(--spring)}

/* accreditations (Programs page) — Erasmus+ Youth Accreditation + ESC Quality Label */
.acc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:20px}
.acc{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:16px;padding:24px 26px;box-shadow:0 2px 6px rgba(30,40,90,.05),0 12px 30px rgba(30,40,90,.06);display:flex;flex-direction:column;gap:9px}
.acc .acc-tag{align-self:flex-start;font-family:var(--b);font-weight:700;font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;color:var(--blue);background:var(--blue-100);border-radius:999px;padding:.4em .85em}
.acc h3{font-size:1.2rem}
.acc p{color:var(--ink-soft);font-size:.95rem;margin:0}
.acc .acc-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;color:var(--ink-soft);background:color-mix(in srgb,var(--line) 45%,transparent);padding:.32em .6em;border-radius:6px;align-self:flex-start;margin-top:4px}
@media(max-width:560px){.acc-grid{grid-template-columns:1fr}}

/* =========================================================================
   Interior hero — refined blue: subtle gradient depth + gold star constellation.
   Keeps the blue (owner prefers it) but replaces the flat slab + lone star.
   Pure-CSS, applies to every interior page.
   ========================================================================= */
.pagehero{
  background:radial-gradient(128% 125% at 85% -12%, #2E4CA8 0%, var(--blue) 46%, var(--blue-700) 100%);
}
.pagehero.ink,.pagehero.coral,.pagehero.green,.pagehero.violet{
  background:radial-gradient(128% 125% at 85% -12%, #24386A 0%, var(--ink) 52%, #0B0E18 100%);
}
.pagehero .wrap{position:relative;z-index:2}
/* faint ring — adds depth behind the decoration */
.pagehero::before{content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(560px,54vw);height:min(560px,54vw);border-radius:50%;
  border:1.5px solid rgba(255,255,255,.10);top:-44%;right:-7%}
/* one crisp gold star — the single brand accent */
.pagehero::after{content:"";position:absolute;z-index:1;pointer-events:none;
  width:60px;height:60px;background:var(--gold);opacity:.85;top:54%;right:15%;
  filter:drop-shadow(0 4px 14px rgba(242,206,0,.35));
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
/* big star -> faint white watermark (clean, no muddy translucency) */
.pagehero .star{width:clamp(160px,19vw,240px);height:clamp(160px,19vw,240px);top:-40px;right:5.5%;
  background:#fff;opacity:.07}
@media(max-width:820px){
  .pagehero::before{width:340px;height:340px;top:-38%;right:-16%}
  .pagehero::after{display:none}
  .pagehero .star{opacity:.16;right:-3%}
}

/* =========================================================================
   Refined shadows — layered, blue-tinted "elevation" for real depth (was flat),
   plus a gentle float on the hero photos so they feel alive, not static.
   ========================================================================= */
:root{
  --sh-photo:0 2px 4px rgba(19,36,86,.10),0 8px 16px rgba(19,36,86,.11),0 20px 40px rgba(19,36,86,.15),0 44px 76px rgba(19,36,86,.20);
  --sh-gal:0 1px 2px rgba(19,36,86,.07),0 6px 13px rgba(19,36,86,.09),0 16px 30px rgba(19,36,86,.11);
  --sh-rest:0 1px 2px rgba(19,36,86,.06),0 5px 11px rgba(19,36,86,.06),0 13px 26px rgba(19,36,86,.07);
  --sh-lift:0 3px 7px rgba(19,36,86,.10),0 12px 26px rgba(19,36,86,.13),0 30px 54px rgba(19,36,86,.18);
}
.hmedia .frame,.phero-media .frame,.mapframe{box-shadow:var(--sh-photo)}
.gal figure,.videobox{box-shadow:var(--sh-gal)}
.gal figure:hover{box-shadow:var(--sh-lift)}
.pc,.projcard,.acard,.subcard{box-shadow:var(--sh-rest)}
.pc:hover,.projcard:hover,.acard:hover,.subcard:hover{box-shadow:var(--sh-lift)}
.hmedia .tagpill,.mappill{box-shadow:0 12px 28px rgba(19,36,86,.22)}
/* gentle, slow float — subtle life on the hero photos (owner keeps motion on) */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.phero-media,.hmedia{animation:floaty 6.5s var(--ease) infinite}
@media(max-width:820px){.phero-media,.hmedia{animation-duration:7.5s}}
/* keep the sticky header + its open mobile menu above the animated hero layers on every device */
header{isolation:isolate}
@media(max-width:860px){.nav .links{z-index:70}}
/* gallery photos: subtle lift so the hover shadow reads as intentional */
.gal figure{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.gal figure:hover{transform:translateY(-4px)}

/* =========================================================================
   Depth for ALL solid blue / near-black fields — same gradient language as the
   hero, so nothing on the site reads as a flat colour slab. + soft blue-tinted lift.
   ========================================================================= */
/* CTA callout blocks (bottom of most pages) */
.callout{background:radial-gradient(135% 150% at 88% -22%, #2E4CA8 0%, var(--blue) 48%, var(--blue-700) 100%);
  box-shadow:0 3px 8px rgba(19,36,86,.10),0 20px 48px rgba(19,36,86,.18)}
.callout.ink,.callout.coral,.callout.green,.callout.violet{
  background:radial-gradient(135% 150% at 88% -22%, #24386A 0%, var(--ink) 52%, #0A0D16 100%);
  box-shadow:0 3px 8px rgba(11,14,24,.14),0 20px 48px rgba(11,14,24,.24)}
/* content blocks (home "strands" + programme cards) */
.cblock{box-shadow:0 2px 6px rgba(19,36,86,.06),0 12px 30px rgba(19,36,86,.10)}
.cblock.b1{background:linear-gradient(150deg,#2A47A0 0%,var(--blue) 55%,var(--blue-700) 100%)}
.cblock.b2{background:linear-gradient(150deg,#273C6E 0%,var(--ink) 52%,#0B0E18 100%)}
.cblock:hover,.cblock.b2:hover{box-shadow:0 3px 8px rgba(19,36,86,.12),0 26px 56px rgba(19,36,86,.22)}
/* Eurodesk block (programmes / projects) */
.edact{background:radial-gradient(120% 150% at 85% -22%,#273C6E 0%,var(--ink) 52%,#0B0E18 100%);
  box-shadow:0 3px 8px rgba(11,14,24,.12),0 20px 48px rgba(11,14,24,.20)}
/* stat band */
.stats{background:radial-gradient(120% 165% at 82% -32%,#2E4CA8 0%,var(--blue) 50%,var(--blue-700) 100%)}
/* no-photo project card */
.pc-noph{background:linear-gradient(155deg,#273C6E 0%,var(--ink) 55%,#0B0E18 100%)}
/* marquee — subtle vertical depth (safe under horizontal scroll) */
.marq{background:linear-gradient(180deg,#23409C 0%,var(--blue) 58%,var(--blue-700) 100%)}
.marq.ink,.marq.coral{background:linear-gradient(180deg,#22315A 0%,var(--ink) 58%,#0B0E18 100%)}

/* =========================================================================
   Split-section photos ("Our story" etc.) — real depth:
   the photo floats (soft layered shadow) above a gradient "echo" card that has
   its own shadow, instead of a flat blue block stuck behind.
   ========================================================================= */
.split .media img{
  box-shadow:0 2px 6px rgba(19,36,86,.10),0 14px 30px rgba(19,36,86,.16),0 30px 58px rgba(19,36,86,.22)}
.split .media::before{
  background:linear-gradient(150deg,#2A47A0 0%,var(--blue) 52%,var(--blue-700) 100%);
  box-shadow:0 16px 40px rgba(19,36,86,.24);
  transform:translate(22px,22px)}
/* Eurodesk footer logo — a touch smaller than the flag logos (it's a wide wordmark) */
.funders-row img[src*="eurodesk"]{height:29px}
@media(max-width:560px){.funders-row img[src*="eurodesk"]{height:25px}}

/* =========================================================================
   "Get involved" modal — current opportunities (mirrors the IAFA Linktree)
   ========================================================================= */
.giv-modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.giv-modal.open{display:flex}
.giv-scrim{position:absolute;inset:0;background:rgba(11,14,24,.55);backdrop-filter:blur(4px);animation:givfade .25s var(--ease)}
.giv-panel{position:relative;z-index:1;background:var(--paper);border-radius:24px;max-width:560px;width:100%;max-height:88vh;overflow-y:auto;padding:clamp(26px,4vw,40px);box-shadow:0 30px 90px rgba(11,14,24,.42);animation:givpop .3s var(--spring);overflow-x:hidden}
.giv-panel>.star{position:absolute;width:130px;height:130px;top:-34px;right:-14px;opacity:.10;pointer-events:none}
.giv-x{position:absolute;top:14px;right:16px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(30,40,90,.07);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;transition:background .2s,transform .2s;z-index:2}
.giv-x:hover{background:rgba(30,40,90,.14);transform:rotate(90deg)}
.giv-panel h2{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.15rem);margin:.15em 0 .12em;color:var(--ink)}
.giv-sub{color:var(--ink-soft);font-size:.98rem;margin-bottom:22px;max-width:46ch}
.giv-opps{display:flex;flex-direction:column;gap:10px}
.giv-link{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:0 2px 6px rgba(19,36,86,.05);transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.giv-link:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(19,36,86,.12);border-color:var(--blue)}
.giv-link-t{font-family:var(--b);font-weight:600;font-size:.92rem;line-height:1.3}
.giv-link-tag{flex:none;font-family:var(--b);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);white-space:nowrap;display:inline-flex;align-items:center;gap:.35em}
.giv-link.giv-form{border-left:3px solid var(--gold)}
.giv-link.giv-form .giv-link-tag{color:var(--gold-700)}
.giv-link.giv-doc{border-left:3px solid var(--blue)}
.giv-link.giv-doc .giv-link-tag{color:var(--blue)}
.giv-link .ar{transition:transform .25s var(--spring)}
.giv-link:hover .ar{transform:translateX(4px)}
.giv-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.giv-social{display:flex;gap:10px}
.giv-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;transition:transform .2s var(--spring),background .2s}
.giv-social a:hover{transform:translateY(-3px);background:var(--blue)}
.giv-talk{font-size:.9rem;color:var(--ink-soft)}
.giv-talk a{color:var(--blue);font-weight:700;white-space:nowrap}
.giv-talk a:hover{text-decoration:underline}
@keyframes givfade{from{opacity:0}to{opacity:1}}
@keyframes givpop{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:520px){.giv-foot{flex-direction:column;align-items:flex-start;gap:14px}.giv-link{padding:13px 14px}.giv-link-t{font-size:.88rem}}
/* Mobile: opportunity cards — let the title use the full width, drop the button to its own row (no more squeezed 14-line titles) */
@media(max-width:560px){.plist .giv-link{flex-wrap:wrap;row-gap:11px}.plist .giv-link .giv-link-t{flex:1 1 auto;min-width:0}.plist .giv-link .giv-link-tag{margin-left:54px}}
/* project reference code shown compactly in the facts strip */
.facts .v.ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;font-weight:600;letter-spacing:0;word-break:break-all;line-height:1.35;opacity:.92}

/* Projects listing — jump straight to a programme section (from Programs page buttons),
   offsetting the sticky header so the section heading isn't hidden underneath. */
.grp{scroll-margin-top:calc(var(--navh, 96px) + 18px)}

/* =========================================================================
   "No photo" tiles — a refined, modern deep-blue "aurora" with a fine dot texture
   and ONE small, calm brand star (no twinkle, softer gold). Young/editorial, not
   cartoon. Applies to every fallback tile: listing (.pj-nb), archive (.ac-nb),
   featured card (.pc-noph), subcards (.nb).
   ========================================================================= */
.projcard .pj-nb,.acard .ac-nb,.pc-noph,.subcard .nb{
  background:
    radial-gradient(120% 120% at 14% 8%,#3A4F9E 0%,transparent 52%),
    radial-gradient(120% 120% at 92% 16%,#22376E 0%,transparent 48%),
    radial-gradient(140% 130% at 78% 110%,#0E1730 0%,transparent 55%),
    linear-gradient(150deg,#1E357F 0%,#182a62 55%,#111c3e 100%)}
.projcard .pj-nb::before,.acard .ac-nb::before,.pc-noph::before,.subcard .nb::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 84% 84%,rgba(242,206,0,.12),transparent 46%),
    radial-gradient(rgba(255,255,255,.13) .7px,transparent .8px);
  background-size:cover,15px 15px;background-repeat:no-repeat,repeat;background-position:center,center}
.projcard .pj-nb .star,.acard .ac-nb .star,.pc .pc-noph .star,.subcard .nb .star{
  width:26px;height:26px;position:relative;z-index:1;background:#E7C65E;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.32));animation:none}
/* subtle per-card variation so a wall of tiles isn't identical (kept understated) */
.pgrid2 .projcard:nth-child(3n+2) .pj-nb{background:
  radial-gradient(120% 120% at 86% 10%,#3A4F9E 0%,transparent 50%),
  radial-gradient(120% 130% at 12% 24%,#22376E 0%,transparent 48%),
  radial-gradient(140% 130% at 32% 108%,#0E1730 0%,transparent 55%),
  linear-gradient(150deg,#1E357F 0%,#182a62 55%,#111c3e 100%)}
.pgrid2 .projcard:nth-child(3n) .pj-nb{background:
  radial-gradient(130% 120% at 50% 4%,#33468f 0%,transparent 52%),
  radial-gradient(120% 120% at 88% 92%,#22376E 0%,transparent 48%),
  linear-gradient(160deg,#20397f 0%,#16244f 60%,#0f1a3a 100%)}

/* =========================================================================
   Accreditation cards (Programs) — livelier: faint gold tint, a gold "certified"
   seal badge, and a hover lift, so they read as official + alive (not flat white).
   ========================================================================= */
/* Navy "award certificate" cards — the site's own dark blue (like the hero & panels), gold
   border + seal, with a constellation and shooting stars inside. On-brand, not black. */
#accreditations .acc{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 120% at 12% -12%,#2C46A6 0%,transparent 52%),
    radial-gradient(130% 120% at 96% 116%,#0A1226 0%,transparent 55%),
    linear-gradient(158deg,#21397F 0%,#17244E 55%,#111b3d 100%);
  border:1px solid rgba(242,206,0,.3);border-radius:18px;
  box-shadow:0 4px 14px rgba(19,36,86,.22),0 22px 50px rgba(19,36,86,.34);
  transition:transform .32s var(--spring),box-shadow .32s}
#accreditations .acc:hover{transform:translateY(-6px);box-shadow:0 16px 30px rgba(19,36,86,.32),0 36px 66px rgba(19,36,86,.44),0 0 0 1px rgba(242,206,0,.3)}
#accreditations .acc h3{color:#fff;padding-right:46px}
#accreditations .acc p{color:rgba(255,255,255,.68)}
#accreditations .acc .acc-tag{background:rgba(242,206,0,.16);color:var(--gold)}
#accreditations .acc .acc-tag,#accreditations .acc h3,#accreditations .acc p{position:relative;z-index:2}
/* faint constellation twinkling inside the card */
#accreditations .acc::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1.7px 1.7px at 20% 32%,rgba(242,206,0,.62),transparent),
    radial-gradient(1.6px 1.6px at 68% 20%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.6px 1.6px at 86% 54%,rgba(242,206,0,.52),transparent),
    radial-gradient(1.5px 1.5px at 40% 74%,rgba(255,255,255,.4),transparent),
    radial-gradient(1.6px 1.6px at 54% 44%,rgba(242,206,0,.46),transparent),
    radial-gradient(1.5px 1.5px at 12% 62%,rgba(255,255,255,.36),transparent);
  animation:twk 6s var(--ease) infinite}
/* shooting stars streak inside each card (staggered) */
#accreditations .acc .acc-shoot{position:absolute;z-index:0;width:3px;height:3px;border-radius:50%;pointer-events:none;opacity:0;
  background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.7),0 0 12px 2px rgba(242,206,0,.5)}
#accreditations .acc .acc-shoot::after{content:"";position:absolute;top:50%;left:2px;width:58px;height:1.5px;transform:translateY(-50%) rotate(-28deg);transform-origin:left center;
  background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,0))}
#accreditations .acc:nth-child(1) .as1{top:20%;left:60%;animation:accShoot 7s cubic-bezier(.3,.5,.5,1) infinite 1.4s}
#accreditations .acc:nth-child(1) .as2{top:47%;left:82%;animation:accShoot 9.5s cubic-bezier(.3,.5,.5,1) infinite 5s}
#accreditations .acc:nth-child(2) .as1{top:26%;left:66%;animation:accShoot 8s cubic-bezier(.3,.5,.5,1) infinite 3s}
#accreditations .acc:nth-child(2) .as2{top:54%;left:48%;animation:accShoot 10.5s cubic-bezier(.3,.5,.5,1) infinite 7s}
@keyframes accShoot{0%{opacity:0;transform:translate(0,0) scale(.7)}5%{opacity:1}18%{opacity:1}26%{opacity:0}100%{opacity:0;transform:translate(-152px,88px) scale(1)}}
/* gold seal on top, gently pulsing */
.acc-seal{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;z-index:3;
  background:rgba(242,206,0,.15);border:1.5px solid rgba(242,206,0,.55);display:grid;place-items:center;
  box-shadow:0 2px 10px rgba(6,10,26,.30)}
.acc-seal .star{width:18px;height:18px;background:var(--gold)}
@keyframes sealpulse{
  0%,100%{transform:scale(1);box-shadow:0 5px 14px rgba(242,206,0,.5),inset 0 1px 2px rgba(255,255,255,.65)}
  50%{transform:scale(1.09);box-shadow:0 9px 22px rgba(242,206,0,.62),inset 0 1px 2px rgba(255,255,255,.7)}}

/* =========================================================================
   Contact form — a lively card AROUND the fields so it isn't all white: a playful
   gold offset behind (the site's sticker motif), a soft blue tint, a twinkling star,
   and animated focus. All fields preserved; only wrapped + restyled.
   ========================================================================= */
.cform-wrap{position:relative;max-width:640px;margin-top:4px}
.cform-wrap::before{content:"";position:absolute;inset:0;z-index:0;border-radius:26px;
  background:linear-gradient(150deg,#FFE24D 0%,var(--gold) 100%);
  transform:rotate(-1.5deg);box-shadow:0 16px 38px rgba(242,206,0,.22)}
.cform-wrap::after{content:"";position:absolute;top:-14px;right:-10px;width:34px;height:34px;z-index:2;
  background:var(--gold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter:drop-shadow(0 4px 10px rgba(242,206,0,.5));animation:tw 5s ease-in-out infinite}
.cform{position:relative;z-index:1;max-width:none;margin:0;
  background:linear-gradient(158deg,#E8EFFB 0%,#F2F5FD 52%,#FBFAF7 100%);
  border:1px solid var(--blue-100);border-radius:22px;padding:clamp(22px,3.4vw,32px);
  box-shadow:0 2px 8px rgba(30,40,90,.07),0 16px 40px rgba(30,40,90,.12)}
.cform input,.cform textarea{transition:border-color .18s,box-shadow .18s,transform .18s}
.cform input:focus,.cform textarea:focus{transform:translateY(-2px)}
/* contact details — a matching little card around the info (cohesive with the form's
   shadowed look, a touch calmer). The dark "volunteer abroad?" callout below is untouched. */
.cinfo-card{position:relative;overflow:hidden;
  background:linear-gradient(158deg,#F1F4FC 0%,#F9F8FE 55%,#fff 100%);
  border:1px solid var(--blue-100);border-radius:22px;
  padding:clamp(20px,3vw,28px) clamp(22px,3.4vw,30px);
  box-shadow:0 3px 7px rgba(19,36,86,.10),0 12px 26px rgba(19,36,86,.13),0 30px 54px rgba(19,36,86,.18)}
.cinfo-card::before{content:"";position:absolute;top:-34px;right:-34px;width:120px;height:120px;
  background:radial-gradient(circle,rgba(242,206,0,.16),transparent 68%);pointer-events:none}
.cinfo-card .cinfo li:last-child{margin-bottom:0}

/* =========================================================================
   Get involved / Participar page — a Linktree-style landing that keeps people on
   our OWN site (opportunities auto-synced from the same data as the header modal).
   Reuses the .giv-link / .giv-social cards, laid out as a centred column.
   ========================================================================= */
.give-wrap{padding-top:clamp(26px,4vw,44px)}
/* open calls sit in a soft panel (same shadowed look as the contact cards), so the
   page reads as part of the site — not a bare link list */
.give-panel{max-width:600px;margin:0 auto;position:relative;overflow:hidden;
  background:linear-gradient(158deg,#EAF0FB 0%,#F3F6FD 55%,#FBFAF7 100%);
  border:1px solid var(--blue-100);border-radius:22px;padding:clamp(24px,3.6vw,36px);
  box-shadow:0 3px 7px rgba(19,36,86,.10),0 12px 26px rgba(19,36,86,.13),0 30px 54px rgba(19,36,86,.18)}
.give-panel .eyebrow{justify-content:center;width:100%;margin-bottom:18px}
.give-social-row{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:26px;text-align:center}
.give-social-lbl{font-family:var(--b);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--ink-soft)}
.give-talk{text-align:center;margin-top:20px;color:var(--ink-soft);font-size:.95rem}
.give-talk a{color:var(--blue);font-weight:700}

/* =========================================================================
   Contact fields with more life — a soft tint + an icon on each field + a lively
   focus (blue glow and a little lift), so the form isn't stark white and soulless.
   ========================================================================= */
.cform input,.cform textarea{background-color:#FAFCFF}
.cform #name,.cform #email,.cform #subject{padding-left:44px;background-repeat:no-repeat;background-position:15px center;background-size:18px 18px}
.cform #message{padding-left:44px;background-repeat:no-repeat;background-position:15px 15px;background-size:18px 18px}
.cform #name{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238f9bc6'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm-8 9c0-3.3 3.6-6 8-6s8 2.7 8 6v1H4v-1Z'/%3E%3C/svg%3E")}
.cform #email{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238f9bc6'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm9 8L21 7.4V7H3v.4L12 13Zm0 2.3L3 9.7V17h18V9.7l-9 5.6Z'/%3E%3C/svg%3E")}
.cform #subject{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238f9bc6'%3E%3Cpath d='M20.6 11.4 12.4 3.2A2 2 0 0 0 11 2.6H5a2 2 0 0 0-2 2v6a2 2 0 0 0 .6 1.4l8.2 8.2a2 2 0 0 0 2.8 0l6-6a2 2 0 0 0 0-2.8ZM7 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E")}
.cform #message{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238f9bc6'%3E%3Cpath d='M4 3h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H9l-5 4V4a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E")}
.cform input:focus,.cform textarea:focus{border-color:var(--blue);background-color:#fff;box-shadow:0 0 0 4px var(--blue-100),0 10px 24px rgba(30,53,127,.14);transform:translateY(-2px)}

/* =========================================================================
   Livelier boxes — subtle, meaningful COLOUR so nothing reads as flat/bland
   (brand palette only). Highlighted hero word stays legible on the blue hero.
   ========================================================================= */
/* "Europa" (and any highlighted word) readable on the dark blue page hero */
.pagehero h1 .hl{color:#fff}
.pagehero h1 .hl::before{height:.34em;opacity:.92}
/* opportunity cards: warm tint = apply, cool tint = infopack, bolder accent + lift */
.giv-link{border-left-width:4px;background:linear-gradient(160deg,#fff 0%,#F5F7FE 100%)}
.giv-link.giv-form{border-left:4px solid var(--gold);background:linear-gradient(160deg,#fff 52%,#FFF5D6 100%)}
.giv-link.giv-doc{border-left:4px solid var(--blue);background:linear-gradient(160deg,#fff 52%,#E8EEFC 100%)}
.giv-link:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(19,36,86,.16)}
.giv-link.giv-form:hover{border-color:var(--gold)}
.giv-link.giv-doc:hover{border-color:var(--blue)}
/* project & listing cards: a soft tint keyed to the role (blue = partner, gold = coordinator) */
.pc,.subcard{background:linear-gradient(165deg,#fff 0%,#F4F7FD 100%)}
.projcard.rp,.acard.rp{background:linear-gradient(165deg,#fff 0%,#EDF2FD 100%)}
.projcard.rc,.acard.rc{background:linear-gradient(165deg,#fff 0%,#FFFAE8 100%)}

/* =========================================================================
   PARTICIPAR / GET INVOLVED — "The Departures route".
   One gold route line threads a dark aurora HERO → the OPEN CALLS (stops printed on
   paper) → the DISCOVER destinations. Bold + kinetic up top, disciplined ink-on-paper
   for the working list; gold rationed to the star nodes + the single APPLY pill.
   ========================================================================= */
/* ---- HERO: the only dark field on the page ---- */
.phero{position:relative;overflow:hidden;background:#101a3c;color:#fff;padding:clamp(54px,7vw,96px) 0 clamp(60px,8vw,104px)}
.phero .aura{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 12% 0%,#2C46A6 0%,transparent 52%),
    radial-gradient(130% 130% at 92% 110%,#0A1024 0%,transparent 55%),
    linear-gradient(160deg,#1E357F 0%,#152049 55%,#101a3c 100%)}
.phero .stars{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1.6px 1.6px at 15% 22%,rgba(242,206,0,.55),transparent),
    radial-gradient(1.4px 1.4px at 68% 13%,rgba(255,255,255,.4),transparent),
    radial-gradient(1.9px 1.9px at 83% 40%,rgba(242,206,0,.5),transparent),
    radial-gradient(1.3px 1.3px at 32% 60%,rgba(242,206,0,.4),transparent),
    radial-gradient(1.5px 1.5px at 54% 84%,rgba(255,255,255,.32),transparent),
    radial-gradient(1.7px 1.7px at 90% 74%,rgba(242,206,0,.42),transparent),
    radial-gradient(1.3px 1.3px at 6% 80%,rgba(242,206,0,.4),transparent),
    radial-gradient(1.4px 1.4px at 44% 34%,rgba(255,255,255,.28),transparent)}
.phero .wrap{position:relative;z-index:1}
.phero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(30px,5vw,60px);align-items:center}
@media(max-width:860px){.phero-grid{grid-template-columns:1fr;gap:34px}}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.phero-eye{color:var(--gold);font-weight:600;letter-spacing:.2em;font-size:.7rem;text-transform:uppercase}
.phero h1{font-family:var(--d);font-weight:800;letter-spacing:-.035em;line-height:1.02;color:#fff;font-size:clamp(2.5rem,1.9rem + 4.6vw,5.2rem);margin:.3em 0 .46em;text-wrap:balance}
.phero h1 .brk{white-space:nowrap;position:relative;display:inline-block}
.phero h1 .brk::before{content:"";position:absolute;left:-.05em;right:-.05em;bottom:.07em;height:.32em;background:var(--gold);z-index:-1;transform:rotate(-1.8deg);border-radius:3px}
.phero-sub{color:#E2E6F2;font-size:clamp(1.02rem,1rem + .35vw,1.2rem);max-width:44ch;margin-bottom:1.5em}
.phero-meta{display:flex;align-items:center;gap:18px 22px;flex-wrap:wrap}
.phero-count{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.phero-count b{color:var(--gold);font-size:1.1rem;font-family:var(--d)}
.phero-here{display:inline-flex;align-items:center;gap:9px;margin-top:24px}
.phero-here .star{width:24px;height:24px;flex:none;animation:pulseStar 2.6s var(--ease) infinite}
.phero-here span{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58)}
@keyframes pulseStar{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(242,206,0,0))}50%{transform:scale(1.2);filter:drop-shadow(0 0 12px rgba(242,206,0,.65))}}
.phero-media{position:relative}
.phero-media .frame{border-radius:22px;overflow:hidden;transform:rotate(2deg);box-shadow:0 30px 60px rgba(0,0,0,.42);border:5px solid #fff;position:relative;z-index:2}
.phero-media .frame img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.phero-media::before{content:"";position:absolute;inset:0;border-radius:22px;background:var(--gold);transform:rotate(-3.2deg) scale(.98);z-index:1}
.phero-cap{position:absolute;z-index:3;bottom:-12px;right:14px;background:#fff;color:var(--blue);border-radius:10px;padding:6px 12px;font-size:.6rem;letter-spacing:.12em;box-shadow:0 12px 26px rgba(0,0,0,.26)}

/* ---- OPEN CALLS: stops printed on paper (route line + gold star nodes) ---- */
.calls{padding:clamp(56px,8vw,104px) 0}
.route{position:relative;margin-top:26px}
.route-list{list-style:none;margin:0;padding:0}
.route-line{position:absolute;left:17px;top:14px;bottom:22px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--blue) 0%,var(--blue) 60%,var(--gold) 100%);
  transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ease) .15s}
.route-line.drawn{transform:scaleY(1)}
.stop{position:relative}
.stop > a{display:grid;grid-template-columns:34px 1fr;column-gap:16px;row-gap:13px;align-items:start;
  padding:22px 4px 22px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .25s var(--ease)}
.stop:first-child > a{border-top:1px solid var(--line)}
.stop > a:hover{transform:translateX(3px)}
.stop-node{grid-column:1;grid-row:1;display:flex;justify-content:center;position:relative;z-index:1}
.stopstar{width:26px;height:26px;transition:transform .45s var(--spring);filter:drop-shadow(0 2px 6px rgba(242,206,0,.4))}
.stop > a:hover .stopstar{transform:rotate(72deg) scale(1.14)}
.stop-main{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:14px;min-width:0}
.stop-title{font-family:var(--d);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.26rem,1.02rem + 1.2vw,1.85rem);line-height:1.14;color:var(--ink);position:relative;width:fit-content;max-width:100%}
.stop-title::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:var(--gold);transition:right .4s var(--ease)}
.stop > a:hover .stop-title::after{right:0}
.stop-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:.45em;font-family:var(--b);font-weight:700;font-size:.82rem;padding:.62em 1.2em;border-radius:999px;transition:transform .25s var(--spring),box-shadow .25s,border-color .2s,color .2s}
.stop-badge.apply{background:var(--gold);color:var(--ink);box-shadow:0 8px 20px rgba(242,206,0,.34)}
.stop-badge.info{background:transparent;color:var(--ink);border:1.5px solid rgba(20,22,28,.26)}
.stop > a:hover .stop-badge.apply{transform:translateY(-2px);box-shadow:0 12px 26px rgba(242,206,0,.46)}
.stop > a:hover .stop-badge.info{border-color:var(--blue);color:var(--blue)}
.stop-badge .ar{transition:transform .25s var(--spring)}
.stop > a:hover .stop-badge.apply .ar{transform:translateX(4px)}
.stop > a:hover .stop-badge.info .ar{transform:translateY(3px)}
.calls-foot{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.calls-foot .give-social-lbl{color:var(--ink-soft)}
.calls-contact{color:var(--ink-soft);font-size:.95rem}
.calls-contact a{color:var(--blue);font-weight:700}
@media(max-width:560px){
  .stop > a{grid-template-columns:26px 1fr;column-gap:12px}
  .route-line{left:13px}
  .stopstar{width:22px;height:22px}
  .stop-badge{width:100%;justify-content:center}
}
/* ---- DISCOVER: the final stops, as the site's own colour-block cards ---- */
.discover .cblock{min-height:210px}
.discover .cblock .more{margin-top:6px}
/* Linktree-style list inside a soft "box" (with a header + gold corner glow for
   personality) + socials below. The box is tinted so the WHITE cards pop. */
.plist{position:relative;z-index:3;margin-top:clamp(-92px,-9vw,-60px);padding:0 0 clamp(30px,4.5vw,54px)}
.plist-box{max-width:600px;margin:0 auto;position:relative;overflow:hidden;
  background:linear-gradient(165deg,#EAEEF8 0%,#F2F5FC 100%);
  border:1px solid var(--blue-100);border-radius:24px;padding:clamp(20px,3.2vw,30px);
  box-shadow:0 3px 8px rgba(19,36,86,.09),0 22px 50px rgba(19,36,86,.15)}
.plist-box::after{content:"";position:absolute;top:-16px;right:-14px;width:74px;height:74px;pointer-events:none;
  background:radial-gradient(circle,rgba(242,206,0,.18),transparent 68%)}
.plist-head{display:flex;align-items:center;gap:.5em;font-family:var(--b);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--blue);margin-bottom:16px}
.plist-head .star{width:15px;height:15px;flex:none}
.plist-head b{color:var(--gold-700)}
.plist-social{max-width:600px;margin:26px auto 0;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
/* refined: clean white cards with ONE pop of colour — a pill tag (gold = apply,
   blue = infopack). Lively but tasteful; never "too much". */
.plist .giv-link{background:#fff;border:1px solid rgba(30,53,127,.1);border-radius:15px;padding:15px 16px 15px 18px;box-shadow:0 2px 6px rgba(19,36,86,.06),0 9px 20px rgba(19,36,86,.09);transition:transform .22s var(--spring),box-shadow .22s,border-color .2s}
.plist .giv-link:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(19,36,86,.08),0 18px 38px rgba(19,36,86,.15)}
.plist .giv-link .giv-link-t{color:var(--ink);font-weight:600}
.plist .giv-link .giv-link-tag{padding:.52em 1.05em;border-radius:999px;font-size:.7rem}
.plist .giv-link.giv-form{border-color:rgba(242,206,0,.42)}
.plist .giv-link.giv-form .giv-link-tag{background:var(--gold);color:var(--ink)}
.plist .giv-link.giv-form:hover{border-color:var(--gold)}
.plist .giv-link.giv-doc{border-color:rgba(30,53,127,.16)}
.plist .giv-link.giv-doc .giv-link-tag{background:var(--blue-100);color:var(--blue)}
.plist .giv-link.giv-doc:hover{border-color:var(--blue)}
.plist .giv-link .ar{transition:transform .25s var(--spring)}
.plist .giv-link:hover .ar{transform:translateX(3px)}

/* Discover — IAFA photo cards in the SITE'S OWN card language: a clean photo on top,
   content in its own space below, a gold top-bar + lift on hover. No dark scrim, no text
   over faces, no colour filter — the photos are good, so let them be seen. */
.disc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:820px){.disc-grid{grid-template-columns:1fr;gap:18px}}
.disc-card{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;isolation:isolate;
  box-shadow:0 2px 6px rgba(19,36,86,.05),0 12px 28px rgba(19,36,86,.08);
  transition:transform .38s var(--spring),box-shadow .38s var(--ease)}
.disc-card:hover{transform:translateY(-8px);box-shadow:0 22px 46px rgba(19,36,86,.16)}
.disc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:3;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.disc-card:hover::before{transform:scaleX(1)}
.disc-ph{aspect-ratio:16/11;background-size:cover;background-position:center;transition:transform .6s var(--ease)}
.disc-card:hover .disc-ph{transform:scale(1.06)}
.disc-bd{padding:17px 20px 20px;display:flex;flex-direction:column}
.disc-kick{display:inline-flex;align-items:center;gap:.42em;font-family:var(--b);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:.62rem;color:var(--blue);margin-bottom:7px}
.disc-kick .star{width:11px;height:11px;flex:none}
.disc-bd b{display:block;font-family:var(--d);font-weight:800;color:var(--ink);font-size:1.3rem;letter-spacing:-.02em;line-height:1.12}
.disc-bd .more{display:inline-flex;align-items:center;gap:.4em;color:var(--blue);font-family:var(--b);font-weight:700;font-size:.9rem;margin-top:10px}
.disc-bd .more .ar{transition:transform .25s var(--spring)}
.disc-card:hover .disc-bd .more .ar{transform:translateX(5px)}
/* a floating "go" badge sits on the photo/content seam — fills gold on hover; title warms */
.disc-bd{position:relative}
.disc-go{position:absolute;top:0;right:16px;transform:translateY(-50%);z-index:4;
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--blue);border:1px solid var(--line);box-shadow:0 6px 16px rgba(19,36,86,.16);
  transition:transform .3s var(--spring),background .25s,color .25s,box-shadow .25s}
.disc-go svg{transition:transform .3s var(--spring)}
.disc-card:hover .disc-go{background:var(--gold);color:var(--ink);transform:translateY(-50%) scale(1.1);box-shadow:0 10px 22px rgba(242,206,0,.42)}
.disc-card:hover .disc-go svg{transform:translateX(2px)}
.disc-bd b{transition:color .2s}
.disc-card:hover .disc-bd b{color:var(--blue)}
/* participar hero — a touch of energy: the gold star twinkles + a brighter gold marker,
   and extra bottom room so the opportunities box floats up and overlaps the blue. */
.pagehero-give{padding-bottom:clamp(94px,11vw,132px)}
.pagehero::after{animation:tw 4.5s var(--ease) infinite}
.pagehero-give h1 .hl::before{height:.4em;opacity:1;transform:rotate(-2.2deg)}
/* staged entrance: the opportunity cards rise in, one after another */
@keyframes giveRise{from{opacity:0;transform:translateY(14px) translateX(-8px) scale(.985)}to{opacity:1;transform:none}}
.plist .giv-link{animation:giveRise .55s var(--spring) both}
.plist .giv-link:nth-child(2){animation-delay:.07s}
.plist .giv-link:nth-child(3){animation-delay:.14s}
.plist .giv-link:nth-child(4){animation-delay:.21s}
.plist .giv-link:nth-child(5){animation-delay:.28s}
.plist .giv-link:nth-child(6){animation-delay:.35s}
.plist .giv-link:nth-child(7){animation-delay:.42s}
.plist .giv-link:nth-child(8){animation-delay:.49s}

/* =========================================================================
   PARTICIPAR — the "alive" pass: small, deliberate details (brand palette only).
   A twinkling star-field in the hero (EU + IAFA star motif), a gold marker that
   draws itself under "Europa", a warm glow behind the floating box, a hairline in
   the box header, livelier card / social / photo-card hovers.
   ========================================================================= */
/* ---- HERO: a slow-drifting aurora + a constellation that shimmers in two phases ----
   NOTE: applied to EVERY page hero (.pagehero) — the decorative spans are injected by
   main.js on any page that lacks them, so all pages share this rich starry header. ---- */
.pagehero .aura{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(44% 58% at 15% 16%,rgba(52,84,182,.72),transparent 62%),
    radial-gradient(42% 54% at 90% 30%,rgba(242,206,0,.16),transparent 60%),
    radial-gradient(54% 46% at 50% 118%,rgba(242,206,0,.18),transparent 72%);
  animation:auraDrift 13s ease-in-out infinite alternate}
@keyframes auraDrift{from{transform:translate3d(-3%,-2%,0) scale(1.03)}to{transform:translate3d(4%,3%,0) scale(1.12)}}
/* the big brand star gently floats & rocks — visible, ambient life (no hover needed) */
.pagehero .star{animation:starfloat 12s ease-in-out infinite}
@keyframes starfloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-18px) rotate(4deg)}}
.pagehero .gstars{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.pagehero .gstars::before,.pagehero .gstars::after{content:"";position:absolute;inset:0}
.pagehero .gstars::before{animation:twk 5s var(--ease) infinite;
  background:
    radial-gradient(2.1px 2.1px at 14% 30%,rgba(242,206,0,.9),transparent),
    radial-gradient(1.7px 1.7px at 67% 18%,rgba(255,255,255,.85),transparent),
    radial-gradient(2px 2px at 84% 46%,rgba(242,206,0,.75),transparent),
    radial-gradient(1.6px 1.6px at 34% 63%,rgba(255,255,255,.6),transparent),
    radial-gradient(2.2px 2.2px at 52% 9%,rgba(242,206,0,.65),transparent),
    radial-gradient(1.5px 1.5px at 6% 12%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.8px 1.8px at 42% 78%,rgba(242,206,0,.55),transparent)}
.pagehero .gstars::after{animation:twk 6.6s var(--ease) 1.4s infinite;
  background:
    radial-gradient(1.7px 1.7px at 24% 14%,rgba(255,255,255,.75),transparent),
    radial-gradient(2px 2px at 76% 62%,rgba(242,206,0,.75),transparent),
    radial-gradient(1.6px 1.6px at 45% 40%,rgba(255,255,255,.55),transparent),
    radial-gradient(2.1px 2.1px at 90% 24%,rgba(242,206,0,.7),transparent),
    radial-gradient(1.6px 1.6px at 8% 52%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.8px 1.8px at 60% 82%,rgba(255,255,255,.45),transparent),
    radial-gradient(2px 2px at 30% 24%,rgba(242,206,0,.6),transparent)}
@keyframes twk{0%,100%{opacity:.5}50%{opacity:1}}
/* the little eyebrow star breathes; "Europa" underline sweeps in on load */
.pagehero .eyebrow .star{animation:pulseStar 3.2s var(--ease) infinite}
.pagehero-give p{max-width:47ch}
.pagehero-give h1 .hl::before{transform-origin:left center;animation:hlDraw .7s var(--ease) .35s both}
@keyframes hlDraw{from{transform:rotate(-2.2deg) scaleX(0)}to{transform:rotate(-2.2deg) scaleX(1)}}

/* ---- BOX: a cool depth glow to balance the gold one + a fading header rule ---- */
.plist-box::before{content:"";position:absolute;bottom:-22px;left:-18px;width:96px;height:96px;pointer-events:none;
  background:radial-gradient(circle,rgba(30,53,127,.11),transparent 70%)}
.plist-head{margin-bottom:15px;padding-bottom:13px;border-bottom:1.5px solid transparent;
  border-image:linear-gradient(90deg,rgba(30,53,127,.3),rgba(30,53,127,.03)) 1}

/* ---- LIST CARDS: a leading icon disc (colour + shape), title warms, pill lifts ---- */
/* icon disc applies in BOTH the page list and the header modal (same markup) */
.giv-ico{flex:none;width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--blue);background:var(--blue-100);transition:transform .24s var(--spring),background .2s,box-shadow .2s}
.giv-link.giv-form .giv-ico{color:var(--gold-700);background:rgba(242,206,0,.2)}
.giv-link-tag{margin-left:auto}
.giv-link:hover .giv-ico{transform:scale(1.09) rotate(-4deg)}
.giv-link.giv-form:hover .giv-ico{background:rgba(242,206,0,.32);box-shadow:0 4px 12px rgba(242,206,0,.32)}
.giv-link.giv-doc:hover .giv-ico{background:#D3DEF7;box-shadow:0 4px 12px rgba(30,53,127,.18)}
.plist .giv-link .giv-link-t{transition:color .2s}
.plist .giv-link:hover .giv-link-t{color:var(--blue)}
.plist .giv-link .giv-link-tag{transition:transform .22s var(--spring),box-shadow .22s}
.plist .giv-link.giv-form:hover .giv-link-tag{transform:translateY(-1px);box-shadow:0 6px 14px rgba(242,206,0,.42)}
.plist .giv-link.giv-doc:hover .giv-link-tag{transform:translateY(-1px);box-shadow:0 6px 14px rgba(30,53,127,.24)}

/* ---- SOCIALS: fill gold with an ink icon + lift (the brand's celebratory pop) ---- */
.plist-social .giv-social a{width:44px;height:44px;transition:transform .24s var(--spring),background .24s,color .24s,box-shadow .24s}
.plist-social .giv-social a:hover{background:var(--gold);color:var(--ink);transform:translateY(-4px);box-shadow:0 10px 22px rgba(242,206,0,.4)}

/* discover section subtitle */
.discover .sec-head p{color:var(--ink-soft);font-size:1.05rem;margin-top:.5em}

/* ---- a gentle "talk to us" nudge closes the box: invites anyone without a current fit ---- */
.plist-talk{margin-top:16px;padding-top:15px;border-top:1px solid rgba(30,53,127,.1);text-align:center;font-size:.9rem;color:var(--ink-soft)}
.plist-talk a{color:var(--blue);font-weight:700;white-space:nowrap}
.plist-talk a .ar{display:inline-block;transition:transform .25s var(--spring)}
.plist-talk a:hover .ar{transform:translateX(4px)}

/* ---- SOCIAL LABEL: flanked by two fading hairlines so it reads as a divider ---- */
.plist-social .give-social-lbl{display:inline-flex;align-items:center;gap:14px}
.plist-social .give-social-lbl::before,.plist-social .give-social-lbl::after{content:"";height:1px;width:36px}
.plist-social .give-social-lbl::before{background:linear-gradient(90deg,transparent,rgba(30,53,127,.28))}
.plist-social .give-social-lbl::after{background:linear-gradient(90deg,rgba(30,53,127,.28),transparent)}

/* =========================================================================
   ALWAYS-ON LIFE — motion that plays without a mouse, so the page feels alive on
   phones too (where our visitors are). Slow + staggered = lively, never flashy.
   ========================================================================= */
/* a soft highlight sweeps the gold APPLY pills in a staggered wave */
.plist .giv-link.giv-form .giv-link-tag{position:relative;overflow:hidden}
.plist .giv-link.giv-form .giv-link-tag::before{content:"";position:absolute;top:0;bottom:0;left:-135%;width:52%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);
  animation:pillshine 5.5s ease-in-out infinite}
@keyframes pillshine{0%,70%{left:-135%}88%,100%{left:180%}}
.plist .giv-link:nth-child(3n+2) .giv-link-tag::before{animation-delay:1.8s}
.plist .giv-link:nth-child(3n) .giv-link-tag::before{animation-delay:3.6s}
/* the gold apply-icon disc breathes a soft ring of light */
.plist .giv-link.giv-form .giv-ico{animation:icoGlow 3.6s ease-in-out infinite}
@keyframes icoGlow{0%,100%{box-shadow:0 0 0 0 rgba(242,206,0,0)}50%{box-shadow:0 0 0 5px rgba(242,206,0,.16)}}
/* the discover "go" badge gently breathes, so the photo cards feel alive without hover */
.disc-go{animation:goBreath 3.2s ease-in-out infinite}
@keyframes goBreath{0%,100%{box-shadow:0 6px 16px rgba(19,36,86,.16)}50%{box-shadow:0 9px 24px rgba(19,36,86,.28)}}
.disc-card:hover .disc-go{animation-play-state:paused}

/* dynamic entrance: the hero rises in, piece by piece, the moment the page loads */
@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.pagehero .eyebrow{animation:heroRise .7s var(--ease) .05s both}
.pagehero h1{animation:heroRise .8s var(--ease) .18s both}
.pagehero .wrap p:not(.eyebrow){animation:heroRise .75s var(--ease) .32s both}
/* occasional shooting stars streak across the hero — on-brand (stars) + dynamic, never busy */
.pagehero .shoot{position:absolute;z-index:1;width:3px;height:3px;border-radius:50%;pointer-events:none;opacity:0;
  background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.7),0 0 12px 2px rgba(242,206,0,.45)}
.pagehero .shoot::after{content:"";position:absolute;top:50%;left:2px;width:72px;height:1.5px;transform:translateY(-50%) rotate(-30deg);transform-origin:left center;
  background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,0))}
.pagehero .shoot.s1{top:15%;left:58%;animation:shoot 8s cubic-bezier(.3,.5,.5,1) infinite 2.2s}
.pagehero .shoot.s2{top:30%;left:82%;animation:shoot 11s cubic-bezier(.3,.5,.5,1) infinite 6.5s}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) scale(.7)}4%{opacity:1}16%{opacity:1}24%{opacity:0}100%{opacity:0;transform:translate(-260px,150px) scale(1)}}

/* =========================================================================
   PARTICIPAR — page background: the flat off-white felt empty next to the rich hero.
   A soft brand-tinted gradient + slow drifting ambient glows + faint star dust give
   the light area depth & life. Scoped to this page (body.page-give); site unchanged.
   ========================================================================= */
body.page-give{background:linear-gradient(180deg,#E4EBF8 0%,#EDF1FB 8%,#F6F7FB 26%,var(--paper) 52%,var(--paper) 100%)}
body.page-give::before{content:"";position:fixed;inset:-12%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(48% 42% at 6% 14%,rgba(30,53,127,.14),transparent 60%),
    radial-gradient(44% 42% at 98% 44%,rgba(242,206,0,.15),transparent 58%),
    radial-gradient(52% 48% at 58% 102%,rgba(30,53,127,.11),transparent 62%);
  animation:bgDrift 22s ease-in-out infinite alternate}
@keyframes bgDrift{from{transform:translate3d(-2%,-1%,0) scale(1.03)}to{transform:translate3d(2.5%,2%,0) scale(1.08)}}

/* =========================================================================
   RICH "NIGHT-SKY" OPPORTUNITIES PANEL — the pale box read as basic. This makes the
   centrepiece a deep navy panel (cohesive with the hero, extending the star sky down)
   with the white cards glowing on it. The single biggest lift against "sem vida".
   ========================================================================= */
.plist-box{
  background:
    radial-gradient(120% 120% at 12% -12%,#2C46A6 0%,transparent 52%),
    radial-gradient(130% 120% at 96% 116%,#0A1226 0%,transparent 55%),
    linear-gradient(158deg,#21397F 0%,#17244E 55%,#111b3d 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 18px rgba(11,16,36,.28),0 30px 70px rgba(11,16,36,.44)}
/* a faint constellation twinkles inside the panel */
.plist-box::before{inset:0;top:0;left:0;right:auto;bottom:auto;width:auto;height:auto;
  background:
    radial-gradient(1.6px 1.6px at 18% 22%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.7px 1.7px at 72% 13%,rgba(242,206,0,.62),transparent),
    radial-gradient(1.4px 1.4px at 88% 56%,rgba(255,255,255,.45),transparent),
    radial-gradient(1.6px 1.6px at 32% 84%,rgba(242,206,0,.52),transparent),
    radial-gradient(1.4px 1.4px at 54% 44%,rgba(255,255,255,.38),transparent),
    radial-gradient(1.5px 1.5px at 8% 60%,rgba(242,206,0,.42),transparent);
  animation:twk 6.5s var(--ease) infinite}
.plist-box::after{width:130px;height:130px;top:-26px;right:-22px;
  background:radial-gradient(circle,rgba(242,206,0,.32),transparent 66%)}
.plist-head{color:rgba(255,255,255,.92);border-image:linear-gradient(90deg,rgba(255,255,255,.4),rgba(255,255,255,.04)) 1}
.plist-head b{color:var(--gold)}
.plist .giv-link{box-shadow:0 2px 8px rgba(6,10,26,.22),0 14px 32px rgba(6,10,26,.32)}
.plist .giv-link:hover{box-shadow:0 10px 20px rgba(6,10,26,.3),0 24px 46px rgba(6,10,26,.44)}
.plist-talk{color:rgba(255,255,255,.75);border-top-color:rgba(255,255,255,.16)}
.plist-talk a{color:var(--gold)}

/* floating brand stars fill the empty side gutters (star theme: IAFA + EU). Crisp OUTLINES
   on the big ones + solid accents = clearly visible on white, not blended, not clip-art. */
.side-deco{position:absolute;inset:0;z-index:-1;pointer-events:none}
.side-deco .sd{position:absolute;overflow:visible;animation:sdFloat 8s ease-in-out infinite}
.side-deco .sd polygon{vector-effect:non-scaling-stroke;stroke-linejoin:round}
.sd.s-a{left:6%;top:22%;width:106px;height:106px;animation-duration:9s;filter:drop-shadow(0 10px 18px rgba(30,53,127,.16))}
.sd.s-a polygon{fill:none;stroke:rgba(30,53,127,.5);stroke-width:2.5}
.sd.s-b{left:13.5%;bottom:15%;width:52px;height:52px;animation-duration:7s;animation-delay:.7s}
.sd.s-b polygon{fill:rgba(242,206,0,.85);stroke:none}
.sd.s-c{left:2.5%;bottom:34%;width:36px;height:36px;animation-duration:6s;animation-delay:.3s}
.sd.s-c polygon{fill:none;stroke:rgba(242,206,0,.8);stroke-width:3}
.sd.s-d{right:5.5%;top:28%;width:98px;height:98px;animation-duration:8.5s;animation-delay:.4s;filter:drop-shadow(0 10px 18px rgba(242,206,0,.18))}
.sd.s-d polygon{fill:none;stroke:rgba(242,206,0,.62);stroke-width:2.5}
.sd.s-e{right:13%;bottom:12%;width:50px;height:50px;animation-duration:10s;animation-delay:1.1s}
.sd.s-e polygon{fill:rgba(30,53,127,.42);stroke:none}
.sd.s-f{right:3%;top:12%;width:34px;height:34px;animation-duration:6.5s;animation-delay:.9s}
.sd.s-f polygon{fill:rgba(242,206,0,.82);stroke:none}
@keyframes sdFloat{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-16px) rotate(7deg)}}
@media(max-width:900px){.side-deco{display:none}}

/* =========================================================================
   Reusable "night sky" decoration for the site's rich (dark/colour) boxes — a twinkling
   constellation (CSS ::before) + occasional shooting stars (<i> injected by main.js).
   Applied to the CTA callouts and the dark programme blocks. Content is lifted above.
   ========================================================================= */
.fx-shoot{position:absolute;z-index:0;width:3px;height:3px;border-radius:50%;pointer-events:none;opacity:0;
  background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.7),0 0 12px 2px rgba(242,206,0,.5)}
.fx-shoot::after{content:"";position:absolute;top:50%;left:2px;width:60px;height:1.5px;transform:translateY(-50%) rotate(-28deg);transform-origin:left center;
  background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,0))}
.fx-shoot.s1{top:20%;left:58%;animation:fxShoot 8s cubic-bezier(.3,.5,.5,1) infinite 2s}
.fx-shoot.s2{top:50%;left:80%;animation:fxShoot 10.5s cubic-bezier(.3,.5,.5,1) infinite 6s}
@keyframes fxShoot{0%{opacity:0;transform:translate(0,0) scale(.7)}5%{opacity:1}18%{opacity:1}26%{opacity:0}100%{opacity:0;transform:translate(-160px,92px) scale(1)}}

/* CTA callouts — constellation + a gently floating watermark star, content above */
.callout::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1.7px 1.7px at 16% 30%,rgba(242,206,0,.55),transparent),
    radial-gradient(1.6px 1.6px at 70% 18%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.6px 1.6px at 88% 60%,rgba(242,206,0,.5),transparent),
    radial-gradient(1.5px 1.5px at 40% 72%,rgba(255,255,255,.4),transparent),
    radial-gradient(1.6px 1.6px at 55% 42%,rgba(242,206,0,.44),transparent),
    radial-gradient(1.5px 1.5px at 10% 60%,rgba(255,255,255,.36),transparent);
  animation:twk 6.5s var(--ease) infinite}
.callout .star{animation:starfloat 13s ease-in-out infinite}
.callout > *:not(.star):not(.fx-shoot){position:relative;z-index:2}

/* dark programme blocks (blue / ink only — never the gold one) */
.cblock.b1::before,.cblock.b2::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1.6px 1.6px at 22% 28%,rgba(242,206,0,.5),transparent),
    radial-gradient(1.5px 1.5px at 72% 22%,rgba(255,255,255,.45),transparent),
    radial-gradient(1.5px 1.5px at 84% 60%,rgba(242,206,0,.45),transparent),
    radial-gradient(1.4px 1.4px at 44% 74%,rgba(255,255,255,.35),transparent);
  animation:twk 6s var(--ease) infinite}
.cblock.b1 > *:not(.fx-shoot):not(.big),.cblock.b2 > *:not(.fx-shoot):not(.big){position:relative;z-index:1}

/* GOLD boxes (.cblock.b3) — inverted night sky: white stars vanish on gold, so use INK
   stars + an ink shooting star (flat gold + constellation, consistent with the dark tiles). */
.cblock.b3::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1.8px 1.8px at 22% 28%,rgba(20,22,28,.5),transparent),
    radial-gradient(1.7px 1.7px at 72% 20%,rgba(20,22,28,.42),transparent),
    radial-gradient(1.7px 1.7px at 86% 58%,rgba(20,22,28,.46),transparent),
    radial-gradient(1.6px 1.6px at 42% 74%,rgba(20,22,28,.34),transparent),
    radial-gradient(1.7px 1.7px at 55% 44%,rgba(20,22,28,.4),transparent),
    radial-gradient(1.6px 1.6px at 12% 60%,rgba(20,22,28,.3),transparent);
  animation:twk 6s var(--ease) infinite}
.cblock.b3 > *:not(.fx-shoot):not(.big){position:relative;z-index:1}
.cblock.b3 .st{animation:stBob 5s ease-in-out infinite}
@keyframes stBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(9deg)}}
/* ink shooting-star variant (for gold backgrounds) */
.fx-shoot.fx-ink{background:var(--ink);box-shadow:0 0 5px 1px rgba(20,22,28,.35)}
.fx-shoot.fx-ink::after{background:linear-gradient(90deg,rgba(20,22,28,.72),rgba(20,22,28,0))}
/* a third shooting-star position (for wide bands like the stats strip) */
.fx-shoot.s3{top:34%;left:22%;animation:fxShoot 9s cubic-bezier(.3,.5,.5,1) infinite 3.8s}

/* STATS band — the new "night sky" face: a wide twinkling constellation + shooting stars
   over the navy gradient it already has. Numbers stay above (gold / white). */
.stats{position:relative;overflow:hidden}
.stats > .wrap{position:relative;z-index:1}
.stats::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1.7px 1.7px at 8% 30%,rgba(242,206,0,.6),transparent),
    radial-gradient(1.6px 1.6px at 21% 66%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.6px 1.6px at 33% 24%,rgba(242,206,0,.5),transparent),
    radial-gradient(1.5px 1.5px at 46% 72%,rgba(255,255,255,.42),transparent),
    radial-gradient(1.7px 1.7px at 59% 28%,rgba(242,206,0,.55),transparent),
    radial-gradient(1.5px 1.5px at 71% 64%,rgba(255,255,255,.4),transparent),
    radial-gradient(1.6px 1.6px at 84% 26%,rgba(242,206,0,.5),transparent),
    radial-gradient(1.5px 1.5px at 93% 70%,rgba(255,255,255,.44),transparent),
    radial-gradient(1.4px 1.4px at 15% 48%,rgba(255,255,255,.3),transparent),
    radial-gradient(1.4px 1.4px at 66% 48%,rgba(242,206,0,.4),transparent);
  animation:twk 6.5s var(--ease) infinite}