:root{
  /* ---- core surfaces ---- */
  --ink:#04212C;          /* deep indigo-black */
  --ink-soft:#0A3444;     /* raised surface on dark */
  --paper:#F1F5F6;        /* page */
  --paper-lift:#FAFCFD;   /* raised surface on light */
  --slate:#4C6169;        /* secondary text on light */
  --rule:#D7E1E4;
  --rule-dark:#123B4D;

  /* ---- the three brand colours ---- */
  --violet:#0079CA;       /* purplish blue — primary */
  --violet-lift:#1B93E4;
  --violet-soft:#79C6F4;  /* violet on dark surfaces */
  --amber:#2ED89C;        /* reddish yellow — emphasis */
  --amber-soft:#6FEDC4;
  --cyan:#1FA6B8;         /* cyan — data + technical */
  --cyan-soft:#79DCE6;

  /* ---- text on dark ---- */
  --on-dark-1:#EAF2F4;
  --on-dark-2:#A9C2CB;
  --on-dark-3:#7194A0;

  /* ---- gradients ---- */
  --grad-brand:linear-gradient(100deg,var(--violet) 0%,#12A0B4 42%,var(--cyan) 100%);
  --grad-warm:linear-gradient(100deg,var(--violet) 0%,#12A0B4 50%,var(--amber) 100%);

  --display:"Newsreader",Georgia,serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --gutter:clamp(20px,5vw,72px);
  --band:clamp(64px,9vw,132px);
  --maxw:1320px;

  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:300;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.6rem,6.1vw,5.05rem);line-height:1.02}
h2{font-size:clamp(1.95rem,3.5vw,3.05rem);line-height:1.1}
h3{font-size:clamp(1.3rem,1.7vw,1.66rem);line-height:1.22}
p{margin:0 0 1.05em}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
img{max-width:100%;display:block}
section[id],main{scroll-margin-top:96px}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- primitives ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band)}
.band-tight{padding-block:clamp(44px,6vw,80px)}
.dark{background:var(--ink);color:var(--paper)}
.dark .lede{color:var(--on-dark-2)}
.lift{background:var(--paper-lift)}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--violet);display:flex;align-items:center;gap:12px;margin:0 0 26px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule);max-width:120px}
.dark .eyebrow{color:var(--violet-soft)}
.dark .eyebrow::after{background:var(--rule-dark)}
.lede{font-size:clamp(1.05rem,1.35vw,1.24rem);line-height:1.58;color:var(--slate);max-width:64ch}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.dark .rule{background:var(--rule-dark)}

.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 26px;
  font-size:14px;font-weight:500;letter-spacing:.02em;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  transition:background .25s,color .25s,transform .25s;
}
.btn:hover{background:var(--violet);border-color:var(--violet);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dark .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.dark .btn:hover{background:var(--violet-lift);border-color:var(--violet-lift);color:#fff}
.dark .btn-ghost{background:transparent;color:var(--paper);border-color:var(--rule-dark)}
.dark .btn-ghost:hover{background:var(--paper);color:var(--ink)}
.arrow{transition:transform .25s}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- masthead ---------- */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--violet);width:0;z-index:120}
.mast{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(243,243,249,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.mast.stuck{border-bottom-color:var(--rule)}
.mast-in{display:flex;align-items:center;gap:32px;height:82px;transition:height .3s}
.mast.stuck .mast-in{height:66px}
.mark{display:flex;align-items:baseline;gap:11px;flex-shrink:0}
.mark-mono{
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;
  border:1px solid var(--ink);padding:4px 6px;line-height:1;
}
.mark-word{font-family:var(--display);font-size:21px;letter-spacing:.01em}
.mark-word em{font-style:normal;color:var(--violet)}
.nav{display:flex;gap:30px;margin-left:auto;align-items:center}
.nav a{
  font-size:13.5px;font-weight:500;letter-spacing:.03em;padding:6px 0;
  position:relative;color:var(--slate);transition:color .2s;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--violet);transition:width .28s;
}
.nav a:hover,.nav a.on{color:var(--ink)}
.nav a:hover::after,.nav a.on::after{width:100%}
.mast .btn{padding:12px 20px}
.burger{display:none;margin-left:auto;width:42px;height:42px;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.drawer{display:none}

/* ---------- hero ---------- */
.hero{padding-top:clamp(130px,15vw,190px);padding-bottom:clamp(50px,6vw,80px);position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,5vw,80px);align-items:end}
.hero h1{max-width:20ch}
.hero h1 em{font-style:italic;font-weight:200;color:var(--violet)}
.hero-sub{margin-top:30px;max-width:52ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.hero-side{border-left:1px solid var(--rule);padding-left:26px}
.hero-side dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);margin-bottom:5px}
.hero-side dd{margin:0 0 22px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.hero-side dd:last-child{margin-bottom:0}

/* ticker */
.ticker{
  margin-top:clamp(48px,6vw,74px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:16px 0;display:flex;align-items:center;gap:18px;overflow:hidden;width:100%;
}
.ticker-view{flex:1 1 auto;min-width:0;overflow:hidden;position:relative}
.ticker-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);flex-shrink:0}
.ticker-live{width:6px;height:6px;background:var(--violet);border-radius:50%;flex-shrink:0;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.ticker-track{display:flex;gap:0;white-space:nowrap;width:max-content;animation:slide 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-track span{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);padding-inline:20px;position:relative}
.ticker-track span::after{content:"";position:absolute;right:0;top:4px;bottom:4px;width:1px;background:var(--rule)}

/* ---------- statement ---------- */
.statement{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(30px,6vw,90px)}
.statement h2{font-size:clamp(1.6rem,2.6vw,2.35rem);max-width:22ch}
.statement h2 em{font-style:italic;color:var(--violet-soft)}
.pillars{display:grid;gap:0;margin-top:clamp(46px,6vw,74px);grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule-dark)}
.pillar{padding:26px 26px 8px 0;border-right:1px solid var(--rule-dark)}
.pillar:last-child{border-right:0;padding-right:0}
.pillar-n{font-family:var(--mono);font-size:11px;color:var(--violet-soft);letter-spacing:.1em;display:block;margin-bottom:14px}
.pillar h3{font-size:1.12rem;margin-bottom:9px}
.pillar p{font-size:14px;line-height:1.55;color:var(--on-dark-2);margin:0}

/* ---------- practices ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:clamp(34px,4vw,58px)}
.sec-head h2{max-width:26ch}
.sec-count{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--slate);text-transform:uppercase}
.prac{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.prac-list{border-top:1px solid var(--rule)}
.prac-btn{
  display:flex;gap:16px;align-items:baseline;width:100%;text-align:left;
  padding:20px 8px 20px 0;border-bottom:1px solid var(--rule);
  transition:padding-left .3s,background .3s;position:relative;
}
.prac-btn::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--violet);
  transform:scaleY(0);transform-origin:top;transition:transform .3s;
}
.prac-btn:hover{padding-left:14px}
.prac-btn.on{padding-left:14px;background:var(--paper-lift)}
.prac-btn.on::before{transform:scaleY(1)}
.prac-btn i{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--slate);letter-spacing:.08em;flex-shrink:0;padding-top:5px}
.prac-btn strong{font-family:var(--display);font-weight:300;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.2}
.prac-btn.on strong{color:var(--violet)}
.prac-panel{border:1px solid var(--rule);background:var(--paper-lift);padding:clamp(22px,3.4vw,44px)}
.prac-panel h3{margin-bottom:14px;max-width:26ch}
.prac-panel .lede{font-size:15.5px;max-width:none}
.stack{margin-top:26px;border-top:1px solid var(--rule);padding-top:22px}
.stack-row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;padding:11px 0;border-bottom:1px solid var(--rule)}
.stack-row:last-child{border-bottom:0}
.stack-row dt{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--violet);padding-top:3px}
.stack-row dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.fade-in{animation:rise .45s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- index (signature) ---------- */
.idx-tools{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.idx-search{position:relative;flex:1;min-width:250px}
.idx-search input{
  width:100%;padding:15px 16px 15px 40px;font-family:var(--mono);font-size:13px;
  background:transparent;border:1px solid var(--rule-dark);color:var(--paper);
}
.idx-search input::placeholder{color:var(--on-dark-3)}
.idx-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.5}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 13px;border:1px solid var(--rule-dark);color:var(--on-dark-2);transition:.22s;
}
.chip:hover{border-color:var(--paper);color:var(--paper)}
.chip.on{background:var(--violet);border-color:var(--violet);color:#fff}
.idx-meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--on-dark-3);margin-bottom:14px}
.idx-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  border-top:1px solid var(--rule-dark);border-left:1px solid var(--rule-dark);
}
.idx-item{
  border-right:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark);
  padding:13px 15px;font-family:var(--mono);font-size:12.5px;color:var(--on-dark-1);
  display:flex;justify-content:space-between;gap:10px;transition:background .2s,color .2s;
}
.idx-item:hover{background:var(--ink-soft);color:#fff}
.idx-item b{font-weight:400;font-size:9.5px;letter-spacing:.12em;color:var(--on-dark-3);padding-top:3px}
.idx-empty{padding:46px 0;font-family:var(--mono);font-size:13px;color:var(--on-dark-2)}
.idx-empty a{color:var(--violet-soft);border-bottom:1px solid currentColor}

/* ---------- engagement ---------- */
.eng{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.eng-card{padding:30px 28px 34px 0;border-right:1px solid var(--rule);display:flex;flex-direction:column}
.eng-card:last-child{border-right:0;padding-right:0}
.eng-card h3{font-size:1.22rem;margin-bottom:12px;max-width:16ch}
.eng-card p{font-size:14.5px;line-height:1.55;color:var(--slate)}
.eng-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:18px}
.eng-best{margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);font-size:13.5px;line-height:1.5}
.eng-best em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:6px}

/* ---------- delivery ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.step{background:var(--paper);padding:30px 26px 34px;position:relative;transition:background .3s}
.step:hover{background:var(--paper-lift)}
.step-n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--violet);display:block;margin-bottom:20px}
.step h3{font-size:1.1rem;margin-bottom:10px}
.step p{font-size:14px;line-height:1.55;color:var(--slate);margin:0}

/* ---------- work / portfolio ---------- */
.work-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.wchip{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 13px;border:1px solid var(--rule);color:var(--slate);transition:.22s;
}
.wchip:hover{border-color:var(--ink);color:var(--ink)}
.wchip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
/* Each card carries its own border. The grid used to paint a rule colour
   behind 1px gaps, which meant filtering to one result left two empty
   tracks showing as a grey slab beside it. */
.card{background:var(--paper);border:1px solid var(--rule);padding:0;display:flex;flex-direction:column}
.card-media{aspect-ratio:16/10;background:var(--ink-soft);position:relative;overflow:hidden;display:grid;place-items:center}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-media span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-3)}
.card-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.card-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:11px}
.card h3{font-size:1.14rem;margin-bottom:9px}
.card p{font-size:14px;line-height:1.55;color:var(--slate);margin:0 0 16px}
.card-foot{margin-top:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--slate);border-top:1px solid var(--rule);padding-top:13px}
.card-del{align-self:flex-start;margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--violet);border-bottom:1px solid currentColor}

.drop{
  border:1px dashed var(--rule);background:var(--paper-lift);padding:clamp(30px,4vw,52px);
  text-align:center;transition:.25s;margin-top:34px;
}
.drop.hot{border-color:var(--violet);background:#fff}
.drop h3{font-size:1.18rem;margin-bottom:9px}
.drop p{font-size:14px;color:var(--slate);max-width:56ch;margin-inline:auto}
.drop-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--slate);margin-top:18px}
.drop input[type=file]{display:none}

/* ---------- contact ---------- */
.cx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,6vw,88px)}
.cx h2 em{font-style:italic;color:var(--violet-soft)}
.cx-mail{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:clamp(13px,1.5vw,16px);letter-spacing:.02em;border-bottom:1px solid var(--rule-dark);padding-bottom:8px;margin-top:8px;transition:.25s}
.cx-mail:hover{border-color:var(--violet-soft);color:var(--violet-soft)}
.cx-facts{margin-top:38px;border-top:1px solid var(--rule-dark)}
.cx-facts div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--rule-dark);font-size:14.5px}
.cx-facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-soft);padding-top:3px}
.cx-facts dd{margin:0;color:var(--on-dark-1)}
form{display:grid;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:8px}
input,select,textarea{
  width:100%;padding:13px 14px;background:transparent;border:1px solid var(--rule-dark);
  color:var(--paper);font-family:var(--body);font-size:15px;
}
select option{color:#111}
textarea{resize:vertical;min-height:118px}
input:hover,select:hover,textarea:hover{border-color:#16536B}
.err{border-color:var(--violet-lift)!important}
.f-msg{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--violet-soft);min-height:18px}
.f-msg.ok{color:#26C78F}
.f-note{font-family:var(--mono);font-size:10.5px;line-height:1.7;letter-spacing:.04em;color:var(--on-dark-3)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--on-dark-2);padding-block:clamp(46px,5vw,70px) 30px;border-top:1px solid var(--rule-dark)}
.foot-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px;padding-bottom:44px}
.foot .mark-mono{border-color:#16536B;color:var(--paper)}
.foot .mark-word{color:var(--paper)}
.foot .foot-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-soft);margin:0 0 16px;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px}
.foot a:hover{color:var(--paper)}
.foot-note{font-size:14px;line-height:1.6;max-width:38ch;margin-top:18px}
.foot-btm{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--rule-dark);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .ticker-track,.ticker-live{animation:none}
  .fade-in{animation:none}
}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .hero-grid,.statement,.prac,.cx{grid-template-columns:1fr}
  .hero-side{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:26px;max-width:60ch}
  .hero-side dd{margin-bottom:18px}
  .pillars,.eng,.steps{grid-template-columns:1fr 1fr}
  .pillar,.eng-card{border-right:1px solid var(--rule-dark)}
  .eng-card{border-right-color:var(--rule)}
  .pillar:nth-child(2n),.eng-card:nth-child(2n){border-right:0}
  .cx-facts{margin-bottom:10px}
}
@media(max-width:820px){
  .nav,.mast .btn{display:none}
  .burger{display:flex}
  .drawer{display:block;position:fixed;inset:0 0 0 auto;width:min(88vw,360px);background:var(--ink);color:var(--paper);z-index:110;transform:translateX(100%);transition:transform .38s cubic-bezier(.2,.7,.2,1);padding:26px var(--gutter);overflow:auto}
  .drawer.open{transform:none}
  .drawer nav{display:grid;gap:2px;margin-top:40px}
  .drawer nav a{font-family:var(--display);font-size:1.6rem;padding:12px 0;border-bottom:1px solid var(--rule-dark)}
  .drawer .btn{margin-top:28px;width:100%;justify-content:center}
  .drawer-x{position:absolute;top:22px;right:var(--gutter);font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--on-dark-2)}
  .scrim{position:fixed;inset:0;background:rgba(4,33,44,.66);z-index:105;opacity:0;pointer-events:none;transition:opacity .3s}
  .scrim.on{opacity:1;pointer-events:auto}
}
@media(max-width:640px){
  .pillars,.eng,.steps,.f2{grid-template-columns:1fr}
  .pillar,.eng-card{border-right:0;border-bottom:1px solid var(--rule-dark);padding-right:0}
  .eng-card{border-bottom-color:var(--rule)}
  .pillar:last-child,.eng-card:last-child{border-bottom:0}
  .stack-row{grid-template-columns:1fr;gap:6px}
  .sec-head{align-items:flex-start}
}

