:root{
  --horizon:#003258; --sky:#0098C8; --yellow:#FEC340; --pink:#FF5CBB;
  /* safe area (notch / home indicator) : 0 on desktop, real values on phones thanks to viewport-fit=cover */
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  /* the box the stage must fit in = the *visible* viewport minus the safe area.
     100dvh is the height actually visible once the browser toolbars are on screen; 100vh (the fallback) is the
     height with the toolbars hidden, which used to push the bottom of the stage behind the iOS/Android toolbar. */
  --vw:100vw; --vh:100vh;
  --vw:100dvw; --vh:100dvh;
  --bw:calc(var(--vw) - var(--sal) - var(--sar));
  --bh:calc(var(--vh) - var(--sat) - var(--sab));
  /* a side gutter (up to 64px, ~4% of the width) is kept outside the stage so the content never runs into the progress line on the right of small laptops */
  --gutter:min(64px, 4vw);
  --u:min(calc((var(--bw) - var(--gutter)) / 1920), calc(var(--bh) / 1080));
}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;position:fixed;inset:0;overflow:hidden;background:#5aa6dc;font-family:"Pluto",system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
/* the stage is centred in the safe box, not in the raw viewport, so the nav never sits under a notch */
.stage{position:fixed;left:calc(50% + (var(--sal) - var(--sar))/2);top:calc(50% + (var(--sat) - var(--sab))/2);width:calc(var(--u)*1920);height:calc(var(--u)*1080);transform:translate(-50%,-50%);pointer-events:none}
.panel{position:absolute;inset:0;will-change:transform,opacity}
.rv{will-change:opacity,transform,filter}
a{color:inherit;text-decoration:none}
/* the CIEL logo in the nav takes you back to the hero */
.nav .logo[data-top],.mnav .logo[data-top]{pointer-events:auto;cursor:pointer}

