:root{
--paper:#FBFBFD; --surface:#FFFFFF;
--tint-purple:#F4F0FD; --tint-blue:#EEF4FD; --tint-aqua:#EAF8F4;
--ink:#171428; --ink-2:#1F1B35; --ink-3:#282243;
--on-ink:#F1EFF9; --on-ink-soft:#A49FC0;
--on-paper:#1A1830; --on-paper-soft:#5C5878;
--rule:#E7E4F1; --rule-ink:#332D50;
--purple:#6B55BE; --purple-l:#B9A6F0;
--blue:#2F6BB5; --blue-l:#9DC6F0;
--aqua:#15806E; --aqua-l:#7FD8BF;
--yellow:#9A7212; --yellow-l:#F0D78B;
--green:#13875A; --green-l:#4FD98A;
--display:"Literata",Georgia,serif;
--body:"Hanken Grotesk",-apple-system,"Segoe UI",sans-serif;
--mono:"Hanken Grotesk",system-ui,sans-serif;
color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--on-paper);font-family:var(--body);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%}
p{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;letter-spacing:-0.03em;line-height:1.04;text-wrap:balance}
a{color:inherit}
.band{padding-block:clamp(60px,8.5vw,120px);padding-inline:max(20px,4vw)}
.band--paper{background:var(--paper)}
.band--white{background:var(--surface)}
.band--purple{background:var(--tint-purple)}
.band--blue{background:var(--tint-blue)}
.band--aqua{background:var(--tint-aqua)}
.band--ink{background:var(--ink);color:var(--on-ink)}
.band--ink2{background:var(--ink-2);color:var(--on-ink)}
.wrap{max-width:1240px;margin:0 auto}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple);display:block;margin-bottom:20px}
.band--ink .eyebrow,.band--ink2 .eyebrow{color:var(--purple-l)}
.ucbar{background:var(--ink);color:var(--on-ink);font-family:var(--mono);font-size:11px;
letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
.ucbar-in{max-width:1240px;margin:0 auto;padding:11px max(20px,4vw);display:flex;align-items:center;
gap:12px;flex-wrap:wrap}
.ucbar b{font-weight:500;color:var(--yellow-l);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ucbar b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--yellow-l);
box-shadow:0 0 0 0 rgba(240,215,139,.6);animation:ucpulse 2.6s ease-out infinite}
.ucbar span{color:var(--on-ink-soft);letter-spacing:.08em;text-transform:none;font-size:11.5px}
@keyframes ucpulse{
0%{box-shadow:0 0 0 0 rgba(240,215,139,.55)}
70%{box-shadow:0 0 0 7px rgba(240,215,139,0)}
100%{box-shadow:0 0 0 0 rgba(240,215,139,0)}
}
@media(max-width:520px){.ucbar-in{padding-block:9px}.ucbar span{font-size:11px}}
.masthead{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;padding:12px max(14px,2.6vw) 0;background:transparent;transition:padding .3s}
.masthead.is-stuck{padding-top:8px}
.masthead-in{position:relative;max-width:1240px;margin:0 auto;padding:7px 7px 7px 18px;display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
border:1px solid rgba(231,228,241,.95);border-radius:999px;box-shadow:0 10px 30px -18px rgba(26,24,48,.28),0 1px 0 rgba(255,255,255,.9) inset;transition:box-shadow .3s,background .3s}
.masthead.is-stuck .masthead-in{background:rgba(255,255,255,.92);box-shadow:0 14px 34px -18px rgba(26,24,48,.36)}
.mark{display:flex;align-items:center;gap:11px;flex:0 0 auto;white-space:nowrap;text-decoration:none;color:inherit;font-family:var(--display);font-weight:600;font-size:clamp(19px,2.2vw,23px);letter-spacing:.02em;line-height:1.1}
.mark-glyph{width:42px;height:42px;flex:0 0 42px;display:block}
.mark-sub{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--on-paper-soft);font-weight:400;margin-top:3px}
.mark:focus-visible{outline:2px solid var(--purple);outline-offset:4px;border-radius:3px}
.nav{display:flex;align-items:center;gap:2px;margin:0 auto;color:var(--on-paper);white-space:nowrap}
.nav a{text-decoration:none;padding:8px 12px;border-radius:999px;transition:background .2s,color .2s}
.nav a:hover,.nav a:focus-visible{background:rgba(143,123,216,.10);color:var(--on-paper);outline:none}
.nav a[aria-current="page"]{background:rgba(143,123,216,.17);color:var(--on-paper)}
.nav .pill{display:none}
.masthead-in>.pill{flex:0 0 auto;background:var(--yellow-l);border-color:#E3C672;color:var(--on-paper);font-weight:600;padding:9px 22px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
.masthead-in>.pill:hover,.masthead-in>.pill:focus-visible{background:#EBCB6E;border-color:#D9B95C;color:var(--on-paper)}
.navtoggle{display:none;margin-left:auto;align-items:center;gap:9px;background:transparent;border:1px solid var(--rule);
border-radius:999px;padding:9px 16px 9px 14px;font:500 18px/1 var(--body);color:var(--on-paper);cursor:pointer;
transition:border-color .2s,color .2s}
.navtoggle:hover{border-color:var(--purple);color:var(--purple)}
.navtoggle:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.navtoggle svg{width:16px;height:12px;display:block;overflow:visible}
.navtoggle svg line{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transform-box:view-box;transform-origin:8px 6px;transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .18s}
.navtoggle[aria-expanded="true"] svg line:nth-child(1){transform:translateY(5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] svg line:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] svg line:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media(max-width:1279px){
.navtoggle{display:inline-flex}
.masthead-in{padding:6px 6px 6px 14px}
.nav{position:absolute;left:0;right:0;top:calc(100% + 8px);margin:0;display:none;flex-direction:column;align-items:stretch;gap:2px;
background:#fff;border:1px solid var(--rule);border-radius:22px;box-shadow:0 22px 44px -24px rgba(23,20,40,.42);padding:10px}
.masthead.nav-open .nav{display:flex}
.nav a{padding:12px 16px;border-radius:14px}
.nav .pill{display:block;text-align:center;margin-top:8px;padding:12px 24px;background:var(--yellow-l);border:1px solid #E3C672;color:var(--on-paper);font-weight:600}
.masthead-in>.pill{display:none}
.mark-glyph{width:38px;height:38px;flex-basis:38px}
}
@media(max-width:420px){
.mark{font-size:18px;gap:9px}
.mark-glyph{width:34px;height:34px;flex-basis:34px}
.navtoggle{padding:9px 13px}
}
.pill{display:inline-block;padding:11px 22px;border-radius:999px;border:1px solid var(--on-paper);background:var(--on-paper);color:var(--surface);font-size:14px;font-weight:500;text-decoration:none;transition:background .2s,border-color .2s,transform .2s;white-space:nowrap}
.pill:hover,.pill:focus-visible{background:var(--purple);border-color:var(--purple);transform:translateY(-1px)}
.pill--ghost{background:transparent;color:var(--on-paper);border-color:var(--rule)}
.pill--ghost:hover{background:transparent;border-color:var(--purple);color:var(--purple)}
.band--ink .pill{background:var(--on-ink);border-color:var(--on-ink);color:var(--ink)}
.band--ink .pill:hover{background:var(--aqua-l);border-color:var(--aqua-l)}
.band--ink .pill--ghost{background:transparent;color:var(--on-ink);border-color:var(--rule-ink)}
.band--ink .pill--ghost:hover{color:var(--aqua-l);border-color:var(--aqua-l)}
.hero{position:relative;overflow:hidden;padding-block:clamp(64px,10vw,132px)}
.hero::before{content:"";position:absolute;inset:-30% -10% auto auto;width:min(760px,88vw);height:min(760px,88vw);border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(185,166,240,.34),rgba(157,198,240,.2) 45%,rgba(127,216,191,.12) 65%,transparent 72%);pointer-events:none}
.hero>*{position:relative}
.hero h1{font-size:clamp(2.7rem,7.4vw,5.6rem);font-weight:400}
.hero h1 em{font-style:normal;color:var(--purple)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4.5vw,66px);align-items:end}
@media(min-width:900px){.hero-grid{grid-template-columns:1.3fr .9fr}}
.hero-support{display:flex;flex-direction:column;gap:22px;min-width:0}
.lede{font-size:clamp(1rem,1.5vw,1.12rem);color:var(--on-paper-soft);max-width:46ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.strip{margin-top:clamp(44px,6vw,78px);padding-top:22px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-paper-soft)}
.head{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,52px);align-items:start;margin-bottom:clamp(38px,5vw,64px)}
@media(min-width:900px){.head{grid-template-columns:1.2fr 1fr}}
.head h2{font-size:clamp(2.1rem,5vw,3.9rem)}
.head p{color:var(--on-paper-soft);max-width:46ch}
.band--ink .head p,.band--ink2 .head p{color:var(--on-ink-soft)}
.schema{border:1px solid var(--rule-ink);background:var(--ink-2);padding:clamp(22px,3.6vw,42px);overflow-x:auto;border-radius:3px}
.schema svg{display:block;min-width:520px;width:100%;height:auto}
.schema-note{margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--on-ink-soft);text-transform:uppercase}
.s-line{stroke:var(--aqua-l)} .s-fill{fill:var(--aqua-l)}
.s-label{fill:var(--on-ink)} .s-accent-text{fill:var(--purple-l)}
.s-dim{stroke:var(--on-ink-soft);opacity:.45} .s-dim-fill{fill:var(--on-ink-soft);opacity:.45}
.s-dim-text{fill:var(--on-ink-soft)}
.flow{animation:flow 3.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
.duo{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:860px){.duo{grid-template-columns:1fr 1fr}}
.duo>div{padding:clamp(26px,3.4vw,44px);min-width:0;border-radius:4px;transition:transform .25s,box-shadow .25s}
.duo>div:hover{transform:translateY(-3px);box-shadow:0 14px 40px -24px rgba(26,24,48,.4)}
.duo-a{background:var(--tint-purple)} .duo-b{background:var(--tint-aqua)}
.duo h3{font-size:clamp(1.6rem,2.9vw,2.3rem);margin-bottom:14px}
.duo p{color:var(--on-paper-soft);margin-bottom:22px}
.tick{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:11px}
.tick li{padding-left:22px;position:relative;font-size:15px}
.tick li::before{content:"";position:absolute;left:0;top:.66em;width:10px;height:1px;background:var(--purple)}
.duo-b .tick li::before{background:var(--aqua)}
.textlink{font-size:14px;text-decoration:none;border-bottom:1px solid var(--purple);padding-bottom:3px;display:inline-block;transition:color .18s}
.textlink:hover{color:var(--purple)}
.duo-b .textlink{border-bottom-color:var(--aqua)} .duo-b .textlink:hover{color:var(--aqua)}
.band--ink .textlink{border-bottom-color:var(--aqua-l)} .band--ink .textlink:hover{color:var(--aqua-l)}
.statute{border:1px solid var(--rule);background:var(--surface);border-radius:4px;overflow:hidden}
.statute-row{display:grid;grid-template-columns:1fr;gap:4px;padding:20px clamp(20px,3vw,34px);border-bottom:1px solid var(--rule);transition:background .2s}
.statute-row:hover{background:var(--tint-blue)}
@media(min-width:760px){.statute-row{grid-template-columns:190px 1fr 120px;gap:24px;align-items:baseline}}
.statute-row:last-child{border-bottom:0}
.statute-k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-paper-soft)}
.statute-v{font-size:15px;min-width:0}
.cite{font-family:var(--mono);font-size:11px;color:var(--blue);letter-spacing:.04em}
.disclaimer{margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-paper-soft)}
.stepper{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule-ink);border:1px solid var(--rule-ink);border-radius:4px;overflow:hidden}
@media(min-width:960px){.stepper{grid-template-columns:1.15fr .85fr}}
.stage{background:var(--ink-2);padding:clamp(28px,3.6vw,46px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(26px,4vw,42px);min-width:0}
.stage-n{font-family:var(--display);font-weight:400;font-size:clamp(3rem,6.4vw,4.8rem);line-height:.92;color:var(--step-c,var(--aqua-l));font-variant-numeric:tabular-nums;letter-spacing:-0.04em}
.stage-t{font-size:clamp(1.8rem,3.4vw,2.7rem);margin:10px 0 14px;line-height:1.06}
.stage-d{font-size:15.5px;color:var(--on-ink-soft);max-width:46ch}
.track{display:block;width:100%;height:auto}
.track-line{stroke:var(--rule-ink);stroke-width:2}
.track-done{stroke:var(--step-c,var(--aqua-l));stroke-width:2;transition:all .45s cubic-bezier(.4,0,.2,1)}
.track-node{fill:var(--ink-2);stroke:var(--rule-ink);stroke-width:2;transition:fill .3s,stroke .3s}
.track-node.is-done{fill:var(--step-c,var(--aqua-l));stroke:var(--step-c,var(--aqua-l))}
.track-cur{fill:var(--step-c,var(--aqua-l));transition:transform .45s cubic-bezier(.4,0,.2,1)}
.track-cap{fill:var(--on-ink-soft);font-family:var(--mono);font-size:16.2px;letter-spacing:1px;text-transform:uppercase}
.stepnav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;background:var(--rule-ink);gap:1px}
@media(min-width:960px){.stepnav li{flex:1;display:flex}.stepnav button{align-items:center}}
.stepnav button{width:100%;text-align:left;background:var(--ink-2);border:0;cursor:pointer;color:inherit;font-family:var(--body);padding:clamp(13px,1.7vw,18px) clamp(20px,2.4vw,28px);display:flex;gap:16px;align-items:baseline;transition:background .2s,padding-left .2s}
.stepnav button:hover{background:var(--ink-3);padding-left:calc(clamp(20px,2.4vw,28px) + 5px)}
.stepnav button:focus-visible{outline:2px solid var(--aqua-l);outline-offset:-2px}
.stepnav .sn-n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--on-ink-soft);flex:0 0 22px;font-variant-numeric:tabular-nums}
.stepnav .sn-t{font-family:var(--display);font-size:1.1rem;font-weight:400;color:var(--on-ink-soft);transition:color .2s}
.stepnav button:hover .sn-t{color:var(--on-ink)}
.stepnav button[aria-current="true"]{background:var(--ink-3)}
.stepnav button[aria-current="true"] .sn-n{color:var(--step-c,var(--aqua-l))}
.stepnav button[aria-current="true"] .sn-t{color:var(--on-ink)}
.aside{margin-top:24px;padding:20px 24px;border-left:2px solid var(--purple-l);background:var(--ink-3);font-size:14.5px;color:var(--on-ink-soft);border-radius:0 4px 4px 0}
.orgs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:clamp(34px,4vw,54px)}
@media(min-width:720px){.orgs{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.orgs{grid-template-columns:repeat(4,1fr)}}
.org{background:var(--surface);border:1px solid var(--rule);padding:22px 16px;text-align:center;min-width:0;border-radius:4px;transition:transform .22s,border-color .22s}
.org:hover{transform:translateY(-3px);border-color:var(--blue-l)}
.org-n{font-family:var(--display);font-size:14px;font-weight:600;line-height:1.25;margin-bottom:6px}
.org-r{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-paper-soft);line-height:1.4}
.miles{list-style:none;margin:0 0 clamp(34px,4vw,54px);padding:0;border-top:1px solid var(--rule)}
.miles li{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-bottom:1px solid var(--rule)}
@media(min-width:640px){.miles li{grid-template-columns:86px 1fr;gap:26px;align-items:baseline}}
.mile-y{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--purple);font-variant-numeric:tabular-nums}
.mile-t{font-size:15px;color:var(--on-paper-soft);max-width:72ch}
.facts{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.facts{grid-template-columns:1fr 1fr}}
.fact{background:var(--surface);border:1px solid var(--rule);padding:clamp(24px,3vw,34px);min-width:0;border-radius:4px;border-top:3px solid var(--fc,var(--purple))}
.fact-h{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:400;margin-bottom:10px;font-variant-numeric:tabular-nums;letter-spacing:-0.03em;color:var(--fc,var(--purple))}
.fact p{font-size:14.5px;color:var(--on-paper-soft)}
.fact-src{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-paper-soft)}
.founder{display:grid;grid-template-columns:1fr;gap:clamp(30px,4.5vw,60px)}
@media(min-width:940px){.founder{grid-template-columns:.85fr 1.15fr}}
.portrait{background:var(--surface);border:1px solid var(--rule);padding:clamp(28px,4vw,40px);display:flex;flex-direction:column;justify-content:flex-start;gap:30px;min-height:300px;min-width:0;border-radius:4px}
.portrait-photo{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 36%;display:block;border-radius:3px;background:var(--tint-purple)}
.initials{font-family:var(--display);font-weight:400;font-size:clamp(3.6rem,8vw,5.8rem);line-height:.9;color:var(--purple)}
.meta{display:flex;flex-direction:column;gap:13px}
.meta-row{display:flex;gap:14px;font-size:13px;border-top:1px solid var(--rule);padding-top:12px}
.meta-k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-paper-soft);flex:0 0 76px}
.meta-v{min-width:0}
.quote{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.2;margin-bottom:28px;border-left:2px solid var(--purple);padding-left:26px;letter-spacing:-0.03em}
.bio p{color:var(--on-paper-soft);margin-bottom:16px;max-width:60ch}
.bio p strong{color:var(--on-paper);font-weight:600}
.focus{margin-top:clamp(34px,4.5vw,56px);border-top:1px solid var(--rule);padding-top:clamp(26px,3vw,38px)}
.focus-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:10px 28px}
@media(min-width:640px){.focus-list{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.focus-list{grid-template-columns:repeat(4,1fr)}}
.focus-list li{font-size:14.5px;color:var(--on-paper-soft);padding-left:20px;position:relative}
.focus-list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;
border:1.5px solid var(--purple);opacity:.65}
.cases{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:700px){.cases{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.cases{grid-template-columns:repeat(3,1fr)}}
.case{background:var(--ink-3);border:1px solid var(--rule-ink);padding:clamp(22px,2.8vw,30px);border-radius:4px;
display:flex;flex-direction:column;gap:10px;min-width:0}
.case-w{font-family:var(--display);font-size:1.12rem;line-height:1.3}
.case p{font-size:14.5px;color:var(--on-ink-soft)}
.case-o{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
text-transform:uppercase;color:var(--aqua-l)}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px}
.filter{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;background:transparent;border:1px solid var(--rule-ink);color:var(--on-ink-soft);padding:9px 16px;border-radius:999px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.filter:hover{color:var(--on-ink)}
.filter[aria-pressed="true"]{background:var(--on-ink);border-color:var(--on-ink);color:var(--ink)}
.filter:focus-visible{outline:2px solid var(--aqua-l);outline-offset:2px}
.progs{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:700px){.progs{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.progs{grid-template-columns:repeat(3,1fr)}}
.prog{background:var(--ink-2);border:1px solid var(--rule-ink);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;gap:10px;min-width:0;border-radius:4px;border-top:3px solid var(--pc,var(--purple-l));transition:transform .25s,opacity .25s,border-color .25s}
.prog:hover{transform:translateY(-3px)}
.prog.is-out{display:none}
.prog-code{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--pc,var(--purple-l));opacity:.9}
.prog h3{font-size:1.3rem}
.prog p{font-size:14.5px;color:var(--on-ink-soft)}
.prog-scope{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--pc,var(--purple-l));margin-top:auto;padding-top:8px}
details{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;font-family:var(--display);font-size:clamp(1.15rem,2.1vw,1.5rem);font-weight:400;transition:color .2s}
summary:hover{color:var(--purple)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;border-right:1.5px solid var(--purple);border-bottom:1.5px solid var(--purple);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
details[open] summary::after{transform:translateY(-20%) rotate(225deg)}
summary:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.answer{padding:0 0 24px;max-width:70ch}
.answer p{color:var(--on-paper-soft);font-size:15px;margin-bottom:12px}
.contact{display:grid;grid-template-columns:1fr;gap:clamp(30px,4.5vw,60px)}
@media(min-width:900px){.contact{grid-template-columns:1.1fr .9fr}}
.detail{border-top:1px solid var(--rule-ink);padding:18px 0;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.detail-k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-soft);flex:0 0 84px}
.detail-v{font-size:16.5px;user-select:all;min-width:0;word-break:break-word}
.copy{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:transparent;border:1px solid var(--rule-ink);color:var(--on-ink-soft);padding:6px 12px;border-radius:999px;cursor:pointer;transition:border-color .18s,color .18s}
.copy:hover,.copy:focus-visible{border-color:var(--aqua-l);color:var(--aqua-l)}
.include{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:12px;counter-reset:x}
.include li{padding-left:26px;position:relative;font-size:14.5px;color:var(--on-ink-soft)}
.include li::before{content:counter(x,decimal-leading-zero);counter-increment:x;position:absolute;left:0;top:.14em;font-family:var(--mono);font-size:10px;color:var(--aqua-l)}
footer{background:var(--ink);border-top:1px solid var(--rule-ink);padding:clamp(40px,5vw,64px) max(20px,4vw);color:var(--on-ink)}
.foot{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.foot .mark-sub{color:var(--on-ink-soft)}
.foot .mark-glyph{width:65px;height:65px;flex-basis:65px}
.foot p{font-size:13.5px;color:var(--on-ink-soft);max-width:44ch}
.foot-meta{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-soft)}
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .62s cubic-bezier(.2,.6,.3,1),transform .62s cubic-bezier(.2,.6,.3,1)}
@media(prefers-reduced-motion:reduce){
.ucbar b::before,.ucbadge::before{animation:none}
*{transition:none!important;animation:none!important}
.js .reveal{opacity:1!important;transform:none!important}
}/* ── multi-page: page heads, onward links, footer nav ────────────── */
.pagehead{padding-block:clamp(52px,7vw,96px)}
.pagehead h1{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:400;font-family:var(--display);letter-spacing:-0.03em;line-height:1.04}
.pagehead .head{margin-bottom:0;align-items:end}
.pagehead p{color:var(--on-paper-soft);max-width:48ch}
.band--purple.pagehead p,.band--blue.pagehead p{color:var(--on-paper-soft)}