/* ================================================================
   MULTI-PAGE ADDITIONS
   ================================================================ */

/* ---------- page hero (subpages) ---------- */
.phero{padding-top:clamp(120px,13vw,168px);padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--rule)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,80px);align-items:end}
.phero h1{font-size:clamp(2.15rem,4.6vw,3.7rem);max-width:24ch}
.phero h1 em{font-style:italic;font-weight:200;color:var(--violet)}
.phero .lede{margin-top:24px}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin:0 0 22px;display:flex;gap:10px;align-items:center}
.crumb a{color:var(--violet)}
.crumb a:hover{border-bottom:1px solid currentColor}
.phero-facts{border-left:1px solid var(--rule);padding-left:26px}
.phero-facts div{padding:11px 0;border-bottom:1px solid var(--rule)}
.phero-facts div:last-child{border-bottom:0}
.phero-facts dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin-bottom:5px}
.phero-facts dd{margin:0;font-size:14.5px;line-height:1.45}

/* ---------- generic split + prose ---------- */
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(30px,5vw,84px);align-items:start}
.split h2{max-width:22ch}
.prose{max-width:70ch}
.prose h3{margin:38px 0 12px}
.prose ul{margin:0 0 20px;padding-left:20px}
.prose li{margin-bottom:8px;color:var(--slate)}
.dark .prose li{color:var(--on-dark-2)}

/* ---------- capability groups (practice pages) ---------- */
.caps{border-top:1px solid var(--rule)}
.cap{display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;padding:20px 0;border-bottom:1px solid var(--rule)}
.cap dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);padding-top:3px}
.cap dd{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}

/* ---------- engagement examples ---------- */
.exs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.ex{background:var(--paper);padding:28px 26px 32px;display:flex;flex-direction:column}
.ex-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:14px}
.ex h3{font-size:1.1rem;margin-bottom:10px}
.ex p{font-size:14px;line-height:1.55;color:var(--slate);margin:0}
.ex-meta{margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--slate)}

/* ---------- deliverables ---------- */
.dels{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--rule-dark)}
.del{padding:22px 30px 24px 0;border-bottom:1px solid var(--rule-dark);display:grid;grid-template-columns:26px 1fr;gap:14px}
.del i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--violet-soft);padding-top:4px}
.del h3{font-size:1.02rem;margin-bottom:6px}
.del p{font-size:14px;line-height:1.55;color:var(--on-dark-2);margin:0}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--rule)}
.acc-item{border-bottom:1px solid var(--rule)}
.acc-q{display:flex;justify-content:space-between;gap:20px;width:100%;text-align:left;padding:22px 0;font-family:var(--display);font-weight:300;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.3}
.acc-q span{font-family:var(--mono);font-size:16px;color:var(--violet);flex-shrink:0;transition:transform .3s}
.acc-item.open .acc-q span{transform:rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.2,.7,.2,1)}
.acc-a p{font-size:15px;line-height:1.62;color:var(--slate);max-width:72ch;padding-bottom:24px;margin:0}

/* ---------- spearhead (two lead practices) ---------- */
.spears{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-dark);border:1px solid var(--rule-dark)}

.spear-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet-soft);margin-bottom:20px}
.spear h3{font-size:clamp(1.4rem,2.2vw,1.95rem);margin-bottom:14px;max-width:22ch}
.spear p{font-size:15px;line-height:1.6;color:var(--on-dark-2)}

.spear-link{margin-top:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);border-bottom:1px solid #16536B;padding-bottom:7px;align-self:flex-start;transition:.25s}
.spear-link:hover{border-color:var(--violet-soft);color:var(--violet-soft)}

/* ---------- other practices strip ---------- */
.strip{border-top:1px solid var(--rule)}
.strip a{display:grid;grid-template-columns:34px minmax(0,.9fr) minmax(0,1.4fr) 26px;gap:20px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--rule);transition:padding .3s,background .3s}
.strip a:hover{padding-left:14px;padding-right:14px;background:var(--paper-lift)}
.strip i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--slate)}
.strip h3{font-size:clamp(1.08rem,1.5vw,1.3rem)}
.strip p{font-size:14.5px;color:var(--slate);margin:0}
.strip span{font-family:var(--mono);color:var(--violet);text-align:right}

/* ---------- overlap / india band ---------- */
.overlap{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(34px,4vw,52px)}
.ov{background:var(--paper);padding:26px 24px 30px}
.ov strong{display:block;font-family:var(--display);font-weight:300;font-size:1.9rem;line-height:1;margin-bottom:12px}
.ov span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);display:block;margin-bottom:16px}
.ov p{font-size:14px;line-height:1.55;color:var(--slate);margin:0}

/* ---------- brand guide ---------- */
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.sw{padding:0;display:flex;flex-direction:column;background:var(--paper)}
.sw-chip{height:120px}
.sw-info{padding:16px 18px 20px;font-family:var(--mono);font-size:11px;line-height:1.9;letter-spacing:.04em}
.sw-info b{display:block;font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.sw-info em{font-style:normal;color:var(--slate)}
.logoboard{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.lb{background:var(--paper);padding:40px 30px;display:grid;place-items:center;min-height:190px}
.lb.on-ink{background:var(--ink)}
.lb.on-claret{background:var(--violet)}
.lb-cap{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);padding:12px 18px;border-top:1px solid var(--rule);background:var(--paper-lift)}
.specimen{border:1px solid var(--rule);padding:clamp(24px,3vw,40px);background:var(--paper-lift);margin-bottom:1px}
.specimen p{margin:0}
.spec-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:16px}
.spec-xl{font-family:var(--display);font-weight:200;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.02em}
.spec-lg{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.16}
.spec-body{font-size:17px;line-height:1.65;max-width:60ch}
.spec-mono{font-family:var(--mono);font-size:13px;letter-spacing:.06em}
.scale{width:100%;border-collapse:collapse;font-size:14px}
.scale th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);text-align:left;padding:0 16px 12px 0;border-bottom:1px solid var(--rule)}
.scale td{padding:13px 16px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.scale td:first-child{font-family:var(--mono);font-size:12px;white-space:nowrap}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-dark);border:1px solid var(--rule-dark)}
.do-col{background:var(--ink);padding:clamp(24px,3vw,36px)}
.do-col h3{margin-bottom:18px;font-size:1.15rem}
.do-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.do-col li{font-size:14.5px;line-height:1.5;color:var(--on-dark-2);padding-left:22px;position:relative}
.do-col li::before{position:absolute;left:0;font-family:var(--mono);font-size:12px}
.do-yes li::before{content:"✓";color:#26C78F}
.do-no li::before{content:"✕";color:var(--violet-soft)}
.dl-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ---------- admin / upload console ---------- */
.console{border:1px solid var(--rule);background:var(--paper-lift);padding:clamp(24px,3vw,40px);margin-top:34px}
.console h3{margin-bottom:8px}
.console-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
.console label{color:var(--slate)}
.console input,.console select,.console textarea{border-color:var(--rule);color:var(--ink)}
.console input:hover,.console textarea:hover{border-color:var(--ink)}
.console textarea{min-height:96px}
.console .full{grid-column:1/-1}
.state{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--slate);min-height:18px;margin-top:14px}
.state.ok{color:#128A63}.state.bad{color:var(--violet)}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--rule);padding:7px 11px;color:var(--slate)}
.pill b{width:6px;height:6px;border-radius:50%;background:var(--amber);display:block}
.pill.live b{background:#3E8E6B}.pill.off b{background:var(--violet)}

/* ---------- doc / legal ---------- */
.doc{max-width:78ch}
.doc h2{font-size:clamp(1.5rem,2.2vw,2rem);margin:44px 0 14px}
.doc h3{font-size:1.16rem;margin:30px 0 10px}
.doc p,.doc li{color:var(--slate);font-size:15.5px;line-height:1.68}
.doc ul{padding-left:20px;margin-bottom:18px}
.doc .mark-note{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--violet);background:var(--paper-lift);border-left:2px solid var(--violet);padding:12px 16px;margin:18px 0}

/* ---------- responsive additions ---------- */
@media(max-width:1080px){
  .phero-grid,.split,.spears,.dos{grid-template-columns:1fr}
  .phero-facts{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:20px}
  .exs,.overlap,.logoboard{grid-template-columns:1fr}
  .swatches{grid-template-columns:1fr 1fr}
  .strip a{grid-template-columns:28px 1fr;gap:8px 16px}
  .strip a p{grid-column:2}
  .strip a span{display:none}
}
@media(max-width:640px){
  .cap,.dels,.console-grid{grid-template-columns:1fr}
  .cap{gap:6px}
  .del{padding-right:0}
  .swatches{grid-template-columns:1fr}
}

/* ================================================================
   COLOUR ROLES — blue = structure, teal = data, green = emphasis
   (token names below are legacy; the values are brand 2.0)
   ================================================================ */
.stack-row dt,.cap dt,.ex-meta,.card-foot,.idx-item b,
.ticker-label,.hero-side dt,.phero-facts dt,.sw-info b,.spec-label{color:var(--cyan)}
.dark .stack-row dt,.dark .cap dt{color:var(--cyan-soft)}
.dark .eyebrow{color:var(--cyan-soft)}
.dark .eyebrow::after{background:linear-gradient(90deg,var(--cyan) ,transparent)}
.eyebrow::after{background:linear-gradient(90deg,var(--violet),transparent);opacity:.5}
.ticker-live{background:var(--cyan);box-shadow:0 0 0 0 rgba(31,166,184,.55)}

.pillar-n,.step-n,.spear-tag,.eng-tag,.card-tag,.del i{color:var(--amber)}
h1 em,h2 em,.phero h1 em,.hero h1 em{color:var(--amber)}
.dark h2 em,.statement h2 em,.cx h2 em{color:var(--amber-soft)}
.acc-q span{color:var(--amber)}
.figure-n{color:var(--amber)}

/* ================================================================
   ANIMATION LAYER
   ================================================================ */

/* ---- ambient aurora on dark bands ---- */
.dark{position:relative;isolation:isolate}
.aurora{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.aurora i{
  position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.34;
  will-change:transform;
}
.aurora i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-14vw;background:#0079CA;animation:drift1 26s ease-in-out infinite}
.aurora i:nth-child(2){width:38vw;height:38vw;right:-6vw;top:8vw;background:#0E93A8;animation:drift2 32s ease-in-out infinite}
.aurora i:nth-child(3){width:26vw;height:26vw;left:38vw;bottom:-12vw;background:#0A7A55;opacity:.22;animation:drift3 38s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,4vw,0) scale(1.14)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-5vw,6vw,0) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-7vw,-3vw,0)}}

/* ---- hero load sequence ---- */
.seq{opacity:0;transform:translateY(14px);animation:seqIn .8s var(--ease) forwards}
.seq-1{animation-delay:.05s}.seq-2{animation-delay:.16s}.seq-3{animation-delay:.30s}
.seq-4{animation-delay:.42s}.seq-5{animation-delay:.54s}.seq-6{animation-delay:.66s}
@keyframes seqIn{to{opacity:1;transform:none}}

.h-line{display:block;overflow:hidden}
.h-line span{display:inline-block;transform:translateY(105%);animation:lineUp .95s var(--ease) forwards}
.h-line:nth-of-type(1) span{animation-delay:.10s}
.h-line:nth-of-type(2) span{animation-delay:.20s}
.h-line:nth-of-type(3) span{animation-delay:.30s}
.h-line:nth-of-type(4) span{animation-delay:.40s}
@keyframes lineUp{to{transform:none}}

/* ---- hero system graph ---- */
.graph{width:100%;height:auto;overflow:visible}
.g-edge{fill:none;stroke:var(--rule);stroke-width:1.4}
.g-flow{fill:none;stroke:url(#gBrand);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:10 190;animation:flow 4.4s linear infinite}
.g-flow.d2{animation-delay:.55s}.g-flow.d3{animation-delay:1.1s}
.g-flow.d4{animation-delay:1.65s}.g-flow.d5{animation-delay:2.2s}.g-flow.d6{animation-delay:2.75s}
@keyframes flow{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
.g-node{fill:var(--paper-lift);stroke:var(--violet);stroke-width:1.5}
.g-node-lead{stroke:var(--amber)}
.g-ring{fill:none;stroke:var(--violet);stroke-width:1.2;opacity:0;transform-origin:center;
  animation:ring 3.4s ease-out infinite}
.g-ring.r2{animation-delay:1.1s;stroke:var(--cyan)}
.g-ring.r3{animation-delay:2.2s;stroke:var(--amber)}
@keyframes ring{0%{opacity:.7;transform:scale(.6)}70%{opacity:0;transform:scale(1.9)}100%{opacity:0}}
.g-label{font-family:var(--mono);font-size:8.4px;letter-spacing:.1em;text-transform:uppercase;fill:var(--slate)}
.g-label-key{fill:var(--cyan)}
.g-scan{opacity:.5;animation:scan 7s ease-in-out infinite}
@keyframes scan{0%,100%{transform:translateX(-6px);opacity:.18}50%{transform:translateX(6px);opacity:.5}}

/* ---- figures row (count-up) ---- */
.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:clamp(30px,4vw,48px)}
.figure{background:var(--paper);padding:24px 22px 26px;position:relative;overflow:hidden}
.figure::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--grad-brand);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.figure.in::after{transform:scaleX(1)}
.figure b{display:block;font-family:var(--display);font-weight:200;font-size:clamp(2.1rem,3.4vw,2.9rem);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.figure-n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:14px}
.figure p{font-size:13.5px;line-height:1.5;color:var(--slate);margin:10px 0 0}

/* ---- nav underline sweep ---- */
.nav a::after{background:var(--grad-brand);height:1.5px}

/* ---- button wipe ---- */
.btn{position:relative;overflow:hidden;z-index:0}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-brand);
  transform:translateY(101%);transition:transform .38s var(--ease)}
.btn:hover{background:var(--ink);border-color:transparent;color:#fff;transform:translateY(-2px)}
.btn:hover::before{transform:none}
.btn-ghost:hover{color:#fff}
.dark .btn:hover{color:#fff}

/* ---- card + panel hover accents ---- */
.card,.ex,.step,.ov,.eng-card,.pillar{position:relative}
.card::before,.ex::before,.step::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad-brand);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.card:hover::before,.ex:hover::before,.step:hover::before{transform:none}
.card-media{background:linear-gradient(150deg,#072835,#04212C 62%)}
.card:hover .card-media img{transform:scale(1.045)}
.card-media img{transition:transform .8s var(--ease)}

.spear{position:relative;overflow:hidden}
.spear::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 82% 8%,rgba(0,121,202,.30),transparent 70%);
  opacity:0;transition:opacity .5s;pointer-events:none}
.spear:hover::after{opacity:1}

/* ---- practice list ---- */
.prac-btn::before{background:var(--grad-brand);width:2.5px}
.prac-btn.on strong{color:var(--violet)}
.prac-panel{position:relative;overflow:hidden}
.prac-panel::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--grad-brand)}
.fade-in{animation:panelIn .5s var(--ease) both}
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.stack-row{animation:rowIn .5s var(--ease) both}
@keyframes rowIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* ---- scroll-drawn delivery line ---- */
.stage-track{position:relative;height:1px;background:var(--rule);margin-bottom:0}
.stage-track i{position:absolute;inset:0;background:var(--grad-brand);
  transform:scaleX(var(--p,0));transform-origin:left;transition:transform .25s linear}
.stage-dots{position:relative;height:0}
.stage-dots b{position:absolute;top:-4.5px;width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--rule);transition:.4s var(--ease)}
.stage-dots b.lit{background:var(--violet);border-color:var(--violet);box-shadow:0 0 0 4px rgba(0,121,202,.16)}
.step{transition:background .3s,transform .4s var(--ease)}
.step.lit .step-n{color:var(--violet)}

/* ---- capability index ---- */
.idx-search input:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 3px rgba(31,166,184,.14)}
.chip.on{background:var(--violet);border-color:var(--violet)}
.idx-item{animation:idxIn .42s var(--ease) both}
@keyframes idxIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.idx-item:hover{background:var(--ink-soft);color:#fff;box-shadow:inset 2px 0 0 var(--cyan)}

/* ---- ticker edge fade ---- */
.ticker{position:relative}
.ticker-view{mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent)}

/* ---- accordion ---- */
.acc-item{transition:background .3s}
.acc-item.open{background:var(--paper-lift)}
.acc-item.open .acc-q{color:var(--violet)}

/* ---- strip rows ---- */
.strip a{position:relative}
.strip a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--grad-brand);transition:width .5s var(--ease)}
.strip a:hover::after{width:100%}
.strip a span{color:var(--violet)}

