*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#0b0b0b;background:#f2f1ed;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.paperR{background:#f2f1ed}.darkR{background:#0b0b0b;color:#fff}#header{position:fixed;z-index:90;top:0;left:0;width:100%;height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.16);transition:background .35s ease,color .35s ease,border-color .35s ease,backdrop-filter .35s ease}#header.scrolled,#header.solid{background:rgba(242,241,237,.96);color:#0b0b0b;border-bottom-color:rgba(0,0,0,.12);backdrop-filter:blur(12px)}.brand img{display:block;width:205px;height:42px;object-fit:contain;object-position:left center}.brand .brandDark{display:none}#header.scrolled .brandLight,#header.solid .brandLight{display:none}#header.scrolled .brandDark,#header.solid .brandDark{display:block}.headActions{display:flex;gap:22px;align-items:center}.headActions button{border:0;background:none;color:inherit;padding:8px 0;font-size:12px;font-weight:800;letter-spacing:.08em;cursor:pointer}#menuBtn i{display:inline-block;width:9px;height:9px;background:#e41423;margin-left:8px;border-radius:50%}#menu{position:fixed;z-index:80;inset:0;background:#0b0b0b;color:#fff;padding:110px 6vw 5vw;transform:translateY(-102%);transition:transform .7s cubic-bezier(.22,1,.36,1);overflow:hidden;visibility:hidden;pointer-events:none}#menu.open{transform:none;visibility:visible;pointer-events:auto;overflow-y:auto}#menuNav{display:grid}#menuNav a{font-size:clamp(34px,5vw,76px);font-weight:800;letter-spacing:-.055em;border-bottom:1px solid #343434;padding:5px 0;display:flex;gap:24px;align-items:baseline}#menuNav a b{font-size:11px;color:#e41423;letter-spacing:.1em}.menuMeta{position:absolute;bottom:35px;font-size:11px;line-height:1.5}.menuMeta span{color:#888}.menu-open{overflow:hidden}#cursor{position:fixed;z-index:150;width:8px;height:8px;border-radius:50%;background:#e41423;left:-4px;top:-4px;pointer-events:none;transition:width .2s,height .2s,margin .2s}.cursor-active #cursor{width:28px;height:28px;margin:-10px 0 0 -10px;mix-blend-mode:difference}.heroR{height:100dvh;min-height:0;background:#0b0b0b;color:#fff;position:relative;overflow:hidden;margin-top:0}.heroR-media{position:absolute;inset:0}.heroR-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.56);transform:scale(1.02)}#dataCanvas,.heroR-grid{position:absolute;inset:0;width:100%;height:100%}.heroR-grid{background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 78%)}.heroR:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.5),transparent 55%),linear-gradient(0deg,rgba(0,0,0,.72),transparent 55%)}.heroR-top{position:absolute;z-index:2;top:calc(74px + 3.5vh);left:4vw;right:4vw;display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:.13em}.heroR-title{position:absolute;z-index:2;left:4vw;right:4vw;bottom:7vh;display:grid;grid-template-columns:1fr 290px;align-items:end;gap:40px}.heroR h1{font-size:clamp(58px,min(8.1vw,13vh),132px);line-height:.8;letter-spacing:-.075em;margin:0;font-weight:900}.heroR h1 i,.manifestoR h2 em,.rolesR h2 em,.footerR h2 em{font-style:normal;color:#e41423}.heroR-title p{font-size:18px;line-height:1.45;margin:0 0 8px}.heroR-scroll{position:absolute;z-index:3;right:4vw;bottom:3vh;display:flex;gap:25px;font-size:10px;font-weight:800;letter-spacing:.12em}.heroR-scroll b{color:#e41423}.rail{padding:28px 4vw 0;display:flex;gap:16px;font-size:10px;font-weight:800;letter-spacing:.12em;border-top:1px solid #bcbcb8}.rail b{color:#e41423}.rail.inverse{border-color:#333}.manifestoR{padding:90px 0 130px}.manifestoR-main{padding:100px 4vw 50px;display:grid;grid-template-columns:22% 78%;align-items:start}.manifestoR-main>p{font-size:13px;font-weight:700}.manifestoR h2{font-size:clamp(58px,8.4vw,132px);line-height:.84;letter-spacing:-.075em;margin:0;font-weight:900}.manifestoR-copy{margin-left:48%;width:43%;padding:20px 4vw 100px 0}.manifestoR-copy p{font-size:clamp(20px,2vw,31px);line-height:1.3;margin:0}.principlesR{margin:0 4vw;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #999}.principlesR article{padding:24px 7% 0 0;min-height:170px;border-right:1px solid #aaa}.principlesR article+article{padding-left:7%}.principlesR article:last-child{border-right:0}.principlesR span{font-size:10px;color:#e41423;font-weight:800;letter-spacing:.12em}.principlesR p{font-size:17px;line-height:1.4}.workR{padding-bottom:150px}.workR-feature{margin:90px 4vw 180px;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.55fr);gap:6vw;align-items:end}.workR-feature figure{height:min(67vw,720px);margin:0;position:relative;overflow:hidden;background:#ddd}.workR-feature figure img{width:100%;height:100%;object-fit:cover}.mapScan{position:absolute;left:0;right:0;top:-5%;height:2px;background:#e41423;box-shadow:0 0 18px #e41423;animation:scan 5s ease-in-out infinite}@keyframes scan{50%{top:105%}}.workR-text small,.workR-card small{font-size:10px;color:#e41423;font-weight:800;letter-spacing:.12em}.workR-text h2{font-size:clamp(42px,5vw,78px);line-height:.88;letter-spacing:-.06em;margin:20px 0}.workR-text p{font-size:17px;line-height:1.5}.workR-text a{display:inline-block;border-bottom:1px solid;margin-top:25px;font-size:11px;font-weight:800;padding-bottom:5px}.workR-pair{margin:0 8vw 0 18vw;display:grid;grid-template-columns:1.15fr .85fr;gap:8vw;align-items:start}.workR-card figure{margin:0;background:#e4e3df;overflow:hidden}.workR-card figure.diagram{height:430px;display:flex;align-items:center;justify-content:center}.workR-card figure.diagram img{width:100%;height:100%;object-fit:contain}.workR-card h3{font-size:35px;letter-spacing:-.045em;margin:12px 0}.workR-card p{max-width:420px;line-height:1.5}.workR-card>div{padding-top:18px}.workR-card-offset{margin-top:180px}.rolesR{padding:0 0 150px}.rolesR-head{padding:100px 4vw 80px;display:grid;grid-template-columns:1fr 280px;align-items:end}.rolesR-head h2,.topicsR-head h2,.peopleR-head h2{font-size:clamp(54px,7vw,108px);line-height:.85;letter-spacing:-.07em;margin:0}.rolesR-head p{color:#aaa;line-height:1.5}.rolesR-list{margin:0 4vw;border-top:1px solid #444}.roleR{height:132px;border-bottom:1px solid #444;display:grid;grid-template-columns:80px 1fr 50px;align-items:center;position:relative;overflow:hidden}.roleR>span{font-size:10px;color:#e41423;font-weight:800}.roleR h3{font-size:clamp(28px,4vw,58px);letter-spacing:-.045em;margin:0;position:relative;z-index:2}.roleR i{font-style:normal;font-size:24px;position:relative;z-index:2}.roleR img{position:absolute;width:270px;height:170px;right:10%;top:50%;transform:translateY(-50%);object-fit:cover;opacity:0;z-index:1;pointer-events:none}.topicsR{padding-bottom:150px}.topicsR-head{padding:100px 4vw 90px}.topicsR-list{margin:0 4vw;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #999}.topicR{min-height:430px;padding:25px 24px;border-right:1px solid #aaa;position:relative;overflow:hidden}.topicR:last-child{border-right:0}.topicR-mark{height:175px;display:flex;align-items:center;justify-content:center}.topicR-mark img{max-width:155px;max-height:145px;object-fit:contain}.topicR>span{font-size:10px;color:#e41423;font-weight:800}.topicR h3{font-size:27px;line-height:1.05;letter-spacing:-.04em;max-width:240px}.topicPulse{position:absolute;width:140px;height:140px;border:1px solid rgba(228,20,35,.3);border-radius:50%;right:-70px;bottom:-70px;animation:pulse 3.5s infinite}.p2{animation-delay:.5s}.p3{animation-delay:1s}.p4{animation-delay:1.5s}@keyframes pulse{50%{transform:scale(1.6);opacity:.05}}.peopleR{padding-bottom:150px}.peopleR-head{padding:100px 4vw 90px;display:grid;grid-template-columns:1fr 300px;align-items:end}.peopleR-head p{font-size:17px;line-height:1.5}.peopleR-grid{margin:0 4vw;display:grid;grid-template-columns:repeat(3,1fr);gap:90px 28px}.personR figure{margin:0;width:100%;aspect-ratio:3/4;overflow:hidden;background:#ddd}.personR figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}.personR:hover figure img{transform:scale(1.025)}.personR>div{padding-top:16px;border-top:1px solid #999;margin-top:14px}.personR small{font-size:9px;color:#e41423;font-weight:800}.personR h3{font-size:21px;letter-spacing:-.025em;margin:8px 0 5px}.personR p{margin:0;color:#666;font-size:13px}.footerR{background:#0b0b0b;color:#fff;padding:0 4vw 30px}.footerR-top{padding:110px 0 90px;border-bottom:1px solid #383838;position:relative}.footerR-top small{font-size:10px;color:#aaa;letter-spacing:.13em}.footerR h2{font-size:clamp(58px,8.4vw,130px);line-height:.82;letter-spacing:-.075em;margin:30px 0 50px}.footerR-top>a{font-size:clamp(22px,3vw,44px);border-bottom:2px solid #e41423;padding-bottom:6px}.footerR-info{padding:50px 0 70px;display:grid;grid-template-columns:1fr 1.35fr;gap:10vw}.footerR-info b{font-size:13px}.footerR-info p{color:#999;font-size:13px;line-height:1.5}.footerR-brands{display:grid;grid-template-columns:.9fr .7fr 1.5fr;gap:42px;align-items:center}.footerR-brands>div{height:68px;display:flex;align-items:center;justify-content:flex-start}.footerR-brands img{max-width:100%;max-height:48px;object-fit:contain;object-position:left center}.footerR-brands div:nth-child(2){background:#f2f1ed;padding:10px 14px}.footerR-brands div:nth-child(3){background:#f2f1ed;padding:9px 14px}.footerR-end{border-top:1px solid #383838;padding-top:22px;display:flex;justify-content:space-between;color:#777;font-size:9px;letter-spacing:.1em}.footerR.compact{padding-top:100px;min-height:260px}.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}.reveal.in{opacity:1;transform:none}.roleHero{height:75vh;min-height:620px;position:relative;color:#fff;background:#111;overflow:hidden}.roleHero>img{width:100%;height:100%;object-fit:cover;filter:brightness(.5)}.roleHero>div{position:absolute;left:4vw;bottom:8vh}.roleHero a,.roleHero small{font-size:10px;display:block;margin-bottom:25px}.roleHero h1{font-size:clamp(60px,9vw,130px);line-height:.85;letter-spacing:-.07em;margin:0}.section.paper{padding:100px 4vw;background:#f2f1ed}.outputGrid{display:grid;gap:100px}.visualOutput{display:grid;grid-template-columns:1.25fr .75fr;gap:6vw}.visualOutput figure{height:520px;margin:0;position:relative;background:#ddd}.visualOutput figure img{width:100%;height:100%;object-fit:contain}.visualOutput figure span{position:absolute;left:12px;top:12px;background:#111;color:#fff;padding:7px;font-size:9px}.outputCopy{align-self:end}.outputCopy h2{font-size:42px;letter-spacing:-.045em}.outputCopy small{color:#e41423}.outputCopy>div{display:flex;justify-content:space-between;border-top:1px solid;padding-top:12px;font-size:11px}@media(max-width:900px){#header{padding:0 18px;height:64px}.brand img{width:165px}.heroR{height:100dvh;min-height:0}.heroR-top{top:calc(64px + 3vh);left:20px;right:20px}.heroR-top span:last-child{display:none}.heroR-title{left:20px;right:20px;bottom:11vh;display:block}.heroR h1{font-size:clamp(55px,15vw,95px)}.heroR-title p{margin-top:28px;max-width:330px}.heroR-scroll{right:20px}.rail{padding-left:20px}.manifestoR{padding-bottom:90px}.manifestoR-main{padding:75px 20px 30px;display:block}.manifestoR-main>p{margin-bottom:35px}.manifestoR h2{font-size:14vw}.manifestoR-copy{margin:0;padding:40px 20px 70px;width:auto}.principlesR{margin:0 20px;grid-template-columns:1fr}.principlesR article{border-right:0;border-bottom:1px solid #aaa;padding:25px 0;min-height:auto}.principlesR article+article{padding-left:0}.workR-feature{margin:60px 20px 100px;grid-template-columns:1fr;gap:35px}.workR-feature figure{height:62vh}.workR-pair{margin:0 20px;grid-template-columns:1fr;gap:70px}.workR-card-offset{margin-top:0}.workR-card figure.diagram{height:330px}.rolesR-head,.peopleR-head{padding:75px 20px 60px;grid-template-columns:1fr;gap:35px}.rolesR-list{margin:0 20px}.roleR{grid-template-columns:45px 1fr 30px;height:105px}.roleR img{display:none}.topicsR-head{padding:75px 20px 60px}.topicsR-list{margin:0 20px;grid-template-columns:1fr 1fr}.topicR{min-height:330px;border-bottom:1px solid #aaa}.topicR:nth-child(2){border-right:0}.topicR-mark{height:130px}.peopleR-grid{margin:0 20px;grid-template-columns:1fr 1fr;gap:55px 16px}.footerR{padding-left:20px;padding-right:20px}.footerR-top{padding:80px 0 70px}.footerR-info{grid-template-columns:1fr;gap:45px}.footerR-brands{gap:18px}.footerR-brands>div{height:55px}.visualOutput{grid-template-columns:1fr}.visualOutput figure{height:380px}}@media(max-width:560px){.topicsR-list{grid-template-columns:1fr}.topicR{border-right:0}.peopleR-grid{grid-template-columns:1fr}.personR figure{aspect-ratio:4/5}.footerR-brands{grid-template-columns:1fr 1fr}.footerR-brands>div:first-child{grid-column:1/-1}.footerR-end{gap:20px;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
/* =========================================================
SCRL V2.8X.3 FINAL
========================================================= */
/* ---------- DESKTOP NAV ---------- */
.desktopNav{
position:absolute;
left:50%;
top:0;
height:100%;
transform:translateX(-50%);
display:flex;
align-items:center;
gap:clamp(24px,2.5vw,44px);
white-space:nowrap;
color:inherit;
}
.desktopNav>a,
.desktopRolesBtn{
position:relative;
display:flex;
align-items:center;
height:100%;
padding:0;
border:0;
background:none;
color:inherit;
font:inherit;
font-size:10px;
font-weight:800;
line-height:1;
letter-spacing:.11em;
text-decoration:none;
cursor:pointer;
}
.desktopNav>a:after,
.desktopRolesBtn:after{
content:"";
position:absolute;
left:0;
right:0;
bottom:19px;
height:1px;
background:#e41423;
transform:scaleX(0);
transform-origin:right;
transition:transform .25s ease;
}
.desktopNav>a:hover:after,
.desktopRoles:hover .desktopRolesBtn:after{
transform:scaleX(1);
transform-origin:left;
}
.desktopRoles{
position:relative;
height:100%;
display:flex;
align-items:center;
}
.desktopRolesBtn span{
margin-left:6px;
font-size:8px;
transition:transform .25s ease;
}
.desktopRoles:hover .desktopRolesBtn span,
.desktopRoles:focus-within .desktopRolesBtn span{
transform:rotate(180deg);
}
.desktopRolesDrop{
position:absolute;
z-index:110;
top:calc(100% - 1px);
left:50%;
width:270px;
padding:8px;
transform:translate(-50%,10px);
background:#0b0b0b;
border:1px solid rgba(255,255,255,.16);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:
opacity .2s ease,
transform .2s ease,
visibility .2s;
}
.desktopRoles:hover .desktopRolesDrop,
.desktopRoles:focus-within .desktopRolesDrop{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translate(-50%,0);
}
.desktopRolesDrop a{
display:block;
padding:13px 12px;
border-bottom:1px solid rgba(255,255,255,.12);
color:#fff;
font-size:10px;
font-weight:700;
line-height:1.3;
letter-spacing:.035em;
text-decoration:none;
transition:background .18s ease,padding-left .18s ease;
}
.desktopRolesDrop a:last-child{
border-bottom:0;
}
.desktopRolesDrop a:hover{
padding-left:17px;
background:#e41423;
}
/* desktop = direct navigation, no hamburger */
@media(min-width:901px){
#menuBtn{
display:none!important;
}
}
/* mobile = existing menu */
@media(max-width:900px){
.desktopNav{
display:none!important;
}
#menuBtn{
display:inline-flex!important;
}
}
/* ---------- FOOTER ---------- */
.footerX3{
position:relative;
padding:0 clamp(20px,4vw,64px);
background:#090909;
color:#f2f1ed;
overflow:hidden;
}
.footerX3-main{
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
gap:8vw;
padding:48px 0 40px;
border-top:1px solid rgba(255,255,255,.18);
border-bottom:1px solid rgba(255,255,255,.18);
}
.footerX3 small{
display:block;
color:#e41423;
font-size:9px;
font-weight:800;
line-height:1;
letter-spacing:.14em;
}
.footerX3-brand h2{
margin:20px 0 15px;
font-size:clamp(38px,4.5vw,68px);
line-height:.88;
font-weight:800;
letter-spacing:-.055em;
}
.footerX3-brand p{
margin:0;
color:rgba(255,255,255,.55);
font-size:12px;
line-height:1.5;
}
.footerX3-contact{
align-self:end;
}
.footerX3-contact>p{
margin:18px 0;
color:rgba(255,255,255,.63);
font-size:12px;
line-height:1.55;
}
.footerX3-contact a{
display:inline-block;
padding-bottom:5px;
border-bottom:1px solid #e41423;
color:#fff;
font-size:clamp(20px,1.8vw,29px);
line-height:1;
letter-spacing:-.035em;
text-decoration:none;
transition:color .2s ease;
}
.footerX3-contact a:hover{
color:#e41423;
}
.footerX3-contact .footerX3-phone{
margin:13px 0 0;
color:rgba(255,255,255,.43);
font-size:10px;
}
.footerX3-institution{
min-height:58px;
display:flex;
align-items:center;
gap:13px;
border-bottom:1px solid rgba(255,255,255,.18);
color:rgba(255,255,255,.6);
font-size:9px;
font-weight:800;
line-height:1.3;
letter-spacing:.1em;
}
.footerX3-institution i{
width:4px;
height:4px;
flex:0 0 4px;
border-radius:50%;
background:#e41423;
}
.footerX3-end{
min-height:50px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
color:rgba(255,255,255,.4);
font-size:8px;
font-weight:700;
line-height:1.3;
letter-spacing:.11em;
}
/* no raster footer logos */
.footerX3 img{
display:none!important;
}
@media(max-width:900px){
.footerX3-main{
grid-template-columns:1fr;
gap:40px;
padding:36px 0;
}
.footerX3-contact{
align-self:auto;
}
.footerX3-institution{
min-height:0;
padding:19px 0;
flex-wrap:wrap;
}
.footerX3-end{
min-height:0;
padding:18px 0;
flex-direction:column;
align-items:flex-start;
gap:7px;
}
}
/* =========================================================
SCRL V2.8X.4 — TOPICS CONTENT INDEX
========================================================= */
/* ----- TOPICS dropdown ----- */
.desktopTopics{
position:relative;
height:100%;
display:flex;
align-items:center;
}
.desktopTopicsBtn{
position:relative;
display:flex;
align-items:center;
height:100%;
padding:0;
border:0;
background:none;
color:inherit;
font:inherit;
font-size:10px;
font-weight:800;
letter-spacing:.11em;
cursor:pointer;
}
.desktopTopicsBtn:after{
content:"";
position:absolute;
left:0;
right:0;
bottom:19px;
height:1px;
background:#e41423;
transform:scaleX(0);
transform-origin:right;
transition:transform .25s ease;
}
.desktopTopics:hover .desktopTopicsBtn:after{
transform:scaleX(1);
transform-origin:left;
}
.desktopTopicsBtn span{
margin-left:6px;
font-size:8px;
transition:transform .25s ease;
}
.desktopTopics:hover .desktopTopicsBtn span,
.desktopTopics:focus-within .desktopTopicsBtn span{
transform:rotate(180deg);
}
.desktopTopicsDrop{
position:absolute;
z-index:110;
top:calc(100% - 1px);
left:50%;
width:300px;
padding:8px;
transform:translate(-50%,10px);
background:#0b0b0b;
border:1px solid rgba(255,255,255,.16);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:.2s ease;
}
.desktopTopics:hover .desktopTopicsDrop,
.desktopTopics:focus-within .desktopTopicsDrop{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translate(-50%,0);
}
.desktopTopicsDrop a{
display:block;
padding:13px 12px;
border-bottom:1px solid rgba(255,255,255,.12);
color:#fff;
font-size:10px;
font-weight:700;
line-height:1.3;
text-decoration:none;
transition:.18s ease;
}
.desktopTopicsDrop a:last-child{
border-bottom:0;
}
.desktopTopicsDrop a:hover{
padding-left:17px;
background:#e41423;
}
/* ----- Homepage Topics: same language as Roles ----- */
.topicsR-list{
display:none!important;
}
.topicsX4-list{
margin:0 4vw;
border-top:1px solid #aaa;
}
.topicX4{
position:relative;
height:118px;
display:grid;
grid-template-columns:70px minmax(0,1fr) 130px 40px;
gap:20px;
align-items:center;
border-bottom:1px solid #aaa;
color:#090909;
text-decoration:none;
overflow:hidden;
transition:
padding-left .25s ease,
background .25s ease,
color .25s ease;
}
.topicX4>span{
color:#e41423;
font-size:10px;
font-weight:800;
}
.topicX4 h3{
margin:0;
max-width:760px;
font-size:clamp(25px,2.4vw,39px);
line-height:.94;
letter-spacing:-.045em;
}
.topicX4 small{
justify-self:end;
font-size:9px;
font-weight:700;
letter-spacing:.08em;
color:#777;
}
.topicX4>i{
justify-self:end;
font-style:normal;
font-size:20px;
}
.topicX4:hover{
padding-left:14px;
background:#0b0b0b;
color:#fff;
}
.topicX4:hover small{
color:#aaa;
}
/* ----- Topic page ----- */
.topicHeroX4{
min-height:72vh;
padding:160px 4vw 70px;
display:flex;
align-items:flex-end;
background:#0a0a0a;
color:#fff;
}
.topicHeroX4>div{
width:100%;
}
.topicHeroX4 a,
.topicHeroX4 small{
display:block;
margin-bottom:25px;
color:inherit;
font-size:9px;
font-weight:700;
letter-spacing:.09em;
text-decoration:none;
}
.topicHeroX4 small{
color:#e41423;
}
.topicHeroX4 h1{
max-width:1250px;
margin:0;
font-size:clamp(58px,8.5vw,132px);
line-height:.83;
letter-spacing:-.07em;
}
.topicHeroX4 p{
margin:38px 0 0;
padding-top:14px;
border-top:1px solid #444;
font-size:10px;
letter-spacing:.1em;
color:#999;
}
.topicOutputsX4{
padding:90px 4vw 130px;
background:#f2f1ed;
}
.topicOutputsX4-head{
display:grid;
grid-template-columns:1fr 3fr 90px;
padding:0 0 14px 185px;
border-bottom:1px solid #aaa;
color:#777;
font-size:8px;
font-weight:700;
letter-spacing:.1em;
}
.topicOutputX4{
position:relative;
min-height:220px;
display:grid;
grid-template-columns:45px 120px minmax(0,1fr) 70px 30px;
gap:20px;
align-items:center;
padding:24px 0;
border-bottom:1px solid #aaa;
color:#090909;
text-decoration:none;
}
.topicOutputX4-no{
align-self:start;
padding-top:5px;
color:#e41423;
font-size:9px;
font-weight:800;
}
.topicOutputX4 figure{
width:120px;
height:150px;
margin:0;
overflow:hidden;
background:#ddd;
}
.topicOutputX4 figure img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.topicOutputX4-copy small{
color:#e41423;
font-size:9px;
font-weight:700;
letter-spacing:.06em;
}
.topicOutputX4-copy h2{
max-width:850px;
margin:12px 0;
font-size:clamp(25px,3vw,46px);
line-height:.95;
letter-spacing:-.045em;
}
.topicOutputX4-copy p{
margin:0;
color:#777;
font-size:10px;
letter-spacing:.04em;
}
.topicOutputX4>b{
justify-self:end;
font-size:11px;
}
.topicOutputX4>i{
justify-self:end;
font-style:normal;
font-size:19px;
}
.topicOutputX4:hover figure img{
transform:scale(1.06);
}
@media(max-width:900px){
.desktopTopics{
display:none!important;
}
.topicsX4-list{
margin:0 20px;
}
.topicX4{
height:auto;
min-height:105px;
grid-template-columns:42px 1fr 28px;
gap:12px;
}
.topicX4 small{
display:none;
}
.topicX4 h3{
font-size:25px;
}
.topicHeroX4{
min-height:65vh;
padding:130px 20px 55px;
}
.topicOutputsX4{
padding:65px 20px 90px;
}
.topicOutputsX4-head{
display:none;
}
.topicOutputX4{
grid-template-columns:30px 85px 1fr 24px;
gap:12px;
}
.topicOutputX4 figure{
width:85px;
height:110px;
}
.topicOutputX4>b{
display:none;
}
.topicOutputX4-copy h2{
font-size:21px;
}
}
/* =========================================================
SCRL V2.8X.6A2
TRUE WHITE SYSTEM + MOTION HERO
========================================================= */
:root{
--scrl-white:#fff;
--scrl-black:#090909;
--scrl-red:#e41423;
--scrl-line:#d9d9d9;
}
/* TRUE WHITE — remove beige editorial tone */
html,
body,
.paperR,
.section.paper,
.manifestoR,
.topicsR,
.peopleR{
background:#fff!important;
}
.heroX6{
position:relative;
height:100dvh;
min-height:680px;
overflow:hidden;
background:#070707;
color:#fff;
}
/* IMAGE */
.heroX6 .heroR-media{
position:absolute;
inset:0;
z-index:0;
overflow:hidden;
}
.heroX6 .heroR-media img{
width:100%;
height:100%;
object-fit:cover;
filter:grayscale(1) contrast(1.13) brightness(.53);
transform:scale(1.045);
animation:x6ImageBreath 16s ease-in-out infinite alternate;
}
.heroX6 .heroR-media:after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at 74% 44%,
rgba(228,20,35,.09),
transparent 22%
),
linear-gradient(
90deg,
rgba(0,0,0,.91) 0%,
rgba(0,0,0,.73) 43%,
rgba(0,0,0,.43) 72%,
rgba(0,0,0,.58) 100%
);
}
@keyframes x6ImageBreath{
from{transform:scale(1.035)}
to{transform:scale(1.095)}
}
/* DATA CANVAS */
.heroX6 #dataCanvas{
position:absolute;
inset:0;
z-index:2;
width:100%;
height:100%;
pointer-events:none;
mix-blend-mode:screen;
}
/* URBAN GRID */
.heroX6-grid{
position:absolute;
z-index:1;
inset:0;
opacity:.11;
pointer-events:none;
background-image:
linear-gradient(
rgba(255,255,255,.22) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.22) 1px,
transparent 1px
);
background-size:
min(11vw,160px)
min(11vw,160px);
mask-image:
linear-gradient(
to bottom,
transparent 5%,
#000 25%,
#000 88%,
transparent
);
}
/* DATA ORBITS */
.heroX6-orbit{
position:absolute;
z-index:2;
border:1px solid rgba(228,20,35,.35);
border-radius:50%;
pointer-events:none;
}
.heroX6-orbit:before{
content:"";
position:absolute;
width:7px;
height:7px;
top:50%;
left:-4px;
border-radius:50%;
background:#e41423;
box-shadow:0 0 18px rgba(228,20,35,.8);
}
.orbitA{
width:36vw;
height:36vw;
right:-12vw;
top:12vh;
animation:x6Orbit 22s linear infinite;
}
.orbitB{
width:18vw;
height:18vw;
right:16vw;
top:31vh;
opacity:.55;
animation:x6Orbit 14s linear infinite reverse;
}
@keyframes x6Orbit{
to{transform:rotate(360deg)}
}
/* TOP META */
.heroX6 .heroR-top{
z-index:5;
}
/* MAIN */
.heroX6-main{
position:absolute;
z-index:5;
left:4vw;
right:4vw;
top:49%;
transform:translateY(-50%);
}
.heroX6-kicker{
display:block;
margin-bottom:25px;
color:#e41423;
font-size:9px;
font-weight:900;
letter-spacing:.17em;
}
.heroX6 h1{
margin:0;
max-width:1120px;
font-size:clamp(68px,9.5vw,158px);
line-height:.77;
letter-spacing:-.075em;
font-weight:800;
}
.heroX6 h1>span{
display:block;
}
.heroX6 h1 em{
color:#e41423;
font-style:normal;
}
.heroX6-copy{
position:absolute;
right:0;
bottom:3px;
width:min(30vw,420px);
}
.heroX6-copy p{
margin:0 0 27px;
font-size:clamp(14px,1.15vw,19px);
line-height:1.4;
letter-spacing:-.02em;
}
.heroX6-copy a{
display:inline-block;
padding-bottom:7px;
border-bottom:1px solid #e41423;
color:#fff;
font-size:9px;
font-weight:800;
letter-spacing:.12em;
text-decoration:none;
}
/* MOVING RESEARCH DIMENSIONS */
.heroX6-ticker{
position:absolute;
z-index:6;
left:0;
right:0;
bottom:38px;
height:32px;
overflow:hidden;
border-top:1px solid rgba(255,255,255,.22);
border-bottom:1px solid rgba(255,255,255,.22);
}
.heroX6-ticker>div{
width:max-content;
height:100%;
display:flex;
align-items:center;
gap:28px;
animation:x6Ticker 25s linear infinite;
}
.heroX6-ticker span{
font-size:8px;
font-weight:800;
letter-spacing:.17em;
}
.heroX6-ticker i{
color:#e41423;
font-size:12px;
font-style:normal;
}
@keyframes x6Ticker{
to{transform:translateX(-50%)}
}
.heroX6-meta{
position:absolute;
z-index:6;
left:4vw;
right:4vw;
bottom:9px;
display:flex;
justify-content:space-between;
color:rgba(255,255,255,.48);
font-size:7px;
font-weight:700;
letter-spacing:.14em;
}
/* SCANNING DATA LINE */
.heroX6:after{
content:"";
position:absolute;
z-index:3;
top:-20%;
bottom:-20%;
left:-10%;
width:1px;
pointer-events:none;
background:
linear-gradient(
transparent,
rgba(228,20,35,.85),
transparent
);
box-shadow:
0 0 24px rgba(228,20,35,.38);
animation:x6Scan 8s ease-in-out infinite;
}
@keyframes x6Scan{
0%,12%{
transform:translateX(0);
opacity:0;
}
20%{
opacity:.85;
}
80%{
opacity:.35;
}
92%,100%{
transform:translateX(125vw);
opacity:0;
}
}
/* INITIAL CHOREOGRAPHY */
@media(prefers-reduced-motion:no-preference){
.heroX6-kicker{
animation:x6FadeUp .75s .1s both;
}
.heroX6 h1 span{
animation:
x6TitleIn
.95s
cubic-bezier(.22,1,.36,1)
both;
}
.heroX6 h1 span:nth-child(1){
animation-delay:.12s;
}
.heroX6 h1 span:nth-child(2){
animation-delay:.23s;
}
.heroX6 h1 span:nth-child(3){
animation-delay:.34s;
}
.heroX6-copy{
animation:x6FadeUp .9s .55s both;
}
}
@keyframes x6TitleIn{
from{
opacity:0;
transform:translateY(48px);
}
to{
opacity:1;
transform:none;
}
}
@keyframes x6FadeUp{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:none;
}
}
/* MOBILE */
@media(max-width:900px){
.heroX6{
min-height:650px;
}
.heroX6-main{
left:20px;
right:20px;
top:47%;
}
.heroX6 h1{
max-width:760px;
font-size:clamp(58px,15vw,105px);
line-height:.79;
}
.heroX6-copy{
position:relative;
right:auto;
bottom:auto;
width:min(92%,390px);
margin-top:34px;
}
.heroX6-copy p{
font-size:14px;
}
.orbitA{
width:70vw;
height:70vw;
right:-40vw;
}
.orbitB{
display:none;
}
.heroX6-meta{
left:20px;
right:20px;
}
}
@media(max-width:560px){
.heroX6 h1{
font-size:15vw;
}
.heroX6-kicker{
margin-bottom:18px;
}
.heroX6-copy{
margin-top:28px;
}
.heroX6-copy p{
font-size:13px;
}
.heroX6-meta span:last-child{
display:none;
}
}
@media(prefers-reduced-motion:reduce){
.heroX6 .heroR-media img,
.heroX6-orbit,
.heroX6-ticker>div,
.heroX6:after{
animation:none!important;
}
}
/* =========================================================
SCRL V2.8X.6B
ABOUT / STORY / PEOPLE
========================================================= */
.aboutX6{
position:relative;
background:#fff;
color:#090909;
padding-bottom:0;
}
.aboutX6-intro{
display:grid;
grid-template-columns:minmax(180px,.7fr) 2.3fr;
gap:6vw;
padding:9vw 4vw 8vw;
border-bottom:1px solid #d9d9d9;
}
.aboutX6-label small,
.aboutX6-futurescape small,
.storyX6-head small,
.peopleX6-head small{
font-size:8px;
font-weight:800;
letter-spacing:.15em;
}
.aboutX6-lead h2{
margin:0 0 4vw;
max-width:1100px;
font-size:clamp(56px,8vw,136px);
line-height:.78;
letter-spacing:-.07em;
font-weight:800;
}
.aboutX6-lead h2 em,
.peopleX6-head h2 em{
color:#e41423;
font-style:normal;
}
.aboutX6-lead p{
max-width:760px;
margin:0 0 18px;
font-size:clamp(16px,1.4vw,22px);
line-height:1.45;
letter-spacing:-.025em;
}
/* OFFICIAL SMART CITY DEFINITION */
.aboutX6-definition{
display:grid;
grid-template-columns:.7fr 2.3fr;
gap:6vw;
padding:8vw 4vw;
background:#090909;
color:#fff;
}
.aboutX6-definitionMeta{
display:flex;
flex-direction:column;
gap:8px;
}
.aboutX6-definitionMeta span{
color:#e41423;
font-size:11px;
font-weight:900;
letter-spacing:.14em;
}
.aboutX6-definitionMeta small{
color:#777;
font-size:8px;
letter-spacing:.14em;
}
.aboutX6-definition blockquote{
margin:0;
max-width:1200px;
font-size:clamp(34px,4.4vw,76px);
line-height:1.02;
letter-spacing:-.05em;
font-weight:600;
}
/* THREE PRINCIPLES */
.aboutX6-principles{
display:grid;
grid-template-columns:repeat(3,1fr);
border-bottom:1px solid #d9d9d9;
}
.aboutX6-principles article{
min-height:330px;
padding:45px 4vw;
border-right:1px solid #d9d9d9;
}
.aboutX6-principles article:last-child{
border-right:0;
}
.aboutX6-principles b{
color:#e41423;
font-size:9px;
}
.aboutX6-principles h3{
margin:80px 0 18px;
font-size:clamp(22px,2.2vw,38px);
line-height:.95;
letter-spacing:-.045em;
}
.aboutX6-principles p{
max-width:380px;
font-size:13px;
line-height:1.55;
}
/* FUTURESCAPE */
.aboutX6-futurescape{
display:grid;
grid-template-columns:1.3fr 1fr;
gap:8vw;
align-items:end;
padding:9vw 4vw;
border-bottom:1px solid #d9d9d9;
}
.aboutX6-futurescape h2{
margin:18px 0 0;
color:#e41423;
font-size:clamp(64px,10vw,170px);
line-height:.75;
letter-spacing:-.075em;
}
.aboutX6-futurescape p{
max-width:570px;
margin:0;
font-size:clamp(17px,1.55vw,24px);
line-height:1.4;
letter-spacing:-.025em;
}
/* STORY */
.storyX6{
padding:9vw 4vw;
background:#f7f7f7;
border-bottom:1px solid #d9d9d9;
}
.storyX6-head{
display:flex;
justify-content:space-between;
align-items:flex-end;
margin-bottom:5vw;
}
.storyX6-head h2{
margin:0;
font-size:clamp(48px,7vw,110px);
line-height:.8;
letter-spacing:-.07em;
}
.storyX6-track{
display:grid;
grid-template-columns:repeat(7,minmax(220px,1fr));
overflow-x:auto;
border-top:1px solid #aaa;
}
.storyX6-track article{
min-height:330px;
padding:24px 25px;
border-right:1px solid #c9c9c9;
}
.storyX6-track b{
color:#e41423;
font-size:12px;
}
.storyX6-track h3{
margin:90px 0 15px;
font-size:18px;
line-height:1;
letter-spacing:-.03em;
}
.storyX6-track p{
margin:0;
font-size:11px;
line-height:1.55;
}
/* PEOPLE INSIDE ABOUT */
.peopleX6{
padding:9vw 4vw;
background:#fff;
}
.peopleX6-head{
margin-bottom:7vw;
}
.peopleX6-head h2{
margin:20px 0 0;
font-size:clamp(62px,9vw,150px);
line-height:.78;
letter-spacing:-.075em;
}
.peopleX6-group{
display:grid;
grid-template-columns:.65fr 2.35fr;
gap:5vw;
padding:40px 0 70px;
border-top:1px solid #111;
}
.peopleX6-groupTitle{
display:flex;
gap:20px;
align-items:flex-start;
}
.peopleX6-groupTitle span{
color:#e41423;
font-size:9px;
font-weight:800;
}
.peopleX6-groupTitle h3{
margin:0;
font-size:12px;
letter-spacing:.08em;
}
.peopleX6-list{
display:grid;
grid-template-columns:repeat(2,1fr);
}
.peopleX6-list article{
min-height:230px;
padding:0 30px 30px 0;
margin:0 30px 35px 0;
border-bottom:1px solid #d9d9d9;
}
.peopleX6-list h4{
margin:0 0 12px;
max-width:420px;
font-size:clamp(21px,2vw,34px);
line-height:1;
letter-spacing:-.045em;
}
.peopleX6-list p{
margin:0 0 28px;
color:#555;
font-size:12px;
line-height:1.5;
}
.peopleX6-list div{
display:flex;
flex-wrap:wrap;
gap:6px;
}
.peopleX6-list div span{
padding:5px 8px;
border:1px solid #cfcfcf;
border-radius:20px;
font-size:7px;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
}
.peopleX6-group.international{
padding-bottom:0;
}
/* RESPONSIVE */
@media(max-width:900px){
.aboutX6-intro,
.aboutX6-definition,
.aboutX6-futurescape,
.peopleX6-group{
grid-template-columns:1fr;
}
.aboutX6-intro,
.aboutX6-definition,
.aboutX6-futurescape,
.storyX6,
.peopleX6{
padding-left:20px;
padding-right:20px;
}
.aboutX6-label{
margin-bottom:30px;
}
.aboutX6-principles{
grid-template-columns:1fr;
}
.aboutX6-principles article{
min-height:230px;
padding:35px 20px;
border-right:0;
border-bottom:1px solid #d9d9d9;
}
.aboutX6-principles h3{
margin-top:60px;
}
.aboutX6-futurescape{
gap:50px;
}
.peopleX6-list{
grid-template-columns:1fr;
}
.peopleX6-list article{
margin-right:0;
padding-right:0;
}
}
/* =========================================================
SCRL V2.8X.6C
ROLE → OUTPUT → TOPIC
========================================================= */
.rolePageX6,
.topicPageX6{
background:#fff;
color:#090909;
}
.roleHeroX6,
.topicHeroX6{
min-height:72vh;
padding:150px 4vw 60px;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:8vw;
background:#090909;
color:#fff;
}
.roleHeroX6>div,
.topicHeroX6>div{
max-width:1100px;
}
.roleHeroX6 small,
.topicHeroX6 small{
color:#e41423;
font-size:8px;
font-weight:900;
letter-spacing:.16em;
}
.roleHeroX6 h1,
.topicHeroX6 h1{
margin:30px 0;
max-width:1100px;
font-size:clamp(62px,9vw,150px);
line-height:.76;
letter-spacing:-.075em;
text-transform:uppercase;
}
.roleHeroX6 p,
.topicHeroX6 p{
max-width:650px;
color:#aaa;
font-size:16px;
line-height:1.5;
}
.roleHeroX6>a,
.topicHeroX6>a{
flex:none;
color:#fff;
font-size:9px;
font-weight:800;
letter-spacing:.1em;
text-decoration:none;
}
.roleOutputsX6,
.topicOutputsX6{
padding-bottom:9vw;
}
.roleOutputsX6-head{
padding:8vw 4vw 5vw;
}
.roleOutputsX6-head small{
font-size:8px;
font-weight:800;
letter-spacing:.15em;
}
.roleOutputsX6-head h2{
margin:20px 0 0;
font-size:clamp(55px,8vw,125px);
line-height:.8;
letter-spacing:-.07em;
}
.roleOutputsX6-head em{
color:#e41423;
font-style:normal;
}
.outputsX6-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
border-top:1px solid #111;
}
.outputX6{
min-height:430px;
padding:35px 4vw 45px;
border-right:1px solid #d9d9d9;
border-bottom:1px solid #d9d9d9;
}
.outputX6:nth-child(even){
border-right:0;
}
.outputX6-meta{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:80px;
}
.outputX6-meta span{
padding:5px 8px;
border:1px solid #ccc;
border-radius:30px;
font-size:7px;
font-weight:800;
letter-spacing:.08em;
}
.outputX6-meta .status.completed{
border-color:#090909;
background:#090909;
color:#fff;
}
.outputX6-meta .status.ongoing,
.outputX6-meta .status.project,
.outputX6-meta .status.research{
border-color:#e41423;
color:#e41423;
}
.outputX6 h3{
margin:0 0 18px;
max-width:680px;
font-size:clamp(27px,3vw,48px);
line-height:.96;
letter-spacing:-.05em;
}
.outputX6 p{
max-width:620px;
margin:0 0 16px;
color:#555;
font-size:12px;
line-height:1.55;
}
.outputX6-authors{
color:#111 !important;
font-weight:700;
}
.outputX6-field{
display:grid;
grid-template-columns:90px 1fr;
gap:15px;
max-width:620px;
margin-top:14px;
padding-top:14px;
border-top:1px solid #ddd;
}
.outputX6-field b{
color:#e41423;
font-size:7px;
letter-spacing:.08em;
}
.outputX6-field span{
font-size:10px;
line-height:1.45;
}
.outputX6-topics{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:35px;
}
.outputX6-topics a{
padding:6px 9px;
background:#f1f1f1;
color:#111;
font-size:7px;
font-weight:800;
letter-spacing:.04em;
text-decoration:none;
text-transform:uppercase;
}
.outputX6-topics a:hover{
background:#e41423;
color:#fff;
}
.outputX6-link{
display:inline-block;
margin-top:30px;
color:#e41423;
font-size:8px;
font-weight:900;
letter-spacing:.08em;
text-decoration:none;
}
.topicOutputWrapX6{
position:relative;
border-bottom:1px solid #d9d9d9;
}
.topicOutputWrapX6 .outputX6{
border-bottom:0;
}
.topicOutputRoleX6{
display:block;
padding:16px 4vw;
border-bottom:1px solid #d9d9d9;
color:#e41423;
font-size:8px;
font-weight:900;
letter-spacing:.08em;
text-decoration:none;
}
.futureX6{
display:grid;
grid-template-columns:.9fr 1.6fr;
gap:7vw;
padding:9vw 4vw;
background:#090909;
color:#fff;
}
.futureX6-head small{
color:#e41423;
font-size:8px;
font-weight:900;
}
.futureX6-head h2{
margin:25px 0;
font-size:clamp(52px,7vw,110px);
line-height:.78;
letter-spacing:-.07em;
}
.futureX6-head h2 em{
color:#e41423;
font-style:normal;
}
.futureX6-head p{
max-width:380px;
color:#aaa;
line-height:1.5;
}
.futureX6-list{
border-top:1px solid #555;
}
.futureX6-list article{
display:grid;
grid-template-columns:45px 1fr;
gap:20px;
padding:25px 0;
border-bottom:1px solid #333;
}
.futureX6-list b{
color:#e41423;
font-size:8px;
}
.futureX6-list h3{
margin:0;
font-size:clamp(18px,2vw,30px);
line-height:1;
letter-spacing:-.035em;
}
.futureX6-list p{
grid-column:2;
margin:0;
color:#888;
font-size:11px;
line-height:1.5;
}
@media(max-width:800px){
.roleHeroX6,
.topicHeroX6{
min-height:75vh;
padding:130px 20px 40px;
flex-direction:column;
align-items:flex-start;
justify-content:flex-end;
}
.outputsX6-grid{
grid-template-columns:1fr;
}
.outputX6{
min-height:auto;
padding:30px 20px 45px;
border-right:0;
}
.outputX6-meta{
margin-bottom:55px;
}
.roleOutputsX6-head{
padding:70px 20px 45px;
}
.topicOutputRoleX6{
padding-left:20px;
padding-right:20px;
}
.futureX6{
grid-template-columns:1fr;
padding:75px 20px;
}
}
/* =========================================================
SCRL V2.8X.6D
CONTACT + FINAL FOOTER
========================================================= */
.contactX6D{
background:#fff;
color:#090909;
border-top:1px solid #111;
}
.contactX6D-head{
display:grid;
grid-template-columns:.7fr 2.3fr;
gap:6vw;
padding:9vw 4vw 7vw;
}
.contactX6D-kicker{
display:flex;
flex-direction:column;
gap:8px;
padding-top:8px;
}
.contactX6D-kicker span{
color:#e41423;
font-size:9px;
font-weight:900;
letter-spacing:.16em;
}
.contactX6D-kicker small{
font-size:7px;
font-weight:800;
letter-spacing:.12em;
}
.contactX6D-head h2{
margin:0;
max-width:1100px;
font-size:clamp(58px,8vw,138px);
line-height:.78;
letter-spacing:-.075em;
}
.contactX6D-head h2 em{
color:#e41423;
font-style:normal;
}
.contactX6D-head p{
max-width:630px;
margin:45px 0 0;
font-size:15px;
line-height:1.55;
}
.contactX6D-locations{
display:grid;
grid-template-columns:repeat(3,1fr);
border-top:1px solid #111;
}
.contactX6D-locations article{
display:grid;
grid-template-columns:38px 1fr;
gap:20px;
min-height:350px;
padding:35px 3vw 45px;
border-right:1px solid #d8d8d8;
}
.contactX6D-locations article:last-child{
border-right:0;
}
.contactX6D-locations article>b{
color:#e41423;
font-size:8px;
}
.contactX6D-locations small{
font-size:7px;
font-weight:900;
letter-spacing:.12em;
}
.contactX6D-locations h3{
margin:70px 0 20px;
max-width:400px;
font-size:clamp(22px,2.2vw,36px);
line-height:1;
letter-spacing:-.045em;
}
.contactX6D-locations p{
margin:0;
color:#555;
font-size:12px;
line-height:1.6;
}
.contactX6D-email{
margin-top:70px !important;
margin-bottom:-50px !important;
font-size:clamp(16px,1.5vw,24px) !important;
}
.contactX6D-email + .contactX6D-email{
margin-top:65px !important;
}
.contactX6D-email a{
color:#090909;
text-decoration:none;
}
.contactX6D-email a:hover{
color:#e41423;
}
/* ---------- FOOTER ---------- */
.footerX6D{
background:#090909;
color:#fff;
}
.footerX6D-main{
display:grid;
grid-template-columns:1.25fr 1fr 1fr;
}
.footerX6D-brand,
.footerX6D-address,
.footerX6D-contact{
min-height:410px;
padding:55px 4vw;
border-right:1px solid #292929;
}
.footerX6D-contact{
border-right:0;
}
/* real transparent assets */
.footerX6D-logos{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:28px;
min-height:70px;
margin-bottom:70px;
}
.footerX6D-logos img{
display:block;
width:auto;
height:auto;
object-fit:contain;
}
.footerX6D-scrl{
max-width:170px;
max-height:52px;
}
.footerX6D-iscm{
max-width:110px;
max-height:48px;
}
.footerX6D-ueh{
max-width:145px;
max-height:52px;
}
.footerX6D-brand>p{
margin:0;
color:#777;
font-size:10px;
line-height:1.65;
}
.footerX6D-address>small,
.footerX6D-contact>small{
display:block;
margin-bottom:60px;
color:#e41423;
font-size:8px;
font-weight:900;
letter-spacing:.15em;
}
.footerX6D-address>p{
max-width:350px;
margin:0;
font-size:14px;
line-height:1.55;
}
.footerX6D-secondary{
margin-top:45px;
padding-top:20px;
border-top:1px solid #333;
}
.footerX6D-secondary b{
display:block;
margin-bottom:8px;
color:#aaa;
font-size:8px;
letter-spacing:.08em;
text-transform:uppercase;
}
.footerX6D-secondary span{
color:#777;
font-size:10px;
line-height:1.5;
}
.footerX6D-contact>a{
display:block;
width:max-content;
max-width:100%;
margin-bottom:13px;
color:#fff;
font-size:clamp(16px,1.45vw,22px);
line-height:1.2;
text-decoration:none;
}
.footerX6D-contact>a:hover,
.footerX6D-research a:hover{
color:#e41423;
}
.footerX6D-research{
margin-top:45px;
padding-top:20px;
border-top:1px solid #333;
}
.footerX6D-research b{
display:block;
margin-bottom:14px;
color:#777;
font-size:7px;
letter-spacing:.12em;
}
.footerX6D-research a{
display:block;
margin-bottom:8px;
color:#aaa;
font-size:10px;
text-decoration:none;
}
.footerX6D-bottom{
display:flex;
justify-content:space-between;
gap:25px;
padding:18px 4vw;
border-top:1px solid #292929;
}
.footerX6D-bottom span{
color:#666;
font-size:7px;
font-weight:800;
letter-spacing:.12em;
}
/* Legacy footer can stay in source, but must never display */
.footerR,
.footerX3{
display:none !important;
}
@media(max-width:900px){
.contactX6D-head{
grid-template-columns:1fr;
padding:75px 20px 60px;
}
.contactX6D-kicker{
margin-bottom:35px;
}
.contactX6D-head p{
margin-top:35px;
}
.contactX6D-locations{
grid-template-columns:1fr;
}
.contactX6D-locations article{
min-height:280px;
padding:35px 20px 45px;
border-right:0;
border-bottom:1px solid #d8d8d8;
}
.contactX6D-locations h3{
margin-top:55px;
}
.footerX6D-main{
grid-template-columns:1fr;
}
.footerX6D-brand,
.footerX6D-address,
.footerX6D-contact{
min-height:0;
padding:45px 20px;
border-right:0;
border-bottom:1px solid #292929;
}
.footerX6D-logos{
gap:20px;
margin-bottom:50px;
}
.footerX6D-scrl{
max-width:140px;
}
.footerX6D-iscm{
max-width:90px;
}
.footerX6D-ueh{
max-width:120px;
}
.footerX6D-bottom{
flex-direction:column;
gap:8px;
padding:18px 20px;
}
}
/* =========================================================
SCRL V2.8X.7
EDITORIAL CLEANUP
========================================================= */
:root{
--x7-black:#090909;
--x7-red:#ed111f;
--x7-line:#d9d9d9;
--x7-muted:#686868;
}
/* ---------------------------------------------------------
HEADER — REMOVE UNNECESSARY DIVIDERS
--------------------------------------------------------- */
header,
.header,
.topbar,
.siteHeader{
border-bottom:0 !important;
box-shadow:none !important;
}
.desktopNav{
border:0 !important;
}
.desktopNav>a,
.desktopRoles>button,
.desktopTopics>button{
font-size:12px !important;
font-weight:800 !important;
letter-spacing:.055em !important;
}
/* ---------------------------------------------------------
LANGUAGE
--------------------------------------------------------- */
.langX7{
position:relative;
display:flex;
align-items:center;
}
.langX7-trigger{
display:flex !important;
align-items:center;
gap:7px;
width:auto !important;
min-width:0 !important;
padding:9px 0 !important;
border:0 !important;
background:transparent !important;
color:inherit;
cursor:pointer;
}
.langX7-trigger svg{
width:17px;
height:17px;
fill:none;
stroke:currentColor;
stroke-width:1.6;
}
.langX7-trigger span{
font-size:10px;
font-weight:800;
letter-spacing:.08em;
}
.langX7-trigger i{
font-size:9px;
font-style:normal;
transition:transform .25s ease;
}
.langX7.open .langX7-trigger i{
transform:rotate(180deg);
}
.langX7-menu{
position:absolute;
z-index:1000;
top:calc(100% + 12px);
right:0;
width:175px;
padding:6px;
background:#fff;
color:#090909;
border:1px solid #ddd;
opacity:0;
visibility:hidden;
transform:translateY(-6px);
transition:
opacity .2s ease,
transform .2s ease,
visibility .2s;
}
.langX7.open .langX7-menu{
opacity:1;
visibility:visible;
transform:none;
}
.langX7-menu button{
display:grid;
grid-template-columns:32px 1fr;
align-items:center;
width:100%;
padding:12px 10px;
border:0;
background:transparent;
color:#090909;
text-align:left;
cursor:pointer;
}
.langX7-menu button:hover{
background:#f3f3f3;
}
.langX7-menu span{
color:var(--x7-red);
font-size:9px;
font-weight:900;
}
.langX7-menu b{
font-size:11px;
font-weight:650;
}
/* ---------------------------------------------------------
HERO — REMOVE UI NOISE
--------------------------------------------------------- */
/* decorative labels */
.heroR .rail,
.heroR-kicker,
.heroR-meta,
.heroR-topline,
.heroR-bottom,
.heroR-ticker,
.heroR-marquee,
.heroR-scroll,
.heroTicker,
.tickerR,
.heroR-location{
display:none !important;
}
/*
Remove visible grid lines while preserving canvas/network
motion if it exists.
*/
.heroR::before{
opacity:.18 !important;
}
.heroR{
border:0 !important;
}
/*
Keep statement dominant but reduce excessive competition.
*/
.heroR-title{
max-width:1100px !important;
font-size:clamp(72px,9.7vw,174px) !important;
line-height:.76 !important;
letter-spacing:-.075em !important;
}
.heroR-copy,
.heroR p{
font-size:clamp(16px,1.25vw,22px);
line-height:1.42;
}
/* remove bottom separators */
.heroR + *,
.heroR-bottom{
border-top-color:transparent !important;
}
/* ---------------------------------------------------------
GLOBAL TYPE RHYTHM
--------------------------------------------------------- */
.paperR h2,
.darkR h2{
letter-spacing:-.055em;
}
.aboutX6 h2,
.rolesR-head h2,
.topicsR-head h2{
font-size:clamp(50px,6.2vw,108px) !important;
line-height:.86 !important;
}
.workR h2{
font-size:clamp(46px,5.5vw,94px) !important;
}
h3{
letter-spacing:-.035em;
}
p{
text-wrap:pretty;
}
/* ---------------------------------------------------------
STORY — VERTICAL EDITORIAL TIMELINE
No horizontal-scroll visualization
--------------------------------------------------------- */
.storyX6,
.storyR{
overflow:visible !important;
}
.storyX6-track,
.storyR-track,
.storyTimeline{
display:block !important;
width:100% !important;
min-width:0 !important;
overflow:visible !important;
transform:none !important;
}
.storyX6-items,
.storyR-items{
display:block !important;
width:100% !important;
min-width:0 !important;
overflow:visible !important;
}
.storyX6-item,
.storyR-item{
display:grid !important;
grid-template-columns:minmax(150px,.65fr) 2fr !important;
gap:5vw !important;
width:100% !important;
min-width:0 !important;
min-height:0 !important;
padding:44px 0 52px !important;
border-left:0 !important;
border-right:0 !important;
border-bottom:1px solid var(--x7-line) !important;
}
.storyX6-item:first-child,
.storyR-item:first-child{
border-top:1px solid var(--x7-line) !important;
}
.storyX6-year,
.storyR-year{
color:var(--x7-red) !important;
font-size:13px !important;
font-weight:900 !important;
letter-spacing:.02em !important;
}
.storyX6-item h3,
.storyR-item h3{
margin:0 0 15px !important;
font-size:clamp(27px,3vw,48px) !important;
line-height:.95 !important;
}
.storyX6-item p,
.storyR-item p{
max-width:650px;
margin:0 !important;
color:#444;
font-size:14px !important;
line-height:1.55 !important;
}
/* kill horizontal scrollbar */
.storyX6 ::-webkit-scrollbar,
.storyR ::-webkit-scrollbar{
display:none !important;
}
.storyX6{
scrollbar-width:none;
}
/* ---------------------------------------------------------
DUPLICATE CONTACT SECTION — GONE
--------------------------------------------------------- */
.contactX6D{
display:none !important;
}
/* ---------------------------------------------------------
FOOTER — ONE COMPOSITION, NOT THREE BOXES
--------------------------------------------------------- */
.footerX6D{
padding:0 4vw;
}
.footerX6D-main{
display:grid !important;
grid-template-columns:1.15fr 1fr !important;
column-gap:9vw !important;
padding:70px 0 65px !important;
border:0 !important;
}
.footerX6D-brand{
grid-column:1 / -1;
min-height:0 !important;
padding:0 0 62px !important;
margin:0 0 52px !important;
border:0 !important;
border-bottom:1px solid #292929 !important;
}
.footerX6D-address,
.footerX6D-contact{
min-height:0 !important;
padding:0 !important;
border:0 !important;
}
/* 3 logos = same row / same optical baseline */
.footerX6D-logos{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
flex-wrap:nowrap !important;
gap:46px !important;
min-height:72px !important;
margin:0 !important;
}
.footerX6D-logos img{
display:block !important;
flex:0 0 auto;
width:auto !important;
object-fit:contain !important;
object-position:left center !important;
}
.footerX6D-scrl{
height:46px !important;
max-width:190px !important;
max-height:none !important;
}
.footerX6D-iscm{
height:44px !important;
max-width:150px !important;
max-height:none !important;
}
.footerX6D-ueh{
height:48px !important;
max-width:190px !important;
max-height:none !important;
}
/* institutional copy under logos is redundant */
.footerX6D-brand>p{
display:none !important;
}
/* Address + Contact headings aligned */
.footerX6D-address>small,
.footerX6D-contact>small{
display:block !important;
height:18px;
margin:0 0 42px !important;
color:var(--x7-red) !important;
font-size:8px !important;
font-weight:900 !important;
letter-spacing:.14em !important;
}
/* Main address follows screenshot 4 rhythm */
.footerX6D-address>p{
max-width:430px !important;
margin:0 !important;
font-size:clamp(17px,1.35vw,22px) !important;
line-height:1.45 !important;
}
/*
Horizontal rules on Address and Contact begin at the
same vertical rhythm.
*/
.footerX6D-secondary,
.footerX6D-research{
max-width:430px;
margin-top:52px !important;
padding-top:22px !important;
border-top:1px solid #333 !important;
}
/* Contact typography */
.footerX6D-contact>a{
margin-bottom:13px !important;
font-size:clamp(17px,1.45vw,23px) !important;
line-height:1.25 !important;
}
/* Bottom bar — subtle */
.footerX6D-bottom{
padding:20px 0 !important;
border-top:1px solid #292929 !important;
}
.footerX6D-bottom span{
font-size:7px !important;
letter-spacing:.12em !important;
}
/* ---------------------------------------------------------
REVEAL — ENTER / EXIT
--------------------------------------------------------- */
.reveal{
opacity:0;
transform:translateY(28px);
transition:
opacity .7s cubic-bezier(.22,1,.36,1),
transform .8s cubic-bezier(.22,1,.36,1);
transition-delay:var(--reveal-delay,0ms);
will-change:opacity,transform;
}
.reveal.in{
opacity:1;
transform:none;
}
.storyX6-item,
.storyR-item{
transition:
opacity .65s ease,
transform .75s cubic-bezier(.22,1,.36,1);
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media(max-width:900px){
.heroR-title{
font-size:clamp(58px,18vw,100px) !important;
line-height:.79 !important;
}
.aboutX6 h2,
.rolesR-head h2,
.topicsR-head h2{
font-size:clamp(43px,13vw,72px) !important;
}
.storyX6-item,
.storyR-item{
grid-template-columns:1fr !important;
gap:25px !important;
padding:35px 0 42px !important;
}
.footerX6D{
padding:0 20px !important;
}
.footerX6D-main{
grid-template-columns:1fr !important;
gap:55px !important;
padding:55px 0 50px !important;
}
.footerX6D-brand{
grid-column:auto;
margin:0 !important;
padding:0 0 45px !important;
}
.footerX6D-logos{
flex-wrap:wrap !important;
gap:24px !important;
}
.footerX6D-scrl{
height:37px !important;
}
.footerX6D-iscm{
height:35px !important;
}
.footerX6D-ueh{
height:39px !important;
}
.footerX6D-address,
.footerX6D-contact{
padding:0 !important;
border:0 !important;
}
.footerX6D-address>small,
.footerX6D-contact>small{
margin-bottom:30px !important;
}
.footerX6D-bottom{
padding:18px 0 !important;
}
.langX7-menu{
right:0;
}
}
@media(prefers-reduced-motion:reduce){
.reveal,
.reveal.in{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
}
/* =========================================================
SCRL X7.2 — RESEARCH LAB UI CLEANUP
========================================================= */
/* ---------------------------------------------------------
HERO KEYWORD STRIP — hard kill
--------------------------------------------------------- */
.heroTicker,
.heroR-ticker,
.heroX6-ticker,
.heroKeywords,
.heroX6-keywords,
[class*="hero"][class*="ticker"],
[class*="hero"][class*="Ticker"],
[class*="hero"][class*="marquee"]{
display:none !important;
}
/* ---------------------------------------------------------
ROLE / TOPIC HERO
--------------------------------------------------------- */
.roleHeroX6,
.topicHeroX6{
min-height:620px !important;
}
.roleHeroX6-inner,
.topicHeroX6-inner{
padding-top:150px !important;
padding-bottom:90px !important;
}
.roleHeroX6 h1,
.topicHeroX6 h1{
max-width:1100px;
font-size:clamp(72px,8vw,138px) !important;
line-height:.84 !important;
letter-spacing:-.065em !important;
}
.roleHeroX6 p,
.topicHeroX6 p{
max-width:650px !important;
margin-top:30px !important;
font-size:16px !important;
line-height:1.45 !important;
}
/* Old backlink that was colliding with description */
.roleHeroX6 a[href*="#roles"],
.topicHeroX6 a[href*="#topics"]{
display:none !important;
}
/* ---------------------------------------------------------
WORK & RESEARCH HEADING
--------------------------------------------------------- */
.roleOutputsX6,
.topicOutputsX6{
padding-top:0 !important;
}
.roleOutputsX6-head{
min-height:0 !important;
padding:72px 4vw 58px !important;
border-bottom:1px solid #aaa;
}
.roleOutputsX6-head small{
display:block;
margin-bottom:18px;
color:#111;
font-size:8px !important;
font-weight:900;
letter-spacing:.14em;
}
.roleOutputsX6-head h2{
max-width:1000px;
margin:0 !important;
font-size:clamp(48px,5.6vw,94px) !important;
line-height:.9 !important;
letter-spacing:-.055em !important;
}
.roleOutputsX6-head h2 em{
color:#ed111f;
font-style:normal;
}
/*
Old rail numbering can remain as navigation hierarchy,
but don't let it compete with the content.
*/
.roleOutputsX6>.rail,
.topicOutputsX6>.rail{
padding-top:32px !important;
padding-bottom:18px !important;
}
/* ---------------------------------------------------------
CARDS — LESS DATABASE, MORE EDITORIAL
--------------------------------------------------------- */
.outputsX6-grid{
border-top:0 !important;
}
.outputsX6-grid article,
.outputCardX6{
min-height:420px !important;
padding:42px 4vw 48px !important;
}
/* remove redundant role eyebrow */
.x72-hide-role,
.outputRoleX6,
.outputCardX6-role,
.outputX6-role{
display:none !important;
}
/*
Defensive selectors:
hide tiny top line when it is explicitly a role navigation row.
*/
.outputsX6-grid article > a[href*="/roles/"]:first-child,
.outputCardX6 > a[href*="/roles/"]:first-child{
display:none !important;
}
/* metadata */
.outputsX6-grid article [class*="meta"],
.outputCardX6 [class*="meta"]{
margin-bottom:48px !important;
}
/* titles */
.outputsX6-grid article h3,
.outputCardX6 h3{
max-width:760px;
margin-top:0 !important;
margin-bottom:24px !important;
font-size:clamp(30px,3vw,54px) !important;
line-height:.98 !important;
letter-spacing:-.045em !important;
}
/* body */
.outputsX6-grid article p,
.outputCardX6 p{
max-width:650px;
font-size:13px !important;
line-height:1.55 !important;
}
/* topic tags */
.outputsX6-grid article [class*="topic"],
.outputCardX6 [class*="topic"]{
margin-top:28px;
}
/* source link */
.outputsX6-grid article a[href^="http"],
.outputCardX6 a[href^="http"]{
margin-top:28px !important;
}
/* ---------------------------------------------------------
REMOVE VISUAL DEBUG / TAXONOMY EYEBROWS
--------------------------------------------------------- */
.outputsX6-grid article > small:first-child{
display:none !important;
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media(max-width:900px){
.roleHeroX6,
.topicHeroX6{
min-height:auto !important;
}
.roleHeroX6-inner,
.topicHeroX6-inner{
padding-top:120px !important;
padding-bottom:65px !important;
}
.roleHeroX6 h1,
.topicHeroX6 h1{
font-size:clamp(55px,16vw,88px) !important;
}
.roleOutputsX6-head{
padding:52px 20px 42px !important;
}
.roleOutputsX6-head h2{
font-size:clamp(42px,13vw,68px) !important;
}
.outputsX6-grid article,
.outputCardX6{
min-height:0 !important;
padding:34px 20px 40px !important;
}
.outputsX6-grid article [class*="meta"],
.outputCardX6 [class*="meta"]{
margin-bottom:34px !important;
}
.outputsX6-grid article h3,
.outputCardX6 h3{
font-size:clamp(29px,9vw,45px) !important;
}
}
/* =========================================================
SCRL X7.3
STORY + FOOTER FINAL POLISH
========================================================= */
/* ---------------------------------------------------------
OUR STORY
Convert existing story into a readable editorial timeline.
No horizontal scrolling.
--------------------------------------------------------- */
.storyX6,
.storyX7{
overflow:visible !important;
width:100% !important;
}
.storyX6-track,
.storyX7-track,
.storyX6-list,
.storyX7-list{
width:100% !important;
max-width:none !important;
min-width:0 !important;
overflow:visible !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:0 !important;
margin:0 !important;
padding:0 !important;
transform:none !important;
}
.storyX6 article,
.storyX7 article{
position:relative !important;
width:100% !important;
min-width:0 !important;
min-height:0 !important;
display:grid !important;
grid-template-columns:
minmax(90px, .28fr)
minmax(220px, .72fr)
minmax(280px, 1.45fr) !important;
align-items:start !important;
gap:clamp(28px,4vw,72px) !important;
padding:
clamp(34px,4vw,62px)
0 !important;
margin:0 !important;
border-left:0 !important;
border-right:0 !important;
border-top:1px solid #d8d8d8 !important;
border-bottom:0 !important;
background:transparent !important;
}
.storyX6 article:last-child,
.storyX7 article:last-child{
border-bottom:1px solid #d8d8d8 !important;
}
.storyX6 article > b,
.storyX7 article > b{
grid-column:1 !important;
margin:0 !important;
padding:0 !important;
font-size:clamp(15px,1.05vw,20px) !important;
line-height:1 !important;
letter-spacing:-.02em !important;
font-weight:800 !important;
color:#ed1c24 !important;
}
.storyX6 article > h3,
.storyX7 article > h3{
grid-column:2 !important;
margin:0 !important;
padding:0 !important;
max-width:360px !important;
font-size:clamp(22px,2vw,36px) !important;
line-height:.98 !important;
letter-spacing:-.045em !important;
font-weight:800 !important;
}
.storyX6 article > p,
.storyX7 article > p{
grid-column:3 !important;
margin:0 !important;
padding:0 !important;
max-width:680px !important;
font-size:clamp(15px,1.05vw,18px) !important;
line-height:1.55 !important;
letter-spacing:-.015em !important;
color:#4d4d4d !important;
}
.storyX6::-webkit-scrollbar,
.storyX7::-webkit-scrollbar,
.storyX6-track::-webkit-scrollbar,
.storyX7-track::-webkit-scrollbar{
display:none !important;
}
/* Story heading: less theatrical, easier to understand */
.storyX6-head,
.storyX7-head{
display:grid !important;
grid-template-columns:1fr auto !important;
align-items:end !important;
gap:40px !important;
margin-bottom:clamp(42px,6vw,90px) !important;
}
.storyX6-head h2,
.storyX7-head h2{
margin:0 !important;
font-size:clamp(48px,7vw,108px) !important;
line-height:.86 !important;
letter-spacing:-.07em !important;
}
.storyX6-head small,
.storyX7-head small{
font-size:11px !important;
line-height:1.2 !important;
letter-spacing:.14em !important;
}
/* ---------------------------------------------------------
FOOTER
Exactly three columns:
01 Logos
02 Address
03 Contact
--------------------------------------------------------- */
.footerX6D{
background:#080808 !important;
color:#fff !important;
padding:
clamp(46px,5vw,72px)
clamp(28px,4.5vw,76px)
0 !important;
min-height:0 !important;
}
/* main = actual 3-column footer */
.footerX6D-main{
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:
minmax(300px,1.15fr)
minmax(300px,.95fr)
minmax(280px,.8fr) !important;
gap:clamp(48px,6vw,110px) !important;
align-items:start !important;
padding:0 0 clamp(44px,5vw,70px) !important;
margin:0 !important;
border:0 !important;
}
/* Absolutely no vertical dividers */
.footerX6D-main > *,
.footerX6D-brand,
.footerX6D-address,
.footerX6D-contact{
border-left:0 !important;
border-right:0 !important;
border-top:0 !important;
padding-left:0 !important;
padding-right:0 !important;
margin:0 !important;
}
/* ---------------------------------------------------------
COLUMN 1 — LOGOS
--------------------------------------------------------- */
.footerX6D-brand{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
}
.footerX6D-logos{
width:100% !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:clamp(20px,2vw,34px) !important;
align-items:center !important;
justify-items:start !important;
margin:0 0 26px !important;
padding:0 !important;
}
/*
Source PNGs have very different aspect ratios.
Equal boxes + object-fit keeps their VISUAL HEIGHT balanced.
*/
.footerX6D-logos img{
display:block !important;
width:100% !important;
height:48px !important;
max-width:150px !important;
object-fit:contain !important;
object-position:left center !important;
margin:0 !important;
padding:0 !important;
opacity:1 !important;
}
/* SCRL is naturally very wide */
.footerX6D-logos img:nth-child(1){
height:46px !important;
}
/* ISCM is more compact */
.footerX6D-logos img:nth-child(2){
height:44px !important;
}
/* UEH + CTD lockup */
.footerX6D-logos img:nth-child(3){
height:46px !important;
}
.footerX6D-brand > p{
margin:0 !important;
max-width:330px !important;
font-size:12px !important;
line-height:1.65 !important;
color:#888 !important;
}
/* ---------------------------------------------------------
COMMON COLUMN LABEL
--------------------------------------------------------- */
.footerX6D-address > small,
.footerX6D-contact > small{
display:block !important;
margin:0 0 28px !important;
padding:0 0 14px !important;
border-bottom:1px solid #333 !important;
font-size:10px !important;
line-height:1 !important;
letter-spacing:.16em !important;
font-weight:800 !important;
color:#ed1c24 !important;
}
/* ---------------------------------------------------------
COLUMN 2 — TWO ADDRESSES
--------------------------------------------------------- */
.footerX6D-address > p{
margin:0 !important;
font-size:clamp(16px,1.15vw,20px) !important;
line-height:1.45 !important;
letter-spacing:-.02em !important;
color:#fff !important;
}
.footerX6D-secondary{
display:block !important;
margin-top:28px !important;
padding-top:20px !important;
border-top:1px solid #333 !important;
}
.footerX6D-secondary b{
display:block !important;
margin:0 0 9px !important;
font-size:10px !important;
line-height:1.25 !important;
letter-spacing:.13em !important;
text-transform:uppercase !important;
color:#aaa !important;
}
.footerX6D-secondary span{
display:block !important;
margin:0 !important;
font-size:12px !important;
line-height:1.6 !important;
color:#888 !important;
}
/* ---------------------------------------------------------
COLUMN 3 — CONTACT
--------------------------------------------------------- */
.footerX6D-contact{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
}
.footerX6D-contact > a{
display:block !important;
margin:0 0 8px !important;
font-size:clamp(15px,1.15vw,20px) !important;
line-height:1.35 !important;
letter-spacing:-.02em !important;
color:#fff !important;
text-decoration:none !important;
}
.footerX6D-contact > a:hover{
color:#ed1c24 !important;
}
.footerX6D-research{
width:100% !important;
margin-top:26px !important;
padding-top:20px !important;
border-top:1px solid #333 !important;
}
.footerX6D-research b{
display:block !important;
margin:0 0 10px !important;
font-size:10px !important;
line-height:1.25 !important;
letter-spacing:.13em !important;
color:#888 !important;
}
.footerX6D-research a{
display:block !important;
margin:5px 0 !important;
font-size:12px !important;
line-height:1.4 !important;
color:#aaa !important;
text-decoration:none !important;
}
.footerX6D-research a:hover{
color:#fff !important;
}
/* ---------------------------------------------------------
FOOTER BOTTOM BAR
--------------------------------------------------------- */
.footerX6D-bottom{
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
width:100% !important;
margin:0 !important;
padding:17px 0 19px !important;
border-top:1px solid #262626 !important;
font-size:9px !important;
line-height:1 !important;
letter-spacing:.14em !important;
font-weight:700 !important;
color:#777 !important;
}
/* Remove decorative dots / stray footer ornamentation */
.footerX6D::before,
.footerX6D::after,
.footerX6D-main::before,
.footerX6D-main::after{
display:none !important;
content:none !important;
}
/* ---------------------------------------------------------
GLOBAL TYPOGRAPHY POLISH
Prevent pages from feeling like every heading is competing.
--------------------------------------------------------- */
.roleOutputsX6-head h2,
.topicOutputsX6 .roleOutputsX6-head h2{
font-size:clamp(44px,6vw,92px) !important;
line-height:.9 !important;
letter-spacing:-.065em !important;
}
.outputsX6-grid h3,
.outputCardX6 h3{
font-size:clamp(24px,2.35vw,42px) !important;
line-height:1.02 !important;
letter-spacing:-.045em !important;
}
/* ---------------------------------------------------------
MOBILE / TABLET
--------------------------------------------------------- */
@media(max-width:1000px){
.storyX6 article,
.storyX7 article{
grid-template-columns:90px 1fr !important;
gap:16px 28px !important;
}
.storyX6 article > b,
.storyX7 article > b{
grid-column:1 !important;
grid-row:1 / span 2 !important;
}
.storyX6 article > h3,
.storyX7 article > h3{
grid-column:2 !important;
}
.storyX6 article > p,
.storyX7 article > p{
grid-column:2 !important;
}
.footerX6D-main{
grid-template-columns:1fr 1fr !important;
gap:48px !important;
}
.footerX6D-brand{
grid-column:1 / -1 !important;
}
.footerX6D-logos{
max-width:520px !important;
}
}
@media(max-width:680px){
.storyX6-head,
.storyX7-head{
grid-template-columns:1fr !important;
gap:18px !important;
}
.storyX6 article,
.storyX7 article{
grid-template-columns:1fr !important;
gap:12px !important;
padding:30px 0 !important;
}
.storyX6 article > b,
.storyX7 article > b,
.storyX6 article > h3,
.storyX7 article > h3,
.storyX6 article > p,
.storyX7 article > p{
grid-column:1 !important;
grid-row:auto !important;
}
.footerX6D{
padding:
42px 24px
0 !important;
}
.footerX6D-main{
grid-template-columns:1fr !important;
gap:42px !important;
}
.footerX6D-brand{
grid-column:auto !important;
}
.footerX6D-logos{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:14px !important;
}
.footerX6D-logos img,
.footerX6D-logos img:nth-child(1),
.footerX6D-logos img:nth-child(2),
.footerX6D-logos img:nth-child(3){
height:34px !important;
max-width:100% !important;
}
.footerX6D-bottom{
gap:20px !important;
align-items:flex-start !important;
}
}
/* =========================================================
SCRL X7.3.1
TRUE 3-COLUMN FOOTER
========================================================= */
.footerX6D{
position:relative !important;
min-height:0 !important;
padding:
clamp(44px,4vw,64px)
clamp(34px,4.5vw,78px)
0 !important;
background:#080808 !important;
}
/* kill decorative leftovers */
.footerX6D::before,
.footerX6D::after,
.footerX6D-main::before,
.footerX6D-main::after,
.footerX6D-brand::before,
.footerX6D-brand::after{
content:none !important;
display:none !important;
}
/* =========================================================
TRUE THREE COLUMNS
========================================================= */
.footerX6D-main{
display:grid !important;
grid-template-columns:
minmax(260px,.9fr)
minmax(320px,1.15fr)
minmax(280px,.9fr) !important;
column-gap:clamp(55px,7vw,130px) !important;
row-gap:0 !important;
align-items:start !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:0 0 clamp(42px,4vw,62px) !important;
border:0 !important;
}
/* force each block into its correct column */
.footerX6D-brand{
grid-column:1 !important;
grid-row:1 !important;
}
.footerX6D-address{
grid-column:2 !important;
grid-row:1 !important;
}
.footerX6D-contact{
grid-column:3 !important;
grid-row:1 !important;
}
/* no column boxes */
.footerX6D-brand,
.footerX6D-address,
.footerX6D-contact{
width:auto !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
}
/* =========================================================
COLUMN 01 — BRAND
========================================================= */
.footerX6D-brand{
display:block !important;
}
/*
Three logos stay INSIDE column 1.
They are vertically stacked because the actual lockups
have very different aspect ratios.
*/
.footerX6D-logos{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:flex-start !important;
width:100% !important;
max-width:235px !important;
gap:22px !important;
margin:0 0 30px !important;
padding:0 !important;
}
/*
Use a common visual container height.
object-fit prevents distortion.
*/
.footerX6D-logos img,
.footerX6D-logos img:nth-child(1),
.footerX6D-logos img:nth-child(2),
.footerX6D-logos img:nth-child(3){
display:block !important;
width:auto !important;
height:38px !important;
max-width:210px !important;
object-fit:contain !important;
object-position:left center !important;
margin:0 !important;
padding:0 !important;
}
/* ISCM mark is naturally compact — slightly taller */
.footerX6D-logos img:nth-child(2){
height:40px !important;
}
/* UEH lockup needs a little more width */
.footerX6D-logos img:nth-child(3){
height:39px !important;
}
.footerX6D-brand > p{
max-width:260px !important;
margin:0 !important;
font-size:11px !important;
line-height:1.6 !important;
color:#777 !important;
}
/* =========================================================
COLUMN HEADERS
Same baseline, no giant rules
========================================================= */
.footerX6D-address > small,
.footerX6D-contact > small{
display:block !important;
min-height:18px !important;
margin:0 0 30px !important;
padding:0 !important;
border:0 !important;
font-size:10px !important;
line-height:1 !important;
letter-spacing:.17em !important;
font-weight:800 !important;
color:#ed1c24 !important;
}
/* =========================================================
COLUMN 02 — ADDRESS
========================================================= */
.footerX6D-address > p{
max-width:410px !important;
margin:0 !important;
font-size:17px !important;
line-height:1.48 !important;
letter-spacing:-.025em !important;
color:#fff !important;
}
/* second address */
.footerX6D-secondary{
max-width:410px !important;
margin:26px 0 0 !important;
padding:20px 0 0 !important;
border-top:1px solid #292929 !important;
}
.footerX6D-secondary b{
display:block !important;
margin:0 0 9px !important;
font-size:9px !important;
line-height:1.2 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
color:#aaa !important;
}
.footerX6D-secondary span{
display:block !important;
font-size:12px !important;
line-height:1.55 !important;
color:#888 !important;
}
/* =========================================================
COLUMN 03 — CONTACT
========================================================= */
.footerX6D-contact{
display:block !important;
}
.footerX6D-contact > a{
display:block !important;
margin:0 0 8px !important;
font-size:17px !important;
line-height:1.4 !important;
letter-spacing:-.025em !important;
color:#fff !important;
text-decoration:none !important;
}
.footerX6D-contact > a:hover{
color:#ed1c24 !important;
}
.footerX6D-research{
max-width:410px !important;
margin:26px 0 0 !important;
padding:20px 0 0 !important;
border-top:1px solid #292929 !important;
}
.footerX6D-research b{
display:block !important;
margin:0 0 10px !important;
font-size:9px !important;
line-height:1.2 !important;
letter-spacing:.16em !important;
color:#888 !important;
}
.footerX6D-research a{
display:block !important;
margin:5px 0 !important;
font-size:12px !important;
line-height:1.4 !important;
color:#aaa !important;
text-decoration:none !important;
}
/* =========================================================
BOTTOM BAR
========================================================= */
.footerX6D-bottom{
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
width:100% !important;
margin:0 !important;
padding:17px 0 19px !important;
border-top:1px solid #242424 !important;
font-size:9px !important;
line-height:1 !important;
letter-spacing:.14em !important;
font-weight:700 !important;
color:#666 !important;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1000px){
.footerX6D-main{
grid-template-columns:
minmax(220px,.8fr)
minmax(260px,1fr)
minmax(240px,.9fr) !important;
column-gap:38px !important;
}
.footerX6D-logos{
max-width:190px !important;
}
.footerX6D-logos img,
.footerX6D-logos img:nth-child(1),
.footerX6D-logos img:nth-child(2),
.footerX6D-logos img:nth-child(3){
max-width:180px !important;
height:34px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:760px){
.footerX6D{
padding:
38px 24px
0 !important;
}
.footerX6D-main{
display:grid !important;
grid-template-columns:1fr !important;
gap:38px !important;
padding-bottom:38px !important;
}
.footerX6D-brand,
.footerX6D-address,
.footerX6D-contact{
grid-column:1 !important;
grid-row:auto !important;
}
.footerX6D-logos{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
align-items:center !important;
max-width:100% !important;
gap:18px !important;
}
.footerX6D-logos img,
.footerX6D-logos img:nth-child(1),
.footerX6D-logos img:nth-child(2),
.footerX6D-logos img:nth-child(3){
width:100% !important;
height:30px !important;
max-width:120px !important;
}
.footerX6D-address > small,
.footerX6D-contact > small{
margin-bottom:20px !important;
}
.footerX6D-bottom{
gap:16px !important;
font-size:8px !important;
}
}
/* =========================================================
SCRL X7.3.2 — FOOTER LOGO VISUAL NORMALIZATION
Normalize perceived size, not source-image pixel width.
========================================================= */
.footerX6D-brand .footerX6D-logos{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:flex-start !important;
gap:26px !important;
width:100% !important;
}
/* Reset previous generic logo sizing */
.footerX6D-brand .footerX6D-logos img{
display:block !important;
width:auto !important;
max-width:none !important;
object-fit:contain !important;
object-position:left center !important;
margin:0 !important;
}
/*
Source aspect ratios differ strongly:
SCRL ≈ 4.1:1
ISCM ≈ 3.1:1
UEH ≈ 2.8:1
Use visual-height normalization.
*/
.footerX6D-brand .footerX6D-logos img:nth-child(1){
height:42px !important;
}
.footerX6D-brand .footerX6D-logos img:nth-child(2){
height:42px !important;
}
.footerX6D-brand .footerX6D-logos img:nth-child(3){
height:42px !important;
}
/* Keep the brand column compact */
.footerX6D-brand{
display:flex !important;
align-items:flex-start !important;
justify-content:flex-start !important;
}
@media (max-width:900px){
.footerX6D-brand .footerX6D-logos{
gap:20px !important;
}
.footerX6D-brand .footerX6D-logos img:nth-child(1),
.footerX6D-brand .footerX6D-logos img:nth-child(2),
.footerX6D-brand .footerX6D-logos img:nth-child(3){
height:36px !important;
}
}
/* =========================================================
X7.3.3 — FOOTER LOGO OPTICAL NORMALIZATION
Equal visual weight, not equal CSS height
========================================================= */
.footerX6D-logos{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:flex-start !important;
gap:24px !important;
}
/* SCRL */
.footerX6D-logos img:nth-child(1){
width:auto !important;
height:42px !important;
max-width:190px !important;
object-fit:contain !important;
object-position:left center !important;
}
/* ISCM — intentionally smaller because its artwork is visually heavier */
.footerX6D-logos img:nth-child(2){
width:auto !important;
height:30px !important;
max-width:165px !important;
object-fit:contain !important;
object-position:left center !important;
}
/* UEH / CTD */
.footerX6D-logos img:nth-child(3){
width:auto !important;
height:42px !important;
max-width:190px !important;
object-fit:contain !important;
object-position:left center !important;
}
/* =========================================================
X7.3.5 — FOOTER FINAL TYPOGRAPHY / OPTICAL BALANCE
========================================================= */
/* ---------- BRAND COLUMN ---------- */
.footerX6D-brand{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:flex-start !important;
gap:24px !important;
}
/*
Optical normalization:
source files have very different internal canvas/proportions,
therefore equal CSS height does NOT produce equal visual weight.
*/
.footerX6D-brand img:nth-child(1){
width:auto !important;
height:42px !important;
max-width:190px !important;
object-fit:contain !important;
object-position:left center !important;
}
.footerX6D-brand img:nth-child(2){
width:auto !important;
height:22px !important;
max-width:150px !important;
object-fit:contain !important;
object-position:left center !important;
}
.footerX6D-brand img:nth-child(3){
width:auto !important;
height:38px !important;
max-width:170px !important;
object-fit:contain !important;
object-position:left center !important;
}
/* ---------- ADDRESS COLUMN ---------- */
.footerX6D-address{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
}
.footerX6D-address > small{
display:block !important;
margin:0 0 36px !important;
font-size:12px !important;
line-height:1 !important;
font-weight:800 !important;
letter-spacing:.14em !important;
color:#ed1c24 !important;
}
.footerX6D-place{
width:100% !important;
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
}
/* small institutional label */
.footerX6D-place > b{
display:block !important;
margin:0 0 10px !important;
font-size:10px !important;
line-height:1.2 !important;
font-weight:700 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
color:#a7a7a7 !important;
}
/* actual unit name */
.footerX6D-place > strong{
display:block !important;
margin:0 0 12px !important;
max-width:430px !important;
font-size:18px !important;
line-height:1.2 !important;
font-weight:600 !important;
letter-spacing:-.02em !important;
color:#fff !important;
}
/* address */
.footerX6D-place > span{
display:block !important;
font-size:14px !important;
line-height:1.55 !important;
font-weight:400 !important;
color:#aaa !important;
}
.footerX6D-placePrimary{
padding:0 0 26px !important;
border-bottom:1px solid #292929 !important;
}
.footerX6D-secondary{
margin:26px 0 0 !important;
padding:0 !important;
border:0 !important;
}
/* ---------- CONTACT COLUMN ---------- */
.footerX6D-contact > small{
display:block !important;
margin:0 0 36px !important;
font-size:12px !important;
line-height:1 !important;
font-weight:800 !important;
letter-spacing:.14em !important;
color:#ed1c24 !important;
}
.footerX6D-contact > a{
display:block !important;
width:max-content !important;
margin:0 0 9px !important;
font-size:17px !important;
line-height:1.35 !important;
font-weight:500 !important;
letter-spacing:-.015em !important;
color:#fff !important;
}
.footerX6D-research{
margin-top:28px !important;
padding-top:24px !important;
border-top:1px solid #292929 !important;
width:100% !important;
}
.footerX6D-research > b{
display:block !important;
margin-bottom:14px !important;
font-size:10px !important;
line-height:1 !important;
font-weight:600 !important;
letter-spacing:.16em !important;
color:#999 !important;
}
.footerX6D-research > a{
display:block !important;
width:max-content !important;
margin:0 0 7px !important;
font-size:13px !important;
line-height:1.4 !important;
font-weight:400 !important;
color:#aaa !important;
}
/* ---------- THREE-COLUMN ALIGNMENT ---------- */
.footerX6D-main{
grid-template-columns:
minmax(210px,.8fr)
minmax(360px,1fr)
minmax(300px,.8fr) !important;
column-gap:72px !important;
align-items:start !important;
}
/* ---------- MOBILE ---------- */
@media(max-width:900px){
.footerX6D-main{
grid-template-columns:1fr !important;
row-gap:48px !important;
}
.footerX6D-brand{
flex-direction:row !important;
flex-wrap:wrap !important;
align-items:center !important;
gap:26px !important;
}
.footerX6D-brand img:nth-child(1){
height:34px !important;
}
.footerX6D-brand img:nth-child(2){
height:19px !important;
}
.footerX6D-brand img:nth-child(3){
height:31px !important;
}
.footerX6D-address > small,
.footerX6D-contact > small{
margin-bottom:26px !important;
}
.footerX6D-place > strong{
font-size:17px !important;
}
}
/* =========================================================
X7.3.6 — ALIGN ADDRESS / CONTACT DIVIDERS
========================================================= */
/*
Make first information block in ADDRESS and CONTACT
occupy the same vertical height so both rules align.
*/
.footerX6D-placePrimary{
box-sizing:border-box !important;
min-height:168px !important;
padding-bottom:26px !important;
border-bottom:1px solid #292929 !important;
}
.footerX6D-contact{
position:relative !important;
}
/* institutional contact block before Research Contact */
.footerX6D-contact > a:nth-of-type(3){
margin-bottom:0 !important;
}
/*
Research Contact begins at exactly the same Y position
as Meta Digital Twins Lab.
*/
.footerX6D-research{
box-sizing:border-box !important;
margin-top:34px !important;
padding-top:26px !important;
border-top:1px solid #292929 !important;
}
/* Match ADDRESS separator position precisely */
.footerX6D-placePrimary{
min-height:0 !important;
padding-bottom:34px !important;
}
.footerX6D-secondary{
margin-top:0 !important;
padding-top:26px !important;
}
/*
Both separators are positioned relative to the same
column start instead of depending on text height.
*/
.footerX6D-address,
.footerX6D-contact{
position:relative !important;
}
.footerX6D-address::after,
.footerX6D-contact::after{
content:"" !important;
position:absolute !important;
top:200px !important;
left:0 !important;
width:100% !important;
height:1px !important;
background:#292929 !important;
pointer-events:none !important;
}
/* remove old rules so only aligned rules remain */
.footerX6D-placePrimary,
.footerX6D-research{
border-top:0 !important;
border-bottom:0 !important;
}
.footerX6D-secondary{
margin-top:52px !important;
padding-top:0 !important;
}
.footerX6D-research{
margin-top:52px !important;
padding-top:0 !important;
}
@media(max-width:900px){
.footerX6D-address::after,
.footerX6D-contact::after{
display:none !important;
}
.footerX6D-secondary,
.footerX6D-research{
margin-top:28px !important;
padding-top:24px !important;
border-top:1px solid #292929 !important;
}
}
/* =========================================================
X7.3.7 — FOOTER SPATIAL SEPARATION
========================================================= */
/*
Footer must read as a separate institutional component,
not as continuation of Future Work.
*/
.footerX6D{
position:relative !important;
/* white transition band between previous section + footer */
border-top:42px solid #fff !important;
padding:
clamp(54px,5vw,78px)
clamp(48px,5vw,86px)
0 !important;
min-height:0 !important;
}
/* ---------- compact 3-column body ---------- */
.footerX6D-main{
grid-template-columns:
minmax(190px,.72fr)
minmax(360px,1fr)
minmax(280px,.78fr) !important;
column-gap:clamp(64px,8vw,150px) !important;
padding:0 !important;
min-height:300px !important;
}
/* ---------- brand ---------- */
.footerX6D-brand{
gap:20px !important;
}
.footerX6D-brand img:nth-child(1){
height:36px !important;
}
.footerX6D-brand img:nth-child(2){
height:20px !important;
}
.footerX6D-brand img:nth-child(3){
height:34px !important;
}
/* ---------- headings ---------- */
.footerX6D-address > small,
.footerX6D-contact > small{
margin-bottom:32px !important;
}
/* ---------- aligned divider ---------- */
.footerX6D-address::after,
.footerX6D-contact::after{
top:190px !important;
}
/* ---------- secondary blocks ---------- */
.footerX6D-secondary,
.footerX6D-research{
margin-top:48px !important;
}
/* ---------- bottom copyright ---------- */
.footerX6D-bottom{
margin-top:44px !important;
padding:18px 0 20px !important;
border-top:1px solid #242424 !important;
}
/* ---------- remove unnecessary vertical excess ---------- */
.footerX6D-place > strong{
font-size:16px !important;
line-height:1.25 !important;
}
.footerX6D-place > span{
font-size:13px !important;
line-height:1.5 !important;
}
.footerX6D-contact > a{
font-size:15px !important;
line-height:1.4 !important;
}
/* ---------- mobile ---------- */
@media(max-width:900px){
.footerX6D{
border-top-width:24px !important;
padding:44px 24px 0 !important;
}
.footerX6D-main{
min-height:0 !important;
row-gap:44px !important;
}
.footerX6D-bottom{
margin-top:40px !important;
}
}
/* =========================================================
X7.3.8 — FOOTER ADDRESS / CONTACT GRID BALANCE
========================================================= */
/*
Desktop composition
BRAND ADDRESS CONTACT
ADDRESS CONTACT
----------------------------- -----------------------------
META LAB RESEARCH CONTACT
Address and Contact now share the same vertical rhythm.
*/
/* ---------- overall 3-column composition ---------- */
.footerX6D-main{
grid-template-columns:
minmax(190px,.62fr)
minmax(390px,1fr)
minmax(330px,.86fr) !important;
column-gap:clamp(54px,6vw,110px) !important;
align-items:start !important;
}
/* ---------- address + contact columns ---------- */
.footerX6D-address,
.footerX6D-contact{
position:relative !important;
display:grid !important;
grid-template-rows:
32px
150px
1px
auto !important;
align-content:start !important;
min-width:0 !important;
}
/* headings */
.footerX6D-address > small,
.footerX6D-contact > small{
grid-row:1 !important;
margin:0 !important;
padding:0 !important;
align-self:start !important;
font-size:11px !important;
line-height:1 !important;
letter-spacing:.15em !important;
}
/* ---------- PRIMARY ADDRESS ---------- */
.footerX6D-placePrimary{
grid-row:2 !important;
margin:0 !important;
padding:16px 0 22px !important;
align-self:start !important;
}
/* ---------- PRIMARY CONTACT ---------- */
.footerX6D-contact > a{
margin-left:0 !important;
}
.footerX6D-contact > a:nth-of-type(1){
grid-row:2 !important;
align-self:start !important;
margin-top:16px !important;
}
.footerX6D-contact > a:nth-of-type(2){
position:absolute !important;
top:80px !important;
left:0 !important;
}
.footerX6D-contact > a:nth-of-type(3){
position:absolute !important;
top:112px !important;
left:0 !important;
}
/* ---------- ONE CONSISTENT DIVIDER ---------- */
.footerX6D-address::after,
.footerX6D-contact::after{
content:"" !important;
position:static !important;
grid-row:3 !important;
display:block !important;
width:100% !important;
height:1px !important;
background:#292929 !important;
}
/* ---------- SECONDARY ROW ---------- */
.footerX6D-secondary,
.footerX6D-research{
grid-row:4 !important;
margin:0 !important;
padding:28px 0 0 !important;
border:0 !important;
}
/* Meta lab */
.footerX6D-secondary > b{
margin-bottom:11px !important;
font-size:10px !important;
line-height:1 !important;
letter-spacing:.16em !important;
font-weight:600 !important;
color:#aaa !important;
}
.footerX6D-secondary > strong{
margin-bottom:11px !important;
font-size:16px !important;
line-height:1.25 !important;
font-weight:600 !important;
}
.footerX6D-secondary > span{
font-size:13px !important;
line-height:1.55 !important;
}
/* Research contact */
.footerX6D-research > b{
margin:0 0 16px !important;
font-size:10px !important;
line-height:1 !important;
letter-spacing:.16em !important;
font-weight:600 !important;
}
.footerX6D-research > a{
margin:0 0 8px !important;
font-size:13px !important;
line-height:1.45 !important;
}
/* ---------- tighten footer width visually ---------- */
.footerX6D{
padding-left:clamp(48px,5vw,90px) !important;
padding-right:clamp(48px,5vw,90px) !important;
}
/* ---------- mobile: return to natural document flow ---------- */
@media(max-width:900px){
.footerX6D-main{
grid-template-columns:1fr !important;
row-gap:44px !important;
}
.footerX6D-address,
.footerX6D-contact{
display:block !important;
}
.footerX6D-address > small,
.footerX6D-contact > small{
display:block !important;
margin-bottom:28px !important;
}
.footerX6D-placePrimary{
padding:0 0 24px !important;
}
.footerX6D-contact > a:nth-of-type(1),
.footerX6D-contact > a:nth-of-type(2),
.footerX6D-contact > a:nth-of-type(3){
position:static !important;
display:block !important;
margin:0 0 9px !important;
}
.footerX6D-address::after,
.footerX6D-contact::after{
display:none !important;
}
.footerX6D-secondary,
.footerX6D-research{
margin-top:24px !important;
padding-top:24px !important;
border-top:1px solid #292929 !important;
}
}
/* =========================================================
X7.3.9 — NEW OFFICIAL ISCM FOOTER LOGO
========================================================= */
/*
New ISCM asset includes the complete horizontal identity.
Size by width instead of inheriting the old wordmark height.
*/
.footerX6D-brand img:nth-child(1){
width:auto !important;
height:36px !important;
max-width:190px !important;
object-fit:contain !important;
object-position:left center !important;
}
.footerX6D-brand img:nth-child(2){
width:148px !important;
height:auto !important;
max-width:148px !important;
max-height:42px !important;
object-fit:contain !important;
object-position:left center !important;
}
.footerX6D-brand img:nth-child(3){
width:auto !important;
height:34px !important;
max-width:170px !important;
object-fit:contain !important;
object-position:left center !important;
}
.footerX6D-brand{
gap:22px !important;
}
@media(max-width:900px){
.footerX6D-brand img:nth-child(1){
height:32px !important;
}
.footerX6D-brand img:nth-child(2){
width:132px !important;
height:auto !important;
}
.footerX6D-brand img:nth-child(3){
height:31px !important;
}
}
/* =========================================================
X7.4.0 — FOOTER BRAND OPTICAL BALANCE
Balance visible logo footprint, not source-image dimensions
========================================================= */
.footerX6D-brand{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:flex-start !important;
gap:18px !important;
}
/* Each logo gets the same visual row */
.footerX6D-brand img{
display:block !important;
object-fit:contain !important;
object-position:left center !important;
margin:0 !important;
max-height:none !important;
}
/* SCRL — visually dense horizontal logo */
.footerX6D-brand img:nth-child(1){
width:136px !important;
height:auto !important;
max-width:none !important;
}
/* ISCM — slightly wider because mark is visually lighter */
.footerX6D-brand img:nth-child(2){
width:150px !important;
height:auto !important;
max-width:none !important;
}
/* UEH / CTD */
.footerX6D-brand img:nth-child(3){
width:142px !important;
height:auto !important;
max-width:none !important;
}
/* Keep vertical rhythm visually even */
.footerX6D-brand img:nth-child(1){
margin-bottom:2px !important;
}
.footerX6D-brand img:nth-child(2){
margin-bottom:1px !important;
}
@media(max-width:900px){
.footerX6D-brand{
gap:16px !important;
}
.footerX6D-brand img:nth-child(1){
width:125px !important;
height:auto !important;
}
.footerX6D-brand img:nth-child(2){
width:138px !important;
height:auto !important;
}
.footerX6D-brand img:nth-child(3){
width:130px !important;
height:auto !important;
}
}
/* =========================================================
X7.5 — OUR STORY / EDITORIAL TIMELINE
========================================================= */
.storyX75{
background:#fff;
color:#090909;
border-top:1px solid #d8d8d8;
padding:110px 4.25vw 125px;
}
.storyX75-shell{
max-width:1720px;
margin:0 auto;
display:grid;
grid-template-columns:minmax(280px,.72fr) minmax(600px,1.28fr);
gap:8vw;
align-items:start;
}
/* LEFT / INTRO */
.storyX75-intro{
position:sticky;
top:125px;
}
.storyX75-intro > small{
display:block;
margin-bottom:34px;
font-size:11px;
font-weight:800;
letter-spacing:.16em;
}
.storyX75-intro h2{
margin:0;
font-size:clamp(48px,5.3vw,92px);
line-height:.86;
letter-spacing:-.065em;
font-weight:800;
}
.storyX75-intro h2 em{
color:#ed1c24;
font-style:normal;
}
.storyX75-period{
display:flex;
align-items:center;
gap:14px;
margin-top:38px;
max-width:330px;
font-size:12px;
font-weight:800;
letter-spacing:.08em;
}
.storyX75-period i{
height:1px;
flex:1;
background:#090909;
position:relative;
}
.storyX75-period i:after{
content:"";
position:absolute;
right:0;
top:-3px;
width:7px;
height:7px;
border-top:1px solid #090909;
border-right:1px solid #090909;
transform:rotate(45deg);
}
.storyX75-intro p{
max-width:470px;
margin:30px 0 0;
color:#555;
font-size:15px;
line-height:1.6;
}
/* RIGHT / TIMELINE */
.storyX75-timeline{
position:relative;
}
.storyX75-timeline:before{
content:"";
position:absolute;
left:137px;
top:20px;
bottom:20px;
width:1px;
background:#d7d7d7;
}
.storyX75-item{
position:relative;
display:grid;
grid-template-columns:105px 65px minmax(0,1fr);
min-height:155px;
}
.storyX75-year{
padding-top:4px;
font-size:13px;
line-height:1.25;
font-weight:800;
letter-spacing:-.01em;
}
.storyX75-year span{
display:block;
width:max-content;
margin-top:8px;
padding:4px 7px;
background:#090909;
color:#fff;
font-size:8px;
letter-spacing:.12em;
}
.storyX75-node{
position:relative;
}
.storyX75-node i{
position:absolute;
top:4px;
left:27px;
z-index:2;
display:block;
width:11px;
height:11px;
border-radius:50%;
background:#fff;
border:2px solid #ed1c24;
}
.storyX75-content{
padding:0 0 52px;
border-bottom:1px solid #dedede;
}
.storyX75-item + .storyX75-item{
padding-top:34px;
}
.storyX75-content small{
display:block;
margin-bottom:12px;
color:#ed1c24;
font-size:9px;
font-weight:800;
letter-spacing:.16em;
}
.storyX75-content h3{
max-width:720px;
margin:0;
font-size:clamp(24px,2.05vw,38px);
line-height:1.02;
letter-spacing:-.045em;
font-weight:750;
}
.storyX75-content p{
max-width:690px;
margin:15px 0 0;
color:#5a5a5a;
font-size:14px;
line-height:1.55;
}
.storyX75-current .storyX75-node i{
background:#ed1c24;
box-shadow:0 0 0 7px rgba(237,28,36,.10);
}
.storyX75-current .storyX75-content h3{
color:#ed1c24;
}
.storyX75-future{
opacity:.72;
}
.storyX75-future .storyX75-node i{
background:#fff;
border-style:dashed;
}
.storyX75-future .storyX75-content{
border-bottom:0;
}
/* TABLET */
@media(max-width:1100px){
.storyX75{
padding:85px 5vw 100px;
}
.storyX75-shell{
grid-template-columns:1fr;
gap:70px;
}
.storyX75-intro{
position:relative;
top:auto;
display:grid;
grid-template-columns:1fr 1fr;
column-gap:8vw;
}
.storyX75-intro > small,
.storyX75-intro h2{
grid-column:1;
}
.storyX75-period,
.storyX75-intro p{
grid-column:2;
}
.storyX75-period{
grid-row:1;
align-self:end;
margin-top:0;
}
.storyX75-intro p{
grid-row:2;
margin-top:20px;
}
}
/* MOBILE */
@media(max-width:700px){
.storyX75{
padding:68px 22px 78px;
}
.storyX75-shell{
gap:58px;
}
.storyX75-intro{
display:block;
}
.storyX75-intro > small{
margin-bottom:25px;
}
.storyX75-intro h2{
font-size:50px;
}
.storyX75-period{
margin-top:30px;
}
.storyX75-intro p{
margin-top:24px;
}
.storyX75-timeline:before{
left:6px;
}
.storyX75-item{
grid-template-columns:28px 1fr;
min-height:0;
padding-bottom:0;
}
.storyX75-item + .storyX75-item{
padding-top:34px;
}
.storyX75-year{
grid-column:2;
grid-row:1;
padding:0 0 13px;
color:#ed1c24;
}
.storyX75-node{
grid-column:1;
grid-row:1 / span 2;
}
.storyX75-node i{
left:0;
top:2px;
width:13px;
height:13px;
}
.storyX75-content{
grid-column:2;
grid-row:2;
padding:0 0 38px;
}
.storyX75-content h3{
font-size:27px;
}
.storyX75-content p{
font-size:14px;
}
}
/* =========================================================
X7.6P — PEOPLE ONLY
No Story / Footer / Global layout changes
========================================================= */
.peopleX6{
width:100%;
box-sizing:border-box;
}
/* section heading */
.peopleX6-head{
box-sizing:border-box;
width:100%;
padding-left:4vw;
padding-right:4vw;
}
/* each group: title + members */
.peopleX6-group{
box-sizing:border-box !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:0 4vw 90px !important;
display:grid !important;
grid-template-columns:minmax(190px, .26fr) minmax(0, 1fr) !important;
gap:clamp(40px,5vw,90px) !important;
align-items:start !important;
}
/* CORE TEAM / INTERNATIONAL MEMBERS */
.peopleX6-groupTitle{
position:static !important;
width:auto !important;
min-width:0 !important;
margin:0 !important;
padding:28px 0 0 !important;
border-top:1px solid #111 !important;
transform:none !important;
}
.peopleX6-groupTitle span{
display:block !important;
position:static !important;
margin:0 0 18px !important;
color:#e41423 !important;
font-size:11px !important;
line-height:1 !important;
font-weight:800 !important;
letter-spacing:.12em !important;
}
.peopleX6-groupTitle h3{
position:static !important;
width:auto !important;
max-width:190px !important;
margin:0 !important;
font-size:14px !important;
line-height:1.15 !important;
font-weight:800 !important;
letter-spacing:.04em !important;
overflow-wrap:normal !important;
word-break:normal !important;
transform:none !important;
}
/* actual member grid */
.peopleX6-list{
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
column-gap:clamp(26px,3vw,52px) !important;
row-gap:52px !important;
width:100% !important;
min-width:0 !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
align-items:start !important;
}
/* one person = one independent card */
.peopleX6-list > article{
position:static !important;
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
box-sizing:border-box !important;
width:100% !important;
min-width:0 !important;
max-width:none !important;
min-height:250px !important;
margin:0 !important;
padding:27px 0 32px !important;
border-top:1px solid #cfcfcf !important;
overflow:visible !important;
transform:none !important;
}
/* member name */
.peopleX6-list > article > h4{
position:static !important;
display:block !important;
width:100% !important;
max-width:100% !important;
margin:0 0 18px !important;
padding:0 !important;
font-size:clamp(23px,1.75vw,32px) !important;
line-height:1.02 !important;
font-weight:800 !important;
letter-spacing:-.04em !important;
overflow-wrap:break-word !important;
word-break:normal !important;
transform:none !important;
}
/* position / affiliation */
.peopleX6-list > article > p{
position:static !important;
display:block !important;
width:100% !important;
max-width:100% !important;
margin:0 0 26px !important;
padding:0 !important;
color:#696969 !important;
font-size:13px !important;
line-height:1.45 !important;
font-weight:400 !important;
overflow-wrap:break-word !important;
transform:none !important;
}
/* topic list */
.peopleX6-list > article > div{
position:static !important;
display:flex !important;
flex-wrap:wrap !important;
gap:7px !important;
width:100% !important;
max-width:100% !important;
margin:auto 0 0 !important;
padding:0 !important;
transform:none !important;
}
/* topic pill */
.peopleX6-list > article > div > span{
position:static !important;
display:inline-flex !important;
align-items:center !important;
width:auto !important;
max-width:100% !important;
margin:0 !important;
padding:7px 10px !important;
border:1px solid #d4d4d4 !important;
border-radius:999px !important;
background:transparent !important;
color:#555 !important;
font-size:9px !important;
line-height:1.25 !important;
font-weight:600 !important;
letter-spacing:.02em !important;
white-space:normal !important;
transform:none !important;
}
/* International group separation */
.peopleX6-group.international{
padding-top:18px !important;
}
/* tablet */
@media(max-width:1100px){
.peopleX6-group{
grid-template-columns:160px minmax(0,1fr) !important;
}
.peopleX6-list{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
/* mobile */
@media(max-width:700px){
.peopleX6-head{
padding-left:20px !important;
padding-right:20px !important;
}
.peopleX6-group{
display:block !important;
padding:0 20px 70px !important;
}
.peopleX6-groupTitle{
margin-bottom:30px !important;
}
.peopleX6-groupTitle h3{
max-width:none !important;
}
.peopleX6-list{
grid-template-columns:1fr !important;
row-gap:0 !important;
}
.peopleX6-list > article{
min-height:0 !important;
padding:25px 0 30px !important;
}
.peopleX6-list > article > h4{
font-size:27px !important;
}
}
/* =========================================================
X7.6P2 — PEOPLE ALIGNMENT
Fix:
- group title no longer consumes member-grid column
- remove artificial vertical gaps
- role sits directly below name
- topics sit directly below role
- all cards align consistently
========================================================= */
.peopleX6-group,
.peopleX6-group.international{
display:block !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:0 4vw 92px !important;
box-sizing:border-box !important;
}
/* ---------------------------------------------------------
GROUP TITLE
01 CORE TEAM
02 KEY INTERNATIONAL MEMBERS
--------------------------------------------------------- */
.peopleX6-groupTitle{
position:static !important;
display:grid !important;
grid-template-columns:44px minmax(0,1fr) !important;
align-items:start !important;
gap:0 !important;
width:100% !important;
max-width:none !important;
margin:0 0 34px !important;
padding:22px 0 0 !important;
border-top:1px solid #111 !important;
transform:none !important;
}
.peopleX6-groupTitle span{
position:static !important;
display:block !important;
margin:0 !important;
padding:1px 0 0 !important;
color:#ed1c24 !important;
font-size:11px !important;
line-height:1.1 !important;
font-weight:900 !important;
letter-spacing:.12em !important;
transform:none !important;
}
.peopleX6-groupTitle h3{
position:static !important;
display:block !important;
width:auto !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
font-size:14px !important;
line-height:1.15 !important;
font-weight:900 !important;
letter-spacing:.02em !important;
word-break:normal !important;
overflow-wrap:normal !important;
transform:none !important;
}
/* ---------------------------------------------------------
MEMBER GRID
--------------------------------------------------------- */
.peopleX6-list{
position:static !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
column-gap:clamp(34px,4vw,76px) !important;
row-gap:58px !important;
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
align-items:start !important;
transform:none !important;
}
/* ---------------------------------------------------------
MEMBER CARD
--------------------------------------------------------- */
.peopleX6-list > article{
position:static !important;
display:block !important;
width:100% !important;
max-width:none !important;
min-width:0 !important;
/* remove the giant empty vertical space */
min-height:0 !important;
height:auto !important;
margin:0 !important;
padding:24px 0 30px !important;
border-top:1px solid #d2d2d2 !important;
overflow:visible !important;
transform:none !important;
}
/* NAME */
.peopleX6-list > article > h4{
position:static !important;
display:block !important;
width:100% !important;
max-width:100% !important;
min-height:0 !important;
margin:0 0 12px !important;
padding:0 !important;
color:#090909 !important;
font-size:clamp(25px,1.8vw,34px) !important;
line-height:1.02 !important;
font-weight:800 !important;
letter-spacing:-.045em !important;
word-break:normal !important;
overflow-wrap:normal !important;
hyphens:none !important;
transform:none !important;
}
/* ROLE / AFFILIATION */
.peopleX6-list > article > p{
position:static !important;
display:block !important;
width:100% !important;
max-width:100% !important;
min-height:0 !important;
margin:0 0 22px !important;
padding:0 !important;
color:#666 !important;
font-size:13px !important;
line-height:1.45 !important;
font-weight:400 !important;
word-break:normal !important;
overflow-wrap:normal !important;
transform:none !important;
}
/* TOPICS */
.peopleX6-list > article > div{
position:static !important;
display:flex !important;
flex-wrap:wrap !important;
align-items:flex-start !important;
justify-content:flex-start !important;
gap:7px !important;
width:100% !important;
max-width:100% !important;
/* IMPORTANT: cancel previous margin:auto */
margin:0 !important;
padding:0 !important;
transform:none !important;
}
.peopleX6-list > article > div > span{
position:static !important;
display:inline-flex !important;
align-items:center !important;
width:auto !important;
max-width:100% !important;
margin:0 !important;
padding:7px 10px !important;
border:1px solid #d3d3d3 !important;
border-radius:999px !important;
background:#fff !important;
color:#555 !important;
font-size:9px !important;
line-height:1.2 !important;
font-weight:700 !important;
letter-spacing:.015em !important;
white-space:normal !important;
transform:none !important;
}
/* Cards without topic div:
avoid fake blank space after role */
.peopleX6-list > article > p:last-child{
margin-bottom:0 !important;
}
/* ---------------------------------------------------------
INTERNATIONAL MEMBERS
--------------------------------------------------------- */
.peopleX6-group.international{
padding-top:0 !important;
}
.peopleX6-group.international .peopleX6-groupTitle{
margin-top:0 !important;
}
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media(max-width:1050px){
.peopleX6-list{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
column-gap:42px !important;
row-gap:48px !important;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media(max-width:700px){
.peopleX6-group,
.peopleX6-group.international{
padding:0 20px 64px !important;
}
.peopleX6-groupTitle{
grid-template-columns:38px minmax(0,1fr) !important;
margin-bottom:22px !important;
padding-top:18px !important;
}
.peopleX6-list{
grid-template-columns:1fr !important;
row-gap:0 !important;
}
.peopleX6-list > article{
padding:23px 0 27px !important;
}
.peopleX6-list > article > h4{
font-size:27px !important;
margin-bottom:10px !important;
}
.peopleX6-list > article > p{
margin-bottom:18px !important;
}
}