/* AKIPIA — components + pages. Built on tokens.css (Figma design system 36:3112); responsive rules in responsive.css. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ivory);color:var(--walnut);font-family:var(--font);-webkit-font-smoothing:antialiased;font-weight:400}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:400}
img{display:block;height:auto}
.i{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}

/* ---------- type (tokens: Typography Desktop / Mobile) ---------- */
.display{font-size:var(--t-display);line-height:var(--l-display);letter-spacing:var(--k-display)}
.h1{font-size:var(--t-h1);line-height:var(--l-h1);letter-spacing:var(--k-h1)}
.h2{font-size:var(--t-h2);line-height:var(--l-h2);letter-spacing:var(--k-h2)}
.h3{font-size:var(--t-h3);line-height:var(--l-h3);letter-spacing:var(--k-h3)}
.h4{font-size:var(--t-h4);line-height:var(--l-h4);letter-spacing:var(--k-h4)}
.h5{font-size:var(--t-h5);line-height:var(--l-h5);letter-spacing:var(--k-h5);font-weight:500}
.h6{font-size:var(--t-h6);line-height:var(--l-h6);font-weight:500}
.lead{font-size:var(--t-lead);line-height:var(--l-lead);letter-spacing:var(--k-lead)}
.body-l{font-size:var(--t-body-l);line-height:var(--l-body-l)}
.body{font-size:var(--t-body);line-height:var(--l-body)}
.body-s{font-size:var(--t-body-s);line-height:var(--l-body-s)}
.meta{font-size:var(--t-meta);line-height:var(--l-meta)}
.label{font-size:var(--t-label);line-height:var(--l-label);letter-spacing:var(--k-label);text-transform:uppercase;font-weight:500}
.caption{font-size:var(--t-caption);line-height:var(--l-caption)}
.num{font-size:var(--t-number);line-height:var(--l-number);letter-spacing:var(--k-number);font-weight:200}

/* ---------- atoms ---------- */
.sec-label{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;background:var(--taupe40);color:var(--walnut)}
.sec-label svg{width:16px;height:14px}
.dark .sec-label{background:var(--ivory10);color:var(--ivory)}
.mini{width:40px;height:37px;flex:none}
.mini path{fill:var(--walnut20);transition:fill .5s}
.mini path.on{fill:var(--walnut)}
.dark .mini path{fill:var(--ivory40)} .dark .mini path.on{fill:var(--ivory)}

/* Button (DS 2015:5761) — sizes L 52 / M 48 (mobile) / S 40; Primary · Secondary · Secondary on dark */
.btn{display:inline-flex;align-items:center;font-size:var(--t-btn);line-height:16px;font-weight:500;height:var(--btn-h);white-space:nowrap;transition:background .25s,color .25s,border-color .25s;cursor:pointer}
.btn .i{width:20px;height:20px}
.btn.primary{background:var(--walnut);color:var(--ivory);padding:0 6px 0 20px;gap:20px}
.btn.primary .tile{display:grid;place-items:center;width:var(--btn-tile);height:var(--btn-tile);background:var(--clay);transition:background .25s}
.btn.primary:hover .tile{background:var(--clayHover)}
.btn.secondary{border:1px solid var(--walnut40);padding:0 20px;gap:10px;color:var(--walnut)}
.btn.secondary:hover{background:var(--walnut10);border-color:var(--walnut)}
.btn.on-dark{border:1px solid var(--ivory40);color:var(--ivory);padding:0 20px;gap:10px}
.btn.on-dark:hover{background:var(--ivory10);border-color:var(--ivory)}
.btn[aria-disabled="true"]{pointer-events:none;color:var(--walnut40)} .btn.primary[aria-disabled="true"]{background:var(--walnut10)} .btn.primary[aria-disabled="true"] .tile{background:var(--walnut20)}
.btn.s{height:40px;font-size:var(--t-btn-s);line-height:14px}
.btn.s.primary{padding:0 5px 0 16px;gap:16px}.btn.s.primary .tile{width:30px;height:30px}.btn.s .i{width:16px;height:16px}
.btn.s.secondary,.btn.s.on-dark{padding:0 16px;gap:8px}
.btn .swap{position:relative;width:20px;height:20px}
.btn.s .swap{width:16px;height:16px}
.btn .swap .i{position:absolute;inset:0;transition:opacity .2s,transform .25s}
.btn .swap .i+.i{opacity:0;transform:translateX(-4px)}
.btn:hover .swap .i:first-child{opacity:0;transform:translateX(4px)}
.btn:hover .swap .i+.i{opacity:1;transform:none}