/* ---- service page tiles ---- */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.svc{background:var(--paper);padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:background .35s}
.svc:hover{background:var(--paper-lift)}
.svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2.5px;background:var(--grad-brand);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.svc:hover::before{transform:none}
.svc-head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px}
.svc-head i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--cyan)}
.svc.lead .svc-head i{color:var(--amber)}
.svc h3{font-size:clamp(1.25rem,1.8vw,1.55rem)}
.svc>p{font-size:14.8px;line-height:1.6;color:var(--slate)}
.svc-lines{list-style:none;margin:6px 0 22px;padding:0;display:grid;gap:8px}
.svc-lines li{font-size:14px;color:var(--ink-soft);padding-left:17px;position:relative}
.svc-lines li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1.5px;background:var(--violet)}
.svc-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;
  align-items:center;gap:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.svc-foot a{color:var(--violet);border-bottom:1px solid transparent;transition:border-color .25s}
.svc:hover .svc-foot a{border-color:var(--violet)}
.svc-badge{border:1px solid var(--amber);color:var(--amber);padding:4px 8px;font-size:9.5px}

/* ---- matrix table ---- */
.matrix{width:100%;border-collapse:collapse;font-size:14px}
.matrix th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
  text-align:left;padding:0 14px 13px 0;border-bottom:1px solid var(--rule-dark);white-space:nowrap}
.matrix td{padding:15px 14px 15px 0;border-bottom:1px solid var(--rule-dark);color:var(--on-dark-2);vertical-align:top}
.matrix td:first-child{color:var(--on-dark-1);font-family:var(--display);font-size:1.05rem;font-weight:300}
.matrix tr{transition:background .25s}
.matrix tbody tr:hover{background:var(--ink-soft)}
.matrix .yes{color:var(--cyan-soft);font-family:var(--mono);font-size:12px}
.matrix .no{color:var(--on-dark-3);font-family:var(--mono);font-size:12px}

@media(max-width:1080px){
  .figures{grid-template-columns:1fr 1fr}
  .svc-grid{grid-template-columns:1fr}
  .matrix{font-size:13px}
}
@media(max-width:640px){
  .figures{grid-template-columns:1fr}
  .aurora i{filter:blur(50px)}
}

@media (prefers-reduced-motion:reduce){
  .aurora i,.g-flow,.g-ring,.g-scan,.ticker-track,.ticker-live{animation:none!important}
  .seq,.h-line span{animation:none!important;opacity:1!important;transform:none!important}
  .fade-in,.stack-row,.idx-item{animation:none!important}
  .figure::after,.stage-track i{transition:none}
  .btn::before{transition:none}
}

/* ---- hero: text + system graph ---- */
.hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center}
.hero-visual{padding-left:clamp(0px,2vw,28px)}
.hero-visual-cap{font-family:var(--mono);font-size:10.5px;line-height:1.75;letter-spacing:.04em;
  color:var(--slate);margin:14px 0 0;max-width:44ch;border-left:1.5px solid var(--cyan);padding-left:12px}
@media(max-width:1080px){
  .hero-visual{padding-left:0;margin-top:34px;max-width:520px}
  .hero-grid{align-items:start}
}

/* ---- fixes: descender clipping on masked headline lines, stage line only where the steps are a row ---- */
.h-line{padding-bottom:.08em;margin-bottom:-.08em}
@media(max-width:1080px){
  .stage-track,.stage-dots{display:none}
}

/* ================================================================
   LIVE TECHNICAL ANIMATIONS — terminal, orbit, pipeline
   ================================================================ */

/* ---------- code terminal ---------- */
.term{
  border:1px solid var(--rule-dark);background:#0A0919;position:relative;overflow:hidden;
  font-family:var(--mono);box-shadow:0 24px 60px -30px rgba(4,33,44,.7);
}
.term::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
}
.term-bar{
  display:flex;align-items:center;gap:10px;padding:11px 16px;
  border-bottom:1px solid var(--rule-dark);background:#072835;
}
.term-dots{display:flex;gap:6px}
.term-dots i{width:9px;height:9px;border-radius:50%;display:block;opacity:.85}
.term-dots i:nth-child(1){background:var(--amber)}
.term-dots i:nth-child(2){background:var(--violet)}
.term-dots i:nth-child(3){background:var(--cyan)}
.term-file{font-size:11px;letter-spacing:.06em;color:var(--on-dark-2);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.term-tag{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
  border:1px solid var(--rule-dark);padding:3px 8px;white-space:nowrap}

.term-body{padding:20px 18px 16px;min-height:330px;font-size:12.6px;line-height:1.78}
.term-line{display:flex;gap:14px;white-space:pre-wrap;word-break:break-word}
.term-line b{color:#2E5F71;font-weight:400;flex-shrink:0;width:18px;text-align:right;
  font-variant-numeric:tabular-nums;user-select:none}
.term-line span{color:var(--on-dark-1);min-width:0}
.tk{color:var(--violet-soft)}      /* keyword */
.tf{color:var(--cyan-soft)}        /* function / type */
.ts{color:var(--amber-soft)}       /* string */
.tc{color:#4F8494;font-style:italic}/* comment */
.tn{color:#6FEDC4}                 /* number / literal */
.tp{color:var(--on-dark-2)}        /* punctuation */

.caret{display:inline-block;width:7px;height:1.05em;background:var(--cyan);
  vertical-align:-2px;margin-left:1px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

.term-foot{
  display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--rule-dark);
  background:#072835;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
}
.term-status{display:flex;align-items:center;gap:8px;color:var(--on-dark-3)}
.term-status i{width:6px;height:6px;border-radius:50%;background:var(--amber);display:block;
  animation:blip 1.3s ease-in-out infinite}
.term-status.done i{background:#26C78F;animation:none}
.term-status.done{color:#26C78F}
@keyframes blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.term-elapsed{margin-left:auto;color:var(--on-dark-3);font-variant-numeric:tabular-nums}

/* ---------- orbiting infrastructure ---------- */
.orbit-wrap{position:relative;aspect-ratio:1;max-width:460px;margin-inline:auto;width:100%}
.orbit-ring{
  position:absolute;inset:0;border:1px solid var(--rule);border-radius:50%;
}
.orbit-ring.r-mid{inset:15%;border-style:dashed;border-color:var(--rule)}
.orbit-ring.r-in{inset:29%}
.orbit-spin{position:absolute;inset:0;animation:spin 46s linear infinite;transform-origin:center}
.orbit-spin.mid{inset:15%;animation-duration:34s;animation-direction:reverse}
.orbit-spin.inner{inset:29%;animation-duration:26s}
@keyframes spin{to{transform:rotate(360deg)}}

.node{
  position:absolute;width:60px;height:60px;margin:-30px 0 0 -30px;
  display:grid;place-items:center;background:var(--paper-lift);
  border:1px solid var(--rule);border-radius:50%;
  animation:unspin 46s linear infinite;transform-origin:center;
  transition:border-color .3s,box-shadow .3s;
}
.orbit-spin.mid .node{animation-duration:34s;animation-direction:reverse}
.orbit-spin.inner .node{animation-duration:26s}
@keyframes unspin{to{transform:rotate(-360deg)}}
.node:hover{border-color:var(--violet);box-shadow:0 0 0 5px rgba(0,121,202,.13)}
.node svg{width:26px;height:26px;stroke:var(--ink-soft);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.node.key{border-color:var(--cyan)}
.node.key svg{stroke:var(--cyan)}
.node.lead{border-color:var(--amber)}
.node.lead svg{stroke:var(--amber)}
.node em{position:absolute;bottom:-17px;font-family:var(--mono);font-style:normal;font-size:8.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--slate);white-space:nowrap}

.orbit-core{
  position:absolute;left:50%;top:50%;width:106px;height:106px;margin:-53px 0 0 -53px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--ink);border:1px solid var(--rule-dark);
}
.orbit-core svg{width:52px;height:52px}
.orbit-core img{width:54px;height:auto;display:block}
.orbit-core::before,.orbit-core::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--violet);
  animation:coreRing 3.6s ease-out infinite;
}
.orbit-core::after{animation-delay:1.8s;border-color:var(--cyan)}
@keyframes coreRing{0%{opacity:.55;transform:scale(1)}80%{opacity:0;transform:scale(1.75)}100%{opacity:0}}

/* ---------- CI pipeline ---------- */
.pipe{border:1px solid var(--rule);background:var(--paper-lift)}
.pipe-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.pipe-head b{font-weight:400;color:var(--ink)}
.pipe-head .run{margin-left:auto;color:var(--cyan)}
.pipe-stages{display:grid;grid-template-columns:repeat(5,1fr)}
.pstage{padding:18px 16px 20px;border-right:1px solid var(--rule);position:relative;opacity:.42;
  transition:opacity .45s var(--ease),background .45s}
.pstage:last-child{border-right:0}
.pstage.on{opacity:1}
.pstage.pass{opacity:1;background:var(--paper)}
.pstage::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--grad-brand);transform:scaleX(0);transform-origin:left;transition:transform .9s linear}
.pstage.on::before{transform:scaleX(1)}
.pstage.pass::before{transform:scaleX(1);background:#26C78F}
.pstage span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);display:block;margin-bottom:9px}
.pstage-name{display:block;font-family:var(--display);font-weight:300;font-size:1.02rem;margin:0 0 5px}
.pstage p{font-size:12px;line-height:1.45;color:var(--slate);margin:0;font-family:var(--mono);
  font-variant-numeric:tabular-nums}
.pstage .tick{position:absolute;top:16px;right:14px;width:14px;height:14px;opacity:0;transition:opacity .3s}
.pstage.pass .tick{opacity:1}
.pstage .tick path{stroke:#26C78F;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- layout for the live section ---------- */
.live{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,60px);align-items:center}
.live-copy h3{margin-bottom:14px;max-width:24ch}
.live-copy p{font-size:15px;line-height:1.62;color:var(--slate)}
.dark .live-copy p{color:var(--on-dark-2)}
.live-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.ltab{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 12px;border:1px solid var(--rule-dark);color:var(--on-dark-2);transition:.22s}
.ltab:hover{border-color:var(--on-dark-2);color:var(--on-dark-1)}
.ltab.on{background:var(--violet);border-color:var(--violet);color:#fff}

@media(max-width:1080px){
  .live{grid-template-columns:1fr}
  .pipe-stages{grid-template-columns:1fr 1fr}
  .pstage{border-bottom:1px solid var(--rule)}
  .pstage:nth-child(2n){border-right:0}
}
@media(max-width:640px){
  .pipe-stages{grid-template-columns:1fr}
  .pstage{border-right:0}
  .term-body{min-height:290px;font-size:11.6px}
  .orbit-wrap{max-width:330px}
  .node{width:48px;height:48px;margin:-24px 0 0 -24px}
  .node svg{width:21px;height:21px}
  .node em{font-size:7.5px;bottom:-15px}
}
@media (prefers-reduced-motion:reduce){
  .orbit-spin,.node,.orbit-core::before,.orbit-core::after,.caret,.term-status i{animation:none!important}
  .pstage{opacity:1}
  .pstage::before{transition:none}
}

/* ---- hero diagram: title rule ---- */
.g-title{font-family:var(--mono);font-size:8.6px;letter-spacing:.22em;fill:var(--slate)}
.g-tier{stroke:var(--rule);stroke-width:1}

/* ================================================================
   SECTION TRANSITIONS — how one band hands over to the next
   ================================================================ */

/* every band gets a hairline seam that draws itself as it enters view */
section.band,section.band-tight{position:relative}
.seam{position:absolute;left:0;right:0;top:0;height:1px;overflow:visible;pointer-events:none;z-index:2}
.seam::before{
  content:"";position:absolute;inset:0;background:var(--grad-brand);
  transform:scaleX(0);transform-origin:left;transition:transform 1.7s var(--ease);
}
.seam.in::before{transform:scaleX(1)}
.seam::after{
  content:"";position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;
  background:var(--cyan);opacity:0;transition:opacity .6s .7s,left 1.7s var(--ease);
}
.seam.in::after{opacity:1;left:calc(100% - 7px)}

/* light → dark handover: the incoming dark band lifts over the one above */
section.dark{position:relative}
.band-fade{
  position:absolute;left:0;right:0;height:120px;pointer-events:none;z-index:1;
}
.band-fade.top{top:-120px;background:linear-gradient(180deg,transparent,rgba(4,33,44,.045))}
.dark .band-fade.top{background:linear-gradient(180deg,transparent,rgba(4,33,44,.10))}

/* section content parallaxes gently against the band it sits in */
.band > .wrap{will-change:transform}
.par{transform:translate3d(0,var(--y,0),0)}

/* scroll-linked heading treatment: the eyebrow rule extends as you arrive */
.eyebrow::after{transition:max-width .9s var(--ease),opacity .6s}
.rv .eyebrow::after,.rv.in .eyebrow::after{max-width:120px}
.rv:not(.in) .eyebrow::after{max-width:0;opacity:0}

/* dark bands: content rises out of the aurora rather than snapping in */
.dark .rv{transition-duration:1.25s}

/* sticky section marker on the left rail (desktop only) */
.rail{
  position:fixed;left:calc(var(--gutter) / 2);top:50%;transform:translateY(-50%);
  z-index:60;display:none;flex-direction:column;gap:12px;
}
@media(min-width:1500px){.rail{display:flex}}
.rail a{
  display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:transparent;transition:color .3s;
}
.rail i{display:block;width:18px;height:1.5px;background:var(--rule);transition:.4s var(--ease);flex-shrink:0}
.rail a:hover{color:var(--slate)}
.rail a:hover i{width:26px;background:var(--slate)}
.rail a.on i{width:32px;background:var(--grad-brand)}
.rail a.on{color:var(--violet)}
.dark-rail .rail i{background:var(--rule-dark)}
.dark-rail .rail a:hover{color:var(--on-dark-2)}

@media (prefers-reduced-motion:reduce){
  .seam::before{transform:scaleX(1);transition:none}
  .seam::after{display:none}
  .par{transform:none!important}
  .eyebrow::after{transition:none;max-width:120px!important;opacity:1!important}
}

/* three lead practices, not two */
.spears{grid-template-columns:repeat(3,1fr)}
.spear h3{font-size:clamp(1.25rem,1.9vw,1.62rem)}
@media(max-width:1180px){.spears{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.spears{grid-template-columns:1fr}}

/* ================================================================
   INTRO — half-screen split: animated globe panel + statement
   ================================================================ */
.intro{
  display:grid;grid-template-columns:1fr 1fr;min-height:min(88vh,860px);
  border-top:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark);
}
.intro-visual{
  position:relative;background:#01161E;overflow:hidden;display:grid;place-items:center;
  padding:clamp(24px,3.2vw,48px);isolation:isolate;
}
.intro-visual::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(70% 55% at 22% 18%,rgba(0,121,202,.34),transparent 68%),
    radial-gradient(60% 60% at 82% 78%,rgba(31,166,184,.22),transparent 70%);
  animation:introGlow 22s ease-in-out infinite alternate;
}
@keyframes introGlow{to{transform:scale(1.16) translate(-3%,2%)}}

