:root{
  --navy:#0B2149; --navy-d:#081937; --navy-l:#16346B;
  --blue:#1E6BF1; --blue-d:#1557C8;
  --gold:#D9A22E; --gold-l:#EFC46B; --gold-d:#B5791A;
  --green:#2E8B62;
  --ink:#0F1F3A; --body:#4E5F7A; --muted:#7A8AA3;
  --bg:#F4F6F9; --paper:#FFFFFF; --line:#E3E8EF; --line-2:#EDF1F6;
  --tint-blue:#EAF1FE; --tint-green:#E7F4EE; --tint-gold:#FBEEDC;
  --r:14px; --r-lg:22px;
  --shadow:0 1px 2px rgba(11,33,73,.04), 0 8px 24px rgba(11,33,73,.06);
  --shadow-lg:0 22px 64px rgba(11,33,73,.16);
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --wrap:1240px; --rail:74px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--body);font-family:var(--sans);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.12;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--gold);color:#3A2705}

/* ---------- reveal ---------- */
html.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.22,.7,.3,1), transform .8s cubic-bezier(.22,.7,.3,1)}
html.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}

/* ---------- type system ---------- */
.display{font-family:var(--serif);font-weight:700;letter-spacing:-.035em;line-height:1.02;color:var(--ink)}
.h2{font-family:var(--serif);font-size:clamp(28px,3.6vw,46px);font-weight:700;letter-spacing:-.032em;line-height:1.06}
.h3{font-family:var(--serif);font-size:clamp(20px,2.1vw,28px);font-weight:700;letter-spacing:-.025em}
.lede{font-size:clamp(15px,1.35vw,17.5px);line-height:1.68;color:#4A5C79}
.label{font-feature-settings:'liga' 1;display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.label::before{content:"";width:26px;height:1px;background:var(--gold)}
.label--solo::before{display:none}
.serifnum{font-family:var(--serif);font-weight:700;letter-spacing:-.05em}

/* section head: oversized span number + title */
.shead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:start;margin-bottom:clamp(28px,4vw,52px)}
.shead__no{font-family:var(--serif);font-size:clamp(46px,7vw,104px);font-weight:700;line-height:.82;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.4px #C3CEDE;text-stroke:1.4px #C3CEDE}
.shead__txt{max-width:720px}
.shead__txt .h2{margin:10px 0 12px}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;border-radius:999px;font-size:13.5px;font-weight:600;
  padding:14px 26px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .22s cubic-bezier(.3,1.2,.5,1), box-shadow .22s, background .22s, color .22s, border-color .22s}
.btn > *{position:relative;z-index:2}
.btn::after{content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;z-index:1;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s ease}
.btn:hover::after{left:150%}
.btn svg{width:15px;height:15px;flex:0 0 auto;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.btn:hover svg{transform:translateX(5px)}
.btn--navy{background:var(--navy);color:#fff;box-shadow:0 12px 28px rgba(11,33,73,.2)}
.btn--navy:hover{background:var(--navy-l);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--navy);border-color:#CBD6E5}
.btn--ghost::after{background:linear-gradient(90deg,transparent,rgba(30,107,241,.12),transparent)}
.btn--ghost:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn--gold{background:var(--gold);color:#3A2705}
.btn--gold:hover{background:var(--gold-l);transform:translateY(-2px)}
.tlink{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--blue);position:relative}
.tlink svg{width:15px;height:15px;transition:transform .3s}
.tlink::after{content:"";position:absolute;left:0;right:22px;bottom:-4px;height:1px;background:currentColor;opacity:.35;transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.4,0,.2,1)}
.tlink:hover::after{transform:scaleX(1)}
.tlink:hover svg{transform:translateX(5px)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid rgba(227,232,239,.9)}
.hdr__in{display:flex;align-items:center;gap:26px;height:78px}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{width:46px;height:46px;flex:0 0 auto;transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.brand:hover .brand__mark{transform:rotate(-8deg) scale(1.05)}
.brand__txt{font-family:var(--serif);color:var(--navy);line-height:1.05}
.brand__txt b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em}
.brand__txt span{display:block;font-size:10.5px;letter-spacing:.28em;color:#40567A;font-family:var(--sans);font-weight:600;margin-top:2px}
.nav{margin-left:auto;display:flex;align-items:center;gap:28px}
.nav a{position:relative;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#43587B;padding:6px 0;transition:color .2s}
.nav a::before{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--gold);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.nav a:hover{color:var(--navy)}.nav a:hover::before{transform:scaleX(1)}
.nav a.is-active{color:var(--navy)}
.nav a.is-active::before{transform:scaleX(1);background:var(--navy)}
.hdr .btn{flex:0 0 auto;margin-left:6px;padding:12px 22px}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--navy);border-radius:2px}
.burger span::before{top:-6px}.burger span::after{top:6px}
.nav__cta{display:none}

/* ---------- the rail (scroll-drawn bridge) ---------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:70;display:flex;align-items:center;justify-content:center;pointer-events:none}
.rail__col{position:relative;height:min(68vh,560px);width:100%;pointer-events:auto}
.rail__base{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:#D9E1EB;border-radius:2px}
.rail__prog{position:absolute;left:50%;top:0;width:2px;margin-left:-1px;height:0;background:linear-gradient(180deg,var(--navy),var(--blue));border-radius:2px;transition:height .12s linear}
.rail__cab{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;opacity:1}
.rail__node{position:absolute;left:50%;top:var(--p);transform:translate(-50%,-50%);width:36px;height:36px;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center}
.rail__node i{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #C6D0DE;display:block;
  transition:background .3s, border-color .3s, transform .35s cubic-bezier(.3,1.5,.5,1)}
.rail__node em{position:absolute;left:30px;white-space:nowrap;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 10px;box-shadow:var(--shadow);
  opacity:0;transform:translateX(-8px);transition:opacity .25s, transform .25s;pointer-events:none}
.rail__node:hover em{opacity:1;transform:none}
.rail__node:hover i{border-color:var(--navy);transform:scale(1.2)}
.rail__node.on i{background:var(--gold);border-color:var(--gold-d);transform:scale(1.3)}
.rail__tok{position:absolute;left:50%;top:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(217,162,46,.2);transition:top .12s linear}
.rail__cap{position:absolute;left:50%;transform:translateX(-50%);font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#A3B0C4;
  writing-mode:vertical-rl}
.rail__cap--t{bottom:calc(100% + 14px)}
.rail__cap--b{top:calc(100% + 14px)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(40px,6vw,74px) 0 0}
.hero__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,4vw,54px);align-items:center}
.hero h1{font-family:var(--serif);font-size:clamp(40px,5.4vw,74px);font-weight:700;letter-spacing:-.042em;line-height:.99;color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--blue);position:relative}
.hero__kicker{margin-bottom:20px}
.hero__lead{margin-top:22px;max-width:440px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero__meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.hero__meta div b{display:block;font-family:var(--serif);font-size:22px;color:var(--ink);letter-spacing:-.03em}
.hero__meta div span{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* the crossing artwork */

.bank{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}

@keyframes travel{0%{offset-distance:0%}100%{offset-distance:100%}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- value bar ---------- */
.valuebar{position:relative;z-index:5;background:var(--navy);border-radius:var(--r-lg);box-shadow:0 28px 64px rgba(11,33,73,.24);color:#fff;
  display:grid;grid-template-columns:repeat(5,1fr);margin-top:clamp(30px,5vw,58px)}
.vitem{display:flex;gap:14px;align-items:flex-start;padding:26px 22px;border-left:1px solid rgba(255,255,255,.11);transition:background .28s}
.vitem:first-child{border-left:0}
.vitem:hover{background:rgba(255,255,255,.05)}
.vitem__ic{flex:0 0 auto;width:46px;height:46px;border:1px solid rgba(217,162,46,.5);border-radius:50%;display:grid;place-items:center;color:var(--gold-l);
  transition:background .28s,color .28s,border-color .28s,transform .4s cubic-bezier(.3,1.4,.5,1)}
.vitem:hover .vitem__ic{background:var(--gold);border-color:var(--gold);color:var(--navy);transform:translateY(-3px) rotate(-7deg)}
.vitem__ic svg{width:22px;height:22px}
.vitem h3{color:#fff;font-family:var(--sans);font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.vitem p{margin-top:6px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.7)}

/* ---------- sethu meaning strip ---------- */
.sethu{position:relative;padding:clamp(64px,9vw,120px) 0;overflow:hidden;background:
  linear-gradient(180deg,var(--bg) 0%, #FFFFFF 45%, var(--bg) 100%)}
.sethu__cable{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);width:100%;height:auto;opacity:.9;pointer-events:none}
.sethu__in{position:relative;z-index:2;max-width:880px;margin:0 auto;text-align:center}
.sethu__word{font-family:var(--serif);font-size:clamp(52px,10vw,132px);font-weight:700;letter-spacing:-.05em;line-height:.9;color:var(--ink)}
.sethu__word span{color:var(--gold-d)}
.sethu__say{margin-top:18px;font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.sethu__p{margin:26px auto 0;max-width:640px;font-family:var(--serif);font-size:clamp(18px,2.1vw,25px);line-height:1.5;letter-spacing:-.02em;color:var(--ink)}
.sethu__p b{color:var(--blue);font-weight:700}
.sethu__banks{display:flex;justify-content:center;align-items:center;gap:clamp(14px,4vw,54px);margin-top:34px;flex-wrap:wrap}
.sethu__bank{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--navy)}
.sethu__dash{flex:1;min-width:60px;max-width:190px;height:1px;background:repeating-linear-gradient(90deg,var(--gold) 0 7px,transparent 7px 14px)}

/* ---------- spans (services) ---------- */
.spans{padding:clamp(52px,7vw,86px) 0 clamp(58px,8vw,96px);background:var(--paper);position:relative}
.span{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(22px,4vw,56px);align-items:center;
  padding:clamp(26px,3.4vw,42px) 0;border-top:1px solid var(--line)}
.span:last-child{border-bottom:1px solid var(--line)}
.span--rev .span__body{order:2}.span--rev .span__art{order:1}
.span__body{position:relative;z-index:2}
.span__no{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.span__no b{font-family:var(--serif);font-size:clamp(30px,4vw,50px);font-weight:700;letter-spacing:-.05em;color:var(--a);line-height:1}
.span__no span{font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.span__body h3{font-family:var(--serif);font-size:clamp(23px,2.6vw,34px);font-weight:700;letter-spacing:-.03em;margin-bottom:12px}
.span__body > p{font-size:14px;line-height:1.72;max-width:520px}
.span__tag{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--a);background:var(--aw);border-radius:999px;padding:7px 14px;margin-bottom:16px}
.span__tag svg{width:15px;height:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 22px}
.chips li{font-size:12px;font-weight:600;color:#3E5171;background:#F5F7FA;border:1px solid var(--line);border-radius:999px;padding:6px 13px;
  transition:background .25s,color .25s,border-color .25s,transform .25s}
.chips li:hover{background:var(--a);border-color:var(--a);color:#fff;transform:translateY(-2px)}
.span .tlink{color:var(--a)}
.span__art{position:relative}
.span__art svg{width:100%;height:auto;display:block}
.span__img-box{width:100%;max-width:574px;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-lg);box-shadow:var(--shadow);border:1px solid var(--line);background:var(--bg)}
.span__img-box img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.22,.7,.3,1)}
.span:hover .span__img-box img{transform:scale(1.02)}
.span__art::after{content:"";position:absolute;inset:-8% -6%;background:radial-gradient(60% 60% at 50% 50%, var(--aw), transparent 70%);opacity:0;transition:opacity .5s;z-index:-1}
.span:hover .span__art::after{opacity:1}
.pulse{opacity:.4;transform-origin:center;transition:opacity .4s}
.span:hover .pulse{opacity:1;animation:pop 1.7s ease-in-out infinite}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
.flow{opacity:0}
.span:hover .flow{opacity:1;animation:flow 2.6s linear infinite}
@keyframes flow{0%{transform:translateX(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(250px);opacity:0}}
.tile{transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.span:hover .tile:nth-of-type(1){transform:translateY(-8px)}
.span:hover .tile:nth-of-type(3){transform:translateY(-8px);transition-delay:.06s}
.span:hover .tile:nth-of-type(5){transform:translateY(-8px);transition-delay:.12s}
.span:hover .tile:nth-of-type(2){transform:translateY(6px);transition-delay:.04s}
.span:hover .tile:nth-of-type(4){transform:translateY(6px);transition-delay:.1s}
.span:hover .tile:nth-of-type(6){transform:translateY(6px);transition-delay:.16s}
.dash{stroke-dasharray:5 6}
.span:hover .dash{animation:march 1.7s linear infinite}
@keyframes march{to{stroke-dashoffset:-44}}

/* ---------- the crossing (process) ---------- */
.crossing{padding:clamp(58px,8vw,96px) 0;background:linear-gradient(180deg,var(--bg),#EDF1F7)}
.deck{position:relative;margin-top:clamp(18px,3vw,30px)}
.deck__line{position:relative;height:82px}
.deck__rail{position:absolute;left:0;right:0;top:56px;height:3px;background:#CFD8E4;border-radius:3px}
.deck__fill{position:absolute;left:0;top:56px;height:3px;width:0;background:linear-gradient(90deg,var(--navy),var(--blue));border-radius:3px;transition:width .14s linear}
.deck__pyl{position:absolute;top:18px;width:2px;height:38px;background:#DDE4EC;transform:translateX(-50%)}
.deck__pyl::before{content:"";position:absolute;top:-2px;left:-13px;width:28px;height:1px;background:#E6EBF2}
.deck__tok{position:absolute;top:8px;left:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;transition:left .14s linear;z-index:3}
.deck__tok b{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--navy);color:#fff;border-radius:999px;padding:5px 11px;white-space:nowrap;box-shadow:var(--shadow)}
.deck__tok i{width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(217,162,46,.2)}
.stations{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
.st{position:relative;padding-top:14px;text-align:center}
.st__dot{position:absolute;top:-41px;left:calc(50% - 15px);width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid #CFD8E4;
  display:grid;place-items:center;color:#9DAABD;transition:border-color .35s, color .35s, background .35s, transform .35s;z-index:2}
.st__dot svg{width:15px;height:15px}
.st.on .st__dot{border-color:var(--gold);background:var(--gold);color:var(--navy);transform:scale(1.14)}
.st__k{font-family:var(--serif);font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.st h4{font-size:14.5px;font-weight:700;color:var(--ink);margin:4px 0 6px;letter-spacing:-.01em;transition:color .3s}
.st p{font-size:12.5px;line-height:1.55;color:#66788F;max-width:190px;margin:0 auto}
.st.on .st__k{color:var(--gold-d)}
.deck__foot{display:flex;justify-content:space-between;gap:16px;margin-top:30px;padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
.deck__foot span{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.deck__foot span b{color:var(--navy)}

/* hero token crossing */

/* ---------- load-tested stats ---------- */
.load{padding:clamp(48px,6vw,76px) 0;background:var(--paper)}
.load__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.lstat{position:relative;padding:6px 20px 0;text-align:center;transition:transform .3s}
.lstat + .lstat{border-left:1px solid var(--line)}
.lstat:hover{transform:translateY(-5px)}
.lstat__ic{color:var(--navy);display:grid;place-items:center;margin-bottom:14px}
.lstat__ic svg{width:30px;height:30px;transition:transform .45s cubic-bezier(.3,1.4,.5,1),color .3s}
.lstat:hover .lstat__ic svg{transform:scale(1.14) rotate(7deg);color:var(--blue)}
.lstat b{display:block;font-family:var(--serif);font-size:clamp(32px,4.4vw,54px);font-weight:700;letter-spacing:-.05em;color:var(--ink);line-height:1}
.lstat span{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;color:#6B7C97;margin-top:8px}

/* ---------- far bank (industries) ---------- */
.bank-sec{padding:clamp(58px,8vw,96px) 0;background:var(--bg)}
.bank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bcard{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:0 0 26px;
  box-shadow:var(--shadow);transition:transform .38s cubic-bezier(.22,.7,.3,1), box-shadow .38s, border-color .38s}
.bcard:hover{transform:translateY(-7px);box-shadow:0 26px 60px rgba(11,33,73,.14);border-color:#D2DEEE}
.bcard__top{position:relative;height:132px;background:linear-gradient(135deg,#0B2149,#16346B);overflow:hidden;border-radius:var(--r-lg) var(--r-lg) 0 0}
.bcard__top .scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.22,.7,.3,1)}
.bcard:hover .bcard__top .scene{transform:scale(1.02)}
.bcard__ic{position:absolute;left:24px;top:106px;z-index:3;width:52px;height:52px;border-radius:16px;background:#fff;box-shadow:var(--shadow);
  display:grid;place-items:center;color:var(--navy);transition:transform .45s cubic-bezier(.3,1.4,.5,1), background .3s, color .3s}
.bcard__ic svg{width:24px;height:24px}
.bcard:hover .bcard__ic{transform:translateY(-4px) rotate(-7deg);background:var(--gold);color:var(--navy)}
.bcard__body{padding:44px 24px 0}
.bcard h3{font-family:var(--serif);font-size:22px;letter-spacing:-.03em;margin-bottom:8px}
.bcard p{font-size:13px;line-height:1.62;color:#5C6E8A}
.roles{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.roles li{font-size:10.5px;font-weight:600;color:#5D6F8B;background:#F1F4F9;border-radius:999px;padding:4px 9px;transition:background .25s,color .25s}
.bcard:hover .roles li{background:var(--tint-blue);color:var(--blue)}

/* ---------- about ---------- */
.about-sec{padding:clamp(58px,8vw,96px) 0;background:var(--paper)}
.about-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px,4vw,54px);align-items:center}
.about-grid p + p{margin-top:14px}
.specs{margin:24px 0 26px;display:grid;gap:10px}
.specs li{display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:600;color:#334B70;transition:transform .25s,color .25s}
.specs li svg{width:16px;height:16px;flex:0 0 auto;color:var(--green);padding:2px;border-radius:50%;background:var(--tint-green);transition:background .25s,color .25s,transform .3s}
.specs li:hover{transform:translateX(5px);color:var(--navy)}
.specs li:hover svg{background:var(--green);color:#fff;transform:rotate(-8deg)}
.about-art{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.about-art svg,.about-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,.7,.3,1)}
.about-art:hover svg,.about-art:hover img{transform:scale(1.02)}

/* ---------- why (navy) ---------- */
.why{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:clamp(58px,8vw,96px) 0}
.why::after{content:"";position:absolute;right:-160px;top:-160px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(30,107,241,.34), transparent 62%)}
.why .h2,.why h3{color:#fff}
.why .shead__no{-webkit-text-stroke-color:rgba(255,255,255,.34)}
.why .label{color:rgba(255,255,255,.6)}
.why__head{position:relative;z-index:2}
.why__head p{color:rgba(255,255,255,.72)}
.why__grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wcard{position:relative;overflow:hidden;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:22px 20px;
  transition:background .25s, transform .3s}
.wcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .38s cubic-bezier(.4,0,.2,1)}
.wcard:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)}
.wcard:hover::before{transform:scaleY(1)}
.wcard__ic{width:38px;height:38px;border-radius:11px;background:rgba(217,162,46,.16);color:var(--gold-l);display:grid;place-items:center;margin-bottom:14px;
  transition:transform .45s cubic-bezier(.3,1.4,.5,1), background .3s}
.wcard:hover .wcard__ic{transform:rotate(-8deg) scale(1.07);background:rgba(217,162,46,.3)}
.wcard__ic svg{width:19px;height:19px}
.wcard h3{font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.wcard p{margin-top:8px;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.66)}

/* ---------- contact ---------- */
.contact-sec{padding:clamp(58px,8vw,96px) 0;background:var(--bg)}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,4vw,44px);align-items:start}
.cinfo{display:grid;gap:12px;margin-top:26px}
.crow{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);
  transition:transform .28s, box-shadow .28s, border-color .28s}
.crow:hover{transform:translateX(6px);border-color:#C9D8F1;box-shadow:0 14px 32px rgba(11,33,73,.09)}
.crow__ic{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--tint-blue);color:var(--blue);display:grid;place-items:center;
  transition:background .3s,color .3s,transform .4s}
.crow:hover .crow__ic{background:var(--navy);color:#fff;transform:scale(1.06)}
.crow__ic svg{width:19px;height:19px}
.crow small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.crow b{display:block;font-size:14.5px;color:var(--ink);font-weight:600;margin-top:3px}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow)}
.form h3{font-family:var(--serif);font-size:22px;letter-spacing:-.03em;margin-bottom:4px}
.form > p{font-size:13px;color:#67788F;margin-bottom:22px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);background:#FAFBFD;border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;transition:border-color .2s, box-shadow .2s, background .2s}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,107,241,.13);background:#fff}
.form .btn{width:100%;justify-content:center;margin-top:4px}
.form__note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px}

/* ---------- footer ---------- */
.ftr{background:var(--navy-d);color:rgba(255,255,255,.68);padding:0 0 0;font-size:13px;position:relative}
.ftr__bridge{display:block;width:100%;height:auto}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:34px;padding-top:12px}
.ftr .brand__txt b{color:#fff}.ftr .brand__txt span{color:rgba(255,255,255,.6)}
.ftr p{margin-top:16px;max-width:330px;line-height:1.7;color:rgba(255,255,255,.6)}
.ftr h4{color:#fff;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.ftr li + li{margin-top:9px}
.ftr li a{color:rgba(255,255,255,.66);position:relative;transition:color .2s}
.ftr li a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:var(--gold-l);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.ftr li a:hover{color:var(--gold-l)}.ftr li a:hover::after{transform:scaleX(1)}
.ftr__bar{margin-top:44px;border-top:1px solid rgba(255,255,255,.11);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;color:rgba(255,255,255,.5)}
.ftr p.tagline{color:var(--gold-l);font-weight:600;margin-top:14px}

/* to-top */
.top{position:fixed;right:22px;bottom:22px;z-index:75;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;border:0;display:grid;place-items:center;
  cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);box-shadow:0 12px 30px rgba(11,33,73,.3);
  transition:opacity .3s, transform .3s, visibility .3s, background .3s}
.top.show{opacity:1;visibility:visible;transform:none}
.top:hover{background:var(--blue)}
.top svg{width:18px;height:18px;transform:rotate(-90deg)}

/* ---------- responsive ---------- */
@media (min-width:1281px){ body{padding-left:var(--rail)} .hdr__in{padding-left:8px} }
@media (max-width:1280px){ .rail{display:none} }
@media (max-width:1080px){
  .nav{display:none}.hdr .btn{display:none}.burger{display:flex}
  .nav.is-open{display:flex;position:absolute;top:78px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:#fff;
    border-bottom:1px solid var(--line);padding:8px 24px 20px;box-shadow:var(--shadow-lg)}
  .nav.is-open a{width:100%;padding:13px 0;border-bottom:1px solid var(--line-2);font-size:13px}
  .nav.is-open a::before{display:none}
  .nav.is-open .nav__cta{display:inline-flex;align-items:center;justify-content:center;margin-top:16px;background:var(--navy);color:#fff;border-radius:999px;
    padding:14px 20px;border:0}
  .hero__grid{grid-template-columns:1fr;gap:30px}

  .valuebar{grid-template-columns:repeat(2,1fr)}
  .vitem{border-left:0;border-top:1px solid rgba(255,255,255,.11)}
  .vitem:nth-child(-n+2){border-top:0}
  .vitem:nth-child(even){border-left:1px solid rgba(255,255,255,.11)}
  .span,.span--rev{grid-template-columns:1fr}
  .span--rev .span__body{order:1}.span--rev .span__art{order:2}
  .stations{grid-template-columns:repeat(5,1fr);gap:8px}
  .st p{display:none}
  .bank-grid{grid-template-columns:1fr 1fr}
  .about-grid,.contact,.why__grid{grid-template-columns:1fr}
  .why__grid{grid-template-columns:1fr 1fr}
  .ftr__grid{grid-template-columns:1fr 1fr}
}
/* iOS Safari zooms the whole page in whenever a focused form control is under
   16px, and it does not zoom back out afterwards - the visitor is left pinching
   to escape, mid-enquiry. 16px on the widths where the nav has already gone
   mobile avoids it; desktop keeps the 14px the design wants. */
@media (max-width:1080px){
  .field input,.field select,.field textarea{font-size:16px}
}

@media (max-width:720px){
  .hdr__in{height:68px}.nav.is-open{top:68px}
  .valuebar{grid-template-columns:1fr}
  .vitem:nth-child(even){border-left:0}.vitem:nth-child(2){border-top:1px solid rgba(255,255,255,.11)}
  .shead{grid-template-columns:1fr;gap:10px}
  .bank-grid,.why__grid,.f2,.ftr__grid,.load__grid{grid-template-columns:1fr}
  .lstat + .lstat{border-left:0;border-top:1px solid var(--line);padding-top:22px;margin-top:22px}
  .lstat{display:flex;align-items:center;gap:16px;text-align:left;padding:0}
  .lstat__ic{margin-bottom:0}
  .lstat span{margin-top:2px}
  .deck__line{height:56px}
  .stations{grid-template-columns:1fr;gap:0}
  .st{padding:14px 0 14px 44px;border-top:1px solid var(--line);text-align:left}
  .st p{margin:0;max-width:none}
  .st__k{font-size:11px}
  .st:first-child{border-top:0}
  .st p{display:block}
  .st__dot{top:14px;left:0}
  .form{padding:22px 18px}
  .top{right:14px;bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  html.js .rv{opacity:1!important;transform:none!important}
  .draw{stroke-dashoffset:0!important}
}

/* ---------- honeypot + form status ---------- */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form__note.is-ok{color:var(--green);font-weight:600}
.form__note.is-err{color:#C0392B;font-weight:600}
.form.is-sending{opacity:.72;pointer-events:none}

/* ================= hero (reference design) ================= */
.hero{position:relative;overflow:hidden;padding:clamp(36px,5vw,64px) 0 0}
.hero__bg{position:absolute;top:-78px;right:0;width:64%;height:calc(100% + 78px);z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* The wash is only here so the headline stays readable where it crosses the photo. It used
   to still be carrying .25 opacity at the right-hand edge, which left a permanent haze over
   the part of the picture nothing sits on top of — so it now clears completely by the end. */
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(244,246,249,.86) 20%,rgba(244,246,249,.38) 46%,rgba(244,246,249,.06) 74%,rgba(244,246,249,0) 100%)}
.hero__dots{position:absolute;left:-6px;top:46%;width:110px;height:94px;z-index:0;pointer-events:none;
  background-image:radial-gradient(var(--gold) 1.6px,transparent 1.6px);background-size:14px 14px;opacity:.38}
.hero .wrap{position:relative;z-index:2}

/* The copy column was 1fr - far wider than the headline needs - so the emblem
   started only where that empty track ended. Sizing the track to the text
   instead, and tightening the gap, walks the emblem left up against the words.
   max-content measures the longest forced line of the h1, so the track ends
   where "People. Technology." ends - no dead space, and it re-measures itself
   if Georgia renders before Source Serif arrives. The max-width on h1 below
   caps that contribution so a missing font can never blow the track out. */
.hero__grid{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);
  gap:clamp(14px,2vw,28px);align-items:center}
.hero h1{font-size:clamp(34px,4.3vw,56px);letter-spacing:-.038em;line-height:1.04;max-width:560px}
.hero__rule{display:block;width:56px;height:3px;background:var(--gold);border-radius:3px;margin:22px 0 0}
.hero__lead{margin-top:20px;max-width:400px;font-size:14.5px;line-height:1.75}
.hero__cta{margin-top:26px}

/* orbiting emblem */
.emblem{width:100%;max-width:330px;margin:0 auto}
.emblem svg{width:100%;height:auto;overflow:visible}
/* Rings hold still: a rotating dashed circle reads as a loading spinner.
   The mark itself is the only thing that moves. */
.em-orbit,.em-orbit-r{transform-origin:200px 200px}

/* Load: fade up 10px and settle. Then breathe - 3px over 6s, ease-in-out.
   Transform/opacity only, so nothing reflows and nothing shifts. */
.hero__mark{animation:mark-settle 1.05s cubic-bezier(.22,.7,.3,1) .3s both}
.hero__mark svg{animation:mark-float 6s ease-in-out 1.35s infinite}
@keyframes mark-settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mark-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* One quiet illumination along the gold arc as the mark lands, then it rests. */
.em-cable{animation:cable-lit 1.5s ease-in-out .9s 1 both}
@keyframes cable-lit{0%{opacity:.16}45%{opacity:1}100%{opacity:.85}}
/* The four pods ride the r=152 dotted ring, so a plain rotation about the
   emblem centre keeps them exactly on it. .em-pod turns the arm; .em-pod__spin
   turns each icon back by the same amount at the same rate, otherwise a
   briefcase arrives upside down at the bottom of the circle. Same duration and
   no delay on both, so the four stay 90deg apart and the icons stay upright.
   32s is a drift rather than a spin - still at a glance, moved on second look. */
.em-pod{transform-box:view-box;transform-origin:200px 200px;animation:pod-orbit 32s linear infinite}
.em-pod__spin{transform-box:fill-box;transform-origin:center;animation:pod-upright 32s linear infinite}
@keyframes pod-orbit{to{transform:rotate(360deg)}}
@keyframes pod-upright{to{transform:rotate(-360deg)}}

/* Hover or keyboard focus parks the orbit so a pod can be aimed at and read.
   focus-within matters as much as hover here: a tabbing user cannot chase a
   moving target, and touch has no hover at all. */
.emblem:hover .em-pod,.emblem:hover .em-pod__spin,
.emblem:focus-within .em-pod,.emblem:focus-within .em-pod__spin{animation-play-state:paused}

/* The pods are shortcuts now, so they have to behave like targets. The hit
   circle is r=34 against a visible r=30: 44px of target at the 260px desktop
   emblem, ~31px at the 180px mobile one, with nothing added to what is drawn.
   fill:transparent still counts as painted for hit-testing, but the explicit
   pointer-events removes the doubt. It sits outside .em-ico on purpose, so the
   target does not move as the icon scales under the cursor. */
.em-link{cursor:pointer}
.em-hit{fill:transparent;pointer-events:all}
.em-ring{transition:stroke .25s,stroke-width .25s}
.em-link:hover .em-ring,.em-link:focus-visible .em-ring{stroke:var(--gold);stroke-width:2.2}

/* The scale needs its own layer because .em-pod and .em-pod__spin have their
   transform property claimed by the orbit animations. */
.em-ico{transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.em-link:hover .em-ico,.em-link:focus-visible .em-ico{transform:scale(1.08)}

/* A UA outline would be drawn around the rotated group and clipped oddly, so the
   focus ring is the hit circle itself - concentric with the pod, and the same
   44px whatever the icon is doing. */
.em-link:focus-visible{outline:none}
.em-link:focus-visible .em-hit{stroke:var(--navy);stroke-width:1.6;stroke-dasharray:3 4}
@media (pointer:coarse){
  .em-hit{r:50}
}

@media (max-width:1180px){
  /* The base track is max-content, so it already follows the headline as the
     vw-based font-size shrinks. No column override needed here. */
  .emblem{max-width:280px}
}
@media (max-width:900px){
  /* One column now, so the copy sits directly on the photo and the photo has to be
     held back behind it. It was being dimmed twice over though - a layer at opacity
     .8 AND a wash that only thinned to .34 - which left the deck showing at about
     half strength for no gain. The wash alone is enough, so the layer runs at full
     opacity and the gradient does all the work: denser over the copy than before
     (.88 at 30%, against .8 at 38%), then cleared much harder below it. Net effect
     is .88 at the deck against .53, with the headline marginally better protected. */
  .hero__bg{width:100%;opacity:1}
  .hero__bg::after{background:linear-gradient(180deg,rgba(244,246,249,.95) 0%,rgba(244,246,249,.88) 30%,rgba(244,246,249,.45) 62%,rgba(244,246,249,.12) 100%)}
  .hero__grid{grid-template-columns:1fr;gap:28px}
  .emblem{max-width:240px}

}
@media (prefers-reduced-motion:reduce){
  .hero__mark,.hero__mark svg,.em-cable,.em-pod,.em-pod__spin{animation:none}
  .hero__mark{opacity:1;transform:none}
  .em-cable{opacity:.85}
}

/* ---------- span image module: one component, three instances ----------
   Identical in every span - same 4:3 box, same cover, same 26px radius, same
   position in the grid. The source files are square, so cover does the work;
   nothing is stretched and no photo can make its span taller than another. */
.span__art img{
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:center;
  border-radius:26px;
}

/* ---------- span composition refinements (all three spans) ----------
   Goal is an editorial service section rather than "text left, image right":
   a tighter approach, a spine that ties the 01 marker to the copy beneath it,
   and a hairline reaching across the gutter so the two columns read as one. */

/* 1 · tighter approach to the first span.
   Whitespace above the 01 marker was 86px section padding + 52px shead margin
   = 138px; now 52 + 38 = 90px, a 35% reduction, without crowding the heading. */
.spans{padding:clamp(32px,4.2vw,52px) 0 clamp(58px,8vw,96px)}
.spans .shead{margin-bottom:clamp(22px,3vw,38px)}

/* 2 · the spine. One hairline, starting in the span's own accent beside the
   numeral and dissolving into navy as it descends past the copy. Reads as a
   pylon line without drawing a bridge. */
.span__body{padding-left:clamp(16px,1.8vw,26px)}
.span__body::before{
  content:"";position:absolute;left:0;top:5px;bottom:12px;width:1px;
  background:linear-gradient(180deg,var(--a) 0%,rgba(11,33,73,.26) 45%,rgba(11,33,73,0) 100%);
  opacity:.45;
}

/* 3 · the tie. A hairline crossing the gutter into the image edge, mirrored on
   reversed spans so it always points from the copy toward the picture. */
.span__art::before{
  content:"";position:absolute;top:50%;right:100%;height:1px;
  width:clamp(22px,4vw,56px);
  background:linear-gradient(90deg,rgba(11,33,73,0),var(--a));
  opacity:.3;transition:opacity .5s,width .5s cubic-bezier(.22,.7,.3,1)}
.span--rev .span__art::before{right:auto;left:100%;
  background:linear-gradient(270deg,rgba(11,33,73,0),var(--a))}
.span:hover .span__art::before{opacity:.55}

/* 4 · vertical rhythm — even steps down the block, and the CTA pulled up
   close to the chips so it stops floating. */
.span__no{margin-bottom:18px}
.span__tag{margin-bottom:18px}
.span__body h3{margin-bottom:14px}
.chips{margin:22px 0 18px}

/* single column: the gutter is gone, so the tie has nothing to cross */
@media (max-width:900px){
  .span__art::before{display:none}
  .span__body{padding-left:clamp(14px,3vw,20px)}
}

/* ---------- Sethu section: architectural bridge plate ----------
   Dedicated layer so its opacity is independent of the copy, which keeps its
   own z-index:2 above it. Width-pinned rather than `cover`: the plate is
   3.48:1 and the section is nearer 2:1, so cover would scale to fill the
   height and crop to the middle 56% — throwing both pylons off-screen and
   leaving only the deliberately empty centre. 100% width keeps the full span
   and both pylons in frame, which is the whole point of the composition. */
.sethu::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("../images/sethu-bridge.svg");
  background-repeat:no-repeat;
  background-position:center 60%;
  background-size:100% auto;
  opacity:.10;
}
/* Small screens: the full span would thin to a hairline, so let it enlarge and
   crop into a texture instead, as intended for mobile. */
@media (max-width:620px){
  .sethu::before{background-size:180% auto;background-position:center 62%;opacity:.085}
}
@media (prefers-contrast:more){
  .sethu::before{display:none}
}

/* The plate above is now the section's only bridge visual — the original
   suspension-cable graphic is retired so the two motifs stop competing. */
.sethu__cable{display:none}

/* About image is now a square photo in a slot that was 460x340. Pin the ratio
   and let cover crop, so switching from illustration to photo doesn't change
   the section's height. */
.about-art img{aspect-ratio:460 / 340;object-fit:cover;object-position:center}

/* Emblem sits beside the headline, not centred against the whole copy block -
   align-self:start lifts it to the top of the row so it sits level with
   "People. Technology. Possibilities." rather than drifting down beside the
   paragraph. margin-right:auto keeps it hard against the left edge of its
   track, which the narrowed copy column above has pulled in towards the text. */
.hero__grid .emblem{align-self:start;margin:0 auto 0 0;max-width:clamp(180px,19vw,260px)}