/* ---------- header (DS 2015:6978 Floating) ---------- */
.header{position:fixed;z-index:50;top:24px;left:max(24px, calc((100vw - 1392px) / 2));right:max(24px, calc((100vw - 1392px) / 2));height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;
  background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:var(--ivory)}
.header .logo img{width:140px;height:auto}
.nav{display:flex;gap:40px;font-size:var(--t-nav);line-height:16px;font-weight:500}
.nav a{padding:8px 0;transition:opacity .3s ease}
.nav:hover a{opacity:.6}
.nav a:hover{opacity:1}
/* Language switch (DS 2015:6374): 1px frame, 3px inset, 36×26 cells */
.lang{display:flex;padding:3px;border:1px solid var(--ivory40);font-size:var(--t-label);line-height:14px;letter-spacing:var(--k-label);font-weight:500}
.lang span{display:grid;place-items:center;width:36px;height:26px;color:var(--ivory70);cursor:pointer;transition:color .3s}
.lang span:hover{color:var(--ivory)} .lang span.on{background:var(--ivory);color:var(--walnut)}
/* burger + mobile menu (DS Header · Mobile / Open) — hidden on desktop */
.burger{display:none}
.lang-spacer{display:block;width:80px}
.mmenu{display:none}

/* a11y: skip link, visible keyboard focus, breadcrumb list */
.skip{position:fixed;z-index:100;left:16px;top:-60px;padding:12px 16px;background:var(--walnut);color:var(--ivory);font-weight:500;transition:top .2s}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.dark :focus-visible,.header :focus-visible,.footer :focus-visible,.mmenu :focus-visible{outline-color:var(--ivory)}
.crumb ol{display:contents;list-style:none}
.crumb li{display:flex}

/* back to top + copy link are buttons */
.totop,button[data-share]{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;transition:opacity .3s ease}
.totop:hover{opacity:.6}
.ameta .share button{display:inline-flex;align-items:center;gap:8px}

/* founder names are buttons (a11y) — reset to look like the design */
button.fname{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
button.fname:focus-visible{outline:2px solid var(--ivory);outline-offset:4px}

/* hero photo is placed by JS (main.js heroFrame) — keep it invisible until then, so the first paint never shifts (CLS) */
.hero .photo{opacity:0;transition:opacity .5s ease}
.hero.ready .photo{opacity:1}

/* reduced motion: hero without the scroll stage, founding as a static (unpinned) composition */
.rm .hero{height:100vh;height:100svh}
@media (min-width:1024px){
  .rm .founding{height:auto}
  .rm .founding .stage{position:relative;height:calc(900px * var(--fs, 1))}
}

/* mobile-only bits (shown in responsive.css) */
.scene-in{position:absolute;inset:0}
.row .thumb,.m-back,.m-rel{display:none}

/* ---------- sections ---------- */
section{position:relative}
.pad{padding:140px var(--gut)}
.sec-head{display:flex;flex-direction:column;gap:20px;margin-bottom:64px}
.dark{background:var(--walnut);color:var(--ivory)}
.w80{background:var(--walnut80);color:var(--ivory)}

/* hero */
.hero{height:320vh}
.hero .stage{position:sticky;top:0;height:100vh;overflow:hidden}
.hero .intro{position:absolute;left:var(--gut);right:var(--gut);top:228px;display:flex;justify-content:space-between;align-items:flex-end;will-change:transform,opacity}
.hero .intro .display{margin-top:24px}
.hero .actions{display:flex;gap:16px;padding-bottom:18px}
/* hero animation is compositor-only (BLA-266): the photo is revealed with clip-path, the symbol strokes move with transform */
.hero .photo{position:absolute;inset:0;background:url(assets/bg-1.jpg) center/cover no-repeat;clip-path:inset(600px var(--gut) 0 var(--gut));will-change:clip-path}
.hero .sym{position:absolute;left:0;top:0;width:720px;height:646px;transform-origin:0 0}
.hero .st{position:absolute;overflow:visible;opacity:0;will-change:transform,opacity;backface-visibility:hidden}
.hero .st path{fill:var(--ivory)}
#sLeft{left:0;top:165.93px;width:322.023px;height:479.787px} #sRight{left:299.06px;top:0;width:299.508px;height:518.76px} #sBase{left:143.48px;top:562.35px;width:576.525px;height:39px}

/* who we are */
.who .statement{max-width:1208px}
.who .cols{position:relative;display:grid;grid-template-columns:repeat(3,312px);column-gap:136px;margin-top:84px;padding-top:40px}
.who .cols::before{content:"";position:absolute;top:0;height:1px;left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));background:var(--walnut20)}
.who .col{position:relative;display:flex;flex-direction:column;gap:40px}
.who .col+.col::before{content:"";position:absolute;left:-40px;top:-40px;bottom:0;width:1px;background:var(--walnut20)}

