/* Layout: dark-first "night instrument" bands, broken by bright paper bands for reading; 1240px column; pinned storytelling + interactive explainers */
:root{
  color-scheme: dark;
  --bg:#07100c;            /* night green */
  --bg-2:#0c1712;
  --bg-3:#12201a;
  --line:rgba(226,240,230,.09);
  --line-2:rgba(226,240,230,.16);
  --fg:#edf2ee;
  --fg-2:rgba(237,242,238,.64);
  --fg-3:rgba(237,242,238,.40);
  --green:#1aa864;
  --green-2:#0b6a3c;
  --gold:#cfa96f;
  --gold-2:#8d6b3d;
  --alert:#e08a6d;
  --paper:#f4f5f0;
  --paper-2:#ffffff;
  --ink:#0b120e;
  --ink-2:#56625b;
  --ink-line:rgba(11,18,14,.10);
  --f-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Albert Sans","Helvetica Neue",Arial,sans-serif;
  --f-body:"Albert Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --max:1240px;
  --g:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.1,1);
  /* frosted finish for gold: a fine satin texture over the gold, the colour itself unchanged */
  --frost-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.0 0 0 0 0.000  1.0 0 0 0 0.000  1.0 0 0 0 0.000  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --frost-haze:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.45 0 0 0 0.275  0.45 0 0 0 0.275  0.45 0 0 0 0.275  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --frost-grain-t:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.0 0 0 0 0.000  1.0 0 0 0 0.000  1.0 0 0 0 0.000  0 0 0 0 0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:17px;line-height:1.47;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-body);font-weight:600;margin:0;text-wrap:balance;letter-spacing:-.022em}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--g)}
