/* World NCD Action Forum: site styles (from the approved prototype) */
:root{--red:#c61f1f;--red-dark:#a71919;--ink:#17191e;--muted:#17191e;--paper:#fff;--soft:#f7f7f6;--line:#e7e5e4;--panel:#efeeec;--dark:#02193a;--width:1160px;--radius:5px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,'Helvetica Neue',Arial,sans-serif;line-height:1.58;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid #222;outline-offset:4px}
img,svg{display:block}
.wrap{max-width:var(--width);padding:0 32px;margin:auto}
.eyebrow{display:block;color:var(--red);font-size:11px;letter-spacing:.19em;text-transform:uppercase;font-weight:800}
.section{padding:92px 0}
.section.soft{background:var(--soft)}
.section-head{margin-bottom:38px}
.section-head h2{font-size:clamp(32px,3.8vw,44px);line-height:1.1;letter-spacing:-.045em;margin:12px 0 14px}
.section-head p{margin:0;color:var(--muted);font-size:14px;max-width:700px}

/* Buttons and links */
.btn{display:inline-block;padding:14px 22px;background:var(--red);color:#fff;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--red)}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-outline{display:inline-block;padding:11px 17px;background:#fff;color:var(--red);text-decoration:none;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border:1px solid #e3a3a3}
.btn-outline:hover{border-color:var(--red);background:var(--red);color:#fff}
.more{color:var(--red);text-decoration:none;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.more:hover{color:var(--red-dark);text-decoration:underline;text-underline-offset:3px}

/* Hero carousel (three banners) */
/* Hero carousel */
.hero{background:linear-gradient(180deg,var(--soft) 0%,var(--soft) 55%,#fff 100%);position:relative;overflow:hidden}
.slides{display:grid}
.slide{grid-area:1/1;position:relative;opacity:0;visibility:hidden;transition:opacity 1.4s ease,visibility 0s linear 1.4s}
.slide.is-active{opacity:1;visibility:visible;transition:opacity 1.4s ease,visibility 0s}

:root{--fade-x:linear-gradient(to right,rgba(0,0,0,0.000) 0.0%,rgba(0,0,0,0.000) 1.4%,rgba(0,0,0,0.000) 2.8%,rgba(0,0,0,0.000) 4.2%,rgba(0,0,0,0.001) 5.7%,rgba(0,0,0,0.002) 7.1%,rgba(0,0,0,0.003) 8.5%,rgba(0,0,0,0.005) 9.9%,rgba(0,0,0,0.009) 11.3%,rgba(0,0,0,0.014) 12.8%,rgba(0,0,0,0.020) 14.2%,rgba(0,0,0,0.030) 15.6%,rgba(0,0,0,0.042) 17.0%,rgba(0,0,0,0.057) 18.4%,rgba(0,0,0,0.076) 19.8%,rgba(0,0,0,0.100) 21.2%,rgba(0,0,0,0.128) 22.7%,rgba(0,0,0,0.160) 24.1%,rgba(0,0,0,0.198) 25.5%,rgba(0,0,0,0.240) 26.9%,rgba(0,0,0,0.286) 28.3%,rgba(0,0,0,0.336) 29.8%,rgba(0,0,0,0.389) 31.2%,rgba(0,0,0,0.444) 32.6%,rgba(0,0,0,0.500) 34.0%,rgba(0,0,0,0.556) 35.4%,rgba(0,0,0,0.611) 36.8%,rgba(0,0,0,0.664) 38.2%,rgba(0,0,0,0.714) 39.7%,rgba(0,0,0,0.760) 41.1%,rgba(0,0,0,0.802) 42.5%,rgba(0,0,0,0.840) 43.9%,rgba(0,0,0,0.872) 45.3%,rgba(0,0,0,0.900) 46.8%,rgba(0,0,0,0.924) 48.2%,rgba(0,0,0,0.943) 49.6%,rgba(0,0,0,0.958) 51.0%,rgba(0,0,0,0.970) 52.4%,rgba(0,0,0,0.980) 53.8%,rgba(0,0,0,0.986) 55.2%,rgba(0,0,0,0.991) 56.7%,rgba(0,0,0,0.995) 58.1%,rgba(0,0,0,0.997) 59.5%,rgba(0,0,0,0.998) 60.9%,rgba(0,0,0,0.999) 62.3%,rgba(0,0,0,1.000) 63.8%,rgba(0,0,0,1.000) 65.2%,rgba(0,0,0,1.000) 66.6%,rgba(0,0,0,1.000) 68.0%);--fade-m:linear-gradient(to bottom,rgba(0,0,0,0.000) 0.0%,rgba(0,0,0,0.001) 0.8%,rgba(0,0,0,0.005) 1.7%,rgba(0,0,0,0.016) 2.5%,rgba(0,0,0,0.035) 3.3%,rgba(0,0,0,0.065) 4.2%,rgba(0,0,0,0.104) 5.0%,rgba(0,0,0,0.152) 5.8%,rgba(0,0,0,0.210) 6.7%,rgba(0,0,0,0.275) 7.5%,rgba(0,0,0,0.347) 8.3%,rgba(0,0,0,0.422) 9.2%,rgba(0,0,0,0.500) 10.0%,rgba(0,0,0,0.578) 10.8%,rgba(0,0,0,0.653) 11.7%,rgba(0,0,0,0.725) 12.5%,rgba(0,0,0,0.790) 13.3%,rgba(0,0,0,0.848) 14.2%,rgba(0,0,0,0.896) 15.0%,rgba(0,0,0,0.935) 15.8%,rgba(0,0,0,0.965) 16.7%,rgba(0,0,0,0.984) 17.5%,rgba(0,0,0,0.995) 18.3%,rgba(0,0,0,0.999) 19.2%,rgba(0,0,0,1.000) 20.0%);--fade-sharp:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.000) 30.0%,rgba(0,0,0,0.000) 31.6%,rgba(0,0,0,0.000) 33.1%,rgba(0,0,0,0.001) 34.7%,rgba(0,0,0,0.003) 36.2%,rgba(0,0,0,0.007) 37.8%,rgba(0,0,0,0.014) 39.4%,rgba(0,0,0,0.025) 40.9%,rgba(0,0,0,0.042) 42.5%,rgba(0,0,0,0.066) 44.1%,rgba(0,0,0,0.100) 45.6%,rgba(0,0,0,0.143) 47.2%,rgba(0,0,0,0.198) 48.8%,rgba(0,0,0,0.263) 50.3%,rgba(0,0,0,0.336) 51.9%,rgba(0,0,0,0.416) 53.4%,rgba(0,0,0,0.500) 55.0%,rgba(0,0,0,0.584) 56.6%,rgba(0,0,0,0.664) 58.1%,rgba(0,0,0,0.737) 59.7%,rgba(0,0,0,0.802) 61.2%,rgba(0,0,0,0.857) 62.8%,rgba(0,0,0,0.900) 64.4%,rgba(0,0,0,0.934) 65.9%,rgba(0,0,0,0.958) 67.5%,rgba(0,0,0,0.975) 69.1%,rgba(0,0,0,0.986) 70.6%,rgba(0,0,0,0.993) 72.2%,rgba(0,0,0,0.997) 73.8%,rgba(0,0,0,0.999) 75.3%,rgba(0,0,0,1.000) 76.9%,rgba(0,0,0,1.000) 78.4%,rgba(0,0,0,1.000) 80.0%)}
/* banner photos: full height and natural colour, with one very gentle fade only along the left edge, where the
   text is (as in the original prototype). On phones the photo sits under the text and fades only at its top. */
.photo{position:absolute;top:0;right:0;bottom:0;width:70%;background:transparent;-webkit-mask-image:var(--fade-x);mask-image:var(--fade-x)}
.photo img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);transition:transform 9s ease-out}
.slide.is-active .photo img{transform:scale(1)}

.hero-inner{position:relative;z-index:1;padding-top:108px;padding-bottom:128px;min-height:620px;display:flex;flex-direction:column;justify-content:center}
.hero-text{max-width:540px}
.hero-text > *{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.slide.is-active .hero-text > *{opacity:1;transform:none}
.slide.is-active .hero-text > *:nth-child(2){transition-delay:.12s}
.slide.is-active .hero-text > *:nth-child(3){transition-delay:.24s}
.slide.is-active .hero-text > *:nth-child(4){transition-delay:.36s}
.hero .eyebrow{margin-bottom:23px}
.hero .hl{font-weight:850;letter-spacing:-.06em;line-height:1.02;font-size:clamp(45px,6.4vw,82px);margin:0 0 26px;text-transform:uppercase}
.hero .hl span{color:var(--red)}
.hero p{max-width:470px;color:var(--muted);font-size:17px;line-height:1.75;margin:0 0 32px}
.btn{display:inline-block;padding:14px 22px;background:var(--red);color:#fff;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.btn:hover{background:var(--red-dark)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(max-width:650px){
  .slide{display:flex;flex-direction:column}
  .hero-inner{min-height:430px;padding-top:56px;padding-bottom:28px;justify-content:flex-start;width:100%}
  .hero p{font-size:16px}
  .photo{position:relative;order:2;width:100%;height:240px;
    -webkit-mask-image:var(--fade-m);mask-image:var(--fade-m)}
}
.slide-long .hero-text{max-width:600px}.slide-long .hl{font-size:clamp(34px,4.1vw,56px)!important}@media(min-width:651px){.slide-long .photo{width:60%}}

/* About */
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:start}
.about h2{font-size:clamp(34px,3.6vw,41px);line-height:1.15;letter-spacing:-.045em;margin:12px 0 28px}
.about p{font-size:16px;color:var(--ink);margin:0 0 15px}

/* Strategy house: roof with logo, attic (purpose, vision, mission), four pillars, how-we-work journey, focus areas, enablers, values foundation */
.sh{--sh-pad:0px;padding:0 var(--sh-pad)}
@media(min-width:1180px){.sh{--sh-pad:31px;width:min(1440px,calc(100vw - 64px));position:relative;left:50%;transform:translateX(-50%)}}
.sh-roof{background:var(--dark);clip-path:polygon(0 100%,0 46%,50% 0,100% 46%,100% 100%);height:clamp(150px,13vw,190px);display:flex;align-items:flex-end;justify-content:center;padding-bottom:clamp(18px,2vw,28px)}
.sh-roof img{height:clamp(64px,6.4vw,90px);width:auto}
.sh-eave{height:6px;background:var(--red);border-radius:3px}
.sh-body{margin:0;background:#fff;border:1px solid var(--line);border-top:0;border-bottom:0;padding:clamp(22px,3vw,40px) clamp(16px,2.6vw,40px) clamp(26px,3vw,40px)}
.sh-k{display:block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.sh-attic .sh-k{font-size:clamp(15px,1.35vw,19px);font-weight:900;letter-spacing:.12em;margin-bottom:12px}
.sh-attic{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:clamp(18px,3vw,44px);align-items:center;text-align:center}
.sh-pm p{margin:0;font-size:15px;line-height:1.65;color:var(--ink)}
main .sh-attic .sh-pm p{text-align:justify;text-align-last:center;-webkit-hyphens:none;hyphens:none}
/* house.js sets each line of Purpose and Mission as its own justified line (even line breaks, no wide gaps) */
.sh-pm .jl{display:block;text-align:justify;text-align-last:justify}
.sh-pm .jl:last-child{text-align-last:center}
.sh-vision{padding:clamp(18px,2.2vw,28px) clamp(14px,2vw,26px);border-top:2px solid var(--red);border-bottom:2px solid var(--red)}
.sh-vision p{margin:0;font-size:clamp(19px,1.8vw,25px);line-height:1.3;font-weight:800;letter-spacing:-.02em;color:var(--dark);text-wrap:balance}
.sh-label{display:flex;align-items:center;gap:18px;margin:clamp(32px,3.4vw,46px) 0 20px;font-size:clamp(16px,1.5vw,21px);font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#000}
.sh-label::before,.sh-label::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,transparent,#17191e 85%)}
.sh-label::after{background:linear-gradient(270deg,transparent,#17191e 85%)}
.sh ul,.sh ol{list-style:none;margin:0;padding:0}
.sh-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,26px)}
.sh-pillar{display:flex;flex-direction:column}
.sh-cap{background:var(--dark);color:#fff;text-align:center;padding:18px 14px 16px;border-radius:var(--radius) var(--radius) 0 0;display:flex;flex-direction:column;align-items:center;gap:10px}
.sh-cap h3{margin:0;color:#fff;font-size:14px;line-height:1.3;font-weight:750;text-wrap:balance;min-height:2.6em;display:flex;align-items:center;justify-content:center}
.sh-icon{width:42px;height:42px;border-radius:50%;background:var(--red);display:grid;place-items:center}
.sh-icon svg{width:22px;height:22px}
.sh-shaft{flex:1;margin:0 9px;padding:18px 16px 22px;text-align:center;border:1px solid var(--line);border-top:0;
  background:repeating-linear-gradient(90deg,#f7f6f4 0 16px,#f1f0ee 16px 17px)}
.sh-shaft p{margin:0;font-size:13px;line-height:1.6;color:var(--ink)}
.sh-shaft .q{font-weight:700;color:var(--dark);margin-bottom:10px;font-size:13.5px}
.sh-pillar::after{content:"";display:block;height:8px;background:var(--dark);border-radius:0 0 var(--radius) var(--radius)}
.sh-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.sh-step{--tip:22px;background:var(--dark);color:#fff;text-align:center;padding:16px calc(var(--tip) + 10px);display:flex;flex-direction:column;justify-content:center;
  clip-path:polygon(0 0,calc(100% - var(--tip)) 0,100% 50%,calc(100% - var(--tip)) 100%,0 100%,var(--tip) 50%)}
.sh-step:first-child{clip-path:polygon(0 0,calc(100% - var(--tip)) 0,100% 50%,calc(100% - var(--tip)) 100%,0 100%);border-radius:var(--radius) 0 0 var(--radius)}
.sh-step strong{font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.sh-step span{font-size:11.5px;color:#e4e6ea;margin-top:3px;line-height:1.4}
.sh-step.impact{background:var(--red)}
.sh-step.impact span{color:#ffe1e1}
.sh-focuses{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,22px)}
.sh-focus{--fc:var(--red);--fs:#fff7f7;border:1px solid var(--line);border-top:4px solid var(--fc);border-radius:var(--radius);background:linear-gradient(180deg,var(--fs),#fff 70%);padding:16px 18px 18px}
.sh-focus.f-met{--fc:#0067f0;--fs:#eef5ff}.sh-focus.f-onc{--fc:#be2bbb;--fs:#fbf0fb}.sh-focus.f-imm{--fc:#ed7609;--fs:#fff4ea}
.sh-focus h3{margin:0 0 10px;font-size:16px;color:var(--fc);display:flex;align-items:center;gap:8px}
.sh-focus h3::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--fc);flex:none}
.sh-focus ul{padding-left:18px;list-style:disc;font-size:13px;color:var(--ink)}
.sh-focus li{margin-bottom:4px}
.sh-enablers{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.sh-enablers li{background:var(--panel);border-radius:var(--radius);font-size:13.5px;text-align:center;padding:13px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.4;font-weight:700;color:var(--dark)}
.sh-base{background:var(--dark);border-top:4px solid var(--red);border-radius:0 0 var(--radius) var(--radius);padding:clamp(22px,2.4vw,32px) clamp(16px,3vw,40px);display:flex;align-items:center;justify-content:center;gap:12px 28px;flex-wrap:wrap}
.sh-base .sh-k{color:#ff9d9d;margin:0;font-size:clamp(17px,1.6vw,22px);font-weight:900;letter-spacing:.14em}
.sh-base ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0}
.sh-base li{color:#fff;font-size:clamp(16px,1.55vw,21px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center}
.sh-base li+li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);margin:0 18px}
@media(max-width:870px){
  .sh-attic{grid-template-columns:1fr;text-align:left;gap:20px}
  .sh-vision{order:-1}
  .sh-pillars,.sh-steps{grid-template-columns:1fr 1fr}
  .sh-step,.sh-step:first-child{clip-path:none;border-radius:var(--radius);padding:14px 12px}
  .sh-focuses{grid-template-columns:1fr}
  .sh-enablers{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .sh-pillars,.sh-steps,.sh-enablers{grid-template-columns:1fr}
  .sh-body{margin:0}
  .sh-base{flex-direction:column}
  .sh-base li+li::before{margin:0 10px}
}

.loop-note{text-align:center;margin-top:8px}
/* Values loop diagram */
.loop{margin:56px 0 18px;padding:0 0 54px;border-bottom:1px solid var(--line)}
.loop-stage{position:relative;width:min(760px,100%);aspect-ratio:1;margin:0 auto;container-type:inline-size}
.vlines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vlines .orbit{fill:none;stroke:#c4c0bd;stroke-width:.3;stroke-dasharray:.9 .9}
.vlines .core{fill:var(--soft);stroke:var(--line);stroke-width:.25}
.vlines .spokes line{stroke:#d9d5d3;stroke-width:.22}
.vlines .sdot{fill:var(--red)}
.vcore{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30%;text-align:center;display:flex;flex-direction:column;align-items:center}
.vlogo{width:92%;height:auto;display:block}.vsym{width:7.4cqw;height:7.4cqw;margin-bottom:1.4cqw}
.vword{font-size:5.4cqw;font-weight:900;letter-spacing:-.06em;line-height:1}
.vword em{font-style:normal;color:var(--red)}
.vfull{font-size:1.25cqw;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.vcore .vrule{margin:1.5cqw auto 1.3cqw}
.vlist{list-style:none;margin:0;padding:0}
.vnode{position:absolute;width:26%;aspect-ratio:1;border-radius:50%;background:#fff;border:1.5px solid var(--red);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 2.6cqw}
.vicon{width:5.6cqw;height:5.6cqw;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;margin:1.2cqw 0 1.1cqw;flex:none}
.vicon svg{width:58%;height:58%}
.vname{font-size:2.05cqw;font-weight:850;letter-spacing:.04em;text-transform:uppercase;line-height:1.1}
.vrule{display:block;width:3.4cqw;height:2px;background:var(--red);margin:.9cqw auto .8cqw}
.vlabel{font-size:1.28cqw;font-weight:700;letter-spacing:.06em;color:var(--ink);line-height:1.3}
.vline{font-size:1.6cqw;line-height:1.38;color:var(--ink);margin-top:.6cqw;font-weight:500}
.loop-note{text-align:center;color:var(--ink);font-size:15px;margin:26px auto 0;max-width:560px;line-height:1.6}
@media(max-width:700px){
  .loop{margin:36px 0 10px;padding-bottom:36px}
  .loop-stage{aspect-ratio:auto;width:100%;container-type:normal}
  .vlines{display:none}
  .vcore{position:static;transform:none;width:auto;flex-direction:row;gap:10px;justify-content:flex-start;margin-bottom:18px;text-align:left}
  .vsym{width:30px;height:30px;margin:0}.vword{font-size:22px}.vfull{display:none}.vcore .vrule{display:none}
  .vlist{position:relative;padding-left:2px}
  .vnode{position:relative;left:auto!important;top:auto!important;width:auto;aspect-ratio:auto;border-radius:0;border:0;border-left:1px solid #e6b5b5;display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start;justify-content:stretch;text-align:left;padding:0 0 20px 0;margin-left:23px}
  .vnode:last-child{border-left-color:transparent;padding-bottom:0}
  .vicon{width:42px;height:42px;margin:0 0 0 -22px;grid-row:1/span 4}
  .vname{font-size:17px;padding-top:2px}
  .vrule{display:none}
  .vlabel{font-size:11px;margin-top:2px}
  .vline{font-size:14px;margin-top:3px}
  .loop-note{text-align:left;margin-top:20px}
}

.values-home{border-bottom:1px solid var(--line)}.values-home .loop{margin:6px 0 0;border-bottom:0;padding-bottom:10px}.vh-foot{text-align:center;margin-top:26px}
/* People cards */
.founders{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.founders.one{grid-template-columns:1fr!important;max-width:760px}
.person{display:grid;grid-template-columns:27% 1fr;border:1px solid var(--line);background:#fff;min-height:190px}
.ph{background:linear-gradient(160deg,#ececeb,#f6f6f5);display:grid;place-items:center}
.ph svg{width:44px;height:44px;stroke:#9a9ea4;fill:none;stroke-width:1.2}
.ph:has(img){position:relative;overflow:hidden}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.person-body{padding:22px 22px 20px}
.role{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.person h3{font-size:18px;margin:6px 0 12px;letter-spacing:-.02em}
.person p{font-size:12.5px;color:var(--muted);margin:0 0 16px}
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.member{border:1px solid var(--line);background:var(--soft)}
.member .ph{aspect-ratio:1.25}
.member-body{padding:14px 12px 16px}
.member h3{font-size:13px;margin:0 0 4px}
.member p{font-size:10.5px;color:var(--muted);margin:0 0 14px}

/* Streams */
.streams{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stream{--sc:var(--red);background:#fff;border:1px solid var(--line);padding:0 0 24px;display:flex;flex-direction:column}
.s-met{--sc:#0067f0}.s-onc{--sc:#be2bbb}.s-imm{--sc:#ed7609}
.stream-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--soft);margin-bottom:22px}
.stream-media .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stream-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(2,25,58,0) 55%,rgba(2,25,58,.28) 100%)}
.stream-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--sc)}
.stream h3,.stream p,.stream .more{margin-left:22px;margin-right:22px}
.stream h3{font-size:17px;margin-top:0;margin-bottom:10px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.stream h3::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sc);flex:none}
.stream p{font-size:12.5px;color:var(--muted);margin-top:0;margin-bottom:26px;flex:1}
.stream .more{color:var(--sc)}

/* Events */
.events{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.event{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.event-media{position:relative;aspect-ratio:4/3;background:#fff;overflow:hidden;border-bottom:1px solid var(--line)}
.event-media img{width:100%;height:100%;object-fit:cover}
.slot{position:absolute;inset:14px;border:1.5px dashed #d3cfcd;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#8a8f95;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--soft)}
.slot svg{width:40px;height:40px;fill:none;stroke:#a7abb0;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.event-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.event-tag{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.event h3{font-size:16px;margin:7px 0 6px;letter-spacing:-.02em}
.event-meta{font-size:12px;color:var(--muted);margin:0 0 18px;flex:1}
.event-links{display:flex;justify-content:space-between;align-items:center;gap:12px}
.file{font-size:11px;color:var(--ink);text-decoration:none;border-bottom:1px solid #cfcac8}
.file:hover{color:var(--red);border-color:var(--red)}
.events-foot{margin-top:28px}
/* News */
.news{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:end}
.news h2{font-size:clamp(32px,3.8vw,44px);letter-spacing:-.045em;line-height:1.1;margin:12px 0 0}
.news p{font-size:15px;color:var(--ink);margin:0 0 22px;max-width:560px}

/* Partner band */
.partner{background:var(--red);color:#fff;text-align:center;padding:70px 20px 74px}
.partner .eyebrow{color:#ffd9d9;font-size:10px}
.partner h2{font-size:clamp(38px,5.2vw,62px);letter-spacing:-.05em;line-height:1.05;margin:14px 0 18px}
.partner p{max-width:640px;margin:0 auto 26px;font-size:14px;color:#ffe9e9}
.btn-white{display:inline-block;padding:13px 20px;background:#fff;color:var(--red);text-decoration:none;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.btn-white:hover{background:#02193a;color:#fff}

/* Responsive */
@media(max-width:1020px){
  .board{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:870px){
  .about-grid{grid-template-columns:1fr;gap:20px}
  .founders,.streams,.events{grid-template-columns:1fr 1fr}
  .news{grid-template-columns:1fr;gap:18px}
}
@media(max-width:650px){
  .wrap{padding:0 22px}
  .section{padding:64px 0}
  .founders,.streams,.events{grid-template-columns:1fr}
  .board{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:root{--dark:#02193a}
h1,h2,h3,h4,h5,h6,.lede,.bigquote,.linkcard strong,.profilecaption,.vname,.g-name,.seat-t,.section-title,.ls-head h2,.groups-bar span{color:#02193a}
.summary h2,.summary h3,.partner h2,.closing h2{color:#fff}

/* Site header (from the prototype's master navigation) */
.master{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line)}
.mwrap{max-width:var(--width);margin:auto;padding:0 32px}
.mrow{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.mark{display:flex;align-items:center;text-decoration:none;color:inherit;flex:none}
.mlogo{display:block;height:78px;width:auto}
/* tagline beside the logo, after a fine vertical rule; stream pages use their stream colour */
.mtag{display:block;margin-left:18px;padding:4px 0 4px 11px;border-left:1.5px solid #cfcbc8;color:var(--ac,var(--red));font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;line-height:1.5;white-space:nowrap}
.mtabs{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.mtabs::-webkit-scrollbar{display:none}
.mt{flex:none;text-decoration:none;color:var(--ink);font-size:13px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;padding:10px 12px;border-bottom:2px solid transparent}
.mt:hover{color:var(--red)}
.mt.on{color:var(--red);border-bottom-color:var(--red)}
.mt.cta{background:var(--red);color:#fff;padding:12px 18px;margin-left:8px;border-bottom:0}
.mt.cta:hover{background:var(--red-dark);color:#fff}
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:10px 14px;z-index:50;font-size:13px;font-weight:700}
.skip:focus{left:12px;top:12px}
/* Wide screens: menu ends where the strategy house's roof line ends; logo stays in line with the page text */
@media(min-width:1180px){
  .master .mwrap{max-width:min(1440px,calc(100vw - 64px));padding:0 31px}
  .master .mark{margin-left:calc((min(1440px,100vw - 64px) - 1160px)/2 + 1px)}
}
@media(max-width:1023px){.mrow{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 0 4px;min-height:0}.mtabs{width:100%}.mt.cta{margin-left:4px}}
/* mid-size screens: tagline wraps onto two lines and the menu tightens so everything fits on one row */
@media(min-width:1024px) and (max-width:1279px){.mtag{white-space:normal;width:7.4em;margin-left:14px;padding-left:9px}.mlogo{height:68px}.mt{padding:10px 9px;font-size:12.5px}.mt.cta{padding:12px 14px;margin-left:4px}}
@media(max-width:520px){.mwrap{padding:0 16px}.mlogo{height:58px}.mtag{margin-left:12px;padding-left:8px;font-size:9px;letter-spacing:.16em}.mt{font-size:11.5px;padding:9px 9px}}

/* Footer */
.mf{background:#02193a;color:#cdd0d5;font-family:Inter,'Helvetica Neue',Arial,sans-serif;padding:52px 0 26px;margin-top:0}
.mf-wrap{max-width:1160px;margin:auto;padding:0 32px}
.mf-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px}
.mf-logo{display:block;height:74px;width:auto}
.mf-brand p{font-size:12.5px;line-height:1.7;margin:10px 0 0;color:#a9adb3;max-width:260px}
.mf-brand .tg{font-size:10.5px;font-weight:800;letter-spacing:.18em;color:#f08484;margin-top:12px}
.mf h4,.mf .mf-h{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 12px}
.mf ul{list-style:none;margin:0;padding:0}.mf li{margin:0 0 7px}
.mf a{color:#cdd0d5;text-decoration:none;font-size:13px}.mf a:hover{color:#fff;text-decoration:underline}
.mf-bottom a{font-size:inherit;margin-left:8px}
.mf-bottom{border-top:1px solid #1d3a63;margin-top:34px;padding-top:16px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11.5px;color:#8a8f95}
@media(max-width:860px){.mf-grid{grid-template-columns:1fr 1fr}.mf-brand{grid-column:1/-1}}
@media(max-width:520px){.mf-wrap{padding:0 22px}}

/* Rounded corners on buttons and boxes (change --radius at the top to adjust) */
.btn,.btn-outline,.btn-white,.mt.cta,.skip,
.person,.member,.stream,.event,.slot{border-radius:var(--radius)}
.person,.member,.stream,.event{overflow:hidden}

/* ===================== Motion ===================== */
/* Reveal states only apply when motion-init.js has added .motion (never for reduced-motion visitors) */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.7,0,.2,1)}

/* Hover details */
.btn,.mt.cta{background-image:linear-gradient(var(--red-dark),var(--red-dark));background-repeat:no-repeat;background-size:0% 100%;transition:background-size .45s var(--ease-out),color .3s}
.btn:hover,.mt.cta:hover{background-color:var(--red);background-size:100% 100%}
.btn-outline{background-image:linear-gradient(var(--red),var(--red));background-repeat:no-repeat;background-size:0% 100%;transition:background-size .45s var(--ease-out),color .3s,border-color .3s}
.btn-outline:hover{background-color:var(--red);background-image:linear-gradient(var(--red),var(--red));background-size:100% 100%;color:#fff}
.btn-white{background-image:linear-gradient(var(--dark),var(--dark));background-repeat:no-repeat;background-size:0% 100%;transition:background-size .45s var(--ease-out),color .3s}
.btn-white:hover{background-color:var(--dark);background-image:linear-gradient(var(--dark),var(--dark));background-size:100% 100%;color:#fff}
.more .arr{display:inline-block;transition:translate .35s var(--ease-out)}
.more:hover .arr{translate:5px 0}
.person,.member,.stream,.event{transition:translate .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.person:hover,.member:hover,.stream:hover,.event:hover{translate:0 -6px;box-shadow:0 22px 40px -24px rgba(2,25,58,.35)}
.stream-media .art{transition:scale 1.2s var(--ease-out)}
.stream:hover .stream-media .art{scale:1.06}
.sh-pillar{transition:translate .45s var(--ease-out)}
.sh-pillar:hover{translate:0 -6px}
.sh-icon{transition:scale .4s var(--ease-out)}
.sh-pillar:hover .sh-icon{scale:1.12}
.sh-focus,.sh-enablers li{transition:translate .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.sh-focus:hover,.sh-enablers li:hover{translate:0 -4px;box-shadow:0 16px 30px -22px rgba(2,25,58,.4)}
.mf a{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .35s var(--ease-out),color .3s}
.mf a:hover{text-decoration:none;background-size:100% 1px}

/* Header: shrinks after scrolling, red reading-progress line */
.mrow,.mlogo{transition:min-height .4s var(--ease-out),height .4s var(--ease-out)}
.master{transition:box-shadow .4s}
.master.scrolled{box-shadow:0 10px 30px -22px rgba(2,25,58,.35)}
@media(min-width:901px){.master.scrolled .mrow{min-height:74px}.master.scrolled .mlogo{height:60px}}
.readbar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* Partner band: soft light that follows the pointer */
.partner{position:relative;overflow:hidden;background-image:radial-gradient(circle at var(--mx,50%) var(--my,40%),rgba(255,255,255,.16),rgba(255,255,255,0) 42%)}

/* Generic reveal */
.motion [data-r]{transition:opacity .9s ease,transform 1.1s var(--ease-out),filter .9s ease,clip-path 1.1s var(--ease-io);transition-delay:calc(var(--i,0) * 110ms)}
.motion [data-r="up"]:not(.in){opacity:0;transform:translateY(30px);filter:blur(6px)}
.motion [data-r="left"]:not(.in){opacity:0;transform:translateX(-40px)}
.motion [data-r="pop"]:not(.in){opacity:0;transform:scale(.85)}
.motion [data-r="line"]:not(.in){opacity:0}
.motion [data-r="line"]::before,.motion [data-r="line"]::after{transform:scaleX(0);transition:transform 1.2s var(--ease-out) .1s}
.motion [data-r="line"]::before{transform-origin:100% 50%}
.motion [data-r="line"]::after{transform-origin:0 50%}
.motion [data-r="line"].in::before,.motion [data-r="line"].in::after{transform:none}

/* Headings rise word by word */
.motion [data-r="words"]{transition:none}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block}
.motion [data-r="words"] .w>span{transform:translateY(110%);transition:transform 1.1s var(--ease-out);transition-delay:calc(var(--wi) * 55ms)}
.motion [data-r="words"].in .w>span{transform:none}

/* Hero: headline lines rise, photo sweeps in from the right */
.hero .hl .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero .hl .ln>span{display:block}
.hero .hl .ln,.hero .hl .ln>span{color:inherit}
.motion .hero .hero-text>.hl{opacity:1;transform:none}
.motion .hero .ln>span{transform:translateY(105%);transition:transform 0s linear 1s}
.motion .hero .slide.is-active .ln>span{transform:none;transition:transform 1.1s var(--ease-out) calc(.15s + var(--li) * 110ms)}
.motion .hero .photo{opacity:0;filter:blur(18px);transition:opacity 0s linear 1.4s,filter 0s linear 1.4s}
.motion .hero .slide.is-active .photo{opacity:1;filter:none;transition:opacity 1.6s ease,filter 1.8s var(--ease-out)}
@media(min-width:651px){.motion .hero .photo{translate:0 var(--py,0px)}}

/* Strategy house builds itself */
.motion [data-r="roof"]:not(.in){opacity:0;transform:translateY(-36px)}
.motion [data-r="roof"] img{transition:opacity .8s ease .55s,transform 1s var(--ease-out) .55s}
.motion [data-r="roof"]:not(.in) img{opacity:0;transform:scale(.8)}
.motion [data-r="eave"]{transition:transform 1.2s var(--ease-io) .35s}
.motion [data-r="eave"]:not(.in){transform:scaleX(0)}
.motion [data-r="rise"]{clip-path:inset(-30px -30px 0 -30px);transition:transform 1.2s var(--ease-out),clip-path 1.2s var(--ease-io),translate .45s var(--ease-out);transition-delay:calc(var(--i) * 140ms),calc(var(--i) * 140ms),0s}
.motion [data-r="rise"]:not(.in){transform:translateY(70px);clip-path:inset(100% -30px 0 -30px)}
.motion [data-r="rise"] .sh-icon{transition:transform .7s cubic-bezier(.34,1.56,.64,1),scale .4s var(--ease-out);transition-delay:calc(.75s + var(--i) * 140ms),0s}
.motion [data-r="rise"]:not(.in) .sh-icon{transform:scale(0) rotate(-120deg)}
.motion .sh-step[data-r="left"]{transition-delay:calc(var(--i) * 160ms)}
.sh-step{position:relative;overflow:hidden}
.sh-step::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.motion .sh-steps.in .sh-step::after{animation:sheen 1.1s var(--ease-io) forwards;animation-delay:calc(1s + var(--i) * 220ms)}
.sh-steps:hover .sh-step::after{animation:sheen 1.1s var(--ease-io);animation-delay:calc(var(--i) * 140ms)}
@keyframes sheen{to{transform:translateX(120%)}}
.motion [data-r="base"]:not(.in){opacity:0;transform:translateY(24px)}
.motion [data-r="base"] li{transition:opacity .6s ease,transform .8s var(--ease-out);transition-delay:calc(.35s + var(--i) * 90ms)}
.motion [data-r="base"]:not(.in) li{opacity:0;transform:translateY(10px)}


/* Values: heartbeat intro (values.js), then the finished diagram with a travelling red dot */
.vnode{transition:translate .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.vnode:hover{translate:0 -5px;box-shadow:0 18px 36px -18px rgba(198,31,31,.45)}
.loop{position:relative}
.loop-canvas{position:absolute;pointer-events:none;transition:opacity 1s ease}
.loop-canvas.fade{opacity:0}
.motion .loop .vlines,.motion .loop .vcore{transition:opacity 1.1s ease}
.motion .loop.intro .vlines,.motion .loop.intro .vcore{opacity:0}
.motion .loop.intro .vnode{transform-origin:50% 50%;will-change:transform;transition:opacity .9s ease,box-shadow .5s ease}
.motion .loop.intro .vnode:not(.on){opacity:0}
.loop.intro .vnode.lit{box-shadow:0 0 0 8px rgba(198,31,31,.08),0 18px 36px -18px rgba(198,31,31,.5)}
.motion .loop.formed .vlines .orbit{transform-box:view-box;transform-origin:50px 50px;animation:orbit 90s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
.runner{display:none}
.motion .loop.formed .runner{display:inline;animation:runnerIn 1s ease 1.6s both}
@keyframes runnerIn{from{opacity:0}to{opacity:1}}
.runner-dot{fill:var(--red)}
.runner-halo{fill:rgba(198,31,31,.18);animation:halo 2.4s ease-in-out infinite}
@keyframes halo{50%{r:3.4px;fill:rgba(198,31,31,.06)}}


/* Opening logo animation (intro.js): ribbons flow in and form the circle, letters rise, tagline appears */
.intro-screen{display:none}
.intro-on .intro-screen{display:flex;position:fixed;inset:0;z-index:200;background:#fff;align-items:center;justify-content:center;transition:transform .9s var(--ease-io)}
html.intro-on,html.intro-on body{overflow:hidden}
.intro-mark{width:min(380px,72vw);display:flex;flex-direction:column;align-items:center;transition:transform .6s var(--ease-io),opacity .45s ease}
.intro-logo{display:block;width:100%;height:auto;overflow:visible}
.intro-logo .sp{transform-box:view-box;transform-origin:150px 160px;animation:introFlow 1.6s var(--ease-out) both;animation-delay:calc(.15s + var(--s) * 110ms)}
.intro-logo .sp:nth-child(odd){--from:rotate(-150deg) scale(1.35) translate(-30px,20px)}
.intro-logo .sp:nth-child(even){--from:rotate(-95deg) scale(.7) translate(25px,-15px)}
@keyframes introFlow{from{transform:var(--from);opacity:0}35%{opacity:1}to{transform:none;opacity:1}}
.intro-logo .ch{animation:introRise 1s var(--ease-out) both;animation-delay:calc(1s + var(--c) * 110ms)}
@keyframes introRise{from{opacity:0;transform:translateY(24px)}}
.intro-logo .sub{animation:introUp .9s ease both;animation-delay:1.85s}
@keyframes introUp{from{opacity:0;transform:translateY(8px)}}
.intro-tag{display:flex;align-items:center;gap:14px;margin-top:18px;color:var(--red);font-size:12px;font-weight:800;letter-spacing:.32em;text-transform:uppercase;white-space:nowrap}
.intro-tag span{animation:introTag 1s ease both;animation-delay:2.4s;padding-left:.32em}
.intro-tag::before,.intro-tag::after{content:"";width:42px;height:1.5px;background:var(--red);animation:introLine 1s var(--ease-out) both;animation-delay:2.3s}
.intro-tag::before{transform-origin:100% 50%}.intro-tag::after{transform-origin:0 50%}
@keyframes introTag{from{opacity:0;letter-spacing:.6em}}
@keyframes introLine{from{transform:scaleX(0)}}
.intro-screen.lift{transform:translateY(-100%)}
.intro-screen.lift .intro-mark{transform:translateY(-30px) scale(.94);opacity:0}

/* ===================== Round 2: headings, spotlight house, glowing ball, fact cycle, events carousel ===================== */
/* Headings read as headings everywhere */
h1,h2,h3{font-weight:850}
.section-head h2{font-weight:900}
.section-head p{font-size:16px;color:var(--ink);max-width:720px}

/* Strategy house (house.js): the block under the pointer lifts gently with a soft outline; the rest eases back */
.sh{position:relative}
.sh-hot{cursor:pointer;transition:opacity .4s ease,translate .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.sh.spotting .sh-hot:not(.is-spot){opacity:.78}
.sh-hot.is-spot{position:relative;z-index:3;translate:0 -3px}
.sh-attic>.is-spot,.sh-focus.is-spot,.sh-enablers li.is-spot{box-shadow:0 14px 28px -20px rgba(2,25,58,.45),0 0 0 1.5px var(--fc,var(--red))}
.sh-attic>div{border-radius:var(--radius);padding:10px}
.sh-attic>.sh-vision{padding:clamp(18px,2.2vw,28px) clamp(14px,2vw,26px)}
.sh-pillar.is-spot .sh-cap{box-shadow:0 14px 28px -18px rgba(198,31,31,.5)}
.sh-step.is-spot{filter:drop-shadow(0 8px 12px rgba(198,31,31,.25))}
.sh-tip{display:block;max-height:0;overflow:hidden;opacity:0;font-size:12px;font-weight:500;line-height:1.45;color:var(--ink);transition:max-height .45s var(--ease-out),opacity .35s ease,margin .35s ease}
.sh-enablers li.is-spot{background:#fff}
.sh-enablers li.is-spot .sh-tip{max-height:80px;opacity:1;margin-top:6px}

/* Values: the ball travels along the arrows and glows; the value circle it reaches lights up */
.loop.formed .vnode{transition:translate .45s var(--ease-out),box-shadow .6s ease,background-color .6s ease}
.loop.formed .vnode.lit{background-color:#fff5f5;box-shadow:0 0 0 5px rgba(198,31,31,.12),0 0 30px 2px rgba(198,31,31,.32)}
.loop.formed .vnode .vicon{transition:scale .6s var(--ease-out)}
.loop.formed .vnode.lit .vicon{scale:1.12}
.runner-dot{fill:#ff2b2b}
.runner-halo{fill:rgba(198,31,31,.28);animation:ballHalo 1.6s ease-in-out infinite}
@keyframes ballHalo{50%{r:5.2px;fill:rgba(198,31,31,.08)}}

/* Three streams: photo, then three facts, then back to the photo (streams.js) */
.stream-media .facts{position:absolute;inset:0;z-index:2;pointer-events:none}
.fact{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:22px 24px 26px;color:#fff;
  background:radial-gradient(120% 90% at 85% 0%,color-mix(in srgb,var(--sc) 70%,#fff),var(--sc) 55%,color-mix(in srgb,var(--sc) 60%,#000));
  opacity:0;clip-path:circle(0% at 85% 15%);transition:opacity .6s ease,clip-path 1.1s var(--ease-io)}
.fact.on{opacity:1;clip-path:circle(150% at 85% 15%)}
.fact>*{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .7s var(--ease-out)}
.fact.on>*{opacity:1;transform:none}
.fact.on>:nth-child(2){transition-delay:.25s}.fact.on>:nth-child(3){transition-delay:.38s}.fact.on>:nth-child(4){transition-delay:.5s}
.fact-k{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.fact strong{font-size:clamp(32px,3.4vw,46px);line-height:1;letter-spacing:-.04em;font-weight:900;margin:8px 0;color:#fff}
.fact-cap{font-size:15px;line-height:1.35;font-weight:700;max-width:28ch}
.fact-src{font-size:10.5px;margin-top:12px;font-weight:600}
.stream-media.cyc .art{transition:scale 1.2s var(--ease-out),filter 1.1s ease}
.stream-media.showing-facts .art{scale:1.12;filter:blur(6px)}
.cyc-dots{position:absolute;z-index:3;right:12px;bottom:14px;display:flex;gap:5px}
.cyc-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.55);transition:width .4s var(--ease-out),background .4s}
.cyc-dots i.on{width:18px;background:#fff}
.stream-media.cyc::before{z-index:1}
.stream-media.cyc::after{z-index:3}

/* Upcoming events carousel (carousel.js) */
.ev-carousel{position:relative}
.ev-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 28px) / 3);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 2px 26px;margin:-8px -2px 0;overscroll-behavior-x:contain}
.ev-track::-webkit-scrollbar{display:none}
.ev-track:focus-visible{outline:3px solid #222;outline-offset:4px}
.ev-track .event{scroll-snap-align:start;transition:translate .45s var(--ease-out),box-shadow .45s var(--ease-out),opacity .6s ease,scale .6s var(--ease-out)}
.ev-carousel.gliding .ev-track{scroll-snap-type:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.ev-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:4px}
.ev-btn{appearance:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .3s,color .3s,border-color .3s,scale .3s var(--ease-out)}
.ev-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ev-btn:hover{background:var(--red);border-color:var(--red);color:#fff;scale:1.08}
@media(max-width:870px){.ev-track{grid-auto-columns:calc((100% - 14px) / 2)}}
@media(max-width:650px){.ev-track{grid-auto-columns:86%}}


/* Page-to-page curtain (fx.js) */
/* Page transitions (fx.js), "Two-tone": on white, a red ring draws clockwise from the top and a navy ring
   anticlockwise from the bottom, like the two ribbons in the logo. The page changes the moment both close; on
   the new page they open out at different speeds. html.pt-in shows the same finished picture until fx.js runs,
   so the hand-over between pages is seamless. */
html.pt-in body::after{content:"";position:fixed;inset:0;z-index:300;background:url(../img/logo.svg) center/min(210px,46vw) auto no-repeat,url(../img/pt-rings.svg) center/min(360px,80vw) auto no-repeat,#fff}
.pt{position:fixed;inset:0;z-index:300;pointer-events:none;visibility:hidden}
.pt b{position:absolute;inset:0;background:#fff;opacity:0}
.pt svg{position:absolute;left:50%;top:50%;width:min(360px,80vw);aspect-ratio:1;translate:-50% -50%;overflow:visible}
.pt svg.navy{width:min(310px,69vw)}
.pt circle{fill:none;stroke:var(--red);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transform-box:fill-box;transform-origin:50% 50%;rotate:-90deg}
.pt .navy circle{stroke:var(--dark);scale:-1 1}
.pt i{position:absolute;inset:0;background:url(../img/logo.svg) center/min(210px,46vw) auto no-repeat;opacity:0;scale:.9}
.pt.cover,.pt.leave,.pt.reveal{visibility:visible}
.pt.cover b,.pt.leave b{opacity:1}
.pt.cover circle,.pt.leave circle,.pt.reveal circle{stroke-dashoffset:0}
.pt.cover i,.pt.leave i{opacity:1;scale:1}
.pt.leave b{transition:opacity .45s ease}
.pt.leave circle{transition:stroke-dashoffset 1s var(--ease-io) .12s}
.pt.leave .navy circle{transition-delay:.2s}
.pt.leave i{transition:opacity .5s ease .3s,scale .9s var(--ease-out) .3s}
.pt.reveal svg{scale:5;opacity:0;transition:scale 1.1s var(--ease-io),opacity .8s ease .25s}
.pt.reveal svg.navy{scale:3.6;transition:scale 1s var(--ease-io),opacity .7s ease .2s}
.pt.reveal i{opacity:0;transition:opacity .3s ease}
.pt.reveal b{opacity:0;transition:opacity .8s ease .15s}
.pt.done{visibility:hidden}

/* Pointer light on cards (fx.js) */
.has-glow{position:relative}
.has-glow::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(198,31,31,.10),transparent 65%)}
.has-glow:hover::before{opacity:1}
.stream.has-glow::before{background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),color-mix(in srgb,var(--sc) 16%,transparent),transparent 65%)}
.btn,.btn-white,.btn-outline,.mt.cta{transition:background-size .45s var(--ease-out),color .3s,border-color .3s,translate .35s var(--ease-out)}

/* Statements that light up word by word as you scroll (fx.js) */
.scrubbing .sw{color:#cfccca;transition:color .35s ease}
.scrubbing .sw.lit{color:inherit}

/* Phones: keep breathing room above the banner text (the .wrap side padding rule would otherwise reset it) */
@media(max-width:650px){.hero .hero-inner{padding-top:44px;padding-bottom:24px}}

/* Body paragraphs are justified (straight left and right edges); words are never split with a hyphen.
   Display statements, short labels, footers and centred blocks keep their own alignment. */
main p:where(:not(.statement,.q,.event-meta,.role-line,.form-note,.fine)){text-align:justify;-webkit-hyphens:none;hyphens:none;text-wrap:pretty}
main :is(.center,.motto,.vision-sec,.loop-note,.partner,.vh-foot,.tnode,.sh-attic,.sh-shaft,.sh-enablers,.vcore,.vnode,.fact,.sfact) p,main p:is(.center,.loop-note){text-align:center;-webkit-hyphens:none;hyphens:none}
/* founder photo on the homepage card: show head and shoulders, anchored to the bottom of the frame */
.ph-photo{background:#fff}
.ph-photo img{object-fit:contain;object-position:50% 100%}
@media(max-width:560px){.founders.one .person{grid-template-columns:1fr}.founders.one .ph-photo{height:240px;border-bottom:1px solid var(--line)}}
/* Events: while no events are listed the carousel is empty, so one "Coming soon" panel shows in its place */
.ev-soon{display:none}
.ev-carousel:not(:has(.event)){display:none}
.ev-carousel:not(:has(.event))+.ev-soon{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:clamp(34px,5vw,56px) 20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.ev-soon-k{font-size:clamp(26px,3vw,38px);font-weight:900;letter-spacing:-.03em;color:var(--dark);line-height:1.1}
.ev-soon-k::before{content:"";display:block;width:44px;height:3px;background:var(--red);margin:0 auto 16px}
main .ev-soon p{margin:0;max-width:520px;color:var(--ink);font-size:15.5px;line-height:1.6;text-align:center}

/* Values on phones: a smaller logo above the list, and a red dot that travels down the line (values.js) */
.vrun{display:none}
@media(max-width:700px){
  .vcore{justify-content:center}
  .vlogo{width:min(220px,62vw)}
  .vrun{display:block;position:absolute;left:25.5px;top:0;width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(198,31,31,.18);z-index:0;pointer-events:none}
  .vicon{position:relative;z-index:1;transition:box-shadow .4s ease,scale .4s ease}
  .loop.formed .vnode.lit{background-color:transparent;box-shadow:none}
  .vnode.lit .vicon{box-shadow:0 0 0 7px rgba(198,31,31,.16);scale:1.06}
  .vnode .vname{transition:color .4s ease}
  .vnode.lit .vname{color:var(--red)}
}