/* founding */
.founding{height:280vh}
.founding .stage{position:sticky;top:0;height:100vh;overflow:hidden}
.founding .frame{position:absolute;left:0;top:50%;width:1440px;height:900px;transform:translateY(-50%)}
.founding .heading{position:absolute;left:60px;top:120px;display:flex;flex-direction:column;gap:20px}
.scene{position:absolute;inset:0;overflow:hidden}
.scene .ph{position:absolute;left:-17px;top:424px;width:760px;height:476px;background-size:cover;background-position:center}
.scene .fade{position:absolute}
.scene svg.lines{position:absolute;left:0;top:0;width:1440px;height:900px}
.scene svg.lines path{transition:fill .8s}
.ftext{position:absolute;left:844px;top:280px;width:536px}
.ftext .who-label{color:var(--ivory70);margin-bottom:16px}
.fname{display:flex;align-items:center;gap:20px}
.fname.clickable{cursor:pointer;transition:opacity .3s ease}
.fname.clickable:hover{opacity:.7}
.fbio{overflow:hidden;transition:max-height .7s cubic-bezier(.2,.7,.2,1),opacity .5s;max-height:0;opacity:0}
.fbio.open{max-height:400px;opacity:1}
.fbio p{color:var(--ivory70);margin-top:24px}
.fbio .btn{margin-top:32px}
.partners{margin-top:64px}
.partners .label{color:var(--ivory70);margin-bottom:16px;display:block}
.prow{border-top:1px solid var(--ivory20);padding:24px 0}
.prow:last-child{border-bottom:1px solid var(--ivory20)}
.prow .fname{gap:24px}
.fname .h3,.fname .h4{font-size:var(--t-fname);line-height:var(--l-fname);letter-spacing:var(--k-fname)}
.prow .fbio p{margin-top:12px;padding-left:64px}