.onward{padding-block:clamp(44px,6vw,76px);border-top:1px solid var(--rule)}
.onward-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
@media(min-width:720px){.onward-grid{grid-template-columns:repeat(3,1fr)}}
.onward-card{display:flex;flex-direction:column;gap:8px;background:var(--surface);padding:clamp(20px,2.6vw,28px);
  text-decoration:none;transition:background .22s,transform .22s}
.onward-card:hover{background:var(--tint-purple)}
.onward-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--purple)}
.onward-t{font-family:var(--display);font-size:1.12rem;line-height:1.25}
.onward-card:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}

.footnav{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:18px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase}
.footnav a{color:var(--on-ink-soft);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .18s,border-color .18s}
.footnav a:hover{color:var(--on-ink);border-bottom-color:var(--aqua-l)}

/* ── flowing page-to-page transitions ────────────────────────────── */
@view-transition{navigation:auto}
.mark-glyph{view-transition-name:sitemark}
.masthead{view-transition-name:masthead}
footer{view-transition-name:sitefoot}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes vt-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
::view-transition-old(root){animation:vt-out .26s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .42s cubic-bezier(.2,.6,.3,1) both}
::view-transition-group(sitemark),::view-transition-group(masthead),::view-transition-group(sitefoot){
  animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.6,.3,1)}

