@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/nunito-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/nunito-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/nunito-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/nunito-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/nunito-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/nunito-sans-latin-700-normal.woff2) format('woff2')}

/* Layout: a single centred 1200px column on white; the logo's circle and pill are the only shapes, pink is the only colour. */
:root{
  /* four colours only: pink, white, black, light grey */
  --ink:#1D1D1F; --soft:#1D1D1F; --mute:#1D1D1F; --line:#ECECF0; --mist:#ECECF0; --deco:#ECECF0;
  --pink:#F21883; --pink-dk:#F21883; --pink-tx:#F21883;
  --display:"Nunito","Nunito Sans",ui-rounded,system-ui,sans-serif;
  --body:"Nunito Sans",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --expo:cubic-bezier(.16,1,.3,1);
  --sec:144px; --gut:40px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.center{display:flex;justify-content:center}
.sec{padding-block:var(--sec)}
.head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;margin-bottom:80px}
.h2{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(40px,5vw,64px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.lead{margin:0;max-width:52ch;font-size:22px;color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;background:var(--pink-dk);color:#fff;font-family:var(--display);font-weight:800;font-size:20px;text-decoration:none;transition:transform .25s var(--ease),background-color .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn.white{background:#fff;color:var(--pink-dk)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.lnk{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:800;font-size:20px;color:var(--pink-tx);text-decoration:none}
.lnk svg{transition:transform .3s var(--ease)}
.lnk:hover svg{transform:translateX(4px)}

/* ---------- pill title: words appear while you scroll, the pill ends as the dot on the right ---------- */
.ptitle{margin:0;display:flex;justify-content:center;font-family:var(--display);font-weight:900;font-size:clamp(40px,5vw,64px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.trow{display:inline-flex;align-items:center;column-gap:.14em}
.tword{display:flex;overflow:hidden;white-space:nowrap;line-height:1.2}
.tpill{position:relative;z-index:1;flex:0 0 auto;width:.6em;height:.6em;border-radius:999px;background:var(--pink);margin-top:.06em}
.ptitle.on-pink{color:#fff}
.ptitle.on-pink .tpill{background:#fff}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.84);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:116px}
.hdr-logo{display:block}
.ylogo{display:block;overflow:visible}
.ylogo.small{height:96px;width:auto}
.ylogo .lg-dot,.ylogo .lg-pill,.ylogo .lt{transform-box:fill-box}
.ylogo .lg-dot,.ylogo .lg-pill{transform-origin:50% 100%}
.ylogo .lt{transform-origin:50% 50%}
.nav{display:flex;align-items:center;gap:6px 36px}
.nav a:not(.btn){font-family:var(--display);font-weight:800;font-size:15px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;transition:color .2s ease}
.nav a:not(.btn):hover{color:var(--pink-tx)}
.nav .btn{min-height:44px;padding:0 22px;font-size:19px}
.mtog{display:none;align-items:center;gap:12px;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--mist);color:var(--ink);font-family:var(--display);font-weight:800;font-size:18px;cursor:pointer}
.mtog-i{position:relative;width:20px;height:12px}
.mtog-i i{position:absolute;left:0;width:100%;height:2.5px;border-radius:2px;background:currentColor;transition:transform .4s var(--expo),top .4s var(--expo)}
.mtog-i i:first-child{top:0}.mtog-i i:last-child{top:9.5px}
.hdr.open .mtog-i i:first-child{top:4.75px;transform:rotate(45deg)}.hdr.open .mtog-i i:last-child{top:4.75px;transform:rotate(-45deg)}

/* ---------- hero: one circle with video, held while it grows to fill the screen ---------- */
.hero{position:relative;height:230vh}
.hero-stick{position:sticky;top:0;height:100vh;overflow:hidden}
.hero-copy{position:relative;z-index:3;text-align:center;padding-top:min(7vh,64px)}
.hero h1{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(44px,6.3vw,96px);line-height:1;letter-spacing:-.03em}
.hero-sub{margin:.12em 0 0;font-family:var(--display);font-weight:800;font-size:clamp(26px,2.6vw,36px);line-height:1.08;letter-spacing:-.02em;color:var(--mute)}
.hl{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.hl>span{display:inline-block}
.hero-stage{position:absolute;inset:0;z-index:2;pointer-events:none}
.hv{position:absolute;left:50%;top:72%;width:min(46vh,420px);height:min(46vh,420px);translate:-50% -50%;border-radius:999px;overflow:hidden;background:var(--mist);pointer-events:auto}
.hv video{width:100%;height:100%;object-fit:cover}
.hdot{position:absolute;left:50%;top:72%;width:44px;height:44px;border-radius:50%;background:var(--pink);translate:var(--hx,170px) var(--hy,150px)}

/* ---------- impact/* ---------- impact board ---------- */
.board{position:relative;width:100%;aspect-ratio:1200/680}
.c{position:absolute;left:var(--x);top:var(--y);width:var(--d);aspect-ratio:1;border-radius:50%;overflow:hidden;translate:0 var(--py,0px)}
.c-p{background:var(--mist)}
.c-p img{width:100%;height:100%;object-fit:cover}
.c-big,.c-st{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8%}
.c-big{background:var(--pink-dk);color:#fff}
.c-st{background:var(--mist)}
.num{font-family:var(--display);font-weight:900;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.c-big .num{font-size:clamp(40px,4.4vw,64px)}
.c-big .lab{font-size:20px;font-weight:800}
.c-st .num{font-size:clamp(26px,2.6vw,36px);color:var(--pink)}
.lab{font-weight:700;font-size:15px;line-height:1.25;margin-top:8px}
.c-st .lab{color:var(--soft)}
.c-k{background:var(--pink)}
.c-g{background:var(--deco)}

/* ---------- what we do: six circles, a title and one line each ---------- */
.areas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:80px 64px}
.ar{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none}
.ar-c{display:block;width:100%;max-width:300px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--mist);margin-bottom:32px}
.ar-c img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--expo)}
.ar-t{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.15;letter-spacing:-.01em;transition:color .3s ease;text-wrap:balance}
.ar-d{margin-top:10px;font-size:18px;line-height:1.5;color:var(--soft);max-width:28ch}
.ar:hover .ar-c img{transform:scale(1.06)}
.ar:hover .ar-t{color:var(--pink-tx)}

/* ---------- story/* ---------- story ---------- */
.story{background:var(--mist)}
.story-in{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:96px;align-items:center}
.story-ph{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden}
.story-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.story-q{margin:0;display:flex;flex-direction:column;gap:28px}
.qdot{width:28px;height:28px;border-radius:50%;background:var(--pink)}
.story-q blockquote{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(26px,2.6vw,36px);line-height:1.18;letter-spacing:-.015em}
.story-q figcaption{font-size:18px;color:var(--soft)}
.story-q figcaption strong{display:block;color:var(--ink);font-family:var(--display);font-weight:800;font-size:22px}

/* ---------- projects: one large circle in front, its neighbours waiting at the sides ---------- */
.deck{position:relative}
.pstage{position:relative;height:var(--pd,560px);touch-action:pan-y;user-select:none}
.pstage img{-webkit-user-drag:none}
.pc{all:unset;box-sizing:border-box;position:absolute;left:50%;top:0;width:var(--pd,560px);height:var(--pd,560px);margin-left:calc(var(--pd,560px)/-2);border-radius:50%;overflow:hidden;background:var(--mist);cursor:pointer;transition:transform 1.4s var(--expo),opacity .9s ease;will-change:transform}
.pc img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--expo)}
.pc.front{cursor:default}
.pc:not(.front) img{transform:scale(1.15)}
.pc:focus-visible{outline:3px solid var(--pink);outline-offset:6px}
.pdeco{position:absolute;border-radius:50%;pointer-events:none}
.pdeco.d1{width:30px;height:30px;background:var(--pink);left:calc(50% + var(--pd,560px)*.36);top:calc(var(--pd,560px)*.86);z-index:12}
.pdeco.d2{width:120px;height:120px;background:var(--deco);left:calc(50% - var(--pd,560px)*.66);top:calc(var(--pd,560px)*.72);z-index:0}
.ptexts{display:grid;max-width:640px;margin:48px auto 0;text-align:center}
.pt{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .6s ease,transform .9s var(--expo),visibility 0s .6s}
.pt.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s ease .25s,transform 1s var(--expo) .25s,visibility 0s}
.pt-st{font-size:15px;font-weight:700;color:var(--soft)}
.pt-t{margin:4px 0 0;font-family:var(--display);font-weight:900;font-size:clamp(26px,2.6vw,36px);line-height:1.05;letter-spacing:-.02em}
.pt-d{margin:0;font-size:18px;color:var(--ink);max-width:46ch}
.ddots{display:flex;justify-content:center;gap:8px;margin-top:36px}
.ddots span{width:8px;height:8px;border-radius:999px;background:var(--line);transition:width .5s var(--ease),background-color .3s}
.ddots span.on{width:28px;background:var(--pink)}

/* ---------- instagram: one row of large circles that drifts sideways while you scroll ---------- */
.insta{padding-top:0}
.igrow{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab;padding-bottom:20px;margin-bottom:-20px}
.igrow::-webkit-scrollbar{display:none}
.igrow.drag{cursor:grabbing;scroll-snap-type:none}
.igrow.drag .ig{pointer-events:none}
.ig{scroll-snap-align:center}
.ig img{-webkit-user-drag:none;user-select:none}
.igtrack{display:flex;align-items:flex-start;gap:36px;width:max-content;padding:0 max(var(--gut),calc((100vw - 1200px) / 2))}
.ig{flex:0 0 auto;display:block;width:var(--d);height:var(--d);margin-top:var(--t);border-radius:50%;overflow:hidden;background:var(--mist)}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--expo)}
.ig:hover img{transform:scale(1.06)}
.ig-follow{background:var(--pink-dk);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-decoration:none;text-align:center;transition:transform .5s var(--expo)}
.ig-follow:hover{transform:scale(1.03)}
.ig-follow svg{width:34px;height:34px;margin-bottom:6px}
.ig-follow strong{font-family:var(--display);font-weight:900;font-size:36px;line-height:1}
.ig-follow span{font-weight:800;font-size:20px}
.ig-deco{background:var(--deco)}