/* leadership */
.people{display:grid;grid-template-columns:repeat(3,424px);gap:64px 24px}
.person{position:relative;height:424px;background:var(--taupe40);overflow:hidden;cursor:pointer;transition:background .6s cubic-bezier(.22,.61,.36,1)}
.person .sym{position:absolute;left:50%;top:48px;width:300px;height:270px;transform:translateX(-50%) scale(.96);color:rgba(245,245,240,.2);opacity:0;transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.person img.p{position:absolute;left:0;top:-54px;width:424px;height:636px}  /* Figma 27.10: photos zoomed ×1.3, same for all */
.person .bar{position:absolute;left:0;right:0;bottom:0;padding:24px;background:rgba(45,35,30,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--ivory);transition:background .6s cubic-bezier(.22,.61,.36,1)}
.person .role{display:block;margin-top:4px;color:var(--ivory70)}
.person .pbio{display:grid;grid-template-rows:0fr;opacity:0;color:var(--ivory70);transition:grid-template-rows .6s cubic-bezier(.22,.61,.36,1),opacity .5s ease,margin .6s cubic-bezier(.22,.61,.36,1)}
.person .pbio>span{overflow:hidden}
.person:hover{background:var(--walnut)}
.person:hover .sym{opacity:1;transform:translateX(-50%) scale(1)}
.person:hover .bar{background:var(--walnut)}
.person:hover .pbio{grid-template-rows:1fr;opacity:1;margin-top:16px}
.person.empty .sym{opacity:1;top:120px;width:120px;height:108px;color:var(--ivory);transform:translateX(-50%)}
.person.empty .bar{background:var(--walnut70)}
.person.empty:hover .sym{color:rgba(245,245,240,.3)}

/* projects */
.proj-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:64px}
.proj-top p{width:648px;color:var(--walnut70);margin-top:32px}
.cards{display:grid;grid-template-columns:repeat(3,424px);gap:24px}
.card{position:relative;height:480px;overflow:hidden;color:var(--ivory);cursor:pointer}
.card .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.card{clip-path:polygon(0 64px,37px 0,100% 0,100% 100%,0 100%)}
.who .statement .g{color:var(--walnut40)}
.card .panel{position:absolute;left:0;right:0;bottom:64px;top:260px;padding:24px;background:rgba(45,35,30,.45);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:top .7s cubic-bezier(.2,.7,.2,1),background .5s}
.card .loc{color:var(--ivory70);display:block;margin-bottom:12px}
.card .desc{margin-top:24px;color:var(--ivory70);opacity:0;transition:opacity .4s .1s}
.card .cta{position:absolute;left:0;right:0;bottom:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding-left:24px;background:rgba(45,35,30,.45);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:background .4s}
.card .cta .tile{display:grid;place-items:center;width:64px;height:64px;background:var(--clay);transition:background .4s}
.card:hover .panel{top:100px;background:rgba(45,35,30,.55)}
.card:hover .desc{opacity:1}
.card:hover .cta{background:var(--clay)}
.card:hover .cta .tile{background:var(--clayHover)}
.card:hover .img{transform:scale(1.03)}
.cta .swap{position:relative;width:20px;height:20px}
.cta .swap .i{position:absolute;inset:0;width:20px;height:20px;transition:opacity .2s}
.cta .swap .i+.i,.card:hover .cta .swap .i:first-child{opacity:0}
.card:hover .cta .swap .i+.i{opacity:1}
.center{display:flex;justify-content:center;margin-top:64px}

/* news */
.news-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:64px}
.rows{border-top:1px solid var(--walnut10)}
.row{position:relative;display:grid;grid-template-columns:336px 1fr 48px;align-items:center;padding:32px 0;border-bottom:1px solid var(--walnut10);cursor:pointer;transition:background .35s,color .35s,padding .35s}
.row .date{color:var(--walnut70);transition:color .35s}
.row .t{max-width:680px}
.row .arr{justify-self:end;position:relative;width:24px;height:24px}
.row .arr .i{position:absolute;inset:0;transition:opacity .2s}
.row .arr .i+.i{opacity:0}
.row:hover{background:var(--walnut);color:var(--ivory);padding-left:24px;padding-right:24px}
.row:hover .date{color:var(--ivory70)}
.row:hover .arr .i:first-child{opacity:0}.row:hover .arr .i+.i{opacity:1}
.preview{position:fixed;z-index:40;left:0;top:0;width:264px;height:176px;pointer-events:none;background-size:cover;background-position:center;opacity:0;transform:translate(-50%,-50%) scale(.92);transition:opacity .25s,transform .25s}
.preview.on{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* footer */
.band{position:relative;height:360px;background:url(assets/bg-2.jpg) center/cover no-repeat;overflow:hidden}
.band img{position:absolute;right:-120px;top:-40px;width:900px;opacity:.4}
.footer{background:var(--walnut);color:var(--ivory);padding:96px var(--gut) 0}
.fgrid{display:grid;grid-template-columns:448px 224px 224px 224px 200px;padding-bottom:64px}
.fbrand img{width:312px}
.fbrand .ig{display:block;color:var(--ivory70);margin-top:16px}
.fbrand .li{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--ivory20);margin-top:32px}
.fbrand .li img{width:16px}
.fcol .label{color:var(--ivory70);display:block;margin-bottom:24px}
.fcol a,.fcol span:not(.label){display:block;font-size:16px;line-height:24px}
.fcol a+a{margin-top:8px}
.fcol a{transition:opacity .3s ease}
.fcol a:hover,.fbottom a:hover{opacity:.6}
.fcol.muted span:not(.label){color:var(--ivory60);font-size:14px;line-height:22px}
.fcol.muted span:not(.label)+span:not(.label){margin-top:10px}
.fbottom{display:flex;justify-content:space-between;border-top:1px solid var(--ivory10);padding:14px 0;color:var(--ivory60)}