/* nav : the print nav bar, reused as the site nav */
.nav{position:absolute;left:0;top:0;width:100%;height:calc(var(--u)*120)}
.nav .logo{position:absolute;left:calc(var(--u)*90);top:calc(var(--u)*36);height:calc(var(--u)*50);cursor:pointer;pointer-events:auto}
.nav .tabs{position:absolute;left:calc(var(--u)*285);top:calc(var(--u)*42);display:flex;gap:calc(var(--u)*34)}
.nav .tab{font-size:calc(var(--u)*14);line-height:1.2;width:calc(var(--u)*128);font-weight:400;padding-bottom:calc(var(--u)*8);cursor:pointer;pointer-events:auto}
.nav .tab.on{font-weight:500;color:var(--sky)!important;box-shadow:inset 0 calc(var(--u)*-2) 0 var(--sky)}
.nav .rule{position:absolute;left:calc(var(--u)*90);right:calc(var(--u)*90);top:calc(var(--u)*114);height:1px}
.nav .pill{position:absolute;right:calc(var(--u)*90);top:calc(var(--u)*44);font-size:calc(var(--u)*14);font-weight:500;padding:calc(var(--u)*9) calc(var(--u)*18);border-radius:999px;letter-spacing:.02em}
.nav.light .tab{color:var(--horizon)} .nav.light .rule{background:var(--horizon)} .nav.light .pill{background:var(--horizon);color:#fff}
.nav.dark .tab{color:#fff} .nav.dark .rule{background:rgba(255,255,255,.55)} .nav.dark .pill{background:#fff;color:var(--horizon)}

/* hero */
.hero-logo{position:absolute;right:calc(var(--u)*92);top:calc(var(--u)*92);text-align:right;color:#fff}
.hero-logo img{height:calc(var(--u)*146);display:block;margin-left:auto}
.hero-logo span{display:block;font-weight:300;font-size:calc(var(--u)*30);margin-top:calc(var(--u)*6)}
.hero-title{position:absolute;right:calc(var(--u)*92);top:calc(var(--u)*640);text-align:right;color:#fff}
.hero-title h1{margin:0;font-weight:300;font-size:calc(var(--u)*78);line-height:1.06;letter-spacing:.01em}
.hero-title p{margin:calc(var(--u)*26) 0 0;font-weight:300;font-size:calc(var(--u)*36);line-height:1.2}
.cue{position:absolute;left:50%;bottom:calc(var(--u)*46);transform:translateX(-50%);color:#fff;font-size:calc(var(--u)*14);letter-spacing:.25em;text-transform:uppercase;font-weight:400;text-align:center}
.cue i{display:block;margin:calc(var(--u)*12) auto 0;width:1px;height:calc(var(--u)*46);background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.cue i b{position:absolute;left:0;width:1px;height:40%;background:#fff}

/* at a glance */
.h1{position:absolute;margin:0;font-weight:300;font-size:calc(var(--u)*55);letter-spacing:.01em;text-transform:uppercase;line-height:1.12}
.glance-title{left:calc(var(--u)*90);top:calc(var(--u)*168);color:var(--horizon)}
.grid{position:absolute;left:calc(var(--u)*90);top:calc(var(--u)*268);width:calc(var(--u)*1740);height:calc(var(--u)*770);display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);gap:calc(var(--u)*16)}
.tile{border-radius:calc(var(--u)*22);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--horizon);padding:calc(var(--u)*24);overflow:hidden}
.frost{background:rgba(255,255,255,.66);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.navy{background:linear-gradient(160deg,#003258 0%,#004a7c 100%);color:#fff}
.skyt{background:linear-gradient(160deg,#0098C8 0%,#3db6e0 100%);color:#fff}
.fig{font-family:"PlutoCond","Pluto";font-weight:400;font-size:calc(var(--u)*118);line-height:.92;white-space:nowrap}
.fig .u{font-family:"Pluto";font-weight:300;font-size:calc(var(--u)*50)}
.fig sup{font-family:"Pluto";font-weight:300;font-size:calc(var(--u)*50);vertical-align:top;position:relative;top:calc(var(--u)*4)}
.fig.xl{font-size:calc(var(--u)*170)}
.fig.sm{font-size:calc(var(--u)*84)}
.lab{font-weight:300;font-size:calc(var(--u)*24);line-height:1.2;margin-top:calc(var(--u)*10)}
.purpose{align-items:flex-start;text-align:left;justify-content:flex-start;padding:calc(var(--u)*34) calc(var(--u)*30)}
.purpose small{font-weight:500;font-size:calc(var(--u)*15);letter-spacing:.18em;text-transform:uppercase;color:var(--yellow)}
.purpose .pq{text-wrap:balance;font-weight:300;font-size:calc(var(--u)*37);line-height:1.12;margin:calc(var(--u)*16) 0 calc(var(--u)*26)}
.purpose hr{width:100%;border:0;height:1px;background:rgba(255,255,255,.35);margin:0 0 calc(var(--u)*24)}
.purpose ul{list-style:none;margin:calc(var(--u)*12) 0 0;padding:0;font-weight:300;font-size:calc(var(--u)*22);line-height:1.55}

/* chairperson */
.chair-title{left:calc(var(--u)*1080);top:calc(var(--u)*352);color:var(--sky)}
.qmark{position:absolute;left:calc(var(--u)*1080);top:calc(var(--u)*520);color:var(--yellow);font-weight:500;font-size:calc(var(--u)*150);line-height:1}
.qline{position:absolute;left:calc(var(--u)*1190);color:#fff;font-weight:300;font-size:calc(var(--u)*58);line-height:1;white-space:nowrap}
.qline b{color:var(--yellow);font-weight:500}
.person{position:absolute;color:#fff;font-weight:500;font-size:calc(var(--u)*50);line-height:1.02;letter-spacing:.02em}
.btn{position:absolute;font-size:calc(var(--u)*16);font-weight:500;letter-spacing:.01em;text-transform:none;border-radius:999px;padding:calc(var(--u)*14) calc(var(--u)*28);pointer-events:auto;white-space:nowrap}
.btn em{font-style:normal;margin-left:calc(var(--u)*10)}
.btn{cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.btn.out-sky{color:#fff;border:1.5px solid var(--sky)} .btn.out-sky em{color:var(--sky)}
.btn.out-sky:hover{background:var(--sky);color:#fff} .btn.out-sky:hover em{color:#fff}
.btn.fill:hover{background:var(--sky)}
.btn.out:hover{background:var(--horizon);color:#fff}
.btn.fill{background:var(--horizon);color:#fff}
.btn.out{color:var(--horizon);border:1.5px solid var(--horizon)}
.btn.white{background:#fff;color:var(--horizon)}

/* CEO */
.ceo-title{left:calc(var(--u)*90);top:calc(var(--u)*300);color:var(--horizon)}
.ceo-name{position:absolute;left:calc(var(--u)*90);top:calc(var(--u)*470);color:var(--sky);font-weight:500;font-size:calc(var(--u)*30);letter-spacing:.04em}
.ceo-note{position:absolute;left:calc(var(--u)*90);top:calc(var(--u)*530);width:calc(var(--u)*700);color:#003258;font-weight:300;font-size:calc(var(--u)*22);line-height:1.45}
.window{position:absolute;left:calc(var(--u)*930);top:calc(var(--u)*250);width:calc(var(--u)*880);height:calc(var(--u)*720);clip-path:url(#ciel-window);background:#cfe3ef center/cover no-repeat;pointer-events:auto;cursor:pointer}
.play{position:absolute;left:calc(var(--u)*(930 + 440 - 56));top:calc(var(--u)*(250 + 420 - 56));width:calc(var(--u)*112);height:calc(var(--u)*112);border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 calc(var(--u)*10) calc(var(--u)*30) rgba(0,50,88,.25)}
.play::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:calc(var(--u)*20) 0 calc(var(--u)*20) calc(var(--u)*32);border-color:transparent transparent transparent var(--horizon)}
.badge{position:absolute;left:calc(var(--u)*1580);top:calc(var(--u)*190);background:var(--pink);color:#fff;font-weight:500;font-size:calc(var(--u)*15);letter-spacing:.06em;text-transform:uppercase;text-align:center;line-height:1.25;padding:calc(var(--u)*14) calc(var(--u)*20);border-radius:calc(var(--u)*10)}

/* sustainability opener (intercalaire) */
.veil{position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 12% 14%, rgba(0,50,88,.42), rgba(0,50,88,0) 70%)}
.kicker{position:absolute;left:calc(var(--u)*90);top:calc(var(--u)*150);color:#fff;font-size:calc(var(--u)*15);letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.sus-title{left:calc(var(--u)*90);top:calc(var(--u)*190);color:#fff}
.sus-text{position:absolute;left:calc(var(--u)*90);top:calc(var(--u)*335);width:calc(var(--u)*640);color:#fff;font-weight:300;font-size:calc(var(--u)*22);line-height:1.42}

/* folio / progress */
.folio{position:fixed;right:calc(var(--u)*24);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*16);pointer-events:none}
.folio .txt{writing-mode:vertical-rl;transform:rotate(180deg);font-size:calc(var(--u)*13);letter-spacing:.14em;font-weight:300}
.folio .bar{width:1.5px;height:calc(var(--u)*240);position:relative}
.folio .bar b{position:absolute;left:0;top:0;width:100%}
.folio .num{font-size:calc(var(--u)*13);font-weight:400;letter-spacing:.08em}

/* v3 : At a Glance rebuilt from the design (exact positions, design px) */
.t{position:absolute;line-height:1.236;white-space:pre}
.vt{writing-mode:vertical-rl;transform:rotate(180deg);text-align:start;white-space:nowrap}
.tile3{position:absolute;border-radius:calc(var(--u)*30);overflow:hidden;pointer-events:auto}
.card .t{white-space:pre}
.rule-v{position:absolute;width:1px;background:#0098C8}
.rule-h{position:absolute;height:1px;background:#0098C8}
.legend{position:absolute;width:calc(var(--u)*22);height:calc(var(--u)*14);-webkit-mask:var(--win) center/100% 158.7% no-repeat;mask:var(--win) center/100% 158.7% no-repeat}
.bar{position:absolute;border-radius:calc(var(--u)*10.3);transform-origin:50% 100%}
.donuts{position:absolute;overflow:visible}
.video .vshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,50,88,0) 55%,rgba(0,50,88,.55) 100%)}
.playbtn{position:absolute;width:calc(var(--u)*120);height:calc(var(--u)*120);border-radius:50%;background:rgba(255,255,255,.92)}
.playbtn::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:calc(var(--u)*22) 0 calc(var(--u)*22) calc(var(--u)*36);border-color:transparent transparent transparent #003258}
.badge3{position:absolute;background:#FF5CBB;color:#fff;font-weight:500;font-size:calc(var(--u)*15);letter-spacing:.06em;text-transform:uppercase;padding:calc(var(--u)*12) calc(var(--u)*18);border-radius:calc(var(--u)*10)}
.arrowc{position:absolute;width:calc(var(--u)*52);height:calc(var(--u)*52);border-radius:50%;background:#003258;color:#fff;font-style:normal;font-size:calc(var(--u)*24);display:flex;align-items:center;justify-content:center}
a.tile3{cursor:pointer}
.lightwrap{position:absolute;inset:-60vh -60vw}   /* wider than the stage : no box edge visible when the stage is smaller than the window */
/* the light veil bleeds well past the stage and fades to nothing, so its edge never reads as a box */
.lightveil{position:absolute;left:-60vw;right:-60vw;top:-60vh;bottom:-60vh;opacity:0;background:radial-gradient(ellipse 42% 40% at 50% 52%, rgba(255,255,255,.32), rgba(255,255,255,.16) 55%, rgba(255,255,255,0) 100%)}
.badge3.small{font-size:calc(var(--u)*12);padding:calc(var(--u)*8) calc(var(--u)*12)}
.arrowc{font-size:calc(var(--u)*20)}
.arrowc.big{width:calc(var(--u)*76);height:calc(var(--u)*76);font-size:calc(var(--u)*26)}

/* ---------- mobile (portrait) : stage of 390 x 844 design units ---------- */
:root{--m:min(calc(var(--bw) / 390), calc(var(--bh) / 844))}
html,body{touch-action:none;overscroll-behavior:none}
.stage.m{width:calc(var(--m)*390);height:calc(var(--m)*844);display:none}
/* phones held sideways : neither stage is usable at ~390px of height, ask for portrait instead */
.rotate{display:none;position:fixed;inset:0;z-index:60;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center;color:#fff;background:#003258;font-weight:300;font-size:15px;letter-spacing:.04em;padding:24px}
.rotate b{display:block;width:34px;height:56px;border:2px solid rgba(255,255,255,.8);border-radius:7px;margin:0 auto 6px;animation:rot 2.4s ease-in-out infinite}
@keyframes rot{0%,20%{transform:rotate(-90deg)}50%,70%{transform:rotate(0)}100%{transform:rotate(-90deg)}}
.rotate span{display:none}
@media (pointer:coarse) and (orientation:landscape) and (max-height:520px){.rotate{display:flex} .rotate .ph{display:block}}

@media (prefers-reduced-motion:reduce){.rotate b{animation:none;transform:none}}
body.mobile .stage.d, body.mobile .folio{display:none}
body.mobile .stage.m{display:block}
.mt{position:absolute;white-space:pre;line-height:1.15}
.mvt{writing-mode:vertical-rl;transform:rotate(180deg);text-align:start;white-space:nowrap}
.mtile{position:absolute;border-radius:calc(var(--m)*16);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#003258;pointer-events:auto}
.mtile.top{justify-content:flex-start;padding-top:calc(var(--m)*18)}
.mtile.mleft,.mtile.mcard{display:block;text-align:left}
.mfig{font-family:"PlutoCond","Pluto";font-weight:400;line-height:.95;white-space:nowrap}
.mfig .u{font-family:"Pluto";font-weight:300;font-size:.45em}
.mfig .u.tl{font-size:.6em}
.mfig sup{font-family:"Pluto";font-weight:400;font-size:.42em;vertical-align:top;position:relative;top:.1em}
.mlab{font-weight:300;line-height:1.2;margin-top:calc(var(--m)*6)}
.myears{font-weight:700;font-size:calc(var(--m)*11);color:#003258;margin-top:calc(var(--m)*4)}
.mrenew{display:flex;align-items:flex-start;gap:calc(var(--m)*8);position:absolute;left:calc(var(--m)*22);top:calc(var(--m)*18);text-align:left}
.mpct{font-weight:400;font-size:calc(var(--m)*40);color:#fff;line-height:1;margin-top:calc(var(--m)*10)}
.mrenew .mlab{margin-top:calc(var(--m)*4)}
.mur{font-weight:400;font-size:.58em}
.mrule-v{position:absolute;width:1px;background:#0098C8}
.mrule-h{position:absolute;height:1px;background:#0098C8}
.mlegend{position:absolute;width:calc(var(--m)*13);height:calc(var(--m)*8.2);-webkit-mask:var(--win) center/100% 158.7% no-repeat;mask:var(--win) center/100% 158.7% no-repeat}
.mbar{position:absolute;border-radius:calc(var(--m)*6);transform-origin:50% 100%}
.mnav{position:absolute;left:0;top:0;width:100%;height:calc(var(--m)*64)}
.mnav .logo{position:absolute;left:calc(var(--m)*20);top:calc(var(--m)*18);height:calc(var(--m)*28);cursor:pointer;pointer-events:auto}
.mnav .mbtn{position:absolute;right:calc(var(--m)*20);top:calc(var(--m)*12);width:calc(var(--m)*40);height:calc(var(--m)*40);border-radius:50%;pointer-events:auto;cursor:pointer}
.mbtn::before,.mbtn::after{content:"";position:absolute;left:30%;right:30%;height:1.5px;background:currentColor}
.mbtn::before{top:43%} .mbtn::after{top:57%}
.mnav .rule{position:absolute;left:calc(var(--m)*20);right:calc(var(--m)*20);top:calc(var(--m)*64);height:1px}
.mnav .prog{position:absolute;left:calc(var(--m)*20);top:calc(var(--m)*63);height:3px;background:#0098C8;border-radius:2px}
.mnav.light .rule{background:rgba(0,50,88,.3)} .mnav.light .mbtn{background:#003258;color:#fff}
.mnav.dark .rule{background:rgba(255,255,255,.45)} .mnav.dark .mbtn{background:#fff;color:#003258}
.mhero-logo{position:absolute;right:calc(var(--m)*24);top:calc(var(--m)*40);text-align:right;color:#fff}
.mhero-logo img{height:calc(var(--m)*68);display:block;margin-left:auto}
.mhero-logo span{display:block;font-weight:300;font-size:calc(var(--m)*15);margin-top:calc(var(--m)*4)}
.mhero-title{position:absolute;right:calc(var(--m)*24);top:calc(var(--m)*560);text-align:right;color:#fff;font-weight:300;font-size:calc(var(--m)*40);line-height:1.06}
.mhero-sub{position:absolute;right:calc(var(--m)*24);top:calc(var(--m)*666);text-align:right;color:#fff;font-weight:300;font-size:calc(var(--m)*19);line-height:1.2}
.mcue{position:absolute;left:50%;bottom:calc(var(--m)*30);transform:translateX(-50%);color:#fff;font-size:calc(var(--m)*11);letter-spacing:.25em;text-transform:uppercase;text-align:center}
.mcue i{display:block;margin:calc(var(--m)*10) auto 0;width:1px;height:calc(var(--m)*36);background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.mcue i b{position:absolute;left:0;width:1px;height:40%;background:#fff}
.mshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,40,75,0) 38%,rgba(0,40,75,.82) 56%,#00284b 74%)}
.mshade.hi{background:linear-gradient(180deg,rgba(0,40,75,0) 33%,rgba(0,40,75,.84) 50%,#00284b 66%)}
/* the mobile stage can be narrower than the screen (Safari toolbars, iPad) : let the panel-wide tints bleed over the side bands */
body.mobile .mshade{left:-50vw;right:-50vw}
.mbtn2{position:absolute;color:#fff;font-size:calc(var(--m)*13.5);font-weight:500;letter-spacing:.01em;text-transform:none;border:1.5px solid #0098C8;border-radius:999px;padding:calc(var(--m)*11) calc(var(--m)*20);pointer-events:auto}
.mbtn2 em{font-style:normal;color:#0098C8}
.mplay{position:absolute;left:50%;top:50%;width:calc(var(--m)*56);height:calc(var(--m)*56);margin:calc(var(--m)*-28) 0 0 calc(var(--m)*-28);border-radius:50%;background:rgba(255,255,255,.92)}
.mplay::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:calc(var(--m)*10) 0 calc(var(--m)*10) calc(var(--m)*16);border-color:transparent transparent transparent #003258}
.mbadge{position:absolute;background:#FF5CBB;color:#fff;font-weight:500;font-size:calc(var(--m)*8.5);letter-spacing:.06em;text-transform:uppercase;padding:calc(var(--m)*5) calc(var(--m)*8);border-radius:calc(var(--m)*6)}
.marrow{position:absolute;width:calc(var(--m)*48);height:calc(var(--m)*48);border-radius:50%;background:#003258;color:#fff;font-style:normal;font-size:calc(var(--m)*16);display:flex;align-items:center;justify-content:center}
.mmenu{position:fixed;inset:0;z-index:20;display:none;flex-direction:column;background:linear-gradient(180deg,#f6fbfe 0%,#d6edf8 100%);padding:calc(var(--m)*96 + var(--sat)) calc(var(--m)*28 + var(--sar)) calc(var(--m)*40 + var(--sab)) calc(var(--m)*28 + var(--sal));color:#003258}
body.menu-open .mmenu{display:flex}
.mmenu-logo{cursor:pointer;position:absolute;left:calc(var(--m)*20 + var(--sal));top:calc(var(--m)*18 + var(--sat));height:calc(var(--m)*28)}
.mclose{position:absolute;right:calc(var(--m)*22 + var(--sar));top:calc(var(--m)*24 + var(--sat));font-size:calc(var(--m)*12);font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.mmenu ol{list-style:none;margin:0;padding:0}
.mmenu li{display:flex;align-items:baseline;font-weight:300;font-size:calc(var(--m)*22);line-height:1.2;padding:calc(var(--m)*12) 0;border-bottom:1px solid rgba(0,50,88,.12);cursor:pointer}
.mmenu li small{flex:none;display:inline-block;width:calc(var(--m)*34);font-weight:500;font-size:calc(var(--m)*11);color:#0098C8;letter-spacing:.08em}
.mmenu li.off{opacity:.35;cursor:default}
.mfull{margin-top:auto;align-self:flex-start;background:#003258;color:#fff;font-weight:500;font-size:calc(var(--m)*13);padding:calc(var(--m)*12) calc(var(--m)*22);border-radius:999px}

/* ---------- v5 : Business Principles ---------- */
.nb{white-space:nowrap}
.bp-head{position:absolute;left:calc(var(--u)*90);top:calc(var(--u)*162);display:flex;align-items:center;gap:calc(var(--u)*26)}
.bp-title{margin:0;color:#fff;font-weight:300;font-size:calc(var(--u)*55);line-height:1.236;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.bp-head .badge3{position:static}
.bp-links{position:absolute;left:calc(var(--u)*90);top:calc(var(--u)*906);display:flex;gap:calc(var(--u)*16)}
.bp-links .btn{position:static;cursor:pointer}
.bpcard{position:absolute;pointer-events:auto;cursor:default}
.bpc,.mbpc{--h:0;position:absolute;inset:0;overflow:hidden;
  background:rgb(255 255 255 / calc(.075 + .925*var(--h)));
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / calc(.20*(1 - var(--h))))}
.bpc{border-radius:calc(var(--u)*30)}
.bpn{position:absolute;left:calc(var(--u)*40);top:calc(var(--u)*40);font-weight:500;font-size:calc(var(--u)*18);letter-spacing:.14em;color:color-mix(in srgb, #0098C8 calc(var(--h)*100%), #FEC340)}
.bpi,.mbpi{position:absolute;color:color-mix(in srgb, #0098C8 calc(var(--h)*100%), #63c3ea)}
.bpsvg{display:block;width:100%;height:100%;overflow:visible}
.bpt{position:absolute;left:calc(var(--u)*40);right:calc(var(--u)*34);top:calc(var(--u)*300);margin:0;font-weight:300;font-size:calc(var(--u)*30);line-height:1.24;text-wrap:pretty;color:color-mix(in srgb, #003258 calc(var(--h)*100%), #ffffff)}
.mbprow{position:absolute}
.mbpc{border-radius:calc(var(--m)*16)}
.mbpx{position:absolute;left:calc(var(--m)*104);right:calc(var(--m)*14);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center}
.mbpn{display:block;font-weight:500;font-size:calc(var(--m)*10.5);letter-spacing:.14em;color:#FEC340;margin-bottom:calc(var(--m)*4)}
.mbpt{margin:0;font-weight:300;font-size:calc(var(--m)*14);line-height:1.24;color:#fff;text-wrap:pretty}

/* ---------- v6 : CFO, Strategy & Investment, Sustainability (Dev) ---------- */
.cfo-title{left:calc(var(--u)*90);top:calc(var(--u)*352);color:var(--sky)}
.ptile .vshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,40,75,0) 52%,rgba(0,40,75,.88) 100%)}
.stcard{position:absolute;pointer-events:auto}
.stc{--h:0;position:absolute;inset:0;border-radius:calc(var(--u)*30);overflow:hidden;
  background:color-mix(in srgb, #003258 calc(var(--h)*100%), rgb(255 255 255 / .9));
}
.stn{position:absolute;left:calc(var(--u)*36);top:calc(var(--u)*38);font-weight:500;font-size:calc(var(--u)*18);letter-spacing:.14em;color:color-mix(in srgb, #FEC340 calc(var(--h)*100%), #0098C8)}
.starr{position:absolute;right:calc(var(--u)*30);top:calc(var(--u)*28);width:calc(var(--u)*52);height:calc(var(--u)*52);border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:calc(var(--u)*22);
  background:color-mix(in srgb, #ffffff calc(var(--h)*100%), #003258);color:color-mix(in srgb, #003258 calc(var(--h)*100%), #ffffff)}
.stt{position:absolute;left:calc(var(--u)*36);right:calc(var(--u)*36);bottom:calc(var(--u)*40);margin:0;font-weight:300;font-size:calc(var(--u)*34);line-height:1.18;text-wrap:pretty;color:color-mix(in srgb, #ffffff calc(var(--h)*100%), #003258)}
.circles{position:absolute;inset:0;pointer-events:none}
.circ{position:absolute;border-radius:50%;opacity:0}
.devcut{position:absolute;display:block;-webkit-mask-image:linear-gradient(180deg,#000 94%,transparent 100%);mask-image:linear-gradient(180deg,#000 94%,transparent 100%)}
.mdevcut{-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 99%);mask-image:linear-gradient(180deg,#000 78%,transparent 99%)}
.yrule{position:absolute;background:#FEC340}
.devbody{position:absolute;margin:0;width:calc(var(--u)*640);color:#fff;font-weight:400;font-size:calc(var(--u)*17);line-height:calc(var(--u)*24)}
.mstrow{position:absolute;pointer-events:auto}
.mstc{--h:0;position:absolute;inset:0;border-radius:calc(var(--m)*16);overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--m)*16) 0 calc(var(--m)*18);background:rgb(255 255 255 / .9)}
.mstn{display:block;font-weight:500;font-size:calc(var(--m)*10.5);letter-spacing:.14em;color:#0098C8;margin-bottom:calc(var(--m)*4)}
.mstt{margin:0;font-weight:300;font-size:calc(var(--m)*15.5);line-height:1.2;color:#003258;max-width:calc(var(--m)*250)}
.mstarr{flex:none;width:calc(var(--m)*40);height:calc(var(--m)*40);border-radius:50%;background:#003258;color:#fff;font-style:normal;font-size:calc(var(--m)*15);display:flex;align-items:center;justify-content:center}
.mbtn3{position:absolute;background:#003258;color:#fff;font-size:calc(var(--m)*13.5);font-weight:500;letter-spacing:.01em;text-transform:none;border-radius:999px;padding:calc(var(--m)*12) calc(var(--m)*22);pointer-events:auto}
.mbtn3 em{font-style:normal;color:#0098C8}

/* ---------- v9 : Sustainability pillars, sober (client figures as written) ---------- */
.psw{position:absolute;left:calc(var(--u)*90);top:calc(var(--u)*120);display:flex;gap:calc(var(--u)*12)}
.pp{pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:calc(var(--u)*9);font-size:calc(var(--u)*15);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#003258;
  border-radius:999px;padding:calc(var(--u)*8) calc(var(--u)*18);box-shadow:inset 0 0 0 1.5px rgba(0,50,88,.5);white-space:nowrap;transition:background .3s,color .3s}
.pp b{font-weight:700;color:#003258}   /* v3.8 : inactive numbers in navy — the pillar colours (sky, yellow) vanished on the pale background */
.pp.on{background:var(--pc);color:var(--pt);box-shadow:none}
.pp.on b{color:var(--pt)}
.pp:not(.on):hover{background:#003258;color:#fff} .pp:not(.on):hover b{color:#fff}
.mpsw{position:absolute;right:calc(var(--m)*20);top:calc(var(--m)*70);display:flex;gap:calc(var(--m)*6)}
.mpsw .pp{width:calc(var(--m)*26);height:calc(var(--m)*26);padding:0;justify-content:center;font-size:calc(var(--m)*10.5);font-weight:700;letter-spacing:0}
.fc{position:absolute;display:flex;align-items:center;gap:calc(var(--u)*26);padding:0 calc(var(--u)*34);border-radius:calc(var(--u)*30);background:#fff;
  box-shadow:inset 0 0 0 1.5px #d9e5ec, 0 calc(var(--u)*14) calc(var(--u)*34) rgba(0,50,88,.06);pointer-events:auto}
.fc .ic{flex:none;width:calc(var(--u)*64);height:calc(var(--u)*64)}
.fc .ff{font-weight:300;font-size:calc(var(--u)*54);line-height:1;color:#003258;white-space:nowrap}
.fc .ff .u{font-size:.42em;color:#0098C8}
.fc .fl{margin-top:calc(var(--u)*8);font-weight:400;font-size:calc(var(--u)*20);color:#003258}
.fc .fs{margin-top:calc(var(--u)*4);font-weight:400;font-size:calc(var(--u)*15);color:#0098C8}
.chipsbox{position:absolute}
.chips{display:flex;flex-wrap:wrap;gap:calc(var(--u)*12)}
.chip{display:inline-flex;align-items:center;gap:calc(var(--u)*12);padding:calc(var(--u)*11) calc(var(--u)*22) calc(var(--u)*11) calc(var(--u)*16);border-radius:999px;background:rgb(255 255 255 / .7);
  box-shadow:inset 0 0 0 1.5px #d2dfe7;font-weight:400;font-size:calc(var(--u)*18);color:#003258;white-space:nowrap}
.chip .ci{width:calc(var(--u)*30);height:calc(var(--u)*30)}
.ph,.mph{position:absolute;overflow:hidden}
.ph{border-radius:calc(var(--u)*30)}
.mfc{position:absolute;display:block;padding:calc(var(--m)*13) calc(var(--m)*14);border-radius:calc(var(--m)*16);background:#fff;
  box-shadow:inset 0 0 0 1px #d9e5ec, 0 calc(var(--m)*6) calc(var(--m)*16) rgba(0,50,88,.06)}
.mfc .ic{position:absolute;right:calc(var(--m)*9);top:calc(var(--m)*9);width:calc(var(--m)*22);height:calc(var(--m)*22)}
.mfc .ff{font-weight:300;font-size:calc(var(--m)*27);line-height:1;color:#003258;white-space:nowrap}
.mfc .ff .u{font-size:.45em;color:#0098C8}
.mfc .fl{margin-top:calc(var(--m)*4);font-weight:400;font-size:calc(var(--m)*11.5);line-height:1.25;color:#003258}
.mfc .fs{margin-top:calc(var(--m)*2);font-weight:400;font-size:calc(var(--m)*9.5);line-height:1.25;color:#0098C8}
.mchipsbox{position:absolute}
.mchips{display:flex;flex-wrap:wrap;gap:calc(var(--m)*6)}
.mchips .chip{gap:calc(var(--m)*6);padding:calc(var(--m)*5) calc(var(--m)*10) calc(var(--m)*5) calc(var(--m)*7);font-size:calc(var(--m)*10.5);box-shadow:inset 0 0 0 1px #d2dfe7}
.mchips .chip .ci{width:calc(var(--m)*16);height:calc(var(--m)*16)}
.mph{border-radius:calc(var(--m)*16)}

/* loading veil */
.stage .panel{opacity:0;visibility:hidden}
#veil{position:fixed;inset:0;z-index:60;background:#003258;display:flex;align-items:center;justify-content:center;transition:opacity .7s ease}
#veil{flex-direction:column;gap:28px}
#veil img{height:min(13vw,96px);opacity:.92;animation:veilpulse 1.6s ease-in-out infinite}
#veilmsg{margin:0;max-width:70vw;text-align:center;color:#0098C8;font-size:14px;line-height:1.5;font-weight:300;user-select:text}
@keyframes veilpulse{50%{opacity:.45}}
body.ready #veil{opacity:0;pointer-events:none}

/* ---------- v10 : header 'Discover the report', last screen + footer, contents layer ---------- */
:root{--win:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M%200.5255%200.1852%20C%200.2419%200.1988%200.0261%200.416%200.0011%200.7118%20C%20-0.0004%200.7261%20-0.0004%200.7718%200.0011%200.7854%20C%200.0018%200.7983%200.0039%200.8147%200.0039%200.8154%20C%200.0046%200.8154%200.0175%200.8111%200.0332%200.8061%20C%200.1576%200.764%200.2676%200.7333%200.3869%200.7054%20C%200.5384%200.6704%200.702%200.6468%200.8692%200.6354%20C%200.9135%200.6325%200.9836%200.6289%200.9979%200.6289%20C%201%200.6289%201%200.6289%201%200.6175%20C%200.9886%200.3553%200.7878%200.1723%200.5255%200.1852%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E")}
.nav .tabs{gap:calc(var(--u)*44)} .nav .tab{width:auto;white-space:nowrap;font-size:calc(var(--u)*16);line-height:1.22}
/* the two 'At a Glance' screens (sky gradient) : the active tab in white, the sky blue would vanish there. On the horizon-blue leader screens (v3.6 background) the sky blue of the print nav is back. */
#p1 .nav .tab.on,#p2 .nav .tab.on,#gnav[data-panel="p1"] .tab.on,#gnav[data-panel="p2"] .tab.on{color:#fff!important;box-shadow:inset 0 calc(var(--u)*-2) 0 #fff}
.nav .pills{position:absolute;right:calc(var(--u)*90);top:calc(var(--u)*44);display:flex;gap:calc(var(--u)*10)}
.nav .pill{position:static;cursor:pointer;white-space:nowrap;font-size:calc(var(--u)*15);padding:calc(var(--u)*10) calc(var(--u)*20);transition:background .3s,color .3s,box-shadow .3s}
.nav.light .pill.alt{background:transparent;color:var(--horizon);box-shadow:inset 0 0 0 1.5px var(--horizon)}
.nav.dark .pill.alt{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85)}
.nav.light .pill.alt:hover{background:var(--horizon);color:#fff}
.nav.dark .pill.alt:hover{background:#fff;color:var(--horizon)}
.mpills{margin-top:auto;display:flex;flex-wrap:wrap;gap:calc(var(--m)*8)}
.mpills .mfull{margin-top:0;cursor:pointer}
.mpills .mfull.alt{background:transparent;color:#003258;box-shadow:inset 0 0 0 1.5px #003258}
/* last screen */
.dbtns,.mdbtns{position:absolute;display:flex;gap:calc(var(--u)*14)}
.dbtns .btn{position:static;cursor:pointer;transition:background .3s,color .3s}
.btn.out-w{color:#fff;border:1.5px solid rgba(255,255,255,.85)} .btn.out-w em{color:#fff}
.btn.out-w:hover{background:#fff;color:var(--horizon)}
.btn.white:hover{background:var(--sky);color:#fff}
.dch{position:absolute;cursor:pointer}
.dwin{position:absolute;left:0;top:0;width:100%;aspect-ratio:1}
.dh,.dph{position:absolute;display:block;-webkit-mask:var(--win) center/100% 100% no-repeat;mask:var(--win) center/100% 100% no-repeat}
.dph{inset:0;background-repeat:no-repeat;filter:saturate(.8) brightness(.95);transition:filter .6s,transform .9s cubic-bezier(.22,1,.36,1)}
.dh{left:50%;top:50%;transform:translate(-50%,-50%)}
.dh1{width:128%;height:128%;background:rgba(255,255,255,.115)}
.dh2{width:156%;height:156%;background:rgba(255,255,255,.055)}
@keyframes dbreathe{from{transform:translate(-50%,-50%) scale(.985)}to{transform:translate(-50%,-50%) scale(1.048)}}
.dwin{transition:transform .9s cubic-bezier(.22,1,.36,1)}
.dch:hover .dph{filter:none}
.dn{position:absolute;left:calc(var(--u)*6);top:calc(var(--u)*222);font-weight:500;font-size:calc(var(--u)*14);letter-spacing:.14em;color:rgba(255,255,255,.55);transition:color .4s}
.dt{position:absolute;left:calc(var(--u)*6);top:calc(var(--u)*248);font-weight:300;font-size:calc(var(--u)*19.5);line-height:1.22;white-space:nowrap;color:rgba(255,255,255,.88);transition:color .4s}
.dch:hover .dn{color:#0098C8} .dch:hover .dt{color:#fff}
.dfoot,.mdfoot{position:absolute;color:rgba(255,255,255,.62)}
.drule{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.28)}
.dfoot .dlogo{position:absolute;left:0;top:calc(var(--u)*40);height:calc(var(--u)*44)}
.dfoot .dcopy{position:absolute;left:calc(var(--u)*130);top:calc(var(--u)*53);font-size:calc(var(--u)*15);white-space:nowrap}
.dcopy b{font-weight:400;margin:0 .4em;color:rgba(255,255,255,.35)}
.dfoot .dmail{position:absolute;right:calc(var(--u)*210);top:calc(var(--u)*53);font-size:calc(var(--u)*15);color:#fff;white-space:nowrap}
.dtop{position:absolute;cursor:pointer;color:#fff;white-space:nowrap;display:flex;align-items:center}
.dtop em{font-style:normal;display:grid;place-items:center;border-radius:50%;background:#fff;color:#003258;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.dtop:hover em{transform:translateY(-4px)}
.dfoot .dtop{right:0;top:calc(var(--u)*42);font-size:calc(var(--u)*15);gap:calc(var(--u)*12)}
.dfoot .dtop em{width:calc(var(--u)*40);height:calc(var(--u)*40);font-size:calc(var(--u)*16)}
/* last screen, mobile */
.mdch{position:absolute;display:flex;align-items:center;gap:calc(var(--m)*12);border-bottom:1px solid rgba(255,255,255,.16);cursor:pointer}
.mdwin{position:relative;flex:none;width:calc(var(--m)*62);height:calc(var(--m)*62);margin:calc(var(--m)*-6) 0 calc(var(--m)*-10)}
.mdwin .dh1{width:122%;height:122%}
.mdn{flex:none;width:calc(var(--m)*20);font-weight:500;font-size:calc(var(--m)*10);letter-spacing:.12em;color:#0098C8}
.mdt{flex:1;font-weight:300;font-size:calc(var(--m)*14.5);line-height:1.2;color:#fff}
.mdch em{flex:none;font-style:normal;font-size:calc(var(--m)*14);color:rgba(255,255,255,.7)}
.mdbtns{gap:calc(var(--m)*8)}
.mbtn3w,.mbtn3o{font-size:calc(var(--m)*13);font-weight:500;letter-spacing:.01em;text-transform:none;border-radius:999px;padding:calc(var(--m)*12) calc(var(--m)*18);white-space:nowrap;cursor:pointer}
.mbtn3w{background:#fff;color:#003258} .mbtn3w em{font-style:normal;color:#0098C8}
.mbtn3o{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85)} .mbtn3o em{font-style:normal}
.mdfoot .dlogo{position:absolute;left:0;top:calc(var(--m)*18);height:calc(var(--m)*26)}
.mdfoot .dtop{right:0;top:calc(var(--m)*16);font-size:calc(var(--m)*12);gap:calc(var(--m)*8)}
.mdfoot .dtop em{width:calc(var(--m)*30);height:calc(var(--m)*30);font-size:calc(var(--m)*13)}
.mdfoot .dmail{position:absolute;left:0;top:calc(var(--m)*62);font-size:calc(var(--m)*12);color:#fff}
.mdfoot .dcopy{position:absolute;left:0;top:calc(var(--m)*66);font-size:calc(var(--m)*10.5);line-height:1.5}
/* the contents page, opened over the site : a plain fade */
#discover{position:fixed;inset:0;z-index:50;visibility:hidden;pointer-events:none;opacity:0;background:#003258;will-change:opacity;
  transition:opacity .45s ease,visibility 0s .45s}
body.disc-open #discover{visibility:visible;pointer-events:auto;opacity:1;transition:opacity .6s ease}
#discover iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;opacity:0}
#discover.show iframe{opacity:1;transition:opacity .4s ease}
#discover.instant,#discover.instant *{transition:none!important}
/* pillar switcher : a little more air under the header rule */
.psw{top:calc(var(--u)*130)}
.mpsw{top:calc(var(--m)*73)}

/* ---------- leaders : one shared background, people laid on top ---------- */
.lcut{position:absolute;display:block;-webkit-mask-image:linear-gradient(180deg,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,#000 92%,transparent 100%)}   /* v3.8p : bottom fade on all five leaders, desktop */
/* CE video card */
.vcard{background:rgba(0,40,75,.62);transition:background .3s}
.vcard:hover{background:rgba(0,152,200,.35)}
.vthumb{position:absolute;left:0;top:0;bottom:0;background:#00284b url(../assets/img/ceo-video-thumb.jpg) 50% 30%/cover no-repeat}
.playbtn.sm{left:50%;top:50%;width:calc(var(--u)*64);height:calc(var(--u)*64);margin:calc(var(--u)*-32) 0 0 calc(var(--u)*-32)}
.playbtn.sm::after{border-width:calc(var(--u)*12) 0 calc(var(--u)*12) calc(var(--u)*19)}
.mvcard{background:rgba(0,40,75,.65)}

/* locked nav (oct. 2026) : the header inside each screen is hidden ; #gnav, built by js/main.js, stays put above the screens */
.panel .nav,.panel .mnav{visibility:hidden}
#gnav{z-index:5;transition:opacity .4s}
.stage.d{--hdr0:calc(var(--u)*30);--hdr1:calc(var(--u)*125)} .stage.m{--hdr0:calc(var(--m)*30);--hdr1:calc(var(--m)*72)}
#gnav .logo,#gnav .tab,#gnav .pill,#gnav .mbtn{pointer-events:auto}

/* pillars without the topic chips (oct. 2026) : the four fact cards fill the column, stacked layout inside.
   v3.6 : one grid with the photos (cards 420 x 362, photos 860 x 362, gutter 20), figures a step smaller */
.fc.tall{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:0 calc(var(--u)*36)}
.fc.tall .ic{width:calc(var(--u)*64);height:calc(var(--u)*64);margin-bottom:calc(var(--u)*24)}
.fc.tall .ff{font-size:calc(var(--u)*74)}
.fc.tall .fl{margin-top:calc(var(--u)*12);font-size:calc(var(--u)*21);line-height:1.2}
.fc.tall .fs{margin-top:calc(var(--u)*6);font-size:calc(var(--u)*15)}

/* ======================================================================================
   v3.6 (28 oct. 2026) : rhythm of the leader screens
   - Chairperson -> Group CE and CFO -> Strategy & Investment : a sideways turn (same chapter), the background stays still
   - Dev Sewgobind : the three pillars as entry points (navigation only, no new content), outline pills on navy
   - mobile : the top of the two large portraits fades out instead of ending on the hard edge of the cutout file
   ====================================================================================== */
.pillars-lead{position:absolute;color:#0098C8;font-weight:400;font-size:calc(var(--u)*17);letter-spacing:.01em}
.psw.dk{position:absolute;left:auto;top:auto;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*10)}
.psw.dk .pp{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);padding:calc(var(--u)*10) calc(var(--u)*22) calc(var(--u)*10) calc(var(--u)*18);font-size:calc(var(--u)*15)}
.psw.dk .pp b{color:var(--pn)}
.psw.dk .pp:hover{background:var(--pc);color:var(--pt);box-shadow:none}
.psw.dk .pp:hover b{color:var(--pt)}
.mpsw.dk{left:calc(var(--m)*20);right:auto;top:auto;align-items:center;gap:calc(var(--m)*8)}
.mpsw.dk .pp{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);width:calc(var(--m)*30);height:calc(var(--m)*30)}
.mpsw.dk .mlead{color:#0098C8;font-weight:400;font-size:calc(var(--m)*11);margin-right:calc(var(--m)*4);white-space:nowrap}
.mpsw.dk .pp:hover{background:var(--pc);color:var(--pt);box-shadow:none}
/* the two cutout files (chair, CE) are cropped flat at the top of the hair ; on mobile, zoomed, that edge shows.
   Interim : a short fade. Real fix : re-cut the portraits with the whole head (see HANDOVER v3.6). */
body.mobile .stage.m .lcut{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 calc(var(--m)*34),#000 78%,transparent 99%);mask-image:linear-gradient(180deg,transparent 0,#000 calc(var(--m)*34),#000 78%,transparent 99%)}   /* v3.8 : bottom fade as .mdevcut */

/* ---------- v3.6 · pillar figures : rolling digits + drawn icons (js/main.js, "pillar figures") ---------- */
.fc .ic svg,.mfc .ic svg{display:block;width:100%;height:100%;fill:none;overflow:visible}
.ic g{stroke:#003861;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ic .th{stroke:#0097C7}
.odo{display:inline-flex;align-items:baseline;white-space:nowrap}
.odo .dg{display:inline-block;overflow:hidden;height:1em;line-height:1;vertical-align:baseline}
.odo .dg i{display:block;font-style:normal;will-change:transform}
.odo .dg i b{display:block;height:1em;line-height:1;font-weight:inherit}

/* ======================================================================================
   v3.7 (fork, 1 nov. 2026) : art-direction pass — less "generated site", more report
   - pillar figures : no card, no stroke icon ; label / figure / note under a hairline in the pillar colour
   - leaders : Tier 2 (CFO, Strategy, Dev) quote mark 110, plain white quote, name 40 ; Tier 1 unchanged
   - CFO : key-figures strip (numbers from At a Glance cont'd) ; Strategy : three update rows (links.js keys)
   - buttons sentence case ; hovers invert colour only ; chapter halos static ; no blur-in (js/main.js)
   ====================================================================================== */
/* pillar figures as At a Glance tiles (v3.8) : tinted blocks, PlutoCond figure, light label, note in sky ; no icon */
.fc.tall{background:#fff;box-shadow:none;border-radius:calc(var(--u)*30);flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0 calc(var(--u)*30);text-align:center}
/* v3.8 : all pillar tiles white (the .alt class is kept in the markup, unused) */
.fc.tall .ic,.mfc .ic{display:none}
.fc.tall .fx,.mfc .fx{display:flex;flex-direction:column;align-items:center}
.fc.tall .ff{font-family:"PlutoCond","Pluto";font-weight:400;font-size:calc(var(--u)*110);line-height:.95;letter-spacing:0;color:#003258}
.fc.tall .ff .u{font-family:"Pluto";font-weight:300;font-size:.45em;color:#003258}
.fc.tall .fl{margin-top:calc(var(--u)*14);font-weight:300;font-size:calc(var(--u)*25);line-height:1.2;color:#003258}
.fc.tall .fs{margin-top:calc(var(--u)*8);font-weight:400;font-size:calc(var(--u)*16);color:#0098C8}
.mfc{background:#fff;box-shadow:none;border-radius:calc(var(--m)*16);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--m)*8) calc(var(--m)*10)}
.mfc .ff{font-family:"PlutoCond","Pluto";font-weight:400;font-size:calc(var(--m)*44);line-height:.95;color:#003258}
.mfc .ff .u{font-family:"Pluto";font-weight:300;font-size:.45em;color:#003258}
.mfc .fl{margin-top:calc(var(--m)*5);font-weight:300;font-size:calc(var(--m)*12);line-height:1.2;color:#003258}
.mfc .fs{margin-top:calc(var(--m)*3);font-weight:400;font-size:calc(var(--m)*9.5);color:#0098C8}
/* CFO · key-figures strip */
.kstrip,.mkstrip{position:absolute;display:flex;color:#fff}
.kstrip{gap:calc(var(--u)*36);padding-top:calc(var(--u)*22)} .mkstrip{gap:calc(var(--m)*10);padding-top:calc(var(--m)*12)}
.kstrip .krule,.mkstrip .krule{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.32)}
.kstrip .kf,.mkstrip .kf{flex:1 1 0;min-width:0}
.kstrip .kf b,.mkstrip .kf b{display:block;font-weight:500;line-height:1;white-space:nowrap}
.kstrip .kf b{font-size:calc(var(--u)*30)} .mkstrip .kf b{font-size:calc(var(--m)*16)}
.kstrip .kf b small,.mkstrip .kf b small{font-weight:300;font-size:.6em}
.kstrip .kf span,.mkstrip .kf span{display:block;font-weight:300;color:#fff;white-space:nowrap}
.kstrip .kf span{margin-top:calc(var(--u)*8);font-size:calc(var(--u)*14)} .mkstrip .kf span{margin-top:calc(var(--m)*4);font-size:calc(var(--m)*10.5)}
/* Strategy · update rows ; Dev · the same rows for the three pillars (data-pillar-go) */
.upd-lead{color:#fff;font-weight:400;font-size:calc(var(--u)*17)}
.updl,.mupdl{position:absolute;display:flex;flex-direction:column}
.upd,.mupd{display:flex;align-items:center;color:#fff;font-weight:300;cursor:pointer;pointer-events:auto;border-top:1px solid rgba(255,255,255,.32);transition:color .3s}
.upd{gap:calc(var(--u)*18);height:calc(var(--u)*54);font-size:calc(var(--u)*22)} .updl.dense .upd{height:calc(var(--u)*46)}   /* v3.8u : Dev, three rows under the lead */ .mupd{gap:calc(var(--m)*10);height:calc(var(--m)*32);font-size:calc(var(--m)*14)}
.upd:last-child,.mupd:last-child{border-bottom:1px solid rgba(255,255,255,.32)}
.upd b,.mupd b{font-weight:500;letter-spacing:.14em;color:#fff;opacity:.7}
.upd b{font-size:calc(var(--u)*13);width:calc(var(--u)*30)} .mupd b{font-size:calc(var(--m)*9);width:calc(var(--m)*20)}
.upd em,.mupd em{margin-left:auto;font-style:normal;color:#fff;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.upd:hover{color:#0098C8} .upd:hover em{transform:translateX(calc(var(--u)*6))}

/* ---------- v3.7d · Group CE : the video bar, larger (644 x 200, thumb 300), in the slot the Chairperson gives to the
   button (y 790) so the quote has the Chair's run : up to 5 lines at 48/60 (440..680), or 7 at 38/48. Mobile 350 x 88 at 736,
   quote up to 4 lines (614..692). ---------- */
.vcard .playbtn.sm{width:calc(var(--u)*72);height:calc(var(--u)*72);margin:calc(var(--u)*-36) 0 0 calc(var(--u)*-36)}
.vcard .playbtn.sm::after{border-width:calc(var(--u)*13) 0 calc(var(--u)*13) calc(var(--u)*21)}

/* ---------- v3.7e · corners : 30 units, the print report's radius on the same 1920 grid (cards, photos, tinted panels ;
   the print nests small photos at 20 inside a 30 panel). Mobile keeps 16 on its 390 grid (physically ~ the same). ---------- */

/* ---------- v3.7f · leader titles on one line (desktop) : mixed case, 32, the one size at which all five fit their column ---------- */
.h1.one{text-transform:none;letter-spacing:0;font-size:calc(var(--u)*32);line-height:1.2;white-space:nowrap}
/* ---------- v3.7f · chat bot placeholder : a disc in the gutter column under the progress line, from the first portrait on (js/main.js) ---------- */
#chat{position:fixed;z-index:15;right:calc(var(--u)*24 + var(--sar));bottom:calc(var(--u)*24 + var(--sab));width:calc(var(--u)*52);height:calc(var(--u)*52);opacity:0;pointer-events:none;transition:opacity .4s}
#chat.on{opacity:1;pointer-events:auto}
#chat .chat-ic{position:absolute;inset:0;border-radius:50%;background:#fff;color:#003258;display:grid;place-items:center;cursor:pointer;transition:background .3s,color .3s}
#chat .chat-ic svg{width:50%;height:50%;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#chat .chat-ic svg circle{fill:currentColor;stroke:none}
#chat .chat-ic:hover,#chat.open .chat-ic{background:#0098C8;color:#fff}
#chat.sky .chat-ic{background:#003258;color:#fff}
#chat.sky .chat-ic:hover,#chat.sky.open .chat-ic{background:#0098C8;color:#fff}
#chat .chat-msg{position:absolute;right:0;bottom:calc(100% + var(--u)*12);white-space:nowrap;background:#fff;color:#003258;font-weight:400;font-size:calc(var(--u)*14);padding:calc(var(--u)*10) calc(var(--u)*16);
  border-radius:calc(var(--u)*14) calc(var(--u)*14) calc(var(--u)*4) calc(var(--u)*14);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .3s,transform .3s}
#chat.open .chat-msg{opacity:1;transform:none}
body.mobile #chat{right:calc(var(--m)*14 + var(--sar));bottom:calc(var(--m)*14 + var(--sab));width:calc(var(--m)*44);height:calc(var(--m)*44)}
body.mobile #chat .chat-msg{font-size:calc(var(--m)*12);padding:calc(var(--m)*8) calc(var(--m)*12);bottom:calc(100% + var(--m)*10);border-radius:calc(var(--m)*12) calc(var(--m)*12) calc(var(--m)*3) calc(var(--m)*12)}

/* ---------- v3.8h · pillar screens : the tab row is labelled ---------- */
.psw .psw-lead{align-self:center;margin-right:calc(var(--u)*22);font-weight:500;font-size:calc(var(--u)*15);letter-spacing:.2em;text-transform:uppercase;color:#0098C8;white-space:nowrap}

/* ---------- v3.8m · Group CE : the film is a tile (site radius), label on the background ; the tagline is a tagline ---------- */
.vrow{position:absolute;display:block;pointer-events:auto;cursor:pointer;color:#fff;background:#003258;transition:background .3s}   /* v3.8o : horizon-blue card behind the label */
.vrow:hover{background:#0098C8} .vrow:hover .vlab{color:#fff!important}
.vrow .vtile{position:absolute;left:0;top:0;overflow:hidden;background:#00284b url(../assets/img/ceo-video-thumb.jpg) 50% 30%/cover no-repeat;filter:saturate(.85);transition:filter .5s}
.vrow:hover .vtile{filter:none}
.vrow .vlab{position:absolute;font-weight:300;white-space:nowrap;transition:color .3s} .vrow:hover .vlab{color:#0098C8}
.vrow .vnote{position:absolute;font-weight:300;white-space:nowrap;opacity:.7}
.stage.d .vrow{border-radius:calc(var(--u)*30)} .stage.d .vrow .vtile{width:calc(var(--u)*280);height:calc(var(--u)*158);border-radius:calc(var(--u)*30) 0 0 calc(var(--u)*30)}
.stage.d .vrow .vlab{left:calc(var(--u)*318);top:calc(var(--u)*44);font-size:calc(var(--u)*28)}
.stage.d .vrow .vnote{left:calc(var(--u)*318);top:calc(var(--u)*92);font-size:calc(var(--u)*16)}
.stage.m .vrow{border-radius:calc(var(--m)*16)} .stage.m .vrow .vtile{width:calc(var(--m)*124);height:calc(var(--m)*70);border-radius:calc(var(--m)*16) 0 0 calc(var(--m)*16)}
.stage.m .vrow .vlab{left:calc(var(--m)*140);top:calc(var(--m)*15);font-size:calc(var(--m)*16)}
.stage.m .vrow .vnote{left:calc(var(--m)*140);top:calc(var(--m)*40);font-size:calc(var(--m)*10.5)}
.stage.m .vrow .mplay{transform:scale(.55)}