/* faint circuit grid behind the globe */
.intro-visual::after{
  content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(75% 75% at 50% 50%,#000,transparent);
  -webkit-mask-image:radial-gradient(75% 75% at 50% 50%,#000,transparent);
}


.worldmap{width:100%;height:auto;overflow:visible;display:block}

.wm-arc{fill:none;stroke:url(#wmG);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:12 470;animation:wmFlow 5.2s linear infinite}
@keyframes wmFlow{from{stroke-dashoffset:482}to{stroke-dashoffset:0}}

.wm-mark{animation:wmMark 5.2s ease-out infinite}
@keyframes wmMark{0%,58%{opacity:.42}72%{opacity:1}100%{opacity:.42}}
.wm-pt{fill:var(--cyan)}
.wm-pt-ring{fill:none;stroke:var(--cyan);stroke-width:1.3;transform-origin:center;
  transform-box:fill-box;animation:wmRing 5.2s ease-out infinite;animation-delay:inherit}
@keyframes wmRing{0%,58%{opacity:0;transform:scale(1)}68%{opacity:.9;transform:scale(1)}
  100%{opacity:0;transform:scale(3.6)}}

.wm-label{font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;fill:var(--on-dark-2)}
.wm-mark:hover .wm-label{fill:var(--paper)}
.wm-label-home{font-size:15px;letter-spacing:.2em;fill:var(--amber);font-weight:500}

.wm-home-dot{fill:var(--amber)}
.wm-home-ring{fill:none;stroke:var(--amber);stroke-width:1.5;transform-origin:center;
  transform-box:fill-box;animation:wmHome 3s ease-out infinite}
.wm-home-ring.d2{animation-delay:1.5s}
@keyframes wmHome{0%{opacity:.85;transform:scale(1)}85%{opacity:0;transform:scale(4.4)}100%{opacity:0}}

/* corner caption + readout on the visual */
.intro-tag{
  position:absolute;z-index:2;left:clamp(20px,3vw,34px);top:clamp(20px,3vw,34px);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-3);display:flex;align-items:center;gap:9px;
}
.intro-tag b{width:6px;height:6px;border-radius:50%;background:var(--cyan);display:block;
  animation:blip 1.8s ease-in-out infinite}
.intro-readout{
  position:absolute;z-index:2;left:clamp(20px,3vw,34px);bottom:clamp(20px,3vw,34px);
  right:clamp(20px,3vw,34px);display:flex;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap;
  border-top:1px solid var(--rule-dark);padding-top:16px;
}
.intro-readout div{min-width:0}
.intro-readout dt{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-3);margin-bottom:5px}
.intro-readout dd{margin:0;font-family:var(--mono);font-size:12px;color:var(--cyan-soft);
  font-variant-numeric:tabular-nums}

/* right half: the statement */
.intro-copy{
  background:var(--ink);color:var(--on-dark-1);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,6vw,86px) clamp(28px,5vw,78px);position:relative;
}
.intro-copy .eyebrow{color:var(--cyan-soft)}
.intro-copy .eyebrow::after{background:linear-gradient(90deg,var(--cyan),transparent)}
.intro-copy h2{font-size:clamp(1.9rem,3.1vw,2.85rem);max-width:17ch;margin-bottom:22px}
.intro-copy h2 em{font-style:italic;color:var(--amber-soft)}
.intro-copy p{font-size:clamp(1rem,1.2vw,1.13rem);line-height:1.62;color:var(--on-dark-2);max-width:52ch}
.intro-marks{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(28px,3.5vw,44px);
  border-top:1px solid var(--rule-dark);
}
.intro-marks div{padding:20px 20px 0 0;border-right:1px solid var(--rule-dark)}
.intro-marks div:last-child{border-right:0;padding-right:0}
.intro-marks dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--amber);margin-bottom:9px}
.intro-marks dd{margin:0;font-size:13.5px;line-height:1.5;color:var(--on-dark-2)}
.intro-cta{margin-top:clamp(28px,3.5vw,42px)}

@media(max-width:980px){
  .intro{grid-template-columns:1fr;min-height:0}
  .intro-visual{min-height:min(62vh,520px);order:-1}
  .intro-marks{grid-template-columns:1fr;border-top:0}
  .intro-marks div{border-right:0;border-top:1px solid var(--rule-dark);padding:18px 0 0}
}
@media(max-width:640px){
  .intro-readout{position:static;margin-top:22px;border-top:0}
  .intro-visual{padding-bottom:26px}
}
@media (prefers-reduced-motion:reduce){
  .gl-lon,.gl-arc,.gl-pt,.gl-home-ring,.intro-visual::before,.intro-tag b{animation:none!important}
  .gl-lon{rx:150px;opacity:.4}
  .gl-arc{stroke-dasharray:none}
}

/* ================================================================
   SCROLL-DRIVEN SECTION WIPE
   ================================================================ */
.wipe{--wipe:0%;--wipe-o:1;--wipe-y:0px;--wipe-s:1}
.wipe > .wrap,
.wipe > .intro-visual,
.wipe > .intro-copy{
  clip-path:inset(0 0 var(--wipe) 0);
  opacity:var(--wipe-o);
  transform:translate3d(0,var(--wipe-y),0) scale(var(--wipe-s));
  will-change:clip-path,opacity,transform;
}
/* the intro halves lead in from opposite edges */
.wipe.intro > .intro-visual{clip-path:inset(0 var(--wipe) 0 0)}
.wipe.intro > .intro-copy{clip-path:inset(0 0 0 var(--wipe))}
/* the parallax offset and the wipe offset must not fight each other */
.wipe > .wrap.par{transform:translate3d(0,calc(var(--y,0px) + var(--wipe-y)),0) scale(var(--wipe-s))}

/* a thin light edge rides the wipe front on dark bands */
.wipe.dark::after{
  content:"";position:absolute;left:0;right:0;bottom:var(--wipe);height:1px;z-index:3;
  background:var(--grad-brand);opacity:calc(1 - var(--wipe-o));pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .wipe > .wrap,.wipe > .intro-visual,.wipe > .intro-copy{
    clip-path:none!important;opacity:1!important;transform:none!important}
  .wipe.dark::after{display:none}
}

/* ================================================================
   OVERTURE — the opening sequence, plays once on load
   ================================================================ */
.overture{
  position:fixed;inset:0;z-index:200;background:#01161E;overflow:hidden;
  display:grid;place-items:center;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1s var(--ease),opacity .7s .35s;
}
.overture::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 24% 20%,rgba(0,121,202,.40),transparent 66%),
    radial-gradient(60% 60% at 80% 76%,rgba(31,166,184,.26),transparent 70%);
  animation:introGlow 22s ease-in-out infinite alternate;
}
.overture::after{
  content:"";position:absolute;inset:0;opacity:.42;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(72% 72% at 50% 50%,#000,transparent);
  -webkit-mask-image:radial-gradient(72% 72% at 50% 50%,#000,transparent);
}

.ov-center{position:relative;z-index:2;text-align:center;padding:0 24px}
.ov-mark{width:clamp(74px,9vw,104px);height:auto;margin:0 auto 26px;display:block}
.ov-mark path{animation:ovDraw .85s var(--ease) forwards}
.ov-p1{animation-delay:.10s}.ov-p2{animation-delay:.34s}
.ov-p3{animation-delay:.46s}.ov-p4{animation-delay:.58s}
@keyframes ovDraw{to{stroke-dashoffset:0}}

.ov-word{
  font-family:var(--display);font-weight:200;letter-spacing:-.015em;
  font-size:clamp(2.4rem,7vw,5.2rem);line-height:1;color:var(--paper);margin:0;
  display:flex;gap:.28em;justify-content:center;flex-wrap:wrap;
}
.ov-word span,.ov-word em{
  display:inline-block;font-style:normal;opacity:0;
  animation:ovWord .95s var(--ease) forwards;
}
.ov-word span{animation-delay:.62s}
.ov-word em{font-style:italic;color:var(--violet-soft);animation-delay:.76s}
@keyframes ovWord{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.ov-sub{
  margin:22px 0 0;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:clamp(9.5px,1.1vw,11.5px);letter-spacing:.24em;
  text-transform:uppercase;color:var(--on-dark-2);
}
.ov-sub span{opacity:0;animation:ovWord .8s 1.02s var(--ease) forwards}
.ov-sub span:last-child{animation-delay:1.16s}
.ov-sub i{display:block;width:0;height:1px;background:var(--grad-brand);
  animation:ovRule .9s 1.02s var(--ease) forwards}
@keyframes ovRule{to{width:clamp(28px,5vw,64px)}}

.ov-meta{
  position:absolute;z-index:2;left:0;right:0;bottom:clamp(26px,4vw,44px);
  display:flex;justify-content:space-between;align-items:center;
  padding-inline:var(--gutter);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark-3);opacity:0;animation:ovWord .8s 1.3s var(--ease) forwards;
}
.ov-count b{font-weight:400;color:var(--cyan);font-variant-numeric:tabular-nums}
.ov-skip{cursor:pointer;transition:color .25s}
.ov-skip:hover{color:var(--paper)}

.ov-bar{position:absolute;z-index:2;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.07)}
.ov-bar i{display:block;height:100%;width:0;background:var(--grad-brand);
  animation:ovBar 2.9s .2s linear forwards}
@keyframes ovBar{to{width:100%}}

/* exit: the curtain lifts and hands over to the hero */
.overture.done{clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none}

/* page underneath is held still until the overture clears */
body.ov-locked{overflow:hidden}
body.ov-locked .mast{opacity:0;transform:translateY(-12px)}
.mast{transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .3s,background .3s}

@media (prefers-reduced-motion:reduce){
  .overture{display:none}
  body.ov-locked{overflow:auto}
  body.ov-locked .mast{opacity:1;transform:none}
}

/* hero animations wait for the overture to lift */
body.ov-locked .hero .seq,
body.ov-locked .hero .h-line span{animation-play-state:paused}

/* ================================================================
   LEAD PRACTICE CARDS — face lifts away, detail rises in behind it
   ================================================================ */
.spear{
  background:var(--ink);position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(360px,34vw,430px);display:block;
  transition:background .45s var(--ease);
}
.spear:hover,.spear:focus-visible{background:var(--ink-soft);outline:none}
.spear::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  background:var(--grad-brand);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.spear:hover::before,.spear:focus-visible::before{transform:none}
.spear::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(430px 260px at 80% 6%,rgba(0,121,202,.34),transparent 70%);
  opacity:0;transition:opacity .55s;
}
.spear:hover::after,.spear:focus-visible::after{opacity:1}

.spear-face,.spear-back{
  position:absolute;inset:0;z-index:1;
  padding:clamp(26px,3.2vw,42px);display:flex;flex-direction:column;
  transition:transform .58s var(--ease),opacity .42s var(--ease);
}

/* face: glyph, label, one-line blurb */
.spear-face{transform:translateY(0);opacity:1}
.spear-glyph{display:block;width:52px;height:52px;margin-bottom:auto}
.spear-glyph svg{width:100%;height:100%;overflow:visible;
  transition:transform .58s var(--ease)}
.spear:hover .spear-glyph svg,.spear:focus-visible .spear-glyph svg{transform:scale(.86) translateY(-6px)}
.spear-face h3{font-size:clamp(1.3rem,1.9vw,1.66rem);margin:16px 0 10px;max-width:16ch}
.spear-blurb{font-size:14.5px;line-height:1.6;color:var(--on-dark-2);margin:0}
.spear-more{
  display:flex;align-items:center;gap:10px;margin-top:20px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-3);transition:color .4s;
}
.spear-more i{display:block;width:20px;height:1px;background:var(--rule-dark);transition:.5s var(--ease)}
.spear:hover .spear-more{color:var(--cyan-soft)}
.spear:hover .spear-more i{width:34px;background:var(--cyan)}

/* back: the detail, waiting one card-height below */
.spear-back{transform:translateY(38%);opacity:0;pointer-events:none;justify-content:center}
.spear-back h3{font-size:clamp(1.12rem,1.5vw,1.34rem);line-height:1.28;margin:10px 0 18px;max-width:22ch}
.spear-back ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.spear-back li{
  font-size:13.6px;color:var(--on-dark-1);padding-left:20px;position:relative;
  opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.spear-back li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:1.5px;background:var(--grad-brand)}
.spear:hover .spear-back,.spear:focus-visible .spear-back{transform:translateY(0);opacity:1;pointer-events:auto}
.spear:hover .spear-face,.spear:focus-visible .spear-face{transform:translateY(-26%);opacity:0}
.spear:hover .spear-back li,.spear:focus-visible .spear-back li{opacity:1;transform:none}
.spear:hover .spear-back li:nth-child(1){transition-delay:.16s}
.spear:hover .spear-back li:nth-child(2){transition-delay:.22s}
.spear:hover .spear-back li:nth-child(3){transition-delay:.28s}
.spear:hover .spear-back li:nth-child(4){transition-delay:.34s}
.spear:hover .spear-back li:nth-child(5){transition-delay:.40s}
.spear-back .spear-link{margin-top:0;align-self:flex-start}

/* touch devices have no hover — show the detail inline instead */
@media (hover:none){
  .spear{min-height:0}
  .spear-face,.spear-back{position:static;transform:none!important;opacity:1!important;pointer-events:auto}
  .spear-back{padding-top:0}
  .spear-back li{opacity:1!important;transform:none!important}
  .spear-more{display:none}
}
@media (prefers-reduced-motion:reduce){
  .spear-face,.spear-back,.spear-back li,.spear-glyph svg{transition:none!important}
}

/* no-JS fallback: never hold the page behind a curtain that cannot lift */
.no-js .overture{display:none}
.wh-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ================================================================
   OVERTURE — world map behind the wordmark
   ================================================================ */
.ov-map{
  position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  padding:clamp(16px,4vw,60px);
  opacity:0;animation:ovMap 1.6s .3s var(--ease) forwards;
}
.ov-worldmap{width:min(118%,1560px);height:auto;max-height:none}
@keyframes ovMap{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}

/* the map reads as backdrop here, so soften it against the wordmark */
.ov-map .wm-label{font-size:11px;fill:var(--on-dark-3);opacity:.85}
.ov-map .wm-label-home{font-size:14px;fill:var(--amber);opacity:1}
.ov-map #wmDots,.ov-map use{opacity:.62}

.ov-center{position:relative;z-index:3;text-align:center;padding:0 24px;
  background:radial-gradient(60% 62% at 50% 50%,rgba(1,22,30,.93),rgba(1,22,30,.6) 62%,transparent 78%)}
.ov-mark{margin-bottom:22px}
.ov-p1{animation-delay:.95s}.ov-p2{animation-delay:1.20s}
.ov-p3{animation-delay:1.32s}.ov-p4{animation-delay:1.44s}
.ov-word span{animation-delay:1.48s}
.ov-word em{animation-delay:1.64s}
.ov-sub span{animation-delay:2.00s}
.ov-sub span:last-child{animation-delay:2.16s}
.ov-sub i{animation-delay:2.00s}
.ov-meta{animation-delay:2.4s}
.ov-count b{letter-spacing:.16em}
.ov-bar i{animation-duration:4.8s}
.overture{transition:clip-path 1.15s var(--ease),opacity .8s .4s}