/* reveal */
.rv{opacity:0;transform:translateY(32px)}

/* sub-pages: Figma exports with clickable hotspots */
.shot{display:block}
.shot-in{position:relative;width:1440px;margin:0 auto}
.shot-in img{display:block;width:1440px;height:auto}
.hs{position:absolute;display:block;cursor:pointer;transition:background .3s ease}
.hs:hover{background:rgba(155,100,90,.08)}
.band-shot{background:var(--walnut)}
.nav a.active{opacity:1}

/* standard page hero (live) */
.phero{position:relative;height:500px;background:var(--ivory);overflow:hidden}
.phero .in{position:relative;width:1440px;height:500px;margin:0 auto}
.phero .sg{position:absolute;left:842px;top:-200px;width:653px;height:585px;color:var(--taupe70)}
.phero .crumb{position:absolute;left:60px;top:120px;display:flex;gap:8px;font-size:14px;line-height:20px}
.phero .crumb a{color:var(--walnut70);transition:color .3s ease}.phero .crumb a:hover{color:var(--walnut)}
.phero .crumb .sep{color:var(--walnut20)}
.phero h1{position:absolute;left:60px;top:320px}
.phero .claim{position:absolute;right:60px;bottom:96px;max-width:424px;text-align:left;color:var(--walnut70)}