/* ---------- partners/* ---------- partners ---------- */
.partners{padding-top:0;overflow:hidden}
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mtrack{display:flex;align-items:center;width:max-content}
.lg{flex:0 0 auto;height:80px;display:flex;align-items:center;margin-right:88px}
.lg img{max-height:58px;max-width:160px;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .3s ease,opacity .3s ease}
.lg:hover img{filter:none;opacity:1}
.marq:hover .mtrack{animation-play-state:paused}

/* ---------- join ---------- */
.join{padding-top:0}
.orbit{position:relative;height:800px;max-width:1160px;margin:0 auto}
.core{position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:var(--pink-dk);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;padding:80px;z-index:2}
.core p{margin:0;font-size:20px;line-height:1.5;font-weight:700}
.way{position:absolute;width:250px;height:250px;border-radius:50%;background:var(--mist);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:36px;translate:var(--ox,0px) var(--oy,0px);scale:var(--os,1);z-index:1}
.way strong{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.1}
.way span{font-size:15px;line-height:1.45;color:var(--soft)}
.w0{left:30px;top:40px}.w1{right:30px;top:40px}.w2{left:30px;bottom:40px}.w3{right:30px;bottom:40px}
.odeco{position:absolute;border-radius:50%}
.o1{width:28px;height:28px;background:var(--pink);left:330px;top:120px}
.o2{width:84px;height:84px;background:var(--deco);right:300px;bottom:70px}
.o3{width:18px;height:18px;background:var(--pink);right:250px;top:330px}