/* ================================================================
   INTRO — isometric layered platform
   ================================================================ */
.platform-wrap{position:relative;z-index:1;width:100%;max-width:520px;
  margin-block:clamp(16px,2.5vw,34px) clamp(52px,7vw,86px)}
.platform{width:100%;height:auto;display:block;overflow:visible}

.pf-layer{opacity:0;animation:pfLayer .9s var(--ease) var(--d) forwards}
@keyframes pfLayer{
  from{opacity:0;transform:translateY(34px) scale(.94)}
  to{opacity:1;transform:none}
}
.pf-plane{fill:rgba(0,121,202,.06);stroke:rgba(27,147,228,.34);stroke-width:1.1}
.pf-cell{fill:transparent;stroke:rgba(27,147,228,.16);stroke-width:.7}
.pf-cell.lit{fill:rgba(0,121,202,.34);stroke:rgba(27,147,228,.6);
  animation:pfCell 4.4s ease-in-out var(--d) infinite}
.pf-cell.lit.alt{fill:rgba(31,166,184,.28);stroke:rgba(31,166,184,.55);
  animation-duration:5.6s}
@keyframes pfCell{0%,100%{opacity:.35}45%{opacity:1}}
.pf-edge{fill:none;stroke:url(#wmG);stroke-width:1.6;opacity:.9}
.pf-name{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;fill:var(--on-dark-2)}
.pf-tick{stroke:var(--cyan);stroke-width:1.4}

.pf-spine{stroke:rgba(27,147,228,.22);stroke-width:1}
.pf-pulse{stroke:url(#wmG);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:46 520;animation:pfPulse 4.2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes pfPulse{from{stroke-dashoffset:566}to{stroke-dashoffset:0}}

@media(max-width:980px){
  .platform-wrap{max-width:380px}
  .ov-worldmap{width:132%}
}
@media (prefers-reduced-motion:reduce){
  .ov-map,.pf-layer{animation:none!important;opacity:1!important;transform:none!important}
  .pf-cell.lit,.pf-pulse{animation:none!important}
}

/* ================================================================
   CAPABILITY INDEX ON A LIGHT SURFACE
   The index was styled for dark bands. On /services.html it sits on
   paper, so every dark-surface colour needs a light counterpart.
   ================================================================ */
section:not(.dark):not(.intro) .idx-search input{
  border-color:var(--rule);color:var(--ink);background:var(--paper);
}
section:not(.dark):not(.intro) .idx-search input::placeholder{color:var(--slate)}
section:not(.dark):not(.intro) .idx-search input:focus{
  border-color:var(--cyan);box-shadow:0 0 0 3px rgba(31,166,184,.16);
}
section:not(.dark):not(.intro) .idx-search svg{stroke:var(--slate)}

section:not(.dark):not(.intro) .chip{border-color:var(--rule);color:var(--slate);background:var(--paper)}
section:not(.dark):not(.intro) .chip:hover{border-color:var(--ink);color:var(--ink)}
section:not(.dark):not(.intro) .chip.on{background:var(--violet);border-color:var(--violet);color:#fff}

section:not(.dark):not(.intro) .idx-meta{color:var(--slate)}
section:not(.dark):not(.intro) .idx-grid{border-top-color:var(--rule);border-left-color:var(--rule)}
section:not(.dark):not(.intro) .idx-item{
  border-right-color:var(--rule);border-bottom-color:var(--rule);
  background:var(--paper);color:var(--ink-soft);
}
section:not(.dark):not(.intro) .idx-item b{color:var(--slate)}
section:not(.dark):not(.intro) .idx-item:hover{
  background:var(--ink);color:#fff;box-shadow:inset 2px 0 0 var(--cyan);
}
section:not(.dark):not(.intro) .idx-item:hover b{color:var(--cyan-soft)}
section:not(.dark):not(.intro) .idx-empty{color:var(--slate)}
section:not(.dark):not(.intro) .idx-empty a{color:var(--violet)}


/* ============================================================
   BRAND 2.0 — green/blue system derived from the new logo mark.
   The emphasis colour splits by surface: a deep green carries the
   contrast on paper, a bright green carries it on ink.
   ============================================================ */
:root{
  --emph-light:#0A7A55;        /* emphasis on paper  — 4.1:1 */
  --emph-dark:var(--amber-soft);/* emphasis on ink    — bright */
  --brand-green:#26C78F;
  --brand-blue:#0079CA;
}
h1 em,h2 em,h3 em,.phero h1 em,.hero h1 em,
.pillar-n,.step-n,.spear-tag,.eng-tag,.card-tag,.del i,
.acc-q span,.figure-n{color:var(--emph-light)}
.dark h1 em,.dark h2 em,.dark h3 em,.statement h2 em,.cx h2 em,
.dark .pillar-n,.dark .step-n,.dark .spear-tag,.dark .eng-tag,
.dark .card-tag,.dark .del i,.dark .figure-n,.intro-copy h2 em{color:var(--emph-dark)}
.svc-badge{border-color:var(--emph-light);color:var(--emph-light)}
.dark .svc-badge{border-color:var(--amber);color:var(--amber)}
.svc.lead .svc-head i{color:var(--emph-light)}
.dark .svc.lead .svc-head i{color:var(--amber)}
/* world map + terminal live on ink — keep them bright */
.wm-label-home,.wm-home-dot,.wm-home-ring,.ov-map .wm-label-home,
.term-status i,.term-dots i:nth-child(1){color:var(--amber);fill:var(--amber);stroke:var(--amber)}
.wm-home-dot{fill:var(--amber)}
.wm-home-ring{stroke:var(--amber);fill:none}

/* ============================================================
   MOTION 2.0
   The old system moved every block the same way: one 26px rise,
   one curve, whole container as a slab. Below, each kind of content
   moves the way that kind of content should — headlines uncover,
   grids deal out in reading order, statements settle without travel,
   strips wipe sideways, live modules only fade because they animate
   themselves. Nothing shares a curve with its neighbour.
   ============================================================ */
:root{
  --e-head:cubic-bezier(.16,1,.3,1);      /* uncover — long tail */
  --e-card:cubic-bezier(.25,.85,.32,1);   /* deal   — brisk */
  --e-soft:cubic-bezier(.38,0,.18,1);     /* settle — symmetrical */
  --e-wipe:cubic-bezier(.62,0,.2,1);      /* wipe   — mechanical */
}

/* containers stop moving; their contents move instead */
.sec-head.rv,.pillars.rv,.spears.rv,.steps.rv,.prac.rv,.idx-grid.rv,
.eng.rv,.work-grid.rv,.split.rv,.strip.rv,.statement.rv,.live.rv,
.stage-track.rv,.stage-dots.rv,.overlap.rv,.idx-tools.rv,.work-filters.rv{
  opacity:1;transform:none;transition:none;
}

/* --- headlines: uncover from the baseline, never fly --- */
.sec-head.rv h1,.sec-head.rv h2,.statement.rv h2,.overlap.rv h2{
  opacity:0;transform:translateY(.3em);
  clip-path:inset(0 0 108% 0);
  transition:opacity .82s var(--e-soft),
             transform 1.02s var(--e-head),
             clip-path 1.02s var(--e-head);
}
.sec-head.rv.in h1,.sec-head.rv.in h2,.statement.rv.in h2,.overlap.rv.in h2{
  opacity:1;transform:none;clip-path:inset(-.3em 0 -.3em 0);
}
/* the italic emphasis arrives a beat after the line it sits in */
.sec-head.rv h1 em,.sec-head.rv h2 em,.statement.rv h2 em{
  opacity:0;transition:opacity .7s var(--e-soft) .34s}
.sec-head.rv.in h1 em,.sec-head.rv.in h2 em,.statement.rv.in h2 em{opacity:1}

/* --- eyebrow: rule draws out, tracking tightens --- */
.rv .eyebrow{opacity:0;letter-spacing:.34em;
  transition:opacity .5s var(--e-soft),letter-spacing .8s var(--e-head)}
.rv.in .eyebrow{opacity:1;letter-spacing:.2em}

/* --- supporting copy: quiet, short, slightly late --- */
.sec-head.rv .lede,.sec-head.rv > p,.statement.rv p,.overlap.rv p{
  opacity:0;transform:translateY(9px);
  transition:opacity .66s var(--e-soft) .2s,transform .66s var(--e-soft) .2s}
.sec-head.rv.in .lede,.sec-head.rv.in > p,.statement.rv.in p,.overlap.rv.in p{
  opacity:1;transform:none}

/* --- grids: deal out in reading order --- */
.pillars.rv > *,.spears.rv > *,.steps.rv > *,.prac.rv > *,
.idx-grid.rv > *,.eng.rv > *,.work-grid.rv > *{
  opacity:0;transform:translateY(16px) scale(.988);
  transition:opacity .58s var(--e-card) var(--sd,0s),
             transform .58s var(--e-card) var(--sd,0s);
}
.pillars.rv.in > *,.spears.rv.in > *,.steps.rv.in > *,.prac.rv.in > *,
.idx-grid.rv.in > *,.eng.rv.in > *,.work-grid.rv.in > *{opacity:1;transform:none}

/* --- split panels: the two halves arrive from their own sides --- */
.split.rv > *:first-child{opacity:0;transform:translateX(-14px);
  transition:opacity .8s var(--e-soft),transform .8s var(--e-head)}
.split.rv > *:last-child{opacity:0;transform:translateX(14px);
  transition:opacity .8s var(--e-soft) .1s,transform .8s var(--e-head) .1s}
.split.rv.in > *{opacity:1;transform:none}

/* --- strip / ticker: wipes sideways, matching its own scroll --- */
/* The wipe must sit on the rows, not on .strip itself: IntersectionObserver
   intersects a target with its own clip, so a clipped .strip never reports
   as visible and never gets .in — it stayed invisible forever. */
.strip.rv > a{clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--e-wipe)}
.strip.rv > a:nth-child(2){transition-delay:.11s}
.strip.rv > a:nth-child(3){transition-delay:.22s}
.strip.rv > a:nth-child(4){transition-delay:.33s}
.strip.rv.in > a{clip-path:inset(0 0 0 0)}

/* --- live + staged modules: fade only, they animate themselves --- */
.live.rv,.stage-track.rv,.stage-dots.rv,.idx-tools.rv,.work-filters.rv{
  opacity:0;transition:opacity .74s var(--e-soft)}
.live.rv.in,.stage-track.rv.in,.stage-dots.rv.in,
.idx-tools.rv.in,.work-filters.rv.in{opacity:1}

/* --- hairlines draw rather than fade --- */
.rv .rule,.rv hr{transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--e-wipe) .12s}
.rv.in .rule,.rv.in hr{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .sec-head.rv h1,.sec-head.rv h2,.statement.rv h2,.overlap.rv h2,
  .sec-head.rv h1 em,.sec-head.rv h2 em,.statement.rv h2 em,
  .sec-head.rv .lede,.sec-head.rv > p,.statement.rv p,.overlap.rv p,
  .pillars.rv > *,.spears.rv > *,.steps.rv > *,.prac.rv > *,
  .idx-grid.rv > *,.eng.rv > *,.work-grid.rv > *,.split.rv > *,
  .live.rv,.stage-track.rv,.stage-dots.rv,.idx-tools.rv,.work-filters.rv,
  .rv .eyebrow{
    opacity:1!important;transform:none!important;clip-path:none!important;
    letter-spacing:.2em;transition:none!important;
  }
  .strip.rv{clip-path:none}
  .rv .rule,.rv hr{transform:scaleX(1)}
}


/* ============================================================
   LOGO — the real mark, everywhere it appears.
   The lockup used to be a monogram box plus the name set in
   Newsreader. It is now the actual artwork, reversed on ink.
   ============================================================ */
.mark{display:flex;align-items:center;gap:0;flex-shrink:0}
.mark-img{height:32px;width:auto;display:block;transition:height .3s var(--ease)}
.mast.stuck .mark-img{height:27px}
.mark-img--light{display:none}
.mast .mark-img--dark{display:block}
.foot .mark-img--dark{display:none}
.foot .mark-img--light,.drawer .mark-img--light{display:block}
.foot .mark-img{height:34px}
.drawer-mark{height:30px;width:auto;margin-bottom:8px}

/* overture: arcs draw, then the wordmark arrives */
.ov-mark{width:clamp(78px,9vw,104px)}
.ov-word .ov-logo{display:block}
.ov-word .ov-logo img{
  width:clamp(210px,27vw,330px);height:auto;display:block;margin:0 auto;
}


/* Semantic aliases. The legacy token names (--violet/--cyan/--amber) are kept
   so nothing in the existing 74KB of rules or the build/ generators breaks,
   but new code should use these. */
:root{
  --brand-teal:var(--cyan);
  --brand-ink:var(--ink);
  --brand-paper:var(--paper);
}


/* ============================================================
   OVERTURE LOCKUP
   The badge stands where it stands in the logo, with the wordmark
   untouched beside it. It fades up and settles — no rotation.
   ============================================================ */
.ov-lockup{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(13px,1.7vw,22px);margin:0 0 26px;
}
.ov-lockup .ov-mark{
  width:clamp(52px,5.6vw,72px);height:auto;margin:0;display:block;flex-shrink:0;
}
.ov-lockup .ov-word{margin:0}
.ov-lockup .ov-word .ov-logo img{
  width:clamp(158px,19vw,238px);height:auto;display:block;
}
@media (max-width:560px){
  .ov-lockup{gap:11px}
  .ov-lockup .ov-mark{width:46px}
  .ov-lockup .ov-word .ov-logo img{width:150px}
}
@media (prefers-reduced-motion:reduce){
  .ov-lockup .ov-mark{animation:none;transform:none}
}


/* ============================================================
   OVERTURE LOCKUP — corrected.
   The mark is the real badge from the logo artwork, not a drawn
   stand-in. It sits where it sits in the logo, wordmark beside it.
   ============================================================ */
.ov-lockup .ov-badge{
  width:clamp(48px,5.2vw,66px);height:auto;display:block;flex-shrink:0;
  transform-origin:50% 50%;
  opacity:0;
  animation:ovBadgeIn .5s var(--ease) .95s both;
}
@keyframes ovBadgeIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@media (max-width:560px){ .ov-lockup .ov-badge{width:42px} }
@media (prefers-reduced-motion:reduce){
  .ov-lockup .ov-badge{animation:none;opacity:1;transform:none}
}

/* ============================================================
   MOBILE — corrections
   The footer's four-column grid never collapsed, so every page
   was 162px wider than the phone screen. Everything else here
   follows from auditing at 390px and 360px.
   ============================================================ */

/* Guard: nothing may create sideways scroll. `clip` rather than `hidden`
   because hidden makes html a scroll container and breaks position:sticky. */
html{overflow-x:clip}

@media(max-width:820px){
  /* --- the actual bug: footer stayed at four columns --- */
  .foot-top{grid-template-columns:1fr 1fr;gap:30px 24px}
  .foot-top > *:first-child{grid-column:1 / -1}

  /* --- wide tables scroll in place instead of stretching the page --- */
  .matrix,.scale{
    display:block;width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  }
  .matrix thead,.scale thead{white-space:nowrap}
  .matrix td,.matrix th,.scale td,.scale th{white-space:nowrap}

  /* --- touch targets: 44px is the floor --- */
  .drawer-x{min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
  .drawer nav a{padding:14px 0;min-height:48px;display:flex;align-items:center}
  .ltab,.chip{min-height:44px;padding-block:10px}
  .foot ul a,.foot-list a{display:inline-flex;align-items:center;min-height:40px}
  .spear-link,.sec-count a,.more{min-height:44px;display:inline-flex;align-items:center}

  /* --- the smallest labels were 8–10px; nothing below 11 --- */
  .eyebrow,.mono,dt,th,label,.lb-cap,.spec-label,.f-note,.term-elapsed{font-size:11px}
  .wm-label{font-size:11px}

  /* --- long strings must break rather than push the page --- */
  a[href^="mailto:"],a[href^="http"],code,pre,.mono{overflow-wrap:anywhere}
}

@media(max-width:640px){
  .foot-top{grid-template-columns:1fr;gap:26px}
  .foot-top > *:first-child{grid-column:auto}
  /* the ticker is decorative; give it room to breathe rather than crowd */
  .ticker{margin-inline:0}
}

/* iOS: inputs under 16px make Safari zoom the whole page on focus */
@media(max-width:820px){
  input,select,textarea{font-size:16px}
}

/* --- mobile: raise every sub-11px label to a readable floor.
   These mirror the exact selectors that set 8–10.5px, so specificity
   matches rather than fighting the originals. --- */
@media(max-width:820px){
  .hero-side dt,.ticker-label,.eng-tag,.card-media span,.card-foot,.card-del,
  .drop-note,.cx-facts dt,.f-note,.foot .foot-h,.foot-btm,.phero-facts dt,.ex-tag,
  .ex-meta,.spear-tag,.ov span,.lb-cap,.spec-label,.scale th,.pill,.figure-n,
  .svc-badge,.matrix th,.hero-visual-cap,.term-tag,.ltab,.idx-item b,
  .eng-best em,.card-tag{font-size:11px}
  .g-label,.node em{font-size:10px}

  /* every control the thumb has to hit */
  .chip,.ltab,.btn,.burger,.drawer-x,.f-submit{min-height:44px}
  .chip,.ltab{display:inline-flex;align-items:center}
  .foot ul a,.foot-btm a,.cx-facts a,.contact-list a{
    display:inline-flex;align-items:center;min-height:40px}
  a.more,a.spear-link,.sec-count a{min-height:44px;display:inline-flex;align-items:center}
}

/* --- last mobile pass: the selectors the earlier block missed --- */
@media(max-width:820px){
  .intro-readout dt,.intro-marks dt{font-size:11px}
  .wchip{min-height:44px;display:inline-flex;align-items:center}
}

/* --- .hero-grid was re-declared as two columns further down the file, after
   the mobile collapse, so it never collapsed and the headline was clipped
   into a 165px column. Re-assert single column below the tablet break. --- */
@media(max-width:900px){
  .hero-grid,.phero-grid{grid-template-columns:1fr!important;align-items:start}
  .hero-visual,.phero-visual{padding-left:0;margin-top:30px;max-width:none}
  .hero h1,.phero h1{max-width:100%}
}

/* ============================================================
   ENGAGEMENT + DELIVERY — figures instead of paragraphs
   Each engagement model gets a diagram of its shape over time:
   where the work starts, whether it ends, and who is on the
   team. That is the actual difference between the four, so the
   graphic carries it and the prose does not have to.
   ============================================================ */

/* --- engagement: shape-over-time --- */
.eng-fig{display:block;width:100%;max-width:200px;height:auto;margin:0 0 18px;overflow:visible}
.ef-base{stroke:var(--rule);stroke-width:1.5}
.dark .ef-base{stroke:var(--rule-dark)}
.ef-cap{stroke:var(--cyan);stroke-width:2}
.ef-bar{fill:var(--violet);transform-origin:left center}
.ef-them{fill:none;stroke:var(--rule);stroke-width:1.5}
.dark .ef-them{stroke:var(--rule-dark)}
.ef-us{fill:var(--violet)}
.ef-pulse{fill:none;stroke:var(--cyan);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ef-dotted{stroke:var(--rule);stroke-width:1.5;stroke-dasharray:2 5;stroke-linecap:round}
.dark .ef-dotted{stroke:var(--rule-dark)}
.ef-arrow{fill:none;stroke:var(--slate);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* held still until the row reveals, then drawn in reading order */
.eng .eng-card .ef-bar{transform:scaleX(0)}
.eng .eng-card .ef-cap,.eng .eng-card .ef-pulse,
.eng .eng-card .ef-dotted,.eng .eng-card .ef-arrow{stroke-dasharray:100;stroke-dashoffset:100}
.eng .eng-card .ef-us,.eng .eng-card .ef-them{opacity:0}

.eng.in .eng-card .ef-bar{animation:efGrow .8s var(--e-card) forwards;animation-delay:calc(var(--sd,0s) + .1s)}
.eng.in .eng-card .ef-cap{animation:efDraw .4s var(--e-soft) forwards;animation-delay:calc(var(--sd,0s) + .05s)}
.eng.in .eng-card .ef-cap2{animation-delay:calc(var(--sd,0s) + .75s)}
.eng.in .eng-card .ef-pulse{animation:efDraw 1.5s var(--e-soft) forwards;animation-delay:calc(var(--sd,0s) + .1s)}
.eng.in .eng-card .ef-dotted{animation:efDraw .7s var(--e-soft) forwards;animation-delay:calc(var(--sd,0s) + .5s)}
.eng.in .eng-card .ef-arrow{animation:efDraw .3s var(--e-soft) forwards;animation-delay:calc(var(--sd,0s) + 1.1s)}
.eng.in .eng-card .ef-weave circle{animation:efPop .34s var(--e-card) forwards}
.eng.in .eng-card .ef-weave circle:nth-child(1){animation-delay:calc(var(--sd,0s) + .10s)}
.eng.in .eng-card .ef-weave circle:nth-child(2){animation-delay:calc(var(--sd,0s) + .18s)}
.eng.in .eng-card .ef-weave circle:nth-child(3){animation-delay:calc(var(--sd,0s) + .26s)}
.eng.in .eng-card .ef-weave circle:nth-child(4){animation-delay:calc(var(--sd,0s) + .34s)}
.eng.in .eng-card .ef-weave circle:nth-child(5){animation-delay:calc(var(--sd,0s) + .42s)}
.eng.in .eng-card .ef-weave circle:nth-child(6){animation-delay:calc(var(--sd,0s) + .50s)}
.eng.in .eng-card .ef-weave circle:nth-child(7){animation-delay:calc(var(--sd,0s) + .58s)}

@keyframes efGrow{to{transform:scaleX(1)}}
@keyframes efDraw{to{stroke-dashoffset:0}}
@keyframes efPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.ef-weave circle{transform-origin:center;transform-box:fill-box}

/* chips replace the "Best for" sentence */
.eng-chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.eng-chips span{font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  padding:5px 9px;color:var(--slate);border:1px solid var(--rule);border-radius:2px}
.dark .eng-chips span{color:var(--on-dark-2);border-color:var(--rule-dark)}
.eng-card p{margin-bottom:0}

/* --- delivery: one small diagram per stage --- */
.step-fig{display:block;width:56px;height:44px;margin:0 0 16px;overflow:visible}
.sf-line{fill:none;stroke:var(--cyan);stroke-width:1.8;stroke-linecap:round}
.sf-dot{fill:var(--slate)}
.sf-node{fill:none;stroke:var(--violet);stroke-width:1.8}
.sf-lead{fill:var(--amber);stroke:var(--amber)}
.sf-inc{fill:var(--violet);transform-origin:left center}
.sf-bound{stroke:var(--slate);stroke-width:1.6;stroke-dasharray:3 4;opacity:.55}
.sf-cross{fill:none;stroke:var(--violet);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.steps .step .sf-line,.steps .step .sf-bound,.steps .step .sf-cross{stroke-dasharray:100;stroke-dashoffset:100}
.steps .step .sf-dot,.steps .step .sf-node{opacity:0}
.steps .step .sf-inc{transform:scaleX(0)}

.steps.in .step .sf-line{animation:efDraw .7s var(--e-soft) forwards;animation-delay:calc(var(--sd,0s) + .1s)}
.steps.in .step .sf-d2{animation-delay:calc(var(--sd,0s) + .3s)}
.steps.in .step .sf-bound{animation:efDraw .5s var(--e-soft) forwards;animation-delay:calc(var(--sd,0s) + .1s)}
.steps.in .step .sf-cross{animation:efDraw .5s var(--e-soft) forwards;animation-delay:calc(var(--sd,0s) + .35s)}
.steps.in .step .sf-head{animation-delay:calc(var(--sd,0s) + .7s)}
.steps.in .step .sf-dot,.steps.in .step .sf-node{animation:efPop .34s var(--e-card) forwards;
  animation-delay:calc(var(--sd,0s) + .35s)}
.steps.in .step .sf-inc{animation:efGrow .55s var(--e-card) forwards;animation-delay:calc(var(--sd,0s) + .1s)}
.steps.in .step .sf-i2{animation-delay:calc(var(--sd,0s) + .28s)}
.steps.in .step .sf-i3{animation-delay:calc(var(--sd,0s) + .46s)}
.sf-dot,.sf-node{transform-origin:center;transform-box:fill-box}

@media (prefers-reduced-motion:reduce){
  .eng .eng-card .ef-bar,.steps .step .sf-inc{transform:none}
  .eng .eng-card .ef-cap,.eng .eng-card .ef-pulse,.eng .eng-card .ef-dotted,
  .eng .eng-card .ef-arrow,.steps .step .sf-line,.steps .step .sf-bound,
  .steps .step .sf-cross{stroke-dashoffset:0}
  .eng .eng-card .ef-us,.eng .eng-card .ef-them,
  .steps .step .sf-dot,.steps .step .sf-node{opacity:1}
}
@media(max-width:640px){
  .eng-fig{max-width:170px;margin-bottom:14px}
  .step-fig{margin-bottom:12px}
}

/* ============================================================
   TIMEZONE OVERLAP — the offshore objection, answered with data
   Two bands per region on a shared local-time axis: your working
   day, our shifted one, and the window where they meet. Palette
   validated against the light surface (blue/green pass CVD and
   normal-vision separation; the green carries direct labels
   because it sits under 3:1 on its own).
   ============================================================ */
.tz{margin-top:44px}
.tz-legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:0 0 22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.tz-legend span{display:flex;align-items:center;gap:8px}
.tz-legend em{font-style:normal;opacity:.7;text-transform:none;letter-spacing:.03em;margin-left:auto}
.tz-k{width:16px;height:8px;border-radius:2px;display:block}
.tz-k-you{background:var(--violet)}
.tz-k-wh{background:var(--brand-green)}
.tz-k-ov{background:transparent;box-shadow:inset 0 0 0 1.4px var(--ink);border-radius:2px}

.tz-chart{display:block;width:100%;height:auto;overflow:visible}
.tz-tick{stroke:var(--rule)}
.tz-axis{font-family:var(--mono);font-size:10px;fill:var(--slate);text-anchor:middle;letter-spacing:.06em}
.tz-name{font-family:var(--mono);font-size:11px;fill:var(--ink);letter-spacing:.14em}
.tz-sub{font-family:var(--mono);font-size:9.5px;fill:var(--slate);letter-spacing:.04em}
.tz-you{fill:var(--violet)}
.tz-wh{fill:var(--brand-green)}
.tz-ov{fill:rgba(4,33,44,.045);stroke:var(--ink);stroke-width:1.2}
.tz-hrs{font-family:var(--mono);font-size:11px;fill:var(--ink);text-anchor:middle;letter-spacing:.08em}
.tz-row:hover .tz-ov{fill:rgba(4,33,44,.09)}
.tz-note{margin:26px 0 0;font-size:15.5px;color:var(--slate);max-width:70ch}
.tz-note strong{color:var(--ink);font-weight:600}

/* drawn in as the section reveals */
.tz .tz-you,.tz .tz-wh{transform:scaleX(0);transform-origin:left center;transform-box:fill-box}
.tz .tz-ov,.tz .tz-hrs{opacity:0}
.rv.in .tz .tz-you,.band:not(.rv) .tz .tz-you{animation:efGrow .75s var(--e-card) .1s forwards}
.rv.in .tz .tz-wh,.band:not(.rv) .tz .tz-wh{animation:efGrow .75s var(--e-card) .28s forwards}
.rv.in .tz .tz-ov,.band:not(.rv) .tz .tz-ov{animation:tzFade .5s var(--e-soft) .95s forwards}
.rv.in .tz .tz-hrs,.band:not(.rv) .tz .tz-hrs{animation:tzFade .5s var(--e-soft) 1.1s forwards}
@keyframes tzFade{to{opacity:1}}

@media(max-width:700px){
  .tz-legend em{margin-left:0;width:100%}
  .tz-sub{display:none}
  .tz-name{font-size:12px}
}

/* ============================================================
   PILLAR FIGURES — the industry default, then ours
   A recessive muted reference against one emphasised line. Shape
   differs as well as colour, so identity never rests on hue.
   ============================================================ */
.pf{display:block;width:120px;height:40px;margin:0 0 14px;overflow:visible}
.pf-ghost circle,.pf-ghost-d{fill:none;stroke:var(--on-dark-3);stroke-width:1.4;opacity:.75}
.pf-ghost-l{fill:none;stroke:var(--on-dark-3);stroke-width:1.4;stroke-dasharray:3 3;opacity:.75}
.pf-ours circle,.pf-ours-d{fill:var(--amber)}
.pf-ours-l{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf-bound{stroke:var(--on-dark-3);stroke-width:1.4;stroke-dasharray:3 4;opacity:.8}
.pf-doc{fill:none;stroke:var(--violet-soft);stroke-width:1.3}

.pillars .pillar .pf-ghost circle,.pillars .pillar .pf-ours circle,
.pillars .pillar .pf-ghost-d,.pillars .pillar .pf-ours-d,.pillars .pillar .pf-doc{opacity:0}
.pillars .pillar .pf-ghost-l,.pillars .pillar .pf-ours-l,.pillars .pillar .pf-bound{
  stroke-dasharray:100;stroke-dashoffset:100}
.pillars .pillar .pf-ghost-l{stroke-dasharray:3 3}

.pillars.in .pillar .pf-ghost circle,.pillars.in .pillar .pf-ghost-d{
  animation:efPop .3s var(--e-card) forwards;animation-delay:calc(var(--sd,0s) + .1s)}
.pillars.in .pillar .pf-ours circle,.pillars.in .pillar .pf-ours-d{
  animation:efPop .3s var(--e-card) forwards;animation-delay:calc(var(--sd,0s) + .34s)}
.pillars.in .pillar .pf-doc{animation:efPop .3s var(--e-card) forwards;
  animation-delay:calc(var(--sd,0s) + .5s)}
.pillars.in .pillar .pf-ghost-l{animation:pfGhost .6s var(--e-soft) forwards;
  animation-delay:calc(var(--sd,0s) + .1s);opacity:.75}
.pillars.in .pillar .pf-ours-l,.pillars.in .pillar .pf-bound{
  animation:efDraw .6s var(--e-soft) forwards;animation-delay:calc(var(--sd,0s) + .38s)}
.pillars.in .pillar .pf-head{animation-delay:calc(var(--sd,0s) + .8s)}
@keyframes pfGhost{from{opacity:0}to{opacity:.75}}
.pf circle,.pf rect{transform-origin:center;transform-box:fill-box}

@media (prefers-reduced-motion:reduce){
  .tz .tz-you,.tz .tz-wh{transform:none}
  .tz .tz-ov,.tz .tz-hrs{opacity:1}
  .pillars .pillar .pf-ghost circle,.pillars .pillar .pf-ours circle,
  .pillars .pillar .pf-ghost-d,.pillars .pillar .pf-ours-d,.pillars .pillar .pf-doc{opacity:1}
  .pillars .pillar .pf-ghost-l,.pillars .pillar .pf-ours-l,
  .pillars .pillar .pf-bound{stroke-dashoffset:0}
  .pillars .pillar .pf-ghost-l{stroke-dasharray:3 3}
}


/* On a phone the 740-unit viewBox squeezes 11px labels down to about 6px.
   Hold a legible minimum and let the day scroll sideways instead — same
   pattern as the wide tables, and the data stays intact. */
.tz-scroll{width:100%}
@media(max-width:760px){
  .tz-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;padding-bottom:6px;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
            mask-image:linear-gradient(90deg,#000 92%,transparent)}
  .tz-chart{min-width:640px}
  .tz-swipe{display:block}
}
.tz-swipe{display:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate);margin:8px 0 0;opacity:.75}

/* ============================================================
   CASE STUDY CARDS — an animated diagram per practice.
   AI/ML: a query scanning a vector space, three documents hit,
   an answer returned. Cloud: traffic moving across availability
   zones with one failing over. Web: events travelling between
   services. Each is the shape of the work in that card.
   ============================================================ */
.card-media{position:relative;overflow:hidden;aspect-ratio:16/9;
  background:linear-gradient(150deg,#072835,#04212C 62%)}
.cm{position:absolute;inset:0;width:100%;height:100%;display:block}
.cm-cap{position:absolute;left:14px;bottom:10px;z-index:2;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-3)}

/* --- AI / ML : retrieval --- */
.cm-grid rect{fill:rgba(234,242,244,.10)}
.cm-hit rect{fill:var(--brand-green);opacity:0;
  animation:cmHit 4.6s var(--e-soft) infinite}
.cm-hit rect:nth-child(2){animation-delay:.25s}
.cm-hit rect:nth-child(3){animation-delay:.5s}
.cm-scan{stroke:var(--brand-green);stroke-width:1.5;opacity:.85;
  animation:cmScan 4.6s cubic-bezier(.5,0,.3,1) infinite}
.cm-q{fill:var(--violet)}
.cm-a{fill:var(--brand-green);opacity:0;animation:cmHit 4.6s var(--e-soft) 1.1s infinite}
.cm-ray{stroke:var(--violet);stroke-width:1.6;fill:none;
  stroke-dasharray:100;stroke-dashoffset:100;animation:cmRay 4.6s var(--e-soft) infinite}
.cm-r2{stroke:var(--brand-green);animation-delay:.9s}
@keyframes cmScan{0%{transform:translateX(0)}55%{transform:translateX(252px)}
  70%{transform:translateX(252px);opacity:0}71%{opacity:0;transform:translateX(0)}100%{opacity:.85;transform:translateX(0)}}
@keyframes cmHit{0%,8%{opacity:0}22%,72%{opacity:1}86%,100%{opacity:0}}
@keyframes cmRay{0%{stroke-dashoffset:100}18%,70%{stroke-dashoffset:0}88%,100%{stroke-dashoffset:100}}

/* --- Cloud : zones + failover --- */
.cm-zone rect{fill:rgba(234,242,244,.05);stroke:rgba(234,242,244,.22);stroke-width:1}
.cm-zone text{font-family:var(--mono);font-size:9px;fill:var(--on-dark-3);
  text-anchor:middle;letter-spacing:.14em}
.cm-zone-b rect{animation:cmFail 6s var(--e-soft) infinite}
.cm-flow{stroke:var(--violet);stroke-width:1.6;fill:none;stroke-dasharray:100;stroke-dashoffset:100;
  animation:cmRay 6s var(--e-soft) infinite}
.cm-f2{animation-delay:.4s}
.cm-f3{stroke:var(--brand-green);animation-delay:.8s}
.cm-load{fill:var(--brand-green);offset-path:path('M20 90 H278');
  animation:cmLoad 6s cubic-bezier(.4,0,.3,1) infinite}
@keyframes cmFail{0%,40%{stroke:rgba(234,242,244,.22);fill:rgba(234,242,244,.05)}
  55%,80%{stroke:var(--brand-green);fill:rgba(38,199,143,.12)}
  95%,100%{stroke:rgba(234,242,244,.22);fill:rgba(234,242,244,.05)}}
@keyframes cmLoad{0%{offset-distance:0%;opacity:0}8%{opacity:1}
  78%{offset-distance:100%;opacity:1}88%,100%{offset-distance:100%;opacity:0}}

/* --- Web : events between services --- */
.cm-edge{stroke:rgba(234,242,244,.24);stroke-width:1.4;fill:none;
  stroke-dasharray:100;stroke-dashoffset:100;animation:cmRay 5.2s var(--e-soft) infinite}
.cm-e2{animation-delay:.3s}.cm-e3{animation-delay:.6s}
.cm-svc{fill:rgba(4,33,44,.9);stroke:var(--violet);stroke-width:2;
  animation:cmNode 5.2s var(--e-soft) infinite}
.cm-s2{stroke:var(--brand-green);animation-delay:.45s}
.cm-s3{animation-delay:.9s}
.cm-msg{fill:var(--brand-green);
  offset-path:path('M70 60 C120 60 120 120 170 120');
  animation:cmLoad 5.2s cubic-bezier(.5,0,.4,1) 1.1s infinite}
@keyframes cmNode{0%,10%{opacity:0;transform:scale(.7)}26%,80%{opacity:1;transform:scale(1)}
  94%,100%{opacity:0;transform:scale(.7)}}
.cm-svc{transform-origin:center;transform-box:fill-box}

/* --- Quality engineering : sweep the page, fill the report --- */
.cm-page rect{fill:rgba(234,242,244,.04);stroke:rgba(234,242,244,.22);stroke-width:1}
.cm-page line{stroke:rgba(234,242,244,.18);stroke-width:2.5;stroke-linecap:round}
.cm-sweep{stroke:var(--brand-green);stroke-width:1.5;opacity:.9;
  animation:cmSweep 5.4s cubic-bezier(.5,0,.3,1) infinite}
.cm-flag circle{fill:var(--violet);opacity:0;animation:cmHit 5.4s var(--e-soft) infinite}
.cm-flag circle:nth-child(2){animation-delay:.5s}
.cm-flag circle:nth-child(3){animation-delay:1s}
.cm-trk{fill:rgba(234,242,244,.10)}
.cm-fil{fill:var(--brand-green);transform-box:fill-box;transform-origin:left center;
  animation:cmFill 5.4s var(--e-soft) 1.5s infinite}
.cm-fil2{fill:var(--cyan);animation-delay:1.75s}
.cm-fil3{fill:var(--violet-soft);animation-delay:2s}
@keyframes cmSweep{
  0%{transform:translateY(0);opacity:.9}
  52%{transform:translateY(106px);opacity:.9}
  64%{transform:translateY(106px);opacity:0}
  65%,100%{transform:translateY(0);opacity:0}
  99.9%{opacity:0}}
@keyframes cmFill{0%{transform:scaleX(0)}
  26%,74%{transform:scaleX(var(--w,1))}
  92%,100%{transform:scaleX(0)}}

/* --- Developer tooling : a build crosses the air onto a device --- */
.cm-host rect{fill:rgba(234,242,244,.04);stroke:rgba(234,242,244,.22);stroke-width:1}
.cm-host line{stroke:rgba(234,242,244,.22);stroke-width:1}
.cm-host circle{fill:rgba(234,242,244,.3)}
.cm-wave path{fill:none;stroke:var(--violet);stroke-width:1.8;stroke-linecap:round;opacity:0;
  animation:cmWave 5.6s var(--e-soft) infinite}
.cm-wave path:nth-child(2){animation-delay:.22s}
.cm-wave path:nth-child(3){animation-delay:.44s}
.cm-dev > rect{fill:rgba(234,242,244,.04);stroke:rgba(234,242,244,.28);stroke-width:1.4}
.cm-scr{fill:rgba(234,242,244,.06);
  animation:cmScreen 5.6s var(--e-soft) infinite}
.cm-apk{fill:var(--brand-green);
  offset-path:path('M78 90 C140 90 190 90 262 90');offset-rotate:0deg;
  animation:cmSend 5.6s cubic-bezier(.45,0,.35,1) infinite}
@keyframes cmWave{0%,6%{opacity:0;transform:translateX(-6px)}
  22%,52%{opacity:.85;transform:none}
  72%,100%{opacity:0;transform:translateX(6px)}}
@keyframes cmSend{0%,24%{offset-distance:0%;opacity:0}
  30%{opacity:1}
  62%{offset-distance:100%;opacity:1}
  70%,100%{offset-distance:100%;opacity:0}}
@keyframes cmScreen{0%,60%{fill:rgba(234,242,244,.06)}
  70%,86%{fill:rgba(38,199,143,.30)}
  96%,100%{fill:rgba(234,242,244,.06)}}

@media (prefers-reduced-motion:reduce){
  .cm-scan,.cm-hit rect,.cm-a,.cm-ray,.cm-flow,.cm-load,.cm-zone-b rect,
  .cm-edge,.cm-svc,.cm-msg,.cm-sweep,.cm-flag circle,.cm-fil,
  .cm-wave path,.cm-apk,.cm-scr{animation:none}
  .cm-hit rect,.cm-a,.cm-svc,.cm-flag circle,.cm-wave path{opacity:1}
  .cm-fil{transform:scaleX(var(--w,1))}
  .cm-ray,.cm-flow,.cm-edge{stroke-dashoffset:0}
  .cm-msg,.cm-load,.cm-apk{opacity:0}
  .cm-sweep{opacity:0}
}


/* 9am–9pm IST wraps past midnight in the Americas, so the axis runs a full
   24 hours and the band is drawn in two segments. The extension is dashed
   and unbounded on purpose — it is availability, not a committed window. */
.tz-ext{fill:none;stroke:var(--brand-green);stroke-width:1.4;stroke-dasharray:4 4;opacity:.8}
.tz-extlab{font-family:var(--mono);font-size:9px;fill:var(--slate);letter-spacing:.08em}
.tz-k-ext{background:transparent;box-shadow:inset 0 0 0 1.4px var(--brand-green);border-radius:2px}
.tz .tz-ext{opacity:0}
.rv.in .tz .tz-ext,.band:not(.rv) .tz .tz-ext{animation:tzFade .5s var(--e-soft) 1.25s forwards}
@media (prefers-reduced-motion:reduce){ .tz .tz-ext{opacity:.8} }

/* ============================================================
   GLOBAL REACH — India as origin, sixteen markets.
   Replaces the overlap chart: the section's job is to make the
   reach believable, not to publish an auditable timetable.
   Arcs draw outward in sequence, then carry traffic on a loop.
   ============================================================ */
.globe{margin-top:38px}
.globe-svg{display:block;width:100%;height:auto;overflow:visible}

.gm-arc{fill:none;stroke:var(--violet);stroke-width:1.1;opacity:.42;
  stroke-dasharray:100;stroke-dashoffset:100}
.gm-dot{fill:var(--violet);opacity:0}
.gm-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  fill:var(--slate);opacity:0}
.gm-home{fill:var(--brand-green)}
.gm-home-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  fill:var(--emph-light);font-weight:500}
.gm-home-ring{fill:none;stroke:var(--brand-green);stroke-width:1.4;transform-origin:721.5px 199.2px;
  animation:gmPing 3.4s ease-out infinite}
.gm-home-ring.d2{animation-delay:1.7s}
@keyframes gmPing{0%{opacity:.7;transform:scale(.5)}75%{opacity:0;transform:scale(2.6)}100%{opacity:0}}

/* reveal: arcs reach out, then the markets light up behind them */
.rv.in .gm-arc,.band:not(.rv) .gm-arc{
  animation:efDraw .9s var(--e-soft) forwards;animation-delay:calc(.12s * var(--i))}
.rv.in .gm-dot,.band:not(.rv) .gm-dot,
.rv.in .gm-label,.band:not(.rv) .gm-label{
  animation:tzFade .45s var(--e-soft) forwards;animation-delay:calc(.12s * var(--i) + .7s)}

/* traffic, once the routes exist */
.gm-pulse{fill:var(--brand-green);offset-rotate:0deg;
  animation:gmFly 5.2s cubic-bezier(.45,0,.5,1) infinite}
@keyframes gmFly{0%{offset-distance:0%;opacity:0}
  8%{opacity:1}72%{offset-distance:100%;opacity:1}
  84%,100%{offset-distance:100%;opacity:0}}

.globe-note{margin:22px 0 0;font-size:15.5px;color:var(--slate);max-width:66ch}
.globe-note strong{color:var(--ink);font-weight:600}

/* On a phone the labels would render at about 3px, so drop them —
   the arcs reaching out of India are the point, and the section is
   meant to carry almost no text anyway. */
@media(max-width:760px){
  .gm-labels{display:none}
  .gm-home-label{font-size:20px}
  .gm-arc{stroke-width:1.9;opacity:.5}
  .gm-dot{r:6}
  .gm-pulse{r:5}
  .gm-home{r:9}
  .gm-home-ring{stroke-width:2.4}
}
@media (prefers-reduced-motion:reduce){
  .gm-arc{stroke-dashoffset:0}
  .gm-dot,.gm-label{opacity:1}
  .gm-pulse{display:none}
  .gm-home-ring{animation:none;opacity:.4}
}

/* ============================================================
   CONTINUITY — the promise the firm actually controls.
   Typical engagement: people rotate off and are replaced, so the
   lifelines break. Ours: the same engineers run the full length.
   Geography is already the overture's job; this is not that.
   ============================================================ */
.cont-svg{display:block;width:100%;height:auto;overflow:visible;margin-top:8px}
.cn-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;fill:var(--slate)}
.cn-tag-us{fill:var(--emph-light)}
.cn-rule{stroke:var(--rule)}
.cn-end{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;fill:var(--slate)}

.cn-old{stroke:var(--on-dark-3);stroke-width:3;opacity:.55;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100}
.cn-odot{fill:none;stroke:var(--on-dark-3);stroke-width:1.6;opacity:0}
.cn-new{stroke:var(--brand-green);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100}
.cn-ndot{fill:var(--brand-green);opacity:0}

.rv.in .cn-old,.band:not(.rv) .cn-old,
.rv.in .cn-new,.band:not(.rv) .cn-new{
  animation:efDraw .55s var(--e-card) forwards;animation-delay:var(--d,0s)}
.rv.in .cn-odot,.band:not(.rv) .cn-odot,
.rv.in .cn-ndot,.band:not(.rv) .cn-ndot{
  animation:tzFade .3s var(--e-soft) forwards;animation-delay:var(--d,0s)}

@media(max-width:640px){
  .cn-tag,.cn-end{font-size:16px}
  .cn-old{stroke-width:5}.cn-new{stroke-width:6}
  .cn-odot{stroke-width:2.6;r:7}.cn-ndot{r:8}
}
@media (prefers-reduced-motion:reduce){
  .cn-old,.cn-new{stroke-dashoffset:0}
  .cn-odot,.cn-ndot{opacity:1}
}

/* The three lead-practice cards sit on an ink background inside a light
   section, so their headings inherited ink and rendered invisible —
   #0C0B1F on #0C0B1F in the original, #04212C on #04212C after the
   rebrand. Pre-existing; the shorter copy just made the void obvious. */
.spear h3{color:var(--paper)}
.spear .spear-tag{color:var(--violet-soft)}

/* ============================================================
   SERVICES — read in ten seconds, not ten paragraphs
   Each card: one plain sentence, four situations a buyer would
   recognise in their own words, then the stack in mono for the
   engineer who is also reading. Two audiences, one card.
   ============================================================ */
.probs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:26px}
.prob{display:block;background:var(--paper-lift);padding:24px 22px 20px;text-decoration:none;
  position:relative;transition:background .25s var(--e-card),transform .25s var(--e-card)}
.prob:hover{background:#fff;transform:translateY(-2px)}
.prob::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--grad-brand);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--e-card)}
.prob:hover::after{transform:scaleX(1)}
.prob span{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--slate);
  display:block;margin-bottom:14px}
.prob b{display:block;font-family:var(--display);font-weight:400;font-size:20px;
  line-height:1.22;letter-spacing:-.015em;color:var(--ink);margin-bottom:10px}
.prob i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--emph-light)}
@media(max-width:900px){.probs{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.probs{grid-template-columns:1fr}}

.svc-lead{font-size:17.5px;line-height:1.45;color:var(--ink);margin:0 0 22px;max-width:34ch}
.svc-forlabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);margin:0 0 12px}
.svc-for{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.svc-for li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.5;color:var(--slate)}
.svc-for li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1.5px;
  background:var(--emph-light)}