/* first paint on browsers without view transitions */
.js main{animation:vt-in .5s cubic-bezier(.2,.6,.3,1) both}
@media(prefers-reduced-motion:reduce){
  .js main{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
/* ── a track-record story: picture, narrative, one quote ─────────── */
.story{border-top:1px solid var(--rule)}
.story-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);align-items:start}
@media(min-width:900px){.story-grid{grid-template-columns:.62fr 1.38fr}}
.story-fig{margin:0}
.story-fig img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:4px;background:var(--tint-aqua)}
.story-fig figcaption{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-paper-soft)}
.story-body h2{font-size:clamp(1.8rem,3.6vw,2.9rem);margin-bottom:20px}
.story-body p{color:var(--on-paper-soft);margin-bottom:16px;max-width:62ch}
.story-body p strong{color:var(--on-paper);font-weight:600}
.story-quote{margin:26px 0 18px;padding-left:24px;border-left:2px solid var(--aqua);
  font-family:var(--display);font-size:clamp(1.15rem,2.1vw,1.45rem);line-height:1.35;
  color:var(--on-paper);letter-spacing:-0.02em;max-width:54ch}
.story-note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-paper-soft);margin-top:6px}
/* ── speaking ────────────────────────────────────────────────────── */
.speak{border-top:1px solid var(--rule)}
.speak-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,56px);align-items:start}
@media(min-width:900px){.speak-grid{grid-template-columns:1.25fr .75fr}}
.speak-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.speak-list li{display:grid;grid-template-columns:1fr;gap:6px;padding:20px 0;border-bottom:1px solid var(--rule)}
@media(min-width:560px){.speak-list li{grid-template-columns:76px 1fr;gap:24px;align-items:baseline}}
.speak-y{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--purple);font-variant-numeric:tabular-nums}
.speak-b{font-size:16px;color:var(--on-paper)}
.speak-b strong{font-weight:600}
.speak-d{display:block;margin-top:6px;font-size:14.5px;color:var(--on-paper-soft);max-width:56ch}
.speak-fig{margin:0}
.speak-fig img{width:100%;height:auto;display:block;border:1px solid var(--rule);border-radius:4px}
.speak-fig figcaption{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-paper-soft)}
.story--wide{border-top:1px solid var(--rule)}
@media(min-width:900px){.story-grid--flip{grid-template-columns:1fr 1.15fr}}
.story-fig--wide img{aspect-ratio:4/3}
.story-body em{font-style:italic;color:var(--on-paper)}
/* ── staggered entrances ─────────────────────────────────────────── */
.js .stag>*{opacity:0;transform:translateY(22px)}
.js .stag.is-in>*{opacity:1;transform:none;
  transition:opacity .66s cubic-bezier(.2,.6,.3,1) calc(var(--i,0)*70ms),
             transform .66s cubic-bezier(.2,.6,.3,1) calc(var(--i,0)*70ms)}