section{padding-block:clamp(96px,12vw,168px);position:relative}
.light{background:var(--paper);color:var(--ink)}
.eyebrow{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:inline-block}
.light .eyebrow{color:var(--gold-2)}
.serif{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;color:var(--gold)}
.light .serif{color:var(--green-2)}
.h1{font-family:var(--f-display);font-size:clamp(40px,5.6vw,80px);font-weight:600;line-height:1.04;letter-spacing:-.022em}
.h1 .tw{font-weight:800;background:var(--frost-grain-t) 0 0/160px 160px,linear-gradient(100deg,#f0d9ae,var(--gold) 50%,#e9cf9f);background-blend-mode:overlay,normal;-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.h2{font-size:clamp(32px,4.2vw,58px);font-weight:600;line-height:1.06;letter-spacing:-.028em}
.lede{font-size:clamp(19px,1.6vw,21px);line-height:1.45;color:var(--fg-2);max-width:58ch}
.light .lede{color:var(--ink-2)}
.head{display:grid;gap:22px;max-width:860px}
.small{font-size:13px;color:var(--fg-3)}
.light .small{color:var(--ink-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:16px;text-decoration:none;padding:14px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-gold{position:relative;isolation:isolate;background:linear-gradient(120deg,#e4c48f,var(--gold) 45%,#a8834f);color:#1a1209}
.btn-gold::after,.core-box::after,.node.core .dot::after,.f5::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--frost-grain) 0 0/160px 160px,var(--frost-haze) 0 0/480px 480px;background-blend-mode:overlay,normal;mix-blend-mode:overlay;opacity:.22;z-index:-1;pointer-events:none}
.btn-gold:hover{filter:brightness(1.06)}
.btn-line{border-color:var(--line-2);color:var(--fg);background:rgba(255,255,255,.02)}
.btn-line:hover{border-color:var(--fg-2)}
.light .btn-line{border-color:var(--ink-line);color:var(--ink)}
.arrow-r{transition:transform .3s var(--ease)}
.btn:hover .arrow-r{transform:translateX(3px)}

/* ---------------- NAV ---------------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;padding-top:env(safe-area-inset-top,0px);transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(7,16,12,.72);backdrop-filter:saturate(170%) blur(20px);-webkit-backdrop-filter:saturate(170%) blur(20px);border-color:var(--line)}
.nav-in{height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:block;color:var(--fg)}
.brand svg{height:32px;width:auto;display:block}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02)}
.nav ul a{display:block;text-decoration:none;font-size:14px;color:var(--fg-2);padding:7px 14px;border-radius:999px;transition:color .2s,background .2s}
.nav ul a:hover,.nav ul a.on{color:var(--fg);background:rgba(255,255,255,.06)}
.nav .btn{padding:10px 18px;font-size:14px}
.burger{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer}
.burger span{display:block;height:1.5px;background:var(--fg);margin:6px 0}
.menu{position:fixed;inset:0;z-index:59;background:rgba(7,16,12,.97);backdrop-filter:blur(20px);padding:calc(100px + env(safe-area-inset-top,0px)) var(--g) 40px;display:flex;flex-direction:column}
.menu a{font-family:var(--f-body);font-weight:600;font-size:30px;letter-spacing:-.02em;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)}
.menu .btn{margin-top:28px;align-self:flex-start;font-size:15px;border-bottom:0}
@media (max-width:1000px){.nav ul,.nav .nav-cta{display:none}.burger{display:block}}

/* ---------------- HERO ---------------- */
.hero{padding-block:clamp(130px,16vw,190px) 0;overflow:hidden;isolation:isolate}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:center;min-height:min(720px,78svh)}
.hero-copy{position:relative;z-index:2;display:grid;gap:26px}
/* hero type, as in the brand library: Montserrat statement + caps label, Albert Sans text */
.hcaps{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.hh1{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(38px,4.8vw,70px);line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
.hh1 span{font-weight:800;background:var(--frost-grain-t) 0 0/160px 160px,linear-gradient(100deg,#f0d9ae,var(--gold) 50%,#e9cf9f);background-blend-mode:overlay,normal;-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em;text-shadow:none}
.hlede{font-family:"Albert Sans",var(--f-body);font-size:clamp(19px,1.6vw,21px);line-height:1.45;max-width:52ch}
.hero .cta-row .btn{font-family:"Albert Sans",var(--f-body);font-weight:500;font-size:16px;padding:14px 24px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.globe-wrap{position:relative;aspect-ratio:1/1;width:118%;margin-right:-18%;justify-self:end}
#globe{position:absolute;inset:0;width:100%;height:100%}
.noglobe{background:radial-gradient(circle at 50% 50%,rgba(26,168,100,.18),transparent 60%)}
.globe-frost{position:absolute;left:50%;top:50%;width:83%;height:83%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;-webkit-backdrop-filter:blur(16px) saturate(115%) brightness(.72);backdrop-filter:blur(16px) saturate(115%) brightness(.72);background:radial-gradient(circle at 36% 30%,rgba(4,12,9,.18),rgba(4,12,9,.32) 70%)}
.noglobe .globe-frost{display:none}
.globe-tag svg{height:13px;width:auto;display:block;color:#e9cf9f;margin-right:-2px}
.globe-tag{padding:6px 12px!important;display:flex;align-items:center;gap:8px}
.globe-tag i{font-style:normal;opacity:.6}
.globe-tag{transition:opacity .4s;position:absolute;left:52%;top:39%;font-family:var(--f-mono);font-size:11px;color:var(--gold);letter-spacing:.08em;white-space:nowrap;pointer-events:none;padding:6px 10px;border:1px solid rgba(207,169,111,.35);background:rgba(7,16,12,.6);backdrop-filter:blur(8px);border-radius:999px;transform:translate(calc(-100% - 18px),-50%)}
@media (max-width:600px){.globe-tag{transform:translate(-50%,calc(-100% - 16px));font-size:10px;letter-spacing:.06em;padding:5px 10px!important;gap:6px}.globe-tag svg{height:11px}}
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .globe-wrap{width:100%;margin:0 auto;max-width:560px;margin-top:-10px}
}
.lenses{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.lens{padding:22px 18px 30px 0;display:grid;gap:8px;align-content:start;min-width:0}
.lens + .lens{padding-left:18px;border-left:1px solid var(--line)}
.lens .n{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.22em;color:var(--gold)}
.lens b{font-family:"Albert Sans",var(--f-body);font-weight:600;font-size:16px;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.lens span:last-child{font-family:"Albert Sans",var(--f-body);font-size:13.5px;line-height:1.4;color:var(--fg-3)}
@media (max-width:820px){.lenses{grid-template-columns:repeat(2,minmax(0,1fr))}.lens:nth-child(odd){border-left:0;padding-left:0}.lens{border-top:1px solid var(--line)}.lens:nth-child(-n+2){border-top:0}}


/* hero atmosphere: slow aurora */
.aurora{position:absolute;inset:-25% -15% -10%;z-index:-3;filter:blur(70px) saturate(120%);pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 98%);mask-image:linear-gradient(180deg,#000 55%,transparent 98%)}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.aurora i:nth-child(1){width:62vmax;height:62vmax;left:-8%;top:-6%;background:radial-gradient(circle,rgba(11,106,60,.62),rgba(11,106,60,0) 68%);animation:au1 46s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:48vmax;height:48vmax;right:-6%;top:18%;background:radial-gradient(circle,rgba(141,107,61,.34),rgba(141,107,61,0) 66%);animation:au2 58s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:54vmax;height:54vmax;left:28%;top:34%;background:radial-gradient(circle,rgba(14,86,78,.42),rgba(14,86,78,0) 66%);animation:au3 70s ease-in-out infinite alternate}
.aurora i:nth-child(4){width:30vmax;height:30vmax;left:46%;top:-4%;background:radial-gradient(circle,rgba(26,168,100,.20),rgba(26,168,100,0) 66%);animation:au2 52s ease-in-out -20s infinite alternate-reverse}
@keyframes au1{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14vw,8vh,0) scale(1.12)}100%{transform:translate3d(6vw,18vh,0) scale(.94)}}
@keyframes au2{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-12vw,-6vh,0) scale(1.15)}100%{transform:translate3d(-20vw,10vh,0) scale(1)}}
@keyframes au3{0%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-16vw,-10vh,0) scale(.9)}100%{transform:translate3d(10vw,-4vh,0) scale(1.1)}}
.hero .hh1,.hero .lede{text-shadow:0 1px 30px rgba(7,16,12,.35)}
.hero .hh1 span{text-shadow:none}
/* hero depth: light shaft, dust in three depth planes, backlight, vignette (no grain) */
.depth-back,.depth-front{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.depth-back{z-index:-2}
.depth-front{z-index:1}
.shaft{position:absolute;z-index:-2;pointer-events:none;left:var(--sx,-5%);top:var(--sy,4%);width:var(--sl,150%);height:clamp(260px,36vh,420px);margin-top:calc(clamp(260px,36vh,420px)/-2);transform-origin:0 50%;transform:rotate(var(--sa,22deg));background:linear-gradient(180deg,transparent 0%,rgba(196,238,214,.04) 36%,rgba(214,244,226,.06) 50%,rgba(196,238,214,.04) 64%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 62%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 62%,transparent 100%);filter:blur(28px);animation:breathe 22s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.75}to{opacity:1}}
.backlight{position:absolute;z-index:-2;pointer-events:none;inset:0;background:radial-gradient(closest-side circle at var(--gx,73%) var(--gy,50%),rgba(207,169,111,.09),rgba(207,169,111,.035) 55%,transparent 100%);background-size:100% 100%}
.vignette{position:absolute;z-index:-1;pointer-events:none;inset:0;background:radial-gradient(130% 100% at 60% 42%,transparent 55%,rgba(3,8,6,.32) 100%),linear-gradient(180deg,rgba(3,8,6,.18),transparent 16%)}
@media (prefers-reduced-motion:reduce){.shaft{animation:none}}
/* ---------------- QUESTIONS ---------------- */
.questions{margin-top:clamp(48px,6vw,80px);display:grid;gap:4px}
.questions p{font-family:var(--f-body);font-weight:600;font-size:clamp(34px,6.2vw,88px);line-height:1.02;letter-spacing:-.035em;color:#c9cfca;transition:color .7s var(--ease)}
.questions p.lit{color:var(--ink)}
.questions p em{font-style:normal;font-weight:inherit}
.questions .lit em{color:var(--green-2)}
.answer{margin-top:clamp(48px,6vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px;padding-top:28px;border-top:1px solid var(--ink-line)}
.answer strong{font-family:var(--f-body);font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
@media (max-width:820px){.answer{grid-template-columns:1fr}}

/* ---------------- ROLE RAIL ---------------- */
.rail{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative}
.rail::before{content:"";position:absolute;left:10%;right:10%;top:44px;height:1px;background:var(--line-2)}
.rail .beam{position:absolute;top:43px;left:10%;width:80px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:beam 4.5s var(--ease) infinite}
@keyframes beam{0%{left:10%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(90% - 80px);opacity:0}}
.node{display:grid;justify-items:center;text-align:center;gap:16px;padding-inline:10px;min-width:0;position:relative}
.node .dot{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--line-2);position:relative;z-index:1}
.node .dot svg{width:30px;height:30px;color:var(--fg-2)}
.node.core .dot{background:radial-gradient(circle at 30% 25%,#e2c18b,#8d6b3d 60%,#3d2a14);border:0;box-shadow:0 0 0 8px rgba(207,169,111,.08),0 0 60px rgba(207,169,111,.35)}
.node.core .dot svg{color:#fff}
.node.you .dot{border-color:rgba(26,168,100,.5)}
.node.you .dot svg{color:var(--green)}
.node b{font-family:var(--f-body);font-weight:600;font-size:16px;letter-spacing:-.01em}
.node span{font-size:14px;color:var(--fg-3);max-width:22ch}
@media (max-width:860px){
  .rail{grid-template-columns:1fr;gap:28px;padding-left:4px}
  .rail::before{left:44px;right:auto;top:44px;bottom:44px;width:1px;height:auto}
  .rail .beam{display:none}
  .node{grid-template-columns:88px 1fr;justify-items:start;text-align:left;align-items:center;column-gap:20px;row-gap:2px}
  .node .dot{grid-row:span 2}
}
.caption{margin-top:48px;text-align:center}

/* ---------------- HOW IT WORKS (pinned) ---------------- */
.how-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,96px);margin-top:clamp(48px,6vw,80px)}
.how-visual{position:sticky;top:110px;align-self:start}
.how-steps{display:grid}
.how-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding-block:24px;opacity:.38;transition:opacity .5s var(--ease)}
.how-step.on{opacity:1}
.how-step .k{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2)}
.how-step h3{font-size:clamp(30px,3.4vw,46px);font-weight:700;letter-spacing:-.04em;line-height:1.02}
.how-step p{color:var(--ink-2);max-width:42ch;font-size:18px}
.how-dots{display:none;gap:8px;justify-content:center;margin-top:16px}
.how-dots i{width:24px;height:3px;border-radius:2px;background:var(--ink-line);transition:background .3s}
.how-dots i.on{background:var(--green-2)}
@media (max-width:900px){
  .how-grid{grid-template-columns:1fr}
  .how-visual{position:relative;top:0}
  .how-dots{display:flex}
  .how-step{min-height:0;opacity:1;padding-block:22px;border-top:1px solid var(--ink-line)}
}
/* the case file */
.case{background:var(--bg);color:var(--fg);border-radius:28px;padding:clamp(18px,2.4vw,28px);box-shadow:0 50px 100px -40px rgba(7,16,12,.55);border:1px solid rgba(255,255,255,.06);font-size:14px;position:relative;overflow:hidden}
.case::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:radial-gradient(80% 50% at 100% 0%,rgba(26,168,100,.12),transparent 60%)}
.case-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.case-top .id{font-family:var(--f-mono);font-size:12.5px;color:var(--fg-2)}
.case-top .id b{display:block;font-family:var(--f-body);font-size:16px;color:var(--fg);letter-spacing:-.01em;margin-bottom:2px}
.pill{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-2);white-space:nowrap}
.pill{display:inline-grid;justify-items:center}
.pill .st{grid-area:1/1;visibility:hidden}
.case[data-step="1"] .pill .s1,.case[data-step="2"] .pill .s2,.case[data-step="3"] .pill .s3,.case[data-step="4"] .pill .s4,.case[data-step="5"] .pill .s5{visibility:visible}
.case[data-step="2"] .pill{border-color:rgba(26,168,100,.5);color:var(--green)}
.case[data-step="3"] .pill{border-color:rgba(237,242,238,.45);color:var(--fg)}
.case[data-step="4"] .pill{border-color:rgba(207,169,111,.5);color:var(--gold)}
.case[data-step="5"] .pill{background:var(--green-2);border-color:var(--green-2);color:#fff}
.rows{list-style:none;margin:6px 0 0;padding:0}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:4px 12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.rows .nm{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rows .src{grid-column:1;font-family:var(--f-mono);font-size:11px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rows .stt{grid-row:1/3;grid-column:2;font-family:var(--f-mono);font-size:11.5px;text-align:right;width:132px;white-space:nowrap}
.stt span{display:none}
.case[data-step="1"] .stt .c{display:inline;color:var(--fg-2);border:1px dashed var(--line-2);padding:3px 8px;border-radius:6px}
.case[data-step="2"] .stt .v,.case[data-step="3"] .stt .v,.case[data-step="4"] .stt .v,.case[data-step="5"] .stt .v{display:inline-flex;align-items:center;gap:6px;color:var(--green)}
.case[data-step="4"] li.ex .stt .v,.case[data-step="5"] li.ex .stt .v{display:none}
.case[data-step="4"] li.ex .stt .x,.case[data-step="5"] li.ex .stt .x{display:inline;color:var(--gold)}
.stt .v::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.8' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
.case[data-step="2"] .rows li{animation:tick .6s var(--ease) both}
.case[data-step="2"] .rows li:nth-child(2){animation-delay:.12s}.case[data-step="2"] .rows li:nth-child(3){animation-delay:.24s}.case[data-step="2"] .rows li:nth-child(4){animation-delay:.36s}.case[data-step="2"] .rows li:nth-child(5){animation-delay:.48s}.case[data-step="2"] .rows li:nth-child(6){animation-delay:.6s}
@keyframes tick{from{background:rgba(26,168,100,.0)}40%{background:rgba(26,168,100,.08)}to{background:transparent}}
.src .p{display:none;color:var(--gold)}
.case[data-step="3"] .src .p,.case[data-step="4"] .src .p,.case[data-step="5"] .src .p{display:inline}
.case[data-step="3"] .src .q,.case[data-step="4"] .src .q,.case[data-step="5"] .src .q{display:none}
.case-foot{margin-top:16px;display:grid;gap:10px}
.case-foot{grid-template-areas:"m"}
.foot-msg{grid-area:m;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;font-size:13.5px;min-height:52px;opacity:0;visibility:hidden;transition:opacity .35s}
.case[data-step="1"] .f1,.case[data-step="2"] .f2,.case[data-step="3"] .f3,.case[data-step="4"] .f4,.case[data-step="5"] .f5{opacity:1;visibility:visible}
.f1{background:rgba(255,255,255,.03);border:1px dashed var(--line-2);color:var(--fg-2)}
.f2{background:rgba(26,168,100,.08);color:var(--fg-2)}
.f2 .bar{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden;max-width:160px}
.f2 .bar i{display:block;height:100%;width:0;background:var(--green);animation:fill 2.4s var(--ease) forwards}
@keyframes fill{to{width:100%}}
.f3{background:rgba(237,242,238,.04);color:var(--fg-2);border:1px solid var(--line-2)}
.f3 .mono{font-size:11px;color:var(--green)}
.f4{background:rgba(207,169,111,.10);color:var(--gold);border:1px solid rgba(207,169,111,.25)}
.f5{position:relative;isolation:isolate;background:linear-gradient(110deg,#3d2a14,#8d6b3d 60%,#cfa96f);color:#fff}
.f5 b{font-family:var(--f-body);font-weight:600}
.f5 .you{font-family:var(--f-mono);font-size:11px;background:rgba(0,0,0,.25);padding:6px 10px;border-radius:999px;white-space:nowrap}

/* ---------------- BENTO ---------------- */
.bento{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.tile{background:var(--bg-2);border:1px solid var(--line);border-radius:28px;padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:14px;min-width:0;position:relative;overflow:hidden;transition:border-color .4s,transform .6s var(--ease)}
.tile:hover{border-color:var(--line-2);transform:translateY(-3px)}
.tile h3{font-size:22px;font-weight:600;letter-spacing:-.02em}
.tile p{color:var(--fg-2);font-size:15.5px;max-width:46ch}
.tile .viz{margin-top:auto;padding-top:18px;min-height:150px;display:grid;place-items:center}
.t-a{grid-column:span 3}.t-b{grid-column:span 3}.t-c{grid-column:span 2}.t-d{grid-column:span 2}.t-e{grid-column:span 2}
.t-wide{grid-column:span 6;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:center;background:linear-gradient(120deg,#13241b,#0c1712 60%);}
@media (max-width:1000px){.t-a,.t-b{grid-column:span 6}.t-c,.t-d,.t-e{grid-column:span 3}.t-e{grid-column:span 6}.t-wide{grid-template-columns:1fr}}
@media (max-width:620px){.bento>*{grid-column:span 6!important}}
/* face scan */
.face{width:170px;height:170px;position:relative}
.face svg{width:100%;height:100%}
.face .scan{position:absolute;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,var(--green),transparent);box-shadow:0 0 14px var(--green);animation:scan 3.2s ease-in-out infinite}
@keyframes scan{0%,100%{top:12%}50%{top:86%}}
.face .lm{fill:var(--green);animation:blink 3.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.face3d{position:relative;width:100%;height:380px;min-height:380px;padding:0!important;margin-top:auto;display:block!important;border-radius:20px;overflow:hidden;background:radial-gradient(60% 70% at 50% 45%,rgba(26,168,100,.10),transparent 70%)}
.face3d canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.hud{position:absolute;inset:12px;pointer-events:none;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);--c:rgba(207,169,111,.55);background:linear-gradient(var(--c),var(--c)) 0 0/16px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 16px,linear-gradient(var(--c),var(--c)) 100% 0/16px 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 16px,linear-gradient(var(--c),var(--c)) 0 100%/16px 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 16px,linear-gradient(var(--c),var(--c)) 100% 100%/16px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 16px;background-repeat:no-repeat}
.hud span{position:absolute;padding:8px 12px}
.h-tl{left:0;top:0}.h-tr{right:0;top:0;color:var(--green);display:flex;align-items:center;gap:6px}
.h-tr::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 1.6s ease-in-out infinite}
.h-bl{left:0;bottom:0}.h-br{right:0;bottom:0;color:var(--gold);text-align:right;max-width:60%}
/* statement */
.stmt{width:100%;max-width:340px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:9px;position:relative;overflow:hidden}
.stmt div{display:grid;grid-template-columns:52px 1fr 64px;gap:10px;align-items:center}
.stmt i{height:6px;border-radius:3px;background:rgba(255,255,255,.12)}
.stmt i:first-child{background:rgba(255,255,255,.08)}
.stmt i:last-child{justify-self:end;width:100%}
.stmt .flag i:last-child{background:var(--alert)}
.stmt .flag::after{content:"edited total";position:absolute;right:16px;font-family:var(--f-mono);font-size:10px;color:var(--alert);transform:translateY(-15px)}
.stmt::before{content:"";position:absolute;left:0;right:0;height:30%;background:linear-gradient(180deg,transparent,rgba(207,169,111,.14),transparent);animation:sweep 4s linear infinite}
@keyframes sweep{from{top:-30%}to{top:100%}}
/* rings */
.rings{width:150px;height:150px;border-radius:50%;position:relative;background:repeating-radial-gradient(circle,transparent 0 22px,var(--line) 22px 23px)}
.rings::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(26,168,100,.35),transparent 25%);animation:spin 4s linear infinite}
.rings i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--fg-2)}
.rings i.h{background:var(--gold);box-shadow:0 0 10px var(--gold)}
@keyframes spin{to{transform:rotate(360deg)}}
/* org tree */
.tree{width:180px}
.tree circle{fill:var(--bg-3);stroke:var(--line-2)}
.tree circle.p{animation:pulse-n 3s ease-in-out infinite}
.tree line{stroke:var(--line-2)}
@keyframes pulse-n{0%,100%{fill:var(--bg-3)}50%{fill:var(--green-2);stroke:var(--green)}}
/* review queue */
.queue{width:100%;max-width:240px;display:grid;gap:8px}
.queue div{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:11px;color:var(--fg-2);padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.queue div b{font-weight:500;color:var(--gold)}
/* evidence stack */
.pkg{position:relative;height:220px;width:100%;max-width:420px;justify-self:center}
.pkg .sheet{position:absolute;left:50%;width:78%;height:150px;border-radius:16px;border:1px solid var(--line-2);background:linear-gradient(160deg,#16261e,#0c1712);transform:translateX(-50%);padding:16px;display:grid;align-content:start;gap:8px}
.pkg .sheet:nth-child(1){top:0;transform:translateX(-50%) scale(.86);opacity:.5}
.pkg .sheet:nth-child(2){top:26px;transform:translateX(-50%) scale(.93);opacity:.75}
.pkg .sheet:nth-child(3){top:54px;border-color:rgba(207,169,111,.45);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.pkg .sheet .ln{height:6px;border-radius:3px;background:rgba(255,255,255,.1)}
.pkg .sheet .hd{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;color:var(--fg-2)}
.pkg .seal{position:absolute;right:12%;bottom:6px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#e7c995,#8d6b3d 70%);box-shadow:0 10px 30px -8px rgba(207,169,111,.6);animation:seal 5s var(--ease) infinite}
.pkg .seal svg{width:26px;height:26px}
@keyframes seal{0%,20%{transform:scale(.4) rotate(-30deg);opacity:0}35%,85%{transform:none;opacity:1}100%{opacity:0}}
.out-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.out-list span{font-size:13px;border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;color:var(--fg-2)}

/* ---- documents ---- */
.docs{position:relative;display:block!important;height:430px;padding:0!important;margin-top:auto;perspective:1100px}
.stmt3{position:absolute;right:0;top:6px;width:min(64%,300px);background:#eef1ec;color:#1a2420;border-radius:12px;padding:14px 14px 10px;font-size:11px;transform:rotate(5deg) translateZ(-40px);box-shadow:0 30px 50px -30px rgba(0,0,0,.8);opacity:.9}
.st-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(0,0,0,.12);padding-bottom:8px;margin-bottom:4px}
.st-h b{font-family:var(--f-body);font-size:12px}.st-h span{font-family:var(--f-mono);font-size:9.5px;color:#5c6a63}
.st-r{display:grid;grid-template-columns:44px 1fr auto;gap:8px;padding:5px 0;border-bottom:1px dashed rgba(0,0,0,.08);font-family:var(--f-mono);font-size:10px;position:relative}
.st-r span:nth-child(2){font-family:var(--f-body);font-size:11px}
.st-r span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.st-flag{font-weight:600}
.st-flag em{position:absolute;right:-4px;top:-18px;font-style:normal;font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#c4583a;padding:3px 7px;border-radius:5px;opacity:0;transform:translateY(4px);transition:all .5s var(--ease)}
.st-flag::after{content:"";position:absolute;inset:0 -6px;border:1.5px solid #c4583a;border-radius:6px;opacity:0;transition:opacity .5s}
.docs.anom .st-flag em{opacity:1;transform:none}.docs.anom .st-flag::after{opacity:1;animation:flagp 1.4s ease-in-out infinite}
@keyframes flagp{50%{border-color:rgba(196,88,58,.35)}}
.pp-wrap{position:absolute;left:0;top:40px;width:min(76%,350px);transform-style:preserve-3d}
.pp{position:relative;aspect-ratio:125/88;border-radius:12px;overflow:hidden;background:#e7ede7;color:#14201a;transform:rotateX(14deg) rotateY(var(--ry,-12deg)) rotateZ(-4deg);transform-style:preserve-3d;box-shadow:0 40px 60px -28px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.08);transition:transform .6s var(--ease)}
.pp canvas{position:absolute;inset:0;width:100%;height:100%}
.uv{position:absolute;inset:0;background:#1d1747;clip-path:inset(0 100% 0 0);transition:none}
.uv canvas{opacity:.95}
.holo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;background:linear-gradient(115deg,transparent 30%,rgba(255,236,190,.75) 42%,rgba(150,240,200,.6) 48%,rgba(190,200,255,.55) 54%,transparent 66%);background-size:260% 100%;background-position:var(--hx,80%) 0;opacity:.85}
.pp-top{position:absolute;left:4.5%;right:4.5%;top:5%;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:clamp(7px,1.9vw,9px);letter-spacing:.08em;text-transform:uppercase;color:#2c5a44}
.pp-body{position:absolute;left:4.5%;right:4.5%;top:15%;display:grid;grid-template-columns:28% 1fr;gap:4.5%}
.photo{width:100%;border-radius:3px;display:block}
.pp dl{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px 6px;align-content:start}
.pp dl div{min-width:0}.pp dl .w2{grid-column:span 2}.pp dl .w4{grid-column:span 4}
.pp dt{font-size:clamp(5.5px,1.5vw,7px);color:#4f6a5d;letter-spacing:.02em}
.pp dd{margin:0;font-family:var(--f-mono);font-size:clamp(7.5px,2vw,10px);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrz{position:absolute;left:4%;right:4%;bottom:6%;font-family:var(--f-mono);font-size:clamp(6px,1.75vw,9.2px);line-height:1.5;letter-spacing:.06em;color:#1b2520;white-space:nowrap;overflow:hidden}
.mrz i{font-style:normal;transition:color .2s,background .2s;border-radius:2px}
.mrz i.rd{color:#0b6a3c}
.mrz i.cd{background:rgba(207,169,111,.0)}
.mrz i.cd.ok{background:#0b6a3c;color:#fff}
.chks{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;gap:6px}
.chks span{font-size:12px;padding:6px 10px 6px 26px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-3);position:relative;transition:all .4s var(--ease)}
.chks span::before{content:"";position:absolute;left:9px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;border:1px solid var(--line-2);transition:all .4s}
.chks span.on{color:var(--fg);border-color:rgba(26,168,100,.5)}
.chks span.on::before{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/8px no-repeat;border-color:var(--green)}
.chks span.warn.on{border-color:rgba(224,138,109,.55)}
.chks span.warn.on::before{background:var(--alert);border-color:var(--alert)}
@media (max-width:560px){.docs{height:500px}.stmt3{width:82%;top:0;transform:rotate(3deg)}.pp-wrap{width:92%;top:168px}}
/* ---- screening ---- */
.scr{display:flex!important;flex-direction:column;gap:12px;place-items:stretch!important;min-height:300px}
.scr-q{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.scr-q .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);grid-row:span 2}
.scr-q b{font-family:var(--f-body);font-weight:600;font-size:15px;letter-spacing:-.01em}
.scr-q .arn{font-size:13px;color:var(--fg-2);direction:rtl;text-align:left;unicode-bidi:plaintext}
.scr-l{display:flex;gap:6px}
.scr-l i{font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:6px;border:1px solid var(--line-2);color:var(--fg-3);transition:all .3s}
.scr-l i.on{color:var(--fg);border-color:rgba(26,168,100,.5);background:rgba(26,168,100,.08)}
.scr-c{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.scr-c li{display:grid;grid-template-columns:minmax(0,1fr) 54px 32px;gap:4px 10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.scr-c li>div{min-width:0;display:flex;flex-direction:column}
.scr-c b{font-weight:500;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr-c li>div span{font-family:var(--f-mono);font-size:10px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.06em}
.scr-c .bar{height:4px;border-radius:4px;background:var(--line-2);overflow:hidden}
.scr-c .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--gold));transition:width 1s var(--ease)}
.scr-c .sc{font-family:var(--f-mono);font-size:11.5px;text-align:right;color:var(--fg-3);font-variant-numeric:tabular-nums;transition:color .3s}
.scr-c em{grid-column:1/-1;font-style:normal;font-size:12px;line-height:18px;height:18px;color:var(--fg-3);opacity:0;transition:opacity .5s var(--ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr-c li.m .bar i{width:calc(var(--s)*100%)}.scr-c li.m .sc{color:var(--gold)}
.scr-c li.d em{opacity:1}.scr-c li.d b{color:var(--fg-2);text-decoration:line-through;text-decoration-color:rgba(237,242,238,.35)}
.scr-r{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--line);color:var(--fg-3);transition:all .5s var(--ease);font-size:14px}
.scr-r.on{border-color:rgba(26,168,100,.5);background:rgba(26,168,100,.08);color:var(--fg)}
.scr-r .mono{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--green)}
.mono{font-family:var(--f-mono)}
/* ---- ownership ---- */
.own{display:flex!important;flex-direction:column;gap:12px;min-height:300px;place-items:stretch!important}
.own svg{width:100%;height:auto;overflow:visible;margin-block:auto}
.own .edges path{fill:none;stroke:var(--line-2);stroke-width:1.4;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1s var(--ease),stroke .5s}
.own.s1 #e1,.own.s1 #e2,.own.s2 #e3,.own.s2 #e4{stroke-dashoffset:0}
.own.s3 #e1,.own.s3 #e3{stroke:var(--gold);stroke-width:2}
.own .pct text{font-family:var(--f-mono);font-size:10.5px;fill:var(--fg-2);opacity:0;transition:opacity .5s}
.own.s1 .pct text:nth-child(-n+2),.own.s2 .pct text{opacity:1}
.own .nd rect{fill:var(--bg-3);stroke:var(--line-2);transition:all .5s}
.own .nd .t{font-family:var(--f-body);font-size:12.5px;font-weight:600;fill:var(--fg)}
.own .nd .s{font-family:var(--f-mono);font-size:9.5px;fill:var(--fg-3);letter-spacing:.04em}
.own .nd{opacity:.35;transition:opacity .6s}
.own .nd.app,.own.s1 .nd:nth-child(2),.own.s1 .nd:nth-child(3),.own.s2 .nd{opacity:1}
.own.s2 .nd.dim{opacity:.55}
.own.s3 .nd.ubo rect{fill:rgba(207,169,111,.14);stroke:var(--gold)}
.own.s3 .nd.app rect,.own.s3 .nd:nth-child(2) rect{stroke:rgba(207,169,111,.6)}
.own-r{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);color:var(--fg-3);font-size:14px;transition:all .5s}
.own-r b{font-weight:500;font-size:12px;color:var(--gold)}
.own.s3 .own-r{border-color:rgba(207,169,111,.45);background:rgba(207,169,111,.07);color:var(--fg)}
/* ---- review queue ---- */
.rq{display:flex!important;flex-direction:column;gap:10px;min-height:300px;place-items:stretch!important}
.rq-h{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.rq-h .mono{color:var(--gold)}
.rq-view{height:222px;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(180deg,#000 92%,transparent);mask-image:linear-gradient(180deg,#000 92%,transparent)}
#rql{list-style:none;margin:0;padding:0;display:grid;gap:8px;will-change:transform}
#rql li{display:grid;grid-template-columns:minmax(0,1fr) 118px;gap:4px 10px;height:68px;align-content:center;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);transition:background .5s,border-color .5s,opacity .5s;overflow:hidden}
#rql li .id{font-family:var(--f-mono);font-size:11px;color:var(--fg-2)}
#rql li .tm{font-family:var(--f-mono);font-size:11px;color:var(--fg-3);text-align:right;font-variant-numeric:tabular-nums}
#rql li .rs{font-size:13.5px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#rql li .st{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);text-align:right;align-self:center}
#rql li.as{border-color:rgba(26,168,100,.5);background:rgba(26,168,100,.07)}
#rql li.as .st{color:var(--green)}
#rql li.out{opacity:.35}
#rql li.in{animation:qin .6s var(--ease)}
@keyframes qin{from{opacity:0;transform:translateY(10px)}}
/* ---- ledger ---- */
.ledger{background:rgba(7,16,12,.55);border:1px solid var(--line-2);border-radius:20px;padding:18px;display:grid;gap:10px;min-width:0;min-height:360px;align-content:start}
.lg-h{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.lg-h .mono{color:var(--gold)}
#lgl{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:32px;height:256px;align-content:start}
#lgl li{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:10px;align-items:center;padding:0 0 0 18px;height:32px;box-sizing:border-box;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:11px;position:relative;animation:qin .45s var(--ease)}
#lgl li::before{content:"";position:absolute;left:3px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--green)}
#lgl li::after{content:"";position:absolute;left:6px;top:calc(50% + 4px);height:calc(100% - 4px);width:1px;background:rgba(26,168,100,.4)}
#lgl li:last-child::after{display:none}
#lgl li.ex::before{background:var(--gold)}
#lgl .tt{color:var(--fg-3);font-variant-numeric:tabular-nums}
#lgl .ev{color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lgl .hs{color:var(--fg-3)}
#lgl li.ex .ev{color:var(--gold)}
.lg-seal{margin-top:6px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px dashed var(--line-2);color:var(--fg-3);font-size:13px;transition:all .5s var(--ease)}
.lg-seal .sl{display:flex;align-items:center;gap:8px}.lg-seal svg{width:18px;height:18px}
.lg-seal .mono{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lg-seal.on{border-style:solid;border-color:rgba(207,169,111,.5);background:linear-gradient(110deg,rgba(207,169,111,.16),rgba(207,169,111,.04));color:var(--fg)}
.lg-seal.on svg{color:var(--gold)}.lg-seal.on .mono{color:var(--gold)}
@media (max-width:520px){#lgl li{grid-template-columns:70px minmax(0,1fr)}#lgl .hs{display:none}}
/* ---------------- ORCHESTRATION ---------------- */
.orch{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,.8fr) 60px minmax(0,1fr);align-items:center}
.prov{display:flex;flex-direction:column;justify-content:space-between;height:420px}
.prov div{border:1px solid var(--ink-line);background:var(--paper-2);border-radius:12px;padding:12px 16px;font-weight:600;font-size:14px;display:flex;justify-content:space-between;gap:8px}
.prov div em{font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--ink-2);font-weight:400}
.wires{height:420px;width:100%;overflow:visible}
.wires path{fill:none;stroke:rgba(11,106,60,.25);stroke-width:1.2;vector-effect:non-scaling-stroke}
.wires path.live{stroke:var(--green-2);stroke-dasharray:5 9;animation:dash 1.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-28}}
.core-box{aspect-ratio:1;border-radius:28px;position:relative;overflow:hidden;color:#fff;display:grid;place-items:center;text-align:center;background:radial-gradient(140% 120% at 20% 0%,#d6b27a,#7d5c33 45%,#2c1e10);box-shadow:0 30px 60px -24px rgba(110,80,40,.6);isolation:isolate}
.core-box::before{content:"";position:absolute;z-index:-2;inset:-40%;background:conic-gradient(transparent 0 70%,rgba(255,236,200,.35) 80%,transparent 90%);animation:spin 8s linear infinite}
.core-box>div{position:relative;display:grid;gap:12px;justify-items:center}
.core-box svg{height:46px;width:auto;color:#fff}
.core-box p{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.to{height:2px;background:linear-gradient(90deg,var(--gold-2),var(--green-2));margin-inline:8px;position:relative}
.to::after{content:"";position:absolute;right:-2px;top:-4px;border-left:8px solid var(--green-2);border-block:5px solid transparent}
.outs{background:var(--ink);color:var(--fg);border-radius:22px;padding:22px 24px;display:grid;gap:10px}
.outs div{display:flex;gap:10px;align-items:center;font-size:14.5px}
.outs div::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--green)}
@media (max-width:980px){
  .orch{grid-template-columns:1fr;gap:20px}
  .prov{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .wires{display:none}
  .core-box{aspect-ratio:auto;padding-block:40px;max-width:420px;width:100%;justify-self:center}
  .to{width:2px;height:36px;justify-self:center;background:linear-gradient(180deg,var(--gold-2),var(--green-2))}
  .to::after{right:-4px;top:auto;bottom:-2px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--green-2);border-bottom:0}
}
@media (max-width:460px){.prov{grid-template-columns:1fr}}
.keys{margin-top:clamp(40px,5vw,64px);display:flex;flex-wrap:wrap;gap:10px}
.keys span{border:1px solid var(--ink-line);border-radius:999px;padding:9px 16px;font-size:14px;background:var(--paper-2)}

/* ---------------- JOURNEYS ---------------- */
.tabs{margin-top:clamp(40px,5vw,64px);display:flex;gap:6px;overflow-x:auto;padding:5px;border:1px solid var(--line);border-radius:999px;width:max-content;max-width:100%;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:transparent;color:var(--fg-2);padding:10px 18px;border-radius:999px;cursor:pointer;font-size:14.5px;white-space:nowrap;transition:background .3s,color .3s}
.tabs button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.journey{margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;min-height:520px}
.j-img{border-radius:28px;overflow:hidden;position:relative;min-height:360px}
.j-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--ease),transform 1.4s var(--ease)}
.j-img img.out{opacity:0;transform:scale(1.04)}
.j-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(7,16,12,.6))}
.j-img .tag{position:absolute;left:22px;bottom:20px;z-index:1;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.j-body{background:var(--bg-2);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:20px;min-width:0}
.jstack{display:grid}
.jv{grid-area:1/1;display:flex;flex-direction:column;gap:20px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.jv.on{opacity:1;visibility:visible}
.j-body h3{font-size:clamp(26px,2.6vw,36px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.j-body .desc{color:var(--fg-2)}
.j-list{display:flex;flex-wrap:wrap;gap:8px}
.j-list span{font-size:13.5px;padding:7px 12px;border-radius:10px;background:rgba(255,255,255,.04);color:var(--fg)}
.matrix{margin-top:auto;border-top:1px solid var(--line);padding-top:18px}
.matrix .small{display:block;margin-bottom:12px;font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.m-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.m-grid div{font-size:13px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);color:var(--fg-3);display:flex;align-items:center;gap:8px;transition:all .45s var(--ease)}
.m-grid div::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:inherit;flex:none}
.m-grid div.on{color:var(--fg);border-color:rgba(26,168,100,.45);background:rgba(26,168,100,.07)}
.m-grid div.on::before{background:var(--green);box-shadow:0 0 8px var(--green)}
@media (max-width:900px){.journey{grid-template-columns:1fr}.j-img{min-height:280px}}
@media (max-width:480px){.m-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------------- CONTROL (threshold explainer) ---------------- */
.ctrl{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:center}
@media (max-width:900px){.ctrl{grid-template-columns:1fr}}
.pillars{margin-top:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.pillars div{padding:16px 0;border-top:1px solid var(--line);display:flex;gap:12px;align-items:center;font-family:var(--f-body);font-weight:600;font-size:16px;letter-spacing:-.01em}
.pillars div:nth-child(odd){padding-right:16px}
.pillars i{width:8px;height:8px;border-radius:2px;background:var(--gold);transform:rotate(45deg);flex:none}
.console{background:var(--bg-2);border:1px solid var(--line);border-radius:28px;padding:clamp(20px,2.6vw,32px);min-width:0}
.console-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.console-top b{font-family:var(--f-body);font-weight:600;font-size:18px;letter-spacing:-.01em}
.slider{margin-top:22px;display:grid;gap:10px}
.slider label{display:flex;justify-content:space-between;font-size:14px;color:var(--fg-2)}
.slider output{font-family:var(--f-mono);color:var(--gold)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--gold) var(--v,60%),var(--line-2) var(--v,60%));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--fg);border:4px solid var(--gold);cursor:grab}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--fg);border:4px solid var(--gold);cursor:grab}
.cases{margin-top:24px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
.cases i{aspect-ratio:1;border-radius:5px;background:var(--green);transition:background .35s var(--ease),transform .35s var(--ease)}
.cases i.r{background:var(--gold)}
.cases i.e{background:var(--alert)}
.tally{margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tally div{border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:2px;min-width:0}
.tally b{font-family:var(--f-body);font-size:26px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tally span{font-size:12.5px;color:var(--fg-2);display:flex;align-items:center;gap:6px}
.tally span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c)}

/* ---------------- GOVERNANCE ---------------- */
.gov{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ink-line)}
.gov div{padding:30px 28px 34px 0;display:grid;gap:10px;align-content:start;border-bottom:1px solid var(--ink-line);min-width:0}
.gov div:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--ink-line)}
.gov b{font-family:var(--f-body);font-size:19px;font-weight:600;letter-spacing:-.02em}
.gov span{color:var(--ink-2);font-size:15.5px}
@media (max-width:900px){.gov{grid-template-columns:1fr}.gov div{padding:24px 0!important;border-left:0!important}}
.quote{margin-top:clamp(56px,7vw,96px);font-family:var(--f-body);font-weight:600;font-size:clamp(28px,3.6vw,48px);line-height:1.12;letter-spacing:-.035em;max-width:24ch}
.quote .serif{color:var(--green-2)}

/* ---------------- PILOT ---------------- */
.phases{margin-top:clamp(56px,7vw,88px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:ph}
.phase{border:1px solid var(--line);border-radius:24px;padding:26px 24px 30px;display:grid;gap:12px;align-content:start;position:relative;min-width:0;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.phase .k{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.phase h3{font-size:24px;font-weight:700;letter-spacing:-.03em}
.phase p{font-size:15px;color:var(--fg-2)}
.phase::after{content:"";position:absolute;top:36px;right:-13px;width:10px;height:10px;border-top:1.5px solid var(--line-2);border-right:1.5px solid var(--line-2);transform:rotate(45deg)}
.phase:last-child::after{display:none}
@media (max-width:900px){.phases{grid-template-columns:repeat(2,minmax(0,1fr))}.phase::after{display:none}}
@media (max-width:520px){.phases{grid-template-columns:1fr}}
.metrics{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.metrics .small{margin-right:8px;font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.metrics span:not(.small){font-size:13.5px;border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;color:var(--fg-2)}

/* ---------------- FAQ ---------------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(40px,6vw,96px)}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}
details{border-top:1px solid var(--ink-line)}
details:last-child{border-bottom:1px solid var(--ink-line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-family:var(--f-body);font-weight:600;font-size:clamp(17px,1.6vw,20px);letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary .pm{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--ink-line);position:relative;transition:transform .4s var(--ease),background .3s}
summary .pm::before,summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
details[open] summary .pm{background:var(--ink)}
details[open] summary .pm::before,details[open] summary .pm::after{background:var(--paper)}
details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0)}
details p{padding:0 48px 24px 0;color:var(--ink-2);max-width:62ch}

/* ---------------- CONTACT ---------------- */
.contact{overflow:hidden;isolation:isolate}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,16,12,.95) 0%,rgba(7,16,12,.75) 45%,rgba(7,16,12,.35) 100%),url(img/colonnade.jpg) var(--face-x,75%) var(--face-y,50%)/cover}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(40px,6vw,96px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact .h1{font-size:clamp(40px,5.4vw,76px)}
form{background:rgba(7,16,12,.6);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);border:1px solid var(--line-2);border-radius:28px;padding:clamp(22px,3vw,36px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.f{display:grid;gap:6px;min-width:0}
.f.full{grid-column:1/-1}
.f label{font-size:12.5px;color:var(--fg-2)}
.f input,.f select,.f textarea{width:100%;font:inherit;font-size:15px;color:var(--fg);background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;transition:border-color .2s,background .2s}
.f select option{background:var(--bg-2)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.06)}
.f textarea{min-height:110px;resize:vertical}
.chk{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--fg-2)}
.chk input{margin-top:3px;accent-color:var(--gold)}
form .btn{grid-column:1/-1;justify-self:start}
.form-note{grid-column:1/-1;font-size:12.5px;color:var(--fg-3)}
.form-msg{grid-column:1/-1;font-size:14px;color:var(--gold);padding:12px 14px;border:1px solid rgba(207,169,111,.35);border-radius:12px}
@media (max-width:520px){form{grid-template-columns:1fr}}

/* ---------------- PAGES: four pages in one file ---------------- */
.page.enter{animation:pgin .6s var(--ease) both}
@keyframes pgin{from{opacity:0}to{opacity:1}}
[id]{scroll-margin-top:84px}
.lnk{display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:15.5px;text-decoration:none;color:var(--gold);border-bottom:1px solid rgba(207,169,111,.4);padding-bottom:2px;transition:border-color .3s}
.light .lnk{color:var(--green-2);border-bottom-color:rgba(11,106,60,.35)}
.lnk:hover{border-bottom-color:currentColor}
.more{margin-top:clamp(32px,4vw,48px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#1a2620}
.opt{color:var(--fg-3)}

/* page hero */
.phero{padding-block:clamp(132px,15vw,184px) clamp(56px,7vw,96px);overflow:hidden;isolation:isolate}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center}
.phero-copy{position:relative;z-index:2;display:grid;gap:24px;align-content:center}
.hh1.ph{font-size:clamp(36px,4.3vw,62px)}
.phero .lede{text-shadow:0 1px 30px rgba(7,16,12,.35)}
.phero-img{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:1/1.02;border:1px solid var(--line);box-shadow:0 50px 100px -40px rgba(0,0,0,.65)}
.phero-img.tall{aspect-ratio:1/1.12}
.phero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 26s ease-in-out infinite alternate;--face-room:.1}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.09) translate(-1.5%,-1%)}}
.phero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(7,16,12,.72))}
.ptag{position:absolute;left:22px;bottom:20px;z-index:1;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.jump a{font-size:13.5px;text-decoration:none;color:var(--fg-2);border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;background:rgba(255,255,255,.02);transition:color .25s,border-color .25s,background .25s}
.jump a:hover{color:var(--fg);border-color:var(--fg-3);background:rgba(255,255,255,.05)}
.nots{margin-top:clamp(44px,6vw,72px);display:flex;flex-wrap:wrap;gap:12px 30px;border-top:1px solid var(--line);padding-top:22px}
.nots span{font-size:14.5px;color:var(--fg-3);display:flex;align-items:center;gap:10px}
.nots span::before{content:"";width:12px;height:1px;background:var(--gold)}
@media (max-width:900px){.phero-grid{grid-template-columns:1fr}.phero-img,.phero-img.tall{aspect-ratio:16/10;max-height:420px}}

/* home: six capabilities */
.cap6{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cap{position:relative;display:grid;gap:12px;align-content:start;padding:clamp(22px,2.4vw,30px);border-radius:24px;background:var(--paper-2);border:1px solid var(--ink-line);text-decoration:none;color:var(--ink);min-width:0;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.cap::after{content:"→";position:absolute;right:24px;top:24px;font-size:18px;color:var(--green-2);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--ease)}
.cap:hover{transform:translateY(-3px);box-shadow:0 30px 60px -36px rgba(7,16,12,.35);border-color:rgba(11,106,60,.28)}
.cap:hover::after{opacity:1;transform:none}
.cap .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(11,106,60,.06);border:1px solid rgba(11,106,60,.14);color:var(--green-2);margin-bottom:6px;transition:background .4s,color .4s}
.cap:hover .ic{background:var(--green-2);color:#fff}
.cap .ic svg{width:26px;height:26px}
.cap b{font-size:20px;font-weight:600;letter-spacing:-.02em}
.cap>span:last-child{font-size:15.5px;color:var(--ink-2);max-width:40ch}
@media (max-width:980px){.cap6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cap6{grid-template-columns:1fr}}

/* home: five steps */
.steps5{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.steps5 li{position:relative;display:grid;gap:10px;align-content:start;padding:28px 22px 0 0;border-top:1px solid var(--line-2);min-width:0}
.steps5 li::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--gold),#e9cf9f);transition:width .8s var(--ease)}
.steps5 li::after{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);transition:background .5s,border-color .5s}
.steps5 li.on::before{width:100%}
.steps5 li.on::after{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(207,169,111,.6)}
.steps5 .n{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.22em;color:var(--fg-3);transition:color .5s}
.steps5 li.on .n{color:var(--gold)}
.steps5 b{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.steps5 li>span:last-child{font-size:14.5px;color:var(--fg-3);max-width:24ch}
.steps5 li.you.on::before{background:linear-gradient(90deg,var(--gold),var(--green))}
.steps5 li.you.on::after{background:var(--green);border-color:var(--green);box-shadow:0 0 12px rgba(26,168,100,.6)}
.steps5 li.you.on .n{color:var(--green)}
@media (max-width:900px){
  .steps5{grid-template-columns:1fr}
  .steps5 li{border-top:0;border-left:1px solid var(--line-2);padding:0 0 28px 26px}
  .steps5 li::before{top:0;left:-1px;width:2px;height:0;transition:height .8s var(--ease)}
  .steps5 li.on::before{width:2px;height:100%}
  .steps5 li::after{left:-5px;top:2px}
}

/* home: sectors */
.sectors{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sector{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:420px;padding:22px;border-radius:24px;overflow:hidden;text-decoration:none;color:#fff;isolation:isolate;min-width:0}
.sector img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease);--face-under:.4}
.sector::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,16,12,0) 30%,rgba(7,16,12,.55) 62%,rgba(7,16,12,.92))}
.sector:hover img{transform:scale(1.05)}
.sector .tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.sector b{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.sector>span:last-child{font-size:14px;line-height:1.4;color:rgba(237,242,238,.74)}
@media (max-width:1000px){.sectors{grid-template-columns:repeat(2,minmax(0,1fr))}.sector{min-height:360px}}
@media (max-width:560px){.sectors{grid-template-columns:1fr}.sector{min-height:300px}}

/* home: why AET, orchestration on night */
.orch.dk .prov div{border-color:var(--line);background:var(--bg-2);color:var(--fg)}
.orch.dk .prov div em{color:var(--fg-3)}
.orch.dk .wires path{stroke:rgba(26,168,100,.22)}
.orch.dk .wires path.live{stroke:var(--green)}
.orch.dk .outs{background:var(--bg-3);border:1px solid var(--line)}
.why .keys span{border-color:var(--line-2);background:rgba(255,255,255,.03);color:var(--fg-2)}
.persp{margin-top:clamp(40px,5vw,56px);padding-top:28px;border-top:1px solid var(--line);font-size:17px;line-height:1.5;color:var(--fg-2);max-width:72ch}
.persp .lnk{margin-left:8px;font-size:15px}

/* home: film */
.film{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:center}
.film-copy{display:grid;gap:22px}
.poster{position:relative;display:block;aspect-ratio:16/9;border-radius:28px;overflow:hidden;box-shadow:0 50px 100px -40px rgba(7,16,12,.55);isolation:isolate}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.poster::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,16,12,.1),rgba(7,16,12,.55))}
.poster:hover img{transform:scale(1.04)}
.play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .5s var(--ease),background .3s}
/* play: the path itself sits a tenth of its width right of centre, which reads as centred; no margin on top of that */
.play svg{width:30px;height:30px}
.poster:hover .play{transform:scale(1.08);background:rgba(207,169,111,.35)}
.pmeta{position:absolute;left:24px;bottom:20px;display:grid;gap:2px;color:#fff}
.pmeta b{font-size:18px;font-weight:600}
.pmeta span{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(237,242,238,.75)}
@media (max-width:900px){.film{grid-template-columns:1fr}}

/* platform: capability tiles */
.tile .tk{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.22em;color:var(--gold)}
@media (max-width:1000px){.bento>.t-c:nth-child(5){grid-column:span 6}}
/* policy */
.pol{display:flex!important;flex-direction:column;gap:12px;min-height:300px;place-items:stretch!important}
.pol-h{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.pol-h span{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.pol-h b{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.pol-r{list-style:none;margin:0;padding:0;display:grid}
.pol-r li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--fg-3);transition:color .4s}
.pol-r li em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--green);opacity:0;transform:translateX(6px);transition:opacity .4s,transform .4s var(--ease);white-space:nowrap}
.pol-r li.on{color:var(--fg)}
.pol-r li.on em{opacity:1;transform:none}
.pol-r li.x em{color:var(--gold)}
.pol-o{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);color:var(--fg-3);font-size:13.5px;transition:all .5s var(--ease)}
.pol-o b{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.pol.done .pol-o{border-color:rgba(207,169,111,.45);background:rgba(207,169,111,.07);color:var(--fg)}
.pol.done .pol-o b{color:var(--gold)}
/* integration */
.integ{display:flex!important;flex-direction:column;justify-content:center;min-height:300px;place-items:stretch!important}
.ig{border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;display:grid;gap:2px;background:rgba(255,255,255,.02)}
.ig b{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.ig span{font-family:var(--f-mono);font-size:10.5px;color:var(--fg-3);letter-spacing:.04em}
.ig.aet{position:relative;isolation:isolate;border-color:rgba(207,169,111,.5);background:linear-gradient(110deg,rgba(207,169,111,.16),rgba(207,169,111,.03))}
.ig.aet span{color:var(--gold)}
.ig.ext{border-style:dashed}
.ig-c{position:relative;height:46px;display:flex;align-items:center;padding-left:36px}
.ig-c::before{content:"";position:absolute;left:20px;top:0;bottom:0;width:1px;background:var(--line-2)}
.ig-c.lim::before{background:repeating-linear-gradient(180deg,var(--line-2) 0 4px,transparent 4px 8px)}
.ig-c i{position:absolute;left:17px;top:0;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:igd 2.6s var(--ease) infinite}
.ig-c.lim i{background:var(--gold);box-shadow:0 0 8px var(--gold);animation-delay:1.3s}
@keyframes igd{0%{top:-4px;opacity:0}15%,85%{opacity:1}100%{top:calc(100% - 3px);opacity:0}}
.ig-c span{font-family:var(--f-mono);font-size:10.5px;color:var(--fg-3);letter-spacing:.04em}

/* platform: cross-border */
.mkt{margin-top:clamp(48px,6vw,80px);border:1px solid var(--line);border-radius:28px;padding:clamp(20px,3vw,36px);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0))}
.mkt-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.mkt-top .small{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.02)}
.seg button{border:0;background:none;cursor:pointer;color:var(--fg-2);font-size:13.5px;padding:8px 14px;border-radius:999px;white-space:nowrap;transition:background .3s,color .3s}
.seg button:hover{color:var(--fg)}
.seg button[aria-selected="true"],.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.routes{margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rt{border:1px solid var(--line);border-radius:20px;padding:20px 20px 22px;display:grid;gap:8px;align-content:start;transition:border-color .5s,background .5s,opacity .5s}
.rt .n{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3);transition:color .5s}
.rt b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.rt p{font-size:14.5px;color:var(--fg-2)}
.rt em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;color:var(--fg-3);transition:color .5s}
.rt.p{border-color:rgba(26,168,100,.55);background:rgba(26,168,100,.07)}
.rt.p .n,.rt.p em{color:var(--green)}
.rt.s{border-color:rgba(207,169,111,.42)}
.rt.s em{color:var(--gold)}
.rt.o{opacity:.42}
.merge{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:40px}
.merge i{justify-self:center;width:1px;background:linear-gradient(180deg,var(--line-2),var(--gold))}
.std{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;padding:16px 20px;border-radius:18px;border:1px solid rgba(207,169,111,.42);background:linear-gradient(110deg,rgba(207,169,111,.16),rgba(207,169,111,.04))}
.std b{font-weight:600;font-size:17px;letter-spacing:-.01em}
.std span{font-size:14.5px;color:var(--fg-2)}
@media (max-width:800px){.routes{grid-template-columns:1fr}.merge{display:none}.std{margin-top:14px}}
.agree{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--line)}
.agree-q{font-family:var(--f-body);font-weight:600;font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.035em;max-width:16ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:13.5px;border:1px solid rgba(26,168,100,.45);background:rgba(26,168,100,.07);border-radius:999px;padding:7px 13px;color:var(--fg)}
.agree-r p{margin-top:18px;color:var(--fg-2);font-size:15.5px;max-width:52ch}
@media (max-width:860px){.agree{grid-template-columns:1fr}}
.fin{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);padding:clamp(24px,3.4vw,44px);border-radius:28px;background:var(--bg-2);border:1px solid var(--line)}
.fin h3{margin-top:16px;font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.fin p{margin-top:16px;color:var(--fg-2);max-width:48ch}
.fin-l{list-style:none;margin:0;padding:0;display:grid;align-content:center}
.fin-l li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.fin-l li:last-child{border-bottom:1px solid var(--line)}
.fin-l b{font-weight:600;color:var(--gold)}
.fin-l span{color:var(--fg-2);font-size:15px}
@media (max-width:860px){.fin{grid-template-columns:1fr}}

/* platform: integration patterns */
.pats{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pat{background:var(--paper-2);border:1px solid var(--ink-line);border-radius:24px;padding:24px 22px 0;display:flex;flex-direction:column;gap:10px;overflow:hidden;min-width:0}
.pat .k{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2)}
.pat b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.pat>span{font-size:14.5px;color:var(--ink-2)}
.pv{display:block;width:100%;height:auto;margin-top:auto;padding-top:16px}
.pv .w{fill:var(--paper);stroke:rgba(11,18,14,.14)}
.pv .l{fill:rgba(11,18,14,.08)}
.pv .g{fill:rgba(207,169,111,.2);stroke:#b8925a}
.pv .gt{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;fill:#8d6b3d}
.pv .a{fill:none;stroke:#0b6a3c;stroke-width:1.4;stroke-dasharray:3 4;animation:dash 1.6s linear infinite}
.pv .t{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.06em;fill:#56625b}
.resp{margin-top:clamp(32px,4vw,48px);display:flex;gap:20px 48px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--ink-line)}
.resp p{max-width:72ch;color:var(--ink-2)}
@media (max-width:1000px){.pats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.pats{grid-template-columns:1fr}}

/* platform: engagement line */
.journeyline{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 14px}
.journeyline li{position:relative;display:grid;gap:8px;align-content:start;padding-top:24px;border-top:2px solid var(--ink-line);min-width:0}
.journeyline li::before{content:"";position:absolute;left:0;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--gold-2)}
.journeyline li:last-child::before{background:var(--green-2);border-color:var(--green-2)}
.journeyline .k{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.22em;color:var(--gold-2)}
.journeyline b{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.journeyline li>span:last-child{font-size:14px;color:var(--ink-2)}
@media (max-width:1000px){.journeyline{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 14px}}
@media (max-width:620px){.journeyline{grid-template-columns:1fr;gap:28px}}

/* closing band */
.band{padding-block:clamp(80px,10vw,128px);overflow:hidden;isolation:isolate}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 120% at 85% 50%,rgba(207,169,111,.12),transparent 60%),radial-gradient(50% 100% at 10% 0%,rgba(11,106,60,.25),transparent 70%)}
.band-in{display:flex;justify-content:space-between;align-items:center;gap:28px 48px;flex-wrap:wrap}
.band .h2{max-width:18ch}

/* about */
.who{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:start}
@media (max-width:900px){.who{grid-template-columns:1fr}}
.cred{position:relative;background:var(--bg);color:var(--fg);border-radius:28px;padding:clamp(22px,2.6vw,32px);overflow:hidden;box-shadow:0 50px 100px -40px rgba(7,16,12,.55)}
.cred::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(231,196,140,.6),rgba(231,196,140,.06) 42%,rgba(231,196,140,.32));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.cred::after{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(207,169,111,.14),transparent 70%);pointer-events:none}
.cred-h{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.cred-h svg{height:15px;width:auto;color:#e9cf9f;flex:none}
.cred dl{margin:0;display:grid}
.cred dl div{padding:13px 0;border-bottom:1px solid var(--line);display:grid;gap:3px}
.cred dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.cred dd{margin:0;font-size:16px;font-weight:500;letter-spacing:-.005em}
.cred dd.mono{letter-spacing:.06em;color:#e9cf9f}
.cred-f{margin-top:14px;font-size:12.5px;color:var(--fg-3)}
section.tight{padding-top:0}
.nw{white-space:nowrap;font-style:normal}
.lead-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:end}
.lead-grid .leader{margin-top:0}
@media (max-width:900px){.lead-grid{grid-template-columns:1fr}}
.leader{margin-top:clamp(32px,4vw,48px);display:grid;gap:8px;padding:clamp(24px,3vw,36px);border-radius:28px;background:var(--paper-2);border:1px solid var(--ink-line);position:relative;overflow:hidden}
.leader::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#e4c48f,#a8834f)}
.leader .k{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2)}
.leader b{font-family:var(--f-display);font-weight:600;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em;line-height:1.1}
.leader .role{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-2)}
.leader p{margin-top:8px;color:var(--ink-2)}
.advs{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.adv{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;min-height:270px;padding:clamp(24px,2.6vw,32px);border-radius:28px;background:linear-gradient(160deg,#13241b,#0c1712 62%);border:1px solid var(--line);transition:border-color .4s,transform .6s var(--ease)}
.adv:hover{border-color:rgba(207,169,111,.35);transform:translateY(-3px)}
.adv::after{content:"";position:absolute;right:-50px;top:-50px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(207,169,111,.16),transparent 70%);pointer-events:none}
.adv .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.adv b{margin-top:auto;font-family:var(--f-display);font-weight:600;font-size:clamp(26px,2.4vw,32px);letter-spacing:-.02em;line-height:1.1}
.adv .t{font-size:15px;color:var(--fg-2);max-width:26ch}
.adv-note{margin-top:22px}
@media (max-width:900px){.advs{grid-template-columns:1fr}.adv{min-height:0}.adv b{margin-top:28px}}

/* library */
.lib-hero .phero-grid{align-items:center}
.stack3{position:relative;height:clamp(300px,30vw,400px)}
.s3{position:absolute;border-radius:20px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 40px 80px -30px rgba(0,0,0,.75);animation:fl 9s ease-in-out infinite alternate}
.s3a{left:2%;top:4%;width:66%;aspect-ratio:16/10;transform:rotate(-5deg)}
.s3a img{width:100%;height:100%;object-fit:cover}
.s3a .pl{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.s3a .pl svg{width:22px;height:22px}
.s3b{right:0;top:26%;width:54%;aspect-ratio:4/3;padding:18px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(150deg,#1a2e23,#0b1510);transform:rotate(4deg);animation-delay:-3s}
.s3b b{font-size:17px;font-weight:600;letter-spacing:-.015em;max-width:14ch}
.s3b svg{margin-top:auto;height:14px;width:auto;color:var(--fg-2);align-self:flex-start}
.cv-k{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.s3c{left:20%;bottom:0;width:46%;aspect-ratio:16/9;display:grid;place-content:center;justify-items:center;gap:8px;background:rgba(7,16,12,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:rgba(207,169,111,.45);transform:rotate(-1.5deg);animation-delay:-6s}
.lockc{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--gold);border:1px solid rgba(207,169,111,.5)}
.lockc svg{width:22px;height:22px}
@keyframes fl{to{translate:0 -10px}}
.btn .lk{width:18px;height:18px}
.libsec{padding-top:0}
.libbar{display:flex;align-items:center}
/* the briefing form: a field only robots see, and room for the human check when it needs the visitor */
#form{position:relative}
.hp{position:absolute;left:-10000px;top:0;width:1px;height:1px;overflow:hidden}
.ts{grid-column:1/-1}.ts:empty{display:none}
#form[aria-busy=true] .btn{opacity:.7;pointer-events:none}
.seg.seg-sm{flex-wrap:nowrap;gap:2px;padding:3px;border-radius:999px;max-width:100%}
.seg.seg-sm button{font-size:13px;padding:6px 13px}
@media (max-width:400px){.seg.seg-sm button{padding:6px 10px}}
.libgroup{margin-top:clamp(40px,5vw,64px)}
.libbar+.libgroup{margin-top:clamp(28px,3.5vw,44px)}
.lg-head{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.lg-head h2{font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.025em}
.lnk-btn{margin-left:auto;border:0;background:none;color:var(--gold);cursor:pointer;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.lib-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--bg-2);min-width:0;cursor:pointer;text-align:left;color:inherit;font:inherit;padding:0;transition:border-color .3s,transform .5s var(--ease)}
.lcard:hover{border-color:var(--line-2);transform:translateY(-3px)}
.lcard.feat{grid-column:span 2}
.lcov{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(150deg,#1a2e23,#0b1510);isolation:isolate}
.lcard.feat .lcov{aspect-ratio:21/9}
.lcov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform 1.2s var(--ease)}
.lcard:hover .lcov img{transform:scale(1.04)}
.lcov .play{width:60px;height:60px;margin:-30px 0 0 -30px}
.lcov .play svg{width:22px;height:22px}
.lcov.deck{display:flex;flex-direction:column;gap:8px;padding:20px}
.lcov.deck::before{content:"";position:absolute;right:-60px;bottom:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(207,169,111,.18),transparent 70%)}
.lcov.deck b{font-size:19px;font-weight:600;letter-spacing:-.02em;max-width:16ch;line-height:1.15}
.lcov.deck>svg{margin-top:auto;height:13px;width:auto;color:var(--fg-2);align-self:flex-start}
.lcard.locked .lcov::after{content:"";position:absolute;inset:0;background:rgba(7,16,12,.45);-webkit-backdrop-filter:blur(9px) brightness(.7);backdrop-filter:blur(9px) brightness(.7)}
.lockb{position:absolute;z-index:2;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;place-items:center;color:var(--gold);border:1px solid rgba(207,169,111,.5);background:rgba(7,16,12,.5)}
.lockb svg{width:22px;height:22px}
.lbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.lmeta{display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.lbody b{font-size:18px;font-weight:600;letter-spacing:-.015em}
.lbody p{font-size:14.5px;color:var(--fg-2)}
.lfoot{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.badge{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-2);white-space:nowrap}
.badge.pa{border-color:rgba(207,169,111,.45);color:var(--gold)}
.lgo{font-weight:600;font-size:14px;color:var(--fg);display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.lcard:hover .lgo .arrow-r{transform:translateX(3px)}
.lib-empty{margin-top:24px;color:var(--fg-3)}
.lib-notes{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.lib-notes div{padding:26px 26px 0 0;display:grid;gap:8px;align-content:start;min-width:0}
.lib-notes div+div{padding-left:26px;border-left:1px solid var(--line)}
.lib-notes b{font-weight:600}
.lib-notes span{font-size:14.5px;color:var(--fg-2)}
.lib-notes a{color:var(--gold)}
@media (max-width:1000px){.lib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.lib-grid{grid-template-columns:1fr}.lcard.feat{grid-column:auto}.lcard.feat .lcov{aspect-ratio:16/9}.lib-notes{grid-template-columns:1fr}.lib-notes div+div{padding-left:0;border-left:0}.stack3{height:300px}}

/* dialogs: partner access and the media viewer */
.dlg{border:0;padding:0;background:transparent;color:var(--fg);width:min(520px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);overflow:visible}
.dlg::backdrop{background:rgba(3,8,6,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dlg[open]{animation:dlgin .45s var(--ease)}
@keyframes dlgin{from{opacity:0;transform:translateY(16px) scale(.98)}}
.dlg .dlg-in,form.dlg-in{position:relative;display:grid;grid-template-columns:1fr;gap:14px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:28px;padding:clamp(24px,3vw,36px);box-shadow:0 60px 120px -40px rgba(0,0,0,.85);-webkit-backdrop-filter:none;backdrop-filter:none;max-height:calc(100dvh - 32px);overflow:auto}
.dlg .x{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--fg-2);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:2}
.dlg .x:hover{color:var(--fg);border-color:var(--fg-3)}
.dlg-ic{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(207,169,111,.45);color:var(--gold);background:rgba(207,169,111,.06)}
.dlg-ic svg{width:22px;height:22px}
.dlg h2{font-size:26px;font-weight:600;letter-spacing:-.025em}
.dlg p{color:var(--fg-2)}
.dlg-err{color:var(--alert)!important;font-size:13.5px}
.dlg-act{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;margin-top:4px}
.dlg-act .btn{justify-self:auto}
.dlg-note{font-size:12.5px;color:var(--fg-3)!important;border-top:1px solid var(--line);padding-top:12px}
.dlg.viewer{width:min(1000px,calc(100vw - 32px))}
.vw-top{display:grid;gap:4px;padding-right:48px}
.vw-k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.vw-stage{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#050b08;border:1px solid var(--line)}
/* a film fills its stage: the stage takes the film's own ratio (848×480 until the file says otherwise) and stays within short screens */
.vw-stage.film{--ar:1.76667;aspect-ratio:var(--ar);width:min(100%,max(280px,calc((100vh - 290px) * var(--ar))));width:min(100%,max(280px,calc((100dvh - 290px) * var(--ar))));margin-inline:auto}
.vw-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(.9)}
.vw-stage .play{background:rgba(255,255,255,.12);cursor:not-allowed}
.vw-bar{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:11px;color:rgba(237,242,238,.8)}
.vw-bar i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.22)}
.vw-bar .cc{border:1px solid rgba(255,255,255,.4);border-radius:4px;padding:1px 5px;font-size:10px}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,4vw,48px);background:radial-gradient(80% 90% at 85% 15%,rgba(207,169,111,.18),transparent 60%),radial-gradient(70% 80% at 0% 100%,rgba(11,106,60,.35),transparent 70%),linear-gradient(150deg,#13241b,#07100c)}
.slide svg{height:clamp(24px,3.4vw,40px);width:auto;color:var(--fg);align-self:flex-start}
.slide b{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,3.6vw,44px);letter-spacing:-.02em;line-height:1.05;max-width:16ch}
.slide span{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.vw-ctl{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:12px;color:var(--fg-3)}
.vw-ctl button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);background:none;color:var(--fg-3);cursor:not-allowed}
.vw-ctl .vo{margin-left:auto;border:1px solid var(--line-2);border-radius:999px;padding:4px 10px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.vw-pack{display:grid;gap:10px}
.vw-pack div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.vw-pack b{font-weight:600}
.vw-pack span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}


/* mobile menu: the briefing button keeps its own padding */
.menu .btn{padding:14px 24px}
/* the film in the viewer: native controls, left to right in both languages; a small switch between the two versions */
.vw-stage video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;object-fit:cover}
.vw-stage video:fullscreen{object-fit:contain}
.vw-stage video:-webkit-full-screen{object-fit:contain}
.vw-lang{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;width:max-content;background:rgba(255,255,255,.02)}
.vw-lang[hidden]{display:none}
.vw-lang button{border:0;background:none;color:var(--fg-2);font-family:var(--f-body);font-size:13px;font-weight:500;padding:7px 15px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.vw-lang button:hover{color:var(--fg)}
.vw-lang button[lang=ar]{font-family:"Noto Kufi Arabic",var(--f-body);font-size:12.5px}
.vw-lang button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
/* briefing: the copy sits on a photograph, so it gets brighter text and a deeper veil.
   On narrow screens the copy spans the full width, so the veil runs top to bottom and is darkest behind the text. */
.contact .lede{color:rgba(237,242,238,.86);text-shadow:0 1px 24px rgba(7,16,12,.75)}
.contact .small{color:rgba(237,242,238,.62)}
@media (max-width:900px){
  .contact::before{background:linear-gradient(180deg,rgba(7,16,12,.96) 0%,rgba(7,16,12,.92) 32%,rgba(7,16,12,.8) 58%,rgba(7,16,12,.66) 100%),url(img/colonnade.jpg) var(--face-x,72%) var(--face-y,50%)/cover}
}

/* ---------- the trust layer rail: one line, and the light pings between AET and the authorised sources ----------
   Into AET, out to the sources and back (request and response), then on to the evidence and the decision.
   The light rests out of sight behind a step while it turns. */
.rail .beam{animation:beam3 6.5s var(--ease) infinite}
@keyframes beam3{0%{left:10%;opacity:0;animation-timing-function:cubic-bezier(.45,0,.25,1)}4%{opacity:1}16%{left:calc(30% - 40px)}20%{left:calc(30% - 40px);animation-timing-function:cubic-bezier(.45,0,.25,1)}32%{left:calc(50% - 40px)}36%{left:calc(50% - 40px);animation-timing-function:cubic-bezier(.45,0,.25,1)}48%{left:calc(30% - 40px)}52%{left:calc(30% - 40px);animation-timing-function:cubic-bezier(.4,0,.3,1)}86%{left:calc(90% - 80px);opacity:1}89%,100%{left:calc(90% - 80px);opacity:0}}
.node span{max-width:26ch}
.rail+.caption{color:rgba(237,242,238,.56)}

/* ---------- the operating model: five steps on one screen ----------
   A line of the five steps chooses what the case shows. In view it plays on its own: the line under the current step
   fills as its timer, then the next step follows. Hovering or focusing the line pauses it, choosing a step stops it.
   Scrolling never drives it. */
.op{margin-top:clamp(40px,5vw,64px)}
.op-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.op-rail button{position:relative;display:grid;gap:8px;align-content:start;justify-items:start;text-align:start;min-width:0;margin:0;padding:24px 0 6px;padding-inline-end:18px;border:0;border-top:1px solid rgba(11,18,14,.14);background:none;color:var(--ink-2);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.op-rail button::after{content:"";position:absolute;inset-inline-start:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:1px solid rgba(11,18,14,.26);transition:background .45s,border-color .45s,box-shadow .45s}
.op-rail button.done::after,.op-rail button[aria-selected=true]::after{background:var(--gold);border-color:var(--gold)}
.op-rail button[aria-selected=true]::after{box-shadow:0 0 0 4px rgba(207,169,111,.2)}
.op-rail button[data-s="5"][aria-selected=true]::after{background:var(--green-2);border-color:var(--green-2);box-shadow:0 0 0 4px rgba(11,106,60,.14)}
.op-rail .bar{position:absolute;inset-inline:0;top:-1px;height:2px;overflow:hidden;pointer-events:none}
.op-rail .bar i{display:block;width:0;height:100%;background:var(--gold);transition:width .5s var(--ease)}
.op-rail button.done .bar i{width:100%}
.op-rail button[data-s="5"]{--dwell:8s}
.op.playing .op-rail [aria-selected=true] .bar i{animation:opfill var(--dwell,6s) linear forwards}
.op.playing.paused .op-rail [aria-selected=true] .bar i{animation-play-state:paused}
@keyframes opfill{from{width:0}to{width:100%}}
.op-rail .n{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.22em;color:var(--ink-2);transition:color .45s}
.op-rail .l{font-weight:600;font-size:15.5px;letter-spacing:-.01em;line-height:1.25;color:var(--ink-2);transition:color .45s}
.op-rail button.done .n,.op-rail button[aria-selected=true] .n{color:var(--gold-2)}
.op-rail button[data-s="5"][aria-selected=true] .n{color:var(--green-2)}
.op-rail button[aria-selected=true] .l,.op-rail button:hover .l{color:var(--ink)}
.op-stage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,88px);align-items:center;margin-top:clamp(36px,4.5vw,60px)}
.op-text{display:grid}
.op-text .how-step{grid-area:1/1;min-height:0;padding:0;border:0;gap:16px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s var(--ease),transform .5s var(--ease),visibility 0s linear .3s}
.op-text .how-step.on{opacity:1;visibility:visible;transform:none;transition:opacity .55s var(--ease) .1s,transform .7s var(--ease) .1s,visibility 0s}
.op-text .how-step .k{display:none}
.op .how-visual{position:static;align-self:auto}
.op-note{margin-top:14px;text-align:center}
@media (min-width:901px) and (max-height:820px){.op-rail button{padding-top:20px;padding-bottom:0}.op-stage{margin-top:24px}.op .case-top{padding-bottom:12px}.op .case .rows li{padding:7px 0}}
@media (max-width:900px){
  .op-rail button{padding:18px 0 2px;padding-inline-end:6px;gap:0}
  .op-rail .l{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .op-stage{grid-template-columns:1fr;gap:28px;margin-top:28px}
  .op-text .how-step .k{display:block}
}
@media (prefers-reduced-motion:reduce){
  .op-text .how-step{transform:none;transition:opacity .2s,visibility 0s linear .2s}
  .op-text .how-step.on{transition:opacity .2s,visibility 0s}
  .op-rail .bar i{transition:none}
}

/* ---------- capability 02: the documents lie flat and a loupe examines them ----------
   No tilt, no ultraviolet glow, no shimmer: a passport and a statement as they would lie on a desk. The loupe is moved
   by script; narrow frames stack the documents and the picture takes its own height. */
.tile .docs{display:flex!important;flex-direction:column;align-items:stretch;gap:16px;height:430px;perspective:none}
.docs .lp{position:relative;flex:1 1 0;min-height:0;direction:ltr}
.docs .lp svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.tile .docs.tall{height:auto!important}
.docs.tall .lp{flex:none}
.docs.tall .lp svg{position:static;height:auto}
.docs .chks{position:static}
.lp-g{opacity:0;transition:opacity .5s var(--ease)}
.lp-g.on{opacity:1}
@media (prefers-reduced-motion:reduce){.lp-g{transition:none}}

/* use cases: under the capabilities, that each organisation sets them (28 Oct) */
.m-note{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--fg-3)}
.m-note b{font-weight:500;color:var(--fg-2)}

/* ---------------- FOOTER ---------------- */
footer{border-top:1px solid var(--line);padding-block:72px 40px;font-size:14px;color:var(--fg-2)}
.f-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:32px}
.f-grid h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);font-weight:500;margin-bottom:16px}
.f-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.f-grid a{text-decoration:none}
.f-grid a:hover{color:var(--fg)}
.f-brand svg{height:44px;width:auto;color:var(--fg)}
.f-brand p{margin-top:20px;max-width:36ch}
.f-base{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;font-size:12.5px;color:var(--fg-3)}
@media (max-width:820px){.f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.f-brand{grid-column:1/-1}}

/* motion: content is always visible; it only glides into place */
.js .rv{transform:translateY(40px);transition:transform 1.2s var(--ease)}
.js .rv.in{transform:none}
.load{animation:load 1.2s var(--ease) both}
.load.d1{animation-delay:.12s}.load.d2{animation-delay:.24s}.load.d3{animation-delay:.36s}.load.d4{animation-delay:.6s}
@keyframes load{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{transform:none}
  .f2 .bar i{width:100%}
}
/* ---------------- LANGUAGE SWITCH ---------------- */
.lang{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--fg-2);font-family:var(--f-body);font-size:14px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
.lang:hover{color:var(--fg);border-color:var(--line-2);background:rgba(255,255,255,.05)}
.lang:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lang svg{width:15px;height:15px;flex:none;opacity:.75}
.lang span[lang=ar]{font-family:"Noto Kufi Arabic",var(--f-body);font-size:13.5px;font-weight:500;position:relative;top:-1px}
html:not([lang=ar]) [lang=ar]{font-family:"Noto Kufi Arabic",var(--f-body)}
.lang{transition:color .2s,border-color .2s,background .2s,transform .3s var(--ease)}
/* the switch itself: one even crossfade (old and new share the same fade, so the light never dips) while the
   old view blurs away and the new one comes into focus, settling 10 px in its reading direction. 0.4 s fade, 0.7 s focus. */
html.vt-lang::view-transition-old(root){animation:vtFadeOut .4s var(--ease) both,vtBlur .4s var(--ease) both}
html.vt-lang::view-transition-new(root){animation:vtFadeIn .4s var(--ease) both,vtFocus .7s var(--ease) both}
html.vt-lang::view-transition-image-pair(root){isolation:isolate}
html.vt-lang::view-transition-old(root),html.vt-lang::view-transition-new(root){mix-blend-mode:plus-lighter}
html.vt-lang.vt-to-ar::view-transition-new(root){--vt-x:10px}
html.vt-lang.vt-to-en::view-transition-new(root){--vt-x:-10px}
html.vt-lang.vt-calm::view-transition-old(root){animation:vtFadeOut .22s linear both}
html.vt-lang.vt-calm::view-transition-new(root){animation:vtFadeIn .22s linear both}
@keyframes vtFadeOut{to{opacity:0}}
@keyframes vtFadeIn{from{opacity:0}}
@keyframes vtBlur{to{filter:blur(12px)}}
@keyframes vtFocus{from{filter:blur(12px);transform:translateX(var(--vt-x,0))}}
/* without view transitions: a plain fade */
main,footer,.nav-in>*{transition:opacity .2s var(--ease)}
body.lang-out main,body.lang-out footer,body.lang-out .nav-in>*{opacity:0}
body.lang-in main,body.lang-in footer,body.lang-in .nav-in>*{animation:langIn .5s var(--ease) both}
@keyframes langIn{from{opacity:0}to{opacity:1}}
html.ar-boot body{opacity:0}

/* ---------------- ARABIC TYPOGRAPHY ----------------
   Noto Kufi Arabic carries the Arabic; the Latin brand faces stay first in each stack, so AET, numbers and
   codes keep their usual letterforms. Arabic is never letter-spaced, never slanted, and needs more leading. */
html[lang=ar]{
  --f-display:"Montserrat","Noto Kufi Arabic","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Albert Sans","Noto Kufi Arabic","Helvetica Neue",Arial,sans-serif;
  --f-body:"Albert Sans","Noto Kufi Arabic","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono","Noto Kufi Arabic",ui-monospace,Menlo,Consolas,monospace;
}
html[lang=ar] body{line-height:1.8}
html[lang=ar] body :not(.stmt3,.stmt3 *,.pp-wrap,.pp-wrap *,.lp,.lp *,#mrz,#lgl,#lgl *,#lghash,.vw-bar,.vw-bar *){letter-spacing:0!important}
html[lang=ar] em,html[lang=ar] i{font-style:normal}
html[lang=ar] .hh1{font-size:clamp(34px,4.1vw,60px);line-height:1.42}
html[lang=ar] .hh1.ph{font-size:clamp(32px,3.7vw,54px)}
html[lang=ar] .hh1 span{font-weight:700}
html[lang=ar] .h1,html[lang=ar] .contact .h1{font-size:clamp(36px,4.6vw,64px);line-height:1.36}
html[lang=ar] .h1 .tw{font-weight:700}
html[lang=ar] .h2{font-size:clamp(30px,3.9vw,53px);line-height:1.42}
html[lang=ar] .slide b{line-height:1.45}
html[lang=ar] .rows .nm{white-space:normal}
html[lang=ar] .scr-l{flex-wrap:wrap}
html[lang=ar] .scr-l i{white-space:nowrap}
html[lang=ar] .lede{line-height:1.85}
html[lang=ar] .questions p{line-height:1.38}
html[lang=ar] .how-step h3,html[lang=ar] .fin h3,html[lang=ar] .j-body h3,html[lang=ar] .agree-q,html[lang=ar] .quote{line-height:1.45}
html[lang=ar] .adv b,html[lang=ar] .leader b,html[lang=ar] .lcov.deck b,html[lang=ar] .sector b,html[lang=ar] .steps5 b,html[lang=ar] .journeyline b,html[lang=ar] .lens b,html[lang=ar] .s3b b{line-height:1.5}
html[lang=ar] .lens span:last-child,html[lang=ar] .sector>span:last-child,html[lang=ar] .persp{line-height:1.8}
html[lang=ar] .eyebrow,html[lang=ar] .hcaps{font-size:13.5px}
html[lang=ar] .lens .n,html[lang=ar] .steps5 .n,html[lang=ar] .journeyline .k,html[lang=ar] .tile .tk{font-size:12px}
html[lang=ar] .phase .k,html[lang=ar] .pat .k,html[lang=ar] .how-step .k,html[lang=ar] .rt .n,html[lang=ar] .leader .k{font-size:12.5px}
html[lang=ar] .sector .tag,html[lang=ar] .j-img .tag,html[lang=ar] .ptag,html[lang=ar] .pmeta span,html[lang=ar] .adv .k,html[lang=ar] .cred dt,html[lang=ar] .cred-h,html[lang=ar] .lg-h,html[lang=ar] .mkt-top .small,html[lang=ar] .rt em,html[lang=ar] .badge,html[lang=ar] .lmeta,html[lang=ar] .cv-k,html[lang=ar] .core-box p,html[lang=ar] .f-grid h4,html[lang=ar] .leader .role{font-size:12px}
html[lang=ar] .hud,html[lang=ar] .pill,html[lang=ar] .rows .src,html[lang=ar] .rows .stt,html[lang=ar] .pol-h span,html[lang=ar] .pol-r li em,html[lang=ar] .pol-o b,html[lang=ar] .ig span,html[lang=ar] .ig-c span,html[lang=ar] .scr-l i,html[lang=ar] .scr-q .k,html[lang=ar] .scr-c li>div span,html[lang=ar] .scr-r .mono,html[lang=ar] .prov div em,html[lang=ar] .vw-ctl .vo{font-size:11.5px}
html[lang=ar] .case-top .id{font-size:12.5px}

/* ---------------- RIGHT TO LEFT ----------------
   Flex and grid follow the direction by themselves; these rules mirror what is placed by hand.
   Specimens and system output stay left to right: the passport, the bank statement, the audit log, player controls. */
html[dir=rtl] .stmt3,html[dir=rtl] .pp-wrap,html[dir=rtl] .lp,html[dir=rtl] #mrz,html[dir=rtl] #lgl,html[dir=rtl] #lghash,html[dir=rtl] .vw-bar{direction:ltr}
html[dir=rtl] input[type=email],html[dir=rtl] #pw{text-align:right}
html[dir=rtl] .h1 .tw,html[dir=rtl] .hh1 span{padding-right:0;padding-left:.04em}
html[dir=rtl] .btn:hover .arrow-r,html[dir=rtl] .lcard:hover .lgo .arrow-r{transform:translateX(-3px)}
/* hero */
@media (min-width:1001px){html[dir=rtl] .globe-wrap{margin-right:0;margin-left:-18%}}
html[dir=rtl] .globe-tag{transform:translate(18px,-50%)}
html[dir=rtl] .globe-tag svg{margin-right:0;margin-left:-2px}
@media (max-width:600px){html[dir=rtl] .globe-tag{transform:translate(-50%,calc(-100% - 16px))}}
html[dir=rtl] .lens{padding:22px 0 30px 18px}
html[dir=rtl] .lens+.lens{padding-right:18px;border-left:0;border-right:1px solid var(--line)}
@media (max-width:820px){html[dir=rtl] .lens:nth-child(odd){border-right:0;padding-right:0}}
/* rail */
@keyframes beamr{0%{left:calc(90% - 80px);opacity:0;animation-timing-function:cubic-bezier(.45,0,.25,1)}4%{opacity:1}16%{left:calc(70% - 40px)}20%{left:calc(70% - 40px);animation-timing-function:cubic-bezier(.45,0,.25,1)}32%{left:calc(50% - 40px)}36%{left:calc(50% - 40px);animation-timing-function:cubic-bezier(.45,0,.25,1)}48%{left:calc(70% - 40px)}52%{left:calc(70% - 40px);animation-timing-function:cubic-bezier(.4,0,.3,1)}86%{left:10%;opacity:1}89%,100%{left:10%;opacity:0}}
html[dir=rtl] .rail .beam{animation-name:beamr}
@media (max-width:860px){
  html[dir=rtl] .rail{padding-left:0;padding-right:4px}
  html[dir=rtl] .rail::before{left:auto;right:44px}
  html[dir=rtl] .node{text-align:right}
}
/* home: capabilities, steps, sectors, why, film, contact */
html[dir=rtl] .cap::after{content:"←";right:auto;left:24px;transform:translateX(6px)}
html[dir=rtl] .cap:hover::after{transform:none}
html[dir=rtl] .steps5 li{padding:28px 0 0 22px}
html[dir=rtl] .steps5 li::before{left:auto;right:0;background:linear-gradient(270deg,var(--gold),#e9cf9f)}
html[dir=rtl] .steps5 li.you.on::before{background:linear-gradient(270deg,var(--gold),var(--green))}
html[dir=rtl] .steps5 li::after{left:auto;right:0}
@media (max-width:900px){
  html[dir=rtl] .steps5 li{border-left:0;border-right:1px solid var(--line-2);padding:0 26px 28px 0}
  html[dir=rtl] .steps5 li::before{right:-1px}
  html[dir=rtl] .steps5 li::after{right:-5px}
}
@media (min-width:981px){
  html[dir=rtl] .wires{transform:scaleX(-1)}
  html[dir=rtl] .to{background:linear-gradient(270deg,var(--gold-2),var(--green-2))}
  html[dir=rtl] .to::after{right:auto;left:-2px;border-left:0;border-right:8px solid var(--green-2)}
}
html[dir=rtl] .persp .lnk{margin-left:0;margin-right:8px}
html[dir=rtl] .pmeta{left:auto;right:24px}
@media (min-width:901px){html[dir=rtl] .contact::before{background:linear-gradient(270deg,rgba(7,16,12,.95) 0%,rgba(7,16,12,.75) 45%,rgba(7,16,12,.35) 100%),url(img/colonnade.jpg) var(--face-x,25%) var(--face-y,50%)/cover}}
/* platform */
html[dir=rtl] .ptag{left:auto;right:22px}
html[dir=rtl] .h-tl,html[dir=rtl] .h-bl{left:auto;right:0}
html[dir=rtl] .h-tr{right:auto;left:0}
html[dir=rtl] .h-br{right:auto;left:0;text-align:left}
html[dir=rtl] .chks span{padding:6px 26px 6px 10px}
html[dir=rtl] .chks span::before{left:auto;right:9px}
html[dir=rtl] .scr-q .arn{text-align:right}
html[dir=rtl] .scr-c .sc{text-align:left}
html[dir=rtl] .scr-c .bar i{background:linear-gradient(270deg,var(--green),var(--gold))}
html[dir=rtl] .pol-r li em{transform:translateX(-6px)}
html[dir=rtl] .pol-r li.on em{transform:none}
html[dir=rtl] .ig-c{padding-left:0;padding-right:36px}
html[dir=rtl] .ig-c::before{left:auto;right:20px}
html[dir=rtl] .ig-c i{left:auto;right:17px}
html[dir=rtl] .rows .stt{text-align:left}
html[dir=rtl] .f5{background:linear-gradient(250deg,#3d2a14,#8d6b3d 60%,#cfa96f)}
html[dir=rtl] .pillars div:nth-child(odd){padding-right:0;padding-left:16px}
html[dir=rtl] input[type=range]{background:linear-gradient(270deg,var(--gold) var(--v,60%),var(--line-2) var(--v,60%))}
html[dir=rtl] .pv{transform:scaleX(-1)}
html[dir=rtl] .pv text{transform:scaleX(-1);transform-box:fill-box;transform-origin:center}
html[dir=rtl] .j-img .tag{left:auto;right:22px}
html[dir=rtl] .journeyline li::before{left:auto;right:0}
html[dir=rtl] .band::before{background:radial-gradient(60% 120% at 15% 50%,rgba(207,169,111,.12),transparent 60%),radial-gradient(50% 100% at 90% 0%,rgba(11,106,60,.25),transparent 70%)}
/* about */
html[dir=rtl] .cred::after{right:auto;left:-80px}
html[dir=rtl] .leader::after{left:auto;right:0}
html[dir=rtl] .adv::after{right:auto;left:-50px}
html[dir=rtl] .gov div{padding:30px 0 34px 28px}
html[dir=rtl] .gov div:not(:nth-child(3n+1)){padding-right:28px;border-left:0;border-right:1px solid var(--ink-line)}
@media (max-width:900px){html[dir=rtl] .gov div{border-right:0!important}}
html[dir=rtl] .phase::after{right:auto;left:-13px;transform:rotate(-135deg)}
/* library and dialogs */
html[dir=rtl] .lcard{text-align:right}
html[dir=rtl] .lcov.deck::before{right:auto;left:-60px}
html[dir=rtl] .lnk-btn{margin-left:0;margin-right:auto}
html[dir=rtl] .lib-notes div{padding:26px 0 0 26px}
html[dir=rtl] .lib-notes div+div{padding-right:26px;border-left:0;border-right:1px solid var(--line)}
@media (max-width:640px){html[dir=rtl] .lib-notes div+div{padding-right:0;border-right:0}}
html[dir=rtl] .dlg .x{right:auto;left:14px}
html[dir=rtl] .vw-top{padding-right:0;padding-left:48px}
html[dir=rtl] .vw-ctl .vo{margin-left:0;margin-right:auto}
html[lang=ar] .op-rail .l{font-size:15px;line-height:1.5}

html[lang=ar] .m-note{font-size:14.5px;line-height:1.75}

/* ---------------- SELECTION THAT FLOWS ----------------
   Segmented controls (the navigation, filters, tabs, the film's language) show the choice with one plate.
   On a new choice the plate flows toward it like a drop, leading edge first, and settles without bounce (moved by script).
   Each label is painted with a gradient that turns colour exactly at the plate's edges, so the text under
   the plate changes as the plate passes. A control that wraps onto two lines keeps its plain selected state. */
@property --gl-l{syntax:'<length>';inherits:true;initial-value:0px}
@property --gl-r{syntax:'<length>';inherits:true;initial-value:0px}
@property --gl-t{syntax:'<length>';inherits:true;initial-value:0px}
@property --gl-b{syntax:'<length>';inherits:true;initial-value:0px}
.glide{position:relative;isolation:isolate;--c-on:var(--bg);--c-off:var(--fg-2);--gl-bg:var(--fg)}
.gl-plate{display:none}
.glide>.gl-plate{display:block;position:absolute;z-index:-1;left:var(--gl-l);right:var(--gl-r);top:var(--gl-t);bottom:var(--gl-b);margin:0;padding:0;list-style:none;border-radius:var(--gl-rl,var(--gl-rad,999px)) var(--gl-rr,var(--gl-rad,999px)) var(--gl-rr,var(--gl-rad,999px)) var(--gl-rl,var(--gl-rad,999px));background:var(--gl-bg);pointer-events:none}
.glide.gl-none>.gl-plate{visibility:hidden}
.glide>button,.glide>a,.glide>li>a{background-color:transparent!important;color:transparent!important;-webkit-background-clip:text!important;background-clip:text!important;
  background-image:linear-gradient(90deg,var(--c-off) calc(var(--gl-l) - var(--ox,0px)),var(--c-on) calc(var(--gl-l) - var(--ox,0px)),var(--c-on) calc(var(--gl-w,0px) - var(--gl-r) - var(--ox,0px)),var(--c-off) calc(var(--gl-w,0px) - var(--gl-r) - var(--ox,0px)))!important}
.glide>button:hover,.glide>a:hover,.glide>li>a:hover{--c-off:var(--fg)}
#navlinks.glide{--c-on:var(--fg);--gl-bg:rgba(255,255,255,.075)}
@media (forced-colors:active){.glide>button,.glide>a,.glide>li>a{color:ButtonText!important;background-image:none!important}.glide>.gl-plate{background:Highlight}}

/* ---------------- SHAPE TRIAL (27 Oct): corners instead of pills and circles ----------------
   Active while the page root carries data-shape="corner" (set in the build: SHAPE in build_site.py).
   Without it every element returns to its pill or circle. Small status dots, glows, rings and the globe stay round.
   Scale: 4 check marks · 6 badges and status tags · 8 chips, tags and segment items · 10–12 buttons and
   segmented controls · 14–22 larger icon buttons. Tiles and panels keep their radius. */
:root[data-shape=corner]{--gl-rad:8px}
:root[data-shape=corner] .btn{border-radius:12px}
:root[data-shape=corner] .nav .btn,:root[data-shape=corner] .btn-sm{border-radius:10px}
:root[data-shape=corner] .lang{border-radius:10px}
:root[data-shape=corner] .nav ul,:root[data-shape=corner] .tabs,:root[data-shape=corner] .seg,:root[data-shape=corner] .seg.seg-sm,:root[data-shape=corner] .vw-lang{border-radius:12px}
:root[data-shape=corner] .nav ul a,:root[data-shape=corner] .tabs button,:root[data-shape=corner] .seg button,:root[data-shape=corner] .vw-lang button{border-radius:8px}
:root[data-shape=corner] .globe-tag,:root[data-shape=corner] .out-list span,:root[data-shape=corner] .chks span,:root[data-shape=corner] .keys span,:root[data-shape=corner] .metrics span:not(.small),:root[data-shape=corner] .chips span,:root[data-shape=corner] .jump a{border-radius:8px}
:root[data-shape=corner] .pill,:root[data-shape=corner] .f5 .you,:root[data-shape=corner] .badge,:root[data-shape=corner] .vw-ctl .vo{border-radius:6px}
:root[data-shape=corner] .stt .v::before,:root[data-shape=corner] .chks span::before{border-radius:4px}
:root[data-shape=corner] summary .pm{border-radius:8px}
:root[data-shape=corner] .vw-ctl button{border-radius:9px}
:root[data-shape=corner] .dlg .x{border-radius:10px}
:root[data-shape=corner] .lockc{border-radius:12px}
:root[data-shape=corner] .lockb,:root[data-shape=corner] .dlg-ic{border-radius:14px}
:root[data-shape=corner] .s3a .pl{border-radius:16px}
:root[data-shape=corner] .pkg .seal{border-radius:18px}
:root[data-shape=corner] .play,:root[data-shape=corner] .node .dot{border-radius:22px}
:root[data-shape=corner] .lcov .play{border-radius:16px}
:root[data-shape=corner] input[type=range]::-webkit-slider-thumb{border-radius:5px}
:root[data-shape=corner] input[type=range]::-moz-range-thumb{border-radius:5px}

/* ---------------- HEADER: one height for every control ---------------- */
.nav ul{height:40px;padding:3px;align-items:stretch}
.nav ul li{display:flex}
.nav ul a{display:flex;align-items:center;padding:0 14px}
.nav .btn{height:40px;padding:0 18px}
.lang{height:40px}
.burger{width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02);place-content:center;gap:6px;color:var(--fg)}
.burger span{width:18px;margin:0;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
@media (max-width:1000px){.nav .burger{display:grid}}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
:root[data-shape=corner] .burger{border-radius:10px}

/* ---------------- PRESS: glass that responds ----------------
   As in Apple's newest systems: a pressed control grows a touch and light blooms from the point of contact,
   then it settles back without bounce. */
.btn,.lang,.dlg .x,.burger{isolation:isolate}
.btn:not(.btn-gold),.lang,.burger{position:relative}
.btn::before,.lang::before,.dlg .x::before,.burger::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(255,255,255,.2),rgba(255,255,255,.06) 42%,transparent 72%);transition:opacity .6s cubic-bezier(.2,.8,.2,1)}
.btn-gold::before{background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(255,250,236,.75),rgba(255,242,214,.2) 44%,transparent 76%)}
.light .btn-line::before{background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(11,18,14,.08),transparent 70%)}
.is-pressed::before{opacity:1;transition:opacity .12s ease-out}
.btn.is-pressed,.lang.is-pressed,.dlg .x.is-pressed{transform:scale(1.04);transition:transform .16s cubic-bezier(.3,.7,.2,1),background .3s,color .3s,border-color .3s,filter .3s}
.burger.is-pressed{transform:scale(1.08);transition:transform .16s cubic-bezier(.3,.7,.2,1)}
.btn.was-pressed,.lang.was-pressed,.dlg .x.was-pressed,.burger.was-pressed{transition:transform .5s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,border-color .3s,filter .3s}
/* menu rows light up under the finger */
.menu a{position:relative;isolation:isolate}
.menu a:not(.btn)::before{content:"";position:absolute;inset:3px -14px;z-index:-1;border-radius:12px;background:rgba(255,255,255,.07);opacity:0;transform:scale(.97);pointer-events:none;
  transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)}
.menu a:not(.btn).is-pressed::before{opacity:1;transform:none;transition-duration:.12s}

/* the phone menu grows out of its button and folds back into it */
.menu.m-open{animation:menuIn .5s cubic-bezier(.2,.8,.2,1) both}
.menu.m-close{animation:menuOut .3s cubic-bezier(.4,0,.2,1) both}
.menu.m-open>*{animation:menuRow .55s cubic-bezier(.2,.8,.2,1) both}
.menu.m-open>*:nth-child(2){animation-delay:.03s}.menu.m-open>*:nth-child(3){animation-delay:.06s}.menu.m-open>*:nth-child(4){animation-delay:.09s}.menu.m-open>*:nth-child(5){animation-delay:.12s}
@keyframes menuIn{from{clip-path:inset(var(--m-t,0) var(--m-r,0) var(--m-b,100%) var(--m-l,100%) round 12px);opacity:.5}to{clip-path:inset(0 0 0 0 round 0);opacity:1}}
@keyframes menuOut{from{clip-path:inset(0 0 0 0 round 0);opacity:1}to{clip-path:inset(var(--m-t,0) var(--m-r,0) var(--m-b,100%) var(--m-l,100%) round 12px);opacity:.3}}
@keyframes menuRow{from{opacity:0;transform:translateY(-10px)}}

/* segmented controls: the plate can be dragged along the options (see glide.js); labels are not selectable while doing so */
.glide>button,.glide>a,.glide>li>a{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

@media (prefers-reduced-motion:reduce){
  .btn.is-pressed,.lang.is-pressed,.dlg .x.is-pressed,.burger.is-pressed{transform:none}
  .menu.m-open,.menu.m-close,.menu.m-open>*{animation:none}
}