.svc-stack{font-family:var(--mono);font-size:11.5px;line-height:1.85;letter-spacing:.04em;
  color:var(--slate);border-top:1px solid var(--rule);padding-top:14px;margin:0 0 18px}
.dark .svc-lead{color:var(--paper)}
.dark .svc-for li,.dark .svc-stack{color:var(--on-dark-2)}

/* ============================================================
   CASE STUDIES — clickable cards, and the detail page
   ============================================================ */
.card-link{position:relative}
.card-hit{position:absolute;inset:0;z-index:3}
.card-link:hover{transform:translateY(-3px)}
.card-link{transition:transform .3s var(--e-card)}
.card-more{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--emph-light);margin:14px 0 0;display:flex;align-items:center;gap:8px}
.card-more span{transition:transform .25s var(--e-card)}
.card-link:hover .card-more span{transform:translateX(4px)}

.cs-hero h1{max-width:20ch}
.cs-hero .lede{margin-top:18px}
.cs-stack{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:26px 0 0;padding:0}
.cs-stack li{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;padding:6px 11px;
  border:1px solid var(--rule);border-radius:2px;color:var(--slate)}
.cs-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(28px,5vw,70px)}
.cs-body p{font-size:18px;line-height:1.6;color:var(--slate);margin:0 0 18px;max-width:62ch}
.cs-body p:last-child{margin-bottom:0}
.cs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-dark);
  border:1px solid var(--rule-dark);margin-top:44px}