/* ---------- footer: pink field, white logo, the address people need written large ---------- */
.ftr{position:relative;background:var(--pink-dk);color:#fff;overflow:hidden;border-radius:48px 48px 0 0;padding-top:120px;margin-top:40px}
.fc{position:absolute;border-radius:50%;background:rgba(255,255,255,.1);translate:0 var(--py,0px);pointer-events:none}
.f1{width:520px;height:520px;right:-140px;top:-180px}
.f2{width:180px;height:180px;right:120px;top:420px;background:rgba(255,255,255,.07)}
.f3{width:46px;height:46px;right:300px;top:110px;background:#fff;opacity:.9}
.f4{width:300px;height:300px;left:-120px;bottom:-110px;background:rgba(255,255,255,.08)}
.ftr-top{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:96px;align-items:center}
.ftr-logo{display:block}
.flogo{height:clamp(280px,30vw,420px);width:auto}
.ftr-say{display:flex;flex-direction:column;gap:48px;align-items:flex-start}
.ftr-tag{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(26px,2.6vw,36px);line-height:1.06;letter-spacing:-.025em;max-width:24em;text-wrap:balance}
.fmail{display:inline-flex;align-items:center;gap:16px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em}
.fmail-c{width:56px;height:56px;border-radius:50%;background:#fff;color:var(--pink-dk);display:inline-flex;align-items:center;justify-content:center;transition:transform .5s var(--expo)}
.fmail:hover .fmail-c{transform:translateX(8px)}
.fmail span:first-child{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:transparent;transition:text-decoration-color .3s ease}
.fmail:hover span:first-child{text-decoration-color:currentColor}
.ftr-cols{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:120px;padding-top:48px}
.ftr-cols::before{content:"";position:absolute;top:0;left:max(var(--gut),env(safe-area-inset-left,0px));right:max(var(--gut),env(safe-area-inset-right,0px));height:1px;background:rgba(255,255,255,.35)}
.ftr-cols h3{margin:0 0 12px;font-family:var(--display);font-weight:800;font-size:22px}
.ftr-cols p{margin:0;font-size:20px;line-height:1.6;font-weight:700}
.ftr-cols a{text-decoration:none}
.ftr-cols a:hover{text-decoration:underline}
.soc{display:flex;gap:10px;flex-wrap:wrap}
.soc a{width:44px;height:44px;border-radius:50%;background:#fff;color:var(--pink);display:inline-flex;align-items:center;justify-content:center;transition:transform .25s var(--ease)}
.soc a:hover{transform:translateY(-3px)}
.ftr-legal{position:relative;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:72px 0 40px;font-size:20px;font-weight:700}

/* ================= motion (JS adds .motion only when the visitor allows it) ================= */
@keyframes up{from{transform:translateY(105%)}to{transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleY(0)}to{transform:none}}
@keyframes letter{0%{transform:scale(0)}70%{transform:scale(1.1)}100%{transform:none}}
@keyframes drop{0%{transform:translateY(-900%)}55%{transform:translateY(0)}68%{transform:scale(1.22,.8)}82%{transform:translateY(-22%)}100%{transform:none}}
@keyframes hop{0%,100%{transform:none}35%{transform:translateY(-36%)}60%{transform:scale(1.1,.9)}}
@keyframes marq{to{transform:translateX(-50%)}}
.motion .hl>span{animation:up 1.1s var(--expo) .15s both}
.motion .hero-sub .hl>span{animation-delay:.3s}
.motion .hv{animation:pop 1.3s var(--expo) .45s both}
.motion .hdot{animation:pop 1s var(--expo) 1.1s both}
.motion .areas .rv.in{animation-delay:calc(var(--i)*90ms)}
.motion .ylogo.small .lg-dot{animation:drop 1s cubic-bezier(.5,0,.75,0) .2s both}
.hdr-logo:hover .lg-dot{animation:hop .7s var(--ease)}
.motion .c{opacity:0}
.motion .board.in .c{animation:pop 1.1s var(--expo) both;animation-delay:calc(var(--i)*60ms)}
.motion .rv{opacity:0}
.motion .rv.in{animation:rise 1.1s var(--expo) both}
.motion .story-ph.in{animation:pop 1.3s var(--expo) both}
.motion .story-q.in{animation-delay:.15s}
.motion .mtrack{animation:marq 60s linear infinite}
.motion .flogo .lg-pill,.motion .flogo .lt,.motion .flogo .lg-dot{visibility:hidden}
.motion .flogo.in .lg-pill{visibility:visible;animation:grow 1.2s var(--expo) .45s both}
.motion .flogo.in .lt{visibility:visible;animation:letter .55s var(--ease) both}
.motion .flogo.in .lt:nth-of-type(2){animation-delay:.9s}.motion .flogo.in .lt:nth-of-type(3){animation-delay:1s}.motion .flogo.in .lt:nth-of-type(4){animation-delay:1.1s}.motion .flogo.in .lt:nth-of-type(5){animation-delay:1.2s}
.motion .flogo.in .lg-dot{visibility:visible;animation:drop 1.1s cubic-bezier(.5,0,.75,0) 0s both}

/* ---------- smaller screens ---------- */
@media (max-width:1060px){
  .areas{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 40px}
  .ftr-top{grid-template-columns:1fr;gap:56px;justify-items:start}
  .ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
  .orbit{height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
  .core{position:relative;left:auto;top:auto;margin:0 0 8px;width:min(520px,100%);height:auto;aspect-ratio:1;flex-basis:100%;max-width:520px}
  .way{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;translate:none;scale:1}
  .odeco{display:none}
  .story-in{grid-template-columns:1fr;gap:48px;justify-items:center;text-align:center}
  .story-ph{max-width:420px}
  .story-q{align-items:center}
}
@media (max-width:720px){
  :root{--sec:96px;--gut:16px}
  body{font-size:18px}
  .hdr-in{height:68px;position:relative}
  .ylogo.small{height:56px}
  .mtog{display:inline-flex}
  .js .nav{position:absolute;left:8px;right:8px;top:calc(100% + 6px);flex-direction:column;align-items:stretch;gap:4px;padding:12px;border-radius:32px;background:var(--mist);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .25s ease,transform .45s var(--expo),visibility 0s .25s}
  .js .hdr.open .nav{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .45s var(--expo),visibility 0s}
  .js .nav a:not(.btn){min-height:56px;padding:0 20px;border-radius:999px;font-size:20px}
  .js .nav a:not(.btn):active{background:#fff}
  .js .nav .btn{min-height:56px;font-size:20px;margin-top:4px}
  html:not(.js) .hdr-in{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  html:not(.js) .nav{width:100%;flex-wrap:wrap;gap:0 18px}
  .hero{height:auto}
  .hero-stick{position:relative;height:auto;overflow:hidden;padding-bottom:40px}
  .hero-copy{padding-top:36px}
  .hero-stage{position:relative;height:380px}
  .hv{top:50%;width:300px;height:300px}
  .hdot{top:50%;--hx:110px;--hy:120px;width:32px;height:32px}
  .head{margin-bottom:52px}
  .board{aspect-ratio:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
  .c{position:relative;left:auto;top:auto;width:46%;margin:-5px -3px;translate:none}
  .c-big{width:70%}
  .deco{display:none}
  .c-st .num{font-size:26px}.c-big .num{font-size:40px}.c-st .lab{font-size:15px}
  .areas{gap:44px 16px}
  .ar-c{margin-bottom:18px}
  .ar-t{font-size:18px}
  .ar-d{font-size:15px}
  .story-q blockquote{font-size:26px}
  .pt-d{font-size:18px}
  .pdeco.d2{display:none}
  .igtrack{gap:16px;padding:0 var(--gut)}
  .ig{width:calc(var(--d)*.62);height:calc(var(--d)*.62);margin-top:calc(var(--t)*.5);scroll-snap-align:center}
  .ig-follow strong{font-size:26px}.ig-follow span{font-size:19px}.ig-follow svg{width:26px;height:26px}
  .lg{margin-right:52px}.lg img{max-height:44px;max-width:120px}
  .core{padding:14%}
  .way{width:calc(50% - 8px);height:auto;aspect-ratio:1;padding:16px}
  .way strong{font-size:18px}.way span{font-size:15px}
  .ftr{padding-top:80px;border-radius:32px 32px 0 0}
  .ftr-tag{font-size:22px}
  .flogo{height:220px}
  .ftr-say{gap:32px}
  .fmail{font-size:22px;gap:14px}.fmail-c{width:48px;height:48px}
  .ftr-cols{margin-top:72px}
  .ftr-cols p{font-size:19px}
  .f1{width:300px;height:300px;right:-120px;top:-100px}.f2{right:-40px;top:auto;bottom:300px}.f3{right:150px;top:60px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .hero{height:auto}
  .hero-stick{position:relative;height:auto;padding-bottom:64px}
  .hero-stage{position:relative;height:560px}
  .hv,.hdot{top:50%}
  .mtrack{width:auto;flex-wrap:wrap;justify-content:center;gap:24px 56px}
  .lg{margin-right:0}.lg.dup{display:none}
}
.projects{overflow:hidden}

/* ================= inner pages: same tokens, type scale and circles as the homepage ================= */
.nav a[aria-current="page"]:not(.btn){position:relative}
.nav a[aria-current="page"]:not(.btn)::after{content:"";position:absolute;left:50%;bottom:2px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--pink)}
.ext-note{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* page hero: title, one sentence, one large circle */
.phero{padding:72px 0 var(--sec);text-align:center}
.phero h1{margin:0 auto;max-width:14em;font-family:var(--display);font-weight:900;font-size:clamp(44px,6vw,88px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.phero .plead{margin:28px auto 0;max-width:40ch;font-size:22px;line-height:1.5}
.phero .pstatus{display:block;margin-top:16px;font-size:15px;font-weight:700}
.pstage1{position:relative;width:min(480px,82vw);aspect-ratio:1;margin:72px auto 0}
.pstage1 .pc1{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--mist)}
.pstage1 .pc1 img{width:100%;height:100%;object-fit:cover}
.pstage1 .pk{position:absolute;right:4%;bottom:6%;width:44px;height:44px;border-radius:50%;background:var(--pink)}
.pstage1 .pg{position:absolute;left:-18%;top:12%;width:22%;aspect-ratio:1;border-radius:50%;background:var(--deco);z-index:-1}
.pstage1 .pg2{position:absolute;right:-12%;top:-4%;width:12%;aspect-ratio:1;border-radius:50%;background:var(--deco)}

/* plain section heading (longer titles); short titles use the pill title */
.head-l{display:flex;flex-direction:column;gap:20px;margin-bottom:72px}
.sec.mist{background:var(--mist)}

/* steps and areas: circles with a title and one line */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:72px 56px}
.steps li{flex:0 1 300px;display:flex;flex-direction:column;align-items:center;text-align:center}
.steps.n4 li{flex-basis:250px}
.st-c{display:block;width:100%;max-width:260px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--mist);margin-bottom:28px}
.steps.n4 .st-c{max-width:230px}
.st-c img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--expo)}
.st-t{margin:0;font-family:var(--display);font-weight:800;font-size:22px;line-height:1.2;text-wrap:balance}
.st-d{margin:10px 0 0;font-size:18px;line-height:1.5;max-width:28ch}
a.stl{display:flex;flex-direction:column;align-items:center;text-decoration:none}
a.stl:hover .st-c img{transform:scale(1.06)}
a.stl:hover .st-t{color:var(--pink)}

/* a row of circles: numbers in grey, the first in pink, photos between */
.crow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px;max-width:1120px;margin:0 auto}
.cr{flex:0 0 auto;width:var(--d);aspect-ratio:1;border-radius:50%;overflow:hidden;margin-top:var(--t,0px)}
.cr img{width:100%;height:100%;object-fit:cover}
.cr-n{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;background:var(--mist)}
.cr-n .num{font-size:clamp(26px,2.6vw,36px);color:var(--pink)}
.cr-n .lab{font-weight:700;font-size:15px;line-height:1.3;margin-top:8px}
.cr-n.big{background:var(--pink);color:#fff}
.cr-n.big .num{color:#fff;font-size:clamp(40px,4.4vw,64px)}
.cr-n.big .lab{font-size:20px;font-weight:800}
.cr-d{background:var(--deco)}
.cr-k{background:var(--pink)}

/* photo and text side by side, text on a shared left edge */
.duo2{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:96px;align-items:center}
.duo2.rev{grid-template-columns:minmax(0,1fr) minmax(0,440px)}
.duo2.rev .d2-c{order:2}
.d2-c{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--mist)}
.d2-c img{width:100%;height:100%;object-fit:cover}
.d2-t{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:34em}
.d2-t h2,.d2-t h3{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(26px,2.6vw,36px);line-height:1.1;letter-spacing:-.02em}
.d2-t p{margin:0;font-size:18px;line-height:1.6}
.d2-t a.h3l{text-decoration:none}
.d2-t a.h3l:hover{color:var(--pink)}
.minis{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.mini{width:150px;aspect-ratio:1;border-radius:50%;background:var(--mist);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px}
.mini .num{font-size:36px;color:var(--pink)}
.mini .lab{font-weight:700;font-size:15px;margin-top:4px}
.stack{display:flex;flex-direction:column;gap:120px}

/* grey pills: a list of short items */
.pills{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:1000px}
.pills li{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border-radius:999px;background:var(--mist);font-weight:700;font-size:18px}
.pills a{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border-radius:999px;background:var(--mist);font-family:var(--display);font-weight:800;font-size:18px;text-decoration:none;transition:background-color .25s ease,color .25s ease}
.pills a:hover{background:var(--pink);color:#fff}
.sec.mist .pills li,.sec.mist .pills a{background:#fff}

/* facts */
.facts{max-width:820px;margin:0 auto;padding:0;display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:28px 0}
.facts dt,.facts dd{margin:0;font-size:18px;line-height:1.5}
.facts dt{font-weight:800;font-family:var(--display);padding-right:24px}
.facts a{font-weight:700}

/* logos */
.lgrid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:48px 64px;max-width:1080px;margin:0 auto}
.lgrid img{max-width:170px;max-height:64px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .3s ease,opacity .3s ease}
.lgrid img:hover{filter:none;opacity:1}

/* three short texts with a pink dot */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;max-width:1120px;margin:0 auto}
.trio h3{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-family:var(--display);font-weight:800;font-size:22px}
.trio h3::before{content:"";flex:0 0 auto;width:14px;height:14px;border-radius:50%;background:var(--pink)}
.trio p{margin:0;font-size:18px;line-height:1.6}

/* big statements (vision, mission, goal) */
.say{max-width:1040px;margin:0 auto;text-align:center}
.say h3{margin:0 0 16px;font-family:var(--display);font-weight:800;font-size:22px}
.say p{margin:0 auto;max-width:30em;font-family:var(--display);font-weight:800;font-size:clamp(22px,2.1vw,30px);line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.say+.say{margin-top:80px}
.goal{background:var(--pink);color:#fff;border-radius:48px;margin:0 var(--gut);padding:120px 0}


/* people */
.people{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:56px 32px;max-width:1120px}
.people li{width:200px;display:flex;flex-direction:column;align-items:center;text-align:center}
.people.lead li{width:260px}
.pp{width:100%;max-width:180px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--mist);margin-bottom:20px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;font-size:40px}
.people.lead .pp{max-width:240px}
.pp img{width:100%;height:100%;object-fit:cover}
.people strong{font-family:var(--display);font-weight:800;font-size:20px;line-height:1.2}
.people span{font-size:15px;line-height:1.4;margin-top:6px;font-weight:700}
.board-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.board-list li{font-size:18px;line-height:1.4}
.board-list strong{font-family:var(--display);font-weight:800}
.docs{list-style:none;margin:0 auto;padding:0;max-width:760px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 40px}
.docs li{padding:14px 0;font-size:18px;font-weight:700;display:flex;align-items:center;gap:14px}
.docs li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--pink);flex:0 0 auto}

/* call to action block */
.cta{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.cta p{margin:0;max-width:40ch;font-size:22px}
.cta .row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.btn.ink{background:var(--ink)}

/* contact */
.cgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:96px;align-items:start}
.form{display:flex;flex-direction:column;gap:20px;background:var(--mist);border-radius:40px;padding:48px}
.form h2,.cinfo h2{margin:0;font-family:var(--display);font-weight:900;font-size:36px;line-height:1.1;letter-spacing:-.02em}
.field{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:18px}
.field input,.field select,.field textarea{font:inherit;font-weight:400;font-size:18px;padding:16px 20px;border-radius:20px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--pink);outline-offset:1px}
.form .btn{align-self:flex-start;border:0;cursor:pointer;font-family:var(--display)}
.cinfo{display:flex;flex-direction:column;gap:56px}
.cinfo .big{font-family:var(--display);font-weight:800;font-size:28px;text-decoration:none}
.cinfo .big:hover{color:var(--pink)}
.cinfo p{margin:8px 0 0;font-size:18px}
.office{display:flex;align-items:center;gap:24px;margin-top:24px}
.office .oc{flex:0 0 auto;width:120px;aspect-ratio:1;border-radius:50%;overflow:hidden}
.office .oc img{width:100%;height:100%;object-fit:cover}
.office h3{margin:0;font-family:var(--display);font-weight:800;font-size:22px}
.office p{margin:4px 0 0}

/* courses */
.courses{list-style:none;margin:0 auto;padding:0;max-width:960px}
.courses li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 32px;align-items:center;padding:28px 0}
.courses h3{margin:0;font-family:var(--display);font-weight:800;font-size:26px;line-height:1.15}
.courses p{margin:0;grid-column:1;font-size:18px}
.courses .when{grid-row:1/3;grid-column:2;display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--pink);color:#fff;font-family:var(--display);font-weight:800;font-size:20px;white-space:nowrap}
.kobo{max-width:860px;margin:0 auto;min-height:420px;border-radius:40px;background:var(--mist);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:48px}
.kobo strong{font-family:var(--display);font-weight:800;font-size:26px}
.kobo p{margin:0;max-width:34ch;font-size:18px}

/* 404 */
.nf{padding:72px 0 var(--sec);display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.nf .nfc{width:280px;aspect-ratio:1;border-radius:50%;background:var(--pink);display:flex;align-items:center;justify-content:center}
.nf .nfc .ylogo{height:200px;width:auto}
.nf h1{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(44px,6vw,88px);line-height:1;letter-spacing:-.03em}
.nf p{margin:0;max-width:36ch;font-size:22px}

/* motion */
.motion .pstage1 .pc1{animation:pop 1.3s var(--expo) .3s both}
.motion .pstage1 .pk{animation:pop 1s var(--expo) 1s both}
.motion .pstage1 .pg,.motion .pstage1 .pg2{animation:pop 1.2s var(--expo) .7s both}
.motion .phero h1{animation:rise 1.1s var(--expo) .05s both}
.motion .phero .plead,.motion .phero .pstatus{animation:rise 1.1s var(--expo) .18s both}
.motion .crow.rv.in .cr{animation:pop 1.1s var(--expo) both}
.motion .crow.rv.in .cr:nth-child(2){animation-delay:.08s}.motion .crow.rv.in .cr:nth-child(3){animation-delay:.16s}.motion .crow.rv.in .cr:nth-child(4){animation-delay:.24s}.motion .crow.rv.in .cr:nth-child(5){animation-delay:.32s}.motion .crow.rv.in .cr:nth-child(6){animation-delay:.4s}.motion .crow.rv.in .cr:nth-child(7){animation-delay:.48s}.motion .crow.rv.in .cr:nth-child(8){animation-delay:.56s}
.motion .crow.rv{opacity:1}
.motion .crow.rv .cr{opacity:0}
.motion .steps li:nth-child(2).in{animation-delay:.09s}.motion .steps li:nth-child(3).in{animation-delay:.18s}.motion .steps li:nth-child(4).in{animation-delay:.27s}.motion .steps li:nth-child(5).in{animation-delay:.36s}.motion .steps li:nth-child(6).in{animation-delay:.45s}
.motion .people li:nth-child(3n+2).in{animation-delay:.08s}.motion .people li:nth-child(3n).in{animation-delay:.16s}

@media (max-width:1060px){
  .duo2,.duo2.rev{grid-template-columns:1fr;gap:48px;justify-items:center}
  .duo2.rev .d2-c{order:0}
  .d2-c{max-width:420px}
  .trio{grid-template-columns:1fr;gap:40px;max-width:560px}
  .cgrid{grid-template-columns:1fr;gap:72px}
}
@media (max-width:720px){
  .phero{padding-top:40px}
  .phero .plead{font-size:20px}
  .pstage1{margin-top:48px}
  .head-l{margin-bottom:48px}
  .steps{gap:48px 16px}
  .steps li,.steps.n4 li{flex:0 1 calc(50% - 8px)}
  .st-c{margin-bottom:18px}
  .st-t{font-size:18px}
  .st-d{font-size:15px}
  .crow{gap:12px}
  .cr{width:calc(var(--d)*.55);margin-top:0}
  .cr-n .num{font-size:24px}.cr-n .lab{font-size:13px}
  .cr-n.big{width:calc(var(--d)*.7)}
  .cr-n.big .num{font-size:40px}.cr-n.big .lab{font-size:19px;font-weight:800}
  .cr-d,.cr-k{display:none}
  .stack{gap:80px}
  .mini{width:130px}.mini .num{font-size:30px}
  .facts{grid-template-columns:1fr}
  .facts{gap:4px 0}.facts dd{margin-bottom:20px}
  .docs{grid-template-columns:1fr}
  .say p{font-size:20px}
  .lgrid{gap:32px 40px}.lgrid img{max-width:120px;max-height:48px}
  .goal{margin:0 8px;padding:80px 0;border-radius:32px}
  .people li{width:calc(50% - 16px)}
  .people.lead li{width:calc(50% - 16px)}
  .form{padding:28px 20px;border-radius:32px}
  .courses li{grid-template-columns:1fr}
  .courses .when{grid-row:auto;grid-column:1;justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .crow .cr{opacity:1}
}

.insta .igtrack{min-width:100%;justify-content:center}
@media (max-width:720px){.insta .igtrack{justify-content:flex-start}}
.crow{max-width:1280px}
.cr-n .num{white-space:nowrap}
.sec.mist .cr-n:not(.big),.sec.mist .mini,.sec.mist .pp{background:#fff}
@media (max-width:720px){.ptitle{font-size:min(40px,calc((100vw - 48px) / (var(--ch,12) * .62 + .9)))}}
.phero{overflow-x:clip}
.people .pp{font-size:40px;margin-top:0;font-weight:900}.people .pp>span{font-size:inherit;margin:0}
@media (max-width:720px){.js .nav a[aria-current="page"]:not(.btn)::after{left:auto;right:24px;bottom:auto;top:50%;margin:-4px 0 0}}


/* ================= v5: pink fields, giant circles and the chosen animations ================= */
body{transition:background-color .5s ease}
.h2{font-size:clamp(40px,5.4vw,80px)}
.ptitle{font-size:clamp(44px,6.2vw,92px)}

/* hero on pink (I) */
.hero.pinkhero{background:var(--pink);color:#fff}
.pinkhero .hero-sub{color:#fff}
.pinkhero .hv{background:rgba(255,255,255,.18)}
.pinkhero .hdot{background:#fff}

/* button with rolling arrow (17) */
.mb{position:relative;display:inline-flex;align-items:center;gap:14px;height:64px;padding:0 8px 0 30px;border-radius:999px;background:var(--mist);color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:900;font-size:21px;overflow:hidden;isolation:isolate;align-self:flex-start;white-space:nowrap}
.mb-f{position:absolute;right:8px;top:8px;width:48px;height:48px;border-radius:24px;background:var(--pink);z-index:-1;transition:width .6s var(--expo),right .6s var(--expo),top .6s var(--expo),height .6s var(--expo)}
.mb-l{transition:color .3s ease .1s}
.mb-c{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden;flex:0 0 auto}
.mb:hover .mb-f,.mb:focus-visible .mb-f{width:100%;right:0;top:0;height:100%}
.mb:hover .mb-l,.mb:focus-visible .mb-l{color:#fff}
.mb:hover .mb-c svg,.mb:focus-visible .mb-c svg{animation:arrow .6s var(--expo)}
.mb.white{background:#fff}
.mb.onink .mb-f{background:var(--pink)}
@keyframes arrow{0%{transform:none}45%{transform:translateX(130%)}46%{transform:translateX(-130%)}100%{transform:none}}

/* circle becomes card on hover (13) */
.ar-c,.st-c{transition:border-radius .8s var(--expo)}
.ar:hover .ar-c,.ar:focus-visible .ar-c,a.stl:hover .st-c,a.stl:focus-visible .st-c{border-radius:44px}

/* the title's dot grows until the section is pink (A) */
.takeover{position:relative;overflow:hidden;isolation:isolate}
.tk-dot{position:absolute;inset:0;background:var(--pink);z-index:-1;clip-path:circle(var(--r,0px) at var(--dx,50%) var(--dy,0));pointer-events:none}
.takeover .ptitle,.takeover .lead,.takeover .ar-t,.takeover .ar-d,.takeover .st-t,.takeover .st-d{transition:color .4s ease}
.takeover.grown .ptitle .tpill{visibility:hidden}
.takeover.pink,.takeover.pink .ptitle,.takeover.pink .lead,.takeover.pink .ar-t,.takeover.pink .ar-d,.takeover.pink .st-t,.takeover.pink .st-d{color:#fff}
.takeover.pink .ar:hover .ar-t,.takeover.pink a.stl:hover .st-t{color:#fff}
.takeover.pink .st-c,.takeover.pink .ar-c{background:rgba(255,255,255,.2)}

/* giant photo circle that runs past the side of the screen (B) */
.giant{position:relative;overflow:hidden}
.gi-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:72px;align-items:center}
.gi-txt{display:flex;flex-direction:column;gap:24px;position:relative;z-index:1}
.gi-txt p{margin:0;max-width:40ch}
.gi-ph{width:128%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--mist)}
.gi-ph img{width:100%;height:100%;object-fit:cover}
.gi-dot{position:absolute;left:-60px;bottom:40px;width:180px;height:180px;border-radius:50%;background:var(--deco)}

/* quote on pink with pulse rings (H) */
.story.pinkq{background:var(--pink);color:#fff;overflow:hidden}
.pinkq .story-q figcaption,.pinkq .story-q figcaption strong{color:#fff}
.pinkq .qdot{background:#fff}
.story-wrap{position:relative;width:100%;aspect-ratio:1}
.story-wrap .story-ph{position:absolute;inset:0;z-index:1}
.h-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.75);animation:pulse 4.5s var(--ease) infinite}
.h-ring.r2{animation-delay:1.5s}.h-ring.r3{animation-delay:3s}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.85);opacity:0}}

/* projects that stack while you scroll (G) */
.stack3{display:flex;flex-direction:column;gap:40px;padding:0 max(var(--gut),env(safe-area-inset-left,0px))}
.g-card{position:sticky;top:132px;min-height:540px;border-radius:48px;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:64px;align-items:center;padding:56px;max-width:1200px;margin:0 auto;width:100%;transform-origin:50% 0;transition:transform .2s linear}
.g-card:nth-child(2){top:156px}.g-card:nth-child(3){top:180px}.g-card:nth-child(4){top:204px}
.g-card.c-pink{background:var(--pink);color:#fff}
.g-card.c-grey{background:var(--mist)}
.g-card.c-ink{background:var(--ink);color:#fff}
.g-c{aspect-ratio:1;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.15)}
.g-c img{width:100%;height:100%;object-fit:cover}
.g-t{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.g-t .g-st{font-weight:800;font-size:16px}
.g-t h3{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(32px,3.8vw,56px);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.g-t p{margin:0;max-width:36ch;font-size:20px}

/* the page turns pink while this section is in view (F) */
body.shifted{background:var(--pink)}
.shift{transition:color .5s ease}
body.shifted .shift{color:#fff}
body.shifted .shift .ptitle .tpill{background:#fff}
.f-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:72px;align-items:center}
.f-txt{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.f-txt .ptitle{justify-content:flex-start}
.f-txt p{margin:0;max-width:40ch;font-size:21px}
.f-ways{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.f-ways li{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:999px;background:rgba(0,0,0,.06);font-family:var(--display);font-weight:800;font-size:18px;transition:background-color .5s ease}
body.shifted .f-ways li{background:rgba(255,255,255,.2)}
.orb{position:relative;width:min(440px,84vw);aspect-ratio:1}
.orb-core{position:absolute;left:50%;top:50%;width:44%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--pink);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:background-color .5s ease,color .5s ease}
body.shifted .orb-core{background:#fff;color:var(--pink)}
.orb-core b{font-family:var(--display);font-weight:900;font-size:clamp(44px,5vw,64px);line-height:1}
.orb-core span{font-weight:800;font-size:18px}
.orb-arm{position:absolute;inset:0;transform:rotate(var(--a));animation:spin 34s linear infinite}
.orb-p{position:absolute;left:50%;top:0;width:25%;aspect-ratio:1;margin-left:-12.5%;border-radius:50%;overflow:hidden;transform:rotate(calc(-1 * var(--a)));animation:spin 34s linear infinite reverse}
.orb-p img{width:100%;height:100%;object-fit:cover}
@keyframes spin{to{rotate:360deg}}
.shift{overflow-x:clip}

/* the whole section is one pill, like the logo (D) */
.pillsec{padding-block:48px var(--sec)}
.d-pill{position:relative;margin:0 auto;max-width:1360px;min-height:560px;border-radius:999px;background:var(--pink);color:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:96px 12%;isolation:isolate}
.d-txt{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.d-txt p{margin:0;max-width:40ch;font-size:21px;font-weight:700}
.d-txt .mb{align-self:center}
.goo{position:absolute;inset:0;filter:url(#goo);pointer-events:none;opacity:.25;z-index:-1}
.goo i{position:absolute;top:50%;left:18%;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;background:#fff;animation:goo 8s ease-in-out infinite}
.goo i:nth-child(2){animation-delay:-2s;left:82%;width:170px;height:170px;margin:-85px 0 0 -85px}
.goo i:nth-child(3){animation-delay:-4s;left:62%;top:18%}
.goo i:nth-child(4){animation-delay:-6s;left:32%;top:82%;width:70px;height:70px;margin:-35px 0 0 -35px}
@keyframes goo{0%,100%{transform:translate(0,0)}33%{transform:translate(70px,-34px)}66%{transform:translate(-60px,30px)}}

/* rings drawn around the numbers (7) and rolling counters (8) */
.c .ringsvg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.ringsvg circle{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:302;stroke-dashoffset:0}
.c-st .ringsvg circle{stroke:var(--pink)}
.c-big .ringsvg circle{stroke:#fff}
.motion .board .ringsvg circle{stroke-dashoffset:302}
.motion .board.in .ringsvg circle{animation:draw 2.2s var(--expo) both;animation-delay:calc(var(--i) * 60ms + .3s)}
@keyframes draw{from{stroke-dashoffset:302}to{stroke-dashoffset:0}}
.odo{display:inline-flex;font-variant-numeric:tabular-nums}
.odo .dg{display:inline-block;height:1em;overflow:hidden;line-height:1}
.odo .dg>span{display:flex;flex-direction:column}
.odo .dg>span>span{height:1em}

/* page change: the pink dot fills the screen (4) */
.wipe{position:fixed;inset:0;background:var(--pink);z-index:200;pointer-events:none;clip-path:circle(0px at var(--wx,50%) var(--wy,50%));transition:clip-path .6s cubic-bezier(.7,0,.2,1)}
.wipe.full{clip-path:circle(var(--wr,150vmax) at var(--wx,50%) var(--wy,50%))}
.wipe.out{transition:clip-path .7s cubic-bezier(.16,1,.3,1)}

/* inner page top: pink half with the title, a full circle photo on the other half (E) */
.ehero{display:grid;grid-template-columns:1fr 1fr;min-height:640px}
.eh-l{background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:flex-end}
.eh-in{width:100%;max-width:640px;padding:96px 64px 96px max(var(--gut),env(safe-area-inset-left,0px))}
.eh-in h1{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(44px,4.6vw,72px);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.eh-in .plead{margin:28px 0 0;max-width:34ch;font-size:21px;line-height:1.5}
.eh-in .pstatus{display:inline-flex;margin-bottom:20px;min-height:36px;align-items:center;padding:0 16px;border-radius:999px;background:#fff;color:var(--pink);font-weight:800;font-size:16px}
.eh-r{position:relative;background:var(--mist);display:flex;align-items:center;justify-content:center;padding:48px}
.eh-c{width:min(540px,100%);aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;z-index:1}
.eh-c img{width:100%;height:100%;object-fit:cover}
.eh-k{position:absolute;right:10%;bottom:12%;width:56px;height:56px;border-radius:50%;background:var(--pink);z-index:2}
.eh-g{position:absolute;left:-60px;top:12%;width:120px;height:120px;border-radius:50%;background:#fff}
.motion .eh-c{animation:pop 1.3s var(--expo) .2s both}
.motion .eh-k{animation:pop 1s var(--expo) .9s both}
.motion .eh-in h1{animation:rise 1.1s var(--expo) both}
.motion .eh-in .plead,.motion .eh-in .pstatus{animation:rise 1.1s var(--expo) .12s both}

@media (max-width:1060px){
  .gi-grid,.f-grid{grid-template-columns:1fr;gap:56px}
  .gi-ph{width:min(560px,100%);justify-self:center}
  .g-card{grid-template-columns:1fr;gap:28px;padding:36px;border-radius:40px;min-height:0;top:96px}
  .g-card:nth-child(2){top:112px}.g-card:nth-child(3){top:128px}.g-card:nth-child(4){top:144px}
  .g-c{max-width:280px}
  .f-grid .orb{justify-self:center}
  .ehero{grid-template-columns:1fr}
  .eh-l{justify-content:flex-start}
  .eh-in{max-width:none;padding:64px max(var(--gut),env(safe-area-inset-left,0px))}
  .eh-r{padding:40px var(--gut)}
  .eh-c{width:min(440px,100%)}
}
@media (max-width:720px){
  .mb{height:56px;font-size:18px;padding-left:24px}
  .mb-f{width:40px;height:40px;border-radius:20px}.mb-c{width:40px;height:40px}
  .g-t h3{font-size:30px}.g-t p{font-size:17px}
  .g-card{padding:28px;border-radius:32px}
  .d-pill{border-radius:56px;padding:72px 24px;min-height:0}
  .d-txt p{font-size:19px}
  .gi-dot{display:none}
  .eh-in h1{font-size:44px}
  .eh-in .plead{font-size:19px}
  .ringsvg{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wipe{display:none}
  .h-ring,.orb-arm,.orb-p,.goo i{animation:none !important}
}
.projects{overflow:visible}

/* ================= v6: warm light ground, white surfaces, layered drop shadows; no black or grey fields ================= */
:root{
  --bg:#FFFCF8;
  --mist:#FFFFFF; --deco:#F4F4F7; --line:#F1EEEA;
  --sh:0 2px 3px rgba(60,25,40,.07),0 8px 18px rgba(60,25,40,.09),0 24px 48px rgba(60,25,40,.11),0 56px 110px rgba(60,25,40,.10);
  --sh-s:0 1px 2px rgba(60,25,40,.08),0 6px 14px rgba(60,25,40,.10),0 18px 36px rgba(60,25,40,.10);
  --sh-p:inset 0 1px 0 rgba(255,255,255,.3),0 2px 3px rgba(150,10,70,.18),0 10px 24px rgba(242,24,131,.30),0 30px 64px rgba(242,24,131,.26),0 60px 120px rgba(242,24,131,.16);
}
body{background:var(--bg)}
body.shifted{background:var(--pink)}
.sec.mist,.s-imp{background:transparent}
.hdr{top:0;margin:0;border-radius:0;background:rgba(255,242,248,.96);box-shadow:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.mtog{background:#fff;box-shadow:var(--sh-s)}
@media (max-width:720px){
  .js .nav{background:#fff;box-shadow:var(--sh)}
  .js .nav a:not(.btn):active{background:var(--bg)}
}
/* photos in circles float */
.hv,.c-p,.ar-c,.st-c,.story-ph,.gi-ph,.g-c,.eh-c,.orb-p,.ig,.cr,.d2-c,.pp,.office .oc,.pc,.ap{box-shadow:var(--sh)}
.cr-k,.cr-d,.ig-deco,.c-g{box-shadow:none}
.cr-n.big,.c-big,.c-k,.orb-core,.ig-follow,.core,.eh-k,.hdot,.pk,.qdot,.tpill{box-shadow:var(--sh-p)}
.c-st,.cr-n:not(.big),.mini,.way,.pp,.kobo,.form,.facts{background:#fff}
.c-st,.cr-n:not(.big),.mini,.way,.kobo,.form{box-shadow:var(--sh)}
.facts{padding:32px 40px;border-radius:32px;box-shadow:var(--sh)}
.pills li,.pills a,.f-ways li,.mb,.btn,.mtog{box-shadow:var(--sh-s)}
.pills li,.pills a,.sec.mist .pills li,.sec.mist .pills a{background:#fff}
.lgrid img{box-shadow:none;filter:grayscale(1) drop-shadow(0 8px 14px rgba(60,25,40,.12))}
.btn{box-shadow:var(--sh-p)}
.mb{background:#fff}
.mb.white{box-shadow:0 2px 3px rgba(120,10,60,.2),0 12px 28px rgba(120,10,60,.25)}
.d-pill,.goal{box-shadow:var(--sh-p)}
.g-card.c-pink{box-shadow:var(--sh-p)}
.g-card.c-white,.g-card.c-grey{background:#fff;box-shadow:var(--sh)}
.g-card.c-ink{background:#fff;color:var(--ink);box-shadow:var(--sh)}
.eh-r{background:transparent}
.eh-g{background:var(--deco)}
.ftr{box-shadow:0 -20px 60px rgba(242,24,131,.18)}
.pinkhero .hv{box-shadow:0 2px 3px rgba(120,10,60,.2),0 20px 50px rgba(120,10,60,.28),0 60px 120px rgba(120,10,60,.22)}
.pinkq .story-ph,.takeover.pink .ar-c,.takeover.pink .st-c{box-shadow:0 2px 3px rgba(120,10,60,.2),0 20px 50px rgba(120,10,60,.28),0 50px 100px rgba(120,10,60,.2)}
.f-ways li{background:#fff}
body.shifted .f-ways li{background:#fff;color:var(--pink)}
body.shifted .shift .ptitle{color:#fff}
body.shifted .shift .mb{background:#fff}
.gi-dot{background:var(--deco)}
.ig-deco{background:var(--deco)}
@media (max-width:720px){.ptitle{font-size:min(44px,calc((100vw - 48px) / (var(--ch,12) * .62 + .9)))}}

/* project cards: the whole card is the link; the button sits clear of the bottom edge */
a.g-card{text-decoration:none;color:inherit;cursor:pointer}
a.g-card.c-pink{color:#fff}
.g-card{padding:56px 56px 80px}
.g-t .mb{margin-top:12px}
a.g-card:hover .mb-f,a.g-card:focus-visible .mb-f{width:100%;right:0;top:0;height:100%}
a.g-card:hover .mb-l,a.g-card:focus-visible .mb-l{color:#fff}
a.g-card:hover .mb-c svg{animation:arrow .6s var(--expo)}
a.g-card:hover .g-c img,a.g-card:focus-visible .g-c img{transform:scale(1.05)}
.g-c img{transition:transform 1s var(--expo)}
a.g-card:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@media (max-width:1060px){.g-card{padding:36px 36px 56px}}
@media (max-width:720px){.g-card{padding:28px 28px 48px}}

/* number circles: text scales with the circle so it never crowds the edge */
.cr-n{container-type:inline-size;padding:0}
.cr-in{display:flex;flex-direction:column;align-items:center;width:72%;text-align:center}
.cr-n .num,.cr-n.big .num{font-size:min(64px,calc(72cqi / (var(--n,4) * .62)));line-height:1}
.cr-n .lab,.cr-n.big .lab{font-size:clamp(13px,6.6cqi,20px);line-height:1.3;margin-top:6px}
.cr-n.long .lab{font-size:clamp(13px,5.8cqi,17px)}
@media (max-width:720px){
  .cr-n{width:min(56vw,calc(var(--d) * .9))}
  .cr-n.big{width:min(66vw,var(--d))}
  .cr-n.long{width:min(72vw,280px)}
  .cr-n .num,.cr-n.big .num{font-size:min(48px,calc(72cqi / (var(--n,4) * .62)))}
}
@media (min-width:721px){.cr-n.long{width:max(var(--d),300px)}.cr-n .lab{font-size:clamp(14px,6.6cqi,20px)}.cr-n.long .lab{font-size:clamp(15px,5.8cqi,18px)}}

/* guiding principles as an accordion: the open item turns pink */
.acc{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.acc-i{border-radius:48px;background:#fff;box-shadow:var(--sh);transition:background-color .5s ease,color .5s ease,box-shadow .5s ease}
.acc-i.open{background:var(--pink);color:#fff;box-shadow:var(--sh-p)}
.acc-h{margin:0}
.acc-b{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 32px 30px 48px;cursor:pointer;font-family:var(--display);font-weight:900;font-size:clamp(34px,4.2vw,60px);line-height:1;letter-spacing:-.025em}
.acc-b:focus-visible{outline:3px solid var(--ink);outline-offset:-8px;border-radius:48px}
.acc-x{position:relative;flex:0 0 auto;width:68px;height:68px;border-radius:50%;background:var(--pink);box-shadow:var(--sh-p);transition:transform .7s var(--expo),background-color .4s ease}
.acc-x::before,.acc-x::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:4px;margin:-2px 0 0 -13px;border-radius:2px;background:#fff;transition:transform .7s var(--expo),background-color .4s ease}
.acc-x::after{transform:rotate(90deg)}
.acc-i:not(.open) .acc-b:hover .acc-x{transform:scale(1.08)}
.open .acc-x{background:#fff;transform:rotate(180deg);box-shadow:0 10px 24px rgba(120,10,60,.25)}
.open .acc-x::before,.open .acc-x::after{background:var(--pink)}
.open .acc-x::after{transform:rotate(0)}
.acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--expo)}
.open .acc-p,html:not(.js) .acc-p{grid-template-rows:1fr}
.acc-in{overflow:hidden;min-height:0}
.acc-say{margin:0;padding:4px 48px 52px;max-width:32em;font-family:var(--display);font-weight:800;font-size:clamp(22px,2.3vw,32px);line-height:1.3}
.vals{list-style:none;margin:0;padding:8px 48px 56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.vals li{container-type:inline-size;aspect-ratio:1;border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(120,10,60,.22),0 30px 60px rgba(120,10,60,.18);transform:scale(.6);opacity:0;transition:transform .9s var(--expo),opacity .5s ease}
.open .vals li,html:not(.js) .vals li{transform:none;opacity:1}
.open .vals li:nth-child(2){transition-delay:.08s}.open .vals li:nth-child(3){transition-delay:.16s}
.v-in{width:70%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.v-dot{width:14px;height:14px;border-radius:50%;background:var(--pink)}
.v-in strong{font-family:var(--display);font-weight:900;font-size:clamp(20px,11cqi,30px);line-height:1.1}
.v-in span:last-child{font-size:clamp(14px,6.4cqi,17px);line-height:1.4}
@media (max-width:720px){
  .acc-i{border-radius:32px}
  .acc-b{padding:22px 20px 22px 28px;font-size:34px}
  .acc-x{width:52px;height:52px}
  .acc-say{padding:0 28px 36px;font-size:21px}
  .vals{grid-template-columns:1fr;justify-items:center;padding:4px 28px 36px;gap:20px}
  .vals li{width:min(270px,100%)}
}
/* values inside the open card: text with a dot, no circles */
.vals{gap:40px 48px;padding:8px 48px 56px}
.vals li{aspect-ratio:auto;border-radius:0;background:none;color:#fff;box-shadow:none;display:block;container-type:normal}
.v-in{width:auto;align-items:flex-start;text-align:left;gap:10px}
.v-dot{width:18px;height:18px;background:#fff}
.v-in strong{font-size:clamp(26px,2.4vw,34px)}
.v-in span:last-child{font-size:18px;line-height:1.5;max-width:26ch}
@media (max-width:720px){
  .vals{justify-items:stretch;gap:28px;padding:0 28px 40px}
  .vals li{width:auto}
  .v-in strong{font-size:26px}
}
.eb{list-style:none;margin:0;padding:4px 48px 56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px}
.eb li{display:flex;flex-direction:column;gap:4px}
.eb strong{font-family:var(--display);font-weight:900;font-size:clamp(22px,2vw,28px);line-height:1.15}
.eb span{font-size:18px;line-height:1.45}
@media (max-width:720px){.eb{grid-template-columns:1fr;gap:22px;padding:0 28px 40px}.eb strong{font-size:22px}}
.eb em{font-style:normal;font-family:var(--display);font-weight:800;font-size:18px;opacity:.9}
.soc-top{gap:14px}.soc-top a{width:56px;height:56px}.soc-top a svg{transform:scale(1.15)}
@media (max-width:720px){.soc-top a{width:48px;height:48px}}

/* hero: three video circles */
.hsat{position:absolute;left:50%;top:72%;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.18);pointer-events:auto;translate:-50% -50%;box-shadow:0 2px 3px rgba(120,10,60,.2),0 16px 40px rgba(120,10,60,.26),0 46px 90px rgba(120,10,60,.2)}
.hsat video{width:100%;height:100%;object-fit:cover;display:block}
.hsat.s1{width:240px;height:240px}
.hsat.s2{width:160px;height:160px}
.motion .hsat.s1{animation:pop 1.2s var(--expo) .75s both}
.motion .hsat.s2{animation:pop 1.2s var(--expo) .95s both}
@media (max-width:720px){
  .hero-stage{height:330px}
  .hv{top:205px;width:196px;height:196px;translate:calc(-50% - 76px) -50%}
  .hsat.s1{top:232px;width:136px;height:136px;translate:calc(-50% + 98px) -50%}
  .hsat.s2{top:80px;width:92px;height:92px;translate:calc(-50% + 80px) -50%}
  .hdot{top:70px;width:28px;height:28px;--hx:-14px;--hy:-14px}
}
@media (max-width:360px){
  .hv{width:176px;height:176px;translate:calc(-50% - 70px) -50%}
  .hsat.s1{width:120px;height:120px;translate:calc(-50% + 86px) -50%}
}

/* split hero v2: the pink panel is one big circle that runs past the left edge */
.ehero{--D:clamp(560px,46vw,740px);position:relative;overflow-x:clip;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:calc(var(--D) + 96px);align-items:center}
.eh-l{background:none;position:relative;justify-content:flex-start;align-self:stretch;z-index:1}
.eh-l::before{content:"";position:absolute;top:50%;left:calc(var(--D) * -0.22);width:var(--D);height:var(--D);translate:0 -50%;border-radius:50%;background:var(--pink);box-shadow:var(--sh-p)}
.eh-in{position:relative;max-width:none;width:calc(var(--D) * 0.56);padding:0 0 0 max(var(--gut),env(safe-area-inset-left,0px));box-sizing:content-box}
.eh-r{padding:48px var(--gut) 48px 24px;min-width:0}
.eh-c{width:min(500px,100%)}
.eh-g{left:auto;right:6%;top:8%;width:96px;height:96px}
.motion .eh-l::before{animation:pop 1.2s var(--expo) both}
@media (max-width:1060px){
  .ehero{--D:clamp(480px,82vw,680px);grid-template-columns:1fr;min-height:0}
  .eh-l{min-height:calc(var(--D) + 32px);align-items:center}
  .eh-l::before{left:calc(var(--D) * -0.18)}
  .eh-in{width:auto;max-width:min(480px,calc(var(--D) * 0.6));padding:0 var(--gut)}
  .eh-r{padding:8px var(--gut) 48px}
  .eh-c{width:min(420px,100%)}
}
@media (max-width:720px){
  .ehero{--D:clamp(470px,138vw,640px)}
  .eh-in{padding:0 32px 0 max(var(--gut),env(safe-area-inset-left,0px))}
}
.pills a:hover,.pills a:focus-visible,.sec.mist .pills a:hover,.sec.mist .pills a:focus-visible{background:var(--pink);color:#fff}

/* footer: no decorative circles */
.fc{display:none}
/* menu: the current page is pink, no dot */
.nav a[aria-current="page"]:not(.btn)::after{display:none}
.nav a[aria-current="page"]:not(.btn){color:var(--pink)}

/* split hero v3: bigger circles that move */
.ehero{--D:clamp(600px,50vw,820px);--R:300px}
.eh-c{width:min(600px,100%);translate:0 calc(var(--ehp,0) * -60px)}
.eh-l::before{translate:0 calc(-50% + var(--ehp,0) * 40px)}
.eh-g{width:130px;height:130px;right:2%;top:4%;translate:0 calc(var(--ehp,0) * -140px)}
.eh-k{width:72px;height:72px;right:8%;bottom:8%;translate:0 calc(var(--ehp,0) * -100px)}
.eh-g2{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--pink);box-shadow:var(--sh-p);z-index:2;pointer-events:none}
@keyframes eh-orbit{from{transform:rotate(0deg) translateX(var(--R)) rotate(0deg)}to{transform:rotate(360deg) translateX(var(--R)) rotate(-360deg)}}
@keyframes eh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes eh-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes eh-bob{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,12px)}}
.motion .eh-l::before{animation:pop 1.2s var(--expo) both,eh-breathe 9s ease-in-out 1.3s infinite}
.motion .eh-c{animation:pop 1.3s var(--expo) .2s both,eh-float 7s ease-in-out 1.6s infinite}
.motion .eh-k{animation:pop 1s var(--expo) .9s both,eh-bob 5s ease-in-out 2s infinite}
.motion .eh-g{animation:pop 1s var(--expo) .6s both,eh-bob 8s ease-in-out 1.8s infinite reverse}
.motion .eh-g2{animation:eh-orbit 16s linear infinite}
.eh-g2{transform:rotate(-40deg) translateX(var(--R)) rotate(40deg)}
@media (max-width:1060px){
  .ehero{--D:clamp(500px,86vw,700px)}
  .eh-c{width:min(520px,100%)}
}
@media (max-width:720px){
  .ehero{--D:clamp(480px,140vw,640px)}
  .eh-c{width:100%}
  .eh-g{width:84px;height:84px}
  .eh-k{width:52px;height:52px}
  .eh-g2{width:28px;height:28px;margin:-14px 0 0 -14px}
}
@media (prefers-reduced-motion:reduce){
  .eh-c,.eh-g,.eh-k,.eh-l::before{translate:none !important}
}

/* floating menu: no bar, only the logo and the menu stay on screen */
.hdr{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;pointer-events:none}
.hdr-logo,.nav,.mtog{pointer-events:auto}
.hdr-logo svg{filter:drop-shadow(0 2px 6px rgba(255,242,248,.55))}
.nav a:not(.btn){text-shadow:0 0 10px rgba(255,242,248,.95),0 0 3px rgba(255,242,248,.9);transition:color .3s ease,text-shadow .3s ease}
.hdr-logo path,.hdr-logo circle{transition:fill .3s ease}
.hdr .btn{transition:background-color .3s ease,color .3s ease,transform .2s ease}
/* over pink or a photo, the logo and menu turn white */
.hdr-logo.on-pink .lg-pill>path:not(.lt),.hdr-logo.on-pink .lg-dot{fill:#fff}
.hdr-logo.on-pink .lt{fill:var(--pink)}
.hdr-logo.on-pink svg{filter:drop-shadow(0 2px 8px rgba(120,10,60,.3))}
.hdr-logo.on-photo svg{filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.nav a.on-pink:not(.btn){color:#fff;text-shadow:0 0 10px rgba(120,10,60,.45)}
.nav a.on-photo:not(.btn){color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.45)}
.nav a.on-pink[aria-current="page"]:not(.btn),.nav a.on-photo[aria-current="page"]:not(.btn){color:#fff;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.nav a.btn.on-pink{background:#fff;color:var(--pink)}
@media (max-width:720px){
  .nav a:not(.btn){text-shadow:none}
}

/* Instagram: two rows of three circles, the top row drifts right, the bottom row drifts left */
.igmq{display:grid;gap:clamp(16px,2.4vw,32px);overflow:hidden;padding:12px 0 36px}
.igline{overflow:visible}
.igloop{display:flex;width:max-content;animation:ig-left 30s linear infinite}
.igline.to-right .igloop{animation-name:ig-right}
.igline.to-left .igloop{animation-delay:-8s}
.igset{display:flex;gap:var(--igg);padding-right:var(--igg)}
.igmq{--igg:clamp(16px,3vw,48px);--igd:clamp(200px,min(calc((100vw - 2 * var(--igg)) / 3.4),calc((100vh - 300px) / 2)),400px)}
.igmq .ig{width:var(--igd);height:var(--igd);margin:0;flex:0 0 auto}
.igmq:hover .igloop,.igmq:focus-within .igloop{animation-play-state:paused}
@keyframes ig-left{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@keyframes ig-right{from{transform:translateX(-25%)}to{transform:translateX(0)}}
.ig-cta{display:flex;justify-content:center;margin-top:8px}
@media (max-width:720px){
  .igmq{--igd:58vw;--igg:14px}
  .igloop{animation-duration:24s}
}
@media (prefers-reduced-motion:reduce){
  .igloop{animation:none}
  .igset[aria-hidden]{display:none}
  .igmq .igset{flex-wrap:wrap;justify-content:center;width:100vw}
}

/* hero: on short screens the title shrinks so the video circles get the room */
@media (min-width:721px){
  .hero-copy{padding-top:min(4vh,40px)}
  .hero h1{font-size:clamp(44px,min(6.3vw,9.5vh),96px)}
  .hero-sub{font-size:clamp(22px,min(2.6vw,4.4vh),36px)}
}
/* long section titles shrink so the title and its dot stay inside the page */
@media (min-width:721px){.ptitle{font-size:min(clamp(44px,6.2vw,92px),calc((min(100vw,1360px) - 160px) / (var(--ch,12) * .56 + 1.2)))}}
/* friends and partners: bigger logos in full colour, faster band */
.lg{height:120px;margin-right:72px}
.lg img{max-height:96px;max-width:240px;filter:none;opacity:1}
.motion .mtrack{animation-duration:22s}
@media (max-width:720px){.lg{height:84px;margin-right:40px}.lg img{max-height:64px;max-width:160px}.motion .mtrack{animation-duration:16s}}
/* footer: social icons to the right of the tagline, level with the bottom of the logo */
.ftr-top{align-items:stretch}
.ftr-say{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:center}
.ftr-say .soc-top{align-self:end;flex-wrap:nowrap;margin:0}
@media (max-width:720px){.ftr-say{grid-template-columns:1fr;row-gap:28px}.ftr-say .soc-top{align-self:start}}
/* very light pink page background on every page */
:root{--bg:#FFF2F8}
body{background:#FFF2F8}
/* text uses the room it has: wider intros, no single word left alone on the last line */
p{text-wrap:pretty}
.head .lead,.lead{max-width:min(72ch,100%)}
.cta p,.nf p{max-width:58ch}
.gi-txt p,.f-txt p,.d-txt p{max-width:50ch}
.phero .plead{max-width:52ch}
.eh-in .plead{max-width:40ch}
/* footer at half height */
.ftr{padding-top:56px;border-radius:40px 40px 0 0}
.flogo{height:clamp(150px,13vw,200px)}
.ftr-top{gap:56px}
.ftr-tag{font-size:clamp(22px,2vw,28px)}
.soc-top a{width:48px;height:48px}.soc-top a svg{transform:none}
.ftr-cols{margin-top:48px;padding-top:28px;gap:24px}
.ftr-cols h3{font-size:18px;margin-bottom:6px}
.ftr-cols p{font-size:16px;line-height:1.5}
.ftr-legal{padding:32px 0 24px;font-size:15px}
@media (max-width:720px){
  .ftr{padding-top:40px;border-radius:28px 28px 0 0}
  .flogo{height:120px}
  .ftr-top{gap:24px}
  .ftr-tag{font-size:19px}
  .ftr-say{row-gap:18px}
  .soc-top a{width:42px;height:42px}
  .ftr-cols{margin-top:32px;padding-top:24px;gap:20px 24px}
  .ftr-cols p{font-size:15px}
  .ftr-legal{padding:24px 0 20px;font-size:14px}
}
/* front page: International Somali Awards card */
.isa-home{padding-block:32px}
.isa-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:center;padding:40px 56px 40px 40px;border-radius:999px;background:#fff;box-shadow:var(--sh);color:var(--ink);text-decoration:none;max-width:1100px;margin:0 auto}
.isa-ph{display:block;width:clamp(180px,20vw,260px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:var(--sh)}
.isa-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--expo)}
.isa-card:hover .isa-ph img{transform:scale(1.06)}
.isa-t{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.isa-st{display:inline-flex;min-height:34px;align-items:center;padding:0 16px;border-radius:999px;background:var(--pink);color:#fff;font-weight:800;font-size:16px}
.isa-t h2{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(30px,3.4vw,48px);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.isa-p{font-size:20px;line-height:1.5;max-width:40ch}
.isa-card .mb{margin-top:6px}
a.isa-card:hover .mb-f{width:100%;right:0;top:0;height:100%}
a.isa-card:hover .mb-l{color:#fff}
@media (max-width:720px){.isa-card{grid-template-columns:1fr;justify-items:center;text-align:center;border-radius:40px;padding:32px 24px;gap:24px}.isa-t{align-items:center}.isa-p{font-size:18px}}
img[src*="2992a8509ed1f21fc0e35850f0800a24"]{object-position:50% 8%}
/* front page: Meet our youth video */
.myt-box{position:relative;max-width:1100px;margin:0 auto;border-radius:48px;overflow:hidden;box-shadow:var(--sh);background:#fff;aspect-ratio:16/9}
.myt-v{display:block;width:100%;height:100%;object-fit:cover;background:#fff}
.myt-play{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;border:0;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh-p);transition:transform .4s var(--expo)}
.myt-play svg{margin-left:6px}
.myt-play:hover,.myt-play:focus-visible{transform:scale(1.08)}
.myt-box.playing .myt-play{opacity:0;pointer-events:none;transform:scale(.6);transition:opacity .3s ease,transform .3s ease}
@media (max-width:720px){.myt-box{border-radius:28px}.myt-play{width:80px;height:80px;margin:-40px 0 0 -40px}.myt-play svg{width:26px;height:26px}}

/* menu: no glow behind the logo or the links */
.hdr-logo svg,.hdr-logo.on-pink svg,.hdr-logo.on-photo svg{filter:none}
.nav a:not(.btn),.nav a.on-pink:not(.btn){text-shadow:none}
.nav a.on-photo:not(.btn){text-shadow:0 1px 2px rgba(0,0,0,.45)}
.hdr .btn{box-shadow:none}
/* partner band a little slower */
.motion .mtrack{animation-duration:30s}
@media (max-width:720px){.motion .mtrack{animation-duration:22s}}

/* three overlapping photo circles in one duo */
.d2-c.trio{position:relative;border-radius:0;overflow:visible;background:none;box-shadow:none}
.d2-c.trio span{position:absolute;display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:var(--sh);background:var(--mist)}
.d2-c.trio img{width:100%;height:100%;object-fit:cover}
.d2-c.trio .t1{left:0;top:10%;width:72%;z-index:1}
.d2-c.trio .t2{right:0;top:0;width:42%;z-index:2}
.d2-c.trio .t3{right:6%;bottom:-4%;width:46%;z-index:3}
.d2-t h3+p+h3,.d2-t p+h3{margin-top:28px}
.motion .d2-c.trio.rv,.motion .d2-c.trio.rv.in{opacity:1;animation:none}
.motion .d2-c.trio.rv span{opacity:0}
.motion .d2-c.trio.rv.in span{animation:pop 1.1s var(--expo) both}
.motion .d2-c.trio.rv.in .t2{animation-delay:.22s}.motion .d2-c.trio.rv.in .t3{animation-delay:.44s}