/* photo page hero (project / article) — photo band runs full width */
.photohero .pband{position:relative;height:400px;background-size:cover;background-position:center;overflow:hidden}
.photohero .pbody{position:relative;background:var(--ivory);overflow:hidden}
.photohero .in{position:relative;width:1440px;height:100%;margin:0 auto}
.photohero .sg{position:absolute;left:842px;width:653px;height:585px}
.photohero .pband .sg{top:-70px;color:rgba(245,245,240,.4)}
.photohero .pbody .sg{top:-470px;color:var(--taupe70)}
.photohero .head{position:absolute;left:60px;top:64px}
.photohero .crumb{display:flex;gap:8px;font-size:14px;line-height:20px;margin-bottom:16px}
.photohero .crumb a{color:var(--walnut70);transition:color .3s ease}.photohero .crumb a:hover{color:var(--walnut)}
.photohero .crumb .sep{color:var(--walnut20)}
.photohero .side{position:absolute;right:60px;bottom:96px;max-width:424px;text-align:left;color:var(--walnut70)}
.shot.fade-r .shot-in::after{content:"";position:absolute;top:0;right:0;width:120px;height:100%;background:linear-gradient(90deg,rgba(45,35,30,0),#2D231E);pointer-events:none}

/* bands above the footer — live, full width */
.cband{position:relative;height:628px;overflow:hidden}
.cband::before{content:"";position:absolute;inset:0;background:url(assets/bg-1.jpg) center/cover no-repeat;transform:scaleX(-1)}
.cband .in{position:relative;width:1440px;height:100%;margin:0 auto}
.cband .sym{position:absolute;left:700px;top:-150px;width:900px;opacity:.4}
.cband .txt{position:absolute;left:60px;top:120px;width:560px}
.cband .h2{margin-top:20px}
.cband .crows{margin-top:64px}
.cband .crow{display:block;font-size:20px;line-height:26px;padding:20px 0;border-top:1px solid var(--walnut40);transition:opacity .3s ease}
.cband .crow:hover{opacity:.6}
.cband .btn{margin-top:40px}
.nband{position:relative;display:block;height:640px;overflow:hidden;color:var(--ivory);clip-path:polygon(0 130px,75px 0,100% 0,100% 100%,0 100%)}
.nband .img{position:absolute;inset:0;background:url(assets/roma.jpg) center 35%/cover no-repeat;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.nband:hover .img{transform:scale(1.03)}
.nband .panel{position:absolute;left:0;right:0;bottom:0;height:268px;background:rgba(45,35,30,.45);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.nband .in{position:relative;width:1440px;height:100%;margin:0 auto}
.nband .k{position:absolute;left:60px;top:40px;color:var(--ivory70)}
.nband .display{position:absolute;left:60px;top:88px}
.nband .tile{position:absolute;right:60px;top:86px;display:grid;place-items:center;width:96px;height:96px;background:var(--clay);transition:background .3s ease}
.nband:hover .tile{background:var(--clayHover)}
.nband .tile .i{width:24px;height:24px;color:var(--ivory)}

.projects-sec{background:var(--taupe20);color:var(--walnut)}
.projects-sec .sec-label{background:var(--taupe40)}

/* article: left meta column stays in view while reading */
.sticky-col{position:absolute;left:60px;top:140px;width:312px;bottom:140px}
.sticky-col .stick{position:sticky;top:112px;width:312px}
.sticky-col img{display:block;width:312px;height:auto}


/* modern formats for the CSS photo backgrounds (BLA-260; variants from scripts/images.py) */
.hero .photo,.cband::before{background-image:image-set(url(assets/img/bg-1-1600.avif) type("image/avif"),url(assets/img/bg-1-1600.webp) type("image/webp"),url(assets/bg-1.jpg) type("image/jpeg"))}
.band{background-image:image-set(url(assets/img/bg-2-1600.avif) type("image/avif"),url(assets/img/bg-2-1600.webp) type("image/webp"),url(assets/bg-2.jpg) type("image/jpeg"))}

/* Lenis 1.3 (vendor/lenis.min.js) recommended base styles */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}

/* ---------- live sub-page sections ---------- */
.rule{position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;background:var(--walnut20)}
.link-l{font-size:16px;line-height:22px;font-weight:500}

/* michal hero */
.mhero{position:relative;height:900px;overflow:hidden}
.mhero .frame{position:absolute;left:50%;top:0;width:1440px;height:900px;transform:translateX(-50%)}
.mhero .scene{position:absolute;inset:0}
.mhero .ph{position:absolute;background-size:cover;background-position:center}
.mhero .fade{position:absolute}
.mhero svg.lines{position:absolute;left:0;top:0;width:1440px;height:900px}
.mhero .mlines path{fill:rgba(245,245,240,.4)} .mhero .mlines #mLeft{fill:var(--ivory)}
.mhero .crumb{position:absolute;left:60px;top:120px;display:flex;gap:8px;font-size:14px;line-height:20px;color:var(--ivory)}
.mhero .crumb a{color:var(--ivory60);transition:color .3s ease}.mhero .crumb a:hover{color:var(--ivory)}.mhero .crumb .sep{color:var(--ivory40)}
.mhero .mhead{position:absolute;left:60px;bottom:140px;width:536px;display:flex;flex-direction:column;gap:24px}
.bio .statement{max-width:1208px}
.bio{display:grid;grid-template-columns:672px 648px;align-items:start}
.bio .bio-side{position:sticky;top:112px}
.bio .bio-body{margin:64px 0 0 0;width:648px;display:flex;flex-direction:column;gap:24px;color:var(--walnut70)}
.bio .bio-body .btn{align-self:flex-start;margin-top:16px;color:var(--walnut)}

/* projects intro */
.intro-sec .g{color:var(--ivory40)}
.intro-sec .intro-body p+p{margin-top:16px}
.intro-sec .intro-body{margin:64px 0 0 672px;width:648px;color:var(--ivory70)}

/* story + quote */
.story{display:grid;grid-template-columns:536px 648px;column-gap:136px}
.story .story-text{display:flex;flex-direction:column;gap:24px;color:var(--walnut70)}
.quote-sec{position:relative;height:618px;overflow:hidden}
.quote-sec .in{position:relative;width:1440px;height:100%;margin:0 auto}
.quote-sec .qsym{position:absolute;left:1000px;top:30px;width:624px;opacity:.4}
.quote-sec blockquote{position:absolute;left:60px;top:96px;width:1088px}
.quote{font-size:var(--t-quote);line-height:var(--l-quote);letter-spacing:var(--k-quote);font-weight:200}
.quote-sec .attr{display:flex;gap:16px;margin-top:64px}
.quote-sec .attr .rule{position:static;display:block;width:40px;height:1px;background:var(--ivory40);margin-top:13px}

/* news grid */
.news-grid{padding-top:80px}
.ncards{display:grid;grid-template-columns:repeat(3,424px);gap:24px}
.ncard{display:flex;flex-direction:column;height:622px}
.ncard .nimg{height:284px;overflow:hidden;clip-path:polygon(0 64px,37px 0,100% 0,100% 100%,0 100%)}
.ncard .nimg div{width:100%;height:100%;background-size:cover;background-position:center;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.ncard:hover .nimg div{transform:scale(1.04)}
.ncard .ndate{color:var(--walnut70);margin-top:24px}
.ncard .nt{margin-top:16px}
.ncard .nex{margin-top:16px;color:var(--walnut70);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.clink{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px;border-top:1px solid var(--walnut20);transition:border-color .4s ease}
.clink .tile{display:grid;place-items:center;width:48px;height:48px;background:var(--clay);color:var(--ivory);transition:background .4s ease}
.clink .swap{position:relative;display:block;width:24px;height:24px}
.clink .swap .i{position:absolute;inset:0;width:24px;height:24px;transition:opacity .25s ease,transform .3s ease}
.clink .swap .i+.i{opacity:0;transform:translateX(-4px)}
.ncard:hover .clink{border-color:var(--walnut)} .ncard:hover .clink .tile{background:var(--clayHover)}
.ncard:hover .swap .i:first-child{opacity:0;transform:translateX(4px)} .ncard:hover .swap .i+.i{opacity:1;transform:none}

/* article */
.acols{display:grid;grid-template-columns:312px 760px;column-gap:136px}
.acol-l{position:relative}
.ameta{position:sticky;top:112px;background:var(--taupe20);padding:32px;display:flex;flex-direction:column;gap:32px}
.ameta .back{display:flex;align-items:center;gap:8px}
.ameta .back .i{width:20px;height:20px}
.ameta div{display:flex;flex-direction:column;gap:8px}
.ameta .label{color:var(--walnut70)}
.ameta .ul{text-decoration:underline;text-underline-offset:4px}
.ameta .share{display:flex;gap:24px}
.ameta .share a{display:inline-flex;align-items:center;gap:8px} .ameta .share .si{width:20px;height:20px;flex:none}
.ameta a{transition:opacity .3s ease}.ameta a:hover{opacity:.6}
.abody{color:var(--walnut70)}
.abody h2,.abody h3,.abody h4,.abody h5,.abody h6{color:var(--walnut);margin:64px 0 24px}
.abody h5{margin-bottom:0} .abody h6{margin:24px 0 24px;font-weight:500}
.abody>p+p{margin-top:24px}
.aquote{margin-top:64px;padding-left:24px;border-left:2px solid var(--clay)}
.abody>.aquote+p,.abody>.afig+p,.abody>.stats+.alist{margin-top:64px}
.aquote p{font-size:18px;line-height:28px;color:var(--walnut)}
.aquote .meta{display:block;margin-top:16px;color:var(--walnut70)}
.afig,.avid{margin-top:64px}
.story+section.pad{padding-top:0}  /* project without quote (Pirelli): no double gap before Related news */
.afig .fimg,.avid .fimg{height:428px;background-size:cover;background-position:center}
.afig .fimg{clip-path:polygon(0 80px,46px 0,100% 0,100% 100%,0 100%)}
.afig figcaption,.avid figcaption{margin-top:16px;color:var(--walnut70)}
.alist{margin-top:24px;padding-left:24px} .alist li+li{margin-top:4px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.stats div{border-top:1px solid var(--walnut20);padding-top:24px;display:flex;flex-direction:column;gap:16px}
.stats .num{color:var(--walnut)}
.avid .fimg{position:relative;display:grid;place-items:center;cursor:pointer}
.avid .play{display:grid;place-items:center;width:96px;height:96px;background:var(--clay);color:var(--ivory);transition:background .3s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
.avid .play svg{width:20px;height:24px}
.avid .fimg:hover .play{background:var(--clayHover);transform:scale(1.06)}
.abody>p:last-child{margin-top:64px}

/* contacts */
.contacts{padding-bottom:140px}
.crow2{display:grid;grid-template-columns:424px 312px 312px;column-gap:136px;padding:64px 0;border-top:1px solid var(--taupe)}
.rule+.crow2{border-top:0}
.crow2 .cd,.crow2 .cr{color:var(--walnut70);transition:color .5s ease}
.crow2 .cc{display:flex;flex-direction:column}
.crow2 .cr{margin-top:8px}
.crow2 .ch{display:flex;flex-direction:column;gap:8px;margin-top:24px}
.crow2 .ch.first{margin-top:0}
.crow2 .cl{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px}
.crow2 .cl a{display:flex;align-items:center;gap:8px}
.crow2 .cl img,.crow2 .cl .i{width:20px;height:20px}
.crow2 a{transition:opacity .3s ease}.crow2 a:hover{opacity:.6}

/* legal */
.lcols{display:grid;grid-template-columns:424px 760px;column-gap:136px;padding-top:80px}
.legal{padding-top:0}
.toc{position:sticky;top:112px;background:var(--taupe20);padding:32px;display:flex;flex-direction:column;gap:24px}
.toc .label{color:var(--walnut70)}
.toc-i{display:flex;align-items:center;gap:16px;font-size:14px;line-height:22px;color:var(--walnut70);transition:color .4s ease}
.toc-i .dash{display:block;width:8px;height:1px;background:var(--walnut40);transition:width .5s cubic-bezier(.22,.61,.36,1),background .4s ease}
.toc-i.on,.toc-i:hover{color:var(--walnut)} .toc-i.on .dash{width:24px;background:var(--walnut)}
.tnote{color:var(--walnut70);margin-top:20px}
.lsec{display:flex;flex-direction:column;gap:16px;padding:40px 0;border-top:1px solid var(--walnut20)}
.lsec:first-child{padding-top:0;border-top:0}
.lsec .lnum{color:var(--walnut70)} .lsec p{color:var(--walnut70)}
.lbody .btn{margin-top:8px}

/* 404 */
.nf{position:relative;height:900px;background:var(--ivory);overflow:hidden}
.nf .decor{position:absolute;left:50%;top:0;width:1440px;transform:translateX(-50%)}
.nf .nfc{position:absolute;left:50%;top:200px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.nf .digits{display:flex;align-items:center;gap:32px;height:300px}
.nf .digits span{font-size:400px;line-height:300px;letter-spacing:-.02em}
.nf .digits img{width:329px;height:300px}
.nf .h1{margin-top:88px}
.nf .btn{margin-top:64px}