.cs-step{background:var(--ink);padding:32px 28px}
.cs-n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--emph-dark);
  display:block;margin-bottom:16px}
.cs-step h3{font-size:21px;letter-spacing:-.02em;color:var(--paper);margin:0 0 10px}
.cs-step p{font-size:15.5px;line-height:1.58;color:var(--on-dark-2);margin:0}
.cs-outs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:40px}
.cs-out{background:var(--paper-lift);padding:28px 24px}
.cs-out b{display:block;font-family:var(--display);font-weight:600;font-size:20px;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:9px}
.cs-out p{font-size:15.5px;line-height:1.55;color:var(--slate);margin:0}
.cs-note{margin:26px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--slate)}
@media(max-width:900px){
  .cs-grid{grid-template-columns:1fr}
  .cs-steps,.cs-outs{grid-template-columns:1fr}
}

/* ============================================================
   CASE STUDIES 2.0 — project name, about, features, tech
   ============================================================ */
.cs-name{display:flex;align-items:center;gap:10px;margin:18px 0 12px;
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--emph-light)}
.cs-name i{display:block;width:26px;height:1px;background:var(--emph-light);flex:none}
.cs-hero h1{margin-top:0}

.cs-meta{display:flex;flex-wrap:wrap;gap:0;margin:26px 0 0;padding:0;
  border-top:1px solid var(--rule)}
