/* character.html only, loaded last (replaces character-magenta.css on this page):
the sky photo behind the whole page, the hero with the motto and the six fields of work,
the values section with the 3D characters, and the magenta contact box. */
/* ---------- sky everywhere: one fixed photo behind all sections (home.js lets it drift while you scroll) ---------- */
body{background:#CFE9FA}
.sky-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sky-bg i{position:absolute;left:0;right:0;top:0;height:150vh;background:#BFE3F8 url(assets/sky.jpg) center/cover no-repeat;will-change:transform}
.hero,.hero-sticky{background:none}
.dk,.dk-stage{background:transparent}
.dk-head p.dk-sub,.dk-head .dk-k{color:#3E4550}
.dk .glow{opacity:.14}
.below{background:transparent}
.below .axes{background:transparent}
.below .footer{border-radius:40px 40px 0 0}
@media (max-width:760px){.below .footer{border-radius:26px 26px 0 0}}
/* text for screen readers and search engines only */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* ---------- hero (removed from the page on 2026-10-05; character-v7.html still has it) ---------- */
.hero{height:700vh}
@media (max-width:760px){.hero{height:520vh}}
#forms{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}
.hero .lede{color:var(--ink-2);font-weight:600}
.hero .btn-ghost{background:rgba(255,255,255,.7)}
.hero .hero-meta{transition:opacity .45s var(--ease)}
.hero.is-intro .hero-meta{opacity:0}
.headline .motto,.headline .axis{display:block}
.headline .motto[hidden],.headline .axis[hidden]{display:none}
.headline .motto .word{display:block;color:var(--c)}
.headline .mask{padding-left:.14em;margin-left:-.14em} /* room for the accent of a capital (Έρευνα) */
.headline .motto .mask{padding:.08em 0 .14em .14em;margin:-.08em 0 -.14em -.14em}
.headline .axis .line2{text-wrap:balance}
/* the motto is set in one size and one weight; only the colour of "Καινοτομία" and "Δράση" differs */
.headline .motto{font-size:.7em;line-height:1.02}
.headline .motto .word,.headline .motto .line2{display:block;font-size:1em;font-weight:800;letter-spacing:-.05em;margin-top:0;white-space:nowrap} /* home.js shrinks the motto if a line is too wide */
@media (max-width:760px){.headline .motto{font-size:.86em}}
@media (max-width:760px) and (max-height:700px){.hero .tag{display:none}} /* short phones: leave the room to the 3D element */
@media (min-width:761px){
.hero .hero-copy{width:min(660px,46vw)}
.hero .headline{font-size:clamp(3rem,min(7vw,12.5vh),7rem)}
.hero .lede{font-size:clamp(1.05rem,1.45vw,1.35rem);max-width:36ch}
}
/* the motto arrives as soon as the page opens, one line after the other: first "Καινοτομία / για τους Νέους,",
a short breath, then "Δράση / για την Κοινωνία"; the sentence and the buttons follow once it is complete */
.motto .mw{animation:motto-rise 1s cubic-bezier(.16,1,.3,1) backwards}
.motto .mask:nth-child(1) .mw{animation-delay:.3s}
.motto .mask:nth-child(2) .mw{animation-delay:.8s}
.motto .mask:nth-child(3) .mw{animation-delay:1.65s}
.motto .mask:nth-child(4) .mw{animation-delay:2.15s}
.hero .tag{animation:hero-fade .9s var(--ease) backwards;animation-delay:.1s}
.hero .lede{animation:hero-fade .9s var(--ease) backwards;animation-delay:3s}
.hero .actions{animation:hero-fade .9s var(--ease) backwards;animation-delay:3.25s}
.hero .scroll-cue{animation:hero-fade .9s var(--ease) backwards;animation-delay:3.6s}
@keyframes motto-rise{from{transform:translateY(118%) rotate(4deg)}}
@keyframes hero-fade{from{opacity:0;transform:translateY(18px)}}
/* ---------- values: a list of the seven values and the 3D character of the chosen one ---------- */
.below .vals{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center}
.below .vals-list{list-style:none;margin:0;padding:0}
.below .val{display:grid;grid-template-columns:3ch minmax(0,1fr);column-gap:16px;align-items:baseline;width:100%;padding:11px 0;margin:0;
background:none;border:0;border-top:1.5px solid rgba(20,20,20,.16);border-radius:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.below .vals-list li:last-child .val{border-bottom:1.5px solid rgba(20,20,20,.16)}
.below .val-n{font:600 .82rem var(--display);letter-spacing:.06em;color:var(--muted)}
.below .val-t{font:900 clamp(1.7rem,3.3vw,3rem)/1.02 var(--display);letter-spacing:-.045em;color:var(--ink);opacity:.34;
transition:opacity .35s,color .35s,transform .5s var(--ease);transform-origin:0 50%}
.below .val-d{grid-column:2;display:grid;grid-template-rows:0fr;opacity:0;color:var(--ink-2);font-size:1.02rem;font-weight:500;max-width:42ch;
transition:grid-template-rows .5s var(--ease),opacity .4s}
.below .val-d > span{overflow:hidden}
.below .val:hover .val-t{opacity:.7}
.below .val.is-on .val-t{opacity:1;color:var(--c);transform:translateX(8px)}
.below .val.is-on .val-d{grid-template-rows:1fr;opacity:1}
.below .val.is-on .val-d > span{padding-top:6px}
.below .val:focus-visible{outline:3px solid var(--c);outline-offset:4px;border-radius:8px}
.below .vals-stage{position:relative;height:min(76vh,680px);min-height:440px}
.below .vals-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:860px){
.below .vals{grid-template-columns:1fr;gap:8px}
.below .vals-stage{order:-1;height:46vh;min-height:320px}
.below .val{padding:9px 0}
.below .val-t{font-size:clamp(1.5rem,7vw,2rem)}
.below .val-d{font-size:.95rem}
}
/* ---------- contact box: the magenta of the "Ο αντίκτυπος του EXAGONO" box ---------- */
.below .cta{background:var(--magenta);color:#fff}
.below .cta h2{color:#fff}
.below .cta p,.below .cta .eyebrow.light{color:rgba(255,255,255,.92)}
.below .cta-blobs span:nth-child(1)::before{color:#fff}
.below .cta-blobs span:nth-child(1)::after{color:var(--yellow)}
.below .cta-blobs span:nth-child(2){background:rgba(255,255,255,.92)}
.below .cta .btn-white{background:#fff;color:var(--magenta);--edge:#8E1440}
.below .cta .btn-outline-light{border-color:#fff;color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.18)}
.below .cta .btn-outline-light:hover{background:rgba(255,255,255,.16)}
/* the cards are the first thing on the page now: a little more air under the menu on phones */
@media (max-width:809.98px){.dk-head{padding-top:96px}}
/* ---------- the moving titles (motto, then the six fields of work) sit on the cards section ---------- */
.dk-titles{max-width:600px}
.dk-titles .headline{margin:0 0 18px;font-size:clamp(2.6rem,5.2vw,4.9rem);font-weight:800;letter-spacing:-.055em;line-height:.92}
.dk-titles .lede{color:var(--ink-2);font-weight:600;font-size:clamp(1.02rem,1.35vw,1.25rem);max-width:34ch;min-height:3.1em;
animation:hero-fade .9s var(--ease) backwards;animation-delay:3s}
.dk-meta{display:flex;align-items:center;gap:16px;margin-top:14px;transition:opacity .45s var(--ease)}
.dk.is-intro .dk-meta{opacity:0}
.dk-meta .counter #w-count{font-size:1.7rem}
.dk-meta .counter .of{font-size:.85rem}
/* where the posts come from and how to turn them: a small note in the free corner under the titles */
.dk-note{position:absolute;z-index:4;left:max(24px,calc((100vw - 1240px)/2));bottom:6vh;margin:0;max-width:290px;display:grid;gap:6px;font-size:.9rem;line-height:1.45;color:#3E4550;
animation:hero-fade .9s var(--ease) backwards;animation-delay:3.4s}
.dk-note a{font-weight:700;color:#D5215E;text-decoration:none}
.dk-note a:hover{text-decoration:underline}
@media (max-width:809.98px){
/* phones: the title block keeps one height, so the cards under it do not jump when the title changes */
.dk-titles .headline{font-size:clamp(2.5rem,12vw,3.4rem);min-height:3.75em;margin-bottom:10px;display:flex;flex-direction:column;justify-content:flex-end} /* a short title rests on the sentence under it */
.dk-titles .lede{min-height:4.7em;max-width:none}
.dk-note{position:static;max-width:none;padding:16px 16px 0}
}
/* =====================================================================================================
Content from the brief (Site Νέων Έργα.docx): tile descriptions, goals, projects, team CVs, news, FAQ
===================================================================================================== */
.below .card-glass,.below .goal,.below .pcard,.below .faq{background:rgba(255,255,255,.88);box-shadow:0 22px 50px -36px rgba(20,20,50,.5)}
.below .text-link{font-weight:700;color:var(--p-purple);text-decoration:underline;text-underline-offset:3px}
.below .text-link:hover{color:var(--magenta)}
/* at a glance: the short description under each fact */
.below .tile .tile-d{font-size:.94rem;line-height:1.5;color:inherit;opacity:.94;margin-top:8px}
.below .t-base .tile-foot{margin-top:10px}
/* goals: seven cards, three wide ones then four */
.below .goals{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.below .goal{grid-column:span 3;padding:26px 24px 28px;border-radius:var(--r-lg);display:flex;flex-direction:column;gap:10px}
.below .goal:nth-child(-n+3){grid-column:span 4}
.below .goal-n{width:46px;height:46px;display:grid;place-items:center;padding-top:5px;background:var(--c);color:#fff;font:800 .92rem var(--display);
clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)} /* the pentagon of the logo */
.below .goal h3{font-size:1.32rem;font-weight:800;letter-spacing:-.03em;line-height:1.12;margin-top:6px}
.below .goal p{color:var(--ink-2);font-size:.98rem;line-height:1.5}
@media (max-width:1100px){.below .goal,.below .goal:nth-child(-n+3){grid-column:span 6}.below .goal:last-child{grid-column:span 12}}
@media (max-width:620px){.below .goal,.below .goal:nth-child(-n+3){grid-column:span 12}}
/* projects */
.below .proj{position:relative;overflow:hidden;border-radius:40px;padding:clamp(28px,5vw,64px);color:#fff;display:grid;gap:18px}
.below .proj-exa{background:#262362}
.below .proj-heat{background:var(--p-green)}
.below .proj-k,.below .pcard-k{font:600 .78rem var(--display);letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.below .proj h3{font-size:clamp(2.4rem,6vw,5rem);font-weight:900;letter-spacing:-.055em;line-height:.95}
.below .proj h3 small{display:block;font-size:.3em;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-top:.55em;opacity:.92}
.below .proj p{color:rgba(255,255,255,.92);font-size:1.04rem;line-height:1.62}
.below .proj-cols{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(22px,4vw,60px);align-items:start;margin-top:8px}
.below .proj-text{display:grid;gap:14px}
.below .proj-text.two{grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);margin-top:8px}
.below .proj-nums{display:grid;gap:12px}
.below .proj-nums div{display:flex;align-items:baseline;gap:14px;border-top:1px solid rgba(255,255,255,.24);padding-top:12px}
.below .proj-nums b{font:900 clamp(2.2rem,4vw,3.4rem)/1 var(--display);letter-spacing:-.05em;color:var(--yellow);min-width:3.4ch;font-variant-numeric:tabular-nums}
.below .proj-nums span{color:rgba(255,255,255,.9);font-size:.95rem}
.below .proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.below .pcard{padding:clamp(22px,3vw,32px);border-radius:var(--r-lg);display:flex;flex-direction:column;gap:14px}
.below .pcard.wide{grid-column:1/-1}
.below .pcard h4{font:800 clamp(1.35rem,2.2vw,1.8rem)/1.1 var(--display);letter-spacing:-.035em;color:var(--ink)}
.below .pcard p{color:var(--ink-2);line-height:1.6}
.below .pcard-k{color:var(--p-purple);opacity:1}
.below .pcard-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,36px)}
.below .ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.below .ticks li{position:relative;padding-left:30px;font-weight:600;color:var(--ink-2)}
.below .ticks li::before{content:"";position:absolute;left:0;top:.2em;width:17px;height:17px;background:var(--p-green);clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.below .groups{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.below .groups li{padding:16px;border-radius:18px;background:var(--c);color:#fff;font:700 1rem/1.2 var(--display);letter-spacing:-.02em;min-height:84px;display:flex;align-items:flex-end}
.below .pcard-cta{flex-direction:row;align-items:center;justify-content:space-between;gap:20px;background:var(--magenta);box-shadow:none}
.below .pcard-cta h4,.below .pcard-cta p{color:#fff}
.below .pcard-cta p{margin-top:8px;max-width:56ch}
.below .pcard-cta .btn-white{background:#fff;color:var(--magenta);flex:none}
.below .sub-head{margin:clamp(52px,8vw,100px) 0 20px;display:grid;gap:12px}
.below .sub-head h3{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:900;letter-spacing:-.05em}
.below .sub-head p{max-width:76ch;color:var(--ink-2);font-size:1.06rem;line-height:1.6}
.below .sub-head .sub-lead{font:700 1.25rem/1.3 var(--display);letter-spacing:-.02em;color:var(--p-green)}
@media (max-width:900px){
.below .proj-cols,.below .proj-text.two,.below .proj-grid,.below .pcard-cols{grid-template-columns:1fr}
.below .pcard-cta{flex-direction:column;align-items:flex-start}
.below .proj{border-radius:28px}
}
@media (max-width:480px){.below .groups{grid-template-columns:1fr}.below .groups li{min-height:0}}
/* team: five people; a card opens the short CV */
.below .people{grid-template-columns:repeat(5,1fr)}
.below .person[data-bio]{cursor:pointer}
.below .person figcaption{padding:12px 14px}
.below .person figcaption span{font-size:.76rem}
.below .bio-btn{display:inline-flex;gap:6px;margin-top:8px;padding:0;border:0;background:none;font:700 .8rem var(--display);color:var(--p-purple);cursor:pointer}
.below .bio-btn:hover{color:var(--magenta)}
.below .no-photo{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;background:var(--p-orchid);color:#fff;padding-bottom:28%}
.below .no-photo .fig{font-size:64px;opacity:.5}
.below .no-photo b{font:900 2.2rem var(--display);letter-spacing:-.04em}
@media (max-width:1100px){.below .people{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.below .people{grid-template-columns:repeat(2,1fr)}}
dialog.bio{border:0;border-radius:28px;padding:clamp(22px,4vw,40px);width:min(740px,calc(100vw - 28px));max-height:min(86vh,860px);overflow:auto;
background:#fff;color:#141414;box-shadow:0 40px 100px -30px rgba(20,20,50,.6)}
dialog.bio::backdrop{background:rgba(24,28,60,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
dialog.bio form{position:sticky;top:0;float:right;margin:-6px -6px 0 12px;z-index:1}
.bio-x{width:42px;height:42px;border-radius:50%;border:0;background:#141414;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
.bio-x:hover{background:var(--magenta)}
.bio-top{display:flex;gap:18px;align-items:center;margin-bottom:20px}
.bio-top img,.bio-ph{flex:none;width:92px;height:92px;border-radius:50%;object-fit:cover}
.bio-ph{display:grid;place-items:center;background:var(--p-orchid);color:#fff;font:900 1.6rem var(--display)}
dialog.bio h3{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:900;letter-spacing:-.04em}
.bio-role{margin-top:6px;font-weight:700;color:var(--p-purple);line-height:1.35}
dialog.bio > p{line-height:1.68;color:#2A2A2A}
dialog.bio > p + p{margin-top:14px}
/* news, gallery, links */
.below .news{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.below .links{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.below .links a{font-weight:700;color:var(--p-purple);text-decoration:underline;text-underline-offset:3px}
.below .links a:hover{color:var(--magenta)}
@media (max-width:900px){.below .news{grid-template-columns:1fr}}
/* FAQ */
.below .faq-list{display:grid;gap:10px;max-width:940px}
.below .faq{border-radius:22px;overflow:hidden}
.below .faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;
font:700 clamp(1.02rem,1.6vw,1.2rem)/1.25 var(--display);letter-spacing:-.02em;color:var(--ink)}
.below .faq summary::-webkit-details-marker{display:none}
.below .faq summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--p-purple);color:#fff;font-weight:500;font-size:1.3rem;transition:transform .3s var(--ease),background .3s}
.below .faq[open] summary::after{transform:rotate(45deg);background:var(--magenta)}
.below .faq summary:focus-visible{outline:3px solid var(--p-purple);outline-offset:-3px;border-radius:22px}
.below .faq-a{padding:0 24px 22px;max-width:74ch;color:var(--ink-2);line-height:1.62}
.below .faq-a a{color:var(--p-purple);font-weight:700;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
/* footer: icons next to the contact details, round social buttons */
.below .foot-lines{display:grid;gap:8px;line-height:1.4}
.below .foot-lines a,.below .foot-lines span{display:flex;align-items:center;gap:10px;overflow-wrap:anywhere}
.below .fi{flex:none;width:18px;height:18px}
.below .social-icons{display:flex;gap:10px}
.below .social-icons a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;transition:background .25s,transform .25s}
.below .social-icons a:hover{background:#fff;color:var(--p-purple);transform:translateY(-2px);text-decoration:none}
.below .social-icons .fi{width:20px;height:20px}
.below .cta > p + p{margin-top:-8px}
.below .bio-btn span{display:inline;font-size:inherit;color:inherit;margin:0}
.below .person{aspect-ratio:2/3} /* taller cards: the caption (name, role, CV link) leaves the face free */
.below .person img{object-position:50% 20%}
.below .no-photo{padding-bottom:46%}
@media (max-width:640px){
/* phones: photo on top, name and role under it (an overlay would hide the faces at this size) */
.below .person{aspect-ratio:auto;display:flex;flex-direction:column;background:rgba(255,255,255,.9)}
.below .person img{height:auto;aspect-ratio:1/1}
.below .person figcaption{position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;padding:12px}
.below .no-photo{position:static;aspect-ratio:1/1;padding-bottom:0}
}
/* ---------- menu: one seamless bar from edge to edge (no pill, no outline); its content lines up with the page ---------- */
.nav{top:0;left:0;transform:none;width:100%;border-radius:0;border:0;box-shadow:none;
padding:10px max(24px,calc((100vw - 1240px)/2));background:rgba(255,255,255,.5);
backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
@media (max-width:760px){.nav{top:0;padding:8px 16px}}
.nav{border-bottom:1px solid rgba(23,19,31,.14)} /* a thin line between the menu and the page */
/* the organisation's own logo in the menu (assets/neon-erga-logo.png) */
.nav{padding-top:6px;padding-bottom:6px}
.nav .brand-logo{height:58px;width:auto;display:block}
@media (max-width:760px){.nav{padding-top:5px;padding-bottom:5px}.nav .brand-logo{height:50px}}
.below .person img{object-position:50% 30%} /* the new square portraits (assets/team): keep the face in the card */
/* =====================================================================================================
The organisation's palette (colour_LOGO.pdf), used across the page:
magenta #EB008B · green #72BE44 · blue #034EA1 · light blue #29ABE2 · pink #FF39BF · yellow #FFE400 · lime #ABD900 · orange #FF8600
Blue and magenta are the only two dark enough for coloured TEXT on the sky; the other six are used as fills,
with dark text on them. (Before this block: character-sky-v1.css.)
===================================================================================================== */
:root{--magenta:#EB008B;--green:#72BE44;--blue:#034EA1;--lblue:#29ABE2;--pink:#FF39BF;--yellow:#FFE400;--lime:#ABD900;--orange:#FF8600;
--purple:#034EA1;--magenta-soft:#FDE0F1;--green-soft:#E6F4DC;--yellow-soft:#FFF8BF;--purple-soft:#DCE8F5;--stage-accent:#EB008B}
.below{--p-purple:#034EA1;--p-green:#72BE44;--p-orange:#FF8600;--p-orchid:#FF39BF;--magenta:#EB008B;--green:#72BE44;--yellow:#FFE400;--purple:#034EA1;
--sky:#29ABE2;--sky-soft:#D6EEFA;--stage-accent:#034EA1}
.dk-note a{color:var(--magenta)}
.dk .card:focus-visible .card-lift{outline-color:var(--blue)}
/* headings: the coloured words are blue or magenta */
.below .sec-head h2 .accent-g,.below .sec-head h2 .accent-p{color:var(--magenta)}
.below .sub-head .sub-lead{color:var(--magenta)}
/* at a glance: blue · yellow · green · pink · light blue · magenta */
.below .t-date{background:var(--yellow)}
.below .t-members,.below .t-scope{color:var(--ink)}
.below .t-members .big-num,.below .t-members .tile-foot,.below .t-members p{color:var(--ink)}
/* thematic axes: blue · lime · yellow · pink */
.below .p-g{background:var(--lime);color:var(--ink)}
.below .p-y{background:var(--yellow);color:var(--ink)}
.below .p-p{background:var(--pink);color:var(--ink)}
.below .axes .p-m{box-shadow:0 6px 0 color-mix(in srgb,var(--blue) 60%,#000)}
.below .axes .p-g{box-shadow:0 6px 0 color-mix(in srgb,var(--lime) 62%,#000)}
.below .axes .p-y{box-shadow:0 6px 0 color-mix(in srgb,var(--yellow) 62%,#000)}
.below .axes .p-p{box-shadow:0 6px 0 color-mix(in srgb,var(--pink) 60%,#000)}
/* goals: the number takes dark or white depending on its colour */
.below .goal-n{color:var(--t,#141414)}
/* projects: EXAGONO on the logo blue, Hack the Heat on green with dark text */
.below .proj-exa{background:var(--blue)}
.below .proj-heat{background:var(--green);color:var(--ink)}
.below .proj-heat p{color:var(--ink)}
.below .cta .btn-white{--edge:#9A005B}
/* ---------- photos from our actions: a mosaic at the top of "Τα έργα μας"; the photo cards among the posts lead here ---------- */
.below .drasi{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:320px 230px;gap:12px;margin-bottom:clamp(28px,4vw,52px)}
.below .drasi img{width:100%;height:100%;object-fit:cover;border-radius:22px;display:block;box-shadow:0 20px 50px -34px rgba(20,20,50,.5)}
.below .drasi img:first-child{grid-column:span 2} /* the team photo stays wide, nobody is cropped out */
@media (max-width:900px){.below .drasi{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:10px}.below .drasi img{height:46vw;max-height:300px;border-radius:16px}.below .drasi img:first-child{grid-column:span 2;grid-row:auto;height:58vw}}
@media (min-width:810px){.dk{height:560vh}} /* 20 cards now (15 posts + 5 photos); phones keep the swipe row */
.dk .c .ig-badge{pointer-events:none}
/* =====================================================================================================
The artworks of "fonto 3 page.pdf" as the box of three sections (01 at a glance, 04 goals, 07 news), with a
plain section in between each. The drawing is an SVG in a 16:9 panel; the text sits inside its colour fields at
percentage positions, and the type scales with the panel width (16px at 1440px), so text and fields stay together.
Under 1200px the fields stack as full-width bands with slanted seams.
===================================================================================================== */
.below .art{position:relative;width:100%;aspect-ratio:16/9;color:#141414;font-size:1.111vw;margin-top:clamp(8px,2vw,28px)}
.below .art-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.below .az{display:contents}
.below .ai{position:absolute;display:flex;flex-direction:column;gap:.5em}
.below .ai p{color:inherit}
.below .ai-k{font:600 .72em var(--display);letter-spacing:.14em;text-transform:uppercase}
.below .ai-d{font-size:.86em;line-height:1.45;font-weight:500}
.below .ai-lead{font-size:1em;line-height:1.5;font-weight:500}
.below .ai-foot{font-weight:700;font-size:.95em}
.below .ai-num{font:900 3.7em/.9 var(--display);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.below .ai-num small{font-size:.45em;letter-spacing:-.03em}
.below .ai h3{font-size:3.25em;font-weight:900;letter-spacing:-.05em;line-height:.98}
.below .ai h4{font:900 1.7em/1.05 var(--display);letter-spacing:-.04em}
.below .az-m .ai,.below .az-m2 .ai{color:#fff}
.below .az-m .text-link,.below .az-m2 .text-link{color:#fff}
/* 01 at a glance (yellow · green · cyan · magenta) */
.below .gi-mission{left:17%;top:14.5%;width:35.5%}
.below .gi-mission .ai-lead{max-width:54ch}
.below .gi-date{left:57.5%;top:13.5%;width:18%}
.below .gi-base{left:78%;top:10%;width:18.5%}
.below .gi-members{left:61.5%;top:51%;width:17%}
.below .gi-impact{left:80.5%;top:56%;width:16.5%}
.below .ai-rows{display:grid;gap:.55em}
.below .ai-rows div{display:flex;align-items:baseline;gap:.7em;border-top:1.5px solid rgba(20,20,20,.35);padding-top:.5em}
.below .ai-rows b{font:900 2.2em/1 var(--display);letter-spacing:-.05em;min-width:3.1ch;font-variant-numeric:tabular-nums}
.below .ai-rows span{font-size:.86em;font-weight:600}
.below .ai-rows b span{font-size:1em;font-weight:inherit}
.below .gi-scope{left:4%;top:58%;width:21%}
.below .gi-scope ul{list-style:none;margin:0;padding:0}
.below .gi-scope li{font:900 2.2em/1.08 var(--display);letter-spacing:-.045em}
/* 04 goals (yellow pentagon on magenta): intro + 01–02 on the yellow; 03 bottom left and 04–07 in a column on the magenta */
.below .art-goals .goal{gap:.45em}
.below .art-goals .goal h3{font-size:1.3em;letter-spacing:-.03em;line-height:1.12}
.below .art-goals .goal p{font-size:.86em;line-height:1.45;font-weight:500}
.below .art-goals .goal-n{width:2.9em;height:2.9em;font-size:.92em;padding-top:.3em;background:#EB008B;color:#fff}
.below .art-goals .az-m .goal-n{background:#fff;color:#EB008B}
.below .ai-intro{left:5%;top:7%;width:48%}
.below .art-goals .g1{left:14%;top:28%;width:20%}
.below .art-goals .g2{left:37%;top:28%;width:20%}
.below .art-goals .g3{left:4%;top:69%;width:20%}
.below .art-goals .g4{left:72.5%;top:5%;width:24%}
.below .art-goals .g5{left:72.5%;top:31.5%;width:24%}
.below .art-goals .g6{left:72.5%;top:55%;width:24%}
.below .art-goals .g7{left:72.5%;top:77%;width:24%}
/* 07 news (magenta shape on lime): news and links on the lime, the Instagram name top right, the gallery on the magenta */
.below .art-news .ai h3{font-size:1.6em;letter-spacing:-.035em;line-height:1.1}
.below .an-news{left:5%;top:9%;width:26%}
.below .an-links{left:5%;top:58%;width:25%}
.below .an-links .links{gap:.6em}
.below .an-links .links a{color:#141414;font-size:.95em}
.below .an-gallery{left:45%;top:34%;width:27%}
.below .an-ig{left:70%;top:8%;width:27%;text-decoration:none;color:#141414}
.below .an-ig b{font:900 1.9em/1.05 var(--display);letter-spacing:-.04em;overflow-wrap:anywhere}
.below .an-ig:hover b{text-decoration:underline}
/* ---------- narrower than 1200px: bands ---------- */
@media (max-width:1199.98px){
.below .art{aspect-ratio:auto;font-size:1rem}
.below .art-svg{display:none}
.below .az{display:grid;gap:28px;padding:calc(6vw + 30px) max(16px,5vw) calc(6vw + 34px);margin-top:-6vw}
.below .az:first-of-type{margin-top:0}
.below .az-y{background:#FFFF00;clip-path:polygon(0 0,100% 5vw,100% 100%,0 100%)}
.below .az-g{background:#7DD400;clip-path:polygon(0 6vw,100% 0,100% 100%,0 100%)}
.below .az-c{background:#2AD2FF;clip-path:polygon(0 0,100% 6vw,100% 100%,0 100%)}
.below .az-m{background:#FF009E;clip-path:polygon(0 6vw,100% 0,100% 100%,0 calc(100% - 5vw))}
.below .az-l{background:#90FF3F;clip-path:polygon(0 0,100% 5vw,100% 100%,0 100%)}
.below .az-m2{background:#FF00C9;clip-path:polygon(0 6vw,100% 0,100% 100%,0 calc(100% - 5vw))}
.below .art-glance .az-g,.below .art-glance .az-c,.below .art-goals .az-m{grid-template-columns:1fr 1fr}
.below .art .ai{position:static;width:auto;left:auto;top:auto}
.below .ai h3{font-size:clamp(2.1rem,7vw,3.2rem)}
.below .art-goals .goal h3,.below .art-news .ai h3{font-size:1.35rem}
.below .ai-d,.below .art-goals .goal p{font-size:.95rem}
.below .ai-lead{font-size:1.02rem}
.below .ai-intro{grid-column:1/-1}
.below .art-goals .goal,.below .art-goals .goal:nth-child(-n+3){grid-column:auto} /* no card spans inside the bands */
.below .an-ig b{font-size:1.5rem}
}
@media (max-width:640px){
.below .art-glance .az-g,.below .art-glance .az-c,.below .art-goals .az-m{grid-template-columns:1fr}
}
/* inside the artworks the goals are plain text, not white cards */
.below .art-goals .goal{background:none;box-shadow:none;padding:0;border-radius:0;backdrop-filter:none}
.below .an-news{width:17%} /* keeps clear of the magenta tip */
.motto-done .motto .mw{animation:none} /* the arrival of the motto plays only once */
/* footer: the real logo on a white tile (its blue lettering would vanish on the blue footer) */
.below .foot-logo{display:inline-block;padding:14px 20px;border-radius:22px;background:#fff;margin-bottom:44px;transition:transform .3s var(--ease)}
.below .foot-logo:hover{transform:translateY(-2px)}
.below .foot-logo img{height:84px;width:auto;display:block}
@media (max-width:760px){.below .foot-logo{padding:10px 14px;margin-bottom:32px}.below .foot-logo img{height:64px}}
.below .foot-note{margin-top:56px} /* the big typed wordmark is gone; the note keeps some air above it */
/* ---------- footer: white, so the logo sits on it directly ---------- */
.below .footer{background:#fff;color:var(--ink)}
.below .footer h4{color:var(--blue)}
.below .footer p{color:var(--ink-2)}
.below .footer a:hover{color:var(--magenta)}
.below .foot-logo{padding:0;border-radius:0;background:none;margin-bottom:40px}
.below .foot-logo img{height:96px}
.below .social-icons a{background:var(--blue);color:#fff}
.below .social-icons a:hover{background:var(--magenta);color:#fff}
.below .foot-note{color:var(--muted)!important;border-top:1px solid var(--line);padding-top:22px}
@media (max-width:760px){.below .foot-logo img{height:72px}}
/* =====================================================================================================
Square corners everywhere (2026-10-09): boxes, cards, photos, buttons, pills, badges, dialog, footer
===================================================================================================== */
.below .tile,.below .goal,.below .pcard,.below .faq,.below .proj,.below .person,.below .person figcaption,.below .cta,
.below .drasi img,.below .groups li,.below .footer,.below .foot-logo,.below .vals-stage,.below .val:focus-visible,
.btn,.lang,.below .pill,.below .sec-num,.below .values li,.below .social-icons a,.below .faq summary::after,
.dk,.dk .card-lift,.dk .c .ig-badge,.dk .c .bar,.dk .caption,dialog.bio,.bio-x,.bio-top img,.bio-ph,
.progress li,.progress li::after,.below .person img,.below .no-photo{border-radius:0!important}
.dk{--radius:0}