.js .lift>*{animation:lift-in .72s cubic-bezier(.2,.6,.3,1) both;animation-delay:calc(var(--i,0)*90ms + 60ms)}
@keyframes lift-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.is-in{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.6,.3,1),transform .7s cubic-bezier(.2,.6,.3,1)}
.js main{animation:lift-in .6s cubic-bezier(.2,.6,.3,1) both}
@media(prefers-reduced-motion:reduce){
  .js .stag>*,.js .lift>*,.js .reveal{opacity:1!important;transform:none!important;animation:none!important}
  .js main{animation:none}
}
/* ── monogram in every page head, diode cycling the six colours ──── */
.ph-side{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.ph-mark{display:block;width:clamp(170px,22vw,300px);color:var(--on-paper)}
.ph-mark svg{display:block;width:100%;height:auto;overflow:visible}
.ph-mark--hero{margin-bottom:6px}
.mono-tri,.mono-bar{animation:diode-six 9s ease-in-out infinite}
.mono-tri{fill:#8F7BD8}
.mono-bar{stroke:#8F7BD8}
@keyframes diode-six{
  0%,100%{fill:#8F7BD8;stroke:#8F7BD8}
  16.6%  {fill:#5B8FD0;stroke:#5B8FD0}
  33.3%  {fill:#4FD98A;stroke:#4FD98A}
  50%    {fill:#C7C2DA;stroke:#C7C2DA}
  66.6%  {fill:#F0D78B;stroke:#F0D78B}
  83.3%  {fill:#1A1830;stroke:#1A1830}
}
/* the strokes draw themselves in once, then the diode keeps flowing */
.ph-mark path:not(.mono-tri){stroke-dasharray:240;stroke-dashoffset:240;animation:mono-draw 1.4s cubic-bezier(.4,0,.2,1) .25s forwards}
.ph-mark .mono-bar{stroke-dasharray:none;stroke-dashoffset:0;animation:diode-six 9s ease-in-out infinite}
@keyframes mono-draw{to{stroke-dashoffset:0}}

/* ── page titles light up in the six colours under the cursor ───── */
.glow{background-image:linear-gradient(90deg,#8F7BD8,#5B8FD0,#4FD98A,#C7C2DA,#F0D78B,#1A1830,#8F7BD8);
  background-size:300% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;
  transition:color .35s ease;cursor:default}
.glow:hover,.glow:hover em{color:transparent;-webkit-text-fill-color:transparent}
.glow:hover{animation:glow-flow 3.2s linear infinite}
.glow em{transition:color .35s ease}
@keyframes glow-flow{to{background-position:300% 0}}

/* ── type scale: headlines and highlights 24px, body 18px ────────── */
h1,h2,h3,.hero h1,.pagehead h1,.head h2,.duo h3,.stage-t,.prog h3,.case-w,.onward-t,
.story-body h2,.fact-h,.quote,.story-quote,.initials{font-size:24px;line-height:1.28;letter-spacing:-0.01em}
.stage-n{font-size:24px;line-height:1.1}
body,p,li,.lede,.head p,.pagehead p,.duo p,.tick li,.statute-v,.stage-d,.fact p,.mile-t,
.speak-b,.speak-d,.bio p,.answer p,.prog p,.case p,.story-body p,.focus-list li,.include li,
.aside,.detail-v,.meta-v,.meta-row,summary{font-size:18px;line-height:1.65}
summary{font-size:24px;line-height:1.3}
@media(prefers-reduced-motion:reduce){
  .mono-tri,.mono-bar,.glow:hover{animation:none}
  .ph-mark path{stroke-dashoffset:0!important;animation:none!important}
}
/* bar and triangle move together; the bar must not inherit the draw-in */
.ph-mark path.mono-bar{stroke-dasharray:none;stroke-dashoffset:0;animation:diode-six 9s ease-in-out infinite}
/* with 24px titles, centre the head against the monogram */
.pagehead{padding-block:clamp(40px,5vw,72px)}
.pagehead .head{align-items:center}
.hero{padding-block:clamp(48px,6vw,88px)}
.hero-grid{align-items:center}
/* hover gradient uses each hue's legible-on-paper tone, so the title never washes out */
.glow{background-image:linear-gradient(90deg,var(--purple),var(--blue),var(--green),#5C5878,var(--yellow),#1A1830,var(--purple));
  background-size:220% 100%}
@keyframes glow-flow{to{background-position:220% 0}}

/* ── clients and partners: named organisations ───────────────────── */
.names{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.names{grid-template-columns:repeat(2,1fr)}.name{min-height:150px}}
@media(min-width:1000px){.names{grid-template-columns:repeat(4,1fr)}}
.name{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:0;
  padding:22px 20px 20px;background:var(--paper);border:1px solid var(--rule);border-radius:4px;overflow:hidden;
  transition:transform .25s ease,border-color .25s ease}
.name::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--nc);
  transform:scaleX(.18);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.name:hover{transform:translateY(-3px);border-color:var(--nc)}
.name:hover::before{transform:scaleX(1)}
.name-n{font-family:var(--display);font-size:24px;line-height:1.25;color:var(--on-paper)}
.name-r{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-paper-soft)}
@media(prefers-reduced-motion:reduce){.name,.name::before{transition:none}}
.band--white + .band--white{border-top:1px solid var(--rule)}

/* ── logos: one plate size for every organisation ────────────────── */
.logo-plate{display:flex;align-items:center;justify-content:center;height:96px;margin:0 0 6px;padding:16px 18px;
  background:#FFFFFF;border:1px solid var(--rule);border-radius:3px}
.logo-plate img{display:block;max-height:56px;max-width:min(100%,200px);width:auto;height:auto;object-fit:contain}
.logo-plate--dark{background:#1A1830;border-color:#1A1830}
.logo-plate--type{font-family:var(--display);font-size:17px;line-height:1.2;text-align:center;color:#5C5878;letter-spacing:.01em}
.name .logo-plate{margin-bottom:auto}
.name{justify-content:flex-start}
.name-n{margin-top:12px}
.org .logo-plate{height:84px;margin-bottom:14px}
.org .logo-plate img{max-height:48px}

/* ── logo rails: coloured pages, full-bleed slide, page turn at the left edge ── */
html,body{overflow-x:clip}
.logo-rail{position:relative;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);padding-block:40px;margin-block:-32px}
.logo-rail .logo-track{display:flex;flex-wrap:nowrap;width:max-content;gap:0;grid-template-columns:none;will-change:transform;margin:0}
.logo-rail .logo-track>*{flex:0 0 auto;margin-right:16px;position:relative;transform-origin:0 50%;backface-visibility:hidden;transition:none}
.logo-rail .logo-track>.is-turning{z-index:3;box-shadow:calc(var(--turn,0) * -22px) 12px calc(var(--turn,0) * 34px) rgba(26,24,48,calc(var(--turn,0) * .28))}
.logo-rail .logo-track>*::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,rgba(26,24,48,.04) 0%,rgba(26,24,48,.42) 100%);opacity:var(--turn,0)}
.logo-rail .names>.name{width:300px}
.logo-rail .orgs>.org{width:272px}
.logo-rail:has(.orgs){margin-bottom:clamp(8px,2vw,22px)}
@media(max-width:639px){.logo-rail .names>.name{width:256px}.logo-rail .orgs>.org{width:240px}}
.logo-rail.is-static{width:auto;margin-left:0;overflow:visible}
.logo-rail.is-static .logo-track{width:auto;flex-wrap:wrap}

/* ── pages: one palette colour each; logo ground chosen for contrast ── */
.pg{border:0!important;border-radius:4px}
.pg::before{display:none!important}
.pg:hover{transform:none}
.pg--purple{background:#8F7BD8}
.pg--blue{background:#5B8FD0}
.pg--green{background:#4FD98A}
.pg--yellow{background:#F0D78B}
.pg--lilac{background:#C7C2DA}
.pg--black{background:#1A1830}
.pg .name-n,.pg .org-n{color:#1A1830}
.pg .name-r,.pg .org-r{color:#1A1830}
.pg--black .name-n,.pg--black .org-n{color:#F4F2FA}
.pg--black .name-r,.pg--black .org-r{color:#C7C2DA}
.pg .logo-plate{border:0;background:#FFFFFF}
.pg--yellow .logo-plate,.pg--green .logo-plate,.pg--lilac .logo-plate{background:#1A1830}

/* ── rail arrows: faint while the row is hovered, darker under the cursor ── */
.rail-arrow{position:absolute;top:50%;z-index:6;width:46px;height:46px;margin-top:-23px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#FFFFFF;background:#1A1830;opacity:0;
  transition:opacity .3s ease}
.rail-arrow--prev{left:14px}
.rail-arrow--prev svg{transform:scaleX(-1)}
.rail-arrow--next{right:14px}
.logo-rail:hover .rail-arrow{opacity:.16}
.logo-rail .rail-arrow:hover{opacity:.86}
.rail-arrow:focus-visible{opacity:.86;outline:2px solid #8F7BD8;outline-offset:3px}
@media(hover:none){.rail-arrow{opacity:.2}}

/* ── page-head lockup: CSR monogram, DIODE beneath it, 360° tagline ── */
.ph-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,1.4vw,16px)}
.ph-lockup--hero{margin-bottom:6px}
.ph-diode{font-family:var(--display);font-weight:600;font-size:clamp(26px,2.6vw,32px);line-height:1;letter-spacing:.22em;
  color:var(--on-paper);padding-left:4px;margin-top:-2px}
/* tagline: one colour at a time, changing in step with the diode inside the S
   (same nine-second cycle, same timing), in each hue's legible tone */
.ph-tag{font-family:var(--mono);font-size:18px;font-weight:600;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;padding-left:4px;
  color:#6B55BE;animation:tag-six 9s ease-in-out infinite}
@keyframes tag-six{0%,100%{color:#6B55BE}16.6%{color:#2F6BB5}33.3%{color:#13875A}50%{color:#5C5878}66.6%{color:#9A7212}83.3%{color:#1A1830}}
@media(prefers-reduced-motion:reduce){.ph-tag{animation:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ph-diode .tri-d{display:inline-block;height:.71em;width:auto;vertical-align:baseline;margin-right:.22em;overflow:visible}
.ph-diode .tri-d.eps{margin-right:0}

/* hexagon marks in the masthead and footer share the diode's colour clock;
   on the dark footer the black step becomes white so the diode never disappears */
.foot .mono-tri,.foot .mono-bar{animation-name:diode-six-dark}
@keyframes diode-six-dark{0%,100%{fill:#8F7BD8;stroke:#8F7BD8}16.6%{fill:#5B8FD0;stroke:#5B8FD0}33.3%{fill:#4FD98A;stroke:#4FD98A}50%{fill:#C7C2DA;stroke:#C7C2DA}66.6%{fill:#F0D78B;stroke:#F0D78B}83.3%{fill:#EDEAF5;stroke:#EDEAF5}}

/* ── type scale, completed: headlines and highlights 24px, every other line of text 18px ──
   (logo pieces keep their own sizes: the CSR DIODE wordmark, BENGALURU and the page-head lockup) */
.nav,.nav a,.pill,.nav .pill,.textlink,.filter,.copy,
.eyebrow,.onward-k,.mile-y,.speak-y,.org-r,.name-r,.prog-code,.prog-scope,.case-o,.fact-src,
.meta-k,.detail-k,.statute-k,.cite,.disclaimer,figcaption,.schema-note,
.stepnav .sn-n,.stepnav .sn-t,.ucbar,.ucbar b,.ucbar span,.ucbadge,
.foot p,.foot-meta,.footnav,.strip span{font-size:18px;line-height:1.45}
/* small-caps labels at 18px need far less tracking than they had at 10px */
.eyebrow,.onward-k,.mile-y,.speak-y,.org-r,.name-r,.prog-code,.prog-scope,.case-o,.fact-src,
.meta-k,.detail-k,.statute-k,.cite,.disclaimer,figcaption,.schema-note,.stepnav .sn-n,
.ucbar,.ucbar b,.ucbar span,.ucbadge,.foot-meta,.footnav,.filter,.copy{letter-spacing:.05em}
.org-n{font-size:24px;line-height:1.25}
.org-r{line-height:1.45}
/* section heads: the label runs across the top, then heading left and paragraph right */
.head>.eyebrow{grid-column:1/-1;margin-bottom:0}
.story-fig figcaption,.speak-fig figcaption{font-size:18px;letter-spacing:.05em;line-height:1.45}
.org-r .yr,.name-r .yr{white-space:nowrap}
/* ── diode flow schematic ── */
.schema{background-color:var(--ink-2);background-image:radial-gradient(rgba(185,166,240,.10) 1px,transparent 1.2px);background-size:22px 22px}
.sx .sx-sub{fill:var(--on-ink-soft)}
.sx-src{fill:var(--ink-3);stroke:url(#sx-hex);stroke-width:2}
.sx-src-pulse{fill:none;stroke:#B9A6F0;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:sxpulse 2.4s ease-out infinite}
@keyframes sxpulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.sx-rupee{fill:var(--on-ink);font-family:var(--body);font-weight:500;font-size:28px}
.sx-trunk{fill:none;stroke:url(#sx-trunk);stroke-width:2}
.sx-branch{fill:none;stroke-width:1.5;opacity:.32}
.sx-leak{fill:none;stroke:var(--on-ink-soft);stroke-width:1.5;stroke-dasharray:4 6;opacity:.45}
.sx-hex{fill:rgba(143,123,216,.08);stroke:url(#sx-hex);stroke-width:2;transition:stroke-width .2s}
.sx-tri{fill:rgba(185,166,240,.16);stroke:#B9A6F0;stroke-width:1.5;transition:fill .2s}
.sx-bar{fill:#B9A6F0;transition:fill .15s}
.sx-core{opacity:.55;transition:opacity .25s}
.sx.is-hit .sx-bar{fill:#FFFFFF}
.sx.is-hit .sx-tri{fill:rgba(185,166,240,.38)}
.sx.is-hit .sx-core{opacity:1}
.sx.is-block .sx-hex{stroke-width:3.5}
.sx-node-dot{fill:var(--c)}
.sx-node-halo{fill:none;stroke:var(--c);stroke-width:1;opacity:.35}
.sx-area{fill:var(--on-ink);transition:fill .3s}
.sx-node.is-on .sx-area{fill:var(--c)}
@media(max-width:639px){.schema svg.sx{min-width:680px}}
@media(prefers-reduced-motion:reduce){.sx-src-pulse{animation:none;opacity:0}}
/* ── headline scenes ── */
.scene{margin-top:clamp(22px,3vw,36px);width:100%;max-width:400px;color:var(--on-paper);-webkit-tap-highlight-color:transparent}
.scene--statute{max-width:440px}
.scene svg{display:block;width:100%;height:auto;overflow:visible}
.scene [data-depth]{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.scene .ln{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.scene .sc-t{font-family:var(--body);font-size:18px;fill:var(--on-paper-soft)}
.scene .sc-big{font-family:var(--display);font-size:24px;fill:var(--on-paper)}
.scene .sc-rupee{font-family:var(--body);font-weight:500;font-size:17px;fill:var(--on-paper)}
.scene .sc-pct{font-family:var(--display);font-weight:600;font-size:15px;fill:#6B55BE}
.scene .sc-hit{fill:transparent;cursor:pointer}
.sc-armed .dr{stroke-dasharray:1;stroke-dashoffset:1}
.sc-armed .pop{opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center}
.sc-armed .fd{opacity:0}
.sc-armed.is-in .dr{animation:sc-draw 1s cubic-bezier(.45,0,.2,1) var(--d,0s) forwards}
.sc-armed.is-in .pop{animation:sc-pop .6s cubic-bezier(.2,.9,.25,1.25) var(--d,0s) forwards}
.sc-armed.is-in .fd{animation:sc-fade .7s ease var(--d,0s) forwards}
@keyframes sc-draw{to{stroke-dashoffset:0}}
@keyframes sc-pop{to{opacity:1;transform:none}}
@keyframes sc-fade{to{opacity:1}}
/* headlines rise into place */
.pagehead .eyebrow,.pagehead h1,.hero .eyebrow,.hero h1{animation:sc-rise .8s cubic-bezier(.2,.7,.2,1) both}
.pagehead h1,.hero h1{animation-delay:.08s}
.pagehead .ph-side,.hero .hero-support{animation:sc-rise .8s cubic-bezier(.2,.7,.2,1) .18s both}
@keyframes sc-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* reach */
.scene--reach .sc-route{stroke:var(--on-paper);opacity:.28;transition:opacity .3s,stroke .3s}
.scene--reach .sc-route.is-on{opacity:.9;stroke:#6B55BE}
.scene--reach .sc-ring{opacity:0;transition:opacity .3s;stroke-width:1.5}
.scene--reach .sc-person{cursor:pointer}
.scene--reach .sc-person.is-on .sc-ring{opacity:1}
/* clients */
.scene--clients .sc-flow{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:2 14;opacity:0;transition:opacity .4s}
.scene--clients.is-idle .sc-flow{opacity:.9;animation:sc-dash 1.2s linear infinite}
.scene--clients .sc-flow--main{stroke-width:3.4}
.scene--clients .sc-src{cursor:pointer}
.scene--clients .st{transition:opacity .3s,stroke-width .3s}
.scene--clients[data-hl=co] .st-ngo,.scene--clients[data-hl=ngo] .st-co{opacity:.18}
.scene--clients[data-hl] .sc-flow{animation-duration:.55s}
.scene--clients.is-idle .sc-bull{animation:sc-beat 2.4s ease-in-out infinite}
@keyframes sc-dash{to{stroke-dashoffset:-16}}
@keyframes sc-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
/* statute */
.scene--statute .sc-row{cursor:pointer}
.scene--statute .sc-row .sc-hit{transition:fill .25s}
.scene--statute .sc-row.is-on .sc-hit{fill:rgba(143,123,216,.14)}
.scene--statute .sc-stamp{transform:translateY(-60px);opacity:0}
.sc-armed.scene--statute.is-in .sc-stamp{animation:sc-stamp 1.3s cubic-bezier(.5,0,.3,1) .7s both}
.scene--statute .sc-imprint{transform:rotate(-14deg)}
.sc-armed.scene--statute .sc-imprint{opacity:0;transform:scale(1.25) rotate(-14deg)}
.sc-armed.scene--statute.is-in .sc-imprint{animation:sc-ink .35s ease-out 1.25s forwards}
@keyframes sc-stamp{0%{transform:translateY(-60px);opacity:0}25%{opacity:1}45%{transform:translateY(46px);opacity:1}60%{transform:translateY(46px);opacity:1}100%{transform:translateY(-70px);opacity:0}}
@keyframes sc-ink{to{opacity:1;transform:rotate(-14deg)}}
.scene--statute .sc-k,.scene--statute .sc-v{transition:opacity .2s}
.scene--statute .sc-swap .sc-k,.scene--statute .sc-swap .sc-v{opacity:0}
/* stages */
.scene--stages .sc-dot{fill:#fff;transition:fill .3s}
.scene--stages .sc-node{cursor:pointer}
.scene--stages .sc-node.is-on .sc-dot{fill:var(--c)}
.scene--stages .sc-node.is-on .sc-lab{fill:var(--on-paper)}
.scene--stages .sc-here{opacity:0;transition:opacity .25s;fill:#6B55BE}
.scene--stages .sc-node.is-here .sc-here{opacity:1}
.scene--stages .sc-marker{opacity:0;transition:transform .7s cubic-bezier(.6,0,.2,1),opacity .4s}
.scene--stages.is-idle .sc-marker{opacity:1}
.scene--stages .sc-loop{stroke-dasharray:1;opacity:.55}
.scene--stages.is-idle .sc-loop{stroke-dasharray:.02 .03;animation:sc-dash2 6s linear infinite}
@keyframes sc-dash2{to{stroke-dashoffset:-1}}
/* record */
.scene--record .sc-guide{stroke:#6B55BE;stroke-width:1;stroke-dasharray:3 4;opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
.scene--record.is-idle .sc-guide{opacity:.6}
.scene--record .sc-mile{transition:r .25s}
.scene--record .sc-mile.is-on{r:7.5}
.scene--record .sc-yr{fill:#6B55BE}
.scene--record .sc-org{transition:opacity .2s}
/* bridge */
.scene--bridge .sc-cable{transition:stroke-width .3s}
.scene--bridge:hover .sc-cable{stroke-width:2.8}
/* send */
.scene--send .sc-route2{fill:none;stroke:var(--on-paper);stroke-width:1.4;stroke-dasharray:3 6;opacity:.45}
.scene--send .sc-plane{opacity:0}
.scene--send.is-idle .sc-plane{opacity:1}
.scene--send .sc-done{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s ease}
.scene--send.is-got .sc-done{stroke-dashoffset:0}
.scene--send .sc-flap{transition:d .35s ease}
.scene--send.is-open .sc-flap{d:path("M304,98 L342,72 L380,98")}
@media(prefers-reduced-motion:reduce){
  .pagehead .eyebrow,.pagehead h1,.hero .eyebrow,.hero h1,.pagehead .ph-side,.hero .hero-support{animation:none}
  .scene [data-depth]{transition:none}
  .scene--statute .sc-stamp{display:none}
  .scene--statute .sc-imprint{opacity:1;transform:rotate(-14deg)}
}
/* asia */
.scene--asia .sc-land{fill:#E9E6F2;stroke:#fff;stroke-width:.8}
.scene--asia .sc-cty{fill:var(--c);fill-opacity:.55;stroke:#1A1830;stroke-width:.7;cursor:pointer;transition:fill-opacity .3s}
.scene--asia .sc-cty.is-on{fill-opacity:.95}
.scene--asia .sc-arc{stroke:#6B55BE;stroke-width:1.4;opacity:.55;transition:opacity .3s,stroke-width .3s}
.scene--asia .sc-arc.is-on{opacity:1;stroke-width:2.2}
.scene--asia .sc-end{transition:r .25s}
.scene--asia .sc-end.is-on{r:6.5}
.scene--asia .sc-city{fill:var(--on-paper)}
.scene--asia .sc-home-ring{transform-box:fill-box;transform-origin:center;opacity:0}
.scene--asia.is-idle .sc-home-ring{animation:sc-ping 2.4s ease-out infinite}
.scene--asia .sc-k,.scene--asia .sc-v{transition:opacity .2s}
.scene--asia .sc-swap .sc-k,.scene--asia .sc-swap .sc-v{opacity:0}
@keyframes sc-ping{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
/* wordmark: one grid, so every letter shares the same top and bottom line; BENGALURU spans the same width */
.mw{display:inline-flex;flex-direction:column;gap:7px}
.mw-svg{display:block;height:24px;width:auto;overflow:visible}
.mw-sub{display:flex;justify-content:space-between;letter-spacing:0;margin-top:0;line-height:1}
.foot .mw-svg{color:#F1EFF9}
@media(max-width:420px){.mw-svg{height:20px}.mw{gap:6px}}
/* big lockup: CSR DIODE and 360° APPROACH run exactly the width of the CSR monogram */
.ph-lockup{display:inline-flex;flex-direction:column;align-items:stretch;gap:clamp(12px,1.4vw,16px)}
.ph-word{display:block;color:var(--on-paper)}
.ph-word-svg{display:block;width:100%;height:auto;overflow:visible}
.ph-tag{padding-left:0;letter-spacing:0}
.ph-tag-l{display:flex;justify-content:space-between;line-height:1.1}
.ph-tag-l .sp{width:.35em}
.ph-word,.ph-tag{width:0;min-width:100%}
.ph-lockup{align-self:flex-start;width:max-content;max-width:100%}