.cs-meta>div{padding:16px 30px 0 0;margin-right:30px;border-right:1px solid var(--rule)}
.cs-meta>div:last-child{border-right:0;margin-right:0}
.cs-meta dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);margin-bottom:6px}
.cs-meta dd{margin:0;font-size:15px;color:var(--ink);letter-spacing:-.01em}

.cs-feats{display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:44px}
.cs-feat{background:var(--paper);padding:26px 24px 28px;
  transition:background .3s var(--ease)}
.cs-feat:hover{background:var(--paper-lift)}
.cs-feat i{display:block;width:34px;height:34px;color:var(--emph-light);margin-bottom:16px}
.cs-feat i svg{width:100%;height:100%;display:block;
  transition:transform .45s var(--ease)}
.cs-feat:hover i svg{transform:translateY(-2px) scale(1.06)}
.cs-feat b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:7px}
.cs-feat p{font-size:14.5px;line-height:1.55;color:var(--slate);margin:0}

.cs-tech{margin-top:52px;padding-top:34px;border-top:1px solid var(--rule)}
.cs-tech-list{margin:22px 0 0;padding:0;display:grid;gap:0}
.cs-tech-row{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:20px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule)}
.cs-tech-row:last-child{border-bottom:0}
.cs-tech-row dt{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate)}
.cs-tech-row dd{margin:0;display:flex;flex-wrap:wrap;gap:7px}
.cs-tech-row dd span{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;
  color:var(--ink);padding:5px 11px;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper)}

@media(max-width:900px){
  .cs-feats{grid-template-columns:1fr 1fr}
  .cs-meta>div{padding-right:20px;margin-right:20px}
}
@media(max-width:620px){
  .cs-feats{grid-template-columns:1fr}
  .cs-meta{display:grid;grid-template-columns:1fr;gap:0}
  .cs-meta>div{border-right:0;margin-right:0;padding:14px 0 0;
    border-bottom:1px solid var(--rule);padding-bottom:14px}
  .cs-meta>div:last-child{border-bottom:0}
  .cs-tech-row{grid-template-columns:1fr;gap:10px}
}

/* intro sits on ink but is not .dark — invert its primary button */
.intro-copy .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.intro-copy .btn:hover{background:var(--violet-lift);border-color:var(--violet-lift);color:#fff}

/* ============================================================
   KINETIC STATEMENT — the breathing room between two dense
   sections. Type only; the last phrase cycles on a loop.
   ============================================================ */
.kin{padding-block:clamp(80px,11vw,168px);overflow:hidden}
.kin .wrap{max-width:1180px}
.kin-line{margin:0;font-family:var(--display);font-weight:200;
  font-size:clamp(2.05rem,6.1vw,4.9rem);line-height:1.06;letter-spacing:-.028em;
  color:var(--on-dark-1)}
.kin-line > span{display:block}
.kin-sr{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.kin-slot{position:relative;min-height:1.08em}
.kin-slot i{position:absolute;left:0;top:0;white-space:nowrap;font-style:italic;
  color:var(--amber-soft);clip-path:inset(0 100% 0 0);
  animation:kinword 9s var(--e-wipe) infinite}
.kin-slot i:nth-child(2){animation-delay:3s}
.kin-slot i:nth-child(3){animation-delay:6s}
@keyframes kinword{
  0%     {clip-path:inset(0 100% 0 0)}
  6.5%   {clip-path:inset(0 0 0 0)}
  27%    {clip-path:inset(0 0 0 0)}
  33.5%  {clip-path:inset(0 0 0 100%)}
  99.99% {clip-path:inset(0 0 0 100%)}
  100%   {clip-path:inset(0 100% 0 0)}
}
/* The hairline lives inside .kin-line on purpose. As a direct child of
   .wrap it would pick up .rv, whose translateY(26px) pushes the last
   child past the band-wipe clip on .wrap — the observer then sees an
   empty intersection and never reveals it, so it stays down forever. */
.kin-rule{display:block;position:relative;height:1px;overflow:hidden;
  margin-top:clamp(26px,3vw,44px)}
.kin-rule::after{content:"";position:absolute;inset:0;background:var(--grad-brand);
  transform:scaleX(1);transform-origin:left}
.kin-line.rv .kin-rule::after{transform:scaleX(0)}
.kin-line.rv.in .kin-rule::after{transform:scaleX(1);
  transition:transform 1.6s var(--e-wipe) .35s}

@media(prefers-reduced-motion:reduce){
  .kin-slot i{animation:none;clip-path:inset(0 0 0 100%)}
  .kin-slot i:first-child{clip-path:none}
  .kin-rule{transition:none;width:100%}
}

/* ============================================================
   ENQUIRY HANDOFF — shown when there is no backend to post to,
   or when posting fails. The message is never lost: a mail link,
   a copy button, and the text itself.
   ============================================================ */
.f-hand{border:1px solid var(--rule-dark);background:rgba(234,242,244,.03);
  padding:clamp(18px,2.4vw,26px);margin:6px 0 20px}
.f-hand-h{margin:0 0 16px;font-size:15.5px;line-height:1.5;color:var(--on-dark-1)}
.f-hand-a{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.f-hand-a .btn{font-size:13px;padding:12px 20px}
.f-hand-l{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-3);margin-bottom:9px}
.f-hand-t{width:100%;resize:vertical;background:rgba(4,33,44,.5);
  border:1px solid var(--rule-dark);color:var(--on-dark-2);
  font-family:var(--mono);font-size:12px;line-height:1.65;padding:12px 14px}
.f-hand-t:focus{outline:2px solid var(--violet-soft);outline-offset:1px}
/* Honeypot. Offscreen rather than display:none — some bots skip hidden
   fields, and none of them read a stylesheet. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ============================================================
   CONTRAST PASS — measured, not guessed
   Every text/background pair on the site was computed against its
   real painted backdrop. What follows fixes what failed WCAG AA.
   ============================================================ */

/* 1. Two cases of text painted onto its own colour. Both were
      invisible rather than merely low-contrast. */
.pstage-name{color:var(--ink)}          /* pipeline stage names: paper on paper-lift, 1.07:1 */
.spear-back h3{color:var(--paper)}    /* flipped practice card headline: ink on ink, 1:1 */

/* 2. The brand blue and cyan are tuned for dark surfaces. On paper
      they land at 2.66–4.45:1, under the 4.5:1 floor for body text.
      Same hues, taken down until they pass, used only where the text
      sits on a light surface. Graphics keep the brighter originals —
      the floor applies to text. */
:root{
  --violet-ink:#0072BE;   /* 4.61:1 on paper, 4.92:1 on paper-lift */
  --cyan-ink:#177987;     /* 4.64:1 on paper, 4.95:1 on paper-lift */
}
section:not(.dark):not(.intro) .eyebrow,
section:not(.dark):not(.intro) .crumb a,
section:not(.dark):not(.intro) .stack-row dt,
section:not(.dark):not(.intro) .step-n,
section:not(.dark):not(.intro) .step.lit .step-n,
section:not(.dark):not(.intro) .card-tag,
section:not(.dark):not(.intro) .card-del,
section:not(.dark):not(.intro) .eng-tag,
section:not(.dark):not(.intro) .ex-tag,
section:not(.dark):not(.intro) .cap dt,
section:not(.dark):not(.intro) .acc-q span,
section:not(.dark):not(.intro) .acc-item.open .acc-q,
section:not(.dark):not(.intro) .strip a span,
section:not(.dark):not(.intro) .ov span,
section:not(.dark):not(.intro) .scale th,
section:not(.dark):not(.intro) .svc-foot a,
section:not(.dark):not(.intro) .idx-empty a,
section:not(.dark):not(.intro) .mark-word em,
.doc .mark-note{color:var(--violet-ink)}

section:not(.dark):not(.intro) .ticker-label,
section:not(.dark):not(.intro) .hero-side dt,
section:not(.dark):not(.intro) .phero-facts dt,
section:not(.dark):not(.intro) .sw-info b,
section:not(.dark):not(.intro) .spec-label,
section:not(.dark):not(.intro) .svc-head i,
section:not(.dark):not(.intro) .matrix th{color:var(--cyan-ink)}

/* The pipeline is a light panel that sits inside a dark section, so the
   selector above does not reach it. */
.pipe-head .run{color:var(--cyan-ink)}

/* Skip link. The masthead costs a keyboard user seven tab stops before any
   content on every page; this is the way past it. Offscreen until focused. */
.skip{position:fixed;left:14px;top:-72px;z-index:150;
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);
  padding:12px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;transition:top .18s var(--ease)}
.skip:focus{top:14px;outline:2px solid var(--violet-ink);outline-offset:2px}
main:focus{outline:none}

/* Standalone links need a 24px target (WCAG 2.5.8). Links inline in a
   sentence are exempt — these two are not: they stand alone. */
.crumb a,.svc-foot a{display:inline-block;padding-block:4px}

/* --- Security engineering : sealed vault, key off the disk --- */
.cm-vault{fill:rgba(234,242,244,.04);stroke:rgba(234,242,244,.24);stroke-width:1.4}
.cm-rows rect{fill:rgba(234,242,244,.10)}
.cm-rows rect:nth-child(2){animation:cmHit 5s var(--e-soft) .3s infinite}
.cm-shackle path{fill:none;stroke:var(--brand-green);stroke-width:3;stroke-linecap:round;
  animation:cmSeal 5s var(--e-soft) infinite}
.cm-key{fill:rgba(38,199,143,.14);stroke:#26C78F;stroke-width:1.5;stroke-dasharray:6 5;
  animation:cmSeal 5s var(--e-soft) infinite}
.cm-keyt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;fill:var(--brand-green);
  text-anchor:middle;animation:cmSeal 5s var(--e-soft) infinite}
.cm-disk{fill:rgba(234,242,244,.03);stroke:rgba(234,242,244,.2);stroke-width:1.4}
.cm-diskt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;fill:var(--on-dark-3);
  text-anchor:middle}
.cm-no{stroke:var(--on-dark-3);stroke-width:1.5}
@keyframes cmSeal{0%,12%{opacity:.25}30%,72%{opacity:1}90%,100%{opacity:.25}}

/* --- Platform engineering : pods rolling forward --- */
.cm-cluster{fill:rgba(234,242,244,.04);stroke:rgba(234,242,244,.22);stroke-width:1.4}
.cm-new rect{fill:rgba(38,199,143,.18);stroke:#26C78F;stroke-width:1.5;
  animation:cmHit 5s var(--e-soft) infinite}
.cm-new rect:nth-child(2){animation-delay:.4s}
.cm-old rect{fill:rgba(234,242,244,.04);stroke:rgba(234,242,244,.26);stroke-width:1.4;
  stroke-dasharray:6 5;animation:cmDrain 5s var(--e-soft) infinite}
.cm-old rect:nth-child(2){animation-delay:.4s}
.cm-sweep2{stroke:var(--violet);stroke-width:1.6;opacity:.8;
  animation:cmRoll 5s cubic-bezier(.5,0,.3,1) infinite}
@keyframes cmDrain{0%,20%{opacity:1}55%,80%{opacity:.3}95%,100%{opacity:1}}
@keyframes cmRoll{0%{transform:translateX(0);opacity:.8}
  60%{transform:translateX(252px);opacity:.8}
  74%{transform:translateX(252px);opacity:0}
  75%,100%{transform:translateX(0);opacity:0}99.9%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .cm-shackle path,.cm-key,.cm-keyt,.cm-rows rect,.cm-new rect,.cm-old rect,
  .cm-sweep2{animation:none}
  .cm-key,.cm-keyt,.cm-shackle path,.cm-new rect,.cm-old rect{opacity:1}
  .cm-sweep2{opacity:0}
}